diff --git a/.claude/skills/edr-db/SKILL.md b/.claude/skills/edr-db/SKILL.md
new file mode 100644
index 000000000..47333128d
--- /dev/null
+++ b/.claude/skills/edr-db/SKILL.md
@@ -0,0 +1,42 @@
+---
+name: edr-db
+description: Query, EXPLAIN-validate, and inspect the remote EDR freight dev database. Use whenever you need to check data, verify a raw SQL statement before shipping it, list a table's columns, check schema drift, or see which migrations are recorded. psql is NOT installed on this machine — this runner is the sanctioned path. Triggers - "check the db", "query edr_dev", "does column X exist", "validate this SQL", "is migration recorded", "seed check", diagnosing a 400/500 whose cause may be data or schema.
+---
+
+# EDR dev-DB runner
+
+One script, runs from anywhere in the repo (resolves `pg` from `apps/edr-freight-api`):
+
+```bash
+node .claude/skills/edr-db/query.cjs "SELECT ... "         # run SQL, console.table output
+node .claude/skills/edr-db/query.cjs explain "SELECT ..."  # EXPLAIN-validate only (no rows touched)
+node .claude/skills/edr-db/query.cjs columns <table>       # freight.<table> column list
+node .claude/skills/edr-db/query.cjs migrations [like]     # public.migrations rows (newest first)
+node .claude/skills/edr-db/query.cjs drift <table>         # bare column names, for diffing vs the entity
+```
+
+Connection comes from `DB_HOST` / `DB_PORT` / `DB_USER` / `DB_PASSWORD` / `DB_NAME`,
+defaulting to the shared dev database (`edr_dev`).
+
+## Rules that go with it
+
+- **HARD RULE: every raw SQL statement you write into a service must pass
+  `explain` here before you ship it.** A typo'd column is a runtime 500 the
+  type-checker cannot catch.
+- Never assume a recorded migration applied — check `migrations <name>` **and**
+  `columns <table>` together. Recorded-but-absent = schema drift; fix with a
+  NEW repair migration (idempotent DDL, no-op `down()`), never by editing the
+  recorded one.
+- Writes to dev data are fine for seeding/diagnosis but keep them idempotent
+  (`WHERE NOT EXISTS` guards) — watch-mode API instances race `migrationsRun`,
+  and non-idempotent statements have double-run here before.
+- Timestamps for new migrations: must be unique across `src/migrations/` AND
+  higher than `SELECT max(timestamp) FROM public.migrations`.
+
+## Diagnosing a pasted 400/500 (the recurring loop)
+
+1. Find the route: grep the path segment in `apps/edr-freight-api/src/modules/*/**.controller.ts`.
+2. Read the service method — list its guard `throw`s. Most "bugs" are a guard
+   working as designed (handover unsigned, fee unpaid, not PAID, wrong direction).
+3. Check the actual DB state for that record with this runner.
+4. Only then decide: guard doing its job (fix the UI affordance) vs real defect.
diff --git a/.claude/skills/edr-db/query.cjs b/.claude/skills/edr-db/query.cjs
new file mode 100644
index 000000000..b4797bd45
--- /dev/null
+++ b/.claude/skills/edr-db/query.cjs
@@ -0,0 +1,88 @@
+#!/usr/bin/env node
+/**
+ * Dev-DB runner for the EDR freight database. psql is NOT installed on this
+ * machine; this is the sanctioned way to query, EXPLAIN-validate, and inspect
+ * the remote dev DB. Resolves `pg` from apps/edr-freight-api so it runs from
+ * anywhere in the repo.
+ *
+ *   node .claude/skills/edr-db/query.cjs "SELECT ... "        run SQL (console.table)
+ *   node .claude/skills/edr-db/query.cjs explain "SELECT..."  EXPLAIN-validate only
+ *   node .claude/skills/edr-db/query.cjs columns <table>      list freight.<table> columns
+ *   node .claude/skills/edr-db/query.cjs migrations [like]    public.migrations rows
+ *   node .claude/skills/edr-db/query.cjs drift <table>        columns vs entity check helper
+ *
+ * Connection: DB_HOST/DB_PORT/DB_USER/DB_PASSWORD/DB_NAME env vars, falling
+ * back to the shared dev database.
+ */
+const path = require('path');
+const { createRequire } = require('module');
+
+const repoRoot = path.resolve(__dirname, '..', '..', '..');
+const apiRequire = createRequire(
+  path.join(repoRoot, 'apps', 'edr-freight-api', 'package.json'),
+);
+const { Client } = apiRequire('pg');
+
+const cfg = {
+  host: process.env.DB_HOST ?? '10.18.7.207',
+  port: parseInt(process.env.DB_PORT ?? '5432', 10),
+  user: process.env.DB_USER ?? 'postgres',
+  password: process.env.DB_PASSWORD ?? 'dcba@1234',
+  database: process.env.DB_NAME ?? 'edr_dev',
+};
+
+const [, , first, ...rest] = process.argv;
+
+async function main() {
+  if (!first) {
+    console.error('usage: query.cjs "<sql>" | explain "<sql>" | columns <table> | migrations [like] | drift <table>');
+    process.exit(2);
+  }
+  const c = new Client(cfg);
+  await c.connect();
+  try {
+    if (first === 'columns') {
+      const r = await c.query(
+        `SELECT column_name, data_type, is_nullable, column_default
+           FROM information_schema.columns
+          WHERE table_schema='freight' AND table_name=$1
+          ORDER BY ordinal_position`,
+        [rest[0]],
+      );
+      console.table(r.rows);
+    } else if (first === 'migrations') {
+      const like = rest[0] ? `%${rest[0]}%` : '%';
+      const r = await c.query(
+        `SELECT id, timestamp, name FROM public.migrations
+          WHERE name ILIKE $1 ORDER BY id DESC LIMIT 40`,
+        [like],
+      );
+      console.table(r.rows);
+    } else if (first === 'drift') {
+      // Quick drift signal: DB columns for the table. Compare by eye against
+      // the entity's @Column names; a recorded-but-absent column = drift.
+      const r = await c.query(
+        `SELECT column_name FROM information_schema.columns
+          WHERE table_schema='freight' AND table_name=$1 ORDER BY column_name`,
+        [rest[0]],
+      );
+      console.log(r.rows.map((x) => x.column_name).join('\n'));
+    } else if (first === 'explain') {
+      await c.query('EXPLAIN ' + rest.join(' '));
+      console.log('OK — statement is valid against', cfg.database);
+    } else {
+      const sql = [first, ...rest].join(' ');
+      const started = Date.now();
+      const r = await c.query(sql);
+      if (Array.isArray(r.rows) && r.rows.length) console.table(r.rows);
+      console.log(`${r.rowCount ?? 0} row(s), ${Date.now() - started}ms`);
+    }
+  } finally {
+    await c.end();
+  }
+}
+
+main().catch((e) => {
+  console.error('FAIL:', e.message);
+  process.exit(1);
+});
diff --git a/.claude/skills/standup/SKILL.md b/.claude/skills/standup/SKILL.md
new file mode 100644
index 000000000..272f280e7
--- /dev/null
+++ b/.claude/skills/standup/SKILL.md
@@ -0,0 +1,40 @@
+---
+name: standup
+description: Produce the work report Hagernesh asks for - "what have I done today", "tasks of yesterday and today", daily/period summaries for tickets or timesheets. Builds the answer from git history plus uncommitted work, never from memory alone.
+---
+
+# Work report (standup / ticket summary)
+
+Ground every line in git. Do not reconstruct from conversation memory — commits
+are the record.
+
+## Gather
+
+```bash
+# Commits in the window (adjust dates; author matches "Hagernesh")
+git log --since="YYYY-MM-DD 00:00" --until="YYYY-MM-DD 00:00" --author=Hagernesh \
+  --pretty=format:"%h|%ad|%s" --date=short
+
+# What each commit actually contains (subjects lie sometimes)
+git show --stat --pretty=format:"%s" <hash> | head -12
+
+# In-flight work = part of "today" even if uncommitted
+git status --short
+git log origin/dev..HEAD --oneline     # branch commits not yet in dev
+```
+
+## Known pitfalls in this repo
+
+- **Check subjects against contents.** Commit titles here sometimes mismatch the
+  diff (e.g. a commit titled "unload export" that actually contained ISO
+  container validation). Use `git show --stat` before reporting a title as fact.
+- A day with no commits usually still has uncommitted/in-flight work — report it
+  as its own section with per-item status (done / uncommitted / blocked).
+- Merge commits from other authors are noise; filter with `--author`.
+
+## Output format
+
+One table per day: `# | Task (plain language, not the commit subject verbatim) |
+Commit / Status`. Follow with a short "carry-over / blocked" list naming what
+blocks each item. Keep it ticket-ready: no jargon that needs the repo open to
+decode.
diff --git a/.claude/skills/verify/SKILL.md b/.claude/skills/verify/SKILL.md
new file mode 100644
index 000000000..a2c715db4
--- /dev/null
+++ b/.claude/skills/verify/SKILL.md
@@ -0,0 +1,59 @@
+---
+name: verify
+description: Project definition-of-done runner for the EDR platform. Use before calling any code change finished, before committing, and whenever asked "is it done / does it work". Runs the targeted checks that actually catch this repo's failure modes - type-check with turbo filters, @edr/types dist rebuild, raw-SQL EXPLAIN validation, migration safety, and honest test reporting.
+---
+
+# Verify a change (EDR definition of done)
+
+Run these in order. Report which you ran and what each said — never call
+unverified work done.
+
+## 1. Type-check exactly what you touched
+
+```bash
+pnpm turbo type-check --filter=@edr/freight-api --filter=@edr/freight-backoffice --filter=@edr/freight-portal
+```
+
+Drop filters you didn't touch; whole-repo runs waste minutes. **If you edited
+`packages/types`, rebuild it FIRST** — consumers read its `dist/`, not `src/`:
+
+```bash
+pnpm turbo build --filter=@edr/types
+```
+
+## 2. Validate every raw SQL statement
+
+Each new/edited `dataSource.query` / `manager.query` string must pass:
+
+```bash
+node .claude/skills/edr-db/query.cjs explain "<the statement with dummy params>"
+```
+
+## 3. Migration checklist (if you added one)
+
+- Timestamp unique in `src/migrations/` **and** greater than
+  `node .claude/skills/edr-db/query.cjs "SELECT max(timestamp) FROM public.migrations"`.
+- DDL idempotent (`IF NOT EXISTS`, guarded backfills).
+- Watch-mode reload does NOT run migrations — apply the SQL to the dev DB
+  yourself or fully restart the API, then confirm with
+  `query.cjs columns <table>`.
+
+## 4. Tests — honest bar
+
+`pnpm test` for `@edr/freight-api` is currently red on `dev`, so a green suite
+is not the bar. The bar: run the specs nearest what you touched and introduce
+**no new failure**. If you touched a service constructor, update its `.spec.ts`
+mocks (constructor-arity breaks are this repo's most common test regression).
+
+## 5. Observe the behaviour
+
+Compiling is not working. Hit the endpoint, drive the UI flow, or query the
+resulting rows. If you genuinely could not observe it, say so explicitly in the
+summary — do not imply it was seen working.
+
+## 6. Before commit
+
+- Conventional message (`fix(warehouses): …`). Git hooks do NOT run in this
+  repo (husky shims exist but no user hooks) — nothing will catch it for you.
+- Lint the files you touched if in doubt: `pnpm turbo lint --filter=<pkg>`.
+- Do not commit or push unless the user asked.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 62530611c..057cb0c1b 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -31,6 +31,7 @@ jobs:
             "freight-api"
             "freight-portal"
             "freight-backoffice"
+            "gps-tracker"
             "passenger-api"
             "passenger-portal"
             "passenger-backoffice"
@@ -71,6 +72,7 @@ jobs:
           echo "$CHANGED" | grep -q "^apps/edr-freight-api/"              && SERVICES+=("freight-api")
           echo "$CHANGED" | grep -q "^apps/edr-freight-web/portal/"       && SERVICES+=("freight-portal")
           echo "$CHANGED" | grep -q "^apps/edr-freight-web/backoffice/"   && SERVICES+=("freight-backoffice")
+          echo "$CHANGED" | grep -q "^apps/edr-gps-tracker/"              && SERVICES+=("gps-tracker")
           echo "$CHANGED" | grep -q "^apps/edr-passenger-api/"            && SERVICES+=("passenger-api")
           echo "$CHANGED" | grep -q "^apps/edr-passenger-web/portal/"     && SERVICES+=("passenger-portal")
           echo "$CHANGED" | grep -q "^apps/edr-passenger-web/backoffice/" && SERVICES+=("passenger-backoffice")
@@ -109,7 +111,7 @@ jobs:
       - name: Resolve project and build env file
         run: |
           case "${{ matrix.service }}" in
-            freight-api|freight-portal|freight-backoffice)
+            freight-api|freight-portal|freight-backoffice|gps-tracker)
               echo "PROJECT=edr-freight"                      >> "$GITHUB_ENV"
               echo "BUILD_ENV_FILE=freight-web.build.env"    >> "$GITHUB_ENV"
               ;;
diff --git a/.gitignore b/.gitignore
index ffdc4b78b..ca2a5b7af 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,3 +28,4 @@ coverage/
 *~
 \#*\#
 .\#*
+docker-compose.override.yml
diff --git a/CLAUDE_NEW.md b/CLAUDE_NEW.md
new file mode 100644
index 000000000..11075e9f0
--- /dev/null
+++ b/CLAUDE_NEW.md
@@ -0,0 +1,294 @@
+# EDR Platform — Developer Guide
+
+> This file is the contract. If something here contradicts the code, the code is the
+> truth and this file is a bug — fix it in the same PR.
+
+## Overview
+
+Monorepo for the Ethio Djibouti Railway (EDR) digital platform. Contains the Freight
+Management and Passenger Management applications, a payment microservice, plus shared
+types, NestJS utilities, and React component libraries.
+
+The freight domain is the largest and most active area. Its core flow is:
+**booking → receive to warehouse → store → load onto train → dispatch → arrive → unload
+→ customer truck (self-haul) or EDR last mile → handover → exit paper → delivered.**
+Fees (storage, demurrage, double handling, truck detention) and allocation rules
+(warehouse/yard/zone) hang off the warehouse stage.
+
+## Apps
+
+| App                            | Package name                | Purpose                                            | Default port |
+| ------------------------------ | --------------------------- | -------------------------------------------------- | ------------ |
+| `edr-freight-api`              | `@edr/freight-api`          | NestJS API for freight management                  | 3001 |
+| `edr-freight-web/portal`       | `@edr/freight-portal`       | React frontend for freight customer/portal users   | 5173 |
+| `edr-freight-web/backoffice`   | `@edr/freight-backoffice`   | React frontend for freight backoffice employees    | 5183 |
+| `edr-passenger-api`            | `@edr/passenger-api`        | NestJS API for passenger management                | 3002 |
+| `edr-payment-api`              | `@edr/payment-api`          | NestJS payment microservice (intents, webhooks)    | 3003 |
+| `edr-passenger-web/portal`     | `@edr/passenger-portal`     | React frontend for passenger customer/portal users | 5174 |
+| `edr-passenger-web/backoffice` | `@edr/passenger-backoffice` | React frontend for passenger backoffice employees  | 5184 |
+
+`edr-freight-web` and `edr-passenger-web` are grouping folders, not workspace packages.
+Each holds a `portal/` and `backoffice/` sub-app, both independent pnpm workspace
+packages (see `pnpm-workspace.yaml`).
+
+`apps/edr-landing/` exists on disk but has **no `package.json`** — it is not a workspace
+package and is not built, linted, or type-checked. Leave it alone unless asked.
+
+## Packages
+
+| Package                | Purpose                                                                            |
+| ---------------------- | ---------------------------------------------------------------------------------- |
+| `@edr/types`           | Shared TypeScript interfaces and enums                                             |
+| `@edr/api-common`      | Shared NestJS decorators, filters, interceptors, pipes, BaseEntity, BaseRepository |
+| `@edr/ui-common`       | Shared React components and theme                                                  |
+| `@edr/eslint-config`   | Shared ESLint configurations (base/nestjs/react)                                   |
+| `@edr/tsconfig`        | Shared TypeScript configurations                                                   |
+| `@edr/prettier-config` | Shared Prettier configuration                                                      |
+
+**`@edr/types` is consumed as its built `dist/`** (`main: ./dist/index.js`). Editing a
+type in `packages/types/src` changes nothing for consumers until you rebuild:
+
+```bash
+pnpm turbo build --filter=@edr/types
+```
+
+If a type-check fails on a field you just added to `@edr/types`, this is why.
+
+## Commands
+
+| Command                     | Description                              |
+| --------------------------- | ---------------------------------------- |
+| `pnpm install`              | Install all workspace dependencies        |
+| `pnpm dev`                  | Run every app in dev mode                 |
+| `pnpm dev:freight`          | Freight API + portal + backoffice         |
+| `pnpm dev:freight:api`      | Freight API only                          |
+| `pnpm dev:freight:portal`   | Freight portal only                       |
+| `pnpm dev:freight:backoffice` | Freight backoffice only                 |
+| `pnpm dev:passenger`        | Passenger API + web                       |
+| `pnpm dev:payment`          | Payment API                               |
+| `pnpm build`                | Build every package and app               |
+| `pnpm test`                 | Run all tests (turbo)                     |
+| `pnpm lint`                 | Lint everything                           |
+| `pnpm type-check`           | Type-check every package                  |
+| `pnpm format`               | Format all files with Prettier            |
+
+Prefer targeted turbo filters over whole-repo runs — they are minutes faster:
+
+```bash
+pnpm turbo type-check --filter=@edr/freight-api --filter=@edr/freight-backoffice
+```
+
+`apps/edr-freight-api` also carries many `seed:*` scripts (demo bookings, wagons, trains,
+gate-pass scenarios). Read the script before running one; several write real rows.
+
+## Environment & database
+
+- Postgres is **external**. There is no postgres service in `docker-compose.yaml`, and
+  no port `5433`/`5434` is published anywhere in the repo.
+- Freight API connection comes from `DB_HOST`, `DB_PORT`, `DB_USER`, `DB_PASSWORD`,
+  `DB_NAME` (defaults: `localhost:5433`, `edr_freight`). Development points these at a
+  remote database.
+- The connection sits behind a **connection pooler**. Do **not** pass
+  `extra.options: '-c search_path=…'` — the pooler rejects it with
+  `08P01 unsupported startup parameter in options: search_path`. `search_path` is applied
+  per-connection in a pool `connect` handler instead. See
+  `apps/edr-freight-api/src/config/database.config.ts` before touching connection options.
+- Each app owns its own database. **No cross-database joins**; cross-domain data flows
+  through API calls or message queues.
+- `psql` is not installed on the dev machine. To query the database, write a short Node
+  script using the `pg` client and run it from `apps/edr-freight-api` (where `pg` resolves).
+
+## Hard rules
+
+These are non-negotiable. Everything else is a strong default.
+
+- **pnpm only.** Never run `npm install` or `yarn`.
+- **TypeScript strict mode** is on in every package and app. Do not weaken it, and do not
+  reach for `any` to make an error go away.
+- **Never `synchronize: true`.** Not in production, not anywhere. It is currently `false`
+  in every config and it has already corrupted this database twice (see *Migrations*).
+  All schema changes go through TypeORM migrations.
+- **All entities** use UUID primary keys (`@PrimaryGeneratedColumn('uuid')`).
+- **All entities** extend `BaseEntity` from `@edr/api-common` — `createdAt`, `updatedAt`,
+  `deletedAt` (soft delete).
+- **All columns** are `snake_case` in the database (`@Column({ name: 'snake_case' })`);
+  TypeScript properties are `camelCase`.
+- **Controllers contain no business logic.** They validate, delegate, and shape the response.
+- **Conventional commits.** `fix(warehouses): …`, `feat(bookings): …`.
+- **Do not commit or push unless asked.** Propose the change; let the human decide when it lands.
+- **Do not break working behaviour to add new behaviour.** When a fix is risky, say so and
+  offer the safe version.
+
+## Architecture
+
+### NestJS module shape
+
+`module → controller → service → repository`, with `entities/` and `dto/` alongside.
+
+### Data access — the real model
+
+There are two sanctioned ways to read and write, and you must pick the right one:
+
+1. **Entity CRUD → the custom repository class.** Extends `BaseRepository<Entity>` from
+   `@edr/api-common`. Services inject the repository class, never `Repository<T>` directly.
+2. **Read projections, queue endpoints, cross-table reports → raw SQL** via
+   `this.dataSource.query(...)` or `manager.query(...)` inside a transaction.
+
+Raw SQL is normal here, not a smell — the warehouse and scheduling modules are built on it.
+It carries one obligation:
+
+> **HARD RULE — validate every raw SQL statement against a real database before you ship it.**
+> A typo'd column name is a runtime 500 that no type-checker will catch. Run it through
+> `EXPLAIN` against the dev database. Column drift is real (see *Migrations*).
+
+Writes inside a transaction use `manager.getRepository(Entity)`, not the injected repository,
+so they join the caller's transaction.
+
+**Never do slow I/O inside a database transaction.** Queue the work and fan it out after
+commit. An SMS awaited inside a transaction once held capacity locks open for the whole
+gateway timeout. Any outbound HTTP call must set an explicit `timeout` — axios defaults to
+no timeout and will wait forever.
+
+### Migrations
+
+Migrations are the most dangerous surface in this repo. Two production-grade incidents have
+already come from it.
+
+- `migrationsRun: true` — **migrations run automatically on API boot**, with
+  `migrationsTransactionMode: 'each'`.
+- Consequences you must design for:
+  - Running several `nest start --watch` instances races `migrationsRun`. A non-idempotent
+    data migration can execute twice. Keep one instance.
+  - A watch-mode hot reload does **not** re-run migrations. If you add a column that new
+    code reads, apply it to the dev database yourself (idempotently) or fully restart.
+- **Give every migration a unique timestamp.** 34 timestamps are currently shared by two or
+  more migrations. TypeORM orders by timestamp and breaks ties non-deterministically. Before
+  adding one, check the filename prefix is unused *and* higher than the newest recorded row.
+- **Write idempotent DDL**: `ADD COLUMN IF NOT EXISTS`, `CREATE INDEX IF NOT EXISTS`, and
+  backfills guarded by `WHERE col IS NULL`.
+- **Never assume a recorded migration actually applied.** `AddGrnNumberToWarehouseInventory`
+  was recorded in `migrations` while its column was absent — it had been dropped out of band.
+  TypeORM will never re-run a recorded migration, so the fix is a *new repair migration*.
+- **A repair migration's `down()` should be a no-op.** Reverting a repair must not
+  re-introduce the outage it fixed.
+
+### Auth
+
+Auth **is implemented in this repo.** Do not add TODO stubs, and do not write your own.
+
+- `@CurrentUser()` (`@edr/api-common`) is a real `createParamDecorator`, not a metadata stub.
+- Route protection uses `@UseGuards(JwtGuard)` and `@UseGuards(PermissionGuard([...]))`.
+- Freight-domain checks use `hasFreightPermission(user, FREIGHT_PERMS.<area>.<action>)`.
+- Permissions are declared in `apps/edr-freight-api/src/seed/freight-permissions.registry.ts`.
+  Add a permission there before referencing it.
+- IAM has its own migrations, run ahead of freight migrations from the same data source, and
+  its own CLI scripts (`iam:migration:run`, `iam:seed:run`).
+
+Ownership checks are separate from permission checks. A staff user passes
+`hasFreightPermission`; a customer must additionally pass an ownership assertion such as
+`assertCustomerCanAccessBooking`. Do not drop the ownership check because the permission check passed.
+
+## Frontend conventions
+
+- The web apps use **Mantine v9**. Its APIs differ from v6/v7 — check the installed version
+  before copying a snippet.
+- `@edr/ui-common` holds shared components and theme; it is imported in ~94 files across the
+  freight web apps. Prefer it over re-implementing a component.
+- **Blob downloads need the async error decoder.** A request with `responseType: 'blob'`
+  delivers the JSON error body as a `Blob`, so the synchronous `extractErrorMessage` finds no
+  `.message` and degrades to `"Request failed with status code 400"`. Use
+  `await extractDownloadErrorMessage(error)` in every PDF/blob catch block. Mutation catches
+  keep the synchronous version — their bodies are already parsed JSON.
+- Server-side guards must be reflected in the UI. If the API will reject the action, the
+  button should be disabled, hidden, or explain the blocker — not fire and surface a 400.
+- Prefer disabling a control with a visible reason over silently hiding it.
+
+## Notifications
+
+In-app notifications resolve recipients from the company's **linked portal users**. If a
+company has none, `notify()` logs `0 recipients — skipped` and stores nothing, with no error.
+SMS and email still send, because they address the company's phone and email directly. Check
+this before debugging a "missing notification".
+
+## PDF generation
+
+Chromium is not installed in every environment. PDF paths must fall back to the hand-rolled
+generators (`styled-pdf.util.ts`, `buildFallbackPdf`, `buildTabularFallbackPdf`) rather than
+assume a headless browser exists.
+
+## Adding a new module to a NestJS app
+
+1. Create `modules/<feature>/` with `entities/`, `dto/`, and the four
+   `<feature>.{module,controller,service,repository}.ts` files.
+2. The entity extends `BaseEntity` from `@edr/api-common`.
+3. The repository extends `BaseRepository<Entity>` from `@edr/api-common`.
+4. The service injects the repository class (not `Repository<T>` directly).
+5. The controller uses `@ApiTags()` + `@ApiOperation()` for Swagger, and guards the route.
+6. Register the module in the app's `app.module.ts`.
+
+## Adding a new shared component to `@edr/ui-common`
+
+1. Create `src/components/<Name>/<Name>.tsx` and `src/components/<Name>/index.ts`.
+2. Export from `src/index.ts`.
+3. Component is a functional component with a `ComponentNameProps` interface
+   (named-exported alongside the default).
+
+## Definition of done
+
+A change is done when **all** of these hold. State explicitly which you ran.
+
+1. **It type-checks.** `pnpm turbo type-check --filter=<each touched package>` passes.
+   If you edited `packages/types`, you ran `pnpm turbo build --filter=@edr/types` first.
+2. **Raw SQL is verified.** Every new or edited SQL statement ran under `EXPLAIN` against the
+   dev database without error.
+3. **Migrations are safe.** Unique timestamp, idempotent DDL, and — if the migration adds
+   something the new code reads — applied to the dev database, since watch mode will not run it.
+4. **No new test failures.** `pnpm test` for `@edr/freight-api` is **currently red on `dev`**,
+   so a fully green suite is not the bar. Run the specs covering what you touched and confirm
+   you introduced no new failure.
+5. **Lint and format are clean** for the files you touched. Git hooks do **not** run these
+   automatically (see below), so run them yourself.
+6. **The behaviour was actually observed**, not merely compiled — you drove the flow, hit the
+   endpoint, or ran the query. If you could not, say so plainly.
+7. **Report honestly.** If a check was skipped, tests failed, or a fix is unverified, say it in
+   the summary. Never describe unverified work as done.
+
+### Hooks do not run
+
+`commitlint.config.js` and a `lint-staged` config both exist, and husky's shims are installed
+at `.husky/_/`. But there are **no user hook scripts** (`.husky/pre-commit`,
+`.husky/commit-msg`), so husky's shim exits 0 and **neither lint-staged nor commitlint ever
+fire.** Nothing validates your commit message or formats your staged files. Run the checks by
+hand; do not assume the hook caught it.
+
+## Known traps
+
+| Trap | What happens | What to do |
+| --- | --- | --- |
+| Schema drift | A recorded migration's column is missing; queries and inserts 500 | Write a new repair migration; never edit the recorded one |
+| Duplicate migration timestamps | Non-deterministic ordering; a migration can be skipped | Pick a fresh, higher timestamp |
+| `@edr/types` not rebuilt | Consumers can't see your new field | `pnpm turbo build --filter=@edr/types` |
+| Slow I/O in a transaction | Locks held for the gateway timeout | Queue it; fan out after commit; always set an HTTP timeout |
+| Blob error bodies | Real 400 message replaced by "Request failed with status code 400" | `await extractDownloadErrorMessage(error)` |
+| Company with no portal user | In-app notification silently vanishes | Check portal users before debugging |
+| Watch-mode reload | New code, old schema → 500 | Apply the migration to the dev DB or restart fully |
+
+## Project skills
+
+Reusable workflows live in `.claude/skills/`. Use them instead of re-deriving the steps:
+
+| Skill | Use for |
+| --- | --- |
+| `edr-db` | Query / `EXPLAIN`-validate / inspect the remote dev DB (`node .claude/skills/edr-db/query.cjs …`). psql is not installed — this is the sanctioned path. Also carries the 400/500 diagnosis loop. |
+| `verify` | The definition-of-done runner: targeted type-check, `@edr/types` rebuild, SQL validation, migration checklist, honest test bar. Run before calling anything finished. |
+| `standup` | "What did I do today / this week" reports for tickets, grounded in `git log` — including the check that commit subjects match their contents. |
+
+## Working style
+
+- **Verify before asserting.** Read the code or query the database. Do not infer behaviour
+  from a filename.
+- **Investigate, then propose.** For anything risky or wide-reaching, present the plan and the
+  trade-off before changing files.
+- **Small, reviewable commits**, one logical change each, conventional message.
+- **Branch from `dev`; PRs target `dev`.**
+- When a finding turns out to be wrong, say so and retract it. A rejected finding is a result.
diff --git a/apps/edr-freight-api/package.json b/apps/edr-freight-api/package.json
index 636bb7e05..ed2ab4696 100644
--- a/apps/edr-freight-api/package.json
+++ b/apps/edr-freight-api/package.json
@@ -56,7 +56,7 @@
     "@nestjs/typeorm": "^11.0.1",
     "@nestjs/websockets": "^11.1.27",
     "@tria-plc/api-common": "file:../../local-packages/tria-plc-api-common-1.4.3.tgz",
-    "@tria-plc/iamapi-common": "file:../../local-packages/tria-plc-iamapi-common-0.7.7.tgz",
+    "@tria-plc/iamapi-common": "file:../../local-packages/tria-plc-iamapi-common-0.7.9.tgz",
     "amqp-connection-manager": "^5.0.0",
     "amqplib": "^2.0.1",
     "axios": "^1.16.1",
diff --git a/apps/edr-freight-api/src/app.module.ts b/apps/edr-freight-api/src/app.module.ts
index 9561a7b73..2bee84923 100644
--- a/apps/edr-freight-api/src/app.module.ts
+++ b/apps/edr-freight-api/src/app.module.ts
@@ -41,6 +41,7 @@ import { NotificationsModule } from "./modules/notifications/notifications.modul
 import { NotificationInboxModule } from "./modules/notification-inbox/notification-inbox.module";
 import { FileUploadSettingsModule } from "./modules/file-upload-settings/file-upload-settings.module";
 import { DropdownSettingsModule } from "./modules/dropdown-settings/dropdown-settings.module";
+import { ContractTemplatesModule } from "./modules/contract-templates/contract-templates.module";
 import { OtpModule } from "./modules/otp/otp.module";
 import { RuleEngineModule } from "./modules/rule-engine/rule-engine.module";
 import { BackofficeModule } from "./modules/backoffice/backoffice.module";
@@ -68,6 +69,7 @@ import { MarshallingDemoTrainsSeeder } from "./seed/marshalling-demo-trains.seed
 import { FreightPermissionKeyMigrationSeeder } from "./seed/freight-permission-key-migration.seeder";
 import { DemoFreightDataSeeder } from "./seed/demo-freight-data.seeder";
 import { GovCompaniesSeeder } from "./seed/gov-companies.seeder";
+import { EdrTruckFleetSeeder } from "./seed/edr-truck-fleet.seeder";
 import { ApprovedFirstLastMileDemoBookingsSeeder } from "./seed/approved-first-lastmile-demo-bookings.seeder";
 import { PaidImportExportMileDemoSeeder } from "./seed/paid-import-export-mile-demo.seeder";
 //New Trains, Wagons, Container and Cargo management modules
@@ -92,6 +94,7 @@ import { FirstMileModule } from "./modules/first-mile/first-mile.module";
 import { LastMileModule } from "./modules/last-mile/last-mile.module";
 import { InterchangeDocumentsModule } from "./modules/interchange-documents/interchange-documents.module";
 import { ImportOperationsModule } from "./modules/import-operations/import-operations.module";
+import { AiModule } from "./modules/ai/ai.module";
 import { LoggerMiddleware } from "./logger.middleware";
 
 @Module({
@@ -158,6 +161,7 @@ import { LoggerMiddleware } from "./logger.middleware";
     NotificationInboxModule,
     FileUploadSettingsModule,
     DropdownSettingsModule,
+    ContractTemplatesModule,
     OtpModule,
     RuleEngineModule,
     BackofficeModule,
@@ -186,6 +190,7 @@ import { LoggerMiddleware } from "./logger.middleware";
     ImportOperationsModule,
     VerifaydaModule,
     FleetHistoryModule,
+    AiModule,
   ],
   providers: [
     EdrOrgSeeder,
@@ -197,6 +202,7 @@ import { LoggerMiddleware } from "./logger.middleware";
     FreightPermissionKeyMigrationSeeder,
     DemoFreightDataSeeder,
     GovCompaniesSeeder,
+    EdrTruckFleetSeeder,
     IndodeFacilitySeeder,
     Batch14TestDataSeeder,
     Batch5TestDataSeeder,
@@ -229,6 +235,7 @@ export class AppModule implements OnApplicationBootstrap {
     private readonly freightPermissionKeyMigrationSeeder: FreightPermissionKeyMigrationSeeder,
     private readonly demoFreightDataSeeder: DemoFreightDataSeeder,
     private readonly govCompaniesSeeder: GovCompaniesSeeder,
+    private readonly edrTruckFleetSeeder: EdrTruckFleetSeeder,
   ) { }
 
   async onApplicationBootstrap() {
@@ -259,6 +266,7 @@ export class AppModule implements OnApplicationBootstrap {
     // Government entities (with importer/exporter profiles) that government
     // bookings bill to. Idempotent — keyed by fixed IDs.
     await this.govCompaniesSeeder.run();
+    await this.edrTruckFleetSeeder.run();
   }
 
   configure(consumer: MiddlewareConsumer) {
diff --git a/apps/edr-freight-api/src/contracts/contract-article.util.ts b/apps/edr-freight-api/src/contracts/contract-article.util.ts
new file mode 100644
index 000000000..6aacab16c
--- /dev/null
+++ b/apps/edr-freight-api/src/contracts/contract-article.util.ts
@@ -0,0 +1,107 @@
+import Handlebars from 'handlebars';
+
+/** One numbered clause of a dynamic article, with optional nested bullets. */
+export interface RenderedClause {
+  text: string;
+  /** Computed outline number, e.g. "3" or "2.1.4". */
+  number: string;
+  /** Nesting level: 1 = clause, 2 = sub-clause (x.y), 3 = x.y.z, … */
+  depth: number;
+  bullets: string[];
+}
+
+/** A dynamic article ready for the Handlebars template. */
+export interface RenderedArticle {
+  number: number;
+  title: string;
+  /** Set (instead of clauses) when the body is a single plain paragraph. */
+  paragraph?: string;
+  clauses: RenderedClause[];
+}
+
+/**
+ * Leading outline token on a clause line: "1.", "2)", "1.1", "1.1.1." …
+ * The token's segment count sets the clause depth; its digits are ignored —
+ * numbering is recomputed sequentially so stale numbers self-heal.
+ * A single-segment token requires its "."/")" ("10 tons…" is prose, "10. x"
+ * is clause ten); multi-segment tokens ("1.1") may omit it. A token may also
+ * end the line — that is an empty clause still being typed in the editor.
+ */
+const CLAUSE_NUMBER_RE = /^(?:(\d+(?:\.\d+)+)[.)]?|(\d+)[.)])(?:\s+|$)/;
+
+/** Deepest supported sub-clause level (1.1.1.1.1.1). */
+const MAX_CLAUSE_DEPTH = 6;
+
+/**
+ * Parse a template article body into clauses. Format: one clause per line.
+ * A leading outline number ("2. ", "2.1 ", "2.1.3 ") nests the line as a
+ * sub-clause at that depth — the typed digits are stripped and renumbered
+ * sequentially, so editing order never leaves stale numbers in the document.
+ * Lines prefixed with "- " become bullets nested under the preceding clause.
+ * A body that reduces to a single un-numbered clause without bullets renders
+ * as a plain paragraph rather than a numbered list of one.
+ */
+export function parseArticleBody(body: string): Pick<RenderedArticle, 'paragraph' | 'clauses'> {
+  const lines = (body ?? '')
+    .split('\n')
+    .map((line) => line.trim())
+    .filter((line) => line.length > 0);
+
+  const clauses: RenderedClause[] = [];
+  // counters[i] = current number at depth i+1; truncated when a shallower
+  // clause arrives so deeper numbering restarts at 1.
+  const counters: number[] = [];
+  let sawNumberToken = false;
+
+  for (const line of lines) {
+    if (line.startsWith('- ')) {
+      const bullet = line.slice(2).trim();
+      if (clauses.length === 0) {
+        counters.splice(0, counters.length, 1);
+        clauses.push({ text: bullet, number: '1', depth: 1, bullets: [] });
+      } else {
+        clauses[clauses.length - 1].bullets.push(bullet);
+      }
+      continue;
+    }
+
+    const match = CLAUSE_NUMBER_RE.exec(line);
+    const token = match ? (match[1] ?? match[2]) : null;
+    let depth = token ? Math.min(token.split('.').length, MAX_CLAUSE_DEPTH) : 1;
+    // A sub-clause can only sit directly under an existing parent — "1.1.1"
+    // typed as the first line clamps to whatever level is actually open.
+    depth = Math.min(depth, counters.length + 1);
+    if (match) sawNumberToken = true;
+
+    counters.splice(depth);
+    while (counters.length < depth) counters.push(0);
+    counters[depth - 1] += 1;
+
+    clauses.push({
+      text: match ? line.slice(match[0].length).trim() : line,
+      number: counters.slice(0, depth).join('.'),
+      depth,
+      bullets: [],
+    });
+  }
+
+  if (clauses.length === 1 && clauses[0].bullets.length === 0 && !sawNumberToken) {
+    return { paragraph: clauses[0].text, clauses: [] };
+  }
+  return { clauses };
+}
+
+/**
+ * Interpolate Handlebars placeholders ({{client.companyName}}, {{contractDate}},
+ * …) inside admin-authored template text against the contract view model.
+ * Malformed placeholders must never break document generation — fall back to
+ * the raw text.
+ */
+export function interpolateTemplateText(text: string, context: unknown): string {
+  if (!text || !text.includes('{{')) return text ?? '';
+  try {
+    return Handlebars.compile(text)(context);
+  } catch {
+    return text;
+  }
+}
diff --git a/apps/edr-freight-api/src/contracts/contract-document-view-model.builder.ts b/apps/edr-freight-api/src/contracts/contract-document-view-model.builder.ts
index 05061ed9a..559415fd8 100644
--- a/apps/edr-freight-api/src/contracts/contract-document-view-model.builder.ts
+++ b/apps/edr-freight-api/src/contracts/contract-document-view-model.builder.ts
@@ -8,6 +8,7 @@ import {
   ContractSignerRole,
 } from '../modules/contracts/entities/contract-signature.entity';
 import { ContractPricingBreakdown } from '../modules/contracts/contract-pricing.service';
+import { ContractTemplatesService } from '../modules/contract-templates/contract-templates.service';
 import { ContractTemplateResolver } from './contract-template.resolver';
 import { getTemplateMeta } from './contract-template.registry';
 import { ContractViewModel } from './contract-view-model.builder';
@@ -74,6 +75,7 @@ export class ContractDocumentViewModelBuilder {
   constructor(
     private readonly contractsRepository: ContractsRepository,
     private readonly templateResolver: ContractTemplateResolver,
+    private readonly contractTemplates: ContractTemplatesService,
   ) {}
 
   async build(
@@ -86,7 +88,32 @@ export class ContractDocumentViewModelBuilder {
 
     const templateKey =
       contract.contractTemplateKey ?? this.templateResolver.resolve(this.toResolverInput(contract));
-    const template = getTemplateMeta(templateKey);
+    let template = getTemplateMeta(templateKey);
+
+    // Prefer the admin-editable DB template matching the contract's
+    // direction/freight pair; fall back to the code-defined generic layout
+    // when none is active.
+    const dynamicSource = await this.contractTemplates.findActiveForContract(
+      contract.tradeDirection,
+      contract.freightType,
+    );
+    const dynamicTemplate = dynamicSource
+      ? {
+          code: dynamicSource.code,
+          name: dynamicSource.name,
+          documentTitle: dynamicSource.documentTitle,
+          whereasClauses: dynamicSource.whereasClauses ?? [],
+          articles: dynamicSource.articles ?? [],
+        }
+      : undefined;
+    if (dynamicTemplate) {
+      template = {
+        ...template,
+        title: dynamicTemplate.name,
+        templateFile: 'edr-dynamic.hbs',
+      };
+    }
+
     const pricing = this.buildPricing(contract);
     const signatures = await this.loadSignatures(contractId);
 
@@ -139,6 +166,7 @@ export class ContractDocumentViewModelBuilder {
       hasContractDocument: hasContractFile,
       hasCustomerSignature: hasCustomer,
       hasStaffSignature: hasStaff,
+      dynamicTemplate,
     };
 
     return { contract, view };
diff --git a/apps/edr-freight-api/src/contracts/contract-dynamic-template.spec.ts b/apps/edr-freight-api/src/contracts/contract-dynamic-template.spec.ts
new file mode 100644
index 000000000..49fb3416a
--- /dev/null
+++ b/apps/edr-freight-api/src/contracts/contract-dynamic-template.spec.ts
@@ -0,0 +1,185 @@
+import { parseArticleBody, interpolateTemplateText } from './contract-article.util';
+import { ContractRendererService } from './contract-renderer.service';
+import { getTemplateMeta } from './contract-template.registry';
+import type { ContractViewModel } from './contract-view-model.builder';
+
+describe('parseArticleBody', () => {
+  it('numbers each non-empty line as a clause', () => {
+    const parsed = parseArticleBody('First clause.\nSecond clause.\n\nThird clause.');
+    expect(parsed.paragraph).toBeUndefined();
+    expect(parsed.clauses.map((c) => c.text)).toEqual([
+      'First clause.',
+      'Second clause.',
+      'Third clause.',
+    ]);
+  });
+
+  it('nests "- " lines as bullets under the previous clause', () => {
+    const parsed = parseArticleBody('Rates are:\n- USD 10 per ton\n- USD 20 per wagon\nPayment in advance.');
+    expect(parsed.clauses).toHaveLength(2);
+    expect(parsed.clauses[0].bullets).toEqual(['USD 10 per ton', 'USD 20 per wagon']);
+    expect(parsed.clauses[1].text).toBe('Payment in advance.');
+  });
+
+  it('renders a single bare line as a paragraph', () => {
+    const parsed = parseArticleBody('This Agreement becomes effective when signed.');
+    expect(parsed.paragraph).toBe('This Agreement becomes effective when signed.');
+    expect(parsed.clauses).toEqual([]);
+  });
+
+  it('nests numbered sub-clauses by their outline token and renumbers sequentially', () => {
+    const parsed = parseArticleBody(
+      '1. Scope\n5.1 Rail transport\n1.1.1 Wagon supply\n2. Payment',
+    );
+    expect(parsed.clauses.map((c) => [c.number, c.depth, c.text])).toEqual([
+      ['1', 1, 'Scope'],
+      ['1.1', 2, 'Rail transport'],
+      ['1.1.1', 3, 'Wagon supply'],
+      ['2', 1, 'Payment'],
+    ]);
+  });
+
+  it('clamps a sub-clause with no open parent to the next available level', () => {
+    const parsed = parseArticleBody('1.1.1 Orphan sub-clause\nSecond clause.');
+    expect(parsed.clauses.map((c) => [c.number, c.depth])).toEqual([
+      ['1', 1],
+      ['2', 1],
+    ]);
+  });
+
+  it('leaves prose that merely starts with a number un-tokenized', () => {
+    const parsed = parseArticleBody('10 tons is the minimum load.\nPayment in advance.');
+    expect(parsed.clauses.map((c) => c.text)).toEqual([
+      '10 tons is the minimum load.',
+      'Payment in advance.',
+    ]);
+  });
+
+  it('keeps a single explicitly numbered line as a clause, not a paragraph', () => {
+    const parsed = parseArticleBody('1. Only clause.');
+    expect(parsed.paragraph).toBeUndefined();
+    expect(parsed.clauses.map((c) => [c.number, c.text])).toEqual([['1', 'Only clause.']]);
+  });
+});
+
+describe('interpolateTemplateText', () => {
+  it('fills placeholders from the view model', () => {
+    expect(
+      interpolateTemplateText('Valid until August 31, {{contractYear}}.', {
+        contractYear: 2026,
+      }),
+    ).toBe('Valid until August 31, 2026.');
+  });
+
+  it('falls back to raw text on malformed placeholders', () => {
+    expect(interpolateTemplateText('Broken {{#if}} tag', {})).toBe('Broken {{#if}} tag');
+  });
+});
+
+describe('dynamic template rendering (edr-dynamic.hbs)', () => {
+  const renderer = new ContractRendererService();
+  renderer.onModuleInit();
+
+  function dynamicView(): ContractViewModel {
+    const meta = getTemplateMeta('IMP_BULK_USD_FORWARDING');
+    return {
+      bookingId: 'test-id',
+      reference: 'EDR/CT/2026/0042',
+      status: 'CONTRACT_READY',
+      templateKey: 'IMP_BULK_USD_FORWARDING',
+      template: { ...meta, title: 'Bulk Import Contract', templateFile: 'edr-dynamic.hbs' },
+      contractDate: '1 January 2026',
+      contractYear: 2026,
+      client: {
+        companyName: 'Abyssinia Trading PLC',
+        companyAddress: 'Bole Sub-city, Addis Ababa',
+        companyLocation: 'Ethiopia',
+        phone: '+251900000000',
+        email: 'test@example.com',
+        tinNumber: '1234567890',
+        vatNumber: 'VAT-001',
+        fanNumber: 'FAN-001',
+        businessLicense: 'BL-001',
+      },
+      provider: {
+        name: 'Ethio-Djibouti Standard Gauge Railway Share Company',
+        address: 'Nifas Silk Lafto Sub City, Addis Ababa, Ethiopia',
+        phone: '+251 11 872 0000',
+        email: 'info@edr.gov.et',
+        tinNumber: '—',
+      },
+      schedule: {
+        originLabel: 'Nagad',
+        destinationLabel: 'Galaan Multipurpose Port',
+        tradeDirection: 'IMPORT',
+        freightType: 'BULK',
+        serviceType: 'Rail + clearance',
+        scheduledDate: '—',
+        contractType: 'GENERAL',
+        cargoDescription: 'Steel billets',
+        totalWeightVgm: '—',
+        equipmentReturn: '—',
+        hazardousLabel: 'No',
+        firstMilePickupAddress: '—',
+        lastMileDeliveryAddress: '—',
+      },
+      pricing: {
+        displayMode: 'UNIT_RATES',
+        unitRates: [
+          { label: 'Rail transport', unitPrice: 59.4, unit: 'ton', currency: 'USD' },
+        ],
+        currency: 'USD',
+        equipmentReturn: '—',
+        originLabel: 'Nagad',
+        destinationLabel: 'Galaan Multipurpose Port',
+      } as unknown as ContractViewModel['pricing'],
+      signatures: [],
+      canSignCustomer: false,
+      canSignStaff: false,
+      hasContractDocument: false,
+      hasCustomerSignature: false,
+      hasStaffSignature: false,
+      dynamicTemplate: {
+        code: 'IMPORT_BULK',
+        name: 'Bulk Import Contract',
+        documentTitle: 'Bulk Cargo Transportation and Customs Clearance Services',
+        whereasClauses: ['The Client has agreed to engage the Service Provider.'],
+        articles: [
+          {
+            id: 'objective',
+            title: 'Objective of the Services',
+            body: 'Integrated logistics services including:\n- Rail transport to GMP\n- Customs clearance',
+            order: 1,
+          },
+          {
+            id: 'duration',
+            title: 'Duration',
+            body: 'Valid until August 31, {{contractYear}}.',
+            order: 2,
+          },
+        ],
+      },
+    };
+  }
+
+  it('renders numbered dynamic articles with bullets and interpolation', () => {
+    const html = renderer.render(dynamicView());
+    expect(html).toContain('Bulk Cargo Transportation and Customs Clearance Services');
+    expect(html).toContain('Article 1');
+    expect(html).toContain('Objective of the Services');
+    expect(html).toContain('Rail transport to GMP');
+    expect(html).toContain('Valid until August 31, 2026.');
+    expect(html).toContain('Abyssinia Trading PLC');
+    expect(html).toContain('Annex A — Commercial Schedule');
+    // Greenish theme marker from styles.hbs
+    expect(html).toContain('#1b9e7a');
+  });
+
+  it('keeps the generic layout when no dynamic template is attached', () => {
+    const view = dynamicView();
+    delete view.dynamicTemplate;
+    view.template = getTemplateMeta('IMP_BULK_USD_FORWARDING');
+    const html = renderer.render(view);
+    expect(html).toContain('Article 5: Contract Price');
+  });
+});
diff --git a/apps/edr-freight-api/src/contracts/contract-renderer.service.ts b/apps/edr-freight-api/src/contracts/contract-renderer.service.ts
index dd539df25..7b3301c87 100644
--- a/apps/edr-freight-api/src/contracts/contract-renderer.service.ts
+++ b/apps/edr-freight-api/src/contracts/contract-renderer.service.ts
@@ -3,6 +3,11 @@ import * as fs from 'fs';
 import * as path from 'path';
 import Handlebars from 'handlebars';
 
+import {
+  interpolateTemplateText,
+  parseArticleBody,
+  RenderedArticle,
+} from './contract-article.util';
 import { ContractViewModel } from './contract-view-model.builder';
 
 @Injectable()
@@ -31,9 +36,40 @@ export class ContractRendererService implements OnModuleInit {
     return template({
       ...view,
       paymentArticle: view.pricing.currency === 'ETB' ? 'ETB' : 'USD',
+      ...this.buildDynamicSections(view),
     });
   }
 
+  /**
+   * Turn the DB-backed dynamic template (when present) into render-ready data:
+   * interpolate placeholders against the view model, then parse each article
+   * body into numbered clauses with nested bullets.
+   */
+  private buildDynamicSections(view: ContractViewModel): {
+    dynamicDocumentTitle?: string;
+    dynamicWhereas?: string[];
+    dynamicArticles?: RenderedArticle[];
+  } {
+    const dyn = view.dynamicTemplate;
+    if (!dyn || dyn.articles.length === 0) return {};
+
+    const articles = [...dyn.articles]
+      .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+      .map((article, index) => ({
+        number: index + 1,
+        title: interpolateTemplateText(article.title, view),
+        ...parseArticleBody(interpolateTemplateText(article.body, view)),
+      }));
+
+    return {
+      dynamicDocumentTitle: interpolateTemplateText(dyn.documentTitle, view),
+      dynamicWhereas: dyn.whereasClauses.map((clause) =>
+        interpolateTemplateText(clause, view),
+      ),
+      dynamicArticles: articles,
+    };
+  }
+
   private getCompiled(fileName: string): Handlebars.TemplateDelegate {
     const cached = this.compiled.get(fileName);
     if (cached) return cached;
diff --git a/apps/edr-freight-api/src/contracts/contract-view-model.builder.ts b/apps/edr-freight-api/src/contracts/contract-view-model.builder.ts
index 41a2f3b44..d90b8e709 100644
--- a/apps/edr-freight-api/src/contracts/contract-view-model.builder.ts
+++ b/apps/edr-freight-api/src/contracts/contract-view-model.builder.ts
@@ -17,6 +17,21 @@ export interface ContractSignatureView {
   signatureImageUrl?: string | null;
 }
 
+/**
+ * DB-backed contract template (freight.contract_templates) attached to the
+ * view model when an active template matches the contract's direction/freight
+ * pair. The renderer turns its articles into numbered clauses and switches to
+ * the dedicated edr-dynamic.hbs layout; absent, the legacy generic layout with
+ * code-defined clause packs is used.
+ */
+export interface ContractDynamicTemplateView {
+  code: string;
+  name: string;
+  documentTitle: string;
+  whereasClauses: string[];
+  articles: Array<{ id: string; title: string; body: string; order: number }>;
+}
+
 export interface ContractViewModel {
   bookingId: string;
   reference: string;
@@ -65,6 +80,7 @@ export interface ContractViewModel {
   hasContractDocument: boolean;
   hasCustomerSignature: boolean;
   hasStaffSignature: boolean;
+  dynamicTemplate?: ContractDynamicTemplateView;
 }
 
 @Injectable()
diff --git a/apps/edr-freight-api/src/contracts/templates/_partials/dynamic_articles.hbs b/apps/edr-freight-api/src/contracts/templates/_partials/dynamic_articles.hbs
new file mode 100644
index 000000000..bec620655
--- /dev/null
+++ b/apps/edr-freight-api/src/contracts/templates/_partials/dynamic_articles.hbs
@@ -0,0 +1,24 @@
+{{#each dynamicArticles}}
+<section class="article">
+  <h2 class="article-heading"><span class="article-no">Article {{number}}</span><span class="article-name">{{title}}</span></h2>
+  {{#if paragraph}}
+  <p class="article-paragraph">{{paragraph}}</p>
+  {{else}}
+  <ol class="clauses">
+    {{#each clauses}}
+    <li class="clause depth-{{depth}}">
+      <span class="clause-no">{{number}}.</span>
+      {{text}}
+      {{#if bullets.length}}
+      <ul class="clause-bullets">
+        {{#each bullets}}
+        <li>{{this}}</li>
+        {{/each}}
+      </ul>
+      {{/if}}
+    </li>
+    {{/each}}
+  </ol>
+  {{/if}}
+</section>
+{{/each}}
diff --git a/apps/edr-freight-api/src/contracts/templates/_partials/styles.hbs b/apps/edr-freight-api/src/contracts/templates/_partials/styles.hbs
index 43a5495ec..118606065 100644
--- a/apps/edr-freight-api/src/contracts/templates/_partials/styles.hbs
+++ b/apps/edr-freight-api/src/contracts/templates/_partials/styles.hbs
@@ -4,11 +4,11 @@
 
   body {
     margin: 0;
-    background: #f5f7fb;
-    color: #111827;
+    background: #f3f8f5;
+    color: #16241d;
     font-family: "Times New Roman", Times, serif;
     font-size: 10.5pt;
-    line-height: 1.48;
+    line-height: 1.5;
   }
 
   .contract {
@@ -21,25 +21,28 @@
 
   h1, h2, h3, p { margin-top: 0; }
   h1 {
-    color: #0f2742;
-    font-size: 18pt;
-    line-height: 1.25;
+    color: #0a3d2e;
+    font-size: 17pt;
+    letter-spacing: 0.02em;
+    line-height: 1.3;
     margin-bottom: 10px;
     text-align: center;
     text-transform: uppercase;
   }
   h2 {
-    border-bottom: 1.5px solid #1e3a5f;
-    color: #1e3a5f;
-    font-size: 12pt;
-    letter-spacing: 0.03em;
-    margin: 18px 0 10px;
+    border-bottom: 1.5px solid #1b9e7a;
+    color: #0e5b45;
+    font-family: Arial, sans-serif;
+    font-size: 11.5pt;
+    letter-spacing: 0.04em;
+    margin: 20px 0 10px;
     padding-bottom: 5px;
     text-transform: uppercase;
   }
   h3 {
-    color: #0f2742;
-    font-size: 10.8pt;
+    color: #0a3d2e;
+    font-family: Arial, sans-serif;
+    font-size: 10.5pt;
     margin: 12px 0 6px;
   }
   p { margin-bottom: 8px; }
@@ -52,16 +55,17 @@
     page-break-inside: avoid;
   }
 
+  /* ── Brand header ─────────────────────────────────────────────────────── */
   .brand-row {
     align-items: center;
-    border-bottom: 3px solid #1e3a5f;
+    border-bottom: 3px double #1b9e7a;
     display: flex;
     gap: 14px;
     padding-bottom: 14px;
   }
   .logo-mark {
     align-items: center;
-    background: #1e3a5f;
+    background: linear-gradient(135deg, #0e5b45 0%, #1b9e7a 100%);
     border-radius: 8px;
     color: #fff;
     display: flex;
@@ -74,7 +78,7 @@
     width: 72px;
   }
   .kicker {
-    color: #1e3a5f;
+    color: #0e5b45;
     font-family: Arial, sans-serif;
     font-size: 10pt;
     font-weight: 700;
@@ -83,36 +87,74 @@
     text-transform: uppercase;
   }
   .muted {
-    color: #6b7280;
+    color: #5c6f66;
     font-family: Arial, sans-serif;
     font-size: 9pt;
     margin: 0;
   }
+  .muted-note {
+    color: #5c6f66;
+    font-size: 9.5pt;
+  }
 
+  /* ── Cover page ───────────────────────────────────────────────────────── */
   .cover {
+    display: flex;
+    flex-direction: column;
     min-height: 255mm;
     position: relative;
   }
   .cover-title {
-    margin: 54mm 0 34mm;
+    margin: 34mm 0 22mm;
     text-align: center;
   }
+  .cover-rule {
+    background: #1b9e7a;
+    height: 2px;
+    margin: 14px auto;
+    width: 46mm;
+  }
   .document-label {
-    color: #6b7280;
+    color: #1b9e7a;
     font-family: Arial, sans-serif;
-    font-size: 10pt;
+    font-size: 11pt;
     font-weight: 700;
-    letter-spacing: 0.12em;
-    margin-bottom: 10px;
+    letter-spacing: 0.18em;
+    margin-bottom: 6px;
     text-transform: uppercase;
   }
+  .cover-for,
+  .cover-between {
+    color: #5c6f66;
+    font-family: Arial, sans-serif;
+    font-size: 9.5pt;
+    font-style: italic;
+    margin: 10px 0 6px;
+  }
+  .cover-party {
+    color: #0a3d2e;
+    font-family: Arial, sans-serif;
+    font-size: 12pt;
+    font-weight: 700;
+    margin: 4px 0;
+  }
   .summary-line {
-    color: #374151;
+    color: #38493f;
     font-family: Arial, sans-serif;
     font-size: 9.5pt;
     margin-top: 12px;
   }
+  .cover-year {
+    color: #0e5b45;
+    font-family: Arial, sans-serif;
+    font-size: 13pt;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    margin-top: auto;
+    text-align: right;
+  }
 
+  /* ── Tables ───────────────────────────────────────────────────────────── */
   table {
     border-collapse: collapse;
     width: 100%;
@@ -129,7 +171,7 @@
   .details-table td,
   .schedule th,
   .schedule td {
-    border: 1px solid #cbd5e1;
+    border: 1px solid #c9e4d9;
     padding: 7px 8px;
     text-align: left;
     vertical-align: top;
@@ -137,35 +179,46 @@
   .meta-grid th,
   .details-table th,
   .schedule th {
-    background: #eef4fb;
-    color: #1e3a5f;
+    background: #e9f6f0;
+    color: #0e5b45;
     font-family: Arial, sans-serif;
     font-size: 8.5pt;
     text-transform: uppercase;
   }
-  .schedule tbody tr:nth-child(even) td { background: #f8fafc; }
+  .schedule tbody tr:nth-child(even) td { background: #f5faf8; }
   .total-row td {
-    background: #e8f0f8 !important;
-    color: #0f2742;
+    background: #ddf2e9 !important;
+    color: #0a3d2e;
     font-weight: 700;
   }
 
+  /* ── Parties ──────────────────────────────────────────────────────────── */
   .lead {
-    color: #374151;
+    color: #38493f;
     font-size: 10.5pt;
   }
+  .between-label {
+    color: #0e5b45;
+    font-family: Arial, sans-serif;
+    font-size: 9.5pt;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    margin: 10px 0 4px;
+    text-transform: uppercase;
+  }
   .party-grid {
     display: grid;
     gap: 12px;
     grid-template-columns: 1fr 1fr;
+    margin-top: 12px;
   }
   .party-card {
-    border: 1px solid #cbd5e1;
+    border: 1px solid #c9e4d9;
     border-radius: 8px;
     padding: 12px;
   }
   .party-card h3 {
-    background: #1e3a5f;
+    background: #0e5b45;
     border-radius: 5px;
     color: #fff;
     font-family: Arial, sans-serif;
@@ -175,7 +228,7 @@
     text-transform: uppercase;
   }
   .party-name {
-    color: #0f2742;
+    color: #0a3d2e;
     font-weight: 700;
     margin-bottom: 8px;
   }
@@ -185,7 +238,7 @@
     margin: 0;
   }
   dt {
-    color: #475569;
+    color: #47594f;
     font-family: Arial, sans-serif;
     font-size: 8.5pt;
     font-weight: 700;
@@ -196,6 +249,80 @@
     padding: 2px 0;
   }
 
+  /* ── Recitals ─────────────────────────────────────────────────────────── */
+  .whereas-label {
+    color: #0e5b45;
+    font-family: Arial, sans-serif;
+    font-size: 9pt;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+  .now-therefore {
+    color: #0a3d2e;
+    font-weight: 700;
+    margin-top: 10px;
+  }
+
+  /* ── Dynamic articles ─────────────────────────────────────────────────── */
+  .article-heading {
+    align-items: baseline;
+    display: flex;
+    gap: 10px;
+  }
+  .article-no {
+    color: #1b9e7a;
+    font-family: Arial, sans-serif;
+    font-size: 9.5pt;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+  .article-name { color: #0e5b45; }
+  .article-paragraph { margin: 4px 0 0; }
+  ol.clauses {
+    list-style: none;
+    margin: 6px 0 0;
+    padding-left: 0;
+  }
+  ol.clauses > li.clause {
+    margin-bottom: 6px;
+    text-align: justify;
+  }
+  ol.clauses .clause-no {
+    color: #0e5b45;
+    font-family: Arial, sans-serif;
+    font-size: 9.5pt;
+    font-weight: 700;
+    margin-right: 6px;
+  }
+  /* Sub-clause indentation: each outline level steps in. */
+  ol.clauses > li.depth-2 { padding-left: 20px; }
+  ol.clauses > li.depth-3 { padding-left: 40px; }
+  ol.clauses > li.depth-4 { padding-left: 60px; }
+  ol.clauses > li.depth-5 { padding-left: 80px; }
+  ol.clauses > li.depth-6 { padding-left: 100px; }
+  ul.clause-bullets {
+    margin: 5px 0 2px;
+    padding-left: 16px;
+  }
+  ul.clause-bullets > li {
+    list-style: none;
+    margin-bottom: 3px;
+    padding-left: 12px;
+    position: relative;
+  }
+  ul.clause-bullets > li::before {
+    color: #1b9e7a;
+    content: "▪";
+    font-size: 8pt;
+    left: 0;
+    position: absolute;
+    top: 1px;
+  }
+
+  /* ── Signatures ───────────────────────────────────────────────────────── */
   .signatures {
     display: grid;
     gap: 18px;
@@ -204,13 +331,13 @@
     page-break-inside: avoid;
   }
   .sig-block {
-    border: 1.5px solid #1e3a5f;
+    border: 1.5px solid #1b9e7a;
     border-radius: 8px;
     min-height: 96mm;
     padding: 12px;
   }
   .sig-title {
-    color: #1e3a5f;
+    color: #0e5b45;
     font-family: Arial, sans-serif;
     font-size: 9pt;
     font-weight: 700;
@@ -219,7 +346,7 @@
   }
   .sig-image-box {
     align-items: center;
-    border: 1px dashed #94a3b8;
+    border: 1px dashed #7fbfa9;
     display: flex;
     height: 28mm;
     justify-content: center;
@@ -231,21 +358,40 @@
     max-width: 70mm;
   }
   .sig-placeholder {
-    color: #94a3b8;
+    color: #7fbfa9;
     font-family: Arial, sans-serif;
     font-size: 8.5pt;
   }
   .sig-line {
-    border-top: 1px solid #111827;
+    border-top: 1px solid #16241d;
     margin-top: 16px;
     padding-top: 5px;
   }
   .sig-meta {
-    color: #475569;
+    color: #47594f;
     font-size: 9pt;
     margin: 4px 0;
   }
 
+  /* ── Witnesses ────────────────────────────────────────────────────────── */
+  .witnesses { margin-top: 20px; }
+  .witness-table {
+    font-size: 9.5pt;
+    margin-top: 6px;
+  }
+  .witness-table th,
+  .witness-table td {
+    border-bottom: 1px solid #c9e4d9;
+    padding: 9px 8px;
+    text-align: left;
+  }
+  .witness-table th {
+    color: #0e5b45;
+    font-family: Arial, sans-serif;
+    font-size: 8.5pt;
+    text-transform: uppercase;
+  }
+
   @media print {
     body { background: #fff; }
     .contract {
diff --git a/apps/edr-freight-api/src/contracts/templates/edr-dynamic.hbs b/apps/edr-freight-api/src/contracts/templates/edr-dynamic.hbs
new file mode 100644
index 000000000..4ba35ea3b
--- /dev/null
+++ b/apps/edr-freight-api/src/contracts/templates/edr-dynamic.hbs
@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>{{dynamicDocumentTitle}} — {{reference}}</title>
+  {{> styles}}
+</head>
+<body>
+  <main class="contract">
+
+    {{!-- ─────────────────────────── Cover page ─────────────────────────── --}}
+    <section class="cover page-section">
+      <div class="brand-row">
+        <div class="logo-mark">EDR</div>
+        <div>
+          <p class="kicker">Ethio-Djibouti Standard Gauge Railway Share Company</p>
+          <p class="muted">Freight Transport Services</p>
+        </div>
+      </div>
+
+      <div class="cover-title">
+        <p class="document-label">Contract Agreement</p>
+        <div class="cover-rule"></div>
+        <p class="cover-for">for</p>
+        <h1>{{dynamicDocumentTitle}}</h1>
+        <p class="cover-between">between</p>
+        <p class="cover-party">Ethio-Djibouti Standard Gauge Railway Share Company</p>
+        <p class="cover-between">and</p>
+        <p class="cover-party">{{client.companyName}}</p>
+        <div class="cover-rule"></div>
+      </div>
+
+      <table class="meta-grid">
+        <tr>
+          <th>Contract Ref No.</th>
+          <td>{{reference}}</td>
+          <th>Contract Date</th>
+          <td>{{contractDate}}</td>
+        </tr>
+        <tr>
+          <th>Trade Direction</th>
+          <td>{{schedule.tradeDirection}}</td>
+          <th>Freight Type</th>
+          <td>{{schedule.freightType}}</td>
+        </tr>
+      </table>
+
+      <p class="cover-year">{{contractYear}}</p>
+    </section>
+
+    {{!-- ──────────────────────────── Preamble ──────────────────────────── --}}
+    <section class="page-section">
+      <h2>Parties to the Agreement</h2>
+      <p class="lead">
+        This Contract Agreement is made on <strong>{{contractDate}}</strong>.
+      </p>
+      <p class="between-label">Between</p>
+      <p>
+        <strong>Ethio-Djibouti Standard Gauge Railway Share Company (EDR)</strong>, a share company
+        incorporated under the laws of the Federal Democratic Republic of Ethiopia (FDRE), having its
+        principal place of business at {{provider.address}} (hereinafter referred to as the
+        <strong>"Service Provider"</strong>);
+      </p>
+      <p class="between-label">And</p>
+      <p>
+        <strong>{{client.companyName}}</strong>, an organization incorporated under the laws of the
+        Federal Democratic Republic of Ethiopia (FDRE), having its principal place of business at
+        {{client.companyAddress}} (hereinafter referred to as the <strong>"Client"</strong>).
+      </p>
+
+      <div class="party-grid">
+        <div class="party-card">
+          <h3>Service Provider</h3>
+          <p class="party-name">{{provider.name}}</p>
+          <dl>
+            <dt>Address</dt><dd>{{provider.address}}</dd>
+            <dt>Phone</dt><dd>{{provider.phone}}</dd>
+            <dt>Email</dt><dd>{{provider.email}}</dd>
+            <dt>TIN</dt><dd>{{provider.tinNumber}}</dd>
+          </dl>
+        </div>
+        <div class="party-card">
+          <h3>Client</h3>
+          <p class="party-name">{{client.companyName}}</p>
+          <dl>
+            <dt>Address</dt><dd>{{client.companyAddress}}</dd>
+            <dt>Location</dt><dd>{{client.companyLocation}}</dd>
+            <dt>Phone</dt><dd>{{client.phone}}</dd>
+            <dt>Email</dt><dd>{{client.email}}</dd>
+            <dt>TIN</dt><dd>{{client.tinNumber}}</dd>
+            <dt>VAT</dt><dd>{{client.vatNumber}}</dd>
+            <dt>Business license</dt><dd>{{client.businessLicense}}</dd>
+          </dl>
+        </div>
+      </div>
+    </section>
+
+    {{#if dynamicWhereas.length}}
+    <section class="page-section">
+      <h2>Recitals</h2>
+      {{#each dynamicWhereas}}
+      <p><span class="whereas-label">Whereas</span> {{this}}</p>
+      {{/each}}
+      <p class="now-therefore">Now, therefore, the parties agree as follows:</p>
+    </section>
+    {{/if}}
+
+    {{!-- ──────────────────────── Dynamic articles ──────────────────────── --}}
+    {{> dynamic_articles}}
+
+    {{!-- ─────────────────── Commercial schedule (annex) ─────────────────── --}}
+    <section class="page-section annex">
+      <h2>Annex A — Commercial Schedule</h2>
+      <table class="details-table">
+        <tbody>
+          <tr>
+            <th>Route</th>
+            <td>{{schedule.originLabel}} → {{schedule.destinationLabel}}</td>
+            <th>Service type</th>
+            <td>{{schedule.serviceType}}</td>
+          </tr>
+          <tr>
+            <th>Cargo</th>
+            <td>{{schedule.cargoDescription}}</td>
+            <th>Hazardous cargo</th>
+            <td>{{schedule.hazardousLabel}}</td>
+          </tr>
+          <tr>
+            <th>Equipment return</th>
+            <td>{{schedule.equipmentReturn}}</td>
+            <th>Payment currency</th>
+            <td>{{paymentArticle}}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      {{#if pricing.unitRates.length}}
+      <h3>Agreed Unit Rates</h3>
+      <p class="muted-note">
+        The rates below are the frozen unit prices applicable to this contract. Quantities and resulting
+        totals are determined per shipment at booking time.
+      </p>
+      <table class="schedule">
+        <thead>
+          <tr><th>Item</th><th>Unit price</th></tr>
+        </thead>
+        <tbody>
+          {{#each pricing.unitRates}}
+          <tr>
+            <td>{{label}}</td>
+            <td>{{currency}} {{unitPrice}} / {{unit}}</td>
+          </tr>
+          {{/each}}
+        </tbody>
+      </table>
+      {{/if}}
+    </section>
+
+    {{!-- ────────────────────────── Signatures ───────────────────────────── --}}
+    <section class="page-section">
+      <h2>Execution</h2>
+      <p>
+        In witness whereof, the parties hereto have caused this contract to be signed in their respective
+        names as of the day and year first above written. The signatories confirm that they are fully
+        authorized to sign and execute this Contract Agreement.
+      </p>
+      {{> signatures_block}}
+
+      <div class="witnesses">
+        <p class="sig-title">Witnesses</p>
+        <table class="witness-table">
+          <thead>
+            <tr><th></th><th>Name</th><th>Signature</th><th>Date</th></tr>
+          </thead>
+          <tbody>
+            <tr><td>1.</td><td></td><td></td><td></td></tr>
+            <tr><td>2.</td><td></td><td></td><td></td></tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+  </main>
+</body>
+</html>
diff --git a/apps/edr-freight-api/src/migrations/2090000000000-CreateContractTemplates.ts b/apps/edr-freight-api/src/migrations/2090000000000-CreateContractTemplates.ts
new file mode 100644
index 000000000..a553319cc
--- /dev/null
+++ b/apps/edr-freight-api/src/migrations/2090000000000-CreateContractTemplates.ts
@@ -0,0 +1,58 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+import { CONTRACT_TEMPLATE_DEFAULTS } from '../seed/data/contract-template-defaults';
+
+/**
+ * Creates freight.contract_templates — the six editable contract document
+ * templates (direction × freight type) whose dynamic articles drive the
+ * generated contract PDF — and seeds them from the EDR reference contract
+ * documents. Seeding is idempotent (ON CONFLICT (code) DO NOTHING) so admin
+ * edits are never overwritten by redeploys.
+ */
+export class CreateContractTemplates2090000000000 implements MigrationInterface {
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+      CREATE TABLE IF NOT EXISTS freight.contract_templates (
+        id              UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+        code            VARCHAR(40) NOT NULL,
+        name            VARCHAR(200) NOT NULL,
+        description     TEXT,
+        document_title  VARCHAR(300) NOT NULL,
+        whereas_clauses JSONB NOT NULL DEFAULT '[]',
+        articles        JSONB NOT NULL DEFAULT '[]',
+        is_active       BOOLEAN NOT NULL DEFAULT TRUE,
+        created_at      TIMESTAMPTZ NOT NULL DEFAULT now(),
+        updated_at      TIMESTAMPTZ NOT NULL DEFAULT now(),
+        deleted_at      TIMESTAMPTZ,
+        CONSTRAINT uq_contract_templates_code UNIQUE (code)
+      );
+    `);
+
+    for (const seed of CONTRACT_TEMPLATE_DEFAULTS) {
+      const articles = seed.articles.map((article, index) => ({
+        ...article,
+        order: index + 1,
+      }));
+      await queryRunner.query(
+        `
+        INSERT INTO freight.contract_templates
+          (code, name, description, document_title, whereas_clauses, articles)
+        VALUES ($1, $2, $3, $4, $5::jsonb, $6::jsonb)
+        ON CONFLICT (code) DO NOTHING;
+        `,
+        [
+          seed.code,
+          seed.name,
+          seed.description,
+          seed.documentTitle,
+          JSON.stringify(seed.whereasClauses),
+          JSON.stringify(articles),
+        ],
+      );
+    }
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`DROP TABLE IF EXISTS freight.contract_templates;`);
+  }
+}
diff --git a/apps/edr-freight-api/src/migrations/2090000000000-RepairGrnNumberColumn.ts b/apps/edr-freight-api/src/migrations/2090000000000-RepairGrnNumberColumn.ts
new file mode 100644
index 000000000..aa2f998a2
--- /dev/null
+++ b/apps/edr-freight-api/src/migrations/2090000000000-RepairGrnNumberColumn.ts
@@ -0,0 +1,55 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+/**
+ * Repairs `freight.warehouse_inventory.grn_number`.
+ *
+ * AddGrnNumberToWarehouseInventory1828000000000 is recorded in `migrations` but
+ * the column is absent on at least one environment - it was added, then dropped
+ * out-of-band (a stray `synchronize: true`, same class of damage that
+ * RepairSynchronizeDrift1870000000000 already had to undo). Because TypeORM has
+ * the original recorded, it will never re-run it.
+ *
+ * Without the column, everything that reads or writes a GRN fails with
+ * `column ... grn_number does not exist`:
+ *   - bulkReceive()             -> INSERT names grn_number  (receive to warehouse)
+ *   - importQueueByStatuses()   -> Unloaded + Dispatch queues
+ *   - exportInventoryByStatus() -> Received / Ready-To-Load / Loaded tabs
+ *   - grnDocument()             -> GRN PDF
+ *
+ * Idempotent: a no-op on environments where the column survived.
+ */
+export class RepairGrnNumberColumn2090000000000 implements MigrationInterface {
+  name = 'RepairGrnNumberColumn2090000000000';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+      ALTER TABLE freight.warehouse_inventory
+      ADD COLUMN IF NOT EXISTS grn_number VARCHAR(100) NULL
+    `);
+
+    // Recover the GRN for rows received before the column existed: it was also
+    // written into the receive note as "GRN Number: <value>".
+    await queryRunner.query(`
+      UPDATE freight.warehouse_inventory
+         SET grn_number = substring(notes FROM 'GRN Number: ([^\\n\\r]+)')
+       WHERE grn_number IS NULL
+         AND notes IS NOT NULL
+         AND notes ~ 'GRN Number: '
+    `);
+
+    await queryRunner.query(`
+      CREATE INDEX IF NOT EXISTS idx_warehouse_inventory_grn_number
+      ON freight.warehouse_inventory(grn_number)
+      WHERE grn_number IS NOT NULL
+    `);
+  }
+
+  /**
+   * Deliberately a no-op. Dropping the column is what broke these environments
+   * in the first place, and the original 1828 migration already owns its own
+   * down(). Reverting this repair must not re-introduce the outage.
+   */
+  public async down(): Promise<void> {
+    // intentionally empty
+  }
+}
diff --git a/apps/edr-freight-api/src/migrations/2100000000000-CompanyProfileDefaultPending.ts b/apps/edr-freight-api/src/migrations/2100000000000-CompanyProfileDefaultPending.ts
new file mode 100644
index 000000000..aafa9715f
--- /dev/null
+++ b/apps/edr-freight-api/src/migrations/2100000000000-CompanyProfileDefaultPending.ts
@@ -0,0 +1,31 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+/**
+ * `company_profiles.status` defaulted to 'active', so any insert that omitted
+ * the column produced an operational role that was approved without ever being
+ * reviewed. Every live write path already passes 'pending' explicitly; this
+ * closes the hole at the schema level.
+ *
+ * Deliberately no data backfill. A role approved through setCompanyProfileStatus
+ * always stamps `reviewed_at`, so `status = 'active' AND reviewed_at IS NULL`
+ * flags a role that skipped review — but it also matches rows approved before
+ * `reviewed_at` existed (migration 2000000000001). Auditing that set is a
+ * judgement call about real customers, not something to automate here.
+ */
+export class CompanyProfileDefaultPending2100000000000
+  implements MigrationInterface
+{
+  name = 'CompanyProfileDefaultPending2100000000000';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `ALTER TABLE "freight"."company_profiles" ALTER COLUMN "status" SET DEFAULT 'pending'`,
+    );
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `ALTER TABLE "freight"."company_profiles" ALTER COLUMN "status" SET DEFAULT 'active'`,
+    );
+  }
+}
diff --git a/apps/edr-freight-api/src/migrations/2100000000000-WarehouseLoadingTrainAssociation.ts b/apps/edr-freight-api/src/migrations/2100000000000-WarehouseLoadingTrainAssociation.ts
new file mode 100644
index 000000000..26afdf82a
--- /dev/null
+++ b/apps/edr-freight-api/src/migrations/2100000000000-WarehouseLoadingTrainAssociation.ts
@@ -0,0 +1,35 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+/**
+ * Auto-load onto a selected train: a warehouse_loadings row now records WHICH
+ * train the item was loaded onto (train_schedule_id), and wagon_id becomes
+ * nullable because a schedule-level load may not resolve to a single wagon.
+ */
+export class WarehouseLoadingTrainAssociation2100000000000 implements MigrationInterface {
+  name = 'WarehouseLoadingTrainAssociation2100000000000';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+      ALTER TABLE freight.warehouse_loadings
+        ADD COLUMN IF NOT EXISTS train_schedule_id UUID NULL
+    `);
+    await queryRunner.query(`
+      ALTER TABLE freight.warehouse_loadings
+        ALTER COLUMN wagon_id DROP NOT NULL
+    `);
+    await queryRunner.query(`
+      CREATE INDEX IF NOT EXISTS idx_warehouse_loadings_train_schedule
+        ON freight.warehouse_loadings(train_schedule_id)
+        WHERE train_schedule_id IS NOT NULL
+    `);
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`DROP INDEX IF EXISTS freight.idx_warehouse_loadings_train_schedule`);
+    await queryRunner.query(`
+      ALTER TABLE freight.warehouse_loadings DROP COLUMN IF EXISTS train_schedule_id
+    `);
+    // wagon_id stays nullable on revert: restoring NOT NULL would fail on rows
+    // recorded without a wagon and re-introduce the outage this fixes.
+  }
+}
diff --git a/apps/edr-freight-api/src/migrations/2110000000000-RepairVehicleAvailabilityColumn.ts b/apps/edr-freight-api/src/migrations/2110000000000-RepairVehicleAvailabilityColumn.ts
new file mode 100644
index 000000000..c68a6c720
--- /dev/null
+++ b/apps/edr-freight-api/src/migrations/2110000000000-RepairVehicleAvailabilityColumn.ts
@@ -0,0 +1,32 @@
+import { MigrationInterface, QueryRunner } from "typeorm";
+
+/**
+ * Repair migration. `SeparateVehicleAvailability1890000000000` is recorded in
+ * public.migrations but the `availability` column is absent on some databases
+ * (recorded-but-not-applied drift). Because the original is already recorded,
+ * TypeORM will not re-run it, so `vehiclesService.findAll` (a query builder that
+ * selects every entity column) 500s with `column "availability" does not exist`.
+ *
+ * This re-adds the column idempotently and backfills. Safe to run everywhere:
+ * `IF NOT EXISTS` makes it a no-op where the column already exists.
+ */
+export class RepairVehicleAvailabilityColumn2110000000000
+  implements MigrationInterface
+{
+  name = "RepairVehicleAvailabilityColumn2110000000000";
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+      ALTER TABLE freight.vehicles
+      ADD COLUMN IF NOT EXISTS availability varchar DEFAULT 'FREE'
+    `);
+    await queryRunner.query(`
+      UPDATE freight.vehicles SET availability = 'FREE' WHERE availability IS NULL
+    `);
+  }
+
+  public async down(): Promise<void> {
+    // No-op: dropping a column other code now depends on would reintroduce the
+    // drift. The original SeparateVehicleAvailability migration owns the column.
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/ai/ai.controller.ts b/apps/edr-freight-api/src/modules/ai/ai.controller.ts
new file mode 100644
index 000000000..eb87fe97d
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/ai/ai.controller.ts
@@ -0,0 +1,31 @@
+import { Body, Controller, HttpCode, HttpStatus, Post } from '@nestjs/common';
+import { ApiOkResponse, ApiOperation, ApiTags } from '@nestjs/swagger';
+import { Public } from '@edr/api-common';
+
+import { AiBookingRequestDto } from './dto/ai-booking-request.dto';
+import { AiBookingResult } from './types/ai-booking-result.type';
+import { MockAiService } from './mock-ai.service';
+
+// @Public() — TODO: swap for real guard when this leaves dev/testing.
+// Safe while public: extracts + validates text only, never creates or
+// dispatches anything.
+@Public()
+@ApiTags('AI Assistant (mock)')
+@Controller('ai')
+export class AiController {
+  constructor(private readonly mockAiService: MockAiService) {}
+
+  @Post('booking/extract')
+  @HttpCode(HttpStatus.OK)
+  @ApiOperation({
+    summary:
+      'Mock AI: extract structured booking fields from free-text request',
+  })
+  @ApiOkResponse({
+    description:
+      'Extracted fields, validation result, and next-step recommendation',
+  })
+  extractBooking(@Body() dto: AiBookingRequestDto): AiBookingResult {
+    return this.mockAiService.extractBooking(dto.text);
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/ai/ai.module.ts b/apps/edr-freight-api/src/modules/ai/ai.module.ts
new file mode 100644
index 000000000..e274d90b6
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/ai/ai.module.ts
@@ -0,0 +1,11 @@
+import { Module } from '@nestjs/common';
+
+import { AiController } from './ai.controller';
+import { MockAiService } from './mock-ai.service';
+
+@Module({
+  controllers: [AiController],
+  providers: [MockAiService],
+  exports: [MockAiService],
+})
+export class AiModule {}
diff --git a/apps/edr-freight-api/src/modules/ai/dto/ai-booking-request.dto.ts b/apps/edr-freight-api/src/modules/ai/dto/ai-booking-request.dto.ts
new file mode 100644
index 000000000..7ec64e310
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/ai/dto/ai-booking-request.dto.ts
@@ -0,0 +1,15 @@
+import { ApiProperty } from '@nestjs/swagger';
+import { IsNotEmpty, IsString, MinLength } from 'class-validator';
+
+export class AiBookingRequestDto {
+  @ApiProperty({
+    description: 'Free-text customer booking request to extract fields from',
+    example:
+      'Book 2x40ft containers from Djibouti to Indode. Cargo electronics. Customer ABC Logistics.',
+    minLength: 5,
+  })
+  @IsString()
+  @IsNotEmpty({ message: 'text must not be empty' })
+  @MinLength(5, { message: 'text must be at least 5 characters' })
+  text!: string;
+}
diff --git a/apps/edr-freight-api/src/modules/ai/mock-ai.service.ts b/apps/edr-freight-api/src/modules/ai/mock-ai.service.ts
new file mode 100644
index 000000000..7883bf9ff
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/ai/mock-ai.service.ts
@@ -0,0 +1,277 @@
+import { Injectable } from '@nestjs/common';
+
+import {
+  AiBookingResult,
+  AiContainerType,
+  AiDirection,
+  AiExtractedBooking,
+  AiRecommendation,
+  AiValidationResult,
+} from './types/ai-booking-result.type';
+
+/**
+ * Deterministic keyword/regex "AI" for the booking assistant workflow.
+ * No external AI calls — this class is the single seam to swap for a real
+ * provider later (OllamaAiService / ClaudeAiService / OpenAiService): keep
+ * the `extractBooking(text): AiBookingResult` contract and replace the body.
+ */
+
+const KNOWN_LOCATIONS = [
+  'Djibouti',
+  'Indode',
+  'Modjo',
+  'Adama',
+  'Dire Dawa',
+  'Addis Ababa',
+] as const;
+
+const INLAND_LOCATIONS = new Set<string>([
+  'Indode',
+  'Modjo',
+  'Adama',
+  'Dire Dawa',
+  'Addis Ababa',
+]);
+
+// Longest names first so "Dire Dawa" wins before a shorter partial could.
+const LOCATION_ALTERNATION = [...KNOWN_LOCATIONS]
+  .sort((a, b) => b.length - a.length)
+  .map((name) => name.replace(/\s+/g, '\\s+'))
+  .join('|');
+
+// Checked in order; first hit wins, so specific cargo words beat the
+// generic "refrigerated" fallback.
+const CARGO_KEYWORDS: ReadonlyArray<readonly [RegExp, string]> = [
+  [/\belectronics\b/i, 'electronics'],
+  [/\bcoffee\b/i, 'coffee'],
+  [/\bwheat\b/i, 'wheat'],
+  [/\bfertilizers?\b/i, 'fertilizer'],
+  [/\bchemicals?\b/i, 'chemical'],
+  [/\bmachinery\b/i, 'machinery'],
+  [/\bmedicines?\b/i, 'medicine'],
+  [/\bsesame\b/i, 'sesame'],
+  [/\b(?:vehicles?|cars?)\b/i, 'vehicles'],
+  [/\brefrigerated\b/i, 'refrigerated cargo'],
+];
+
+const WORD_NUMBERS: Record<string, number> = {
+  one: 1,
+  two: 2,
+  three: 3,
+  four: 4,
+  five: 5,
+  six: 6,
+  seven: 7,
+  eight: 8,
+  nine: 9,
+  ten: 10,
+};
+
+// A capitalized-word run: "ABC Logistics", "Auto Import PLC", "Ethio Coffee
+// Export". Stops at the first lowercase word ("wants", "needs", …).
+const NAME_CAPTURE = String.raw`([A-Z][A-Za-z0-9&.'-]*(?:\s+[A-Z][A-Za-z0-9&.'-]*)*)`;
+
+// No `i` flag: the capture relies on case ([A-Z] word starts) to know where
+// the company name ends ("Customer ABC Logistics wants…" → "ABC Logistics").
+const CUSTOMER_PATTERNS: ReadonlyArray<RegExp> = [
+  new RegExp(String.raw`\b[Cc]ustomer(?:\s+is)?\s*:?\s+${NAME_CAPTURE}`),
+  new RegExp(String.raw`\b[Ff]or\s+${NAME_CAPTURE}`),
+];
+
+const RECOMMEND_CREATE: AiRecommendation = {
+  action: 'CREATE_DRAFT_BOOKING',
+  message:
+    'Booking data looks complete. User can review and create a draft booking.',
+  confidence: 0.85,
+};
+
+const RECOMMEND_MISSING: AiRecommendation = {
+  action: 'REQUEST_MISSING_INFORMATION',
+  message:
+    'Some required booking information is missing. Ask the customer for the missing fields before creating a draft booking.',
+  confidence: 0.45,
+};
+
+@Injectable()
+export class MockAiService {
+  extractBooking(text: string): AiBookingResult {
+    const input = text.trim();
+
+    const { origin, destination } = this.extractRoute(input);
+
+    const extracted: AiExtractedBooking = {
+      customerName: this.extractCustomerName(input),
+      origin,
+      destination,
+      cargoType: this.extractCargoType(input),
+      containerType: this.extractContainerType(input),
+      quantity: this.extractQuantity(input),
+      direction: this.resolveDirection(origin, destination),
+      weightKg: this.extractWeightKg(input),
+      pickupRequired: this.extractFlag(input, 'pickup'),
+      deliveryRequired: this.extractFlag(input, 'delivery'),
+    };
+
+    const validation = this.validate(extracted);
+
+    return {
+      provider: 'mock',
+      extracted,
+      validation,
+      recommendation: validation.valid ? RECOMMEND_CREATE : RECOMMEND_MISSING,
+    };
+  }
+
+  private extractCustomerName(text: string): string | null {
+    for (const pattern of CUSTOMER_PATTERNS) {
+      const match = text.match(pattern);
+      if (match?.[1]) {
+        const name = match[1].replace(/[.,;:!?]+$/, '').trim();
+        if (name) return name;
+      }
+    }
+    return null;
+  }
+
+  private extractRoute(text: string): {
+    origin: string | null;
+    destination: string | null;
+  } {
+    const fromMatch = text.match(
+      new RegExp(String.raw`\bfrom\s+(${LOCATION_ALTERNATION})\b`, 'i'),
+    );
+    const toMatch = text.match(
+      new RegExp(String.raw`\bto\s+(${LOCATION_ALTERNATION})\b`, 'i'),
+    );
+
+    let origin = fromMatch ? this.canonicalLocation(fromMatch[1]) : null;
+    let destination = toMatch ? this.canonicalLocation(toMatch[1]) : null;
+
+    if (!origin || !destination) {
+      // Fall back to order of appearance ("Djibouti to Indode" without
+      // "from", or a bare location mention).
+      const mentions: string[] = [];
+      const all = text.matchAll(
+        new RegExp(String.raw`\b(${LOCATION_ALTERNATION})\b`, 'gi'),
+      );
+      for (const m of all) {
+        const canonical = this.canonicalLocation(m[1]);
+        if (canonical && !mentions.includes(canonical)) mentions.push(canonical);
+      }
+
+      if (!origin && !destination) {
+        origin = mentions[0] ?? null;
+        destination = mentions[1] ?? null;
+      } else if (!origin) {
+        origin = mentions.find((loc) => loc !== destination) ?? null;
+      } else {
+        destination = mentions.find((loc) => loc !== origin) ?? null;
+      }
+    }
+
+    return { origin, destination };
+  }
+
+  private canonicalLocation(raw: string): string | null {
+    const normalized = raw.replace(/\s+/g, ' ').toLowerCase();
+    return (
+      KNOWN_LOCATIONS.find((loc) => loc.toLowerCase() === normalized) ?? null
+    );
+  }
+
+  private resolveDirection(
+    origin: string | null,
+    destination: string | null,
+  ): AiDirection | null {
+    if (!origin || !destination) return null;
+    if (origin === 'Djibouti' && INLAND_LOCATIONS.has(destination)) {
+      return 'IMPORT';
+    }
+    if (INLAND_LOCATIONS.has(origin) && destination === 'Djibouti') {
+      return 'EXPORT';
+    }
+    return null;
+  }
+
+  private extractCargoType(text: string): string | null {
+    for (const [pattern, cargo] of CARGO_KEYWORDS) {
+      if (pattern.test(text)) return cargo;
+    }
+    return null;
+  }
+
+  private extractContainerType(text: string): AiContainerType | null {
+    // Lookbehind instead of \b: "2x40ft" has no word boundary before "40",
+    // but "140ft" must not read as a 40ft container.
+    if (/(?<!\d)40[\s-]?(?:ft|foot)\b/i.test(text)) return '40FT';
+    if (/(?<!\d)20[\s-]?(?:ft|foot)\b/i.test(text)) return '20FT';
+    if (/\bbulk\b/i.test(text)) return 'BULK';
+    if (/\b(?:vehicles?|cars?)\b/i.test(text)) return 'RO_RO';
+    return null;
+  }
+
+  private extractQuantity(text: string): number | null {
+    // "2x40ft", "2 x 40ft", "3x20ft", "1x20ft"
+    let match = text.match(/(\d+)\s*x\s*\d+\s*-?\s*(?:ft|foot)\b/i);
+    if (match) return parseInt(match[1], 10);
+
+    // "one 40ft container", "two containers"
+    match = text.match(
+      new RegExp(
+        String.raw`\b(${Object.keys(WORD_NUMBERS).join('|')})\s+(?:\d+\s*-?\s*(?:ft|foot)\s+)?containers?\b`,
+        'i',
+      ),
+    );
+    if (match) return WORD_NUMBERS[match[1].toLowerCase()];
+
+    // "3 containers", "2 refrigerated containers"
+    match = text.match(/(\d+)\s+(?:[a-z]+\s+)?containers?\b/i);
+    if (match) return parseInt(match[1], 10);
+
+    // "5 vehicles", "3 cars"
+    match = text.match(/(\d+)\s+(?:vehicles?|cars?)\b/i);
+    if (match) return parseInt(match[1], 10);
+
+    return null;
+  }
+
+  private extractWeightKg(text: string): number | null {
+    const tons = text.match(/([\d,]+(?:\.\d+)?)\s*(?:tons?|tonnes?)\b/i);
+    if (tons) return Math.round(this.parseNumber(tons[1]) * 1000);
+
+    const kg = text.match(/([\d,]+(?:\.\d+)?)\s*kgs?\b/i);
+    if (kg) return Math.round(this.parseNumber(kg[1]));
+
+    return null;
+  }
+
+  private parseNumber(raw: string): number {
+    return parseFloat(raw.replace(/,/g, ''));
+  }
+
+  private extractFlag(
+    text: string,
+    kind: 'pickup' | 'delivery',
+  ): boolean | null {
+    // "no pickup required" must read as false, so the negative wins.
+    if (new RegExp(String.raw`\bno\s+${kind}\b`, 'i').test(text)) return false;
+    if (new RegExp(String.raw`\b${kind}\s+required\b`, 'i').test(text)) {
+      return true;
+    }
+    return null;
+  }
+
+  private validate(extracted: AiExtractedBooking): AiValidationResult {
+    const errors: string[] = [];
+
+    if (!extracted.customerName) errors.push('Customer name is missing');
+    if (!extracted.origin) errors.push('Origin is missing');
+    if (!extracted.destination) errors.push('Destination is missing');
+    if (!extracted.cargoType) errors.push('Cargo type is missing');
+    if (!extracted.containerType) errors.push('Container type is missing');
+    if (extracted.quantity === null) errors.push('Quantity is missing');
+    if (!extracted.direction) errors.push('Direction is missing');
+
+    return { valid: errors.length === 0, errors };
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/ai/types/ai-booking-result.type.ts b/apps/edr-freight-api/src/modules/ai/types/ai-booking-result.type.ts
new file mode 100644
index 000000000..41938589e
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/ai/types/ai-booking-result.type.ts
@@ -0,0 +1,47 @@
+export const AI_CONTAINER_TYPES = ['20FT', '40FT', 'BULK', 'RO_RO'] as const;
+export type AiContainerType = (typeof AI_CONTAINER_TYPES)[number];
+
+export const AI_DIRECTIONS = ['IMPORT', 'EXPORT'] as const;
+export type AiDirection = (typeof AI_DIRECTIONS)[number];
+
+export const AI_RECOMMENDATION_ACTIONS = [
+  'CREATE_DRAFT_BOOKING',
+  'REQUEST_MISSING_INFORMATION',
+] as const;
+export type AiRecommendationAction = (typeof AI_RECOMMENDATION_ACTIONS)[number];
+
+export interface AiExtractedBooking {
+  customerName: string | null;
+  origin: string | null;
+  destination: string | null;
+  cargoType: string | null;
+  containerType: AiContainerType | null;
+  quantity: number | null;
+  direction: AiDirection | null;
+  weightKg: number | null;
+  pickupRequired: boolean | null;
+  deliveryRequired: boolean | null;
+}
+
+export interface AiValidationResult {
+  valid: boolean;
+  errors: string[];
+}
+
+export interface AiRecommendation {
+  action: AiRecommendationAction;
+  message: string;
+  confidence: number;
+}
+
+/**
+ * Payload returned by the extract endpoint. The global
+ * ResponseTransformInterceptor wraps it as
+ * `{ success: true, data: AiBookingResult, timestamp }` on the wire.
+ */
+export interface AiBookingResult {
+  provider: 'mock';
+  extracted: AiExtractedBooking;
+  validation: AiValidationResult;
+  recommendation: AiRecommendation;
+}
diff --git a/apps/edr-freight-api/src/modules/billing/documents/styled-pdf.util.ts b/apps/edr-freight-api/src/modules/billing/documents/styled-pdf.util.ts
index b4f168e4e..d2a88b683 100644
--- a/apps/edr-freight-api/src/modules/billing/documents/styled-pdf.util.ts
+++ b/apps/edr-freight-api/src/modules/billing/documents/styled-pdf.util.ts
@@ -143,6 +143,20 @@ export function htmlToText(html: string): string {
     .trim();
 }
 
+/**
+ * Large rotated light-gray copy label (e.g. "Copy 1: Port Operations Copy"),
+ * drawn FIRST so the page content sits on top of it. 30-degree rotation via a
+ * text matrix; roughly centered on the page.
+ */
+export function watermarkOp(text: string, page: { width: number; height: number }): string {
+  const label = clipText(text, 46);
+  const size = 34;
+  const w = textWidth(label, size);
+  const x = page.width / 2 - (w * 0.866) / 2;
+  const y = page.height / 2 - (w * 0.5) / 2;
+  return `q BT 0.93 0.93 0.93 rg /F2 ${size} Tf 0.866 0.5 -0.5 0.866 ${x.toFixed(1)} ${y.toFixed(1)} Tm (${escapePdfText(label)}) Tj ET Q`;
+}
+
 /**
  * Parse a "summary tiles + one <table> + notice + signature lines" document (the
  * marshalling / load-list layout the train-scheduling builders emit) and draw it as a
@@ -150,11 +164,26 @@ export function htmlToText(html: string): string {
  * document, not a flat text dump. Switches to landscape when the table is wide.
  */
 export function buildTabularFallbackPdf(html: string): Buffer {
+  // Documents printed in duplicate wrap each copy in <section class="copy">
+  // (freight order: Port Operations copy + Gate Security copy). Render one
+  // page per copy, each with its own watermark and tile set — parsing the
+  // whole HTML at once would merge both copies' tiles and drop the watermarks.
+  const copies = [...html.matchAll(/<section class="copy">([\s\S]*?)<\/section>/gi)].map((m) => m[1]);
+  const fragments = copies.length ? copies : [html];
+  return assemblePdf(fragments.flatMap((fragment) => buildTabularPageOps(fragment)));
+}
+
+function buildTabularPageOps(
+  html: string,
+): Array<{ ops: string[]; page: { width: number; height: number } }> {
   const pick = (re: RegExp) => html.match(re)?.[1];
   const title = htmlToText(pick(/<h1[^>]*>([\s\S]*?)<\/h1>/i) ?? "Document");
   const subtitle = htmlToText(pick(/class="subtitle"[^>]*>([\s\S]*?)<\/div>/i) ?? "");
   const metaRef = htmlToText(pick(/class="meta"[\s\S]*?<strong>([\s\S]*?)<\/strong>/i) ?? "");
+  const metaLabel =
+    htmlToText(pick(/class="meta"[^>]*>([\s\S]*?)<strong/i) ?? "").toUpperCase() || "REFERENCE";
   const generated = htmlToText(pick(/Generated:\s*([^<]+)/i) ?? "");
+  const watermark = htmlToText(pick(/class="watermark"[^>]*>([\s\S]*?)<\/div>/i) ?? "");
 
   const tiles: Array<[string, string]> = [];
   for (const m of html.matchAll(
@@ -180,24 +209,49 @@ export function buildTabularFallbackPdf(html: string): Buffer {
   const M = 32;
   const contentW = page.width - M * 2;
   const right = page.width - M;
-  const ops: string[] = [];
+  const MAX_PAGES = 12;
 
-  // Header
-  ops.push(lineOp(M, page.height - 28, right, page.height - 28, PdfColor.teal, 2.4));
-  ops.push(textOp("ETHIO-DJIBOUTI RAILWAY S.C.", M, page.height - 44, 8.5, "F2", PdfColor.gray));
-  ops.push(textOp(clipText(title, landscape ? 82 : 52), M, page.height - 68, 19, "F2", PdfColor.dark));
-  if (subtitle) ops.push(textOp(clipText(subtitle, 96), M, page.height - 82, 9, "F1", PdfColor.gray));
-  if (metaRef) {
-    ops.push(textOpRight("TRAIN / SCHEDULE", right, page.height - 42, 7.5, "F2", PdfColor.gray));
-    ops.push(textOpRight(clipText(metaRef, 28), right, page.height - 58, 12, "F2", PdfColor.dark));
-  }
-  if (generated) {
-    ops.push(textOpRight(clipText(`Generated ${generated}`, 40), right, page.height - 72, 8, "F1", PdfColor.gray));
-  }
-  ops.push(lineOp(M, page.height - 92, right, page.height - 92, PdfColor.line, 1));
+  const pagesOut: Array<{ ops: string[]; page: { width: number; height: number } }> = [];
+  let ops: string[] = [];
+  let y = 0;
 
-  // Summary tiles
-  let y = page.height - 100;
+  const drawFullHeader = () => {
+    ops.push(lineOp(M, page.height - 28, right, page.height - 28, PdfColor.teal, 2.4));
+    ops.push(textOp("ETHIO-DJIBOUTI RAILWAY S.C.", M, page.height - 44, 8.5, "F2", PdfColor.gray));
+    ops.push(textOp(clipText(title, landscape ? 82 : 52), M, page.height - 68, 19, "F2", PdfColor.dark));
+    if (subtitle) ops.push(textOp(clipText(subtitle, 96), M, page.height - 82, 9, "F1", PdfColor.gray));
+    if (metaRef) {
+      ops.push(textOpRight(clipText(metaLabel, 26), right, page.height - 42, 7.5, "F2", PdfColor.gray));
+      ops.push(textOpRight(clipText(metaRef, 28), right, page.height - 58, 12, "F2", PdfColor.dark));
+    }
+    if (generated) {
+      ops.push(textOpRight(clipText(`Generated ${generated}`, 40), right, page.height - 72, 8, "F1", PdfColor.gray));
+    }
+    ops.push(lineOp(M, page.height - 92, right, page.height - 92, PdfColor.line, 1));
+    y = page.height - 100;
+  };
+
+  const drawContinuationHeader = (pageNo: number) => {
+    ops.push(lineOp(M, page.height - 24, right, page.height - 24, PdfColor.teal, 1.6));
+    ops.push(
+      textOp(clipText(`${title} (continued — page ${pageNo})`, landscape ? 100 : 68), M, page.height - 42, 11, "F2", PdfColor.dark),
+    );
+    if (metaRef) ops.push(textOpRight(clipText(metaRef, 28), right, page.height - 42, 10, "F2", PdfColor.gray));
+    y = page.height - 54;
+  };
+
+  const startPage = (first: boolean) => {
+    ops = [];
+    if (watermark) ops.push(watermarkOp(watermark, page));
+    if (first) drawFullHeader();
+    else drawContinuationHeader(pagesOut.length + 1);
+  };
+
+  const finishPage = () => pagesOut.push({ ops, page });
+
+  startPage(true);
+
+  // Summary tiles (first page only)
   if (tiles.length) {
     const cols = landscape ? 6 : 4;
     const tileW = contentW / cols;
@@ -213,21 +267,34 @@ export function buildTabularFallbackPdf(html: string): Buffer {
     y -= tileH + 12;
   }
 
-  // Table
+  // Table, paginated across as many pages as the rows need.
   if (headers.length) {
     const colW = contentW / headers.length;
     const headerH = 16;
     const rowH = 14;
     const cellChars = Math.max(4, Math.floor(colW / 3.9));
-    ops.push(rectOp(M, y - headerH, contentW, headerH, PdfColor.tint, PdfColor.line, 0.6));
-    headers.forEach((h, c) =>
-      ops.push(textOp(clipText(h, cellChars), M + c * colW + 4, y - 11, 7, "F2", PdfColor.teal)),
-    );
-    y -= headerH;
+    const bottomReserve = 46; // keep clear of the page edge on row-only pages
 
-    let shown = 0;
-    for (const row of rows) {
-      if (y < 96) break;
+    const drawTableHeader = () => {
+      ops.push(rectOp(M, y - headerH, contentW, headerH, PdfColor.tint, PdfColor.line, 0.6));
+      headers.forEach((h, c) =>
+        ops.push(textOp(clipText(h, cellChars), M + c * colW + 4, y - 11, 7, "F2", PdfColor.teal)),
+      );
+      y -= headerH;
+    };
+
+    drawTableHeader();
+    let truncated = 0;
+    for (const [index, row] of rows.entries()) {
+      if (y - rowH < bottomReserve) {
+        if (pagesOut.length + 1 >= MAX_PAGES) {
+          truncated = rows.length - index;
+          break;
+        }
+        finishPage();
+        startPage(false);
+        drawTableHeader();
+      }
       ops.push(rectOp(M, y - rowH, contentW, rowH, "1 1 1", PdfColor.line, 0.4));
       headers.forEach((_h, c) => {
         if (c > 0) ops.push(lineOp(M + c * colW, y - rowH, M + c * colW, y, PdfColor.line, 0.3));
@@ -235,30 +302,33 @@ export function buildTabularFallbackPdf(html: string): Buffer {
         if (cell) ops.push(textOp(clipText(cell, cellChars), M + c * colW + 4, y - 10, 6.8, "F1", PdfColor.dark));
       });
       y -= rowH;
-      shown += 1;
     }
-    if (shown < rows.length) {
-      ops.push(textOp(`... ${rows.length - shown} more row(s) not shown`, M, y - 10, 7, "F1", PdfColor.gray));
+    if (truncated > 0) {
+      ops.push(textOp(`... ${truncated} more row(s) not shown`, M, y - 10, 7, "F1", PdfColor.gray));
     }
   }
 
-  // Notice (verification clause)
+  // Notice + signatures live on the final page; give them a fresh page when the
+  // rows ran too deep for the fixed bottom band.
+  if (y < 110 && (notice || signatures.length)) {
+    finishPage();
+    startPage(false);
+  }
   if (notice) {
     ops.push(lineOp(M, 78, M, 54, PdfColor.teal, 2));
     wrapText(notice, landscape ? 155 : 104)
       .slice(0, 2)
       .forEach((ln, i) => ops.push(textOp(ln, M + 8, 72 - i * 11, 7.5, "F1", PdfColor.gray)));
   }
-
-  // Signatures
   const sigW = contentW / signatures.length;
-  signatures.forEach((s, i) => {
+  signatures.forEach((sig, i) => {
     const x = M + i * sigW;
     ops.push(lineOp(x, 40, x + sigW - 18, 40, PdfColor.dark, 0.7));
-    ops.push(textOp(clipText(s, Math.floor((sigW - 18) / 3.6)), x, 30, 7, "F1", PdfColor.gray));
+    ops.push(textOp(clipText(sig, Math.floor((sigW - 18) / 3.6)), x, 30, 7, "F1", PdfColor.gray));
   });
+  finishPage();
 
-  return assembleSinglePagePdf(ops, page);
+  return pagesOut;
 }
 
 /** Greedy word-wrap to a maximum character width. */
@@ -320,3 +390,41 @@ export function assembleSinglePagePdf(
   pdf += `trailer\n<< /Size ${objects.length + 1} /Root 1 0 R >>\nstartxref\n${xrefOffset}\n%%EOF\n`;
   return Buffer.from(pdf, "latin1");
 }
+
+/** Assemble a multi-page PDF; one content stream per page, shared Helvetica fonts. */
+export function assemblePdf(
+  pages: Array<{ ops: string[]; page: { width: number; height: number } }>,
+): Buffer {
+  const kids = pages.map((_, i) => `${5 + i * 2} 0 R`).join(" ");
+  const objects: string[] = [
+    "<< /Type /Catalog /Pages 2 0 R >>",
+    `<< /Type /Pages /Kids [${kids}] /Count ${pages.length} >>`,
+    "<< /Type /Font /Subtype /Type1 /BaseFont /Helvetica >>",
+    "<< /Type /Font /Subtype /Type1 /BaseFont /Helvetica-Bold >>",
+  ];
+  for (const [i, p] of pages.entries()) {
+    const stream = p.ops.join("\n");
+    objects.push(
+      `<< /Type /Page /Parent 2 0 R /MediaBox [0 0 ${p.page.width} ${p.page.height}] /Resources << /Font << /F1 3 0 R /F2 4 0 R >> >> /Contents ${6 + i * 2} 0 R >>`,
+    );
+    objects.push(`<< /Length ${Buffer.byteLength(stream, "latin1")} >>\nstream\n${stream}\nendstream`);
+  }
+
+  let pdf = "%PDF-1.4\n";
+  const offsets: number[] = [0];
+  objects.forEach((object, index) => {
+    offsets.push(Buffer.byteLength(pdf, "latin1"));
+    pdf += `${index + 1} 0 obj\n${object}\nendobj\n`;
+  });
+  while (Buffer.byteLength(pdf, "latin1") < MIN_VALID_PDF_BYTES) {
+    pdf += "% fallback padding\n";
+  }
+  const xrefOffset = Buffer.byteLength(pdf, "latin1");
+  pdf += `xref\n0 ${objects.length + 1}\n`;
+  pdf += "0000000000 65535 f \n";
+  for (const offset of offsets.slice(1)) {
+    pdf += `${String(offset).padStart(10, "0")} 00000 n \n`;
+  }
+  pdf += `trailer\n<< /Size ${objects.length + 1} /Root 1 0 R >>\nstartxref\n${xrefOffset}\n%%EOF\n`;
+  return Buffer.from(pdf, "latin1");
+}
diff --git a/apps/edr-freight-api/src/modules/bookings/booking-pricing.service.ts b/apps/edr-freight-api/src/modules/bookings/booking-pricing.service.ts
index d63106c2b..00cf55e17 100644
--- a/apps/edr-freight-api/src/modules/bookings/booking-pricing.service.ts
+++ b/apps/edr-freight-api/src/modules/bookings/booking-pricing.service.ts
@@ -400,8 +400,18 @@ export class BookingPricingService {
    * All three components are produced by RuleEngineService.evaluate, so submit
    * simply re-runs the engine — there is no extra submit-time inflation.
    */
-  async computeSubmitPriorityScore(booking: Booking): Promise<number> {
+  async computeSubmitPriorityScore(
+    booking: Booking,
+    totalWagonsOverride?: number,
+  ): Promise<number> {
     const evalInput = await this.buildEvalInputForBooking(booking);
+    // BULK bookings have no container lines, so buildEvalInputForBooking yields
+    // totalWagons = 0 and every wagon-range priority config misses. The batch
+    // engine derives a bulk booking's wagon footprint from tonnage vs. live
+    // wagon capacity and passes it here to score the booking properly.
+    if (totalWagonsOverride != null && totalWagonsOverride > 0) {
+      evalInput.totalWagons = totalWagonsOverride;
+    }
     const ruleResult = await this.ruleEngineService.evaluate(evalInput);
     return ruleResult.priorityScore;
   }
diff --git a/apps/edr-freight-api/src/modules/bookings/booking-transition.clearance.spec.ts b/apps/edr-freight-api/src/modules/bookings/booking-transition.clearance.spec.ts
index 72c83e136..890ae6344 100644
--- a/apps/edr-freight-api/src/modules/bookings/booking-transition.clearance.spec.ts
+++ b/apps/edr-freight-api/src/modules/bookings/booking-transition.clearance.spec.ts
@@ -14,9 +14,10 @@ describe('BookingTransitionService — finalizeClearance gate', () => {
     serviceType: { includesCustoms: false }, // no output set → only the input gate
   };
 
-  // Input set has two required docs.
+  // Input set has two required docs. Non-customs bookings resolve to the
+  // ONE_TIME self-clearance document set.
   const inputSetting = {
-    code: 'clearance_import_container_without_customs',
+    code: 'contract_clearance_selfclear_import_container',
     fields: [
       { fileKey: 'commercial_invoice', isRequired: true },
       { fileKey: 'packing_list', isRequired: true },
@@ -198,7 +199,7 @@ describe('BookingTransitionService — finalizeClearance customs output gate', (
  */
 describe('BookingTransitionService — submitClearanceDocuments required-fields gate', () => {
   const inputSetting = {
-    code: 'clearance_import_container_without_customs',
+    code: 'contract_clearance_selfclear_import_container',
     fields: [
       { fileKey: 'commercial_invoice', fileLabel: 'Commercial invoice', isRequired: true },
       { fileKey: 'packing_list', fileLabel: 'Packing list', isRequired: true },
diff --git a/apps/edr-freight-api/src/modules/bookings/booking-transition.service.ts b/apps/edr-freight-api/src/modules/bookings/booking-transition.service.ts
index 8b6e8a2f8..7b1522446 100644
--- a/apps/edr-freight-api/src/modules/bookings/booking-transition.service.ts
+++ b/apps/edr-freight-api/src/modules/bookings/booking-transition.service.ts
@@ -988,6 +988,15 @@ export class BookingTransitionService {
       "OPERATION_CHANGES_REQUESTED",
     ]);
 
+    // A bare initiated instance (clearance-first flow) carries no cargo or
+    // price — it must go through the contract completion endpoint, which
+    // persists cargo, prices, invoices and only then lands here itself.
+    if (booking.contractId && !(Number(booking.totalAmount) > 0)) {
+      throw new BadRequestException(
+        "This booking must be completed (cargo and shipment day) before requesting operation.",
+      );
+    }
+
     const date = new Date(scheduledDate);
     if (Number.isNaN(date.getTime())) {
       throw new BadRequestException("A valid schedule date is required");
diff --git a/apps/edr-freight-api/src/modules/bookings/bookings.module.ts b/apps/edr-freight-api/src/modules/bookings/bookings.module.ts
index 4b3e3bcca..e7806c13c 100644
--- a/apps/edr-freight-api/src/modules/bookings/bookings.module.ts
+++ b/apps/edr-freight-api/src/modules/bookings/bookings.module.ts
@@ -11,6 +11,7 @@ import { RuleEngineModule } from '../rule-engine/rule-engine.module';
 import { FileUploadSettingsModule } from '../file-upload-settings/file-upload-settings.module';
 import { SignaturesModule } from '../signatures/signatures.module';
 import { BillingModule } from '../billing/billing.module';
+import { DocumentsModule } from '../billing/documents/documents.module';
 import { FirstMileModule } from '../first-mile/first-mile.module';
 import { LastMileModule } from '../last-mile/last-mile.module';
 import { BookingContractService } from './booking-contract.service';
@@ -68,6 +69,7 @@ import { VehiclesModule } from "../vehicles/vehicles.module";
       CustomerTruckContainer,
     ]),
     BillingModule,
+    DocumentsModule,
     NotificationsModule,
     NotificationInboxModule,
     forwardRef(() => FirstMileModule),
@@ -116,6 +118,7 @@ import { VehiclesModule } from "../vehicles/vehicles.module";
     BookingPricingService,
     BookingInvoiceService,
     BookingLifecycleNotifierService,
+    BookingTransitionService,
     ConsolidationService,
     CustomerTruckService,
     ContainerReceiptService,
diff --git a/apps/edr-freight-api/src/modules/bookings/bookings.repository.spec.ts b/apps/edr-freight-api/src/modules/bookings/bookings.repository.spec.ts
index 7d4ff199c..b2937e98d 100644
--- a/apps/edr-freight-api/src/modules/bookings/bookings.repository.spec.ts
+++ b/apps/edr-freight-api/src/modules/bookings/bookings.repository.spec.ts
@@ -7,6 +7,7 @@ function mockQueryBuilder() {
   const qb = {
     leftJoinAndSelect: jest.fn().mockReturnThis(),
     leftJoin: jest.fn().mockReturnThis(),
+    addSelect: jest.fn().mockReturnThis(),
     where: jest.fn().mockReturnThis(),
     andWhere: jest.fn().mockReturnThis(),
     orderBy: jest.fn().mockReturnThis(),
@@ -15,6 +16,8 @@ function mockQueryBuilder() {
     take: jest.fn().mockReturnThis(),
     getMany: jest.fn(),
     getManyAndCount: jest.fn().mockResolvedValue([[], 0]),
+    getCount: jest.fn().mockResolvedValue(0),
+    getRawAndEntities: jest.fn().mockResolvedValue({ entities: [], raw: [] }),
   };
   return qb;
 }
diff --git a/apps/edr-freight-api/src/modules/bookings/bookings.repository.ts b/apps/edr-freight-api/src/modules/bookings/bookings.repository.ts
index 087786715..a3009ec3c 100644
--- a/apps/edr-freight-api/src/modules/bookings/bookings.repository.ts
+++ b/apps/edr-freight-api/src/modules/bookings/bookings.repository.ts
@@ -44,6 +44,11 @@ export interface BookingListFilterOptions {
   customsClearingEnabled?: boolean;
   createdFrom?: string;
   createdTo?: string;
+  scheduledFrom?: string;
+  scheduledTo?: string;
+  originYardId?: string;
+  destinationYardId?: string;
+  isGovernment?: 'true' | 'false';
   consolidationPaired?: string;
 }
 
@@ -799,9 +804,16 @@ export class BookingsRepository extends BaseRepository<Booking> {
       });
     }
     if (options.bookingType) {
-      qb.andWhere('booking.bookingType = :bookingType', {
-        bookingType: options.bookingType,
-      });
+      // The stored booking_type column is 'ONE_TIME' for every row (contract
+      // drawdowns included — see contract-booking.service create), so the
+      // one-time vs general split keys on the denormalized contract_kind:
+      // GENERAL_CONTRACT tab = bookings under a GENERAL contract, ONE_TIME tab
+      // = everything else (ONE_TIME contracts and legacy contract-less rows).
+      if (options.bookingType === 'GENERAL_CONTRACT') {
+        qb.andWhere("booking.contract_kind = 'GENERAL'");
+      } else {
+        qb.andWhere("booking.contract_kind IS DISTINCT FROM 'GENERAL'");
+      }
     }
     if (options.createdFrom) {
       qb.andWhere('booking.created_at >= :createdFrom', {
@@ -814,6 +826,32 @@ export class BookingsRepository extends BaseRepository<Booking> {
         createdTo: options.createdTo,
       });
     }
+    if (options.scheduledFrom) {
+      qb.andWhere('booking.scheduled_date >= :scheduledFrom', {
+        scheduledFrom: options.scheduledFrom,
+      });
+    }
+    if (options.scheduledTo) {
+      // Inclusive end-of-day: callers pass a date; include the whole day.
+      qb.andWhere('booking.scheduled_date <= :scheduledTo', {
+        scheduledTo: options.scheduledTo,
+      });
+    }
+    if (options.originYardId) {
+      qb.andWhere('booking.origin_yard_id = :originYardId', {
+        originYardId: options.originYardId,
+      });
+    }
+    if (options.destinationYardId) {
+      qb.andWhere('booking.destination_yard_id = :destinationYardId', {
+        destinationYardId: options.destinationYardId,
+      });
+    }
+    if (options.isGovernment === 'true') {
+      qb.andWhere('booking.is_government = TRUE');
+    } else if (options.isGovernment === 'false') {
+      qb.andWhere('booking.is_government = FALSE');
+    }
     if (options.tradeDirection) {
       qb.andWhere('booking.trade_direction = :tradeDirection', {
         tradeDirection: options.tradeDirection,
@@ -999,6 +1037,7 @@ export class BookingsRepository extends BaseRepository<Booking> {
       .leftJoinAndSelect('booking.company', 'company')
       .leftJoinAndSelect('booking.bookingContainers', 'bookingContainer')
       .leftJoinAndSelect('bookingContainer.containerType', 'containerType')
+      .leftJoinAndSelect('booking.cargoType', 'cargoType')
       .leftJoin(TrainScheduleBooking, 'sb', 'sb.booking_id = booking.id')
       .where('booking.train_schedule_id = :scheduleId', { scheduleId })
       .andWhere('sb.id IS NULL')
@@ -1030,6 +1069,7 @@ export class BookingsRepository extends BaseRepository<Booking> {
       .leftJoinAndSelect('booking.company', 'company')
       .leftJoinAndSelect('booking.bookingContainers', 'bookingContainer')
       .leftJoinAndSelect('bookingContainer.containerType', 'containerType')
+      .leftJoinAndSelect('booking.cargoType', 'cargoType')
       .leftJoin(TrainScheduleBooking, 'sb', 'sb.booking_id = booking.id')
       .where('booking.origin_yard_id = :originYardId', { originYardId })
       .andWhere('booking.destination_yard_id = :destinationYardId', {
@@ -1069,6 +1109,7 @@ export class BookingsRepository extends BaseRepository<Booking> {
       .leftJoinAndSelect('booking.company', 'company')
       .leftJoinAndSelect('booking.bookingContainers', 'bookingContainer')
       .leftJoinAndSelect('bookingContainer.containerType', 'containerType')
+      .leftJoinAndSelect('booking.cargoType', 'cargoType')
       .leftJoin(TrainScheduleBooking, 'sb', 'sb.booking_id = booking.id')
       .where('booking.origin_yard_id IN (:...corridorYardIds)', { corridorYardIds })
       .andWhere('booking.destination_yard_id IN (:...corridorYardIds)', {
@@ -1134,6 +1175,7 @@ export class BookingsRepository extends BaseRepository<Booking> {
       .leftJoinAndSelect('booking.company', 'company')
       .leftJoinAndSelect('booking.bookingContainers', 'bookingContainer')
       .leftJoinAndSelect('bookingContainer.containerType', 'containerType')
+      .leftJoinAndSelect('booking.cargoType', 'cargoType')
       .where('booking.train_schedule_id = :scheduleId', { scheduleId })
       .orderBy('booking.is_government', 'DESC')
       .addOrderBy('booking.priority_score', 'DESC')
@@ -1148,6 +1190,7 @@ export class BookingsRepository extends BaseRepository<Booking> {
       .leftJoinAndSelect('booking.company', 'company')
       .leftJoinAndSelect('booking.bookingContainers', 'bookingContainer')
       .leftJoinAndSelect('bookingContainer.containerType', 'containerType')
+      .leftJoinAndSelect('booking.cargoType', 'cargoType')
       .where('booking.train_schedule_id = :scheduleId', { scheduleId })
       .andWhere(`booking.status IN ('SELECTED_FOR_BATCH', 'AWAITING_PAYMENT')`)
       .getMany();
@@ -1177,6 +1220,8 @@ export class BookingsRepository extends BaseRepository<Booking> {
     return this.repository
       .createQueryBuilder('booking')
       .leftJoinAndSelect('booking.bookingContainers', 'bookingContainer')
+      .leftJoinAndSelect('bookingContainer.containerType', 'containerType')
+      .leftJoinAndSelect('booking.cargoType', 'cargoType')
       .innerJoin(
         TrainScheduleBooking,
         'sb',
diff --git a/apps/edr-freight-api/src/modules/bookings/bookings.service.ts b/apps/edr-freight-api/src/modules/bookings/bookings.service.ts
index 48a29988a..9f72c7409 100644
--- a/apps/edr-freight-api/src/modules/bookings/bookings.service.ts
+++ b/apps/edr-freight-api/src/modules/bookings/bookings.service.ts
@@ -50,7 +50,8 @@ import { Booking } from './entities/booking.entity';
 import { BookingContainerAllocation } from './entities/booking-container-allocation.entity';
 import { FileRecord } from '../files/entities/file.entity';
 import { CustomerTruckAssignmentDto } from './dto/customer-truck-assignment.dto';
-import { ContractPdfService } from '../../contracts/contract-pdf.service';
+import { PdfRenderService } from '../billing/documents/pdf-render.service';
+import { buildTabularFallbackPdf } from '../billing/documents/styled-pdf.util';
 
 /** Paginated booking list: flat `total` (backoffice) + `meta` block (portal). */
 export interface PaginatedBookings {
@@ -99,7 +100,7 @@ export class BookingsService {
     private readonly containerTypesService: ContainerTypesService,
     private readonly consolidationService: ConsolidationService,
     private readonly vehiclesService: VehiclesService,
-    private readonly contractPdfService: ContractPdfService,
+    private readonly pdfRender: PdfRenderService,
     private readonly events: EventEmitter2,
   ) {}
 
@@ -170,7 +171,12 @@ export class BookingsService {
     );
 
     const html = this.buildCustomerTruckFreightOrderHtml(booking, trucks);
-    const buffer = await this.contractPdfService.htmlToPdfBuffer(html);
+    // Chromium when available; otherwise the styled tabular fallback (never the
+    // generic text dump — the freight order is an outward-facing gate document).
+    const buffer = await this.pdfRender.htmlToPdfBuffer(html, {
+      label: 'freight order',
+      fallback: (prepared) => buildTabularFallbackPdf(prepared),
+    });
     return {
       filename: `freight-order-${booking.reference.replace(/[^a-zA-Z0-9_-]+/g, '-')}.pdf`,
       buffer,
@@ -262,21 +268,10 @@ export class BookingsService {
       containers: string | null;
     }>,
   ): string {
+    const esc = (v: unknown) => this.escapeHtml(String(v ?? '-'));
     const assignedAt = booking.customerTruckAssignedAt
       ? new Date(booking.customerTruckAssignedAt).toLocaleString('en-GB')
       : '-';
-    const bookingRows: Array<[string, string | null | undefined]> = [
-      ['Booking Reference', booking.reference],
-      ['Client Name', booking.company?.name],
-      ['Client ID', booking.companyId],
-      ['Trade Direction', booking.tradeDirection],
-      ['Freight Type', booking.freightType],
-      ['Assigned At', assignedAt],
-      ['Booking Status', booking.status],
-    ];
-    const bookingRowHtml = bookingRows
-      .map(([label, value]) => `<tr><th>${this.escapeHtml(label)}</th><td>${this.escapeHtml(value || '-')}</td></tr>`)
-      .join('');
 
     // Fall back to the legacy single-truck booking columns when there are no
     // multi-truck rows (bookings assigned before the multi-truck feature).
@@ -297,44 +292,63 @@ export class BookingsService {
             ]
           : [];
 
-    const truckBlocks = truckList
-      .map((t, i) => {
-        const rows: Array<[string, string | null | undefined]> = [
-          ['Truck Plate Number', t.plateNumber],
-          ['Driver Name', t.driverName],
-          ['Truck Type', t.truckType],
-          ['Containers Loaded', t.containers],
-          [
-            'Arrival',
-            t.arrivedAt ? new Date(t.arrivedAt).toLocaleString('en-GB') : 'Awaiting arrival',
-          ],
-        ];
-        const html = rows
-          .map(
-            ([label, value]) =>
-              `<tr><th>${this.escapeHtml(label)}</th><td>${this.escapeHtml(value || '-')}</td></tr>`,
-          )
-          .join('');
-        return `<div class="truck"><h2>Truck ${i + 1}</h2><table>${html}</table></div>`;
-      })
+    const truckRows = truckList
+      .map(
+        (t, i) => `<tr>
+          <td class="num">${i + 1}</td>
+          <td>${esc(t.plateNumber)}</td>
+          <td>${esc(t.driverName)}</td>
+          <td>${esc(t.truckType)}</td>
+          <td>${esc(t.containers)}</td>
+          <td>${t.arrivedAt ? esc(new Date(t.arrivedAt).toLocaleString('en-GB')) : 'Awaiting arrival'}</td>
+        </tr>`,
+      )
       .join('');
 
     const copy = (watermark: string) => `
       <section class="copy">
-        <div class="watermark">${this.escapeHtml(watermark)}</div>
-        <header>
+        <div class="watermark">${esc(watermark)}</div>
+        <div class="top">
           <div>
+            <div class="brand">Ethio-Djibouti Railway S.C.</div>
             <h1>Freight Order</h1>
-            <p>Customer external truck assignment — ${truckList.length} truck${truckList.length !== 1 ? 's' : ''}</p>
+            <div class="subtitle">Customer external truck assignment — ${truckList.length} truck${truckList.length !== 1 ? 's' : ''}</div>
           </div>
-          <strong>${this.escapeHtml(booking.reference)}</strong>
-        </header>
-        <table>${bookingRowHtml}</table>
-        ${truckBlocks}
+          <div class="meta">
+            Booking
+            <strong>${esc(booking.reference)}</strong>
+            Generated: ${esc(new Date().toLocaleString('en-GB'))}
+          </div>
+        </div>
+        <div class="summary">
+          <div class="tile"><span>Client</span><strong>${esc(booking.company?.name)}</strong></div>
+          <div class="tile"><span>Client ID</span><strong>${esc(booking.companyId)}</strong></div>
+          <div class="tile"><span>Trade direction</span><strong>${esc(booking.tradeDirection)}</strong></div>
+          <div class="tile"><span>Freight type</span><strong>${esc(booking.freightType)}</strong></div>
+          <div class="tile"><span>Assigned at</span><strong>${esc(assignedAt)}</strong></div>
+          <div class="tile"><span>Booking status</span><strong>${esc(booking.status)}</strong></div>
+        </div>
+        <table>
+          <thead>
+            <tr>
+              <th class="num">#</th>
+              <th>Truck plate</th>
+              <th>Driver</th>
+              <th>Truck type</th>
+              <th>Containers loaded</th>
+              <th>Arrival</th>
+            </tr>
+          </thead>
+          <tbody>${truckRows}</tbody>
+        </table>
+        <div class="notice">
+          Present this freight order at the warehouse gate. Each truck may only collect the
+          containers listed against it; the handover must be signed before any truck leaves.
+        </div>
         <div class="signatures">
-          <div>Customer / Carrier Signature</div>
-          <div>Port Operations Verification</div>
-          <div>Gate Security Verification</div>
+          <div class="line">Customer / Carrier signature — date</div>
+          <div class="line">Port operations verification — date</div>
+          <div class="line">Gate security verification — date</div>
         </div>
       </section>`;
 
@@ -342,21 +356,30 @@ export class BookingsService {
       <html>
         <head>
           <meta charset="utf-8" />
+          <title>Freight Order</title>
           <style>
-            body { font-family: Arial, sans-serif; color: #10202f; margin: 0; }
-            .copy { position: relative; min-height: 46vh; padding: 28px 32px; page-break-inside: avoid; border-bottom: 1px dashed #94a3b8; }
-            .watermark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 800; color: rgba(16, 32, 47, 0.08); transform: rotate(-18deg); pointer-events: none; }
-            header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 3px solid #0a9f6a; padding-bottom: 14px; margin-bottom: 18px; }
-            h1 { margin: 0; font-size: 28px; letter-spacing: 0; }
-            h2 { margin: 18px 0 8px; font-size: 14px; color: #0a6f4d; }
-            p { margin: 4px 0 0; color: #64748b; }
-            strong { font-size: 16px; color: #0a9f6a; }
-            table { width: 100%; border-collapse: collapse; position: relative; z-index: 1; margin-bottom: 6px; }
-            th, td { border: 1px solid #cbd5e1; padding: 9px 10px; text-align: left; font-size: 12px; }
-            th { width: 34%; background: #f1f5f9; }
-            .truck { page-break-inside: avoid; }
-            .signatures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; font-size: 11px; color: #475569; position: relative; z-index: 1; }
-            .signatures div { border-top: 1px solid #334155; padding-top: 8px; min-height: 28px; }
+            @page { size: A4 portrait; margin: 10mm; }
+            * { box-sizing: border-box; }
+            body { margin: 0; color: #0f172a; font-family: Arial, sans-serif; }
+            .copy { position: relative; padding: 24px 28px; page-break-inside: avoid; border-bottom: 1px dashed #94a3b8; }
+            .watermark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; color: rgba(15, 23, 42, 0.07); transform: rotate(-18deg); pointer-events: none; }
+            .top { display: flex; justify-content: space-between; border-bottom: 3px solid #0f766e; padding-bottom: 10px; gap: 24px; }
+            .brand { font-size: 11px; color: #475569; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
+            h1 { margin: 6px 0 0; font-size: 25px; line-height: 1.05; }
+            .subtitle { margin-top: 4px; color: #64748b; font-size: 12px; }
+            .meta { text-align: right; font-size: 11px; color: #475569; min-width: 210px; }
+            .meta strong { display: block; margin: 4px 0; color: #0f172a; font-size: 15px; }
+            .summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
+            .tile { border: 1px solid #cbd5e1; padding: 8px; min-height: 48px; }
+            .tile span { display: block; color: #64748b; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
+            .tile strong { font-size: 11px; }
+            table { width: 100%; border-collapse: collapse; position: relative; z-index: 1; }
+            th { background: #f8fafc; color: #475569; text-align: left; }
+            th, td { border: 1px solid #cbd5e1; padding: 6px 7px; font-size: 10.5px; vertical-align: top; }
+            .num { text-align: right; width: 26px; }
+            .notice { margin-top: 10px; border-left: 4px solid #0f766e; background: #f0fdfa; padding: 8px 10px; font-size: 10px; color: #134e4a; }
+            .signatures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; position: relative; z-index: 1; }
+            .line { border-top: 1px solid #334155; padding-top: 7px; font-size: 9px; color: #475569; min-height: 30px; }
           </style>
         </head>
         <body>
@@ -1125,6 +1148,30 @@ export class BookingsService {
     );
   }
 
+  /**
+   * Batched version of the findById flag: marks each page item whose booking
+   * has a generated-but-unsigned SELF_HAUL handover, so list rows (portal
+   * dashboard) can show "Approve delivery" for exactly the generated→signed
+   * window. One query for the whole page.
+   */
+  private async attachHandoverFlags(bookings: Booking[]): Promise<void> {
+    const ids = bookings.map((b) => b.id);
+    if (!ids.length) return;
+    const rows: Array<{ bookingId: string }> = await this.dataSource.query(
+      `SELECT DISTINCT booking_id AS "bookingId"
+         FROM freight.booking_handovers
+        WHERE booking_id = ANY($1::uuid[])
+          AND signed_at IS NULL AND deleted_at IS NULL
+          AND mile_type = 'SELF_HAUL'`,
+      [ids],
+    );
+    const pending = new Set(rows.map((r) => r.bookingId));
+    for (const b of bookings) {
+      (b as Booking & { handoverAwaitingSignature?: boolean }).handoverAwaitingSignature =
+        pending.has(b.id);
+    }
+  }
+
   async findAll(
     filter: FilterBookingDto,
     forceCompanyId?: string,
@@ -1135,7 +1182,7 @@ export class BookingsService {
     const statusFilter = this.parseStatusFilter(filter);
     const schedulingStatusFilter = this.parseSchedulingStatusFilter(filter);
 
-    return this.bookingsRepository.findAllPaginated({
+    const result = await this.bookingsRepository.findAllPaginated({
       page,
       pageSize,
       ...statusFilter,
@@ -1158,10 +1205,17 @@ export class BookingsService {
       paymentStatus: filter.paymentStatus,
       createdFrom: filter.createdFrom,
       createdTo: filter.createdTo,
+      scheduledFrom: filter.scheduledFrom,
+      scheduledTo: filter.scheduledTo,
+      originYardId: filter.originYardId,
+      destinationYardId: filter.destinationYardId,
+      isGovernment: filter.isGovernment,
       consolidationPaired: filter.consolidationPaired,
       sortBy: filter.sortBy,
       sortOrder: filter.sortOrder,
     });
+    await this.attachHandoverFlags(result.items ?? []);
+    return result;
   }
 
   /** Booking statuses at which a customer can pay (mirrors booking-payment.service). */
@@ -1371,11 +1425,17 @@ export class BookingsService {
       serviceTypeId: filter.serviceTypeId,
       cargoTypeId: filter.cargoTypeId,
       freightType: filter.freightType,
+      bookingType: filter.bookingType,
       tradeDirection: filter.tradeDirection,
       paymentCurrency: filter.paymentCurrency,
       paymentStatus: filter.paymentStatus,
       createdFrom: filter.createdFrom,
       createdTo: filter.createdTo,
+      scheduledFrom: filter.scheduledFrom,
+      scheduledTo: filter.scheduledTo,
+      originYardId: filter.originYardId,
+      destinationYardId: filter.destinationYardId,
+      isGovernment: filter.isGovernment,
       consolidationPaired: filter.consolidationPaired,
     };
 
diff --git a/apps/edr-freight-api/src/modules/bookings/clearance.util.spec.ts b/apps/edr-freight-api/src/modules/bookings/clearance.util.spec.ts
index ac21b2dce..969de5583 100644
--- a/apps/edr-freight-api/src/modules/bookings/clearance.util.spec.ts
+++ b/apps/edr-freight-api/src/modules/bookings/clearance.util.spec.ts
@@ -8,8 +8,10 @@ describe('clearance.util — clearanceSettingCode', () => {
     expect(clearanceSettingCode('IMPORT', 'CONTAINER', true)).toBe(
       'clearance_import_container_with_customs',
     );
+    // Non-customs bookings self-clear with the same document set a ONE_TIME
+    // self-clear contract uses.
     expect(clearanceSettingCode('IMPORT', 'CONTAINER', false)).toBe(
-      'clearance_import_container_without_customs',
+      'contract_clearance_selfclear_import_container',
     );
   });
 
@@ -18,7 +20,7 @@ describe('clearance.util — clearanceSettingCode', () => {
       'clearance_export_bulk_with_customs',
     );
     expect(clearanceSettingCode('EXPORT', 'BULK', false)).toBe(
-      'clearance_export_bulk_without_customs',
+      'contract_clearance_selfclear_export_bulk',
     );
   });
 
diff --git a/apps/edr-freight-api/src/modules/bookings/clearance.util.ts b/apps/edr-freight-api/src/modules/bookings/clearance.util.ts
index 6d7b86c8f..1cc6503df 100644
--- a/apps/edr-freight-api/src/modules/bookings/clearance.util.ts
+++ b/apps/edr-freight-api/src/modules/bookings/clearance.util.ts
@@ -29,8 +29,14 @@ export function clearanceSettingCode(
   const op = operationFor(tradeDirection);
   if (!op) return null;
   const freight = freightFor(freightType);
-  const customs = includesCustoms ? 'with_customs' : 'without_customs';
-  return `clearance_${op}_${freight}_${customs}`;
+  // Non-customs (Path A) bookings self-clear: the customer proves his own
+  // clearance with the SAME smaller document set a ONE_TIME self-clear
+  // contract uses (customs declaration, release permit, …) — not the
+  // GL-oriented booking sets.
+  if (!includesCustoms) {
+    return `contract_clearance_selfclear_${op}_${freight}`;
+  }
+  return `clearance_${op}_${freight}_with_customs`;
 }
 
 /** The GL-output (customs output) setting code, keyed on op + freight. */
diff --git a/apps/edr-freight-api/src/modules/bookings/dto/filter-booking.dto.ts b/apps/edr-freight-api/src/modules/bookings/dto/filter-booking.dto.ts
index d189f5448..ae973b97d 100644
--- a/apps/edr-freight-api/src/modules/bookings/dto/filter-booking.dto.ts
+++ b/apps/edr-freight-api/src/modules/bookings/dto/filter-booking.dto.ts
@@ -81,6 +81,31 @@ export class FilterBookingDto {
   @IsDateString()
   createdTo?: string;
 
+  @ApiPropertyOptional({ description: 'Filter bookings scheduled on/after this date (ISO)' })
+  @IsOptional()
+  @IsDateString()
+  scheduledFrom?: string;
+
+  @ApiPropertyOptional({ description: 'Filter bookings scheduled on/before this date (ISO)' })
+  @IsOptional()
+  @IsDateString()
+  scheduledTo?: string;
+
+  @ApiPropertyOptional({ format: 'uuid', description: 'Filter by origin yard' })
+  @IsOptional()
+  @IsUUID()
+  originYardId?: string;
+
+  @ApiPropertyOptional({ format: 'uuid', description: 'Filter by destination yard' })
+  @IsOptional()
+  @IsUUID()
+  destinationYardId?: string;
+
+  @ApiPropertyOptional({ enum: ['true', 'false'], description: 'Filter government vs private bookings' })
+  @IsOptional()
+  @IsIn(['true', 'false'])
+  isGovernment?: 'true' | 'false';
+
   @ApiPropertyOptional({ enum: TRADE_DIRECTIONS })
   @IsOptional()
   @IsIn([...TRADE_DIRECTIONS])
diff --git a/apps/edr-freight-api/src/modules/companies/companies.controller.ts b/apps/edr-freight-api/src/modules/companies/companies.controller.ts
index f8fbb26b0..8db9eba66 100644
--- a/apps/edr-freight-api/src/modules/companies/companies.controller.ts
+++ b/apps/edr-freight-api/src/modules/companies/companies.controller.ts
@@ -34,7 +34,10 @@ import {
   ResponseCompanyDto,
   ResponseCompanyProfileDto,
 } from "./dto/response-company.dto";
-import { ProfileLicenseFileView } from "./entities/company-profile.entity";
+import {
+  CompanyDocumentFileView,
+  ProfileLicenseFileView,
+} from "./entities/company-profile.entity";
 import { ResponseExternalProfileDto } from "./dto/response-external-profile.dto";
 import { CompanyInfoResponseDto } from "./dto/company-info-response.dto";
 import { UpdateProfileDto } from "./dto/update-profile.dto";
@@ -218,7 +221,7 @@ export class CompaniesController {
   @Post("company-profile")
   @ApiOperation({
     summary:
-      "Create a single operational profile for the current user's company and make it the active mode",
+      "Create a single operational profile for the current user's company. The role starts pending and does not become the active mode",
   })
   async createCompanyProfile(
     @CurrentUser() user: CurrentIamUser,
@@ -306,6 +309,49 @@ export class CompaniesController {
     return this.companiesService.listProfileLicenseFiles(user.id, profileId);
   }
 
+  @Get("poa-delegation")
+  @ApiOperation({
+    summary:
+      "List the Power of Attorney delegation letter (with review state) for the current user's company",
+  })
+  async listPoaDelegation(
+    @CurrentUser() user: CurrentIamUser,
+  ): Promise<CompanyDocumentFileView[]> {
+    return this.companiesService.listPoaDelegationFiles(user.id);
+  }
+
+  @Post("poa-delegation")
+  @UseInterceptors(AnyFilesInterceptor())
+  @ApiConsumes("multipart/form-data")
+  @ApiOperation({
+    summary:
+      "Upload the Power of Attorney delegation letter, replacing any existing one. " +
+      "For an approved company the upload is staged for backoffice review; during " +
+      "onboarding it goes live.",
+  })
+  async uploadPoaDelegation(
+    @CurrentUser() user: CurrentIamUser,
+    @UploadedFiles() files: Array<Express.Multer.File>,
+  ): Promise<CompanyDocumentFileView[]> {
+    const file = files?.[0];
+    if (!file) {
+      throw new BadRequestException("A delegation letter file is required");
+    }
+    return this.companiesService.uploadPoaDelegationLetter(user.id, file);
+  }
+
+  @Delete("poa-delegation/:fileId")
+  @ApiOperation({
+    summary:
+      "Remove the Power of Attorney delegation letter (staged for review on an approved company).",
+  })
+  async removePoaDelegation(
+    @CurrentUser() user: CurrentIamUser,
+    @Param("fileId", ParseUUIDPipe) fileId: string,
+  ): Promise<CompanyDocumentFileView[]> {
+    return this.companiesService.removePoaDelegationLetter(user.id, fileId);
+  }
+
   @Patch("active-mode")
   @ApiOperation({
     summary: "Switch the current user's active operational mode (importer/exporter)",
diff --git a/apps/edr-freight-api/src/modules/companies/companies.module.ts b/apps/edr-freight-api/src/modules/companies/companies.module.ts
index 646d01d47..73826689a 100644
--- a/apps/edr-freight-api/src/modules/companies/companies.module.ts
+++ b/apps/edr-freight-api/src/modules/companies/companies.module.ts
@@ -1,9 +1,11 @@
-import { Module } from "@nestjs/common";
+import { Module, forwardRef } from "@nestjs/common";
 import { TypeOrmModule } from "@nestjs/typeorm";
 import { HttpModule } from "@nestjs/axios";
 import { FilesModule } from "../files/files.module";
 import { FileUploadSettingsModule } from "../file-upload-settings/file-upload-settings.module";
 import { MinioModule } from "../minio/minio.module";
+import { NotificationsModule } from "../notifications/notifications.module";
+import { NotificationInboxModule } from "../notification-inbox/notification-inbox.module";
 import { CompaniesController } from "./companies.controller";
 import { CompaniesService } from "./companies.service";
 import { CompaniesRepository } from "./companies.repository";
@@ -17,6 +19,7 @@ import { Booking } from "../bookings/entities/booking.entity";
 import { CompanyProfileRepository } from "./company-profile.repository";
 import { CompanyChangeRequestRepository } from "./company-change-request.repository";
 import { ETradeService } from "./services/etrade.service";
+import { CompanyNotifierService } from "./company-notifier.service";
 
 @Module({
   imports: [
@@ -31,6 +34,10 @@ import { ETradeService } from "./services/etrade.service";
     FilesModule,
     FileUploadSettingsModule,
     MinioModule,
+    // Account-status notifications (CompanyNotifierService). The inbox module
+    // imports this module back for portal recipient targeting, hence forwardRef.
+    NotificationsModule,
+    forwardRef(() => NotificationInboxModule),
   ],
   controllers: [CompaniesController],
   providers: [
@@ -41,6 +48,7 @@ import { ETradeService } from "./services/etrade.service";
     CompanyChangeRequestRepository,
     CompanyDashboardRepository,
     ETradeService,
+    CompanyNotifierService,
   ],
   exports: [
     CompaniesService,
diff --git a/apps/edr-freight-api/src/modules/companies/companies.service.ts b/apps/edr-freight-api/src/modules/companies/companies.service.ts
index e31851aef..1027de955 100644
--- a/apps/edr-freight-api/src/modules/companies/companies.service.ts
+++ b/apps/edr-freight-api/src/modules/companies/companies.service.ts
@@ -17,6 +17,7 @@ import { FilesService } from "../files/files.service";
 import { FileRecord } from "../files/entities/file.entity";
 import { FileUploadSettingsService } from "../file-upload-settings/file-upload-settings.service";
 import { ETradeService } from "./services/etrade.service";
+import { CompanyNotifierService } from "./company-notifier.service";
 import { OnboardingRequirementsResponseDto } from "./dto/onboarding-requirements-response.dto";
 import { normalizeE164 } from "../../common/validators/is-phone-number.validator";
 import { CreateCompanyDto } from "./dto/create-company.dto";
@@ -37,6 +38,7 @@ import {
 import { ExternalProfile } from "./entities/external-profile.entity";
 import {
   BusinessLicenseFile,
+  CompanyDocumentFileView,
   CompanyProfile,
   ProfileLicenseFileView,
   ProfileType,
@@ -45,6 +47,7 @@ import {
 import {
   ChangeRequestStatus,
   CompanyChangeRequest,
+  DocumentChangeIntent,
   LicenseChangeIntent,
 } from "./entities/company-change-request.entity";
 
@@ -54,6 +57,27 @@ const LICENSE_CODE = "business_license";
 /** Code for a license file staged in an open change request (not yet live). */
 const LICENSE_PENDING_CODE = "business_license_pending";
 
+/** Mirrors the field seeded in seed/file-upload-settings.seeder.ts. */
+const POA_DELEGATION_FILE_KEY = "poa_delegation_letter";
+/** Code for a PoA letter staged in an open change request (not yet live). */
+const POA_DELEGATION_PENDING_CODE = "poa_delegation_letter_pending";
+/** FileRecord resource that company-level documents are stored under. */
+const COMPANY_RESOURCE = "companies";
+/** company.attributes keys that together mean "a PoA was entered". */
+const POA_ATTRIBUTES = [
+  "poaName",
+  "poaPhone",
+  "poaEmail",
+  "poaLocation",
+  "poaAddress",
+] as const;
+/** Mandatory once the company operates as a freight forwarder. */
+const REQUIRED_POA_FIELDS: { key: string; label: string }[] = [
+  { key: "poaName", label: "PoA name" },
+  { key: "poaEmail", label: "PoA email" },
+  { key: "poaPhone", label: "PoA phone" },
+];
+
 export interface UserIdentity {
   userId: string;
   firstName: string;
@@ -73,6 +97,7 @@ export class CompaniesService {
     private readonly filesService: FilesService,
     private readonly fileUploadSettingsService: FileUploadSettingsService,
     private readonly etradeService: ETradeService,
+    private readonly companyNotifier: CompanyNotifierService,
   ) { }
 
   /**
@@ -562,9 +587,13 @@ export class CompaniesService {
   }
 
   async updateCompany(id: string, dto: UpdateCompanyDto): Promise<Company> {
-    await this.findCompanyById(id);
+    const before = await this.findCompanyById(id);
     const updated = await this.companiesRepo.update(id, dto);
     if (!updated) throw new NotFoundException(`Company ${id} not found`);
+
+    // Suspending or blacklisting locks the customer out, so they must be told.
+    // This is the only path that writes those statuses.
+    this.companyNotifier.statusChanged(updated, before.status);
     return updated;
   }
 
@@ -765,6 +794,7 @@ export class CompaniesService {
     const companyUpdates = this.mapProfileDtoToCompanyUpdates(company, snapshot);
     await this.companiesRepo.update(company.id, companyUpdates);
     await this.applyLicenseChanges(request);
+    await this.applyDocumentChanges(request);
 
     return (
       (await this.changeRequestRepo.update(id, {
@@ -817,7 +847,12 @@ export class CompaniesService {
     if (existing) {
       const prev = existing.documents?.documentFileIds ?? [];
       await this.changeRequestRepo.update(existing.id, {
-        documents: { documentFileIds: [...prev, ...fileIds] },
+        // Spread the existing documents blob: a bare object would drop any
+        // licenseChanges/documentChanges already staged on this request.
+        documents: {
+          ...existing.documents,
+          documentFileIds: [...prev, ...fileIds],
+        },
         submittedBy: submittedBy ?? existing.submittedBy ?? null,
         submittedAt: now,
         note: null,
@@ -849,12 +884,17 @@ export class CompaniesService {
       );
     }
     await this.discardLicenseChanges(request);
+    await this.discardDocumentChanges(request);
     return (
       (await this.changeRequestRepo.update(id, {
         status: ChangeRequestStatus.Rejected,
-        // Staged license uploads were just discarded; drop their intents so an
-        // amended resubmit never re-references deleted files.
-        documents: { ...request.documents, licenseChanges: [] },
+        // Staged license/document uploads were just discarded; drop their intents
+        // so an amended resubmit never re-references deleted files.
+        documents: {
+          ...request.documents,
+          licenseChanges: [],
+          documentChanges: [],
+        },
         note,
         reviewedBy: reviewerId ?? null,
         reviewedAt: new Date(),
@@ -1017,13 +1057,12 @@ export class CompaniesService {
       );
     }
 
-    const reference = await this.companyProfilesRepo.generateReference(type);
-
+    // No reference is minted here: it is issued by setCompanyProfileStatus when
+    // a reviewer approves the role. Creating it Active would bypass that review.
     return this.companyProfilesRepo.create({
       companyId,
       type,
-      reference,
-      status: ProfileStatus.Active,
+      status: ProfileStatus.Pending,
     });
   }
 
@@ -1097,9 +1136,11 @@ export class CompaniesService {
   }
 
   /**
-   * Create a single operational profile for the current user's company and
-   * make it the active mode in the same call. Powers the header "Switch to
-   * Exporter/Importer" flow when the target profile doesn't exist yet.
+   * Create a single operational profile for the current user's company. The new
+   * role starts Pending, so it deliberately does NOT become the active mode:
+   * switching onto an unapproved profile would strip the user of `canBook` and
+   * block them from creating contracts under the role they already had approved.
+   * Callers switch explicitly via {@link setActiveMode} once the role is Active.
    */
   async createCompanyProfileForUser(
     userId: string,
@@ -1122,8 +1163,7 @@ export class CompaniesService {
     let created = await this.companyProfilesRepo.findByType(companyId, type);
     if (!created) {
       // New self-service roles start Pending (awaiting backoffice approval) and
-      // carry no reference until approved. The customer can select this mode but
-      // can't book under it until it's cleared.
+      // carry no reference until approved.
       created = await this.companyProfilesRepo.create({
         companyId,
         type,
@@ -1132,8 +1172,6 @@ export class CompaniesService {
       });
     }
 
-    await this.profilesRepo.update(profile.id, { activeProfileType: type });
-
     return created;
   }
 
@@ -1240,6 +1278,29 @@ export class CompaniesService {
     );
     const missingLicenses = licenseProfiles.filter((p) => !p.uploaded);
 
+    // 4. Power of Attorney. Optional in general, but a freight forwarder acts on
+    // other companies' behalf so its PoA is mandatory. Either way, a PoA that
+    // has been entered must be evidenced by the delegation letter.
+    const poaRequired = (company.companyProfiles ?? []).some(
+      (p) => p.type === ProfileType.freightForwarder,
+    );
+    const poaProvided = POA_ATTRIBUTES.some((k) =>
+      (company.attributes?.[k] as string | undefined)?.trim(),
+    );
+    const missingPoaFields = poaRequired
+      ? REQUIRED_POA_FIELDS.filter(
+          (f) => !(company.attributes?.[f.key] as string | undefined)?.trim(),
+        )
+      : [];
+    // Only gate on the letter once the document set actually carries the field.
+    const delegationField = (setting?.fields ?? []).find(
+      (f) => f.fileKey === POA_DELEGATION_FILE_KEY,
+    );
+    const missingDelegation =
+      Boolean(delegationField) &&
+      (poaRequired || poaProvided) &&
+      !uploadedCodes.has(POA_DELEGATION_FILE_KEY);
+
     const outstanding = [
       ...missingInfo.map((f) => `Add your ${f.label.toLowerCase()}`),
       ...missingDocs.map((d) => `Upload your ${d.fileLabel}`),
@@ -1247,18 +1308,31 @@ export class CompaniesService {
         (p) =>
           `Upload a business license for your ${p.type.replace(/_/g, " ")} profile`,
       ),
+      ...missingPoaFields.map((f) => `Add your ${f.label.toLowerCase()}`),
+      ...(missingDelegation
+        ? ["Upload the delegation letter for your Power of Attorney"]
+        : []),
     ];
 
     // Progress spans every required item the user has to satisfy: company-info
-    // fields, required documents and one license per operational profile.
+    // fields, required documents, one license per operational profile, and the
+    // PoA details/letter whenever those are mandatory.
     const requiredDocCount = documents.filter((d) => d.isRequired).length;
+    const poaItemCount =
+      (poaRequired ? REQUIRED_POA_FIELDS.length : 0) +
+      (delegationField && (poaRequired || poaProvided) ? 1 : 0);
     const total =
       this.REQUIRED_COMPANY_INFO.length +
       requiredDocCount +
-      licenseProfiles.length;
+      licenseProfiles.length +
+      poaItemCount;
     const completed =
       total -
-      (missingInfo.length + missingDocs.length + missingLicenses.length);
+      (missingInfo.length +
+        missingDocs.length +
+        missingLicenses.length +
+        missingPoaFields.length +
+        (missingDelegation ? 1 : 0));
 
     return new OnboardingRequirementsResponseDto({
       documentSettingCode,
@@ -1266,6 +1340,13 @@ export class CompaniesService {
       companyInfo: { complete: missingInfo.length === 0, missingFields: missingInfo },
       documents,
       licenseProfiles,
+      poa: {
+        required: poaRequired,
+        provided: poaProvided,
+        delegationLetterUploaded: uploadedCodes.has(POA_DELEGATION_FILE_KEY),
+        missingFields: missingPoaFields,
+        complete: missingPoaFields.length === 0 && !missingDelegation,
+      },
       progress: { completed, total },
       isComplete: outstanding.length === 0,
       onboardingCompleted: profile.onboardingCompleted,
@@ -1365,10 +1446,12 @@ export class CompaniesService {
   // browser (which fails on the internal bucket endpoint).
 
   /**
-   * Upload business-license file(s) for one of the user's profiles. During
-   * onboarding (company not yet Active) they go live immediately; for an Active
-   * company they're staged under the pending code and recorded as `add` intents
-   * on a pending change request for backoffice review. Returns the updated view.
+   * Upload business-license file(s) for one of the user's profiles. For a role
+   * not yet approved (a fresh onboarding profile, or a newly added service on an
+   * already-active company) they go live immediately and are reviewed together
+   * with the role itself. Only for an already-approved role are they staged under
+   * the pending code and recorded as `add` intents on a pending change request —
+   * a licence swap on a live role is a change; a licence on a new role is not.
    */
   async addProfileLicenseFiles(
     userId: string,
@@ -1377,7 +1460,7 @@ export class CompaniesService {
   ): Promise<ProfileLicenseFileView[]> {
     const profile = await this.resolveOwnedProfile(userId, profileId);
     const company = await this.findCompanyById(profile.companyId);
-    const gated = company.status === CompanyStatus.Active;
+    const gated = profile.status === ProfileStatus.Active;
     const code = gated ? LICENSE_PENDING_CODE : LICENSE_CODE;
 
     const uploaded = await Promise.all(
@@ -1409,9 +1492,9 @@ export class CompaniesService {
 
   /**
    * Remove a license file. A staged (pending) file is withdrawn outright
-   * (soft-deleted, its `add` intent dropped). A live file on an Active company
-   * is kept and recorded as a `remove` intent for review; during onboarding it
-   * is deleted immediately.
+   * (soft-deleted, its `add` intent dropped). A live file on an already-approved
+   * role is kept and recorded as a `remove` intent for review; on a role still
+   * awaiting approval it is deleted immediately.
    */
   async removeProfileLicenseFile(
     userId: string,
@@ -1427,7 +1510,7 @@ export class CompaniesService {
       throw new NotFoundException(`License file ${fileId} not found`);
     }
     const company = await this.findCompanyById(profile.companyId);
-    const gated = company.status === CompanyStatus.Active;
+    const gated = profile.status === ProfileStatus.Active;
 
     if (record.code === LICENSE_PENDING_CODE) {
       // Withdraw a not-yet-approved upload: delete it and drop its add intent.
@@ -1449,7 +1532,7 @@ export class CompaniesService {
   /**
    * Replace a live license file with a freshly uploaded one — recorded as a
    * `remove` of the old file plus an `add` of the new, so approval swaps them
-   * atomically. During onboarding the swap is applied immediately.
+   * atomically. On a role still awaiting approval the swap is applied immediately.
    */
   async replaceProfileLicenseFile(
     userId: string,
@@ -1463,7 +1546,7 @@ export class CompaniesService {
       throw new NotFoundException(`License file ${fileId} not found`);
     }
     const company = await this.findCompanyById(profile.companyId);
-    const gated = company.status === CompanyStatus.Active;
+    const gated = profile.status === ProfileStatus.Active;
 
     const created = await this.filesService.upload({
       resourceId: profileId,
@@ -1671,6 +1754,254 @@ export class CompaniesService {
     }
   }
 
+  // ---------------------------------------------------------------------------
+  // Power of Attorney delegation letter
+  //
+  // A company-level document that follows the same staged-review model as the
+  // business license: on an approved (Active) company an upload lands under the
+  // pending code and the live letter is flagged for removal, so the reviewer
+  // sees both and approval swaps them atomically. During onboarding it goes live.
+  // ---------------------------------------------------------------------------
+
+  /** The company's PoA letter(s), with each file's review status resolved. */
+  async listPoaDelegationFiles(
+    userId: string,
+  ): Promise<CompanyDocumentFileView[]> {
+    const { company } = await this.getCompanyInfoByUserId(userId);
+    return this.getPoaDelegationView(company.id);
+  }
+
+  /**
+   * Upload the PoA delegation letter, replacing whatever is already on file.
+   * On an Active company this stages an `add` for the new file plus a `remove`
+   * for each live one; a letter still awaiting approval is withdrawn outright
+   * rather than stacking a second pending upload.
+   */
+  async uploadPoaDelegationLetter(
+    userId: string,
+    file: Express.Multer.File,
+  ): Promise<CompanyDocumentFileView[]> {
+    const { company } = await this.getCompanyInfoByUserId(userId);
+    const gated = company.status === CompanyStatus.Active;
+
+    const records = await this.filesService.findByResource(
+      company.id,
+      COMPANY_RESOURCE,
+    );
+    const live = records.filter((r) => r.code === POA_DELEGATION_FILE_KEY);
+    const staged = records.filter(
+      (r) => r.code === POA_DELEGATION_PENDING_CODE,
+    );
+
+    // Supersede an unreviewed upload instead of queueing another one.
+    for (const r of staged) {
+      await this.filesService.remove(r.id);
+      await this.withdrawDocumentIntent(company.id, r.id);
+    }
+
+    const created = await this.filesService.upload({
+      resourceId: company.id,
+      resource: COMPANY_RESOURCE,
+      code: gated ? POA_DELEGATION_PENDING_CODE : POA_DELEGATION_FILE_KEY,
+      file,
+    });
+
+    if (gated) {
+      await this.stageDocumentIntent(
+        company.id,
+        [
+          ...live.map((r) => ({
+            op: "remove" as const,
+            fileId: r.id,
+            code: POA_DELEGATION_FILE_KEY,
+            fileName: r.name,
+          })),
+          {
+            op: "add" as const,
+            fileId: created.id,
+            code: POA_DELEGATION_FILE_KEY,
+            fileName: created.name,
+          },
+        ],
+        userId,
+      );
+    } else {
+      // Onboarding: no review, so the old letter is simply replaced.
+      for (const r of live) await this.filesService.remove(r.id);
+    }
+
+    return this.getPoaDelegationView(company.id);
+  }
+
+  /**
+   * Remove the PoA letter. A staged upload is withdrawn outright; a live file on
+   * an Active company is kept and flagged for deletion on approval; during
+   * onboarding it is deleted immediately.
+   */
+  async removePoaDelegationLetter(
+    userId: string,
+    fileId: string,
+  ): Promise<CompanyDocumentFileView[]> {
+    const { company } = await this.getCompanyInfoByUserId(userId);
+    const record = await this.filesService.findById(fileId);
+    if (
+      record.resource !== COMPANY_RESOURCE ||
+      record.resourceId !== company.id ||
+      (record.code !== POA_DELEGATION_FILE_KEY &&
+        record.code !== POA_DELEGATION_PENDING_CODE)
+    ) {
+      throw new NotFoundException(`Delegation letter ${fileId} not found`);
+    }
+
+    if (record.code === POA_DELEGATION_PENDING_CODE) {
+      await this.filesService.remove(fileId);
+      await this.withdrawDocumentIntent(company.id, fileId);
+    } else if (company.status === CompanyStatus.Active) {
+      await this.stageDocumentIntent(
+        company.id,
+        [
+          {
+            op: "remove",
+            fileId,
+            code: POA_DELEGATION_FILE_KEY,
+            fileName: record.name,
+          },
+        ],
+        userId,
+      );
+    } else {
+      await this.filesService.remove(fileId);
+    }
+
+    return this.getPoaDelegationView(company.id);
+  }
+
+  private async getPoaDelegationView(
+    companyId: string,
+  ): Promise<CompanyDocumentFileView[]> {
+    const pending =
+      await this.changeRequestRepo.findPendingByCompanyId(companyId);
+    const removeIds = new Set(
+      (pending?.documents?.documentChanges ?? [])
+        .filter((c) => c.op === "remove")
+        .map((c) => c.fileId),
+    );
+    const records = await this.filesService.findByResource(
+      companyId,
+      COMPANY_RESOURCE,
+    );
+    return records
+      .filter(
+        (r) =>
+          r.code === POA_DELEGATION_FILE_KEY ||
+          r.code === POA_DELEGATION_PENDING_CODE,
+      )
+      .map((r) => ({
+        id: r.id,
+        name: r.name,
+        size: r.size,
+        mimeType: r.mimeType,
+        status:
+          r.code === POA_DELEGATION_PENDING_CODE
+            ? ("pending_add" as const)
+            : removeIds.has(r.id)
+              ? ("pending_remove" as const)
+              : ("live" as const),
+      }));
+  }
+
+  /** Open or append a pending change request recording document add/remove intents. */
+  private async stageDocumentIntent(
+    companyId: string,
+    changes: DocumentChangeIntent[],
+    submittedBy?: string,
+  ): Promise<void> {
+    if (changes.length === 0) return;
+    const now = new Date();
+    const existing =
+      await this.changeRequestRepo.findPendingByCompanyId(companyId);
+    if (existing) {
+      const prev = existing.documents?.documentChanges ?? [];
+      // Re-uploading twice before review would otherwise stage a second `remove`
+      // for the same live file, and the duplicate would fail on approval.
+      const seen = new Set(prev.map((c) => `${c.op}:${c.fileId}`));
+      const fresh = changes.filter((c) => !seen.has(`${c.op}:${c.fileId}`));
+      if (fresh.length === 0) return;
+      await this.changeRequestRepo.update(existing.id, {
+        documents: {
+          ...existing.documents,
+          documentChanges: [...prev, ...fresh],
+        },
+        submittedBy: submittedBy ?? existing.submittedBy ?? null,
+        submittedAt: now,
+        note: null,
+      });
+    } else {
+      await this.changeRequestRepo.create({
+        companyId,
+        snapshot: {},
+        documents: { documentChanges: changes },
+        status: ChangeRequestStatus.Pending,
+        submittedBy: submittedBy ?? null,
+        submittedAt: now,
+      });
+    }
+  }
+
+  /**
+   * Drop a staged document intent referencing `fileId`. If that empties the
+   * request entirely, delete it so the customer's settings page unlocks.
+   */
+  private async withdrawDocumentIntent(
+    companyId: string,
+    fileId: string,
+  ): Promise<void> {
+    const existing =
+      await this.changeRequestRepo.findPendingByCompanyId(companyId);
+    if (!existing) return;
+    const remaining = (existing.documents?.documentChanges ?? []).filter(
+      (c) => c.fileId !== fileId,
+    );
+    const docs = existing.documents ?? {};
+    const stillHasWork =
+      remaining.length > 0 ||
+      (docs.licenseChanges?.length ?? 0) > 0 ||
+      (docs.documentFileIds?.length ?? 0) > 0 ||
+      Object.keys(existing.snapshot ?? {}).length > 0;
+
+    if (stillHasWork) {
+      await this.changeRequestRepo.update(existing.id, {
+        documents: { ...docs, documentChanges: remaining },
+      });
+    } else {
+      await this.changeRequestRepo.softDelete(existing.id);
+    }
+  }
+
+  /** Apply a request's staged document changes: promote adds, delete removes. */
+  private async applyDocumentChanges(
+    request: CompanyChangeRequest,
+  ): Promise<void> {
+    for (const change of request.documents?.documentChanges ?? []) {
+      if (change.op === "add") {
+        await this.filesService.setCode(change.fileId, change.code);
+      } else {
+        await this.filesService.remove(change.fileId);
+      }
+    }
+  }
+
+  /** Discard a rejected request's staged document uploads (adds only). */
+  private async discardDocumentChanges(
+    request: CompanyChangeRequest,
+  ): Promise<void> {
+    for (const change of request.documents?.documentChanges ?? []) {
+      if (change.op === "add") {
+        await this.filesService.remove(change.fileId);
+      }
+    }
+  }
+
   /**
    * Resolve which company_profile a new booking belongs to, from the company
    * and the booking's trade direction. IMPORT → importer profile, EXPORT →
@@ -1719,13 +2050,17 @@ export class CompaniesService {
   }
 
   async fetchETradeData(tin: string) {
-    const { businessInfo } = await this.etradeService.resolveCompanyData(tin);
+    const { businessInfo, companyInfo } =
+      await this.etradeService.resolveCompanyData(tin);
     if (!businessInfo) {
       throw new BadRequestException(
         "We couldn't find a business license for this TIN with eTrade. Please double-check the number and try again.",
       );
     }
-    const registrationData = this.etradeService.extractRegistrationData(businessInfo);
+    const registrationData = this.etradeService.extractRegistrationData(
+      businessInfo,
+      companyInfo,
+    );
     const tinTaken = await this.companiesRepo.existsByTin(tin);
     return { ...registrationData, tinTaken };
   }
diff --git a/apps/edr-freight-api/src/modules/companies/company-notifier.service.ts b/apps/edr-freight-api/src/modules/companies/company-notifier.service.ts
new file mode 100644
index 000000000..167526988
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/companies/company-notifier.service.ts
@@ -0,0 +1,86 @@
+import { Injectable, Logger } from "@nestjs/common";
+import {
+  NotificationAudience,
+  NotificationPriority,
+  NotificationType,
+} from "@edr/types";
+
+import { Company, CompanyStatus } from "./entities/company.entity";
+import { NotificationsService } from "../notifications/notifications.service";
+import { NotificationInboxService } from "../notification-inbox/notification-inbox.service";
+
+/** Account statuses that lock the customer out and therefore must be told to them. */
+const PUNITIVE_STATUSES: readonly CompanyStatus[] = [
+  CompanyStatus.Suspended,
+  CompanyStatus.Blacklisted,
+];
+
+/**
+ * Customer notifications for company account-status changes. Mirrors
+ * {@link ContractNotifierService}: SMS + email direct to the company contact,
+ * plus a persisted in-app item. Every send is fire-and-forget and never throws —
+ * a notification failure must not roll back the status change itself.
+ */
+@Injectable()
+export class CompanyNotifierService {
+  private readonly logger = new Logger(CompanyNotifierService.name);
+
+  constructor(
+    private readonly notifications: NotificationsService,
+    private readonly inbox: NotificationInboxService,
+  ) {}
+
+  /** Send SMS + email to the company contact; log-only on failure. */
+  private async notifyContact(company: Company, message: string): Promise<void> {
+    const phone = company.contactPersonPhone ?? company.phone ?? null;
+    const email = company.email ?? company.generalManagerEmail ?? null;
+
+    if (phone) {
+      try {
+        await this.notifications.directSend("sms", phone, message);
+      } catch (err) {
+        this.logger.warn(`SMS failed for ${company.id}: ${(err as Error).message}`);
+      }
+    }
+    if (email) {
+      try {
+        await this.notifications.directSend("email", email, message);
+      } catch (err) {
+        this.logger.warn(`Email failed for ${company.id}: ${(err as Error).message}`);
+      }
+    }
+    if (!phone && !email) {
+      this.logger.warn(`No contact on file for ${company.id} — not notified`);
+    }
+  }
+
+  /**
+   * Tell the customer their account was suspended or blacklisted. Called only on
+   * a real transition into one of those statuses; other status writes are silent.
+   */
+  statusChanged(company: Company, previous: CompanyStatus): void {
+    const status = company.status;
+    if (status === previous) return;
+    if (!PUNITIVE_STATUSES.includes(status)) return;
+
+    const label = status === CompanyStatus.Suspended ? "suspended" : "blacklisted";
+    const title = `Account ${label}`;
+    const body =
+      `Your company account has been ${label}. ` +
+      `You will not be able to submit new contracts or bookings. ` +
+      `Please contact EDR support for assistance.`;
+
+    this.logger.log(`ACCOUNT_${label.toUpperCase()} — ${company.id}`);
+    void this.notifyContact(company, `${title}. ${body}`);
+    void this.inbox.notify({
+      recipients: { companyId: company.id },
+      audience: NotificationAudience.PORTAL,
+      type: NotificationType.ACCOUNT_STATUS,
+      title,
+      body,
+      link: "/settings",
+      data: { companyId: company.id, status },
+      priority: NotificationPriority.HIGH,
+    });
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/companies/dto/change-request-response.dto.ts b/apps/edr-freight-api/src/modules/companies/dto/change-request-response.dto.ts
index 579ac6ddd..4a931dae3 100644
--- a/apps/edr-freight-api/src/modules/companies/dto/change-request-response.dto.ts
+++ b/apps/edr-freight-api/src/modules/companies/dto/change-request-response.dto.ts
@@ -1,6 +1,7 @@
 import {
   ChangeRequestStatus,
   CompanyChangeRequest,
+  DocumentChangeIntent,
   LicenseChangeIntent,
 } from "../entities/company-change-request.entity";
 
@@ -18,6 +19,8 @@ export class ChangeRequestResponseDto {
   documentFileIds: string[];
   /** Staged business-license add/remove intents attached to this request. */
   licenseChanges: LicenseChangeIntent[];
+  /** Staged company-document add/remove intents (e.g. the PoA letter). */
+  documentChanges: DocumentChangeIntent[];
   note: string | null;
   submittedBy: string | null;
   submittedAt: Date | null;
@@ -33,6 +36,7 @@ export class ChangeRequestResponseDto {
     this.snapshot = req.snapshot ?? {};
     this.documentFileIds = req.documents?.documentFileIds ?? [];
     this.licenseChanges = req.documents?.licenseChanges ?? [];
+    this.documentChanges = req.documents?.documentChanges ?? [];
     this.note = req.note ?? null;
     this.submittedBy = req.submittedBy ?? null;
     this.submittedAt = req.submittedAt ?? null;
diff --git a/apps/edr-freight-api/src/modules/companies/dto/etrade-response.dto.ts b/apps/edr-freight-api/src/modules/companies/dto/etrade-response.dto.ts
index ef7eb2a21..bfe1f9b72 100644
--- a/apps/edr-freight-api/src/modules/companies/dto/etrade-response.dto.ts
+++ b/apps/edr-freight-api/src/modules/companies/dto/etrade-response.dto.ts
@@ -1,6 +1,7 @@
 import { CompanyRegistrationData } from "@edr/types";
 
 export class ETradeResponseDto implements CompanyRegistrationData {
+  companyName!: string;
   licenceNumber!: string;
   statusDescription!: string;
   dateRegistered!: string;
@@ -20,6 +21,7 @@ export class ETradeResponseDto implements CompanyRegistrationData {
   tinTaken?: boolean;
 
   constructor(data: CompanyRegistrationData) {
+    this.companyName = data.companyName;
     this.licenceNumber = data.licenceNumber;
     this.statusDescription = data.statusDescription;
     this.dateRegistered = data.dateRegistered;
diff --git a/apps/edr-freight-api/src/modules/companies/dto/onboarding-requirements-response.dto.ts b/apps/edr-freight-api/src/modules/companies/dto/onboarding-requirements-response.dto.ts
index 92f9fa513..da908a177 100644
--- a/apps/edr-freight-api/src/modules/companies/dto/onboarding-requirements-response.dto.ts
+++ b/apps/edr-freight-api/src/modules/companies/dto/onboarding-requirements-response.dto.ts
@@ -35,6 +35,19 @@ export interface OnboardingLicenseProfile {
   uploaded: boolean;
 }
 
+export interface OnboardingPoaState {
+  /** True when the company operates as a freight forwarder — PoA is mandatory. */
+  required: boolean;
+  /** True once any PoA detail has been entered. */
+  provided: boolean;
+  /** True when the delegation letter is stored for the company. */
+  delegationLetterUploaded: boolean;
+  /** PoA details still missing (only populated when `required`). */
+  missingFields: OnboardingInfoField[];
+  /** False while the PoA step still owes details or a delegation letter. */
+  complete: boolean;
+}
+
 export class OnboardingRequirementsResponseDto {
   /** Resolved document setting code (by nationality) the docs were drawn from. */
   documentSettingCode: string;
@@ -52,6 +65,9 @@ export class OnboardingRequirementsResponseDto {
   /** Per-operational-profile business-license requirements. */
   licenseProfiles: OnboardingLicenseProfile[];
 
+  /** Power of Attorney state, so the wizard needn't re-derive the rule. */
+  poa: OnboardingPoaState;
+
   /** Overall setup progress across fields + documents + licenses. */
   progress: { completed: number; total: number };
 
@@ -70,6 +86,7 @@ export class OnboardingRequirementsResponseDto {
     this.companyInfo = init.companyInfo;
     this.documents = init.documents;
     this.licenseProfiles = init.licenseProfiles;
+    this.poa = init.poa;
     this.progress = init.progress;
     this.isComplete = init.isComplete;
     this.onboardingCompleted = init.onboardingCompleted;
diff --git a/apps/edr-freight-api/src/modules/companies/entities/company-change-request.entity.ts b/apps/edr-freight-api/src/modules/companies/entities/company-change-request.entity.ts
index cec670787..5ee6739de 100644
--- a/apps/edr-freight-api/src/modules/companies/entities/company-change-request.entity.ts
+++ b/apps/edr-freight-api/src/modules/companies/entities/company-change-request.entity.ts
@@ -30,12 +30,34 @@ export interface LicenseChangeIntent {
   fileName?: string;
 }
 
+/**
+ * A staged change to a company-level document, awaiting review. Same semantics
+ * as {@link LicenseChangeIntent} but keyed by the document's FileRecord `code`
+ * (e.g. `poa_delegation_letter`) rather than a profile: `add` → uploaded under
+ * the pending code, promoted to `code` on approval; `remove` → a live file that
+ * is deleted on approval. A replace is a `remove` plus an `add`.
+ */
+export interface DocumentChangeIntent {
+  op: "add" | "remove";
+  fileId: string;
+  /** The live FileRecord code this op targets (the upload setting's fileKey). */
+  code: string;
+  /** File name, snapshotted for the backoffice review screen. */
+  fileName?: string;
+}
+
 /** File references staged alongside a change request (documents/licenses). */
 export interface ChangeRequestDocuments {
-  /** FileRecord ids uploaded against the company while this request was open. */
+  /**
+   * FileRecord ids uploaded against the company while this request was open.
+   * These go live immediately — only their ids are recorded, for the reviewer.
+   * Contrast `documentChanges`, which stages the file behind the pending code.
+   */
   documentFileIds?: string[];
   /** Staged per-profile business-license add/remove intents. */
   licenseChanges?: LicenseChangeIntent[];
+  /** Staged company-level document add/remove intents (e.g. the PoA letter). */
+  documentChanges?: DocumentChangeIntent[];
 }
 
 @Entity({ schema: "freight", name: "company_change_request" })
diff --git a/apps/edr-freight-api/src/modules/companies/entities/company-profile.entity.ts b/apps/edr-freight-api/src/modules/companies/entities/company-profile.entity.ts
index 2266b0c65..ebda7a0b9 100644
--- a/apps/edr-freight-api/src/modules/companies/entities/company-profile.entity.ts
+++ b/apps/edr-freight-api/src/modules/companies/entities/company-profile.entity.ts
@@ -31,17 +31,28 @@ export interface BusinessLicenseFile {
   mimeType?: string;
 }
 
+/**
+ * `live` — approved & in effect; `pending_add` — uploaded, awaiting approval;
+ * `pending_remove` — live but flagged for deletion on approval.
+ */
+export type StagedFileStatus = "live" | "pending_add" | "pending_remove";
+
 /** A business-license file plus its change-review state, surfaced to clients. */
 export interface ProfileLicenseFileView {
   id: string;
   name: string;
   size: number;
   mimeType: string;
-  /**
-   * `live` — approved & in effect; `pending_add` — uploaded, awaiting approval;
-   * `pending_remove` — live but flagged for deletion on approval.
-   */
-  status: "live" | "pending_add" | "pending_remove";
+  status: StagedFileStatus;
+}
+
+/** A company-level document (e.g. the PoA letter) with its change-review state. */
+export interface CompanyDocumentFileView {
+  id: string;
+  name: string;
+  size: number;
+  mimeType: string;
+  status: StagedFileStatus;
 }
 
 @Entity({ schema: "freight", name: "company_profiles" })
@@ -73,11 +84,17 @@ export class CompanyProfile extends BaseEntity {
   })
   reference!: string | null;
 
+  /**
+   * A newly requested operational role is unreviewed, so it defaults to Pending.
+   * Only {@link CompaniesService.setCompanyProfileStatus} may promote it to
+   * Active — an approved-by-default role would let a customer self-grant a
+   * service (e.g. importer) without any documentation review.
+   */
   @Column({
     name: "status",
     type: "varchar",
     length: 32,
-    default: ProfileStatus.Active,
+    default: ProfileStatus.Pending,
   })
   status!: ProfileStatus;
 
diff --git a/apps/edr-freight-api/src/modules/companies/services/etrade.service.ts b/apps/edr-freight-api/src/modules/companies/services/etrade.service.ts
index 15054c701..b588c241f 100644
--- a/apps/edr-freight-api/src/modules/companies/services/etrade.service.ts
+++ b/apps/edr-freight-api/src/modules/companies/services/etrade.service.ts
@@ -87,12 +87,21 @@ export class ETradeService {
     }
   }
 
+  /**
+   * `companyInfo` carries the registered organization name (`BusinessName`);
+   * `businessInfo` only carries the licence's `TradeName`. Pass both so the
+   * company name resolves to the legal entity rather than the trade name — and
+   * never to `ManagerNameEng`, which is the manager's personal name.
+   */
   extractRegistrationData(
     businessInfo: ETradeBusinessInfo,
+    companyInfo?: ETradeCompanyInfo,
   ): CompanyRegistrationData {
     const primaryManager = businessInfo.AssociateShortInfos?.[0];
 
     return {
+      companyName:
+        companyInfo?.BusinessName?.trim() || businessInfo.TradeName?.trim() || "",
       licenceNumber: businessInfo.LicenceNumber,
       statusDescription: businessInfo.StatusDescription,
       dateRegistered: businessInfo.DateRegistered,
diff --git a/apps/edr-freight-api/src/modules/contract-templates/contract-templates.controller.ts b/apps/edr-freight-api/src/modules/contract-templates/contract-templates.controller.ts
new file mode 100644
index 000000000..8cf1c5671
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/contract-templates/contract-templates.controller.ts
@@ -0,0 +1,97 @@
+import {
+  Body,
+  Controller,
+  Delete,
+  Get,
+  Param,
+  Patch,
+  Post,
+  Put,
+} from "@nestjs/common";
+import { ApiOperation, ApiTags } from "@nestjs/swagger";
+
+import { FreightAdmin } from "../../common/booking-guards";
+import { ContractTemplatesService } from "./contract-templates.service";
+import {
+  CreateArticleDto,
+  PreviewContractTemplateDto,
+  ReplaceArticlesDto,
+  UpdateArticleDto,
+  UpdateContractTemplateDto,
+} from "./dto/contract-template.dto";
+
+@ApiTags("contract-templates")
+@Controller("contract-templates")
+export class ContractTemplatesController {
+  constructor(private readonly service: ContractTemplatesService) {}
+
+  // Reads stay open to authenticated staff (the backoffice Templates tab);
+  // writes are admin-guarded like other freight configuration resources.
+
+  @Get()
+  @ApiOperation({ summary: "List the six contract document templates" })
+  list() {
+    return this.service.list();
+  }
+
+  @Get(":code")
+  @ApiOperation({ summary: "Get one contract template by code" })
+  getByCode(@Param("code") code: string) {
+    return this.service.getByCode(code);
+  }
+
+  @Patch(":code")
+  @FreightAdmin()
+  @ApiOperation({ summary: "Update template metadata (name, title, recitals, active flag)" })
+  update(@Param("code") code: string, @Body() dto: UpdateContractTemplateDto) {
+    return this.service.update(code, dto);
+  }
+
+  @Post(":code/preview")
+  @ApiOperation({
+    summary: "Render an HTML preview of the template against mock contract data",
+  })
+  preview(
+    @Param("code") code: string,
+    @Body() dto: PreviewContractTemplateDto,
+  ) {
+    return this.service.preview(code, dto);
+  }
+
+  /* ------------------------- article routes ------------------------- */
+
+  @Put(":code/articles")
+  @FreightAdmin()
+  @ApiOperation({ summary: "Replace the full ordered article list (used for reorder)" })
+  replaceArticles(@Param("code") code: string, @Body() dto: ReplaceArticlesDto) {
+    return this.service.replaceArticles(code, dto.articles);
+  }
+
+  @Post(":code/articles")
+  @FreightAdmin()
+  @ApiOperation({ summary: "Add an article to the template" })
+  addArticle(@Param("code") code: string, @Body() dto: CreateArticleDto) {
+    return this.service.addArticle(code, dto);
+  }
+
+  @Patch(":code/articles/:articleId")
+  @FreightAdmin()
+  @ApiOperation({ summary: "Update an article's title or body" })
+  updateArticle(
+    @Param("code") code: string,
+    @Param("articleId") articleId: string,
+    @Body() dto: UpdateArticleDto,
+  ) {
+    return this.service.updateArticle(code, articleId, dto);
+  }
+
+  @Delete(":code/articles/:articleId")
+  @FreightAdmin()
+  @ApiOperation({ summary: "Remove an article from the template" })
+  removeArticle(
+    @Param("code") code: string,
+    @Param("articleId") articleId: string,
+  ) {
+    return this.service.removeArticle(code, articleId);
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/contract-templates/contract-templates.module.ts b/apps/edr-freight-api/src/modules/contract-templates/contract-templates.module.ts
new file mode 100644
index 000000000..d2a658ca8
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/contract-templates/contract-templates.module.ts
@@ -0,0 +1,21 @@
+import { Module } from "@nestjs/common";
+import { TypeOrmModule } from "@nestjs/typeorm";
+
+import { ContractRendererService } from "../../contracts/contract-renderer.service";
+import { ContractTemplatesController } from "./contract-templates.controller";
+import { ContractTemplatesRepository } from "./contract-templates.repository";
+import { ContractTemplatesService } from "./contract-templates.service";
+import { ContractTemplate } from "./entities/contract-template.entity";
+
+@Module({
+  imports: [TypeOrmModule.forFeature([ContractTemplate])],
+  controllers: [ContractTemplatesController],
+  providers: [
+    ContractTemplatesRepository,
+    ContractTemplatesService,
+    // Stateless Handlebars renderer reused from src/contracts for previews.
+    ContractRendererService,
+  ],
+  exports: [ContractTemplatesService],
+})
+export class ContractTemplatesModule {}
diff --git a/apps/edr-freight-api/src/modules/contract-templates/contract-templates.repository.ts b/apps/edr-freight-api/src/modules/contract-templates/contract-templates.repository.ts
new file mode 100644
index 000000000..2f4fb0117
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/contract-templates/contract-templates.repository.ts
@@ -0,0 +1,31 @@
+import { BaseRepository } from "@edr/api-common";
+import { Injectable } from "@nestjs/common";
+import { InjectRepository } from "@nestjs/typeorm";
+import { Repository } from "typeorm";
+
+import {
+  ContractTemplate,
+  ContractTemplateCode,
+} from "./entities/contract-template.entity";
+
+@Injectable()
+export class ContractTemplatesRepository extends BaseRepository<ContractTemplate> {
+  constructor(
+    @InjectRepository(ContractTemplate)
+    repository: Repository<ContractTemplate>,
+  ) {
+    super(repository);
+  }
+
+  findByCode(code: ContractTemplateCode): Promise<ContractTemplate | null> {
+    return this.repository.findOne({ where: { code } });
+  }
+
+  override findAll(): Promise<ContractTemplate[]> {
+    return this.repository.find({ order: { code: "ASC" } });
+  }
+
+  async saveTemplate(template: ContractTemplate): Promise<ContractTemplate> {
+    return this.repository.save(template);
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/contract-templates/contract-templates.service.spec.ts b/apps/edr-freight-api/src/modules/contract-templates/contract-templates.service.spec.ts
new file mode 100644
index 000000000..0478db102
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/contract-templates/contract-templates.service.spec.ts
@@ -0,0 +1,66 @@
+import { ContractRendererService } from "../../contracts/contract-renderer.service";
+import { CONTRACT_TEMPLATE_DEFAULTS } from "../../seed/data/contract-template-defaults";
+import { ContractTemplatesService } from "./contract-templates.service";
+import { ContractTemplatesRepository } from "./contract-templates.repository";
+import {
+  ContractTemplate,
+  contractTemplateCodeFor,
+} from "./entities/contract-template.entity";
+
+function seededTemplate(code: string): ContractTemplate {
+  const seed = CONTRACT_TEMPLATE_DEFAULTS.find((t) => t.code === code)!;
+  return {
+    id: "00000000-0000-0000-0000-000000000001",
+    code: seed.code,
+    name: seed.name,
+    description: seed.description,
+    documentTitle: seed.documentTitle,
+    whereasClauses: seed.whereasClauses,
+    articles: seed.articles.map((article, index) => ({ ...article, order: index + 1 })),
+    isActive: true,
+    createdAt: new Date(),
+    updatedAt: new Date(),
+    deletedAt: null,
+  } as ContractTemplate;
+}
+
+describe("contractTemplateCodeFor", () => {
+  it("maps every direction/freight pair to one of the six codes", () => {
+    expect(contractTemplateCodeFor("IMPORT", "BULK")).toBe("IMPORT_BULK");
+    expect(contractTemplateCodeFor("EXPORT", "CONTAINER")).toBe("EXPORT_CONTAINER");
+    expect(contractTemplateCodeFor("DOMESTIC", "CONTAINER")).toBe("INTERCITY_CONTAINER");
+    expect(contractTemplateCodeFor("DOMESTIC", "BULK")).toBe("INTERCITY_BULK");
+    expect(contractTemplateCodeFor(null, null)).toBe("INTERCITY_CONTAINER");
+  });
+});
+
+describe("ContractTemplatesService.preview", () => {
+  const renderer = new ContractRendererService();
+  renderer.onModuleInit();
+
+  const repository = {
+    findByCode: jest.fn((code: string) => Promise.resolve(seededTemplate(code))),
+  } as unknown as ContractTemplatesRepository;
+
+  const service = new ContractTemplatesService(repository, renderer);
+
+  it.each(CONTRACT_TEMPLATE_DEFAULTS.map((t) => [t.code] as const))(
+    "renders a complete mock preview for %s",
+    async (code) => {
+      const { html } = await service.preview(code);
+      expect(html).toContain("Article 1");
+      expect(html).toContain("Article 13");
+      expect(html).toContain("Abyssinia Trading PLC");
+      expect(html).toContain("Annex A — Commercial Schedule");
+      // No unrendered handlebars placeholders may leak into the document.
+      expect(html).not.toContain("{{");
+      // Greenish theme applied.
+      expect(html).toContain("#1b9e7a");
+    },
+  );
+
+  it("interpolates {{contractYear}} inside seeded article bodies", async () => {
+    const { html } = await service.preview("IMPORT_BULK");
+    expect(html).toContain(`August 31, ${new Date().getFullYear()}`);
+  });
+});
diff --git a/apps/edr-freight-api/src/modules/contract-templates/contract-templates.service.ts b/apps/edr-freight-api/src/modules/contract-templates/contract-templates.service.ts
new file mode 100644
index 000000000..d2aea9bc7
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/contract-templates/contract-templates.service.ts
@@ -0,0 +1,276 @@
+import { BadRequestException, Injectable, NotFoundException } from "@nestjs/common";
+import { randomUUID } from "node:crypto";
+
+import { ContractRendererService } from "../../contracts/contract-renderer.service";
+import { getTemplateMeta } from "../../contracts/contract-template.registry";
+import {
+  ContractDynamicTemplateView,
+  ContractViewModel,
+} from "../../contracts/contract-view-model.builder";
+import { ContractTemplatesRepository } from "./contract-templates.repository";
+import {
+  CreateArticleDto,
+  PreviewContractTemplateDto,
+  ReplaceArticleDto,
+  UpdateArticleDto,
+  UpdateContractTemplateDto,
+} from "./dto/contract-template.dto";
+import {
+  CONTRACT_TEMPLATE_CODES,
+  ContractTemplate,
+  ContractTemplateArticle,
+  ContractTemplateCode,
+  contractTemplateCodeFor,
+} from "./entities/contract-template.entity";
+
+/** Registry keys used to derive labels for the mock preview per template code. */
+const PREVIEW_TEMPLATE_KEYS: Record<ContractTemplateCode, string> = {
+  IMPORT_BULK: "IMP_BULK_USD_FORWARDING",
+  EXPORT_BULK: "EXP_BULK_USD_TRANSPORT_ONLY",
+  INTERCITY_BULK: "DOM_BULK_USD_TRANSPORT_ONLY",
+  IMPORT_CONTAINER: "IMP_CON_USD_TRANSPORT_ONLY",
+  EXPORT_CONTAINER: "EXP_CON_USD_FORWARDING",
+  INTERCITY_CONTAINER: "DOM_CON_USD_TRANSPORT_ONLY",
+};
+
+@Injectable()
+export class ContractTemplatesService {
+  constructor(
+    private readonly repository: ContractTemplatesRepository,
+    private readonly renderer: ContractRendererService,
+  ) {}
+
+  async list(): Promise<ContractTemplate[]> {
+    const templates = await this.repository.findAll();
+    const rank = new Map(CONTRACT_TEMPLATE_CODES.map((code, i) => [code, i] as const));
+    return templates.sort(
+      (a, b) => (rank.get(a.code) ?? 99) - (rank.get(b.code) ?? 99),
+    );
+  }
+
+  async getByCode(code: string): Promise<ContractTemplate> {
+    const template = await this.repository.findByCode(this.assertCode(code));
+    if (!template) {
+      throw new NotFoundException(`Contract template ${code} not found`);
+    }
+    return template;
+  }
+
+  /**
+   * The active template used when generating a contract document for the given
+   * direction/freight pair; null when missing or deactivated (the renderer then
+   * falls back to the built-in generic layout).
+   */
+  async findActiveForContract(
+    tradeDirection?: string | null,
+    freightType?: string | null,
+  ): Promise<ContractTemplate | null> {
+    const code = contractTemplateCodeFor(tradeDirection, freightType);
+    const template = await this.repository.findByCode(code);
+    return template?.isActive ? template : null;
+  }
+
+  async update(code: string, dto: UpdateContractTemplateDto): Promise<ContractTemplate> {
+    const template = await this.getByCode(code);
+    if (dto.name !== undefined) template.name = dto.name;
+    if (dto.description !== undefined) template.description = dto.description;
+    if (dto.documentTitle !== undefined) template.documentTitle = dto.documentTitle;
+    if (dto.whereasClauses !== undefined) template.whereasClauses = dto.whereasClauses;
+    if (dto.isActive !== undefined) template.isActive = dto.isActive;
+    return this.repository.saveTemplate(template);
+  }
+
+  async addArticle(code: string, dto: CreateArticleDto): Promise<ContractTemplate> {
+    const template = await this.getByCode(code);
+    const articles = this.sorted(template.articles);
+    const article: ContractTemplateArticle = {
+      id: randomUUID(),
+      title: dto.title,
+      body: dto.body,
+      order: 0,
+    };
+    const index =
+      dto.position && dto.position <= articles.length ? dto.position - 1 : articles.length;
+    articles.splice(index, 0, article);
+    template.articles = this.renumber(articles);
+    return this.repository.saveTemplate(template);
+  }
+
+  async updateArticle(
+    code: string,
+    articleId: string,
+    dto: UpdateArticleDto,
+  ): Promise<ContractTemplate> {
+    const template = await this.getByCode(code);
+    const article = template.articles.find((item) => item.id === articleId);
+    if (!article) {
+      throw new NotFoundException(`Article ${articleId} not found on template ${code}`);
+    }
+    if (dto.title !== undefined) article.title = dto.title;
+    if (dto.body !== undefined) article.body = dto.body;
+    template.articles = this.renumber(this.sorted(template.articles));
+    return this.repository.saveTemplate(template);
+  }
+
+  async removeArticle(code: string, articleId: string): Promise<ContractTemplate> {
+    const template = await this.getByCode(code);
+    const remaining = template.articles.filter((item) => item.id !== articleId);
+    if (remaining.length === template.articles.length) {
+      throw new NotFoundException(`Article ${articleId} not found on template ${code}`);
+    }
+    template.articles = this.renumber(this.sorted(remaining));
+    return this.repository.saveTemplate(template);
+  }
+
+  /** Replace the full ordered article list (also how the editor reorders). */
+  async replaceArticles(
+    code: string,
+    articles: ReplaceArticleDto[],
+  ): Promise<ContractTemplate> {
+    const template = await this.getByCode(code);
+    template.articles = this.renumber(
+      articles.map((item) => ({
+        id: item.id ?? randomUUID(),
+        title: item.title,
+        body: item.body,
+        order: 0,
+      })),
+    );
+    return this.repository.saveTemplate(template);
+  }
+
+  /**
+   * Render the template against a representative mock contract so admins can
+   * see the final document without touching a real contract. Draft overrides
+   * allow previewing unsaved editor state.
+   */
+  async preview(
+    code: string,
+    overrides?: PreviewContractTemplateDto,
+  ): Promise<{ html: string }> {
+    const template = await this.getByCode(code);
+
+    const dynamicTemplate: ContractDynamicTemplateView = {
+      code: template.code,
+      name: overrides?.name ?? template.name,
+      documentTitle: overrides?.documentTitle ?? template.documentTitle,
+      whereasClauses: overrides?.whereasClauses ?? template.whereasClauses,
+      articles: overrides?.articles
+        ? overrides.articles.map((item, index) => ({
+            id: item.id ?? randomUUID(),
+            title: item.title,
+            body: item.body,
+            order: index + 1,
+          }))
+        : this.sorted(template.articles),
+    };
+
+    const view = this.buildMockView(template.code, dynamicTemplate);
+    return { html: this.renderer.render(view) };
+  }
+
+  private buildMockView(
+    code: ContractTemplateCode,
+    dynamicTemplate: ContractDynamicTemplateView,
+  ): ContractViewModel {
+    const meta = getTemplateMeta(PREVIEW_TEMPLATE_KEYS[code]);
+    const isBulk = code.endsWith("_BULK");
+    const now = new Date();
+
+    const unitRates = isBulk
+      ? [
+          { label: "Rail transport — per metric ton", unitPrice: 59.4, unit: "ton", currency: "USD" },
+          { label: "Origin handling and documentation", unitPrice: 18, unit: "ton", currency: "USD" },
+          { label: "Lashing material (when provided by EDR)", unitPrice: 150, unit: "unit", currency: "USD" },
+        ]
+      : [
+          { label: "Rail transport — 40ft container", unitPrice: 1916, unit: "container", currency: "USD" },
+          { label: "Rail transport — 2 × 20ft containers", unitPrice: 1944, unit: "container", currency: "USD" },
+          { label: "Excess tonnage surcharge", unitPrice: 10, unit: "ton", currency: "USD" },
+        ];
+
+    return {
+      bookingId: "00000000-0000-0000-0000-000000000000",
+      reference: "EDR/CT/2026/0042",
+      status: "CONTRACT_READY",
+      templateKey: PREVIEW_TEMPLATE_KEYS[code],
+      template: { ...meta, title: dynamicTemplate.name, templateFile: "edr-dynamic.hbs" },
+      contractDate: now.toLocaleDateString("en-GB", {
+        day: "numeric",
+        month: "long",
+        year: "numeric",
+      }),
+      contractYear: now.getFullYear(),
+      client: {
+        companyName: "Abyssinia Trading PLC",
+        companyAddress: "Bole Sub-city, Woreda 03, H.No 1234, Addis Ababa",
+        companyLocation: "Ethiopia",
+        phone: "+251 91 123 4567",
+        email: "logistics@abyssiniatrading.et",
+        tinNumber: "0011223344",
+        vatNumber: "VAT-556677",
+        fanNumber: "FAN-889900",
+        businessLicense: "BL/AA/12/345678",
+      },
+      provider: {
+        name: "Ethio-Djibouti Standard Gauge Railway Share Company",
+        address: "Nifas Silk Lafto Sub City, Addis Ababa, Ethiopia",
+        phone: "+251 11 872 0000",
+        email: "info@edr.gov.et",
+        tinNumber: "—",
+      },
+      schedule: {
+        originLabel: isBulk ? "Nagad Railway Station" : "SGTD Freight Station",
+        destinationLabel: "Galaan Multipurpose Port (GMP)",
+        tradeDirection: code.startsWith("IMPORT")
+          ? "IMPORT"
+          : code.startsWith("EXPORT")
+            ? "EXPORT"
+            : "DOMESTIC",
+        freightType: isBulk ? "BULK" : "CONTAINER",
+        serviceType: "Rail transport and customs clearance",
+        scheduledDate: "—",
+        contractType: "GENERAL",
+        cargoDescription: isBulk ? "Steel billets — 2,800 MT" : "40ft containers — FMCG cargo",
+        totalWeightVgm: "—",
+        equipmentReturn: isBulk ? "—" : "With empty return",
+        hazardousLabel: "No",
+        firstMilePickupAddress: "—",
+        lastMileDeliveryAddress: "—",
+      },
+      pricing: {
+        displayMode: "UNIT_RATES",
+        unitRates,
+        currency: "USD",
+        equipmentReturn: isBulk ? "—" : "With empty return",
+        originLabel: isBulk ? "Nagad Railway Station" : "SGTD Freight Station",
+        destinationLabel: "Galaan Multipurpose Port (GMP)",
+      } as unknown as ContractViewModel["pricing"],
+      signatures: [],
+      canSignCustomer: false,
+      canSignStaff: false,
+      hasContractDocument: false,
+      hasCustomerSignature: false,
+      hasStaffSignature: false,
+      dynamicTemplate,
+    };
+  }
+
+  private assertCode(code: string): ContractTemplateCode {
+    const upper = code?.toUpperCase() as ContractTemplateCode;
+    if (!CONTRACT_TEMPLATE_CODES.includes(upper)) {
+      throw new BadRequestException(
+        `Unknown contract template code "${code}". Valid codes: ${CONTRACT_TEMPLATE_CODES.join(", ")}`,
+      );
+    }
+    return upper;
+  }
+
+  private sorted(articles: ContractTemplateArticle[]): ContractTemplateArticle[] {
+    return [...(articles ?? [])].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  }
+
+  private renumber(articles: ContractTemplateArticle[]): ContractTemplateArticle[] {
+    return articles.map((article, index) => ({ ...article, order: index + 1 }));
+  }
+}
diff --git a/apps/edr-freight-api/src/modules/contract-templates/dto/contract-template.dto.ts b/apps/edr-freight-api/src/modules/contract-templates/dto/contract-template.dto.ts
new file mode 100644
index 000000000..0ea69f262
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/contract-templates/dto/contract-template.dto.ts
@@ -0,0 +1,134 @@
+import { ApiPropertyOptional, ApiProperty } from "@nestjs/swagger";
+import { Type } from "class-transformer";
+import {
+  IsArray,
+  IsBoolean,
+  IsInt,
+  IsOptional,
+  IsString,
+  MaxLength,
+  Min,
+  MinLength,
+  ValidateNested,
+} from "class-validator";
+
+export class UpdateContractTemplateDto {
+  @ApiPropertyOptional({ description: "Display name of the template" })
+  @IsOptional()
+  @IsString()
+  @MinLength(3)
+  @MaxLength(200)
+  name?: string;
+
+  @ApiPropertyOptional({ description: "Short description shown on the template card" })
+  @IsOptional()
+  @IsString()
+  description?: string;
+
+  @ApiPropertyOptional({ description: "Cover-page service title of the generated document" })
+  @IsOptional()
+  @IsString()
+  @MinLength(3)
+  @MaxLength(300)
+  documentTitle?: string;
+
+  @ApiPropertyOptional({ description: "WHEREAS recitals", type: [String] })
+  @IsOptional()
+  @IsArray()
+  @IsString({ each: true })
+  whereasClauses?: string[];
+
+  @ApiPropertyOptional({ description: "Whether the template is used for generation" })
+  @IsOptional()
+  @IsBoolean()
+  isActive?: boolean;
+}
+
+export class CreateArticleDto {
+  @ApiProperty({ description: "Article heading (without the Article N prefix)" })
+  @IsString()
+  @MinLength(2)
+  @MaxLength(200)
+  title!: string;
+
+  @ApiProperty({
+    description:
+      'Article body. One clause per line; prefix a line with "- " to nest it as a bullet under the previous clause.',
+  })
+  @IsString()
+  @MinLength(2)
+  body!: string;
+
+  @ApiPropertyOptional({ description: "1-based position to insert at (appends when omitted)" })
+  @IsOptional()
+  @IsInt()
+  @Min(1)
+  position?: number;
+}
+
+export class UpdateArticleDto {
+  @ApiPropertyOptional()
+  @IsOptional()
+  @IsString()
+  @MinLength(2)
+  @MaxLength(200)
+  title?: string;
+
+  @ApiPropertyOptional()
+  @IsOptional()
+  @IsString()
+  @MinLength(2)
+  body?: string;
+}
+
+export class ReplaceArticleDto {
+  @ApiPropertyOptional({ description: "Existing article id (new id assigned when omitted)" })
+  @IsOptional()
+  @IsString()
+  id?: string;
+
+  @ApiProperty()
+  @IsString()
+  @MinLength(2)
+  @MaxLength(200)
+  title!: string;
+
+  @ApiProperty()
+  @IsString()
+  @MinLength(2)
+  body!: string;
+}
+
+export class ReplaceArticlesDto {
+  @ApiProperty({ type: [ReplaceArticleDto], description: "Full ordered article list" })
+  @IsArray()
+  @ValidateNested({ each: true })
+  @Type(() => ReplaceArticleDto)
+  articles!: ReplaceArticleDto[];
+}
+
+/** Optional draft overrides so the editor can preview unsaved changes. */
+export class PreviewContractTemplateDto {
+  @ApiPropertyOptional()
+  @IsOptional()
+  @IsString()
+  name?: string;
+
+  @ApiPropertyOptional()
+  @IsOptional()
+  @IsString()
+  documentTitle?: string;
+
+  @ApiPropertyOptional({ type: [String] })
+  @IsOptional()
+  @IsArray()
+  @IsString({ each: true })
+  whereasClauses?: string[];
+
+  @ApiPropertyOptional({ type: [ReplaceArticleDto] })
+  @IsOptional()
+  @IsArray()
+  @ValidateNested({ each: true })
+  @Type(() => ReplaceArticleDto)
+  articles?: ReplaceArticleDto[];
+}
diff --git a/apps/edr-freight-api/src/modules/contract-templates/entities/contract-template.entity.ts b/apps/edr-freight-api/src/modules/contract-templates/entities/contract-template.entity.ts
new file mode 100644
index 000000000..73729fbb6
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/contract-templates/entities/contract-template.entity.ts
@@ -0,0 +1,77 @@
+import { BaseEntity } from "@edr/api-common";
+import { Column, Entity, Index } from "typeorm";
+
+/**
+ * The six canonical contract document templates, one per
+ * (trade direction × freight type) combination. Contracts store DOMESTIC for
+ * intercity movements; the template layer labels those INTERCITY to match the
+ * commercial vocabulary used on the printed documents.
+ */
+export const CONTRACT_TEMPLATE_CODES = [
+  "IMPORT_BULK",
+  "EXPORT_BULK",
+  "INTERCITY_BULK",
+  "IMPORT_CONTAINER",
+  "EXPORT_CONTAINER",
+  "INTERCITY_CONTAINER",
+] as const;
+
+export type ContractTemplateCode = (typeof CONTRACT_TEMPLATE_CODES)[number];
+
+/**
+ * One dynamic article on a contract template. `body` is plain multiline text:
+ * each non-empty line renders as a numbered clause; lines prefixed with "- "
+ * render as bullet points nested under the preceding clause. A single-line
+ * body renders as an unnumbered paragraph. Handlebars placeholders (e.g.
+ * {{client.companyName}}, {{contractDate}}, {{contractYear}}, {{reference}})
+ * are interpolated against the contract view model at render time.
+ */
+export interface ContractTemplateArticle {
+  id: string;
+  title: string;
+  body: string;
+  order: number;
+}
+
+/** Map a contract's stored direction/freight pair onto a template code. */
+export function contractTemplateCodeFor(
+  tradeDirection?: string | null,
+  freightType?: string | null,
+): ContractTemplateCode {
+  const direction =
+    tradeDirection === "IMPORT"
+      ? "IMPORT"
+      : tradeDirection === "EXPORT"
+        ? "EXPORT"
+        : "INTERCITY";
+  const freight =
+    (freightType ?? "").toUpperCase().includes("BULK") ? "BULK" : "CONTAINER";
+  return `${direction}_${freight}` as ContractTemplateCode;
+}
+
+@Entity({ schema: "freight", name: "contract_templates" })
+@Index(["code"], { unique: true })
+export class ContractTemplate extends BaseEntity {
+  @Column({ name: "code", type: "varchar", length: 40, unique: true })
+  code!: ContractTemplateCode;
+
+  @Column({ name: "name", type: "varchar", length: 200 })
+  name!: string;
+
+  @Column({ name: "description", type: "text", nullable: true })
+  description?: string | null;
+
+  /** Cover-page service line, e.g. "Steel Billet Transportation and Customs Clearance Services". */
+  @Column({ name: "document_title", type: "varchar", length: 300 })
+  documentTitle!: string;
+
+  /** WHEREAS recitals rendered between the parties block and the articles. */
+  @Column({ name: "whereas_clauses", type: "jsonb", default: () => "'[]'" })
+  whereasClauses!: string[];
+
+  @Column({ name: "articles", type: "jsonb", default: () => "'[]'" })
+  articles!: ContractTemplateArticle[];
+
+  @Column({ name: "is_active", type: "boolean", default: true })
+  isActive!: boolean;
+}
diff --git a/apps/edr-freight-api/src/modules/contracts/booking-request.repository.ts b/apps/edr-freight-api/src/modules/contracts/booking-request.repository.ts
index 0ae829529..d0705bfb1 100644
--- a/apps/edr-freight-api/src/modules/contracts/booking-request.repository.ts
+++ b/apps/edr-freight-api/src/modules/contracts/booking-request.repository.ts
@@ -22,12 +22,15 @@ export class BookingRequestRepository extends BaseRepository<BookingRequest> {
     });
   }
 
-  /** GL queue: pending requests across all contracts, oldest first. */
-  async findPending(): Promise<BookingRequest[]> {
+  /**
+   * GL queue: every request across all contracts, newest first. The queue page
+   * filters by status client-side (pending work vs accepted/rejected history),
+   * and surfaces the customer — so the contract's company rides along.
+   */
+  async findQueue(): Promise<BookingRequest[]> {
     return this.repository.find({
-      where: { status: 'PENDING' },
-      order: { createdAt: 'ASC' },
-      relations: { contract: true },
+      order: { createdAt: 'DESC' },
+      relations: { contract: { company: true } },
     });
   }
 
diff --git a/apps/edr-freight-api/src/modules/contracts/booking-request.service.ts b/apps/edr-freight-api/src/modules/contracts/booking-request.service.ts
index 4752b004f..1005409e0 100644
--- a/apps/edr-freight-api/src/modules/contracts/booking-request.service.ts
+++ b/apps/edr-freight-api/src/modules/contracts/booking-request.service.ts
@@ -51,6 +51,11 @@ export class BookingRequestService {
     const contract = await this.contractsService.findById(contractId);
     await this.contractsService.assertCustomerCanAccessContract(userId, contract);
     this.assertGeneralCustoms(contract);
+    if (contract.status === 'CONTRACT_CLOSED') {
+      throw new ConflictException(
+        'This contract is completed — the full contracted quantity has been booked.',
+      );
+    }
     if (contract.status !== 'CONTRACT_ACTIVE') {
       throw new ConflictException(
         'The contract must be active before requesting a shipment.',
@@ -108,6 +113,17 @@ export class BookingRequestService {
           },
         };
 
+    // Clearance-first flow: the request immediately initiates a BARE booking
+    // instance (no cargo, no date, no price) that enters per-booking phased
+    // customs clearance. GL no longer screens the request up front — it
+    // reviews the documents in the clearance queue and completes the booking
+    // (container numbers, VGM, shipment day) once clearance is ready. The
+    // instance is created first so a failure leaves no half-linked request.
+    const booking = await this.contractBookingService.initiateForShipmentRequest(
+      contract,
+      { contractRouteId: dto.contractRouteId, userId },
+    );
+
     const reference = await this.generateReference();
     const request = await this.repo.create({
       reference,
@@ -115,7 +131,8 @@ export class BookingRequestService {
       requestedByUserId: userId ?? null,
       contractRouteId: dto.contractRouteId ?? null,
       scheduledDate: dto.scheduledDate ? new Date(dto.scheduledDate) : null,
-      status: 'PENDING',
+      status: 'ACCEPTED',
+      createdBookingId: booking.id,
       requestedLines,
       notes: dto.notes ?? null,
     } as never);
@@ -134,7 +151,7 @@ export class BookingRequestService {
   }
 
   queue(): Promise<BookingRequest[]> {
-    return this.repo.findPending();
+    return this.repo.findQueue();
   }
 
   private async findPending(requestId: string): Promise<BookingRequest> {
diff --git a/apps/edr-freight-api/src/modules/contracts/clearance-milestone.service.ts b/apps/edr-freight-api/src/modules/contracts/clearance-milestone.service.ts
index 81ed305e4..ed3597d57 100644
--- a/apps/edr-freight-api/src/modules/contracts/clearance-milestone.service.ts
+++ b/apps/edr-freight-api/src/modules/contracts/clearance-milestone.service.ts
@@ -58,6 +58,31 @@ export class ClearanceMilestoneService {
     await this.seed(postBooking, { bookingId });
   }
 
+  /**
+   * Seed whichever pre/post-booking milestones the booking is still missing,
+   * keyed by milestoneCode. Plain seeding is a blind insert, so paths that can
+   * run more than once (completing an initiated instance whose pre-booking
+   * milestones were seeded at initiation, or a consolidation pairing replay)
+   * must go through this instead — a duplicate timeline breaks the phase
+   * derivation.
+   */
+  async ensureBookingMilestones(
+    bookingId: string,
+    tradeDirection: string,
+  ): Promise<void> {
+    const existing = await this.repo.find({ where: { bookingId } });
+    const have = new Set(existing.map((m) => m.milestoneCode));
+    const { preBooking, postBooking } = splitMilestones(tradeDirection);
+    await this.seed(
+      preBooking.filter((d) => !have.has(d.code)),
+      { bookingId },
+    );
+    await this.seed(
+      postBooking.filter((d) => !have.has(d.code)),
+      { bookingId },
+    );
+  }
+
   private async seed(
     defs: MilestoneDef[],
     scope: { contractId?: string; clearanceCycleId?: string; bookingId?: string },
diff --git a/apps/edr-freight-api/src/modules/contracts/contract-booking.completion.spec.ts b/apps/edr-freight-api/src/modules/contracts/contract-booking.completion.spec.ts
new file mode 100644
index 000000000..4e21078ff
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/contracts/contract-booking.completion.spec.ts
@@ -0,0 +1,150 @@
+import { BadRequestException } from '@nestjs/common';
+
+import { ContractBookingService } from './contract-booking.service';
+import { Contract } from './entities/contract.entity';
+
+/**
+ * Contract auto-completion by quantity cap. Once a GENERAL contract's capped
+ * scope is fully consumed (e.g. a split remainder rebooked), the contract moves
+ * to CONTRACT_CLOSED even inside its validity window, and further bookings are
+ * blocked — including while a booking window is open. Released capacity
+ * (cancelled/expired booking) reopens the contract on the next attempt.
+ */
+describe('ContractBookingService — quantity-cap completion', () => {
+  function makeService() {
+    const contractsRepository = {
+      findByIdWithRelations: jest.fn(),
+      update: jest.fn().mockResolvedValue(undefined),
+    };
+    const service = new ContractBookingService(
+      contractsRepository as never,
+      {} as never, // bookingsRepository
+      {} as never, // bookingPricingService
+      {} as never, // consolidationService
+      {} as never, // containerTypesService
+      {} as never, // ruleEngineService
+      {} as never, // milestoneService
+      {} as never, // workflowService
+      {} as never, // invoiceService
+      {} as never, // dataSource
+      {} as never, // trainSchedulingService
+      {} as never, // bookingTransitionService
+    );
+    return { service, contractsRepository };
+  }
+
+  type WithPrivate = {
+    maybeCompleteContract: (c: Contract) => Promise<void>;
+  };
+
+  const generalContract = (status: string): Contract =>
+    ({
+      id: 'c-1',
+      reference: 'CTR-1',
+      contractKind: 'GENERAL',
+      status,
+    }) as Contract;
+
+  it('closes a GENERAL contract when every capped line is exhausted', async () => {
+    const { service, contractsRepository } = makeService();
+    jest.spyOn(service, 'computeCapacity').mockResolvedValue([
+      { containerSize: '20FT', cap: 10, booked: 10, remaining: 0 },
+      { containerSize: '40FT', cap: 4, booked: 4, remaining: 0 },
+    ]);
+
+    await (service as never as WithPrivate).maybeCompleteContract(
+      generalContract('CONTRACT_ACTIVE'),
+    );
+
+    expect(contractsRepository.update).toHaveBeenCalledWith('c-1', {
+      status: 'CONTRACT_CLOSED',
+    });
+  });
+
+  it('absorbs bulk-ton float dust when judging exhaustion', async () => {
+    const { service, contractsRepository } = makeService();
+    jest
+      .spyOn(service, 'computeCapacity')
+      .mockResolvedValue([{ cap: 100, booked: 99.9995, remaining: 0.0005 }]);
+
+    await (service as never as WithPrivate).maybeCompleteContract(
+      generalContract('FULLY_EXECUTED'),
+    );
+
+    expect(contractsRepository.update).toHaveBeenCalledWith('c-1', {
+      status: 'CONTRACT_CLOSED',
+    });
+  });
+
+  it('keeps the contract open while any capped line has capacity left', async () => {
+    const { service, contractsRepository } = makeService();
+    jest.spyOn(service, 'computeCapacity').mockResolvedValue([
+      { containerSize: '20FT', cap: 10, booked: 10, remaining: 0 },
+      { containerSize: '40FT', cap: 4, booked: 3, remaining: 1 },
+    ]);
+
+    await (service as never as WithPrivate).maybeCompleteContract(
+      generalContract('CONTRACT_ACTIVE'),
+    );
+
+    expect(contractsRepository.update).not.toHaveBeenCalled();
+  });
+
+  it('never closes an uncapped contract', async () => {
+    const { service, contractsRepository } = makeService();
+    jest.spyOn(service, 'computeCapacity').mockResolvedValue([]);
+
+    await (service as never as WithPrivate).maybeCompleteContract(
+      generalContract('CONTRACT_ACTIVE'),
+    );
+
+    expect(contractsRepository.update).not.toHaveBeenCalled();
+  });
+
+  it('never closes a ONE_TIME contract (single-slot rule governs it)', async () => {
+    const { service, contractsRepository } = makeService();
+    const spy = jest.spyOn(service, 'computeCapacity');
+
+    await (service as never as WithPrivate).maybeCompleteContract({
+      id: 'c-1',
+      contractKind: 'ONE_TIME',
+      status: 'FULLY_EXECUTED',
+    } as Contract);
+
+    expect(spy).not.toHaveBeenCalled();
+    expect(contractsRepository.update).not.toHaveBeenCalled();
+  });
+
+  it('rejects a new booking on a completed contract even inside an open window', async () => {
+    const { service, contractsRepository } = makeService();
+    contractsRepository.findByIdWithRelations.mockResolvedValue(
+      generalContract('CONTRACT_CLOSED'),
+    );
+    jest
+      .spyOn(service, 'computeCapacity')
+      .mockResolvedValue([{ cap: 10, booked: 10, remaining: 0 }]);
+
+    await expect(
+      service.createUnderContract('c-1', {} as never, null, null),
+    ).rejects.toThrow(BadRequestException);
+    expect(contractsRepository.update).not.toHaveBeenCalled();
+  });
+
+  it('reopens a completed contract when capacity was released', async () => {
+    const { service, contractsRepository } = makeService();
+    contractsRepository.findByIdWithRelations.mockResolvedValue(
+      generalContract('CONTRACT_CLOSED'),
+    );
+    jest
+      .spyOn(service, 'computeCapacity')
+      .mockResolvedValue([{ cap: 10, booked: 8, remaining: 2 }]);
+
+    // The create path continues past the gate and dies later on the bare mocks —
+    // only the reopen transition is under test here.
+    await service.createUnderContract('c-1', {} as never, null, null).catch(() => undefined);
+
+    expect(contractsRepository.update).toHaveBeenCalledWith('c-1', {
+      status: 'CONTRACT_ACTIVE',
+    });
+  });
+});
diff --git a/apps/edr-freight-api/src/modules/contracts/contract-booking.consolidation.spec.ts b/apps/edr-freight-api/src/modules/contracts/contract-booking.consolidation.spec.ts
index a83837350..7225d6e3f 100644
--- a/apps/edr-freight-api/src/modules/contracts/contract-booking.consolidation.spec.ts
+++ b/apps/edr-freight-api/src/modules/contracts/contract-booking.consolidation.spec.ts
@@ -36,6 +36,7 @@ describe('ContractBookingService — drawdown consolidation gate', () => {
     const milestoneService = {
       seedPostBookingMilestones: jest.fn().mockResolvedValue(undefined),
       seedPreBookingMilestonesOnBooking: jest.fn().mockResolvedValue(undefined),
+      ensureBookingMilestones: jest.fn().mockResolvedValue(undefined),
       ...overrides.milestoneService,
     };
     const contractsRepository = {
@@ -58,6 +59,7 @@ describe('ContractBookingService — drawdown consolidation gate', () => {
       invoiceService as never,
       {} as never, // dataSource
       {} as never, // trainSchedulingService
+      {} as never, // bookingTransitionService
     );
     return {
       service,
@@ -143,9 +145,13 @@ describe('ContractBookingService — drawdown consolidation gate', () => {
     await service.onConsolidationPaired({ bookingIds: ['b-1'] });
 
     expect(invoiceService.ensureInvoiceForBooking).toHaveBeenCalledTimes(1);
-    // GENERAL customs → per-booking pre + post milestones.
-    expect(milestoneService.seedPreBookingMilestonesOnBooking).toHaveBeenCalled();
-    expect(milestoneService.seedPostBookingMilestones).toHaveBeenCalled();
+    // GENERAL customs → per-booking milestones, via the idempotent ensure so a
+    // pairing replay (or an initiated instance's pre-seeded timeline) never
+    // duplicates rows.
+    expect(milestoneService.ensureBookingMilestones).toHaveBeenCalledWith(
+      'b-1',
+      'EXPORT',
+    );
   });
 
   it('onConsolidationPaired ignores a booking still PENDING_CONSOLIDATION', async () => {
diff --git a/apps/edr-freight-api/src/modules/contracts/contract-booking.service.ts b/apps/edr-freight-api/src/modules/contracts/contract-booking.service.ts
index 46fb61db1..c09f2ccb0 100644
--- a/apps/edr-freight-api/src/modules/contracts/contract-booking.service.ts
+++ b/apps/edr-freight-api/src/modules/contracts/contract-booking.service.ts
@@ -1,5 +1,6 @@
 import {
   BadRequestException,
+  ConflictException,
   ForbiddenException,
   Inject,
   Injectable,
@@ -16,6 +17,7 @@ import { BookingContainer } from '../bookings/entities/booking-container.entity'
 import { BookingContainerUnit } from '../bookings/entities/booking-container-unit.entity';
 import { BookingsRepository } from '../bookings/bookings.repository';
 import { BookingPricingService } from '../bookings/booking-pricing.service';
+import { BookingTransitionService } from '../bookings/booking-transition.service';
 import { ConsolidationService } from '../bookings/consolidation.service';
 import { PriceLineItemDto } from '../bookings/dto/generate-price-response.dto';
 import { BookingInvoiceService } from '../bookings/booking-invoice.service';
@@ -72,6 +74,8 @@ export class ContractBookingService {
     private readonly dataSource: DataSource,
     @Inject(forwardRef(() => TrainSchedulingService))
     private readonly trainSchedulingService: TrainSchedulingService,
+    @Inject(forwardRef(() => BookingTransitionService))
+    private readonly bookingTransitionService: BookingTransitionService,
   ) {}
 
   async createUnderContract(
@@ -83,6 +87,24 @@ export class ContractBookingService {
     const contract = await this.contractsRepository.findByIdWithRelations(contractId);
     if (!contract) throw new NotFoundException(`Contract ${contractId} not found`);
 
+    // A contract whose quantity cap was fully booked is completed — no further
+    // bookings, even while contract validity and a booking window are still
+    // open. Capacity released after closure (a cancelled/expired booking)
+    // reopens the contract on the next booking attempt.
+    if (contract.status === 'CONTRACT_CLOSED') {
+      const capacity = await this.computeCapacity(contract);
+      const hasRoom = capacity.some((c) => c.remaining == null || c.remaining > 0);
+      if (!hasRoom) {
+        throw new BadRequestException(
+          'This contract is completed — the full contracted quantity has been booked.',
+        );
+      }
+      await this.contractsRepository.update(contract.id, {
+        status: 'CONTRACT_ACTIVE',
+      } as never);
+      contract.status = 'CONTRACT_ACTIVE';
+    }
+
     // GL Ethiopia is identified by the dedicated contract create-booking permission
     // (granted to the edr_gl_ethiopia preset).
     const isGlActor =
@@ -171,6 +193,11 @@ export class ContractBookingService {
       // their only chance to hard-block an unbalanceable set. Entry order is
       // irrelevant (the check sorts by weight before pairing).
       await this.assert20ftPairableAtCreate(dto);
+      // A container number may appear once per train (same day + route).
+      await this.assertContainerNumbersAvailable(dto, {
+        originYardId: route?.originYardId ?? null,
+        destinationYardId: route?.destinationYardId ?? null,
+      });
     }
 
     // Denormalize route/direction/freight onto the booking for the scheduling engine.
@@ -200,7 +227,7 @@ export class ContractBookingService {
       contractType: 'NEW',
       customsClearingEnabled: contract.customsClearingEnabled,
       customsClearingAgent: contract.customsClearingAgent ?? null,
-      equipmentReturn: contract.equipmentReturn ?? 'WITHOUT_RETURN',
+      equipmentReturn: dto.equipmentReturn ?? contract.equipmentReturn ?? 'WITHOUT_RETURN',
       originYardId: route?.originYardId ?? null,
       destinationYardId: route?.destinationYardId ?? null,
       tradeDirection: contract.tradeDirection,
@@ -291,6 +318,9 @@ export class ContractBookingService {
       if (!parked.paired) {
         // Waiting for a partner — stop here. The booking sits in
         // PENDING_CONSOLIDATION, unbilled and unscheduled, until it pairs.
+        // A parked booking still holds contract capacity, so the cap may
+        // already be exhausted by it.
+        await this.maybeCompleteContract(contract);
         const pendingResult = await this.bookingsRepository.findByIdWithFiles(
           booking.id,
         );
@@ -304,10 +334,355 @@ export class ContractBookingService {
       generalCustoms,
     );
 
+    await this.maybeCompleteContract(contract);
+
     const result = await this.bookingsRepository.findByIdWithFiles(booking.id);
     return { booking: result ?? booking, warnings };
   }
 
+  /**
+   * Initiate a BARE booking instance under a GENERAL non-customs contract
+   * (Path A per-booking self-clearance). One click, zero input: no schedule
+   * date, no cargo, no window check, no pricing. The instance starts in the
+   * clearance gate (AWAITING_DOCUMENTS); the customer uploads clearance docs,
+   * Operations reviews and finalizes, and only then does the customer complete
+   * the booking (cargo + binding day + window check) via
+   * {@link completeUnderContract} — the same machinery a one-time shipment uses.
+   */
+  async initiateUnderContract(
+    contractId: string,
+    dto: Pick<CreateBookingUnderContractDto, 'contractRouteId'>,
+    user?: { id?: string } | null,
+    actorPermissions?: unknown,
+  ): Promise<CreateBookingUnderContractResult> {
+    const contract = await this.contractsRepository.findByIdWithRelations(contractId);
+    if (!contract) throw new NotFoundException(`Contract ${contractId} not found`);
+
+    const generalSelfClear =
+      contract.contractKind === 'GENERAL' &&
+      !contract.customsClearingEnabled &&
+      contract.tradeDirection !== 'DOMESTIC';
+    if (!generalSelfClear) {
+      throw new BadRequestException(
+        'Initiate booking applies only to general import/export contracts without customs clearing.',
+      );
+    }
+
+    if (contract.status === 'CONTRACT_CLOSED') {
+      throw new BadRequestException(
+        'This contract is completed — the full contracted quantity has been booked.',
+      );
+    }
+
+    const isGlActor =
+      actorPermissions != null &&
+      hasFreightPermission(actorPermissions, FREIGHT_PERMS.contracts.createBooking);
+    const createdByRole = await this.assertGate(contract, isGlActor);
+
+    if (contract.contractValidUntil && contract.contractValidUntil.getTime() < Date.now()) {
+      throw new BadRequestException('Contract validity has expired — no new bookings.');
+    }
+
+    const route = await this.resolveRoute(contract, dto.contractRouteId);
+
+    // Bare instance: no cargo, no date, no price. Draws no contract capacity
+    // until the customer completes it after clearance.
+    const booking = await insertWithGeneratedReference(
+      () => this.generateReference(),
+      (reference) =>
+        this.bookingsRepository.create({
+          reference,
+          companyId: contract.companyId ?? null,
+          companyProfileId: contract.companyProfileId ?? null,
+          isGovernment: contract.isGovernment,
+          governmentInstitution: contract.governmentInstitution ?? null,
+          status: 'AWAITING_DOCUMENTS',
+          bookingType: 'ONE_TIME',
+          contractId: contract.id,
+          contractRouteId: route?.id ?? null,
+          contractKind: contract.contractKind,
+          createdByRole,
+          createdByUserId: user?.id ?? null,
+          scheduledDate: null,
+          serviceTypeId: contract.serviceTypeId,
+          paymentCurrency: contract.paymentCurrency,
+          contractType: 'NEW',
+          customsClearingEnabled: contract.customsClearingEnabled,
+          customsClearingAgent: contract.customsClearingAgent ?? null,
+          equipmentReturn: contract.equipmentReturn ?? 'WITHOUT_RETURN',
+          originYardId: route?.originYardId ?? null,
+          destinationYardId: route?.destinationYardId ?? null,
+          tradeDirection: contract.tradeDirection,
+          freightType: contract.freightType,
+          cargoTypeId: this.resolveCargoTypeId(contract, {}),
+          isHazardous: contract.isHazardous,
+          isReefer: contract.isReefer,
+          cargoTotalWeightVgm: 0,
+          firstMilePickupAddress: contract.firstMilePickupAddress ?? null,
+          firstMilePickupLat: contract.firstMilePickupLat ?? null,
+          firstMilePickupLng: contract.firstMilePickupLng ?? null,
+          lastMileDeliveryAddress: contract.lastMileDeliveryAddress ?? null,
+          lastMileDeliveryLat: contract.lastMileDeliveryLat ?? null,
+          lastMileDeliveryLng: contract.lastMileDeliveryLng ?? null,
+        } as never),
+    );
+
+    const result = await this.bookingsRepository.findByIdWithFiles(booking.id);
+    return { booking: result ?? booking, warnings: [] };
+  }
+
+  /**
+   * Initiate a BARE booking instance for a GENERAL + customs shipment request
+   * (Path B, clearance-first). Called by BookingRequestService.submit AFTER it
+   * validated the contract (general customs, active, capacity) — the request
+   * itself carries the quantities; the instance carries none. Pre-booking
+   * customs milestones are seeded immediately so the instance enters the same
+   * phased ET/DJ clearance a ONE_TIME customs contract runs, just per booking.
+   * GL completes the booking (cargo + day) via {@link completeUnderContract}
+   * once the clearance reaches CLEARANCE_READY.
+   */
+  async initiateForShipmentRequest(
+    contract: Contract,
+    opts: { contractRouteId?: string; userId?: string | null },
+  ): Promise<Booking> {
+    const generalCustoms =
+      contract.contractKind === 'GENERAL' && Boolean(contract.customsClearingEnabled);
+    if (!generalCustoms) {
+      throw new BadRequestException(
+        'Shipment-request initiation applies only to general customs contracts.',
+      );
+    }
+    if (contract.contractValidUntil && contract.contractValidUntil.getTime() < Date.now()) {
+      throw new BadRequestException('Contract validity has expired — no new bookings.');
+    }
+
+    const route = await this.resolveRoute(contract, opts.contractRouteId);
+
+    const booking = await insertWithGeneratedReference(
+      () => this.generateReference(),
+      (reference) =>
+        this.bookingsRepository.create({
+          reference,
+          companyId: contract.companyId ?? null,
+          companyProfileId: contract.companyProfileId ?? null,
+          isGovernment: contract.isGovernment,
+          governmentInstitution: contract.governmentInstitution ?? null,
+          status: 'AWAITING_DOCUMENTS',
+          bookingType: 'ONE_TIME',
+          contractId: contract.id,
+          contractRouteId: route?.id ?? null,
+          contractKind: contract.contractKind,
+          createdByRole: 'CUSTOMER',
+          createdByUserId: opts.userId ?? null,
+          scheduledDate: null,
+          serviceTypeId: contract.serviceTypeId,
+          paymentCurrency: contract.paymentCurrency,
+          contractType: 'NEW',
+          customsClearingEnabled: contract.customsClearingEnabled,
+          customsClearingAgent: contract.customsClearingAgent ?? null,
+          equipmentReturn: contract.equipmentReturn ?? 'WITHOUT_RETURN',
+          originYardId: route?.originYardId ?? null,
+          destinationYardId: route?.destinationYardId ?? null,
+          tradeDirection: contract.tradeDirection,
+          freightType: contract.freightType,
+          cargoTypeId: this.resolveCargoTypeId(contract, {}),
+          isHazardous: contract.isHazardous,
+          isReefer: contract.isReefer,
+          cargoTotalWeightVgm: 0,
+          firstMilePickupAddress: contract.firstMilePickupAddress ?? null,
+          firstMilePickupLat: contract.firstMilePickupLat ?? null,
+          firstMilePickupLng: contract.firstMilePickupLng ?? null,
+          lastMileDeliveryAddress: contract.lastMileDeliveryAddress ?? null,
+          lastMileDeliveryLat: contract.lastMileDeliveryLat ?? null,
+          lastMileDeliveryLng: contract.lastMileDeliveryLng ?? null,
+        } as never),
+    );
+
+    // Pre-booking phase only — the post-booking milestones (loading, transit)
+    // are seeded when GL completes the booking, mirroring the ONE_TIME flow
+    // where GL's booking creation seeds them.
+    await this.milestoneService.seedPreBookingMilestonesOnBooking(
+      booking.id,
+      contract.tradeDirection,
+    );
+
+    return (await this.bookingsRepository.findByIdWithFiles(booking.id)) ?? booking;
+  }
+
+  /**
+   * Complete a bare initiated booking after its per-booking clearance is
+   * finalized (CLEARANCE_READY) or operations returned it for changes
+   * (OPERATION_CHANGES_REQUESTED). This is the deferred half of
+   * {@link createUnderContract}: cargo lines, quantity-cap drawdown, booking
+   * window + open-departure checks, pricing, consolidation and invoicing all run
+   * here — the same gates a one-time shipment passes at creation.
+   *
+   * Actor rules mirror {@link assertGate}: a customs (Path B) instance is
+   * completed by GL Ethiopia only; a non-customs (Path A) instance by the
+   * customer (or staff).
+   */
+  async completeUnderContract(
+    contractId: string,
+    bookingId: string,
+    dto: CreateBookingUnderContractDto,
+    actorPermissions?: unknown,
+  ): Promise<CreateBookingUnderContractResult> {
+    const contract = await this.contractsRepository.findByIdWithRelations(contractId);
+    if (!contract) throw new NotFoundException(`Contract ${contractId} not found`);
+
+    const booking = await this.bookingsRepository.findByIdWithFiles(bookingId);
+    if (!booking || booking.contractId !== contract.id) {
+      throw new NotFoundException(`Booking ${bookingId} not found on this contract`);
+    }
+    if (!['CLEARANCE_READY', 'OPERATION_CHANGES_REQUESTED'].includes(booking.status)) {
+      throw new BadRequestException(
+        'Clearance must be finalized before the booking can be completed.',
+      );
+    }
+    // Path B: only GL Ethiopia completes a customs instance — the customer
+    // never enters shipment data on a customs contract.
+    if (contract.customsClearingEnabled) {
+      const isGlActor =
+        actorPermissions != null &&
+        hasFreightPermission(actorPermissions, FREIGHT_PERMS.contracts.createBooking);
+      if (!isGlActor) {
+        throw new ForbiddenException(
+          'Customs-clearance bookings are completed by Global Logistics on behalf of the customer.',
+        );
+      }
+    }
+    if (!dto.scheduledDate) {
+      throw new BadRequestException('A binding shipment day is required');
+    }
+    if (contract.contractValidUntil && contract.contractValidUntil.getTime() < Date.now()) {
+      throw new BadRequestException('Contract validity has expired — no new bookings.');
+    }
+
+    // Completion is booking time: the route's booking window must be open —
+    // the same config-driven gate a direct one-time booking passes at create.
+    await this.trainSchedulingService.assertBookingWindowOpen({
+      originYardId: booking.originYardId ?? null,
+      destinationYardId: booking.destinationYardId ?? null,
+      scheduledDate: dto.scheduledDate,
+      direction: contract.tradeDirection ?? null,
+    });
+
+    const freightType = contract.freightType;
+    const hasCargo =
+      (booking.bookingContainers?.length ?? 0) > 0 ||
+      Number(booking.cargoTotalWeightVgm) > 0;
+    const warnings: string[] = [];
+
+    // First completion persists cargo and draws contract capacity; a resubmit
+    // after OPERATION_CHANGES_REQUESTED already has its cargo and only re-picks
+    // the shipment day.
+    if (!hasCargo) {
+      await this.assertWithinQuantityCap(contract, dto);
+      if (freightType === 'CONTAINER') {
+        await this.assertWithinMaxCapacity(contract, dto);
+        await this.assert20ftPairableAtCreate(dto);
+        // A container number may appear once per train (same day + route).
+        await this.assertContainerNumbersAvailable(
+          dto,
+          {
+            originYardId: booking.originYardId,
+            destinationYardId: booking.destinationYardId,
+          },
+          booking.id,
+        );
+        await this.persistContainers(booking.id, contract, dto);
+      }
+      await this.bookingsRepository.update(booking.id, {
+        cargoTypeId: this.resolveCargoTypeId(contract, dto),
+        cargoTotalWeightVgm: this.resolveBulkTons(dto),
+        ...(dto.equipmentReturn ? { equipmentReturn: dto.equipmentReturn } : {}),
+      } as never);
+
+      const loaded = await this.bookingsRepository.findByIdWithFiles(booking.id);
+      if (loaded) {
+        if (freightType === 'CONTAINER') {
+          await this.applyWeightResults(loaded);
+        }
+        const computed = await this.bookingPricingService.computePriceForBooking(loaded);
+        // A zero price means no contract rate matches — roll the cargo back so
+        // the instance stays CLEARANCE_READY and can be completed again once
+        // the contract rates are fixed (the clearance work is not lost).
+        if (!(computed.totalAmount > 0)) {
+          await this.bookingsRepository.deleteContainers(booking.id);
+          await this.bookingsRepository.update(booking.id, {
+            cargoTotalWeightVgm: 0,
+          } as never);
+          throw new BadRequestException(
+            'Booking price came out as 0 — no contract rate matches this ' +
+              'route/cargo. Set the contract rate and try again.',
+          );
+        }
+        await this.bookingsRepository.update(booking.id, {
+          totalAmount: computed.totalAmount,
+          priorityScore: computed.priorityScore,
+          pricingBreakdown: {
+            lineItems: computed.lineItems,
+            totalAmount: computed.totalAmount,
+            currency: computed.currency,
+            generatedAt: new Date().toISOString(),
+          },
+        } as never);
+        await this.bookingPricingService.createPricingSnapshots(
+          booking.id,
+          computed.usedRates,
+          computed.appliedModifiers,
+        );
+        warnings.push(...computed.warnings);
+      }
+
+      // Wagon consolidation gate — a partial-wagon 20ft set parks for a partner
+      // exactly like a drawdown created with cargo does. The shipment day is
+      // stored first so the pairing event can resume straight into the
+      // operations queue.
+      const withContainers = await this.bookingsRepository.findByIdWithFiles(booking.id);
+      if (
+        withContainers &&
+        freightType === 'CONTAINER' &&
+        (await this.consolidationService.needsConsolidationFromBooking(withContainers))
+      ) {
+        await this.bookingsRepository.update(booking.id, {
+          scheduledDate: new Date(dto.scheduledDate),
+        } as never);
+        const parked = await this.consolidateDrawdown(
+          withContainers,
+          'OPERATION_REQUEST_PENDING',
+        );
+        warnings.push(parked.message);
+        if (!parked.paired) {
+          await this.maybeCompleteContract(contract);
+          const pendingResult = await this.bookingsRepository.findByIdWithFiles(booking.id);
+          return { booking: pendingResult ?? booking, warnings };
+        }
+      }
+
+      // Invoice the now-priced booking and, for a customs instance, seed the
+      // post-booking milestones (pre-booking ones exist since initiation —
+      // ensure* fills only what is missing). Idempotent, non-blocking.
+      const generalCustoms =
+        contract.contractKind === 'GENERAL' &&
+        Boolean(contract.customsClearingEnabled);
+      await this.finalizeContractBooking(booking.id, contract, generalCustoms);
+      await this.maybeCompleteContract(contract);
+    } else if (freightType === 'CONTAINER') {
+      // Resubmit only re-picks the shipment day — the persisted container
+      // numbers must be free on the newly chosen train day too.
+      await this.assertPersistedContainersAvailable(booking, dto.scheduledDate);
+    }
+
+    // Binding day + open-departure validation, status OPERATION_REQUEST_PENDING
+    // and the staff notification — the exact machine a one-time booking uses.
+    const completed = await this.bookingTransitionService.requestOperation(
+      booking.id,
+      dto.scheduledDate,
+    );
+    return { booking: completed, warnings };
+  }
+
   /**
    * Search for a complementary partner for a parked-eligible drawdown, pair it or
    * park it in PENDING_CONSOLIDATION with the resume status it should return to.
@@ -380,12 +755,11 @@ export class ContractBookingService {
         clearanceStatus: 'ACTIVE_SHIPMENT_IN_PROGRESS',
       } as never);
     } else if (generalCustoms) {
-      // Per-booking clearance: seed full milestone timeline on the booking.
-      await this.milestoneService.seedPreBookingMilestonesOnBooking(
-        bookingId,
-        contract.tradeDirection,
-      );
-      await this.milestoneService.seedPostBookingMilestones(
+      // Per-booking clearance: seed the full milestone timeline on the booking.
+      // ensure* skips codes that already exist — an initiated instance carries
+      // its pre-booking milestones from initiation, and a consolidation pairing
+      // replay must not duplicate the timeline.
+      await this.milestoneService.ensureBookingMilestones(
         bookingId,
         contract.tradeDirection,
       );
@@ -606,6 +980,44 @@ export class ContractBookingService {
     });
   }
 
+  /**
+   * Complete the contract once its quantity cap is fully consumed. Runs after
+   * every booking created under a GENERAL contract (including a split remainder
+   * being rebooked): when no capped scope line has capacity left, the contract
+   * moves to CONTRACT_CLOSED even though its validity window is still open —
+   * blocking further bookings and shipment requests, including inside an open
+   * booking window. Never throws: a status hiccup must not undo the booking
+   * that was just created.
+   */
+  private async maybeCompleteContract(contract: Contract): Promise<void> {
+    try {
+      // ONE_TIME contracts are governed by the single-active-booking slot (and
+      // are promoted to GENERAL on split), so only GENERAL completes by cap.
+      if (contract.contractKind !== 'GENERAL') return;
+      if (!['CONTRACT_ACTIVE', 'FULLY_EXECUTED'].includes(contract.status)) return;
+      const capacity = await this.computeCapacity(contract);
+      if (capacity.length === 0) return; // uncapped — completes only by expiry
+      // 0.001 tolerance absorbs bulk-ton float rounding (split weights round to
+      // 3 decimals); container caps are integers and unaffected.
+      const exhausted = capacity.every(
+        (c) => c.remaining != null && c.remaining <= 0.001,
+      );
+      if (!exhausted) return;
+      await this.contractsRepository.update(contract.id, {
+        status: 'CONTRACT_CLOSED',
+      } as never);
+      this.logger.log(
+        `Contract ${contract.reference} quantity cap fully booked — completed; no further bookings within validity.`,
+      );
+    } catch (err) {
+      this.logger.error(
+        `Could not evaluate completion for contract ${contract.id}: ${
+          err instanceof Error ? err.message : String(err)
+        }`,
+      );
+    }
+  }
+
   /**
    * Quantities already booked under a contract that still hold capacity. Excludes
    * bookings that never shipped (CANCELLED / REJECTED / EXPIRED).
@@ -951,6 +1363,131 @@ export class ContractBookingService {
    * balanced onto wagons (pair diff over the global cap). Same rule the
    * shipment-form preview reports as `pairingErrors`, enforced server-side.
    */
+  /**
+   * A physical container rides one train only. Reject the submission when a
+   * container number is entered twice in the same booking (the portal checks
+   * this client-side, the API must not trust it) or already sits on another
+   * customer's active booking for the same train — same shipment day AND same
+   * route (origin/destination yards).
+   */
+  private async assertContainerNumbersAvailable(
+    dto: CreateBookingUnderContractDto,
+    route: { originYardId?: string | null; destinationYardId?: string | null },
+    excludeBookingId?: string,
+  ): Promise<void> {
+    const numbers = (dto.containers ?? []).flatMap((line) =>
+      (line.units ?? [])
+        .map((u) => (u.containerNumber ?? '').trim().toUpperCase())
+        .filter((n) => n.length > 0),
+    );
+    if (!numbers.length) return;
+
+    const seen = new Set<string>();
+    const withinBooking = new Set<string>();
+    for (const n of numbers) {
+      if (seen.has(n)) withinBooking.add(n);
+      seen.add(n);
+    }
+    if (withinBooking.size) {
+      throw new BadRequestException(
+        `Duplicate container number(s) in this booking: ${[...withinBooking].join(', ')} — each container can only be entered once.`,
+      );
+    }
+
+    // Intercity bookings have no shipment day yet — nothing to clash with.
+    if (!dto.scheduledDate) return;
+
+    await this.assertNumbersFreeOnTrain(
+      numbers,
+      dto.scheduledDate,
+      route,
+      excludeBookingId,
+    );
+  }
+
+  /**
+   * Same train guard for a booking whose containers are already persisted
+   * (resubmit after OPERATION_CHANGES_REQUESTED only re-picks the day): its
+   * stored numbers must be free on the newly chosen day for its route.
+   */
+  private async assertPersistedContainersAvailable(
+    booking: Booking,
+    scheduledDate: string,
+  ): Promise<void> {
+    const rows: Array<{ containerNumber: string }> = await this.dataSource
+      .getRepository(BookingContainerUnit)
+      .createQueryBuilder('unit')
+      .innerJoin(BookingContainer, 'line', 'line.id = unit.booking_container_id')
+      .select('unit.container_number', 'containerNumber')
+      .where('line.booking_id = :bookingId', { bookingId: booking.id })
+      .getRawMany();
+    const numbers = rows.map((r) => r.containerNumber).filter(Boolean);
+    if (!numbers.length) return;
+    await this.assertNumbersFreeOnTrain(
+      numbers,
+      scheduledDate,
+      {
+        originYardId: booking.originYardId,
+        destinationYardId: booking.destinationYardId,
+      },
+      booking.id,
+    );
+  }
+
+  /**
+   * Reject when any of `numbers` sits on another active booking of the same
+   * train — same day and same route. Bookings without route yards (legacy
+   * rows) are matched on the day alone rather than let through.
+   */
+  private async assertNumbersFreeOnTrain(
+    numbers: string[],
+    scheduledDate: string,
+    route: { originYardId?: string | null; destinationYardId?: string | null },
+    excludeBookingId?: string,
+  ): Promise<void> {
+    const qb = this.dataSource
+      .getRepository(BookingContainerUnit)
+      .createQueryBuilder('unit')
+      .innerJoin(BookingContainer, 'line', 'line.id = unit.booking_container_id')
+      .innerJoin(Booking, 'b', 'b.id = line.booking_id')
+      .select('unit.container_number', 'containerNumber')
+      .addSelect('b.reference', 'reference')
+      .where('unit.container_number IN (:...numbers)', { numbers })
+      .andWhere('b.scheduled_date::date = :day::date', { day: scheduledDate })
+      .andWhere('b.status NOT IN (:...terminal)', {
+        terminal: TERMINAL_BOOKING_STATUSES,
+      })
+      .andWhere('b.deleted_at IS NULL');
+    if (route.originYardId && route.destinationYardId) {
+      // Same train = same day + same corridor. A clashing booking whose yards
+      // were never denormalized still blocks (NULL yards match any route).
+      qb.andWhere(
+        '(b.origin_yard_id IS NULL OR b.origin_yard_id = :originYardId)',
+        { originYardId: route.originYardId },
+      ).andWhere(
+        '(b.destination_yard_id IS NULL OR b.destination_yard_id = :destinationYardId)',
+        { destinationYardId: route.destinationYardId },
+      );
+    }
+    if (excludeBookingId) {
+      qb.andWhere('b.id != :excludeBookingId', { excludeBookingId });
+    }
+    const clashes: Array<{ containerNumber: string; reference: string }> =
+      await qb.getRawMany();
+
+    if (clashes.length) {
+      const detail = [
+        ...new Map(clashes.map((c) => [c.containerNumber, c])).values(),
+      ]
+        .map((c) => `${c.containerNumber} (booking ${c.reference})`)
+        .join(', ');
+      throw new ConflictException(
+        `Container(s) already booked on this route for ${scheduledDate}: ${detail}. ` +
+          'A container can only be on one booking per train — remove it or pick another shipment day.',
+      );
+    }
+  }
+
   private async assert20ftPairableAtCreate(
     dto: CreateBookingUnderContractDto,
   ): Promise<void> {
diff --git a/apps/edr-freight-api/src/modules/contracts/contract-transition.service.ts b/apps/edr-freight-api/src/modules/contracts/contract-transition.service.ts
index 5b0db20cb..4da2677bd 100644
--- a/apps/edr-freight-api/src/modules/contracts/contract-transition.service.ts
+++ b/apps/edr-freight-api/src/modules/contracts/contract-transition.service.ts
@@ -350,6 +350,17 @@ export class ContractTransitionService {
     const updated = await this.contractsService.findById(contractId);
     if (allDone) {
       this.notifier.approved(updated);
+      // Final approval step also generates the contract document from the
+      // template matching the contract's direction/freight pair. Best-effort:
+      // a rendering hiccup must not roll back the approval — the document can
+      // still be generated manually or lazily on view/download.
+      try {
+        return await this.generateContract(contractId);
+      } catch (err) {
+        this.logger.warn(
+          `Auto contract generation after final approval failed for ${updated.reference}: ${err}`,
+        );
+      }
     }
     return updated;
   }
diff --git a/apps/edr-freight-api/src/modules/contracts/contracts.controller.ts b/apps/edr-freight-api/src/modules/contracts/contracts.controller.ts
index 4ea7634b6..95b734c60 100644
--- a/apps/edr-freight-api/src/modules/contracts/contracts.controller.ts
+++ b/apps/edr-freight-api/src/modules/contracts/contracts.controller.ts
@@ -107,7 +107,7 @@ export class ContractsController {
 
   @Get('booking-requests/queue')
   @BookingStaff(FREIGHT_PERMS.contracts.createBooking)
-  @ApiOperation({ summary: 'GL queue: pending shipment requests across contracts' })
+  @ApiOperation({ summary: 'GL queue: shipment requests across contracts (all statuses, newest first)' })
   bookingRequestQueue() {
     return this.bookingRequestService.queue();
   }
@@ -799,6 +799,45 @@ export class ContractsController {
     );
   }
 
+  @Post(':id/bookings/initiate')
+  @ApiOperation({
+    summary:
+      'Initiate a bare booking instance under a GENERAL non-customs contract — no cargo, no date; enters per-booking clearance (AWAITING_DOCUMENTS).',
+  })
+  initiateBooking(
+    @Param('id', ParseUUIDPipe) id: string,
+    @Body() dto: CreateBookingUnderContractDto,
+    @CurrentUser() user: AuthUserPayload,
+  ) {
+    return this.contractBookingService.initiateUnderContract(
+      id,
+      { contractRouteId: dto?.contractRouteId },
+      { id: user?.id ?? user?.sub },
+      user,
+    );
+  }
+
+  @Post(':id/bookings/:bookingId/complete')
+  @ApiOperation({
+    summary:
+      'Complete an initiated booking after Operations finalized its clearance — cargo + binding day, window and departure checks, pricing and invoicing.',
+  })
+  completeBooking(
+    @Param('id', ParseUUIDPipe) id: string,
+    @Param('bookingId', ParseUUIDPipe) bookingId: string,
+    @Body() dto: CreateBookingUnderContractDto,
+    @CurrentUser() user: AuthUserPayload,
+  ) {
+    // Customs (Path B) instances may only be completed by GL Ethiopia — the
+    // service checks the actor's contracts:create_booking permission.
+    return this.contractBookingService.completeUnderContract(
+      id,
+      bookingId,
+      dto,
+      user,
+    );
+  }
+
   @Post(':id/validate-shipment')
   @ApiOperation({
     summary:
diff --git a/apps/edr-freight-api/src/modules/contracts/contracts.module.ts b/apps/edr-freight-api/src/modules/contracts/contracts.module.ts
index 33a547a9f..96bdf22b1 100644
--- a/apps/edr-freight-api/src/modules/contracts/contracts.module.ts
+++ b/apps/edr-freight-api/src/modules/contracts/contracts.module.ts
@@ -16,6 +16,7 @@ import { NotificationsModule } from '../notifications/notifications.module';
 import { NotificationInboxModule } from '../notification-inbox/notification-inbox.module';
 import { BookingsModule } from '../bookings/bookings.module';
 import { TrainSchedulingModule } from '../train-scheduling/train-scheduling.module';
+import { ContractTemplatesModule } from '../contract-templates/contract-templates.module';
 
 import { ContractsController } from './contracts.controller';
 import { ContractsService } from './contracts.service';
@@ -81,6 +82,9 @@ import { ContractDocumentViewModelBuilder } from '../../contracts/contract-docum
     NotificationsModule,
     NotificationInboxModule,
     CompaniesModule,
+    // Provides the admin-editable contract document templates consumed by
+    // ContractDocumentViewModelBuilder when rendering contract PDFs.
+    ContractTemplatesModule,
     // BookingsModule provides BookingsRepository/BookingPricingService used by the
     // contract PDF builders (they read a Booking today — see docs/new-doc.md §3.3).
     forwardRef(() => BookingsModule),
diff --git a/apps/edr-freight-api/src/modules/contracts/contracts.service.ts b/apps/edr-freight-api/src/modules/contracts/contracts.service.ts
index 095857959..517d818bf 100644
--- a/apps/edr-freight-api/src/modules/contracts/contracts.service.ts
+++ b/apps/edr-freight-api/src/modules/contracts/contracts.service.ts
@@ -265,10 +265,11 @@ export class ContractsService {
       }
     }
 
-    // Attach the company profile's onboarding / business-license documents to the
-    // contract by reference. The separate "Documents" intake step was removed —
-    // the profile documents are simply carried onto every contract automatically.
-    await this.attachProfileDocuments(contract.id, companyProfileId);
+    // Attach the company's onboarding documents (TIN, licenses, IDs) and the
+    // profile's business-license documents to the contract by reference. The
+    // separate "Documents" intake step was removed — the profile documents are
+    // simply carried onto every contract automatically.
+    await this.attachProfileDocuments(contract.id, companyId ?? null, companyProfileId);
 
     return { contract: await this.findById(contract.id), warnings };
   }
@@ -316,51 +317,95 @@ export class ContractsService {
   }
 
   /**
-   * Copy a company profile's stored business-license / onboarding documents onto
-   * a contract by reference (no byte re-upload). Codes are slugged from each
-   * document name so they group under "Profile documents" on the contract detail
-   * page. No-op when the contract has no profile or the profile has no documents.
+   * Copy the company's onboarding documents (TIN certificate, commercial /
+   * investment license, national ID, passport — resource "companies", coded by
+   * the upload-setting fileKey) and the company profile's business-license
+   * documents (resource "company_profiles") onto a contract by reference (no
+   * byte re-upload). Idempotent: codes already present on the contract — user
+   * uploads or an earlier carry — are never duplicated or overwritten, so it is
+   * safe to run on every create and update. No-op when there is nothing to copy.
    */
   private async attachProfileDocuments(
     contractId: string,
+    companyId: string | null,
     companyProfileId: string | null,
   ): Promise<void> {
-    if (!companyProfileId) return;
-    // Business-license files are FileRecords (resource "company_profiles"); carry
-    // the live ones by reference. Staged/pending uploads are excluded by code.
-    const records = await this.filesService.findByResource(
-      companyProfileId,
-      'company_profiles',
+    if (!companyId && !companyProfileId) return;
+
+    const existingCodes = new Set(
+      (await this.filesService.findByResource(contractId, 'contracts')).map(
+        (r) => r.code,
+      ),
     );
-    const docs = records
-      .filter((r) => r.code === 'business_license')
-      .map((r) => ({
-        name: r.name,
-        url: r.url,
-        size: r.size,
-        mimeType: r.mimeType,
-      }));
+    const docs: Array<{
+      code: string;
+      name: string;
+      url: string;
+      size: number;
+      mimeType?: string;
+    }> = [];
+
+    if (companyId) {
+      // Company onboarding documents keep their fileKey codes (tin_certificate,
+      // commercial_license, …) so the portal can match them against the
+      // onboarding upload-setting fields. Re-uploads append rows, so keep only
+      // the newest record per code.
+      const companyRecords = await this.filesService.findByResource(
+        companyId,
+        'companies',
+      );
+      const latestByCode = new Map<string, (typeof companyRecords)[number]>();
+      for (const r of companyRecords) {
+        const prev = latestByCode.get(r.code);
+        if (!prev || r.createdAt > prev.createdAt) latestByCode.set(r.code, r);
+      }
+      for (const r of latestByCode.values()) {
+        if (existingCodes.has(r.code)) continue;
+        docs.push({
+          code: r.code,
+          name: r.name,
+          url: r.url,
+          size: r.size,
+          mimeType: r.mimeType,
+        });
+      }
+    }
+
+    if (companyProfileId) {
+      // Business-license files are FileRecords (resource "company_profiles");
+      // carry the live ones by reference. Staged/pending uploads are excluded by
+      // code. Codes are slugged from each document name so they group under
+      // "Profile documents" on the contract detail page.
+      const records = await this.filesService.findByResource(
+        companyProfileId,
+        'company_profiles',
+      );
+      const slug = (name: string) =>
+        name
+          .toLowerCase()
+          .replace(/\.[a-z0-9]+$/, '')
+          .replace(/[^a-z0-9]+/g, '_')
+          .replace(/^_+|_+$/g, '') || 'profile_document';
+
+      records
+        .filter((r) => r.code === 'business_license')
+        .forEach((r, i) => {
+          const code = `${slug(r.name)}_${i + 1}`;
+          if (existingCodes.has(code)) return;
+          docs.push({
+            code,
+            name: r.name,
+            url: r.url,
+            size: r.size,
+            mimeType: r.mimeType,
+          });
+        });
+    }
+
     if (docs.length === 0) return;
 
-    const slug = (name: string) =>
-      name
-        .toLowerCase()
-        .replace(/\.[a-z0-9]+$/, '')
-        .replace(/[^a-z0-9]+/g, '_')
-        .replace(/^_+|_+$/g, '') || 'profile_document';
-
     try {
-      await this.filesService.attachExistingFiles(
-        contractId,
-        'contracts',
-        docs.map((d, i) => ({
-          code: `${slug(d.name)}_${i + 1}`,
-          name: d.name,
-          url: d.url,
-          size: d.size,
-          mimeType: d.mimeType,
-        })),
-      );
+      await this.filesService.attachExistingFiles(contractId, 'contracts', docs);
     } catch {
       // Non-fatal — the contract is still valid without the carried documents.
     }
@@ -481,6 +526,15 @@ export class ContractsService {
       await this.filesService.uploadMany(id, 'contracts', files);
     }
 
+    // Re-carry any company/profile document that is still missing from the
+    // contract (runs after the upload so fresh replacements keep their slot).
+    // Backfills contracts created before profile documents were carried over.
+    await this.attachProfileDocuments(
+      id,
+      existing.companyId ?? null,
+      existing.companyProfileId ?? null,
+    );
+
     return { contract: await this.findById(id), warnings };
   }
 
diff --git a/apps/edr-freight-api/src/modules/contracts/dto/create-booking-under-contract.dto.ts b/apps/edr-freight-api/src/modules/contracts/dto/create-booking-under-contract.dto.ts
index f220cae0d..870817365 100644
--- a/apps/edr-freight-api/src/modules/contracts/dto/create-booking-under-contract.dto.ts
+++ b/apps/edr-freight-api/src/modules/contracts/dto/create-booking-under-contract.dto.ts
@@ -4,6 +4,7 @@ import {
   IsArray,
   IsBoolean,
   IsDateString,
+  IsIn,
   IsInt,
   IsNumber,
   IsOptional,
@@ -14,6 +15,9 @@ import {
   ValidateNested,
 } from 'class-validator';
 
+/** Per-shipment equipment return — "NA" stays contract-level only. */
+const SHIPMENT_EQUIPMENT_RETURNS = ['WITH_RETURN', 'WITHOUT_RETURN'] as const;
+
 /** One physical container under a booking line — entered at booking time. */
 export class CreateContainerUnitDto {
   @ApiProperty({ description: 'ISO 6346 container number, e.g. ABCD1234567' })
@@ -134,6 +138,15 @@ export class CreateBookingUnderContractDto {
   @IsDateString()
   scheduledDate?: string;
 
+  @ApiPropertyOptional({
+    enum: SHIPMENT_EQUIPMENT_RETURNS,
+    description:
+      'Per-shipment equipment return override; omitted → the contract default applies.',
+  })
+  @IsOptional()
+  @IsIn([...SHIPMENT_EQUIPMENT_RETURNS])
+  equipmentReturn?: string;
+
   @ApiPropertyOptional({ type: [CreateBookingContainerLineDto] })
   @IsOptional()
   @IsArray()
diff --git a/apps/edr-freight-api/src/modules/gps-tracking/gps-tracking.module.ts b/apps/edr-freight-api/src/modules/gps-tracking/gps-tracking.module.ts
index da527fff0..860c51f4f 100644
--- a/apps/edr-freight-api/src/modules/gps-tracking/gps-tracking.module.ts
+++ b/apps/edr-freight-api/src/modules/gps-tracking/gps-tracking.module.ts
@@ -6,12 +6,15 @@ import { GpsPosition } from './entities/gps-position.entity';
 import { GpsDeviceRepository, GpsPositionRepository } from './gps-tracking.repository';
 import { GpsTrackingService } from './gps-tracking.service';
 import { GpsTrackingController } from './gps-tracking.controller';
-import { Gt06Server } from './gt06/gt06.server';
 
+// NOTE: the GT06 TCP listener now lives in the standalone @edr/gps-tracker app.
+// This module is REST-only — it reads gps_devices / gps_positions that the
+// tracker app writes to the shared DB. Do not re-add Gt06Server here, or two
+// processes would fight for the tracker socket.
 @Module({
   imports: [TypeOrmModule.forFeature([GpsDevice, GpsPosition])],
   controllers: [GpsTrackingController],
-  providers: [GpsDeviceRepository, GpsPositionRepository, GpsTrackingService, Gt06Server],
+  providers: [GpsDeviceRepository, GpsPositionRepository, GpsTrackingService],
   exports: [GpsTrackingService],
 })
 export class GpsTrackingModule {}
diff --git a/apps/edr-freight-api/src/modules/notification-inbox/notification-inbox.module.ts b/apps/edr-freight-api/src/modules/notification-inbox/notification-inbox.module.ts
index 4981a9486..d30ebe3a9 100644
--- a/apps/edr-freight-api/src/modules/notification-inbox/notification-inbox.module.ts
+++ b/apps/edr-freight-api/src/modules/notification-inbox/notification-inbox.module.ts
@@ -1,4 +1,4 @@
-import { Module } from "@nestjs/common";
+import { Module, forwardRef } from "@nestjs/common";
 import { TypeOrmModule } from "@nestjs/typeorm";
 import { Session } from "@tria-plc/iamapi-common/entities/iam/user/session.entity";
 import { User } from "@tria-plc/iamapi-common/entities/iam/user/user.entity";
@@ -17,8 +17,9 @@ import { WsAuthService } from "./ws-auth.service";
 @Module({
   imports: [
     TypeOrmModule.forFeature([Notification, User, Session]),
-    // ExternalProfileRepository + CompanyProfileRepository (portal targeting)
-    CompaniesModule,
+    // ExternalProfileRepository + CompanyProfileRepository (portal targeting).
+    // CompaniesModule imports this module back for CompanyNotifierService.
+    forwardRef(() => CompaniesModule),
     // BackofficeService.getOrganizationEmployees (staff targeting)
     BackofficeModule,
     // EmailClientService + SmsClientService (HIGH-priority fan-out)
diff --git a/apps/edr-freight-api/src/modules/routes/entities/route.entity.ts b/apps/edr-freight-api/src/modules/routes/entities/route.entity.ts
index 23399bb4d..238129a1d 100644
--- a/apps/edr-freight-api/src/modules/routes/entities/route.entity.ts
+++ b/apps/edr-freight-api/src/modules/routes/entities/route.entity.ts
@@ -43,11 +43,26 @@ export class Route extends BaseEntity {
  * Human-readable route label: yard names, not yard codes — "Addis Ababa → Dire Dawa",
  * not "ADDIS_ABABA → DIRE_DAWA". A yard's display name is its `label`; `code` is the
  * machine identifier and is only a fallback for a yard missing one.
+ *
+ * When the route's milestones are loaded (with their yards), the label is the FULL
+ * ordered corridor — "Addis Ababa → Adama → Dire Dawa" — since milestones already
+ * include the origin (first) and destination (last). Without milestones it falls
+ * back to origin → destination.
  */
 export function formatRouteLabel(route: {
   originYard?: { code?: string; label?: string } | null;
   destinationYard?: { code?: string; label?: string } | null;
+  milestones?: Array<{
+    sequenceNo: number;
+    yard?: { code?: string; label?: string } | null;
+  }> | null;
 }): string {
+  const stops = [...(route.milestones ?? [])]
+    .sort((a, b) => a.sequenceNo - b.sequenceNo)
+    .map((m) => m.yard?.label ?? m.yard?.code)
+    .filter((name): name is string => Boolean(name));
+  if (stops.length >= 2) return stops.join(' → ');
+
   const origin = route.originYard?.label ?? route.originYard?.code ?? 'Origin';
   const dest = route.destinationYard?.label ?? route.destinationYard?.code ?? 'Destination';
   return `${origin} → ${dest}`;
diff --git a/apps/edr-freight-api/src/modules/train-schedules/train-schedules.repository.ts b/apps/edr-freight-api/src/modules/train-schedules/train-schedules.repository.ts
index a64faabbe..6a8aced53 100644
--- a/apps/edr-freight-api/src/modules/train-schedules/train-schedules.repository.ts
+++ b/apps/edr-freight-api/src/modules/train-schedules/train-schedules.repository.ts
@@ -23,8 +23,9 @@ export class TrainSchedulesRepository extends BaseRepository<TrainSchedule> {
       where: { id },
       relations: {
         // Yards carry the route's display name; without them formatRouteLabel
-        // degrades to the literal "Origin → Destination".
-        route: { originYard: true, destinationYard: true },
+        // degrades to the literal "Origin → Destination". Milestones (with
+        // their yards) give it the full corridor path.
+        route: { originYard: true, destinationYard: true, milestones: { yard: true } },
         trainSet: {
           locomotive: true,
           locomotives: { locomotive: true },
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/booking-batch.service.spec.ts b/apps/edr-freight-api/src/modules/train-scheduling/booking-batch.service.spec.ts
index a20ef600d..a87b22c3e 100644
--- a/apps/edr-freight-api/src/modules/train-scheduling/booking-batch.service.spec.ts
+++ b/apps/edr-freight-api/src/modules/train-scheduling/booking-batch.service.spec.ts
@@ -136,6 +136,7 @@ describe('BookingBatchService — PAID reconcile', () => {
         expirePayable: jest.fn().mockResolvedValue(undefined),
       } as never,
       { emitPhase: jest.fn() } as never,
+      { computeSubmitPriorityScore: jest.fn().mockResolvedValue(0) } as never,
     );
   });
 
@@ -563,6 +564,7 @@ describe('BookingBatchService — PAID reconcile', () => {
         trainSchedulingService as never,
         { syncPayableDueDate: jest.fn(), expirePayable: jest.fn() } as never,
         { emitPhase: jest.fn() } as never,
+        { computeSubmitPriorityScore: jest.fn().mockResolvedValue(0) } as never,
         undefined,
         { findOpenOffer: jest.fn() } as never,
       );
@@ -585,6 +587,7 @@ describe('BookingBatchService — PAID reconcile', () => {
         trainSchedulingService as never,
         { syncPayableDueDate: jest.fn(), expirePayable: jest.fn() } as never,
         { emitPhase: jest.fn() } as never,
+        { computeSubmitPriorityScore: jest.fn().mockResolvedValue(0) } as never,
         undefined,
         { findOpenOffer: jest.fn() } as never,
       );
@@ -615,6 +618,7 @@ describe('BookingBatchService — PAID reconcile', () => {
         trainSchedulingService as never,
         { syncPayableDueDate: jest.fn(), expirePayable: jest.fn() } as never,
         { emitPhase: jest.fn() } as never,
+        { computeSubmitPriorityScore: jest.fn().mockResolvedValue(0) } as never,
         undefined,
         { findOpenOffer: jest.fn() } as never,
       );
@@ -696,6 +700,16 @@ describe('BookingBatchService — PAID reconcile', () => {
       bookingsRepository.findBatchPoolByCorridorDay
         .mockResolvedValueOnce([waiting])
         .mockResolvedValue([]);
+      // expire()'s paid-guard and reserve()'s idempotency guard both re-read the
+      // booking fresh — answer with the matching row, not the paidBooking default
+      // (which would make the guard rescue-allocate the lapsed reservation).
+      const byId: Record<string, Booking> = { lapsed, waiting };
+      dataSource
+        .getRepository()
+        .findOne.mockImplementation(
+          async (opts: { where?: { id?: string } }) =>
+            byId[opts?.where?.id ?? ''] ?? null,
+        );
 
       await service.settleDueReservations(trainId);
 
@@ -721,6 +735,14 @@ describe('BookingBatchService — PAID reconcile', () => {
         return Promise.resolve(reads === 1 ? [lapsed] : []);
       });
       bookingsRepository.findBatchPoolByCorridorDay.mockResolvedValue([]);
+      // expire()'s paid-guard re-reads the booking fresh — answer with the
+      // (unpaid) lapsed row, not the paidBooking default.
+      dataSource
+        .getRepository()
+        .findOne.mockImplementation(
+          async (opts: { where?: { id?: string } }) =>
+            opts?.where?.id === 'lapsed' ? lapsed : null,
+        );
 
       await Promise.all([
         service.settleDueReservations(trainId),
@@ -729,6 +751,37 @@ describe('BookingBatchService — PAID reconcile', () => {
 
       expect(notifier.expired).toHaveBeenCalledTimes(1);
     });
+
+    it('never expires a reservation whose payment landed — allocates it instead', async () => {
+      const latePaid = booking('late-paid', 50, {
+        status: 'SELECTED_FOR_BATCH',
+        paymentDeadline: new Date(Date.now() - 60_000),
+      });
+      bookingsRepository.findReservedForSchedule
+        .mockResolvedValueOnce([latePaid])
+        .mockResolvedValue([]);
+      bookingsRepository.findBatchPoolByCorridorDay.mockResolvedValue([]);
+      // The payment webhook flipped paymentStatus between the settle's list
+      // read and expire()'s fresh re-read — the deadline had already passed.
+      dataSource
+        .getRepository()
+        .findOne.mockImplementation(
+          async (opts: { where?: { id?: string } }) =>
+            opts?.where?.id === 'late-paid'
+              ? { ...latePaid, paymentStatus: 'PAID' }
+              : null,
+        );
+
+      await service.settleDueReservations(trainId);
+
+      // Money was taken → the booking boards. Never expired.
+      expect(notifier.expired).not.toHaveBeenCalled();
+      expect(notifier.secured).toHaveBeenCalledTimes(1);
+      expect(trainScheduleBookingsRepository.createMany).toHaveBeenCalledWith(
+        [{ trainScheduleId: trainId, bookingId: 'late-paid' }],
+        expect.anything(),
+      );
+    });
   });
 });
 
@@ -745,14 +798,21 @@ describe('BookingBatchService — wagonsFor', () => {
     null as never,
     null as never,
     null as never,
+    null as never,
   ) as unknown as {
     wagonsFor(booking: unknown, dims: unknown): number;
+    needFor(booking: unknown, dims: unknown): {
+      wagons: number;
+      weightTons: number;
+      lengthMeters: number;
+    };
   };
 
   // PW2 box wagon: 70T rated payload, 25.2T tare, 17.066m.
   const dims = {
     container: { lengthMeters: 13.966, tareWeightTons: 22.4, capacityTons: 70 },
     bulk: { lengthMeters: 17.066, tareWeightTons: 25.2, capacityTons: 70 },
+    byWagonTypeId: new Map(),
   };
 
   const bulk = (cargoTons: number, over: Record<string, unknown> = {}) => ({
@@ -780,6 +840,13 @@ describe('BookingBatchService — wagonsFor', () => {
     expect(service.wagonsFor(bulk(2590, { wagonsRequired: 40 }), dims)).toBe(40);
   });
 
+  it('ignores a stale undersized wagonsRequired: 700T of sugar rides 10 wagons, not 1', () => {
+    // Rows written while sumWagonsRequired hardcoded BULK to 1 are still in the
+    // DB; trusting them charged one tare for the whole consist (700 + 25.2
+    // instead of 700 + 10 × 25.2 gross).
+    expect(service.wagonsFor(bulk(700, { wagonsRequired: 1 }), dims)).toBe(10);
+  });
+
   it('takes the binding axis for containers: weight can exceed TEU geometry', () => {
     // Two 40ft units => 2 wagons by TEU geometry, but 210T needs 3 at 70T each.
     const booking = {
@@ -803,4 +870,49 @@ describe('BookingBatchService — wagonsFor', () => {
     };
     expect(service.wagonsFor(booking, dims)).toBe(2);
   });
+
+  describe('per-booking wagon type (cargo/container type FK)', () => {
+    // The booking's cargo type rides PW2 (25.2T tare / 70T), but the
+    // representative bulk fallback is a CW3-ish 23.4T tare. Measuring the
+    // booking on the fallback under-charged its gross (2100 + 30 × 23.4 =
+    // 2802 instead of 2856), so the fill loop admitted sets that allocation's
+    // real-consist check later rejected — after the customer had paid.
+    const dimsWithTypes = {
+      container: { lengthMeters: 13.966, tareWeightTons: 22.4, capacityTons: 70 },
+      bulk: { lengthMeters: 17.066, tareWeightTons: 23.4, capacityTons: 70 },
+      byWagonTypeId: new Map([
+        ['pw2-id', { lengthMeters: 17.066, tareWeightTons: 25.2, capacityTons: 70 }],
+      ]),
+    };
+
+    it('charges a bulk booking the tare of ITS wagon type, not the representative', () => {
+      const booking = bulk(2100, { cargoType: { wagonTypeId: 'pw2-id' } });
+      const need = service.needFor(booking, dimsWithTypes);
+      expect(need.wagons).toBe(30);
+      expect(need.weightTons).toBe(2856); // 2100 + 30 × 25.2 — matches allocation
+    });
+
+    it('falls back to the representative dims when no wagon type is configured', () => {
+      const need = service.needFor(bulk(2100), dimsWithTypes);
+      expect(need.weightTons).toBe(2802); // 2100 + 30 × 23.4 (legacy behavior)
+    });
+
+    it('resolves a container booking through its container type', () => {
+      const booking = {
+        freightType: 'CONTAINER',
+        cargoTotalWeightVgm: 140,
+        bookingContainers: [
+          {
+            quantity: 2,
+            wagonsRequired: 2,
+            containerType: { wagonsPerUnit: 1, sizeFt: 40, wagonTypeId: 'pw2-id' },
+          },
+        ],
+      };
+      const need = service.needFor(booking, dimsWithTypes);
+      expect(need.wagons).toBe(2);
+      expect(need.weightTons).toBe(190.4); // 140 + 2 × 25.2
+      expect(need.lengthMeters).toBeCloseTo(34.132, 3); // 2 × 17.066, not NW5's 13.966
+    });
+  });
 });
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/booking-batch.service.ts b/apps/edr-freight-api/src/modules/train-scheduling/booking-batch.service.ts
index 93227f3ab..cda6de85f 100644
--- a/apps/edr-freight-api/src/modules/train-scheduling/booking-batch.service.ts
+++ b/apps/edr-freight-api/src/modules/train-scheduling/booking-batch.service.ts
@@ -1,6 +1,8 @@
 import {
   BadRequestException,
   ConflictException,
+  forwardRef,
+  Inject,
   Injectable,
   Logger,
   NotFoundException,
@@ -9,10 +11,19 @@ import {
 } from '@nestjs/common';
 import { InjectDataSource } from '@nestjs/typeorm';
 import { SchedulerRegistry } from '@nestjs/schedule';
-import { DataSource, In } from 'typeorm';
+import {
+  Between,
+  DataSource,
+  FindOptionsWhere,
+  ILike,
+  In,
+  LessThanOrEqual,
+  MoreThanOrEqual,
+} from 'typeorm';
 
 import { Booking } from '../bookings/entities/booking.entity';
 import { BookingsRepository } from '../bookings/bookings.repository';
+import { BookingPricingService } from '../bookings/booking-pricing.service';
 import { Locomotive } from '../locomotives/entities/locomotive.entity';
 import { formatRouteLabel } from '../routes/entities/route.entity';
 import { RouteMilestone } from '../routes/entities/route-milestone.entity';
@@ -20,10 +31,13 @@ import { TrainSchedule } from '../train-schedules/entities/train-schedule.entity
 import { TrainScheduleBooking } from '../train-schedules/entities/train-schedule-booking.entity';
 import { TrainSchedulesRepository } from '../train-schedules/train-schedules.repository';
 import { TrainScheduleBookingsRepository } from '../train-schedules/train-schedule-bookings.repository';
-import { TrainSchedulingGlobalRules } from './entities/train-scheduling-global-rules.entity';
 import { BookingNotifierService } from './booking-notifier.service';
 import { TrainSchedulingService } from './train-scheduling.service';
 import { eatDay, groupBookingsIntoBoardWindows } from './batch-window.util';
+import {
+  BATCH_BOARD_STATUSES,
+  BatchBoardQueryDto,
+} from './dto/batch-board-query.dto';
 import { Freight, TrainScheduleStatus as TrainScheduleStatusEnum } from "@edr/types";
 import { BillingService } from "../billing/billing.service";
 
@@ -40,8 +54,8 @@ import {
 import {
   WagonTypeDimensions,
   bookingGrossWeightTons,
-  bookingTrainLengthMeters,
   deriveTrainCapacityFromLocomotive,
+  sizePartialOfferWagons,
   trainHardCaps,
   wagonTypeDimensionsFromEntity,
 } from './train-capacity.util';
@@ -57,11 +71,18 @@ import {
   Capacity,
   CorridorBudget,
   CorridorLeg,
+  OverageTolerance,
   stopYardsFor,
 } from './corridor-capacity.util';
 
 export type { Capacity } from './corridor-capacity.util';
 
+/**
+ * A train's fill limits: the base caps the corridor budget spends from, plus
+ * the locomotive overage tolerance spendable only on whole-booking admission.
+ */
+type TrainLimits = { base: Capacity; tolerance: OverageTolerance };
+
 /** A day-level pool key: all trains on this route departing on this EAT day. */
 interface RouteDayGroup {
   originYardId: string;
@@ -70,13 +91,20 @@ interface RouteDayGroup {
   day: string;
 }
 
+/** One wagon type's footprint: its length on the train, the tare it adds to the
+ * locomotive's gross load, and the payload it carries. */
+type PerWagonDims = { lengthMeters: number; tareWeightTons: number; capacityTons: number };
+
 /**
- * Per-freight-type wagon dimensions used to size a booking's capacity draw:
- * its length on the train and the tare it adds to the locomotive's gross load.
+ * Wagon dimensions used to size a booking's capacity draw. `byWagonTypeId` holds
+ * every wagon type so a booking is measured on the type its cargo/container type
+ * actually rides (the same FK resolution allocation uses); `container`/`bulk` are
+ * representative fallbacks for bookings whose type has no wagon type configured.
  */
 type WagonDims = {
-  container: { lengthMeters: number; tareWeightTons: number; capacityTons: number };
-  bulk: { lengthMeters: number; tareWeightTons: number; capacityTons: number };
+  container: PerWagonDims;
+  bulk: PerWagonDims;
+  byWagonTypeId: Map<string, PerWagonDims>;
 };
 
 export type BatchBoardBookingState =
@@ -141,6 +169,8 @@ export interface BatchWindowGroup {
 
 export interface BatchBoardScheduleDetail {
   scheduleId: string;
+  /** Human-facing schedule reference (S-YYYY-NNNNN). */
+  scheduleReference: string | null;
   trainNumber: string | null;
   routeName: string | null;
   origin: string | null;
@@ -165,11 +195,14 @@ export interface BatchBoardScheduleDetail {
 
 export interface BatchBoardSchedule {
   scheduleId: string;
+  /** Human-facing schedule reference (S-YYYY-NNNNN). */
+  scheduleReference: string | null;
   trainNumber: string | null;
   routeName: string | null;
   origin: string | null;
   destination: string | null;
   scheduleDate: string | null;
+  createdAt: string | null;
   status: string;
   bookingWindowStatus: string;
   direction: string | null;
@@ -208,6 +241,16 @@ export interface BatchBoardSchedule {
   bookings: BatchBoardBooking[];
 }
 
+/** Paginated batch-board list. `items` (not `data`) — the API response wrapper
+ * already uses `data`, and the frontend's unwrap() strips one `data` level. */
+export interface BatchBoardListResponse {
+  items: BatchBoardSchedule[];
+  total: number;
+  page: number;
+  pageSize: number;
+  totalPages: number;
+}
+
 /**
  * Demand-batching engine: every 3h (EAT) it ranks each OPEN schedule's ready pool
  * by priority, greedily fills the train to capacity (skipping bookings that don't fit),
@@ -239,6 +282,8 @@ export class BookingBatchService implements OnModuleInit {
     private readonly trainSchedulingService: TrainSchedulingService,
     private readonly billing: BillingService,
     private readonly bookingWindowGateway: BookingWindowGateway,
+    @Inject(forwardRef(() => BookingPricingService))
+    private readonly pricingService: BookingPricingService,
 
     @Optional() private readonly milestoneService?: ClearanceMilestoneService,
     @Optional() private readonly splitService?: BookingSplitService,
@@ -383,7 +428,19 @@ export class BookingBatchService implements OnModuleInit {
       where: { id: bookingId },
       relations: { company: true },
     });
-    if (!booking?.trainScheduleId) return;
+    if (!booking) return;
+    if (!booking.trainScheduleId) {
+      // A paid booking with no train is money taken and nothing boarding —
+      // scream so staff pin it to a schedule manually (batch board / assign).
+      if (booking.paymentStatus === "PAID" || booking.status === "PAID") {
+        this.logger.error(
+          `PAID booking ${booking.reference ?? bookingId} has no train_schedule_id — ` +
+            `its reservation was likely expired before the payment landed. ` +
+            `Assign it to a schedule manually from the batch board.`,
+        );
+      }
+      return;
+    }
 
     const isBatchPaid =
       booking.status === "SELECTED_FOR_BATCH" ||
@@ -435,7 +492,7 @@ export class BookingBatchService implements OnModuleInit {
     const schedule = await this.trainSchedulesRepository.findByIdWithFullGraph(
       booking.trainScheduleId,
     );
-    if (schedule && (await this.remainingWagons(schedule)) <= 0) {
+    if (schedule && (await this.isTrainFull(schedule))) {
       await this.setWindow(booking.trainScheduleId, "FULL");
     }
 
@@ -522,7 +579,6 @@ export class BookingBatchService implements OnModuleInit {
       );
     }
 
-    const rules = await this.loadGlobalRules();
     const wagonDims = await this.loadWagonDims();
     const required = need ?? this.needFor(booking, wagonDims);
     let corridorMatched = false;
@@ -532,7 +588,7 @@ export class BookingBatchService implements OnModuleInit {
       );
       const locomotive = schedule?.trainSet?.locomotive;
       if (!schedule || !locomotive) continue;
-      const limits = await this.capacityLimits(locomotive, rules);
+      const limits = await this.capacityLimits(locomotive);
       const budget = await this.remainingBudget(schedule, limits, wagonDims);
       const leg = budget.legOf(booking.originYardId, booking.destinationYardId);
       if (!leg) continue; // this train's route doesn't carry the booking's leg
@@ -565,7 +621,14 @@ export class BookingBatchService implements OnModuleInit {
 
     const partner = await this.dataSource
       .getRepository(Booking)
-      .findOne({ where: { id: partnerId }, relations: { company: true, bookingContainers: true } });
+      .findOne({
+        where: { id: partnerId },
+        relations: {
+          company: true,
+          bookingContainers: { containerType: true },
+          cargoType: true,
+        },
+      });
     // Partner not yet accepted → this booking is now FULLY_EXECUTED and simply
     // waits; the partner's later accept will reserve the pair.
     if (!partner || partner.status !== 'FULLY_EXECUTED') {
@@ -586,7 +649,7 @@ export class BookingBatchService implements OnModuleInit {
     this.armSettle(scheduleId);
     const schedule =
       await this.trainSchedulesRepository.findByIdWithFullGraph(scheduleId);
-    if (schedule && (await this.remainingWagons(schedule)) <= 0) {
+    if (schedule && (await this.isTrainFull(schedule))) {
       await this.setWindow(scheduleId, 'FULL');
     }
   }
@@ -627,33 +690,88 @@ export class BookingBatchService implements OnModuleInit {
   // ---- monitoring board -----------------------------------------------------
 
   /**
-   * Read model for the batch monitoring page: every still-relevant schedule (not arrived/
-   * cancelled) with its locomotive, capacity usage and its bookings grouped by lifecycle
-   * state (allocated / awaiting payment / paid-waiting / pending contract / expired).
+   * Read model for the batch monitoring page: every import schedule — including
+   * dispatched, arrived and cancelled history — with its locomotive, capacity
+   * usage and its bookings grouped by lifecycle state (allocated / awaiting
+   * payment / paid-waiting / pending contract / expired). Paginated and
+   * filterable; per-schedule booking summaries are only computed for the
+   * requested page.
    */
-  async getBatchBoard(): Promise<BatchBoardSchedule[]> {
-    const schedules = await this.trainSchedulesRepository.findAll({
+  async getBatchBoard(
+    query: BatchBoardQueryDto = {},
+  ): Promise<BatchBoardListResponse> {
+    const page = query.page ?? 1;
+    const pageSize = query.pageSize ?? 12;
+
+    // Status filter: any subset of the lifecycle. Omitted = all statuses, so
+    // arrived / cancelled / dispatched schedules stay visible as history.
+    const allowedStatuses = new Set<string>(BATCH_BOARD_STATUSES);
+    const statuses = (query.statuses ?? "")
+      .split(",")
+      .map((v) => v.trim().toUpperCase())
+      .filter((v) => allowedStatuses.has(v));
+
+    const dateRange = (from?: string, to?: string) => {
+      const f = from ? new Date(from) : null;
+      const t = to ? new Date(to) : null;
+      if (f && t) return Between(f, t);
+      if (f) return MoreThanOrEqual(f);
+      if (t) return LessThanOrEqual(t);
+      return undefined;
+    };
+
+    // Batch board is IMPORT-only: export is FCFS with no batch/priority calc,
+    // and domestic/legacy schedules run the legacy fill, not the window batch.
+    const base: FindOptionsWhere<TrainSchedule> = { direction: "IMPORT" };
+    if (statuses.length) base.status = In(statuses) as never;
+    if (query.bookingWindowStatus) {
+      base.bookingWindowStatus = query.bookingWindowStatus;
+    }
+    const departure = dateRange(query.departureFrom, query.departureTo);
+    if (departure) base.scheduledDepartureDate = departure as never;
+    const created = dateRange(query.createdFrom, query.createdTo);
+    if (created) base.createdAt = created as never;
+
+    // Search fans out across every human-recognizable label. Each OR variant
+    // repeats the base filters so the search never widens them.
+    const term = query.search?.trim();
+    let where: FindOptionsWhere<TrainSchedule> | FindOptionsWhere<TrainSchedule>[] =
+      base;
+    if (term) {
+      const like = ILike(`%${term}%`);
+      where = [
+        { ...base, trainNumber: like as never },
+        { ...base, originStation: { label: like } },
+        { ...base, destinationStation: { label: like } },
+        { ...base, route: { originYard: { label: like } } },
+        { ...base, route: { destinationYard: { label: like } } },
+        { ...base, trainSet: { locomotive: { code: like } } },
+      ] as FindOptionsWhere<TrainSchedule>[];
+    }
+
+    const sortBy = query.sortBy ?? "createdAt";
+    const sortOrder = query.sortOrder ?? "DESC";
+
+    const [schedules, total] = await this.trainSchedulesRepository.findAndCount({
+      where,
       relations: {
         trainSet: { locomotive: true },
         originStation: true,
         destinationStation: true,
-        // Yards supply the route's display name for `routeName` below.
-        route: { originYard: true, destinationYard: true },
+        // Yards supply the route's display name for `routeName` below;
+        // milestones (with yards) give it the full corridor path.
+        route: { originYard: true, destinationYard: true, milestones: { yard: true } },
       },
-      order: { scheduledDepartureDate: "ASC" },
+      order: { [sortBy]: sortOrder } as never,
+      skip: (page - 1) * pageSize,
+      take: pageSize,
     });
 
     const wagonDims = await this.loadWagonDims();
-    const rules = await this.loadGlobalRules();
     const linkRepo = this.dataSource.getRepository(TrainScheduleBooking);
 
     const board: BatchBoardSchedule[] = [];
     for (const s of schedules) {
-      if (s.status === "ARRIVED" || s.status === "CANCELLED") continue;
-      // Batch board is IMPORT-only: export is FCFS with no batch/priority calc,
-      // and domestic/legacy schedules run the legacy fill, not the window batch.
-      if (s.direction !== "IMPORT") continue;
-
       const links = await linkRepo.find({ where: { trainScheduleId: s.id } });
       const linkedIds = new Set(links.map((l) => l.bookingId));
       const bookings = await this.bookingsRepository.findAllBySchedule(s.id);
@@ -679,9 +797,16 @@ export class BookingBatchService implements OnModuleInit {
         };
       });
 
-      board.push(this.buildScheduleSummary(s, items, rules));
+      board.push(this.buildScheduleSummary(s, items));
     }
-    return board;
+
+    return {
+      items: board,
+      total,
+      page,
+      pageSize,
+      totalPages: Math.max(1, Math.ceil(total / pageSize)),
+    };
   }
 
   /** Schedule-level batch board with EAT 3h windows grouped by fullyExecutedAt. */
@@ -692,9 +817,8 @@ export class BookingBatchService implements OnModuleInit {
       await this.trainSchedulesRepository.findByIdWithFullGraph(scheduleId);
     if (!s)
       throw new NotFoundException(`Train schedule ${scheduleId} not found`);
-    if (s.status === "ARRIVED" || s.status === "CANCELLED") {
-      throw new BadRequestException("Schedule is no longer active");
-    }
+    // Arrived / cancelled schedules stay viewable — the board is also the
+    // historical record of what each train carried.
     // Batch board is IMPORT-only (export is FCFS, no batch/priority calc).
     if (s.direction !== "IMPORT") {
       throw new BadRequestException(
@@ -703,7 +827,6 @@ export class BookingBatchService implements OnModuleInit {
     }
 
     const wagonDims = await this.loadWagonDims();
-    const rules = await this.loadGlobalRules();
     const linkRepo = this.dataSource.getRepository(TrainScheduleBooking);
     const links = await linkRepo.find({ where: { trainScheduleId: s.id } });
     const linkedIds = new Set(links.map((l) => l.bookingId));
@@ -869,6 +992,7 @@ export class BookingBatchService implements OnModuleInit {
 
     return {
       scheduleId: s.id,
+      scheduleReference: s.reference ?? null,
       trainNumber: s.trainNumber ?? null,
       routeName: s.route ? formatRouteLabel(s.route) : null,
       origin: s.originStation?.label ?? s.originStation?.code ?? null,
@@ -896,7 +1020,7 @@ export class BookingBatchService implements OnModuleInit {
           maxTrainLengthMeters: Number(loco.maxTrainLengthMeters),
         }
         : null,
-      capacity: this.computeBoardCapacity(items, loco, s.maxWagons ?? null, rules),
+      capacity: this.computeBoardCapacity(items, loco, s.maxWagons ?? null),
       counts: {
         allocated: items.filter((i) => i.state === "ALLOCATED").length,
         selectedForBatch: items.filter((i) => i.state === "SELECTED_FOR_BATCH")
@@ -930,9 +1054,10 @@ export class BookingBatchService implements OnModuleInit {
   /**
    * Board capacity figures. `usedWeightTons` is GROSS (each item's weight already
    * includes the tare of the wagons it occupies), so the ceiling it is measured
-   * against must be the same one the fill loop spends from: the locomotive floored
-   * by the global rule caps and widened by its overage tolerance. Reading the raw
-   * `loco.maxPullWeightTons` here showed staff a ceiling the batch engine did not use.
+   * against must be the same one the fill loop spends from: the locomotive's own
+   * limits widened by its overage tolerance (global rule caps do not apply, same
+   * as {@link capacityLimits}). Reading the raw `loco.maxPullWeightTons` here
+   * showed staff a ceiling the batch engine did not use.
    */
   private computeBoardCapacity(
     items: Array<{
@@ -943,29 +1068,18 @@ export class BookingBatchService implements OnModuleInit {
     }>,
     loco: Locomotive | null,
     maxWagons: number | null,
-    rules: TrainSchedulingGlobalRules | null,
   ): BatchBoardSchedule["capacity"] {
     const allocated = items.filter((i) => i.state === "ALLOCATED");
     const committed = items.filter(
       (i) => i.state === "ALLOCATED" || i.state === "SELECTED_FOR_BATCH",
     );
     const caps = loco
-      ? trainHardCaps(
-          {
-            maxPullWeightTons: Number(loco.maxPullWeightTons),
-            maxTrainLengthMeters: Number(loco.maxTrainLengthMeters),
-            overageToleranceTons: Number(loco.overageToleranceTons) || 0,
-            overageToleranceMeters: Number(loco.overageToleranceMeters) || 0,
-          },
-          {
-            maxTrainWeightTons: rules?.maxTrainWeightTons
-              ? Number(rules.maxTrainWeightTons)
-              : undefined,
-            maxTrainLengthMeters: rules?.maxTrainLengthMeters
-              ? Number(rules.maxTrainLengthMeters)
-              : undefined,
-          },
-        )
+      ? trainHardCaps({
+          maxPullWeightTons: Number(loco.maxPullWeightTons),
+          maxTrainLengthMeters: Number(loco.maxTrainLengthMeters),
+          overageToleranceTons: Number(loco.overageToleranceTons) || 0,
+          overageToleranceMeters: Number(loco.overageToleranceMeters) || 0,
+        })
       : null;
     const round2 = (value: number) => Math.round(value * 100) / 100;
 
@@ -984,12 +1098,12 @@ export class BookingBatchService implements OnModuleInit {
   private buildScheduleSummary(
     s: TrainSchedule,
     items: BatchBoardBooking[],
-    rules: TrainSchedulingGlobalRules | null,
   ): BatchBoardSchedule {
     const loco = s.trainSet?.locomotive ?? null;
 
     return {
       scheduleId: s.id,
+      scheduleReference: s.reference ?? null,
       trainNumber: s.trainNumber ?? null,
       routeName: s.route ? formatRouteLabel(s.route) : null,
       origin: s.originStation?.label ?? s.originStation?.code ?? null,
@@ -998,6 +1112,7 @@ export class BookingBatchService implements OnModuleInit {
       scheduleDate: s.scheduledDepartureDate
         ? s.scheduledDepartureDate.toISOString()
         : null,
+      createdAt: s.createdAt ? s.createdAt.toISOString() : null,
       status: s.status,
       bookingWindowStatus: s.bookingWindowStatus,
       direction: s.direction ?? null,
@@ -1017,7 +1132,7 @@ export class BookingBatchService implements OnModuleInit {
           maxTrainLengthMeters: Number(loco.maxTrainLengthMeters),
         }
         : null,
-      capacity: this.computeBoardCapacity(items, loco, s.maxWagons ?? null, rules),
+      capacity: this.computeBoardCapacity(items, loco, s.maxWagons ?? null),
       counts: {
         allocated: items.filter((i) => i.state === "ALLOCATED").length,
         selectedForBatch: items.filter((i) => i.state === "SELECTED_FOR_BATCH")
@@ -1086,17 +1201,21 @@ export class BookingBatchService implements OnModuleInit {
       return 0;
     }
 
-    const rules = await this.loadGlobalRules();
     const wagonDims = await this.loadWagonDims();
-    const limits = await this.capacityLimits(locomotive, rules);
-    await this.syncScheduleMaxWagons(schedule, locomotive, rules);
+    const limits = await this.capacityLimits(locomotive);
+    await this.syncScheduleMaxWagons(schedule, locomotive);
     const budget = await this.remainingBudget(schedule, limits, wagonDims);
-    if (budget.maxRemaining().wagons <= 0) {
+    const minPerWagon = this.minPerWagonNeed(wagonDims);
+    if (budget.isExhausted(minPerWagon)) {
       await this.setWindow(scheduleId, "FULL");
       return 0;
     }
 
     const pool = await this.bookingsRepository.findBatchPool(scheduleId);
+    // Same bulk re-score as fillRouteDayInternal — the legacy per-schedule fill
+    // must rank bulk bookings by their wagon-derived priority too.
+    await this.recomputeBulkPriorities(pool, wagonDims);
+    this.resortPoolByPriority(pool);
     const units = this.groupConsolidatedPool(pool);
     let armed = false;
     let reservedThisPass = 0;
@@ -1183,7 +1302,7 @@ export class BookingBatchService implements OnModuleInit {
     this.logger.log(
       `[fillSchedule ${scheduleId}] reserved ${reservedThisPass}/${units.length} unit(s) this pass`,
     );
-    if (budget.maxRemaining().wagons <= 0) await this.setWindow(scheduleId, "FULL");
+    if (budget.isExhausted(minPerWagon)) await this.setWindow(scheduleId, "FULL");
     if (armed) this.armSettle(scheduleId);
     void this.triggerWagonAllocation(scheduleId);
     return commercialReserved;
@@ -1283,7 +1402,6 @@ export class BookingBatchService implements OnModuleInit {
       return { scheduleIds: [], commercialReserved: 0 };
     }
 
-    const rules = await this.loadGlobalRules();
     const wagonDims = await this.loadWagonDims();
 
     // Live per-schedule corridor budget + arm flag, in departure order.
@@ -1298,8 +1416,8 @@ export class BookingBatchService implements OnModuleInit {
         );
         continue;
       }
-      const limits = await this.capacityLimits(locomotive, rules);
-      await this.syncScheduleMaxWagons(schedule, locomotive, rules);
+      const limits = await this.capacityLimits(locomotive);
+      await this.syncScheduleMaxWagons(schedule, locomotive);
       const budget = await this.remainingBudget(schedule, limits, wagonDims);
       trains.push({ id, budget, armed: false });
     }
@@ -1314,6 +1432,10 @@ export class BookingBatchService implements OnModuleInit {
       corridorYards,
       day,
     );
+    // BULK bookings only get their real (wagon-derived) priority score now, at
+    // batch time — stamp it and re-rank before the fill consumes the pool.
+    await this.recomputeBulkPriorities(pool, wagonDims);
+    this.resortPoolByPriority(pool);
     // Consolidated partners collapse into one atomic unit (both-or-neither); a
     // consolidated booking whose partner isn't ready this cycle is skipped.
     const units = this.groupConsolidatedPool(pool);
@@ -1427,8 +1549,9 @@ export class BookingBatchService implements OnModuleInit {
       `[fillRouteDay ${originYardId}->${destinationYardId} ${day}] reserved ${reservedThisPass}/${units.length} unit(s) this pass`,
     );
 
+    const minPerWagon = this.minPerWagonNeed(wagonDims);
     for (const t of trains) {
-      if (t.budget.maxRemaining().wagons <= 0) await this.setWindow(t.id, "FULL");
+      if (t.budget.isExhausted(minPerWagon)) await this.setWindow(t.id, "FULL");
       if (t.armed) this.armSettle(t.id);
       void this.triggerWagonAllocation(t.id);
     }
@@ -1504,12 +1627,28 @@ export class BookingBatchService implements OnModuleInit {
     if (await this.splitService.findOpenOffer(booking.id)) return null;
 
     const wagonDims = await this.loadWagonDims();
-    const bulkCapacityTons = await this.loadBulkWagonCapacityTons();
+
+    // The wagon-slot axis alone under-constrains the offer. On a weight- or
+    // length-limited train (slots to spare, but e.g. only 798T of pull weight
+    // left) sizing by slots either produced an offer the fits() check below
+    // rejected, or — when the free slots exceeded the booking's own wagon
+    // count — sizeOffer refused outright, so a bulk booking on a weight-bound
+    // train was never offered a split at all. Size across all three axes,
+    // measured on the booking's REAL wagon type — the same one allocation
+    // validates against. Bulk splits ride FULL wagons only: the offer never
+    // part-loads its last wagon.
+    const perWagon = this.dimsFor(booking, wagonDims);
+    const partial = sizePartialOfferWagons(budget, need.wagons, perWagon, {
+      fullWagonsOnly: booking.freightType === "BULK",
+    });
+    if (!partial) return null;
+
     const sized = await this.splitService.sizeOffer(
       booking,
-      budget.wagons,
+      partial.wagons,
       need.wagons,
-      bulkCapacityTons,
+      perWagon.capacityTons,
+      partial.maxCargoTons,
     );
     if (!sized) return null;
 
@@ -1518,13 +1657,9 @@ export class BookingBatchService implements OnModuleInit {
       weightTons: bookingGrossWeightTons(
         sized.offeredWeightTons,
         sized.offeredWagons,
-        this.tareFor(booking.freightType, wagonDims),
-      ),
-      lengthMeters: bookingTrainLengthMeters(
-        booking.freightType,
-        sized.offeredWagons,
-        this.lengthsOf(wagonDims),
+        perWagon.tareWeightTons,
       ),
+      lengthMeters: sized.offeredWagons * perWagon.lengthMeters,
     };
     if (!this.fits(offeredNeed, budget)) return null;
 
@@ -1542,14 +1677,6 @@ export class BookingBatchService implements OnModuleInit {
     return offeredNeed;
   }
 
-  private async loadBulkWagonCapacityTons(): Promise<number> {
-    const cw3 = await this.dataSource
-      .getRepository(WagonType)
-      .findOne({ where: { code: "CW3" } });
-    const capacity = cw3 ? wagonTypeDimensionsFromEntity(cw3).capacityTons : 60;
-    return capacity > 0 ? capacity : 60;
-  }
-
   /**
    * Settle a schedule's reserved bookings. `expireUnpaidUnknownDeadline` decides
    * how to treat a reservation with no deadline (durable path: leave it; timeout
@@ -1745,7 +1872,7 @@ export class BookingBatchService implements OnModuleInit {
     const schedule = await this.trainSchedulesRepository.findByIdWithFullGraph(
       booking.trainScheduleId,
     );
-    if (schedule && (await this.remainingWagons(schedule)) <= 0) {
+    if (schedule && (await this.isTrainFull(schedule))) {
       await this.setWindow(booking.trainScheduleId, "FULL");
     }
     void this.triggerWagonAllocation(booking.trainScheduleId!);
@@ -1842,9 +1969,8 @@ export class BookingBatchService implements OnModuleInit {
       await this.trainSchedulesRepository.findByIdWithFullGraph(scheduleId);
     const locomotive = schedule?.trainSet?.locomotive;
     if (!schedule || !locomotive) return null;
-    const rules = await this.loadGlobalRules();
     const wagonDims = await this.loadWagonDims();
-    const limits = await this.capacityLimits(locomotive, rules);
+    const limits = await this.capacityLimits(locomotive);
     const budget = await this.remainingBudget(schedule, limits, wagonDims);
     return { budget, needFor: (booking) => this.needFor(booking, wagonDims) };
   }
@@ -2010,8 +2136,38 @@ export class BookingBatchService implements OnModuleInit {
    * Expire an unpaid reservation and free its capacity. With day-level pooling we
    * also clear `trainScheduleId` so the booking is no longer pinned to the train
    * it failed to pay for — it's back in the day pool for staff to act on.
+   * `reason` picks the customer message: 'payment' (pay window lapsed) or
+   * 'no-capacity' (no train on the chosen day could take the booking).
+   *
+   * PAID GUARD: a booking whose payment has landed is never expired — money was
+   * taken, so it boards, even when the webhook arrived after the deadline or the
+   * settle read a stale row. It allocates onto the train it was selected for; if
+   * the wagon planner then finds no physical wagon, the booking stays linked and
+   * staff assign wagons manually. Consolidated bookings are exempt from the
+   * rescue: the shared wagon is both-or-neither, and settleReserved owns that
+   * pair decision.
    */
-  private async expire(booking: Booking): Promise<void> {
+  private async expire(
+    booking: Booking,
+    reason: "payment" | "no-capacity" = "payment",
+  ): Promise<void> {
+    if (!booking.consolidationPartnerId) {
+      const fresh = await this.dataSource
+        .getRepository(Booking)
+        .findOne({ where: { id: booking.id }, relations: { company: true } });
+      const paid =
+        fresh != null &&
+        (fresh.paymentStatus === "PAID" || fresh.status === "PAID");
+      const paidScheduleId = fresh?.trainScheduleId ?? booking.trainScheduleId;
+      if (paid && paidScheduleId) {
+        this.logger.log(
+          `[BATCH] expire skipped for ${booking.reference} — payment already ` +
+            `landed; allocating on schedule ${paidScheduleId} instead`,
+        );
+        await this.allocate(paidScheduleId, fresh, "paid");
+        return;
+      }
+    }
     const freedScheduleId = booking.trainScheduleId;
     await this.bookingsRepository.update(booking.id, {
       trainScheduleId: null,
@@ -2032,13 +2188,84 @@ export class BookingBatchService implements OnModuleInit {
     // (emits `booking.invoice.expired`). Domain owns the reaction; billing stays
     // source-agnostic.
     await this.billing.expirePayable(Freight.InvoiceSource.Booking, booking.id, "PREPAID");
-    this.notifier.expired(booking);
+    if (reason === "no-capacity") {
+      this.notifier.expiredNoCapacity(booking);
+    } else {
+      this.notifier.expired(booking);
+    }
     this.logger.log(
-      `[BATCH] EXPIRED ${booking.reference} — payment window passed; freed its ` +
-        `wagons back to the pool for top-up`,
+      `[BATCH] EXPIRED ${booking.reference} — ` +
+        (reason === "no-capacity"
+          ? "no train on its day had capacity left"
+          : "payment window passed; freed its wagons back to the pool for top-up"),
     );
   }
 
+  /**
+   * End-of-day sweep: once a schedule's window cycle concludes and NO other
+   * train on the same route-day can still run a cycle, the waiting pool for
+   * that day is dead — a FULLY_EXECUTED booking left in it would wait forever.
+   * Expire every leftover commercial booking and tell the customers to rebook
+   * another day. Government bookings are never auto-expired (they preempt).
+   * Returns how many bookings were expired.
+   */
+  async expireLeftoverDayPool(scheduleId: string): Promise<number> {
+    const schedule = await this.trainSchedulesRepository.findById(scheduleId);
+    if (!schedule?.scheduledDepartureDate) return 0;
+    const day = eatDay(schedule.scheduledDepartureDate);
+    const group: RouteDayGroup = {
+      originYardId: schedule.originStationId,
+      destinationYardId: schedule.destinationStationId,
+      day,
+    };
+
+    // Another train on this route-day that can still take bookings keeps the
+    // pool alive — when IT concludes, its own sweep runs this check again.
+    const siblings = await this.trainSchedulesRepository.findAll({
+      where: [
+        {
+          originStationId: group.originYardId,
+          destinationStationId: group.destinationYardId,
+          status: TrainScheduleStatusEnum.Draft,
+        },
+        {
+          originStationId: group.originYardId,
+          destinationStationId: group.destinationYardId,
+          status: TrainScheduleStatusEnum.Scheduled,
+        },
+      ],
+    });
+    const anotherTrainStillOpen = siblings.some(
+      (s) =>
+        s.id !== schedule.id &&
+        s.scheduledDepartureDate != null &&
+        eatDay(s.scheduledDepartureDate) === day &&
+        s.windowPhase !== "DONE" &&
+        s.bookingWindowStatus !== "FULL",
+    );
+    if (anotherTrainStillOpen) return 0;
+
+    const corridorYards = await this.corridorYardsForRouteDay(group);
+    const pool = corridorYards.length
+      ? await this.bookingsRepository.findBatchPoolByCorridorDay(corridorYards, day)
+      : await this.bookingsRepository.findBatchPoolByRouteDay(
+          group.originYardId,
+          group.destinationYardId,
+          day,
+        );
+    const leftovers = pool.filter((b) => !b.isGovernment);
+    for (const booking of leftovers) {
+      await this.expire(booking, "no-capacity");
+    }
+    if (leftovers.length) {
+      this.logger.log(
+        `[BATCH] ${this.groupLabel(group)}: no train left with capacity — ` +
+          `expired ${leftovers.length} waiting booking(s)`,
+      );
+    }
+    return leftovers.length;
+  }
+
   /**
    * Union of stop yards across the day's fillable schedules on this corridor —
    * the same pool scope fillRouteDay uses, so full-route AND sub-corridor bookings
@@ -2243,8 +2470,10 @@ export class BookingBatchService implements OnModuleInit {
 
     // Consolidation shares TEU slots, never rated payload: the pair still needs
     // enough wagons to carry its combined cargo, so the weight axis bounds the
-    // shared count exactly as it bounds an individual booking's.
-    const capacityTons = this.capacityFor(primary.freightType, wagonDims);
+    // shared count exactly as it bounds an individual booking's. A pair shares
+    // wagons, so the primary's wagon type stands for both partners.
+    const dims = this.dimsFor(primary, wagonDims);
+    const capacityTons = dims.capacityTons;
     const byWeight =
       cargoTons > 0 && capacityTons > 0 ? Math.ceil(cargoTons / capacityTons) : 0;
     const byLength =
@@ -2260,28 +2489,60 @@ export class BookingBatchService implements OnModuleInit {
       weightTons: bookingGrossWeightTons(
         cargoTons,
         sharedWagons,
-        this.tareFor(primary.freightType, wagonDims),
-      ),
-      lengthMeters: bookingTrainLengthMeters(
-        primary.freightType,
-        sharedWagons,
-        this.lengthsOf(wagonDims),
+        dims.tareWeightTons,
       ),
+      lengthMeters: sharedWagons * dims.lengthMeters,
     };
   }
 
-  /** Per-wagon tare for the wagon type this freight rides on. */
-  private tareFor(freightType: string | null | undefined, wagonDims: WagonDims): number {
-    return freightType === 'BULK'
-      ? wagonDims.bulk.tareWeightTons
-      : wagonDims.container.tareWeightTons;
+  /**
+   * Stamp real priority scores on the pool's BULK bookings before the batch
+   * ranks it. Submit-time scoring runs with totalWagons = 0 for bulk (a bulk
+   * booking has no container lines to carry a wagon count), so every
+   * wagon-range priority config missed and bulk import bookings entered the
+   * batch at score 0 — they were never prioritized. Their wagon footprint is
+   * derivable from tonnage vs. live wagon capacity (wagonsFor), so the score
+   * is computed here — when doc review closes and the batch runs — and
+   * persisted so the priority board shows the same ranking. The pool arrives
+   * SQL-ordered by the old scores; the caller must re-sort after this.
+   */
+  private async recomputeBulkPriorities(
+    pool: Booking[],
+    wagonDims: WagonDims,
+  ): Promise<void> {
+    for (const booking of pool) {
+      if (booking.freightType !== 'BULK') continue;
+      try {
+        const wagons = this.wagonsFor(booking, wagonDims);
+        const score = await this.pricingService.computeSubmitPriorityScore(
+          booking,
+          wagons,
+        );
+        if (Number(booking.priorityScore ?? 0) === score) continue;
+        await this.dataSource
+          .getRepository(Booking)
+          .update(booking.id, { priorityScore: score });
+        booking.priorityScore = score;
+      } catch (err) {
+        // A failed recompute keeps the stored score — never blocks the batch.
+        this.logger.warn(
+          `Bulk priority recompute failed for ${booking.reference ?? booking.id}: ` +
+            `${(err as Error).message}`,
+        );
+      }
+    }
   }
 
-  private lengthsOf(wagonDims: WagonDims): { container: number; bulk: number } {
-    return {
-      container: wagonDims.container.lengthMeters,
-      bulk: wagonDims.bulk.lengthMeters,
-    };
+  /** Restore the batch pool ordering (mirrors findBatchPool's ORDER BY) after scores changed. */
+  private resortPoolByPriority(pool: Booking[]): void {
+    pool.sort(
+      (a, b) =>
+        Number(b.isGovernment) - Number(a.isGovernment) ||
+        Number(b.priorityScore ?? 0) - Number(a.priorityScore ?? 0) ||
+        (a.fullyExecutedAt?.getTime() ?? Infinity) -
+          (b.fullyExecutedAt?.getTime() ?? Infinity) ||
+        a.createdAt.getTime() - b.createdAt.getTime(),
+    );
   }
 
   /**
@@ -2298,29 +2559,25 @@ export class BookingBatchService implements OnModuleInit {
    * That under-reported the board and let the fill loop overbook the train.
    */
   private wagonsFor(booking: Booking, wagonDims: WagonDims): number {
-    if (booking.wagonsRequired && booking.wagonsRequired > 0) {
-      return Math.ceil(booking.wagonsRequired);
-    }
+    // Stored wagonsRequired is a candidate, never an early return: rows written
+    // while sumWagonsRequired hardcoded BULK to 1 wagon are still in the DB, and
+    // trusting them charged one tare for a whole bulk consist (a 700T booking on
+    // 70T wagons read 700 + 1 tare instead of 700 + 10 tares).
+    const stored =
+      booking.wagonsRequired && booking.wagonsRequired > 0
+        ? Math.ceil(booking.wagonsRequired)
+        : 0;
 
     // TEU-aware: two 20ft share one wagon (wagonsPerUnit = 0.5). The old fallback
     // summed raw container QUANTITY, so 20×20ft counted as 20 wagons, not 10.
     const byLength = containerWagonsForLines(booking.bookingContainers ?? []);
 
-    const capacityTons = this.capacityFor(booking.freightType, wagonDims);
+    const capacityTons = this.dimsFor(booking, wagonDims).capacityTons;
     const cargoTons = Number(booking.cargoTotalWeightVgm ?? 0);
     const byWeight =
       cargoTons > 0 && capacityTons > 0 ? Math.ceil(cargoTons / capacityTons) : 0;
 
-    return Math.max(DEFAULT_WAGONS_PER_BOOKING, byLength, byWeight);
-  }
-
-  private capacityFor(
-    freightType: string | null | undefined,
-    wagonDims: WagonDims,
-  ): number {
-    return freightType === "BULK"
-      ? wagonDims.bulk.capacityTons
-      : wagonDims.container.capacityTons;
+    return Math.max(DEFAULT_WAGONS_PER_BOOKING, stored, byLength, byWeight);
   }
 
   /**
@@ -2333,18 +2590,15 @@ export class BookingBatchService implements OnModuleInit {
    */
   private needFor(booking: Booking, wagonDims: WagonDims): Capacity {
     const wagons = this.wagonsFor(booking, wagonDims);
+    const dims = this.dimsFor(booking, wagonDims);
     return {
       wagons,
       weightTons: bookingGrossWeightTons(
         Number(booking.cargoTotalWeightVgm ?? 0),
         wagons,
-        this.tareFor(booking.freightType, wagonDims),
-      ),
-      lengthMeters: bookingTrainLengthMeters(
-        booking.freightType,
-        wagons,
-        this.lengthsOf(wagonDims),
+        dims.tareWeightTons,
       ),
+      lengthMeters: wagons * dims.lengthMeters,
     };
   }
 
@@ -2357,14 +2611,17 @@ export class BookingBatchService implements OnModuleInit {
   }
 
   /**
-   * Hard caps for a schedule's train: gross pull weight, train length, and the
+   * Caps for a schedule's train: gross pull weight, train length, and the
    * length-derived wagon slot count (never a fixed 53). Bookings spend against
-   * these via {@link needFor}, whose weight axis is gross.
+   * `base` via {@link needFor}, whose weight axis is gross. The locomotive's
+   * overage tolerance is returned separately — the corridor budget spends it
+   * only to admit a booking whole, never to size a split.
+   *
+   * Limits come from the LOCOMOTIVE ALONE — the global-rules weight/length
+   * caps deliberately do not apply here (a mis-set global row once capped
+   * every train at 14m and no export booking could board).
    */
-  private async capacityLimits(
-    locomotive: Locomotive,
-    rules: TrainSchedulingGlobalRules | null,
-  ): Promise<Capacity> {
+  private async capacityLimits(locomotive: Locomotive): Promise<TrainLimits> {
     const wagonTypes = await this.loadWagonTypeDimensions();
     const derived = deriveTrainCapacityFromLocomotive(
       {
@@ -2374,34 +2631,37 @@ export class BookingBatchService implements OnModuleInit {
         overageToleranceMeters: Number(locomotive.overageToleranceMeters) || 0,
       },
       wagonTypes,
-      {
-        maxTrainWeightTons: rules?.maxTrainWeightTons
-          ? Number(rules.maxTrainWeightTons)
-          : undefined,
-        maxTrainLengthMeters: rules?.maxTrainLengthMeters
-          ? Number(rules.maxTrainLengthMeters)
-          : undefined,
-      },
     );
     return {
-      wagons: derived.maxWagonSlots,
-      weightTons: derived.maxWeightTons,
-      lengthMeters: derived.maxLengthMeters,
+      base: {
+        wagons: derived.maxWagonSlots,
+        weightTons: derived.baseWeightTons,
+        lengthMeters: derived.baseLengthMeters,
+      },
+      tolerance: {
+        weightTons: derived.toleranceTons,
+        lengthMeters: derived.toleranceMeters,
+      },
     };
   }
 
-  /** Keep schedule.max_wagons aligned with locomotive physical limits. */
+  /**
+   * Keep schedule.max_wagons aligned with the train's boarding limit: the
+   * locomotive's length-derived slot count. The physical wagons currently in
+   * the train set do NOT cap this — bookings are admitted on length/weight
+   * alone and yard staff attach the wagons manually before departure.
+   */
   private async syncScheduleMaxWagons(
     schedule: TrainSchedule,
     locomotive: Locomotive,
-    rules: TrainSchedulingGlobalRules | null,
   ): Promise<void> {
-    const limits = await this.capacityLimits(locomotive, rules);
-    if ((schedule.maxWagons ?? 0) !== limits.wagons) {
+    const limits = await this.capacityLimits(locomotive);
+    const maxWagons = limits.base.wagons;
+    if ((schedule.maxWagons ?? 0) !== maxWagons) {
       await this.dataSource
         .getRepository(TrainSchedule)
-        .update(schedule.id, { maxWagons: limits.wagons });
-      schedule.maxWagons = limits.wagons;
+        .update(schedule.id, { maxWagons });
+      schedule.maxWagons = maxWagons;
     }
   }
 
@@ -2428,14 +2688,20 @@ export class BookingBatchService implements OnModuleInit {
     ];
   }
 
-  /** Representative wagon per freight type: NW5 flat for containers, CW3 gondola for bulk. */
+  /**
+   * Every wagon type keyed by id (drives per-booking dims via the cargo/container
+   * type's wagon_type_id FK), plus representative fallbacks per freight type
+   * (NW5 flat for containers, CW3 gondola for bulk) for bookings whose type has
+   * no wagon type configured yet.
+   */
   private async loadWagonDims(): Promise<WagonDims> {
-    const types = await this.dataSource.getRepository(WagonType).find({
-      where: [{ code: "NW5" }, { code: "CW3" }],
-    });
+    const types = await this.dataSource.getRepository(WagonType).find();
     const byCode = new Map(
       types.map((t) => [t.code, wagonTypeDimensionsFromEntity(t)]),
     );
+    const byWagonTypeId = new Map(
+      types.map((t) => [t.id, wagonTypeDimensionsFromEntity(t)]),
+    );
     const nw5 = byCode.get("NW5");
     const cw3 = byCode.get("CW3");
     // capacityTons divides a bulk booking's cargo, so a 0 or missing rated payload
@@ -2453,13 +2719,34 @@ export class BookingBatchService implements OnModuleInit {
         tareWeightTons: cw3?.tareWeightTons ?? DEFAULT_BULK_WAGON_TARE_TONS,
         capacityTons: payload(cw3?.capacityTons, DEFAULT_BULK_WAGON_CAPACITY_TONS),
       },
+      byWagonTypeId,
     };
   }
 
-  private async loadGlobalRules(): Promise<TrainSchedulingGlobalRules | null> {
-    return this.dataSource
-      .getRepository(TrainSchedulingGlobalRules)
-      .findOne({ where: {} });
+  /**
+   * Dimensions of the wagon type THIS booking rides: bulk resolves through its
+   * cargo type's wagon_type_id, container through the first container line's
+   * type — the same FK resolution `resolveWagonType` applies when the paid
+   * booking is allocated. Board/fill math measured on a representative wagon
+   * while allocation validated the real one let a selected batch flunk the
+   * post-payment gross-weight check; sharing the resolution closes that gap.
+   * Falls back to the representative dims when the FK or relation is absent.
+   */
+  private dimsFor(booking: Booking, wagonDims: WagonDims): PerWagonDims {
+    const fallback =
+      booking.freightType === "BULK" ? wagonDims.bulk : wagonDims.container;
+    const wagonTypeId =
+      booking.freightType === "BULK"
+        ? booking.cargoType?.wagonTypeId
+        : (booking.bookingContainers ?? [])
+            .map((line) => line.containerType?.wagonTypeId)
+            .find((id): id is string => Boolean(id));
+    const dims = wagonTypeId ? wagonDims.byWagonTypeId.get(wagonTypeId) : undefined;
+    if (!dims) return fallback;
+    return {
+      ...dims,
+      capacityTons: dims.capacityTons > 0 ? dims.capacityTons : fallback.capacityTons,
+    };
   }
 
   /**
@@ -2485,14 +2772,19 @@ export class BookingBatchService implements OnModuleInit {
    * Remaining capacity per corridor edge = hard caps minus what allocated +
    * reserved bookings already use ON THEIR OWN LEGS. A booking riding only
    * Dire→Djibouti leaves the Addis→Dire edges untouched.
+   *
+   * The wagon axis is the locomotive's length-derived slot count only — the
+   * physical wagons currently marshalled in the train set do NOT cap it.
+   * Bookings are admitted on length/weight capacity and yard staff attach
+   * the missing wagons manually before wagon assignment.
    */
   private async remainingBudget(
     schedule: TrainSchedule,
-    limits: Capacity,
+    limits: TrainLimits,
     wagonDims: WagonDims,
   ): Promise<CorridorBudget> {
     const stops = await this.stopsForSchedule(schedule);
-    const budget = new CorridorBudget(stops, limits);
+    const budget = new CorridorBudget(stops, limits.base, limits.tolerance);
     const allocated = (schedule.scheduleBookings ?? [])
       .map((sb) => sb.booking)
       .filter((b): b is Booking => Boolean(b));
@@ -2510,16 +2802,21 @@ export class BookingBatchService implements OnModuleInit {
 
   /**
    * Wagon slots still boardable somewhere on the corridor (most-open edge).
-   * ≤ 0 means no leg can take another booking — the train-wide FULL signal.
+   * ≤ 0 means no leg can take another booking. Slot axis ONLY — the train-wide
+   * FULL signal is {@link isTrainFull}, which also closes weight/length-bound
+   * trains that still show free slots.
    */
   private async remainingWagons(schedule: TrainSchedule): Promise<number> {
     const wagonDims = await this.loadWagonDims();
     const budget = await this.remainingBudget(
       schedule,
       {
-        wagons: schedule.maxWagons ?? 0,
-        weightTons: Number.POSITIVE_INFINITY,
-        lengthMeters: Number.POSITIVE_INFINITY,
+        base: {
+          wagons: schedule.maxWagons ?? 0,
+          weightTons: Number.POSITIVE_INFINITY,
+          lengthMeters: Number.POSITIVE_INFINITY,
+        },
+        tolerance: { weightTons: 0, lengthMeters: 0 },
       },
       wagonDims,
     );
@@ -2572,12 +2869,51 @@ export class BookingBatchService implements OnModuleInit {
     );
   }
 
-  /** No wagon slots left for allocated + reserved bookings. */
+  /**
+   * FULL on ANY capacity axis: out of wagon slots, or out of pull weight /
+   * train length for even one more loaded wagon. The old slot-only check let
+   * a weight-bound train (PW2: weight binds at 37 wagons = 3522.4T of
+   * 3500+90T, slots bind at 44) cycle its booking window forever instead of
+   * finalizing — 7 phantom slots kept it "not full" while nothing could board.
+   */
   async isScheduleFull(scheduleId: string): Promise<boolean> {
     const schedule =
       await this.trainSchedulesRepository.findByIdWithFullGraph(scheduleId);
     if (!schedule) return false;
-    return (await this.remainingWagons(schedule)) <= 0;
+    return this.isTrainFull(schedule);
+  }
+
+  /** See {@link isScheduleFull} — same check for callers that already hold the full graph. */
+  private async isTrainFull(schedule: TrainSchedule): Promise<boolean> {
+    if ((await this.remainingWagons(schedule)) <= 0) return true;
+    const locomotive = schedule.trainSet?.locomotive;
+    if (!locomotive) return false; // no weight/length limits to bind against
+    const wagonDims = await this.loadWagonDims();
+    const limits = await this.capacityLimits(locomotive);
+    const budget = await this.remainingBudget(schedule, limits, wagonDims);
+    return budget.isExhausted(this.minPerWagonNeed(wagonDims));
+  }
+
+  /**
+   * Smallest gross weight / shortest length one more wagon could add: the
+   * lightest wagon type at its rated payload. Feeds CorridorBudget.isExhausted,
+   * so FULL is only declared when not even this wagon fits anywhere.
+   */
+  private minPerWagonNeed(wagonDims: WagonDims): {
+    grossWeightTons: number;
+    lengthMeters: number;
+  } {
+    const all = [
+      wagonDims.container,
+      wagonDims.bulk,
+      ...wagonDims.byWagonTypeId.values(),
+    ];
+    return {
+      grossWeightTons: Math.min(
+        ...all.map((d) => d.tareWeightTons + d.capacityTons),
+      ),
+      lengthMeters: Math.min(...all.map((d) => d.lengthMeters)),
+    };
   }
 
   /**
@@ -2598,7 +2934,10 @@ export class BookingBatchService implements OnModuleInit {
     const schedule =
       await this.trainSchedulesRepository.findByIdWithFullGraph(scheduleId);
     if (!schedule || schedule.bookingWindowStatus !== "FULL") return;
-    if ((await this.remainingWagons(schedule)) <= 0) return;
+    // Symmetric with isScheduleFull: a weight/length-bound FULL is not stale
+    // just because slots remain — clearing it here would reopen a train
+    // nothing can board.
+    if (await this.isTrainFull(schedule)) return;
 
     const customerWindowOpen =
       schedule.windowPhase == null || schedule.windowPhase === "OPEN";
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/booking-journey.service.ts b/apps/edr-freight-api/src/modules/train-scheduling/booking-journey.service.ts
index cdc58083c..426bd37be 100644
--- a/apps/edr-freight-api/src/modules/train-scheduling/booking-journey.service.ts
+++ b/apps/edr-freight-api/src/modules/train-scheduling/booking-journey.service.ts
@@ -14,6 +14,7 @@ import { ClearanceMilestoneService } from '../contracts/clearance-milestone.serv
 import { Yard } from '../rule-engine/entities/yard.entity';
 import { TrainSetWagon } from '../train-sets/entities/train-set-wagon.entity';
 import { TrainSchedule } from '../train-schedules/entities/train-schedule.entity';
+import { TrainScheduleBooking } from '../train-schedules/entities/train-schedule-booking.entity';
 import { WagonBookingAllocation } from '../train-schedules/entities/wagon-booking-allocation.entity';
 import { Wagon } from '../wagons/entities/wagon.entity';
 import { WagonMovement } from '../wagons/entities/wagon-movement.entity';
@@ -28,6 +29,9 @@ import { TrainCheckpointEvent } from './entities/train-checkpoint-event.entity';
  * unload at its destination yard (IN_TRANSIT → ARRIVED for import/export,
  * → COMPLETED for intercity), possibly long before the train's final arrival.
  * Both are gated on the train's latest recorded checkpoint being at that yard.
+ * Unload also fires automatically: recording a checkpoint at a yard auto-
+ * unloads every booking destined there (autoUnloadAtYard), so the manual
+ * unload endpoint remains only a fallback.
  *
  * Unloading also settles the physical wagons: each wagon that alights with the
  * booking is released at that yard and the move is written to the
@@ -136,7 +140,7 @@ export class BookingJourneyService {
       .leftJoinAndSelect('booking.originYard', 'originYard')
       .leftJoinAndSelect('booking.destinationYard', 'destinationYard')
       .innerJoin(
-        'freight.train_schedule_bookings',
+        TrainScheduleBooking,
         'tsb',
         'tsb.booking_id = booking.id AND tsb.train_schedule_id = :scheduleId AND tsb.deleted_at IS NULL',
         { scheduleId },
@@ -198,6 +202,49 @@ export class BookingJourneyService {
     };
   }
 
+  /**
+   * Auto-unload on checkpoint: every IN_TRANSIT booking on this schedule whose
+   * destination is the yard the train just reached alights automatically, so
+   * the customer's booking flips to ARRIVED (COMPLETED for intercity) the
+   * moment the train is recorded at their yard — no separate operator unload.
+   * Runs through the same per-booking unload path (wagon settle + ledger +
+   * milestones); one booking's failure is logged and never blocks the
+   * checkpoint or the other bookings. Returns the unloaded booking ids.
+   */
+  async autoUnloadAtYard(
+    scheduleId: string,
+    yardId: string,
+    userId?: string | null,
+  ): Promise<string[]> {
+    const bookings = await this.dataSource
+      .getRepository(Booking)
+      .createQueryBuilder('booking')
+      // Entity-class join: a raw 'freight.table' string is parsed by TypeORM as
+      // an alias.property path ("freight" alias was not found) — runtime 500.
+      .innerJoin(
+        TrainScheduleBooking,
+        'tsb',
+        'tsb.booking_id = booking.id AND tsb.train_schedule_id = :scheduleId AND tsb.deleted_at IS NULL',
+        { scheduleId },
+      )
+      .where('booking.destination_yard_id = :yardId', { yardId })
+      .andWhere(`booking.status = 'IN_TRANSIT'`)
+      .getMany();
+
+    const unloaded: string[] = [];
+    for (const booking of bookings) {
+      try {
+        await this.unloadBooking(scheduleId, booking.id, userId);
+        unloaded.push(booking.id);
+      } catch (err) {
+        this.logger.warn(
+          `Auto-unload failed for booking ${booking.id} at yard ${yardId}: ${(err as Error).message}`,
+        );
+      }
+    }
+    return unloaded;
+  }
+
   /**
    * Bulk fallback at the train's FINAL arrival: any booking destined for the
    * final yard that operators didn't unload individually gets its per-booking
@@ -306,7 +353,7 @@ export class BookingJourneyService {
       .createQueryBuilder('alloc')
       .innerJoinAndSelect('alloc.trainSetWagon', 'slot')
       .innerJoin(
-        'freight.train_schedules',
+        TrainSchedule,
         'schedule',
         'schedule.train_set_id = slot.train_set_id AND schedule.id = :scheduleId',
         { scheduleId },
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/booking-notifier.service.ts b/apps/edr-freight-api/src/modules/train-scheduling/booking-notifier.service.ts
index 48985bdf0..edd807152 100644
--- a/apps/edr-freight-api/src/modules/train-scheduling/booking-notifier.service.ts
+++ b/apps/edr-freight-api/src/modules/train-scheduling/booking-notifier.service.ts
@@ -1,6 +1,7 @@
 import { Injectable, Logger } from '@nestjs/common';
 import {
   NotificationAudience,
+  NotificationPriority,
   NotificationType,
   NotifyInput,
 } from '@edr/types';
@@ -114,11 +115,15 @@ export class BookingNotifierService {
     const eat = deadline.toLocaleString('en-GB', { timeZone: 'Africa/Addis_Ababa' });
     const msg =
       `Only ${offeredWagons} of ${totalWagons} wagons fit the train for booking ${b.reference ?? b.id}. ` +
-      `Pay within ${payMinutes} minute${payMinutes === 1 ? '' : 's'} to accept and ship ${offeredWagons} wagon${offeredWagons === 1 ? '' : 's'} now ` +
-      `(the rest returns to your contract to book later). If you do not pay, the booking stays whole and you can rebook in the next window. Deadline: ${eat} EAT.`;
+      `Pay within ${payMinutes} minute${payMinutes === 1 ? '' : 's'} to accept and ship ${offeredWagons} wagon${offeredWagons === 1 ? '' : 's'} now. ` +
+      `The remaining ${totalWagons - offeredWagons} return${totalWagons - offeredWagons === 1 ? 's' : ''} to your contract — book them yourself in a later window. ` +
+      `If you do not pay, the booking stays whole and you can rebook in the next window. Deadline: ${eat} EAT.`;
     await this.notifyContact(b, msg, 'PAY NOW (PARTIAL)');
+    // HIGH: a split is a change to what the customer ordered AND a live payment
+    // deadline — it must reach email/SMS, not just the portal inbox.
     this.inApp(b, 'Partial allocation offer', msg, {
       type: NotificationType.INVOICE_ISSUED,
+      priority: NotificationPriority.HIGH,
     });
   }
 
@@ -136,6 +141,22 @@ export class BookingNotifierService {
     this.inApp(b, 'Payment window expired', msg);
   }
 
+  /**
+   * Every train on the booking's chosen day filled up (or no further train runs)
+   * before the waiting list reached this booking — it expired unplaced. HIGH so
+   * the customer hears about it by email/SMS and rebooks another day.
+   */
+  expiredNoCapacity(b: Booking): void {
+    const msg =
+      `Booking ${b.reference ?? b.id} could not be placed: every train for your selected day ` +
+      `is full and no other train is scheduled that day. The booking has expired — ` +
+      `please rebook for another day. No re-approval is needed.`;
+    void this.notifyContact(b, msg, 'EXPIRED (NO CAPACITY)');
+    this.inApp(b, 'No capacity — booking expired', msg, {
+      priority: NotificationPriority.HIGH,
+    });
+  }
+
   scheduleFull(b: Booking): void {
     this.logger.warn(
       `SCHEDULE FULL — ${this.ref(b)} could not be placed; change schedule, pick another day, or cancel.`,
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/booking-split.service.ts b/apps/edr-freight-api/src/modules/train-scheduling/booking-split.service.ts
index 44886f116..ad0967cf0 100644
--- a/apps/edr-freight-api/src/modules/train-scheduling/booking-split.service.ts
+++ b/apps/edr-freight-api/src/modules/train-scheduling/booking-split.service.ts
@@ -36,6 +36,9 @@ export interface SizedOffer {
  * rows, so reducing the lines releases it automatically) and can be rebooked in
  * any later window within contract validity. A ONE_TIME contract is promoted to
  * GENERAL on split (see applySplit) so its remainder is actually rebookable.
+ * Once the remainder is rebooked and the cap hits zero, ContractBookingService
+ * completes the contract (CONTRACT_CLOSED): no further bookings or shipment
+ * requests, even while validity and a booking window are still open.
  */
 @Injectable()
 export class BookingSplitService {
@@ -55,12 +58,17 @@ export class BookingSplitService {
    * Size the largest part of the booking that fits `freeWagons`, priced via an
    * in-memory clone. Returns null when nothing meaningful fits (no whole
    * container unit / no bulk tonnage, or pricing failed).
+   *
+   * `maxOfferedWeightTons` caps the offered CARGO tonnage (bulk only) — on a
+   * weight-limited train the wagons' own tare eats into the locomotive's
+   * remaining pull weight, so the caller passes the room left after tare.
    */
   async sizeOffer(
     booking: Booking,
     freeWagons: number,
     totalWagons: number,
     bulkWagonCapacityTons: number,
+    maxOfferedWeightTons?: number,
   ): Promise<SizedOffer | null> {
     if (freeWagons < 1 || freeWagons >= totalWagons) return null;
 
@@ -110,10 +118,15 @@ export class BookingSplitService {
       if (!offeredLines.length || offeredWagons <= 0) return null;
       clone.bookingContainers = clonedContainers;
     } else {
-      // Bulk: split by weight — the offered part is what freeWagons can carry.
+      // Bulk: split by weight — the offered part is what freeWagons can carry,
+      // further capped by the caller's weight room when the pull limit binds.
       const totalWeight = Number(booking.cargoTotalWeightVgm ?? 0);
       if (totalWeight <= 0 || bulkWagonCapacityTons <= 0) return null;
-      offeredWeightTons = Math.min(totalWeight, freeWagons * bulkWagonCapacityTons);
+      offeredWeightTons = Math.min(
+        totalWeight,
+        freeWagons * bulkWagonCapacityTons,
+        maxOfferedWeightTons ?? Number.POSITIVE_INFINITY,
+      );
       if (offeredWeightTons <= 0) return null;
       offeredWagons = Math.min(
         freeWagons,
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/booking-window.service.spec.ts b/apps/edr-freight-api/src/modules/train-scheduling/booking-window.service.spec.ts
index 3286da0eb..72229cfd6 100644
--- a/apps/edr-freight-api/src/modules/train-scheduling/booking-window.service.spec.ts
+++ b/apps/edr-freight-api/src/modules/train-scheduling/booking-window.service.spec.ts
@@ -19,6 +19,7 @@ describe('BookingWindowService — window state machine', () => {
     isScheduleFull: jest.Mock;
     hasLiveReservations: jest.Mock;
     refreshWindowStatus: jest.Mock;
+    expireLeftoverDayPool: jest.Mock;
   };
   let trainSchedulesRepository: { findById: jest.Mock; findAll: jest.Mock };
   let trainSchedulingService: { finalizeSchedule: jest.Mock; getWindowConfig: jest.Mock };
@@ -73,6 +74,7 @@ describe('BookingWindowService — window state machine', () => {
       // No reservation is mid-pay-window by default, so the cycle concludes.
       hasLiveReservations: jest.fn().mockResolvedValue(false),
       refreshWindowStatus: jest.fn().mockResolvedValue(undefined),
+      expireLeftoverDayPool: jest.fn().mockResolvedValue(0),
     };
     trainSchedulesRepository = {
       findById: jest.fn().mockResolvedValue(null),
@@ -186,6 +188,8 @@ describe('BookingWindowService — window state machine', () => {
     expect(batch.setWindow).toHaveBeenCalledWith(scheduleId, 'FULL');
     expect(s.windowPhase).toBe('DONE');
     expect(trainSchedulingService.finalizeSchedule).toHaveBeenCalledWith(scheduleId);
+    // The day's leftover waiting list is swept once this train is done.
+    expect(batch.expireLeftoverDayPool).toHaveBeenCalledWith(scheduleId);
   });
 
   it('conclude: NOT full + a cycle fits before departure → REOPEN (back to PRE_WINDOW)', async () => {
@@ -210,6 +214,8 @@ describe('BookingWindowService — window state machine', () => {
     });
     await concludeCycle(s, new Date('2026-07-01T02:30:04.000Z'));
     expect(s.windowPhase).toBe('DONE');
+    // No further train can run for this day → leftover waiting list is swept.
+    expect(batch.expireLeftoverDayPool).toHaveBeenCalledWith(scheduleId);
   });
 
   it('no transition fires before its deadline (idempotent tick)', async () => {
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/booking-window.service.ts b/apps/edr-freight-api/src/modules/train-scheduling/booking-window.service.ts
index a730b6aa6..25a7b1aed 100644
--- a/apps/edr-freight-api/src/modules/train-scheduling/booking-window.service.ts
+++ b/apps/edr-freight-api/src/modules/train-scheduling/booking-window.service.ts
@@ -357,6 +357,10 @@ export class BookingWindowService implements OnModuleInit {
       this.logger.log(
         `[WINDOW] ${schedule.id} conclude → train FULL — window DONE, finalizing`,
       );
+      // This train is done. If no other train on the route-day can still take
+      // the waiting list, those bookings have nowhere to go — expire + notify
+      // them now instead of leaving them FULLY_EXECUTED forever.
+      await this.bookingBatchService.expireLeftoverDayPool(schedule.id);
       return;
     }
 
@@ -390,6 +394,9 @@ export class BookingWindowService implements OnModuleInit {
         `[WINDOW] ${schedule.id} conclude → not full but no cycle fits before ` +
           `departure — window DONE`,
       );
+      // No further cycle on this train. Same sweep as the FULL branch: if no
+      // sibling train can still take the day's waiting list, expire + notify.
+      await this.bookingBatchService.expireLeftoverDayPool(schedule.id);
       return;
     }
 
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/corridor-capacity.util.spec.ts b/apps/edr-freight-api/src/modules/train-scheduling/corridor-capacity.util.spec.ts
new file mode 100644
index 000000000..15d065d09
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/train-scheduling/corridor-capacity.util.spec.ts
@@ -0,0 +1,120 @@
+import { Capacity, CorridorBudget } from './corridor-capacity.util';
+import { sizePartialOfferWagons } from './train-capacity.util';
+
+describe('corridor-capacity.util — overage tolerance', () => {
+  const pw2 = { lengthMeters: 17.066, capacityTons: 70, tareWeightTons: 25.2 };
+  const stops = ['yard-a', 'yard-b'];
+  const base: Capacity = { wagons: 44, weightTons: 3500, lengthMeters: 760 };
+  const tolerance = { weightTons: 90, lengthMeters: 0 };
+
+  const need = (weightTons: number, wagons = 1, lengthMeters = 17): Capacity => ({
+    wagons,
+    weightTons,
+    lengthMeters,
+  });
+
+  const budgetAt = (usedWeightTons: number): CorridorBudget => {
+    const budget = new CorridorBudget(stops, base, tolerance);
+    budget.subtract(need(usedWeightTons, 10, 170), budget.fullLeg());
+    return budget;
+  };
+
+  it('admits a whole booking that overflows the base cap by less than the tolerance', () => {
+    // 3500T train, 90T tolerance, 3560T committed: a 25T booking still boards
+    // entire (3585 ≤ 3590).
+    const budget = budgetAt(3560);
+    expect(budget.fits(need(25), budget.fullLeg())).toBe(true);
+  });
+
+  it('rejects a whole booking that overflows past the tolerance — no partial admission', () => {
+    // Same train at 3560T: a 210T booking would need 3770 > 3590 — skipped.
+    const budget = budgetAt(3560);
+    expect(budget.fits(need(210), budget.fullLeg())).toBe(false);
+  });
+
+  it('caps stacked overage admissions at base + tolerance', () => {
+    // Small units may keep boarding inside the overage zone, but never past it.
+    const budget = budgetAt(3560);
+    budget.subtract(need(25), budget.fullLeg()); // now 3585 committed
+    expect(budget.fits(need(5), budget.fullLeg())).toBe(true); // 3590 exactly
+    expect(budget.fits(need(6), budget.fullLeg())).toBe(false); // 3591 > 3590
+  });
+
+  it('excludes the tolerance from remainingFor, so split room never reaches into it', () => {
+    const budget = budgetAt(3400);
+    expect(budget.remainingFor(budget.fullLeg()).weightTons).toBe(100);
+    // Once a whole-unit admission spends the tolerance, base room goes negative.
+    const over = budgetAt(3560);
+    expect(over.remainingFor(over.fullLeg()).weightTons).toBe(-60);
+  });
+
+  it('yields no split offer once the base cap is spent — tolerance is whole-bookings-only', () => {
+    // The batch engine sizes splits from remainingFor; at/over base capacity
+    // that room cannot carry even one part-loaded wagon, so no offer opens.
+    const over = budgetAt(3560);
+    const room = over.remainingFor(over.fullLeg());
+    expect(sizePartialOfferWagons(room, 15, pw2)).toBeNull();
+  });
+
+  it('still offers a split while committed weight is under the base cap', () => {
+    // 744T of base room left: the boundary booking is offered the part that
+    // fits up to 3500, not up to 3590.
+    const budget = budgetAt(2756);
+    const room = budget.remainingFor(budget.fullLeg());
+    expect(sizePartialOfferWagons(room, 15, pw2)).toEqual({
+      wagons: 8,
+      maxCargoTons: 542.4,
+    });
+  });
+
+  it('leaves fits() strict when no tolerance is configured', () => {
+    const strict = new CorridorBudget(stops, base);
+    strict.subtract(need(3500, 10, 170), strict.fullLeg());
+    expect(strict.fits(need(1), strict.fullLeg())).toBe(false);
+  });
+
+  describe('isExhausted — train-wide FULL across all axes', () => {
+    // Lightest wagon at rated payload: PW2 25.2T tare + 70T = 95.2T gross.
+    const perWagon = {
+      grossWeightTons: pw2.tareWeightTons + pw2.capacityTons,
+      lengthMeters: pw2.lengthMeters,
+    };
+
+    it('reports FULL when weight binds first, with wagon slots still free', () => {
+      // 37 loaded PW2 wagons = 3522.4T of 3500+90T. 7 length-derived slots
+      // remain, but wagon 38 would need 95.2T against 67.6T of room — the
+      // schedule must finalize and its window must disappear.
+      const budget = new CorridorBudget(stops, base, tolerance);
+      budget.subtract(need(3522.4, 37, 631.442), budget.fullLeg());
+      expect(budget.maxRemaining().wagons).toBeGreaterThan(0); // slot check alone says "not full"
+      expect(budget.isExhausted(perWagon)).toBe(true);
+    });
+
+    it('is not FULL while one more loaded wagon still fits within base + tolerance', () => {
+      const budget = budgetAt(3300); // 200T base room + 90T tolerance ≥ 95.2T
+      expect(budget.isExhausted(perWagon)).toBe(false);
+    });
+
+    it('reports FULL when wagon slots run out regardless of weight room', () => {
+      const budget = new CorridorBudget(stops, base, tolerance);
+      budget.subtract(need(1000, 44, 700), budget.fullLeg());
+      expect(budget.isExhausted(perWagon)).toBe(true);
+    });
+
+    it('reports FULL when length room cannot take one more wagon', () => {
+      const budget = new CorridorBudget(stops, base, tolerance);
+      budget.subtract(need(1000, 30, 750), budget.fullLeg()); // 10m left < 17.066m
+      expect(budget.isExhausted(perWagon)).toBe(true);
+    });
+
+    it('only counts an edge as open when EVERY axis has room on that same edge', () => {
+      // Three stops → two edges. Edge 0 has weight but no slots; edge 1 has
+      // slots but no weight. Neither can board a wagon, so the train is FULL
+      // even though the per-axis maxima both look open.
+      const budget = new CorridorBudget(['a', 'b', 'c'], base, tolerance);
+      budget.subtract(need(0, 44, 0), { fromEdge: 0, toEdge: 1 });
+      budget.subtract(need(3522.4, 0, 0), { fromEdge: 1, toEdge: 2 });
+      expect(budget.isExhausted(perWagon)).toBe(true);
+    });
+  });
+});
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/corridor-capacity.util.ts b/apps/edr-freight-api/src/modules/train-scheduling/corridor-capacity.util.ts
index b16b25179..f2602a157 100644
--- a/apps/edr-freight-api/src/modules/train-scheduling/corridor-capacity.util.ts
+++ b/apps/edr-freight-api/src/modules/train-scheduling/corridor-capacity.util.ts
@@ -63,18 +63,40 @@ export function stopYardsFor(
   return [originStationId, destinationStationId];
 }
 
-/** Per-edge capacity budget along a schedule's stop list. */
+/** Overage a locomotive may absorb beyond its base caps. */
+export interface OverageTolerance {
+  weightTons: number;
+  lengthMeters: number;
+}
+
+/**
+ * Per-edge capacity budget along a schedule's stop list.
+ *
+ * `initial` must be the BASE caps (locomotive floored by rule caps, WITHOUT the
+ * overage tolerance). The tolerance is passed separately and is spendable only
+ * by admitting a unit WHOLE via {@link fits} — e.g. base 3500T + 90T tolerance,
+ * 3560T already committed: a 25T booking still boards entire (3585 ≤ 3590), a
+ * 210T booking does not. {@link remainingFor} deliberately excludes the
+ * tolerance (and goes negative once it is consumed), so split/partial offers
+ * sized from it can only fill up to the base cap and never spend the tolerance.
+ */
 export class CorridorBudget {
   private readonly edges: Capacity[];
   private readonly stopIndex: Map<string, number>;
+  private readonly tolerance: OverageTolerance;
 
   constructor(
     readonly stops: string[],
     initial: Capacity,
+    tolerance?: Partial<OverageTolerance> | null,
   ) {
     const edgeCount = Math.max(1, stops.length - 1);
     this.edges = Array.from({ length: edgeCount }, () => ({ ...initial }));
     this.stopIndex = new Map(stops.map((yardId, i) => [yardId, i]));
+    this.tolerance = {
+      weightTons: tolerance?.weightTons ?? 0,
+      lengthMeters: tolerance?.lengthMeters ?? 0,
+    };
   }
 
   /** The leg between two stops, or null when they aren't on this corridor in order. */
@@ -99,7 +121,12 @@ export class CorridorBudget {
     return this.legOf(originYardId, destinationYardId) ?? this.fullLeg();
   }
 
-  /** Remaining capacity usable by this leg = min across its edges. */
+  /**
+   * Remaining BASE capacity usable by this leg = min across its edges. Excludes
+   * the overage tolerance and goes negative once a whole-unit admission has
+   * spent it — sizing a split from this can therefore never reach into the
+   * tolerance, and yields nothing at all once the base cap is exhausted.
+   */
   remainingFor(leg: CorridorLeg): Capacity {
     let min = { ...this.edges[leg.fromEdge] };
     for (let i = leg.fromEdge + 1; i < leg.toEdge; i++) {
@@ -113,8 +140,20 @@ export class CorridorBudget {
     return min;
   }
 
+  /**
+   * Whether a unit fits WHOLE on this leg. This is the only place the overage
+   * tolerance may be spent: the unit boards entirely or not at all, so weight
+   * and length may dip into the tolerance. Admission keeps the invariant
+   * `remaining ≥ -tolerance` on every edge, i.e. the train never exceeds
+   * base + tolerance no matter how many small units board in the overage zone.
+   */
   fits(need: Capacity, leg: CorridorLeg): boolean {
-    return capacityFits(need, this.remainingFor(leg));
+    const remaining = this.remainingFor(leg);
+    return (
+      need.wagons <= remaining.wagons &&
+      need.weightTons <= remaining.weightTons + this.tolerance.weightTons &&
+      need.lengthMeters <= remaining.lengthMeters + this.tolerance.lengthMeters
+    );
   }
 
   subtract(need: Capacity, leg: CorridorLeg): void {
@@ -129,6 +168,25 @@ export class CorridorBudget {
     }
   }
 
+  /**
+   * Train-wide FULL across ALL capacity axes: true when no edge can board even
+   * one more loaded wagon. `perWagon` is the smallest gross weight and length
+   * a future wagon could add (lightest wagon type at rated payload); weight and
+   * length may dip into the overage tolerance, mirroring {@link fits}. Checked
+   * per edge — an edge with slots free but no pull weight is just as closed as
+   * one with no slots. A slot-only check misses weight-bound trains: PW2 at
+   * 37 × 95.2T = 3522.4T of 3500+90T has 7 length-derived slots free but no
+   * weight room for wagon 38, and its window must read FULL.
+   */
+  isExhausted(perWagon: { grossWeightTons: number; lengthMeters: number }): boolean {
+    return this.edges.every(
+      (e) =>
+        e.wagons <= 0 ||
+        e.weightTons + this.tolerance.weightTons < perWagon.grossWeightTons ||
+        e.lengthMeters + this.tolerance.lengthMeters < perWagon.lengthMeters,
+    );
+  }
+
   /**
    * The most open edge — when even this has no wagon slots left, nothing can
    * board anywhere and the schedule's window is genuinely FULL. (A train can be
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/dto/batch-board-query.dto.ts b/apps/edr-freight-api/src/modules/train-scheduling/dto/batch-board-query.dto.ts
new file mode 100644
index 000000000..11bc8ceb5
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/train-scheduling/dto/batch-board-query.dto.ts
@@ -0,0 +1,99 @@
+import { ApiPropertyOptional } from '@nestjs/swagger';
+import { Type } from 'class-transformer';
+import {
+  IsIn,
+  IsInt,
+  IsISO8601,
+  IsOptional,
+  IsString,
+  Max,
+  MaxLength,
+  Min,
+} from 'class-validator';
+
+export const BATCH_BOARD_STATUSES = [
+  'DRAFT',
+  'SCHEDULED',
+  'DISPATCHED',
+  'ARRIVED',
+  'CANCELLED',
+] as const;
+
+export const BATCH_BOARD_SORT_FIELDS = [
+  'createdAt',
+  'scheduledDepartureDate',
+  'trainNumber',
+  'status',
+] as const;
+export type BatchBoardSortField = (typeof BATCH_BOARD_SORT_FIELDS)[number];
+
+/** Filters for the batch monitoring board list (import schedules, all statuses). */
+export class BatchBoardQueryDto {
+  @ApiPropertyOptional({ default: 1, minimum: 1 })
+  @IsOptional()
+  @Type(() => Number)
+  @IsInt()
+  @Min(1)
+  page?: number;
+
+  @ApiPropertyOptional({ default: 12, minimum: 1, maximum: 100 })
+  @IsOptional()
+  @Type(() => Number)
+  @IsInt()
+  @Min(1)
+  @Max(100)
+  pageSize?: number;
+
+  @ApiPropertyOptional({
+    description:
+      'Comma-separated schedule statuses (DRAFT,SCHEDULED,DISPATCHED,ARRIVED,CANCELLED). Omit for all.',
+    example: 'DISPATCHED,ARRIVED',
+  })
+  @IsOptional()
+  @IsString()
+  statuses?: string;
+
+  @ApiPropertyOptional({ enum: ['OPEN', 'FULL', 'CLOSED'] })
+  @IsOptional()
+  @IsIn(['OPEN', 'FULL', 'CLOSED'])
+  bookingWindowStatus?: 'OPEN' | 'FULL' | 'CLOSED';
+
+  @ApiPropertyOptional({
+    description:
+      'Case-insensitive match on train number, route yards, stations, or locomotive code.',
+  })
+  @IsOptional()
+  @IsString()
+  @MaxLength(120)
+  search?: string;
+
+  @ApiPropertyOptional({ description: 'Departure date lower bound (ISO 8601).' })
+  @IsOptional()
+  @IsISO8601()
+  departureFrom?: string;
+
+  @ApiPropertyOptional({ description: 'Departure date upper bound (ISO 8601).' })
+  @IsOptional()
+  @IsISO8601()
+  departureTo?: string;
+
+  @ApiPropertyOptional({ description: 'Created-at lower bound (ISO 8601).' })
+  @IsOptional()
+  @IsISO8601()
+  createdFrom?: string;
+
+  @ApiPropertyOptional({ description: 'Created-at upper bound (ISO 8601).' })
+  @IsOptional()
+  @IsISO8601()
+  createdTo?: string;
+
+  @ApiPropertyOptional({ enum: BATCH_BOARD_SORT_FIELDS, default: 'createdAt' })
+  @IsOptional()
+  @IsIn(BATCH_BOARD_SORT_FIELDS as unknown as string[])
+  sortBy?: BatchBoardSortField;
+
+  @ApiPropertyOptional({ enum: ['ASC', 'DESC'], default: 'DESC' })
+  @IsOptional()
+  @IsIn(['ASC', 'DESC'])
+  sortOrder?: 'ASC' | 'DESC';
+}
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/intercity.service.ts b/apps/edr-freight-api/src/modules/train-scheduling/intercity.service.ts
index bce4207d3..d2f1dd7b1 100644
--- a/apps/edr-freight-api/src/modules/train-scheduling/intercity.service.ts
+++ b/apps/edr-freight-api/src/modules/train-scheduling/intercity.service.ts
@@ -107,7 +107,13 @@ export class IntercityService {
     for (const bookingId of bookingIds) {
       const booking = await this.dataSource
         .getRepository(Booking)
-        .findOne({ where: { id: bookingId }, relations: { bookingContainers: true } });
+        .findOne({
+          where: { id: bookingId },
+          relations: {
+            bookingContainers: { containerType: true },
+            cargoType: true,
+          },
+        });
       if (!booking) {
         rejected.push({ bookingId, reason: 'Booking not found' });
         continue;
@@ -205,6 +211,8 @@ export class IntercityService {
       .createQueryBuilder('booking')
       .leftJoinAndSelect('booking.company', 'company')
       .leftJoinAndSelect('booking.bookingContainers', 'bookingContainer')
+      .leftJoinAndSelect('bookingContainer.containerType', 'containerType')
+      .leftJoinAndSelect('booking.cargoType', 'cargoType')
       .leftJoinAndSelect('booking.originYard', 'originYard')
       .leftJoinAndSelect('booking.destinationYard', 'destinationYard')
       .where(`booking.trade_direction = 'DOMESTIC'`)
@@ -230,6 +238,8 @@ export class IntercityService {
       .createQueryBuilder('booking')
       .leftJoinAndSelect('booking.company', 'company')
       .leftJoinAndSelect('booking.bookingContainers', 'bookingContainer')
+      .leftJoinAndSelect('bookingContainer.containerType', 'containerType')
+      .leftJoinAndSelect('booking.cargoType', 'cargoType')
       .leftJoinAndSelect('booking.originYard', 'originYard')
       .leftJoinAndSelect('booking.destinationYard', 'destinationYard')
       .where(`booking.trade_direction = 'DOMESTIC'`)
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/train-capacity.util.spec.ts b/apps/edr-freight-api/src/modules/train-scheduling/train-capacity.util.spec.ts
index e1b4064bb..dd9234bdb 100644
--- a/apps/edr-freight-api/src/modules/train-scheduling/train-capacity.util.spec.ts
+++ b/apps/edr-freight-api/src/modules/train-scheduling/train-capacity.util.spec.ts
@@ -6,6 +6,7 @@ import {
   deriveTrainCapacityFromLocomotive,
   grossWagonWeightTons,
   minLocomotiveLimits,
+  sizePartialOfferWagons,
 } from './train-capacity.util';
 
 describe('train-capacity.util', () => {
@@ -73,6 +74,24 @@ describe('train-capacity.util', () => {
       expect(derived.maxWeightTons).toBe(3590);
     });
 
+    it('reports the base caps and tolerance separately so filling can budget on base', () => {
+      const derived = deriveTrainCapacityFromLocomotive(
+        {
+          maxPullWeightTons: 3500,
+          maxTrainLengthMeters: 760,
+          overageToleranceTons: 90,
+          overageToleranceMeters: 20,
+        },
+        [pw2],
+      );
+      expect(derived.baseWeightTons).toBe(3500);
+      expect(derived.baseLengthMeters).toBe(760);
+      expect(derived.toleranceTons).toBe(90);
+      expect(derived.toleranceMeters).toBe(20);
+      expect(derived.baseWeightTons + derived.toleranceTons).toBe(derived.maxWeightTons);
+      expect(derived.baseLengthMeters + derived.toleranceMeters).toBe(derived.maxLengthMeters);
+    });
+
     it('ignores overage tolerance when unset (strict cap)', () => {
       const derived = deriveTrainCapacityFromLocomotive(
         { maxPullWeightTons: 3500, maxTrainLengthMeters: 760 },
@@ -185,4 +204,96 @@ describe('train-capacity.util', () => {
     expect(limits?.maxPullWeightTons).toBe(3500);
     expect(limits?.overageToleranceTons).toBe(20);
   });
+
+  describe('sizePartialOfferWagons', () => {
+    it('sizes a bulk split by the WEIGHT axis when the pull limit binds, not wagon slots', () => {
+      // The 3500T-train scenario: two 1000T bookings boarded gross (each 15 PW2
+      // wagons: 1000 + 378 tare = 1378), leaving 744T of pull weight but plenty
+      // of slots/length. The boundary 1000T booking (15 wagons) must be offered
+      // the largest part 744T can carry: 8 wagons whose tare is 201.6T, hauling
+      // 542.4T of cargo — gross exactly 744.
+      const offer = sizePartialOfferWagons(
+        { wagons: 40, weightTons: 744, lengthMeters: 500 },
+        15,
+        pw2,
+      );
+      expect(offer).toEqual({ wagons: 8, maxCargoTons: 542.4 });
+    });
+
+    it('still sizes by wagon slots when they bind first (legacy behavior)', () => {
+      const offer = sizePartialOfferWagons(
+        { wagons: 3, weightTons: 100000, lengthMeters: 100000 },
+        15,
+        pw2,
+      );
+      expect(offer?.wagons).toBe(3);
+    });
+
+    it('sizes by the LENGTH axis when it binds first', () => {
+      // 60m of train left → 3 PW2 (17.066m) fit, the 4th does not.
+      const offer = sizePartialOfferWagons(
+        { wagons: 40, weightTons: 100000, lengthMeters: 60 },
+        15,
+        pw2,
+      );
+      expect(offer?.wagons).toBe(3);
+    });
+
+    it('never offers all of the booking — a split is a strict subset', () => {
+      const offer = sizePartialOfferWagons(
+        { wagons: 40, weightTons: 100000, lengthMeters: 100000 },
+        15,
+        pw2,
+      );
+      expect(offer?.wagons).toBe(14);
+    });
+
+    it('returns null when not even one part-loaded wagon fits the weight room', () => {
+      expect(
+        sizePartialOfferWagons({ wagons: 5, weightTons: 20, lengthMeters: 500 }, 15, pw2),
+      ).toBeNull();
+    });
+
+    describe('fullWagonsOnly (bulk)', () => {
+      it('offers only whole full wagons — each costs capacity + tare of gross room', () => {
+        // 704T of pull weight left. A full PW2 wagon is 70 + 25.2 = 95.2T gross,
+        // so 7 fit (666.4T) and the 8th (761.6T) does not. Cargo is exactly
+        // 7 × 70 = 490T — the last wagon is never part-loaded into the leftover.
+        const offer = sizePartialOfferWagons(
+          { wagons: 40, weightTons: 704, lengthMeters: 500 },
+          9,
+          pw2,
+          { fullWagonsOnly: true },
+        );
+        expect(offer).toEqual({ wagons: 7, maxCargoTons: 490 });
+      });
+
+      it('never squeezes a part-loaded wagon into leftover weight room', () => {
+        // Same 744T room as the part-load scenario above: the scan would pick
+        // 8 wagons hauling 542.4T (last wagon at 52.4/70). Full-wagon sizing
+        // stops at 7 fully loaded wagons.
+        const offer = sizePartialOfferWagons(
+          { wagons: 40, weightTons: 744, lengthMeters: 500 },
+          15,
+          pw2,
+          { fullWagonsOnly: true },
+        );
+        expect(offer).toEqual({ wagons: 7, maxCargoTons: 490 });
+      });
+
+      it('returns null when the room cannot take even one FULL wagon', () => {
+        // 67.6T left (3590 cap − 3522.4 boarded): a part-loaded wagon would fit
+        // (25.2 tare + 42.4 cargo) but a full one (95.2 gross) does not — the
+        // booking must be skipped entirely, not trimmed onto the train.
+        expect(
+          sizePartialOfferWagons(
+            { wagons: 40, weightTons: 67.6, lengthMeters: 500 },
+            3,
+            pw2,
+            { fullWagonsOnly: true },
+          ),
+        ).toBeNull();
+      });
+    });
+  });
 });
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/train-capacity.util.ts b/apps/edr-freight-api/src/modules/train-scheduling/train-capacity.util.ts
index 79adf8d8f..463ae7ea8 100644
--- a/apps/edr-freight-api/src/modules/train-scheduling/train-capacity.util.ts
+++ b/apps/edr-freight-api/src/modules/train-scheduling/train-capacity.util.ts
@@ -52,6 +52,12 @@ export type DerivedTrainCapacity = {
   maxLengthMeters: number;
   /** Length-derived slot count. Weight is enforced separately against real cargo. */
   maxWagonSlots: number;
+  /** Caps WITHOUT the overage tolerance — what batch filling budgets against. */
+  baseWeightTons: number;
+  baseLengthMeters: number;
+  /** Overage spendable only by admitting a booking whole, never by a split. */
+  toleranceTons: number;
+  toleranceMeters: number;
 };
 
 /** What a consist currently uses, and what is left on each axis. */
@@ -88,28 +94,48 @@ export function grossWagonWeightTons(slot: Pick<ConsistSlot, 'tareWeightTons' |
 /**
  * Hard caps for a train: the locomotive's own limits, floored by the global rule
  * caps, then widened by the locomotive's overage tolerance.
+ *
+ * `base*` are the caps BEFORE the tolerance is added. The tolerance is not
+ * general-purpose headroom: batch filling budgets against the base caps and may
+ * spend the tolerance only to admit a booking WHOLE (never to size a split), so
+ * both figures are returned. `base + tolerance === max` always holds, including
+ * the fallback path.
  */
 export function trainHardCaps(
   locomotive: LocomotiveLimits,
   ruleCaps?: { maxTrainWeightTons?: number; maxTrainLengthMeters?: number },
-): { maxWeightTons: number; maxLengthMeters: number } {
+): {
+  maxWeightTons: number;
+  maxLengthMeters: number;
+  baseWeightTons: number;
+  baseLengthMeters: number;
+  toleranceTons: number;
+  toleranceMeters: number;
+} {
   const overageTons = num(locomotive.overageToleranceTons);
   const overageMeters = num(locomotive.overageToleranceMeters);
 
-  const weight =
-    Math.min(
-      num(locomotive.maxPullWeightTons, Infinity) || Infinity,
-      ruleCaps?.maxTrainWeightTons ?? Infinity,
-    ) + overageTons;
-  const length =
-    Math.min(
-      num(locomotive.maxTrainLengthMeters, Infinity) || Infinity,
-      ruleCaps?.maxTrainLengthMeters ?? Infinity,
-    ) + overageMeters;
+  const baseWeight = Math.min(
+    num(locomotive.maxPullWeightTons, Infinity) || Infinity,
+    ruleCaps?.maxTrainWeightTons ?? Infinity,
+  );
+  const baseLength = Math.min(
+    num(locomotive.maxTrainLengthMeters, Infinity) || Infinity,
+    ruleCaps?.maxTrainLengthMeters ?? Infinity,
+  );
+
+  const baseWeightTons = Number.isFinite(baseWeight) ? baseWeight : MAX_FALLBACK_WEIGHT;
+  const baseLengthMeters = Number.isFinite(baseLength) ? baseLength : MAX_FALLBACK_LENGTH;
+  const toleranceTons = Number.isFinite(baseWeight) ? overageTons : 0;
+  const toleranceMeters = Number.isFinite(baseLength) ? overageMeters : 0;
 
   return {
-    maxWeightTons: Number.isFinite(weight) ? weight : MAX_FALLBACK_WEIGHT,
-    maxLengthMeters: Number.isFinite(length) ? length : MAX_FALLBACK_LENGTH,
+    maxWeightTons: baseWeightTons + toleranceTons,
+    maxLengthMeters: baseLengthMeters + toleranceMeters,
+    baseWeightTons,
+    baseLengthMeters,
+    toleranceTons,
+    toleranceMeters,
   };
 }
 
@@ -129,7 +155,7 @@ export function deriveTrainCapacityFromLocomotive(
   wagonTypes: WagonTypeDimensions[],
   ruleCaps?: { maxTrainWeightTons?: number; maxTrainLengthMeters?: number },
 ): DerivedTrainCapacity {
-  const { maxWeightTons, maxLengthMeters } = trainHardCaps(locomotive, ruleCaps);
+  const caps = trainHardCaps(locomotive, ruleCaps);
 
   const lengths = wagonTypes
     .map((w) => num(w.lengthMeters))
@@ -137,9 +163,9 @@ export function deriveTrainCapacityFromLocomotive(
   const minLength = lengths.length ? Math.min(...lengths) : DEFAULT_WAGON_LENGTH_M;
 
   const maxWagonSlots =
-    minLength > 0 ? Math.max(0, Math.floor(maxLengthMeters / minLength)) : 0;
+    minLength > 0 ? Math.max(0, Math.floor(caps.maxLengthMeters / minLength)) : 0;
 
-  return { maxWeightTons, maxLengthMeters, maxWagonSlots };
+  return { ...caps, maxWagonSlots };
 }
 
 /**
@@ -256,6 +282,58 @@ export function bookingGrossWeightTons(
   return round3(num(cargoTons) + wagonCount * num(tarePerWagonTons));
 }
 
+/**
+ * Size a partial (split-on-payment) offer against the room left on a train,
+ * across ALL THREE capacity axes — not just wagon slots. Each wagon adds
+ * `capacityTons` of payload headroom but its own tare spends the same weight
+ * room the cargo needs, so on a weight-limited train more wagons is not always
+ * more cargo. Scans wagon counts (the last wagon may run part-loaded) and
+ * returns the count that maximizes the cargo carried, with the cargo cap the
+ * caller should apply. Null when not even one part-loaded wagon fits. The
+ * offer is a strict subset of the booking: never all `bookingWagons`.
+ *
+ * `fullWagonsOnly` (bulk): every offered wagon rides at its full rated payload,
+ * so each wagon costs `capacityTons + tareWeightTons` of gross weight room and
+ * the offer is the largest whole-wagon count whose gross fits — never a
+ * part-loaded last wagon squeezed into leftover pull weight.
+ */
+export function sizePartialOfferWagons(
+  room: { wagons: number; weightTons: number; lengthMeters: number },
+  bookingWagons: number,
+  perWagon: { capacityTons: number; tareWeightTons: number; lengthMeters: number },
+  opts?: { fullWagonsOnly?: boolean },
+): { wagons: number; maxCargoTons: number } | null {
+  const maxByLength =
+    perWagon.lengthMeters > 0
+      ? Math.floor(room.lengthMeters / perWagon.lengthMeters)
+      : room.wagons;
+  const ceiling = Math.min(room.wagons, maxByLength, bookingWagons - 1);
+
+  if (opts?.fullWagonsOnly) {
+    const grossPerWagon = perWagon.capacityTons + perWagon.tareWeightTons;
+    const maxByWeight =
+      grossPerWagon > 0 ? Math.floor(room.weightTons / grossPerWagon) : 0;
+    const wagons = Math.min(ceiling, maxByWeight);
+    if (wagons < 1) return null;
+    return { wagons, maxCargoTons: round3(wagons * perWagon.capacityTons) };
+  }
+
+  let wagons = 0;
+  let bestCargoTons = 0;
+  for (let w = 1; w <= ceiling; w += 1) {
+    const cargoAt = Math.min(
+      w * perWagon.capacityTons,
+      room.weightTons - w * perWagon.tareWeightTons,
+    );
+    if (cargoAt > bestCargoTons) {
+      bestCargoTons = cargoAt;
+      wagons = w;
+    }
+  }
+  if (wagons < 1) return null;
+  return { wagons, maxCargoTons: round3(room.weightTons - wagons * perWagon.tareWeightTons) };
+}
+
 export function wagonTypeDimensionsFromEntity(wt: {
   lengthMeters?: number | string | null;
   capacityTons?: number | string | null;
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.controller.ts b/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.controller.ts
index 7dba44f83..fd41d4a29 100644
--- a/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.controller.ts
+++ b/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.controller.ts
@@ -39,6 +39,7 @@ import {
   UploadImportDjiboutiDocumentDto,
 } from "./dto/import-djibouti-operation.dto";
 import { AvailableLocomotivesQueryDto } from "./dto/available-locomotives-query.dto";
+import { BatchBoardQueryDto } from "./dto/batch-board-query.dto";
 import { BookableSchedulesQueryDto } from "./dto/bookable-schedules-query.dto";
 import { AvailableDaysQueryDto } from "./dto/available-days-query.dto";
 import { AvailableDaysForCargoQueryDto } from "./dto/available-days-for-cargo-query.dto";
@@ -124,10 +125,11 @@ export class TrainSchedulingController {
   @Get("batch-board")
   @TrainSchedulingView()
   @ApiOperation({
-    summary: "Batch monitoring board: schedules with bookings grouped by state",
+    summary:
+      "Batch monitoring board: paginated import schedules (all statuses) with bookings grouped by state",
   })
-  getBatchBoard() {
-    return this.bookingBatchService.getBatchBoard();
+  getBatchBoard(@Query() query: BatchBoardQueryDto) {
+    return this.bookingBatchService.getBatchBoard(query);
   }
 
   @Get("batch-board/:scheduleId")
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.service.ts b/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.service.ts
index b72194299..eee880a6b 100644
--- a/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.service.ts
+++ b/apps/edr-freight-api/src/modules/train-scheduling/train-scheduling.service.ts
@@ -1083,7 +1083,7 @@ export class TrainSchedulingService {
           {
             schedulingStatus: SchedulingStatus.Scheduled,
             scheduledAt,
-            wagonsRequired: sumWagonsRequired(booking),
+            wagonsRequired: sumWagonsRequired(booking, wagonPlan),
           },
           manager,
         );
@@ -2514,6 +2514,12 @@ export class TrainSchedulingService {
 
     if (dto.sequenceNo === finalSeq) {
       await this.arriveSchedule(scheduleId);
+    } else {
+      // Mid-corridor auto-unload: bookings destined for this yard alight the
+      // moment the train is recorded here — the yard operator no longer has to
+      // unload each one by hand. The final station is covered by
+      // arriveSchedule's bulk fallback above.
+      await this.bookingJourneyService.autoUnloadAtYard(scheduleId, station.yardId);
     }
 
     return this.getScheduleCheckpoints(scheduleId);
@@ -2639,8 +2645,9 @@ export class TrainSchedulingService {
     const schedules = await this.trainSchedulesRepository.findAll({
       relations: {
         trainSet: { locomotive: true, locomotives: { locomotive: true } },
-        // Yards carry the route's display name used by mapScheduleListItem.
-        route: { originYard: true, destinationYard: true },
+        // Yards carry the route's display name used by mapScheduleListItem;
+        // milestones (with yards) let it show the full corridor path.
+        route: { originYard: true, destinationYard: true, milestones: { yard: true } },
         originStation: true,
         destinationStation: true,
         scheduleBookings: { booking: true },
@@ -3105,6 +3112,10 @@ export class TrainSchedulingService {
     const wagonTypes = await this.loadSchedulingWagonTypeDimensions();
 
     if (locomotive) {
+      // With a locomotive assigned its own limits are the single source of
+      // truth — global-rules / env caps do not floor them (a mis-set global
+      // row once capped every train at 14m). Only an explicit per-request dto
+      // override still applies.
       const derived = deriveTrainCapacityFromLocomotive(
         {
           maxPullWeightTons: Number(locomotive.maxPullWeightTons),
@@ -3114,8 +3125,8 @@ export class TrainSchedulingService {
         },
         wagonTypes,
         {
-          maxTrainWeightTons: ruleWeightCap,
-          maxTrainLengthMeters: ruleLengthCap,
+          maxTrainWeightTons: dto?.maxTrainWeightTons,
+          maxTrainLengthMeters: dto?.maxTrainLengthMeters,
         },
       );
       return {
@@ -4518,6 +4529,11 @@ export class TrainSchedulingService {
                 capacityTons: roundTons(Number(wagon.capacityTons)),
                 lengthMeters: roundTons(Number(wagon.lengthMeters)),
                 assignedWeightTons: roundTons(Number(wagon.assignedWeightTons)),
+                // Empty-wagon weight — the pull limit hauls tare + cargo, so the
+                // frontend needs it to show the gross train weight.
+                tareWeightTons: wagon.wagonType
+                  ? roundTons(Number(wagon.wagonType.tareWeightTons))
+                  : null,
                 status: wagon.status,
                 physicalWagonId: wagon.physicalWagonId ?? null,
                 physicalWagonNumber: wagon.physicalWagon?.wagonNumber ?? null,
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/wagon-plan.util.spec.ts b/apps/edr-freight-api/src/modules/train-scheduling/wagon-plan.util.spec.ts
index e180b482b..19e19dca3 100644
--- a/apps/edr-freight-api/src/modules/train-scheduling/wagon-plan.util.spec.ts
+++ b/apps/edr-freight-api/src/modules/train-scheduling/wagon-plan.util.spec.ts
@@ -82,6 +82,29 @@ describe('wagon-plan.util', () => {
     expect(plan).toHaveLength(2);
   });
 
+  it('counts a bulk booking\'s wagons from the plan, not a flat 1', () => {
+    // 700T of sugar on 60T CW3 gondolas = 12 wagons; the stored wagonsRequired
+    // must carry all of them so gross weight charges 12 tares downstream.
+    const booking = {
+      id: 'bulk-700',
+      reference: 'bulk-700',
+      freightType: 'BULK',
+      cargoTotalWeightVgm: 700,
+      bookingContainers: [],
+    } as unknown as Booking;
+    const plan = buildBulkWagonPlan([booking], cw3);
+    expect(plan).toHaveLength(12);
+    expect(sumWagonsRequired(booking, plan)).toBe(12);
+    // Without a plan the pre-plan fallback still applies.
+    expect(sumWagonsRequired(booking)).toBe(1);
+  });
+
+  it('counts container wagons from the plan TEU packing', () => {
+    const booking = makeContainerBooking('c-plan', [{ quantity: 6, wagonsRequired: 3 }]);
+    const plan = buildContainerWagonPlan([booking], nw5);
+    expect(sumWagonsRequired(booking, plan)).toBe(3);
+  });
+
   it('6×20ft containers = 3 wagon slots (2 per wagon)', () => {
     // 20ft containers have wagonsPerUnit = 0.5, so 6 * 0.5 = 3 wagons
     const booking = makeContainerBooking('b6x20', [{ quantity: 6, wagonsRequired: 3 }]);
diff --git a/apps/edr-freight-api/src/modules/train-scheduling/wagon-plan.util.ts b/apps/edr-freight-api/src/modules/train-scheduling/wagon-plan.util.ts
index 30a46a099..2af606cdc 100644
--- a/apps/edr-freight-api/src/modules/train-scheduling/wagon-plan.util.ts
+++ b/apps/edr-freight-api/src/modules/train-scheduling/wagon-plan.util.ts
@@ -436,7 +436,21 @@ export function expandContainerItems(
   return items;
 }
 
-export function sumWagonsRequired(booking: Booking): number {
+/**
+ * Wagons a booking actually occupies. Prefer counting the built wagon plan's
+ * slots that carry one of the booking's allocations — for BULK that is its
+ * tonnage spread over real wagons (a 700T booking on 70T wagons rides 10
+ * wagons, and downstream gross-weight math charges 10 tares, not 1). Without
+ * a plan there is no capacity to divide by, so fall back to the pre-plan
+ * estimates: 1 for bulk, the lines' stored counts for containers.
+ */
+export function sumWagonsRequired(booking: Booking, wagonPlan?: WagonPlanSlot[]): number {
+  const occupiedSlots = (wagonPlan ?? []).filter((slot) =>
+    slot.allocations.some((allocation) => allocation.bookingId === booking.id),
+  ).length;
+  if (occupiedSlots > 0) {
+    return occupiedSlots;
+  }
   if (booking.freightType === 'BULK') {
     return 1;
   }
diff --git a/apps/edr-freight-api/src/modules/wagons/dto/bulk-set-wagon-status.dto.ts b/apps/edr-freight-api/src/modules/wagons/dto/bulk-set-wagon-status.dto.ts
new file mode 100644
index 000000000..6f28418aa
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/wagons/dto/bulk-set-wagon-status.dto.ts
@@ -0,0 +1,12 @@
+import { WagonStatus } from '@edr/types';
+import { ArrayNotEmpty, IsArray, IsEnum, IsUUID } from 'class-validator';
+
+export class BulkSetWagonStatusDto {
+  @IsArray()
+  @ArrayNotEmpty()
+  @IsUUID('4', { each: true })
+  wagonIds!: string[];
+
+  @IsEnum(WagonStatus)
+  status!: WagonStatus;
+}
diff --git a/apps/edr-freight-api/src/modules/wagons/dto/bulk-transfer-wagons.dto.ts b/apps/edr-freight-api/src/modules/wagons/dto/bulk-transfer-wagons.dto.ts
new file mode 100644
index 000000000..bf1f7f783
--- /dev/null
+++ b/apps/edr-freight-api/src/modules/wagons/dto/bulk-transfer-wagons.dto.ts
@@ -0,0 +1,11 @@
+import { ArrayNotEmpty, IsArray, IsUUID } from 'class-validator';
+
+export class BulkTransferWagonsDto {
+  @IsArray()
+  @ArrayNotEmpty()
+  @IsUUID('4', { each: true })
+  wagonIds!: string[];
+
+  @IsUUID()
+  toYardId!: string;
+}
diff --git a/apps/edr-freight-api/src/modules/wagons/wagons.controller.ts b/apps/edr-freight-api/src/modules/wagons/wagons.controller.ts
index 1d5287dba..556907cde 100644
--- a/apps/edr-freight-api/src/modules/wagons/wagons.controller.ts
+++ b/apps/edr-freight-api/src/modules/wagons/wagons.controller.ts
@@ -10,12 +10,16 @@ import {
   Query,
 } from '@nestjs/common';
 import { ApiOperation, ApiTags } from '@nestjs/swagger';
+import { CurrentUser } from '@edr/api-common';
+import type { TCurrentUser } from '@tria-plc/api-common/modules/auth/types/current-user.type';
 import { FleetManage, FleetView } from '../../common/booking-guards';
 import { CreateWagonDto } from './dto/create-wagon.dto';
 import { ListWagonsQueryDto } from './dto/list-wagons-query.dto';
 import { UpdateWagonDto } from './dto/update-wagon.dto';
 import { AssignWagonToTrainDto } from './dto/assign-wagon-to-train.dto';
 import { ReorderWagonsDto } from './dto/reorder-wagons.dto';
+import { BulkTransferWagonsDto } from './dto/bulk-transfer-wagons.dto';
+import { BulkSetWagonStatusDto } from './dto/bulk-set-wagon-status.dto';
 import { WagonsService } from './wagons.service';
 
 @ApiTags('wagons')
@@ -78,6 +82,20 @@ export class WagonsController {
   unassignFromTrain(@Param('id', ParseUUIDPipe) id: string) {
     return this.wagonsService.unassignFromTrain(id);
   }
+
+  @Post('bulk-transfer')
+  @FleetManage()
+  @ApiOperation({ summary: 'Transfer multiple wagons to a destination yard' })
+  bulkTransfer(@Body() dto: BulkTransferWagonsDto, @CurrentUser() user: TCurrentUser) {
+    return this.wagonsService.bulkTransfer(dto, user?.id);
+  }
+
+  @Post('bulk-status')
+  @FleetManage()
+  @ApiOperation({ summary: 'Set the status of multiple wagons' })
+  bulkSetStatus(@Body() dto: BulkSetWagonStatusDto) {
+    return this.wagonsService.bulkSetStatus(dto);
+  }
 }
 
 // Separate controller for train‑specific reorder (registered in module)
diff --git a/apps/edr-freight-api/src/modules/wagons/wagons.service.ts b/apps/edr-freight-api/src/modules/wagons/wagons.service.ts
index b010c0351..ad39fbf7a 100644
--- a/apps/edr-freight-api/src/modules/wagons/wagons.service.ts
+++ b/apps/edr-freight-api/src/modules/wagons/wagons.service.ts
@@ -1,15 +1,18 @@
 import { WagonMovementKind, WagonStatus } from '@edr/types';
 import { Injectable, NotFoundException, ConflictException } from '@nestjs/common';
 import { InjectRepository } from '@nestjs/typeorm';
-import { Repository, DataSource, FindOptionsOrder, FindOptionsWhere, ILike } from 'typeorm';
+import { Repository, DataSource, FindOptionsOrder, FindOptionsWhere, ILike, In } from 'typeorm';
 import { CreateWagonDto } from './dto/create-wagon.dto';
 import { ListWagonsQueryDto } from './dto/list-wagons-query.dto';
 import { UpdateWagonDto } from './dto/update-wagon.dto';
 import { AssignWagonToTrainDto } from './dto/assign-wagon-to-train.dto';
 import { ReorderWagonsDto } from './dto/reorder-wagons.dto';
+import { BulkTransferWagonsDto } from './dto/bulk-transfer-wagons.dto';
+import { BulkSetWagonStatusDto } from './dto/bulk-set-wagon-status.dto';
 import { Wagon } from './entities/wagon.entity';
 import { WagonMovement } from './entities/wagon-movement.entity';
 import { Train } from '../trains/entities/train.entity';
+import { Yard } from '../rule-engine/entities/yard.entity';
 
 @Injectable()
 export class WagonsService {
@@ -168,6 +171,101 @@ export class WagonsService {
     return this.wagonRepo.save(wagon);
   }
 
+  /**
+   * Relocate many wagons to one destination yard in a single transaction. Each
+   * wagon whose yard actually changes gets a `wagon_movements` ledger row (kind
+   * `Manual`) so the yard history stays auditable — mirrors the single-wagon
+   * `update` path. Wagons already in the destination yard are skipped.
+   */
+  async bulkTransfer(
+    dto: BulkTransferWagonsDto,
+    userId?: string | null,
+  ): Promise<{ moved: number }> {
+    const { wagonIds, toYardId } = dto;
+    if (!wagonIds.length) return { moved: 0 };
+
+    const yard = await this.dataSource
+      .getRepository(Yard)
+      .findOne({ where: { id: toYardId } });
+    if (!yard) throw new NotFoundException('Destination yard not found');
+
+    const queryRunner = this.dataSource.createQueryRunner();
+    await queryRunner.connect();
+    await queryRunner.startTransaction();
+    try {
+      const wagons = await queryRunner.manager.find(Wagon, {
+        where: { id: In(wagonIds) },
+      });
+      if (wagons.length !== wagonIds.length) {
+        throw new NotFoundException('One or more wagons not found');
+      }
+
+      let moved = 0;
+      for (const wagon of wagons) {
+        const previousYardId = wagon.currentYardId ?? null;
+        if (previousYardId === toYardId) continue;
+        wagon.currentYardId = toYardId;
+        // Drop the eager relation so the scalar FK wins on save (see `update`).
+        wagon.currentYard = null;
+        await queryRunner.manager.save(Wagon, wagon);
+        await queryRunner.manager.save(
+          queryRunner.manager.create(WagonMovement, {
+            wagonId: wagon.id,
+            fromYardId: previousYardId,
+            toYardId,
+            kind: WagonMovementKind.Manual,
+            movedByUserId: userId ?? null,
+            occurredAt: new Date(),
+          }),
+        );
+        moved++;
+      }
+
+      await queryRunner.commitTransaction();
+      return { moved };
+    } catch (err) {
+      await queryRunner.rollbackTransaction();
+      throw err;
+    } finally {
+      await queryRunner.release();
+    }
+  }
+
+  /**
+   * Set the same status on many wagons in one transaction (e.g. flip a batch
+   * from Available to Assigned in the yard workspace). Only the `status` column
+   * is touched — train assignment is managed through the assign/unassign flow.
+   */
+  async bulkSetStatus(dto: BulkSetWagonStatusDto): Promise<{ updated: number }> {
+    const { wagonIds, status } = dto;
+    if (!wagonIds.length) return { updated: 0 };
+
+    const queryRunner = this.dataSource.createQueryRunner();
+    await queryRunner.connect();
+    await queryRunner.startTransaction();
+    try {
+      const wagons = await queryRunner.manager.find(Wagon, {
+        where: { id: In(wagonIds) },
+      });
+      if (wagons.length !== wagonIds.length) {
+        throw new NotFoundException('One or more wagons not found');
+      }
+
+      for (const wagon of wagons) {
+        wagon.status = status;
+      }
+      await queryRunner.manager.save(Wagon, wagons);
+
+      await queryRunner.commitTransaction();
+      return { updated: wagons.length };
+    } catch (err) {
+      await queryRunner.rollbackTransaction();
+      throw err;
+    } finally {
+      await queryRunner.release();
+    }
+  }
+
   async reorderWagons(_trainId: string, dto: ReorderWagonsDto): Promise<void> {
     const queryRunner = this.dataSource.createQueryRunner();
     await queryRunner.connect();
diff --git a/apps/edr-freight-api/src/modules/warehouses/dto/load-inventory.dto.ts b/apps/edr-freight-api/src/modules/warehouses/dto/load-inventory.dto.ts
index c81550cd0..3c9c6c85f 100644
--- a/apps/edr-freight-api/src/modules/warehouses/dto/load-inventory.dto.ts
+++ b/apps/edr-freight-api/src/modules/warehouses/dto/load-inventory.dto.ts
@@ -6,6 +6,11 @@ export class LoadInventoryDto {
   @IsUUID()
   wagonId!: string;
 
+  @ApiPropertyOptional({ format: 'uuid', description: 'Train schedule this load belongs to (recorded on the loading).' })
+  @IsOptional()
+  @IsUUID()
+  trainScheduleId?: string;
+
   @ApiPropertyOptional({ description: 'Weight loaded onto the wagon (t)' })
   @IsOptional()
   @IsNumber()
diff --git a/apps/edr-freight-api/src/modules/warehouses/dto/release-order.dto.ts b/apps/edr-freight-api/src/modules/warehouses/dto/release-order.dto.ts
index 681b30284..17b75b424 100644
--- a/apps/edr-freight-api/src/modules/warehouses/dto/release-order.dto.ts
+++ b/apps/edr-freight-api/src/modules/warehouses/dto/release-order.dto.ts
@@ -1,5 +1,5 @@
 import { ApiPropertyOptional } from '@nestjs/swagger';
-import { IsDateString, IsNumber, IsOptional, IsString, Min } from 'class-validator';
+import { IsBoolean, IsDateString, IsNumber, IsOptional, IsString, Min } from 'class-validator';
 
 /** Records a DO / release order being sent to the customer for import pickup. */
 export class ReleaseOrderDto {
@@ -90,4 +90,13 @@ export class ReleaseOrderDto {
   @IsOptional()
   @IsDateString()
   gateOutTime?: string;
+
+  @ApiPropertyOptional({
+    description:
+      'Container bookings only: the operator chose not to weigh this truck. ' +
+      'Tare/gross become optional and the container weight match is skipped. Bulk always weighs.',
+  })
+  @IsOptional()
+  @IsBoolean()
+  weighingSkipped?: boolean;
 }
diff --git a/apps/edr-freight-api/src/modules/warehouses/entities/warehouse-inventory.entity.ts b/apps/edr-freight-api/src/modules/warehouses/entities/warehouse-inventory.entity.ts
index a54f40973..b2c4ca3c4 100644
--- a/apps/edr-freight-api/src/modules/warehouses/entities/warehouse-inventory.entity.ts
+++ b/apps/edr-freight-api/src/modules/warehouses/entities/warehouse-inventory.entity.ts
@@ -36,7 +36,9 @@ export const WAREHOUSE_INVENTORY_TRANSITIONS: Record<WarehouseInventoryStatus, W
   RECEIVED: ['STORED', 'READY_FOR_PICKUP'],
   // Reserve is retired from the operator flow — a stored export item advances
   // straight to loading prep. RESERVED kept for any in-flight/legacy items.
-  STORED: ['RESERVED', 'READY_FOR_LOADING'],
+  // READY_FOR_PICKUP is the way back out for an IMPORT item that was parked in
+  // storage from READY_FOR_PICKUP; without it, Store is a one-way door.
+  STORED: ['RESERVED', 'READY_FOR_LOADING', 'READY_FOR_PICKUP'],
   RESERVED: ['READY_FOR_LOADING'],
   READY_FOR_LOADING: ['LOADED'],
   LOADED: ['DISPATCHED'],
diff --git a/apps/edr-freight-api/src/modules/warehouses/entities/warehouse-loading.entity.ts b/apps/edr-freight-api/src/modules/warehouses/entities/warehouse-loading.entity.ts
index 5f6952aec..1698b8a5e 100644
--- a/apps/edr-freight-api/src/modules/warehouses/entities/warehouse-loading.entity.ts
+++ b/apps/edr-freight-api/src/modules/warehouses/entities/warehouse-loading.entity.ts
@@ -28,9 +28,17 @@ export class WarehouseLoading extends BaseEntity {
   @JoinColumn({ name: 'booking_id' })
   booking?: Booking | null;
 
-  /** Physical wagon the item was loaded onto. References freight.wagons (read-only link). */
-  @Column({ name: 'wagon_id', type: 'uuid' })
-  wagonId!: string;
+  /**
+   * Physical wagon the item was loaded onto. References freight.wagons
+   * (read-only link). Nullable: a schedule-level auto-load may not resolve to
+   * one wagon — the train association then lives in trainScheduleId.
+   */
+  @Column({ name: 'wagon_id', type: 'uuid', nullable: true })
+  wagonId?: string | null;
+
+  /** Train schedule the item was loaded onto (read-only link to scheduling). */
+  @Column({ name: 'train_schedule_id', type: 'uuid', nullable: true })
+  trainScheduleId?: string | null;
 
   @Column({ name: 'loaded_at', type: 'timestamptz' })
   loadedAt!: Date;
diff --git a/apps/edr-freight-api/src/modules/warehouses/handover.service.ts b/apps/edr-freight-api/src/modules/warehouses/handover.service.ts
index 5df15910e..48ab3ac48 100644
--- a/apps/edr-freight-api/src/modules/warehouses/handover.service.ts
+++ b/apps/edr-freight-api/src/modules/warehouses/handover.service.ts
@@ -1,4 +1,5 @@
 import { Injectable, Logger } from '@nestjs/common';
+import { Cron, CronExpression } from '@nestjs/schedule';
 import { NotificationAudience, NotificationType } from '@edr/types';
 import { DataSource, EntityManager, IsNull } from 'typeorm';
 
@@ -150,6 +151,37 @@ export class HandoverService {
     );
   }
 
+  /**
+   * Reminder loop: until a self-haul handover is signed, re-send the sign
+   * notification (in-app + SMS + email) every 5 minutes. One reminder per
+   * booking per tick, newest unsigned handover's reference. Stops the moment
+   * signForBooking() stamps signed_at.
+   *
+   * NB: runs in every API instance — keep a single instance in dev or the
+   * customer is reminded once per instance per tick.
+   */
+  @Cron(CronExpression.EVERY_5_MINUTES, { name: 'handover-sign-reminder' })
+  async remindUnsignedHandovers(): Promise<void> {
+    try {
+      const rows: Array<{ bookingId: string; reference: string }> = await this.dataSource.query(
+        `SELECT DISTINCT ON (booking_id)
+                booking_id AS "bookingId", reference
+           FROM freight.booking_handovers
+          WHERE signed_at IS NULL
+            AND deleted_at IS NULL
+            AND mile_type = 'SELF_HAUL'
+          ORDER BY booking_id, generated_at DESC`,
+      );
+      if (!rows.length) return;
+      this.logger.log(`Handover sign reminder: ${rows.length} booking(s) still unsigned`);
+      for (const row of rows) {
+        await this.notifySignNeeded(row.bookingId, row.reference);
+      }
+    } catch (err) {
+      this.logger.warn(`Handover sign reminder tick failed: ${(err as Error).message}`);
+    }
+  }
+
   /** Sign all unsigned handovers on a booking (self-haul: before the truck leaves). */
   async signForBooking(bookingId: string, userId?: string | null): Promise<void> {
     await this.dataSource
diff --git a/apps/edr-freight-api/src/modules/warehouses/warehouse-inventory.controller.ts b/apps/edr-freight-api/src/modules/warehouses/warehouse-inventory.controller.ts
index 242cecc76..070a267a4 100644
--- a/apps/edr-freight-api/src/modules/warehouses/warehouse-inventory.controller.ts
+++ b/apps/edr-freight-api/src/modules/warehouses/warehouse-inventory.controller.ts
@@ -77,11 +77,6 @@ export class WarehouseInventoryController {
     return this.inventoryService.bulkReceive(dto);
   }
 
-  @Post('load-passed-export')
-  @ApiOperation({ summary: 'Bulk-load all EXPORT inventory that passed inspection (READY_FOR_LOADING)' })
-  loadPassedExport(@Body('performedBy') performedBy?: string) {
-    return this.inventoryService.loadPassedExport(performedBy);
-  }
 
   @Get('ready-to-load-export')
   @ApiOperation({ summary: 'EXPORT inventory that passed inspection and is READY_FOR_LOADING' })
diff --git a/apps/edr-freight-api/src/modules/warehouses/warehouse-inventory.service.ts b/apps/edr-freight-api/src/modules/warehouses/warehouse-inventory.service.ts
index 06e84d455..fd4f2057f 100644
--- a/apps/edr-freight-api/src/modules/warehouses/warehouse-inventory.service.ts
+++ b/apps/edr-freight-api/src/modules/warehouses/warehouse-inventory.service.ts
@@ -2,7 +2,11 @@ import { BadRequestException, Injectable, Logger, NotFoundException } from '@nes
 import { Between, DataSource, EntityManager, FindManyOptions, ILike, LessThanOrEqual, MoreThanOrEqual } from 'typeorm';
 
 import { deriveTradeDirection } from '../../common/derive-trade-direction.util';
+import { Booking } from '../bookings/entities/booking.entity';
 import { Cargo } from '../cargoes/entities/cargoes.entity';
+import { Company } from '../companies/entities/company.entity';
+import { Container } from '../container-management/entities/container.entity';
+import { CargoType } from '../rule-engine/entities/cargo-type.entity';
 import { InterchangeDocumentsService } from '../interchange-documents/interchange-documents.service';
 import type { InterchangeDocument } from '../interchange-documents/entities/interchange-document.entity';
 import { LastMileService } from '../last-mile/last-mile.service';
@@ -207,6 +211,7 @@ export interface EligibleBookingRow {
   customerTin: string | null;
   customerPhone: string | null;
   containerNumber: string | null;
+  sealNumbers: string | null;
   containerQuantity: number | null;
   containerPackagingType: string | null;
   cargoDescription: string | null;
@@ -242,11 +247,6 @@ export interface BulkReceiveResult {
   results: { bookingId: string; status: string; inventoryId?: string; grnNumber?: string; reason?: string }[];
 }
 
-export interface LoadPassedExportResult {
-  loadedCount: number;
-  skippedCount: number;
-  results: { inventoryId: string; status: string; reason?: string }[];
-}
 
 export interface BulkInspectResult {
   inspectedCount: number;
@@ -774,7 +774,8 @@ export class WarehouseInventoryService {
               company.name             AS "customer",
               company.tin              AS "customerTin",
               COALESCE(company.contact_person_phone, company.phone, company.general_manager_phone, company.etrade_phone) AS "customerPhone",
-              bc.container_numbers     AS "containerNumber",
+              COALESCE(bcu.unit_numbers, bc.container_numbers) AS "containerNumber",
+              bcu.seal_numbers         AS "sealNumbers",
               bc.container_quantity    AS "containerQuantity",
               bc.container_packaging_type AS "containerPackagingType",
               (NULLIF(TRIM(COALESCE(b.last_mile_delivery_address, '')), '') IS NOT NULL
@@ -831,6 +832,14 @@ export class WarehouseInventoryService {
              LEFT JOIN freight.container_types container_type ON container_type.id = booking_container.container_type_id
             WHERE booking_container.booking_id = b.id AND booking_container.deleted_at IS NULL
          ) bc ON true
+         LEFT JOIN LATERAL (
+           SELECT string_agg(NULLIF(unit.container_number, ''), ', ' ORDER BY unit.container_number) AS unit_numbers,
+                  string_agg(DISTINCT NULLIF(unit.seal_number, ''), ', ') AS seal_numbers
+             FROM freight.booking_container_units unit
+             JOIN freight.booking_container line
+               ON line.id = unit.booking_container_id AND line.deleted_at IS NULL
+            WHERE line.booking_id = b.id AND unit.deleted_at IS NULL
+         ) bcu ON true
          LEFT JOIN LATERAL (
            SELECT first_mile.id, first_mile.status, first_mile.vehicle_id
              FROM freight.first_mile first_mile
@@ -881,11 +890,18 @@ export class WarehouseInventoryService {
     }> = [];
 
     await this.dataSource.transaction(async (manager) => {
-      await this.validateLocation(manager, {
+      const { warehouse, yard, zone } = await this.validateLocation(manager, {
         warehouseId: dto.warehouseId,
         yardId: dto.yardId,
         zoneId: dto.zoneId,
       });
+      // The receive location is whatever the operator selected above — never a
+      // hand-typed string. Stamp it on the truck entrance for the GRN/notes.
+      if (dto.truckEntrance && !dto.truckEntrance.warehouseCodeLocation) {
+        dto.truckEntrance.warehouseCodeLocation = [warehouse.code, yard.code, zone.code]
+          .filter(Boolean)
+          .join(' / ');
+      }
 
       for (const bookingId of dto.bookingIds) {
         const skip = (reason: string) => {
@@ -1081,46 +1097,6 @@ export class WarehouseInventoryService {
     return result;
   }
 
-  /** Bulk-load all EXPORT inventory that passed inspection and is READY_FOR_LOADING. */
-  async loadPassedExport(performedBy?: string): Promise<LoadPassedExportResult> {
-    const ready = await this.inventoryRepository.findAll({ where: { status: 'READY_FOR_LOADING' } });
-    const result: LoadPassedExportResult = { loadedCount: 0, skippedCount: 0, results: [] };
-
-    for (const item of ready) {
-      const skip = (reason: string) => {
-        result.skippedCount += 1;
-        result.results.push({ inventoryId: item.id, status: 'SKIPPED', reason });
-      };
-
-      if (item.inspectionStatus !== 'PASSED') { skip('Inspection not PASSED'); continue; }
-      const direction = item.bookingId ? await this.getBookingDirection(item.bookingId) : null;
-      if (direction !== 'EXPORT') { skip('Not an EXPORT item'); continue; }
-      const bookingStatus = item.bookingId ? await this.getBookingStatus(item.bookingId) : null;
-      if (bookingStatus !== 'PAID') { skip('Booking not PAID'); continue; }
-
-      await this.dataSource.transaction(async (manager) => {
-        await manager.getRepository(WarehouseInventory).update(item.id, {
-          status: 'LOADED',
-          loadedAt: new Date(),
-        });
-        await this.activityLog.record(
-          {
-            activityType: 'INVENTORY_LOADED',
-            inventoryId: item.id,
-            warehouseId: item.warehouseId,
-            description: 'Bulk loaded (passed export)',
-            performedBy,
-          },
-          manager,
-        );
-      });
-
-      result.loadedCount += 1;
-      result.results.push({ inventoryId: item.id, status: 'LOADED' });
-    }
-
-    return result;
-  }
 
   /** EXPORT inventory rows at a given status (route-derived direction), with booking detail. */
   private async exportInventoryByStatus(
@@ -1302,6 +1278,29 @@ export class WarehouseInventoryService {
     performedBy?: string,
   ): Promise<TrainLoadResult> {
     const result: TrainLoadResult = { loadedCount: 0, skippedCount: 0, results: [] };
+    const [schedule]: Array<{
+      trainNumber: string | null;
+      origin: string | null;
+      destination: string | null;
+      departure: string | null;
+    }> = await this.dataSource.query(
+      `SELECT ts.train_number AS "trainNumber",
+              COALESCE(oy.label, oy.code) AS "origin",
+              COALESCE(dy.label, dy.code) AS "destination",
+              ts.scheduled_departure_date AS "departure"
+         FROM freight.train_schedules ts
+         LEFT JOIN freight.yards oy ON oy.id = ts.origin_station_id
+         LEFT JOIN freight.yards dy ON dy.id = ts.destination_station_id
+        WHERE ts.id = $1 AND ts.deleted_at IS NULL`,
+      [scheduleId],
+    );
+    const trainNote = schedule
+      ? `Loaded onto train ${schedule.trainNumber ?? scheduleId.slice(0, 8)}` +
+        (schedule.origin || schedule.destination
+          ? ` (${schedule.origin ?? '?'} -> ${schedule.destination ?? '?'})`
+          : '') +
+        (schedule.departure ? `, departure ${new Date(schedule.departure).toISOString()}` : '')
+      : undefined;
     const items = await this.trainLoadableItems(scheduleId);
     const byId = new Map(items.map((i) => [i.id, i]));
     const affectedBookingIds = new Set<string>();
@@ -1318,7 +1317,12 @@ export class WarehouseInventoryService {
       if (!item.wagonId) { skip('No wagon allocated — allocate a wagon first'); continue; }
 
       try {
-        await this.load(inventoryId, { wagonId: item.wagonId, loadedBy: performedBy });
+        await this.load(inventoryId, {
+          wagonId: item.wagonId,
+          loadedBy: performedBy,
+          trainScheduleId: scheduleId,
+          notes: trainNote,
+        });
         result.loadedCount += 1;
         result.results.push({ inventoryId, status: 'LOADED' });
         if (item.bookingId) affectedBookingIds.add(item.bookingId);
@@ -1597,6 +1601,8 @@ export class WarehouseInventoryService {
             status: 'UNLOADED',
             unloadedAt: now,
             arrivedAt: existing.arrivedAt ?? now,
+            // Import GRN is issued automatically at train unload.
+            ...(existing.grnNumber ? {} : { grnNumber: this.generateGrnNumber('IMPORT', booking.id, now) }),
           });
           await this.activityLog.record({
             activityType: 'INVENTORY_UNLOADED',
@@ -1630,6 +1636,7 @@ export class WarehouseInventoryService {
           quantity: 1,
           weight: Number(booking.weight) || 0,
           status: 'UNLOADED',
+          grnNumber: this.generateGrnNumber('IMPORT', booking.id, now),
           arrivedAt: now,
           unloadedAt: now,
           notes: allocated?.rule ? `Unloaded → ${allocated.path}` : 'Unloaded from arrived import train',
@@ -2357,6 +2364,27 @@ export class WarehouseInventoryService {
     });
   }
 
+  /**
+   * Self-haul = the customer's own truck collects the goods: either a truck
+   * assigned via the portal (customer_truck_assigned_at), or a walk-in truck
+   * registered at the gate on a booking with no EDR last-mile leg. EDR
+   * last-mile bookings are never self-haul.
+   */
+  private async isSelfHaulBooking(bookingId: string, manager?: EntityManager): Promise<boolean> {
+    const runner = manager ?? this.dataSource;
+    const [row]: Array<{ ok: number }> = await runner.query(
+      `SELECT 1 AS ok
+         FROM freight.bookings b
+         LEFT JOIN freight.service_types st ON st.id = b.service_type_id
+        WHERE b.id = $1 AND b.deleted_at IS NULL
+          AND (b.customer_truck_assigned_at IS NOT NULL
+               OR (NULLIF(TRIM(COALESCE(b.last_mile_delivery_address, '')), '') IS NULL
+                   AND COALESCE(st.includes_last_mile, false) = false))`,
+      [bookingId],
+    );
+    return Boolean(row);
+  }
+
   /** Record a DO / release order sent to the customer. Item stays READY_FOR_PICKUP. */
   async release(id: string, dto: ReleaseOrderDto): Promise<WarehouseInventory> {
     const item = await this.findById(id);
@@ -2366,19 +2394,17 @@ export class WarehouseInventoryService {
       );
     }
 
-    const isTruckLeaving = dto.grossWeight !== undefined && Boolean(dto.gateOutTime);
+    // Leaving = gate-out captured, with either a weighed gross or an explicit
+    // container weighing skip (bulk always weighs).
+    const isTruckLeaving =
+      Boolean(dto.gateOutTime) && (dto.grossWeight !== undefined || dto.weighingSkipped === true);
     if (isTruckLeaving) {
       await this.invoices.assertClearanceAllowed(id);
 
       if (item.bookingId) {
-        const [truckInfo]: Array<{ customerTruckAssignedAt: string | null }> =
-          await this.dataSource.query(
-            `SELECT customer_truck_assigned_at AS "customerTruckAssignedAt"
-               FROM freight.bookings
-              WHERE id = $1 AND deleted_at IS NULL`,
-            [item.bookingId],
-          );
-        const usesCustomerTruck = Boolean(truckInfo?.customerTruckAssignedAt);
+        // Self-haul = customer collects: a truck assigned via the portal, OR a
+        // walk-in truck registered at the gate on a booking with no EDR last mile.
+        const usesCustomerTruck = await this.isSelfHaulBooking(item.bookingId);
         // Self-haul: the handover must be signed before the exit paper is issued.
         // Prefer the structured handover record; fall back to the legacy note.
         const handoverSigned =
@@ -2392,7 +2418,8 @@ export class WarehouseInventoryService {
 
         // Authoritative weight match: the truck's net (gross − tare) must equal the
         // total VGM cargo weight of the containers selected as loaded on it.
-        if (dto.containerNumber && dto.grossWeight != null && dto.tareWeight != null) {
+        // Skipped when the operator chose not to weigh (containers only).
+        if (!dto.weighingSkipped && dto.containerNumber && dto.grossWeight != null && dto.tareWeight != null) {
           const selected = dto.containerNumber
             .split(/[,;\n]+/)
             .map((n) => n.trim())
@@ -2462,13 +2489,10 @@ export class WarehouseInventoryService {
           [item.bookingId],
         );
         // Self-haul: generate the per-booking handover on first truck arrival
-        // (idempotent). It must be signed before the truck leaves.
-        const [selfHaul]: Array<{ ok: number }> = await manager.query(
-          `SELECT 1 AS ok FROM freight.bookings
-            WHERE id = $1 AND customer_truck_assigned_at IS NOT NULL AND deleted_at IS NULL`,
-          [item.bookingId],
-        );
-        if (selfHaul) {
+        // (idempotent) and notify the customer to sign it. Covers BOTH portal-
+        // assigned trucks and walk-in trucks registered manually at the gate
+        // (no portal assignment, no EDR last mile). Must be signed before leaving.
+        if (await this.isSelfHaulBooking(item.bookingId, manager)) {
           await this.handover.ensureForArrivedTruck(item.bookingId, {}, manager);
         }
       }
@@ -2740,11 +2764,12 @@ export class WarehouseInventoryService {
     const rows: Array<{ containerNumber: string; weightTons: string }> =
       await this.dataSource.query(
         `SELECT bcu.container_number AS "containerNumber",
-                COALESCE(bcu.vgm_tons, 0) AS "weightTons"
+                MAX(COALESCE(bcu.vgm_tons, 0)) AS "weightTons"
            FROM freight.booking_container_units bcu
            JOIN freight.booking_container bc
              ON bc.id = bcu.booking_container_id AND bc.deleted_at IS NULL
           WHERE bc.booking_id = $1 AND bcu.deleted_at IS NULL
+          GROUP BY bcu.container_number
           ORDER BY bcu.container_number`,
         [bookingId],
       );
@@ -3369,6 +3394,8 @@ export class WarehouseInventoryService {
           warehouseInventoryId: id,
           bookingId: item.bookingId ?? null,
           wagonId: dto.wagonId,
+          // Which train this load belongs to — durable even if wagons reshuffle.
+          trainScheduleId: dto.trainScheduleId ?? null,
           loadedAt: now,
           loadedBy: dto.loadedBy ?? null,
           loadedWeight,
@@ -3407,7 +3434,7 @@ export class WarehouseInventoryService {
     });
 
     // Enrich with wagon numbers (read-only lookup into the scheduling domain).
-    const wagonIds = [...new Set(loadings.map((l) => l.wagonId))];
+    const wagonIds = [...new Set(loadings.map((l) => l.wagonId).filter((id): id is string => Boolean(id)))];
     const wagonNumbers = new Map<string, string>();
     if (wagonIds.length > 0) {
       const rows: Array<{ id: string; wagon_number: string }> = await this.dataSource.query(
@@ -3418,7 +3445,7 @@ export class WarehouseInventoryService {
     }
 
     return loadings.map((loading) =>
-      Object.assign(loading, { wagonNumber: wagonNumbers.get(loading.wagonId) ?? null }),
+      Object.assign(loading, { wagonNumber: (loading.wagonId && wagonNumbers.get(loading.wagonId)) ?? null }),
     );
   }
 
@@ -3632,23 +3659,25 @@ export class WarehouseInventoryService {
       .leftJoinAndSelect('inv.warehouse', 'warehouse')
       .leftJoinAndSelect('inv.yard', 'yard')
       .leftJoinAndSelect('inv.zone', 'zone')
-      .leftJoin('freight.bookings', 'booking', 'booking.id = inv.booking_id')
-      .leftJoin('freight.companies', 'company', 'company.id = booking.company_id')
+      // Entity-class joins: TypeORM parses a raw 'freight.table' string as an
+      // alias.property path ("freight" alias was not found) — runtime 500.
+      .leftJoin(Booking, 'booking', 'booking.id = inv.booking_id')
+      .leftJoin(Company, 'company', 'company.id = booking.company_id')
       .leftJoin(
-        'freight.containers',
+        Container,
         'container',
         `((inv.container_id IS NOT NULL AND container.id = inv.container_id)
           OR (inv.container_id IS NULL AND container.booking_id = inv.booking_id))
           AND container.deleted_at IS NULL`,
       )
       .leftJoin(
-        'freight.cargoes',
+        Cargo,
         'cargo',
         `((inv.cargo_id IS NOT NULL AND cargo.id = inv.cargo_id)
           OR (inv.cargo_id IS NULL AND cargo.booking_id = inv.booking_id))
           AND cargo.deleted_at IS NULL`,
       )
-      .leftJoin('freight.cargo_types', 'cargo_type', 'cargo_type.id = cargo.cargo_type_id')
+      .leftJoin(CargoType, 'cargo_type', 'cargo_type.id = cargo.cargo_type_id')
       .addSelect('booking.reference', 'b_reference')
       .addSelect('company.name', 'c_name')
       .addSelect('container.container_number', 'ct_number')
@@ -4453,14 +4482,17 @@ export class WarehouseInventoryService {
     if (!dto.driverName?.trim()) {
       throw new BadRequestException('Driver name is required for exit inspection');
     }
-    if (dto.tareWeight === undefined) {
+    // Container bookings may skip the weighbridge entirely (weighingSkipped);
+    // bulk always weighs.
+    const weighingSkipped = dto.weighingSkipped === true;
+    if (dto.tareWeight === undefined && !weighingSkipped) {
       throw new BadRequestException('Tare weight is required for truck arrival');
     }
 
-    const tareWeight = Number(dto.tareWeight);
+    const tareWeight = dto.tareWeight === undefined ? null : Number(dto.tareWeight);
     const grossWeight = dto.grossWeight === undefined ? null : Number(dto.grossWeight);
     const computedNetWeight =
-      grossWeight == null ? null : Number((grossWeight - tareWeight).toFixed(3));
+      grossWeight == null || tareWeight == null ? null : Number((grossWeight - tareWeight).toFixed(3));
     const submittedNetWeight =
       dto.netWeight === undefined || computedNetWeight == null ? computedNetWeight : Number(dto.netWeight);
 
@@ -4472,7 +4504,11 @@ export class WarehouseInventoryService {
         throw new BadRequestException('Weight mismatch: net weight must equal gross weight minus tare weight.');
       }
     }
-    if ((dto.grossWeight !== undefined || dto.gateOutTime || dto.netWeight !== undefined) && grossWeight == null) {
+    if (
+      !weighingSkipped &&
+      (dto.grossWeight !== undefined || dto.gateOutTime || dto.netWeight !== undefined) &&
+      grossWeight == null
+    ) {
       throw new BadRequestException('Gross weight is required for truck exit');
     }
 
@@ -4488,7 +4524,8 @@ export class WarehouseInventoryService {
       dto.truckType?.trim() ? `Truck Type: ${dto.truckType.trim()}` : null,
       dto.containerNumber?.trim() ? `Container Number: ${dto.containerNumber.trim()}` : null,
       dto.gateInTime ? `Gate In Time: ${dto.gateInTime}` : null,
-      `Tare Weight: ${tareWeight} t`,
+      weighingSkipped ? 'Weighing: SKIPPED' : null,
+      tareWeight == null ? null : `Tare Weight: ${tareWeight} t`,
       grossWeight == null ? null : `Gross Weight: ${grossWeight} t`,
       computedNetWeight == null ? null : `Net Weight: ${computedNetWeight} t`,
       dto.gateOutTime ? `Gate Out Time: ${dto.gateOutTime}` : null,
@@ -4512,6 +4549,8 @@ export class WarehouseInventoryService {
       containerNumber: this.extractExitInspectionLine(inspection, 'Container Number') || dto.containerNumber,
       gateInTime: this.extractExitInspectionLine(inspection, 'Gate In Time') || dto.gateInTime,
       tareWeight: this.extractExitInspectionNumber(inspection, 'Tare Weight') ?? dto.tareWeight,
+      // The weigh/skip decision is made at arrival and sticks for the exit.
+      weighingSkipped: dto.weighingSkipped || /^Weighing:\s*SKIPPED/im.test(inspection) || undefined,
     };
   }
 
diff --git a/apps/edr-freight-api/src/modules/warehouses/warehouse-scheduling-adapter.service.ts b/apps/edr-freight-api/src/modules/warehouses/warehouse-scheduling-adapter.service.ts
index dcf685c9f..49bcc996f 100644
--- a/apps/edr-freight-api/src/modules/warehouses/warehouse-scheduling-adapter.service.ts
+++ b/apps/edr-freight-api/src/modules/warehouses/warehouse-scheduling-adapter.service.ts
@@ -1,6 +1,8 @@
 import { Injectable } from '@nestjs/common';
 import { DataSource } from 'typeorm';
 
+import { Booking } from '../bookings/entities/booking.entity';
+import { Route } from '../routes/entities/route.entity';
 import { WarehouseInventory } from './entities/warehouse-inventory.entity';
 
 /**
@@ -50,9 +52,11 @@ export class WarehouseSchedulingAdapterService {
       .leftJoinAndSelect('inv.warehouse', 'warehouse')
       .leftJoinAndSelect('inv.yard', 'yard')
       .leftJoinAndSelect('inv.zone', 'zone')
-      .innerJoin('freight.bookings', 'booking', 'booking.id = inv.booking_id')
+      // Entity-class joins: TypeORM parses a raw 'freight.table' string as an
+      // alias.property path ("freight" alias was not found) — runtime 500.
+      .innerJoin(Booking, 'booking', 'booking.id = inv.booking_id')
       .innerJoin(
-        'freight.routes',
+        Route,
         'route',
         'route.id = :routeId AND (route.origin_yard_id = booking.origin_yard_id OR route.destination_yard_id = booking.destination_yard_id)',
         { routeId },
diff --git a/apps/edr-freight-api/src/seed/data/contract-template-defaults.ts b/apps/edr-freight-api/src/seed/data/contract-template-defaults.ts
new file mode 100644
index 000000000..6fba64010
--- /dev/null
+++ b/apps/edr-freight-api/src/seed/data/contract-template-defaults.ts
@@ -0,0 +1,873 @@
+import type {
+  ContractTemplateArticle,
+  ContractTemplateCode,
+} from "../../modules/contract-templates/entities/contract-template.entity";
+
+/**
+ * Default article packs for the six contract templates, transcribed from the
+ * signed EDR contract documents (test/contrat_docs). Article bodies use the
+ * dynamic-article text format: one clause per line, "- " prefix for bullets
+ * nested under the previous clause, single-line body = plain paragraph.
+ * Handlebars placeholders ({{client.companyName}}, {{contractDate}},
+ * {{contractYear}}, {{reference}}) interpolate at render time.
+ */
+export interface ContractTemplateSeed {
+  code: ContractTemplateCode;
+  name: string;
+  description: string;
+  documentTitle: string;
+  whereasClauses: string[];
+  articles: Array<Omit<ContractTemplateArticle, "order">>;
+}
+
+const a = (id: string, title: string, body: string): Omit<ContractTemplateArticle, "order"> => ({
+  id,
+  title,
+  body: body.trim(),
+});
+
+/* ────────────────────────────── IMPORT / BULK ────────────────────────────── */
+
+const IMPORT_BULK: ContractTemplateSeed = {
+  code: "IMPORT_BULK",
+  name: "Bulk Import Contract",
+  description:
+    "Import of bulk cargo (e.g. steel billets) from Djibouti (DMP/Nagad) to Galaan Multipurpose Port with customs clearance and optional last-mile delivery.",
+  documentTitle: "Bulk Cargo Transportation and Customs Clearance Services",
+  whereasClauses: [
+    "The Client has agreed to engage the Service Provider for transportation and customs clearance services for bulk cargo, including first-mile transport to the railway station at Djibouti, loading at either DMP or Nagad Railway Station (Djibouti), port/rail terminal handling, loading onto the train, railway transport to Galaan Multipurpose Port (GMP) in Ethiopia, unloading at the destination port from train to load directly on truck, onward transportation to the Client's site (excluding truck loading at Djibouti and truck unloading at the Client destination where last-mile service is undertaken by the Service Provider), and all related documentation.",
+    "The Service Provider has agreed to provide the requested services in accordance with the terms and conditions of this Agreement.",
+  ],
+  articles: [
+    a(
+      "objective",
+      "Objective of the Services",
+      `The objective of this contract is to provide the Client with integrated logistics services for the transportation of bulk cargo, including:
+- First-mile transportation in Djibouti from the Client's designated cargo location to the selected railway station (DMP or Nagad).
+- Port handling and loading onto railway wagons.
+- Railway transport from DMP and/or Nagad Railway freight station (Djibouti) to Galaan Multipurpose Port.
+- Customs clearance in Djibouti and Ethiopia.
+- Unloading from train at the destination port to load directly on truck.
+- Last-mile delivery by truck to the Client's delivery site where the last-mile service is undertaken by the Service Provider.
+The truck loading at Djibouti and the truck unloading at the Client's delivery site shall be the responsibility of the Client.`,
+    ),
+    a(
+      "client-obligations",
+      "Obligations of the Client",
+      `Provide written/email/electronic instructions specifying the cargo volume and the selected loading station (DMP or Nagad) for each shipment.
+Prepare and submit all necessary documents and permits to enable smooth service execution.
+Ensure cargo readiness in compliance with specifications (including weight, size, and contour restrictions).
+Handle truck loading at Djibouti Free Zone/Old Port/DMP and any other designated cargo location at Djibouti, and truck unloading at the delivery site.
+Ensure safety and proper securing of cargo during truck handling.
+Submit all required documents necessary for customs clearance and cargo release within one (1) calendar day from the date of request or notification by the Service Provider.
+Upon receipt of the wagon allocation list and train schedule from the Service Provider, ensure that the cargo is transferred to the designated loading freight station and made ready for loading within two (2) days prior to wagon arrival. Any delay beyond this period resulting from Client-related issues shall be subject to a charge of USD 56 per wagon per day, or part thereof, until the cargo is made available for loading.
+Upon arrival of the train at Galaan Multipurpose Port (GMP), offload cargo from wagons within twenty-four (24) hours of train arrival. Where the Client undertakes last-mile transportation, the Client may arrange sufficient trucks at the time of train arrival to enable direct loading of cargo from wagons to trucks.
+In the event the Client is unable to provide trucks for the collection of cargo within twenty-four (24) hours of train arrival, the Service Provider shall have the right to handle and reposition the cargo to any location it deems appropriate, and shall not be held responsible for any loss, shortage, or damage arising from such repositioning.
+Any additional handling, re-handling, or repeated loading operations performed by the Service Provider shall be charged as double handling fees at a rate of USD 4 per ton, payable by the Client.
+If stored, the full cargo must be collected from the Galaan Multipurpose Port compound within three (3) days from the time of train arrival at the port.
+If the Client fails to collect the cargo within the specified period, the Client shall be liable to pay demurrage charges of USD 2 per day per ton, calculated based on the Commercial Bank of Ethiopia's daily selling exchange rate on the date of payment.
+Where the last-mile service is provided by the Service Provider, unload the cargo from the truck at the delivery site within the agreed time frame.
+Designate authorized representatives (with valid power of attorney) for handover at origin and destination.
+Settle demurrage payments within ten (10) calendar days from the date the Service Provider issues a claim.
+Pay the Service Provider one hundred percent (100%) of the contract price in advance for each train set in accordance with the pricing article of this Agreement.
+Contact the Service Provider to obtain confirmation prior to booking and proceeding with payment.`,
+    ),
+    a(
+      "provider-obligations",
+      "Obligations of the Service Provider",
+      `Provide first-mile transportation in Djibouti from the Client's designated location to the selected railway station (DMP or Nagad).
+Carry out port handling and loading onto railway wagons.
+Provide railway transportation from DMP/Nagad (Djibouti) railway freight station to Galaan Multipurpose Port.
+Perform unloading at Galaan Multipurpose Port (GMP) to load directly on truck.
+Perform customs clearance in Djibouti and Ethiopia, including border station procedures.
+Prepare and submit all required transport documentation.
+Provide cargo insurance coverage for each supplied wagon.
+Notify the Client of train schedules, wagon numbers, and expected arrival times in advance.`,
+    ),
+    a(
+      "force-majeure",
+      "Force Majeure",
+      `Neither party shall be liable for delays or non-performance caused by force majeure events beyond their reasonable control.
+Force majeure shall be interpreted in accordance with the Ethiopian Civil Code.`,
+    ),
+    a(
+      "liability",
+      "Liabilities Related to Damages and Losses",
+      `The Service Provider shall be fully responsible for any loss, shortage, or damage to cargo that occurs after it has been taken over until delivery to the Client's delivery site.
+Compensation shall be based on the market value of the cargo, in accordance with applicable laws.`,
+    ),
+    a(
+      "pricing",
+      "Contract Price and Payment Terms",
+      `Rail transport to Galaan Multipurpose Port: USD 59.4 per metric ton.
+Djibouti handling (first-mile, port handling and loading, and documentation): USD 18 (eighteen) per metric ton for cargo from the Free Zone; USD 20 (twenty) per metric ton for cargo from the Old Port or DMP.
+Lashing materials shall be charged at USD 150 (one hundred fifty) per wagon and wood at USD 50 (fifty) per wagon when provided by the Service Provider; the provision continues until the cargo reaches and is fully unloaded at the designated destination station.
+Each wagon shall be loaded up to a maximum of seventy (70) metric tons; for billing purposes one full wagon shall be deemed equivalent to this volume.
+The price for last-mile delivery shall be determined once the cargo departs from the loading point and shall be communicated to the Client by official email upon the Client's request.
+Payments shall be made 100% in advance in USD.`,
+    ),
+    a(
+      "contract-documents",
+      "Contract Documents",
+      `The following documents form part of this contract:
+- This Contract Agreement.
+- Any amendments made to this Agreement.
+- Minutes of negotiation (if any).`,
+    ),
+    a(
+      "documentation",
+      "Documentation Requirements",
+      `The Service Provider shall deliver the following to the Client:
+- Freight Carriage Acceptance Sheet of the Addis Ababa–Djibouti Railway.
+- Notice of transportation and miscellaneous charges.
+- Summary of payment request as per the agreed tariff, if required.`,
+    ),
+    a(
+      "consignment-notes",
+      "Consignment Notes",
+      `The Service Provider shall certify the taking over of goods in the Freight Carriage Acceptance Sheet.
+This document shall serve as prima facie evidence of receipt of the cargo.
+Upon delivery of the cargo to the Client, the Cargo Handover Out Voucher signed by both parties shall serve as evidence of cargo receipt.`,
+    ),
+    a(
+      "termination",
+      "Termination of Contract",
+      `This contract may be terminated:
+- By mutual consent.
+- Upon completion of the agreed contract period or cargo volume.
+- For breach of fundamental provisions, with one-week prior written notice.`,
+    ),
+    a(
+      "effectiveness",
+      "Contract Effectiveness",
+      `This Agreement becomes effective on the date it is signed by both parties.`,
+    ),
+    a(
+      "duration",
+      "Duration",
+      `The contract is valid until August 31, {{contractYear}} from the date of effectiveness, extendable by mutual agreement.`,
+    ),
+    a(
+      "disputes",
+      "Settlement of Disputes",
+      `Disputes shall first be settled amicably.
+If unresolved, disputes shall be referred to the competent Federal Court of Ethiopia in Addis Ababa.
+The governing law shall be the laws of the Federal Democratic Republic of Ethiopia.`,
+    ),
+  ],
+};
+
+/* ────────────────────────────── EXPORT / BULK ────────────────────────────── */
+
+const EXPORT_BULK: ContractTemplateSeed = {
+  code: "EXPORT_BULK",
+  name: "Bulk Export Contract",
+  description:
+    "Export of bulk cargo (e.g. livestock) by railway from Ethiopian loading stations to Nagad railway freight yard, Djibouti.",
+  documentTitle: "Bulk Cargo Transportation Service by Railway",
+  whereasClauses: [
+    "The Client has agreed to deliver bulk cargo to the Service Provider for transport from the agreed Ethiopian loading station to Nagad railway freight yard using the Addis Ababa–Djibouti railway line.",
+    "The Service Provider has agreed to provide the service to transport the bulk cargo from the agreed loading station to Nagad railway freight yard.",
+  ],
+  articles: [
+    a(
+      "objective",
+      "Objective of the Service",
+      `To undertake the railway transportation of bulk cargo from the agreed Ethiopian loading station to Nagad railway freight yard.`,
+    ),
+    a(
+      "client-obligations",
+      "Obligations of the Client",
+      `Give written instruction to the Service Provider to transport a minimum of one wagon of cargo; the wagon request shall be made at least five (5) days in advance for each wagon.
+Maintain detailed information incorporating type, weight, and destination of the cargo ready for shipment, and notify the Service Provider or its nominated agent by notice, email, or fax.
+Prepare the necessary documents and facilities to make the cargo ready for transport.
+Note the allowable transport period of the cargo: the maximum time range during which the goods maintain their condition without any problem. The allowable transport period must be at least two (2) days longer than the delivery period.
+Ensure cargo is properly loaded and fastened in the wagons, provide the necessary lashing and barriers for loading as per the instruction of the departure station, and bear responsibility for the condition of the cargo during the transport period.
+Supply the necessary provisions for the cargo for each wagon and assign a responsible person to travel with the train to check the status of the cargo during transport, where the nature of the cargo so requires.
+Supply the minimum amount of cargo available for at least one wagon.
+Execute loading, lashing, and preparing barriers on wagons at the loading station and provide the complete documents/bill to the Service Provider within one (1) calendar day.
+For each extra calendar day used for loading cargo and completing documents at the loading station, pay the wagon-occupied fee per the pricing article; the fee shall be paid within ten (10) calendar days from the date the Service Provider claims it, failing which compensation is payable calculated on the basis of the Commercial Bank of Ethiopia interest rate for the delay period.
+Be responsible for safety matters, and indemnify and hold the Service Provider harmless against all consequences resulting from accidents arising from or associated with the loading and unloading process.
+Execute and cover the cost of loading and unloading of cargo at both the loading station and Nagad railway freight yard.
+Follow up that the cargo is loaded and unloaded on time.
+Delegate representatives at both ends to consign and receive cargo with signature and stamp. Representatives shall hold a duly signed and stamped power of attorney and shall produce their ID or passport when consigning or receiving the cargo.
+Prepare the necessary facilities to take over the transported cargo at Nagad freight yard upon arrival by issuing handover documents.
+Take the transported cargo out of the wagons at Nagad freight yard within one (1) calendar day starting from the day following the notice of arrival.
+Pay the wagon-occupied fee per the pricing article for delays of more than one (1) calendar day at Nagad railway freight yard due to the fault of the Client in resolving customs or third-party claims or any other causes.
+After the wagon list is submitted to the Client, if a wagon is not loaded due to the fault of the Client, pay 100% of the transportation price per wagon for each unloaded wagon.
+Pay the Service Provider 100% of the contract price in advance for each wagon.`,
+    ),
+    a(
+      "provider-obligations",
+      "Obligations of the Service Provider",
+      `Provide the list and identification numbers of wagons with sequence and locomotives at least twenty-four (24) hours in advance to the Client, with any correction at least twelve (12) hours before arrival at destination.
+Transport the cargo from the loading station to Nagad railway freight yard.
+Provide safe transportation of the cargo throughout the transit.
+Present customs clearance documents and mobilize the rolling stock as needed.
+Provide the wagons assigned for the freight at the agreed place and time, and follow up that the cargo is loaded on time.
+Transport and deliver the cargo taken over, in the condition received, within two (2) calendar days to Nagad railway freight yard.
+Where a wagon carrying cargo stops due to accident or mechanical problem, promptly notify the nearby customs station, police office, and the Client. A wagon stopped in Ethiopia due to mechanical defect shall be maintained within four (4) calendar days; within Nagad (Djibouti) territory within twelve (12) calendar days. In case of accident where the problem cannot be solved within one (1) calendar day and the wagon is not operational, the Service Provider shall have the cargo carried and delivered by another wagon, and shall provide an accident or defect report issued by the local police office regarding the sustained damage.
+Buy a cargo liability insurance policy for each supplied wagon.
+Provide wagon cleaning service and charge the cleaning fee based on actual expenditure.
+If the Client fails or refuses to receive the cargo beyond the allowable transport period, the Service Provider has the right to handle the cargo.
+Neither party shall be liable for any indirect or consequential loss sustained by the other in connection with this Agreement.`,
+    ),
+    a(
+      "force-majeure",
+      "Force Majeure",
+      `The parties have no obligation to pay demurrage or any other compensation if they have failed to discharge their obligations due to force majeure.
+Force majeure shall be deemed to exist when the contract is not performed due to any event beyond the reasonable control of a party which prevents that party from complying with its obligations under this Agreement, including but not limited to:
+- Acts of God (such as, but not limited to, fires, explosions, earthquakes, drought, tidal waves, and floods).
+- War, hostilities (whether war is declared or not), invasion, acts of foreign enemies, mobilization, requisition, or embargo.
+- Rebellion, revolution, insurrection, military or usurped power, or civil war.
+- Contamination by radioactivity from any nuclear fuel or nuclear waste.
+- Riot, commotion, strikes, go-slows, lockouts, or disorder.
+- Acts of terrorism.
+A party wishing to claim protection in respect of a force majeure event shall, as soon as possible following the occurrence or commencement of the event, notify the other party of its nature and expected duration, and shall thereafter keep the other party informed until it is able to perform its obligations under this Agreement.`,
+    ),
+    a(
+      "pricing",
+      "Contract Price and Terms of Payment",
+      `The price of bulk cargo transportation from the loading station to Nagad shall be USD 696 (six hundred ninety-six) per wagon.
+Payment for transport services shall be made in Birr based on the selling price of USD to Birr on the date of payment set by the Commercial Bank of Ethiopia.
+If there is an increment or decrement of the USD exchange rate to Birr between the date of payment and the date the wagon/train number is provided to the Client, either the Client shall make the additional payment to the Service Provider or the Service Provider shall refund the difference from the initial payment to the Client.
+The cost of loading at the loading station and unloading at Nagad shall be covered by the Client and is not part of this contract agreement.
+The Client shall pay 100% of the contract price in advance.
+The Client shall pay a demurrage fee for occupied wagons as follows:
+- Wagons occupied between 1 and 3 days: USD 193 per wagon per day.
+- Wagons occupied between 4 and 7 days: USD 290 per wagon per day.
+- Wagons occupied 8 days and above: USD 590 per wagon per day.
+Demurrage payment shall be made in Birr based on the selling price of USD to Birr set by the Commercial Bank of Ethiopia on the date of the demurrage occurrence.`,
+    ),
+    a(
+      "contract-documents",
+      "Contract Documents",
+      `The following documents shall constitute the contract between the Client and the Service Provider:
+- Amendments made to this contract (if any).
+- This Contract Agreement.
+- Final minutes of negotiation (if any).
+If there is any discrepancy between the documents, they shall be interpreted with priority in the order listed above.`,
+    ),
+    a(
+      "documentation",
+      "Documentation Requirements",
+      `The following documents shall be delivered to the Client upon request for settlement:
+- Consignment Note (cargo handover document to the Client).
+- Summary of payment request of the Service Provider prepared as per the agreed tariff.`,
+    ),
+    a(
+      "consignment-notes",
+      "Consignment Notes",
+      `The Service Provider must certify the taking over of the goods on the duplicates of the consignment note in an appropriate manner and return the duplicate to the Client.
+A consignment note shall be prima facie evidence of the receipt of the goods by the Service Provider and of the kind, number, and weight of the goods.`,
+    ),
+    a(
+      "termination",
+      "Termination of Contract",
+      `The contract may be terminated:
+- Upon mutual consent of the parties.
+- Upon completion of the contract period.
+- If either or both parties breach a fundamental provision of the contract, upon prior legal notice delivered by either party.`,
+    ),
+    a(
+      "effectiveness",
+      "Contract Effectiveness",
+      `The contract shall come into full force and effect on the date when all of the following are accomplished:
+- The contract is signed by the Client and the Service Provider.
+- The Service Provider has received the advance payment of 100% of the contract price for each train set of cargo.`,
+    ),
+    a(
+      "cargo-amount",
+      "Cargo Amount",
+      `The minimum cargo to be transported shall be one wagon.`,
+    ),
+    a(
+      "duration",
+      "Duration of Contract",
+      `The contract shall last for three (3) months starting from the date of contract signing, with possible extension upon mutual agreement.`,
+    ),
+    a(
+      "disputes",
+      "Settlement of Disputes",
+      `If a dispute arises between the parties, they shall exert efforts to settle their differences amicably.
+If the parties fail to settle their disputes amicably, the case shall be taken to the competent Federal Court of law presiding in Addis Ababa.
+The governing law shall be the laws of the Federal Democratic Republic of Ethiopia.`,
+    ),
+  ],
+};
+
+/* ──────────────────────────── INTERCITY / BULK ───────────────────────────── */
+
+const INTERCITY_BULK: ContractTemplateSeed = {
+  code: "INTERCITY_BULK",
+  name: "Bulk Intercity Contract",
+  description:
+    "Domestic (intercity) bulk cargo transportation by railway between Ethiopian freight yards, e.g. Dire Dawa to Sebeta.",
+  documentTitle: "Bulk Cargo Transportation Service by Railway (Intercity)",
+  whereasClauses: [
+    "The Client has requested the Service Provider to transport bulk cargo between the agreed Ethiopian railway freight yards using the Ethio–Djibouti Railway.",
+    "The Service Provider has accepted the Client's request to render the said transportation service.",
+  ],
+  articles: [
+    a(
+      "objective",
+      "Objective of the Contract",
+      `The Service Provider shall undertake the railway transportation of bulk cargo from the agreed origin railway freight yard to the agreed destination railway freight yard.`,
+    ),
+    a(
+      "client-obligations",
+      "Obligations of the Client",
+      `Provide written instructions to the Service Provider to transport a minimum of sixteen (16) wagons of cargo per consignment.
+Prepare all necessary documents, including laboratory tests from the pertinent organ and off-taking contract where applicable, and the facilities required to sign the contract and make the cargo ready for transport.
+Assign representatives at the origin yard and other stations, as required, to hand over the cargo to the Service Provider and handle transit clearance if required.
+Transport the cargo to the designated loading points at the origin yard.
+Be responsible for cargo handling: loading at the origin yard and unloading at the destination yard, in accordance with the standards set by the EDR operations and technical terms.
+Make advance payment to the Service Provider for services in accordance with the payment terms and conditions of this contract.
+Follow up to ensure that the cargo is loaded and unloaded on time.
+Delegate representatives at the cargo destination to immediately receive the transported cargo.
+Ensure representatives are duly authorized with a power of attorney, signed and stamped by the Client, and present valid identification (ID or passport) when consigning or receiving cargo.
+Maintain detailed information including item, weight, and destination of the cargo, and communicate the same to the Service Provider or its nominated agent via written notice, email, or fax.
+Prepare the necessary facilities to immediately take over the transported cargo at the destination upon arrival and provide sufficient trucks at the destination freight yard for unloading from railway wagons.
+Upon arrival of the train/wagon at the unloading site, sign the train arrival confirmation sheet to acknowledge the arrival time.
+Inspect the loaded wagons jointly with the Service Provider and EDR at the loading yard, and again with the customs agent (if required) and the Service Provider at the destination yard.
+After receiving the cargo, sign the Freight Carriage Acceptance Sheet (copies II, III, and IV) immediately to confirm delivery.
+Compensate the Service Provider or any third party for actual loss or damage caused to persons, property, or wagons during unloading where such damage is attributable to the Client's fault.
+Each consignment (train) shall be granted three (3) hours of free time at the loading station and one (1) day at the unloading station. For each additional 3 hours of loading or parking the Client shall pay ETB 5,000 (five thousand) per wagon, and for each additional day of unloading ETB 5,000 (five thousand) per wagon per day.
+Bear demurrage charges of ETB 5,000 (five thousand) per wagon per 3 hours for delays exceeding three (3) hours at any station resulting from the Client's failure to resolve customs or third-party claims.
+Pay 100% of the transport price in advance. Any additional charges or fees shall be paid within ten (10) calendar days after submission of the Service Provider's payment request.`,
+    ),
+    a(
+      "provider-obligations",
+      "Obligations of the Service Provider",
+      `Provide the necessary train(s) to execute the transportation service under this contract, and furnish the Client with the list and identification numbers of wagons and locomotives at least 24 hours in advance, with corrections (if any) communicated at least 12 hours before the expected time of arrival at destination.
+Provide pre-arrival notification including the train number to the discharging terminal and customs at least 24/12 hours before train arrival.
+Transport the cargo from origin to destination within two (2) days from completion of loading (time counting starts upon completion of documentation and loading).
+Provide safe transportation of the cargo throughout transit.
+Deliver the cargo to the Client at the destination railway freight yard in the same condition as received.
+Purchase a cargo liability insurance policy for each wagon transported.`,
+    ),
+    a(
+      "force-majeure",
+      "Force Majeure",
+      `Neither party shall be liable due to a force majeure event.
+For the purposes of this contract, force majeure shall mean any unforeseeable event or circumstance beyond the reasonable control of the affected party which absolutely prevents the performance of the contract, including but not limited to natural disasters, war, civil commotion, strikes, government actions, epidemics, or interruption of railway operations due to accidents or infrastructure failure.
+The affected party shall notify the other party in writing within a reasonable period not exceeding two (2) hours after the occurrence of the force majeure event, providing evidence and details of the impact on performance and the mitigating steps taken.`,
+    ),
+    a(
+      "liability",
+      "Liabilities Related to Damages and Losses",
+      `The Service Provider will be responsible for any loss, shortage, or damage occurring to the cargo it has received.`,
+    ),
+    a(
+      "pricing",
+      "Contract Price",
+      `The price for transporting cargo from the origin freight yard to the destination freight yard shall be USD 400 (four hundred) per wagon.
+Each wagon shall be loaded with a maximum of 70 (seventy) metric tons.
+Payment for transport services may be made in Ethiopian Birr, based on the Commercial Bank of Ethiopia's official selling exchange rate of USD to Birr on the date of payment.
+If the exchange rate changes between the payment and the wagon assignment date, payment adjustments will be made accordingly.
+The contract price shall include the cost of railway transportation from the origin freight yard to the destination freight yard.
+Excluded cost: cargo handling (loading and unloading) is not included in the contract price and shall remain the sole responsibility of the Client.`,
+    ),
+    a(
+      "contract-documents",
+      "Contract Documents",
+      `The following documents shall constitute the contract between the Client and the Service Provider:
+- Amendments made to this contract (if any).
+- This Contract Agreement.
+- Final minutes of negotiation (if any).
+If there is any discrepancy between the documents, they shall be interpreted with priority in the order listed above.`,
+    ),
+    a(
+      "documentation",
+      "Documentation Requirements",
+      `The following documents shall be delivered to the Client by the Service Provider to collect and settle payment:
+- Freight Carriage Acceptance Sheet of the Ethio-Djibouti Railway.
+- Notice of collecting transportation and miscellaneous charges of the Ethio-Djibouti Railway (if any).
+- Summary of payment request of the Service Provider prepared as per the agreed tariff.
+- Railway Waybill.`,
+    ),
+    a(
+      "consignment-notes",
+      "Consignment Notes",
+      `The Service Provider must certify the taking over of the goods on copy III (kept by the consignee for future reference) of the Freight Carriage Acceptance Sheet of the Ethio-Djibouti Railway in an appropriate manner and provide it to the Client.
+The Freight Carriage Acceptance Sheet shall be prima facie evidence of the receipt of the goods by the Service Provider and of the kind, number, and weight of the goods.`,
+    ),
+    a(
+      "termination",
+      "Termination of Contract",
+      `The contract may be terminated:
+- Upon mutual consent of the parties.
+- Upon completion of the contract period or amount of cargo, whichever comes first.
+- If either or both parties breach a fundamental provision of the contract, upon one-week prior legal notice delivered by either party.`,
+    ),
+    a(
+      "duration",
+      "Duration of Contract",
+      `The contract duration shall be three (3) months from the date of effectiveness of the contract, with possible extension upon mutual agreement of the parties.`,
+    ),
+    a(
+      "disputes",
+      "Settlement of Disputes",
+      `If a dispute arises between the parties, they shall exert efforts to settle their differences amicably.
+If the parties fail to settle their dispute amicably, the case shall be taken to the competent Federal Court of law presiding in Addis Ababa.
+The governing law shall be the laws of the Federal Democratic Republic of Ethiopia.`,
+    ),
+    a(
+      "effectiveness",
+      "Contract Effectiveness",
+      `The contract shall come into full force and effect on the date when the contract is signed by the parties and witnesses.`,
+    ),
+  ],
+};
+
+/* ──────────────────────────── IMPORT / CONTAINER ─────────────────────────── */
+
+const IMPORT_CONTAINER: ContractTemplateSeed = {
+  code: "IMPORT_CONTAINER",
+  name: "Container Import Contract",
+  description:
+    "Import container transport by railway from SGTD (Djibouti) to Dire Dawa, Modjo dry port, or Galaan Multipurpose Port, with empty-container return.",
+  documentTitle: "Import Container Transport Service by Railway",
+  whereasClauses: [
+    "The Client has requested and agreed to the transportation of container cargo from SGTD railway freight station at Djibouti to Dire Dawa, Modjo dry port, and Galaan Multipurpose Port (GMP), and the return of empty containers from Dire Dawa, Modjo dry port, and Galaan Multipurpose Port (GMP) to SGTD railway freight station using the Addis Ababa–Djibouti railway line.",
+    "The Service Provider has agreed to transport the container cargo as per the terms of this contract.",
+  ],
+  articles: [
+    a(
+      "objective",
+      "Objective and Scope of the Services",
+      `To provide railway transportation services for 40ft and/or 20ft full containers from SGTD to Dire Dawa, Modjo dry port, and/or Galaan Multipurpose Port (GMP), and empty container return from Dire Dawa, Modjo dry port, and Galaan Multipurpose Port (GMP) to SGTD.
+The scope of the services comprises:
+- Railway transport service.
+- Cargo handling at Galaan Multipurpose Port (GMP).`,
+    ),
+    a(
+      "client-obligations",
+      "Obligations of the Client",
+      `Give written/email/electronic shipment instructions to the Service Provider for transportation of container cargo from SGTD to Dire Dawa, Modjo dry port, and/or Galaan Multipurpose Port (GMP).
+Prepare all necessary documents and facilities for shipment.
+Ensure the following minimum supply of containers per shipment based on the loading terminal and destination:
+- Minimum of twenty-five (25) 40ft containers or fifty (50) 20ft containers to Modjo dry port.
+- Minimum of ten (10) 40ft containers or twenty (20) 20ft containers to Dire Dawa dry port.
+- Minimum of one (1) 40ft container or two (2) TEU to Galaan Multipurpose Port (GMP).
+One flat wagon must carry either one 40ft container or two 20ft containers.
+If two 20ft containers are loaded on one flat wagon, their weight difference must not exceed 10 tons.
+Ensure timely loading and unloading of cargo.
+Assign representatives at both ends to oversee container handover and ensure the necessary arrangements for cargo reception at the destination upon arrival.
+Maintain and provide detailed cargo information (type, weight, destination, etc.).
+Be responsible for cargo handling, loading, and unloading of both empty and full containers at Modjo, Dire Dawa dry port, and SGTD.
+Book wagons at least five (5) days in advance.
+Ensure containers are ready one day before the planned loading date.
+Submit all required documents to the Djibouti Nagad station at least 24 hours in advance before starting to load. Failure to submit the documents within the stipulated time shall result in the following demurrage charges, calculated as a percentage of the booked wagon price:
+- Delay of up to twelve (12) hours: 20% of the booked wagon price.
+- Delay exceeding twelve (12) hours but not more than one (1) day: 50% of the booked wagon price.
+- Delay of more than one (1) day: 100% of the booked wagon price.
+Collect the full container from Galaan Multipurpose Port (GMP) within three (3) calendar days from the day following the arrival notice.
+If the Client fails to collect the container within the specified period, the Service Provider shall have the right to reposition the container to any location it deems appropriate; in such case, the Service Provider shall not be held responsible for any damage or loss arising from such repositioning.
+If the Client fails to collect the container from Galaan Multipurpose Port within the specified period, the Client shall be liable to pay demurrage charges of 15 USD per day per 20ft container and 27 USD per day per 40ft container, calculated based on the Commercial Bank of Ethiopia's daily selling exchange rate on the date of payment.
+In the event the Client fails to collect the container(s) within the specified period, the Client shall be liable to pay double handling charges of 27 USD per 20ft container per handling or 40 USD per 40ft container per handling, calculated based on the Commercial Bank of Ethiopia's daily selling exchange rate on the date of payment.
+If empty containers cannot be offloaded from the train upon arrival at SGTD due to any Client-related issue, the Client shall be liable for the applicable penalty charges.
+Penalty charges for delay at SGTD/Nagad upon train arrival: 20 USD per day per 20ft container; 33 USD per day per 40ft container.
+Collect the containers within one day at Dire Dawa and Modjo dry port, or make the necessary payment to the dry port as per the standard of the dry port.
+For returning empty containers, deliver to Dire Dawa dry port, Modjo dry port, or Galaan Multipurpose Port.
+Once the empty containers are returned from the Client's premises and stored at Dire Dawa/Modjo dry port while awaiting train allocation for return to SGTD, any demurrage and/or storage charges incurred from the dry port thereafter shall not be the responsibility or liability of the Service Provider; the Client shall be solely responsible for settling such charges.
+Provide clean empty containers that meet SGTD standards. If the port refuses to take over an empty container because of inside cleanliness problems, additional cleaning costs incurred due to non-compliance will be borne by the Client.
+Ensure containers are structurally intact and meet weight distribution requirements.
+Prohibited cargo: cargo covered with tarpaulin is not allowed due to safety risks.
+Notify the Service Provider forty-eight (48) hours in advance before wagon booking if transporting hazardous or valuable goods.
+If a booked wagon is not loaded due to Client-related issues, including but not limited to a damaged container, missing lock, unpaid demurrage, port system errors, or incomplete documentation and submission, the Client shall be charged 100% of the total price of the reserved wagon.
+Refund requests before wagon booking require an official request, with a 3% administrative fee deducted. If the refund is due to the Service Provider, the Client shall receive a full refund. Refunds not requested and completed within six months shall be considered waived.
+Pay 100% of the transportation fee in advance for each train set.
+Settle additional penalties due to non-compliance within ten (10) days of invoice issuance.
+Late payment incurs a penalty of an additional 10%.`,
+    ),
+    a(
+      "provider-obligations",
+      "Obligations of the Service Provider",
+      `Assign the necessary voyage based on the operational schedule and cargo demand, and notify the train schedule 48 hours in advance.
+Provide a list of wagons/voyage or train number 24 hours in advance and update corrections 12 hours before arrival.
+Provide safe transportation of the containers.
+Deliver the cargo within two (2) days after train departure, provided that all required documents are submitted on time and no unforeseen circumstances or events occur.
+Return empty containers from Dire Dawa, Modjo, and Galaan Multipurpose Port to SGTD within seven (7) calendar days of receipt.
+In the event of export cargo operations, the Service Provider may prioritize the loading of export containers during the loading of empty containers and the unloading of import containers from the train at Galaan Multipurpose Port.
+The Service Provider reserves the right to refuse the transportation of any cargo classified as dangerous goods.
+If any operational, technical, or mechanical problem occurs throughout the transit, notify customs and arrange cargo transfer within 4 days if the incident occurs in Ethiopia, or within 6 days if it occurs in Djibouti.
+Provide accident or defect reports if needed.
+Buy cargo liability insurance for each wagon.`,
+    ),
+    a(
+      "force-majeure",
+      "Force Majeure",
+      `Neither party shall be liable for delays or non-performance caused by force majeure events beyond their reasonable control.
+Force majeure shall be interpreted in accordance with the Ethiopian Civil Code.`,
+    ),
+    a(
+      "pricing",
+      "Contract Price and Terms of Payment",
+      `From SGTD to Dire Dawa dry port, the rate is USD 919 per one 40ft or USD 942 per two 20ft containers with empty return; USD 762 per one 40ft or USD 780 per two 20ft containers without empty return.
+From SGTD to Modjo, the rate is USD 1,781 per one 40ft or USD 1,808 per two 20ft containers with empty return, and USD 1,507 per one 40ft or two 20ft containers without empty return.
+From SGTD to Galaan Multipurpose Port, the rate is USD 1,916 per one 40ft or USD 1,944 per two 20ft containers with empty return, and USD 1,676 per one 40ft or USD 1,690 per two 20ft containers without empty return.
+If cargo exceeds 40 tons per two 20ft containers of gross weight, additional charges apply proportionally.
+Gross weight shall be the total sum of cargo, packing, and container tare weight.
+Payment for any additional tonnage shall be made in advance before the container is loaded onto the wagon.
+The price of loading and unloading and container handling at Modjo, Dire Dawa dry port, and SGTD container railway freight yard is not part of this contract; it is the Client's responsibility.
+Additional costs (if applicable):
+- Last-mile delivery service by truck from Galaan Multipurpose Port or Modjo to Addis Ababa or Modjo and surrounding areas shall incur an additional cost, fully covered by the Client.
+- For clients utilizing EDR's last-mile logistics services, the applicable charges shall vary based on the cargo movement route.
+- The charge for last-mile delivery from Galaan Multipurpose Port and Modjo dry port shall be communicated to the Client by the Service Provider after receiving the necessary details regarding the cargo destination, type, and weight.
+All payments shall be made one hundred percent (100%) in advance in United States Dollars (USD).`,
+    ),
+    a(
+      "contract-documents",
+      "Contract Documents",
+      `The following documents constitute this contract:
+- Amendments (if any).
+- This Contract Agreement.
+- Final minutes of negotiation (if any).
+If there is any discrepancy between the documents, they shall be interpreted with priority in the order listed above.`,
+    ),
+    a(
+      "documentation",
+      "Documentation Requirements",
+      `Equipment Interchange Receipt of SGTD, Railway Waybill, Container Carriage Acceptance Sheet, and incidental charges (if any).
+Payment summary as per the agreed contract price (if required).`,
+    ),
+    a(
+      "consignment-notes",
+      "Consignment Notes",
+      `The Service Provider must certify the taking over and handing over of the container cargo on the Freight Carriage Acceptance Sheet of EDR in an appropriate manner and provide it to the Client.
+The Freight Carriage Acceptance Sheet shall be prima facie evidence of the receipt of the container cargo by the Service Provider and of the kind, number, and weight of the goods.
+Upon delivery of the cargo to the Client, the Cargo Handover Out Voucher signed by both parties shall serve as evidence of cargo receipt.`,
+    ),
+    a(
+      "amendment",
+      "Amendment",
+      `This contract can be amended by mutual agreement.
+Notwithstanding the above, the Service Provider may revise transport tariffs due to operational and regulatory changes by providing at least five (5) working days' prior written notice to the Client.`,
+    ),
+    a(
+      "termination",
+      "Termination of Contract",
+      `The contract may be terminated:
+- By mutual agreement.
+- Upon completion of the contract period or agreed cargo shipments.
+- If either party breaches fundamental terms.`,
+    ),
+    a(
+      "effectiveness",
+      "Contract Effectiveness",
+      `The contract is valid once signed by both parties and witnesses.`,
+    ),
+    a(
+      "duration",
+      "Contract Period",
+      `Valid until August 31, {{contractYear}}, with a possible extension upon mutual agreement.`,
+    ),
+    a(
+      "disputes",
+      "Settlement of Disputes",
+      `Disputes shall be settled amicably.
+If unresolved, disputes shall be taken to the Federal Court in Addis Ababa.`,
+    ),
+  ],
+};
+
+/* ──────────────────────────── EXPORT / CONTAINER ─────────────────────────── */
+
+const EXPORT_CONTAINER: ContractTemplateSeed = {
+  code: "EXPORT_CONTAINER",
+  name: "Container Export Contract",
+  description:
+    "Export container transport, freight forwarding, and customs clearing from Galaan Multipurpose Port or Modjo dry port to SGTD container freight station (Djibouti).",
+  documentTitle: "Export Container Transport, Freight Forwarding and Customs Clearing Service",
+  whereasClauses: [
+    "The parties have agreed on the following services: rail transport, customs clearance, transit work, freight forwarding, and handling of container cargo.",
+  ],
+  articles: [
+    a(
+      "objective",
+      "Objective and Scope of the Services",
+      `Customs clearance (Ethiopia side):
+- Processing of export declarations.
+- Coordination with the Ethiopian Customs Authority for clearance.
+- Ensuring compliance with all export regulations.
+Rail transport:
+- Transportation of containers from Galaan Multipurpose Port (GMP) or Modjo dry port to SGTD container freight station.
+Djibouti transit and handling:
+- Customs clearance in Djibouti.
+- Coordination with Djibouti port and transit authorities.
+- Freight forwarding and last-mile facilitation as required.
+Excluded costs:
+- Shore handling.
+- Shifting of containers from SGTD to DMP or DMP to SGTD port.`,
+    ),
+    a(
+      "client-obligations",
+      "Obligations of the Client",
+      `Give written/email instructions to the Service Provider for transportation of containers from Galaan Multipurpose Port (GMP) and/or Modjo to Djibouti.
+Supply a minimum of two (2) 20ft containers (or an equivalent load to fill one flat wagon).
+Submit all forwarding service booking requests at least seventy-two (72) hours prior to the scheduled train departure and no later than 7 days before the vessel cut-off time, whichever is applicable.
+For clients requiring first-mile service, submit a first-mile service request notice no less than seventy-two (72) hours in advance.
+Complete and submit accurate export documents as per the request of the Service Provider; payment must be submitted at least 36 hours before train departure.
+Deliver all cargo to the designated loading port or freight station at least three (3) hours prior to the scheduled train loading time.
+Failure to meet the stated deadlines may result in cancellation of the booking and transfer arrangements; any resulting delays, penalties, or additional costs shall be the sole responsibility of the Client.
+If the Client fails to deliver the container, fails to provide the requested documents for completing export documents as instructed above, or cancels after wagon reservation, the Client shall pay USD 150.00 per wagon as a penalty, after notification.
+Containers must have four (4) undamaged corners.
+One flat wagon must carry either one 40ft container or two 20ft containers.
+If two 20ft containers are loaded on one flat wagon, their weight difference must not exceed 10 tons.
+The gross weight of the container must not exceed the standard loading capacity indicated on the container; the Client is responsible for ensuring full compliance with the maximum allowable load.
+Prohibited cargo: cargo covered with tarpaulin is not allowed due to safety risks.
+If the cargo to be transported is dangerous and/or valuable goods, notify the Service Provider 48 (forty-eight) hours before the wagon booking for further discussion and decision.
+Refund requests before wagon booking require an official request, with a 3% administrative fee deducted. If the refund is due to the Service Provider, the Client shall receive a full refund. Refunds not requested and completed within six months shall be considered waived.
+Any delay caused by missing or incorrect documents shall be the Client's responsibility.
+100% of the transportation and customs clearance fee must be paid in advance.`,
+    ),
+    a(
+      "provider-obligations",
+      "Obligations of the Service Provider",
+      `Complete gate pass processing and submit to Nagad Station for each shipment within eighteen (18) hours after train departure.
+The Service Provider reserves the right to refuse the transportation of any cargo classified as dangerous goods.
+Maintain cargo liability insurance for railway transport; additional insurance for port handling or last-mile transport shall be the Client's responsibility.
+The Service Provider is not liable for customs penalties or demurrage due to delays beyond its control.
+Notify the Client immediately, in writing, of any delays, port issues, or customs holds.
+The Service Provider shall not be liable for:
+- Inherent defects of the cargo.
+- Improper packing or loading conducted by the Client.
+- Customs-related delays.
+- Delays caused by force majeure events.`,
+    ),
+    a(
+      "force-majeure",
+      "Force Majeure",
+      `Neither party shall be liable for delays or non-performance caused by force majeure events beyond their reasonable control.
+Force majeure shall be interpreted in accordance with the Ethiopian Civil Code.`,
+    ),
+    a(
+      "pricing",
+      "Pricing and Payment Terms",
+      `Railway transportation charges from GMP to SGTD: USD 819 (eight hundred nineteen) per 40ft container; USD 834 (eight hundred thirty-four) per two (2) 20ft containers.
+Railway transportation charges from Modjo to SGTD: USD 725 (seven hundred twenty-five) per 40ft container; USD 725 (seven hundred twenty-five) per two (2) 20ft containers.
+Where the total cargo weight exceeds fifty (50) metric tons per two (2) 20ft containers, an additional charge of USD 10 (ten) shall apply for each excess metric ton.
+Freight forwarding and customs clearance charges from GMP to SGTD: USD 540 (five hundred forty) per 40ft container; USD 349 (three hundred forty-nine) per 20ft container.
+Freight forwarding and customs clearance charges from Modjo to SGTD: USD 569 (five hundred sixty-nine) per 40ft container; USD 389 (three hundred eighty-nine) per 20ft container.
+For consolidated containers containing more than one (1) shipping document, the first document shall be included under the agreed contract rate; any additional document within the same container shall be subject to an extra charge of USD 50 per document.
+Payment must be supported by an official receipt before cargo departs from Galaan Multipurpose Port/Modjo.
+If the Client uses PIL Shipping Line, any local charge incurred will be covered by the Client as per the invoice issued by the shipping line.
+If storage or demurrage occurs due to Client-related issues (delay in document submission, payment delay, or any other Client-related reason), the Client shall pay the corresponding charges; charges apply per day after the free storage period, based on the invoice and SGTD tariff.
+During export season, EDR may provide seasonal export support through the facilitation of empty containers.
+Additional costs (if applicable):
+- First-mile delivery service by truck within Addis Ababa or Modjo and surrounding areas, originating from warehouses or any other places designated by the Client, shall incur an additional cost fully covered by the Client.
+- For clients utilizing EDR's first- or last-mile logistics services, the applicable charges shall vary based on the cargo movement route.
+- The charge for first-mile delivery to Galaan Multipurpose Port and Modjo dry port shall be communicated to the Client by the Service Provider after receiving the necessary details regarding the cargo origin, type, and weight.
+- For any vessel outbound charges, IMO charges, or other fees not included in the port handling payment, the Service Provider shall request the Client to settle the required amount based on the official receipt issued by the port or the shipping line.
+Payment terms:
+- All charges, including rail transport and customs clearance charges, remain 100% payable in advance.
+- Payments shall be calculated based on the Commercial Bank of Ethiopia's daily selling exchange rate on the date the wagon or train number is provided.
+- If the exchange rate changes between the payment and the wagon assignment date, adjustments will be made accordingly.
+- Any additional costs incurred due to customs issues or port delays shall be borne by the Client and paid based on actual costs, supported by official receipts, within 10 days.
+- Late payment incurs a penalty of 10%.`,
+    ),
+    a(
+      "contract-documents",
+      "Contract Documents",
+      `The following documents shall constitute the contract between the Client and the Service Provider:
+- Any amendments made to this contract (if applicable).
+- This Contract Agreement.
+- Final minutes of negotiation (if applicable).
+In the event of any discrepancy between these documents, they shall be interpreted with priority in the order listed above.`,
+    ),
+    a(
+      "documentation",
+      "Documentation Requirements",
+      `Consignment Note (cargo handover document).
+Payment summary prepared as per the agreed tariff, if required.`,
+    ),
+    a(
+      "consignment-notes",
+      "Consignment Notes",
+      `The Service Provider must certify the taking over and handing over of the container cargo on the Freight Carriage Acceptance Sheet of EDR in an appropriate manner and provide it to the Client.
+The Freight Carriage Acceptance Sheet shall be prima facie evidence of the receipt of the container cargo by the Service Provider and of the kind, number, and weight of the goods.
+Upon delivery of the cargo to the Client, the Cargo Handover Out Voucher signed by both parties shall serve as evidence of cargo receipt.`,
+    ),
+    a(
+      "amendment",
+      "Amendment",
+      `This contract can be amended by mutual agreement.
+Notwithstanding the above, the Service Provider may revise transport tariffs due to operational and regulatory changes by providing at least five (5) working days' prior written notice to the Client.`,
+    ),
+    a(
+      "termination",
+      "Termination of Contract",
+      `The contract may be terminated:
+- By mutual agreement.
+- Upon completion of the contract period or agreed cargo shipments.
+- If either party breaches fundamental terms.
+If terminated for cause, the terminating party must issue a 15-day written notice specifying the breach and allow an opportunity to cure, if applicable.`,
+    ),
+    a(
+      "effectiveness",
+      "Contract Effectiveness",
+      `The contract is valid once signed by both parties and witnesses.`,
+    ),
+    a(
+      "duration",
+      "Contract Period",
+      `Valid until August 31, {{contractYear}}, with a possible extension upon mutual agreement.`,
+    ),
+    a(
+      "disputes",
+      "Settlement of Disputes",
+      `Disputes shall be settled amicably.
+If amicable settlement fails, disputes shall be submitted to the Federal Court located in Addis Ababa.
+The signatories confirm that they are fully authorized to sign and execute this Contract Agreement; the power of attorney of the signatories for the parties is enclosed with this contract agreement.`,
+    ),
+  ],
+};
+
+/* ─────────────────────────── INTERCITY / CONTAINER ───────────────────────── */
+
+const INTERCITY_CONTAINER: ContractTemplateSeed = {
+  code: "INTERCITY_CONTAINER",
+  name: "Container Intercity Contract",
+  description:
+    "Domestic (intercity) container transport by railway between Ethiopian terminals — Galaan Multipurpose Port, Modjo dry port, and Dire Dawa — including empty repositioning.",
+  documentTitle: "Intercity Container Transport Service by Railway",
+  whereasClauses: [
+    "The Client has requested and agreed to the transportation of container cargo between the agreed Ethiopian railway terminals (Galaan Multipurpose Port (GMP), Modjo dry port, and Dire Dawa), including the repositioning of empty containers between those terminals, using the Addis Ababa–Djibouti railway line within Ethiopia.",
+    "The Service Provider has agreed to transport the container cargo as per the terms of this contract.",
+  ],
+  articles: [
+    a(
+      "objective",
+      "Objective and Scope of the Services",
+      `To provide domestic railway transportation services for 40ft and/or 20ft full containers between the agreed Ethiopian terminals (Galaan Multipurpose Port (GMP), Modjo dry port, and Dire Dawa), and the repositioning of empty containers between those terminals.
+The scope of the services comprises:
+- Railway transport service between the agreed origin and destination terminals.
+- Cargo handling at Galaan Multipurpose Port (GMP).`,
+    ),
+    a(
+      "client-obligations",
+      "Obligations of the Client",
+      `Give written/email/electronic shipment instructions to the Service Provider for transportation of container cargo between the agreed terminals.
+Prepare all necessary documents and facilities for shipment.
+Ensure the minimum supply of containers per shipment agreed with the Service Provider for the selected loading terminal and destination.
+One flat wagon must carry either one 40ft container or two 20ft containers.
+If two 20ft containers are loaded on one flat wagon, their weight difference must not exceed 10 tons.
+Ensure timely loading and unloading of cargo.
+Assign representatives at both ends to oversee container handover and ensure the necessary arrangements for cargo reception at the destination upon arrival.
+Maintain and provide detailed cargo information (type, weight, destination, etc.).
+Be responsible for cargo handling, loading, and unloading of both empty and full containers at Modjo and Dire Dawa dry port.
+Book wagons at least five (5) days in advance.
+Ensure containers are ready one day before the planned loading date.
+Collect the full container from Galaan Multipurpose Port (GMP) within three (3) calendar days from the day following the arrival notice.
+If the Client fails to collect the container within the specified period, the Service Provider shall have the right to reposition the container to any location it deems appropriate; in such case, the Service Provider shall not be held responsible for any damage or loss arising from such repositioning.
+If the Client fails to collect the container from Galaan Multipurpose Port within the specified period, the Client shall be liable to pay demurrage charges of 15 USD per day per 20ft container and 27 USD per day per 40ft container, calculated based on the Commercial Bank of Ethiopia's daily selling exchange rate on the date of payment.
+In the event the Client fails to collect the container(s) within the specified period, the Client shall be liable to pay double handling charges of 27 USD per 20ft container per handling or 40 USD per 40ft container per handling.
+Collect the containers within one day at Dire Dawa and Modjo dry port, or make the necessary payment to the dry port as per the standard of the dry port.
+Once empty containers are returned from the Client's premises and stored at a dry port while awaiting train allocation, any demurrage and/or storage charges incurred from the dry port thereafter shall be the sole responsibility of the Client.
+Provide clean empty containers that meet the receiving terminal's standards; additional cleaning costs incurred due to non-compliance will be borne by the Client.
+Ensure containers are structurally intact and meet weight distribution requirements.
+Prohibited cargo: cargo covered with tarpaulin is not allowed due to safety risks.
+Notify the Service Provider forty-eight (48) hours in advance before wagon booking if transporting hazardous or valuable goods.
+If a booked wagon is not loaded due to Client-related issues, including but not limited to a damaged container, missing lock, unpaid demurrage, port system errors, or incomplete documentation and submission, the Client shall be charged 100% of the total price of the reserved wagon.
+Refund requests before wagon booking require an official request, with a 3% administrative fee deducted. If the refund is due to the Service Provider, the Client shall receive a full refund. Refunds not requested and completed within six months shall be considered waived.
+Pay 100% of the transportation fee in advance for each train set.
+Settle additional penalties due to non-compliance within ten (10) days of invoice issuance.
+Late payment incurs a penalty of an additional 10%.`,
+    ),
+    a(
+      "provider-obligations",
+      "Obligations of the Service Provider",
+      `Assign the necessary voyage based on the operational schedule and cargo demand, and notify the train schedule 48 hours in advance.
+Provide a list of wagons/voyage or train number 24 hours in advance and update corrections 12 hours before arrival.
+Provide safe transportation of the containers.
+Deliver the cargo within two (2) days after train departure, provided that all required documents are submitted on time and no unforeseen circumstances or events occur.
+In the event of export cargo operations, the Service Provider may prioritize the loading of export containers during the loading of empty containers and the unloading of containers from the train at Galaan Multipurpose Port.
+The Service Provider reserves the right to refuse the transportation of any cargo classified as dangerous goods.
+If any operational, technical, or mechanical problem occurs throughout the transit, notify the Client and the relevant authorities and arrange cargo transfer within four (4) days.
+Provide accident or defect reports if needed.
+Buy cargo liability insurance for each wagon.`,
+    ),
+    a(
+      "force-majeure",
+      "Force Majeure",
+      `Neither party shall be liable for delays or non-performance caused by force majeure events beyond their reasonable control.
+Force majeure shall be interpreted in accordance with the Ethiopian Civil Code.`,
+    ),
+    a(
+      "pricing",
+      "Contract Price and Terms of Payment",
+      `The applicable rate per 40ft container or per two (2) 20ft containers for the agreed route shall be as per the prevailing EDR domestic container tariff, as set out in the commercial schedule of this contract.
+If cargo exceeds 40 tons per two 20ft containers of gross weight, additional charges apply proportionally.
+Gross weight shall be the total sum of cargo, packing, and container tare weight.
+Payment for any additional tonnage shall be made in advance before the container is loaded onto the wagon.
+The price of loading and unloading and container handling at Modjo and Dire Dawa dry port is not part of this contract; it is the Client's responsibility.
+Additional costs (if applicable):
+- Last-mile delivery service by truck from the destination terminal to the Client's premises shall incur an additional cost, fully covered by the Client.
+- For clients utilizing EDR's last-mile logistics services, the applicable charges shall vary based on the cargo movement route and shall be communicated to the Client by the Service Provider after receiving the necessary details regarding the cargo destination, type, and weight.
+All payments shall be made one hundred percent (100%) in advance.
+Payment may be made in Ethiopian Birr based on the Commercial Bank of Ethiopia's daily selling exchange rate on the date the wagon or train number is provided; if the exchange rate changes between the payment and the wagon assignment date, adjustments will be made accordingly.`,
+    ),
+    a(
+      "contract-documents",
+      "Contract Documents",
+      `The following documents constitute this contract:
+- Amendments (if any).
+- This Contract Agreement.
+- Final minutes of negotiation (if any).
+If there is any discrepancy between the documents, they shall be interpreted with priority in the order listed above.`,
+    ),
+    a(
+      "documentation",
+      "Documentation Requirements",
+      `Equipment Interchange Receipt, Railway Waybill, Container Carriage Acceptance Sheet, and incidental charges (if any).
+Payment summary as per the agreed contract price (if required).`,
+    ),
+    a(
+      "consignment-notes",
+      "Consignment Notes",
+      `The Service Provider must certify the taking over and handing over of the container cargo on the Freight Carriage Acceptance Sheet of EDR in an appropriate manner and provide it to the Client.
+The Freight Carriage Acceptance Sheet shall be prima facie evidence of the receipt of the container cargo by the Service Provider and of the kind, number, and weight of the goods.
+Upon delivery of the cargo to the Client, the Cargo Handover Out Voucher signed by both parties shall serve as evidence of cargo receipt.`,
+    ),
+    a(
+      "amendment",
+      "Amendment",
+      `This contract can be amended by mutual agreement.
+Notwithstanding the above, the Service Provider may revise transport tariffs due to operational and regulatory changes by providing at least five (5) working days' prior written notice to the Client.`,
+    ),
+    a(
+      "termination",
+      "Termination of Contract",
+      `The contract may be terminated:
+- By mutual agreement.
+- Upon completion of the contract period or agreed cargo shipments.
+- If either party breaches fundamental terms.`,
+    ),
+    a(
+      "effectiveness",
+      "Contract Effectiveness",
+      `The contract is valid once signed by both parties and witnesses.`,
+    ),
+    a(
+      "duration",
+      "Contract Period",
+      `Valid until August 31, {{contractYear}}, with a possible extension upon mutual agreement.`,
+    ),
+    a(
+      "disputes",
+      "Settlement of Disputes",
+      `Disputes shall be settled amicably.
+If unresolved, disputes shall be taken to the Federal Court in Addis Ababa.`,
+    ),
+  ],
+};
+
+export const CONTRACT_TEMPLATE_DEFAULTS: ContractTemplateSeed[] = [
+  IMPORT_BULK,
+  EXPORT_BULK,
+  INTERCITY_BULK,
+  IMPORT_CONTAINER,
+  EXPORT_CONTAINER,
+  INTERCITY_CONTAINER,
+];
diff --git a/apps/edr-freight-api/src/seed/edr-truck-fleet.seeder.ts b/apps/edr-freight-api/src/seed/edr-truck-fleet.seeder.ts
new file mode 100644
index 000000000..e8349c806
--- /dev/null
+++ b/apps/edr-freight-api/src/seed/edr-truck-fleet.seeder.ts
@@ -0,0 +1,94 @@
+import { Injectable, Logger } from '@nestjs/common';
+import { DataSource } from 'typeorm';
+
+/**
+ * EDR-owned truck fleet used by first-mile / last-mile pickup & delivery.
+ * These 62 trucks used to be a hardcoded list in the truck-arrival UI; the
+ * first/last-mile flows now read the fleet from `freight.vehicles` via
+ * VehiclesService, so the fleet must exist as vehicle rows.
+ *
+ * `[powerPlate, trailerPlate]` in fleet order 1..62. Region code "03-ET" is
+ * shared by every truck. NB: 56 trucks are configured for 40ft containers, 6
+ * for 20ft only — the specific 6 are not yet confirmed, so all default to 40ft.
+ * List `TWENTY_FT_SEQS` when known.
+ */
+const EDR_TRUCK_FLEET: ReadonlyArray<readonly [string, string]> = [
+  ['A45843', '43495'], ['A45866', '43470'], ['A45853', '43508'], ['A45849', '43414'],
+  ['A45845', '43492'], ['A45820', '43487'], ['A45842', '43478'], ['A45841', '43515'],
+  ['A45832', '43504'], ['A45856', '43510'], ['A45865', '43490'], ['A45855', '43485'],
+  ['A45840', '43499'], ['A45867', '43493'], ['A45833', '43466'], ['A45858', '43496'],
+  ['A45819', '43474'], ['A45834', '43502'], ['A45868', '43469'], ['A45831', '43488'],
+  ['A45828', '43479'], ['A45850', '43505'], ['A45823', '43480'], ['A45838', '43472'],
+  ['A45854', '43500'], ['A45839', '43486'], ['A45861', '43513'], ['A45830', '43501'],
+  ['A45826', '43498'], ['A45836', '43467'], ['A45822', '43512'], ['A45821', '43210'],
+  ['A45837', '43475'], ['A45860', '43497'], ['A45863', '43477'], ['A45825', '43483'],
+  ['A45829', '43473'], ['A45824', '43491'], ['A45857', '43481'], ['A45851', '43509'],
+  ['A45827', '43468'], ['A45859', '43887'], ['A45846', '43471'], ['A45847', '43511'],
+  ['A45852', '43484'], ['A45844', '43476'], ['A45835', '43482'], ['A45864', '43503'],
+  ['A45848', '43494'], ['A45862', '43465'], ['A39105', '41218'], ['A39098', '41220'],
+  ['A29900', '41865'], ['A39097', '41226'], ['A39104', '41225'], ['A39103', '41223'],
+  ['A39106', '41221'], ['A39107', '41215'], ['A39094', '41222'], ['A39099', '41216'],
+  ['A39092', '41224'], ['A31801', '41214'],
+];
+
+/** Fleet sequence numbers (1-based) that are 20ft-only. 6 of 62 — fill once confirmed. */
+const TWENTY_FT_SEQS = new Set<number>();
+
+@Injectable()
+export class EdrTruckFleetSeeder {
+  private readonly logger = new Logger(EdrTruckFleetSeeder.name);
+
+  constructor(private readonly dataSource: DataSource) {}
+
+  /**
+   * Idempotent: `ON CONFLICT (plate_number) DO NOTHING`. Uses raw SQL with an
+   * explicit column list on purpose — the `Vehicle` entity declares an
+   * `availability` column that does not exist in the DB (schema drift), so a
+   * repository insert would fail. This inserts only real columns.
+   */
+  async run(): Promise<void> {
+    const columns = [
+      'code', 'plate_number', 'registration_number', 'power_plate_no', 'trailer_plate_no',
+      'vehicle_type', 'manufacturer', 'model', 'year', 'fuel_type', 'capacity',
+      'status', 'ownership', 'currency', 'description',
+    ];
+
+    const rows: unknown[][] = EDR_TRUCK_FLEET.map(([power, trailer], i) => {
+      const seq = i + 1;
+      const ft = TWENTY_FT_SEQS.has(seq) ? '20ft' : '40ft';
+      return [
+        `EDR-TRK-${String(seq).padStart(3, '0')}`,
+        `03-ET ${power}`,
+        trailer,
+        `03-ET ${power}`,
+        trailer,
+        'TRUCK',
+        'EDR',
+        `${ft} Container Truck`,
+        2018,
+        'DIESEL',
+        TWENTY_FT_SEQS.has(seq) ? 1 : 2,
+        'ACTIVE',
+        'EDR',
+        'ETB',
+        `EDR-owned container truck configured for ${ft} containers.`,
+      ];
+    });
+
+    const params: unknown[] = [];
+    const valueGroups = rows.map((row, r) => {
+      const placeholders = row.map((_, c) => `$${r * columns.length + c + 1}`);
+      params.push(...row);
+      return `(${placeholders.join(', ')})`;
+    });
+
+    const result = await this.dataSource.query(
+      `INSERT INTO freight.vehicles (${columns.join(', ')}) VALUES ${valueGroups.join(', ')} ` +
+        `ON CONFLICT (plate_number) DO NOTHING`,
+      params,
+    );
+
+    const inserted = Array.isArray(result) ? result.length : (result?.affectedRows ?? 0);
+    this.logger.log(`EDR truck fleet seed: ${EDR_TRUCK_FLEET.length} trucks ensured (new: ${inserted}).`);
+  }
+}
diff --git a/apps/edr-freight-api/src/seed/file-upload-settings.seeder.ts b/apps/edr-freight-api/src/seed/file-upload-settings.seeder.ts
index 99dae5974..13759ddb3 100644
--- a/apps/edr-freight-api/src/seed/file-upload-settings.seeder.ts
+++ b/apps/edr-freight-api/src/seed/file-upload-settings.seeder.ts
@@ -18,6 +18,28 @@ interface OnboardingField {
 
 const DOC_EXTENSIONS = ["pdf", "jpg", "jpeg", "png"];
 
+/** fileKey of the delegation letter attached to the Power of Attorney step. */
+export const POA_DELEGATION_FILE_KEY = "poa_delegation_letter";
+
+/**
+ * Seeded as optional: the delegation letter is only mandatory once a PoA has
+ * been entered, or when the company operates as a freight forwarder. That rule
+ * spans form fields as well as files, so it lives in the onboarding gate
+ * (companies.service.getOnboardingRequirements) rather than in `isRequired`.
+ */
+const poaDelegationField = (displayOrder: number): OnboardingField => ({
+  fileKey: POA_DELEGATION_FILE_KEY,
+  fileLabel: "PoA Delegation Letter",
+  helpText:
+    "Signed letter in which the General Manager delegates the representative named above.",
+  isRequired: false,
+  isMultiple: false,
+  maxFiles: 1,
+  allowedExtensions: DOC_EXTENSIONS,
+  maxSizeMb: 10,
+  displayOrder,
+});
+
 /** Documents required from an Ethiopian company at onboarding. */
 const ETHIOPIAN_ONBOARDING_FIELDS: OnboardingField[] = [
   {
@@ -54,6 +76,7 @@ const ETHIOPIAN_ONBOARDING_FIELDS: OnboardingField[] = [
     maxSizeMb: 10,
     displayOrder: 3,
   },
+  poaDelegationField(4),
 ];
 
 /** Documents required from a Foreign company at onboarding. */
@@ -102,6 +125,7 @@ const FOREIGN_ONBOARDING_FIELDS: OnboardingField[] = [
     maxSizeMb: 10,
     displayOrder: 4,
   },
+  poaDelegationField(5),
 ];
 
 /** Legacy combined set, kept for the older per-company-type codes. */
diff --git a/apps/edr-freight-web/backoffice/package.json b/apps/edr-freight-web/backoffice/package.json
index b89807b72..2f2e0d7be 100644
--- a/apps/edr-freight-web/backoffice/package.json
+++ b/apps/edr-freight-web/backoffice/package.json
@@ -16,29 +16,93 @@
     "@edr/types": "workspace:*",
     "@edr/ui-common": "workspace:*",
     "@hello-pangea/dnd": "^18.0.1",
+    "@hookform/resolvers": "^5.4.0",
     "@mantine/core": "^9.3.0",
     "@mantine/dates": "^9.3.0",
     "@mantine/hooks": "^9.3.0",
+    "@radix-ui/react-accordion": "^1.2.13",
+    "@radix-ui/react-alert-dialog": "^1.1.16",
+    "@radix-ui/react-avatar": "^1.1.12",
+    "@radix-ui/react-checkbox": "^1.3.4",
+    "@radix-ui/react-collapsible": "^1.1.13",
+    "@radix-ui/react-context-menu": "^2.3.0",
+    "@radix-ui/react-dialog": "^1.1.16",
+    "@radix-ui/react-dropdown-menu": "^2.1.17",
+    "@radix-ui/react-hover-card": "^1.1.16",
+    "@radix-ui/react-label": "^2.1.9",
+    "@radix-ui/react-navigation-menu": "^1.2.15",
+    "@radix-ui/react-popover": "^1.1.16",
+    "@radix-ui/react-progress": "^1.1.9",
+    "@radix-ui/react-radio-group": "^1.4.0",
+    "@radix-ui/react-scroll-area": "^1.2.11",
+    "@radix-ui/react-select": "^2.3.0",
+    "@radix-ui/react-separator": "^1.1.9",
+    "@radix-ui/react-slider": "^1.4.0",
+    "@radix-ui/react-slot": "^1.2.5",
+    "@radix-ui/react-switch": "^1.3.0",
+    "@radix-ui/react-tabs": "^1.1.14",
+    "@radix-ui/react-toast": "^1.2.16",
+    "@radix-ui/react-toggle-group": "^1.1.12",
+    "@radix-ui/react-tooltip": "^1.2.9",
+    "@react-pdf-viewer/core": "^3.12.0",
+    "@react-pdf-viewer/default-layout": "^3.12.0",
+    "@react-pdf-viewer/zoom": "^3.12.0",
+    "@react-pdf/renderer": "^4.5.1",
+    "@reduxjs/toolkit": "^2.12.0",
     "@tabler/icons-react": "^3.44.0",
     "@tanstack/react-query": "^5.100.11",
+    "@tanstack/react-table": "^8.21.3",
+    "@tinymce/tinymce-react": "^6.3.0",
     "@tria-plc/iamui": "file:../../../local-packages/tria-plc-iamui-0.1.1.tgz",
     "@vis.gl/react-google-maps": "^1.8.3",
     "axios": "^1.7.7",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^3.6.0",
+    "dayjs": "^1.11.21",
+    "dompurify": "^3.4.8",
+    "ethiopian-calendar-date-converter": "^2.1.6",
+    "file-type": "^18.7.0",
+    "framer-motion": "^12.40.0",
+    "html2canvas": "^1.4.1",
+    "i18next": "^26.3.5",
+    "i18next-browser-languagedetector": "^8.2.1",
+    "jquery": "^3.7.1",
+    "js-cookie": "^3.0.8",
+    "jspdf": "^3.0.4",
     "libphonenumber-js": "^1.12.24",
+    "lodash": "^4.18.1",
     "lucide-react": "^1.14.0",
+    "next-themes": "^0.4.6",
+    "pdf-lib": "^1.17.1",
+    "prop-types": "^15.8.1",
+    "qs": "^6.15.2",
     "radix-ui": "^1.4.3",
     "react": "19.2.6",
+    "react-css-nocode-editor": "^1.0.13",
+    "react-day-picker": "^9.14.0",
     "react-dom": "19.2.6",
+    "react-dropzone": "^14.4.1",
+    "react-hook-form": "^7.77.0",
     "react-hot-toast": "^2.6.0",
+    "react-i18next": "^17.0.8",
+    "react-icons": "^5.6.0",
+    "react-image-crop": "^11.0.10",
+    "react-intersection-observer": "^9.16.0",
+    "react-pdf": "^10.4.1",
+    "react-pdf-html": "^2.1.5",
+    "react-resizable-panels": "^3.0.6",
     "react-router-dom": "^6.27.0",
+    "react-signature-canvas": "1.1.0-alpha.2",
     "recharts": "^3.8.1",
     "socket.io-client": "^4.8.3",
     "sonner": "^2.0.7",
     "stream-browserify": "^3.0.0",
     "tailwind-merge": "^3.6.0",
     "tinymce": "^8.6.0",
+    "xlsx": "^0.18.5",
+    "zod": "^3.25.76",
     "zustand": "^5.0.0"
   },
   "devDependencies": {
@@ -46,6 +110,9 @@
     "@edr/tsconfig": "workspace:*",
     "@tailwindcss/vite": "^4.3.0",
     "@types/google.maps": "^3.65.2",
+    "@types/jquery": "^3.5.34",
+    "@types/js-cookie": "^3.0.6",
+    "@types/lodash": "^4.17.24",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.2",
diff --git a/apps/edr-freight-web/backoffice/src/App.tsx b/apps/edr-freight-web/backoffice/src/App.tsx
index 0bee03fc6..18d382933 100644
--- a/apps/edr-freight-web/backoffice/src/App.tsx
+++ b/apps/edr-freight-web/backoffice/src/App.tsx
@@ -13,6 +13,7 @@ import {
   PackageOpen,
   Paperclip,
   Receipt,
+  ScrollText,
   Send,
   Settings,
   ShieldCheck,
@@ -62,11 +63,9 @@ import CustomerDetailPage from "./pages/customers/CustomerDetailPage";
 import CustomersPage from "./pages/customers/CustomersPage";
 import InvoiceDetailPage from "./pages/invoices/InvoiceDetailPage";
 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 OverviewPage from "./pages/dashboard/OverviewPage";
-import UserManagementHostPage from "./pages/dashboard/user-management/UserManagementHostPage";
+import AiBookingMockTestPage from "./pages/ai/AiBookingMockTestPage";
 import PaymentsPage from "./pages/payments/PaymentsPage";
 //import EmployeesPage from "./pages/dashboard/user-management/EmployeesPage";
 import { RequirePermission } from "./components/auth/RequirePermission";
@@ -77,13 +76,10 @@ import {
   isEthiopianGl,
   isSuperAdmin,
 } 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 DropdownSettingsPage from "./pages/dropdown_settings/DropdownSettingsPage";
+import ContractTemplatesPage from "./pages/contract_templates/ContractTemplatesPage";
+import ContractTemplateEditorPage from "./pages/contract_templates/ContractTemplateEditorPage";
 import FleetResourcePage from "./pages/fleet/FleetResourcePage";
 import VehicleDetailPage from "./pages/fleet/VehicleDetailPage";
 import DriverDetailPage from "./pages/fleet/DriverDetailPage";
@@ -129,6 +125,7 @@ import WarehouseListPage from "./pages/warehouses/WarehouseListPage";
 import WarehouseRulesPage from "./pages/warehouses/WarehouseRulesPage";
 import { HealthCheck } from "./features/health/HealthCheck";
 import FaydaCallbackPage from "./pages/FaydaCallbackPage";
+import { UserManagementRoutes } from "./user-management/route";
 
 const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
   {
@@ -141,7 +138,7 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
       },
       {
         label: "Staff",
-        href: "/um",
+        href: "/user-management",
         icon: <Users />,
       },
       {
@@ -193,6 +190,8 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
         icon: <Send />,
         permission: FREIGHT_PERMS.contracts.createBooking,
       },
+      // Operations Path A queue: per-booking self-clearance review for
+      // GENERAL non-customs booking instances (and legacy self-clear bookings).
       {
         label: "Self-Clearance Review",
         href: "/dashboard/contracts/ops-clearance",
@@ -461,6 +460,12 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
         icon: <Settings />,
         permission: FREIGHT_PERMS.admin,
       },
+      {
+        label: "Contract templates",
+        href: "/dashboard/contract-templates",
+        icon: <ScrollText />,
+        permission: FREIGHT_PERMS.admin,
+      },
     ],
   },
   {
@@ -649,7 +654,7 @@ const App = () => {
     return (
       <Routes>
         <Route path="/auth" element={<LoginPage />} />
-        <Route path="/um/*" element={<UserManagementHostPage />} />
+        {/* <Route path="/um/*" element={<UserManagementHostPage />} /> */}
         <Route path="/callback" element={<FaydaCallbackPage />} />
         <Route path="*" element={<Navigate to="/auth" replace />} />
       </Routes>
@@ -658,7 +663,8 @@ const App = () => {
 
   return (
     <Routes>
-      <Route path="/um/*" element={<UserManagementHostPage />} />
+      {UserManagementRoutes()}
+      {/* <Route path="/um/*" element={<UserManagementHostPage />} /> */}
       <Route path="/health" element={<HealthCheck />} />
       <Route path="/callback" element={<FaydaCallbackPage />} />
       <Route path="/" element={<Navigate to="/dashboard/overview" replace />} />
@@ -668,6 +674,11 @@ const App = () => {
       />
       <Route path="/dashboard" element={<DashboardShell />}>
         <Route path="overview" element={<OverviewPage />} />
+        {/* Dev/testing page for the mock AI booking assistant. */}
+        <Route
+          path="ai-booking-mock-test"
+          element={<AiBookingMockTestPage />}
+        />
         <Route path="profile" element={<MyProfilePage />} />
 
         <Route path="booking-requests" element={<BookingRequestsPage />} />
@@ -854,6 +865,18 @@ const App = () => {
             </RequirePermission>
           }
         />
+        {/* Completion of an initiated (bare) instance after per-booking
+            clearance — same form, submits to the complete endpoint. */}
+        <Route
+          path="contracts/:id/bookings/:bookingId/complete"
+          element={
+            <RequirePermission
+              permission={FREIGHT_PERMS.contracts.createBooking}
+            >
+              <GlCreateBookingForm />
+            </RequirePermission>
+          }
+        />
         <Route
           path="bookings/:id/milestones"
           element={<BookingMilestonesRedirect />}
@@ -1223,18 +1246,18 @@ const App = () => {
         />
 
         {/* Legacy embedded user management routes */}
-        <Route path="user-management" element={<UserManagementPage />} />
+        {/* <Route path="user-management" element={<UserManagementPage />} />
         <Route path="user-management/users" element={<UsersPage />} />
         <Route
           path="user-management/position-types"
           element={<PositionTypesPage />}
-        />
+        /> */}
         {/* <Route path="user-management/employees" element={<EmployeesPage />} /> */}
-        <Route
+        {/* <Route
           path="user-management/permissions"
           element={<PermissionsPage />}
         />
-        <Route path="user-management/roles" element={<RolesPage />} />
+        <Route path="user-management/roles" element={<RolesPage />} /> */}
 
         <Route
           path="file-settings"
@@ -1252,6 +1275,22 @@ const App = () => {
             </RequirePermission>
           }
         />
+        <Route
+          path="contract-templates"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.admin}>
+              <ContractTemplatesPage />
+            </RequirePermission>
+          }
+        />
+        <Route
+          path="contract-templates/:code"
+          element={
+            <RequirePermission permission={FREIGHT_PERMS.admin}>
+              <ContractTemplateEditorPage />
+            </RequirePermission>
+          }
+        />
 
         <Route
           path="configuration"
@@ -1301,10 +1340,6 @@ const App = () => {
           path="rule-engine/:resource"
           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>
diff --git a/apps/edr-freight-web/backoffice/src/DMS/api/dms.api.ts b/apps/edr-freight-web/backoffice/src/DMS/api/dms.api.ts
new file mode 100644
index 000000000..c241a9e17
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/DMS/api/dms.api.ts
@@ -0,0 +1,12 @@
+// STUB — see DMS/pages/_shared/utils.ts. DMS documents API, not migrated.
+// Returns empty lists so document lists render empty instead of crashing.
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export async function listMyDocuments(..._args: any[]): Promise<any[]> {
+  return [];
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export async function getMyShares(..._args: any[]): Promise<any[]> {
+  return [];
+}
diff --git a/apps/edr-freight-web/backoffice/src/DMS/api/dms.http.ts b/apps/edr-freight-web/backoffice/src/DMS/api/dms.http.ts
new file mode 100644
index 000000000..d1d3a0f8f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/DMS/api/dms.http.ts
@@ -0,0 +1,24 @@
+// STUB — see DMS/pages/_shared/utils.ts. DMS HTTP client, not migrated.
+// Returns empty payloads so any DMS call degrades to "no results" rather than
+// crashing. Wire the real @/DMS/api/dms.http if DMS is brought over.
+
+function warn(method: string, url: string) {
+  // eslint-disable-next-line no-console
+  console.warn(`[DMS stub] ${method} ${url} — DMS is not migrated; returning empty.`);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+async function empty<T = any>(): Promise<{ data: T }> {
+  return { data: {} as T };
+}
+
+export const dmsHttp = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  get: <T = any>(url: string): Promise<{ data: T }> => (warn("GET", url), empty<T>()),
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  post: <T = any>(url: string): Promise<{ data: T }> => (warn("POST", url), empty<T>()),
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  put: <T = any>(url: string): Promise<{ data: T }> => (warn("PUT", url), empty<T>()),
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  delete: <T = any>(url: string): Promise<{ data: T }> => (warn("DELETE", url), empty<T>()),
+};
diff --git a/apps/edr-freight-web/backoffice/src/DMS/api/folders.api.ts b/apps/edr-freight-web/backoffice/src/DMS/api/folders.api.ts
new file mode 100644
index 000000000..895182597
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/DMS/api/folders.api.ts
@@ -0,0 +1,12 @@
+// STUB — see DMS/pages/_shared/utils.ts. DMS folders API, not migrated.
+// Returns empty lists so folder pickers render empty instead of crashing.
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export async function getMySubFolders(..._args: any[]): Promise<any[]> {
+  return [];
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export async function getMyCollaborationsSubFolders(..._args: any[]): Promise<any[]> {
+  return [];
+}
diff --git a/apps/edr-freight-web/backoffice/src/DMS/pages/_shared/file-kind.utils.ts b/apps/edr-freight-web/backoffice/src/DMS/pages/_shared/file-kind.utils.ts
new file mode 100644
index 000000000..50e2878c0
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/DMS/pages/_shared/file-kind.utils.ts
@@ -0,0 +1,21 @@
+// STUB — see DMS/pages/_shared/utils.ts. DMS is not migrated; inert placeholder.
+
+export type FileKind =
+  | "word"
+  | "excel"
+  | "ppt"
+  | "pdf"
+  | "image"
+  | "video"
+  | "file";
+
+export function detectFileKind(nameOrMime?: string | null): FileKind {
+  const s = (nameOrMime ?? "").toLowerCase();
+  if (/\.(docx?|word)/.test(s)) return "word";
+  if (/\.(xlsx?|csv)/.test(s)) return "excel";
+  if (/\.(pptx?)/.test(s)) return "ppt";
+  if (/\.pdf/.test(s)) return "pdf";
+  if (/\.(png|jpe?g|gif|webp|svg|image)/.test(s)) return "image";
+  if (/\.(mp4|mov|avi|video)/.test(s)) return "video";
+  return "file";
+}
diff --git a/apps/edr-freight-web/backoffice/src/DMS/pages/_shared/od-icons.tsx b/apps/edr-freight-web/backoffice/src/DMS/pages/_shared/od-icons.tsx
new file mode 100644
index 000000000..cb9c26f65
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/DMS/pages/_shared/od-icons.tsx
@@ -0,0 +1,14 @@
+// STUB — see DMS/pages/_shared/utils.ts. DMS file-type icons, not migrated.
+// Each renders nothing so document components resolve without the real assets.
+import type { SVGProps } from "react";
+
+const Empty = (_props: SVGProps<SVGSVGElement>) => null;
+
+export const ODWinFolderSvg = Empty;
+export const ODIconWord = Empty;
+export const ODIconExcel = Empty;
+export const ODIconPpt = Empty;
+export const ODIconPdf = Empty;
+export const ODIconImage = Empty;
+export const ODIconVideo = Empty;
+export const ODIconFile = Empty;
diff --git a/apps/edr-freight-web/backoffice/src/DMS/pages/_shared/utils.ts b/apps/edr-freight-web/backoffice/src/DMS/pages/_shared/utils.ts
new file mode 100644
index 000000000..e8ec80618
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/DMS/pages/_shared/utils.ts
@@ -0,0 +1,20 @@
+// STUB — @/DMS is not migrated into this backoffice. These placeholders exist
+// only so record-management's document components resolve; the DMS feature is
+// inert here. Replace with the real @/DMS module if DMS is ever brought over.
+
+export function formatBytes(bytes?: number | null): string {
+  if (!bytes || bytes <= 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${units[i] ?? "B"}`;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function resolveOwnerName(owner?: any): string {
+  return owner?.name ?? owner?.username ?? owner?.email ?? "";
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function pickName(item?: any): string {
+  return item?.name ?? item?.title ?? item?.fileName ?? "";
+}
diff --git a/apps/edr-freight-web/backoffice/src/complaints/components/ComplaintPageLayout.tsx b/apps/edr-freight-web/backoffice/src/complaints/components/ComplaintPageLayout.tsx
new file mode 100644
index 000000000..9aad0a009
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/complaints/components/ComplaintPageLayout.tsx
@@ -0,0 +1,36 @@
+import type { ReactNode } from "react";
+import Header from "@/layout/components/Header";
+import Footer from "@/layout/components/Footer";
+
+interface ComplaintPageLayoutProps {
+  children: ReactNode;
+  heroTitle: string;
+  heroSubtitle?: string;
+}
+
+export function ComplaintPageLayout({
+  children,
+  heroTitle,
+  heroSubtitle,
+}: ComplaintPageLayoutProps) {
+  return (
+    <div>
+      <Header />
+      <div className="min-h-screen bg-gradient-to-b from-blue-50 to-white flex flex-col pt-16 md:pt-20">
+        <div className="bg-primary py-12 md:py-16 text-center text-white relative overflow-hidden">
+          <div className="absolute top-0 left-0 w-full h-full bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10" />
+          <h1 className="text-3xl md:text-5xl font-bold mb-3 relative z-10">
+            {heroTitle}
+          </h1>
+          {heroSubtitle && (
+            <p className="max-w-2xl mx-auto text-base md:text-lg opacity-90 relative z-10 px-4">
+              {heroSubtitle}
+            </p>
+          )}
+        </div>
+        <div className="flex-1 flex justify-center p-4 md:p-6">{children}</div>
+      </div>
+      <Footer />
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/complaints/components/ComplaintVerificationGuard.tsx b/apps/edr-freight-web/backoffice/src/complaints/components/ComplaintVerificationGuard.tsx
new file mode 100644
index 000000000..3b8baddbb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/complaints/components/ComplaintVerificationGuard.tsx
@@ -0,0 +1,12 @@
+import { Navigate, Outlet } from "react-router-dom";
+import { getComplaintVerification } from "../utils/complaintVerificationStorage";
+
+export function ComplaintVerificationGuard() {
+  const session = getComplaintVerification();
+
+  if (!session) {
+    return <Navigate to="/complaints" replace />;
+  }
+
+  return <Outlet />;
+}
diff --git a/apps/edr-freight-web/backoffice/src/complaints/components/ComplaintVerifiedInfoPanel.tsx b/apps/edr-freight-web/backoffice/src/complaints/components/ComplaintVerifiedInfoPanel.tsx
new file mode 100644
index 000000000..0eb48e1ab
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/complaints/components/ComplaintVerifiedInfoPanel.tsx
@@ -0,0 +1,69 @@
+import { useTranslation } from "react-i18next";
+import { BadgeCheck, Building2, IdCard, User } from "lucide-react";
+import {
+  PortalFieldLabel,
+  PortalReadOnlyField,
+} from "@/external-portal/components/shared/PortalFormPrimitives";
+import type { ComplaintVerificationSession } from "../types/complaint.types";
+
+interface ComplaintVerifiedInfoPanelProps {
+  session: ComplaintVerificationSession;
+}
+
+export function ComplaintVerifiedInfoPanel({
+  session,
+}: ComplaintVerifiedInfoPanelProps) {
+  const { t } = useTranslation();
+  const isTinComplaint = session.method === "tin";
+
+  return (
+    <section className="mb-6 rounded-xl border border-emerald-200 bg-emerald-50/80 p-5 md:p-6">
+      <h3 className="mb-4 flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-emerald-800">
+        <BadgeCheck className="h-4 w-4" />
+        {isTinComplaint
+          ? t("complaint.tin.verifiedInfo")
+          : t("complaint.fayda.verifiedInfo")}
+      </h3>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        {isTinComplaint ? (
+          <>
+            <PortalReadOnlyField
+              label={t("complaint.tin.organizationName")}
+              value={session.organization?.organizationName}
+              icon={Building2}
+            />
+            <PortalReadOnlyField
+              label={t("complaint.tin.tinLabel")}
+              value={session.organization?.tin}
+              icon={IdCard}
+              mono
+            />
+            {session.organization?.tradeName ? (
+              <PortalReadOnlyField
+                label={t("complaint.tin.tradeName")}
+                value={session.organization.tradeName}
+                icon={Building2}
+              />
+            ) : null}
+            {session.organization?.licenseNumber ? (
+              <PortalReadOnlyField
+                label={t("complaint.tin.licenseNumber")}
+                value={session.organization.licenseNumber}
+                icon={IdCard}
+                mono
+              />
+            ) : null}
+          </>
+        ) : (
+          <>
+            <PortalReadOnlyField
+              label={t("complaint.fullName")}
+              value={session.citizen?.fullName}
+              icon={User}
+            />
+          </>
+        )}
+      </div>
+    </section>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/complaints/pages/ComplaintCallbackPage.tsx b/apps/edr-freight-web/backoffice/src/complaints/pages/ComplaintCallbackPage.tsx
new file mode 100644
index 000000000..02f1dc36d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/complaints/pages/ComplaintCallbackPage.tsx
@@ -0,0 +1,160 @@
+import { useEffect, useRef, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { Loader2 } from "lucide-react";
+import { Button } from "@/shared/common/ui/button";
+import { useAuth } from "@/shared/context/AuthContext";
+import {
+  isComplaintFaydaState,
+} from "@/shared/utils/faydaOidc";
+import {
+  mapRegisterWithFaydaCitizen,
+  persistFaydaRegistrationAuth,
+} from "@/shared/utils/faydaAuthSession";
+import {
+  FaydaOidcError,
+  verifyComplaintUser,
+} from "../services/complaintVerificationService";
+import {
+  clearComplaintVerification,
+  storeComplaintVerification,
+} from "../utils/complaintVerificationStorage";
+import { COMPLAINT_RECORDS_PATH } from "../utils/complaintRoutes";
+
+export default function ComplaintCallbackPage() {
+  const { t, i18n } = useTranslation();
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const { setUser, setSelectedPositionId } = useAuth();
+  const [error, setError] = useState<string | null>(null);
+  const hasRun = useRef(false);
+
+  useEffect(() => {
+    if (hasRun.current) return;
+    hasRun.current = true;
+
+    const code = searchParams.get("code");
+    const state = searchParams.get("state");
+    const oidcError = searchParams.get("error");
+    const oidcErrorDescription = searchParams.get("error_description");
+
+    if (oidcError) {
+      clearComplaintVerification();
+      const message =
+        oidcErrorDescription ||
+        t("complaint.fayda.verificationFailed");
+      setError(message);
+      return;
+    }
+
+    if (!code) {
+      clearComplaintVerification();
+      setError(t("complaint.fayda.missingCode"));
+      return;
+    }
+
+    if (state && !isComplaintFaydaState(state)) {
+      clearComplaintVerification();
+      setError(t("complaint.fayda.verificationFailed"));
+      return;
+    }
+
+    const processCallback = async () => {
+      try {
+        const result = await verifyComplaintUser(
+          { code, state },
+          i18n.language,
+        );
+
+        if (!result.verified || !result.registration) {
+          throw new Error(t("complaint.fayda.verificationFailed"));
+        }
+
+        const profile = await persistFaydaRegistrationAuth(result.registration);
+        if (profile) {
+          setUser(profile);
+          const firstPositionId =
+            profile.employee?.[0]?.positions?.[0]?.employeePositionId;
+          if (firstPositionId) {
+            setSelectedPositionId(firstPositionId);
+          }
+        }
+
+        const citizen = mapRegisterWithFaydaCitizen(
+          result.registration,
+          i18n.language,
+          profile,
+        );
+
+        if (!citizen.fullName && !profile) {
+          throw new FaydaOidcError("FAYDA_PROFILE_INCOMPLETE");
+        }
+
+        storeComplaintVerification({
+          verified: true,
+          method: "fayda",
+          citizen,
+          verifiedAt: result.verifiedAt,
+        });
+
+        navigate(COMPLAINT_RECORDS_PATH, {
+          replace: true,
+          state: { fromComplaintVerification: true },
+        });
+      } catch (err: unknown) {
+        clearComplaintVerification();
+        if (err instanceof FaydaOidcError) {
+          const translationKey = `complaint.fayda.errors.${err.code}`;
+          const translated = t(translationKey);
+          setError(
+            translated !== translationKey
+              ? translated
+              : t("complaint.fayda.verificationFailed"),
+          );
+          return;
+        }
+
+        const message =
+          err instanceof Error
+            ? err.message
+            : t("complaint.fayda.verificationFailed");
+        setError(message);
+      }
+    };
+
+    processCallback();
+  }, [
+    searchParams,
+    navigate,
+    t,
+    i18n.language,
+    setUser,
+    setSelectedPositionId,
+  ]);
+
+  if (error) {
+    return (
+      <div className="min-h-screen flex flex-col items-center justify-center bg-red-50 px-4">
+        <p className="text-red-600 mb-4 text-center max-w-md">{error}</p>
+        <Button
+          onClick={() =>
+            navigate(
+              `/complaints?error=${encodeURIComponent(error)}`,
+              { replace: true },
+            )
+          }>
+          {t("complaint.fayda.backToComplaints")}
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center bg-white">
+      <Loader2 className="h-10 w-10 text-primary animate-spin mb-4" />
+      <p className="text-primary text-lg font-medium text-center px-4">
+        {t("complaint.fayda.verifying")}
+      </p>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/complaints/pages/ComplaintFormPage.tsx b/apps/edr-freight-web/backoffice/src/complaints/pages/ComplaintFormPage.tsx
new file mode 100644
index 000000000..ff552866e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/complaints/pages/ComplaintFormPage.tsx
@@ -0,0 +1,13 @@
+import { Navigate } from "react-router-dom";
+import { getComplaintVerification } from "../utils/complaintVerificationStorage";
+import { COMPLAINT_RECORDS_PATH } from "../utils/complaintRoutes";
+
+export default function ComplaintFormPage() {
+  const session = getComplaintVerification();
+
+  if (!session) {
+    return <Navigate to="/complaints" replace />;
+  }
+
+  return <Navigate to={COMPLAINT_RECORDS_PATH} replace />;
+}
diff --git a/apps/edr-freight-web/backoffice/src/complaints/pages/ComplaintMethodChoicePage.tsx b/apps/edr-freight-web/backoffice/src/complaints/pages/ComplaintMethodChoicePage.tsx
new file mode 100644
index 000000000..d4f791d5d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/complaints/pages/ComplaintMethodChoicePage.tsx
@@ -0,0 +1,94 @@
+import { useEffect } from "react";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { AlertCircle, Building2, Search, UserRound } from "lucide-react";
+import { toast } from "sonner";
+import { startComplaintFaydaAuth } from "@/shared/utils/faydaOidc";
+import { ComplaintPageLayout } from "../components/ComplaintPageLayout";
+import { clearComplaintVerification } from "../utils/complaintVerificationStorage";
+
+export default function ComplaintMethodChoicePage() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const error = searchParams.get("error");
+
+  useEffect(() => {
+    clearComplaintVerification();
+  }, []);
+
+  useEffect(() => {
+    if (error) {
+      toast.error(error);
+      setSearchParams({}, { replace: true });
+    }
+  }, [error, setSearchParams]);
+
+  const authOptions = [
+    {
+      provider: "fayda" as const,
+      title: t("registration.auth.continueWithFayda"),
+      description: t("registration.auth.faydaDescription"),
+      icon: UserRound,
+      onClick: () => startComplaintFaydaAuth(),
+    },
+    {
+      provider: "etrade" as const,
+      title: t("registration.auth.continueWithEtrade"),
+      description: t("registration.auth.etradeDescription"),
+      icon: Building2,
+      onClick: () => navigate("/complaints/tin"),
+    },
+  ];
+
+  return (
+    <ComplaintPageLayout
+      heroTitle={t("complaint.choice.title")}
+      heroSubtitle={t("complaint.choice.subtitle")}>
+      <div className="w-full max-w-3xl space-y-8">
+        {error && (
+          <div className="flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 p-4">
+            <AlertCircle className="mt-0.5 h-5 w-5 shrink-0 text-red-500" />
+            <p className="text-sm text-red-700">{error}</p>
+          </div>
+        )}
+
+        <p className="text-center text-sm text-gray-600">
+          {t("complaint.choice.prompt")}
+        </p>
+
+        <div className="grid gap-6 md:grid-cols-2">
+          {authOptions.map((option) => {
+            const Icon = option.icon;
+            return (
+              <button
+                key={option.provider}
+                type="button"
+                onClick={option.onClick}
+                className="group rounded-2xl border border-gray-200 bg-white p-6 text-left transition hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary">
+                <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary transition group-hover:bg-primary group-hover:text-white">
+                  <Icon className="h-6 w-6" />
+                </div>
+                <h3 className="text-lg font-semibold text-gray-900">
+                  {option.title}
+                </h3>
+                <p className="mt-2 text-sm leading-6 text-gray-600">
+                  {option.description}
+                </p>
+              </button>
+            );
+          })}
+        </div>
+
+        <div className="border-t border-gray-100 pt-6 text-center">
+          <Link
+            to="/follow-complaint"
+            className="inline-flex items-center gap-2 text-sm font-medium text-primary hover:underline">
+            <Search className="h-4 w-4" />
+            {t("complaint.followTitle")}
+          </Link>
+        </div>
+      </div>
+    </ComplaintPageLayout>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/complaints/pages/ComplaintSuccessPage.tsx b/apps/edr-freight-web/backoffice/src/complaints/pages/ComplaintSuccessPage.tsx
new file mode 100644
index 000000000..ea294f8f1
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/complaints/pages/ComplaintSuccessPage.tsx
@@ -0,0 +1,44 @@
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { CheckCircle, Search } from "lucide-react";
+import { Button } from "@/shared/common/ui/button";
+import { ComplaintPageLayout } from "../components/ComplaintPageLayout";
+import { clearComplaintVerification } from "../utils/complaintVerificationStorage";
+
+export default function ComplaintSuccessPage() {
+  const { t } = useTranslation();
+
+  const handleDone = () => {
+    clearComplaintVerification();
+  };
+
+  return (
+    <ComplaintPageLayout
+      heroTitle={t("complaint.success")}
+      heroSubtitle={t("complaint.fayda.successSubtitle")}>
+      <div className="w-full max-w-lg bg-white shadow-2xl rounded-2xl p-8 border border-gray-100 text-center">
+        <CheckCircle className="mx-auto mb-4 h-16 w-16 text-primary" />
+        <h2 className="mb-2 text-xl font-semibold text-gray-900">
+          {t("complaint.fayda.successMessage")}
+        </h2>
+        <p className="mb-6 text-gray-600">
+          {t("complaint.fayda.successNote")}
+        </p>
+
+        <div className="flex flex-col gap-3">
+          <Button asChild onClick={handleDone}>
+            <Link to="/">{t("complaint.fayda.backToHome")}</Link>
+          </Button>
+          <Button asChild variant="outline" onClick={handleDone}>
+            <Link
+              to="/follow-complaint"
+              className="inline-flex items-center gap-2">
+              <Search className="h-4 w-4" />
+              {t("complaint.followTitle")}
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </ComplaintPageLayout>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/complaints/pages/ComplaintTinVerificationPage.tsx b/apps/edr-freight-web/backoffice/src/complaints/pages/ComplaintTinVerificationPage.tsx
new file mode 100644
index 000000000..fa5ea062c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/complaints/pages/ComplaintTinVerificationPage.tsx
@@ -0,0 +1,308 @@
+import { FormEvent, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { AlertCircle, ArrowLeft, Building2, Loader2 } from "lucide-react";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import { Label } from "@/shared/common/ui/label";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { useAuth } from "@/shared/context/AuthContext";
+import { registerWithEtrade } from "@/shared/services/authService";
+import { persistFaydaRegistrationAuth } from "@/shared/utils/faydaAuthSession";
+import { ComplaintPageLayout } from "../components/ComplaintPageLayout";
+import { TinRegistrationNotFoundError } from "../services/complaintVerificationService";
+import { storeComplaintVerification } from "../utils/complaintVerificationStorage";
+import { COMPLAINT_RECORDS_PATH } from "../utils/complaintRoutes";
+import type { VerifiedOrganization } from "../types/complaint.types";
+import {
+  EtradeBusinessLicenseOption,
+  fetchRegistrationByTin,
+  mapEtradeBusinessLicenses,
+  mapEtradeRegistration,
+  resolveEtradeLanguage,
+  resolveEtradePhoneForSignup,
+} from "../services/etradeTinService";
+import { EtradeLicensePicker } from "@/shared/components/etrade/EtradeLicensePicker";
+
+type VerificationStep = "tin" | "select_license";
+
+export default function ComplaintTinVerificationPage() {
+  const { t, i18n } = useTranslation();
+  const navigate = useNavigate();
+  const { setUser, setSelectedPositionId } = useAuth();
+  const { handleError, getErrorMessage } = useErrorHandler(t);
+  const [step, setStep] = useState<VerificationStep>("tin");
+  const [tin, setTin] = useState("");
+  const [organization, setOrganization] = useState<VerifiedOrganization | null>(
+    null,
+  );
+  const [organizationName, setOrganizationName] = useState("");
+  const [licenseOptions, setLicenseOptions] = useState<
+    EtradeBusinessLicenseOption[]
+  >([]);
+  const [selectedLicenseNumber, setSelectedLicenseNumber] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [isVerifying, setIsVerifying] = useState(false);
+  const [isContinuing, setIsContinuing] = useState(false);
+
+  const handleVerify = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setError(null);
+
+    const normalizedTin = tin.trim();
+    if (!normalizedTin) {
+      setError(t("complaint.tin.tinRequired"));
+      return;
+    }
+
+    if (!/^\d{10}$/.test(normalizedTin)) {
+      setError(t("complaint.tin.tinInvalid"));
+      return;
+    }
+
+    try {
+      setIsVerifying(true);
+      const registration = await fetchRegistrationByTin(
+        normalizedTin,
+        resolveEtradeLanguage(i18n.language),
+      );
+      const verifiedOrganization = mapEtradeRegistration(
+        registration,
+        normalizedTin,
+      );
+
+      if (!verifiedOrganization.organizationName && !verifiedOrganization.tin) {
+        setError(t("complaint.tin.notFound"));
+        return;
+      }
+
+      const businesses = mapEtradeBusinessLicenses(
+        registration,
+        resolveEtradeLanguage(i18n.language),
+      );
+
+      if (businesses.length === 0) {
+        setError(t("registration.etrade.noLicensesFound"));
+        return;
+      }
+
+      setOrganization(verifiedOrganization);
+      setOrganizationName(verifiedOrganization.organizationName);
+      setLicenseOptions(businesses);
+      setSelectedLicenseNumber(businesses[0].licenseNumber);
+      setStep("select_license");
+    } catch (verifyError) {
+      if (verifyError instanceof TinRegistrationNotFoundError) {
+        setError(t("complaint.tin.notFound"));
+        return;
+      }
+      if (
+        verifyError instanceof Error &&
+        verifyError.message === "ETRADE_REFERER_REJECTED"
+      ) {
+        setError(t("complaint.tin.proxyError"));
+        return;
+      }
+      setError(await getErrorMessage(verifyError));
+    } finally {
+      setIsVerifying(false);
+    }
+  };
+
+  const handleLicenseContinue = async () => {
+    if (!organization || !selectedLicenseNumber) return;
+
+    const selectedLicense = licenseOptions.find(
+      (option) => option.licenseNumber === selectedLicenseNumber,
+    );
+    if (!selectedLicense) return;
+
+    try {
+      setIsContinuing(true);
+      setError(null);
+
+      let phoneNumber: string | undefined;
+      try {
+        phoneNumber =
+          (await resolveEtradePhoneForSignup(
+            selectedLicense.licenseNumber,
+            organization.tin,
+            resolveEtradeLanguage(i18n.language),
+          )) ?? undefined;
+      } catch (phoneError) {
+        console.warn(
+          "[complaint:eTrade] Failed to resolve phone from GetBusinessByLicenseNo",
+          phoneError,
+        );
+      }
+
+      if (!phoneNumber) {
+        setError(t("registration.etrade.phoneLookupFailed"));
+        return;
+      }
+
+      const registrationResponse = await registerWithEtrade({
+        tin: organization.tin,
+        licenseNumber: selectedLicense.licenseNumber,
+        phoneNumber,
+      });
+      const registration = registrationResponse.data;
+
+      if (!registration?.token?.trim()) {
+        setError(t("complaint.tin.registrationFailed"));
+        return;
+      }
+
+      const profile = await persistFaydaRegistrationAuth(registration);
+      if (profile) {
+        setUser(profile);
+        const firstPositionId =
+          profile.employee?.[0]?.positions?.[0]?.employeePositionId;
+        if (firstPositionId) {
+          setSelectedPositionId(firstPositionId);
+        }
+      }
+
+      storeComplaintVerification({
+        verified: true,
+        method: "tin",
+        organization: {
+          ...organization,
+          licenseNumber: selectedLicense.licenseNumber,
+          tradeName: selectedLicense.tradeName,
+          mainGuid: selectedLicense.mainGuid,
+        },
+        verifiedAt: new Date().toISOString(),
+        registration,
+      });
+
+      navigate(COMPLAINT_RECORDS_PATH, {
+        replace: true,
+        state: { fromComplaintVerification: true },
+      });
+    } catch (continueError) {
+      handleError(continueError);
+    } finally {
+      setIsContinuing(false);
+    }
+  };
+
+  return (
+    <ComplaintPageLayout
+      heroTitle={t("registration.auth.continueWithEtrade")}
+      heroSubtitle={t("complaint.tin.subtitle")}>
+      <div className="w-full max-w-xl rounded-2xl border border-gray-200 bg-white p-6 md:p-8">
+        <Link
+          to="/complaints"
+          className="mb-6 inline-flex items-center gap-2 text-sm font-medium text-gray-600 hover:text-primary">
+          <ArrowLeft className="h-4 w-4" />
+          {t("complaint.back")}
+        </Link>
+
+        <div className="mb-6 flex items-start gap-4">
+          <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-amber-50 text-amber-600">
+            <Building2 className="h-6 w-6" />
+          </div>
+          <div>
+            <h2 className="text-lg font-semibold text-gray-900">
+              {step === "tin"
+                ? t("complaint.tin.formTitle")
+                : t("registration.etrade.selectLicenseTitle")}
+            </h2>
+            <p className="mt-1 text-sm text-gray-600">
+              {step === "tin"
+                ? t("complaint.tin.formDescription")
+                : t("registration.etrade.selectLicenseDescription")}
+            </p>
+          </div>
+        </div>
+
+        {error && (
+          <div className="mb-6 flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 p-4">
+            <AlertCircle className="mt-0.5 h-5 w-5 shrink-0 text-red-500" />
+            <p className="text-sm text-red-700">{error}</p>
+          </div>
+        )}
+
+        {step === "tin" ? (
+          <form onSubmit={handleVerify} className="space-y-6">
+            <div className="space-y-2">
+              <Label htmlFor="tin">{t("complaint.tin.tinLabel")}</Label>
+              <Input
+                id="tin"
+                inputMode="numeric"
+                pattern="\d*"
+                maxLength={10}
+                value={tin}
+                onChange={(event) =>
+                  setTin(event.target.value.replace(/\D/g, "").slice(0, 10))
+                }
+                placeholder={t("complaint.tin.tinPlaceholder")}
+                className="font-mono text-lg tracking-wide"
+                autoComplete="off"
+                disabled={isVerifying}
+                required
+              />
+              <p className="text-xs text-gray-500">
+                {t("complaint.tin.tinHint")}
+              </p>
+            </div>
+
+            <Button
+              type="submit"
+              disabled={isVerifying || tin.trim().length !== 10}
+              className="w-full py-6 text-base font-semibold">
+              {isVerifying ? (
+                <span className="flex items-center justify-center gap-2">
+                  <Loader2 className="h-5 w-5 animate-spin" />
+                  {t("complaint.tin.verifying")}
+                </span>
+              ) : (
+                t("complaint.tin.verify")
+              )}
+            </Button>
+          </form>
+        ) : (
+          <div className="space-y-6">
+            <EtradeLicensePicker
+              organizationName={organizationName}
+              options={licenseOptions}
+              selectedLicenseNumber={selectedLicenseNumber}
+              onSelect={setSelectedLicenseNumber}
+            />
+
+            <div className="flex justify-center gap-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => {
+                  setStep("tin");
+                  setSelectedLicenseNumber("");
+                  setLicenseOptions([]);
+                  setOrganization(null);
+                  setOrganizationName("");
+                }}
+                disabled={isContinuing}>
+                {t("registration.etrade.back")}
+              </Button>
+              <Button
+                type="button"
+                onClick={handleLicenseContinue}
+                disabled={!selectedLicenseNumber || isContinuing}
+                className="min-w-[8rem]">
+                {isContinuing ? (
+                  <span className="flex items-center gap-2">
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    {t("registration.etrade.loading")}
+                  </span>
+                ) : (
+                  t("registration.etrade.continue")
+                )}
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+    </ComplaintPageLayout>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/complaints/services/complaintVerificationService.ts b/apps/edr-freight-web/backoffice/src/complaints/services/complaintVerificationService.ts
new file mode 100644
index 000000000..6ba06a049
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/complaints/services/complaintVerificationService.ts
@@ -0,0 +1,72 @@
+import type {
+  ComplaintVerificationResult,
+  FaydaCallbackData,
+} from "../types/complaint.types";
+import {
+  FaydaOidcError,
+  registerFaydaCitizenFromCode,
+} from "./faydaOidcService";
+import {
+  fetchRegistrationByTin,
+  mapEtradeRegistration,
+  resolveEtradeLanguage,
+  TinRegistrationNotFoundError,
+} from "./etradeTinService";
+
+/**
+ * Authenticates or registers a citizen via FAYDA OIDC using a single flow.
+ */
+export async function verifyComplaintUser(
+  callbackData: FaydaCallbackData,
+  language = "en",
+): Promise<ComplaintVerificationResult> {
+  if (!callbackData.code?.trim()) {
+    throw new Error("Missing authorization code from FAYDA");
+  }
+
+  const { registration } = await registerFaydaCitizenFromCode(
+    callbackData.code,
+    language,
+  );
+
+  return {
+    verified: true,
+    method: "fayda",
+    verifiedAt: new Date().toISOString(),
+    registration,
+  };
+}
+
+/**
+ * Verifies an organization via the eTrade TIN registration API.
+ */
+export async function verifyComplaintTin(
+  tin: string,
+  language: string,
+): Promise<ComplaintVerificationResult> {
+  const normalizedTin = tin.trim();
+  if (!/^\d{10}$/.test(normalizedTin)) {
+    throw new Error("INVALID_TIN");
+  }
+
+  const registration = await fetchRegistrationByTin(
+    normalizedTin,
+    resolveEtradeLanguage(language),
+  );
+
+  const organization = mapEtradeRegistration(registration, normalizedTin);
+
+  if (!organization.organizationName && !organization.tin) {
+    throw new TinRegistrationNotFoundError();
+  }
+
+  return {
+    verified: true,
+    method: "tin",
+    organization,
+    verifiedAt: new Date().toISOString(),
+  };
+}
+
+export { TinRegistrationNotFoundError };
+export { FaydaOidcError };
diff --git a/apps/edr-freight-web/backoffice/src/complaints/services/etradeTinService.ts b/apps/edr-freight-web/backoffice/src/complaints/services/etradeTinService.ts
new file mode 100644
index 000000000..3bdc653c4
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/complaints/services/etradeTinService.ts
@@ -0,0 +1,365 @@
+export type EtradeLanguage = "en" | "am";
+
+export interface EtradeBusinessSubGroup {
+  Code?: number;
+  Description?: string;
+}
+
+export interface EtradeBusiness {
+  MainGuid?: string;
+  OwnerTIN?: string;
+  DateRegistered?: string;
+  TradeNameAmh?: string;
+  TradesName?: string;
+  LicenceNumber?: string;
+  LicenseNumber?: string;
+  RenewalDate?: string;
+  RenewedFrom?: string;
+  RenewedTo?: string;
+  SubGroups?: EtradeBusinessSubGroup[];
+}
+
+export interface EtradeBusinessLicenseOption {
+  mainGuid: string;
+  licenseNumber: string;
+  tradeName: string;
+  activities: string[];
+  renewedTo?: string;
+}
+
+export interface EtradeRegistrationInfo {
+  Tin?: string;
+  BusinessName?: string;
+  BusinessNameAmh?: string;
+  RegNo?: string;
+  Businesses?: EtradeBusiness[];
+  tin?: string;
+  businessName?: string;
+  businessNameAmh?: string;
+  regNo?: string;
+  businesses?: EtradeBusiness[];
+  [key: string]: unknown;
+}
+
+export class TinRegistrationNotFoundError extends Error {
+  readonly code = "TIN_NOT_FOUND" as const;
+
+  constructor() {
+    super("TIN_NOT_FOUND");
+    this.name = "TinRegistrationNotFoundError";
+  }
+}
+
+const ETRADE_API_BASE =
+  import.meta.env.VITE_ETRADE_API_BASE?.trim() || "/api/etrade";
+
+export function resolveEtradeLanguage(language: string): EtradeLanguage {
+  return language.toLowerCase().startsWith("am") ? "am" : "en";
+}
+
+function hasRegistrationData(data: unknown): data is EtradeRegistrationInfo {
+  if (data == null) return false;
+  if (typeof data !== "object") return false;
+  if (Array.isArray(data)) return data.length > 0;
+
+  const record = data as Record<string, unknown>;
+  const keys = Object.keys(record);
+  if (keys.length === 0) return false;
+
+  const tin = String(record.Tin ?? record.tin ?? "").trim();
+  const businessName = String(
+    record.BusinessName ?? record.businessName ?? "",
+  ).trim();
+
+  return Boolean(tin || businessName);
+}
+
+function normalizeEtradeBusinesses(
+  data: EtradeRegistrationInfo,
+): EtradeBusiness[] {
+  const businesses = data.Businesses ?? data.businesses;
+  return Array.isArray(businesses) ? businesses : [];
+}
+
+export function mapEtradeBusinessLicenses(
+  data: EtradeRegistrationInfo,
+  language: EtradeLanguage,
+): EtradeBusinessLicenseOption[] {
+  const companyName = String(
+    data.BusinessName ?? data.businessName ?? "",
+  ).trim();
+  const companyNameAmh = String(
+    data.BusinessNameAmh ?? data.businessNameAmh ?? "",
+  ).trim();
+
+  return normalizeEtradeBusinesses(data).flatMap((business) => {
+    const licenseNumber = String(
+      business.LicenceNumber ?? business.LicenseNumber ?? "",
+    ).trim();
+    if (!licenseNumber) return [];
+
+    const tradeName = String(business.TradesName ?? "").trim();
+    const tradeNameAmh = String(business.TradeNameAmh ?? "").trim();
+    const activities = (business.SubGroups ?? [])
+      .map((group) => String(group.Description ?? "").trim())
+      .filter(Boolean);
+
+    const displayTradeName =
+      language === "am"
+        ? tradeNameAmh || tradeName || companyNameAmh || companyName
+        : tradeName || tradeNameAmh || companyName || companyNameAmh;
+
+    const option: EtradeBusinessLicenseOption = {
+      mainGuid: String(business.MainGuid ?? licenseNumber).trim(),
+      licenseNumber,
+      tradeName: displayTradeName || licenseNumber,
+      activities,
+    };
+
+    const renewedTo = String(business.RenewedTo ?? "").trim();
+    if (renewedTo) {
+      option.renewedTo = renewedTo;
+    }
+
+    return [option];
+  });
+}
+
+export function mapEtradeRegistration(
+  data: EtradeRegistrationInfo,
+  fallbackTin: string,
+) {
+  const tin = String(data.Tin ?? data.tin ?? fallbackTin).trim();
+  const organizationName = String(
+    data.BusinessName ?? data.businessName ?? "",
+  ).trim();
+  const regNo = String(data.RegNo ?? data.regNo ?? "").trim();
+
+  return {
+    organizationName: organizationName || tin,
+    tin,
+    ...(regNo ? { regNo } : {}),
+  };
+}
+
+export interface EtradeBusinessByLicense {
+  MainGuid?: string;
+  OwnerTIN?: string;
+  TradeName?: string;
+  LicenceNumber?: string;
+  LicenseNumber?: string;
+  AssociateShortInfos?: Array<{
+    Position?: string;
+    ManagerName?: string;
+    ManagerNameEng?: string;
+    MobilePhone?: string;
+    RegularPhone?: string;
+  }>;
+  AddressInfo?: {
+    Region?: string;
+    Zone?: string;
+    Woreda?: string;
+    Kebele?: string;
+    HouseNo?: string;
+    MobilePhone?: string;
+    RegularPhone?: string;
+  };
+  [key: string]: unknown;
+}
+
+/**
+ * Normalize Ethiopian phone numbers for IAM auth.
+ * Accepts 09/07 mobiles and common 0X landline forms; returns +251...
+ */
+export function normalizeEtradePhoneNumber(
+  raw: string | null | undefined,
+): string | null {
+  if (!raw?.trim()) return null;
+
+  let digits = raw.trim().replace(/[^\d+]/g, "");
+  if (digits.startsWith("+")) {
+    digits = digits.slice(1);
+  }
+
+  // Already international without +
+  if (digits.startsWith("251") && digits.length >= 12) {
+    return `+${digits}`;
+  }
+
+  // Local with leading 0 (mobile or landline): 09xxxxxxxx / 07xxxxxxxx / 0Xxxxxxxx
+  if (digits.startsWith("0") && digits.length >= 9) {
+    return `+251${digits.slice(1)}`;
+  }
+
+  // Mobile without leading 0: 9xxxxxxxx / 7xxxxxxxx
+  if (/^[97]\d{8}$/.test(digits)) {
+    return `+251${digits}`;
+  }
+
+  // Bare landline-ish digits (e.g. 52543000) — prefix country code only if 8–9 digits
+  if (/^\d{8,9}$/.test(digits)) {
+    return `+251${digits}`;
+  }
+
+  return null;
+}
+
+function pickRawPhoneFromBusiness(data: EtradeBusinessByLicense): string | null {
+  const associates = Array.isArray(data.AssociateShortInfos)
+    ? data.AssociateShortInfos
+    : [];
+
+  // Prefer RegularPhone — eTrade MobilePhone is often a landline/invalid value
+  // (e.g. "52543000", "222400000") while RegularPhone holds the mobile (09...).
+  for (const associate of associates) {
+    const regular = String(associate.RegularPhone ?? "").trim();
+    if (regular) return regular;
+  }
+
+  const addressRegular = String(data.AddressInfo?.RegularPhone ?? "").trim();
+  if (addressRegular) return addressRegular;
+
+  for (const associate of associates) {
+    const mobile = String(associate.MobilePhone ?? "").trim();
+    if (mobile) return mobile;
+  }
+
+  const addressMobile = String(data.AddressInfo?.MobilePhone ?? "").trim();
+  if (addressMobile) return addressMobile;
+
+  return null;
+}
+
+export function extractEtradePhoneNumber(
+  data: EtradeBusinessByLicense,
+): string | null {
+  return normalizeEtradePhoneNumber(pickRawPhoneFromBusiness(data));
+}
+
+export async function fetchBusinessByLicenseNo(
+  licenseNo: string,
+  tin: string,
+  language: EtradeLanguage,
+): Promise<EtradeBusinessByLicense> {
+  const params = new URLSearchParams({
+    LicenseNo: licenseNo.trim(),
+    Tin: tin.trim(),
+    Lang: language,
+  });
+  const url = `${ETRADE_API_BASE}/BusinessMain/GetBusinessByLicenseNo?${params.toString()}`;
+
+  let response: Response;
+  try {
+    response = await fetch(url, {
+      method: "GET",
+      headers: {
+        Accept: "application/json",
+      },
+    });
+  } catch (error) {
+    console.error("[eTrade:License] Network request failed", error);
+    throw error;
+  }
+
+  const responseText = (await response.text()).trim();
+
+  if (response.status === 417) {
+    console.error(
+      "[eTrade:License] Referer rejected by eTrade. Ensure /api/etrade proxy is configured.",
+      responseText,
+    );
+    throw new Error("ETRADE_REFERER_REJECTED");
+  }
+
+  if (!response.ok && response.status !== 404) {
+    throw new Error(`ETRADE_HTTP_${response.status}`);
+  }
+
+  if (!responseText) {
+    throw new Error("ETRADE_BUSINESS_NOT_FOUND");
+  }
+
+  let data: unknown;
+  try {
+    data = JSON.parse(responseText);
+  } catch (parseError) {
+    console.error(
+      "[eTrade:License] Invalid JSON response",
+      parseError,
+      responseText,
+    );
+    throw new Error("INVALID_ETRADE_RESPONSE");
+  }
+
+  if (data == null || typeof data !== "object") {
+    throw new Error("ETRADE_BUSINESS_NOT_FOUND");
+  }
+
+  return data as EtradeBusinessByLicense;
+}
+
+/**
+ * Looks up business details by license + TIN and returns a normalized phone
+ * suitable for IAM signup (`+251...`).
+ */
+export async function resolveEtradePhoneForSignup(
+  licenseNo: string,
+  tin: string,
+  language: EtradeLanguage = "en",
+): Promise<string | null> {
+  const business = await fetchBusinessByLicenseNo(licenseNo, tin, language);
+  return extractEtradePhoneNumber(business);
+}
+
+export async function fetchRegistrationByTin(
+  tin: string,
+  language: EtradeLanguage,
+): Promise<EtradeRegistrationInfo> {
+  const normalizedTin = tin.trim();
+  const url = `${ETRADE_API_BASE}/Registration/GetRegistrationInfoByTin/${encodeURIComponent(normalizedTin)}/${language}`;
+
+  let response: Response;
+  try {
+    response = await fetch(url, {
+      method: "GET",
+      headers: {
+        Accept: "application/json",
+      },
+    });
+  } catch (error) {
+    console.error("[eTrade:TIN] Network request failed", error);
+    throw error;
+  }
+
+  const responseText = (await response.text()).trim();
+
+  if (response.status === 417) {
+    console.error(
+      "[eTrade:TIN] Referer rejected by eTrade. Ensure /api/etrade proxy is configured.",
+      responseText,
+    );
+    throw new Error("ETRADE_REFERER_REJECTED");
+  }
+
+  if (!response.ok && response.status !== 404) {
+    throw new Error(`ETRADE_HTTP_${response.status}`);
+  }
+
+  if (!responseText) {
+    throw new TinRegistrationNotFoundError();
+  }
+
+  let data: unknown;
+  try {
+    data = JSON.parse(responseText);
+  } catch (parseError) {
+    console.error("[eTrade:TIN] Invalid JSON response", parseError, responseText);
+    throw new Error("INVALID_ETRADE_RESPONSE");
+  }
+
+  if (data == null || !hasRegistrationData(data)) {
+    throw new TinRegistrationNotFoundError();
+  }
+
+  return data;
+}
diff --git a/apps/edr-freight-web/backoffice/src/complaints/services/faydaOidcService.ts b/apps/edr-freight-web/backoffice/src/complaints/services/faydaOidcService.ts
new file mode 100644
index 000000000..5c88d1fd1
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/complaints/services/faydaOidcService.ts
@@ -0,0 +1,75 @@
+import axios from "axios";
+import {
+  registerWithFayda,
+  type RegisterWithFaydaResponse,
+} from "@/shared/services/authService";
+import { getComplaintFaydaRedirectUri } from "@/shared/utils/faydaOidc";
+import type { VerifiedCitizen } from "../types/complaint.types";
+
+export class FaydaOidcError extends Error {
+  constructor(
+    readonly code: string,
+    message?: string,
+  ) {
+    super(message ?? code);
+    this.name = "FaydaOidcError";
+  }
+}
+
+export interface FaydaRegistrationResult {
+  registration: RegisterWithFaydaResponse;
+  citizen?: VerifiedCitizen;
+}
+
+function mapRegisterWithFaydaError(error: unknown): never {
+  if (axios.isAxiosError(error)) {
+    const payload = error.response?.data;
+    const serverCode =
+      payload && typeof payload === "object" && "code" in payload
+        ? String((payload as { code?: string }).code ?? "")
+        : "";
+
+    if (serverCode.startsWith("FAYDA_")) {
+      throw new FaydaOidcError(serverCode);
+    }
+
+    if (!error.response) {
+      throw new FaydaOidcError("FAYDA_TOKEN_NETWORK_ERROR");
+    }
+
+    const status = error.response.status;
+    if (status === 400) {
+      throw new FaydaOidcError("FAYDA_TOKEN_HTTP_400");
+    }
+    if (status === 401) {
+      throw new FaydaOidcError("FAYDA_TOKEN_HTTP_401");
+    }
+    if (status >= 500) {
+      throw new FaydaOidcError("FAYDA_TOKEN_HTTP_500");
+    }
+  }
+
+  if (error instanceof FaydaOidcError) {
+    throw error;
+  }
+
+  throw new FaydaOidcError("FAYDA_EXCHANGE_FAILED");
+}
+
+export async function registerFaydaCitizenFromCode(
+  code: string,
+  _preferredLocale = "en",
+): Promise<FaydaRegistrationResult> {
+  try {
+    const response = await registerWithFayda({ code });
+    const registration = response.data;
+
+    if (!registration?.token?.trim()) {
+      throw new FaydaOidcError("FAYDA_EXCHANGE_FAILED");
+    }
+
+    return { registration };
+  } catch (error) {
+    mapRegisterWithFaydaError(error);
+  }
+}
diff --git a/apps/edr-freight-web/backoffice/src/complaints/types/complaint.types.ts b/apps/edr-freight-web/backoffice/src/complaints/types/complaint.types.ts
new file mode 100644
index 000000000..e5d1c9701
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/complaints/types/complaint.types.ts
@@ -0,0 +1,42 @@
+export type ComplaintVerificationMethod = "fayda" | "tin";
+
+export interface VerifiedCitizen {
+  fullName: string;
+  faydaId: string;
+}
+
+export interface VerifiedOrganization {
+  organizationName: string;
+  tin: string;
+  regNo?: string;
+  licenseNumber?: string;
+  tradeName?: string;
+  mainGuid?: string;
+}
+
+import type { RegisterWithFaydaResponse } from "@/shared/services/authService";
+
+export interface ComplaintVerificationResult {
+  verified: boolean;
+  method: ComplaintVerificationMethod;
+  citizen?: VerifiedCitizen;
+  organization?: VerifiedOrganization;
+  verifiedAt: string;
+  registration?: RegisterWithFaydaResponse;
+}
+
+export interface ComplaintVerificationSession extends ComplaintVerificationResult {
+  verified: true;
+  method: ComplaintVerificationMethod;
+}
+
+export interface FaydaCallbackData {
+  code: string;
+  state?: string | null;
+}
+
+export interface ComplaintFormDraft {
+  recipient: string;
+  subject: string;
+  description: string;
+}
diff --git a/apps/edr-freight-web/backoffice/src/complaints/utils/complaintRoutes.ts b/apps/edr-freight-web/backoffice/src/complaints/utils/complaintRoutes.ts
new file mode 100644
index 000000000..2d6a0fa21
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/complaints/utils/complaintRoutes.ts
@@ -0,0 +1,4 @@
+export const COMPLAINT_SUBMIT_PATH =
+  "/external-portal/portal-outgoing/submit-letter";
+
+export const COMPLAINT_RECORDS_PATH = "/external-portal/portal-outgoing";
diff --git a/apps/edr-freight-web/backoffice/src/complaints/utils/complaintVerificationStorage.ts b/apps/edr-freight-web/backoffice/src/complaints/utils/complaintVerificationStorage.ts
new file mode 100644
index 000000000..f7a500cfc
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/complaints/utils/complaintVerificationStorage.ts
@@ -0,0 +1,109 @@
+import type { ComplaintVerificationSession } from "../types/complaint.types";
+
+const STORAGE_KEY = "complaint-verification";
+const COMPLAINT_VERIFICATION_IDLE_TIMEOUT_MS = 10 * 60 * 1000;
+
+export function storeComplaintVerification(
+  session: ComplaintVerificationSession,
+): void {
+  sessionStorage.setItem(STORAGE_KEY, JSON.stringify(session));
+}
+
+export function getComplaintVerification(): ComplaintVerificationSession | null {
+  const raw = sessionStorage.getItem(STORAGE_KEY);
+  if (!raw) return null;
+
+  try {
+    const session = JSON.parse(raw) as ComplaintVerificationSession;
+    if (!session.verified) {
+      return null;
+    }
+
+    const method = session.method ?? "fayda";
+    if (method === "fayda" && !session.citizen) {
+      return null;
+    }
+    if (method === "tin" && !session.organization?.tin) {
+      return null;
+    }
+
+    return { ...session, method };
+  } catch {
+    clearComplaintVerification();
+    return null;
+  }
+}
+
+export function clearComplaintVerification(): void {
+  sessionStorage.removeItem(STORAGE_KEY);
+}
+
+export function hasComplaintVerification(): boolean {
+  return getComplaintVerification() !== null;
+}
+
+export function isComplaintAuthContext(pathname = ""): boolean {
+  return (
+    pathname.startsWith("/complaints") ||
+    pathname === "/complaint-form" ||
+    pathname === "/follow-complaint" ||
+    pathname === "/callback"
+  );
+}
+
+export function setupComplaintVerificationIdleCleanup(
+  timeoutMs = COMPLAINT_VERIFICATION_IDLE_TIMEOUT_MS,
+): () => void {
+  let timeoutId: number | null = null;
+
+  const scheduleCleanup = () => {
+    if (timeoutId) {
+      window.clearTimeout(timeoutId);
+    }
+
+    timeoutId = window.setTimeout(() => {
+      clearComplaintVerification();
+    }, timeoutMs);
+  };
+
+  const handleActivity = () => {
+    if (!sessionStorage.getItem(STORAGE_KEY)) {
+      if (timeoutId) {
+        window.clearTimeout(timeoutId);
+        timeoutId = null;
+      }
+      return;
+    }
+
+    scheduleCleanup();
+  };
+
+  const events: (keyof WindowEventMap)[] = [
+    "mousemove",
+    "mousedown",
+    "keydown",
+    "scroll",
+    "touchstart",
+    "click",
+    "focus",
+  ];
+
+  events.forEach((eventName) => {
+    window.addEventListener(eventName, handleActivity, { passive: true });
+  });
+
+  document.addEventListener("visibilitychange", handleActivity);
+  handleActivity();
+
+  return () => {
+    if (timeoutId) {
+      window.clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+
+    events.forEach((eventName) => {
+      window.removeEventListener(eventName, handleActivity);
+    });
+    document.removeEventListener("visibilitychange", handleActivity);
+  };
+}
diff --git a/apps/edr-freight-web/backoffice/src/components/bookings/detail/ClearanceReviewSection.tsx b/apps/edr-freight-web/backoffice/src/components/bookings/detail/ClearanceReviewSection.tsx
index 74f9cdb03..1b2c46bac 100644
--- a/apps/edr-freight-web/backoffice/src/components/bookings/detail/ClearanceReviewSection.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/detail/ClearanceReviewSection.tsx
@@ -380,6 +380,31 @@ export function ClearanceReviewSection({
             </Text>
           </Group>
         </Paper>
+      ) : clearance.status !== "DOCUMENTS_UNDER_REVIEW" ? (
+        // Finalize is only valid from DOCUMENTS_UNDER_REVIEW (the API rejects
+        // any other status with a 409) — once the booking moved on, show the
+        // finalized state instead of a button that can only fail.
+        <Paper withBorder radius="md" p="md">
+          <Group gap={8} wrap="nowrap" style={{ minWidth: 0 }}>
+            <ThemeIcon
+              variant="light"
+              color={clearance.allApproved ? "edr-green" : "gray"}
+              radius="md"
+              size={28}
+            >
+              {clearance.allApproved ? (
+                <CheckCircle2 size={15} />
+              ) : (
+                <FileCheck2 size={15} />
+              )}
+            </ThemeIcon>
+            <Text fz="12.5px" c="dimmed">
+              {clearance.allApproved
+                ? "Clearance has been finalized. The customer can now pick a shipment day and proceed to operation."
+                : "Finalization unlocks once the customer submits their documents and every required document is approved."}
+            </Text>
+          </Group>
+        </Paper>
       ) : (
         <Paper withBorder radius="md" p="md">
           <Group justify="space-between" wrap="nowrap">
diff --git a/apps/edr-freight-web/backoffice/src/components/contracts/GlCreateBookingForm.tsx b/apps/edr-freight-web/backoffice/src/components/contracts/GlCreateBookingForm.tsx
index a744453c0..a520c35e5 100644
--- a/apps/edr-freight-web/backoffice/src/components/contracts/GlCreateBookingForm.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/contracts/GlCreateBookingForm.tsx
@@ -12,6 +12,7 @@ import {
   Button,
   Center,
   Divider,
+  FileButton,
   Group,
   Loader,
   Modal,
@@ -31,10 +32,13 @@ import {
   CalendarDays,
   CheckCircle2,
   ChevronLeft,
+  FileDown,
   FileText,
+  FileUp,
   MapPin,
   Package,
   Receipt,
+  Repeat,
   X,
 } from "lucide-react";
 import type { Freight } from "@edr/types";
@@ -54,6 +58,10 @@ import {
   type GlShipmentQuantities,
 } from "./gl-booking-form/total";
 import { ContractCapacityNotice } from "./gl-booking-form/ContractCapacityNotice";
+import {
+  downloadContainerImportTemplate,
+  parseContainerExcel,
+} from "./gl-booking-form/container-excel";
 import {
   fieldStyles,
   StepCard,
@@ -137,13 +145,37 @@ function bulkUnitOfMeasure(
 }
 
 export default function GlCreateBookingForm() {
-  const { id } = useParams<{ id: string }>();
+  // With `bookingId` the form runs in COMPLETION mode: the bare instance
+  // (auto-initiated by the customer's shipment request) already finished its
+  // per-booking customs clearance, and this form supplies the deferred cargo
+  // (container numbers, VGM) + binding shipment day. Same window gate, same
+  // validation and price confirmation — the submit completes the existing
+  // booking instead of creating a new one.
+  const { id, bookingId: completeBookingId } = useParams<{
+    id: string;
+    bookingId?: string;
+  }>();
   const [searchParams] = useSearchParams();
-  const requestId = searchParams.get("requestId");
+  const requestIdParam = searchParams.get("requestId");
   const navigate = useNavigate();
   const { data: contract, isLoading } = useContractDetail(id);
   const mutations = useContractMutations(id ?? "");
 
+  // Completion mode without an explicit ?requestId=: find the shipment request
+  // that initiated this instance so the quantities still prefill.
+  const { data: contractRequests } = useQuery({
+    queryKey: ["shipment-requests-for-contract", id],
+    queryFn: () => contractsService.listBookingRequests(id!),
+    enabled: Boolean(id) && Boolean(completeBookingId) && !requestIdParam,
+  });
+  const requestId =
+    requestIdParam ??
+    (completeBookingId
+      ? (contractRequests?.find(
+          (r) => r.createdBookingId === completeBookingId,
+        )?.id ?? null)
+      : null);
+
   const { data: bookingRequest } = useQuery({
     queryKey: ["shipment-request", requestId],
     queryFn: () => contractsService.getBookingRequest(requestId!),
@@ -166,18 +198,17 @@ export default function GlCreateBookingForm() {
   );
 
   // Next future window across all routes, used for the "next window" notice —
-  // the train dispatching soonest among those not yet open, matching the
-  // departure-date ordering of the window cards.
+  // the next moment booking OPENS (chronological), which may belong to a
+  // later-departing train. Departure-first ordering here named the soonest
+  // train's later opening as "next" while another lane opened earlier.
   const nextWindow = useMemo(() => {
     const now = Date.now();
     return (bookingWindows ?? [])
       .filter((w) => w.windowOpensAt && new Date(w.windowOpensAt).getTime() > now)
-      .sort((a, b) => {
-        const da = a.departureDate ? new Date(a.departureDate).getTime() : Infinity;
-        const db = b.departureDate ? new Date(b.departureDate).getTime() : Infinity;
-        if (da !== db) return da - db;
-        return new Date(a.windowOpensAt!).getTime() - new Date(b.windowOpensAt!).getTime();
-      })[0];
+      .sort(
+        (a, b) =>
+          new Date(a.windowOpensAt!).getTime() - new Date(b.windowOpensAt!).getTime(),
+      )[0];
   }, [bookingWindows]);
 
   const [scheduledDate, setScheduledDate] = useState("");
@@ -185,9 +216,19 @@ export default function GlCreateBookingForm() {
   const [notes, setNotes] = useState("");
   const [containerLines, setContainerLines] = useState<ContainerLineDraft[]>([]);
   const [bulkLines, setBulkLines] = useState<BulkLineDraft[]>([]);
+  const [withReturn, setWithReturn] = useState(false);
   const [prefilled, setPrefilled] = useState(false);
   const [priceOpen, setPriceOpen] = useState(false);
   const seededRef = useRef(false);
+  const returnSeededRef = useRef(false);
+
+  // Seed the equipment-return toggle from the contract exactly once (also when
+  // the form is prefilled from a shipment request); GL can flip it per shipment.
+  useEffect(() => {
+    if (!contract || returnSeededRef.current) return;
+    returnSeededRef.current = true;
+    setWithReturn(contract.equipmentReturn === "WITH_RETURN");
+  }, [contract]);
 
   const isContainer = contract?.freightType === "CONTAINER";
   const routes = useMemo(
@@ -392,6 +433,57 @@ export default function GlCreateBookingForm() {
   // bulk needs a positive quantity with hazardous/reefer portions bounded by it.
   const [showErrors, setShowErrors] = useState(false);
 
+  // Excel import: one row per container. All-or-nothing — a file with any bad
+  // row is rejected with row-numbered errors so nothing is silently dropped.
+  const [importErrors, setImportErrors] = useState<string[]>([]);
+  const [importSummary, setImportSummary] = useState<string | null>(null);
+  const importResetRef = useRef<(() => void) | null>(null);
+  const excelOpts = {
+    allowedSizes: containerSizes,
+    includeHazardous: contract?.isHazardous ?? false,
+    includeReefer: contract?.isReefer ?? false,
+  };
+
+  const handleImportFile = async (file: File | null) => {
+    // Reset the hidden input so re-picking the same (fixed) file re-fires.
+    importResetRef.current?.();
+    if (!file) return;
+    const { rows, errors } = await parseContainerExcel(file, excelOpts);
+    if (errors.length > 0) {
+      setImportSummary(null);
+      setImportErrors(errors);
+      return;
+    }
+    // Replace only the lines for sizes present in the file; a contracted size
+    // the file omits keeps whatever was already entered for it.
+    setContainerLines((prev) =>
+      containerSizes.map((size) => {
+        const imported = rows.filter((r) => r.containerSize === size);
+        if (imported.length === 0) {
+          return (
+            prev.find((l) => l.containerSize === size) ?? {
+              containerSize: size,
+              units: [emptyUnit()],
+            }
+          );
+        }
+        return {
+          containerSize: size,
+          units: imported.map((r) => ({
+            containerNumber: r.containerNumber,
+            sealNumber: r.sealNumber,
+            vgmTons: r.vgmTons,
+            hazardous: r.hazardous,
+            reefer: r.reefer,
+          })),
+        };
+      }),
+    );
+    setImportErrors([]);
+    setShowErrors(false);
+    setImportSummary(`Imported ${rows.length} container(s) from ${file.name}.`);
+  };
+
   const unitErrors = useMemo<UnitErrors[][]>(() => {
     if (!isContainer) return [];
     const numberCounts = new Map<string, number>();
@@ -469,6 +561,10 @@ export default function GlCreateBookingForm() {
       scheduledDate,
       ...(contractRouteId ? { contractRouteId } : {}),
       ...(notes.trim() ? { notes: notes.trim() } : {}),
+      // Equipment return is a container concern — bulk keeps the contract default.
+      ...(isContainer
+        ? { equipmentReturn: withReturn ? "WITH_RETURN" : "WITHOUT_RETURN" }
+        : {}),
     };
 
     if (isContainer) {
@@ -563,6 +659,18 @@ export default function GlCreateBookingForm() {
     const payload = buildPayload();
     if (!payload) return;
 
+    if (completeBookingId) {
+      // Completion mode: cargo + day land on the already-cleared instance —
+      // the request was linked and accepted at submission time.
+      mutations.completeBooking.mutate(
+        { bookingId: completeBookingId, payload },
+        {
+          onSuccess: () => navigate(`/dashboard/clearance/${completeBookingId}`),
+        },
+      );
+      return;
+    }
+
     mutations.createBooking.mutate(payload, {
       onSuccess: async (booking) => {
         if (requestId) {
@@ -612,10 +720,12 @@ export default function GlCreateBookingForm() {
       <Group justify="space-between" align="flex-end" wrap="wrap" gap="md" mb="lg">
         <Box>
           <Text fw={800} fz={26} style={{ letterSpacing: "-0.01em" }}>
-            New Shipment Booking
+            {completeBookingId ? "Complete Shipment Booking" : "New Shipment Booking"}
           </Text>
           <Text size="sm" c="dimmed" mt={4}>
-            Book a shipment on behalf of the customer for contract {contract.reference}.
+            {completeBookingId
+              ? `Clearance is finalized — enter the cargo details and shipment day to complete the booking under contract ${contract.reference}.`
+              : `Book a shipment on behalf of the customer for contract ${contract.reference}.`}
           </Text>
         </Box>
         <Button
@@ -740,6 +850,83 @@ export default function GlCreateBookingForm() {
               description="Enter the quantity and per-container details for each size in the contract scope."
             />
             <Stack gap={18}>
+              {containerSizes.length > 0 && (
+                <Paper withBorder radius="md" p="md" style={{ borderColor: "#E6ECF2" }}>
+                  <Group justify="space-between" wrap="wrap" gap="sm">
+                    <Box>
+                      <Text fz={13} fw={600}>
+                        Import containers from Excel
+                      </Text>
+                      <Text fz={12} c="dimmed">
+                        One row per container. Importing fills the lines below
+                        for the sizes in the file.
+                      </Text>
+                    </Box>
+                    <Group gap="sm">
+                      <Button
+                        variant="default"
+                        size="xs"
+                        radius="md"
+                        leftSection={<FileDown size={14} />}
+                        onClick={() => downloadContainerImportTemplate(excelOpts)}
+                      >
+                        Download template
+                      </Button>
+                      <FileButton
+                        resetRef={importResetRef}
+                        accept=".xlsx,.xls"
+                        onChange={handleImportFile}
+                      >
+                        {(props) => (
+                          <Button
+                            {...props}
+                            size="xs"
+                            radius="md"
+                            color="edr-green"
+                            leftSection={<FileUp size={14} />}
+                          >
+                            Import Excel
+                          </Button>
+                        )}
+                      </FileButton>
+                    </Group>
+                  </Group>
+                  {importErrors.length > 0 && (
+                    <Alert
+                      color="red"
+                      variant="light"
+                      radius="md"
+                      icon={<AlertCircle size={16} />}
+                      title="Import failed — fix the file and try again"
+                      mt="sm"
+                    >
+                      <Stack gap={4}>
+                        {importErrors.slice(0, 8).map((msg, i) => (
+                          <Text key={i} fz="xs">
+                            {msg}
+                          </Text>
+                        ))}
+                        {importErrors.length > 8 && (
+                          <Text fz="xs" c="dimmed">
+                            …and {importErrors.length - 8} more.
+                          </Text>
+                        )}
+                      </Stack>
+                    </Alert>
+                  )}
+                  {importSummary && (
+                    <Alert
+                      color="edr-green"
+                      variant="light"
+                      radius="md"
+                      icon={<CheckCircle2 size={16} />}
+                      mt="sm"
+                    >
+                      <Text fz="xs">{importSummary}</Text>
+                    </Alert>
+                  )}
+                </Paper>
+              )}
               <ContractCapacityNotice contractId={contract.id} isContainer />
               {containerLines.length === 0 ? (
                 <Text fz="sm" c="dimmed">
@@ -956,6 +1143,67 @@ export default function GlCreateBookingForm() {
           </StepCard>
         )}
 
+        {isContainer ? (
+          <StepCard>
+            <StepHeader
+              icon={<Repeat size={22} />}
+              title="Equipment Return"
+              description="Choose whether the empty container(s) come back to EDR after unloading."
+            />
+            <Paper
+              withBorder
+              radius="md"
+              p="md"
+              style={{
+                borderColor: withReturn ? "#CDEBDD" : "#E6ECF2",
+                background: withReturn ? "#F6FBF8" : "white",
+                cursor: "pointer",
+                transition: "border-color 150ms ease, background 150ms ease",
+              }}
+              onClick={() => setWithReturn((v) => !v)}
+            >
+              <Group justify="space-between" wrap="nowrap" gap="md">
+                <Group gap={13} wrap="nowrap" align="flex-start">
+                  <Box
+                    style={{
+                      width: 38,
+                      height: 38,
+                      flexShrink: 0,
+                      borderRadius: 11,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      background: withReturn ? "#ECF6F1" : "#F1F4F7",
+                      color: withReturn ? "#0A6F4D" : "#6B7C8E",
+                    }}
+                  >
+                    <Repeat size={18} />
+                  </Box>
+                  <Box>
+                    <Text fz={14} fw={700}>
+                      With return
+                    </Text>
+                    <Text fz={12} c="dimmed" style={{ lineHeight: 1.4 }}>
+                      {withReturn
+                        ? "Container(s) returned to EDR after unloading."
+                        : "Container(s) retained by the customer after delivery."}
+                    </Text>
+                  </Box>
+                </Group>
+                <Switch
+                  size="md"
+                  color="edr-green"
+                  aria-label="With return"
+                  checked={withReturn}
+                  onChange={(e) => setWithReturn(e.currentTarget.checked)}
+                  onClick={(e) => e.stopPropagation()}
+                  style={{ flexShrink: 0 }}
+                />
+              </Group>
+            </Paper>
+          </StepCard>
+        ) : null}
+
         <StepCard>
           <StepHeader
             icon={<CalendarDays size={22} />}
@@ -1050,7 +1298,11 @@ export default function GlCreateBookingForm() {
       <Modal
         opened={priceOpen}
         onClose={() => {
-          if (!mutations.createBooking.isPending) setPriceOpen(false);
+          if (
+            !mutations.createBooking.isPending &&
+            !mutations.completeBooking.isPending
+          )
+            setPriceOpen(false);
         }}
         centered
         radius="lg"
@@ -1202,7 +1454,10 @@ export default function GlCreateBookingForm() {
                 radius="md"
                 leftSection={<X size={16} />}
                 onClick={() => setPriceOpen(false)}
-                disabled={mutations.createBooking.isPending}
+                disabled={
+                  mutations.createBooking.isPending ||
+                  mutations.completeBooking.isPending
+                }
               >
                 Reject &amp; edit
               </Button>
@@ -1210,7 +1465,10 @@ export default function GlCreateBookingForm() {
                 color="edr-green"
                 radius="md"
                 leftSection={<CheckCircle2 size={16} />}
-                loading={mutations.createBooking.isPending}
+                loading={
+                  mutations.createBooking.isPending ||
+                  mutations.completeBooking.isPending
+                }
                 disabled={
                   validateShipmentMutation.isPending ||
                   pairingErrors.length > 0 ||
@@ -1218,7 +1476,7 @@ export default function GlCreateBookingForm() {
                 }
                 onClick={handleSubmit}
               >
-                Confirm &amp; book
+                {completeBookingId ? "Confirm & complete" : "Confirm & book"}
               </Button>
             </Group>
           </Stack>
diff --git a/apps/edr-freight-web/backoffice/src/components/contracts/gl-actions/ActionShell.tsx b/apps/edr-freight-web/backoffice/src/components/contracts/gl-actions/ActionShell.tsx
index 0ec7ad59f..bf761b748 100644
--- a/apps/edr-freight-web/backoffice/src/components/contracts/gl-actions/ActionShell.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/contracts/gl-actions/ActionShell.tsx
@@ -8,6 +8,12 @@ export interface ActionShellProps {
   subtitle?: string;
   /** When true the action is already done — children are hidden, a done badge shows. */
   done?: boolean;
+  /**
+   * Keep the input controls mounted alongside the done badge. For actions whose
+   * value stays correctable after completion (e.g. customs risk), rather than
+   * the default one-and-done actions.
+   */
+  keepChildrenWhenDone?: boolean;
   doneLabel?: ReactNode;
   children: ReactNode;
 }
@@ -22,6 +28,7 @@ export function ActionShell({
   title,
   subtitle,
   done,
+  keepChildrenWhenDone,
   doneLabel,
   children,
 }: ActionShellProps) {
@@ -64,7 +71,7 @@ export function ActionShell({
           )
         ) : null}
       </Group>
-      {!done ? children : null}
+      {!done || keepChildrenWhenDone ? children : null}
     </Box>
   );
 }
diff --git a/apps/edr-freight-web/backoffice/src/components/contracts/gl-actions/AssignRiskCard.tsx b/apps/edr-freight-web/backoffice/src/components/contracts/gl-actions/AssignRiskCard.tsx
index 05fd97084..0f655edc5 100644
--- a/apps/edr-freight-web/backoffice/src/components/contracts/gl-actions/AssignRiskCard.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/contracts/gl-actions/AssignRiskCard.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Badge, Box, Button, Group, SegmentedControl, Text } from "@mantine/core";
 import { ShieldAlert } from "lucide-react";
 import type { Freight } from "@edr/types";
@@ -15,22 +15,42 @@ const RISK_COLOR: Record<Freight.CustomsRiskLevel, string> = {
 export function AssignRiskCard({
   bookingId,
   milestone,
+  locked = false,
 }: {
   bookingId: string;
   milestone: Freight.IClearanceMilestone;
+  /**
+   * Duty has already been advised off this risk level, so the decision is now
+   * final. Until then a mis-assigned level must stay correctable — the server
+   * accepts reassignment and overwrites the milestone metadata.
+   */
+  locked?: boolean;
 }) {
   const assign = useAssignRisk(bookingId);
-  const [level, setLevel] = useState<Freight.CustomsRiskLevel>("GREEN");
 
   const assigned = milestone.status === "COMPLETED";
   const current = milestone.metadata?.riskLevel;
+  const [level, setLevel] = useState<Freight.CustomsRiskLevel>(
+    current ?? "GREEN",
+  );
+
+  // The milestone loads (and refetches after a reassignment) after first render,
+  // so mirror the persisted level onto the control whenever it changes.
+  useEffect(() => {
+    if (current) setLevel(current);
+  }, [current]);
 
   return (
     <ActionShell
       icon={ShieldAlert}
       title="Customs risk"
-      subtitle="Assign the customs examination risk level."
+      subtitle={
+        assigned && !locked
+          ? "Reassign the customs examination risk level."
+          : "Assign the customs examination risk level."
+      }
       done={assigned}
+      keepChildrenWhenDone={!locked}
       doneLabel={
         current ? (
           <Badge color={RISK_COLOR[current]} variant="filled" radius="sm">
@@ -60,9 +80,10 @@ export function AssignRiskCard({
             size="compact-sm"
             color="edr-green"
             loading={assign.isPending}
+            disabled={assigned && level === current}
             onClick={() => assign.mutate({ riskLevel: level })}
           >
-            Assign risk
+            {assigned ? "Reassign risk" : "Assign risk"}
           </Button>
         </Group>
       </Box>
diff --git a/apps/edr-freight-web/backoffice/src/components/contracts/gl-actions/GlActionsPanel.tsx b/apps/edr-freight-web/backoffice/src/components/contracts/gl-actions/GlActionsPanel.tsx
index 57133cb0c..f11619b82 100644
--- a/apps/edr-freight-web/backoffice/src/components/contracts/gl-actions/GlActionsPanel.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/contracts/gl-actions/GlActionsPanel.tsx
@@ -70,7 +70,11 @@ export function GlActionsPanel({ bookingId, milestones }: GlActionsPanelProps) {
         {showTransport ? <TransportDocumentCard bookingId={bookingId} /> : null}
 
         {riskMs ? (
-          <AssignRiskCard bookingId={bookingId} milestone={riskMs} />
+          <AssignRiskCard
+            bookingId={bookingId}
+            milestone={riskMs}
+            locked={dutyMs?.status === "COMPLETED"}
+          />
         ) : null}
 
         <IncidentReportCard bookingId={bookingId} />
diff --git a/apps/edr-freight-web/backoffice/src/components/contracts/gl-booking-form/container-excel.ts b/apps/edr-freight-web/backoffice/src/components/contracts/gl-booking-form/container-excel.ts
new file mode 100644
index 000000000..bbd3acf90
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/contracts/gl-booking-form/container-excel.ts
@@ -0,0 +1,200 @@
+import * as XLSX from "xlsx";
+
+// Excel import for container shipments: one spreadsheet row per physical
+// container, mirroring the manual per-unit fields (number, seal, VGM) plus the
+// hazardous/reefer flags when the contract allows them. The parser is
+// all-or-nothing — any bad row rejects the file with row-numbered errors so a
+// partial import can never silently drop containers.
+
+// ISO 6346: 3-letter owner code + category id (U/J/Z) + 6-digit serial + check digit.
+const ISO_CONTAINER_NUMBER_REGEX = /^[A-Z]{4}\d{7}$/;
+
+export interface ContainerExcelOptions {
+  /** Container sizes the contract scope allows (e.g. ["20ft", "40ft"]). */
+  allowedSizes: string[];
+  includeHazardous: boolean;
+  includeReefer: boolean;
+}
+
+export interface ImportedContainerRow {
+  containerSize: string;
+  containerNumber: string;
+  sealNumber: string;
+  vgmTons: string;
+  hazardous: boolean;
+  reefer: boolean;
+}
+
+export interface ContainerExcelResult {
+  rows: ImportedContainerRow[];
+  errors: string[];
+}
+
+type ColumnKey =
+  | "containerSize"
+  | "containerNumber"
+  | "sealNumber"
+  | "vgmTons"
+  | "hazardous"
+  | "reefer";
+
+/** Match a header cell to a known column, tolerant of casing/spacing/units. */
+function headerKey(raw: string): ColumnKey | null {
+  const h = raw.toLowerCase().replace(/[^a-z]/g, "");
+  if (!h) return null;
+  if (h.includes("size")) return "containerSize";
+  if (h.includes("seal")) return "sealNumber";
+  if (h.includes("vgm") || h.includes("weight")) return "vgmTons";
+  if (h.includes("hazard")) return "hazardous";
+  if (h.includes("reefer") || h.includes("refrigerat")) return "reefer";
+  // After the more specific matches: "Container Number", "Container No", …
+  if (h.includes("container") || h.includes("number")) return "containerNumber";
+  return null;
+}
+
+/** "20", "20ft", "20 FT" … → the matching contracted size, or null. */
+function normalizeSize(raw: string, allowed: string[]): string | null {
+  const digits = raw.replace(/[^0-9]/g, "");
+  if (!digits) return null;
+  return allowed.find((s) => s.replace(/[^0-9]/g, "") === digits) ?? null;
+}
+
+function parseFlag(raw: string): boolean {
+  const v = raw.trim().toLowerCase();
+  return v === "yes" || v === "y" || v === "true" || v === "1" || v === "x";
+}
+
+/**
+ * Parse an uploaded workbook into one row per container. Returns either the
+ * full row set or the list of row-numbered problems (never both).
+ */
+export async function parseContainerExcel(
+  file: File,
+  opts: ContainerExcelOptions,
+): Promise<ContainerExcelResult> {
+  let sheet: XLSX.WorkSheet | undefined;
+  try {
+    const workbook = XLSX.read(await file.arrayBuffer(), { type: "array" });
+    sheet = workbook.Sheets[workbook.SheetNames[0]];
+  } catch {
+    return { rows: [], errors: ["Could not read the file — is it a valid Excel file?"] };
+  }
+  if (!sheet) {
+    return { rows: [], errors: ["The file has no sheets."] };
+  }
+
+  const grid = XLSX.utils.sheet_to_json<string[]>(sheet, {
+    header: 1,
+    raw: false,
+    defval: "",
+  });
+
+  // First row with a recognizable column is the header; everything above
+  // (titles, blank rows) is ignored.
+  let headerRowIdx = -1;
+  let columns: Array<ColumnKey | null> = [];
+  for (let i = 0; i < grid.length; i++) {
+    const mapped = (grid[i] ?? []).map((c) => headerKey(String(c ?? "")));
+    if (mapped.includes("containerNumber") && mapped.includes("containerSize")) {
+      headerRowIdx = i;
+      columns = mapped;
+      break;
+    }
+  }
+  if (headerRowIdx < 0) {
+    return {
+      rows: [],
+      errors: [
+        'Could not find the expected columns. The sheet needs at least "Container Size" and "Container Number" headers — download the template to see the format.',
+      ],
+    };
+  }
+  if (!columns.includes("vgmTons")) {
+    return {
+      rows: [],
+      errors: ['Missing a "VGM (Tons)" column — download the template to see the format.'],
+    };
+  }
+
+  const rows: ImportedContainerRow[] = [];
+  const errors: string[] = [];
+  const numberCounts = new Map<string, number>();
+
+  for (let i = headerRowIdx + 1; i < grid.length; i++) {
+    const cells = grid[i] ?? [];
+    if (cells.every((c) => String(c ?? "").trim() === "")) continue;
+    const rowNo = i + 1; // 1-based, as shown in Excel
+
+    const cell = (key: ColumnKey) => {
+      const idx = columns.indexOf(key);
+      return idx >= 0 ? String(cells[idx] ?? "").trim() : "";
+    };
+
+    const size = normalizeSize(cell("containerSize"), opts.allowedSizes);
+    if (!size) {
+      errors.push(
+        `Row ${rowNo}: container size "${cell("containerSize") || "—"}" is not in this contract's scope (allowed: ${opts.allowedSizes.join(", ")}).`,
+      );
+    }
+
+    const containerNumber = cell("containerNumber").toUpperCase();
+    if (!ISO_CONTAINER_NUMBER_REGEX.test(containerNumber)) {
+      errors.push(
+        `Row ${rowNo}: "${cell("containerNumber") || "—"}" is not a valid ISO container number (e.g. MSCU1234567).`,
+      );
+    } else {
+      numberCounts.set(containerNumber, (numberCounts.get(containerNumber) ?? 0) + 1);
+    }
+
+    const vgmRaw = cell("vgmTons");
+    const vgm = Number(vgmRaw);
+    if (!vgmRaw || Number.isNaN(vgm) || vgm <= 0) {
+      errors.push(`Row ${rowNo}: VGM "${vgmRaw || "—"}" must be a number greater than 0.`);
+    }
+
+    rows.push({
+      containerSize: size ?? "",
+      containerNumber,
+      sealNumber: cell("sealNumber"),
+      vgmTons: vgmRaw,
+      hazardous: opts.includeHazardous && parseFlag(cell("hazardous")),
+      reefer: opts.includeReefer && parseFlag(cell("reefer")),
+    });
+  }
+
+  numberCounts.forEach((count, num) => {
+    if (count > 1) errors.push(`Container number ${num} appears ${count} times — numbers must be unique.`);
+  });
+
+  if (rows.length === 0 && errors.length === 0) {
+    errors.push("The sheet has no container rows below the header.");
+  }
+
+  return errors.length > 0 ? { rows: [], errors } : { rows, errors: [] };
+}
+
+/** Generate and download the simple import template with one sample row per size. */
+export function downloadContainerImportTemplate(opts: ContainerExcelOptions) {
+  const headers = ["Container Size", "Container Number", "Seal Number", "VGM (Tons)"];
+  if (opts.includeHazardous) headers.push("Hazardous (YES/NO)");
+  if (opts.includeReefer) headers.push("Reefer (YES/NO)");
+
+  const sizes = opts.allowedSizes.length > 0 ? opts.allowedSizes : ["20ft"];
+  const sampleRows = sizes.map((size, i) => {
+    const row: Array<string | number> = [
+      size,
+      `MSCU${String(1234567 + i).padStart(7, "0")}`,
+      `SL${String(482910 + i)}`,
+      size.startsWith("40") ? 28 : 24.5,
+    ];
+    if (opts.includeHazardous) row.push("NO");
+    if (opts.includeReefer) row.push("NO");
+    return row;
+  });
+
+  const sheet = XLSX.utils.aoa_to_sheet([headers, ...sampleRows]);
+  sheet["!cols"] = headers.map((h) => ({ wch: Math.max(h.length + 2, 16) }));
+  const workbook = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(workbook, sheet, "Containers");
+  XLSX.writeFile(workbook, "container-import-template.xlsx");
+}
diff --git a/apps/edr-freight-web/backoffice/src/components/customers/ChangeRequestReview.tsx b/apps/edr-freight-web/backoffice/src/components/customers/ChangeRequestReview.tsx
index 924d62436..371a83ccf 100644
--- a/apps/edr-freight-web/backoffice/src/components/customers/ChangeRequestReview.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/customers/ChangeRequestReview.tsx
@@ -153,6 +153,7 @@ export function ChangeRequestReview({ company }: { company: Company }) {
     : ([] as string[]);
   const docCount = pending?.documentFileIds?.length ?? 0;
   const licenseChanges = pending?.licenseChanges ?? [];
+  const documentChanges = pending?.documentChanges ?? [];
 
   const confirmReject = () => {
     if (!rejectId) return;
@@ -210,11 +211,75 @@ export function ChangeRequestReview({ company }: { company: Company }) {
               </Text>
             )}
 
+            {documentChanges.length > 0 && (
+              <Stack gap={8}>
+                <Text size="sm" fw={600} c="edr-text">
+                  Document changes
+                </Text>
+                {documentChanges.map((c, i) => (
+                  <Group key={`${c.fileId}-${i}`} gap={8} wrap="nowrap">
+                    {c.op === "add" ? (
+                      <FilePlus2 size={15} className="text-edr-muted" />
+                    ) : (
+                      <FileX2 size={15} className="text-edr-muted" />
+                    )}
+                    <Badge
+                      size="sm"
+                      radius="sm"
+                      variant="light"
+                      color={c.op === "add" ? "green" : "red"}
+                    >
+                      {c.op === "add" ? "Add" : "Remove"}
+                    </Badge>
+                    <Anchor
+                      component="button"
+                      type="button"
+                      size="sm"
+                      onClick={() =>
+                        view({
+                          name: c.fileName ?? humanize(c.code),
+                          url: fileViewUrl(c.fileId),
+                        })
+                      }
+                      style={{
+                        textDecoration:
+                          c.op === "remove" ? "line-through" : undefined,
+                      }}
+                    >
+                      {c.fileName ?? humanize(c.code)}
+                    </Anchor>
+                    <Text size="xs" c="dimmed">
+                      {humanize(c.code)}
+                    </Text>
+                  </Group>
+                ))}
+              </Stack>
+            )}
+
             {docCount > 0 && (
-              <Text size="sm" c="dimmed">
-                {docCount} document{docCount === 1 ? "" : "s"} uploaded with this
-                request — review them in the Documents tab.
-              </Text>
+              <Stack gap={8}>
+                <Text size="sm" fw={600} c="edr-text">
+                  Documents uploaded with this request
+                </Text>
+                {pending!.documentFileIds.map((fileId, i) => (
+                  <Group key={fileId} gap={8} wrap="nowrap">
+                    <FilePlus2 size={15} className="text-edr-muted" />
+                    <Anchor
+                      component="button"
+                      type="button"
+                      size="sm"
+                      onClick={() =>
+                        view({
+                          name: `Document ${i + 1}`,
+                          url: fileViewUrl(fileId),
+                        })
+                      }
+                    >
+                      Document {i + 1}
+                    </Anchor>
+                  </Group>
+                ))}
+              </Stack>
             )}
 
             {licenseChanges.length > 0 && (
diff --git a/apps/edr-freight-web/backoffice/src/components/trainScheduling/PriorityTrackingTab.tsx b/apps/edr-freight-web/backoffice/src/components/trainScheduling/PriorityTrackingTab.tsx
index 00b0abd87..b02ebbc8f 100644
--- a/apps/edr-freight-web/backoffice/src/components/trainScheduling/PriorityTrackingTab.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/trainScheduling/PriorityTrackingTab.tsx
@@ -207,9 +207,9 @@ function RankedCard({
           {/* Wagons */}
           <Group gap={4} wrap="nowrap" w={58} justify="flex-end">
             <TrainFront size={13} color={cardVar("gray", 6)} />
-            {/* <Text fw={700} size="sm">
+            <Text fw={700} size="sm">
               {booking.wagons}w
-            </Text> */}
+            </Text>
           </Group>
 
           {/* State chip / pay countdown */}
@@ -295,9 +295,9 @@ export function PriorityTrackingTab({ data, bookings }: Props) {
   }, [bookings]);
 
   const scoreMax = useMemo(() => maxScore(ranked), [ranked]);
-  // maxWagons is not on the board DTO (capacity is length/weight-based), so the
-  // capacity line shows the wagons currently committed rather than a hard cap.
-  const maxWagons: number | null = null;
+  // Wagon-slot cap from the board DTO (derived from train length and the
+  // shortest wagon type); null on legacy rows without a computable cap.
+  const maxWagons: number | null = data.capacity.maxWagons ?? null;
 
   // Split the ranking at the capacity line: cumulative wagons of slot-occupying
   // bookings (allocated + selected + paid-waiting) up to the train's wagon cap.
@@ -431,23 +431,31 @@ export function PriorityTrackingTab({ data, bookings }: Props) {
             <Text size="xs" fw={700}>
               {data.capacity.allocatedWagons} allocated ·{" "}
               {capUsed} in batch
+              {maxWagons != null ? ` · ${maxWagons} max` : ""}
             </Text>
           </Group>
+          {/* Scale against the real wagon cap when the DTO carries one; fall back
+              to the in-batch total on legacy rows without a computable cap. */}
           <Progress.Root size="lg" radius="xl">
             <Progress.Section
               value={
-                capUsed > 0
-                  ? Math.min(100, (data.capacity.allocatedWagons / capUsed) * 100)
+                (maxWagons ?? capUsed) > 0
+                  ? Math.min(
+                      100,
+                      (data.capacity.allocatedWagons / (maxWagons ?? capUsed)) * 100,
+                    )
                   : 0
               }
               color="edr-green"
             />
             <Progress.Section
               value={
-                capUsed > 0
+                (maxWagons ?? capUsed) > 0
                   ? Math.min(
                       100,
-                      ((capUsed - data.capacity.allocatedWagons) / capUsed) * 100,
+                      ((capUsed - data.capacity.allocatedWagons) /
+                        (maxWagons ?? capUsed)) *
+                        100,
                     )
                   : 0
               }
diff --git a/apps/edr-freight-web/backoffice/src/components/trainScheduling/TrainCompositionDiagram.tsx b/apps/edr-freight-web/backoffice/src/components/trainScheduling/TrainCompositionDiagram.tsx
index c7530209b..6ba1a0e29 100644
--- a/apps/edr-freight-web/backoffice/src/components/trainScheduling/TrainCompositionDiagram.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/trainScheduling/TrainCompositionDiagram.tsx
@@ -16,6 +16,7 @@ type DiagramWagonInput = {
   sequenceNo: number;
   capacityTons: number;
   assignedWeightTons: number;
+  tareWeightTons?: number | null;
   slotLoadType?: string | null;
   wagonType?: { code?: string | null } | null;
   wagonTypeCode?: string | null;
@@ -33,6 +34,7 @@ type NormalizedWagon = {
   sequenceNo: number;
   capacityTons: number;
   assignedWeightTons: number;
+  tareWeightTons: number;
   wagonTypeCode: string | null;
   physicalWagonNumber: string | null;
   isEmpty: boolean;
@@ -69,6 +71,7 @@ function normalizeWagon(w: DiagramWagonInput, freightType?: string | null): Norm
     sequenceNo: w.sequenceNo,
     capacityTons: Number(w.capacityTons) || 0,
     assignedWeightTons: Number(w.assignedWeightTons) || 0,
+    tareWeightTons: Number(w.tareWeightTons) || 0,
     wagonTypeCode: w.wagonType?.code ?? w.wagonTypeCode ?? null,
     physicalWagonNumber: w.physicalWagonNumber ?? null,
     isEmpty: allocations.length === 0,
@@ -278,7 +281,9 @@ function WagonCar({ wagon }: { wagon: NormalizedWagon }) {
         wagon.bookingRefs.length ? wagon.bookingRefs.join(", ") : ""
       }${
         wagon.containerNumbers.length ? `\nContainers: ${wagon.containerNumbers.join(", ")}` : ""
-      }${wagon.cargoDescription ? `\n${wagon.cargoDescription}` : ""}\nLoad: ${wagon.assignedWeightTons}/${wagon.capacityTons}T (${utilization}%)`;
+      }${wagon.cargoDescription ? `\n${wagon.cargoDescription}` : ""}\nLoad: ${wagon.assignedWeightTons}/${wagon.capacityTons}T (${utilization}%)${
+        wagon.tareWeightTons ? `\nTare: ${wagon.tareWeightTons}T` : ""
+      }`;
 
   // container blocks: one per container number (cap visual at 2 = TEU per wagon)
   const blocks = wagon.containerNumbers.slice(0, 2);
@@ -523,15 +528,22 @@ export function TrainCompositionDiagram({
     const assigned = normalized.filter((w) => !w.isEmpty).length;
     const totalWeight = normalized.reduce((s, w) => s + w.assignedWeightTons, 0);
     const totalCapacity = normalized.reduce((s, w) => s + w.capacityTons, 0);
+    // Every coupled wagon's tare is hauled — empty ones included — so the
+    // locomotive pull limit is measured against gross (tare + cargo), the same
+    // ceiling the allocation engine spends from.
+    const totalTare = normalized.reduce((s, w) => s + w.tareWeightTons, 0);
+    const grossWeight = totalWeight + totalTare;
     return {
       total: normalized.length,
       assigned,
       empty: normalized.length - assigned,
       totalWeight: Math.round(totalWeight * 100) / 100,
+      totalTare: Math.round(totalTare * 100) / 100,
+      grossWeight: Math.round(grossWeight * 100) / 100,
       totalCapacity,
       pullUtil:
         locomotive?.maxPullWeightTons && locomotive.maxPullWeightTons > 0
-          ? Math.min(100, Math.round((totalWeight / locomotive.maxPullWeightTons) * 100))
+          ? Math.min(100, Math.round((grossWeight / locomotive.maxPullWeightTons) * 100))
           : null,
     };
   }, [normalized, locomotive]);
@@ -598,12 +610,30 @@ export function TrainCompositionDiagram({
               }}
             >
               <Text size="xs" fw={700} c="dark.4">
-                {stats.totalWeight}T
+                {stats.totalWeight}T cargo
               </Text>
               <Text size="xs" c="dimmed">
                 of {stats.totalCapacity}T capacity
               </Text>
             </Group>
+            {stats.totalTare > 0 ? (
+              <Group
+                gap={6}
+                style={{
+                  padding: "4px 12px",
+                  borderRadius: 999,
+                  background: "var(--mantine-color-gray-0)",
+                  border: "1px solid var(--mantine-color-gray-2)",
+                }}
+              >
+                <Text size="xs" fw={700} c="dark.4">
+                  {stats.grossWeight}T gross
+                </Text>
+                <Text size="xs" c="dimmed">
+                  incl. {stats.totalTare}T tare
+                </Text>
+              </Group>
+            ) : null}
             <Group gap="xs">
               <LegendDot color="cyan" label="Container" />
               <LegendDot color="orange" label="Bulk" />
@@ -626,7 +656,10 @@ export function TrainCompositionDiagram({
               <Group gap={6} wrap="nowrap">
                 <Gauge size={14} color={freightBrand.primary} />
                 <Text size="xs" fw={700} c="edr-green.8">
-                  Locomotive load · {stats.totalWeight}T of {locomotive?.maxPullWeightTons}T
+                  Locomotive load ·{" "}
+                  {stats.totalTare > 0
+                    ? `${stats.grossWeight}T of ${locomotive?.maxPullWeightTons}T (${stats.totalWeight}T cargo + ${stats.totalTare}T tare)`
+                    : `${stats.totalWeight}T of ${locomotive?.maxPullWeightTons}T`}
                 </Text>
               </Group>
               <Text size="sm" fw={800} c={stats.pullUtil > 95 ? "red.7" : "edr-green.7"}>
diff --git a/apps/edr-freight-web/backoffice/src/components/wagons/WagonYardWorkspaceModal.tsx b/apps/edr-freight-web/backoffice/src/components/wagons/WagonYardWorkspaceModal.tsx
new file mode 100644
index 000000000..67506caed
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/components/wagons/WagonYardWorkspaceModal.tsx
@@ -0,0 +1,563 @@
+import { Freight } from "@edr/types";
+import {
+  Badge,
+  Box,
+  Button,
+  Card,
+  Divider,
+  Grid,
+  Group,
+  Loader,
+  Modal,
+  NumberInput,
+  Progress,
+  Select,
+  Slider,
+  Stack,
+  Switch,
+  Text,
+  ThemeIcon,
+} from "@mantine/core";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { ArrowRight, ArrowRightLeft, CheckCircle2, CircleSlash, Layers, Warehouse } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+
+import { api } from "@/services/api";
+import { useToast } from "@/hooks/use-toast";
+import type { Wagon } from "@/services/wagon.service";
+
+export interface WagonYardWorkspaceModalProps {
+  opened: boolean;
+  onClose: () => void;
+}
+
+const AVAILABLE = Freight.WagonStatus.Available;
+const ASSIGNED = Freight.WagonStatus.Assigned;
+
+const clampInt = (v: number | string, max: number): number => {
+  const n = typeof v === "number" ? v : Number(v);
+  if (!Number.isFinite(n) || n < 0) return 0;
+  return Math.min(Math.floor(n), max);
+};
+
+/** NumberInput + Slider + All/Half presets, kept in sync and bounded to `max`. */
+const QuantityField = ({
+  value,
+  onChange,
+  max,
+  disabled,
+}: {
+  value: number;
+  onChange: (n: number) => void;
+  max: number;
+  disabled?: boolean;
+}) => {
+  const set = (v: number | string) => onChange(clampInt(v, max));
+  const off = disabled || max === 0;
+  return (
+    <Stack gap={8}>
+      <Group gap="sm" align="center" wrap="nowrap">
+        <NumberInput
+          value={value}
+          onChange={set}
+          min={0}
+          max={max}
+          allowNegative={false}
+          clampBehavior="strict"
+          disabled={off}
+          radius="md"
+          w={92}
+        />
+        <Slider
+          style={{ flex: 1 }}
+          value={value}
+          onChange={set}
+          min={0}
+          max={Math.max(max, 1)}
+          disabled={off}
+          label={(v) => `${v}`}
+          color="edr-green"
+        />
+      </Group>
+      <Group gap={6}>
+        <Button size="compact-xs" variant="light" color="gray" disabled={off} onClick={() => set(Math.ceil(max / 2))}>
+          Half
+        </Button>
+        <Button size="compact-xs" variant="light" color="gray" disabled={off} onClick={() => set(max)}>
+          All ({max})
+        </Button>
+        {value > 0 ? (
+          <Button size="compact-xs" variant="subtle" color="gray" onClick={() => set(0)}>
+            Clear
+          </Button>
+        ) : null}
+      </Group>
+    </Stack>
+  );
+};
+
+const LegendDot = ({ color, label, value }: { color: string; label: string; value: number }) => (
+  <Group gap={6} wrap="nowrap">
+    <Box w={10} h={10} style={{ borderRadius: 3, background: `var(--mantine-color-${color}-6)` }} />
+    <Text size="sm" c="dimmed">
+      {label}
+    </Text>
+    <Text size="sm" fw={700}>
+      {value}
+    </Text>
+  </Group>
+);
+
+/**
+ * Bulk yard operations. Pick a yard + wagon type (the two selects filter each
+ * other to combinations that actually hold stock), read the live Available /
+ * Assigned split, then move a quantity to another yard or flip a quantity
+ * between Available and Assigned — replacing one-wagon-at-a-time edits.
+ */
+const WagonYardWorkspaceModal = ({ opened, onClose }: WagonYardWorkspaceModalProps) => {
+  const { toast } = useToast();
+
+  const { data: wagons = [], isLoading } = useQuery(api.wagons.list.queryOptions({ input: {} }));
+  const { data: yards = [] } = useQuery(api.routes.yards.queryOptions());
+  const { data: wagonTypes = [] } = useQuery(api.wagonTypes.list.queryOptions());
+
+  const [yardId, setYardId] = useState<string | null>(null);
+  const [typeId, setTypeId] = useState<string | null>(null);
+
+  const [transferYardId, setTransferYardId] = useState<string | null>(null);
+  const [transferQty, setTransferQty] = useState(0);
+  const [freeAfterMove, setFreeAfterMove] = useState(false);
+  const [toAssignedQty, setToAssignedQty] = useState(0);
+  const [toAvailableQty, setToAvailableQty] = useState(0);
+
+  const transfer = useMutation(api.wagons.bulkTransfer.mutationOptions());
+  const setStatus = useMutation(api.wagons.bulkSetStatus.mutationOptions());
+
+  const yardName = useMemo(() => {
+    const byId = new Map(yards.map((y) => [y.id, y.label || y.code || y.id]));
+    return (id: string) => byId.get(id) ?? id;
+  }, [yards]);
+
+  const typeInfo = useMemo(() => {
+    const byId = new Map(wagonTypes.map((t) => [t.id, t]));
+    return {
+      label: (id: string) => {
+        const t = byId.get(id);
+        return t ? `${t.code}${t.name ? ` - ${t.name}` : ""}` : id;
+      },
+      code: (id: string) => byId.get(id)?.code ?? id,
+    };
+  }, [wagonTypes]);
+
+  const yardWagons = useMemo(
+    () => wagons.filter((w): w is Wagon & { currentYardId: string } => Boolean(w.currentYardId)),
+    [wagons],
+  );
+
+  const yardOptions = useMemo(() => {
+    const ids = new Set<string>();
+    for (const w of yardWagons) {
+      if (typeId && w.wagonTypeId !== typeId) continue;
+      ids.add(w.currentYardId);
+    }
+    return [...ids]
+      .map((id) => ({ value: id, label: yardName(id) }))
+      .sort((a, b) => a.label.localeCompare(b.label));
+  }, [yardWagons, typeId, yardName]);
+
+  const typeOptions = useMemo(() => {
+    const ids = new Set<string>();
+    for (const w of yardWagons) {
+      if (yardId && w.currentYardId !== yardId) continue;
+      ids.add(w.wagonTypeId);
+    }
+    return [...ids]
+      .map((id) => ({ value: id, label: typeInfo.label(id) }))
+      .sort((a, b) => a.label.localeCompare(b.label));
+  }, [yardWagons, yardId, typeInfo]);
+
+  const matching = useMemo(() => {
+    if (!yardId || !typeId) return [] as Wagon[];
+    return yardWagons.filter((w) => w.currentYardId === yardId && w.wagonTypeId === typeId);
+  }, [yardWagons, yardId, typeId]);
+
+  const availableWagons = useMemo(() => matching.filter((w) => w.status === AVAILABLE), [matching]);
+  const assignedWagons = useMemo(() => matching.filter((w) => w.status === ASSIGNED), [matching]);
+  const otherWagons = useMemo(
+    () => matching.filter((w) => w.status !== AVAILABLE && w.status !== ASSIGNED),
+    [matching],
+  );
+  // Available first, then assigned, then the rest — a partial move relocates
+  // idle wagons before touching assigned ones.
+  const transferPool = useMemo(
+    () => [...availableWagons, ...assignedWagons, ...otherWagons],
+    [availableWagons, assignedWagons, otherWagons],
+  );
+
+  const total = matching.length;
+  const availableCount = availableWagons.length;
+  const assignedCount = assignedWagons.length;
+  const otherCount = otherWagons.length;
+
+  const destinationYardOptions = useMemo(
+    () =>
+      yards
+        .filter((y) => y.id !== yardId)
+        .map((y) => ({ value: y.id, label: y.label || y.code || y.id }))
+        .sort((a, b) => a.label.localeCompare(b.label)),
+    [yards, yardId],
+  );
+
+  const bothSelected = Boolean(yardId && typeId);
+
+  // Reset action inputs when the selection changes.
+  useEffect(() => {
+    setTransferYardId(null);
+    setTransferQty(0);
+    setFreeAfterMove(false);
+    setToAssignedQty(0);
+    setToAvailableQty(0);
+  }, [yardId, typeId]);
+
+  // Reset the whole workspace when closed.
+  useEffect(() => {
+    if (!opened) {
+      setYardId(null);
+      setTypeId(null);
+    }
+  }, [opened]);
+
+  // Keep quantities within bounds as counts shift after each action.
+  useEffect(() => setTransferQty((q) => Math.min(q, total)), [total]);
+  useEffect(() => setToAssignedQty((q) => Math.min(q, availableCount)), [availableCount]);
+  useEffect(() => setToAvailableQty((q) => Math.min(q, assignedCount)), [assignedCount]);
+
+  const showError = (err: unknown, fallback: string) => {
+    const message =
+      (err as { response?: { data?: { message?: string } } })?.response?.data?.message ?? fallback;
+    toast({ title: fallback, description: String(message), variant: "destructive" });
+  };
+
+  const handleTransfer = async () => {
+    if (!transferYardId || transferQty < 1) return;
+    const ids = transferPool.slice(0, transferQty).map((w) => w.id);
+    if (!ids.length) return;
+    try {
+      const res = await transfer.mutateAsync({ wagonIds: ids, toYardId: transferYardId });
+      if (freeAfterMove) {
+        await setStatus.mutateAsync({ wagonIds: ids, status: AVAILABLE });
+      }
+      toast({
+        title: `Moved ${res.moved} wagon(s) to ${yardName(transferYardId)}${
+          freeAfterMove ? " · set Available" : ""
+        }`,
+      });
+      setTransferQty(0);
+      setTransferYardId(null);
+      setFreeAfterMove(false);
+    } catch (err) {
+      showError(err, "Transfer failed");
+    }
+  };
+
+  const handleFlip = async (
+    pool: Wagon[],
+    qty: number,
+    status: Freight.WagonStatus,
+    label: string,
+    reset: () => void,
+  ) => {
+    if (qty < 1) return;
+    const ids = pool.slice(0, qty).map((w) => w.id);
+    if (!ids.length) return;
+    try {
+      const res = await setStatus.mutateAsync({ wagonIds: ids, status });
+      toast({ title: `${res.updated} wagon(s) set to ${label}` });
+      reset();
+    } catch (err) {
+      showError(err, "Status update failed");
+    }
+  };
+
+  const busy = transfer.isPending || setStatus.isPending;
+  const pct = (n: number) => (total > 0 ? (n / total) * 100 : 0);
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      size="min(1080px, 96vw)"
+      radius="lg"
+      centered
+      overlayProps={{ blur: 2 }}
+      title={
+        <Group gap="sm">
+          <ThemeIcon variant="light" color="edr-green" radius="md" size="lg">
+            <Warehouse size={18} />
+          </ThemeIcon>
+          <div>
+            <Text fw={700}>Wagon Yard Operations</Text>
+            <Text size="xs" c="dimmed">
+              Move and re-status wagons in bulk — no one-by-one edits
+            </Text>
+          </div>
+        </Group>
+      }
+    >
+      <Stack gap="lg">
+        {/* ---- Selection ---- */}
+        <Card withBorder radius="md" padding="md" bg="var(--mantine-color-gray-0)">
+          <Grid gap="md" align="flex-end">
+            <Grid.Col span={{ base: 12, sm: 6 }}>
+              <Select
+                label="Yard"
+                placeholder="Select a yard"
+                data={yardOptions}
+                value={yardId}
+                onChange={setYardId}
+                searchable
+                clearable
+                leftSection={<Warehouse size={16} />}
+                nothingFoundMessage="No yards with stock"
+                radius="md"
+              />
+            </Grid.Col>
+            <Grid.Col span={{ base: 12, sm: 6 }}>
+              <Select
+                label="Wagon type"
+                placeholder="Select a wagon type"
+                data={typeOptions}
+                value={typeId}
+                onChange={setTypeId}
+                searchable
+                clearable
+                leftSection={<Layers size={16} />}
+                nothingFoundMessage="No wagon types here"
+                radius="md"
+              />
+            </Grid.Col>
+          </Grid>
+        </Card>
+
+        {isLoading ? (
+          <Group justify="center" p="xl">
+            <Loader />
+          </Group>
+        ) : !bothSelected ? (
+          <Card withBorder radius="md" padding="xl">
+            <Stack align="center" gap={6}>
+              <ThemeIcon variant="light" color="gray" radius="xl" size={48}>
+                <Layers size={22} />
+              </ThemeIcon>
+              <Text fw={600}>Pick a yard and a wagon type</Text>
+              <Text size="sm" c="dimmed" ta="center" maw={420}>
+                You&apos;ll see how many wagons of that type sit in that yard, how many are available
+                vs assigned, and can move or re-status them all at once.
+              </Text>
+            </Stack>
+          </Card>
+        ) : (
+          <>
+            {/* ---- Overview hero ---- */}
+            <Card withBorder radius="md" padding="lg">
+              <Group justify="space-between" align="flex-start" wrap="wrap" gap="md">
+                <Group gap="lg" align="center" wrap="nowrap">
+                  <div>
+                    <Text size="3rem" fw={800} lh={1}>
+                      {total}
+                    </Text>
+                  </div>
+                  <div>
+                    <Text fw={700} size="lg">
+                      {typeInfo.code(typeId!)} wagons
+                    </Text>
+                    <Group gap={6} c="dimmed">
+                      <Warehouse size={14} />
+                      <Text size="sm">{yardName(yardId!)}</Text>
+                    </Group>
+                  </div>
+                </Group>
+                <Group gap="lg" wrap="wrap">
+                  <LegendDot color="teal" label="Available" value={availableCount} />
+                  <LegendDot color="blue" label="Assigned" value={assignedCount} />
+                  {otherCount > 0 ? <LegendDot color="gray" label="Other" value={otherCount} /> : null}
+                </Group>
+              </Group>
+
+              <Progress.Root size={22} radius="md" mt="md">
+                <Progress.Section value={pct(availableCount)} color="teal">
+                  {availableCount > 0 ? <Progress.Label>{availableCount}</Progress.Label> : null}
+                </Progress.Section>
+                <Progress.Section value={pct(assignedCount)} color="blue">
+                  {assignedCount > 0 ? <Progress.Label>{assignedCount}</Progress.Label> : null}
+                </Progress.Section>
+                <Progress.Section value={pct(otherCount)} color="gray">
+                  {otherCount > 0 ? <Progress.Label>{otherCount}</Progress.Label> : null}
+                </Progress.Section>
+              </Progress.Root>
+            </Card>
+
+            {/* ---- Actions ---- */}
+            <Grid gap="lg">
+              {/* Transfer */}
+              <Grid.Col span={{ base: 12, md: 6 }}>
+                <Card withBorder radius="md" h="100%" padding="lg">
+                  <Group gap="xs" mb="md">
+                    <ThemeIcon variant="light" color="grape" radius="md" size="md">
+                      <ArrowRightLeft size={16} />
+                    </ThemeIcon>
+                    <Text fw={700}>Move to another yard</Text>
+                  </Group>
+                  <Stack gap="md">
+                    <div>
+                      <Text size="sm" fw={500} mb={4}>
+                        How many wagons
+                      </Text>
+                      <QuantityField value={transferQty} onChange={setTransferQty} max={total} />
+                    </div>
+                    <Select
+                      label="Destination yard"
+                      placeholder="Select destination"
+                      data={destinationYardOptions}
+                      value={transferYardId}
+                      onChange={setTransferYardId}
+                      searchable
+                      radius="md"
+                    />
+                    <Switch
+                      checked={freeAfterMove}
+                      onChange={(e) => setFreeAfterMove(e.currentTarget.checked)}
+                      label="Set moved wagons to Available"
+                      color="teal"
+                    />
+                    {transferYardId && transferQty > 0 ? (
+                      <Card bg="var(--mantine-color-gray-0)" radius="md" padding="sm" withBorder>
+                        <Group gap={8} wrap="nowrap">
+                          <Text size="sm" fw={600}>
+                            {yardName(yardId!)} {total}
+                            <Text span c="red.6" fw={700}>
+                              {" "}
+                              −{transferQty}
+                            </Text>
+                          </Text>
+                          <ArrowRight size={16} />
+                          <Text size="sm" fw={600}>
+                            {yardName(transferYardId)}
+                            <Text span c="teal.7" fw={700}>
+                              {" "}
+                              +{transferQty}
+                            </Text>
+                          </Text>
+                        </Group>
+                      </Card>
+                    ) : null}
+                    <Button
+                      leftSection={<ArrowRightLeft size={16} />}
+                      onClick={handleTransfer}
+                      loading={transfer.isPending}
+                      disabled={busy || !transferYardId || transferQty < 1}
+                      color="edr-green"
+                    >
+                      Move {transferQty > 0 ? `${transferQty} ` : ""}wagon{transferQty === 1 ? "" : "s"}
+                    </Button>
+                  </Stack>
+                </Card>
+              </Grid.Col>
+
+              {/* Re-status */}
+              <Grid.Col span={{ base: 12, md: 6 }}>
+                <Card withBorder radius="md" h="100%" padding="lg">
+                  <Group gap="xs" mb="md">
+                    <ThemeIcon variant="light" color="orange" radius="md" size="md">
+                      <ArrowRightLeft size={16} />
+                    </ThemeIcon>
+                    <Text fw={700}>Change availability</Text>
+                  </Group>
+                  <Stack gap="lg">
+                    <Box>
+                      <Group justify="space-between" mb={6}>
+                        <Group gap={6}>
+                          <ThemeIcon variant="light" color="blue" radius="sm" size="sm">
+                            <CircleSlash size={12} />
+                          </ThemeIcon>
+                          <Text size="sm" fw={600}>
+                            Available → Assigned
+                          </Text>
+                        </Group>
+                        <Badge color="teal" variant="light">
+                          {availableCount} free
+                        </Badge>
+                      </Group>
+                      <QuantityField
+                        value={toAssignedQty}
+                        onChange={setToAssignedQty}
+                        max={availableCount}
+                      />
+                      <Button
+                        mt="sm"
+                        fullWidth
+                        variant="light"
+                        color="blue"
+                        disabled={busy || toAssignedQty < 1}
+                        loading={setStatus.isPending}
+                        onClick={() =>
+                          handleFlip(availableWagons, toAssignedQty, ASSIGNED, "Assigned", () =>
+                            setToAssignedQty(0),
+                          )
+                        }
+                      >
+                        Assign {toAssignedQty > 0 ? `${toAssignedQty} ` : ""}wagon
+                        {toAssignedQty === 1 ? "" : "s"}
+                      </Button>
+                    </Box>
+
+                    <Divider variant="dashed" />
+
+                    <Box>
+                      <Group justify="space-between" mb={6}>
+                        <Group gap={6}>
+                          <ThemeIcon variant="light" color="teal" radius="sm" size="sm">
+                            <CheckCircle2 size={12} />
+                          </ThemeIcon>
+                          <Text size="sm" fw={600}>
+                            Assigned → Available
+                          </Text>
+                        </Group>
+                        <Badge color="blue" variant="light">
+                          {assignedCount} assigned
+                        </Badge>
+                      </Group>
+                      <QuantityField
+                        value={toAvailableQty}
+                        onChange={setToAvailableQty}
+                        max={assignedCount}
+                      />
+                      <Button
+                        mt="sm"
+                        fullWidth
+                        variant="light"
+                        color="teal"
+                        disabled={busy || toAvailableQty < 1}
+                        loading={setStatus.isPending}
+                        onClick={() =>
+                          handleFlip(assignedWagons, toAvailableQty, AVAILABLE, "Available", () =>
+                            setToAvailableQty(0),
+                          )
+                        }
+                      >
+                        Free up {toAvailableQty > 0 ? `${toAvailableQty} ` : ""}wagon
+                        {toAvailableQty === 1 ? "" : "s"}
+                      </Button>
+                    </Box>
+                  </Stack>
+                </Card>
+              </Grid.Col>
+            </Grid>
+          </>
+        )}
+      </Stack>
+    </Modal>
+  );
+};
+
+export default WagonYardWorkspaceModal;
diff --git a/apps/edr-freight-web/backoffice/src/components/warehouses/FeePreviewModal.tsx b/apps/edr-freight-web/backoffice/src/components/warehouses/FeePreviewModal.tsx
index 78e09a7e0..5eeee7d13 100644
--- a/apps/edr-freight-web/backoffice/src/components/warehouses/FeePreviewModal.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/warehouses/FeePreviewModal.tsx
@@ -7,7 +7,7 @@ import { useMutation, useQuery } from '@tanstack/react-query';
 import { api } from '@/services/api';
 import { useToast } from '@/hooks/use-toast';
 import { warehouseService } from '@/services/warehouse.service';
-import { extractErrorMessage } from './options';
+import { extractDownloadErrorMessage, extractErrorMessage } from './options';
 import type { FeePreview, WarehouseInventoryItem, WarehouseInvoiceStatus } from '@/types/warehouse';
 import { openPdfBlob } from './pdf';
 
@@ -157,7 +157,7 @@ export function FeePreviewModal({ opened, onClose, inventoryId }: FeePreviewModa
         pdfWindow?.close();
         toast({
           title: 'Gate clearance recorded',
-          description: `Release paper could not be opened: ${extractErrorMessage(documentError)}`,
+          description: `Release paper could not be opened: ${await extractDownloadErrorMessage(documentError)}`,
         });
       }
       onClose();
diff --git a/apps/edr-freight-web/backoffice/src/components/warehouses/InventoryWorkbench.tsx b/apps/edr-freight-web/backoffice/src/components/warehouses/InventoryWorkbench.tsx
index b8bb43086..c4f1f5cec 100644
--- a/apps/edr-freight-web/backoffice/src/components/warehouses/InventoryWorkbench.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/warehouses/InventoryWorkbench.tsx
@@ -18,7 +18,7 @@ import { LoadInventoryModal } from './LoadInventoryModal';
 import { MoveInventoryModal } from './MoveInventoryModal';
 import { ReleaseOrderModal } from './ReleaseOrderModal';
 import { WarehouseInventoryTable } from './WarehouseInventoryTable';
-import { extractErrorMessage } from './options';
+import { extractDownloadErrorMessage, extractErrorMessage } from './options';
 import { openPdfBlob } from './pdf';
 
 interface InventoryWorkbenchProps {
@@ -111,7 +111,7 @@ export function InventoryWorkbench({ items, isLoading, onLastMile }: InventoryWo
       toast({
         variant: 'destructive',
         title: 'Release paper preview failed',
-        description: extractErrorMessage(error),
+        description: await extractDownloadErrorMessage(error),
       });
     } finally {
       setBusyId(null);
@@ -131,7 +131,7 @@ export function InventoryWorkbench({ items, isLoading, onLastMile }: InventoryWo
       toast({
         variant: 'destructive',
         title: 'Handover document failed',
-        description: extractErrorMessage(error),
+        description: await extractDownloadErrorMessage(error),
       });
     } finally {
       setBusyId(null);
diff --git a/apps/edr-freight-web/backoffice/src/components/warehouses/ReceiveInventoryModal.tsx b/apps/edr-freight-web/backoffice/src/components/warehouses/ReceiveInventoryModal.tsx
index 3b4be03db..93c3bf64e 100644
--- a/apps/edr-freight-web/backoffice/src/components/warehouses/ReceiveInventoryModal.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/warehouses/ReceiveInventoryModal.tsx
@@ -51,6 +51,7 @@ import { warehouseService } from '@/services/warehouse.service';
 import type {
   EligibleBooking,
   InventoryInquiryFilter,
+  InventoryStatus,
   InventoryInquiryResult,
   ImportTrain,
   ImportTrainItem,
@@ -63,6 +64,7 @@ import type {
   WarehouseYard,
   WarehouseZone,
 } from '@/types/warehouse';
+import { InventoryStatusBadge } from './badges';
 import { BookingSelect } from './BookingSelect';
 import { DeliverInventoryModal } from './DeliverInventoryModal';
 import { ContainerItemsModal } from './ContainerItemsModal';
@@ -76,7 +78,7 @@ import { MoveInventoryModal } from './MoveInventoryModal';
 import { ReleaseOrderModal } from './ReleaseOrderModal';
 import { StoreInventoryModal } from './StoreInventoryModal';
 import { WarehouseInquiryTable } from './WarehouseInquiryTable';
-import { extractErrorMessage, formatDate, formatNumber, inventoryStatusOptions } from './options';
+import { extractDownloadErrorMessage, extractErrorMessage, formatDate, formatNumber, inventoryStatusOptions } from './options';
 import { openPdfBlob } from './pdf';
 import '@/components/overview/overview.css';
 
@@ -112,7 +114,7 @@ function GrnDocumentButton({ inventoryId, grnNumber }: { inventoryId: string; gr
       toast({ title: opened ? 'GRN document opened' : 'GRN document downloaded' });
     } catch (error) {
       pdfWindow?.close();
-      toast({ variant: 'destructive', title: 'GRN document failed', description: extractErrorMessage(error) });
+      toast({ variant: 'destructive', title: 'GRN document failed', description: await extractDownloadErrorMessage(error) });
     } finally {
       setLoading(false);
     }
@@ -150,9 +152,6 @@ interface TruckEntranceFormState {
   assignedEquipmentNumber: string;
   customsSealNumber: string;
   declarationNumber: string;
-  incoterms: string;
-  hsCodes: string;
-  itemCode: string;
   itemDescription: string;
   packagingType: string;
   unitCount: number | '';
@@ -162,7 +161,6 @@ interface TruckEntranceFormState {
   volumeDimensions: string;
   conditionAtReceipt: string;
   damagedRejectedQuantity: number | '';
-  warehouseCodeLocation: string;
   driverName: string;
   driverPhone: string;
   driverLicenseNumber: string;
@@ -205,9 +203,6 @@ const emptyTruckEntrance = (): TruckEntranceFormState => ({
   assignedEquipmentNumber: '',
   customsSealNumber: '',
   declarationNumber: '',
-  incoterms: '',
-  hsCodes: '',
-  itemCode: '',
   itemDescription: '',
   packagingType: '',
   unitCount: '',
@@ -217,7 +212,6 @@ const emptyTruckEntrance = (): TruckEntranceFormState => ({
   volumeDimensions: '',
   conditionAtReceipt: '',
   damagedRejectedQuantity: '',
-  warehouseCodeLocation: '',
   driverName: '',
   driverPhone: '',
   driverLicenseNumber: '',
@@ -239,9 +233,6 @@ const toTruckEntrancePayload = (form: TruckEntranceFormState): TruckEntrancePayl
   assignedEquipmentNumber: form.assignedEquipmentNumber.trim() || undefined,
   customsSealNumber: form.customsSealNumber.trim() || undefined,
   declarationNumber: form.declarationNumber.trim() || undefined,
-  incoterms: form.incoterms.trim() || undefined,
-  hsCodes: form.hsCodes.trim() || undefined,
-  itemCode: form.itemCode.trim() || undefined,
   itemDescription: form.itemDescription.trim() || undefined,
   packagingType: form.packagingType.trim() || undefined,
   unitCount: form.unitCount === '' ? undefined : Number(form.unitCount),
@@ -251,7 +242,6 @@ const toTruckEntrancePayload = (form: TruckEntranceFormState): TruckEntrancePayl
   volumeDimensions: form.volumeDimensions.trim() || undefined,
   conditionAtReceipt: form.conditionAtReceipt.trim() || undefined,
   damagedRejectedQuantity: form.damagedRejectedQuantity === '' ? undefined : Number(form.damagedRejectedQuantity),
-  warehouseCodeLocation: form.warehouseCodeLocation.trim() || undefined,
   driverName: form.driverName.trim(),
   driverPhone: form.driverPhone.trim(),
   driverLicenseNumber: form.driverLicenseNumber.trim() || undefined,
@@ -265,6 +255,127 @@ const toTruckEntrancePayload = (form: TruckEntranceFormState): TruckEntrancePayl
   warehouseManagerName: form.warehouseManagerName.trim() || undefined,
 });
 
+
+
+
+const SUB_STAGE_COLOR: Record<string, string> = {
+  PENDING: 'gray',
+  RECEIVED: 'blue',
+  GRN: 'teal',
+  ASSIGNED: 'indigo',
+  LOADED: 'grape',
+  LEFT: 'orange',
+  DELIVERED: 'green',
+};
+
+/**
+ * Expanded booking row: the booking's containers / bulk items with their
+ * lifecycle stage. Shares the ['container-items', bookingId] cache with
+ * ContainerItemsModal, so expanding after using the modal is instant.
+ */
+function BookingItemsExpansion({
+  bookingId,
+  colSpan,
+  bulkFallback,
+}: {
+  bookingId: string | null;
+  colSpan: number;
+  bulkFallback?: string;
+}) {
+  const { data: items = [], isLoading } = useQuery({
+    queryKey: ['container-items', bookingId],
+    queryFn: () => warehouseService.getContainerItems(bookingId as string),
+    enabled: Boolean(bookingId),
+  });
+
+  return (
+    <Table.Tr>
+      <Table.Td colSpan={colSpan} bg="var(--mantine-color-gray-0)">
+        {isLoading ? (
+          <Group justify="center" py="sm">
+            <Loader size="xs" />
+          </Group>
+        ) : items.length === 0 ? (
+          <Text size="xs" c="dimmed" py={6}>
+            {bulkFallback ?? 'No container units recorded on this booking.'}
+          </Text>
+        ) : (
+          <Table verticalSpacing={4} fz="xs" withTableBorder>
+            <Table.Thead>
+              <Table.Tr>
+                <Table.Th>Container #</Table.Th>
+                <Table.Th>Goods</Table.Th>
+                <Table.Th>Stage</Table.Th>
+                <Table.Th>Truck</Table.Th>
+                <Table.Th>GRN</Table.Th>
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody>
+              {items.map((i) => (
+                <Table.Tr key={i.containerNumber}>
+                  <Table.Td>
+                    <Text size="xs" fw={600}>{i.containerNumber}</Text>
+                  </Table.Td>
+                  <Table.Td>{i.goods ?? '—'}</Table.Td>
+                  <Table.Td>
+                    <Badge size="xs" variant="light" color={SUB_STAGE_COLOR[i.stage] ?? 'gray'}>
+                      {i.stage}
+                    </Badge>
+                  </Table.Td>
+                  <Table.Td>{i.truckPlate ?? '—'}</Table.Td>
+                  <Table.Td>{i.grnNumber ?? '—'}</Table.Td>
+                </Table.Tr>
+              ))}
+            </Table.Tbody>
+          </Table>
+        )}
+      </Table.Td>
+    </Table.Tr>
+  );
+}
+
+type ConfirmAction = { title: string; message: string; confirmLabel: string; run: () => void };
+
+/** One-click bulk actions are irreversible — make the click deliberate. */
+function ConfirmActionModal({
+  action,
+  onClose,
+}: {
+  action: ConfirmAction | null;
+  onClose: () => void;
+}) {
+  return (
+    <Modal opened={Boolean(action)} onClose={onClose} title={action?.title ?? ''} centered size="sm">
+      <Stack gap="md">
+        <Text size="sm">{action?.message}</Text>
+        <Group justify="flex-end">
+          <Button variant="default" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            onClick={() => {
+              action?.run();
+              onClose();
+            }}
+          >
+            {action?.confirmLabel}
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}
+
+/** "3 skipped — Booking not PAID" instead of a bare count. */
+const skippedSummary = (
+  skippedCount: number,
+  results: Array<{ reason?: string; message?: string }>,
+): string | undefined => {
+  if (!skippedCount) return undefined;
+  const reason = results.find((x) => x.reason || x.message);
+  return `${skippedCount} skipped${reason ? ` — ${reason.reason ?? reason.message}` : ''}`;
+};
+
 const commonNonEmptyValue = (values: Array<string | null | undefined>) => {
   const unique = [...new Set(values.map((value) => value?.trim()).filter(Boolean))] as string[];
   return unique.length === 1 ? unique[0] : '';
@@ -296,6 +407,10 @@ const truckEntranceFromBookings = (bookings: EligibleBooking[]): {
   const truckType = commonNonEmptyValue(
     bookings.map((booking) => booking.firstMileTruckType || booking.customerTruckType),
   );
+  const customsSealNumber = commonNonEmptyValue(bookings.map((booking) => booking.sealNumbers));
+  // Booking's declared cargo weight (tonnes) — the receive-time net until re-weighed.
+  const bookingWeight = bookings.length === 1 ? Number(bookings[0]?.weight ?? '') : NaN;
+  const netWeightKg: number | '' = Number.isFinite(bookingWeight) && bookingWeight > 0 ? bookingWeight : '';
   const edrDigitalBookingId =
     bookings.length === 1
       ? bookings[0]?.reference ?? bookings[0]?.id ?? ''
@@ -321,9 +436,11 @@ const truckEntranceFromBookings = (bookings: EligibleBooking[]): {
       customerPhone,
       edrDigitalBookingId,
       assignedEquipmentNumber,
+      customsSealNumber,
       itemDescription,
       packagingType,
       unitCount,
+      netWeightKg,
       grossWeightKg: '',
       truckPlateNumber,
       trailerPlateNumber,
@@ -331,6 +448,7 @@ const truckEntranceFromBookings = (bookings: EligibleBooking[]): {
       driverPhone,
       driverLicenseNumber,
       truckType,
+      driverSignatoryName: driverName,
     },
     lockedFields: {
       ownerName: Boolean(ownerName),
@@ -550,38 +668,19 @@ function TruckEntranceFields({
       )}
 
       <Text size="sm" fw={600} mt="xs">Customs and compliance</Text>
-      <Group grow>
-        <TextInput
-          label="Declaration / Bill of Entry number"
-          value={value.declarationNumber}
-          onChange={(e) => onChange({ ...value, declarationNumber: e.currentTarget.value })}
-        />
-        <TextInput
-          label="Incoterms"
-          value={value.incoterms}
-          onChange={(e) => onChange({ ...value, incoterms: e.currentTarget.value })}
-        />
-      </Group>
       <TextInput
-        label="HS codes"
-        value={value.hsCodes}
-        onChange={(e) => onChange({ ...value, hsCodes: e.currentTarget.value })}
+        label="Declaration / Bill of Entry number"
+        value={value.declarationNumber}
+        onChange={(e) => onChange({ ...value, declarationNumber: e.currentTarget.value })}
       />
 
       <Text size="sm" fw={600} mt="xs">Physical cargo specifications</Text>
-      <Group grow>
-        <TextInput
-          label="Item code"
-          value={value.itemCode}
-          onChange={(e) => onChange({ ...value, itemCode: e.currentTarget.value })}
-        />
-        <TextInput
-          label="Item description"
-          value={value.itemDescription}
-          readOnly={lockedFields?.itemDescription}
-          onChange={(e) => onChange({ ...value, itemDescription: e.currentTarget.value })}
-        />
-      </Group>
+      <TextInput
+        label="Item description"
+        value={value.itemDescription}
+        readOnly={lockedFields?.itemDescription}
+        onChange={(e) => onChange({ ...value, itemDescription: e.currentTarget.value })}
+      />
       <Group grow>
         <Select
           label="Packaging type"
@@ -626,11 +725,6 @@ function TruckEntranceFields({
           onChange={(v) => onChange({ ...value, damagedRejectedQuantity: v === '' ? '' : Number(v) })}
         />
       </Group>
-      <TextInput
-        label="Warehouse code and location"
-        value={value.warehouseCodeLocation}
-        onChange={(e) => onChange({ ...value, warehouseCodeLocation: e.currentTarget.value })}
-      />
       <Group grow>
         <TextInput
           label="Driver signatory"
@@ -889,7 +983,7 @@ function EligibleTab({
       });
       toast({
         title: `${r.receivedCount} received at ${direction === 'EXPORT' ? 'facility' : 'warehouse'}`,
-        description: r.results.find((item) => item.grnNumber)?.grnNumber ?? (r.skippedCount ? `${r.skippedCount} skipped` : undefined),
+        description: r.results.find((item) => item.grnNumber)?.grnNumber ?? skippedSummary(r.skippedCount, r.results),
       });
       const firstGrn = r.results.find((item) => item.inventoryId && item.grnNumber);
       if (focusedBookingId && firstGrn?.inventoryId && firstGrn.grnNumber) {
@@ -900,7 +994,7 @@ function EligibleTab({
           toast({ title: opened ? 'GRN document opened' : 'GRN document downloaded' });
         } catch (error) {
           pdfWindow?.close();
-          toast({ variant: 'destructive', title: 'GRN document failed', description: extractErrorMessage(error) });
+          toast({ variant: 'destructive', title: 'GRN document failed', description: await extractDownloadErrorMessage(error) });
         }
       }
       setSelected(new Set());
@@ -1059,7 +1153,7 @@ function EligibleTab({
             : `No eligible PAID ${direction.toLowerCase()} bookings to receive.`}
         </Text>
       ) : (
-        <Table.ScrollContainer minWidth={1700}>
+        <Table.ScrollContainer minWidth={1350}>
           <Table highlightOnHover verticalSpacing="xs" striped>
             <Table.Thead>
               <Table.Tr>
@@ -1072,8 +1166,6 @@ function EligibleTab({
                   />
                 </Table.Th>
                 <Table.Th>Booking Ref</Table.Th>
-                <Table.Th>Booking ID</Table.Th>
-                <Table.Th>Customer ID</Table.Th>
                 <Table.Th>Customer Name</Table.Th>
                 <Table.Th>Origin</Table.Th>
                 <Table.Th>Destination</Table.Th>
@@ -1106,12 +1198,6 @@ function EligibleTab({
                       {r.reference}
                     </Text>
                   </Table.Td>
-                  <Table.Td>
-                    <Text size="xs" c="dimmed">{r.id.slice(0, 8)}…</Text>
-                  </Table.Td>
-                  <Table.Td>
-                    <Text size="xs" c="dimmed">{r.customerId ? `${r.customerId.slice(0, 8)}…` : '—'}</Text>
-                  </Table.Td>
                   <Table.Td>{r.customer ?? '—'}</Table.Td>
                   <Table.Td>{r.origin ?? '—'}</Table.Td>
                   <Table.Td>{r.destination ?? '—'}</Table.Td>
@@ -1285,6 +1371,8 @@ function ExportReceivedTab({ enabled, onChanged }: { enabled: boolean; onChanged
     api.warehouses.bulkMarkInspected.mutationOptions(),
   );
   const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [confirmAction, setConfirmAction] = useState<ConfirmAction | null>(null);
+  const [expandedRow, setExpandedRow] = useState<string | null>(null);
   const [inspectId, setInspectId] = useState<string | null>(null);
 
   const pendingRows = rows.filter((r) => r.inspectionStatus !== 'PASSED');
@@ -1308,7 +1396,7 @@ function ExportReceivedTab({ enabled, onChanged }: { enabled: boolean; onChanged
       const r = await inspectMutation.mutateAsync({ inventoryIds: [...selected] });
       toast({
         title: `${r.inspectedCount} marked inspected`,
-        description: r.skippedCount ? `${r.skippedCount} skipped` : undefined,
+        description: skippedSummary(r.skippedCount, r.results),
       });
       setSelected(new Set());
       onChanged?.();
@@ -1329,7 +1417,14 @@ function ExportReceivedTab({ enabled, onChanged }: { enabled: boolean; onChanged
           leftSection={<ClipboardCheck size={14} />}
           disabled={selected.size === 0}
           loading={inspectMutation.isPending}
-          onClick={markInspected}
+          onClick={() =>
+            setConfirmAction({
+              title: 'Mark inspected',
+              message: `Mark ${selected.size} selected item(s) as inspection PASSED?`,
+              confirmLabel: `Mark ${selected.size} inspected`,
+              run: markInspected,
+            })
+          }
         >
           Mark Selected as Inspected
         </Button>
@@ -1344,10 +1439,11 @@ function ExportReceivedTab({ enabled, onChanged }: { enabled: boolean; onChanged
           No received export items awaiting inspection.
         </Text>
       ) : (
-        <Table.ScrollContainer minWidth={1700}>
+        <Table.ScrollContainer minWidth={1350}>
           <Table highlightOnHover verticalSpacing="xs" striped>
             <Table.Thead>
               <Table.Tr>
+                <Table.Th w={34} />
                 <Table.Th w={40}>
                   <Checkbox
                     aria-label="Select all"
@@ -1358,8 +1454,6 @@ function ExportReceivedTab({ enabled, onChanged }: { enabled: boolean; onChanged
                 </Table.Th>
                 <Table.Th>Booking Ref</Table.Th>
                 <Table.Th>GRN</Table.Th>
-                <Table.Th>Booking ID</Table.Th>
-                <Table.Th>Customer ID</Table.Th>
                 <Table.Th>Customer Name</Table.Th>
                 <Table.Th>Container / Cargo Items</Table.Th>
                 <Table.Th>Cargo Type</Table.Th>
@@ -1374,7 +1468,18 @@ function ExportReceivedTab({ enabled, onChanged }: { enabled: boolean; onChanged
               {rows.map((r: ReadyToLoadRow) => {
                 const selectable = r.inspectionStatus !== 'PASSED';
                 return (
-                  <Table.Tr key={r.id}>
+                  <Fragment key={r.id}>
+                  <Table.Tr>
+                    <Table.Td>
+                      <ActionIcon
+                        variant="subtle"
+                        color="gray"
+                        aria-label="Show containers"
+                        onClick={() => setExpandedRow(expandedRow === r.id ? null : r.id)}
+                      >
+                        {expandedRow === r.id ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+                      </ActionIcon>
+                    </Table.Td>
                     <Table.Td>
                       <Checkbox
                         aria-label={`Select ${r.bookingReference ?? r.id}`}
@@ -1384,20 +1489,11 @@ function ExportReceivedTab({ enabled, onChanged }: { enabled: boolean; onChanged
                       />
                     </Table.Td>
                     <Table.Td>
-                      <Stack gap={2}>
-                        <Text size="sm" fw={600}>{r.bookingReference ?? '—'}</Text>
-                        <GrnDocumentButton inventoryId={r.id} grnNumber={r.grnNumber} />
-                      </Stack>
+                      <Text size="sm" fw={600}>{r.bookingReference ?? '—'}</Text>
                     </Table.Td>
                     <Table.Td>
                       <GrnDocumentButton inventoryId={r.id} grnNumber={r.grnNumber} />
                     </Table.Td>
-                    <Table.Td>
-                      <Text size="xs" c="dimmed">{r.bookingId ? `${r.bookingId.slice(0, 8)}…` : '—'}</Text>
-                    </Table.Td>
-                    <Table.Td>
-                      <Text size="xs" c="dimmed">{r.customerId ? `${r.customerId.slice(0, 8)}…` : '—'}</Text>
-                    </Table.Td>
                     <Table.Td>{r.customerName ?? '—'}</Table.Td>
                     <Table.Td>{r.containerNumber ?? '—'}</Table.Td>
                     <Table.Td>{r.cargoType ?? '—'}</Table.Td>
@@ -1411,9 +1507,7 @@ function ExportReceivedTab({ enabled, onChanged }: { enabled: boolean; onChanged
                       </Badge>
                     </Table.Td>
                     <Table.Td>
-                      <Badge color="blue" variant="light" size="sm">
-                        {r.status}
-                      </Badge>
+                      <InventoryStatusBadge status={r.status as InventoryStatus} />
                     </Table.Td>
                     <Table.Td ta="right">
                       <Button size="compact-xs" variant="light" color="orange" onClick={() => setInspectId(r.id)}>
@@ -1421,6 +1515,14 @@ function ExportReceivedTab({ enabled, onChanged }: { enabled: boolean; onChanged
                       </Button>
                     </Table.Td>
                   </Table.Tr>
+                  {expandedRow === r.id && (
+                    <BookingItemsExpansion
+                      bookingId={r.bookingId}
+                      colSpan={18}
+                      bulkFallback={r.cargoType ? `Bulk cargo — ${r.cargoType}, ${formatNumber(Number(r.weight))} t` : undefined}
+                    />
+                  )}
+                  </Fragment>
                 );
               })}
             </Table.Tbody>
@@ -1433,6 +1535,7 @@ function ExportReceivedTab({ enabled, onChanged }: { enabled: boolean; onChanged
         opened={Boolean(inspectId)}
         onClose={() => setInspectId(null)}
       />
+      <ConfirmActionModal action={confirmAction} onClose={() => setConfirmAction(null)} />
     </Stack>
   );
 }
@@ -1443,7 +1546,10 @@ function ReadyToLoadTab({ enabled, onChanged }: { enabled: boolean; onChanged?:
   const { data: rows = [], isLoading } = useQuery(
     api.warehouses.readyToLoadExport.queryOptions({ enabled }),
   );
-  const loadPassed = useMutation(api.warehouses.loadPassedExport.mutationOptions());
+  const qc = useQueryClient();
+  const [trainPickerOpen, setTrainPickerOpen] = useState(false);
+  const [expandedRow, setExpandedRow] = useState<string | null>(null);
+  const [targetScheduleId, setTargetScheduleId] = useState<string | null>(null);
   const [selected, setSelected] = useState<Set<string>>(new Set());
 
   const allSelected = rows.length > 0 && selected.size === rows.length;
@@ -1456,13 +1562,56 @@ function ReadyToLoadTab({ enabled, onChanged }: { enabled: boolean; onChanged?:
       return next;
     });
 
-  const autoLoad = async () => {
+  // Loading is always onto a SPECIFIC pre-dispatch train. No train -> no auto-load.
+  const { data: trains = [], isLoading: trainsLoading } = useQuery({
+    queryKey: ['warehouse-inventory', 'loadable-trains'],
+    queryFn: () => warehouseService.getLoadableTrains(),
+    enabled: enabled && trainPickerOpen,
+  });
+  const loadOntoTrain = useMutation({
+    mutationFn: async ({ scheduleId, onlyIds }: { scheduleId: string; onlyIds: string[] }) => {
+      const items = await warehouseService.getTrainLoadableItems(scheduleId);
+      let loadableIds = items.filter((i) => i.loadable).map((i) => i.id);
+      // When rows are checked, load only those; otherwise load every loadable item.
+      if (onlyIds.length) {
+        const picked = new Set(onlyIds);
+        loadableIds = loadableIds.filter((id) => picked.has(id));
+      }
+      if (!loadableIds.length) {
+        throw new Error(
+          onlyIds.length
+            ? 'None of the selected items have an allocated wagon on this train'
+            : 'No ready items with an allocated wagon on this train',
+        );
+      }
+      return warehouseService.loadItemsOntoTrain(scheduleId, loadableIds);
+    },
+    onSuccess: () => {
+      void qc.invalidateQueries({ queryKey: ['warehouse-inventory'] });
+      void qc.invalidateQueries({ queryKey: ['warehouse-loadings'] });
+    },
+  });
+
+
+  const confirmLoad = async () => {
+    if (!targetScheduleId) {
+      toast({ variant: 'destructive', title: 'Select a train to load onto' });
+      return;
+    }
     try {
-      const r = await loadPassed.mutateAsync(undefined);
-      toast({
-        title: `${r.loadedCount} items loaded`,
-        description: r.skippedCount ? `${r.skippedCount} skipped` : undefined,
+      const r = await loadOntoTrain.mutateAsync({
+        scheduleId: targetScheduleId,
+        onlyIds: [...selected],
       });
+      const train = trains.find((t) => t.scheduleId === targetScheduleId);
+      toast({
+        title: `${r.loadedCount} item(s) loaded onto train ${train?.trainNumber ?? ''}`.trim(),
+        description: r.skippedCount
+          ? `${r.skippedCount} skipped — ${r.results.find((x) => x.reason)?.reason ?? 'see results'}`
+          : undefined,
+      });
+      setTrainPickerOpen(false);
+      setTargetScheduleId(null);
       setSelected(new Set());
       onChanged?.();
     } catch (error) {
@@ -1474,21 +1623,69 @@ function ReadyToLoadTab({ enabled, onChanged }: { enabled: boolean; onChanged?:
     <Stack gap="sm" mt="sm">
       <Group justify="space-between">
         <Text size="sm" c="dimmed">
-          <b>{rows.length}</b> item{rows.length !== 1 ? 's' : ''} ready to load
+          {selected.size > 0 ? (
+            <><b>{selected.size}</b> of {rows.length} selected</>
+          ) : (
+            <><b>{rows.length}</b> item{rows.length !== 1 ? 's' : ''} ready to load</>
+          )}
         </Text>
         <Button
           size="compact-sm"
           variant="filled"
           color="teal"
           leftSection={<Truck size={14} />}
-          loading={loadPassed.isPending}
           disabled={rows.length === 0}
-          onClick={autoLoad}
+          onClick={() => setTrainPickerOpen(true)}
         >
-          Auto Load Ready Items
+          {selected.size > 0 ? `Load Selected (${selected.size})` : 'Auto Load Ready Items'}
         </Button>
       </Group>
 
+      <Modal
+        opened={trainPickerOpen}
+        onClose={() => setTrainPickerOpen(false)}
+        title="Load ready items onto a train"
+        centered
+        size="lg"
+      >
+        <Stack gap="md">
+          {trainsLoading ? (
+            <Group justify="center" py="md"><Loader size="sm" /></Group>
+          ) : trains.length === 0 ? (
+            <Alert color="yellow" variant="light" icon={<Info size={16} />}>
+              No train available. Auto-loading needs a scheduled (not yet dispatched) train with
+              these bookings assigned — schedule the train and allocate wagons first.
+            </Alert>
+          ) : (
+            <Select
+              label="Available trains"
+              placeholder="Select the train to load onto"
+              data={trains.map((t) => ({
+                value: t.scheduleId,
+                label: `${t.trainNumber ?? t.scheduleId.slice(0, 8)} · ${t.origin ?? '?'} → ${t.destination ?? '?'} · dep ${t.departureTime ? formatDate(t.departureTime) : '—'} · ${t.readyCount} ready`,
+              }))}
+              value={targetScheduleId}
+              onChange={setTargetScheduleId}
+              searchable
+            />
+          )}
+          <Group justify="flex-end">
+            <Button variant="default" onClick={() => setTrainPickerOpen(false)} disabled={loadOntoTrain.isPending}>
+              Cancel
+            </Button>
+            <Button
+              color="teal"
+              leftSection={<Truck size={14} />}
+              loading={loadOntoTrain.isPending}
+              disabled={!targetScheduleId}
+              onClick={confirmLoad}
+            >
+              Load onto this train
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+
       {isLoading ? (
         <Group justify="center" py="lg">
           <Loader size="sm" />
@@ -1498,7 +1695,7 @@ function ReadyToLoadTab({ enabled, onChanged }: { enabled: boolean; onChanged?:
           No EXPORT items with inspection PASSED waiting to be loaded.
         </Text>
       ) : (
-        <Table.ScrollContainer minWidth={1600}>
+        <Table.ScrollContainer minWidth={1200}>
           <Table highlightOnHover verticalSpacing="xs" striped>
             <Table.Thead>
               <Table.Tr>
@@ -1510,10 +1707,9 @@ function ReadyToLoadTab({ enabled, onChanged }: { enabled: boolean; onChanged?:
                     onChange={toggleAll}
                   />
                 </Table.Th>
+                <Table.Th w={34} />
                 <Table.Th>Booking Ref</Table.Th>
                 <Table.Th>GRN</Table.Th>
-                <Table.Th>Booking ID</Table.Th>
-                <Table.Th>Customer ID</Table.Th>
                 <Table.Th>Customer Name</Table.Th>
                 <Table.Th>Container #</Table.Th>
                 <Table.Th>Cargo Type</Table.Th>
@@ -1525,7 +1721,8 @@ function ReadyToLoadTab({ enabled, onChanged }: { enabled: boolean; onChanged?:
             </Table.Thead>
             <Table.Tbody>
               {rows.map((r: ReadyToLoadRow) => (
-                <Table.Tr key={r.id}>
+                <Fragment key={r.id}>
+                <Table.Tr>
                   <Table.Td>
                     <Checkbox
                       aria-label={`Select ${r.bookingReference ?? r.id}`}
@@ -1534,20 +1731,21 @@ function ReadyToLoadTab({ enabled, onChanged }: { enabled: boolean; onChanged?:
                     />
                   </Table.Td>
                   <Table.Td>
-                    <Stack gap={2}>
-                      <Text size="sm" fw={600}>{r.bookingReference ?? '—'}</Text>
-                      <GrnDocumentButton inventoryId={r.id} grnNumber={r.grnNumber} />
-                    </Stack>
+                    <ActionIcon
+                      variant="subtle"
+                      color="gray"
+                      aria-label="Show containers"
+                      onClick={() => setExpandedRow(expandedRow === r.id ? null : r.id)}
+                    >
+                      {expandedRow === r.id ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+                    </ActionIcon>
+                  </Table.Td>
+                  <Table.Td>
+                    <Text size="sm" fw={600}>{r.bookingReference ?? '—'}</Text>
                   </Table.Td>
                   <Table.Td>
                     <GrnDocumentButton inventoryId={r.id} grnNumber={r.grnNumber} />
                   </Table.Td>
-                  <Table.Td>
-                    <Text size="xs" c="dimmed">{r.bookingId ? `${r.bookingId.slice(0, 8)}…` : '—'}</Text>
-                  </Table.Td>
-                  <Table.Td>
-                    <Text size="xs" c="dimmed">{r.customerId ? `${r.customerId.slice(0, 8)}…` : '—'}</Text>
-                  </Table.Td>
                   <Table.Td>{r.customerName ?? '—'}</Table.Td>
                   <Table.Td>{r.containerNumber ?? '—'}</Table.Td>
                   <Table.Td>{r.cargoType ?? '—'}</Table.Td>
@@ -1561,11 +1759,17 @@ function ReadyToLoadTab({ enabled, onChanged }: { enabled: boolean; onChanged?:
                     </Badge>
                   </Table.Td>
                   <Table.Td>
-                    <Badge color="teal" variant="light" size="sm">
-                      {r.status}
-                    </Badge>
+                    <InventoryStatusBadge status={r.status as InventoryStatus} />
                   </Table.Td>
                 </Table.Tr>
+                {expandedRow === r.id && (
+                  <BookingItemsExpansion
+                    bookingId={r.bookingId}
+                    colSpan={11}
+                    bulkFallback={r.cargoType ? `Bulk cargo — ${r.cargoType}, ${formatNumber(Number(r.weight))} t` : undefined}
+                  />
+                )}
+              </Fragment>
               ))}
             </Table.Tbody>
           </Table>
@@ -1592,6 +1796,8 @@ function LoadedExportTab({
   const { data: rows = [], isLoading } = useQuery(
     api.warehouses.loadedExport.queryOptions({ enabled }),
   );
+  const [confirmAction, setConfirmAction] = useState<ConfirmAction | null>(null);
+  const [expandedRow, setExpandedRow] = useState<string | null>(null);
   const bulkDispatch = useMutation(
     api.warehouses.bulkDispatchExport.mutationOptions(),
   );
@@ -1616,7 +1822,7 @@ function LoadedExportTab({
       const r = await bulkDispatch.mutateAsync(inventoryIds);
       toast({
         title: `${r.dispatchedCount} dispatched`,
-        description: r.skippedCount ? `${r.skippedCount} skipped` : undefined,
+        description: skippedSummary(r.skippedCount, r.results),
       });
       setSelected(new Set());
       onChanged?.();
@@ -1646,7 +1852,14 @@ function LoadedExportTab({
               variant="default"
               disabled={rows.length === 0}
               loading={bulkDispatch.isPending}
-              onClick={() => dispatch(rows.map((r) => r.id))}
+              onClick={() =>
+                setConfirmAction({
+                  title: 'Dispatch all',
+                  message: `Dispatch all ${rows.length} loaded item(s)? They leave warehouse inventory for the train.`,
+                  confirmLabel: `Dispatch ${rows.length}`,
+                  run: () => dispatch(rows.map((r) => r.id)),
+                })
+              }
             >
               Dispatch All
             </Button>
@@ -1656,7 +1869,14 @@ function LoadedExportTab({
               leftSection={<Truck size={14} />}
               disabled={selected.size === 0}
               loading={bulkDispatch.isPending}
-              onClick={() => dispatch([...selected])}
+              onClick={() =>
+                setConfirmAction({
+                  title: 'Dispatch selected',
+                  message: `Dispatch ${selected.size} selected item(s)? They leave warehouse inventory for the train.`,
+                  confirmLabel: `Dispatch ${selected.size}`,
+                  run: () => dispatch([...selected]),
+                })
+              }
             >
               Dispatch Selected
             </Button>
@@ -1673,7 +1893,7 @@ function LoadedExportTab({
           No LOADED export items {dispatchable ? 'waiting to dispatch' : 'yet'}.
         </Text>
       ) : (
-        <Table.ScrollContainer minWidth={1600}>
+        <Table.ScrollContainer minWidth={1200}>
           <Table highlightOnHover verticalSpacing="xs" striped>
             <Table.Thead>
               <Table.Tr>
@@ -1687,22 +1907,21 @@ function LoadedExportTab({
                     />
                   </Table.Th>
                 )}
+                <Table.Th w={34} />
                 <Table.Th>Booking Ref</Table.Th>
                 <Table.Th>GRN</Table.Th>
-                <Table.Th>Booking ID</Table.Th>
-                <Table.Th>Customer ID</Table.Th>
                 <Table.Th>Customer Name</Table.Th>
                 <Table.Th>Container #</Table.Th>
                 <Table.Th>Cargo Type</Table.Th>
                 <Table.Th>Weight</Table.Th>
                 <Table.Th>Route</Table.Th>
                 <Table.Th>Status</Table.Th>
-                {dispatchable && <Table.Th ta="right">Actions</Table.Th>}
               </Table.Tr>
             </Table.Thead>
             <Table.Tbody>
               {rows.map((r: ReadyToLoadRow) => (
-                <Table.Tr key={r.id}>
+                <Fragment key={r.id}>
+                <Table.Tr>
                   {dispatchable && (
                     <Table.Td>
                       <Checkbox
@@ -1713,20 +1932,21 @@ function LoadedExportTab({
                     </Table.Td>
                   )}
                   <Table.Td>
-                    <Stack gap={2}>
-                      <Text size="sm" fw={600}>{r.bookingReference ?? '—'}</Text>
-                      <GrnDocumentButton inventoryId={r.id} grnNumber={r.grnNumber} />
-                    </Stack>
+                    <ActionIcon
+                      variant="subtle"
+                      color="gray"
+                      aria-label="Show containers"
+                      onClick={() => setExpandedRow(expandedRow === r.id ? null : r.id)}
+                    >
+                      {expandedRow === r.id ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+                    </ActionIcon>
+                  </Table.Td>
+                  <Table.Td>
+                    <Text size="sm" fw={600}>{r.bookingReference ?? '—'}</Text>
                   </Table.Td>
                   <Table.Td>
                     <GrnDocumentButton inventoryId={r.id} grnNumber={r.grnNumber} />
                   </Table.Td>
-                  <Table.Td>
-                    <Text size="xs" c="dimmed">{r.bookingId ? `${r.bookingId.slice(0, 8)}…` : '—'}</Text>
-                  </Table.Td>
-                  <Table.Td>
-                    <Text size="xs" c="dimmed">{r.customerId ? `${r.customerId.slice(0, 8)}…` : '—'}</Text>
-                  </Table.Td>
                   <Table.Td>{r.customerName ?? '—'}</Table.Td>
                   <Table.Td>{r.containerNumber ?? '—'}</Table.Td>
                   <Table.Td>{r.cargoType ?? '—'}</Table.Td>
@@ -1735,29 +1955,23 @@ function LoadedExportTab({
                     {r.origin || r.destination ? `${r.origin ?? '?'} → ${r.destination ?? '?'}` : '—'}
                   </Table.Td>
                   <Table.Td>
-                    <Badge color="blue" variant="light" size="sm">
-                      {r.status}
-                    </Badge>
+                    <InventoryStatusBadge status={r.status as InventoryStatus} />
                   </Table.Td>
-                  {dispatchable && (
-                    <Table.Td ta="right">
-                      <Button
-                        size="compact-xs"
-                        variant="light"
-                        color="green"
-                        loading={bulkDispatch.isPending}
-                        onClick={() => dispatch([r.id])}
-                      >
-                        Dispatch
-                      </Button>
-                    </Table.Td>
-                  )}
                 </Table.Tr>
+                {expandedRow === r.id && (
+                  <BookingItemsExpansion
+                    bookingId={r.bookingId}
+                    colSpan={11}
+                    bulkFallback={r.cargoType ? `Bulk cargo — ${r.cargoType}, ${formatNumber(Number(r.weight))} t` : undefined}
+                  />
+                )}
+                </Fragment>
               ))}
             </Table.Tbody>
           </Table>
         </Table.ScrollContainer>
       )}
+      <ConfirmActionModal action={confirmAction} onClose={() => setConfirmAction(null)} />
     </Stack>
   );
 }
@@ -1859,9 +2073,7 @@ function ImportTrainDetailTable({
       <Table.Thead>
         <Table.Tr>
           <Table.Th>Wagon</Table.Th>
-          <Table.Th>Booking ID</Table.Th>
           <Table.Th>Booking Ref</Table.Th>
-          <Table.Th>Customer ID</Table.Th>
           <Table.Th>Customer Name</Table.Th>
           <Table.Th>Container #</Table.Th>
           <Table.Th>Cargo Type</Table.Th>
@@ -1895,15 +2107,9 @@ function ImportTrainDetailTable({
                 {it.sequenceNo ? `#${it.sequenceNo}` : '-'} {it.wagonNumber ?? ''}
               </Text>
             </Table.Td>
-            <Table.Td>
-              <Text size="xs" c="dimmed">{it.bookingId.slice(0, 8)}…</Text>
-            </Table.Td>
             <Table.Td>
               <Text size="xs" fw={600}>{it.bookingReference ?? '—'}</Text>
             </Table.Td>
-            <Table.Td>
-              <Text size="xs" c="dimmed">{it.customerId ? `${it.customerId.slice(0, 8)}…` : '—'}</Text>
-            </Table.Td>
             <Table.Td>{it.customerName ?? '—'}</Table.Td>
             <Table.Td>{it.containerNumber ?? '—'}</Table.Td>
             <Table.Td>{it.cargoType ?? '—'}</Table.Td>
@@ -1993,6 +2199,7 @@ function ImportArriveQueueTab({
     api.warehouses.autoUnloadArrivedBookings.mutationOptions(),
   );
   const [openId, setOpenId] = useState<string | null>(null);
+  const [confirmAction, setConfirmAction] = useState<ConfirmAction | null>(null);
   const [busyId, setBusyId] = useState<string | null>(null);
   const [assignmentsBySchedule, setAssignmentsBySchedule] = useState<
     Record<string, Record<string, ImportUnloadAssignmentDraft>>
@@ -2034,7 +2241,7 @@ function ImportArriveQueueTab({
       const alreadyUnloaded = r.unloadedCount === 0 && r.skippedCount > 0 && r.failedCount === 0;
       const firstReason = r.results.find((item) => item.reason)?.reason;
       const extra = [
-        r.skippedCount ? `${r.skippedCount} skipped` : '',
+        skippedSummary(r.skippedCount, r.results) ?? '',
         r.failedCount ? `${r.failedCount} failed` : '',
       ]
         .filter(Boolean)
@@ -2130,7 +2337,14 @@ function ImportArriveQueueTab({
                             leftSection={<Truck size={14} />}
                             loading={busyId === t.scheduleId}
                             disabled={fullyUnloaded || t.totalBookings === 0 || !readyBySchedule[t.scheduleId] || warehousesLoading}
-                            onClick={() => autoUnload(t)}
+                            onClick={() =>
+                              setConfirmAction({
+                                title: 'Auto unload train',
+                                message: `Unload all arrived bookings from train ${t.trainNumber ?? t.scheduleId.slice(0, 8)} into their assigned warehouse locations?`,
+                                confirmLabel: 'Unload train',
+                                run: () => autoUnload(t),
+                              })
+                            }
                           >
                             {fullyUnloaded ? 'Already Unloaded' : 'Auto Unload Arrived Bookings'}
                           </Button>
@@ -2169,6 +2383,7 @@ function ImportArriveQueueTab({
           </Table>
         </Table.ScrollContainer>
       )}
+      <ConfirmActionModal action={confirmAction} onClose={() => setConfirmAction(null)} />
     </Stack>
   );
 }
@@ -2189,6 +2404,8 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
   );
   const readyMutation = useMutation(api.warehouses.markReadyForPickup.mutationOptions());
   const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [confirmAction, setConfirmAction] = useState<ConfirmAction | null>(null);
+  const [expandedRow, setExpandedRow] = useState<string | null>(null);
   const [inspectId, setInspectId] = useState<string | null>(null);
   const [busyId, setBusyId] = useState<string | null>(null);
   const [viewItem, setViewItem] = useState<WarehouseInventoryItem | null>(null);
@@ -2220,7 +2437,7 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
       const r = await inspectMutation.mutateAsync({ inventoryIds: [...selected] });
       toast({
         title: `${r.inspectedCount} marked inspected`,
-        description: r.skippedCount ? `${r.skippedCount} skipped` : undefined,
+        description: skippedSummary(r.skippedCount, r.results),
       });
       setSelected(new Set());
       void qc.invalidateQueries({ queryKey: ['warehouse-inventory'] });
@@ -2245,6 +2462,9 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
       handoverDocumentReference: row.handoverDocumentReference,
       handoverDocumentDate: row.handoverDocumentDate,
       deliveredAt: row.deliveredAt,
+      // Carries the saved [Exit Inspection] block so Truck Leaving opens with the
+      // arrival details (plate, driver, tare, gate-in) read-only instead of blank.
+      notes: row.notes,
       booking: row.bookingId
         ? {
             id: row.bookingId,
@@ -2282,7 +2502,7 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
       void qc.invalidateQueries({ queryKey: ['warehouse-inventory'] });
     } catch (error) {
       pdfWindow?.close();
-      toast({ variant: 'destructive', title: 'Handover document failed', description: extractErrorMessage(error) });
+      toast({ variant: 'destructive', title: 'Handover document failed', description: await extractDownloadErrorMessage(error) });
     } finally {
       setBusyId(null);
     }
@@ -2296,7 +2516,7 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
       openPdfBlob(response.data, `release-${row.bookingReference ?? row.id}.pdf`, pdfWindow);
     } catch (error) {
       pdfWindow?.close();
-      toast({ variant: 'destructive', title: 'Exit paper failed', description: extractErrorMessage(error) });
+      toast({ variant: 'destructive', title: 'Exit paper failed', description: await extractDownloadErrorMessage(error) });
     } finally {
       setBusyId(null);
     }
@@ -2321,7 +2541,14 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
             leftSection={<ClipboardCheck size={14} />}
             disabled={selected.size === 0}
             loading={inspectMutation.isPending}
-            onClick={markInspected}
+            onClick={() =>
+              setConfirmAction({
+                title: 'Mark inspected',
+                message: `Mark ${selected.size} selected item(s) as inspection PASSED? Passed import items become ready for pickup.`,
+                confirmLabel: `Mark ${selected.size} inspected`,
+                run: markInspected,
+              })
+            }
           >
             Mark Selected as Inspected
           </Button>
@@ -2337,10 +2564,11 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
           No unloaded import items. Items appear here after Auto Unload on an arrived train.
         </Text>
       ) : (
-        <Table.ScrollContainer minWidth={2000}>
+        <Table.ScrollContainer minWidth={1650}>
           <Table highlightOnHover verticalSpacing="xs" striped>
             <Table.Thead>
               <Table.Tr>
+                <Table.Th w={34} />
                 <Table.Th w={40}>
                   <Checkbox
                     aria-label="Select all"
@@ -2349,10 +2577,8 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
                     onChange={() => (allSelected ? unselectAll() : selectAll())}
                   />
                 </Table.Th>
-                <Table.Th>Booking ID</Table.Th>
                 <Table.Th>Booking Ref</Table.Th>
                 <Table.Th>GRN</Table.Th>
-                <Table.Th>Customer ID</Table.Th>
                 <Table.Th>Customer Name</Table.Th>
                 <Table.Th>Arrival Time</Table.Th>
                 <Table.Th>Container #</Table.Th>
@@ -2368,7 +2594,18 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
             </Table.Thead>
             <Table.Tbody>
               {rows.map((r: ImportUnloadedItem) => (
-                <Table.Tr key={r.id}>
+                <Fragment key={r.id}>
+                <Table.Tr>
+                  <Table.Td>
+                    <ActionIcon
+                      variant="subtle"
+                      color="gray"
+                      aria-label="Show containers"
+                      onClick={() => setExpandedRow(expandedRow === r.id ? null : r.id)}
+                    >
+                      {expandedRow === r.id ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+                    </ActionIcon>
+                  </Table.Td>
                   <Table.Td>
                     <Checkbox
                       aria-label={`Select ${r.bookingReference ?? r.id}`}
@@ -2377,20 +2614,11 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
                     />
                   </Table.Td>
                   <Table.Td>
-                    <Text size="xs" c="dimmed">{r.bookingId ? `${r.bookingId.slice(0, 8)}…` : '—'}</Text>
-                  </Table.Td>
-                  <Table.Td>
-                    <Stack gap={2}>
-                      <Text size="sm" fw={600}>{r.bookingReference ?? '—'}</Text>
-                      <GrnDocumentButton inventoryId={r.id} grnNumber={r.grnNumber} />
-                    </Stack>
+                    <Text size="sm" fw={600}>{r.bookingReference ?? '—'}</Text>
                   </Table.Td>
                   <Table.Td>
                     <GrnDocumentButton inventoryId={r.id} grnNumber={r.grnNumber} />
                   </Table.Td>
-                  <Table.Td>
-                    <Text size="xs" c="dimmed">{r.customerId ? `${r.customerId.slice(0, 8)}…` : '—'}</Text>
-                  </Table.Td>
                   <Table.Td>{r.customerName ?? '—'}</Table.Td>
                   <Table.Td>{formatDate(r.arrivalTime)}</Table.Td>
                   <Table.Td>{r.containerNumber ?? '—'}</Table.Td>
@@ -2409,7 +2637,7 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
                     </Badge>
                   </Table.Td>
                   <Table.Td>
-                    <Badge color="indigo" variant="light" size="sm">{r.currentStatus}</Badge>
+                    <InventoryStatusBadge status={r.currentStatus as InventoryStatus} />
                   </Table.Td>
                   <Table.Td ta="right">
                     <Group gap="xs" justify="flex-end" wrap="nowrap">
@@ -2503,6 +2731,14 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
                     </Group>
                   </Table.Td>
                 </Table.Tr>
+                {expandedRow === r.id && (
+                  <BookingItemsExpansion
+                    bookingId={r.bookingId}
+                    colSpan={16}
+                    bulkFallback={r.cargoType ? `Bulk cargo — ${r.cargoType}, ${formatNumber(Number(r.weight))} t` : undefined}
+                  />
+                )}
+                </Fragment>
               ))}
             </Table.Tbody>
           </Table>
@@ -2531,6 +2767,7 @@ function ImportUnloadedQueueTab({ enabled }: { enabled: boolean }) {
         bookingId={containerItemsItem?.booking?.id ?? null}
         bookingReference={containerItemsItem?.booking?.reference ?? null}
       />
+      <ConfirmActionModal action={confirmAction} onClose={() => setConfirmAction(null)} />
     </Stack>
   );
 }
diff --git a/apps/edr-freight-web/backoffice/src/components/warehouses/ReleaseOrderModal.tsx b/apps/edr-freight-web/backoffice/src/components/warehouses/ReleaseOrderModal.tsx
index 5cca0d3b2..6833167f7 100644
--- a/apps/edr-freight-web/backoffice/src/components/warehouses/ReleaseOrderModal.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/warehouses/ReleaseOrderModal.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Alert, Button, Group, Modal, MultiSelect, NumberInput, Select, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { Alert, Button, Group, Modal, MultiSelect, NumberInput, SegmentedControl, Select, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
 import { Info, Scale } from 'lucide-react';
 
 import { useMutation, useQuery } from '@tanstack/react-query';
@@ -105,13 +105,16 @@ const parseInspectionNote = (notes: string | null | undefined) => {
     grossWeight: lineNumber(note, 'Gross Weight'),
     netWeight: lineNumber(note, 'Net Weight'),
     gateOutTime: toLocalDateTimeInput(lineValue(note, 'Gate Out Time')),
+    weighingSkipped: /^Weighing:\s*SKIPPED/im.test(note ?? ''),
   };
 };
 
 export function ReleaseOrderModal({ opened, onClose, item, truckPrefill }: ReleaseOrderModalProps) {
   const { toast } = useToast();
   const releaseMutation = useMutation(api.warehouses.release.mutationOptions());
-  const bookingId = item?.booking?.id;
+  // Some openers (inventory workbench) supply bookingId without the booking
+  // relation — fall back to it, or the truck/container-weight queries never run.
+  const bookingId = item?.booking?.id ?? item?.bookingId ?? undefined;
   // Customer self-haul trucks assigned to this booking via the portal.
   const { data: customerTrucks = [] } = useQuery({
     queryKey: ['release-customer-trucks', bookingId],
@@ -135,6 +138,8 @@ export function ReleaseOrderModal({ opened, onClose, item, truckPrefill }: Relea
   const [containerNumbers, setContainerNumbers] = useState<string[]>(['']);
   const [gateInTime, setGateInTime] = useState('');
   const [tareWeight, setTareWeight] = useState<number | ''>('');
+  // Containers may skip the weighbridge (decided at arrival, sticks for exit). Bulk always weighs.
+  const [weighTruck, setWeighTruck] = useState<'yes' | 'no'>('yes');
   const [grossWeight, setGrossWeight] = useState<number | ''>('');
   const [netWeight, setNetWeight] = useState<number | ''>('');
   const [gateOutTime, setGateOutTime] = useState('');
@@ -158,6 +163,7 @@ export function ReleaseOrderModal({ opened, onClose, item, truckPrefill }: Relea
       setContainerNumbers(initialContainerNumbers(item, inspection.containerNumber || prefillContainerNumber || assignedContainerNumber));
       setGateInTime(inspection.gateInTime);
       setTareWeight(inspection.tareWeight);
+      setWeighTruck(inspection.weighingSkipped ? 'no' : 'yes');
       setGrossWeight(inspection.grossWeight);
       setNetWeight(item?.weight == null ? inspection.netWeight : Number(item.weight));
       setGateOutTime(inspection.gateOutTime);
@@ -165,7 +171,7 @@ export function ReleaseOrderModal({ opened, onClose, item, truckPrefill }: Relea
   }, [opened, item, truckPrefill]);
 
   const savedInspection = parseInspectionNote(item?.notes);
-  const isExitStep = savedInspection.tareWeight !== '';
+  const isExitStep = savedInspection.tareWeight !== '' || savedInspection.weighingSkipped;
   const isEntranceLocked = isExitStep;
   const isCustomerAssignedTruck = Boolean(item?.booking?.customerTruckAssignedAt);
   const hasLastMileTruckPrefill = Boolean(truckPrefill?.truckPlateNumber || truckPrefill?.trailerPlateNumber);
@@ -196,8 +202,11 @@ export function ReleaseOrderModal({ opened, onClose, item, truckPrefill }: Relea
   ];
   // Only trucks actually assigned to THIS booking (last-mile prefill or customer
   // portal) are selectable. No global fleet list — if nothing is assigned, the
-  // operator types the plate manually in the field below.
-  const truckSelectOptions = assignedTruckOptions;
+  // operator types the plate manually in the field below. Deduped by plate:
+  // duplicate option values crash Mantine's Select.
+  const truckSelectOptions = [
+    ...new Map(assignedTruckOptions.map((t) => [t.value, t])).values(),
+  ];
   // Neither a last-mile truck nor a customer truck has been assigned yet.
   const noTruckAssigned = assignedTruckOptions.length === 0 && !isCustomerAssignedTruck;
   const isTruckIdentityLocked = isEntranceLocked || isCustomerAssignedTruck || hasLastMileTruckPrefill;
@@ -210,17 +219,28 @@ export function ReleaseOrderModal({ opened, onClose, item, truckPrefill }: Relea
   const containerWeightByNumber = new Map(
     containerWeights.map((c) => [c.containerNumber.toUpperCase(), Number(c.weightTons) || 0]),
   );
-  const containerSelectData = containerWeights.map((c) => ({
-    value: c.containerNumber,
-    label: `${c.containerNumber} · ${(Number(c.weightTons) || 0).toLocaleString()} t`,
-  }));
+  // Mantine Selects throw on duplicate option values — legacy bookings can carry
+  // the same container number on two lines, so dedupe defensively.
+  const containerSelectData = [
+    ...new Map(
+      containerWeights.map((c) => [
+        c.containerNumber,
+        {
+          value: c.containerNumber,
+          label: `${c.containerNumber} · ${(Number(c.weightTons) || 0).toLocaleString()} t`,
+        },
+      ]),
+    ).values(),
+  ];
   const selectedContainerNumbers = containerNumbers.map((n) => n.trim()).filter(Boolean);
   const selectedCargoWeight = Number(
     selectedContainerNumbers
       .reduce((sum, n) => sum + (containerWeightByNumber.get(n.toUpperCase()) ?? 0), 0)
       .toFixed(3),
   );
-  const useContainerNet = hasContainerWeights && selectedContainerNumbers.length > 0;
+  // Skip is only offered for container bookings; bulk always weighs.
+  const skipWeighing = hasContainerWeights && weighTruck === 'no';
+  const useContainerNet = hasContainerWeights && selectedContainerNumbers.length > 0 && !skipWeighing;
 
   const systemNetWeight = useContainerNet
     ? selectedCargoWeight
@@ -230,6 +250,7 @@ export function ReleaseOrderModal({ opened, onClose, item, truckPrefill }: Relea
   const computedNetWeight =
     tareWeight !== '' && grossWeight !== '' ? Number((Number(grossWeight) - Number(tareWeight)).toFixed(3)) : null;
   const weightMismatch =
+    !skipWeighing &&
     computedNetWeight != null && systemNetWeight !== '' && Math.abs(Number(systemNetWeight) - computedNetWeight) > 0.001;
   const title = isExitStep ? 'Customer truck leaving and exit weighing' : 'Customer truck arrival weighing';
 
@@ -239,19 +260,25 @@ export function ReleaseOrderModal({ opened, onClose, item, truckPrefill }: Relea
       toast({ variant: 'destructive', title: 'Truck plate and driver name are required' });
       return;
     }
-    if (!gateInTime || tareWeight === '') {
-      toast({ variant: 'destructive', title: 'Gate in time and tare weight are required' });
+    if (!gateInTime || (!skipWeighing && tareWeight === '')) {
+      toast({
+        variant: 'destructive',
+        title: skipWeighing ? 'Gate in time is required' : 'Gate in time and tare weight are required',
+      });
       return;
     }
-    if (isExitStep && (!gateOutTime || grossWeight === '')) {
-      toast({ variant: 'destructive', title: 'Gate out time and gross weight are required' });
+    if (isExitStep && (!gateOutTime || (!skipWeighing && grossWeight === ''))) {
+      toast({
+        variant: 'destructive',
+        title: skipWeighing ? 'Gate out time is required' : 'Gate out time and gross weight are required',
+      });
       return;
     }
     if (isExitStep && hasContainerWeights && selectedContainerNumbers.length === 0) {
       toast({ variant: 'destructive', title: 'Select the containers loaded on this truck' });
       return;
     }
-    if (isExitStep && systemNetWeight === '') {
+    if (isExitStep && !skipWeighing && systemNetWeight === '') {
       toast({ variant: 'destructive', title: 'System recorded net weight is missing' });
       return;
     }
@@ -279,9 +306,10 @@ export function ReleaseOrderModal({ opened, onClose, item, truckPrefill }: Relea
           truckType: truckType.trim() || undefined,
           containerNumber: containerNumbers.map((number) => number.trim()).filter(Boolean).join(', ') || undefined,
           gateInTime: toIsoDateTime(gateInTime),
-          tareWeight: Number(tareWeight),
-          grossWeight: grossWeight === '' ? undefined : Number(grossWeight),
-          netWeight: isExitStep && systemNetWeight !== '' ? Number(systemNetWeight) : undefined,
+          weighingSkipped: skipWeighing || undefined,
+          tareWeight: skipWeighing ? undefined : Number(tareWeight),
+          grossWeight: skipWeighing || grossWeight === '' ? undefined : Number(grossWeight),
+          netWeight: !skipWeighing && isExitStep && systemNetWeight !== '' ? Number(systemNetWeight) : undefined,
           gateOutTime: isExitStep ? toIsoDateTime(gateOutTime) : undefined,
         },
       });
@@ -421,9 +449,24 @@ export function ReleaseOrderModal({ opened, onClose, item, truckPrefill }: Relea
           )}
           <TextInput label="Gate in time" type="datetime-local" value={gateInTime} onChange={(e) => setGateInTime(e.currentTarget.value)} readOnly={isEntranceLocked} />
         </Group>
+        {hasContainerWeights && (
+          <Group gap="md" align="center">
+            <Text size="sm" fw={600}>Weigh truck?</Text>
+            <SegmentedControl
+              size="xs"
+              data={[{ value: 'yes', label: 'Yes — weigh' }, { value: 'no', label: 'No — pass' }]}
+              value={weighTruck}
+              onChange={(v) => setWeighTruck((v as 'yes' | 'no') ?? 'yes')}
+              disabled={isEntranceLocked}
+            />
+            {skipWeighing && (
+              <Text size="xs" c="dimmed">Weighbridge skipped — container passes without tare/gross.</Text>
+            )}
+          </Group>
+        )}
         <Group grow>
-          <NumberInput label="Tare weight (t)" required min={0} value={tareWeight} onChange={(v) => setTareWeight(v === '' ? '' : Number(v))} readOnly={isEntranceLocked} />
-          <NumberInput label="Gross weight (t)" required={isExitStep} min={0} value={grossWeight} onChange={(v) => setGrossWeight(v === '' ? '' : Number(v))} disabled={!isExitStep} />
+          <NumberInput label="Tare weight (t)" required={!skipWeighing} min={0} value={tareWeight} onChange={(v) => setTareWeight(v === '' ? '' : Number(v))} readOnly={isEntranceLocked} disabled={skipWeighing} />
+          <NumberInput label="Gross weight (t)" required={isExitStep && !skipWeighing} min={0} value={grossWeight} onChange={(v) => setGrossWeight(v === '' ? '' : Number(v))} disabled={!isExitStep || skipWeighing} />
           <NumberInput
             label={useContainerNet ? 'Selected cargo net (t)' : 'Recorded net weight (system t)'}
             min={0}
diff --git a/apps/edr-freight-web/backoffice/src/components/warehouses/TruckDispatchModal.tsx b/apps/edr-freight-web/backoffice/src/components/warehouses/TruckDispatchModal.tsx
index 73e37c1ec..f26469ac7 100644
--- a/apps/edr-freight-web/backoffice/src/components/warehouses/TruckDispatchModal.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/warehouses/TruckDispatchModal.tsx
@@ -5,7 +5,7 @@ import { useState } from 'react';
 
 import { useToast } from '@/hooks/use-toast';
 import { warehouseService } from '@/services/warehouse.service';
-import { extractErrorMessage } from './options';
+import { extractDownloadErrorMessage, extractErrorMessage } from './options';
 import { openPdfBlob } from './pdf';
 
 interface TruckDispatchModalProps {
@@ -56,7 +56,7 @@ export function TruckDispatchModal({ opened, onClose, bookingId, bookingReferenc
       const res = await warehouseService.downloadTruckExitPaper(assignmentId);
       openPdfBlob(res.data, `exit-${plate}.pdf`);
     } catch (e) {
-      toast({ variant: 'destructive', title: 'Exit paper not ready', description: extractErrorMessage(e) });
+      toast({ variant: 'destructive', title: 'Exit paper not ready', description: await extractDownloadErrorMessage(e) });
     }
   };
 
diff --git a/apps/edr-freight-web/backoffice/src/components/warehouses/WarehouseInventoryTable.tsx b/apps/edr-freight-web/backoffice/src/components/warehouses/WarehouseInventoryTable.tsx
index 871780bbf..51650b459 100644
--- a/apps/edr-freight-web/backoffice/src/components/warehouses/WarehouseInventoryTable.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/warehouses/WarehouseInventoryTable.tsx
@@ -10,7 +10,7 @@ import {
   type WarehouseInventoryItem,
 } from '@/types/warehouse';
 import { InventoryStatusBadge } from './badges';
-import { extractErrorMessage, formatDate, formatNumber, humanizeEnum } from './options';
+import { extractDownloadErrorMessage, formatDate, formatNumber, humanizeEnum } from './options';
 import { openPdfBlob } from './pdf';
 
 interface WarehouseInventoryTableProps {
@@ -78,7 +78,7 @@ function GrnDocumentButton({ item }: { item: WarehouseInventoryItem }) {
       toast({ title: opened ? 'GRN document opened' : 'GRN document downloaded' });
     } catch (error) {
       pdfWindow?.close();
-      toast({ variant: 'destructive', title: 'GRN document failed', description: extractErrorMessage(error) });
+      toast({ variant: 'destructive', title: 'GRN document failed', description: await extractDownloadErrorMessage(error) });
     } finally {
       setLoading(false);
     }
@@ -160,7 +160,12 @@ export function WarehouseInventoryTable({
           {items.map((item) => {
             const kind = itemKind(item);
             const busy = busyId === item.id;
-            const nextAction = getNextInventoryAction(item);
+            // Per-booking Load and Dispatch are retired: wagon loading happens in
+            // the train flow and dispatch at the train level (which already
+            // advances inventory). Only the remaining lifecycle actions render.
+            const rawNextAction = getNextInventoryAction(item);
+            const nextAction =
+              rawNextAction === 'load' || rawNextAction === 'dispatch' ? null : rawNextAction;
             const canGenerateHandover =
               item.inspectionStatus === 'PASSED' &&
               Boolean(item.bookingId) &&
@@ -232,26 +237,15 @@ export function WarehouseInventoryTable({
                       </Button>
                     )}
                     {item.status === 'READY_FOR_PICKUP' && (
-                      <>
-                        <Button
-                          size="compact-xs"
-                          variant="light"
-                          color="blue"
-                          loading={busy}
-                          onClick={() => onAdvance(item, 'store')}
-                        >
-                          Store
-                        </Button>
-                        <Button
-                          size="compact-xs"
-                          variant="light"
-                          color="green"
-                          loading={busy}
-                          onClick={() => onAdvance(item, 'dispatch')}
-                        >
-                          Dispatch
-                        </Button>
-                      </>
+                      <Button
+                        size="compact-xs"
+                        variant="light"
+                        color="blue"
+                        loading={busy}
+                        onClick={() => onAdvance(item, 'store')}
+                      >
+                        Store
+                      </Button>
                     )}
                     {item.status !== 'DISPATCHED' && (
                       <Tooltip label="Move" withArrow>
diff --git a/apps/edr-freight-web/backoffice/src/constants/QUERY_KEYS.ts b/apps/edr-freight-web/backoffice/src/constants/QUERY_KEYS.ts
index 2ceaae870..dbac021f3 100644
--- a/apps/edr-freight-web/backoffice/src/constants/QUERY_KEYS.ts
+++ b/apps/edr-freight-web/backoffice/src/constants/QUERY_KEYS.ts
@@ -103,7 +103,8 @@ export const QUERY_KEYS = {
     schedules: () => ["train-scheduling", "schedules"] as const,
     scheduleById: (id: string) => ["train-scheduling", "schedule", id] as const,
     track: (id: string) => ["train-scheduling", "track", id] as const,
-    batchBoard: () => ["train-scheduling", "batch-board"] as const,
+    batchBoard: (filters?: unknown) =>
+      ["train-scheduling", "batch-board", "list", filters ?? {}] as const,
     batchBoardDetail: (scheduleId: string) =>
       ["train-scheduling", "batch-board", scheduleId] as const,
     unassignedBookings: (id: string) =>
diff --git a/apps/edr-freight-web/backoffice/src/constants/URLS.ts b/apps/edr-freight-web/backoffice/src/constants/URLS.ts
index c6f98c8a2..ca9f6342d 100644
--- a/apps/edr-freight-web/backoffice/src/constants/URLS.ts
+++ b/apps/edr-freight-web/backoffice/src/constants/URLS.ts
@@ -211,6 +211,8 @@ export const URL_CONSTANTS = {
     CLEARANCE_HISTORY: "/contracts/clearance/history",
     OPS_CLEARANCE_HISTORY: "/contracts/clearance/ops-history",
     BOOKINGS: (id: string) => `/contracts/${id}/bookings`,
+    BOOKINGS_COMPLETE: (id: string, bookingId: string) =>
+      `/contracts/${id}/bookings/${bookingId}/complete`,
     VALIDATE_SHIPMENT: (id: string) => `/contracts/${id}/validate-shipment`,
     CAPACITY: (id: string) => `/contracts/${id}/capacity`,
     // Shipment requests (GENERAL + customs, Path B): customer → GL queue → booking.
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/components/External-Portal-Navigation/PortalHeader.tsx b/apps/edr-freight-web/backoffice/src/external-portal/components/External-Portal-Navigation/PortalHeader.tsx
new file mode 100644
index 000000000..5259dcb7a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/components/External-Portal-Navigation/PortalHeader.tsx
@@ -0,0 +1,250 @@
+import NotificationList from "@/record-management/components/NotificationList";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { ChevronDown, User, Key, LogOut } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { Button } from "@/shared/common/ui/button";
+import { useTranslation } from "react-i18next";
+import { FiBell, FiChevronDown } from "react-icons/fi";
+import { useNavigate } from "react-router-dom";
+import { useNotifications } from "@/shared/hooks/useNotification";
+import { cn } from "@/shared/common/ui/fileUploader/utils";
+import { useUser } from "@/shared/context/UserContext";
+import {
+  UI_LANGUAGE_OPTIONS,
+  getUiLanguageLabel,
+  getUiLanguageShortLabel,
+  resolveUiLanguage,
+} from "@/shared/i18n/uiLanguages";
+
+export const ExternalPortal = ({
+  mobileView = false,
+  onItemClick,
+}: {
+  mobileView?: boolean;
+  onItemClick?: () => void;
+}) => {
+  const { t, i18n } = useTranslation();
+  const navigate = useNavigate();
+  const userDetails = useUser();
+  const { logout } = useAuthUser();
+  const fullName = userDetails?.name?.en || t("header.user");
+  const splittedName = fullName.trim().split(" ");
+  const initials =
+    splittedName.length === 1
+      ? splittedName[0][0]
+      : `${splittedName[0][0]}${splittedName[1][0]}`;
+
+  const currentLanguage = resolveUiLanguage(i18n.language);
+  const changeLanguage = (lng: string) => i18n.changeLanguage(lng);
+  const handleLogout = () => {
+    logout("/external-portal/signin");
+  };
+
+  const { unseenCount } = useNotifications({
+    take: 10,
+    skip: 0,
+    orderBy: "updatedAt:DESC",
+  });
+  const [openNotifications, setOpenNotifications] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setOpenNotifications(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  // Handle navigation with optional callback for mobile
+  const handleNavigation = (path: string) => {
+    navigate(path);
+    if (onItemClick) onItemClick();
+  };
+
+  return (
+    <>
+      <div
+        className={`flex items-center ${
+          mobileView
+            ? "flex-col space-y-4 w-full"
+            : "space-x-1 md:space-x-3 ml-auto"
+        }`}>
+        {/* Notifications */}
+    
+        <div
+          className={`relative ${mobileView ? "w-full" : ""}`}
+          ref={dropdownRef}>
+          <Button
+            variant="ghost"
+            size={mobileView ? "default" : "icon"}
+            className={cn(
+              "relative text-gray-500 hover:bg-primary-50 hover:text-primary-600",
+              mobileView
+                ? "w-full justify-start px-4 py-3 text-base"
+                : "h-8 w-8 rounded-full md:h-9 md:w-9",
+              openNotifications &&
+                "bg-primary-50 text-primary-700 ring-1 ring-inset ring-primary-300 dark:bg-primary-900/30 dark:text-primary-300 dark:ring-primary-700/60",
+            )}
+            aria-label={t("header.notifications")}
+            onClick={() => setOpenNotifications((prev) => !prev)}>
+            <FiBell
+              className={cn(
+                "h-4 w-4 transition-colors md:h-5 md:w-5",
+                mobileView && "mr-3",
+                openNotifications &&
+                  "fill-primary-100 text-primary-700 dark:fill-primary-900/40 dark:text-primary-300",
+              )}
+            />
+            {mobileView && <span>{t("header.notifications")}</span>}
+            {unseenCount > 0 && (
+              <span
+                className={`absolute ${
+                  mobileView ? "top-3 right-4" : "-top-1 -right-1"
+                } bg-red-500 text-white text-[10px] font-bold px-1.5 py-0.5 rounded-full`}>
+                {unseenCount}
+              </span>
+            )}
+          </Button>
+          {openNotifications && (
+            <div
+              className={
+                mobileView
+                  ? "fixed left-3 right-3 top-16 z-50 mt-2 max-h-[calc(100dvh-5rem)] overflow-hidden rounded-2xl border bg-white shadow-2xl"
+                  : "absolute right-0 z-50 mt-2 w-[24rem] max-w-[calc(100vw-2rem)] overflow-hidden rounded-2xl border bg-white shadow-2xl"
+              }>
+              <NotificationList />
+            </div>
+          )}
+        </div>
+        {/* Language Switcher */}
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger asChild>
+            <Button
+              variant="ghost"
+              size={mobileView ? "default" : "sm"}
+              className={`${
+                mobileView
+                  ? "w-full justify-start px-4 py-3 text-base"
+                  : "gap-1 md:gap-1.5 text-xs md:text-sm h-8 px-2 md:px-3"
+              } font-medium text-gray-700 hover:bg-primary-50 hover:text-primary-600`}
+              onClick={(e) => e.preventDefault()}>
+              <FiChevronDown
+                className={`${
+                  mobileView ? "mr-3" : ""
+                } h-3 w-3 md:h-4 md:w-4 opacity-50`}
+              />
+              <span>{getUiLanguageLabel(currentLanguage, t)}</span>
+            </Button>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content
+            className={`w-40 bg-white shadow-xl rounded-lg p-1 z-50 ${
+              mobileView ? "ml-4" : ""
+            }`}
+            align={mobileView ? "start" : "end"}
+            sideOffset={5}>
+            {UI_LANGUAGE_OPTIONS.map((lang) => (
+              <DropdownMenu.Item
+                key={lang.value}
+                onSelect={() => {
+                  changeLanguage(lang.value);
+                  if (onItemClick) onItemClick();
+                }}
+                className={cn(
+                  "flex items-center justify-between text-sm text-gray-700 hover:bg-primary-100 rounded-md px-3 py-2 cursor-pointer",
+                  currentLanguage === lang.value && "bg-primary-50",
+                )}
+              >
+                <span>{getUiLanguageLabel(lang.value, t)}</span>
+                {currentLanguage === lang.value && (
+                  <span className="text-xs">
+                    {getUiLanguageShortLabel(lang.value, t)}
+                  </span>
+                )}
+              </DropdownMenu.Item>
+            ))}
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+        {/* User Menu */}
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger asChild>
+            <Button
+              variant="ghost"
+              className={`flex items-center ${
+                mobileView
+                  ? "w-full justify-start px-4 py-3 text-base"
+                  : "h-8 md:h-10 px-1 md:px-2"
+              } space-x-1 md:space-x-2 text-gray-700 hover:bg-gray-100 hover:text-gray-900`}
+              aria-label={t("header.userMenu")}>
+              <div
+                className={`flex items-center justify-center ${
+                  mobileView ? "w-10 h-10" : "w-7 h-7 md:w-8 md:h-8"
+                } rounded-full bg-gray-200`}>
+                <span
+                  className={`${
+                    mobileView ? "text-base" : "text-xs md:text-sm"
+                  } font-medium`}>
+                  {initials.toUpperCase()}
+                </span>
+              </div>
+              {!mobileView && (
+                <div className="hidden sm:flex flex-col items-start">
+                  <span className="text-xs font-medium leading-none">
+                    {userDetails?.name?.en}
+                  </span>
+                  <span className="text-[10px] text-gray-500 leading-none mt-1">
+                    External Organization
+                  </span>
+                </div>
+              )}
+              {mobileView && (
+                <div className="flex flex-col items-start ml-3">
+                  <span className="text-sm font-medium leading-none">
+                    {userDetails?.name?.en}
+                  </span>
+                  <span className="text-xs text-gray-500 leading-none mt-1">
+                    External Organization
+                  </span>
+                </div>
+              )}
+              <ChevronDown className="h-3 w-3 md:h-4 md:w-4 text-gray-500" />
+            </Button>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content
+            className={`w-48 p-1 bg-white shadow-xl rounded-md ${
+              mobileView ? "ml-4" : ""
+            }`}
+            align={mobileView ? "start" : "end"}>
+            <DropdownMenu.Item
+              className="flex items-center px-3 py-2.5 text-sm text-gray-700 hover:bg-primary-100 rounded-md cursor-pointer"
+              onClick={() => handleNavigation("/profile")}>
+              <User className="mr-2.5 h-4 w-4 text-gray-500" />
+              <span>{t("header.viewProfile")}</span>
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              className="flex items-center px-3 py-2.5 text-sm text-gray-700 hover:bg-primary-100 rounded-md cursor-pointer"
+              onClick={() =>
+                handleNavigation("/record-management/change-password")
+              }>
+              <Key className="mr-2.5 h-4 w-4 text-gray-500" />
+              <span>{t("header.changePassword")}</span>
+            </DropdownMenu.Item>
+            <DropdownMenu.Separator className="my-1 h-px bg-gray-200" />
+            <DropdownMenu.Item
+              className="flex items-center px-3 py-2.5 text-sm text-red-600 hover:bg-red-50 rounded-md cursor-pointer"
+              onClick={handleLogout}>
+              <LogOut className="mr-2.5 h-4 w-4" />
+              <span>{t("header.signOut")}</span>
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </div>
+    </>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/components/External-Portal-Navigation/VerificationPending.tsx b/apps/edr-freight-web/backoffice/src/external-portal/components/External-Portal-Navigation/VerificationPending.tsx
new file mode 100644
index 000000000..52de124c3
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/components/External-Portal-Navigation/VerificationPending.tsx
@@ -0,0 +1,49 @@
+"use client";
+import Header from "../../../layout/components/Header";
+import React from "react";
+import { AlertCircle, Mail, PhoneCall } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+interface VerificationPendingProps {
+  hasCompletedRegistration: boolean;
+  contactNumber?: string;
+  email?:string;
+
+}
+
+const VerificationPending: React.FC<VerificationPendingProps> = ({
+  hasCompletedRegistration,
+  contactNumber,
+  email,
+}) => {
+  const { t } = useTranslation();
+
+  if (hasCompletedRegistration) {
+    return null; // ✅ Nothing to show if user has finished registration
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-primary-50 px-6">
+      <Header />
+
+      <div className="max-w-lg w-full bg-white rounded-2xl shadow-lg p-8 border border-primary-200">
+        <div className="flex items-center gap-3 mb-4">
+          <AlertCircle className="text-primary-600 w-6 h-6" />
+          <h1 className="text-xl font-semibold text-primary-700">
+            {t("verification.pending")}
+          </h1>
+        </div>
+
+        <p className="text-gray-700 mb-4">
+          {t("verification.message")}{" "}
+          <span className="font-medium text-primary-700">
+            <Mail/>{email} or <PhoneCall/>{contactNumber} </span>.
+        </p>
+
+        
+      </div>
+    </div>
+  );
+};
+
+export default VerificationPending;
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/ExternalAuthPage.tsx b/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/ExternalAuthPage.tsx
new file mode 100644
index 000000000..46c4ff381
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/ExternalAuthPage.tsx
@@ -0,0 +1,5 @@
+import UserTypeSelection from "./UserTypeSelection";
+
+export default function ExternalAuthPage() {
+  return <UserTypeSelection />;
+}
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/ExternalPortalCallBack.tsx b/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/ExternalPortalCallBack.tsx
new file mode 100644
index 000000000..e811c5b59
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/ExternalPortalCallBack.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import { useRegisterExternalPortalUser } from "@/external-portal/hooks/useRegisterExternalPortalUser";
+import { Button } from "@/shared/common/ui/button";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { getDefaultFaydaRedirectUri } from "@/shared/utils/faydaOidc";
+import { persistFaydaRegistrationAuth } from "@/shared/utils/faydaAuthSession";
+import { Loader2 } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { toast } from "sonner";
+
+export default function ExternalPortalCallback() {
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const { handleError } = useErrorHandler(t);
+  const { isFayidaRegistering, registerExternalFayidaUser } =
+    useRegisterExternalPortalUser();
+  const hasRun = useRef(false);
+
+  useEffect(() => {
+    if (hasRun.current) return;
+    hasRun.current = true;
+
+    const code = searchParams.get("code");
+    const state = searchParams.get("state");
+
+    if (!code) {
+      toast.error("Missing authorization code");
+      setError("Missing authorization code");
+      setLoading(false);
+      navigate("/external-portal/signin", { replace: true });
+      return;
+    }
+
+    const loginWithFayda = async () => {
+      try {
+        const res = await registerExternalFayidaUser({
+          code,
+          redirectUri: getDefaultFaydaRedirectUri(),
+        });
+
+        if (!res || !res.response?.data) {
+          throw new Error("Invalid response from Fayda login");
+        }
+
+        const data = res.response.data;
+        const userId = data?.userId ?? data?.user?.id ?? data?.user?.userId;
+        const token = data?.token;
+        const refreshToken = data?.refreshToken;
+
+        if (!userId) {
+          throw new Error("Failed to get user ID from server.");
+        }
+
+        await persistFaydaRegistrationAuth({
+          ...data,
+          token,
+          refreshToken,
+        });
+
+        navigate(`/verify-otp?userId=${userId}&isExternalOrg=false`, {
+          replace: true,
+        });
+      } catch (err: unknown) {
+        console.error("LoginWithFayda error:", err);
+        handleError(err);
+        setError(
+          err instanceof Error
+            ? err.message
+            : t("registration.auth.faydaSigninFailed"),
+        );
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loginWithFayda();
+  }, [searchParams, navigate, handleError, registerExternalFayidaUser, t]);
+
+  if (loading || isFayidaRegistering) {
+    return (
+      <div className="min-h-screen flex flex-col items-center justify-center bg-white">
+        <Loader2 className="h-10 w-10 text-primary-600 animate-spin mb-4" />
+        <p className="text-primary-700 text-lg font-medium">
+          {t("registration.auth.faydaProcessing")}
+        </p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen flex flex-col items-center justify-center bg-red-50">
+        <p className="text-red-600 mb-4">{error}</p>
+        <Button
+          onClick={() =>
+            navigate("/external-portal/signin", { replace: true })
+          }>
+          {t("registration.auth.backToAuth")}
+        </Button>
+      </div>
+    );
+  }
+
+  return null;
+}
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/FilePreview.tsx b/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/FilePreview.tsx
new file mode 100644
index 000000000..a0049dcb1
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/FilePreview.tsx
@@ -0,0 +1,249 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { Button } from "@/shared/common/ui/button";
+import {
+  FileText,
+  ImageIcon,
+  FileIcon,
+  VideoIcon,
+  DownloadIcon,
+  XIcon,
+  Loader2,
+} from "lucide-react";
+import { cn } from "@/shared/lib/utils";
+import { useToast } from "@/shared/common/ui/use-toast";
+
+type FileType = "image" | "pdf" | "video" | "other";
+
+interface FilePreviewProps {
+  file: File | string; // Can accept File object or URL string
+  type?: FileType; // Optional type hint
+  className?: string;
+  onRemove?: () => void;
+  showDownload?: boolean;
+}
+
+export const FilePreview = ({
+  file,
+  type,
+  className,
+  onRemove,
+  showDownload = true,
+}: FilePreviewProps) => {
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [detectedType, setDetectedType] = useState<FileType>("other");
+  const { toast } = useToast();
+
+  useEffect(() => {
+    const determineFileType = (): FileType => {
+      if (type) return type;
+
+      if (typeof file === "string") {
+        const extension = file.split(".").pop()?.toLowerCase();
+        if (["jpg", "jpeg", "png", "gif", "webp"].includes(extension || "")) {
+          return "image";
+        }
+        if (extension === "pdf") return "pdf";
+        if (["mp4", "webm", "ogg"].includes(extension || "")) return "video";
+        return "other";
+      }
+
+      if (file.type.startsWith("image/")) return "image";
+      if (file.type === "application/pdf") return "pdf";
+      if (file.type.startsWith("video/")) return "video";
+      return "other";
+    };
+
+    const generatePreview = async () => {
+      setIsLoading(true);
+      setDetectedType(determineFileType());
+
+      try {
+        if (typeof file === "string") {
+          setPreviewUrl(file);
+        } else {
+          const url = URL.createObjectURL(file);
+          setPreviewUrl(url);
+        }
+      } catch (error) {
+        console.error("Error generating preview:", error);
+        toast({
+          title: "Error",
+          description: "Could not generate file preview",
+          variant: "destructive",
+        });
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    generatePreview();
+
+    return () => {
+      if (previewUrl && typeof file !== "string") {
+        URL.revokeObjectURL(previewUrl);
+      }
+    };
+  }, [file, type]);
+
+  const handleDownload = () => {
+    if (!previewUrl) return;
+
+    const link = document.createElement("a");
+    link.href = previewUrl;
+    link.download = typeof file === "string" ? "download" : file.name;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  const renderPreview = () => {
+    if (isLoading) {
+      return (
+        <div className="flex items-center justify-center h-full">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        </div>
+      );
+    }
+
+    switch (detectedType) {
+      case "image":
+        return (
+          <img
+            src={previewUrl || ""}
+            alt="Preview"
+            className="object-contain w-full h-full"
+            onLoad={() => setIsLoading(false)}
+          />
+        );
+      case "pdf":
+        return (
+          <div className="flex flex-col items-center justify-center h-full p-4">
+            <FileText className="h-16 w-16 text-red-500 dark:text-red-400" />
+            <span className="mt-2 text-sm font-medium truncate text-foreground">
+              {typeof file === "string" ? "PDF Document" : file.name}
+            </span>
+          </div>
+        );
+      case "video":
+        return (
+          <video
+            controls
+            className="w-full h-full"
+            onLoadedData={() => setIsLoading(false)}>
+            <source src={previewUrl || ""} type="video/mp4" />
+            Your browser does not support the video tag.
+          </video>
+        );
+      default:
+        return (
+          <div className="flex flex-col items-center justify-center h-full p-4">
+            <FileIcon className="h-16 w-16 text-gray-400 dark:text-gray-500" />
+            <span className="mt-2 text-sm font-medium truncate text-foreground">
+              {typeof file === "string" ? "File" : file.name}
+            </span>
+          </div>
+        );
+    }
+  };
+
+  return (
+    <>
+      <div
+        className={cn(
+          "relative border rounded-md overflow-hidden bg-gray-50 dark:bg-gray-800 dark:border-gray-700 w-full h-40",
+          className
+        )}>
+        {renderPreview()}
+
+        <div className="absolute top-2 right-2 flex gap-2">
+          {onRemove && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8 bg-background/80 hover:bg-background"
+              onClick={(e) => {
+                e.stopPropagation();
+                onRemove();
+              }}>
+              <XIcon className="h-4 w-4" />
+            </Button>
+          )}
+          {showDownload && previewUrl && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8 bg-background/80 hover:bg-background"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleDownload();
+              }}>
+              <DownloadIcon className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+
+        <Button
+          variant="ghost"
+          className="absolute inset-0 w-full h-full opacity-0 hover:opacity-100 hover:bg-background/20 dark:hover:bg-background/40"
+          onClick={() => setIsDialogOpen(true)}>
+          <span className="sr-only">View fullscreen</span>
+        </Button>
+      </div>
+
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent className="max-w-[90vw] max-h-[90vh]">
+          <DialogHeader>
+            <DialogTitle>
+              {typeof file === "string" ? "File Preview" : file.name}
+            </DialogTitle>
+          </DialogHeader>
+          <div className="relative h-[70vh]">
+            {detectedType === "image" && (
+              <img
+                src={previewUrl || ""}
+                alt="Fullscreen preview"
+                className="object-contain w-full h-full"
+              />
+            )}
+            {detectedType === "pdf" && (
+              <iframe
+                src={previewUrl || ""}
+                className="w-full h-full"
+                title="PDF Preview"
+              />
+            )}
+            {detectedType === "video" && (
+              <video controls autoPlay className="w-full h-full">
+                <source src={previewUrl || ""} type="video/mp4" />
+              </video>
+            )}
+            {detectedType === "other" && (
+              <div className="flex items-center justify-center h-full">
+                <FileIcon className="h-16 w-16 text-gray-400 dark:text-gray-500" />
+              </div>
+            )}
+          </div>
+          <div className="flex justify-end gap-2">
+            {showDownload && (
+              <Button onClick={handleDownload} variant="outline">
+                <DownloadIcon className="mr-2 h-4 w-4" />
+                Download
+              </Button>
+            )}
+            <Button onClick={() => setIsDialogOpen(false)}>Close</Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/ImageCropper.tsx b/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/ImageCropper.tsx
new file mode 100644
index 000000000..45765f8a4
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/ImageCropper.tsx
@@ -0,0 +1,227 @@
+"use client";
+
+import React, { useState, useRef, useCallback } from "react";
+import ReactCrop, {
+  centerCrop,
+  makeAspectCrop,
+  Crop,
+  PixelCrop,
+  convertToPixelCrop,
+} from "react-image-crop";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import { Label } from "@/shared/common/ui/label";
+import { RotateCw, RotateCcw, Rotate3D } from "lucide-react";
+import { canvasPreview } from "./canvasPreview";
+import { useDebounceEffect } from "./useDebounceEffect";
+import "react-image-crop/dist/ReactCrop.css";
+
+interface ImageCropperProps {
+  file: File;
+  onCropComplete: (croppedFile: File) => void;
+  aspectRatio?: number;
+}
+
+export function ImageCropper({
+  file,
+  onCropComplete,
+  aspectRatio = 3 / 4,
+}: ImageCropperProps) {
+  const [imgSrc, setImgSrc] = useState("");
+  const previewCanvasRef = useRef<HTMLCanvasElement>(null);
+  const imgRef = useRef<HTMLImageElement>(null);
+  const [crop, setCrop] = useState<Crop>();
+  const [completedCrop, setCompletedCrop] = useState<PixelCrop>();
+  const [scale, setScale] = useState(1);
+  const [rotate, setRotate] = useState(0);
+
+  const rotateClockwise = useCallback(() => {
+    setRotate((prev) => (prev + 90) % 360);
+  }, []);
+
+  const rotateCounterClockwise = useCallback(() => {
+    setRotate((prev) => (prev - 90) % 360);
+  }, []);
+
+  const rotateSmall = useCallback((degrees: number) => {
+    setRotate((prev) => (prev + degrees) % 360);
+  }, []);
+
+  React.useEffect(() => {
+    const reader = new FileReader();
+    reader.addEventListener("load", () => {
+      setImgSrc(reader.result?.toString() || "");
+    });
+    reader.readAsDataURL(file);
+  }, [file]);
+
+  function onImageLoad(e: React.SyntheticEvent<HTMLImageElement>) {
+    const { width, height } = e.currentTarget;
+    setCrop(centerAspectCrop(width, height, aspectRatio));
+  }
+
+  function centerAspectCrop(
+    mediaWidth: number,
+    mediaHeight: number,
+    aspect: number
+  ) {
+    return centerCrop(
+      makeAspectCrop(
+        {
+          unit: "%",
+          width: 90,
+        },
+        aspect,
+        mediaWidth,
+        mediaHeight
+      ),
+      mediaWidth,
+      mediaHeight
+    );
+  }
+
+  async function handleCropComplete() {
+    const image = imgRef.current;
+    const previewCanvas = previewCanvasRef.current;
+    if (!image || !previewCanvas || !completedCrop) {
+      throw new Error("Crop canvas does not exist");
+    }
+
+    const scaleX = image.naturalWidth / image.width;
+    const scaleY = image.naturalHeight / image.height;
+
+    const offscreen = new OffscreenCanvas(
+      completedCrop.width * scaleX,
+      completedCrop.height * scaleY
+    );
+    const ctx = offscreen.getContext("2d");
+    if (!ctx) {
+      throw new Error("No 2d context");
+    }
+
+    ctx.drawImage(
+      previewCanvas,
+      0,
+      0,
+      previewCanvas.width,
+      previewCanvas.height,
+      0,
+      0,
+      offscreen.width,
+      offscreen.height
+    );
+
+    const blob = await offscreen.convertToBlob({
+      type: file.type || "image/png",
+    });
+
+    const croppedFile = new File([blob], file.name, {
+      type: blob.type,
+      lastModified: Date.now(),
+    });
+
+    onCropComplete(croppedFile);
+  }
+
+  useDebounceEffect(
+    async () => {
+      if (
+        completedCrop?.width &&
+        completedCrop?.height &&
+        imgRef.current &&
+        previewCanvasRef.current
+      ) {
+        canvasPreview(
+          imgRef.current,
+          previewCanvasRef.current,
+          completedCrop,
+          scale,
+          rotate
+        );
+      }
+    },
+    100,
+    [completedCrop, scale, rotate]
+  );
+
+  return (
+    <div className="flex flex-col gap-4">
+      {!!imgSrc && (
+        <ReactCrop
+          crop={crop}
+          onChange={(_, percentCrop) => setCrop(percentCrop)}
+          onComplete={(c) => setCompletedCrop(c)}
+          aspect={aspectRatio}
+          minHeight={100}>
+          <img
+            ref={imgRef}
+            alt="Crop me"
+            src={imgSrc}
+            style={{ transform: `rotate(${rotate}deg)` }}
+            onLoad={onImageLoad}
+            className="max-h-[400px] object-contain"
+          />
+        </ReactCrop>
+      )}
+
+      <div className="flex items-center gap-2">
+        <Label htmlFor="rotate-input">Rotate:</Label>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={rotateCounterClockwise}
+          title="Rotate counter-clockwise">
+          <RotateCcw className="h-4 w-4" />
+        </Button>
+        <Input
+          id="rotate-input"
+          type="number"
+          value={rotate}
+          min="-180"
+          max="180"
+          onChange={(e) => setRotate(Number(e.target.value))}
+          className="w-16"
+        />
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={rotateClockwise}
+          title="Rotate clockwise">
+          <RotateCw className="h-4 w-4" />
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => rotateSmall(15)}
+          title="Rotate 15° clockwise">
+          <Rotate3D className="h-4 w-4 mr-1" /> 15°
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => rotateSmall(-15)}
+          title="Rotate 15° counter-clockwise">
+          <Rotate3D className="h-4 w-4 mr-1 transform scale-x-[-1]" /> 15°
+        </Button>
+      </div>
+
+      <Button
+        onClick={handleCropComplete}
+        disabled={!completedCrop}
+        className="self-start">
+        Apply Crop
+      </Button>
+
+      <canvas
+        ref={previewCanvasRef}
+        style={{
+          display: "none",
+          border: "1px solid black",
+          objectFit: "contain",
+          width: completedCrop?.width,
+          height: completedCrop?.height,
+        }}
+      />
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/RegistrationStepper.tsx b/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/RegistrationStepper.tsx
new file mode 100644
index 000000000..5267c8f53
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/RegistrationStepper.tsx
@@ -0,0 +1,544 @@
+// RegistrationStepper.tsx
+"use client";
+
+import React, { useEffect, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/shared/common/ui/form";
+import { Input } from "@/shared/common/ui/input";
+import { Mail, User, Phone, Text, Building } from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import { Stepper } from "./Stepper";
+import VerifyOtp from "../verifyOTP";
+import UploadDocumentsStep from "./UploadDocumentsStep";
+import { useRegisterExternalPortalUser } from "@/external-portal/hooks/useRegisterExternalPortalUser";
+import { submitApplication } from "@/external-portal/services/portalOutgoingService";
+import { toast } from "sonner";
+import { useNavigate } from "react-router-dom";
+import { useDocumentRequirement } from "@/shared/hooks/useOrganizationReport";
+import { FilterEnum } from "@/shared/services/organizationsService";
+import { DocumentReq } from "./UploadDocumentsStep";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { useTranslation } from "react-i18next";
+import { useDocumentUploads } from "@/external-portal/hooks/useDocumentUploads";
+import { DocumentPayloadDto } from "@/shared/dto/External-Portal/External-PortalDto";
+import { useDeleteExternalUser } from "@/super-admin/hooks/useExternalUsers";
+import Cookies from "js-cookie";
+
+type FilesRecord = Record<string, File | string | null>;
+
+// registration schema
+const registrationSchema = z.object({
+  email: z.string().email("Invalid email address"),
+  username: z.string().min(3, "Username must be at least 3 characters"),
+  phoneNumber: z.string().min(10, "Phone number must be at least 10 digits"),
+  name: z.object({
+    en: z.string().min(2, "English name must be at least 2 characters"),
+    am: z.string().min(2, "Amharic name must be at least 2 characters"),
+  }),
+  userType: z.enum(["individual", "external_organization"]),
+});
+
+type RegistrationFormValues = z.infer<typeof registrationSchema>;
+
+const RegistrationStepper: React.FC = () => {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [formData, setFormData] = useState<RegistrationFormValues | null>(null);
+  const [uploadedFiles, setUploadedFiles] = useState<FilesRecord>({});
+  const [submitting, setSubmitting] = useState(false);
+  const [step1Completed, setStep1Completed] = useState(false);
+  const { t } = useTranslation();
+  const { registerExternalPortalUser, isRegistering } =
+    useRegisterExternalPortalUser();
+  const { handleError } = useErrorHandler(t);
+  const { uploadDocuments } = useDocumentUploads();
+
+  const form = useForm<RegistrationFormValues>({
+    resolver: zodResolver(registrationSchema),
+    defaultValues: {
+      email: "",
+      username: "",
+      phoneNumber: "",
+      userType: "external_organization",
+      name: { en: "", am: "" },
+    },
+  });
+
+  const userType = form.watch("userType");
+  const mappedType =
+    userType === "external_organization" ? "organization" : userType;
+  const filterData: FilterEnum | undefined =
+    mappedType && Object.values(FilterEnum).includes(mappedType as FilterEnum)
+      ? (mappedType as FilterEnum)
+      : undefined;
+
+  // fetch requirement docs to know which are required
+  const { requirementDoc } = useDocumentRequirement(filterData);
+  const requiredDocs = useMemo(
+    () =>
+      requirementDoc?.items?.filter((d: DocumentReq) => !d.isOptional) ?? [],
+    [requirementDoc]
+  );
+
+  const attachedCount = useMemo(
+    () => Object.values(uploadedFiles).filter((f) => f !== null).length,
+    [uploadedFiles]
+  );
+
+  //validation
+  const isStep1Complete = useMemo(() => {
+    if (!form.formState.isValid) return false;
+
+    // Check if all required documents are uploaded
+    const hasAllRequiredDocs = requiredDocs.every(
+      (doc) => uploadedFiles[doc.id] instanceof File
+    );
+
+    return hasAllRequiredDocs && form.formState.isValid;
+  }, [form.formState.isValid, requiredDocs, uploadedFiles]);
+  useEffect(() => {
+    setStep1Completed(isStep1Complete);
+  }, [isStep1Complete]);
+  useEffect(() => {
+    setStep1Completed(isStep1Complete);
+  }, [isStep1Complete]);
+
+  const resetRegistrationFlow = () => {
+    setCurrentStep(0);
+    setFormData(null);
+    setUploadedFiles({});
+    setSubmitting(false);
+    setStep1Completed(false);
+    form.reset({
+      email: "",
+      username: "",
+      phoneNumber: "",
+      userType: "external_organization",
+      name: { en: "", am: "" },
+    });
+  };
+
+  useEffect(() => {
+    resetRegistrationFlow();
+
+    const handlePageShow = (event: PageTransitionEvent) => {
+      if (event.persisted) {
+        resetRegistrationFlow();
+      }
+    };
+
+    window.addEventListener("pageshow", handlePageShow);
+    return () => window.removeEventListener("pageshow", handlePageShow);
+  }, []);
+  const onRegistrationSubmit = async (data: RegistrationFormValues) => {
+    // 1️⃣ Validate documents
+    const missingDocs: string[] = requiredDocs
+      .filter((doc) => !uploadedFiles[doc.id])
+      .map((doc) => `${doc.title?.en || "Document"} is required.`);
+
+    // 2️⃣ Collect form errors from react-hook-form
+    const formErrorMessages = Object.values(form.formState.errors)
+      .map((err: any) => err?.message)
+      .filter(Boolean);
+
+    // 3️⃣ Combine all errors
+    const allErrors = [...formErrorMessages, ...missingDocs];
+
+    // 4️⃣ Stop submission and show toast if errors exist
+    if (allErrors.length > 0) {
+      allErrors.forEach((msg) => toast.error(msg));
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      // 5️⃣ Create external portal user
+      const response = await registerExternalPortalUser(data);
+      if (!response?.success) {
+        form.setError("root", {
+          type: "manual",
+          message: response?.response?.data?.message,
+        });
+
+        return;
+      }
+
+      // 6️⃣ Save tokens
+      const token = response.response?.data?.token;
+      const refreshToken = response.response?.data?.refreshToken;
+      Cookies.set("auth-token", token || "");
+      Cookies.set("refresh-token", refreshToken || "");
+
+      // 7️⃣ Upload documents
+      await uploadAllFiles();
+      await submitApplication();
+      toast.success(t("registration.verifyOtp.messages.registrationComplete"));
+      setFormData(data);
+      setStep1Completed(true);
+      setCurrentStep(1); // move to OTP verification
+    } catch (err) {
+      if (err instanceof Error && err.message.includes("Duplicate entry")) {
+        form.setError("root", {
+          type: "manual",
+          message: t("registration.verifyOtp.errors.alreadyRegistered"),
+        });
+      } else {
+        handleError(err);
+      }
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const uploadAllFiles = async (): Promise<void> => {
+    const filesToUpload = Object.entries(uploadedFiles).filter(
+      ([, file]) => file instanceof File
+    );
+
+    if (filesToUpload.length === 0) {
+      throw new Error(
+        "No documents uploaded. Registration requires documents."
+      );
+    }
+
+    const uploadPromises = filesToUpload.map(async ([docId, file]) => {
+      if (file instanceof File) {
+        const payload: DocumentPayloadDto = {
+          documentId: docId,
+          type: filterData || FilterEnum.EXTERNAL,
+          fileInfo: {
+            size: file.size,
+            fileName: file.name,
+            contentType: file.type,
+            originalname: file.name,
+          },
+        };
+
+        return uploadDocuments(payload, file).catch((err) => {
+          throw new Error(
+            `Failed to upload ${file.name} for document ${docId}: ${err}`
+          );
+        });
+      }
+    });
+
+    await Promise.all(uploadPromises);
+  };
+
+  const onVerifyComplete = async () => {
+    setSubmitting(true);
+    try {
+      toast.success("Application submitted successfully.");
+      const refreshToken = Cookies.get("refresh-token");
+      if (!refreshToken) {
+        throw new Error("No refresh token found");
+      }
+    } catch (err) {
+      console.error("submit error", err);
+      toast.error("Failed to submit application.");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  const handleStepChange = (step: number) => {
+    if (step === 1 && !step1Completed) {
+      toast.error(
+        "Please complete the registration form and upload all required documents first"
+      );
+      return;
+    }
+    setCurrentStep(step);
+  };
+  const steps = [
+    {
+      title: t("registration.steps.registerUpload.title"),
+      description: t("registration.steps.registerUpload.description"),
+      content: (
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onRegistrationSubmit)}
+            className="space-y-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              {/* Left: form */}
+              <div className="space-y-4">
+                
+
+                <FormField
+                  control={form.control}
+                  name="email"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        {userType === "external_organization"
+                          ? t("registration.form.organizationEmail")
+                          : t("registration.form.individualEmail")}
+                        <span className="text-red-500" aria-hidden="true">
+                          *
+                        </span>
+                      </FormLabel>
+                      <FormControl>
+                        <div className="relative">
+                          <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                          <Input
+                            {...field}
+                            className="pl-10"
+                            placeholder={
+                              userType === "external_organization"
+                                ? t(
+                                    "registration.form.organizationEmailPlaceholder"
+                                  )
+                                : t(
+                                    "registration.form.individualEmailPlaceholder"
+                                  )
+                            }
+                          />
+                        </div>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="username"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        {userType === "external_organization"
+                          ? t("registration.form.organizationUsername")
+                          : t("registration.form.individualUsername")}
+                        <span className="text-red-500" aria-hidden="true">
+                          *
+                        </span>
+                      </FormLabel>
+                      <FormControl>
+                        <div className="relative">
+                          <User className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                          <Input
+                            {...field}
+                            className="pl-10"
+                            placeholder={
+                              userType === "external_organization"
+                                ? t(
+                                    "registration.form.organizationUsernamePlaceholder"
+                                  )
+                                : t(
+                                    "registration.form.individualUsernamePlaceholder"
+                                  )
+                            }
+                          />
+                        </div>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="phoneNumber"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        {userType === "external_organization"
+                          ? t("registration.form.organizationPhone")
+                          : t("registration.form.individualPhone")}
+                        <span className="text-red-500" aria-hidden="true">
+                          *
+                        </span>
+                      </FormLabel>
+                      <FormControl>
+                        <div className="relative">
+                          <Phone className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                          <Input
+                            {...field}
+                            className="pl-10"
+                            placeholder={
+                              userType === "external_organization"
+                                ? t(
+                                    "registration.form.organizationPhonePlaceholder"
+                                  )
+                                : t(
+                                    "registration.form.individualPhonePlaceholder"
+                                  )
+                            }
+                          />
+                        </div>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="name.en"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        {userType === "external_organization"
+                          ? t("registration.form.organizationNameEn")
+                          : t("registration.form.individualNameEn")}
+                        <span className="text-red-500" aria-hidden="true">
+                          *
+                        </span>
+                      </FormLabel>
+                      <FormControl>
+                        <div className="relative">
+                          <Text className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                          <Input
+                            {...field}
+                            className="pl-10"
+                            placeholder={
+                              userType === "external_organization"
+                                ? t(
+                                    "registration.form.organizationNameEnPlaceholder"
+                                  )
+                                : t(
+                                    "registration.form.individualNameEnPlaceholder"
+                                  )
+                            }
+                          />
+                        </div>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="name.am"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        {userType === "external_organization"
+                          ? t("registration.form.organizationNameAm")
+                          : t("registration.form.individualNameAm")}
+                        <span className="text-red-500" aria-hidden="true">
+                          *
+                        </span>
+                      </FormLabel>
+                      <FormControl>
+                        <Input
+                          {...field}
+                          placeholder={
+                            userType === "external_organization"
+                              ? t(
+                                  "registration.form.organizationNameAmPlaceholder"
+                                )
+                              : t(
+                                  "registration.form.individualNameAmPlaceholder"
+                                )
+                          }
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {form.formState.errors.root?.message && (
+                  <div className="text-sm text-destructive mt-2">
+                    {String(form.formState.errors.root.message)}
+                  </div>
+                )}
+              </div>
+
+              {/* Right: Uploads */}
+              <div className="space-y-4">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h3 className="text-lg font-semibold">
+                      {t("registration.documents.requiredDocuments")}
+                    </h3>
+                    <p className="text-sm text-gray-500">
+                      {t("registration.documents.requirementsUpdate")}
+                    </p>
+                  </div>
+                  <div className="text-sm text-gray-600">
+                    {attachedCount} {t("registration.documents.attached")}
+                  </div>
+                </div>
+
+                <div className="p-2 border rounded-md max-h-[60vh] overflow-auto">
+                  <UploadDocumentsStep
+                    registrationType={userType}
+                    uploadedFiles={uploadedFiles}
+                    setUploadedFiles={setUploadedFiles}
+                  />
+                </div>
+
+                <p className="text-sm text-gray-500">
+                  {t("registration.documents.tip")}
+                </p>
+              </div>
+
+              {/* Submit Button - Span full width */}
+              <div className="md:col-span-2">
+                <Button
+                  type="submit"
+                  disabled={isRegistering || submitting}
+                  className="w-full bg-primary-600">
+                  {isRegistering || submitting
+                    ? t("registration.form.processing")
+                    : userType === "external_organization"
+                    ? t("registration.form.organizationSubmitButton")
+                    : t("registration.form.individualSubmitButton")}
+                </Button>
+              </div>
+            </div>
+          </form>
+        </Form>
+      ),
+    },
+    {
+      title: t("registration.steps.verifyOtp.title"),
+      description: t("registration.steps.verifyOtp.description"),
+      content: (
+        <VerifyOtp
+          email={formData?.email}
+          phone={formData?.phoneNumber}
+          onComplete={onVerifyComplete}
+          isExternalOrg={true}
+        />
+      ),
+    },
+  ];
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center p-4">
+      <Card className="w-full max-w-5xl">
+        <CardHeader>
+          <div className="flex items-center justify-center mb-4">
+            <Building className="h-8 w-8 mr-2" />
+            <CardTitle className="text-2xl font-bold">Registration</CardTitle>
+          </div>
+          <Stepper
+            steps={steps}
+            currentStep={currentStep}
+            setCurrentStep={handleStepChange}
+            disabled={submitting}
+          />
+        </CardHeader>
+        <CardContent>{steps[currentStep].content}</CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default RegistrationStepper;
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/Stepper.tsx b/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/Stepper.tsx
new file mode 100644
index 000000000..1417674c5
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/Stepper.tsx
@@ -0,0 +1,79 @@
+import React from "react";
+import { cn } from "@/shared/lib/utils";
+
+interface StepperProps {
+  steps: {
+    title: string;
+    description: string;
+  }[];
+  currentStep: number;
+  setCurrentStep: (step: number) => void;
+  disabled?:boolean;
+}
+
+export const Stepper = ({
+  steps,
+  currentStep,
+  setCurrentStep,
+  disabled = false
+}: StepperProps) => {
+  return (
+    <div className="w-full">
+      <div className="flex justify-between">
+        {steps.map((step, index) => (
+          <div
+            key={index}
+            className={cn(
+              "flex flex-col items-center flex-1",
+              index < steps.length - 1 && "relative"
+            )}>
+            <button
+              type="button"
+              onClick={() => {
+                 if (
+                   !disabled &&
+                   (index < currentStep || index === currentStep)
+                 ) {
+                   setCurrentStep(index);
+                 }}}
+                 disabled={disabled || index > currentStep}
+              className={cn(
+                "flex items-center justify-center w-10 h-10 rounded-full border-2 transition-colors duration-300",
+                currentStep >= index
+                  ? "bg-primary-500 border-primary-600 text-white" // Active step (green)
+                  : "bg-white border-gray-300 text-gray-500" // Inactive step
+              )}>
+              {index + 1}
+            </button>
+            <div className="mt-2 text-center">
+              <p
+                className={cn(
+                  "text-sm font-medium",
+                  currentStep >= index
+                    ? "text-primary-600" // Active title (darker green)
+                    : "text-gray-500" // Inactive title
+                )}>
+                {step.title}
+              </p>
+              <p
+                className={cn(
+                  "text-xs",
+                  currentStep >= index ? "text-primary-500" : "text-gray-400"
+                )}>
+                {step.description}
+              </p>
+            </div>
+            {index < steps.length - 1 && (
+              <div
+                className={cn(
+                  "absolute top-5 left-1/2 w-full h-0.5 -z-10",
+                  currentStep > index ? "bg-primary-400" : "bg-gray-200"
+                )}
+              />
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/UploadDocumentsStep.tsx b/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/UploadDocumentsStep.tsx
new file mode 100644
index 000000000..af454acd6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/UploadDocumentsStep.tsx
@@ -0,0 +1,280 @@
+"use client";
+
+import React, { useEffect, useMemo, useState } from "react";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import { useToast } from "@/shared/common/ui/use-toast";
+import { useDocumentRequirement } from "@/shared/hooks/useOrganizationReport";
+import { useMyUploads } from "@/external-portal/hooks/useMyUpload";
+import { useQueries } from "@tanstack/react-query";
+import { getMyUploadById } from "@/external-portal/services/portalOutgoingService";
+import { useDocumentUploads } from "@/external-portal/hooks/useDocumentUploads";
+import { FilterEnum } from "@/shared/services/organizationsService";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { Check, Trash } from "lucide-react";
+import { UploadFileModal } from "./UploadFileModal";
+import { useTranslation } from "react-i18next";
+import { useUser } from "@/shared/context/UserContext";
+
+export interface LocalizedText {
+  am?: string;
+  en?: string;
+}
+
+export interface DocumentReq {
+  id: string;
+  title: LocalizedText;
+  description?: LocalizedText;
+  key?: string;
+  type?: string;
+  order?: number;
+  isActive?: boolean;
+  isOptional?: boolean;
+}
+
+type FilesRecord = Record<string, File | string | null>;
+
+interface UploadDocumentsStepProps {
+  registrationType?: "individual" | "external_organization" | string;
+  uploadedFiles: FilesRecord;
+  setUploadedFiles: React.Dispatch<React.SetStateAction<FilesRecord>>;
+}
+
+
+export const UploadDocumentsStep: React.FC<UploadDocumentsStepProps> = ({
+  registrationType,
+  uploadedFiles,
+  setUploadedFiles,
+}) => {
+  const userDetails = useUser();
+  const {t} = useTranslation()
+  // For other registration types, map to FilterEnum
+  const mappedType =
+    registrationType === "external_organization"
+      ? "organization"
+      : (registrationType as string) || userDetails?.userType;
+
+  const filterData: FilterEnum | undefined =
+    mappedType && Object.values(FilterEnum).includes(mappedType as FilterEnum)
+      ? (mappedType as FilterEnum)
+      : undefined;
+
+  const { requirementDoc } = useDocumentRequirement(filterData);
+  const { data: myUploads } = useMyUploads();
+
+  const latestUploadIds = useMemo(() => {
+    if (!requirementDoc?.items?.length) return [];
+    return requirementDoc.items.map((doc: DocumentReq) => {
+      const uploadsForDoc = myUploads?.filter(
+        (u: any) => u.documentId === doc.id
+      );
+      if (uploadsForDoc?.length) {
+        const latest = uploadsForDoc.reduce((prev: any, cur: any) =>
+          new Date(prev.createdAt) > new Date(cur.createdAt) ? prev : cur
+        );
+        return {
+          docId: doc.id,
+          uploadId: latest.id,
+          fileInfo: latest.fileInfo,
+        };
+      }
+      return { docId: doc.id, uploadId: null, fileInfo: null };
+    });
+  }, [requirementDoc?.items, myUploads]);
+
+  const presignedQueries = useQueries({
+    queries:
+      latestUploadIds?.map(({ uploadId }: any) => ({
+        queryKey: ["myUpload", uploadId],
+        queryFn: () =>
+          uploadId ? getMyUploadById(uploadId) : Promise.resolve(null),
+        enabled: !!uploadId,
+      })) || [],
+  });
+
+  const prefills = useMemo(() => {
+    const map: FilesRecord = {};
+    if (!latestUploadIds?.length) return map;
+    latestUploadIds.forEach(({ docId, fileInfo }, idx) => {
+      const q = presignedQueries[idx];
+      const presigned = q?.data?.presigned;
+      map[docId] = presigned || fileInfo?.fileName || null;
+    });
+    return map;
+  }, [latestUploadIds, presignedQueries]);
+
+  useEffect(() => {
+    if (
+      Object.keys(uploadedFiles).length === 0 &&
+      Object.keys(prefills).length > 0
+    ) {
+      setUploadedFiles((prev) => ({ ...prefills, ...prev }));
+    }
+  }, [prefills, uploadedFiles, setUploadedFiles]);
+
+  const [modalOpen, setModalOpen] = React.useState(false);
+  const [selectedDoc, setSelectedDoc] = React.useState<DocumentReq | null>(null);
+
+  // When user clicks "Upload" button
+  const handleOpenModal = (doc: DocumentReq) => {
+    setSelectedDoc(doc);
+    setModalOpen(true);
+  };
+
+  // When file is selected in modal
+  const handleFileSelect = (file: File | null) => {
+    if (selectedDoc) {
+      setUploadedFiles((prev) => ({
+        ...prev,
+        [selectedDoc.id]: file,
+      }));
+    }
+    setModalOpen(false);
+    setSelectedDoc(null);
+  };
+
+
+  const handleRemove = (docId: string) => {
+    setUploadedFiles((prev: FilesRecord) => ({
+      ...prev,
+      [docId]: null,
+    }));
+  };
+
+
+  const [faydaValue, setFaydaValue] = useState<string>("");
+
+  // If registration type is individual, show Fayda input
+  if (registrationType === "individual") {
+    return (
+      <div className="space-y-3">
+        <label className="block">
+          <span className="font-medium">
+            {t("registration.documents.fayda")}
+          </span>
+          <Input
+            type="text"
+            value={faydaValue}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setFaydaValue(e.target.value)
+            }
+            placeholder={t("registration.documents.faydaMessage")}
+            className="mt-1 block w-full rounded-md border px-3 py-2"
+          />
+        </label>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      {requirementDoc?.items?.length === 0 ? (
+        <div className="text-sm text-gray-500">
+          {t("registration.documents.noRequirements")}
+        </div>
+      ) : (
+        requirementDoc.items.map((doc) => {
+          const current = uploadedFiles[doc.id];
+          const isNewFile = current instanceof File;
+          return (
+            <div
+              key={doc.id}
+              className="flex items-center gap-2 p-3 border rounded-lg">
+              <div className="flex-1">
+                <div className="font-medium">{doc.title?.en || doc.id}</div>
+                {doc.description?.en && (
+                  <div className="text-sm text-muted-foreground">
+                    {doc.description.en}
+                  </div>
+                )}
+                {current && (
+                  <div className="text-xs mt-1 flex items-center gap-1">
+                    <Check className="h-3 w-3" />
+                    <span
+                      className={
+                        isNewFile ? "text-blue-600" : "text-primary-600"
+                      }>
+                      {isNewFile
+                        ? `Ready to upload: ${current.name}`
+                        : `Previously uploaded: ${current}`}
+                    </span>
+                    {isNewFile && (
+                      <span className="text-orange-500 ml-2">
+                        ({t("registration.documents.willUploadOnSubmit")})
+                      </span>
+                    )}
+                  </div>
+                )}
+                {!doc.isOptional && !current && (
+                  <div className="text-xs text-red-600 mt-1">
+                    {t("registration.documents.required")}
+                  </div>
+                )}
+              </div>
+              <div className="flex items-center gap-2">
+                {current && (
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => handleRemove(doc.id)}
+                    className="h-8 w-8 text-destructive">
+                    <Trash className="h-4 w-4" />
+                  </Button>
+                )}
+                <Button
+                  size="sm"
+                  variant={current ? "outline" : "default"}
+                  className={current ? "" : "bg-primary-600"}
+                  onClick={() => handleOpenModal(doc)}>
+                  {current ? "Change" : "Upload"}
+                </Button>
+              </div>
+            </div>
+          );
+        })
+      )}
+
+      {modalOpen && selectedDoc && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+          <UploadFileModal
+            value={uploadedFiles[selectedDoc.id] || null}
+            multiple={false}
+            accept={[
+              ".png",
+              ".jpg",
+              ".jpeg",
+              ".pdf",
+              ".dwg",
+              ".dxf",
+              ".dwt",
+              ".bak",
+              ".sv$",
+              ".dws",
+              ".mxd",
+              ".aprx",
+              ".rar",
+              ".zip",
+            ]}
+            onChange={(file) => {
+              handleFileSelect(
+                file instanceof File
+                  ? file
+                  : Array.isArray(file)
+                  ? file[0]
+                  : null
+              );
+            }}
+            onClose={() => {
+              setModalOpen(false);
+              setSelectedDoc(null);
+            }}
+            fileUploadFields={{
+              requiredDocumentId: selectedDoc.id,
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+export default UploadDocumentsStep;
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/UploadFileModal.tsx b/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/UploadFileModal.tsx
new file mode 100644
index 000000000..e6f0b8609
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/UploadFileModal.tsx
@@ -0,0 +1,514 @@
+"use client";
+
+import React, { memo, useCallback, useMemo, useRef, useState } from "react";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import { Input } from "@/shared/common/ui/input";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+import { Alert, AlertDescription, AlertTitle } from "@/shared/common/ui/alert";
+import {
+  CloudUpload,
+  Trash,
+  FileType,
+  X,
+  Info,
+  FileUp,
+  Plus,
+  Check,
+} from "lucide-react";
+import { ImageCropper } from "./ImageCropper";
+import { FilePreview } from "./FilePreview";
+import { useToast } from "@/shared/common/ui/use-toast";
+import { MAX_FILE_SIZE_MB } from "@/shared/utils/max-file-size";
+import {
+  getAllowedExtensionsFromAccept,
+  getAllowedMimeTypesFromAccept,
+  getFinalAllowedFileTypes,
+} from "@/shared/utils/get-final-allowed-file-types";
+import { ClientSideValidator } from "@/shared/services/validation/ClientSideValidator";
+import { FileUploadValidator } from "@/shared/services/validation/FileUploadValidator";
+
+interface UploadFileModalProps {
+  onChange: (
+    file: File | File[] | null,
+    status?: string,
+    requiredDocumentId?: string
+  ) => void;
+  value: File | File[] | null | string;
+  fileUploadFields?: any;
+  accept?: string[] | null;
+  multiple?: boolean;
+  onClose?: () => void;
+}
+
+export const UploadFileModal = memo(
+  ({
+    onChange,
+    value,
+    fileUploadFields,
+    accept,
+    multiple,
+    onClose,
+  }: UploadFileModalProps) => {
+    const [file, setFile] = useState<File | File[] | null>(null);
+    const [croppingFile, setCroppingFile] = useState<File | null>(null);
+    const [croppedFile, setCroppedFile] = useState<File | null>(null);
+    const [errorMessage, setErrorMessage] = useState<string | null>(null);
+    const [fileErrorMessages, setFileErrorMessages] = useState<any[]>([]);
+
+    const openRef = useRef<HTMLInputElement>(null);
+    const validatorRef = useRef(new ClientSideValidator());
+    const { toast } = useToast();
+
+    const needsCropping = (file: File) => {
+      const photoConfig = fileUploadFields?.photoConfiguration;
+      const isPhotoConfigEnabled =
+        photoConfig === true || photoConfig === "true";
+      return (
+        isPhotoConfigEnabled &&
+        file.type.startsWith("image/") &&
+        !["image/gif", "image/svg+xml"].includes(file.type)
+      );
+    };
+
+    const handleChange = useCallback(
+      async (newFile: File | File[] | null) => {
+        setErrorMessage(null);
+        setFileErrorMessages([]);
+
+        if (newFile) {
+          const allowedMimeTypes = accept
+            ? getAllowedMimeTypesFromAccept(accept)
+            : undefined;
+          const allowedExtensions = accept
+            ? getAllowedExtensionsFromAccept(accept)
+            : undefined;
+
+          if (Array.isArray(newFile)) {
+            const validationErrors: any[] = [];
+            
+            for (let index = 0; index < newFile.length; index++) {
+              const item = newFile[index];
+              
+              // Comprehensive file validation
+              const basicValidation = FileUploadValidator.validateFile(item, {
+                maxSizeMB: MAX_FILE_SIZE_MB,
+                allowedMimeTypes:
+                  item.type && allowedMimeTypes?.length
+                    ? allowedMimeTypes
+                    : undefined,
+                allowedExtensions:
+                  allowedExtensions?.length ? allowedExtensions : undefined,
+              });
+
+              if (!basicValidation.isValid) {
+                validationErrors.push({
+                  fileIndex: index,
+                  error: basicValidation.error || "File validation failed",
+                });
+                continue;
+              }
+
+              // Client-side magic byte validation
+              if (accept) {
+                const clientValidation = await validatorRef.current.validateUpload(
+                  item,
+                  item.type,
+                  allowedMimeTypes || []
+                );
+
+                if (!clientValidation.isValid) {
+                  validationErrors.push({
+                    fileIndex: index,
+                    error: clientValidation.error || "File validation failed",
+                  });
+                  continue;
+                }
+
+              }
+            }
+
+            if (validationErrors.length > 0) {
+              setFileErrorMessages(validationErrors);
+              setErrorMessage(`File validation error`);
+              return;
+            }
+          } else {
+            // Comprehensive file validation
+            const basicValidation = FileUploadValidator.validateFile(newFile, {
+              maxSizeMB: MAX_FILE_SIZE_MB,
+              allowedMimeTypes:
+                newFile.type && allowedMimeTypes?.length
+                  ? allowedMimeTypes
+                  : undefined,
+              allowedExtensions:
+                allowedExtensions?.length ? allowedExtensions : undefined,
+            });
+
+            if (!basicValidation.isValid) {
+              setErrorMessage(basicValidation.error || "File validation failed");
+              return;
+            }
+
+            if (accept) {
+              // Client-side magic byte validation
+              const clientValidation = await validatorRef.current.validateUpload(
+                newFile,
+                newFile.type,
+                allowedMimeTypes || []
+              );
+
+              if (!clientValidation.isValid) {
+                setErrorMessage(clientValidation.error || "File validation failed");
+                return;
+              }
+
+            }
+
+            if (needsCropping(newFile)) {
+              setCroppingFile(newFile);
+              return;
+            }
+          }
+        }
+
+        // Set the file and immediately call onChange to update parent
+        const finalFile = multiple
+          ? [
+              ...(Array.isArray(file) ? file : []),
+              ...(Array.isArray(newFile) ? newFile : [newFile]).filter(Boolean),
+            ]
+          : newFile;
+        const cleanedFile = Array.isArray(finalFile)
+          ? finalFile.filter((f): f is File => f !== null) // removes nulls
+          : finalFile;
+        setFile(cleanedFile);
+
+        // Immediately notify parent about the file change
+        if (cleanedFile) {
+          onChange(
+            cleanedFile,
+            "selected",
+            fileUploadFields?.requiredDocumentId
+          );
+        } else {
+          onChange(null, "removed", fileUploadFields?.requiredDocumentId);
+        }
+      },
+      [fileUploadFields?.photoConfiguration, accept, multiple, file, onChange]
+    );
+const handleClose = useCallback(() => {
+      setCroppingFile(null);
+      setFile(null);
+      setCroppedFile(null);
+      setErrorMessage(null);
+      onClose?.();
+    }, [onClose]);
+
+
+
+    const handleCropComplete = useCallback(
+      (croppedFile: File) => {
+        setCroppingFile(null);
+        setCroppedFile(croppedFile);
+        setFile(croppedFile);
+        onChange(croppedFile, "selected", fileUploadFields?.requiredDocumentId);
+      },
+      [onChange, fileUploadFields?.requiredDocumentId]
+    );
+
+    const handleCancelCrop = useCallback(() => {
+      setCroppingFile(null);
+      setFile(null);
+      setCroppedFile(null);
+      onChange(null, "removed", fileUploadFields?.requiredDocumentId);
+    }, [onChange, fileUploadFields?.requiredDocumentId]);
+
+    const handleRemoveFile = useCallback(
+      (index?: number) => {
+        if (multiple && index !== undefined) {
+          const updatedFiles = Array.isArray(file)
+            ? file.filter((_, i) => i !== index)
+            : null;
+          setFile(updatedFiles);
+          setFileErrorMessages(
+            fileErrorMessages.filter((x) => x?.fileIndex !== index)
+          );
+
+          if (updatedFiles && updatedFiles.length > 0) {
+            onChange(
+              updatedFiles,
+              "selected",
+              fileUploadFields?.requiredDocumentId
+            );
+          } else {
+            onChange(null, "removed", fileUploadFields?.requiredDocumentId);
+          }
+        } else {
+          setFile(null);
+          setCroppedFile(null);
+          setErrorMessage(null);
+          onChange(null, "removed", fileUploadFields?.requiredDocumentId);
+        }
+      },
+      [
+        file,
+        multiple,
+        fileErrorMessages,
+        onChange,
+        fileUploadFields?.requiredDocumentId,
+      ]
+    );
+
+    const isMultipleFileAttached = useMemo(
+      () => file && Array.isArray(file),
+      [file]
+    );
+
+    const isSomeFileAttached = useMemo(() => {
+      if (isMultipleFileAttached) {
+        return Array.isArray(file) ? file.length > 0 : false;
+      }
+      return !!file;
+    }, [file, isMultipleFileAttached]);
+
+    return (
+      <Card className="w-full max-w-md relative">
+        <CardHeader>
+          <CardTitle>Upload File{multiple && "s"}</CardTitle>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="absolute right-4 top-4 h-6 w-6"
+            onClick={handleClose}>
+            <X className="h-4 w-4" />
+          </Button>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col items-center gap-4">
+            {croppingFile ? (
+              <div className="w-full space-y-4">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-lg font-bold">Crop Image</h3>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={handleCancelCrop}>
+                    <X className="h-5 w-5" />
+                  </Button>
+                </div>
+                <Alert>
+                  <Info className="h-4 w-4" />
+                  <AlertTitle>Note</AlertTitle>
+                  <AlertDescription>
+                    This image will be cropped to a 3:4 aspect ratio. Please
+                    adjust the crop area accordingly.
+                  </AlertDescription>
+                </Alert>
+                <div className="p-4 border rounded-lg bg-muted">
+                  <ImageCropper
+                    file={croppingFile}
+                    onCropComplete={handleCropComplete}
+                    aspectRatio={3 / 4}
+                  />
+                </div>
+              </div>
+            ) : (
+              <>
+                <div className={isSomeFileAttached ? "hidden" : "block"}>
+                  <div className="flex justify-center">
+                    <CloudUpload className="h-12 w-12" />
+                  </div>
+                  <h2 className="text-xl font-bold text-center mt-4">
+                    Upload File{multiple && "s"}
+                  </h2>
+                </div>
+
+                {isSomeFileAttached && (
+                  <div className="relative flex flex-col items-center gap-4 p-4 border rounded-md">
+                    <div
+                      className={
+                        isMultipleFileAttached
+                          ? "max-w-[30rem] max-h-[20rem] overflow-auto"
+                          : "h-40 w-40"
+                      }>
+                      {file instanceof File &&
+                      file?.type === "application/pdf" ? (
+                        <div className="flex flex-col items-center justify-center pt-16">
+                          <FileType size={60} className="h-16 w-16" />
+                        </div>
+                      ) : isMultipleFileAttached ? (
+                        <div className="grid grid-cols-2 gap-4">
+                          {Array.isArray(file) &&
+                            Array.from(file)?.map((f, i) => (
+                              <div key={i} className="space-y-2">
+                                {f?.type === "application/pdf" ? (
+                                  <div className="flex flex-col items-center justify-center pt-16">
+                                    <FileType size={60} className="h-16 w-16" />
+                                  </div>
+                                ) : (
+                                  <div
+                                    className={`border rounded-md ${
+                                      Array.from(file)?.length == 1
+                                        ? "h-60"
+                                        : "h-48"
+                                    } overflow-auto`}>
+                                    <FilePreview file={f} type="image" />
+                                  </div>
+                                )}
+                                <p className="w-36 truncate">{f?.name}</p>
+                                <Tooltip>
+                                  <TooltipTrigger asChild>
+                                    <Button
+                                      variant="ghost"
+                                      size="icon"
+                                      className="h-8 w-8"
+                                      onClick={() => handleRemoveFile(i)}>
+                                      <Trash className="h-4 w-4 text-destructive" />
+                                    </Button>
+                                  </TooltipTrigger>
+                                  <TooltipContent>Remove</TooltipContent>
+                                </Tooltip>
+                                {fileErrorMessages?.find(
+                                  (item) => item.fileIndex === i
+                                )?.error && (
+                                  <Alert variant="destructive">
+                                    <X className="h-4 w-4" />
+                                    <AlertDescription>
+                                      {
+                                        fileErrorMessages?.find(
+                                          (item) => item.fileIndex === i
+                                        )?.error
+                                      }
+                                    </AlertDescription>
+                                  </Alert>
+                                )}
+                              </div>
+                            ))}
+                        </div>
+                      ) : (
+                        <div className="w-full h-full overflow-auto">
+                          <FilePreview
+                            file={croppedFile || (file as File)}
+                            type="image"
+                          />
+                        </div>
+                      )}
+                    </div>
+
+                    {!isMultipleFileAttached &&
+                      (croppedFile || file) instanceof File && (
+                        <p className="w-36 truncate">
+                          {croppedFile
+                            ? croppedFile.name
+                            : file instanceof File
+                            ? file.name
+                            : ""}
+                        </p>
+                      )}
+                    {!isMultipleFileAttached && (
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="absolute top-2 right-2 h-8 w-8"
+                        onClick={() => handleRemoveFile()}>
+                        <Trash className="h-4 w-4 text-destructive" />
+                      </Button>
+                    )}
+
+                    {/* File Selected Indicator */}
+                    <div className="flex items-center gap-2 text-primary-600">
+                      <Check className="h-4 w-4" />
+                      <span className="text-sm font-medium">File selected</span>
+                    </div>
+                  </div>
+                )}
+
+                <p className="text-sm text-muted-foreground text-center">
+                  You can attach{" "}
+                  {accept
+                    ?.map((item) => `${item} files (max ${MAX_FILE_SIZE_MB}MB)`)
+                    ?.join(", ")}
+                </p>
+                {multiple && (
+                  <div className="flex items-center gap-2">
+                    <Info className="h-4 w-4 text-primary" />
+                    <p className="text-sm text-primary">
+                      You can attach multiple files
+                    </p>
+                  </div>
+                )}
+
+                <div className="flex flex-col gap-4 w-full">
+                  <Input
+                    type="file"
+                    accept={
+                      accept
+                        ? getFinalAllowedFileTypes(accept)
+                        : "image/png,image/jpeg,application/pdf"
+                    }
+                    onChange={(e) => {
+                      const files = e.target.files;
+                      if (!files) return;
+
+                      if (multiple) {
+                        handleChange(Array.from(files));
+                      } else {
+                        handleChange(files[0]);
+                      }
+                    }}
+                    multiple={multiple}
+                    className="hidden"
+                    ref={openRef}
+                  />
+                  <Button
+                    variant="outline"
+                    onClick={() => openRef.current?.click()}
+                    className="w-full">
+                    {isSomeFileAttached ? (
+                      multiple ? (
+                        <>
+                          <Plus className="mr-2 h-4 w-4" />
+                          Add more files
+                        </>
+                      ) : (
+                        <>
+                          <FileUp className="mr-2 h-4 w-4" />
+                          Change file
+                        </>
+                      )
+                    ) : (
+                      <>
+                        <FileUp className="mr-2 h-4 w-4" />
+                        Select file{multiple ? "s" : ""}
+                      </>
+                    )}
+                  </Button>
+
+                  {/* REMOVED: Continue button - file selection is now immediate */}
+                </div>
+                {errorMessage && (
+                  <Alert variant="destructive">
+                    <X className="h-4 w-4" />
+                    <AlertDescription>{errorMessage}</AlertDescription>
+                  </Alert>
+                )}
+              </>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+);
+
+UploadFileModal.displayName = "UploadFileModal";
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/UserTypeSelection.tsx b/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/UserTypeSelection.tsx
new file mode 100644
index 000000000..4fc8ef65a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/UserTypeSelection.tsx
@@ -0,0 +1,450 @@
+"use client";
+
+import { FormEvent, useEffect, useState } from "react";
+import {
+  Building2,
+  Loader2,
+  AlertCircle,
+  UserRound,
+} from "lucide-react";
+import { Button } from "@/shared/common/ui/button";
+import { Card } from "@/shared/common/ui/card";
+import { Input } from "@/shared/common/ui/input";
+import { Label } from "@/shared/common/ui/label";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { Link } from "react-router-dom";
+import VerifyOtp from "../verifyOTP";
+import { useTradeLicenseVerification } from "@/external-portal/hooks/useTradeLicenseVerification";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import {
+  startExternalPortalFaydaAuth,
+} from "@/shared/utils/faydaOidc";
+import {
+  EtradeBusinessLicenseOption,
+  fetchRegistrationByTin,
+  mapEtradeBusinessLicenses,
+  resolveEtradeLanguage,
+  TinRegistrationNotFoundError,
+} from "@/complaints/services/etradeTinService";
+import {
+  isValidLicenseNo,
+  normalizeLicenseNo,
+  normalizeTin,
+} from "@/external-portal/utils/etradeValidation";
+import {
+  clearEtradeLicenseNo,
+  storeEtradeLicenseNo,
+} from "@/external-portal/utils/etradeAuthStorage";
+
+type OrgStep = "trade_license" | null;
+type TradeLicenseStep = "tin" | "select_license";
+
+export default function UserTypeSelection() {
+  const [orgStep, setOrgStep] = useState<OrgStep>(null);
+  const [tradeLicenseStep, setTradeLicenseStep] =
+    useState<TradeLicenseStep>("tin");
+  const [tin, setTin] = useState("");
+  const [organizationName, setOrganizationName] = useState("");
+  const [licenseOptions, setLicenseOptions] = useState<
+    EtradeBusinessLicenseOption[]
+  >([]);
+  const [selectedLicenseNumber, setSelectedLicenseNumber] = useState("");
+  const [tradeLicenseNumber, setTradeLicenseNumber] = useState("");
+  const [tinError, setTinError] = useState<string | null>(null);
+  const [isVerifyingTin, setIsVerifyingTin] = useState(false);
+
+  const { t, i18n } = useTranslation();
+  const [showVerifyOtp, setShowVerifyOtp] = useState(false);
+  const { handleError } = useErrorHandler(t);
+  const { registerTradeLicense, isRegistering } = useTradeLicenseVerification();
+
+  const resetTradeLicenseFlow = () => {
+    setTradeLicenseStep("tin");
+    setTin("");
+    setOrganizationName("");
+    setLicenseOptions([]);
+    setSelectedLicenseNumber("");
+    setTradeLicenseNumber("");
+    setTinError(null);
+    setShowVerifyOtp(false);
+    clearEtradeLicenseNo();
+  };
+
+  useEffect(() => {
+    setOrgStep(null);
+    resetTradeLicenseFlow();
+  }, []);
+
+  const onVerifyComplete = () => {
+    toast.success(t("registration.etrade.registrationSuccess"));
+  };
+
+  const registerWithLicense = async (licenseNumber: string) => {
+    const normalizedLicense = normalizeLicenseNo(licenseNumber);
+    if (!isValidLicenseNo(normalizedLicense)) return;
+
+    setTradeLicenseNumber(normalizedLicense);
+    storeEtradeLicenseNo(normalizedLicense);
+    await registerTradeLicense({
+      tin: normalizeTin(tin),
+      licenseNo: normalizedLicense,
+    });
+    setShowVerifyOtp(true);
+  };
+
+  const startETradeAuth = () => {
+    resetTradeLicenseFlow();
+    setOrgStep("trade_license");
+  };
+
+  const handleTinVerify = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setTinError(null);
+
+    const normalizedTin = tin.trim();
+    if (!normalizedTin) {
+      setTinError(t("complaint.tin.tinRequired"));
+      return;
+    }
+
+    if (!/^\d{10}$/.test(normalizedTin)) {
+      setTinError(t("complaint.tin.tinInvalid"));
+      return;
+    }
+
+    try {
+      setIsVerifyingTin(true);
+      const registration = await fetchRegistrationByTin(
+        normalizedTin,
+        resolveEtradeLanguage(i18n.language),
+      );
+      const businesses = mapEtradeBusinessLicenses(
+        registration,
+        resolveEtradeLanguage(i18n.language),
+      );
+
+      if (businesses.length === 0) {
+        setTinError(t("registration.etrade.noLicensesFound"));
+        return;
+      }
+
+      const companyName = String(
+        registration.BusinessName ??
+          registration.businessName ??
+          registration.BusinessNameAmh ??
+          registration.businessNameAmh ??
+          "",
+      ).trim();
+
+      setOrganizationName(companyName);
+      setLicenseOptions(businesses);
+      setSelectedLicenseNumber(businesses[0].licenseNumber);
+      setTradeLicenseStep("select_license");
+    } catch (error) {
+      if (error instanceof TinRegistrationNotFoundError) {
+        setTinError(t("complaint.tin.notFound"));
+        return;
+      }
+      if (
+        error instanceof Error &&
+        error.message === "ETRADE_REFERER_REJECTED"
+      ) {
+        setTinError(t("complaint.tin.proxyError"));
+        return;
+      }
+      handleError(error);
+    } finally {
+      setIsVerifyingTin(false);
+    }
+  };
+
+  const handleLicenseSelectionSubmit = async () => {
+    if (!selectedLicenseNumber) return;
+
+    try {
+      await registerWithLicense(selectedLicenseNumber);
+    } catch (error) {
+      handleError(error);
+    }
+  };
+
+  const authOptions = [
+    {
+      provider: "fayda" as const,
+      title: t("registration.auth.continueWithFayda"),
+      description: t("registration.auth.faydaDescription"),
+      icon: UserRound,
+      onClick: () => startExternalPortalFaydaAuth(),
+    },
+    {
+      provider: "etrade" as const,
+      title: t("registration.auth.continueWithEtrade"),
+      description: t("registration.auth.etradeDescription"),
+      icon: Building2,
+      onClick: () => startETradeAuth(),
+    },
+  ];
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-primary-50 p-4">
+      <div className="w-full max-w-3xl">
+        <div className="text-center mb-8">
+          <div className="inline-flex items-center justify-center gap-2 mb-4">
+            <Building2 className="size-8 text-primary-600" />
+            <h1 className="text-3xl font-bold text-primary-900">
+              {t("registration.auth.portalTitle")}
+            </h1>
+          </div>
+          <p className="text-primary-700 text-lg">
+            {t("registration.auth.selectionDescription")}
+          </p>
+        </div>
+
+        {!orgStep && (
+          <>
+            <div className="grid gap-6 md:grid-cols-2 mb-8">
+              {authOptions.map((option) => {
+                const Icon = option.icon;
+                return (
+                  <Card
+                    key={option.provider}
+                    className="p-6 cursor-pointer border-2 border-primary-200 bg-white transition-all hover:border-primary-400"
+                    onClick={option.onClick}>
+                    <div className="flex flex-col items-center text-center gap-4">
+                      <div className="p-4 rounded-full bg-primary-100 text-primary-600">
+                        <Icon className="size-8" />
+                      </div>
+                      <div>
+                        <h2 className="text-xl font-semibold mb-2 text-primary-900">
+                          {option.title}
+                        </h2>
+                        <p className="text-primary-700 text-sm">
+                          {option.description}
+                        </p>
+                      </div>
+                    </div>
+                  </Card>
+                );
+              })}
+            </div>
+
+            <div className="text-center">
+              <Link
+                to="/login"
+                className="text-sm font-medium text-primary-700 hover:text-primary-900 hover:underline">
+                {t("registration.auth.employeeLogin")}
+              </Link>
+            </div>
+
+            <div className="mt-4 text-center">
+              <Link
+                to="/external-portal/signup/manual"
+                className="text-sm font-medium text-primary-700 hover:text-primary-900 hover:underline">
+                {t("registration.auth.manualOrgSignup")}
+              </Link>
+            </div>
+          </>
+        )}
+
+        {orgStep === "trade_license" && (
+          <div className="mb-6 flex items-center justify-center gap-2 text-sm">
+            <span
+              className={`rounded-full px-3 py-1 ${
+                tradeLicenseStep === "tin" && !showVerifyOtp
+                  ? "bg-primary-600 text-white"
+                  : "bg-primary-100 text-primary-700"
+              }`}>
+              1. {t("registration.etrade.stepTin")}
+            </span>
+            <span className="text-primary-400">→</span>
+            <span
+              className={`rounded-full px-3 py-1 ${
+                tradeLicenseStep === "select_license" && !showVerifyOtp
+                  ? "bg-primary-600 text-white"
+                  : "bg-primary-100 text-primary-700"
+              }`}>
+              2. {t("registration.etrade.stepLicense")}
+            </span>
+            <span className="text-primary-400">→</span>
+            <span
+              className={`rounded-full px-3 py-1 ${
+                showVerifyOtp
+                  ? "bg-primary-600 text-white"
+                  : "bg-primary-100 text-primary-700"
+              }`}>
+              3. {t("registration.etrade.stepOtp")}
+            </span>
+          </div>
+        )}
+
+        {orgStep === "trade_license" &&
+          (!showVerifyOtp ? (
+            tradeLicenseStep === "tin" ? (
+              <div className="space-y-6">
+                <div className="text-center">
+                  <h2 className="text-2xl font-semibold text-primary-900">
+                    {t("registration.auth.continueWithEtrade")}
+                  </h2>
+                  <p className="mt-2 text-sm text-primary-700">
+                    {t("registration.etrade.enterTinDescription")}
+                  </p>
+                </div>
+
+                {tinError && (
+                  <div className="flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 p-4">
+                    <AlertCircle className="mt-0.5 h-5 w-5 shrink-0 text-red-500" />
+                    <p className="text-sm text-red-700">{tinError}</p>
+                  </div>
+                )}
+
+                <form onSubmit={handleTinVerify} className="space-y-4">
+                  <div className="space-y-2">
+                    <Label htmlFor="etrade-tin">
+                      {t("complaint.tin.tinLabel")}
+                    </Label>
+                    <Input
+                      id="etrade-tin"
+                      inputMode="numeric"
+                      pattern="\d*"
+                      maxLength={10}
+                      value={tin}
+                      onChange={(event) =>
+                        setTin(
+                          event.target.value.replace(/\D/g, "").slice(0, 10),
+                        )
+                      }
+                      placeholder={t("complaint.tin.tinPlaceholder")}
+                      className="border-primary-300 focus:ring-primary-500 font-mono text-lg tracking-wide"
+                      autoComplete="off"
+                      disabled={isVerifyingTin}
+                      required
+                    />
+                    <p className="text-xs text-primary-600">
+                      {t("complaint.tin.tinHint")}
+                    </p>
+                  </div>
+
+                  <div className="flex justify-center gap-4 pt-2">
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={() => setOrgStep(null)}
+                      className="border-primary-400 text-primary-700 hover:bg-primary-100"
+                      disabled={isVerifyingTin}>
+                      {t("registration.etrade.back")}
+                    </Button>
+                    <Button
+                      type="submit"
+                      disabled={isVerifyingTin || tin.trim().length !== 10}
+                      className="bg-primary-600 hover:bg-primary-700 text-white">
+                      {isVerifyingTin ? (
+                        <span className="flex items-center gap-2">
+                          <Loader2 className="h-4 w-4 animate-spin" />
+                          {t("complaint.tin.verifying")}
+                        </span>
+                      ) : (
+                        t("complaint.tin.verify")
+                      )}
+                    </Button>
+                  </div>
+                </form>
+              </div>
+            ) : (
+              <div className="space-y-6">
+                <div className="text-center">
+                  <h2 className="text-2xl font-semibold text-primary-900">
+                    {t("registration.etrade.selectLicenseTitle")}
+                  </h2>
+                  <p className="mt-2 text-sm text-primary-700">
+                    {t("registration.etrade.selectLicenseDescription")}
+                  </p>
+                  {organizationName && (
+                    <p className="mt-2 text-sm font-medium text-primary-900">
+                      {organizationName}
+                    </p>
+                  )}
+                </div>
+
+                <div className="max-h-[24rem] space-y-3 overflow-y-auto pr-1">
+                  {licenseOptions.map((option) => {
+                    const isSelected =
+                      selectedLicenseNumber === option.licenseNumber;
+
+                    return (
+                      <Card
+                        key={option.mainGuid}
+                        className={`cursor-pointer border-2 p-4 transition-all ${
+                          isSelected
+                            ? "border-primary-500 bg-primary-50 ring-2 ring-primary-200"
+                            : "border-primary-200 hover:border-primary-300 bg-white"
+                        }`}
+                        onClick={() =>
+                          setSelectedLicenseNumber(option.licenseNumber)
+                        }>
+                        <div className="space-y-2 text-left">
+                          <p className="font-semibold text-primary-900">
+                            {option.tradeName}
+                          </p>
+                          <p className="text-sm text-primary-700">
+                            <span className="font-medium">
+                              {t("registration.etrade.licenseNumber")}:
+                            </span>{" "}
+                            <span className="font-mono">
+                              {option.licenseNumber}
+                            </span>
+                          </p>
+                          {option.activities.length > 0 && (
+                            <p className="text-sm text-primary-600">
+                              <span className="font-medium">
+                                {t("registration.etrade.activity")}:
+                              </span>{" "}
+                              {option.activities.join("; ")}
+                            </p>
+                          )}
+                        </div>
+                      </Card>
+                    );
+                  })}
+                </div>
+
+                <div className="flex justify-center gap-4">
+                  <Button
+                    variant="outline"
+                    onClick={() => {
+                      setTradeLicenseStep("tin");
+                      setSelectedLicenseNumber("");
+                      setLicenseOptions([]);
+                    }}
+                    className="border-primary-400 text-primary-700 hover:bg-primary-100"
+                    disabled={isRegistering}>
+                    {t("registration.etrade.back")}
+                  </Button>
+                  <Button
+                    onClick={handleLicenseSelectionSubmit}
+                    disabled={!selectedLicenseNumber || isRegistering}
+                    className="bg-primary-600 hover:bg-primary-700 text-white">
+                    {isRegistering ? (
+                      <span className="flex items-center gap-2">
+                        <Loader2 className="h-4 w-4 animate-spin" />
+                        {t("registration.etrade.loading")}
+                      </span>
+                    ) : (
+                      t("registration.etrade.continue")
+                    )}
+                  </Button>
+                </div>
+              </div>
+            )
+          ) : (
+            <VerifyOtp
+              licenseNo={tradeLicenseNumber}
+              onComplete={onVerifyComplete}
+              isEtradeVerification={true}
+              isExternalOrg={true}
+            />
+          ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/canvasPreview.tsx b/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/canvasPreview.tsx
new file mode 100644
index 000000000..d5ae1c95f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/canvasPreview.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { PixelCrop } from "react-image-crop";
+
+export async function canvasPreview(
+  image: HTMLImageElement,
+  canvas: HTMLCanvasElement,
+  crop: PixelCrop,
+  scale = 1,
+  rotate = 0
+) {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("No 2d context");
+  }
+
+  const scaleX = image.naturalWidth / image.width;
+  const scaleY = image.naturalHeight / image.height;
+  const pixelRatio = window.devicePixelRatio;
+
+  canvas.width = Math.floor(crop.width * scaleX * pixelRatio);
+  canvas.height = Math.floor(crop.height * scaleY * pixelRatio);
+
+  ctx.scale(pixelRatio, pixelRatio);
+  ctx.imageSmoothingQuality = "high";
+
+  const cropX = crop.x * scaleX;
+  const cropY = crop.y * scaleY;
+  const cropWidth = crop.width * scaleX;
+  const cropHeight = crop.height * scaleY;
+
+  const rotateRads = rotate * (Math.PI / 180);
+  const centerX = image.naturalWidth / 2;
+  const centerY = image.naturalHeight / 2;
+
+  ctx.save();
+  ctx.translate(-cropX, -cropY);
+  ctx.translate(centerX, centerY);
+  ctx.rotate(rotateRads);
+  ctx.scale(scale, scale);
+  ctx.translate(-centerX, -centerY);
+  ctx.drawImage(
+    image,
+    0,
+    0,
+    image.naturalWidth,
+    image.naturalHeight,
+    0,
+    0,
+    image.naturalWidth,
+    image.naturalHeight
+  );
+  ctx.restore();
+}
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/uploadDocumentSteps.tsx b/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/uploadDocumentSteps.tsx
new file mode 100644
index 000000000..0c01a1cdc
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/uploadDocumentSteps.tsx
@@ -0,0 +1,270 @@
+import { useState } from "react";
+import Header from "@/layout/components/Header";
+import { Button } from "@/shared/common/ui/button";
+import { useToast } from "@/shared/common/ui/use-toast";
+import { useLocalizedName } from "@/shared/common/localizedName";
+
+import { useDocumentRequirement } from "@/shared/hooks/useOrganizationReport";
+import { useMyUploads } from "@/external-portal/hooks/useMyUpload";
+import { useQueries } from "@tanstack/react-query";
+import {
+  getMyUploadById,
+  LatestUploadInfo,
+  submitApplication,
+} from "@/external-portal/services/portalOutgoingService";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { FilterEnum } from "@/shared/services/organizationsService";
+
+import { UploadFileModal } from "./UploadFileModal";
+import { useUser } from "@/shared/context/UserContext";
+
+interface LocalizedText {
+  am: string;
+  en: string;
+}
+type Upload = {
+  uploadId: string;
+  // add other fields if needed
+};
+
+interface Document {
+  id: string;
+  title: LocalizedText;
+  description: LocalizedText;
+  key: string;
+  type: string;
+  order: number;
+  isActive: boolean;
+  isOptional: boolean;
+}
+
+const UploadSteps = () => {
+  const { toast } = useToast();
+  const localized = useLocalizedName();
+
+  const userDetails = useUser();
+  const filterDataStr = userDetails?.userType;
+  const mappedType =
+    filterDataStr === "external_organization" ? "organization" : filterDataStr;
+
+  const filterData: FilterEnum | undefined =
+    mappedType && Object.values(FilterEnum).includes(mappedType as FilterEnum)
+      ? (mappedType as FilterEnum)
+      : undefined;
+
+  // Fetch required docs
+  const { requirementDoc } = useDocumentRequirement(filterData);
+  const { data: myUploads } = useMyUploads();
+
+  // Step 1: Collect latest upload IDs for each document
+  const latestUploadIds = (requirementDoc.items ?? []).map((doc) => {
+    const uploadsForDoc = (myUploads ?? []).filter(
+      (u) => u.documentId === doc.id
+    );
+
+    if (uploadsForDoc.length) {
+      const latestUpload = uploadsForDoc.reduce((prev, current) =>
+        new Date(prev.createdAt) > new Date(current.createdAt) ? prev : current
+      );
+
+      return {
+        docId: doc.id,
+        uploadId: latestUpload.id,
+        fileInfo: latestUpload.fileInfo,
+      };
+    }
+
+    return { docId: doc.id, uploadId: null, fileInfo: null };
+  });
+  // Step 2: Query presigned URLs for latest uploads
+  const queriesToRun = (latestUploadIds as LatestUploadInfo[]).filter(
+    ({ uploadId }) => !!uploadId
+  );
+  const uploadQueries = useQueries({
+    queries: queriesToRun.map(({ uploadId }) => ({
+      queryKey: ["myUpload", uploadId],
+      queryFn: () => getMyUploadById(uploadId!),
+    })),
+  });
+
+  // Step 3: Build files record
+  const filesRecord: Record<string, File | string | null> =
+    latestUploadIds.reduce((acc, { docId, fileInfo }, idx) => {
+      const queryIndex = queriesToRun.findIndex(
+        (q) => q.uploadId === latestUploadIds[idx].uploadId
+      );
+      const uploadData =
+        queryIndex >= 0 ? uploadQueries[queryIndex]?.data : undefined;
+      acc[docId] = uploadData?.presigned || fileInfo?.fileName || null;
+      return acc;
+    }, {} as Record<string, File | string | null>);
+
+  // State for modal and files
+  const [uploadedFiles, setUploadedFiles] = useState(filesRecord);
+  const [selectedDoc, setSelectedDoc] = useState<Document | null>(null);
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const handleOpenModal = (doc: Document) => {
+    setSelectedDoc(doc);
+    setModalOpen(true);
+  };
+
+  const handleUploadComplete = (file: File | string | null) => {
+    if (selectedDoc) {
+      const newFiles = {
+        ...uploadedFiles,
+        [selectedDoc.id]: file,
+      };
+      setUploadedFiles(newFiles);
+      setSelectedDoc(null);
+      setModalOpen(false);
+
+      if (file) {
+        toast({
+          title: "Success",
+          description:
+            "File uploaded successfully. You will be notified of your status via SMS shortly.",
+          variant: "default",
+        });
+      }
+    }
+  };
+
+  const handleSubmit = async () => {
+    try {
+      const response = await submitApplication();
+      if (!response) {
+        toast({
+          title: "Error",
+          description: "User ID is missing. Cannot submit application.",
+          variant: "destructive",
+        });
+        return;
+      }
+
+      toast({
+        title: "Success",
+        description:
+          "You have submitted your application and will be notified of the status. Thank you!",
+        variant: "default",
+      });
+    } catch (error) {
+      console.error(error);
+      toast({
+        title: "Error",
+        description: "Failed to submit application.",
+        variant: "destructive",
+      });
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4 w-full">
+      <Header />
+
+      <div className="p-4 bg-white shadow rounded-lg w-full">
+        <h2 className="text-lg font-semibold text-center">Upload Documents</h2>
+        <p className="text-sm text-gray-600 text-center">
+          Please upload the required documents for verification.
+        </p>
+
+        <div className="w-full max-w-5xl mx-auto mt-4 space-y-4">
+          {requirementDoc?.items.length === 0 && (
+            <div>No Document Requirements available.</div>
+          )}
+
+          {requirementDoc?.items.map((doc: Document) => (
+            <div
+              key={doc.id}
+              className="flex items-center justify-between p-4 border rounded-md">
+              <div className="flex flex-col">
+                <span className="font-medium">{localized(doc.title)}</span>
+                {doc.description && (
+                  <span className="text-sm text-muted-foreground">
+                    {localized(doc.description)}
+                  </span>
+                )}
+              </div>
+
+              <div className="flex gap-2">
+                {uploadedFiles[doc.id] && (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      const file = uploadedFiles[doc.id];
+                      if (!file) return;
+
+                      if (typeof file === "string") {
+                        window.open(file, "_blank");
+                      } else if (file instanceof File) {
+                        const url = URL.createObjectURL(file);
+                        window.open(url, "_blank");
+                      }
+                    }}>
+                    View
+                  </Button>
+                )}
+
+                <Button
+                  size="sm"
+                  className="bg-primary-600"
+                  onClick={() => handleOpenModal(doc)}>
+                  {uploadedFiles[doc.id] ? "Replace" : "Upload"}
+                </Button>
+              </div>
+            </div>
+          ))}
+
+          <div className="pt-4">
+            <Button
+              size="sm"
+              className="bg-primary-600 w-full"
+              disabled={
+                Object.values(uploadedFiles).filter((file) => file !== null)
+                  .length === 0
+              }
+              onClick={handleSubmit}>
+              Submit
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Modal Overlay */}
+      {modalOpen && selectedDoc && (
+        <UploadFileModal
+          value={uploadedFiles[selectedDoc.id] || null}
+          multiple={false}
+          accept={[
+            ".png",
+            ".jpg",
+            ".jpeg",
+            ".pdf",
+            ".dwg",
+            ".dxf",
+            ".dwt",
+            ".bak",
+            ".sv$",
+            ".dws",
+            ".mxd",
+            ".aprx",
+            ".rar",
+            ".zip",
+          ]}
+          onChange={(file) => {
+            if (file === null) handleUploadComplete(null);
+            else if (file instanceof File) handleUploadComplete(file);
+            else if (Array.isArray(file) && file[0])
+              handleUploadComplete(file[0]);
+          }}
+          fileUploadFields={{
+            requiredDocumentId: selectedDoc.id,
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default UploadSteps;
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/useDebounceEffect.ts b/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/useDebounceEffect.ts
new file mode 100644
index 000000000..f02685e53
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/components/Registration/useDebounceEffect.ts
@@ -0,0 +1,26 @@
+// components/useDebounceEffect.ts
+import { useEffect, useRef } from "react";
+
+export function useDebounceEffect(
+  fn: () => void,
+  waitTime: number,
+  deps?: any[]
+) {
+  const timeoutRef = useRef<number>(0);
+
+  useEffect(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    timeoutRef.current = window.setTimeout(() => {
+      fn();
+    }, waitTime);
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, deps);
+}
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/components/SignUpWithUploads.tsx b/apps/edr-freight-web/backoffice/src/external-portal/components/SignUpWithUploads.tsx
new file mode 100644
index 000000000..0a8300c8e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/components/SignUpWithUploads.tsx
@@ -0,0 +1,447 @@
+"use client";
+
+import React, { useMemo, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useNavigate } from "react-router-dom";
+import { Input } from "@/shared/common/ui/input";
+import { Button } from "@/shared/common/ui/button";
+import { Mail, User, Phone, Text, Building } from "lucide-react";
+import { useToast } from "@/shared/common/ui/use-toast";
+
+import { userSchema, UserFormValues } from "./outgoing/formSchema";
+import { useRegisterExternalPortalUser } from "../hooks/useRegisterExternalPortalUser";
+
+import { useTenantConfig } from "@/layout/components/TenantConfig";
+import { useDocumentRequirement } from "@/shared/hooks/useOrganizationReport";
+import { useMyUploads } from "@/external-portal/hooks/useMyUpload";
+import { useQueries } from "@tanstack/react-query";
+import {
+  getMyUploadById,
+  submitApplication,
+} from "@/external-portal/services/portalOutgoingService";
+import { FilterEnum } from "@/shared/services/organizationsService";
+import { UploadFileModal } from "./Registration/UploadFileModal";
+
+
+
+type LocalizedText = { am: string; en: string };
+interface Document {
+  id: string;
+  title: LocalizedText;
+  description: LocalizedText;
+  key: string;
+  type: string;
+  order: number;
+  isActive: boolean;
+  isOptional: boolean;
+}
+
+export default function SignupWithUploads() {
+  const { toast } = useToast();
+  const navigate = useNavigate();
+  const { config: tenantConfig } = useTenantConfig();
+  const { registerExternalPortalUser, isRegistering } =
+    useRegisterExternalPortalUser();
+
+  const form = useForm<UserFormValues>({
+    resolver: zodResolver(userSchema),
+    defaultValues: {
+      email: "",
+      username: "",
+      phoneNumber: "",
+      userType: "external_organization",
+      name: { am: "", en: "" },
+    },
+    mode: "onChange",
+  });
+
+  // watch userType so we can load document requirements for that type
+  const watchedUserType = form.watch("userType") || "external_organization";
+
+  // Map userType to FilterEnum values (same logic you used elsewhere)
+  const mappedType =
+    watchedUserType === "external_organization"
+      ? "organization"
+      : watchedUserType;
+
+  const filterData: FilterEnum | undefined =
+    mappedType && Object.values(FilterEnum).includes(mappedType as FilterEnum)
+      ? (mappedType as FilterEnum)
+      : undefined;
+
+  // fetch requirement doc for the watched user type
+  const { requirementDoc } = useDocumentRequirement(filterData);
+
+  // fetch user's previous uploads (if any) and prefill the upload list
+  const { data: myUploads } = useMyUploads();
+
+  // build latest upload ids per requirement doc (like your UploadSteps logic)
+const latestUploadIds = (requirementDoc.items ?? []).map((doc) => {
+  const uploadsForDoc = (myUploads ?? []).filter(
+    (u) => u.documentId === doc.id
+  );
+
+  if (uploadsForDoc.length) {
+    const latestUpload = uploadsForDoc.reduce((prev, current) =>
+      new Date(prev.createdAt) > new Date(current.createdAt) ? prev : current
+    );
+
+    return {
+      docId: doc.id,
+      uploadId: latestUpload.id,
+      fileInfo: latestUpload.fileInfo,
+    };
+  }
+
+  return { docId: doc.id, uploadId: null, fileInfo: null };
+});
+
+  // query presigned urls for each latest upload
+  const uploadQueries = useQueries({
+    queries:
+      latestUploadIds.map(({ uploadId }:any) => ({
+        queryKey: ["myUpload", uploadId],
+        queryFn: () => getMyUploadById(uploadId as string),
+        enabled: !!uploadId,
+      })) || [],
+  });
+
+  // build filesRecord map: docId -> presignedURL | fileName | null
+  const filesRecord = latestUploadIds.reduce(
+    (acc: Record<string, File | string | null>, { docId, fileInfo }: any, idx:any) => {
+      const uploadData = uploadQueries[idx]?.data as
+        | { data?: { presigned?: string } }
+        | undefined;
+      const presigned = uploadData?.data?.presigned;
+      acc[docId] = presigned || fileInfo?.fileName || null;
+      return acc;
+    },
+    {} as Record<string, File | string | null>
+  );
+
+  // local state to track uploaded files while user interacts on this page
+  const [uploadedFiles, setUploadedFiles] =
+    useState<Record<string, File | string | null>>(filesRecord);
+
+  // modal state for UploadFileModal
+  const [selectedDoc, setSelectedDoc] = useState<Document | null>(null);
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const openUploadModal = (doc: Document) => {
+    setSelectedDoc(doc);
+    setModalOpen(true);
+  };
+
+  const handleUploadComplete = (file: File | null | string) => {
+    if (!selectedDoc) return;
+    const newFiles = { ...uploadedFiles, [selectedDoc.id]: file };
+    setUploadedFiles(newFiles);
+    setSelectedDoc(null);
+    setModalOpen(false);
+
+    if (file) {
+      toast({
+        title: "Success",
+        description:
+          "File uploaded successfully. You will be notified of your status via SMS shortly.",
+        variant: "default",
+      });
+    }
+  };
+
+  // Signup submit: registers the user then triggers submitApplication (if desired)
+  const onSubmit = async (values: UserFormValues) => {
+    try {
+      // 1) Register user (existing hook)
+      await registerExternalPortalUser(values);
+
+      // 2) After registration, optionally submit an application.
+      // Your uploadDocuments hook (used in UploadFileModal) already uploads
+      // files during the modal upload action. submitApplication() finalizes/sends the application.
+      try {
+        await submitApplication();
+      } catch (err) {
+        // non-blocking: show toast but continue to navigate to verify OTP
+        console.error("submitApplication error", err);
+        toast({
+          title: "Warning",
+          description:
+            "Account created but application submission failed. You can retry later.",
+          variant: "destructive",
+        });
+      }
+
+      // 3) Navigate to verify-otp with query params (same behavior you had)
+      const params = new URLSearchParams();
+      if (values.email) params.set("email", values.email.trim());
+      if (values.phoneNumber) {
+        const normalizedPhone = values.phoneNumber.trim().replace(/^0/, "+251");
+        params.set("phone", normalizedPhone);
+      }
+      navigate(`/external-portal/verify-otp?${params.toString()}`);
+    } catch (error) {
+      console.error("Signup error:", error);
+      toast({
+        title: "Error",
+        description: "Failed to create account. Please check your details.",
+        variant: "destructive",
+      });
+    }
+  };
+
+  // helper localizer — re-use your localized name hook if needed (not provided here).
+  const localized = (t: LocalizedText) => t?.en || t?.am || "";
+
+  // count uploaded files
+  const attachedCount = useMemo(
+    () => Object.values(uploadedFiles).filter((f) => f !== null).length,
+    [uploadedFiles]
+  );
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center p-4">
+      <div className="w-full max-w-6xl bg-white rounded-2xl shadow-xl overflow-hidden flex flex-col md:flex-row h-full max-h-[900px]">
+        {/* Left: Signup form */}
+        <div className="md:w-1/2 w-full p-8 md:p-12 flex flex-col gap-4">
+          <div className="flex items-center mb-4">
+            <img
+              src={tenantConfig.logo || "/assets/smart-office-logo.svg"}
+              alt={tenantConfig.appName}
+              className="h-10 object-contain"
+            />
+            <span className="ml-2 text-xl font-semibold text-gray-800">
+              {tenantConfig.appName}
+            </span>
+          </div>
+
+          <div>
+            <h1 className="text-2xl font-bold mb-1">Create Account</h1>
+            <p className="text-sm text-gray-500">
+              Create your account and upload required documents on the right.
+            </p>
+          </div>
+
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="mt-4 flex-1 flex flex-col">
+            <div className="space-y-4">
+              <div className="relative">
+                <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                <Input
+                  {...form.register("email")}
+                  type="email"
+                  placeholder="Email"
+                  className="pl-10 h-12"
+                />
+              </div>
+
+              <div className="relative">
+                <User className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                <Input
+                  {...form.register("username")}
+                  type="text"
+                  placeholder="Username"
+                  className="pl-10 h-12"
+                />
+              </div>
+
+              <div className="relative">
+                <Phone className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                <Input
+                  {...form.register("phoneNumber")}
+                  type="tel"
+                  placeholder="Phone Number"
+                  className="pl-10 h-12"
+                />
+              </div>
+
+              <div className="relative">
+                <Text className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                <Input
+                  {...form.register("name.en")}
+                  type="text"
+                  placeholder="Name (English)"
+                  className="pl-10 h-12"
+                />
+              </div>
+
+              <div className="relative">
+                <Text className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                <Input
+                  {...form.register("name.am")}
+                  type="text"
+                  placeholder="Name (Amharic)"
+                  className="pl-10 h-12"
+                />
+              </div>
+
+              {/* userType control — you may already have this as a select / radio; using plain input for brevity */}
+              <div>
+                <label className="text-sm text-gray-600">Account type</label>
+                <div className="mt-2 flex gap-2">
+                  <label
+                    className={`px-3 py-2 rounded-md border ${
+                      form.getValues("userType") === "external_organization"
+                        ? "bg-primary-50 border-primary"
+                        : ""
+                    }`}>
+                    <input
+                      type="radio"
+                      {...form.register("userType")}
+                      value="external_organization"
+                      className="mr-2"
+                    />
+                    Organization
+                  </label>
+                  <label
+                    className={`px-3 py-2 rounded-md border ${
+                      form.getValues("userType") === "individual"
+                        ? "bg-primary-50 border-primary"
+                        : ""
+                    }`}>
+                    <input
+                      type="radio"
+                      {...form.register("userType")}
+                      value="individual"
+                      className="mr-2"
+                    />
+                    Individual
+                  </label>
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-auto pt-4">
+              <Button
+                type="submit"
+                className="w-full h-12 bg-primary hover:bg-primary-700 text-white"
+                disabled={isRegistering}>
+                {isRegistering
+                  ? "Creating Account..."
+                  : "Create account & submit"}
+              </Button>
+
+              <p className="text-center text-sm text-gray-500 mt-3">
+                Already have an account?{" "}
+                <a href="/login" className="text-primary">
+                  Sign in
+                </a>
+              </p>
+            </div>
+          </form>
+        </div>
+
+        {/* Vertical divider */}
+        <div className="hidden md:block w-px bg-gray-200" />
+
+        {/* Right: Upload document area (changes by userType) */}
+        <div className="md:w-1/2 w-full p-6 md:p-10">
+          <div className="flex items-center justify-between mb-4">
+            <div>
+              <h3 className="text-lg font-semibold">
+                Upload Required Documents
+              </h3>
+              <p className="text-sm text-gray-500">
+                Required documents for:{" "}
+                <span className="font-medium">{mappedType}</span>
+              </p>
+            </div>
+            <div className="text-sm text-gray-600">
+              {attachedCount} attached
+            </div>
+          </div>
+
+          <div className="space-y-3 max-h-[62vh] overflow-auto">
+            {requirementDoc?.items?.length === 0 && (
+              <div className="text-sm text-gray-500">
+                No document requirements for this account type.
+              </div>
+            )}
+
+            {requirementDoc?.items?.map((doc: Document) => (
+              <div
+                key={doc.id}
+                className="flex items-center justify-between p-3 border rounded-md">
+                <div className="flex flex-col">
+                  <span className="font-medium">{localized(doc.title)}</span>
+                  {doc.description && (
+                    <span className="text-sm text-muted-foreground">
+                      {localized(doc.description)}
+                    </span>
+                  )}
+                </div>
+
+                <div className="flex gap-2 items-center">
+                  {uploadedFiles[doc.id] && (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => {
+                        const file = uploadedFiles[doc.id];
+                        if (!file) return;
+                        if (typeof file === "string") {
+                          window.open(file, "_blank");
+                        } else if (file instanceof File) {
+                          const url = URL.createObjectURL(file);
+                          window.open(url, "_blank");
+                        }
+                      }}>
+                      View
+                    </Button>
+                  )}
+
+                  <Button
+                    size="sm"
+                    className="bg-primary-600"
+                    onClick={() => openUploadModal(doc)}>
+                    {uploadedFiles[doc.id] ? "Replace" : "Upload"}
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className="mt-4 text-sm text-gray-500">
+            Tip: You can upload files now or complete your account and upload
+            later.
+          </div>
+        </div>
+      </div>
+
+      {/* Upload modal */}
+      {modalOpen && selectedDoc && (
+        <UploadFileModal
+          value={uploadedFiles[selectedDoc.id] || null}
+          multiple={false}
+          accept={[
+            ".png",
+            ".jpg",
+            ".jpeg",
+            ".pdf",
+            ".dwg",
+            ".dxf",
+            ".dwt",
+            ".bak",
+            ".sv$",
+            ".dws",
+            ".mxd",
+            ".aprx",
+            ".rar",
+            ".zip",
+          ]}
+          onChange={(file) => {
+            if (file === null) handleUploadComplete(null);
+            else if (file instanceof File) handleUploadComplete(file);
+            else if (Array.isArray(file) && file[0])
+              handleUploadComplete(file[0]);
+          }}
+          fileUploadFields={{
+            requiredDocumentId: selectedDoc.id,
+            // optionally: photoConfiguration etc.
+          }}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/components/ViewExternalRecord.tsx b/apps/edr-freight-web/backoffice/src/external-portal/components/ViewExternalRecord.tsx
new file mode 100644
index 000000000..df2710054
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/components/ViewExternalRecord.tsx
@@ -0,0 +1,339 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  fetchRecordById,
+  regeneratePdf,
+} from "@/record-management/services/api/userRecordService";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import FileList from "@/record-management/common/fileListComponent";
+import {
+  ChevronLeft,
+  RefreshCw,
+  Maximize,
+  Minimize,
+  Download,
+  X,
+  MoveLeft,
+} from "lucide-react";
+import { attachmentResponse } from "../hooks/useCreateExternalLetterRecord";
+import { Button } from "@/shared/common/ui/button";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+interface ViewExternalRecordProps {
+  itemId: string;
+  onBack: () => void;
+}
+const Box = ({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) => (
+  <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-4 hover:border-primary-200 dark:hover:border-primary-600 transition-colors">
+    <label className="block text-base font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
+      {title}
+    </label>
+    {children}
+  </div>
+);
+const ViewExternalRecord: React.FC<ViewExternalRecordProps> = ({
+  itemId,
+  onBack,
+}) => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  const [isLoadingPdf, setIsLoadingPdf] = useState(true);
+
+  const { handleError } = useErrorHandler(t);
+
+  const { data: attachment, isLoading, error } = attachmentResponse(itemId);
+  const { data: record, error: recordFetchError } = useQuery({
+    queryKey: ["record", itemId],
+    queryFn: () => fetchRecordById(itemId!),
+    enabled: !!itemId,
+  });
+
+  // Surface main-record fetch failures via the centralized error handler.
+  // attachment failure stays silent — the existing inline UI already covers it.
+  const prevRecordErrorRef = useRef<unknown>(null);
+  useEffect(() => {
+    if (recordFetchError && recordFetchError !== prevRecordErrorRef.current) {
+      prevRecordErrorRef.current = recordFetchError;
+      handleError(recordFetchError);
+    }
+  }, [recordFetchError, handleError]);
+  const attachmentUrl = useMemo(() => {
+    if (!attachment) return null;
+
+    // Handle ArrayBuffer case
+    if (attachment instanceof ArrayBuffer) {
+      const blob = new Blob([attachment], { type: "application/pdf" });
+      return URL.createObjectURL(blob);
+    }
+
+    // Handle presigned URL case
+    if (typeof attachment === "object" && "presigned" in attachment) {
+      return attachment.presigned;
+    }
+
+    // Handle direct URL case
+    if (typeof attachment === "string") {
+      return attachment.startsWith("http") ? attachment : null;
+    }
+
+    return null;
+  }, [attachment]);
+
+  useEffect(() => {
+    return () => {
+      // Clean up blob URLs
+      if (attachmentUrl && attachmentUrl.startsWith("blob:")) {
+        URL.revokeObjectURL(attachmentUrl);
+      }
+    };
+  }, [attachmentUrl]);
+
+  const { mutate: regeneratePdfMutation, isPending: isRegenerating } =
+    useMutation({
+      mutationFn: async () => {
+        if (!itemId) throw new Error("Record ID is missing");
+        await regeneratePdf(itemId);
+      },
+      onSuccess: () => {
+        toast.success(t("msg.pdfRegenerated"));
+        queryClient.invalidateQueries({
+          queryKey: ["attachmentResponse", itemId],
+        });
+      },
+      onError: (error) => {
+        handleError(error);
+      },
+    });
+
+  const handleDownload = () => {
+    if (!attachmentUrl) return;
+
+    const link = document.createElement("a");
+    link.href = attachmentUrl;
+    link.download = `document-${itemId}.pdf`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  const openFullScreen = () => {
+    setIsFullScreen(true);
+  };
+
+  const closeFullScreen = () => {
+    setIsFullScreen(false);
+  };
+
+  const handleIframeLoad = () => {
+    setIsLoadingPdf(false);
+  };
+
+  // Handle escape key to exit fullscreen
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && isFullScreen) {
+        closeFullScreen();
+      }
+    };
+
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isFullScreen]);
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+          <p className="text-gray-600">{t("loading")}...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <div className="text-center">
+          <div className="bg-red-100 rounded-full p-3 w-12 h-12 flex items-center justify-center mx-auto mb-4">
+            <X className="h-6 w-6 text-red-600" />
+          </div>
+          <h3 className="text-lg font-medium text-red-800 mb-2">
+            {t("error.failedToLoadPdf")}
+          </h3>
+          <p className="text-red-600 mb-4">{error.message}</p>
+          <div className="flex">
+            <Button
+              onClick={onBack}
+              size="sm" // or use className for custom sizing
+              className="bg-gray-600 text-sm px-1 py-1 w-[100px] hover:bg-gray-700"
+            >
+              <MoveLeft className="w-4 h-4" />
+              {t("common.back")}
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {/* Normal View */}
+      <div className="min-h-screen bg-gray-50 py-8">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center mb-6">
+            <div className="flex">
+              <Button
+                onClick={onBack}
+                size="sm" // or use className for custom sizing
+                className="bg-gray-600 text-sm px-1 py-1 w-[100px] hover:bg-gray-700"
+              >
+                <MoveLeft className="w-4 h-4" />
+                {t("common.back")}
+              </Button>
+            </div>
+
+            <div className="flex gap-3">
+              <button
+                onClick={() => regeneratePdfMutation()}
+                disabled={isRegenerating || !attachmentUrl}
+                className="flex items-center px-4 py-2 bg-white border border-gray-300 rounded-lg shadow-sm text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200"
+              >
+                <RefreshCw
+                  className={`h-4 w-4 mr-2 ${
+                    isRegenerating ? "animate-spin" : ""
+                  }`}
+                />
+                {t("viewDetail.regeneratePdf")}
+              </button>
+
+              <button
+                onClick={handleDownload}
+                disabled={!attachmentUrl}
+                className="flex items-center px-4 py-2 bg-white border border-gray-300 rounded-lg shadow-sm text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200"
+              >
+                <Download className="h-4 w-4 mr-2" />
+                {t("userRecord.Download")}
+              </button>
+
+              <button
+                onClick={openFullScreen}
+                disabled={!attachmentUrl}
+                className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg shadow-sm hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200"
+              >
+                <Maximize className="h-4 w-4 mr-2" />
+                {t("viewDetail.fullScreen")}
+              </button>
+            </div>
+          </div>
+
+          <div className="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden">
+            {attachmentUrl ? (
+              <div className="relative">
+                {isLoadingPdf && (
+                  <div className="absolute inset-0 flex items-center justify-center bg-gray-50">
+                    <div className="text-center">
+                      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-2"></div>
+                      <p className="text-gray-600 dark:text-gray-400 flex items-center gap-2">
+                        <span className="animate-spin rounded-full h-4 w-4 border-t-2 border-primary-600 dark:border-primary-400"></span>
+                        {t("viewDetail.loading")}
+                      </p>
+                    </div>
+                  </div>
+                )}
+                <iframe
+                  src={attachmentUrl}
+                  title="PDF Preview"
+                  width="100%"
+                  height="800px"
+                  style={{ border: "none" }}
+                  onLoad={handleIframeLoad}
+                  className={
+                    isLoadingPdf
+                      ? "opacity-0"
+                      : "opacity-100 transition-opacity duration-300"
+                  }
+                />
+              </div>
+            ) : (
+              <div className="flex flex-col items-center justify-center h-96 bg-gray-50">
+                <div className="bg-gray-100 rounded-full p-4 w-16 h-16 flex items-center justify-center mb-4">
+                  <X className="h-8 w-8 text-gray-400" />
+                </div>
+                <h3 className="text-lg font-medium text-gray-900 mb-2">
+                  {t("noPdfAvailable")}
+                </h3>
+                <p className="text-gray-500 text-center max-w-md">
+                  {t("noPdfAvailableDescription") ||
+                    "The PDF document is not available. You can try regenerating it using the button above."}
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      {/* Full Screen Overlay */}
+      {isFullScreen && attachmentUrl && (
+        <div className="fixed inset-0 bg-black z-50 flex flex-col">
+          {/* Header */}
+          <div className="bg-gray-900 text-white px-6 py-4 flex justify-between items-center">
+            <div className="flex items-center">
+              <span className="font-medium">Document Preview</span>
+            </div>
+            <div className="flex items-center gap-3">
+              <button
+                onClick={handleDownload}
+                className="flex items-center px-3 py-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors duration-200"
+                title="Download"
+              >
+                <Download className="h-4 w-4" />
+              </button>
+              <button
+                onClick={closeFullScreen}
+                className="flex items-center px-3 py-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition-colors duration-200"
+                title="Exit Fullscreen"
+              >
+                <Minimize className="h-4 w-4" />
+              </button>
+            </div>
+          </div>
+
+          {/* PDF Container */}
+          <div className="flex-1 bg-gray-800">
+            <iframe
+              src={attachmentUrl}
+              title="PDF Preview - Full Screen"
+              width="100%"
+              height="100%"
+              style={{ border: "none" }}
+            />
+          </div>
+
+          {/* Footer */}
+          <div className="bg-gray-900 text-white px-6 py-3 text-sm text-center">
+            <p>Press ESC to exit fullscreen mode</p>
+          </div>
+        </div>
+      )}
+      <div className="mt-3">
+        <Box title={t("viewDetail.attachments")}>
+          <FileList
+            attachments={record?.content[0]?.recordAttachments ?? []}
+            showDelete={false}
+          />
+        </Box>
+      </div>
+    </>
+  );
+};
+
+export default ViewExternalRecord;
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/components/landingOutlet.tsx b/apps/edr-freight-web/backoffice/src/external-portal/components/landingOutlet.tsx
new file mode 100644
index 000000000..c066ca524
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/components/landingOutlet.tsx
@@ -0,0 +1,148 @@
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { Button } from "@/shared/common/ui/button";
+import { Card, CardHeader, CardContent } from "@/shared/common/ui/card";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+
+import VerifyOtp from "./verifyOTP";
+import { Clock } from "lucide-react";
+import { useUser } from "@/shared/context/UserContext";
+
+export const LandingPageLayout = () => {
+  const userDetails = useUser();
+  const doesUserHaveSetPassword = userDetails?.hasFinishedRegistration;
+  const shouldBlock = doesUserHaveSetPassword === false;
+
+  const shellClasses =
+    "min-h-screen flex flex-col w-full " +
+    (shouldBlock ? "blur-sm pointer-events-none select-none" : "");
+
+  return (
+    <>
+      {/* Main Shell (blurred & non-interactive when blocked) */}
+      <div className={shellClasses} aria-hidden={shouldBlock}>
+        {/* Header Section */}
+        <header className="text-center py-10 border-b border-gray-200 bg-primary-500 ">
+          <div className="container">
+            <h1 className="text-4xl font-bold text-primary-foreground mb-4">
+              Welcome to SmartOffice
+            </h1>
+            <p className="text-xl text-primary-foreground/90 max-w-2xl mx-auto mb-8">
+              Submit, track, and manage letters to organizations seamlessly. Our
+              system ensures transparency and traceability at every step.
+            </p>
+            {!userDetails && (
+              <div className="flex justify-center gap-4">
+                <Button asChild variant="secondary">
+                  <Link to="/external-portal/signin">Sign In</Link>
+                </Button>
+                <Button asChild>
+                  <Link to="/external-portal/signup">Sign Up</Link>
+                </Button>
+              </div>
+            )}
+          </div>
+        </header>
+
+        {/* Main Content */}
+        <main className="flex-grow py-12 px-4">
+          <section className="container max-w-6xl mx-auto">
+            <h2 className="text-3xl font-bold text-center text-foreground mb-4">
+              How It Works
+            </h2>
+            <p className="text-lg text-muted-foreground text-center max-w-2xl mx-auto mb-12">
+              From registration to letter submission and tracking, we've made
+              the process simple.
+            </p>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+              <Card className="hover:shadow-md transition-shadow">
+                <CardHeader>
+                  <h3 className="text-xl font-semibold text-primary">
+                    1. Sign Up
+                  </h3>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-muted-foreground">
+                    Register your organization or as an individual. Get a
+                    confirmation via text message.
+                  </p>
+                </CardContent>
+              </Card>
+
+              <Card className="hover:shadow-md transition-shadow">
+                <CardHeader>
+                  <h3 className="text-xl font-semibold text-primary">
+                    2. Log In
+                  </h3>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-muted-foreground">
+                    Access your dashboard and start interacting with the system
+                    securely.
+                  </p>
+                </CardContent>
+              </Card>
+
+              <Card className="hover:shadow-md transition-shadow hover:cursor-pointer">
+                <Link to="/external-portal/portal-outgoing/submit-letter">
+                  <CardHeader>
+                    <h3 className="text-xl font-semibold text-primary">
+                      3. Submit Letters
+                    </h3>
+                  </CardHeader>
+                  <CardContent>
+                    <p className="text-muted-foreground">
+                      Select your target organization and submit your letter
+                      directly through the portal.
+                    </p>
+                  </CardContent>
+                </Link>
+              </Card>
+
+              <Card className="hover:shadow-md transition-shadow hover:cursor-pointer">
+                <Link to="/external-portal/portal-outgoing">
+                  <CardHeader>
+                    <h3 className="text-xl font-semibold text-primary">
+                      4. Track Activities
+                    </h3>
+                  </CardHeader>
+                  <CardContent>
+                    <p className="text-muted-foreground">
+                      See your submitted letters and view the activity logs
+                      associated with each.
+                    </p>
+                  </CardContent>
+                </Link>
+              </Card>
+            </div>
+          </section>
+        </main>
+
+        {/* Footer */}
+        <footer className="py-6 border-t border-gray-200 text-center text-muted-foreground">
+          <div className="container">
+            <p>© 2025 SmartOffice. All rights reserved.</p>
+          </div>
+        </footer>
+      </div>
+
+      {shouldBlock && (
+        <div className="fixed inset-0 z-50 flex flex-col items-center justify-center text-center p-6 pointer-events-auto">
+          <div className="bg-white bg-opacity-90 backdrop-blur-md rounded-xl shadow-xl p-8 max-w-md w-full border border-gray-200">
+            <Clock className="w-12 h-12 text-yellow-500 mx-auto mb-4" />
+            <h2 className="text-2xl font-bold text-red-600 mb-4">
+              Access Restricted
+            </h2>
+            <p className="text-gray-800 text-lg">
+              Your registration is pending. Please wait for approval from the
+              SmartOffice administrator.
+            </p>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default LandingPageLayout;
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/components/outgoing/formSchema.ts b/apps/edr-freight-web/backoffice/src/external-portal/components/outgoing/formSchema.ts
new file mode 100644
index 000000000..d57daef8b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/components/outgoing/formSchema.ts
@@ -0,0 +1,93 @@
+import { z } from "zod";
+
+export const createLetterSchema = z.object({
+  fileInfo: z.object({
+    fileName: z.string(),
+    contentType: z.string(),
+    size: z.number(),
+    originalname: z.string(),
+  }),
+  subject: z.string().min(1, "Subject is required"),
+  letterNumber: z.string().min(1, "Letter number is required"),
+  preferredLanguage: z.enum(["am", "en"], {
+    required_error: "Preferred language is required",
+  }),
+});
+
+// 👇 If you want TypeScript types derived from the Zod schema:
+export type CreateLetterFormValues = z.infer<typeof createLetterSchema>;
+
+export const createComplaintLetterSchema = z.object({
+  fileInfo: z.object({
+    fileName: z.string(),
+    contentType: z.string(),
+    size: z.number(),
+    originalname: z.string(),
+  }),
+  subject: z.string().min(1, "Subject is required"),
+  description: z.string().min(1, "Description is required"),
+  recipient: z.string().optional(),
+  letterNumber: z.string().optional(),
+  preferredLanguage: z.enum(["am", "en"], {
+    required_error: "Preferred language is required",
+  }),
+});
+
+export type CreateComplaintLetterFormValues = z.infer<
+  typeof createComplaintLetterSchema
+>;
+
+export const userSchema = z.object({
+  email: z.string().email({ message: "Invalid email address" }),
+  username: z
+    .string()
+    .min(3, { message: "Username must be at least 3 characters" }),
+  phoneNumber: z
+    .string()
+    .min(10, { message: "Phone number must be at least 10 digits" }),
+  userType: z.string().min(1, { message: "User type is required" }),
+  name: z.object({
+    am: z.string().min(1, { message: "Amharic name is required" }),
+    en: z.string().min(1, { message: "English name is required" }),
+  }),
+});
+
+export type UserFormValues = z.infer<typeof userSchema>;
+
+export const defaultCreateLetterValues: CreateLetterFormValues = {
+  fileInfo: {
+    fileName: "",
+    contentType: "",
+    size: 0,
+    originalname: "",
+  },
+  subject: "",
+  letterNumber: "",
+  preferredLanguage: "en",
+};
+
+export const defaultCreateComplaintLetterValues: CreateComplaintLetterFormValues =
+  {
+    fileInfo: {
+      fileName: "",
+      contentType: "",
+      size: 0,
+      originalname: "",
+    },
+    subject: "",
+    description: "",
+    recipient: "",
+    letterNumber: "",
+    preferredLanguage: "en",
+  };
+
+export const defaultUserValues: UserFormValues = {
+  email: "",
+  username: "",
+  phoneNumber: "",
+  userType: "",
+  name: {
+    am: "",
+    en: "",
+  },
+};
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/components/outgoing/portalOutgoing.tsx b/apps/edr-freight-web/backoffice/src/external-portal/components/outgoing/portalOutgoing.tsx
new file mode 100644
index 000000000..c0e04c276
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/components/outgoing/portalOutgoing.tsx
@@ -0,0 +1,207 @@
+import { useState, useMemo, useEffect } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { DataTable } from "@/record-management/common/DataTable";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { FilePlus2, Search } from "lucide-react";
+import { t } from "i18next";
+import { portalOutgoingColumn } from "./portalOutgoingColumn";
+import { useExternalPortal } from "@/external-portal/hooks/useCreateExternalLetterRecord";
+import Loader from "@/record-management/common/loader";
+import { useUser } from "@/shared/context/UserContext";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { hasComplaintVerification } from "@/complaints/utils/complaintVerificationStorage";
+import { COMPLAINT_SUBMIT_PATH } from "@/complaints/utils/complaintRoutes";
+type FilterType = "Reference" | "From" | "Subject" | "letterNumber";
+
+const PortalOutgoing = () => {
+  const [statusFilter, setStatusFilter] = useState<string>("");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [showRegistrationAlert, setShowRegistrationAlert] = useState(false);
+  const userDetails = useUser();
+  const localizedName = useLocalizedName();
+  const hasCompletedRegistration = userDetails?.hasFinishedRegistration;
+  const navigate = useNavigate();
+  const location = useLocation();
+  const complaintSessionActive = hasComplaintVerification();
+  const showComplaintPrompt =
+    complaintSessionActive ||
+    Boolean(
+      (location.state as { fromComplaintVerification?: boolean } | null)
+        ?.fromComplaintVerification,
+    );
+
+  useEffect(() => {
+    if (!hasCompletedRegistration && !complaintSessionActive) {
+      setShowRegistrationAlert(true);
+    } else {
+      setShowRegistrationAlert(false);
+    }
+  }, [complaintSessionActive, hasCompletedRegistration]);
+
+  const [filterType, setFilterType] = useState<FilterType>("Reference");
+  const [pagination, setPagination] = useState({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+  const params: Record<string, any> = {
+    skip: pagination.pageIndex * pagination.pageSize,
+    take: pagination.pageSize,
+    orderBy: "record.createdAt:DESC",
+  };
+  const {
+    ExternalLetters,
+    isFetchingLetters,
+    ExternalCount,
+    refetchExternalLetters,
+  } = useExternalPortal(params);
+
+  const statusOptions = [{ value: "", label: t("statusBar.All") }];
+
+  const filteredRecords = useMemo(() => {
+    let filtered = ExternalLetters;
+
+    if (statusFilter) {
+      filtered = filtered.filter(
+        (record: any) => record.status === statusFilter,
+      );
+    }
+
+    if (!searchQuery) return filtered;
+
+    const query = searchQuery.toLowerCase();
+
+    return filtered.filter((record: any) => {
+      switch (filterType) {
+        case "Reference":
+          return record.letterNumber?.toLowerCase().includes(query);
+        case "Subject":
+          return record.content[0]?.subject.toLowerCase().includes(query);
+        default:
+          return true;
+      }
+    });
+  }, [ExternalLetters, statusFilter, searchQuery, filterType]);
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(e.target.value);
+  };
+
+  const handleFilterChange = (value: FilterType) => {
+    setFilterType(value);
+  };
+
+  return (
+    <div className="min-h-screen w-full bg-slate-50 py-6 md:py-8">
+      <div className="mx-auto max-w-6xl px-4 md:px-6">
+        <div className="mb-6 flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight text-slate-900 md:text-3xl">
+              {t("nav.myRecord")}
+            </h1>
+            <p className="mt-1 text-sm text-slate-600">
+              {t("complaint.fayda.formSubtitle")}
+            </p>
+          </div>
+          <Link to={COMPLAINT_SUBMIT_PATH}>
+            <Button className="h-11 rounded-lg px-5 shadow-sm bg-primary text-primary-foreground hover:bg-primary/90">
+              <FilePlus2 className="mr-2 h-4 w-4" />
+              {complaintSessionActive
+                ? t("complaint.submit")
+                : t("userRecord.Add Record")}
+            </Button>
+          </Link>
+        </div>
+
+        {showComplaintPrompt ? (
+          <div className="mb-6 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900">
+            {t("complaint.choice.prompt")}{" "}
+            <Link
+              to={COMPLAINT_SUBMIT_PATH}
+              className="font-semibold underline underline-offset-2">
+              {t("complaint.submit")}
+            </Link>
+          </div>
+        ) : null}
+
+        {showRegistrationAlert ? (
+          <div className="mb-6 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
+            {t("registration.registrationRequired")}{" "}
+            <button
+              type="button"
+              className="font-semibold underline underline-offset-2"
+              onClick={() => navigate("/external-portal/upload-documents")}>
+              {t("registration.uploadDocuments")}
+            </button>
+          </div>
+        ) : null}
+
+        <div className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm md:p-5">
+          <div className="mb-5 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+            <div className="flex flex-wrap gap-2">
+              {statusOptions.map((option) => (
+                <Button
+                  key={option.value}
+                  variant={statusFilter === option.value ? "linkActive" : "link"}
+                  onClick={() => setStatusFilter(option.value)}
+                  className="rounded-md">
+                  {option.label}
+                </Button>
+              ))}
+            </div>
+
+            <div className="flex w-full flex-col gap-3 sm:flex-row lg:w-auto">
+              <Select value={filterType} onValueChange={handleFilterChange}>
+                <SelectTrigger className="w-full sm:w-[180px]">
+                  <SelectValue placeholder={t("userRecord.Filter by")} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="Subject">
+                    {t("userRecord.Subject")}
+                  </SelectItem>
+                  <SelectItem value="Reference">
+                    {t("userRecord.Letter Number")}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+              <div className="relative w-full sm:min-w-[240px]">
+                <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
+                <Input
+                  className="pl-9"
+                  type="text"
+                  placeholder={`${t("userRecord.Search")} ${filterType.toLowerCase()}`}
+                  value={searchQuery}
+                  onChange={handleSearchChange}
+                />
+              </div>
+            </div>
+          </div>
+
+          {isFetchingLetters ? <Loader /> : null}
+
+          <DataTable
+            tableName="External Records"
+            columns={portalOutgoingColumn(
+              localizedName as (name?: { am?: string; en?: string }) => string,
+            )}
+            data={filteredRecords}
+            toolBarPosition="right"
+            totalCount={ExternalCount}
+            pagination={pagination}
+            setPagination={setPagination}
+            refresh={refetchExternalLetters}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PortalOutgoing;
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/components/outgoing/portalOutgoingColumn.tsx b/apps/edr-freight-web/backoffice/src/external-portal/components/outgoing/portalOutgoingColumn.tsx
new file mode 100644
index 000000000..fece71e54
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/components/outgoing/portalOutgoingColumn.tsx
@@ -0,0 +1,111 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { IncomingRecordDto } from "@/record-management/dto/userRecords/userRecordsDto";
+import { Badge } from "@/shared/common/ui/badge";
+import { Button } from "@/shared/common/ui/button";
+import { Download, Eye, MoreHorizontal, Trash2 } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import { LetterRecordDto } from "@/shared/dto/External-Portal/External-PortalDto";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { renderStatus } from "@/record-management/utils/renderDetails";
+
+export const portalOutgoingColumn = (
+  localizedName: (name?: { am?: string; en?: string }) => string
+): ColumnDef<LetterRecordDto>[] => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const { t, i18n } = useTranslation();
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const navigate = useNavigate();
+  const handleViewRecord = (recordId: string) => {
+    navigate(`/external-portal/view/${recordId}`);
+  };
+  return [
+    {
+      accessorKey: "referenceNumber",
+      header: t("userRecord.Letter Number"),
+      cell: ({ row }) => (
+        <div className="font-medium">{row?.original?.letterNumber}</div>
+      ),
+    },
+    {
+      accessorKey: "subject",
+      header: t("userRecord.Subject"),
+      cell: ({ row }) => {
+        const subject = row.original.content[0]?.subject || "-";
+        return <div className="text-sm text-gray-700">{subject}</div>;
+      },
+    },
+
+    {
+      accessorKey: "Receiver",
+      header: t("userRecord.ReceivingUnit"),
+      cell: ({ row }) => {
+        const receivingUnit =
+          localizedName(row.original.receivingUnits?.[0]?.unit?.name) || "-";
+        return <div className="text-sm text-gray-700">{receivingUnit}</div>;
+      },
+    },
+    {
+      accessorKey: "status",
+      header: t("userRecord.Status"),
+      cell: ({ row }) => {
+        const status = row?.original?.statusKey;
+        return renderStatus(status, status);
+      },
+    },
+
+    {
+      accessorKey: "Date",
+      header: t("userRecord.Date Received"),
+      cell: ({ row }) => {
+        const lang = i18n.language;
+        const dispatchedDate = row.original.createdAt;
+        const amharicDate = row.original.amharicCreatedAt;
+        if (lang.startsWith("am")) {
+          return amharicDate ?? "-";
+        } else {
+          const date = new Date(dispatchedDate).toLocaleDateString(
+            i18n.language,
+            {
+              year: "numeric",
+              month: "short",
+              day: "numeric",
+              hour: "numeric",
+              minute: "numeric",
+            }
+          );
+
+          return date ?? "-";
+        }
+      },
+    },
+    {
+      id: "actions",
+      header: t("userIncoming.Actions"),
+      cell: ({ row }) => {
+        const record = row.original;
+
+        return (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="sm">
+                <MoreHorizontal className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={() => handleViewRecord(record.id)}>
+                <Eye className="h-4 w-4 mr-2" />
+                {t("userRecord.View")}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        );
+      },
+    },
+  ];
+};
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/components/outgoing/submitExternalRecords.tsx b/apps/edr-freight-web/backoffice/src/external-portal/components/outgoing/submitExternalRecords.tsx
new file mode 100644
index 000000000..789608caf
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/components/outgoing/submitExternalRecords.tsx
@@ -0,0 +1,601 @@
+import { useEffect, useState } from "react";
+import Cookies from "js-cookie";
+import { useForm, type Resolver } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Input } from "@/shared/common/ui/input";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from "@/shared/common/ui/form";
+import { ReusableFileUploader } from "@/shared/common/ui/fileUploader/reusableFileUploader";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import {
+  createLetterSchema,
+  createComplaintLetterSchema,
+  defaultCreateLetterValues,
+  defaultCreateComplaintLetterValues,
+  CreateLetterFormValues,
+} from "./formSchema";
+import { useExternalPortal } from "@/external-portal/hooks/useCreateExternalLetterRecord";
+import { useNavigate } from "react-router-dom";
+import { recordFileService } from "@/record-management/services/api/recordFileService";
+import { RadioGroup, RadioGroupItem } from "@/shared/common/ui/radio-group";
+import { Label } from "@/shared/common/ui/label";
+import { motion } from "framer-motion";
+import { useUser } from "@/shared/context/UserContext";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { Textarea } from "@/shared/common/ui/textarea";
+import { ComplaintVerifiedInfoPanel } from "@/complaints/components/ComplaintVerifiedInfoPanel";
+import {
+  clearComplaintVerification,
+  getComplaintVerification,
+} from "@/complaints/utils/complaintVerificationStorage";
+import { COMPLAINT_RECORDS_PATH } from "@/complaints/utils/complaintRoutes";
+import {
+  unitConfigurationService,
+  type CanReceiveComplaintResponse,
+} from "@/shared/services/unitConfigurationService";
+import {
+  getExternalPortalReceivingUnitName,
+  resolveExternalPortalReceivingUnitIds,
+} from "@/external-portal/config/receivingOrganization";
+import {
+  PortalFieldLabel,
+  PortalFormHeader,
+  PortalFormSection,
+  PortalReadOnlyField,
+} from "../shared/PortalFormPrimitives";
+import { ArrowLeft, Building2, Send } from "lucide-react";
+
+interface AddIncomingRecordPortalFormProps {
+  onSuccess?: () => void;
+  onCancel?: () => void;
+}
+
+const SubmitExternalRecordForm = ({
+  onSuccess,
+  onCancel,
+}: AddIncomingRecordPortalFormProps) => {
+  const { t, i18n } = useTranslation();
+  const complaintSession = getComplaintVerification();
+  const isComplaintMode = complaintSession !== null;
+  const hasAuthToken = Boolean(Cookies.get("auth-token"));
+
+  const [canReceiveComplaintConfig, setCanReceiveComplaintConfig] =
+    useState<CanReceiveComplaintResponse | null>(null);
+  const [isLoadingCanReceiveComplaintConfig, setIsLoadingCanReceiveComplaintConfig] =
+    useState(false);
+
+  type FormValues = CreateLetterFormValues & {
+    description?: string;
+    recipient?: string;
+  };
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(
+      (isComplaintMode
+        ? createComplaintLetterSchema
+        : createLetterSchema) as typeof createLetterSchema,
+    ) as Resolver<FormValues>,
+    defaultValues: (isComplaintMode
+      ? defaultCreateComplaintLetterValues
+      : defaultCreateLetterValues) as FormValues,
+    mode: "onChange",
+  });
+
+  const [showRegistrationAlert, setShowRegistrationAlert] = useState(false);
+  const userDetails = useUser();
+  const { handleError } = useErrorHandler(t);
+  const hasCompletedRegistration = userDetails?.hasFinishedRegistration;
+  const { createExternalPortalLetter, isSending } = useExternalPortal();
+  const [files, setFiles] = useState<File[]>([]);
+  const [mainFileIndex, setMainFileIndex] = useState<number | null>(null);
+  const navigate = useNavigate();
+  const handleCancel = onCancel ?? (() => navigate(COMPLAINT_RECORDS_PATH));
+  const complaintReceivingUnitId = resolveExternalPortalReceivingUnitIds()[0];
+  const receivingOrganizationName = getExternalPortalReceivingUnitName(
+    i18n.language,
+  );
+
+  useEffect(() => {
+    if (!hasCompletedRegistration && !isComplaintMode) {
+      setShowRegistrationAlert(true);
+    } else {
+      setShowRegistrationAlert(false);
+    }
+  }, [hasCompletedRegistration, isComplaintMode]);
+
+  // Complaint receiving unit is the configured target unit (not the submitter's unit).
+  useEffect(() => {
+    if (!isComplaintMode) return;
+    if (!hasAuthToken) return;
+    if (!complaintReceivingUnitId) return;
+
+    let isCancelled = false;
+    const load = async () => {
+      try {
+        setIsLoadingCanReceiveComplaintConfig(true);
+        const res = await unitConfigurationService.getCanReceiveComplaint(
+          complaintReceivingUnitId,
+        );
+
+        if (isCancelled) return;
+        setCanReceiveComplaintConfig(res.data);
+      } catch (err) {
+        if (isCancelled) return;
+        setCanReceiveComplaintConfig(null);
+        toast.error(
+          t(
+            "complaint.receiveCheckFailed",
+            "Could not verify complaint receiving for this unit. Please try again.",
+          ),
+        );
+      } finally {
+        if (!isCancelled) {
+          setIsLoadingCanReceiveComplaintConfig(false);
+        }
+      }
+    };
+
+    load();
+    return () => {
+      isCancelled = true;
+    };
+  }, [complaintReceivingUnitId, hasAuthToken, isComplaintMode, t]);
+
+  useEffect(() => {
+    if (!isComplaintMode) return;
+    if (!hasAuthToken) return;
+    if (!canReceiveComplaintConfig) return;
+
+    if (canReceiveComplaintConfig.canReceiveComplaint === false) {
+      toast.error(
+        t(
+          "complaint.receiveDisabled",
+          "Complaint receiving is disabled for this unit.",
+        ),
+      );
+      navigate(COMPLAINT_RECORDS_PATH);
+    }
+  }, [
+    canReceiveComplaintConfig,
+    hasAuthToken,
+    isComplaintMode,
+    navigate,
+    t,
+  ]);
+
+  useEffect(() => {
+    if (files.length === 1) {
+      setMainFileIndex(0);
+    }
+  }, [files]);
+
+  const buildComplaintSubject = (
+    subject: string,
+    recipient?: string,
+    description?: string,
+  ) => {
+    let composed = subject.trim();
+    if (recipient?.trim()) {
+      composed = `[To: ${recipient.trim()}] ${composed}`;
+    }
+    if (description?.trim()) {
+      composed = `${composed}\n\n${description.trim()}`;
+    }
+    return composed;
+  };
+
+  const isAllowedMainFile = (file: File) => {
+    if (!isComplaintMode) {
+      return file.type === "application/pdf";
+    }
+    return (
+      file.type === "application/pdf" ||
+      file.type === "image/jpeg" ||
+      file.type === "image/png"
+    );
+  };
+
+  const onSubmit = async (values: FormValues) => {
+    if (files.length === 0) {
+      toast.error(t("userRecord.Please select file"));
+      return;
+    }
+
+    if (mainFileIndex === null) {
+      toast.error(t("Please select the main file for the record"));
+      return;
+    }
+
+    const mainFile = files[mainFileIndex];
+    const fileInfo = {
+      fileName: mainFile.name,
+      contentType: mainFile.type,
+      size: mainFile.size,
+      originalname: mainFile.name,
+    };
+
+    const unitIds = isComplaintMode
+      ? [complaintReceivingUnitId]
+      : resolveExternalPortalReceivingUnitIds();
+
+    if (isComplaintMode) {
+      if (isLoadingCanReceiveComplaintConfig) {
+        toast.error(
+          t(
+            "complaint.receiveCheckInProgress",
+            "Still verifying complaint receiving for this unit. Please wait.",
+          ),
+        );
+        return;
+      }
+
+      if (!canReceiveComplaintConfig) {
+        toast.error(
+          t(
+            "complaint.receiveCheckFailed",
+            "Could not verify complaint receiving for this unit. Please try again.",
+          ),
+        );
+        return;
+      }
+
+      if (canReceiveComplaintConfig.canReceiveComplaint === false) {
+        toast.error(
+          t(
+            "complaint.receiveDisabled",
+            "Complaint receiving is disabled for this unit.",
+          ),
+        );
+        return;
+      }
+    }
+
+    if (!complaintReceivingUnitId && isComplaintMode) {
+      toast.error(
+        t(
+          "complaint.receiveCheckFailed",
+          "Could not verify complaint receiving for this unit. Please try again.",
+        ),
+      );
+      return;
+    }
+
+    if (!isAllowedMainFile(mainFile)) {
+      toast.error(
+        isComplaintMode
+          ? t("complaint.fayda.uploadHint")
+          : t("userRecord.The main file must be a PDF document"),
+      );
+      return;
+    }
+
+    const letterNumber =
+      values.letterNumber?.trim() ||
+      (isComplaintMode ? `CMP-${Date.now()}` : "");
+
+    if (!letterNumber) {
+      toast.error(t("userRecord.Letter Number"));
+      return;
+    }
+
+    const subject = isComplaintMode
+      ? buildComplaintSubject(
+          values.subject,
+          values.recipient,
+          values.description,
+        )
+      : values.subject;
+
+    try {
+      const recordResult = await createExternalPortalLetter(
+        {
+          ...values,
+          subject,
+          fileInfo,
+          unitIds,
+          letterNumber,
+        },
+        mainFile,
+      );
+      const contentId = recordResult.contentId;
+
+      if (!contentId) {
+        throw new Error("Missing contentId from created record");
+      }
+
+      form.reset();
+      setFiles([]);
+      setMainFileIndex(null);
+
+      const attachments = files.filter((_, idx) => idx !== mainFileIndex);
+      if (attachments.length > 0) {
+        try {
+          await Promise.all(
+            attachments.map(async (attachment) => {
+              const uploadMetaResult = await recordFileService.uploadMeta(
+                attachment,
+                attachment.name,
+                contentId,
+              );
+
+              await recordFileService.uploadFile(
+                attachment,
+                uploadMetaResult.presigned,
+              );
+              await recordFileService.updateStatus(
+                uploadMetaResult.id,
+                contentId,
+                true,
+              );
+            }),
+          );
+        } catch (error: unknown) {
+          handleError(error);
+        }
+      }
+
+      toast.success(
+        isComplaintMode
+          ? t("complaint.success")
+          : t("externalPortal.letterSentSuccess"),
+      );
+      if (isComplaintMode) {
+        clearComplaintVerification();
+      }
+      onSuccess?.();
+      navigate(COMPLAINT_RECORDS_PATH);
+    } catch (error) {
+      await handleError(error);
+    }
+  };
+
+  const handleGoToDocuments = () => {
+    navigate("/external-portal/upload-documents");
+    setShowRegistrationAlert(false);
+  };
+
+  return (
+    <>
+      {showRegistrationAlert && (
+        <motion.div
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -20 }}
+          className="bg-yellow-50 border-l-4 border-yellow-400 p-4">
+          <div className="flex items-center justify-between max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="flex items-start">
+              <div className="flex-shrink-0">
+                <svg
+                  className="h-5 w-5 text-yellow-400"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor">
+                  <path
+                    fillRule="evenodd"
+                    d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              </div>
+              <div className="ml-3">
+                <p className="text-sm text-yellow-700">
+                  You haven't completed the verification process. Please upload
+                  required documents to continue.
+                </p>
+              </div>
+            </div>
+            <div className="ml-4 flex-shrink-0">
+              <button
+                onClick={handleGoToDocuments}
+                className="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-md shadow-sm text-white bg-yellow-600 hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500">
+                Upload Documents
+              </button>
+            </div>
+          </div>
+        </motion.div>
+      )}
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-6"
+          aria-labelledby="form-title">
+          {isComplaintMode ? (
+            <button
+              type="button"
+              onClick={() => navigate(COMPLAINT_RECORDS_PATH)}
+              className="inline-flex items-center gap-2 text-sm font-medium text-slate-600 transition-colors hover:text-primary"
+            >
+              <ArrowLeft className="h-4 w-4" />
+              {t("complaint.fayda.backToMyRecords")}
+            </button>
+          ) : null}
+
+          <PortalFormHeader
+            title={
+              isComplaintMode
+                ? t("complaint.formTitle")
+                : t("userIncoming.uploadIncomingRecord")
+            }
+            subtitle={
+              isComplaintMode ? t("complaint.fayda.formSubtitle") : undefined
+            }
+          />
+
+          {complaintSession ? (
+            <ComplaintVerifiedInfoPanel session={complaintSession} />
+          ) : null}
+
+          <PortalFormSection className="w-full min-w-0 max-w-full space-y-5 overflow-visible">
+            {!isComplaintMode ? (
+              <PortalReadOnlyField
+                label={t("userIncoming.Receiving Organization")}
+                value={receivingOrganizationName}
+                icon={Building2}
+              />
+            ) : null}
+
+            <FormField
+              control={form.control}
+              name="subject"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel asChild>
+                    <PortalFieldLabel required>
+                      {t("userIncoming.Subject")}
+                    </PortalFieldLabel>
+                  </FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={t("userIncoming.Subject")}
+                      className="h-11 rounded-lg border-slate-200 focus-visible:ring-primary/20"
+                      {...field}
+                      disabled={isSending}
+                      aria-required="true"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {isComplaintMode ? (
+              <FormField
+                control={form.control}
+                name="description"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel asChild>
+                      <PortalFieldLabel required>
+                        {t("complaint.fayda.description")}
+                      </PortalFieldLabel>
+                    </FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder={t(
+                          "complaint.fayda.descriptionPlaceholder",
+                        )}
+                        className="min-h-[160px] resize-none rounded-lg border-slate-200 focus-visible:ring-primary/20"
+                        {...field}
+                        disabled={isSending}
+                        aria-required="true"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            ) : null}
+
+            {!isComplaintMode ? (
+              <FormField
+                control={form.control}
+                name="letterNumber"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel asChild>
+                      <PortalFieldLabel required>
+                        {t("userRecord.Letter Number")}
+                      </PortalFieldLabel>
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder={t("userRecord.Letter Number")}
+                        className="h-11 rounded-lg border-slate-200 focus-visible:ring-primary/20"
+                        {...field}
+                        disabled={isSending}
+                        aria-required="true"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            ) : null}
+
+            <div>
+              <PortalFieldLabel required>
+                {isComplaintMode
+                  ? t("complaint.fayda.attachment")
+                  : t("userIncoming.Attachments")}
+              </PortalFieldLabel>
+              <div className="mt-2 rounded-xl border-2 border-dashed border-slate-200 bg-slate-50/50 p-2 transition-colors hover:border-primary/40">
+                <ReusableFileUploader
+                  files={files}
+                  setFiles={setFiles}
+                  isLoading={isSending}
+                />
+              </div>
+            </div>
+
+            {files.length > 0 && (
+              <div>
+                <PortalFieldLabel required>
+                  {t("Select the main file for the record")}
+                </PortalFieldLabel>
+                <RadioGroup
+                  className="mt-2"
+                  value={mainFileIndex?.toString() || ""}
+                  onValueChange={(value) => setMainFileIndex(Number(value))}
+                  aria-required="true">
+                  {files.map((file, index) => (
+                    <div key={file.name} className="flex items-center space-x-2">
+                      <RadioGroupItem
+                        value={index.toString()}
+                        id={`main-file-${index}`}
+                      />
+                      <Label htmlFor={`main-file-${index}`}>{file.name}</Label>
+                    </div>
+                  ))}
+                </RadioGroup>
+              </div>
+            )}
+          </PortalFormSection>
+
+          <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:items-center sm:justify-between">
+            <p className="text-xs text-slate-500">{t("common.requiredFields")}</p>
+            <div className="flex w-full flex-col gap-3 sm:w-auto sm:flex-row">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={handleCancel}
+                disabled={isSending}
+                className="h-11 min-w-[8rem] rounded-lg">
+                {t("common.Cancel")}
+              </Button>
+              <Button
+                type="submit"
+                disabled={
+                  !form.formState.isValid ||
+                  isSending ||
+                  files.length === 0 ||
+                  (isComplaintMode &&
+                    (isLoadingCanReceiveComplaintConfig ||
+                      canReceiveComplaintConfig?.canReceiveComplaint !== true))
+                }
+                className="h-11 min-w-[10rem] rounded-lg bg-primary hover:bg-primary/90">
+                {isSending ? (
+                  t("userIncoming.Processing...")
+                ) : (
+                  <span className="inline-flex items-center gap-2">
+                    {isComplaintMode ? t("complaint.submit") : t("common.Submit")}
+                    {isComplaintMode ? <Send className="h-4 w-4" /> : null}
+                  </span>
+                )}
+              </Button>
+            </div>
+          </div>
+        </form>
+      </Form>
+    </>
+  );
+};
+
+export default SubmitExternalRecordForm;
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/components/shared/PortalFormPrimitives.tsx b/apps/edr-freight-web/backoffice/src/external-portal/components/shared/PortalFormPrimitives.tsx
new file mode 100644
index 000000000..36fd4a837
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/components/shared/PortalFormPrimitives.tsx
@@ -0,0 +1,104 @@
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "@/shared/common/ui/fileUploader/utils";
+
+export function PortalFormPage({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("min-h-screen bg-slate-50 py-8 md:py-10", className)}>
+      <div className="mx-auto w-full max-w-3xl px-4 md:px-6">{children}</div>
+    </div>
+  );
+}
+
+export function PortalFormHeader({
+  title,
+  subtitle,
+}: {
+  title: string;
+  subtitle?: string;
+}) {
+  return (
+    <div className="mb-8 text-center">
+      <h1
+        id="form-title"
+        className="text-2xl font-bold tracking-tight text-slate-900 md:text-3xl">
+        {title}
+      </h1>
+      {subtitle ? (
+        <p className="mt-2 text-sm text-slate-600 md:text-base">{subtitle}</p>
+      ) : null}
+    </div>
+  );
+}
+
+export function PortalFormSection({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <section
+      className={cn(
+        "rounded-xl border border-slate-200 bg-white p-5 shadow-sm md:p-6",
+        className,
+      )}>
+      {children}
+    </section>
+  );
+}
+
+export function PortalFieldLabel({
+  children,
+  required,
+}: {
+  children: ReactNode;
+  required?: boolean;
+}) {
+  return (
+    <span className="text-xs font-semibold uppercase tracking-wider text-slate-500">
+      {children}
+      {required ? <span className="ml-0.5 text-red-600">*</span> : null}
+    </span>
+  );
+}
+
+export function PortalReadOnlyField({
+  label,
+  value,
+  icon: Icon,
+  mono = false,
+}: {
+  label: string;
+  value?: string;
+  icon?: LucideIcon;
+  mono?: boolean;
+}) {
+  if (!value) return null;
+
+  return (
+    <div className="space-y-1.5">
+      <PortalFieldLabel>{label}</PortalFieldLabel>
+      <div className="relative">
+        {Icon ? (
+          <Icon className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
+        ) : null}
+        <div
+          className={cn(
+            "rounded-lg border border-slate-200 bg-white py-2.5 text-sm text-slate-800",
+            Icon ? "pl-10 pr-3" : "px-3",
+            mono && "font-mono",
+          )}>
+          {value}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/components/signUp.tsx b/apps/edr-freight-web/backoffice/src/external-portal/components/signUp.tsx
new file mode 100644
index 000000000..1876f2d9d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/components/signUp.tsx
@@ -0,0 +1,248 @@
+import { Input } from "@/shared/common/ui/input";
+import { Button } from "@/shared/common/ui/button";
+import { Lock, User, Mail, Phone, Globe, Building, Text } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { userSchema, UserFormValues } from "./outgoing/formSchema";
+import { useRegisterExternalPortalUser } from "../hooks/useRegisterExternalPortalUser";
+import { useTenantConfig } from "@/layout/components/TenantConfig";
+
+const Signup = () => {
+  const navigate = useNavigate();
+  const { config: tenantConfig } = useTenantConfig();
+  const { registerExternalPortalUser, isRegistering } =
+    useRegisterExternalPortalUser();
+
+  const form = useForm<UserFormValues>({
+    resolver: zodResolver(userSchema),
+    defaultValues: {
+      email: "",
+      username: "",
+      phoneNumber: "",
+      userType: "external_organization",
+      name: {
+        am: "",
+        en: "",
+      },
+    },
+    mode: "onChange",
+  });
+
+  const onSubmit = async (values: UserFormValues) => {
+    try {
+      await registerExternalPortalUser(values);
+      const params = new URLSearchParams();
+      if (values.email) params.set("email", values.email.trim());
+      if (values.phoneNumber) {
+        const normalizedPhone = values.phoneNumber.trim().replace(/^0/, "+251");
+        params.set("phone", normalizedPhone);
+      }
+      navigate(`/external-portal/verify-otp?${params.toString()}`);
+    } catch (error) {
+      console.error("Signup error:", error);
+      
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center p-4">
+      <div className="w-full max-w-6xl bg-white rounded-2xl shadow-xl overflow-hidden flex flex-col md:flex-row h-full max-h-[800px]">
+        {/* Left Panel */}
+        <div className="md:w-1/2 w-full p-8 md:p-12 flex flex-col">
+          <div className="flex items-center mb-8">
+            <img
+              src={tenantConfig.logo || "/assets/smart-office-logo.svg"}
+              alt={tenantConfig.appName}
+              className="h-10 object-contain"
+            />
+            <span className="ml-2 text-xl font-semibold text-gray-800">
+              {tenantConfig.appName}
+            </span>
+          </div>
+
+          <div className="mb-8">
+            <h1 className="text-3xl font-bold text-gray-900 mb-2">
+              Create Organization Account
+            </h1>
+            <p className="text-gray-500">
+              Streamline your workflow with our paperless solution
+            </p>
+          </div>
+
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="space-y-6 flex-1 flex flex-col"
+          >
+            <div className="space-y-4">
+              <div className="relative">
+                <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                <Input
+                  type="email"
+                  placeholder="Organization Email"
+                  className="h-12 rounded-lg border-gray-300 pl-10 text-base focus-visible:ring-2 focus-visible:ring-primary"
+                  {...form.register("email")}
+                />
+              </div>
+
+              <div className="relative">
+                <User className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                <Input
+                  type="text"
+                  placeholder="Organization Username"
+                  className="h-12 rounded-lg border-gray-300 pl-10 text-base focus-visible:ring-2 focus-visible:ring-primary"
+                  {...form.register("username")}
+                />
+              </div>
+
+              <div className="relative">
+                <Phone className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                <Input
+                  type="tel"
+                  placeholder="Organization Phone Number"
+                  className="h-12 rounded-lg border-gray-300 pl-10 text-base focus-visible:ring-2 focus-visible:ring-primary"
+                  {...form.register("phoneNumber")}
+                />
+              </div>
+
+              <div className="relative">
+                <Text className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                <Input
+                  type="text"
+                  placeholder="Organization Name (English)"
+                  className="h-12 rounded-lg border-gray-300 pl-10 text-base focus-visible:ring-2 focus-visible:ring-primary"
+                  {...form.register("name.en")}
+                />
+              </div>
+
+              <div className="relative">
+                <Text className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+                <Input
+                  type="text"
+                  placeholder="Organization Name (Amharic)"
+                  className="h-12 rounded-lg border-gray-300 pl-10 text-base focus-visible:ring-2 focus-visible:ring-primary"
+                  {...form.register("name.am")}
+                />
+              </div>
+            </div>
+
+            <div className="mt-auto pt-4">
+              <Button
+                type="submit"
+                className="w-full h-12 bg-primary hover:bg-primary-700 text-white text-base font-medium rounded-lg transition-all duration-300 shadow-md hover:shadow-lg"
+                disabled={isRegistering}
+              >
+                {isRegistering ? (
+                  <span className="flex items-center justify-center">
+                    <svg
+                      className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                    >
+                      <circle
+                        className="opacity-25"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        strokeWidth="4"
+                      ></circle>
+                      <path
+                        className="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                      ></path>
+                    </svg>
+                    Creating Account...
+                  </span>
+                ) : (
+                  "Sign Up"
+                )}
+              </Button>
+
+              <p className="text-center text-sm text-gray-500 mt-4">
+                Already have an account?{" "}
+                <a
+                  href="/login"
+                  className="text-primary hover:underline font-medium"
+                >
+                  Sign in
+                </a>
+              </p>
+            </div>
+          </form>
+        </div>
+
+        {/* Right Panel */}
+        <div className="md:w-1/2 bg-gradient-to-br from-primary to-primary-300 text-white p-10 hidden md:flex flex-col">
+          <div className="mb-8">
+            <h2 className="text-3xl font-bold mb-4">
+              Transform Your Office Experience
+            </h2>
+            <p className="text-lg opacity-90">
+              Join thousands of organizations that have gone paperless with our
+              smart solutions.
+            </p>
+          </div>
+
+          <div className="relative flex-1 flex items-center justify-center">
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="w-64 h-64 rounded-full bg-white/10 blur-xl"></div>
+            </div>
+
+            <div className="relative z-10 w-full max-w-md">
+              <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20 shadow-xl">
+                <div className="flex items-center mb-4">
+                  <Building className="w-8 h-8 mr-3" />
+                  <h3 className="text-xl font-semibold">
+                    Organization Dashboard
+                  </h3>
+                </div>
+                <div className="space-y-3">
+                  <div className="flex items-center">
+                    <div className="w-3 h-3 rounded-full bg-primary-400 mr-2"></div>
+                    <span>Real-time document management</span>
+                  </div>
+                  <div className="flex items-center">
+                    <div className="w-3 h-3 rounded-full bg-blue-400 mr-2"></div>
+                    <span>Secure cloud storage</span>
+                  </div>
+                  <div className="flex items-center">
+                    <div className="w-3 h-3 rounded-full bg-purple-400 mr-2"></div>
+                    <span>Automated workflow</span>
+                  </div>
+                  <div className="flex items-center">
+                    <div className="w-3 h-3 rounded-full bg-yellow-400 mr-2"></div>
+                    <span>Multi-language support</span>
+                  </div>
+                </div>
+              </div>
+
+              <div className="mt-8 relative">
+                <img
+                  src="/assets/MainDashboard.png"
+                  alt="Dashboard Preview"
+                  className="w-full rounded-xl shadow-2xl border-4 border-white/20"
+                />
+                <div className="absolute -bottom-4 -right-4 bg-white p-2 rounded-lg shadow-lg">
+                  <img
+                    src="/assets/StatsCard.png"
+                    alt="Stats Preview"
+                    className="w-24 h-24 rounded-md"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="mt-auto pt-6 text-center text-sm opacity-80">
+            <p>Trusted by 500+ organizations worldwide</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Signup;
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/components/verifyOTP.tsx b/apps/edr-freight-web/backoffice/src/external-portal/components/verifyOTP.tsx
new file mode 100644
index 000000000..deea9baab
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/components/verifyOTP.tsx
@@ -0,0 +1,468 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Link, useSearchParams, useNavigate } from "react-router-dom";
+import { motion } from "framer-motion";
+import {
+  ShieldCheck,
+  ArrowLeft,
+  RefreshCcw,
+  EyeOff,
+  Eye,
+  Lock,
+} from "lucide-react";
+import { Button } from "@/shared/common/ui/button";
+import { Card, CardContent, CardHeader } from "@/shared/common/ui/card";
+import { Input } from "@/shared/common/ui/input";
+import { cn } from "@/shared/lib/utils";
+import { GenerateVerifcationCodePayload } from "@/shared/services/authService";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { useTradeLicenseVerification } from "../hooks/useTradeLicenseVerification";
+import { getEtradeLicenseNo } from "../utils/etradeAuthStorage";
+
+interface VerifyOtpProps {
+  email?: string;
+  phone?: string;
+  onComplete?: () => void;
+  isExternalOrg?: boolean;
+  userId?: string;
+  isEtradeVerification?: boolean;
+  licenseNo?: string;
+}
+
+const OTP_LENGTH = 6;
+const RESEND_COOLDOWN_SECONDS = 30;
+
+const VerifyOtp: React.FC<VerifyOtpProps> = ({
+  email,
+  phone,
+  onComplete,
+  isExternalOrg,
+  userId: propUserId,
+  isEtradeVerification,
+  licenseNo,
+}: VerifyOtpProps) => {
+  const [searchParams] = useSearchParams();
+
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [otpValues, setOtpValues] = useState<string[]>(
+    Array(OTP_LENGTH).fill("")
+  );
+  const userID = propUserId || searchParams.get("userId") || "";
+  const resolvedLicenseNo =
+    licenseNo?.trim() ||
+    searchParams.get("licenseNo")?.trim() ||
+    getEtradeLicenseNo() ||
+    "";
+  const [message, setMessage] = useState<{
+    type: "success" | "error";
+    text: string;
+  } | null>(null);
+  const [error, setError] = useState("");
+  const [resendLoading, setResendLoading] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [cooldown, setCooldown] = useState(0);
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const inputsRef = useRef<Array<HTMLInputElement | null>>([]);
+  const [hasNavigated, setHasNavigated] = useState(false);
+  const requersOtp =
+    isExternalOrg || searchParams.get("isExternalOrg") === "true";
+  const {
+    setPassword,
+    setFayidaPassword,
+    resendOtpCode,
+    setPasswordSuccess,
+    setPasswordError,
+  } = useAuthUser();
+  const { verifyEtradeOtp, isVerifyingOtp } = useTradeLicenseVerification();
+
+  useEffect(() => {
+    inputsRef.current[0]?.focus();
+  }, []);
+
+  useEffect(() => {
+    if (cooldown <= 0) return;
+    const t = setInterval(() => setCooldown((s) => (s > 0 ? s - 1 : 0)), 1000);
+    return () => clearInterval(t);
+  }, [cooldown]);
+
+  useEffect(() => {
+    if (setPasswordSuccess && !setPasswordError?.message && !hasNavigated) {
+      setMessage({
+        type: "success",
+        text: t("registration.verifyOtp.messages.success"),
+      });
+      setHasNavigated(true);
+      onComplete?.();
+      navigate("/verification_page");
+    }
+  }, [setPasswordSuccess, setPasswordError]);
+
+  useEffect(() => {
+    if (setPasswordError?.message) {
+      setMessage({
+        type: "error",
+        text: setPasswordError.message.includes("OTP")
+          ? setPasswordError.message
+          : t("registration.verifyOtp.messages.passwordUpdateFailed"),
+      });
+    }
+  }, [setPasswordError]);
+
+  const focusInput = (idx: number) => {
+    inputsRef.current[idx]?.focus();
+    inputsRef.current[idx]?.select?.();
+  };
+
+  const handleOtpChange = (idx: number, value: string) => {
+    const char = value.replace(/[^a-zA-Z0-9]/g, "").slice(0, 1);
+    if (!char) return;
+
+    const updated = [...otpValues];
+    updated[idx] = char;
+    setOtpValues(updated);
+
+    if (idx < OTP_LENGTH - 1) {
+      setTimeout(() => focusInput(idx + 1), 10); // give DOM time to settle
+    }
+  };
+
+  const handleOtpKeyDown = (
+    idx: number,
+    e: React.KeyboardEvent<HTMLInputElement>
+  ) => {
+    if (e.key === "Backspace") {
+      if (otpValues[idx]) {
+        setOtpValues((prev) => {
+          const next = [...prev];
+          next[idx] = "";
+          return next;
+        });
+      } else if (idx > 0) {
+        focusInput(idx - 1);
+      }
+    } else if (e.key === "ArrowLeft" && idx > 0) {
+      focusInput(idx - 1);
+    } else if (e.key === "ArrowRight" && idx < OTP_LENGTH - 1) {
+      focusInput(idx + 1);
+    }
+  };
+
+  const handleOtpPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+    const pasted = e.clipboardData.getData("text").replace(/\D/g, "");
+    if (!pasted) return;
+    e.preventDefault();
+    setOtpValues(
+      Array(OTP_LENGTH)
+        .fill("")
+        .map((_, i) => pasted[i] ?? "")
+    );
+    const lastIndex = Math.min(pasted.length, OTP_LENGTH) - 1;
+    focusInput(lastIndex >= 0 ? lastIndex : 0);
+  };
+
+  const handleResend = async () => {
+    if (!email && !phone) {
+      setMessage({
+        type: "error",
+        text: t("registration.verifyOtp.messages.missingEmailPhone"),
+      });
+      toast.error(t("registration.verifyOtp.errors.missingUserId"));
+      return;
+    }
+    setResendLoading(true);
+    try {
+      const payload = {
+        email: email || "",
+        phoneNumber: phone || "",
+      } satisfies GenerateVerifcationCodePayload;
+      await resendOtpCode(payload);
+      setMessage({
+        type: "success",
+        text: t("registration.verifyOtp.messages.verificationCodeResent"),
+      });
+      setCooldown(RESEND_COOLDOWN_SECONDS);
+    } catch (err) {
+      setMessage({
+        type: "error",
+        text: t("registration.verifyOtp.messages.resendFailed"),
+      });
+      toast.error(t("registration.verifyOtp.errors.resendFailed"));
+    } finally {
+      setResendLoading(false);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setError("");
+    setMessage(null);
+
+    if (!isEtradeVerification) {
+      if (!newPassword || !confirmPassword) {
+        setError(t("registration.verifyOtp.messages.fillPasswords"));
+        setIsSubmitting(false);
+        return;
+      }
+      if (newPassword.length < 8) {
+        setError(t("registration.verifyOtp.messages.passwordLength"));
+        setIsSubmitting(false);
+        return;
+      }
+      if (newPassword !== confirmPassword) {
+        setError(t("registration.verifyOtp.messages.passwordMismatch"));
+        setIsSubmitting(false);
+        return;
+      }
+    }
+    if (requersOtp) {
+      const code = otpValues.join("");
+
+      if (isEtradeVerification) {
+        if (!resolvedLicenseNo) {
+          setError(t("registration.etrade.licenseNoRequired"));
+          setIsSubmitting(false);
+          return;
+        }
+        if (code.length !== OTP_LENGTH || !/^[a-zA-Z0-9]{6}$/.test(code)) {
+          setError(t("registration.verifyOtp.messages.invalidOtp"));
+          setIsSubmitting(false);
+          return;
+        }
+
+        try {
+          await verifyEtradeOtp({
+            licenseNo: resolvedLicenseNo,
+            otp: code,
+          });
+          onComplete?.();
+          navigate("/login");
+        } catch (err) {
+          setError(t("registration.verifyOtp.messages.invalidOtp"));
+        }
+        setIsSubmitting(false);
+        return;
+      }
+
+      if (code.length !== OTP_LENGTH || !/^[a-zA-Z0-9]{6}$/.test(code)) {
+        setError(t("registration.verifyOtp.messages.invalidOtp"));
+        setIsSubmitting(false);
+        return;
+      }
+
+      if (!email && !phone) {
+        setError(t("registration.verifyOtp.messages.missingEmailPhone"));
+        setIsSubmitting(false);
+        return;
+      }
+      const passwordPayload: any = {
+        email: email || "",
+        verificationCode: code,
+        newPassword,
+        confirmPassword,
+      };
+      if (userID) {
+        passwordPayload.userId = userID;
+      }
+      await setPassword(passwordPayload);
+    } else {
+      await setFayidaPassword({
+        userId: userID,
+        newPassword,
+        confirmPassword,
+      });
+      navigate("/login");
+    }
+    setIsSubmitting(false);
+  };
+
+  const pageFade = { initial: { opacity: 0 }, animate: { opacity: 1 } };
+
+  return (
+    <motion.div
+      {...pageFade}
+      className="min-h-screen w-full bg-gradient-to-b from-background to-muted/30 flex items-center justify-center p-4">
+      <Card className="w-full max-w-md shadow-xl border-0">
+        <CardHeader className="text-center">
+          <img
+            src="/assets/smart-office-logo.svg"
+            alt="Smart Office Logo"
+            className="h-10 mx-auto mb-2"
+          />
+          <h1 className="text-2xl font-bold">
+            {t("registration.verifyOtp.title")}
+          </h1>
+          <p className="text-sm text-muted-foreground">
+            {isEtradeVerification
+              ? t("registration.etrade.otpVerificationDescription")
+              : t("registration.verifyOtp.description", {
+                  channel: email
+                    ? t("registration.verifyOtp.channel.email")
+                    : t("registration.verifyOtp.channel.phone"),
+                })}
+          </p>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {requersOtp && (
+            <div className="flex justify-center gap-2">
+              {Array.from({ length: OTP_LENGTH }).map((_, idx) => (
+                <Input
+                  key={idx}
+                  ref={(el) => {
+                    inputsRef.current[idx] = el;
+                  }}
+                  inputMode="text"
+                  pattern="[a-zA-Z0-9]{1}"
+                  maxLength={1}
+                  value={otpValues[idx]}
+                  onChange={(e) => handleOtpChange(idx, e.target.value)}
+                  onKeyDown={(e) => handleOtpKeyDown(idx, e)}
+                  onPaste={handleOtpPaste}
+                  className="w-10 h-12 text-center text-xl tracking-widest"
+                  aria-label={t("registration.verifyOtp.otpInput.ariaLabel", {
+                    index: idx + 1,
+                  })}
+                />
+              ))}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {!isEtradeVerification && (
+              <>
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <Lock className="h-5 w-5 text-gray-400" />
+              </div>
+              <Input
+                type={showPassword ? "text" : "password"}
+                placeholder={t("registration.verifyOtp.password.newPassword")}
+                className="h-10 rounded-md border px-4 text-sm ps-10"
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                required
+              />
+              <div
+                className="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer"
+                onClick={() => setShowPassword(!showPassword)}>
+                {showPassword ? (
+                  <EyeOff className="h-4 w-4 text-gray-400" />
+                ) : (
+                  <Eye className="h-4 w-4 text-gray-400" />
+                )}
+              </div>
+            </div>
+
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <Lock className="h-5 w-5 text-gray-400" />
+              </div>
+              <Input
+                type={showConfirmPassword ? "text" : "password"}
+                placeholder={t(
+                  "registration.verifyOtp.password.confirmPassword"
+                )}
+                className="h-10 rounded-md border px-4 text-sm ps-10"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                required
+              />
+              <div
+                className="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer"
+                onClick={() => setShowConfirmPassword(!showConfirmPassword)}>
+                {showConfirmPassword ? (
+                  <EyeOff className="h-4 w-4 text-gray-400" />
+                ) : (
+                  <Eye className="h-4 w-4 text-gray-400" />
+                )}
+              </div>
+            </div>
+              </>
+            )}
+
+            {error && <p className="text-sm text-red-500">{error}</p>}
+
+            <div className="flex flex-col gap-2">
+              <Button
+                type="submit"
+                className="w-full"
+                disabled={isSubmitting || isVerifyingOtp}>
+                {isSubmitting || isVerifyingOtp
+                  ? t("registration.verifyOtp.buttons.verifying")
+                  : isEtradeVerification
+                    ? t("registration.verifyOtp.buttons.verifyOtp")
+                    : t("registration.verifyOtp.buttons.completeRegistration")}
+              </Button>
+            </div>
+          </form>
+          {!isEtradeVerification && (
+          <Button
+            variant="outline"
+            className="w-full"
+            onClick={() => void handleResend()}
+            disabled={resendLoading || cooldown > 0}
+            aria-label={
+              resendLoading
+                ? t("registration.verifyOtp.buttons.resendLoading")
+                : cooldown > 0
+                ? t("registration.verifyOtp.buttons.resendCooldown", {
+                    seconds: cooldown,
+                  })
+                : t("registration.verifyOtp.buttons.resendCode")
+            }>
+            {resendLoading ? (
+              <span className="inline-flex items-center gap-2">
+                <RefreshCcw className="h-4 w-4 animate-spin" />
+                {t("registration.verifyOtp.buttons.resending")}
+              </span>
+            ) : cooldown > 0 ? (
+              t("registration.verifyOtp.buttons.resendIn", {
+                seconds: cooldown,
+              })
+            ) : (
+              t("registration.verifyOtp.buttons.resendCode")
+            )}
+          </Button>
+          )}
+          <div className="min-h-12" aria-live="polite" aria-atomic="true">
+            {message && (
+              <motion.div
+                initial={{ opacity: 0, y: -8 }}
+                animate={{ opacity: 1, y: 0 }}
+                className={cn(
+                  "p-3 rounded-lg flex items-start gap-3",
+                  message.type === "success"
+                    ? "bg-primary-50 text-primary-700"
+                    : "bg-red-50 text-red-700"
+                )}>
+                <ShieldCheck
+                  className={cn(
+                    "h-5 w-5 flex-shrink-0 mt-0.5",
+                    message.type === "success"
+                      ? "text-primary-500"
+                      : "text-red-500"
+                  )}
+                />
+                <p className="text-sm font-medium">{message.text}</p>
+              </motion.div>
+            )}
+          </div>
+          <div className="text-center text-sm">
+            <Link
+              to="/support/resend-sms"
+              className="text-muted-foreground hover:text-foreground">
+              {t("registration.verifyOtp.support.needHelp")}
+            </Link>
+          </div>
+        </CardContent>
+      </Card>
+    </motion.div>
+  );
+};
+
+export default VerifyOtp;
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/config/receivingOrganization.ts b/apps/edr-freight-web/backoffice/src/external-portal/config/receivingOrganization.ts
new file mode 100644
index 000000000..42d81601d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/config/receivingOrganization.ts
@@ -0,0 +1,25 @@
+/**
+ * Default receiving organization for external-portal / complaint submissions.
+ *
+ * Change `unitKey` and `unitId` here when routing complaints to a different unit.
+ * `unitKey` should match the unit key from your organization API.
+ */
+export const EXTERNAL_PORTAL_RECEIVING_UNIT = {
+  unitKey: "adwa_victory_vemorial_museum",
+  unitId: "8524ba74-6df6-4632-9515-7903cc93c229",
+  name: {
+    am: "የዓድዋ ድል መታሰቢያ ሙዚየም",
+    en: "Adwa Victory Memorial Museum",
+  },
+} as const;
+
+export function resolveExternalPortalReceivingUnitIds(): string[] {
+  return [EXTERNAL_PORTAL_RECEIVING_UNIT.unitId];
+}
+
+export function getExternalPortalReceivingUnitName(language = "en"): string {
+  if (language === "am") {
+    return EXTERNAL_PORTAL_RECEIVING_UNIT.name.am;
+  }
+  return EXTERNAL_PORTAL_RECEIVING_UNIT.name.en;
+}
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/hooks/useCreateExternalLetterRecord.ts b/apps/edr-freight-web/backoffice/src/external-portal/hooks/useCreateExternalLetterRecord.ts
new file mode 100644
index 000000000..8dc2ae4a9
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/hooks/useCreateExternalLetterRecord.ts
@@ -0,0 +1,107 @@
+import { CreateLetterDto } from "@/shared/dto/External-Portal/External-PortalDto";
+import { useState } from "react";
+import {
+  createExternalLetterRecord,
+  externalParam,
+  getExternalLetterRecord,
+} from "../services/portalOutgoingService";
+import { nonSmartOfficeFileService } from "@/record-management/services/api/nonSmartOfficeFileService";
+import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { fetchLetterById } from "@/record-management/services/api/userRecordService";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+export interface CreateLetterResult {
+  recordId: string;
+  contentId: string;
+  fileInfo: {
+    bucket: string;
+    fileName: string;
+    contentType: string;
+    originalname: string;
+    size: number;
+  };
+  presigned: string;
+}
+
+export const useExternalPortal = (params?: externalParam) => {
+  const [isSending, setIsSending] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  const createExternalPortalLetter = async (
+    values: CreateLetterDto,
+    file: File,
+  ): Promise<CreateLetterResult> => {
+    let recordId: string | null = null;
+    try {
+      setIsSending(true);
+
+      const createRes = await createExternalLetterRecord(values);
+      recordId = createRes.data.recordId;
+      const { presigned: uploadUrl } = createRes.data;
+
+      if (!recordId || !uploadUrl) {
+        return Promise.reject(new Error("Failed to create record"));
+      }
+
+      await nonSmartOfficeFileService.uploadFile(file, uploadUrl);
+      await nonSmartOfficeFileService.updateStatus(recordId, true);
+
+      setIsUploading(true);
+
+      // Return the record information here
+      return createRes.data;
+    } catch (error) {
+      // If upload failed, mark status as false
+      if (recordId) {
+        try {
+          await nonSmartOfficeFileService.updateStatus(recordId, false);
+        } catch (statusError) {
+          await handleError(statusError);
+        }
+      }
+      return Promise.reject(error);
+    } finally {
+      setIsSending(false);
+      setIsUploading(false);
+    }
+  };
+
+  const {
+    data: externalLettersData = [],
+    isLoading: isFetchingLetters,
+    isError,
+    refetch,
+  } = useQuery({
+    queryKey: ["external-letters", params],
+    queryFn: async () => {
+      const res = await getExternalLetterRecord(params);
+      return res.data; // adjust if you need metadata too
+    },
+  });
+
+  const ExternalLetters = externalLettersData.items || [];
+  const ExternalCount = externalLettersData.count || 0;
+
+  return {
+    createExternalPortalLetter,
+    ExternalLetters,
+    ExternalCount,
+    isFetchingLetters,
+    isError,
+    refetchExternalLetters: refetch,
+    isSending,
+    isUploading,
+  };
+};
+
+export const attachmentResponse = (id: string) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  return useQuery({
+    queryKey: ["record-pdf", id],
+    queryFn: () => fetchLetterById(id),
+    enabled: !!id,
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/hooks/useDocumentUploads.ts b/apps/edr-freight-web/backoffice/src/external-portal/hooks/useDocumentUploads.ts
new file mode 100644
index 000000000..78f87a825
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/hooks/useDocumentUploads.ts
@@ -0,0 +1,95 @@
+import {
+  CreateUserDto,
+  DocumentPayloadDto,
+  DocumentResponseDto,
+} from "@/shared/dto/External-Portal/External-PortalDto";
+import { docuemntUpload, getMyUploads, registerExternalUser, UpdateMyUpload, UpdateMyUploadStatus } from "../services/portalOutgoingService";
+import { useState } from "react";
+import { nonSmartOfficeFileService } from "@/record-management/services/api/nonSmartOfficeFileService";
+import { useQuery } from "@tanstack/react-query";
+
+type documentProps = {
+  userId?:string ;
+}
+
+
+
+export const useDocumentUploads = () => {
+  const [isRegistering, setIsRegistering] = useState(false);
+  const [isUpdating, setIsUpdating] = useState(false);
+
+ const uploadDocuments = async (payload: DocumentPayloadDto, file: File) => {
+   let uploadId: string | null = null;
+   try {
+     // Step 1: Get presigned URL
+     const uploadRes = await docuemntUpload(payload);
+     const { presigned, id } = uploadRes.data;
+
+     if (!id || !presigned) {
+       throw new Error("Failed to get upload URL");
+     }
+
+     uploadId = id;
+
+     // Step 2: Upload file to S3 using presigned URL
+     await nonSmartOfficeFileService.uploadFile(file, presigned);
+
+     // Step 3: Update upload status to success
+     await UpdateMyUploadStatus(id, true);
+
+     return uploadRes.data;
+   } catch (error) {
+     // If upload failed, mark status as false
+     if (uploadId) {
+       try {
+         await UpdateMyUploadStatus(uploadId, false);
+       } catch (statusError) {
+         console.error("Failed to update upload status:", statusError);
+       }
+     }
+     throw error;
+   }
+ };
+
+ const updateDocuemnts = async (Id:string, values:DocumentPayloadDto,file:File) => {
+   let uploadId: string | null = null;
+   try {
+     const uploadRes = await UpdateMyUpload(Id, values);
+     const { presigned, id } = uploadRes.data;
+     if (!id || !presigned) {
+       return Promise.reject(new Error("Failed to Upload Document"));
+     }
+
+     uploadId = id;
+
+     await nonSmartOfficeFileService.uploadFile(file, presigned);
+
+     // Update upload status to success
+     await UpdateMyUploadStatus(id, true);
+     setIsUpdating(true);
+     return uploadRes.data;
+   } catch (error) {
+     // If upload failed, mark status as false
+     if (uploadId) {
+       try {
+         await UpdateMyUploadStatus(uploadId, false);
+       } catch (statusError) {
+         console.error("Failed to update upload status:", statusError);
+       }
+     }
+     setIsUpdating(false);
+     throw error;
+   }
+ };
+
+
+
+
+  return {
+    uploadDocuments,
+    isRegistering,
+    isUpdating,
+    updateDocuemnts,
+  
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/hooks/useMyUpload.ts b/apps/edr-freight-web/backoffice/src/external-portal/hooks/useMyUpload.ts
new file mode 100644
index 000000000..932fd0042
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/hooks/useMyUpload.ts
@@ -0,0 +1,29 @@
+import { useQuery } from "@tanstack/react-query";
+import { getMyUploadById, getMyUploads } from "../services/portalOutgoingService";
+import { FileInfo } from "@/shared/services/complaintService";
+
+export interface Upload {
+  id: string;
+  documentId: string;
+  createdAt: string; // ISO date string
+  fileInfo: FileInfo; // refine if you know the shape
+}
+
+
+// Fetch list of uploads by userId
+export const useMyUploads = () => {
+  return useQuery<Upload[]>({
+    queryKey: ["myUploads"],
+    queryFn: getMyUploads,
+  });
+};
+
+
+// Fetch single upload by documentId
+export const useMyUploadById = (docId: string) => {
+  return useQuery({
+    queryKey: ["myUpload", docId],
+    queryFn: () => getMyUploadById(docId).then((res) => res),
+    enabled: !!docId,
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/hooks/useRegisterExternalPortalUser.ts b/apps/edr-freight-web/backoffice/src/external-portal/hooks/useRegisterExternalPortalUser.ts
new file mode 100644
index 000000000..f9b0d49e2
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/hooks/useRegisterExternalPortalUser.ts
@@ -0,0 +1,47 @@
+import { CreateUserDto, FayidaUserDto } from "@/shared/dto/External-Portal/External-PortalDto";
+import {
+  registerExternalUser,
+  registerFayidaUser,
+} from "../services/portalOutgoingService";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+export const useRegisterExternalPortalUser = () => {
+  const [isRegistering, setIsRegistering] = useState(false);
+  const [isFayidaRegistering, setIsFayidaRegistering] = useState(false);
+
+   const { t } = useTranslation();
+const { handleError } = useErrorHandler(t)
+  const registerExternalPortalUser = async (values: CreateUserDto) => {
+    try {
+      setIsRegistering(true);
+      const response = await registerExternalUser(values);
+      return { success: true, response };
+    } catch (error: any) {
+      
+      handleError(error)
+      setIsRegistering(false);
+     
+    } finally {
+      setIsRegistering(false);
+    }
+  };
+const registerExternalFayidaUser = async (values: FayidaUserDto) => {
+  try {
+    setIsFayidaRegistering(true);
+    const response = await registerFayidaUser(values);
+    return { success: true, response };
+  } catch (error: any) {
+    handleError(error);
+  } finally {
+    setIsFayidaRegistering(false);
+  }
+};
+  return {
+    registerExternalPortalUser,
+    registerExternalFayidaUser,
+    isRegistering,
+    isFayidaRegistering,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/hooks/useTradeLicenseVerification.ts b/apps/edr-freight-web/backoffice/src/external-portal/hooks/useTradeLicenseVerification.ts
new file mode 100644
index 000000000..6a38b4131
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/hooks/useTradeLicenseVerification.ts
@@ -0,0 +1,77 @@
+import { useMutation } from "@tanstack/react-query";
+import type { AxiosResponse } from "axios";
+import { toast } from "sonner";
+import {
+  registerTradeLicense,
+  setETradePassword,
+  SetETradePasswordPayload,
+  TradeLicensePayload,
+  verifyEtradeOtpCode,
+} from "../services/portalOutgoingService";
+import type { VerifyEtradeOtpPayload } from "@/shared/services/authService";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { useTranslation } from "react-i18next";
+
+export const useTradeLicenseVerification = () => {
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  const registerMutation = useMutation<AxiosResponse, unknown, TradeLicensePayload>(
+    {
+      mutationFn: (body) => registerTradeLicense(body),
+      onSuccess: () => {
+        toast.success(t("registration.etrade.otpSent"));
+      },
+      onError: (error) => {
+        if (
+          error instanceof Error &&
+          error.message === "ETRADE_PHONE_LOOKUP_FAILED"
+        ) {
+          toast.error(t("registration.etrade.phoneLookupFailed"));
+          return;
+        }
+        handleError(error);
+      },
+    },
+  );
+
+  const verifyOtpMutation = useMutation<
+    AxiosResponse,
+    unknown,
+    VerifyEtradeOtpPayload
+  >({
+    mutationFn: (body) => verifyEtradeOtpCode(body),
+    onSuccess: () => {
+      toast.success(t("registration.etrade.registrationSuccess"));
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const passwordMutation = useMutation<
+    AxiosResponse,
+    unknown,
+    SetETradePasswordPayload
+  >({
+    mutationFn: (body) => setETradePassword(body),
+    onSuccess: () => {
+      toast.success("Password set successfully");
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  return {
+    registerTradeLicense: registerMutation.mutateAsync,
+    verifyEtradeOtp: verifyOtpMutation.mutateAsync,
+    setETradePassword: passwordMutation.mutateAsync,
+    isRegistering: registerMutation.isPending,
+    isVerifyingOtp: verifyOtpMutation.isPending,
+    isSettingPassword: passwordMutation.isPending,
+    registerResponse: registerMutation.data,
+    verifyOtpResponse: verifyOtpMutation.data,
+    passwordResponse: passwordMutation.data,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/pages/OtpVerificationPage.tsx b/apps/edr-freight-web/backoffice/src/external-portal/pages/OtpVerificationPage.tsx
new file mode 100644
index 000000000..d74048c02
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/pages/OtpVerificationPage.tsx
@@ -0,0 +1,5 @@
+// import VerifyOtp from "../components/verifyOTP";
+
+// export const OtpVerificationPage = () => {
+//     return <VerifyOtp />;
+//     // }
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/pages/PortalOutgoingPage.tsx b/apps/edr-freight-web/backoffice/src/external-portal/pages/PortalOutgoingPage.tsx
new file mode 100644
index 000000000..31ff42644
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/pages/PortalOutgoingPage.tsx
@@ -0,0 +1,5 @@
+import PortalOutgoing from "../components/outgoing/portalOutgoing"
+
+export const PortalOutgoingPage =()=>{
+    return <PortalOutgoing/>
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/pages/SignUpPage.tsx b/apps/edr-freight-web/backoffice/src/external-portal/pages/SignUpPage.tsx
new file mode 100644
index 000000000..9efca4437
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/pages/SignUpPage.tsx
@@ -0,0 +1,5 @@
+import Signup from "../components/signUp"
+
+export const SignUpPage = ()=>{
+    return <Signup/>
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/pages/SubmitExternalRecordFormPage.tsx b/apps/edr-freight-web/backoffice/src/external-portal/pages/SubmitExternalRecordFormPage.tsx
new file mode 100644
index 000000000..8e21c7e95
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/pages/SubmitExternalRecordFormPage.tsx
@@ -0,0 +1,16 @@
+import { useNavigate } from "react-router-dom";
+import SubmitExternalRecordForm from "../components/outgoing/submitExternalRecords";
+import { PortalFormPage } from "../components/shared/PortalFormPrimitives";
+import { COMPLAINT_RECORDS_PATH } from "@/complaints/utils/complaintRoutes";
+
+export const SubmitExternalRecordFormPage = () => {
+  const navigate = useNavigate();
+
+  return (
+    <PortalFormPage>
+      <SubmitExternalRecordForm
+        onCancel={() => navigate(COMPLAINT_RECORDS_PATH)}
+      />
+    </PortalFormPage>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/pages/UploadStepsPage.tsx b/apps/edr-freight-web/backoffice/src/external-portal/pages/UploadStepsPage.tsx
new file mode 100644
index 000000000..19d3c57a1
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/pages/UploadStepsPage.tsx
@@ -0,0 +1,6 @@
+
+const UploadStepsPage = () => {
+  return (<div></div>);
+};
+
+export default UploadStepsPage;
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/pages/VerificationPendingPage.tsx b/apps/edr-freight-web/backoffice/src/external-portal/pages/VerificationPendingPage.tsx
new file mode 100644
index 000000000..ecaf314a0
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/pages/VerificationPendingPage.tsx
@@ -0,0 +1,32 @@
+import React, { useEffect } from "react";
+import VerificationPending from "../components/External-Portal-Navigation/VerificationPending";
+import LandingPage from "../../layout/landingpage";
+import Cookies from "js-cookie";
+import { useUser } from "@/shared/context/UserContext";
+export default function VerificationPendingPage() {
+  const userDetails = useUser();
+  const hasCompletedRegistration = userDetails?.hasFinishedRegistration;
+  // Remove token cookie after 15 minutes
+  useEffect(() => {
+    if (!hasCompletedRegistration) {
+      const timer = setTimeout(() => {
+        Cookies.remove("auth-token");
+      }, 15 * 60 * 1000); // 15 minutes in milliseconds
+
+      return () => clearTimeout(timer); // cleanup if the component unmounts
+    }
+  }, [hasCompletedRegistration]);
+  // If registration is finished → show landing page
+  if (hasCompletedRegistration) {
+    return <LandingPage />;
+  }
+
+  // Otherwise → show pending page
+  return (
+    <VerificationPending
+      hasCompletedRegistration={!!hasCompletedRegistration}
+      contactNumber="+251 955232323"
+      email="info@triaplc.com"
+    />
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/pages/ViewExternalRecordPage.tsx b/apps/edr-freight-web/backoffice/src/external-portal/pages/ViewExternalRecordPage.tsx
new file mode 100644
index 000000000..f1f70dd47
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/pages/ViewExternalRecordPage.tsx
@@ -0,0 +1,41 @@
+import { useNavigate, useParams } from "react-router-dom";
+import ViewExternalRecord from "../components/ViewExternalRecord";
+import { attachmentResponse } from "../hooks/useCreateExternalLetterRecord";
+import { useEffect } from "react";
+
+const ViewExternalRecordPage: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+
+  // Verify we have a valid ID
+  if (!id) {
+    return <div className="p-4 text-red-500">Error: Invalid record ID</div>;
+  }
+
+  const { data: attachment, isLoading, error } = attachmentResponse(id); // Fixed: using id instead of undefined itemId
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+  }, [attachment, isLoading, error]);
+
+  if (isLoading) {
+    return <div className="p-4 text-center">Loading record...</div>;
+  }
+
+  if (error) {
+    return (
+      <div className="p-4 text-center text-red-500">
+        Error loading record: {error.message}
+      </div>
+    );
+  }
+
+  return (
+    <ViewExternalRecord
+      itemId={id}
+      onBack={() => navigate("/external-portal/portal-outgoing")}
+    />
+  );
+};
+
+export default ViewExternalRecordPage;
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/pages/landingPage.tsx b/apps/edr-freight-web/backoffice/src/external-portal/pages/landingPage.tsx
new file mode 100644
index 000000000..7f8bcef51
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/pages/landingPage.tsx
@@ -0,0 +1,5 @@
+import LandingPageLayout from "../components/landingOutlet";
+
+export const LandingPage =()=>{
+    return <LandingPageLayout />;
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/services/portalOutgoingService.ts b/apps/edr-freight-web/backoffice/src/external-portal/services/portalOutgoingService.ts
new file mode 100644
index 000000000..df13af448
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/services/portalOutgoingService.ts
@@ -0,0 +1,249 @@
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import {
+  CreateLetterDto,
+  CreateUserDto,
+  DocumentPayloadDto,
+  FayidaUserDto,
+} from "@/shared/dto/External-Portal/External-PortalDto";
+import axiosInstance from "@/shared/services/axiosInstance";
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+import { AxiosResponse } from "axios";
+import { id } from "date-fns/locale";
+import Cookies from "js-cookie";
+import { Upload } from "../hooks/useMyUpload";
+import { FileInfo } from "@/shared/services/complaintService";
+import {
+  registerWithFayda,
+  registerWithEtrade,
+  SetFayidaPasswordPayload,
+  verifyEtradeOtp,
+  type VerifyEtradeOtpPayload,
+} from "@/shared/services/authService";
+import { resolveEtradePhoneForSignup } from "@/complaints/services/etradeTinService";
+
+export interface LatestUploadInfo {
+  docId: string;
+  uploadId: string | null;
+  fileInfo: FileInfo;
+  presigned: string;
+}
+export interface TradeLicensePayload {
+  tin: string;
+  licenseNo: string;
+  phoneNumber?: string;
+}
+
+/** @deprecated Use TradeLicensePayload */
+export interface TradeLicenseSigninPayload {
+  mode: "signin";
+  licenseNo: string;
+}
+
+/** @deprecated Use TradeLicensePayload */
+export interface TradeLicenseSignupPayload {
+  mode: "signup";
+  tin: string;
+  licenseNo: string;
+}
+export interface SetETradePasswordPayload {
+  licenseNo: string;
+  verificationCode: string;
+  newPassword: string;
+  confirmPassword: string;
+}
+
+export interface UploadDetails {
+  presigned: string;
+  // add other fields if needed
+}
+
+export interface externalParam {
+  skip?: number;
+  take?: number;
+  order?: string;
+  orderBy?: string;
+}
+export const createExternalLetterRecord = async (
+  body: CreateLetterDto,
+): Promise<any> => {
+  return recordAxiosInstance.post("/records/self-non-smart-record-pdf", body, {
+    headers: withHeaders(),
+  });
+};
+
+export const registerExternalUser = async (
+  body: CreateUserDto,
+): Promise<AxiosResponse> => {
+  return axiosInstance.post("/auth/signup", body, {
+    headers: withHeaders(),
+  });
+};
+export const registerFayidaUser = async (
+  body: FayidaUserDto,
+): Promise<AxiosResponse> => {
+  return registerWithFayda(body);
+};
+
+export const signinFayidaUser = async (
+  body: FayidaUserDto,
+): Promise<AxiosResponse> => {
+  return registerWithFayda(body);
+};
+
+export const signupFayidaUser = async (
+  body: FayidaUserDto,
+): Promise<AxiosResponse> => {
+  return registerWithFayda(body);
+};
+
+export const getExternalLetterRecord = async (
+  params?: externalParam,
+): Promise<AxiosResponse> => {
+  return recordAxiosInstance.get("/records/self-non-smart-records", {
+    params,
+    headers: withHeaders(),
+  });
+};
+
+export const docuemntUpload = async (
+  body: DocumentPayloadDto,
+): Promise<AxiosResponse> => {
+  return axiosInstance.post("/user-documents", body, {
+    headers: withHeaders(),
+  });
+};
+
+export const submitApplication = async (): Promise<any[]> => {
+  const token = Cookies.get("auth-token");
+  // get token from wherever you store it
+  if (!token) return [];
+  try {
+    const response = await axiosInstance.patch("/users/submit-application", {
+      headers: withHeaders(),
+    });
+    return response.data?.items ?? []; // assuming API returns { items: [...] }
+  } catch (err) {
+    console.error("Failed to fetch user uploads", err);
+    return []; // fallback to empty array on error
+  }
+};
+
+export const getMyUploads = async (): Promise<Upload[]> => {
+  const token = Cookies.get("auth-token");
+  // get token from wherever you store it
+  if (!token) return []; // return empty if no token
+
+  try {
+    const response = await axiosInstance.get("/user-documents/mine/", {
+      headers: withHeaders(),
+    });
+    return response.data?.items ?? []; // assuming API returns { items: [...] }
+  } catch (err) {
+    console.error("Failed to fetch user uploads", err);
+    return []; // fallback to empty array on error
+  }
+};
+
+export const getMyUploadedFiles = async (
+  id: string,
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/user-documents/list-with-presigned/${id}`, {
+    headers: withHeaders(),
+  });
+};
+
+export const getMineUploadedFiles = async (): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/user-documents/mine-with-presigned`, {
+    headers: withHeaders(),
+  });
+};
+
+export const getMyUploadById = async (id: string): Promise<UploadDetails> => {
+  return axiosInstance.get(`/user-documents/${id}`, {
+    headers: withHeaders(),
+  });
+};
+
+export const UpdateMyUpload = async (
+  id: string,
+  body: DocumentPayloadDto,
+): Promise<AxiosResponse> => {
+  return axiosInstance.put(
+    `/user-documents/${id}`,
+    { body },
+    {
+      headers: withHeaders(),
+    },
+  );
+};
+
+export const UpdateMyUploadStatus = async (
+  id: string,
+  uploadedSuccessfully: boolean,
+): Promise<AxiosResponse> => {
+  return axiosInstance.patch(
+    `/user-documents/${id}/upload-status`,
+    { uploadedSuccessfully },
+    {
+      headers: withHeaders(),
+    },
+  );
+};
+
+export const registerTradeLicense = async (
+  body: TradeLicensePayload,
+): Promise<AxiosResponse> => {
+  let phoneNumber = body.phoneNumber?.trim() || undefined;
+
+  if (!phoneNumber && body.tin?.trim() && body.licenseNo?.trim()) {
+    try {
+      const resolved = await resolveEtradePhoneForSignup(
+        body.licenseNo,
+        body.tin,
+        "en",
+      );
+      phoneNumber = resolved ?? undefined;
+    } catch (error) {
+      console.warn(
+        "[eTrade] Failed to resolve phone from GetBusinessByLicenseNo",
+        error,
+      );
+    }
+  }
+
+  return registerWithEtrade({
+    tin: body.tin,
+    licenseNumber: body.licenseNo,
+    ...(phoneNumber ? { phoneNumber } : {}),
+  });
+};
+
+export const signinTradeLicense = async (body: {
+  licenseNo: string;
+  tin?: string;
+}): Promise<AxiosResponse> =>
+  registerTradeLicense({
+    tin: body.tin ?? "",
+    licenseNo: body.licenseNo,
+  });
+
+export const signupTradeLicense = async (body: {
+  tin: string;
+  licenseNo: string;
+}): Promise<AxiosResponse> =>
+  registerTradeLicense({
+    tin: body.tin,
+    licenseNo: body.licenseNo,
+  });
+
+export const verifyEtradeOtpCode = async (
+  body: VerifyEtradeOtpPayload,
+): Promise<AxiosResponse> => verifyEtradeOtp(body);
+
+export const setETradePassword = async (
+  body: SetETradePasswordPayload,
+): Promise<AxiosResponse> => {
+  return axiosInstance.patch("/auth/set-etrade-password", body, {
+    headers: withHeaders(),
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/utils/etradeAuthStorage.ts b/apps/edr-freight-web/backoffice/src/external-portal/utils/etradeAuthStorage.ts
new file mode 100644
index 000000000..dc78b3b3b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/utils/etradeAuthStorage.ts
@@ -0,0 +1,17 @@
+const ETRADE_LICENSE_NO_KEY = "etrade-auth-license-no";
+
+/** Persist license number for the eTrade OTP verification step. */
+export function storeEtradeLicenseNo(licenseNo: string): void {
+  if (typeof sessionStorage === "undefined") return;
+  sessionStorage.setItem(ETRADE_LICENSE_NO_KEY, licenseNo.trim());
+}
+
+export function getEtradeLicenseNo(): string | null {
+  if (typeof sessionStorage === "undefined") return null;
+  return sessionStorage.getItem(ETRADE_LICENSE_NO_KEY);
+}
+
+export function clearEtradeLicenseNo(): void {
+  if (typeof sessionStorage === "undefined") return;
+  sessionStorage.removeItem(ETRADE_LICENSE_NO_KEY);
+}
diff --git a/apps/edr-freight-web/backoffice/src/external-portal/utils/etradeValidation.ts b/apps/edr-freight-web/backoffice/src/external-portal/utils/etradeValidation.ts
new file mode 100644
index 000000000..fcacee575
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/external-portal/utils/etradeValidation.ts
@@ -0,0 +1,15 @@
+export function normalizeTin(value: string): string {
+  return value.replace(/\D/g, "").slice(0, 10);
+}
+
+export function isValidTin(tin: string): boolean {
+  return /^\d{10}$/.test(tin.trim());
+}
+
+export function normalizeLicenseNo(value: string): string {
+  return value.trim();
+}
+
+export function isValidLicenseNo(licenseNo: string): boolean {
+  return normalizeLicenseNo(licenseNo).length > 0;
+}
diff --git a/apps/edr-freight-web/backoffice/src/features/clearance/requestedCargo.tsx b/apps/edr-freight-web/backoffice/src/features/clearance/requestedCargo.tsx
new file mode 100644
index 000000000..07fcab924
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/features/clearance/requestedCargo.tsx
@@ -0,0 +1,89 @@
+import { Badge, Group, Text, Tooltip } from "@mantine/core";
+import { Boxes, Container, Weight } from "lucide-react";
+import type { Freight } from "@edr/types";
+
+/**
+ * Compact human summary of a shipment request's requested cargo lines — the
+ * quantities the customer asked for, before GL enters the real booking cargo.
+ * Container contracts read "2 × 20ft, 1 × 40ft"; bulk reads "500 t" or
+ * "300 items" depending on the contract's cargo configuration.
+ */
+export function summarizeRequestedCargo(
+  lines?: Freight.RequestedShipmentLines | null,
+): string {
+  if (!lines) return "—";
+  const containers = (lines.containers ?? []).filter((c) => (c.quantity ?? 0) > 0);
+  if (containers.length) {
+    return containers.map((c) => `${c.quantity} × ${c.containerSize}`).join(", ");
+  }
+  if (lines.bulk) {
+    if (lines.bulk.cargoWeightTons) return `${lines.bulk.cargoWeightTons} t`;
+    if (lines.bulk.itemCount) return `${lines.bulk.itemCount} items`;
+  }
+  return "—";
+}
+
+/** Renders the requested cargo as small badges (per container type, or bulk). */
+export function RequestedCargoChips({
+  lines,
+  size = "sm",
+}: {
+  lines?: Freight.RequestedShipmentLines | null;
+  size?: "xs" | "sm";
+}) {
+  const containers = (lines?.containers ?? []).filter((c) => (c.quantity ?? 0) > 0);
+
+  if (containers.length) {
+    return (
+      <Group gap={6} wrap="wrap">
+        {containers.map((c, i) => {
+          const flags: string[] = [];
+          if ((c.hazardousQuantity ?? 0) > 0)
+            flags.push(`${c.hazardousQuantity} hazardous`);
+          if ((c.reeferQuantity ?? 0) > 0)
+            flags.push(`${c.reeferQuantity} reefer`);
+          const chip = (
+            <Badge
+              size={size}
+              variant="light"
+              color="edr-green"
+              radius="sm"
+              leftSection={<Container size={12} />}
+            >
+              {c.quantity} × {c.containerSize}
+            </Badge>
+          );
+          return flags.length ? (
+            <Tooltip key={i} label={flags.join(" · ")} withArrow>
+              {chip}
+            </Tooltip>
+          ) : (
+            <span key={i}>{chip}</span>
+          );
+        })}
+      </Group>
+    );
+  }
+
+  if (lines?.bulk && (lines.bulk.cargoWeightTons || lines.bulk.itemCount)) {
+    const isWeight = Boolean(lines.bulk.cargoWeightTons);
+    const value = lines.bulk.cargoWeightTons ?? lines.bulk.itemCount ?? 0;
+    return (
+      <Badge
+        size={size}
+        variant="light"
+        color="edr-green"
+        radius="sm"
+        leftSection={isWeight ? <Weight size={12} /> : <Boxes size={12} />}
+      >
+        {value} {isWeight ? "t" : "items"}
+      </Badge>
+    );
+  }
+
+  return (
+    <Text size="xs" c="dimmed">
+      —
+    </Text>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/features/contracts/mapContractListRow.ts b/apps/edr-freight-web/backoffice/src/features/contracts/mapContractListRow.ts
index 69c394927..0cd842830 100644
--- a/apps/edr-freight-web/backoffice/src/features/contracts/mapContractListRow.ts
+++ b/apps/edr-freight-web/backoffice/src/features/contracts/mapContractListRow.ts
@@ -80,7 +80,7 @@ export function toContractListRow(contract: Freight.IContract): ContractListRow
     approvalSteps: contract.approvalSteps,
     customerLabel: contract.isGovernment
       ? (contract.governmentInstitution ?? "Government")
-      : (contract.companyId ?? "—"),
+      : (contract.company?.name ?? "—"),
     status: contract.status,
     contractKind: contract.contractKind,
     tradeDirection: contract.tradeDirection,
diff --git a/apps/edr-freight-web/backoffice/src/features/contracts/mapShipmentListRow.ts b/apps/edr-freight-web/backoffice/src/features/contracts/mapShipmentListRow.ts
index 766c04ee1..9e58e84bc 100644
--- a/apps/edr-freight-web/backoffice/src/features/contracts/mapShipmentListRow.ts
+++ b/apps/edr-freight-web/backoffice/src/features/contracts/mapShipmentListRow.ts
@@ -9,6 +9,12 @@ export interface ShipmentListRow {
   summary: string;
   status: Freight.BookingRequestStatus;
   createdBookingId?: string | null;
+  /** When the customer submitted the request — the queue's default sort key. */
+  createdAt?: string | null;
+  customerName?: string | null;
+  freightKind?: "CONTAINER" | "BULK";
+  hazardous?: boolean;
+  reefer?: boolean;
 }
 
 export type ShipmentRowAction =
diff --git a/apps/edr-freight-web/backoffice/src/hooks/contract-templates/useContractTemplates.ts b/apps/edr-freight-web/backoffice/src/hooks/contract-templates/useContractTemplates.ts
new file mode 100644
index 000000000..7e01d883c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/hooks/contract-templates/useContractTemplates.ts
@@ -0,0 +1,98 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import toast from "react-hot-toast";
+
+import {
+  contractTemplatesService,
+  type ArticlePayload,
+  type UpdateContractTemplatePayload,
+} from "@/services/contract-templates.service";
+
+const KEYS = {
+  ROOT: ["contract-templates"] as const,
+  list: () => ["contract-templates", "list"] as const,
+  byCode: (code: string) => ["contract-templates", "detail", code] as const,
+  preview: (code: string) => ["contract-templates", "preview", code] as const,
+};
+
+export function useContractTemplates() {
+  return useQuery({
+    queryKey: KEYS.list(),
+    queryFn: () => contractTemplatesService.list(),
+  });
+}
+
+export function useContractTemplate(code: string | undefined) {
+  return useQuery({
+    queryKey: KEYS.byCode(code ?? ""),
+    queryFn: () => contractTemplatesService.getByCode(code as string),
+    enabled: Boolean(code),
+  });
+}
+
+/** Rendered mock-data HTML preview of the template's saved state. */
+export function useContractTemplatePreview(code: string | undefined, enabled = true) {
+  return useQuery({
+    queryKey: KEYS.preview(code ?? ""),
+    queryFn: () => contractTemplatesService.preview(code as string),
+    enabled: Boolean(code) && enabled,
+    staleTime: 0,
+  });
+}
+
+function useTemplateMutation<TVariables>(
+  mutationFn: (vars: TVariables) => Promise<unknown>,
+  successMessage: string,
+) {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn,
+    onSuccess: () => {
+      toast.success(successMessage);
+      void queryClient.invalidateQueries({ queryKey: KEYS.ROOT });
+    },
+    onError: (error: unknown) => {
+      const message =
+        (error as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Something went wrong";
+      toast.error(Array.isArray(message) ? message.join(", ") : message);
+    },
+  });
+}
+
+export function useUpdateContractTemplate(code: string) {
+  return useTemplateMutation(
+    (payload: UpdateContractTemplatePayload) =>
+      contractTemplatesService.update(code, payload),
+    "Template updated",
+  );
+}
+
+export function useAddArticle(code: string) {
+  return useTemplateMutation(
+    (payload: ArticlePayload) => contractTemplatesService.addArticle(code, payload),
+    "Article added",
+  );
+}
+
+export function useUpdateArticle(code: string) {
+  return useTemplateMutation(
+    (vars: { articleId: string; payload: Partial<ArticlePayload> }) =>
+      contractTemplatesService.updateArticle(code, vars.articleId, vars.payload),
+    "Article updated",
+  );
+}
+
+export function useRemoveArticle(code: string) {
+  return useTemplateMutation(
+    (articleId: string) => contractTemplatesService.removeArticle(code, articleId),
+    "Article removed",
+  );
+}
+
+export function useReplaceArticles(code: string) {
+  return useTemplateMutation(
+    (articles: Array<{ id?: string; title: string; body: string }>) =>
+      contractTemplatesService.replaceArticles(code, articles),
+    "Articles reordered",
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/hooks/contracts/useContracts.ts b/apps/edr-freight-web/backoffice/src/hooks/contracts/useContracts.ts
index 69e4e1739..076316114 100644
--- a/apps/edr-freight-web/backoffice/src/hooks/contracts/useContracts.ts
+++ b/apps/edr-freight-web/backoffice/src/hooks/contracts/useContracts.ts
@@ -214,6 +214,27 @@ export function useContractMutations(contractId: string) {
     onError: () => toast.error("Failed to create booking"),
   });
 
+  const completeBooking = useMutation({
+    mutationFn: ({
+      bookingId,
+      payload,
+    }: {
+      bookingId: string;
+      payload: Freight.CreateBookingUnderContractDto;
+    }) =>
+      contractsService.completeBookingUnderContract(
+        contractId,
+        bookingId,
+        payload,
+      ),
+    onSuccess: () => {
+      toast.success("Booking completed");
+      void invalidateContractDetail(qc, contractId);
+    },
+    onError: (e: Error) =>
+      toast.error(e.message || "Failed to complete booking"),
+  });
+
   const isPending =
     staffAccept.isPending ||
     requestChanges.isPending ||
@@ -233,6 +254,7 @@ export function useContractMutations(contractId: string) {
     generateContract,
     signContract,
     createBooking,
+    completeBooking,
     isPending,
   };
 }
diff --git a/apps/edr-freight-web/backoffice/src/hooks/useWarehouses.ts b/apps/edr-freight-web/backoffice/src/hooks/useWarehouses.ts
index 2c5af46ab..5ed88d5ac 100644
--- a/apps/edr-freight-web/backoffice/src/hooks/useWarehouses.ts
+++ b/apps/edr-freight-web/backoffice/src/hooks/useWarehouses.ts
@@ -236,8 +236,6 @@ export function useEligibleBookings(enabled = true) {
 }
 export const useBulkReceive = () =>
   useInventoryMutation((payload: BulkReceivePayload) => warehouseService.receiveBulk(payload));
-export const useLoadPassedExport = () =>
-  useInventoryMutation(() => warehouseService.loadPassedExport());
 export const useBulkMarkInspected = () =>
   useInventoryMutation((payload: BulkInspectPayload) => warehouseService.bulkMarkInspected(payload));
 
diff --git a/apps/edr-freight-web/backoffice/src/i18n/index.ts b/apps/edr-freight-web/backoffice/src/i18n/index.ts
new file mode 100644
index 000000000..cf45f7def
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/i18n/index.ts
@@ -0,0 +1,48 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+
+// Locale bundles live inside this app (src/locales) so they're part of the
+// package and survive `turbo prune` in the Docker build.
+import en from "../locales/en/translation.json";
+import am from "../locales/am/translation.json";
+import af from "../locales/af/translation.json";
+import fr from "../locales/fr/translation.json";
+import or from "../locales/or/translation.json";
+import sm from "../locales/sm/translation.json";
+import tg from "../locales/tg/translation.json";
+
+export const SUPPORTED_LANGUAGES = ["en", "am", "af", "fr", "or", "sm", "tg"] as const;
+
+/**
+ * i18next singleton for the vendored IAM UI (shared/super-admin/
+ * user-management), imported as `@/i18n`. Loads the shared translation bundles
+ * and enables language detection/persistence so the header language switcher
+ * (i18n.changeLanguage) works and survives reloads.
+ */
+if (!i18n.isInitialized) {
+  void i18n
+    .use(LanguageDetector)
+    .use(initReactI18next)
+    .init({
+      resources: {
+        en: { translation: en },
+        am: { translation: am },
+        af: { translation: af },
+        fr: { translation: fr },
+        or: { translation: or },
+        sm: { translation: sm },
+        tg: { translation: tg },
+      },
+      fallbackLng: "en",
+      supportedLngs: SUPPORTED_LANGUAGES as unknown as string[],
+      interpolation: { escapeValue: false },
+      returnNull: false,
+      detection: {
+        order: ["localStorage", "navigator", "htmlTag"],
+        caches: ["localStorage"],
+      },
+    });
+}
+
+export default i18n;
diff --git a/apps/edr-freight-web/backoffice/src/layout/AppLayout.tsx b/apps/edr-freight-web/backoffice/src/layout/AppLayout.tsx
new file mode 100644
index 000000000..0362232e2
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/layout/AppLayout.tsx
@@ -0,0 +1,36 @@
+import { useLocation } from "react-router-dom";
+import { Outlet } from "react-router-dom";
+import { AppMenuTabs } from "./AppMenuTabs";
+import { useSidebar } from "@/shared/common/ui/sidebar";
+import Top from "@/record-management/components/common/Top";
+import { useAuth } from "@/shared/context/AuthContext";
+
+export const AppLayout = () => {
+  const { pathname } = useLocation();
+  const isAuthPage = pathname === "/";
+  const { toggleSidebar } = useSidebar();
+  const { user } = useAuth();
+  
+  const userRoles = user?.roles?.map((role) => role.key) || [];
+  const isSuperAdmin = userRoles.includes("super_admin");
+  
+  if (isAuthPage) {
+    return (
+      <div className="min-h-screen w-full bg-gray-50">
+        <Outlet />
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full flex flex-col min-h-screen bg-background text-foreground">
+      <Top onToggleSidebar={toggleSidebar} showRecordManagementShortcut={!isSuperAdmin} />
+      <AppMenuTabs />
+      <div className="px-2 pb-2 pt-8 sm:px-4 sm:pb-4 sm:pt-10 flex-1">
+        <div className="w-full overflow-x-auto">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/layout/AppMenuTabs.tsx b/apps/edr-freight-web/backoffice/src/layout/AppMenuTabs.tsx
new file mode 100644
index 000000000..24d6c41b6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/layout/AppMenuTabs.tsx
@@ -0,0 +1,312 @@
+import { NavLink } from "react-router-dom";
+import {
+  Archive,
+  BarChart,
+  Building2,
+  ChartAreaIcon,
+  ClipboardList,
+  FileText,
+  Globe,
+  Settings,
+  ShieldAlert,
+  Users2,
+  UsersRound,
+} from "lucide-react";
+import { useAuth } from "@/shared/context/AuthContext";
+import { usePermissions } from "@/shared/context/PermissionContext";
+
+import { useTranslation } from "react-i18next";
+
+export interface MenuItem {
+  label: string;
+  href: string;
+  icon: React.ReactNode;
+  roles?: string[];
+  permissions?: string[];
+  isPrimary?: boolean;
+  displayLabel?: string;
+  children?: MenuItem[];
+}
+
+export const AppMenuTabs = () => {
+  const { user } = useAuth();
+  const userRoles = user?.roles.map((role) => role.key) || [];
+
+  const menuItems: MenuItem[] = [
+    {
+      label: "dashboard",
+      href: "/user-management/dashboard",
+      icon: <BarChart className="h-4 w-4" />,
+      roles: ["super_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "organizations",
+      href: "/user-management/organizations",
+      icon: <Building2 className="h-4 w-4" />,
+      roles: ["super_admin"],
+      isPrimary: true,
+    },
+
+    {
+      label: "organizationAdmins", // Shortened for mobile
+      displayLabel: "organizationAdmins", // Full label for desktop
+      href: "/user-management/organization_admins",
+      icon: <Users2 className="h-4 w-4" />,
+      roles: ["super_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "externalUsers", // Shortened for mobile
+      displayLabel: "externalUsers", // Full label for desktop
+      href: "/user-management/external_users",
+      icon: <Users2 className="h-4 w-4" />,
+      roles: ["super_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "dashboard",
+      href: "/user-management/user_management-dashboard",
+      icon: <BarChart className="h-4 w-4" />,
+      roles: ["admin", "organization_admin", "unit_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "userManagement",
+      href: "/user-management/user_management",
+      icon: <UsersRound className="h-4 w-4" />,
+      roles: ["admin", "organization_admin", "unit_admin"],
+      isPrimary: true,
+    },
+    // {
+    //   label: "userPositionApproval",
+    //   href: "/user-management/user-position-approval",
+    //   icon: <UsersRound className="h-4 w-4" />,
+    //   roles: ["admin", "organization_admin", "unit_admin"],
+    //   permissions: ["can:activateEmployee"],
+    //   isPrimary: true,
+    // },
+    // {
+    //   label: "All Records",
+    //   displayLabel: "All Records",
+    //   href: "/user-management/all-records",
+    //   icon: <FileText className="h-4 w-4" />,
+    //   roles: ["admin", "organization_admin", "unit_admin"],
+    //   permissions: ["can:canViewAllRecords"],
+    //   isPrimary: true,
+    // },
+    {
+      label: "contentManagement", // Shortened for mobile
+      displayLabel: "contentManagement", // Full label for desktop
+      href: "/user-management/content-management",
+      icon: <FileText className="h-4 w-4" />,
+      roles: ["admin", "organization_admin", "unit_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "webManagement",
+      displayLabel: "webManagement",
+      href: "/user-management/web-management",
+      icon: <Globe className="h-4 w-4" />,
+      roles: ["admin", "organization_admin", "unit_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "Position",
+      displayLabel: "positionTypes",
+      href: "/user-management/position-management",
+      icon: <FileText className="h-4 w-4" />,
+      roles: ["admin", "organization_admin", "unit_admin", "super_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "migratedRecords",
+      displayLabel: "migratedRecords",
+      href: "/user-management/migrated-records-management",
+      icon: <FileText className="h-4 w-4" />,
+      roles: ["super_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "settings",
+      displayLabel: "settings",
+      href: "/user-management/organization-settings",
+      icon: <Settings className="h-4 w-4" />,
+      roles: ["admin", "organization_admin", "unit_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "Bulk",
+      displayLabel: "bulkUpload",
+      href: "/user-management/bulk-upload",
+      icon: <FileText className="h-4 w-4" />,
+      roles: ["admin", "organization_admin", "unit_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "Archive Users",
+      displayLabel: "Archive Users",
+      href: "/user-management/archive-users",
+      icon: <Archive className="h-4 w-4" />,
+      roles: ["super_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "Archived Organizations",
+      displayLabel: "Archived Organizations",
+      href: "/user-management/archived-organizations",
+      icon: <Archive className="h-4 w-4" />,
+      roles: ["super_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "Archive Users",
+      displayLabel: "Archive Users",
+      href: "/user-management/archives",
+      icon: <Archive className="h-4 w-4" />,
+      roles: ["admin", "organization_admin", "unit_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "Archived Units & Positions",
+      displayLabel: "Archived Units & Positions",
+      href: "/user-management/archived",
+      icon: <Archive className="h-4 w-4" />,
+      roles: ["admin", "organization_admin", "unit_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "Sector Reports",
+      displayLabel: "Sector Reports",
+      href: "/user-management/sector-reports",
+      icon: <ChartAreaIcon className="h-5 w-5" />,
+      roles: ["unit_admin", "admin", "organization_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "activityLog",
+      href: "/user-management/activity_log",
+      icon: <ClipboardList className="h-4 w-4" />,
+      roles: ["super_admin"],
+      isPrimary: false,
+    },
+    {
+      label: "setting",
+      href: "/user-management/settings",
+      icon: <Settings className="h-4 w-4" />,
+      roles: ["super_admin"],
+      isPrimary: false,
+    },
+    {
+      label: "Letter Template",
+      href: "/user-management/templates",
+      icon: <FileText className="h-4 w-4" />,
+      roles: ["super_admin"],
+      isPrimary: false,
+    },
+    {
+      label: "Add Site",
+      href: "/user-management/add-site",
+      icon: <Globe className="h-4 w-4" />,
+      roles: ["super_admin"],
+      isPrimary: true,
+    },
+
+    // {
+    //   label: "branding.title",
+    //   href: "/user-management/web-management/Branding/Branding",
+    //   icon: <ShieldAlert className="h-4 w-4" />,
+    //   roles: ["super_admin"],
+    //   isPrimary: true,
+    // },
+  ];
+
+  const { permissions } = usePermissions();
+  const { t } = useTranslation();
+  const filteredMenu = menuItems.filter((item) =>
+    item?.roles?.some((r) => userRoles.includes(r)),
+  );
+  const primaryMenuItems = filteredMenu.filter(
+    (item) => item.isPrimary !== false,
+  );
+  const secondaryMenuItems = filteredMenu.filter(
+    (item) => item.isPrimary === false,
+  );
+
+  return (
+    <div className="fixed top-16 left-0 right-0 z-30 bg-white dark:bg-gray-900 border-b dark:border-gray-800 overflow-hidden flex flex-col">
+      {/* Mobile View - Two separate rows */}
+      <div className="md:hidden flex flex-col pt-5 pb-3 px-4 space-y-3 mt-2">
+        {/* Primary items row */}
+        <div className="flex items-center overflow-x-auto scrollbar-none">
+          {primaryMenuItems.map((item) => (
+            <NavLink
+              key={item.href}
+              to={item.href}
+              className={({ isActive }) =>
+                `flex items-center gap-1 px-3 py-2.5 mr-2 text-xs font-medium transition-colors whitespace-nowrap ${
+                  isActive
+                    ? "text-primary dark:text-primary-400 border-b-2 border-primary dark:border-primary-400"
+                    : "text-slate-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary-400"
+                }`
+              }
+            >
+              {item.icon}
+              <span className="max-w-[80px] truncate">
+                {t(`organization.${item.label}`, item.label)}
+              </span>
+            </NavLink>
+          ))}
+        </div>
+
+        {/* Secondary items row (if any) */}
+        {secondaryMenuItems.length > 0 && (
+          <div className="flex items-center overflow-x-auto scrollbar-none border-t dark:border-gray-800 pt-3">
+            {secondaryMenuItems.map((item) => (
+              <NavLink
+                key={item.href}
+                to={item.href}
+                className={({ isActive }) =>
+                  `flex items-center gap-1 px-3 py-2.5 mr-2 text-xs font-medium transition-colors whitespace-nowrap ${
+                    isActive
+                      ? "text-primary dark:text-primary-400 border-b-2 border-primary dark:border-primary-400"
+                      : "text-slate-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary-400"
+                  }`
+                }
+              >
+                {item.icon}
+                <span className="max-w-[80px] truncate">
+                  {t(`organization.${item.label}`, item.label)}
+                </span>
+              </NavLink>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Desktop View - Single row with all items */}
+      <div className="hidden md:flex pt-5 pb-3 px-8 mt-1">
+        <div className="flex items-center gap-2 overflow-x-auto scrollbar-none">
+          {filteredMenu.map((item) => (
+            <NavLink
+              key={item.href}
+              to={item.href}
+              className={({ isActive }) =>
+                `flex items-center gap-2 px-4 py-3 text-sm font-medium transition-colors whitespace-nowrap ${
+                  isActive
+                    ? "text-primary dark:text-primary-400 border-b-2 border-primary dark:border-primary-400"
+                    : "text-slate-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary-400"
+                }`
+              }
+            >
+              {item.icon}
+              <span className="max-w-full truncate">
+                {t(`organization.${item.label}`, item.label)}
+              </span>
+            </NavLink>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/layout/AppSidebar.tsx b/apps/edr-freight-web/backoffice/src/layout/AppSidebar.tsx
new file mode 100644
index 000000000..77d21fab5
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/layout/AppSidebar.tsx
@@ -0,0 +1,156 @@
+import { Link, useLocation } from "react-router-dom";
+import {
+  BarChart,
+  Building2,
+  ClipboardList,
+  FileText,
+  LogOut,
+  Settings,
+  Users2,
+  UsersRound,
+  ChartAreaIcon,
+} from "lucide-react";
+import { useAuth } from "@/shared/context/AuthContext";
+
+interface MenuItem {
+  label: string;
+  href: string;
+  icon: React.ReactNode;
+  roles: string[]; // role keys allowed to see this item
+}
+
+export const AppSidebar = () => {
+  const location = useLocation();
+  const { user } = useAuth();
+
+  const userRoles = user?.roles.map((role) => role.key) || [];
+
+  const menuItems: MenuItem[] = [
+    {
+      label: "Dashboard",
+      href: "/dashboard",
+      icon: <BarChart className="h-5 w-5" />,
+      roles: ["super_admin"],
+    },
+    {
+      label: "Dashboard",
+      href: "/user_management-dashboard",
+      icon: <BarChart className="h-5 w-5" />,
+      roles: ["admin", "unit_admin"],
+    },
+    {
+      label: "Organizations",
+      href: "/organizations",
+      icon: <Building2 className="h-5 w-5" />,
+      roles: ["super_admin"],
+    },
+    {
+      label: "Organization Admins",
+      href: "/organization_admins",
+      icon: <Users2 className="h-5 w-5" />,
+      roles: ["super_admin"],
+    },
+    {
+      label: "User Management",
+      href: "/user_management",
+      icon: <UsersRound className="h-5 w-5" />,
+      roles: ["admin", "unit_admin"],
+    },
+    {
+      label: "Content Management",
+      href: "/content-management",
+      icon: <FileText className="h-5 w-5" />,
+      roles: ["admin", "unit_admin"],
+    },
+    {
+      label: "Bulk Upload",
+      href: "/bulk-upload",
+      icon: <FileText className="h-5 w-5" />,
+      roles: ["unit_admin"],
+    },
+    {
+      label: "Archives",
+      href: "/archives",
+      icon: <FileText className="h-5 w-5" />,
+      roles: ["unit_admin"],
+    },
+    {
+      label: "Activity Log",
+      href: "/activity_log",
+      icon: <ClipboardList className="h-5 w-5" />,
+      roles: ["super_admin"],
+    },
+    {
+      label: "Settings",
+      href: "/settings",
+      icon: <Settings className="h-5 w-5" />,
+      roles: ["super_admin"],
+    },
+    {
+      label: "Sector Reports",
+      href: "/sector-reports",
+      icon: <ChartAreaIcon className="h-5 w-5" />,
+      roles: ["unit_admin", "admin"],
+    },
+  ];
+
+  const filteredMenu = menuItems.filter((item) =>
+    item.roles.some((r) => userRoles.includes(r)),
+  );
+
+  return (
+    <div className="flex flex-col h-full border-r bg-gray-50">
+      <div className="p-4">
+        <img
+          src="/assets/smart-office-logo.svg"
+          alt="Smart Office"
+          className="w-40"
+        />
+      </div>
+
+      <div className="flex flex-col gap-1 px-2 py-4 flex-1">
+        {filteredMenu.map((item) => (
+          <MenuItem
+            key={item.href}
+            label={item.label}
+            href={item.href}
+            icon={item.icon}
+            isActive={location.pathname === item.href}
+          />
+        ))}
+      </div>
+
+      <div className="p-4 mt-auto border-t">
+        <MenuItem
+          label="Logout"
+          href="/"
+          icon={<LogOut className="h-5 w-5" />}
+          isActive={false}
+        />
+      </div>
+    </div>
+  );
+};
+
+interface MenuItemProps {
+  label: string;
+  href: string;
+  icon: React.ReactNode;
+  isActive?: boolean;
+}
+
+const MenuItem = ({ label, href, icon, isActive = false }: MenuItemProps) => {
+  return (
+    <Link
+      to={href}
+      className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
+        isActive
+          ? "bg-primary text-primary-foreground"
+          : "hover:bg-primary/10 text-slate-800"
+      }`}
+    >
+      {icon}
+      <span className="text-sm font-medium">{label}</span>
+    </Link>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/layout/FayidaSignup.tsx b/apps/edr-freight-web/backoffice/src/layout/FayidaSignup.tsx
new file mode 100644
index 000000000..32f7f8dcb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/layout/FayidaSignup.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+
+const  FayidaSignup = ()=> {
+  return (
+    <div>
+      
+    </div>
+  )
+}
+
+
+export default FayidaSignup;
diff --git a/apps/edr-freight-web/backoffice/src/layout/TopBar.tsx b/apps/edr-freight-web/backoffice/src/layout/TopBar.tsx
new file mode 100644
index 000000000..87a56efde
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/layout/TopBar.tsx
@@ -0,0 +1,357 @@
+"use client";
+
+import {
+  ChevronDown,
+  Globe,
+  LogOut,
+  User,
+  Key,
+  Moon,
+  Sun,
+  Home,
+  Menu,
+} from "lucide-react";
+import { Button } from "@/shared/common/ui/button";
+import { Avatar, AvatarFallback } from "@/shared/common/ui/avatar";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import { useTranslation } from "react-i18next";
+import { NavLink, useNavigate, useLocation } from "react-router-dom";
+import { useRef, useEffect, useState } from "react";
+import { FiBell } from "react-icons/fi";
+import { useUser } from "@/shared/context/UserContext";
+import { useDarkMode } from "@/shared/hooks/useDarkMode";
+import {
+  UI_LANGUAGE_OPTIONS,
+  getUiLanguageLabel,
+  resolveUiLanguage,
+} from "@/shared/i18n/uiLanguages";
+import { useNotifications } from "@/shared/hooks/useNotification";
+import NotificationList from "@/record-management/components/NotificationList";
+import {
+  resolveModuleConfig,
+  useTenantConfig,
+} from "@/layout/components/TenantConfig";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+
+export const TopBar = () => {
+  const { t, i18n } = useTranslation();
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const { logout } = useAuthUser();
+  const userDetails = useUser();
+  const { isDarkMode, toggleDarkMode } = useDarkMode();
+  const { config: tenantConfig } = useTenantConfig();
+  const moduleConfig = resolveModuleConfig(tenantConfig);
+  const isAdminModuleVisible = userDetails?.roles?.some(
+    (role: { key: string }) =>
+      role.key === "unit_admin" ||
+      role.key === "organization_admin" ||
+      role.key === "super_admin",
+  );
+  const visibleModuleCount = [
+    moduleConfig.recordManagement,
+    moduleConfig.performance,
+    moduleConfig.objective,
+    moduleConfig.dms,
+    moduleConfig.siteManagement && isAdminModuleVisible,
+  ].filter(Boolean).length;
+  const shouldShowHomePageLink = visibleModuleCount > 1;
+  const isObjectiveManagementRoute = pathname.startsWith("/objective-management");
+  const fullName = userDetails?.name?.en || t("user");
+  const splittedName = fullName.trim().split(" ");
+  const initials =
+    splittedName.length === 1
+      ? splittedName[0][0]
+      : `${splittedName[0][0]}${splittedName[1][0]}`;
+
+  const changeLanguage = (lng: string) => {
+    i18n.changeLanguage(lng);
+  };
+  const currentLanguage = resolveUiLanguage(i18n.language);
+  const handleLogout = () => {
+    logout();
+  };
+
+  const userRoles = userDetails?.roles?.map((role: any) => role.key) || [];
+  const isSuperAdmin = userRoles.includes("super_admin");
+  const isOrgAdmin =
+    userRoles.includes("unit_admin") ||
+    userRoles.includes("organization_admin");
+
+  const modulesList = [
+    {
+      id: "homepage",
+      label: t("nav.homePage", "Home Page"),
+      path: "/homepage",
+    },
+    ...(moduleConfig.recordManagement
+      ? [
+          {
+            id: "recordManagement",
+            label: t("nav.Record Management", "Record Management"),
+            path: "/record-management/dashboard",
+          },
+        ]
+      : []),
+    ...(moduleConfig.performance
+      ? [
+          {
+            id: "performanceManagement",
+            label: t("nav.PerformanceManagement", "Performance Management"),
+            path: "/performance-management/plan-years",
+          },
+        ]
+      : []),
+    ...(moduleConfig.objective
+      ? [
+          {
+            id: "objectiveManagement",
+            label: t("nav.objectiveManagement", "Objective Management"),
+            path: "/objective-management/plan-years",
+          },
+        ]
+      : []),
+    ...(moduleConfig.dms
+      ? [
+          {
+            id: "documentManagement",
+            label: t("nav.DocumentManagement", "Document Management"),
+            path: "/dms/dashboard",
+          },
+        ]
+      : []),
+    ...(isOrgAdmin && moduleConfig.siteManagement
+      ? [
+          {
+            id: "orgAdmin",
+            label: t("nav.admin", "Admin"),
+            path: "/user-management/user_management-dashboard",
+          },
+        ]
+      : []),
+    ...(isSuperAdmin
+      ? [
+          {
+            id: "superAdmin",
+            label: t("OrganizationAdmin", "Super Admin"),
+            path: "/user-management/dashboard",
+          },
+        ]
+      : []),
+  ];
+
+  const [openNotifications, setOpenNotifications] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const { unseenCount, refresh } = useNotifications({
+    take: 1,
+    skip: 0,
+    orderBy: "createdAt:DESC",
+  });
+
+  // Close notification panel on outside click
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setOpenNotifications(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  return (
+    <>
+      <header className="fixed top-0 left-0 right-0 z-50 flex justify-between items-center gap-3 px-6 py-3 border-b dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm">
+        <div className="flex items-center gap-2">
+          <DropdownMenu>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-9 w-9 flex-shrink-0 rounded-xl bg-white/90 text-gray-600 shadow-sm ring-1 ring-inset ring-black/5 transition-colors hover:bg-primary-50 hover:text-primary-700 hover:ring-primary-200 dark:bg-gray-800/90 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-primary-900/20 dark:hover:text-primary-300 dark:hover:ring-primary-700/40"
+                    aria-label={t("nav.moduleNavigationHint")}
+                    title={t("nav.moduleNavigationHint")}
+                  >
+                    <Menu className="h-5 w-5" />
+                  </Button>
+                </DropdownMenuTrigger>
+              </TooltipTrigger>
+              <TooltipContent side="bottom" sideOffset={6}>
+                {t("nav.moduleNavigationHint")}
+              </TooltipContent>
+            </Tooltip>
+            <DropdownMenuContent
+              align="start"
+              className="w-56 dark:bg-gray-900 dark:border-gray-800"
+            >
+              {modulesList
+                .filter((item) => {
+                  const currentPath = pathname;
+                  if (item.id === "homepage") {
+                    return !currentPath.startsWith("/homepage");
+                  }
+                  if (item.id === "recordManagement") {
+                    return !currentPath.startsWith("/record-management");
+                  }
+                  if (item.id === "performanceManagement") {
+                    return !currentPath.startsWith("/performance-management");
+                  }
+                  if (item.id === "objectiveManagement") {
+                    return !currentPath.startsWith("/objective-management");
+                  }
+                  if (item.id === "documentManagement") {
+                    return !currentPath.startsWith("/dms");
+                  }
+                  if (item.id === "complaints") {
+                    return !currentPath.startsWith("/complaints");
+                  }
+                  if (item.id === "orgAdmin" || item.id === "superAdmin") {
+                    return !currentPath.startsWith("/user-management");
+                  }
+                  return true;
+                })
+                .map((item) => (
+                  <DropdownMenuItem
+                    key={item.id}
+                    onClick={() => navigate(item.path)}
+                    className="cursor-pointer hover:bg-primary-50 dark:hover:bg-primary-900/30 hover:text-primary-700 dark:hover:text-primary-400 py-2.5"
+                  >
+                    <span>{item.label}</span>
+                  </DropdownMenuItem>
+                ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        <div className="flex items-center gap-3">
+
+        {/* Notification bell */}
+        <div className="relative" ref={dropdownRef}>
+          <Button
+            variant="ghost"
+            onClick={() => {
+              setOpenNotifications((prev) => {
+                const next = !prev;
+                if (next) refresh();
+                return next;
+              });
+            }}
+            aria-label="Toggle Notifications"
+            className="p-2 hover:bg-primary-50 dark:hover:bg-primary-900/30 rounded-full transition-colors duration-200 relative">
+            <FiBell className="w-5 h-5 text-gray-700 dark:text-gray-300" />
+            {unseenCount > 0 && (
+              <span className="absolute -top-1 -right-1 min-w-4.5 rounded-full bg-red-500 px-1.5 py-0.5 text-center text-[10px] font-bold text-white shadow">
+                {unseenCount > 99 ? "99+" : unseenCount}
+              </span>
+            )}
+          </Button>
+
+          {openNotifications && (
+            <div className="absolute right-0 z-50 mt-2 w-88 overflow-hidden rounded-2xl bg-white shadow-2xl ring-1 ring-black/5 dark:bg-gray-900 dark:ring-white/10 sm:w-96">
+              <NotificationList />
+            </div>
+          )}
+        </div>
+
+        <Button
+          onClick={toggleDarkMode}
+          aria-label="Toggle Dark Mode"
+          className="p-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200"
+          title={isDarkMode ? "Switch to light mode" : "Switch to dark mode"}
+          style={{ display: isObjectiveManagementRoute ? "none" : "block" }}>
+          {isDarkMode ? (
+            <Sun className="h-5 w-5 text-yellow-500" />
+          ) : (
+            <Moon className="h-5 w-5 text-gray-600" />
+          )}
+        </Button>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              className="gap-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-primary-50 dark:hover:bg-primary-900/30 hover:text-primary-700 dark:hover:text-primary-400 transition-colors duration-200 font-medium">
+              <Globe className="w-4 h-4" />
+              {getUiLanguageLabel(currentLanguage, t)}
+              <ChevronDown className="w-4 h-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            align="end"
+            className="min-w-[140px] dark:bg-gray-900 dark:border-gray-800">
+            <DropdownMenuItem
+              onClick={() => changeLanguage("en")}
+              className="cursor-pointer hover:bg-primary-50 dark:hover:bg-primary-900/30 hover:text-primary-700 dark:hover:text-primary-400">
+              English
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => changeLanguage("am")}
+              className="cursor-pointer hover:bg-primary-50 dark:hover:bg-primary-900/30 hover:text-primary-700 dark:hover:text-primary-400">
+              አማርኛ
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <div className="flex items-center gap-3 cursor-pointer hover:bg-primary-50 dark:hover:bg-primary-900/30 rounded-lg px-3 py-2 transition-colors duration-200 group">
+              <Avatar className="w-9 h-9 border-2 border-primary-100 dark:border-primary-900 group-hover:border-primary-200 dark:group-hover:border-primary-800 transition-colors">
+                <AvatarFallback className="bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-400 font-semibold text-sm">
+                  {initials.toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+              <div className="text-xs text-right">
+                <div className="font-semibold text-gray-900 dark:text-gray-100">
+                  {userDetails?.name?.en}
+                </div>
+                <div className="text-gray-500 dark:text-gray-400 text-[11px]">
+                  @{userDetails?.username}
+                </div>
+              </div>
+              <ChevronDown className="w-4 h-4 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors" />
+            </div>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            align="end"
+            className="w-52 dark:bg-gray-900 dark:border-gray-800">
+            <DropdownMenuItem
+              onClick={() => navigate("/profile")}
+              className="cursor-pointer hover:bg-primary-50 dark:hover:bg-primary-900/30 hover:text-primary-700 dark:hover:text-primary-400 py-2.5">
+              <User className="w-4 h-4 mr-3" />
+              {t("header.viewProfile")}
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => navigate("/change-password")}
+              className="cursor-pointer hover:bg-primary-50 dark:hover:bg-primary-900/30 hover:text-primary-700 dark:hover:text-primary-400 py-2.5">
+              <Key className="w-4 h-4 mr-3" />
+              {t("header.changePassword")}
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={handleLogout}
+              className="cursor-pointer hover:bg-red-50 dark:hover:bg-red-900/30 hover:text-red-700 dark:hover:text-red-400 py-2.5">
+              <LogOut className="w-4 h-4 mr-3" />
+              {t("header.signOut")}
+            </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </header>
+    </>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/layout/components/AlertShow.tsx b/apps/edr-freight-web/backoffice/src/layout/components/AlertShow.tsx
new file mode 100644
index 000000000..8a525fd38
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/layout/components/AlertShow.tsx
@@ -0,0 +1,86 @@
+import { useEffect, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import {
+  fetchRequirementSatisfied,
+  AdminSetupAlertResponse,
+} from "@/record-management/services/api/alertService";
+import { X } from "lucide-react";
+
+export default function AdminSetupAlert({
+  unitId: propUnitId,
+}: {
+  unitId?: string;
+}) {
+  const [unitId, setUnitId] = useState<string>(propUnitId || "");
+ const [visible, setVisible] = useState(true);
+
+  // Listen for unitChanged events from Content Management.
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const detail = (e as CustomEvent<string>).detail;
+      queueMicrotask(() => setUnitId(detail));
+    };
+    window.addEventListener("unitChanged", handler);
+    return () => window.removeEventListener("unitChanged", handler);
+  }, []);
+
+  // TanStack Query for fetching requirements
+  const { data, isLoading, refetch } = useQuery<AdminSetupAlertResponse>({
+    queryKey: ["admin-setup-requirements", unitId],
+    queryFn: () => fetchRequirementSatisfied(unitId),
+    enabled: !!unitId,
+  });
+
+  const requirements = data?.requirements;
+
+  // Optional: refetch automatically on unit change (real-time trigger)
+  useEffect(() => {
+    if (unitId) {
+      refetch();
+    }
+  }, [unitId, refetch]);
+
+  // Hide if no requirements or all are satisfied
+  if (!requirements || Object.values(requirements).every(Boolean)) return null;
+
+ if (!visible) return null; // hide after dismiss
+
+  return (
+    <div className="relative flex items-center gap-6 p-2 border rounded bg-amber-50 shadow-2xl  top-10 left-1/2 -translate-x-1/2 z-[1000] w-full">
+      {/* Title */}
+      <h3 className="font-semibold text-amber-700 whitespace-nowrap">
+        Finish site setup
+      </h3>
+
+      {/* Messages inline */}
+      {isLoading ? (
+        <p className="text-sm text-slate-600">Loading requirements...</p>
+      ) : (
+        <div className="flex flex-wrap gap-6 text-sm text-slate-600">
+          {!requirements.hasFooter && <span>⚠️ Missing Footer</span>}
+          {!requirements.hasSeal && <span>⚠️ Missing Seal</span>}
+          {!requirements.hasHeader && <span>⚠️ Missing Header</span>}
+          {!requirements.internalPrefix && (
+            <span>⚠️ Missing Internal Prefix</span>
+          )}
+          {!requirements.externalPrefix && (
+            <span>⚠️ Missing External Prefix</span>
+          )}
+          {!requirements.internalSuffix && (
+            <span>⚠️ Missing Internal Suffix</span>
+          )}
+          {!requirements.externalSuffix && (
+            <span>⚠️ Missing External Suffix</span>
+          )}
+        </div>
+      )}
+
+      {/* Close button */}
+      <button
+        onClick={() => setVisible(false)}
+        className="absolute top-2 right-2 text-amber-700 hover:text-red-600">
+        <X size={16} />
+      </button>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/layout/components/Compliant.tsx b/apps/edr-freight-web/backoffice/src/layout/components/Compliant.tsx
new file mode 100644
index 000000000..c6cfff284
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/layout/components/Compliant.tsx
@@ -0,0 +1,351 @@
+import React, { useState } from "react";
+import {
+  FaUpload,
+  FaCheckCircle,
+  FaCopy,
+  FaExclamationCircle,
+  FaArrowLeft,
+} from "react-icons/fa";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+import Header from "./Header";
+import Footer from "./Footer";
+import {
+  submitComplaint,
+  ComplaintPayload,
+  FileInfo,
+} from "../../shared/services/complaintService";
+
+const ComplaintForm = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const [files, setFiles] = useState<File[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [disclaimerAccepted, setDisclaimerAccepted] = useState(false);
+  const [submissionSuccess, setSubmissionSuccess] = useState(false);
+  const [complaintId, setComplaintId] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  const [formValues, setFormValues] = useState({
+    fullName: "",
+    subCity: "",
+    woreda: "",
+    houseNumber: "",
+    phone: "",
+    institution: "",
+    complaintDetails: "",
+    complaintWant: "",
+    complaintPlace: "",
+  });
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    setFormValues({ ...formValues, [e.target.name]: e.target.value });
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      setFiles(Array.from(e.target.files));
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!disclaimerAccepted) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      // Prepare file info if files are uploaded
+      let fileInfo: FileInfo | undefined;
+      if (files.length > 0) {
+        const file = files[0]; // Take the first file for now
+        fileInfo = {
+          fileName: file.name,
+          contentType: file.type,
+          size: file.size,
+          originalname: file.name,
+        };
+      }
+
+      // Prepare the complaint payload
+      const payload: ComplaintPayload = {
+        fullName: formValues.fullName,
+        phoneNumber: formValues.phone,
+        subCity: formValues.subCity,
+        woreda: formValues.woreda,
+        houseNumber: formValues.houseNumber,
+        institution: formValues.institution,
+        complaintPlace: formValues.complaintPlace,
+        complaintDetail: formValues.complaintDetails,
+        desiredResolution: formValues.complaintWant,
+        fileInfo,
+      };
+
+      // Submit the complaint
+      const response = await submitComplaint(payload);
+
+      if (response.data) {
+        setComplaintId(response.data.complaintNumber || response.data.id);
+        setSubmissionSuccess(true);
+        toast.success(t("complaint.success"));
+      }
+    } catch (err: any) {
+      console.error("Error submitting complaint:", err);
+      const errorMessage =
+        err.response?.data?.message || err.message || t("complaint.error");
+      setError(errorMessage);
+      toast.error(errorMessage);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div>
+      <Header />
+      <div className="min-h-screen bg-gradient-to-b from-blue-50 to-white flex flex-col pt-16 md:pt-20">
+        {/* Hero Section */}
+        <div className="bg-primary py-16 text-center text-white relative overflow-hidden">
+          <div className="absolute top-0 left-0 w-full h-full bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10"></div>
+          <h1 className="text-4xl md:text-5xl font-bold mb-4 relative z-10 animate-fade-in">
+            {t("complaint.title")}
+          </h1>
+          <p className="max-w-2xl mx-auto text-lg opacity-90 relative z-10">
+            {t("complaint.subtitle")}
+          </p>
+        </div>
+
+        {/* Main Form */}
+        <div className="flex-1 flex justify-center p-6">
+          <div className="w-full max-w-3xl bg-white shadow-2xl rounded-2xl p-8 relative border border-gray-100">
+            {/* Floating circles */}
+            <div className="absolute -top-6 -left-6 w-16 h-16 bg-blue-100 rounded-full opacity-30 animate-pulse"></div>
+            <div className="absolute -bottom-6 -right-6 w-24 h-24 bg-blue-100 rounded-full opacity-30 animate-ping"></div>
+
+            <h2 className="text-2xl font-semibold text-blue-800 mb-8 text-center">
+              {t("complaint.formTitle")}
+            </h2>
+
+            {error && (
+              <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
+                <div className="flex items-center gap-2">
+                  <FaExclamationCircle className="text-red-500" />
+                  <span className="text-red-700 font-medium">
+                    {t("complaint.error")}
+                  </span>
+                </div>
+                <p className="text-red-600 text-sm mt-1">{error}</p>
+              </div>
+            )}
+
+            {submissionSuccess ? (
+              <div className="text-center animate-fade-in">
+                <FaCheckCircle className="text-primary-500 text-5xl mx-auto mb-4" />
+                <h3 className="text-xl font-semibold mb-2">
+                  {t("complaint.success")}
+                </h3>
+                <p className="mb-4 text-gray-600">{t("complaint.keepId")}</p>
+                <div className="bg-gray-100 border rounded-lg p-4 flex justify-center items-center gap-3">
+                  <span className="font-bold text-blue-700">{complaintId}</span>
+                  <button
+                    className="p-2 rounded hover:bg-gray-200"
+                    onClick={() => navigator.clipboard.writeText(complaintId)}
+                  >
+                    <FaCopy />
+                  </button>
+                </div>
+                <div className="flex justify-center gap-4 mt-6">
+                  <button
+                    onClick={() => setSubmissionSuccess(false)}
+                    className="px-6 py-3 bg-primary text-primary-foreground rounded-lg shadow hover:bg-primary/90 transition"
+                  >
+                    {t("complaint.close")}
+                  </button>
+                  <button
+                    onClick={() => navigate("/complaints")}
+                    className="px-6 py-3 bg-gray-300 text-gray-800 rounded-lg shadow hover:bg-gray-400 transition flex items-center gap-2"
+                  >
+                    <FaArrowLeft /> {t("complaint.back")}
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <form
+                onSubmit={handleSubmit}
+                className="space-y-6 animate-fade-in"
+              >
+                {/* Inputs */}
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <input
+                    type="text"
+                    name="fullName"
+                    value={formValues.fullName}
+                    onChange={handleChange}
+                    placeholder={t("complaint.fullName")}
+                    required
+                    className="w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-400 outline-none"
+                  />
+                  <input
+                    type="tel"
+                    name="phone"
+                    value={formValues.phone}
+                    onChange={handleChange}
+                    placeholder={t("complaint.phone")}
+                    required
+                    className="w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-400 outline-none"
+                  />
+                  <input
+                    type="text"
+                    name="subCity"
+                    value={formValues.subCity}
+                    onChange={handleChange}
+                    placeholder={t("complaint.subCity")}
+                    className="w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-400 outline-none"
+                  />
+                  <input
+                    type="text"
+                    name="woreda"
+                    value={formValues.woreda}
+                    onChange={handleChange}
+                    placeholder={t("complaint.woreda")}
+                    className="w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-400 outline-none"
+                  />
+                  <input
+                    type="text"
+                    name="houseNumber"
+                    value={formValues.houseNumber}
+                    onChange={handleChange}
+                    placeholder={t("complaint.houseNumber")}
+                    className="w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-400 outline-none"
+                  />
+                  <input
+                    type="text"
+                    name="institution"
+                    value={formValues.institution}
+                    onChange={handleChange}
+                    placeholder={t("complaint.institution")}
+                    className="w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-400 outline-none"
+                  />
+                </div>
+
+                <input
+                  type="text"
+                  name="complaintPlace"
+                  value={formValues.complaintPlace}
+                  onChange={handleChange}
+                  placeholder={t("complaint.place")}
+                  className="w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-400 outline-none"
+                />
+
+                <textarea
+                  name="complaintDetails"
+                  value={formValues.complaintDetails}
+                  onChange={handleChange}
+                  placeholder={t("complaint.details")}
+                  rows={4}
+                  className="w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-400 outline-none"
+                ></textarea>
+
+                <textarea
+                  name="complaintWant"
+                  value={formValues.complaintWant}
+                  onChange={handleChange}
+                  placeholder={t("complaint.want")}
+                  rows={4}
+                  className="w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-400 outline-none"
+                ></textarea>
+
+                {/* File Upload */}
+                {/* <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    {t("complaint.evidence")}
+                  </label>
+                  <div className="flex items-center gap-3">
+                    <input
+                      type="file"
+                      multiple
+                      onChange={handleFileChange}
+                      className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4
+                               file:rounded-lg file:border-0
+                               file:text-sm file:font-semibold
+                               file:bg-blue-50 file:text-blue-700
+                               hover:file:bg-blue-100"
+                    />
+                    <FaUpload className="text-gray-400" />
+                  </div>
+                  {files.length > 0 && (
+                    <p className="text-sm text-gray-500 mt-2">
+                      {t("complaint.selectedFiles")}:{" "}
+                      {files.map((f) => f.name).join(", ")}
+                    </p>
+                  )}
+                </div> */}
+
+                {/* Disclaimer */}
+                <div className="bg-red-50 border border-red-200 rounded-lg p-4">
+                  <div className="flex items-center gap-2 mb-2">
+                    <FaExclamationCircle className="text-red-500" />
+                    <span className="font-semibold text-red-700">
+                      {t("complaint.disclaimerTitle")}
+                    </span>
+                  </div>
+                  <p className="text-sm text-gray-700">
+                    {t("complaint.disclaimerText")}
+                  </p>
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <input
+                    type="checkbox"
+                    checked={disclaimerAccepted}
+                    onChange={(e) => setDisclaimerAccepted(e.target.checked)}
+                    className="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary"
+                  />
+                  <span className="text-sm text-gray-700">
+                    {t("complaint.accept")}
+                  </span>
+                </div>
+
+                {/* Submit + Back */}
+                <div className="flex justify-between items-center gap-4">
+                  <button
+                    type="button"
+                    onClick={() => navigate("/complaints")}
+                    className="flex items-center gap-2 px-5 py-3 bg-gray-300 text-gray-800 rounded-lg shadow hover:bg-gray-400 transition"
+                  >
+                    <FaArrowLeft /> {t("complaint.back")}
+                  </button>
+                  <button
+                    type="submit"
+                    disabled={!disclaimerAccepted || loading}
+                    className={`px-6 py-3 rounded-lg text-white font-semibold transition flex items-center justify-center gap-2
+                  ${
+                    loading || !disclaimerAccepted
+                      ? "bg-gray-400 cursor-not-allowed"
+                      : "bg-primary hover:bg-primary-700"
+                  }`}
+                  >
+                    {loading && (
+                      <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
+                    )}
+                    {loading
+                      ? t("complaint.submitting")
+                      : t("complaint.submit")}
+                  </button>
+                </div>
+              </form>
+            )}
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+export default ComplaintForm;
diff --git a/apps/edr-freight-web/backoffice/src/layout/components/Features.tsx b/apps/edr-freight-web/backoffice/src/layout/components/Features.tsx
new file mode 100644
index 000000000..5e067fb15
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/layout/components/Features.tsx
@@ -0,0 +1,229 @@
+import { motion } from "framer-motion";
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+
+const FeaturesSection = () => {
+  const { t } = useTranslation();
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
+  const features = [
+    {
+      name: t("landingPage.outgoingRecords"),
+      description: t("landingPage.outgoingRecordsDesc"),
+      icon: (
+        <svg
+          className="h-6 w-6"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
+          />
+        </svg>
+      ),
+      color: "bg-primary",
+    },
+    {
+      name: t("landingPage.incomingRecords"),
+      description: t("landingPage.incomingRecordsDesc"),
+      icon: (
+        <svg
+          className="h-6 w-6"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+          />
+        </svg>
+      ),
+      color: "bg-primary-500",
+    },
+    {
+      name: t("landingPage.approvalWorkflows"),
+      description: t("landingPage.approvalWorkflowsDesc"),
+      icon: (
+        <svg
+          className="h-6 w-6"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+      ),
+      color: "bg-[#3B82F6]",
+    },
+    {
+      name: t("landingPage.interactiveDashboard"),
+      description: t("landingPage.interactiveDashboardDesc"),
+      icon: (
+        <svg
+          className="h-6 w-6"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+          />
+        </svg>
+      ),
+      color: "bg-[#8B5CF6]",
+    },
+    {
+      name: t("landingPage.organizedFolders"),
+      description: t("landingPage.organizedFoldersDesc"),
+      icon: (
+        <svg
+          className="h-6 w-6"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+          />
+        </svg>
+      ),
+      color: "bg-[#EC4899]",
+    },
+    {
+      name: t("landingPage.securityAccessControl"),
+      description: t("landingPage.securityAccessControlDesc"),
+      icon: (
+        <svg
+          className="h-6 w-6"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+          />
+        </svg>
+      ),
+      color: "bg-[#F59E0B]",
+    },
+  ];
+
+  return (
+    <div className="py-16 bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-800">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: true }}
+          className="lg:text-center mb-16"
+        >
+          <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-primary/10 text-primary">
+            {t("landingPage.powerfulFeaturesTitle")}
+          </span>
+          <h2 className="mt-4 text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-5xl">
+            <span className="block">
+              {t("landingPage.powerfulFeaturesSubtitle")}
+            </span>
+            <span className="block text-primary">
+              {t("landingPage.documentWorkflow")}
+            </span>
+          </h2>
+          <p className="mt-6 max-w-3xl text-xl text-gray-600 dark:text-gray-300 lg:mx-auto">
+            {t("landingPage.powerfulFeaturesDesc")}
+          </p>
+        </motion.div>
+
+        <div className="mt-12">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {features.map((feature, index) => (
+              <motion.div
+                key={feature.name}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+                viewport={{ once: true }}
+                onHoverStart={() => setHoveredIndex(index)}
+                onHoverEnd={() => setHoveredIndex(null)}
+                className="relative"
+              >
+                <div
+                  className={`absolute -inset-0.5 rounded-xl ${
+                    feature.color
+                  } blur opacity-75 transition duration-500 ${
+                    hoveredIndex === index ? "opacity-100" : "opacity-0"
+                  }`}
+                ></div>
+                <div className="relative bg-white dark:bg-gray-800 p-6 rounded-xl border border-gray-200 dark:border-gray-700 h-full transition-all duration-300 hover:border-primary/30">
+                  <div
+                    className={`flex items-center justify-center h-12 w-12 rounded-lg ${feature.color} text-white mb-4`}
+                  >
+                    {feature.icon}
+                  </div>
+                  <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
+                    {feature.name}
+                  </h3>
+                  <p className="text-gray-600 dark:text-gray-300">{feature.description}</p>
+                  <div className="mt-4">
+                    
+                  </div>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+
+        {/* Stats Section */}
+        <motion.div
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          transition={{ duration: 0.5, delay: 0.3 }}
+          viewport={{ once: true }}
+          className="mt-20 bg-gradient-to-r from-primary to-primary-500 rounded-2xl shadow-xl overflow-hidden"
+        >
+          <div className="max-w-7xl mx-auto py-12 px-6 lg:px-8">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
+              {[
+                { number: "95%", label: t("landingPage.fasterApproval") },
+                { number: "10x", label: t("landingPage.auditReady") },
+                { number: "100%", label: t("landingPage.organizedRecords") },
+              ].map((stat, index) => (
+                <div key={index} className="px-6 py-8">
+                  <p className="text-4xl font-extrabold text-white">
+                    {stat.number}
+                  </p>
+                  <p className="mt-2 text-lg font-medium text-white/90">
+                    {stat.label}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+export default FeaturesSection;
diff --git a/apps/edr-freight-web/backoffice/src/layout/components/FollowCompliant.tsx b/apps/edr-freight-web/backoffice/src/layout/components/FollowCompliant.tsx
new file mode 100644
index 000000000..3c6348038
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/layout/components/FollowCompliant.tsx
@@ -0,0 +1,172 @@
+import React, { useState } from "react";
+import { FaExclamationCircle, FaArrowLeft } from "react-icons/fa";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import Header from "./Header";
+import Footer from "./Footer";
+import { getComplaintById } from "../../shared/services/complaintService";
+
+const FollowCompliant = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState(false);
+  const [searchButton, setSearchButton] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [searchId, setSearchId] = useState("");
+  const [formValues, setFormValues] = useState({
+    complaintNumber: "",
+    status: "",
+    createdAt: "",
+    message: "",
+  });
+
+  const handleSubmit = async (id: string) => {
+    try {
+      setLoading(true); // start spinner
+      const response = await getComplaintById(id);
+
+      if (response) {
+        setFormValues({
+          complaintNumber: response.data.complaintNumber || "",
+          status: response.data.status || "",
+          createdAt: response.data.createdAt || "",
+          message: response.data.message || "",
+        });
+      }
+    } catch (error) {
+      setError(t("complaint.errorMsg"));
+    } finally {
+      setLoading(false); // stop spinner
+    }
+  };
+
+  return (
+    <div>
+      <Header />
+      <div className="min-h-screen bg-gradient-to-b from-blue-50 to-white flex flex-col pt-16 md:pt-20">
+        {/* Hero Section */}
+        <div className="bg-primary py-16 text-center text-white relative overflow-hidden">
+          <div className="absolute top-0 left-0 w-full h-full bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10"></div>
+          <h1 className="text-4xl md:text-5xl font-bold mb-4 relative z-10 animate-fade-in">
+            {t("complaint.followTitle")}
+          </h1>
+          <p className="max-w-2xl mx-auto text-lg opacity-90 relative z-10">
+            {t("complaint.followSubtitle")}
+          </p>
+        </div>
+
+        {/* Main Form */}
+        <div className="flex-1 flex justify-center p-6">
+          <div className="w-full max-w-3xl bg-white shadow-2xl rounded-2xl p-8 relative border border-gray-100">
+            {/* Floating circles */}
+            <div className="absolute -top-6 -left-6 w-16 h-16 bg-blue-100 rounded-full opacity-30 animate-pulse"></div>
+
+            <h2 className="text-2xl font-semibold text-blue-800 mb-8 text-center">
+              {t("complaint.followTitle")}
+            </h2>
+
+            {error && (
+              <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
+                <div className="flex items-center gap-2">
+                  <FaExclamationCircle className="text-red-500" />
+                  <span className="text-red-700 font-medium">
+                    {t("complaint.error")}
+                  </span>
+                </div>
+                <p className="text-red-600 text-sm mt-1">{error}</p>
+              </div>
+            )}
+            <form className="space-y-6 animate-fade-in">
+              {/* View Fields */}
+              <div className="flex gap-2">
+                <label htmlFor="complaintId" className="self-center">
+                  {t("complaint.compliantId")}
+                </label>
+                <input
+                  id="complaintId"
+                  type="text"
+                  value={searchId}
+                  onChange={(e) => {
+                    const value = e.target.value;
+                    setSearchId(value);
+                    setSearchButton(value.trim() !== "");
+                  }}
+                  placeholder={t("complaint.enterComNum")}
+                  className="border rounded px-3 py-2 w-full"
+                />
+
+                <button
+                  type="button"
+                  disabled={!searchButton || loading}
+                  onClick={() => handleSubmit(searchId)}
+                  className={`flex items-center justify-center gap-2 px-4 py-2 rounded transition ${
+                    searchButton && !loading
+                      ? "bg-primary text-primary-foreground hover:bg-primary/90"
+                      : "bg-gray-300 text-gray-500 cursor-not-allowed"
+                  }`}
+                >
+                  {loading ? (
+                    <svg
+                      className="animate-spin h-5 w-5 text-white"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                    >
+                      <circle
+                        className="opacity-25"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        strokeWidth="4"
+                      ></circle>
+                      <path
+                        className="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
+                      ></path>
+                    </svg>
+                  ) : (
+                    t("userRecord.Search")
+                  )}
+                </button>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <p className="w-full p-3 border rounded-lg bg-gray-50 text-gray-700">
+                  {formValues.complaintNumber || t("complaint.complaintNo")}
+                </p>
+                <p className="w-full p-3 border rounded-lg bg-gray-50 text-gray-700">
+                  {formValues.status || t("userRecord.Status")}
+                </p>
+                <p className="w-full p-3 border rounded-lg bg-gray-50 text-gray-700">
+                  {formValues.createdAt || t("userRecord.createdAt")}
+                </p>
+              </div>
+
+              {/* Message in full width */}
+              <div className="mt-6">
+                <p className="w-full min-h-[120px] p-3 border rounded-lg bg-gray-50 text-gray-700 whitespace-pre-line">
+                  {formValues.message || t("complaint.message")}
+                </p>
+              </div>
+
+              {/* Back */}
+              <div className="flex justify-end items-center gap-4">
+                <button
+                  type="button"
+                  onClick={() => navigate("/")}
+                  className="flex items-center cursor-pointer gap-2 px-5 py-3 bg-gray-300 text-gray-800 rounded-lg shadow hover:bg-gray-400 transition"
+                >
+                  <FaArrowLeft /> {t("complaint.back")}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+export default FollowCompliant;
diff --git a/apps/edr-freight-web/backoffice/src/layout/components/Footer.tsx b/apps/edr-freight-web/backoffice/src/layout/components/Footer.tsx
new file mode 100644
index 000000000..5e180b2d0
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/layout/components/Footer.tsx
@@ -0,0 +1,374 @@
+import {
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  Tooltip,
+} from "@/shared/common/ui/tooltip";
+import { motion } from "framer-motion";
+import { Share2 as Facebook, Globe, Globe as Linkedin, Mail, MapPin, Phone } from "lucide-react";
+import { FaTelegramPlane, FaTiktok } from "react-icons/fa";
+import { FaXTwitter } from "react-icons/fa6";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { useTenantConfig } from "@/layout/components/TenantConfig";
+
+const Footer = () => {
+  const [activeTab, setActiveTab] = useState("");
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const { config: tenantConfig } = useTenantConfig();
+  const defaultFooterData = {
+    address: "XQXP+J6C Lingo Tower, Namibia St, Addis Ababa",
+    phone: "+251-955-232323",
+    email: "sales@triaplc.com",
+  };
+
+  const footerData = tenantConfig?.footerData || defaultFooterData;
+  const navItems = [
+    { id: "overview", label: t("landingPage.overview") },
+    { id: "features", label: t("landingPage.features") },
+    { id: "workflow", label: t("landingPage.workflow") },
+    { id: "howto", label: t("landingPage.manual") },
+  ];
+  const navigateTo = "/";
+  const handleAddressClick = () => {
+    const address =
+      footerData.address || "XQXP+J6C Lingo Tower, Namibia St, Addis Ababa";
+    const query = encodeURIComponent(address);
+    window.open(
+      `https://www.google.com/maps/search/?api=1&query=${query}`,
+      "_blank",
+      "noopener noreferrer",
+    );
+  };
+  const handleEmailClick = () => {
+    const email = footerData.email || "sales@triaplc.com";
+    const subject = "";
+    const body = "";
+    const gmailParams = new URLSearchParams();
+    gmailParams.append("to", email);
+    if (subject) gmailParams.append("su", subject);
+    if (body) gmailParams.append("body", body);
+
+    const gmailUrl = `https://mail.google.com/mail/?view=cm&fs=1&${gmailParams.toString()}`;
+    const mailtoUrl = `mailto:${email}?subject=${encodeURIComponent(subject || "")}&body=${encodeURIComponent(body || "")}`;
+
+    window.open(gmailUrl, "_blank", "noopener noreferrer");
+
+    setTimeout(() => {
+      window.open(mailtoUrl, "_blank", "noopener noreferrer");
+    }, 500);
+  };
+  const socials = tenantConfig?.socials || {};
+  const socialLinks = {
+    facebook: socials.facebook || "https://web.facebook.com/Triaplc",
+    twitter: socials.twitter || "https://x.com/Triaplc",
+    linkedin: socials.linkedin || "https://www.linkedin.com/company/triaplc",
+    telegram: socials.telegram || "",
+    tiktok: socials.tiktok || "",
+    website: socials.website || "https://triaplc.com/",
+  };
+  const optionalSocialLinks = [
+    {
+      href: socialLinks.telegram,
+      label: t("landingPage.telegram"),
+      icon: FaTelegramPlane,
+    },
+    {
+      href: socialLinks.tiktok,
+      label: t("landingPage.tiktok"),
+      icon: FaTiktok,
+    },
+  ].filter((item) => item.href);
+
+  return (
+    <footer className="bg-gradient-to-b from-gray-900 to-gray-800 dark:bg-gradient-to-b dark:from-gray-900 dark:to-gray-800">
+      <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
+        <div className="xl:grid xl:grid-cols-3 xl:gap-8">
+          <div className="space-y-8 xl:col-span-1">
+            <div className="flex items-center">
+              {tenantConfig?.logo ? (
+                <div className="relative group inline-flex">
+                  {/* Glow */}
+                  <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-primary/20 to-secondary/20 blur-xl opacity-0 group-hover:opacity-100 transition-all duration-500 scale-110" />
+
+                  {/* Footer Logo Wrapper */}
+                  <motion.div
+                    whileHover={{ scale: 1.04 }}
+                    whileTap={{ scale: 0.97 }}
+                    transition={{ type: "spring", stiffness: 220, damping: 16 }}
+                    className="relative inline-flex items-center justify-center cursor-pointer group"
+                    onClick={() => (window.location.href = "/")}
+                    title={t("nav.homePage")}
+                  >
+                    <motion.img
+                      src={tenantConfig.logo}
+                      alt="Footer Logo"
+                      className="
+      h-35
+      w-auto
+      object-contain
+      group-hover:scale-105
+      transition-transform
+      duration-300
+    "
+                      onError={(e) => {
+                        const fallback =
+                          e.currentTarget.parentElement?.querySelector(
+                            ".footer-logo-fallback",
+                          );
+
+                        if (fallback) {
+                          fallback.classList.remove("hidden");
+                        }
+
+                        e.currentTarget.remove();
+                      }}
+                    />
+
+                    {/* Fallback when logo fails to load */}
+                    <div
+                      className="
+      footer-logo-fallback
+      hidden
+      h-20
+      w-20
+      items-center
+      justify-center
+      rounded-full
+      bg-primary
+      text-primary-foreground
+      font-bold
+      text-2xl
+      pointer-events-none
+    "
+                    >
+                      {tenantConfig?.organizationName
+                        ?.split(/[\s\-–—]+/)
+                        .filter(Boolean)
+                        .map((word) => word.charAt(0))
+                        .join("")
+                        .toUpperCase() || "SO"}
+                    </div>
+                  </motion.div>
+                </div>
+              ) : (
+                <div className="h-10 w-10 rounded-full bg-primary flex items-center justify-center text-white font-bold text-xl">
+                  SO
+                </div>
+              )}
+              <span className="ml-3 text-2xl font-bold text-white">
+                {tenantConfig?.organizationName || t("landingPage.smartOffice")}
+              </span>
+            </div>
+            <p className="text-gray-300 text-lg max-h-20 overflow-y-auto pr-2">
+              {tenantConfig?.footerText ||
+                t("landingPage.digitalTransformation")}
+            </p>
+            <div className="flex space-x-6">
+              <a
+                href={socialLinks.facebook}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-gray-400 hover:text-primary transition-colors duration-300"
+              >
+                <li className="flex items-center space-x-2 text-base text-gray-400 hover:text-primary transition-colors duration-300 cursor-pointer">
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Facebook className="h-6 w-6 hover:text-primary" />
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <span>{t("landingPage.facebook")}</span>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                  <span className="sr-only">{t("landingPage.facebook")}</span>
+                </li>
+              </a>
+              <a
+                href={socialLinks.twitter}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-gray-400 hover:text-primary transition-colors duration-300"
+              >
+                <li className="flex items-center space-x-2 text-base text-gray-400 hover:text-primary transition-colors duration-300 cursor-pointer">
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <FaXTwitter className="h-6 w-6 hover:text-primary" />
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <span>{t("landingPage.twitter")}</span>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+
+                  <span className="sr-only">{t("landingPage.twitter")}</span>
+                </li>
+              </a>
+              <a
+                href={socialLinks.linkedin}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-gray-400 hover:text-primary transition-colors duration-300"
+              >
+                <li className="flex items-center space-x-2 text-base text-gray-400 hover:text-primary transition-colors duration-300 cursor-pointer">
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Linkedin className="h-6 w-6 hover:text-primary" />
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <span>{t("landingPage.linkedIn")}</span>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+
+                  <span className="sr-only">{t("landingPage.linkedIn")}</span>
+                </li>
+              </a>
+              {optionalSocialLinks.map(({ href, label, icon: Icon }) => (
+                <a
+                  key={label}
+                  href={href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-gray-400 hover:text-primary transition-colors duration-300"
+                >
+                  <li className="flex items-center space-x-2 text-base text-gray-400 hover:text-primary transition-colors duration-300 cursor-pointer">
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <Icon className="h-6 w-6 hover:text-primary" />
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <span>{label}</span>
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+
+                    <span className="sr-only">{label}</span>
+                  </li>
+                </a>
+              ))}
+              <a
+                href={socialLinks.website}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-gray-400 hover:text-primary transition-colors duration-300"
+              >
+                <li className="flex items-center space-x-2 text-base text-gray-400 hover:text-primary transition-colors duration-300 cursor-pointer">
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Globe className="h-6 w-6 hover:text-primary" />
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <span>{t("landingPage.website")}</span>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                  <span className="sr-only">{t("landingPage.website")}</span>
+                </li>
+              </a>
+            </div>
+          </div>
+
+          <div className="mt-12 xl:mt-0 xl:col-span-2">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+              <div>
+                <h3 className="text-sm font-semibold text-gray-300 tracking-wider uppercase">
+                  {t("landingPage.contactUs")}
+                </h3>
+                <ul className="mt-4 space-y-4">
+                  <li
+                    onClick={handleEmailClick}
+                    title={footerData.email || "sales@triaplc.com"}
+                    className="flex items-center space-x-3 text-base text-gray-400 hover:text-primary transition-colors duration-300 cursor-pointer"
+                  >
+                    <Mail className="h-5 w-5 hover:text-primary" />
+                    <span className="font-medium">
+                      {footerData.email || "sales@triaplc.com"}
+                    </span>
+                  </li>
+                  <li className="flex items-center space-x-3 text-base text-gray-400 hover:text-primary transition-colors duration-300 cursor-pointer">
+                    <Phone className="h-5 w-5 hover:text-primary" />
+                    <span className="font-medium">
+                      {footerData.phone || "+251-955-232323"}
+                    </span>
+                  </li>
+
+                  <li
+                    onClick={handleAddressClick}
+                    title={
+                      footerData.address ||
+                      "XQXP+J6C Lingo Tower, Namibia St, Addis Ababa"
+                    }
+                    className="flex items-center space-x-3 text-base text-gray-400 hover:text-primary transition-colors duration-300 cursor-pointer"
+                  >
+                    <MapPin className="h-5 w-5 hover:text-primary" />
+                    <span className="font-medium">
+                      {footerData.address || t("landingPage.address")}
+                    </span>
+                  </li>
+                </ul>
+              </div>
+
+              <div>
+                <h3 className="text-sm font-semibold text-gray-300 tracking-wider uppercase">
+                  {t("landingPage.quickLinks")}
+                </h3>
+                <ul className="mt-4 space-y-4">
+                  {navItems.map((item) => (
+                    <button
+                      key={item.id}
+                      onClick={() => {
+                        setActiveTab(item.id);
+                        const el = document.getElementById(item.id);
+                        if (el) {
+                          el.scrollIntoView({
+                            behavior: "smooth",
+                            block: "start",
+                          });
+                        }
+                      }}
+                      className={`cursor-pointer text-base text-gray-400 hover:text-primary transition-colors duration-300 flex items-center ${
+                        activeTab === item.id
+                          ? "text-gray-400"
+                          : "text-gray-400"
+                      }`}
+                    >
+                      {item.label}
+                      {activeTab === item.id && (
+                        <motion.div
+                          layoutId="activeTabIndicator"
+                          className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary"
+                          transition={{
+                            type: "spring",
+                            bounce: 0.2,
+                            duration: 0.6,
+                          }}
+                        />
+                      )}
+                    </button>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-12 border-t border-gray-700 pt-8 flex flex-col items-center justify-center text-center">
+          <p className="text-base text-gray-400">
+            &copy; {t("landingPage.copyright")}
+            {new Date().getFullYear()} {t("landingPage.rightsReserved")}
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/apps/edr-freight-web/backoffice/src/layout/components/Header.tsx b/apps/edr-freight-web/backoffice/src/layout/components/Header.tsx
new file mode 100644
index 000000000..9d075f347
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/layout/components/Header.tsx
@@ -0,0 +1,703 @@
+import { useState, useEffect, useMemo } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useNavigate, useLocation } from "react-router-dom";
+import { ExternalPortal } from "@/external-portal/components/External-Portal-Navigation/PortalHeader";
+import { useTranslation } from "react-i18next";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { toast } from "sonner";
+import {
+  ChevronDown,
+  FileText,
+  Search,
+  Info,
+  Menu,
+  X,
+  Moon,
+  Sun,
+} from "lucide-react";
+import { useUser } from "@/shared/context/UserContext";
+import { useDarkMode } from "@/shared/hooks/useDarkMode";
+import { useTenantConfig, resolveModuleConfig } from "@/layout/components/TenantConfig";
+import {
+  UI_LANGUAGE_OPTIONS,
+  resolveUiLanguage,
+} from "@/shared/i18n/uiLanguages";
+import {
+  hasComplaintVerification,
+  isComplaintAuthContext,
+} from "@/complaints/utils/complaintVerificationStorage";
+import { COMPLAINT_RECORDS_PATH } from "@/complaints/utils/complaintRoutes";
+import { useExternalPortalSession } from "@/shared/hooks/useExternalPortalSession";
+
+interface NavItem {
+  id: string;
+  label: string;
+  path?: string;
+  requiresCompleteRegistration?: true;
+  children?: NavItem[];
+}
+
+const languageOptions = UI_LANGUAGE_OPTIONS;
+
+const Header = () => {
+  const [activeTab, setActiveTab] = useState("overview");
+  const [scrolled, setScrolled] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [servicesOpen, setServicesOpen] = useState(false);
+  const [navigateTo, setNaviageTo] = useState("/");
+  const navigate = useNavigate();
+  const location = useLocation();
+  const isComplaintContext = isComplaintAuthContext(location.pathname);
+  const { isAuthenticated, showExternalPortalChrome } = useExternalPortalSession();
+  const { isDarkMode, toggleDarkMode } = useDarkMode();
+  const { config: tenantConfig } = useTenantConfig();
+  const moduleConfig = resolveModuleConfig(tenantConfig);
+
+  const userDetails = useUser();
+  const { t, i18n } = useTranslation();
+  const currentLanguage = resolveUiLanguage(i18n.language);
+
+  const hasCompletedRegistration = userDetails?.hasFinishedRegistration;
+  const changeLanguage = (lng: string) => i18n.changeLanguage(lng);
+
+  useEffect(() => {
+    if (!localStorage.getItem("i18nextLng")) {
+      i18n.changeLanguage("am");
+      localStorage.setItem("i18nextLng", "am");
+    }
+  }, [i18n]);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 10);
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  const handleSignIn = () => {
+    navigate("/login");
+  };
+
+  useEffect(() => {
+    if (location.pathname.includes("/external-portal/portal-outgoing")) {
+      setActiveTab("records");
+      return;
+    }
+
+    if (location.pathname.startsWith("/complaints")) {
+      setActiveTab("complaint");
+    }
+  }, [location.pathname]);
+
+  const navItems: NavItem[] = useMemo(() => {
+    if (showExternalPortalChrome) {
+      return [];
+    }
+
+    if (isAuthenticated) {
+      return [
+        { id: "overview", label: t("landingPage.overview") },
+        { id: "workflow", label: t("landingPage.workflow") },
+      ];
+    }
+
+    const complaintServices: NavItem[] = moduleConfig.complaint
+      ? [
+          {
+            id: "complaint",
+            label: t("landingPage.fileComplaint"),
+            path: "/complaints",
+          },
+          {
+            id: "follow-complaint",
+            label: t("landingPage.followComplaint"),
+            path: "/follow-complaint",
+          },
+        ]
+      : [];
+
+    const items: NavItem[] = [
+      { id: "overview", label: t("landingPage.overview") },
+      { id: "features", label: t("landingPage.features") },
+    ];
+
+    if (complaintServices.length > 0) {
+      items.push({
+        id: "services",
+        label: t("landingPage.services"),
+        children: complaintServices,
+      });
+    }
+
+    items.push(
+      { id: "workflow", label: t("landingPage.workflow") },
+      { id: "howto", label: t("landingPage.manual") },
+    );
+
+    return items;
+  }, [isAuthenticated, moduleConfig.complaint, showExternalPortalChrome, t]);
+
+  const handleNavClick = (item: NavItem) => {
+    if (
+      item.requiresCompleteRegistration &&
+      !hasCompletedRegistration &&
+      !hasComplaintVerification()
+    ) {
+      toast.error(t("registration.registrationRequired"));
+      return;
+    }
+
+    if (item.path) {
+      navigate(item.path);
+      setMobileMenuOpen(false);
+    }
+  };
+
+  // Animation variants
+  const mobileMenuVariants = {
+    hidden: {
+      opacity: 0,
+      height: 0,
+      transition: {
+        duration: 0.3,
+        when: "afterChildren",
+      },
+    },
+    visible: {
+      opacity: 1,
+      height: "auto",
+      transition: {
+        duration: 0.3,
+        when: "beforeChildren",
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const mobileItemVariants = {
+    hidden: { x: -20, opacity: 0 },
+    visible: {
+      x: 0,
+      opacity: 1,
+      transition: {
+        x: { stiffness: 1000, velocity: -100 },
+      },
+    },
+  };
+
+  const servicesVariants = {
+    hidden: {
+      opacity: 0,
+      y: -10,
+      scale: 0.95,
+      transition: {
+        duration: 0.2,
+      },
+    },
+    visible: {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      transition: {
+        duration: 0.2,
+        staggerChildren: 0.05,
+      },
+    },
+  };
+
+  const serviceItemVariants = {
+    hidden: { opacity: 0, y: -5 },
+    visible: { opacity: 1, y: 0 },
+  };
+
+  const getServiceIcon = (id: string) => {
+    switch (id) {
+      case "complaint":
+        return <FileText className="w-4 h-4" />;
+      case "follow-complaint":
+        return <Search className="w-4 h-4" />;
+      case "about-us":
+        return <Info className="w-4 h-4" />;
+      default:
+        return <FileText className="w-4 h-4" />;
+    }
+  };
+
+  // Get current language display name
+  const getCurrentLanguageDisplay = () => {
+    const currentLang = languageOptions.find(
+      (lang) => lang.value === currentLanguage,
+    );
+    return currentLang ? currentLang.label : "English";
+  };
+  useMemo(() => {
+    if (showExternalPortalChrome) {
+      setNaviageTo(COMPLAINT_RECORDS_PATH);
+    }
+  }, [showExternalPortalChrome]);
+  return (
+    <>
+      {/* Registration Alert - Fixed for mobile */}
+      <nav
+        className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
+          scrolled
+            ? "bg-white dark:bg-gray-900 shadow-lg"
+            : "bg-white dark:bg-gray-900 shadow-sm"
+        } `}
+      >
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center gap-4 h-16 md:h-20">
+            {/* Logo Section */}
+            <div className="flex items-center">
+              {!showExternalPortalChrome ? (
+                <>
+                  {tenantConfig?.logo ? (
+                    <div className="relative group inline-flex">
+                      {/* Glow */}
+                      <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-primary/20 to-secondary/20 blur-xl opacity-0 group-hover:opacity-100 transition-all duration-500 scale-110" />
+
+                      {/* Footer Logo Wrapper */}
+                      <motion.div
+                        whileHover={{ scale: 1.04 }}
+                        whileTap={{ scale: 0.97 }}
+                        transition={{ type: "spring", stiffness: 220, damping: 16 }}
+                        className="relative inline-flex items-center justify-center cursor-pointer group"
+                        onClick={() =>
+                          navigate(
+                            showExternalPortalChrome
+                              ? COMPLAINT_RECORDS_PATH
+                              : isComplaintContext
+                                ? "/complaints"
+                                : "/",
+                          )
+                        }
+                        title={t("nav.homePage")}
+                      >
+                        <motion.img
+                          src={tenantConfig.logo}
+                          alt="Footer Logo"
+                          className="
+      h-15 md:h-30
+      w-auto
+      object-contain
+      group-hover:scale-105
+      transition-transform
+      duration-300
+    "
+                          onError={(e) => {
+                            const fallback =
+                              e.currentTarget.parentElement?.querySelector(
+                                ".footer-logo-fallback",
+                              );
+
+                            if (fallback) {
+                              fallback.classList.remove("hidden");
+                            }
+
+                            e.currentTarget.remove();
+                          }}
+                        />
+
+                        {/* Fallback when logo fails to load */}
+                        <div
+                          className="
+      footer-logo-fallback
+      hidden
+      h-20
+      w-20
+      items-center
+      justify-center
+      rounded-full
+      bg-primary
+      text-primary-foreground
+      font-bold
+      text-2xl
+      pointer-events-none
+    "
+                        >
+                          {tenantConfig?.organizationName
+                            ?.split(/[\s\-–—]+/)
+                            .filter(Boolean)
+                            .map((word) => word.charAt(0))
+                            .join("")
+                            .toUpperCase() || "SO"}
+                        </div>
+                      </motion.div>
+                    </div>
+                  ) : (
+                    <motion.div
+                      whileHover={{ scale: 1.05 }}
+                      whileTap={{ scale: 0.95 }}
+                      className="h-10 w-10 md:h-12 md:w-12 rounded-full bg-primary flex items-center justify-center text-white font-bold cursor-pointer"
+                      onClick={() => navigate(navigateTo)}
+                      title={t("nav.homePage")}
+                    >
+                      SO
+                    </motion.div>
+                  )}
+                  <motion.span
+                    initial={{ opacity: 0, x: -10 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    className="ml-2 md:ml-3 text-lg md:text-xl font-bold text-gray-800 dark:text-white cursor-pointer"
+                    onClick={() => navigate(navigateTo)}
+                    title={t("nav.homePage")}
+                  >
+                    {tenantConfig?.organizationName ||
+                    tenantConfig?.organizationName == ""
+                      ? tenantConfig?.organizationName
+                      : t("landingPage.smartOffice")}
+                  </motion.span>
+                </>
+              ) : null}
+
+              {/* Desktop Navigation */}
+              <div className="hidden md:ml-6 lg:ml-10 md:flex md:space-x-4 lg:space-x-6">
+                {navItems.map((item) => (
+                  <div key={item.id} className="relative">
+                    {item.children ? (
+                      <div
+                        className="relative"
+                        onMouseEnter={() => setServicesOpen(true)}
+                        onMouseLeave={() => setServicesOpen(false)}
+                      >
+                        <button
+                          onClick={() => setServicesOpen(!servicesOpen)}
+                          className={`relative inline-flex items-center px-1 pt-1 text-sm lg:text-base font-medium transition-colors duration-200 cursor-pointer ${
+                            activeTab === item.id
+                              ? "text-gray-900 dark:text-white"
+                              : "text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:underline"
+                          }`}
+                        >
+                          {item.label}
+                          <ChevronDown
+                            className={`ml-1 w-4 h-4 transition-transform ${
+                              servicesOpen ? "rotate-180" : ""
+                            }`}
+                          />
+                        </button>
+
+                        <AnimatePresence>
+                          {servicesOpen && (
+                            <motion.div
+                              initial="hidden"
+                              animate="visible"
+                              exit="hidden"
+                              variants={servicesVariants}
+                              className="absolute top-full left-0 mt-2 w-64 bg-white rounded-lg shadow-xl border border-gray-200 z-50 overflow-hidden"
+                            >
+                              <div className="py-2">
+                                {item.children.map((child) => (
+                                  <motion.button
+                                    key={child.id}
+                                    variants={serviceItemVariants}
+                                    onClick={() => handleNavClick(child)}
+                                    className="w-full flex items-center px-4 py-3 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
+                                  >
+                                    <span className="mr-3 text-primary">
+                                      {getServiceIcon(child.id)}
+                                    </span>
+                                    {child.label}
+                                  </motion.button>
+                                ))}
+                              </div>
+                            </motion.div>
+                          )}
+                        </AnimatePresence>
+                      </div>
+                    ) : (
+                      <button
+                        onClick={() => {
+                          setActiveTab(item.id);
+                          if (item.path) {
+                            handleNavClick(item);
+                          } else {
+                            const el = document.getElementById(item.id);
+                            if (el) {
+                              el.scrollIntoView({
+                                behavior: "smooth",
+                                block: "start",
+                              });
+                            }
+                          }
+                        }}
+                        className={`relative inline-flex items-center px-1 pt-1 text-sm lg:text-base font-medium transition-colors duration-200 cursor-pointer ${
+                          (item.path
+                            ? location.pathname.startsWith(item.path)
+                            : activeTab === item.id)
+                            ? "text-gray-900 dark:text-white"
+                            : "text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:underline"
+                        }`}
+                      >
+                        {item.label}
+                        {(item.path
+                          ? location.pathname.startsWith(item.path)
+                          : activeTab === item.id) && (
+                          <motion.div
+                            layoutId="activeTabIndicator"
+                            className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary"
+                            transition={{
+                              type: "spring",
+                              bounce: 0.2,
+                              duration: 0.6,
+                            }}
+                          />
+                        )}
+                      </button>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Desktop Sign Up Button */}
+            {!isAuthenticated && (
+              <div className="hidden md:flex items-center space-x-2 lg:space-x-4">
+                <div className="w-28 lg:w-32">
+                  <Select
+                    value={currentLanguage}
+                    onValueChange={(lng) => changeLanguage(lng)}
+                  >
+                    <SelectTrigger className="w-full text-sm rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 px-2 py-1.5 lg:px-3 lg:py-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
+                      <SelectValue>{getCurrentLanguageDisplay()}</SelectValue>
+                    </SelectTrigger>
+                    <SelectContent className="dark:bg-gray-800 dark:border-gray-700">
+                      {languageOptions.map((lang) => (
+                        <SelectItem
+                          key={lang.value}
+                          value={lang.value}
+                          className="dark:text-gray-200 dark:hover:bg-gray-700"
+                        >
+                          {lang.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                {/* Dark Mode Toggle */}
+                <motion.button
+                  onClick={toggleDarkMode}
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.95 }}
+                  className="p-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200"
+                  title={
+                    isDarkMode ? "Switch to light mode" : "Switch to dark mode"
+                  }
+                >
+                  {isDarkMode ? (
+                    <Sun className="h-5 w-5 text-yellow-500" />
+                  ) : (
+                    <Moon className="h-5 w-5 text-gray-600" />
+                  )}
+                </motion.button>
+                <motion.button
+                  onClick={handleSignIn}
+                  whileHover={{
+                    scale: 1.03,
+                    boxShadow: "0 4px 12px rgba(24, 170, 157, 0.2)",
+                  }}
+                  whileTap={{ scale: 0.98 }}
+                  className="inline-flex items-center px-3 py-1.5 lg:px-4 lg:py-2.5 border border-transparent text-sm font-medium rounded-lg shadow-sm text-white bg-primary hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all duration-200 whitespace-nowrap"
+                >
+                  {t("landingPage.signIn")}
+                </motion.button>
+              </div>
+            )}
+            {showExternalPortalChrome && (
+              <div className="hidden md:flex items-center">
+                <ExternalPortal />
+              </div>
+            )}
+
+            {/* Mobile Menu Button */}
+            <div className="flex items-center md:hidden">
+              <motion.button
+                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+                className="inline-flex items-center justify-center p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary transition-colors duration-200"
+                aria-expanded="false"
+                whileTap={{ scale: 0.9 }}
+              >
+                <span className="sr-only">Open main menu</span>
+                {mobileMenuOpen ? (
+                  <X className="h-6 w-6" />
+                ) : (
+                  <Menu className="h-6 w-6" />
+                )}
+              </motion.button>
+            </div>
+          </div>
+        </div>
+
+        {/* Mobile Menu */}
+        <AnimatePresence>
+          {mobileMenuOpen && (
+            <motion.div
+              initial="hidden"
+              animate="visible"
+              exit="hidden"
+              variants={mobileMenuVariants}
+              className="md:hidden overflow-hidden bg-white dark:bg-gray-800 shadow-xl border-t border-gray-200 dark:border-gray-700"
+            >
+              <motion.div className="pt-2 pb-4 space-y-1 px-4">
+                {navItems.map((item) => (
+                  <div key={item.id}>
+                    {item.children ? (
+                      <div>
+                        <button
+                          onClick={() => setServicesOpen(!servicesOpen)}
+                          className={`block w-full text-left pl-3 pr-4 py-3 border-l-4 text-base font-medium transition-all duration-200 ${
+                            activeTab === item.id
+                              ? "bg-primary-500/15 border-primary text-primary"
+                              : "border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800"
+                          }`}
+                        >
+                          <div className="flex items-center justify-between">
+                            {item.label}
+                            <ChevronDown
+                              className={`w-4 h-4 transition-transform ${
+                                servicesOpen ? "rotate-180" : ""
+                              }`}
+                            />
+                          </div>
+                        </button>
+
+                        <AnimatePresence>
+                          {servicesOpen && (
+                            <motion.div
+                              initial={{ opacity: 0, height: 0 }}
+                              animate={{ opacity: 1, height: "auto" }}
+                              exit={{ opacity: 0, height: 0 }}
+                              className="pl-6 overflow-hidden"
+                            >
+                              {item.children.map((child) => (
+                                <motion.button
+                                  key={child.id}
+                                  onClick={() => handleNavClick(child)}
+                                  className="block w-full text-left pl-3 pr-4 py-2 text-sm text-gray-600 hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200"
+                                >
+                                  <div className="flex items-center">
+                                    <span className="mr-2 text-primary">
+                                      {getServiceIcon(child.id)}
+                                    </span>
+                                    {child.label}
+                                  </div>
+                                </motion.button>
+                              ))}
+                            </motion.div>
+                          )}
+                        </AnimatePresence>
+                      </div>
+                    ) : (
+                      <motion.button
+                        variants={mobileItemVariants}
+                        onClick={() => {
+                          setActiveTab(item.id);
+                          setMobileMenuOpen(false);
+                          if (item.path) {
+                            handleNavClick(item);
+                          }
+                        }}
+                        whileHover={{ scale: 1.02 }}
+                        whileTap={{ scale: 0.98 }}
+                        className={`block w-full text-left pl-3 pr-4 py-3 border-l-4 text-base font-medium transition-all duration-200 ${
+                          activeTab === item.id
+                            ? "bg-primary-500/15 border-primary text-primary"
+                            : "border-transparent text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 hover:text-gray-800 dark:hover:text-white"
+                        }`}
+                      >
+                        {item.label}
+                      </motion.button>
+                    )}
+                  </div>
+                ))}
+
+                {!isAuthenticated && (
+                  <motion.div
+                    variants={mobileItemVariants}
+                    className="pt-4 pb-2 border-t border-gray-200 dark:border-gray-700 space-y-3"
+                  >
+                    <div className="px-2">
+                      <Select
+                        value={currentLanguage}
+                        onValueChange={(lng) => changeLanguage(lng)}
+                      >
+                        <SelectTrigger className="w-full text-sm bg-gray-100 dark:bg-gray-700 border-none rounded-md px-3 py-2.5 shadow-sm focus:outline-none focus:ring-2 focus:ring-primary dark:text-gray-200">
+                          <SelectValue>
+                            {getCurrentLanguageDisplay()}
+                          </SelectValue>
+                        </SelectTrigger>
+                        <SelectContent className="dark:bg-gray-800 dark:border-gray-700">
+                          {languageOptions.map((lang) => (
+                            <SelectItem
+                              key={lang.value}
+                              value={lang.value}
+                              className="dark:text-gray-200 dark:hover:bg-gray-700"
+                            >
+                              {lang.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    {/* Dark Mode Toggle for Mobile */}
+                    <motion.button
+                      onClick={toggleDarkMode}
+                      whileHover={{ scale: 1.02 }}
+                      whileTap={{ scale: 0.98 }}
+                      className="block w-full px-4 py-3 text-base font-medium text-center text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-700 rounded-lg shadow hover:bg-gray-200 dark:hover:bg-gray-600 transition-all duration-200 flex items-center justify-center gap-2"
+                    >
+                      {isDarkMode ? (
+                        <>
+                          <Sun className="h-5 w-5 text-yellow-500" />
+                          {t("landingPage.lightMode")}
+                        </>
+                      ) : (
+                        <>
+                          <Moon className="h-5 w-5 text-gray-600" />
+                          {t("landingPage.darkMode")}
+                        </>
+                      )}
+                    </motion.button>
+
+                    <motion.button
+                      onClick={() => {
+                        handleSignIn();
+                        setMobileMenuOpen(false);
+                      }}
+                      whileHover={{ scale: 1.02 }}
+                      whileTap={{ scale: 0.98 }}
+                      className="block w-full px-4 py-3 text-base font-medium text-center text-white bg-primary rounded-lg shadow hover:bg-primary-700 transition-all duration-200"
+                    >
+                      {t("landingPage.signIn")}
+                    </motion.button>
+                  </motion.div>
+                )}
+
+                {showExternalPortalChrome && (
+                  <motion.div
+                    variants={mobileItemVariants}
+                    className="pt-3 border-t border-gray-200"
+                  >
+                    <ExternalPortal
+                      mobileView={true}
+                      onItemClick={() => setMobileMenuOpen(false)}
+                    />
+                  </motion.div>
+                )}
+              </motion.div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </nav>
+    </>
+  );
+};
+
+export default Header;
diff --git a/apps/edr-freight-web/backoffice/src/layout/components/HeroSection.tsx b/apps/edr-freight-web/backoffice/src/layout/components/HeroSection.tsx
new file mode 100644
index 000000000..a9f528fb0
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/layout/components/HeroSection.tsx
@@ -0,0 +1,560 @@
+import { useEffect, useState } from "react";
+import { motion, useAnimation, Variants } from "framer-motion";
+import { useInView } from "react-intersection-observer";
+import { easeInOut } from "framer-motion";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import Cookies from "js-cookie";
+import { ArrowRight, BookOpenText, ShieldCheck } from "lucide-react";
+import {
+  useTenantConfig,
+  resolveModuleConfig,
+} from "@/layout/components/TenantConfig";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/shared/common/ui/dialog";
+
+const HeroSection = () => {
+  const controls = useAnimation();
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { config: tenantConfig } = useTenantConfig();
+  const moduleConfig = resolveModuleConfig(tenantConfig);
+  const primary = tenantConfig.primaryColor || "#18AA9D";
+  const secondary = tenantConfig.secondaryColor || primary;
+  const [ref, inView] = useInView({
+    threshold: 0.1,
+    triggerOnce: true,
+  });
+
+  useEffect(() => {
+    if (inView) {
+      controls.start("visible");
+    } else {
+      controls.start("hidden");
+    }
+  }, [controls, inView]);
+
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.15,
+        delayChildren: 0.2,
+      },
+    },
+  };
+
+  const itemVariants: Variants = {
+    hidden: { y: 30, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: 0.6,
+        ease: easeInOut,
+      },
+    },
+  };
+
+  const isTokenPresent = Boolean(Cookies.get("auth-token"));
+  const heroTitle =
+    tenantConfig?.organizationName || t("landingPage.smartOffice");
+  const welcomeMessage =
+    tenantConfig?.welcomeMessage || t("landingPage.initiativeDescription");
+  const organizationInitials =
+    heroTitle
+      ?.split(/[\s\-–—]+/)
+      .filter(Boolean)
+      .map((word) => word.charAt(0))
+      .join("")
+      .toUpperCase() || "SO";
+
+  const cardVariants: Variants = {
+    hidden: { scale: 0.85, opacity: 0, rotateX: 10 },
+    visible: {
+      scale: 1,
+      opacity: 1,
+      rotateX: 0,
+      transition: {
+        delay: 0.4,
+        duration: 0.8,
+        type: "spring",
+        stiffness: 100,
+        damping: 15,
+      },
+    },
+  };
+
+  const floatingElementVariants: Variants = {
+    float: {
+      y: [0, -20, 0],
+      transition: {
+        duration: 4,
+        repeat: Infinity,
+        ease: "easeInOut", // ✅ correct literal type
+      },
+    },
+  };
+
+  return (
+    <section className="relative bg-gradient-to-br from-white via-blue-50/30 to-primary-50/50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 overflow-x-hidden min-h-screen flex items-start pt-8">
+      {/* Enhanced Background */}
+      <div className="absolute inset-0 overflow-hidden">
+        {/* Gradient Orbs */}
+        <div className="absolute -top-40 -left-40 w-80 h-80 bg-gradient-to-r from-primary to-primary-500 rounded-full mix-blend-multiply filter blur-3xl opacity-15 animate-orb-slow dark:opacity-10"></div>
+        <div className="absolute -top-20 -right-20 w-96 h-96 bg-gradient-to-r from-primary-500 to-primary rounded-full mix-blend-multiply filter blur-3xl opacity-10 animate-orb-medium dark:opacity-5"></div>
+        <div className="absolute -bottom-40 left-1/3 w-72 h-72 bg-gradient-to-r from-primary-700 to-primary-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-orb-fast dark:opacity-10"></div>
+
+        {/* Grid Pattern */}
+        <div className="absolute inset-0 bg-[linear-gradient(rgba(24,170,157,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(24,170,157,0.03)_1px,transparent_1px)] bg-[size:60px_60px] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_50%,black,transparent)] dark:bg-[linear-gradient(rgba(24,170,157,0.05)_1px,transparent_1px),linear-gradient(90deg,rgba(24,170,157,0.05)_1px,transparent_1px)]"></div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 pt-12 lg:pt-20">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-20 items-start">
+          {/* Enhanced Content */}
+          <motion.div
+            ref={ref}
+            initial="hidden"
+            animate={controls}
+            variants={containerVariants}
+            className="space-y-8 lg:space-y-10"
+          >
+            {!isTokenPresent && (
+              <motion.div
+                variants={itemVariants}
+                className="inline-flex items-center px-4 py-2 rounded-full bg-gradient-to-r from-primary/10 to-primary-500/10 border border-primary/20 text-primary text-sm font-medium mb-4"
+              >
+                <span className="relative flex h-2 w-2 mr-2">
+                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
+                  <span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
+                </span>
+                {"Online"}
+              </motion.div>
+            )}
+
+            <motion.h1
+              variants={itemVariants}
+              className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight text-gray-900 dark:text-white leading-tight"
+            >
+              <span className="block bg-gradient-to-r from-gray-900 to-gray-700 dark:from-white dark:to-gray-300 bg-clip-text text-transparent">
+                {tenantConfig?.organizationName || t("landingPage.smartOffice")}
+              </span>
+              <span className="block text-transparent bg-clip-text bg-gradient-to-r from-primary via-primary-500 to-primary-500">
+                {t("landingPage.platformSystem")}
+              </span>
+            </motion.h1>
+
+            <motion.p
+              variants={itemVariants}
+              className="text-lg md:text-xl text-gray-600 dark:text-gray-300 max-w-lg leading-relaxed"
+            >
+              {welcomeMessage}
+            </motion.p>
+
+            <motion.div variants={itemVariants}>
+              <Dialog>
+                <DialogTrigger asChild>
+                  <button className="group inline-flex items-center gap-3 rounded-full border border-primary/25 bg-white/75 px-5 py-3 text-sm font-semibold text-primary shadow-sm shadow-primary/10 backdrop-blur-md transition-all duration-300 hover:-translate-y-0.5 hover:border-primary/45 hover:bg-primary/10 hover:shadow-lg hover:shadow-primary/15 focus:outline-none focus:ring-2 focus:ring-primary/40 focus:ring-offset-2 dark:bg-gray-900/60 dark:hover:bg-primary/15 dark:focus:ring-offset-gray-900">
+                    <span className="flex size-9 items-center justify-center rounded-full bg-primary/10 text-primary transition-colors duration-300 group-hover:bg-primary group-hover:text-white">
+                      <BookOpenText className="size-4" />
+                    </span>
+                    <span>{t("newssection.readMore")}</span>
+                    <ArrowRight className="size-4 transition-transform duration-300 group-hover:translate-x-1" />
+                  </button>
+                </DialogTrigger>
+                <DialogContent className="max-h-[86vh] max-w-3xl overflow-hidden rounded-2xl border border-primary/15 bg-white/95 p-0 shadow-2xl shadow-primary/10 backdrop-blur-xl dark:border-primary/20 dark:bg-gray-900/95">
+                  <div className="h-1.5 bg-gradient-to-r from-primary via-primary-500 to-primary" />
+                  <DialogHeader className="relative gap-0 px-6 pb-5 pt-6 text-left sm:px-8">
+                    <div className="absolute right-8 top-8 hidden h-24 w-24 rounded-full bg-primary/10 blur-2xl sm:block" />
+                    <div className="relative flex items-start gap-4">
+                      {tenantConfig?.logo ? (
+                        <div className="relative group inline-flex shrink-0">
+                          <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-primary/20 to-secondary/20 blur-xl opacity-0 transition-all duration-500 scale-110 group-hover:opacity-100" />
+                          <motion.div
+                            whileHover={{ scale: 1.04 }}
+                            whileTap={{ scale: 0.97 }}
+                            transition={{
+                              type: "spring",
+                              stiffness: 220,
+                              damping: 16,
+                            }}
+                            className="relative flex h-16 w-24 items-center justify-center overflow-hidden rounded-2xl border-none bg-white/5 shadow-md dark:bg-slate-900/40"
+                            title={heroTitle}
+                          >
+                            <motion.img
+                              src={tenantConfig.logo}
+                              alt={`${heroTitle} logo`}
+                              className="h-full w-full object-contain drop-shadow-lg transition-transform duration-300 group-hover:scale-105"
+                              onError={(e) => {
+                                const fallback =
+                                  e.currentTarget.parentElement?.querySelector(
+                                    ".modal-logo-fallback",
+                                  );
+
+                                if (fallback) {
+                                  fallback.classList.remove("hidden");
+                                  fallback.classList.add("flex");
+                                }
+
+                                e.currentTarget.remove();
+                              }}
+                            />
+                            <div className="modal-logo-fallback absolute inset-0 hidden items-center justify-center rounded-2xl bg-gradient-to-br from-primary to-primary-500 text-xl font-bold text-white">
+                              {organizationInitials || "SO"}
+                            </div>
+                            <div className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/15 to-transparent transition-transform duration-1000 group-hover:translate-x-full" />
+                          </motion.div>
+                        </div>
+                      ) : (
+                        <div className="relative shrink-0">
+                          <div className="absolute inset-0 rounded-2xl bg-primary/20 blur-xl scale-110" />
+                          <div className="relative flex h-16 w-24 items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-br from-primary to-primary-500 text-xl font-bold text-white shadow-lg shadow-primary/25 ring-1 ring-white/20">
+                            <span className="drop-shadow-sm">
+                              {organizationInitials || "SO"}
+                            </span>
+                            <div className="absolute inset-x-0 top-0 h-1/2 bg-white/15" />
+                          </div>
+                        </div>
+                      )}
+                      <div className="min-w-0 pt-1">
+                        <DialogTitle className="text-2xl font-bold leading-tight text-gray-950 dark:text-white sm:text-3xl">
+                          {heroTitle}
+                        </DialogTitle>
+                        <DialogDescription className="sr-only">
+                          {welcomeMessage}
+                        </DialogDescription>
+                        <div className="mt-3 h-1 w-20 rounded-full bg-gradient-to-r from-primary to-primary-500" />
+                      </div>
+                    </div>
+                  </DialogHeader>
+                  <div className="border-t border-gray-100 bg-gradient-to-b from-gray-50/80 to-white px-6 py-6 dark:border-gray-800 dark:from-gray-950/40 dark:to-gray-900 sm:px-8">
+                    <div className="rounded-xl border border-gray-100 bg-white p-5 text-base leading-8 text-gray-700 shadow-sm dark:border-gray-800 dark:bg-gray-900/80 dark:text-gray-300 sm:p-6 sm:text-lg">
+                      <p className="whitespace-pre-line">{welcomeMessage}</p>
+                    </div>
+                  </div>
+                </DialogContent>
+              </Dialog>
+            </motion.div>
+
+            <motion.div
+              variants={itemVariants}
+              className="flex flex-col sm:flex-row flex-wrap gap-4 pt-2"
+            >
+              {moduleConfig.complaint && (
+                <motion.button
+                  type="button"
+                  whileHover={{
+                    scale: 1.05,
+                    boxShadow: `0 20px 40px ${primary}4d`,
+                  }}
+                  whileTap={{ scale: 0.95 }}
+                  onClick={() => navigate("/complaints")}
+                  className="group relative px-8 py-4 rounded-xl bg-gradient-to-r from-primary to-primary-500 text-white font-semibold text-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden"
+                >
+                  <div className="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                  <span className="relative flex items-center justify-center">
+                    {t("complaint.fayda.submitComplaint")}
+                    <ShieldCheck className="w-5 h-5 ml-2" />
+                  </span>
+                </motion.button>
+              )}
+              {!isTokenPresent && (
+                <motion.a
+                  whileHover={{
+                    scale: 1.05,
+                    boxShadow: `0 20px 40px ${primary}4d`,
+                  }}
+                  whileTap={{ scale: 0.95 }}
+                  href="/login"
+                  className="group relative px-8 py-4 rounded-xl bg-gradient-to-r from-primary to-primary-500 text-white font-semibold text-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden"
+                >
+                  <div className="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                  <span className="relative flex items-center justify-center">
+                    {t("landingPage.signIn")}
+                    <svg
+                      className="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M13 7l5 5m0 0l-5 5m5-5H6"
+                      />
+                    </svg>
+                  </span>
+                </motion.a>
+              )}
+              <motion.a
+                whileHover={{
+                  scale: 1.05,
+                  backgroundColor: "rgba(24, 170, 157, 0.08)",
+                }}
+                whileTap={{ scale: 0.95 }}
+                href="#features"
+                className="group px-8 py-4 rounded-xl border-2 border-primary text-primary font-semibold text-lg hover:shadow-lg transition-all duration-300 flex items-center justify-center"
+              >
+                {t("landingPage.learnMore")}
+                <svg
+                  className="ml-2 w-4 h-4 group-hover:translate-y-0.5 transition-transform"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M19 14l-7 7m0 0l-7-7m7 7V3"
+                  />
+                </svg>
+              </motion.a>
+            </motion.div>
+
+            {/* Stats */}
+            <motion.div
+              variants={itemVariants}
+              className="flex flex-wrap gap-8 pt-5 pb-10"
+            >
+              <div className="text-center">
+                <div className="text-2xl font-bold text-gray-900 dark:text-white">
+                  95%
+                </div>
+                <div className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                  {t("landingPage.uptime")}
+                </div>
+              </div>
+              <div className="text-center">
+                <div className="text-2xl font-bold text-gray-900 dark:text-white">
+                  25+
+                </div>
+                <div className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                  {t("landingPage.bureaus")}
+                </div>
+              </div>
+              <div className="text-center">
+                <div className="text-2xl font-bold text-gray-900 dark:text-white">
+                  24/7
+                </div>
+                <div className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                  {t("landingPage.support")}
+                </div>
+              </div>
+            </motion.div>
+          </motion.div>
+
+          {/* Enhanced Card */}
+          <motion.div
+            initial="hidden"
+            animate={controls}
+            variants={cardVariants}
+            className="relative"
+          >
+            <div className="absolute -inset-4 bg-gradient-to-r from-primary to-primary-500 rounded-3xl opacity-20 blur-xl animate-pulse-slow"></div>
+            <div className="absolute -inset-2 bg-gradient-to-r from-primary to-primary-500 rounded-2xl opacity-10 blur-lg"></div>
+
+            <motion.div
+              whileHover={{ y: -5, rotateX: 5 }}
+              transition={{ type: "spring", stiffness: 300, damping: 20 }}
+              className="relative h-full bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-2xl shadow-2xl border border-white/20 dark:border-gray-700 overflow-hidden"
+            >
+              {/* Card Header */}
+              <div className="absolute top-0 left-0 right-0 h-2 bg-gradient-to-r from-primary to-primary-500"></div>
+
+              <div className="p-8 lg:p-10 h-full flex flex-col items-center justify-center bg-gradient-to-br from-white/90 to-gray-50/80 dark:from-gray-800/90 dark:to-gray-700/80">
+                <div className="text-center space-y-6">
+                  {/* Logo/Brand */}
+                  <div className="mb-6">
+                    <div
+                      className="w-16 h-16 mx-auto mb-4 rounded-2xl shadow-lg flex items-center justify-center"
+                      style={{
+                        background: `linear-gradient(135deg, ${primary}, ${secondary})`,
+                      }}
+                    >
+                      <span className="text-white font-bold text-xl">SO</span>
+                    </div>
+                  </div>
+
+                  <div className="text-4xl lg:text-5xl font-bold mb-2 tracking-tight text-slate-900 dark:text-white">
+                    {t("landingPage.sops")}
+                  </div>
+
+                  <div className="text-lg font-semibold text-gray-800 dark:text-gray-200">
+                    {tenantConfig.appName}
+                  </div>
+
+                  <div className="text-gray-600 dark:text-gray-400 max-w-md leading-relaxed">
+                    {t("landingPage.revolutionDescription")}
+                  </div>
+
+                  {/* Features List */}
+                  <div className="grid grid-cols-2 gap-4 pt-4">
+                    {[
+                      "features1",
+                      "features2",
+                      "features3",
+                      "features4",
+                      "features5",
+                      "features6",
+                    ].map((feature, index) => (
+                      <motion.div
+                        key={feature}
+                        initial={{ opacity: 0, x: -10 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        transition={{ delay: 0.8 + index * 0.1 }}
+                        className="flex items-center text-sm text-gray-600 dark:text-gray-400"
+                      >
+                        <div
+                          className="w-2 h-2 rounded-full mr-2"
+                          style={{ backgroundColor: primary }}
+                        ></div>
+                        {t(`landingPage.${feature}`)}
+                      </motion.div>
+                    ))}
+                  </div>
+
+                  <div className="pt-6">
+                    <motion.div
+                      whileHover={{ scale: 1.05 }}
+                      className="inline-flex items-center px-6 py-3 rounded-full font-semibold backdrop-blur-sm"
+                      style={{
+                        background: `linear-gradient(to right, ${primary}1a, ${secondary}1a)`,
+                        color: primary,
+                        border: `1px solid ${primary}33`,
+                      }}
+                    >
+                      <span className="relative flex h-3 w-3 mr-3">
+                        <span
+                          className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75"
+                          style={{ backgroundColor: primary }}
+                        ></span>
+                        <span
+                          className="relative inline-flex rounded-full h-3 w-3"
+                          style={{ backgroundColor: primary }}
+                        ></span>
+                      </span>
+                      {t("landingPage.liveDemo")}
+                    </motion.div>
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+          </motion.div>
+        </div>
+      </div>
+
+      {/* Enhanced Floating Elements */}
+      <motion.div
+        variants={floatingElementVariants}
+        animate="float"
+        className="hidden lg:block absolute bottom-20 left-20"
+      >
+        <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-primary/20 to-primary-500/20 border border-primary/10 backdrop-blur-sm rotate-45"></div>
+      </motion.div>
+
+      <motion.div
+        variants={floatingElementVariants}
+        animate="float"
+        transition={{ delay: 1 }}
+        className="hidden lg:block absolute top-32 right-32"
+      >
+        <div className="w-16 h-16 rounded-full bg-gradient-to-br from-primary-500/15 to-primary/15 border border-primary-500/10 backdrop-blur-sm"></div>
+      </motion.div>
+
+      <motion.div
+        variants={floatingElementVariants}
+        animate="float"
+        transition={{ delay: 2 }}
+        className="hidden lg:block absolute top-1/2 left-1/4"
+      >
+        <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-primary-700/10 to-primary-500/10 border border-primary-700/10 backdrop-blur-sm rotate-12"></div>
+      </motion.div>
+
+      {/* Scroll Indicator */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 2 }}
+        className="absolute bottom-8 left-1/2 transform -translate-x-1/2 hidden lg:block"
+      >
+        <motion.div
+          animate={{ y: [0, 10, 0] }}
+          transition={{ duration: 2, repeat: Infinity }}
+          className="w-6 h-10 border-2 border-gray-300 rounded-full flex justify-center"
+        >
+          <motion.div
+            animate={{ y: [0, 12, 0] }}
+            transition={{ duration: 2, repeat: Infinity }}
+            className="w-1 h-3 bg-gray-400 rounded-full mt-2"
+          ></motion.div>
+        </motion.div>
+      </motion.div>
+
+      <style>
+        {`
+          @keyframes orb-slow {
+            0%, 100% {
+              transform: translate(0px, 0px) scale(1);
+            }
+            33% {
+              transform: translate(40px, -60px) scale(1.1);
+            }
+            66% {
+              transform: translate(-30px, 30px) scale(0.9);
+            }
+          }
+          @keyframes orb-medium {
+            0%, 100% {
+              transform: translate(0px, 0px) scale(1);
+            }
+            33% {
+              transform: translate(-50px, 40px) scale(1.05);
+            }
+            66% {
+              transform: translate(20px, -20px) scale(0.95);
+            }
+          }
+          @keyframes orb-fast {
+            0%, 100% {
+              transform: translate(0px, 0px) scale(1);
+            }
+            50% {
+              transform: translate(20px, -40px) scale(1.08);
+            }
+          }
+          .animate-orb-slow {
+            animation: orb-slow 15s infinite ease-in-out;
+          }
+          .animate-orb-medium {
+            animation: orb-medium 12s infinite ease-in-out;
+          }
+          .animate-orb-fast {
+            animation: orb-fast 10s infinite ease-in-out;
+          }
+          @keyframes pulse-slow {
+            0%, 100% {
+              opacity: 0.2;
+            }
+            50% {
+              opacity: 0.3;
+            }
+          }
+          .animate-pulse-slow {
+            animation: pulse-slow 4s infinite ease-in-out;
+          }
+        `}
+      </style>
+    </section>
+  );
+};
+
+export default HeroSection;
diff --git a/apps/edr-freight-web/backoffice/src/layout/components/Howto.tsx b/apps/edr-freight-web/backoffice/src/layout/components/Howto.tsx
new file mode 100644
index 000000000..790299821
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/layout/components/Howto.tsx
@@ -0,0 +1,609 @@
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+const RecordManagementGuide = () => {
+  const [activeTab, setActiveTab] = useState("dashboard");
+  const { t } = useTranslation();
+  const [expandedStep, setExpandedStep] = useState<string | null>(null);
+  const navigate = useNavigate();
+  const handleTabChange = (tab: string) => {
+    setActiveTab(tab);
+    setExpandedStep(null);
+    //window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  const toggleStep = (stepId: string) => {
+    setExpandedStep(expandedStep === stepId ? null : stepId);
+  };
+  const [openStatus, setOpenStatus] = useState<string | null>(null);
+
+  const toggle = (status: string) => {
+    setOpenStatus((prev) => (prev === status ? null : status));
+  };
+  const steps = [
+    {
+      id: "login",
+      title: t("landingPage.login"),
+      content: (
+        <div className="space-y-4">
+          <p className="dark:text-gray-300">
+            {t("landingPage.step1")}{" "}
+            <span className="font-semibold text-primary">
+              {t("landingPage.signIn")}
+            </span>{" "}
+            {t("landingPage.headerBtn")}
+          </p>
+          <p className="dark:text-gray-300">{t("landingPage.step2")}</p>
+          <p className="dark:text-gray-300">
+            {t("landingPage.step3")}{" "}
+            <span className="font-semibold text-primary">
+              {t("auth.login")}
+            </span>{" "}
+            {t("landingPage.accessBtn")}
+          </p>
+          <div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700 mt-4">
+            <p className="text-sm text-gray-600 dark:text-gray-300">
+              <span className="font-semibold">{t("landingPage.note")}</span>{" "}
+              {t("landingPage.forgotIntro")}
+            </p>
+          </div>
+        </div>
+      ),
+      image: "/images/login-screen.png",
+    },
+    {
+      id: "dashboard",
+      title: t("landingPage.dashboardTitle"),
+      content: (
+        <div className="space-y-4">
+          <p className="dark:text-gray-300">{t("landingPage.dashboardDesc")}</p>
+          <ul className="list-disc pl-5 space-y-2 dark:text-gray-300">
+            <li>
+              <span className="font-semibold">
+                {t("landingPage.recordsCreated")}:
+              </span>{" "}
+              {t("landingPage.recordsTotal")}
+            </li>
+            <li>
+              <span className="font-semibold">
+                {t("landingPage.recordsReceived")}:
+              </span>{" "}
+              {t("landingPage.incomingDocs")}
+            </li>
+            <li>
+              <span className="font-semibold">
+                {t("landingPage.breakdown")}:
+              </span>{" "}
+              {t("landingPage.visuals")}
+            </li>
+            <li>
+              <span className="font-semibold">
+                {t("landingPage.approvalStatus")}:
+              </span>{" "}
+              {t("landingPage.approvalTypes")}
+            </li>
+          </ul>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+            <div className="bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
+              <h4 className="font-medium text-gray-900 dark:text-white">
+                {t("landingPage.quickActions")}
+              </h4>
+              <p className="text-sm text-gray-600 dark:text-gray-300 mt-2">
+                {t("landingPage.createOrCheck")}
+              </p>
+            </div>
+            <div className="bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
+              <h4 className="font-medium text-gray-900 dark:text-white">
+                {t("landingPage.recentActivity")}
+              </h4>
+              <p className="text-sm text-gray-600 dark:text-gray-300 mt-2">
+                {t("landingPage.trackUpdates")}
+              </p>
+            </div>
+          </div>
+        </div>
+      ),
+      image: "/images/dashboard-screen.png",
+    },
+    {
+      id: "outgoing",
+      title: t("landingPage.manageOut"),
+      content: (
+        <div className="space-y-6">
+          <div>
+            <h4 className="font-semibold text-gray-900 dark:text-white">
+              {t("landingPage.createNew")}
+            </h4>
+            <ol className="list-decimal pl-5 space-y-2 mt-2 dark:text-gray-300">
+              <li>
+                {t("landingPage.goToTab")}{" "}
+                <span className="font-semibold text-primary">
+                  {t("statusBar.Outgoing")}
+                </span>{" "}
+                {t("landingPage.tab")}
+              </li>
+              <li>
+                {t("landingPage.click")}{" "}
+                <span className="font-semibold text-primary">
+                  {t("userRecord.Add Record")}
+                </span>{" "}
+                {t("landingPage.button")}
+              </li>
+              <li>{t("landingPage.fillFields")}</li>
+              <li>{t("landingPage.attach")}</li>
+              <li>{t("landingPage.saveOrSubmit")}</li>
+            </ol>
+          </div>
+
+          <div>
+            <h4 className="font-semibold text-gray-900 dark:text-white">
+              {t("landingPage.trackStatus")}
+            </h4>
+            <div className="mt-2 grid grid-cols-2 md:grid-cols-4 gap-3">
+              {[
+                {
+                  status: "Draft",
+                  color: "bg-gray-200 dark:bg-gray-700",
+                  detail: t("landingPage.notForwarded"),
+                },
+                {
+                  status: "Submitted",
+                  color: "bg-purple-100 dark:bg-purple-900/50",
+                  detail: t("landingPage.awaiting"),
+                },
+                {
+                  status: "Accepted",
+                  color: "bg-primary-100 dark:bg-primary-900/50",
+                  detail: t("landingPage.accepted"),
+                },
+                {
+                  status: "Approved",
+                  color: "bg-primary-200 dark:bg-primary-800/50",
+                  detail: t("landingPage.approvedSent"),
+                },
+                {
+                  status: "Adjustment",
+                  color: "bg-yellow-100 dark:bg-yellow-900/50",
+                  detail: t("landingPage.returned"),
+                },
+                {
+                  status: "Rejected",
+                  color: "bg-red-100 dark:bg-red-900/50",
+                  detail: t("landingPage.rejected"),
+                },
+                {
+                  status: "Sent",
+                  color: "bg-primary-300 dark:bg-primary-700",
+                  detail: t("landingPage.sent"),
+                },
+                {
+                  status: "Returned",
+                  color: "bg-gray-400 dark:bg-gray-600",
+                  detail: t("landingPage.returnedByOfficer"),
+                },
+              ].map((item) => (
+                <div
+                  key={item.status}
+                  className={`${item.color} p-2 rounded text-center text-sm font-medium relative`}
+                >
+                  <div className="flex items-center justify-between">
+                    <span className="mx-auto dark:text-gray-900">
+                      {t(`statusBar.${item.status}`)}
+                    </span>
+                    <button
+                      onClick={() => toggle(item.status)}
+                      className="ml-2 text-xs text-primary hover:underline"
+                    >
+                      <span
+                        className={`inline-block transition-transform duration-200 ${
+                          openStatus === item.status ? "rotate-180" : ""
+                        }`}
+                      >
+                        ▼
+                      </span>
+                    </button>
+                  </div>
+
+                  {openStatus === item.status && (
+                    <div className="mt-2 p-2 text-xs bg-white dark:bg-gray-700 border dark:border-gray-600 rounded shadow absolute top-full left-0 w-full z-10 dark:text-gray-200">
+                      {item.detail}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+            <p className="text-sm text-gray-600 dark:text-gray-400 mt-3">
+              {t("landingPage.monitor")}
+            </p>
+          </div>
+        </div>
+      ),
+      image: "/images/outgoing-screen.png",
+    },
+    {
+      id: "incoming",
+      title: t("landingPage.manageIncoming"),
+      content: (
+        <div className="space-y-6">
+          <div>
+            <h4 className="font-semibold text-gray-900 dark:text-white">
+              {t("landingPage.incomingTypes")}
+            </h4>
+            <div className="mt-3 grid grid-cols-1 md:grid-cols-3 gap-3">
+              {[
+                { type: "external", desc: t("landingPage.fromOthers") },
+                { type: "internal", desc: t("landingPage.withinOrg") },
+                { type: "cc", desc: t("landingPage.copied") },
+              ].map((item) => (
+                <div
+                  key={item.type}
+                  className="bg-white dark:bg-gray-800 p-3 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm"
+                >
+                  <h5 className="font-medium text-primary">
+                    {t(`nav.${item.type}`)}
+                  </h5>
+                  <p className="text-sm text-gray-600 dark:text-gray-300 mt-1">{item.desc}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div>
+            <h4 className="font-semibold text-gray-900 dark:text-white">
+              {t("landingPage.processIncoming")}
+            </h4>
+            <ul className="list-disc pl-5 space-y-2 mt-2">
+              <li className="dark:text-gray-300">
+                <span className="font-semibold">{t("userRecord.View")}:</span>{" "}
+                {t("landingPage.readDoc")}
+              </li>
+              <li className="dark:text-gray-300">
+                <span className="font-semibold">{t("statusBar.Accept")}:</span>{" "}
+                {t("landingPage.acknowledge")}
+              </li>
+              <li className="dark:text-gray-300">
+                <span className="font-semibold">{t("statusBar.Assign")}:</span>{" "}
+                {t("landingPage.forward")}
+              </li>
+              <li className="dark:text-gray-300">
+                <span className="font-semibold">
+                  {t("landingPage.archive")}:
+                </span>{" "}
+                {t("landingPage.fileRef")}
+              </li>
+            </ul>
+          </div>
+        </div>
+      ),
+      image: "/images/incoming-screen.png",
+    },
+    {
+      id: "approval",
+      title: t("landingPage.approvalworkflow"),
+      content: (
+        <div className="space-y-6">
+          <div>
+            <h4 className="font-semibold text-gray-900 dark:text-white">
+              {t("landingPage.process")}
+            </h4>
+            <div className="mt-4">
+              <h5 className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                {t("landingPage.internalFlow")}
+              </h5>
+              <div className="flex items-center justify-between mt-2">
+                {[
+                  t("landingPage.creator"),
+                  t("landingPage.leader"),
+                  t("landingPage.director"),
+                  t("landingPage.officer"),
+                ].map((role, i) => (
+                  <div key={i} className="flex flex-col items-center">
+                    <div className="h-10 w-10 rounded-full bg-primary flex items-center justify-center text-white font-medium text-sm">
+                      {i + 1}
+                    </div>
+                    <span className="text-xs mt-1 text-center dark:text-gray-300">{role}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="mt-6">
+              <h5 className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                {t("landingPage.externalFlow")}
+              </h5>
+              <div className="flex items-center justify-between mt-2">
+                {[
+                  t("landingPage.creator"),
+                  t("landingPage.leader"),
+                  t("landingPage.director"),
+                  t("landingPage.officer"),
+                ].map((role, i) => (
+                  <div key={i} className="flex flex-col items-center">
+                    <div className="h-10 w-10 rounded-full bg-primary-500 flex items-center justify-center text-white font-medium text-sm">
+                      {i + 1}
+                    </div>
+                    <span className="text-xs mt-1 text-center dark:text-gray-300">{role}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <h4 className="font-semibold text-gray-900 dark:text-white">
+              {t("landingPage.actions")}
+            </h4>
+            <div className="mt-3 grid grid-cols-1 md:grid-cols-3 gap-3">
+              {[
+                {
+                  action: "Approve",
+                  desc:t("landingPage.addTeeterAndSignature"),
+                  color: "bg-primary-50 dark:bg-primary-900/30 border-primary-200 dark:border-primary-800",
+                },
+                {
+                  action: "Reject",
+                  desc: t("landingPage.returnWithComments"),
+                  color: "bg-red-50 dark:bg-red-900/30 border-red-200 dark:border-red-800",
+                },
+                {
+                  action: "Adjust",
+                  desc: t("landingPage.requestModifications"),
+                  color: "bg-yellow-50 dark:bg-yellow-900/30 border-yellow-200 dark:border-yellow-800",
+                },
+              ].map((item) => (
+                <div
+                  key={item.action}
+                  className={`${item.color} p-3 rounded-lg border`}
+                >
+                  <h5 className="font-medium dark:text-gray-200">
+                    {t(`statusBar.${item.action}`)}
+                  </h5>
+                  <p className="text-sm text-gray-600 dark:text-gray-300 mt-1">{item.desc}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      ),
+      image: "/images/approval-screen.png",
+    },
+    {
+      id: "delegation",
+      title: t("landingPage.delegation"),
+      content: (
+        <div className="space-y-4">
+          <p className="dark:text-gray-300">{t("landingPage.delegateInfo")}</p>
+          <ol className="list-decimal pl-5 space-y-2">
+            <li className="dark:text-gray-300">
+              {t("landingPage.delegateNav")}{" "}
+              <span className="font-semibold text-primary">
+                {t("delegation.title")}
+              </span>{" "}
+              {t("landingPage.tab")}
+            </li>
+            <li className="dark:text-gray-300">{t("landingPage.selectColleague")}</li>
+            <li className="dark:text-gray-300">{t("landingPage.setDates")}</li>
+            <li className="dark:text-gray-300">{t("landingPage.setPerms")}</li>
+            <li className="dark:text-gray-300">{t("landingPage.saveDelegate")}</li>
+          </ol>
+          <div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700 mt-4">
+            <p className="text-sm text-gray-600 dark:text-gray-300">
+              <span className="font-semibold">{t("landingPage.note")}</span>{" "}
+              {t("landingPage.autoExpire")}
+            </p>
+          </div>
+        </div>
+      ),
+      image: "/images/delegation-screen.png",
+    },
+    {
+      id: "collaboration",
+      title: t("landingPage.collab"),
+      content: (
+        <div className="space-y-4">
+          <p className="dark:text-gray-300">{t("landingPage.collabInfo")}</p>
+          <ul className="list-disc pl-5 space-y-2">
+            <li className="dark:text-gray-300">{t("landingPage.viewDocs")}</li>
+            <li className="dark:text-gray-300">{t("landingPage.addComments")}</li>
+            <li className="dark:text-gray-300">{t("landingPage.approve")}</li>
+            <li className="dark:text-gray-300">{t("landingPage.trackChanges")}</li>
+          </ul>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+            <div className="bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
+              <h4 className="font-medium text-gray-900 dark:text-white">
+                {t("landingPage.realTime")}
+              </h4>
+              <p className="text-sm text-gray-600 dark:text-gray-300 mt-2">
+                {t("landingPage.liveChanges")}
+              </p>
+            </div>
+            <div className="bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
+              <h4 className="font-medium text-gray-900 dark:text-white">
+                {t("landingPage.notifications")}
+              </h4>
+              <p className="text-sm text-gray-600 dark:text-gray-300 mt-2">
+                {t("landingPage.alerts")}
+              </p>
+            </div>
+          </div>
+        </div>
+      ),
+      image: "/images/collaboration-screen.png",
+    },
+    {
+      id: "teeter",
+      title: t("landingPage.signatureMgmt"),
+      content: (
+        <div className="space-y-4">
+          <p className="dark:text-gray-300">{t("landingPage.leadersOnly")}</p>
+          <ol className="list-decimal pl-5 space-y-2">
+            <li className="dark:text-gray-300">
+              {t("landingPage.goToTab")}{" "}
+              <span className="font-semibold text-primary">
+                {t("landingPage.signatureTitle")}
+              </span>{" "}
+              {t("landingPage.tab")}
+            </li>
+            <li className="dark:text-gray-300">{t("landingPage.uploadTeeter")}</li>
+            <li className="dark:text-gray-300">{t("landingPage.uploadSignature")}</li>
+            <li className="dark:text-gray-300">{t("landingPage.defaultSignature")}</li>
+            <li className="dark:text-gray-300">{t("landingPage.updateDesignation")}</li>
+          </ol>
+          <div className="bg-red-50 dark:bg-red-900/30 p-4 rounded-lg border border-red-200 dark:border-red-800 mt-4">
+            <p className="text-sm text-red-600 dark:text-red-400">
+              <span className="font-semibold">{t("landingPage.security")}</span>{" "}
+              {t("landingPage.encrypted")}.
+            </p>
+          </div>
+        </div>
+      ),
+      image: "/images/teeter-screen.png",
+    },
+  ];
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      {/* Header */}
+      <header className="bg-white dark:bg-gray-800 shadow-sm">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+          <div className="flex flex-col md:flex-row justify-between items-start md:items-center">
+            <div>
+              <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+                {t("landingPage.recordModule")}
+              </h1>
+              <p className="mt-2 text-lg text-gray-600 dark:text-gray-300">
+                {t("landingPage.guide")}
+              </p>
+            </div>
+            <button
+              onClick={() => navigate("/")}
+              className="mt-4 md:mt-0 px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
+            >
+              {t("landingPage.back")}
+            </button>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Navigation Tabs */}
+        <div className="border-b border-gray-200 dark:border-gray-700">
+          <nav className="-mb-px flex space-x-8 overflow-x-auto scrollbar-hidden">
+            {steps.map((step) => (
+              <button
+                key={step.id}
+                onClick={() => handleTabChange(step.id)}
+                className={`whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm cursor-pointer ${
+                  activeTab === step.id
+                    ? "border-primary text-primary"
+                    : "border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600"
+                }`}
+              >
+                {step.title}
+              </button>
+            ))}
+          </nav>
+        </div>
+
+        {/* Content Area */}
+        <div className="mt-8 grid grid-cols-1 lg:grid-cols-3 gap-8">
+          {/* Steps List */}
+          <div className="lg:col-span-1">
+            <div className="bg-white dark:bg-gray-800 shadow-sm rounded-lg overflow-hidden">
+              <div className="p-4 bg-primary">
+                <h2 className="text-lg font-medium text-white">
+                  {t("landingPage.moduleGuide")}
+                </h2>
+              </div>
+              <div className="divide-y divide-gray-200 dark:divide-gray-700">
+                {steps.map((step) => (
+                  <div
+                    key={step.id}
+                    onClick={() => handleTabChange(step.id)}
+                    className={`p-4 cursor-pointer transition-colors ${
+                      activeTab === step.id
+                        ? "bg-primary-500/5"
+                        : "hover:bg-gray-50 dark:hover:bg-gray-700"
+                    }`}
+                  >
+                    <div className="flex items-center">
+                      <div
+                        className={`h-8 w-8 rounded-full flex items-center justify-center mr-3 ${
+                          activeTab === step.id
+                            ? "bg-primary text-white"
+                            : "bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300"
+                        }`}
+                      >
+                        {steps.findIndex((s) => s.id === step.id) + 1}
+                      </div>
+                      <h3 className="text-sm font-medium dark:text-gray-200">{step.title}</h3>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* Active Tab Content */}
+          <div className="lg:col-span-2">
+            <div className="bg-white dark:bg-gray-800 shadow-sm rounded-lg overflow-hidden">
+              <div className="p-6">
+                <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
+                  {steps.find((step) => step.id === activeTab)?.title}
+                </h2>
+
+                <div className="mt-6 prose prose-sm max-w-none">
+                  {steps.find((step) => step.id === activeTab)?.content}
+                </div>
+
+                {/* Image placeholder - replace with actual image */}
+                <div className="mt-8 bg-gray-100 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600 p-4 flex items-center justify-center">
+                  <p className="text-gray-500 dark:text-gray-400">
+                    {t("landingPage.screenshotOf")}{" "}
+                    {steps.find((step) => step.id === activeTab)?.title}
+                  </p>
+                </div>
+              </div>
+
+              {/* Navigation Buttons */}
+              <div className="px-6 py-4 bg-gray-50 dark:bg-gray-700 flex justify-between">
+                {steps.findIndex((step) => step.id === activeTab) > 0 && (
+                  <button
+                    onClick={() =>
+                      handleTabChange(
+                        steps[
+                          steps.findIndex((step) => step.id === activeTab) - 1
+                        ].id
+                      )
+                    }
+                    className="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
+                  >
+                    {t("landingPage.previous")}
+                  </button>
+                )}
+                {steps.findIndex((step) => step.id === activeTab) <
+                  steps.length - 1 && (
+                  <button
+                    onClick={() =>
+                      handleTabChange(
+                        steps[
+                          steps.findIndex((step) => step.id === activeTab) + 1
+                        ].id
+                      )
+                    }
+                    className="ml-auto inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
+                  >
+                    {t("landingPage.next")}
+                  </button>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default RecordManagementGuide;
diff --git a/apps/edr-freight-web/backoffice/src/layout/components/KnowAs.tsx b/apps/edr-freight-web/backoffice/src/layout/components/KnowAs.tsx
new file mode 100644
index 000000000..b98bf6427
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/layout/components/KnowAs.tsx
@@ -0,0 +1,17 @@
+import React, { useState } from "react";
+import { FaExclamationCircle, FaArrowLeft } from "react-icons/fa";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import Header from "./Header";
+import Footer from "./Footer";
+import { getComplaintById } from "../../shared/services/complaintService";
+
+const KnowAs = () => {
+  return (
+    <div>
+      <div>comming soon</div>
+    </div>
+  );
+};
+
+export default KnowAs;
diff --git a/apps/edr-freight-web/backoffice/src/layout/components/TenantConfig.ts b/apps/edr-freight-web/backoffice/src/layout/components/TenantConfig.ts
new file mode 100644
index 000000000..956c29603
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/layout/components/TenantConfig.ts
@@ -0,0 +1,591 @@
+import { useMemo, useEffect, type ReactNode } from "react";
+
+export interface FooterData {
+  address: string;
+  phone: string;
+  email: string;
+}
+
+export interface Socials {
+  facebook?: string;
+  twitter?: string;
+  linkedin?: string;
+  instagram?: string;
+  youtube?: string;
+  telegram?: string;
+  tiktok?: string;
+  website?: string;
+}
+export type fileInfo = {
+  size?: number;
+  bucket?: string;
+  fileName?: string;
+  contentType?: string;
+  originalname?: string;
+};
+export interface ModuleConfig {
+  recordManagement: boolean;
+  siteManagement: boolean;
+  dms: boolean;
+  performance: boolean;
+  objective: boolean;
+  complaint: boolean;
+}
+
+export interface TenantConfig {
+  appName: string;
+  organizationName: string;
+  canUseAttachmentFromDMS?: boolean;
+  logo: string;
+  primaryColor: string;
+  secondaryColor?: string;
+  footerText: string;
+  footerData: FooterData;
+  socials: Socials;
+  welcomeMessage: string;
+  moduleConfig?: Partial<ModuleConfig>;
+  dashboardPreviewImage?: string;
+}
+export interface brandingDTO {
+  organizationName: {
+    am: string;
+    en: string;
+  };
+  logo: {
+    presigned: string;
+    fileInfo: fileInfo;
+  };
+  primaryColor: string;
+  secondaryColor?: string;
+  footerText: string;
+  footerData: FooterData;
+  socials: Socials;
+  welcomeMessage: string;
+  loginImage?: {
+    presigned: string;
+    fileInfo: fileInfo;
+  };
+  favicon?: {
+    presigned: string;
+    fileInfo: fileInfo;
+  };
+  moduleConfig?: Partial<ModuleConfig>;
+}
+
+/**
+ * Resolve effective module visibility for a tenant.
+ * Record Management and Site Management default to enabled.
+ * Complaint controls public landing-page complaint entry points only (not module navigation).
+ * Other optional modules default to disabled unless enabled by the tenant.
+ */
+export const resolveModuleConfig = (config: TenantConfig): ModuleConfig => ({
+  recordManagement: config.moduleConfig?.recordManagement ?? true,
+  siteManagement: true,
+  dms: config.moduleConfig?.dms ?? false,
+  performance: config.moduleConfig?.performance ?? false,
+  objective: config.moduleConfig?.objective ?? false,
+  complaint: config.moduleConfig?.complaint ?? false,
+});
+
+const defaultConfig: TenantConfig = {
+  appName: "Smart Office",
+  organizationName: "Smart Office",
+  canUseAttachmentFromDMS: false,
+  logo: "/assets/TriaTradinglogo.png",
+  primaryColor: "#1b354d",
+  secondaryColor: "#0f5a3a",
+  footerText: "COMMITED TO EXCELLENCE",
+  footerData: {
+    address: "Addis Ababa, Ethiopia",
+    phone: "+251955232323",
+    email: "info@triaplc.com",
+  },
+  socials: {
+    facebook: "",
+    twitter: "",
+    linkedin: "",
+    instagram: "",
+    youtube: "",
+    telegram: "",
+    tiktok: "",
+    website: "https://triaplc.com/",
+  },
+  welcomeMessage:
+    "At Tria Trading PLC, we empower organizations with innovative software solutions and expert consulting services. Our commitment to excellence, innovation, and customer success enables us to deliver technology that drives growth, efficiency, and lasting impact.",
+};
+
+const tenantConfigs: Record<string, TenantConfig> = {
+  localhost: {
+    appName: "Smart Office",
+    organizationName: "Addis Ababa City Administration",
+    logo: "",
+    primaryColor: "#115005",
+    moduleConfig: {
+      dms: true,
+      performance: true,
+      objective: true,
+      complaint: true,
+    },
+    canUseAttachmentFromDMS: true,
+    secondaryColor: "#dad9db",
+    footerText: "COMMITED TO EXCELLENCE",
+    footerData: {
+      address: "Addis Ababa, Ethiopia",
+      phone: "+251955232323",
+      email: "info@triaplc.com",
+    },
+    socials: {
+      facebook: "",
+      twitter: "",
+      linkedin: "",
+      instagram: "",
+      youtube: "",
+      telegram: "",
+      tiktok: "",
+      website: "https://triaplc.com/",
+    },
+    welcomeMessage:
+      "Welcome to the Smart Office of the Addis Ababa City Administration. Addis Ababa is Ethiopia’s capital and a center of public service, innovation, culture, and opportunity. Through this platform, we aim to strengthen efficient service delivery, modernize administrative workflows, improve transparency, and support responsive governance for residents, institutions, and stakeholders across the city.",
+  },
+  "127.0.0.1": {
+    appName: "Smart Office EDR",
+    organizationName: "Ethio-Djibouti Railways",
+    canUseAttachmentFromDMS: true,
+    logo: "/assets/edrlogo.png",
+    primaryColor: "#DC143C",
+    moduleConfig: {
+      dms: true,
+      performance: true,
+      objective: true,
+      complaint: true,
+    },
+    secondaryColor: "#0f5a3a",
+    dashboardPreviewImage: "/edrheadoffice.jpg",
+    footerText:
+      "The Ethio-Djibouti Railway was established in April 2017 following a bilateral agreement signed on December 16, 2016, between Ethiopia and Djibouti.",
+    footerData: {
+      address: "Addis Ababa, Ethiopia",
+      phone: "9546",
+      email: "edr_@edrsc.com",
+    },
+    socials: {
+      facebook: "",
+      twitter: "",
+      linkedin: "",
+      instagram: "",
+      youtube: "",
+      telegram: "",
+      tiktok: "",
+      website: "https://edrsc.com/",
+    },
+    welcomeMessage:
+      "The Ethio-Djibouti Railway was established in April 2017 following a bilateral agreement signed on December 16, 2016, between Ethiopia and Djibouti. A Shareholders Agreement was signed on January 11, 2017, among public bodies and state enterprises from both nations, governed by Ethiopian commercial law.\n\nThe shareholders formed a Share Company with an initial capital of USD 500 million, dedicated to operating and maintaining the Addis Ababa–Djibouti Railway and providing freight and passenger transport services.",
+  },
+  "smartoffice.edrsc.com": {
+    appName: "Smart Office EDR",
+    organizationName: "Ethio-Djibouti Railways",
+    canUseAttachmentFromDMS: true,
+    logo: "/assets/edrlogo.png",
+    primaryColor: "#13724D",
+    moduleConfig: {
+      dms: true,
+      performance: false,
+      objective: false,
+      complaint: true,
+    },
+    secondaryColor: "#0f5a3a",
+    dashboardPreviewImage: "/edrheadoffice.jpg",
+    footerText:
+      "The Ethio-Djibouti Railway was established in April 2017 following a bilateral agreement signed on December 16, 2016, between Ethiopia and Djibouti.",
+    footerData: {
+      address: "Addis Ababa, Ethiopia",
+      phone: "9546",
+      email: "edr_@edrsc.com",
+    },
+    socials: {
+      facebook: "https://web.facebook.com/ethiodjiboutirailwaysc",
+      twitter: "https://edrsc.com/",
+      linkedin: "https://edrsc.com/",
+      instagram: "https://edrsc.com/",
+      youtube: "https://edrsc.com/",
+      telegram: "",
+      tiktok: "",
+      website: "https://edrsc.com/",
+    },
+    welcomeMessage:
+      "The Ethio-Djibouti Railway was established in April 2017 following a bilateral agreement signed on December 16, 2016, between Ethiopia and Djibouti. A Shareholders Agreement was signed on January 11, 2017, among public bodies and state enterprises from both nations, governed by Ethiopian commercial law.\n\nThe shareholders formed a Share Company with an initial capital of USD 500 million, dedicated to operating and maintaining the Addis Ababa–Djibouti Railway and providing freight and passenger transport services.",
+  },
+  "smartoffice.eiar.gov.et": {
+    appName: "Smart Office EIAR",
+    organizationName: "Ethiopian Institute of Agricultural Research",
+    logo: "/assets/eiarLogo.jpg",
+    primaryColor: "#388e4b",
+    moduleConfig: { dms: false, performance: false, objective: false },
+    secondaryColor: "#fff",
+    footerText:
+      "The Ethiopian Institute of Agricultural Research (EIAR) is one of the oldest and largest agricultural research institutes in Africa. EIAR has evolved through several stages since its first initiation during the late 1940s, following the establishment of agricultural and technical schools at Ambo and Jimma. In 1955, a full-fledged agricultural experiment station was established at Debre Zeit (now named Debre Zeit Agricultural Research Center) under the then Imperial College of Agricultural and mechanical Arts (now called Haramaya University) and had been continued as the major research entity until the mid-1960s. In 1966, Institute of Agricultural Research (IAR) was established as the first nationally coordinated agricultural research institute in Ethiopia. IAR was established with a mission to formulate national agricultural research guidelines, coordinate national agricultural research system, and undertake research in its centers and sub-centers located in various agro-ecological zones of Ethiopia.",
+    footerData: {
+      address: "Addis Ababa, Ethiopia",
+      phone: "+251-116-454441",
+      email: "eiar.gov.et",
+    },
+    canUseAttachmentFromDMS: false,
+    socials: {
+      facebook: "https://web.facebook.com/EIARPR",
+      website: "http://www.eiar.gov.et",
+      twitter: "http://www.eiar.gov.et",
+      linkedin: "http://www.eiar.gov.et",
+      instagram: "http://www.eiar.gov.et",
+      youtube: "http://www.eiar.gov.et",
+    },
+
+    welcomeMessage:
+      "welcome you to the SmartOffice of the Ethiopian Institute of Agricultural Research. The Institute, since its establishment in 1966, has released over more 3000 agricultural technologies and improved farming practices by undertaking scientific research activities on various areas in crop, livestock, land and water, biotechnology, climate, farm machinery and agricultural economics. Of these technologies, 1190 are crop varieties and the rest include livestock breeds, pest and disease control methods, crop production and livestock husbandry methods, pre- and post-harvest technologies and recommendations. EIAR, in the five decades of its existence, has reached a large number of beneficiaries with its technologies and information found in different agro-ecologies throughout the country. The Institute has engaged itself in multiplication of initial technologies based on the demand created by the beneficiaries and supply to public and private technology multiplication actors for their wider reproduction and distribution.",
+  },
+  "smartoffice.ebi.gov.et": {
+    appName: "EBI Smart Office",
+    organizationName: "Ethiopian Biodiversity Institute - EBI",
+    logo: "/assets/ebiLogoWhite.png",
+    primaryColor: "#2a741d",
+    moduleConfig: { dms: false, performance: false, objective: false },
+    secondaryColor: "#2c246d",
+    footerText: "Welcome to the Center of Origin & Diversity, Ethiopia",
+    footerData: {
+      address: "Addis Ababa, Ethiopia",
+      phone: "+251-116-615607",
+      email: " info@ebi.gov.et",
+    },
+    canUseAttachmentFromDMS: false,
+    socials: {
+      facebook: "https://www.facebook.com/EthiopiaEBI",
+      twitter: "https://x.com/EthiopiaEBI",
+      linkedin: "https://www.linkedin.com/company/EthiopiaEBI",
+      youtube: "https://www.youtube.com/@EthiopiaEBI",
+      instagram: "https://www.youtube.com/@EthiopiaEBI",
+      website: "https://ebi.gov.et",
+      telegram: "https://t.me/EthiopiaEBI",
+      tiktok: "https://www.tiktok.com/@ethiopiaebi",
+    },
+    welcomeMessage:
+      "Ethiopia is recognized as one of the world’s most biodiverse nations.  Our rugged highlands, vast lowlands, and the rift valley lakes hold the genetic codes of the wild relatives of our staple food, and the endemic wildlife that defines our national identity. The Ethiopian Biodiversity Institute - EBI bears the profound responsibility of being the steward of these natural assets since its establishment in the 1970s.",
+  },
+  "smartoffice.aaca.gov.et": {
+    appName: "Smart Office",
+    organizationName: "Addis Ababa City Administration",
+    logo: "",
+    primaryColor: "#115005",
+    moduleConfig: { dms: false, performance: false, objective: false },
+    secondaryColor: "#dad9db",
+    footerText: "COMMITED TO EXCELLENCE",
+    footerData: {
+      address: "Addis Ababa, Ethiopia",
+      phone: "+251955232323",
+      email: "info@triaplc.com",
+    },
+    canUseAttachmentFromDMS: false,
+    socials: {
+      facebook: "",
+      twitter: "",
+      linkedin: "",
+      instagram: "",
+      youtube: "",
+      telegram: "",
+      tiktok: "",
+      website: "https://triaplc.com/",
+    },
+    welcomeMessage:
+      "Welcome to the Smart Office of the Addis Ababa City Administration. Addis Ababa is Ethiopia’s capital and a center of public service, innovation, culture, and opportunity. Through this platform, we aim to strengthen efficient service delivery, modernize administrative workflows, improve transparency, and support responsive governance for residents, institutions, and stakeholders across the city.",
+  },
+  "smartoffice.efd.moa.gov.et": {
+    appName: "Smart Office EFD",
+    organizationName: "Ethiopian Forest Development",
+    logo: "/assets/efdlogo.jpg",
+    primaryColor: "#006400",
+    moduleConfig: { dms: false, performance: false, objective: false },
+    secondaryColor: "#a52a2a",
+    footerText:
+      "Ethiopian Forestry Development (EFD) is an autonomous federal institution, established by Proclamation No. 1263/2021 on 25th January, as referred on article 81-No. 8 and by the federal government of Ethiopia council of ministers regulation No. 505/2022. EFD was resulted by merging the former research institute (The Ethiopian Environment and Forest Research Institute (EEFRI) together with the forestry sector from the then (Environment, Forest and climate change commission) having the following powers and duties.",
+    footerData: {
+      address: "Addis Ababa, Ethiopia",
+      phone: "9546",
+      email: "dg-office@efd.gov.et",
+    },
+    canUseAttachmentFromDMS: false,
+    socials: {
+      facebook:
+        "https://web.facebook.com/Ethiopian-Forestry-Development-EFD-100064767336706/?_rdc=1&_rdr#",
+      twitter: "Ethiopian Forestry Development@EthiopianFores1",
+      youtube: "https://www.youtube.com/@infoefd",
+      website: "https://www.efd.gov.et",
+    },
+    welcomeMessage:
+      "Organized forestry research in Ethiopia was started by the establishment of Forestry Research Centre (FRC) and the then Wood Utilization Research Centre (WUARC) in 1975 and 1979, respectively under the Forestry and Wildlife Conservation Development Authority (FaWCDA). The centres were incorporated to the then Ministry of Natural Resources Development and Environmental Protection in 1992 and again re-transferred to the Ministry of Agriculture in 1995. The Federal Government of Ethiopia reorganized the National Agricultural Research System and established the then Ethiopian Agricultural Research Organization (EARO) in 1997 (Negarit Gazeta, 1997). As a result, FRC and WUARC were transferred to EARO as one research centre (FRC) and one of the research sectors of EARO (now Ethiopian Institute of Agricultural Research (EIAR)). Then, the Government of Ethiopia found it necessary to give due attention to activities of environmental protection and forest development, protection and utilization by linking forestry research with environmental protection research at an institutional level for the attainment of the objectives of the Government that resulted in the establishment of the Ministry of Environment, Forest and Climate Change.",
+  },
+  "smartoffice.moa.gov.et": {
+    appName: "Smart Office MOA",
+    organizationName: "Ministry of Agriculture",
+    logo: "/assets/ministryOfAgriculture.jpg",
+    primaryColor: "#006400",
+    moduleConfig: {
+      dms: false,
+      performance: false,
+      objective: true,
+      recordManagement: false,
+    },
+    secondaryColor: "#a52a2a",
+    footerText:
+      "The Ministry of Agriculture (MoA) is a federal government institution of Ethiopia responsible for leading and coordinating the country's agricultural development. The Ministry is mandated to formulate policies, strategies, and programs that enhance agricultural productivity, ensure food security, promote sustainable natural resource management, and support rural transformation. Through its various sectors and agencies, the Ministry oversees crop and livestock development, agricultural extension services, research coordination, and the implementation of national agricultural initiatives aimed at improving the livelihoods of farmers and contributing to the country's economic growth.",
+    footerData: {
+      address: "Addis Ababa, Ethiopia",
+      phone: "9546",
+      email: "dg-office@efd.gov.et",
+    },
+    canUseAttachmentFromDMS: false,
+    socials: {
+      facebook: "https://web.facebook.com/MoAEthiopia/?_rdc=1&_rdr#",
+      twitter: "https://x.com/MoA_Ethiopia",
+      youtube: "https://www.youtube.com/@publicrelationmoa",
+      website: "https://www.moa.gov.et",
+    },
+    welcomeMessage:
+      "The Ministry of Agriculture (MoA) has played a central role in Ethiopia’s agricultural development and transformation efforts. Over the years, the Ministry has undergone various reforms and restructuring initiatives to strengthen the country's agricultural sector and improve food security. The Ministry is responsible for guiding agricultural research, extension services, livestock and crop development, natural resource management, and rural development programs. It works closely with research institutions, regional bureaus, development partners, and stakeholders to promote sustainable agricultural practices, increase productivity, and support the livelihoods of farmers and pastoral communities. Through its ongoing efforts, the Ministry continues to contribute significantly to Ethiopia’s economic growth, environmental sustainability, and national development objectives.",
+  },
+  "smartofficedev.moa.gov.et": {
+    appName: "Smart Office MOA",
+    organizationName: "Ministry of Agriculture",
+    logo: "/assets/ministryOfAgriculture.jpg",
+    primaryColor: "#006400",
+    moduleConfig: {
+      dms: false,
+      performance: false,
+      objective: true,
+      recordManagement: true,
+    },
+    secondaryColor: "#a52a2a",
+    footerText:
+      "The Ministry of Agriculture (MoA) is a federal government institution of Ethiopia responsible for leading and coordinating the country's agricultural development. The Ministry is mandated to formulate policies, strategies, and programs that enhance agricultural productivity, ensure food security, promote sustainable natural resource management, and support rural transformation. Through its various sectors and agencies, the Ministry oversees crop and livestock development, agricultural extension services, research coordination, and the implementation of national agricultural initiatives aimed at improving the livelihoods of farmers and contributing to the country's economic growth.",
+    footerData: {
+      address: "Addis Ababa, Ethiopia",
+      phone: "9546",
+      email: "dg-office@efd.gov.et",
+    },
+    canUseAttachmentFromDMS: false,
+    socials: {
+      facebook: "https://web.facebook.com/MoAEthiopia/?_rdc=1&_rdr#",
+      twitter: "https://x.com/MoA_Ethiopia",
+      youtube: "https://www.youtube.com/@publicrelationmoa",
+      website: "https://www.moa.gov.et",
+    },
+    welcomeMessage:
+      "The Ministry of Agriculture (MoA) has played a central role in Ethiopia’s agricultural development and transformation efforts. Over the years, the Ministry has undergone various reforms and restructuring initiatives to strengthen the country's agricultural sector and improve food security. The Ministry is responsible for guiding agricultural research, extension services, livestock and crop development, natural resource management, and rural development programs. It works closely with research institutions, regional bureaus, development partners, and stakeholders to promote sustainable agricultural practices, increase productivity, and support the livelihoods of farmers and pastoral communities. Through its ongoing efforts, the Ministry continues to contribute significantly to Ethiopia’s economic growth, environmental sustainability, and national development objectives.",
+  },
+  "triadms-dev.smartoffice.aaca.gov.et": {
+    appName: "Smart Office Tria",
+    organizationName: "Tria Trading PLC",
+    logo: "/assets/TriaTradinglogo.png",
+    primaryColor: "#1b354d",
+    moduleConfig: { dms: true, performance: true, objective: true },
+    secondaryColor: "#0f5a3a",
+    footerText: "COMMITED TO EXCELLENCE",
+    footerData: {
+      address: "Addis Ababa, Ethiopia",
+      phone: "+251955232323",
+      email: "info@triaplc.com",
+    },
+    canUseAttachmentFromDMS: true,
+    socials: {
+      facebook: "",
+      twitter: "",
+      linkedin: "",
+      instagram: "",
+      youtube: "",
+      telegram: "",
+      tiktok: "",
+      website: "https://triaplc.com/",
+    },
+    welcomeMessage:
+      "At Tria Trading PLC, we empower organizations with innovative software solutions and expert consulting services. Our commitment to excellence, innovation, and customer success enables us to deliver technology that drives growth, efficiency, and lasting impact.",
+  },
+  "triadms.smartoffice.aaca.gov.et": {
+    appName: "Smart Office Tria",
+    organizationName: "Tria Trading PLC",
+    logo: "/assets/TriaTradinglogo.png",
+    primaryColor: "#1b354d",
+    moduleConfig: { dms: true, performance: true, objective: true },
+    secondaryColor: "#0f5a3a",
+    footerText: "COMMITED TO EXCELLENCE",
+    footerData: {
+      address: "Addis Ababa, Ethiopia",
+      phone: "+251955232323",
+      email: "info@triaplc.com",
+    },
+    socials: {
+      facebook: "",
+      twitter: "",
+      linkedin: "",
+      instagram: "",
+      youtube: "",
+      telegram: "",
+      tiktok: "",
+      website: "https://triaplc.com/",
+    },
+    welcomeMessage:
+      "At Tria Trading PLC, we empower organizations with innovative software solutions and expert consulting services. Our commitment to excellence, innovation, and customer success enables us to deliver technology that drives growth, efficiency, and lasting impact.",
+  },
+  "smart-dev.smart.aaca.gov.et": {
+    appName: "Smart Office Tria",
+    organizationName: "Tria Trading PLC",
+    logo: "/assets/TriaTradinglogo.png",
+    primaryColor: "#1b354d",
+    moduleConfig: { dms: true, performance: true, objective: true },
+    secondaryColor: "#0f5a3a",
+    footerText: "COMMITED TO EXCELLENCE",
+    footerData: {
+      address: "Addis Ababa, Ethiopia",
+      phone: "+251955232323",
+      email: "info@triaplc.com",
+    },
+    socials: {
+      facebook: "",
+      twitter: "",
+      linkedin: "",
+      instagram: "",
+      youtube: "",
+      telegram: "",
+      tiktok: "",
+      website: "https://triaplc.com/",
+    },
+    welcomeMessage:
+      "At Tria Trading PLC, we empower organizations with innovative software solutions and expert consulting services. Our commitment to excellence, innovation, and customer success enables us to deliver technology that drives growth, efficiency, and lasting impact.",
+  },
+  "performance-dev.smart.aaca.gov.et": {
+    appName: "Smart Office Tria",
+    organizationName: "Tria Trading PLC",
+    logo: "/assets/TriaTradinglogo.png",
+    primaryColor: "#1b354d",
+    moduleConfig: { dms: true, performance: true, objective: true },
+    secondaryColor: "#0f5a3a",
+    footerText: "COMMITED TO EXCELLENCE",
+    footerData: {
+      address: "Addis Ababa, Ethiopia",
+      phone: "+251955232323",
+      email: "info@triaplc.com",
+    },
+    socials: {
+      facebook: "",
+      twitter: "",
+      linkedin: "",
+      instagram: "",
+      youtube: "",
+      telegram: "",
+      tiktok: "",
+      website: "https://triaplc.com/",
+    },
+    welcomeMessage:
+      "At Tria Trading PLC, we empower organizations with innovative software solutions and expert consulting services. Our commitment to excellence, innovation, and customer success enables us to deliver technology that drives growth, efficiency, and lasting impact.",
+  },
+  "performance.smart.aaca.gov.et": {
+    appName: "Smart Office Tria",
+    organizationName: "Tria Trading PLC",
+    logo: "/assets/TriaTradinglogo.png",
+    primaryColor: "#1b354d",
+    moduleConfig: { dms: true, performance: true, objective: true },
+    secondaryColor: "#0f5a3a",
+    footerText: "COMMITED TO EXCELLENCE",
+    footerData: {
+      address: "Addis Ababa, Ethiopia",
+      phone: "+251955232323",
+      email: "info@triaplc.com",
+    },
+    socials: {
+      facebook: "",
+      twitter: "",
+      linkedin: "",
+      instagram: "",
+      youtube: "",
+      telegram: "",
+      tiktok: "",
+      website: "https://triaplc.com/",
+    },
+    welcomeMessage:
+      "At Tria Trading PLC, we empower organizations with innovative software solutions and expert consulting services. Our commitment to excellence, innovation, and customer success enables us to deliver technology that drives growth, efficiency, and lasting impact.",
+  },
+};
+
+/** Resolve tenant config from hostname (defaults to localhost config). */
+export const resolveTenantConfig = (
+  hostname: string = typeof window !== "undefined"
+    ? window.location.hostname
+    : "localhost",
+): TenantConfig => {
+  // Normalize host input so callers can pass full URLs or mixed-case values safely.
+  const normalizedHost = hostname
+    ?.trim()
+    .toLowerCase()
+    .replace(/^https?:\/\//, "")
+    .replace(/\/.*$/, "")
+    .replace(/:\d+$/, "");
+
+  return tenantConfigs[normalizedHost] || defaultConfig;
+};
+
+/** Apply tenant theme tokens to the document root (CSS variables, title, favicon). */
+export const applyTenantTheme = (config: TenantConfig) => {
+  if (typeof document === "undefined") {
+    return;
+  }
+
+  const root = document.documentElement;
+
+  const primary =
+    config.primaryColor?.trim() || "var(--primary-default, #18aa9d)";
+
+  root.style.setProperty("--primary", primary);
+  root.style.setProperty("--ring", primary);
+  root.style.setProperty("--sidebar-primary", primary);
+  root.style.setProperty("--accent", primary);
+  root.style.setProperty("--chart-1", primary);
+
+  if (config.organizationName) {
+    document.title = config.organizationName;
+  }
+
+  if (config.logo) {
+    let link = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
+
+    if (!link) {
+      link = document.createElement("link");
+      link.rel = "icon";
+      document.head.appendChild(link);
+    }
+
+    link.href = config.logo;
+  }
+};
+
+// Apply tenant theme before React mounts so deep-linked routes (e.g. record-management)
+// keep branding on hard refresh without relying on login/landing page components.
+if (typeof window !== "undefined") {
+  applyTenantTheme(resolveTenantConfig());
+}
+
+export const useTenantConfig = () => {
+  const hostname = useMemo(() => window.location.hostname, []);
+
+  const config = useMemo(() => resolveTenantConfig(hostname), [hostname]);
+
+  useEffect(() => {
+    applyTenantTheme(config);
+  }, [config]);
+
+  return {
+    config,
+    hostname,
+  };
+};
+
+/** Ensures tenant theme is applied on every route, including lazy-loaded modules. */
+export const TenantConfigProvider = ({ children }: { children: ReactNode }) => {
+  useTenantConfig();
+  return children;
+};
diff --git a/apps/edr-freight-web/backoffice/src/layout/components/WorkflowSection.tsx b/apps/edr-freight-web/backoffice/src/layout/components/WorkflowSection.tsx
new file mode 100644
index 000000000..2da9e2947
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/layout/components/WorkflowSection.tsx
@@ -0,0 +1,396 @@
+import { useTranslation } from "react-i18next";
+
+const WorkflowSection = () => {
+  const { t } = useTranslation();
+  const steps = [
+    {
+      id: "01",
+      name: t("landingPage.recordCreation"),
+      description: t("landingPage.recordCreationDesc"),
+      status: "complete",
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-5 w-5"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fillRule="evenodd"
+            d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V8z"
+            clipRule="evenodd"
+          />
+        </svg>
+      ),
+    },
+    {
+      id: "02",
+      name: t("landingPage.teamLeaderReview"),
+      description: t("landingPage.teamLeaderReviewDesc"),
+      status: "complete",
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-5 w-5"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
+        </svg>
+      ),
+    },
+    {
+      id: "03",
+      name: t("landingPage.directorApproval"),
+      description: t("landingPage.directorApprovalDesc"),
+      status: "current",
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-5 w-5"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fillRule="evenodd"
+            d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+            clipRule="evenodd"
+          />
+        </svg>
+      ),
+    },
+    {
+      id: "04",
+      name: t("landingPage.deputyHeadReview"),
+      description: t("landingPage.deputyHeadReviewDesc"),
+      status: "upcoming",
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-5 w-5"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fillRule="evenodd"
+            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+            clipRule="evenodd"
+          />
+        </svg>
+      ),
+    },
+    {
+      id: "05",
+      name: t("landingPage.recordOfficerProcessing"),
+      description: t("landingPage.recordOfficerProcessingDesc"),
+      status: "upcoming",
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-5 w-5"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
+          <path
+            fillRule="evenodd"
+            d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z"
+            clipRule="evenodd"
+          />
+        </svg>
+      ),
+    },
+  ];
+  return (
+    <div className="py-16 bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-800">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="lg:text-center mb-16">
+          <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-primary/10 text-primary animate-pulse">
+            {t("landingPage.streamlinedProcess")}
+          </span>
+          <h2 className="mt-4 text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-5xl">
+            <span className="block">
+              {t("landingPage.recordManagementApprovalWorkflows")}
+            </span>
+            <span className="block text-primary">
+              {t("landingPage.workflow")}
+            </span>
+          </h2>
+          <p className="mt-6 max-w-3xl text-xl text-gray-600 dark:text-gray-300 lg:mx-auto">
+            {t("landingPage.smartOfficeDescription")}
+          </p>
+        </div>
+
+        <div className="mt-12">
+          <div className="relative">
+            {/* Progress bar */}
+            <div className="hidden md:block absolute top-0 left-16 h-full w-0.5 bg-gray-200 dark:bg-gray-700">
+              <div
+                className="absolute top-0 left-0 h-full bg-primary transition-all duration-1000 ease-in-out"
+                style={{ height: "60%" }} // Adjust based on current step
+              />
+            </div>
+
+            <ul className="space-y-10 md:space-y-12">
+              {steps.map((step, stepIdx) => (
+                <li
+                  key={step.name}
+                  className="relative group transition-all duration-300 hover:scale-[1.02]"
+                  data-aos="fade-up"
+                  data-aos-delay={stepIdx * 100}
+                >
+                  <div className="relative flex items-start md:items-center">
+                    {/* Step indicator */}
+                    <div className="flex-shrink-0 relative z-10">
+                      <div
+                        className={`flex items-center justify-center w-12 h-12 rounded-full transition-all duration-300 shadow-lg ${
+                          step.status === "complete"
+                            ? "bg-primary text-white transform group-hover:scale-110"
+                            : step.status === "current"
+                            ? "bg-white dark:bg-gray-800 border-4 border-primary shadow-[var(--primary)]/30"
+                            : "bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 group-hover:border-gray-400"
+                        }`}
+                      >
+                        {step.status === "complete" ? (
+                          <svg
+                            className="w-6 h-6"
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                          >
+                            <path
+                              fillRule="evenodd"
+                              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                              clipRule="evenodd"
+                            />
+                          </svg>
+                        ) : step.status === "current" ? (
+                          <div className="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-primary opacity-75"></div>
+                        ) : step.status === "upcoming" ? (
+                          <span className="text-gray-400 dark:text-gray-500 font-medium">{step.id}</span>
+                        ) : (
+                          <span className="text-gray-400 dark:text-gray-500">{step.icon}</span>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* Step content */}
+                    <div
+                      className={`ml-6 p-6 rounded-xl flex-1 transition-all duration-300 ${
+                        step.status === "current"
+                          ? "bg-white dark:bg-gray-800 border-l-4 border-primary shadow-lg"
+                          : "bg-white dark:bg-gray-800 shadow-md group-hover:shadow-lg"
+                      }`}
+                    >
+                      <div className="flex items-center justify-between">
+                        <div>
+                          <span
+                            className={`text-xs font-semibold tracking-wider ${
+                              step.status === "complete"
+                                ? "text-primary"
+                                : "text-gray-500 dark:text-gray-400"
+                            }`}
+                          >
+                            {t("landingPage.step")} {step.id}
+                          </span>
+                          <h3 className="text-lg font-bold text-gray-900 dark:text-white mt-1">
+                            {step.name}
+                          </h3>
+                        </div>
+                        {step.status === "current" && (
+                          <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary text-white animate-pulse">
+                            {t("statusBar.In Progress")}
+                          </span>
+                        )}
+                      </div>
+                      <p className="mt-2 text-gray-600 dark:text-gray-300">{step.description}</p>
+
+                      {step.status === "current" && (
+                        <div className="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
+                          <div className="flex space-x-4">
+                            <button className="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary-700 transition-colors">
+                              {t("statusBar.Approve")}
+                            </button>
+                            <button className="px-4 py-2 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
+                              {t("landingPage.requestChanges")}
+                            </button>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        {/* Features section */}
+        <div className="mt-20 bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden">
+          <div className="grid grid-cols-1 md:grid-cols-2">
+            <div className="p-10 bg-gradient-to-br from-primary to-primary-800 text-white">
+              <h3 className="text-2xl font-bold mb-6">
+                {t("landingPage.workflowAutomationBenefits")}
+              </h3>
+              <p className="mb-8 opacity-90">
+                {t("landingPage.workflowAutomationDesc")}
+              </p>
+
+              <div className="space-y-6">
+                <div className="flex items-start">
+                  <div className="flex-shrink-0 mt-1">
+                    <div className="flex items-center justify-center h-8 w-8 rounded-full bg-white/20">
+                      <svg
+                        className="h-5 w-5"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
+                        ></path>
+                      </svg>
+                    </div>
+                  </div>
+                  <div className="ml-4">
+                    <h4 className="text-sm font-semibold">
+                      {t("landingPage.fasterApprovals")}
+                    </h4>
+                    <p className="mt-1 text-sm opacity-80">
+                      {t("landingPage.reduceDelays")}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="flex items-start">
+                  <div className="flex-shrink-0 mt-1">
+                    <div className="flex items-center justify-center h-8 w-8 rounded-full bg-white/20">
+                      <svg
+                        className="h-5 w-5"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+                        ></path>
+                      </svg>
+                    </div>
+                  </div>
+                  <div className="ml-4">
+                    <h4 className="text-sm font-semibold">
+                      {t("landingPage.auditTrail")}
+                    </h4>
+                    <p className="mt-1 text-sm opacity-80">
+                      {t("landingPage.completeRecord")}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="p-10">
+              <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
+                {t("landingPage.advancedFeatures")}
+              </h3>
+
+              <div className="grid grid-cols-1 gap-8">
+                <div className="flex items-start">
+                  <div className="flex-shrink-0">
+                    <div className="flex items-center justify-center h-12 w-12 rounded-xl bg-primary-500/5 text-primary">
+                      <svg
+                        className="h-6 w-6"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div className="ml-4">
+                    <h4 className="text-lg font-medium text-gray-900 dark:text-white">
+                      {t("landingPage.slaMonitoring")}
+                    </h4>
+                    <p className="mt-2 text-gray-600 dark:text-gray-300">
+                      {t("landingPage.slaMonitoringDesc")}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="flex items-start">
+                  <div className="flex-shrink-0">
+                    <div className="flex items-center justify-center h-12 w-12 rounded-xl bg-primary-500/5 text-primary">
+                      <svg
+                        className="h-6 w-6"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div className="ml-4">
+                    <h4 className="text-lg font-medium text-gray-900 dark:text-white">
+                      {t("landingPage.conditionalRouting")}
+                    </h4>
+                    <p className="mt-2 text-gray-600 dark:text-gray-300">
+                      {t("landingPage.conditionalRoutingDesc")}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="flex items-start">
+                  <div className="flex-shrink-0">
+                    <div className="flex items-center justify-center h-12 w-12 rounded-xl bg-primary-500/5 text-primary">
+                      <svg
+                        className="h-6 w-6"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div className="ml-4">
+                    <h4 className="text-lg font-medium text-gray-900 dark:text-white">
+                      {t("delegation.title")}
+                    </h4>
+                    <p className="mt-2 text-gray-600 dark:text-gray-300">
+                      {t("landingPage.temporaryApprovalDelegation")}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WorkflowSection;
diff --git a/apps/edr-freight-web/backoffice/src/layout/landingpage.tsx b/apps/edr-freight-web/backoffice/src/layout/landingpage.tsx
new file mode 100644
index 000000000..71d105b61
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/layout/landingpage.tsx
@@ -0,0 +1,39 @@
+import Header from "./components/Header";
+import Herosection from "./components/HeroSection";
+
+import Footer from "./components/Footer";
+import Features from "./components/Features";
+import WorkflowSection from "./components/WorkflowSection";
+import Howto from "./components/Howto";
+
+function App() {
+  return (
+    <div>
+      <div className="min-h-screen flex flex-col">
+        <Header />
+
+        <main className="flex-grow space-y-12 pt-16 md:pt-20">
+          {/* Add id attributes here for scrolling */}
+          <section id="overview">
+            <Herosection />
+          </section>
+
+          <section id="features">
+            <Features />
+          </section>
+          <section id="howto">
+            <Howto />
+          </section>
+
+          <section id="workflow">
+            <WorkflowSection />
+          </section>
+        </main>
+
+        <Footer />
+      </div>
+    </div>
+  );
+}
+
+export default App;
diff --git a/apps/edr-freight-web/backoffice/src/lib/queryClient.ts b/apps/edr-freight-web/backoffice/src/lib/queryClient.ts
index 781ffba74..5b2bcb255 100644
--- a/apps/edr-freight-web/backoffice/src/lib/queryClient.ts
+++ b/apps/edr-freight-web/backoffice/src/lib/queryClient.ts
@@ -28,6 +28,10 @@ export const queryClient = new QueryClient({
     queries: {
       retry: 1,
       staleTime: 30_000,
+      // Data freshness is driven by mutation invalidation (MutationCache above),
+      // socket pushes, and explicit polling — not by tab focus. Focus refetch
+      // just re-fires every mounted query each time the window is refocused.
+      refetchOnWindowFocus: false,
     },
   },
 });
diff --git a/apps/edr-freight-web/backoffice/src/locales/af/translation.json b/apps/edr-freight-web/backoffice/src/locales/af/translation.json
new file mode 100644
index 000000000..65969d3bb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/locales/af/translation.json
@@ -0,0 +1,977 @@
+{
+  "nav": {
+    "dashboard": "Dashboard",
+    "outgoing": "Outgoing",
+    "incoming": "Incoming",
+    "external": "External",
+    "internal": "Internal",
+    "cc": "CC",
+    "approval": "Approval",
+    "pending": "Pending",
+    "Record Management": "Record Management"
+  },
+  "initiationType": {
+    "self": "self",
+    "team": "team"
+  },
+  "dashboard": {
+    "totalOutgoing": "Total Outgoing",
+    "totalIncoming": "Total Incoming",
+    "ccRecords": "CC Records",
+    "totalApproval": "Total Approval",
+    "lastUpdated": "Last updated",
+    "refresh": "Refresh",
+    "refreshing": "Refreshing...",
+    "never": "Never",
+    "approvalStats": "Approval Stats",
+    "externalIncoming": "External Incoming",
+    "internalIncoming": "Internal Incoming",
+    "incomingStats": "Incoming Stats",
+    "outgoingStats": "Outgoing Stats",
+    "externalIncomingRecords": "External Incoming Records",
+    "internalIncomingRecords": "Internal Incoming Records",
+    "status": {
+      "inProgress": "In Progress",
+      "accepted": "Accepted",
+      "reassigned": "Reassigned",
+      "draft": "Draft",
+      "forward": "Forward",
+      "approved": "Approved",
+      "rejected": "Rejected",
+      "adjusted": "Adjusted",
+      "sent": "Sent",
+      "approve": "Approve"
+    },
+    "Percentage": "Percentage",
+    "Count": "Count",
+    "Status": "Status",
+    "Total": "Total",
+    "pieChart": "Pie Chart",
+    "barChart": "Bar Chart",
+    "table": "Table",
+    "monthlyIncoming": "Monthly Incoming Records",
+    "monthlyOutgoing": "Monthly Outgoing Records",
+    "totalInVsOut": "Total Incoming vs Outgoing",
+    "monthlyInVsOut": "Monthly Incoming vs Outgoing",
+    "weeklyInVsOut": "Weekly Incoming vs Outgoing",
+    "dailyInVsOut": "Daily Incoming vs Outgoing",
+    "exportPdf": "Export PDF",
+    "exporting": "Exporting...",
+    "print": "Print"
+  },
+  "status": {
+    "inProgress": "In Progress",
+    "accepted": "Accepted",
+    "reassigned": "Reassigned",
+    "draft": "Draft",
+    "forward": "Forward",
+    "approved": "Approved",
+    "rejected": "Rejected",
+    "adjusted": "Adjusted",
+    "sent": "Sent",
+    "all": "All"
+  },
+  "welcome": "Welcome",
+  "change_password": "Change Password",
+  "sign_out": "Sign Out",
+  "view_profile": "View Profile",
+  "user": "User",
+  "common": {
+    "back": "Back",
+    "yes": "Yes",
+    "no": "No",
+    "na": "N/A",
+    "Submit": "Submit",
+    "Cancel": "Cancel",
+    "noResult": "No Result",
+    "create": "Create",
+    "Edit": "Edit",
+    "Delete": "Delete",
+    "Deleting": "Deleting...",
+    "DeletedSuccessfully": "Deleted successfully",
+    "FailedToDelete": "Failed to delete",
+    "ConfirmDelete": "Confirm Delete",
+    "DeleteConfirmationMessage": "Are you sure you want to delete \"{{name}}\"? This action cannot be undone."
+  },
+  "collaboration": {
+    "inProgress": "In Progress",
+    "done": "Done",
+    "all": "All",
+    "list": "Collaborations"
+  },
+  "profile": {
+    "recentActivity": "Recent Activity",
+    "loading": "Loading profile...",
+    "error": "Failed to load profile",
+    "tryAgain": "Try Again",
+    "noName": "No name",
+    "signOut": "Sign Out",
+    "email": "Email",
+    "userType": "User Type",
+    "userTypes": {
+      "employee": "Employee"
+    },
+    "activity": {
+      "login": "Login",
+      "passwordChanged": "Password Changed"
+    },
+    "passwordSet": "Password Set",
+    "status": {
+      "accepted": "Accepted"
+    },
+    "positionDetails": "Position Details",
+    "positionName": "Position Name",
+    "positionKey": "Position Key",
+    "isDelegate": "Is Delegate",
+    "employeeId": "Employee ID",
+    "permissions": "Permissions",
+    "noPermissions": "No permissions assigned",
+    "accountSecurity": "Account Security",
+    "password": "Password",
+    "passwordSetStatus": "Password is set",
+    "passwordNotSetStatus": "Password not set",
+    "changePassword": "Change Password",
+    "updateProfile": "Update Profile",
+    "profile": "profile",
+    "englishName": "Please Enter name in english",
+    "amharicName": "Please Enter name in amharic",
+    "username": "Please Enter Username",
+    "phoneNumber": "Please Enter Phone Number",
+    "emailmsg": "Please Enter Email",
+    "emailRequired": "Email is required",
+    "usernameRequired": "Username is required",
+    "phoneRequired": "Phone number is required",
+    "englishNameRequired": "Name in English is required",
+    "amharicNameRequired": "Name in Amharic is required",
+    "invalidPhoneFormat": "Invalid phone number format.",
+    "validPhoneFormat": "Please enter a valid phone number in the format +2519XXXXXXXX or 09XXXXXXXX",
+    "invalidEmailFormat": "Invalid email format",
+    "validEmailFormat": "Please enter a valid email address",
+    "profileUpdateSuccess": "Profile updated successfully",
+    "profileUpdated": "Your profile is updated",
+    "profileUpdateFailed": "Failed to update profile",
+    "updating": "Updating"
+  },
+  "header": {
+    "tigrigna": "Tigrigna",
+    "affar": "Affar",
+    "somali": "Somali",
+    "oromo": "Affan Oromo",
+    "user": "User",
+    "management": "Management",
+    "notifications": "Notifications",
+    "english": "English",
+    "englishShort": "ENG",
+    "amharic": "Amharic",
+    "amharicShort": "አማ",
+    "viewProfile": "View Profile",
+    "changePassword": "Change Password",
+    "signOut": "Sign Out",
+    "settings": "Settings",
+    "addTeeter": "Add Teeter and Signature",
+    "addSignature": "Add Signature",
+    "navigation": {
+      "dashboard": "Dashboard",
+      "outgoing": "Outgoing",
+      "incoming": "Incoming",
+      "approval": "Approval",
+      "delegation": "Delegation",
+      "pending": "Pending",
+      "settings": "Settings",
+      "collaborations": "Collaborations"
+    },
+    "editProfile": "Edit Profile"
+  },
+  "addRecord": {
+    "EditRecord": "Edit Record",
+    "Record Type": "Record Type",
+    "Select Record Type": "Select Record Type",
+    "Initiation Type": "Initiation Type",
+    "Select Initiation Type": "Select Initiation Type",
+    "Receiving Unit": "Receiving Unit",
+    "Select Receiving Units": "Select Receiving Unit",
+    "Receiving Users": "Receiving Users",
+    "Select Receiving Users": "Select Receiving Users",
+    "Prefix": "Prefix",
+    "Select Prefix": "Select Prefix",
+    "Non Smart Receiving Unit": "Non Smart Receiving Unit",
+    "Enter Non Smart Receiving Organization": "Enter Non Smart Receiving Organization",
+    "To Departments": "To Departments",
+    "Select Department": "Select Departments",
+    "Preferred Language": "Preferred Language",
+    "Select Language": "Select Language",
+    "Suffix": "Suffix",
+    "Select Suffix": "Select Suffix",
+    "Subject": "Subject",
+    "Enter Subject": "Enter Subject",
+    "Letter Template": "Letter Template",
+    "Select Letter Template": "Select Letter Template",
+    "Body": "Body",
+    "External CC": "External CC",
+    "Select External CC": "Select External CC",
+    "Internal CC": "Internal CC",
+    "Select Internal CC": "Select Internal CC",
+    "Non Smart CC Unit": "Non Smart CC Unit",
+    "Enter  Non Smart CC Organization": "Enter  Non Smart CC Organization",
+    "Cancel": "Cancel",
+    "Add": "+ Add",
+    "English": "English",
+    "Amharic": "Amharic",
+    "Header": "Letter's Header",
+    "Select Header": "Select Header",
+    "No Header": "No Header",
+    "Footer": "Letter's Footer",
+    "Select Footer": "Select Footer",
+    "No Footer": "No Footer",
+    "Collaborators": "Collaborators",
+    "record": "Record",
+    "attachment": "Attachment",
+    "failedToCreateRecord": "Failed To Create Record",
+    "recordSubmittedSuccessfully": "Record Forwarded Successfully.",
+    "createRecordFirst": "Please Create a Record First To Upload Attachments.",
+    "previous": "Previous",
+    "submit": "Submit",
+    "recordNotCreatedYet": "Record Has Not Been Created Yet.",
+    "submitting": "Submitting...",
+    "selectCollaborators": "Select Collaborators",
+    "Enter CC Prefix": "Enter CC Prefix",
+    "CC Prefix": "CC Prefix",
+    "Enter CC Suffix": "Enter CC Suffix",
+    "CC Suffix": "CC Suffix",
+    "Sign Status": "Sign Status",
+    "ccUsers": "CC Users",
+    "selectCCUsers": "Select CC Users",
+    "refreshOptions": "Refresh Options",
+    "isTeamSig": "Is With Team Signature"
+  },
+  "Preview Record": "Preview Record",
+  "userRecord": {
+    "All": "All",
+    "recordCreatedAndSent": "Record created and sent",
+    "Draft": "Draft",
+    "Submitted": "Fowarded",
+    "Accepted": "Accepted",
+    "Approved": "Approved",
+    "Rejected": "Rejected",
+    "Returned": "Returned",
+    "Adjustment": "Adjustment",
+    "Sent": "Sent",
+    "Letters": "Letters",
+    "To": "To",
+    "Subject": "Subject",
+    "Date": "Date",
+    "Search": "Search",
+    "Add Record": "Add Record",
+    "Error loading records.": "Error Loading Records.",
+    "Receiver Info": "Receiver Info",
+    "No receivers": "No Receivers",
+    "No receiving unit": "No Receiving Unit",
+    "Status": "Status",
+    "Actions": "Actions",
+    "View Detail": "View Detail",
+    "Open actions menu": "Open actions menu",
+    "Approve": "Approve",
+    "Forward": "Forward",
+    "Edit": "Edit",
+    "Delete": "Delete",
+    "Download": "Download",
+    "DirectSubmit": "Direct Submit",
+    "directSubmitTitle": "Direct submit record",
+    "directSubmitDescription": "Select a signature to submit this record directly.",
+    "SelectSignature": "Signature",
+    "SelectSignaturePlaceholder": "Select a signature",
+    "noSignatureAvailable": "No signature is available for direct submit.",
+    "directSubmitSuccess": "Record submitted directly successfully.",
+    "directSubmitError": "Failed to submit the record directly.",
+    "Record approved successfully!": "Record Approved Successfully!",
+    "Failed to approve record.": "Failed To Approve Record.",
+    "Approve Record": "Approve Record",
+    "Record is deleted successfully": "Record is Deleted Successfully",
+    "Confirm Delete": "Confirm Delete",
+    "Delete Record": "Delete Record",
+    "Downloaded": "Downloaded",
+    "Download Record PDF": "Download Record PDF",
+    "Failed to download PDF.": "Failed To Download PDF.",
+    "Download successful!": "Download successful!",
+    "Confirm Forward": "Confirm Forward",
+    "Forward Record": "Forward Record",
+    "Failed to forward the record": "Failed To Forward The Record",
+    "Record forwarded successfully": "Record Forwarded Successfully",
+    "Confirm Approve": "Confirm Approve",
+    "Reference": "Reference Number",
+    "Reject": "Reject",
+    "Filter by": "Filter by",
+    "Reference Number": "Reference Number",
+    "Enter the subject of the letter": "Enter the subject of the letter",
+    "Delivered By": "Delivered By",
+    "Enter Delivered By": "Enter Delivered By",
+    "Letter Number": "Letter Number",
+    "Enter Letter Number": "Enter Letter Number",
+    "Failed to create letter": "Failed to create letter",
+    "Letter Created successfully": "Letter Created successfully",
+    "Please select file": "Please select file",
+    "Created At": "Created At",
+    "Sign Status": "Sign Status",
+    "signStatus": "Sign Status",
+    "createdAt": "Created At",
+    "View": "View",
+    "Date Received": "Date Received",
+    "Attachment": "Attachment",
+    "ReceivingUnit": "Receiver",
+    "Review your record before submission": "Review your record before submission",
+    "Back": "Back",
+    "Submit Record": "Submit Record",
+    "Submitting": "Submitting",
+    "Generating preview": "Generating preview",
+    "PDF Preview": "PDF Preview",
+    "Unable to generate preview": "Unable to generate preview",
+    "Retry": "Retry",
+    "Record Summary": "Record Summary",
+    "No subject": "No subject",
+    "Record Type": "Record Type",
+    "Not specified": "Not specified",
+    "Language": "Language",
+    "Initiation Type": "Initiation Type",
+    "Preview generation failed": "Preview generation failed"
+  },
+  "statusBar": {
+    "Pending": "Pending",
+    "Draft": "Draft",
+    "draft": "In Progress",
+    "InProgress": "In Progress",
+    "In Progress": "In Progress",
+    "active": "In Progress",
+    "Reassigned": "Reassigned",
+    "re_assigned": "Reassigned",
+    "Approved": "Approved",
+    "Accepted": "Accepted",
+    "accepted": "Accepted",
+    "Dispatched": "Sent",
+    "Adjustment": "Adjustment",
+    "adjustment": "Adjustment",
+    "Rejected": "Rejected",
+    "rejected": "Rejected",
+    "Submitted": "Fowarded",
+    "All": "All",
+    "Reject": "Reject",
+    "Accept": "Accept",
+    "Approve": "Approve",
+    "Adjust": "Adjust",
+    "Sent": "Sent",
+    "Send": "Send",
+    "Team Signature": "Pending Signatures",
+    "Team Rejected": "Team Rejected",
+    "Team Approved": "Team Approved",
+    "signed": "Signed",
+    "activated": "Activated",
+    "deactivated": "Deactivated",
+    "activate": "Activate",
+    "deactivate": "Deactivate",
+    "totalAllocations": "Total Allocations",
+    "assignmentStatistics": "Assignment Statistics",
+    "Outgoing": "Outgoing",
+    "Incoming": "Incoming",
+    "Returned": "Returned",
+    "Adjusted": "Adjusted"
+  },
+  "userIncoming": {
+    "From Date": "From",
+    "To Date": "To",
+    "Letters": "Letters",
+    "Department": "Department",
+    "Subject": "Subject",
+    "Date": "Date",
+    "Search": "Search",
+    "Error loading records.": "Error Loading Records.",
+    "Status": "Status",
+    "Actions": "Actions",
+    "View Detail": "View Detail",
+    "Open actions menu": "Open actions menu",
+    "Sending Department": "Sending Department",
+    "No Department": "No Department",
+    "No Subject": "No Subject",
+    "Sending Organization": "Sending Organization",
+    "Accept": "Accept",
+    "Assign": "Assign",
+    "Edit": "Edit",
+    "Delete": "Delete",
+    "Download": "Download",
+    "Reject": "Reject",
+    "Cancel": "Cancel",
+    "Record accepted successfully": "Record Accepted Successfully",
+    "Failed to accept record": "Failed To Accept Record",
+    "Confirm Acceptance": "Confirm Acceptance",
+    "Are you sure you want to accept this record?": "Are You Sure You Want To Accept This Record?",
+    "Confirm": "Confirm",
+    "Processing...": "Processing...",
+    "Departments": "Departments",
+    "Select department(s)...": "Select Department(s)...",
+    "Employees": "Employees",
+    "Select employee(s)...": "Select employee(s)...",
+    "Remark": "Remark",
+    "Failed to Assign a Record": "Failed To Assign a Record",
+    "Assign this record to one or more departments": "Assign This Record To One Or More Departments",
+    "Assign Record": "Assign Record",
+    "An error occurred during assignment.": "An Error Occurred During Assignment.",
+    "Enter your remarks...": "Enter Your Remarks...",
+    "Assigning...": "Assigning...",
+    "Are you sure you want to reject this record?": "Are You Sure You Want To Reject This Record?",
+    "Failed to rejected record": "Failed To Reject Record",
+    "Record rejected successfully": "Record Rejected Successfully",
+    "To": "To",
+    "ConvertedBy": "Converted By",
+    "ReceiverDepartment": "Receiving Department",
+    "ReceiverEmployee": "Receiving Employee",
+    "return": "Return",
+    "returnQues": "Are you sure you want to return this record?",
+    "returing": "Returning...",
+    "conformReturn": "Confirm Return"
+  },
+  "ApprovalPage": {
+    "Letters": "Letters",
+    "Department": "Department",
+    "Subject": "Subject",
+    "Date": "Date",
+    "Search": "Search",
+    "Error loading records.": "Error Loading Records.",
+    "Status": "Status",
+    "Actions": "Actions",
+    "View Detail": "View Detail",
+    "Open actions menu": "Open actions menu",
+    "To": "To",
+    "Receiver": "Receiver",
+    "No Subject": "No Subject",
+    "Record accepted successfully": "Record Accepted Successfully",
+    "Confirm": "Confirm",
+    "Remark": "Remark",
+    "Accept Record": "Accept Record",
+    "Record Rejected successfully": "Record Rejected Successfully",
+    "recordAdjustedSuccessfully": "Record Adjusted Successfully",
+    "confirmAdjustment": "Confirm Adjustment",
+    "adjustRecord": "Adjust Record",
+    "selectOrUploadSignature": "Please Select or Upload a Signature",
+    "selectOrUploadTeeter": "Please Select or Upload a Teeter",
+    "recordApprovedSuccessfully": "Record Approved Successfully!",
+    "failedToApproveRecord": "Failed To Approve Record.",
+    "approveRecord": "Approve Record",
+    "confirmApprove": "Confirm Approve",
+    "confirmRejection": "Confirm Rejection",
+    "rejectRecord": "Reject Record",
+    "RecordType": "Record Type",
+    "selectStamp": "Select Stamp",
+    "selectedStamp": "Selected Stamp:",
+    "signature": "Signature",
+    "yourSignature": "Your Signature:",
+    "selectedSignature": "Selected Signature:",
+    "selectSignature": "Select a signature",
+    "approving": "Approving..."
+  },
+  "viewDetail": {
+    "letterPreview": "Letter Preview",
+    "view": "View",
+    "fullScreen": "Full Screen",
+    "back": "Back",
+    "receivingOrganizations": "Receiving Organizations",
+    "receivingUserEmployees": "Receiving User Employees",
+    "sendingDepartment": "Sending Department",
+    "externalCcOrganizations": "External CC Organizations",
+    "internalCcDepartments": "Internal CC Departments",
+    "receivingDepartments": "Receiving Departments",
+    "sentDate": "Sent Date",
+    "referenceNumber": "Reference Number",
+    "attachments": "Attachments",
+    "remarks": "Remarks",
+    "loadingRemarks": "Loading Remarks...",
+    "failedToLoadRemarks": "Failed To Load Remarks.",
+    "noRemarksAvailable": "No Remarks Available For This Record.",
+    "action": "Action",
+    "comment": "Comment:",
+    "noAttachmentsAvailable": "No Attachments Available.",
+    "open": "Open",
+    "subject": "Subject",
+    "letterNumber": "Letter Number",
+    "deliveredBy": "Delivered By",
+    "personalRemark": "Personal Remark",
+    "noPersonalRemarkProvided": "No Personal Remark Available",
+    "regeneratePdf": "Regenerate PDF",
+    "regeneratingPdf": "Regenerating...",
+    "pdfRegenerationSuccess": "PDF regenerated successfully",
+    "pdfRegenerationFailed": "Failed to regenerate PDF",
+    "sendingBureau": "Sending Bureau",
+    "collaborators": "Collaborators",
+    "recordDetail": "Record Detail",
+    "commentorEmployee": "Commentor Employee",
+    "commentorDepartment": "Commentor Department",
+    "noComment": "No Comment"
+  },
+  "PDF": {
+    "dropFilesHere": "Drop files here",
+    "dragDropInstruction": "Drag And Drop Files Here, Or Click To Select Files",
+    "youCanUpload": "You Can Upload",
+    "removeFile": "Remove File",
+    "filesUpTo": "Files (up to ",
+    "aFileWith": "A File With",
+    "file": "File",
+    "wasRejected": "Was Rejected",
+    "uploaded": "Uploaded",
+    "failedToUpload": "Failed To Upload",
+    "uploading": "Uploading...",
+    "cannotUploadMoreThan": "Cannot Upload More Than "
+  },
+  "convert": {
+    "recordConverted": "Record Converted Successfully.",
+    "selectSeal": "Please Select a Seal.",
+    "convertRecord": "Convert Record",
+    "recordType": "Record Type:",
+    "subject": "Subject:",
+    "convertAndDispatch": "Convert & Dispatch",
+    "selectSealLabel": "Select Seal:",
+    "loadingSeals": "Loading seals...",
+    "selectSealPlaceholder": "-- Select a Seal --",
+    "selectedSealPreview": "Selected Seal Preview:"
+  },
+  "delegation": {
+    "delegatedPosition": "Delegated Position",
+    "selectDelegatedPosition": "Select Delegated Position",
+    "delegateTo": "Delegate To (Employee)",
+    "selectEmployee": "Select Employee",
+    "noEmployeesAvailable": "No Employees Available For This Position",
+    "startDate": "Start Date",
+    "pickDate": "Pick a date",
+    "endDate": "End Date",
+    "update": "Update",
+    "save": "Save",
+    "title": "Delegation",
+    "newDelegation": "New Delegation",
+    "editDelegation": "Edit Delegation",
+    "addDelegation": "Add Delegation",
+    "position": "Delegated Position",
+    "active": "Active",
+    "delegator": "Delegator",
+    "delegatedEmployee": "Delegated Employee",
+    "currentEndDate": "Current End Date",
+    "select": " Select",
+    "acting": "Acting As",
+    "switchRole": "Switch Role",
+    "successDelete": "Delegation is deleted successfully",
+    "activeDelegationExists": "active delegation exists and either edit the active delegation or delete and create again"
+  },
+  "signatureUpload": {
+    "signature": "Signature",
+    "teeter": "Teeter",
+    "uploadSignature": "Upload Signature",
+    "uploadTeeter": "Upload Teeter",
+    "uploadSignatureNote": "Upload Signature (PNG only)",
+    "uploadTeeterNote": "Upload Teeter (PNG only)",
+    "uploadedSignature": "Uploaded Signature:",
+    "uploadedTeeter": "Uploaded Teeter:",
+    "enterFileName": "Enter File Name (without extension)",
+    "preview": "Preview:",
+    "upload": "Upload",
+    "uploading": "Uploading...",
+    "remove": "Remove",
+    "removing": "Removing...",
+    "removedSuccess": "Removed Successfully.",
+    "removeTeeterFailed": "Remove Teeter Failed",
+    "removeFailed": "Failed To Remove.",
+    "selectPngFirst": "Please Select a PNG File First.",
+    "onlyPngAllowed": "Only PNG Files Are Allowed.",
+    "signatureExists": "The Signature Already Exists. Remove It To Upload a New One.",
+    "uploadSuccess": "Upload Successful!",
+    "uploadError": "Upload Error:",
+    "uploadFailed": "Upload Failed.",
+    "openSignatureForm": "Open Signature Drawer"
+  },
+  "assignment": {
+    "assignedBy": "Assigned By",
+    "assignedTo": "Assigned To",
+    "assignedOn": "Assigned On:",
+    "comment": "Comment:",
+    "assignmentFlow": "Assignment Flow",
+    "noAssignments": "No Assignments Have Been Made For This Record Yet.",
+    "responded": "Responded"
+  },
+  "auth": {
+    "welcomeBack": "Welcome Back",
+    "enterCredentials": "Please Enter Your Credentials To Continue",
+    "email": "Email",
+    "phoneNumber": "Phone Number",
+    "username": "User Name",
+    "password": "Password",
+    "rememberMe": "Remember Me",
+    "forgotPassword": "Forgot Password?",
+    "loggingIn": "Logging In...",
+    "login": "Login",
+    "welcomeHeadline": "Welcome to Your Smart Office",
+    "paperlessOffice": "Paperless Office",
+    "welcomeSubtext": "Sign In To Streamline Your Workflow and Eliminate The Clutter.",
+    "emailAddress": "Email address",
+    "err": "Invalid Ethiopian Phone Number It Should Start With +251",
+    "invalidEmail": "Please enter a valid email address"
+  },
+  "msg": {
+    "sent": "Letter is sent",
+    "failedToCreate": "Failed To Create Record",
+    "failedToGetUrl": "Failed To Get Upload URL",
+    "registrationSuccess": "Registered. We Have Sent An SMS To Set Your Password Successfully.",
+    "errorOccurred": "An Error Occurred.",
+    "pdfRegenerated": "PDF Regenerated Successfully.",
+    "approveFailed": "Failed To Approve Record.",
+    "approveSuccess": "Record Approved Successfully",
+    "selectPrompt": "Please Select a Stamp.",
+    "extendedSuccess": "Delegation Extended Successfully.",
+    "letter": "Letter",
+    "approvedSuccess": "Record Approved Successfully!",
+    "submittedSuccess": "Record Submitted Successfully!",
+    "reviewSuccess": "Record Made Under Review Successfully!",
+    "markedForAdjustment": "Marked For Adjustment",
+    "sentToOfficer": "Sent To Record Officer",
+    "errorSendingToOfficer": "Error Sending To Record Officer",
+    "success": "Delegation Successful.",
+    "failed": "Delegation Failed.",
+    "deletedSuccess": "Delegation Deleted Successfully.",
+    "deleteFailed": "Failed To Delete Delegation.",
+    "failedCreateOrGetUrl": "Failed To Create Record or Get Upload URL.",
+    "sentAndUploadedSuccess": "Letter Sent and File Uploaded Successfully.",
+    "failedSendOrUpload": "Failed To Send Letter or Upload File.",
+    "successassign": "Record Assigned Successfully.",
+    "submittedWithAttachments": "Record and Attachments Submitted.",
+    "createFailed": "Failed To Create Record.",
+    "refreshedSuccess": "Refreshed Successfully.",
+    "refreshFailed": "Failed To Refresh.",
+    "redirecting": "Redirecting...",
+    "loginSuccess": "Login Successful.",
+    "receivingDepartmentRequired": "At least one receiving department is required",
+    "receivingUnitRequired": "At least one receiving unit is required",
+    "recordTypeRequired": "Record type is required",
+    "initiationTypeRequired": "Initiation type is required",
+    "subjectRequired": "Subject is required",
+    "preferredLanguageRequired": "Preferred language is required",
+    "bodyRequired": "Body is required",
+    "sincerelyTextRequired": "Sincerely text is required",
+    "headerRequired": "Header is required",
+    "footerRequired": "Footer is required",
+    "accessDenied": "Access Denied",
+    "accessDeniedmsg": "You Cannot Enter This Page Because You Have an Active Delegation. Please Remove The Delegation To Continue.",
+    "accessDeniedmsg2": "You Cannot Enter This Page Because You Have an Active Delegation. You Cannot Delegate If You Are Already Delegated By Another Employee",
+    "accessDeniedmsg3": "You cannot access Record Management Module because you are not registered to this organization or you are not assigned any position"
+  },
+  "landingPage": {
+    "smartOffice": "EDR Smart Office",
+    "signIn": "Sign In",
+    "signUp": "Sign Up",
+    "overview": "Overview",
+    "features": "Features",
+    "workflow": "Workflow",
+    "manual": "Manual",
+    "digitalTransformation": "Digital transformation for modern government operations.",
+    "facebook": "Facebook",
+    "twitter": "Twitter",
+    "telegram": "Telegram",
+    "tiktok": "TikTok",
+    "contactUs": "Contact Us",
+    "quickLinks": "Quick Links",
+    "copyright": "Tria Plc - Copyright ©",
+    "rightsReserved": "All Rights Reserved - Powered by Tria",
+    "address": "Lingo Tower Infront of Sheger House, Bole, Addis Ababa, Ethiopia",
+    "platformSystem": "Platform System",
+    "initiativeDescription": "A digital transformation initiative for the Ethio-Djibouti Railway designed to modernize government office operations with cutting-edge tech.",
+    "getStarted": "Get Started",
+    "learnMore": "Learn More",
+    "sops": "SOPS",
+    "smartOfficePlatformSystem": "Smart Office Platform System",
+    "revolutionDescription": "Revolutionizing government operations with AI-powered workflow automation and real-time analytics.",
+    "liveDemo": "Live Demo Available",
+    "outgoingRecords": "Outgoing Records",
+    "outgoingRecordsDesc": "Create and send internal or external records with attachments and hierarchical approval workflows.",
+    "incomingRecords": "Incoming Records",
+    "incomingRecordsDesc": "View, accept, and respond to received records, with the ability to assign them to relevant departments.",
+    "approvalWorkflows": "Approval Workflows",
+    "approvalWorkflowsDesc": "Digital letter and signature support with hierarchical approval processes that match your office structure.",
+    "interactiveDashboard": "Interactive Dashboard",
+    "interactiveDashboardDesc": "Real-time tracking of incoming and outgoing records, with department-level summaries and pending approvals.",
+    "organizedFolders": "Organized Folders",
+    "organizedFoldersDesc": "Categorize records using a structured system with advanced search and filtering capabilities.",
+    "securityAccessControl": "Security & Access Control",
+    "securityAccessControlDesc": "Role-based access with complete audit trails for all document actions and modifications.",
+    "powerfulFeaturesTitle": "Powerful Features",
+    "powerfulFeaturesSubtitle": "Streamline Your Document Workflow",
+    "powerfulFeaturesDesc": "Our comprehensive tools help you manage records efficiently while maintaining security and compliance.",
+    "feature1": "Faster Approval Times",
+    "feature2": "More Organized Records",
+    "feature3": "Audit Compliance",
+    "documentWorkflow": "Document Workflow",
+    "recordCreation": "Record Creation",
+    "recordCreationDesc": "User creates a new record with attachments and metadata",
+    "teamLeaderReview": "Team Leader Review",
+    "teamLeaderReviewDesc": "First level approval by immediate supervisor",
+    "directorApproval": "Director Approval",
+    "directorApprovalDesc": "Department head reviews and approves",
+    "deputyHeadReview": "Deputy Head Review",
+    "deputyHeadReviewDesc": "Final administrative approval before submission",
+    "recordOfficerProcessing": "Record Officer Processing",
+    "recordOfficerProcessingDesc": "Official registration and dispatch",
+    "streamlinedProcess": "Streamlined Process",
+    "recordManagementApprovalWorkflows": "Record Management Approval Workflows",
+    "smartOfficeDescription": "Smart Office mirrors your organizational hierarchy with customizable digital workflows that ensure proper oversight and accountability.",
+    "step": "STEP",
+    "requestChanges": "Request Changes",
+    "workflowAutomationBenefits": "Workflow Automation Benefits",
+    "workflowAutomationDesc": "Our intelligent workflow system reduces processing time by 65% while ensuring compliance with your organizational policies.",
+    "fasterApprovals": "65% Faster Approvals",
+    "reduceDelays": "Reduce bureaucratic delays",
+    "auditTrail": "100% Audit Trail",
+    "completeRecord": "Complete record of all actions",
+    "advancedFeatures": "Advanced Features",
+    "slaMonitoring": "SLA Monitoring",
+    "slaMonitoringDesc": "Automatic tracking of service level agreements with escalation alerts for delays.",
+    "conditionalRouting": "Conditional Routing",
+    "conditionalRoutingDesc": "Smart rules automatically route documents based on content, value, or department.",
+    "temporaryApprovalDelegation": "Temporary approval delegation for vacations with full audit tracking.",
+    "login": "Login to the System",
+    "step1": "1. Click on the",
+    "headerBtn": "button in the header",
+    "step2": "2. Enter your username and password provided by your administrator",
+    "step3": "3. Click the",
+    "accessBtn": "button to access the system",
+    "note": "Note",
+    "forgotIntro": "If you forget your password, contact your system administrator for reset.",
+    "dashboardTitle": "Dashboard Overview",
+    "dashboardDesc": "The dashboard provides a comprehensive overview of your record activities:",
+    "recordsCreated": "Records Created",
+    "recordsTotal": "Total records you've initiated",
+    "recordsReceived": "Records Received:",
+    "incomingDocs": "Incoming documents from others",
+    "breakdown": "Internal/External Breakdown:",
+    "visuals": "Visual charts showing document types",
+    "approvalStatus": "Approval Status",
+    "approvalTypes": "Pending, approved, or rejected records",
+    "quickActions": "Quick Actions",
+    "createOrCheck": "Create new records or check pending approvals directly from the dashboard",
+    "recentActivity": "Recent Activity",
+    "trackUpdates": "Track the latest updates on your documents",
+    "manageOut": "Managing Outgoing Records",
+    "createNew": "Creating New Records",
+    "goToTab": "Navigate to the",
+    "clickBtn": "Click button",
+    "fillFields": "Fill in all required fields (record type, receiver, subject, etc.)",
+    "attach": "Attach supporting documents if needed",
+    "saveOrSubmit": "Save as draft or submit for approval",
+    "trackStatus": "Tracking Record Status",
+    "notForwarded": "This item is not yet forwarded. This items can be edited and deleted",
+    "awaiting": "This item is awaiting acceptance or approval.",
+    "accepted": "This item has been accepted and is awaiting approval.",
+    "approvedSent": "This item has been approved and sent to record officer to be dispatched.",
+    "returned": "This item has been returned for adjustments or additional information. Please review the comments.",
+    "rejected": "This item has been rejected.",
+    "sent": "This item has been sent to the recipients.",
+    "returnedByOfficer": "This item has been returned by the Record Officer.",
+    "monitor": "Monitor your records through each approval stage in the workflow",
+    "manageIncoming": "Managing Incoming Records",
+    "incomingTypes": "Types of Incoming Records",
+    "fromOthers": "From other organizations",
+    "withinOrg": "Within your organization",
+    "copied": "Copied for your information",
+    "processIncoming": "Processing Incoming Records",
+    "readDoc": "Open and read the full document",
+    "acknowledge": "Acknowledge receipt of the document",
+    "forward": "Forward to another team member if needed",
+    "archive": "Archive",
+    "fileRef": "File for future reference",
+    "apprvalworkflow": "Approval Workflow",
+    "process": "Approval Process",
+    "internalFlow": "Internal Records Workflow:",
+    "creator": "Creator",
+    "leader": "Team Leader",
+    "director": "Director",
+    "officer": "Record Officer",
+    "externalFlow": "External Records Workflow:",
+    "actions": "Approval Actions",
+    "delegation": "Delegation Management",
+    "delegateInfo": "When you're unavailable, you can delegate your approval authority to another team member:",
+    "delegateNav": "Navigate to the",
+    "selectColleague": "Select a colleague from your organization structure",
+    "setDates": "Set the start and end dates for the delegation period",
+    "setPerms": "Specify which permissions to delegate",
+    "saveDelegate": "Save the delegation settings",
+    "autoExpire": "Delegations automatically expire on the end date you specify.",
+    "collab": "Collaboration Workspace",
+    "collabInfo": "The collaboration tab brings together records that require input from multiple team members:",
+    "viewDocs": "View all collaborative documents in one place",
+    "addComments": "Add your comments or annotations",
+    "approve": "Approve with your digital signature when consensus is reached",
+    "trackChanges": "Track changes and version history",
+    "realTime": "Real-time Updates",
+    "liveChanges": "See changes from other collaborators as they happen",
+    "notifications": "Notification System",
+    "alerts": "Get alerts when others contribute to the document",
+    "signatureMgmt": "Teeter & Signature Management",
+    "leadersOnly": "Team leaders and above can manage their digital teeter and signature:",
+    "signatureTitle": "Teeter & Signature",
+    "uploadTeeter": "Upload a clear image of your official teeter",
+    "uploadSignature": "Create or upload your digital signature",
+    "defaultSignature": "Set as default for all approvals",
+    "updateDesignation": "Update whenever your official designation changes",
+    "security": "Security Notice:",
+    "encrypted": "Your teeter and signature are encrypted and only used for official approvals.",
+    "recordModule": "Record Management Module",
+    "guide": "Comprehensive guide for using the Smart Office Platform System",
+    "back": "Back to Dashboard",
+    "moduleGuide": "Module Guide",
+    "previous": "Previous",
+    "next": "Next",
+    "addTeeterAndSignature": "Add digital teeter and signature",
+    "returnWithComments": "Return with comments",
+    "requestModifications": "Request modifications",
+    "screenshotOf": "Screenshot of",
+    "fasterApproval": "Faster Approval",
+    "auditReady": "Audit Ready",
+    "organizedRecords": "Organized Records",
+    "tab": "Tab",
+    "click": "Click",
+    "button": "Button"
+  },
+  "organization": {
+    "organizations": "Organizations",
+    "newOrganization": "New Organization",
+    "organizationName": "Organization name",
+    "createdOn": "Created on",
+    "numberOfUsers": "Number of users",
+    "assignedAdmin": "Assigned admin",
+    "isGovernmentOrganization": "Is Government Organization",
+    "createNew": "Create New",
+    "edit": "Edit",
+    "enterDetails": "Enter the details for the new organization. All fields marked with an asterisk (*) are required.",
+    "nameAmharic": "Name (Amharic)",
+    "nameEnglish": "Name (English)",
+    "key": "Key",
+    "organizationType": "Organization Type",
+    "loadingOrganizationTypes": "Loading organization types...",
+    "errorLoadingOrganizationTypes": "Error loading organization types",
+    "noOrganizationTypesAvailable": "No organization types available",
+    "parentOrganization": "Parent Organizational (optional)",
+    "loading": "Loading...",
+    "selectOrganization": "Select organization",
+    "noOrganization": "No organization",
+    "isOrganizationPublic": "Is Organization Public",
+    "selectOrganizationType": "Select organization type",
+    "deleteOrganization": "Delete Organization",
+    "confirmDelete": "Are you sure you want to permanently delete?",
+    "cannotUndo": "This action cannot be undone.",
+    "deleting": "Deleting ...",
+    "delete": "Delete",
+    "viewOrganization": "View Organization",
+    "editOrganization": "Edit Organization",
+    "englishNameRequired": "English name is required",
+    "amharicNameRequired": "Amharic name is required",
+    "invalidEmail": "Invalid email address",
+    "usernameMinLength": "Username must be at least 3 characters",
+    "organizationRequired": "Organization is required",
+    "invalidPhoneNumber": "Phone number must be a valid Ethiopian number",
+    "registerAdminTitle": "Register Organization Admin",
+    "registerAdminDescription": "Fill in the required fields to register",
+    "enterEnglishName": "Enter English name",
+    "enterAmharicName": "Enter Amharic name",
+    "email": "Email",
+    "emailExample": "email@example.com",
+    "username": "Username",
+    "enterUsername": "Enter a username",
+    "phoneNumber": "Phone Number",
+    "phoneNumberExample": "e.g. 0912345678 or +251912345678",
+    "organization": "Organization",
+    "registering": "Registering...",
+    "registerAdmin": "Register Admin",
+    "dashboard": "Dashboard",
+    "organizationAdmins": "Organization Admins",
+    "externalUsers": "External Users",
+    "userManagement": "User Management",
+    "content": "Content",
+    "bulkUpload": "Bulk Upload",
+    "positionTypes": "Position Types",
+    "activityLog": "Activity Log",
+    "setting": "Setting",
+    "loadingAdmins": "Loading admins...",
+    "errorLoadingAdmins": "Error loading admin data",
+    "retry": "Retry",
+    "assignAdmin": "Assign Admin",
+    "addAdmin": "Add Admin",
+    "adminAssignedSuccess": "Admin assigned successfully",
+    "userAssignedSuccess": "User assigned successfully",
+    "userAssignFailed": "User couldn't be assigned",
+    "assignAdminToOrganization": "Assign Admin to Organization",
+    "assignAdminInstructions": "Select an organization and a user to assign as an admin.",
+    "users": "Users",
+    "searchUsers": "Search users...",
+    "noUsersFound": "No users found",
+    "assigning": "Assigning...",
+    "assignUser": "Assign User",
+    "pendingExternalUsers": "Pending External Users",
+    "activateUserPrompt": "Activate this user?",
+    "activateUserDescription": "This will enable the user to access the platform",
+    "activating": "Activating...",
+    "yesActivate": "Yes, activate",
+    "statistics": "Statistics",
+    "totalOrganizations": "Total Organizations",
+    "recentOrganizations": "Recent Organizations",
+    "viewMore": "View more →",
+    "recentActivities": "Recent Activities",
+    "moreActivities": "More activities →",
+    "noRecentActivities": "No recent activities found",
+    "updatedOn": "Created On",
+    "settings": "Settings",
+    "Archive Users": "Archive Users"
+  },
+  "userIncomingretun": {
+    "View Detail": "View Detail",
+    "Open actions menu": "Open actions menu",
+    "Actions": "Actions",
+    "convertRecord": "Convert Record",
+    "return": "Return",
+    "returning": "Returning...",
+    "returing": "Returning...",
+    "conformReturn": "Confirm Return",
+    "Please provide a reason for returning this record.": "Please provide a reason for returning this record.",
+    "ReturnComment": "Return Comment",
+    "EnterReturnReason": "Enter reason for returning",
+    "CommentRequired": "Comment is required",
+    "RecordReturnedSuccessfully": "Record returned successfully",
+    "FailedToReturnRecord": "Failed to return record"
+  },
+  "okrDashboard": {
+    "brandEyebrow": "Objective Intelligence",
+    "title": "OKR Performance Dashboard",
+    "description": "A focused overview of top performance, department momentum, and upcoming OKR analytics.",
+    "planYear": "Plan Year",
+    "notSelected": "Not selected",
+    "topPerformerEmployee": "Top Performer Employee",
+    "topPerformerDepartment": "Top Performer Department",
+    "employeePlaceholderName": "Awaiting API data",
+    "departmentPlaceholderName": "Awaiting API data",
+    "employeeHelper": "The leading employee will appear here once the dashboard API is connected.",
+    "departmentHelper": "The highest performing department will appear here once the dashboard API is connected.",
+    "employeeScore": "Employee score",
+    "departmentScore": "Department score",
+    "placeholderOneTitle": "Strategic Signal",
+    "placeholderOneHelper": "Reserved for the next OKR insight from the analytics API.",
+    "placeholderTwoTitle": "Execution Health",
+    "placeholderTwoHelper": "Reserved for rollout, risk, or completion insight.",
+    "comingSoon": "Coming soon",
+    "waitingForApi": "Waiting for API",
+    "analyticsTitle": "OKR Analytics",
+    "analyticsDescription": "Select a date range and chart type to preview the dashboard visualization.",
+    "dateRange": "Date Range",
+    "chartType": "Chart Type",
+    "thisMonth": "This Month",
+    "thisQuarter": "This Quarter",
+    "thisYear": "This Year",
+    "customRange": "Custom Range",
+    "barChart": "Bar Chart",
+    "lineChart": "Line Chart",
+    "areaChart": "Area Chart",
+    "chartTitle": "Performance Trend",
+    "chartSubtitle": "Sample data is displayed until the API response is ready.",
+    "sampleData": "Sample Data",
+    "achievement": "Achievement",
+    "target": "Target"
+  }
+}
diff --git a/apps/edr-freight-web/backoffice/src/locales/am/translation.json b/apps/edr-freight-web/backoffice/src/locales/am/translation.json
new file mode 100644
index 000000000..a37525807
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/locales/am/translation.json
@@ -0,0 +1,7397 @@
+{
+  "auditLog": {
+    "filters": {
+      "title": "ማጣሪያዎች",
+      "clear": "ማጣሪያዎችን አጽዳ",
+      "searchPlaceholder": "ተግባራትን ይፈልጉ...",
+      "module": "ሞጁል",
+      "allModules": "ሁሉም ሞጁሎች",
+      "action": "ተግባር",
+      "allActions": "ሁሉም ተግባራት",
+      "status": "ሁኔታ",
+      "allStatuses": "ሁሉም ሁኔታዎች",
+      "dateRange": "የቀን ክልል",
+      "last7Days": "ባለፉት 7 ቀናት",
+      "last30Days": "ባለፉት 30 ቀናት"
+    },
+    "stats": {
+      "totalActivities": "ጠቅላላ ተግባራት",
+      "successRate": "የስኬት መጠን",
+      "dailyAverage": "የቀን አማካይ",
+      "uniqueUsers": "ለይቶ የታወቁ ተጠቃሚዎች",
+      "topActions": "ከፍተኛ ተግባራት",
+      "times": "ጊዜ"
+    },
+    "card": {
+      "details": "ዝርዝሮች",
+      "ip": "IP",
+      "location": "ቦታ",
+      "resource": "ሀብት"
+    },
+    "export": {
+      "title": "የእንቅስቃሴ መዝገቦችን ወደ ውጪ ላክ",
+      "description": "ለእንቅስቃሴ መዝገቦችዎ የኤክስፖርት አማራጮችን ይምረጡ።",
+      "fileName": "የፋይል ስም",
+      "fileNamePlaceholder": "የፋይል ስም ያስገቡ",
+      "format": "የኤክስፖርት ቅርጸት",
+      "includeDetails": "ዝርዝር መረጃን ያካትቱ",
+      "includeDateRange": "የቀን ክልልን በኤክስፖርት ውስጥ ያካትቱ",
+      "cancel": "ይቅር",
+      "export": "ወደ ውጪ ላክ",
+      "success": "{{count}} መዝገቦችን በ{{format}} ቅርጸት በመላክ ላይ",
+      "csv": "CSV",
+      "json": "JSON",
+      "excel": "ኤክሴል"
+    },
+    "page": {
+      "fetchSuccess": "የኦዲት መዝገቦች ተጭነዋል",
+      "fetchError": "የኦዲት መዝገቦችን መጫን አልተሳካም",
+      "fetchKeyError": "ለኦዲት መዝገቦች ሞጁል ቁልፍ (moduleKey) አልተገኘም",
+      "activitiesFound": "{{count}} ተግባራት ተገኝተዋል",
+      "systemUser": "ሲስተም",
+      "viewDetails": "ዝርዝሩን እይ",
+      "searchActivity": "እንቅስቃሴ ይፈልጉ...",
+      "refresh": "አድስ",
+      "export": "ወደ ውጪ ላክ",
+      "activeLogs": "ንቁ መዝገቦች",
+      "cardView": "የካርድ እይታ",
+      "tableView": "የሰንጠረዥ እይታ",
+      "cards": "ካርዶች",
+      "table": "ሰንጠረዥ",
+      "showing": "እያሳየ ነው",
+      "of": "ከ",
+      "totalActivities": "ጠቅላላ ተግባራት",
+      "prev": "ቀዳሚ",
+      "next": "ቀጣይ",
+      "activeFilter": "ገባሪ ማጣሪያ",
+      "activeFilter_other": "ገባሪ ማጣሪያዎች",
+      "clear": "አጽዳ",
+      "loadingAc": "የተግባር መዝገቦችን በመጫን ላይ...",
+      "noActivities": "ምንም ተግባራት አልተገኙም",
+      "tryAdjusting": "የሚፈልጉትን ለማግኘት ማጣሪያዎችዎን ለማስተካከል ይሞክሩ።"
+    },
+    "severity": {
+      "critical": "ወሳኝ",
+      "high": "ከፍተኛ",
+      "medium": "መካከለኛ",
+      "low": "ዝቅተኛ"
+    },
+    "status": {
+      "success": "ተሳክቷል",
+      "failure": "አልተሳካም",
+      "warning": "ማስጠንቀቂያ",
+      "pending": "በመጠባበቅ ላይ"
+    },
+    "table": {
+      "time": "ጊዜ",
+      "user": "ተጠቃሚ",
+      "action": "ተግባር",
+      "description": "መግለጫ",
+      "module": "ሞጁል",
+      "severity": "ክብደት",
+      "status": "ሁኔታ",
+      "entity": "አካል"
+    },
+    "detail": {
+      "title": "የኦዲት ምዝግብ ዝርዝር",
+      "description": "ይህንን ኦዲት ግብዓት ዝርዝር ይመልከቱ",
+      "action": "ተግባር",
+      "entity": "አካል",
+      "timestamp": "የጊዜ ምልክት",
+      "changes": "የተደረጉ ለውጦች"
+    },
+    "noRecords": "ምንም የኦዲት ምዝግብ አልተገኘም"
+  },
+  "activityLogPage": {
+    "title": "የእንቅስቃሴ መዝገብ",
+    "export": "ኤክስፖርት",
+    "searchPlaceholder": "መዝገቦችን ይፈልጉ...",
+    "filterByModule": "በሞጁል ይለዩ",
+    "allModules": "ሁሉም ሞጁሎች",
+    "filterByAction": "በድርጊት ይለዩ",
+    "allActions": "ሁሉም ድርጊቶች",
+    "modules": {
+      "Organizations": "ድርጅቶች",
+      "Users": "ተጠቃሚዎች",
+      "Templates": "አብነቶች",
+      "Authentication": "ማረጋገጫ",
+      "Settings": "ቅንብሮች",
+      "Reports": "ሪፖርቶች"
+    },
+    "actions": {
+      "CREATE": "መፍጠር",
+      "UPDATE": "ማዘመን",
+      "DELETE": "መሰረዝ",
+      "LOGIN": "መግባት",
+      "EXPORT": "ኤክስፖርት"
+    },
+    "table": {
+      "time": "ጊዜ",
+      "action": "ድርጊት",
+      "description": "መግለጫ",
+      "performedBy": "የተከናወነው በ",
+      "module": "ሞጁል",
+      "status": "ሁኔታ",
+      "statusLabels": {
+        "success": "ተሳክቷል",
+        "failure": "አልተሳካም",
+        "pending": "በመጠባበቅ ላይ"
+      },
+      "noLogs": "ምንም የእንቅስቃሴ መዝገብ አልተገኘም።"
+    }
+  },
+  "nav": {
+    "addNew": "አዲስ ይጨምሩ",
+    "emptyState": "ምንም አልተገኘም",
+    "externalForYourReference": "ውጫዊ እንዲያውቁት",
+    "internal_memo": "የዉስጥ ማስታወሻ",
+    "dashboard": "ዳሽቦርድ",
+    "tagBasedReferenceNumber": "በመለያ የተመሰረተ ማጣቀሻ ቁጥር",
+    "branch": "ቅርንጫፍ",
+    "outgoing": "ወጪ መዝገቦች",
+    "incoming": "ገቢ",
+    "tagBasedReference": "በመለያ የተመሰረተ ማጣቀሻ ቁጥር",
+    "selectTag": "ምልክት ይምረጡ",
+    "non_smart_user": "የሲስተሙ ተጠቃሚ ያልሆኑ",
+    "external_non_smart_user": "ዉጫዊ ሲስተሙ ተጠቃሚ ያልሆኑ",
+    "external": "ዉጫዊ",
+    "internal": "ዉስጣዊ",
+    "cc": "ግልባጭ",
+    "forYourReference": "እንዲያውቁት",
+    "forYourReferenceExternal": "እንዲያውቁት (ውጫዊ)",
+    "forYourReferenceInternal": "እንዲያውቁት (ውስጣዊ)",
+    "approval": "ማፅደቅ",
+    "pending": "በመጠባበቅ ላይ",
+    "Record Management": "የመዝገብ አስተዳደር",
+    "admin": "የሳይት አስተዳደር",
+    "modules": "ሞጁሎች",
+    "moduleNavigationHint": "በሁሉም ሞዱሎች የአሰሳ ዝርዝሮችን ለማግኘት ይጫኑ",
+    "deputyMessage": "የምክትል አመራሮች መልእክት",
+    "officeHeadMessage": "የሃላፊ መልእክት",
+    "orgGoal": "የድርጅታዊ ግቦች",
+    "news": "ዜና",
+    "other": "ሌሎች",
+    "homePage": "ወደ መነሻ ገጽ",
+    "myRecord": "የእኔ መዝገቦች",
+    "submitRecord": "መዝገብ አስገባ",
+    "direct": "ቀጥታ",
+    "Modules": "ሞጁሎች",
+    "performanceManagement": "የአፈጻጸም አስተዳደር",
+    "objectiveManagement": "የግብ አስተዳደር",
+    "performance": "የአፈጻጸም አስተዳደር",
+    "document": "የሰነድ አስተዳደር",
+    "PerformanceManagement": "የአፈጻጸም አስተዳደር",
+    "DocumentManagement": "የሰነድ አስተዳደር",
+    "Complaints": "ቅሬታዎች"
+  },
+  "habeshaCalendar": {
+    "selectDate": "ቀን ይምረጡ",
+    "selectYear": "ዓመት ይምረጡ",
+    "selectMonth": "ወር ይምረጡ",
+    "selectDay": "ቀን ይምረጡ",
+    "year": "ዓመት",
+    "month": "ወር",
+    "day": "ቀን",
+    "clear": "አጽዳ",
+    "cancel": "ሰርዝ",
+    "select": "ምረጥ",
+    "currentYear": "የአሁኑ ዓመት",
+    "habeshaCalendar": "የሀበሻ ዘመን አቆጣጠር",
+    "gregorianCalendar": "የግሪጎሪያን ዘመን አቆጣጠር"
+  },
+  "rating": {
+    "serviceRating": "የአገልግሎት ደረጃ",
+    "rateYourExperience": "የአገልግሎታችንን ደረጃ ይስጡ",
+    "veryPoor": "በጣም መጥፎ",
+    "poor": "መጥፎ",
+    "normal": "መካከለኛ",
+    "good": "ጥሩ",
+    "excellent": "በጣም ጥሩ"
+  },
+  "preview": {
+    "title": "የመዝገብ ቅድመ እይታ",
+    "generating": "ቅድመ እይታ እየተዘጋጀ...",
+    "failed": "ቅድመ እይታ ማመንጨት አልተቻለም",
+    "retry": "እንደገና ይሞክሩ",
+    "close": "ዝጋ",
+    "print": "አትም",
+    "loading": "ቅድመ እይታ እየተጫነ...",
+    "error": "ቅድመ እይታ ማመንጨት አልተቻለም",
+    "networkError": "የኔትወርክ ስህተት ተከስቷል። እባክዎ ግንኙነትዎን ይፈትሹ እና እንደገና ይሞክሩ።",
+    "button": "ቅድመ እይታ",
+    "validationError": "ከቅድመ እይታ በፊት የማረጋገጫ ስህተቶችን ያስተካክሉ"
+  },
+  "initiationType": {
+    "self": " በራስ",
+    "team": "በቡድን"
+  },
+  "dashboard": {
+    "totalOutgoing": "ጠቅላላ ወጪ",
+    "totalInVsOut": "ጠቅላላ የግባ እና የመውጫ ደብዳቤዎች",
+    "totalIncoming": "ጠቅላላ ገቢ",
+    "monthlyIncoming": "ወርሃዊ የገቡ ደብዳቤዎች",
+    "monthlyOutgoing": "ወርሃዊ የወጡ ደብዳቤዎች",
+    "weeklyIncoming": "ሳምንታዊ የገቡ ደብዳቤዎች",
+    "weeklyOutgoing": "ሳምንታዊ የወጡ ደብዳቤዎች",
+    "dailyIncoming": "ዕለታዊ የገቡ ደብዳቤዎች",
+    "dailyOutgoing": "ዕለታዊ የወጡ ደብዳቤዎች",
+    "monthlyInVsOut": "ወርሃዊ የግባ እና የመውጫ ደብዳቤዎች",
+    "weeklyInVsOut": "ሳምንታዊ የግባ እና የመውጫ ደብዳቤዎች",
+    "dailyInVsOut": "ዕለታዊ የግባ እና የመውጫ ደብዳቤዎች",
+    "ccRecords": "ግልባጭ መዝገቦች",
+    "totalApproval": "ጠቅላላ ማረጋገጫ",
+    "lastUpdated": "መጨረሻ የተሻሻለበት",
+    "refresh": "አዘምን",
+    "refreshing": "በማዘመን ላይ...",
+    "never": "በየትኛውም ጊዜ አልዘመነም",
+    "approvalStats": "የማረጋገጫ ስታቲስቲቅሬታ ",
+    "externalIncoming": "ዉጫዊ ገቢ",
+    "internalIncoming": "ውስጣዊ ገቢ",
+    "incomingStats": "ገቢ ስታቲስቲቅሬታ ",
+    "outgoingStats": "ወጪ ስታቲስቲቅሬታ ",
+    "externalIncomingRecords": "ውጫዊ ገቢ መዝገቦች",
+    "internalIncomingRecords": "ውስጣዊ ገቢ መዝገቦች",
+    "advanced": "አድቫንስድ ዳሽቦርድ",
+    "print": "አትም",
+    "exportPdf": "PDF አውርድ",
+    "status": {
+      "inProgress": "በሂደት ላይ",
+      "accepted": "ተቀባይነት ያገኘ",
+      "reassigned": "በድጋሚ የተመደበ",
+      "draft": "ረቂቅ",
+      "forward": "ላክ",
+      "approved": "ፀድቋል",
+      "rejected": "ውድቅ የተደረገ",
+      "adjusted": "የተስተካከለ",
+      "sent": "ተልኳል",
+      "approve": "አረጋግጥ"
+    },
+    "Percentage": "መቶኛ",
+    "Count": "ብዛት",
+    "Status": "ሁኔታ",
+    "Total": "ጠቅላላ",
+    "pieChart": "ፓይ ቻርት",
+    "barChart": "ባር ቻርት",
+    "table": "ሰንጠረዥ",
+    "exporting": "በማውረድ ላይ...",
+    "exportFormat": "በዚህ ፎርማት አዉርድ",
+    "selectFormat": "ፎርማት ይምረጡ",
+    "totalEmployees": "ጠቅላላ ሰራተኞች",
+    "totalUnits": "ጠቅላላ ክፍሎች",
+    "totalPositions": "ጠቅላላ የተጠቃሚ ፍቃዶች",
+    "totalDocuments": "ጠቅላላ ሰነዶች",
+    "organizationDashboard": "የድርጅት ዳሽቦርድ",
+    "overviewDescription": "የድርጅትዎ አፈጻጸም እና እንቅስቃሴዎች አጠቃላይ እይታ",
+    "quickActions": "ፈጣን እርምጃዎች",
+    "contentManagement": "የይዘት አስተዳደር",
+    "userManagement": "የተጠቃሚ አስተዳደር",
+    "exportUserData": "የተጠቃሚ መረጃ አውርድ",
+    "recentActivities": "ቅርብ ጊዜ እንቅስቃሴዎች",
+    "selectUnit": "ክፍል ይምረጡ",
+    "loadingUnits": "ክፍሎችን በመጫን ላይ...",
+    "refreshData": "መረጃ አዘምን",
+    "noUnitsFound": "ምንም ክፍል አልተገኘም",
+    "organizationIdRequired": "የድርጅት መለያ ያስፈልጋል",
+    "exportError": "ማውረድ አልተሳካም። እባክዎን እንደገና ይሞክሩ።",
+    "uploadHeader": "አዲስ የራስጌ ምስል ተሰቀለ",
+    "updateSeal": "የድርጅት ማህተም ተዘመነ",
+    "removeFooter": "የግርጌ ምስል ተወገደ",
+    "twoHoursAgo": "2 ሰዓት በፊት",
+    "fiveHoursAgo": "5 ሰዓት በፊት",
+    "oneDayAgo": "1 ቀን በፊት",
+    "orgMsg": "የድርጅትዎ ስታቲስቲቅሬታ ና እንቅስቃሴዎች አጠቃላይ እይታ",
+    "errorMsg": "የድርጅቱን መረጃ ማከተል ላይ ስህተት ተፈጥሯል። እባክዎ ገፁን በድጋሚ ያድሱ።",
+    "title": "ዳሽቦርድ",
+    "performanceMetrics": "የአፈጻጸም መለኪያዎች",
+    "selectPlanYear": "የእቅድ ዓመት ይምረጡ",
+    "loading": "ዳሽቦርድ በመጫን ላይ...",
+    "selectPlanYearToView": "ዳሽቦርዱን ለማየት የእቅድ ዓመት ይምረጡ",
+    "contentManagementDesc": "ራስጌዎችን፣ ግርጌዎችን እና ማህተሞችን ያስተዳድሩ",
+    "userManagementDesc": "ተጠቃሚዎችን እና ክፍሎችን ያስተዳድሩ",
+    "excelUploader": "የኤክሴል አፕሎደር",
+    "excelUploaderDesc": "ከኤክሴል በጅምላ ተጠቃሚዎችን ያስመጡ",
+    "positionSettings": "የቦታ ቅንብሮች",
+    "positionSettingsDesc": "የድርጅት ቦታዎችን ያዋቅሩ",
+    "archiveUsers": "ተጠቃሚዎችን አርካይቭ ያድርጉ",
+    "archiveUsersDesc": "የተቀመጡ የተጠቃሚ መለያዎችን ያስተዳድሩ",
+    "webManagement": "የድረ-ገጽ አስተዳደር",
+    "webManagementDesc": "የድረ-ገጽ ይዘት እና ቅንብሮችን ያስተዳድሩ",
+    "createTemplate": "ቴምፕሌት ይፍጠሩ",
+    "editTemplate": "ቴምፕሌት ያርትዑ",
+    "viewTemplate": "ቴምፕሌት ይመልከቱ",
+    "deleteTemplate": "ቴምፕሌት ይሰርዙ",
+    "deleteTemplateConfirm": "'{{name}}' ቴምፕሌትን መሰረዝ እርግጠኛ ነዎት? ይህ ድርጊት መልሰው ማድረግ አይችሉም።",
+    "noTemplates": "ምንም ቴምፕሌቶች አልተገኙም",
+    "sincerelyText": "የመዝጊያ ጽሁፍ",
+    "body": "ይዘት",
+    "close": "ዝጋ",
+    "deleting": "በመሰረዝ ላይ...",
+    "delete": "ሰርዝ",
+    "goToReport": "ወደ ሪፖርት ሂድ",
+    "welcomeToDms": "ወደ DMS እንኳን ደህና መጡ",
+    "forYou": "ለእርስዎ",
+    "recommended": "የተመረጡ",
+    "show": "አሳይ",
+    "hide": "ደብቅ",
+    "recentDocuments": "የቅርብ ጊዜ ሰነዶች",
+    "searchPlaceholder": "በፋይል ስም ወይም በሰው ፈልግ...",
+    "loadingUpdates": "ዝመናዎችን በመጫን ላይ...",
+    "noUpdates": "ምንም የቅርብ ጊዜ ዝመናዎች የሉም።",
+    "recentlyUpdated": "በቅርብ ጊዜ የተሻሻሉ",
+    "oldestUpdated": "በቀድሞ ጊዜ የተሻሻሉ",
+    "recentlyAdded": "በቅርብ ጊዜ የተጨመሩ",
+    "oldestAdded": "በቀድሞ ጊዜ የተጨመሩ",
+    "nameAZ": "በስም ከሀ-ፐ",
+    "nameZA": "በስም ከፐ-ሀ"
+  },
+  "verification": {
+    "pending": "ማረጋገጫ በመጠባበቅ ላይ",
+    "message": "የእርሶ ምዝገባ በማረጋገጫ ሂደት ላይ ነው። 24 ሰዓታት ካለፉ እና መለያዎ አሁንም ካልተረጋገጠ እባክዎን ያግኙን።",
+    "contactSupport": "ድጋፍ ያግኙ"
+  },
+  "welcome": "እንኳን ደህና መጣህ",
+  "change_password": "የይለፍ ቃል ለውጥ",
+  "sign_out": "ውጣ",
+  "view_profile": "መገለጫን እይ",
+  "user": "ተጠቃሚ",
+  "common": {
+    "back": "ተመለስ",
+    "Back": "ተመለስ",
+    "View": "ይመልከቱ",
+    "today": "ዛሬ",
+    "yesterday": "ትናንት",
+    "unknownUser": "ያልታወቀ ተጠቃሚ",
+    "Cancel": "ሰርዝ",
+    "na": "የለም",
+    "print": "ማተም",
+    "None": "ምንም",
+    "cancel": "ሰርዝ",
+    "Confirm": "ያድርጉ",
+    "Submit": "መዝግብ",
+    "save": "መዝግብ",
+    "saveAsDraft": "ረቂቅ ያስቀምጡ",
+    "noResult": "ምንም ውጤት የለም",
+    "create": "ፍጠር",
+    "update": "አዘምን",
+    "Edit": "አስተካክል",
+    "Unselect": "አላማደረግ",
+    "loading": "በመጫን ላይ",
+    "DeactivateUser": "ተጠቃሚ አስወግድ",
+    "Delete": "አጥፋ",
+    "ConfirmDelete": "ማጥፋትን ያረጋግጡ",
+    "subject": "ርዕሰ ጉዳይ",
+    "notAvailable": "አልተገኘም",
+    "status": "ሁኔታ",
+    "createdDate": "የተፈጠረው በ",
+    "dispatchedDate": "የተላከበት ቀን",
+    "referenceNumber": "ማጣቀሻ ቁጥር",
+    "name": "የአብነት ስም",
+    "close": "ዝጋ",
+    "delete": "አጥፋ",
+    "actions": "ድርጊቶች",
+    "verify": "ያረጋግጡ",
+    "previous": "የቀድሞ",
+    "next": "ቀጣይ",
+    "showing": "ያሳያል",
+    "to": "ወደ",
+    "of": "ከ",
+    "verifying": "እየረጋገጠ...",
+    "viewReply": "መልስ ደብዳቤ ይመልከቱ",
+    "description": "ዝርዝር",
+    "error": "ስህተት",
+    "success": "ተሳክቷል",
+    "createdAt": "የተፈጠረበት ቀን",
+    "view": "አሳይ",
+    "edit": "አርትዕ",
+    "saving": "በማስቀመጥ ላይ...",
+    "deleting": "በማስወገድ ላይ...",
+    "retry": "እንደገና ሞክር",
+    "clear": "አጽዳ",
+    "refresh": "አዘምን",
+    "yes": "አዎ",
+    "no": "አይ",
+    "confirm": "አረጋግጥ",
+    "submit": "አስገባ",
+    "reset": "ዳግም አስጀምር",
+    "search": "ፈልግ",
+    "filter": "አጣራ",
+    "sort": "ደርድር",
+    "export": "ላክ",
+    "import": "አስገባ",
+    "download": "አውርድ",
+    "upload": "ጫን",
+    "preview": "ቅድመ እይታ",
+    "details": "ዝርዝሮች",
+    "settings": "ማሰናጃዎች",
+    "profile": "መገለጫ",
+    "logout": "ውጣ",
+    "login": "ግባ",
+    "register": "ተመዝገቢ",
+    "forgotPassword": "የይለፍ ቃል ረሳሁ",
+    "resetPassword": "የይለፍ ቃል ዳግም አስጀምር",
+    "changePassword": "የይለፍ ቃል ለውጥ",
+    "email": "ኢሜይል",
+    "password": "የይለፍ ቃል",
+    "phone": "ስልክ",
+    "address": "አድራሻ",
+    "city": "ከተማ",
+    "country": "አገር",
+    "state": "ክልል",
+    "zip": "የፖስታ ኮድ",
+    "firstName": "የመጀመሪያ ስም",
+    "lastName": "የአያት ስም",
+    "middleName": "የአባት ስም",
+    "gender": "ጾታ",
+    "birthDate": "የልደት ቀን",
+    "age": "እድሜ",
+    "active": "ንቁ",
+    "inactive": "ንቁ ያልሆነ",
+    "completed": "ተጠናቅቋል",
+    "pending": "በመጠበቅ ላይ",
+    "approved": "ጸድቋል",
+    "rejected": "ተቀትሏል",
+    "enabled": "አንቃ",
+    "disabled": "አቆም",
+    "visible": "የሚታይ",
+    "hidden": "የተደበቀ",
+    "public": "የህዝብ",
+    "private": "የግል",
+    "required": "ያስፈልጋል",
+    "optional": "አማራጭ",
+    "all": "ሁሉም",
+    "none": "የለም",
+    "select": "ምረጥ",
+    "remove": "አስወግድ",
+    "add": "ጨምር",
+    "new": "አዲስ",
+    "old": "የቆየ",
+    "current": "አሁን ያለ",
+    "first": "መጀመሪያ",
+    "last": "መጨረሻ",
+    "total": "ጠቅላላ",
+    "average": "አማካይ",
+    "maximum": "ከፍተኛ",
+    "minimum": "ትንሽ",
+    "percentage": "በመቶ",
+    "count": "ቆጠራ",
+    "sum": "ድምር",
+    "date": "ቀን",
+    "time": "ሰዓት",
+    "datetime": "ቀን እና ሰዓት",
+    "from": "ከ",
+    "between": "በመካከል",
+    "before": "በፊት",
+    "after": "ከኋላ",
+    "tomorrow": "ነገ",
+    "thisWeek": "ይህ ሳምንት",
+    "lastWeek": "ባለፈው ሳምንት",
+    "nextWeek": "የሚቀጥለው ሳምንት",
+    "thisMonth": "ይህ ወር",
+    "lastMonth": "ባለፈው ወር",
+    "nextMonth": "የሚቀጥለው ወር",
+    "thisYear": "ይህ ዓመት",
+    "lastYear": "ባለፈው ዓመት",
+    "nextYear": "የሚቀጥለው ዓመት",
+    "january": "ጥር",
+    "february": "የካቲት",
+    "march": "መጋቢት",
+    "april": "ሚያዝያ",
+    "may": "ግንቦት",
+    "june": "ሰኔ",
+    "july": "ሐምሌ",
+    "august": "ነሐሴ",
+    "september": "መስከረም",
+    "october": "ጥቅምት",
+    "november": "ህዳር",
+    "december": "ታህሳስ",
+    "monday": "ሰኞ",
+    "tuesday": "ማክሰኞ",
+    "wednesday": "ረቡዕ",
+    "thursday": "ሐሙስ",
+    "friday": "ዓርብ",
+    "saturday": "ቅዳሜ",
+    "sunday": "እሁድ",
+    "am": "ጠዋት",
+    "pm": "ከሰዓት በኋላ",
+    "morning": "ጠዋት",
+    "afternoon": "ከሰዓት",
+    "evening": "ምሽት",
+    "night": "ሌሊት",
+    "hour": "ሰዓት",
+    "minute": "ደቂቃ",
+    "second": "ሰከንድ",
+    "day": "ቀን",
+    "week": "ሳምንት",
+    "month": "ወር",
+    "year": "ዓመት",
+    "decade": "ዓመት",
+    "century": "መቶ ዓመት",
+    "millennium": "ሺህ ዓመት",
+    "notFound": "አልተገኘም",
+    "updatedAt": "የተዘመነበት ቀን",
+    "navigation": "ዳሰሳ",
+    "backToGoal": "ወደ ግብ ተመለስ",
+    "backToGoals": "ወደ ግቦች ተመለስ",
+    "additionalInfo": "ተጨማሪ መረጃ",
+    "filters": "ማጣሪያዎች",
+    "breadcrumb": "ዳሰሳ መንገድ",
+    "home": "መነሻ",
+    "planYear": "የእቅድ ዓመት",
+    "goal": "ግብ",
+    "majorTask": "ዋና ተግባር",
+    "detailTask": "ዝርዝር ተግባር",
+    "expectation": "ጥበቃ",
+    "achievement": "ውጤት",
+    "employee": "ሰራተኛ",
+    "teamLeader": "የቡድን መሪ",
+    "Migrate": "ፈልስ",
+    "page": "ገጽ",
+    "adopt": "ይቀበሉ",
+    "Deleting": "በማጥፋት ላይ...",
+    "DeletedSuccessfully": "በተሳካ ሁኔታ ተሰርዟል",
+    "FailedToDelete": "ማጥፋት ያልተሳካ",
+    "DeleteConfirmationMessage": "\"{{name}}\" መሰረዝ እንደሚፈልጉ እርግጠኛ ነን? ይህ ድርጊት መቀየር አይቻልም።",
+    "addReply": "ምላሽ ጨምር",
+    "replies": "ምላሾች",
+    "replyAttachments": "የምላሽ አባሪዎች",
+    "mockDownload": "የተመሰለውን አባሪ በማውረድ ላይ፡ ",
+    "noReplies": "እስካሁን ምንም ምላሽ አልተጨመረም።",
+    "replyMessage": "የምላሽ መልዕክት",
+    "replyPlaceholder": "የምላሽ መልዕክት ወይም አስተያየትዎን እዚህ ይጻፉ...",
+    "attachments": "አባሪዎች",
+    "uploadMessage": "ለመስቀል ጠቅ ያድርጉ ወይም ጎትተው ይጣሉ",
+    "uploadFormats": "PDF፣ PNG፣ JPG፣ ZIP (ከ10MB ያልበለጠ)",
+    "submitting": "በማስገባት ላይ...",
+    "comment": "አስተያየት",
+    "replynote": "በአንድ ምላሽ አንድ አባሪ ብቻ ይፈቀዳል",
+    "basicInformation": "መሰረታዊ መረጃ"
+  },
+  "collaboration": {
+    "inProgress": "በሂደት ላይ",
+    "done": "ተጠናቋል",
+    "all": "ሁሉም",
+    "list": "ትብብሮች",
+    "comment": "አስተያየት",
+    "comments": "አስተያየቶች",
+    "commentTitle": "የትብብር አስተያየቶች",
+    "commentDialogDescription": "ሁሉንም የተባባሪዎች አስተያየቶች እዚህ ይመልከቱ። እስካሁን አስተያየት ካልሰጡ ከታች ያክሉ።",
+    "commentRequired": "አስተያየቱ ባዶ መሆን አይችልም።",
+    "commentSubmitted": "አስተያየቱ ተልኳል።",
+    "commentUpdated": "አስተያየቱ በተሳካ ሁኔታ ተዘምኗል።",
+    "commentDeleted": "አስተያየቱ በተሳካ ሁኔታ ተሰርዟል።",
+    "commentExists": "በዚህ የመዝገብ ስሪት ላይ አስቀድመው አስተያየት ሰጥተዋል።",
+    "commentsEmpty": "እስካሁን ምንም አስተያየት አልተጨመረም።",
+    "commentsCount": "{{count}} አስተያየት(ዎች)",
+    "commentsEmptyState": "ተባባሪዎች አስተያየት መስጠት ሲጀምሩ አስተያየታቸው እዚህ ይታያል።",
+    "reviewedCount": "{{count}} ተባባሪ(ዎች) ግምገማ አድርገዋል",
+    "unknownUser": "ያልታወቀ ተጠቃሚ",
+    "yourComment": "የእርስዎ አስተያየት",
+    "edited": "ተስተካክሏል",
+    "commentPlaceholder": "አስተያየትዎን ይጻፉ...",
+    "addComment": "አስተያየትዎን ያክሉ",
+    "singleCommentRule": "ለአሁኑ የመዝገብ ስሪት አንድ አስተያየት ብቻ ማስገባት ይችላሉ።",
+    "postComment": "አስተያየት ላክ",
+    "deleteCommentTitle": "አስተያየቱን ልሰርዝ?",
+    "deleteCommentDescription": "ይህ ያሁኑን አስተያየትዎን ያስወግዳል። ከዚያ በኋላ አዲስ አስተያየት እንደገና ማከል ይችላሉ።",
+    "close": "ዝጋ",
+    "edit": "አስተካክል",
+    "adjust": "አስተካክል ላክ",
+    "adjustSubmitted": "የማስተካከያ ጥያቄው በተሳካ ሁኔታ ተልኳል።",
+    "adjustFailed": "የማስተካከያ ጥያቄውን መላክ አልተሳካም።",
+    "adjustCommentMissing": "ለማስተካከያ የሚጠቀም አስተያየት አልተገኘም።"
+  },
+  "profile": {
+    "loading": "መገለጫ በመጫን ላይ...",
+    "error": "መገለጫ መጫን አልተቻለም",
+    "tryAgain": "እንደገና ይሞክሩ",
+    "noName": "ስም የለም",
+    "signOut": "ይውጡ",
+    "email": "ኢሜይል",
+    "sessions": "Sessions",
+    "accountSafety": "የመለያ ደህንነት",
+    "twoFactorAuth": "ድርብ-ደህንነት",
+    "twoFactorDesc": "ተጨማሪ የደህንነት ንጣፍ ያክሉ",
+    "enabled": "የተገለጸ",
+    "disabled": "የተጠፋ",
+    "userType": "የተጠቃሚ አይነት",
+    "userTypes": {
+      "employee": "ሰራተኛ",
+      "admin": "አስተዳዳሪ",
+      "user": "ተጠቃሚ",
+      "super_admin": "ሱፐር አስተዳዳሪ"
+    },
+    "passwordSet": "የይለፍ ቃል ተመስርቷል",
+    "status": {
+      "accepted": "ተቀባይነት አግኝቷል"
+    },
+    "positionDetails": "የስራ መደብ ዝርዝሮች",
+    "positionName": "የስራ መደብ ስም",
+    "positionKey": "የስራ መደብ ቁልፍ",
+    "isDelegate": "ተወካይ ነው",
+    "employeeId": "የሰራተኛ መታወቂያ",
+    "permissions": "ፈቃዶች",
+    "noPermissions": "ፈቃዶች አልተመደቡም",
+    "accountSecurity": "የመለያ ደህንነት",
+    "password": "የይለፍ ቃል",
+    "passwordSetStatus": "የይለፍ ቃል ተመስርቷል",
+    "passwordNotSetStatus": "የይለፍ ቃል አልተመሰረተም",
+    "changePassword": "የይለፍ ቃል ይቀይሩ",
+    "updateProfile": "መገለጫ አዘምን",
+    "profile": "መገለጫ",
+    "recentActivity": "የቅርብ ተግባራት",
+    "activity": {
+      "login": "ገብተዋል",
+      "passwordChanged": "የይለፍ ቃል ተቀይሯል"
+    },
+    "username": "እባክዎ የተጠቃሚ ስም ያስገቡ",
+    "phoneNumber": "እባክዎ የስልክ ቁጥር ያስገቡ",
+    "emailmsg": "እባክዎ ኢሜል ያስገቡ",
+    "englishName": "እባክዎ ስሙን በእንግሊዝኛ ያስገቡ",
+    "amharicName": "እባክዎ ስሙን በአማርኛ ያስገቡ",
+    "usernameRequired": "የተጠቃሚ ስም ያስፈልጋል",
+    "emailRequired": "ኢሜይል ያስፈልጋል",
+    "validEmailFormat": "ትክክለኛ የኢሜይል ቅርጸት ያስገቡ",
+    "phoneRequired": "ስልክ ቁጥር ያስፈልጋል",
+    "validPhoneFormat": "ትክክለኛ የስልክ ቁጥር ቅርጸት ያስገቡ",
+    "amharicNameRequired": "አማርኛ ስም ያስፈልጋል",
+    "englishNameRequired": "እንግሊዝኛ ስም ያስፈልጋል",
+    "profileUpdateSuccess": "መገለጫዎ በትክክል ተቀይሯል",
+    "profileUpdated": "መገለጫዎ ተቀይሯል",
+    "profileUpdateFailed": "መገለጫ ማሻሻል አልተሳካም",
+    "updating": "በማሻሻል ላይ..."
+  },
+  "complaint": {
+    "title": "የቅሬታ ቅጽ ያስገቡ",
+    "subtitle": "ለመርዳት እንዘጋጅለዋለን። በትክክል መረጃ ይስጡን እንድንረዳዎት።",
+    "formTitle": "የቅሬታ ቅጽ",
+    "fullName": "ሙሉ ስም",
+    "phone": "ስልክ ቁጥር",
+    "subCity": "ክፍለ ከተማ",
+    "woreda": "ወረዳ",
+    "houseNumber": "የቤት ቁጥር",
+    "institution": "ተቋም",
+    "place": "የቅሬታ ቦታ",
+    "details": "የቅሬታ ዝርዝር",
+    "want": "የሚፈለገው መፍትሄ",
+    "evidence": "ማስረጃ (ከተፈለገ)",
+    "selectedFiles": "የተመረጡ ፋይሎች",
+    "disclaimerTitle": "አስፈላጊ ማስታወቂያ",
+    "disclaimerText": "ይህን ቅጽ በማስገባት የሰጡት መረጃ ትክክል እንደሆነ ታረጋገጡ። የተሳሳተ ቅሬታ የህግ እርምጃ ሊወሰድበት ይችላል።",
+    "accept": "ማስታወቂያውን አንብቤ ተቀብያለሁ",
+    "submit": "ቅሬታ ያስገቡ",
+    "submitting": "በመላክ ላይ...",
+    "success": "ቅሬታዎ በተሳካ ሁኔታ ተልኳል",
+    "receiveDisabled": "ቅሬታ መቀበል ለዚህ ክፍል ተሰናክሏል።",
+    "receiveCheckFailed": "ለዚህ ክፍል ቅሬታ መቀበል መረጋገጥ አልተሳካም። እባክዎ እንደገና ይሞክሩ።",
+    "receiveCheckInProgress": "ለዚህ ክፍል ቅሬታ መቀበል እየተረጋገጠ ነው። እባክዎ ይጠብቁ።",
+    "keepId": "እባኮትን የቅሬታ መለያዎን ለወደፊት ያዝዙት፡",
+    "close": "ዝጋ",
+    "back": "ተመለስ",
+    "followTitle": "ቅሬታ መከታተያ",
+    "selectCompliant": "ቅሬታ ይምረጡ",
+    "noEvidence": "ማስረጃ የለም",
+    "followSubtitle": "እኛ እርስዎን ለመደገፍ እዚህ መጥተናል - የአቤቱታዎን ሂደት እዚህ ይከታተሉ",
+    "compliantId": "የቅሬታ መከታተያ ቁጥር",
+    "enterComNum": "የቅሬታ መከታተያ ቁጥር ያስገቡ",
+    "message": "ምላሽ",
+    "complaintNo": "የቅሬታ ቁጥር",
+    "errorMsg": "ቅሬታ ማምጣት አልተቻለም። እባክዎን የቅሬታ መከታተያ ቁጥሮን አረጋግጠው እንደገና ይሞክሩ።",
+    "choice": {
+      "title": "ቅሬታ ያስገቡ",
+      "subtitle": "ቅሬታ ከመስጠትዎ በፊት ማንነትዎን እንዴት ማረጋገጥ እንደሚፈልጉ ይምረጡ።",
+      "prompt": "ለመቀጠል የማንነት አቅራቢዎን ይምረጡ። መለያዎ ካለ እንገባዎታለን፣ ካልኖረም በራስ-ሰር እንፈጥረዋለን።",
+      "faydaTitle": "ግለሰብ (ፋይዳ)",
+      "faydaDescription": "እንደ ግለሰብ ቅሬታ ለሚያስገቡ ዜጎች። በብሔራዊ ፋይዳ መታወቂያዎ ማንነትዎን ያረጋግጣሉ።",
+      "faydaAction": "በፋይዳ ያረጋግጡ",
+      "tinTitle": "ድርጅት (TIN)",
+      "tinDescription": "በግብር ከታወቂያ ቁጥር (TIN) ቅሬታ ለሚያስገቡ ድርጅቶች።",
+      "tinAction": "በTIN ያረጋግጡ",
+      "etradeTitle": "ድርጅት (ኢ-ትሬድ)",
+      "etradeDescription": "ቅሬታ ለሚያስገቡ ድርጅቶች። በንግድ ቲን እና ከኢ-ትሬድ የንግድ ፍቃድ ያረጋግጡ።",
+      "etradeAction": "በኢ-ትሬድ ያረጋግጡ",
+      "verificationNote": "ይህ ደረጃ ቅሬታ ለመስጠት ማንነትዎን ለማረጋገጥ ነው። ከፖርታል መለያ መፍጠር ወይም መግባት ጋር አንድ አይደለም።",
+      "backToMethod": "ወደ የማረጋገጫ አማራጮች ተመለስ"
+    },
+    "tin": {
+      "title": "በTIN ያረጋግጡ",
+      "subtitle": "ለመቀጠል የድርጅትዎን የግብር ከታወቂያ ቁጥር ያስገቡ።",
+      "formTitle": "የድርጅት ማረጋገጫ",
+      "formDescription": "ቅሬታ ከመስጠትዎ በፊት ድርጅትዎን ለማረጋገጥ 10 አሃዝ TIN ቁጥር ያስገቡ።",
+      "complaintSubtitle": "ድርጅትዎ ተረጋግጧል። እባክዎን የቅሬታ ዝርዝሮችን ከዚህ በታች ያስገቡ።",
+      "verifiedInfo": "የተረጋገጠ የድርጅት መረጃ",
+      "organizationName": "የድርጅት ስም",
+      "tinLabel": "TIN ቁጥር",
+      "tinPlaceholder": "10 አሃዝ TIN ያስገቡ",
+      "tinHint": "TIN ቁጥር ትክክለኛ 10 አሃዝ መሆን አለበት።",
+      "tinRequired": "TIN ቁጥር ያስፈልጋል",
+      "tinInvalid": "እባክዎ ትክክለኛ 10 አሃዝ TIN ቁጥር ያስገቡ",
+      "notFound": "ለተሰጠው TIN ቁጥር የተመዘገበ ንግድ አልተገኘም።",
+      "verificationFailed": "የTIN ማረጋገጫ አልተሳካም። እባክዎን እንደገና ይሞክሩ።",
+      "registrationFailed": "የኢ-ትሬድ ምዝገባ ማጠናቀቅ አልተቻለም። እባክዎን እንደገና ይሞክሩ።",
+      "verifying": "በማረጋገጥ ላይ...",
+      "verify": "ያረጋግጡ",
+      "submit": "ያረጋግጡ እና ይቀጥሉ",
+      "proxyError": "የንግድ ምዝገባ አገልግሎት ማግኘት አልተቻለም። እባክዎን ቆይተው እንደገና ይሞክሩ።",
+      "languageLabel": "የማረጋገጫ ቋንቋ",
+      "languageHint": "ጥያቄዎች ወደ eTrade በ{{language}} የቋንቋ ኮድ ይላካሉ።",
+      "languageEnglish": "እንግሊዝኛ",
+      "languageAmharic": "አማርኛ",
+      "regNo": "የምዝገባ ቁጥር",
+      "tradeName": "የንግድ ስም",
+      "licenseNumber": "የንግድ ፈቃድ ቁጥር"
+    },
+    "fayda": {
+      "submitComplaint": "ቅሬታ ያስገቡ",
+      "landingTitle": "ቅሬታ ያስገቡ",
+      "landingSubtitle": "ቅሬታ ለማስገባት ማንነትዎን በፋይዳ ያረጋግጡ — መለያ አያስፈልግም።",
+      "stepVerify": "በፋይዳ ያረጋግጡ",
+      "stepVerifyDesc": "በብሔራዊ ፋይዳ መታወቂያዎ በደህንነት ያረጋግጡ። የስማርት ኦፊስ መለያ አያስፈልግም።",
+      "stepSubmit": "ቅሬታዎን ያስገቡ",
+      "stepSubmitDesc": "የቅሬታ ዝርዝሮችን ይሙሉ እና ወደ ተገቢው ቢሮ እንደምናስተላልፍ እናደርጋለን።",
+      "verifyWithFayda": "በፋይዳ ያረጋግጡ",
+      "noAccountNeeded": "የስማርት ኦፊስ መለያ ለመፍጠር ወይም ለመግባት አያስፈልግዎትም።",
+      "verifying": "ማንነትዎን በፋይዳ በማረጋገጥ ላይ...",
+      "verificationFailed": "የፋይዳ ማረጋገጫ አልተሳካም። እባክዎን እንደገና ይሞክሩ።",
+      "missingCode": "ከፋይዳ የፈቃድ ኮድ አልተገኘም።",
+      "errors": {
+        "FAYDA_CLIENT_ID_MISSING": "የፋይዳ ደንበኛ አልተዋቀረም። ድጋፍ ያግኙ።",
+        "FAYDA_TOKEN_NETWORK_ERROR": "መለያ ለማረጋገጥ ፋይዳ ሊደረስ አልተቻለም። እንደገና ይሞክሩ።",
+        "FAYDA_TOKEN_HTTP_400": "ፋይዳ የመግቢያ ጥያቄውን አልተቀበለም። እንደገና ይጀምሩ።",
+        "FAYDA_TOKEN_HTTP_401": "የፋይዳ ማረጋገጫ አልተሳካም። እንደገና ይሞክሩ።",
+        "FAYDA_TOKEN_HTTP_500": "የፋይዳ መግቢያ አገልግሎት አይገኝም። ቆይተው እንደገና ይሞክሩ።",
+        "FAYDA_ACCESS_TOKEN_MISSING": "ፋይዳ የመዳረሻ ቶከን አልሰጠም። እንደገና ይሞክሩ።",
+        "FAYDA_USERINFO_NETWORK_ERROR": "የፋይዳ መገለጫዎን ማግኘት አልተቻለም። እንደገና ይሞክሩ።",
+        "FAYDA_USERINFO_HTTP_401": "የፋይዳ ክፍለ ጊዜዎ አልቋል። እንደገና ያረጋግጡ።",
+        "FAYDA_USERINFO_HTTP_500": "የፋይዳ መገለጫ አገልግሎት አይገኝም። ቆይተው እንደገና ይሞክሩ።",
+        "FAYDA_ID_MISSING": "ፋይዳ የብሔራዊ መታወቂያ ቁጥርዎን አልሰጠም። እንደገና ይሞክሩ።",
+        "FAYDA_NAME_MISSING": "ፋይዳ ስምዎን አልሰጠም። እንደገና ይሞክሩ።",
+        "FAYDA_SERVER_CONFIG_MISSING": "በዚህ አገልጋይ ላይ የፋይዳ ማረጋገጫ አልተዋቀረም። ድጋፍ ያግኙ ወይም በ IAM ላይ /auth/signin-with-fayda እና /auth/signup-with-fayda ያረጋግጡ።",
+        "FAYDA_PROFILE_INCOMPLETE": "ፋይዳ ሙሉ መገለጫ አልሰጠም። እንደገና ይሞክሩ።",
+        "FAYDA_EXCHANGE_FAILED": "የፋይዳ ማረጋገጫ አልተሳካም። እንደገና ይሞክሩ።"
+      },
+      "backToComplaints": "ወደ ቅሬታ ተመለስ",
+      "formTitle": "የቅሬታ ቅጽ",
+      "formSubtitle": "ማንነትዎ ተረጋግጧል። እባክዎን የቅሬታ ዝርዝሮችን ከዚህ በታች ያስገቡ።",
+      "verifiedInfo": "የተረጋገጠ የዜጋ መረጃ",
+      "faydaNumber": "የፋይዳ ቁጥር",
+      "recipient": "ተቀባይ (ክልላዊ ቢሮ / ክፍል)",
+      "recipientPlaceholder": "ተቀባይ ቢሮ ይምረጡ ወይም ያስገቡ",
+      "subject": "ርዕስ",
+      "subjectPlaceholder": "የቅሬታዎን አጭር ማጠቃለያ",
+      "description": "መግለጫ",
+      "descriptionPlaceholder": "ቅሬታዎን በዝርዝር ይግለጹ...",
+      "attachment": "አባሪ",
+      "uploadHint": "የድጋፍ ሰነዶችን ለመጫን ይጫኑ (PDF, JPG, PNG)",
+      "successSubtitle": "ቅሬታዎን ስላስገቡ እናመሰግናለን።",
+      "successMessage": "ቅሬታዎ በተሳካ ሁኔታ ተልኳል።",
+      "successNote": "የመከታተያ ቁጥር ከቤክአንድ ከተገናኘ በኋላ ይሰጣል። ቅሬታዎን ከዚህ በታች ያለውን አገናኝ በመጠቀም መከታተል ይችላሉ።",
+      "backToMyRecords": "ወደ የእኔ መዝገቦች ተመለስ",
+      "backToHome": "ወደ መነሻ ተመለስ"
+    }
+  },
+  "header": {
+    "tigrigna": "Tigrigna",
+    "affar": "Affar",
+    "somali": "Somali",
+    "oromo": "ኦሮምኛ",
+    "user": "ተጠቃሚ",
+    "management": "አስተዳደር",
+    "notifications": "ማስታወቂያዎች",
+    "english": "እንግሊዝኛ",
+    "englishShort": "ENG",
+    "amharic": "አማርኛ",
+    "amharicShort": "አማ",
+    "french": "ፈረንሳይኛ",
+    "frenchShort": "FR",
+    "viewProfile": "መገለጫ ይመልከቱ",
+    "changePassword": "የይለፍ ቃል ይቀይሩ",
+    "signOut": "ይውጡ",
+    "settings": "ቲተርና ፊርማ",
+    "addTeeter": "ቲተርና ፊርማ ያክሉ",
+    "Remark": "የተለመዱ ምላሾች",
+    "Description": "ዝርዝር",
+    "navigation": {
+      "dashboard": "ዳሽቦርድ",
+      "outgoing": "ወጪ",
+      "incoming": "ገቢ",
+      "approval": "ማፅደቅ",
+      "delegation": "ዉክልና",
+      "pending": "በመጠባበቅ ላይ",
+      "settings": "ቲተርና ፊርማ",
+      "collaborations": "ትብብር",
+      "collaboration": "ትብብሮች"
+    },
+    "editProfile": "መገለጫ አስተካክል"
+  },
+  "migration": {
+    "migratedData": "የፈለሱ መዝገቦች",
+    "migratedRecords": "የፈለሱ መዝገቦች",
+    "exportData": "መረጃ ወደ ውጭ ላክ",
+    "exporting": "በመላክ ላይ...",
+    "selectUnit": "ክፍል ይምረጡ",
+    "columns": {
+      "referenceNumber": "የማጣቀሻ ቁጥር",
+      "letterNumber": "የደብዳቤ ቁጥር",
+      "uploadedBy": "የጫነው",
+      "organization": "ድርጅት",
+      "dispatchedDate": "የተላከበት ቀን",
+      "status": "ሁኔታ",
+      "subject": "ርዕሰ ጉዳይ"
+    },
+    "viewRecord": "አሳይ",
+    "invalidRecordId": "ስህተት፡ የማይሰራ የመዝገብ መለያ",
+    "loadingRecord": "መዝገብ በመጫን ላይ...",
+    "errorLoadingRecord": "መዝገብ መጫን አልተሳካም፡ {{message}}",
+    "title": "የስራ መደብ ፍልሰት",
+    "fromPositionType": "ከ ስራ መደብ",
+    "toPositionType": "ወደ ስራ መደብ",
+    "selectSourcePositionType": "የመነሻ ስራ መደብ ይምረጡ...",
+    "selectTargetPositionType": "የመድረሻ ስራ መደብ ይምረጡ...",
+    "migrationPath": "ፍልሰት",
+    "migrateAllPositions": "ሁሉንም ቦታዎች ፈልስ",
+    "confirmMigration": "ፍልሰትን ያረጋግጡ",
+    "migrateAllDescription": "ይህ ሁሉንም ቦታዎች ከ {{fromName}} ወደ {{toName}} ይፈልሳል። ይህ ድርጊት መልሰው ማድረግ አይችሉም።",
+    "yesMigrateAll": "አዎ፣ ሁሉንም ፈልስ",
+    "migrateSelectedPositions": "የተመረጡ ቦታዎችን ፈልስ",
+    "selectPositionsToMigrate": "ለመፈለስ ቦታዎችን ይምረጡ",
+    "searchPositions": "ቦታዎችን ፈልግ...",
+    "selected": "ተመርጧል",
+    "noPositionsFound": "ምንም ቦታዎች አልተገኙም",
+    "noPositionsAvailable": "ምንም ቦታዎች የሉም",
+    "migrateSelectedButton": "የተመረጡ ቦታዎችን ፈልስ ({{count}})",
+    "confirmSelectedMigration": "የተመረጡ ፍልሰትን ያረጋግጡ",
+    "migrateSelectedDescription": "{{count}} የተመረጡ ቦታዎችን ከ {{fromName}} ወደ {{toName}} ለመፈለስ ነው።",
+    "selectBothPositionTypes": "እባክዎ ሁለቱንም ከ እና ወደ ስራ መደብ ይምረጡ",
+    "selectAtLeastOnePosition": "እባክዎ ቢያንስ አንድ ቦታ ይምረጡ",
+    "allPositionsMigratedSuccess": "ሁሉም ቦታዎች በተሳካ ሁኔታ ተፈልሰዋል",
+    "failedToMigratePositions": "ቦታዎችን መፈለስ አልተሳካም",
+    "selectedPositionsMigratedSuccess": "{{count}} ቦታ(ዎች) በተሳካ ሁኔታ ተፈልሰዋል",
+    "failedToMigrateSelectedPositions": "የተመረጡ ቦታዎችን መፈለስ አልተሳካም"
+  },
+  "addRecord": {
+    "Reference Number": "Reference Number",
+    "Enter Reference Number": "Enter Reference Number",
+    "Record Tags": "Record Tags",
+    "Select Record Tags": "የመዝገብ መለያዎችን ይምረጡ",
+    "SelectedReceivingUnits": "የተመረጡ ",
+    "EditRecord": "መዝገቡን አስተካክል",
+    "Record Type": "የመዝገብ አይነት",
+    "Select Record Type": "የመዝገብ አይነትን ይምረጡ",
+    "Initiation Type": "የማስጀመሪያ ዓይነት",
+    "Select Initiation Type": "የማስነሻ አይነትን ይምረጡ",
+    "Receiving Unit": "ተቀባይ ክፍል",
+    "editIncomingRecord": "መዝገብ አስተካክል",
+    "Select Receiving Units": "ተቀባይ ክፍልን ይምረጡ",
+    "Prefix": "ቅድመ ቅጥያ",
+    "Select Prefix": "ቅድመ ቅጥያ ይምረጡ",
+    "Non Smart Receiving Unit": "እስማርት ኦፊስ ሲስተም ተጠቃሚ ያልሆኑ (ተቀባይ)",
+    "Enter Non Smart Receiving Organization": "እስማርት ኦፊስ ሲስተም ተጠቃሚ ያልሆኑ (ተቀባይ) አስገባ",
+    "To Departments": "ተቀባይ ክፍሎች (በስራ መደብ መጠሪያ)",
+    "Select Department": "ክፍሎችን ይምረጡ",
+    "Preferred Language": "የደብዳቤ ቋንቋ",
+    "Select Language": "የደብዳቤ ቋንቋን ይምረጡ",
+    "Suffix": "ድህረ ቅጥያ",
+    "Select Suffix": "ቅጥያ ይምረጡ",
+    "Position Prefix": "የስራ መደብ ቅድመ ቅጥያ",
+    "Select Position Prefix": "የስራ መደብ ቅድመ ቅጥያ ይምረጡ (ተራ)",
+    "Subject": "ርዕሰ ጉዳይ",
+    "Enter Subject": "ርዕሰ ጉዳይ አስገባ",
+    "Letter Template": "የተመለዱ የደብዳቤ ቅጽዎች",
+    "Select Letter Template": "የተመለዱ የደብዳቤ ቅጽዎች ይምረጡ",
+    "Body": "የደብዳቤ ይዘት",
+    "External CC": "ውጫዊ ግልባጭ",
+    "Select External CC": "ውጫዊ ግልባጭ ይምረጡ",
+    "External FYR": "ውጫዊ እንዲያውቁት",
+    "Select External FYR": "ውጫዊ እንዲያውቁት ይምረጡ",
+    "Internal CC": "ውስጣዊ ግልባጭ(በስራ መደብ)",
+    "Select Internal CC": "ውስጣዊ ግልባጭ ይምረጡ",
+    "Non Smart CC Unit": "ስማርት ኦፊስ የማይጠቀሙ ግልባጭ ክፍል",
+    "Non Smart FYR Unit": "ስማርት ኦፊስ የማይጠቀሙ እንዲያውቁት ክፍል",
+    "Enter  Non Smart CC Organization": "ስማርት ኦፊስ የማይጠቀሙ ግልባጭ ክፍል አስገባ",
+    "Enter  Non Smart FYR Organization": "ስማርት ኦፊስ የማይጠቀሙ እንዲያውቁት ክፍል አስገባ",
+    "Cancel": "ሰርዝ",
+    "Add": "+ መዝግብ",
+    "English": "እንግሊዝኛ",
+    "Amharic": "አማርኛ",
+    "Header": "የደብዳቤው ሄደር",
+    "Select Header": "ሄደር ይምረጡ",
+    "No Header": "ሄደር የለም",
+    "Footer": "የደብዳቤዉ ፉተር",
+    "Select Footer": "ፉተር ይምረጡ",
+    "No Footer": "ፉተር የለም",
+    "Collaborators": "ቡድን",
+    "Select Collaborators": "ቡድን ምረጥ",
+    "Sincerely Text": "መዝጊያ ቃል",
+    "Enter Sincerely Text": "መዝጊያ ቃል ያስገቡ",
+    "record": "መዝገብ",
+    "attachment": "አባሪ",
+    "failedToCreateRecord": "መዝገቡን መፍጠር አልተቻለም",
+    "recordSubmittedSuccessfully": "መዝገቡ በተሳካ ሁኔታ ተገብሯል።",
+    "createRecordFirst": "አባሪ ለማካተት መጀመሪያ መዝገብ ይፍጠሩ።",
+    "previous": "ወደ ኋላ",
+    "submit": "አስገባ",
+    "recordNotCreatedYet": "መዝገቡ እስካሁን አልተፈጠረም።",
+    "submitting": "እየሰራሁ ነው...",
+    "Enter CC Prefix": "የግልባጭ ቅድመ ቅጥያ ያስገቡ",
+    "CC Prefix": "የግልባጭ ቅድመ ቅጥያ",
+    "Enter CC Suffix": "የግልባጭ ቅጥያ ያስገቡ",
+    "CC Suffix": "የግልባጭ ድህረ ቅጥያ",
+    "Receiving Users": "ተቀባይ ባለሙያ",
+    "Select Receiving Users": "ተቀባዮችን ይምረጡ",
+    "ccUsers": "ዉስጣዊ ግልባጭ (በስም)",
+    "selectCCUsers": "ግልባጭ የሚደረግላቸውን ባለሙያ ይምረጡ",
+    "refreshOptions": "አዘምን አማራጮች",
+    "isTeamSig": "በቡድን ፊርማ ነው?",
+    "letterName": "የፋይል ስም",
+    "addLetterName": "የፋይል ስም አስገባ",
+    "MarkUrgent": "አስቸኳይ አድርግ",
+    "UnmarkUrgent": "አስቸኳይ አታድርግ",
+    "MarkUrgentDialogTitle": "ይህን መዝገብ እንደ አስቸኳይ ልክ ልታመልክቱት ትፈልጋለህ?",
+    "MarkUrgentDialogDescription": "ይህን ደብዳቤ አስቸኳይ ካደረጉ በሁዋላ መመለስ  አይችሉም።",
+    "UnmarkUrgentDialogTitle": "ይህን መዝገብ ከአስቸኳይ ዝርዝር ማስወገድ ትፈልጋለህ?",
+    "UnmarkUrgentDialogDescription": "ይህ መዝገብ እንደ አስቸኳይ አይታይም።",
+    "Edit Mode": "የማስተካከያ ሁነታ",
+    "Create Mode": "የደብዳቤ ማርቀሪያ ፎርም",
+    "Edit Record": "ደብዳቤ አስተካክል",
+    "Create New Record": "አዲስ ደብዳቤ አርቅቅ",
+    "Fill in the details below": "ዝርዝሮቹን ከዚህ በታች ይሙሉ",
+    "Basic Information": "መሰረታዊ መረጃ",
+    "enterBasicDetails": "የደብዳቤዎን መሰረታዊ ዝርዝሮች ያስገቡ",
+    "Creation Type": "የመፍጠሪያ አይነት",
+    "Select Creation Type": "የመፍጠሪያ አይነት ይምረጡ",
+    "Recipients": "ተቀባዮች",
+    "specifyRecipients": "ደብዳቤዉን ማን እንደሚቀበል ይግለጹ",
+    "Template & Formatting": "የተለመዱ ቅጽዎች ፥ ሄደርና ፉተር ",
+    "customizeAppearance": "የደብዳቤዎን ቅርፅ ያስተካክሉ",
+    "Loading Headers...": "ራስጌዎች በመጫን ላይ...",
+    "Loading Footers...": "ግርጌዎች በመጫን ላይ...",
+    "Letter Content": "የደብዳቤ ይዘት",
+    "writeLetterContent": "የደብዳቤዎን ይዘት ይጻፉ",
+    "Header Preview": "የራስጌ ቅድመ እይታ",
+    "Footer Preview": "የግርጌ ቅድመ እይታ",
+    "Carbon Copy (CC)": "ግልባጭ (CC)",
+    "addCCRecipients": "ግልባጭ ተቀባዮችን ያክሉ",
+    "forYourReference": "እንዲያውቁት",
+    "forYourReferenceExternal": "እንዲያውቁት (ውጫዊ)",
+    "forYourReferenceInternal": "እንዲያውቁት (ውስጣዊ)",
+    "selectForYourReference": "እንዲያውቁት ክፍሎችን ይምረጡ",
+    "Enter Non Smart CC Organization": "ስማርት ያልሆነ CC ድርጅት ያስገቡ",
+    "Attachments": "ተያያዥ ፋይሎች",
+    "uploadSupportingDocuments": "ተያያዥ አባሪ መዝገቦችን ያያይዙ",
+    "personal": "በግለሰብ",
+    "Position": "በስራ መደብ",
+    "formHasErrors": "ከማስገባትዎ በፊት በቅጹ ላይ ያሉትን ስህተቶች ያርትዑ",
+    "processingRequest": "ደብዳቤዉን እየፈጠርን ስለሆነ እባክዎን ትንሽ ይጠብቁ...",
+    "letterInformation": "የደብዳቤዉ መረጃ",
+    "organizationInformation": "የላኪ ድርጅት መረጃ",
+    "skipOneLevel": "አንድ ደረጃ ዝለል",
+    "Enter Non Smart FYR Organization": "ስማርት ኦፊስ የማይጠቀሙ እንዲያውቁት ክፍል ያስገቡ",
+    "uploadFromComputer": "ከኮምፒውተር ይጫኑ",
+    "addAttachmentFromDms": "+ ከDMS አባሪ ያክሉ"
+  },
+  "Document Attachments": "የደብዳቤ አባሪዎች",
+  "Login Method": "የመግቢያ ምርጫ",
+  "Sign Up": "ራስዎን ይመዝግቡ",
+  "Back to Home": "ወደ ዋና ገፅ ይመለሱ",
+  "Don't have an account?": "የሲስተሙ ተጠቃሚ አይደሉም?",
+  "incomingRecord": {
+    "createdSuccess": "የመጪ ደብዳቤ በተሳካ ሁኔታ ተፈጥሯል",
+    "updatedSuccess": "የመጪ ደብዳቤ በተሳካ ሁኔታ ተዘምኗል",
+    "UpdatedSuccessfully": "በተሳካ ሁኔታ ዘምኗል"
+  },
+  "externalPortal": {
+    "letterSentSuccess": "ደብዳቤው በተሳካ ሁኔታ ተልኳል"
+  },
+  "userRecord": {
+    "All": "ሁሉም",
+    "createAndForward": "ፍጠር እና ላክ",
+    "createAndApprove": "ፍጠር እና አጽድቅ",
+    "updateAndForward": "አዘምን እና ላክ",
+    "updateAndApprove": "አዘምን እና አጽድቅ",
+    "recordCreatedAndForwarded": "ሰነዱ ተፈጥሮ ተልኳል",
+    "recordCreatedAndSent": "ሰነዱ ተፈጥሮ ተልኳል",
+    "recordUpdatedAndForwarded": "ሰነዱ ተዘምኖ ተልኳል",
+    "recordCreatedReadyToApprove": "ሰነዱ ተፈጥሯል — ለማጽደቅ ማህተም እና ፊርማ ይምረጡ",
+    "recordUpdatedReadyToApprove": "ሰነዱ ተዘምኗል — ለማጽደቅ ማህተም እና ፊርማ ይምረጡ",
+    "The main file must be a PDF document": "The main file must be a PDF document",
+    "storageUploadFailed": "ፋይሉን መጫን አልቻልንም። እባክዎ እንደገና ይሞክሩ።",
+    "History": "ገቢ ማህደር",
+    "Draft": "ረቂቅ",
+    "Submitted": "ወደፊት የተላከ",
+    "Accepted": "ተቀባይነት ያገኘ",
+    "Approved": "የፀደቀ",
+    "Rejected": "ዉድቅ የተደረገ",
+    "Returned": "የተመለሰ",
+    "Adjustment": "ማስተካከያ",
+    "Team Signature": "ፊርማዎች በመጠባበቅ ላይ",
+    "Sent": "የተላከ",
+    "Letters": "ደብዳቤዎች",
+    "External Outgoing": "ወደ ውጭ የሚላኩ",
+    "Internal Outgoing": "ወደ ውስጥ የሚላኩ",
+    "To": "ወደ",
+    "nonSmartReceiverName": "ስማርት ኦፊስ ተጠቃሚ ያልሆነ",
+    "ReceiverPosition": "ተቀባይ ክፍል",
+    "ReceiverEmployee": "ተቀባይ ባለሞያ",
+    "ReceiverUnit": "ተቀባይ ቢሮ",
+    "Subject": "ርዕሰ ጉዳይ",
+    "Date": "ቀን",
+    "Search": "ፈልግ",
+    "Add Record": "ደብዳቤ አርቅቅ",
+    "Error loading records.": "መዝገቦችን ማግኘት ስህተት አለ።",
+    "Receiver Info": "ተቀባይ",
+    "No receivers": "ተቀባዮች የሉም",
+    "No receiving unit": "የመቀበያ ክፍል የለም",
+    "Status": "ሁኔታ",
+    "Send": "ቀጥታ",
+    "Send Directly": "ቀጥታ ላክ",
+    "Actions": "ተግባራት",
+    "View Detail": "ዝርዝር ይመልከቱ",
+    "MakeRecordSecure": "ደብዳቤ መስጥር",
+    "UnsecureRecord": "መዝጊያውን ክፈት",
+    "RecordSecuredSuccess": "መዝጊያው በተሳካ ሁኔታ ተቋቋመ።",
+    "RecordSecureFailed": "መዝጊያውን ማድረግ አልተሳካም።",
+    "RecordUnsecuredSuccess": "መዝጊያው በተሳካ ሁኔታ ተከፍቷል።",
+    "RecordUnsecureFailed": "መዝጊያውን መክፈት አልተሳካም።",
+    "recordSecuredSuccess": "ደብዳቤው ምስጢራዊ ሆኗል።",
+    "recordUnsecuredSuccess": "ደብዳቤው ከምስጢራዊነት ተወግዷል።",
+    "recordMarkedUrgentSuccess": "ደብዳቤው አስቸኳይ ተደርጓል።",
+    "recordUrgencyClearedSuccess": "የደብዳቤው አስቸኳይነት ተወግዷል።",
+    "waitingForCollaborators": "አይቀጥልም: ሁሉም ተহዋዋሪዎች ሥራቸውን እስኪጨርሱ ድረስ ይጠብቁ",
+    "SecureDialogTitle": "ደብዳቤዉን ምስጢራዊ ያድርጉ?",
+    "SecureDialogDescription": "ደብዳቤዉን ምስጢራዊ ካደረጉ በሁዋላ መመለስ አይችሉም።",
+    "UnsecureDialogTitle": "መዝጊያውን መክፈት ትፈልጋለህ?",
+    "UnsecureDialogDescription": "ይህ መዝጊያውን ይከፍታል እና እንደገና ማስተካከል ይፈቅዳል።",
+    "Open actions menu": "የተግባር ምናሌን ክፈት",
+    "Approve": "አጽድቀው",
+    "Forward": "ላክ",
+    "Edit": "አስተካክል",
+    "Delete": "ሰርዝ",
+    "Download": "አውርድ",
+    "Record approved successfully!": "መዝገቡ በተሳካ ሁኔታ ተፅድቋል!",
+    "Record rejected successfully!": "መዝገቡ ውድቅ ሆኗል",
+    "Failed to approve record.": "መዝገቡን ማጽደቅ አልተቻለም።",
+    "Approve Record": "መዝገቡን አጽድቅ",
+    "Record is deleted successfully": "መዝገቡ በተሳካ ሁኔታ ተሰርዟል",
+    "Confirm Delete": "ማጥፋትን ያረጋግጡ",
+    "Delete Record": "መዝገቡን ሰርዝ",
+    "Downloaded": "አዉርድ",
+    "Download Record PDF": "የመዝገቡን PDF አውርድ",
+    "Failed to download PDF.": "PDF ማውረድ አልተሳካም።",
+    "Download successful!": "ማውረድ በተሳካ ሁኔታ ተጠናቋል!",
+    "Confirm Forward": "ማስተላለፍን ያረጋግጡ",
+    "Forward Record": "መዝገቡን ላክ",
+    "Failed to forward the record": "መዝገቡን ማስተላለፍ አልተሳካም።",
+    "Record forwarded successfully": "መዝገቡ በተሳካ ሁኔታ ተላክ።",
+    "Confirm Approve": "አጽድቅን ያረጋግጡ",
+    "Reference": "የድርጅቱ የተለመደ ማጣቀሻ ቁጥር",
+    "ExternalReference": "የገቢ ደብዳቤዎች ማኣቀሻ ቁጥር",
+    "InternalMemoReference": "የዉስጥ ማስታወሻ ደብዳቤዎች ማጣቀሻ ቁጥር",
+    "Reference Number": "ማጣቀሻ ቁጥር",
+    "Enter the subject of the letter": "የደብዳቤውን ርዕስ ያስገቡ",
+    "Delivered By": "ደብዳቤዉን ያደረሰዉ ግለሰብ",
+    "Enter Delivered By": "የደረሰበትን ሰው ያስገቡ",
+    "Letter Number": "የደብዳቤ ቁጥር",
+    "Enter Letter Number": "የደብዳቤ ቁጥሩን ያስገቡ",
+    "Failed to create letter": "ደብዳቤን መፍጠር አልተሳካም",
+    "Letter Created successfully": "ደብዳቤ በትክክል ተፈጠረ",
+    "Please select file_am": "ፋይል እባክዎን ይምረጡ",
+    "signStatus": "የፊርማ ሁኔታ",
+    "createdAt": "የተፈጠረበት ቀን",
+    "View": "ይመልከቱ",
+    "Date Received": "ቀን",
+    "Attachment": "ፋይል",
+    "ReceivingUnit": "ተቀባይ",
+    "Review your record before submission": "ለመላክ ከመጀመርዎ በፊት መዝገብዎን ይገምግሙ",
+    "Back": "ተመለስ",
+    "Submit Record": "መዝገብ አስገባ",
+    "Submitting": "በማስገባት ላይ",
+    "Generating preview": "ቅድመ እይታ በመፍጠር ላይ",
+    "PDF Preview": "PDF ቅድመ እይታ",
+    "Unable to generate preview": "ቅድመ እይታ ማመንጨት አልተቻለም",
+    "Retry": "እንደገና ይሞክሩ",
+    "Record Summary": "የመዝገብ ማጠቃለያ",
+    "No subject": "ርዕስ የለም",
+    "Record Type": "የመዝገብ አይነት",
+    "Not specified": "አልተገለጸም",
+    "Language": "ቋንቋ",
+    "Initiation Type": "የመነሻ አይነት",
+    "Preview generation failed": "ቅድመ እይታ ማመንጨት አልተቻለም",
+    "Preview": "የመዝገብ ቅድመ እይታ",
+    "Form": "ቅፅ",
+    "Delete Delegation": "ዉክልና ሰርዝ",
+    "selectLetter": "ደብዳቤ ይምረጡ",
+    "incomingLetters": "ገቢ ደብዳቤዎች",
+    "nonSmartLetters": "ስማርት ያልሆኑ ደብዳቤዎች",
+    "Filter by": "በዚህ ያጣሩ",
+    "Sending Organization": "የላኪ ድርጅት",
+    "sendingOrganization": "የላኪ ድርጅት",
+    "Receiver Position": "የተቀበለው የስራ መደብ",
+    "Receiver Employee": "የተቀበለው ሰራተኛ",
+    "Add User Under Department": "በክፍል ስር ተጠቃሚ ያክሉ",
+    "usernameRequired": "የተጠቃሚ ስም ያስፈልጋል",
+    "emailRequired": "ኢሜይል ያስፈልጋል",
+    "validEmailFormat": "ትክክለኛ የኢሜይል ቅርጸት ያስገቡ",
+    "phoneRequired": "ስልክ ቁጥር ያስፈልጋል",
+    "validPhoneFormat": "ትክክለኛ የስልክ ቁጥር ቅርጸት ያስገቡ",
+    "amharicNameRequired": "አማርኛ ስም ያስፈልጋል",
+    "englishNameRequired": "እንግሊዝኛ ስም ያስፈልጋል",
+    "MarkUrgent": "Mark as Urgent",
+    "UnmarkUrgent": "Unmark Urgent",
+    "MarkUrgentDialogTitle": "Mark this record as urgent?",
+    "MarkUrgentDialogDescription": "This record will be flagged as urgent for quick handling.",
+    "UnmarkUrgentDialogTitle": "Unmark this record as urgent?",
+    "UnmarkUrgentDialogDescription": "This record will no longer appear as urgent.",
+    "fromSmartUsers": "ከስማርት ኦፊስ ተጠቃሚ ቢሮዎች የተላከ",
+    "fromExternalNonsmart": "ከውጭ ስማርት ተጠቃሚዎች የተላከ",
+    "recordOfficeRegester": "በመዝገብ ቤት የተመዘገበ",
+    "addRecordRO": "ገቢ ደብዳቤ መዝግብ",
+    "Make Review": "ግምገማ ያድርጉ",
+    "Confirm Review": "ግምገማውን ያረጋግጡ",
+    "noSignatureForDirectSend": "ቀጥታ መላክ ለማድረግ ምንም ንፁህ ፊርማ አልተገኘም።",
+    "directDispatchSuccess": "ደብዳቤው በተሳካ ሁኔታ ተላከ።",
+    "directDispatchError": "ደብዳቤውን መላክ አልተሳካም።",
+    "SendDirectRecordTitle": "ቀጥታ ደብዳቤ ላክ",
+    "SendDirectRecordDescription": "ይህን ቀጥታ ደብዳቤ መላክ እንደሚፈልጉ እርግጠኛ ነዎት? ይህ ተግባር መመለስ አይችልም።",
+    "Sending": "እየላከ ነው...",
+    "createAndSend": "ቀጥታ ደብዳቤ ላክ",
+    "Confirm Reject": "ዉድቅ ማድረግ ያረጋግጡ"
+  },
+  "statusBar": {
+    "Skipped": "ታልፉል",
+    "Pending": "በመጠባበቅ ላይ",
+    "pending": "በመጠባበቅ ላይ",
+    "Team Rejected": "ቡድን ዉድቅ አድርግ",
+    "teamRejected": "ቡድን ዉድቅ አድርግ",
+    "Draft": "ረቂቅ",
+    "draft": "በሂደት ላይ",
+    "In Progress": "በሂደት ላይ",
+    "InProgress": "በሂደት ላይ",
+    "In progress": "በሂደት ላይ",
+    "active": "በሂደት ላይ",
+    "Reassigned": "በድጋሚ ተመድቧል",
+    "re_assigned": "በድጋሚ ተመድቧል",
+    "Approved": "ፀድቋል",
+    "Accepted": "ተቀባይነት አግኝቷል",
+    "accepted": "ተቀበለ",
+    "Dispatched": "ተልኳል",
+    "Adjustment": "አስተካክል",
+    "adjustment": "አስተካክል",
+    "adjustment_requested": "የማስተካከያ ጥያቄ ቀርቧል",
+    "AdjustmentRequested": "የማስተካከያ ጥያቄ ቀርቧል",
+    "Rejected": "ተቀባይነት አላገኘም",
+    "rejected": "ተተወ",
+    "Submitted": "ወደፊት",
+    "All": "ሁሉም",
+    "Approve": "አጽድቅ",
+    "approved": "አጽድቅ",
+    "Accept": "ተቀበል",
+    "Assign": "መድብ",
+    "Reject": "ዉድቅ አድርግ",
+    "Adjust": "አስተካክል",
+    "Sent": "ተልኳል",
+    "Send": "ላክ",
+    "Created At": "የተፈጠረው በ",
+    "Sign Status": "የፊርማ ሁኔታ",
+    "activate": "አንቃ",
+    "deactivate": "አጥፋ",
+    "activated": "ዉክልናዉ ጀምሯል",
+    "deactivated": "ዝግ ተደርጓል",
+    "signed": "ፊርማ ተደርጓል",
+    "totalAllocations": "ጠቅላላ ምደባዎች",
+    "assignmentStatistics": "የምደባ ስታትስቲቅሬታ ",
+    "Outgoing": "ወጪ",
+    "Incoming": "ገቢ",
+    "Team Signature": "ፊርማዎች በመጠባበቅ ላይ",
+    "Returned": "የተመለሰ",
+    "Adjusted": "የተስተካከለ",
+    "acceptForward": "ተቀበልና ምራ",
+    "replaced": "የተተካ",
+    "seen": "የታዩ",
+    "assigned": "የተመደበ",
+    "Assigned": "የተመደበ",
+    "not_assigned": "ያልተመደበ",
+    "completionRate": "የማጠናቀቂያ ደረጃ",
+    "Under Review": "በ ግምገማ ላይ",
+    "Re Assigned": "በድጋሚ ተመድቧል",
+    "send_back_by_ro": " በመዝገብ ቤት የተመለሰ",
+    "replied": "መለስ ተሰቷል",
+    "Replied": "መለስ ተሰቷል",
+    "yes": "አዎ",
+    "no": "አይ",
+    "terminated": "ተቋርጧል",
+    "cancelled": "ተሰርዟል",
+    "canceled": "ተሰርዟል",
+    "ended": "ተጠናቋል",
+    "Expired": "ጊዜው አልፏል",
+    "Team Adjusted": "ማስተካከያ ተጠይቋል"
+  },
+  "userIncoming": {
+    "LockRecord": "መዝገቡን ቆልፍ",
+    "UnlockRecord": "መዝገቡን ክፈት",
+    "RecordLocked": "መዝገቡ በተሳካ ሁኔታ ተቆልፏል",
+    "RecordUnlocked": "መዝገቡ በተሳካ ሁኔታ ተከፍቷል",
+    "LockUpdateFailed": "የመዝገቡን የመቆለፍ ሁኔታ ማዘመን አልተቻለም",
+    "ConfirmLockRecord": "መዝገቡ ይቆለፍ?",
+    "ConfirmUnlockRecord": "መዝገቡ ይከፈት?",
+    "ConfirmLockRecordDescription": "ይህን መዝገብ መቆለፍ እንደሚፈልጉ እርግጠኛ ነዎት?",
+    "ConfirmUnlockRecordDescription": "ይህን መዝገብ መክፈት እንደሚፈልጉ እርግጠኛ ነዎት?",
+    "Continue": "ቀጥል",
+    "Update and Assign": "ፍጠር እና መድብ",
+    "Create and Assign": "አስተካክለህ መድብ",
+    "nonSmart": "ሲስተሙን ከማይጠቀሙ",
+    "external": "ሲስተሙን ከሚጠቀሙ",
+    "Assign this CC record to one or more departments": "ይህንን የCC መዝገብ ለአንድ ወይም ከዚያ በላይ ክፍሎች ይመድቡ",
+    "Select a remark...": "የተለመዱ ምላሾችን ይምረጡ!",
+    "Select Predefined Remark": "የተለመዱ ምላቾችንን ይምረጡ",
+    "Clear": "አጥፋ",
+    "From Date": "ከ",
+    "To Date": "እስከ",
+    "successassign": "መዝገብ በተሳካ ሁኔታ ተመዝግቧል።",
+    "Letters": "ደብዳቤዎች",
+    "Department": "ክፍል",
+    "Subject": "ርዕሰ ጉዳይ",
+    "Date": "ቀን",
+    "Search": "ፈልግ",
+    "Error loading records.": "መዝግቦች ሲመታ ስህተት አለ።",
+    "errDelegation": "ዉክልና ስለወከሉ ይህን ገፅ መመልከት አይችሉም",
+    "Status": "ሁኔታ",
+    "Type": "ዓይነት",
+    "remarkAdded": "አስተያየት ታክሏል",
+    "newAssignment": "አዲስ ምደባ",
+    "Actions": "ተግባራት",
+    "Sending Department": "የላከው ክፍል",
+    "No Department": "ክፍል የለም",
+    "No Subject": "ርዕሰ ጉዳይ የለም",
+    "Sending Organization (Amharic)": "የላከው ድርጅት ስም(በአማርኛ)",
+    "Sending Organization": "የላከው ድርጅት ",
+    "No Sending organization": "No Sending organization",
+    "Sending Organization (English)": "የላከው ድርጅት ስም(እንግሊዝኛ)",
+    "View Detail": "ዝርዝር ይመልከቱ",
+    "Open actions menu": "የተግባር ምናሌን ክፈት",
+    "Accept": "ተቀበል",
+    "Assign": "መድብ",
+    "Edit": "አስተካክል",
+    "update": "መዝገብ አስተካክል",
+    "Delete": "ሰርዝ",
+    "Download": "አውርድ",
+    "Reject": "ዉድቅ አድርግ",
+    "Cancel": "ሰርዝ",
+    "uploadIncomingRecord": "ገቢ መዝገብ አስገባ",
+    "Record accepted successfully": "መዝገቡ በተሳካ ሁኔታ ተቀብሏል",
+    "Failed to accept record": "መዝገቡን መቀበል አልተቻለም።",
+    "Confirm Acceptance": "መቀበልን ያረጋግጡ",
+    "Are you sure you want to accept this record?": "ይህን መዝገብ መቀበል እንደምትፈልጉ ያረጋግጡ?",
+    "Confirm": "ያድርጉ",
+    "Processing...": "በሂደት ላይ...",
+    "Failed to Assign a Record": "መዝገቡን መመያየት አልተቻለም።",
+    "Assign this record to one or more departments": "ይህን መዝገብ ለአንዱ ወይም ከዚያ በላይ ክፍሎች መመያየት።",
+    "Assign Record": "መዝገቡን መመያየት",
+    "An error occurred during assignment.": "በመመያየት ሂደት ውስጥ ስህተት ተፈጥሯል።",
+    "Enter your remarks...": "የእርስዎን አስተያየት ያስገቡ...",
+    "Assigning...": "በመመያየት ላይ...",
+    "Departments": "ክፍሎች",
+    "Select department(s)...": "ክፍል ይምረጡ...",
+    "Employees": "ሰራተኞች",
+    "Select employee(s)...": "ሰራተኛ ይምረጡ...",
+    "Remark": "አስተያየት",
+    "Are you sure you want to reject this record?": "ይህን መዝገብ መተው እንደምትፈልጉ ያረጋግጡ?",
+    "Failed to rejected record": "መዝገቡን መተው አልተቻለም።",
+    "Record rejected successfully": "መዝገቡ በተሳካ ሁኔታ ተተውቷል",
+    "To": "ለ",
+    "Assign CC": "ግልባጭ መድብ",
+    "Assign CC Record": "ግልባጭ መዝገብ መድብ",
+    "Assign this CC record to one or more positions": "ይህን ሲሲ መዝገብ ለአንድ ወይም ከዚያ በላይ ቦታዎች መድብ",
+    "Select Positions": "ቦታዎችን ይምረጡ",
+    "Select positions to assign": "ለመመደብ ቦታዎችን ይምረጡ",
+    "Comment": "አስተያየት",
+    "Quick Remarks": "ፈጣን አስተያየቶች",
+    "Failed to Assign CC Record": "ሲሲ መዝገብን መመደብ አልተቻለም",
+    "ConvertedBy": "የተቀየረው በ",
+    "ReceiverEmployee": "ተቀባይ ግለሰብ",
+    "ReceiverDepartment": "ተቀባይ ክፍል",
+    "return": "መልስ",
+    "returnQues": "እርግጠኛ ነዎት ይህን መዝገብ መመለስ ይፈልጋሉ?",
+    "returing": "በመመለስ ላይ...",
+    "conformReturn": "መመለስን ያረጋግጡ",
+    "Reference Number": "ማጣቀሻ ቁጥር",
+    "Dispatched Date": "ቀን",
+    "noRemark": "ምንም ማስታወሻ አልተገኘም",
+    "searchRemark": "ማስታወሻ ፈልግ...",
+    "Is Secured": "ሚስጥራዊ ነው?",
+    "Is Urgent": "አስቸኳይ ነው?",
+    "Receiving Organization": "የሚቀበል ድርጅት",
+    "Attachments": "ተያያዥ ፋይሎች",
+    "parent": "የአለቃዬ መዝገብ",
+    "self": "የእኔ መዝገብ",
+    "errorLoadingRecords": "Error Loading Records",
+    "reply": "ምላሽ ስጥ",
+    "replyRecord": "ምላሽ መዝገብ",
+    "remarkDate": "አስተያየት የተሰጠበት ቀን",
+    "isReplyLetter": "ይህ መዝገብ ምላሽ ደብዳቤ ነው",
+    "ViewReplyLetterDetails": "የምላሽ ደብዳቤ ዝርዝሮችን ይመልከቱ",
+    "isSecured": "ሚስጥራዊ",
+    "isUrgent": "አስቸኳይ",
+    "RecordStatus": "የመዝገብ ሁኔታ"
+  },
+  "ApprovalPage": {
+    ".Record adjusted successfully": "መዝገቡ በትክክል ተስተካክሏል",
+    "yourStamp": "የእርስዎ ቲተር",
+    "Letters": "ደብዳቤዎች",
+    "Department": "ክፍል",
+    "Subject": "ርዕሰ ጉዳይ",
+    "Date": "ቀን",
+    "Search": "ፈልግ",
+    "Error loading records.": "መዝግቦች ሲመታ ስህተት አለ።",
+    "Status": "ሁኔታ",
+    "Actions": "ተግባራት",
+    "Sending Department": "የላከው መምሪያ",
+    "No Department": "መምሪያ የለም",
+    "No Subject": "ርዕሰ ጉዳይ የለም",
+    "Sending Organization": "የላከው ድርጅት",
+    "View Detail": "ዝርዝር ይመልከቱ",
+    "Open actions menu": "የተግባር ምናሌን ክፈት",
+    "receiverEmployee": "ተቀባይ ባለሞያ",
+    "receiverPosition": "ተቀባይ ክፍል",
+    "LetterName": "የፋይል ስም",
+    "Receiver": "ተቀባይ",
+    "Record accepted successfully": "መዝገቡ በተሳካ ሁኔታ ተቀብሏል",
+    "Confirm": "ያድርጉ",
+    "Remark": "አስተያየት",
+    "Remarks": "አስተያየት",
+    "Accept Record": "መዝገብ ተቀበል",
+    "recordAdjustedSuccessfully": "መዝገቡ በትክክል ተስተካክሏል",
+    "confirmAdjustment": "ማስተካከያን ያረጋግጡ",
+    "adjustRecord": "መዝገቡን ያስተካክሉ",
+    "selectOrUploadSignature": "እባክዎ ፊርማ ይምረጡ ወይም ይስቀሉ",
+    "selectOrUploadTeeter": "እባክዎ ቴተር ይምረጡ ወይም ይስቀሉ",
+    "recordApprovedSuccessfully": "መዝገቡ በተሳካ ሁኔታ ተፀድቷል!",
+    "failedToApproveRecord": "መዝገቡን ማጽደቅ አልተቻለም።",
+    "approveRecord": "መዝገቡን ያጽዱ",
+    "confirmApprove": "ማጽደቅን ያረጋግጡ",
+    "confirmRejection": "ውድቅ የተደረገ ያረጋግጡ",
+    "rejectRecord": "መዝገቡን ውድቅ ሆኗል",
+    "RecordType": "የመዝገብ አይነት",
+    "selectStamp": "ማህተም ይምረጡ",
+    "selectTetter": "ቲተር ይምረጡ",
+    "selectedStamp": "የተመረጠው ማህተም፡",
+    "noStampsForLanguage": "ምንም የ{{language}} ማህተሞች የሉም። እባክዎ አስተዳዳሪዎን ያነጋግሩ።",
+    "signature": "ፊርማ",
+    "yourSignature": "የእርስዎ ፊርማ፡",
+    "selectedSignature": "የተመረጠው ፊርማ፡",
+    "selectSignature": "ፊርማ ይምረጡ",
+    "approving": "እየፅደቀ ነው...",
+    "All": "ሁሉም",
+    "FileName": "የፋይል ስም",
+    "SendingDepartment": "የላከው ክፍል",
+    "RecordStatus": "የመዝገብ ሁኔታ"
+  },
+  "viewDetail": {
+    "for": "ስለ",
+    "viewDetail": "ዝርዝር ይመልከቱ",
+    "from": "ከ",
+    "letter": "ዋና ደብዳቤ",
+    "letterPreview": "የደብዳቤ እይታ",
+    "view": "ደብዳቤ ተመልከት",
+    "fullScreen": "ሙሉ እይታ",
+    "back": "ተመለስ",
+    "loading": "Loading...",
+    "noPreview": "ቅድመ እይታ አልተገኘም።",
+    "securedRecordMessage": "ደብዳቤዉ ምስጢራዊ ስለሆነ ዝርዝሩን የመመለከት ፍቃድ የለዎትም!",
+    "securedAttachmentMessage": "ደብዳቤዉ ምስጢራዊ ስለሆነ አባሪ ፋይሎቹን የመመልከት ፍቃድ የለዎትም!",
+    "receivingOrganizations": "ተቀባይ ድርጅቶች",
+    "receivingUserEmployees": "ተቀባይ ተጠቃሚ ሰራተኞች",
+    "sendingDepartment": "ላኪ ክፍሎች",
+    "externalCcOrganizations": "ዉጫዊ ግልባጭ ድርጅቶች",
+    "internalCcDepartments": "ውስጣዊ ግልባጭ ክፍሎች",
+    "receivingDepartments": "ተቀባይ ክፍሎች",
+    "sentDate": "የተላከበት ቀን",
+    "referenceNumber": "ማጣቀሻ ቁጥር",
+    "attachments": "አባሪ",
+    "remarks": "ማስታወሻ",
+    "loadingRemarks": "ማስታወሻዎች በመጫን ላይ...",
+    "failedToLoadRemarks": "ማስታወሻዎችን መጫን አልተቻለም።",
+    "noRemarksAvailable": "ለዚህ መዝገብ ማስታወሻ የለም።",
+    "action": "እርምጃ",
+    "comment": "አስተያየት፡",
+    "noAttachmentsAvailable": "ምንም አባሪ የሉም።",
+    "open": "ክፈት",
+    "subject": "ርዕስ",
+    "letterNumber": "የደብዳቤ ቁጥር",
+    "deliveredBy": "የተደረሰው በ",
+    "personalRemark": "የግል ማስታወሻ",
+    "noPersonalRemarkProvided": "የግል ማስታወሻ አልተሰጠም",
+    "regeneratePdf": "PDF እንደገና ይፍጠሩ",
+    "regeneratingPdf": "በመፍጠር ላይ...",
+    "pdfRegenerationSuccess": "PDF በተሳካ ሁኔታ ተፈጥሯል",
+    "pdfRegenerationFailed": "PDF መፍጠር አልተሳካም",
+    "sendingBureau": "ላኪ ቢሮ",
+    "collaborators": "ፈራሚዎች",
+    "recordDetail": "የደብዳቤ ዝርዝር",
+    "commentorEmployee": "አስተያየት ሰጪ ሰራተኛ",
+    "commentorDepartment": "አስተያየት ሰጪ ክፍል",
+    "noComment": "ምንም አስተያየት የለም",
+    "fileName": "የፋይል ስም",
+    "fileName1": "የፋይል ስም (የመዝገብ ቤት ማጣቀሻ ቁጥር)",
+    "toogleColumns": "ዓምዶችን ቀያይር",
+    "sendingEmployee": "ላኪ ሰራተኛ"
+  },
+  "PDF": {
+    "dropFilesHere": "ፋይሎችን እዚህ ይጣሉ",
+    "dragDropInstruction": "አባሪ ፋይሎን እዚህ ያስገቡ",
+    "youCanUpload": "መጫን የሚቻል",
+    "removeFile": "ፋይሉን ያስወግዱ",
+    "filesUpTo": "እስከ ... ፋይሎች",
+    "aFileWith": "ከ... ጋር ያለ ፋይል",
+    "file": "ፋይል",
+    "wasRejected": "ተተውቷል",
+    "uploaded": "ተጫኗል",
+    "failedToUpload": "መጫን አልተቻለም",
+    "uploading": "በመጫን ላይ...",
+    "cannotUploadMoreThan": "ከ በላይ ፋይሎችን ማጫን አይቻልም"
+  },
+  "shareViaEmail": {
+    "title": "መዝገብን በኢሜይል ያጋሩ",
+    "description": "ይህን መዝገብ ለማጋራት የኢሜይል አድራሻ ያስገቡ።",
+    "emailLabel": "የኢሜይል አድራሻ",
+    "emailPlaceholder": "የኢሜይል አድራሻ ያስገቡ",
+    "emailRequired": "የኢሜይል አድራሻ ያስፈልጋል",
+    "invalidEmailFormat": "እባክዎ ትክክለኛ የኢሜይል አድራሻ ያስገቡ",
+    "shareButton": "መዝገብ አጋራ",
+    "shareSuccess": "መዝገቡ በኢሜይል በተሳካ ሁኔታ ተጋርቷል",
+    "shareFailed": "መዝገብን በኢሜይል ማጋራት አልተቻለም",
+    "networkError": "የኔትወርክ ስህተት ተከስቷል። እባክዎ ግንኙነትዎን ይፈትሹ እና እንደገና ይሞክሩ።"
+  },
+  "convert": {
+    "recordConverted": "መዝገቡ በተሳካ ሁኔታ ተቀይሮ ትልኳል",
+    "selectSeal": "እባክዎን ማህተም ይምረጡ።",
+    "convertRecord": "መዝገቡን ቀይር",
+    "recordType": "የመዝገብ አይነት፦",
+    "subject": "ርዕስ፦",
+    "convertAndDispatch": "ቀይርና ላክ",
+    "selectSealLabel": "ማህተም ይምረጡ፦",
+    "loadingSeals": "ማህተሞችን በመጫን ላይ...",
+    "selectSealPlaceholder": "-- ማህተም ይምረጡ --",
+    "selectedSealPreview": "የተመረጠው ማህተም እይታ፦",
+    "drawSig": "ፊርማ ፈርም"
+  },
+  "delegation": {
+    "viewLetter": "ደብዳቤዉን ተመልከት",
+    "noLetterAssigned": "ደብዳቤ የለዉም",
+    "delegatedPosition": "የተወካይ የስራ መደብ መጠሪያ",
+    "delegateePosition": "የወከለኝ የስራ ቦታ",
+    "delegateeEmployee": "የወከለኝ ባለሙያ",
+    "selectDelegatedPosition": "የተወካይ የስራ መደብ መጠሪያ ይምረጡ",
+    "delegateTo": "ተወካይ ባለሙያ",
+    "selectEmployee": "ባለሙያ ይምረጡ",
+    "noEmployeesAvailable": "ለዚህ የስራ ቦታ ምንም ባለሙያች አልተገኙም",
+    "startDate": "የመጀመሪያ ቀን",
+    "pickDate": "ቀን ይምረጡ",
+    "endDate": "የመጨረሻ ቀን",
+    "endDateMinimumFutureError": "የመጨረሻ ቀን ከአሁኑ ጊዜ ቢያንስ 2 ደቂቃ በኋላ መሆን አለበት",
+    "update": "አዘምን",
+    "save": "መዝግብ",
+    "title": "ዉክልና",
+    "newDelegation": "አዲስ ውክልና",
+    "editDelegation": "ውክልና አስተካክል",
+    "addDelegation": "ውክልና ጨምር",
+    "position": "የተወካይ የስራ መደብ መጠሪያ",
+    "active": "በስራ ላይ",
+    "delegator": "ወካይ",
+    "delegatedEmployee": "ተወካይ ባለሙያ",
+    "currentEndDate": "የአሁኑ ያለው የመጨረሻ ቀን",
+    "select": "ይምረጡ",
+    "acting": "እንደ",
+    "switchRole": "ሚና ይቀይሩ",
+    "successDelete": "ውክልና በተሳካ ሁኔታ ተሰርዟል።",
+    "activeDelegationExists": "ንቁ ውክልና አለ፤ ያለውን ውክልና ያስተካክሉ ወይም ሰርዘው እንደገና ይፍጠሩ።",
+    "createdSuccess": "ውክልና በተሳካ ሁኔታ ተፈጥሯል",
+    "deletedSuccess": "ውክልና በተሳካ ሁኔታ ተሰርዟል",
+    "updatedSuccess": "ውክልና በተሳካ ሁኔታ ተዘምኗል",
+    "terminationDetail": "የመቋረጥ ዝርዝር",
+    "viewTerminationDetail": "የመቋረጥ ዝርዝር ይመልከቱ",
+    "terminatedSuccess": "ውክልና በተሳካ ሁኔታ ተቋርጧል",
+    "deleteDescription": "ይህን ውክልና ለማቋረጥ ምክንያትዎን ያስፍሩ።",
+    "deleteReasonLabel": "ምክንያት",
+    "deleteReasonPlaceholder": "ይህን ውክልና ለምን ያቋርጡታል?",
+    "deleteReasonRequired": "እባክዎ ለመሰረዙ ምክንያት ያስፍሩ።",
+    "myDelegations": "የወከልኩት ውክልናዎች",
+    "myDelegatee": "የተወከለኩበት ውክልናዎች",
+    "letter": "የውክልና ደብዳቤ",
+    "letterDetails": "የተመረጠ ደብዳቤ ዝርዝሮች",
+    "recordInformation": "የመዝገብ መረጃ",
+    "letterPreview": "የደብዳቤ ቅድመ እይታ",
+    "openInNewTab": "በአዲስ ትር ክፈት",
+    "preview": "ቅድመ እይታ",
+    "previewDelegation": "የውክልና ቅድመ እይታ",
+    "pdfNotAvailable": "PDF ሰነድ አይገኝም",
+    "recordNotFound": "የተመረጠ መዝገብ አልተገኘም",
+    "pdfNotFound": "PDF ሰነድ አልተገኘም",
+    "pdfLoadError": "PDF ሰነድ መጫን አልተሳካም",
+    "loadingPdf": "PDF ሰነድ በመጫን ላይ...",
+    "retryPdf": "PDF መጫንን እንደገና ሞክር",
+    "receiverPositions": "ተቀባይ ቦታዎች",
+    "initiator": "የተጀመረው በ",
+    "selectLetter": "መዝገብ ምረጥ",
+    "latestComment": "የቅርብ ጊዜ አስተያየት",
+    "commentMeta": "የሰጠው",
+    "commentMetaOn": "ቀን"
+  },
+  "signatureUpload": {
+    "signature": "ፊርማ",
+    "teeter": "ቲተር",
+    "uploadSignature": "ፊርማ ስቀል",
+    "uploadTeeter": "ቲተር ስቀል",
+    "uploadSignatureNote": "ፊርማ ይስቀሉ (PNG ብቻ)",
+    "uploadTeeterNote": "ቲተር ይስቀሉ (PNG ብቻ)",
+    "uploadedSignature": "የተስቀመ ፊርማ:",
+    "uploadedTeeter": "የተስቀመ ቲተር:",
+    "enterFileName": "የፋይሉ ስም ያስገቡ (ከቅጥ በስተቀር)",
+    "preview": "ቅድመ እይታ:",
+    "upload": "ስቀል",
+    "uploading": "በመስቀል ላይ...",
+    "remove": "አስወግድ",
+    "removing": "በመሰረዝ ላይ...",
+    "removedSuccess": "በተሳካ ሁኔታ ተሰርዟል።",
+    "removeTeeterFailed": "ቲተሩን መሰረዝ አልተሳካም።",
+    "removeFailed": "መሰረዝ አልተሳካም።",
+    "selectPngFirst": "እባክዎን መጀመሪያ PNG ፋይል ይምረጡ።",
+    "onlyPngAllowed": "በPNG ብቻ ፋይሎች መፍቀድ ይቻላል።",
+    "signatureExists": "ፊርማ አስቀድሞ አለ። አዲስ ለማስገባት ቀደም ያለውን ያስወግዱ።",
+    "uploadSuccess": "ስቀል ተሳክቷል!",
+    "uploadError": "የስቀል ስህተት፦",
+    "uploadFailed": "ስቀል አልተሳካም።",
+    "openSignatureForm": "ፊርማ መሳቢያን ይክፈቱ",
+    "generateTeeter": "ቲተር ይፍጠሩ",
+    "selectTeeterLanguage": "የቲተር ቋንቋ ይምረጡ",
+    "languageAmharic": "አማርኛ",
+    "languageEnglish": "እንግሊዝኛ",
+    "languageBoth": "ሁለቱም (አማርኛ ከዚያ እንግሊዝኛ)",
+    "confirmGenerateTeeter": "ይፍጠሩ",
+    "cancelGenerateTeeter": "ይቅር",
+    "uploadGeneratedTeeter": "የተፈጠረውን ቲተር ይስቀሉ",
+    "generatedTeeterPreview": "የተፈጠረ ቲተር ቅድመ እይታ",
+    "downloadTransparentPng": "ግልጽ PNG ያውርዱ",
+    "stampNameLabel": "ስም",
+    "stampPositionLabel": "የስራ ድርሻ",
+    "stampBlockAmharic": "አማርኛ",
+    "stampBlockEnglish": "እንግሊዝኛ",
+    "missingEmployeeData": "የሰራተኛ ስም ወይም የስራ ድርሻ አልተገኘም።",
+    "drawSignature": "ፊርማ ይሳሉ",
+    "drawOption": "ምርጫ 2: ፊርማ ይሳሉ",
+    "uploadOption": "ምርጫ 1: ፊርማ ፋይል ስቀል",
+    "drawDescription": "ፊርማዎን በቀጥታ በካንቫስ ላይ ይሳሉ",
+    "drawSignatureFullscreen": "ፊርማ ይሳሉ - ሙሉ ስክሪን",
+    "pleaseAddSignature": "እባክዎን ፊርማ ያክሉ",
+    "clear": "ጸድቅ",
+    "save": "ያስቀምጡ",
+    "cancel": "ይቅር",
+    "maximize": "ያስፋፉ"
+  },
+  "assignment": {
+    "assignedBy": "የተመደበው በ",
+    "assignedTo": "ለ",
+    "assignedOn": "የተመደበበት ቀን፡",
+    "comment": "አስተያየት፡",
+    "assignmentFlow": "የመደበኛ ፍሰት",
+    "noAssignments": "ለዚህ መዝገብ ምንም መደበኛ አልተከናወነም።",
+    "responded": "ተሰጥቷል",
+    "assignedUsing": " የተመደበው በ:",
+    "byName": "ባለሙያ ስም",
+    "byDepartment": "በስራ መደብ",
+    "attentionNeeded": "ትኩረት የሚያስፈልጋቸው",
+    "onTrack": "የተጠናቀቁ",
+    "assInProg": "በሂደት ላይ ያለ ተግባር",
+    "next": "ቀጣይ የተመደቡ"
+  },
+  "auth": {
+    "welcomeBack": "እንኳን ደህና መጡ።",
+    "enterCredentials": "ለመቀጠል መለያዎን ያስገቡ",
+    "email": "ኢሜል",
+    "phoneNumber": "ስልክ ቁጥር",
+    "username": "የተጠቃሚ ስም",
+    "password": "የይለፍ ቃል",
+    "rememberMe": "አስታውሰኝ",
+    "forgotPassword": "የይለፍ ቃልን ረሱ?",
+    "loggingIn": "በመግባት ላይ...",
+    "login": "ግባ",
+    "welcomeHeadline": "እንኳን ወደ እስማርት ኦፊስ በደህና መጡ",
+    "paperlessOffice": "ወረቀት አልባ ቢሮ",
+    "welcomeSubtext": "የስራ ሂደትዎን ለማመቻቸት እና ከወረቀት ነፃ አገልለግት ለመስጠት ይግቡ።",
+    "emailAddress": "ኢሜል አድራሻ",
+    "err": "ልክ ያልሆነ የኢትዮጵያ ስልክ ቁጥር በ+251 መጀመር አለበት።",
+    "invalidEmail": "Please enter a valid email address"
+  },
+  "forgotpassword": {
+    "title": "የይለፍ ቃል ረስተዋል?",
+    "subtitle": "የመመለሻ መመሪያ እንልካለን።",
+    "phone": "ስልክ ቁጥር",
+    "phoneplaceholder": "+251912345678 ወይም 09XXXXXXXX",
+    "invalidphone": "የስልክ ቁጥር ቅርጸት ተሳሳተ። +2519XXXXXXXX ወይም 09XXXXXXXX ይጠቀሙ።",
+    "checkphone": "ስልክ ቁጥርዎን ያረጋግጡ",
+    "checkdesc": "የይለፍ ቃል መመለሻ አገናኝ ወደ ስልክዎ እንልካለን።",
+    "sending": "መመለሻ አገናኝን በመላክ ላይ...",
+    "sendresetlink": "የፓስወርድ መመሻ ሊነክ ላክ",
+    "backtologin": "ወደ ዋና ገፅ ተመለስ",
+    "remember": "የይለፍ ቃልዎን ያስታውሰዋል?",
+    "signin": "ግባ",
+    "home": "ወደ ዋና ገፅ ተመለስ",
+    "success": "የይለፍ ቃል መመለሻ አገናኝ ተልኳል",
+    "successdesc": "እባክዎን ስልክዎን ያረጋግጡ አገናኙን ይመልከቱ።",
+    "fail": "የይለፍ ቃል መመለሻን መጠየቅ አልተሳካም"
+  },
+  "msg": {
+    "sent": "ደብዳቤ ተልኳል",
+    "genericError": "ስህተት ተፈጥሯል",
+    "authError": "ክፍለ ጊዜው አብቅቷል",
+    "authErrorDescription": "እባክዎ እንደገና ይግቡ።",
+    "validationError": "እባክዎ የተሳሳቱ መረጃዎችን ያስተካክሉ።",
+    "permissionError": "ይህን ስራ ለመፈጸም ፍቃድ የለዎትም።",
+    "notFoundError": "የፈለጉትን መረጃ አልተገኘም።",
+    "fileTooLarge": "ፋይሉ በጣም ትልቅ ነው። እባክዎ ፋይሉን አሳንሰው ዳግም ይሞክሩ።",
+    "serverError": "ከአገልጋይ በኩል ችግር አለ። እባክዎ ዳግመኛ ይሞክሩ።",
+    "attachmentDeleted": "አባሪው በተሳካ ሁኔታ ተሰርዟል።",
+    "replyAdded": "ምላሹ በተሳካ ሁኔታ ታክሏል!",
+    "replyError": "ምላሹን በመጨመር ላይ ስህተት አጋጥሟል።",
+    "failedToCreate": "መዝገቡን መፍጠር አልተቻለም",
+    "failedToGetUrl": "የመጫኛ አድራሻን ማግኘት አልተቻለም",
+    "registrationSuccess": "ምዝገባው ተሳክቷል። የይለፍ ቃልህን ለመከላከል ኤስኤምኤስ ልከናል።",
+    "errorOccurred": "ስህተት  ተፈጥሯል።",
+    "successfullyCompleted": "ለውጦች በተሳካ ሁኔታ ተቀምጠዋል።",
+    "pdfRegenerated": "PDF በተሳካ ሁኔታ ዳግመኛ ተፈጥሯል።",
+    "approveFailed": "መዝገቡን ማፅደቅ አልተቻለም።",
+    "approveSuccess": "መዝገቡ በተሳካ ሁኔታ ተፅድቷል",
+    "selectPrompt": "እባክዎ ማህተም ይምረጡ",
+    "extendedSuccess": "ተወካይነት በተሳካ ሁኔታ ተራቅቷል።",
+    "letter": "ደብዳቤ",
+    "approvedSuccess": "መዝገቡ በተሳካ ሁኔታ ተፅድቷል!",
+    "submittedSuccess": "መዝገቡ በተሳካ ሁኔታ ተሰጥቷል!",
+    "reviewSuccess": "መዝገቡ በተሳካ ሁኔታ ሪቪው ላይ ሆኗል!",
+    "markedForAdjustment": "ለማሻሻል ተምልከቷል",
+    "sentToOfficer": "ወደ መዝገብ ኦፊሰር ተልኳል",
+    "errorSendingToOfficer": "ወደ መዝገብ ኦፊሰር መላክ ላይ ስህተት ተፈጥሯል",
+    "success": "ተወካይነት ተሳክቷል።",
+    "failed": "ተወካይነት አልተሳካም።",
+    "deletedSuccess": "ተወካይነት በተሳካ ሁኔታ ተሰርዟል።",
+    "deleteFailed": "ተወካይነትን መሰረዝ አልተቻለም።",
+    "failedCreateOrGetUrl": "መዝገቡን መፍጠር ወይም የመጫኛ አድራሻን ማግኘት አልተቻለም።",
+    "sentAndUploadedSuccess": "ደብዳቤ ተልኳል እና ፋይሉ በተሳካ ሁኔታ ተጫኗል።",
+    "failedSendOrUpload": "ደብዳቤን መላክ ወይም ፋይልን መጫን አልተቻለም።",
+    "successassign": "መዝገብ በተሳካ ሁኔታ ተመዝግቧል።",
+    "submittedWithAttachments": "መዝገቡ ከአባሪ ፋይሎች ጋር ተሰጥቷል።",
+    "createFailed": "መዝገቡን መፍጠር አልተቻለም።",
+    "refreshedSuccess": "በተሳካ ሁኔታ ተዘምኗል።",
+    "refreshFailed": "መዘመኑ አልተቻለም።",
+    "redirecting": "በመምረጥ ላይ...",
+    "loginSuccess": "መግባት ተሳክቷል።",
+    "receivingDepartmentRequired": "ቢያንስ አንድ ተቀባይ መመዝገብ አስፈላጊ ነዉ!",
+    "receivingUnitRequired": "አንድ ተቀባይ ክፍል አስፈላጊ ነው።",
+    "recordTypeRequired": "የመዝገብ አይነት አስፈላጊ ነው።",
+    "initiationTypeRequired": "የመነሻ አይነት አስፈላጊ ነው።",
+    "subjectRequired": "ርዕሰ ጉዳይ አስፈላጊ ነው!",
+    "preferredLanguageRequired": "የተመረጠው ቋንቋ አስፈላጊ ነው።",
+    "bodyRequired": "የደብዳቤ ይዘት አስፈላጊ ነው!",
+    "sincerelyTextRequired": "ከሠላምታ ጋር አስፈላጊ ነው።",
+    "headerRequired": "ራስጌ አስፈላጊ ነው።",
+    "footerRequired": "ግርጌ አስፈላጊ ነው።",
+    "accessDenied": "መዳረሻ ተከልክሏል።",
+    "accessDeniedmsg": "ውክልና ስላሎት ወደዚህ ገጽ መግባት አይችሉም። ለመቀጠል እባክዎን ውክልናውን ያንሱ።",
+    "accessDeniedmsg2": "ውክልና ስላሎት ወደዚህ ገጽ መግባት አይችሉም። ቀድሞውንም በሌላ ሰራተኛ ከተወከሉ ውክልና መስጠት አይችሉም",
+    "accessDeniedmsg3": "በዚህ ድርጅት ስላልተመዘገብክ ወይም ምንም አይነት ቦታ ስላልተመደብክ የሪከርድ አስተዳደር ሞጁልን መጠቀም አትችልም።",
+    "sendingOrgRequired": "ላኪ ድርጅት ያስፈልጋል",
+    "deliveredByRequired": "የሚደርሰው በ ያስፈልጋል",
+    "letterNoRequired": "የደብዳቤ ቁጥር ያስፈልጋል",
+    "letterNameRequired": "የፋይል ስም ያስፈልጋል",
+    "noReferenceNumber": "ደብዳቤው ስላልተላከ ማጣቀሻ ቁጥር የለውም",
+    "noMsg": "ምክንያቱም ደብዳቤው እስካሁን አልተላከም።",
+    "sincerely": "ከሠላምታ ጋር",
+    "changePasswordMsg": "ለአካውንትዎ አዲስ የይለፍ ቃል ይፍጠሩ",
+    "oldPassword": "የቀድሞ የይለፍ ቃል",
+    "newPassword": "አዲስ የይለፍ ቃል",
+    "confirmNewPassword": "አዲሱን የይለፍ ቃል ያረጋግጡ",
+    "changing": "በመቀየር ላይ...",
+    "failedChange": "የይለፍ ቃል መቀየር አልተሳካም",
+    "successChange": "የይለፍ ቃል በተሳካ ሁኔታ ተቀይሯል",
+    "passwordMismatch": "የይለፍ ቃላቱ አይዛመዱም",
+    "passwordRequirements": "የይለፍ ቃል ቢያንስ 8 ቄልፎች መሆን አለበት",
+    "currentPasswordRequired": "የአሁኑ የይለፍ ቃል ያስፈልጋል",
+    "newPasswordRequired": "አዲስ የይለፍ ቃል ያስፈልጋል",
+    "passwordMinLength": "የይለፍ ቃሉ ርዝመት ቢያንስ 8 መሆን አለበት",
+    "passwordMustBeDifferent": "አዲሱ የይለፍ ቃል ከድሮው የተለየ መሆን አለበት",
+    "confirmPasswordRequired": "እባክዎ የይለፍ ቃሉን ያረጋግጡ",
+    "uppercaseLetter": "አቢይ ሆሄ",
+    "lowercaseLetter": "ንዑስ ሆሄ",
+    "number": "ቁጥር",
+    "specialCharacter": "ልዩ ምልክት",
+    "passwordComplexity": "የይለፍ ቃሉ ቢያንስ አንዱን መያዝ አለበት",
+    "passwordResetSuccess": "በአዲሱ የይለፍ ቃልዎ አሁን መግባት ይችላሉ",
+    "selectAll": "ሁሉንም ይምረጡ",
+    "error": "ስህተት ተፈጥሯል።",
+    "createRecordMsg": "አዲስ ገቢ መዝገብ ለመፍጠር ዝርዝሩን ይሙሉ",
+    "updateRecordMsg": "የመጪ መዝገብ ዝርዝሮችን ከታች አዘምን",
+    "completionRate": "ስሌት፡ ተቀባይነት አግኝቷል + ውድቅ ተደርጓል + እንደገና ተመድቧል +መላሽ ተሰቷል ሲካፈል በጠቅላላ ምደባዎች",
+    "totalAllocations": "ለተጠቃሚዎች ወይም ክፍሎች የተመደቡት የደብዳቤዎች ጠቅላላ ብዛት",
+    "reassigned": "ከአንድ ተጠቃሚ ወይም ክፍል ወደ ሌላ የተቀየሩ ደብዳቤዎች",
+    "rejected": "ተቀባዩ የከለከላቸው ወይም ያልተፈቀዱ ደብዳቤዎች",
+    "accepted": "ተቀባዩ የተቀበላቸው ወይም ያረጋገጣቸው ደብዳቤዎች",
+    "replied": "ተቀባዩ መልስ የሰጠባቸው ወይም የተመለሱ ደብዳቤዎች",
+    "draft": "ተቀባዩ እርምጃ ወይም ውሳኔ የሚጠበቁት ደብዳቤዎች",
+    "waitingMsg": "The Ethio-Djibouti Railway was established in April 2017 following a bilateral agreement signed on December 16, 2016, between Ethiopia and Djibouti. A Shareholders Agreement was signed on January 11, 2017, among public bodies and state enterprises from both nations, governed by Ethiopian commercial law.\n\nThe shareholders formed a Share Company with an initial capital of USD 500 million, dedicated to operating and maintaining the Addis Ababa–Djibouti Railway and providing freight and passenger transport services. The Ethiopian Railway Corporation (ERC) holds a 72% share, while the Société Djiboutienne de Chemin de Fer (SDCF) owns 25%. The remaining shares are divided among the Ministry of Transport (MoTL), the Ministry of Finance (MoF), and the former Ministry of Public Enterprises (MoPE), each holding 1%.\n\nThe railway line begins in Sebeta, southwest of Addis Ababa, and runs east through Adama, Mieso, Diredawa, and the border station Dewanle, ultimately reaching the ports of Djibouti. The total length of the railway is 756 km, featuring double tracks from Sebeta to Adama and single track from Adama to the Djibouti ports.\n\nThere are 20 stations along the route, with a dispatching command center located in Labu and a sub-center in Nagad. Locomotive and rolling stock depots, as well as facilities for train inspection and repair, have been established in Indode, while Nagad also features a locomotive turnback depot and repair facility.\n\nOperational and maintenance activities commenced in January 2018 by hiring a Management Contractor for six years: having contractual responsibility of maintaining & operating the railway line and providing capacity building trainings for the local staff, Ethiopian and Djiboutian, to handover the work at the end of the Management contract period. Accordingly, the Management Contractor has operated and maintained the line from 2018 to end of 2023 and officially handed over the work to the local staff since January 1, 2024.\n\nAccordingly, the local staff handled all operation and maintenance undertakings in the 2024 fiscal year with a close follow-up from the Board of Directors.",
+    "recordDes": "ይህ ወደ መዝገብ አስተዳደር ይወስዳል",
+    "orgAdminDes": "ይህ ወደ ጣቢያ አስተዳደር ይወስዳል",
+    "recycleBin": "የተሰረዙ መዝገቦች",
+    "ccEmployeesInvalidSelection": "አንዱ ወይም ከላይ ተመርጠው ያሉ የCC ተጠቃሚዎች ትክክለኛ የተመደበ ስራ ቦታ የላቸውም። እነሱን ያስወግዱ ወይም የሰራተኛ ፕሮፋይላቸውን ያዘምኑ።"
+  },
+  "landingPage": {
+    "smartOffice": "የኢትዮ ጅቡቲ ስማርት ኦፊስ",
+    "signIn": "ግባ",
+    "signUp": "ተመዝገብ",
+    "overview": "አጠቃላይ እይታ",
+    "features": "ባህሪያት",
+    "workflow": "የስራ ሂደት",
+    "manual": "መመሪያ",
+    "digitalTransformation": "ለዘመናዊ የመንግሥት አስተዳደር ዲጂታል ለውጥ።",
+    "facebook": "ፌስቡክ",
+    "twitter": "ትዊተር",
+    "linkedIn": "ሊንክድን",
+    "telegram": "Telegram",
+    "tiktok": "TikTok",
+    "website": "ድህረገፅ",
+    "contactUs": "ያግኙን",
+    "quickLinks": "ፈጣን ማገናኛዎች",
+    "copyright": "ትሪያ - የቅጂ መብት ©",
+    "rightsReserved": "መብቶች የተጠበቁ ናቸው - በትሪያ የበለጸገ",
+    "address": "ሊንጎ ታወር ሸገር ህንጻ ፊት ለፊት፣ ቦሌ፣ አዲስ አበባ፣ ኢትዮጵያ",
+    "platformSystem": "ስማርት ኦፊስ",
+    "initiativeDescription": "የመንግስት መስሪያ ቤቶችን አሰራር በዘመናዊ ቴክኖሎጂ ለማዘመን የተነደፈ የዲጂታል ትራንስፎርሜሽን ውጥን።",
+    "getStarted": "ጀምር",
+    "learnMore": "ለተጨማሪ መረጃ",
+    "sops": "ኤስ . ኦ . ፒ . ኤስ",
+    "smartOfficePlatformSystem": "ኢትዮ ጅቡቲ ስማርት ኦፊስ ሲስተም",
+    "revolutionDescription": "የመንግስት ስራዎችን በ ኣርቴፍሽያል ኢንተለጀንስ የተጎላበተ የስራ ሂደት እና የእውነተኛ ጊዜ ትንታኔዎችን እንዲኖራቸው ማድረግ።",
+    "liveDemo": "የቀጥታ ማሳያ ዝግጅት አለ",
+    "outgoingRecords": "ወጪ ደብዳቤዎች",
+    "outgoingRecordsDesc": "የውስጥ ወይም የውጭ መዝገቦችን ከአባሪዎች እና ተዋረዳዊ ማረጋገጫ የስራ ፍሰቶች ጋር ይፍጠሩ እና ይላኩ።",
+    "incomingRecords": "ገቢ ደብዳቤዎች",
+    "incomingRecordsDesc": "የተላኩ  ደብዳቤዎች የምንመለከትበት።",
+    "approvalWorkflows": "የማጽደቅ ሂደቶች",
+    "approvalWorkflowsDesc": "ወጪ ደብዳቤዎች ቲተር እና ፊርማ በማስገባት ማጽደቅ።",
+    "interactiveDashboard": "ተዛማጅ ዳሽቦርድ",
+    "interactiveDashboardDesc": "ጠቅላላ ውስጣዊ እና ውጫዊ ገቢ/ወጪ የተደረጉ ደብዳቤዎች  በአጠቃላይ የሚያሳይ ገጽ ሆኖ በተጨማሪ ደሞ ጠቅላላ መረጃ በ ፓይ ቻርት ያሳያል።",
+    "organizedFolders": "የተደራጀ ሰነድ",
+    "organizedFoldersDesc": "በላቀ የፍለጋ እና የማጣራትአቅም የተዋቀረ ስርዓት በመጠቀም መዝገቦችን ይመድቡ።",
+    "securityAccessControl": "የደህንነት እና የመዳረሻ ቁጥጥር",
+    "securityAccessControlDesc": "ይህ ስርዓት እያንዳንዱን ተጠቃሚ በስራ መደቡ መሰረት ሊያየው እና ሊሠራው የሚችለውን ይቆጣጠራል፣ እንዲሁም በደብዳቤዎች ላይ የሚደረጉ ሁሉም ተግባራት እና ለውጦች ሙሉ በሙሉ ይመዝግባል።",
+    "powerfulFeaturesTitle": "ኃይለኛ ባህሪያት",
+    "powerfulFeaturesSubtitle": "የደብዳቤዎን የስራ ፍሰት ያመቻቹ",
+    "powerfulFeaturesDesc": "ይህ ስማርት ስይስተም ደብዳቤዎችን በቀላሉ እና በብቃት ለማስተዳደር የምያስችሉ የተለያዩ ውጤታማ መፍትሄዎችን ያቀርባል፣ ከፍተኛ ደህንነት፣ ተገዢነት እና ሙሉ አስተማማኝነት ኣለው።",
+    "feature1": "ፈጣን የማጽደቅ ጊዜ",
+    "feature2": "የተሟላ የሰነድ ስርዓት",
+    "feature3": "የኦዲት ተገዢነት",
+    "documentWorkflow": "የሰነድ እንቅስቃሴ",
+    "recordCreation": "የደብዳቤ ፍጠራ",
+    "recordCreationDesc": "አዲስ ደብዳቤዎችን እና አባሪዎችን ለመፍጠር እና ለመላክ የሚያስችል መሳሪያ",
+    "teamLeaderReview": "የቡድን መሪ ግምገማ",
+    "teamLeaderReviewDesc": "ደብዳቤ ለተቀባዩ ከሚላክበት በፊት የቡድን አስተባባሪ ማረጋገጥ እና መፍቀድ ያለበት ደረጃ",
+    "directorApproval": "በዳይሬክተር ማጽደቅ",
+    "directorApprovalDesc": "የመምሪያው ኃላፊ ገምግሞ ያጽድቃል",
+    "deputyHeadReview": "የምክትል ሃላፊ ግምገማ",
+    "deputyHeadReviewDesc": "ከማቅረቡ በፊት የመጨረሻ የአስተዳደር ፈቃድ",
+    "recordOfficerProcessing": "የመዝገብ ቤት ባለሙያ ሂደት",
+    "recordOfficerProcessingDesc": "ደብዳቤው ከጸደቀ በኋላ፣ ለማቀናበር፣ ለመላክ እና ማጣቀሻ ቁጥር እና ቀን ለመመድብ ለመዝገብ ቤት ባለሙያ ይላካል።",
+    "streamlinedProcess": "ቀላል የተደረገ ሂደት",
+    "recordManagementApprovalWorkflows": "ደብዳቤዎችን እና መዛግብትን ከመፍጠር እስከ ማጽደቅ እና ማሰራጨት የሚቆጣጠር የማጽደቂያ ሂደት።",
+    "smartOfficeDescription": "በገቢ እና ወጪ ደብዳቤዎች ላይ ሙሉ ቁጥጥር ለማድረግ፣ የስራ ፍሰቶችን ለማስተዳደር እና የድርጅትዎን ውጤታምነት ለመጨመር የሚያግዝ ዲጂታል መፍትሄ ነው።",
+    "step": "እርምጃ",
+    "workflowAutomationBenefits": "የስራ ፍሰት አውቶሜሽን አጠቃላይ ጥቅሞች",
+    "workflowAutomationDesc": "ስማርት  የሆነ የስራ ፍሰት ስርዓት የእርስዎን ድርጅታዊ ፖሊሲዎች ማክበርን በሚያረጋግጥበት ጊዜ  ሥራዎችን በ65% ፈጣን ያደርገዋል",
+    "fasterApprovals": "65% ፈጣን ማረጋገጫዎች",
+    "reduceDelays": "የቢሮክራሲያዊ መዘግየቶችን ይቀንሱ",
+    "auditTrail": "100% የኦዲት መንገድ",
+    "completeRecord": "የሁሉም ድርጊቶች መዝገብ",
+    "advancedFeatures": "የላቁ ባህሪያት",
+    "slaMonitoring": "የአገልግሎት ደረጃ እና መቆጣጠሪያ (SLA)",
+    "slaMonitoringDesc": "የአገልግሎት ደረጃ ስምምነቶችን በአውቶማቲክ መከታተል እና ለሚፈጠረው መዘግየት ለሚመለከተው ሰው ማሳወቂያዎችን መላክ።",
+    "conditionalRouting": "ሁኔታዊ መስመር",
+    "conditionalRoutingDesc": "ዘመናዊ ህጎች ሰነዶችን በይዘታቸው፣ በአስፈላጊነታቸው ወይም በዓይነታቸው መሠረት  ኣውተማቲካልይ ወደ ተገቢው ተቀባይ ያስተላልፋሉ።",
+    "temporaryApprovalDelegation": "ሰራተኞች ለሌሎች ጊዜያዊ የማጽደቅ ስልጣን(ውክልና) ሲሰጡ፣ ሁሉም እርምጃዎች በሙሉ ይመዘገባሉ።",
+    "login": "ወደ ስርዓቱ ይግቡ",
+    "step1": "1፡ በጀመርያ በራስጌ ያለውን የ",
+    "headerBtn": "ቁልፉን ይጫኑ",
+    "step2": "2፡ የተጠቃሚ ስም እና የይለፍ ቃል ያስገቡ",
+    "step3": "3፡ የ",
+    "accessBtn": "ቁልፉን ይጫኑ",
+    "note": "ማስታወሻ",
+    "forgotIntro": "የይለፍ ቃልዎን ከረሱ፣ ዳግም ለማስጀመር የIT ባለሙያ ያናግሩ።",
+    "dashboardTitle": "የዳሽቦርድ እይታ",
+    "dashboardDesc": "ዳሽቦርዱ የመዝገብ እንቅስቃሴዎችዎን አጠቃላይ እይታ ያቀርባል",
+    "recordsCreated": "የተፈጠሩ መዝገቦች",
+    "recordsTotal": "እርስዎ የጀመሩት ጠቅላላ መዝገቦች",
+    "recordsReceived": "የተቀበሉት መዝገቦች፡",
+    "incomingDocs": "ከሌሎች የተላኩ መዝገቦች",
+    "breakdown": "የውስጥ/የውጭ ክፍፍል፡",
+    "visuals": "የሰነዶችን በአይነት የሚያሳዩ ቻርቶች",
+    "approvalStatus": "የማጽደቅ ሁኔታ",
+    "approvalTypes": "በመጠባበቅ፣ የተፃደቁ ወይም የተወሰኑ መዝገቦች",
+    "quickActions": "ፈጣን እርምጃዎች",
+    "createOrCheck": "አዲስ መዝገብ ይፍጠሩ ወይም መጠባበቅ ላይ ያሉትን ያረጋግጡ",
+    "recentActivity": "የቅርብ ጊዜ እንቅስቃሴ",
+    "trackUpdates": "በደብዳቤዎች ላይ የተደረጉትን አዳዲስ ለውጦች ይከታተሉ",
+    "manageOut": "የውጪ መዝገቦችን አስተዳደር",
+    "createNew": "አዲስ መዝገቦች መፍጠር",
+    "goToTab": "ወደ ትምህርቱ ይሂዱ",
+    "clickBtn": "ቁልፍ ይጫኑ",
+    "fillFields": "ሁሉንም ያስፈልጋቸውን መስኮች (የመዝገብ አይነት፣ ተቀባይ፣ ርዕስ ወዘተ) ይሙሉ",
+    "attach": "የሚያስፈልጉትን ደጋፊ ሰነዶች ይጨምሩ",
+    "saveOrSubmit": "መዝግብ_ወይም_ላክ",
+    "trackStatus": "የመዝገብ ሁኔታ መከታተል",
+    "notForwarded": "ይህ ደብዳቤ አሁንም አልተላከም። ሊሻሽልና ሊሰረዝ ይችላል።",
+    "awaiting": "ይህ ደብዳቤ ተቀባይነት ወይም ማጽደቅ እየተጠበቀ ነው።",
+    "accepted": "ይህ ደብዳቤ ተቀብሏል እና ለማጽደቅ እየተጠበቀ ነው።",
+    "approvedSent": "ይህ ደብዳቤ ጸድቋል እና ለመላክ ወደ መዝገብ አመራር ተልኳል።",
+    "returned": "ይህ ደብዳቤ ለማስተካከል ወይም ተጨማሪ መረጃ ለማቅረብ ተመለሰ። እባክዎን አስተያየቶቹን ይመልከቱ።",
+    "rejected": "ይህ ደብዳቤ ተቀባይነት አልተሰጠውም።",
+    "sent": "ይህ ደብዳቤ ወደ ተቀባዮች ተልኳል።",
+    "returnedByOfficer": "ይህ ደብዳቤ በመዝገብ  ቤት አመራር ተመለሰ።",
+    "monitor": "በየማጽደቅ ደረጃዎች ውስጥ መዝገቦችዎን መከታተል",
+    "manageIncoming": "የውስጥ መዝገቦችን አስተዳደር",
+    "incomingTypes": "የውስጥ መዝገቦች አይነቶች",
+    "fromOthers": "ከሌሎች ድርጅቶች",
+    "withinOrg": "በድርጅቱ ውስጥ",
+    "copied": "ቅጂ ተደርጓል",
+    "processIncoming": " ገቢ ደብዳቤ ማስተዳደር",
+    "readDoc": "ሙሉውን ሰነድ ክፈትና አንብብ",
+    "acknowledge": "የሰነዱን መቀበል ያረጋግጡ",
+    "forward": "ወደ ሌላ ቡድን አባል ላክ ከሚያስፈልግ",
+    "archive": "አርካይቭ",
+    "fileRef": "ለማጥናት ሰነድ ያዝዙ",
+    "approvalworkflow": "የማጽደቅ ሂደት",
+    "process": "የማጽደቅ ሂደት",
+    "internalFlow": "የውስጥ መዝገቦች ሂደት፡",
+    "creator": "አምራች",
+    "leader": "ቡድን አለቃ",
+    "director": "ዳይሬክተር",
+    "officer": "የመዝገብ ሰራተኛ",
+    "externalFlow": "የውጭ መዝገቦች ሂደት፡",
+    "actions": "የማጽደቅ እርምጃዎች",
+    "delegation": "ውክልና",
+    "delegateInfo": "እርስዎ ከማይኖሩ ጊዜ ሌላ ሰራተኛ ሥልጣንዎን ሊሰጥ ይችላሉ፡",
+    "delegateNav": "ወደ ዚህ ይሂዱ",
+    "selectColleague": "ከድርጅታችሁ ባለሙያ አንዱን ይምረጡ",
+    "setDates": "የመነሻና የመጨረሻ ቀናትን ያዘጋጁ",
+    "setPerms": "ፈቃድ አውጣ",
+    "saveDelegate": "የሥልጣን ማዋል ቅንብሮችን ያስቀምጡ",
+    "autoExpire": "የውክልና ስልጣኖች በተወሰነው ቀን ራሳቸውን ይዘጋሉ።",
+    "collab": "በሠራተኞች መካከል ያለ ሥራ ማጋራት",
+    "collabInfo": "የሥራ ማጋራት መረጃ።",
+    "viewDocs": "ሁሉንም ተባባሪ ሰነዶች አንድ ቦታ ይመልከቱ",
+    "addComments": "አስተያየቶችን ወይም ማስታወሻዎችን ያክሉ",
+    "approve": "ዲጂታል ፊርማ ና ቲተር በመጠቀም ማጽደቅ",
+    "trackChanges": "የተደረጉ ለውጦችን እና የመሻሻያ ታሪክን ክትትል",
+    "realTime": "በእውነተኛ ጊዜ ማሻሻያ",
+    "liveChanges": "በቀጥታ የሚደረጉ ለውጦች መከታተል",
+    "notifications": "ማሳወቂያዎች",
+    "alerts": "አስቸኳይ ትኩረት የሚፈልግ",
+    "signatureMgmt": "የተሰጠ ፊርማና ምልክት አስተዳደር",
+    "leadersOnly": "የቡድን አለቆችና ከዚያ ላይ ያሉ የዲጂታል ፊርማና ምልክት ሊከታተሉ ይችላሉ።",
+    "signatureTitle": "ምልክትና ፊርማ",
+    "uploadTeeter": "ቲተር አስገቡ",
+    "uploadSignature": "ዲጂታል ፊርማዎን ይፍጠሩ ወይም ይስጡ",
+    "defaultSignature": "እያንዳንዱ ማጽደቅ ላይ የሚጠቀሙት ፊርማ",
+    "updateDesignation": "ስራ መደብ ሲለዋወጥ አዘምነው",
+    "security": "የደህንነት ማስታወሻ፦",
+    "encrypted": "በሚስጥር ኮድ የተፃፈ።",
+    "recordModule": "የመዝገብ አስተዳደር ክፍል",
+    "guide": "የኢትዮ ጅቡቲ ስማርት ኦፊስ ፕላትፎርም ስርዓትን ለመጠቀም ሙሉ መምሪያ",
+    "back": "ወደ ዳሽቦርድ ተመለስ",
+    "moduleGuide": "የክፍል መመሪያ",
+    "previous": "ቀዳሚ",
+    "next": "ቀጣይ",
+    "addTeeterSignature": "ዲጂታል ቲተር እና ፊርማ ያክሉ",
+    "returnWithComments": "ከአስተያየት ጋር መመለስ",
+    "requestChanges": "የማሻሻያ ጥያቄ",
+    "screenshotOf": "የእስክሪን ካፕቸር",
+    "fasterApproval": "ፈጣን ማጽደቅ",
+    "auditReady": "ለኦዲት ዝግጁ",
+    "organizedRecords": "የተደራጀ መዝገቦች",
+    "tab": "Tab",
+    "click": "ይጫኑ",
+    "button": "ቁልፍ",
+    "services": "አገልግሎቶች",
+    "fileComplaint": "ቅሬታ ያቅርቡ",
+    "followComplaint": "ቅሬታ  ተከታትሉ",
+    "aboutUs": "ስለ እኛ ያውቁ",
+    "uptime": "የስራ ሰዓት",
+    "bureaus": "ቢሮዎች",
+    "support": "ድጋፍ",
+    "features1": "መስፋፋት የሚችል",
+    "features2": "በበርካታ መሳሪያዎች ላይ ይሰራል",
+    "features3": "በክላውድ ላይ የተመሰረተ የመዝግብ ማመሳሰል",
+    "features4": "በዝቅተኛ ኮኔክሽን የሚሰራ",
+    "features5": "ተለዋዋጭ እና ምላሽ ሰጪ የተጠቃሚ በይነገጽ",
+    "features6": "ደህንነቱ የተጠበቀ",
+    "darkMode": "የጨለማ ሁኔታ",
+    "lightMode": "የብርሃን ሁኔታ"
+  },
+  "organization": {
+    "allFieldsRequired": "ሁሉም መስኮች ያስፈልጋሉ",
+    "name": "ስም",
+    "actions": "ተግባራት",
+    "assignOrgAdminInstructions": "ድርጅት እና እንደ አስተዳዳሪ የሚመደብ ተጠቃሚ ይምረጡ።",
+    "assignUnitAdminInstructions": "ለዚህ ክፍል እንደ አስተዳዳሪ የሚመደብ ተጠቃሚ ይምረጡ።",
+    "unitAdminRemovedSuccess": "የክፍሉ አስተዳዳሪ በተሳካ ሁኔታ ተወግዷል",
+    "unitAdminRemoveFailed": "የክፍሉን አስተዳዳሪ ማስወገድ አልተሳካም",
+    "manageUnitAdminInstructions": "ለዚህ ክፍል የተመደቡ አስተዳዳሪዎችን ይመልከቱ፣ ያክሉ ወይም ያስወግዱ።",
+    "currentUnitAdmins": "የአሁኑ የክፍል አስተዳዳሪዎች",
+    "currentUnitAdminsDescription": "ይህን ክፍል ማስተዳደር የሚችሉ ተጠቃሚዎች።",
+    "noUnitAdminsAssigned": "ለዚህ ክፍል ምንም አስተዳዳሪ አልተመደበም።",
+    "removeAdminTitle": "ይህን አስተዳዳሪ ያስወግዱ?",
+    "removeAdminDescription": "ይህ እርምጃ ሊቀለበስ አይችልም። የተጠቃሚውን የአስተዳዳሪነት ሚና ያስወግዳል።",
+    "removingAdmin": "በማስወገድ ላይ...",
+    "confirmRemoveAdmin": "አዎ፣ አስወግድ",
+    "webManagement": "ዌብ ኮንተንት",
+    "addUser": "ተጠቃሚ ጨምር",
+    "settings": "ሲቲንግስ",
+    "Archive Users": "የተሰረዙ ተጠቃሚዎች",
+    "Archived Organizations": "የተመዘገቡ ድርጅቶች",
+    "Archived Units & Positions": "የተመዘገቡ ክፍሎች እና የስራ መደቦች",
+    "units": "ዩኒት",
+    "selectUnitFirst": "መጀመሪያ የኒት ይምረጡ",
+    "noUnitsFound": "ምንም ክፍሎች አልተገኙም",
+    "organizations": "ድርጅቶች",
+    "newOrganization": "አዲስ ድርጅት",
+    "organizationName": "የድርጅቱ ስም",
+    "Migrated Records": "የፈለሱ ደብዳቤዎች",
+    "Letter Template": "የደብዳቤ ቅጽዎች",
+    "createdOn": "ተፈጠረበት ቀን",
+    "approveUserPrompt": "ተጠቃሚን አጽድቅ",
+    "approveUserDescription": "ይህን ተጠቃሚ ለማጽደቅ እርግጠኛ ነዎት?",
+    "rejectUserPrompt": "ተጠቃሚን አልቀበልም",
+    "rejectUserDescription": "ይህን ተጠቃሚ ለመቃወም እርግጠኛ ነዎት?",
+    "yesApprove": "አዎ፣ አጽድቅ",
+    "yesReject": "አዎ፣ አልቀበልም",
+    "approving": "በማጽደቅ ላይ...",
+    "rejecting": "በመቃወም ላይ...",
+    "numberOfUsers": "የተጠቃሚዎች ብዛት",
+    "assignedAdmin": "የተመደበ አስተዳዳሪ",
+    "isGovernmentOrganization": "መንግስታዊ ድርጅት ነው?",
+    "createNew": "አዲስ ፍጠር",
+    "Reports": "ሪፖርት",
+    "achievements": "አፈጻጸም",
+    "edit": "አስተካክል",
+    "enterDetails": "አዲሱን ድርጅት ዝርዝሮች ያስገቡ። በአስተማማኝ እንደተሰኘ ያሉ ሜዳዎች (*) አስፈላጊ ናቸው።",
+    "nameAmharic": "ስም (አማርኛ)",
+    "nameEnglish": "ስም (እንግሊዝኛ)",
+    "key": "ቁልፍ",
+    "Signature Settings": "ፊርማ ቅንብሮች",
+    "organizationType": "የድርጅት አይነት",
+    "loadingOrganizationTypes": "የድርጅት አይነቶችን በመጫን ላይ...",
+    "errorLoadingOrganizationTypes": "የድርጅት አይነቶችን ማጫን ላይ ስህተት ተፈጥሯል",
+    "noOrganizationTypesAvailable": "ምንም የድርጅት አይነት አልተገኘም",
+    "parentOrganization": "ዋና ድርጅት (አማራጭ)",
+    "loading": "በመጫን ላይ...",
+    "selectOrganization": "ድርጅት ይምረጡ",
+    "selectOrganizationFirst": "መጀመሪያ ድርጅት ይምረጡ",
+    "noOrganization": "ምንም ድርጅት የለም",
+    "isOrganizationPublic": "ድርጅቱ የህዝብ ነው?",
+    "selectOrganizationType": "የድርጅት አይነት ይምረጡ",
+    "deleteOrganization": "ድርጅቱን ሰርዝ",
+    "confirmDelete": "በቋሚነት መሰረዝ እንደምትፈልጉ እርግጠኛ ነን?",
+    "cannotUndo": "ይህ እርምጃ ሊያስወግድ አይችልም።",
+    "deleting": "በማጥፋት ላይ ...",
+    "delete": "አጥፋ",
+    "Sector Reports": "ሴክተር ሪፖርቶች",
+    "viewOrganization": "ድርጅቱን ይመልከቱ",
+    "editOrganization": "ድርጅቱን አስተካክል",
+    "englishNameRequired": "የእንግሊዝኛ ስም አስፈላጊ ነው",
+    "amharicNameRequired": "የአማርኛ ስም አስፈላጊ ነው",
+    "invalidEmail": "የተሳሳተ ኢሜይል አድራሻ",
+    "usernameMinLength": "የተጠቃሚ ስም ቢያንስ 3 ፊደላት መሆን አለበት",
+    "organizationRequired": "ድርጅት አስፈላጊ ነው",
+    "invalidPhoneNumber": "ስልክ ቁጥሩ ትክክለኛ የኢትዮጵያ ቁጥር መሆን አለበት",
+    "registerAdminTitle": "የድርጅት አስተዳዳሪን መመዝገብ",
+    "registerAdminDescription": "ለመመዝገብ አስፈላጊ መረጃዎችን ያስገቡ",
+    "enterEnglishName": "የእንግሊዝኛ ስም ያስገቡ",
+    "enterAmharicName": "የአማርኛ ስም ያስገቡ",
+    "email": "ኢሜይል",
+    "emailExample": "email@example.com",
+    "username": "የተጠቃሚ ስም",
+    "enterUsername": "የተጠቃሚ ስም ያስገቡ",
+    "phoneNumber": "ስልክ ቁጥር",
+    "phoneNumberExample": "ለምሳሌ፡ 0912345678 ወይም +251912345678",
+    "organization": "ድርጅት",
+    "registering": "በመመዝገብ ላይ...",
+    "registerAdmin": "አስተዳዳሪን መመዝገብ",
+    "dashboard": "ዳሽቦርድ",
+    "detail_task": "ዝርዝር ተግባር",
+    "expectations": "ከ ቡድን መሪ የሚጠበቅ",
+    "employeeExpectations": "ከ ባለሙያ የሚጠበቅ",
+    "additionalTasks": "ተጨማሪ ተግባሮች",
+    "plans_employee": "የሰራተኛ እቅዶች",
+    "plans_team_member_management": "የቡድን አባል አስተዳደር",
+    "organizationAdmins": "የድርጅት አስተዳዳሪዎች",
+    "externalUsers": "ውጪ ተጠቃሚዎች",
+    "userManagement": "የተጠቃሚ አስተዳደር",
+    "content": "ይዘት",
+    "bulkUpload": "በጥቅል መጫን",
+    "positionTypes": "የመደብ አይነቶች",
+    "migratedRecords": "የፈለሱ መዝገቦች",
+    "activityLog": "የእንቅስቃሴ መዝገብ",
+    "setting": "ቅንብሮች",
+    "loadingAdmins": "አስተዳዳሪዎችን በመጫን ላይ...",
+    "errorLoadingAdmins": "የአስተዳዳሪ መረጃን ማጫን ላይ ስህተት ተፈጥሯል",
+    "retry": "ደግመው ይሞክሩ",
+    "assignAdmin": "አስተዳዳሪ መመደብ",
+    "addAdmin": "አስተዳዳሪ ያክሉ",
+    "adminAssignedSuccess": "አስተዳዳሪ በትክክል ተመድቧል",
+    "userAssignedSuccess": "ተጠቃሚው በትክክል ተመድቧል",
+    "userAssignFailed": "ተጠቃሚውን መመደብ አልተቻለም",
+    "assignAdminToOrganization": "አስተዳዳሪን ወደ ድርጅት መመደብ",
+    "assignAdminInstructions": "እንደ አስተዳዳሪ ለመመደብ ድርጅትን እና ተጠቃሚን ይምረጡ።",
+    "users": "ተጠቃሚዎች",
+    "searchUsers": "ተጠቃሚዎችን ይፈልጉ...",
+    "noUsersFound": "ምንም ተጠቃሚዎች አልተገኙም",
+    "assigning": "በመመደብ ላይ...",
+    "assignUser": "ተጠቃሚ ይመድቡ",
+    "pendingExternalUsers": "በመጠባበቅ ላይ ያሉ ውጪ ተጠቃሚዎች",
+    "activateUserPrompt": "ይህን ተጠቃሚ ማንቃት ይፈልጋሉ?",
+    "activateUserDescription": "ይህ ተጠቃሚ መድረኩን ማግኘት ይችላል",
+    "activating": "በመንቃት ላይ...",
+    "yesActivate": "አዎ, አንቃ",
+    "statistics": "ስታቲስቲቅሬታ ",
+    "totalOrganizations": "ድርጅቶች ጠቅላላ ብዛት",
+    "recentOrganizations": "ቅርብ ጊዜ የተመዘገቡ ድርጅቶች",
+    "manageOrganization": "ድርጅት አስተዳድር",
+    "detail_task_assignment": "የዝርዝር ተግባር ምደባ",
+    "serviceAssignment": "የአገልግሎት ምደባ",
+    "viewMore": "ተጨማሪ ይመልከቱ →",
+    "recentActivities": "ቅርብ ጊዜ እንቅስቃሴዎች",
+    "moreActivities": "ተጨማሪ እንቅስቃሴዎች →",
+    "noRecentActivities": "ምንም ቅርብ ጊዜ እንቅስቃሴ አልተገኘም",
+    "contentManagement": "የይዘት አስተዳደር",
+    "Bulk": "በኤቅሬታ ኤል ይመዝግቡ",
+    "Position": "የተጠቃሚ ፍቃዶች",
+    "updatedOn": "የታደሰበት ቀን",
+    "contentMsg": "የድርጅትዎን ይዘቶችንና ንብረቶችን በትክክል ያቀናብሩ።",
+    "selectUnit": "ድርጅት ይምረጡ",
+    "visibilityToOthers": "ለሌሎች ድርጅቶች ይታያል",
+    "visibility": "ታይነት",
+    "visible": "ይታያል",
+    "hidden": "ተደብቋል",
+    "visibilityEnabled": "ድርጅቱ አሁን ለሌሎች ድርጅቶች ይታያል",
+    "visibilityDisabled": "ድርጅቱ አሁን ከሌሎች ድርጅቶች ተደብቋል",
+    "visibilityUpdateFailed": "የድርጅት ታይነት ማዘመን አልተሳካም",
+    "Queues": "የተሰሩ ተራዎች",
+    "Plans": "እቅዶች",
+    "Service Assignment": "የአገልግሎት መመደብ",
+    "Services": "አገልግሎቶች",
+    "Plan Years": "ዓመታዊ እቅድ",
+    "Active Call Management": "የጥሪ አስተዳደር",
+    "Service Categories": "የአገልግሎት ምድቦች",
+    "Employee Plans": "የሰራተኛ እቅዶች",
+    "Team Member Management": "የቡድን አባል አስተዳደር",
+    "Working Hours": "የስራ ሰዓቶች",
+    "Goals": "ግቦች",
+    "Major Task": "ዋና ዋና ተግባራት"
+  },
+  "detailTask": {
+    "name": "የዝርዝር ተግባር ስም",
+    "nameAmharic": "የዝርዝር ተግባር ስም (አማርኛ)",
+    "nameEnglish": "የዝርዝር ተግባር ስም (እንግሊዝኛ)",
+    "description": "ዝርዝር",
+    "descriptionAmharic": "ዝርዝር (አማርኛ)",
+    "descriptionEnglish": "ዝርዝር (እንግሊዝኛ)",
+    "enterTaskName": "የዝርዝር ተግባር ስም ያስገቡ",
+    "enterTaskNameAmharic": "የዝርዝር ተግባር ስም በአማርኛ ያስገቡ",
+    "enterTaskNameEnglish": "የዝርዝር ተግባር ስም በእንግሊዝኛ ያስገቡ",
+    "enterDescription": "የተግባር ዝርዝር ያስገቡ",
+    "enterDescriptionAmharic": "የተግባር ዝርዝር በአማርኛ ያስገቡ",
+    "enterDescriptionEnglish": "የተግባር ዝርዝር በእንግሊዝኛ ያስገቡ",
+    "majorTask": "ዋና ተግባር",
+    "weight": "ክብደት",
+    "weightFromPlanYear": "ከእቅድ ዓመት ክብደት",
+    "planYear": "የእቅድ ዓመት",
+    "createTask": "ዝርዝር ተግባር ፍጠር",
+    "editTask": "ዝርዝር ተግባር አስተካክል",
+    "updateTask": "ተግባር አዘምን",
+    "createNew": "ዝርዝር ተግባር ፍጠር",
+    "taskDetails": "የተግባር ዝርዝሮች",
+    "editTaskDetails": "የተግባር ዝርዝሮች አስተካክል",
+    "basicInformation": "መሰረታዊ መረጃ",
+    "taskConfiguration": "የተግባር ውቅር",
+    "departmentAssignment": "የክፍል ምደባ",
+    "assignmentInfo": "የምደባ መረጃ",
+    "assignmentDescription": "ይህን ዝርዝር ተግባር ለመመደብ ክፍሎችን ይምረጡ። ከዚህ በታች ባለው ተዋረድ በመጠቀም ለብዙ ክፍሎች መመደብ ይችላሉ።",
+    "selectedDepartments": "የተመረጡ ክፍሎች",
+    "noDepartmentsFound": "ምንም ክፍሎች አልተገኙም",
+    "selectionInstructions": "መጀመሪያ ድርጅት እና ክፍል ይምረጡ፣ ከዚያም ይህን ተግባር ለመመደብ ክፍሎችን ይምረጡ። ብዙ ክፍሎችን መምረጥ ይችላሉ።",
+    "enterMajorTask": "ዋና ተግባር ያስገቡ",
+    "enterWeight": "ክብደት ያስገቡ",
+    "enterWeightFromPlanYear": "ከእቅድ ዓመት ክብደት ያስገቡ",
+    "taskCreatedSuccess": "ዝርዝር ተግባር በተሳካ ሁኔታ ተፈጥሯል!",
+    "taskUpdatedSuccess": "ዝርዝር ተግባር በተሳካ ሁኔታ ተዘምኗል!",
+    "createError": "ዝርዝር ተግባር መፍጠር አልተሳካም",
+    "updateError": "ዝርዝር ተግባር ማዘመን አልተሳካም",
+    "fetchError": "ዝርዝር ተግባሮችን ማምጣት አልተሳካም",
+    "deleteSuccess": "ተግባር በተሳካ ሁኔታ ተሰርዟል",
+    "deleteError": "ተግባር መሰረዝ አልተሳካም",
+    "confirmDelete": "ተግባር ሰርዝ",
+    "deleteConfirmation": "ይህን ተግባር መሰረዝ እርግጠኛ ነዎት? ይህ ድርጊት መልሰው ማድረግ አይችሉም።",
+    "noTasks": "ምንም ዝርዝር ተግባሮች አልተገኙም",
+    "noSearchResults": "ምንም ተግባሮች ከፍለጋ መስፈርትዎ ጋር አይዛመዱም",
+    "createFirstTask": "ለመጀመር የመጀመሪያ ዝርዝር ተግባርዎን ይፍጠሩ",
+    "searchTasks": "ተግባሮችን ፈልግ...",
+    "assignedDepartments": "የተመደቡ ክፍሎች",
+    "planYearWeight": "የእቅድ ዓመት",
+    "detailTasks": "ዝርዝር ተግባሮች",
+    "taskAssignment": "የተግባር ምደባ",
+    "taskAssignments": "የተግባር ምደባዎች",
+    "userManagement": "የተጠቃሚ አስተዳደር",
+    "searchOrganizationsUnits": "ድርጅቶች፣ ክፍሎች፣ መምሪያዎች ፈልግ...",
+    "selectOrganization": "ድርጅት ይምረጡ",
+    "selectOrganizationDescription": "የተግባር ምደባዎችን ለማየት እና ለማስተዳደር ከግራ ፓነል ድርጅት ይምረጡ።",
+    "selectDepartmentsFirst": "እባክዎ መጀመሪያ ክፍሎችን ይምረጡ",
+    "taskAssignedSuccess": "ተግባር በተሳካ ሁኔታ ተመድቧል",
+    "taskUnassignedSuccess": "ተግባር በተሳካ ሁኔታ ተወግዷል",
+    "assignError": "ተግባር መመደብ አልተሳካም",
+    "unassignError": "ተግባር ማስወገድ አልተሳካም",
+    "notAssigned": "አልተመደበም",
+    "assigning": "በመመደብ ላይ...",
+    "assign": "መድብ",
+    "unassignAll": "ሁሉንም አስወግድ",
+    "confirmUnassignAll": "ሁሉንም ክፍሎች አስወግድ",
+    "unassignAllConfirmation": "ይህን ተግባር ከሁሉም ክፍሎች ማስወገድ እርግጠኛ ነዎት? ይህ ድርጊት መልሰው ማድረግ አይችሉም።",
+    "tasks": "ተግባሮች",
+    "formDescription": "ዝርዝር ተግባር ለመፍጠር ወይም ለማዘመን ከዚህ በታች ያሉትን ዝርዝሮች ይሙሉ።",
+    "selectDepartmentFirst": "እባክዎ መጀመሪያ ክፍል ይምረጡ",
+    "selectOrganizationFirst": "መጀመሪያ ድርጅት ይምረጡ",
+    "assignDetailTask": "ዝርዝር ተግባር መድብ",
+    "assignDetailTasks": "ዝርዝር ተግባሮች መድብ",
+    "assignDetailTasksDescription": "ለዚህ ክፍል ለመመደብ ዝርዝር ተግባሮችን ይምረጡ",
+    "searchDetailTasks": "ዝርዝር ተግባሮችን ፈልግ...",
+    "noTasksMatchSearch": "ምንም ተግባሮች ከፍለጋዎ ጋር አይዛመዱም",
+    "noDetailTasksFound": "ምንም ዝርዝር ተግባሮች አልተገኙም",
+    "tasksSelected": "ተግባር(ሮች) ተመርጠዋል",
+    "noTasksSelected": "ምንም ተግባሮች አልተመረጡም",
+    "assignTasks": "ተግባሮች መድብ",
+    "clearSelection": "ምርጫ አጽዳ",
+    "noChanges": "ምንም ለውጥ የለም",
+    "noChangesToSave": "ምንም ለውጥ ለማስቀመጥ የለም",
+    "currentlyAssigned": "(አሁን ተመድቧል)",
+    "deptCount": "ክፍል(ሎች)",
+    "participants": "ተሳታፊዎች",
+    "selectParticipants": "ተሳታፊዎችን ይምረጡ",
+    "noEmployeesWithPositions": "ቦታዎች ያላቸው ሰራተኞች አይገኙም",
+    "assignment": "ምደባ",
+    "selectMajorTask": "ዋና ተግባር ይምረጡ",
+    "selectMeasuredBy": "የመለኪያ አይነት ይምረጡ",
+    "measuredBy": "የሚለካው በ",
+    "noParticipants": "ተሳታፊዎች የሉም",
+    "weightInformation": "የክብደት መረጃ",
+    "hierarchy": "የተግባር ተዋረድ",
+    "reportDetails": "የሪፖርት ዝርዝሮች",
+    "report": "ሪፖርት",
+    "remarks": "ማስታወሻዎች",
+    "currentWeight": "የአሁኑ ክብደት",
+    "currentPlanYearWeight": "የአሁኑ የእቅድ ዓመት ክብደት"
+  },
+  "expectations": {
+    "title": "የቡድን መሪ የሚጠበቅ",
+    "quarter": "ሩብ",
+    "total": "ጠቅላላ",
+    "yearly": "ዓመታዊ",
+    "expected": "የሚጠበቅ",
+    "quarterTotal": "የሩብ ጠቅላላ",
+    "detailTask": "ዝርዝር ተግባር",
+    "instructions": "መመሪያዎች",
+    "instructionsText": "መጀመሪያ ዓመታዊ የሚጠበቁ ውጤቶችን ያስቀምጡ፣ ከዚያም ወራዊ ውጤቶችን ያከፋፍሉ። የጠቅላላ አምድ የእርስዎን ዓመታዊ ግብ ያሳያል። የወራዊ ውጤቶች ድምር ከዓመታዊ ግብ ጋር እኩል መሆን አለበት (አረንጓዴ = ተመሳሳይ፣ ቀይ = የማይመሳሰል)።",
+    "unsavedChanges": "ያልተቀመጡ ለውጦች",
+    "noExpectations": "ለዚህ የእቅድ ዓመት ምንም የሚጠበቁ ውጤቶች አልተገኙም",
+    "createSuccess": "የሚጠበቅ ውጤት በተሳካ ሁኔታ ተፈጥሯል",
+    "updateSuccess": "የሚጠበቅ ውጤት በተሳካ ሁኔታ ተዘምኗል",
+    "deleteSuccess": "የሚጠበቅ ውጤት በተሳካ ሁኔታ ተሰርዟል",
+    "createError": "የሚጠበቅ ውጤት መፍጠር አልተሳካም",
+    "updateError": "የሚጠበቅ ውጤት ማዘመን አልተሳካም",
+    "deleteError": "የሚጠበቅ ውጤት መሰረዝ አልተሳካም"
+  },
+  "employeeExpectations": {
+    "title": "የባለሙያ የሚጠበቅ",
+    "weekly": "ሳምንታዊ",
+    "detailTask": "ዝርዝር ተግባር",
+    "yearlyTotal": "ዓመታዊ ጠቅላላ",
+    "monthlyTotals": "ወራዊ ጠቅላላዎች",
+    "instructions": "መመሪያዎች",
+    "instructionsText": "ለእያንዳንዱ ዝርዝር ተግባር ሳምንታዊ የሚጠበቁ ውጤቶችን ያስቀምጡ። እያንዳንዱ ወር 4 ሳምንቶች አሉት። ዓመታዊ ጠቅላላው በዓመቱ ውስጥ ያሉትን ሁሉንም ሳምንታዊ ውጤቶች ድምር ያሳያል።",
+    "unsavedChanges": "ያልተቀመጡ ለውጦች",
+    "noTasks": "ለሳምንታዊ የሚጠበቁ ውጤቶች ምንም ዝርዝር ተግባሮች አልተመደቡም",
+    "missingParentId": "ምንም የቡድን መሪ አልተመደበም። የሰራተኛ የሚጠበቁ ውጤቶች ለወላጅ ቦታ መለያ ያስፈልጋል።",
+    "createSuccess": "የሰራተኛ የሚጠበቅ ውጤት በተሳካ ሁኔታ ተፈጥሯል",
+    "updateSuccess": "የሰራተኛ የሚጠበቅ ውጤት በተሳካ ሁኔታ ተዘምኗል",
+    "deleteSuccess": "የሰራተኛ የሚጠበቅ ውጤት በተሳካ ሁኔታ ተሰርዟል",
+    "createError": "የሰራተኛ የሚጠበቅ ውጤት መፍጠር አልተሳካም",
+    "updateError": "የሰራተኛ የሚጠበቅ ውጤት ማዘመን አልተሳካም",
+    "deleteError": "የሰራተኛ የሚጠበቅ ውጤት መሰረዝ አልተሳካም",
+    "success": "ተሳክቷል",
+    "error": "ስህተት"
+  },
+  "userIncomingretun": {
+    "View Detail": "ዝርዝር እይ",
+    "Open actions menu": "የእርምጃ ምናሌ ክፈት",
+    "Actions": "እርምጃዎች",
+    "convertRecord": "መዝገብ ቀይር",
+    "return": "መመለስ",
+    "returning": "በመመለስ ላይ...",
+    "returing": "በመመለስ ላይ...",
+    "conformReturn": "መመለስን አረጋግጥ",
+    "Please provide a reason for returning this record.": "እባክዎ ይህን መዝገብ ለማመለስ ምክንያት ያስገቡ።",
+    "ReturnComment": "የመመለስ አስተያየት",
+    "EnterReturnReason": "የመመለስ ምክንያት አስገባ",
+    "CommentRequired": "አስተያየት አስፈላጊ ነው",
+    "RecordReturnedSuccessfully": "መዝገቡ በተሳካ ሁኔታ ተመለሰ",
+    "FailedToReturnRecord": "መዝገቡን ማመለስ አልተሳካም"
+  },
+  "viewDocument": {
+    "title": "የተሰቀሉ ሰነዶች",
+    "refreshButton": "አድስ",
+    "userInformation": "የተጠቃሚ መረጃ",
+    "organizationName": "የድርጅት ስም",
+    "email": "ኢሜል",
+    "phoneNumber": "ስልክ ቁጥር",
+    "totalDocuments": "ጠቅላላ ሰነዶች",
+    "failedToLoadUserInfo": "የተጠቃሚ መረጃ መጫን አልተቻለም",
+    "document": {
+      "viewDocument": "ሰነድ ይመልከቱ",
+      "requirements": "መስፈርቶች",
+      "optional": "አማራጭ",
+      "required": "አስፈላጊ",
+      "noRequirements": "ምንም መስፈርት የለም",
+      "status": {
+        "approved": "ተቀባይነት አግኝቷል",
+        "rejected": "ተቀባይነት አላገኘም",
+        "pending": "በመጠባበቅ ላይ"
+      }
+    },
+    "loading": {
+      "failedToLoad": "መረጃ መጫን አልተቻለም",
+      "failedToLoadRequirements": "መስፈርቶችን መጫን አልተቻለም"
+    }
+  },
+  "registration": {
+    "incompleteRegistration": "የምዝገባ ሂደትዎ አልተሟላም። እባክዎ የሚያስፈልጉ ሰነዶችን ያውርዱ እና ይቀጥሉ።",
+    "uploadDocuments": "ሰነዶችን ያውርዱ",
+    "registrationRequired": "ይህን ገጽ ለመጠቀም የምዝገባ ሂደትዎን መጨረስ አለብዎት።",
+    "title": "ምዝገባ",
+    "steps": {
+      "registerUpload": {
+        "title": "ይመዝገቡ እና ይጫኑ",
+        "description": "ዝርዝሮችን ይሙሉ እና የሚያስፈልጉ ሰነዶችን ይጫኑ"
+      },
+      "verifyOtp": {
+        "title": "በይለፍ ቃል ያረጋግጡ",
+        "description": "ወደ ስልክዎ/ኢሜልዎ የተላከውን ማረጋገጫ ኮድ ያስገቡ"
+      }
+    },
+    "form": {
+      "registrationType": "የምዝገባ አይነት",
+      "organization": "በድርጅት",
+      "individual": "በግለሰብ",
+      "organizationEmail": "የድርጅቱ ኢሜል",
+      "organizationEmailPlaceholder": "organization@example.com",
+      "individualEmail": "የግል ኢሜል",
+      "individualEmailPlaceholder": "personal@example.com",
+      "organizationUsername": "የድርጅት የተጠቃሚ ስም",
+      "organizationUsernamePlaceholder": "የድርጅት_ተጠቃሚ",
+      "individualUsername": "የግል የተጠቃሚ ስም",
+      "individualUsernamePlaceholder": "የግል_ተጠቃሚ",
+      "organizationPhone": "የድርጅት ስልክ",
+      "organizationPhonePlaceholder": "+251 የድርጅት ስልክ",
+      "individualPhone": "የግል ስልክ",
+      "individualPhonePlaceholder": "+251 የግል ስልክ",
+      "organizationNameEn": "የድርጅት ስም (እንግሊዝኛ)",
+      "organizationNameEnPlaceholder": "የኩባንያ ስም ሊሚትድ",
+      "individualNameEn": "ሙሉ ስም (እንግሊዝኛ)",
+      "individualNameEnPlaceholder": "ጆን ዶው",
+      "organizationNameAm": "የድርጅት ስም (አማርኛ)",
+      "organizationNameAmPlaceholder": "የድርጅት ስም",
+      "individualNameAm": "ሙሉ ስም (አማርኛ)",
+      "individualNameAmPlaceholder": "የግለሰብ ስም",
+      "organizationSubmitButton": "ድርጅት ይመዝገቡ እና ሰነዶችን ይጫኑ",
+      "individualSubmitButton": "ግለሰብ ይመዝገቡ እና ሰነዶችን ይጫኑ",
+      "processing": "በማቀናበር ላይ..."
+    },
+    "userType": {
+      "selectionDescription": "ለመጀመር የምዝገባ አይነትዎን ይምረጡ",
+      "organization": "ድርጅት",
+      "organizationDescription": "እንደ ኩባንያ፣ ተቋም ወይም ድርጅት ይመዝገቡ",
+      "individual": "ግለሰብ",
+      "individualDescription": "እንደ ግለሰብ ወይም ባለሙያ ይመዝገቡ"
+    },
+    "auth": {
+      "signInTitle": "ግባ",
+      "signUpTitle": "ተመዝገብ",
+      "portalTitle": "የውጭ ፖርታል መዳረሻ",
+      "signIn": "ግባ",
+      "signUp": "ተመዝገብ",
+      "selectionDescription": "ለመቀጠል የማንነት አቅራቢዎን ይምረጡ። መለያዎ ካለ እንገባዎታለን፣ ካልኖረም በራስ-ሰር እንፈጥረዋለን።",
+      "signInWithFayda": "በፋይዳ ግባ",
+      "signUpWithFayda": "በፋይዳ ተመዝገብ",
+      "signInWithEtrade": "በኢ-ትሬድ ግባ",
+      "signUpWithEtrade": "በኢ-ትሬድ ተመዝገብ",
+      "continueWithFayda": "በፋይዳ ቀጥል",
+      "continueWithEtrade": "በኢ-ትሬድ ቀጥል (ቲን እና የፍቃድ ቁጥር)",
+      "faydaDescription": "ለግለሰብ ተጠቃሚዎች። በፋይዳ ዲጂታል መታወቂያዎ ያረጋግጡ።",
+      "etradeDescription": "ለውጭ ድርጅቶች። በንግድ ቲን እና የንግድ ፍቃድ ያረጋግጡ።",
+      "manualOrgSignup": "ሌላ የድርጅት ምዝገባ ይፈልጋሉ?",
+      "alreadyHaveAccount": "መለያ አለዎት?",
+      "needAccount": "መለያ ይፈልጋሉ?",
+      "externalUserPrompt": "ውጭ ተጠቃሚ?",
+      "signInWithProvider": "በፋይዳ ወይም ኢ-ትሬድ ግቡ",
+      "faydaProcessing": "በፋይዳ በደህንነት እየገቡ ነው...",
+      "faydaSigninFailed": "በፋይዳ በመግባት ላይ ችግር ተፈጥሯል።",
+      "faydaSignupFailed": "በፋይዳ በመመዝገብ ላይ ችግር ተፈጥሯል።",
+      "backToAuth": "ወደ ግባ / ተመዝገብ ተመለስ",
+      "employeeLogin": "የውስጥ ሰራተኛ? እዚህ ግቡ"
+    },
+    "etrade": {
+      "registerOrganization": "ድርጅትዎን ይመዝገቡ",
+      "registerWithTradeLicense": "በንግድ ፈቃድ ይመዝገቡ",
+      "registerWithTradeLicenseDescription": "በቲን ቁጥርዎ እና ከኢ-ትሬድ የንግድ ፈቃድ በመጠቀም ንግድዎን ያረጋግጡ።",
+      "registerWithOther": "በሌላ መንገድ ይመዝገቡ",
+      "registerWithOtherDescription": "አማራጭ የማረጋገጫ ዘዴዎችን በመጠቀም ይቀጥሉ።",
+      "enterTinTitle": "ቲን ቁጥርዎን ያስገቡ",
+      "enterTinDescription": "ከኢ-ትሬድ የተመዘገቡ የንግድ ፈቃዶችዎን እንፈልጋለን።",
+      "stepTin": "ቲን",
+      "stepLicense": "ፈቃድ",
+      "stepOtp": "OTP",
+      "selectLicenseTitle": "የንግድ ፈቃድ ይምረጡ",
+      "selectLicenseDescription": "ድርጅትዎ ብዙ የንግድ ፈቃዶች አሉት። ለመመዝገብ የሚፈልጉትን ይምረጡ።",
+      "verifiedOrganization": "የተረጋገጠ ድርጅት",
+      "licenseNumber": "የፈቃድ ቁጥር",
+      "activity": "የንግድ እንቅስቃሴ",
+      "noLicensesFound": "ለዚህ ቲን ምንም የንግድ ፈቃድ አልተገኘም። ቲኑን ያረጋግጡ እና እንደገና ይሞክሩ።",
+      "phoneLookupFailed": "ከኢ-ትሬድ ለዚህ የንግድ ፈቃድ ትክክለኛ ስልክ ቁጥር ማግኘት አልተቻለም። ፈቃዱን ያረጋግጡ እና እንደገና ይሞክሩ።",
+      "registrationSuccess": "የንግድ ፈቃድ ምዝገባ በተሳካ ሁኔታ ተጠናቋል",
+      "back": "ተመለስ",
+      "continue": "ቀጥል",
+      "loading": "በመጫን ላይ...",
+      "otpSent": "የማረጋገጫ ኮድ በተሳካ ሁኔታ ተልኳል",
+      "stepDetails": "የንግድ ዝርዝሮች",
+      "signupFormDescription": "የማረጋገጫ ኮድ ለመቀበል የድርጅትዎን ቲን እና የንግድ ፈቃድ ቁጥር ያስገቡ።",
+      "licenseNoLabel": "የንግድ ፈቃድ ቁጥር",
+      "licenseNoPlaceholder": "የንግድ ፈቃድ ቁጥርዎን ያስገቡ",
+      "licenseNoHint": "ለድርጅትዎ በኢ-ትሬድ የተመዘገበውን የፈቃድ ቁጥር ይጠቀሙ።",
+      "licenseNoRequired": "የንግድ ፈቃድ ቁጥር ያስፈልጋል።",
+      "licenseNoInvalid": "ትክክለኛ የንግድ ፈቃድ ቁጥር ያስገቡ።",
+      "requestOtp": "የማረጋገጫ ኮድ ይጠይቁ",
+      "otpVerificationDescription": "ለንግድ ፈቃድዎ የተላከውን የማረጋገጫ ኮድ ያስገቡ።"
+    },
+    "continueButton": "ወደ ምዝገባ ይቀጥሉ",
+    "documents": {
+      "requiredDocuments": "የሚያስፈልጉ ሰነዶች",
+      "requirementsUpdate": "የምዝገባ አይነት ሲቀይሩ መስፈርቶች ይቀየራሉ",
+      "attached": "ተያይዟል",
+      "tip": "ማስታወሻ: አሁን ይጫኑ ወይም ቀጥለው ከማረጋገጫው በኋላ ይጫኑ",
+      "noRequirements": "ምንም የሰነድ መስፈርቶች የሉም",
+      "upload": "ጫን",
+      "change": "ቀይር",
+      "remove": "አስወግድ",
+      "required": "ያስፈልጋል",
+      "fileSelected": "ፋይል ተመርጧል",
+      "readyToUpload": "ለመጫን ዝግጁ",
+      "previouslyUploaded": "ቀደም ብሎ ተጫኗል",
+      "willUploadOnSubmit": "በሚላክበት ጊዜ ይጫናል",
+      "fayda": "ፋይዳ ቁ.",
+      "faydaMessage": "የፋይዳ መ/ቁጥር አስገባ"
+    },
+    "verifyOtp": {
+      "title": "መለያዎን ያረጋግጡ",
+      "description": "ወደ ስልክዎ የላክነውን 6-አሃዝ ኮድ ያስገቡ።",
+      "channel": {
+        "email": "ኢሜልዎ",
+        "phone": "ስልክዎ"
+      },
+      "otpInput": {
+        "ariaLabel": "ቁምፊ {index}",
+        "placeholder": "የOTP ኮድ ያስገቡ"
+      },
+      "password": {
+        "newPassword": "አዲስ የይለፍ ቃል",
+        "confirmPassword": "የይለፍ ቃል ያረጋግጡ",
+        "showPassword": "የይለፍ ቃል አሳይ",
+        "hidePassword": "የይለፍ ቃል ደብቅ"
+      },
+      "buttons": {
+        "back": "ተመለስ",
+        "completeRegistration": "ምዝገባውን ጨርስ",
+        "verifyOtp": "ኮድ አረጋግጥ",
+        "verifying": "በማረጋገጥ ላይ...",
+        "resendCode": "ኮድ እንደገና ይላኩ",
+        "resending": "በመላክ ላይ...",
+        "resendIn": "በ {seconds} ሰከንድ እንደገና ይላኩ",
+        "resendLoading": "ኮድ እንደገና በሚልክበት ላይ",
+        "resendCooldown": "ኮድ እንደገና በ {seconds} ሰከንድ ይላኩ"
+      },
+      "messages": {
+        "success": "የይለፍ ቃል በተሳካ ሁኔታ ተቀምጧል!",
+        "verificationCodeResent": "የማረጋገጫ ኮድ እንደገና ወደ ኢሜልዎ/ስልክዎ ተልኳል።",
+        "missingEmailPhone": "ኢሜል ወይም ስልክ ቁጥር አልተገኘም።",
+        "invalidOtp": "እባክዎ ትክክለኛ 6-አሃዝ OTP ያስገቡ።",
+        "fillPasswords": "እባክዎ ሁለቱንም የይለፍ ቃል ሜዳዎች ይሙሉ።",
+        "passwordLength": "የይለፍ ቃል ቢያንስ 8 ቁምፊዎች ሊኖሩት ይገባል።",
+        "passwordMismatch": "የይለፍ ቃሎች አይጣጣሙም።",
+        "passwordUpdateFailed": "የይለፍ ቃል ማዘመን አልተሳካም። እባክዎ እንደገና ይሞክሩ።",
+        "resendFailed": "የማረጋገጫ ኮድ እንደገና ለማስተላለፍ አልተሳካም። እባክዎ እንደገና ይሞክሩ።",
+        "registrationComplete": "ምዝገባ እና የሰነድ መጫን በተሳካ ሁኔታ ተጠናቅቋል!",
+        "selectUnitWarning": "እባክዎ ክፍል ይምረጡ",
+        "fillAllFields": "እባክዎ ሁሉንም መስኮች ይሙሉ",
+        "configAdded": "ማስተካከያ በተሳካ ሁኔታ ተጨምሯል",
+        "configUpdated": "ማስተካከያ በተሳካ ሁኔታ ተዘምኗል",
+        "configAddFailed": "ማስተካከያ ማክል አልተሳካም",
+        "configUpdateFailed": "ማስተካከያ ማዘመን አልተሳካም"
+      },
+      "errors": {
+        "missingUserId": "የተጠቃሚ መለያ አልተገኘም። የማረጋገጫ ኮድ እንደገና ማስተላለፍ አይቻልም።",
+        "resendFailed": "የማረጋገጫ ኮድ እንደገና ለማስተላለፍ አልተሳካም።",
+        "alreadyRegistered": "በአንድ ኢሜል ወይም ስልክ ቁጥር አንድ ጊዜ ብቻ መመዝገብ ይችላሉ። ስለዚህ እንደገና ለመመዝገብ ከሚሞክሩት ይልቅ፣ ወደ መግቢያ ይሂዱ እና የይለፍ ቃልዎን ለማደስ 'የይለፍ ቃል ረሳኝ' የሚለውን ይጠቀሙ።"
+      },
+      "support": {
+        "needHelp": "እርዳታ ይፈልጋሉ?",
+        "helpLink": "/support/resend-sms"
+      }
+    }
+  },
+  "otp": {
+    "verifyIdentity": "ማንነትዎን ያረጋግጡ",
+    "enterCodeSent": "ወደ ኢሜልዎ የተላከውን ማረጋገጫ ኮድ ያስገቡ",
+    "verifySubmission": "ማስገባትን ያረጋግጡ",
+    "enterCodeToSubmit": "መዝገብዎን ለማስገባት ማረጋገጫ ኮድ ያስገቡ",
+    "clearCode": "ኮድ አጽዳ",
+    "resendCode": "ኮድ እንደገና ላክ",
+    "verifyingCode": "ኮድዎን እያረጋገጥን ነው፣ እባክዎ ይጠብቁ",
+    "verificationSuccess": "ማረጋገጫ ተሳክቷል!",
+    "verificationFailed": "ማረጋገጫ አልተሳካም። እባክዎ እንደገና ይሞክሩ።"
+  },
+  "contentManagement": {
+    "manageUnitAdmin": "የክፍል አስተዳዳሪን ያስተዳድሩ",
+    "moveDepartement": " ወደ ሌላ ክፍል አንቀሳቅስ",
+    "positions": "የስራ መደብ",
+    "selectPositions": "የተመረጠ የስራ መደብ",
+    "updateCount": "ቁጥር ያሻሽሉ",
+    "currentCount": "አሁን ያለው ቁጥር",
+    "bulkMsg": "ሁሉንም ይመዝግቡ",
+    "sealNameMsg": "የድርጅት ማህተም ስም አስፈላጊ ነው",
+    "sealSuccessMsg": "ማህተሙ ተሰቀለና በትክክል ተመዝግቧል",
+    "sealErrorMsg": "ማህተምን ማስገባትና መመዝገብ አልተቻለም",
+    "sealRemove": "ማህተሙ በትክክል ተወግዷል",
+    "seal": "የድርጅት ማህተሞች",
+    "uploadSealMsg": "የድርጅት ማህተሞችን ያስገቡና ያቀናብሩ",
+    "sealImage": "የማህተም ምስል",
+    "count": "ቁጥር",
+    "addSeal": "ማህተም ጨምር",
+    "noSealMsg": "ማህተሞች አልተሰቀሉም",
+    "addSealInstruction": "ማህተም ለማስገባት ማህተም ጨምር ይጫኑ",
+    "sealName": "የማህተም ስም",
+    "saveSeal": "ማህተም መዝግብ",
+    "letterTemplate": "የደብዳቤ አብነቶች",
+    "createMsg": "በዚህ አካል ውስጥ የተመዘገቡ አብነቶችን ይፍጠሩ ወይም ያርቱ",
+    "addTemplate": "አብነት ያክሉ",
+    "failedToLoadTemplates": "አብነቶችን መጫን አልተቻለም",
+    "selectTemplate": "አብነት ይምረጡ",
+    "updateTemplate": "አብነት ያሻሽሉ",
+    "updateFled": "ማስተካከል አልተሳካም",
+    "createFled": "ፍጠር አልተሳካም",
+    "templateSuccessMsg": "በትክክል ተፈጥሯል",
+    "failedToLoadHeaderFooter": "ሄደሮች/ፉተሮችን መጫን አልተቻለም",
+    "failedToDelete": "መሰረዝ አልተቻለም",
+    "deleted": "ተሰርዟል",
+    "provideMsg": "እባኮትን ስምና ፋይል አቅርቡ",
+    "uploadSuccess": "በትክክል ተሰቀለ",
+    "uploadFailed": "ማስገባት አልተሳካም",
+    "addHeaderFooter": "ሄደር/ፉተር ያክሉ",
+    "name": "ስም",
+    "internalSuffixCC": "ድህረ ቅጥያ CC",
+    "internalPrefixCC": "ቅድመ ቅጥያ CC",
+    "internalPrefix": "የውስጥ ቅድመ ቅጥያ",
+    "externalPrefix": "የውጭ ቅድመ ቅጥያ",
+    "internalMemoPrefix": "የዉስጥ ማስታወሻ ቅድመ ቅጥያ",
+    "reference": "የድርጅቱ የተለመደ ማጣቀሻ ቁጥር",
+    "externalReference": "የገቢ ደብዳቤዎች ማኣቀሻ ቁጥር",
+    "internalMemoReference": "የዉስጥ ማስታወሻ ደብዳቤዎች ማጣቀሻ ቁጥር",
+    "prefixCC": "ቅድመ ቅጥያ CC",
+    "suffixCC": "ድህረ ቅጥያ CC",
+    "internalSuffix": "የውስጥ ድህረ ቅጥያ",
+    "position": "የስራ መደብ",
+    "selectPosition": "የስራ መደብ ይምረጡ",
+    "value": "እሴት",
+    "enterValue": "እሴት ያስገቡ",
+    "confirmDelete": "መሰረዝ አረጋግጥ",
+    "common": "የውስጥ ድህረ ቅጥያ",
+    "type": "አይነት",
+    "header": "ሄደር",
+    "footer": "ፉተር",
+    "uploadFile": "ፋይል ያስገቡ",
+    "preview": "ቅድመ እይታ",
+    "status": "ሁኔታ",
+    "active": "ንቁ",
+    "inactive": "አልተንቀሳቀሰ",
+    "activate": "አንቀሳቅስ",
+    "deactivate": "አቁም",
+    "currentlyActive": "አሁን ንቁ",
+    "statusChanged": "ሁኔታ በትክክል ተቀይሯል",
+    "statusChangeFailed": "ሁኔታን መቀየር አልተቻለም",
+    "delete": "ሰርዝ",
+    "refNoRequired": "የማጣቀሻ ቁጥር አስፈላጊ ነው",
+    "nameRequired": "ሁለቱም ስሞች አስፈላጊ ናቸው።",
+    "recordTypeRequired": "የመዝገብ አይነት አስፈላጊ ነው",
+    "deleteMsg": "ይህን ነገር መሰረዝ እንደምትፈልጉ እርግጠኛ ነዎ?",
+    "filter": "በመዝገብ አይነት ያጣሩ",
+    "showCC": "የግልባጭ ነገሮችን ብቻ አሳይ",
+    "add": "ቅድመ/ቅጥያ/ማጣቀሻ ያክሉ",
+    "addPrefix": "የማጣቀሻ ቁጥር ያክሉ",
+    "edit": "አስተካክል",
+    "prefix": "ቅድመ ቅጥያ",
+    "suffix": "ድህረ ቅጥያ",
+    "recordType": "የመዝገብ አይነት",
+    "CC": "ይህ የግልባጭ ነው?",
+    "amharicName": "የአማርኛ ስም",
+    "englishName": "የእንግሊዝኛ ስም",
+    "PrefixSuffix": "የቅድመ/ቅጥያ/ማጣቀሻ ዝርዝር",
+    "positionPrefixes": "የስራ መደብ ማጣቀሻ ቁጥሮች",
+    "positionRequired": "የስራ መደብ ያስፈልጋል",
+    "noRec": "መዝገቦች አልተገኙም።",
+    "loading": "በመጫን ላይ...",
+    "submitUsers": "ተጠቃሚዎችን አስገባ",
+    "selectFile": "ፋይል ይምረጡ",
+    "posMissing": "'የስራ መደብ' ወይም 'ባለሙያ' ሉህ አልተገኘም።",
+    "invalidFile": "የተከተተው ፋይል ባዶ ነው ወይም ልክ አይደለም።",
+    "parseSuccess": "ፋይሉ በትክክል ተተረጎመ።",
+    "parseError": "ፋይሉን መተረጎም አልተቻለም።",
+    "noData": "በፋይሉ ውስጥ መረጃ አልተገኘም።",
+    "Units": "ዩኒት",
+    "saving": "በማስቀመጥ ላይ...",
+    "teamMember": "የቡድን አባል",
+    "sendToSelectedUnit": "ወደ ተመረጠ ክፍል ላክ",
+    "msg1": "ምንም የቡድን አባላት አልተገኙም",
+    "msg2": "የቡድን አባላትን ለማየት ቦታ ይምረጡ",
+    "msg3": "ወደዚህ መስሪያ ቤት የቡድን አባላትን ያክሉ",
+    "msg4": "የቡድን አባላትን ለማየት በመስሪያ ቤቶች ውስጥ ይጓዙ",
+    "userDetail": "የተጠቃሚ ዝርዝር",
+    "editEmployee": "ሰራተኛን አስተካክል",
+    "noUnit": "ምንም ዩኒት አልተገኘም",
+    "noOrg": "ምንም ድርጅቶች አልተገኙም",
+    "addUser": "ተጠቃሚ ጨምር",
+    "addSubdepartement": "ንዑስ የስራ መደብ መጠርያ ጨምር",
+    "editDepartment": "የስራ መደብ መጠርያ አስተካክል",
+    "moveDepartment": "የስራ መደብ መጠርያ አንቀሳቅስ",
+    "archiveDepartment": "የስራ መደብ መጠርያ አርክብ አድርግ",
+    "deleteDepartment": "የስራ መደብ መጠርያ ሰርዝ",
+    "deleteConfirm": "የስራ መደብ መጠርያ ይሰርዝ?",
+    "delete": "ሰርዝ",
+    "deleteFailed": "የስራ መደብ መጠርያ ሰረዝ ወደ ተሳክቶ",
+    "cannotDeleteWithEmployees": "ተመድቦ ካለበት ሰራተኞች ጋር የስራ መደብ መጠርያ መሰረዝ አይቻልም",
+    "reassignEmployeesFirst": "እባክዎ ሁሉንም ሰራተኞች በዚህ ክፍል ውስጥ ዳግም ይሰጧቸው ወይም ያስወግዱ።",
+    "deleteWarning": "በመሰረዝ በፊት ሁሉም ሰራተኞች ዳግም ተመድበዋል መሆን አለባቸው።",
+    "cannotDeleteDepartment": "የስራ መደብ መጠርያ መሰረዝ አይቻልም",
+    "deletedSuccessfully": "የስራ መደብ መጠርያ በተሳካ ሁኔታ ተወስደ",
+    "addUnit": "ዩኒት ጨምር",
+    "editUnit": "ዩኒት አስተካክል",
+    "addDepartment": "የስራ መደብ መጠርያ ጨምር",
+    "deleteUnit": "ዩኒት ሰርዝ",
+    "archiveUnit": "ዩኒት አርክብ አድርግ",
+    "archiveUnitConfirm": "ይህን ዩኒት አርክብ ማድረግ ስምምት ነው?",
+    "archiveUnitDescription": "ይህ ድርጊት ዩኒቱን ይሰርዛል",
+    "archiveUnitCanBeRestored": "ከተሸንፈው ዩኒቶች ክፍል ውስጥ በኋላ ይመልሳል።",
+    "archiveUnitSuccess": "ዩኒት በተሳካ ሁኔታ አርክብ ተደረገ።",
+    "unitArchivedSuccess": "ዩኒት በተሳካ ሁኔታ አርክብ ተደረገ።",
+    "unitDeletedPermanently": "ዩኒት ለዘላለም ተሰርዟል",
+    "deleteUnitFailed": "ዩኒት መሰረዝ ወደ ተሳክቶ",
+    "cannotDeleteUnitWithPositions": "ከተዛመደ ቦታዎች ጋር ዩኒት መሰረዝ አይቻልም። እባክዎ ሁሉንም ቦታዎች ሰርዝ ወይም ዳግም ይሰጠዋል።",
+    "deletePermanentlyConfirm": "ዩኒት ለዘላለም ይሰርዝ?",
+    "deletePermanentlyDescription": "ይህ ዩኒቱን ለዘላለም ይሰርዛል",
+    "cannotBeUndone": "ይህ ድርጊት ወደ ሊመለስ አይችልም።",
+    "deletePermanently": "ሰርዝ",
+    "permanentDeleteWarning": "ለዘላለም ሰረዝ",
+    "permanentDeleteExplanation": "ከተሰረዘ በኋላ ይህ ዩኒት ወደነበር ሖደታ ሊመለስ አይችልም። ሁሉም ተዛመደ ቦታዎች ተወስደዋል እና ውጪ ናቸው።",
+    "cannotDeleteUnit": "ዩኒት መሰረዝ አይቻልም",
+    "cannotDeleteUnitWithEntities": "ከተዛመደ ቦታዎች ጋር ዩኒት መሰረዝ አይቻልም። እባክዎ ሁሉንም ቦታዎች ሰርዝ ወይም ዳግም ይሰጠዋል።",
+    "deleteRelatedEntitiesFirst": "ለመሰረዝ በመሞከር በፊት ሁሉም ተዛመደ ነገሮች ያስወግዱ።",
+    "archivedItems": "የተሸንፈው ነገሮች",
+    "archivedOrganizations": "የተሸንፈው ድርጅቶች",
+    "archivedUnits": "የተሸንፈው ዩኒቶች",
+    "archivedPositions": "የተሸንፈው ቦታዎች",
+    "restore": "ወደነበር ሖደታ ተመለስ",
+    "actions": "ድርጊቶች",
+    "createUnit": "ዩኒት ፍጠር",
+    "addFromSubCity": "ከ ክፍለ ከተማ ጨምር",
+    "addNewUnit": "አዲስ ዩኒት ጨምር",
+    "configuredUnitLimit": "የተዋቀረ የዩኒት ገደብ፦ {{max}}",
+    "linkedUnits": "ጥቅም ላይ የዋለ",
+    "remainingSlots": "የቀረ",
+    "checkingCapacity": "የተዋቀረ አቅም በመፈተሽ ላይ…",
+    "noCapacityConfigured": "ለዚህ ድርጅት የዩኒት አቅም አልተዋቀረም። ሱፐር አድሚኑ በድርጅት ውቅረት አስተዳደር እንዲያዋቅረው ይጠይቁ።",
+    "capacityReached": "የአቅም ገደብ ደርሷል። የተዋቀረ ከፍተኛ {{max}} ነው።",
+    "capacityReachedShort": "ገደብ ደርሷል — ተጨማሪ ዩኒቶች መፍጠር አይቻልም።",
+    "selectSubCity": "ንዑስ ከተማ ይምረጡ",
+    "selectSubCityFirst": "በመጀመሪያ ንዑስ ከተማ ይምረጡ",
+    "selectUnit": "ዩኒት ይምረጡ",
+    "noSubCities": "ምንም ንዑስ ከተሞች አልተገኙም",
+    "subCityRequired": "እባክዎ ንዑስ ከተማ ይምረጡ",
+    "unitRequired": "እባክዎ ዩኒት ይምረጡ",
+    "parentUnitMissing": "ወላጅ ዩኒት ጠፍቷል",
+    "unitRelatedSuccess": "ዩኒት በተሳካ ሁኔታ ተገናኝቷል",
+    "permissionType": "የፍቃድ አይነቶች",
+    "newPermission": "አዲስ ፍቃድ",
+    "permissionManagement": "የፍቃድ አስተዳደር",
+    "exportTypes": "የላክ አይነቶች",
+    "exporting": "በማላክ ላይ...",
+    "delMsg": "እርግጠኛ ነዎት?",
+    "delMsg2": "ይህ እርምጃ ማቋረጥ አይቻልም። ፍቃዱን በቋሚነት ይሰርዛል።",
+    "permission": "ፍቃድ",
+    "copyPermissionsFrom": "ፍቃዶችን ከ",
+    "selectPositionToCopy": "ፍቃዶችን ለመቅዳት የምትፈልጉትን የቦታ አይነት ይምረጡ",
+    "selectApplication": "አፕሊኬሽን ይምረጡ",
+    "selectApplicationToLoadPermissions": "ፍቃዶቹን ለማስገንዘብ አፕሊኬሽኑን ይምረጡ",
+    "copyPermissionsHint": "የነበረ የቦታ አይነት ይምረጡ፤ ፍቃዶቹ አስቀድመው ይሞላሉ፣ ከታች ማስተካከል ይችላሉ።",
+    "copyPermissionsFailed": "ፍቃዶችን መቅዳት አልተቻለም",
+    "perFailed": "ፍቃድ መፍጠር አልተቻለም",
+    "perSuccess": "የፍቃድ አይነት ተፈጠረና ፍቃዶች ተመደቡ",
+    "updatePerSuccess": "ፍቃድ በትክክል ተዘምኗል",
+    "updatePerFailed": "ፍቃድ ማዘመን አልተቻለም",
+    "permissionName": "የፍቃድ ስም",
+    "key": "ቁልፍ",
+    "createdAt": "የተፈጠረበት ቀን",
+    "updatedAt": "የተስተካከለበት ቀን",
+    "createPermission": "ፈቃድ ፍጠር",
+    "keyRequired": "መክፈቻ አስፈላጊ ነው",
+    "selectPosType": "የቦታ አይነት ይምረጡ",
+    "adding": "በመጨመር ላይ...",
+    "msg": "በተሳካ ሁኔታ ታካትቷል",
+    "subDep": "ንዑስ የስራ መደብ መጠር",
+    "parentDep": "ዋና የስራ መደብ መጠር",
+    "invalidMsg": "እባኮትን የተሰለቸውን መስኮቶች ያስተካክሉ።",
+    "success": "ተሳክቷል",
+    "unit": "ዩኒት",
+    "onlyPngAllowed": "በPNG ብቻ ፋይሎች መፍቀድ ይቻላል።",
+    "user": "ተጠቃሚ",
+    "firstName": "የመጀመሪያ ስም",
+    "lastName": "የአባት ስም",
+    "selectUser": "ተጠቃሚን ይምረጡ",
+    "userRequired": "ተጠቃሚ አስፈላጊ ነው",
+    "userRequiredMsg": "እባኮትን ለመመደብ ተጠቃሚን ይምረጡ።",
+    "userError": "የተመረጠው ተጠቃሚ ልክ አይደለም ወይም አልተገኘም።",
+    "userSuccess": "ተጠቃሚ በተሳካ ሁኔታ ተመድቧል",
+    "updated": "በተሳካ ሁኔታ ተቀይሯል",
+    "department": "የስራ መደብ መጠር",
+    "departmentRequired": "የስራ መደብ አስፈላጊ ነው",
+    "departmentSuccess": "የስራ መደብ በተሳካ ሁኔታ ተመርጧል",
+    "permissionSuccess": "የቦታ አይነት ተፈጠረና ፍቃዶች ተመደቧል",
+    "permissionFailed": "ቦታን መፍጠር አልተቻለም",
+    "editRemark": "አስተያየት አስተካክል",
+    "addRemark": "አስተያየት ያክሉ",
+    "commonRemarks": "የተለመዱ አስተያየቶች",
+    "onlySquareAllowed": "የማኅተሙ ቁመት እና ስፋት ተመሳሳይ መሆን አለበት (300x300)",
+    "searchPermissions": "ፍቃዶችን ይፈልጉ...",
+    "noPermissionsFound": "ከፍለጋዎ ጋር የሚዛመድ ፍቃድ አልተገኘም",
+    "noPermissionsAvailable": "ምንም ፍቃዶች አይገኙም",
+    "showingPermissions": "{{count}} ከ {{total}} ፍቃዶች እያሳዩ ነው",
+    "createTemplate": "ቴምፕሌት ይፍጠሩ",
+    "editTemplate": "ቴምፕሌት ያርትዑ",
+    "viewTemplate": "ቴምፕሌት ይመልከቱ",
+    "deleteTemplate": "ቴምፕሌት ይሰርዙ",
+    "deleteTemplateConfirm": "'{{name}}' ቴምፕሌትን መሰረዝ እርግጠኛ ነዎት? ይህ ድርጊት መልሰው ማድረግ አይችሉም።",
+    "noTemplates": "ምንም ቴምፕሌቶች አልተገኙም",
+    "sincerelyText": "የመዝጊያ ጽሁፍ",
+    "body": "ይዘት",
+    "CanReceiveRecord": "መዝገብ መቀበል ይችላል።",
+    "CanAssignRecord": "መዝገብ መመደብ ይችላል።",
+    "CanCreateBankRecord": "የባንክ መዝገብ መፍጠር ይችላል።",
+    "positionChangeRequestReason": "የሰራተኛ የስራ መደብ ለውጥ ጥያቄ",
+    "positionChangeRequestSuccess": "የስራ መደብ ለውጥ ጥያቄ በተሳካ ሁኔታ ተልኳል።",
+    "positionChangeApprovalRequiredSuccess": "እርምጃው ተጠናቋል። ለስራ መደብ ለውጥ ማጽደቅ ያስፈልጋል።",
+    "userInvitePendingApproval": "ተጠቃሚው ተጋብዟል እና ለዚህ ክፍል ማጽደቅን ይጠብቃል።",
+    "requestAssignment": "ምደባ ጠይቅ",
+    "assignUser": "ተጠቃሚ መድብ",
+    "submitting": "በመላክ ላይ...",
+    "headerAndFooter": "ሄድርና ፉተር",
+    "uploadNew": "አዲስ ስቀል",
+    "updateExisting": "አሁን ያለውን ዝማኔ",
+    "bulkMsg2": "ቦታን በጅምላ ለማዘመን Excel ን ይጫኑ"
+  },
+  "superAdmin": {
+    "manageConfig": {
+      "title": "የ{{type}} ማስተካከያ አስተዳድር",
+      "description": "{{level}} አቅም እና መዋቅር ያስተካክሉ",
+      "organization": "ድርጅት",
+      "unit": "ክፍል",
+      "selectUnit": "ክፍል ይምረጡ",
+      "selectUnitPlaceholder": "ክፍል ይምረጡ",
+      "subOrganizations": "ንዑስ ድርጅቶች",
+      "employeesPerOrg": "በድርጅት ሠራተኞች",
+      "subOrgsPlaceholder": "ለምሳሌ 3",
+      "employeesPlaceholder": "ለምሳሌ 20",
+      "addConfiguration": "ማስተካከያ ያክሉ",
+      "updateConfiguration": "ማስተካከያ ያዘምኑ",
+      "configurations": "ማስተካከያዎች",
+      "loading": "በመጫን ላይ...",
+      "noConfigurations": "ምንም ማስተካከያ አልተጨመረም",
+      "edit": "አርትዕ",
+      "delete": "ሰርዝ",
+      "close": "ዝጋ",
+      "unitBased": "በክፍል የተመሰረተ",
+      "organizationLevel": "በድርጅት ደረጃ"
+    }
+  },
+  "recordTag": {
+    "title": "መዝገብ መለያዎች",
+    "tableName": "መዝገብ መለያዎች",
+    "name": "ስም",
+    "key": "ቁልፍ",
+    "CreatedAt": "የተፈጠረበት ቀን",
+    "createNew": "አዲስ መለያ ፍጠር",
+    "createTitle": "መዝገብ መለያ",
+    "Actions": "እርምጃዎች"
+  },
+  "setting": {
+    "canHaveTagBasedReferenceNumber": "የማጣቀሻ ቁጥር በመለያ መሰረት ሊኖረው ይችላል?",
+    "referenceNumberCountFirst": "የማጣቀሻ ቁጥሩ ቁጥር በመጀመሪያ መምጣት አለበት?",
+    "canUserSkipLevel": "ተጠቃሚ ሲመራ ደረጃ መዝለል ይችላል",
+    "canRecordDateLabelHasLocalization": "የመዝገብ ቀን የሁለቱም ቋንቋ ሊኖረው ይችላል?",
+    "canRecordDateHaveTime": "የመዝገብ ቀን ሰዓት ሊኖረው ይችላል?",
+    "canInternalMemoRequirePositionBasedReferenceNumber": "ለውስጥ ማስታወሻ (Memo) የስራ ቦታው የማጣቀሻ ቁጥር ግዴታ ነው?",
+    "title1": "የአካል አዋቂነት",
+    "title2": "የእያንዳንዱ አካል አቅጣጫን ያዋቅሩ",
+    "loading": "አካላትን በመጫን ላይ...",
+    "noUnit": "ምንም አካል አልተገኘም",
+    "Action": "እርምጃ",
+    "Value": "እሴት",
+    "Name": "ስም",
+    "title3": "የሚወሰድበትን ቦታ አቅጣጫ",
+    "title5": "ቲተር እና ፊርማ ይግባ?",
+    "title6": "ሁሉም ተባባሪዎች እስኪጨርሱ ድረስ እርምጃ አይውሰድ?",
+    "canCreateDirectRecord": "ቀጥታ ደብዳቤ መፍጠር ይቻል",
+    "canCreateBankRecord": "የባንክ መዝገብ መፍጠር ይቻላል",
+    "isApprovalRequiredForPositionChange": "ለስራ መደብ ለውጥ ማጽደቅ ያስፈልጋል",
+    "canPositionBasedRecordsBeCreated": "በስራ መደብ ደብዳቤ ለመጻፍ ፍቃድ ይሰጥ?",
+    "canPositionBasedReferenceBeUsedForAllTypes": "በስራ መደብ የሚውጡ ደብዳቤዎች በሁሉም የደብዳቤ አይነቶች ላይ ይተግበሩ?",
+    "shouldDirectRecordHaveHeaderAndFooter": "ቀጥታ ደብዳቤ ራስጌና ግርጌ ይኖረው",
+    "shouldCollaboratorAlwaysSign": "ተባባሪ ሁልጊዜ ይፈርም (የቡድን ፊርማ)",
+    "shouldIncludeForYourReferenceInCC": "እንዲያውቁት ያካትቱ",
+    "canCollaborationBeCreatedForAll": "ለማንኛውም መዝገብ አይነት የትብብር/የቡድን ስራ መፍጠር ይቻላል?",
+    "canRecordBeEditedByCollaborators": "ተባባሪዎች መዝገብን እንዲያርሙ ፍቀድ",
+    "canRecordHaveCollaboratorsName": "የተባባሪዎችን ስም በመዝገቡ ላይ አሳይ",
+    "canRecordBeEditedOnWorkflow": "በስራ ሂደት ላይ መዝገብን ማርም ፍቀድ",
+    "canIncomingAssignmentsBeSeparated": "ገቢ ደብዳቤዎች ተበታትነው ይታዩ?",
+    "canROReturn": "የRO መመለስ ፍቀድ",
+    "internalMemoHasReferenceNumber": "የውስጥ ማስታወሻ ማጣቀሻ ቁጥር ይኑረው",
+    "enabled": "ነቅቷል",
+    "disabled": "ተሰናክሏል",
+    "editTitle": "የቦታ አቅጣጫን ያርቱ",
+    "editMsg": "ለዚህ አካል የቦታ አቅጣጫን ያስተካክሉ",
+    "msg1": "የድርጅት መለያ አልተገኘም። እባክዎን ማረጋገጫዎን ያረጋግጡ።",
+    "msg2": "የቦታ አዋቂነቶችን በመጫን ላይ...",
+    "positionConfig": "የቦታ አዋቂነት",
+    "positionConfigMsg": "ለእያንዳንዱ ቦታ የማሳወቂያ ቅንብሮችን እና የስራ እንቅስቃሴ ባህሪን ያዋቅሩ",
+    "add": "አዋቂነት ያክሉ",
+    "create": "የቦታ አዋቂነት ይፍጠሩ",
+    "position": "በስራ መደብ",
+    "select": "ቦታ ይምረጡ",
+    "select2": "እባክዎ መጀመሪያ አካል ይምረጡ",
+    "plsSelect": "የሚገኙትን ቦታዎች ለማየት እባክዎ መጀመሪያ አካል ይምረጡ",
+    "positionScope": "የቦታ አቅጣጫ",
+    "all": "ሁሉም",
+    "immediateChild": "ቀጣዩ ልጅ",
+    "parallel": "ከቀጣዩ ልጅ ጋር በአንፃፃፍ",
+    "notification": "የማሳወቂያ ቅንብሮች",
+    "sms": "የኤስኤምኤስ ማሳወቂያ",
+    "smsMsg": "መዝገብ ወደዚህ ቦታ ሲገባ ኤስኤምኤስ ይላኩ",
+    "email": "የኢሜይል ማሳወቂያ",
+    "emailMsg": "መዝገብ ወደዚህ ቦታ ሲገባ ኢሜይል ይላኩ",
+    "inbox": "የኢንቦቅሬታ  ማሳወቂያ",
+    "inboxMsg": "መዝገብ ወደዚህ ቦታ ሲገባ የኢንቦቅሬታ  ማሳወቂያ ያሳዩ",
+    "workflow": "የስራ እንቅስቃሴ ቅንብሮች",
+    "viewWF": "የስራ ፍሰትን ይመልከቱ",
+    "workflowMsg": "አትመልከት ከማንም አትመደበ",
+    "workflowMsg1": "ለዚህ ቦታ ማንም ካልተመደበ የስራ እንቅስቃሴውን ዝለል",
+    "creating": "በመፍጠር ላይ...",
+    "createConfig": "አዋቂነት ይፍጠሩ",
+    "error": "የቦታ አዋቂነቶችን ማከተል ላይ ስህተት፦",
+    "retry": "እንደገና ይሞክሩ",
+    "SMS": "ኤስኤምኤስ",
+    "Inbox": "ኢንቦቅሬታ ",
+    "skipWF": "የስራ እንቅስቃሴን ዝለል",
+    "delete": "ሰርዝ",
+    "deleteMsg": "ይህን የቦታ አዋቂነት ማጥፋት እርግጠኛ ነዎት? ይህ እርምጃ አይታወቅም።",
+    "updating": "በማዘመን ላይ...",
+    "UpdateConfig": "ሲቲንግ ያዘመኑ",
+    "archivedUsers": "የተሰረዙ ተጠቃሚዎች",
+    "escalationTitle": "የማሳደጊያ ማስተካከያ",
+    "escalationDescription": "ለተለያዩ የደብዳቤ አይነቶች የማሳደጊያ ሰዓታትን ያስተካክሉ",
+    "loadingConfig": "ማስተካከያ በመጫን ላይ...",
+    "loadError": "ማስተካከያ በማምጣት ላይ ስህተት",
+    "noConfigFound": "ምንም ማስተካከያ አልተገኘም",
+    "edit": "አርትዕ",
+    "updateEscalationMsg": "የማሳደጊያ ሰዓት መጠንውን ያዘምኑ",
+    "saving": "በማስቀመጥ ላይ...",
+    "saveChanges": "ለውጦችን መዝግብ",
+    "escalationHour": "መደበኛ የማሳደጊያ ሰዓት",
+    "urgentLetterEscalationHour": "አስቸኳይ ደብዳቤ የማሳደጊያ ሰዓት",
+    "onReviewLetterEscalationHour": "የግምገማ ደብዳቤ የማሳደጊያ ሰዓት",
+    "urgentOnReviewLetterEscalationHour": "አስቸኳይ የግምገማ ደብዳቤ የማሳደጊያ ሰዓት",
+    "escalationNotificationType": "የማሳደጊያ ማሳወቂያ አይነት",
+    "escalationNotificationChannel": "የማሳደጊያ ማሳወቂያ ቻናል",
+    "escalationNotificationTypePlaceholder": "ማሳወቂያ አይነት ይምረጡ",
+    "escalationNotificationChannelPlaceholder": "ማሳወቂያ ቻናል ይምረጡ",
+    "escalationTypeJump": "ዝለል",
+    "escalationTypeNotifyStep": "ደረጃ አሳውቅ",
+    "escalationTypeNotifyParentStep": "ወላጅ ደረጃ አሳውቅ",
+    "escalationChannelAll": "ሁሉም ቻናሎች",
+    "escalationChannelEmail": "ኢሜይል",
+    "escalationChannelInApp": "በመተግበሪያ ውስጥ",
+    "escalationChannelSms": "ኤስኤምኤስ",
+    "canSendToBranch": "በቀጥታ ወደ ቅርንጫፍ ክፍሎች መላክ ይቻላል",
+    "attachmentSignature": {
+      "badge": "የአባሪ ደህንነት",
+      "title": "ለአባሪዎች ፊርማ",
+      "description": "አንድ አሃድ ይምረጡ እና አባሪዎች በነባሪነት ዲጂታል ፊርማ ያካተቱ መሆን አለመሆናቸውን ይቆጣጠሩ።",
+      "unit": "ዩኒት",
+      "selectUnit": "Select a unit",
+      "loadingUnits": "ዩኒት በመጫን ላይ...",
+      "noUnitsFound": "No units found",
+      "unitHint": "ይህ ቅንብር ለተመረጠው ክፍል ይሠራል",
+      "toggleLabel": "Add Signature to Attachment",
+      "toggleDescription": "በተሰቀሉ አባሪዎች ላይ ፊርማ በራስ-ሰር ያካትቱ።",
+      "status": "ሁኔታ፡",
+      "activeUnit": "አክቲቭ ዩኒት"
+    }
+  },
+  "toogle": {
+    "letterName": "የፋይል ስም",
+    "Letter_Number": "የደብዳቤ ቁጥር",
+    "ACtions": "ተግባራት",
+    "Actions": "ተግባራት",
+    "Date": "ቀን",
+    "From": "ከ",
+    "Subject": "ርዕሰ ጉዳይ",
+    "subject": "ርዕሰ ጉዳይ",
+    "referenceNumber": "የማጣቀሻ ቁጥር",
+    "FileName": "የፋይል ስም",
+    "To": "ወደ",
+    "fileName": "የፋይል ስም",
+    "sendingOrganization": "የላኪ ድርጅት",
+    "sendingDepartment": "የላኪ ክፍል",
+    "dispatchedDate": "ቀን",
+    "submittedDate": "ቀን",
+    "Sending_Department": "የላኪ ክፍል",
+    "dispatchedBy": "የተቀየረው በ",
+    "Receiver": "ወደ",
+    "CreatedAt": "ቀን",
+    "createdAt": "ቀን",
+    "Status": "ሁኔታ",
+    "status": "ሁኔታ",
+    "organizationName": "የላከው ድርጅት",
+    "Task Status": "ሁኔታ",
+    "TaskStatus": "ሁኔታ",
+    "taskStatus": "ሁኔታ",
+    "delegateePosition": "የወከለኝ የስራ መደብ መጠሪያ",
+    "delegateeEmployee": "የወከለኝ ባለሙያ",
+    "delegatedPosition": "የተወከለው የስራ መደብ መጠሪያ",
+    "delegatedEmployee": "ተወካይ ባለሙያ",
+    "startDate": "መነሻ ቀን",
+    "endDate": "የመጨረሻ ቀን",
+    "isCurrent": "ሁኔታ",
+    "signStatus": "የፊርማ ሁኔታ",
+    "title": "ርዕስ",
+    "color": "ቀለም",
+    "description": "መግለጫ",
+    "image": "ምስል",
+    "featured": "ዋና ዜናዎች",
+    "category": "የዜና ምድብ",
+    "link": "ሊንክ",
+    "name": "ስም",
+    "key": "ቁልፍ",
+    "updatedAt": "የተዘመነበት ቀን",
+    "actions": "ተግባራት"
+  },
+  "search": {
+    "searchAllEmployees": "ሁሉንም ሰራተኞች ፈልግ",
+    "searchByNameEmailPhonePosition": "በስም፣ ኢሜል፣ ስልክ ወይም ቦታ ፈልግ...",
+    "searchingEmployees": "ሰራተኞችን በመፈለግ ላይ...",
+    "errorLoadingEmployees": "ሰራተኞችን በመጫን ላይ ስህተት",
+    "noEmployeesFound": "ምንም ሰራተኞች አልተገኙም",
+    "tryDifferentKeywords": "የተለያዩ ቁልፍ ቃላትን ይሞክሩ",
+    "startTypingToSearch": "ሰራተኞችን ለመፈለግ መተየብ ይጀምሩ",
+    "searchByNameEmailPhone": "በስም፣ ኢሜል ወይም ስልክ ቁጥር ፈልግ",
+    "showingResults": "ለ\"{{query}}\" {{total}} ውስጥ {{count}} ውጤቶችን በማሳየት ላይ",
+    "searchUnits": "ክፍሎችን ፈልግ...",
+    "searchDepartments": "ዲፓርትመንቶችን ፈልግ...",
+    "searchEmployees": "ሰራተኞችን ፈልግ...",
+    "selectUnitsPlaceholder": "ክፍሎችን ይምረጡ...",
+    "noResults": "ምንም ውጤት አልተገኘም",
+    "allEmployees": "ሁሉም ሰራተኞች",
+    "resendingVerification": "የማረጋገጫ ኮድ እንደገና በመላክ ላይ...",
+    "sendingInvitation": "ግብዣ በመላክ ላይ...",
+    "verificationCodeResent": "የማረጋገጫ ኮድ እንደገና ተልኳል",
+    "invitationSent": "ግብዣ ተልኳል",
+    "verificationCodeSentTo": "አዲስ የማረጋገጫ ኮድ ወደ {{name}} ተልኳል",
+    "invitationSentTo": "ግብዣ ወደ {{name}} ተልኳል",
+    "failedToResend": "የማረጋገጫ ኮድ እንደገና መላክ አልተሳካም",
+    "failedToSendInvitation": "ግብዣ መላክ አልተሳካም",
+    "confirmRemoveEmployee": "{{name}} ን ማስወገድ እርግጠኛ ነዎት? ይህ ድርጊት መልሶ ሊቀየር አይችልም።",
+    "removeFunctionalityNotImplemented": "የማስወገድ ተግባር ከትክክለኛ API ውህደት ጋር ይተገበራል"
+  },
+  "Resend Invite": "እንደገና ሊንክ ላክ",
+  "actionModal": {
+    "trigger": "እርምጃ ውስጥ ይውሰዱ",
+    "title": "በሰነድ ላይ እርምጃ ውስጥ ይውሰዱ",
+    "labels": {
+      "selectAction": "እርምጃ ይምረጡ",
+      "remark": "ማስታወሻ (አማራጭ)",
+      "remarkPlaceholder": "ማስታወሻ ያክሉ..."
+    },
+    "actions": {
+      "approve": "አረጋግጥ",
+      "adjustment": "ማስተካከያ",
+      "reject": "አትቀበል",
+      "pending": "በመጠባበቅ ላይ",
+      "submitted": "ተላከ",
+      "selectPlaceholder": "እርምጃ ይምረጡ"
+    },
+    "buttons": {
+      "cancel": "ሰርዝ",
+      "submit": "አስገባ"
+    },
+    "toast": {
+      "success": "ሰነድ {status}"
+    }
+  },
+  "deputy": {
+    "title": "ምክትል አመራሮች",
+    "subtitle": "የምክትል አመራሮች መልዕክት",
+    "previous": "ቀዳሚ መልዕክት",
+    "next": "ቀጣይ መልዕክት",
+    "defaultPosition": "የስራ መደብ",
+    "goToMessage": "ወደ መልዕክት {{index}} ሂድ"
+  },
+  "officeHead": {
+    "title": "የኃላፊ መልዕክት",
+    "subtitle": "የቢሮ ሀላፊ መልዕክት",
+    "defaultPosition": "የስራ መደብ",
+    "addMessage": "መልእክት ያክሉ"
+  },
+  "Strategic Goal": "የተቋሙ ግብ",
+  "of": "ከ",
+  "Our Strategic Goals": "የእኛ የስትራቴጂ ግቦች",
+  "Go to goal": "ወደ ግብ {{index}}: {{title}} ሂድ",
+  "Previous Goal": "የበፊት ግብ",
+  "Next Goal": "የሚቀጥለው ግብ",
+  "addGoal": "ግብ ያክሉ",
+  "Goals": "የድርጅታዊ ግቦች",
+  "Vision": "የድርጅታዊ ራዕይ",
+  "addVision": "ራዕይ ያክሉ",
+  "addNews": "ዜና ያክሉ",
+  "addNewsCategory": "የዜና ምድብ ያክሉ",
+  "newsCategory": "የዜና ምድብ",
+  "modules": "ሞጁሎች",
+  "addModules": "ሞጁል አክል",
+  "socialMedia": "ማህበራዊ ሚዲያ",
+  "addSocialMedia": "ማህበራዊ ሚዲያ ያክሉ",
+  "contactUs": "ያግኙን",
+  "addContactUs": "እውቂያ ያክሉ",
+  "theme": "የድርጅቱ ጭብጥ",
+  "template": {
+    "title": "የሪሶርስ ውቅር",
+    "description": "መግለጫ",
+    "pageDescription": "ለስታይል ቅንብሮች ሪሶርሶችን ያስተዳድሩ",
+    "create": "ሪሶርስ ይፍጠሩ",
+    "createDescription": "ለስታይል ቅንብሮች አዲስ ሪሶርስ ይፍጠሩ",
+    "edit": "ሪሶርስ ያርትዑ",
+    "editDescription": "የሪሶርስ ውቅር ያዘምኑ",
+    "delete": "ሪሶርስ ይሰርዙ",
+    "deleteConfirmation": "ይህን ሪሶርስ መሰረዝ እንደሚፈልጉ እርግጠኛ ነዎት? ይህ ድርጊት ሊመለስ አይችልም።",
+    "confirmDelete": "ሰረዝ ያረጋግጡ",
+    "name": "ስም",
+    "nameAmharic": "ስም (አማርኛ)",
+    "nameEnglish": "ስም ( English)",
+    "enterNameAmharic": "ስም በአማርኛ ያስገቡ",
+    "enterNameEnglish": "ስም በEnglish ያስገቡ",
+    "nameRequired": "ስም ያስፈልጋል",
+    "resourceTypeRequired": "የሪሶርስ ዓይነት ያስፈልጋል",
+    "fileRequired": "ፋይል ያስፈልጋል",
+    "fileTooLarge": "ፋይሉ ከ 50MB በታች መሆን አለበት",
+    "invalidFileType": "PNG፣ JPG፣ GIF፣ WebP እና PDF ፋይሎች ብቻ ይፈቀዳሉ",
+    "submitErrorTitle": "ሪሶርሱን ማስቀመጥ አልተቻለም",
+    "resourceType": "የሪሶርስ ዓይነት",
+    "selectResourceType": "የሪሶርስ ዓይነት ይምረጡ",
+    "selectTypeFirst": "ሪሶርሶችን ለመመልከት የሪሶርስ ዓይነት ይምረጡ",
+    "descriptionAmharic": "መግለጫ (አማርኛ)",
+    "descriptionEnglish": "መግለጫ (English)",
+    "enterDescriptionAmharic": "መግለጫ በአማርኛ ያስገቡ",
+    "enterDescriptionEnglish": "መግለጫ በEnglish ያስገቡ",
+    "descriptions": "መግለጫዎች",
+    "names": "ስሞች",
+    "file": "ፋይል",
+    "uploadFile": "ፋይል ይጫኑ",
+    "dragDrop": "ይጎትቱ እና ይጣሉ ወይም ለመጫን ጠቅ ያድርጉ",
+    "fileTypes": "PNG, JPG, GIF, WebP, PDF እስከ 50MB",
+    "view": "ይመልከቱ",
+    "noTemplates": "ገና ምንም ሪሶርስ የለም",
+    "getStarted": "የመጀመሪያ ሪሶርስዎን በመፍጠር ይጀምሩ",
+    "search": "ሪሶርሶችን ይፈልጉ...",
+    "created": "ሪሶርስ በተሳካ ሁኔታ ተፈጠረ",
+    "updated": "ሪሶርስ በተሳካ ሁኔታ ተዘምኗል",
+    "deleted": "ሪሶርስ በተሳካ ሁኔታ ተሰርዟል",
+    "error": "ሪሶርስ ማስቀመጥ አልተሳካም",
+    "deleteFailed": "ሪሶርስ ማስወገድ አልተሳካም",
+    "configureStyles": "ስታይል አዘጋጅ",
+    "sample": "የቴምፕሌት ናሙና",
+    "generateSample": "ናሙና ፍጠር",
+    "content": "ይዘት",
+    "pdfPreview": "PDF ቅድመ እይታ",
+    "saveSettings": "ቅንብሮችን ያስቀምጡ",
+    "download": "ዝቅ ያድርጉ",
+    "loadPayload": "ናሙና ጭነት ጫን",
+    "loadPayloadDescription": "ፎርሙን ከናሙና ውሂብ ለመሙላት JSON ጭነት ፋይል ያስቀምጡ",
+    "loadingTemplates": "ቴምፕሌቶችን በመጫን ላይ...",
+    "errorLoadingTemplates": "ቴምፕሌቶችን መጫን ስህተት",
+    "errorLoadingTemplate": "ቴምፕሌት መጫን ስህተት",
+    "errorLoadingSettings": "ስታይል ቅንብሮችን መጫን ስህተት",
+    "commonProperties": "የተለመዱ ባህሪያት",
+    "quickPresets": "ፈጣን ቅድመ ቅንብሮች",
+    "fontSize": "የፊደል መጠን",
+    "fontWeight": "የፊደል ክብደት",
+    "fontFamily": "የፊደል ቤተሰብ",
+    "textDecoration": "የጽሑፍ ማስጌጫ",
+    "listStyle": "የዝርዝር ስታይል",
+    "customListBullets": "ብጁ ቡሌቶች (የሪሶርስ ውቅር)",
+    "width": "ስፋት",
+    "height": "ቁመት",
+    "margin": "ህዳግ",
+    "padding": "ጥቅል",
+    "advancedCSS": "የላቀ CSS ኢዲተር",
+    "customCSS": "ብጁ CSS",
+    "noPdfInResponse": "በምላሹ ምንም PDF የለም",
+    "generatingSample": "ናሙና ፍጠር ስህተት",
+    "settingsSavedSuccessfully": "ቅንብሮች በተሳካ ሁኔታ ተቀምጠዋል",
+    "errorSavingSettings": "ቅንብሮችን ማስቀመጥ ስህተት",
+    "noCustomSettingsToSave": "ለማስቀመጥ ብጁ ቅንብሮች የለም",
+    "downloadingPDF": "PDF ዝቅ ይደረጋል...",
+    "downloadPDFSuccess": "PDF በተሳካ ሁኔታ ዝቅ ተደርጓል",
+    "downloadPDFFailed": "PDF ዝቅ ማድረግ አልተሳካም",
+    "noPdfAvailable": "ምንም PDF አይገኝም",
+    "basicInfo": "መሰረታዊ መረጃ",
+    "recordType": "የመዝገብ ዓይነት",
+    "external": "ውጫዊ",
+    "internal": "ውስጣዊ",
+    "preferredLanguage": "ተመራጭ ቋንቋ",
+    "headerFooter": "ራስ ጽሑፍ እና ግርጌ ጽሑፍ",
+    "headerStyleSettings": "የራስ ጽሑፍ ስታይል ቅንብሮች",
+    "footerStyleSettings": "የግርጌ ጽሑፍ ስታይል ቅንብሮች",
+    "subject": "ርዕስ",
+    "subjectStyleSettings": "የርዕስ ስታይል ቅንብሮች",
+    "date": "ቀን",
+    "body": "ሰውነት",
+    "bodyStyleSettings": "የሰውነት ስታይል ቅንብሮች",
+    "sincerelyText": "በታማኝነት ጽሑፍ",
+    "prefix": "ቅድመ ቅጥያ",
+    "prefixStyleSettings": "ቅድመ ቅጥያ ስታይል",
+    "suffix": "ቅጥያ",
+    "suffixStyleSettings": "ቅጥያ ስታይል",
+    "prefixCC": "ቅድመ ቅጥያ CC",
+    "ccPrefixStyleSettings": "CC ቅድመ ቅጥያ ስታይል",
+    "suffixCC": "ቅጥያ CC",
+    "ccSuffixStyleSettings": "CC ቅጥያ ስታይል",
+    "delegatorName": "የወካይ ስም",
+    "collaborators": "ተባባሪዎች",
+    "recipientsAndCC": "ተቀባዮች እና CC",
+    "internalCC": "ውስጣዊ CC",
+    "externalCC": "ውጫዊ CC",
+    "recipients": "ተቀባዮች",
+    "headerStyle": "ርዕስ ስታይል",
+    "footerStyle": "ግርጌ ስታይል",
+    "subjectStyle": "ርዕስ ስታይል",
+    "bodyStyle": "አካል(Body) ስታይል",
+    "receiverStyle": "ተቀባይ ስታይል",
+    "prefixSuffix": "ቅድመ-ቅጥያ / ቅጥያ",
+    "ccStyles": "ሲሲ ስታይሎች",
+    "fonts": "ቅርጸ-ቁምፊዎች",
+    "pageMargin": "የገጽ ህዳግ",
+    "referenceNumberStyles": "የማጣቀሻ ቁጥር ስታይሎች",
+    "other": "ሌላ",
+    "styleCategories": "የስታይል ምድቦች",
+    "styleEditor": "ስታይል አርታኢ",
+    "livePreview": "የቀጥታ ቅድመ-እይታ",
+    "fontsHint": "አማራጭ የቅርጸ-ቁምፊ ሪሶርስ ይምረጡ።",
+    "fontResource": "የቅርጸ-ቁምፊ ፋይል",
+    "selectFont": "ቅርጸ-ቁምፊ ይምረጡ",
+    "sectionReference": "ማጣቀሻ እና ቀን",
+    "sectionReceivers": "ተቀባዮች",
+    "sectionSender": "ላኪ",
+    "sectionSubject": "ርዕስ",
+    "sectionBody": "ዋና ጽሁፍ",
+    "sectionClosing": "መደምደሚያ እና ፊርማዎች",
+    "sectionCc": "CC",
+    "alignAuto": "ራስ-ሰር (የቋንቋ ነባሪ)",
+    "alignStart": "መጀመሪያ (ግራ)",
+    "alignCenter": "መሀል",
+    "alignEnd": "መጨረሻ (ቀኝ)",
+    "letterLayout": "የደብዳቤ አቀማመጥ",
+    "appliesTo": "የሚተገበርበት",
+    "useGlobalDefault": "የቴምፕሌት ነባሪ ይጠቀሙ",
+    "unitOverride": "የዩኒት ማሻሻያ",
+    "placementLanguage": "የአቀማመጥ ቋንቋ",
+    "languageAm": "አማርኛ",
+    "languageEn": "እንግሊዝኛ",
+    "copyAmToEnPositions": "ከአማርኛ ወደ እንግሊዝኛ አቀማመጥ ቅዳ",
+    "layoutOptions": "የአቀማመጥ አማራጮች",
+    "sectionOrder": "የክፍሎች ቅደም ተከተል",
+    "moveUp": "ወደ ላይ አንቀሳቅስ",
+    "moveDown": "ወደ ታች አንቀሳቅስ",
+    "signatures": "ፊርማዎች",
+    "signatureWidth": "ስፋት (pt)",
+    "signatureHeight": "ቁመት (px)",
+    "signatureGap": "ርቀት (px)",
+    "closingAlign": "የመደምደሚያ ክፍል አግድም አቀማመጥ",
+    "seal": "ማህተም",
+    "sealWidth": "ስፋት (px)",
+    "sealHeight": "ቁመት (px)",
+    "stamp": "ቴተር",
+    "stampWidth": "ስፋት (pt)",
+    "stampHeight": "ቁመት (px)",
+    "closingAssetSignatures": "የፊርማ ብሎክ",
+    "closingAssetSeal": "ማህተም",
+    "senderAssetSignature": "የላኪ ፊርማ",
+    "senderAssetStamp": "የላኪ ማህተም",
+    "assetPlacementCanvas": "የንብረት አቀማመጥ",
+    "assetPlacementCanvasHint": "እያንዳንዱን ንብረት በገጹ ላይ ይጎትቱ። በ{{language}} አቀማመጥ እያርትዑ ነው። ካንቫሱ ከPDF የይዘት ቦታ ({{width}}x{{height}} px) ጋር ይመሳሰላል።",
+    "closingBlockGuide": "የ\"በአክብሮት\" ክፍል (ግምት)",
+    "selectedAsset": "የተመረጠ ንብረት",
+    "positionTop": "ከላይ (px)",
+    "positionLeft": "ከግራ (px)",
+    "layerOrder": "የንብርብር ቅደም ተከተል (ከኋላ -> ፊት)",
+    "sendBackward": "ወደ ኋላ ላክ",
+    "bringForward": "ወደ ፊት አምጣ",
+    "letterLabelHint": "በደብዳቤ ላይ የሚታይ የመለያ ጽሁፍ",
+    "underline": "ስር መስመር",
+    "bold": "ደማቅ",
+    "listStyleImage": "የዝርዝር ምስል ቅጥ",
+    "listStyleImagePreview": "የዝርዝር ምስል ቅድመ-እይታ",
+    "refreshingImage": "በማደስ ላይ...",
+    "imageUnavailable": "ምስሉ አይገኝም",
+    "noListStyleImage": "ምንም ምስል የለም",
+    "removeListStyleImage": "ምስል አስወግድ",
+    "resetAllTitle": "ሁሉንም ቅንብሮች ዳግም ልክ ላድርግ?",
+    "resetAllMessage": "ለዚህ ቴምፕሌት የተሻሻሉ የስታይል ቅንብሮች ሁሉ ወደ ነባሪ ይመለሳሉ።",
+    "resetAllWarning": "ይህ እርምጃ አይመለስም።",
+    "resetAllCancel": "ሰርዝ",
+    "resetAllConfirm": "ወደ ነባሪ መልስ",
+    "historyLoadFailed": "የቅንብር ታሪክ መጫን አልተሳካም",
+    "historyRestored": "ቅንብሩ ከታሪክ ተመልሷል",
+    "historyRestoreFailed": "ቅንብሩን ከታሪክ መመለስ አልተሳካም",
+    "settingHistory": "የቅንብር ታሪክ",
+    "noHistory": "ለዚህ ቅንብር የታሪክ መዝገብ የለም።",
+    "restoreVersion": "መልስ",
+    "selectStyleCategory": "የስታይል ምድብ ይምረጡ",
+    "customized": "የተሻሻለ",
+    "textAlign": "የጽሁፍ አሰላለፍ",
+    "autoRefreshEnabled": "ራስ-ሰር ማደስ ነቅቷል",
+    "manualRefreshEnabled": "በእጅ ማደስ",
+    "openInNewTab": "በአዲስ ታብ ክፈት",
+    "generatingPreview": "በመፍጠር ላይ...",
+    "applyChanges": "ለውጦችን ተግብር",
+    "loadingPdf": "PDF በመጫን ላይ...",
+    "pdfLoadError": "የPDF ቅድመ-እይታ መጫን አልተሳካም",
+    "previewNotGenerated": "ቅድመ-እይታ ገና አልተፈጠረም",
+    "noChangesToSave": "ለማስቀመጥ ምንም የቅንብር ለውጥ የለም",
+    "saveSuccess": "የስታይል ቅንብሮች በተሳካ ሁኔታ ተቀምጠዋል",
+    "resetAllError": "የስታይል ቅንብሮችን ዳግም መመለስ አልተሳካም",
+    "styleSettings": "የስታይል ቅንብሮች",
+    "settings": "ቅንብሮች",
+    "resetAllToDefault": "ወደ ነባሪ መልስ",
+    "previewLanguage": "የቅድመ-እይታ ቋንቋ",
+    "amharic": "አማርኛ",
+    "english": "እንግሊዝኛ",
+    "styleCategories": "የስታይል ምድቦች",
+    "categoryHint": "ለማርትዕ ክፍል ይምረጡ",
+    "expandSidebar": "የጎን ማውጫን ዘርጋ",
+    "collapseSidebar": "የጎን ማውጫን ጠቅልል",
+    "styleEditor": "የስታይል አርታዒ",
+    "headerFooterSelection": "ራስጌ እና ግርጌ",
+    "noSettings": "ምንም የስታይል ቅንብሮች የሉም",
+    "visible": "የሚታይ",
+    "viewHistory": "ታሪክ",
+    "letterLabelFields": "የመለያ ጽሁፍ",
+    "unsavedChanges": "ያልተቀመጡ ለውጦች",
+    "allChangesSaved": "ሁሉም ለውጦች ተቀምጠዋል",
+    "saveShortcut": "Ctrl+S ለማስቀመጥ",
+    "saving": "በማስቀመጥ ላይ..."
+  },
+  "templateSettingValue": {
+    "title": "የቴምፕሌት ቅንብር እሴቶች",
+    "description": "የቴምፕሌት ቅንብር እሴቶችን ያስተዳድሩ",
+    "create": "የቴምፕሌት ቅንብር እሴት ይፍጠሩ",
+    "createDescription": "አዲስ የቴምፕሌት ቅንብር እሴት ይፍጠሩ",
+    "edit": "የቴምፕሌት ቅንብር እሴት ያርትዑ",
+    "editDescription": "የቴምፕሌት ቅንብር እሴት ያዘምኑ",
+    "delete": "የቴምፕሌት ቅንብር እሴት ይሰርዙ",
+    "deleteConfirmation": "ይህን የቴምፕሌት ቅንብር እሴት መሰረዝ እንደሚፈልጉ እርግጠኛ ነዎት? ይህ ድርጊት ሊመለስ አይችልም።",
+    "confirmDelete": "ሰረዝ ያረጋግጡ",
+    "template": "ቴምፕሌት",
+    "selectTemplate": "ቴምፕሌት ይምረጡ",
+    "templateSetting": "የቴምፕሌት ቅንብር",
+    "selectTemplateSetting": "የቴምፕሌት ቅንብር ይምረጡ",
+    "resourceType": "የሪሶርስ ዓይነት",
+    "selectResourceType": "የሪሶርስ ዓይነት ይምረጡ",
+    "resource": "ሪሶርስ",
+    "selectResource": "ሪሶርስ ይምረጡ",
+    "templateSettingId": "የቴምፕሌት ቅንብር ID",
+    "enterTemplateSettingId": "የቴምፕሌት ቅንብር ID ያስገቡ",
+    "templateSettingIdRequired": "የቴምፕሌት ቅንብር ID ያስፈልጋል",
+    "resourceId": "የሪሶርስ ID",
+    "enterResourceId": "የሪሶርስ ID ያስገቡ",
+    "resourceIdRequired": "የሪሶርስ ID ያስፈልጋል",
+    "value": "እሴት",
+    "enterValue": "እሴት ያስገቡ",
+    "valueRequired": "እሴት ያስፈልጋል",
+    "noValues": "ገና ምንም የቴምፕሌት ቅንብር እሴት የለም",
+    "getStarted": "የመጀመሪያ የቴምፕሌት ቅንብር እሴትዎን በመፍጠር ይጀምሩ",
+    "search": "በሪሶርስ ID ወይም እሴት ይፈልጉ...",
+    "created": "የቴምፕሌት ቅንብር እሴት በተሳካ ሁኔታ ተፈጠረ",
+    "updated": "የቴምፕሌት ቅንብር እሴት በተሳካ ሁኔታ ተዘምኗል",
+    "deleted": "የቴምፕሌት ቅንብር እሴት በተሳካ ሁኔታ ተሰርዟል",
+    "error": "የቴምፕሌት ቅንብር እሴት ማስቀመጥ ወደ ስህተት ገባ",
+    "deleteFailed": "የቴምፕሌት ቅንብር እሴት ሰረዝ ወደ ስህተት ገባ"
+  },
+  "menu": {
+    "content": "ይዘት",
+    "settingsAndConfig": "ቅንብሮች እና ዕውዛዊ መረጃ",
+    "themesAndBranding": "ጭብጦች እና የድርጅት ማህበረቅር",
+    "templates": "ቴምፕሌቶች"
+  },
+  "portal": {
+    "settings": "የፖርታል ቅንብሮች"
+  },
+  "featuredNews": {
+    "featuredNewsTitle": "የተመረጡ ዜናዎች",
+    "featuredNewsSubtitle": "ከተቋማችን ጋር በቅርብ ያዩ የእድገት፣ ስኬትና አዳዲስ አቀራረቦች",
+    "searchPlaceholder": "ዜና ፍለጋ...",
+    "topStories": "ከፍተኛ ዜናዎች",
+    "readFullStory": "ሙሉ ዜናዉን አንብብ",
+    "readMore": "ተጨማሪ ያንብቡ",
+    "loadMoreNews": "ተጨማሪ ዜናዎችን ፈልግ",
+    "showLess": "ያነሱ",
+    "previousGoal": "ያለፈው ግብ",
+    "nextGoal": "ቀጣይ ግብ",
+    "noNewsFound": "ምንም ዜና አልተገኘም",
+    "tryAdjusting": "ፍለጋዎን ወይም ማጣሪያዎን ይቀይሩ",
+    "readLess": "ያነሰ ያንብቡ"
+  },
+  "newssection": {
+    "featuredNews": "የተመረጡ ዜናዎች",
+    "description": "ከድርጅታችን የተነሳ የቅርብ ጊዜ እድገቶችን፣ ስኬቶችን እና አዳዲስ አስተዋጽኦዎችን ይቀጥሉ",
+    "topStories": "ምርጥ ታሪኮች",
+    "allNews": "ሁሉም ዜና",
+    "noNewsFound": "ዜና አልተገኘም",
+    "noNewsFoundDesc": "የፍለጋ ወይም የተካተተ አማራጭዎን ያስተካክሉ",
+    "searchPlaceholder": "የዜና ማስፈንጠሪያ ያስፈልጋል...",
+    "readFullStory": "ሙሉ ታሪኩን አንብቡ",
+    "readMore": "ተጨማሪ ንባብ",
+    "loadMoreNews": "ተጨማሪ ዜና አንብቡ",
+    "showLess": "ቀንስ"
+  },
+  "queueManagement": {
+    "serviceRating": "የአገልግሎት ደረጃ",
+    "rateYourExperience": "የአገልግሎታችንን ደረጃ ይስጡ",
+    "validationDateInvalid": "የቀን ቅርጸት ትክክል አይደለም",
+    "usingHabeshaCalendar": "የሀበሻ ዘመን አቆጣጠር በመጠቀም",
+    "usingGregorianCalendar": "የግሪጎሪያን ዘመን አቆጣጠር በመጠቀም",
+    "howWasYourExperience": "ተሞክሮዎ እንዴት ነበር?",
+    "thankYouForRating": "ለደረጃ መስጠትዎ እናመሰግናለን!",
+    "pleaseSelectRating": "ለመቀጠል እባክዎ ደረጃ ይምረጡ",
+    "submitFeedback": "ግብረመልስ ይስጡ",
+    "feedbackSubmitted": "ግብረመልስ በተሳካ ሁኔታ ተልኳል!",
+    "feedbackError": "ግብረመልስ መላክ አልተሳካም። እባክዎ እንደገና ይሞክሩ።",
+    "title": "የወረፋ አስተዳደር",
+    "subtitle": "ቦታዎን ያስጠብቁ",
+    "queued": "በወረፋ ላይ",
+    "called": "የተጠሩ ተጠቃሚዎች",
+    "inService": "በአገልግሎት ላይ",
+    "completed": "የተጠናቀቁ",
+    "addQueues": "የአገልግሎት መደብ",
+    "queuedUsers": "በወረፋ ላይ ያሉ ተጠቃሚዎች",
+    "calledUsers": "የተጠሩ ተጠቃሚዎች",
+    "completedQueues": "የተጠናቀቁ ወረፋዎች",
+    "noQueuedUsers": "በወረፋ ላይ ያሉ ተጠቃሚዎች የሉም",
+    "noCalledUsers": "የተጠሩ ተጠቃሚዎች የሉም",
+    "noInServiceQueues": "በአገልግሎት ላይ ያሉ ወረፋዎች የሉም",
+    "noCompletedQueues": "የተጠናቀቁ ወረፋዎች የሉም",
+    "position": "ቦታ",
+    "customerName": "የደንበኛ ስም",
+    "customerNameAmharic": "የደንበኛ ስም (አማርኛ)",
+    "customerNameEnglish": "የደንበኛ ስም (እንግሊዝኛ)",
+    "phoneNumber": "ስልክ ቁጥር",
+    "service": "አገልግሎት",
+    "serviceCategoryLabel": "የአገልግሎት ምድብ",
+    "date": "ቀን",
+    "serviceDate": "የአገልግሎት ቀን",
+    "status": "ሁኔታ",
+    "action": "ተግባር",
+    "actions": "ተግባራት",
+    "filterByDate": "በቀን ያጣሩ",
+    "start": "ጀምር",
+    "end": "ጨርስ",
+    "queueNumber": "የወረፋ ቁጥር",
+    "loadingQueues": "ወረፋዎች በመጫን ላይ...",
+    "noActiveQueues": "ንቁ ወረፋዎች የሉም",
+    "noActiveQueuesMessage": "ሁሉም ንጹህ! ለዚህ አገልግሎት በአሁኑ ጊዜ ንቁ ወረፋዎች የሉም።",
+    "totalQueues": "ጠቅላላ ወረፋዎች",
+    "readyToServe": "ለማገልገል ዝግጁ",
+    "waiting": "በመጠባበቅ ላይ",
+    "back": "ተመለስ",
+    "realTimeMonitoring": "የሁሉም የአገልግሎት ወረፋዎች በቀጥታ ክትትል",
+    "createQueue": "ወረፋ ፍጠር",
+    "queueRegistration": "የወረፋ ምዝገባ",
+    "registerNewCustomer": "አዲስ ደንበኛ በወረፋ ውስጥ ይመዝግቡ",
+    "createdAt": "የተፈጠረበት",
+    "updatedAt": "የተሻሻለበት",
+    "queueList": "የወረፋ ዝርዝር",
+    "total": "ጠቅላላ",
+    "viewAndManageQueues": "ለተመረጠው ክፍል ሁሉንም ወረፋዎች ይመልከቱ እና ያስተዳድሩ",
+    "serviceCategories": "የአገልግሎት ምድቦች",
+    "viewAllCategories": "ሁሉንም የሚገኙ የአገልግሎት ምድቦች ይመልከቱ",
+    "services": "አገልግሎቶች",
+    "selectService": "ወረፋዎችን ለመጨመር አገልግሎት ይምረጡ",
+    "subServices": "ንዑስ አገልግሎቶች",
+    "addToQueue": "ወደ ወረፋ ጨምር",
+    "viewQueues": "ወረፋዎችን ይመልከቱ",
+    "viewSubServices": "ንዑስ አገልግሎቶችን ይመልከቱ",
+    "enterCustomerName": "የደንበኛ ስም ያስገቡ",
+    "enterCustomerNameAmharic": "የደንበኛ ስም",
+    "enterPhoneNumber": "09...",
+    "selectDate": "ቀን ይምረጡ",
+    "cancel": "ሰርዝ",
+    "queueCreatedSuccess": "ወረፋ በተሳካ ሁኔታ ተፈጥሯል!",
+    "queueCreatedError": "ወረፋ መፍጠር አልተሳካም",
+    "validationCustomerNameMin": "የደንበኛ ስም ቢያንስ 2 ፊደላት መሆን አለበት",
+    "validationCustomerNameMax": "የደንበኛ ስም ከ100 ፊደላት መብለጥ የለበትም",
+    "validationCustomerNameLetters": "የደንበኛ ስም ፊደላት ብቻ መያዝ አለበት",
+    "validationCustomerNameAmMin": "የደንበኛ ስም ቢያንስ 2 ፊደላት መሆን አለበት",
+    "validationCustomerNameAmMax": "የደንበኛ ስም ከ100 ፊደላት መብለጥ የለበትም",
+    "validationPhoneNumber": "እባክዎ ትክክለኛ የኢትዮጵያ ስልክ ቁጥር ያስገቡ (ለምሳሌ 0912345678)",
+    "validationDateRequired": "ቀን ያስፈልጋል",
+    "estimatedTime": "የሚገመተው ጊዜ",
+    "category": "ምድብ",
+    "noServicesAvailable": "ምንም አገልግሎቶች የሉም",
+    "noServicesMessage": "በዚህ ምድብ ውስጥ በአሁኑ ጊዜ ምንም አገልግሎቶች የሉም",
+    "noSubServicesAvailable": "ምንም ንዑስ አገልግሎቶች የሉም",
+    "noSubServicesMessage": "በዚህ አገልግሎት ስር በአሁኑ ጊዜ ምንም ንዑስ አገልግሎቶች የሉም",
+    "allQueues": "ሁሉም ወረፋዎች",
+    "totalRegistered": "ጠቅላላ የተመዘገቡ",
+    "noQueuesFound": "ምንም ወረፋዎች አልተገኙም",
+    "noQueuesMessage": "እስካሁን ምንም ወረፋዎች አልተመዘገቡም",
+    "phone": "ስልክ",
+    "refresh": "አድስ",
+    "loading": "የተጠሩ ተጠቃሚዎች በመጫን ላይ...",
+    "starting": "በመጀመር ላይ...",
+    "activeCallManagement": "የንቁ ጥሪ አስተዳደር",
+    "manageActiveQueues": "ንቁ የወረፋ ጥሪዎችን በቀጥታ ያስተዳድሩ እና ይከታተሉ",
+    "totalActive": "ጠቅላላ ንቁ",
+    "waitingTime": "የመጠባበቂያ ጊዜ",
+    "averageWaitTime": "አማካይ የመጠባበቂያ ጊዜ",
+    "currentlyServing": "አሁን በማገልገል ላይ",
+    "nextInLine": "በመስመር ቀጣይ",
+    "callNext": "ቀጣዩን ጥራ",
+    "skipQueue": "ወረፋ ዝለል",
+    "pauseQueue": "ወረፋ አቁም",
+    "resumeQueue": "ወረፋ ቀጥል",
+    "endService": "አገልግሎት ጨርስ",
+    "serviceTime": "የአገልግሎት ጊዜ",
+    "totalServed": "ዛሬ ጠቅላላ የተሰጡ",
+    "efficiency": "የአገልግሎት ቅልጥፍና",
+    "queueStats": "የወረፋ ስታቲስቲክስ",
+    "realTimeUpdates": "በቀጥታ ማሻሻያዎች",
+    "autoRefresh": "ራስ-ሰር አድስ",
+    "manualRefresh": "በእጅ አድስ",
+    "lastUpdated": "መጨረሻ የተሻሻለ",
+    "refreshInterval": "የማደሻ ክፍተት",
+    "seconds": "ሰከንዶች",
+    "minutes": "ደቂቃዎች",
+    "hours": "ሰዓቶች",
+    "timeAgo": "በፊት",
+    "justNow": "አሁን ብቻ",
+    "callInProgress": "ጥሪ በሂደት ላይ",
+    "waitingForService": "አገልግሎት በመጠባበቅ ላይ",
+    "serviceCompleted": "አገልግሎት ተጠናቅቋል",
+    "queuePaused": "ወረፋ ቆሟል",
+    "noActiveQueuesDesc": "ሁሉም ወረፋዎች አሁን ባዶ ወይም ቆመዋል",
+    "callNextCustomer": "ቀጣዩን ደንበኛ ጥራ",
+    "confirmEndService": "አገልግሎት መጨረስን ያረጋግጡ",
+    "endServiceConfirm": "የአሁኑን አገልግሎት መጨረስ እርግጠኛ ነዎት?",
+    "confirmSkipQueue": "ወረፋ መዝለልን ያረጋግጡ",
+    "skipQueueConfirm": "ይህን ደንበኛ መዝለል እርግጠኛ ነዎት?",
+    "serviceEnded": "አገልግሎት በተሳካ ሁኔታ ተጠናቅቋል",
+    "queueSkipped": "ደንበኛ በተሳካ ሁኔታ ተዘልሏል",
+    "callInitiated": "ጥሪ በተሳካ ሁኔታ ተጀመረ",
+    "errorEndingService": "አገልግሎት በማጠናቀቅ ላይ ስህተት",
+    "errorSkippingQueue": "ወረፋ በመዝለል ላይ ስህተት",
+    "errorCallingNext": "ቀጣዩን ደንበኛ በመጥራት ላይ ስህተት",
+    "processingRequest": "ጥያቄ በማስኬድ ላይ...",
+    "pleaseWait": "እባክዎ ይጠብቁ..."
+  },
+  "performanceManagement": {
+    "title": "የአፈጻጸም አስተዳደር",
+    "planManagement": "የእቅድ አስተዳደር",
+    "monitorPlans": "በድርጅትዎ ውስጥ የአፈጻጸም እቅዶችን ያስተዳድሩ እና ይከታተሉ",
+    "totalPlans": "ጠቅላላ እቅዶች",
+    "planName": "የእቅድ ስም",
+    "planNameAmharic": "የእቅድ ስም (አማርኛ)",
+    "planNameEnglish": "የእቅድ ስም (እንግሊዝኛ)",
+    "description": "መግለጫ",
+    "descriptionAmharic": "መግለጫ (አማርኛ)",
+    "descriptionEnglish": "መግለጫ (እንግሊዝኛ)",
+    "weight": "ክብደት",
+    "planType": "የእቅድ አይነት",
+    "actions": "ተግባራት",
+    "edit": "አስተካክል",
+    "delete": "ሰርዝ",
+    "createPlan": "እቅድ ፍጠር",
+    "exportAll": "ሁሉንም ወደ ውጭ ላክ",
+    "backToSectors": "ወደ ዘርፎች ተመለስ",
+    "backToPlanYears": "ወደ የእቅድ ዓመታት ተመለስ",
+    "refresh": "አድስ",
+    "confirmDeletion": "መሰረዝን ያረጋግጡ",
+    "deletePlanConfirm": "እቅዱን መሰረዝ እርግጠኛ ነዎት? ይህ ድርጊት መልሰው ማድረግ አይችሉም እና ሁሉም ተያያዥ መረጃዎች በቋሚነት ይወገዳሉ።",
+    "cancel": "ሰርዝ",
+    "deletePlan": "እቅድ ሰርዝ",
+    "deleting": "በመሰረዝ ላይ...",
+    "errorLoadingPlans": "እቅዶችን በመጫን ላይ ስህተት",
+    "failedToLoad": "የእቅድ መረጃ መጫን አልተሳካም። እባክዎ እንደገና ይሞክሩ።",
+    "tryAgain": "እንደገና ይሞክሩ",
+    "plans": "እቅዶች",
+    "editPlan": "እቅድ አስተካክል",
+    "updatePlanDetails": "የአፈጻጸም እቅድ ዝርዝሮችዎን ያዘምኑ",
+    "createNewPlan": "አዲስ እቅድ ፍጠር",
+    "setupNewPlan": "ለድርጅትዎ አዲስ የአፈጻጸም እቅድ ያዘጋጁ",
+    "editingMode": "የማስተካከያ ሁነታ",
+    "creationMode": "የመፍጠሪያ ሁነታ",
+    "updatePlan": "እቅድ አዘምን",
+    "modifyPlanDetails": "የእቅድ ዝርዝሮችን ከዚህ በታች ያስተካክሉ",
+    "newPerformancePlan": "አዲስ የአፈጻጸም እቅድ",
+    "fillDetailsToCreate": "አዲስ የአፈጻጸም እቅድ ለመፍጠር ዝርዝሮችን ይሙሉ",
+    "creatingSubPlan": "ንዑስ እቅድ መፍጠር",
+    "subPlanUnder": "ይህ እቅድ እንደ ንዑስ እቅድ ይፈጠራል በ",
+    "basicInformation": "መሰረታዊ መረጃ",
+    "nameAmharic": "ስም (አማርኛ)",
+    "nameEnglish": "ስም (እንግሊዝኛ)",
+    "organization": "ድርጅት",
+    "planYear": "የእቅድ ዓመት",
+    "timeFrame": "የጊዜ ገደብ",
+    "initialGoal": "የመጀመሪያ ግብ",
+    "expectedGoal": "የሚጠበቀው ግብ",
+    "planDetails": "የእቅድ ዝርዝሮች",
+    "parentPlan": "ወላጅ እቅድ",
+    "month": "ወር",
+    "week": "ሳምንት",
+    "day": "ቀን",
+    "quarter": "ሩብ",
+    "planYears": "የእቅድ ዓመታት",
+    "managePlanYears": "እቅዶችን በዓመት ያስተዳድሩ እና ያደራጁ",
+    "createPlanYear": "የእቅድ ዓመት ፍጠር",
+    "noPlanYears": "እስካሁን ምንም የእቅድ ዓመታት የሉም",
+    "getStartedPlanYear": "የመጀመሪያ የእቅድ ዓመትዎን በመፍጠር ይጀምሩ",
+    "year": "ዓመት",
+    "name": "ስም",
+    "deletePlanYearConfirm": "የእቅድ ዓመቱን መሰረዝ እርግጠኛ ነዎት? ይህ ድርጊት መልሰው ማድረግ አይችሉም እና ተያያዥ እቅዶችን ሊጎዳ ይችላል።",
+    "editPlanYear": "የእቅድ ዓመት አስተካክል",
+    "updatePlanYear": "የእቅድ ዓመት አዘምን",
+    "updatePlanYearInfo": "የእቅድ ዓመት መረጃ ያዘምኑ",
+    "createPlanYearInfo": "እቅዶችዎን ለማደራጀት አዲስ የእቅድ ዓመት ይፍጠሩ",
+    "enterYear": "ዓመት ያስገቡ (ለምሳሌ 2025)",
+    "enterAmharicName": "የአማርኛ ስም ያስገቡ",
+    "enterEnglishName": "የእንግሊዝኛ ስም ያስገቡ",
+    "enterAmharicDescription": "የአማርኛ መግለጫ ያስገቡ (አማራጭ)",
+    "enterEnglishDescription": "የእንግሊዝኛ መግለጫ ያስገቡ (አማራጭ)",
+    "services": "አገልግሎቶች",
+    "serviceManagement": "የአገልግሎት አስተዳደር",
+    "createService": "አገልግሎት ፍጠር",
+    "serviceName": "የአገልግሎት ስም",
+    "estimatedTime": "የሚገመተው ጊዜ",
+    "createdAt": "የተፈጠረበት",
+    "viewDetails": "ዝርዝሮችን ይመልከቱ",
+    "deleteServiceConfirm": "መሰረዝ እርግጠኛ ነዎት? ይህ ድርጊት መልሰው ማድረግ አይችሉም።",
+    "slug": "ስላግ",
+    "enterSlug": "ስላግ ያስገቡ",
+    "prefix": "ቅድመ ቅጥያ",
+    "enterPrefix": "ቅድመ ቅጥያ ያስገቡ",
+    "serviceCategoryField": "የአገልግሎት ምድብ",
+    "selectServiceCategory": "የአገልግሎት ምድብ ይምረጡ",
+    "parentService": "ወላጅ አገልግሎት (አማራጭ)",
+    "parentServiceOptional": "ወላጅ አገልግሎት (አማራጭ)",
+    "timeUnit": "የጊዜ አሃድ",
+    "enterEstimatedTime": "የሚገመተው ጊዜ ያስገቡ",
+    "updateService": "አገልግሎት አዘምን",
+    "workingHours": "የስራ ሰዓታት",
+    "workingHoursManagement": "የስራ ሰዓታት አስተዳደር",
+    "createWorkingHours": "የስራ ሰዓታት ፍጠር",
+    "weekDay": "የሳምንት ቀን",
+    "startTime": "የመጀመሪያ ሰዓት",
+    "endTime": "የመጨረሻ ሰዓት",
+    "positionServiceId": "የቦታ አገልግሎት መለያ",
+    "deleteWorkingHoursConfirm": "የስራ ሰዓታትን መሰረዝ እርግጠኛ ነዎት? ይህ ድርጊት መልሰው ማድረግ አይችሉም።",
+    "serviceCategories": "የአገልግሎት ምድቦች",
+    "deleteCategoryConfirm": "መሰረዝ እርግጠኛ ነዎት? ይህ ድርጊት መልሰው ማድረግ አይችሉም።",
+    "editServiceCategory": "የአገልግሎት ምድብ አስተካክል",
+    "updating": "በማዘመን ላይ...",
+    "update": "አዘምን"
+  },
+  "employeePlans": {
+    "title": "የእኔ የአፈጻጸም እቅዶች",
+    "description": "የግል የአፈጻጸም ግቦችዎን ያስተዳድሩ እና እድገትን በእውነተኛ ጊዜ ይከታተሉ",
+    "newPlan": "አዲስ እቅድ",
+    "allPlans": "ሁሉም እቅዶች",
+    "active": "ንቁ",
+    "completed": "የተጠናቀቀ",
+    "drafts": "ረቂቆች",
+    "totalPlans": "ጠቅላላ የእቅዶች ብዛት",
+    "avgProgress": "አማካይ እድገት",
+    "avgWeight": "አማካይ ክብደት",
+    "completionRate": "የማጠናቀቂያ መጠን",
+    "searchPlans": "እቅዶችን ፈልግ...",
+    "service": "አገልግሎት",
+    "allServices": "ሁሉም አገልግሎቶች",
+    "status": "ሁኔታ",
+    "allStatus": "ሁሉም ሁኔታዎች",
+    "draft": "ረቂቅ",
+    "pending": "በመጠባበቅ ላይ",
+    "accepted": "ተቀባይነት ያገኘ",
+    "rejected": "ውድቅ የተደረገ",
+    "timeframe": "የጊዜ ገደብ",
+    "allTimeframes": "ሁሉም የጊዜ ገደቦች",
+    "daily": "ዕለታዊ",
+    "weekly": "ሳምንታዊ",
+    "monthly": "ወርሃዊ",
+    "quarterly": "ሩብ ዓመታዊ",
+    "yearly": "ዓመታዊ",
+    "showCompleted": "የተጠናቀቁ እቅዶችን አሳይ",
+    "table": "ሰንጠረዥ",
+    "grid": "ፍርግርግ",
+    "planName": "የእቅድ ስም",
+    "serviceName": "የአገልግሎት ስም",
+    "progress": "እድገት",
+    "weight": "ክብደት",
+    "timeFrame": "የጊዜ ገደብ",
+    "statusLabel": "ሁኔታ",
+    "actions": "ድርጊቶች",
+    "viewDetails": "ዝርዝሮችን ይመልከቱ",
+    "edit": "አስተካክል",
+    "delete": "ሰርዝ",
+    "confirmDelete": "መሰረዝን አረጋግጥ",
+    "deleteConfirmMessage": "ይህን የሰራተኛ እቅድ መሰረዝ እርግጠኛ ነዎት? ይህ ድርጊት መልሰው ማድረግ አይችሉም።",
+    "cancel": "ሰርዝ",
+    "deletePlan": "እቅድ ሰርዝ",
+    "deleting": "በመሰረዝ ላይ...",
+    "createEmployeePlan": "የሰራተኛ እቅድ ፍጠር",
+    "editEmployeePlan": "የሰራተኛ እቅድ አስተካክል",
+    "updateEmployeePlan": "የሰራተኛ እቅድ አዘምን",
+    "assignPlanToEmployee": "ለሰራተኛ ከተወሰኑ ግቦች ጋር እቅድ ይመድቡ",
+    "updateEmployeePlanDetails": "የሰራተኛ እቅድ ምደባ እና ዝርዝሮችን ያዘምኑ",
+    "editingMode": "የማስተካከያ ሁነታ",
+    "creationMode": "የመፍጠሪያ ሁነታ",
+    "newEmployeePlanAssignment": "አዲስ የሰራተኛ እቅድ ምደባ",
+    "assignPlanWithTimeframe": "ለሰራተኛ ከተወሰነ የጊዜ ገደብ እና ግቦች ጋር እቅድ ይመድቡ",
+    "modifyPlanDetails": "ከዚህ በታች ያለውን የሰራተኛ እቅድ ዝርዝሮች ያስተካክሉ",
+    "creatingSubEmployeePlan": "ንዑስ የሰራተኛ እቅድ በመፍጠር ላይ",
+    "subPlanUnder": "ይህ የሰራተኛ እቅድ ከዚህ በታች ይፈጠራል",
+    "assignment": "ምደባ",
+    "employeePosition": "የሰራተኛ ቦታ",
+    "plan": "እቅድ",
+    "parentEmployeePlan": "ወላጅ የሰራተኛ እቅድ",
+    "planDetails": "የእቅድ ዝርዝሮች",
+    "planType": "የእቅድ አይነት",
+    "expectedQuantity": "የሚጠበቀው መጠን",
+    "timeframeContext": "የጊዜ ገደብ አውድ",
+    "quarter": "ሩብ",
+    "enterQuarter": "ሩብ ያስገቡ (1-4)",
+    "month": "ወር",
+    "enterMonth": "ወር ያስገቡ (1-12)",
+    "week": "ሳምንት",
+    "enterWeek": "ሳምንት ያስገቡ (1-52)",
+    "number": "ቁጥር",
+    "percentage": "መቶኛ",
+    "back": "ተመለስ",
+    "refresh": "አዘምን",
+    "exportStarted": "ወደ ውጭ መላክ ተጀምሯል",
+    "exportMessage": "እቅዶችዎ ወደ ውጭ እየተላኩ ነው። በቅርቡ የማውረጃ አገናኝ ይቀበላሉ።",
+    "bulkAction": "የጅምላ ድርጊት",
+    "bulkActionMessage": "በተመረጡ ንጥሎች ላይ ድርጊት ተከናውኗል።",
+    "errorLoadingPlans": "እቅዶችን በመጫን ላይ ስህተት",
+    "errorMessage": "የአፈጻጸም እቅዶችዎን በመጫን ላይ ስህተት አጋጥሞናል። እባክዎ ግንኙነትዎን ይፈትሹ እና እንደገና ይሞክሩ።",
+    "retry": "እንደገና ሞክር",
+    "backToDashboard": "ወደ ዳሽቦርድ ተመለስ",
+    "activePerformanceGoals": "ንቁ የአፈጻጸም ግቦች",
+    "averagePlanImportance": "አማካይ የእቅድ አስፈላጊነት",
+    "loadingPlans": "እቅዶች በመጫን ላይ...",
+    "loadingMessage": "መረጃዎን እያመጣን ስለሆነ እባክዎ ይጠብቁ",
+    "noPlansFound": "ምንም እቅዶች አልተገኙም",
+    "noPlansMessage": "ከአሁኑ ማጣሪያዎችዎ ጋር የሚዛመድ እቅድ የለም። የፍለጋ መስፈርቶችዎን ማስተካከል ይሞክሩ።",
+    "noPlansInitial": "እስካሁን ምንም የአፈጻጸም እቅዶች አልፈጠሩም። ግቦችዎን ለመከታተል የመጀመሪያ እቅድዎን በመፍጠር ይጀምሩ።",
+    "createFirstPlan": "የመጀመሪያ እቅድዎን ይፍጠሩ",
+    "clearFilters": "ማጣሪያዎችን አጽዳ",
+    "performancePlans": "የአፈጻጸም እቅዶች",
+    "sortedBy": "የተደረደረው በ",
+    "showing": "በማሳየት ላይ",
+    "of": "ከ",
+    "totalPlansText": "ጠቅላላ እቅዶች",
+    "planMonth": "የእቅድ ወር",
+    "created": "ተፈጥሯል",
+    "updated": "ተዘምኗል",
+    "endDate": "የመጨረሻ ቀን",
+    "editPlan": "እቅድ አስተካክል",
+    "deletePlanAction": "እቅድ ሰርዝ",
+    "exportAsCsv": "እንደ CSV ወደ ውጭ ላክ",
+    "exportAsPdf": "እንደ PDF ወደ ውጭ ላክ",
+    "exportAsExcel": "እንደ Excel ወደ ውጭ ላክ",
+    "export": "ወደ ውጭ ላክ",
+    "type": "አይነት",
+    "period": "ጊዜ",
+    "clickToViewDetails": "ዝርዝሮችን ለማየት ይጫኑ",
+    "refreshData": "መረጃ አዘምን",
+    "deletePerformancePlan": "የአፈጻጸም እቅድ ሰርዝ",
+    "deletePerformancePlanMessage": "ይህን የአፈጻጸም እቅድ መሰረዝ እርግጠኛ ነዎት? ይህ ድርጊት መልሰው ማድረግ አይችሉም እና ሁሉንም ተዛማጅ መረጃዎች በቋሚነት ያስወግዳል።",
+    "deleteSuccess": "የሰራተኛ እቅድ በተሳካ ሁኔታ ተሰርዟል",
+    "deleteFailed": "የሰራተኛ እቅድን መሰረዝ አልተሳካም",
+    "yearIdMissing": "የዓመት መለያ ጠፍቷል",
+    "navigationError": "የአሰሳ ስህተት",
+    "navigationErrorMessage": "ወደ እቅድ ዝርዝሮች መሄድ አልተቻለም",
+    "ofCompleted": "ከ",
+    "noPlansYet": "እስካሁን ምንም እቅዶች የሉም",
+    "getStarted": "የመጀመሪያውን የሰራተኛ እቅድዎን በመፍጠር ይጀምሩ",
+    "planUpdatedSuccess": "የሰራተኛ እቅድ በተሳካ ሁኔታ ተዘምኗል",
+    "planCreatedSuccess": "የሰራተኛ እቅድ በተሳካ ሁኔታ ተፈጥሯል",
+    "planDeleteSuccess": "የሰራተኛ እቅድ በተሳካ ሁኔታ ተሰርዟል",
+    "planUpdateFailed": "የሰራተኛ እቅድን ማዘመን አልተሳካም",
+    "planCreateFailed": "የሰራተኛ እቅድን መፍጠር አልተሳካም",
+    "planDeleteFailed": "የሰራተኛ እቅድን መሰረዝ አልተሳካም",
+    "noPlans": "ምንም እቅዶች የሉም",
+    "editDescription": "የዚህን የሰራተኛ አፈጻጸም እቅድ ዝርዝሮች ያዘምኑ",
+    "saving": "በማስቀመጥ ላይ...",
+    "updatePlanButton": "እቅድ አዘምን",
+    "planAssignments": {
+      "title": "የእቅድ ምደባዎች",
+      "description": "ለተመደቡ ሰራተኞች ወርሃዊ የአፈጻጸም ግቦችን ያስተዳድሩ",
+      "backToPlans": "ወደ እቅዶች ተመለስ",
+      "assignedEmployees": "የተመደቡ ሰራተኞች",
+      "totalPlanned": "ጠቅላላ ታቅዷል",
+      "planType": "የእቅድ አይነት",
+      "timeframe": "የጊዜ ገደብ",
+      "search": "ፈልግ",
+      "searchPlaceholder": "ሰራተኞችን ወይም አገልግሎቶችን ፈልግ...",
+      "service": "አገልግሎት",
+      "allServices": "ሁሉም አገልግሎቶች",
+      "noEmployeeAssignments": "ምንም የሰራተኛ ምደባዎች የሉም",
+      "noEmployeesAssigned": "ለዚህ እቅድ ምንም ሰራተኞች አልተመደቡም።",
+      "noEmployeesMatch": "ከፍለጋ መስፈርቶችዎ ጋር የሚዛመድ ሰራተኞች የሉም።",
+      "monthlyPerformanceTargets": "ወርሃዊ የአፈጻጸም ግቦች",
+      "clickToEdit": "ወርሃዊ ግቦችን ለማስተካከል ማንኛውንም ሕዋስ ይጫኑ። ሁሉንም ወሮች በአንድ ጊዜ ለማዘመን ጅምላ አርትዖት ይጠቀሙ።",
+      "employee": "ሰራተኛ",
+      "total": "ጠቅላላ",
+      "status": "ሁኔታ",
+      "actions": "ድርጊቶች",
+      "editAll": "ሁሉንም አስተካክል",
+      "save": "ቀምጥ",
+      "cancel": "ሰርዝ",
+      "number": "ቁጥር",
+      "percent": "መቶኛ",
+      "yearly": "ዓመታዊ",
+      "quarterly": "ሩብ ዓመታዊ",
+      "monthly": "ወርሃዊ",
+      "weekly": "ሳምንታዊ",
+      "daily": "ዕለታዊ",
+      "errorLoadingAssignments": "ምደባዎችን በመጫን ላይ ስህተት",
+      "failedToLoadAssignments": "ለዚህ እቅድ የሰራተኛ ምደባዎችን መጫን አልተሳካም። እባክዎ እንደገና ይሞክሩ።",
+      "retry": "እንደገና ሞክር",
+      "loadingAssignments": "የሰራተኛ ምደባዎችን በመጫን ላይ...",
+      "monthlyTargetUpdated": "ወርሃዊ ግብ {month} በተሳካ ሁኔታ ተዘምኗል",
+      "allMonthlyTargetsUpdated": "ሁሉም ወርሃዊ ግቦች በተሳካ ሁኔታ ተዘምኗል",
+      "failedToUpdateTarget": "ወርሃዊ ግብን ማዘመን አልተሳካም",
+      "failedToUpdateTargets": "ወርሃዊ ግቦችን ማዘመን አልተሳካም",
+      "noService": "ምንም አገልግሎት የለም",
+      "employees": "ሰራተኞች",
+      "targets": "ግቦች",
+      "quickSet": "ፈጣን ቅንብር",
+      "setAll": "ሁሉንም ያዘጋጁ",
+      "setHalf": "ግማሹን ያዘጋጁ",
+      "clearAll": "ሁሉንም አጽዳ",
+      "bulkEdit": "ጅምላ አርትዖት",
+      "hasPlanId": "የእቅድ መለያ አለበት",
+      "noPlanId": "ምንም የእቅድ መለያ የለም",
+      "removeAssignment": "ምደባ ያስወግዱ",
+      "months": {
+        "jul": "ሐምሌ",
+        "aug": "ነሐሴ",
+        "sep": "መስከረም",
+        "oct": "ጥቅምት",
+        "nov": "ኅዳር",
+        "dec": "ታኅሣሥ",
+        "jan": "ጥር",
+        "feb": "የካቲት",
+        "mar": "መጋቢት",
+        "apr": "ሚያዚያ",
+        "may": "ግንቦት",
+        "jun": "ሰኔ"
+      }
+    }
+  },
+  "planYear": {
+    "title": "የእቅድ ዓመታት",
+    "description": "እቅዶችን በዓመት ያስተዳድሩ እና ያደራጁ",
+    "createPlanYear": "የእቅድ ዓመት ፍጠር",
+    "editPlanYear": "የእቅድ ዓመት አስተካክል",
+    "updatePlanYear": "የእቅድ ዓመት አዘምን",
+    "noPlanYears": "እስካሁን ምንም የእቅድ ዓመታት የሉም",
+    "getStarted": "የመጀመሪያውን የእቅድ ዓመትዎን በመፍጠር ይጀምሩ",
+    "year": "ዓመት",
+    "nameAmharic": "ስም (አማርኛ)",
+    "nameEnglish": "ስም (እንግሊዝኛ)",
+    "descriptionAmharic": "መግለጫ (አማርኛ)",
+    "descriptionEnglish": "መግለጫ (እንግሊዝኛ)",
+    "enterYear": "ዓመት ያስገቡ (ለምሳሌ 2025)",
+    "enterAmharicName": "የአማርኛ ስም ያስገቡ",
+    "enterEnglishName": "የእንግሊዝኛ ስም ያስገቡ",
+    "enterAmharicDescription": "የአማርኛ መግለጫ ያስገቡ (አማራጭ)",
+    "enterEnglishDescription": "የእንግሊዝኛ መግለጫ ያስገቡ (አማራጭ)",
+    "updatePlanYearInfo": "የእቅድ ዓመት መረጃ ያዘምኑ",
+    "createPlanYearInfo": "እቅዶችዎን ለማደራጀት አዲስ የእቅድ ዓመት ይፍጠሩ",
+    "confirmDelete": "መሰረዝን አረጋግጥ",
+    "deleteConfirmMessage": "የእቅድ ዓመቱን መሰረዝ እርግጠኛ ነዎት? ይህ ድርጊት መልሰው ማድረግ አይችሉም እና ተዛማጅ እቅዶችን ሊጎዳ ይችላል።",
+    "cancel": "ሰርዝ",
+    "delete": "ሰርዝ",
+    "deleting": "በመሰረዝ ላይ...",
+    "success": "ተሳክቷል",
+    "planYearCreated": "የእቅድ ዓመት በተሳካ ሁኔታ ተፈጥሯል",
+    "planYearUpdated": "የእቅድ ዓመት በተሳካ ሁኔታ ተዘምኗል",
+    "planYearDeleted": "የእቅድ ዓመት በተሳካ ሁኔታ ተሰርዟል",
+    "error": "ስህተት",
+    "createFailed": "የእቅድ ዓመትን መፍጠር አልተሳካም",
+    "updateFailed": "የእቅድ ዓመትን ማዘመን አልተሳካም",
+    "deleteFailed": "የእቅድ ዓመትን መሰረዝ አልተሳካም",
+    "loadingError": "የእቅድ ዓመታትን በመጫን ላይ ስህተት",
+    "loadingErrorMessage": "የእቅድ ዓመታትን መጫን አልተሳካም። እባክዎ እንደገና ይሞክሩ።",
+    "retry": "እንደገና ሞክር"
+  },
+  "plans": {
+    "title": "እቅዶች",
+    "description": "የድርጅት አፈጻጸም እቅዶችን ያስተዳድሩ",
+    "createPlan": "እቅድ ፍጠር",
+    "createNewPlan": "አዲስ እቅድ ፍጠር",
+    "editPlan": "እቅድ አስተካክል",
+    "updatePlan": "እቅድ አዘምን",
+    "deletePlan": "እቅድ ሰርዝ",
+    "viewDetails": "ዝርዝሮችን ይመልከቱ",
+    "basicInformation": "መሰረታዊ መረጃ",
+    "organization": "ድርጅት",
+    "planDetails": "የእቅድ ዝርዝሮች",
+    "nameAmharic": "ስም (አማርኛ)",
+    "nameEnglish": "ስም (እንግሊዝኛ)",
+    "planNameAmharic": "የዕቅድ ስም አማርኛ",
+    "planNameEnglish": "የእቅድ ስም እንግሊዝኛ",
+    "descriptionAmharic": "መግለጫ (አማርኛ)",
+    "descriptionEnglish": "መግለጫ (እንግሊዝኛ)",
+    "describePlanAmharic": "ዕቅዱን በአማርኛ ይግለጹ...",
+    "describePlanEnglish": "ዕቅዱን በእንግሊዝኛ ይግለጹ...",
+    "planYear": "የእቅድ ዓመት",
+    "timeFrame": "የጊዜ ገደብ",
+    "enterTimeFrame": "የጊዜ ገደብ ያስገቡ",
+    "initialGoal": "የመጀመሪያ ግብ",
+    "expectedGoal": "የሚጠበቀው ግብ",
+    "enterExpectedGoal": "የሚጠበቀውን ግብ ያስገቡ",
+    "parentPlan": "ወላጅ እቅድ",
+    "weight": "ክብደት",
+    "enterWeight": "ክብደት ያስገቡ",
+    "month": "ወር",
+    "enterMonth": "ወር ያስገቡ",
+    "week": "ሳምንት",
+    "enterWeek": "ሳምንት ያስገቡ",
+    "day": "ቀን",
+    "enterDay": "ቀን ያስገቡ",
+    "quarter": "ሩብ",
+    "enterQuarter": "ሩብ ያስገቡ",
+    "planType": "የእቅድ አይነት",
+    "planUpdatedSuccess": "እቅድ በተሳካ ሁኔታ ተዘምኗል!",
+    "planUpdatedSuccessfully": "እቅድ በተሳካ ሁኔታ ተዘምኗል!",
+    "planCreatedSuccess": "እቅድ በተሳካ ሁኔታ ተፈጥሯል!",
+    "planCreatedSuccessfully": "እቅድ በተሳካ ሁኔታ ተፈጥሯል!",
+    "planUpdateFailed": "እቅድን ማዘመን አልተሳካም",
+    "failedToUpdatePlan": "እቅድን ማዘመን አልተሳካም",
+    "planCreateFailed": "እቅድን መፍጠር አልተሳካም",
+    "failedToCreatePlan": "እቅድን መፍጠር አልተሳካም",
+    "planDeleteSuccess": "እቅድ በተሳካ ሁኔታ ተሰርዟል",
+    "planDeleteFailed": "እቅድን መሰረዝ አልተሳካም",
+    "confirmDelete": "መሰረዝን አረጋግጥ",
+    "deleteConfirmMessage": "እቅዱን መሰረዝ እርግጠኛ ነዎት? ይህ ድርጊት መልሰው ማድረግ አይችሉም እና ሁሉም ተዛማጅ መረጃዎች በቋሚነት ይወገዳሉ።",
+    "cancel": "ሰርዝ",
+    "deleting": "በመሰረዝ ላይ...",
+    "back": "ተመለስ",
+    "refresh": "አዘምን",
+    "exportAll": "ሁሉንም ወደ ውጭ ላክ",
+    "errorLoadingPlans": "እቅዶችን በመጫን ላይ ስህተት",
+    "failedToLoad": "የእቅድ መረጃን መጫን አልተሳካም። እባክዎ እንደገና ይሞክሩ።",
+    "tryAgain": "እንደገና ሞክር",
+    "noPlansYet": "እስካሁን ምንም እቅዶች የሉም",
+    "getStarted": "የመጀመሪያውን እቅድዎን በመፍጠር ይጀምሩ",
+    "editingMode": "የማስተካከያ ሁነታ",
+    "creationMode": "የመፍጠሪያ ሁነታ",
+    "newPerformancePlan": "አዲስ የአፈጻጸም እቅድ",
+    "updatePlanDetails": "የአፈጻጸም እቅድ ዝርዝሮችዎን ያዘምኑ",
+    "setupNewPlan": "ለድርጅትዎ አዲስ የአፈጻጸም እቅድ ያዘጋጁ",
+    "creatingSubPlan": "ንዑስ እቅድ በመፍጠር ላይ",
+    "subPlanDescription": "ይህ እቅድ እንደ ንዑስ እቅድ ከዚህ በታች ይፈጠራል:",
+    "subPlanUnder": "ይህ እቅድ እንደ ንዑስ እቅድ ከዚህ በታች ይፈጠራል",
+    "planAlreadyAccepted": "እቅድ ቀድሞ ተቀባይነት ያገኘ",
+    "cannotEditAcceptedPlan": "ይህ እቅድ ቀድሞ ተቀባይነት ያገኘ ስለሆነ ማስተካከል አይችሉም። ለውጦች ማድረግ ከፈለጉ እባክዎ ከአስተዳዳሪዎ ጋር ይገናኙ።",
+    "quarters": {
+      "q1": "ሩብ 1",
+      "q2": "ሩብ 2",
+      "q3": "ሩብ 3",
+      "q4": "ሩብ 4"
+    },
+    "createDoc": {
+      "title": "ሰነድ ፍጠር",
+      "description": "ለአዲሱ ሰነድዎ ዓይነት እና ስም ይምረጡ።",
+      "validation": {
+        "enRequired": "የእንግሊዝኛ ስም ያስፈልጋል",
+        "invalid": "የተሳሳተ ግብዓት"
+      },
+      "fields": {
+        "en": "የእንግሊዝኛ ስም",
+        "am": "የአማርኛ ስም",
+        "slug": "ስሉግ",
+        "type": "የሰነድ ዓይነት"
+      },
+      "placeholders": {
+        "en": "ምሳሌ: የፕሮጀክት እቅድ",
+        "am": "ምሳሌ: የፕሮጀክት እቅድ",
+        "slugAuto": "ከእንግሊዝኛ ስም በቀጥታ የሚፈጠር",
+        "name": "የሰነዱን ስም ያስገቡ"
+      },
+      "labels": {
+        "type": "የሰነድ ዓይነት",
+        "recent": "የቅርብ ጊዜ",
+        "favorites": "ተመራጮች",
+        "tags": "መለያዎች",
+        "permissions": "ፈቃዶች",
+        "quickLinks": "ፈጣን ሊንኮች",
+        "word": "ወርድ",
+        "excel": "ኤክሴል",
+        "powerpoint": "ፓወር ፖይንት"
+      },
+      "actions": {
+        "cancel": "ተመለስ",
+        "create": "ፍጠር",
+        "creating": "በመፍጠር ላይ..."
+      },
+      "messages": {
+        "success": "ሰነዱ በተሳካ ሁኔታ ተፈጥሯል",
+        "error": "ሰነዱን መፍጠር አልተቻለም"
+      }
+    },
+    "months": {
+      "july": "ሐምሌ",
+      "august": "ነሐሴ",
+      "september": "መስከረም",
+      "october": "ጥቅምት",
+      "november": "ሕዳር",
+      "december": "ታህሳስ",
+      "january": "ጥር",
+      "february": "የካቲት",
+      "march": "መጋቢት",
+      "april": "ሚያዚያ",
+      "may": "ግንቦት",
+      "june": "ሰኔ"
+    },
+    "weeks": {
+      "week1": "ሳምንት 1",
+      "week2": "ሳምንት 2",
+      "week3": "ሳምንት 3",
+      "week4": "ሳምንት 4"
+    },
+    "days": {
+      "monday": "ሰኞ",
+      "tuesday": "ማክሰኞ",
+      "wednesday": "ሮብ",
+      "thursday": "ሐሙስ",
+      "friday": "ዓርብ",
+      "saturday": "ቅዳሜ",
+      "sunday": "እሁድ"
+    },
+    "Quarterly": "ሩብ አመት",
+    "Yearly": "አመታዊ",
+    "Monthly": "ወርሃዊ",
+    "Weekly": "ሳምንታዊ",
+    "Daily": "እለታዊ",
+    "Number": "በቁጥር",
+    "Percent": "በፐርሰንት",
+    "Boolean": ""
+  },
+  "activeCallManagement": {
+    "title": "የንቁ ጥሪ አስተዳደር",
+    "description": "የንቁ የደንበኛ ጥሪዎችን እና የአገልግሎት አፈጻጸምን በእውነተኛ ጊዜ ያስተዳድሩ",
+    "serviceCounter": "የአገልግሎት ቆጣሪ",
+    "window": "መስኮት",
+    "status": "ሁኔታ",
+    "active": "ንቁ",
+    "ready": "ዝግጁ",
+    "quickActions": "ፈጣን ድርጊቶች",
+    "commonOperations": "የተለመዱ የደንበኛ ስራዎች",
+    "callNextCustomer": "ቀጣይ ደንበኛ ይጥሩ",
+    "calling": "በመደወል ላይ...",
+    "hold": "ያዙ",
+    "transfer": "ማስተላለፍ",
+    "customerStats": "የደንበኛ ስታቲስቲክስ",
+    "currentService": "የአሁኑ አገልግሎት",
+    "waitTime": "የመጠበቂያ ጊዜ",
+    "serviceTime": "የአገልግሎት ጊዜ",
+    "priority": "ቅድሚያ",
+    "readyToServe": "ለማገልገል ዝግጁ",
+    "noActiveCustomer": "በአሁኑ ጊዜ ንቁ ደንበኛ የለም። አገልግሎትን ለመጀመር ቀጣዩን ደንበኛ ከወረፋው ይጥሩ።",
+    "customerCalled": "ደንበኛ ተደውሏል",
+    "waitingAtCounter": "ደንበኛ በቆጣሪው በመጠበቅ ላይ",
+    "currentlyServing": "በአሁኑ ጊዜ በማገልገል ላይ",
+    "assistingCustomer": "ደንበኛን በመርዳት ላይ",
+    "called": "ተደውሏል",
+    "serving": "በማገልገል ላይ",
+    "customer": "ደንበኛ",
+    "ticket": "ትኬት",
+    "phoneNumber": "ስልክ ቁጥር",
+    "serviceCategoryQueue": "የአገልግሎት ምድብ",
+    "calledAt": "የተደወለበት",
+    "urgentPriority": "አስቸኳይ ቅድሚያ",
+    "highPriority": "ከፍተኛ ቅድሚያ",
+    "serviceInformation": "የአገልግሎት መረጃ",
+    "currentServiceDetails": "የአሁኑ የአገልግሎት ዝርዝሮች እና ዝርዝሮች",
+    "service": "አገልግሎት",
+    "currentlyServingLabel": "በአሁኑ ጊዜ በማገልገል ላይ",
+    "serviceType": "የአገልግሎት አይነት",
+    "estimatedTime": "የሚገመተው ጊዜ",
+    "counter": "ቆጣሪ",
+    "inProgress": "በሂደት ላይ",
+    "waiting": "በመጠበቅ ላይ",
+    "serviceStarted": "አገልግሎት ተጀምሯል",
+    "customerNotes": "የደንበኛ ማስታወሻዎች",
+    "timeElapsed": "ያለፈው ጊዜ",
+    "target": "ግብ",
+    "exceedingEstimatedTime": "⚠️ የሚገመተውን ጊዜ በማለፍ ላይ ለ",
+    "assisting": "በመርዳት ላይ",
+    "waitingAtCounterLabel": "በቆጣሪው በመጠበቅ ላይ",
+    "ticketCalled": "ትኬት ተደውሏል",
+    "ticketCalledMessage": "ወደ ቆጣሪው ተደውሏል",
+    "callFailed": "ጥሪ አልተሳካም",
+    "callFailedMessage": "ቀጣዩን ትኬት መደወል አልተሳካም",
+    "notSpecified": "አልተገለጸም",
+    "minutes": "ደቂቃዎች",
+    "back": "ተመለስ",
+    "category": "ምድብ",
+    "normal": "መደበኛ",
+    "urgent": "አስቸኳይ",
+    "high": "ከፍተኛ",
+    "low": "ዝቅተኛ",
+    "customerWaitTime": "የደንበኛ መጠበቂያ ጊዜ",
+    "default": "ነባሪ",
+    "serviceCategoryCounter": "የአገልግሎት ምድብ",
+    "autoRefresh": "ራስ-ሰር አድስ",
+    "manualRefresh": "በእጅ አድስ",
+    "lastUpdated": "መጨረሻ የተሻሻለ",
+    "disableAutoRefresh": "ራስ-ሰር አድሳሽን አቁም",
+    "enableAutoRefresh": "ራስ-ሰር አድሳሽን አንቃ",
+    "refresh": "አድስ",
+    "realTimeMetrics": "በቀጥታ መለኪያዎች",
+    "waitingCustomers": "በመጠባበቅ ላይ ያሉ ደንበኞች",
+    "realTimeUpdates": "በቀጥታ ማሻሻያዎች",
+    "justNow": "አሁን ብቻ",
+    "timeAgo": "በፊት",
+    "hours": "ሰዓቶች",
+    "overdue": "ጊዜው አልፏል"
+  },
+  "planTable": {
+    "plan": "እቅድ",
+    "plans": "እቅዶች",
+    "currentYear": "የአሁኑ ዓመት:",
+    "total": "ጠቅላላ",
+    "position": "የስራ ክፍል",
+    "title": "የእቅድ አስተዳደር",
+    "description": "የድርጅት እቅዶችን ይመልከቱ እና ያስተዳድሩ",
+    "planName": "የእቅድ ስም",
+    "planType": "የእቅድ አይነት",
+    "weight": "ክብደት",
+    "timeframe": "የጊዜ ገደብ",
+    "status": "ሁኔታ",
+    "actions": "ድርጊቶች",
+    "createPlan": "እቅድ ፍጠር",
+    "editPlan": "እቅድ አስተካክል",
+    "deletePlan": "እቅድ ሰርዝ",
+    "viewDetails": "ዝርዝሮችን ይመልከቱ",
+    "exportAll": "ሁሉንም ወደ ውጭ ላክ",
+    "refresh": "አዘምን",
+    "noPlans": "ምንም እቅዶች የሉም",
+    "loadingPlans": "እቅዶች በመጫን ላይ...",
+    "confirmDelete": "መሰረዝን አረጋግጥ",
+    "deleteConfirmMessage": "ይህን እቅድ መሰረዝ እርግጠኛ ነዎት? ይህ ድርጊት መልሰው ማድረግ አይችሉም።",
+    "planDeleted": "እቅድ በተሳካ ሁኔታ ተሰርዟል",
+    "deleteFailed": "እቅድን መሰረዝ አልተሳካም",
+    "totalPlans": "ጠቅላላ እቅዶች",
+    "activePlans": "ንቁ እቅዶች",
+    "completedPlans": "የተጠናቀቁ እቅዶች",
+    "draftPlans": "ረቂቅ እቅዶች",
+    "viewDetailsTooltip": "ዝርዝሮችን ይመልከቱ",
+    "editTooltip": "አስተካክል",
+    "deleteTooltip": "ሰርዝ",
+    "success": "ተሳክቷል",
+    "error": "ስህተት",
+    "planDeletedSuccessfully": "እቅድ በተሳካ ሁኔታ ተሰርዟል",
+    "failedToDeletePlan": "እቅድን መሰረዝ አልተሳካም",
+    "exportStarted": "ወደ ውጭ መላክ ተጀምሯል",
+    "preparingPlansData": "የእቅዶች መረጃ ለወደ ውጭ መላክ በዝግጅት ላይ...",
+    "confirmDeletion": "መሰረዝን አረጋግጥ",
+    "deleteConfirmationMessage": "እቅዱን መሰረዝ እርግጠኛ ነዎት",
+    "deleteConfirmationWarning": "? ይህ ድርጊት መልሰው ማድረግ አይችሉም እና ሁሉም ተዛማጅ መረጃዎች በቋሚነት ይወገዳሉ።",
+    "cancel": "ሰርዝ",
+    "deleting": "በመሰረዝ ላይ...",
+    "deletePlanButton": "እቅድ ሰርዝ",
+    "backToPlanYears": "ወደ እቅድ ዓመታት ተመለስ",
+    "tryAgain": "እንደገና ሞክር",
+    "planManagement": "የእቅድ አስተዳደር",
+    "planManagementDescription": "በድርጅትዎ ውስጥ የአፈጻጸም እቅዶችን ያስተዳድሩ እና ይከታተሉ",
+    "planFor": "እቅድ ለ",
+    "noDescription": "ምንም መግለጫ የለም",
+    "confirmRequestApproval": "የፍቃድ ጥያቄን አረጋግጥ",
+    "requestApprovalMessage": "ለእቅዱ ፍቃድ መጠየቅ እርግጠኛ ነዎት",
+    "requestApprovalWarning": "? ይህ ድርጊት መልሰው ማድረግ አይችሉም እና ሁሉም ተዛማጅ መረጃዎች በቋሚነት ለፍቃድ ይላካሉ።",
+    "requestApprovalTooltip": "ፍቃድ ጠይቅ",
+    "requestApprovalButton": "ፍቃድ ጠይቅ",
+    "totalPlansLabel": "ጠቅላላ እቅዶች",
+    "performancePlansTable": "የአፈጻጸም እቅዶች",
+    "allPlansWeightTooltip": "ሁሉም እቅዶች ጠቅላላ 100% ክብደት ✓ ለፍቃድ ዝግጁ",
+    "year": "አመት",
+    "parentInformation": "የወላጅ እቅድ መረጃ",
+    "parentPlan": "የወላጅ እቅድ",
+    "planInformation": "የእቅድ መረጃ",
+    "myPlans": "የእኔ እቅዶች",
+    "myPlansTable": "የእኔ እቅዶች",
+    "back": "ወደ ኋላ"
+  },
+  "departmentListView": {
+    "title": "የክፍል አጠቃላይ እይታ",
+    "description": "በክፍሎች ውስጥ አፈጻጸምን ያስተዳድሩ እና ይከታተሉ",
+    "departments": "ክፍሎች",
+    "department": "ክፍል",
+    "directors": "ዳይሬክተሮች",
+    "director": "ዳይሬክተር",
+    "teamLeaders": "የቡድን መሪዎች",
+    "teamLeader": "የቡድን መሪ",
+    "employees": "ሰራተኞች",
+    "employee": "ሰራተኛ",
+    "viewDetails": "ዝርዝሮችን ይመልከቱ",
+    "managePlans": "እቅዶችን አስተዳድር",
+    "performance": "አፈጻጸም",
+    "totalMembers": "ጠቅላላ አባላት",
+    "activePlans": "ንቁ እቅዶች",
+    "completionRate": "የማጠናቀቂያ መጠን",
+    "noData": "ምንም መረጃ የለም",
+    "loading": "ክፍሎች በመጫን ላይ...",
+    "searchDepartments": "ክፍሎችን ፈልግ...",
+    "filterByStatus": "በሁኔታ ማጣሪያ",
+    "allStatuses": "ሁሉም ሁኔታዎች",
+    "gridView": "የግሪድ እይታ",
+    "listView": "የዝርዝር እይታ",
+    "exportData": "መረጃ ወደ ውጭ ላክ",
+    "refreshData": "መረጃ አዘምን",
+    "back": "ወደ ኋላ",
+    "goBack": "ወደ ኋላ ሂድ",
+    "errorLoading": "በመጫን ላይ ስህተት",
+    "failedToLoad": "መጫን አልተሳካም",
+    "active": "ንቁ",
+    "export": "ወደ ውጭ ላክ",
+    "viewSettings": "የእይታ ቅንብሮች",
+    "notificationSettings": "የማሳወቂያ ቅንብሮች",
+    "helpSupport": "እርዳታ እና ድጋፍ",
+    "total": "ጠቅላላ",
+    "acrossAllCategories": "በሁሉም ምድቦች ላይ",
+    "totalSubPlansCreated": "ጠቅላላ ንዑስ እቅዶች ተፈጥረዋል",
+    "avgPerformance": "አማካይ አፈጻጸም",
+    "averageWeightAcrossAll": "በሁሉም ላይ አማካይ ክብደት",
+    "completionRateDesc": "ከእቅዶች ጋር",
+    "view": "ይመልከቱ",
+    "sort": "ደርድር",
+    "name": "ስም",
+    "weight": "ክብደት",
+    "plans": "እቅዶች",
+    "rank": "ደረጃ",
+    "noPlansBadge": "ምንም እቅድ የለም",
+    "activeBadge": "ንቁ",
+    "partialBadge": "ከፊል",
+    "progress": "እድገት",
+    "newPlan": "አዲስ እቅድ",
+    "updatedRecently": "በቅርቡ ተዘምኗል",
+    "viewDetailsAction": "ዝርዝሮችን ይመልከቱ",
+    "managePermissions": "ፈቃዶችን አስተዳድር",
+    "viewReports": "ሪፖርቶችን ይመልከቱ",
+    "archive": "ማህደር",
+    "status": "ሁኔታ",
+    "actions": "ድርጊቶች",
+    "all": "ሁሉም",
+    "teams": "ቡድኖች",
+    "mine": "የእኔ",
+    "noResultsFound": "ምንም ውጤት አልተገኘም",
+    "noResultsDesc": "ከእርስዎ ፍለጋ ጋር የሚዛመድ",
+    "tryDifferentSearch": "የተለየ የፍለጋ ቃል ይሞክሩ",
+    "clearSearch": "ፍለጋን አጽዳ",
+    "confirmRequestApproval": "የማጽደቅ ጥያቄን አረጋግጥ",
+    "requestApprovalDesc": "ለእቅዱ ማጽደቅ መጠየቅ እንደሚፈልጉ እርግጠኛ ነዎት፣ ይህ ድርጊት መልሰው ሊያደርጉት አይችሉም እና ሁሉም ተዛማጅ መረጃዎች በቋሚነት ለማጽደቅ ይላካሉ።",
+    "cancel": "ሰርዝ",
+    "requestApproval": "ማጽደቅ ጠይቅ",
+    "approvalRequesting": "ማጽደቅ በመጠየቅ ላይ...",
+    "allPlansTotal100": "ሁሉም እቅዶች ጠቅላላ 100% ክብደት ✓ ለማጽደቅ ዝግጁ",
+    "approvalRequirementsNotMet": "የማጽደቅ መስፈርቶች አልተሟሉም",
+    "totalWeightMust100": "ጠቅላላ ክብደት 100% መሆን አለበት",
+    "current": "አሁን",
+    "allDepartmentsMustHavePlans": "ሁሉም ክፍሎች ቢያንስ 1 እቅድ ሊኖራቸው ይገባል",
+    "allPlansMustBeActive": "ሁሉም እቅዶች ንቁ መሆን አለባቸው",
+    "completeAllRequirements": "ሁሉንም መስፈርቶች ይፈጽሙ",
+    "manageAccess": "መዳረሻን አስተዳድር",
+    "myDepartment": "የእኔ ክፍል",
+    "online": "በመስመር ላይ"
+  },
+  "subPlanListView": {
+    "departmentOverview": "የክፍል አጠቃላይ እይታ",
+    "departmentDescription": "በክፍሎች ውስጥ አፈጻጸምን ያስተዳድሩ እና ይከታተሉ",
+    "directorOverview": "የዳይሬክተር አጠቃላይ እይታ",
+    "directorDescription": "በዳይሬክተሮች ላይ አፈጻጸምን ያስተዳድሩ እና ይከታተሉ",
+    "teamLeaderOverview": "የቡድን መሪ አጠቃላይ እይታ",
+    "teamLeaderDescription": "በቡድን መሪዎች ላይ አፈጻጸምን ያስተዳድሩ እና ይከታተሉ",
+    "employeeOverview": "የሰራተኛ አጠቃላይ እይታ",
+    "employeeDescription": "በሰራተኞች ላይ አፈጻጸምን ያስተዳድሩ እና ይከታተሉ",
+    "department": "ክፍል",
+    "departments": "ክፍሎች",
+    "director": "ዳይሬክተር",
+    "directors": "ዳይሬክተሮች",
+    "teamLeader": "የቡድን መሪ",
+    "teamLeaders": "የቡድን መሪዎች",
+    "employee": "ሰራተኛ",
+    "employees": "ሰራተኞች",
+    "back": "ወደ ኋላ",
+    "errorLoading": "በመጫን ላይ ስህተት",
+    "failedToLoad": "መጫን አልተሳካም",
+    "goBack": "ወደ ኋላ ሂድ",
+    "noAvailable": "ምንም {type} የለም",
+    "noSubPlansToDisplay": "ለዚህ እቅድ የሚታዩ {type}/ንዑስ እቅዶች የሉም።",
+    "active": "ንቁ",
+    "totalPlans": "ጠቅላላ እቅዶች",
+    "avgWeight": "አማካይ ክብደት",
+    "viewPlans": "እቅዶችን ይመልከቱ",
+    "createPlan": "እቅድ ፍጠር",
+    "online": "በመስመር ላይ"
+  },
+  "planForm": {
+    "title": "የእቅድ ቅጽ",
+    "createPlan": "አዲስ እቅድ ፍጠር",
+    "editPlan": "እቅድ አስተካክል",
+    "updatePlan": "እቅድ አዘምን",
+    "basicInformation": "መሰረታዊ መረጃ",
+    "planDetails": "የእቅድ ዝርዝሮች",
+    "nameAmharic": "ስም (አማርኛ)",
+    "nameEnglish": "ስም (እንግሊዝኛ)",
+    "descriptionAmharic": "መግለጫ (አማርኛ)",
+    "descriptionEnglish": "መግለጫ (እንግሊዝኛ)",
+    "planType": "የእቅድ አይነት",
+    "planYear": "የእቅድ ዓመት",
+    "timeframe": "የጊዜ ገደብ",
+    "initialGoal": "የመጀመሪያ ግብ",
+    "expectedGoal": "የሚጠበቀው ግብ",
+    "weight": "ክብደት",
+    "parentPlan": "ወላጅ እቅድ",
+    "position": "ቦታ",
+    "quarter": "ሩብ",
+    "month": "ወር",
+    "week": "ሳምንት",
+    "day": "ቀን",
+    "selectPlanYear": "የእቅድ ዓመት ይምረጡ",
+    "selectPosition": "ቦታ ይምረጡ",
+    "selectTimeframe": "የጊዜ ገደብ ይምረጡ",
+    "enterNameAmharic": "በአማርኛ ስም ያስገቡ",
+    "enterNameEnglish": "በእንግሊዝኛ ስም ያስገቡ",
+    "enterDescriptionAmharic": "በአማርኛ መግለጫ ያስገቡ",
+    "enterDescriptionEnglish": "በእንግሊዝኛ መግለጫ ያስገቡ",
+    "enterInitialGoal": "የመጀመሪያ ግብ ያስገቡ",
+    "enterExpectedGoal": "የሚጠበቀውን ግብ ያስገቡ",
+    "enterWeight": "ክብደት ያስገቡ (0-100)",
+    "save": "መዝግብ",
+    "cancel": "ሰርዝ",
+    "saving": "በማስቀመጥ ላይ...",
+    "planCreated": "እቅድ በተሳካ ሁኔታ ተፈጥሯል",
+    "planUpdated": "እቅድ በተሳካ ሁኔታ ተዘምኗል",
+    "createFailed": "እቅድን መፍጠር አልተሳካም",
+    "updateFailed": "እቅድን ማዘመን አልተሳካም",
+    "requiredField": "ይህ መስክ ያስፈልጋል",
+    "invalidWeight": "ክብደት ከ0 እስከ 100 መሆን አለበት",
+    "creatingSubPlan": "ንዑስ እቅድ በመፍጠር ላይ",
+    "subPlanUnder": "ይህ እቅድ እንደ ንዑስ እቅድ ከዚህ በታች ይፈጠራል",
+    "editingMode": "የማስተካከያ ሁነታ",
+    "creationMode": "የመፍጠሪያ ሁነታ"
+  },
+  "teamMemberManagement": {
+    "title": "የቡድን አባል አስተዳደር",
+    "description": "የቡድን አባላትን እና ምደባዎቻቸውን ያስተዳድሩ",
+    "teams": "ቡድኖች",
+    "teamName": "የቡድን ስም",
+    "teamLeader": "የቡድን መሪ",
+    "nameAmharic": "ስም (አማርኛ)",
+    "nameEnglish": "ስም (እንግሊዝኛ)",
+    "descriptionAmharic": "መግለጫ (አማርኛ)",
+    "descriptionEnglish": "መግለጫ (እንግሊዝኛ)",
+    "members": "አባላት",
+    "status": "ሁኔታ",
+    "actions": "ድርጊቶች",
+    "createTeam": "ቡድን ፍጠር",
+    "editTeam": "ቡድን አስተካክል",
+    "deleteTeam": "ቡድን ሰርዝ",
+    "addMember": "አባል ጨምር",
+    "removeMember": "አባል አስወግድ",
+    "viewMembers": "አባላትን ይመልከቱ",
+    "teamDetails": "የቡድን ዝርዝሮች",
+    "memberDetails": "የአባል ዝርዝሮች",
+    "selectTeamLeader": "የቡድን መሪ ይምረጡ",
+    "selectMembers": "አባላትን ይምረጡ",
+    "teamCreated": "ቡድን በተሳካ ሁኔታ ተፈጥሯል",
+    "teamUpdated": "ቡድን በተሳካ ሁኔታ ተዘምኗል",
+    "teamDeleted": "ቡድን በተሳካ ሁኔታ ተሰርዟል",
+    "memberAdded": "አባል በተሳካ ሁኔታ ተጨምሯል",
+    "memberRemoved": "አባል በተሳካ ሁኔታ ተወግዷል",
+    "createFailed": "ቡድንን መፍጠር አልተሳካም",
+    "updateFailed": "ቡድንን ማዘመን አልተሳካም",
+    "deleteFailed": "ቡድንን መሰረዝ አልተሳካም",
+    "noTeams": "ምንም ቡድኖች የሉም",
+    "noMembers": "በዚህ ቡድን ውስጥ ምንም አባላት የሉም",
+    "loadingTeams": "ቡድኖች በመጫን ላይ...",
+    "loadingMembers": "አባላት በመጫን ላይ...",
+    "searchTeams": "ቡድኖችን ፈልግ...",
+    "filterByStatus": "በሁኔታ ማጣሪያ",
+    "allStatuses": "ሁሉም ሁኔታዎች",
+    "active": "ንቁ",
+    "inactive": "ንቁ ያልሆነ",
+    "archived": "የተቀመጠ",
+    "totalTeams": "ጠቅላላ ቡድኖች",
+    "activeTeams": "ንቁ ቡድኖች",
+    "totalMembers": "ጠቅላላ አባላት",
+    "averagePerformance": "አማካይ አፈጻጸም",
+    "confirmDelete": "መሰረዝን አረጋግጥ",
+    "deleteConfirmMessage": "ይህን ቡድን መሰረዝ እርግጠኛ ነዎት? ይህ ድርጊት መልሰው ማድረግ አይችሉም።",
+    "selectValidLeader": "እባክዎ ትክክለኛ የቡድን መሪ ይምረጡ",
+    "selectTeamMember": "እባክዎ የቡድን አባል ይምረጡ",
+    "tableView": "ሰንጠረዥ",
+    "gridView": "የግሪድ እይታ",
+    "sortBy": "በዚህ ደርድር",
+    "name": "ስም",
+    "performance": "አፈጻጸም",
+    "date": "ቀን",
+    "ascending": "እየጨመረ",
+    "descending": "እየቀነሰ",
+    "showArchived": "የተቀመጡትን አሳይ",
+    "refresh": "አዘምን",
+    "export": "ወደ ውጭ ላክ",
+    "unknownMember": "ያልታወቀ አባል",
+    "membersRemovedSuccessfully": "የቡድን አባላት በተሳካ ሁኔታ ተወግደዋል",
+    "activePerformanceTeams": "ንቁ የአፈጻጸም ቡድኖች",
+    "currentlyActive": "በአሁኑ ጊዜ ንቁ",
+    "cancel": "ሰርዝ",
+    "createPlan": "እቅድ ፍጠር",
+    "updatePlan": "እቅድ አዘምን",
+    "planDetails": "የእቅድ ዝርዝሮች",
+    "planForm": "የእቅድ ቅጽ",
+    "planCreated": "እቅድ በተሳካ ሁኔታ ተፈጥሯል",
+    "planUpdated": "እቅድ በተሳካ ሁኔታ ተዘምኗል",
+    "createPlanTitle": "አዲስ የአፈጻጸም ቡድን ፍጠር",
+    "editPlanTitle": "የቡድን መረጃ አዘምን",
+    "planName": "የእቅድ ስም",
+    "planDescription": "የእቅድ መግለጫ",
+    "selectPlan": "እቅድ ይምረጡ",
+    "noPlanSelected": "ምንም እቅድ አልተመረጠም",
+    "planRequired": "እቅድ ያስፈልጋል",
+    "enterPlanName": "የእቅድ ስም ያስገቡ",
+    "enterPlanDescription": "የእቅድ መግለጫ ያስገቡ",
+    "planNameRequired": "የእቅድ ስም ያስፈልጋል",
+    "planDescriptionRequired": "የእቅድ መግለጫ ያስፈልጋል",
+    "savePlan": "እቅድ አስቀምጥ",
+    "savingPlan": "እቅድ በማስቀመጥ ላይ...",
+    "planSaved": "እቅድ በተሳካ ሁኔታ ተቀመጠ",
+    "planSaveFailed": "እቅድን ማስቀመጥ አልተሳካም",
+    "discardChanges": "ለውጦችን ሰርዝ",
+    "unsavedChanges": "ያልተቀመጡ ለውጦች አሉዎት። መሰረዝ እርግጠኛ ነዎት?",
+    "confirmCancel": "መሰረዝን አረጋግጥ",
+    "manageTeamMembers": "የቡድን አባላትን አስተዳድር",
+    "currentTeamMembers": "አሁን ያሉ የቡድን አባላት",
+    "addNewTeamMember": "አዲስ የቡድን አባል ጨምር",
+    "addMembers": "አባላት ጨምር",
+    "viewDetails": "ዝርዝሮች ይመልከቱ",
+    "noMembersAdded": "እስካሁን ምንም የቡድን አባላት አልተጨመሩም",
+    "addMembersInstruction": "ከዚህ በታች ባለው ቅጽ አባላትን ይጨምሩ",
+    "performanceTeams": "የአፈጻጸም ቡድኖች",
+    "createFirstTeam": "የመጀመሪያ ቡድንዎን ይፍጠሩ",
+    "teamMember": "የቡድን አባል",
+    "teamMembers": "የቡድን አባላት"
+  },
+  "serviceCategory": {
+    "title": "የአገልግሎት ምድቦች",
+    "description": "መግለጫ",
+    "createNew": "አዲስ ምድብ ይፍጠሩ",
+    "createTitle": "የአገልግሎት ምድብ ይፍጠሩ",
+    "createDescription": "አገልግሎቶችዎን ለማደራጀት አዲስ የአገልግሎት ምድብ ያክሉ",
+    "editTitle": "የአገልግሎት ምድብ ያስተካክሉ",
+    "editDescription": "የአገልግሎት ምድብ መረጃን ያዘምኑ",
+    "loading": "የአገልግሎት ምድቦች በመጫን ላይ...",
+    "slug": "የምድብ መለያ",
+    "slugPlaceholder": "ለምሳሌ፣ customer-support",
+    "slugDescription": "ለምድቡ ልዩ መለያ (ትናንሽ ፊደላት፣ ቁጥሮች እና ሰረዞች ብቻ)",
+    "slugRequired": "የምድብ መለያ ያስፈልጋል",
+    "slugFormat": "መለያው ትናንሽ ፊደላት፣ ቁጥሮች እና ሰረዞች ብቻ መያዝ አለበት",
+    "nameEn": "ስም (እንግሊዝኛ)",
+    "nameEnPlaceholder": "የምድብ ስም በእንግሊዝኛ ያስገቡ",
+    "nameEnRequired": "እንግሊዝኛ ስም ያስፈልጋል",
+    "nameAm": "ስም (አማርኛ)",
+    "nameAmPlaceholder": "የምድብ ስም በአማርኛ ያስገቡ",
+    "nameAmRequired": "አማርኛ ስም ያስፈልጋል",
+    "descriptionEn": "መግለጫ (እንግሊዝኛ)",
+    "descriptionEnPlaceholder": "የምድብ መግለጫ በእንግሊዝኛ ያስገቡ",
+    "descriptionEnRequired": "እንግሊዝኛ መግለጫ ያስፈልጋል",
+    "descriptionAm": "መግለጫ (አማርኛ)",
+    "descriptionAmPlaceholder": "የምድብ መግለጫ በአማርኛ ያስገቡ",
+    "descriptionAmRequired": "አማርኛ መግለጫ ያስፈልጋል",
+    "name": "ስም",
+    "createdAt": "የተፈጠረበት ቀን",
+    "totalCategories": "ጠቅላላ ምድቦች",
+    "activeCategories": "ንቁ ምድቦች",
+    "searchResults": "የፍለጋ ውጤቶች",
+    "searchAndFilter": "ፍለጋ እና ማጣሪያ",
+    "searchPlaceholder": "በስም፣ መለያ ወይም መግለጫ ይፈልጉ...",
+    "categoriesList": "የምድቦች ዝርዝር",
+    "noCategories": "ምንም ምድቦች አልተገኙም",
+    "noSearchResults": "ምንም የፍለጋ ውጤት የለም",
+    "tryDifferentSearch": "የተለየ የፍለጋ ቃል ይሞክሩ",
+    "createFirstCategory": "ለመጀመር የመጀመሪያ የአገልግሎት ምድብዎን ይፍጠሩ",
+    "deleteTitle": "የአገልግሎት ምድብ ሰርዝ",
+    "deleteConfirmation": "'{{name}}'ን መሰረዝ እርግጠኛ ነዎት? ይህ ድርጊት መልሰው ማድረግ አይችሉም።",
+    "createCategory": "ምድብ ይፍጠሩ",
+    "updateCategory": "ምድብ ያዘምኑ",
+    "createSuccess": "የአገልግሎት ምድብ በተሳካ ሁኔታ ተፈጥሯል",
+    "updateSuccess": "የአገልግሎት ምድብ በተሳካ ሁኔታ ተዘምኗል",
+    "createError": "የአገልግሎት ምድብ መፍጠር አልተሳካም",
+    "updateError": "የአገልግሎት ምድብ ማዘመን አልተሳካም",
+    "deleteSuccess": "ተሰርዟል",
+    "deleteSuccessMessage": "የአገልግሎት ምድብ በተሳካ ሁኔታ ተሰርዟል",
+    "deleteError": "የአገልግሎት ምድብ መሰረዝ አልተሳካም",
+    "loadError": "የአገልግሎት ምድቦችን መጫን አልተሳካም",
+    "organizationRequired": "የድርጅት መለያ ያስፈልጋል",
+    "validation": {
+      "nameEnRequired": "እንግሊዝኛ ስም ያስፈልጋል",
+      "nameAmRequired": "አማርኛ ስም ያስፈልጋል",
+      "nameMaxLength": "ስም ከ100 ቁምፊዎች ወይም ያነሰ መሆን አለበት",
+      "descriptionEnRequired": "እንግሊዝኛ መግለጫ ያስፈልጋል",
+      "descriptionAmRequired": "አማርኛ መግለጫ ያስፈልጋል",
+      "descriptionMaxLength": "መግለጫ ከ500 ቁምፊዎች ወይም ያነሰ መሆን አለበት"
+    }
+  },
+  "services": {
+    "title": "የአገልግሎት አስተዳደር",
+    "serviceName": "የአገልግሎት ስም",
+    "description": "መግለጫ",
+    "estimatedTime": "የሚገመተው ጊዜ",
+    "createdAt": "የተፈጠረበት ቀን",
+    "viewDetails": "ዝርዝር ይመልከቱ",
+    "createService": "አገልግሎት ይፍጠሩ",
+    "exportAll": "ሁሉንም አውርድ",
+    "exporting": "በማውረድ ላይ",
+    "preparingData": "የአገልግሎት መረጃ በማዘጋጀት ላይ...",
+    "loadError": "አገልግሎቶችን መጫን አልተሳካም",
+    "deleteTitle": "መሰረዝን ያረጋግጡ",
+    "deleteConfirmation": "\"{{name}}\"ን መሰረዝ እርግጠኛ ነዎት? ይህ ድርጊት መልሰው ማድረግ አይችሉም።",
+    "deleteSuccess": "ተሰርዟል",
+    "deleteSuccessMessage": "አገልግሎት በተሳካ ሁኔታ ተሰርዟል",
+    "deleteError": "አገልግሎት መሰረዝ አልተሳካም",
+    "slug": "መለያ",
+    "enterSlug": "መለያ ያስገቡ",
+    "prefix": "ቅድመ ቅጥያ",
+    "enterPrefix": "ቅድመ ቅጥያ ያስገቡ",
+    "serviceCategoryField": "የአገልግሎት ምድብ",
+    "selectServiceCategory": "የአገልግሎት ምድብ ይምረጡ",
+    "parentService": "ወላጅ አገልግሎት (አማራጭ)",
+    "parentServiceOptional": "ወላጅ አገልግሎት (አማራጭ)",
+    "nameAm": "ስም (አማርኛ)",
+    "nameAmPlaceholder": "አማርኛ ስም ያስገቡ",
+    "nameEn": "ስም (እንግሊዝኛ)",
+    "nameEnPlaceholder": "እንግሊዝኛ ስም ያስገቡ",
+    "descriptionAm": "መግለጫ (አማርኛ)",
+    "descriptionAmPlaceholder": "አማርኛ መግለጫ ያስገቡ",
+    "descriptionEn": "መግለጫ (እንግሊዝኛ)",
+    "descriptionEnPlaceholder": "እንግሊዝኛ መግለጫ ያስገቡ",
+    "enterEstimatedTime": "የሚገመተው ጊዜ ያስገቡ",
+    "timeUnit": "የጊዜ አሃድ",
+    "updateService": "አገልግሎት አዘምን",
+    "editTitle": "አገልግሎት አስተካክል",
+    "editDescription": "የአገልግሎት መረጃን ያዘምኑ",
+    "createTitle": "አገልግሎት ይፍጠሩ",
+    "createDescription": "ለድርጅትዎ አዲስ አገልግሎት ያክሉ",
+    "updateSuccess": "አገልግሎት በተሳካ ሁኔታ ተዘምኗል",
+    "createSuccess": "አገልግሎት በተሳካ ሁኔታ ተፈጥሯል",
+    "updateError": "አገልግሎት ማዘመን አልተሳካም",
+    "createError": "አገልግሎት መፍጠር አልተሳካም",
+    "basicInformation": "መሰረታዊ መረጃ",
+    "serviceDetails": "የአገልግሎት ዝርዝሮች",
+    "timeConfiguration": "የጊዜ ማዋቀሪያ",
+    "timeUnits": {
+      "minutes": "ደቂቃዎች",
+      "hours": "ሰዓታት",
+      "days": "ቀናት",
+      "weeks": "ሳምንታት",
+      "months": "ወራት"
+    },
+    "validation": {
+      "nameAmRequired": "አማርኛ ስም ያስፈልጋል",
+      "nameEnRequired": "እንግሊዝኛ ስም ያስፈልጋል",
+      "nameMaxLength": "ስም ከ100 ቁምፊዎች ወይም ያነሰ መሆን አለበት",
+      "descriptionAmRequired": "አማርኛ መግለጫ ያስፈልጋል",
+      "descriptionEnRequired": "እንግሊዝኛ መግለጫ ያስፈልጋል",
+      "descriptionMaxLength": "መግለጫ ከ500 ቁምፊዎች ወይም ያነሰ መሆን አለበት",
+      "organizationRequired": "ድርጅት ያስፈልጋል",
+      "categoryRequired": "የአገልግሎት ምድብ ያስፈልጋል",
+      "estimatedTimeMin": "የሚገመተው ጊዜ ቢያንስ 1 መሆን አለበት",
+      "estimatedTimeMax": "የሚገመተው ጊዜ ከ1440 ደቂቃዎች (24 ሰዓታት) ሊበልጥ አይችልም"
+    }
+  },
+  "planYearList": {
+    "title": "የእቅድ ዓመታት",
+    "description": "እቅዶችን በዓመት ያስተዳድሩ እና ያደራጁ",
+    "createPlanYear": "የእቅድ ዓመት ይፍጠሩ",
+    "noPlanYears": "ገና የእቅድ ዓመታት የሉም",
+    "getStarted": "የመጀመሪያ የእቅድ ዓመትዎን በመፍጠር ይጀምሩ",
+    "confirmDeletion": "መሰረዝን ያረጋግጡ",
+    "deleteConfirmation": "የእቅድ ዓመት \"{{year}} - {{name}}\"ን መሰረዝ እርግጠኛ ነዎት? ይህ ድርጊት መልሰው ማድረግ አይችሉም እና ተዛማጅ እቅዶችን ሊጎዳ ይችላል።",
+    "deleting": "በመሰረዝ ላይ...",
+    "delete": "ሰርዝ",
+    "edit": "አስተካክል",
+    "active": "ንቁ",
+    "viewPlans": "እቅዶችን ይመልከቱ"
+  },
+  "performanceDashboard": {
+    "title": "የአፈጻጸም አስተዳደር ዳሽቦርድ",
+    "description": "ሁሉንም አቀፍ የአፈጻጸም ትንታኔ እና ግንዛቤዎች"
+  },
+  "okrDashboard": {
+    "brandEyebrow": "የግብ ትንታኔ",
+    "title": "የOKR አፈጻጸም ዳሽቦርድ",
+    "description": "የከፍተኛ አፈጻጸም፣ የክፍል እንቅስቃሴ እና የሚመጡ OKR ትንታኔዎች የተጠናከረ እይታ።",
+    "planYear": "የእቅድ ዓመት",
+    "notSelected": "አልተመረጠም",
+    "topPerformerEmployee": "ከፍተኛ አፈጻጸም ያለው ሰራተኛ",
+    "topPerformerDepartment": "ከፍተኛ አፈጻጸም ያለው ክፍል",
+    "employeePlaceholderName": "የAPI ውሂብ በመጠበቅ ላይ",
+    "departmentPlaceholderName": "የAPI ውሂብ በመጠበቅ ላይ",
+    "employeeHelper": "የዳሽቦርድ API ሲገናኝ መሪው ሰራተኛ እዚህ ይታያል።",
+    "departmentHelper": "የዳሽቦርድ API ሲገናኝ ከፍተኛ አፈጻጸም ያለው ክፍል እዚህ ይታያል።",
+    "employeeScore": "የሰራተኛ ውጤት",
+    "departmentScore": "የክፍል ውጤት",
+    "placeholderOneTitle": "ስትራቴጂያዊ ምልክት",
+    "placeholderOneHelper": "ከትንታኔ API ለሚመጣው ቀጣይ OKR ግንዛቤ ተዘጋጅቷል።",
+    "placeholderTwoTitle": "የአፈጻጸም ጤና",
+    "placeholderTwoHelper": "ለስርጭት፣ አደጋ ወይም የማጠናቀቅ ግንዛቤ ተዘጋጅቷል።",
+    "comingSoon": "በቅርቡ",
+    "waitingForApi": "API በመጠበቅ ላይ",
+    "analyticsTitle": "የOKR ትንታኔ",
+    "analyticsDescription": "የዳሽቦርድ ምስልን ለማየት የቀን ክልል እና የግራፍ አይነት ይምረጡ።",
+    "dateRange": "የቀን ክልል",
+    "chartType": "የግራፍ አይነት",
+    "thisMonth": "ይህ ወር",
+    "thisQuarter": "ይህ ሩብ ዓመት",
+    "thisYear": "ይህ ዓመት",
+    "customRange": "ብጁ ክልል",
+    "barChart": "የአሞሌ ግራፍ",
+    "lineChart": "የመስመር ግራፍ",
+    "areaChart": "የአካባቢ ግራፍ",
+    "chartTitle": "የአፈጻጸም አዝማሚያ",
+    "chartSubtitle": "የAPI ምላሽ እስኪዘጋጅ ድረስ የናሙና ውሂብ ይታያል።",
+    "sampleData": "የናሙና ውሂብ",
+    "achievement": "ስኬት",
+    "target": "ግብ",
+    "total": "ጠቅላላ",
+    "noProgressData": "የእድገት ውሂብ አልተገኘም",
+    "expected": "የሚጠበቅ",
+    "current": "ወቅታዊ",
+    "noMonthlyProgress": "ወርሃዊ እድገት አልተገኘም",
+    "reportFilters": "የሪፖርት ማጣሪያዎች",
+    "reportFiltersCollapsedDescription": "በጊዜ ክልል፣ በዓመት፣ በሥራ መደብ ወይም በሠራተኛ መለኪያዎች ለመመርመር ማጣሪያዎቹን ይጠቀሙ።",
+    "filters": "ማጣሪያዎች",
+    "positionId": "የሥራ መደብ መለያ",
+    "positionIdPlaceholder": "positionId",
+    "employeePositionId": "የሠራተኛ ሥራ መደብ መለያ",
+    "employeePositionIdPlaceholder": "employeePositionId",
+    "employeeId": "የሠራተኛ መለያ",
+    "employeeIdPlaceholder": "employeeId",
+    "timeframe": "የጊዜ ክልል",
+    "selectTimeframe": "የጊዜ ክልል ይምረጡ",
+    "year": "ዓመት",
+    "yearPlaceholder": "ዓመት",
+    "month": "ወር",
+    "monthPlaceholder": "ወር",
+    "week": "ሳምንት",
+    "weekPlaceholder": "ሳምንት",
+    "monthlyDetailProgress": "የዝርዝር ተግባር ወርሃዊ እድገት",
+    "monthlyDetailProgressDescription": "የቅርብ ጊዜ ወርሃዊ እድገት በተግባር እና በሥራ መደብ",
+    "currentWeightSum": "ወቅታዊ ክብደት",
+    "currentWeightSumHelper": "ሪፖርት የተደረገው ጠቅላላ ወቅታዊ ክብደት",
+    "goalCount": "ግቦች",
+    "goalCountHelper": "በዚህ የዕቅድ ዓመት ያሉ ጠቅላላ ግቦች",
+    "majorTaskCount": "ዋና ተግባራት",
+    "majorTaskCountHelper": "ከግቦች ጋር የተገናኙ ዋና ተግባራት",
+    "detailTaskCount": "ዝርዝር ተግባራት",
+    "detailTaskCountHelper": "በዚህ የዕቅድ ዓመት የተመደቡ ዝርዝር ተግባራት",
+    "goalProgress": "የግብ እድገት",
+    "goalProgressDescription": "በወቅታዊ እድገት ከፍተኛ የሆኑ ግቦች",
+    "progress": "እድገት",
+    "noGoalsFound": "ምንም ግብ አልተገኘም",
+    "majorTaskProgress": "የዋና ተግባር እድገት",
+    "majorTaskProgressDescription": "ዋና ተግባራት እና ሪፖርት የተደረገው እድገታቸው",
+    "noMajorTaskProgress": "የዋና ተግባር እድገት አልተገኘም",
+    "positionProgress": "የሥራ መደብ እድገት",
+    "positionProgressDescription": "በወቅታዊ እድገት ከፍተኛ የሆኑ የሥራ መደቦች",
+    "noPositionProgress": "የሥራ መደብ እድገት አልተገኘም",
+    "monthlyProgress": "ወርሃዊ እድገት",
+    "monthlyProgressDescription": "በየወሩ የሚጠበቁ እና ወቅታዊ ዋጋዎች",
+    "goals": "ግቦች",
+    "goalsDescription": "በሪፖርቱ ውስጥ የተካተቱ ግቦች",
+    "weight": "ክብደት",
+    "majorTasks": "ዋና ተግባራት",
+    "achievementTotal": "ጠቅላላ ስኬት",
+    "achievementTotalHelper": "ለተግባሮችዎ ሪፖርት የተደረገው ጠቅላላ ስኬት",
+    "detailTaskStatusProgress": "የዝርዝር ተግባር ሁኔታ እድገት",
+    "detailTaskStatusProgressDescription": "የዝርዝር ተግባር ድምሮች በሁኔታ ተመድበው",
+    "detailTaskProgress": "የዝርዝር ተግባር እድገት",
+    "detailTaskProgressDescription": "ዝርዝር ተግባራት እና ሪፖርት የተደረገው እድገታቸው",
+    "noDetailTasksFound": "ምንም ዝርዝር ተግባር አልተገኘም",
+    "progressOnMonths": "የወራት እድገት",
+    "progressOnMonthsDescription": "በየወሩ የሚጠበቀው ከወቅታዊው ጋር",
+    "currentWeight": "ወቅታዊ ክብደት",
+    "overallAchievement": "አጠቃላይ ስኬት",
+    "overallAchievementHelper": "ሪፖርት የተደረጉ የግብ ስኬቶች ድምር",
+    "employeeCount": "ሠራተኞች",
+    "employeeCountHelper": "በዝርዝር ተግባራት የሚሳተፉ ሠራተኞች",
+    "overallGoalProgress": "አጠቃላይ የግብ እድገት",
+    "overallGoalProgressDescription": "የግብ ድምሮች በሁኔታ ተመድበው",
+    "teamProgress": "የቡድን እድገት",
+    "teamProgressDescription": "የቡድን እድገት በሥራ መደብ",
+    "noTeamProgress": "የቡድን እድገት አልተገኘም",
+    "employeeProgress": "የሠራተኛ እድገት",
+    "employeeProgressDescription": "የወቅቱ የዕቅድ ዓመት ክብደት በሠራተኛ",
+    "noEmployeeProgress": "የሠራተኛ እድገት አልተገኘም",
+    "exportPdfSuccess": "ዳሽቦርዱ ወደ PDF ተልኳል።",
+    "exportPdfFailed": "ዳሽቦርዱን ወደ PDF መላክ አልተሳካም።",
+    "printFailed": "ዳሽቦርዱን ማተም አልተሳካም።",
+    "overallProgress": "አጠቃላይ እድገት",
+    "overallProgressHelper": "የዝርዝር ተግባራት አማካይ እድገት",
+    "noPlanYear": "ዳሽቦርዱን ለማየት የዕቅድ ዓመት ይምረጡ።",
+    "positionVariantPending": "የዳሽቦርድ ዓይነት በመጠባበቅ ላይ ነው",
+    "positionVariantPendingDescription": "ለዚህ የሥራ መደብ ዓይነት የOKR ዳሽቦርድ መገናኛ ገና አልተዘጋጀም።",
+    "teamLeadDashboard": "የቡድን መሪ ዳሽቦርድ",
+    "employeeDashboard": "የሠራተኛ ዳሽቦርድ",
+    "directorDashboard": "የዳይሬክተር ዳሽቦርድ",
+    "deputyDashboard": "የምክትል ዳሽቦርድ",
+    "teamLeadDescription": "ለተመረጠው የዕቅድ ዓመት የዝርዝር ተግባር እድገት፣ የሠራተኛ አስተዋፅዖ እና የሪፖርት አዝማሚያዎች።",
+    "employeeDescription": "ለተመረጠው የዕቅድ ዓመት የዝርዝር ተግባርዎ ሁኔታ፣ ጠቅላላ ስኬት እና ወርሃዊ እድገት።",
+    "loadError": "የዳሽቦርድ ውሂብን መጫን አልተቻለም።"
+  },
+  "sectorListView": {
+    "title": "የዘርፍ አጠቃላይ እይታ",
+    "description": "በሁሉም ዘርፎች አፈጻጸምን ያስተዳድሩ እና ይከታተሉ",
+    "noSectorsAvailable": "ምንም ዘርፎች አይገኙም",
+    "noSectorsMessage": "በዚህ ጊዜ ለማሳየት ዘርፎች የሉም። ዘርፎች ወደ ሲስተሙ ከተጨመሩ በኋላ እዚህ ይታያሉ።",
+    "sectorsActive": "ዘርፎች ንቁ",
+    "sector": "ዘርፍ",
+    "sectors": "ዘርፎች",
+    "totalPlans": "ጠቅላላ እቅዶች",
+    "avgWeight": "አማካይ ክብደት",
+    "activeSectors": "ንቁ ዘርፎች",
+    "plans": "እቅዶች",
+    "weight": "ክብደት",
+    "active": "ንቁ",
+    "online": "በመስመር ላይ",
+    "performanceSummary": "የአፈጻጸም ማጠቃለያ",
+    "performanceSummaryDescription": "ሁሉም ዘርፎች በንቃት ይከታተላሉ እና በእውነተኛ ጊዜ ይዘመናሉ",
+    "onTrack": "በትክክለኛ መንገድ ላይ",
+    "needsAttention": "ትኩረት ያስፈልጋል",
+    "atRisk": "በአደጋ ላይ"
+  },
+  "goals": {
+    "title": "ግቦች አስተዳደር",
+    "createGoal": "ግብ ፍጠር",
+    "editGoal": "ግብ አስተካክል",
+    "updateGoal": "ግብ አዘምን",
+    "goalCreated": "ግብ በተሳካ ሁኔታ ተፈጠረ",
+    "goalUpdated": "ግብ በተሳካ ሁኔታ ተዘምኗል",
+    "goalDeleted": "ግብ በተሳካ ሁኔታ ተሰርዟል",
+    "deleteFailed": "ግብ ማስወገድ አልተሳካም",
+    "saveFailed": "ግብ ማስቀመጥ አልተሳካም",
+    "confirmDelete": "ማስወገድ አረጋግጥ",
+    "deleteConfirmation": "እርግጠኛ ነዎት ይህን ግብ ማስወገድ ይፈልጋሉ? ይህ ድርጊት መመለስ አይችልም።",
+    "deleteWarning": "ሁሉም ተያያዥ ውሂብ ለዘላለም ይወገዳል።",
+    "noGoals": "ምንም ግቦች አልተገኙም",
+    "noGoalsFound": "ምንም ግቦች አልተገኙም",
+    "getStarted": "መጀመሪያ ግብዎን በመፍጠር ይጀምሩ",
+    "createFirstGoal": "የመጀመሪያ ግብ ፍጠር",
+    "noResultsWithFilters": "ከተመረጡት ማጣሪያዎች ጋር ምንም ግቦች አልተገኙም",
+    "totalGoals": "ጠቅላላ ግቦች",
+    "totalWeight": "ጠቅላላ ክብደት",
+    "uniquePositions": "ልዩ ቦታዎች",
+    "all": "ሁሉም",
+    "positions": "ቦታዎች",
+    "nameAmharic": "ስም (አማርኛ)",
+    "nameEnglish": "ስም (እንግሊዝኛ)",
+    "descriptionAmharic": "መግለጫ (አማርኛ)",
+    "descriptionEnglish": "መግለጫ (እንግሊዝኛ)",
+    "enterNameAmharic": "ግብ ስም በአማርኛ ያስገቡ",
+    "enterNameEnglish": "ግብ ስም በእንግሊዝኛ ያስገቡ",
+    "enterDescriptionAmharic": "መግለጫ በአማርኛ ያስገቡ",
+    "enterDescriptionEnglish": "መግለጫ በእንግሊዝኛ ያስገቡ",
+    "planYear": "የታቀደ ዓመት",
+    "selectPosition": "ቦታ ይምረጡ",
+    "weight": "ክብደት",
+    "weightDescription": "ለዚህ ግብ የክብደት መቶኛ (0-100)",
+    "searchPlaceholder": "ግቦችን በስም ወይም መግለጫ ፈልግ...",
+    "filterByPosition": "በቦታ ማጣሪያ",
+    "allPositions": "ሁሉም ቦታዎች",
+    "formDescription": "ግቦችን ይግለጹ እና አፈጻጸምን ለመከታተል ክብደቶችን ይመድቡ",
+    "success": "ተሳክቷል",
+    "position": "ቦታ",
+    "ownerPosition": "የባለቤት ቦታ",
+    "weightPercentage": "ክብደት (%)",
+    "actions": "ድርጊቶች",
+    "view": "ይመልከቱ",
+    "edit": "አስተካክል",
+    "delete": "ሰርዝ",
+    "goalDetails": "የግብ ዝርዝሮች",
+    "name": "ግብ ስም",
+    "description": "መግለጫ",
+    "owner": "ባለቤት",
+    "goalNotFound": "ግብ አልተገኘም",
+    "Totalweight": "ጠቅላላ ክብደት",
+    "Remaining": "ቀሪ ክብደት",
+    "noDescription": "ምንም መግለጫ አልተሰጠም",
+    "hasMajorTasks": "ይህ ግብ {{count}} ዋና ተግባር(ዎች) ጋር ተያያዥ ነው",
+    "weightRange": "0-100"
+  },
+  "majorTask": {
+    "participants": "ተሳታፊዎች",
+    "manageParticipants": "ተሳታፊዎችን አስተዳድር",
+    "addParticipant": "ተሳታፊ ጨምር",
+    "editParticipant": "ተሳታፊ አርትዕ",
+    "updateParticipant": "ተሳታፊ አዘምን",
+    "participantCreated": "ተሳታፊ በተሳካ ሁኔታ ጨመረ",
+    "participantUpdated": "ተሳታፊ በተሳካ ሁኔታ ተዘምኗል",
+    "participantDeleted": "ተሳታፊ በተሳካ ሁኔታ ተሰርዟል",
+    "participantDeleteFailed": "ተሳታፊ ማስወገድ አልተሳካም",
+    "participantSaveFailed": "ተሳታፊ ማስቀመጥ አልተሳካም",
+    "confirmDeleteParticipant": "ተሳታፊ አስወግድ",
+    "participantDeleteConfirmation": "እርግጠኛ ነህ ይህን ተሳታፊ ከተግባሩ ማስወገድ ትፈልጋለህ?",
+    "filterByGoal": "በግብ መፈለግ",
+    "search": "ፈልግ",
+    "employee": "ሰራተኛ",
+    "position": "የስራ መደብ",
+    "selectEmployee": "ሰራተኛ ይምረጡ",
+    "selectGoal": "ግብ ይምረጡ",
+    "selectPosition": "የስራ መደብ ይምረጡ",
+    "availableWeight": "የተገኘ ክብደት",
+    "weightExceedsAvailable": "ክብደቱ ከሚገኝ ድርሻ በላይ ነው",
+    "maxAvailable": "ከፍተኛ የሚገኝ",
+    "entered": "የገባ",
+    "participantRoleDescription": "በዚህ ተግባር ውስጥ የተሳታፊውን ሚና ይግለጹ",
+    "participantFormDescription": "ሰራተኛን በተወሰነ የክብደት ድርሻ ለዚህ ተግባር መድብ",
+    "noParticipants": "ምንም ተሳታፊዎች የሉም",
+    "noParticipantsFound": "ከአሁኑ ማጣሪያዎች ጋር የሚዛመዱ ተሳታፊዎች የሉም",
+    "addFirstParticipant": "መጀመሪያ ተሳታፊ ጨምር",
+    "searchParticipants": "ተሳታፊዎችን ፈልግ...",
+    "taskWeight": "የተግባር ክብደት",
+    "allocatedWeight": "የተከፋፈለ ክብደት",
+    "overAllocatedWarning": "ማስጠንቀቂያ: አጠቃላይ የተሳታፊዎች ክብደት 100% አልፏል",
+    "remainingWeight": "የቀረ ክብደት",
+    "participantWeight": "የተሳታፊ ክብደት",
+    "details": "ዝርዝሮች",
+    "taskDetails": "የተግባር ዝርዝሮች",
+    "title": "ዋና ተግባራት",
+    "createMajorTask": "ዋና ተግባር ፍጠር",
+    "editMajorTask": "ዋና ተግባር አርትዕ",
+    "updateMajorTask": "ዋና ተግባር አዘምን",
+    "majorTaskCreated": "ዋና ተግባር በተሳካ ሁኔታ ተፈጥሯል",
+    "majorTaskUpdated": "ዋና ተግባር በተሳካ ሁኔታ ተዘምኗል",
+    "majorTaskDeleted": "ዋና ተግባር በተሳካ ሁኔታ ተሰርዟል",
+    "deleteFailed": "ዋና ተግባር ማስወገድ አልተሳካም",
+    "saveFailed": "ዋና ተግባር ማስቀመጥ አልተሳካም",
+    "confirmDelete": "ማስወገድ አረጋግጥ",
+    "deleteConfirmation": "እርግጠኛ ነህ ይህን ዋና ተግባር መሰረዝ ትፈልጋለህ? ይህ ተግባር መመለስ አይችልም።",
+    "deleteWarning": "ሁሉም የተያያዙ ውሂቦች ለዘላለም ይሰረዛሉ።",
+    "noMajorTasks": "ምንም ዋና ተግባራት አልተገኙም",
+    "noMajorTasksFound": "ምንም ዋና ተግባራት አልተገኙም",
+    "getStarted": "መጀመሪያዎን ዋና ተግባር በመፍጠር ይጀምሩ",
+    "createFirstTask": "መጀመሪያዎን ዋና ተግባር ፍጠር",
+    "noResultsWithFilters": "ከአሁኑ ማጣሪያዎች ጋር የሚዛመዱ ዋና ተግባራት የሉም። የፍለጋ መስፈርትዎን ለማስተካከል ይሞክሩ።",
+    "totalTasks": "ጠቅላላ ተግባራት",
+    "totalWeight": "ጠቅላላ ክብደት",
+    "remaining": "የቀረ",
+    "tasks": "ተግባራት",
+    "nameAmharic": "ስም (አማርኛ)",
+    "nameEnglish": "ስም (እንግሊዝኛ)",
+    "descriptionAmharic": "መግለጫ (አማርኛ)",
+    "descriptionEnglish": "መግለጫ (እንግሊዝኛ)",
+    "enterNameAmharic": "የዝርዝር ተግባር ስም በአማርኛ ያስገቡ",
+    "enterNameEnglish": "የዝርዝር ተግባር ስም በእንግሊዝኛ ያስገቡ",
+    "enterDescriptionAmharic": "መግለጫ በአማርኛ ያስገቡ",
+    "enterDescriptionEnglish": "መግለጫ በእንግሊዝኛ ያስገቡ",
+    "goal": "ግብ",
+    "loadingGoal": "ግብ በመጫን ላይ...",
+    "weight": "ክብደት",
+    "weightDescription": "ከግብ አንጻር ለዚህ ተግባር የሚውል የመቶኛ ክብደት (0-100)",
+    "weightFromPlanYear": "ከዓመት ዕቅድ ክብደት (%)",
+    "searchPlaceholder": "ዋና ተግባራትን በስም ወይም በመግለጫ ፈልግ...",
+    "formDescription": "ዋና ተግባራትን ይገልጹ እና አፈፃፀምን ለመከታተል ክብደት ይመድቡ",
+    "success": "ተሳክቷል",
+    "forGoal": "ለግብ",
+    "goalWeight": "የግብ ክብደት",
+    "goalDescription": "ይህ ተግባር የሚመደበው ግብ",
+    "participant": "ተሳታፊ",
+    "uniquePositions": "ተለያዩ የስራ መደቦች",
+    "all": "ሁሉም",
+    "positions": "የስራ መደቦች",
+    "ownerPosition": "የባለቤት የስራ መደብ",
+    "weightPercentage": "ክብደት (%)",
+    "actions": "ድርጊቶች",
+    "view": "ተመልከት",
+    "edit": "አርትዕ",
+    "delete": "ሰርዝ",
+    "created": "የተፈጠረ",
+    "organization": "ድርጅት",
+    "basicInformation": "መሰረታዊ መረጃ",
+    "deleting": "በመሰረዝ ላይ...",
+    "cancel": "ሰርዝ",
+    "clear": "አጽዳ",
+    "refresh": "አድስ",
+    "error": "ስህተት",
+    "filters": "ማጣሪያዎች",
+    "saving": "በመቀመጥ ላይ...",
+    "averageWeight": "አማካይ ክብደት",
+    "adjustWeights": "እባክዎን የተግባር ክብደቶችን ያስተካክሉ ስለሆነም አጠቃላይ ክብደቱ 100% እንዳይበልጥ",
+    "participantCount": "ተሳታፊዎች",
+    "forTask": "ለተግባር",
+    "majorTaskNotFound": "ዋና ተግባር አልተገኘም",
+    "parentGoal": "ወላጅ ግብ",
+    "weightFromPlanYearDesc": "ከወላጅ ዓመት ዕቅድ የተመደበ ክብደት",
+    "backToGoal": "ወደ ግብ ተመለስ",
+    "backToGoals": "ወደ ግቦች ተመለስ",
+    "navigation": "ዳሰሳ",
+    "additionalInfo": "ተጨማሪ መረጃ",
+    "noDescription": "ምንም መግለጫ አልተሰጠም",
+    "totalParticipants": "ጠቅላላ ተሳታፊዎች",
+    "totalAllocated": "ጠቅላላ የተመደበ",
+    "efficiency": "ውጤታማነት",
+    "weightAllocation": "የክብደት መድበል",
+    "allocated": "የተመደበ",
+    "distribution": "ስርጭት",
+    "highWeight": "ከፍተኛ ክብደት",
+    "mediumWeight": "መካከለኛ ክብደት",
+    "lowWeight": "ዝቅተኛ ክብደት",
+    "filterByWeight": "በክብደት አጣራ",
+    "allWeights": "ሁሉም ክብደቶች",
+    "showing": "በማሳየት ላይ",
+    "of": "ከ",
+    "loadError": "ተሳታፊዎችን ማምጣት አልተሳካም። እባክዎ እንደገና ይሞክሩ።",
+    "retry": "እንደገና ሞክር",
+    "progress": "እድገት",
+    "ofGoal": "ከግብ",
+    "completed": "ተጠናቅቋል",
+    "description": "መግለጫ",
+    "unknownTask": "ያልታወቀ ተግባር",
+    "taskLoadError": "የተግባር ዝርዝሮች ማግኛ አልተሳካም",
+    "status": {
+      "draft": "አርማ",
+      "active": "ንቁ",
+      "completed": "ተጠናቅቋል",
+      "archived": "ተመዝግቧል"
+    },
+    "avg": "አማካይ",
+    "unnamedGoal": "ያልተሰየመ ግብ",
+    "participantIdMissing": "ማዘመን አልተቻለም: የተሳታፊ መታወቂያ ጠፍቷል።"
+  },
+  "okrReport": {
+    "title": "OKR ሪፖርቶች",
+    "subtitle": "የሪፖርት ጊዜያትን አስተዳድር (የሳምንት፣ ወር፣ አመት)",
+    "createReport": "የሪፖርት ጊዜ ፍጠር",
+    "editReport": "የሪፖርት ጊዜ አርትዕ",
+    "updateReport": "የሪፖርት ጊዜ አዘምን",
+    "reportDetails": "የሪፖርት ዝርዝሮች",
+    "formDescription": "አዲስ የሪፖርት ጊዜ ፍጠር",
+    "frame": "የጊዜ ክልል",
+    "selectTimeframe": "የጊዜ ክልል ይምረጡ",
+    "timeframe": {
+      "weekly": "የሳምንት",
+      "monthly": "የወር",
+      "yearly": "የአመት"
+    },
+    "Number": "በቁጥር",
+    "Daily": "በቀን",
+    "allTimeframes": "ሁሉም የጊዜ ክልሎች ",
+    "year": "አመት",
+    "selectYear": "አመት ይምረጡ",
+    "allYears": "ሁሉም አመታት",
+    "month": "ወር",
+    "selectMonth": "ወር ይምረጡ",
+    "allMonths": "ሁሉም ወራት",
+    "week": "ሳምንት",
+    "selectWeek": "ሳምንት ይምረጡ",
+    "allWeeks": "ሁሉም ሳምንታት",
+    "period": "ጊዜ",
+    "dateRange": "የቀን ክልል",
+    "to": "ወደ",
+    "detailsCount": "የዝርዝሮች ብዛት",
+    "details": "ዝርዝሮች",
+    "viewDetails": "ዝርዝሮች አሳይ",
+    "searchPlaceholder": "ሪፖርቶችን ፈልግ...",
+    "noReportsFound": "ምንም ሪፖርት አልተገኘም",
+    "noResultsWithFilters": "በተመረጡት ማጣሪያዎች ምንም ሪፖርት አልተገኘም",
+    "getStarted": "መጀመሪያ የሪፖርት ጊዜዎን በመፍጠር ይጀምሩ",
+    "createFirstReport": "መጀመሪያ የሪፖርት ጊዜ ፍጠር",
+    "success": "ተሳክቷል",
+    "createdSuccessfully": "የሪፖርት ጊዜ በተሳካ ሁኔታ ተፈጠረ",
+    "updatedSuccessfully": "የሪፖርት ጊዜ በተሳካ ሁኔታ ተዘምኗል",
+    "deletedSuccessfully": "የሪፖርት ጊዜ በተሳካ ሁኔታ ተሰርዟል",
+    "createFailed": "የሪፖርት ጊዜ መፍጠር አልተሳካም",
+    "updateFailed": "የሪፖርት ጊዜ ማዘመን አልተሳካም",
+    "deleteFailed": "የሪፖርት ጊዜ ማስወገድ አልተሳካም",
+    "saveFailed": "የሪፖርት ጊዜ ማስቀመጥ አልተሳካም",
+    "confirmDelete": "ማስወገድ አረጋግጥ",
+    "deleteConfirmation": "እርግጠኛ ነዎት ይህን የሪፖርት ጊዜ እና ሁሉንም ዝርዝሮቹን ማስወገድ ይፈልጋሉ?",
+    "deleteWarning": "ይህ ድርጊት መመለስ አይችልም.",
+    "yearlyReportInfo": "የአመት ሪፖርቶች የተወሰነ ወር ወይም ሳምንት አያስፈልጋቸውም"
+  },
+  "okrReportDetail": {
+    "title": "የሪፖርት ዝርዝሮች",
+    "createDetail": "የሪፖርት ዝርዝር ጨምር",
+    "editDetail": "የሪፖርት ዝርዝር አርትዕ",
+    "updateDetail": "የሪፖርት ዝርዝር አዘምን",
+    "formDescription": "ለዚህ የሪፖርት ጊዜ ዝርዝሮች ጨምር",
+    "detailTask": "ዝርዝር ተግባር",
+    "selectTask": "ዝርዝር ተግባር ይምረጡ",
+    "unknownTask": "ያልታወቀ ተግባር",
+    "remarks": "አስተያየቶች",
+    "remarksPlaceholder": "አስተያየቶችዎን እዚህ ያስገቡ...",
+    "addDetail": "ዝርዝር ጨምር",
+    "createFirstDetail": "መጀመሪያ ዝርዝር ፍጠር",
+    "noDetailsFound": "ምንም ዝርዝር አልተገኘም",
+    "getStarted": "መጀመሪያ ዝርዝርዎን በመጨመር ይጀምሩ",
+    "failedToLoadTasks": "ዝርዝር ተግባሮች ማስጫን አልተሳካም",
+    "success": "ተሳክቷል",
+    "createdSuccessfully": "የሪፖርት ዝርዝር በተሳካ ሁኔታ ተፈጠረ",
+    "updatedSuccessfully": "የሪፖርት ዝርዝር በተሳካ ሁኔታ ተዘምኗል",
+    "deletedSuccessfully": "የሪፖርት ዝርዝር በተሳካ ሁኔታ ተሰርዟል",
+    "createFailed": "የሪፖርት ዝርዝር መፍጠር አልተሳካም",
+    "updateFailed": "የሪፖርት ዝርዝር ማዘመን አልተሳካም",
+    "deleteFailed": "የሪፖርት ዝርዝር ማስወገድ አልተሳካም",
+    "saveFailed": "የሪፖርት ዝርዝር ማስቀመጥ አልተሳካም",
+    "confirmDelete": "ማስወገድ አረጋግጥ",
+    "deleteConfirmation": "እርግጠኛ ነዎት ይህን የሪፖርት ዝርዝር ማስወገድ ይፈልጋሉ?",
+    "deleteWarning": "ይህ ድርጊት መመለስ አይችልም.",
+    "details": "ዝርዝሮች"
+  },
+  "achievement": {
+    "title": "ውጤቶች",
+    "subtitle": "ውጤቶችዎን ይከታተሉ እና ያስተዳድሩ",
+    "createAchievement": "አፈፃፀም ሙላ",
+    "editAchievement": "ውጤት አርትዕ",
+    "updateAchievement": "ውጤት አዘምን",
+    "achievementDetails": "የውጤት ዝርዝሮች",
+    "formDescription": "አዲስ የውጤት መዝገብ ጨምር",
+    "expectation": "ከፍተኛ ግብ",
+    "selectExpectation": "ከፍተኛ ግብ ይምረጡ",
+    "expectationRequired": "ከፍተኛ ግብ ያስፈልጋል",
+    "value": "መጠን",
+    "valueRequired": "መጠን ያስፈልጋል",
+    "valuePositive": "መጠን አዎንታዊ መሆን አለበት",
+    "valuePlaceholder": "የውጤት መጠን ያስገቡ",
+    "valueExceedsTarget": "መጠን ከመቼት መጠን {target} መብለጥ አይችልም",
+    "remark": "አስተያየት",
+    "remarkRequired": "አስተያየት ያስፈልጋል",
+    "remarkPlaceholder": "ስለዚህ ውጤት አስተያየት ያስገቡ...",
+    "noRemark": "አስተያየት አልተሰጠም",
+    "target": "መቼት",
+    "current": "አሁን ያለ",
+    "afterAdd": "ከመዝግበው በኋላ",
+    "remaining": "ቀሪ",
+    "progress": "እድገት",
+    "units": "አሃዶች",
+    "targetValue": "የመቼት መጠን",
+    "expectationDescription": "የከፍተኛ ግብ መግለጫ",
+    "createdBy": "የፈጠረው",
+    "unknownExpectation": "ያልታወቀ ከፍተኛ ግብ",
+    "totalAchievements": "ጠቅላላ ውጤቶች",
+    "totalValue": "ጠቅላላ መጠን",
+    "averageValue": "አማካይ መጠን",
+    "last30Days": "የመጨረሻ 30 ቀናት",
+    "total": "ጠቅላላ",
+    "average": "አማካይ",
+    "recent": "የቅርብ",
+    "searchPlaceholder": "ውጤቶችን ፈልግ...",
+    "valueRange": "የመጠን ክልል",
+    "selectValueRange": "የመጠን ክልል ይምረጡ",
+    "startDate": "የመጀመሪያ ቀን",
+    "selectStartDate": "የመጀመሪያ ቀን ይምረጡ",
+    "endDate": "የመጨረሻ ቀን",
+    "selectEndDate": "የመጨረሻ ቀን ይምረጡ",
+    "allExpectations": "ሁሉም ከፍተኛ ግቦች",
+    "allValues": "ሁሉም መጠንዎች",
+    "highValue": "ከፍተኛ መጠን",
+    "mediumValue": "መካከለኛ መጠን",
+    "lowValue": "ዝቅተኛ መጠን",
+    "noAchievementsFound": "ምንም ውጤት አልተገኘም",
+    "noResultsWithFilters": "በተመረጡት ማጣሪያዎች ምንም ውጤት አልተገኘም",
+    "getStarted": "መጀመሪያ ውጤትዎን በመፍጠር ይጀምሩ",
+    "createFirstAchievement": "መጀመሪያ አፈፃፀም ሙላ",
+    "success": "ተሳክቷል",
+    "createdSuccessfully": "ውጤት በተሳካ ሁኔታ ተፈጠረ",
+    "updatedSuccessfully": "ውጤት በተሳካ ሁኔታ ተዘምኗል",
+    "deletedSuccessfully": "ውጤት በተሳካ ሁኔታ ተሰርዟል",
+    "createFailed": "ውጤት መፍጠር አልተሳካም",
+    "updateFailed": "ውጤት ማዘመን አልተሳካም",
+    "deleteFailed": "ውጤት ማስወገድ አልተሳካም",
+    "saveFailed": "ውጤት ማስቀመጥ አልተሳካም",
+    "confirmDelete": "ማስወገድ አረጋግጥ",
+    "deleteConfirmation": "እርግጠኛ ነዎት ይህን ውጤት ማስወገድ ይፈልጋሉ?",
+    "deleteWarning": "ይህ ድርጊት መመለስ አይችልም.",
+    "trackingTitle": "የውጤት ክትትል",
+    "trackingDescription": "በሳምንታዊ ከፍተኛ ግቦች ላይ ውጤቶችን ይከታተሉ። ውጤቶችን ለመጨመር በሴሎች ላይ ይጫኑ።",
+    "expectationsAndAchievements": "ከፍተኛ ግቦች እና ውጤቶች",
+    "tableDescription": "በአንድ ቦታ ሳምንታዊ ከፍተኛ ግቦችን ያስቀምጡ እና ውጤቶችን ይከታተሉ",
+    "noTasks": "ምንም ዝርዝር ተግባሮች አልተገኙም። እባክዎ መጀመሪያ ከፍተኛ ግቦችን ያስቀምጡ።",
+    "instruction1": "በሩብ ዓመታት መካከል ለመንቀሳቀስ የሩብ ዓመት ትሮችን ይጠቀሙ",
+    "instruction2": "ውጤቶችን ለመጨመር ከፍተኛ ግብ ባላቸው ሴሎች ላይ ይጫኑ",
+    "instruction3": "የወደፊት ሳምንታት ተቆልፈዋል",
+    "instruction3Detail": "ውጤቶችን ለአሁኑ እና ላለፉት ሳምንታት ብቻ ማከል ይችላሉ",
+    "instruction4": "በአግድም ለመንቀሳቀስ የማሸብለል ቁልፎችን ይጠቀሙ ወይም ይጎትቱ",
+    "instruction5": "ዝርዝር መረጃ ለማግኘት በሴሎች ላይ ያንዣብቡ",
+    "instruction6": "የተሻለ የመመልከት ተሞክሮ ለማግኘት የሙሉ ስክሪን ቁልፍን ይጫኑ",
+    "noExpectationsMade": "ምንም ከፍተኛ ግቦች አልተሰሩም። እባክዎ መጀመሪያ ከፍተኛ ግቦችን ያስቀምጡ።",
+    "emptyExpectation": "ባዶ ከፍተኛ ግብ",
+    "monthlySubtitle": "ወርሃዊ ከፍተኛ ግቦችዎን በማስተካከል ወርሃዊ ውጤቶችዎን ይከታተሉ እና ያስተዳድሩ",
+    "monthlyTracking": "ወርሃዊ የውጤት ክትትል",
+    "monthlyTrackingTitle": "ወርሃዊ የውጤት ክትትል",
+    "monthlyTrackingDescription": "በወርሃዊ ከፍተኛ ግቦች ላይ ውጤቶችን ይከታተሉ። ውጤቶችን ለመጨመር በሴሎች ላይ ይጫኑ።",
+    "weeklyTracking": "ሳምንታዊ የውጤት ክትትል",
+    "weeklyTrackingDescription": "ሳምንታዊ እድገት ክትትል እና የውጤት ዝርዝሮች",
+    "trackingTable": "የውጤት ክትትል",
+    "goals": "ግቦች",
+    "achievements": "ውጤቶች",
+    "expectations": "የሚጠበቁ ውጤቶች",
+    "completion": "ማጠናቀቅ",
+    "pending": "ቀሪ",
+    "completionExceeded": "100+",
+    "savingSingle": "ውጤት በመቀመጥ ላይ...",
+    "carriedToCurrentWeek": "በአሁኑ ሳምንት ተመዝግቧል",
+    "carriedFromWeekMessage": "ይህ ውጤት በ{{period}} የተከናወነ ስራ ነው እና በአሁኑ ሳምንት ({{currentPeriod}}) ይቀመጣል።",
+    "noExpectationForCurrentWeek": "አሁኑ ሳምንት ከፍተኛ ግብ የለውም። ለተሞሉ ያልተሞሉ የድሮ ሳምንታት ብቻ ውጤት ማከል ይችላሉ።",
+    "allPastWeeksHaveEntry": "ከፍተኛ ግብ ያላቸው ሁሉም ያለፉ ሳምንታት ቀድሞውኑ የውጤት ግቤት አላቸው።",
+    "exceedsPassedWeekExpectation": "ውጤቱ የያለፈው ሳምንት ከፍተኛ ግብ ({{limit}}) አልፏል።",
+    "exceedsExpectationLimit": "ውጤቱ የሳምንቱን ከፍተኛ ግብ ({{limit}}) አልፏል።",
+    "pastWeekLocked": "ያለፈው ሳምንት ተቆልፏል",
+    "pastWeekCardClickMessage": "በያለፈው ሳምንት ውጤት ማከል አይችሉም። እባክዎ በአሁኑ ሳምንት ይጠቀሙ።",
+    "pastWeekHint": "ሳምንቱ አልፏል — በዚህ ሳምንት ውጤት ማከል ተሰናክሏል። በአሁኑ ሳምንት ይጠቀሙ።",
+    "pastWeeksWithExpectation": "ከፍተኛ ግብ ያላቸው ያለፉ ሳምንታት፡",
+    "carriedFromWeeks": "ከያለፉ ሳምንታት የተወሰዱ፡",
+    "pastWeekBanner": "ይህ ሳምንት አልፏል። እዚህ ውጤት ማከል ተሰናክሏል። እባክዎ በአሁኑ ሳምንት ይጨምሩ።",
+    "pastWeekAddDisabled": "በያለፈው ሳምንት ውጤት ማከል አይችሉም። በአሁኑ ሳምንት ይጨምሩ።",
+    "confirmDeleteTitle": "ውጤት ሰርዝ",
+    "confirmDeleteNew": "ያልተቀመጠ ይህን ውጤት ያስወግዱ?",
+    "confirmDeleteSavedNow": "ይህ ውጤቱን ወዲያውኑ ይሰርዛል።"
+  },
+  "additionalTask": {
+    "title": "ተጨማሪ ተግባሮች",
+    "createNew": "ተጨማሪ ተግባር ፍጠር",
+    "createTitle": "ተጨማሪ ተግባር ፍጠር",
+    "editTitle": "ተጨማሪ ተግባር አርትዕ",
+    "noTasks": "ምንም ተጨማሪ ተግባሮች አልተገኙም።",
+    "timeSpan": "የጊዜ ክፍፍል",
+    "yearly": "ዓመታዊ",
+    "quarterly": "ሩብ ዓመታዊ",
+    "monthly": "ወርሃዊ",
+    "weekly": "ሳምንታዊ",
+    "daily": "ዕለታዊ",
+    "basicInformation": "መሰረታዊ መረጃ",
+    "configuration": "ቅንብር",
+    "participants": "ተሳታፊዎች",
+    "nameAmharic": "ስም (አማርኛ)",
+    "nameEnglish": "ስም (እንግሊዝኛ)",
+    "descriptionAmharic": "መግለጫ (አማርኛ)",
+    "descriptionEnglish": "መግለጫ (እንግሊዝኛ)",
+    "deleteConfirmTitle": "ተግባር ይሰረዝ?",
+    "deleteConfirmDescription": "ይህ ድርጊት መመለስ አይችልም።",
+    "createSuccess": "ተጨማሪ ተግባር በተሳካ ሁኔታ ተፈጠረ",
+    "updateSuccess": "ተጨማሪ ተግባር በተሳካ ሁኔታ ተዘምኗል",
+    "deleteSuccess": "ተጨማሪ ተግባር በተሳካ ሁኔታ ተሰርዟል",
+    "createError": "ተጨማሪ ተግባር መፍጠር አልተሳካም",
+    "updateError": "ተጨማሪ ተግባር ማዘመን አልተሳካም",
+    "deleteError": "ተጨማሪ ተግባር ማስወገድ አልተሳካም",
+    "emptyExpectation": "ባዶ ከፍተኛ ግብ",
+    "noExpectations": "ምንም የሚጠበቁ ነገሮች የሉም",
+    "lowCompletionWarning": "ከ50% በታች ያጠናቀቁ ናቸው። እባክዎ ስኬቶቸዎን ያዘምኑ።",
+    "clickCellsHint": "ስኬቶችን ለመጨመር ሕዋሶቹን ጠቅ ያድርጉ",
+    "saveHint": "ስኬቶችን በተናጠል ወይም በቡድን ያስቀምጡ",
+    "quartersHint": "ሩብ ዓመቱን ለማሰስ ሩብዓመቶቹን ይጠቀሙ",
+    "monthlyView": "ወርሃዊ እይታ",
+    "weeklyView": "ሳምንታዊ እይታ",
+    "fullscreen": "ሙሉ ስክሪን",
+    "exitFullscreen": "ሙሉ ስክሪን ውጣ",
+    "noDetailTasks": "ምንም ዝርዝር ተግባሮች አልተገኙም። እባክዎ መጀመሪያ የሚጠበቁ ነገሮችን ያዘጋጁ።",
+    "monthlyTrackingHint": "ወርሃዊ ስኬቶችን ይከታተሉ። ሕዋሶቹን ጠቅ ያድርጉ።",
+    "weeklyTrackingHint": "ሳምንታዊ ስኬቶችን ይከታተሉ። ሕዋሶቹን ጠቅ ያድርጉ።",
+    "savingAchievement": "ስኬት እየተቀመጠ ነው...",
+    "removedSuccessfully": "ስኬት በተሳካ ሁኔታ ተወግዷል",
+    "removeConfirm": "ይህን ያልተቀመጠ ስኬት ያስወግዱ?",
+    "removeWarning": "ስኬቱ ወዲያውኑ ይሰረዛል።",
+    "noAchievementsYet": "እስካሁን ምንም ስኬቶች የሉም። ለመጀመር 'ስኬት ጨምር' ጠቅ ያድርጉ።",
+    "noMonthlyAchievementsYet": "እስካሁን ምንም ስኬቶች የሉም። ለመጀመር 'ወርሃዊ ስኬት ጨምር' ጠቅ ያድርጉ።",
+    "monthlyPlaceholder": "በዚህ ወር ምን እንደተሠራ ይግለጹ...",
+    "weeklyPlaceholder": "ምን እንደተሠራ ይግለጹ...",
+    "noExpectationId": "ያለ የሚጠበቅ ID ስኬት መፍጠር አይቻልም። እባክዎ መጀመሪያ የሚጠበቁ ነገሮችን ያዘጋጁ።",
+    "currentWeekNoExpectation": "ለዚህ ሳምንት የሚጠበቅ የለም። ለሳለፉ ሳምንቶች ብቻ ስኬቶችን ማከል ይችላሉ።",
+    "noExpectationCurrentWeek": "ለዚህ ሳምንት የሚጠበቅ አልተገኘም።",
+    "cannotAddPassedWeek": "ያለፈ ሳምንት ስኬት ማከል አይቻልም። እባክዎ የአሁኑን ሳምንት ይጠቀሙ።",
+    "weekPassedDisabled": "ሳምንቱ አልፏል — ስኬት ማከል ተሰናክሏል። የአሁኑን ሳምንት ይጠቀሙ።",
+    "weekPassedHint": "ይህ ሳምንት አልፏል። ስኬት ማከል ተሰናክሏል። እባክዎ ወቅታዊ ሳምንት ይጠቀሙ።",
+    "passedWeeksWithExpectation": "ያለ ስኬት ያለፉ ሳምንቶች:",
+    "carriedFromPassedWeeks": "ከያለፉ ሳምንቶች የተሸጋገረ:",
+    "fromPeriod": "ከ{{period}} — በዚህ ሳምንት ስር ተመዝግቧል",
+    "exceedsPassedWeekLimit": "ስኬቱ ያለፈው ሳምንት ገደብ ({{limit}}) ያልፋል።",
+    "exceedsWeekLimit": "ስኬቱ የሳምንቱን ገደብ ({{limit}}) ያልፋል።",
+    "allPassedWeeksFilled": "ያለ ስኬት ያለፉ ሳምንቶች ሁሉ ተሞልተዋል።",
+    "legend": "ምልክቶች",
+    "hasExpectation": "የሚጠበቅ አለ",
+    "hasAchievements": "ስኬቶች አሉ",
+    "expanded": "ተስፋፍቷል",
+    "noExpectation": "የሚጠበቅ የለም",
+    "monthlyExpectation": "ወርሃዊ የሚጠበቅ",
+    "achieved": "የተሳካ",
+    "achievement": "ስኬት",
+    "addMonthlyAchievement": "ወርሃዊ ስኬት ጨምር",
+    "carriedToCurrentWeek": "በወቅታዊ ሳምንት ተመዝግቧል",
+    "completionExceeded": "100+",
+    "monthlyTrackingTitle": "ወርሃዊ ስኬት ክትትል",
+    "pastWeekLocked": "ያለፈ ሳምንት ተቆልፏል",
+    "pastWeekCardClickMessage": "ያለፈ ሳምንት ስኬት ማከል አይቻልም። እባክዎ የአሁኑን ሳምንት ይጠቀሙ።",
+    "pastWeeksWithExpectation": "ያለ ስኬት ያለፉ ሳምንቶች:",
+    "carriedFromWeeks": "ከያለፉ ሳምንቶች የተሸጋገረ:",
+    "pastWeekHint": "ሳምንቱ አልፏል — ስኬት ማከል ተሰናክሏል። የአሁኑን ሳምንት ይጠቀሙ።",
+    "pastWeekBanner": "ይህ ሳምንት አልፏል። ስኬት ማከል ተሰናክሏል። እባክዎ ወቅታዊ ሳምንት ይጠቀሙ።",
+    "pastWeekAddDisabled": "ያለፈ ሳምንት ስኬት ማከል አይቻልም። በወቅታዊ ሳምንት ያከሉ።",
+    "exceedsPassedWeekExpectation": "ስኬቱ ያለፈው ሳምንት ገደብ ({{limit}}) ያልፋል።",
+    "exceedsExpectationLimit": "ስኬቱ የሳምንቱን ገደብ ({{limit}}) ያልፋል።",
+    "fromOtherWeek": "ከ{{period}} — በዚህ ሳምንት ስር ተመዝግቧል",
+    "confirmDeleteTitle": "ስኬት አጥፋ",
+    "confirmDeleteNew": "ይህን ያልተቀመጠ ስኬት ያስወግዱ?",
+    "confirmDeleteSavedNow": "ስኬቱ ወዲያውኑ ይሰረዛል።",
+    "noExpectationForCurrentWeek": "ለዚህ ሳምንት የሚጠበቅ የለም። ለሳለፉ ሳምንቶች ብቻ ስኬቶችን ማከል ይችላሉ።",
+    "allPastWeeksHaveEntry": "ያለ ስኬት ያለፉ ሳምንቶች ሁሉ ተሞልተዋል።",
+    "deleted": "ስኬት በተሳካ ሁኔታ ተወግዷል",
+    "noCurrentWeekExpectation": "ለዚህ ሳምንት የሚጠበቅ አልተገኘም።",
+    "savingSingle": "ስኬት እየተቀመጠ ነው...",
+    "carriedFromWeekMessage": "ይህ ስኬት ከ{{period}} የስራ ውጤት ነው። በወቅታዊ ሳምንት ({{currentPeriod}}) ስር ይቀመጣል።",
+    "directorDashboard": "የዳይሬክተር ዳሽቦርድ",
+    "director": "ዳይሬክተር",
+    "manageYourExpectations": "ከፍተኛ ግቦችዎን ያስተዳድሩ እና ስኬቶችን ይከታተሉ",
+    "quickStats": "ፈጣን ስታቲስቲክስ",
+    "expectations": "ከፍተኛ ግቦች",
+    "achievements": "ስኬቶች",
+    "completion": "ማጠናቀቂያ",
+    "pending": "በጠባቂ",
+    "overall": "አጠቃላይ",
+    "lowCompletion": "ዝቅተኛ ማጠናቀቂያ",
+    "lowCompletionMessage": "ከ50% በታች ያጠናቀቁ ናቸው። እባክዎ ስኬቶቸዎን ያዘምኑ።",
+    "export": "ወደ ውጪ ላክ",
+    "settings": "ቅንብሮች",
+    "tips": "ምክሮች",
+    "tip1": "ስኬቶችን ለመጨመር ሕዋሶቹን ጠቅ ያድርጉ",
+    "tip2": "ስኬቶችን በተናጠል ወይም በቡድን ያስቀምጡ",
+    "tip3": "ሩብ ዓመቱን ለማሰስ ሩብዓመቶቹን ይጠቀሙ"
+  },
+  "directorSignature": {
+    "title": "ፊርማ ቅንብሮች",
+    "description": "የዚህ ዳይሬክተር ፊርማ ያስተዳድሩ",
+    "uploadSignature": "ፊርማዎን ይጫኑ",
+    "currentSignature": "የአሁኑ ፊርማ",
+    "selectFile": "PNG ፋይል ይምረጡ",
+    "preview": "ቅድመ እይታ",
+    "upload": "ፊርማ ይጫኑ",
+    "remove": "ፊርማ ያስወግዱ",
+    "replace": "ፊርማ ይተካ",
+    "enterFileName": "ፊርማ ስም ያስገቡ (ተራ)",
+    "uploading": "ፊርማ እየተጫነ...",
+    "uploadSuccess": "ፊርማ በተሳካ ሁኔታ ተጫነ",
+    "uploadFailed": "ፊርማ ማስጫን አልተሳካም",
+    "removing": "ፊርማ እየተወገደ...",
+    "removedSuccess": "ፊርማ በተሳካ ሁኔታ ተወግዷል",
+    "removeFailed": "ፊርማ ማስወገድ አልተሳካም",
+    "selectPngFirst": "እባክዎ መጀመሪያ PNG ፋይል ይምረጡ",
+    "onlyPngAllowed": "PNG ፋይሎች ብቻ ይፈቀዳሉ",
+    "fileTooLarge": "ፋይል መጠን ከ5MB ከፍ ያለ ነው",
+    "signatureExists": "ቀድሞ ፊርማ አለዎት። እባክዎ መጀመሪያ ያስወግዱ።",
+    "confirmDelete": "ማስወገድ አረጋግጥ",
+    "deleteConfirmation": "እርግጠኛ ነዎት ፊርማዎን ማስወገድ ይፈልጋሉ? ይህ ድርጊት መመለስ አይችልም።",
+    "noSignature": "ምንም ፊርማ ተጫኝ አልተገኘም",
+    "getStarted": "ፊርማዎን በማስጫን ይጀምሩ",
+    "delegationNotice": "ውክልና ማስታወሻ",
+    "delegationNoticeMessage": "ውክልና በሚኖርበት ጊዜ ፊርማ ቅንብሮች አይገኙም",
+    "unauthorized": "ያልተፈቀደ",
+    "unauthorizedMessage": "ይህ ገጽ ለመድረስ ፈቃድ የላዎትም",
+    "error": "ስህተት",
+    "success": "ተሳክቷል",
+    "cancel": "ሰርዝ",
+    "delete": "ሰርዝ",
+    "invalidSignatureUrl": "ልክ ያልሆነ ፊርማ URL"
+  },
+  "docOverlay": {
+    "actions": {
+      "close": "ዝጋ",
+      "openFile": "ፋይሉን ክፈት",
+      "download": "አውርድ",
+      "openPdf": "PDF ክፈት"
+    },
+    "status": {
+      "loading": "ሰነዱ እየተጫነ ነው...",
+      "failed": "መክፈት አልተቻለም",
+      "preparing": "በዝግጅት ላይ...",
+      "pdfPreview": "የ PDF ቅድመ እይታ",
+      "noDoc": "የተጫነ ሰነድ የለም።",
+      "activeEditors": "በአሁኑ ጊዜ የሚጠቀሙ፡ {{count}}",
+      "updatedAt": "የተሻሻለው {{date}}"
+    },
+    "errors": {
+      "missingUrl": "የ ONLYOFFICE_DS_URL አልተገኘም",
+      "pdfNotice": "የ PDF ሰነዶች በአዲስ ታብ (tab) ይከፈታሉ።"
+    }
+  },
+  "documentKebab": {
+    "tooltip": "ተጨማሪ",
+    "actions": {
+      "open": "ክፈት",
+      "openFile": "ፋይሉን ክፈት",
+      "download": "አውርድ"
+    }
+  },
+  "fileList": {
+    "headers": {
+      "name": "ስም",
+      "updated": "የተሻሻለበት",
+      "owner": "ባለቤት",
+      "activity": "እንቅስቃሴ",
+      "actions": "ተግባራት"
+    },
+    "status": {
+      "loading": "ፋይሎች በመጫን ላይ ናቸው...",
+      "noFiles": "ምንም ፋይል አልተገኘም",
+      "adjustFilters": "እባክዎ ፍለጋዎን ወይም ማጣሪያዎን ያስተካክሉ",
+      "updatedFile": "ይህን ፋይል አሻሽለዋል",
+      "uploadedFile": "ይህን ፋይል ጭነዋል"
+    }
+  },
+  "filters": {
+    "all": "ሁሉም",
+    "word": "ወርድ",
+    "excel": "ኤክሴል",
+    "powerpoint": "ፓወር ፖይንት",
+    "pdf": "ፒዲኤፍ",
+    "other": "ሌሎች"
+  },
+  "createFolder": {
+    "title": "አዲስ ፎልደር ፍጠር",
+    "subtitle": "ፎልደር የሚፈጠርበት ቦታ፡ ",
+    "labels": {
+      "nameEn": "የፎልደር ስም",
+      "nameAm": "የፎልደር ስም (በአማርኛ)",
+      "optional": "(አማራጭ)",
+      "nameDescription": "ይህ ተጠቃሚዎች የሚያዩት የፎልደሩ ስም ነው።",
+      "slug": "ስለግ (Slug)",
+      "slugAuto": "በራሱ እንዲሞላ",
+      "slugDescription": "ለዩአርኤል (URL) እና ለውስጣዊ ማጣቀሻዎች የሚያገለግል።",
+      "slugPlaceholder": "ምሳሌ፡ ውሎች-እና-ሂሳብ",
+      "nameAmPlaceholder": "ምሳሌ፡ ውሎች"
+    },
+    "tips": {
+      "title": "ጠቃሚ ምክሮች",
+      "subtitle": "ግልጽ እና ልዩ ስም ይስጡት።",
+      "item1": "የፎልደር ስሞችን አጭር ያድርጉ (ምሳሌ፡ “ውሎች”፣ “ሂሳብ”)።",
+      "item2": "ካልቀየሩት በስተቀር ስለግ (Slug) ከእንግሊዝኛ ስሙ በራሱ ይፈጠራል።",
+      "item3": "ለሁለት ቋንቋ ተጠቃሚዎች የአማርኛ ስም ቢጨምሩ ይመረጣል።"
+    },
+    "preview": "ቅድመ እይታ",
+    "untitled": "ያልተሰየመ ፎልደር",
+    "actions": {
+      "cancel": "ሰርዝ",
+      "create": "ፍጠር",
+      "creating": "በመፍጠር ላይ..."
+    },
+    "hints": {
+      "press": "ይጫኑ",
+      "esc": "Esc",
+      "toClose": "ለመዝጋት",
+      "tapOutside": "ለመዝጋት ከሳጥኑ ውጭ ይንኩ።"
+    },
+    "messages": {
+      "success": "ፎልደር ተፈጥሯል",
+      "error": "ፎልደር መፍጠር አልተቻለም",
+      "invalidInput": "ልክ ያልሆነ ግቤት"
+    }
+  },
+  "forYou": {
+    "labels": {
+      "open": "ክፈት",
+      "recentActivity": "የቅርብ ጊዜ የተሳታፊዎች እንቅስቃሴ"
+    }
+  },
+  "pagination": {
+    "showing": "ከ {{total}} ፋይሎች ውስጥ ከ {{from}} እስከ {{to}} ያሉት እየታዩ ነው",
+    "pageInfo": "ገጽ {{current}} ከ {{total}}",
+    "previous": "ቀዳሚ",
+    "next": "ቀጣይ",
+    "perPage": "በገጽ"
+  },
+  "templateForm": {
+    "title": "አዲስ የሰነድ ንድፍ (Template)",
+    "description": "የሰነድ ንድፍ ፋይል ይጫኑ። አስተዳዳሪዎች በኋላ ላይ ሊያስተዳድሩት እና ሊያሻሽሉት ይችላሉ።",
+    "titleCreate": "አዲስ የሰነድ ንድፍ ፍጠር",
+    "titleEdit": "የሰነድ ንድፍ አሻሽል",
+    "status": {
+      "uploading": "በመጫን ላይ...",
+      "createAndUpload": "ፍጠር እና ጫን",
+      "cancel": "ሰርዝ",
+      "remove": "አስወግድ",
+      "browse": "ፈልግ"
+    },
+    "labels": {
+      "file": "የንድፍ ፋይል",
+      "dropOrClick": "ፋይሉን እዚህ ይጣሉ ወይም ለመምረጥ ይጫኑ",
+      "supportedTypes": "የሚደገፉ፡ DOC/DOCX, XLS/XLSX/CSV, PPT/PPTX, PDF.",
+      "type": "ዓይነት",
+      "size": "መጠን",
+      "slugNotice": "ንድፎች እንዳይደራረቡ ሲጫኑ መለያ (Slug) በራሱ ይፈጠራል።",
+      "nameEn": "ስም (በእንግሊዝኛ)",
+      "nameAm": "ስም (በአማርኛ)",
+      "folder": "ፎልደር",
+      "pickFolder": "ፎልደር ይምረጡ",
+      "folderSelected": "ፎልደር ተመርጧል"
+    },
+    "placeholders": {
+      "nameEn": "ምሳሌ፡ የቅጥር ደብዳቤ",
+      "nameAm": "ምሳሌ፡ የቅጥር ደብዳቤ",
+      "folderPicker": "ፎልደር ይምረጡ (ወይም ዋናው ማውጫ)"
+    },
+    "errors": {
+      "fileRequired": "ፋይል ያስፈልጋል።",
+      "unsupported": "የማይደገፍ የፋይል ዓይነት። እባክዎ DOC, XLS, PPT ወይም PDF ይጠቀሙ።"
+    },
+    "chips": {
+      "wordPdf": "Word / PDF ንድፎች",
+      "excelCsv": "Excel / CSV ንድፎች",
+      "ppt": "PowerPoint ንድፎች"
+    }
+  },
+  "quickTemplates": {
+    "title": "ፈጣን ንድፎች",
+    "refresh": "አድስ",
+    "loading": "በመጫን ላይ...",
+    "noTemplates": "ምንም ንድፎች አልተገኙም",
+    "errorLoading": "ንድፎችን መጫን አልተቻለም"
+  },
+  "folderActions": {
+    "open": "ክፈት",
+    "favorite": "ወደ ተወዳጆች ጨምር",
+    "details": "ዝርዝር መረጃ",
+    "copyLink": "ሊንኩን ቅዳ",
+    "moveTo": "ወደ ሌላ ቦታ አዛውር",
+    "rename": "ስም ቀይር",
+    "share": "አጋራ",
+    "myShares": {
+      "home": "ቤት",
+      "title": "የእኔ ማጋሪያዎች",
+      "subtitle": "ያጋሩትን ፋይሎች እና ፎልደሮች",
+      "refresh": "አድስ",
+      "sort": "ደርድር",
+      "sortBy": "ሊደርደር በ",
+      "clearSearch": "ፍለጋን ያጽዳ",
+      "document": "ሰነድ",
+      "fields": {
+        "type": "ዓይነት",
+        "name": "ስም",
+        "modified": "የመጨረሻ ማስተካከያ",
+        "size": "መጠን",
+        "role": "ሚና"
+      },
+      "direction": {
+        "asc": "ሊ ላይ",
+        "desc": "በቀጥታ"
+      },
+      "view": {
+        "tiles": "ስሪ ጫፍ",
+        "list": "ዝርዝር"
+      },
+      "actions": {
+        "download": "ያውርዱ",
+        "share": "ያጋሩ",
+        "delete": "ይሰርዙ",
+        "rename": "ድጋሚ ስም",
+        "open": "ይክፈቱ",
+        "preview": "ቅድመ መመልከት",
+        "copy": "ወደ... ገልብጡ",
+        "move": "ወደ... ያንቀሳቅሱ",
+        "summarize": "ማጠቃለያ",
+        "addedToFavorites": "ወደ ተወዳጆች ታክሏል"
+      },
+      "sections": {
+        "folders": "ይጋራሉ ፎልደሮች",
+        "files": "ይጋራሉ ፋይሎች"
+      },
+      "empty": {
+        "title": "ማጋሪያ አልተገኘም",
+        "search": "ስርዓተ መፈለግ ጋር ተዛማጅ ውጤት አይነበበም",
+        "description": "ምንም ፋይሎች ወይም ፎልደሮች ያልሞሉት ያልሞሉ"
+      },
+      "roles": {
+        "owner": "ባለቤት",
+        "editor": "አርታዒ",
+        "viewer": "ተመልካች"
+      },
+      "details": {
+        "yourRole": "የእርስዎ ሚና",
+        "sharedAt": "ይጋራ",
+        "docTitle": "የሰነድ መረጃ",
+        "docType": "ዓይነት",
+        "created": "ተፈጥሮ",
+        "updated": "ስሪ",
+        "collaborators": "ተብብሮ ሠራዋ"
+      },
+      "notifications": {
+        "fileDeleted": "ፋይል ተሰርዟል",
+        "addedToFavorites": "ወደ ተወዳጆች ታክሏል"
+      },
+      "modals": {
+        "delete": {
+          "file": "ፋይል ይሰርዙ",
+          "confirm": "{{name}} ለመሰረዝ እርግጠኛ ነዎት?"
+        },
+        "rename": {
+          "fileTitle": "ፋይል ድጋሚ ስም",
+          "file": "ለፋይሉ አዲስ ስም ያስገቡ"
+        }
+      },
+      "loading": {
+        "files": "ፋይሎች በሚጫኑ ጊዜ...",
+        "details": "ዝርዝሮች በሚጫኑ ጊዜ..."
+      },
+      "errors": {
+        "loadItems": "ንጥሎችን መጫን አልተሳካም",
+        "loadDoc": "ሰነድ መጫን አልተሳካም",
+        "download": "ፋይል ማውረድ አልተሳካም"
+      }
+    },
+    "editPermission": "ፍቃድ አስተካክል",
+    "delete": "ሰርዝ"
+  },
+  "aiSummarize": {
+    "title": "በአርቴፊሻል ኢንተለጀንስ አሳጥር",
+    "subtitle": "ለሰነድዎ ግልጽ እና አጭር ማጠቃለያ ያመንጩ።",
+    "labels": {
+      "inputText": "የገባው ጽሑፍ",
+      "placeholder": "ይዘቱ በራሱ ይጫናል... (ወይም እዚህ ጋር ይለጥፉ)",
+      "aiSummary": "የአይ ማጠቃለያ",
+      "summaryPlaceholder": "ማጠቃለያው እዚህ ጋር ይታያል...",
+      "processing": "አይ (AI) ሰነድዎን በማዘጋጀት ላይ ነው"
+    },
+    "thinking": {
+      "step1": "የሰነዱን ይዘት በማምጣት ላይ...",
+      "step2": "የሰነዱን ይዘት በመተንተን ላይ...",
+      "step3": "ቁልፍ ነጥቦችን በመለየት ላይ...",
+      "step4": "መረጃውን በማሳጠር ላይ...",
+      "step5": "አጭር ማጠቃለያ በመጻፍ ላይ..."
+    },
+    "actions": {
+      "copy": "ቅዳ",
+      "close": "ዝጋ",
+      "summarize": "በአይ (AI) አሳጥር",
+      "thinking": "በማሰብ ላይ..."
+    },
+    "errors": {
+      "empty": "የሰነዱ ይዘት ባዶ ነው (የሚጠቃለል ነገር የለም)።",
+      "failed": "ሰነዱን ማምጣት/ማጠቃለል አልተቻለም"
+    }
+  },
+  "summarizeModal": {
+    "title": "ማጠቃለያ",
+    "pasteContent": "ጽሑፉን እዚህ ይለጥፉ",
+    "pastePlaceholder": "የሰነዱን ጽሑፍ እዚህ ይለጥፉ...",
+    "summary": "ማጠቃለያ",
+    "summaryPlaceholder": "ማጠቃለያው እዚህ ይታያል...",
+    "actions": {
+      "copy": "ቅዳ",
+      "cancel": "ሰርዝ",
+      "summarize": "አሳጥር"
+    },
+    "messages": {
+      "pasteFirst": "እባክዎ መጀመሪያ ጽሑፍ ይለጥፉ።",
+      "noSummary": "ምንም ማጠቃለያ አልተገኘም።",
+      "failed": "ማሳጠር አልተቻለም",
+      "copied": "ተቀድቷል"
+    }
+  },
+  "ocrUpload": {
+    "title": "ምስል ይጫኑ",
+    "dropHint": "ምስሉን እዚህ ይጎትቱ ወይም ይምረጡ",
+    "browse": "ፋይሎችን ይፈልጉ",
+    "supportText": "PNG, JPG, JPEG, WEBP ይደገፋሉ",
+    "uploading": "በመጫን ላይ...",
+    "remove": "አስወግድ"
+  },
+  "dms": {
+    "menu": {
+      "showing": "በማሳየት ላይ",
+      "of": "የ",
+      "prev": "ቀዳሚ",
+      "next": "ቀጣይ",
+      "totalActivities": "ጠቅላላ ተግባራት",
+      "time": "ሰዓት",
+      "user": "ተጠቃሚ",
+      "action": "ተግባር",
+      "descriptions": "መግለጫ",
+      "module": "ሞጁል",
+      "severity": "ክብደት",
+      "status": "ሁኔታ",
+      "totalAc": "ጠቅላላ ተግባራት",
+      "successRate": "የስኬት መጠን",
+      "dailyAv": "የቀን አማካይ",
+      "uniqueUsers": "ለይቶ የታወቁ ተጠቃሚዎች",
+      "topAc": "ከፍተኛ ተግባራት",
+      "description": "የመያዣ ልክን በተለያዩ ደረጃዎች መቆጣጠር።",
+      "home": "መነሻ",
+      "times": "ጊዜ",
+      "refresh": "ማደስ",
+      "activeLogs": "ንቁ መዝገቦች",
+      "filters": "ማጣሪያዎች",
+      "clear": "አጽዳ",
+      "loadingAc": "እንቅስቃሴዎችን በመጫን ላይ...",
+      "noActivities": "ምንም እንቅስቃሴዎች አልተገኙም",
+      "tryAdjusting": "አማራጭ ማጣሪያዎችን በመጠቀም ወይም የፍለጋ ቃሉን በመቀየር የሚፈልጉትን ለማግኘት ይሞክሩ",
+      "clearAllFilter": "ሁሉንም ማጣሪያዎች አጽዳ",
+      "sizeLimi": "የመጠን ገደብ",
+      "cardView": "የካርድ እይታ",
+      "cards": "ካርዶች",
+      "tableView": "የሰንጠረዥ እይታ",
+      "table": "ሰንጠረዥ",
+      "activeFilter": "ንቁ ማጣሪያ",
+      "export": "ወደ ውጪ ላክ",
+      "myFiles": "የእኔ ፋይሎች",
+      "recent": "የቅርብ ጊዜ",
+      "favorites": "ተወዳጆች",
+      "shared": "የተጋሩ",
+      "myShares": "የእኔ ማጋሪያዎች",
+      "activity": "እንቅስቃሴ",
+      "versionHistory": "የስሪት ታሪክ",
+      "ocrTool": "OCR መሣሪያ",
+      "reports": "ሪፖርቶች",
+      "recycleBin": "ሪሳይክል ቢን",
+      "retentionPolicies": "የማቆያ ፖሊሲዎች",
+      "sizeLimits": "የመጠን ገደቦች",
+      "documentTemplates": "የሰነድ አብነቶች",
+      "documents": "ሰነዶች",
+      "yourFilesAndFolders": "የእርስዎ ፋይሎች እና ፎልደሮች",
+      "new": "አዲስ",
+      "notifications": "ማሳወቂያዎች",
+      "main": "ዋና",
+      "sharing": "ማጋራት",
+      "toolsAndActivity": "መሣሪያዎች እና እንቅስቃሴዎች",
+      "more": "ተጨማሪ",
+      "settings": "ቅንጅቶች",
+      "quickActions": "ፈጣን እርምጃዎች",
+      "upload": "ጫን",
+      "newFolder": "አዲስ ፎልደር",
+      "newDocument": "አዲስ ሰነድ",
+      "newExcel": "አዲስ Excel",
+      "newPowerPoint": "አዲስ PowerPoint",
+      "share": "አጋራ",
+      "storage": "ማከማቻ",
+      "helpAndSupport": "እርዳታ እና ድጋፍ",
+      "available": "{{size}} ይገኛል",
+      "failedToLoadStorage": "የማከማቻ ማጠቃለያ መጫን አልተቻለም",
+      "storageLimitNotSet": "የማከማቻ ገደብ አልተቀመጠም"
+    },
+    "notifications": {
+      "title": "ማሳወቂያዎች",
+      "unreadCount": "{{count}} ያልተነበቡ",
+      "allCaughtUp": "ሁሉንም አንብበዋል",
+      "refresh": "አድስ",
+      "markAllRead": "ሁሉንም እንደተነበበ ምልክት አድርግ",
+      "markAllSeen": "ሁሉንም እንደተታየ ምልክት አድርግ",
+      "markSeen": "እንደተታየ ምልክት አድርግ",
+      "markSeenError": "ማሳወቂያውን እንደተታየ ምልክት ማድረግ አልተቻለም",
+      "markSeenSuccess": "ማሳወቂያው እንደተታየ ምልክት ተደርጎበታል",
+      "statusUnread": "ያልተነበበ",
+      "statusSeen": "ተታይቷል",
+      "tabAll": "ሁሉ",
+      "tabUnread": "ያልተነበቡ",
+      "loadError": "ማሳወቂያዎችን መጫን አልተቻለም",
+      "markReadError": "ማሳወቂያውን እንደተነበበ ምልክት ማድረግ አልተቻለም",
+      "tryAgain": "እንደገና ሞክር",
+      "emptyUnread": "ያልተነበቡ ማሳወቂያዎች የሉም",
+      "emptyAll": "እስካሁን ማሳወቂያ የለም",
+      "emptyHint": "አዲስ እንቅስቃሴ እዚህ ይታያል"
+    },
+    "browse": {
+      "type": "አይነት",
+      "name": "ስም",
+      "docType": "የሰነድ አይነት",
+      "size": "መጠን",
+      "created": "የተፈጠረበት ቀን",
+      "updated": "የተሻሻለበት ቀን",
+      "collaborators": "ቡድን",
+      "owner": "ባለቤት",
+      "editor": "አዘጋጅ",
+      "folders": "ፎልደሮች",
+      "files": "ፋይሎች",
+      "loading": "ፋይሎች በመጫን ላይ...",
+      "header": {
+        "searchPlaceholder": "ፋይሎችን እና ፎልደሮችን ፈልግ",
+        "refresh": "አድስ",
+        "sort": "ደርድር",
+        "sortBy": "በምን ይደርደር",
+        "fields": {
+          "type": "አይነት",
+          "name": "ስም",
+          "modified": "የተሻሻለበት ቀን",
+          "size": "መጠን"
+        },
+        "direction": {
+          "asc": "ከአነስተኛ ወደ ከፍተኛ",
+          "desc": "ከከፍተኛ ወደ አነስተኛ"
+        },
+        "view": {
+          "tiles": "የታይል እይታ",
+          "list": "የዝርዝር እይታ",
+          "clientPagination": "በተጠቃሚው ወገን የሚከናወን ገጽ አከፋፈል"
+        }
+      },
+      "modals": {
+        "delete": {
+          "titleFolder": "ፎልደር ሰርዝ",
+          "titleFile": "ፋይል ሰርዝ",
+          "description": "በእርግጥ መሰረዝ ይፈልጋሉ?",
+          "confirmFolder": "ፎልደሩን ሰርዝ",
+          "confirmFile": "ፋይሉን ሰርዝ"
+        },
+        "rename": {
+          "titleFolder": "ፎልደር ስም ቀይር",
+          "titleFile": "ፋይል ስም ቀይር",
+          "descriptionFolder": "ለዚህ ፎልደር አዲስ ስም ያስገቡ።",
+          "descriptionFile": "ለዚህ ፋይል አዲስ ስም ያስገቡ።"
+        },
+        "moveModal": {
+          "titleFolder": "ፎልደር አዛውር",
+          "titleFile": "ፋይል አዛውር",
+          "description": "መድረሻውን ፎልደር መለያ (ID) ያስገቡ። ወደ ዋናው ማህደር ለማዛወር ባዶ ይተውት።"
+        }
+      },
+      "toolbar": {
+        "quick": "የቀጥታ አቅጣጫዎች",
+        "deleteFile": "ፋይል ሰርዝ",
+        "renameFile": "ፋይል ስም ቀይር",
+        "deleteFolder": "ፎልደር ሰርዝ",
+        "back": "ተመለስ",
+        "upload": "ጫን",
+        "new": "አዲስ",
+        "newFolder": "አዲስ ፎልደር",
+        "openDetails": "ዝርዝር መረጃ",
+        "newDoc": "አዲስ ሰነድ",
+        "save": "መዝግብ",
+        "navigation": "ናቪጌሽን",
+        "backToCreate": "ወደ ፈጠራው ተመለስ",
+        "newDocCreate": "አዲስ ሰነድ ፍጠር",
+        "chooseType": "ዓይነት ይምረጡ፣ ስም ይስጡት፣ ከዚያ በአርታዒው ውስጥ ይክፈቱ",
+        "editorError": "የአርታዒው ስህተት (Editor Error)",
+        "dismiss": "ዝጋ",
+        "backFolder": "ወደ ፎልደሩ ተመለስ",
+        "activeEditor": "Active Editor",
+        "documentName": "የሰነድ ስም",
+        "finalName": "የመጨረሻው ፋይል ስም",
+        "documentType": "የሰነድ አይነት",
+        "location": "ቦታ",
+        "willBeCreatedIn": "በአሁኑ ፎልደር ውስጥ ሰነድ ይፈጠራል",
+        "willOpen": "ሰነዱ በአርታዒው ውስጥ ይከፈታል",
+        "cancel": "ተመለስ",
+        "creating": "በመፍጠር ላይ…",
+        "createAndOpenEditor": "ፍጠር እና አርታዒውን ክፈት",
+        "user": "ተጠቃሚ",
+        "openNewTab": "በአዲስ ትር ይክፈቱ",
+        "documentEditOnline": "የሰነድ በኢንተርኔት ላይ በማረም ላይ",
+        "creatingDoc": "የሰነድ በመፍጠር ላይ…",
+        "myDocuments": "የእኔ ሰነዶች",
+        "myDocumentsDesc": "ሁሉም ሰነዶች ከስሪት ታሪክ ጋር {{mode}}",
+        "browseAll": "ሁሉንም ያስሱ",
+        "error": {
+          "failedToCreate": "መዝገቡን መፍጠር አልተቻለም",
+          "failedToLoad": "መረጃ መጫን አልተቻለም",
+          "error": "ስህተት",
+          "uploadFailed": "ማስገባት አልተሳካም",
+          "failedToLoadFolderContents": "የፎልደሩን ይዘቶች መጫን አልተቻለም።",
+          "failedToLoadText": "ጽሁፉን መጫን አልተቻለም",
+          "failedToDownload": "ማውረድ አልተቻለም",
+          "failedToLoadDetails": "ዝርዝር መረጃዎችን መጫን አልተቻለም",
+          "selectEmployee": "ቢያንስ አንድ ሰራተኛ ይምረጡ",
+          "summarizeFailed": "አጭር መግለጫ ማውጣት አልተቻለም",
+          "copyFailed": "ኮፒ ማድረግ አልተቻለም",
+          "deleteFailed": "መሰረዝ አልተቻለም",
+          "partialDeleteFailed": "{{count}} ንጥሎች ውስጥ {{success}} ተሰርዘዋል። {{failed}} መሰረዝ አልተቻሉም።",
+          "renameFailed": "ስም መቀየር አልተቻለም",
+          "actionFailed": "ድርጊቱ አልተሳካም",
+          "failedToFavorite": "ወደ ተወዳጆች መጨመር አልተቻለም"
+        },
+        "searchPlaceholder": "ፋይሎችን እና ፎልደሮችን ይፈልጉ",
+        "refresh": "አድስ",
+        "sort": "ድርድር",
+        "sortBy": "በ... ደርድር",
+        "sortOptions": {
+          "type": "ዓይነት",
+          "name": "ስም",
+          "modified": "የተሻሻለበት ቀን",
+          "size": "መጠን",
+          "asc": "የሚወጣ",
+          "desc": "የሚወርድ",
+          "newest": "አዲስ",
+          "oldest": "አሮጌ"
+        },
+        "viewOptions": {
+          "tiles": "የምስል እይታ",
+          "list": "የዝርዝር እይታ"
+        },
+        "clientPagination": "የክሊየንት ገጽ አመዳደብ",
+        "home": "መነሻ",
+        "foldersLabel": "ፎልደሮች",
+        "filesLabel": "ፋይሎች",
+        "noFilesFound": "ምንም ፋይሎች አልተገኙም",
+        "getStarted": "ለመጀመር አዲስ ሰነድ ይስቀሉ ወይም ይፍጠሩ።",
+        "loadingFiles": "ፋይሎችን በመጫን ላይ…",
+        "loadingDetails": "ዝርዝር መረጃዎችን በመጫን ላይ…",
+        "detailsLoaded": "ተጭኗል",
+        "sharedSuccess": "በተሳካ ሁኔታ ተጋርቷል",
+        "addedToFavorites": "ወደ ተወዳጆች ታክሏል",
+        "folderDeleted": "ፎልደሩ ተሰርዟል",
+        "fileDeleted": "ፋይሉ ተሰርዟል",
+        "folderRenamed": "የፎልደሩ ስም ተቀይሯል",
+        "fileRenamed": "የፋይሉ ስም ተቀይሯል",
+        "folderCopied": "ፎልደሩ በተሳካ ሁኔታ ተደግሟል",
+        "folderMoved": "ፎልደሩ በተሳካ ሁኔታ ተዛውሯል",
+        "copiedSuccess": "በተሳካ ሁኔታ ተደግሟል",
+        "movedSuccess": "በተሳካ ሁኔታ ተዛውሯል",
+        "deleteConfirm": "እርግጠኛ ነዎት \"{{label}}\" መሰረዝ ይፈልጋሉ?",
+        "renameFolderDesc": "ለዚህ ፎልደር አዲስ ስም ያስገቡ።",
+        "renameFileDesc": "ለዚህ ፋይል አዲስ ስም ያስገቡ።",
+        "allUploaded": "በተሳካ ሁኔታ {{count}} ፋይሎች ተጭነዋል",
+        "someUploaded": "{{success}} ፋይሎች ተጭነዋል፣ {{fail}} አልተጫኑም",
+        "uploadFailedReason": "ጭነቱ አልተሳካም: {{reason}}",
+        "summarizePrompt": "እባክዎን ይህንን ሰነድ በአጭሩ ይግለጹ:",
+        "copiedToClipboard": "ኮፒ ተደርጓል",
+        "copyItem": "ኮፒ ንጥል",
+        "copyHere": "እዚህ ጋር ገልብጥ",
+        "actions": {
+          "open": "ክፈት",
+          "preview": "ቅድመ እይታ",
+          "download": "አውርድ",
+          "versions": "የቀድሞ ስሪቶች",
+          "details": "ዝርዝር መረጃ",
+          "summarize": "አጫጭር መግለጫ",
+          "share": "አጋራ…",
+          "favoriteAdd": "ወደ ተወዳጆች አክል",
+          "favoriteRemove": "ከተወዳጆች አስወግድ",
+          "rename": "ስም ቀይር",
+          "copyTo": "ኮፒ አድርግ…",
+          "moveTo": "አዛውር…",
+          "delete": "ሰርዝ",
+          "more": "ተጨማሪ",
+          "moreActions": "ተጨማሪ ተግባራት",
+          "opening": "በመክፈት ላይ…",
+          "opened": "ተከፍቷል: {{title}}"
+        },
+        "labels": {
+          "name": "ስም",
+          "dateModified": "የተሻሻለበት ቀን",
+          "size": "መጠን"
+        },
+        "status": {
+          "recently": "በቅርቡ"
+        },
+        "fallbacks": {
+          "untitled": "ያልተሰየመ",
+          "folder": "ፎልደር"
+        },
+        "details": {
+          "folderDetails": "የፎልደሩ ዝርዝር መረጃ",
+          "documentDetails": "የሰነዱ ዝርዝር መረጃ",
+          "type": "ዓይነት",
+          "name": "ስም",
+          "created": "የተፈጠረበት ቀን",
+          "updated": "የተሻሻለበት ቀን",
+          "docType": "የሰነድ ዓይነት",
+          "size": "መጠን"
+        },
+        "confirmDownload": "\"{{title}}\" እዚህ መታየት አይችልም።\n\nአሁን ማውረድ ይፈልጋሉ?",
+        "recentDocuments": "የቅርብ ጊዜ ሰነዶች",
+        "recentDocumentsMine": "በቅርብ የተሻሻሉ ሰነዶች",
+        "searchRecentPlaceholder": "የቅርብ ጊዜ ሰነዶችን ይፈልጉ…",
+        "goToDocs": "ወደ ሰነዶች ሂድ",
+        "clearSearch": "ፍለጋውን አጽዳ",
+        "noRecentDocumentsFound": "የቅርብ ጊዜ ሰነዶች አልተገኙም",
+        "noRecentDocumentsYet": "ገና ምንም ሰነዶች አልከፈቱም። ሰነዶችን በማስቀመጥ ወይም በመፍጠር ይጀምሩ።",
+        "recentSort": {
+          "updatedDesc": "የተሻሻለ (ከአዲስ ወደ አሮጌ)",
+          "updatedAsc": "የተሻሻለ (ከአሮጌ ወደ አዲስ)",
+          "nameAsc": "ስም (ከA-Z)",
+          "nameDesc": "ስም (ከZ-A)"
+        },
+        "paginationInfo": "ገጽ {{page}} • ጠቅላላ {{total}} ሰነዶች",
+        "versionsWithTitle": "የቀድሞ ስሪቶች — {{title}}"
+      },
+      "search": {
+        "templatesPlaceholder": "አብነቶችን በስም ይፈልጉ…",
+        "templatesAriaLabel": "አብነቶችን በስም ይፈልጉ"
+      }
+    },
+    "dialogs": {
+      "details": {
+        "title": "ዝርዝር መረጃ",
+        "folder": "ፎልደር",
+        "file": "ፋይል",
+        "labels": {
+          "size": "መጠን",
+          "updated": "የተሻሻለበት",
+          "created": "የተፈጠረበት",
+          "owner": "ባለቤት",
+          "visibility": "ታይነት",
+          "tags": "ታጎች"
+        },
+        "visibility": {
+          "private": "የግል",
+          "shared": "የጋራ",
+          "org": "የድርጅት"
+        },
+        "actions": {
+          "close": "ዝጋ",
+          "copy": "እዚህ ቅዳ",
+          "moveHere": "እዚህ ውሰድ",
+          "copyDoc": "ሰነድ ገልብጥ (Copy)",
+          "moveDoc": "ሰነድ አዛውር (Move)"
+        }
+      },
+      "move": {
+        "title": "አዛውር...",
+        "root": "ዋና ማህደር",
+        "label": "መዳረሻ ፎልደር",
+        "placeholder": "የመዳረሻ ፎልደሩን መለያ (ID) ያስገቡ...",
+        "moving": "በማዛወር ላይ...",
+        "actions": {
+          "cancel": "ተመለስ",
+          "move": "አዛውር"
+        }
+      },
+      "rename": {
+        "title": "ስም ቀይር",
+        "label": "ስም",
+        "placeholder": "አዲስ ስም ያስገቡ",
+        "saving": "በማስቀመጥ ላይ...",
+        "actions": {
+          "cancel": "ተመለስ",
+          "save": "አስቀምጥ"
+        }
+      },
+      "share": {
+        "title": "አጋራ",
+        "description": "የማጋሪያ ሊንክ ለ፦",
+        "label": "የማጋሪያ ሊንክ",
+        "noLink": "ምንም ሊንክ አልተፈጠረም",
+        "actions": {
+          "generate": "ሊንክ ፍጠር",
+          "regenerate": "ሊንኩን እንደገና ፍጠር",
+          "revoke": "ሊንኩን ሰርዝ"
+        }
+      },
+      "upload": {
+        "title": "ፋይሎችን ጫን",
+        "description": "ፋይሎችን እዚህ ይልቀቁ ወይም በመጫን ይምረጡ",
+        "instruction": "ፋይሎችን እዚህ ይልቀቁ ወይም ከኮምፒዩተርዎ ይምረጡ",
+        "supported": "የሚደገፉት፦ DOC/DOCX, XLS/XLSX/CSV, PPT/PPTX, PDF, Images",
+        "browse": "ፋይሎችን ይምረጡ",
+        "selectedCount": "የተመረጡ ፋይሎች ({{count}})",
+        "uploading": "በመጫን ላይ...",
+        "uploadingFiles": "ፋይሎች በመጫን ላይ...",
+        "completed": "ተጠናቀቀ",
+        "uploadAction": "ጫን",
+        "selectedStatus": "{{count}} ፋይል ተመርጧል",
+        "selectedStatus_plural": "{{count}} ፋይሎች ተመርጠዋል",
+        "cancel": "ተመለስ",
+        "success": "{{count}} ፋይሎች ተጭነዋል",
+        "failed": "ጭነቱ አልተሳካም",
+        "videoNotSupported": "የቪዲዮ ፋይሎች አይደገፉም። እባክዎ ሰነድ ወይም ምስል ይጫኑ።",
+        "maxFileSize": "ከፍተኛ የፋይል መጠን፦ {{limit}}",
+        "fileTooLarge": "{{files}} ከ{{limit}} የፋይል መጠን ገደብ በላይ ነው።"
+      }
+    },
+    "documents": {
+      "actionstile": {
+        "title": "የሰነድ ተግባራት",
+        "more": "ተጨማሪ",
+        "favoritesAdd": "በምርጥ ውስጥ አክል",
+        "favoriteRemove": "ከተወዳጆች አስወግድ",
+        "open": "ክፈት",
+        "summarize": "አጠቃልል",
+        "copyTo": "ኮፒ አድርግ…",
+        "moveTo": "አዛውር",
+        "shareEllipsis": "አጋራ…",
+        "preview": "ቅድመ እይታ"
+      },
+      "ai": {
+        "title": "በሰው ሰራሽ ብልህነት አጠቃልል",
+        "description": "ለሰነድዎ ግልጽ እና አጭር ማጠቃለያ ያመንጩ።",
+        "inputLabel": "የሚጠቃለል ጽሁፍ",
+        "inputPlaceholder": "ሊያጠቃልሉት የሚፈልጉትን ይዘት እዚህ ይለጥፉ…",
+        "outputLabel": "የተጠቃለለ ጽሁፍ",
+        "outputPlaceholder": "ማጠቃለያው እዚህ ይታያል…",
+        "processing": "ሰው ሰራሽ ብልህነቱ ሰነድዎን እየመረመረ ነው",
+        "steps": [
+          "የሰነዱን ይዘት በመተንተን ላይ…",
+          "ዋና ዋና ነጥቦችን በመለየት ላይ…",
+          "መረጃውን በማሳጠር ላይ…",
+          "አጭር ማጠቃለያ በመጻፍ ላይ…"
+        ],
+        "actions": {
+          "copy": "ገልብጥ",
+          "close": "ዝጋ",
+          "summarize": "በሰው ሰራሽ ብልህነት አጠቃልል",
+          "thinking": "በማሰብ ላይ…"
+        },
+        "errors": {
+          "failed": "ማጠቃለል አልተቻለም"
+        }
+      },
+      "detailModel": {
+        "empty": {
+          "title": "ምንም ዝርዝር መረጃ የለም",
+          "subtitle": "Properties ለማየት ፋይል ይምረጡ"
+        },
+        "actions": {
+          "cancel": "ተመለስ",
+          "close": "ዝጋ"
+        }
+      },
+      "preview": {
+        "title": "ቅድመ እይታ",
+        "loading": "በመጫን ላይ…",
+        "noPreview": "ይህንን ፋይል እዚህ ማየት አይቻልም። እባክዎ 'ጫን' የሚለውን ይጠቀሙ።",
+        "kinds": {
+          "image": "ምስል",
+          "text": "ጽሁፍ",
+          "audio": "ድምጽ",
+          "video": "ቪዲዮ",
+          "pdf": "ፒ.ዲ.ኤፍ (PDF)",
+          "archive": "አርካይቭ",
+          "download": "ጫን",
+          "office": "ኦፊስ"
+        },
+        "actions": {
+          "download": "ጫን",
+          "downloading": "በመጫን ላይ…",
+          "close": "ዝጋ"
+        },
+        "messages": {
+          "success": "ማውረድ ተጀምሯል",
+          "error": "ማውረድ አልተቻለም"
+        }
+      },
+      "createDoc": {
+        "title": "አዲስ ፋይል",
+        "description": "አዲስ የሰነድ መዝገብ ይፈጥራል።",
+        "labels": {
+          "nameEn": "ስም (በእንግሊዝኛ)",
+          "nameAm": "ስም (በአማርኛ) (ከተፈለገ)",
+          "slug": "ስሉግ/Slug (ከተፈለገ)",
+          "type": "የሰነድ አይነት"
+        },
+        "placeholders": {
+          "slugAuto": "ካልተሞላ በራሱ ይፈጠራል"
+        },
+        "validation": {
+          "enRequired": "የእንግሊዝኛ ስም ያስፈልጋል",
+          "invalid": "የተሳሳተ መረጃ"
+        },
+        "actions": {
+          "cancel": "ሰርዝ",
+          "create": "ፋይል ፍጠር",
+          "creating": "በመፍጠር ላይ…"
+        },
+        "messages": {
+          "success": "ሰነዱ ተፈጥሯል",
+          "error": "ሰነዱን መፍጠር አልተቻለም"
+        }
+      },
+      "delete": {
+        "warning": "ማስጠንቀቂያ",
+        "undoWarning": "ይህ ተግባር አንዴ ከተከናወነ በኋላ ሊቀለበስ አይችልም።",
+        "actions": {
+          "cancel": "ተመለስ",
+          "delete": "አጥፋ",
+          "deleting": "በማጥፋት ላይ…"
+        }
+      },
+      "detailsModal": {
+        "empty": {
+          "title": "ምንም ዝርዝር መረጃ የለም",
+          "subtitle": "ለዚህ ንጥል የሚታይ ምንም ነገር የለም።"
+        },
+        "actions": {
+          "cancel": "ተመለስ",
+          "close": "ዝጋ"
+        }
+      },
+      "overlay": {
+        "status": {
+          "opening": "በመክፈት ላይ…",
+          "loading": "ሰነዱን በመጫን ላይ…",
+          "preparing": "ሰነዱን በማዘጋጀት ላይ…",
+          "preparingEditor": "ማረሚያውን በማዘጋጀት ላይ…",
+          "failed": "መክፈት አልተቻለም",
+          "editing": "በቀጥታ በመቅረጽ ላይ",
+          "noDoc": "ምንም ሰነድ አልተጫነም።",
+          "missingUrl": "የማረሚያው አድራሻ (URL) አልተገኘም።"
+        },
+        "actions": {
+          "close": "ዝጋ",
+          "summarize": "አጠቃልል",
+          "newTab": "በአዲስ ታብ ክፈት",
+          "download": "ጫን"
+        },
+        "errors": {
+          "config": "የማረሚያውን ውቅር ማዘጋጀት አልተቻለም"
+        }
+      },
+      "table": {
+        "empty": {
+          "title": "ምንም ሰነዶች አልተገኙም",
+          "description": "ፍለጋውን ወይም ፊልተሩን በመቀየር ይሞክሩ፣ ወይም አዲስ ሰነድ ይፍጠሩ።"
+        },
+        "searchPlaceholder": "ሰነዶችን ይፈልጉ...",
+        "actions": {
+          "new": "አዲስ ሰነድ",
+          "create": "አዲስ ሰነድ ፍጠር",
+          "preview": "ቅድመ እይታ",
+          "open": "ክፈት",
+          "download": "ጫን"
+        },
+        "footer": {
+          "showing": "በማሳየት ላይ፦",
+          "document": "ሰነድ",
+          "documents": "ሰነዶች",
+          "sortedBy": "የተደረደረው በ"
+        },
+        "cells": {
+          "created": "የተፈጠረበት"
+        },
+        "status": {
+          "published": "የታተመ",
+          "draft": "ረቂቅ",
+          "archived": "የተቀመጠ",
+          "review": "በግምገማ ላይ"
+        }
+      },
+      "toolbar": {
+        "searchPlaceholder": "ፋይሎችን እና ፎልደሮችን ይፈልጉ...",
+        "view": {
+          "grid": "የግርድ እይታ",
+          "list": "የዝርዝር እይታ"
+        },
+        "sort": {
+          "trigger": "ደርድር",
+          "updated_desc": "የተሻሻለ (አዲስ)",
+          "updated_asc": "የተሻሻለ (የቆየ)",
+          "name_asc": "ስም (ከሀ–ፐ)",
+          "name_desc": "ስም (ከፐ–ሀ)"
+        }
+      },
+      "downloads": {
+        "title": "ወርደው የተጫኑ",
+        "overallProgress": "ጠቅላላ ሂደት",
+        "status": {
+          "active": "{{count}} በመውረድ ላይ",
+          "completed": "{{count}} ተጠናቀዋል",
+          "failed": "{{count}} አልተሳካም",
+          "done": "ተጠናቋል",
+          "error": "አልተሳካም",
+          "more": "+{{count}} ተጨማሪ ፋይሎች"
+        },
+        "actions": {
+          "cancel": "አቋርጥ",
+          "cancelAll": "ሁሉንም አቋርጥ",
+          "hide": "ደብቅ"
+        }
+      },
+      "uploadOverlay": {
+        "defaultTitle": "ለመጫን ፋይሎችን እዚህ ያስቀምጡ",
+        "defaultDescription": "ወደዚህ ፎልደር ይጫኑ።",
+        "defaultHint": "ምክር፡ ብዙ ፋይሎችን በአንድ ጊዜ ማስገባት ይችላሉ",
+        "dropZone": {
+          "title": "ፋይል መቀበያ ዝግጁ ነው",
+          "description": "ጭነቱን ለመጀመር የያዙትን ፋይል ይልቀቁት።",
+          "ready": "ዝግጁ",
+          "uploading": "በመጫን ላይ...",
+          "inProgressNote": "ጭነት በመካሄድ ላይ ነው። እባክዎ ይህን ገጽ አይዝጉ።",
+          "standbyNote": "ለመጫን ፋይሎችን እዚህ ይልቀቁ።",
+          "statusProgress": "በሂደት ላይ",
+          "statusStandby": "በጥበቃ ላይ"
+        },
+        "actions": {
+          "close": "ዝጋ",
+          "esc": "Esc",
+          "toClose": "ለመዝጋት",
+          "locked": "(በመጫን ላይ ስለሆነ አይዘጋም)"
+        }
+      },
+      "fileCard": {
+        "preview": "ቅድመ እይታ",
+        "metadataSeparator": "•"
+      },
+      "folderCard": {
+        "defaultName": "ፎልደር",
+        "updated": "የተሻሻለበት ቀን፡ {{date}}",
+        "fileCount": "{{count}} ፋይል",
+        "fileCount_plural": "{{count}} ፋይሎች",
+        "actions": {
+          "trigger": "ተጨማሪ ተግባራት",
+          "open": "ክፈት",
+          "details": "ዝርዝር መረጃ",
+          "star": "ምልክት አድርግ/አንሳ",
+          "rename": "ስም ቀይር",
+          "move": "አንቀሳቅ",
+          "share": "አጋራ",
+          "delete": "ሰርዝ"
+        }
+      },
+      "folderPicker": {
+        "description": "መድረሻ ፎልደር ይምረጡ (ወይም ዋና ማህደር)።",
+        "root": "ዋና ማህደር",
+        "loading": "ፎልደሮች በመጫን ላይ...",
+        "noFolders": "ምንም ፎልደር አልተገኘም።",
+        "actions": {
+          "expand": "ዘርጋ",
+          "collapse": "ሰብሰብ",
+          "cancel": "ተመለስ",
+          "copyHere": "እዚህ ግለጽ",
+          "moveHere": "እዚህ አዛውር"
+        }
+      },
+      "actions": {
+        "trigger": "ተግባራት",
+        "preview": "ቅድመ እይታ",
+        "details": "ዝርዝር መረጃ",
+        "starAdd": "በምርጥ ውስጥ አክል",
+        "starRemove": "ከምርጥ ውስጥ አስወግድ",
+        "moveTo": "ወደ ሌላ ቦታ አዛውር",
+        "rename": "ስም ቀይር",
+        "share": "አጋራ",
+        "delete": "ሰርዝ",
+        "download": "አውርድ (Download)",
+        "extractText": "ጽሑፍ አውጣ (OCR)"
+      },
+      "newMenu": {
+        "trigger": "አዲስ",
+        "folder": "አዲስ ፎልደር",
+        "upload": "ፋይል ጫን",
+        "doc": "ሰነድ (Document)",
+        "ppt": "PowerPoint",
+        "xls": "Excel ሰንጠረዥ"
+      },
+      "pagination": {
+        "showing": "ከ",
+        "of": "ውስጥ",
+        "items": "እየታዩ ነው",
+        "perPage": "በገጽ የሚታዩ፡",
+        "first": "መጀመሪያ ገጽ",
+        "prev": "ቀዳሚ ገጽ",
+        "next": "ቀጣይ ገጽ",
+        "last": "መጨረሻ ገጽ",
+        "pageAria": "ገጽ {{page}}"
+      },
+      "shareMenu": {
+        "share": "ማጋራት",
+        "shareToUser": "ለነጠላ ተጠቃሚ ማጋራት",
+        "shareToUnit": "ለሙሉ ክፍል ማጋራት"
+      },
+      "fileProperties": {
+        "actions": "ድርጊቶች"
+      },
+      "unitShareModal": {
+        "title": "ከክፍል ጋር ማጋራት",
+        "description": "የድርጅት ክፍሎችን ወይም የስራ መደቦችን ይምረጡ እና የፍቃድ ደረጃ ያዘጋጁ።",
+        "permissionLevel": "የፍቃድ ደረጃ",
+        "unitsAndPositions": "ክፍሎች እና የስራ መደቦች",
+        "units": "ክፍሎች",
+        "departments": "ዲፓርትመንቶች",
+        "positions": "ዲፓርትመንቶች",
+        "selected": "ተመርጧል",
+        "searchPlaceholder": "ክፍሎችን ወይም የስራ መደቦችን ይፈልጉ...",
+        "loading": "ክፍሎችን እና የስራ መደቦችን በመጫን ላይ...",
+        "noUnits": "ምንም ክፍል ወይም የስራ መደብ አልተገኘም።",
+        "alreadyShared": "ተጋርቷል",
+        "sharing": "በማጋራት ላይ...",
+        "shareAction": "ማጋራት",
+        "cancel": "ተመለስ",
+        "selectUnit": "ለመጋራት ቢያንስ አንድ ክፍል ወይም የስራ መደብ ይምረጡ",
+        "tabSelected": "ተመርጧል",
+        "noSelected": "ምንም ምርጫ የለም።",
+        "showingRange": "{{from}}–{{to}} ከ {{total}} ታይቷል",
+        "perPage": "በገጽ",
+        "perPageCount": "{{count}} / ገጽ",
+        "pageOf": "{{page}} / {{total}}",
+        "prevPage": "ቀዳሚ ገጽ",
+        "nextPage": "ቀጣይ ገጽ",
+        "removedSuccess": "የክፍል መዳረሻ ተወግዷል",
+        "removeFailed": "የክፍል መዳረሻ ማስወገድ አልተሳካም",
+        "removedDepartmentSuccess": "የዲፓርትመንት መዳረሻ ተወግዷል",
+        "removeDepartmentFailed": "የዲፓርትመንት መዳረሻ ማስወገድ አልተሳካም",
+        "canDownload": {
+          "label": "ማውረድ ፍቀድ",
+          "desc": "የክፍሉ አባላት ይህን ንጥል ማውረድ ይችላሉ"
+        }
+      },
+      "shareModal": {
+        "title": "ሰነድ አጋራ",
+        "description": "ተቀጣሪዎችን ይምረጡ እና የፍቃድ ደረጃቸውን ይወስኑ።",
+        "permissionLevel": "የፍቃድ ደረጃ",
+        "employees": "ተቀጣሪዎች",
+        "yourUnit": "(የእርስዎ ክፍል)",
+        "selected": "የተመረጡ",
+        "searchPlaceholder": "ተቀጣሪዎችን ይፈልጉ...",
+        "loading": "ተቀጣሪዎች በመጫን ላይ...",
+        "noEmployees": "ምንም ተቀጣሪ አልተገኘም።",
+        "sharing": "በማጋራት ላይ...",
+        "shareAction": "አጋራ",
+        "cancel": "ተመለስ",
+        "roles": {
+          "viewer": "ተመልካች",
+          "editor": "አዘጋጅ"
+        },
+        "currentAccess": "አሁን ያለ ፍቃድ",
+        "loadingCollaborators": "በመጫን ላይ…",
+        "editPermission": "ፍቃድ አስተካክል"
+      },
+      "shared": {
+        "title": "ከእኔ ጋር የተጋሩ",
+        "home": "መነሻ",
+        "subtitle": "ከእርስዎ ጋር የተጋሩ ፋይሎች እና ፎልደሮች",
+        "back": "ተመለስ",
+        "refresh": "አዘምን",
+        "sort": "ደርድር",
+        "sortBy": "ደርድር በ",
+        "clearSearch": "ፍለጋ አጽዳ",
+        "document": "ሰነድ",
+        "folder": "ፎልደር",
+        "fields": {
+          "type": "አይነት",
+          "name": "ስም",
+          "modified": "የተሻሻለበት ቀን",
+          "size": "መጠን"
+        },
+        "direction": {
+          "asc": "ወደ ላይ",
+          "desc": "ወደ ታች"
+        },
+        "view": {
+          "tiles": "የታይል እይታ",
+          "list": "የዝርዝር እይታ"
+        },
+        "actions": {
+          "download": "አውርድ",
+          "share": "አጋራ",
+          "delete": "ሰርዝ",
+          "rename": "ስም ቀይር",
+          "move": "አንቀሳቅስ",
+          "copy": "ቅዳ",
+          "open": "ክፈት",
+          "preview": "ቅድመ እይታ",
+          "summarize": "ማጠቃለያ",
+          "addedToFavorites": "ወደ ተወዳጆች ታክሏል",
+          "copyHere": "እዚህ ቅዳ",
+          "moveHere": "እዚህ አንቀሳቅስ"
+        },
+        "sections": {
+          "folders": "የተጋሩ ፎልደሮች",
+          "files": "የተጋሩ ፋይሎች"
+        },
+        "empty": {
+          "title": "ምንም የተጋሩ ፋይሎች አልተገኙም",
+          "search": "ከእርስዎ ፍለጋ ጋር የሚዛመዱ ፋይሎች አልተገኙም።",
+          "description": "እስካሁን ምንም የተጋሩ ፋይሎች የሉዎትም። ከእርስዎ ጋር የተጋሩ ፋይሎች እዚህ ይታያሉ።"
+        },
+        "roles": {
+          "owner": "ባለቤት",
+          "editor": "አርታኢ",
+          "viewer": "ተመልካች"
+        },
+        "details": {
+          "yourRole": "የእርስዎ ሚና",
+          "sharedBy": "የተጋራው በ",
+          "clientPagination": "የደንበኛ ገፅ መቁጠሪያ",
+          "folderTitle": "የተጋራ ፎልደር ዝርዝሮች",
+          "docTitle": "የተጋራ ሰነድ ዝርዝሮች",
+          "docType": "የሰነድ አይነት",
+          "created": "የተፈጠረበት",
+          "updated": "የተሻሻለበት",
+          "collaborators": "ተባባሪዎች"
+        },
+        "notifications": {
+          "selectEmployee": "ቢያንስ አንድ ሰራተኛ ይምረጡ",
+          "sharedSuccess": "በተሳካ ሁኔታ ተጋርቷል",
+          "folderDeleted": "ፎልደር ተሰርዟል",
+          "fileDeleted": "ፋይል ተሰርዟል",
+          "folderRenamed": "የፎልደር ስም ተቀይሯል",
+          "folderMoved": "ፎልደር ተንቀሳቅሷል",
+          "copiedSuccess": "በተሳካ ሁኔታ ተቀድቷል"
+        },
+        "modals": {
+          "delete": {
+            "folder": "ፎልደር ሰርዝ",
+            "file": "ፋይል ሰርዝ",
+            "confirm": "እርግጠኛ ነዎት \"{{name}}\" ሰርዘው ይጥፋ?"
+          },
+          "rename": {
+            "folderTitle": "የፎልደር ስም ቀይር",
+            "fileTitle": "የፋይል ስም ቀይር",
+            "folder": "ለዚህ ፎልደር አዲስ ስም ያስገቡ።",
+            "file": "ለዚህ ፋይል አዲስ ስም ያስገቡ።"
+          },
+          "move": {
+            "folderTitle": "ፎልደር አዛውር",
+            "fileTitle": "ፋይል አዛውር",
+            "description": "መዳረሻ ፎልደር መለያ ያስገቡ። ወደ ዋናው ለማንቀሳቀስ ባዶ ይተዉት።"
+          },
+          "copy": {
+            "folderTitle": "ፎልደር ገልብጥ",
+            "fileTitle": "ፋይል ገልብጥ"
+          }
+        },
+        "loading": {
+          "files": "የተጋሩ ፋይሎች በመጫን ላይ...",
+          "details": "ዝርዝሮች በመጫን ላይ..."
+        },
+        "errors": {
+          "loadItems": "የተጋሩ እቃዎችን መጫን አልተቻለም።",
+          "loadHierarchy": "የፎልደር መዋቅር መጫን አልተቻለም",
+          "loadDoc": "ሰነዱን መጫን አልተቻለም",
+          "download": "ማውረድ አልተሳካም"
+        }
+      },
+      "activity": {
+        "title": "DMS የድርጊት መዝገብ",
+        "subtitle": "ለDMS ሞጁል የኦዲት ክስተቶችን ይቆጣጠሩ እና ይከታተሉ",
+        "general": {
+          "title": "የድርጊት መዝገብ",
+          "subtitle": "በመድረኩ ላይ የኦዲት ክስተቶችን ይቆጣጠሩ እና ይከታተሉ",
+          "refresh": "አድስ",
+          "export": "ላክ",
+          "filters": "ማጣሪያዎች",
+          "cardView": "የካርድ እይታ",
+          "tableView": "የሰንጠረዥ እይታ",
+          "cards": "ካርዶች",
+          "table": "ሰንጠረዥ",
+          "clear": "አጽዳ",
+          "clearAll": "ሁሉንም አጽዳ",
+          "auditId": "የኦዲት መለያ",
+          "viewDetails": "ዝርዝሮችን ይመልከቱ",
+          "loading": "ድርጊቶች በመጫን ላይ...",
+          "noActivities": "ምንም ድርጊቶች አልተገኙም",
+          "noResults": "የሚፈልጉትን ለማግኘት ማጣሪያዎችን ወይም የፍለጋ ቃልን ለማስተካከል ይሞክሩ።",
+          "showing": "ከጠቅላላ {{total}} ድርጊቶች {{count}} እየታዩ ነው",
+          "prev": "ቀዳሚ",
+          "next": "ቀጣይ",
+          "auditLogsLoaded": "የኦዲት መዝገቦች ተጭነዋል",
+          "failedLoad": "የኦዲት መዝገቦችን መጫን አልተቻለም",
+          "missingKey": "ለኦዲት መዝገቦች moduleKey ጠፍቷል"
+        },
+        "table": {
+          "time": "ሰዓት",
+          "user": "ተጠቃሚ",
+          "action": "ተግባር",
+          "description": "መግለጫ",
+          "module": "ሞጁል",
+          "severity": "ክብደት",
+          "status": "ሁኔታ"
+        },
+        "stats": {
+          "total": "ጠቅላላ ድርጊቶች",
+          "successRate": "የስኬት መጠን",
+          "dailyAvg": "የቀን አማካይ",
+          "uniqueUsers": "ልዩ ተጠቃሚዎች",
+          "topActions": "ከፍተኛ ተግባራት",
+          "times": "ጊዜያት"
+        },
+        "filters": {
+          "search": "ድርጊቶችን ይፈልጉ...",
+          "module": "ሞጁል",
+          "allModules": "ሁሉም ሞጁሎች",
+          "action": "ተግባር",
+          "allActions": "ሁሉም ተግባራት",
+          "status": "ሁኔታ",
+          "allStatuses": "ሁሉም ሁኔታዎች",
+          "success": "ተሳክቷል",
+          "failure": "አልተሳካም",
+          "warning": "ማስጠንቀቂያ",
+          "pending": "በጥበቃ ላይ",
+          "dateRange": "የቀን ክልል",
+          "last7Days": "ያለፉት 7 ቀናት",
+          "last30Days": "ያለፉት 30 ቀናት",
+          "activeFilter": "ንቁ ማጣሪያ",
+          "activeFilters": "ንቁ ማጣሪያዎች"
+        },
+        "severity": {
+          "critical": "ወሳኝ",
+          "high": "ከፍተኛ",
+          "medium": "መካከለኛ",
+          "low": "ዝቅተኛ"
+        },
+        "card": {
+          "resource": "ምንጭ",
+          "details": "ዝርዝሮች",
+          "ip": "አይፒ",
+          "location": "ቦታ"
+        },
+        "descriptions": {
+          "updated": "{{entity}} ተሻሽሏል",
+          "created": "{{entity}} ተፈጥሯል",
+          "deleted": "{{entity}} ተሰርዟል",
+          "actionOn": "{{method}} በ {{entity}} ላይ"
+        }
+      },
+      "ocr": {
+        "files": "ፋይሎች",
+        "ocrTool": "የOCR መሳሪያ",
+        "extractText": "ከምስሎች ጽሑፍ ያውጡ",
+        "chooseFile": "ፋይል ይምረጡ",
+        "runOcr": "OCR ያሂዱ",
+        "reset": "እንደገና አስጀምር",
+        "copy": "ቅዳ",
+        "download": "አውርድ",
+        "clear": "አጽዳ",
+        "preprocess": "ቅድመ-ዝግጅት",
+        "english": "እንግሊዝኛ",
+        "amharic": "አማርኛ",
+        "uploading": "ምስሉን በመጫን ላይ...",
+        "preprocessing": "ምስሉን በማዘጋጀት ላይ...",
+        "converting": "ወደ ቤዝ64 በመቀየር ላይ...",
+        "performing": "OCR በማከናወን ላይ...",
+        "complete": "ተጠናቋል",
+        "progress": "ሂደት: {{progress}}%",
+        "processing": "በማከናወን ላይ...",
+        "uploadImageError": "እባክዎን ምስል ይጫኑ (png/jpg/webp)።",
+        "selectFileFirst": "ቅድሚያ ፋይል ይምረጡ።",
+        "noTextDetected": "OCR ተጠናቋል፣ ነገር ግን ምንም ጽሑፍ አልተገኘም።",
+        "ocrCompleted": "OCR ተጠናቅቋል።",
+        "failedTryAgain": "OCR አልተሳካም። እባክዎ እንደገና ይሞክሩ።",
+        "copiedToClipboard": "ጽሑፉ ወደ ቅንጥብ ሰሌዳ ተገልብጧል",
+        "copyFailed": "ጽሑፉን መቅዳት አልተሳካም",
+        "textDownloaded": "ጽሑፉ ወርዷል",
+        "clearerImage": "OCR አልተሳካም። እባክዎ በበለጠ ግልጽ ምስል ይሞክሩ ወይም የእንግሊዝኛ ቋንቋን ይጠቀሙ።",
+        "inputImage": "የገቢ ምስል",
+        "uploadToExtract": "ጽሑፍ ለማውጣት ምስል ይጫኑ",
+        "noFileSelected": "ምንም ፋይል አልተመረጠም",
+        "clickToChoose": "ምስል ለመጫን \"ፋይል ይምረጡ\" የሚለውን ጠቅ ያድርጉ",
+        "supports": "የሚደገፉ: PNG, JPG, WebP",
+        "previewUnavailable": "ቅድመ እይታ አይገኝም።",
+        "file": "ፋይል:",
+        "extractedText": "የወጣ ጽሑፍ",
+        "resultsPlaceholder": "የOCR ውጤቶች እዚህ ይታያሉ",
+        "words": "ቃላት",
+        "characters": "ቁምፊዎች",
+        "tips": "የተሻለ የOCR ውጤት ለማግኘት የሚረዱ ነጥቦች:",
+        "tip1": "ጥሩ ብርሃን ያላቸው ከፍተኛ ጥራት ያላቸውን ምስሎች ይጠቀሙ",
+        "tip2": "ጽሑፉ በግልጽ የሚታይ እና ያልደበዘዘ መሆኑን ያረጋግጡ",
+        "tip3": "ለተቃኙ ሰነዶች \"ቅድመ-ዝግጅት\"ን ያብሩ",
+        "tip4": "ውስብስብ ዳራዎችን እና የውሃ ምልክቶችን ያስወግዱ",
+        "tip5": "ለተሻለ ውጤት የእንግሊዝኛ ጽሑፍ ይጠቀሙ",
+        "textExtraction": "ጽሑፍ ማውጣት",
+        "extractFromImages": "ከምስሎች እና ፒዲኤፍ ጽሑፍ ያውጡ",
+        "multiLanguage": "ሁለገብ ቋንቋ",
+        "supportsEngAmh": "እንግሊዝኛ እና አማርኛን ይደግፋል",
+        "smartPreprocess": "ብልጥ ቅድመ-ዝግጅት",
+        "enhanceQuality": "ለተሻለ ትክክለኛነት የምስል ጥራትን ያሻሽላል",
+        "note": "ማስታወሻ:",
+        "amhNote": "የአማርኛ OCR እንግሊዝኛን እንደ አማራጭ ይጠቀማል። ለተሻለ የአማርኛ ድጋፍ የተለየ የOCR አገልግሎት መጠቀምን ያስቡበት።",
+        "extractFromFile": "{{fileName}} ከOCR ጽሑፍ ያውጡ",
+        "theSelectedFile": "የተመረጠው ፋይል",
+        "selectLanguage": "ቋንቋ ይምረጡ",
+        "fileTypeNotSupported": "ይህ የፋይል አይነት ለOCR አይደለም። የሚደገፉ ዓይነቶች፡ PNG, JPG, TIFF, BMP, GIF, PDF",
+        "reExtract": "እንደገና ይውጡ",
+        "mayTakeAMoment": "ትንሽ ጊዜ ሊወስድ ይችላል",
+        "tryAgain": "እንደገና ሞክሩ",
+        "copied": "ተቅዷል",
+        "close": "ዝጋ",
+        "processingImage": "ምስሉን በማከናወን ላይ...",
+        "runOcrToExtract": "ከምስሉ ላይ ጽሑፍ ለማውጣት \"OCR ያሂዱ\" የሚለውን ጠቅ ያድርጉ...",
+        "uploadToBegin": "ለመጀመር ምስል ይጫኑ...",
+        "language": "ቋንቋ",
+        "best": "ምርጥ",
+        "beta": "ቤታ",
+        "imageProcessing": "የምስል ዝግጅት",
+        "limitationsTitle": "የአማርኛ OCR ገደቦች",
+        "limitationsDesc": "የአማርኛ OCR በሙከራ ሂደት ላይ ያለ ነው እና ዝቅተኛ ትክክለኛነት ሊኖረው ይችላል። ለተሻለ ውጤት ግልጽ ጽሑፍ ያላቸው ጥራት ያላቸው ምስሎችን ይጠቀሙ።",
+        "expectedTime": "የሚጠበቀው የማከናወኛ ጊዜ",
+        "smallImages": "አነስተኛ ምስሎች",
+        "largeDocs": "ትላልቅ ሰነዶች/ሰነዶች",
+        "textExtracted": "ጽሑፍ ወጥቷል",
+        "noTextExtracted": "እስካሁን የወጣ ጽሑፍ የለም",
+        "uploadToBeginDesc": "ጽሑፍ ያለበት ምስል ይጫኑ እና OCR ን ለመጀመር \"OCR ያሂዱ\" የሚለውን ጠቅ ያድርጉ።",
+        "processingError": "የማከናወኛ ስህተት",
+        "processingWait": "ምስልዎን በማከናወን ላይ... ጥቂት ጊዜ ሊወስድ ይችላል።",
+        "errorDuringProcessing": "በማከናወን ላይ ስህተት ተከስቷል።"
+      },
+      "trash": {
+        "files": "ፋይሎች",
+        "recycleBin": "የሪሳይክል ቢን",
+        "cancel": "ተሰርዝ",
+        "restore": "ወደ ነበረበት መልስ",
+        "delete": "ሰርዝ",
+        "refresh": "አድስ",
+        "backToFiles": "ወደ ፋይሎች ተመለስ",
+        "open": "ክፈት",
+        "restoreItems": "እቃዎችን ወደ ነበረበት ይመልሱ?",
+        "restoreItem": "እቃውን ወደ ነበረበት ይመልሱ?",
+        "restoreItemsDesc": "ይህ {{count}} እቃዎችን ወደ ፋይሎች ይመልሳል።",
+        "restoreItemDesc": "ይህ የተመረጠውን እቃ ወደ ፋይሎች ይመልሳል።",
+        "deleteItemsForever": "እቃዎችን ለዘላለም ሰርዝ?",
+        "deleteItemForever": "እቃውን ለዘላለም ሰርዝ?",
+        "deleteItemsForeverDesc": "እነዚህ {{count}} እቃዎች በቋሚነት ይጠፋሉ:: ይህ ሊቀለበስ አይችልም።",
+        "deleteItemForeverDesc": "ይህ እቃ በቋሚነት ይጠፋል:: ይህ ሊቀለበስ አይችልም።",
+        "selectAll": "ሁሉንም ምረጥ",
+        "name": "ስም",
+        "dateDeleted": "የጠፋበት ቀን",
+        "by": "በ",
+        "you": "እርስዎ",
+        "selected": "{{count}} ተመርጠዋል",
+        "selectToRestore": "ወደ ነበረበት ለመመለስ ወይም ለመሰረዝ እቃዎችን ይምረጡ",
+        "deletedLabel": "የጠፋው:",
+        "byLabel": "በ:",
+        "searchDoc": "የጠፉ ሰነዶችን ይፈልጉ...",
+        "loading": "በመጫን ላይ...",
+        "emptyBin": "የእርስዎ ሪሳይክል ቢን ባዶ ነው",
+        "noSearchRes": "ምንም የጠፉ ሰነዶች ከእርስዎ ፍለጋ ጋር አይዛመዱም።",
+        "willAppearHere": "የጠፉ ሰነዶች እዚህ ይታያሉ።",
+        "opening": "በመክፈት ላይ...",
+        "opened": "ተከፍቷል: {{title}}",
+        "failedToOpen": "ፋይሉን መክፈት አልተቻለም",
+        "restoredOne": "1 እቃ ወደ ነበረበት ተመልሷል",
+        "restoredMany": "{{count}} እቃዎች ወደ ነበረበት ተመልሰዋል",
+        "deletedOne": "1 እቃ ተሰርዟል",
+        "deletedMany": "{{count}} እቃዎች ተሰርዘዋል",
+        "failedToRestore": "ወደ ነበረበት መመለስ አልተቻለም",
+        "failedToDelete": "መሰረዝ አልተቻለም",
+        "failedToLoad": "ሪሳይክል ቢኑን መጫን አልተቻለም"
+      },
+      "reports": {
+        "title": "ሪፖርቶች",
+        "subtitle": "የአስተዳዳሪ ዳሽቦርድ ትንታኔ (የቀን ገደብ ያስፈልጋል)",
+        "dateRange": {
+          "title": "የቀን ገደብ",
+          "description": "ሪፖርቱን ለማመንጨት የመነሻ እና የማጠናቀቂያ ቀናትን ይምረጡ።",
+          "start": "የመነሻ ቀን *",
+          "end": "የማጠናቀቂያ ቀን *",
+          "startPlaceholder": "የመነሻ ቀን ይምረጡ",
+          "endPlaceholder": "የማጠናቀቂያ ቀን ይምረጡ"
+        },
+        "actions": {
+          "run": "ሪፖርት አሂድ",
+          "running": "በሂደት ላይ...",
+          "copy": "ቅዳ",
+          "back": "ተመለስ"
+        },
+        "kpis": {
+          "totalDocs": "ጠቅላላ ሰነዶች",
+          "topInitiator": "ከፍተኛ አነሳሽ",
+          "organizations": "ድርጅቶች",
+          "typesFound": "የተገኙ አይነቶች",
+          "highPct": "ከፍተኛ",
+          "withinRange": "በተመረጠው የቀን ገደብ ውስጥ",
+          "docsCount": "{{count}} ሰነዶች"
+        },
+        "storage": {
+          "title": "ማከማቻ",
+          "subtitle": "የድርጅት ማከማቻ አጠቃቀም",
+          "usedOf": "{{used}} ከ {{limit}} ውስጥ ጥቅም ላይ ውሏል",
+          "limit": "ገደብ: {{limit}}",
+          "runPrompt": "የማከማቻ አጠቃቀምን ለመጫን ሪፖርቱን ያሂዱ።",
+          "used": "ጥቅም ላይ የዋለ"
+        },
+        "charts": {
+          "time": {
+            "title": "ሰነዶች በጊዜ ሂደት",
+            "subtitle": "የቀን ስርጭት",
+            "yaxis": "ሰነዶች"
+          },
+          "type": {
+            "title": "ሰነዶች በአይነት",
+            "subtitle": "Word, PDF, Slide, Cell, ሌሎች"
+          },
+          "initiators": {
+            "title": "ከፍተኛ አነሳሾች",
+            "subtitleInitial": "ማን ብዙ ሰነዶችን ፈጠረ/አነሳሳ",
+            "subtitleData": "{{count}} ተሳታፊዎች • {{total}} ሰነዶች",
+            "ranked": "ደረጃ የተሰጣቸው",
+            "noData": "የአነሳሽ መረጃ የለም።"
+          },
+          "generic": {
+            "runPrompt": "ቻርቱን ለመሳል ሪፖርቱን ያሂዱ።"
+          }
+        },
+        "toasts": {
+          "dateRequired": "የመነሻ ቀን እና የማጠናቀቂያ ቀን ያስፈልጋል",
+          "loaded": "ሪፖርቱ ተጭኗል",
+          "failed": "ሪፖርቱን መጫን አልተቻለም",
+          "copied": "ተቀድቷል",
+          "copyFailed": "መቅዳት አልተቻለም"
+        },
+        "misc": {
+          "unknown": "አይታወቅም"
+        }
+      },
+      "settings": {
+        "retention": {
+          "home": "ዋና ገጽ",
+          "settings": "ቅንብሮች",
+          "title": "የማቆያ ፖሊሲዎች",
+          "subtitle": "በሰነዶች ላይ የህይወት ዑደት ደንቦችን ይተግብሩ (ማቆየት፣ መገምገም፣ መሰረዝ)።",
+          "search": "ፖሊሲዎችን ይፈልጉ...",
+          "sort": "ደርድር",
+          "sortBy": "በዚህ ደርድር",
+          "updated": "ተሻሽሏል",
+          "created": "ተፈጥሯል",
+          "name": "ስም",
+          "docType": "የሰነድ አይነት",
+          "ascending": "ወደ ላይ",
+          "descending": "ወደ ታች",
+          "refresh": "አድስ",
+          "newPolicy": "አዲስ ፖሊሲ",
+          "createFirst": "የመጀመሪያውን ፖሊሲ ይፍጠሩ",
+          "view": "ይመልከቱ",
+          "edit": "ያስተካክሉ",
+          "delete": "ሰርዝ",
+          "loading": "የማቆያ ፖሊሲዎች በመጫን ላይ...",
+          "noPolicies": "እስካሁን ምንም የማቆያ ፖሊሲዎች የሉም",
+          "controlLifecycle": "የሰነድ ህይወት ዑደትን ለመቆጣጠር አንድ ይፍጠሩ።",
+          "updatedLabel": "ተሻሽሏል:",
+          "type": "አይነት",
+          "period": "ጊዜ",
+          "start": "ጀምር",
+          "action": "ተግባር",
+          "openDetails": "ዝርዝሮችን ክፈት →",
+          "confirmDelete": "\"{{name}}\" ይሰረዝ? ይህ ሊቀለበስ አይችልም።",
+          "deleting": "በመሰረዝ ላይ...",
+          "deleted": "ተሰርዟል",
+          "deleteFailed": "መሰረዝ አልተሳካም",
+          "failedToLoad": "የማቆያ ፖሊሲዎችን መጫን አልተቻለም",
+          "form": {
+            "createTitle": "የማቆያ ፖሊሲ ይፍጠሩ",
+            "editTitle": "የማቆያ ፖሊሲን ያስተካክሉ",
+            "subtitle": "ሰነዶች እስከ መቼ እንደሚቀመጡ እና ጊዜው ሲያበቃ ምን እንደሚከሰት ይግለጹ።",
+            "nameEn": "ስም (እንግሊዝኛ)",
+            "nameEnPlaceholder": "ምሳሌ፡ የፋይናንስ መዝገቦች ማቆያ",
+            "nameAm": "ስም (አማርኛ)",
+            "optional": "አማራጭ",
+            "docType": "የሰነድ አይነት",
+            "appliesTo": "ተፈጻሚ የሚሆነው ለ",
+            "retentionPeriod": "የማቆያ ጊዜ",
+            "unit": "ዩኒት",
+            "periodValidation": "የጊዜ ዋጋ ከ 0 መብለጥ አለበት",
+            "startCounting": "ቆጠራ ጀምር ከ",
+            "startFrom": "ጀምር ከ",
+            "actionAfter": "ከጊዜ በኋላ የሚወሰድ ተግባር",
+            "action": "ተግባር",
+            "description": "መግለጫ",
+            "descPlaceholder": "አማራጭ የፖሊሲ ማስታወሻዎች...",
+            "cancel": "ተሰርዝ",
+            "create": "ይፍጠሩ",
+            "save": "አስቀምጥ"
+          },
+          "enums": {
+            "periodUnit": {
+              "days": "ቀናት",
+              "months": "ወራት",
+              "years": "ዓመታት"
+            },
+            "startFrom": {
+              "after_creation": "ከተፈጠረ በኋላ",
+              "after_archive": "ከአርካይቭ በኋላ",
+              "after_last_modified": "ለመጨረሻ ጊዜ ከተሻሻለ በኋላ"
+            },
+            "action": {
+              "delete": "ሰርዝ",
+              "review": "ከልስ",
+              "keep_forever": "ለዘላለም አቆይ"
+            },
+            "docTypes": {
+              "word": "Word",
+              "sheet": "Sheet",
+              "slide": "Slide",
+              "pdf": "PDF"
+            },
+            "details": {
+              "failedToLoad": "ፖሊሲውን መጫን አልተሳካም",
+              "deleting": "በመሰረዝ ላይ...",
+              "deleted": "ተሰርዟል",
+              "deleteFailed": "መሰረዝ አልተሳካም",
+              "fallbackName": "ፖሊሲ",
+              "confirmDelete": "\"{{name}}\" ይሰረዝ? ይህ ሊቀለበስ አይችልም።",
+              "notFoundTitle": "ፖሊሲው አልተገኘም",
+              "notFoundSub": "የሚፈልጉት የማቆያ ፖሊሲ የለም ወይም የመግቢያ ፈቃድ የለዎትም።",
+              "backToListLong": "ወደ ማቆያ ፖሊሲዎች ተመለስ",
+              "back": "ተመለስ",
+              "retention": "ማቆያ",
+              "edit": "ያስተካክሉ",
+              "delete": "ሰርዝ",
+              "updatedAt": "የተሻሻለው:",
+              "typeLabel": "አይነት:",
+              "periodLabel": "ጊዜ:",
+              "startLabel": "ጀምር:",
+              "docTypeTitle": "የሰነድ አይነት",
+              "retPeriodTitle": "የማቆያ ጊዜ",
+              "startsFrom": "የሚጀምረው ከ:",
+              "actionTitle": "ተግባር",
+              "counting": "ቆጠራ:",
+              "summaryTitle": "የደንብ ማጠቃለያ",
+              "keep": "አቁይ",
+              "fallbackDocs": "ሰነዶች",
+              "for": "ለ",
+              "starting": "ጀምሮ",
+              "then": ", ከዚያም",
+              "createdAt": "የተፈጠረው:",
+              "description": "መግለጫ"
+            },
+            "edit": {
+              "failedToLoad": "ፖሊሲውን መጫን አልተሳካም",
+              "saving": "በማስቀመጥ ላይ...",
+              "saved": "ተቀምጧል",
+              "saveFailed": "ማስቀመጥ አልተሳካም",
+              "loading": "በመጫን ላይ..."
+            }
+          },
+          "errors": {
+            "creating": "በመፍጠር ላይ...",
+            "created": "ፖሊሲ ተፈጥሯል",
+            "failed": "መፍጠር አልተሳካም",
+            "nameEnRequired": "ስም (እንግሊዝኛ) ግዴታ ነው",
+            "orgMissing": "የድርጅት መለያ በሴሽን ውስጥ የለም",
+            "periodMin": "የጊዜ ዋጋ ከ 0 መብለጥ አለበት"
+          }
+        },
+        "sizeLimits": {
+          "title": "የመጠን ገደቦች",
+          "home": "መነሻ",
+          "settings": "ቅንብሮች",
+          "breadcrumbTitle": "የመጠን ገደቦች",
+          "refresh": "ያድሱ",
+          "newLimit": "አዲስ ገደብ",
+          "units": "ዩኒቶች:",
+          "type": "አይነት:",
+          "scopes": {
+            "org": "ድርጅት",
+            "unit": "ዩኒት",
+            "position": "የስራ መደብ",
+            "employeePosition": "የሰራተኛ የስራ መደብ",
+            "user": "ተጠቃሚ",
+            "maxFile": "ከፍተኛ የፋይል መጠን",
+            "orgShort": "ድርጅት",
+            "unitShort": "ዩኒት",
+            "positionShort": "መደብ",
+            "employeePositionShort": "ሰራተኛ መደብ",
+            "userShort": "ተጠቃሚ",
+            "maxFileShort": "ፋይል መጠን"
+          },
+          "context": {
+            "org": "የድርጅት ይዘት ተፈቷል።",
+            "unit": "የዩኒት ይዘት ተፈቷል።",
+            "position": "የስራ መደብ ይዘት ተፈቷል።",
+            "employeePosition": "የሰራተኛ የስራ መደብ ይዘት ተፈቷል።",
+            "user": "የተጠቃሚ ይዘት ተፈቷል።"
+          },
+          "card": {
+            "limit": "ገደብ",
+            "used": "ጥቅም ላይ የዋለ",
+            "available": "የሚገኝ",
+            "updated": "የተሻሻለው"
+          },
+          "summary": {
+            "storageOverview": "የማከማቻ አጠቃላይ እይታ",
+            "growthWatch": "የእድገት ክትትል",
+            "policyGuard": "የፖሊሲ ጥበቃ",
+            "used": "ጥቅም ላይ የዋለ",
+            "limit": "ገደብ",
+            "available": "የሚገኝ",
+            "pctUsed": "{{pct}}% ጥቅም ላይ ውሏል"
+          },
+          "drawer": {
+            "create": "የመጠን ገደብ ይፍጠሩ",
+            "edit": "የመጠን ገደብ ያስተካክሉ",
+            "typeLabel": "አይነት:",
+            "idLocked": "መለያ ተቆልፏል",
+            "close": "ዝጋ"
+          },
+          "form": {
+            "limitType": "የገደብ አይነት",
+            "typeLocked": "በማስተካከያ ጊዜ አይነት ተቆልፏል።",
+            "storageLimit": "የማከማቻ ገደብ (GB)",
+            "storageUsed": "ጥቅም ላይ የዋለ ማከማቻ (GB)",
+            "placeholderLimit": "ምሳሌ፡ 100",
+            "placeholderUsed": "ምሳሌ፡ 12.5",
+            "previewUsage": "አጠቃቀም ቅድመ እይታ",
+            "pctUsed": "{{pct}}% ጥቅም ላይ ውሏል",
+            "usedOf": "{{used}} ጥቅም ላይ ውሏል ከ {{limit}}",
+            "cancel": "ተመለስ",
+            "save": "አስቀምጥ",
+            "create": "ፍጠር"
+          },
+          "page": {
+            "maxFileSubtitle": "ከፍተኛውን የፋይል መጠን ይግለጹ።",
+            "otherSubtitle": "የማከማቻ ገደቦችን በተለያዩ ደረጃዎች ያስተዳድሩ።",
+            "refreshFailed": "ማደስ አልተሳካም",
+            "missingContext": "ይዘት ጎድሏል",
+            "missingContextSub": "አስፈላጊው ይዘት ሊፈታ አልቻለም።",
+            "noLimitsTitle": "ምንም የመጠን ገደቦች አልተገኙም",
+            "noLimitsSub": "ለዚህ {{scope}} አንድ ይፍጠሩ。"
+          },
+          "deleteDialog": {
+            "title": "የመጠን ገደብ ይሰረዝ?",
+            "description": "ይህ የመጠን ገደብ እስከመጨረሻው ይወገዳል። ይህ ተግባር ሊቀለበስ አይችልም።",
+            "cancel": "ተመለስ",
+            "confirm": "ሰርዝ"
+          },
+          "loading": "ገደቦችን በመጫን ላይ..."
+        },
+        "templates": {
+          "home": "መነሻ",
+          "settings": "ቅንብሮች",
+          "breadcrumbTitle": "የሰነድ አብነቶች",
+          "title": "የሰነድ አብነቶች",
+          "subtitle": "ይፋዊ የደብዳቤ አብነቶችን ይጫኑ እና ያስተዳድሩ።",
+          "searchPlaceholder": "አብነቶችን ይፈልጉ",
+          "refresh": "ያድሱ",
+          "sort": "ደርድር",
+          "newTemplate": "አዲስ አብነት",
+          "sortBy": "ደርድር በ",
+          "sortFields": {
+            "updatedAt": "የተሻሻለበት",
+            "createdAt": "የተፈጠረበት",
+            "name": "ስም",
+            "documentType": "የሰነድ አይነት"
+          },
+          "ascending": "ወደ ላይ",
+          "descending": "ወደ ታች",
+          "noTemplatesTitle": "እስካሁን ምንም አብነቶች የሉም",
+          "noTemplatesSub": "ደብዳቤዎችን መጫን ለመጀመር አንዱን ይፍጠሩ።",
+          "createFirst": "የመጀመሪያውን አብነት ይፍጠሩ",
+          "updatedAt": "የተሻሻለው:",
+          "view": "ይዩ",
+          "delete": "ሰርዝ",
+          "type": "አይነት",
+          "slug": "ስሉግ",
+          "fallbackName": "አብነት",
+          "deleteDialog": {
+            "title": "አብነቱ ይሰረዝ?",
+            "description": "ይህ “{{name}}” ን እስከመጨረሻው ይሰርዛል። ይህ ተግባር ሊቀለበስ አይችልም።",
+            "tip": "ጠቃሚ ምክር: ከመሰረዝዎ በፊት ማንም ሰው ይህንን አብነት እየተጠቀመ አለመሆኑን ያረጋግጡ።",
+            "cancel": "ተመለስ",
+            "confirm": "ሰርዝ",
+            "deleting": "በመሰረዝ ላይ..."
+          },
+          "toasts": {
+            "loadFailed": "የሰነድ አብነቶችን መጫን አልተሳካም",
+            "deleting": "በመሰረዝ ላይ...",
+            "deleted": "ተሰርዟል",
+            "deleteFailed": "መሰረዝ አልተሳካም"
+          },
+          "loading": "አብነቶችን በመጫን ላይ...",
+          "create": {
+            "creating": "አብነት በመፍጠር ላይ...",
+            "uploaded": "አብነት ተጭኗል",
+            "presignedFailed": "የቅድመ-ፊርማ ሰቀላ URL ማግኘት አልተሳካም",
+            "createFailed": "መፍጠር አልተሳካም"
+          },
+          "details": {
+            "loadFailed": "አብነት መጫን አልተሳካም",
+            "editorLoadFailed": "የሰነድ አርታዒን መጫን አልተሳካም",
+            "noDocumentIdToOpen": "ይህ አብነት ለመክፈት ምንም documentId የለውም።",
+            "openDocFailed": "የአብነት ሰነድን መክፈት አልተሳካም",
+            "loading": "በመጫን ላይ...",
+            "notFound": "አብነት አልተገኘም",
+            "backToList": "ወደ ዝርዝር ተመለስ",
+            "back": "ተመለስ",
+            "openTemplateFile": "የአብነት ፋይል ክፈት",
+            "missingDocumentId": "የጎደለ documentId",
+            "open": "ክፈት",
+            "documentType": "የሰነድ አይነት",
+            "slugOrFile": "ስሉግ / ፋይል",
+            "noDocumentIdWarning": "ይህ አብነት ምንም documentId የለውም፣ ስለዚህ “ክፈት” ፋይሉን መጫን አይችልም።",
+            "downloadFailed": "ማውረድ አልተሳካም",
+            "openFailed": "ፋይሉን መክፈት አልተሳካም"
+          }
+        }
+      },
+      "onboarding": {
+        "tour": {
+          "controls": {
+            "back": "ወደ ኋላ",
+            "close": "ዝጋ",
+            "last": "ጨርስ",
+            "next": "ቀጣይ",
+            "open": "ክፈት",
+            "skip": "ዝለል",
+            "tip": "ጠቃሚ ምክር: በማንኛውም ጊዜ ከ",
+            "replay": "እርዳታ እና ድጋፍ",
+            "replayEnd": "እንደገና ማየት ይችላሉ።"
+          },
+          "steps": {
+            "step1": {
+              "title": "አዲስ ነገር ይፍጠሩ",
+              "subtitle": "ሰነዶች፣ ረቂቆች፣ አብነቶች",
+              "content": "ሰነድ ወዲያውኑ ለመፍጠር <b>አዲስ</b> የሚለውን ይጠቀሙ—ከዚያ ወዲያውኑ ማረም ወይም መጫን ይጀምሩ።"
+            },
+            "step2": {
+              "title": "የእኔ ፋይሎች",
+              "subtitle": "የእርስዎ ዋና ቤተ-መጽሐፍት",
+              "content": "የእርስዎ የሆኑ ሁሉም ነገሮች እዚህ ይገኛሉ: ፎልደሮች፣ ሰነዶች እና ጭነቶች። ይህ የእርስዎ ነባሪ የሥራ ቦታ ነው።"
+            },
+            "step3": {
+              "title": "የቅርብ ጊዜ",
+              "subtitle": "ወዲያውኑ ይመለሱ",
+              "content": "በጣም በቅርብ የተመለከቷቸውን ሰነዶች በአንድ ጠቅታ በመክፈት ካቆሙበት ይቀጥሉ።"
+            },
+            "step4": {
+              "title": "ተወዳጆች",
+              "subtitle": "አስፈላጊ የሆኑትን ይለጥፉ",
+              "content": "አስፈላጊ ንጥሎችን በቀላሉ እንዲገኙ ኮከብ ያድርጉባቸው—በተለይ ለተደጋጋሚ ጥቅም ላይ ለሚውሉ አብነቶች ጠቃሚ ነው።"
+            },
+            "step5": {
+              "title": "ማጋራት",
+              "subtitle": "በቀላሉ ይተባበሩ",
+              "content": "ከእርስዎ ጋር የተጋሩ ሰነዶችን ይመልከቱ እና ከቤተ-መጽሐፍቱ ሳይወጡ ከቡድንዎ ጋር ይተባበሩ።"
+            },
+            "step6": {
+              "title": "መሣሪያዎች እና እንቅስቃሴ",
+              "subtitle": "ኦዲት + ስሪቶች + OCR",
+              "content": "እንቅስቃሴን ይከታተሉ፣ የስሪት ታሪክን ያስተዳድሩ እና ከቃኘው ወረቀቶች ሊፈለግ የሚችል ጽሑፍ ሲፈልጉ OCR ያሂዱ።"
+            },
+            "step7": {
+              "title": "ፈጣን ጭነት",
+              "subtitle": "በጣም ፈጣኑ መንገድ",
+              "content": "በጥቂት ጠቅታዎች ፋይሎችን በቀጥታ ወደ ቤተ-መጽሐፍትዎ ይጫኑ—ብዙ ሰነዶችን ጎትቶ ለማስገባት ተመራጭ ነው።"
+            },
+            "step8": {
+              "title": "ማከመቻ",
+              "subtitle": "ገደቦችዎን ይወቁ",
+              "content": "ጥቅም ላይ የዋለውን ቦታ እና ቀሪ ማከማቻን ይቆጣጠሩ ስለዚህ ጭነቶች በጭራሽ አያስደንቁዎትም።"
+            },
+            "step9": {
+              "title": "እርዳታ እና ድጋፍ",
+              "subtitle": "ይህንን ጉብኝት በማንኛውም ጊዜ እንደገና ያዩ",
+              "content": "የማስታወሻ ይፈልጋሉ? ጉብኝቱን በማንኛውም ጊዜ እንደገና ይጀምሩ—እና አንድ ነገር ግልጽ ካልሆነ ግብረመልስ ያጋሩ።"
+            }
+          }
+        }
+      },
+      "myShares": {
+        "home": "ቤት",
+        "title": "የእኔ ማጋሪያዎች",
+        "subtitle": "ያጋሩትን ፋይሎች እና ፎልደሮች",
+        "refresh": "አድስ",
+        "sort": "ደርድር",
+        "sortBy": "ሊደርደር በ",
+        "clearSearch": "ፍለጋን ያጽዳ",
+        "document": "ሰነድ",
+        "fields": {
+          "type": "ዓይነት",
+          "name": "ስም",
+          "modified": "የመጨረሻ ማስተካከያ",
+          "size": "መጠን",
+          "role": "ሚና"
+        },
+        "direction": {
+          "asc": "ሊ ላይ",
+          "desc": "በቀጥታ"
+        },
+        "view": {
+          "tiles": "ስሪ ጫፍ",
+          "list": "ዝርዝር"
+        },
+        "actions": {
+          "download": "ያውርዱ",
+          "share": "ያጋሩ",
+          "delete": "ይሰርዙ",
+          "rename": "ድጋሚ ስም",
+          "open": "ይክፈቱ",
+          "preview": "ቅድመ መመልከት",
+          "copy": "ወደ... ገልብጡ",
+          "move": "ወደ... ያንቀሳቅሱ",
+          "summarize": "ማጠቃለያ",
+          "addedToFavorites": "ወደ ተወዳጆች ታክሏል"
+        },
+        "sections": {
+          "folders": "ይጋራሉ ፎልደሮች",
+          "files": "ይጋራሉ ፋይሎች"
+        },
+        "empty": {
+          "title": "ማጋሪያ አልተገኘም",
+          "search": "ስርዓተ መፈለግ ጋር ተዛማጅ ውጤት አይነበበም",
+          "description": "ምንም ፋይሎች ወይም ፎልደሮች ያልሞሉት ያልሞሉ"
+        },
+        "roles": {
+          "owner": "ባለቤት",
+          "editor": "አርታዒ",
+          "viewer": "ተመልካች"
+        },
+        "details": {
+          "yourRole": "የእርስዎ ሚና",
+          "sharedAt": "ይጋራ",
+          "docTitle": "የሰነድ መረጃ",
+          "docType": "ዓይነት",
+          "created": "ተፈጥሮ",
+          "updated": "ስሪ",
+          "collaborators": "ተብብሮ ሠራዋ"
+        },
+        "notifications": {
+          "fileDeleted": "ፋይል ተሰርዟል",
+          "addedToFavorites": "ወደ ተወዳጆች ታክሏል"
+        },
+        "modals": {
+          "delete": {
+            "file": "ፋይል ይሰርዙ",
+            "confirm": "{{name}} ለመሰረዝ እርግጠኛ ነዎት?"
+          },
+          "rename": {
+            "fileTitle": "ፋይል ድጋሚ ስም",
+            "file": "ለፋይሉ አዲስ ስም ያስገቡ"
+          }
+        },
+        "loading": {
+          "files": "ፋይሎች በሚጫኑ ጊዜ...",
+          "details": "ዝርዝሮች በሚጫኑ ጊዜ..."
+        },
+        "errors": {
+          "loadItems": "ንጥሎችን መጫን አልተሳካም",
+          "loadDoc": "ሰነድ መጫን አልተሳካም",
+          "download": "ፋይል ማውረድ አልተሳካም"
+        }
+      }
+    },
+    "editPermission": {
+      "title": "ፍቃድ አስተካክል",
+      "roleLabel": "የፍቃድ ደረጃ",
+      "roles": {
+        "viewer": {
+          "label": "ተመልካች",
+          "desc": "ማየት እና አስተያየት መስጠት ብቻ ይችላል"
+        },
+        "editor": {
+          "label": "አዘጋጅ",
+          "desc": "ማየት፣ አስተያየት መስጠት እና ማስተካከል ይችላል"
+        },
+        "owner": {
+          "label": "ባለቤት",
+          "desc": "ማጋራትን ጨምሮ ሙሉ ቁጥጥር"
+        }
+      },
+      "canDownload": {
+        "label": "ማውረድ ፍቀድ",
+        "desc": "አጋሩ ፋይሉን ማውረድ ይችላል"
+      },
+      "cancel": "ሰርዝ",
+      "save": "ፍቃድ አስቀምጥ",
+      "saving": "በማስቀመጥ ላይ…",
+      "savedSuccess": "ፍቃድ ተስተካክሏል",
+      "saveError": "ፍቃድ ማስተካከል አልተቻለም",
+      "manageTitle": "ፍቃዶችን አስተዳድር",
+      "noCollaborators": "እስካሁን አጋሮች የሉም። ሰዎችን ለማከል ዓይቀሉን ያጋሩ።",
+      "colPerson": "ሰው",
+      "colRole": "ሚና",
+      "colActions": "ድርጊቶች",
+      "editBtn": "አስተካክል",
+      "done": "ተጠናቋል",
+      "canDownloadBadge": "ማውረድ ይችላል",
+      "pageOf": "ገጽ {{page}} ከ {{total}}",
+      "showingRange": "{{from}}–{{to}} ከ {{total}}"
+    },
+    "attach": "ያያይዱ",
+    "selectAttachment": "ከDMS አባሪ ይምረጡ",
+    "search": "ፈልግ…",
+    "loading": "ፋይሎችን በመጫን ላይ...",
+    "retry": "እንደገና ይሞክሩ",
+    "loadingFiles": "የDMS ፋይሎች በመጫን ላይ...",
+    "searchFiles": "አቃፊዎችን እና ፋይሎችን ይፈልጉ...",
+    "noSearchResults": "ከፍለጋዎ ጋር የሚዛመድ ፋይል የለም",
+    "emptyFolder": "እዚህ የሚያሳይ የnothing የለም",
+    "name": "ስም",
+    "owner": "ባለቤት",
+    "size": "መጠን",
+    "date": "መጨረሻ የተሻሻለበት",
+    "documentsSelected_one": "{{count}} ሰነድ ተመርጧል",
+    "documentsSelected_other": "{{count}} ሰነዶች ተመርጠዋል",
+    "picker": {
+      "title": "ከDMS ይምረጡ",
+      "hint": "የፋይልን እጅግ ይጫ኉",
+      "attach": "ያያይዱ"
+    }
+  },
+  "print": {
+    "title": "የህትመት አማራጮች",
+    "description": "ምን ማተም እንደሚፈልጉ ይምረጡ",
+    "recordDocument": "የመዝገብ ሰነድ",
+    "recordDescription": "ዋናውን የመዝገብ ሰነድ ያትሙ",
+    "attachments": "ተያያዥ ፋይሎች",
+    "noAttachments": "ምንም ተያያዥ ፋይሎች አልተገኙም",
+    "summary": "ለማተም የሚሆኑ ንጥሎች",
+    "selectAtLeastOne": "እባክዎ ቢያንስ አንድ ንጥል ይምረጡ",
+    "readyToPrint": "ለማተም ዝግጁ",
+    "print": "ህትመት",
+    "printing": "በማተም ላይ...",
+    "success": "የህትመት ሥራ በተሳካ ሁኔታ ተላክ",
+    "error": "ማተም አልተቻለም። እባክዎ እንደገና ይሞክሩ።",
+    "cancel": "ሰርዝ"
+  },
+  "auditLogShared": {
+    "page": {
+      "smartOfficeTitle": "የስማርት ኦፊስ ኦዲት መዝገብ",
+      "smartOfficeSubtitle": "የስማርት ኦፊስ እንቅስቃሴዎችን ይከታተሉ"
+    },
+    "actions": {
+      "refresh": "አድስ",
+      "export": "አውርድ",
+      "cardView": "ካርድ እይታ",
+      "tableView": "ሰንጠረዥ እይታ",
+      "cancel": "ሰርዝ"
+    },
+    "labels": {
+      "activityLogs": "የእንቅስቃሴ መዝገብ",
+      "activitiesFound": "{{count}} እንቅስቃሴዎች ተገኝተዋል",
+      "ip": "አይፒ"
+    },
+    "messages": {
+      "missingModuleKey": "ለኦዲት መዝገብ የሞጁል ቁልፍ ይጎድላል",
+      "logsLoaded": "የኦዲት መዝገቦች ተጭነዋል",
+      "logsLoadFailed": "የኦዲት መዝገቦችን መጫን አልተሳካም",
+      "tryAgain": "እባክዎ እንደገና ይሞክሩ።",
+      "exportingLogs": "{{count}} መዝገቦችን እንደ {{format}} በማውረድ ላይ",
+      "loadingActivities": "እንቅስቃሴዎችን በመጫን ላይ...",
+      "noActivitiesFound": "ምንም እንቅስቃሴ አልተገኘም",
+      "adjustFilters": "የሚፈልጉትን ለማግኘት ማጣሪያዎችን ወይም ፍለጋውን ያስተካክሉ።"
+    },
+    "filters": {
+      "dateRange": "የቀን ክልል",
+      "clearFilters": "ማጣሪያዎችን አጥፋ",
+      "searchPlaceholder": "እንቅስቃሴዎችን ፈልግ...",
+      "module": "ሞጁል",
+      "allModules": "ሁሉም ሞጁሎች",
+      "action": "ተግባር",
+      "allActions": "ሁሉም ተግባሮች",
+      "status": "ሁኔታ",
+      "allStatuses": "ሁሉም ሁኔታዎች",
+      "fromDate": "ከ ቀን",
+      "toDate": "እስከ ቀን",
+      "last7Days": "ያለፉ 7 ቀናት",
+      "last30Days": "ያለፉ 30 ቀናት"
+    },
+    "status": {
+      "success": "ተሳክቷል",
+      "failure": "አልተሳካም",
+      "warning": "ማስጠንቀቂያ",
+      "pending": "በመጠባበቅ ላይ"
+    },
+    "stats": {
+      "totalActivities": "ጠቅላላ እንቅስቃሴዎች",
+      "successRate": "የስኬት መጠን",
+      "dailyAverage": "ዕለታዊ አማካይ",
+      "uniqueUsers": "ልዩ ተጠቃሚዎች",
+      "topActions": "ከፍተኛ ተግባሮች",
+      "times": "ጊዜ"
+    },
+    "export": {
+      "title": "የእንቅስቃሴ መዝገቦችን አውርድ",
+      "description": "ለእንቅስቃሴ መዝገቦችዎ የማውረጃ አማራጮችን ይምረጡ።",
+      "fileName": "የፋይል ስም",
+      "fileNamePlaceholder": "የፋይል ስም ያስገቡ",
+      "format": "የማውረጃ ፎርማት",
+      "includeDetails": "ዝርዝር መረጃ አካትት",
+      "includeDateRange": "የቀን ክልል በማውረድ ውስጥ አካትት"
+    },
+    "table": {
+      "time": "ጊዜ",
+      "user": "ተጠቃሚ",
+      "action": "ተግባር",
+      "description": "መግለጫ",
+      "module": "ሞጁል",
+      "severity": "ክብደት",
+      "status": "ሁኔታ"
+    },
+    "pagination": {
+      "showing": "{{shown}} ከ {{total}} ጠቅላላ እንቅስቃሴዎች እየታዩ ነው",
+      "pageOf": "ገጽ {{page}} / {{totalPages}}"
+    },
+    "modal": {
+      "title": "የስማርት ኦፊስ ኦዲት ዝርዝር",
+      "description": "ሙሉ የተመለሰ የኦዲት ንጥል መለያ: {{id}}",
+      "entity": "ኢንቲቲ",
+      "method": "ዘዴ",
+      "createdAt": "የተፈጠረበት ጊዜ",
+      "changes": "ለውጦች",
+      "noChanges": "ምንም ለውጥ የለም።",
+      "payload": "ውሂብ",
+      "performedBy": "የፈጸመው",
+      "field": "መስክ",
+      "changed": "ተቀይሯል",
+      "noEffectiveChange": "ትክክለኛ ለውጥ የለም",
+      "changedPaths": "የተቀየሩ መንገዶች",
+      "noDifference": "ለዚህ መስክ From እና To አንድ ናቸው።",
+      "previousFile": "ቀዳሚ ፋይል",
+      "currentFile": "አሁን ያለ ፋይል",
+      "from": "ከ",
+      "to": "ወደ",
+      "updatedDetails": "የተዘመነ ዝርዝር",
+      "itemsCount": "{{count}} ንጥል(ሎች)",
+      "user": {
+        "name": "ስም",
+        "email": "ኢሜይል",
+        "phone": "ስልክ",
+        "status": "ሁኔታ",
+        "userType": "የተጠቃሚ አይነት",
+        "registration": "ምዝገባ",
+        "complete": "ተጠናቋል",
+        "incomplete": "አልተጠናቀቀም",
+        "roles": "ሚናዎች",
+        "noRoles": "ምንም ሚና የለም",
+        "employeeInfo": "የሰራተኛ መረጃ",
+        "rank": "ደረጃ",
+        "noPermissions": "ፍቃድ የለም",
+        "noEmployeeDetails": "የሰራተኛ ዝርዝር የለም"
+      }
+    }
+  },
+  "pendingUsers": {
+    "title": "በመጠባበቅ ላይ ያሉ ሰራተኞች",
+    "noPendingApprovals": "በመጠባበቅ ላይ ያለ ማጽደቂያ የለም 🎉",
+    "reviewAll": "ሁሉንም ይመልከቱ",
+    "approve": "ያጽድቁ",
+    "reject": "ይቃወሙ",
+    "name": "ስም",
+    "email": "ኢሜይል",
+    "positions": "የስራ መደቦች",
+    "actions": "ድርጊቶች",
+    "pending": "በመጠባበቅ ላይ",
+    "loadingPendingEmployees": "በመጠባበቅ ላይ ያሉ ሰራተኞችን በመጫን ላይ...",
+    "allRequestsReviewed": "ሁሉም የሰራተኛ ጥያቄዎች ተገምግመዋል።",
+    "refresh": "አድስ",
+    "showingUpTo": "እስከ 50 በመጠባበቅ ላይ ያሉ ሰራተኞችን በማሳየት ላይ",
+    "employeeApproved": "ሰራተኛ ጸድቋል",
+    "employeeRejected": "ሰራተኛ ተቃውሟል",
+    "failedToApprove": "ማጽደቅ አልተሳካም",
+    "failedToReject": "መቃወም አልተሳካም",
+    "employeeApprovedSuccess": "ሰራተኛ በተሳካ ሁኔታ ጸድቋል",
+    "employeeRejectedSuccess": "ሰራተኛ በተሳካ ሁኔታ ተቃውሟል"
+  },
+  "validation": {
+    "commentRequired": "አስተያየት ያስፈልጋል"
+  },
+  "branding": {
+    "title": "የድርጅት ጭንብል ቅንብሮች",
+    "description": "የድርጅት ማንነት፣ የይዘት ንጥሎች፣ የግንኙነት መረጃ እና ማህበራዊ ሚዲያ አገናኞችን ያዋቅሩ።",
+    "organizationInfo": {
+      "title": "የድርጅት መረጃ",
+      "nameAm": "የድርጅት ስም (አማርኛ)",
+      "nameAmPlaceholder": "የድርጅቱ ስም",
+      "nameEn": "የድርጅት ስም (እንግሊዝኛ)",
+      "nameEnPlaceholder": "የድርጅት ስም"
+    },
+    "brandAssets": {
+      "title": "የይዘት ንጥሎች",
+      "logo": "የድርጅት አርማ",
+      "loginImage": "የመግቢያ ገጽ ምስል",
+      "favicon": "ፋቪኮን",
+      "noImageUploaded": "ምስል አልተሰቀለም",
+      "viewFull": "ሙሉ እይ"
+    },
+    "brandColors": {
+      "title": "የይዘት ቀለሞች",
+      "primary": "ዋና ቀለም",
+      "brandPrimary": "የድርጅት ዋና ቀለም",
+      "secondary": "ሁለተኛ ቀለም",
+      "brandSecondary": "የድርጅት ሁለተኛ ቀለም"
+    },
+    "welcomeMessage": {
+      "title": "የእንኳን ደህና መጡ መልእክት",
+      "label": "የመልዕክት ይዘት",
+      "placeholder": "የእንኳን ደህና መጡ መልእክት ያስገቡ..."
+    },
+    "footerText": {
+      "title": "የግርጌ ጽሁፍ",
+      "label": "የግርጌ ይዘት",
+      "placeholder": "የግርጌ ጽሁፍ ያስገቡ..."
+    },
+    "contactInfo": {
+      "title": "የግንኙነት መረጃ",
+      "address": "አድራሻ",
+      "addressPlaceholder": "አድራሻ ያስገቡ",
+      "phone": "ስልክ",
+      "phonePlaceholder": "+251-xxx-xxx-xxxx",
+      "email": "ኢሜይል",
+      "emailPlaceholder": "info@example.com"
+    },
+    "socialMedia": {
+      "title": "ማህበራዊ ሚዲያ አገናኞች",
+      "facebook": "ፌስቡክ",
+      "facebookPlaceholder": "https://facebook.com/...",
+      "twitter": "ትዊትር",
+      "twitterPlaceholder": "https://twitter.com/...",
+      "linkedin": "ሊንኪድኢን",
+      "linkedinPlaceholder": "https://linkedin.com/...",
+      "instagram": "ኢንስታግራም",
+      "instagramPlaceholder": "https://instagram.com/...",
+      "youtube": "ዩቲዩብ",
+      "youtubePlaceholder": "https://youtube.com/...",
+      "telegram": "ቴሌግራም",
+      "telegramPlaceholder": "https://t.me/...",
+      "tiktok": "ቲክቶክ",
+      "tiktokPlaceholder": "https://tiktok.com/...",
+      "website": "ድረ-ገጽ",
+      "websitePlaceholder": "https://example.com"
+    },
+    "saveButton": "ለውጦችን አስቀምጥ",
+    "savingButton": "በማስቀመጥ ላይ...",
+    "success": "የድርጅት ጭንብል ቅንብሮች በተሳካ ሁኔታ ተዘምኗል",
+    "error": "የተወሰነ የሚያስፈልግ መረጃ ስለጎደለ የምርት ስሙን ማዘመን አልቻልንም። እባክዎ ለውጦችዎን ይገምግሙና እንደገና ይሞክሩ።",
+    "validation": {
+      "nameAmRequired": "የድርጅት ስም (አማርኛ) ያስፈልጋል",
+      "nameEnRequired": "የድርጅት ስም (እንግሊዝኛ) ያስፈልጋል",
+      "primaryColorRequired": "ዋና ቀለም ያስፈልጋል",
+      "welcomeMessageRequired": "የእንኳን ደህና መጡ መልእክት ያስፈልጋል",
+      "footerTextRequired": "የግርጌ ጽሁፍ ያስፈልጋል",
+      "addressRequired": "አድራሻ ያስፈልጋል",
+      "phoneRequired": "ስልክ ያስፈልጋል",
+      "emailRequired": "�ሜይል ያስፈልጋል",
+      "invalidEmail": "የተሳሳተ የኢሜይል አድራሻ"
+    },
+    "modules": {
+      "title": "ሞጁሎች",
+      "dms": "የሰነድ አስተዳደር ስርዓት",
+      "dmsDescription": "የሰነድ አስተዳደር እና የመዝገብ ክትትል አንቃ",
+      "performance": "የአፈጻጸም አስተዳደር",
+      "performanceDescription": "የሰራተኛ አፈጻጸም ክትትል እና ግምገማ አንቃ",
+      "objective": "የግብ አስተዳደር",
+      "objectiveDescription": "የድርጅት ግቦች ማውጫ እና ክትትል አንቃ"
+    },
+    "landingPage": {
+      "title": "የመጀመሪያ ገጽ",
+      "complaint": "ቅሬታ ማስገባት",
+      "complaintDescription": "በህዝባዊ መጀመሪያ ገጽ ላይ ከ«ግባ» ጋር የቅሬታ ማስገባት ቁልፍ አሳይ"
+    }
+  },
+  "sites": {
+    "title": "ጣቢያ ይጨምሩ",
+    "addNew": "አዲስ ጣቢያ ይጨምሩ",
+    "tableName": "ጣቢያዎች",
+    "columns": {
+      "siteName": "የጣቢያ ስም",
+      "key": "ቁልፍ",
+      "domain": "ዶሜይን",
+      "status": "ሁኔታ",
+      "actions": "ድርጊቶች"
+    },
+    "actions": {
+      "view": "ጣቢያን ይመልከቱ",
+      "edit": "ጣቢያን ያስተካክሉ",
+      "branding": "የድርጅት ጭንብል",
+      "archive": "ወደ ማህደር ያስቀምጡ",
+      "restore": "ይመልሱ",
+      "delete": "ይስረዙ"
+    },
+    "dialogs": {
+      "archiveTitle": "ጣቢያን ወደ ማህደር ያስቀምጡ",
+      "archiveDescription": "ጣቢያ {{name}}ን ወደ ማህደር ለማስቀምጥ እርግጠኛ ነዎት? ይህ ምርጫ ሶፍት ዲሌት ነው። ጣቢያው እንደ ማህደር ይሰየማል ግን በማንኛውም ጊዜ ማሳደስ ይችላሉ።",
+      "archiveConfirm": "ጣቢያን ወደ ማህደር ያስቀምጡ",
+      "archiving": "በማስቀመጥ ላይ...",
+      "deleteTitle": "ጣቢያን በቋሚነት ይስረዙ",
+      "deleteDescription": "ጣቢያ {{name}}ን በቋሚነት ለመስረዝ እርግጠኛ ነዎት?<br/><br/><span class=\"font-semibold text-red-600\">ማስጠንቀቂያ: ይህ እርምጃ የማይቀልብ ነው እና ከዚህ ጣቢያ ጋር የተያያዘ ሁሉም መረጃ በቋሚነት ይስረዛል።</span>",
+      "deleteConfirm": "በቋሚነት ይስረዙ",
+      "deleting": "በመስረዝ ላይ...",
+      "restoreTitle": "ጣቢያን ይመልሱ",
+      "restoreDescription": "ጣቢያ {{name}}ን ወደ ንቁ ሁኔታ ለመመለስ እርግጠኛ ነዎት?",
+      "restoreConfirm": "ጣቢያን ይመልሱ",
+      "restoring": "በመመለስ ላይ..."
+    },
+    "form": {
+      "titleEdit": "የጣቢያ ዝርዝሮችን ያስተካክሉ",
+      "titleAdd": "አዲስ ጣቢያ ይጨምሩ",
+      "nameAmLabel": "የጣቢያ ስም (አማርኛ)",
+      "nameAmPlaceholder": "ለምሳሌ፡ ስማርት ኦፊስ",
+      "nameAmRequired": "የአማርኛ ስም ያስፈልጋል።",
+      "nameEnLabel": "የጣቢያ ስም (እንግሊዝኛ)",
+      "nameEnPlaceholder": "ለምሳሌ፡ Smart Office System",
+      "nameEnRequired": "የእንግሊዝኛ ስም ያስፈልጋል።",
+      "keyLabel": "የጣቢያ ቁልፍ",
+      "keyPlaceholder": "ለምሳሌ፡ smart_office",
+      "keyRequired": "ቁልፍ ያስፈልጋል።",
+      "keyFormat": "ቁልፍ ብቻ ፊደላት፣ ቁጥሮች፣ ሽንት ምልክቶች እና ዳሽዎችን ሊይዝ ይችላል።",
+      "keyUnique": "ቁልፍ ልዩ መሆን አለበት። ይህ ቁልፍ አስቀድሞ ጥቅም ላይ ይውላል።",
+      "keyHint": "ይህ ልዩ መለያ ነው እና በኋላ ሊቀየር አይችልም።",
+      "domainLabel": "ዶሜይን",
+      "domainPlaceholder": "ለምሳሌ፡ smartoffice.gov.et",
+      "domainRequired": "ዶሜይን ያስፈልጋል።",
+      "domainNoSpaces": "ዶሜይን ባዶ ቦታ ሊይዝ አይችልም።",
+      "cancel": "ሰርዝ",
+      "saving": "በማስቀመጥ ላይ...",
+      "saveChanges": "ለውጦችን አስቀምጥ",
+      "createSite": "ጣቢያን ፍጠር",
+      "previewLabel": "ወደ ላክ ቅድመ እይታ፡"
+    },
+    "view": {
+      "title": "የጣቢያ ዝርዝሮች",
+      "nameEn": "የጣቢያ ስም (እንግሊዝኛ)",
+      "nameAm": "የጣቢያ ስም (አማርኛ)",
+      "siteKey": "የጣቢያ ቁልፍ",
+      "status": "ሁኔታ",
+      "domain": "ዶሜይን",
+      "close": "ይውጡ"
+    }
+  },
+  "positions": {
+    "employeePositions": "የሰራተኛ ቦታዎች",
+    "viewPositions": "ቦታዎችን ይመልከቱ",
+    "positionRemoved": "ቦታ ተወግዷል",
+    "employeeRemovedFromPosition": "{{employee}} ከ{{position}} ተወግዷል",
+    "failedToRemovePosition": "ቦታን ማስወገድ አልተቻለም",
+    "removeFromPosition": "ከቦታ ደቂቅ",
+    "confirmRemoveFromPosition": "{{employee}}ን ከ{{position}} ማስወገድ ይፈልጋሉ? ይህ እርምጃ መተንበይ የለበትም።",
+    "remove": "ውሰድ",
+    "noPositions": "ምንም ቦታ የለም",
+    "employeeHasNoPositions": "ለዚህ ሰራተኛ ምንም ቦታ ተመድቦ ነው",
+    "positionId": "ቦታ ID",
+    "employee": "ሰራተኛ",
+    "positionAlreadyRemoved": "ቦታ ቀድሞ ተወግዷል",
+    "positionMayHaveBeenRemovedAlready": "ይህ ቦታ ቀድሞ ተወግዶ ወይም በሌላ ተጠቃሚ ተወግዷል",
+    "positionDetails": "የቦታ ዝርዝር",
+    "department": "ዲፓርትመንት",
+    "unit": "ክፍል",
+    "notAvailable": "ያልዋቀረ"
+  }
+}
diff --git a/apps/edr-freight-web/backoffice/src/locales/en/translation.json b/apps/edr-freight-web/backoffice/src/locales/en/translation.json
new file mode 100644
index 000000000..162014f55
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/locales/en/translation.json
@@ -0,0 +1,7399 @@
+{
+  "auditLog": {
+    "filters": {
+      "title": "Filters",
+      "clear": "Clear filters",
+      "searchPlaceholder": "Search activities...",
+      "module": "Module",
+      "allModules": "All modules",
+      "action": "Action",
+      "allActions": "All actions",
+      "status": "Status",
+      "allStatuses": "All statuses",
+      "dateRange": "Date range",
+      "last7Days": "Last 7 days",
+      "last30Days": "Last 30 days"
+    },
+    "stats": {
+      "totalActivities": "Total Activities",
+      "successRate": "Success Rate",
+      "dailyAverage": "Daily Average",
+      "uniqueUsers": "Unique Users",
+      "topActions": "Top Actions",
+      "times": "times"
+    },
+    "card": {
+      "details": "Details",
+      "ip": "IP",
+      "location": "Location",
+      "resource": "Resource"
+    },
+    "export": {
+      "title": "Export Activity Logs",
+      "description": "Choose export options for your activity logs.",
+      "fileName": "File Name",
+      "fileNamePlaceholder": "Enter file name",
+      "format": "Export Format",
+      "includeDetails": "Include detailed information",
+      "includeDateRange": "Include date range in export",
+      "cancel": "Cancel",
+      "export": "Export",
+      "success": "Exporting {{count}} logs as {{format}}",
+      "csv": "CSV",
+      "json": "JSON",
+      "excel": "Excel"
+    },
+    "page": {
+      "fetchSuccess": "Audit logs loaded",
+      "fetchError": "Failed to load audit logs",
+      "fetchKeyError": "Missing moduleKey for audit logs",
+      "activitiesFound": "{{count}} activities found",
+      "systemUser": "System",
+      "viewDetails": "View details",
+      "searchActivity": "Search activity...",
+      "refresh": "Refresh",
+      "export": "Export",
+      "activeLogs": "Active Logs",
+      "cardView": "Card View",
+      "tableView": "Table View",
+      "cards": "Cards",
+      "table": "Table",
+      "showing": "Showing",
+      "of": "of",
+      "totalActivities": "total activities",
+      "prev": "Previous",
+      "next": "Next",
+      "activeFilter": "active filter",
+      "activeFilter_other": "active filters",
+      "clear": "Clear",
+      "loadingAc": "Loading activity logs...",
+      "noActivities": "No activities found",
+      "tryAdjusting": "Try adjusting your filters to find what you're looking for."
+    },
+    "severity": {
+      "critical": "Critical",
+      "high": "High",
+      "medium": "Medium",
+      "low": "Low"
+    },
+    "status": {
+      "success": "Success",
+      "failure": "Failure",
+      "warning": "Warning",
+      "pending": "Pending"
+    },
+    "table": {
+      "time": "Time",
+      "user": "User",
+      "action": "Action",
+      "description": "Description",
+      "module": "Module",
+      "severity": "Severity",
+      "status": "Status",
+      "entity": "Entity"
+    },
+    "detail": {
+      "title": "Audit Log Details",
+      "description": "View details of this audit entry",
+      "action": "Action",
+      "entity": "Entity",
+      "timestamp": "Timestamp",
+      "changes": "Changes Made"
+    },
+    "noRecords": "No audit records found"
+  },
+  "activityLogPage": {
+    "title": "Activity Log",
+    "export": "Export",
+    "searchPlaceholder": "Search logs...",
+    "filterByModule": "Filter by module",
+    "allModules": "All modules",
+    "filterByAction": "Filter by action",
+    "allActions": "All actions",
+    "modules": {
+      "Organizations": "Organizations",
+      "Users": "Users",
+      "Templates": "Templates",
+      "Authentication": "Authentication",
+      "Settings": "Settings",
+      "Reports": "Reports"
+    },
+    "actions": {
+      "CREATE": "Create",
+      "UPDATE": "Update",
+      "DELETE": "Delete",
+      "LOGIN": "Login",
+      "EXPORT": "Export"
+    },
+    "table": {
+      "time": "Time",
+      "action": "Action",
+      "description": "Description",
+      "performedBy": "Performed By",
+      "module": "Module",
+      "status": "Status",
+      "statusLabels": {
+        "success": "Success",
+        "failure": "Failure",
+        "pending": "Pending"
+      },
+      "noLogs": "No activity logs found."
+    }
+  },
+  "nav": {
+    "addNew": "Add New Prefix",
+    "emptyState": "Nothing Found",
+    "externalForYourReference": "External For Your Reference",
+    "dashboard": "Dashboard",
+    "outgoing": "Outgoing",
+    "incoming": "Incoming",
+    "external": "External",
+    "internal": "Internal",
+    "tagBasedReferenceNumber": "Tag-based Reference Number",
+    "cc": "CC",
+    "tagBasedReference": "Tag-based Reference",
+    "selectTag": "Select Tag",
+    "forYourReference": "For Your Reference",
+    "forYourReferenceExternal": "For Your Reference (External)",
+    "forYourReferenceInternal": "For Your Reference (Internal)",
+    "approval": "Approval",
+    "pending": "Pending",
+    "Record Management": "Record Management",
+    "branch": "Branch",
+    "internal_memo": "Internal Memo",
+    "non_smart_user": "Non Smart User",
+    "smartUsers": "Smart Users",
+    "external_non_smart_user": "External Non Smart User",
+    "admin": "Site Management",
+    "modules": "Modules",
+    "moduleNavigationHint": "Click to get navigation items across all modules",
+    "deputyMessage": "Deputy Message",
+    "officeHeadMessage": "Office Head Message",
+    "orgGoal": "Organization Goals",
+    "news": "News",
+    "other": "Other",
+    "homePage": "To Home Page",
+    "myRecord": "My Records",
+    "submitRecord": "Submit Record",
+    "direct": "Direct",
+    "Modules": "Modules",
+    "performanceManagement": "Performance Management",
+    "objectiveManagement": "Objective Management",
+    "performance": "Performance Management",
+    "document": "Document Management",
+    "PerformanceManagement": "Performance Management",
+    "DocumentManagement": "Document Management",
+    "Complaints": "Complaints"
+  },
+  "habeshaCalendar": {
+    "selectDate": "Select Date",
+    "selectYear": "Select Year",
+    "selectMonth": "Select Month",
+    "selectDay": "Select Day",
+    "year": "Year",
+    "month": "Month",
+    "day": "Day",
+    "clear": "Clear",
+    "cancel": "Cancel",
+    "select": "Select",
+    "currentYear": "Current Year",
+    "habeshaCalendar": "Habesha Calendar",
+    "gregorianCalendar": "Gregorian Calendar"
+  },
+  "rating": {
+    "serviceRating": "Service Rating",
+    "rateYourExperience": "Rate your experience with our service",
+    "veryPoor": "Very Poor",
+    "poor": "Poor",
+    "normal": "Normal",
+    "good": "Good",
+    "excellent": "Excellent"
+  },
+  "initiationType": {
+    "self": "Self",
+    "team": "Team"
+  },
+  "dashboard": {
+    "totalOutgoing": "Total Outgoing",
+    "totalIncoming": "Total Incoming",
+    "Percentage": "Percentage",
+    "Count": "Count",
+    "Status": "Status",
+    "Total": "Total",
+    "pieChart": "Pie Chart",
+    "barChart": "Bar Chart",
+    "table": "Table",
+    "monthlyIncoming": "Monthly Incoming Records",
+    "monthlyOutgoing": "Monthly Outgoing Records",
+    "totalInVsOut": "Total Incoming vs Outgoing",
+    "monthlyInVsOut": "Monthly Incoming vs Outgoing",
+    "weeklyInVsOut": "Weekly Incoming vs Outgoing",
+    "dailyInVsOut": "Daily Incoming vs Outgoing",
+    "exportPdf": "Export PDF",
+    "exporting": "Exporting...",
+    "print": "Print",
+    "exportFormat": "Export Format",
+    "selectFormat": "Select Format",
+    "totalEmployees": "Total Employees",
+    "totalUnits": "Total Units",
+    "totalPositions": "Total Positions",
+    "totalDocuments": "Total Documents",
+    "organizationDashboard": "Organization Dashboard",
+    "userManagement": "User Management",
+    "userPositionApproval": "User Position Approval",
+    "userManagementDesc": "Manage users and departments",
+    "contentManagementDesc": "Manage headers, footers, and seals",
+    "excelUploader": "Excel Uploader",
+    "ccRecords": "CC Records",
+    "totalApproval": "Total Approval",
+    "lastUpdated": "Last updated",
+    "refresh": "Refresh",
+    "refreshing": "Refreshing...",
+    "never": "Never",
+    "approvalStats": "Approval Stats",
+    "externalIncoming": "External Incoming",
+    "internalIncoming": "Internal Incoming",
+    "incomingStats": "Incoming Stats",
+    "outgoingStats": "Outgoing Stats",
+    "externalIncomingRecords": "External Incoming Records",
+    "internalIncomingRecords": "Internal Incoming Records",
+    "advanced": "Advanced Dashboard",
+    "status": {
+      "inProgress": "In Progress",
+      "accepted": "Accepted",
+      "reassigned": "Reassigned",
+      "draft": "Draft",
+      "forward": "Forward",
+      "approved": "Approved",
+      "rejected": "Rejected",
+      "adjusted": "Adjusted",
+      "sent": "Sent",
+      "approve": "Approve"
+    },
+    "excelUploaderDesc": "Bulk import users from Excel",
+    "positionSettings": "Position Settings",
+    "positionSettingsDesc": "Configure organizational positions",
+    "archiveUsers": "Archive Users",
+    "archiveUsersDesc": "Manage archived user accounts",
+    "webManagement": "Web Management",
+    "webManagementDesc": "Manage website content and settings",
+    "overviewDescription": "Overview of your organization's performance and activities",
+    "quickActions": "Quick Actions",
+    "contentManagement": "Content Management",
+    "exportUserData": "Export User Data",
+    "recentActivities": "Recent Activities",
+    "selectUnit": "Select Unit",
+    "loadingUnits": "Loading units...",
+    "refreshData": "Refresh Data",
+    "noUnitsFound": "No units found",
+    "organizationIdRequired": "Organization ID is required",
+    "exportError": "Export failed. Please try again.",
+    "uploadHeader": "New header image uploaded",
+    "updateSeal": "Organization seal updated",
+    "removeFooter": "Footer image removed",
+    "twoHoursAgo": "2 hours ago",
+    "fiveHoursAgo": "5 hours ago",
+    "oneDayAgo": "1 day ago",
+    "orgMsg": "Overview of your organization's statistics and activities",
+    "errorMsg": "Error loading organization data. Please try refreshing the page.",
+    "title": "Performance Dashboard",
+    "performanceMetrics": "Performance Metrics",
+    "selectPlanYear": "Select Plan Year",
+    "loading": "Loading dashboard...",
+    "selectPlanYearToView": "Select a plan year to view the dashboard",
+    "goToReport": "Go to Report",
+    "welcomeToDms": "Welcome to DMS",
+    "forYou": "For You",
+    "recommended": "Recommended",
+    "show": "Show",
+    "hide": "Hide",
+    "recentDocuments": "Recent Documents",
+    "searchPlaceholder": "Search documents...",
+    "loadingUpdates": "Loading updates...",
+    "noUpdates": "No updates",
+    "recentlyUpdated": "Recently updated",
+    "oldestUpdated": "Oldest updated",
+    "recentlyAdded": "Recently added",
+    "oldestAdded": "Oldest added",
+    "nameAZ": "Name A-Z",
+    "nameZA": "Name Z-A"
+  },
+  "verification": {
+    "pending": "Verification Pending",
+    "message": "Your registration is under verification. If 24 hours have passed and your account is still not verified, please contact us at",
+    "contactSupport": "Contact Support"
+  },
+  "status": {
+    "inProgress": "In Progress",
+    "accepted": "Accepted",
+    "reassigned": "Reassigned",
+    "draft": "Draft",
+    "forward": "Forward",
+    "approved": "Approved",
+    "rejected": "Rejected",
+    "adjusted": "Adjusted",
+    "sent": "Sent",
+    "all": "All",
+    "dispatched": "Dispatched",
+    "submitted": "Submitted"
+  },
+  "welcome": "Welcome",
+  "change_password": "Change Password",
+  "sign_out": "Sign Out",
+  "view_profile": "View Profile",
+  "user": "User",
+  "common": {
+    "back": "Back",
+    "Back": "Back",
+    "View": "View",
+    "today": "Today",
+    "yesterday": "Yesterday",
+    "unknownUser": "Unknown user",
+    "yes": "Yes",
+    "no": "No",
+    "na": "N/A",
+    "None": "None",
+    "Submit": "Submit",
+    "save": "Save",
+    "saveAsDraft": "Save as Draft",
+    "Cancel": "Cancel",
+    "print": "Print",
+    "confirmAndSubmit": "Submit",
+    "goBack": "Go Back",
+    "Confirm": "Confirm",
+    "noResult": "No Result",
+    "create": "Create",
+    "update": "Update",
+    "Edit": "Edit",
+    "Unselect": "Unselect",
+    "DeactivateUser": "Delete User",
+    "requiredFields": "Required fields",
+    "notAvailable": "Not Available",
+    "referenceNumber": "referenceNumber",
+    "subject": "Subject",
+    "createdDate": "Created Date",
+    "dispatchedDate": "Dispatched Date",
+    "status": "Status",
+    "search": "Search",
+    "name": "Name",
+    "delete": "Delete",
+    "actions": "Actions",
+    "verify": "Verify",
+    "verifying": "Verifying...",
+    "viewReply": "View Reply",
+    "created": "Created",
+    "loading": "Loading...",
+    "error": "Error",
+    "success": "Success",
+    "createdAt": "Created Date",
+    "view": "View",
+    "edit": "Edit",
+    "cancel": "Cancel",
+    "saving": "Saving...",
+    "deleting": "Deleting...",
+    "retry": "Retry",
+    "clear": "Clear",
+    "refresh": "Refresh",
+    "confirm": "Confirm",
+    "showing": "Showing",
+    "of": "of",
+    "close": "Close",
+    "submit": "Submit",
+    "reset": "Reset",
+    "filter": "Filter",
+    "sort": "Sort",
+    "export": "Export",
+    "import": "Import",
+    "download": "Download",
+    "upload": "Upload",
+    "preview": "Preview",
+    "details": "Details",
+    "settings": "Settings",
+    "profile": "Profile",
+    "logout": "Logout",
+    "login": "Login",
+    "register": "Register",
+    "forgotPassword": "Forgot Password",
+    "resetPassword": "Reset Password",
+    "changePassword": "Change Password",
+    "email": "Email",
+    "password": "Password",
+    "phone": "Phone",
+    "address": "Address",
+    "city": "City",
+    "country": "Country",
+    "state": "State",
+    "zip": "Zip Code",
+    "firstName": "First Name",
+    "lastName": "Last Name",
+    "middleName": "Middle Name",
+    "gender": "Gender",
+    "birthDate": "Birth Date",
+    "age": "Age",
+    "active": "Active",
+    "inactive": "Inactive",
+    "completed": "Completed",
+    "pending": "Pending",
+    "approved": "Approved",
+    "rejected": "Rejected",
+    "enabled": "Enabled",
+    "disabled": "Disabled",
+    "visible": "Visible",
+    "hidden": "Hidden",
+    "public": "Public",
+    "private": "Private",
+    "required": "Required",
+    "optional": "Optional",
+    "all": "All",
+    "none": "None",
+    "select": "Select",
+    "remove": "Remove",
+    "add": "Add",
+    "new": "New",
+    "old": "Old",
+    "current": "Current",
+    "previous": "Previous",
+    "next": "Next",
+    "first": "First",
+    "last": "Last",
+    "total": "Total",
+    "average": "Average",
+    "maximum": "Maximum",
+    "minimum": "Minimum",
+    "percentage": "Percentage",
+    "count": "Count",
+    "sum": "Sum",
+    "date": "Date",
+    "time": "Time",
+    "datetime": "Date & Time",
+    "from": "From",
+    "to": "To",
+    "between": "Between",
+    "before": "Before",
+    "after": "After",
+    "tomorrow": "Tomorrow",
+    "thisWeek": "This Week",
+    "lastWeek": "Last Week",
+    "nextWeek": "Next Week",
+    "thisMonth": "This Month",
+    "lastMonth": "Last Month",
+    "nextMonth": "Next Month",
+    "thisYear": "This Year",
+    "lastYear": "Last Year",
+    "nextYear": "Next Year",
+    "january": "January",
+    "february": "February",
+    "march": "March",
+    "april": "April",
+    "may": "May",
+    "june": "June",
+    "july": "July",
+    "august": "August",
+    "september": "September",
+    "october": "October",
+    "november": "November",
+    "december": "December",
+    "monday": "Monday",
+    "tuesday": "Tuesday",
+    "wednesday": "Wednesday",
+    "thursday": "Thursday",
+    "friday": "Friday",
+    "saturday": "Saturday",
+    "sunday": "Sunday",
+    "am": "AM",
+    "pm": "PM",
+    "morning": "Morning",
+    "afternoon": "Afternoon",
+    "evening": "Evening",
+    "night": "Night",
+    "hour": "Hour",
+    "minute": "Minute",
+    "second": "Second",
+    "day": "Day",
+    "week": "Week",
+    "month": "Month",
+    "year": "Year",
+    "decade": "Decade",
+    "century": "Century",
+    "millennium": "Millennium",
+    "notFound": "Not Found",
+    "updatedAt": "Updated Date",
+    "navigation": "Navigation",
+    "backToGoal": "Back to Goal",
+    "backToGoals": "Back to Goals",
+    "additionalInfo": "Additional Information",
+    "filters": "Filters",
+    "breadcrumb": "Breadcrumb",
+    "home": "Home",
+    "planYear": "Plan Year",
+    "goal": "Goal",
+    "majorTask": "Major Task",
+    "detailTask": "Detail Task",
+    "expectation": "Expectation",
+    "achievement": "Achievement",
+    "employee": "Employee",
+    "teamLeader": "Team Leader",
+    "Migrate": "Migrate",
+    "adopt": "Adopt",
+    "page": "Page",
+    "Delete": "Delete",
+    "Deleting": "Deleting...",
+    "DeletedSuccessfully": "Deleted successfully",
+    "FailedToDelete": "Failed to delete",
+    "ConfirmDelete": "Confirm Delete",
+    "DeleteConfirmationMessage": "Are you sure you want to delete \"{{name}}\"? This action cannot be undone.",
+    "addReply": "Add Reply",
+    "replies": "Replies",
+    "replyAttachments": "Reply Attachments",
+    "mockDownload": "Downloading simulated attachment: ",
+    "noReplies": "No replies added yet.",
+    "replyMessage": "Reply Message",
+    "replyPlaceholder": "Write your reply message or comment here...",
+    "attachments": "Attachments",
+    "uploadMessage": "Click to upload or drag and drop",
+    "uploadFormats": "PDF, PNG, JPG, ZIP (max 10MB)",
+    "submitting": "Submitting...",
+    "comment": "Comment",
+    "replynote": "Only one attachment per reply is allowed.",
+    "basicInformation": "Basic Information"
+  },
+  "migration": {
+    "title": "Migrate Position Type",
+    "fromPositionType": "From Position Type",
+    "toPositionType": "To Position Type",
+    "selectSourcePositionType": "Select source position type...",
+    "selectTargetPositionType": "Select target position type...",
+    "migrationPath": "Migration",
+    "migrateAllPositions": "Migrate All Positions",
+    "confirmMigration": "Confirm Migration",
+    "migrateAllDescription": "This will migrate all positions from {{fromName}} to {{toName}}. This action cannot be undone.",
+    "yesMigrateAll": "Yes, Migrate All",
+    "migrateSelectedPositions": "Migrate Selected Positions",
+    "selectPositionsToMigrate": "Select positions to migrate",
+    "searchPositions": "Search positions...",
+    "selected": "Selected",
+    "noPositionsFound": "No positions found",
+    "noPositionsAvailable": "No positions available",
+    "migrateSelectedButton": "Migrate Selected Positions ({{count}})",
+    "confirmSelectedMigration": "Confirm Selected Migration",
+    "migrateSelectedDescription": "You are about to migrate {{count}} selected position(s) from {{fromName}} to {{toName}}.",
+    "selectBothPositionTypes": "Please select both From and To position types",
+    "selectAtLeastOnePosition": "Please select at least one position",
+    "allPositionsMigratedSuccess": "All positions migrated successfully",
+    "failedToMigratePositions": "Failed to migrate positions",
+    "selectedPositionsMigratedSuccess": "{{count}} position(s) migrated successfully",
+    "failedToMigrateSelectedPositions": "Failed to migrate selected positions",
+    "migratedData": "Migrated Records",
+    "migratedRecords": "Migrated Records",
+    "exportData": "Export Data",
+    "exporting": "Exporting...",
+    "selectUnit": "Select Unit",
+    "columns": {
+      "referenceNumber": "Reference Number",
+      "letterNumber": "Letter Number",
+      "uploadedBy": "Uploaded By",
+      "organization": "Organization",
+      "dispatchedDate": "Dispatched Date",
+      "status": "Status",
+      "subject": "Subject"
+    },
+    "viewRecord": "View",
+    "invalidRecordId": "Error: Invalid record ID",
+    "loadingRecord": "Loading record...",
+    "errorLoadingRecord": "Error loading record: {{message}}"
+  },
+  "collaboration": {
+    "inProgress": "In Progress",
+    "done": "Done",
+    "all": "All",
+    "list": "Collaborations",
+    "comment": "Comment",
+    "comments": "Comments",
+    "commentTitle": "Collaboration comments",
+    "commentDialogDescription": "Review all collaborator comments here. If you have not commented yet, you can add yours below.",
+    "commentRequired": "Comment cannot be empty.",
+    "commentSubmitted": "Comment submitted.",
+    "commentUpdated": "Comment updated successfully.",
+    "commentDeleted": "Comment deleted successfully.",
+    "commentExists": "You have already commented on this record version.",
+    "commentsEmpty": "No comments have been added yet.",
+    "commentsCount": "{{count}} comment(s)",
+    "commentsEmptyState": "Once collaborators start commenting, their feedback will appear here.",
+    "reviewedCount": "{{count}} collaborator(s) reviewed",
+    "unknownUser": "Unknown user",
+    "yourComment": "Your comment",
+    "edited": "Edited",
+    "commentPlaceholder": "Write your comment...",
+    "addComment": "Add your comment",
+    "singleCommentRule": "You can submit one comment for the current record version.",
+    "postComment": "Post comment",
+    "deleteCommentTitle": "Delete comment?",
+    "deleteCommentDescription": "This will remove your current comment. You can add a fresh one again afterward.",
+    "close": "Close",
+    "edit": "Edit",
+    "adjust": "Adjust",
+    "adjustSubmitted": "Adjustment sent successfully.",
+    "adjustFailed": "Failed to send the adjustment request.",
+    "adjustCommentMissing": "No comment found to use for adjustment."
+  },
+  "profile": {
+    "recentActivity": "Recent Activity",
+    "accountSafety": "Account safety",
+    "twoFactorAuth": "Two-Factor Authentication",
+    "twoFactorDesc": "Add an extra layer of security",
+    "enabled": "Enabled",
+    "disabled": "Disabled",
+    "loading": "Loading profile...",
+    "error": "Failed To Load Profile",
+    "tryAgain": "Try Again",
+    "sessions": "Sessions",
+    "noName": "No name",
+    "signOut": "Sign Out",
+    "email": "Email",
+    "userType": "User Type",
+    "userTypes": {
+      "employee": "Employee"
+    },
+    "activity": {
+      "login": "Login",
+      "passwordChanged": "Password Changed"
+    },
+    "passwordSet": "Password Set",
+    "status": {
+      "accepted": "Accepted"
+    },
+    "positionDetails": "Position Details",
+    "positionName": "Position Name",
+    "positionKey": "Position Key",
+    "isDelegate": "Is Delegate",
+    "employeeId": "Employee ID",
+    "permissions": "Permissions",
+    "noPermissions": "No permissions assigned",
+    "accountSecurity": "Account Security",
+    "password": "Password",
+    "passwordSetStatus": "Password is set",
+    "passwordNotSetStatus": "Password not set",
+    "changePassword": "Change Password",
+    "updateProfile": "Update Profile",
+    "profile": "profile",
+    "englishName": "Please Enter name in english",
+    "amharicName": "Please Enter name in amharic",
+    "username": "Please Enter Username",
+    "phoneNumber": "Please Enter Phone Number",
+    "emailmsg": "Please Enter Email",
+    "emailRequired": "Email is required",
+    "usernameRequired": "Username is required",
+    "phoneRequired": "Phone number is required",
+    "englishNameRequired": "Name in English is required",
+    "amharicNameRequired": "Name in Amharic is required",
+    "invalidPhoneFormat": "Invalid phone number format.",
+    "validPhoneFormat": "Please enter a valid phone number in the format +2519XXXXXXXX or 09XXXXXXXX",
+    "invalidEmailFormat": "Invalid email format",
+    "validEmailFormat": "Please enter a valid email address",
+    "profileUpdateSuccess": "Profile updated successfully",
+    "profileUpdated": "Your profile is updated",
+    "profileUpdateFailed": "Failed To Update Profile",
+    "updating": "Updating"
+  },
+  "complaint": {
+    "title": "Submit Your Complaint",
+    "subtitle": "We're here to help. Provide detailed information so we can assist you effectively.",
+    "formTitle": "Complaint Form",
+    "fullName": "Full Name",
+    "phone": "Phone Number",
+    "subCity": "Sub City",
+    "woreda": "Woreda",
+    "houseNumber": "House Number",
+    "institution": "Institution",
+    "place": "Complaint Place",
+    "details": "Complaint Details",
+    "want": "Desired Resolution",
+    "evidence": "Evidence (Optional)",
+    "selectedFiles": "Selected files",
+    "disclaimerTitle": "Important Disclaimer",
+    "disclaimerText": "By submitting this form, you confirm that the information provided is true and accurate. False complaints may be subject to legal action.",
+    "accept": "I have read and accept the disclaimer",
+    "submit": "Submit Complaint",
+    "submitting": "Submitting...",
+    "success": "Complaint Submitted Successfully",
+    "receiveDisabled": "Complaint receiving is disabled for this unit.",
+    "receiveCheckFailed": "Could not verify complaint receiving for this unit. Please try again.",
+    "receiveCheckInProgress": "Still verifying complaint receiving for this unit. Please wait.",
+    "keepId": "Please keep your complaint ID for future reference:",
+    "error": "Error",
+    "close": "Close",
+    "back": "Back",
+    "followTitle": "Follow Complaint",
+    "followSubtitle": "We're here to support you — track the progress of your complaint right here.",
+    "selectCompliant": "Select Complaint",
+    "noEvidence": "No Evidence",
+    "compliantId": "Compliant Tracker Number",
+    "enterComNum": "Enter Compliant Tracker Number",
+    "message": "Response",
+    "complaintNo": "Complaint Number",
+    "errorMsg": "Could not fetch complaint. Please check your compliant tracker number and try again.",
+    "choice": {
+      "title": "Submit a Complaint",
+      "subtitle": "Choose how you would like to verify your identity before submitting a complaint.",
+      "prompt": "Choose your identity provider to continue. We'll sign you in or create your account automatically.",
+      "faydaTitle": "Individual (FAYDA)",
+      "faydaDescription": "For citizens filing a complaint as an individual. You will verify your identity with your national FAYDA ID.",
+      "faydaAction": "Verify with FAYDA",
+      "tinTitle": "Organization (TIN)",
+      "tinDescription": "For organizations filing a complaint using a Tax Identification Number (TIN).",
+      "tinAction": "Verify with TIN",
+      "etradeTitle": "Organization (E-Trade)",
+      "etradeDescription": "For organizations filing a complaint. Verify using your business TIN and trade license from E-Trade.",
+      "etradeAction": "Verify with E-Trade",
+      "verificationNote": "This step verifies your identity to file a complaint. It is not the same as creating or signing in to a portal account.",
+      "backToMethod": "Back to verification options"
+    },
+    "tin": {
+      "title": "Verify with TIN",
+      "subtitle": "Enter your organization's Tax Identification Number to continue.",
+      "formTitle": "Organization Verification",
+      "formDescription": "Provide your 10-digit TIN number to verify your organization before submitting a complaint.",
+      "complaintSubtitle": "Your organization has been verified. Please provide the complaint details below.",
+      "verifiedInfo": "Verified Organization Information",
+      "organizationName": "Organization Name",
+      "tinLabel": "TIN Number",
+      "tinPlaceholder": "Enter 10-digit TIN",
+      "tinHint": "TIN must be exactly 10 digits.",
+      "tinRequired": "TIN number is required",
+      "tinInvalid": "Please enter a valid 10-digit TIN number",
+      "notFound": "No registered business was found for the provided TIN.",
+      "verificationFailed": "TIN verification failed. Please try again.",
+      "registrationFailed": "Could not complete eTrade registration. Please try again.",
+      "verifying": "Verifying...",
+      "verify": "Verify",
+      "submit": "Verify and Continue",
+      "proxyError": "Could not reach the business registration service. Please try again later.",
+      "languageLabel": "Verification language",
+      "languageHint": "Requests are sent to eTrade using the {{language}} language code.",
+      "languageEnglish": "English",
+      "languageAmharic": "Amharic",
+      "regNo": "Registration Number",
+      "tradeName": "Trade Name",
+      "licenseNumber": "Trade License Number"
+    },
+    "fayda": {
+      "submitComplaint": "Submit Complaint",
+      "landingTitle": "Submit a Complaint",
+      "landingSubtitle": "Verify your identity with FAYDA to submit a complaint — no account required.",
+      "stepVerify": "Verify with FAYDA",
+      "stepVerifyDesc": "Authenticate securely using your national FAYDA ID. No Smart Office account is needed.",
+      "stepSubmit": "Submit your complaint",
+      "stepSubmitDesc": "Fill in the complaint details and we will route it to the appropriate office.",
+      "verifyWithFayda": "Verify with FAYDA",
+      "noAccountNeeded": "You do not need to create or log in to a Smart Office account.",
+      "verifying": "Verifying your identity with FAYDA...",
+      "verificationFailed": "FAYDA verification failed. Please try again.",
+      "missingCode": "Missing authorization code from FAYDA.",
+      "errors": {
+        "FAYDA_CLIENT_ID_MISSING": "FAYDA client is not configured. Contact support.",
+        "FAYDA_TOKEN_NETWORK_ERROR": "Could not reach FAYDA to complete sign-in. Please try again.",
+        "FAYDA_TOKEN_HTTP_400": "FAYDA rejected the sign-in request. Please start verification again.",
+        "FAYDA_TOKEN_HTTP_401": "FAYDA authentication failed. Please try again.",
+        "FAYDA_TOKEN_HTTP_500": "FAYDA sign-in service is unavailable. Please try again later.",
+        "FAYDA_ACCESS_TOKEN_MISSING": "FAYDA did not return an access token. Please try again.",
+        "FAYDA_USERINFO_NETWORK_ERROR": "Could not retrieve your FAYDA profile. Please try again.",
+        "FAYDA_USERINFO_HTTP_401": "Your FAYDA session expired. Please verify again.",
+        "FAYDA_USERINFO_HTTP_500": "FAYDA profile service is unavailable. Please try again later.",
+        "FAYDA_ID_MISSING": "FAYDA did not return your national ID number. Please try again.",
+        "FAYDA_NAME_MISSING": "FAYDA did not return your name. Please try again.",
+        "FAYDA_SERVER_CONFIG_MISSING": "FAYDA authentication is not configured on this server. Contact support or ensure /auth/signin-with-fayda and /auth/signup-with-fayda are enabled on IAM.",
+        "FAYDA_PROFILE_INCOMPLETE": "FAYDA returned incomplete profile information. Please try again.",
+        "FAYDA_EXCHANGE_FAILED": "FAYDA verification failed. Please try again."
+      },
+      "backToComplaints": "Back to Complaints",
+      "formTitle": "Complaint Form",
+      "formSubtitle": "Your identity has been verified. Please provide the complaint details below.",
+      "verifiedInfo": "Verified",
+      "faydaNumber": "FAYDA Number",
+      "recipient": "Recipient (Regional Office / Department)",
+      "recipientPlaceholder": "Select or enter the recipient office",
+      "subject": "Subject",
+      "subjectPlaceholder": "Brief summary of your complaint",
+      "description": "Description",
+      "descriptionPlaceholder": "Describe your complaint in detail...",
+      "attachment": "Attachment",
+      "uploadHint": "Click to upload supporting documents (PDF, JPG, PNG)",
+      "successSubtitle": "Thank you for submitting your complaint.",
+      "successMessage": "Your complaint has been submitted successfully.",
+      "successNote": "A tracking number will be provided once the backend is connected. You can track your complaint using the link below.",
+      "backToMyRecords": "Back to My Records",
+      "backToHome": "Back to Home"
+    }
+  },
+  "header": {
+    "tigrigna": "Tigrigna",
+    "affar": "Affar",
+    "somali": "Somali",
+    "oromo": "Affan Oromo",
+    "user": "User",
+    "management": "Management",
+    "notifications": "Notifications",
+    "english": "English",
+    "englishShort": "ENG",
+    "amharic": "Amharic",
+    "amharicShort": "አማ",
+    "french": "French",
+    "frenchShort": "FR",
+    "viewProfile": "View Profile",
+    "changePassword": "Change Password",
+    "signOut": "Sign Out",
+    "settings": "Settings",
+    "addTeeter": "Add Teeter and Signature",
+    "addSignature": "Add Signature",
+    "Remark": "Remark",
+    "Description": "Description",
+    "navigation": {
+      "dashboard": "Dashboard",
+      "outgoing": "Outgoing",
+      "incoming": "Incoming",
+      "approval": "Approval",
+      "delegation": "Delegation",
+      "pending": "Pending",
+      "settings": "Settings",
+      "collaborations": "Collaborations",
+      "collaboration": "Collaborations"
+    },
+    "editProfile": "Edit Profile"
+  },
+  "Document Attachments": "Document Attachments",
+  "Login Method": "Login Method",
+  "Sign Up": "Sign Up",
+  "Back to Home": "Back to Home",
+  "forgotpassword": {
+    "title": "Forgot Password?",
+    "subtitle": "No worries, we'll send you reset instructions",
+    "phone": "Phone Number",
+    "phoneplaceholder": "+251912345678 or 09XXXXXXXX",
+    "invalidphone": "Invalid phone number format. Use +2519XXXXXXXX or 09XXXXXXXX",
+    "checkphone": "Check your Phone Number",
+    "checkdesc": "We'll send a password reset link to your phone number.",
+    "sending": "Sending Reset Link...",
+    "sendresetlink": "Send Reset Link",
+    "backtologin": "Back to Login",
+    "remember": "Remember your password?",
+    "signin": "Sign in",
+    "home": "Home",
+    "success": "Password reset link sent",
+    "successdesc": "Please check your phone number for the reset link.",
+    "fail": "Failed to request password reset"
+  },
+  "Don't have an account?": "Don’t have an account? Not a system user?",
+  "addRecord": {
+    "Reference Number": "Reference Number",
+    "Enter Reference Number": "Enter Reference Number",
+    "Record Tags": "Record Tags",
+    "Select Record Tags": "Record Tags",
+    "SelectedReceivingUnits": "Selected Receiving Units",
+    "EditRecord": "Edit Record",
+    "editIncomingRecord": "Edit Record",
+    "Record Type": "Record Type",
+    "Select Record Type": "Select Record Type",
+    "Initiation Type": "Initiation Type",
+    "Select Initiation Type": "Select Initiation Type",
+    "Receiving Unit": "Receiving Unit",
+    "Select Receiving Units": "Select Receiving Unit",
+    "Receiving Users": "Receiving Users",
+    "Select Receiving Users": "Select Receiving Users",
+    "Prefix": "Prefix",
+    "Select Prefix": "Select Prefix",
+    "Non Smart Receiving Unit": "Non Smart Receiving Unit",
+    "Enter Non Smart Receiving Organization": "Enter Non Smart Receiving Organization",
+    "To Departments": "To Departments",
+    "Select Department": "Select Departments",
+    "Preferred Language": "Preferred Language",
+    "Select Language": "Select Language",
+    "Suffix": "Suffix",
+    "Select Suffix": "Select Suffix",
+    "Position Prefix": "Position Prefix",
+    "Select Position Prefix": "Select Position Prefix",
+    "Subject": "Subject",
+    "Enter Subject": "Enter Subject",
+    "Letter Template": "Letter Template",
+    "Select Letter Template": "Select Letter Template",
+    "Body": "Body",
+    "External CC": "External CC",
+    "Select External CC": "Select External CC",
+    "Internal CC": "Internal CC",
+    "Select Internal CC": "Select Internal CC",
+    "Non Smart CC Unit": "Non Smart CC Unit",
+    "Enter  Non Smart CC Organization": "Enter  Non Smart CC Organization",
+    "Cancel": "Cancel",
+    "Add": "+ Add",
+    "English": "English",
+    "Amharic": "Amharic",
+    "Header": "Letter's Header",
+    "Select Header": "Select Header",
+    "No Header": "No Header",
+    "Footer": "Letter's Footer",
+    "Select Footer": "Select Footer",
+    "No Footer": "No Footer",
+    "Collaborators": "Collaborators",
+    "Select Collaborators": "Select Collaborators",
+    "Sincerely Text": "Sincerely Text",
+    "Enter Sincerely Text": "Enter Sincerely Text",
+    "record": "Record",
+    "attachment": "Attachment",
+    "failedToCreateRecord": "Failed To Create Record",
+    "recordSubmittedSuccessfully": "Record Forwarded Successfully.",
+    "createRecordFirst": "Please Create a Record First To Upload Attachments.",
+    "previous": "Previous",
+    "submit": "Submit",
+    "recordNotCreatedYet": "Record Has Not Been Created Yet.",
+    "submitting": "Submitting...",
+    "selectCollaborators": "Select Collaborators",
+    "Enter CC Prefix": "Enter CC Prefix",
+    "CC Prefix": "CC Prefix",
+    "Enter CC Suffix": "Enter CC Suffix",
+    "CC Suffix": "CC Suffix",
+    "Sign Status": "Sign Status",
+    "ccUsers": "CC Users",
+    "selectCCUsers": "Select CC Users",
+    "refreshOptions": "Refresh Options",
+    "isTeamSig": "Is With Team Signature",
+    "letterName": "File Name",
+    "addLetterName": "Enter File Name",
+    "Edit Mode": "Edit Mode",
+    "Create Mode": "Create Mode",
+    "Edit Record": "Edit Record",
+    "Create New Record": "Create New Record",
+    "Fill in the details below": "Fill in the details below",
+    "Basic Information": "Basic Information",
+    "enterBasicDetails": "Enter the basic details of your record",
+    "Creation Type": "Creation Type",
+    "Select Creation Type": "Select Creation Type",
+    "Recipients": "Recipients",
+    "specifyRecipients": "Specify who will receive this record",
+    "Template & Formatting": "Template & Formatting",
+    "customizeAppearance": "Customize the appearance of your record",
+    "Loading Headers...": "Loading headers...",
+    "Loading Footers...": "Loading footers...",
+    "Letter Content": "Letter Content",
+    "writeLetterContent": "Write the content of your letter",
+    "Header Preview": "Header Preview",
+    "Footer Preview": "Footer Preview",
+    "Carbon Copy (CC)": "Carbon Copy (CC)",
+    "addCCRecipients": "Add carbon copy recipients",
+    "forYourReference": "For Your Reference",
+    "forYourReferenceExternal": "For Your Reference (External)",
+    "forYourReferenceInternal": "For Your Reference (Internal)",
+    "selectForYourReference": "Select departments for your reference",
+    "Enter Non Smart CC Organization": "Enter non-smart CC organization",
+    "Attachments": "Attachments",
+    "uploadSupportingDocuments": "Upload supporting documents",
+    "Manual": "Manual",
+    "personal": "Personal",
+    "Position": "Position",
+    "formHasErrors": "Please fix the form errors before submitting",
+    "processingRequest": "Processing your request, please wait...",
+    "letterInformation": "Letter Information",
+    "organizationInformation": "Organization Information",
+    "skipOneLevel": "Should Jump One Step",
+    "Non Smart FYR Unit": "Non Smart FYR Unit",
+    "Enter Non Smart FYR Organization": "Enter Non Smart FYR Organization",
+    "uploadFromComputer": "Upload from Computer",
+    "addAttachmentFromDms": "+ Add Attachment from DMS"
+  },
+  "Preview Record": "Preview Record",
+  "preview": {
+    "title": "Record Preview",
+    "generating": "Generating preview...",
+    "failed": "Preview generation failed",
+    "retry": "Retry",
+    "close": "Close",
+    "print": "Print",
+    "loading": "Loading preview...",
+    "error": "Unable to generate preview",
+    "networkError": "Network error occurred. Please check your connection and try again.",
+    "noData": "No preview data available",
+    "button": "Preview",
+    "validationError": "Please fix validation errors before preview"
+  },
+  "print": {
+    "title": "Print Options",
+    "description": "Select what you want to print",
+    "recordDocument": "Record Document",
+    "recordDescription": "Print the main record document",
+    "attachments": "Attachments",
+    "noAttachments": "No attachments available",
+    "summary": "Items to print",
+    "selectAtLeastOne": "Please select at least one item to print",
+    "readyToPrint": "Ready to print",
+    "print": "Print",
+    "printing": "Printing...",
+    "success": "Print job sent successfully",
+    "error": "Failed to print. Please try again.",
+    "cancel": "Cancel"
+  },
+  "incomingRecord": {
+    "createdSuccess": "Incoming letter created successfully",
+    "updatedSuccess": "Incoming letter updated successfully",
+    "UpdatedSuccessfully": "updated successfully"
+  },
+  "externalPortal": {
+    "letterSentSuccess": "Letter submitted successfully"
+  },
+  "userRecord": {
+    "All": "All",
+    "Draft": "Draft",
+    "createAndForward": "Create and Forward",
+    "createAndApprove": "Create and Approve",
+    "updateAndForward": "Update and Forward",
+    "updateAndApprove": "Update and Approve",
+    "recordCreatedAndForwarded": "Record created and forwarded",
+    "recordCreatedAndSent": "Record created and sent",
+    "recordUpdatedAndForwarded": "Record updated and forwarded",
+    "recordCreatedReadyToApprove": "Record created — pick stamp & signature to approve",
+    "recordUpdatedReadyToApprove": "Record updated — pick stamp & signature to approve",
+    "The main file must be a PDF document": "The main file must be a PDF document",
+    "storageUploadFailed": "We could not upload the file. Please try again.",
+    "Submitted": "Fowarded",
+    "Accepted": "Accepted",
+    "Approved": "Approved",
+    "Rejected": "Rejected",
+    "Returned": "Returned",
+    "Adjustment": "Adjustment",
+    "Team Signature": "Pending Signatures",
+    "Sent": "Sent",
+    "Letters": "Letters",
+    "External Outgoing": "External Outgoing",
+    "Internal Outgoing": "Internal Outgoing",
+    "To": "To",
+    "Send": "Send",
+    "Send Directly": "Send Directly",
+    "nonSmartReceiverName": "Non Smart Receiver",
+    "ReceiverPosition": "Receiver Position",
+    "ReceiverEmployee": "Receiver Employee",
+    "ReceiverUnit": "Receiver Unit",
+    "Subject": "Subject",
+    "Date": "Date",
+    "Search": "Search",
+    "Add Record": "Add Record",
+    "Error loading records.": "Error Loading Records.",
+    "Receiver Info": "Receiver Info",
+    "No receivers": "No Receivers",
+    "No receiving unit": "No Receiving Unit",
+    "Status": "Status",
+    "Actions": "Actions",
+    "View Detail": "View Detail",
+    "MakeRecordSecure": "Secure Record",
+    "UnsecureRecord": "Unsecure Record",
+    "RecordSecuredSuccess": "Record secured successfully.",
+    "RecordSecureFailed": "Failed To Make Secure Record.",
+    "RecordUnsecuredSuccess": "Record unsecured successfully.",
+    "RecordUnsecureFailed": "Failed To Unsecure Record.",
+    "recordSecuredSuccess": "Record secured successfully.",
+    "recordUnsecuredSuccess": "Record unsecured successfully.",
+    "recordMarkedUrgentSuccess": "Record marked as urgent.",
+    "recordUrgencyClearedSuccess": "Record urgency cleared.",
+    "waitingForCollaborators": "Cannot proceed: Waiting for all collaborators to complete their actions",
+    "SecureDialogTitle": "Secure this record?",
+    "SecureDialogDescription": "This will lock the record and make it secure. You can’t undo this action.",
+    "UnsecureDialogTitle": "Unsecure this record?",
+    "UnsecureDialogDescription": "This will unlock the record and make it editable again.",
+    "Open actions menu": "Open actions menu",
+    "Approve": "Approve",
+    "Forward": "Forward",
+    "Edit": "Edit",
+    "Delete": "Delete",
+    "Download": "Download",
+    "DirectSubmit": "Direct Submit",
+    "directSubmitTitle": "Direct submit record",
+    "directSubmitDescription": "Select a signature to submit this record directly.",
+    "SelectSignature": "Signature",
+    "SelectSignaturePlaceholder": "Select a signature",
+    "noSignatureAvailable": "No signature is available for direct submit.",
+    "noSignatureForDirectSend": "No active signature found for direct send.",
+    "directSubmitSuccess": "Record submitted directly successfully.",
+    "directSubmitError": "Failed to submit the record directly.",
+    "directDispatchSuccess": "Record sent successfully.",
+    "directDispatchError": "Failed to send the record.",
+    "SendDirectRecordTitle": "Send Direct Record",
+    "SendDirectRecordDescription": "Are you sure you want to send this direct record? This action cannot be undone.",
+    "Sending": "Sending...",
+    "Record approved successfully!": "Record Approved Successfully!",
+    "Record rejected successfully!": "Record rejected successfully!",
+    "Failed to approve record.": "Failed To Approve Record.",
+    "Approve Record": "Approve Record",
+    "Record is deleted successfully": "Record is Deleted Successfully",
+    "Confirm Delete": "Confirm Delete",
+    "Delete Record": "Delete Record",
+    "Downloaded": "Downloaded",
+    "Download Record PDF": "Download Record PDF",
+    "Failed to download PDF.": "Failed To Download PDF.",
+    "Download successful!": "Download successful!",
+    "Confirm Forward": "Confirm Forward",
+    "Forward Record": "Forward Record",
+    "Failed to forward the record": "Failed To Forward The Record",
+    "Record forwarded successfully": "Record Forwarded Successfully",
+    "Confirm Approve": "Confirm Approve",
+    "Reference": "The organization's standard reference number",
+    "ExternalReference": "Incoming letters' reference number",
+    "InternalMemoReference": "Internal memo reference number",
+    "Make Review": "Make Review",
+    "Confirm Review": "Confirm Review",
+    "Reject": "Reject",
+    "Filter by": "Filter by",
+    "Reference Number": "Reference Number",
+    "Enter the subject of the letter": "Enter the subject of the letter",
+    "Delivered By": "Delivered By",
+    "Enter Delivered By": "Enter Delivered By",
+    "Letter Number": "Letter Number",
+    "Enter Letter Number": "Enter Letter Number",
+    "Failed to create letter": "Failed To Create Letter",
+    "Letter Created successfully": "Letter Created successfully",
+    "Please select file": "Please select file",
+    "Created At": "Created At",
+    "Sign Status": "Sign Status",
+    "signStatus": "Sign Status",
+    "createdAt": "Created At",
+    "View": "View",
+    "Date Received": "Date Received",
+    "Attachment": "Attachment",
+    "ReceivingUnit": "Receiver",
+    "Review your record before submission": "Review your record before submission",
+    "Back": "Back",
+    "Submit Record": "Submit Record",
+    "Submitting": "Submitting",
+    "Generating preview": "Generating preview",
+    "PDF Preview": "PDF Preview",
+    "Unable to generate preview": "Unable to generate preview",
+    "Retry": "Retry",
+    "Record Summary": "Record Summary",
+    "No subject": "No subject",
+    "Record Type": "Record Type",
+    "Not specified": "Not specified",
+    "Language": "Language",
+    "Initiation Type": "Initiation Type",
+    "Preview generation failed": "Preview generation failed",
+    "Preview": "Preview",
+    "Form": "Form",
+    "History": "Incoming History",
+    "Delete Delegation": "Delete Delegation",
+    "selectLetter": "Select Letter",
+    "incomingLetters": "Incoming Letters",
+    "nonSmartLetters": "Non Smart Letters",
+    "sendingOrganization": "Sending Organization",
+    "Sending Organization": "Sending Organization",
+    "MarkUrgent": "Mark as Urgent",
+    "UnmarkUrgent": "Unmark Urgent",
+    "MarkUrgentDialogTitle": "Mark this record as urgent?",
+    "MarkUrgentDialogDescription": "This record will be flagged as urgent for quick handling.",
+    "UnmarkUrgentDialogTitle": "Unmark this record as urgent?",
+    "UnmarkUrgentDialogDescription": "This record will no longer appear as urgent.",
+    "Activate": "Activate",
+    "ShareViaEmail": "Share via Email",
+    "recordOfficeRegester": "Record Officer Registered Records",
+    "fromSmartUsers": "From Smartoffice Using Bureaus",
+    "fromExternalNonsmart": "From External Smart users",
+    "addRecordRO": "Add Incoming Record",
+    "directSend": "Direct Send",
+    "updateAndSend": "Update and Send",
+    "createAndSend": "Create and Send",
+    "Confirm Reject": "Confirm Reject"
+  },
+  "statusBar": {
+    "Skipped": "Skipped",
+    "Pending": "Pending",
+    "pending": "Pending",
+    "Draft": "Draft",
+    "draft": "In Progress",
+    "InProgress": "In Progress",
+    "In progress": "In Progress",
+    "In Progress": "In Progress",
+    "active": "In Progress",
+    "Reassigned": "Reassigned",
+    "re_assigned": "Reassigned",
+    "Approved": "Approved",
+    "Accepted": "Accepted",
+    "accepted": "Accepted",
+    "Dispatched": "Sent",
+    "Adjustment": "Adjustment",
+    "adjustment": "Adjustment",
+    "adjustment_requested": "Adjustment Requested",
+    "AdjustmentRequested": "Adjustment Requested",
+    "Rejected": "Rejected",
+    "rejected": "Rejected",
+    "Submitted": "Fowarded",
+    "All": "All",
+    "Reject": "Reject",
+    "Accept": "Accept",
+    "Approve": "Approve",
+    "approved": "Approve",
+    "Adjust": "Adjust",
+    "Sent": "Sent",
+    "Send": "Send",
+    "Team Signature": "Pending Signatures",
+    "Team Rejected": "Team Rejected",
+    "teamRejected": "Team Rejected",
+    "Team Approved": "Team Approved",
+    "signed": "Signed",
+    "activated": "Activated",
+    "deactivated": "Deactivated",
+    "activate": "Activate",
+    "deactivate": "Deactivate",
+    "totalAllocations": "Total Allocations",
+    "assignmentStatistics": "Assignment Statistics",
+    "Outgoing": "Outgoing",
+    "Incoming": "Incoming",
+    "Returned": "Returned",
+    "Adjusted": "Adjusted",
+    "acceptForward": "Accept and Forward",
+    "replaced": "Replaced",
+    "seen": "Seen",
+    "assigned": "Assigned",
+    "Assigned": "Assigned",
+    "not_assigned": "Not Assigned",
+    "completionRate": "Completion Rate",
+    "attentionNeeded": "Attention Needed",
+    "onTrack": "On Track",
+    "assInProg": "Assignment In Progress",
+    "next": "Next Assigments",
+    "Under Review": "Under Review",
+    "Re Assigned": "Reassigned",
+    "send_back_by_ro": "Sent Back by Record Officer",
+    "replied": "Replied",
+    "Replied": "Replied",
+    "yes": "Yes",
+    "no": "No",
+    "terminated": "Terminated",
+    "cancelled": "Cancelled",
+    "canceled": "Canceled",
+    "ended": "Ended",
+    "Expired": "Expired",
+    "Team Adjusted": "Team Adjusted"
+  },
+  "userIncoming": {
+    "LockRecord": "Lock Record",
+    "UnlockRecord": "Unlock Record",
+    "RecordLocked": "Record locked successfully",
+    "RecordUnlocked": "Record unlocked successfully",
+    "LockUpdateFailed": "Failed to update record lock",
+    "ConfirmLockRecord": "Lock record?",
+    "ConfirmUnlockRecord": "Unlock record?",
+    "ConfirmLockRecordDescription": "Are you sure you want to lock this record?",
+    "ConfirmUnlockRecordDescription": "Are you sure you want to unlock this record?",
+    "Continue": "Continue",
+    "Update and Assign": "Update and Assign",
+    "Create and Assign": "Create and Assign",
+    "Select a remark...": "Select Common Remarks",
+    "Select Predefined Remark": "Select Common Remarks",
+    "Clear": "Clear",
+    "From Date": "From",
+    "To Date": "To",
+    "Letters": "Letters",
+    "Department": "Department",
+    "Subject": "Subject",
+    "Date": "Date",
+    "Search": "Search",
+    "Error loading records.": "Error Loading Records.",
+    "errDelegation": "You don’t have access to this page because your account is currently delegated.",
+    "Status": "Status",
+    "Type": "Type",
+    "remarkAdded": "Remark Added",
+    "newAssignment": "New Assignment",
+    "Actions": "Actions",
+    "successassign": "Record Assigned Successfully.",
+    "View Detail": "View Detail",
+    "Open actions menu": "Open actions menu",
+    "Sending Department": "Sending Department",
+    "No Department": "No Department",
+    "No Subject": "No Subject",
+    "Sending Organization (English)": "Sending Organization(English)",
+    "Sending Organization": "Sending Organization",
+    "Sending Organization (Amharic)": "Sending Organization (Amharic)",
+    "Accept": "Accept",
+    "Assign": "Assign",
+    "Edit": "Edit",
+    "update": "Update",
+    "Delete": "Delete",
+    "Download": "Download",
+    "Reject": "Reject",
+    "Cancel": "Cancel",
+    "uploadIncomingRecord": "Add Incoming Record",
+    "Record accepted successfully": "Record Accepted Successfully",
+    "Failed to accept record": "Failed To Accept Record",
+    "Confirm Acceptance": "Confirm Acceptance",
+    "Are you sure you want to accept this record?": "Are You Sure You Want To Accept This Record?",
+    "Confirm": "Confirm",
+    "Processing...": "Processing...",
+    "Departments": "Departments",
+    "Select department(s)...": "Select Department(s)...",
+    "Employees": "Employees",
+    "Select employee(s)...": "Select employee(s)...",
+    "Remark": "Remark",
+    "Failed to Assign a Record": "Failed To Assign a Record",
+    "Assign this record to one or more departments": "Assign This Record To One Or More Departments",
+    "Assign Record": "Assign Record",
+    "An error occurred during assignment.": "An Error Occurred During Assignment.",
+    "Enter your remarks...": "Enter Your Remarks...",
+    "Assigning...": "Assigning...",
+    "Are you sure you want to reject this record?": "Are You Sure You Want To Reject This Record?",
+    "Failed to rejected record": "Failed To Reject Record",
+    "Record rejected successfully": "Record Rejected Successfully",
+    "To": "To",
+    "ConvertedBy": "Converted By",
+    "ReceiverDepartment": "Receiving Department",
+    "Assign CC": "Assign CC",
+    "Assign CC Record": "Assign CC Record",
+    "Assign this CC record to one or more positions": "Assign This CC Record To One Or More Positions",
+    "Select Positions": "Select Positions",
+    "Select positions to assign": "Select positions to assign",
+    "Comment": "Comment",
+    "Quick Remarks": "Quick Remarks",
+    "Failed to Assign CC Record": "Failed To Assign CC Record",
+    "ReceiverEmployee": "Receiving Employee",
+    "return": "Return",
+    "returnQues": "Are you sure you want to return this record?",
+    "returing": "Returning...",
+    "conformReturn": "Confirm Return",
+    "Reference Number": "Reference Number",
+    "Dispatched Date": "Dispatched Date",
+    "No Sending organization": "No Sending organization",
+    "noRemark": "No Remark Found",
+    "searchRemark": "Search Remark...",
+    "Is Secured": "Is Secured",
+    "Is Urgent": "Is Urgent",
+    "Receiving Organization": "Receiving Organization",
+    "Attachments": "Attachments",
+    "nonSmart": "From non Smart User",
+    "external": "From Smart User",
+    "self": "My Record",
+    "parent": "My Parent Record",
+    "errorLoadingRecords": "Error Loading Records",
+    "reply": "Reply",
+    "replyRecord": "Reply Record",
+    "remarkDate": "Remark Date",
+    "isReplyLetter": "Is a Reply Letter",
+    "ViewReplyLetterDetails": "View Reply Letter Detail",
+    "isSecured": "Secured",
+    "isUrgent": "Urgent",
+    "RecordStatus": "Record Status"
+  },
+  "ApprovalPage": {
+    "Record adjusted successfully": "Record adjusted successfully",
+    "yourStamp": "Your Teeter",
+    "Letters": "Letters",
+    "Department": "Department",
+    "Subject": "Subject",
+    "Date": "Date",
+    "Search": "Search",
+    "Error loading records.": "Error Loading Records.",
+    "Status": "Status",
+    "Actions": "Actions",
+    "View Detail": "View Detail",
+    "Open actions menu": "Open actions menu",
+    "receiverEmployee": "Receiving Employee",
+    "receiverPosition": "Receiving Position",
+    "LetterName": "File Name",
+    "Receiver": "Receiver",
+    "No Subject": "No Subject",
+    "Record accepted successfully": "Record Accepted Successfully",
+    "Confirm": "Confirm",
+    "Remark": "Remark",
+    "Remarks": "Remarks",
+    "Accept Record": "Accept Record",
+    "Record Rejected successfully": "Record Rejected Successfully",
+    "recordAdjustedSuccessfully": "Record Adjusted Successfully",
+    "confirmAdjustment": "Confirm Adjustment",
+    "adjustRecord": "Adjust Record",
+    "selectOrUploadSignature": "Please Select or Upload a Signature",
+    "selectOrUploadTeeter": "Please Select or Upload a Teeter",
+    "recordApprovedSuccessfully": "Record Approved Successfully!",
+    "failedToApproveRecord": "Failed To Approve Record.",
+    "approveRecord": "Approve Record",
+    "confirmApprove": "Confirm Approve",
+    "confirmRejection": "Confirm Rejection",
+    "rejectRecord": "Reject Record",
+    "RecordType": "Record Type",
+    "selectStamp": "Select Stamp",
+    "selectTetter": "Select Tetter",
+    "selectedStamp": "Selected Stamp:",
+    "noStampsForLanguage": "No {{language}} stamps are available. Please contact your administrator.",
+    "signature": "Signature",
+    "yourSignature": "Your Signature:",
+    "selectedSignature": "Selected Signature:",
+    "selectSignature": "Select a signature",
+    "approving": "Approving...",
+    "All": "All",
+    "FileName": "File Name",
+    "SendingDepartment": "Sending Department",
+    "RecordStatus": "Record Status"
+  },
+  "viewDetail": {
+    "for": "For",
+    "viewDetail": "View Detail",
+    "from": "From",
+    "letter": "Main Letter",
+    "letterPreview": "Letter Preview",
+    "view": "View",
+    "fullScreen": "Full Screen",
+    "back": "Back",
+    "loading": "Loading...",
+    "noPreview": "No Preview Found",
+    "securedRecordMessage": "Since the record is secure, you cannot view the record.",
+    "securedAttachmentMessage": "Since the record is secure, you cannot view the attachments.",
+    "receivingOrganizations": "Receiving Organizations",
+    "receivingUserEmployees": "Receiving User Employees",
+    "sendingDepartment": "Sending Department",
+    "externalCcOrganizations": "External CC Organizations",
+    "internalCcDepartments": "Internal CC Departments",
+    "receivingDepartments": "Receiving Departments",
+    "sentDate": "Sent Date",
+    "referenceNumber": "Reference Number",
+    "attachments": "Attachments",
+    "remarks": "Remarks",
+    "loadingRemarks": "Loading Remarks...",
+    "failedToLoadRemarks": "Failed To Load Remarks.",
+    "noRemarksAvailable": "No Remarks Available For This Record.",
+    "action": "Action",
+    "comment": "Comment:",
+    "noAttachmentsAvailable": "No Attachments Available.",
+    "open": "Open",
+    "subject": "Subject",
+    "letterNumber": "Letter Number",
+    "deliveredBy": "Delivered By",
+    "personalRemark": "Personal Remark",
+    "noPersonalRemarkProvided": "No Personal Remark Available",
+    "regeneratePdf": "Regenerate PDF",
+    "regeneratingPdf": "Regenerating...",
+    "pdfRegenerationSuccess": "PDF regenerated successfully",
+    "pdfRegenerationFailed": "Failed To Regenerate PDF",
+    "sendingBureau": "Sending Bureau",
+    "collaborators": "Collaborators",
+    "recordDetail": "Record Detail",
+    "commentorEmployee": "Commentor Employee",
+    "commentorDepartment": "Commentor Department",
+    "noComment": "No Comment",
+    "fileName": "File Name",
+    "fileName1": "File Name (RO Reference Number)",
+    "toogleColumns": "Toggle Columns",
+    "sendingEmployee": "Sending Employee"
+  },
+  "PDF": {
+    "dropFilesHere": "Drop files here",
+    "dragDropInstruction": "Drag And Drop Files Here, Or Click To Select Files",
+    "youCanUpload": "You Can Upload",
+    "removeFile": "Remove File",
+    "filesUpTo": "Files (up to ",
+    "aFileWith": "A File With",
+    "file": "File",
+    "wasRejected": "Was Rejected",
+    "uploaded": "Uploaded",
+    "failedToUpload": "Failed To Upload",
+    "uploading": "Uploading...",
+    "cannotUploadMoreThan": "Cannot Upload More Than "
+  },
+  "shareViaEmail": {
+    "title": "Share Record via Email",
+    "description": "Enter the email address to share this record with.",
+    "emailLabel": "Email Address",
+    "emailPlaceholder": "Enter email address",
+    "emailRequired": "Email Address Is Required",
+    "invalidEmailFormat": "Please Enter A Valid Email Address",
+    "shareButton": "Share Record",
+    "shareSuccess": "Record Shared Successfully Via Email",
+    "shareFailed": "Failed To Share Record Via Email",
+    "networkError": "Network Error Occurred. Please Check Your Connection And Try Again."
+  },
+  "convert": {
+    "recordConverted": "Record Converted Successfully.",
+    "selectSeal": "Please Select a Seal.",
+    "convertRecord": "Convert Record",
+    "recordType": "Record Type:",
+    "subject": "Subject:",
+    "convertAndDispatch": "Convert & Dispatch",
+    "selectSealLabel": "Select Seal:",
+    "loadingSeals": "Loading seals...",
+    "selectSealPlaceholder": "-- Select a Seal --",
+    "selectedSealPreview": "Selected Seal Preview:",
+    "drawSig": "Draw Signature"
+  },
+  "delegation": {
+    "delegatedPosition": "Delegated Position",
+    "delegateePosition": "Delegatee Position",
+    "delegateeEmployee": "Delegatee Employee",
+    "selectDelegatedPosition": "Select Delegated Position",
+    "delegateTo": "Delegate To (Employee)",
+    "selectEmployee": "Select Employee",
+    "noEmployeesAvailable": "No Employees Available For This Position",
+    "startDate": "Start Date",
+    "pickDate": "Pick a date",
+    "endDate": "End Date",
+    "time": "Time",
+    "hours": "Hours",
+    "minutes": "Minutes",
+    "endDateMinimumFutureError": "End date must be at least 2 minutes from now",
+    "update": "Update",
+    "save": "Save",
+    "title": "Delegation",
+    "newDelegation": "New Delegation",
+    "editDelegation": "Edit Delegation",
+    "addDelegation": "Add Delegation",
+    "position": "Delegated Position",
+    "active": "Active",
+    "delegator": "Delegator",
+    "delegatedEmployee": "Delegated Employee",
+    "currentEndDate": "Current End Date",
+    "select": " Select",
+    "acting": "Acting As",
+    "switchRole": "Switch Role",
+    "successDelete": "Delegation is deleted successfully",
+    "activeDelegationExists": "active delegation exists and either edit the active delegation or delete and create again",
+    "createdSuccess": "Delegation created successfully",
+    "deletedSuccess": "Delegation deleted successfully",
+    "updatedSuccess": "Delegation updated successfully",
+    "terminationDetail": "Termination Detail",
+    "viewTerminationDetail": "View termination detail",
+    "terminatedSuccess": "Delegation terminated successfully",
+    "deleteDescription": "Provide a reason for ending this delegation.",
+    "deleteReasonLabel": "Reason",
+    "deleteReasonPlaceholder": "Why are you ending this delegation?",
+    "deleteReasonRequired": "Please provide a reason for deletion.",
+    "myDelegations": "My Delegations",
+    "myDelegatee": "My Delegatee",
+    "letter": "Delegation Letter",
+    "selectLetter": "Select Letter",
+    "viewLetter": "View Delegation Letter",
+    "noLetterAssigned": "No Delegation letter",
+    "letterDetails": "Selected Letter Details",
+    "recordInformation": "Record Information",
+    "letterPreview": "Document Preview",
+    "openInNewTab": "Open in New Tab",
+    "preview": "Preview",
+    "previewDelegation": "Delegation Preview",
+    "pdfNotAvailable": "PDF document not available",
+    "recordNotFound": "Selected record not found",
+    "pdfNotFound": "PDF document not found",
+    "pdfLoadError": "Failed to load PDF document",
+    "loadingPdf": "Loading document...",
+    "retryPdf": "Retry Loading",
+    "receiverPositions": "Recipients",
+    "initiator": "Initiated By",
+    "latestComment": "Latest comment",
+    "commentMeta": "Given by",
+    "commentMetaOn": "on"
+  },
+  "signatureUpload": {
+    "signature": "Signature",
+    "teeter": "Teeter",
+    "uploadSignature": "Upload Signature",
+    "uploadTeeter": "Upload Teeter",
+    "uploadSignatureNote": "Upload Signature (PNG only)",
+    "uploadTeeterNote": "Upload Teeter (PNG only)",
+    "uploadedSignature": "Uploaded Signature:",
+    "uploadedTeeter": "Uploaded Teeter:",
+    "enterFileName": "Enter File Name (without extension)",
+    "preview": "Preview:",
+    "upload": "Upload",
+    "uploading": "Uploading...",
+    "remove": "Remove",
+    "removing": "Removing...",
+    "removedSuccess": "Removed Successfully.",
+    "removeTeeterFailed": "Remove Teeter Failed",
+    "removeFailed": "Failed To Remove.",
+    "selectPngFirst": "Please Select a PNG File First.",
+    "onlyPngAllowed": "Only PNG Files Are Allowed.",
+    "signatureExists": "The Signature Already Exists. Remove It To Upload a New One.",
+    "uploadSuccess": "Upload Successful!",
+    "uploadError": "Upload Error:",
+    "uploadFailed": "Upload Failed.",
+    "openSignatureForm": "Open Signature Drawer",
+    "generateTeeter": "Generate Teeter",
+    "selectTeeterLanguage": "Select teeter language",
+    "languageAmharic": "Amharic",
+    "languageEnglish": "English",
+    "languageBoth": "Both (Amharic then English)",
+    "confirmGenerateTeeter": "Generate",
+    "cancelGenerateTeeter": "Cancel",
+    "uploadGeneratedTeeter": "Upload Generated Teeter",
+    "generatedTeeterPreview": "Generated teeter preview",
+    "downloadTransparentPng": "Download Transparent PNG",
+    "stampNameLabel": "Name",
+    "stampPositionLabel": "Position",
+    "stampBlockAmharic": "Amharic",
+    "stampBlockEnglish": "English",
+    "missingEmployeeData": "Employee name or position is not available.",
+    "drawSignature": "Draw Signature",
+    "drawOption": "Option 2: Draw Signature",
+    "uploadOption": "Option 1: Upload Signature File",
+    "drawDescription": "Draw your signature directly on the canvas",
+    "drawSignatureFullscreen": "Draw Signature - Fullscreen",
+    "pleaseAddSignature": "Please add a signature",
+    "clear": "Clear",
+    "save": "Save",
+    "cancel": "Cancel",
+    "maximize": "Maximize"
+  },
+  "assignment": {
+    "assignedBy": "Assigned By",
+    "assignedTo": "Assigned To",
+    "assignedOn": "Assigned On:",
+    "comment": "Comment:",
+    "assignmentFlow": "Assignment Flow",
+    "noAssignments": "No Assignments Have Been Made For This Record Yet.",
+    "responded": "Responded",
+    "assignedUsing": "Assigned Using:",
+    "byName": "Employee Name",
+    "byDepartment": "Department Name"
+  },
+  "auth": {
+    "welcomeBack": "Welcome Back",
+    "enterCredentials": "Please Enter Your Credentials To Continue",
+    "email": "Email",
+    "phoneNumber": "Phone Number",
+    "username": "User Name",
+    "password": "Password",
+    "rememberMe": "Remember Me",
+    "forgotPassword": "Forgot Password?",
+    "loggingIn": "Logging In...",
+    "login": "Login",
+    "welcomeHeadline": "Welcome to Your Smart Office",
+    "paperlessOffice": "Paperless Office",
+    "welcomeSubtext": "Sign In To Streamline Your Workflow and Eliminate The Clutter.",
+    "emailAddress": "Email address",
+    "err": "Invalid Ethiopian Phone Number It Should Start With +251",
+    "invalidEmail": "Please enter a valid email address"
+  },
+  "msg": {
+    "sent": "Letter is sent",
+    "genericError": "An error occurred",
+    "authError": "Session expired",
+    "authErrorDescription": "Please log in again.",
+    "validationError": "Some of the information you submitted is invalid. Please review and try again.",
+    "permissionError": "You don't have permission to perform this action.",
+    "notFoundError": "We couldn't find what you were looking for.",
+    "fileTooLarge": "The file is too large. Please reduce the file size and try again.",
+    "serverError": "Something went wrong on our side. Please try again in a moment.",
+    "attachmentDeleted": "Attachment deleted successfully.",
+    "replyAdded": "Reply added successfully!",
+    "replyError": "An error occurred while adding the reply.",
+    "failedToCreate": "Failed To Create Record",
+    "failedToGetUrl": "Failed To Get Upload URL",
+    "registrationSuccess": "Registered. We Have Sent An SMS To Set Your Password Successfully.",
+    "errorOccurred": "An Error Occurred.",
+    "successfullyCompleted": "Changes saved successfully.",
+    "pdfRegenerated": "PDF Regenerated Successfully.",
+    "approveFailed": "Failed To Approve Record.",
+    "approveSuccess": "Record Approved Successfully",
+    "selectPrompt": "Please Select a Stamp.",
+    "extendedSuccess": "Delegation Extended Successfully.",
+    "letter": "Letter",
+    "approvedSuccess": "Record Approved Successfully!",
+    "submittedSuccess": "Record Submitted Successfully!",
+    "reviewSuccess": "Record Made Under Review Successfully!",
+    "markedForAdjustment": "Marked For Adjustment",
+    "sentToOfficer": "Sent To Record Officer",
+    "errorSendingToOfficer": "Error Sending To Record Officer",
+    "success": "Delegation Successful.",
+    "failed": "Delegation Failed.",
+    "deletedSuccess": "Delegation Deleted Successfully.",
+    "deleteFailed": "Failed To Delete Delegation.",
+    "failedCreateOrGetUrl": "Failed To Create Record or Get Upload URL.",
+    "sentAndUploadedSuccess": "Letter Sent and File Uploaded Successfully.",
+    "failedSendOrUpload": "Failed To Send Letter or Upload File.",
+    "successassign": "Record Assigned Successfully.",
+    "submittedWithAttachments": "Record and Attachments Submitted.",
+    "createFailed": "Failed To Create Record.",
+    "refreshedSuccess": "Refreshed Successfully.",
+    "refreshFailed": "Failed To Refresh.",
+    "redirecting": "Redirecting...",
+    "loginSuccess": "Login Successful.",
+    "receivingDepartmentRequired": "At least one receiving department is required",
+    "receivingUnitRequired": "At least one receiving unit is required",
+    "recordTypeRequired": "Record type is required",
+    "initiationTypeRequired": "Initiation type is required",
+    "subjectRequired": "Subject is required",
+    "preferredLanguageRequired": "Preferred language is required",
+    "bodyRequired": "Body is required",
+    "sincerelyTextRequired": "Sincerely text is required",
+    "headerRequired": "Header is required",
+    "footerRequired": "Footer is required",
+    "accessDenied": "Access Denied",
+    "accessDeniedmsg": "You Cannot Enter This Page Because You Have an Active Delegation. Please Remove The Delegation To Continue.",
+    "accessDeniedmsg2": "You Cannot Enter This Page Because You Have an Active Delegation. You Cannot Delegate If You Are Already Delegated By Another Employee",
+    "accessDeniedmsg3": "You cannot access Record Management Module because you are not registered to this organization or you not assigned any position",
+    "sendingOrgRequired": "Sending Organization is Required",
+    "deliveredByRequired": "Delivered By is Required",
+    "letterNoRequired": "Letter Number is Required",
+    "letterNameRequired": "File Name is Required",
+    "noReferenceNumber": "The letter isn't sent, so no reference number",
+    "noMsg": "Because The Letter Has Not Been Sent Yet",
+    "sincerely": "Sincerely",
+    "changePasswordMsg": "Set a new password for your account",
+    "oldPassword": "Old Password",
+    "newPassword": "New Password",
+    "confirmNewPassword": "Confirm New Password",
+    "chaning": "changing...",
+    "failedChange": "Failed To Change Password",
+    "successChange": "Password changed successfully",
+    "logoutSuccess": "Logged out successfully",
+    "logoutFailed": "Logout failed",
+    "passwordMismatch": "New password and confirm new password do not match",
+    "passwordRequirements": "Password must be at least 8 characters long",
+    "currentPasswordRequired": "Current password is required",
+    "newPasswordRequired": "New password is required",
+    "passwordMinLength": "Password must be at least 8 characters long",
+    "passwordMustBeDifferent": "New password must be different from your current password",
+    "confirmPasswordRequired": "Please confirm your new password",
+    "uppercaseLetter": "uppercase letter",
+    "lowercaseLetter": "lowercase letter",
+    "number": "number",
+    "specialCharacter": "special character",
+    "passwordComplexity": "Password must contain at least one",
+    "passwordResetSuccess": "You can now log in with your new password",
+    "selectAll": "Select All",
+    "error": "Error",
+    "createRecordMsg": "Fill in the details to create a new incoming record",
+    "updateRecordMsg": "Update the incoming record details below",
+    "completionRate": "Calculation: Accepted + Rejected + Reassinged +Replied Divided by Total Assigments",
+    "totalAllocations": "Total number of letters assigned to users or departments",
+    "reassigned": "Letters that were redirected from one user or department to another",
+    "rejected": "Letters that were declined or not approved by the recipient",
+    "accepted": "Letters that were approved or acknowledged by the recipient",
+    "replied": "Letters that received a response or follow-up from the recipient",
+    "draft": "Letters that are awaiting action or decision from the recipient",
+    "waitingMsg": "The Ethio-Djibouti Railway was established in April 2017 following a bilateral agreement signed on December 16, 2016, between Ethiopia and Djibouti. A Shareholders Agreement was signed on January 11, 2017, among public bodies and state enterprises from both nations, governed by Ethiopian commercial law.\n\nThe shareholders formed a Share Company with an initial capital of USD 500 million, dedicated to operating and maintaining the Addis Ababa–Djibouti Railway and providing freight and passenger transport services. The Ethiopian Railway Corporation (ERC) holds a 72% share, while the Société Djiboutienne de Chemin de Fer (SDCF) owns 25%. The remaining shares are divided among the Ministry of Transport (MoTL), the Ministry of Finance (MoF), and the former Ministry of Public Enterprises (MoPE), each holding 1%.\n\nThe railway line begins in Sebeta, southwest of Addis Ababa, and runs east through Adama, Mieso, Diredawa, and the border station Dewanle, ultimately reaching the ports of Djibouti. The total length of the railway is 756 km, featuring double tracks from Sebeta to Adama and single track from Adama to the Djibouti ports.\n\nThere are 20 stations along the route, with a dispatching command center located in Labu and a sub-center in Nagad. Locomotive and rolling stock depots, as well as facilities for train inspection and repair, have been established in Indode, while Nagad also features a locomotive turnback depot and repair facility.\n\nOperational and maintenance activities commenced in January 2018 by hiring a Management Contractor for six years: having contractual responsibility of maintaining & operating the railway line and providing capacity building trainings for the local staff, Ethiopian and Djiboutian, to handover the work at the end of the Management contract period. Accordingly, the Management Contractor has operated and maintained the line from 2018 to end of 2023 and officially handed over the work to the local staff since January 1, 2024.\n\nAccordingly, the local staff handled all operation and maintenance undertakings in the 2024 fiscal year with a close follow-up from the Board of Directors.",
+    "recordDes": "This link takes you to record management",
+    "orgAdminDes": "This Link Takes to site management",
+    "recycleBin": "Recycle Bin",
+    "ccEmployeesInvalidSelection": "One or more selected CC users do not have a valid assigned position. Remove them or update their employee profile."
+  },
+  "landingPage": {
+    "smartOffice": "EDR Smart Office",
+    "signIn": "Sign In",
+    "signUp": "Sign Up",
+    "overview": "Overview",
+    "features": "Features",
+    "workflow": "Workflow",
+    "manual": "Manual",
+    "digitalTransformation": "Digital transformation for modern government operations.",
+    "facebook": "Facebook",
+    "twitter": "Twitter",
+    "linkedIn": "Linked In",
+    "telegram": "Telegram",
+    "tiktok": "TikTok",
+    "website": "Website",
+    "contactUs": "Contact Us",
+    "quickLinks": "Quick Links",
+    "copyright": "Tria Plc - Copyright ©",
+    "rightsReserved": "All Rights Reserved - Powered by Tria",
+    "address": "Lingo Tower Infront of Sheger House, Bole, Addis Ababa, Ethiopia",
+    "platformSystem": "Smart Office",
+    "initiativeDescription": "A comprehensive digital transformation initiative to modernize government office operations through the adoption of cutting-edge technologies.",
+    "getStarted": "Get Started",
+    "learnMore": "Learn More",
+    "sops": "SOPS",
+    "smartOfficePlatformSystem": "EDR Smart Office System",
+    "revolutionDescription": "Revolutionizing government operations with AI-powered workflow automation and real-time analytics.",
+    "liveDemo": "Live Demo Available",
+    "outgoingRecords": "Outgoing Records",
+    "outgoingRecordsDesc": "Create and send internal or external records with attachments and hierarchical approval workflows.",
+    "incomingRecords": "Incoming Records",
+    "incomingRecordsDesc": "View, accept, and respond to received records, with the ability to assign them to relevant departments.",
+    "approvalWorkflows": "Approval Workflows",
+    "approvalWorkflowsDesc": "Digital letter and signature support with hierarchical approval processes that match your office structure.",
+    "interactiveDashboard": "Interactive Dashboard",
+    "interactiveDashboardDesc": "Real-time tracking of incoming and outgoing records, with department-level summaries and pending approvals.",
+    "organizedFolders": "Organized Folders",
+    "organizedFoldersDesc": "Categorize records using a structured system with advanced search and filtering capabilities.",
+    "securityAccessControl": "Security & Access Control",
+    "securityAccessControlDesc": "Role-based access with complete audit trails for all document actions and modifications.",
+    "powerfulFeaturesTitle": "Powerful Features",
+    "powerfulFeaturesSubtitle": "Streamline Your Document Workflow",
+    "powerfulFeaturesDesc": "Our comprehensive tools help you manage records efficiently while maintaining security and compliance.",
+    "feature1": "Faster Approval Times",
+    "feature2": "More Organized Records",
+    "feature3": "Audit Compliance",
+    "documentWorkflow": "Document Workflow",
+    "recordCreation": "Record Creation",
+    "recordCreationDesc": "User creates a new record with attachments and metadata",
+    "teamLeaderReview": "Team Leader Review",
+    "teamLeaderReviewDesc": "First level approval by immediate supervisor",
+    "directorApproval": "Director Approval",
+    "directorApprovalDesc": "Department head reviews and approves",
+    "deputyHeadReview": "Deputy Head Review",
+    "deputyHeadReviewDesc": "Final administrative approval before submission",
+    "recordOfficerProcessing": "Record Officer Processing",
+    "recordOfficerProcessingDesc": "Official registration and dispatch",
+    "streamlinedProcess": "Streamlined Process",
+    "recordManagementApprovalWorkflows": "Record Management Approval Workflows",
+    "smartOfficeDescription": "Smart Office mirrors your organizational hierarchy with customizable digital workflows that ensure proper oversight and accountability.",
+    "step": "STEP",
+    "requestChanges": "Request Changes",
+    "workflowAutomationBenefits": "Workflow Automation Benefits",
+    "workflowAutomationDesc": "Our intelligent workflow system reduces processing time by 65% while ensuring compliance with your organizational policies.",
+    "fasterApprovals": "65% Faster Approvals",
+    "reduceDelays": "Reduce bureaucratic delays",
+    "auditTrail": "100% Audit Trail",
+    "completeRecord": "Complete record of all actions",
+    "advancedFeatures": "Advanced Features",
+    "slaMonitoring": "SLA Monitoring",
+    "slaMonitoringDesc": "Automatic tracking of service level agreements with escalation alerts for delays.",
+    "conditionalRouting": "Conditional Routing",
+    "conditionalRoutingDesc": "Smart rules automatically route documents based on content, value, or department.",
+    "temporaryApprovalDelegation": "Temporary approval delegation for vacations with full audit tracking.",
+    "approvalworkflow": "Approval Workflow",
+    "uptime": "Uptime",
+    "bureaus": "Bureaus",
+    "support": "Support",
+    "features1": "Scalable",
+    "features2": "Cross‑platform support",
+    "features3": "Cloud‑based data sync",
+    "features4": "low‑connectivity capability",
+    "features5": "Responsive design/adaptive",
+    "features6": "Secure",
+    "login": "Login to the System",
+    "step1": "1. Click on the",
+    "headerBtn": "button in the header",
+    "step2": "2. Enter your username and password provided by your administrator",
+    "step3": "3. Click the",
+    "accessBtn": "button to access the system",
+    "note": "Note",
+    "forgotIntro": "If you forget your password, contact your system administrator for reset.",
+    "dashboardTitle": "Dashboard Overview",
+    "dashboardDesc": "The dashboard provides a comprehensive overview of your record activities:",
+    "recordsCreated": "Records Created",
+    "recordsTotal": "Total records you've initiated",
+    "recordsReceived": "Records Received:",
+    "incomingDocs": "Incoming documents from others",
+    "breakdown": "Internal/External Breakdown:",
+    "visuals": "Visual charts showing document types",
+    "approvalStatus": "Approval Status",
+    "approvalTypes": "Pending, approved, or rejected records",
+    "quickActions": "Quick Actions",
+    "createOrCheck": "Create new records or check pending approvals directly from the dashboard",
+    "recentActivity": "Recent Activity",
+    "trackUpdates": "Track the latest updates on your documents",
+    "manageOut": "Managing Outgoing Records",
+    "createNew": "Creating New Records",
+    "goToTab": "Navigate to the",
+    "clickBtn": "Click button",
+    "fillFields": "Fill in all required fields (record type, receiver, subject, etc.)",
+    "attach": "Attach supporting documents if needed",
+    "saveOrSubmit": "Save as draft or submit for approval",
+    "trackStatus": "Tracking Record Status",
+    "notForwarded": "This item is not yet forwarded. This items can be edited and deleted",
+    "awaiting": "This item is awaiting acceptance or approval.",
+    "accepted": "This item has been accepted and is awaiting approval.",
+    "approvedSent": "This item has been approved and sent to record officer to be dispatched.",
+    "returned": "This item has been returned for adjustments or additional information. Please review the comments.",
+    "rejected": "This item has been rejected.",
+    "sent": "This item has been sent to the recipients.",
+    "returnedByOfficer": "This item has been returned by the Record Officer.",
+    "monitor": "Monitor your records through each approval stage in the workflow",
+    "manageIncoming": "Managing Incoming Records",
+    "incomingTypes": "Types of Incoming Records",
+    "fromOthers": "From other organizations",
+    "withinOrg": "Within your organization",
+    "copied": "Copied for your information",
+    "processIncoming": "Processing Incoming Records",
+    "readDoc": "Open and read the full document",
+    "acknowledge": "Acknowledge receipt of the document",
+    "forward": "Forward to another team member if needed",
+    "archive": "Archive",
+    "fileRef": "File for future reference",
+    "apprvalworkflow": "Approval Workflow",
+    "process": "Approval Process",
+    "internalFlow": "Internal Records Workflow:",
+    "creator": "Creator",
+    "leader": "Team Leader",
+    "director": "Director",
+    "officer": "Record Officer",
+    "externalFlow": "External Records Workflow:",
+    "actions": "Approval Actions",
+    "delegation": "Delegation Management",
+    "delegateInfo": "When you're unavailable, you can delegate your approval authority to another team member:",
+    "delegateNav": "Navigate to the",
+    "selectColleague": "Select a colleague from your organization structure",
+    "setDates": "Set the start and end dates for the delegation period",
+    "setPerms": "Specify which permissions to delegate",
+    "saveDelegate": "Save the delegation settings",
+    "autoExpire": "Delegations automatically expire on the end date you specify.",
+    "collab": "Collaboration Workspace",
+    "collabInfo": "The collaboration tab brings together records that require input from multiple team members:",
+    "viewDocs": "View all collaborative documents in one place",
+    "addComments": "Add your comments or annotations",
+    "approve": "Approve with your digital signature when consensus is reached",
+    "trackChanges": "Track changes and version history",
+    "realTime": "Real-time Updates",
+    "liveChanges": "See changes from other collaborators as they happen",
+    "notifications": "Notification System",
+    "alerts": "Get alerts when others contribute to the document",
+    "signatureMgmt": "Teeter & Signature Management",
+    "leadersOnly": "Team leaders and above can manage their digital teeter and signature:",
+    "signatureTitle": "Teeter & Signature",
+    "uploadTeeter": "Upload a clear image of your official teeter",
+    "uploadSignature": "Create or upload your digital signature",
+    "defaultSignature": "Set as default for all approvals",
+    "updateDesignation": "Update whenever your official designation changes",
+    "security": "Security Notice:",
+    "encrypted": "Your teeter and signature are encrypted and only used for official approvals.",
+    "recordModule": "Record Management Module",
+    "guide": "Comprehensive guide for using the Smart Office Platform System",
+    "back": "Back to Dashboard",
+    "moduleGuide": "Module Guide",
+    "previous": "Previous",
+    "next": "Next",
+    "addTeeterAndSignature": "Add digital teeter and signature",
+    "returnWithComments": "Return with comments",
+    "requestModifications": "Request modifications",
+    "screenshotOf": "Screenshot of",
+    "fasterApproval": "Faster Approval",
+    "auditReady": "Audit Ready",
+    "organizedRecords": "Organized Records",
+    "tab": "Tab",
+    "click": "Click",
+    "button": "Button",
+    "services": "Services",
+    "fileComplaint": "File Complaint",
+    "followComplaint": "Follow Complaint",
+    "aboutUs": "Know About Us",
+    "darkMode": "Dark Mode",
+    "lightMode": "Light Mode"
+  },
+  "organization": {
+    "allFieldsRequired": "All fields are required",
+    "name": "Name",
+    "actions": "Actions",
+    "assignOrgAdminInstructions": "Select an organization and a user to assign as its administrator.",
+    "assignUnitAdminInstructions": "Select a user to assign as an administrator for this unit.",
+    "unitAdminRemovedSuccess": "Unit admin removed successfully",
+    "unitAdminRemoveFailed": "Failed to remove unit admin",
+    "manageUnitAdminInstructions": "View, add, or remove administrators assigned to this unit.",
+    "currentUnitAdmins": "Current unit admins",
+    "currentUnitAdminsDescription": "Users who can administer this unit.",
+    "noUnitAdminsAssigned": "No admins are assigned to this unit.",
+    "removeAdminTitle": "Remove this admin?",
+    "removeAdminDescription": "This action cannot be undone. This will remove the admin role from this user.",
+    "removingAdmin": "Removing...",
+    "confirmRemoveAdmin": "Yes, remove",
+    "webManagement": "Web Management",
+    "portalSettings": "Portal Settings",
+    "Sector Reports": "Sector Reports",
+    "addUser": " Add User",
+    "Letter Template": "Letter Templates",
+    "units": "Units",
+    "selectUnitFirst": "Select a unit first",
+    "noUnitsFound": "No units found",
+    "organizations": "Organizations",
+    "newOrganization": "New Organization",
+    "organizationName": "Organization name",
+    "createdOn": "Created on",
+    "approveUserPrompt": "Approve User",
+    "approveUserDescription": "Approve User",
+    "rejectUserPrompt": "Reject User",
+    "rejectUserDescription": "Are you sure you want to reject this user?",
+    "yesApprove": "Yes, Approve",
+    "yesReject": "Yes, Reject",
+    "approving": "Approving...",
+    "rejecting": "Rejecting...",
+    "numberOfUsers": "Number of users",
+    "assignedAdmin": "Assigned admin",
+    "Migrated Records": "Migrated Records",
+    "isGovernmentOrganization": "Is Government Organization",
+    "createNew": "Create New",
+    "edit": "Edit",
+    "enterDetails": "Enter the details for the new organization. All fields marked with an asterisk (*) are required.",
+    "nameAmharic": "Name (Amharic)",
+    "nameEnglish": "Name (English)",
+    "key": "Key",
+    "organizationType": "Organization Type",
+    "loadingOrganizationTypes": "Loading organization types...",
+    "errorLoadingOrganizationTypes": "Error loading organization types",
+    "noOrganizationTypesAvailable": "No organization types available",
+    "parentOrganization": "Parent Organizational (optional)",
+    "loading": "Loading...",
+    "selectOrganization": "Select organization",
+    "selectOrganizationFirst": "Select an organization first",
+    "noOrganization": "No organization",
+    "isOrganizationPublic": "Is Organization Public",
+    "selectOrganizationType": "Select organization type",
+    "deleteOrganization": "Delete Organization",
+    "confirmDelete": "Are you sure you want to permanently delete?",
+    "cannotUndo": "This action cannot be undone.",
+    "deleting": "Deleting ...",
+    "delete": "Delete",
+    "viewOrganization": "View Organization",
+    "editOrganization": "Edit Organization",
+    "englishNameRequired": "English name is required",
+    "amharicNameRequired": "Amharic name is required",
+    "invalidEmail": "Invalid email address",
+    "usernameMinLength": "Username must be at least 3 characters",
+    "organizationRequired": "Organization is required",
+    "invalidPhoneNumber": "Phone number must be a valid Ethiopian number",
+    "registerAdminTitle": "Register Organization Admin",
+    "registerAdminDescription": "Fill in the required fields to register",
+    "enterEnglishName": "Enter English name",
+    "enterAmharicName": "Enter Amharic name",
+    "email": "Email",
+    "emailExample": "email@example.com",
+    "username": "Username",
+    "enterUsername": "Enter a username",
+    "phoneNumber": "Phone Number",
+    "phoneNumberExample": "e.g. 0912345678 or +251912345678",
+    "organization": "Organization",
+    "registering": "Registering...",
+    "registerAdmin": "Register Admin",
+    "dashboard": "Dashboard",
+    "detail_task": "Detail Task",
+    "expectations": "Team Leader Expectation",
+    "employeeExpectations": "Expert Expectation",
+    "plans_employee": "Plans Employee",
+    "plans_team_member_management": "Plans Team Member Management",
+    "organizationAdmins": "Organization Admins",
+    "externalUsers": "External Users",
+    "userManagement": "User Management",
+    "userPositionApproval": "User Position Approval",
+    "content": "Content",
+    "bulkUpload": "Bulk Upload",
+    "positionTypes": "Position Types",
+    "migratedRecords": "Migrated Records",
+    "activityLog": "Activity Log",
+    "setting": "Setting",
+    "loadingAdmins": "Loading admins...",
+    "errorLoadingAdmins": "Error loading admin data",
+    "retry": "Retry",
+    "assignAdmin": "Assign Admin",
+    "addAdmin": "Add Admin",
+    "adminAssignedSuccess": "Admin assigned successfully",
+    "userAssignedSuccess": "User assigned successfully",
+    "userAssignFailed": "User couldn't be assigned",
+    "assignAdminToOrganization": "Assign Admin to Organization",
+    "assignAdminInstructions": "Select an organization and a user to assign as an admin.",
+    "users": "Users",
+    "searchUsers": "Search users...",
+    "noUsersFound": "No users found",
+    "assigning": "Assigning...",
+    "assignUser": "Assign User",
+    "noUsersAvailable": "No users available",
+    "pendingExternalUsers": "Pending External Users",
+    "activateUserPrompt": "Activate this user?",
+    "activateUserDescription": "This will enable the user to access the platform",
+    "activating": "Activating...",
+    "yesActivate": "Yes, activate",
+    "statistics": "Statistics",
+    "totalOrganizations": "Total Organizations",
+    "recentOrganizations": "Recent Organizations",
+    "updatedOn": "Updated On",
+    "manageOrganization": "Manage Organization",
+    "detail_task_assignment": "Detail Task Assignment",
+    "serviceAssignment": "Service Assignment",
+    "Reports": "Reports",
+    "achievements": "Achievement",
+    "additionalTasks": "Additional Tasks",
+    "viewMore": "View more →",
+    "recentActivities": "Recent Activities",
+    "moreActivities": "More activities →",
+    "noRecentActivities": "No recent activities found",
+    "contentManagement": "Content Management",
+    "Bulk": "Excel Uploader",
+    "Position": "Positions",
+    "settings": "Settings",
+    "Archive Users": "Archive Users",
+    "Archived Organizations": "Archived Organizations",
+    "Archived Units & Positions": "Archived Units & Positions",
+    "contentMsg": "Manage your organization's content and assets efficiently.",
+    "selectUnit": "Select Unit",
+    "visibilityToOthers": "Visible to Others",
+    "Signature Settings": "Signature Settings",
+    "visible": "Visible",
+    "hidden": "Hidden",
+    "visibilityEnabled": "Organization is now visible to other organizations",
+    "visibilityDisabled": "Organization is now hidden from other organizations",
+    "visibilityUpdateFailed": "Failed to update organization visibility",
+    "Queues": "Queues",
+    "Plans": "Plans",
+    "Service Assignment": "Service Assignment",
+    "Services": "Services",
+    "Service Categories": "Service Categories",
+    "Plan Years": "Plan Years",
+    "Active Call Management": "Call Management",
+    "Employee Plans": "Employee Plans",
+    "Team Member Management": "Team Member Management",
+    "Working Hours": "Working Hours",
+    "Goals": "Goals",
+    "Major Task": "Major Tasks"
+  },
+  "detailTask": {
+    "name": "Task Name",
+    "nameAmharic": "Task Name (Amharic)",
+    "nameEnglish": "Task Name (English)",
+    "description": "Description",
+    "descriptionAmharic": "Description (Amharic)",
+    "descriptionEnglish": "Description (English)",
+    "enterTaskName": "Enter task name",
+    "enterTaskNameAmharic": "Enter task name in Amharic",
+    "enterTaskNameEnglish": "Enter task name in English",
+    "enterDescription": "Enter task description",
+    "enterDescriptionAmharic": "Enter task description in Amharic",
+    "enterDescriptionEnglish": "Enter task description in English",
+    "majorTask": "Major Task",
+    "weight": "Weight",
+    "weightFromPlanYear": "Weight from Plan Year",
+    "planYear": "Plan Year",
+    "createTask": "Create Detail Task",
+    "editTask": "Edit Detail Task",
+    "updateTask": "Update Task",
+    "createNew": "Create Detial Task",
+    "taskDetails": "Task Details",
+    "editTaskDetails": "Edit Task Details",
+    "basicInformation": "Basic Information",
+    "taskConfiguration": "Task Configuration",
+    "departmentAssignment": "Department Assignment",
+    "assignmentInfo": "Assignment Information",
+    "assignmentDescription": "Select departments to assign this detail task. You can assign to multiple departments using the hierarchy below.",
+    "selectedDepartments": "Selected Departments",
+    "noDepartmentsFound": "No departments found",
+    "selectionInstructions": "Select an organization and unit first, then choose departments to assign this task to. You can select multiple departments.",
+    "enterMajorTask": "Enter major task",
+    "enterWeight": "Enter weight",
+    "enterWeightFromPlanYear": "Enter weight from plan year",
+    "taskCreatedSuccess": "Detail task created successfully!",
+    "taskUpdatedSuccess": "Detail task updated successfully!",
+    "createError": "Failed to create detail task",
+    "updateError": "Failed to update detail task",
+    "fetchError": "Failed to fetch detail tasks",
+    "deleteSuccess": "Task deleted successfully",
+    "deleteError": "Failed to delete task",
+    "confirmDelete": "Delete Task",
+    "deleteConfirmation": "Are you sure you want to delete this task? This action cannot be undone.",
+    "noTasks": "No detail tasks found",
+    "noSearchResults": "No tasks match your search criteria",
+    "createFirstTask": "Create your first detail task to get started",
+    "searchTasks": "Search tasks...",
+    "assignedDepartments": "Assigned Departments",
+    "planYearWeight": "Plan Year",
+    "detailTasks": "Detail Tasks",
+    "taskAssignment": "Task Assignment",
+    "taskAssignments": "Task Assignments",
+    "userManagement": "User Management",
+    "searchOrganizationsUnits": "Search organizations, units, departments...",
+    "selectOrganization": "Select an Organization",
+    "selectOrganizationDescription": "Choose an organization from the left panel to view and manage task assignments.",
+    "selectDepartmentsFirst": "Please select departments first",
+    "taskAssignedSuccess": "Task assigned successfully",
+    "taskUnassignedSuccess": "Task unassigned successfully",
+    "assignError": "Failed to assign task",
+    "unassignError": "Failed to unassign task",
+    "notAssigned": "Not Assigned",
+    "assigning": "Assigning...",
+    "assign": "Assign",
+    "unassignAll": "Unassign All",
+    "confirmUnassignAll": "Unassign All Departments",
+    "unassignAllConfirmation": "Are you sure you want to unassign this task from all departments? This action cannot be undone.",
+    "tasks": "tasks",
+    "formDescription": "Fill in the details below to create or update a detail task.",
+    "selectDepartmentFirst": "Please select a department first",
+    "selectOrganizationFirst": "Select an organization first",
+    "assignDetailTask": "Assign Detail Task",
+    "assignDetailTasks": "Assign Detail Tasks",
+    "assignDetailTasksDescription": "Select detail tasks to assign to this department",
+    "searchDetailTasks": "Search detail tasks...",
+    "noTasksMatchSearch": "No tasks match your search",
+    "noDetailTasksFound": "No detail tasks found",
+    "tasksSelected": "task(s) selected",
+    "noTasksSelected": "No tasks selected",
+    "assignTasks": "Assign Tasks",
+    "clearSelection": "Clear Selection",
+    "noChanges": "No Changes",
+    "noChangesToSave": "No changes to save",
+    "currentlyAssigned": "(Currently Assigned)",
+    "deptCount": "dept(s)",
+    "participants": "Participants",
+    "selectParticipants": "Select participants",
+    "noEmployeesWithPositions": "No employees with positions available",
+    "assignment": "Assignment",
+    "selectMajorTask": "Select major task",
+    "selectMeasuredBy": "Select measurement type",
+    "measuredBy": "Measured By",
+    "noParticipants": "No participants"
+  },
+  "expectations": {
+    "title": "Team Leader Expectation",
+    "quarter": "Quarter",
+    "total": "Total",
+    "yearly": "Yearly",
+    "expected": "Expected",
+    "quarterTotal": "Q Total",
+    "detailTask": "Detail Task",
+    "instructions": "Instructions",
+    "instructionsText": "Set yearly expectations first, then distribute monthly values. The Total column shows your yearly target. Monthly values should sum to equal the yearly target (green = match, red = mismatch).",
+    "unsavedChanges": "Unsaved Changes",
+    "noExpectations": "No expectations found for this plan year",
+    "createSuccess": "Expectation created successfully",
+    "updateSuccess": "Expectation updated successfully",
+    "deleteSuccess": "Expectation deleted successfully",
+    "createError": "Failed to create expectation",
+    "updateError": "Failed to update expectation",
+    "deleteError": "Failed to delete expectation"
+  },
+  "employeeExpectations": {
+    "title": "Expert Expectation",
+    "weekly": "Weekly",
+    "detailTask": "Detail Task",
+    "yearlyTotal": "Yearly Total",
+    "monthlyTotals": "Monthly Totals",
+    "instructions": "Instructions",
+    "instructionsText": "Set weekly expectations for each detail task. Each month has 4 weeks. The yearly total shows the sum of all weekly values across the year.",
+    "unsavedChanges": "Unsaved Changes",
+    "noTasks": "No detail tasks assigned for weekly expectations",
+    "missingParentId": "No team leader assigned. Parent Position ID is required for employee expectations.",
+    "createSuccess": "Employee expectation created successfully",
+    "updateSuccess": "Employee expectation updated successfully",
+    "deleteSuccess": "Employee expectation deleted successfully",
+    "createError": "Failed to create employee expectation",
+    "updateError": "Failed to update employee expectation",
+    "deleteError": "Failed to delete employee expectation",
+    "success": "Success",
+    "error": "Error",
+    "noChangesToSave": "No changes to save",
+    "weeklyExpectationsSaved": "Weekly expectations saved successfully",
+    "monthlyExpectationNotAvailable": "For this week monthly expectation is not available",
+    "saveErrorTitle": "Failed to save weekly expectations",
+    "saveErrorDescription": "Please check your values and try again.",
+    "partialSaveErrorTitle": "Some weekly expectations could not be saved",
+    "saveItemFailed": "Save failed",
+    "missingMonthlyTitle": "Cannot save weekly expectations",
+    "missingMonthlyDescription": "Monthly expectation is not set for: {{items}}. Please ask your team leader to set monthly expectations first."
+  },
+  "userIncomingretun": {
+    "View Detail": "View Detail",
+    "Open actions menu": "Open actions menu",
+    "Actions": "Actions",
+    "convertRecord": "Convert Record",
+    "return": "Return",
+    "returning": "Returning...",
+    "returing": "Returning...",
+    "conformReturn": "Confirm Return",
+    "Please provide a reason for returning this record.": "Please provide a reason for returning this record.",
+    "ReturnComment": "Return Comment",
+    "EnterReturnReason": "Enter reason for returning",
+    "CommentRequired": "Comment is required",
+    "RecordReturnedSuccessfully": "Record returned successfully",
+    "FailedToReturnRecord": "Failed To Return Record"
+  },
+  "registration": {
+    "incompleteRegistration": "You haven't completed the verification process. Please upload required documents to continue.",
+    "uploadDocuments": "Upload Documents",
+    "registrationRequired": "You must complete your registration before accessing this page.",
+    "title": "Registration",
+    "steps": {
+      "registerUpload": {
+        "title": "Register & Upload",
+        "description": "Fill details and upload required documents"
+      },
+      "verifyOtp": {
+        "title": "Verify OTP",
+        "description": "Enter verification code sent to your phone/email"
+      }
+    },
+    "form": {
+      "registrationType": "Registration Type",
+      "organization": "Organization",
+      "individual": "Individual",
+      "organizationEmail": "Organization Email",
+      "organizationEmailPlaceholder": "organization@example.com",
+      "individualEmail": "Personal Email",
+      "individualEmailPlaceholder": "personal@example.com",
+      "organizationUsername": "Organization Username",
+      "organizationUsernamePlaceholder": "org_username",
+      "individualUsername": "Personal Username",
+      "individualUsernamePlaceholder": "personal_username",
+      "organizationPhone": "Organization Phone",
+      "organizationPhonePlaceholder": "+251 organization phone",
+      "individualPhone": "Personal Phone",
+      "individualPhonePlaceholder": "+251 personal phone",
+      "organizationNameEn": "Organization Name (English)",
+      "organizationNameEnPlaceholder": "Company Name Ltd.",
+      "individualNameEn": "Full Name (English)",
+      "individualNameEnPlaceholder": "John Doe",
+      "organizationNameAm": "Organization Name (Amharic)",
+      "organizationNameAmPlaceholder": "የድርጅት ስም",
+      "individualNameAm": "Full Name (Amharic)",
+      "individualNameAmPlaceholder": "የግለሰብ ስም",
+      "organizationSubmitButton": "Register Organization & Upload Documents",
+      "individualSubmitButton": "Register Individual & Upload Documents",
+      "processing": "Processing..."
+    },
+    "userType": {
+      "selectionDescription": "Choose your registration type to get started",
+      "organization": "Organization",
+      "organizationDescription": "Register as a company, institution, or organization",
+      "individual": "Individual",
+      "individualDescription": "Register as an individual person or professional"
+    },
+    "auth": {
+      "signInTitle": "Sign In",
+      "signUpTitle": "Sign Up",
+      "portalTitle": "External Portal Access",
+      "signIn": "Sign In",
+      "signUp": "Sign Up",
+      "selectionDescription": "Choose your identity provider to continue. We'll sign you in or create your account automatically.",
+      "signInWithFayda": "Sign In with Fayda",
+      "signUpWithFayda": "Sign Up with Fayda",
+      "signInWithEtrade": "Sign In with E-Trade",
+      "signUpWithEtrade": "Sign Up with E-Trade",
+      "continueWithFayda": "Continue with Fayda",
+      "continueWithEtrade": "Continue with E-Trade (TIN & License Number)",
+      "faydaDescription": "For individual users. Authenticate with your Fayda digital ID.",
+      "etradeDescription": "For external organizations. Verify with your business TIN and trade license.",
+      "manualOrgSignup": "Need alternative organization registration?",
+      "alreadyHaveAccount": "Already have an account?",
+      "needAccount": "Need an account?",
+      "externalUserPrompt": "External user?",
+      "signInWithProvider": "Sign in with Fayda or E-Trade",
+      "faydaProcessing": "Signing you in securely with Fayda...",
+      "faydaSigninFailed": "Something went wrong while signing in with Fayda.",
+      "faydaSignupFailed": "Something went wrong while signing up with Fayda.",
+      "backToAuth": "Back to Sign In / Sign Up",
+      "employeeLogin": "Internal employee? Sign in here"
+    },
+    "etrade": {
+      "registerOrganization": "Register your organization",
+      "registerWithTradeLicense": "Register with Trade License",
+      "registerWithTradeLicenseDescription": "Verify your business using your TIN and trade license from eTrade.",
+      "registerWithOther": "Register with Other",
+      "registerWithOtherDescription": "Proceed using alternative verification methods.",
+      "enterTinTitle": "Enter your TIN",
+      "enterTinDescription": "We will look up your registered trade licenses from eTrade.",
+      "stepTin": "TIN",
+      "stepLicense": "License",
+      "stepOtp": "OTP",
+      "selectLicenseTitle": "Select a trade license",
+      "selectLicenseDescription": "Your organization has multiple trade licenses. Choose the one you want to register with.",
+      "verifiedOrganization": "Verified organization",
+      "licenseNumber": "License number",
+      "activity": "Business activity",
+      "noLicensesFound": "No trade licenses were found for this TIN. Please verify the TIN and try again.",
+      "phoneLookupFailed": "Could not retrieve a valid phone number for this trade license from eTrade. Please verify the license and try again.",
+      "registrationSuccess": "Trade license registration completed successfully",
+      "back": "Back",
+      "continue": "Continue",
+      "loading": "Loading...",
+      "otpSent": "Verification code sent successfully",
+      "stepDetails": "Business details",
+      "signupFormDescription": "Enter your organization TIN and trade license number to receive a verification code.",
+      "licenseNoLabel": "Trade License Number",
+      "licenseNoPlaceholder": "Enter your trade license number",
+      "licenseNoHint": "Use the license number registered with eTrade for your organization.",
+      "licenseNoRequired": "Trade license number is required.",
+      "licenseNoInvalid": "Enter a valid trade license number.",
+      "requestOtp": "Request verification code",
+      "otpVerificationDescription": "Enter the verification code sent for your trade license."
+    },
+    "continueButton": "Continue to Registration",
+    "documents": {
+      "requiredDocuments": "Required Documents",
+      "requirementsUpdate": "Requirements update when you change registration type",
+      "attached": "attached",
+      "tip": "Tip: upload now or continue and upload after verification",
+      "noRequirements": "No document requirements",
+      "upload": "Upload",
+      "change": "Change",
+      "remove": "Remove",
+      "required": "Required",
+      "fileSelected": "File selected",
+      "readyToUpload": "Ready to upload",
+      "previouslyUploaded": "Previously uploaded",
+      "willUploadOnSubmit": "Will be uploaded on submit",
+      "fayda": "Fayda ID",
+      "faydaMessage": "Enter Fayda ID",
+      "activity": {
+        "title": "DMS Activity Log",
+        "subtitle": "Monitor and track audit events for the DMS module",
+        "general": {
+          "title": "Activity Log",
+          "subtitle": "Monitor and track audit events on the platform",
+          "refresh": "Refresh",
+          "export": "Export",
+          "filters": "Filters",
+          "cardView": "Card View",
+          "tableView": "Table View",
+          "cards": "Cards",
+          "table": "Table",
+          "clear": "Clear",
+          "clearAll": "Clear All",
+          "auditId": "Audit ID",
+          "viewDetails": "View Details",
+          "loading": "Loading activities...",
+          "noActivities": "No activities found",
+          "noResults": "Try adjusting filters or search terms to find what you are looking for.",
+          "showing": "Showing {{count}} of {{total}} total activities",
+          "prev": "Previous",
+          "next": "Next",
+          "auditLogsLoaded": "Audit logs loaded",
+          "failedLoad": "Failed to load audit logs",
+          "missingKey": "moduleKey missing for audit logs"
+        },
+        "table": {
+          "time": "Time",
+          "user": "User",
+          "action": "Action",
+          "description": "Description",
+          "module": "Module",
+          "severity": "Severity",
+          "status": "Status"
+        },
+        "stats": {
+          "total": "Total Activities",
+          "successRate": "Success Rate",
+          "dailyAvg": "Daily Average",
+          "uniqueUsers": "Unique Users",
+          "topActions": "Top Actions",
+          "times": "Times"
+        },
+        "filters": {
+          "search": "Search activities...",
+          "module": "Module",
+          "allModules": "All Modules",
+          "action": "Action",
+          "allActions": "All Actions",
+          "status": "Status",
+          "allStatuses": "All Statuses",
+          "success": "Success",
+          "failure": "Failure",
+          "warning": "Warning",
+          "pending": "Pending",
+          "dateRange": "Date Range",
+          "last7Days": "Last 7 Days",
+          "last30Days": "Last 30 Days",
+          "activeFilter": "Active Filter",
+          "activeFilters": "Active Filters"
+        },
+        "severity": {
+          "critical": "Critical",
+          "high": "High",
+          "medium": "Medium",
+          "low": "Low"
+        },
+        "card": {
+          "resource": "Resource",
+          "details": "Details",
+          "ip": "IP",
+          "location": "Location"
+        },
+        "descriptions": {
+          "updated": "{{entity}} updated",
+          "created": "{{entity}} created",
+          "deleted": "{{entity}} deleted",
+          "actionOn": "{{method}} on {{entity}}"
+        }
+      }
+    },
+    "verifyOtp": {
+      "title": "Verify your account",
+      "description": "Enter the 6‑digit code we sent {channel}.",
+      "channel": {
+        "email": "to your email",
+        "phone": "to your phone"
+      },
+      "otpInput": {
+        "ariaLabel": "Character {index}",
+        "placeholder": "Enter OTP code"
+      },
+      "password": {
+        "newPassword": "New Password",
+        "confirmPassword": "Confirm Password",
+        "showPassword": "Show password",
+        "hidePassword": "Hide password"
+      },
+      "buttons": {
+        "back": "Back",
+        "completeRegistration": "Complete Registration",
+        "verifyOtp": "Verify Code",
+        "verifying": "Verifying...",
+        "resendCode": "Resend Code",
+        "resending": "Resending...",
+        "resendIn": "Resend in {seconds}s",
+        "resendLoading": "Resending code",
+        "resendCooldown": "Resend code in {seconds} seconds"
+      },
+      "messages": {
+        "success": "Password set successfully!",
+        "verificationCodeResent": "Verification code resent to your email/phone.",
+        "missingEmailPhone": "Email or phone number is missing.",
+        "invalidOtp": "Please enter a valid 6-character OTP.",
+        "fillPasswords": "Please fill in both password fields.",
+        "passwordLength": "Password must be at least 8 characters.",
+        "passwordMismatch": "Passwords don't match.",
+        "passwordUpdateFailed": "Password update failed. Please try again.",
+        "resendFailed": "Failed to resend the verification code. Please try again.",
+        "registrationComplete": "Registration & document upload completed successfully!",
+        "selectUnitWarning": "Please select a unit",
+        "fillAllFields": "Please fill all fields",
+        "configAdded": "Configuration added successfully",
+        "configUpdated": "Configuration updated successfully",
+        "configAddFailed": "Failed to add configuration",
+        "configUpdateFailed": "Failed to update configuration"
+      },
+      "errors": {
+        "missingUserId": "User ID is missing. Cannot resend verification code.",
+        "resendFailed": "Failed to resend the verification code.",
+        "alreadyRegistered": "You can only register once with a single email or phone number. So instead of registering again, go to sign in and use Forgot Password to reset your password."
+      },
+      "support": {
+        "needHelp": "Need help?",
+        "helpLink": "/support/resend-sms"
+      }
+    }
+  },
+  "superAdmin": {
+    "manageConfig": {
+      "title": "Manage {{type}} Configuration",
+      "description": "Configure {{level}} capacity and structure",
+      "organization": "Organization",
+      "unit": "Unit",
+      "selectUnit": "Select Unit",
+      "selectUnitPlaceholder": "Select a Unit",
+      "subOrganizations": "Sub-Organizations",
+      "employeesPerOrg": "Employees per Organization",
+      "subOrgsPlaceholder": "e.g. 3",
+      "employeesPlaceholder": "e.g. 20",
+      "addConfiguration": "Add Configuration",
+      "updateConfiguration": "Update Configuration",
+      "configurations": "Configurations",
+      "loading": "Loading...",
+      "noConfigurations": "No configurations added yet",
+      "edit": "Edit",
+      "delete": "Delete",
+      "close": "Close",
+      "unitBased": "unit-based",
+      "organizationLevel": "organization-level"
+    }
+  },
+  "otp": {
+    "verifyIdentity": "Verify Your Identity",
+    "enterCodeSent": "Enter the verification code sent to your email",
+    "verifySubmission": "Verify Submission",
+    "enterCodeToSubmit": "Enter the verification code to submit your record",
+    "clearCode": "Clear Code",
+    "resendCode": "Resend Code",
+    "verifyingCode": "Please wait while we verify your code",
+    "verificationSuccess": "Verification successful!",
+    "verificationFailed": "Verification failed. Please try again."
+  },
+  "contentManagement": {
+    "manageUnitAdmin": "Manage Unit Admin",
+    "moveDepartement": "moveDepartement",
+    "positions": "Positions",
+    "selectPositions": "Selected Position",
+    "sealNameMsg": "Seal name is required",
+    "sealSuccessMsg": "Seal uploaded and registered successfully",
+    "sealErrorMsg": "Failed To Upload And Register Seal",
+    "sealRemove": "Seal removed successfully",
+    "seal": "Organization Seals",
+    "uploadSealMsg": "Upload and manage organization seals",
+    "sealImage": "Seal Image",
+    "addSeal": "Add Seal",
+    "noSealMsg": "No seals uploaded yet",
+    "addSealInstruction": "Click Add Seal to upload",
+    "sealName": "Seal Name",
+    "saveSeal": "Save Seal",
+    "letterTemplate": "Letter Templates",
+    "createMsg": "Create or edit templates registered under this unit",
+    "addTemplate": "Add Template",
+    "failedToLoadTemplates": "Failed To Load Templates",
+    "selectTemplate": "Select Template",
+    "updateTemplate": "Update Template",
+    "updateFled": "Update failed",
+    "createFled": "Create failed",
+    "templateSuccessMsg": "created successfully",
+    "failedToLoadHeaderFooter": "Failed To Load Headers/Footers",
+    "failedToDelete": "Failed To Delete",
+    "deleted": "Deleted",
+    "provideMsg": "Please provide both name and file",
+    "uploadSuccess": "Uploaded successfully",
+    "uploadFailed": "Upload failed",
+    "addHeaderFooter": "Add Header/Footer",
+    "name": "Name",
+    "internalSuffixCC": "Suffix CC",
+    "internalPrefixCC": "Prefix CC",
+    "internalPrefix": "Internal Prefix",
+    "externalPrefix": "External Prefix",
+    "internalMemoPrefix": "Internal Memo Prefix",
+    "reference": "The organization's standard reference number",
+    "externalReference": "Incoming letters' reference number",
+    "internalMemoReference": "Internal memo reference number",
+    "prefixCC": "Prefix CC",
+    "suffixCC": "Suffix CC",
+    "internalSuffix": "Internal Suffix",
+    "position": "Position",
+    "selectPosition": "Select Position",
+    "value": "Value",
+    "onlyPngAllowed": "Only PNG Files Are Allowed.",
+    "enterValue": "Enter Value",
+    "type": "Type",
+    "header": "Header",
+    "footer": "Footer",
+    "uploadFile": "Upload File",
+    "preview": "Preview",
+    "status": "Status",
+    "active": "Active",
+    "inactive": "Inactive",
+    "activate": "Activate",
+    "deactivate": "Deactivate",
+    "currentlyActive": "Currently Active",
+    "statusChanged": "Status changed successfully",
+    "statusChangeFailed": "Failed To Change Status",
+    "delete": "Delete",
+    "refNoRequired": "Reference number is required",
+    "nameRequired": "Both names are required.",
+    "recordTypeRequired": "Record type is required",
+    "deleteMsg": "Are you sure you want to delete this item?",
+    "filter": "Filter by record type",
+    "showCC": "Show CC items only",
+    "add": "Add Prefix/Suffix/Ref",
+    "addPrefix": "Add Reference Number",
+    "updateCount": "Update Count",
+    "currentCount": "Current Count",
+    "edit": "Edit",
+    "prefix": "Prefix",
+    "suffix": "Suffix",
+    "recordType": "Record Type",
+    "CC": "Is this for CC?",
+    "amharicName": "Amharic Name",
+    "englishName": "English Name",
+    "PrefixSuffix": "Prefix/Suffix/Reference List",
+    "positionPrefixes": "Position Reference Number",
+    "positionRequired": "Position is required",
+    "noRec": "No records found.",
+    "loading": "Loading...",
+    "bulkMsg": "Upload Excel file to import users in bulk",
+    "submitUsers": "Submit Users",
+    "selectFile": "Select File",
+    "uploadNew": "Upload New",
+    "updateExisting": "Update Existing",
+    "updateComingSoon": "Update existing functionality coming soon",
+    "uploadNew": "Upload New",
+    "updateExisting": "Update Existing",
+    "updateComingSoon": "Update existing functionality coming soon",
+    "count": "Count",
+    "posMissing": "Missing 'Positions' or 'Users' sheet.",
+    "invalidFile": "The uploaded file is empty or invalid.",
+    "parseSuccess": "File parsed successfully.",
+    "parseError": "Failed To Parse File.",
+    "noData": "No data found in the file.",
+    "Units": "Units",
+    "saving": "Saving...",
+    "teamMember": "Team Member",
+    "sendToSelectedUnit": "Send to Selected Unit",
+    "msg1": "No team members found",
+    "msg2": "Select a position to view team members",
+    "msg3": "Add team members to this department",
+    "msg4": "Navigate through departments to view team members",
+    "userDetail": "User Detail",
+    "editEmployee": "Edit Employee",
+    "noUnit": "No unit found",
+    "noOrg": "No organizations found",
+    "addUser": "Add User",
+    "addSubdepartement": "Add Sub-department",
+    "editDepartment": "Edit Department",
+    "moveDepartment": "Move Department",
+    "archiveDepartment": "Archive Department",
+    "deleteDepartment": "Delete Department",
+    "deleteConfirm": "Delete Department?",
+    "delete": "Delete",
+    "deleteFailed": "Failed to delete department",
+    "cannotDeleteWithEmployees": "Cannot delete department with assigned employees",
+    "reassignEmployeesFirst": "Please reassign or remove all employees from this department first.",
+    "deleteWarning": "Make sure all employees have been reassigned before deleting.",
+    "cannotDeleteDepartment": "Cannot delete department",
+    "deletedSuccessfully": "Department removed successfully",
+    "addUnit": "Add Unit",
+    "editUnit": "Edit Unit",
+    "addDepartment": "Add Department",
+    "deleteUnit": "Delete Unit",
+    "archiveUnit": "Archive Unit",
+    "archiveUnitConfirm": "Are you sure you want to archive this unit?",
+    "archiveUnitDescription": "This action will archive the unit",
+    "archiveUnitCanBeRestored": "It can be restored later from the Archived Units section.",
+    "archiveUnitSuccess": "Unit archived successfully.",
+    "unitArchivedSuccess": "Unit archived successfully.",
+    "unitDeletedPermanently": "Unit permanently deleted",
+    "deleteUnitFailed": "Failed to delete unit",
+    "cannotDeleteUnitWithPositions": "Cannot delete unit that has related positions. Please delete or reassign all positions first.",
+    "deletePermanentlyConfirm": "Permanently delete unit?",
+    "deletePermanentlyDescription": "This will permanently delete the unit",
+    "cannotBeUndone": "This action cannot be undone.",
+    "deletePermanently": "Delete",
+    "permanentDeleteWarning": "Permanent Deletion",
+    "permanentDeleteExplanation": "Once deleted, this unit cannot be recovered. Make sure all related positions have been removed first.",
+    "cannotDeleteUnit": "Cannot delete unit",
+    "cannotDeleteUnitWithEntities": "Cannot delete unit with related positions. Please delete or reassign all positions first.",
+    "deleteRelatedEntitiesFirst": "Remove all related entities before attempting deletion.",
+    "archivedItems": "Archived Items",
+    "archivedOrganizations": "Archived Organizations",
+    "archivedUnits": "Archived Units",
+    "archivedPositions": "Archived Positions",
+    "restore": "Restore",
+    "actions": "Actions",
+    "createUnit": "Create Unit",
+    "addFromSubCity": "Add From Sub City",
+    "addNewUnit": "Add New Unit",
+    "configuredUnitLimit": "Configured unit limit: {{max}}",
+    "linkedUnits": "Used",
+    "remainingSlots": "Remaining",
+    "checkingCapacity": "Checking configured capacity…",
+    "noCapacityConfigured": "No unit capacity configured for this organization. Ask the super admin to configure it in Manage Organization Configuration.",
+    "capacityReached": "Capacity limit reached. Configured maximum is {{max}}.",
+    "capacityReachedShort": "Limit reached — cannot create more units.",
+    "selectSubCity": "Select Sub City",
+    "selectSubCityFirst": "Select a sub city first",
+    "selectUnit": "Select Unit",
+    "noSubCities": "No sub cities found",
+    "subCityRequired": "Please select a sub city",
+    "unitRequired": "Please select a unit",
+    "parentUnitMissing": "Parent unit is missing",
+    "unitRelatedSuccess": "Unit related successfully",
+    "permissionType": "Permission Types",
+    "newPermission": "New Permission",
+    "permissionManagement": "Permission Management",
+    "exportTypes": "Export Types",
+    "exporting": "Exporting...",
+    "delMsg": "Are you absolutely sure?",
+    "delMsg2": "This action can not be undone. This will permanently delete the permission.",
+    "permission": "Permission",
+    "copyPermissionsFrom": "Copy permissions from",
+    "selectPositionToCopy": "Select a position type to copy permissions from",
+    "selectApplication": "Select an application",
+    "selectApplicationToLoadPermissions": "Select an application to load its permissions",
+    "copyPermissionsHint": "Pick an existing position type to pre-fill its permissions, then edit below.",
+    "copyPermissionsFailed": "Failed to copy permissions",
+    "perFailed": "Failed To Create Permission",
+    "perSuccess": "Permission type created and permissions assigned",
+    "updatePerSuccess": "Permission updated successfully",
+    "updatePerFailed": "Failed To Update Permission",
+    "permissionName": "Permission Name",
+    "key": "Key",
+    "createdAt": "Created At",
+    "updatedAt": "Updated At",
+    "createPermission": "Create Permission",
+    "keyRequired": "Key is required",
+    "selectPosType": "Select a Position Type",
+    "adding": "Adding...",
+    "msg": "added successfully",
+    "subDep": "Sub-department",
+    "parentDep": "Parent Department",
+    "invalidMsg": "Please correct the highlighted fields.",
+    "success": "Success",
+    "unit": "Unit",
+    "user": "User",
+    "firstName": "First Name",
+    "lastName": "Last Name",
+    "selectUser": " Select User",
+    "userRequired": "User is required",
+    "userRequiredMsg": "Please select a user to assign.",
+    "userError": "Selected user is invalid or not found.",
+    "userSuccess": "User assigned successfully",
+    "updated": "has been updated successfully",
+    "department": "Department",
+    "departmentRequired": "Department is required",
+    "departmentSuccess": "Department selected successfully",
+    "permissionSuccess": "Position type created and permissions assigned",
+    "permissionFailed": "Failed To Create Position",
+    "editRemark": "Edit Remark",
+    "addRemark": "Add Remark",
+    "commonRemarks": "Common Remarks",
+    "onlySquareAllowed": "The height and width of the seal must be the same(300x300)",
+    "searchPermissions": "Search permissions...",
+    "noPermissionsFound": "No permissions found matching your search",
+    "noPermissionsAvailable": "No permissions available",
+    "showingPermissions": "Showing {{count}} of {{total}} permissions",
+    "createTemplate": "Create Template",
+    "editTemplate": "Edit Template",
+    "viewTemplate": "View Template",
+    "deleteTemplate": "Delete Template",
+    "deleteTemplateConfirm": "Are you sure you want to delete the template '{{name}}'? This action cannot be undone.",
+    "noTemplates": "No templates found",
+    "sincerelyText": "Sincerely Text",
+    "body": "Body",
+    "headerAndFooter": "Header and Footer",
+    "CanReceiveRecord": "Can Receive Record",
+    "CanAssignRecord": "Can Assign Record",
+    "CanCreateBankRecord": "Can Create Bank Record",
+    "positionChangeRequestReason": "Employee position assignment requested",
+    "positionChangeRequestSuccess": "Position change request submitted successfully.",
+    "positionChangeApprovalRequiredSuccess": "Action completed successfully. Approval is required for position changes.",
+    "userInvitePendingApproval": "The user has been invited and is pending approval for this department.",
+    "requestAssignment": "Request Assignment",
+    "assignUser": "Assign User",
+    "submitting": "Submitting...",
+    "bulkMsg2": "Upload Excel to update Position in bulk"
+  },
+  "recordTag": {
+    "title": "Record Tags",
+    "tableName": "Record Tags",
+    "name": "Name",
+    "key": "Key",
+    "CreatedAt": "Created At",
+    "createNew": "Create new tag",
+    "createTitle": "Record Tag",
+    "Actions": "Actions"
+  },
+  "setting": {
+    "canHaveTagBasedReferenceNumber": "Can Have Tag Based Reference Number",
+    "referenceNumberCountFirst": "Should The Number Count Come First On The Reference Number",
+    "canUserSkipLevel": "User Can Skip Level",
+    "canRecordDateLabelHasLocalization": "Does Record Date Label Have Localization?",
+    "canRecordDateHaveTime": "Can Record Date Have Time?",
+    "canInternalMemoRequirePositionBasedReferenceNumber": "Is Position Based Reference Number Required For Internal Memo?",
+    "title1": " Unit Configuration",
+    "title2": "Configure Scope For Each Unit",
+    "title4": "Configure Escalation Hour For Each Unit",
+    "loading": " Loading units...",
+    "noUnit": "No units found",
+    "Action": "Action",
+    "Value": "Value",
+    "Name": "Name",
+    "title3": "Position Scope To Fetch",
+    "title5": "Show Teeter and Signature For Assign Record",
+    "title6": "Wait for all collaborators before action?",
+    "canCreateDirectRecord": "Can Create Direct Record",
+    "canCreateBankRecord": "Can Create Bank Record",
+    "isApprovalRequiredForPositionChange": "Approval Required For Position Change",
+    "canPositionBasedRecordsBeCreated": "Can Position Based Records Be Created ?",
+    "canPositionBasedReferenceBeUsedForAllTypes": "Can Position Based Reference Be Used For All Types?",
+    "shouldDirectRecordHaveHeaderAndFooter": "Direct Record Has Header And Footer",
+    "shouldCollaboratorAlwaysSign": "Collaborator Always Sign (Team Signature)",
+    "shouldIncludeForYourReferenceInCC": "Include For Your Reference in CC",
+    "canCollaborationBeCreatedForAll": "Can Collaboration Be Creeated For All Record Type?",
+    "canRecordBeEditedByCollaborators": "Allow Collaborators to Edit Record",
+    "canRecordHaveCollaboratorsName": "Show Collaborators' Names on Record",
+    "canRecordBeEditedOnWorkflow": "Allow Record Editing on Workflow",
+    "canIncomingAssignmentsBeSeparated": "Duplicate Incoming Letters based on assignment?",
+    "canROReturn": "Allow RO Return",
+    "internalMemoHasReferenceNumber": "Internal Memo Has Reference Number",
+    "enabled": "enabled",
+    "disabled": "disabled",
+    "editTitle": "Edit Position Scope",
+    "editMsg": "Change the position scope for this unit",
+    "msg1": "Organization ID not found. Please check your authentication.",
+    "msg2": "Loading position configurations...",
+    "positionConfig": " Position Configuration",
+    "positionConfigMsg": "Configure notification settings and workflow behavior for each position",
+    "add": " Add Configuration",
+    "create": "Create Position Configuration",
+    "position": "Position",
+    "select": "Select a position",
+    "select2": "Please select a unit first",
+    "plsSelect": "Please select a unit first to see available positions",
+    "positionScope": "Position Scope",
+    "all": "All",
+    "immediateChild": "Immediate Child",
+    "parallel": "Parallel with Immediate Child",
+    "notification": "Notification Settings",
+    "sms": " SMS Notification",
+    "smsMsg": "Send SMS when a record is submitted to this position",
+    "email": "Email Notification",
+    "emailMsg": "Send email when a record is submitted to this position",
+    "inbox": "Inbox Notification",
+    "inboxMsg": "Show inbox notification when a record is submitted to this position",
+    "workflow": "Workflow Settings",
+    "viewWF": "View Workflow",
+    "workflowMsg": "Skip Workflow If Not Assigned",
+    "workflowMsg1": "Skip workflow step if no one is assigned to this position",
+    "creating": "Creating...",
+    "createConfig": "Create Configuration",
+    "error": "Error loading position configurations:",
+    "retry": "Retry",
+    "SMS": "SMS",
+    "Inbox": "Inbox",
+    "skipWF": "Skip Workflow",
+    "delete": "Delete Configuration",
+    "deleteMsg": "Are you sure you want to delete this position configuration? This action cannot be undone.",
+    "edit": "Edit Position Configuration",
+    "updating": "Updating...",
+    "UpdateConfig": "Update Configuration",
+    "archivedUsers": " Archived Users",
+    "escalationTitle": "Escalation Configuration",
+    "escalationDescription": "Configure escalation hours for different letter types",
+    "loadingConfig": "Loading configuration...",
+    "loadError": "Error loading configuration",
+    "noConfigFound": "No configuration found",
+    "updateEscalationMsg": "Update the escalation hour value",
+    "saving": "Saving...",
+    "saveChanges": "Save Changes",
+    "escalationHour": "Regular Escalation Hour",
+    "urgentLetterEscalationHour": "Urgent Letter Escalation Hour",
+    "onReviewLetterEscalationHour": "Review Letter Escalation Hour",
+    "urgentOnReviewLetterEscalationHour": "Urgent Review Letter Escalation Hour",
+    "escalationNotificationType": "Escalation Notification Type",
+    "escalationNotificationChannel": "Escalation Notification Channel",
+    "escalationNotificationTypePlaceholder": "Select notification type",
+    "escalationNotificationChannelPlaceholder": "Select notification channel",
+    "escalationTypeJump": "Jump",
+    "escalationTypeNotifyStep": "Notify Step",
+    "escalationTypeNotifyParentStep": "Notify Parent Step",
+    "escalationChannelAll": "All Channels",
+    "escalationChannelEmail": "Email",
+    "escalationChannelInApp": "In-App",
+    "escalationChannelSms": "SMS",
+    "canSendToBranch": "Can Send to Branch Departments Directly",
+    "attachmentSignature": {
+      "badge": "Attachment Security",
+      "title": "Signature for Attachments",
+      "description": "Choose a unit and control whether attachments include a digital signature by default",
+      "unit": "Unit",
+      "selectUnit": "Select a unit",
+      "loadingUnits": "Loading units...",
+      "noUnitsFound": "No units found",
+      "unitHint": "This setting applies to the selected unit",
+      "toggleLabel": "Add Signature to Attachment",
+      "toggleDescription": "Automatically include a signature on uploaded attachments",
+      "status": "Status:",
+      "activeUnit": "Active unit:"
+    }
+  },
+  "toogle": {
+    "letterName": "File Name",
+    "Letter_Number": "Letter Number",
+    "ACtions": "Actions",
+    "Actions": "Actions",
+    "Date": "Date",
+    "From": "From",
+    "Subject": "Subject",
+    "subject": "Subject",
+    "referenceNumber": "Reference Number",
+    "FileName": "File Name",
+    "To": "To",
+    "fileName": "File Name",
+    "sendingOrganization": "Sending Organization",
+    "sendingDepartment": "Sending Department",
+    "dispatchedDate": "Date",
+    "submittedDate": "Date",
+    "Sending_Department": "Sending Department",
+    "dispatchedBy": "Converted By",
+    "Receiver": "Receiver",
+    "CreatedAt": "Date",
+    "createdAt": "Date",
+    "Status": "Status",
+    "status": "Status",
+    "organizationName": "Organization Name",
+    "Task Status": "Status",
+    "TaskStatus": "Status",
+    "taskStatus": "Status",
+    "delegateePosition": "Delegatee Position",
+    "delegateeEmployee": "Delegatee Employee",
+    "delegatedPosition": "Delegated Position",
+    "delegatedEmployee": "Delegated Employee",
+    "startDate": "Start Date",
+    "endDate": "End Date",
+    "isCurrent": "Status",
+    "signStatus": "Sign Status",
+    "title": "Title",
+    "color": "Color",
+    "description": "Description",
+    "image": "Image",
+    "featured": "Top News",
+    "category": "News Category",
+    "link": "link",
+    "name": "Name",
+    "key": "Key",
+    "updatedAt": "Updated At",
+    "actions": "Actions"
+  },
+  "viewDocument": {
+    "title": "Pinned Documents",
+    "refreshButton": "Refresh",
+    "userInformation": "User Information",
+    "organizationName": "Organization Name",
+    "email": "Email",
+    "phoneNumber": "Phone Number",
+    "totalDocuments": "Total Documents",
+    "failedToLoadUserInfo": "Failed to load user information",
+    "document": {
+      "viewDocument": "View Document",
+      "requirements": "Requirements",
+      "optional": "(Optional)",
+      "required": "(Required)",
+      "noRequirements": "No specific requirements for this document",
+      "status": {
+        "approved": "approved",
+        "rejected": "rejected",
+        "pending": "pending"
+      }
+    },
+    "actions": {
+      "success": "Action \"{action}\" submitted successfully!",
+      "error": "Failed to submit action: {error}"
+    }
+  },
+  "actionModal": {
+    "trigger": "Take Action",
+    "title": "Take Action on Document",
+    "labels": {
+      "selectAction": "Select Action",
+      "remark": "Remark (optional)",
+      "remarkPlaceholder": "Add a remark..."
+    },
+    "actions": {
+      "approve": "Approve",
+      "adjustment": "Adjustment",
+      "reject": "Reject",
+      "pending": "Pending",
+      "submitted": "Submitted",
+      "selectPlaceholder": "Select action"
+    },
+    "buttons": {
+      "cancel": "Cancel",
+      "submit": "Submit"
+    },
+    "toast": {
+      "success": "Document {status}"
+    }
+  },
+  "Select organization/unit": "Select organization/unit",
+  "Select the main file for the record": "Select the main file for the record",
+  "statusList": {
+    "Dispatched": "Dispatched",
+    "Pending": "Pending",
+    "Approved": "Approved",
+    "Rejected": "Rejected",
+    "Completed": "Completed",
+    "In Progress": "In Progress",
+    "Draft": "Draft",
+    "Submitted": "Submitted",
+    "Under Review": "Under Review",
+    "Returned": "Returned",
+    "inActive": "InActive"
+  },
+  "search": {
+    "searchAllEmployees": "Search All Employees",
+    "searchByNameEmailPhonePosition": "Search by name, email, phone, or position...",
+    "searchingEmployees": "Searching employees...",
+    "errorLoadingEmployees": "Error loading employees",
+    "noEmployeesFound": "No employees found",
+    "tryDifferentKeywords": "Try different keywords",
+    "startTypingToSearch": "Start typing to search employees",
+    "searchByNameEmailPhone": "Search by name, email, or phone number",
+    "showingResults": "Showing {{count}} of {{total}} results for \"{{query}}\"",
+    "searchUnits": "Search units...",
+    "searchDepartments": "Search departments...",
+    "searchEmployees": "Search employees...",
+    "selectUnitsPlaceholder": "Select units...",
+    "noResults": "No results found",
+    "allEmployees": "All Employees",
+    "resendingVerification": "Resending verification code...",
+    "sendingInvitation": "Sending invitation...",
+    "verificationCodeResent": "Verification Code Resent",
+    "invitationSent": "Invitation Sent",
+    "verificationCodeSentTo": "A new verification code has been sent to {{name}}",
+    "invitationSentTo": "Invitation sent to {{name}}",
+    "failedToResend": "Failed To Resend Verification Code",
+    "failedToSendInvitation": "Failed To Send Invitation",
+    "confirmRemoveEmployee": "Are you sure you want to remove {{name}}? This action cannot be undone.",
+    "removeFunctionalityNotImplemented": "Remove functionality will be implemented with proper API integration"
+  },
+  "Resend Invite": "Resend Invite",
+  "deputy": {
+    "title": "Deputy Leadership",
+    "subtitle": "Insights and updates from our deputy leadership team",
+    "previous": "Previous message",
+    "next": "Next message",
+    "defaultPosition": "Position",
+    "goToMessage": "Go to message {{index}}"
+  },
+  "officeHead": {
+    "title": "Leadership Message",
+    "subtitle": "Message from the Office Head",
+    "defaultPosition": "Position",
+    "addMessage": "Add Message"
+  },
+  "Strategic Goal": "Strategic Goal",
+  "of": "of",
+  "Our Strategic Goals": "Our Strategic",
+  "Go to goal": "to goal {{index}}: {{title}} go",
+  "Previous Goal": "Previous Goal",
+  "Next Goal": "Next Goal",
+  "addGoal": "Add Goal",
+  "Goals": "Organizational Goals",
+  "Vision": "Organizational Vision",
+  "addVision": "Add Vision",
+  "addNews": "Add News",
+  "addNewsCategory": "Add News Category",
+  "newsCategory": "News Category",
+  "modules": "Modules",
+  "addModules": "Add Modules",
+  "socialMedia": "Social Media",
+  "addSocialMedia": "Add Social Media",
+  "contactUs": "Contact Us",
+  "addContactUs": "Add Contact",
+  "theme": "Organization's Theme",
+  "template": {
+    "title": "Resource Configuration",
+    "description": "Description",
+    "pageDescription": "Manage resources for style settings",
+    "create": "Create Resource",
+    "createDescription": "Create a new resource for style settings",
+    "edit": "Edit Resource",
+    "editDescription": "Update resource configuration",
+    "delete": "Delete Resource",
+    "deleteConfirmation": "Are you sure you want to delete this resource? This action cannot be undone.",
+    "confirmDelete": "Confirm Deletion",
+    "name": "Name",
+    "nameAmharic": "Name (Amharic)",
+    "nameEnglish": "Name (English)",
+    "enterNameAmharic": "Enter name in Amharic",
+    "enterNameEnglish": "Enter name in English",
+    "nameRequired": "Name is required",
+    "resourceTypeRequired": "Resource type is required",
+    "fileRequired": "File is required",
+    "fileTooLarge": "File must be 50MB or smaller",
+    "invalidFileType": "Only PNG, JPG, GIF, WebP, and PDF files are allowed",
+    "submitErrorTitle": "Could not save resource",
+    "resourceType": "Resource Type",
+    "selectResourceType": "Select resource type",
+    "selectTypeFirst": "Select a resource type to view resources",
+    "descriptionAmharic": "Description (Amharic)",
+    "descriptionEnglish": "Description (English)",
+    "enterDescriptionAmharic": "Enter description in Amharic",
+    "enterDescriptionEnglish": "Enter description in English",
+    "descriptions": "Descriptions",
+    "names": "Names",
+    "file": "File",
+    "uploadFile": "Upload File",
+    "dragDrop": "Drag and drop or click to upload",
+    "fileTypes": "PNG, JPG, GIF, WebP, PDF up to 50MB",
+    "view": "View",
+    "noTemplates": "No resources yet",
+    "getStarted": "Get started by creating your first resource",
+    "search": "Search resources...",
+    "created": "Resource created successfully",
+    "updated": "Resource updated successfully",
+    "deleted": "Resource deleted successfully",
+    "error": "Failed to save resource",
+    "deleteFailed": "Failed to delete resource",
+    "configureStyles": "Configure Styles",
+    "sample": "Template Sample",
+    "generateSample": "Generate Sample",
+    "content": "Content",
+    "pdfPreview": "PDF Preview",
+    "saveSettings": "Save Settings",
+    "download": "Download",
+    "loadPayload": "Load Sample Payload",
+    "loadPayloadDescription": "Upload a JSON payload file to pre-fill the form with sample data",
+    "loadingTemplates": "Loading templates...",
+    "errorLoadingTemplates": "Error loading templates",
+    "errorLoadingTemplate": "Error loading template",
+    "errorLoadingSettings": "Error loading style settings",
+    "commonProperties": "Common Properties",
+    "quickPresets": "Quick Presets",
+    "fontSize": "Font Size",
+    "fontWeight": "Font Weight",
+    "fontFamily": "Font Family",
+    "textDecoration": "Text Decoration",
+    "listStyle": "List Style",
+    "customListBullets": "Custom bullets (Resource Configuration)",
+    "width": "Width",
+    "height": "Height",
+    "margin": "Margin",
+    "padding": "Padding",
+    "advancedCSS": "Advanced CSS Editor",
+    "customCSS": "Custom CSS",
+    "noPdfInResponse": "No PDF in response",
+    "generatingSample": "Error generating sample",
+    "settingsSavedSuccessfully": "Settings saved successfully",
+    "errorSavingSettings": "Error saving settings",
+    "noCustomSettingsToSave": "No custom settings to save",
+    "downloadingPDF": "Downloading PDF...",
+    "downloadPDFSuccess": "PDF downloaded successfully",
+    "downloadPDFFailed": "Failed to download PDF",
+    "noPdfAvailable": "No PDF available",
+    "basicInfo": "Basic Information",
+    "recordType": "Record Type",
+    "external": "External",
+    "internal": "Internal",
+    "preferredLanguage": "Preferred Language",
+    "headerFooter": "Header & Footer",
+    "headerStyleSettings": "Header Style Settings",
+    "footerStyleSettings": "Footer Style Settings",
+    "subject": "Subject",
+    "subjectStyleSettings": "Subject Style Settings",
+    "date": "Date",
+    "body": "Body",
+    "bodyStyleSettings": "Body Style Settings",
+    "sincerelyText": "Sincerely Text",
+    "prefix": "Prefix",
+    "prefixStyleSettings": "Prefix Style",
+    "suffix": "Suffix",
+    "suffixStyleSettings": "Suffix Style",
+    "prefixCC": "Prefix CC",
+    "ccPrefixStyleSettings": "CC Prefix Style",
+    "suffixCC": "Suffix CC",
+    "ccSuffixStyleSettings": "CC Suffix Style",
+    "delegatorName": "Delegator Name",
+    "collaborators": "Collaborators",
+    "recipientsAndCC": "Recipients & CC",
+    "internalCC": "Internal CC",
+    "externalCC": "External CC",
+    "recipients": "Recipients",
+    "fontsHint": "Select an optional font resource.",
+    "fontResource": "Font file",
+    "selectFont": "Select a font",
+    "sectionReference": "Reference & date",
+    "sectionReceivers": "Receivers",
+    "sectionSender": "Sender",
+    "sectionSubject": "Subject",
+    "sectionBody": "Body",
+    "sectionClosing": "Closing & signatures",
+    "sectionCc": "CC",
+    "alignAuto": "Auto (language default)",
+    "alignStart": "Start (left)",
+    "alignCenter": "Center",
+    "alignEnd": "End (right)",
+    "letterLayout": "Letter Layout",
+    "appliesTo": "Applies to",
+    "useGlobalDefault": "Use template default",
+    "unitOverride": "Unit override",
+    "placementLanguage": "Placement language",
+    "languageAm": "Amharic",
+    "languageEn": "English",
+    "copyAmToEnPositions": "Copy Amharic -> English",
+    "layoutOptions": "Layout options",
+    "sectionOrder": "Section order",
+    "moveUp": "Move up",
+    "moveDown": "Move down",
+    "signatures": "Signatures",
+    "signatureWidth": "Width (pt)",
+    "signatureHeight": "Height (px)",
+    "signatureGap": "Gap (px)",
+    "closingAlign": "Closing block horizontal position",
+    "seal": "Seal",
+    "sealWidth": "Width (px)",
+    "sealHeight": "Height (px)",
+    "stamp": "Stamp (teeter)",
+    "stampWidth": "Width (pt)",
+    "stampHeight": "Height (px)",
+    "closingAssetSignatures": "Signature block",
+    "closingAssetSeal": "Seal",
+    "senderAssetSignature": "Sender signature",
+    "senderAssetStamp": "Sender stamp",
+    "assetPlacementCanvas": "Asset placement",
+    "assetPlacementCanvasHint": "Drag each asset on the page. Editing positions for {{language}}. Canvas matches PDF content area ({{width}}x{{height}} px).",
+    "closingBlockGuide": "Sincerely section (approx.)",
+    "selectedAsset": "Selected asset",
+    "positionTop": "Top (px)",
+    "positionLeft": "Left (px)",
+    "layerOrder": "Layer order (back -> front)",
+    "sendBackward": "Send backward",
+    "bringForward": "Bring forward",
+    "letterLabelHint": "Label text shown on the letter",
+    "underline": "Underline",
+    "bold": "Bold",
+    "listStyleImage": "List Style Image",
+    "listStyleImagePreview": "List style image preview",
+    "refreshingImage": "Refreshing...",
+    "imageUnavailable": "Image unavailable",
+    "noListStyleImage": "No image",
+    "removeListStyleImage": "Remove image",
+    "resetAllTitle": "Reset all settings?",
+    "resetAllMessage": "This will reset all customized style settings for this template back to defaults.",
+    "resetAllWarning": "This action cannot be undone.",
+    "resetAllCancel": "Cancel",
+    "resetAllConfirm": "Reset to defaults",
+    "historyLoadFailed": "Failed to load setting history",
+    "historyRestored": "Setting restored from history",
+    "historyRestoreFailed": "Failed to restore setting",
+    "settingHistory": "Setting History",
+    "noHistory": "No history entries for this setting.",
+    "restoreVersion": "Restore",
+    "selectStyleCategory": "Select Style Category",
+    "customized": "Customized",
+    "textAlign": "Text Align",
+    "pdfPreview": "PDF Preview",
+    "autoRefreshEnabled": "Auto refresh is enabled",
+    "manualRefreshEnabled": "Manual refresh",
+    "openInNewTab": "Open in new tab",
+    "generatingPreview": "Generating...",
+    "applyChanges": "Apply Changes",
+    "loadingPdf": "Loading PDF...",
+    "pdfLoadError": "Failed to load PDF preview",
+    "previewNotGenerated": "Preview not generated yet",
+    "noChangesToSave": "No setting changes to save",
+    "saveSuccess": "Style settings saved successfully",
+    "resetAllError": "Failed to reset style settings",
+    "styleSettings": "Style Settings",
+    "settings": "settings",
+    "resetAllToDefault": "Reset to Default",
+    "livePreview": "Live Preview",
+    "previewLanguage": "Preview language",
+    "amharic": "Amharic",
+    "english": "English",
+    "styleCategories": "Style Categories",
+    "categoryHint": "Pick a section to edit",
+    "expandSidebar": "Expand sidebar",
+    "collapseSidebar": "Collapse sidebar",
+    "styleEditor": "Style Editor",
+    "headerFooterSelection": "Header & Footer",
+    "noSettings": "No style settings available",
+    "visible": "visible",
+    "viewHistory": "History",
+    "letterLabelFields": "Label text",
+    "unsavedChanges": "Unsaved changes",
+    "allChangesSaved": "All changes saved",
+    "saveShortcut": "Ctrl+S to save",
+    "saving": "Saving..."
+  },
+  "templateSettingValue": {
+    "title": "Template Setting Values",
+    "description": "Manage template setting values",
+    "create": "Create Template Setting Value",
+    "createDescription": "Create a new template setting value",
+    "edit": "Edit Template Setting Value",
+    "editDescription": "Update template setting value",
+    "delete": "Delete Template Setting Value",
+    "deleteConfirmation": "Are you sure you want to delete this template setting value? This action cannot be undone.",
+    "confirmDelete": "Confirm Deletion",
+    "template": "Template",
+    "selectTemplate": "Select template",
+    "templateSetting": "Template Setting",
+    "selectTemplateSetting": "Select template setting",
+    "resourceType": "Resource Type",
+    "selectResourceType": "Select resource type",
+    "resource": "Resource",
+    "selectResource": "Select resource",
+    "templateSettingId": "Template Setting ID",
+    "enterTemplateSettingId": "Enter template setting ID",
+    "templateSettingIdRequired": "Template setting ID is required",
+    "resourceId": "Resource ID",
+    "enterResourceId": "Enter resource ID",
+    "resourceIdRequired": "Resource ID is required",
+    "value": "Value",
+    "enterValue": "Enter value",
+    "valueRequired": "Value is required",
+    "noValues": "No template setting values yet",
+    "getStarted": "Get started by creating your first template setting value",
+    "search": "Search by resource ID or value...",
+    "created": "Template setting value created successfully",
+    "updated": "Template setting value updated successfully",
+    "deleted": "Template setting value deleted successfully",
+    "error": "Failed to save template setting value",
+    "deleteFailed": "Failed to delete template setting value"
+  },
+  "menu": {
+    "content": "Content",
+    "settingsAndConfig": "Settings & Config",
+    "themesAndBranding": "Themes & Branding",
+    "templates": "Templates"
+  },
+  "portal": {
+    "settings": "Portal Settings"
+  },
+  "featuredNews": {
+    "featuredNewsTitle": "Featured News",
+    "featuredNewsSubtitle": "Stay updated with the latest developments, achievements, and innovations from our organization",
+    "searchPlaceholder": "Search news articles...",
+    "topStories": "Top Stories",
+    "readFullStory": "Read full story",
+    "readMore": "Read more",
+    "loadMoreNews": "Load More News",
+    "showLess": "Show Less",
+    "previousGoal": "Previous Goal",
+    "nextGoal": "Next Goal",
+    "noNewsFound": "No news found",
+    "tryAdjusting": "Try adjusting your search or filter criteria",
+    "readLess": "Read less"
+  },
+  "newssection": {
+    "featuredNews": "Featured News",
+    "description": "Stay updated with the latest developments, achievements, and innovations from our organization",
+    "topStories": "Top Stories",
+    "allNews": "All News",
+    "noNewsFound": "No news found",
+    "noNewsFoundDesc": "Try adjusting your search or filter criteria",
+    "searchPlaceholder": "Search news articles...",
+    "readFullStory": "Read full story",
+    "readMore": "Read more",
+    "loadMoreNews": "Load More News",
+    "showLess": "Show Less",
+    "title": "Title"
+  },
+  "queueManagement": {
+    "serviceRating": "Service Rating",
+    "rateYourExperience": "Rate your experience with our service",
+    "validationDateInvalid": "Invalid date format",
+    "usingHabeshaCalendar": "Using Habesha Calendar",
+    "usingGregorianCalendar": "Using Gregorian Calendar",
+    "howWasYourExperience": "How was your experience?",
+    "thankYouForRating": "Thank you for your rating!",
+    "pleaseSelectRating": "Please select a rating to continue",
+    "submitFeedback": "Submit Feedback",
+    "feedbackSubmitted": "Feedback submitted successfully!",
+    "feedbackError": "Failed to submit feedback. Please try again.",
+    "title": "Queue Management",
+    "subtitle": "Secure your spot",
+    "queued": "Queued",
+    "called": "Called Users",
+    "inService": "In Service",
+    "completed": "Completed",
+    "addQueues": "service categories",
+    "queuedUsers": "Queued Users",
+    "calledUsers": "Called Users",
+    "completedQueues": "Completed Queues",
+    "noQueuedUsers": "No queued users at the moment",
+    "noCalledUsers": "No called users at the moment",
+    "noInServiceQueues": "No queues in service at the moment",
+    "noCompletedQueues": "No completed queues at the moment",
+    "position": "Position",
+    "customerName": "Customer Name",
+    "customerNameAmharic": "Customer Name (Amharic)",
+    "customerNameEnglish": "Customer Name (English)",
+    "refresh": "Refresh",
+    "loading": "Loading called users...",
+    "starting": "Starting...",
+    "phoneNumber": "Phone Number",
+    "service": "Service",
+    "serviceCategoryLabel": "Service Category",
+    "date": "Date",
+    "serviceDate": "Service Date",
+    "status": "Status",
+    "action": "Action",
+    "actions": "Actions",
+    "filterByDate": "Filter by Date",
+    "start": "Start",
+    "end": "End",
+    "queueNumber": "Queue Number",
+    "activeCallManagement": "Active Call Management",
+    "manageActiveQueues": "Manage and monitor active queue calls in real-time",
+    "totalActive": "Total Active",
+    "waitingTime": "Waiting Time",
+    "averageWaitTime": "Average Wait Time",
+    "currentlyServing": "Currently Serving",
+    "nextInLine": "Next in Line",
+    "callNext": "Call Next",
+    "skipQueue": "Skip Queue",
+    "pauseQueue": "Pause Queue",
+    "resumeQueue": "Resume Queue",
+    "endService": "End Service",
+    "serviceTime": "Service Time",
+    "totalServed": "Total Served Today",
+    "efficiency": "Service Efficiency",
+    "queueStats": "Queue Statistics",
+    "realTimeUpdates": "Real-time Updates",
+    "autoRefresh": "Auto Refresh",
+    "manualRefresh": "Manual Refresh",
+    "lastUpdated": "Last Updated",
+    "refreshInterval": "Refresh Interval",
+    "seconds": "seconds",
+    "minutes": "minutes",
+    "hours": "hours",
+    "timeAgo": "ago",
+    "justNow": "just now",
+    "callInProgress": "Call in Progress",
+    "waitingForService": "Waiting for Service",
+    "serviceCompleted": "Service Completed",
+    "queuePaused": "Queue Paused",
+    "noActiveQueues": "No Active Queues",
+    "noActiveQueuesDesc": "All queues are currently empty or paused",
+    "callNextCustomer": "Call Next Customer",
+    "confirmEndService": "Confirm End Service",
+    "endServiceConfirm": "Are you sure you want to end the current service?",
+    "confirmSkipQueue": "Confirm Skip Queue",
+    "skipQueueConfirm": "Are you sure you want to skip this customer?",
+    "serviceEnded": "Service ended successfully",
+    "queueSkipped": "Customer skipped successfully",
+    "callInitiated": "Call initiated successfully",
+    "errorEndingService": "Error ending service",
+    "errorSkippingQueue": "Error skipping queue",
+    "errorCallingNext": "Error calling next customer",
+    "processingRequest": "Processing request...",
+    "pleaseWait": "Please wait...",
+    "loadingQueues": "Loading queues...",
+    "noActiveQueuesMessage": "All clear! There are no active queues for this service at the moment.",
+    "totalQueues": "Total Queues",
+    "readyToServe": "Ready to Serve",
+    "waiting": "Waiting",
+    "back": "Back",
+    "realTimeMonitoring": "Real-time monitoring of all service queues with live updates",
+    "createQueue": "Create Queue",
+    "queueRegistration": "Queue Registration",
+    "registerNewCustomer": "Register a new customer in the queue",
+    "createdAt": "Created At",
+    "updatedAt": "Updated At",
+    "queueList": "Queue List",
+    "total": "Total",
+    "viewAndManageQueues": "View and manage all queues for the selected unit",
+    "serviceCategories": "Service Categories",
+    "viewAllCategories": "View all available service categories",
+    "services": "Services",
+    "selectService": "Select a service to add queues",
+    "subServices": "Sub-Services",
+    "addToQueue": "Add to Queue",
+    "viewQueues": "View Queues",
+    "viewSubServices": "View Sub-services",
+    "enterCustomerName": "Enter customer name",
+    "enterCustomerNameAmharic": "የደንበኛ ስም",
+    "enterPhoneNumber": "09...",
+    "selectDate": "Select date",
+    "cancel": "Cancel",
+    "queueCreatedSuccess": "Queue created successfully!",
+    "queueCreatedError": "Failed to create queue",
+    "validationCustomerNameMin": "Customer name must be at least 2 characters",
+    "validationCustomerNameMax": "Customer name must not exceed 100 characters",
+    "validationCustomerNameLetters": "Customer name must contain only letters",
+    "validationCustomerNameAmMin": "Customer name must be at least 2 characters",
+    "validationCustomerNameAmMax": "የደንበኛ ስም ከ100 ፊደላት መብለጥ የለበትም",
+    "validationPhoneNumber": "Please enter a valid Ethiopian phone number (e.g., 0912345678)",
+    "validationDateRequired": "Date is required",
+    "estimatedTime": "Estimated Time",
+    "category": "Category",
+    "noServicesAvailable": "No Services Available",
+    "noServicesMessage": "There are no services in this category at the moment",
+    "noSubServicesAvailable": "No Sub-Services Available",
+    "noSubServicesMessage": "There are no sub-services under this service at the moment",
+    "allQueues": "All Queues",
+    "totalRegistered": "Total Registered",
+    "noQueuesFound": "No Queues Found",
+    "noQueuesMessage": "There are no queues registered yet",
+    "phone": "Phone"
+  },
+  "performanceManagement": {
+    "title": "Performance Management",
+    "planManagement": "Plan Management",
+    "monitorPlans": "Manage and monitor performance plans across your organization",
+    "totalPlans": "Total Plans",
+    "planName": "Plan Name",
+    "planNameAmharic": "Plan Name (Amharic)",
+    "planNameEnglish": "Plan Name (English)",
+    "description": "Description",
+    "descriptionAmharic": "Description (Amharic)",
+    "descriptionEnglish": "Description (English)",
+    "weight": "Weight",
+    "planType": "Plan Type",
+    "actions": "Actions",
+    "viewDetails": "View details",
+    "edit": "Edit",
+    "delete": "Delete",
+    "createPlan": "Create Plan",
+    "exportAll": "Export All",
+    "backToSectors": "Back to Sectors",
+    "backToPlanYears": "Back to Plan Years",
+    "refresh": "Refresh",
+    "confirmDeletion": "Confirm Deletion",
+    "deletePlanConfirm": "Are you sure you want to delete the plan? This action cannot be undone and all associated data will be permanently removed.",
+    "cancel": "Cancel",
+    "deletePlan": "Delete Plan",
+    "deleting": "Deleting...",
+    "errorLoadingPlans": "Error Loading Plans",
+    "failedToLoad": "Failed to load plans data. Please try again.",
+    "tryAgain": "Try Again",
+    "plans": "Plans",
+    "editPlan": "Edit Plan",
+    "updatePlanDetails": "Update your performance plan details",
+    "createNewPlan": "Create New Plan",
+    "setupNewPlan": "Set up a new performance plan for your organization",
+    "editingMode": "Editing Mode",
+    "creationMode": "Creation Mode",
+    "updatePlan": "Update Plan",
+    "modifyPlanDetails": "Modify the plan details below",
+    "newPerformancePlan": "New Performance Plan",
+    "fillDetailsToCreate": "Fill in the details to create a new performance plan",
+    "creatingSubPlan": "Creating Sub-Plan",
+    "subPlanUnder": "This plan will be created as a sub-plan under",
+    "basicInformation": "Basic Information",
+    "nameAmharic": "Name (Amharic)",
+    "nameEnglish": "Name (English)",
+    "organization": "Organization",
+    "planYear": "Plan Year",
+    "timeFrame": "Time Frame",
+    "initialGoal": "Initial Goal",
+    "expectedGoal": "Expected Goal",
+    "planDetails": "Plan Details",
+    "parentPlan": "Parent Plan",
+    "month": "Month",
+    "week": "Week",
+    "day": "Day",
+    "quarter": "Quarter",
+    "planYears": "Plan Years",
+    "managePlanYears": "Manage and organize plans by year",
+    "createPlanYear": "Create Plan Year",
+    "noPlanYears": "No plan years yet",
+    "getStartedPlanYear": "Get started by creating your first plan year",
+    "year": "Year",
+    "name": "Name",
+    "deletePlanYearConfirm": "Are you sure you want to delete the plan year? This action cannot be undone and may affect associated plans.",
+    "editPlanYear": "Edit Plan Year",
+    "updatePlanYear": "Update Plan Year",
+    "updatePlanYearInfo": "Update the plan year information",
+    "createPlanYearInfo": "Create a new plan year to organize your plans",
+    "enterYear": "Enter year (e.g., 2025)",
+    "enterAmharicName": "Enter Amharic name",
+    "enterEnglishName": "Enter English name",
+    "enterAmharicDescription": "Enter Amharic description (optional)",
+    "enterEnglishDescription": "Enter English description (optional)",
+    "services": "Services",
+    "serviceManagement": "Service Management",
+    "createService": "Create Service",
+    "serviceName": "Service Name",
+    "estimatedTime": "Estimated Time",
+    "createdAt": "Created At",
+    "deleteServiceConfirm": "Are you sure you want to delete? This action cannot be undone.",
+    "slug": "Slug",
+    "enterSlug": "Enter slug",
+    "prefix": "Prefix",
+    "enterPrefix": "Enter prefix",
+    "serviceCategoryField": "Service Category",
+    "selectServiceCategory": "Select Service Category",
+    "parentService": "Parent Service (Optional)",
+    "parentServiceOptional": "Parent Service (Optional)",
+    "timeUnit": "Time Unit",
+    "enterEstimatedTime": "Enter estimated time",
+    "updateService": "Update Service",
+    "workingHours": "Working Hours",
+    "workingHoursManagement": "Working Hours Management",
+    "createWorkingHours": "Create Working Hours",
+    "weekDay": "Week Day",
+    "startTime": "Start Time",
+    "endTime": "End Time",
+    "positionServiceId": "Position Service ID",
+    "deleteWorkingHoursConfirm": "Are you sure you want to delete working hours for? This action cannot be undone.",
+    "serviceCategories": "Service Categories",
+    "deleteCategoryConfirm": "Are you sure you want to delete? This action cannot be undone.",
+    "editServiceCategory": "Edit Service Category",
+    "updating": "Updating...",
+    "update": "Update"
+  },
+  "employeePlans": {
+    "title": "My Performance Plans",
+    "description": "Manage your personal performance goals and track progress in real-time",
+    "newPlan": "New Plan",
+    "allPlans": "All Plans",
+    "active": "Active",
+    "completed": "Completed",
+    "drafts": "Drafts",
+    "totalPlans": "Total Number of Plans",
+    "avgProgress": "Avg. Progress",
+    "avgWeight": "Avg. Weight",
+    "completionRate": "Completion Rate",
+    "searchPlans": "Search plans...",
+    "service": "Service",
+    "allServices": "All Services",
+    "status": "Status",
+    "allStatus": "All Status",
+    "draft": "Draft",
+    "pending": "Pending",
+    "accepted": "Accepted",
+    "rejected": "Rejected",
+    "timeframe": "Timeframe",
+    "allTimeframes": "All Timeframes",
+    "daily": "Daily",
+    "weekly": "Weekly",
+    "monthly": "Monthly",
+    "quarterly": "Quarterly",
+    "yearly": "Yearly",
+    "showCompleted": "Show completed plans",
+    "table": "Table",
+    "grid": "Grid",
+    "planName": "Plan Name",
+    "serviceName": "Service Name",
+    "progress": "Progress",
+    "weight": "Weight",
+    "timeFrame": "Time Frame",
+    "statusLabel": "Status",
+    "actions": "Actions",
+    "viewDetails": "View Details",
+    "edit": "Edit",
+    "delete": "Delete",
+    "confirmDelete": "Confirm Delete",
+    "deleteConfirmMessage": "Are you sure you want to delete this employee plan? This action cannot be undone.",
+    "cancel": "Cancel",
+    "deletePlan": "Delete Plan",
+    "deleting": "Deleting...",
+    "createEmployeePlan": "Create Employee Plan",
+    "editEmployeePlan": "Edit Employee Plan",
+    "updateEmployeePlan": "Update Employee Plan",
+    "assignPlanToEmployee": "Assign a plan to an employee with specific targets",
+    "updateEmployeePlanDetails": "Update employee plan assignment and details",
+    "editingMode": "Editing Mode",
+    "creationMode": "Creation Mode",
+    "newEmployeePlanAssignment": "New Employee Plan Assignment",
+    "assignPlanWithTimeframe": "Assign plan to employee with specific timeframe and targets",
+    "modifyPlanDetails": "Modify the employee plan details below",
+    "creatingSubEmployeePlan": "Creating Sub-Employee Plan",
+    "subPlanUnder": "This employee plan will be created under",
+    "assignment": "Assignment",
+    "employeePosition": "Employee Position",
+    "plan": "Plan",
+    "parentEmployeePlan": "Parent Employee Plan",
+    "planDetails": "Plan Details",
+    "planType": "Plan Type",
+    "expectedQuantity": "Expected Quantity",
+    "timeframeContext": "Timeframe Context",
+    "quarter": "Quarter",
+    "enterQuarter": "Enter quarter (1-4)",
+    "month": "Month",
+    "enterMonth": "Enter month (1-12)",
+    "week": "Week",
+    "enterWeek": "Enter week (1-52)",
+    "number": "Number",
+    "percentage": "Percent",
+    "back": "Back",
+    "refresh": "Refresh",
+    "exportStarted": "Export Started",
+    "exportMessage": "Your plans are being exported. You'll receive a download link shortly.",
+    "bulkAction": "Bulk Action",
+    "bulkActionMessage": "action performed on selected items.",
+    "errorLoadingPlans": "Error Loading Plans",
+    "errorMessage": "We encountered an error while loading your performance plans. Please check your connection and try again.",
+    "retry": "Retry",
+    "backToDashboard": "Back to Dashboard",
+    "activePerformanceGoals": "Active performance goals",
+    "averagePlanImportance": "Average plan importance",
+    "loadingPlans": "Loading your performance plans...",
+    "loadingMessage": "Please wait while we fetch your data",
+    "noPlansFound": "No Plans Found",
+    "noPlansMessage": "No plans match your current filters. Try adjusting your search criteria.",
+    "noPlansInitial": "You haven't created any performance plans yet. Start by creating your first plan to track your goals.",
+    "createFirstPlan": "Create Your First Plan",
+    "clearFilters": "Clear Filters",
+    "performancePlans": "Performance Plans",
+    "sortedBy": "Sorted by",
+    "showing": "Showing",
+    "of": "of",
+    "totalPlansText": "total plans",
+    "planMonth": "Plan Month",
+    "created": "Created",
+    "updated": "Updated",
+    "endDate": "End Date",
+    "editPlan": "Edit Plan",
+    "deletePlanAction": "Delete Plan",
+    "exportAsCsv": "Export as CSV",
+    "exportAsPdf": "Export as PDF",
+    "exportAsExcel": "Export as Excel",
+    "export": "Export",
+    "type": "Type",
+    "period": "Period",
+    "clickToViewDetails": "Click to view details",
+    "refreshData": "Refresh Data",
+    "deletePerformancePlan": "Delete Performance Plan",
+    "deletePerformancePlanMessage": "Are you sure you want to delete this performance plan? This action cannot be undone and will permanently remove all associated data.",
+    "deleteSuccess": "Employee plan deleted successfully",
+    "deleteFailed": "Failed to delete employee plan",
+    "yearIdMissing": "Year ID is missing",
+    "navigationError": "Navigation Error",
+    "navigationErrorMessage": "Could not navigate to plan details",
+    "ofCompleted": "of",
+    "noPlansYet": "No plans yet",
+    "getStarted": "Get started by creating your first employee plan",
+    "planUpdatedSuccess": "Employee plan updated successfully",
+    "planCreatedSuccess": "Employee plan created successfully",
+    "planDeleteSuccess": "Employee plan deleted successfully",
+    "planUpdateFailed": "Failed to update employee plan",
+    "planCreateFailed": "Failed to create employee plan",
+    "planDeleteFailed": "Failed to delete employee plan",
+    "noPlans": "No plans available",
+    "editDescription": "Update the details of this employee performance plan",
+    "saving": "Saving...",
+    "updatePlanButton": "Update Plan",
+    "planAssignments": {
+      "title": "Plan Assignments",
+      "description": "Manage monthly performance targets for assigned employees",
+      "backToPlans": "Back to Plans",
+      "assignedEmployees": "Assigned Employees",
+      "totalPlanned": "Total Planned",
+      "planType": "Plan Type",
+      "timeframe": "Timeframe",
+      "search": "Search",
+      "searchPlaceholder": "Search employees or services...",
+      "service": "Service",
+      "allServices": "All Services",
+      "noEmployeeAssignments": "No Employee Assignments",
+      "noEmployeesAssigned": "No employees have been assigned to this plan yet.",
+      "noEmployeesMatch": "No employees match your search criteria.",
+      "monthlyPerformanceTargets": "Monthly Performance Targets",
+      "clickToEdit": "Click on any cell to edit monthly targets. Use bulk edit to update all months at once.",
+      "employee": "Employee",
+      "total": "Total",
+      "status": "Status",
+      "actions": "Actions",
+      "editAll": "Edit All",
+      "save": "Save",
+      "cancel": "Cancel",
+      "number": "Number",
+      "percent": "Percent",
+      "yearly": "Yearly",
+      "quarterly": "Quarterly",
+      "monthly": "Monthly",
+      "weekly": "Weekly",
+      "daily": "Daily",
+      "errorLoadingAssignments": "Error Loading Assignments",
+      "failedToLoadAssignments": "Failed to load employee assignments for this plan. Please try again.",
+      "retry": "Retry",
+      "loadingAssignments": "Loading employee assignments...",
+      "monthlyTargetUpdated": "Monthly target for {month} updated successfully",
+      "allMonthlyTargetsUpdated": "All monthly targets updated successfully",
+      "failedToUpdateTarget": "Failed to update monthly target",
+      "failedToUpdateTargets": "Failed to update monthly targets",
+      "noService": "No Service",
+      "employees": "Employees",
+      "targets": "Targets",
+      "quickSet": "Quick Set",
+      "setAll": "Set All",
+      "setHalf": "Set Half",
+      "clearAll": "Clear All",
+      "bulkEdit": "Bulk Edit",
+      "hasPlanId": "Has Plan ID",
+      "noPlanId": "No Plan ID",
+      "removeAssignment": "Remove Assignment",
+      "months": {
+        "jul": "July",
+        "aug": "August",
+        "sep": "September",
+        "oct": "October",
+        "nov": "November",
+        "dec": "December",
+        "jan": "January",
+        "feb": "February",
+        "mar": "March",
+        "apr": "April",
+        "may": "May",
+        "jun": "June"
+      }
+    }
+  },
+  "planYear": {
+    "title": "Plan Years",
+    "description": "Manage and organize plans by year",
+    "createPlanYear": "Create Plan Year",
+    "editPlanYear": "Edit Plan Year",
+    "updatePlanYear": "Update Plan Year",
+    "noPlanYears": "No plan years yet",
+    "getStarted": "Get started by creating your first plan year",
+    "year": "Year",
+    "nameAmharic": "Name (Amharic)",
+    "nameEnglish": "Name (English)",
+    "descriptionAmharic": "Description (Amharic)",
+    "descriptionEnglish": "Description (English)",
+    "enterYear": "Enter year (e.g., 2025)",
+    "enterAmharicName": "Enter Amharic name",
+    "enterEnglishName": "Enter English name",
+    "enterAmharicDescription": "Enter Amharic description (optional)",
+    "enterEnglishDescription": "Enter English description (optional)",
+    "updatePlanYearInfo": "Update the plan year information",
+    "createPlanYearInfo": "Create a new plan year to organize your plans",
+    "confirmDelete": "Confirm Deletion",
+    "deleteConfirmMessage": "Are you sure you want to delete the plan year? This action cannot be undone and may affect associated plans.",
+    "cancel": "Cancel",
+    "delete": "Delete",
+    "deleting": "Deleting...",
+    "success": "Success",
+    "planYearCreated": "Plan year created successfully",
+    "planYearUpdated": "Plan year updated successfully",
+    "planYearDeleted": "Plan year deleted successfully",
+    "error": "Error",
+    "createFailed": "Failed to create plan year",
+    "updateFailed": "Failed to update plan year",
+    "deleteFailed": "Failed to delete plan year",
+    "loadingError": "Error loading plan years",
+    "loadingErrorMessage": "Failed to load plan years. Please try again.",
+    "retry": "Retry"
+  },
+  "plans": {
+    "title": "Plans",
+    "description": "Manage organizational performance plans",
+    "createPlan": "Create Plan",
+    "createNewPlan": "Create New Plan",
+    "editPlan": "Edit Plan",
+    "updatePlan": "Update Plan",
+    "deletePlan": "Delete Plan",
+    "viewDetails": "View Details",
+    "basicInformation": "Basic Information",
+    "organization": "Organization",
+    "planDetails": "Plan Details",
+    "nameAmharic": "Name (Amharic)",
+    "nameEnglish": "Name (English)",
+    "planNameAmharic": "plan Name Amharic",
+    "planNameEnglish": "Plan Name in English",
+    "descriptionAmharic": "Description (Amharic)",
+    "descriptionEnglish": "Description (English)",
+    "describePlanAmharic": "describe Plan Amharic...",
+    "describePlanEnglish": "Describe the plan in English...",
+    "planYear": "Plan Year",
+    "timeFrame": "Time Frame",
+    "enterTimeFrame": "Enter time frame",
+    "initialGoal": "Initial Goal",
+    "expectedGoal": "Expected Goal",
+    "enterExpectedGoal": "Enter expected goal",
+    "parentPlan": "Parent Plan",
+    "weight": "Weight",
+    "enterWeight": "Enter weight",
+    "month": "Month",
+    "enterMonth": "Enter month",
+    "week": "Week",
+    "enterWeek": "Enter week",
+    "day": "Day",
+    "enterDay": "Enter day",
+    "quarter": "Quarter",
+    "enterQuarter": "Enter quarter",
+    "planType": "Plan Type",
+    "planUpdatedSuccess": "Plan updated successfully!",
+    "planUpdatedSuccessfully": "Plan updated successfully!",
+    "planCreatedSuccess": "Plan created successfully!",
+    "planCreatedSuccessfully": "Plan created successfully!",
+    "planUpdateFailed": "Failed to update plan",
+    "failedToUpdatePlan": "Failed to update plan",
+    "planCreateFailed": "Failed to create plan",
+    "failedToCreatePlan": "Failed to create plan",
+    "planDeleteSuccess": "Plan deleted successfully",
+    "planDeleteFailed": "Failed to delete plan",
+    "confirmDelete": "Confirm Deletion",
+    "deleteConfirmMessage": "Are you sure you want to delete the plan? This action cannot be undone and all associated data will be permanently removed.",
+    "cancel": "Cancel",
+    "deleting": "Deleting...",
+    "back": "Back",
+    "refresh": "Refresh",
+    "exportAll": "Export All",
+    "errorLoadingPlans": "Error Loading Plans",
+    "failedToLoad": "Failed to load plans data. Please try again.",
+    "tryAgain": "Try Again",
+    "noPlansYet": "No plans yet",
+    "getStarted": "Get started by creating your first plan",
+    "editingMode": "Editing Mode",
+    "creationMode": "Creation Mode",
+    "newPerformancePlan": "New Performance Plan",
+    "updatePlanDetails": "Update your performance plan details",
+    "setupNewPlan": "Set up a new performance plan for your organization",
+    "creatingSubPlan": "Creating Sub-Plan",
+    "subPlanDescription": "This plan will be created as a sub-plan under:",
+    "subPlanUnder": "This plan will be created as a sub-plan under",
+    "planAlreadyAccepted": "Plan Already Accepted",
+    "cannotEditAcceptedPlan": "This plan has already been accepted and cannot be edited. Please contact your administrator if you need to make changes.",
+    "quarters": {
+      "q1": "Q1",
+      "q2": "Q2",
+      "q3": "Q3",
+      "q4": "Q4"
+    },
+    "months": {
+      "july": "July",
+      "august": "August",
+      "september": "September",
+      "october": "October",
+      "november": "November",
+      "december": "December",
+      "january": "January",
+      "february": "February",
+      "march": "March",
+      "april": "April",
+      "may": "May",
+      "june": "June"
+    },
+    "weeks": {
+      "week1": "Week 1",
+      "week2": "Week 2",
+      "week3": "Week 3",
+      "week4": "Week 4"
+    },
+    "days": {
+      "monday": "Monday",
+      "tuesday": "Tuesday",
+      "wednesday": "Wednesday",
+      "thursday": "Thursday",
+      "friday": "Friday",
+      "saturday": "Saturday",
+      "sunday": "Sunday"
+    },
+    "Quarterly": "Quarterly",
+    "Yearly": "Yearly",
+    "Monthly": "Monthly",
+    "Weekly": "Weekly",
+    "Daily": "Daily",
+    "Number": "Number",
+    "Percent": "Percent"
+  },
+  "activeCallManagement": {
+    "title": "Active Call Management",
+    "description": "Manage active customer calls and service execution in real-time",
+    "serviceCounter": "Service Counter",
+    "window": "Window",
+    "status": "Status",
+    "active": "Active",
+    "ready": "Ready",
+    "quickActions": "Quick Actions",
+    "commonOperations": "Common customer operations",
+    "callNextCustomer": "Call Next Customer",
+    "calling": "Calling...",
+    "hold": "Hold",
+    "transfer": "Transfer",
+    "customerStats": "Customer Stats",
+    "currentService": "Current Service",
+    "waitTime": "Wait Time",
+    "serviceTime": "Service Time",
+    "priority": "Priority",
+    "readyToServe": "Ready to Serve",
+    "noActiveCustomer": "No active customer at the moment. Call the next customer from the queue to begin service.",
+    "customerCalled": "Customer Called",
+    "waitingAtCounter": "Waiting for customer at counter",
+    "currentlyServing": "Currently Serving",
+    "assistingCustomer": "Assisting customer",
+    "called": "Called",
+    "serving": "Serving",
+    "customer": "Customer",
+    "ticket": "Ticket",
+    "phoneNumber": "Phone Number",
+    "serviceCategoryQueue": "Service Category",
+    "calledAt": "Called At",
+    "urgentPriority": "URGENT PRIORITY",
+    "highPriority": "HIGH PRIORITY",
+    "serviceInformation": "Service Information",
+    "currentServiceDetails": "Current service details and specifications",
+    "service": "Service",
+    "currentlyServingLabel": "Currently Serving",
+    "serviceType": "Service Type",
+    "estimatedTime": "Est. Time",
+    "counter": "Counter",
+    "inProgress": "In Progress",
+    "waiting": "Waiting",
+    "serviceStarted": "Service Started",
+    "customerNotes": "Customer Notes",
+    "timeElapsed": "Time elapsed",
+    "target": "target",
+    "exceedingEstimatedTime": "⚠️ Exceeding estimated time for",
+    "assisting": "Assisting",
+    "waitingAtCounterLabel": "waiting at counter",
+    "ticketCalled": "Ticket Called",
+    "ticketCalledMessage": "has been called to counter",
+    "callFailed": "Call Failed",
+    "callFailedMessage": "Failed to call next ticket",
+    "notSpecified": "Not specified",
+    "minutes": "minutes",
+    "back": "Back",
+    "category": "Category",
+    "normal": "Normal",
+    "urgent": "Urgent",
+    "high": "High",
+    "low": "Low",
+    "customerWaitTime": "Customer Wait Time",
+    "default": "Default",
+    "serviceCategoryCounter": "Service Category",
+    "autoRefresh": "Auto Refresh",
+    "manualRefresh": "Manual Refresh",
+    "lastUpdated": "Last Updated",
+    "disableAutoRefresh": "Disable Auto-refresh",
+    "enableAutoRefresh": "Enable Auto-refresh",
+    "refresh": "Refresh",
+    "realTimeMetrics": "Real-time metrics",
+    "waitingCustomers": "Waiting customers",
+    "realTimeUpdates": "Real-time updates",
+    "justNow": "just now",
+    "timeAgo": "ago",
+    "hours": "hours",
+    "overdue": "Overdue"
+  },
+  "planTable": {
+    "plan": "Plan",
+    "plans": "Plans",
+    "currentYear": "Current Year:",
+    "total": "Total",
+    "position": "Position",
+    "title": "Plan Management",
+    "description": "View and manage organizational plans",
+    "planName": "Plan Name",
+    "planType": "Plan Type",
+    "weight": "Weight",
+    "timeframe": "Timeframe",
+    "status": "Status",
+    "actions": "Actions",
+    "createPlan": "Create Plan",
+    "editPlan": "Edit Plan",
+    "deletePlan": "Delete Plan",
+    "viewDetails": "View Details",
+    "exportAll": "Export All",
+    "refresh": "Refresh",
+    "noPlans": "No Plans Available",
+    "loadingPlans": "Loading plans...",
+    "confirmDelete": "Confirm Delete",
+    "deleteConfirmMessage": "Are you sure you want to delete this plan? This action cannot be undone.",
+    "planDeleted": "Plan deleted successfully",
+    "deleteFailed": "Failed to delete plan",
+    "totalPlans": "Total Plans",
+    "activePlans": "Active Plans",
+    "completedPlans": "Completed Plans",
+    "draftPlans": "Draft Plans",
+    "viewDetailsTooltip": "View details",
+    "editTooltip": "Edit",
+    "deleteTooltip": "Delete",
+    "success": "Success",
+    "error": "Error",
+    "planDeletedSuccessfully": "Plan deleted successfully",
+    "failedToDeletePlan": "Failed to delete plan",
+    "exportStarted": "Export Started",
+    "preparingPlansData": "Preparing plans data for export...",
+    "confirmDeletion": "Confirm Deletion",
+    "deleteConfirmationMessage": "Are you sure you want to delete the plan",
+    "deleteConfirmationWarning": "? This action cannot be undone and all associated data will be permanently removed.",
+    "cancel": "Cancel",
+    "deleting": "Deleting...",
+    "deletePlanButton": "Delete Plan",
+    "backToPlanYears": "Back to Plan Years",
+    "tryAgain": "Try Again",
+    "planManagement": "Plan Management",
+    "planManagementDescription": "Manage and monitor performance plans across your organization",
+    "planFor": "Plan For",
+    "noDescription": "No description",
+    "confirmRequestApproval": "Confirm Request Approval",
+    "requestApprovalMessage": "Are you sure you want to request approval for the plan",
+    "requestApprovalWarning": "? This action cannot be undone and all associated data will be permanently sent for approval.",
+    "requestApprovalTooltip": "Request Approval",
+    "requestApprovalButton": "Request Approval",
+    "totalPlansLabel": "Total Plans",
+    "performancePlansTable": "Performance Plans",
+    "allPlansWeightTooltip": "All plans total 100% weight ✓ Ready for approval",
+    "year": "Year",
+    "parentInformation": "Parent Plan Information",
+    "parentPlan": "Parent Plan",
+    "planInformation": "Plan Information",
+    "myPlans": "My Plans",
+    "myPlansTable": "My Plans",
+    "back": "Back"
+  },
+  "departmentListView": {
+    "title": "Department Overview",
+    "description": "Manage and monitor performance across departments",
+    "departments": "Departments",
+    "department": "Department",
+    "directors": "Directors",
+    "director": "Director",
+    "teamLeaders": "Team Leaders",
+    "teamLeader": "Team Leader",
+    "employees": "Employees",
+    "employee": "Employee",
+    "viewDetails": "View Details",
+    "managePlans": "Manage Plans",
+    "performance": "Performance",
+    "totalMembers": "Total Members",
+    "activePlans": "Active Plans",
+    "completionRate": "Completion Rate",
+    "noData": "No Data Available",
+    "loading": "Loading departments...",
+    "searchDepartments": "Search departments...",
+    "filterByStatus": "Filter by Status",
+    "allStatuses": "All Statuses",
+    "gridView": "Grid View",
+    "listView": "List View",
+    "exportData": "Export Data",
+    "refreshData": "Refresh Data",
+    "back": "Back",
+    "goBack": "Go Back",
+    "errorLoading": "Error Loading",
+    "failedToLoad": "Failed to load",
+    "active": "Active",
+    "export": "Export",
+    "viewSettings": "View Settings",
+    "notificationSettings": "Notification Settings",
+    "helpSupport": "Help & Support",
+    "total": "Total",
+    "acrossAllCategories": "Across all categories",
+    "totalSubPlansCreated": "Total sub-plans created",
+    "avgPerformance": "Avg. Performance",
+    "averageWeightAcrossAll": "Average weight across all",
+    "completionRateDesc": "with plans",
+    "view": "View",
+    "sort": "Sort",
+    "name": "Name",
+    "weight": "Weight",
+    "plans": "Plans",
+    "rank": "Rank",
+    "noPlansBadge": "No Plans",
+    "activeBadge": "Active",
+    "partialBadge": "Partial",
+    "progress": "Progress",
+    "newPlan": "New Plan",
+    "updatedRecently": "Updated recently",
+    "viewDetailsAction": "View Details",
+    "managePermissions": "Manage Permissions",
+    "viewReports": "View Reports",
+    "archive": "Archive",
+    "status": "Status",
+    "actions": "Actions",
+    "all": "All",
+    "teams": "Teams",
+    "mine": "Mine",
+    "noResultsFound": "No Results Found",
+    "noResultsDesc": "match your search for",
+    "tryDifferentSearch": "Try a different search term",
+    "clearSearch": "Clear Search",
+    "confirmRequestApproval": "Confirm Request Approval",
+    "requestApprovalDesc": "Are you sure you want to request approval for the plan, This action cannot be undone and all associated data will be permanently sent for approval.",
+    "cancel": "Cancel",
+    "requestApproval": "Request Approval",
+    "approvalRequesting": "Approval Requesting...",
+    "allPlansTotal100": "All plans total 100% weight ✓ Ready for approval",
+    "approvalRequirementsNotMet": "Approval requirements not met:",
+    "totalWeightMust100": "Total weight must be 100%",
+    "current": "Current",
+    "allDepartmentsMustHavePlans": "All departments must have at least 1 plan",
+    "allPlansMustBeActive": "All plans must be active",
+    "completeAllRequirements": "Complete all requirements",
+    "manageAccess": "Manage Access",
+    "myDepartment": "My Department",
+    "online": "Online"
+  },
+  "subPlanListView": {
+    "departmentOverview": "Department Overview",
+    "departmentDescription": "Manage and monitor performance across departments",
+    "directorOverview": "Director Overview",
+    "directorDescription": "Manage and monitor performance across directors",
+    "teamLeaderOverview": "Team Leader Overview",
+    "teamLeaderDescription": "Manage and monitor performance across team leaders",
+    "employeeOverview": "Employee Overview",
+    "employeeDescription": "Manage and monitor performance across employees",
+    "department": "Department",
+    "departments": "Departments",
+    "director": "Director",
+    "directors": "Directors",
+    "teamLeader": "Team Leader",
+    "teamLeaders": "Team Leaders",
+    "employee": "Employee",
+    "employees": "Employees",
+    "back": "Back",
+    "errorLoading": "Error Loading",
+    "failedToLoad": "Failed to load",
+    "goBack": "Go Back",
+    "noAvailable": "No {type} Available",
+    "noSubPlansToDisplay": "There are no {type}/sub-plans to display for this plan.",
+    "active": "Active",
+    "totalPlans": "Total Plans",
+    "avgWeight": "Avg. Weight",
+    "viewPlans": "View Plans",
+    "createPlan": "Create Plan",
+    "online": "Online"
+  },
+  "planForm": {
+    "title": "Plan Form",
+    "createPlan": "Create New Plan",
+    "editPlan": "Edit Plan",
+    "updatePlan": "Update Plan",
+    "basicInformation": "Basic Information",
+    "planDetails": "Plan Details",
+    "nameAmharic": "Name (Amharic)",
+    "nameEnglish": "Name (English)",
+    "descriptionAmharic": "Description (Amharic)",
+    "descriptionEnglish": "Description (English)",
+    "planType": "Plan Type",
+    "planYear": "Plan Year",
+    "timeframe": "Timeframe",
+    "initialGoal": "Initial Goal",
+    "expectedGoal": "Expected Goal",
+    "weight": "Weight",
+    "parentPlan": "Parent Plan",
+    "position": "Position",
+    "quarter": "Quarter",
+    "month": "Month",
+    "week": "Week",
+    "day": "Day",
+    "selectPlanYear": "Select Plan Year",
+    "selectPosition": "Select Position",
+    "selectTimeframe": "Select Timeframe",
+    "enterNameAmharic": "Enter name in Amharic",
+    "enterNameEnglish": "Enter name in English",
+    "enterDescriptionAmharic": "Enter description in Amharic",
+    "enterDescriptionEnglish": "Enter description in English",
+    "enterInitialGoal": "Enter initial goal",
+    "enterExpectedGoal": "Enter expected goal",
+    "enterWeight": "Enter weight (0-100)",
+    "save": "Save",
+    "cancel": "Cancel",
+    "saving": "Saving...",
+    "planCreated": "Plan created successfully",
+    "planUpdated": "Plan updated successfully",
+    "createFailed": "Failed to create plan",
+    "updateFailed": "Failed to update plan",
+    "requiredField": "This field is required",
+    "invalidWeight": "Weight must be between 0 and 100",
+    "creatingSubPlan": "Creating Sub-Plan",
+    "subPlanUnder": "This plan will be created as a sub-plan under",
+    "editingMode": "Editing Mode",
+    "creationMode": "Creation Mode"
+  },
+  "teamMemberManagement": {
+    "title": "Team Member Management",
+    "description": "Manage team members and their assignments",
+    "teams": "Teams",
+    "teamName": "Team Name",
+    "teamLeader": "Team Leader",
+    "nameAmharic": "Name (Amharic)",
+    "nameEnglish": "Name (English)",
+    "descriptionAmharic": "Description (Amharic)",
+    "descriptionEnglish": "Description (English)",
+    "members": "Members",
+    "status": "Status",
+    "actions": "Actions",
+    "createTeam": "Create Team",
+    "editTeam": "Edit Team",
+    "deleteTeam": "Delete Team",
+    "addMember": "Add Member",
+    "removeMember": "Remove Member",
+    "viewMembers": "View Members",
+    "teamDetails": "Team Details",
+    "memberDetails": "Member Details",
+    "selectTeamLeader": "Select Team Leader",
+    "selectMembers": "Select Members",
+    "teamCreated": "Team created successfully",
+    "teamUpdated": "Team updated successfully",
+    "teamDeleted": "Team deleted successfully",
+    "memberAdded": "Member added successfully",
+    "memberRemoved": "Member removed successfully",
+    "createFailed": "Failed to create team",
+    "updateFailed": "Failed to update team",
+    "deleteFailed": "Failed to delete team",
+    "noTeams": "No teams available",
+    "noMembers": "No members in this team",
+    "loadingTeams": "Loading teams...",
+    "loadingMembers": "Loading members...",
+    "searchTeams": "Search teams...",
+    "filterByStatus": "Filter by Status",
+    "allStatuses": "All Statuses",
+    "active": "Active",
+    "inactive": "Inactive",
+    "archived": "Archived",
+    "totalTeams": "Total Teams",
+    "activeTeams": "Active Teams",
+    "totalMembers": "Total Members",
+    "averagePerformance": "Average Performance",
+    "confirmDelete": "Confirm Delete",
+    "deleteConfirmMessage": "Are you sure you want to delete this team? This action cannot be undone.",
+    "selectValidLeader": "Please select a valid team leader",
+    "selectTeamMember": "Please select a team member",
+    "tableView": "Table",
+    "gridView": "Grid View",
+    "sortBy": "Sort By",
+    "name": "Name",
+    "performance": "Performance",
+    "date": "Date",
+    "ascending": "Ascending",
+    "descending": "Descending",
+    "showArchived": "Show Archived",
+    "refresh": "Refresh",
+    "export": "Export",
+    "unknownMember": "Unknown Member",
+    "membersRemovedSuccessfully": "team members removed successfully",
+    "activePerformanceTeams": "Active performance teams",
+    "currentlyActive": "Currently active",
+    "cancel": "Cancel",
+    "createPlan": "Create Plan",
+    "updatePlan": "Update Plan",
+    "planDetails": "Plan Details",
+    "planForm": "Plan Form",
+    "planCreated": "Plan created successfully",
+    "planUpdated": "Plan updated successfully",
+    "createPlanTitle": "Create a new performance team",
+    "editPlanTitle": "Update team information",
+    "planName": "Plan Name",
+    "planDescription": "Plan Description",
+    "selectPlan": "Select Plan",
+    "noPlanSelected": "No plan selected",
+    "planRequired": "Plan is required",
+    "enterPlanName": "Enter plan name",
+    "enterPlanDescription": "Enter plan description",
+    "planNameRequired": "Plan name is required",
+    "planDescriptionRequired": "Plan description is required",
+    "savePlan": "Save Plan",
+    "savingPlan": "Saving plan...",
+    "planSaved": "Plan saved successfully",
+    "planSaveFailed": "Failed to save plan",
+    "discardChanges": "Discard Changes",
+    "unsavedChanges": "You have unsaved changes. Are you sure you want to cancel?",
+    "confirmCancel": "Confirm Cancel",
+    "manageTeamMembers": "Manage Team Members",
+    "currentTeamMembers": "Current Team Members",
+    "addNewTeamMember": "Add New Team Member",
+    "addMembers": "Add Members",
+    "viewDetails": "View Details",
+    "noMembersAdded": "No team members added yet",
+    "addMembersInstruction": "Add members using the form below",
+    "performanceTeams": "Performance Teams",
+    "createFirstTeam": "Create Your First Team",
+    "teamMember": "Team Member",
+    "teamMembers": "Team Members"
+  },
+  "serviceCategory": {
+    "title": "Service Categories",
+    "description": "Description",
+    "createNew": "Create New Category",
+    "createTitle": "Create Service Category",
+    "createDescription": "Add a new service category to organize your services",
+    "editTitle": "Edit Service Category",
+    "editDescription": "Update the service category information",
+    "loading": "Loading service categories...",
+    "slug": "Category Slug",
+    "slugPlaceholder": "e.g., customer-support",
+    "slugDescription": "Unique identifier for the category (lowercase, numbers, and hyphens only)",
+    "slugRequired": "Category slug is required",
+    "slugFormat": "Slug must contain only lowercase letters, numbers, and hyphens",
+    "nameEn": "Name (English)",
+    "nameEnPlaceholder": "Enter category name in English",
+    "nameEnRequired": "English name is required",
+    "nameAm": "Name (Amharic)",
+    "nameAmPlaceholder": "Enter category name in Amharic",
+    "nameAmRequired": "Amharic name is required",
+    "descriptionEn": "Description (English)",
+    "descriptionEnPlaceholder": "Enter category description in English",
+    "descriptionEnRequired": "English description is required",
+    "descriptionAm": "Description (Amharic)",
+    "descriptionAmPlaceholder": "Enter category description in Amharic",
+    "descriptionAmRequired": "Amharic description is required",
+    "name": "Name",
+    "createdAt": "Created Date",
+    "totalCategories": "Total Categories",
+    "activeCategories": "Active Categories",
+    "searchResults": "Search Results",
+    "searchAndFilter": "Search & Filter",
+    "searchPlaceholder": "Search by name, slug, or description...",
+    "categoriesList": "Categories List",
+    "noCategories": "No Categories Found",
+    "noSearchResults": "No Search Results",
+    "tryDifferentSearch": "Try a different search term",
+    "createFirstCategory": "Create your first service category to get started",
+    "deleteTitle": "Delete Service Category",
+    "deleteConfirmation": "Are you sure you want to delete '{{name}}'? This action cannot be undone.",
+    "createCategory": "Create Category",
+    "updateCategory": "Update Category",
+    "createSuccess": "Service category created successfully",
+    "updateSuccess": "Service category updated successfully",
+    "createError": "Failed to create service category",
+    "updateError": "Failed to update service category",
+    "deleteSuccess": "Deleted",
+    "deleteSuccessMessage": "Service category deleted successfully",
+    "deleteError": "Failed to delete service category",
+    "loadError": "Failed to load service categories",
+    "organizationRequired": "Organization ID is required",
+    "validation": {
+      "nameEnRequired": "English name is required",
+      "nameAmRequired": "Amharic name is required",
+      "nameMaxLength": "Name must be 100 characters or less",
+      "descriptionEnRequired": "English description is required",
+      "descriptionAmRequired": "Amharic description is required",
+      "descriptionMaxLength": "Description must be 500 characters or less"
+    }
+  },
+  "services": {
+    "title": "Service Management",
+    "serviceName": "Service Name",
+    "description": "Description",
+    "estimatedTime": "Estimated Time",
+    "createdAt": "Created At",
+    "viewDetails": "View details",
+    "createService": "Create Service",
+    "exportAll": "Export All",
+    "exporting": "Exporting",
+    "preparingData": "Preparing service data...",
+    "loadError": "Failed to load services",
+    "deleteTitle": "Confirm Deletion",
+    "deleteConfirmation": "Are you sure you want to delete \"{{name}}\"? This action cannot be undone.",
+    "deleteSuccess": "Deleted",
+    "deleteSuccessMessage": "Service deleted successfully",
+    "deleteError": "Failed to delete service",
+    "slug": "Slug",
+    "enterSlug": "Enter slug",
+    "prefix": "Prefix",
+    "enterPrefix": "Enter prefix",
+    "serviceCategoryField": "Service Category",
+    "selectServiceCategory": "Select Service Category",
+    "parentService": "Parent Service (Optional)",
+    "parentServiceOptional": "Parent Service (Optional)",
+    "nameAm": "Name (Amharic)",
+    "nameAmPlaceholder": "Enter Amharic name",
+    "nameEn": "Name (English)",
+    "nameEnPlaceholder": "Enter English name",
+    "descriptionAm": "Description (Amharic)",
+    "descriptionAmPlaceholder": "Enter Amharic description",
+    "descriptionEn": "Description (English)",
+    "descriptionEnPlaceholder": "Enter English description",
+    "enterEstimatedTime": "Enter estimated time",
+    "timeUnit": "Time Unit",
+    "updateService": "Update Service",
+    "editTitle": "Edit Service",
+    "editDescription": "Update the service information",
+    "createTitle": "Create Service",
+    "createDescription": "Add a new service to your organization",
+    "updateSuccess": "Service updated successfully",
+    "createSuccess": "Service created successfully",
+    "updateError": "Failed to update service",
+    "createError": "Failed to create service",
+    "basicInformation": "Basic Information",
+    "serviceDetails": "Service Details",
+    "timeConfiguration": "Time Configuration",
+    "timeUnits": {
+      "minutes": "Minutes",
+      "hours": "Hours",
+      "days": "Days",
+      "weeks": "Weeks",
+      "months": "Months"
+    },
+    "validation": {
+      "nameAmRequired": "Amharic name is required",
+      "nameEnRequired": "English name is required",
+      "nameMaxLength": "Name must be 100 characters or less",
+      "descriptionAmRequired": "Amharic description is required",
+      "descriptionEnRequired": "English description is required",
+      "descriptionMaxLength": "Description must be 500 characters or less",
+      "organizationRequired": "Organization is required",
+      "categoryRequired": "Service category is required",
+      "estimatedTimeMin": "Estimated time must be at least 1",
+      "estimatedTimeMax": "Estimated time cannot exceed 1440 minutes (24 hours)"
+    }
+  },
+  "planYearList": {
+    "title": "Plan Years",
+    "description": "Manage and organize plans by year",
+    "createPlanYear": "Create Plan Year",
+    "noPlanYears": "No plan years yet",
+    "getStarted": "Get started by creating your first plan year",
+    "confirmDeletion": "Confirm Deletion",
+    "deleteConfirmation": "Are you sure you want to delete the plan year \"{{year}} - {{name}}\"? This action cannot be undone and may affect associated plans.",
+    "deleting": "Deleting...",
+    "delete": "Delete",
+    "edit": "Edit",
+    "active": "Active",
+    "viewPlans": "View Plans"
+  },
+  "performanceDashboard": {
+    "title": "Performance Management Dashboard",
+    "description": "Comprehensive performance analytics and insights"
+  },
+  "okrDashboard": {
+    "brandEyebrow": "Objective Intelligence",
+    "title": "OKR Performance Dashboard",
+    "description": "A focused overview of top performance, department momentum, and upcoming OKR analytics.",
+    "planYear": "Plan Year",
+    "notSelected": "Not selected",
+    "topPerformerEmployee": "Top Performer Employee",
+    "topPerformerDepartment": "Top Performer Department",
+    "employeePlaceholderName": "Awaiting API data",
+    "departmentPlaceholderName": "Awaiting API data",
+    "employeeHelper": "The leading employee will appear here once the dashboard API is connected.",
+    "departmentHelper": "The highest performing department will appear here once the dashboard API is connected.",
+    "employeeScore": "Employee score",
+    "departmentScore": "Department score",
+    "placeholderOneTitle": "Strategic Signal",
+    "placeholderOneHelper": "Reserved for the next OKR insight from the analytics API.",
+    "placeholderTwoTitle": "Execution Health",
+    "placeholderTwoHelper": "Reserved for rollout, risk, or completion insight.",
+    "comingSoon": "Coming soon",
+    "waitingForApi": "Waiting for API",
+    "analyticsTitle": "OKR Analytics",
+    "analyticsDescription": "Select a date range and chart type to preview the dashboard visualization.",
+    "dateRange": "Date Range",
+    "chartType": "Chart Type",
+    "thisMonth": "This Month",
+    "thisQuarter": "This Quarter",
+    "thisYear": "This Year",
+    "customRange": "Custom Range",
+    "barChart": "Bar Chart",
+    "lineChart": "Line Chart",
+    "areaChart": "Area Chart",
+    "chartTitle": "Performance Trend",
+    "chartSubtitle": "Sample data is displayed until the API response is ready.",
+    "sampleData": "Sample Data",
+    "achievement": "Achievement",
+    "target": "Target",
+    "total": "Total",
+    "noProgressData": "No progress data found",
+    "expected": "Expected",
+    "current": "Current",
+    "noMonthlyProgress": "No monthly progress found",
+    "reportFilters": "Report filters",
+    "reportFiltersCollapsedDescription": "Use filters to drill into timeframe, year, position, or employee metrics.",
+    "filters": "Filters",
+    "positionId": "Position ID",
+    "positionIdPlaceholder": "positionId",
+    "employeePositionId": "Employee position ID",
+    "employeePositionIdPlaceholder": "employeePositionId",
+    "employeeId": "Employee ID",
+    "employeeIdPlaceholder": "employeeId",
+    "timeframe": "Timeframe",
+    "selectTimeframe": "Select timeframe",
+    "year": "Year",
+    "yearPlaceholder": "year",
+    "month": "Month",
+    "monthPlaceholder": "month",
+    "week": "Week",
+    "weekPlaceholder": "week",
+    "monthlyDetailProgress": "Monthly detail task progress",
+    "monthlyDetailProgressDescription": "Recent monthly progress entries by task and position",
+    "currentWeightSum": "Current weight",
+    "currentWeightSumHelper": "Total current weight reported",
+    "goalCount": "Goals",
+    "goalCountHelper": "Total goals in this plan year",
+    "majorTaskCount": "Major tasks",
+    "majorTaskCountHelper": "Major tasks connected to goals",
+    "detailTaskCount": "Detail tasks",
+    "detailTaskCountHelper": "Detail tasks assigned in this plan year",
+    "goalProgress": "Goal progress",
+    "goalProgressDescription": "Top goals by current progress",
+    "progress": "Progress",
+    "noGoalsFound": "No goals found",
+    "majorTaskProgress": "Major task progress",
+    "majorTaskProgressDescription": "Major tasks and their reported progress",
+    "noMajorTaskProgress": "No major task progress found",
+    "positionProgress": "Position progress",
+    "positionProgressDescription": "Top positions by current progress",
+    "noPositionProgress": "No position progress found",
+    "monthlyProgress": "Monthly progress",
+    "monthlyProgressDescription": "Expected and current values by month",
+    "goals": "Goals",
+    "goalsDescription": "Goals included in the report",
+    "weight": "Weight",
+    "majorTasks": "Major tasks",
+    "achievementTotal": "Achievement total",
+    "achievementTotalHelper": "Total achievement reported for your tasks",
+    "detailTaskStatusProgress": "Detail task status progress",
+    "detailTaskStatusProgressDescription": "Detail task totals grouped by status",
+    "detailTaskProgress": "Detail task progress",
+    "detailTaskProgressDescription": "Detail tasks and their reported progress",
+    "noDetailTasksFound": "No detail tasks found",
+    "progressOnMonths": "Progress on months",
+    "progressOnMonthsDescription": "Expected versus current values by month",
+    "currentWeight": "Current weight",
+    "overallAchievement": "Overall achievement",
+    "overallAchievementHelper": "Sum of reported goal achievements",
+    "employeeCount": "Employees",
+    "employeeCountHelper": "Employees participating in detail tasks",
+    "overallGoalProgress": "Overall goal progress",
+    "overallGoalProgressDescription": "Goal totals grouped by status",
+    "teamProgress": "Team progress",
+    "teamProgressDescription": "Team progress by position",
+    "noTeamProgress": "No team progress found",
+    "employeeProgress": "Employee progress",
+    "employeeProgressDescription": "Current plan-year weight by employee",
+    "noEmployeeProgress": "No employee progress found",
+    "exportPdfSuccess": "Dashboard exported as PDF.",
+    "exportPdfFailed": "Failed to export dashboard as PDF.",
+    "printFailed": "Failed to print dashboard.",
+    "overallProgress": "Overall progress",
+    "overallProgressHelper": "Average detail task progress",
+    "noPlanYear": "Please select a plan year to view the dashboard.",
+    "positionVariantPending": "Dashboard variant pending",
+    "positionVariantPendingDescription": "This position type does not have an OKR dashboard endpoint wired yet.",
+    "teamLeadDashboard": "Team Lead dashboard",
+    "employeeDashboard": "Employee dashboard",
+    "directorDashboard": "Director dashboard",
+    "deputyDashboard": "Deputy dashboard",
+    "teamLeadDescription": "Detail task progress, employee contribution, and reporting trends for the selected plan year.",
+    "employeeDescription": "Your detail task status, achievement total, and monthly progress for the selected plan year.",
+    "loadError": "Unable to load dashboard data."
+  },
+  "sectorListView": {
+    "title": "Sector Overview",
+    "description": "Manage and monitor performance across all sectors",
+    "noSectorsAvailable": "No Sectors Available",
+    "noSectorsMessage": "There are no sectors to display at this time. Sectors will appear here once they are added to the system.",
+    "sectorsActive": "Sectors Active",
+    "sector": "Sector",
+    "sectors": "Sectors",
+    "totalPlans": "Total Plans",
+    "avgWeight": "Avg. Weight",
+    "activeSectors": "Active Sectors",
+    "plans": "Plans",
+    "weight": "Weight",
+    "active": "Active",
+    "online": "Online",
+    "performanceSummary": "Performance Summary",
+    "performanceSummaryDescription": "All sectors are actively monitored and updated in real-time",
+    "onTrack": "On Track",
+    "needsAttention": "Needs Attention",
+    "atRisk": "At Risk"
+  },
+  "goals": {
+    "title": "Goals Management",
+    "createGoal": "Create Goal",
+    "editGoal": "Edit Goal",
+    "updateGoal": "Update Goal",
+    "goalCreated": "Goal created successfully",
+    "goalUpdated": "Goal updated successfully",
+    "goalDeleted": "Goal deleted successfully",
+    "deleteFailed": "Failed to delete goal",
+    "saveFailed": "Failed to save goal",
+    "confirmDelete": "Confirm Deletion",
+    "deleteConfirmation": "Are you sure you want to delete this goal? This action cannot be undone.",
+    "deleteWarning": "All associated data will be permanently removed.",
+    "noGoals": "No goals found",
+    "noGoalsFound": "No Goals Found",
+    "getStarted": "Get started by creating your first goal",
+    "createFirstGoal": "Create Your First Goal",
+    "noResultsWithFilters": "No goals match your current filters. Try adjusting your search criteria.",
+    "totalGoals": "Total Goals",
+    "totalWeight": "Total Weight",
+    "uniquePositions": "Unique Positions",
+    "all": "All",
+    "positions": "Positions",
+    "nameAmharic": "Name (Amharic)",
+    "nameEnglish": "Name (English)",
+    "descriptionAmharic": "Description (Amharic)",
+    "descriptionEnglish": "Description (English)",
+    "enterNameAmharic": "Enter goal name in Amharic",
+    "enterNameEnglish": "Enter goal name in English",
+    "enterDescriptionAmharic": "Enter description in Amharic",
+    "enterDescriptionEnglish": "Enter description in English",
+    "planYear": "Plan Year",
+    "selectPosition": "Select a position",
+    "weight": "Weight",
+    "weightDescription": "Percentage weight for this goal (0-100)",
+    "searchPlaceholder": "Search goals by name or description...",
+    "filterByPosition": "Filter by position",
+    "allPositions": "All Positions",
+    "formDescription": "Define goals and assign weights to track performance",
+    "success": "Success",
+    "position": "Position",
+    "ownerPosition": "Owner Position",
+    "weightPercentage": "Weight (%)",
+    "actions": "Actions",
+    "view": "View",
+    "edit": "Edit",
+    "delete": "Delete",
+    "goalDetails": "Goal Details",
+    "name": "Goal Name",
+    "description": "Description",
+    "owner": "Owner",
+    "goalNotFound": "Goal not found",
+    "Totalweight": "Total Weight",
+    "Remaining": "Remaining Weight",
+    "noDescription": "No description provided",
+    "hasMajorTasks": "This goal has {{count}} major task(s) associated with it",
+    "weightRange": "0-100"
+  },
+  "majorTask": {
+    "participants": "Participants",
+    "manageParticipants": "Manage Participants",
+    "addParticipant": "Add Participant",
+    "editParticipant": "Edit Participant",
+    "updateParticipant": "Update Participant",
+    "participantCreated": "Participant added successfully",
+    "participantUpdated": "Participant updated successfully",
+    "participantDeleted": "Participant removed successfully",
+    "participantDeleteFailed": "Failed to remove participant",
+    "participantSaveFailed": "Failed to save participant",
+    "confirmDeleteParticipant": "Remove Participant",
+    "participantDeleteConfirmation": "Are you sure you want to remove this participant from the task?",
+    "employee": "Employee",
+    "position": "Position",
+    "selectEmployee": "Select Employee",
+    "selectPosition": "Select Position",
+    "availableWeight": "Available Weight",
+    "weightExceedsAvailable": "Weight exceeds available allocation",
+    "maxAvailable": "Max Available",
+    "entered": "Entered",
+    "participantRoleDescription": "Describe the participant's role in this task",
+    "participantFormDescription": "Assign an employee to this task with specific weight allocation",
+    "noParticipants": "No Participants",
+    "noParticipantsFound": "No participants found with current filters",
+    "addFirstParticipant": "Add First Participant",
+    "searchParticipants": "Search participants...",
+    "taskWeight": "Task Weight",
+    "allocatedWeight": "Allocated Weight",
+    "overAllocatedWarning": "Warning: Total participant weight exceeds 100%",
+    "remainingWeight": "Remaining Weight",
+    "participantWeight": "Participant Weight",
+    "details": "Details",
+    "taskDetails": "Task Details",
+    "title": "Major Tasks",
+    "search": "Search",
+    "createMajorTask": "Create Major Task",
+    "editMajorTask": "Edit Major Task",
+    "updateMajorTask": "Update Major Task",
+    "majorTaskCreated": "Major task created successfully",
+    "majorTaskUpdated": "Major task updated successfully",
+    "majorTaskDeleted": "Major task deleted successfully",
+    "deleteFailed": "Failed to delete major task",
+    "saveFailed": "Failed to save major task",
+    "confirmDelete": "Confirm Deletion",
+    "deleteConfirmation": "Are you sure you want to delete this major task? This action cannot be undone.",
+    "deleteWarning": "All associated data will be permanently removed.",
+    "noMajorTasks": "No major tasks found",
+    "noMajorTasksFound": "No Major Tasks Found",
+    "getStarted": "Get started by creating your first major task",
+    "createFirstTask": "Create Your First Major Task",
+    "noResultsWithFilters": "No major tasks match your current filters. Try adjusting your search criteria.",
+    "totalTasks": "Total Tasks",
+    "totalWeight": "Total Weight",
+    "remaining": "Remaining",
+    "selectGoal": "Select Goal",
+    "filterByGoal": "filterByGoal",
+    "Search": "Search",
+    "tasks": "Tasks",
+    "nameAmharic": "Name (Amharic)",
+    "nameEnglish": "Name (English)",
+    "descriptionAmharic": "Description (Amharic)",
+    "descriptionEnglish": "Description (English)",
+    "enterNameAmharic": "Enter task name in Amharic",
+    "enterNameEnglish": "Enter task name in English",
+    "enterDescriptionAmharic": "Enter description in Amharic",
+    "enterDescriptionEnglish": "Enter description in English",
+    "goal": "Goal",
+    "loadingGoal": "Loading goal...",
+    "weight": "Weight",
+    "weightDescription": "Based on Goal: Percentage weight for this task (0-100)",
+    "weightFromPlanYear": "Weight from Plan Year (%)",
+    "searchPlaceholder": "Search major tasks by name or description...",
+    "formDescription": "Define major tasks and assign weights to track performance",
+    "success": "Success",
+    "forGoal": "For Goal",
+    "goalWeight": "Goal Weight",
+    "goalDescription": "The goal this task is assigned to",
+    "participant": "Participants",
+    "uniquePositions": "Unique Positions",
+    "all": "All",
+    "positions": "Positions",
+    "ownerPosition": "Owner Position",
+    "weightPercentage": "Weight (%)",
+    "actions": "Actions",
+    "view": "View",
+    "edit": "Edit",
+    "delete": "Delete",
+    "created": "Created",
+    "organization": "Organization",
+    "basicInformation": "Basic Information",
+    "deleting": "Deleting...",
+    "cancel": "Cancel",
+    "clear": "Clear",
+    "refresh": "Refresh",
+    "error": "Error",
+    "filters": "Filters",
+    "saving": "Saving...",
+    "averageWeight": "Average Weight",
+    "adjustWeights": "Please adjust task weights so the total does not exceed 100%",
+    "participantCount": "Participants",
+    "forTask": "For Task",
+    "majorTaskNotFound": "Major task not found",
+    "parentGoal": "Parent Goal",
+    "weightFromPlanYearDesc": "The weight allocated from the parent plan year",
+    "backToGoal": "Back to Goal",
+    "backToGoals": "Back to Goals",
+    "navigation": "Navigation",
+    "additionalInfo": "Additional Information",
+    "noDescription": "No description provided",
+    "totalParticipants": "Total Participants",
+    "totalAllocated": "Total Allocated",
+    "efficiency": "Efficiency",
+    "weightAllocation": "Weight Allocation",
+    "allocated": "Allocated",
+    "distribution": "Distribution",
+    "highWeight": "High Weight",
+    "mediumWeight": "Medium Weight",
+    "lowWeight": "Low Weight",
+    "filterByWeight": "Filter by weight",
+    "allWeights": "All Weights",
+    "showing": "Showing",
+    "of": "of",
+    "loadError": "Failed to load participants. Please try again.",
+    "retry": "Retry",
+    "progress": "Progress",
+    "ofGoal": "of Goal",
+    "completed": "Completed",
+    "description": "Description",
+    "unknownTask": "Unknown Task",
+    "taskLoadError": "Failed to load task details",
+    "status": {
+      "draft": "Draft",
+      "active": "Active",
+      "completed": "Completed",
+      "archived": "Archived"
+    },
+    "avg": "Avg",
+    "unnamedGoal": "Unnamed Goal",
+    "participantIdMissing": "Cannot update: participant id is missing."
+  },
+  "okrReport": {
+    "title": "OKR Reports",
+    "subtitle": "Manage report periods (weekly, monthly, yearly)",
+    "createReport": "Create Report Period",
+    "editReport": "Edit Report Period",
+    "updateReport": "Update Report Period",
+    "reportDetails": "Report Details",
+    "formDescription": "Create a new report period",
+    "frame": "Timeframe",
+    "selectTimeframe": "Select timeframe",
+    "timeframe": {
+      "weekly": "Weekly",
+      "monthly": "Monthly",
+      "yearly": "Yearly"
+    },
+    "Number": "Number",
+    "Daily": "Daily",
+    "allTimeframes": "All Timeframes",
+    "year": "Year",
+    "selectYear": "Select year",
+    "allYears": "All Years",
+    "month": "Month",
+    "selectMonth": "Select month",
+    "allMonths": "All Months",
+    "week": "Week",
+    "selectWeek": "Select week",
+    "allWeeks": "All Weeks",
+    "period": "Period",
+    "dateRange": "Date Range",
+    "to": "to",
+    "detailsCount": "Details Count",
+    "details": "details",
+    "viewDetails": "View Details",
+    "searchPlaceholder": "Search reports...",
+    "noReportsFound": "No reports found",
+    "noResultsWithFilters": "No reports found with selected filters",
+    "getStarted": "Get started by creating your first report period",
+    "createFirstReport": "Create First Report Period",
+    "success": "Success",
+    "createdSuccessfully": "Report period created successfully",
+    "updatedSuccessfully": "Report period updated successfully",
+    "deletedSuccessfully": "Report period deleted successfully",
+    "createFailed": "Failed to create report period",
+    "updateFailed": "Failed to update report period",
+    "deleteFailed": "Failed to delete report period",
+    "saveFailed": "Failed to save report period",
+    "confirmDelete": "Confirm Delete",
+    "deleteConfirmation": "Are you sure you want to delete this report period and all its details?",
+    "deleteWarning": "This action cannot be undone.",
+    "yearlyReportInfo": "Yearly reports don't require specific month or week"
+  },
+  "okrReportDetail": {
+    "title": "Report Details",
+    "createDetail": "Add Report Detail",
+    "editDetail": "Edit Report Detail",
+    "updateDetail": "Update Report Detail",
+    "formDescription": "Add details for this report period",
+    "detailTask": "Detail Task",
+    "selectTask": "Select detail task",
+    "unknownTask": "Unknown Task",
+    "remarks": "Remarks",
+    "remarksPlaceholder": "Enter your remarks here...",
+    "addDetail": "Add Detail",
+    "createFirstDetail": "Create First Detail",
+    "noDetailsFound": "No details found",
+    "getStarted": "Get started by adding your first detail",
+    "failedToLoadTasks": "Failed to load detail tasks",
+    "success": "Success",
+    "createdSuccessfully": "Report detail created successfully",
+    "updatedSuccessfully": "Report detail updated successfully",
+    "deletedSuccessfully": "Report detail deleted successfully",
+    "createFailed": "Failed to create report detail",
+    "updateFailed": "Failed to update report detail",
+    "deleteFailed": "Failed to delete report detail",
+    "saveFailed": "Failed to save report detail",
+    "confirmDelete": "Confirm Delete",
+    "deleteConfirmation": "Are you sure you want to delete this report detail?",
+    "deleteWarning": "This action cannot be undone.",
+    "details": "details"
+  },
+  "achievement": {
+    "title": "Achievements",
+    "subtitle": "Track and manage your achievements",
+    "createAchievement": "Create Achievement",
+    "editAchievement": "Edit Achievement",
+    "updateAchievement": "Update Achievement",
+    "achievementDetails": "Achievement Details",
+    "formDescription": "Add a new achievement record",
+    "expectation": "Expectation",
+    "selectExpectation": "Select expectation",
+    "expectationRequired": "Expectation is required",
+    "value": "Value",
+    "valueRequired": "Value is required",
+    "valuePositive": "Value must be positive",
+    "valuePlaceholder": "Enter achievement value",
+    "valueExceedsTarget": "Value cannot exceed target value of {target}",
+    "remark": "Remark",
+    "remarkRequired": "Remark is required",
+    "remarkPlaceholder": "Enter remarks about this achievement...",
+    "noRemark": "No remarks provided",
+    "target": "Target",
+    "current": "Current",
+    "afterAdd": "After adding",
+    "remaining": "remaining",
+    "progress": "Progress",
+    "units": "units",
+    "targetValue": "Target Value",
+    "expectationDescription": "Expectation Description",
+    "createdBy": "Created By",
+    "unknownExpectation": "Unknown Expectation",
+    "totalAchievements": "Total Achievements",
+    "totalValue": "Total Value",
+    "averageValue": "Average Value",
+    "last30Days": "Last 30 Days",
+    "total": "Total",
+    "average": "Average",
+    "recent": "Recent",
+    "searchPlaceholder": "Search achievements...",
+    "valueRange": "Value Range",
+    "selectValueRange": "Select value range",
+    "startDate": "Start Date",
+    "selectStartDate": "Select start date",
+    "endDate": "End Date",
+    "selectEndDate": "Select end date",
+    "allExpectations": "All Expectations",
+    "allValues": "All Values",
+    "highValue": "High Value",
+    "mediumValue": "Medium Value",
+    "lowValue": "Low Value",
+    "noAchievementsFound": "No achievements found",
+    "noResultsWithFilters": "No achievements found with selected filters",
+    "getStarted": "Get started by creating your first achievement",
+    "createFirstAchievement": "Create First Achievement",
+    "success": "Success",
+    "createdSuccessfully": "Achievement created successfully",
+    "updatedSuccessfully": "Achievement updated successfully",
+    "deletedSuccessfully": "Achievement deleted successfully",
+    "createFailed": "Failed to create achievement",
+    "updateFailed": "Failed to update achievement",
+    "deleteFailed": "Failed to delete achievement",
+    "saveFailed": "Failed to save achievement",
+    "confirmDelete": "Confirm Delete",
+    "deleteConfirmation": "Are you sure you want to delete this achievement?",
+    "deleteWarning": "This action cannot be undone.",
+    "trackingTitle": "Achievement Tracking",
+    "trackingDescription": "Track achievements against weekly expectations. Click on cells to add achievements.",
+    "expectationsAndAchievements": "Expectations & Achievements",
+    "tableDescription": "Set weekly expectations and track achievements in one place",
+    "noTasks": "No detail tasks found. Please set expectations first.",
+    "instruction1": "Use quarter tabs to navigate between quarters",
+    "instruction2": "Click on cells with expectations to expand and add achievements",
+    "instruction3": "Future weeks are locked",
+    "instruction3Detail": "You can only add achievements for current and past weeks",
+    "instruction4": "Use scroll buttons or drag to navigate horizontally",
+    "instruction5": "Hover over cells for detailed information",
+    "instruction6": "Click fullscreen button for better viewing experience",
+    "noExpectationsMade": "No expectations made. Please set up expectations first.",
+    "emptyExpectation": "Empty expectation",
+    "monthlySubtitle": "Track and manage your monthly achievements against goals",
+    "monthlyTracking": "Monthly Achievement Tracking",
+    "monthlyTrackingTitle": "Monthly Achievement Tracking",
+    "monthlyTrackingDescription": "Track achievements against monthly expectations. Click on cells to add achievements.",
+    "weeklyTracking": "Weekly Achievement Tracking",
+    "weeklyTrackingDescription": "Weekly progress tracking and achievement details",
+    "trackingTable": "Achievement Tracking",
+    "goals": "Goals",
+    "achievements": "Achievements",
+    "expectations": "Expectations",
+    "completion": "Completion",
+    "pending": "Pending",
+    "completionExceeded": "100+",
+    "savingSingle": "Saving achievement...",
+    "carriedToCurrentWeek": "Recorded in current week",
+    "carriedFromWeekMessage": "This achievement is for work done in {{period}} and will be saved under the current week ({{currentPeriod}}).",
+    "noExpectationForCurrentWeek": "Current week has no expectation. You can only add achievements for unfilled passed weeks.",
+    "allPastWeeksHaveEntry": "Each passed week with expectation already has an achievement entry.",
+    "exceedsPassedWeekExpectation": "Achievement exceeds the passed week expectation ({{limit}}).",
+    "exceedsExpectationLimit": "Achievement exceeds the week expectation ({{limit}}).",
+    "pastWeekLocked": "Passed week locked",
+    "pastWeekCardClickMessage": "You cannot add achievement in passed week. Please use the current week.",
+    "pastWeekHint": "Week passed — Add Achievement is disabled for this week. Use current week.",
+    "pastWeeksWithExpectation": "Passed weeks with expectation:",
+    "carriedFromWeeks": "Carried from passed weeks:",
+    "pastWeekBanner": "This week has passed. Add Achievement is disabled here. Please add it in the current week.",
+    "pastWeekAddDisabled": "You cannot add achievement in passed week. Add it in the current week.",
+    "confirmDeleteTitle": "Delete achievement",
+    "confirmDeleteNew": "Remove this unsaved achievement?",
+    "confirmDeleteSavedNow": "This will delete the achievement immediately."
+  },
+  "additionalTask": {
+    "title": "Additional Tasks",
+    "createNew": "Create Additional Task",
+    "createTitle": "Create Additional Task",
+    "editTitle": "Edit Additional Task",
+    "noTasks": "No additional tasks found.",
+    "timeSpan": "Time Span",
+    "yearly": "Yearly",
+    "quarterly": "Quarterly",
+    "monthly": "Monthly",
+    "weekly": "Weekly",
+    "daily": "Daily",
+    "basicInformation": "Basic Information",
+    "configuration": "Configuration",
+    "participants": "Participants",
+    "nameAmharic": "Name (Amharic)",
+    "nameEnglish": "Name (English)",
+    "descriptionAmharic": "Description (Amharic)",
+    "descriptionEnglish": "Description (English)",
+    "deleteConfirmTitle": "Delete task?",
+    "deleteConfirmDescription": "This action cannot be undone.",
+    "createSuccess": "Additional task created successfully",
+    "updateSuccess": "Additional task updated successfully",
+    "deleteSuccess": "Additional task deleted successfully",
+    "createError": "Failed to create additional task",
+    "updateError": "Failed to update additional task",
+    "deleteError": "Failed to delete additional task",
+    "emptyExpectation": "Empty expectation",
+    "noExpectations": "No expectations",
+    "lowCompletionWarning": "You have completed less than 50% of your expectations. Please update your achievements.",
+    "clickCellsHint": "Click on cells to add achievements",
+    "saveHint": "Save individual achievements or batch save",
+    "quartersHint": "Use quarters to navigate through the year",
+    "monthlyView": "Monthly View",
+    "weeklyView": "Weekly View",
+    "fullscreen": "Fullscreen",
+    "exitFullscreen": "Exit Fullscreen",
+    "noDetailTasks": "No detail tasks found. Please set expectations first.",
+    "monthlyTrackingHint": "Track achievements against monthly expectations. Click on cells to add achievements.",
+    "weeklyTrackingHint": "Track achievements against weekly expectations. Click on cells to add achievements.",
+    "savingAchievement": "Saving achievement...",
+    "removedSuccessfully": "Achievement removed successfully",
+    "removeConfirm": "Remove this unsaved achievement?",
+    "removeWarning": "This will delete the achievement immediately.",
+    "noAchievementsYet": "No achievements yet. Click \"Add Achievement\" to get started.",
+    "noMonthlyAchievementsYet": "No achievements yet. Click \"Add Monthly Achievement\" to get started.",
+    "monthlyPlaceholder": "Describe what was accomplished this month...",
+    "weeklyPlaceholder": "Describe what was accomplished...",
+    "noExpectationId": "Cannot create achievement without expectation ID. Please set expectations first.",
+    "currentWeekNoExpectation": "Current week has no expectation. You can only add achievements for unfilled passed weeks.",
+    "noExpectationCurrentWeek": "No expectation found for the current week.",
+    "cannotAddPassedWeek": "You cannot add achievement in passed week. Please use the current week.",
+    "weekPassedDisabled": "Week passed — Add Achievement is disabled for this week. Use current week.",
+    "weekPassedHint": "This week has passed. Add Achievement is disabled here. Please add it in the current week.",
+    "passedWeeksWithExpectation": "Passed weeks with expectation:",
+    "carriedFromPassedWeeks": "Carried from passed weeks:",
+    "fromPeriod": "From {{period}} — recorded under the current week",
+    "exceedsPassedWeekLimit": "Achievement exceeds the passed week expectation ({{limit}}).",
+    "exceedsWeekLimit": "Achievement exceeds the week expectation ({{limit}}).",
+    "allPassedWeeksFilled": "Each passed week with expectation already has an achievement entry.",
+    "legend": "Legend",
+    "hasExpectation": "Has Expectation",
+    "hasAchievements": "Has Achievements",
+    "expanded": "Expanded",
+    "noExpectation": "No Expectation",
+    "monthlyExpectation": "Monthly Expectation",
+    "achieved": "Achieved",
+    "achievement": "Achievement",
+    "addMonthlyAchievement": "Add Monthly Achievement",
+    "carriedToCurrentWeek": "Recorded in current week",
+    "completionExceeded": "100+",
+    "monthlyTrackingTitle": "Monthly Achievement Tracking",
+    "pastWeekLocked": "Passed week locked",
+    "pastWeekCardClickMessage": "You cannot add achievement in passed week. Please use the current week.",
+    "pastWeeksWithExpectation": "Passed weeks with expectation:",
+    "carriedFromWeeks": "Carried from passed weeks:",
+    "pastWeekHint": "Week passed — Add Achievement is disabled for this week. Use current week.",
+    "pastWeekBanner": "This week has passed. Add Achievement is disabled here. Please add it in the current week.",
+    "pastWeekAddDisabled": "You cannot add achievement in passed week. Add it in the current week.",
+    "exceedsPassedWeekExpectation": "Achievement exceeds the passed week expectation ({{limit}}).",
+    "exceedsExpectationLimit": "Achievement exceeds the week expectation ({{limit}}).",
+    "fromOtherWeek": "From {{period}} — recorded under the current week",
+    "confirmDeleteTitle": "Delete achievement",
+    "confirmDeleteNew": "Remove this unsaved achievement?",
+    "confirmDeleteSavedNow": "This will delete the achievement immediately.",
+    "noExpectationForCurrentWeek": "Current week has no expectation. You can only add achievements for unfilled passed weeks.",
+    "allPastWeeksHaveEntry": "Each passed week with expectation already has an achievement entry.",
+    "deleted": "Achievement removed successfully",
+    "noCurrentWeekExpectation": "No expectation found for the current week.",
+    "savingSingle": "Saving achievement...",
+    "carriedFromWeekMessage": "This achievement is for work done in {{period}} and will be saved under the current week ({{currentPeriod}}).",
+    "directorDashboard": "Director Dashboard",
+    "director": "Director",
+    "manageYourExpectations": "Manage your expectations and track achievements",
+    "quickStats": "Quick Stats",
+    "expectations": "Expectations",
+    "achievements": "Achievements",
+    "completion": "Completion",
+    "pending": "Pending",
+    "overall": "Overall",
+    "lowCompletion": "Low Completion",
+    "lowCompletionMessage": "You have completed less than 50% of your expectations. Please update your achievements.",
+    "export": "Export",
+    "settings": "Settings",
+    "tips": "Tips",
+    "tip1": "Click on cells to add achievements",
+    "tip2": "Save individual achievements or batch save",
+    "tip3": "Use quarters to navigate through the year"
+  },
+  "directorSignature": {
+    "title": "Signature Settings",
+    "description": "Manage your director signature",
+    "uploadSignature": "Upload Your Signature",
+    "currentSignature": "Current Signature",
+    "selectFile": "Select PNG File",
+    "preview": "Preview",
+    "upload": "Upload Signature",
+    "remove": "Remove Signature",
+    "replace": "Replace Signature",
+    "enterFileName": "Enter signature name (optional)",
+    "uploading": "Uploading signature...",
+    "uploadSuccess": "Signature uploaded successfully",
+    "uploadFailed": "Failed to upload signature",
+    "removing": "Removing signature...",
+    "removedSuccess": "Signature removed successfully",
+    "removeFailed": "Failed to remove signature",
+    "selectPngFirst": "Please select a PNG file first",
+    "onlyPngAllowed": "Only PNG files are allowed",
+    "fileTooLarge": "File size exceeds maximum limit (5MB)",
+    "signatureExists": "You already have a signature. Please remove it first.",
+    "confirmDelete": "Confirm Deletion",
+    "deleteConfirmation": "Are you sure you want to remove your signature? This action cannot be undone.",
+    "noSignature": "No signature uploaded yet",
+    "getStarted": "Upload your signature to get started",
+    "delegationNotice": "Delegation Notice",
+    "delegationNoticeMessage": "Signature management is not available during delegation",
+    "unauthorized": "Unauthorized",
+    "unauthorizedMessage": "You don't have permission to access this page",
+    "error": "Error",
+    "success": "Success",
+    "cancel": "Cancel",
+    "delete": "Delete",
+    "invalidSignatureUrl": "Invalid signature URL"
+  },
+  "documentKebab": {
+    "tooltip": "More",
+    "actions": {
+      "open": "Open",
+      "openFile": "Open file",
+      "download": "Download"
+    }
+  },
+  "docOverlay": {
+    "actions": {
+      "close": "Close",
+      "openFile": "Open file",
+      "download": "Download",
+      "openPdf": "Open PDF"
+    },
+    "status": {
+      "loading": "Loading document...",
+      "failed": "Failed to open",
+      "preparing": "Preparing...",
+      "pdfPreview": "PDF Preview",
+      "noDoc": "No document loaded.",
+      "activeEditors": "{{count}} active users",
+      "updatedAt": "Updated {{date}}"
+    },
+    "errors": {
+      "pdfNotice": "PDF documents open in a new tab."
+    }
+  },
+  "createFolder": {
+    "title": "Create New Folder",
+    "subtitle": "Folder will be created in:",
+    "labels": {
+      "nameEn": "Folder Name (English)",
+      "nameAm": "Folder Name (Amharic)",
+      "optional": " (Optional)",
+      "nameDescription": "This is the folder name users will see.",
+      "slug": "Slug",
+      "slugAuto": "Auto-generate",
+      "slugDescription": "Used for URLs and internal references.",
+      "slugPlaceholder": "e.g. contracts-and-finance",
+      "nameAmPlaceholder": "e.g. ውሎች"
+    },
+    "tips": {
+      "title": "Tips",
+      "subtitle": "Use a clear and unique name.",
+      "item1": "Keep folder names short (e.g. \"Contracts\", \"Finance\").",
+      "item2": "The slug will be auto-generated from the English name unless you change it.",
+      "item3": "Adding an Amharic name is recommended for bilingual users."
+    },
+    "preview": "Preview",
+    "untitled": "Untitled Folder",
+    "actions": {
+      "cancel": "Cancel",
+      "create": "Create",
+      "creating": "Creating..."
+    },
+    "hints": {
+      "press": "Press",
+      "esc": "Esc",
+      "toClose": "to close",
+      "tapOutside": "Tap outside to close."
+    },
+    "messages": {
+      "success": "Folder created",
+      "error": "Failed to create folder",
+      "invalidInput": "Invalid input"
+    }
+  },
+  "forYou": {
+    "labels": {
+      "open": "Open",
+      "recentActivity": "Recent activity from participants"
+    }
+  },
+  "fileList": {
+    "status": {
+      "loading": "Loading...",
+      "noFiles": "No files found",
+      "adjustFilters": "Try adjusting your filters",
+      "updatedFile": "updated",
+      "uploadedFile": "uploaded"
+    },
+    "headers": {
+      "name": "Name",
+      "updated": "Updated",
+      "owner": "Owner",
+      "activity": "Activity",
+      "actions": "Actions"
+    }
+  },
+  "filters": {
+    "all": "All",
+    "word": "Word",
+    "excel": "Excel",
+    "powerpoint": "PowerPoint",
+    "pdf": "PDF",
+    "other": "Other"
+  },
+  "pagination": {
+    "showing": "Showing {{from}} to {{to}} of {{total}} files",
+    "pageInfo": "Page {{current}} of {{total}}",
+    "previous": "Previous",
+    "next": "Next",
+    "perPage": "Per page"
+  },
+  "templateForm": {
+    "title": "Document Template",
+    "description": "Upload a document template file. Administrators can manage and update it later.",
+    "titleCreate": "Create New Document Template",
+    "titleEdit": "Edit Document Template",
+    "status": {
+      "uploading": "Uploading...",
+      "createAndUpload": "Create and Upload",
+      "cancel": "Cancel",
+      "remove": "Remove",
+      "browse": "Browse"
+    },
+    "labels": {
+      "file": "Template File",
+      "dropOrClick": "Drop the file here or click to select",
+      "supportedTypes": "Supported: DOC/DOCX, XLS/XLSX/CSV, PPT/PPTX, PDF.",
+      "type": "Type",
+      "size": "Size",
+      "slugNotice": "A unique identifier (Slug) will be generated automatically to prevent duplicates.",
+      "nameEn": "Name (English)",
+      "nameAm": "Name (Amharic)",
+      "folder": "Folder",
+      "pickFolder": "Select Folder",
+      "folderSelected": "Folder Selected"
+    },
+    "placeholders": {
+      "nameEn": "Ex: Employment Letter",
+      "nameAm": "Ex: Employment Letter",
+      "folderPicker": "Select folder (or root directory)"
+    },
+    "errors": {
+      "fileRequired": "File is required.",
+      "unsupported": "Unsupported file type. Please use DOC, XLS, PPT, or PDF."
+    },
+    "chips": {
+      "wordPdf": "Word / PDF Templates",
+      "excelCsv": "Excel / CSV Templates",
+      "ppt": "PowerPoint Templates"
+    }
+  },
+  "quickTemplates": {
+    "title": "Quick Templates",
+    "refresh": "Refresh",
+    "loading": "Loading...",
+    "noTemplates": "No templates found",
+    "errorLoading": "Failed to load templates",
+    "types": {
+      "word": "Word Template",
+      "excel": "Excel Template",
+      "ppt": "PowerPoint Template",
+      "pdf": "PDF Template"
+    }
+  },
+  "aiSummarize": {
+    "title": "AI Summarize",
+    "subtitle": "Generate a clean, concise summary for your document.",
+    "labels": {
+      "inputText": "Input text",
+      "placeholder": "Content will load automatically… (or paste text here)",
+      "aiSummary": "AI Summary",
+      "summaryPlaceholder": "Summary will appear here…",
+      "processing": "AI is processing your document"
+    },
+    "thinking": {
+      "step1": "Analyzing document content...",
+      "step2": "Identifying key points...",
+      "step3": "Compressing information...",
+      "step4": "Formatting results...",
+      "step5": "Writing a concise summary..."
+    },
+    "actions": {
+      "copy": "Copy",
+      "close": "Close",
+      "summarize": "Summarize with AI",
+      "thinking": "Thinking..."
+    },
+    "errors": {
+      "empty": "Document content is empty (nothing to summarize).",
+      "failed": "Failed to fetch/summarize document"
+    }
+  },
+  "summarizeModal": {
+    "title": "Summary",
+    "pasteContent": "Paste text here",
+    "pastePlaceholder": "Paste the document text here...",
+    "summary": "Summary",
+    "summaryPlaceholder": "Summary will appear here...",
+    "actions": {
+      "copy": "Copy",
+      "cancel": "Cancel",
+      "summarize": "Summarize"
+    },
+    "messages": {
+      "pasteFirst": "Please paste text first.",
+      "noSummary": "No summary found.",
+      "failed": "Summarization failed",
+      "copied": "Copied"
+    }
+  },
+  "ocrUpload": {
+    "title": "Upload Image",
+    "dropHint": "Drag and drop the image here or select",
+    "browse": "Browse Files",
+    "supportText": "PNG, JPG, JPEG, WEBP are supported",
+    "uploading": "Uploading...",
+    "remove": "Remove"
+  },
+  "dms": {
+    "menu": {
+      "showing": "Showing",
+      "prev": "Previous",
+      "next": "Next",
+      "of": "of",
+      "totalActivities": "total activities",
+      "time": "Time",
+      "user": "User",
+      "action": "Action",
+      "descriptions": "Description",
+      "module": "Module",
+      "severity": "Severity",
+      "status": "Status",
+      "totalAc": "Total Activities",
+      "successRate": "Success Rate",
+      "dailyAv": "Daily Average",
+      "uniqueUsers": "Unique Users",
+      "topAc": "Top Actions",
+      "times": "times",
+      "refresh": "Refresh",
+      "export": "Export",
+      "activeLogs": "Active Logs",
+      "home": "Home",
+      "filters": "Filters",
+      "sizeLimi": "Size Limit",
+      "clear": "Clear",
+      "loadingAc": "Loading activities...",
+      "noActivities": "No activities found",
+      "tryAdjusting": "Try adjusting your filters or search query to find what you&apos;re looking for",
+      "clearAllFilter": "Clear all filters",
+      "cardView": "Card View",
+      "cards": "Cards",
+      "tableView": "Table View",
+      "table": "Table",
+      "activeFilter": "Active Filter",
+      "description": "Manage storage caps at different levels.",
+      "myFiles": "My files",
+      "recent": "Recent",
+      "favorites": "Favorites",
+      "shared": "Shared",
+      "myShares": "My Shares",
+      "activity": "Activity",
+      "versionHistory": "Version history",
+      "ocrTool": "OCR tool",
+      "reports": "Reports",
+      "recycleBin": "Recycle bin",
+      "retentionPolicies": "Retention Policies",
+      "sizeLimits": "Size limits",
+      "documentTemplates": "Document templates",
+      "documents": "Documents",
+      "yourFilesAndFolders": "Your files and folders",
+      "new": "New",
+      "notifications": "Notifications",
+      "main": "Main",
+      "sharing": "Sharing",
+      "toolsAndActivity": "Tools & activity",
+      "more": "More",
+      "settings": "Settings",
+      "quickActions": "Quick actions",
+      "upload": "Upload",
+      "newFolder": "New folder",
+      "newDocument": "New document",
+      "newExcel": "New Excel",
+      "newPowerPoint": "New PowerPoint",
+      "share": "Share",
+      "storage": "Storage",
+      "helpAndSupport": "Help & support",
+      "available": "{{size}} available",
+      "failedToLoadStorage": "Failed to load storage summary",
+      "storageLimitNotSet": "Storage limit not set"
+    },
+    "notifications": {
+      "title": "Notifications",
+      "unreadCount": "{{count}} unread",
+      "allCaughtUp": "You're all caught up",
+      "refresh": "Refresh",
+      "markAllRead": "Mark all read",
+      "markAllSeen": "Mark all as seen",
+      "markSeen": "Mark as seen",
+      "markSeenError": "Failed to mark notification as seen",
+      "markSeenSuccess": "Notification marked as seen",
+      "statusUnread": "Unread",
+      "statusSeen": "Seen",
+      "tabAll": "All",
+      "tabUnread": "Unread",
+      "loadError": "Failed to load notifications",
+      "markReadError": "Failed to mark notification as read",
+      "tryAgain": "Try again",
+      "emptyUnread": "No unread notifications",
+      "emptyAll": "No notifications yet",
+      "emptyHint": "New activity will appear here"
+    },
+    "browse": {
+      "type": "Type",
+      "name": "Name",
+      "docType": "Document Type",
+      "size": "Size",
+      "created": "Created",
+      "updated": "Updated",
+      "collaborators": "Collaborators",
+      "owner": "Owner",
+      "editor": "Editor",
+      "folders": "Folders",
+      "files": "files",
+      "loading": "Loading files...",
+      "header": {
+        "searchPlaceholder": "Search files and folders",
+        "refresh": "Refresh",
+        "sort": "Sort",
+        "sortBy": "Sort by",
+        "fields": {
+          "type": "Type",
+          "name": "Name",
+          "modified": "Date modified",
+          "size": "Size"
+        },
+        "direction": {
+          "asc": "Ascending",
+          "desc": "Descending"
+        },
+        "view": {
+          "tiles": "Tiles view",
+          "list": "List view",
+          "clientPagination": "Client pagination"
+        }
+      },
+      "modals": {
+        "delete": {
+          "titleFolder": "Delete folder",
+          "titleFile": "Delete file",
+          "description": "Are you sure you want to delete",
+          "confirmFolder": "Delete folder",
+          "confirmFile": "Delete file"
+        },
+        "rename": {
+          "titleFolder": "Rename folder",
+          "titleFile": "Rename file",
+          "descriptionFolder": "Enter a new name for this folder.",
+          "descriptionFile": "Enter a new name for this file."
+        },
+        "moveModal": {
+          "titleFolder": "Move folder",
+          "titleFile": "Move file",
+          "description": "Enter the destination folder ID. Leave empty to move to Root."
+        }
+      },
+      "toolbar": {
+        "quick": "Quick links",
+        "back": "Back",
+        "upload": "Upload",
+        "renameFile": "Rename file",
+        "new": "New",
+        "newFolder": "New folder",
+        "openDetails": "Open details",
+        "newDoc": "New Document",
+        "save": "Save",
+        "navigation": "Navigation",
+        "backToCreate": "Back to create",
+        "newDocCreate": "Create new document",
+        "chooseType": "Choose a type, name it, then open in editor",
+        "editorError": "Editor Error",
+        "dismiss": "Dismiss",
+        "backFolder": "Back to folder",
+        "activeEditor": "Active Editor",
+        "documentName": "Document Name",
+        "finalName": "Final filename",
+        "documentType": "Document type",
+        "location": "Location",
+        "willBeCreatedIn": "Document will be created in the current folder",
+        "willOpen": "The document will open in the online editor where you can start working immediately.",
+        "cancel": "Cancel",
+        "creating": "Creating…",
+        "createAndOpenEditor": "Create & open editor",
+        "user": "User",
+        "openNewTab": "Open in new tab",
+        "documentEditOnline": "Document • Editing online",
+        "creatingDoc": "Creating document...",
+        "myDocuments": "My documents",
+        "myDocumentsDesc": "All documents with version history {{mode}}",
+        "browseAll": "Browse all",
+        "copyItem": "Copy item",
+        "moveItem": "Move item",
+        "copyHere": "Copy here",
+        "moveHere": "Move here",
+        "error": {
+          "failedToCreate": "Failed To Create Document",
+          "failedToLoad": "Failed to load document editor",
+          "error": "Error",
+          "uploadFailed": "Upload failed",
+          "failedToLoadFolderContents": "Failed to load folder contents.",
+          "failedToLoadText": "Failed to load text",
+          "failedToDownload": "Failed to download",
+          "failedToLoadDetails": "Failed to load details",
+          "selectEmployee": "Select at least one employee",
+          "summarizeFailed": "Summarization failed",
+          "copyFailed": "Copy failed",
+          "deleteFailed": "Delete failed",
+          "partialDeleteFailed": "Deleted {{success}} of {{count}} items. {{failed}} could not be deleted.",
+          "renameFailed": "Rename failed",
+          "actionFailed": "Action failed",
+          "shareFailed": "Share failed",
+          "failedToFavorite": "Failed to add to favorites",
+          "failedToLoadRecentDocuments": "Failed to load recent documents."
+        },
+        "searchPlaceholder": "Search files and folders",
+        "refresh": "Refresh",
+        "sort": "Sort",
+        "sortBy": "Sort by",
+        "sortOptions": {
+          "type": "Type",
+          "name": "Name",
+          "modified": "Date modified",
+          "size": "Size",
+          "asc": "Ascending",
+          "desc": "Descending",
+          "newest": "Newest",
+          "oldest": "Oldest"
+        },
+        "viewOptions": {
+          "tiles": "Tiles view",
+          "list": "List view"
+        },
+        "selectedCount": "{{count}} selected",
+        "clearSelection": "Clear selection",
+        "selectionToolbar": "Selection actions",
+        "clientPagination": "Client pagination",
+        "home": "Home",
+        "foldersLabel": "Folders",
+        "filesLabel": "Files",
+        "noFilesFound": "No files found",
+        "getStarted": "Upload or create a new document to get started.",
+        "loadingFiles": "Loading files…",
+        "loadingRecentDocuments": "Loading recent documents…",
+        "loadingDetails": "Loading details…",
+        "detailsLoaded": "Loaded",
+        "sharedSuccess": "Shared successfully",
+        "addedToFavorites": "Added to favorites",
+        "folderDeleted": "Folder deleted",
+        "fileDeleted": "File deleted",
+        "folderRenamed": "Folder renamed",
+        "fileRenamed": "File renamed",
+        "folderCopied": "Folder copied successfully",
+        "folderMoved": "Folder moved successfully",
+        "copiedSuccess": "Copied successfully",
+        "movedSuccess": "Moved successfully",
+        "deleteConfirm": "Are you sure you want to delete \"{{label}}\"?",
+        "renameFolderDesc": "Enter a new name for this folder.",
+        "renameFileDesc": "Enter a new name for this file.",
+        "allUploaded": "Successfully uploaded {{count}} file(s)",
+        "someUploaded": "{{success}} uploaded, {{fail}} failed",
+        "uploadFailedReason": "Upload failed: {{reason}}",
+        "summarizePrompt": "Please summarize this document:",
+        "copiedToClipboard": "Copied to clipboard",
+        "actions": {
+          "open": "Open",
+          "preview": "Preview",
+          "download": "Download",
+          "versions": "Versions",
+          "details": "Details",
+          "summarize": "Summarize",
+          "share": "Share…",
+          "favoriteAdd": "Add to favorites",
+          "favoriteRemove": "Remove from favorites",
+          "rename": "Rename",
+          "copyTo": "Copy to…",
+          "moveTo": "Move to…",
+          "delete": "Delete",
+          "more": "More",
+          "moreActions": "More actions",
+          "opening": "Opening…",
+          "opened": "Opened: {{title}}"
+        },
+        "labels": {
+          "name": "Name",
+          "dateModified": "Date modified",
+          "size": "Size"
+        },
+        "status": {
+          "recently": "Recently"
+        },
+        "fallbacks": {
+          "untitled": "Untitled",
+          "folder": "Folder"
+        },
+        "details": {
+          "folderDetails": "Folder details",
+          "documentDetails": "Document details",
+          "type": "Type",
+          "name": "Name",
+          "created": "Created",
+          "updated": "Updated",
+          "docType": "Document type",
+          "size": "Size"
+        },
+        "confirmDownload": "\"{{title}}\" can’t be previewed here.\n\nDownload it now?",
+        "recentDocuments": "Recent documents",
+        "recentDocumentsMine": "Most recently updated documents (mine)",
+        "searchRecentPlaceholder": "Search recent documents…",
+        "goToDocs": "Go to Docs",
+        "clearSearch": "Clear search",
+        "noRecentDocumentsFound": "No recent documents found",
+        "noRecentDocumentsYet": "You haven't accessed any documents yet. Start by uploading or creating documents.",
+        "recentSort": {
+          "updatedDesc": "Updated (newest)",
+          "updatedAsc": "Updated (oldest)",
+          "nameAsc": "Name (A→Z)",
+          "nameDesc": "Name (Z→A)"
+        },
+        "versionsWithTitle": "Versions — {{title}}",
+        "paginationInfo": "Page {{page}} • Total {{total}} documents"
+      },
+      "search": {
+        "templatesPlaceholder": "Search templates by name…",
+        "templatesAriaLabel": "Search templates by name"
+      }
+    },
+    "dialogs": {
+      "details": {
+        "title": "Details",
+        "folder": "Folder",
+        "file": "File",
+        "labels": {
+          "size": "Size",
+          "updated": "Updated",
+          "created": "Created",
+          "owner": "Owner",
+          "visibility": "Visibility",
+          "tags": "Tags"
+        },
+        "visibility": {
+          "private": "Private",
+          "shared": "Shared",
+          "org": "Organization"
+        },
+        "actions": {
+          "close": "Close",
+          "copy": "Copy here",
+          "moveHere": "Move here",
+          "copyDoc": "Copy document",
+          "moveDoc": "Move document"
+        }
+      },
+      "move": {
+        "title": "Move to...",
+        "root": "Root",
+        "label": "Destination Folder",
+        "placeholder": "Enter destination folder ID...",
+        "moving": "Moving...",
+        "actions": {
+          "cancel": "Cancel",
+          "move": "Move"
+        }
+      },
+      "rename": {
+        "title": "Rename",
+        "label": "Name",
+        "placeholder": "Enter a new name",
+        "saving": "Saving...",
+        "actions": {
+          "cancel": "Cancel",
+          "save": "Save"
+        }
+      },
+      "share": {
+        "title": "Share",
+        "description": "Share link for",
+        "label": "Share link",
+        "noLink": "No link generated yet",
+        "actions": {
+          "generate": "Generate link",
+          "regenerate": "Regenerate link",
+          "revoke": "Revoke"
+        }
+      },
+      "upload": {
+        "title": "Upload files",
+        "description": "Drag and drop files here or click to browse",
+        "instruction": "Drag files here or browse from your computer",
+        "supported": "Supported: DOC/DOCX, XLS/XLSX/CSV, PPT/PPTX, PDF, Images",
+        "browse": "Browse files",
+        "selectedCount": "Selected files ({{count}})",
+        "uploading": "Uploading...",
+        "uploadingFiles": "Uploading files...",
+        "completed": "Completed",
+        "uploadAction": "Upload",
+        "selectedStatus": "{{count}} file selected",
+        "selectedStatus_plural": "{{count}} files selected",
+        "cancel": "Cancel",
+        "success": "Uploaded {{count}} file(s)",
+        "failed": "Upload failed",
+        "videoNotSupported": "Video files are not supported. Please upload a document or image instead.",
+        "maxFileSize": "Maximum file size: {{limit}}",
+        "fileTooLarge": "{{files}} exceeds the {{limit}} file size limit."
+      }
+    },
+    "documents": {
+      "ai": {
+        "title": "AI Summarize",
+        "description": "Generate a clean, concise summary for your document.",
+        "inputLabel": "Input text",
+        "inputPlaceholder": "Paste the content you want summarized…",
+        "outputLabel": "AI Summary",
+        "outputPlaceholder": "Summary will appear here…",
+        "processing": "AI is processing your document",
+        "steps": [
+          "Analyzing document content…",
+          "Identifying key points…",
+          "Compressing information…",
+          "Writing a concise summary…"
+        ],
+        "actions": {
+          "copy": "Copy",
+          "close": "Close",
+          "summarize": "Summarize with AI",
+          "thinking": "Thinking…"
+        },
+        "errors": {
+          "failed": "Summarization failed"
+        }
+      },
+      "detailModel": {
+        "empty": {
+          "title": "No details available",
+          "subtitle": "Select a file to see its properties"
+        },
+        "actions": {
+          "cancel": "Cancel",
+          "close": "Close"
+        }
+      },
+      "preview": {
+        "title": "Preview",
+        "loading": "Loading…",
+        "noPreview": "This file can’t be previewed here. Use Download.",
+        "kinds": {
+          "image": "Image",
+          "text": "Text",
+          "audio": "Audio",
+          "video": "Video",
+          "pdf": "PDF",
+          "archive": "Archive",
+          "download": "Download",
+          "office": "Office"
+        },
+        "actions": {
+          "download": "Download",
+          "downloading": "Downloading…",
+          "close": "Close"
+        },
+        "messages": {
+          "success": "Download started",
+          "error": "Failed to download"
+        }
+      },
+      "createDoc": {
+        "title": "Create Document",
+        "description": "Choose a type and name for your new document.",
+        "validation": {
+          "enRequired": "English name is required",
+          "invalid": "Invalid input"
+        },
+        "fields": {
+          "en": "English Name",
+          "am": "Amharic Name",
+          "slug": "Slug",
+          "type": "Document Type"
+        },
+        "placeholders": {
+          "en": "e.g. Project Plan",
+          "am": "e.g. የፕሮጀክት እቅድ",
+          "slugAuto": "Auto-generated from English name",
+          "name": "Enter document name"
+        },
+        "labels": {
+          "type": "Document Type",
+          "recent": "Recent",
+          "favorites": "Favorites",
+          "tags": "Tags",
+          "permissions": "Permissions",
+          "quickLinks": "Quick links",
+          "word": "Word",
+          "excel": "Excel",
+          "powerpoint": "PowerPoint"
+        },
+        "actions": {
+          "cancel": "Cancel",
+          "create": "Create",
+          "creating": "Creating..."
+        },
+        "messages": {
+          "success": "Document created successfully",
+          "error": "Failed to create document"
+        }
+      },
+      "delete": {
+        "warning": "Warning",
+        "undoWarning": "This action cannot be undone.",
+        "actions": {
+          "cancel": "Cancel",
+          "delete": "Delete",
+          "deleting": "Deleting…"
+        }
+      },
+      "detailsModal": {
+        "empty": {
+          "title": "No details available",
+          "subtitle": "Nothing to display for this item."
+        },
+        "actions": {
+          "cancel": "Cancel",
+          "close": "Close"
+        }
+      },
+      "overlay": {
+        "status": {
+          "opening": "Opening…",
+          "loading": "Loading document…",
+          "preparing": "Preparing document…",
+          "preparingEditor": "Preparing editor…",
+          "failed": "Failed to open",
+          "editing": "Editing online",
+          "noDoc": "No document loaded.",
+          "missingUrl": "Missing editor configuration (URL)."
+        },
+        "actions": {
+          "close": "Close",
+          "summarize": "Summarize",
+          "newTab": "Open in new tab",
+          "download": "Download"
+        },
+        "errors": {
+          "config": "Failed to build editor config"
+        }
+      },
+      "table": {
+        "empty": {
+          "title": "No documents found",
+          "description": "Try changing search, filters, or create a new document."
+        },
+        "searchPlaceholder": "Search documents...",
+        "actions": {
+          "new": "New Document",
+          "create": "Create New Document",
+          "preview": "Preview",
+          "open": "Open",
+          "download": "Download"
+        },
+        "footer": {
+          "showing": "Showing",
+          "document": "document",
+          "documents": "documents",
+          "sortedBy": "Sorted by"
+        },
+        "cells": {
+          "created": "Created"
+        },
+        "status": {
+          "published": "Published",
+          "draft": "Draft",
+          "archived": "Archived",
+          "review": "Review"
+        }
+      },
+      "toolbar": {
+        "searchPlaceholder": "Search files and folders...",
+        "view": {
+          "grid": "Grid view",
+          "list": "List view"
+        },
+        "activity": {
+          "title": "DMS Activity Log",
+          "subtitle": "Monitor and track audit events for the DMS module"
+        },
+        "sort": {
+          "trigger": "Sort by",
+          "updated_desc": "Updated (newest)",
+          "updated_asc": "Updated (oldest)",
+          "name_asc": "Name (A–Z)",
+          "name_desc": "Name (Z–A)"
+        }
+      },
+      "downloads": {
+        "title": "Downloads",
+        "overallProgress": "Overall progress",
+        "status": {
+          "active": "{{count}} active",
+          "completed": "{{count}} completed",
+          "failed": "{{count}} failed",
+          "done": "Done",
+          "error": "Failed",
+          "more": "+{{count}} more downloads"
+        },
+        "actions": {
+          "cancel": "Cancel download",
+          "cancelAll": "Cancel All",
+          "hide": "Hide"
+        }
+      },
+      "uploadOverlay": {
+        "defaultTitle": "Drop files to upload",
+        "defaultDescription": "Upload to the current folder.",
+        "defaultHint": "Tip: Drop multiple files at once",
+        "dropZone": {
+          "title": "Drop zone active",
+          "description": "Release anywhere to start upload.",
+          "ready": "Ready",
+          "uploading": "Uploading...",
+          "inProgressNote": "Uploading in progress. Please keep this tab open.",
+          "standbyNote": "Drop files now to start uploading.",
+          "statusProgress": "In progress",
+          "statusStandby": "Standing by"
+        },
+        "actions": {
+          "close": "Close",
+          "esc": "Esc",
+          "toClose": "to close",
+          "locked": "(locked during upload)"
+        }
+      },
+      "fileCard": {
+        "preview": "Preview",
+        "metadataSeparator": "•"
+      },
+      "folderCard": {
+        "defaultName": "Folder",
+        "updated": "Updated {{date}}",
+        "fileCount": "{{count}} file",
+        "fileCount_plural": "{{count}} files",
+        "actions": {
+          "trigger": "Folder actions",
+          "open": "Open",
+          "details": "Details",
+          "star": "Star / Unstar",
+          "rename": "Rename",
+          "move": "Move",
+          "share": "Share",
+          "delete": "Delete"
+        }
+      },
+      "folderPicker": {
+        "description": "Choose a destination folder (or Root).",
+        "root": "Root",
+        "loading": "Loading folders...",
+        "noFolders": "No folders found.",
+        "actions": {
+          "expand": "Expand",
+          "collapse": "Collapse",
+          "cancel": "Cancel",
+          "copyHere": "Copy here",
+          "moveHere": "Move here"
+        }
+      },
+      "actions": {
+        "trigger": "Open menu",
+        "preview": "Preview",
+        "details": "Details",
+        "starAdd": "Add starred",
+        "starRemove": "Remove starred",
+        "moveTo": "Move to",
+        "rename": "Rename",
+        "share": "Share",
+        "delete": "Delete",
+        "download": "Download",
+        "extractText": "Extract Text (OCR)"
+      },
+      "newMenu": {
+        "trigger": "New",
+        "folder": "New folder",
+        "upload": "File upload",
+        "doc": "Document",
+        "ppt": "PowerPoint",
+        "xls": "Excel Sheet"
+      },
+      "pagination": {
+        "showing": "Showing",
+        "of": "of",
+        "items": "items",
+        "perPage": "Items per page:",
+        "first": "First page",
+        "prev": "Previous page",
+        "next": "Next page",
+        "last": "Last page",
+        "pageAria": "Page {{page}}"
+      },
+      "shareMenu": {
+        "share": "Share",
+        "shareToUser": "Share to Single User",
+        "shareToUnit": "Share to Entire Unit"
+      },
+      "fileProperties": {
+        "actions": "Actions"
+      },
+      "unitShareModal": {
+        "title": "Share with Unit",
+        "description": "Select organizational units or departments and set their permission level.",
+        "permissionLevel": "Permission Level",
+        "unitsAndPositions": "Units & Departments",
+        "units": "Units",
+        "departments": "Departments",
+        "positions": "Departments",
+        "selected": "Selected",
+        "searchPlaceholder": "Search units or departments...",
+        "loading": "Loading units and departments...",
+        "noUnits": "No units or departments found.",
+        "alreadyShared": "Shared",
+        "sharing": "Sharing...",
+        "shareAction": "Share",
+        "cancel": "Back",
+        "selectUnit": "Select at least one unit or department to share",
+        "tabSelected": "Selected",
+        "noSelected": "No selections yet.",
+        "showingRange": "Showing {{from}}–{{to}} of {{total}}",
+        "perPage": "Per page",
+        "perPageCount": "{{count}} / page",
+        "pageOf": "{{page}} / {{total}}",
+        "prevPage": "Previous page",
+        "nextPage": "Next page",
+        "removedSuccess": "Unit access removed",
+        "removeFailed": "Failed to remove unit access",
+        "removedDepartmentSuccess": "Department access removed",
+        "removeDepartmentFailed": "Failed to remove department access",
+        "canDownload": {
+          "label": "Allow Download",
+          "desc": "Members of the unit can download this item"
+        }
+      },
+      "shareModal": {
+        "title": "Share Document",
+        "description": "Select employees and determine their permission level.",
+        "permissionLevel": "Permission Level",
+        "employees": "Employees",
+        "yourUnit": "(Your Unit)",
+        "selected": "Selected",
+        "searchPlaceholder": "Search employees...",
+        "loading": "Loading employees...",
+        "noEmployees": "No employees found.",
+        "sharing": "Sharing...",
+        "shareAction": "Share",
+        "cancel": "Back",
+        "roles": {
+          "viewer": "Viewer",
+          "editor": "Editor"
+        },
+        "currentAccess": "Current Access",
+        "loadingCollaborators": "Loading collaborators…",
+        "myShares": {
+          "home": "Home",
+          "title": "My Shares",
+          "subtitle": "Files and folders you have shared",
+          "refresh": "Refresh",
+          "sort": "Sort",
+          "sortBy": "Sort by",
+          "clearSearch": "Clear search",
+          "document": "Document",
+          "fields": {
+            "type": "Type",
+            "name": "Name",
+            "modified": "Last Modified",
+            "size": "Size",
+            "role": "Role"
+          },
+          "direction": {
+            "asc": "Ascending",
+            "desc": "Descending"
+          },
+          "view": {
+            "tiles": "Tiles",
+            "list": "List"
+          },
+          "actions": {
+            "download": "Download",
+            "share": "Share",
+            "delete": "Delete",
+            "rename": "Rename",
+            "open": "Open",
+            "preview": "Preview",
+            "copy": "Copy to...",
+            "move": "Move to...",
+            "summarize": "Summarize",
+            "addedToFavorites": "Added to favorites"
+          },
+          "sections": {
+            "folders": "Shared Folders",
+            "files": "Shared Files"
+          },
+          "empty": {
+            "title": "No shares found",
+            "search": "No results matching your search",
+            "description": "You haven't shared any files or folders yet"
+          },
+          "roles": {
+            "owner": "Owner",
+            "editor": "Editor",
+            "viewer": "Viewer"
+          },
+          "details": {
+            "yourRole": "Your Role",
+            "sharedAt": "Shared At",
+            "docTitle": "Document Information",
+            "docType": "Type",
+            "created": "Created",
+            "updated": "Updated",
+            "collaborators": "Collaborators"
+          },
+          "notifications": {
+            "fileDeleted": "File deleted",
+            "addedToFavorites": "Added to favorites"
+          },
+          "modals": {
+            "delete": {
+              "file": "Delete File",
+              "confirm": "Are you sure you want to delete {{name}}?"
+            },
+            "rename": {
+              "fileTitle": "Rename File",
+              "file": "Enter new name for the file"
+            }
+          },
+          "loading": {
+            "files": "Loading files...",
+            "details": "Loading details..."
+          },
+          "errors": {
+            "loadItems": "Failed to load items",
+            "loadDoc": "Failed to load document",
+            "download": "Failed to download file"
+          }
+        },
+        "editPermission": "Edit permission"
+      },
+      "actionstile": {
+        "title": "Document actions",
+        "more": "More",
+        "favoritesAdd": "Add to favorites",
+        "favoriteRemove": "Remove from favorites",
+        "open": "Open",
+        "summarize": "Summarize",
+        "copyTo": "Copy to...",
+        "moveTo": "Move to...",
+        "shareEllipsis": "Share...",
+        "preview": "Preview"
+      },
+      "ocr": {
+        "files": "Files",
+        "ocrTool": "OCR Tool",
+        "extractText": "Extract text from images",
+        "chooseFile": "Choose file",
+        "runOcr": "Run OCR",
+        "reset": "Reset",
+        "copy": "Copy",
+        "download": "Download",
+        "clear": "Clear",
+        "preprocess": "Preprocess",
+        "english": "English",
+        "amharic": "Amharic",
+        "uploading": "Uploading image...",
+        "preprocessing": "Preparing image...",
+        "converting": "Converting to Base64...",
+        "performing": "Performing OCR...",
+        "complete": "Completed",
+        "progress": "Progress: {{progress}}%",
+        "processing": "Processing...",
+        "uploadImageError": "Please upload an image (png/jpg/webp).",
+        "selectFileFirst": "Select a file first.",
+        "noTextDetected": "OCR completed, but no text was found.",
+        "ocrCompleted": "OCR completed.",
+        "failedTryAgain": "OCR failed. Please try again.",
+        "copiedToClipboard": "Text copied to clipboard",
+        "copyFailed": "Failed to copy text",
+        "textDownloaded": "Text downloaded",
+        "clearerImage": "OCR failed. Please try with a clearer image or use English language.",
+        "inputImage": "Input Image",
+        "uploadToExtract": "Upload an image to extract text",
+        "noFileSelected": "No file selected",
+        "clickToChoose": "Click 'Choose file' to upload an image",
+        "supports": "Supports: PNG, JPG, WebP",
+        "previewUnavailable": "Preview unavailable.",
+        "file": "File:",
+        "extractedText": "Extracted Text",
+        "resultsPlaceholder": "OCR results will appear here",
+        "words": "words",
+        "characters": "characters",
+        "tips": "Tips for better OCR results:",
+        "tip1": "Use high-resolution images with good lighting",
+        "tip2": "Ensure text is clearly visible and not blurry",
+        "tip3": "Turn on 'Preprocess' for scanned documents",
+        "tip4": "Avoid complex backgrounds and watermarks",
+        "tip5": "Use English for best results",
+        "textExtraction": "Text Extraction",
+        "extractFromImages": "Extract text from images and PDF",
+        "multiLanguage": "Multi-language",
+        "supportsEngAmh": "Supports English and Amharic",
+        "smartPreprocess": "Smart Preprocessing",
+        "enhanceQuality": "Enhances image quality for better accuracy",
+        "note": "Note:",
+        "amhNote": "Amharic OCR uses English as fallback. For better Amharic support, consider using a dedicated OCR service.",
+        "extractFromFile": "Extract text from {{fileName}} using Optical Character Recognition",
+        "theSelectedFile": "the selected file",
+        "selectLanguage": "Select language",
+        "fileTypeNotSupported": "File type not supported for OCR. Supported types: PNG, JPG, TIFF, BMP, GIF, PDF",
+        "reExtract": "Re-extract",
+        "mayTakeAMoment": "This may take a few moments",
+        "tryAgain": "Try Again",
+        "copied": "Copied",
+        "close": "Close",
+        "processingImage": "Processing image...",
+        "runOcrToExtract": "Click 'Run OCR' to extract text from the image...",
+        "uploadToBegin": "Upload an image to begin...",
+        "language": "Language",
+        "best": "Best",
+        "beta": "Beta",
+        "imageProcessing": "Image Preparation",
+        "limitationsTitle": "Amharic OCR Limitations",
+        "limitationsDesc": "Amharic OCR is in beta and may have limited accuracy. For best results, use high-quality images with clear text.",
+        "expectedTime": "Expected Processing Time",
+        "smallImages": "Small Images",
+        "largeDocs": "Large Documents/Docs",
+        "textExtracted": "Text extracted",
+        "noTextExtracted": "No text extracted yet",
+        "uploadToBeginDesc": "Upload an image containing text and click 'Run OCR' to begin OCR processing.",
+        "processingError": "Processing Error",
+        "processingWait": "Processing your image... this may take some time.",
+        "errorDuringProcessing": "An error occurred during processing.",
+        "amhTitle": "Amharic support may be limited",
+        "progressDisplay": "Progress",
+        "preprocessDisplay": "Preprocess"
+      },
+      "settings": {
+        "retention": {
+          "home": "Home",
+          "settings": "Settings",
+          "title": "Retention Policies",
+          "subtitle": "Apply lifecycle rules to documents (retain, review, delete).",
+          "search": "Search policies...",
+          "sort": "Sort",
+          "sortBy": "Sort by",
+          "updated": "Updated",
+          "created": "Created",
+          "name": "Name",
+          "docType": "Document Type",
+          "ascending": "Ascending",
+          "descending": "Descending",
+          "refresh": "Refresh",
+          "newPolicy": "New Policy",
+          "createFirst": "Create your first policy",
+          "view": "View",
+          "edit": {
+            "failedToLoad": "Failed to load policy",
+            "saving": "Saving...",
+            "saved": "Saved",
+            "saveFailed": "Save failed",
+            "loading": "Loading..."
+          },
+          "delete": "Delete",
+          "loading": "Loading retention policies...",
+          "noPolicies": "No retention policies yet",
+          "controlLifecycle": "Create one to control document lifecycles.",
+          "updatedLabel": "Updated:",
+          "type": "Type",
+          "period": "Period",
+          "start": "Start",
+          "action": "Action",
+          "openDetails": "Open details →",
+          "confirmDelete": "Delete \"{{name}}\"? This cannot be undone.",
+          "deleting": "Deleting...",
+          "deleted": "Deleted",
+          "deleteFailed": "Delete failed",
+          "failedToLoad": "Failed to load retention policies",
+          "form": {
+            "createTitle": "Create Retention Policy",
+            "editTitle": "Edit Retention Policy",
+            "subtitle": "Define how long documents are kept and what happens when the period ends.",
+            "nameEn": "Name (English)",
+            "nameEnPlaceholder": "e.g. Finance records retention",
+            "nameAm": "Name (Amharic)",
+            "optional": "Optional",
+            "docType": "Document Type",
+            "appliesTo": "Applies to",
+            "retentionPeriod": "Retention period",
+            "unit": "Unit",
+            "periodValidation": "Period value must be > 0",
+            "startCounting": "Start counting from",
+            "startFrom": "Start from",
+            "actionAfter": "Action after period",
+            "action": "Action",
+            "description": "Description",
+            "descPlaceholder": "Optional policy notes...",
+            "cancel": "Cancel",
+            "create": "Create",
+            "save": "Save"
+          },
+          "enums": {
+            "periodUnit": {
+              "days": "Days",
+              "months": "Months",
+              "years": "Years"
+            },
+            "startFrom": {
+              "after_creation": "After creation",
+              "after_archive": "After archive",
+              "after_last_modified": "After last modified"
+            },
+            "action": {
+              "delete": "Delete",
+              "review": "Review",
+              "keep_forever": "Keep forever"
+            },
+            "docTypes": {
+              "word": "Word",
+              "sheet": "Sheet",
+              "slide": "Slide",
+              "pdf": "PDF"
+            }
+          },
+          "details": {
+            "failedToLoad": "Failed to load policy",
+            "deleting": "Deleting...",
+            "deleted": "Deleted",
+            "deleteFailed": "Delete failed",
+            "fallbackName": "Policy",
+            "confirmDelete": "Delete \"{{name}}\"? This cannot be undone.",
+            "notFoundTitle": "Policy Not Found",
+            "notFoundSub": "The retention policy you are looking for does not exist or you don't have access.",
+            "backToListLong": "Back to Retention Policies",
+            "back": "Back",
+            "retention": "Retention",
+            "edit": "Edit",
+            "delete": "Delete",
+            "updatedAt": "Updated at:",
+            "typeLabel": "Type:",
+            "periodLabel": "Period:",
+            "startLabel": "Start:",
+            "docTypeTitle": "Document Type",
+            "retPeriodTitle": "Retention Period",
+            "startsFrom": "Starts from:",
+            "actionTitle": "Action",
+            "counting": "Counting:",
+            "summaryTitle": "Rule Summary",
+            "keep": "Keep",
+            "fallbackDocs": "documents",
+            "for": "for",
+            "starting": "starting",
+            "then": ", then",
+            "createdAt": "Created at:",
+            "description": "Description"
+          },
+          "errors": {
+            "creating": "Creating...",
+            "created": "Policy created",
+            "failed": "Creation failed",
+            "nameEnRequired": "Name (English) is required",
+            "orgMissing": "Organization ID is missing from session",
+            "periodMin": "Period value must be > 0"
+          }
+        },
+        "sizeLimits": {
+          "title": "Size Limits",
+          "home": "Home",
+          "settings": "Settings",
+          "breadcrumbTitle": "Size Limits",
+          "refresh": "Refresh",
+          "newLimit": "New Limit",
+          "units": "Units:",
+          "type": "Type:",
+          "scopes": {
+            "org": "Organization",
+            "unit": "Unit",
+            "position": "Position",
+            "employeePosition": "Employee Position",
+            "user": "User",
+            "maxFile": "Max File Size",
+            "orgShort": "Org",
+            "unitShort": "Unit",
+            "positionShort": "Position",
+            "employeePositionShort": "Emp Position",
+            "userShort": "User",
+            "maxFileShort": "File Size"
+          },
+          "context": {
+            "org": "Organization context resolved.",
+            "unit": "Unit context resolved.",
+            "position": "Position context resolved.",
+            "employeePosition": "Employee position context resolved.",
+            "user": "User context resolved."
+          },
+          "card": {
+            "limit": "Limit",
+            "used": "Used",
+            "available": "Available",
+            "updated": "Updated"
+          },
+          "summary": {
+            "storageOverview": "Storage Overview",
+            "growthWatch": "Growth Watch",
+            "policyGuard": "Policy Guard",
+            "used": "Used",
+            "limit": "Limit",
+            "available": "Available",
+            "pctUsed": "{{pct}}% used"
+          },
+          "drawer": {
+            "create": "Create Size Limit",
+            "edit": "Edit Size Limit",
+            "typeLabel": "Type:",
+            "idLocked": "ID Locked",
+            "close": "Close"
+          },
+          "form": {
+            "limitType": "Limit Type",
+            "typeLocked": "Type is locked during edit.",
+            "storageLimit": "Storage Limit (GB)",
+            "storageUsed": "Storage Used (GB)",
+            "placeholderLimit": "e.g., 100",
+            "placeholderUsed": "e.g., 12.5",
+            "previewUsage": "Preview Usage",
+            "pctUsed": "{{pct}}% used",
+            "usedOf": "{{used}} used of {{limit}}",
+            "cancel": "Cancel",
+            "save": "Save",
+            "create": "Create"
+          },
+          "page": {
+            "title": "Size Limits",
+            "maxFileSubtitle": "Define the maximum upload file size.",
+            "otherSubtitle": "Manage storage limits at different levels.",
+            "refreshFailed": "Refresh failed",
+            "missingContext": "Missing context",
+            "missingContextSub": "Required context could not be resolved.",
+            "noLimitsTitle": "No size limits found",
+            "noLimitsSub": "Create one for this {{scope}}."
+          },
+          "deleteDialog": {
+            "title": "Delete size limit?",
+            "description": "This size limit will be permanently removed. This action cannot be undone.",
+            "cancel": "Cancel",
+            "confirm": "Delete"
+          },
+          "loading": "Loading limits..."
+        },
+        "templates": {
+          "home": "Home",
+          "settings": "Settings",
+          "breadcrumbTitle": "Document Templates",
+          "title": "Document Templates",
+          "subtitle": "Upload and manage official letter templates.",
+          "searchPlaceholder": "Search templates",
+          "refresh": "Refresh",
+          "sort": "Sort",
+          "newTemplate": "New Template",
+          "sortBy": "Sort by",
+          "sortFields": {
+            "updatedAt": "Updated",
+            "createdAt": "Created",
+            "name": "Name",
+            "documentType": "Document type"
+          },
+          "ascending": "Ascending",
+          "descending": "Descending",
+          "noTemplatesTitle": "No templates yet",
+          "noTemplatesSub": "Create one to start uploading letters.",
+          "createFirst": "Create first template",
+          "updatedAt": "Updated:",
+          "view": "View",
+          "delete": "Delete",
+          "type": "Type",
+          "slug": "Slug",
+          "fallbackName": "Template",
+          "deleteDialog": {
+            "title": "Delete template?",
+            "description": "This will permanently delete “{{name}}”. This action cannot be undone.",
+            "tip": "Tip: Make sure no one is using this template before deleting.",
+            "cancel": "Cancel",
+            "confirm": "Delete",
+            "deleting": "Deleting..."
+          },
+          "toasts": {
+            "loadFailed": "Failed to load document templates",
+            "deleting": "Deleting...",
+            "deleted": "Deleted",
+            "deleteFailed": "Delete failed"
+          },
+          "loading": "Loading templates...",
+          "create": {
+            "creating": "Creating template...",
+            "uploaded": "Template uploaded",
+            "presignedFailed": "Failed to get presigned upload URL",
+            "createFailed": "Create failed"
+          },
+          "details": {
+            "loadFailed": "Failed to load template",
+            "editorLoadFailed": "Failed to load document editor",
+            "noDocumentIdToOpen": "This template has no documentId to open.",
+            "openDocFailed": "Failed to open template document",
+            "loading": "Loading...",
+            "notFound": "Template not found",
+            "backToList": "Back to list",
+            "back": "Back",
+            "openTemplateFile": "Open template file",
+            "missingDocumentId": "Missing documentId",
+            "open": "Open",
+            "documentType": "Document type",
+            "slugOrFile": "Slug / File",
+            "noDocumentIdWarning": "This template has no documentId, so “Open” cannot load the file.",
+            "downloadFailed": "Failed to download",
+            "openFailed": "Failed to open file"
+          }
+        }
+      },
+      "shared": {
+        "title": "Shared with me",
+        "home": "Home",
+        "subtitle": "Files and folders shared with you",
+        "back": "Back",
+        "refresh": "Refresh",
+        "sort": "Sort",
+        "sortBy": "Sort by",
+        "clearSearch": "Clear search",
+        "document": "Document",
+        "folder": "Folder",
+        "fields": {
+          "type": "Type",
+          "name": "Name",
+          "modified": "Modified date",
+          "size": "Size"
+        },
+        "direction": {
+          "asc": "Ascending",
+          "desc": "Descending"
+        },
+        "view": {
+          "tiles": "Tiles view",
+          "list": "List view"
+        },
+        "actions": {
+          "download": "Download",
+          "share": "Share",
+          "delete": "Delete",
+          "rename": "Rename",
+          "move": "Move",
+          "copy": "Copy",
+          "open": "Open",
+          "preview": "Preview",
+          "summarize": "Summarize",
+          "addedToFavorites": "Added to favorites",
+          "copyHere": "Copy here",
+          "moveHere": "Move here"
+        },
+        "sections": {
+          "folders": "Shared Folders",
+          "files": "Shared Files"
+        },
+        "empty": {
+          "title": "No shared files found",
+          "search": "No files found matching your search.",
+          "description": "You don't have any shared files yet. Files shared with you will appear here."
+        },
+        "roles": {
+          "owner": "Owner",
+          "editor": "Editor",
+          "viewer": "Viewer"
+        },
+        "details": {
+          "yourRole": "Your role",
+          "sharedBy": "Shared by",
+          "clientPagination": "Client pagination",
+          "folderTitle": "Shared folder details",
+          "docTitle": "Shared document details",
+          "docType": "Document type",
+          "created": "Created",
+          "updated": "Updated",
+          "collaborators": "Collaborators"
+        },
+        "notifications": {
+          "selectEmployee": "Please select at least one employee",
+          "sharedSuccess": "Shared successfully",
+          "folderDeleted": "Folder deleted",
+          "fileDeleted": "File deleted",
+          "folderRenamed": "Folder renamed",
+          "folderMoved": "Folder moved",
+          "copiedSuccess": "Copied successfully"
+        },
+        "modals": {
+          "delete": {
+            "folder": "Delete Folder",
+            "file": "Delete File",
+            "confirm": "Are you sure you want to delete \"{{name}}\"?"
+          },
+          "rename": {
+            "folderTitle": "Rename Folder",
+            "fileTitle": "Rename File",
+            "folder": "Enter a new name for this folder.",
+            "file": "Enter a new name for this file."
+          },
+          "move": {
+            "folderTitle": "Move Folder",
+            "fileTitle": "Move File",
+            "description": "Enter destination folder ID. Leave empty to move to root."
+          },
+          "copy": {
+            "folderTitle": "Copy Folder",
+            "fileTitle": "Copy File"
+          }
+        },
+        "loading": {
+          "files": "Loading shared files...",
+          "details": "Loading details..."
+        },
+        "errors": {
+          "loadItems": "Could not load shared items.",
+          "loadHierarchy": "Could not load folder hierarchy",
+          "loadDoc": "Could not load document",
+          "download": "Download failed"
+        }
+      },
+      "trash": {
+        "files": "Files",
+        "recycleBin": "Recycle Bin",
+        "cancel": "Cancel",
+        "restore": "Restore",
+        "delete": "Delete",
+        "refresh": "Refresh",
+        "backToFiles": "Back to Files",
+        "open": "Open",
+        "restoreItems": "Restore items?",
+        "restoreItem": "Restore item?",
+        "restoreItemsDesc": "This will restore {{count}} items back to Files.",
+        "restoreItemDesc": "This will restore the selected item back to Files.",
+        "deleteItemsForever": "Delete items forever?",
+        "deleteItemForever": "Delete item forever?",
+        "deleteItemsForeverDesc": "These {{count}} items will be permanently deleted. This cannot be undone.",
+        "deleteItemForeverDesc": "This item will be permanently deleted. This cannot be undone.",
+        "selectAll": "Select all",
+        "name": "Name",
+        "dateDeleted": "Date deleted",
+        "by": "By",
+        "you": "You",
+        "selected": "{{count}} selected",
+        "selectToRestore": "Select items to restore or delete",
+        "deletedLabel": "Deleted:",
+        "byLabel": "By:",
+        "searchDoc": "Search deleted documents...",
+        "loading": "Loading...",
+        "emptyBin": "Your recycle bin is empty",
+        "noSearchRes": "No deleted documents match your search.",
+        "willAppearHere": "Deleted documents will appear here.",
+        "opening": "Opening...",
+        "opened": "Opened: {{title}}",
+        "failedToOpen": "Failed to open file",
+        "restoredOne": "Restored 1 item",
+        "restoredMany": "Restored {{count}} items",
+        "deletedOne": "Deleted 1 item",
+        "deletedMany": "Deleted {{count}} items",
+        "failedToRestore": "Failed to restore",
+        "failedToDelete": "Failed to delete",
+        "failedToLoad": "Failed to load recycle bin"
+      },
+      "reports": {
+        "title": "Reports",
+        "subtitle": "Admin dashboard analytics (date range required)",
+        "dateRange": {
+          "title": "Date range",
+          "description": "Choose start and end dates to generate the report.",
+          "start": "Start date *",
+          "end": "End date *",
+          "startPlaceholder": "Select start date",
+          "endPlaceholder": "Select end date"
+        },
+        "actions": {
+          "run": "Run report",
+          "running": "Running...",
+          "copy": "Copy",
+          "back": "Back"
+        },
+        "kpis": {
+          "totalDocs": "Total documents",
+          "topInitiator": "Top initiator",
+          "organizations": "Organizations",
+          "typesFound": "Types found",
+          "highPct": "highest",
+          "withinRange": "Within selected date range",
+          "docsCount": "{{count}} documents"
+        },
+        "storage": {
+          "title": "Storage",
+          "subtitle": "Organization storage usage",
+          "usedOf": "{{used}} used of {{limit}}",
+          "limit": "Limit: {{limit}}",
+          "runPrompt": "Run the report to load storage usage.",
+          "used": "used"
+        },
+        "charts": {
+          "time": {
+            "title": "Documents over time",
+            "subtitle": "Daily distribution",
+            "yaxis": "Documents"
+          },
+          "type": {
+            "title": "Documents by type",
+            "subtitle": "Word, PDF, Slide, Cell, Other"
+          },
+          "initiators": {
+            "title": "Top initiators",
+            "subtitleInitial": "Who created/initiated the most documents",
+            "subtitleData": "{{count}} contributors • {{total}} documents",
+            "ranked": "Ranked",
+            "noData": "No initiator data."
+          },
+          "generic": {
+            "runPrompt": "Run the report to render the chart."
+          }
+        },
+        "toasts": {
+          "dateRequired": "Start date and end date are required",
+          "loaded": "Report loaded",
+          "failed": "Failed to load report",
+          "copied": "Copied",
+          "copyFailed": "Copy failed"
+        },
+        "misc": {
+          "unknown": "Unknown"
+        }
+      },
+      "onboarding": {
+        "tour": {
+          "controls": {
+            "back": "Back",
+            "close": "Close",
+            "last": "Finish",
+            "next": "Next",
+            "open": "Open",
+            "skip": "Skip",
+            "tip": "Tip: Replay anytime from",
+            "replay": "Help & support",
+            "replayEnd": "."
+          },
+          "steps": {
+            "step1": {
+              "title": "Create something new",
+              "subtitle": "Documents, drafts, templates",
+              "content": "Use <b>New</b> to create a document instantly—then start editing or uploading right away."
+            },
+            "step2": {
+              "title": "My files",
+              "subtitle": "Your main library",
+              "content": "Everything you own lives here: folders, documents, and uploads. This is your default workspace."
+            },
+            "step3": {
+              "title": "Recent",
+              "subtitle": "Jump back instantly",
+              "content": "Pick up where you left off by opening your most recently viewed documents in one click."
+            },
+            "step4": {
+              "title": "Favorites",
+              "subtitle": "Pin what matters",
+              "content": "Star important items so they stay easy to find—especially useful for frequently used templates."
+            },
+            "step5": {
+              "title": "Sharing",
+              "subtitle": "Collaborate easily",
+              "content": "View documents shared with you and collaborate with your team without leaving your library."
+            },
+            "step6": {
+              "title": "Tools & activity",
+              "subtitle": "Audit + versions + OCR",
+              "content": "Track activity, manage version history, and run OCR when you need searchable text from scans."
+            },
+            "step7": {
+              "title": "Quick Upload",
+              "subtitle": "Fastest way in",
+              "content": "Upload files directly into your library with fewer clicks—perfect for dragging lots of documents in."
+            },
+            "step8": {
+              "title": "Storage",
+              "subtitle": "Know your limits",
+              "content": "Monitor used space and remaining storage so uploads never surprise you."
+            },
+            "step9": {
+              "title": "Help & support",
+              "subtitle": "Replay this tour anytime",
+              "content": "Need a refresher? Restart the walkthrough anytime—and share feedback if something feels unclear."
+            }
+          }
+        }
+      },
+      "myShares": {
+        "home": "Home",
+        "title": "My Shares",
+        "subtitle": "Files and folders you have shared",
+        "refresh": "Refresh",
+        "sort": "Sort",
+        "sortBy": "Sort by",
+        "clearSearch": "Clear search",
+        "document": "Document",
+        "fields": {
+          "type": "Type",
+          "name": "Name",
+          "modified": "Last Modified",
+          "size": "Size",
+          "role": "Role"
+        },
+        "direction": {
+          "asc": "Ascending",
+          "desc": "Descending"
+        },
+        "view": {
+          "tiles": "Tiles",
+          "list": "List"
+        },
+        "actions": {
+          "download": "Download",
+          "share": "Share",
+          "delete": "Delete",
+          "rename": "Rename",
+          "open": "Open",
+          "preview": "Preview",
+          "copy": "Copy to...",
+          "move": "Move to...",
+          "summarize": "Summarize",
+          "addedToFavorites": "Added to favorites"
+        },
+        "sections": {
+          "folders": "Shared Folders",
+          "files": "Shared Files"
+        },
+        "empty": {
+          "title": "No shares found",
+          "search": "No results matching your search",
+          "description": "You haven't shared any files or folders yet"
+        },
+        "roles": {
+          "owner": "Owner",
+          "editor": "Editor",
+          "viewer": "Viewer"
+        },
+        "details": {
+          "yourRole": "Your Role",
+          "sharedAt": "Shared At",
+          "docTitle": "Document Information",
+          "docType": "Type",
+          "created": "Created",
+          "updated": "Updated",
+          "collaborators": "Collaborators"
+        },
+        "notifications": {
+          "fileDeleted": "File deleted",
+          "addedToFavorites": "Added to favorites"
+        },
+        "modals": {
+          "delete": {
+            "file": "Delete File",
+            "confirm": "Are you sure you want to delete {{name}}?"
+          },
+          "rename": {
+            "fileTitle": "Rename File",
+            "file": "Enter new name for the file"
+          }
+        },
+        "loading": {
+          "files": "Loading files...",
+          "details": "Loading details..."
+        },
+        "errors": {
+          "loadItems": "Failed to load items",
+          "loadDoc": "Failed to load document",
+          "download": "Failed to download file"
+        }
+      }
+    },
+    "editPermission": {
+      "title": "Edit Permission",
+      "roleLabel": "Permission Level",
+      "roles": {
+        "viewer": {
+          "label": "Viewer",
+          "desc": "Can view and comment only"
+        },
+        "editor": {
+          "label": "Editor",
+          "desc": "Can view, comment, and edit"
+        },
+        "owner": {
+          "label": "Owner",
+          "desc": "Full control including sharing"
+        }
+      },
+      "canDownload": {
+        "label": "Allow Download",
+        "desc": "Collaborator can download the file"
+      },
+      "cancel": "Cancel",
+      "save": "Save Permission",
+      "saving": "Saving…",
+      "savedSuccess": "Permission updated",
+      "saveError": "Failed to update permission",
+      "manageTitle": "Manage Permissions",
+      "noCollaborators": "No collaborators yet. Share this item to add people.",
+      "colPerson": "Person",
+      "colRole": "Role",
+      "colActions": "Actions",
+      "editBtn": "Edit",
+      "done": "Done",
+      "canDownloadBadge": "Can download",
+      "pageOf": "Page {{page}} of {{total}}",
+      "showingRange": "{{from}}–{{to}} of {{total}}"
+    },
+    "attach": "Attach",
+    "selectAttachment": "Select Attachment from DMS",
+    "search": "Search…",
+    "loading": "Loading…",
+    "loadingFiles": "Fetching DMS files...",
+    "searchFiles": "Search folders and files...",
+    "loading": "Loading files...",
+    "loadingFiles": "Fetching DMS files...",
+    "retry": "Retry",
+    "noSearchResults": "No files match your search",
+    "emptyFolder": "Nothing to show here",
+    "name": "Name",
+    "owner": "Owner",
+    "size": "Size",
+    "date": "Last Modified",
+    "documentsSelected_one": "{{count}} document selected",
+    "documentsSelected_other": "{{count}} documents selected",
+    "picker": {
+      "title": "Select from DMS",
+      "hint": "Click a file to select it",
+      "attach": "Attach"
+    }
+  },
+  "auditLogShared": {
+    "page": {
+      "smartOfficeTitle": "Smart Office Audit Log",
+      "smartOfficeSubtitle": "Monitor Smart Office activities"
+    },
+    "actions": {
+      "refresh": "Refresh",
+      "export": "Export",
+      "cardView": "Card View",
+      "tableView": "Table View",
+      "cancel": "Cancel"
+    },
+    "labels": {
+      "activityLogs": "Activity Logs",
+      "activitiesFound": "{{count}} activities found",
+      "ip": "IP"
+    },
+    "messages": {
+      "missingModuleKey": "Missing module key for audit logs",
+      "logsLoaded": "Audit logs loaded",
+      "logsLoadFailed": "Failed to load audit logs",
+      "tryAgain": "Please try again.",
+      "exportingLogs": "Exporting {{count}} logs as {{format}}",
+      "loadingActivities": "Loading activities...",
+      "noActivitiesFound": "No activities found",
+      "adjustFilters": "Try adjusting your filters or search query to find what you're looking for."
+    },
+    "filters": {
+      "dateRange": "Date range",
+      "clearFilters": "Clear filters",
+      "searchPlaceholder": "Search activities...",
+      "module": "Module",
+      "allModules": "All modules",
+      "action": "Action",
+      "allActions": "All actions",
+      "status": "Status",
+      "allStatuses": "All statuses",
+      "fromDate": "From date",
+      "toDate": "To date",
+      "last7Days": "Last 7 days",
+      "last30Days": "Last 30 days"
+    },
+    "status": {
+      "success": "Success",
+      "failure": "Failure",
+      "warning": "Warning",
+      "pending": "Pending"
+    },
+    "stats": {
+      "totalActivities": "Total Activities",
+      "successRate": "Success Rate",
+      "dailyAverage": "Daily Avg",
+      "uniqueUsers": "Unique Users",
+      "topActions": "Top Actions",
+      "times": "times"
+    },
+    "export": {
+      "title": "Export Activity Logs",
+      "description": "Choose export options for your activity logs.",
+      "fileName": "File Name",
+      "fileNamePlaceholder": "Enter file name",
+      "format": "Export Format",
+      "includeDetails": "Include detailed information",
+      "includeDateRange": "Include date range in export"
+    },
+    "table": {
+      "time": "Time",
+      "user": "User",
+      "action": "Action",
+      "description": "Description",
+      "module": "Module",
+      "severity": "Severity",
+      "status": "Status"
+    },
+    "pagination": {
+      "showing": "Showing {{shown}} of {{total}} total activities",
+      "pageOf": "Page {{page}} / {{totalPages}}"
+    },
+    "modal": {
+      "title": "Smart Office Audit Details",
+      "description": "Full returned audit item for ID: {{id}}",
+      "entity": "Entity",
+      "method": "Method",
+      "createdAt": "Created At",
+      "changes": "Changes",
+      "noChanges": "No changes available.",
+      "payload": "Payload",
+      "performedBy": "Performed By",
+      "field": "Field",
+      "changed": "Changed",
+      "noEffectiveChange": "No Effective Change",
+      "changedPaths": "Changed Paths",
+      "noDifference": "From and To are identical for this field.",
+      "previousFile": "Previous File",
+      "currentFile": "Current File",
+      "from": "From",
+      "to": "To",
+      "updatedDetails": "Updated details",
+      "itemsCount": "{{count}} item(s)",
+      "user": {
+        "name": "Name",
+        "email": "Email",
+        "phone": "Phone",
+        "status": "Status",
+        "userType": "User Type",
+        "registration": "Registration",
+        "complete": "Complete",
+        "incomplete": "Incomplete",
+        "roles": "Roles",
+        "noRoles": "No roles",
+        "employeeInfo": "Employee Info",
+        "rank": "Rank",
+        "noPermissions": "No permissions",
+        "noEmployeeDetails": "No employee details"
+      }
+    }
+  },
+  "pendingUsers": {
+    "title": "Pending Employees",
+    "noPendingApprovals": "No pending approvals 🎉",
+    "reviewAll": "Review All",
+    "approve": "Approve",
+    "reject": "Reject",
+    "name": "Name",
+    "email": "Email",
+    "positions": "Positions",
+    "actions": "Actions",
+    "pending": "pending",
+    "loadingPendingEmployees": "Loading pending employees...",
+    "allRequestsReviewed": "All employee requests have been reviewed.",
+    "refresh": "Refresh",
+    "showingUpTo": "Showing up to 50 pending employees",
+    "employeeApproved": "Employee approved",
+    "employeeRejected": "Employee rejected",
+    "failedToApprove": "Failed to approve",
+    "failedToReject": "Failed to reject",
+    "employeeApprovedSuccess": "Employee approved successfully",
+    "employeeRejectedSuccess": "Employee rejected successfully"
+  },
+  "validation": {
+    "commentRequired": "Comment is required"
+  },
+  "branding": {
+    "title": "Branding Settings",
+    "description": "Configure organization identity, branding assets, contact information, and social media links.",
+    "organizationInfo": {
+      "title": "Organization Information",
+      "nameAm": "Organization Name (Amharic)",
+      "nameAmPlaceholder": "የድርጅቱ ስም",
+      "nameEn": "Organization Name (English)",
+      "nameEnPlaceholder": "Organization Name"
+    },
+    "brandAssets": {
+      "title": "Brand Assets",
+      "logo": "Organization Logo",
+      "loginImage": "Login Page Image",
+      "favicon": "Favicon",
+      "noImageUploaded": "No image uploaded",
+      "viewFull": "View Full"
+    },
+    "brandColors": {
+      "title": "Brand Colors",
+      "primary": "Primary Color",
+      "brandPrimary": "Brand Primary",
+      "secondary": "Secondary Color",
+      "brandSecondary": "Brand Secondary"
+    },
+    "welcomeMessage": {
+      "title": "Welcome Message",
+      "label": "Message Content",
+      "placeholder": "Enter welcome message..."
+    },
+    "footerText": {
+      "title": "Footer Text",
+      "label": "Footer Content",
+      "placeholder": "Enter footer text..."
+    },
+    "contactInfo": {
+      "title": "Contact Information",
+      "address": "Address",
+      "addressPlaceholder": "Enter address",
+      "phone": "Phone",
+      "phonePlaceholder": "+251-xxx-xxx-xxxx",
+      "email": "Email",
+      "emailPlaceholder": "info@example.com"
+    },
+    "socialMedia": {
+      "title": "Social Media Links",
+      "facebook": "Facebook",
+      "facebookPlaceholder": "https://facebook.com/...",
+      "twitter": "Twitter",
+      "twitterPlaceholder": "https://twitter.com/...",
+      "linkedin": "LinkedIn",
+      "linkedinPlaceholder": "https://linkedin.com/...",
+      "instagram": "Instagram",
+      "instagramPlaceholder": "https://instagram.com/...",
+      "youtube": "YouTube",
+      "youtubePlaceholder": "https://youtube.com/...",
+      "telegram": "Telegram",
+      "telegramPlaceholder": "https://t.me/...",
+      "tiktok": "TikTok",
+      "tiktokPlaceholder": "https://tiktok.com/...",
+      "website": "Website",
+      "websitePlaceholder": "https://example.com"
+    },
+    "saveButton": "Save Changes",
+    "savingButton": "Saving...",
+    "success": "Branding updated successfully",
+    "error": "We couldn't update the branding because some required information is missing. Please review your changes and try again.",
+    "validation": {
+      "nameAmRequired": "Organization name (Amharic) is required",
+      "nameEnRequired": "Organization name (English) is required",
+      "primaryColorRequired": "Primary color is required",
+      "welcomeMessageRequired": "Welcome message is required",
+      "footerTextRequired": "Footer text is required",
+      "addressRequired": "Address is required",
+      "phoneRequired": "Phone is required",
+      "emailRequired": "Email is required",
+      "invalidEmail": "Invalid email address"
+    },
+    "modules": {
+      "title": "Modules",
+      "dms": "Document Management System",
+      "dmsDescription": "Enable document management and record tracking",
+      "performance": "Performance Management",
+      "performanceDescription": "Enable employee performance tracking and evaluations",
+      "objective": "Objective Management",
+      "objectiveDescription": "Enable organizational goal setting and tracking"
+    },
+    "landingPage": {
+      "title": "Landing Page",
+      "complaint": "Complaint submission",
+      "complaintDescription": "Show the submit-complaint button on the public landing page next to Sign In"
+    }
+  },
+  "sites": {
+    "title": "Add Site",
+    "addNew": "Add New Site",
+    "tableName": "Sites",
+    "columns": {
+      "siteName": "Site Name",
+      "key": "Key",
+      "domain": "Domain",
+      "status": "Status",
+      "actions": "Actions"
+    },
+    "actions": {
+      "view": "View Site",
+      "edit": "Edit Site",
+      "branding": "Branding",
+      "archive": "Archive",
+      "restore": "Restore",
+      "delete": "Delete"
+    },
+    "dialogs": {
+      "archiveTitle": "Archive Site",
+      "archiveDescription": "Are you sure you want to archive site {{name}}? This is a soft delete operation. The site will be marked as Archived, but you can restore it at any time.",
+      "archiveConfirm": "Archive Site",
+      "archiving": "Archiving...",
+      "deleteTitle": "Permanently Delete Site",
+      "deleteDescription": "Are you sure you want to permanently delete site {{name}}?<br/><br/><span class=\"font-semibold text-red-600\">Warning: This action is irreversible and will permanently delete all data associated with this site.</span>",
+      "deleteConfirm": "Permanently Delete",
+      "deleting": "Deleting...",
+      "restoreTitle": "Restore Site",
+      "restoreDescription": "Are you sure you want to restore site {{name}} to Active status?",
+      "restoreConfirm": "Restore Site",
+      "restoring": "Restoring..."
+    },
+    "form": {
+      "titleEdit": "Edit Site Details",
+      "titleAdd": "Add New Site",
+      "nameAmLabel": "Site Name (Amharic)",
+      "nameAmPlaceholder": "e.g. ስማርት ኦፊስ",
+      "nameAmRequired": "Amharic name is required.",
+      "nameEnLabel": "Site Name (English)",
+      "nameEnPlaceholder": "e.g. Smart Office System",
+      "nameEnRequired": "English name is required.",
+      "keyLabel": "Site Key",
+      "keyPlaceholder": "e.g. smart_office",
+      "keyRequired": "Key is required.",
+      "keyFormat": "Key can only contain alphanumeric characters, underscores, and dashes.",
+      "keyUnique": "Key must be unique. This key is already in use.",
+      "keyHint": "This is a unique identifier and cannot be changed later.",
+      "domainLabel": "Domain",
+      "domainPlaceholder": "e.g. smartoffice.gov.et",
+      "domainRequired": "Domain is required.",
+      "domainNoSpaces": "Domain cannot contain spaces.",
+      "cancel": "Cancel",
+      "saving": "Saving...",
+      "saveChanges": "Save Changes",
+      "createSite": "Create Site",
+      "previewLabel": "Preview to send:"
+    },
+    "view": {
+      "title": "Site Details",
+      "nameEn": "Site Name (English)",
+      "nameAm": "Site Name (Amharic)",
+      "siteKey": "Site Key",
+      "status": "Status",
+      "domain": "Domain",
+      "close": "Close"
+    }
+  },
+  "positions": {
+    "employeePositions": "Employee Positions",
+    "viewPositions": "View Positions",
+    "positionRemoved": "Position Removed",
+    "employeeRemovedFromPosition": "{{employee}} removed from {{position}}",
+    "failedToRemovePosition": "Failed to Remove Position",
+    "removeFromPosition": "Remove from Position",
+    "confirmRemoveFromPosition": "Are you sure you want to remove {{employee}} from {{position}}? This action cannot be undone.",
+    "remove": "Remove",
+    "noPositions": "No Positions",
+    "employeeHasNoPositions": "This employee has no positions assigned",
+    "positionId": "Position ID",
+    "employee": "Employee",
+    "positionAlreadyRemoved": "Position Already Removed",
+    "positionMayHaveBeenRemovedAlready": "This position may have been removed already or by another user",
+    "positionDetails": "Position Details",
+    "department": "Department",
+    "unit": "Unit",
+    "notAvailable": "Not Available"
+  }
+}
diff --git a/apps/edr-freight-web/backoffice/src/locales/fr/translation.json b/apps/edr-freight-web/backoffice/src/locales/fr/translation.json
new file mode 100644
index 000000000..7f3d4e679
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/locales/fr/translation.json
@@ -0,0 +1,2526 @@
+{
+  "nav": {
+    "dashboard": "Tableau de bord",
+    "outgoing": "Sortant",
+    "incoming": "Entrant",
+    "external": "Externe",
+    "internal": "Interne",
+    "cc": "CC",
+    "forYourReference": "Pour votre référence",
+    "approval": "Approbation",
+    "pending": "En attente",
+    "Record Management": "Gestion des dossiers",
+    "branch": "Direction",
+    "internal_memo": "Note interne",
+    "non_smart_user": "Utilisateur non Smart",
+    "smartUsers": "Utilisateurs Smart",
+    "external_non_smart_user": "Utilisateur externe non Smart",
+    "admin": "Gestion du site",
+    "modules": "Modules",
+    "deputyMessage": "Message du/de la adjoint(e)",
+    "officeHeadMessage": "Message du responsable du bureau",
+    "orgGoal": "Objectifs de l’organisation",
+    "news": "Actualités",
+    "other": "Autre",
+    "homePage": "Vers la page d’accueil",
+    "myRecord": "Mes dossiers",
+    "submitRecord": "Soumettre le dossier",
+    "direct": "Direct"
+  },
+  "initiationType": {
+    "self": "Moi-même",
+    "team": "Équipe"
+  },
+  "dashboard": {
+    "totalOutgoing": "Total sortant",
+    "totalIncoming": "Total entrant",
+    "ccRecords": "Dossiers en CC",
+    "totalApproval": "Total des approbations",
+    "lastUpdated": "Dernière mise à jour",
+    "refresh": "Actualiser",
+    "refreshing": "Actualisation...",
+    "never": "Jamais",
+    "approvalStats": "Statistiques d’approbation",
+    "externalIncoming": "Entrant externe",
+    "internalIncoming": "Entrant interne",
+    "incomingStats": "Statistiques des entrants",
+    "outgoingStats": "Statistiques des sortants",
+    "externalIncomingRecords": "Dossiers entrants externes",
+    "internalIncomingRecords": "Dossiers entrants internes",
+    "advanced": "Tableau de bord avancé",
+    "status": {
+      "inProgress": "En cours",
+      "accepted": "Accepté",
+      "reassigned": "Réassigné",
+      "draft": "Brouillon",
+      "forward": "Transférer",
+      "approved": "Approuvé",
+      "rejected": "Rejeté",
+      "adjusted": "Ajusté",
+      "sent": "Envoyé",
+      "approve": "Approuver"
+    },
+    "Percentage": "Pourcentage",
+    "Count": "Nombre",
+    "Status": "Statut",
+    "Total": "Total",
+    "pieChart": "Diagramme circulaire",
+    "barChart": "Graphique à barres",
+    "table": "Tableau",
+    "monthlyIncoming": "Dossiers entrants mensuels",
+    "monthlyOutgoing": "Dossiers sortants mensuels",
+    "totalInVsOut": "Total entrant vs sortant",
+    "monthlyInVsOut": "Entrants vs sortants mensuels",
+    "weeklyInVsOut": "Entrants vs sortants hebdomadaires",
+    "dailyInVsOut": "Entrants vs sortants quotidiens",
+    "exportPdf": "Exporter en PDF",
+    "exporting": "Exportation...",
+    "print": "Imprimer",
+    "exportFormat": "Format d’exportation",
+    "selectFormat": "Sélectionner le format",
+    "totalEmployees": "Total des employés",
+    "totalUnits": "Total des unités",
+    "totalPositions": "Total des postes",
+    "totalDocuments": "Total des documents",
+    "organizationDashboard": "Tableau de bord de l’organisation",
+    "userManagement": "Gestion des utilisateurs",
+    "userManagementDesc": "Gérer les utilisateurs et les départements",
+    "contentManagementDesc": "Gérer les en-têtes, les pieds de page et les sceaux",
+    "excelUploader": "Importateur Excel",
+    "excelUploaderDesc": "Importer des utilisateurs en masse depuis Excel",
+    "positionSettings": "Paramètres des postes",
+    "positionSettingsDesc": "Configurer les postes organisationnels",
+    "archiveUsers": "Archiver les utilisateurs",
+    "archiveUsersDesc": "Gérer les comptes utilisateur archivés",
+    "overviewDescription": "Aperçu des performances et activités de votre organisation",
+    "quickActions": "Actions rapides",
+    "contentManagement": "Gestion du contenu",
+    "exportUserData": "Exporter les données utilisateur",
+    "recentActivities": "Activités récentes",
+    "selectUnit": "Sélectionner une unité",
+    "loadingUnits": "Chargement des unités...",
+    "refreshData": "Actualiser les données",
+    "noUnitsFound": "Aucune unité trouvée",
+    "organizationIdRequired": "L’ID de l’organisation est requis",
+    "exportError": "Échec de l’exportation. Veuillez réessayer.",
+    "uploadHeader": "Nouvelle image d’en-tête téléversée",
+    "updateSeal": "Sceau de l’organisation mis à jour",
+    "removeFooter": "Image du pied de page supprimée",
+    "twoHoursAgo": "Il y a 2 heures",
+    "fiveHoursAgo": "Il y a 5 heures",
+    "oneDayAgo": "Il y a 1 jour",
+    "orgMsg": "Aperçu des statistiques et activités de votre organisation",
+    "errorMsg": "Erreur lors du chargement des données de l’organisation. Veuillez actualiser la page."
+  },
+  "verification": {
+    "pending": "Vérification en attente",
+    "message": "Votre inscription est en cours de vérification. Si 24 heures se sont écoulées et que votre compte n’est toujours pas vérifié, veuillez nous contacter à",
+    "contactSupport": "Contacter l’assistance"
+  },
+  "status": {
+    "inProgress": "En cours",
+    "accepted": "Accepté",
+    "reassigned": "Réassigné",
+    "draft": "Brouillon",
+    "forward": "Transférer",
+    "approved": "Approuvé",
+    "rejected": "Rejeté",
+    "adjusted": "Ajusté",
+    "sent": "Envoyé",
+    "all": "Tous",
+    "dispatched": "Expédié",
+    "submitted": "Soumis"
+  },
+  "welcome": "Bienvenue",
+  "change_password": "Changer le mot de passe",
+  "sign_out": "Se déconnecter",
+  "view_profile": "Voir le profil",
+  "user": "Utilisateur",
+  "common": {
+    "back": "Retour",
+    "Back": "Retour",
+    "View": "Voir",
+    "today": "Aujourd’hui",
+    "yesterday": "Hier",
+    "unknownUser": "Utilisateur inconnu",
+    "yes": "Oui",
+    "no": "Non",
+    "na": "N/A",
+    "None": "Aucun",
+    "Submit": "Soumettre",
+    "save": "Enregistrer",
+    "saveAsDraft": "Enregistrer comme brouillon",
+    "Cancel": "Annuler",
+    "cancel": "Annuler",
+    "confirmAndSubmit": "Soumettre",
+    "goBack": "Retour",
+    "Confirm": "Confirmer",
+    "noResult": "Aucun résultat",
+    "create": "Créer",
+    "update": "Mettre à jour",
+    "Edit": "Modifier",
+    "Unselect": "Désélectionner",
+    "loading": "Chargement",
+    "DeactivateUser": "Supprimer l’utilisateur",
+    "requiredFields": "Champs requis",
+    "notAvailable": "Non disponible",
+    "referenceNumber": "numéroDeRéférence",
+    "subject": "Objet",
+    "createdDate": "Date de création",
+    "dispatchedDate": "Date d’expédition",
+    "status": "Statut",
+    "search": "Rechercher",
+    "name": "Nom",
+    "delete": "Supprimer",
+    "actions": "Actions",
+    "verify": "Vérifier",
+    "verifying": "Vérification...",
+    "viewReply": "Voir la réponse",
+    "previous": "Précédent",
+    "next": "Suivant",
+    "showing": "Affichage",
+    "to": "à",
+    "of": "de",
+    "Migrate": "Migrer",
+    "adopt": "Adopter",
+    "page": "Page",
+    "Delete": "Supprimer",
+    "Deleting": "Suppression...",
+    "DeletedSuccessfully": "Supprimé avec succès",
+    "FailedToDelete": "Échec de la suppression",
+    "ConfirmDelete": "Confirmer la suppression",
+    "DeleteConfirmationMessage": "Êtes-vous sûr de vouloir supprimer « {{name}} » ? Cette action ne peut pas être annulée.",
+    "addReply": "Ajouter une réponse",
+    "replies": "Réponses",
+    "replyAttachments": "Pièces jointes de réponse",
+    "mockDownload": "Téléchargement de la pièce jointe simulée : ",
+    "noReplies": "Aucune réponse ajoutée pour le moment.",
+    "replyMessage": "Message de réponse",
+    "replyPlaceholder": "Écrivez votre message de réponse ou commentaire ici...",
+    "attachments": "Pièces jointes",
+    "uploadMessage": "Cliquez pour téléverser ou glissez-déposez",
+    "uploadFormats": "PDF, PNG, JPG, ZIP (max 10 Mo)",
+    "submitting": "Soumission...",
+    "submit": "Soumettre",
+    "comment": "Commentaire"
+  },
+  "migration": {
+    "title": "Migrer le type de poste",
+    "fromPositionType": "Depuis le type de poste",
+    "toPositionType": "Vers le type de poste",
+    "selectSourcePositionType": "Sélectionner le type de poste source...",
+    "selectTargetPositionType": "Sélectionner le type de poste cible...",
+    "migrationPath": "Migration",
+    "migrateAllPositions": "Migrer tous les postes",
+    "confirmMigration": "Confirmer la migration",
+    "migrateAllDescription": "Cela migrera tous les postes de {{fromName}} vers {{toName}}. Cette action ne peut pas être annulée.",
+    "yesMigrateAll": "Oui, tout migrer",
+    "migrateSelectedPositions": "Migrer les postes sélectionnés",
+    "selectPositionsToMigrate": "Sélectionner les postes à migrer",
+    "searchPositions": "Rechercher des postes...",
+    "selected": "Sélectionné",
+    "noPositionsFound": "Aucun poste trouvé",
+    "noPositionsAvailable": "Aucun poste disponible",
+    "migrateSelectedButton": "Migrer les postes sélectionnés ({{count}})",
+    "confirmSelectedMigration": "Confirmer la migration sélectionnée",
+    "migrateSelectedDescription": "Vous êtes sur le point de migrer {{count}} poste(s) sélectionné(s) de {{fromName}} vers {{toName}}.",
+    "selectBothPositionTypes": "Veuillez sélectionner à la fois les types de poste source et cible",
+    "selectAtLeastOnePosition": "Veuillez sélectionner au moins un poste",
+    "allPositionsMigratedSuccess": "Tous les postes ont été migrés avec succès",
+    "failedToMigratePositions": "Échec de la migration des postes",
+    "selectedPositionsMigratedSuccess": "{{count}} poste(s) migré(s) avec succès",
+    "failedToMigrateSelectedPositions": "Échec de la migration des postes sélectionnés"
+  },
+  "collaboration": {
+    "inProgress": "En cours",
+    "done": "Terminé",
+    "all": "Tous",
+    "list": "Collaborations",
+    "comment": "Commentaire",
+    "comments": "Commentaires",
+    "commentTitle": "Commentaires de collaboration",
+    "commentDialogDescription": "Consultez ici tous les commentaires des collaborateurs. Si vous n’avez pas encore commenté, vous pouvez ajouter le vôtre ci-dessous.",
+    "commentRequired": "Le commentaire ne peut pas être vide.",
+    "commentSubmitted": "Commentaire soumis.",
+    "commentUpdated": "Commentaire mis à jour avec succès.",
+    "commentDeleted": "Commentaire supprimé avec succès.",
+    "commentExists": "Vous avez déjà commenté cette version du dossier.",
+    "commentsEmpty": "Aucun commentaire n’a encore été ajouté.",
+    "commentsCount": "{{count}} commentaire(s)",
+    "commentsEmptyState": "Une fois que les collaborateurs commenceront à commenter, leurs retours apparaîtront ici.",
+    "reviewedCount": "{{count}} collaborateur(s) ont révisé",
+    "unknownUser": "Utilisateur inconnu",
+    "yourComment": "Votre commentaire",
+    "edited": "Modifié",
+    "commentPlaceholder": "Écrivez votre commentaire...",
+    "addComment": "Ajouter votre commentaire",
+    "singleCommentRule": "Vous pouvez soumettre un seul commentaire pour la version actuelle du dossier.",
+    "postComment": "Publier le commentaire",
+    "deleteCommentTitle": "Supprimer le commentaire ?",
+    "deleteCommentDescription": "Cela supprimera votre commentaire actuel. Vous pourrez en ajouter un nouveau ensuite.",
+    "close": "Fermer",
+    "edit": "Modifier",
+    "adjust": "Ajuster",
+    "adjustSubmitted": "Ajustement envoyé avec succès.",
+    "adjustFailed": "Échec de l’envoi de la demande d’ajustement.",
+    "adjustCommentMissing": "Aucun commentaire trouvé à utiliser pour l’ajustement."
+  },
+  "profile": {
+    "recentActivity": "Activité récente",
+    "accountSafety": "Sécurité du compte",
+    "twoFactorAuth": "Authentification à deux facteurs",
+    "twoFactorDesc": "Ajouter une couche de sécurité supplémentaire",
+    "enabled": "Activé",
+    "disabled": "Désactivé",
+    "loading": "Chargement du profil...",
+    "error": "Échec du chargement du profil",
+    "tryAgain": "Réessayer",
+    "sessions": "Sessions",
+    "noName": "Aucun nom",
+    "signOut": "Se déconnecter",
+    "email": "E-mail",
+    "userType": "Type d’utilisateur",
+    "userTypes": {
+      "employee": "Employé"
+    },
+    "activity": {
+      "login": "Connexion",
+      "passwordChanged": "Mot de passe modifié"
+    },
+    "passwordSet": "Mot de passe défini",
+    "status": {
+      "accepted": "Accepté"
+    },
+    "positionDetails": "Détails du poste",
+    "positionName": "Nom du poste",
+    "positionKey": "Clé du poste",
+    "isDelegate": "Est délégué",
+    "employeeId": "ID employé",
+    "permissions": "Autorisations",
+    "noPermissions": "Aucune autorisation assignée",
+    "accountSecurity": "Sécurité du compte",
+    "password": "Mot de passe",
+    "passwordSetStatus": "Le mot de passe est défini",
+    "passwordNotSetStatus": "Mot de passe non défini",
+    "changePassword": "Changer le mot de passe",
+    "updateProfile": "Mettre à jour le profil",
+    "profile": "profil",
+    "englishName": "Veuillez saisir le nom en anglais",
+    "amharicName": "Veuillez saisir le nom en amharique",
+    "username": "Veuillez saisir le nom d’utilisateur",
+    "phoneNumber": "Veuillez saisir le numéro de téléphone",
+    "emailmsg": "Veuillez saisir l’e-mail",
+    "emailRequired": "L’e-mail est requis",
+    "usernameRequired": "Le nom d’utilisateur est requis",
+    "phoneRequired": "Le numéro de téléphone est requis",
+    "englishNameRequired": "Le nom en anglais est requis",
+    "amharicNameRequired": "Le nom en amharique est requis",
+    "invalidPhoneFormat": "Format de numéro de téléphone invalide.",
+    "validPhoneFormat": "Veuillez saisir un numéro de téléphone valide au format +2519XXXXXXXX ou 09XXXXXXXX",
+    "invalidEmailFormat": "Format d’e-mail invalide",
+    "validEmailFormat": "Veuillez saisir une adresse e-mail valide",
+    "profileUpdateSuccess": "Profil mis à jour avec succès",
+    "profileUpdated": "Votre profil est mis à jour",
+    "profileUpdateFailed": "Échec de la mise à jour du profil",
+    "updating": "Mise à jour"
+  },
+  "complaint": {
+    "title": "Soumettre votre plainte",
+    "subtitle": "Nous sommes là pour vous aider. Fournissez des informations détaillées afin que nous puissions vous assister efficacement.",
+    "formTitle": "Formulaire de plainte",
+    "fullName": "Nom complet",
+    "phone": "Numéro de téléphone",
+    "subCity": "Sous-ville",
+    "woreda": "Woreda",
+    "houseNumber": "Numéro de maison",
+    "institution": "Institution",
+    "place": "Lieu de la plainte",
+    "details": "Détails de la plainte",
+    "want": "Résolution souhaitée",
+    "evidence": "Preuve (facultatif)",
+    "selectedFiles": "Fichiers sélectionnés",
+    "disclaimerTitle": "Avertissement important",
+    "disclaimerText": "En soumettant ce formulaire, vous confirmez que les informations fournies sont vraies et exactes. Les fausses plaintes peuvent faire l’objet de poursuites judiciaires.",
+    "accept": "J’ai lu et j’accepte l’avertissement",
+    "submit": "Soumettre la plainte",
+    "submitting": "Soumission...",
+    "success": "Plainte soumise avec succès",
+    "keepId": "Veuillez conserver l’ID de votre plainte pour référence future :",
+    "error": "Erreur",
+    "close": "Fermer",
+    "back": "Retour",
+    "followTitle": "Suivre la plainte",
+    "followSubtitle": "Nous sommes là pour vous aider — suivez l’avancement de votre plainte ici.",
+    "selectCompliant": "Sélectionner une plainte",
+    "noEvidence": "Aucune preuve",
+    "compliantId": "Numéro de suivi de plainte",
+    "enterComNum": "Saisir le numéro de suivi de plainte",
+    "message": "Réponse",
+    "complaintNo": "Numéro de plainte",
+    "errorMsg": "Impossible de récupérer la plainte. Veuillez vérifier votre numéro de suivi de plainte et réessayer."
+  },
+  "header": {
+    "tigrigna": "Tigrigna",
+    "affar": "Afar",
+    "somali": "Somali",
+    "oromo": "Afaan Oromo",
+    "user": "Utilisateur",
+    "management": "Gestion",
+    "notifications": "Notifications",
+    "english": "Anglais",
+    "englishShort": "ANG",
+    "amharic": "Amharique",
+    "amharicShort": "አማ",
+    "french": "Français",
+    "frenchShort": "FR",
+    "viewProfile": "Voir le profil",
+    "changePassword": "Changer le mot de passe",
+    "signOut": "Se déconnecter",
+    "settings": "Paramètres",
+    "addTeeter": "Ajouter le cachet et la signature",
+    "addSignature": "Ajouter une signature",
+    "Remark": "Remarque",
+    "Description": "Description",
+    "navigation": {
+      "dashboard": "Tableau de bord",
+      "outgoing": "Sortant",
+      "incoming": "Entrant",
+      "approval": "Approbation",
+      "delegation": "Délégation",
+      "pending": "En attente",
+      "settings": "Paramètres",
+      "collaborations": "Collaborations",
+      "collaboration": "Collaborations"
+    },
+    "editProfile": "Modifier le profil"
+  },
+  "Document Attachments": "Pièces jointes du document",
+  "Login Method": "Méthode de connexion",
+  "Sign Up": "S’inscrire",
+  "Back to Home": "Retour à l’accueil",
+  "forgotpassword": {
+    "title": "Mot de passe oublié ?",
+    "subtitle": "Ne vous inquiétez pas, nous vous enverrons les instructions de réinitialisation",
+    "phone": "Numéro de téléphone",
+    "phoneplaceholder": "+251912345678 ou 09XXXXXXXX",
+    "invalidphone": "Format de numéro de téléphone invalide. Utilisez +2519XXXXXXXX ou 09XXXXXXXX",
+    "checkphone": "Vérifiez votre numéro de téléphone",
+    "checkdesc": "Nous enverrons un lien de réinitialisation du mot de passe à votre numéro de téléphone.",
+    "sending": "Envoi du lien de réinitialisation...",
+    "sendresetlink": "Envoyer le lien de réinitialisation",
+    "backtologin": "Retour à la connexion",
+    "remember": "Vous vous souvenez de votre mot de passe ?",
+    "signin": "se connecter",
+    "home": "Accueil",
+    "success": "Lien de réinitialisation du mot de passe envoyé",
+    "successdesc": "Veuillez vérifier votre numéro de téléphone pour le lien de réinitialisation.",
+    "fail": "Échec de la demande de réinitialisation du mot de passe"
+  },
+  "Don't have an account?": "Vous n’avez pas de compte ? Vous n’êtes pas utilisateur du système ?",
+  "addRecord": {
+    "Reference Number": "Numéro de référence",
+    "Enter Reference Number": "Saisir le numéro de référence",
+    "Record Tags": "Étiquettes de dossier",
+    "Select Record Tags": "Étiquettes de dossier",
+    "SelectedReceivingUnits": "Unités destinataires sélectionnées",
+    "EditRecord": "Modifier le dossier",
+    "editIncomingRecord": "Modifier le dossier",
+    "Record Type": "Type de dossier",
+    "Select Record Type": "Sélectionner le type de dossier",
+    "Initiation Type": "Type d’initiation",
+    "Select Initiation Type": "Sélectionner le type d’initiation",
+    "Receiving Unit": "Unité destinataire",
+    "Select Receiving Units": "Sélectionner l’unité destinataire",
+    "Receiving Users": "Utilisateurs destinataires",
+    "Select Receiving Users": "Sélectionner les utilisateurs destinataires",
+    "Prefix": "Préfixe",
+    "Select Prefix": "Sélectionner le préfixe",
+    "Non Smart Receiving Unit": "Unité destinataire non Smart",
+    "Enter Non Smart Receiving Organization": "Saisir l’organisation destinataire non Smart",
+    "To Departments": "Vers les départements",
+    "Select Department": "Sélectionner les départements",
+    "Preferred Language": "Langue préférée",
+    "Select Language": "Sélectionner la langue",
+    "Suffix": "Suffixe",
+    "Select Suffix": "Sélectionner le suffixe",
+    "Position Prefix": "Préfixe du poste",
+    "Select Position Prefix": "Sélectionner le préfixe du poste",
+    "Subject": "Objet",
+    "Enter Subject": "Saisir l’objet",
+    "Letter Template": "Modèle de courrier",
+    "Select Letter Template": "Sélectionner le modèle de courrier",
+    "Body": "Corps",
+    "External CC": "CC externe",
+    "Select External CC": "Sélectionner le CC externe",
+    "Internal CC": "CC interne",
+    "Select Internal CC": "Sélectionner le CC interne",
+    "Non Smart CC Unit": "Unité CC non Smart",
+    "Enter  Non Smart CC Organization": "Saisir l’organisation CC non Smart",
+    "Cancel": "Annuler",
+    "Add": "+ Ajouter",
+    "English": "Anglais",
+    "Amharic": "Amharique",
+    "Header": "En-tête du courrier",
+    "Select Header": "Sélectionner l’en-tête",
+    "No Header": "Aucun en-tête",
+    "Footer": "Pied de page du courrier",
+    "Select Footer": "Sélectionner le pied de page",
+    "No Footer": "Aucun pied de page",
+    "Collaborators": "Collaborateurs",
+    "Select Collaborators": "Sélectionner les collaborateurs",
+    "Sincerely Text": "Texte de salutation",
+    "Enter Sincerely Text": "Saisir le texte de salutation",
+    "record": "Dossier",
+    "attachment": "Pièce jointe",
+    "failedToCreateRecord": "Échec de la création du dossier",
+    "recordSubmittedSuccessfully": "Dossier transféré avec succès.",
+    "createRecordFirst": "Veuillez d’abord créer un dossier pour téléverser des pièces jointes.",
+    "previous": "Précédent",
+    "submit": "Soumettre",
+    "recordNotCreatedYet": "Le dossier n’a pas encore été créé.",
+    "submitting": "Soumission...",
+    "selectCollaborators": "Sélectionner les collaborateurs",
+    "Enter CC Prefix": "Saisir le préfixe CC",
+    "CC Prefix": "Préfixe CC",
+    "Enter CC Suffix": "Saisir le suffixe CC",
+    "CC Suffix": "Suffixe CC",
+    "Sign Status": "Statut de signature",
+    "ccUsers": "Utilisateurs en CC",
+    "selectCCUsers": "Sélectionner les utilisateurs en CC",
+    "refreshOptions": "Actualiser les options",
+    "isTeamSig": "Avec signature d’équipe",
+    "letterName": "Nom du fichier",
+    "addLetterName": "Saisir le nom du fichier",
+    "Edit Mode": "Mode modification",
+    "Create Mode": "Mode création",
+    "Edit Record": "Modifier le dossier",
+    "Create New Record": "Créer un nouveau dossier",
+    "Fill in the details below": "Remplissez les détails ci-dessous",
+    "Basic Information": "Informations de base",
+    "enterBasicDetails": "Saisir les informations de base de votre dossier",
+    "Creation Type": "Type de création",
+    "Select Creation Type": "Sélectionner le type de création",
+    "Recipients": "Destinataires",
+    "specifyRecipients": "Préciser qui recevra ce dossier",
+    "Template & Formatting": "Modèle et mise en forme",
+    "customizeAppearance": "Personnaliser l’apparence de votre dossier",
+    "Loading Headers...": "Chargement des en-têtes...",
+    "Loading Footers...": "Chargement des pieds de page...",
+    "Letter Content": "Contenu du courrier",
+    "writeLetterContent": "Rédiger le contenu de votre courrier",
+    "Header Preview": "Aperçu de l’en-tête",
+    "Footer Preview": "Aperçu du pied de page",
+    "Carbon Copy (CC)": "Copie carbone (CC)",
+    "addCCRecipients": "Ajouter des destinataires en copie carbone",
+    "forYourReference": "Pour votre référence",
+    "selectForYourReference": "Sélectionner les départements pour votre référence",
+    "Enter Non Smart CC Organization": "Saisir l’organisation CC non Smart",
+    "Attachments": "Pièces jointes",
+    "uploadSupportingDocuments": "Téléverser les documents justificatifs",
+    "personal": "Personnel",
+    "Position": "Poste",
+    "formHasErrors": "Veuillez corriger les erreurs du formulaire avant de soumettre",
+    "processingRequest": "Traitement de votre demande, veuillez patienter...",
+    "letterInformation": "Informations du courrier",
+    "organizationInformation": "Informations de l’organisation",
+    "skipOneLevel": "Doit sauter une étape"
+  },
+  "Preview Record": "Aperçu du dossier",
+  "preview": {
+    "title": "Aperçu du dossier",
+    "generating": "Génération de l’aperçu...",
+    "failed": "Échec de la génération de l’aperçu",
+    "retry": "Réessayer",
+    "close": "Fermer",
+    "print": "Imprimer",
+    "loading": "Chargement de l’aperçu...",
+    "error": "Impossible de générer l’aperçu",
+    "networkError": "Une erreur réseau s’est produite. Veuillez vérifier votre connexion et réessayer.",
+    "noData": "Aucune donnée d’aperçu disponible",
+    "button": "Aperçu",
+    "validationError": "Veuillez corriger les erreurs de validation avant l’aperçu"
+  },
+  "print": {
+    "title": "Options d’impression",
+    "description": "Sélectionnez ce que vous voulez imprimer",
+    "recordDocument": "Document du dossier",
+    "recordDescription": "Imprimer le document principal du dossier",
+    "attachments": "Pièces jointes",
+    "noAttachments": "Aucune pièce jointe disponible",
+    "summary": "Éléments à imprimer",
+    "selectAtLeastOne": "Veuillez sélectionner au moins un élément à imprimer",
+    "readyToPrint": "Prêt à imprimer",
+    "print": "Imprimer",
+    "printing": "Impression...",
+    "success": "Tâche d’impression envoyée avec succès",
+    "error": "Échec de l’impression. Veuillez réessayer.",
+    "cancel": "Annuler"
+  },
+  "incomingRecord": {
+    "createdSuccess": "Courrier entrant créé avec succès",
+    "updatedSuccess": "Courrier entrant mis à jour avec succès",
+    "UpdatedSuccessfully": "mis à jour avec succès"
+  },
+  "externalPortal": {
+    "letterSentSuccess": "Courrier soumis avec succès"
+  },
+  "userRecord": {
+    "All": "Tous",
+    "Draft": "Brouillon",
+    "createAndForward": "Créer et transférer",
+    "createAndApprove": "Créer et approuver",
+    "updateAndForward": "Mettre à jour et transférer",
+    "updateAndApprove": "Mettre à jour et approuver",
+    "recordCreatedAndForwarded": "Dossier créé et transféré",
+    "recordCreatedAndSent": "Dossier créé et envoyé",
+    "recordUpdatedAndForwarded": "Dossier mis à jour et transféré",
+    "recordCreatedReadyToApprove": "Dossier créé — choisissez un tampon et une signature pour approuver",
+    "recordUpdatedReadyToApprove": "Dossier mis à jour — choisissez un tampon et une signature pour approuver",
+    "The main file must be a PDF document": "Le fichier principal doit être un document PDF",
+    "storageUploadFailed": "Nous n’avons pas pu téléverser le fichier. Veuillez réessayer.",
+    "Submitted": "Transféré",
+    "Accepted": "Accepté",
+    "Approved": "Approuvé",
+    "Rejected": "Rejeté",
+    "Returned": "Retourné",
+    "Adjustment": "Ajustement",
+    "Team Signature": "Signatures en attente",
+    "Sent": "Envoyé",
+    "Letters": "Courriers",
+    "External Outgoing": "Sortant externe",
+    "Internal Outgoing": "Sortant interne",
+    "To": "À",
+    "Send": "Envoyer",
+    "Send Directly": "Envoyer directement",
+    "nonSmartReceiverName": "Destinataire non Smart",
+    "ReceiverPosition": "Poste destinataire",
+    "ReceiverEmployee": "Employé destinataire",
+    "ReceiverUnit": "Unité destinataire",
+    "Subject": "Objet",
+    "Date": "Date",
+    "Search": "Rechercher",
+    "Add Record": "Ajouter un dossier",
+    "Error loading records.": "Erreur lors du chargement des dossiers.",
+    "Receiver Info": "Informations du destinataire",
+    "No receivers": "Aucun destinataire",
+    "No receiving unit": "Aucune unité destinataire",
+    "Status": "Statut",
+    "Actions": "Actions",
+    "View Detail": "Voir le détail",
+    "MakeRecordSecure": "Sécuriser le dossier",
+    "UnsecureRecord": "Déverrouiller le dossier",
+    "RecordSecuredSuccess": "Dossier sécurisé avec succès.",
+    "RecordSecureFailed": "Échec de la sécurisation du dossier.",
+    "RecordUnsecuredSuccess": "Dossier déverrouillé avec succès.",
+    "RecordUnsecureFailed": "Échec du déverrouillage du dossier.",
+    "recordSecuredSuccess": "Dossier sécurisé avec succès.",
+    "recordUnsecuredSuccess": "Dossier déverrouillé avec succès.",
+    "recordMarkedUrgentSuccess": "Dossier marqué comme urgent.",
+    "recordUrgencyClearedSuccess": "Urgence du dossier retirée.",
+    "SecureDialogTitle": "Sécuriser ce dossier ?",
+    "SecureDialogDescription": "Cela verrouillera le dossier et le rendra sécurisé. Vous ne pouvez pas annuler cette action.",
+    "UnsecureDialogTitle": "Déverrouiller ce dossier ?",
+    "UnsecureDialogDescription": "Cela déverrouillera le dossier et le rendra à nouveau modifiable.",
+    "Open actions menu": "Ouvrir le menu des actions",
+    "Approve": "Approuver",
+    "Forward": "Transférer",
+    "Edit": "Modifier",
+    "Delete": "Supprimer",
+    "Download": "Télécharger",
+    "DirectSubmit": "Soumission directe",
+    "directSubmitTitle": "Soumettre directement le dossier",
+    "directSubmitDescription": "Sélectionner une signature pour soumettre ce dossier directement.",
+    "SelectSignature": "Signature",
+    "SelectSignaturePlaceholder": "Sélectionner une signature",
+    "noSignatureAvailable": "Aucune signature n’est disponible pour la soumission directe.",
+    "noSignatureForDirectSend": "Aucune signature active trouvée pour l’envoi direct.",
+    "directSubmitSuccess": "Dossier soumis directement avec succès.",
+    "directSubmitError": "Échec de la soumission directe du dossier.",
+    "directDispatchSuccess": "Dossier envoyé avec succès.",
+    "directDispatchError": "Échec de l’envoi du dossier.",
+    "SendDirectRecordTitle": "Envoyer le dossier direct",
+    "SendDirectRecordDescription": "Êtes-vous sûr de vouloir envoyer ce dossier direct ? Cette action ne peut pas être annulée.",
+    "Sending": "Envoi...",
+    "Record approved successfully!": "Dossier approuvé avec succès !",
+    "Record rejected successfully!": "Dossier rejeté avec succès !",
+    "Failed to approve record.": "Échec de l’approbation du dossier.",
+    "Approve Record": "Approuver le dossier",
+    "Record is deleted successfully": "Le dossier est supprimé avec succès",
+    "Confirm Delete": "Confirmer la suppression",
+    "Delete Record": "Supprimer le dossier",
+    "Downloaded": "Téléchargé",
+    "Download Record PDF": "Télécharger le PDF du dossier",
+    "Failed to download PDF.": "Échec du téléchargement du PDF.",
+    "Download successful!": "Téléchargement réussi !",
+    "Confirm Forward": "Confirmer le transfert",
+    "Forward Record": "Transférer le dossier",
+    "Failed to forward the record": "Échec du transfert du dossier",
+    "Record forwarded successfully": "Dossier transféré avec succès",
+    "Confirm Approve": "Confirmer l’approbation",
+    "Reference": "Le numéro de référence standard de l’organisation",
+    "ExternalReference": "Numéro de référence des courriers entrants",
+    "InternalMemoReference": "Numéro de référence de la note interne",
+    "Make Review": "Faire une révision",
+    "Confirm Review": "Confirmer la révision",
+    "Reject": "Rejeter",
+    "Filter by": "Filtrer par",
+    "Reference Number": "Numéro de référence",
+    "Enter the subject of the letter": "Saisir l’objet du courrier",
+    "Delivered By": "Livré par",
+    "Enter Delivered By": "Saisir livré par",
+    "Letter Number": "Numéro de courrier",
+    "Enter Letter Number": "Saisir le numéro de courrier",
+    "Failed to create letter": "Échec de la création du courrier",
+    "Letter Created successfully": "Courrier créé avec succès",
+    "Please select file": "Veuillez sélectionner un fichier",
+    "Created At": "Créé le",
+    "Sign Status": "Statut de signature",
+    "signStatus": "Statut de signature",
+    "createdAt": "Créé le",
+    "View": "Voir",
+    "Date Received": "Date de réception",
+    "Attachment": "Pièce jointe",
+    "ReceivingUnit": "Destinataire",
+    "Review your record before submission": "Vérifiez votre dossier avant la soumission",
+    "Back": "Retour",
+    "Submit Record": "Soumettre le dossier",
+    "Submitting": "Soumission",
+    "Generating preview": "Génération de l’aperçu",
+    "PDF Preview": "Aperçu PDF",
+    "Unable to generate preview": "Impossible de générer l’aperçu",
+    "Retry": "Réessayer",
+    "Record Summary": "Résumé du dossier",
+    "No subject": "Aucun objet",
+    "Record Type": "Type de dossier",
+    "Not specified": "Non spécifié",
+    "Language": "Langue",
+    "Initiation Type": "Type d’initiation",
+    "Preview generation failed": "Échec de la génération de l’aperçu",
+    "Preview": "Aperçu",
+    "Form": "Formulaire",
+    "History": "Historique entrant",
+    "Delete Delegation": "Supprimer la délégation",
+    "selectLetter": "Sélectionner le courrier",
+    "incomingLetters": "Courriers entrants",
+    "nonSmartLetters": "Courriers non Smart",
+    "sendingOrganization": "Organisation expéditrice",
+    "Sending Organization": "Organisation expéditrice",
+    "MarkUrgent": "Marquer comme urgent",
+    "UnmarkUrgent": "Retirer le marquage urgent",
+    "MarkUrgentDialogTitle": "Marquer ce dossier comme urgent ?",
+    "MarkUrgentDialogDescription": "Ce dossier sera marqué comme urgent pour un traitement rapide.",
+    "UnmarkUrgentDialogTitle": "Retirer le statut urgent de ce dossier ?",
+    "UnmarkUrgentDialogDescription": "Ce dossier n’apparaîtra plus comme urgent.",
+    "Activate": "Activer",
+    "ShareViaEmail": "Partager par e-mail",
+    "recordOfficeRegester": "Dossiers enregistrés par l’agent d’enregistrement",
+    "fromSmartUsers": "Des bureaux utilisant Smartoffice",
+    "fromExternalNonsmart": "D’utilisateurs Smart externes",
+    "addRecordRO": "Ajouter un dossier entrant",
+    "directSend": "Envoi direct",
+    "updateAndSend": "Mettre à jour et envoyer",
+    "createAndSend": "Créer et envoyer",
+    "Confirm Reject": "Confirmer le rejet"
+  },
+  "statusBar": {
+    "Skipped": "Ignoré",
+    "Pending": "En attente",
+    "pending": "En attente",
+    "Draft": "Brouillon",
+    "draft": "En cours",
+    "InProgress": "En cours",
+    "In progress": "En cours",
+    "In Progress": "En cours",
+    "active": "En cours",
+    "Reassigned": "Réassigné",
+    "re_assigned": "Réassigné",
+    "Approved": "Approuvé",
+    "Accepted": "Accepté",
+    "accepted": "Accepté",
+    "Dispatched": "Envoyé",
+    "Adjustment": "Ajustement",
+    "adjustment": "Ajustement",
+    "adjustment_requested": "Ajustement demandé",
+    "AdjustmentRequested": "Ajustement demandé",
+    "Rejected": "Rejeté",
+    "rejected": "Rejeté",
+    "Submitted": "Transféré",
+    "All": "Tous",
+    "Reject": "Rejeter",
+    "Accept": "Accepter",
+    "Approve": "Approuver",
+    "approved": "Approuver",
+    "Adjust": "Ajuster",
+    "Sent": "Envoyé",
+    "Send": "Envoyer",
+    "Team Signature": "Signatures en attente",
+    "Team Rejected": "Équipe rejetée",
+    "teamRejected": "Équipe rejetée",
+    "Team Approved": "Équipe approuvée",
+    "signed": "Signé",
+    "activated": "Activé",
+    "deactivated": "Désactivé",
+    "activate": "Activer",
+    "deactivate": "Désactiver",
+    "totalAllocations": "Total des affectations",
+    "assignmentStatistics": "Statistiques d’assignation",
+    "Outgoing": "Sortant",
+    "Incoming": "Entrant",
+    "Returned": "Retourné",
+    "Adjusted": "Ajusté",
+    "acceptForward": "Accepter et transférer",
+    "replaced": "Remplacé",
+    "seen": "Vu",
+    "assigned": "Assigné",
+    "not_assigned": "Non assigné",
+    "completionRate": "Taux d’achèvement",
+    "attentionNeeded": "Attention requise",
+    "onTrack": "Dans les délais",
+    "assInProg": "Assignation en cours",
+    "next": "Affectations suivantes",
+    "Under Review": "En révision",
+    "Re Assigned": "Réassigné",
+    "send_back_by_ro": "Renvoyé par l’agent d’enregistrement",
+    "replied": "Répondu",
+    "Replied": "Répondu",
+    "yes": "Oui",
+    "no": "Non",
+    "terminated": "Terminé",
+    "cancelled": "Annulé",
+    "canceled": "Annulé",
+    "ended": "Terminé",
+    "Expired": "Expiré",
+    "Team Adjusted": "Équipe ajustée"
+  },
+  "userIncoming": {
+    "Continue": "Continuer",
+    "Update and Assign": "Mettre à jour et assigner",
+    "Create and Assign": "Créer et assigner",
+    "Select a remark...": "Sélectionner des remarques courantes",
+    "Select Predefined Remark": "Sélectionner des remarques courantes",
+    "Clear": "Effacer",
+    "From Date": "De",
+    "To Date": "À",
+    "Letters": "Courriers",
+    "Department": "Département",
+    "Subject": "Objet",
+    "Date": "Date",
+    "Search": "Rechercher",
+    "Error loading records.": "Erreur lors du chargement des dossiers.",
+    "errDelegation": "Vous n’avez pas accès à cette page car votre compte est actuellement délégué.",
+    "Status": "Statut",
+    "Type": "Type",
+    "remarkAdded": "Remarque ajoutée",
+    "newAssignment": "Nouvelle assignation",
+    "Actions": "Actions",
+    "successassign": "Dossier assigné avec succès.",
+    "View Detail": "Voir le détail",
+    "Open actions menu": "Ouvrir le menu des actions",
+    "Sending Department": "Département expéditeur",
+    "No Department": "Aucun département",
+    "No Subject": "Aucun objet",
+    "Sending Organization (English)": "Organisation expéditrice (anglais)",
+    "Sending Organization": "Organisation expéditrice",
+    "Sending Organization (Amharic)": "Organisation expéditrice (amharique)",
+    "Accept": "Accepter",
+    "Assign": "Assigner",
+    "Edit": "Modifier",
+    "update": "Mettre à jour",
+    "Delete": "Supprimer",
+    "Download": "Télécharger",
+    "Reject": "Rejeter",
+    "Cancel": "Annuler",
+    "uploadIncomingRecord": "Ajouter un dossier entrant",
+    "Record accepted successfully": "Dossier accepté avec succès",
+    "Failed to accept record": "Échec de l’acceptation du dossier",
+    "Confirm Acceptance": "Confirmer l’acceptation",
+    "Are you sure you want to accept this record?": "Êtes-vous sûr de vouloir accepter ce dossier ?",
+    "Confirm": "Confirmer",
+    "Processing...": "Traitement...",
+    "Departments": "Départements",
+    "Select department(s)...": "Sélectionner des département(s)...",
+    "Employees": "Employés",
+    "Select employee(s)...": "Sélectionner des employé(s)...",
+    "Remark": "Remarque",
+    "Failed to Assign a Record": "Échec de l’assignation d’un dossier",
+    "Assign this record to one or more departments": "Assigner ce dossier à un ou plusieurs départements",
+    "Assign Record": "Assigner le dossier",
+    "An error occurred during assignment.": "Une erreur s’est produite lors de l’assignation.",
+    "Enter your remarks...": "Saisissez vos remarques...",
+    "Assigning...": "Assignation...",
+    "Are you sure you want to reject this record?": "Êtes-vous sûr de vouloir rejeter ce dossier ?",
+    "Failed to rejected record": "Échec du rejet du dossier",
+    "Record rejected successfully": "Dossier rejeté avec succès",
+    "To": "À",
+    "ConvertedBy": "Converti par",
+    "ReceiverDepartment": "Département destinataire",
+    "Assign CC": "Assigner en CC",
+    "Assign CC Record": "Assigner le dossier en CC",
+    "Assign this CC record to one or more positions": "Assigner ce dossier CC à un ou plusieurs postes",
+    "Select Positions": "Sélectionner des postes",
+    "Select positions to assign": "Sélectionner les postes à assigner",
+    "Comment": "Commentaire",
+    "Quick Remarks": "Remarques rapides",
+    "Failed to Assign CC Record": "Échec de l’assignation du dossier en CC",
+    "ReceiverEmployee": "Employé destinataire",
+    "return": "Retourner",
+    "returnQues": "Êtes-vous sûr de vouloir retourner ce dossier ?",
+    "returing": "Retour...",
+    "conformReturn": "Confirmer le retour",
+    "Reference Number": "Numéro de référence",
+    "Dispatched Date": "Date d’expédition",
+    "No Sending organization": "Aucune organisation expéditrice",
+    "noRemark": "Aucune remarque trouvée",
+    "searchRemark": "Rechercher une remarque...",
+    "Is Secured": "Est sécurisé",
+    "Is Urgent": "Est urgent",
+    "Receiving Organization": "Organisation destinataire",
+    "Attachments": "Pièces jointes",
+    "nonSmart": "D’un utilisateur non Smart",
+    "external": "D’un utilisateur Smart",
+    "self": "Mon dossier",
+    "parent": "Mon dossier parent",
+    "errorLoadingRecords": "Erreur lors du chargement des dossiers",
+    "reply": "Répondre",
+    "replyRecord": "Dossier de réponse",
+    "remarkDate": "Date de remarque",
+    "isReplyLetter": "Est une lettre de réponse",
+    "ViewReplyLetterDetails": "Voir le détail de la lettre de réponse",
+    "isSecured": "Sécurisé",
+    "isUrgent": "Urgent",
+    "RecordStatus": "Statut du dossier"
+  },
+  "ApprovalPage": {
+    "Record adjusted successfully": "Dossier ajusté avec succès",
+    "yourStamp": "Votre cachet",
+    "Letters": "Courriers",
+    "Department": "Département",
+    "Subject": "Objet",
+    "Date": "Date",
+    "Search": "Rechercher",
+    "Error loading records.": "Erreur lors du chargement des dossiers.",
+    "Status": "Statut",
+    "Actions": "Actions",
+    "View Detail": "Voir le détail",
+    "Open actions menu": "Ouvrir le menu des actions",
+    "receiverEmployee": "Employé destinataire",
+    "receiverPosition": "Poste destinataire",
+    "LetterName": "Nom du fichier",
+    "Receiver": "Destinataire",
+    "No Subject": "Aucun objet",
+    "Record accepted successfully": "Dossier accepté avec succès",
+    "Confirm": "Confirmer",
+    "Remark": "Remarque",
+    "Remarks": "Remarques",
+    "Accept Record": "Accepter le dossier",
+    "Record Rejected successfully": "Dossier rejeté avec succès",
+    "recordAdjustedSuccessfully": "Dossier ajusté avec succès",
+    "confirmAdjustment": "Confirmer l’ajustement",
+    "adjustRecord": "Ajuster le dossier",
+    "selectOrUploadSignature": "Veuillez sélectionner ou téléverser une signature",
+    "selectOrUploadTeeter": "Veuillez sélectionner ou téléverser un cachet",
+    "recordApprovedSuccessfully": "Dossier approuvé avec succès !",
+    "failedToApproveRecord": "Échec de l’approbation du dossier.",
+    "approveRecord": "Approuver le dossier",
+    "confirmApprove": "Confirmer l’approbation",
+    "confirmRejection": "Confirmer le rejet",
+    "rejectRecord": "Rejeter le dossier",
+    "RecordType": "Type de dossier",
+    "selectStamp": "Sélectionner le tampon",
+    "selectTetter": "Sélectionner le cachet",
+    "selectedStamp": "Tampon sélectionné :",
+    "signature": "Signature",
+    "yourSignature": "Votre signature :",
+    "selectedSignature": "Signature sélectionnée :",
+    "selectSignature": "Sélectionner une signature",
+    "approving": "Approbation...",
+    "All": "Tous",
+    "FileName": "Nom du fichier",
+    "SendingDepartment": "Département expéditeur",
+    "RecordStatus": "Statut du dossier"
+  },
+  "viewDetail": {
+    "for": "Pour",
+    "viewDetail": "Voir le détail",
+    "from": "De",
+    "letter": "Courrier principal",
+    "letterPreview": "Aperçu du courrier",
+    "view": "Voir",
+    "fullScreen": "Plein écran",
+    "back": "Retour",
+    "loading": "Chargement...",
+    "noPreview": "Aucun aperçu trouvé",
+    "securedRecordMessage": "Comme le dossier est sécurisé, vous ne pouvez pas le consulter.",
+    "securedAttachmentMessage": "Comme le dossier est sécurisé, vous ne pouvez pas consulter les pièces jointes.",
+    "receivingOrganizations": "Organisations destinataires",
+    "receivingUserEmployees": "Employés utilisateurs destinataires",
+    "sendingDepartment": "Département expéditeur",
+    "externalCcOrganizations": "Organisations CC externes",
+    "internalCcDepartments": "Départements CC internes",
+    "receivingDepartments": "Départements destinataires",
+    "sentDate": "Date d’envoi",
+    "referenceNumber": "Numéro de référence",
+    "attachments": "Pièces jointes",
+    "remarks": "Remarques",
+    "loadingRemarks": "Chargement des remarques...",
+    "failedToLoadRemarks": "Échec du chargement des remarques.",
+    "noRemarksAvailable": "Aucune remarque disponible pour ce dossier.",
+    "action": "Action",
+    "comment": "Commentaire :",
+    "noAttachmentsAvailable": "Aucune pièce jointe disponible.",
+    "open": "Ouvrir",
+    "subject": "Objet",
+    "letterNumber": "Numéro de courrier",
+    "deliveredBy": "Livré par",
+    "personalRemark": "Remarque personnelle",
+    "noPersonalRemarkProvided": "Aucune remarque personnelle disponible",
+    "regeneratePdf": "Régénérer le PDF",
+    "regeneratingPdf": "Régénération...",
+    "pdfRegenerationSuccess": "PDF régénéré avec succès",
+    "pdfRegenerationFailed": "Échec de la régénération du PDF",
+    "sendingBureau": "Bureau expéditeur",
+    "collaborators": "Collaborateurs",
+    "recordDetail": "Détail du dossier",
+    "commentorEmployee": "Employé commentateur",
+    "commentorDepartment": "Département du commentateur",
+    "noComment": "Aucun commentaire",
+    "fileName": "Nom du fichier",
+    "fileName1": "Nom du fichier (numéro de référence RO)",
+    "toogleColumns": "Basculer les colonnes",
+    "sendingEmployee": "Employé expéditeur"
+  },
+  "PDF": {
+    "dropFilesHere": "Déposez les fichiers ici",
+    "dragDropInstruction": "Glissez-déposez les fichiers ici, ou cliquez pour sélectionner des fichiers",
+    "youCanUpload": "Vous pouvez téléverser",
+    "removeFile": "Supprimer le fichier",
+    "filesUpTo": "Fichiers (jusqu’à ",
+    "aFileWith": "Un fichier avec",
+    "file": "Fichier",
+    "wasRejected": "A été rejeté",
+    "uploaded": "Téléversé",
+    "failedToUpload": "Échec du téléversement",
+    "uploading": "Téléversement...",
+    "cannotUploadMoreThan": "Impossible de téléverser plus de "
+  },
+  "shareViaEmail": {
+    "title": "Partager le dossier par e-mail",
+    "description": "Saisir l’adresse e-mail avec laquelle partager ce dossier.",
+    "emailLabel": "Adresse e-mail",
+    "emailPlaceholder": "Saisir l’adresse e-mail",
+    "emailRequired": "L’adresse e-mail est requise",
+    "invalidEmailFormat": "Veuillez saisir une adresse e-mail valide",
+    "shareButton": "Partager le dossier",
+    "shareSuccess": "Dossier partagé avec succès par e-mail",
+    "shareFailed": "Échec du partage du dossier par e-mail",
+    "networkError": "Une erreur réseau s’est produite. Veuillez vérifier votre connexion et réessayer."
+  },
+  "convert": {
+    "recordConverted": "Dossier converti avec succès.",
+    "selectSeal": "Veuillez sélectionner un sceau.",
+    "convertRecord": "Convertir le dossier",
+    "recordType": "Type de dossier :",
+    "subject": "Objet :",
+    "convertAndDispatch": "Convertir et expédier",
+    "selectSealLabel": "Sélectionner le sceau :",
+    "loadingSeals": "Chargement des sceaux...",
+    "selectSealPlaceholder": "-- Sélectionner un sceau --",
+    "selectedSealPreview": "Aperçu du sceau sélectionné :",
+    "drawSig": "Dessiner la signature"
+  },
+  "delegation": {
+    "delegatedPosition": "Poste délégué",
+    "delegateePosition": "Poste délégataire",
+    "delegateeEmployee": "Employé délégataire",
+    "selectDelegatedPosition": "Sélectionner le poste délégué",
+    "delegateTo": "Déléguer à (employé)",
+    "selectEmployee": "Sélectionner un employé",
+    "noEmployeesAvailable": "Aucun employé disponible pour ce poste",
+    "startDate": "Date de début",
+    "pickDate": "Choisir une date",
+    "endDate": "Date de fin",
+    "endDateMinimumFutureError": "La date de fin doit être au moins 2 minutes à partir de maintenant",
+    "update": "Mettre à jour",
+    "save": "Enregistrer",
+    "title": "Délégation",
+    "newDelegation": "Nouvelle délégation",
+    "editDelegation": "Modifier la délégation",
+    "addDelegation": "Ajouter une délégation",
+    "position": "Poste délégué",
+    "active": "Actif",
+    "delegator": "Délégant",
+    "delegatedEmployee": "Employé délégué",
+    "currentEndDate": "Date de fin actuelle",
+    "select": " Sélectionner",
+    "acting": "Agissant en tant que",
+    "switchRole": "Changer de rôle",
+    "successDelete": "La délégation est supprimée avec succès",
+    "activeDelegationExists": "une délégation active existe ; modifiez la délégation active ou supprimez-la et recréez-en une",
+    "createdSuccess": "Délégation créée avec succès",
+    "deletedSuccess": "Délégation supprimée avec succès",
+    "updatedSuccess": "Délégation mise à jour avec succès",
+    "terminationDetail": "Détail de résiliation",
+    "viewTerminationDetail": "Voir le détail de résiliation",
+    "terminatedSuccess": "Délégation terminée avec succès",
+    "deleteDescription": "Fournissez une raison pour mettre fin à cette délégation.",
+    "deleteReasonLabel": "Raison",
+    "deleteReasonPlaceholder": "Pourquoi mettez-vous fin à cette délégation ?",
+    "deleteReasonRequired": "Veuillez fournir une raison pour la suppression.",
+    "myDelegations": "Mes délégations",
+    "myDelegatee": "Mon délégué",
+    "letter": "Lettre de délégation",
+    "selectLetter": "Sélectionner le courrier",
+    "viewLetter": "Voir la lettre de délégation",
+    "noLetterAssigned": "Aucune lettre de délégation",
+    "letterDetails": "Détails du courrier sélectionné",
+    "recordInformation": "Informations du dossier",
+    "letterPreview": "Aperçu du document",
+    "openInNewTab": "Ouvrir dans un nouvel onglet",
+    "pdfNotAvailable": "Document PDF non disponible",
+    "recordNotFound": "Dossier sélectionné introuvable",
+    "pdfNotFound": "Document PDF introuvable",
+    "pdfLoadError": "Échec du chargement du document PDF",
+    "loadingPdf": "Chargement du document...",
+    "retryPdf": "Réessayer le chargement",
+    "receiverPositions": "Destinataires",
+    "initiator": "Initiée par",
+    "latestComment": "Dernier commentaire",
+    "commentMeta": "Donné par",
+    "commentMetaOn": "le"
+  },
+  "signatureUpload": {
+    "signature": "Signature",
+    "teeter": "Cachet",
+    "uploadSignature": "Téléverser la signature",
+    "uploadTeeter": "Téléverser le cachet",
+    "uploadSignatureNote": "Téléverser la signature (PNG uniquement)",
+    "uploadTeeterNote": "Téléverser le cachet (PNG uniquement)",
+    "uploadedSignature": "Signature téléversée :",
+    "uploadedTeeter": "Cachet téléversé :",
+    "enterFileName": "Saisir le nom du fichier (sans extension)",
+    "preview": "Aperçu :",
+    "upload": "Téléverser",
+    "uploading": "Téléversement...",
+    "remove": "Supprimer",
+    "removing": "Suppression...",
+    "removedSuccess": "Supprimé avec succès.",
+    "removeTeeterFailed": "Échec de la suppression du cachet",
+    "removeFailed": "Échec de la suppression.",
+    "selectPngFirst": "Veuillez d’abord sélectionner un fichier PNG.",
+    "onlyPngAllowed": "Seuls les fichiers PNG sont autorisés.",
+    "signatureExists": "La signature existe déjà. Supprimez-la pour en téléverser une nouvelle.",
+    "uploadSuccess": "Téléversement réussi !",
+    "uploadError": "Erreur de téléversement :",
+    "uploadFailed": "Échec du téléversement.",
+    "openSignatureForm": "Ouvrir le panneau de signature",
+    "generateTeeter": "Générer le cachet",
+    "selectTeeterLanguage": "Sélectionner la langue du cachet",
+    "languageAmharic": "Amharique",
+    "languageEnglish": "Anglais",
+    "languageBoth": "Les deux (amharique puis anglais)",
+    "confirmGenerateTeeter": "Générer",
+    "cancelGenerateTeeter": "Annuler",
+    "uploadGeneratedTeeter": "Téléverser le cachet généré",
+    "generatedTeeterPreview": "Aperçu du cachet généré",
+    "downloadTransparentPng": "Télécharger le PNG transparent",
+    "stampNameLabel": "Nom",
+    "stampPositionLabel": "Poste",
+    "stampBlockAmharic": "Amharique",
+    "stampBlockEnglish": "Anglais",
+    "missingEmployeeData": "Le nom ou le poste de l’employé n’est pas disponible."
+  },
+  "assignment": {
+    "assignedBy": "Assigné par",
+    "assignedTo": "Assigné à",
+    "assignedOn": "Assigné le :",
+    "comment": "Commentaire :",
+    "assignmentFlow": "Flux d’assignation",
+    "noAssignments": "Aucune assignation n’a encore été effectuée pour ce dossier.",
+    "responded": "Répondu",
+    "assignedUsing": "Assigné via :",
+    "byName": "Nom de l’employé",
+    "byDepartment": "Nom du département"
+  },
+  "auth": {
+    "welcomeBack": "Bon retour",
+    "enterCredentials": "Veuillez saisir vos identifiants pour continuer",
+    "email": "E-mail",
+    "phoneNumber": "Numéro de téléphone",
+    "username": "Nom d’utilisateur",
+    "password": "Mot de passe",
+    "rememberMe": "Se souvenir de moi",
+    "forgotPassword": "Mot de passe oublié ?",
+    "loggingIn": "Connexion...",
+    "login": "Connexion",
+    "welcomeHeadline": "Bienvenue dans votre Smart Office",
+    "paperlessOffice": "Bureau sans papier",
+    "welcomeSubtext": "Connectez-vous pour rationaliser votre flux de travail et éliminer l’encombrement.",
+    "emailAddress": "Adresse e-mail",
+    "err": "Numéro de téléphone éthiopien invalide. Il doit commencer par +251",
+    "invalidEmail": "Veuillez saisir une adresse e-mail valide"
+  },
+  "msg": {
+    "sent": "Le courrier est envoyé",
+    "genericError": "Une erreur s’est produite",
+    "authError": "Session expirée",
+    "authErrorDescription": "Veuillez vous reconnecter.",
+    "validationError": "Certaines informations soumises sont invalides. Veuillez vérifier et réessayer.",
+    "permissionError": "Vous n’avez pas l’autorisation d’effectuer cette action.",
+    "notFoundError": "Nous n’avons pas trouvé ce que vous cherchiez.",
+    "fileTooLarge": "Le fichier est trop volumineux. Veuillez réduire sa taille et réessayer.",
+    "serverError": "Un problème est survenu de notre côté. Veuillez réessayer dans un instant.",
+    "attachmentDeleted": "Pièce jointe supprimée avec succès.",
+    "replyAdded": "Réponse ajoutée avec succès !",
+    "replyError": "Une erreur s’est produite lors de l’ajout de la réponse.",
+    "failedToCreate": "Échec de la création du dossier",
+    "failedToGetUrl": "Échec de l’obtention de l’URL de téléversement",
+    "registrationSuccess": "Inscription effectuée. Nous avons envoyé un SMS pour définir votre mot de passe avec succès.",
+    "errorOccurred": "Une erreur s’est produite.",
+    "successfullyCompleted": "Modifications enregistrées avec succès.",
+    "pdfRegenerated": "PDF régénéré avec succès.",
+    "approveFailed": "Échec de l’approbation du dossier.",
+    "approveSuccess": "Dossier approuvé avec succès",
+    "selectPrompt": "Veuillez sélectionner un tampon.",
+    "extendedSuccess": "Délégation prolongée avec succès.",
+    "letter": "Courrier",
+    "approvedSuccess": "Dossier approuvé avec succès !",
+    "submittedSuccess": "Dossier soumis avec succès !",
+    "reviewSuccess": "Dossier mis en révision avec succès !",
+    "markedForAdjustment": "Marqué pour ajustement",
+    "sentToOfficer": "Envoyé à l’agent d’enregistrement",
+    "errorSendingToOfficer": "Erreur lors de l’envoi à l’agent d’enregistrement",
+    "success": "Délégation réussie.",
+    "failed": "Échec de la délégation.",
+    "deletedSuccess": "Délégation supprimée avec succès.",
+    "deleteFailed": "Échec de la suppression de la délégation.",
+    "failedCreateOrGetUrl": "Échec de la création du dossier ou de l’obtention de l’URL de téléversement.",
+    "sentAndUploadedSuccess": "Courrier envoyé et fichier téléversé avec succès.",
+    "failedSendOrUpload": "Échec de l’envoi du courrier ou du téléversement du fichier.",
+    "successassign": "Dossier assigné avec succès.",
+    "submittedWithAttachments": "Dossier et pièces jointes soumis.",
+    "createFailed": "Échec de la création du dossier.",
+    "refreshedSuccess": "Actualisé avec succès.",
+    "refreshFailed": "Échec de l’actualisation.",
+    "redirecting": "Redirection...",
+    "loginSuccess": "Connexion réussie.",
+    "receivingDepartmentRequired": "Au moins un département destinataire est requis",
+    "receivingUnitRequired": "Au moins une unité destinataire est requise",
+    "recordTypeRequired": "Le type de dossier est requis",
+    "initiationTypeRequired": "Le type d’initiation est requis",
+    "subjectRequired": "L’objet est requis",
+    "preferredLanguageRequired": "La langue préférée est requise",
+    "bodyRequired": "Le corps est requis",
+    "sincerelyTextRequired": "Le texte de salutation est requis",
+    "headerRequired": "L’en-tête est requis",
+    "footerRequired": "Le pied de page est requis",
+    "accessDenied": "Accès refusé",
+    "accessDeniedmsg": "Vous ne pouvez pas accéder à cette page car vous avez une délégation active. Veuillez supprimer la délégation pour continuer.",
+    "accessDeniedmsg2": "Vous ne pouvez pas accéder à cette page car vous avez une délégation active. Vous ne pouvez pas déléguer si vous êtes déjà délégué par un autre employé",
+    "accessDeniedmsg3": "Vous ne pouvez pas accéder au module de gestion des dossiers car vous n’êtes pas enregistré dans cette organisation ou aucun poste ne vous a été assigné",
+    "sendingOrgRequired": "L’organisation expéditrice est requise",
+    "deliveredByRequired": "Le champ « Livré par » est requis",
+    "letterNoRequired": "Le numéro de courrier est requis",
+    "letterNameRequired": "Le nom du fichier est requis",
+    "noReferenceNumber": "Le courrier n’est pas envoyé, donc aucun numéro de référence",
+    "noMsg": "Parce que le courrier n’a pas encore été envoyé",
+    "sincerely": "Cordialement",
+    "changePasswordMsg": "Définir un nouveau mot de passe pour votre compte",
+    "oldPassword": "Ancien mot de passe",
+    "newPassword": "Nouveau mot de passe",
+    "confirmNewPassword": "Confirmer le nouveau mot de passe",
+    "chaning": "changement...",
+    "failedChange": "Échec du changement de mot de passe",
+    "successChange": "Mot de passe modifié avec succès",
+    "logoutSuccess": "Déconnexion réussie",
+    "logoutFailed": "Échec de la déconnexion",
+    "passwordMismatch": "Le nouveau mot de passe et sa confirmation ne correspondent pas",
+    "passwordRequirements": "Le mot de passe doit contenir au moins 8 caractères",
+    "currentPasswordRequired": "Le mot de passe actuel est requis",
+    "newPasswordRequired": "Le nouveau mot de passe est requis",
+    "passwordMinLength": "Le mot de passe doit contenir au moins 8 caractères",
+    "passwordMustBeDifferent": "Le nouveau mot de passe doit être différent de votre mot de passe actuel",
+    "confirmPasswordRequired": "Veuillez confirmer votre nouveau mot de passe",
+    "uppercaseLetter": "lettre majuscule",
+    "lowercaseLetter": "lettre minuscule",
+    "number": "numéro",
+    "specialCharacter": "caractère spécial",
+    "passwordComplexity": "Le mot de passe doit contenir au moins un",
+    "passwordResetSuccess": "Vous pouvez maintenant vous connecter avec votre nouveau mot de passe",
+    "selectAll": "Tout sélectionner",
+    "error": "Erreur",
+    "createRecordMsg": "Remplissez les détails pour créer un nouveau dossier entrant",
+    "updateRecordMsg": "Mettre à jour les détails du dossier entrant ci-dessous",
+    "completionRate": "Calcul : acceptés + rejetés + réassignés + répondus divisés par le total des assignations",
+    "totalAllocations": "Nombre total de courriers assignés aux utilisateurs ou départements",
+    "reassigned": "Courriers redirigés d’un utilisateur ou département vers un autre",
+    "rejected": "Courriers refusés ou non approuvés par le destinataire",
+    "accepted": "Courriers approuvés ou reconnus par le destinataire",
+    "replied": "Courriers ayant reçu une réponse ou un suivi du destinataire",
+    "draft": "Courriers en attente d’une action ou d’une décision du destinataire",
+    "waitingMsg": "Aucun contenu n’est disponible sur ce site pour le moment, car l’administrateur n’a pas encore fourni ou publié de ressources.",
+    "recordDes": "Ce lien vous mène à la gestion des dossiers",
+    "orgAdminDes": "Ce lien mène à la gestion du site",
+    "recycleBin": "Corbeille",
+    "ccEmployeesInvalidSelection": "Un ou plusieurs utilisateurs CC sélectionnés n’ont pas de poste assigné valide. Supprimez-les ou mettez à jour leur profil employé."
+  },
+  "landingPage": {
+    "smartOffice": "Smart Office",
+    "signIn": "Se connecter",
+    "signUp": "S’inscrire",
+    "overview": "Aperçu",
+    "features": "Fonctionnalités",
+    "workflow": "Flux de travail",
+    "manual": "Manuel",
+    "digitalTransformation": "Transformation numérique pour des opérations gouvernementales modernes.",
+    "facebook": "Facebook",
+    "twitter": "Twitter",
+    "linkedIn": "LinkedIn",
+    "telegram": "Telegram",
+    "tiktok": "TikTok",
+    "website": "Site web",
+    "contactUs": "Nous contacter",
+    "quickLinks": "Liens rapides",
+    "copyright": "Tria Plc - Copyright ©",
+    "rightsReserved": "Tous droits réservés - Propulsé par Tria",
+    "address": "Lingo Tower en face de Sheger House, Bole, Addis-Abeba, Éthiopie",
+    "platformSystem": "Smart Office",
+    "initiativeDescription": "Une initiative complète de transformation numérique visant à moderniser les opérations des bureaux gouvernementaux grâce à l’adoption de technologies de pointe.",
+    "getStarted": "Commencer",
+    "learnMore": "En savoir plus",
+    "sops": "SOPS",
+    "smartOfficePlatformSystem": "Système Smart Office",
+    "revolutionDescription": "Révolutionner les opérations gouvernementales grâce à l’automatisation des flux de travail alimentée par l’IA et à l’analyse en temps réel.",
+    "liveDemo": "Démo en direct disponible",
+    "outgoingRecords": "Dossiers sortants",
+    "outgoingRecordsDesc": "Créer et envoyer des dossiers internes ou externes avec pièces jointes et flux d’approbation hiérarchiques.",
+    "incomingRecords": "Dossiers entrants",
+    "incomingRecordsDesc": "Consulter, accepter et répondre aux dossiers reçus, avec la possibilité de les assigner aux départements concernés.",
+    "approvalWorkflows": "Flux d’approbation",
+    "approvalWorkflowsDesc": "Prise en charge des courriers et signatures numériques avec des processus d’approbation hiérarchiques adaptés à la structure de votre bureau.",
+    "interactiveDashboard": "Tableau de bord interactif",
+    "interactiveDashboardDesc": "Suivi en temps réel des dossiers entrants et sortants, avec résumés par département et approbations en attente.",
+    "organizedFolders": "Dossiers organisés",
+    "organizedFoldersDesc": "Catégoriser les dossiers à l’aide d’un système structuré avec des capacités avancées de recherche et de filtrage.",
+    "securityAccessControl": "Sécurité et contrôle d’accès",
+    "securityAccessControlDesc": "Accès basé sur les rôles avec pistes d’audit complètes pour toutes les actions et modifications de documents.",
+    "powerfulFeaturesTitle": "Fonctionnalités puissantes",
+    "powerfulFeaturesSubtitle": "Rationalisez votre flux de travail documentaire",
+    "powerfulFeaturesDesc": "Nos outils complets vous aident à gérer les dossiers efficacement tout en maintenant la sécurité et la conformité.",
+    "feature1": "Délais d’approbation plus rapides",
+    "feature2": "Dossiers mieux organisés",
+    "feature3": "Conformité d’audit",
+    "documentWorkflow": "Flux de travail documentaire",
+    "recordCreation": "Création de dossier",
+    "recordCreationDesc": "L’utilisateur crée un nouveau dossier avec des pièces jointes et des métadonnées",
+    "teamLeaderReview": "Révision par le chef d’équipe",
+    "teamLeaderReviewDesc": "Approbation de premier niveau par le supérieur immédiat",
+    "directorApproval": "Approbation du directeur",
+    "directorApprovalDesc": "Le responsable du département révise et approuve",
+    "deputyHeadReview": "Révision par l’adjoint au responsable",
+    "deputyHeadReviewDesc": "Approbation administrative finale avant soumission",
+    "recordOfficerProcessing": "Traitement par l’agent d’enregistrement",
+    "recordOfficerProcessingDesc": "Enregistrement officiel et expédition",
+    "streamlinedProcess": "Processus rationalisé",
+    "recordManagementApprovalWorkflows": "Flux d’approbation de la gestion des dossiers",
+    "smartOfficeDescription": "Smart Office reflète votre hiérarchie organisationnelle avec des flux de travail numériques personnalisables qui garantissent une supervision et une responsabilité appropriées.",
+    "step": "ÉTAPE",
+    "requestChanges": "Demander des modifications",
+    "workflowAutomationBenefits": "Avantages de l’automatisation des flux de travail",
+    "workflowAutomationDesc": "Notre système intelligent de flux de travail réduit le temps de traitement de 65 % tout en garantissant la conformité à vos politiques organisationnelles.",
+    "fasterApprovals": "Approbations 65 % plus rapides",
+    "reduceDelays": "Réduire les retards bureaucratiques",
+    "auditTrail": "Piste d’audit à 100 %",
+    "completeRecord": "Historique complet de toutes les actions",
+    "advancedFeatures": "Fonctionnalités avancées",
+    "slaMonitoring": "Suivi des SLA",
+    "slaMonitoringDesc": "Suivi automatique des accords de niveau de service avec alertes d’escalade en cas de retard.",
+    "conditionalRouting": "Routage conditionnel",
+    "conditionalRoutingDesc": "Des règles intelligentes acheminent automatiquement les documents selon le contenu, la valeur ou le département.",
+    "temporaryApprovalDelegation": "Délégation temporaire d’approbation pour les congés avec suivi d’audit complet.",
+    "approvalworkflow": "Flux d’approbation",
+    "uptime": "Disponibilité",
+    "bureaus": "Bureaux",
+    "support": "Assistance",
+    "features1": "Évolutif",
+    "features2": "Prise en charge multiplateforme",
+    "features3": "Synchronisation des données dans le cloud",
+    "features4": "fonctionnement en faible connectivité",
+    "features5": "Conception réactive/adaptative",
+    "features6": "Sécuriser",
+    "login": "Connexion au système",
+    "step1": "1. Cliquez sur le",
+    "headerBtn": "bouton dans l’en-tête",
+    "step2": "2. Saisissez le nom d’utilisateur et le mot de passe fournis par votre administrateur",
+    "step3": "3. Cliquez sur le",
+    "accessBtn": "bouton pour accéder au système",
+    "note": "Remarque",
+    "forgotIntro": "Si vous oubliez votre mot de passe, contactez votre administrateur système pour le réinitialiser.",
+    "dashboardTitle": "Aperçu du tableau de bord",
+    "dashboardDesc": "Le tableau de bord fournit un aperçu complet de vos activités de dossier :",
+    "recordsCreated": "Dossiers créés",
+    "recordsTotal": "Total des dossiers que vous avez initiés",
+    "recordsReceived": "Dossiers reçus :",
+    "incomingDocs": "Documents entrants provenant d’autres personnes",
+    "breakdown": "Répartition interne/externe :",
+    "visuals": "Graphiques visuels montrant les types de documents",
+    "approvalStatus": "Statut d’approbation",
+    "approvalTypes": "Dossiers en attente, approuvés ou rejetés",
+    "quickActions": "Actions rapides",
+    "createOrCheck": "Créer de nouveaux dossiers ou vérifier les approbations en attente directement depuis le tableau de bord",
+    "recentActivity": "Activité récente",
+    "trackUpdates": "Suivre les dernières mises à jour de vos documents",
+    "manageOut": "Gestion des dossiers sortants",
+    "createNew": "Création de nouveaux dossiers",
+    "goToTab": "Accédez au",
+    "clickBtn": "Cliquez sur le bouton",
+    "fillFields": "Remplissez tous les champs requis (type de dossier, destinataire, objet, etc.)",
+    "attach": "Joindre des documents justificatifs si nécessaire",
+    "saveOrSubmit": "Enregistrer comme brouillon ou soumettre pour approbation",
+    "trackStatus": "Suivi du statut du dossier",
+    "notForwarded": "Cet élément n’a pas encore été transféré. Cet élément peut être modifié et supprimé",
+    "awaiting": "Cet élément attend acceptation ou approbation.",
+    "accepted": "Cet élément a été accepté et attend approbation.",
+    "approvedSent": "Cet élément a été approuvé et envoyé à l’agent d’enregistrement pour expédition.",
+    "returned": "Cet élément a été retourné pour ajustements ou informations supplémentaires. Veuillez consulter les commentaires.",
+    "rejected": "Cet élément a été rejeté.",
+    "sent": "Cet élément a été envoyé aux destinataires.",
+    "returnedByOfficer": "Cet élément a été retourné par l’agent d’enregistrement.",
+    "monitor": "Suivez vos dossiers à chaque étape d’approbation du flux de travail",
+    "manageIncoming": "Gestion des dossiers entrants",
+    "incomingTypes": "Types de dossiers entrants",
+    "fromOthers": "D’autres organisations",
+    "withinOrg": "Au sein de votre organisation",
+    "copied": "Copié pour votre information",
+    "processIncoming": "Traitement des dossiers entrants",
+    "readDoc": "Ouvrir et lire le document complet",
+    "acknowledge": "Accuser réception du document",
+    "forward": "Transférer à un autre membre de l’équipe si nécessaire",
+    "archive": "Archiver",
+    "fileRef": "Classer pour référence future",
+    "apprvalworkflow": "Flux d’approbation",
+    "process": "Processus d’approbation",
+    "internalFlow": "Flux des dossiers internes :",
+    "creator": "Créateur",
+    "leader": "Chef d’équipe",
+    "director": "Directeur",
+    "officer": "Agent d’enregistrement",
+    "externalFlow": "Flux des dossiers externes :",
+    "actions": "Actions d’approbation",
+    "delegation": "Gestion des délégations",
+    "delegateInfo": "Lorsque vous êtes indisponible, vous pouvez déléguer votre autorité d’approbation à un autre membre de l’équipe :",
+    "delegateNav": "Accédez au",
+    "selectColleague": "Sélectionner un collègue dans la structure de votre organisation",
+    "setDates": "Définir les dates de début et de fin de la période de délégation",
+    "setPerms": "Préciser les autorisations à déléguer",
+    "saveDelegate": "Enregistrer les paramètres de délégation",
+    "autoExpire": "Les délégations expirent automatiquement à la date de fin que vous indiquez.",
+    "collab": "Espace de collaboration",
+    "collabInfo": "L’onglet collaboration rassemble les dossiers nécessitant la contribution de plusieurs membres de l’équipe :",
+    "viewDocs": "Voir tous les documents collaboratifs au même endroit",
+    "addComments": "Ajouter vos commentaires ou annotations",
+    "approve": "Approuver avec votre signature numérique lorsque le consensus est atteint",
+    "trackChanges": "Suivre les modifications et l’historique des versions",
+    "realTime": "Mises à jour en temps réel",
+    "liveChanges": "Voir les modifications des autres collaborateurs au fur et à mesure",
+    "notifications": "Système de notification",
+    "alerts": "Recevoir des alertes lorsque d’autres contribuent au document",
+    "signatureMgmt": "Gestion du cachet et de la signature",
+    "leadersOnly": "Les chefs d’équipe et niveaux supérieurs peuvent gérer leur cachet numérique et leur signature :",
+    "signatureTitle": "Cachet et signature",
+    "uploadTeeter": "Téléverser une image claire de votre cachet officiel",
+    "uploadSignature": "Créer ou téléverser votre signature numérique",
+    "defaultSignature": "Définir par défaut pour toutes les approbations",
+    "updateDesignation": "Mettre à jour chaque fois que votre désignation officielle change",
+    "security": "Avis de sécurité :",
+    "encrypted": "Votre cachet et votre signature sont chiffrés et utilisés uniquement pour les approbations officielles.",
+    "recordModule": "Module de gestion des dossiers",
+    "guide": "Guide complet d’utilisation du système de plateforme Smart Office",
+    "back": "Retour au tableau de bord",
+    "moduleGuide": "Guide du module",
+    "previous": "Précédent",
+    "next": "Suivant",
+    "addTeeterAndSignature": "Ajouter un cachet et une signature numériques",
+    "returnWithComments": "Retourner avec commentaires",
+    "requestModifications": "Demander des modifications",
+    "screenshotOf": "Capture d’écran de",
+    "fasterApproval": "Approbation plus rapide",
+    "auditReady": "Prêt pour l’audit",
+    "organizedRecords": "Dossiers organisés",
+    "tab": "Onglet",
+    "click": "Cliquer",
+    "button": "Bouton",
+    "services": "Services",
+    "fileComplaint": "Déposer une plainte",
+    "followComplaint": "Suivre la plainte",
+    "aboutUs": "En savoir plus sur nous",
+    "darkMode": "Mode sombre",
+    "lightMode": "Mode clair"
+  },
+  "organization": {
+    "webManagement": "Gestion web",
+    "addUser": " Ajouter un utilisateur",
+    "Letter Template": "Modèles de courrier",
+    "organizations": "Organisations",
+    "newOrganization": "Nouvelle organisation",
+    "organizationName": "Nom de l’organisation",
+    "createdOn": "Créé le",
+    "approveUserPrompt": "Approuver l’utilisateur",
+    "approveUserDescription": "Approuver l’utilisateur",
+    "yesApprove": "Oui, approuver",
+    "numberOfUsers": "Nombre d’utilisateurs",
+    "assignedAdmin": "Administrateur assigné",
+    "Migrated Records": "Dossiers migrés",
+    "isGovernmentOrganization": "Est une organisation gouvernementale",
+    "createNew": "Créer nouveau",
+    "edit": "Modifier",
+    "enterDetails": "Saisissez les détails de la nouvelle organisation. Tous les champs marqués d’un astérisque (*) sont requis.",
+    "nameAmharic": "Nom (amharique)",
+    "nameEnglish": "Nom (anglais)",
+    "key": "Clé",
+    "organizationType": "Type d’organisation",
+    "loadingOrganizationTypes": "Chargement des types d’organisation...",
+    "errorLoadingOrganizationTypes": "Erreur lors du chargement des types d’organisation",
+    "noOrganizationTypesAvailable": "Aucun type d’organisation disponible",
+    "parentOrganization": "Organisation parente (facultatif)",
+    "loading": "Chargement...",
+    "selectOrganization": "Sélectionner une organisation",
+    "selectOrganizationFirst": "Sélectionnez d’abord une organisation",
+    "noOrganization": "Aucune organisation",
+    "isOrganizationPublic": "L’organisation est-elle publique",
+    "selectOrganizationType": "Sélectionner le type d’organisation",
+    "deleteOrganization": "Supprimer l’organisation",
+    "confirmDelete": "Êtes-vous sûr de vouloir supprimer définitivement ?",
+    "cannotUndo": "Cette action ne peut pas être annulée.",
+    "deleting": "Suppression ...",
+    "delete": "Supprimer",
+    "viewOrganization": "Voir l’organisation",
+    "editOrganization": "Modifier l’organisation",
+    "englishNameRequired": "Le nom en anglais est requis",
+    "amharicNameRequired": "Le nom en amharique est requis",
+    "invalidEmail": "Adresse e-mail invalide",
+    "usernameMinLength": "Le nom d’utilisateur doit contenir au moins 3 caractères",
+    "organizationRequired": "L’organisation est requise",
+    "invalidPhoneNumber": "Le numéro de téléphone doit être un numéro éthiopien valide",
+    "registerAdminTitle": "Enregistrer l’administrateur de l’organisation",
+    "registerAdminDescription": "Remplir les champs requis pour s’inscrire",
+    "enterEnglishName": "Saisir le nom en anglais",
+    "enterAmharicName": "Saisir le nom en amharique",
+    "email": "E-mail",
+    "emailExample": "email@example.com",
+    "username": "Nom d’utilisateur",
+    "enterUsername": "Saisir un nom d’utilisateur",
+    "phoneNumber": "Numéro de téléphone",
+    "phoneNumberExample": "p. ex. 0912345678 ou +251912345678",
+    "organization": "Organisation",
+    "registering": "Enregistrement...",
+    "registerAdmin": "Enregistrer un administrateur",
+    "dashboard": "Tableau de bord",
+    "organizationAdmins": "Administrateurs de l’organisation",
+    "externalUsers": "Utilisateurs externes",
+    "userManagement": "Gestion des utilisateurs",
+    "content": "Contenu",
+    "bulkUpload": "Téléversement en masse",
+    "positionTypes": "Types de poste",
+    "activityLog": "Journal d’activité",
+    "setting": "Paramètre",
+    "loadingAdmins": "Chargement des administrateurs...",
+    "errorLoadingAdmins": "Erreur lors du chargement des données administrateur",
+    "retry": "Réessayer",
+    "assignAdmin": "Assigner un administrateur",
+    "addAdmin": "Ajouter un administrateur",
+    "adminAssignedSuccess": "Administrateur assigné avec succès",
+    "userAssignedSuccess": "Utilisateur assigné avec succès",
+    "userAssignFailed": "L’utilisateur n’a pas pu être assigné",
+    "assignAdminToOrganization": "Assigner un administrateur à l’organisation",
+    "assignAdminInstructions": "Sélectionner une organisation et un utilisateur à assigner comme administrateur.",
+    "users": "Utilisateurs",
+    "searchUsers": "Rechercher des utilisateurs...",
+    "noUsersFound": "Aucun utilisateur trouvé",
+    "assigning": "Assignation...",
+    "assignUser": "Assigner un utilisateur",
+    "noUsersAvailable": "Aucun utilisateur disponible",
+    "pendingExternalUsers": "Utilisateurs externes en attente",
+    "activateUserPrompt": "Activer cet utilisateur ?",
+    "activateUserDescription": "Cela permettra à l’utilisateur d’accéder à la plateforme",
+    "activating": "Activation...",
+    "yesActivate": "Oui, activer",
+    "statistics": "Statistiques",
+    "totalOrganizations": "Total des organisations",
+    "recentOrganizations": "Organisations récentes",
+    "viewMore": "Voir plus →",
+    "recentActivities": "Activités récentes",
+    "moreActivities": "Plus d’activités →",
+    "noRecentActivities": "Aucune activité récente trouvée",
+    "contentManagement": "Gestion du contenu",
+    "Bulk": "Importateur Excel",
+    "Position": "Postes",
+    "settings": "Paramètres",
+    "Archive Users": "Archiver les utilisateurs",
+    "Archived Organizations": "Organisations archivées",
+    "Archived Units & Positions": "Unités et postes archivés",
+    "contentMsg": "Gérez efficacement le contenu et les ressources de votre organisation.",
+    "selectUnit": "Sélectionner une unité",
+    "visibilityToOthers": "Visible pour les autres",
+    "visible": "Visible",
+    "hidden": "Masqué",
+    "visibilityEnabled": "L’organisation est maintenant visible pour les autres organisations",
+    "visibilityDisabled": "L’organisation est maintenant masquée aux autres organisations",
+    "visibilityUpdateFailed": "Échec de la mise à jour de la visibilité de l’organisation"
+  },
+  "userIncomingretun": {
+    "View Detail": "Voir le détail",
+    "Open actions menu": "Ouvrir le menu des actions",
+    "Actions": "Actions",
+    "convertRecord": "Convertir le dossier",
+    "return": "Retourner",
+    "returning": "Retour...",
+    "returing": "Retour...",
+    "conformReturn": "Confirmer le retour",
+    "Please provide a reason for returning this record.": "Veuillez fournir une raison pour retourner ce dossier.",
+    "ReturnComment": "Commentaire de retour",
+    "EnterReturnReason": "Saisir la raison du retour",
+    "CommentRequired": "Le commentaire est requis",
+    "RecordReturnedSuccessfully": "Dossier retourné avec succès",
+    "FailedToReturnRecord": "Échec du retour du dossier"
+  },
+  "registration": {
+    "incompleteRegistration": "Vous n’avez pas terminé le processus de vérification. Veuillez téléverser les documents requis pour continuer.",
+    "uploadDocuments": "Téléverser les documents",
+    "registrationRequired": "Vous devez terminer votre inscription avant d’accéder à cette page.",
+    "title": "Inscription",
+    "steps": {
+      "registerUpload": {
+        "title": "S’inscrire et téléverser",
+        "description": "Remplir les détails et téléverser les documents requis"
+      },
+      "verifyOtp": {
+        "title": "Vérifier l’OTP",
+        "description": "Saisir le code de vérification envoyé à votre téléphone/e-mail"
+      }
+    },
+    "form": {
+      "registrationType": "Type d’inscription",
+      "organization": "Organisation",
+      "individual": "Individu",
+      "organizationEmail": "E-mail de l’organisation",
+      "organizationEmailPlaceholder": "organization@example.com",
+      "individualEmail": "E-mail personnel",
+      "individualEmailPlaceholder": "personal@example.com",
+      "organizationUsername": "Nom d’utilisateur de l’organisation",
+      "organizationUsernamePlaceholder": "nom_utilisateur_org",
+      "individualUsername": "Nom d’utilisateur personnel",
+      "individualUsernamePlaceholder": "nom_utilisateur_personnel",
+      "organizationPhone": "Téléphone de l’organisation",
+      "organizationPhonePlaceholder": "+251 téléphone de l’organisation",
+      "individualPhone": "Téléphone personnel",
+      "individualPhonePlaceholder": "+251 téléphone personnel",
+      "organizationNameEn": "Nom de l’organisation (anglais)",
+      "organizationNameEnPlaceholder": "Nom de l’entreprise Ltd.",
+      "individualNameEn": "Nom complet (anglais)",
+      "individualNameEnPlaceholder": "Jean Dupont",
+      "organizationNameAm": "Nom de l’organisation (amharique)",
+      "organizationNameAmPlaceholder": "የድርጅት ስም",
+      "individualNameAm": "Nom complet (amharique)",
+      "individualNameAmPlaceholder": "የግለሰብ ስም",
+      "organizationSubmitButton": "Enregistrer une organisation et téléverser les documents",
+      "individualSubmitButton": "Inscrire une personne et téléverser les documents",
+      "processing": "Traitement..."
+    },
+    "userType": {
+      "selectionDescription": "Choisissez votre type d’inscription pour commencer",
+      "organization": "Organisation",
+      "organizationDescription": "S’inscrire comme entreprise, institution ou organisation",
+      "individual": "Individu",
+      "individualDescription": "S’inscrire comme personne physique ou professionnel"
+    },
+    "continueButton": "Continuer vers l’inscription",
+    "documents": {
+      "requiredDocuments": "Documents requis",
+      "requirementsUpdate": "Les exigences sont mises à jour lorsque vous changez de type d’inscription",
+      "attached": "joint",
+      "tip": "Astuce : téléversez maintenant ou continuez et téléversez après vérification",
+      "noRequirements": "Aucune exigence de document",
+      "upload": "Téléverser",
+      "change": "Changer",
+      "remove": "Supprimer",
+      "required": "Requis",
+      "fileSelected": "Fichier sélectionné",
+      "readyToUpload": "Prêt à téléverser",
+      "previouslyUploaded": "Téléversé précédemment",
+      "willUploadOnSubmit": "Sera téléversé lors de la soumission",
+      "fayda": "Identifiant Fayda",
+      "faydaMessage": "Saisir l’identifiant Fayda"
+    },
+    "verifyOtp": {
+      "title": "Vérifier votre compte",
+      "description": "Saisissez le code à 6 chiffres que nous avons envoyé {channel}.",
+      "channel": {
+        "email": "à votre e-mail",
+        "phone": "à votre téléphone"
+      },
+      "otpInput": {
+        "ariaLabel": "Caractère {index}",
+        "placeholder": "Saisir le code OTP"
+      },
+      "password": {
+        "newPassword": "Nouveau mot de passe",
+        "confirmPassword": "Confirmer le mot de passe",
+        "showPassword": "Afficher le mot de passe",
+        "hidePassword": "Masquer le mot de passe"
+      },
+      "buttons": {
+        "back": "Retour",
+        "completeRegistration": "Terminer l’inscription",
+        "verifying": "Vérification...",
+        "resendCode": "Renvoyer le code",
+        "resending": "Renvoi...",
+        "resendIn": "Renvoyer dans {seconds}s",
+        "resendLoading": "Renvoi du code",
+        "resendCooldown": "Renvoyer le code dans {seconds} secondes"
+      },
+      "messages": {
+        "success": "Mot de passe défini avec succès !",
+        "verificationCodeResent": "Code de vérification renvoyé à votre e-mail/téléphone.",
+        "missingEmailPhone": "L’e-mail ou le numéro de téléphone est manquant.",
+        "invalidOtp": "Veuillez saisir un OTP valide de 6 caractères.",
+        "fillPasswords": "Veuillez remplir les deux champs de mot de passe.",
+        "passwordLength": "Le mot de passe doit contenir au moins 8 caractères.",
+        "passwordMismatch": "Les mots de passe ne correspondent pas.",
+        "passwordUpdateFailed": "Échec de la mise à jour du mot de passe. Veuillez réessayer.",
+        "resendFailed": "Échec du renvoi du code de vérification. Veuillez réessayer.",
+        "registrationComplete": "Inscription et téléversement des documents terminés avec succès !",
+        "selectUnitWarning": "Veuillez sélectionner une unité",
+        "fillAllFields": "Veuillez remplir tous les champs",
+        "configAdded": "Configuration ajoutée avec succès",
+        "configUpdated": "Configuration mise à jour avec succès",
+        "configAddFailed": "Échec de l’ajout de la configuration",
+        "configUpdateFailed": "Échec de la mise à jour de la configuration"
+      },
+      "errors": {
+        "missingUserId": "L’ID utilisateur est manquant. Impossible de renvoyer le code de vérification.",
+        "resendFailed": "Échec du renvoi du code de vérification.",
+        "alreadyRegistered": "Vous ne pouvez vous inscrire qu’une seule fois avec un seul e-mail ou numéro de téléphone. Au lieu de vous réinscrire, allez à la connexion et utilisez Mot de passe oublié pour réinitialiser votre mot de passe."
+      },
+      "support": {
+        "needHelp": "Besoin d’aide ?",
+        "helpLink": "/support/resend-sms"
+      }
+    }
+  },
+  "superAdmin": {
+    "manageConfig": {
+      "title": "Gérer la configuration {{type}}",
+      "description": "Configurer la capacité et la structure {{level}}",
+      "organization": "Organisation",
+      "unit": "Unité",
+      "selectUnit": "Sélectionner une unité",
+      "selectUnitPlaceholder": "Sélectionner une unité",
+      "subOrganizations": "Sous-organisations",
+      "employeesPerOrg": "Employés par organisation",
+      "subOrgsPlaceholder": "p. ex. 3",
+      "employeesPlaceholder": "p. ex. 20",
+      "addConfiguration": "Ajouter une configuration",
+      "updateConfiguration": "Mettre à jour la configuration",
+      "configurations": "Configurations",
+      "loading": "Chargement...",
+      "noConfigurations": "Aucune configuration ajoutée pour le moment",
+      "edit": "Modifier",
+      "delete": "Supprimer",
+      "close": "Fermer",
+      "unitBased": "basé sur l’unité",
+      "organizationLevel": "niveau organisation"
+    }
+  },
+  "otp": {
+    "verifyIdentity": "Vérifier votre identité",
+    "enterCodeSent": "Saisir le code de vérification envoyé à votre e-mail",
+    "verifySubmission": "Vérifier la soumission",
+    "enterCodeToSubmit": "Saisir le code de vérification pour soumettre votre dossier",
+    "clearCode": "Effacer le code",
+    "resendCode": "Renvoyer le code",
+    "verifyingCode": "Veuillez patienter pendant que nous vérifions votre code",
+    "verificationSuccess": "Vérification réussie !",
+    "verificationFailed": "Échec de la vérification. Veuillez réessayer."
+  },
+  "contentManagement": {
+    "moveDepartement": "déplacerDépartement",
+    "positions": "Postes",
+    "selectPositions": "Poste sélectionné",
+    "sealNameMsg": "Le nom du sceau est requis",
+    "sealSuccessMsg": "Sceau téléversé et enregistré avec succès",
+    "sealErrorMsg": "Échec du téléversement et de l’enregistrement du sceau",
+    "sealRemove": "Sceau supprimé avec succès",
+    "seal": "Sceaux de l’organisation",
+    "uploadSealMsg": "Téléverser et gérer les sceaux de l’organisation",
+    "sealImage": "Image du sceau",
+    "addSeal": "Ajouter un sceau",
+    "noSealMsg": "Aucun sceau téléversé pour le moment",
+    "addSealInstruction": "Cliquez sur Ajouter un sceau pour téléverser",
+    "sealName": "Nom du sceau",
+    "saveSeal": "Enregistrer le sceau",
+    "letterTemplate": "Modèles de courrier",
+    "createMsg": "Créer ou modifier les modèles enregistrés sous cette unité",
+    "addTemplate": "Ajouter un modèle",
+    "failedToLoadTemplates": "Échec du chargement des modèles",
+    "selectTemplate": "Sélectionner un modèle",
+    "updateTemplate": "Mettre à jour le modèle",
+    "updateFled": "Échec de la mise à jour",
+    "createFled": "Échec de la création",
+    "templateSuccessMsg": "créé avec succès",
+    "failedToLoadHeaderFooter": "Échec du chargement des en-têtes/pieds de page",
+    "failedToDelete": "Échec de la suppression",
+    "deleted": "Supprimé",
+    "provideMsg": "Veuillez fournir à la fois le nom et le fichier",
+    "uploadSuccess": "Téléversé avec succès",
+    "uploadFailed": "Échec du téléversement",
+    "addHeaderFooter": "Ajouter en-tête/pied de page",
+    "name": "Nom",
+    "internalSuffixCC": "Suffixe CC",
+    "internalPrefixCC": "Préfixe CC",
+    "internalPrefix": "Préfixe interne",
+    "externalPrefix": "Préfixe externe",
+    "internalMemoPrefix": "Préfixe de note interne",
+    "reference": "Le numéro de référence standard de l’organisation",
+    "externalReference": "Numéro de référence des courriers entrants",
+    "internalMemoReference": "Numéro de référence de la note interne",
+    "prefixCC": "Préfixe CC",
+    "suffixCC": "Suffixe CC",
+    "internalSuffix": "Suffixe interne",
+    "position": "Poste",
+    "selectPosition": "Sélectionner un poste",
+    "value": "Valeur",
+    "onlyPngAllowed": "Seuls les fichiers PNG sont autorisés.",
+    "enterValue": "Saisir une valeur",
+    "type": "Type",
+    "header": "En-tête",
+    "footer": "Pied de page",
+    "uploadFile": "Téléverser un fichier",
+    "preview": "Aperçu",
+    "status": "Statut",
+    "active": "Actif",
+    "inactive": "Inactif",
+    "activate": "Activer",
+    "deactivate": "Désactiver",
+    "currentlyActive": "Actuellement actif",
+    "statusChanged": "Statut modifié avec succès",
+    "statusChangeFailed": "Échec du changement de statut",
+    "delete": "Supprimer",
+    "refNoRequired": "Le numéro de référence est requis",
+    "nameRequired": "Les deux noms sont requis.",
+    "recordTypeRequired": "Le type de dossier est requis",
+    "deleteMsg": "Êtes-vous sûr de vouloir supprimer cet élément ?",
+    "filter": "Filtrer par type de dossier",
+    "showCC": "Afficher uniquement les éléments en CC",
+    "add": "Ajouter préfixe/suffixe/réf.",
+    "edit": "Modifier",
+    "prefix": "Préfixe",
+    "suffix": "Suffixe",
+    "recordType": "Type de dossier",
+    "CC": "Est-ce pour le CC ?",
+    "amharicName": "Nom en amharique",
+    "englishName": "Nom en anglais",
+    "PrefixSuffix": "Liste préfixe/suffixe/référence",
+    "positionPrefixes": "Numéro de référence du poste",
+    "positionRequired": "Le poste est requis",
+    "noRec": "Aucun dossier trouvé.",
+    "loading": "Chargement...",
+    "bulkMsg": "Téléverser un fichier Excel pour importer des utilisateurs en masse",
+    "submitUsers": "Soumettre les utilisateurs",
+    "selectFile": "Sélectionner un fichier",
+    "posMissing": "Feuille « Positions » ou « Users » manquante.",
+    "invalidFile": "Le fichier téléversé est vide ou invalide.",
+    "parseSuccess": "Fichier analysé avec succès.",
+    "parseError": "Échec de l’analyse du fichier.",
+    "noData": "Aucune donnée trouvée dans le fichier.",
+    "Units": "Unités",
+    "saving": "Enregistrement...",
+    "teamMember": "Membre de l’équipe",
+    "msg1": "Aucun membre d’équipe trouvé",
+    "msg2": "Sélectionner un poste pour voir les membres de l’équipe",
+    "msg3": "Ajouter des membres d’équipe à ce département",
+    "msg4": "Parcourir les départements pour voir les membres de l’équipe",
+    "userDetail": "Détail de l’utilisateur",
+    "editEmployee": "Modifier l’employé",
+    "noUnit": "Aucune unité trouvée",
+    "noOrg": "Aucune organisation trouvée",
+    "addUser": "Ajouter un utilisateur",
+    "addSubdepartement": "Ajouter un sous-département",
+    "editDepartment": "Modifier le département",
+    "moveDepartment": "Déplacer le département",
+    "archiveDepartment": "Archiver le département",
+    "deleteDepartment": "Supprimer le département",
+    "addUnit": "Ajouter une unité",
+    "editUnit": "Modifier l’unité",
+    "addDepartment": "Ajouter un département",
+    "deleteUnit": "Supprimer l’unité",
+    "actions": "Actions",
+    "createUnit": "Créer une unité",
+    "addFromSubCity": "Ajouter depuis la sous-ville",
+    "addNewUnit": "Ajouter une nouvelle unité",
+    "configuredUnitLimit": "Limite d’unités configurée : {{max}}",
+    "linkedUnits": "Utilisé",
+    "remainingSlots": "Restant",
+    "checkingCapacity": "Vérification de la capacité configurée…",
+    "noCapacityConfigured": "Aucune capacité d’unité n’est configurée pour cette organisation. Demandez au super administrateur de la configurer dans Gérer la configuration de l’organisation.",
+    "capacityReached": "Limite de capacité atteinte. Le maximum configuré est {{max}}.",
+    "capacityReachedShort": "Limite atteinte — impossible de créer plus d’unités.",
+    "selectSubCity": "Sélectionner une sous-ville",
+    "selectSubCityFirst": "Sélectionnez d’abord une sous-ville",
+    "selectUnit": "Sélectionner une unité",
+    "noSubCities": "Aucune sous-ville trouvée",
+    "subCityRequired": "Veuillez sélectionner une sous-ville",
+    "unitRequired": "Veuillez sélectionner une unité",
+    "parentUnitMissing": "L’unité parente est manquante",
+    "unitRelatedSuccess": "Unité liée avec succès",
+    "permissionType": "Types d’autorisation",
+    "newPermission": "Nouvelle autorisation",
+    "permissionManagement": "Gestion des autorisations",
+    "exportTypes": "Types d’exportation",
+    "exporting": "Exportation...",
+    "delMsg": "Êtes-vous absolument sûr ?",
+    "delMsg2": "Cette action ne peut pas être annulée. Elle supprimera définitivement l’autorisation.",
+    "permission": "Autorisation",
+    "copyPermissionsFrom": "Copier les autorisations depuis",
+    "selectPositionToCopy": "Sélectionner un type de poste depuis lequel copier les autorisations",
+    "selectApplication": "Sélectionner une application",
+    "selectApplicationToLoadPermissions": "Sélectionner une application pour charger ses autorisations",
+    "copyPermissionsHint": "Choisissez un type de poste existant pour préremplir ses autorisations, puis modifiez ci-dessous.",
+    "copyPermissionsFailed": "Échec de la copie des autorisations",
+    "perFailed": "Échec de la création de l’autorisation",
+    "perSuccess": "Type d’autorisation créé et autorisations assignées",
+    "updatePerSuccess": "Autorisation mise à jour avec succès",
+    "updatePerFailed": "Échec de la mise à jour de l’autorisation",
+    "permissionName": "Nom de l’autorisation",
+    "key": "Clé",
+    "createdAt": "Créé le",
+    "updatedAt": "Mis à jour le",
+    "createPermission": "Créer une autorisation",
+    "keyRequired": "La clé est requise",
+    "selectPosType": "Sélectionner un type de poste",
+    "adding": "Ajout...",
+    "msg": "ajouté avec succès",
+    "subDep": "Sous-département",
+    "parentDep": "Département parent",
+    "invalidMsg": "Veuillez corriger les champs mis en évidence.",
+    "success": "Succès",
+    "unit": "Unité",
+    "user": "Utilisateur",
+    "firstName": "Prénom",
+    "lastName": "Nom de famille",
+    "selectUser": " Sélectionner un utilisateur",
+    "userRequired": "L’utilisateur est requis",
+    "userRequiredMsg": "Veuillez sélectionner un utilisateur à assigner.",
+    "userError": "L’utilisateur sélectionné est invalide ou introuvable.",
+    "userSuccess": "Utilisateur assigné avec succès",
+    "updated": "a été mis à jour avec succès",
+    "department": "Département",
+    "departmentRequired": "Le département est requis",
+    "departmentSuccess": "Département sélectionné avec succès",
+    "permissionSuccess": "Type de poste créé et autorisations assignées",
+    "permissionFailed": "Échec de la création du poste",
+    "editRemark": "Modifier la remarque",
+    "addRemark": "Ajouter une remarque",
+    "commonRemarks": "Remarques courantes",
+    "onlySquareAllowed": "La hauteur et la largeur du sceau doivent être identiques (300x300)",
+    "searchPermissions": "Rechercher des autorisations...",
+    "noPermissionsFound": "Aucune autorisation correspondant à votre recherche n’a été trouvée",
+    "noPermissionsAvailable": "Aucune autorisation disponible",
+    "showingPermissions": "Affichage de {{count}} sur {{total}} autorisations",
+    "createTemplate": "Créer un modèle",
+    "editTemplate": "Modifier le modèle",
+    "viewTemplate": "Voir le modèle",
+    "deleteTemplate": "Supprimer le modèle",
+    "deleteTemplateConfirm": "Êtes-vous sûr de vouloir supprimer le modèle « {{name}} » ? Cette action ne peut pas être annulée.",
+    "noTemplates": "Aucun modèle trouvé",
+    "sincerelyText": "Texte de salutation",
+    "body": "Corps",
+    "headerAndFooter": "En-tête et pied de page",
+    "CanReceiveRecord": "Peut recevoir un dossier",
+    "CanAssignRecord": "Peut assigner un dossier",
+    "CanCreateBankRecord": "Peut créer un dossier bancaire",
+    "positionChangeRequestReason": "Demande de changement de poste de l'employé",
+    "positionChangeRequestSuccess": "Demande de changement de poste envoyée avec succès.",
+    "positionChangeApprovalRequiredSuccess": "Action effectuée avec succès. Une approbation est requise pour les changements de poste.",
+    "userInvitePendingApproval": "L'utilisateur a été invité et attend l'approbation pour cette unité.",
+    "requestAssignment": "Demander l'affectation",
+    "assignUser": "Affecter l'utilisateur",
+    "submitting": "Envoi..."
+  },
+  "recordTag": {
+    "title": "Étiquettes de dossier",
+    "tableName": "Étiquettes de dossier",
+    "name": "Nom",
+    "key": "Clé",
+    "CreatedAt": "Créé le",
+    "createNew": "Créer une nouvelle étiquette",
+    "createTitle": "Étiquette de dossier",
+    "Actions": "Actions"
+  },
+  "setting": {
+    "canRecordDateLabelHasLocalization": "L’étiquette de date du dossier est-elle localisée ?",
+    "canRecordDateHaveTime": "La date du dossier peut-elle inclure l’heure ?",
+    "canInternalMemoRequirePositionBasedReferenceNumber": "Un numéro de référence basé sur le poste est-il requis pour la note interne ?",
+    "title1": " Configuration de l’unité",
+    "title2": "Configurer la portée pour chaque unité",
+    "title4": "Configurer l’heure d’escalade pour chaque unité",
+    "loading": " Chargement des unités...",
+    "noUnit": "Aucune unité trouvée",
+    "Action": "Action",
+    "Value": "Valeur",
+    "Name": "Nom",
+    "title3": "Portée du poste à récupérer",
+    "title5": "Afficher le cachet et la signature pour l’assignation du dossier",
+    "title6": "Attendre tous les collaborateurs avant l’action ?",
+    "canCreateDirectRecord": "Peut créer un dossier direct",
+    "canCreateBankRecord": "Peut créer un dossier bancaire",
+    "isApprovalRequiredForPositionChange": "Approbation requise pour le changement de poste",
+    "canPositionBasedRecordsBeCreated": "Des dossiers basés sur le poste peuvent-ils être créés ?",
+    "canPositionBasedReferenceBeUsedForAllTypes": "La référence basée sur le poste peut-elle être utilisée pour tous les types ?",
+    "shouldDirectRecordHaveHeaderAndFooter": "Le dossier direct possède un en-tête et un pied de page",
+    "shouldCollaboratorAlwaysSign": "Le collaborateur signe toujours (signature d’équipe)",
+    "shouldIncludeForYourReferenceInCC": "Inclure « Pour votre référence » en CC",
+    "canCollaborationBeCreatedForAll": "La collaboration peut-elle être créée pour tous les types de dossier ?",
+    "canRecordBeEditedByCollaborators": "Autoriser les collaborateurs à modifier le dossier",
+    "canRecordHaveCollaboratorsName": "Afficher les noms des collaborateurs sur le dossier",
+    "canRecordBeEditedOnWorkflow": "Autoriser la modification du dossier dans le flux de travail",
+    "canIncomingAssignmentsBeSeparated": "Dupliquer les courriers entrants en fonction de l’assignation ?",
+    "canROReturn": "Autoriser le retour RO",
+    "internalMemoHasReferenceNumber": "La note interne possède un numéro de référence",
+    "enabled": "activé",
+    "disabled": "désactivé",
+    "editTitle": "Modifier la portée du poste",
+    "editMsg": "Modifier la portée du poste pour cette unité",
+    "msg1": "ID de l’organisation introuvable. Veuillez vérifier votre authentification.",
+    "msg2": "Chargement des configurations de poste...",
+    "positionConfig": " Configuration du poste",
+    "positionConfigMsg": "Configurer les paramètres de notification et le comportement du flux de travail pour chaque poste",
+    "add": " Ajouter une configuration",
+    "create": "Créer une configuration de poste",
+    "position": "Poste",
+    "select": "Sélectionner un poste",
+    "select2": "Veuillez d’abord sélectionner une unité",
+    "plsSelect": "Veuillez d’abord sélectionner une unité pour voir les postes disponibles",
+    "positionScope": "Portée du poste",
+    "all": "Tous",
+    "immediateChild": "Enfant immédiat",
+    "parallel": "Parallèle avec l’enfant immédiat",
+    "notification": "Paramètres de notification",
+    "sms": " Notification SMS",
+    "smsMsg": "Envoyer un SMS lorsqu’un dossier est soumis à ce poste",
+    "email": "Notification par e-mail",
+    "emailMsg": "Envoyer un e-mail lorsqu’un dossier est soumis à ce poste",
+    "inbox": "Notification de boîte de réception",
+    "inboxMsg": "Afficher une notification dans la boîte de réception lorsqu’un dossier est soumis à ce poste",
+    "workflow": "Paramètres du flux de travail",
+    "viewWF": "Voir le flux de travail",
+    "workflowMsg": "Ignorer le flux de travail si non assigné",
+    "workflowMsg1": "Ignorer l’étape du flux de travail si personne n’est assigné à ce poste",
+    "creating": "Création...",
+    "createConfig": "Créer une configuration",
+    "error": "Erreur lors du chargement des configurations de poste :",
+    "retry": "Réessayer",
+    "SMS": "SMS",
+    "Inbox": "Boîte de réception",
+    "skipWF": "Ignorer le flux de travail",
+    "delete": "Supprimer la configuration",
+    "deleteMsg": "Êtes-vous sûr de vouloir supprimer cette configuration de poste ? Cette action ne peut pas être annulée.",
+    "edit": "Modifier la configuration du poste",
+    "updating": "Mise à jour...",
+    "UpdateConfig": "Mettre à jour la configuration",
+    "archivedUsers": " Utilisateurs archivés",
+    "escalationTitle": "Configuration de l’escalade",
+    "escalationDescription": "Configurer les heures d’escalade pour différents types de courrier",
+    "loadingConfig": "Chargement de la configuration...",
+    "loadError": "Erreur lors du chargement de la configuration",
+    "noConfigFound": "Aucune configuration trouvée",
+    "updateEscalationMsg": "Mettre à jour la valeur de l’heure d’escalade",
+    "saving": "Enregistrement...",
+    "saveChanges": "Enregistrer les modifications",
+    "escalationHour": "Heure d’escalade normale",
+    "urgentLetterEscalationHour": "Heure d’escalade pour courrier urgent",
+    "onReviewLetterEscalationHour": "Heure d’escalade pour courrier en révision",
+    "urgentOnReviewLetterEscalationHour": "Heure d’escalade pour courrier urgent en révision",
+    "attachmentSignature": {
+      "badge": "Sécurité des pièces jointes",
+      "title": "Signature pour les pièces jointes",
+      "description": "Choisir une unité et contrôler si les pièces jointes incluent une signature numérique par défaut",
+      "unit": "Unité",
+      "selectUnit": "Sélectionner une unité",
+      "loadingUnits": "Chargement des unités...",
+      "noUnitsFound": "Aucune unité trouvée",
+      "unitHint": "Ce paramètre s’applique à l’unité sélectionnée",
+      "toggleLabel": "Ajouter la signature à la pièce jointe",
+      "toggleDescription": "Inclure automatiquement une signature sur les pièces jointes téléversées",
+      "status": "Statut :",
+      "activeUnit": "Unité active :"
+    }
+  },
+  "toogle": {
+    "letterName": "Nom du fichier",
+    "Letter_Number": "Numéro de courrier",
+    "ACtions": "Actions",
+    "Actions": "Actions",
+    "Date": "Date",
+    "From": "De",
+    "Subject": "Objet",
+    "subject": "Objet",
+    "referenceNumber": "Numéro de référence",
+    "FileName": "Nom du fichier",
+    "To": "À",
+    "fileName": "Nom du fichier",
+    "sendingOrganization": "Organisation expéditrice",
+    "sendingDepartment": "Département expéditeur",
+    "dispatchedDate": "Date",
+    "submittedDate": "Date",
+    "Sending_Department": "Département expéditeur",
+    "dispatchedBy": "Converti par",
+    "Receiver": "Destinataire",
+    "CreatedAt": "Date",
+    "createdAt": "Date",
+    "Status": "Statut",
+    "status": "Statut",
+    "organizationName": "Nom de l’organisation",
+    "Task Status": "Statut",
+    "TaskStatus": "Statut",
+    "taskStatus": "Statut",
+    "delegateePosition": "Poste délégataire",
+    "delegateeEmployee": "Employé délégataire",
+    "delegatedPosition": "Poste délégué",
+    "delegatedEmployee": "Employé délégué",
+    "startDate": "Date de début",
+    "endDate": "Date de fin",
+    "isCurrent": "Statut",
+    "signStatus": "Statut de signature",
+    "title": "Titre",
+    "color": "Couleur",
+    "description": "Description",
+    "image": "Image",
+    "featured": "Actualités principales",
+    "category": "Catégorie d’actualité",
+    "link": "lien",
+    "name": "Nom",
+    "key": "Clé",
+    "updatedAt": "Mis à jour le",
+    "actions": "Actions"
+  },
+  "viewDocument": {
+    "title": "Documents épinglés",
+    "refreshButton": "Actualiser",
+    "userInformation": "Informations utilisateur",
+    "organizationName": "Nom de l’organisation",
+    "email": "E-mail",
+    "phoneNumber": "Numéro de téléphone",
+    "totalDocuments": "Total des documents",
+    "failedToLoadUserInfo": "Échec du chargement des informations utilisateur",
+    "document": {
+      "viewDocument": "Voir le document",
+      "requirements": "Exigences",
+      "optional": "(Facultatif)",
+      "required": "(Requis)",
+      "noRequirements": "Aucune exigence spécifique pour ce document",
+      "status": {
+        "approved": "approuvé",
+        "rejected": "rejeté",
+        "pending": "en attente"
+      }
+    },
+    "actions": {
+      "success": "Action « {action} » soumise avec succès !",
+      "error": "Échec de la soumission de l’action : {error}"
+    }
+  },
+  "actionModal": {
+    "trigger": "Agir",
+    "title": "Agir sur le document",
+    "labels": {
+      "selectAction": "Sélectionner une action",
+      "remark": "Remarque (facultatif)",
+      "remarkPlaceholder": "Ajouter une remarque..."
+    },
+    "actions": {
+      "approve": "Approuver",
+      "adjustment": "Ajustement",
+      "reject": "Rejeter",
+      "pending": "En attente",
+      "submitted": "Soumis",
+      "selectPlaceholder": "Sélectionner une action"
+    },
+    "buttons": {
+      "cancel": "Annuler",
+      "submit": "Soumettre"
+    },
+    "toast": {
+      "success": "Document {status}"
+    }
+  },
+  "Select organization/unit": "Sélectionner organisation/unité",
+  "Select the main file for the record": "Sélectionner le fichier principal du dossier",
+  "statusList": {
+    "Dispatched": "Expédié",
+    "Pending": "En attente",
+    "Approved": "Approuvé",
+    "Rejected": "Rejeté",
+    "Completed": "Terminé",
+    "In Progress": "En cours",
+    "Draft": "Brouillon",
+    "Submitted": "Soumis",
+    "Under Review": "En révision",
+    "Returned": "Retourné",
+    "inActive": "Inactif"
+  },
+  "search": {
+    "searchAllEmployees": "Rechercher tous les employés",
+    "searchByNameEmailPhonePosition": "Rechercher par nom, e-mail, téléphone ou poste...",
+    "searchingEmployees": "Recherche d’employés...",
+    "errorLoadingEmployees": "Erreur lors du chargement des employés",
+    "noEmployeesFound": "Aucun employé trouvé",
+    "tryDifferentKeywords": "Essayez d’autres mots-clés",
+    "startTypingToSearch": "Commencez à taper pour rechercher des employés",
+    "searchByNameEmailPhone": "Rechercher par nom, e-mail ou numéro de téléphone",
+    "showingResults": "Affichage de {{count}} résultats sur {{total}} pour « {{query}} »",
+    "searchUnits": "Rechercher des unités...",
+    "searchDepartments": "Rechercher des départements...",
+    "searchEmployees": "Rechercher des employés...",
+    "noResults": "Aucun résultat trouvé",
+    "allEmployees": "Tous les employés",
+    "resendingVerification": "Renvoi du code de vérification...",
+    "sendingInvitation": "Envoi de l’invitation...",
+    "verificationCodeResent": "Code de vérification renvoyé",
+    "invitationSent": "Invitation envoyée",
+    "verificationCodeSentTo": "Un nouveau code de vérification a été envoyé à {{name}}",
+    "invitationSentTo": "Invitation envoyée à {{name}}",
+    "failedToResend": "Échec du renvoi du code de vérification",
+    "failedToSendInvitation": "Échec de l’envoi de l’invitation",
+    "confirmRemoveEmployee": "Êtes-vous sûr de vouloir supprimer {{name}} ? Cette action ne peut pas être annulée.",
+    "removeFunctionalityNotImplemented": "La fonctionnalité de suppression sera mise en œuvre avec une intégration API appropriée"
+  },
+  "Resend Invite": "Renvoyer l’invitation",
+  "deputy": {
+    "title": "Direction adjointe",
+    "subtitle": "Informations et mises à jour de notre équipe de direction adjointe",
+    "previous": "Message précédent",
+    "next": "Message suivant",
+    "defaultPosition": "Poste",
+    "goToMessage": "Aller au message {{index}}"
+  },
+  "officeHead": {
+    "title": "Message de la direction",
+    "subtitle": "Message du responsable du bureau",
+    "defaultPosition": "Poste",
+    "addMessage": "Ajouter un message"
+  },
+  "Strategic Goal": "Objectif stratégique",
+  "of": "de",
+  "Our Strategic Goals": "Notre stratégie",
+  "Go to goal": "aller à l’objectif {{index}} : {{title}}",
+  "Previous Goal": "Objectif précédent",
+  "Next Goal": "Objectif suivant",
+  "addGoal": "Ajouter un objectif",
+  "Goals": "Objectifs organisationnels",
+  "Vision": "Vision organisationnelle",
+  "addVision": "Ajouter une vision",
+  "addNews": "Ajouter une actualité",
+  "addNewsCategory": "Ajouter une catégorie d’actualités",
+  "newsCategory": "Catégorie d’actualité",
+  "modules": "Modules",
+  "addModules": "Ajouter des modules",
+  "socialMedia": "Réseaux sociaux",
+  "addSocialMedia": "Ajouter un réseau social",
+  "contactUs": "Nous contacter",
+  "addContactUs": "Ajouter un contact",
+  "theme": "Thème de l’organisation",
+  "featuredNews": {
+    "featuredNewsTitle": "Actualités à la une",
+    "featuredNewsSubtitle": "Restez informé des derniers développements, réalisations et innovations de notre organisation",
+    "searchPlaceholder": "Rechercher des articles d’actualité...",
+    "topStories": "Articles principaux",
+    "readFullStory": "Lire l’article complet",
+    "readMore": "Lire plus",
+    "loadMoreNews": "Charger plus d’actualités",
+    "showLess": "Afficher moins",
+    "previousGoal": "Objectif précédent",
+    "nextGoal": "Objectif suivant",
+    "noNewsFound": "Aucune actualité trouvée",
+    "tryAdjusting": "Essayez d’ajuster votre recherche ou vos critères de filtre",
+    "readLess": "Lire moins"
+  },
+  "newssection": {
+    "featuredNews": "Actualités à la une",
+    "description": "Restez informé des derniers développements, réalisations et innovations de notre organisation",
+    "topStories": "Articles principaux",
+    "allNews": "Toutes les actualités",
+    "noNewsFound": "Aucune actualité trouvée",
+    "noNewsFoundDesc": "Essayez d’ajuster votre recherche ou vos critères de filtre",
+    "searchPlaceholder": "Rechercher des articles d’actualité...",
+    "readFullStory": "Lire l’article complet",
+    "readMore": "Lire plus",
+    "loadMoreNews": "Charger plus d’actualités",
+    "showLess": "Afficher moins",
+    "title": "Titre"
+  },
+  "auditLogShared": {
+    "page": {
+      "smartOfficeTitle": "Journal d’audit Smart Office",
+      "smartOfficeSubtitle": "Surveiller les activités Smart Office"
+    },
+    "actions": {
+      "refresh": "Actualiser",
+      "export": "Exporter",
+      "cardView": "Vue en cartes",
+      "tableView": "Vue tableau",
+      "cancel": "Annuler"
+    },
+    "labels": {
+      "activityLogs": "Journaux d’activité",
+      "activitiesFound": "{{count}} activité(s) trouvée(s)",
+      "ip": "IP"
+    },
+    "messages": {
+      "missingModuleKey": "Clé de module manquante pour les journaux d’audit",
+      "logsLoaded": "Journaux d’audit chargés",
+      "logsLoadFailed": "Échec du chargement des journaux d’audit",
+      "tryAgain": "Veuillez réessayer.",
+      "exportingLogs": "Exportation de {{count}} journaux au format {{format}}",
+      "loadingActivities": "Chargement des activités...",
+      "noActivitiesFound": "Aucune activité trouvée",
+      "adjustFilters": "Essayez d’ajuster vos filtres ou votre recherche pour trouver ce que vous cherchez."
+    },
+    "filters": {
+      "dateRange": "Plage de dates",
+      "clearFilters": "Effacer les filtres",
+      "searchPlaceholder": "Rechercher des activités...",
+      "module": "Module",
+      "allModules": "Tous les modules",
+      "action": "Action",
+      "allActions": "Toutes les actions",
+      "status": "Statut",
+      "allStatuses": "Tous les statuts",
+      "fromDate": "Date de début",
+      "toDate": "À la date",
+      "last7Days": "7 derniers jours",
+      "last30Days": "30 derniers jours"
+    },
+    "status": {
+      "success": "Succès",
+      "failure": "Échec",
+      "warning": "Avertissement",
+      "pending": "En attente"
+    },
+    "stats": {
+      "totalActivities": "Total des activités",
+      "successRate": "Taux de réussite",
+      "dailyAverage": "Moyenne quotidienne",
+      "uniqueUsers": "Utilisateurs uniques",
+      "topActions": "Actions principales",
+      "times": "fois"
+    },
+    "export": {
+      "title": "Exporter les journaux d’activité",
+      "description": "Choisir les options d’exportation pour vos journaux d’activité.",
+      "fileName": "Nom du fichier",
+      "fileNamePlaceholder": "Saisir le nom du fichier",
+      "format": "Format d’exportation",
+      "includeDetails": "Inclure les informations détaillées",
+      "includeDateRange": "Inclure la plage de dates dans l’exportation"
+    },
+    "table": {
+      "time": "Heure",
+      "user": "Utilisateur",
+      "action": "Action",
+      "description": "Description",
+      "module": "Module",
+      "severity": "Gravité",
+      "status": "Statut"
+    },
+    "pagination": {
+      "showing": "Affichage de {{shown}} sur {{total}} activités au total",
+      "pageOf": "Page {{page}} / {{totalPages}}"
+    },
+    "modal": {
+      "title": "Détails d’audit Smart Office",
+      "description": "Élément d’audit retourné complet pour l’ID : {{id}}",
+      "entity": "Entité",
+      "method": "Méthode",
+      "createdAt": "Créé le",
+      "changes": "Modifications",
+      "noChanges": "Aucune modification disponible.",
+      "payload": "Charge utile",
+      "performedBy": "Effectué par",
+      "field": "Champ",
+      "changed": "Modifié",
+      "noEffectiveChange": "Aucune modification effective",
+      "changedPaths": "Chemins modifiés",
+      "noDifference": "De et À sont identiques pour ce champ.",
+      "previousFile": "Fichier précédent",
+      "currentFile": "Fichier actuel",
+      "from": "De",
+      "to": "À",
+      "updatedDetails": "Détails mis à jour",
+      "itemsCount": "{{count}} élément(s)",
+      "user": {
+        "name": "Nom",
+        "email": "E-mail",
+        "phone": "Téléphone",
+        "status": "Statut",
+        "userType": "Type d’utilisateur",
+        "registration": "Inscription",
+        "complete": "Terminer",
+        "incomplete": "Incomplet",
+        "roles": "Rôles",
+        "noRoles": "Aucun rôle",
+        "employeeInfo": "Informations de l’employé",
+        "rank": "Rang",
+        "noPermissions": "Aucune autorisation",
+        "noEmployeeDetails": "Aucun détail d’employé"
+      }
+    }
+  },
+  "template": {
+    "configureStyles": "Configurer les styles",
+    "sample": "Exemple de modèle",
+    "generateSample": "Générer un exemple",
+    "content": "Contenu",
+    "pdfPreview": "Aperçu PDF",
+    "saveSettings": "Enregistrer les paramètres",
+    "download": "Télécharger",
+    "loadPayload": "Charger un exemple de charge utile",
+    "loadPayloadDescription": "Téléversez un fichier de charge utile JSON pour préremplir le formulaire avec des données d’exemple",
+    "noTemplates": "Aucun modèle disponible",
+    "loadingTemplates": "Chargement des modèles...",
+    "errorLoadingTemplates": "Erreur lors du chargement des modèles",
+    "errorLoadingTemplate": "Erreur lors du chargement du modèle",
+    "errorLoadingSettings": "Erreur lors du chargement des paramètres de style",
+    "commonProperties": "Propriétés communes",
+    "quickPresets": "Préréglages rapides",
+    "fontSize": "Taille de police",
+    "fontWeight": "Épaisseur de police",
+    "fontFamily": "Famille de police",
+    "textDecoration": "Décoration du texte",
+    "listStyle": "Style de liste",
+    "width": "Largeur",
+    "height": "Hauteur",
+    "margin": "Marge",
+    "padding": "Marge intérieure",
+    "advancedCSS": "Éditeur CSS avancé",
+    "customCSS": "CSS personnalisé",
+    "noPdfInResponse": "Aucun PDF dans la réponse",
+    "generatingSample": "Erreur lors de la génération de l’exemple",
+    "settingsSavedSuccessfully": "Paramètres enregistrés avec succès",
+    "errorSavingSettings": "Erreur lors de l’enregistrement des paramètres",
+    "noCustomSettingsToSave": "Aucun paramètre personnalisé à enregistrer",
+    "downloadingPDF": "Téléchargement du PDF...",
+    "downloadPDFSuccess": "PDF téléchargé avec succès",
+    "downloadPDFFailed": "Échec du téléchargement du PDF",
+    "noPdfAvailable": "Aucun PDF disponible",
+    "basicInfo": "Informations de base",
+    "recordType": "Type de dossier",
+    "external": "Externe",
+    "internal": "Interne",
+    "preferredLanguage": "Langue préférée",
+    "headerFooter": "En-tête et pied de page",
+    "headerStyleSettings": "Paramètres de style de l’en-tête",
+    "footerStyleSettings": "Paramètres de style du pied de page",
+    "subject": "Objet",
+    "subjectStyleSettings": "Paramètres de style de l’objet",
+    "date": "Date",
+    "body": "Corps",
+    "bodyStyleSettings": "Paramètres de style du corps",
+    "sincerelyText": "Texte de salutation",
+    "prefix": "Préfixe",
+    "prefixStyleSettings": "Style du préfixe",
+    "suffix": "Suffixe",
+    "suffixStyleSettings": "Style du suffixe",
+    "prefixCC": "Préfixe CC",
+    "ccPrefixStyleSettings": "Style du préfixe CC",
+    "suffixCC": "Suffixe CC",
+    "ccSuffixStyleSettings": "Style du suffixe CC",
+    "delegatorName": "Nom du délégant",
+    "collaborators": "Collaborateurs",
+    "recipientsAndCC": "Destinataires et CC",
+    "internalCC": "CC interne",
+    "externalCC": "CC externe",
+    "recipients": "Destinataires"
+  },
+  "pendingUsers": {
+    "title": "Employés en attente",
+    "noPendingApprovals": "Aucune approbation en attente 🎉",
+    "reviewAll": "Tout examiner",
+    "approve": "Approuver",
+    "reject": "Rejeter",
+    "name": "Nom",
+    "email": "E-mail",
+    "positions": "Postes",
+    "actions": "Actions",
+    "pending": "en attente",
+    "loadingPendingEmployees": "Chargement des employés en attente...",
+    "allRequestsReviewed": "Toutes les demandes des employés ont été examinées.",
+    "refresh": "Actualiser",
+    "showingUpTo": "Affichage de jusqu’à 50 employés en attente",
+    "employeeApproved": "Employé approuvé",
+    "employeeRejected": "Employé rejeté",
+    "failedToApprove": "Échec de l’approbation",
+    "failedToReject": "Échec du rejet",
+    "employeeApprovedSuccess": "Employé approuvé avec succès",
+    "employeeRejectedSuccess": "Employé rejeté avec succès"
+  },
+  "validation": {
+    "commentRequired": "Le commentaire est requis"
+  },
+  "okrDashboard": {
+    "brandEyebrow": "Intelligence des objectifs",
+    "title": "Tableau de bord de performance OKR",
+    "description": "Une vue ciblée des meilleures performances, de la dynamique des départements et des futures analyses OKR.",
+    "planYear": "Année de planification",
+    "notSelected": "Non sélectionné",
+    "topPerformerEmployee": "Employé le plus performant",
+    "topPerformerDepartment": "Département le plus performant",
+    "employeePlaceholderName": "En attente des données API",
+    "departmentPlaceholderName": "En attente des données API",
+    "employeeHelper": "L'employé en tête apparaîtra ici lorsque l'API du tableau de bord sera connectée.",
+    "departmentHelper": "Le département le plus performant apparaîtra ici lorsque l'API du tableau de bord sera connectée.",
+    "employeeScore": "Score de l'employé",
+    "departmentScore": "Score du département",
+    "placeholderOneTitle": "Signal stratégique",
+    "placeholderOneHelper": "Réservé au prochain indicateur OKR de l'API d'analyse.",
+    "placeholderTwoTitle": "Santé d'exécution",
+    "placeholderTwoHelper": "Réservé aux informations de déploiement, de risque ou d'achèvement.",
+    "comingSoon": "Bientôt disponible",
+    "waitingForApi": "En attente de l'API",
+    "analyticsTitle": "Analyses OKR",
+    "analyticsDescription": "Sélectionnez une plage de dates et un type de graphique pour prévisualiser la visualisation.",
+    "dateRange": "Plage de dates",
+    "chartType": "Type de graphique",
+    "thisMonth": "Ce mois-ci",
+    "thisQuarter": "Ce trimestre",
+    "thisYear": "Cette année",
+    "customRange": "Plage personnalisée",
+    "barChart": "Graphique en barres",
+    "lineChart": "Graphique linéaire",
+    "areaChart": "Graphique en aires",
+    "chartTitle": "Tendance de performance",
+    "chartSubtitle": "Des données d'exemple sont affichées jusqu'à ce que la réponse API soit prête.",
+    "sampleData": "Données d'exemple",
+    "achievement": "Réalisation",
+    "target": "Cible"
+  },
+  "dms": {
+    "loadMore": "Charger plus",
+    "search": "Rechercher…",
+    "loading": "Chargement…",
+    "loadingFiles": "Récupération des fichiers DMS...",
+    "searchFiles": "Rechercher des dossiers et fichiers...",
+    "noSearchResults": "Aucun fichier ne correspond à votre recherche",
+    "emptyFolder": "Rien à afficher ici",
+    "name": "Nom",
+    "owner": "Propriétaire",
+    "size": "Taille",
+    "date": "Dernière modification",
+    "selectAttachment": "Sélectionner une pièce jointe depuis DMS",
+    "retry": "Réessayer",
+    "picker": {
+      "title": "Sélectionner depuis DMS",
+      "hint": "Cliquez sur un fichier pour le sélectionner",
+      "attach": "Joindre"
+    }
+  }
+}
diff --git a/apps/edr-freight-web/backoffice/src/locales/or/translation.json b/apps/edr-freight-web/backoffice/src/locales/or/translation.json
new file mode 100644
index 000000000..90d497894
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/locales/or/translation.json
@@ -0,0 +1,983 @@
+{
+  "nav": {
+    "dashboard": "Daashboordii",
+    "outgoing": "Baatii Oolu",
+    "incoming": "Baatii Dhufu",
+    "external": "Alaa",
+    "internal": "Keessaa",
+    "cc": "CC",
+    "approval": "Eeggachuu",
+    "pending": "Eeggamaa",
+    "Record Management": "Gargaarsa Reekordii"
+  },
+  "initiationType": {
+    "self": "Ofii",
+    "team": "Garee"
+  },
+  "dashboard": {
+    "totalOutgoing": "Iddoo Baatii Oolu",
+    "totalIncoming": "Iddoo Baatii Dhufu",
+    "ccRecords": "Reekordii CC",
+    "totalApproval": "Iddoo Eeggachuu",
+    "lastUpdated": "Jijjiiramaa Dhuma",
+    "refresh": "Haaromsi",
+    "refreshing": "Haaromsaa...",
+    "never": "Hanga Yeroon",
+    "approvalStats": "Tiraasii Eeggachuu",
+    "externalIncoming": "Baatii Dhufu Alaa",
+    "internalIncoming": "Baatii Dhufu Keessaa",
+    "incomingStats": "Tiraasii Baatii Dhufu",
+    "outgoingStats": "Tiraasii Baatii Oolu",
+    "externalIncomingRecords": "Reekordii Baatii Dhufu Alaa",
+    "internalIncomingRecords": "Reekordii Baatii Dhufu Keessaa",
+    "status": {
+      "inProgress": "Fulduraa",
+      "accepted": "Fudhatame",
+      "reassigned": "Deebiif Kenname",
+      "draft": "Qophii",
+      "forward": "Darbi",
+      "approved": "Eeggachaa",
+      "rejected": "Dhiifame",
+      "adjusted": "Tursiifame",
+      "sent": "Ergame",
+      "approve": "Eeggachuu"
+    },
+    "Percentage": "Pireesentii",
+    "Count": "Lakkofsa",
+    "Status": "Haala",
+    "Total": "Iddoo",
+    "pieChart": "Shaartii Pi",
+    "barChart": "Shaartii Baar",
+    "table": "Teebilii",
+    "monthlyIncoming": "Reekordii Baatii Dhufu Ji’a Ji’aa",
+    "monthlyOutgoing": "Reekordii Baatii Oolu Ji’a Ji’aa",
+    "totalInVsOut": "Iddoo Baatii Dhufu vs Oolu",
+    "monthlyInVsOut": "Baatii Dhufu vs Oolu Ji’a Ji’aa",
+    "weeklyInVsOut": "Baatii Dhufu vs Oolu Torban Torbaan",
+    "dailyInVsOut": "Baatii Dhufu vs Oolu Guyyaa Guyyaan",
+    "exportPdf": "PDF Baasu",
+    "exporting": "Baasaa...",
+    "print": "Maxxansi"
+  },
+  "status": {
+    "inProgress": "Fulduraa",
+    "accepted": "Fudhatame",
+    "reassigned": "Deebiif Kenname",
+    "draft": "Qophii",
+    "forward": "Darbi",
+    "approved": "Eeggachaa",
+    "rejected": "Dhiifame",
+    "adjusted": "Tursiifame",
+    "sent": "Ergame",
+    "all": "Hunda"
+  },
+  "welcome": "Baga Nagaan Dhufte",
+  "Preview Record": "Mirkanaa Dura Dubbisuu",
+  "change_password": "Jechi Darbii Sirreessi",
+  "sign_out": "Ba'i",
+  "view_profile": "Pirofaayilii Ilaalu",
+  "user": "Fayyadamaa",
+  "common": {
+    "back": "Deebi",
+    "yes": "Eeyyee",
+    "no": "Lakki",
+    "na": "N/A",
+    "Submit": "Erge",
+    "Cancel": "Dhiisi",
+    "noResult": "Himaa Hin Arganne",
+    "create": "Uumu",
+    "Edit": "Gulaalu",
+    "Delete": "Haque",
+    "Deleting": "Haquaa jira...",
+    "DeletedSuccessfully": "Haqa ta'e",
+    "FailedToDelete": "Haquun hin danda'ine",
+    "ConfirmDelete": "Haquaa Mirkaneessi",
+    "DeleteConfirmationMessage": "\"{{name}}\" haquuf ni barbaadda? Hojiin kun jijjiruun hin danda'ama."
+  },
+  "collaboration": {
+    "inProgress": "Fulduraa",
+    "done": "Xumurrame",
+    "all": "Hunda",
+    "list": "Waliigala"
+  },
+  "profile": {
+    "recentActivity": "Hojiin Dhiyoo Ta'e",
+    "loading": "Pirofaayilii haaromsaa...",
+    "error": "Pirofaayilii haaromsuu hin dandeenye",
+    "tryAgain": "Irra Deebi'ii Yaali",
+    "noName": "Maqaa Hin Qabu",
+    "signOut": "Ba'i",
+    "email": "Imeelii",
+    "userType": "Gosa Fayyadamtoo",
+    "userTypes": {
+      "employee": "Hojjetaa"
+    },
+    "activity": {
+      "login": "Seensa",
+      "passwordChanged": "Jecha Darbii Sirreessame"
+    },
+    "passwordSet": "Jecha Darbii Sirreessame",
+    "status": {
+      "accepted": "Fudhatame"
+    },
+    "positionDetails": "Gadadoo Hojii",
+    "positionName": "Maqaa Hojii",
+    "positionKey": "Furmaata Hojii",
+    "isDelegate": "Ergaa Dha",
+    "employeeId": "ID Hojjetaa",
+    "permissions": "Hayyama",
+    "noPermissions": "Hayyama Hin Kenname",
+    "accountSecurity": "Tiksuu Akaawuntii",
+    "password": "Jecha Darbii",
+    "passwordSetStatus": "Jecha darbiin sirreessame",
+    "passwordNotSetStatus": "Jecha darbiin hin sirreessamin",
+    "changePassword": "Jechi Darbii Sirreessi",
+    "updateProfile": "Pirofaayilii Haala Sirreessi",
+    "profile": "pirofaayilii",
+    "englishName": "Maaloo maqaa afaan ingilizii galchi",
+    "amharicName": "Maaloo maqaa afaan Amarifa galchi",
+    "username": "Maaloo maqaa fayyadamtoo galchi",
+    "phoneNumber": "Maaloo lakkoofsa bilbilaa galchi",
+    "emailmsg": "Maaloo imeelii galchi",
+    "emailRequired": "Imeelii barbaachisaadha",
+    "usernameRequired": "Maqaa fayyadamtoo barbaachisaadha",
+    "phoneRequired": "Lakkoofsa bilbilaa barbaachisaadha",
+    "englishNameRequired": "Maqaa afaan ingilizii barbaachisaadha",
+    "amharicNameRequired": "Maqaa afaan Amarifa barbaachisaadha",
+    "invalidPhoneFormat": "Gosni lakkoofsa bilbilaa sirrii miti.",
+    "validPhoneFormat": "Maaloo lakkoofsa bilbilaa sirrii galchi fakkii +2519XXXXXXXX ykn 09XXXXXXXX",
+    "invalidEmailFormat": "Gosni imeelii sirrii miti",
+    "validEmailFormat": "Maaloo imeelii sirrii galchi",
+    "profileUpdateSuccess": "Pirofaayilii sirreessameera",
+    "profileUpdated": "Pirofaayiliin kee sirreessameera",
+    "profileUpdateFailed": "Pirofaayilii sirreessuu hin dandeenye",
+    "updating": "Sirreessaa"
+  },
+  "complaint": {
+    "title": "Malaammaltummaa Galmeessi",
+    "subtitle": "Gargaarsaaf jirra. Odeeffannoo bal'aa nuuf kenni akka siif gargaaruu dandeenyu.",
+    "formTitle": "Foormii Malaammaltummaa",
+    "fullName": "Maqaa Guutuu",
+    "phone": "Lakkoofsa Bilbila",
+    "subCity": "Kutaa Magaalaa",
+    "woreda": "Woreda",
+    "houseNumber": "Lakkoofsa Manaa",
+    "institution": "Instiitiyuutii",
+    "place": "Bakki Malaammaltummaa",
+    "details": "Ibsa Malaammaltummaa",
+    "want": "Furmaata Barbaadame",
+    "evidence": "Ragaa (Filannoo)",
+    "selectedFiles": "Faayiloota Filataman",
+    "disclaimerTitle": "Beeksisa Murteessa",
+    "disclaimerText": "Foormii kana galchuun odeeffannoon kenname sirrii taʼuu isaa mirkaneessa. Malaammaltummaan sobaa tarkaanfii seeraa jala oolu dandaʼa.",
+    "accept": "Beeksisa kana dubbiseen fudhadheera",
+    "submit": "Malaammaltummaa Galmeessi",
+    "submitting": "Itti ergamaa jira...",
+    "success": "Malaammaltummaan kee milkaa’inaan galmaa’e",
+    "keepId": "Mee lakk. malaammaltummaa keessan eeggadhaa itti fufiinsaaf:",
+    "close": "Cufi",
+    "back": "Deebi'i"
+  },
+  "header": {
+    "tigrigna": "Tigrigna",
+    "affar": "Affar",
+    "somali": "Somali",
+    "oromo": "Affan Oromo",
+    "user": "Fayyadamaa",
+    "management": "Gargaarsa",
+    "notifications": "Beeksisa",
+    "english": "Ingilizii",
+    "englishShort": "ING",
+    "amharic": "Amarifa",
+    "amharicShort": "አማ",
+    "viewProfile": "Pirofaayilii Ilaalu",
+    "changePassword": "Jechi Darbii Sirreessi",
+    "signOut": "Ba'i",
+    "settings": "Sirreeffama",
+    "addTeeter": "Teeteriifi Kaasaa Dabalachiisuu",
+    "addSignature": "Kaasaa Dabalachiisuu",
+    "navigation": {
+      "dashboard": "Daashboordii",
+      "outgoing": "Baatii Oolu",
+      "incoming": "Baatii Dhufu",
+      "approval": "Eeggachuu",
+      "delegation": "Ergaa",
+      "pending": "Eeggamaa",
+      "settings": "Sirreeffama",
+      "collaborations": "Waliigala"
+    },
+    "editProfile": "Pirofaayilii Gulaalu"
+  },
+  "addRecord": {
+    "EditRecord": "Reekordii Gulaalu",
+    "Record Type": "Gosa Reekordii",
+    "Select Record Type": "Gosa Reekordii Filadhu",
+    "Initiation Type": "Gosa Eegumsa",
+    "Select Initiation Type": "Gosa Eegumsa Filadhu",
+    "Receiving Unit": "Tokkicha Fudhatuu",
+    "Select Receiving Units": "Tokkicha Fudhatuu Filadhu",
+    "Receiving Users": "Fayyadamtoota Fudhatuu",
+    "Select Receiving Users": "Fayyadamtoota Fudhatuu Filadhu",
+    "Prefix": "Durfama",
+    "Select Prefix": "Durfama Filadhu",
+    "Non Smart Receiving Unit": "Tokkicha Fudhatuu Smart Hin Taane",
+    "Enter Non Smart Receiving Organization": "Tokkicha Fudhatuu Smart Hin Taane Galchi",
+    "To Departments": "Waaraayyee Geessuu",
+    "Select Department": "Waaraayyee Filadhu",
+    "Preferred Language": "Afaan Filatamaa",
+    "Select Language": "Afaan Filadhu",
+    "Suffix": "Duurbama",
+    "Select Suffix": "Duurbama Filadhu",
+    "Subject": "Wabii",
+    "Enter Subject": "Wabii Galchi",
+    "Letter Template": "Qaama Xalayaa",
+    "Select Letter Template": "Qaama Xalayaa Filadhu",
+    "Body": "Qaama",
+    "External CC": "CC Alaa",
+    "Select External CC": "CC Alaa Filadhu",
+    "Internal CC": "CC Keessaa",
+    "Select Internal CC": "CC Keessaa Filadhu",
+    "Non Smart CC Unit": "Tokkicha CC Smart Hin Taane",
+    "Enter  Non Smart CC Organization": "Tokkicha CC Smart Hin Taane Galchi",
+    "Cancel": "Dhiisi",
+    "Add": "+ Dabalachiisuu",
+    "English": "Ingilizii",
+    "Amharic": "Amarifa",
+    "Header": "Mataa Xalayaa",
+    "Select Header": "Mataa Xalayaa Filadhu",
+    "No Header": "Mataa Hin Qabu",
+    "Footer": "Duuba Xalayaa",
+    "Select Footer": "Duuba Xalayaa Filadhu",
+    "No Footer": "Duuba Hin Qabu",
+    "Collaborators": "Waliigala",
+    "record": "Reekordii",
+    "attachment": "Dabalata",
+    "failedToCreateRecord": "Reekordii Uumuu Hin Dandeenye",
+    "recordSubmittedSuccessfully": "Reekordii Darbameera.",
+    "createRecordFirst": "Maaloo Reekordii Uumuun Dura Dabalata Galchi.",
+    "previous": "Duraan",
+    "submit": "Erge",
+    "recordNotCreatedYet": "Reekordiin Hanga Ammaatti Hin Uumamin.",
+    "submitting": "Ergaa...",
+    "selectCollaborators": "Waliigala Filadhu",
+    "Enter CC Prefix": "Durfama CC Galchi",
+    "CC Prefix": "Durfama CC",
+    "Enter CC Suffix": "Duurbama CC Galchi",
+    "CC Suffix": "Duurbama CC",
+    "Sign Status": "Haala Kaasaa",
+    "ccUsers": "Fayyadamtoota CC",
+    "selectCCUsers": "Fayyadamtoota CC Filadhu",
+    "refreshOptions": "Filannoo Haaromsi",
+    "isTeamSig": "Kaasaa Garee Waliin"
+  },
+  "userRecord": {
+    "All": "Hunda",
+    "recordCreatedAndSent": "Reekordiin uumamee ergameera",
+    "Draft": "Qophii",
+    "Submitted": "Darbame",
+    "Accepted": "Fudhatame",
+    "Approved": "Eeggachaa",
+    "Rejected": "Dhiifame",
+    "Returned": "Deebifame",
+    "Adjustment": "Tursiifama",
+    "Sent": "Ergame",
+    "Letters": "Xalayoonni",
+    "To": "Ergaa",
+    "Subject": "Wabii",
+    "Date": "Guyyaa",
+    "Search": "Barbaadi",
+    "Add Record": "Reekordii Dabalachiisuu",
+    "Error loading records.": "Reekordii Haaromsuu Keessatti Dogoggora.",
+    "Receiver Info": "Odeeffannoo Fudhatuu",
+    "No receivers": "Fudhatoonni Hin Jiru",
+    "No receiving unit": "Tokkicha Fudhatuu Hin Jiru",
+    "Status": "Haala",
+    "Actions": "Hojiiwwan",
+    "View Detail": "Gadadoo Ilaalu",
+    "Open actions menu": "Menyuu Hojiiwwan Bani",
+    "Approve": "Eeggachuu",
+    "Forward": "Darbi",
+    "Edit": "Gulaalu",
+    "Delete": "Haalu",
+    "Download": "Buufachuu",
+    "Record approved successfully!": "Reekordiin Eeggachaa Oole!",
+    "Failed to approve record.": "Reekordii Eeggachuu Hin Dandeenye.",
+    "Approve Record": "Reekordii Eeggachuu",
+    "Record is deleted successfully": "Reekordiin Haalamteera",
+    "Confirm Delete": "Haaluu Mirkaneessuu",
+    "Delete Record": "Reekordii Haaluu",
+    "Downloaded": "Buufatame",
+    "Download Record PDF": "Reekordii PDF Buufachuu",
+    "Failed to download PDF.": "PDF Buufachuu Hin Dandeenye.",
+    "Download successful!": "Buufachuu Milkaa'ee!",
+    "Confirm Forward": "Darbi Mirkaneessuu",
+    "Forward Record": "Reekordii Darbi",
+    "Failed to forward the record": "Reekordii Darbuu Hin Dandeenye",
+    "Record forwarded successfully": "Reekordiin Darbameera",
+    "Confirm Approve": "Eeggachuu Mirkaneessuu",
+    "Reference": "Lakkoofsa Ibsaa",
+    "Reject": "Dhiisuu",
+    "Filter by": "Seensa",
+    "Reference Number": "Lakkoofsa Ibsaa",
+    "Enter the subject of the letter": "Wabii xalayaa galchi",
+    "Delivered By": "Ergameen",
+    "Enter Delivered By": "Ergameen Galchi",
+    "Letter Number": "Lakkoofsa Xalayaa",
+    "Enter Letter Number": "Lakkoofsa Xalayaa Galchi",
+    "Failed to create letter": "Xalayaa Uumuu Hin Dandeenye",
+    "Letter Created successfully": "Xalayiin Uumameera",
+    "Please select file": "Maaloo faayilii filadhu",
+    "Created At": "Uumame Guyyaa",
+    "Sign Status": "Haala Kaasaa",
+    "signStatus": "Haala Kaasaa",
+    "createdAt": "Uumame Guyyaa",
+    "View": "Ilaalu",
+    "Date Received": "Guyyaa Fudhatame",
+    "Attachment": "Dabalata",
+    "ReceivingUnit": "Fudhatuu",
+    "Review your record before submission": "Erga erguudhaan dura mirkanaa keessanii ilaalaa",
+    "Back": "Deebi'i",
+    "Submit Record": "Mirkanaa Ergii",
+    "Submitting": "Erguu keessatti",
+    "Generating preview": "Mirkanaa dura dubbisuu uumuu",
+    "PDF Preview": "Mirkanaa PDF Dura Dubbisuu",
+    "Unable to generate preview": "Mirkanaa dura dubbisuu hin danda'amu",
+    "Retry": "Irra deebi'i",
+    "Record Summary": "Waa'ee Mirkanaa",
+    "No subject": "Wabii hin jiru",
+    "Record Type": "Gosa Mirkanaa",
+    "Not specified": "Kan hin murtoofne",
+    "Language": "Afaan",
+    "Initiation Type": "Gosa Eegumsaa",
+    "Preview generation failed": "Mirkanaa dura dubbisuu hin danda'amu"
+  },
+  "statusBar": {
+    "Pending": "Eeggamaa",
+    "Draft": "Qophii",
+    "draft": "Fulduraa",
+    "InProgress": "Fulduraa",
+    "In Progress": "Fulduraa",
+    "active": "Fulduraa",
+    "Reassigned": "Deebiif Kenname",
+    "re_assigned": "Deebiif Kenname",
+    "Approved": "Eeggachaa",
+    "Accepted": "Fudhatame",
+    "accepted": "Fudhatame",
+    "Dispatched": "Ergame",
+    "Adjustment": "Tursiifama",
+    "adjustment": "Tursiifama",
+    "Rejected": "Dhiifame",
+    "rejected": "Dhiifame",
+    "Submitted": "Darbame",
+    "All": "Hunda",
+    "Reject": "Dhiisuu",
+    "Accept": "Fudhachuu",
+    "Approve": "Eeggachuu",
+    "Adjust": "Tursiisuu",
+    "Sent": "Ergame",
+    "Send": "Ergaa",
+    "Team Signature": "Kaasaa Garee Eeggamaa",
+    "Team Rejected": "Gareen Dhiise",
+    "Team Approved": "Gareen Eeggate",
+    "signed": "Kaasame",
+    "activated": "Hojii irra oole",
+    "deactivated": "Hojii irraa dhaabbate",
+    "activate": "Hojii irra ooluu",
+    "deactivate": "Hojii irraa dhaabbachuu",
+    "totalAllocations": "Iddoo Kenname",
+    "assignmentStatistics": "Tiraasii Kennaa",
+    "Outgoing": "Baatii Oolu",
+    "Incoming": "Baatii Dhufu",
+    "Returned": "Deebifame",
+    "Adjusted": "Tursiifame"
+  },
+  "userIncoming": {
+    "From Date": "Guyyaa Irraa",
+    "To Date": "Guyyaa Geessuu",
+    "Letters": "Xalayoonni",
+    "Department": "Waaraayyaa",
+    "Subject": "Wabii",
+    "Date": "Guyyaa",
+    "Search": "Barbaadi",
+    "Error loading records.": "Reekordii Haaromsuu Keessatti Dogoggora.",
+    "Status": "Haala",
+    "Actions": "Hojiiwwan",
+    "View Detail": "Gadadoo Ilaalu",
+    "Open actions menu": "Menyuu Hojiiwwan Bani",
+    "Sending Department": "Waaraayyaa Ergaa",
+    "No Department": "Waaraayyaa Hin Jiru",
+    "No Subject": "Wabii Hin Qabu",
+    "Sending Organization": "Tokkichaa Ergaa",
+    "Accept": "Fudhachuu",
+    "Assign": "Kennaa",
+    "Edit": "Gulaalu",
+    "Delete": "Haalu",
+    "Download": "Buufachuu",
+    "Reject": "Dhiisuu",
+    "Cancel": "Dhiisi",
+    "Record accepted successfully": "Reekordiin Fudhatameera",
+    "Failed to accept record": "Reekordii Fudhachuu Hin Dandeenye",
+    "Confirm Acceptance": "Fudhachuu Mirkaneessuu",
+    "Are you sure you want to accept this record?": "Reekordii Kana Fudhachuu Ni Barbaadda?",
+    "Confirm": "Mirkaneessuu",
+    "Processing...": "Hojiiwwaa...",
+    "Departments": "Waaraayyoonni",
+    "Select department(s)...": "Waaraayyaa Filadhu...",
+    "Employees": "Hojjetaan",
+    "Select employee(s)...": "Hojjetaa Filadhu...",
+    "Remark": "Yaada",
+    "Failed to Assign a Record": "Reekordii Kennaa Hin Dandeenye",
+    "Assign this record to one or more departments": "Reekordii Kana Waaraayyaa Tokko Ykn Dabalatti Kennaa",
+    "Assign Record": "Reekordii Kennaa",
+    "An error occurred during assignment.": "Kennaa Keessatti Dogoggora Ta'e.",
+    "Enter your remarks...": "Yaada Keessan Galchaa...",
+    "Assigning...": "Kennaa...",
+    "Are you sure you want to reject this record?": "Reekordii Kana Dhiisuu Ni Barbaadda?",
+    "Failed to rejected record": "Reekordii Dhiisuu Hin Dandeenye",
+    "Record rejected successfully": "Reekordiin Dhiifameera",
+    "To": "Ergaa",
+    "ConvertedBy": "Jijjiirameen",
+    "ReceiverDepartment": "Waaraayyaa Fudhatuu",
+    "ReceiverEmployee": "Hojjetaa Fudhatuu",
+    "return": "Deebisi",
+    "returnQues": "Reekordii Kana Deebisuu Ni Barbaadda?",
+    "returing": "Deebisaa...",
+    "conformReturn": "Deebisuu Mirkaneessuu"
+  },
+  "ApprovalPage": {
+    "Letters": "Xalayoonni",
+    "Department": "Waaraayyaa",
+    "Subject": "Wabii",
+    "Date": "Guyyaa",
+    "Search": "Barbaadi",
+    "Error loading records.": "Reekordii Haaromsuu Keessatti Dogoggora.",
+    "Status": "Haala",
+    "Actions": "Hojiiwwan",
+    "View Detail": "Gadadoo Ilaalu",
+    "Open actions menu": "Menyuu Hojiiwwan Bani",
+    "To": "Ergaa",
+    "Receiver": "Fudhatuu",
+    "No Subject": "Wabii Hin Qabu",
+    "Record accepted successfully": "Reekordiin Fudhatameera",
+    "Confirm": "Mirkaneessuu",
+    "Remark": "Yaada",
+    "Accept Record": "Reekordii Fudhachuu",
+    "Record Rejected successfully": "Reekordiin Dhiifameera",
+    "recordAdjustedSuccessfully": "Reekordiin Tursiifameera",
+    "confirmAdjustment": "Tursiisuu Mirkaneessuu",
+    "adjustRecord": "Reekordii Tursiisuu",
+    "selectOrUploadSignature": "Maaloo Kaasaa Filadhu Ykn Galchi",
+    "selectOrUploadTeeter": "Maaloo Teeter Filadhu Ykn Galchi",
+    "recordApprovedSuccessfully": "Reekordiin Eeggachaa Oole!",
+    "failedToApproveRecord": "Reekordii Eeggachuu Hin Dandeenye.",
+    "approveRecord": "Reekordii Eeggachuu",
+    "confirmApprove": "Eeggachuu Mirkaneessuu",
+    "confirmRejection": "Dhiisuu Mirkaneessuu",
+    "rejectRecord": "Reekordii Dhiisuu",
+    "RecordType": "Gosa Reekordii",
+    "selectStamp": "Stampii Filadhu",
+    "selectedStamp": "Stampii Filatame:",
+    "signature": "Kaasaa",
+    "yourSignature": "Kaasaan Keessan:",
+    "selectedSignature": "Kaasaa Filatame:",
+    "selectSignature": "Kaasaa Filadhu",
+    "approving": "Eeggachaa..."
+  },
+  "viewDetail": {
+    "letterPreview": "Dursa Xalayaa",
+    "view": "Ilaalu",
+    "fullScreen": "Shaakala Guutuu",
+    "back": "Deebi",
+    "receivingOrganizations": "Tokkichoonni Fudhatuu",
+    "receivingUserEmployees": "Hojjetaan Fudhatuu",
+    "sendingDepartment": "Waaraayyaa Ergaa",
+    "externalCcOrganizations": "Tokkichoonni CC Alaa",
+    "internalCcDepartments": "Waaraayyoonni CC Keessaa",
+    "receivingDepartments": "Waaraayyoonni Fudhatuu",
+    "sentDate": "Guyyaa Ergame",
+    "referenceNumber": "Lakkoofsa Ibsaa",
+    "attachments": "Dabaltoonni",
+    "remarks": "Yaadannoo",
+    "loadingRemarks": "Yaadannoo Haaromsaa...",
+    "failedToLoadRemarks": "Yaadannoo Haaromsuu Hin Dandeenye.",
+    "noRemarksAvailable": "Yaadannoo Reekordii Kanaaf Hin Jiru.",
+    "action": "Hojii",
+    "comment": "Yaada:",
+    "noAttachmentsAvailable": "Dabaltonni Hin Jiru.",
+    "open": "Bani",
+    "subject": "Wabii",
+    "letterNumber": "Lakkoofsa Xalayaa",
+    "deliveredBy": "Ergameen",
+    "personalRemark": "Yaada Lammummaa",
+    "noPersonalRemarkProvided": "Yaada Lammummaa Hin Jiru",
+    "regeneratePdf": "PDF Haala Sirreessuu",
+    "regeneratingPdf": "Haala Sirreessaa...",
+    "pdfRegenerationSuccess": "PDF Haala Sirreessuun Milkaa'e",
+    "pdfRegenerationFailed": "PDF Haala Sirreessuu Hin Dandeenye",
+    "sendingBureau": "Biroo Ergaa",
+    "collaborators": "Waliigala",
+    "recordDetail": "Gadadoo Reekordii",
+    "commentorEmployee": "Hojjetaa Yaada Kennuu",
+    "commentorDepartment": "Waaraayyaa Yaada Kennuu",
+    "noComment": "Yaada Hin Qabu"
+  },
+  "PDF": {
+    "dropFilesHere": "Faayiloota Asitti Dhiisi",
+    "dragDropInstruction": "Faayiloota Asitti Dhiisi Ykn Filadhuuf Click Gochuu",
+    "youCanUpload": "Galchuu Dandeessu",
+    "removeFile": "Faayilii Haaluu",
+    "filesUpTo": "Faayiloota (Hanga ",
+    "aFileWith": "Faayilii ",
+    "file": "Faayilii",
+    "wasRejected": "Dhiifame",
+    "uploaded": "Galchitame",
+    "failedToUpload": "Galchuu Hin Dandeenye",
+    "uploading": "Galchaa...",
+    "cannotUploadMoreThan": "Hanga "
+  },
+  "convert": {
+    "recordConverted": "Reekordiin Jijjiirameera.",
+    "selectSeal": "Maaloo Seal Filadhu.",
+    "convertRecord": "Reekordii Jijjiiraa",
+    "recordType": "Gosa Reekordii:",
+    "subject": "Wabii:",
+    "convertAndDispatch": "Jijjiiraa & Ergaa",
+    "selectSealLabel": "Seal Filadhu:",
+    "loadingSeals": "Seal Haaromsaa...",
+    "selectSealPlaceholder": "-- Seal Filadhu --",
+    "selectedSealPreview": "Seal Filatame Dursa:"
+  },
+  "delegation": "Gargaarsa Ergaa",
+  "signatureUpload": {
+    "signature": "Kaasaa",
+    "teeter": "Teeter",
+    "uploadSignature": "Kaasaa Galchuu",
+    "uploadTeeter": "Teeter Galchuu",
+    "uploadSignatureNote": "Kaasaa Galchuu (PNG Qofa)",
+    "uploadTeeterNote": "Teeter Galchuu (PNG Qofa)",
+    "uploadedSignature": "Kaasaa Galchitame:",
+    "uploadedTeeter": "Teeter Galchitame:",
+    "enterFileName": "Maqaa Faayilaa Galchi (Extension Hin Qabne)",
+    "preview": "Dursa:",
+    "upload": "Galchuu",
+    "uploading": "Galchaa...",
+    "remove": "Haaluu",
+    "removing": "Haalaa...",
+    "removedSuccess": "Haalamteera.",
+    "removeTeeterFailed": "Teeter Haaluu Hin Dandeenye",
+    "removeFailed": "Haaluu Hin Dandeenye.",
+    "selectPngFirst": "Maaloo Faayilaa PNG Filadhu.",
+    "onlyPngAllowed": "Faayiloota PNG Qofa.",
+    "signatureExists": "Kaasaan Jira. Haaluun Dura Galchi Haaraa.",
+    "uploadSuccess": "Galchuu Milkaa'e!",
+    "uploadError": "Dogoggora Galchuu:",
+    "uploadFailed": "Galchuu Hin Dandeenye.",
+    "openSignatureForm": "Open Signature Drawer"
+  },
+  "assignment": {
+    "assignedBy": "Kennameen",
+    "assignedTo": "Ergaan Kenname",
+    "assignedOn": "Guyyaa Kenname:",
+    "comment": "Yaada:",
+    "assignmentFlow": "Kutaa Kennaa",
+    "noAssignments": "Reekordii Kanaaf Kennaa Hin Taane.",
+    "responded": "Deebii Kenname"
+  },
+  "auth": {
+    "welcomeBack": "Baga Nagaan Dhufte",
+    "enterCredentials": "Maaloo Ibsaa Keessan Galchaa Itti Fufuu",
+    "email": "Imeelii",
+    "phoneNumber": "Lakkoofsa Bilbilaa",
+    "username": "Maqaa Fayyadamtoo",
+    "password": "Jecha Darbii",
+    "rememberMe": "Na Yaadadhu",
+    "forgotPassword": "Jecha Darbii Irgadhee?",
+    "loggingIn": "Seensaa...",
+    "login": "Seensa",
+    "welcomeHeadline": "Baga Smart Office Keessan Geessan",
+    "paperlessOffice": "Office Bilbila Hin Qabne",
+    "welcomeSubtext": "Seensa Hojii Keessan Gargaaruufi Dhiibbaa Dhabamsiisuu.",
+    "emailAddress": "Imeelii",
+    "err": "Lakkoofsa Bilbilaa Itoophiyaa Sirrii Miti. +251 Irraa Eegaluu Qaba.",
+    "invalidEmail": "Please enter a valid email address"
+  },
+  "msg": {
+    "sent": "Xalayiin Ergameera",
+    "failedToCreate": "Reekordii Uumuu Hin Dandeenye",
+    "failedToGetUrl": "URL Galchuu Hin Dandeenye",
+    "registrationSuccess": "Galmaa'ee. SMS Jecha Darbii Sirreessuu Ergameera.",
+    "errorOccurred": "Dogoggora Ta'e.",
+    "pdfRegenerated": "PDF Haala Sirreessuun Milkaa'e.",
+    "approveFailed": "Reekordii Eeggachuu Hin Dandeenye.",
+    "approveSuccess": "Reekordiin Eeggachaa Oole",
+    "selectPrompt": "Maaloo Stampii Filadhu.",
+    "extendedSuccess": "Ergaa Dheeressuun Milkaa'e.",
+    "letter": "Xalayaa",
+    "approvedSuccess": "Reekordiin Eeggachaa Oole!",
+    "submittedSuccess": "Reekordiin Darbameera!",
+    "markedForAdjustment": "Tursiisuu Ibsame",
+    "sentToOfficer": "Hojjetaa Reekordii Geessee",
+    "errorSendingToOfficer": "Hojjetaa Reekordii Geessuu Keessatti Dogoggora",
+    "success": "Ergaa Milkaa'e.",
+    "failed": "Ergaa Hin Dandeenye.",
+    "deletedSuccess": "Ergaa Haalamteera.",
+    "deleteFailed": "Ergaa Haaluu Hin Dandeenye.",
+    "failedCreateOrGetUrl": "Reekordii Uumuu Ykn URL Argachuu Hin Dandeenye.",
+    "sentAndUploadedSuccess": "Xalayiin Ergamee Faayiliinis Galchitameera.",
+    "failedSendOrUpload": "Xalayaa Ergaa Ykn Faayilaa Galchuu Hin Dandeenye.",
+    "successassign": "Reekordiin Kennameera.",
+    "submittedWithAttachments": "Reekordii Fi Dabaltoonni Darbaman.",
+    "createFailed": "Reekordii Uumuu Hin Dandeenye.",
+    "refreshedSuccess": "Haaromsi Milkaa'e.",
+    "refreshFailed": "Haaromsuu Hin Dandeenye.",
+    "redirecting": "Deebisaa...",
+    "loginSuccess": "Seensa Milkaa'e.",
+    "receivingDepartmentRequired": "Yoo xalayaa giddu galeessa ta’e, waareen fudhatuu tokko ykn dabalatti filadhu",
+    "receivingUnitRequired": "Tokkicha fudhatuu tokko ykn dabalatti filadhu",
+    "recordTypeRequired": "Gosa reekordii barbaachisaadha",
+    "initiationTypeRequired": "Gosa eegumsa barbaachisaadha",
+    "subjectRequired": "Wabii barbaachisaadha",
+    "preferredLanguageRequired": "Afaan filatamaa barbaachisaadha",
+    "bodyRequired": "Qaama barbaachisaadha",
+    "sincerelyTextRequired": "Ibsa dhiheenya barbaachisaadha",
+    "headerRequired": "Mataa barbaachisaadha",
+    "footerRequired": "Duuba barbaachisaadha",
+    "accessDenied": "Dhaabbannaa Argachuu",
+    "accessDeniedmsg": "Ergaa Hojii Irra Ooltu Siif Jiraachuun Bifa Kana Hin Seenuu Dandeessu. Itti Fufuu Ergaa Haaluun Dura.",
+    "accessDeniedmsg2": "Ergaa Hojii Irra Ooltu Siif Jiraachuun Bifa Kana Hin Seenuu Dandeessu. Hojjetaa Biroon Ergaa Siif Kennamee Jiraachuun Ergaa Kennaa Hin Dandeessu",
+    "accessDeniedmsg3": "Tokkichaan kun hin dandeessisu ykn hojii hin kennameefuu modilii gargaarsa reekordii argachuu hin dandeessu"
+  },
+  "landingPage": {
+    "smartOffice": "EDR Smart Office",
+    "signIn": "Seensa",
+    "signUp": "Galmaa'uu",
+    "overview": "Ibsa Guutuu",
+    "features": "Qabiyyee",
+    "workflow": "Hojiiwwan",
+    "manual": "Qajeelcha",
+    "digitalTransformation": "Jijjiiraa Digitalii Hojiiwwan Mootummaa Haaraa.",
+    "facebook": "Facebook",
+    "twitter": "Twitter",
+    "telegram": "Telegram",
+    "tiktok": "TikTok",
+    "contactUs": "Nu Qunnamuu",
+    "quickLinks": "Linkkii Dafaa",
+    "copyright": "Tria Plc - Copyright ©",
+    "rightsReserved": "Mirga Hunda Triaan Bira - Triaan Bira",
+    "address": "Lingo Tower Infront of Sheger House, Bole, Addis Ababa, Ethiopia",
+    "platformSystem": "Sisteemii Platform",
+    "initiativeDescription": "Jijjiiraa Digitalii Addis Ababa City Administration Hojiiwwan Mootummaa Digitalii Haaraa.",
+    "getStarted": "Eegaluu",
+    "learnMore": "Dabalataan Baradhu",
+    "sops": "SOPS",
+    "smartOfficePlatformSystem": "Smart Office Platform System",
+    "revolutionDescription": "Hojiiwwan Mootummaa Jijjiiraa Digitalii Tajaajila Hojiiwwan Yeroo Dhugaa.",
+    "liveDemo": "Live Demo Argama",
+    "outgoingRecords": "Reekordii Baatii Oolu",
+    "outgoingRecordsDesc": "Reekordii Giddu Galeessaa Ykn Alaa Uumuu Fi Darbuu.",
+    "incomingRecords": "Reekordii Baatii Dhufu",
+    "incomingRecordsDesc": "Reekordii Fudhatuu, Deebii Kennuu, Waaraayyootatti Kennaa.",
+    "approvalWorkflows": "Hojiiwwan Eeggachuu",
+    "approvalWorkflowsDesc": "Xalayaa Digitalii Fi Kaasaa Eeggachuu Hojiiwwan Waaraayyaa.",
+    "interactiveDashboard": "Daashboordii Walqunnamtii",
+    "interactiveDashboardDesc": "Reekordii Dhufu Fi Oolu Yeroo Dhugaa, Summarii Waaraayyaa.",
+    "organizedFolders": "Folders Qindoominaan",
+    "organizedFoldersDesc": "Reekordii Seensa Fi Filannoo.",
+    "securityAccessControl": "Tiksuu Fi Dhaabbannaa",
+    "securityAccessControlDesc": "Hojiiwwan Mirga Fi Ibsa Hojiiwwan.",
+    "powerfulFeaturesTitle": "Qabiyyee Cimaa",
+    "powerfulFeaturesSubtitle": "Hojiiwwan Reekordii Gargaaruu",
+    "powerfulFeaturesDesc": "Qabiyyee Keenya Reekordii Gargaaru.",
+    "feature1": "Yeroo Eeggachuu Dafaa",
+    "feature2": "Reekordii Qindoominaan",
+    "feature3": "Ibsa Hojiiwwan",
+    "documentWorkflow": "Hojiiwwan Dokumantii",
+    "recordCreation": "Uumuu Reekordii",
+    "recordCreationDesc": "Fayyadamtoon Reekordii Haaraa Uumu",
+    "teamLeaderReview": "Ijoo Hojii Garee",
+    "teamLeaderReviewDesc": "Eeggachuu Duraa",
+    "directorApproval": "Eeggachuu Dirrektoraa",
+    "directorApprovalDesc": "Eeggachuu Waaraayyaa",
+    "deputyHeadReview": "Eeggachuu Deputy",
+    "deputyHeadReviewDesc": "Eeggachuu Xumuraa",
+    "recordOfficerProcessing": "Hojjetaa Reekordii",
+    "recordOfficerProcessingDesc": "Galmee Fi Ergaa",
+    "streamlinedProcess": "Hojiiwwan Gargaaruu",
+    "recordManagementApprovalWorkflows": "Hojiiwwan Eeggachuu Gargaarsa Reekordii",
+    "smartOfficeDescription": "Smart Office Hojiiwwan Digitalii Gargaaruu.",
+    "step": "DANBAA",
+    "requestChanges": "Jijjiiraa Gaafachuu",
+    "workflowAutomationBenefits": "Baraakaa Hojiiwwan",
+    "workflowAutomationDesc": "Hojiiwwan Keenya Yeroo Xiqqeessuu.",
+    "fasterApprovals": "Eeggachuu Dafaa",
+    "reduceDelays": "Yeroo Dhiisuu",
+    "auditTrail": "Ibsa Hojiiwwan",
+    "completeRecord": "Reekordii Guutuu",
+    "advancedFeatures": "Qabiyyee Guddinaa",
+    "slaMonitoring": "Ibsa SLA",
+    "slaMonitoringDesc": "Ibsa Yeroo Tajaajilaa.",
+    "conditionalRouting": "Filannoo Filannoo",
+    "conditionalRoutingDesc": "Filannoo Reekordii.",
+    "temporaryApprovalDelegation": "Ergaa Yeroo Xumuraa."
+  },
+  "login": "Sisteematti Seensa",
+  "step1": "1. Headaa keessatti",
+  "headerBtn": "battuu ni tuqi",
+  "step2": "2. Maqaa fayyadamtoo fi jecha darbii administiraatorii keessan kennu galchi",
+  "step3": "3. Sisteematti argachuuf",
+  "accessBtn": "battuu ni tuqi",
+  "note": "Yaadannoo",
+  "forgotIntro": "Yoo jecha darbii irgadde, administiraatorii sisteemaa keessanitti quunnamaa jecha darbii haaraa galchisuuf.",
+  "dashboardTitle": "Daashboordii Waliigala",
+  "dashboardDesc": "Daashboordiin hojiiwwan reekordii keessanii waliigalaa agarsiisa:",
+  "recordsCreated": "Reekordii Uumame",
+  "recordsTotal": "Reekordii eegumsa keessanii",
+  "recordsReceived": "Reekordii Fudhatame:",
+  "incomingDocs": "Dokumantoota fageenyaa irraa dhufan",
+  "breakdown": "Qooda Keessaa/Fageenyaa:",
+  "visuals": "Shaartiiwwan gosa dokumantootaa agarsiisan",
+  "approvalStatus": "Haala Eeggachuu",
+  "approvalTypes": "Reekordii eeggamaa, eeggachaa ykn dhiifame",
+  "quickActions": "Hojiiwwan Dafaa",
+  "createOrCheck": "Reekordii haaraa uumuu ykn eeggachaa eeggamaa daashboordii irraa tuqaa",
+  "recentActivity": "Hojii Dhiyoo Ta'e",
+  "trackUpdates": "Jijjiirama dokumantoota keessanii hordofaa",
+  "manageOut": "Reekordii Baatii Oolu Gargaaruu",
+  "createNew": "Reekordii Haaraa Uumuu",
+  "goToTab": "Tab",
+  "clickBtn": "battuu ni tuqi",
+  "fillFields": "Bakka barbaachisaa guutuu (gosaa reekordii, fudhatuu, wabii, fi kkf)",
+  "attach": "Dokumantii gargaarsaa yoo barbaadde dabalachiisi",
+  "saveOrSubmit": "Qophii akka qophaa'uu ykn eeggachuuf dhiyeessi",
+  "trackStatus": "Haala Reekordii Hordofuu",
+  "notForwarded": "Odeeffannoon kun darbamuu hin dhiisne. Odeeffannoon kun gulaalamuu fi haalamuu danda'a",
+  "awaiting": "Odeeffannoon kun fudhachuu ykn eeggachuu eeggamaa jira",
+  "accepted": "Odeeffannoon kun fudhatamee eeggachuu eeggamaa jira",
+  "approvedSent": "Odeeffannoon kun eeggachaa oolee hojjetaa reekordii geessee akka darbamu ta'e",
+  "returned": "Odeeffannoon kun tursiisuu ykn odeeffannoo dabalataaf deebifame. Yaada ilaalaa",
+  "rejected": "Odeeffannoon kun dhiifame",
+  "sent": "Odeeffannoon kun fudhatootatti geessame",
+  "returnedByOfficer": "Odeeffannoon kun Hojjetaa Reekordii irraa deebifame",
+  "monitor": "Reekordii keessanii sadarkaa eeggachuu hunda keessatti hordofaa",
+  "manageIncoming": "Reekordii Baatii Dhufu Gargaaruu",
+  "incomingTypes": "Gosa Reekordii Dhufuu",
+  "fromOthers": "Tokkichoota biroo irraa",
+  "withinOrg": "Tokkichaa keessani keessaa",
+  "copied": "Odeeffannoo keessanif kan dabarfame",
+  "processIncoming": "Reekordii Dhufu Gargaaruu",
+  "readDoc": "Dokumantii guutuu bani fi dubbisi",
+  "acknowledge": "Fudhachuu dokumantii mirkaneessi",
+  "forward": "Yoo barbaadde garee hojjetaa biraatti darbi",
+  "archive": "Kuusaa",
+  "fileRef": "Yaadannoo itti aanuuf kuusaa",
+  "apprvalworkflow": "Hojii Eeggachuu",
+  "process": "Hojii Eeggachuu",
+  "internalFlow": "Hojii Reekordii Keessaa:",
+  "creator": "Uumaa",
+  "leader": "Ijoo Garee",
+  "director": "Dirrektoraa",
+  "officer": "Hojjetaa Reekordii",
+  "externalFlow": "Hojii Reekordii Alaa:",
+  "actions": "Hojiiwwan Eeggachuu",
+  "delegateInfo": "Yoo argamuu dhabde, mirga eeggachuu keessan hojjetaa garee biraatti erguu dandeessu:",
+  "delegateNav": "Tab",
+  "selectColleague": "Hojjetaa qindoomina tokkichaa keessanii filadhu",
+  "setDates": "Guyyaa eegaluu fi xumuraa ergaa sirreessi",
+  "setPerms": "Mirga erguu barbaaddu ibsi",
+  "saveDelegate": "Sirreeffama ergaa qabachiisi",
+  "autoExpire": "Ergaan guyyaa xumuraa sirreessite ofii ofii xumurama.",
+  "collab": "Bakka Hojii Waliigalaa",
+  "collabInfo": "Tabni waliigalaa reekordii hojjetaa hedduu irraa gaafii barbaadu walitti qaba:",
+  "viewDocs": "Dokumantoota waliigalaa bakka tokkotti ilaalu",
+  "addComments": "Yaada ykn ibsa dabalachiisi",
+  "approve": "Kaasaa digitalii waliin eeggachuu yoo walii galu",
+  "trackChanges": "Jijjiirama fi seenaa jijjiirama hordofaa",
+  "realTime": "Jijjiirama Yeroo Dhugaa",
+  "liveChanges": "Jijjiirama hojjetaa biraa yeroo itti ta'u argadhu",
+  "notifications": "Sisteemii Beeksisaa",
+  "alerts": "Beeksisa argadhu yoo hojjetaan biraan dokumantii keessatti hojjatan",
+  "signatureMgmt": "Gargaarsa Teeter & Kaasaa",
+  "leadersOnly": "Ijoonni garee fi ol kaasaa digitalii fi teeter isaanii gargaaru:",
+  "signatureTitle": "Teeter & Kaasaa",
+  "uploadTeeter": "Suuraa teeterii ofiisaa galchi",
+  "uploadSignature": "Kaasaa digitalii uumuu ykn galchuu",
+  "defaultSignature": "Eeggachuu hundaaf kan default ta'e taasisi",
+  "updateDesignation": "Yeroo hundaa sirreessituu ofiisaa haala sirreessituu",
+  "security": "Beeksisa Tiksuu:",
+  "encrypted": "Teeter fi kaasaan keessan tiksuu fi eeggachuu ofiisaa qofaaf kan fayyadaman.",
+  "recordModule": "Moodeelii Gargaarsa Reekordii",
+  "guide": "Qajeelfama guutuu fayyadamaa Sisteemii Smart Office Platform",
+  "back": "Daashboordii Deebi'uu",
+  "moduleGuide": "Qajeelfama Moodeelii",
+  "previous": "Duraanii",
+  "next": "Itaanaa",
+  "addTeeterAndSignature": "Teeter digitalii fi kaasaa dabalachiisuu",
+  "returnWithComments": "Yaada waliin deebisi",
+  "requestModifications": "Jijjiirama gaafadhu",
+  "screenshotOf": "Suuraa kaansaa",
+  "fasterApproval": "Eeggachuu Dafaa",
+  "auditReady": "Audituuf Qophaa'e",
+  "organizedRecords": "Reekordii Qindoominaan",
+  "tab": "Tab",
+  "click": "Tuqi",
+  "button": "Battuu",
+  "organization": {
+    "organizations": "Tokkichoota",
+    "newOrganization": "Tokkichaa Haaraa",
+    "organizationName": "Maqaa Tokkichaa",
+    "createdOn": "Uumame Guyyaa",
+    "numberOfUsers": "Lakkoofsa Fayyadamtootaa",
+    "assignedAdmin": "Administiraatorii Kenname",
+    "isGovernmentOrganization": "Tokkichaa Mootummaa Dha",
+    "createNew": "Uumuu Haaraa",
+    "edit": "Gulaaluu",
+    "enterDetails": "Odeeffannoo tokkichaa haaraa galchi. Bakka asterisk (*) qabu hundi barbaachisaadha.",
+    "nameAmharic": "Maqaa (Amarifa)",
+    "nameEnglish": "Maqaa (Ingilizii)",
+    "key": "Furmaata",
+    "organizationType": "Gosa Tokkichaa",
+    "loadingOrganizationTypes": "Gosa tokkichootaa haaromsaa...",
+    "errorLoadingOrganizationTypes": "Dogoggora gosa tokkichootaa haaromsuu",
+    "noOrganizationTypesAvailable": "Gosa tokkichootaa hin jiru",
+    "parentOrganization": "Tokkichaa Waayila (filannoo)",
+    "loading": "Haaromsaa...",
+    "selectOrganization": "Tokkichaa filadhu",
+    "noOrganization": "Tokkichaa hin jiru",
+    "isOrganizationPublic": "Tokkichaan Dhaabbataa Dha",
+    "selectOrganizationType": "Gosa tokkichaa filadhu",
+    "deleteOrganization": "Tokkichaa Haaluu",
+    "confirmDelete": "Tokkichaa haaluu ni barbaadda?",
+    "cannotUndo": "Hojii kana deebisuun hin danda'amuu.",
+    "deleting": "Haalaa...",
+    "delete": "Haaluu",
+    "viewOrganization": "Tokkichaa Ilaaluu",
+    "editOrganization": "Tokkichaa Gulaaluu",
+    "englishNameRequired": "Maqaa ingilizii barbaachisaadha",
+    "amharicNameRequired": "Maqaa Amarifa barbaachisaadha",
+    "invalidEmail": "Imeelii sirrii miti",
+    "usernameMinLength": "Maqaa fayyadamtoo sadarkaa 3 qabaachuu qaba",
+    "organizationRequired": "Tokkichaa barbaachisaadha",
+    "invalidPhoneNumber": "Lakkoofsa bilbilaa Itoophiyaa sirrii ta'uu qaba",
+    "registerAdminTitle": "Administiraatorii Tokkichaa Galmaa'uu",
+    "registerAdminDescription": "Bakka barbaachisaa guuti galchuu",
+    "enterEnglishName": "Maqaa ingilizii galchi",
+    "enterAmharicName": "Maqaa Amarifa galchi",
+    "email": "Imeelii",
+    "emailExample": "imeelii@faannoo.com",
+    "username": "Maqaa Fayyadamtoo",
+    "enterUsername": "Maqaa fayyadamtoo galchi",
+    "phoneNumber": "Lakkoofsa Bilbilaa",
+    "phoneNumberExample": "fa. 0912345678 ykn +251912345678",
+    "organization": "Tokkichaa",
+    "registering": "Galmaa'aa...",
+    "registerAdmin": "Administiraatorii Galmaa'uu",
+    "dashboard": "Daashboordii",
+    "organizationAdmins": "Administiraatoroota Tokkichaa",
+    "externalUsers": "Fayyadamtoota Alaa",
+    "userManagement": "Gargaarsa Fayyadamtootaa",
+    "userApproval": "Fayyadamtoota Eeggamaa",
+    "content": "Qabiyyee",
+    "bulkUpload": "Galchuu Baay'ee",
+    "positionTypes": "Gosa Hojii",
+    "activityLog": "Seenaa Hojii",
+    "setting": "Sirreeffama",
+    "loadingAdmins": "Administiraatoroota haaromsaa...",
+    "errorLoadingAdmins": "Dogoggora odeeffannoo administiraatorii haaromsuu",
+    "retry": "Irra Deebi'ii Yaali",
+    "assignAdmin": "Administiraatorii Kennaa",
+    "addAdmin": "Administiraatorii Dabalachiisuu",
+    "adminAssignedSuccess": "Administiraatoriin kennameera",
+    "userAssignedSuccess": "Fayyadamtoon kennameera",
+    "userAssignFailed": "Fayyadamtoon kennamee hin dandeenye",
+    "assignAdminToOrganization": "Administiraatorii Tokkichaa Kennaa",
+    "assignAdminInstructions": "Tokkichaa fi fayyadamtoo filadhu akka administiraatorii taasifachuuf.",
+    "users": "Fayyadamtoota",
+    "searchUsers": "Fayyadamtoota barbaadi...",
+    "noUsersFound": "Fayyadamtoota hin argamne",
+    "assigning": "Kennaa...",
+    "assignUser": "Fayyadamtoo Kennaa",
+    "pendingExternalUsers": "Fayyadamtoota Alaa Eeggamaa",
+    "activateUserPrompt": "Fayyadamtoo kana hojii irra ooluu?",
+    "activateUserDescription": "Kun fayyadamtoota platformii argachuuf danda'a",
+    "activating": "Hojii irra oolaa...",
+    "yesActivate": "Eeyyee, hojii irra ooli",
+    "statistics": "Tiraasii",
+    "totalOrganizations": "Iddoo Tokkichootaa",
+    "recentOrganizations": "Tokkichoota Dhiyoo Ta'e",
+    "viewMore": "Dabalataan ilaalu →",
+    "recentActivities": "Hojiiwwan Dhiyoo Ta'e",
+    "moreActivities": "Hojiiwwan dabalataan →",
+    "noRecentActivities": "Hojiiwwan dhiyoo ta'e hin argamne"
+  },
+  "userIncomingretun": {
+    "View Detail": "Gadadoo Ilaaluu",
+    "Open actions menu": "Menyuu Hojiiwwan Bani",
+    "Actions": "Hojiiwwan",
+    "convertRecord": "Reekordii Jijjiiraa",
+    "return": "Deebisi",
+    "returning": "Deebisaa...",
+    "returing": "Deebisaa...",
+    "conformReturn": "Deebisuu Mirkaneessuu",
+    "Please provide a reason for returning this record.": "Maaloo sababa reekordii kana deebisuuf galchi.",
+    "ReturnComment": "Yaada Deebisuu",
+    "EnterReturnReason": "Sababa deebisuuf galchi",
+    "CommentRequired": "Yaada barbaachisaadha",
+    "RecordReturnedSuccessfully": "Reekordiin deebifameera",
+    "FailedToReturnRecord": "Reekordii deebisuu hin dandeenye"
+  },
+  "landingPagee": {
+    "smartOffice": "EDR Smart Office",
+    "overview": "Waliigala Ilaalcha",
+    "features": "Amalaalee",
+    "services": "Tajaajiloota",
+    "fileComplaint": "Komii Galchaa",
+    "followComplaint": "Komii Duraa Hordofaa",
+    "aboutUs": "Nu Waliin Beekaa",
+    "workflow": "Hojii Adeemsa",
+    "manual": "Gorsa",
+    "signIn": "Seeni",
+    "signUp": "Galmaa'i"
+  },
+  "registration": {
+    "incompleteRegistration": "Adeemsi galmee keessan hin xumuramne. Dabalataan, galmee barbaachisu galchaa.",
+    "uploadDocuments": "Galmee Olkaa'i",
+    "registrationRequired": "Fuula kana fayyadamuuf adeemsa galmee keessan xumuruun dirqama."
+  },
+  "okrDashboard": {
+    "brandEyebrow": "Xiinxala Kaayyoo",
+    "title": "Daashboordii Raawwii OKR",
+    "description": "Ilaalcha waliigalaa raawwii olaanaa, sochii kutaa fi xiinxala OKR dhufuuf qophaa'e.",
+    "planYear": "Waggaa Karooraa",
+    "notSelected": "Hin filatamne",
+    "topPerformerEmployee": "Hojjetaa Raawwii Olaanaa",
+    "topPerformerDepartment": "Kutaa Raawwii Olaanaa",
+    "employeePlaceholderName": "Odeeffannoo API eegaa jira",
+    "departmentPlaceholderName": "Odeeffannoo API eegaa jira",
+    "employeeHelper": "API daashboordii yeroo walitti hidhamu hojjetaan dursaa asitti ni mul'ata.",
+    "departmentHelper": "API daashboordii yeroo walitti hidhamu kutaan raawwii olaanaa asitti ni mul'ata.",
+    "employeeScore": "Qabxii hojjetaa",
+    "departmentScore": "Qabxii kutaa",
+    "placeholderOneTitle": "Mallattoo Tarsiimoo",
+    "placeholderOneHelper": "Hubannoo OKR itti aanu kan API xiinxalaa irraa dhufuuf qophaa'e.",
+    "placeholderTwoTitle": "Fayyaa Raawwii",
+    "placeholderTwoHelper": "Hubannoo raawwii, balaa yookaan xumuraaf qophaa'e.",
+    "comingSoon": "Dhiyootti",
+    "waitingForApi": "API eegaa jira",
+    "analyticsTitle": "Xiinxala OKR",
+    "analyticsDescription": "Mul'ata daashboordii ilaaluuf daangaa guyyaa fi gosa chaartii filadhu.",
+    "dateRange": "Daangaa Guyyaa",
+    "chartType": "Gosa Chaartii",
+    "thisMonth": "Ji'a Kana",
+    "thisQuarter": "Kurmaana Kana",
+    "thisYear": "Waggaa Kana",
+    "customRange": "Daangaa Addaa",
+    "barChart": "Chaartii Ulee",
+    "lineChart": "Chaartii Sararaa",
+    "areaChart": "Chaartii Bal'inaa",
+    "chartTitle": "Adeemsa Raawwii",
+    "chartSubtitle": "Hamma deebiin API qophaa'utti odeeffannoon fakkeenyaa ni mul'ata.",
+    "sampleData": "Odeeffannoo Fakkeenyaa",
+    "achievement": "Milkaa'ina",
+    "target": "Galma"
+  }
+}
diff --git a/apps/edr-freight-web/backoffice/src/locales/sm/translation.json b/apps/edr-freight-web/backoffice/src/locales/sm/translation.json
new file mode 100644
index 000000000..55f01bef4
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/locales/sm/translation.json
@@ -0,0 +1,940 @@
+{
+  "nav": {
+    "dashboard": "Daashboordii",
+    "outgoing": "Baatii Oolu",
+    "incoming": "Baatii Dhufu",
+    "external": "Alaa",
+    "internal": "Keessaa",
+    "cc": "CC",
+    "approval": "Eeggachuu",
+    "pending": "Eeggamaa",
+    "Record Management": "Gargaarsa Reekordii"
+  },
+  "initiationType": {
+    "self": "Ofii",
+    "team": "Garee"
+  },
+  "dashboard": {
+    "totalOutgoing": "Iddoo Baatii Oolu",
+    "totalIncoming": "Iddoo Baatii Dhufu",
+    "ccRecords": "Reekordii CC",
+    "totalApproval": "Iddoo Eeggachuu",
+    "lastUpdated": "Jijjiiramaa Dhuma",
+    "refresh": "Haaromsi",
+    "refreshing": "Haaromsaa...",
+    "never": "Hanga Yeroon",
+    "approvalStats": "Tiraasii Eeggachuu",
+    "externalIncoming": "Baatii Dhufu Alaa",
+    "internalIncoming": "Baatii Dhufu Keessaa",
+    "incomingStats": "Tiraasii Baatii Dhufu",
+    "outgoingStats": "Tiraasii Baatii Oolu",
+    "externalIncomingRecords": "Reekordii Baatii Dhufu Alaa",
+    "internalIncomingRecords": "Reekordii Baatii Dhufu Keessaa",
+    "status": {
+      "inProgress": "Fulduraa",
+      "accepted": "Fudhatame",
+      "reassigned": "Deebiif Kenname",
+      "draft": "Qophii",
+      "forward": "Darbi",
+      "approved": "Eeggachaa",
+      "rejected": "Dhiifame",
+      "adjusted": "Tursiifame",
+      "sent": "Ergame",
+      "approve": "Eeggachuu"
+    },
+    "Percentage": "Pireesentii",
+    "Count": "Lakkofsa",
+    "Status": "Haala",
+    "Total": "Iddoo",
+    "pieChart": "Shaartii Pi",
+    "barChart": "Shaartii Baar",
+    "table": "Teebilii",
+    "monthlyIncoming": "Reekordii Baatii Dhufu Ji’a Ji’aa",
+    "monthlyOutgoing": "Reekordii Baatii Oolu Ji’a Ji’aa",
+    "totalInVsOut": "Iddoo Baatii Dhufu vs Oolu",
+    "monthlyInVsOut": "Baatii Dhufu vs Oolu Ji’a Ji’aa",
+    "weeklyInVsOut": "Baatii Dhufu vs Oolu Torban Torbaan",
+    "dailyInVsOut": "Baatii Dhufu vs Oolu Guyyaa Guyyaan",
+    "exportPdf": "PDF Baasu",
+    "exporting": "Baasaa...",
+    "print": "Maxxansi"
+  },
+  "status": {
+    "inProgress": "Fulduraa",
+    "accepted": "Fudhatame",
+    "reassigned": "Deebiif Kenname",
+    "draft": "Qophii",
+    "forward": "Darbi",
+    "approved": "Eeggachaa",
+    "rejected": "Dhiifame",
+    "adjusted": "Tursiifame",
+    "sent": "Ergame",
+    "all": "Hunda"
+  },
+  "welcome": "Baga Nagaan Dhufte",
+  "Preview Record": "Mirkanaa Dura Dubbisuu",
+  "change_password": "Jechi Darbii Sirreessi",
+  "sign_out": "Ba'i",
+  "view_profile": "Pirofaayilii Ilaalu",
+  "user": "Fayyadamaa",
+  "common": {
+    "back": "Deebi",
+    "yes": "Eeyyee",
+    "no": "Lakki",
+    "na": "N/A",
+    "Submit": "Erge",
+    "Cancel": "Dhiisi",
+    "noResult": "Himaa Hin Arganne",
+    "create": "Uumu",
+    "Edit": "Gulaalu",
+    "Delete": "Haque",
+    "Deleting": "Haquaa jira...",
+    "DeletedSuccessfully": "Haqa ta'e",
+    "FailedToDelete": "Haquun hin danda'ine",
+    "ConfirmDelete": "Haquaa Mirkaneessi",
+    "DeleteConfirmationMessage": "\"{{name}}\" haquuf ni barbaadda? Hojiin kun jijjiruun hin danda'ama."
+  },
+  "collaboration": {
+    "inProgress": "Fulduraa",
+    "done": "Xumurrame",
+    "all": "Hunda",
+    "list": "Waliigala"
+  },
+  "profile": {
+    "recentActivity": "Hojiin Dhiyoo Ta'e",
+    "loading": "Pirofaayilii haaromsaa...",
+    "error": "Pirofaayilii haaromsuu hin dandeenye",
+    "tryAgain": "Irra Deebi'ii Yaali",
+    "noName": "Maqaa Hin Qabu",
+    "signOut": "Ba'i",
+    "email": "Imeelii",
+    "userType": "Gosa Fayyadamtoo",
+    "userTypes": {
+      "employee": "Hojjetaa"
+    },
+    "activity": {
+      "login": "Seensa",
+      "passwordChanged": "Jecha Darbii Sirreessame"
+    },
+    "passwordSet": "Jecha Darbii Sirreessame",
+    "status": {
+      "accepted": "Fudhatame"
+    },
+    "positionDetails": "Gadadoo Hojii",
+    "positionName": "Maqaa Hojii",
+    "positionKey": "Furmaata Hojii",
+    "isDelegate": "Ergaa Dha",
+    "employeeId": "ID Hojjetaa",
+    "permissions": "Hayyama",
+    "noPermissions": "Hayyama Hin Kenname",
+    "accountSecurity": "Tiksuu Akaawuntii",
+    "password": "Jecha Darbii",
+    "passwordSetStatus": "Jecha darbiin sirreessame",
+    "passwordNotSetStatus": "Jecha darbiin hin sirreessamin",
+    "changePassword": "Jechi Darbii Sirreessi",
+    "updateProfile": "Pirofaayilii Haala Sirreessi",
+    "profile": "pirofaayilii",
+    "englishName": "Maaloo maqaa afaan ingilizii galchi",
+    "amharicName": "Maaloo maqaa afaan Amarifa galchi",
+    "username": "Maaloo maqaa fayyadamtoo galchi",
+    "phoneNumber": "Maaloo lakkoofsa bilbilaa galchi",
+    "emailmsg": "Maaloo imeelii galchi",
+    "emailRequired": "Imeelii barbaachisaadha",
+    "usernameRequired": "Maqaa fayyadamtoo barbaachisaadha",
+    "phoneRequired": "Lakkoofsa bilbilaa barbaachisaadha",
+    "englishNameRequired": "Maqaa afaan ingilizii barbaachisaadha",
+    "amharicNameRequired": "Maqaa afaan Amarifa barbaachisaadha",
+    "invalidPhoneFormat": "Gosni lakkoofsa bilbilaa sirrii miti.",
+    "validPhoneFormat": "Maaloo lakkoofsa bilbilaa sirrii galchi fakkii +2519XXXXXXXX ykn 09XXXXXXXX",
+    "invalidEmailFormat": "Gosni imeelii sirrii miti",
+    "validEmailFormat": "Maaloo imeelii sirrii galchi",
+    "profileUpdateSuccess": "Pirofaayilii sirreessameera",
+    "profileUpdated": "Pirofaayiliin kee sirreessameera",
+    "profileUpdateFailed": "Pirofaayilii sirreessuu hin dandeenye",
+    "updating": "Sirreessaa"
+  },
+  "header": {
+    "tigrigna": "Tigrigna",
+    "affar": "Affar",
+    "somali": "Somali",
+    "oromo": "Affan Oromo",
+    "user": "Fayyadamaa",
+    "management": "Gargaarsa",
+    "notifications": "Beeksisa",
+    "english": "Ingilizii",
+    "englishShort": "ING",
+    "amharic": "Amarifa",
+    "amharicShort": "አማ",
+    "viewProfile": "Pirofaayilii Ilaalu",
+    "changePassword": "Jechi Darbii Sirreessi",
+    "signOut": "Ba'i",
+    "settings": "Sirreeffama",
+    "addTeeter": "Teeteriifi Kaasaa Dabalachiisuu",
+    "addSignature": "Kaasaa Dabalachiisuu",
+    "navigation": {
+      "dashboard": "Daashboordii",
+      "outgoing": "Baatii Oolu",
+      "incoming": "Baatii Dhufu",
+      "approval": "Eeggachuu",
+      "delegation": "Ergaa",
+      "pending": "Eeggamaa",
+      "settings": "Sirreeffama",
+      "collaborations": "Waliigala"
+    },
+    "editProfile": "Pirofaayilii Gulaalu"
+  },
+  "addRecord": {
+    "EditRecord": "Reekordii Gulaalu",
+    "Record Type": "Gosa Reekordii",
+    "Select Record Type": "Gosa Reekordii Filadhu",
+    "Initiation Type": "Gosa Eegumsa",
+    "Select Initiation Type": "Gosa Eegumsa Filadhu",
+    "Receiving Unit": "Tokkicha Fudhatuu",
+    "Select Receiving Units": "Tokkicha Fudhatuu Filadhu",
+    "Receiving Users": "Fayyadamtoota Fudhatuu",
+    "Select Receiving Users": "Fayyadamtoota Fudhatuu Filadhu",
+    "Prefix": "Durfama",
+    "Select Prefix": "Durfama Filadhu",
+    "Non Smart Receiving Unit": "Tokkicha Fudhatuu Smart Hin Taane",
+    "Enter Non Smart Receiving Organization": "Tokkicha Fudhatuu Smart Hin Taane Galchi",
+    "To Departments": "Waaraayyee Geessuu",
+    "Select Department": "Waaraayyee Filadhu",
+    "Preferred Language": "Afaan Filatamaa",
+    "Select Language": "Afaan Filadhu",
+    "Suffix": "Duurbama",
+    "Select Suffix": "Duurbama Filadhu",
+    "Subject": "Wabii",
+    "Enter Subject": "Wabii Galchi",
+    "Letter Template": "Qaama Xalayaa",
+    "Select Letter Template": "Qaama Xalayaa Filadhu",
+    "Body": "Qaama",
+    "External CC": "CC Alaa",
+    "Select External CC": "CC Alaa Filadhu",
+    "Internal CC": "CC Keessaa",
+    "Select Internal CC": "CC Keessaa Filadhu",
+    "Non Smart CC Unit": "Tokkicha CC Smart Hin Taane",
+    "Enter  Non Smart CC Organization": "Tokkicha CC Smart Hin Taane Galchi",
+    "Cancel": "Dhiisi",
+    "Add": "+ Dabalachiisuu",
+    "English": "Ingilizii",
+    "Amharic": "Amarifa",
+    "Header": "Mataa Xalayaa",
+    "Select Header": "Mataa Xalayaa Filadhu",
+    "No Header": "Mataa Hin Qabu",
+    "Footer": "Duuba Xalayaa",
+    "Select Footer": "Duuba Xalayaa Filadhu",
+    "No Footer": "Duuba Hin Qabu",
+    "Collaborators": "Waliigala",
+    "record": "Reekordii",
+    "attachment": "Dabalata",
+    "failedToCreateRecord": "Reekordii Uumuu Hin Dandeenye",
+    "recordSubmittedSuccessfully": "Reekordii Darbameera.",
+    "createRecordFirst": "Maaloo Reekordii Uumuun Dura Dabalata Galchi.",
+    "previous": "Duraan",
+    "submit": "Erge",
+    "recordNotCreatedYet": "Reekordiin Hanga Ammaatti Hin Uumamin.",
+    "submitting": "Ergaa...",
+    "selectCollaborators": "Waliigala Filadhu",
+    "Enter CC Prefix": "Durfama CC Galchi",
+    "CC Prefix": "Durfama CC",
+    "Enter CC Suffix": "Duurbama CC Galchi",
+    "CC Suffix": "Duurbama CC",
+    "Sign Status": "Haala Kaasaa",
+    "ccUsers": "Fayyadamtoota CC",
+    "selectCCUsers": "Fayyadamtoota CC Filadhu",
+    "refreshOptions": "Filannoo Haaromsi",
+    "isTeamSig": "Kaasaa Garee Waliin"
+  },
+  "userRecord": {
+    "All": "Hunda",
+    "recordCreatedAndSent": "Reekordiin uumamee ergameera",
+    "Draft": "Qophii",
+    "Submitted": "Darbame",
+    "Accepted": "Fudhatame",
+    "Approved": "Eeggachaa",
+    "Rejected": "Dhiifame",
+    "Returned": "Deebifame",
+    "Adjustment": "Tursiifama",
+    "Sent": "Ergame",
+    "Letters": "Xalayoonni",
+    "To": "Ergaa",
+    "Subject": "Wabii",
+    "Date": "Guyyaa",
+    "Search": "Barbaadi",
+    "Add Record": "Reekordii Dabalachiisuu",
+    "Error loading records.": "Reekordii Haaromsuu Keessatti Dogoggora.",
+    "Receiver Info": "Odeeffannoo Fudhatuu",
+    "No receivers": "Fudhatoonni Hin Jiru",
+    "No receiving unit": "Tokkicha Fudhatuu Hin Jiru",
+    "Status": "Haala",
+    "Actions": "Hojiiwwan",
+    "View Detail": "Gadadoo Ilaalu",
+    "Open actions menu": "Menyuu Hojiiwwan Bani",
+    "Approve": "Eeggachuu",
+    "Forward": "Darbi",
+    "Edit": "Gulaalu",
+    "Delete": "Haalu",
+    "Download": "Buufachuu",
+    "Record approved successfully!": "Reekordiin Eeggachaa Oole!",
+    "Failed to approve record.": "Reekordii Eeggachuu Hin Dandeenye.",
+    "Approve Record": "Reekordii Eeggachuu",
+    "Record is deleted successfully": "Reekordiin Haalamteera",
+    "Confirm Delete": "Haaluu Mirkaneessuu",
+    "Delete Record": "Reekordii Haaluu",
+    "Downloaded": "Buufatame",
+    "Download Record PDF": "Reekordii PDF Buufachuu",
+    "Failed to download PDF.": "PDF Buufachuu Hin Dandeenye.",
+    "Download successful!": "Buufachuu Milkaa'ee!",
+    "Confirm Forward": "Darbi Mirkaneessuu",
+    "Forward Record": "Reekordii Darbi",
+    "Failed to forward the record": "Reekordii Darbuu Hin Dandeenye",
+    "Record forwarded successfully": "Reekordiin Darbameera",
+    "Confirm Approve": "Eeggachuu Mirkaneessuu",
+    "Reference": "Lakkoofsa Ibsaa",
+    "Reject": "Dhiisuu",
+    "Filter by": "Seensa",
+    "Reference Number": "Lakkoofsa Ibsaa",
+    "Enter the subject of the letter": "Wabii xalayaa galchi",
+    "Delivered By": "Ergameen",
+    "Enter Delivered By": "Ergameen Galchi",
+    "Letter Number": "Lakkoofsa Xalayaa",
+    "Enter Letter Number": "Lakkoofsa Xalayaa Galchi",
+    "Failed to create letter": "Xalayaa Uumuu Hin Dandeenye",
+    "Letter Created successfully": "Xalayiin Uumameera",
+    "Please select file": "Maaloo faayilii filadhu",
+    "Created At": "Uumame Guyyaa",
+    "Sign Status": "Haala Kaasaa",
+    "signStatus": "Haala Kaasaa",
+    "createdAt": "Uumame Guyyaa",
+    "View": "Ilaalu",
+    "Date Received": "Guyyaa Fudhatame",
+    "Attachment": "Dabalata",
+    "ReceivingUnit": "Fudhatuu",
+    "Review your record before submission": "Erga erguudhaan dura mirkanaa keessanii ilaalaa",
+    "Back": "Deebi'i",
+    "Submit Record": "Mirkanaa Ergii",
+    "Submitting": "Erguu keessatti",
+    "Generating preview": "Mirkanaa dura dubbisuu uumuu",
+    "PDF Preview": "Mirkanaa PDF Dura Dubbisuu",
+    "Unable to generate preview": "Mirkanaa dura dubbisuu hin danda'amu",
+    "Retry": "Irra deebi'i",
+    "Record Summary": "Waa'ee Mirkanaa",
+    "No subject": "Wabii hin jiru",
+    "Record Type": "Gosa Mirkanaa",
+    "Not specified": "Kan hin murtoofne",
+    "Language": "Afaan",
+    "Initiation Type": "Gosa Eegumsaa",
+    "Preview generation failed": "Mirkanaa dura dubbisuu hin danda'amu"
+  },
+  "statusBar": {
+    "Pending": "Eeggamaa",
+    "Draft": "Qophii",
+    "draft": "Fulduraa",
+    "InProgress": "Fulduraa",
+    "In Progress": "Fulduraa",
+    "active": "Fulduraa",
+    "Reassigned": "Deebiif Kenname",
+    "re_assigned": "Deebiif Kenname",
+    "Approved": "Eeggachaa",
+    "Accepted": "Fudhatame",
+    "accepted": "Fudhatame",
+    "Dispatched": "Ergame",
+    "Adjustment": "Tursiifama",
+    "adjustment": "Tursiifama",
+    "Rejected": "Dhiifame",
+    "rejected": "Dhiifame",
+    "Submitted": "Darbame",
+    "All": "Hunda",
+    "Reject": "Dhiisuu",
+    "Accept": "Fudhachuu",
+    "Approve": "Eeggachuu",
+    "Adjust": "Tursiisuu",
+    "Sent": "Ergame",
+    "Send": "Ergaa",
+    "Team Signature": "Kaasaa Garee Eeggamaa",
+    "Team Rejected": "Gareen Dhiise",
+    "Team Approved": "Gareen Eeggate",
+    "signed": "Kaasame",
+    "activated": "Hojii irra oole",
+    "deactivated": "Hojii irraa dhaabbate",
+    "activate": "Hojii irra ooluu",
+    "deactivate": "Hojii irraa dhaabbachuu",
+    "totalAllocations": "Iddoo Kenname",
+    "assignmentStatistics": "Tiraasii Kennaa",
+    "Outgoing": "Baatii Oolu",
+    "Incoming": "Baatii Dhufu",
+    "Returned": "Deebifame",
+    "Adjusted": "Tursiifame"
+  },
+  "userIncoming": {
+    "From Date": "Guyyaa Irraa",
+    "To Date": "Guyyaa Geessuu",
+    "Letters": "Xalayoonni",
+    "Department": "Waaraayyaa",
+    "Subject": "Wabii",
+    "Date": "Guyyaa",
+    "Search": "Barbaadi",
+    "Error loading records.": "Reekordii Haaromsuu Keessatti Dogoggora.",
+    "Status": "Haala",
+    "Actions": "Hojiiwwan",
+    "View Detail": "Gadadoo Ilaalu",
+    "Open actions menu": "Menyuu Hojiiwwan Bani",
+    "Sending Department": "Waaraayyaa Ergaa",
+    "No Department": "Waaraayyaa Hin Jiru",
+    "No Subject": "Wabii Hin Qabu",
+    "Sending Organization": "Tokkichaa Ergaa",
+    "Accept": "Fudhachuu",
+    "Assign": "Kennaa",
+    "Edit": "Gulaalu",
+    "Delete": "Haalu",
+    "Download": "Buufachuu",
+    "Reject": "Dhiisuu",
+    "Cancel": "Dhiisi",
+    "Record accepted successfully": "Reekordiin Fudhatameera",
+    "Failed to accept record": "Reekordii Fudhachuu Hin Dandeenye",
+    "Confirm Acceptance": "Fudhachuu Mirkaneessuu",
+    "Are you sure you want to accept this record?": "Reekordii Kana Fudhachuu Ni Barbaadda?",
+    "Confirm": "Mirkaneessuu",
+    "Processing...": "Hojiiwwaa...",
+    "Departments": "Waaraayyoonni",
+    "Select department(s)...": "Waaraayyaa Filadhu...",
+    "Employees": "Hojjetaan",
+    "Select employee(s)...": "Hojjetaa Filadhu...",
+    "Remark": "Yaada",
+    "Failed to Assign a Record": "Reekordii Kennaa Hin Dandeenye",
+    "Assign this record to one or more departments": "Reekordii Kana Waaraayyaa Tokko Ykn Dabalatti Kennaa",
+    "Assign Record": "Reekordii Kennaa",
+    "An error occurred during assignment.": "Kennaa Keessatti Dogoggora Ta'e.",
+    "Enter your remarks...": "Yaada Keessan Galchaa...",
+    "Assigning...": "Kennaa...",
+    "Are you sure you want to reject this record?": "Reekordii Kana Dhiisuu Ni Barbaadda?",
+    "Failed to rejected record": "Reekordii Dhiisuu Hin Dandeenye",
+    "Record rejected successfully": "Reekordiin Dhiifameera",
+    "To": "Ergaa",
+    "ConvertedBy": "Jijjiirameen",
+    "ReceiverDepartment": "Waaraayyaa Fudhatuu",
+    "ReceiverEmployee": "Hojjetaa Fudhatuu",
+    "return": "Deebisi",
+    "returnQues": "Reekordii Kana Deebisuu Ni Barbaadda?",
+    "returing": "Deebisaa...",
+    "conformReturn": "Deebisuu Mirkaneessuu"
+  },
+  "ApprovalPage": {
+    "Letters": "Xalayoonni",
+    "Department": "Waaraayyaa",
+    "Subject": "Wabii",
+    "Date": "Guyyaa",
+    "Search": "Barbaadi",
+    "Error loading records.": "Reekordii Haaromsuu Keessatti Dogoggora.",
+    "Status": "Haala",
+    "Actions": "Hojiiwwan",
+    "View Detail": "Gadadoo Ilaalu",
+    "Open actions menu": "Menyuu Hojiiwwan Bani",
+    "To": "Ergaa",
+    "Receiver": "Fudhatuu",
+    "No Subject": "Wabii Hin Qabu",
+    "Record accepted successfully": "Reekordiin Fudhatameera",
+    "Confirm": "Mirkaneessuu",
+    "Remark": "Yaada",
+    "Accept Record": "Reekordii Fudhachuu",
+    "Record Rejected successfully": "Reekordiin Dhiifameera",
+    "recordAdjustedSuccessfully": "Reekordiin Tursiifameera",
+    "confirmAdjustment": "Tursiisuu Mirkaneessuu",
+    "adjustRecord": "Reekordii Tursiisuu",
+    "selectOrUploadSignature": "Maaloo Kaasaa Filadhu Ykn Galchi",
+    "selectOrUploadTeeter": "Maaloo Teeter Filadhu Ykn Galchi",
+    "recordApprovedSuccessfully": "Reekordiin Eeggachaa Oole!",
+    "failedToApproveRecord": "Reekordii Eeggachuu Hin Dandeenye.",
+    "approveRecord": "Reekordii Eeggachuu",
+    "confirmApprove": "Eeggachuu Mirkaneessuu",
+    "confirmRejection": "Dhiisuu Mirkaneessuu",
+    "rejectRecord": "Reekordii Dhiisuu",
+    "RecordType": "Gosa Reekordii",
+    "selectStamp": "Stampii Filadhu",
+    "selectedStamp": "Stampii Filatame:",
+    "signature": "Kaasaa",
+    "yourSignature": "Kaasaan Keessan:",
+    "selectedSignature": "Kaasaa Filatame:",
+    "selectSignature": "Kaasaa Filadhu",
+    "approving": "Eeggachaa..."
+  },
+  "viewDetail": {
+    "letterPreview": "Dursa Xalayaa",
+    "view": "Ilaalu",
+    "fullScreen": "Shaakala Guutuu",
+    "back": "Deebi",
+    "receivingOrganizations": "Tokkichoonni Fudhatuu",
+    "receivingUserEmployees": "Hojjetaan Fudhatuu",
+    "sendingDepartment": "Waaraayyaa Ergaa",
+    "externalCcOrganizations": "Tokkichoonni CC Alaa",
+    "internalCcDepartments": "Waaraayyoonni CC Keessaa",
+    "receivingDepartments": "Waaraayyoonni Fudhatuu",
+    "sentDate": "Guyyaa Ergame",
+    "referenceNumber": "Lakkoofsa Ibsaa",
+    "attachments": "Dabaltoonni",
+    "remarks": "Yaadannoo",
+    "loadingRemarks": "Yaadannoo Haaromsaa...",
+    "failedToLoadRemarks": "Yaadannoo Haaromsuu Hin Dandeenye.",
+    "noRemarksAvailable": "Yaadannoo Reekordii Kanaaf Hin Jiru.",
+    "action": "Hojii",
+    "comment": "Yaada:",
+    "noAttachmentsAvailable": "Dabaltonni Hin Jiru.",
+    "open": "Bani",
+    "subject": "Wabii",
+    "letterNumber": "Lakkoofsa Xalayaa",
+    "deliveredBy": "Ergameen",
+    "personalRemark": "Yaada Lammummaa",
+    "noPersonalRemarkProvided": "Yaada Lammummaa Hin Jiru",
+    "regeneratePdf": "PDF Haala Sirreessuu",
+    "regeneratingPdf": "Haala Sirreessaa...",
+    "pdfRegenerationSuccess": "PDF Haala Sirreessuun Milkaa'e",
+    "pdfRegenerationFailed": "PDF Haala Sirreessuu Hin Dandeenye",
+    "sendingBureau": "Biroo Ergaa",
+    "collaborators": "Waliigala",
+    "recordDetail": "Gadadoo Reekordii",
+    "commentorEmployee": "Hojjetaa Yaada Kennuu",
+    "commentorDepartment": "Waaraayyaa Yaada Kennuu",
+    "noComment": "Yaada Hin Qabu"
+  },
+  "PDF": {
+    "dropFilesHere": "Faayiloota Asitti Dhiisi",
+    "dragDropInstruction": "Faayiloota Asitti Dhiisi Ykn Filadhuuf Click Gochuu",
+    "youCanUpload": "Galchuu Dandeessu",
+    "removeFile": "Faayilii Haaluu",
+    "filesUpTo": "Faayiloota (Hanga ",
+    "aFileWith": "Faayilii ",
+    "file": "Faayilii",
+    "wasRejected": "Dhiifame",
+    "uploaded": "Galchitame",
+    "failedToUpload": "Galchuu Hin Dandeenye",
+    "uploading": "Galchaa...",
+    "cannotUploadMoreThan": "Hanga "
+  },
+  "convert": {
+    "recordConverted": "Reekordiin Jijjiirameera.",
+    "selectSeal": "Maaloo Seal Filadhu.",
+    "convertRecord": "Reekordii Jijjiiraa",
+    "recordType": "Gosa Reekordii:",
+    "subject": "Wabii:",
+    "convertAndDispatch": "Jijjiiraa & Ergaa",
+    "selectSealLabel": "Seal Filadhu:",
+    "loadingSeals": "Seal Haaromsaa...",
+    "selectSealPlaceholder": "-- Seal Filadhu --",
+    "selectedSealPreview": "Seal Filatame Dursa:"
+  },
+  "delegation": "Gargaarsa Ergaa",
+  "signatureUpload": {
+    "signature": "Kaasaa",
+    "teeter": "Teeter",
+    "uploadSignature": "Kaasaa Galchuu",
+    "uploadTeeter": "Teeter Galchuu",
+    "uploadSignatureNote": "Kaasaa Galchuu (PNG Qofa)",
+    "uploadTeeterNote": "Teeter Galchuu (PNG Qofa)",
+    "uploadedSignature": "Kaasaa Galchitame:",
+    "uploadedTeeter": "Teeter Galchitame:",
+    "enterFileName": "Maqaa Faayilaa Galchi (Extension Hin Qabne)",
+    "preview": "Dursa:",
+    "upload": "Galchuu",
+    "uploading": "Galchaa...",
+    "remove": "Haaluu",
+    "removing": "Haalaa...",
+    "removedSuccess": "Haalamteera.",
+    "removeTeeterFailed": "Teeter Haaluu Hin Dandeenye",
+    "removeFailed": "Haaluu Hin Dandeenye.",
+    "selectPngFirst": "Maaloo Faayilaa PNG Filadhu.",
+    "onlyPngAllowed": "Faayiloota PNG Qofa.",
+    "signatureExists": "Kaasaan Jira. Haaluun Dura Galchi Haaraa.",
+    "uploadSuccess": "Galchuu Milkaa'e!",
+    "uploadError": "Dogoggora Galchuu:",
+    "uploadFailed": "Galchuu Hin Dandeenye.",
+    "openSignatureForm": "Open Signature Drawer"
+  },
+  "assignment": {
+    "assignedBy": "Kennameen",
+    "assignedTo": "Ergaan Kenname",
+    "assignedOn": "Guyyaa Kenname:",
+    "comment": "Yaada:",
+    "assignmentFlow": "Kutaa Kennaa",
+    "noAssignments": "Reekordii Kanaaf Kennaa Hin Taane.",
+    "responded": "Deebii Kenname"
+  },
+  "auth": {
+    "welcomeBack": "Baga Nagaan Dhufte",
+    "enterCredentials": "Maaloo Ibsaa Keessan Galchaa Itti Fufuu",
+    "email": "Imeelii",
+    "phoneNumber": "Lakkoofsa Bilbilaa",
+    "username": "Maqaa Fayyadamtoo",
+    "password": "Jecha Darbii",
+    "rememberMe": "Na Yaadadhu",
+    "forgotPassword": "Jecha Darbii Irgadhee?",
+    "loggingIn": "Seensaa...",
+    "login": "Seensa",
+    "welcomeHeadline": "Baga Smart Office Keessan Geessan",
+    "paperlessOffice": "Office Bilbila Hin Qabne",
+    "welcomeSubtext": "Seensa Hojii Keessan Gargaaruufi Dhiibbaa Dhabamsiisuu.",
+    "emailAddress": "Imeelii",
+    "err": "Lakkoofsa Bilbilaa Itoophiyaa Sirrii Miti. +251 Irraa Eegaluu Qaba.",
+    "invalidEmail": "Please enter a valid email address"
+  },
+  "msg": {
+    "sent": "Xalayiin Ergameera",
+    "failedToCreate": "Reekordii Uumuu Hin Dandeenye",
+    "failedToGetUrl": "URL Galchuu Hin Dandeenye",
+    "registrationSuccess": "Galmaa'ee. SMS Jecha Darbii Sirreessuu Ergameera.",
+    "errorOccurred": "Dogoggora Ta'e.",
+    "pdfRegenerated": "PDF Haala Sirreessuun Milkaa'e.",
+    "approveFailed": "Reekordii Eeggachuu Hin Dandeenye.",
+    "approveSuccess": "Reekordiin Eeggachaa Oole",
+    "selectPrompt": "Maaloo Stampii Filadhu.",
+    "extendedSuccess": "Ergaa Dheeressuun Milkaa'e.",
+    "letter": "Xalayaa",
+    "approvedSuccess": "Reekordiin Eeggachaa Oole!",
+    "submittedSuccess": "Reekordiin Darbameera!",
+    "markedForAdjustment": "Tursiisuu Ibsame",
+    "sentToOfficer": "Hojjetaa Reekordii Geessee",
+    "errorSendingToOfficer": "Hojjetaa Reekordii Geessuu Keessatti Dogoggora",
+    "success": "Ergaa Milkaa'e.",
+    "failed": "Ergaa Hin Dandeenye.",
+    "deletedSuccess": "Ergaa Haalamteera.",
+    "deleteFailed": "Ergaa Haaluu Hin Dandeenye.",
+    "failedCreateOrGetUrl": "Reekordii Uumuu Ykn URL Argachuu Hin Dandeenye.",
+    "sentAndUploadedSuccess": "Xalayiin Ergamee Faayiliinis Galchitameera.",
+    "failedSendOrUpload": "Xalayaa Ergaa Ykn Faayilaa Galchuu Hin Dandeenye.",
+    "successassign": "Reekordiin Kennameera.",
+    "submittedWithAttachments": "Reekordii Fi Dabaltoonni Darbaman.",
+    "createFailed": "Reekordii Uumuu Hin Dandeenye.",
+    "refreshedSuccess": "Haaromsi Milkaa'e.",
+    "refreshFailed": "Haaromsuu Hin Dandeenye.",
+    "redirecting": "Deebisaa...",
+    "loginSuccess": "Seensa Milkaa'e.",
+    "receivingDepartmentRequired": "Yoo xalayaa giddu galeessa ta’e, waareen fudhatuu tokko ykn dabalatti filadhu",
+    "receivingUnitRequired": "Tokkicha fudhatuu tokko ykn dabalatti filadhu",
+    "recordTypeRequired": "Gosa reekordii barbaachisaadha",
+    "initiationTypeRequired": "Gosa eegumsa barbaachisaadha",
+    "subjectRequired": "Wabii barbaachisaadha",
+    "preferredLanguageRequired": "Afaan filatamaa barbaachisaadha",
+    "bodyRequired": "Qaama barbaachisaadha",
+    "sincerelyTextRequired": "Ibsa dhiheenya barbaachisaadha",
+    "headerRequired": "Mataa barbaachisaadha",
+    "footerRequired": "Duuba barbaachisaadha",
+    "accessDenied": "Dhaabbannaa Argachuu",
+    "accessDeniedmsg": "Ergaa Hojii Irra Ooltu Siif Jiraachuun Bifa Kana Hin Seenuu Dandeessu. Itti Fufuu Ergaa Haaluun Dura.",
+    "accessDeniedmsg2": "Ergaa Hojii Irra Ooltu Siif Jiraachuun Bifa Kana Hin Seenuu Dandeessu. Hojjetaa Biroon Ergaa Siif Kennamee Jiraachuun Ergaa Kennaa Hin Dandeessu",
+    "accessDeniedmsg3": "Tokkichaan kun hin dandeessisu ykn hojii hin kennameefuu modilii gargaarsa reekordii argachuu hin dandeessu"
+  },
+  "landingPage": {
+    "smartOffice": "EDR Smart Office",
+    "signIn": "Seensa",
+    "signUp": "Galmaa'uu",
+    "overview": "Ibsa Guutuu",
+    "features": "Qabiyyee",
+    "workflow": "Hojiiwwan",
+    "manual": "Qajeelcha",
+    "digitalTransformation": "Jijjiiraa Digitalii Hojiiwwan Mootummaa Haaraa.",
+    "facebook": "Facebook",
+    "twitter": "Twitter",
+    "telegram": "Telegram",
+    "tiktok": "TikTok",
+    "contactUs": "Nu Qunnamuu",
+    "quickLinks": "Linkkii Dafaa",
+    "copyright": "Tria Plc - Copyright ©",
+    "rightsReserved": "Mirga Hunda Triaan Bira - Triaan Bira",
+    "address": "Lingo Tower Infront of Sheger House, Bole, Addis Ababa, Ethiopia",
+    "platformSystem": "Sisteemii Platform",
+    "initiativeDescription": "Jijjiiraa Digitalii Addis Ababa City Administration Hojiiwwan Mootummaa Digitalii Haaraa.",
+    "getStarted": "Eegaluu",
+    "learnMore": "Dabalataan Baradhu",
+    "sops": "SOPS",
+    "smartOfficePlatformSystem": "Smart Office Platform System",
+    "revolutionDescription": "Hojiiwwan Mootummaa Jijjiiraa Digitalii Tajaajila Hojiiwwan Yeroo Dhugaa.",
+    "liveDemo": "Live Demo Argama",
+    "outgoingRecords": "Reekordii Baatii Oolu",
+    "outgoingRecordsDesc": "Reekordii Giddu Galeessaa Ykn Alaa Uumuu Fi Darbuu.",
+    "incomingRecords": "Reekordii Baatii Dhufu",
+    "incomingRecordsDesc": "Reekordii Fudhatuu, Deebii Kennuu, Waaraayyootatti Kennaa.",
+    "approvalWorkflows": "Hojiiwwan Eeggachuu",
+    "approvalWorkflowsDesc": "Xalayaa Digitalii Fi Kaasaa Eeggachuu Hojiiwwan Waaraayyaa.",
+    "interactiveDashboard": "Daashboordii Walqunnamtii",
+    "interactiveDashboardDesc": "Reekordii Dhufu Fi Oolu Yeroo Dhugaa, Summarii Waaraayyaa.",
+    "organizedFolders": "Folders Qindoominaan",
+    "organizedFoldersDesc": "Reekordii Seensa Fi Filannoo.",
+    "securityAccessControl": "Tiksuu Fi Dhaabbannaa",
+    "securityAccessControlDesc": "Hojiiwwan Mirga Fi Ibsa Hojiiwwan.",
+    "powerfulFeaturesTitle": "Qabiyyee Cimaa",
+    "powerfulFeaturesSubtitle": "Hojiiwwan Reekordii Gargaaruu",
+    "powerfulFeaturesDesc": "Qabiyyee Keenya Reekordii Gargaaru.",
+    "feature1": "Yeroo Eeggachuu Dafaa",
+    "feature2": "Reekordii Qindoominaan",
+    "feature3": "Ibsa Hojiiwwan",
+    "documentWorkflow": "Hojiiwwan Dokumantii",
+    "recordCreation": "Uumuu Reekordii",
+    "recordCreationDesc": "Fayyadamtoon Reekordii Haaraa Uumu",
+    "teamLeaderReview": "Ijoo Hojii Garee",
+    "teamLeaderReviewDesc": "Eeggachuu Duraa",
+    "directorApproval": "Eeggachuu Dirrektoraa",
+    "directorApprovalDesc": "Eeggachuu Waaraayyaa",
+    "deputyHeadReview": "Eeggachuu Deputy",
+    "deputyHeadReviewDesc": "Eeggachuu Xumuraa",
+    "recordOfficerProcessing": "Hojjetaa Reekordii",
+    "recordOfficerProcessingDesc": "Galmee Fi Ergaa",
+    "streamlinedProcess": "Hojiiwwan Gargaaruu",
+    "recordManagementApprovalWorkflows": "Hojiiwwan Eeggachuu Gargaarsa Reekordii",
+    "smartOfficeDescription": "Smart Office Hojiiwwan Digitalii Gargaaruu.",
+    "step": "DANBAA",
+    "requestChanges": "Jijjiiraa Gaafachuu",
+    "workflowAutomationBenefits": "Baraakaa Hojiiwwan",
+    "workflowAutomationDesc": "Hojiiwwan Keenya Yeroo Xiqqeessuu.",
+    "fasterApprovals": "Eeggachuu Dafaa",
+    "reduceDelays": "Yeroo Dhiisuu",
+    "auditTrail": "Ibsa Hojiiwwan",
+    "completeRecord": "Reekordii Guutuu",
+    "advancedFeatures": "Qabiyyee Guddinaa",
+    "slaMonitoring": "Ibsa SLA",
+    "slaMonitoringDesc": "Ibsa Yeroo Tajaajilaa.",
+    "conditionalRouting": "Filannoo Filannoo",
+    "conditionalRoutingDesc": "Filannoo Reekordii.",
+    "temporaryApprovalDelegation": "Ergaa Yeroo Xumuraa."
+  },
+  "login": "Sisteematti Seensa",
+  "step1": "1. Headaa keessatti",
+  "headerBtn": "battuu ni tuqi",
+  "step2": "2. Maqaa fayyadamtoo fi jecha darbii administiraatorii keessan kennu galchi",
+  "step3": "3. Sisteematti argachuuf",
+  "accessBtn": "battuu ni tuqi",
+  "note": "Yaadannoo",
+  "forgotIntro": "Yoo jecha darbii irgadde, administiraatorii sisteemaa keessanitti quunnamaa jecha darbii haaraa galchisuuf.",
+  "dashboardTitle": "Daashboordii Waliigala",
+  "dashboardDesc": "Daashboordiin hojiiwwan reekordii keessanii waliigalaa agarsiisa:",
+  "recordsCreated": "Reekordii Uumame",
+  "recordsTotal": "Reekordii eegumsa keessanii",
+  "recordsReceived": "Reekordii Fudhatame:",
+  "incomingDocs": "Dokumantoota fageenyaa irraa dhufan",
+  "breakdown": "Qooda Keessaa/Fageenyaa:",
+  "visuals": "Shaartiiwwan gosa dokumantootaa agarsiisan",
+  "approvalStatus": "Haala Eeggachuu",
+  "approvalTypes": "Reekordii eeggamaa, eeggachaa ykn dhiifame",
+  "quickActions": "Hojiiwwan Dafaa",
+  "createOrCheck": "Reekordii haaraa uumuu ykn eeggachaa eeggamaa daashboordii irraa tuqaa",
+  "recentActivity": "Hojii Dhiyoo Ta'e",
+  "trackUpdates": "Jijjiirama dokumantoota keessanii hordofaa",
+  "manageOut": "Reekordii Baatii Oolu Gargaaruu",
+  "createNew": "Reekordii Haaraa Uumuu",
+  "goToTab": "Tab",
+  "clickBtn": "battuu ni tuqi",
+  "fillFields": "Bakka barbaachisaa guutuu (gosaa reekordii, fudhatuu, wabii, fi kkf)",
+  "attach": "Dokumantii gargaarsaa yoo barbaadde dabalachiisi",
+  "saveOrSubmit": "Qophii akka qophaa'uu ykn eeggachuuf dhiyeessi",
+  "trackStatus": "Haala Reekordii Hordofuu",
+  "notForwarded": "Odeeffannoon kun darbamuu hin dhiisne. Odeeffannoon kun gulaalamuu fi haalamuu danda'a",
+  "awaiting": "Odeeffannoon kun fudhachuu ykn eeggachuu eeggamaa jira",
+  "accepted": "Odeeffannoon kun fudhatamee eeggachuu eeggamaa jira",
+  "approvedSent": "Odeeffannoon kun eeggachaa oolee hojjetaa reekordii geessee akka darbamu ta'e",
+  "returned": "Odeeffannoon kun tursiisuu ykn odeeffannoo dabalataaf deebifame. Yaada ilaalaa",
+  "rejected": "Odeeffannoon kun dhiifame",
+  "sent": "Odeeffannoon kun fudhatootatti geessame",
+  "returnedByOfficer": "Odeeffannoon kun Hojjetaa Reekordii irraa deebifame",
+  "monitor": "Reekordii keessanii sadarkaa eeggachuu hunda keessatti hordofaa",
+  "manageIncoming": "Reekordii Baatii Dhufu Gargaaruu",
+  "incomingTypes": "Gosa Reekordii Dhufuu",
+  "fromOthers": "Tokkichoota biroo irraa",
+  "withinOrg": "Tokkichaa keessani keessaa",
+  "copied": "Odeeffannoo keessanif kan dabarfame",
+  "processIncoming": "Reekordii Dhufu Gargaaruu",
+  "readDoc": "Dokumantii guutuu bani fi dubbisi",
+  "acknowledge": "Fudhachuu dokumantii mirkaneessi",
+  "forward": "Yoo barbaadde garee hojjetaa biraatti darbi",
+  "archive": "Kuusaa",
+  "fileRef": "Yaadannoo itti aanuuf kuusaa",
+  "apprvalworkflow": "Hojii Eeggachuu",
+  "process": "Hojii Eeggachuu",
+  "internalFlow": "Hojii Reekordii Keessaa:",
+  "creator": "Uumaa",
+  "leader": "Ijoo Garee",
+  "director": "Dirrektoraa",
+  "officer": "Hojjetaa Reekordii",
+  "externalFlow": "Hojii Reekordii Alaa:",
+  "actions": "Hojiiwwan Eeggachuu",
+  "delegateInfo": "Yoo argamuu dhabde, mirga eeggachuu keessan hojjetaa garee biraatti erguu dandeessu:",
+  "delegateNav": "Tab",
+  "selectColleague": "Hojjetaa qindoomina tokkichaa keessanii filadhu",
+  "setDates": "Guyyaa eegaluu fi xumuraa ergaa sirreessi",
+  "setPerms": "Mirga erguu barbaaddu ibsi",
+  "saveDelegate": "Sirreeffama ergaa qabachiisi",
+  "autoExpire": "Ergaan guyyaa xumuraa sirreessite ofii ofii xumurama.",
+  "collab": "Bakka Hojii Waliigalaa",
+  "collabInfo": "Tabni waliigalaa reekordii hojjetaa hedduu irraa gaafii barbaadu walitti qaba:",
+  "viewDocs": "Dokumantoota waliigalaa bakka tokkotti ilaalu",
+  "addComments": "Yaada ykn ibsa dabalachiisi",
+  "approve": "Kaasaa digitalii waliin eeggachuu yoo walii galu",
+  "trackChanges": "Jijjiirama fi seenaa jijjiirama hordofaa",
+  "realTime": "Jijjiirama Yeroo Dhugaa",
+  "liveChanges": "Jijjiirama hojjetaa biraa yeroo itti ta'u argadhu",
+  "notifications": "Sisteemii Beeksisaa",
+  "alerts": "Beeksisa argadhu yoo hojjetaan biraan dokumantii keessatti hojjatan",
+  "signatureMgmt": "Gargaarsa Teeter & Kaasaa",
+  "leadersOnly": "Ijoonni garee fi ol kaasaa digitalii fi teeter isaanii gargaaru:",
+  "signatureTitle": "Teeter & Kaasaa",
+  "uploadTeeter": "Suuraa teeterii ofiisaa galchi",
+  "uploadSignature": "Kaasaa digitalii uumuu ykn galchuu",
+  "defaultSignature": "Eeggachuu hundaaf kan default ta'e taasisi",
+  "updateDesignation": "Yeroo hundaa sirreessituu ofiisaa haala sirreessituu",
+  "security": "Beeksisa Tiksuu:",
+  "encrypted": "Teeter fi kaasaan keessan tiksuu fi eeggachuu ofiisaa qofaaf kan fayyadaman.",
+  "recordModule": "Moodeelii Gargaarsa Reekordii",
+  "guide": "Qajeelfama guutuu fayyadamaa Sisteemii Smart Office Platform",
+  "back": "Daashboordii Deebi'uu",
+  "moduleGuide": "Qajeelfama Moodeelii",
+  "previous": "Duraanii",
+  "next": "Itaanaa",
+  "addTeeterAndSignature": "Teeter digitalii fi kaasaa dabalachiisuu",
+  "returnWithComments": "Yaada waliin deebisi",
+  "requestModifications": "Jijjiirama gaafadhu",
+  "screenshotOf": "Suuraa kaansaa",
+  "fasterApproval": "Eeggachuu Dafaa",
+  "auditReady": "Audituuf Qophaa'e",
+  "organizedRecords": "Reekordii Qindoominaan",
+  "tab": "Tab",
+  "click": "Tuqi",
+  "button": "Battuu",
+  "organization": {
+    "organizations": "Tokkichoota",
+    "newOrganization": "Tokkichaa Haaraa",
+    "organizationName": "Maqaa Tokkichaa",
+    "createdOn": "Uumame Guyyaa",
+    "numberOfUsers": "Lakkoofsa Fayyadamtootaa",
+    "assignedAdmin": "Administiraatorii Kenname",
+    "isGovernmentOrganization": "Tokkichaa Mootummaa Dha",
+    "createNew": "Uumuu Haaraa",
+    "edit": "Gulaaluu",
+    "enterDetails": "Odeeffannoo tokkichaa haaraa galchi. Bakka asterisk (*) qabu hundi barbaachisaadha.",
+    "nameAmharic": "Maqaa (Amarifa)",
+    "nameEnglish": "Maqaa (Ingilizii)",
+    "key": "Furmaata",
+    "organizationType": "Gosa Tokkichaa",
+    "loadingOrganizationTypes": "Gosa tokkichootaa haaromsaa...",
+    "errorLoadingOrganizationTypes": "Dogoggora gosa tokkichootaa haaromsuu",
+    "noOrganizationTypesAvailable": "Gosa tokkichootaa hin jiru",
+    "parentOrganization": "Tokkichaa Waayila (filannoo)",
+    "loading": "Haaromsaa...",
+    "selectOrganization": "Tokkichaa filadhu",
+    "noOrganization": "Tokkichaa hin jiru",
+    "isOrganizationPublic": "Tokkichaan Dhaabbataa Dha",
+    "selectOrganizationType": "Gosa tokkichaa filadhu",
+    "deleteOrganization": "Tokkichaa Haaluu",
+    "confirmDelete": "Tokkichaa haaluu ni barbaadda?",
+    "cannotUndo": "Hojii kana deebisuun hin danda'amuu.",
+    "deleting": "Haalaa...",
+    "delete": "Haaluu",
+    "viewOrganization": "Tokkichaa Ilaaluu",
+    "editOrganization": "Tokkichaa Gulaaluu",
+    "englishNameRequired": "Maqaa ingilizii barbaachisaadha",
+    "amharicNameRequired": "Maqaa Amarifa barbaachisaadha",
+    "invalidEmail": "Imeelii sirrii miti",
+    "usernameMinLength": "Maqaa fayyadamtoo sadarkaa 3 qabaachuu qaba",
+    "organizationRequired": "Tokkichaa barbaachisaadha",
+    "invalidPhoneNumber": "Lakkoofsa bilbilaa Itoophiyaa sirrii ta'uu qaba",
+    "registerAdminTitle": "Administiraatorii Tokkichaa Galmaa'uu",
+    "registerAdminDescription": "Bakka barbaachisaa guuti galchuu",
+    "enterEnglishName": "Maqaa ingilizii galchi",
+    "enterAmharicName": "Maqaa Amarifa galchi",
+    "email": "Imeelii",
+    "emailExample": "imeelii@faannoo.com",
+    "username": "Maqaa Fayyadamtoo",
+    "enterUsername": "Maqaa fayyadamtoo galchi",
+    "phoneNumber": "Lakkoofsa Bilbilaa",
+    "phoneNumberExample": "fa. 0912345678 ykn +251912345678",
+    "organization": "Tokkichaa",
+    "registering": "Galmaa'aa...",
+    "registerAdmin": "Administiraatorii Galmaa'uu",
+    "dashboard": "Daashboordii",
+    "organizationAdmins": "Administiraatoroota Tokkichaa",
+    "externalUsers": "Fayyadamtoota Alaa",
+    "userManagement": "Gargaarsa Fayyadamtootaa",
+    "userApproval": "Fayyadamtoota Eeggamaa",
+    "content": "Qabiyyee",
+    "bulkUpload": "Galchuu Baay'ee",
+    "positionTypes": "Gosa Hojii",
+    "activityLog": "Seenaa Hojii",
+    "setting": "Sirreeffama",
+    "loadingAdmins": "Administiraatoroota haaromsaa...",
+    "errorLoadingAdmins": "Dogoggora odeeffannoo administiraatorii haaromsuu",
+    "retry": "Irra Deebi'ii Yaali",
+    "assignAdmin": "Administiraatorii Kennaa",
+    "addAdmin": "Administiraatorii Dabalachiisuu",
+    "adminAssignedSuccess": "Administiraatoriin kennameera",
+    "userAssignedSuccess": "Fayyadamtoon kennameera",
+    "userAssignFailed": "Fayyadamtoon kennamee hin dandeenye",
+    "assignAdminToOrganization": "Administiraatorii Tokkichaa Kennaa",
+    "assignAdminInstructions": "Tokkichaa fi fayyadamtoo filadhu akka administiraatorii taasifachuuf.",
+    "users": "Fayyadamtoota",
+    "searchUsers": "Fayyadamtoota barbaadi...",
+    "noUsersFound": "Fayyadamtoota hin argamne",
+    "assigning": "Kennaa...",
+    "assignUser": "Fayyadamtoo Kennaa",
+    "pendingExternalUsers": "Fayyadamtoota Alaa Eeggamaa",
+    "activateUserPrompt": "Fayyadamtoo kana hojii irra ooluu?",
+    "activateUserDescription": "Kun fayyadamtoota platformii argachuuf danda'a",
+    "activating": "Hojii irra oolaa...",
+    "yesActivate": "Eeyyee, hojii irra ooli",
+    "statistics": "Tiraasii",
+    "totalOrganizations": "Iddoo Tokkichootaa",
+    "recentOrganizations": "Tokkichoota Dhiyoo Ta'e",
+    "viewMore": "Dabalataan ilaalu →",
+    "recentActivities": "Hojiiwwan Dhiyoo Ta'e",
+    "moreActivities": "Hojiiwwan dabalataan →",
+    "noRecentActivities": "Hojiiwwan dhiyoo ta'e hin argamne"
+  },
+  "userIncomingretun": {
+    "View Detail": "Gadadoo Ilaaluu",
+    "Open actions menu": "Menyuu Hojiiwwan Bani",
+    "Actions": "Hojiiwwan",
+    "convertRecord": "Reekordii Jijjiiraa",
+    "return": "Deebisi",
+    "returning": "Deebisaa...",
+    "returing": "Deebisaa...",
+    "conformReturn": "Deebisuu Mirkaneessuu",
+    "Please provide a reason for returning this record.": "Maaloo sababa reekordii kana deebisuuf galchi.",
+    "ReturnComment": "Yaada Deebisuu",
+    "EnterReturnReason": "Sababa deebisuuf galchi",
+    "CommentRequired": "Yaada barbaachisaadha",
+    "RecordReturnedSuccessfully": "Reekordiin deebifameera",
+    "FailedToReturnRecord": "Reekordii deebisuu hin dandeenye"
+  },
+  "okrDashboard": {
+    "brandEyebrow": "Xiinxala Kaayyoo",
+    "title": "Daashboordii Raawwii OKR",
+    "description": "Ilaalcha waliigalaa raawwii olaanaa, sochii kutaa fi xiinxala OKR dhufuuf qophaa'e.",
+    "planYear": "Waggaa Karooraa",
+    "notSelected": "Hin filatamne",
+    "topPerformerEmployee": "Hojjetaa Raawwii Olaanaa",
+    "topPerformerDepartment": "Kutaa Raawwii Olaanaa",
+    "employeePlaceholderName": "Odeeffannoo API eegaa jira",
+    "departmentPlaceholderName": "Odeeffannoo API eegaa jira",
+    "employeeHelper": "API daashboordii yeroo walitti hidhamu hojjetaan dursaa asitti ni mul'ata.",
+    "departmentHelper": "API daashboordii yeroo walitti hidhamu kutaan raawwii olaanaa asitti ni mul'ata.",
+    "employeeScore": "Qabxii hojjetaa",
+    "departmentScore": "Qabxii kutaa",
+    "placeholderOneTitle": "Mallattoo Tarsiimoo",
+    "placeholderOneHelper": "Hubannoo OKR itti aanu kan API xiinxalaa irraa dhufuuf qophaa'e.",
+    "placeholderTwoTitle": "Fayyaa Raawwii",
+    "placeholderTwoHelper": "Hubannoo raawwii, balaa yookaan xumuraaf qophaa'e.",
+    "comingSoon": "Dhiyootti",
+    "waitingForApi": "API eegaa jira",
+    "analyticsTitle": "Xiinxala OKR",
+    "analyticsDescription": "Mul'ata daashboordii ilaaluuf daangaa guyyaa fi gosa chaartii filadhu.",
+    "dateRange": "Daangaa Guyyaa",
+    "chartType": "Gosa Chaartii",
+    "thisMonth": "Ji'a Kana",
+    "thisQuarter": "Kurmaana Kana",
+    "thisYear": "Waggaa Kana",
+    "customRange": "Daangaa Addaa",
+    "barChart": "Chaartii Ulee",
+    "lineChart": "Chaartii Sararaa",
+    "areaChart": "Chaartii Bal'inaa",
+    "chartTitle": "Adeemsa Raawwii",
+    "chartSubtitle": "Hamma deebiin API qophaa'utti odeeffannoon fakkeenyaa ni mul'ata.",
+    "sampleData": "Odeeffannoo Fakkeenyaa",
+    "achievement": "Milkaa'ina",
+    "target": "Galma"
+  }
+}
diff --git a/apps/edr-freight-web/backoffice/src/locales/tg/translation.json b/apps/edr-freight-web/backoffice/src/locales/tg/translation.json
new file mode 100644
index 000000000..1dce46884
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/locales/tg/translation.json
@@ -0,0 +1,936 @@
+{
+  "nav": {
+    "dashboard": "ዳሽቦርድ",
+    "outgoing": "ወጪ መዝገቦች",
+    "incoming": "ገቢ",
+    "external": "ዉጫዊ",
+    "internal": "ዉስጣዊ",
+    "cc": "ግልባጭ",
+    "approval": "ማፅደቅ",
+    "pending": "በመጠባበቅ ላይ",
+    "Record Management": "የመዝገብ አስተዳደር"
+  },
+  "initiationType": {
+    "self": " በራስ",
+    "team": "በቡድን"
+  },
+  "dashboard": {
+    "totalOutgoing": "ጠቅላላ ውጪ",
+    "totalIncoming": "ጠቅላላ ውስጥ",
+    "ccRecords": "ግልባጭ መዝገቦች",
+    "totalApproval": "ጠቅላላ ማረጋገጫ",
+    "lastUpdated": "መጨረሻ ዘመን አሻሽል",
+    "refresh": "አዘምን",
+    "refreshing": "እየተአዘምነ...",
+    "never": "በየትኛውም ጊዜ አልተዘምነም",
+    "approvalStats": "የማረጋገጫ ስታቲስቲቅሬታ ",
+    "externalIncoming": "ውጪ የሚገባ",
+    "internalIncoming": "ውስጣዊ የሚገባ",
+    "incomingStats": "የሚገባ ስታቲስቲቅሬታ ",
+    "outgoingStats": "የሚወጣ ስታቲስቲቅሬታ ",
+    "externalIncomingRecords": "ውጫዊ የሚገባ መዝገቦች",
+    "internalIncomingRecords": "ውስጣዊ የሚገባ መዝገቦች",
+    "status": {
+      "inProgress": "በሂደት ላይ",
+      "accepted": "ተቀባ",
+      "reassigned": "ዳግም ተመደበ",
+      "draft": "ጥቅል",
+      "forward": "ቀጥታ ላክ",
+      "approved": "ተፈቅዷል",
+      "rejected": "ተቋርጧል",
+      "adjusted": "ተስተካክሏል",
+      "sent": "ተልኳል",
+      "approve": "አረጋግጥ"
+    },
+    "Percentage": "መቶኛ",
+    "Count": "ብዛት",
+    "Status": "ሁኔታ",
+    "Total": "ጠቅላላ",
+    "pieChart": "ፒይ ቻርት",
+    "barChart": "ባር ቻርት",
+    "table": "ገጽታ",
+    "monthlyIncoming": "ወርሃዊ የገቡ ውሎች",
+    "monthlyOutgoing": "ወርሃዊ የወጡ ውሎች",
+    "totalInVsOut": "ጠቅላላ የግባ እና የመውጫ ውሎች",
+    "monthlyInVsOut": "ወርሃዊ የግባ እና የመውጫ ውሎች",
+    "weeklyInVsOut": "ሳምንታዊ የግባ እና የመውጫ ውሎች",
+    "dailyInVsOut": "ዕለታዊ የግባ እና የመውጫ ውሎች",
+    "exportPdf": "PDF አውርድ",
+    "exporting": "በማውረድ ላይ...",
+    "print": "አትም"
+  },
+  "welcome": "እንኳን ደህና መጣህ",
+  "change_password": "የይለፍ ቃል ለውጥ",
+  "sign_out": "ውጣ",
+  "view_profile": "መገለጫን እይ",
+  "user": "ተጠቃሚ",
+  "common": {
+    "back": "ተመለስ",
+    "yes": "አዎ",
+    "no": "አይ",
+    "na": "የለም",
+    "Cancel": "ሰርዝ",
+    "Submit": "መዝግብ",
+    "noResult": "ምንም ውጤት የለም",
+    "create": "ፍጠር",
+    "Edit": "አስተካክል",
+    "Delete": "ማጥፋት",
+    "Deleting": "በማጥፋት ላይ...",
+    "DeletedSuccessfully": "በተሳካ ሁኔታ ተሰርዟል",
+    "FailedToDelete": "ማጥፋት ያልተሳካ",
+    "ConfirmDelete": "ማጥፋትን ያረጋግጡ",
+    "DeleteConfirmationMessage": "\"{{name}}\" መሰረዝ እንደሚፈልጉ እርግጠኛ ነን? ይህ ድርጊት መቀየር አይቻልም።"
+  },
+  "profile": {
+    "loading": "መገለጫ በመጫን ላይ...",
+    "error": "መገለጫ መጫን አልተቻለም",
+    "tryAgain": "እንደገና ይሞክሩ",
+    "noName": "ስም የለም",
+    "signOut": "ይውጡ",
+    "email": "ኢሜይል",
+    "userType": "የተጠቃሚ አይነት",
+    "userTypes": {
+      "employee": "ሰራተኛ"
+    },
+    "passwordSet": "የይለፍ ቃል ተመስርቷል",
+    "status": {
+      "accepted": "ተቀባይነት አግኝቷል"
+    },
+    "positionDetails": "የስራ መደብ ዝርዝሮች",
+    "positionName": "የስራ መደብ ስም",
+    "positionKey": "የስራ መደብ ቁልፍ",
+    "isDelegate": "ተወካይ ነው",
+    "employeeId": "የሰራተኛ መታወቂያ",
+    "permissions": "ፈቃዶች",
+    "noPermissions": "ፈቃዶች አልተመደቡም",
+    "accountSecurity": "የመለያ ደህንነት",
+    "password": "የይለፍ ቃል",
+    "passwordSetStatus": "የይለፍ ቃል ተመስርቷል",
+    "passwordNotSetStatus": "የይለፍ ቃል አልተመሰረተም",
+    "changePassword": "የይለፍ ቃል ይቀይሩ",
+    "updateProfile": "መገለጫ አዘምን",
+    "profile": "መገለጫ",
+    "username": "እባክዎ የተጠቃሚ ስም ያስገቡ",
+    "phoneNumber": "እባክዎ የስልክ ቁጥር ያስገቡ",
+    "emailmsg": "እባክዎ ኢሜል ያስገቡ",
+    "englishName": "እባክዎ ስሙን በእንግሊዝኛ ያስገቡ",
+    "amharicName": "እባክዎ ስሙን በአማርኛ ያስገቡ",
+    "emailRequired": "ኢሜል መሞላት አለበት",
+    "usernameRequired": "የተጠቃሚ ስም መሞላት አለበት",
+    "phoneRequired": "የስልክ ቁጥር መሞላት አለበት",
+    "englishNameRequired": "ስም በእንግሊዝኛ መሞላት አለበት",
+    "amharicNameRequired": "ስም በአማርኛ መሞላት አለበት",
+    "invalidPhoneFormat": "የስልክ ቁጥር ቅርጸ ቃል ልክ አይደለም።",
+    "validPhoneFormat": "እባክዎ ትክክለኛ የስልክ ቁጥር በ +2519XXXXXXXX ወይም 09XXXXXXXX ቅርጸ ቃል ያስገቡ።",
+    "invalidEmailFormat": "የኢሜል ቅርጸ ቃል ልክ አይደለም",
+    "validEmailFormat": "እባክዎ ትክክለኛ የኢሜል አድራሻ ያስገቡ",
+    "profileUpdateSuccess": "መገለጫዎ በትክክል ተቀይሯል",
+    "profileUpdated": "መገለጫዎ ተቀይሯል",
+    "profileUpdateFailed": "መገለጫ ማሻሻል አልተሳካም",
+    "updating": "በማሻሻል ላይ..."
+  },
+  "header": {
+    "tigrigna": "Tigrigna",
+    "affar": "Affar",
+    "somali": "Somali",
+    "oromo": "ኦሮምኛ",
+    "user": "ተጠቃሚ",
+    "management": "አስተዳደር",
+    "notifications": "ማስታወቂያዎች",
+    "english": "እንግሊዝኛ",
+    "englishShort": "ENG",
+    "amharic": "አማርኛ",
+    "amharicShort": "አማ",
+    "viewProfile": "መገለጫ ይመልከቱ",
+    "changePassword": "የይለፍ ቃል ይቀይሩ",
+    "signOut": "ይውጡ",
+    "settings": "ቲተርና ፊርማ",
+    "addTeeter": "ቲተርና ፊርማ ያክሉ",
+    "navigation": {
+      "dashboard": "ዳሽቦርድ",
+      "outgoing": "ወጪ",
+      "incoming": "ገቢ",
+      "approval": "ማፅደቅ",
+      "delegation": "ዉክልና",
+      "pending": "በመጠባበቅ ላይ",
+      "settings": "ቲተርና ፊርማ",
+      "collaborations": "ትብብር"
+    },
+    "editProfile": "መገለጫ አስተካክል"
+  },
+  "addRecord": {
+    "EditRecord": "መዝገቡን አስተካክል",
+    "Record Type": "የመዝገብ አይነት",
+    "Select Record Type": "የመዝገብ አይነትን ይምረጡ",
+    "Initiation Type": "የማስጀመሪያ ዓይነት",
+    "Select Initiation Type": "የማስነሻ አይነትን ይምረጡ",
+    "Receiving Unit": "ተቀባይ ክፍል",
+    "Select Receiving Units": "ተቀባይ ክፍልን ይምረጡ",
+    "Prefix": "ቅድመ ቅጥያ",
+    "Select Prefix": "ቅድመ ቅጥያ ይምረጡ",
+    "Non Smart Receiving Unit": "እስማርት ኦፊስ ሲስተም ተጠቃሚ ያልሆኑ (ተቀባይ)",
+    "Enter Non Smart Receiving Organization": "እስማርት ኦፊስ ሲስተም ተጠቃሚ ያልሆኑ (ተቀባይ) አስገባ",
+    "To Departments": "ተቀባይ ክፍሎች",
+    "Select Department": "ክፍሎችን ይምረጡ",
+    "Preferred Language": "የደብዳቤ ቋንቋ",
+    "Select Language": "የደብዳቤ ቋንቋን ይምረጡ",
+    "Suffix": "ቅጥያ",
+    "Select Suffix": "ቅጥያ ይምረጡ",
+    "Subject": "ርዕሰ ጉዳይ",
+    "Enter Subject": "ርዕሰ ጉዳይ አስገባ",
+    "Letter Template": "የተመለዱ የደብዳቤ ቅጽዎች",
+    "Select Letter Template": "የተመለዱ የደብዳቤ ቅጽዎች ይምረጡ",
+    "Body": "የደብዳቤ ይዘት",
+    "External CC": "ውጫዊ ግልባጭ",
+    "Select External CC": "ውጫዊ ግልባጭ ይምረጡ",
+    "Internal CC": "ውስጣዊ ግልባጭ",
+    "Select Internal CC": "ውስጣዊ ግልባጭ ይምረጡ",
+    "Non Smart CC Unit": "የኢትዮ ጅቡቲ ስማርት ኦፊስ የማይጠቀሙ ግልባጭ ክፍል",
+    "Enter  Non Smart CC Organization": "የኢትዮ ጅቡቲ ስማርት ኦፊስ የማይጠቀሙ ግልባጭ ክፍል አስገባ",
+    "Cancel": "ሰርዝ",
+    "Add": "+ መዝግብ",
+    "English": "እንግሊዝኛ",
+    "Amharic": "አማርኛ",
+    "Header": "የደብዳቤው ሄደር",
+    "Select Header": "ሄደር ይምረጡ",
+    "No Header": "ሄደር የለም",
+    "Footer": "የደብዳቤዉ ፉተር",
+    "Select Footer": "ፉተር ይምረጡ",
+    "No Footer": "ፉተር የለም",
+    "record": "መዝገብ",
+    "attachment": "አባሪ",
+    "failedToCreateRecord": "መዝገቡን መፍጠር አልተቻለም",
+    "recordSubmittedSuccessfully": "መዝገቡ በተሳካ ሁኔታ ተገብሯል።",
+    "createRecordFirst": "አባሪ ለማካተት መጀመሪያ መዝገብ ይፍጠሩ።",
+    "previous": "ወደ ኋላ",
+    "submit": "አስገባ",
+    "recordNotCreatedYet": "መዝገቡ እስካሁን አልተፈጠረም።",
+    "submitting": "እየሰራሁ ነው...",
+    "Enter CC Prefix": "የግልባጭ ቅድመ ቅጥያ ያስገቡ",
+    "CC Prefix": "የግልባጭ ቅድመ ቅጥያ",
+    "Enter CC Suffix": "የግልባጭ ቅጥያ ያስገቡ",
+    "CC Suffix": "የግልባጭ ድህረ ቅጥያ",
+    "Receiving Users": "ተቀባይ ባለሙያ",
+    "Select Receiving Users": "ተቀባዮችን ይምረጡ",
+    "ccUsers": "ግልባጭ የሚደረግላቸው ባለሙያ",
+    "selectCCUsers": "ግልባጭ የሚደረግላቸውን ባለሙያ ይምረጡ",
+    "refreshOptions": "አዘምን አማራጮች",
+    "isTeamSig": "በቡድን ፊርማ ነው?"
+  },
+  "Preview Record": "የመዝገብ ቅድመ እይታ",
+  "userRecord": {
+    "All": "ሁሉም",
+    "recordCreatedAndSent": "ሰነዱ ተፈጥሮ ተልኳል",
+    "Draft": "ረቂቅ",
+    "Submitted": "ወደፊት የተላከ",
+    "Accepted": "ተቀባይነት ያገኘ",
+    "Approved": "የፀደቀ",
+    "Rejected": "ዉድቅ የተደረገ",
+    "Returned": "የተመለሰ",
+    "Adjustment": "ማስተካከያ",
+    "Sent": "የተላከ",
+    "Letters": "ደብዳቤዎች",
+    "To": "ወደ",
+    "Subject": "ርዕሰ ጉዳይ",
+    "Date": "ቀን",
+    "Search": "ፈልግ",
+    "Add Record": "መዝግብ ፍጠር",
+    "Error loading records.": "መዝገቦችን ማግኘት ስህተት አለ።",
+    "Receiver Info": "ተቀባይ",
+    "No receivers": "ተቀባዮች የሉም",
+    "No receiving unit": "የመቀበያ ክፍል የለም",
+    "Status": "ሁኔታ",
+    "Actions": "ተግባራት",
+    "View Detail": "ዝርዝር ይመልከቱ",
+    "Open actions menu": "የተግባር ምናሌን ክፈት",
+    "Approve": "አጽድቀው",
+    "Forward": "ላክ",
+    "Edit": "አስተካክል",
+    "Delete": "ሰርዝ",
+    "Download": "አውርድ",
+    "Record approved successfully!": "መዝገቡ በተሳካ ሁኔታ ተፅድቋል!",
+    "Failed to approve record.": "መዝገቡን ማጽደቅ አልተቻለም።",
+    "Approve Record": "መዝገቡን አጽድቅ",
+    "Record is deleted successfully": "መዝገቡ በተሳካ ሁኔታ ተሰርዟል",
+    "Confirm Delete": "ማጥፋትን ያረጋግጡ",
+    "Delete Record": "መዝገቡን ሰርዝ",
+    "Downloaded": "አዉርድ",
+    "Download Record PDF": "የመዝገቡን PDF አውርድ",
+    "Failed to download PDF.": "PDF ማውረድ አልተሳካም።",
+    "Download successful!": "ማውረድ በተሳካ ሁኔታ ተጠናቋል!",
+    "Confirm Forward": "ማስተላለፍን ያረጋግጡ",
+    "Forward Record": "መዝገቡን ላክ",
+    "Failed to forward the record": "መዝገቡን ማስተላለፍ አልተሳካም።",
+    "Record forwarded successfully": "መዝገቡ በተሳካ ሁኔታ ተላክ።",
+    "Confirm Approve": "አጽድቅን ያረጋግጡ",
+    "Reference": "ማጣቀሻ ቁጥር",
+    "Reference Number": "ማጣቀሻ ቁጥር",
+    "Enter the subject of the letter": "የደብዳቤውን ርዕስ ያስገቡ",
+    "Delivered By": "የደረሰበት ሰው",
+    "Enter Delivered By": "የደረሰበትን ሰው ያስገቡ",
+    "Letter Number": "የደብዳቤ ቁጥር",
+    "Enter Letter Number": "የደብዳቤ ቁጥሩን ያስገቡ",
+    "Failed to create letter": "ደብዳቤን መፍጠር አልተሳካም",
+    "Letter Created successfully": "ደብዳቤ በትክክል ተፈጠረ",
+    "Please select file_am": "ፋይል እባክዎን ይምረጡ",
+    "signStatus": "የፊርማ ሁኔታ",
+    "createdAt": "የተፈጠረበት ቀን",
+    "View": "ይመልከቱ",
+    "Date Received": "ቀን",
+    "Attachment": "ፋይል",
+    "ReceivingUnit": "ተቀባይ",
+    "Review your record before submission": "ለመላክ ከመጀመርዎ በፊት መዝገብዎን ይገምግሙ",
+    "Back": "ተመለስ",
+    "Submit Record": "መዝገብ አስገባ",
+    "Submitting": "ደብዳቤዉን በማርቀቀቅ ላይ...",
+    "Generating preview": "ቅድመ እይታ በመፍጠር ላይ",
+    "PDF Preview": "PDF ቅድመ እይታ",
+    "Unable to generate preview": "ቅድመ እይታ ማመንጨት አልተቻለም",
+    "Retry": "እንደገና ይሞክሩ",
+    "Record Summary": "የመዝገብ ማጠቃለያ",
+    "No subject": "ርዕስ የለም",
+    "Record Type": "የመዝገብ አይነት",
+    "Not specified": "አልተገለጸም",
+    "Language": "ቋንቋ",
+    "Initiation Type": "የመነሻ አይነት",
+    "Preview generation failed": "ቅድመ እይታ ማመንጨት አልተቻለም"
+  },
+  "statusBar": {
+    "Pending": "በመጠባበቅ ላይ",
+    "Draft": "ረቂቅ",
+    "draft": "በሂደት ላይ",
+    "In Progress": "በሂደት ላይ",
+    "InProgress": "በሂደት ላይ",
+    "active": "በሂደት ላይ",
+    "Reassigned": "በድጋሚ ተመድቧል",
+    "re_assigned": "በድጋሚ ተመድቧል",
+    "Approved": "ፀድቋል",
+    "Accepted": "ተቀባይነት አግኝቷል",
+    "accepted": "ተቀበለ",
+    "Dispatched": "ተልኳል",
+    "Adjustment": "አስተካክል",
+    "adjustment": "አስተካክል",
+    "Rejected": "ተቀባይነት አላገኘም",
+    "rejected": "ተተወ",
+    "Submitted": "ወደፊት",
+    "All": "ሁሉም",
+    "Approve": "አጽድቅ",
+    "Accept": "ተቀበል",
+    "Assign": "መድብ",
+    "Reject": "ዉድቅ አድርግ",
+    "Adjust": "አስተካክል",
+    "Sent": "ተልኳል",
+    "Send": "ላክ",
+    "Created At": "የተፈጠረው በ",
+    "Sign Status": "የፊርማ ሁኔታ",
+    "activate": "አንቃ",
+    "deactivate": "አጥፋ",
+    "activated": "ዉክልናዉ ጀምሯል",
+    "deactivated": "ዝግ ተደርጓል",
+    "signed": "ፊርማ ተደርጓል",
+    "totalAllocations": "ጠቅላላ ምደባዎች",
+    "assignmentStatistics": "የምደባ ስታትስቲቅሬታ ",
+    "Outgoing": "ወጪ",
+    "Incoming": "ገቢ",
+    "Team Signature": "ፊርማዎች በመጠባበቅ ላይ",
+    "Returned": "የተመለሰ",
+    "Adjusted": "የተስተካከለ"
+  },
+  "userIncoming": {
+    "From Date": "ከ",
+    "To Date": "እስከ",
+    "Letters": "ደብዳቤዎች",
+    "Department": "ክፍል",
+    "Subject": "ርዕሰ ጉዳይ",
+    "Date": "ቀን",
+    "Search": "ፈልግ",
+    "Error loading records.": "መዝግቦች ሲመታ ስህተት አለ።",
+    "Status": "ሁኔታ",
+    "Actions": "ተግባራት",
+    "Sending Department": "የላከው ክፍል",
+    "No Department": "ክፍል የለም",
+    "No Subject": "ርዕሰ ጉዳይ የለም",
+    "Sending Organization": "የላከው ድርጅት",
+    "View Detail": "ዝርዝር ይመልከቱ",
+    "Open actions menu": "የተግባር ምናሌን ክፈት",
+    "Accept": "ተቀበል",
+    "Assign": "መድብ",
+    "Edit": "አስተካክል",
+    "Delete": "ሰርዝ",
+    "Download": "አውርድ",
+    "Reject": "ዉድቅ አድርግ",
+    "Cancel": "ሰርዝ",
+    "Record accepted successfully": "መዝገቡ በተሳካ ሁኔታ ተቀብሏል",
+    "Failed to accept record": "መዝገቡን መቀበል አልተቻለም።",
+    "Confirm Acceptance": "መቀበልን ያረጋግጡ",
+    "Are you sure you want to accept this record?": "ይህን መዝገብ መቀበል እንደምትፈልጉ ያረጋግጡ?",
+    "Confirm": "ያድርጉ",
+    "Processing...": "በሂደት ላይ...",
+    "Failed to Assign a Record": "መዝገቡን መመያየት አልተቻለም።",
+    "Assign this record to one or more departments": "ይህን መዝገብ ለአንዱ ወይም ከዚያ በላይ ክፍሎች መመያየት።",
+    "Assign Record": "መዝገቡን መመያየት",
+    "An error occurred during assignment.": "በመመያየት ሂደት ውስጥ ስህተት ተፈጥሯል።",
+    "Enter your remarks...": "የእርስዎን አስተያየት ያስገቡ...",
+    "Assigning...": "በመመያየት ላይ...",
+    "Departments": "ክፍሎች",
+    "Select department(s)...": "ክፍል ይምረጡ...",
+    "Employees": "ሰራተኞች",
+    "Select employee(s)...": "ሰራተኛ ይምረጡ...",
+    "Remark": "አስተያየት",
+    "Are you sure you want to reject this record?": "ይህን መዝገብ መተው እንደምትፈልጉ ያረጋግጡ?",
+    "Failed to rejected record": "መዝገቡን መተው አልተቻለም።",
+    "Record rejected successfully": "መዝገቡ በተሳካ ሁኔታ ተተውቷል",
+    "To": "ለ",
+    "ConvertedBy": "የተቀየረው በ",
+    "ReceiverEmployee": "ተቀባይ ግለሰብ",
+    "ReceiverDepartment": "ተቀባይ ክፍል",
+    "return": "መልስ",
+    "returnQues": "እርግጠኛ ነዎት ይህን መዝገብ መመለስ ይፈልጋሉ?",
+    "returing": "በመመለስ ላይ...",
+    "conformReturn": "መመለስን ያረጋግጡ"
+  },
+  "ApprovalPage": {
+    "Letters": "ደብዳቤዎች",
+    "Department": "ክፍል",
+    "Subject": "ርዕሰ ጉዳይ",
+    "Date": "ቀን",
+    "Search": "ፈልግ",
+    "Error loading records.": "መዝግቦች ሲመታ ስህተት አለ።",
+    "Status": "ሁኔታ",
+    "Actions": "ተግባራት",
+    "Sending Department": "የላከው መምሪያ",
+    "No Department": "መምሪያ የለም",
+    "No Subject": "ርዕሰ ጉዳይ የለም",
+    "Sending Organization": "የላከው ድርጅት",
+    "View Detail": "ዝርዝር ይመልከቱ",
+    "Open actions menu": "የተግባር ምናሌን ክፈት",
+    "To": "ወደ",
+    "Receiver": "ተቀባይ",
+    "Record accepted successfully": "መዝገቡ በተሳካ ሁኔታ ተቀብሏል",
+    "Confirm": "ያድርጉ",
+    "Remark": "አስተያየት",
+    "Accept Record": "መዝገብ ተቀበል",
+    "recordAdjustedSuccessfully": "መዝገቡ በትክክል ተስተካክሏል",
+    "confirmAdjustment": "ማስተካከያን ያረጋግጡ",
+    "adjustRecord": "መዝገቡን ያስተካክሉ",
+    "selectOrUploadSignature": "እባክዎ ፊርማ ይምረጡ ወይም ይስቀሉ",
+    "selectOrUploadTeeter": "እባክዎ ቴተር ይምረጡ ወይም ይስቀሉ",
+    "recordApprovedSuccessfully": "መዝገቡ በተሳካ ሁኔታ ተፀድቷል!",
+    "failedToApproveRecord": "መዝገቡን ማጽደቅ አልተቻለም።",
+    "approveRecord": "መዝገቡን ያጽዱ",
+    "confirmApprove": "ማጽደቅን ያረጋግጡ",
+    "confirmRejection": "ውድቅ ያረጋግጡ",
+    "rejectRecord": "መዝገቡን ውድቅ ሆኗል",
+    "RecordType": "የመዝገብ አይነት",
+    "selectStamp": "ማህተም ይምረጡ",
+    "selectedStamp": "የተመረጠው ማህተም፡",
+    "signature": "ፊርማ",
+    "yourSignature": "የእርስዎ ፊርማ፡",
+    "selectedSignature": "የተመረጠው ፊርማ፡",
+    "selectSignature": "ፊርማ ይምረጡ",
+    "approving": "እየፅደቀ ነው..."
+  },
+  "viewDetail": {
+    "letterPreview": "የደብዳቤ እይታ",
+    "view": "ደብዳቤ ተመልከት",
+    "fullScreen": "ሙሉ እይታ",
+    "back": "ተመለስ",
+    "receivingOrganizations": "ተቀባይ ድርጅቶች",
+    "receivingUserEmployees": "ተቀባይ ተጠቃሚ ሰራተኞች",
+    "sendingDepartment": "ላኪ ክፍሎች",
+    "externalCcOrganizations": "ዉጫዊ ግልባጭ ድርጅቶች",
+    "internalCcDepartments": "ውስጣዊ ግልባጭ ክፍሎች",
+    "receivingDepartments": "ተቀባይ ክፍሎች",
+    "sentDate": "የተላከበት ቀን",
+    "referenceNumber": "ማጣቀሻ ቁጥር",
+    "attachments": "አባሪ",
+    "remarks": "ማስታወሻ",
+    "loadingRemarks": "ማስታወሻዎች በመጫን ላይ...",
+    "failedToLoadRemarks": "ማስታወሻዎችን መጫን አልተቻለም።",
+    "noRemarksAvailable": "ለዚህ መዝገብ ማስታወሻ የለም።",
+    "action": "እርምጃ",
+    "comment": "አስተያየት፡",
+    "noAttachmentsAvailable": "ምንም አባሪ የሉም።",
+    "open": "ክፈት",
+    "subject": "ርዕስ",
+    "letterNumber": "የደብዳቤ ቁጥር",
+    "deliveredBy": "የተደረሰው በ",
+    "personalRemark": "የግል ማስታወሻ",
+    "noPersonalRemarkProvided": "የግል ማስታወሻ አልተሰጠም",
+    "regeneratePdf": "PDF እንደገና ይፍጠሩ",
+    "regeneratingPdf": "በመፍጠር ላይ...",
+    "pdfRegenerationSuccess": "PDF በተሳካ ሁኔታ ተፈጥሯል",
+    "pdfRegenerationFailed": "PDF መፍጠር አልተሳካም",
+    "sendingBureau": "ላኪ ቢሮ",
+    "collaborators": "ፈራሚዎች",
+    "recordDetail": "የደብዳቤ ዝርዝር",
+    "commentorEmployee": "አስተያየት ሰጪ ሰራተኛ",
+    "commentorDepartment": "አስተያየት ሰጪ ክፍል",
+    "noComment": "ምንም አስተያየት የለም"
+  },
+  "PDF": {
+    "dropFilesHere": "ፋይሎችን እዚህ ይጣሉ",
+    "dragDropInstruction": "አባሪ ፋይሎን እዚህ ያስገቡ",
+    "youCanUpload": "መጫን የሚቻል",
+    "removeFile": "ፋይሉን ያስወግዱ",
+    "filesUpTo": "እስከ ... ፋይሎች",
+    "aFileWith": "ከ... ጋር ያለ ፋይል",
+    "file": "ፋይል",
+    "wasRejected": "ተተውቷል",
+    "uploaded": "ተጫኗል",
+    "failedToUpload": "መጫን አልተቻለም",
+    "uploading": "በመጫን ላይ...",
+    "cannotUploadMoreThan": "ከ በላይ ፋይሎችን ማጫን አይቻልም"
+  },
+  "convert": {
+    "recordConverted": "መዝገቡ በተሳካ ሁኔታ ተቀይሮ ትልኳል",
+    "selectSeal": "እባክዎን ማህተም ይምረጡ።",
+    "convertRecord": "መዝገቡን ቀይር",
+    "recordType": "የመዝገብ አይነት፦",
+    "subject": "ርዕስ፦",
+    "convertAndDispatch": "ቀይርና ላክ",
+    "selectSealLabel": "ማህተም ይምረጡ፦",
+    "loadingSeals": "ማህተሞችን በመጫን ላይ...",
+    "selectSealPlaceholder": "-- ማህተም ይምረጡ --",
+    "selectedSealPreview": "የተመረጠው ማህተም እይታ፦"
+  },
+  "delegation": {
+    "delegatedPosition": "የተወካይ የስራ መደብ መጠሪያ",
+    "selectDelegatedPosition": "የተወካይ የስራ መደብ መጠሪያ ይምረጡ",
+    "delegateTo": "ተወካይ ባለሙያ",
+    "selectEmployee": "ባለሙያ ይምረጡ",
+    "noEmployeesAvailable": "ለዚህ የስራ ቦታ ምንም ባለሙያች አልተገኙም",
+    "startDate": "የመጀመሪያ ቀን",
+    "pickDate": "ቀን ይምረጡ",
+    "endDate": "የመጨረሻ ቀን",
+    "update": "አዘምን",
+    "save": "መዝግብ",
+    "title": "ውክልና",
+    "newDelegation": "አዲስ ውክልና",
+    "editDelegation": "ውክልና አስተካክል",
+    "addDelegation": "ውክልና አክል",
+    "position": "የተወካይ የስራ መደብ መጠሪያ",
+    "active": "በስራ ላይ",
+    "delegator": "ወካይ",
+    "delegatedEmployee": "ተወካይ ባለሙያ",
+    "currentEndDate": "የአሁኑ ያለው የመጨረሻ ቀን",
+    "select": "ይምረጡ",
+    "acting": "እንደ",
+    "switchRole": "ሚና ይቀይሩ",
+    "successDelete": "ውክልና በተሳካ ሁኔታ ተሰርዟል።",
+    "activeDelegationExists": "ንቁ ውክልና አሎ፤ ዘሎ ውክልና ኣስተኻኽሉ ወይ ሰርዙ እሞ እንደገና ፍጠሩ።"
+  },
+  "signatureUpload": {
+    "signature": "ፊርማ",
+    "teeter": "ቲተር",
+    "uploadSignature": "ፊርማ ስቀል",
+    "uploadTeeter": "ቲተር ስቀል",
+    "uploadSignatureNote": "ፊርማ ይስቀሉ (PNG ብቻ)",
+    "uploadTeeterNote": "ቲተር ይስቀሉ (PNG ብቻ)",
+    "uploadedSignature": "የተስቀመ ፊርማ:",
+    "uploadedTeeter": "የተስቀመ ቲተር:",
+    "enterFileName": "የፋይሉ ስም ያስገቡ (ከቅጥ በስተቀር)",
+    "preview": "ቅድመ እይታ:",
+    "upload": "ስቀል",
+    "uploading": "በመስቀል ላይ...",
+    "remove": "አስወግድ",
+    "removing": "በመሰረዝ ላይ...",
+    "removedSuccess": "በተሳካ ሁኔታ ተሰርዟል።",
+    "removeTeeterFailed": "ቲተሩን መሰረዝ አልተሳካም።",
+    "removeFailed": "መሰረዝ አልተሳካም።",
+    "selectPngFirst": "እባክዎን መጀመሪያ PNG ፋይል ይምረጡ።",
+    "onlyPngAllowed": "በPNG ብቻ ፋይሎች መፍቀድ ይቻላል።",
+    "signatureExists": "ፊርማ አስቀድሞ አለ። አዲስ ለማስገባት ቀደም ያለውን ያስወግዱ።",
+    "uploadSuccess": "ስቀል ተሳክቷል!",
+    "uploadError": "የስቀል ስህተት፦",
+    "uploadFailed": "ስቀል አልተሳካም።",
+    "openSignatureForm": "Open Signature Drawer"
+  },
+  "assignment": {
+    "assignedBy": "የመደበኛው ተመድቧል",
+    "assignedTo": "የተመደበው",
+    "assignedOn": "የተመደበበት ቀን፡",
+    "comment": "አስተያየት፡",
+    "assignmentFlow": "የመደበኛ ፍሰት",
+    "noAssignments": "ለዚህ መዝገብ ምንም መደበኛ አልተከናወነም።",
+    "responded": "ተሰጥቷል"
+  },
+  "auth": {
+    "welcomeBack": "እንኳን ደህና መጡ።",
+    "enterCredentials": "ለመቀጠል መለያዎን ያስገቡ",
+    "email": "ኢሜል",
+    "phoneNumber": "ስልክ ቁጥር",
+    "username": "የተጠቃሚ ስም",
+    "password": "የይለፍ ቃል",
+    "rememberMe": "አስታውሰኝ",
+    "forgotPassword": "የይለፍ ቃልን ረሳኽ?",
+    "loggingIn": "በመግባት ላይ...",
+    "login": "ግባ",
+    "welcomeHeadline": "እንኳን ወደ እስማርት ኦፊስ በደህና መጡ",
+    "paperlessOffice": "ወረቀት አልባ ቢሮ",
+    "welcomeSubtext": "የስራ ሂደትዎን ለማመቻቸት እና የወረቀት ትዕዛዝን ለማጥፋት ይግቡ።",
+    "emailAddress": "ኢሜል አድራሻ",
+    "err": "ልክ ያልሆነ የኢትዮጵያ ስልክ ቁጥር በ+251 መጀመር አለበት።",
+    "invalidEmail": "Please enter a valid email address"
+  },
+  "msg": {
+    "sent": "ደብዳቤ ተልኳል",
+    "failedToCreate": "መዝገቡን መፍጠር አልተቻለም",
+    "failedToGetUrl": "የመጫኛ አድራሻን ማግኘት አልተቻለም",
+    "registrationSuccess": "ምዝገባው ተሳክቷል። የይለፍ ቃልህን ለመከላከል ኤስኤምኤስ ልከናል።",
+    "errorOccurred": "ስህተት ተፈጥሯል።",
+    "pdfRegenerated": "PDF በተሳካ ሁኔታ ዳግመኛ ተፈጥሯል።",
+    "approveFailed": "መዝገቡን ማፅደቅ አልተቻለም።",
+    "approveSuccess": "መዝገቡ በተሳካ ሁኔታ ተፅድቷል",
+    "selectPrompt": "እባክዎ ማህተም ይምረጡ",
+    "extendedSuccess": "ተወካይነት በተሳካ ሁኔታ ተራቅቷል።",
+    "letter": "ደብዳቤ",
+    "approvedSuccess": "መዝገቡ በተሳካ ሁኔታ ተፅድቷል!",
+    "submittedSuccess": "መዝገቡ በተሳካ ሁኔታ ተሰጥቷል!",
+    "markedForAdjustment": "ለማሻሻል ተምልከቷል",
+    "sentToOfficer": "ወደ መዝገብ ኦፊሰር ተልኳል",
+    "errorSendingToOfficer": "ወደ መዝገብ ኦፊሰር መላክ ላይ ስህተት ተፈጥሯል",
+    "success": "ተወካይነት ተሳክቷል።",
+    "failed": "ተወካይነት አልተሳካም።",
+    "deletedSuccess": "ተወካይነት በተሳካ ሁኔታ ተሰርዟል።",
+    "deleteFailed": "ተወካይነትን መሰረዝ አልተቻለም።",
+    "failedCreateOrGetUrl": "መዝገቡን መፍጠር ወይም የመጫኛ አድራሻን ማግኘት አልተቻለም።",
+    "sentAndUploadedSuccess": "ደብዳቤ ተልኳል እና ፋይሉ በተሳካ ሁኔታ ተጫኗል።",
+    "failedSendOrUpload": "ደብዳቤን መላክ ወይም ፋይልን መጫን አልተቻለም።",
+    "successassign": "መዝገብ በተሳካ ሁኔታ ተመዝግቧል።",
+    "submittedWithAttachments": "መዝገቡ ከአባሪ ፋይሎች ጋር ተሰጥቷል።",
+    "createFailed": "መዝገቡን መፍጠር አልተቻለም።",
+    "refreshedSuccess": "በተሳካ ሁኔታ ተዘምኗል።",
+    "refreshFailed": "መዘመኑ አልተቻለም።",
+    "redirecting": "በመምረጥ ላይ...",
+    "loginSuccess": "መግባት ተሳክቷል።",
+    "receivingDepartmentRequired": "ቢያንስ አንድ ተቀባይ መመዝገብ አስፈላጊ ነዉ!",
+    "receivingUnitRequired": "አንድ ተቀባይ ክፍል አስፈላጊ ነው።",
+    "recordTypeRequired": "የመዝገብ አይነት አስፈላጊ ነው።",
+    "initiationTypeRequired": "የመነሻ አይነት አስፈላጊ ነው።",
+    "subjectRequired": "ርዕሰ ጉዳይ አስፈላጊ ነው!",
+    "preferredLanguageRequired": "የተመረጠው ቋንቋ አስፈላጊ ነው።",
+    "bodyRequired": "የደብዳቤ ይዘት አስፈላጊ ነው!",
+    "sincerelyTextRequired": "የከሰላምታ ጋር አስፈላጊ ነው።",
+    "headerRequired": "ራስጌ አስፈላጊ ነው።",
+    "footerRequired": "ግርጌ አስፈላጊ ነው።",
+    "accessDenied": "መዳረሻ ተከልክሏል።",
+    "accessDeniedmsg": "ውክልና ስላሎት ወደዚህ ገጽ መግባት አይችሉም። ለመቀጠል እባክዎን ውክልናውን ያንሱ።",
+    "accessDeniedmsg2": "ውክልና ስላሎት ወደዚህ ገጽ መግባት አይችሉም። ቀድሞውንም በሌላ ሰራተኛ ከተወከሉ ውክልና መስጠት አይችሉም",
+    "accessDeniedmsg3": "በዚህ ድርጅት ስላልተመዘገብክ ወይም ምንም አይነት ቦታ ስላልተመደብክ የሪከርድ አስተዳደር ሞጁልን መጠቀም አትችልም።"
+  },
+  "landingPage": {
+    "smartOffice": "የኢትዮ ጅቡቲ ስማርት ኦፊስ",
+    "signIn": "ግባ",
+    "signUp": "ተመዝገብ",
+    "overview": "አጠቃላይ እይታ",
+    "features": "ባህሪያት",
+    "workflow": "የስራ ሂደት",
+    "manual": "መመሪያ",
+    "digitalTransformation": "ለዘመናዊ የመንግሥት አስተዳደር ዲጂታል ለውጥ።",
+    "facebook": "ፌስቡክ",
+    "twitter": "ትዊተር",
+    "telegram": "Telegram",
+    "tiktok": "TikTok",
+    "contactUs": "አግኙን",
+    "quickLinks": "ፈጣን አገናኞች",
+    "copyright": "ትሪያ - የቅጂ መብት ©",
+    "rightsReserved": "መብቶቹ መያዣ ናቸው - በትሪያ የበለጸገ",
+    "address": "ሊንጎ ታወር ሸገር ህንጻ ፊት ለፊት፣ ቦሌ፣ አዲስ አበባ፣ ኢትዮጵያ",
+    "platformSystem": "ፕላትፎርም ሲስተም",
+    "initiativeDescription": "የኢትዮ ጅቡቲ የባቡር መስመርንን አሰራር በዘመናዊ ቴክኖሎጂ ለማዘመን የተነደፈ የዲጂታል ትራንስፎርሜሽን ውጥን።",
+    "getStarted": "ጀምር",
+    "learnMore": "ለተጨማሪ መረጃ",
+    "sops": "ኤስ . ኦ . ፒ . ኤስ",
+    "smartOfficePlatformSystem": "የኢትዮ ጅቡቲ ስማርት ኦፊስ ፕላትፎርም ሲስተም",
+    "revolutionDescription": "የመንግስት ስራዎችን በ AI የተጎላበተ የስራ ፍሰት አውቶሜሽን እና የእውነተኛ ጊዜ ትንታኔዎችን አብዮት ማድረግ።",
+    "liveDemo": "የቀጥታ ማሳያ ዝግጅት አለ",
+    "outgoingRecords": "ወጪ ሰነዶች",
+    "outgoingRecordsDesc": "የውስጥ ወይም የውጭ መዝገቦችን ከአባሪዎች እና ተዋረዳዊ ማረጋገጫ የስራ ፍሰቶች ጋር ይፍጠሩ እና ይላኩ።",
+    "incomingRecords": "ገቢ ሰነዶች",
+    "incomingRecordsDesc": "የዲጂታል ደብዳቤ እና የፊርማ ድጋፍ ከቢሮዎ መዋቅር ጋር በሚዛመዱ ተዋረዳዊ ማረጋገጫ ሂደቶች።",
+    "approvalWorkflows": "የማጽደቅ ሂደቶች",
+    "approvalWorkflowsDesc": "ከመስክ አቀማመጦች ጋር የሚዛመዱ ዲጂታል ደብዳቤና ፊርማ ድጋፍ።",
+    "interactiveDashboard": "ተዛማጅ ዳሽቦርድ",
+    "interactiveDashboardDesc": "በመምሪያ ደረጃ ማጠቃለያዎች እና በመጠባበቅ ላይ ያሉ የገቢ እና የወጪ መዝገቦችን በቅጽበት መከታተል።",
+    "organizedFolders": "የተደራጀ ሰነድ",
+    "organizedFoldersDesc": "በላቀ የፍለጋ እና የማጣራት አቅም የተዋቀረ ስርዓት በመጠቀም መዝገቦችን ይመድቡ።",
+    "securityAccessControl": "የደህንነት እና የመዳረሻ ቁጥጥር",
+    "securityAccessControlDesc": "ለሁሉም የሰነድ ድርጊቶች እና ማሻሻያዎች በተሟላ የኦዲት ዱካዎች በሚና ላይ የተመሰረተ መዳረሻ።",
+    "powerfulFeaturesTitle": "ኃይለኛ ባህሪያት",
+    "powerfulFeaturesSubtitle": "የሰነድዎን የስራ ፍሰት ያመቻቹ",
+    "powerfulFeaturesDesc": "የእኛ አጠቃላይ መሳሪያዎች ደህንነትን እና ተገዢነትን እየጠበቁ መዝገቦችን በብቃት እንዲያቀናብሩ ያግዝዎታል።",
+    "feature1": "ፈጣን የማጽደቅ ጊዜ",
+    "feature2": "የተሟላ የሰነድ ስርዓት",
+    "feature3": "የኦዲት ተገዢነት",
+    "documentWorkflow": "የሰነድ እንቅስቃሴ",
+    "recordCreation": "የደብዳቤ ፍጠራ",
+    "recordCreationDesc": "ተጠቃሚ በአባሪዎች መዝገብ ይፈጥራል",
+    "teamLeaderReview": "የቡድን መሪ ግምገማ",
+    "teamLeaderReviewDesc": "የመጀመሪያ ደረጃ ፍቃድ በቀጥታ አለቃ",
+    "directorApproval": "በዳይሬክተር ማጽደቅ",
+    "directorApprovalDesc": "የመምሪያው ኃላፊ ገምግሞ ያጽድቃል",
+    "deputyHeadReview": "የምክትል ሃላፊ ግምገማ",
+    "deputyHeadReviewDesc": "ከማቅረቡ በፊት የመጨረሻ የአስተዳደር ፈቃድ",
+    "recordOfficerProcessing": "የመዝገብ ቤት ባለሙያ ሂደት",
+    "recordOfficerProcessingDesc": "ህጋዊ ምዝገባና ማስተላለፊያ",
+    "streamlinedProcess": "ቀላል የተደረገ ሂደት",
+    "recordManagementApprovalWorkflows": "የሰነድ አስተዳደር የማረጋገጫ ሂደቶች",
+    "smartOfficeDescription": "የኢትዮ ጅቡቲ ስማርት ኦፊስ ተገቢውን ቁጥጥር እና ተጠያቂነትን በሚያረጋግጡ ሊበጁ በሚችሉ ዲጂታል የስራ ፍሰቶች የእርስዎን ድርጅታዊ ተዋረድ ያንጸባርቃል።",
+    "step": "እርምጃ",
+    "workflowAutomationBenefits": "የስራ ፍሰት አውቶሜሽን አጠቃላይ ጥቅሞች",
+    "workflowAutomationDesc": "ስማርት የሆነ የስራ ፍሰት ስርዓት የእርስዎን ድርጅታዊ ፖሊሲዎች ማክበርን በሚያረጋግጥበት ጊዜ የማስኬጃ ጊዜን በ 65% ይቀንሳል።",
+    "fasterApprovals": "65% ፈጣን ማረጋገጫዎች",
+    "reduceDelays": "የቢሮክራሲያዊ መዘግየቶችን ይቀንሱ",
+    "auditTrail": "100% የኦዲት መንገድ",
+    "completeRecord": "የሁሉም ድርጊቶች መዝገብ",
+    "advancedFeatures": "የላቁ ባህሪያት",
+    "slaMonitoring": "የአገልግሎት ደረጃ እና መቆጣጠሪያ (SLA)",
+    "slaMonitoringDesc": "የአገልግሎት ደረጃ ስምምነቶችን በራስ-ሰር መከታተል ከመዘግየቶች ማንቂያዎች ጋር።",
+    "conditionalRouting": "የፋይሎች ሙቭመንት",
+    "conditionalRoutingDesc": "ዘመናዊ ህጎች በይዘት፣ እሴት ወይም ክፍል ላይ ተመስርተው ሰነዶችን በራሳቸው ይመራሉ።",
+    "temporaryApprovalDelegation": "ከሙሉ የኦዲት ክትትል ጋር ለዕረፍት ጊዜያዊ ተቀባይነት ያለው ውክልና።",
+    "login": "ወደ ስርዓቱ ይግቡ",
+    "step1": "1፡ በጀመርያ በራስጌ ያለውን የ",
+    "headerBtn": "ቁልፉን ይጫኑ",
+    "step2": "2፡ የተጠቃሚ ስም እና የይለፍ ቃል ያስገቡ",
+    "step3": "3፡ የ",
+    "accessBtn": "ቁልፉን ይጫኑ",
+    "note": "ማስታወሻ",
+    "forgotIntro": "የይለፍ ቃልዎን ከረሱ፣ ዳግም ለማስጀመር የIT ባለሙያ ያናግሩ።",
+    "dashboardTitle": "የዳሽቦርድ እይታ",
+    "dashboardDesc": "ዳሽቦርዱ የመዝገብ እንቅስቃሴዎችዎን አጠቃላይ እይታ ያቀርባል",
+    "recordsCreated": "የተፈጠሩ መዝገቦች",
+    "recordsTotal": "እርስዎ የጀመሩት ጠቅላላ መዝገቦች",
+    "recordsReceived": "የተቀበሉት መዝገቦች፡",
+    "incomingDocs": "ከሌሎች የተላኩ መዝገቦች",
+    "breakdown": "የውስጥ/የውጭ ክፍፍል፡",
+    "visuals": "የሰነዶችን በአይነት የሚያሳዩ ቻርቶች",
+    "approvalStatus": "የማጽደቅ ሁኔታ",
+    "approvalTypes": "በመጠባበቅ፣ የተፃደቁ ወይም የተወሰኑ መዝገቦች",
+    "quickActions": "ፈጣን እርምጃዎች",
+    "createOrCheck": "አዲስ መዝገብ ይፍጠሩ ወይም መጠባበቅ ላይ ያሉትን ያረጋግጡ",
+    "recentActivity": "የቅርብ ጊዜ እንቅስቃሴ",
+    "trackUpdates": "በሰነዶችዎ ላይ የተደረጉትን አዳዲስ ለውጦች ይከታተሉ",
+    "manageOut": "የውጪ መዝገቦችን አስተዳደር",
+    "createNew": "አዲስ መዝገቦች መፍጠር",
+    "goToTab": "ወደ ትምህርቱ ይሂዱ",
+    "clickBtn": "ቁልፍ ይጫኑ",
+    "fillFields": "ሁሉንም ያስፈልጋቸውን መስኮች (የመዝገብ አይነት፣ ተቀባይ፣ ርዕስ ወዘተ) ይሙሉ",
+    "attach": "የሚያስፈልጉትን ደጋፊ ሰነዶች ይጨምሩ",
+    "saveOrSubmit": "እንደ ንባብ አድርጉ ወይም ለማጽደቅ ይላኩ",
+    "trackStatus": "የመዝገብ ሁኔታ መከታተል",
+    "notForwarded": "ይህ ንጥል አሁንም አልተላከም። ሊሻሽልና ሊሰረዝ ይችላል።",
+    "awaiting": "ይህ ንጥል ተቀባይነት ወይም ማጽደቅ እየተጠበቀ ነው።",
+    "accepted": "ይህ ንጥል ተቀብሏል እና ለማጽደቅ እየተጠበቀ ነው።",
+    "approvedSent": "ይህ ንጥል ተፃደቀ እና ለመላክ ወደ መዝገብ አመራር ተልኳል።",
+    "returned": "ይህ ንጥል ለማስተካከል ወይም ተጨማሪ መረጃ ለማቅረብ ተመለሰ። እባክዎን አስተያየቶቹን ይመልከቱ።",
+    "rejected": "ይህ ንጥል ተቀባይነት አልተሰጠውም።",
+    "sent": "ይህ ንጥል ወደ ተቀባዮች ተልኳል።",
+    "returnedByOfficer": "ይህ ንጥል በመዝገብ አመራር ተመለሰ።",
+    "monitor": "በየማጽደቅ ደረጃዎች ውስጥ መዝገቦችዎን ተከታትሉ",
+    "manageIncoming": "የውስጥ መዝገቦችን አስተዳደር",
+    "incomingTypes": "የውስጥ መዝገቦች አይነቶች",
+    "fromOthers": "ከሌሎች ድርጅቶች",
+    "withinOrg": "ውስጥ ያለዎት ድርጅት",
+    "copied": "ለመረጃዎ ተቀይሯል",
+    "processIncoming": "የውስጥ መዝገቦችን ማከናወን",
+    "readDoc": "ሙሉውን ሰነድ ክፈትና አንብብ",
+    "acknowledge": "የሰነዱን መቀበል ያረጋግጡ",
+    "forward": "ወደ ሌላ ቡድን አባል ላክ ከሚያስፈልግ",
+    "archive": "አርካይቭ",
+    "fileRef": "ለማጥናት ሰነድ ያዝዙ",
+    "approvalworkflow": "የማጽደቅ ሂደት",
+    "process": "የማጽደቅ ሂደት",
+    "internalFlow": "የውስጥ መዝገቦች ሂደት፡",
+    "creator": "አምራች",
+    "leader": "ቡድን አለቃ",
+    "director": "ዳይሬክተር",
+    "officer": "የመዝገብ ሰራተኛ",
+    "externalFlow": "የውጭ መዝገቦች ሂደት፡",
+    "actions": "የማጽደቅ እርምጃዎች",
+    "delegation": "የሥልጣን ማዋል",
+    "delegateInfo": "እርስዎ ከማይኖሩ ጊዜ ሌላ ሰራተኛ ሥልጣንዎን ሊሰጥ ይችላሉ፡",
+    "delegateNav": "ወደ ዚህ ይሂዱ",
+    "selectColleague": "ከድርጅታችሁ ባለሙያ አንዱን ይምረጡ",
+    "setDates": "የመነሻና የመጨረሻ ቀናትን ያዘጋጁ",
+    "setPerms": "የሚሰጥበትን ፈቃድ ያስወግዱ",
+    "saveDelegate": "የሥልጣን ማዋል ቅንብሮችን ያስቀምጡ",
+    "autoExpire": "የሥልጣን ማዋሎች በተወሰነው ቀን ራሳቸው ይዘጋሉ።",
+    "collab": "የተሰራተኞች ሥራ ቦታ",
+    "collabInfo": "የተሰራተኞች ማዕከል ከብዙ አባላት ማስተካከያ የሚጠይቁትን መዝገቦች ያአካትታል።",
+    "viewDocs": "ሁሉንም ተባባሪ ሰነዶች አንድ ቦታ ይመልከቱ",
+    "addComments": "አስተያየቶችን ወይም ማስታወሻዎችን ያክሉ",
+    "approve": "ስምህን በዲጂታል ፊርማ ማስረጃ ላይ ሲሆን ማጽደቅ",
+    "trackChanges": "ለውጦችንና የስሪት ታሪክን ተከታትለው",
+    "realTime": "በእውነተኛ ጊዜ ማሻሻያ",
+    "liveChanges": "ከሌሎች ፈራሚዎች የሚሰሩ ለውጦችን ይዩ",
+    "notifications": "የማሳወቂያ ስርዓት",
+    "alerts": "ሌሎች ሰራተኞች ሲሰሩ ማሳወቂያዎችን ይቀበሉ",
+    "signatureMgmt": "የተሰጠ ፊርማና ምልክት አስተዳደር",
+    "leadersOnly": "የቡድን አለቆችና ከዚያ ላይ ያሉ የዲጂታል ፊርማና ምልክት ሊከታተሉ ይችላሉ።",
+    "signatureTitle": "ምልክትና ፊርማ",
+    "uploadTeeter": "የመንግስት ጥርስዎን ግልጽ ምስል ይስጡ",
+    "uploadSignature": "ዲጂታል ፊርማዎን ይፍጠሩ ወይም ይስጡ",
+    "defaultSignature": "ሁሉም ማጽደቅ ላይ ነባሪ እንዲሆን ያዘጋጁ",
+    "updateDesignation": "ስምህ ሲለዋወጥ ያዘጋጁ",
+    "security": "የደህንነት ማስታወሻ፦",
+    "encrypted": "ምልክትና ፊርማዎ ተሰናክለው እና ለመዝገብ ማጽደቅ ብቻ ይጠቀማሉ።",
+    "recordModule": "የመዝገብ አስተዳደር ክፍል",
+    "guide": "የኢትዮ ጅቡቲ ስማርት ኦፊስ ፕላትፎርም ስርዓትን ለመጠቀም ሙሉ መምሪያ",
+    "back": "ወደ ዳሽቦርድ ተመለስ",
+    "moduleGuide": "የክፍል መመሪያ",
+    "previous": "የቀደሰ",
+    "next": "ቀጣይ",
+    "addTeeterSignature": "ዲጂታል ቲተር እና ፊርማ ያክሉ",
+    "returnWithComments": "ከአስተያየት ጋር መመለስ",
+    "requestChanges": "የማሻሻያ ጥያቄ",
+    "screenshotOf": "የእስክሪን ካፕቸር",
+    "fasterApproval": "ፈጣንፍ ቃዶች",
+    "auditReady": "ለኦዲት ዝግጁ",
+    "organizedRecords": "የተደራጀ መዝገቦች",
+    "tab": "Tab",
+    "click": "ይጫኑ",
+    "button": "ቁልፍ"
+  },
+  "organization": {
+    "organizations": "ድርጅቶች",
+    "newOrganization": "አዲስ ድርጅት",
+    "organizationName": "የድርጅቱ ስም",
+    "createdOn": "ተፈጠረበት ቀን",
+    "numberOfUsers": "የተጠቃሚዎች ብዛት",
+    "assignedAdmin": "የተመደበ አስተዳዳሪ",
+    "isGovernmentOrganization": "መንግስታዊ ድርጅት ነው?",
+    "createNew": "አዲስ ፍጠር",
+    "edit": "አርትዕ",
+    "enterDetails": "አዲሱን ድርጅት ዝርዝሮች ያስገቡ። በአስተማማኝ እንደተሰኘ ያሉ ሜዳዎች (*) አስፈላጊ ናቸው።",
+    "nameAmharic": "ስም (አማርኛ)",
+    "nameEnglish": "ስም (እንግሊዝኛ)",
+    "key": "ቁልፍ",
+    "organizationType": "የድርጅት አይነት",
+    "loadingOrganizationTypes": "የድርጅት አይነቶችን በመጫን ላይ...",
+    "errorLoadingOrganizationTypes": "የድርጅት አይነቶችን ማጫን ላይ ስህተት ተፈጥሯል",
+    "noOrganizationTypesAvailable": "ምንም የድርጅት አይነት አልተገኘም",
+    "parentOrganization": "ዋና ድርጅት (አማራጭ)",
+    "loading": "በመጫን ላይ...",
+    "selectOrganization": "ድርጅት ይምረጡ",
+    "noOrganization": "ምንም ድርጅት የለም",
+    "isOrganizationPublic": "ድርጅቱ የህዝብ ነው?",
+    "selectOrganizationType": "የድርጅት አይነት ይምረጡ",
+    "deleteOrganization": "ድርጅቱን ሰርዝ",
+    "confirmDelete": "በቋሚነት መሰረዝ እንደምትፈልጉ እርግጠኛ ነን?",
+    "cannotUndo": "ይህ እርምጃ ሊያስወግድ አይችልም።",
+    "deleting": "በማጥፋት ላይ ...",
+    "delete": "አጥፋ",
+    "viewOrganization": "ድርጅቱን ይመልከቱ",
+    "editOrganization": "ድርጅቱን አርትዕ",
+    "englishNameRequired": "የእንግሊዝኛ ስም አስፈላጊ ነው",
+    "amharicNameRequired": "የአማርኛ ስም አስፈላጊ ነው",
+    "invalidEmail": "የተሳሳተ ኢሜይል አድራሻ",
+    "usernameMinLength": "የተጠቃሚ ስም ቢያንስ 3 ፊደላት መሆን አለበት",
+    "organizationRequired": "ድርጅት አስፈላጊ ነው",
+    "invalidPhoneNumber": "ስልክ ቁጥሩ ትክክለኛ የኢትዮጵያ ቁጥር መሆን አለበት",
+    "registerAdminTitle": "የድርጅት አስተዳዳሪን መመዝገብ",
+    "registerAdminDescription": "ለመመዝገብ አስፈላጊ መረጃዎችን ያስገቡ",
+    "enterEnglishName": "የእንግሊዝኛ ስም ያስገቡ",
+    "enterAmharicName": "የአማርኛ ስም ያስገቡ",
+    "email": "ኢሜይል",
+    "emailExample": "email@example.com",
+    "username": "የተጠቃሚ ስም",
+    "enterUsername": "የተጠቃሚ ስም ያስገቡ",
+    "phoneNumber": "ስልክ ቁጥር",
+    "phoneNumberExample": "ለምሳሌ፡ 0912345678 ወይም +251912345678",
+    "organization": "ድርጅት",
+    "registering": "በመመዝገብ ላይ...",
+    "registerAdmin": "አስተዳዳሪን መመዝገብ",
+    "dashboard": "ዳሽቦርድ",
+    "organizationAdmins": "የድርጅት አስተዳዳሪዎች",
+    "externalUsers": "ውጪ ተጠቃሚዎች",
+    "userManagement": "የተጠቃሚ አስተዳደር",
+    "content": "ይዘት",
+    "bulkUpload": "በጥቅል መጫን",
+    "positionTypes": "የመደብ አይነቶች",
+    "activityLog": "የእንቅስቃሴ መዝገብ",
+    "setting": "ቅንብሮች",
+    "loadingAdmins": "አስተዳዳሪዎችን በመጫን ላይ...",
+    "errorLoadingAdmins": "የአስተዳዳሪ መረጃን ማጫን ላይ ስህተት ተፈጥሯል",
+    "retry": "ደግመው ይሞክሩ",
+    "assignAdmin": "አስተዳዳሪ መመደብ",
+    "addAdmin": "አስተዳዳሪ ያክሉ",
+    "adminAssignedSuccess": "አስተዳዳሪ በትክክል ተመድቧል",
+    "userAssignedSuccess": "ተጠቃሚው በትክክል ተመድቧል",
+    "userAssignFailed": "ተጠቃሚውን መመደብ አልተቻለም",
+    "assignAdminToOrganization": "አስተዳዳሪን ወደ ድርጅት መመደብ",
+    "assignAdminInstructions": "እንደ አስተዳዳሪ ለመመደብ ድርጅትን እና ተጠቃሚን ይምረጡ።",
+    "users": "ተጠቃሚዎች",
+    "searchUsers": "ተጠቃሚዎችን ይፈልጉ...",
+    "noUsersFound": "ምንም ተጠቃሚዎች አልተገኙም",
+    "assigning": "በመመደብ ላይ...",
+    "assignUser": "ተጠቃሚ ይመድቡ",
+    "pendingExternalUsers": "በመጠባበቅ ላይ ያሉ ውጪ ተጠቃሚዎች",
+    "activateUserPrompt": "ይህን ተጠቃሚ ማንቃት ይፈልጋሉ?",
+    "activateUserDescription": "ይህ ተጠቃሚ መድረኩን ማግኘት ይችላል",
+    "activating": "በመንቃት ላይ...",
+    "yesActivate": "አዎ, አንቃ",
+    "statistics": "ስታቲስቲቅሬታ ",
+    "totalOrganizations": "ድርጅቶች ጠቅላላ ብዛት",
+    "recentOrganizations": "ቅርብ ጊዜ የተመዘገቡ ድርጅቶች",
+    "viewMore": "ተጨማሪ ይመልከቱ →",
+    "recentActivities": "ቅርብ ጊዜ እንቅስቃሴዎች",
+    "moreActivities": "ተጨማሪ እንቅስቃሴዎች →",
+    "noRecentActivities": "ምንም ቅርብ ጊዜ እንቅስቃሴ አልተገኘም"
+  },
+  "userIncomingretun": {
+    "View Detail": "ዝርዝር እይ",
+    "Open actions menu": "የእርምጃ ምናሌ ክፈት",
+    "Actions": "እርምጃዎች",
+    "convertRecord": "መዝገብ ቀይር",
+    "return": "መመለስ",
+    "returning": "በመመለስ ላይ...",
+    "returing": "በመመለስ ላይ...",
+    "conformReturn": "መመለስን አረጋግጥ",
+    "Please provide a reason for returning this record.": "እባክዎ ይህን መዝገብ ለማመለስ ምክንያት ያስገቡ።",
+    "ReturnComment": "የመመለስ አስተያየት",
+    "EnterReturnReason": "የመመለስ ምክንያት አስገባ",
+    "CommentRequired": "አስተያየት አስፈላጊ ነው",
+    "RecordReturnedSuccessfully": "መዝገቡ በተሳካ ሁኔታ ተመለሰ",
+    "FailedToReturnRecord": "መዝገቡን ማመለስ አልተሳካም"
+  },
+  "okrDashboard": {
+    "brandEyebrow": "የግብ ትንታኔ",
+    "title": "የOKR አፈጻጸም ዳሽቦርድ",
+    "description": "የከፍተኛ አፈጻጸም፣ የክፍል እንቅስቃሴ እና የሚመጡ OKR ትንታኔዎች የተጠናከረ እይታ።",
+    "planYear": "የእቅድ ዓመት",
+    "notSelected": "አልተመረጠም",
+    "topPerformerEmployee": "ከፍተኛ አፈጻጸም ያለው ሰራተኛ",
+    "topPerformerDepartment": "ከፍተኛ አፈጻጸም ያለው ክፍል",
+    "employeePlaceholderName": "የAPI ውሂብ በመጠበቅ ላይ",
+    "departmentPlaceholderName": "የAPI ውሂብ በመጠበቅ ላይ",
+    "employeeHelper": "የዳሽቦርድ API ሲገናኝ መሪው ሰራተኛ እዚህ ይታያል።",
+    "departmentHelper": "የዳሽቦርድ API ሲገናኝ ከፍተኛ አፈጻጸም ያለው ክፍል እዚህ ይታያል።",
+    "employeeScore": "የሰራተኛ ውጤት",
+    "departmentScore": "የክፍል ውጤት",
+    "placeholderOneTitle": "ስትራቴጂያዊ ምልክት",
+    "placeholderOneHelper": "ከትንታኔ API ለሚመጣው ቀጣይ OKR ግንዛቤ ተዘጋጅቷል።",
+    "placeholderTwoTitle": "የአፈጻጸም ጤና",
+    "placeholderTwoHelper": "ለስርጭት፣ አደጋ ወይም የማጠናቀቅ ግንዛቤ ተዘጋጅቷል።",
+    "comingSoon": "በቅርቡ",
+    "waitingForApi": "API በመጠበቅ ላይ",
+    "analyticsTitle": "የOKR ትንታኔ",
+    "analyticsDescription": "የዳሽቦርድ ምስልን ለማየት የቀን ክልል እና የግራፍ አይነት ይምረጡ።",
+    "dateRange": "የቀን ክልል",
+    "chartType": "የግራፍ አይነት",
+    "thisMonth": "ይህ ወር",
+    "thisQuarter": "ይህ ሩብ ዓመት",
+    "thisYear": "ይህ ዓመት",
+    "customRange": "ብጁ ክልል",
+    "barChart": "የአሞሌ ግራፍ",
+    "lineChart": "የመስመር ግራፍ",
+    "areaChart": "የአካባቢ ግራፍ",
+    "chartTitle": "የአፈጻጸም አዝማሚያ",
+    "chartSubtitle": "የAPI ምላሽ እስኪዘጋጅ ድረስ የናሙና ውሂብ ይታያል።",
+    "sampleData": "የናሙና ውሂብ",
+    "achievement": "ስኬት",
+    "target": "ግብ"
+  }
+}
diff --git a/apps/edr-freight-web/backoffice/src/main.tsx b/apps/edr-freight-web/backoffice/src/main.tsx
index 9cf9f6c35..2e6b830f5 100644
--- a/apps/edr-freight-web/backoffice/src/main.tsx
+++ b/apps/edr-freight-web/backoffice/src/main.tsx
@@ -10,6 +10,10 @@ import "@edr/ui-common/theme.css";
 
 import { Toaster } from "react-hot-toast";
 
+// Initialize i18next before first paint so the detected/persisted language
+// applies immediately (the vendored IAM UI also imports this via @/i18n).
+import "./i18n";
+
 import App from "./App";
 import { ErrorBoundary } from "./components/ErrorBoundary";
 import { AuthProvider } from "./auth/AuthProvider";
diff --git a/apps/edr-freight-web/backoffice/src/pages/ActivityLogPage.tsx b/apps/edr-freight-web/backoffice/src/pages/ActivityLogPage.tsx
new file mode 100644
index 000000000..9e3f53da3
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/ActivityLogPage.tsx
@@ -0,0 +1,268 @@
+import { useState, useEffect, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import i18n from "i18next";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import {
+  Table,
+  TableHeader,
+  TableRow,
+  TableHead,
+  TableBody,
+  TableCell,
+} from "@/shared/common/ui/table";
+import { Input } from "@/shared/common/ui/input";
+import { Button } from "@/shared/common/ui/button";
+import { Search, RefreshCw, ChevronLeft, ChevronRight } from "lucide-react";
+import { listAuditLogExtensions } from "@/shared/services/audit/audit.api";
+
+interface ActivityLog {
+  id: string;
+  createdAt: string;
+  entityName: string;
+  queryMethod: "INSERT" | "UPDATE" | "DELETE" | string;
+  user: {
+    id: string;
+    name: {
+      am: string;
+      en: string;
+    };
+    email: string;
+    username?: string;
+  };
+}
+
+const ITEMS_PER_PAGE = 10;
+
+export default function ActivityLogPage() {
+  const { t } = useTranslation();
+  const [searchQuery, setSearchQuery] = useState("");
+  const [allLogs, setAllLogs] = useState<ActivityLog[]>([]);
+  const [filteredLogs, setFilteredLogs] = useState<ActivityLog[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const fetchAuditLogs = useCallback(async () => {
+    setLoading(true);
+    try {
+      // Fetch all 1000 records from super admin endpoint
+      const data = await listAuditLogExtensions(
+        "/audit-log-extensions/audit/superAdmin",
+        {
+          skip: 0,
+          take: 1000,
+          orderBy: "createdAt:DESC",
+        }
+      );
+
+      const logs = (data.items || []) as ActivityLog[];
+      setAllLogs(logs);
+      setCurrentPage(1);
+    } catch (error: any) {
+      console.error("Error fetching audit logs:", error);
+      setAllLogs([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchAuditLogs();
+    // Refresh every 30 seconds
+    const interval = setInterval(fetchAuditLogs, 30000);
+    return () => clearInterval(interval);
+  }, [fetchAuditLogs]);
+
+  // Paginate the logs whenever currentPage changes
+  useEffect(() => {
+    const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+    const endIndex = startIndex + ITEMS_PER_PAGE;
+    let filtered = allLogs.slice(startIndex, endIndex);
+
+    // Apply search filter
+    if (searchQuery) {
+      filtered = filtered.filter(
+        (log) =>
+          log.entityName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          log.user.name.am.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          log.user.name.en.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          log.user.email.toLowerCase().includes(searchQuery.toLowerCase()),
+      );
+    }
+
+    setFilteredLogs(filtered);
+  }, [allLogs, currentPage, searchQuery]);
+
+  const totalPages = Math.ceil(allLogs.length / ITEMS_PER_PAGE);
+  const hasNextPage = currentPage < totalPages;
+  const hasPrevPage = currentPage > 1;
+
+  return (
+    <div className="p-6 space-y-6">
+      <Card className="shadow-lg border-gray-200 dark:border-gray-700">
+        <CardHeader>
+          <div className="flex justify-between items-center">
+            <CardTitle className="text-xl font-semibold">
+              {t("activityLogPage.title")}
+            </CardTitle>
+            <Button
+              variant="outline"
+              onClick={fetchAuditLogs}
+              disabled={loading}
+              className="flex items-center gap-2"
+            >
+              <RefreshCw className={`w-4 h-4 ${loading ? "animate-spin" : ""}`} />
+              {t("common.refresh", "Refresh")}
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center gap-4 mb-6">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400 dark:text-gray-500" />
+              <Input
+                placeholder={t("activityLogPage.searchPlaceholder")}
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-10"
+              />
+            </div>
+          </div>
+
+          <div className="rounded-md border border-gray-200 dark:border-gray-700">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-[180px]">
+                    {t("activityLogPage.table.time")}
+                  </TableHead>
+                  <TableHead className="w-[400px]">
+                    {t("activityLogPage.table.description")}
+                  </TableHead>
+                  <TableHead>
+                    {t("activityLogPage.table.performedBy")}
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {loading ? (
+                  <TableRow>
+                    <TableCell colSpan={5} className="h-24 text-center">
+                      <div className="flex items-center justify-center gap-2">
+                        <RefreshCw className="h-4 w-4 animate-spin" />
+                        <span>{t("common.loading", "Loading...")}</span>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ) : filteredLogs.length > 0 ? (
+                  filteredLogs.map((log) => {
+                    const userName =
+                      i18n.language === "am" ? log.user.name.am : log.user.name.en;
+                    const entityLabel = log.entityName.replace(/_/g, " ");
+                    const actionVerb =
+                      log.queryMethod.toLowerCase() === "insert"
+                        ? "created"
+                        : log.queryMethod.toLowerCase() === "update"
+                        ? "updated"
+                        : log.queryMethod.toLowerCase() === "delete"
+                        ? "deleted"
+                        : log.queryMethod.toLowerCase();
+                    const timestamp = new Date(log.createdAt).toLocaleString(
+                      i18n.language,
+                      {
+                        year: "numeric",
+                        month: "short",
+                        day: "numeric",
+                        hour: "2-digit",
+                        minute: "2-digit",
+                      }
+                    );
+
+                    return (
+                      <TableRow key={log.id}>
+                        <TableCell className="font-medium">{timestamp}</TableCell>
+                        <TableCell>
+                          <p className="text-sm text-gray-900 dark:text-gray-100">
+                            <span className="font-semibold">{userName}</span>
+                            {" "}
+                            <span className="text-gray-600 dark:text-gray-300">
+                              {actionVerb}
+                            </span>
+                            {" "}
+                            <span className="text-gray-900 dark:text-gray-100 font-medium">
+                              {entityLabel}
+                            </span>
+                            {" "}
+                            <span className="text-gray-500 dark:text-gray-400">at {timestamp}</span>
+                          </p>
+                        </TableCell>
+                        <TableCell>
+                          <div>
+                            <p className="font-medium">{userName}</p>
+                            <p className="text-xs text-gray-500">{log.user.email}</p>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })
+                ) : (
+                  <TableRow>
+                    <TableCell
+                      colSpan={3}
+                      className="h-24 text-center text-muted-foreground"
+                    >
+                      {t("activityLogPage.table.noLogs")}
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+
+          {/* Pagination Footer */}
+          {allLogs.length > 0 && (
+            <div className="flex items-center justify-between mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+              <div className="text-xs text-gray-600 dark:text-gray-400">
+                {t("common.showing", "Showing")} {(currentPage - 1) * ITEMS_PER_PAGE + 1}-
+                {Math.min(currentPage * ITEMS_PER_PAGE, allLogs.length)}{" "}
+                {t("common.of", "of")} {allLogs.length}
+              </div>
+
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setCurrentPage(currentPage - 1)}
+                  disabled={!hasPrevPage || loading}
+                  className="h-8 w-8 p-0"
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                </Button>
+
+                <div className="flex items-center gap-1">
+                  <span className="text-xs font-medium text-gray-700 dark:text-gray-300 px-2">
+                    {currentPage} / {totalPages || 1}
+                  </span>
+                </div>
+
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setCurrentPage(currentPage + 1)}
+                  disabled={!hasNextPage || loading}
+                  className="h-8 w-8 p-0"
+                >
+                  <ChevronRight className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/pages/AddSitePage.tsx b/apps/edr-freight-web/backoffice/src/pages/AddSitePage.tsx
new file mode 100644
index 000000000..fdd26eca4
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/AddSitePage.tsx
@@ -0,0 +1,7 @@
+import SitesPage from "@/super-admin/components/sites/SitesPage";
+
+const AddSitePage = () => {
+  return <SitesPage />;
+};
+
+export default AddSitePage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/AdvancedDashboardPage.tsx b/apps/edr-freight-web/backoffice/src/pages/AdvancedDashboardPage.tsx
new file mode 100644
index 000000000..429f931e6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/AdvancedDashboardPage.tsx
@@ -0,0 +1,141 @@
+import React, { useState } from "react";
+import { Button } from "@/shared/common/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import { ChevronDown } from "lucide-react";
+import {
+  PermittedDashboardItem,
+  DashaboardParam,
+} from "@/record-management/services/api/advancedDashboardService";
+import { useAdvancedDashboardHook } from "@/shared/hooks/useAdvancedDashboardHook";
+import useSettings from "@/record-management/components/hooks/useSettings";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { getFormattedDashboardLabel } from "@/performance-management/utils/dashboardUtils";
+import { PositionDto } from "@/record-management/dto/userRecords/usersDto";
+
+const AdvancedDashboardPage = () => {
+  const [selectedDashboard, setSelectedDashboard] =
+    useState<PermittedDashboardItem | null>(null);
+  const [selectedParameters, setSelectedParameters] = useState<
+    Record<string, any>
+  >({});
+  const localizedName = useLocalizedName();
+
+  const {
+    permittedDashboards,
+    dashboardUrl,
+    isLoadingPermitted,
+    isLoadingUrl,
+  } = useAdvancedDashboardHook(selectedDashboard?.id);
+
+  const { allScopedDepartments, allScopedEmployees } = useSettings();
+
+  const positionOptions = Array.isArray(allScopedDepartments)
+    ? allScopedDepartments.map((pos: PositionDto) => ({
+        label: localizedName(pos.name) || "N/A",
+        value: pos.id,
+      }))
+    : [];
+
+  const employeeOptions = Array.isArray(allScopedEmployees)
+    ? allScopedEmployees.map((emp: any) => ({
+        label: localizedName(emp.name) || "N/A",
+        value: emp.id,
+      }))
+    : [];
+
+  const handleParameterSelect = (key: string, value: string) => {
+    setSelectedParameters((prev) => ({
+      ...prev,
+      [key]: value,
+    }));
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Dashboard + Position + Employee in a row */}
+      <div className="flex flex-wrap gap-4 items-start">
+        {/* Dashboard Dropdown */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="outline"
+              className="flex items-center justify-between w-60"
+              disabled={isLoadingPermitted}>
+              {isLoadingPermitted
+                ? "Loading dashboards..."
+                : getFormattedDashboardLabel(selectedDashboard?.name, "am") ||
+                  "Select Dashboard"}
+              <ChevronDown className="ml-2 h-4 w-4 opacity-70" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-60">
+            <DropdownMenuLabel>Available Dashboards</DropdownMenuLabel>
+            {permittedDashboards?.items.map((dashboard) => (
+              <DropdownMenuItem
+                key={dashboard.id}
+                onClick={() => {
+                  setSelectedDashboard(dashboard);
+                  setSelectedParameters({}); // reset parameters
+                }}>
+                {getFormattedDashboardLabel(dashboard.name, "am")}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        {/* Position Dropdown */}
+        {selectedDashboard?.params?.includes(DashaboardParam.POSITION) && (
+          <select
+            className="border rounded-md w-60 p-2"
+            value={selectedParameters["position"] || ""}
+            onChange={(e) => handleParameterSelect("position", e.target.value)}>
+            <option value="">Select Position</option>
+            {positionOptions.map((pos) => (
+              <option key={pos.value} value={pos.value}>
+                {pos.label}
+              </option>
+            ))}
+          </select>
+        )}
+
+        {/* Employee Dropdown */}
+        {selectedDashboard?.params?.includes(DashaboardParam.EMPLOYEE) && (
+          <select
+            className="border rounded-md w-60 p-2"
+            value={selectedParameters["employee"] || ""}
+            onChange={(e) => handleParameterSelect("employee", e.target.value)}>
+            <option value="">Select Employee</option>
+            {employeeOptions.map((emp) => (
+              <option key={emp.value} value={emp.value}>
+                {emp.label}
+              </option>
+            ))}
+          </select>
+        )}
+      </div>
+
+      {/* Dashboard iframe */}
+      {isLoadingUrl ? (
+        <p>Loading dashboard...</p>
+      ) : dashboardUrl ? (
+        <iframe
+          src={dashboardUrl?.iframeUrl}
+          width="100%"
+          height="800"
+          className="rounded-xl border"
+          title="Advanced Dashboard"
+        />
+      ) : (
+        <p className="text-gray-500">Select a dashboard to view</p>
+      )}
+    </div>
+  );
+};
+
+export default AdvancedDashboardPage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/ArchiveUsersPage.tsx b/apps/edr-freight-web/backoffice/src/pages/ArchiveUsersPage.tsx
new file mode 100644
index 000000000..93d68b90d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/ArchiveUsersPage.tsx
@@ -0,0 +1,114 @@
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import { useAuth } from "@/shared/context/AuthContext";
+import { useArchivedUsers } from "@/super-admin/hooks/useArchivedUsers";
+import { ArchivedUserColumnDefn } from "@/user-management/components/content/ArchivedUserColumnDefn";
+import { UnitDto } from "@/user-management/dto/unit/unitDto";
+import { useUnit } from "@/user-management/hooks/useUnit";
+import { useEffect, useState } from "react";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { t } from "i18next";
+
+const ArchiveUsersPage = () => {
+  const { user } = useAuth();
+  const { getAccessibleList } = useUnit();
+  const [pageIndex, setPageIndex] = useState(0);
+  const pageSize = 10;
+  const localizedName = useLocalizedName();
+  const organizationId =
+    user?.employee && user.employee.length > 0
+      ? user.employee[0].organizationId
+      : undefined;
+  const { data: unitsResponse } = organizationId
+    ? getAccessibleList(organizationId, {
+        take: 300,
+        skip: 0,
+      })
+    : { data: undefined };
+
+  const [selectedUnitId, setSelectedUnitId] = useState<string>(
+    unitsResponse?.data?.items[0]?.id || "All",
+  );
+  useEffect(() => {
+    if (unitsResponse?.data?.items.length > 0) {
+      setSelectedUnitId(unitsResponse?.data.items[0].id);
+    }
+  }, [unitsResponse?.data?.items]);
+  const handlePageChange = (newPage: number) => {
+    setPageIndex(newPage);
+  };
+  const { data, refetch } = useArchivedUsers(selectedUnitId, {
+    take: pageSize,
+    skip: pageIndex * pageSize,
+  });
+
+  return (
+    <div className="p-6 space-y-6">
+      <Card className="col-span-2 shadow-none border-none bg-transparent px-0">
+        <CardHeader className="flex flex-row justify-between items-center px-0">
+          <CardTitle className="text-xl font-semibold ">
+            {t("setting.archivedUsers")}
+          </CardTitle>
+        </CardHeader>
+        {unitsResponse?.data?.items?.length > 0 && (
+          <div className="mb-4 w-1/2">
+            <label className="block text-sm font-medium text-gray-700">
+              {t("organization.selectUnit")}
+            </label>
+            <Select
+              value={selectedUnitId}
+              onValueChange={(value) => setSelectedUnitId(value)}
+            >
+              <SelectTrigger className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm [&>span]:truncate">
+                <SelectValue placeholder="Select a Unit" />
+              </SelectTrigger>
+              <SelectContent>
+                {unitsResponse?.data.items.map((unit: UnitDto) => (
+                  <SelectItem key={unit.id} value={unit.id}>
+                    <span className="block truncate max-w-70">{localizedName(unit.name)}</span>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+        <CardContent className="px-0">
+          <AdvancedTable
+            columns={ArchivedUserColumnDefn}
+            data={data?.items || []}
+            tableName="ArchivedUsers"
+            toolBarPosition="right"
+            itemCount={data?.count || 0}
+            pageIndex={pageIndex}
+            onPageChange={handlePageChange}
+            nextFunction={
+              data?.count && data.count > (pageIndex + 1) * pageSize
+                ? () => handlePageChange(pageIndex + 1)
+                : () => {}
+            }
+            prevFunction={
+              pageIndex > 0
+                ? () => handlePageChange(Math.max(pageIndex - 1, 0))
+                : () => {}
+            }
+            refresh={refetch}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default ArchiveUsersPage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/ArchivedUnitsPositionsPage.tsx b/apps/edr-freight-web/backoffice/src/pages/ArchivedUnitsPositionsPage.tsx
new file mode 100644
index 000000000..f6bccd67f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/ArchivedUnitsPositionsPage.tsx
@@ -0,0 +1,552 @@
+import { useMemo, useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { ArchiveRestore, Building2, UserSquare2, Trash2, Search, Filter } from "lucide-react";
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useUnit } from "@/user-management/hooks/useUnit";
+import {
+  useArchivedPositions,
+  useArchivedUnits,
+  useArchiveActions,
+} from "@/user-management/hooks/useArchived";
+import { UnitDto } from "@/user-management/dto/unit/unitDto";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import { toast } from "sonner";
+import { deleteUnit } from "@/user-management/services/api/unitService";
+import { useQueryClient } from "@tanstack/react-query";
+import { useMyAdminOrganizations } from "@/user-management/hooks/useOrgAdminOrganizations";
+import { Badge } from "@/shared/common/ui/badge";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+
+type Tab = "units" | "positions";
+
+const ArchivedUnitsPositionsPage = () => {
+  const { t } = useTranslation();
+  const localizedName = useLocalizedName();
+  const queryClient = useQueryClient();
+  
+  const { getAccessibleList } = useUnit();
+  const { organizations: myAdminOrganizations } = useMyAdminOrganizations();
+
+  const [activeTab, setActiveTab] = useState<Tab>("units");
+  const [selectedOrgId, setSelectedOrgId] = useState<string>("");
+  const [selectedUnitId, setSelectedUnitId] = useState<string>("");
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
+  const [unitToDelete, setUnitToDelete] = useState<{ id: string; name: string } | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const { data: unitsResponse, isLoading: isLoadingUnits } = getAccessibleList(
+    selectedOrgId || "", 
+    { take: 300, skip: 0 }, 
+    !!selectedOrgId
+  );
+
+  const unitList: UnitDto[] = selectedOrgId ? (unitsResponse?.data?.items ?? []) : [];
+
+  const { data: archivedUnitsData, refetch: refetchArchivedUnits, isLoading: isLoadingArchivedUnits } =
+    useArchivedUnits(selectedOrgId || undefined);
+  const { data: archivedPositionsData, refetch: refetchArchivedPositions, isLoading: isLoadingArchivedPositions } =
+    useArchivedPositions(selectedUnitId || undefined);
+
+  const { restoreUnit, isRestoringUnit, restorePosition, isRestoringPosition } =
+    useArchiveActions();
+
+  useEffect(() => {
+    if (activeTab === "units" && !selectedOrgId && myAdminOrganizations.length > 0) {
+      setSelectedOrgId(myAdminOrganizations[0].id);
+    }
+  }, [activeTab, myAdminOrganizations.length]);
+
+  useEffect(() => {
+    if (activeTab === "positions" && !selectedUnitId && unitList.length > 0) {
+      setSelectedUnitId(unitList[0].id);
+    }
+  }, [activeTab, unitList.length]);
+
+  const handlePermanentDelete = async () => {
+    if (!unitToDelete) return;
+
+    setIsDeleting(true);
+    try {
+      await deleteUnit(unitToDelete.id);
+      toast.success(t("archive.unitDeletedPermanently", "Unit permanently deleted"));
+      setDeleteConfirmOpen(false);
+      setUnitToDelete(null);
+      queryClient.invalidateQueries({ queryKey: ["archived-units"] });
+      refetchArchivedUnits();
+    } catch (error: any) {
+      if (error?.response?.status === 400 && error?.response?.data?.message) {
+        const errorMessage = error?.response?.data?.message;
+        
+        if (errorMessage.includes("Referenced Entity") || errorMessage.includes("referenced")) {
+          toast.error(
+            t("archive.cannotDeleteUnitWithPositions", "Cannot delete unit with related positions"),
+            {
+              description: t("archive.deletePositionsFirst", "Please delete or reassign all positions first."),
+              duration: 5000
+            }
+          );
+        } else {
+          toast.error(t("archive.deleteUnitFailed", "Failed to delete unit"));
+        }
+      } else {
+        toast.error(t("archive.deleteUnitFailed", "Failed to delete unit"));
+      }
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const archivedUnits: any[] = useMemo(
+    () => archivedUnitsData?.items ?? archivedUnitsData ?? [],
+    [archivedUnitsData],
+  );
+  const archivedPositions: any[] = useMemo(
+    () => archivedPositionsData?.items ?? archivedPositionsData ?? [],
+    [archivedPositionsData],
+  );
+
+  const unitColumns = [
+    {
+      id: "name",
+      header: t("organization.name", "Name"),
+      cell: ({ row }: any) => (
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
+            <Building2 className="h-5 w-5 text-primary" />
+          </div>
+          <div>
+            <div className="font-medium text-gray-900">
+              {localizedName(row.original?.name) || "—"}
+            </div>
+            <div className="text-xs text-gray-500">
+              {t("archive.archivedAt", "Archived")}: {new Date(row.original?.archivedAt).toLocaleDateString()}
+            </div>
+          </div>
+        </div>
+      ),
+    },
+    {
+      id: "key",
+      header: t("organization.key", "Key"),
+      cell: ({ row }: any) => (
+        <Badge variant="outline" className="font-mono bg-gray-50">
+          {row.original?.key || "—"}
+        </Badge>
+      ),
+    },
+    {
+      id: "status",
+      header: t("common.status", "Status"),
+      cell: ({ row }: any) => (
+        <Badge variant="destructive" className="bg-amber-100 text-amber-800 hover:bg-amber-100">
+          {t("archive.archived", "Archived")}
+        </Badge>
+      ),
+    },
+    {
+      id: "actions",
+      header: t("userIncomingretun.Actions", "Actions"),
+      cell: ({ row }: any) => (
+        <div className="flex gap-2 justify-end">
+          <Button
+            size="sm"
+            variant="ghost"
+            disabled={isRestoringUnit}
+            onClick={() => restoreUnit(row.original.id)}>
+            <ArchiveRestore className="h-4 w-4 text-emerald-600" />
+          </Button>
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={() => {
+              setUnitToDelete({
+                id: row.original.id,
+                name: localizedName(row.original?.name),
+              });
+              setDeleteConfirmOpen(true);
+            }}>
+            <Trash2 className="h-4 w-4 text-red-600" />
+          </Button>
+        </div>
+      ),
+    },
+  ];
+
+  const positionColumns = [
+    {
+      id: "name",
+      header: t("organization.name", "Name"),
+      cell: ({ row }: any) => (
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
+            <UserSquare2 className="h-5 w-5 text-blue-600" />
+          </div>
+          <div>
+            <div className="font-medium text-gray-900">
+              {localizedName(row.original?.name) || "—"}
+            </div>
+            <div className="text-xs text-gray-500">
+              {t("archive.archivedAt", "Archived")}: {new Date(row.original?.archivedAt).toLocaleDateString()}
+            </div>
+          </div>
+        </div>
+      ),
+    },
+    {
+      id: "key",
+      header: t("organization.key", "Key"),
+      cell: ({ row }: any) => (
+        <Badge variant="outline" className="font-mono bg-gray-50">
+          {row.original?.key || "—"}
+        </Badge>
+      ),
+    },
+    {
+      id: "status",
+      header: t("common.status", "Status"),
+      cell: ({ row }: any) => (
+        <Badge variant="destructive" className="bg-amber-100 text-amber-800 hover:bg-amber-100">
+          {t("archive.archived", "Archived")}
+        </Badge>
+      ),
+    },
+    {
+      id: "actions",
+      header: t("userIncomingretun.Actions", "Actions"),
+      cell: ({ row }: any) => (
+        <div className="flex gap-2 justify-end">
+          <Button
+            size="sm"
+            variant="outline"
+            disabled={isRestoringPosition}
+            onClick={() => restorePosition(row.original.id)}
+            className="gap-1.5 border-emerald-200 text-emerald-700 hover:bg-emerald-50 hover:text-emerald-800">
+            <ArchiveRestore className="h-4 w-4" />
+            <span>{t("archive.restore", "Restore")}</span>
+          </Button>
+        </div>
+      ),
+    },
+  ];
+
+  const isLoading = activeTab === "units" ? isLoadingArchivedUnits : isLoadingArchivedPositions;
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-white p-6">
+      <div className="max-w-7xl mx-auto space-y-6">
+        {/* Header */}
+        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+          <div>
+            <h1 className="text-3xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent">
+              {t("archive.archivedItems", "Archived Items")}
+            </h1>
+            <p className="text-sm text-gray-500 mt-1 flex items-center gap-2">
+              <span className="w-1.5 h-1.5 rounded-full bg-gray-400"></span>
+              {t("archive.manageArchivedContent", "Restore or permanently delete archived content")}
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <Badge variant="secondary" className="text-sm">
+              {activeTab === "units" ? archivedUnits.length : archivedPositions.length} {t("common.items", "items")}
+            </Badge>
+          </div>
+        </div>
+
+        {/* Tab Buttons */}
+        <div className="flex gap-2 border-b border-gray-200 bg-white rounded-t-xl p-1 shadow-sm">
+          <Button
+            variant={activeTab === "units" ? "default" : "ghost"}
+            onClick={() => setActiveTab("units")}
+            className={`flex-1 md:flex-none gap-2 transition-all ${
+              activeTab === "units" 
+                ? "shadow-md" 
+                : "hover:bg-gray-50"
+            }`}>
+            <Building2 className="h-4 w-4" />
+            <span>{t("archive.archivedUnits", "Archived Units")}</span>
+            {activeTab === "units" && (
+              <span className="ml-1 text-xs bg-white/20 px-2 py-0.5 rounded-full">
+                {archivedUnits.length}
+              </span>
+            )}
+          </Button>
+          <Button
+            variant={activeTab === "positions" ? "default" : "ghost"}
+            onClick={() => setActiveTab("positions")}
+            className={`flex-1 md:flex-none gap-2 transition-all ${
+              activeTab === "positions" 
+                ? "shadow-md" 
+                : "hover:bg-gray-50"
+            }`}>
+            <UserSquare2 className="h-4 w-4" />
+            <span>{t("archive.archivedPositions", "Archived Positions")}</span>
+            {activeTab === "positions" && (
+              <span className="ml-1 text-xs bg-white/20 px-2 py-0.5 rounded-full">
+                {archivedPositions.length}
+              </span>
+            )}
+          </Button>
+        </div>
+
+        {/* Filter Section */}
+        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+          <div className="flex flex-col md:flex-row md:items-end gap-4">
+            <div className="flex-1">
+              <label className="block text-sm font-medium text-gray-700 mb-1.5">
+                {activeTab === "units" 
+                  ? t("organization.selectOrganization", "Select Organization")
+                  : t("organization.selectUnit", "Select Unit")}
+              </label>
+              {activeTab === "units" ? (
+                myAdminOrganizations.length === 0 ? (
+                  <Skeleton className="h-10 w-full" />
+                ) : (
+                  <Select
+                    value={selectedOrgId}
+                    onValueChange={(value) => setSelectedOrgId(value)}>
+                    <SelectTrigger className="w-full border-gray-300 focus:ring-2 focus:ring-primary/20">
+                      <SelectValue
+                        placeholder={t("organization.selectOrganization")}
+                      />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {myAdminOrganizations.map((org: any) => (
+                        <SelectItem key={org.id} value={org.id}>
+                          <div className="flex items-center gap-2">
+                            <Building2 className="h-4 w-4 text-gray-400" />
+                            {localizedName(org.name)}
+                          </div>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )
+              ) : (
+                unitList.length === 0 ? (
+                  <div className="text-sm text-gray-500 text-center py-2">
+                    {isLoadingUnits ? (
+                      <Skeleton className="h-10 w-full" />
+                    ) : (
+                      t("common.noData", "No units available")
+                    )}
+                  </div>
+                ) : (
+                  <Select
+                    value={selectedUnitId}
+                    onValueChange={(value) => setSelectedUnitId(value)}>
+                    <SelectTrigger className="w-full border-gray-300 focus:ring-2 focus:ring-primary/20">
+                      <SelectValue placeholder={t("organization.selectUnit")} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {unitList.map((unit) => (
+                        <SelectItem key={unit.id} value={unit.id}>
+                          <div className="flex items-center gap-2">
+                            <Building2 className="h-4 w-4 text-gray-400" />
+                            {localizedName(unit.name)}
+                          </div>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )
+              )}
+            </div>
+            {activeTab === "units" && (
+              <div className="flex items-center gap-2 text-sm text-gray-500">
+                <Filter className="h-4 w-4" />
+                <span>{t("common.filter", "Filter")}</span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Table */}
+        <Card className="shadow-sm border border-gray-200 overflow-hidden">
+          <CardHeader className="bg-gray-50/50 border-b border-gray-200 px-6 py-4">
+            <div className="flex items-center justify-between">
+              <CardTitle className="text-base font-semibold flex items-center gap-2">
+                {activeTab === "units" ? (
+                  <>
+                    <Building2 className="h-5 w-5 text-primary" />
+                    {t("archive.archivedUnits", "Archived Units")}
+                  </>
+                ) : (
+                  <>
+                    <UserSquare2 className="h-5 w-5 text-blue-600" />
+                    {t("archive.archivedPositions", "Archived Positions")}
+                  </>
+                )}
+              </CardTitle>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  if (activeTab === "units") {
+                    refetchArchivedUnits();
+                  } else {
+                    refetchArchivedPositions();
+                  }
+                }}
+                className="text-gray-500 hover:text-gray-700">
+                <span className="sr-only">{t("common.refresh", "Refresh")}</span>
+                <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                </svg>
+              </Button>
+            </div>
+          </CardHeader>
+          <CardContent className="p-0">
+            {isLoading ? (
+              <div className="p-8 space-y-3">
+                {[...Array(3)].map((_, i) => (
+                  <div key={i} className="flex items-center gap-4">
+                    <Skeleton className="h-12 w-12 rounded-full" />
+                    <div className="space-y-2 flex-1">
+                      <Skeleton className="h-4 w-1/3" />
+                      <Skeleton className="h-3 w-1/4" />
+                    </div>
+                    <div className="flex gap-2">
+                      <Skeleton className="h-8 w-20" />
+                      <Skeleton className="h-8 w-20" />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <>
+                {activeTab === "units" ? (
+                  archivedUnits.length === 0 ? (
+                    <div className="p-8 text-center">
+                      <div className="mx-auto w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-4">
+                        <Building2 className="h-8 w-8 text-gray-400" />
+                      </div>
+                      <h3 className="text-lg font-medium text-gray-900 mb-1">
+                        {t("common.noData", "No archived units")}
+                      </h3>
+                      <p className="text-sm text-gray-500">
+                        {t("archive.noArchivedUnits", "No archived units found for this organization")}
+                      </p>
+                    </div>
+                  ) : (
+                    <AdvancedTable
+                      columns={unitColumns as any}
+                      data={archivedUnits}
+                      tableName="ArchivedUnits"
+                      toolBarPosition="right"
+                      itemCount={archivedUnits.length}
+                      pageIndex={0}
+                      onPageChange={() => {}}
+                      nextFunction={() => {}}
+                      prevFunction={() => {}}
+                      refresh={refetchArchivedUnits}
+                    />
+                  )
+                ) : (
+                  archivedPositions.length === 0 ? (
+                    <div className="p-8 text-center">
+                      <div className="mx-auto w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-4">
+                        <UserSquare2 className="h-8 w-8 text-gray-400" />
+                      </div>
+                      <h3 className="text-lg font-medium text-gray-900 mb-1">
+                        {t("common.noData", "No archived positions")}
+                      </h3>
+                      <p className="text-sm text-gray-500">
+                        {t("archive.noArchivedPositions", "No archived positions found for this unit")}
+                      </p>
+                    </div>
+                  ) : (
+                    <AdvancedTable
+                      columns={positionColumns as any}
+                      data={archivedPositions}
+                      tableName="ArchivedPositions"
+                      toolBarPosition="right"
+                      itemCount={archivedPositions.length}
+                      pageIndex={0}
+                      onPageChange={() => {}}
+                      nextFunction={() => {}}
+                      prevFunction={() => {}}
+                      refresh={refetchArchivedPositions}
+                    />
+                  )
+                )}
+              </>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Delete Confirmation Dialog */}
+        <AlertDialog open={deleteConfirmOpen} onOpenChange={setDeleteConfirmOpen}>
+          <AlertDialogContent className="sm:max-w-md">
+            <AlertDialogHeader>
+              <div className="mx-auto w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mb-4">
+                <Trash2 className="h-6 w-6 text-red-600" />
+              </div>
+              <AlertDialogTitle className="text-center">
+                {t("archive.deletePermanentlyConfirm", "Permanently delete unit?")}
+              </AlertDialogTitle>
+              <AlertDialogDescription className="text-center">
+                <span className="block mb-2">
+                  {t("archive.deletePermanentlyDescription", "This will permanently delete")}
+                </span>
+                <span className="font-semibold text-gray-900 block text-base">
+                  "{unitToDelete?.name}"
+                </span>
+                <span className="block mt-2 text-red-600 text-sm font-medium">
+                  {t("archive.cannotBeUndone", "This action cannot be undone.")}
+                </span>
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter className="flex gap-2">
+              <AlertDialogCancel disabled={isDeleting} className="flex-1">
+                {t("common.Cancel")}
+              </AlertDialogCancel>
+              <AlertDialogAction
+                onClick={handlePermanentDelete}
+                disabled={isDeleting}
+                className="flex-1 bg-red-600 hover:bg-red-700 focus:ring-red-500">
+                {isDeleting ? (
+                  <span className="flex items-center gap-2">
+                    <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
+                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
+                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                    </svg>
+                    {t("common.deleting", "Deleting...")}
+                  </span>
+                ) : (
+                  t("archive.deletePermanently", "Delete Permanently")
+                )}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
+    </div>
+  );
+};
+
+export default ArchivedUnitsPositionsPage;
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/pages/AttachmentSignature.tsx b/apps/edr-freight-web/backoffice/src/pages/AttachmentSignature.tsx
new file mode 100644
index 000000000..5ce423a70
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/AttachmentSignature.tsx
@@ -0,0 +1,230 @@
+import React, { useEffect, useId, useState } from "react";
+import { Building2, PenLine, Settings, ShieldCheck } from "lucide-react";
+import { useAuth } from "@/shared/context/AuthContext";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useUnit } from "@/user-management/hooks/useUnit";
+import { useUnitConfiguration } from "@/shared/hooks/useUnitConfiguration";
+import { prefixSuffixService } from "@/user-management/services/api/prefixSuffixService";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { Switch } from "@/shared/common/ui/switch";
+import { Label } from "@/shared/common/ui/label";
+import { t } from "i18next";
+
+type UnitOption = {
+  id: string;
+  name?: { am: string; en: string };
+};
+
+type UnitConfigurationItem = {
+  id: string;
+  unitId: string;
+  attachSignatureOnAttachment?: boolean;
+};
+
+const AttachmentSignature = () => {
+  const { user } = useAuth();
+  const queryClient = useQueryClient();
+  const organizationId = user?.employee?.[0]?.organizationId || "";
+  const localizedName = useLocalizedName();
+  const switchId = useId();
+
+  const { getList: getUnitList } = useUnit();
+  const { data: units, isLoading: isLoadingUnits } = getUnitList(
+    organizationId,
+    { take: 1000 },
+  );
+
+  const [selectedUnitId, setSelectedUnitId] = useState("");
+  const [localAttachSignatureValue, setLocalAttachSignatureValue] = useState<
+    boolean | null
+  >(null);
+
+  useEffect(() => {
+    if (!selectedUnitId && units?.data?.items?.length) {
+      setSelectedUnitId(units.data.items[0].id);
+    }
+  }, [selectedUnitId, units]);
+
+  const unitItems = (units?.data?.items ?? []) as UnitOption[];
+  const hasUnits = unitItems.length > 0;
+  const selectedUnitName = unitItems.find(
+    (unit) => unit.id === selectedUnitId,
+  )?.name;
+
+  const { data: unitConfigResponse, isLoading: isLoadingConfig } =
+    useUnitConfiguration(selectedUnitId);
+
+  const unitConfigurations =
+    (unitConfigResponse?.data?.items as UnitConfigurationItem[] | undefined) ||
+    [];
+  const filteredConfig =
+    unitConfigurations.find((item) => item.unitId === selectedUnitId) ||
+    unitConfigurations[0];
+
+  const configValue = Boolean(filteredConfig?.attachSignatureOnAttachment);
+  const isSwitchEnabled = Boolean(filteredConfig?.id);
+  const switchValue =
+    localAttachSignatureValue === null ? configValue : localAttachSignatureValue;
+
+  useEffect(() => {
+    setLocalAttachSignatureValue(null);
+  }, [selectedUnitId, configValue]);
+
+  const { mutate: updateEscalationField, isPending: isUpdatingSignature } =
+    useMutation({
+      mutationFn: ({ id, value }: { id: string; value: boolean }) =>
+        prefixSuffixService.updateInternalPrefixSuffix(
+          {
+            attachSignatureOnAttachment: value,
+            unitId: selectedUnitId,
+          },
+          id,
+        ),
+      onSuccess: () => {
+        queryClient.invalidateQueries({
+          queryKey: ["unitConfig", selectedUnitId],
+        });
+      },
+      onError: () => {
+        setLocalAttachSignatureValue(null);
+      },
+    });
+
+  const handleToggleSignature = (checked: boolean) => {
+    if (!filteredConfig?.id || isUpdatingSignature) return;
+    setLocalAttachSignatureValue(checked);
+    updateEscalationField({
+      id: filteredConfig.id,
+      value: checked,
+    });
+  };
+
+  return (
+    <section className="w-full">
+      <div className="relative overflow-hidden rounded-2xl border border-slate-200/80 bg-gradient-to-br from-white via-slate-50 to-slate-100/60 p-4 shadow-sm sm:p-6 dark:border-slate-700/80 dark:bg-gradient-to-br dark:from-slate-950 dark:via-slate-900 dark:to-slate-900">
+        <div className="relative space-y-5">
+          <header className="flex flex-col gap-2 border-b border-slate-200 pb-4 dark:border-slate-700 sm:flex-row sm:items-start sm:justify-between">
+            <div className="space-y-1">
+              <p className="inline-flex w-fit items-center gap-2 rounded-full bg-white/80 px-3 py-1 text-xs font-medium text-slate-700 ring-1 ring-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:ring-slate-700">
+                <ShieldCheck className="h-3.5 w-3.5" />
+                {t("setting.attachmentSignature.badge")}
+              </p>
+              <h2 className="text-xl font-semibold tracking-tight text-slate-900 dark:text-slate-100 sm:text-2xl flex gap-2">
+                <Settings className="h-8 w-8 text-primary" />
+                {t("setting.attachmentSignature.title")}
+              </h2>
+              <p className="max-w-2xl text-sm text-slate-600 dark:text-slate-400">
+                {t("setting.attachmentSignature.description")}
+              </p>
+            </div>
+          </header>
+
+          <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+            <div className="space-y-2 rounded-xl border border-slate-200/80 bg-white/80 p-4 backdrop-blur-sm dark:border-slate-700 dark:bg-slate-900/70">
+              <Label className="text-sm font-medium text-slate-800 dark:text-slate-200">
+                {t("setting.attachmentSignature.unit")}
+              </Label>
+              <Select
+                value={selectedUnitId}
+                onValueChange={(value) => setSelectedUnitId(value)}
+              >
+                <SelectTrigger
+                  className="h-11 w-full bg-white/90 dark:border-slate-700 dark:bg-slate-900"
+                  aria-label={t("setting.attachmentSignature.unit")}
+                >
+                  <SelectValue
+                    placeholder={t("setting.attachmentSignature.selectUnit")}
+                  />
+                </SelectTrigger>
+                <SelectContent>
+                  {isLoadingUnits ? (
+                    <SelectItem value="loading" disabled>
+                      {t("setting.attachmentSignature.loadingUnits")}
+                    </SelectItem>
+                  ) : hasUnits ? (
+                    unitItems.map((unit) => (
+                      <SelectItem key={unit.id} value={unit.id}>
+                        {localizedName(unit.name)}
+                      </SelectItem>
+                    ))
+                  ) : (
+                    <SelectItem value="no-units" disabled>
+                      {t("setting.attachmentSignature.noUnitsFound")}
+                    </SelectItem>
+                  )}
+                </SelectContent>
+              </Select>
+              <p className="text-xs text-slate-500 dark:text-slate-400">
+                {t("setting.attachmentSignature.unitHint")}
+              </p>
+            </div>
+
+            <div className="space-y-3 rounded-xl border border-slate-200/80 bg-white/80 p-4 backdrop-blur-sm dark:border-slate-700 dark:bg-slate-900/70">
+              <div className="flex items-start justify-between gap-3">
+                <div className="space-y-1">
+                  <Label
+                    htmlFor={switchId}
+                    className="text-sm font-medium text-slate-800 dark:text-slate-200"
+                  >
+                    {t("setting.attachmentSignature.toggleLabel")}
+                  </Label>
+                  <p
+                    id={`${switchId}-description`}
+                    className="text-xs text-slate-500 dark:text-slate-400"
+                  >
+                    {t("setting.attachmentSignature.toggleDescription")}
+                  </p>
+                </div>
+                <Switch
+                  id={switchId}
+                  checked={switchValue}
+                  onCheckedChange={handleToggleSignature}
+                  aria-describedby={`${switchId}-description`}
+                  disabled={!isSwitchEnabled || isLoadingConfig || isUpdatingSignature}
+                />
+              </div>
+
+              <div className="flex items-center gap-2 rounded-lg border border-dashed border-slate-300/80 bg-slate-50/80 px-3 py-2 text-sm text-slate-600 dark:border-slate-700 dark:bg-slate-800/80 dark:text-slate-300">
+                <PenLine className="h-4 w-4 text-indigo-600 dark:text-indigo-400" />
+                <span>
+                  {t("setting.attachmentSignature.status")}{" "}
+                  <span className="font-semibold">
+                    {switchValue
+                      ? t("profile.enabled")
+                      : t("profile.disabled")}
+                  </span>
+                </span>
+              </div>
+              {!isSwitchEnabled && !isLoadingConfig && (
+                <p className="text-xs text-amber-600 dark:text-amber-400">
+                  {t("setting.noConfigFound")}
+                </p>
+              )}
+            </div>
+          </div>
+
+          <footer className="flex flex-wrap items-center gap-2 rounded-lg border border-slate-200/80 bg-white/70 px-3 py-2 text-xs text-slate-600 dark:border-slate-700 dark:bg-slate-900/70 dark:text-slate-300">
+            <Building2 className="h-3.5 w-3.5 text-slate-500 dark:text-slate-400" />
+            <span>
+              {t("setting.attachmentSignature.activeUnit")}{" "}
+              <strong className="font-semibold">
+                {selectedUnitName
+                  ? localizedName(selectedUnitName)
+                  : t("common.None")}
+              </strong>
+            </span>
+          </footer>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default AttachmentSignature;
diff --git a/apps/edr-freight-web/backoffice/src/pages/AuditLog.tsx b/apps/edr-freight-web/backoffice/src/pages/AuditLog.tsx
new file mode 100644
index 000000000..2fe61e56a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/AuditLog.tsx
@@ -0,0 +1,264 @@
+import React, { useEffect, useState } from "react";
+import { format } from "date-fns";
+import { Input } from "@/shared/common/ui/input";
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "@/shared/common/ui/select";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/common/ui/table";
+import { CollectionQueryDTO, fetchAuditLogs } from "@/user-management/services/api/auditService";
+import { useTranslation } from "react-i18next";
+import { useLocalizedName } from "@/shared/common/localizedName";
+
+interface AuditLogItem {
+  id: string;
+  user: string | { id: string; name: string; email?: string; phone?: string; position?: string; userType?: string; employeeId?: string; employeePositionId?: string };
+  action: string;
+  message: string;
+  timestamp: string;
+}
+
+const AuditLog: React.FC = () => {
+  const {t} = useTranslation()
+  const [logs, setLogs] = useState<AuditLogItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [search, setSearch] = useState("");
+  const [sort, setSort] = useState("timestamp:DESC");
+  const [dateRange, setDateRange] = useState<{ start?: string; end?: string }>({});
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
+  const [status, setStatus] = useState("")
+  const localizedName = useLocalizedName()
+  const pageSize = 10;
+
+  const statuses = [
+    {
+      status: "Draft",
+      color: "bg-gray-200",
+      detail: t("landingPage.notForwarded"),
+    },
+    {
+      status: "Submitted",
+      color: "bg-purple-100",
+      detail: t("landingPage.awaiting"),
+    },
+    {
+      status: "Accepted",
+      color: "bg-primary-100",
+      detail: t("landingPage.accepted"),
+    },
+    {
+      status: "Approved",
+      color: "bg-primary-200",
+      detail: t("landingPage.approvedSent"),
+    },
+    {
+      status: "Adjustment",
+      color: "bg-yellow-100",
+      detail: t("landingPage.returned"),
+    },
+    {
+      status: "Rejected",
+      color: "bg-red-100",
+      detail: t("landingPage.rejected"),
+    },
+    { status: "Sent", color: "bg-primary-300", detail: t("landingPage.sent") },
+    {
+      status: "Returned",
+      color: "bg-gray-400",
+      detail: t("landingPage.returnedByOfficer"),
+    },
+  ];
+const buildQuery = (): CollectionQueryDTO => {
+  const query: CollectionQueryDTO = {
+    s: "id,user,action,message,timestamp",
+    o: sort,
+    t: pageSize,
+    sk: (page - 1) * pageSize,
+  };
+
+  const where: string[] = [];
+
+  if (search) where.push(`message:ILIKE:%${search}%`);
+  if (status) where.push(`status:=:${status}`);
+  if (status && status !== "all") where.push(`status:=:${status}`);
+
+  if (dateRange.start && dateRange.end)
+    where.push(`timestamp:>=:${dateRange.start}|timestamp:<=:${dateRange.end}`);
+
+  if (where.length) query.w = where.join("|");
+
+  return query;
+};
+
+ const fetchLogs = async () => {
+   setLoading(true);
+   try {
+     const result = await fetchAuditLogs(buildQuery());
+     setLogs(result.items);
+     setTotal(result.total ?? 0);
+   } catch (err) {
+     console.error(err);
+     setLogs([]);
+   } finally {
+     setLoading(false);
+   }
+ };
+
+  useEffect(() => {
+    fetchLogs();
+  }, [search, sort, dateRange, page]);
+
+  return (
+    <div className="p-6 bg-background min-h-screen">
+      <h1 className="text-2xl font-semibold mb-6 text-foreground">
+        Audit Logs
+      </h1>
+
+      {/* Filter Bar */}
+      <div className="flex flex-wrap gap-3 mb-5 items-center">
+        <Input
+          placeholder="Search message..."
+          value={search}
+          onChange={(e: any) => setSearch(e.target.value)}
+          className="w-64"
+        />
+
+        <div className="flex gap-2 items-center">
+          <Input
+            type="date"
+            onChange={(e) =>
+              setDateRange({ ...dateRange, start: e.target.value })
+            }
+          />
+          <span className="text-muted-foreground text-sm">to</span>
+          <Input
+            type="date"
+            onChange={(e) =>
+              setDateRange({ ...dateRange, end: e.target.value })
+            }
+          />
+        </div>
+
+        <Select value={sort} onValueChange={setSort}>
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Sort by" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="timestamp:DESC">Newest First</SelectItem>
+            <SelectItem value="timestamp:ASC">Oldest First</SelectItem>
+            <SelectItem value="user:ASC">User (A–Z)</SelectItem>
+            <SelectItem value="user:DESC">User (Z–A)</SelectItem>
+          </SelectContent>
+        </Select>
+        
+         
+          {/* ✅ Status Dropdown */}
+          <Select value={status} onValueChange={setStatus}>
+            <SelectTrigger className="w-[200px]">
+              <SelectValue
+                placeholder={
+                  t("auditLogs.filterByStatus") || "Filter by status"
+                }
+              />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">{t("common.all") || "All"}</SelectItem>
+              {statuses.map((s) => (
+                <SelectItem key={s.status} value={s.status}>
+                  {t(`${s.status}`) || s.status}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+
+      </div>
+
+      {/* Table */}
+      <div className="rounded-xl border bg-card shadow-sm">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>User</TableHead>
+              <TableHead>Action</TableHead>
+              <TableHead>Message</TableHead>
+              <TableHead>Timestamp</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {loading ? (
+              <TableRow>
+                <TableCell
+                  colSpan={4}
+                  className="text-center py-6 text-muted-foreground">
+                  Loading logs...
+                </TableCell>
+              </TableRow>
+            ) : logs.length > 0 ? (
+              logs.map((log) => (
+                <TableRow key={log.id}>
+                  <TableCell className="font-medium">
+                    {typeof log.user === "string" 
+                      ? log.user 
+                      : typeof log.user?.name === "string"
+                        ? log.user.name
+                        : localizedName(log.user?.name) || "Unknown"}
+                  </TableCell>
+                  <TableCell>{log.action}</TableCell>
+                  <TableCell>{log.message}</TableCell>
+                  <TableCell className="text-muted-foreground">
+                    {log.timestamp && !isNaN(new Date(log.timestamp).getTime())
+                      ? format(new Date(log.timestamp), "yyyy-MM-dd HH:mm:ss")
+                      : "N/A"}
+                  </TableCell>
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={4}
+                  className="text-center py-6 text-muted-foreground">
+                  No logs found
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Pagination */}
+      <div className="flex justify-between items-center mt-5 text-sm">
+        <Button
+          variant="secondary"
+          disabled={page === 1}
+          onClick={() => setPage((p) => Math.max(p - 1, 1))}>
+          Previous
+        </Button>
+
+        <span className="text-muted-foreground">
+          Page {page} of {Math.ceil(total / pageSize) || 1}
+        </span>
+
+        <Button
+          variant="secondary"
+          disabled={page * pageSize >= total}
+          onClick={() => setPage((p) => p + 1)}>
+          Next
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default AuditLog;
diff --git a/apps/edr-freight-web/backoffice/src/pages/BulkUploadPage.tsx b/apps/edr-freight-web/backoffice/src/pages/BulkUploadPage.tsx
new file mode 100644
index 000000000..d0a77ba25
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/BulkUploadPage.tsx
@@ -0,0 +1,7 @@
+import { BulkUserUpload } from "@/user-management/bulkUpload/bulkUpload";
+
+const BulkUploadPage = () => {
+  return <BulkUserUpload />;
+};
+
+export default BulkUploadPage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/ConfigurationPage.tsx b/apps/edr-freight-web/backoffice/src/pages/ConfigurationPage.tsx
new file mode 100644
index 000000000..d4a9b44bd
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/ConfigurationPage.tsx
@@ -0,0 +1,19 @@
+import EscalationConfigurationPage from "./EscalationConfigurationPage";
+import PositionConfigurationPage from "./PositionConfigurationPage";
+import UnitConfigurationPage from "./UnitConfigurationPage";
+import AttachmentSignature from "./AttachmentSignature";
+
+const ConfigurationPage = () => {
+  return (
+    <div className="mx-auto w-full max-w-[1500px] space-y-6 p-4 sm:p-6">
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+        <PositionConfigurationPage />
+        <UnitConfigurationPage />
+        <EscalationConfigurationPage />
+        <AttachmentSignature />
+      </div>
+    </div>
+  );
+};
+
+export default ConfigurationPage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/ContentManagementPage.tsx b/apps/edr-freight-web/backoffice/src/pages/ContentManagementPage.tsx
new file mode 100644
index 000000000..925eda22b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/ContentManagementPage.tsx
@@ -0,0 +1,7 @@
+import ContentManagement from "@/user-management/components/content/ContentManagement";
+
+const ContentManagementPage = () => {
+  return <ContentManagement />;
+};
+
+export default ContentManagementPage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/DashboardPage.tsx b/apps/edr-freight-web/backoffice/src/pages/DashboardPage.tsx
new file mode 100644
index 000000000..5e0be323b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/DashboardPage.tsx
@@ -0,0 +1,158 @@
+import React from "react";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import { ActivityTimeline } from "@/super-admin/components/dashboard/components/ActivityTimeline";
+import { OrgTable } from "@/super-admin/components/dashboard/components/OrgTable";
+import { StatCard } from "@/super-admin/components/dashboard/components/StatCard";
+import { Link, useNavigate } from "react-router-dom";
+import { Plus, Loader2, AlertCircle } from "lucide-react";
+import { useOrganizations } from "@/super-admin/hooks/useOrganizations";
+import { useTranslation } from "react-i18next";
+import SmartOfficeAuditPage from "@/record-management/pages/AuditLog/SmartOfficeAuditPage";
+
+const DashboardPage = () => {
+  const navigate = useNavigate();
+  const pageSize = 10;
+  const { t } = useTranslation();
+  const { organizationsResponse, isLoading, isError, refetch } =
+    useOrganizations("Org", {
+      take: pageSize,
+      orderBy: "createdAt",
+      order: "createdAt:Desc",
+    });
+
+  const {
+    organizationsAdminsResponse,
+    isLoading: isLoadingAdmins,
+    isError: isAdminError,
+    refetch: refetchAdmins,
+  } = useOrganizations("Admin", {
+    take: pageSize,
+    orderBy: "updatedAt",
+    order: "updatedAt: DESC",
+  });
+
+  if (isLoading || isLoadingAdmins) {
+    return (
+      <div className="p-6 flex items-center justify-center h-64">
+        <div className="flex flex-col items-center gap-2">
+          <Loader2 className="h-8 w-8 animate-spin text-primary" />
+          <div className="text-sm text-muted-foreground">
+            Loading dashboard...
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (isError || isAdminError) {
+    return (
+      <div className="p-6 flex items-center justify-center h-64">
+        <div className="flex flex-col items-center gap-4">
+          <AlertCircle className="h-12 w-12 text-red-500" />
+          <div className="text-red-500 font-medium">
+            Error loading dashboard
+          </div>
+          <p className="text-gray-500 dark:text-gray-400 text-center max-w-md mb-4">
+            There was an issue loading the dashboard data. This could be due to
+            network issues or server problems.
+          </p>
+          <Button
+            onClick={() => {
+              refetch();
+              refetchAdmins();
+            }}
+            className="bg-primary hover:bg-primary/90 text-primary-foreground">
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            {t("organization.retry")}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 space-y-10">
+      {/* Stat Cards */}
+      <Card className="col-span-2 shadow-none border-none bg-transparent px-0">
+        <CardHeader className="flex flex-row justify-between items-center px-0">
+          <CardTitle className="text-xl font-semibold">
+            {t("organization.statistics")}
+          </CardTitle>
+          <Link to="/user-management/organizations/new">
+            <Button className="bg-primary hover:bg-primary/90 text-primary-foreground px-5 py-2 rounded-md text-sm font-medium shadow-md">
+              <Plus className="w-4 h-4 mr-2" />
+              {t("organization.newOrganization")}
+            </Button>
+          </Link>
+        </CardHeader>
+        <CardContent className="px-0">
+          <section className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <StatCard
+              title={t("organization.totalOrganizations")}
+              value={organizationsResponse?.count || 0}
+              // indicator={`${0}% ↑`}
+              color="text-primary-500"
+              icon="building"
+              variant="primary"
+              onClick={() => {
+                navigate("/user-management/organizations");
+              }}
+            />
+            {/* <StatCard
+              title="Pending Requests"
+              value={stats.pendingRequests}
+              indicator={`${stats.percentChanges.pending}% ↓`}
+              color="text-red-500"
+              icon="clock"
+              variant="default"
+            /> */}
+            <StatCard
+              title={t("organization.organizationAdmins")}
+              value={organizationsAdminsResponse?.count || 0}
+              // indicator={`${0}% ↓`}
+              color="text-red-500"
+              icon="user"
+              variant="default"
+              onClick={() => {
+                navigate("/user-management/organization_admins");
+              }}
+            />
+          </section>
+        </CardContent>
+      </Card>
+
+      {/* Table and Activities */}
+      <section className="grid grid-cols-1 md:grid-cols-[2fr_1fr] gap-4">
+        <Card className="min-w-0 shadow-none border-none bg-transparent px-0">
+          <SmartOfficeAuditPage />
+        </Card>
+        <Card className=" min-w-0 shadow-none border-none bg-transparent px-0">
+          <CardHeader className="flex flex-row justify-between items-center px-0">
+            <CardTitle className="text-base font-semibold">
+              {t("organization.recentOrganizations")}
+            </CardTitle>
+            <Link to="/organizations">
+              <Button
+                variant="link"
+                className="text-purple-600 dark:text-purple-400 text-sm px-0">
+                {t("organization.viewMore")}
+              </Button>
+            </Link>
+          </CardHeader>
+
+          <CardContent className="px-0 overflow-x-auto">
+            <OrgTable organizations={organizationsResponse?.items || []} />
+          </CardContent>
+        </Card>
+      </section>
+    </div>
+  );
+};
+
+export default DashboardPage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/EscalationConfigurationPage.tsx b/apps/edr-freight-web/backoffice/src/pages/EscalationConfigurationPage.tsx
new file mode 100644
index 000000000..46f91a965
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/EscalationConfigurationPage.tsx
@@ -0,0 +1,412 @@
+import React, { useEffect, useState } from "react";
+import { Edit2Icon, Settings } from "lucide-react";
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "@/shared/common/ui/select";
+import { useUnit } from "@/user-management/hooks/useUnit";
+import { useAuth } from "@/shared/context/AuthContext";
+import { useUnitConfiguration } from "@/shared/hooks/useUnitConfiguration";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/common/ui/table";
+import {
+  prefixSuffixService,
+  EEscalationNotificationType,
+  EEscalationNotificationChannel,
+} from "@/user-management/services/api/prefixSuffixService";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import { t } from "i18next";
+import { useLocalizedName } from "@/shared/common/localizedName";
+
+const configurationCardShell =
+  "relative overflow-hidden rounded-2xl border border-slate-200/80 bg-gradient-to-br from-white via-slate-50 to-slate-100/60 p-4 shadow-sm sm:p-6 dark:border-slate-700/80 dark:bg-gradient-to-br dark:from-slate-950 dark:via-slate-900 dark:to-slate-900";
+
+type FormState = {
+  escalationNotificationType: EEscalationNotificationType | "";
+  escalationNotificationChannel: EEscalationNotificationChannel | "";
+  escalationHour: number | undefined;
+  urgentLetterEscalationHour: number | undefined;
+  onReviewLetterEscalationHour: number | undefined;
+  urgentOnReviewLetterEscalationHour: number | undefined;
+};
+
+const emptyForm: FormState = {
+  escalationNotificationType: "",
+  escalationNotificationChannel: "",
+  escalationHour: undefined,
+  urgentLetterEscalationHour: undefined,
+  onReviewLetterEscalationHour: undefined,
+  urgentOnReviewLetterEscalationHour: undefined,
+};
+
+const EscalationConfigurationPage = () => {
+  const { user } = useAuth();
+  const queryClient = useQueryClient();
+  const organizationId = user?.employee?.[0]?.organizationId || "";
+  const localizedName = useLocalizedName();
+
+  const { getList: getUnitList } = useUnit();
+  const { data: units, isLoading: isLoadingUnits } = getUnitList(
+    organizationId,
+    { take: 1000 },
+  );
+
+  const [selectedUnitId, setSelectedUnitId] = useState("");
+  const [open, setOpen] = useState(false);
+  const [fieldKey, setFieldKey] = useState<string | null>(null);
+  const [fieldValue, setFieldValue] = useState<number | undefined>(0);
+  const [form, setForm] = useState<FormState>(emptyForm);
+
+  useEffect(() => {
+    if (units?.data?.items?.length > 0 && !selectedUnitId) {
+      setSelectedUnitId(units?.data?.items[0].id);
+    }
+  }, [units]);
+
+  const { data, isLoading, error } = useUnitConfiguration(selectedUnitId);
+  const config = data?.data?.items?.[0];
+
+  // Sync local form from server data whenever the config or selected unit changes
+  useEffect(() => {
+    if (config) {
+      setForm({
+        escalationNotificationType: config.escalationNotificationType ?? "",
+        escalationNotificationChannel: config.escalationNotificationChannel ?? "",
+        escalationHour: config.escalationHour,
+        urgentLetterEscalationHour: config.urgentLetterEscalationHour,
+        onReviewLetterEscalationHour: config.onReviewLetterEscalationHour,
+        urgentOnReviewLetterEscalationHour:
+          config.urgentOnReviewLetterEscalationHour,
+      });
+    } else {
+      setForm(emptyForm);
+    }
+  }, [config]);
+
+  const { mutate: saveAll, isPending: isUpdating } = useMutation({
+    mutationFn: (id: string) =>
+      prefixSuffixService.updateInternalPrefixSuffix(
+        {
+          escalationNotificationType:
+            form.escalationNotificationType || undefined,
+          escalationNotificationChannel:
+            form.escalationNotificationChannel || undefined,
+          escalationHour: form.escalationHour,
+          urgentLetterEscalationHour: form.urgentLetterEscalationHour,
+          onReviewLetterEscalationHour: form.onReviewLetterEscalationHour,
+          urgentOnReviewLetterEscalationHour:
+            form.urgentOnReviewLetterEscalationHour,
+          unitId: selectedUnitId,
+        },
+        id,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["unitConfig", selectedUnitId],
+      });
+    },
+    onError: (err) => {
+      console.error("Failed to update escalation settings", err);
+    },
+  });
+
+  const handleSaveAll = () => {
+    if (!config?.id) return;
+    saveAll(config.id);
+  };
+
+  const handleEdit = (key: string, value: number | undefined) => {
+    setFieldKey(key);
+    setFieldValue(value);
+    setOpen(true);
+  };
+
+  // Applies the edited hour value to local form state (no API call yet)
+  const handleDialogApply = () => {
+    if (!fieldKey) return;
+    setForm((prev) => ({ ...prev, [fieldKey]: fieldValue }));
+    setOpen(false);
+    setFieldKey(null);
+  };
+
+  const fields = [
+    {
+      key: "escalationHour",
+      label: t("setting.escalationHour"),
+      value: form.escalationHour,
+    },
+    {
+      key: "urgentLetterEscalationHour",
+      label: t("setting.urgentLetterEscalationHour"),
+      value: form.urgentLetterEscalationHour,
+    },
+    {
+      key: "onReviewLetterEscalationHour",
+      label: t("setting.onReviewLetterEscalationHour"),
+      value: form.onReviewLetterEscalationHour,
+    },
+    {
+      key: "urgentOnReviewLetterEscalationHour",
+      label: t("setting.urgentOnReviewLetterEscalationHour"),
+      value: form.urgentOnReviewLetterEscalationHour,
+    },
+  ];
+
+  return (
+    <div className={configurationCardShell}>
+      <div className="mb-5 flex flex-col gap-4 border-b border-slate-200 pb-4 dark:border-slate-700 sm:flex-row sm:items-start sm:justify-between">
+        <div className="space-y-1">
+          <h1 className="flex items-center gap-2 text-2xl font-bold text-slate-900 sm:text-3xl dark:text-slate-100">
+            <Settings className="h-8 w-8 text-primary" />
+            {t("setting.escalationTitle")}
+          </h1>
+          <p className="text-sm text-slate-600 dark:text-slate-400">
+            {t("setting.escalationDescription")}
+          </p>
+        </div>
+
+        <div className="w-full sm:ml-auto sm:w-auto">
+          <Select
+            value={selectedUnitId}
+            onValueChange={(value) => setSelectedUnitId(value)}
+          >
+            <SelectTrigger className="h-10 w-full bg-white/90 dark:border-slate-700 dark:bg-slate-900 sm:w-44 [&>span]:truncate">
+              <SelectValue placeholder="Select a unit" />
+            </SelectTrigger>
+            <SelectContent className="dark:border-slate-700 dark:bg-slate-900">
+              {isLoadingUnits ? (
+                <SelectItem value="loading" disabled>
+                  {t("setting.loading")}
+                </SelectItem>
+              ) : units?.data?.items?.length > 0 ? (
+                units?.data?.items.map((unit: any) => (
+                  <SelectItem key={unit.id} value={unit.id}>
+                    <span className="block truncate max-w-70">{localizedName(unit.name)}</span>
+                  </SelectItem>
+                ))
+              ) : (
+                <SelectItem value="no-units" disabled>
+                  {t("setting.noUnit")}
+                </SelectItem>
+              )}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      <div className="space-y-3">
+        {isLoading && (
+          <p className="text-sm text-slate-600 dark:text-slate-300">
+            {t("setting.loadingConfig")}
+          </p>
+        )}
+        {error && (
+          <p className="text-sm text-red-600 dark:text-red-400">
+            {t("setting.loadError")}
+          </p>
+        )}
+        {!config && !isLoading && !error && (
+          <p className="text-sm text-slate-600 dark:text-slate-300">
+            {t("setting.noConfigFound")}
+          </p>
+        )}
+
+        {config && (
+          <div className="space-y-4">
+            {/* Escalation Notification Type */}
+            <div className="space-y-2">
+              <p className="text-sm font-medium text-slate-700 dark:text-slate-300">
+                {t("setting.escalationNotificationType")}
+              </p>
+              <Select
+                value={form.escalationNotificationType}
+                onValueChange={(val) =>
+                  setForm((prev) => ({
+                    ...prev,
+                    escalationNotificationType:
+                      val as EEscalationNotificationType,
+                  }))
+                }
+              >
+                <SelectTrigger className="w-full sm:w-64 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">
+                  <SelectValue
+                    placeholder={t(
+                      "setting.escalationNotificationTypePlaceholder",
+                    )}
+                  />
+                </SelectTrigger>
+                <SelectContent className="dark:border-slate-700 dark:bg-slate-900">
+                  <SelectItem value={EEscalationNotificationType.JUMP}>
+                    {t("setting.escalationTypeJump")}
+                  </SelectItem>
+                  <SelectItem value={EEscalationNotificationType.NOTIFY_STEP}>
+                    {t("setting.escalationTypeNotifyStep")}
+                  </SelectItem>
+                  <SelectItem
+                    value={EEscalationNotificationType.NOTIFY_PARENT_STEP}
+                  >
+                    {t("setting.escalationTypeNotifyParentStep")}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Escalation Hours */}
+            <div className="overflow-x-auto rounded-xl border border-slate-200 bg-white/90 dark:border-slate-700 dark:bg-slate-900/70">
+              <Table>
+                <TableHeader>
+                  <TableRow className="dark:border-slate-700">
+                    <TableHead className="text-slate-600 dark:text-slate-300">
+                      {t("setting.Name")}
+                    </TableHead>
+                    <TableHead className="text-slate-600 dark:text-slate-300">
+                      {t("setting.Value")}
+                    </TableHead>
+                    <TableHead className="text-right text-slate-600 dark:text-slate-300">
+                      {t("setting.Action")}
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {fields.map((field) => (
+                    <TableRow key={field.key} className="dark:border-slate-700">
+                      <TableCell className="text-slate-900 dark:text-slate-100">
+                        {field.label}
+                      </TableCell>
+                      <TableCell className="text-slate-700 dark:text-slate-300">
+                        {field.value ?? "-"}
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <Button
+                          onClick={() => handleEdit(field.key, field.value)}
+                          variant="outline"
+                          size="sm"
+                          className="dark:border-slate-700 dark:bg-slate-900 dark:hover:bg-slate-800"
+                        >
+                          <Edit2Icon className="h-4 w-4" />
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+
+            {/* Escalation Notification Channel */}
+            <div className="space-y-2">
+              <p className="text-sm font-medium text-slate-700 dark:text-slate-300">
+                {t("setting.escalationNotificationChannel")}
+              </p>
+              <Select
+                value={form.escalationNotificationChannel}
+                onValueChange={(val) =>
+                  setForm((prev) => ({
+                    ...prev,
+                    escalationNotificationChannel:
+                      val as EEscalationNotificationChannel,
+                  }))
+                }
+              >
+                <SelectTrigger className="w-full sm:w-64 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100">
+                  <SelectValue
+                    placeholder={t(
+                      "setting.escalationNotificationChannelPlaceholder",
+                    )}
+                  />
+                </SelectTrigger>
+                <SelectContent className="dark:border-slate-700 dark:bg-slate-900">
+                  <SelectItem value={EEscalationNotificationChannel.ALL}>
+                    {t("setting.escalationChannelAll")}
+                  </SelectItem>
+                  <SelectItem value={EEscalationNotificationChannel.EMAIL}>
+                    {t("setting.escalationChannelEmail")}
+                  </SelectItem>
+                  <SelectItem value={EEscalationNotificationChannel.IN_APP}>
+                    {t("setting.escalationChannelInApp")}
+                  </SelectItem>
+                  <SelectItem value={EEscalationNotificationChannel.SMS}>
+                    {t("setting.escalationChannelSms")}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Single batch save */}
+            <div className="flex justify-end pt-2">
+              <Button
+                onClick={handleSaveAll}
+                disabled={isUpdating}
+                className="bg-primary hover:bg-primary/90 text-primary-foreground"
+              >
+                {isUpdating ? t("setting.saving") : t("setting.saveChanges")}
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Modal for editing a single hour field — applies to local form only */}
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="dark:border-slate-700 dark:bg-slate-900">
+          <DialogHeader>
+            <DialogTitle className="dark:text-slate-100">
+              {t("setting.edit")} {fieldKey && t(`setting.${fieldKey}`)}
+            </DialogTitle>
+            <DialogDescription className="dark:text-slate-400">
+              {t("setting.updateEscalationMsg")}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-3">
+            <label className="text-sm font-medium text-slate-700 dark:text-slate-300">
+              {fieldKey && t(`setting.${fieldKey}`)}
+            </label>
+            <Input
+              type="number"
+              value={fieldValue ?? ""}
+              onChange={(e) => setFieldValue(Number(e.target.value))}
+              className="dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
+            />
+          </div>
+
+          <DialogFooter className="flex justify-end gap-2 mt-4">
+            <Button
+              variant="secondary"
+              onClick={() => setOpen(false)}
+              className="dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700"
+            >
+              {t("common.Cancel")}
+            </Button>
+            <Button
+              onClick={handleDialogApply}
+              className="bg-primary hover:bg-primary/90 text-primary-foreground"
+            >
+              {t("common.apply", "Apply")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};
+
+export default EscalationConfigurationPage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/HomePage/App.tsx b/apps/edr-freight-web/backoffice/src/pages/HomePage/App.tsx
new file mode 100644
index 000000000..a6906343a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/HomePage/App.tsx
@@ -0,0 +1,38 @@
+import Header from "./Header";
+import DeputyMessage from "./DeputyMessage";
+
+import Footer from "./Footer";
+import NewsSection from "./NewsSection";
+import OfficeHeadMessage from "./OfficeHeadMessage";
+import OrganizationGoal from "./OrganizationGoal";
+
+function App() {
+  return (
+    <div className="bg-background text-foreground">
+      <div className="min-h-screen flex flex-col">
+        <Header />
+
+        <main className="flex-grow space-y-12 pt-12 md:pt-16">
+          <section id="OfficeHeadMessage">
+            <OfficeHeadMessage />
+          </section>
+
+          <section id="DeputyMessage">
+            <DeputyMessage />
+          </section>
+          <section id="OrganizationGoal">
+            <OrganizationGoal />
+          </section>
+
+          <section id="NewsSection">
+            <NewsSection />
+          </section>
+        </main>
+
+        <Footer />
+      </div>
+    </div>
+  );
+}
+
+export default App;
diff --git a/apps/edr-freight-web/backoffice/src/pages/HomePage/DeputyMessage.tsx b/apps/edr-freight-web/backoffice/src/pages/HomePage/DeputyMessage.tsx
new file mode 100644
index 000000000..e47c4f7ca
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/HomePage/DeputyMessage.tsx
@@ -0,0 +1,409 @@
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useMessage } from "@/user-management/web-Management/hooks/useMessage";
+import { useTheme } from "@/user-management/web-Management/hooks/useTheme";
+import { useTenantConfig } from "@/layout/components/TenantConfig";
+import React, { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+
+const DeputyMessage = () => {
+  const [currentMessageIndex, setCurrentMessageIndex] = useState(0);
+  const [isMobile, setIsMobile] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [showReadMore, setShowReadMore] = useState(false);
+  const [messageRef, setMessageRef] = useState<HTMLDivElement | null>(null);
+
+  const { t } = useTranslation();
+
+  const baseParams = {
+    isActive: true,
+  };
+  const { items } = useMessage(baseParams);
+  const localizedName = useLocalizedName();
+  const { items: theme } = useTheme();
+  const { config: tenantConfig } = useTenantConfig();
+  const deputy: any[] = items?.filter((i) => i.staffType === "deputy") ?? [];
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentMessageIndex((prevIndex) =>
+        prevIndex === deputy.length - 1 ? 0 : prevIndex + 1
+      );
+    }, 3000);
+    return () => clearInterval(interval);
+  }, [deputy.length]);
+
+  useEffect(() => {
+    const checkScreenSize = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+    checkScreenSize();
+    window.addEventListener("resize", checkScreenSize);
+    return () => {
+      window.removeEventListener("resize", checkScreenSize);
+    };
+  }, []);
+
+  // Check if content overflows after render
+  useEffect(() => {
+    if (messageRef) {
+      const isOverflowing = messageRef.scrollHeight > messageRef.clientHeight;
+      setShowReadMore(isOverflowing);
+    }
+  }, [messageRef, currentMessageIndex, deputy]);
+
+  const goToMessage = (index: any) => {
+    setCurrentMessageIndex(index);
+  };
+
+  const currentDeputy = deputy[currentMessageIndex];
+
+  const getMessageContent = () => {
+    return (
+      localizedName(currentDeputy?.messageContent) ||
+      tenantConfig.welcomeMessage ||
+      t("msg.waitingMsg")
+    );
+  };
+
+  const renderMessagePreview = () => {
+    const message = getMessageContent();
+    return message.split("\n\n").map((paragraph, index) => (
+      <p key={index} className="text-gray-700 text-lg leading-relaxed mb-4">
+        {paragraph}
+      </p>
+    ));
+  };
+
+  const renderFullMessage = () => {
+    const message = getMessageContent();
+    return message.split("\n\n").map((paragraph, index) => (
+      <p key={index} className="text-gray-700 text-lg leading-relaxed mb-4">
+        {paragraph}
+      </p>
+    ));
+  };
+
+  function lightenColor(color: string, percent: number) {
+    const R = parseInt(color.substring(1, 3), 16);
+    const G = parseInt(color.substring(3, 5), 16);
+    const B = parseInt(color.substring(5, 7), 16);
+
+    const newR = Math.min(255, R + Math.round((255 - R) * (percent / 100)));
+    const newG = Math.min(255, G + Math.round((255 - G) * (percent / 100)));
+    const newB = Math.min(255, B + Math.round((255 - B) * (percent / 100)));
+
+    return `#${newR.toString(16).padStart(2, "0")}${newG
+      .toString(16)
+      .padStart(2, "0")}${newB.toString(16).padStart(2, "0")}`;
+  }
+
+  return (
+    <>
+      <div
+        className="min-h-screen flex items-center justify-center p-4 md:p-8"
+        style={{
+          background: `linear-gradient(
+      to bottom, 
+     ${
+       theme?.find((i) => i.type === "PRIMARY_COLOR")?.value
+         ? lightenColor(
+             theme.find((i) => i.type === "PRIMARY_COLOR")!.value,
+             30
+           )
+         : "var(--primary-300)"
+     }, 
+      ${
+        theme?.find((i) => i.type === "SECONDARY_COLOR")?.value
+          ? lightenColor(
+              theme.find((i) => i.type === "SECONDARY_COLOR")!.value,
+              55
+            )
+          : "var(--primary-300)"
+      }
+    )`,
+        }}
+      >
+        <div className="max-w-6xl w-full">
+          <div className="text-center mb-12">
+            <h1 className="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
+              {t("deputy.title")}
+            </h1>
+            <div className="w-24 h-1 bg-primary-600 mx-auto"></div>
+            <p className="text-gray-600 mt-4 max-w-2xl mx-auto">
+              {t("deputy.subtitle")}
+            </p>
+          </div>
+
+          <div className="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl">
+            <div className="flex flex-col md:flex-row">
+              {/* Image Section */}
+              <div className="md:w-2/5 relative">
+                <img
+                  src={currentDeputy?.presigned || tenantConfig.logo || ""}
+                  alt={
+                    localizedName(currentDeputy?.employee?.name) ||
+                    tenantConfig.organizationName
+                  }
+                  className={`w-full h-64 md:h-full transition-opacity duration-500 ${
+                    currentDeputy?.presigned
+                      ? "object-cover"
+                      : "object-contain bg-white p-6"
+                  }`}
+                />
+
+                {/* Name and Position Overlay */}
+                <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent flex items-end p-6 md:p-8">
+                  <div>
+                    <h2 className="text-2xl md:text-3xl font-bold text-white mb-2">
+                      {localizedName(currentDeputy?.employee?.name) ||
+                        tenantConfig.organizationName}
+                    </h2>
+                    {localizedName(
+                      currentDeputy?.employee?.employeePositions?.[0]
+                        ?.position?.name
+                    ) && (
+                      <p className="text-gray-200 text-lg">
+                        {localizedName(
+                          currentDeputy?.employee?.employeePositions?.[0]
+                            ?.position?.name
+                        )}
+                      </p>
+                    )}
+                  </div>
+                </div>
+
+                {/* Message Indicator Dots */}
+                <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2">
+                  {deputy.map((_, index) => (
+                    <button
+                      key={index}
+                      onClick={() => goToMessage(index)}
+                      className={`w-3 h-3 rounded-full transition-all duration-300 ${
+                        index === currentMessageIndex
+                          ? "bg-white scale-125"
+                          : "bg-white/50 hover:bg-white/70"
+                      }`}
+                      aria-label={t("deputy.goToMessage", { index: index + 1 })}
+                    />
+                  ))}
+                </div>
+
+                {/* Navigation Arrows */}
+                <button
+                  onClick={() =>
+                    goToMessage(
+                      currentMessageIndex === 0
+                        ? deputy.length - 1
+                        : currentMessageIndex - 1
+                    )
+                  }
+                  className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white/80 hover:bg-white text-primary-600 rounded-full p-2 transition-all duration-300 hover:scale-110"
+                  aria-label={t("deputy.previous")}
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-6 w-6"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M15 19l-7-7 7-7"
+                    />
+                  </svg>
+                </button>
+
+                <button
+                  onClick={() =>
+                    goToMessage(
+                      currentMessageIndex === deputy.length - 1
+                        ? 0
+                        : currentMessageIndex + 1
+                    )
+                  }
+                  className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white/80 hover:bg-white text-primary-600 rounded-full p-2 transition-all duration-300 hover:scale-110"
+                  aria-label={t("deputy.next")}
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-6 w-6"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M9 5l7 7-7 7"
+                    />
+                  </svg>
+                </button>
+              </div>
+
+              {/* Message Section */}
+              <div className="md:w-3/5 p-6 md:p-8 flex flex-col justify-center min-h-[470px]">
+                <div className="mb-8 border-b border-gray-200 pb-4">
+                  <h2 className="text-2xl font-bold text-gray-800">
+                    {localizedName(currentDeputy?.messageTitle) || ""}
+                  </h2>
+                  <p className="text-primary-600 text-sm mt-1">
+                    {localizedName(
+                      currentDeputy?.employee?.employeePositions?.at(0)
+                        ?.position?.name
+                    ) || t("deputy.defaultPosition")}
+                  </p>
+                </div>
+
+                <div className="mb-6">
+                  {/* Message content with fixed height */}
+                  <div
+                    ref={setMessageRef}
+                    className="max-h-64 overflow-hidden relative transition-opacity duration-500"
+                  >
+                    {renderMessagePreview()}
+                    {/* Gradient overlay to fade out text */}
+                    {showReadMore && (
+                      <div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-white to-transparent"></div>
+                    )}
+                  </div>
+
+                  {/* Read More Button */}
+                  {showReadMore && (
+                    <div className="text-center mt-4">
+                      <button
+                        onClick={() => setIsModalOpen(true)}
+                        className="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors duration-200"
+                        style={{
+                          background: `linear-gradient(
+            to bottom,
+            ${
+              theme?.find((i) => i.type === "PRIMARY_COLOR")?.value
+                ? lightenColor(
+                    theme.find((i) => i.type === "PRIMARY_COLOR")!.value,
+                    15
+                  )
+                : "var(--primary-300)"
+            },
+            ${
+              theme?.find((i) => i.type === "SECONDARY_COLOR")?.value
+                ? lightenColor(
+                    theme.find((i) => i.type === "SECONDARY_COLOR")!.value,
+                    30
+                  )
+                : "var(--primary-300)"
+            }
+          )`,
+                        }}
+                      >
+                        {t("newssection.readMore") || "Read Full Message"}
+                        <svg
+                          className="ml-2 -mr-1 h-5 w-5"
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 20 20"
+                          fill="currentColor"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 10-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z"
+                            clipRule="evenodd"
+                          />
+                        </svg>
+                      </button>
+                    </div>
+                  )}
+                </div>
+
+                {/* Auto-rotate indicator */}
+                <div className="mt-6 flex items-center text-gray-500">
+                  <div className="w-full bg-gray-200 rounded-full h-1 mr-3">
+                    <div
+                      className="bg-primary-600 h-1 rounded-full transition-all duration-1000 ease-linear"
+                      style={{
+                        width: `${
+                          (currentMessageIndex / (deputy.length - 1)) * 100
+                        }%`,
+                      }}
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Modal for full message */}
+      {isModalOpen && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+          <div className="bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-hidden flex flex-col">
+            {/* Modal Header */}
+            <div className="flex items-center justify-between p-6 border-b border-gray-200 flex-shrink-0">
+              <div className="flex items-center">
+                <div className="w-8 h-1 bg-primary-600 mr-3"></div>
+                <h3 className="text-xl font-semibold text-primary-600 uppercase tracking-wide">
+                  {localizedName(currentDeputy?.messageTitle) || ""}
+                </h3>
+              </div>
+              <button
+                onClick={() => setIsModalOpen(false)}
+                className="text-gray-400 hover:text-gray-600 transition-colors duration-200 p-1 rounded-full hover:bg-gray-100"
+              >
+                <svg
+                  className="w-6 h-6"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </button>
+            </div>
+
+            {/* Modal Content */}
+            <div className="p-6 overflow-y-auto custom-scrollbar flex-1">
+              <div className="prose prose-lg max-w-none">
+                {renderFullMessage()}
+              </div>
+            </div>
+
+            {/* Modal Footer */}
+            <div className="border-t border-gray-200 bg-gray-50 flex-shrink-0">
+              <div className="p-6">
+                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+                  <div className="flex-1 min-w-0">
+                    <p className="text-gray-800 font-semibold text-lg truncate">
+                      {localizedName(currentDeputy?.employee?.name)}
+                    </p>
+                    <p className="text-gray-600 text-sm truncate">
+                      {localizedName(
+                        currentDeputy?.employee?.employeePositions?.[0]
+                          ?.position?.name
+                      ) || t("deputy.defaultPosition")}
+                    </p>
+                  </div>
+                  <button
+                    onClick={() => setIsModalOpen(false)}
+                    className="px-6 py-2 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors duration-200 flex-shrink-0"
+                  >
+                    {t("preview.close") || "Close"}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default DeputyMessage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/HomePage/Footer.tsx b/apps/edr-freight-web/backoffice/src/pages/HomePage/Footer.tsx
new file mode 100644
index 000000000..3b45c3ae0
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/HomePage/Footer.tsx
@@ -0,0 +1,367 @@
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useContactUs } from "@/user-management/web-Management/hooks/useContactUs";
+import { useSocialMedia } from "@/user-management/web-Management/hooks/useSocialMedia";
+import { useTheme } from "@/user-management/web-Management/hooks/useTheme";
+import { motion } from "framer-motion";
+import {
+  Facebook,
+  Globe,
+  Instagram,
+  Linkedin,
+  Mail,
+  MapPin,
+  Phone,
+  Youtube,
+} from "lucide-react";
+import { FaTelegramPlane, FaTiktok } from "react-icons/fa";
+import { FaXTwitter } from "react-icons/fa6";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+interface BrandColors {
+  primary: string; // main accent color (e.g. var(--primary))
+  gradientFrom: string;
+  gradientTo: string;
+  textColor: string;
+  mutedText: string;
+  borderColor: string;
+}
+
+const Footer = ({
+  brandColors = {
+    primary: "var(--primary)",
+    gradientFrom: "#1f2937", // gray-900
+    gradientTo: "#111827", // gray-800
+    textColor: "#111827",
+    mutedText: "#9ca3af", // gray-400
+    borderColor: "#374151", // gray-700
+  },
+}: {
+  brandColors?: BrandColors;
+}) => {
+  const [activeTab, setActiveTab] = useState("");
+  const { t } = useTranslation();
+  const baseParams = {
+    isActive: true,
+  };
+  const { items: social } = useSocialMedia(baseParams);
+  const { items: contact } = useContactUs(baseParams);
+  const localizedName = useLocalizedName();
+  const { items: theme, unit } = useTheme();
+
+  //icons
+  const SOCIAL_ICONS: Record<
+    string,
+    { icon: React.ElementType; color: string; labelKey: string }
+  > = {
+    FACEBOOK: {
+      icon: Facebook,
+      color: "#1877F2",
+      labelKey: "landingPage.facebook",
+    },
+    TWITTER: {
+      icon: FaXTwitter,
+      color: "#000000",
+      labelKey: "landingPage.twitter",
+    },
+    LINKEDIN: {
+      icon: Linkedin,
+      color: "#0077B5",
+      labelKey: "landingPage.linkedin",
+    },
+    TELEGRAM: {
+      icon: FaTelegramPlane,
+      color: "#0088cc",
+      labelKey: "landingPage.telegram",
+    },
+    TIKTOK: {
+      icon: FaTiktok,
+      color: "#ffffff",
+      labelKey: "landingPage.tiktok",
+    },
+    INSTAGRAM: {
+      icon: Instagram,
+      color: "#E1306C",
+      labelKey: "landingPage.instagram",
+    }, // example
+    WEBSITE: { icon: Globe, color: "#0077B5", labelKey: "landingPage.website" },
+    YOUTUBE: {
+      icon: Youtube,
+      color: "#0077B5",
+      labelKey: "landingPage.website",
+    },
+  };
+  // === Dynamic Navigation Items ===
+  const navItems: any[] = [
+    { id: "OfficeHeadMessage", label: t("nav.officeHeadMessage") },
+    { id: "DeputyMessage", label: t("nav.deputyMessage") },
+    {
+      id: "OrganizationGoal",
+      label: t("nav.orgGoal"),
+    },
+    { id: "NewsSection", label: t("nav.news") },
+  ];
+
+  // === Dynamic Social Links ===
+  // Filter only active socials
+  const socialLinks: any[] =
+    social
+      ?.filter((s) => SOCIAL_ICONS[s.type])
+      .map((s) => ({
+        id: s.name || s.type.toLowerCase(),
+        icon: SOCIAL_ICONS[s.type].icon,
+        url: s.link,
+        color: SOCIAL_ICONS[s.type].color,
+        label: t(SOCIAL_ICONS[s.type].labelKey),
+      })) ?? [];
+  function lightenColor(color: string, percent: number) {
+    const R = parseInt(color.substring(1, 3), 16);
+    const G = parseInt(color.substring(3, 5), 16);
+    const B = parseInt(color.substring(5, 7), 16);
+
+    const newR = Math.min(255, R + Math.round((255 - R) * (percent / 100)));
+    const newG = Math.min(255, G + Math.round((255 - G) * (percent / 100)));
+    const newB = Math.min(255, B + Math.round((255 - B) * (percent / 100)));
+
+    return `#${newR.toString(16).padStart(2, "0")}${newG
+      .toString(16)
+      .padStart(2, "0")}${newB.toString(16).padStart(2, "0")}`;
+  }
+  return (
+    <footer
+      className="transition-colors duration-500"
+      style={{
+        background: `linear-gradient(
+      to top, 
+     ${
+       theme?.find((i) => i.type === "PRIMARY_COLOR")?.value
+         ? lightenColor(theme.find((i) => i.type === "PRIMARY_COLOR")!.value, 5)
+         : "var(--primary-300)"
+     }, 
+      ${
+        theme?.find((i) => i.type === "PRIMARY_COLOR")?.value
+          ? lightenColor(
+              theme.find((i) => i.type === "PRIMARY_COLOR")!.value,
+              10
+            )
+          : "var(--primary-300)"
+      }
+    )`,
+      }}
+    >
+      <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
+        <div className="xl:grid xl:grid-cols-3 xl:gap-8">
+          {/* === Left Section === */}
+          <div className="space-y-2 xl:col-span-1">
+            <div className="flex items-center">
+              <div
+                className="overflow-hidden"
+                style={{
+                  width: "150px", // container width
+                  height: "150px", // container height
+                  borderRadius: "16px", // soft rounded corners, change to "50%" for circle
+                  backgroundColor: brandColors.primary,
+                  flexShrink: 0, // prevents shrinking
+                }}
+              >
+                <img
+                  src={
+                    theme?.find((i) => i.type === "LOGO")?.presigned ||
+                    "https://www.w3.org/Icons/w3c_home"
+                  }
+                  alt={localizedName(unit?.name)}
+                  className="w-full h-full object-cover"
+                />
+              </div>
+            </div>
+            <span className="ml-4 text-xl md:text-2xl font-bold">
+              {t("landingPage.smartOffice")}
+            </span>
+            <p className="text-lg" style={{ color: brandColors.mutedText }}>
+              {t("landingPage.digitalTransformation")}
+            </p>
+
+            {/* === Social Links (Dynamic) === */}
+            <div className="flex space-x-6">
+              {socialLinks.map(({ id, icon: Icon, url, color, label }) => (
+                <a
+                  key={id}
+                  href={url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="transition-transform hover:scale-110"
+                >
+                  <Icon
+                    className="h-6 w-6 transition-colors duration-300"
+                    style={{
+                      color: brandColors.mutedText,
+                    }}
+                    onMouseEnter={(e: any) =>
+                      (e.currentTarget.style.color = color)
+                    }
+                    onMouseLeave={(e: any) =>
+                      (e.currentTarget.style.color = brandColors.mutedText)
+                    }
+                  />
+                  <span className="sr-only">{label}</span>
+                </a>
+              ))}
+            </div>
+          </div>
+
+          {/* === Right Section === */}
+          <div className="mt-12 xl:mt-0 xl:col-span-2">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+              {/* === Contact Info === */}
+              <div>
+                <h3
+                  className="text-sm font-semibold tracking-wider uppercase"
+                  style={{ color: brandColors.textColor }}
+                >
+                  {t("landingPage.contactUs")}
+                </h3>
+                <ul className="mt-4 space-y-4">
+                  <li className="flex items-center space-x-3 text-base transition-colors duration-300 cursor-pointer">
+                    <Mail
+                      className="h-5 w-5"
+                      style={{ color: brandColors.mutedText }}
+                    />
+                    <span
+                      className="font-medium"
+                      style={{ color: brandColors.textColor }}
+                    >
+                      {
+                        contact?.find((i) => i.type === "EMAIL" && i.isActive)
+                          ?.value
+                      }
+                    </span>
+                  </li>
+                  <li className="flex items-center space-x-3 text-base cursor-pointer">
+                    <Phone
+                      className="h-5 w-5"
+                      style={{ color: brandColors.mutedText }}
+                    />
+                    <span
+                      className="font-medium"
+                      style={{ color: brandColors.textColor }}
+                    >
+                      {
+                        contact?.find(
+                          (i) => i.type === "PHONE_NUMBER" && i.isActive
+                        )?.value
+                      }
+                    </span>
+                  </li>
+                  <li className="flex items-center space-x-3 text-base">
+                    <MapPin
+                      className="h-5 w-5 flex-shrink-0"
+                      style={{ color: brandColors.mutedText }}
+                    />
+
+                    {(() => {
+                      const location = contact?.find(
+                        (i) => i.type === "LOCATION" && i.isActive
+                      )?.value;
+
+                      if (!location) {
+                        return (
+                          <span
+                            className="font-medium"
+                            style={{ color: brandColors.textColor }}
+                          >
+                            Not available
+                          </span>
+                        );
+                      }
+
+                      const shortText =
+                        location.length > 25
+                          ? location.slice(0, 25) + "…"
+                          : location;
+
+                      return (
+                        <a
+                          href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(
+                            location
+                          )}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="font-medium hover:underline truncate max-w-[180px] inline-block align-middle"
+                          style={{ color: brandColors.textColor }}
+                          title={location} // tooltip shows full text on hover
+                        >
+                          {shortText}
+                        </a>
+                      );
+                    })()}
+                  </li>
+                </ul>
+              </div>
+
+              {/* === Quick Links === */}
+              <div>
+                <h3
+                  className="text-sm font-semibold tracking-wider uppercase"
+                  style={{ color: brandColors.textColor }}
+                >
+                  {t("landingPage.quickLinks")}
+                </h3>
+                <ul className="mt-4 space-y-4 relative">
+                  {navItems.map((item) => (
+                    <button
+                      key={item.id}
+                      onClick={() => {
+                        setActiveTab(item.id);
+                        const el = document.getElementById(item.id);
+                        if (el) {
+                          el.scrollIntoView({
+                            behavior: "smooth",
+                            block: "start",
+                          });
+                        }
+                      }}
+                      className="relative flex items-center text-base transition-colors duration-300 cursor-pointer"
+                      style={{
+                        color:
+                          activeTab === item.id
+                            ? brandColors.primary
+                            : brandColors.mutedText,
+                      }}
+                    >
+                      {item.label}
+                      {activeTab === item.id && (
+                        <motion.div
+                          layoutId="activeTabIndicator"
+                          className="absolute bottom-0 left-0 right-0 h-0.5"
+                          style={{ backgroundColor: brandColors.primary }}
+                          transition={{
+                            type: "spring",
+                            bounce: 0.2,
+                            duration: 0.6,
+                          }}
+                        />
+                      )}
+                    </button>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* === Bottom Section === */}
+        <div
+          className="mt-12 pt-8 flex flex-col items-center justify-center text-center"
+          style={{ borderTop: `1px solid ${brandColors.borderColor}` }}
+        >
+          <p style={{ color: brandColors.mutedText }}>
+            &copy; {t("landingPage.copyright")} {new Date().getFullYear()}{" "}
+            {t("landingPage.rightsReserved")}
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/apps/edr-freight-web/backoffice/src/pages/HomePage/Header.tsx b/apps/edr-freight-web/backoffice/src/pages/HomePage/Header.tsx
new file mode 100644
index 000000000..645b72d9c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/HomePage/Header.tsx
@@ -0,0 +1,702 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence, Variants } from "framer-motion";
+import { useNavigate } from "react-router-dom";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { useTranslation } from "react-i18next";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { toast } from "sonner";
+import {
+  ChevronDown,
+  FileText,
+  Menu,
+  X,
+  User,
+  UserPlus as UserPen,
+  Key,
+  LogOut,
+  Cog,
+  Bolt,
+  Globe,
+  Moon,
+  Sun,
+} from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import { Button } from "@/shared/common/ui/button";
+import { useTheme } from "@/user-management/web-Management/hooks/useTheme";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useModules } from "@/user-management/web-Management/hooks/useModules";
+import { useDarkMode } from "@/shared/hooks/useDarkMode";
+import {
+  useTenantConfig,
+  resolveModuleConfig,
+} from "@/layout/components/TenantConfig";
+import {
+  UI_LANGUAGE_OPTIONS,
+  resolveUiLanguage,
+} from "@/shared/i18n/uiLanguages";
+
+interface NavItem {
+  id: string;
+  label?: string;
+  path?: string;
+  link?: string;
+  requiresCompleteRegistration?: true;
+  children?: NavItem[];
+  name?: {
+    am: string;
+    en: string;
+  };
+  description?: string;
+}
+
+const languageOptions = UI_LANGUAGE_OPTIONS;
+
+const Header = () => {
+  const [activeTab, setActiveTab] = useState("overview");
+  const [scrolled, setScrolled] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [openDropdown, setOpenDropdown] = useState<string | null>(null);
+  const navigate = useNavigate();
+  const { items: item } = useTheme();
+  const { userDetails, logout } = useAuthUser();
+  const { t, i18n } = useTranslation();
+  const currentLanguage = resolveUiLanguage(i18n.language);
+  const { config: tenantConfig } = useTenantConfig();
+  const moduleConfig = resolveModuleConfig(tenantConfig);
+  const localizedName = useLocalizedName();
+  const hasCompletedRegistration = userDetails?.hasFinishedRegistration;
+  const baseParams = {
+    isActive: true,
+  };
+  const { items: modules } = useModules(baseParams);
+  const fullName = localizedName(userDetails?.name) || t("header.user");
+  const splittedName = fullName.trim().split(" ");
+  const initials =
+    splittedName.length === 1
+      ? splittedName[0][0]
+      : `${splittedName[0][0]}${splittedName[1][0]}`;
+
+  const changeLanguage = (lng: string) => {
+    i18n.changeLanguage(lng);
+  };
+
+  const handleLogout = () => {
+    logout();
+  };
+
+  const { isDarkMode, toggleDarkMode } = useDarkMode();
+
+  useEffect(() => {
+    if (!localStorage.getItem("i18nextLng")) {
+      i18n.changeLanguage("am");
+      localStorage.setItem("i18nextLng", "am");
+    }
+  }, [i18n]);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 10);
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+  const isSuperAdmin = userDetails?.roles?.some(
+    (role) => role.key === "super_admin",
+  );
+  const isOrgAdmin = userDetails?.roles?.some(
+    (role) => role.key === "unit_admin" || role.key === "organization_admin",
+  );
+  const navItems: NavItem[] = [
+    {
+      id: "Modules",
+      label: t("nav.modules"),
+      children: [
+        ...(moduleConfig.recordManagement
+          ? [
+              {
+                id: "recordManagement",
+                label: t("nav.Record Management"),
+                path: "/record-management/dashboard",
+                description: t("msg.recordDes"),
+              },
+            ]
+          : []),
+        ...(moduleConfig.performance
+          ? [
+              {
+                id: "performanceManagement",
+                label: t("nav.PerformanceManagement"),
+                path: "/performance-management/plan-years",
+                description: t("nav.PerformanceManagement"),
+              },
+            ]
+          : []),
+        ...(moduleConfig.objective
+          ? [
+              {
+                id: "objectiveManagement",
+                label: t("nav.objectiveManagement"),
+                path: "/objective-management/plan-years",
+                description: t("nav.objectiveManagement"),
+              },
+            ]
+          : []),
+        ...(moduleConfig.dms
+          ? [
+              {
+                id: "documentManagement",
+                label: t("nav.DocumentManagement"),
+                path: "/dms/dashboard",
+                description: t("nav.DocumentManagement"),
+              },
+            ]
+          : []),
+        ...(isOrgAdmin && moduleConfig.siteManagement
+          ? [
+              {
+                id: "orgAdmin",
+                label: t("nav.admin"),
+                path: "/user-management/user_management-dashboard",
+                description: t("msg.orgAdminDes"),
+              },
+            ]
+          : []),
+        ...(isSuperAdmin
+          ? [
+              {
+                id: "superAdmin",
+                label: t("OrganizationAdmin"),
+                path: "/user-management/dashboard",
+              },
+            ]
+          : []),
+      ],
+    },
+    { id: "OfficeHeadMessage", label: t("nav.officeHeadMessage") },
+    { id: "DeputyMessage", label: t("nav.deputyMessage") },
+    {
+      id: "OrganizationGoal",
+      label: t("nav.orgGoal"),
+    },
+    { id: "NewsSection", label: t("nav.news") },
+    ...(modules && modules.length > 0
+      ? [
+          {
+            id: "Other",
+            label: t("nav.other"),
+            children:
+              modules?.map((i) => ({
+                id: i.id,
+                name: i.label,
+                link: i.link,
+                description: localizedName(i.description),
+              })) || [],
+          },
+        ]
+      : []),
+  ];
+  const handleNavClick = (item: NavItem) => {
+    if (item.requiresCompleteRegistration && !hasCompletedRegistration) {
+      toast.error(t("registration.registrationRequired"));
+      return;
+    }
+
+    if (item.path) {
+      navigate(item.path);
+      setMobileMenuOpen(false);
+      return;
+    }
+
+    if (item.link) {
+      let url = item.link.trim();
+
+      // 🧹 Fix common typos like "https//:" or "http//:"
+      url = url.replace(/^https?\/\/:/i, "https://");
+
+      // 🌐 If it doesn't start with http/https, add https://
+      if (!/^https?:\/\//i.test(url)) {
+        url = `https://${url.replace(/^\/+/, "")}`; // remove leading slashes
+      }
+
+      // ✅ Finally open the link safely in a new tab
+      window.open(url, "_blank", "noopener,noreferrer");
+      setMobileMenuOpen(false);
+    }
+  };
+
+  const mobileMenuVariants = {
+    hidden: {
+      opacity: 0,
+      height: 0,
+      transition: { duration: 0.3, when: "afterChildren" },
+    },
+    visible: {
+      opacity: 1,
+      height: "auto",
+      transition: {
+        duration: 0.3,
+        when: "beforeChildren",
+        staggerChildren: 0.08,
+      },
+    },
+  };
+
+  const mobileItemVariants: Variants = {
+    hidden: { x: -20, opacity: 0 },
+    visible: {
+      x: 0,
+      opacity: 1,
+      transition: { type: "spring" as const, stiffness: 300, damping: 30 },
+    },
+  };
+
+  const servicesVariants = {
+    hidden: { opacity: 0, y: -15, scale: 0.92 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      transition: { duration: 0.25, staggerChildren: 0.06 },
+    },
+  };
+
+  const serviceItemVariants = {
+    hidden: { opacity: 0, x: -10 },
+    visible: { opacity: 1, x: 0 },
+  };
+
+  const getServiceIcon = (id: string, isOrgAdmin: any, isSuperAdmin: any) => {
+    switch (id) {
+      case "recordManagement":
+        return <FileText className="w-4 h-4" />;
+
+      case "orgAdmin":
+        return isOrgAdmin ? <Cog className="w-4 h-4" /> : null;
+      case "superAdmin":
+        return isSuperAdmin ? <Bolt className="w-4 h-4" /> : null;
+
+      default:
+        return <Globe className="w-4 h-4" />;
+    }
+  };
+
+  const getCurrentLanguageDisplay = () => {
+    const currentLang = languageOptions.find(
+      (lang) => lang.value === currentLanguage,
+    );
+    return currentLang ? currentLang.label : "English";
+  };
+  return (
+    <>
+      <nav
+        className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
+          scrolled
+            ? "bg-white/95 dark:bg-gray-900/95 backdrop-blur-md shadow-lg border-b border-gray-100 dark:border-gray-800"
+            : "bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm shadow-sm border-b border-gray-50 dark:border-gray-800"
+        }`}
+      >
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-16 md:h-20">
+            <div className="flex items-center gap-3 md:gap-4">
+              <motion.img
+                src={tenantConfig.logo}
+                alt={tenantConfig.appName}
+                className="h-10 w-15 md:h-17 md:w-25 rounded-lg object-contain cursor-pointer shadow-sm hover:shadow-md transition-shadow"
+                whileHover={{ scale: 1.08 }}
+                whileTap={{ scale: 0.95 }}
+                onClick={() => navigate("/")}
+              />
+            </div>
+            <div className="hidden md:flex md:gap-2 lg:gap-4 items-center flex-1 ml-8">
+              {navItems.map((item) => (
+                <div key={item?.id} className="relative group">
+                  {item?.children ? (
+                    <div
+                      className="relative"
+                      onMouseEnter={() => setOpenDropdown(item.id)}
+                      onMouseLeave={() => setOpenDropdown(null)}
+                    >
+                      <motion.button
+                        onClick={() =>
+                          setOpenDropdown(
+                            openDropdown === item.id ? null : item.id,
+                          )
+                        }
+                        className={`relative inline-flex items-center gap-1.5 px-3 py-2 text-sm lg:text-base font-medium transition-all duration-200 rounded-lg ${
+                          activeTab === item?.id
+                            ? "text-primary bg-primary/10 dark:bg-primary/20"
+                            : "text-gray-700 dark:text-gray-300 hover:text-primary hover:bg-gray-50 dark:hover:bg-gray-800"
+                        }`}
+                        whileHover={{ y: -2 }}
+                      >
+                        {item?.label || localizedName(item?.name)}
+                        <ChevronDown
+                          className={`w-4 h-4 transition-transform duration-300 ${
+                            openDropdown === item.id ? "rotate-180" : ""
+                          }`}
+                        />
+                      </motion.button>
+
+                      <AnimatePresence>
+                        {openDropdown === item.id && (
+                          <motion.div
+                            initial="hidden"
+                            animate="visible"
+                            exit="hidden"
+                            variants={servicesVariants}
+                            className="absolute top-full left-0 mt-2 w-80 bg-white dark:bg-gray-900 rounded-xl shadow-xl border border-gray-100 dark:border-gray-800 z-50 overflow-hidden"
+                          >
+                            <div className="py-2">
+                              {item?.children.map((child) => (
+                                <div
+                                  key={child.id}
+                                  className="group/child relative"
+                                >
+                                  <motion.button
+                                    variants={serviceItemVariants}
+                                    onClick={() => handleNavClick(child)}
+                                    className="w-full text-left hover:bg-primary/20 dark:hover:bg-primary/30 hover:text-primary transition-all duration-200"
+                                  >
+                                    <div className="flex items-start gap-3 px-4 py-3">
+                                      <span className="text-primary-600 dark:text-primary-400 flex-shrink-0 mt-0.5">
+                                        {getServiceIcon(
+                                          child.id,
+                                          isOrgAdmin,
+                                          isSuperAdmin,
+                                        )}
+                                      </span>
+                                      <div className="flex-1">
+                                        <div className="font-medium text-sm text-gray-900 dark:text-gray-100">
+                                          {child.label ||
+                                            localizedName(child.name)}
+                                        </div>
+                                        {child.description && (
+                                          <div className="text-xs text-gray-500 dark:text-gray-400 mt-1 max-h-0 overflow-hidden group-hover/child:max-h-20 transition-all duration-300">
+                                            {child.description}
+                                          </div>
+                                        )}
+                                      </div>
+                                    </div>
+                                  </motion.button>
+                                </div>
+                              ))}
+                            </div>
+                          </motion.div>
+                        )}
+                      </AnimatePresence>
+                    </div>
+                  ) : (
+                    <motion.button
+                      onClick={() => {
+                        setActiveTab(item?.id);
+                        if (item?.path) {
+                          handleNavClick(item);
+                        } else {
+                          const el = document.getElementById(item?.id);
+                          if (el) {
+                            el.scrollIntoView({
+                              behavior: "smooth",
+                              block: "start",
+                            });
+                          }
+                        }
+                      }}
+                      className={`relative inline-flex items-center px-3 py-2 text-sm lg:text-base font-medium transition-all duration-200 rounded-lg ${
+                        activeTab === item?.id
+                          ? "text-primary bg-primary/10 dark:bg-primary/20"
+                          : "text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary-400 hover:bg-gray-50 dark:hover:bg-gray-800"
+                      }`}
+                      whileHover={{ y: -2 }}
+                    >
+                      {item?.label || localizedName(item?.name)}
+                      {activeTab === item?.id && (
+                        <motion.div
+                          layoutId="activeTabIndicator"
+                          className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary"
+                          transition={{
+                            type: "spring",
+                            bounce: 0.2,
+                            duration: 0.6,
+                          }}
+                        />
+                      )}
+                    </motion.button>
+                  )}
+                </div>
+              ))}
+            </div>
+            <div className="hidden md:flex items-center gap-3 lg:gap-4">
+              <motion.button
+                onClick={toggleDarkMode}
+                className="p-2 rounded-lg text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800 transition-colors"
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                aria-label={
+                  isDarkMode ? t("header.lightMode") : t("header.darkMode")
+                }
+              >
+                {isDarkMode ? (
+                  <Sun className="w-5 h-5" />
+                ) : (
+                  <Moon className="w-5 h-5" />
+                )}
+              </motion.button>
+
+              <div className="w-32 lg:w-36">
+                <Select
+                  value={currentLanguage}
+                  onValueChange={(lng) => changeLanguage(lng)}
+                >
+                  <SelectTrigger className="w-full text-sm rounded-lg border border-gray-200 px-3 py-2 shadow-sm hover:border-primary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all">
+                    <SelectValue>{getCurrentLanguageDisplay()}</SelectValue>
+                  </SelectTrigger>
+                  <SelectContent>
+                    {languageOptions.map((lang) => (
+                      <SelectItem key={lang.value} value={lang.value}>
+                        {lang.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    className="flex items-center gap-2 h-10 px-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+                    aria-label={t("header.userMenu")}
+                  >
+                    <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-primary-600 text-primary-foreground font-semibold text-sm shadow-md">
+                      {initials.toUpperCase()}
+                    </div>
+                    <div className="hidden sm:flex flex-col items-start">
+                      <span className="text-xs font-semibold leading-none">
+                        {localizedName(userDetails?.name) || ""}
+                      </span>
+                      <span className="text-[10px] text-gray-500 dark:text-gray-400 leading-none mt-0.5">
+                        {userDetails?.roles && userDetails.roles.length > 0
+                          ? "User Role"
+                          : "User"}
+                      </span>
+                    </div>
+                    <ChevronDown className="h-4 w-4 text-gray-500" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  className="w-56 p-2 bg-white dark:bg-gray-900 shadow-xl rounded-xl border border-gray-100 dark:border-gray-800"
+                  align="end"
+                >
+                  <DropdownMenuItem
+                    className="flex items-center gap-3 px-3 py-2.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-primary-50 dark:hover:bg-primary-900/30 hover:text-primary-700 dark:hover:text-primary-400 rounded-lg cursor-pointer transition-colors"
+                    onClick={() => navigate("/profile")}
+                  >
+                    <User className="w-4 h-4 text-primary-600 dark:text-primary-400" />
+                    <span className="font-medium">
+                      {t("header.viewProfile")}
+                    </span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    className="flex items-center gap-3 px-3 py-2.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-primary-50 dark:hover:bg-primary-900/30 hover:text-primary-700 dark:hover:text-primary-400 rounded-lg cursor-pointer transition-colors"
+                    onClick={() => navigate("/update-profile")}
+                  >
+                    <UserPen className="w-4 h-4 text-primary-600 dark:text-primary-400" />
+                    <span className="font-medium">
+                      {t("header.editProfile")}
+                    </span>
+                  </DropdownMenuItem>
+
+                  <DropdownMenuItem
+                    className="flex items-center gap-3 px-3 py-2.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-primary-50 dark:hover:bg-primary-900/30 hover:text-primary-700 dark:hover:text-primary-400 rounded-lg cursor-pointer transition-colors"
+                    onClick={() => navigate("/change-password")}
+                  >
+                    <Key className="w-4 h-4 text-primary-600 dark:text-primary-400" />
+                    <span className="font-medium">
+                      {t("header.changePassword")}
+                    </span>
+                  </DropdownMenuItem>
+
+                  <DropdownMenuSeparator className="my-2 h-px bg-gray-100 dark:bg-gray-800" />
+
+                  <DropdownMenuItem
+                    className="flex items-center gap-3 px-3 py-2.5 text-sm text-red-600 hover:bg-red-50 rounded-lg cursor-pointer transition-colors"
+                    onClick={handleLogout}
+                  >
+                    <LogOut className="w-4 h-4" />
+                    <span className="font-medium">{t("header.signOut")}</span>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+
+            <div className="flex items-center md:hidden gap-2">
+              <motion.button
+                onClick={toggleDarkMode}
+                className="p-2 rounded-lg text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800 transition-colors"
+                whileTap={{ scale: 0.9 }}
+                aria-label={
+                  isDarkMode ? t("header.lightMode") : t("header.darkMode")
+                }
+              >
+                {isDarkMode ? (
+                  <Sun className="h-5 w-5" />
+                ) : (
+                  <Moon className="h-5 w-5" />
+                )}
+              </motion.button>
+
+              <motion.button
+                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+                className="inline-flex items-center justify-center p-2 rounded-lg text-gray-600 hover:text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500 transition-all"
+                aria-expanded="false"
+                whileTap={{ scale: 0.9 }}
+              >
+                <span className="sr-only">Open main menu</span>
+                {mobileMenuOpen ? (
+                  <X className="h-6 w-6" />
+                ) : (
+                  <Menu className="h-6 w-6" />
+                )}
+              </motion.button>
+            </div>
+          </div>
+        </div>
+
+        <AnimatePresence>
+          {mobileMenuOpen && (
+            <motion.div
+              initial="hidden"
+              animate="visible"
+              exit="hidden"
+              variants={mobileMenuVariants}
+              className="md:hidden overflow-hidden bg-white dark:bg-gray-900 border-t border-gray-100 dark:border-gray-800 shadow-xl"
+            >
+              <motion.div className="pt-2 pb-4 space-y-1 px-4">
+                {navItems.map((item) => (
+                  <div key={item?.id}>
+                    {item?.children ? (
+                      <div>
+                        <motion.button
+                          onClick={() =>
+                            setOpenDropdown(
+                              openDropdown === item.id ? null : item.id,
+                            )
+                          }
+                          className={`block w-full text-left px-3 py-3 rounded-lg text-base font-medium transition-all duration-200 ${
+                            activeTab === item?.id
+                              ? "bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-400"
+                              : "text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-primary-600 dark:hover:text-primary-400"
+                          }`}
+                          whileHover={{ x: 4 }}
+                        >
+                          <div className="flex items-center justify-between">
+                            {item?.label || localizedName(item?.name)}
+                            <ChevronDown
+                              className={`w-4 h-4 transition-transform ${
+                                openDropdown === item.id ? "rotate-180" : ""
+                              }`}
+                            />
+                          </div>
+                        </motion.button>
+
+                        <AnimatePresence>
+                          {openDropdown === item.id && (
+                            <motion.div
+                              initial={{ opacity: 0, height: 0 }}
+                              animate={{ opacity: 1, height: "auto" }}
+                              exit={{ opacity: 0, height: 0 }}
+                              className="pl-4 overflow-hidden"
+                            >
+                              {item.children.map((child) => (
+                                <motion.button
+                                  key={child.id}
+                                  onClick={() => handleNavClick(child)}
+                                  className="block w-full text-left px-3 py-2.5 text-sm text-gray-600 dark:text-gray-400 hover:bg-primary-50 dark:hover:bg-primary-900/30 hover:text-primary-700 dark:hover:text-primary-400 rounded-lg transition-colors"
+                                  whileHover={{ x: 4 }}
+                                >
+                                  <div className="flex items-center gap-2">
+                                    <span className="text-primary-600 dark:text-primary-400">
+                                      {getServiceIcon(
+                                        child.id,
+                                        isOrgAdmin,
+                                        isSuperAdmin,
+                                      )}
+                                    </span>
+                                    {child.label || localizedName(child.name)}
+                                  </div>
+                                </motion.button>
+                              ))}
+                            </motion.div>
+                          )}
+                        </AnimatePresence>
+                      </div>
+                    ) : (
+                      <motion.button
+                        variants={mobileItemVariants}
+                        onClick={() => {
+                          setActiveTab(item?.id);
+                          setMobileMenuOpen(false);
+                          if (item.path) {
+                            handleNavClick(item);
+                          }
+                        }}
+                        whileHover={{ x: 4 }}
+                        whileTap={{ scale: 0.98 }}
+                        className={`block w-full text-left px-3 py-3 rounded-lg text-base font-medium transition-all duration-200 ${
+                          activeTab === item?.id
+                            ? "bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-400"
+                            : "text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-primary-600 dark:hover:text-primary-400"
+                        }`}
+                      >
+                        {item?.label || localizedName(item?.name)}
+                      </motion.button>
+                    )}
+                  </div>
+                ))}
+
+                <motion.div
+                  variants={mobileItemVariants}
+                  className="pt-4 pb-2 border-t border-gray-100 space-y-3"
+                >
+                  <div className="px-2">
+                    <Select
+                      value={currentLanguage}
+                      onValueChange={(lng) => changeLanguage(lng)}
+                    >
+                      <SelectTrigger className="w-full text-sm bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-2.5 shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 transition-all">
+                        <SelectValue>{getCurrentLanguageDisplay()}</SelectValue>
+                      </SelectTrigger>
+                      <SelectContent>
+                        {languageOptions.map((lang) => (
+                          <SelectItem key={lang.value} value={lang.value}>
+                            {lang.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </motion.div>
+              </motion.div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </nav>
+    </>
+  );
+};
+
+export default Header;
diff --git a/apps/edr-freight-web/backoffice/src/pages/HomePage/NewsSection.tsx b/apps/edr-freight-web/backoffice/src/pages/HomePage/NewsSection.tsx
new file mode 100644
index 000000000..de71b9386
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/HomePage/NewsSection.tsx
@@ -0,0 +1,452 @@
+import React, { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useNews } from "@/user-management/web-Management/hooks/useNews";
+import { useNewsCategory } from "@/user-management/web-Management/hooks/useNewsCategory";
+import { useTheme } from "@/user-management/web-Management/hooks/useTheme";
+
+const FeaturedNews = () => {
+  const { t } = useTranslation();
+  const localizedName = useLocalizedName();
+
+  const [activeCategory, setActiveCategory] = useState("all");
+  const [visibleNews, setVisibleNews] = useState(6);
+  const [isMobile, setIsMobile] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [filterType, setFilterType] = useState("Department");
+  const [statusFilter, setStatusFilter] = useState<string>("all");
+  const [selectedArticle, setSelectedArticle] = useState<any>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const searchParams: Record<string, string> = {};
+  if (searchQuery) {
+    switch (filterType) {
+      case "Department":
+        searchParams.sendingPosition = searchQuery;
+        break;
+      case "Subject":
+        searchParams.subject = searchQuery;
+        break;
+      case "Reference Number":
+        searchParams.referenceNumber = searchQuery;
+        break;
+    }
+  }
+
+  const baseParams = { isActive: true };
+  const baseParams2 = { isActive: true, isFeatured: true };
+
+  const { items: news, count: newsCount } = useNews(baseParams);
+  const { items: featurednews, count: featuredCount } = useNews(baseParams2);
+  const { items: newsCategory } = useNewsCategory(baseParams);
+  const { items: theme } = useTheme();
+
+  const INITIAL_NEWS_COUNT = 6;
+  const LOAD_MORE_COUNT = 3;
+
+  useEffect(() => {
+    const checkScreenSize = () => setIsMobile(window.innerWidth < 768);
+    checkScreenSize();
+    window.addEventListener("resize", checkScreenSize);
+    return () => window.removeEventListener("resize", checkScreenSize);
+  }, []);
+
+  const loadMoreNews = () => setVisibleNews((prev) => prev + LOAD_MORE_COUNT);
+  const showLessNews = () => setVisibleNews(INITIAL_NEWS_COUNT);
+
+  const openArticleModal = (article: any) => {
+    setSelectedArticle(article);
+    setIsModalOpen(true);
+  };
+
+  const closeArticleModal = () => {
+    setIsModalOpen(false);
+    setSelectedArticle(null);
+  };
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    if (isNaN(date.getTime())) return "-";
+    return date.toLocaleDateString(undefined, {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
+  };
+
+  function lightenColor(color: string, percent: number) {
+    const R = parseInt(color.substring(1, 3), 16);
+    const G = parseInt(color.substring(3, 5), 16);
+    const B = parseInt(color.substring(5, 7), 16);
+
+    const newR = Math.min(255, R + Math.round((255 - R) * (percent / 100)));
+    const newG = Math.min(255, G + Math.round((255 - G) * (percent / 100)));
+    const newB = Math.min(255, B + Math.round((255 - B) * (percent / 100)));
+
+    return `#${newR.toString(16).padStart(2, "0")}${newG
+      .toString(16)
+      .padStart(2, "0")}${newB.toString(16).padStart(2, "0")}`;
+  }
+
+  const renderArticleContent = (content: string) => {
+    if (!content) return null;
+
+    return content.split("\n\n").map((paragraph, index) => (
+      <p key={index} className="text-gray-700 leading-relaxed mb-4">
+        {paragraph}
+      </p>
+    ));
+  };
+
+  return (
+    <>
+      <div
+        className="min-h-screen py-12 px-4 sm:px-6 lg:px-8"
+        style={{
+          background: `linear-gradient(
+            to bottom,
+            ${
+              theme?.find((i) => i.type === "PRIMARY_COLOR")?.value
+                ? lightenColor(
+                    theme.find((i) => i.type === "PRIMARY_COLOR")!.value,
+                    30
+                  )
+                : "var(--primary-300)"
+            },
+            ${
+              theme?.find((i) => i.type === "SECONDARY_COLOR")?.value
+                ? lightenColor(
+                    theme.find((i) => i.type === "SECONDARY_COLOR")!.value,
+                    55
+                  )
+                : "var(--primary-300)"
+            }
+          )`,
+        }}
+      >
+        <div className="max-w-7xl mx-auto">
+          {/* Header */}
+          <div className="text-center mb-12">
+            <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
+              {t("newssection.featuredNews")}
+            </h1>
+            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+              {t("newssection.description")}
+            </p>
+            <div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto mt-6 rounded-full"></div>
+          </div>
+
+          {/* Search & Filter */}
+          <div className="mb-12 bg-white rounded-2xl shadow-lg p-6">
+            <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+              <div className="flex-1 relative">
+                <input
+                  type="text"
+                  placeholder={t("newssection.searchPlaceholder")}
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-300"
+                />
+              </div>
+
+              <div className="flex flex-wrap gap-2">
+                {newsCategory?.map((category) => (
+                  <button
+                    key={category.id}
+                    onClick={() => {
+                      setStatusFilter(category.newsCategoryTitle?.en || "");
+                      setVisibleNews(INITIAL_NEWS_COUNT);
+                    }}
+                    className={`px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 ${
+                      activeCategory === category.newsCategoryTitle?.en
+                        ? "bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-lg"
+                        : "bg-white text-gray-700 border border-gray-300 hover:border-blue-500"
+                    }`}
+                  >
+                    {localizedName(category.newsCategoryTitle).toUpperCase()}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* Featured News */}
+          <div className="mb-12">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6">
+              {t("newssection.topStories")}
+            </h2>
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+              {featurednews?.map((article) => (
+                <div
+                  key={article.id}
+                  className="bg-white rounded-2xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl group"
+                >
+                  <div className="relative overflow-hidden">
+                    <img
+                      src={article.presigned}
+                      alt={localizedName(article.title)}
+                      className="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110"
+                    />
+                    <div className="absolute top-4 left-4">
+                      <span
+                        className="px-3 py-1 rounded-full text-xs font-semibold"
+                        style={{
+                          backgroundColor: article.newsCategory?.color || "",
+                        }}
+                      >
+                        {localizedName(article.newsCategory?.newsCategoryTitle)}
+                      </span>
+                    </div>
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
+                    <div className="absolute bottom-4 left-4 right-4 text-white">
+                      <h3 className="text-xl font-bold mb-2 line-clamp-2">
+                        {localizedName(article?.title)}
+                      </h3>
+                      <div className="flex items-center text-sm text-gray-200">
+                        <span>{formatDate(article?.createdAt)}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="p-6">
+                    <p className="text-gray-600 mb-4 line-clamp-3">
+                      {localizedName(article?.subTitle)}
+                    </p>
+                    <button
+                      onClick={() => openArticleModal(article)}
+                      className="text-blue-600 font-semibold hover:text-blue-700 transition-colors flex items-center"
+                    >
+                      {t("newssection.readFullStory")}
+                      <svg
+                        className="ml-1 w-4 h-4"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M9 5l7 7-7 7"
+                        />
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* News Grid */}
+          <div className="mb-12">
+            <h2 className="text-2xl font-bold text-gray-900 mb-6">
+              {activeCategory === "all"
+                ? t("newssection.allNews")
+                : `${
+                    activeCategory.charAt(0).toUpperCase() +
+                    activeCategory.slice(1)
+                  } ${t("newssection.allNews")}`}
+              <span className="text-gray-500 text-lg ml-2">({newsCount})</span>
+            </h2>
+
+            {newsCount === 0 ? (
+              <div className="text-center py-12">
+                <h3 className="text-xl font-semibold text-gray-600 mb-2">
+                  {t("newssection.noNewsFound")}
+                </h3>
+                <p className="text-gray-500">
+                  {t("newssection.noNewsFoundDesc")}
+                </p>
+              </div>
+            ) : (
+              <>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  {news?.slice(0, visibleNews).map((article) => (
+                    <div
+                      key={article.id}
+                      className="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg hover:scale-105 group"
+                    >
+                      <div className="relative overflow-hidden">
+                        <img
+                          src={article.presigned}
+                          alt={localizedName(article?.title)}
+                          className="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110"
+                        />
+                        <div className="absolute top-3 left-3">
+                          <span
+                            className="px-3 py-1 rounded-full text-xs font-semibold"
+                            style={{
+                              backgroundColor:
+                                article.newsCategory?.color || "var(--primary-100)",
+                            }}
+                          >
+                            {localizedName(
+                              article?.newsCategory?.newsCategoryTitle
+                            )}
+                          </span>
+                        </div>
+                      </div>
+                      <div className="p-5">
+                        <div className="flex items-center text-sm text-gray-500 mb-2">
+                          <span>{formatDate(article.updatedAt)}</span>
+                        </div>
+                        <h3 className="text-lg font-bold text-gray-900 mb-2 line-clamp-2 group-hover:text-blue-600 transition-colors">
+                          {localizedName(article.title)}
+                        </h3>
+                        <p className="text-gray-600 text-sm mb-4 line-clamp-3">
+                          {localizedName(article?.subTitle)}
+                        </p>
+                        <button
+                          onClick={() => openArticleModal(article)}
+                          className="text-blue-600 text-sm font-semibold hover:text-blue-700 transition-colors flex items-center"
+                        >
+                          {t("newssection.readMore")}
+                          <svg
+                            className="ml-1 w-3 h-3"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M9 5l7 7-7 7"
+                            />
+                          </svg>
+                        </button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+
+                {(newsCount || 0) > INITIAL_NEWS_COUNT && (
+                  <div className="text-center mt-8 flex justify-center gap-4">
+                    {visibleNews < (newsCount || 0) && (
+                      <button
+                        onClick={loadMoreNews}
+                        className="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-8 py-3 rounded-xl font-semibold hover:shadow-lg transition-all duration-300 transform hover:scale-105"
+                      >
+                        {t("newssection.loadMoreNews")} (
+                        {(newsCount || 0) - visibleNews} remaining)
+                      </button>
+                    )}
+                    {visibleNews > INITIAL_NEWS_COUNT && (
+                      <button
+                        onClick={showLessNews}
+                        className="bg-gray-200 text-gray-700 px-8 py-3 rounded-xl font-semibold hover:bg-gray-300 transition-all duration-300 transform hover:scale-105"
+                      >
+                        {t("newssection.showLess")}
+                      </button>
+                    )}
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* News Article Modal */}
+      {isModalOpen && selectedArticle && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+          <div className="bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-hidden flex flex-col">
+            {/* Modal Header */}
+            <div className="relative">
+              <img
+                src={selectedArticle.presigned}
+                alt={localizedName(selectedArticle.title)}
+                className="w-full h-64 object-cover"
+              />
+              <div className="absolute top-4 left-4">
+                <span
+                  className="px-3 py-1 rounded-full text-xs font-semibold text-white"
+                  style={{
+                    backgroundColor:
+                      selectedArticle.newsCategory?.color || "rgba(0,0,0,0.7)",
+                  }}
+                >
+                  {localizedName(
+                    selectedArticle.newsCategory?.newsCategoryTitle
+                  )}
+                </span>
+              </div>
+              <button
+                onClick={closeArticleModal}
+                className="absolute top-4 right-4 text-white bg-black/50 hover:bg-black/70 rounded-full p-2 transition-colors duration-200"
+              >
+                <svg
+                  className="w-6 h-6"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </button>
+              <div className="absolute bottom-4 left-4 right-4 text-white">
+                <h2 className="text-2xl md:text-3xl font-bold mb-2">
+                  {localizedName(selectedArticle.title)}
+                </h2>
+                <div className="flex items-center text-sm text-gray-200">
+                  <span>{formatDate(selectedArticle.createdAt)}</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Modal Content */}
+            <div className="p-6 overflow-y-auto custom-scrollbar flex-1">
+              <div className="prose prose-lg max-w-none">
+                <h3 className="text-xl font-semibold text-gray-800 mb-4">
+                  {localizedName(selectedArticle.subTitle)}
+                </h3>
+                {renderArticleContent(
+                  localizedName(selectedArticle.content) ||
+                    localizedName(selectedArticle.subTitle)
+                )}
+
+                {/* Additional article details */}
+                <div className="mt-8 pt-6 border-t border-gray-200">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-gray-600">
+                    <div>
+                      <span className="font-semibold">Published: </span>
+                      {formatDate(selectedArticle.createdAt)}
+                    </div>
+                    <div>
+                      <span className="font-semibold">Last Updated: </span>
+                      {formatDate(selectedArticle.updatedAt)}
+                    </div>
+                    {selectedArticle.referenceNumber && (
+                      <div>
+                        <span className="font-semibold">Reference: </span>
+                        {selectedArticle.referenceNumber}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Modal Footer */}
+            <div className="border-t border-gray-200 bg-gray-50 flex-shrink-0">
+              <div className="p-4 text-center">
+                <button
+                  onClick={closeArticleModal}
+                  className="px-6 py-2 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
+                >
+                  {t("preview.close") || "Close"}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default FeaturedNews;
diff --git a/apps/edr-freight-web/backoffice/src/pages/HomePage/OfficeHeadMessage.tsx b/apps/edr-freight-web/backoffice/src/pages/HomePage/OfficeHeadMessage.tsx
new file mode 100644
index 000000000..9bcb34499
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/HomePage/OfficeHeadMessage.tsx
@@ -0,0 +1,318 @@
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useMessage } from "@/user-management/web-Management/hooks/useMessage";
+import { useTheme } from "@/user-management/web-Management/hooks/useTheme";
+import { useTenantConfig } from "@/layout/components/TenantConfig";
+import React, { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+
+const OfficeHeadMessage = () => {
+  const [isMobile, setIsMobile] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [showReadMore, setShowReadMore] = useState(false);
+  const [messageRef, setMessageRef] = useState<HTMLDivElement | null>(null);
+  const { t } = useTranslation();
+
+  const baseParams = {
+    isActive: true,
+  };
+  const { items } = useMessage(baseParams);
+  const localizedName = useLocalizedName();
+  const { items: theme } = useTheme();
+  const { config: tenantConfig } = useTenantConfig();
+  const officeHead = items?.find((i) => i.staffType === "office_head");
+
+  const isPersonPhoto = !!officeHead?.presigned;
+  const imageSrc = officeHead?.presigned || tenantConfig.logo || "";
+  const displayName =
+    localizedName(officeHead?.employee?.name) || tenantConfig.organizationName;
+  const displayPosition = localizedName(
+    officeHead?.employee?.employeePositions?.[0]?.position?.name
+  ) || "";
+
+  useEffect(() => {
+    const checkScreenSize = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+    checkScreenSize();
+    window.addEventListener("resize", checkScreenSize);
+    return () => {
+      window.removeEventListener("resize", checkScreenSize);
+    };
+  }, []);
+
+  // Check if content overflows after render
+  useEffect(() => {
+    if (messageRef) {
+      const isOverflowing = messageRef.scrollHeight > messageRef.clientHeight;
+      setShowReadMore(isOverflowing);
+    }
+  }, [messageRef, officeHead]);
+
+  const getMessageContent = () => {
+    return (
+      localizedName(officeHead?.messageContent) ||
+      tenantConfig.welcomeMessage ||
+      t("msg.waitingMsg")
+    );
+  };
+
+  const renderMessagePreview = () => {
+    const message = getMessageContent();
+    return message.split("\n\n").map((paragraph, index) => (
+      <p key={index} className="text-gray-700 text-lg leading-relaxed mb-4">
+        {paragraph}
+      </p>
+    ));
+  };
+
+  const renderFullMessage = () => {
+    const message = getMessageContent();
+    return message.split("\n\n").map((paragraph, index) => (
+      <p key={index} className="text-gray-700 text-lg leading-relaxed mb-4">
+        {paragraph}
+      </p>
+    ));
+  };
+
+  function lightenColor(color: string, percent: number) {
+    const R = parseInt(color.substring(1, 3), 16);
+    const G = parseInt(color.substring(3, 5), 16);
+    const B = parseInt(color.substring(5, 7), 16);
+    const newR = Math.min(255, R + Math.round((255 - R) * (percent / 100)));
+    const newG = Math.min(255, G + Math.round((255 - G) * (percent / 100)));
+    const newB = Math.min(255, B + Math.round((255 - B) * (percent / 100)));
+    return `#${newR.toString(16).padStart(2, "0")}${newG
+      .toString(16)
+      .padStart(2, "0")}${newB.toString(16).padStart(2, "0")}`;
+  }
+
+  return (
+    <>
+      <div
+        className="min-h-screen flex items-center justify-center pt-1 pb-4 px-4 md:pt-1 md:pb-10 md:px-10"
+        style={{
+          background: `linear-gradient(
+            to bottom,
+            ${lightenColor(
+              theme?.find((i) => i.type === "PRIMARY_COLOR")?.value ||
+                tenantConfig.primaryColor,
+              30,
+            )},
+            ${lightenColor(
+              theme?.find((i) => i.type === "SECONDARY_COLOR")?.value ||
+                tenantConfig.secondaryColor ||
+                tenantConfig.primaryColor,
+              55,
+            )}
+          )`,
+        }}
+      >
+        <div className="max-w-6xl w-full">
+          <div className="text-center mb-12">
+            <h1 className="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
+              {t("officeHead.title")}
+            </h1>
+            <div className="w-24 h-1 bg-indigo-600 mx-auto"></div>
+          </div>
+
+          <div className="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl">
+            <div className="flex flex-col md:flex-row">
+              {/* Image / Logo Section */}
+              <div className="md:w-2/5 relative">
+                <img
+                  src={imageSrc}
+                  alt={displayName}
+                  className={`w-full h-64 md:h-full transition-opacity duration-500 ${
+                    isPersonPhoto
+                      ? "object-cover"
+                      : "object-contain bg-white p-6"
+                  }`}
+                />
+
+                {/* Name and Position Overlay */}
+                <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent flex items-end p-6 md:p-8">
+                  <div>
+                    <h2 className="text-2xl md:text-3xl font-bold text-white mb-2">
+                      {displayName}
+                    </h2>
+                    {displayPosition && (
+                      <p className="text-gray-200 text-lg">{displayPosition}</p>
+                    )}
+                  </div>
+                </div>
+
+                {/* Decorative Element */}
+                <div className="absolute top-6 right-6 bg-white text-indigo-600 rounded-full p-2 shadow-lg">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-6 w-6"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M5 13l4 4L19 7"
+                    />
+                  </svg>
+                </div>
+              </div>
+
+              {/* Message Section */}
+              <div className="md:w-3/5 p-6 md:p-8 flex flex-col justify-center min-h-[470px]">
+                <div className="mb-6">
+                  <div className="flex items-center mb-6">
+                    <div className="w-10 h-1 bg-indigo-600 mr-3"></div>
+                    <h3 className="text-lg font-semibold text-indigo-600 uppercase tracking-wide">
+                      {localizedName(officeHead?.messageTitle) ||
+                        t("officeHead.subtitle")}
+                    </h3>
+                  </div>
+
+                  {/* Message content with fixed height */}
+                  <div
+                    ref={setMessageRef}
+                    className="max-h-64 overflow-hidden relative"
+                  >
+                    {renderMessagePreview()}
+                    {/* Gradient overlay to fade out text */}
+                    {showReadMore && (
+                      <div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-white to-transparent"></div>
+                    )}
+                  </div>
+
+                  {/* Read More Button */}
+                  {showReadMore && (
+                    <div className="text-center mt-4">
+                      <button
+                        onClick={() => setIsModalOpen(true)}
+                        className="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200"
+                        style={{
+                          background: `linear-gradient(
+                            to bottom,
+                            ${lightenColor(
+                              theme?.find((i) => i.type === "PRIMARY_COLOR")
+                                ?.value || tenantConfig.primaryColor,
+                              15,
+                            )},
+                            ${lightenColor(
+                              theme?.find((i) => i.type === "SECONDARY_COLOR")
+                                ?.value ||
+                                tenantConfig.secondaryColor ||
+                                tenantConfig.primaryColor,
+                              30,
+                            )}
+                          )`,
+                        }}
+                      >
+                        {t("newssection.readMore") || "Read Full Message"}
+                        <svg
+                          className="ml-2 -mr-1 h-5 w-5"
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 20 20"
+                          fill="currentColor"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 10-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z"
+                            clipRule="evenodd"
+                          />
+                        </svg>
+                      </button>
+                    </div>
+                  )}
+                </div>
+
+                {/* Signature Section */}
+                <div className="mt-8 pt-6 border-t border-gray-200">
+                  <div className="flex flex-col">
+                    <p className="text-gray-800 font-semibold text-xl">
+                      {displayName}
+                    </p>
+                    {displayPosition && (
+                      <p className="text-gray-600">{displayPosition}</p>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Modal for full message */}
+      {isModalOpen && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+          <div className="bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-hidden flex flex-col">
+            {/* Modal Header */}
+            <div className="flex items-center justify-between p-6 border-b border-gray-200 flex-shrink-0">
+              <div className="flex items-center">
+                <div className="w-8 h-1 bg-indigo-600 mr-3"></div>
+                <h3 className="text-xl font-semibold text-indigo-600 uppercase tracking-wide">
+                  {localizedName(officeHead?.messageTitle) ||
+                    t("officeHead.subtitle")}
+                </h3>
+              </div>
+              <button
+                onClick={() => setIsModalOpen(false)}
+                className="text-gray-400 hover:text-gray-600 transition-colors duration-200 p-1 rounded-full hover:bg-gray-100"
+              >
+                <svg
+                  className="w-6 h-6"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </button>
+            </div>
+
+            {/* Modal Content */}
+            <div className="p-6 overflow-y-auto custom-scrollbar flex-1">
+              <div className="prose prose-lg max-w-none">
+                {renderFullMessage()}
+              </div>
+            </div>
+
+            {/* Modal Footer - Fixed layout to prevent cutting */}
+            <div className="border-t border-gray-200 bg-gray-50 flex-shrink-0">
+              <div className="p-6">
+                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+                  <div className="flex-1 min-w-0">
+                    {" "}
+                    {/* Added min-w-0 to prevent text overflow */}
+                    <p className="text-gray-800 font-semibold text-lg truncate">
+                      {localizedName(officeHead?.employee?.name)}
+                    </p>
+                    <p className="text-gray-600 text-sm truncate">
+                      {localizedName(
+                        officeHead?.employee?.employeePositions?.[0]?.position
+                          ?.name
+                      ) || t("officeHead.defaultPosition")}
+                    </p>
+                  </div>
+                  <button
+                    onClick={() => setIsModalOpen(false)}
+                    className="px-6 py-2 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200 flex-shrink-0"
+                  >
+                    {t("preview.close") || "Close"}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default OfficeHeadMessage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/HomePage/OrganizationGoal.tsx b/apps/edr-freight-web/backoffice/src/pages/HomePage/OrganizationGoal.tsx
new file mode 100644
index 000000000..0114f45e1
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/HomePage/OrganizationGoal.tsx
@@ -0,0 +1,291 @@
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useGoal } from "@/user-management/web-Management/hooks/useGoal";
+import { useTheme } from "@/user-management/web-Management/hooks/useTheme";
+import { useVision } from "@/user-management/web-Management/hooks/useVision";
+import React, { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+
+const OrganizationGoals = () => {
+  const [currentGoalIndex, setCurrentGoalIndex] = useState(0);
+  const [isMobile, setIsMobile] = useState(false);
+  const localizedName = useLocalizedName();
+  const { t } = useTranslation();
+
+  const baseParams = {
+    isActive: true,
+  };
+  const { items } = useGoal(baseParams);
+  const { items: theme, unit } = useTheme();
+  const { items: vision } = useVision(baseParams);
+  const goals: any[] = items ?? [];
+
+  // Auto-rotate goals
+  useEffect(() => {
+    if (items?.length) {
+      const interval = setInterval(() => {
+        setCurrentGoalIndex((prevIndex) =>
+          prevIndex === goals?.length - 1 ? 0 : prevIndex + 1
+        );
+      }, 3000);
+      return () => clearInterval(interval);
+    }
+  }, [goals?.length, items]);
+
+  // Responsive
+  useEffect(() => {
+    const checkScreenSize = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+    checkScreenSize();
+    window.addEventListener("resize", checkScreenSize);
+    return () => window.removeEventListener("resize", checkScreenSize);
+  }, []);
+
+  const goToGoal = (index: any) => {
+    setCurrentGoalIndex(index);
+  };
+
+  const currentGoal = goals[currentGoalIndex];
+
+  function lightenColor(color: string, percent: number) {
+    const R = parseInt(color.substring(1, 3), 16);
+    const G = parseInt(color.substring(3, 5), 16);
+    const B = parseInt(color.substring(5, 7), 16);
+    const newR = Math.min(255, R + Math.round((255 - R) * (percent / 100)));
+    const newG = Math.min(255, G + Math.round((255 - G) * (percent / 100)));
+    const newB = Math.min(255, B + Math.round((255 - B) * (percent / 100)));
+    return `#${newR.toString(16).padStart(2, "0")}${newG
+      .toString(16)
+      .padStart(2, "0")}${newB.toString(16).padStart(2, "0")}`;
+  }
+
+  return (
+    <div
+      className="min-h-screen flex items-center justify-center p-4 md:p-8"
+      style={{
+        background: `linear-gradient(
+          to bottom,
+          ${
+            theme?.find((i) => i.type === "PRIMARY_COLOR")?.value
+              ? lightenColor(
+                  theme.find((i) => i.type === "PRIMARY_COLOR")!.value,
+                  30
+                )
+              : "var(--primary-300)"
+          },
+          ${
+            theme?.find((i) => i.type === "SECONDARY_COLOR")?.value
+              ? lightenColor(
+                  theme.find((i) => i.type === "SECONDARY_COLOR")!.value,
+                  55
+                )
+              : "var(--primary-300)"
+          }
+        )`,
+      }}>
+      <div className="max-w-6xl w-full">
+        {/* Header */}
+        <div className="text-center mb-12">
+          <div className="flex flex-col md:flex-row items-center justify-center mb-6">
+            {/* Logo */}
+            <div
+              className="overflow-hidden flex items-center justify-center shadow-lg mb-4 md:mb-0 md:mr-6"
+              style={{
+                width: "150px",
+                height: "150px",
+                borderRadius: "16px", // change to "50%" for full circle
+                flexShrink: 0,
+              }}>
+              <img
+                src={
+                  theme?.find((i) => i.type === "LOGO")?.presigned ||
+                  "https://www.w3.org/Icons/w3c_home"
+                }
+                alt={localizedName(unit?.name)}
+                className="w-full h-full object-cover"
+              />
+            </div>
+
+            {/* Text */}
+            <div className="max-w-xs md:max-w-md break-words text-center md:text-left">
+              <h2 className="text-3xl md:text-4xl font-bold text-gray-800 mb-2 leading-tight">
+                {localizedName(unit?.name)}
+              </h2>
+            </div>
+          </div>
+
+          {/* Decorative line */}
+          <div
+            className="w-32 h-1 mx-auto rounded-full"
+            style={{
+              background: `linear-gradient(to right, ${
+                theme?.find((i) => i.type === "PRIMARY_COLOR")?.value ||
+                "#3b82f6"
+              }, ${
+                theme?.find((i) => i.type === "SECONDARY_COLOR")?.value ||
+                "#9333ea"
+              })`,
+            }}></div>
+        </div>
+
+        {/* Goals */}
+        <div className="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-300 min-h-[470px] hover:shadow-2xl mb-12">
+          <div className="flex flex-col md:flex-row">
+            <div className="md:w-2/3 p-6 md:p-8 flex flex-col justify-center">
+              <div className="mb-6">
+                <div className="flex items-center mb-6">
+                  <div
+                    className="w-12 h-12 rounded-lg flex items-center justify-center mr-4 overflow-hidden"
+                    style={{
+                      background: `linear-gradient(to right, ${
+                        theme?.find((i) => i.type === "SECONDARY_COLOR")
+                          ?.value || "#32CD32"
+                      }, ${
+                        theme?.find((i) => i.type === "SECONDARY_COLOR")
+                          ?.value || "#FFFFFF"
+                      })`,
+                    }}>
+                    <img
+                      src={
+                        currentGoal?.presigned ||
+                        "https://www.w3.org/Icons/w3c_home"
+                      }
+                      alt="Goal Icon"
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+
+                  <div>
+                    <h3 className="text-lg font-semibold text-gray-600 uppercase tracking-wide">
+                      {t("Strategic Goal")} {currentGoalIndex + 1} {t("of")}{" "}
+                      {goals?.length}
+                    </h3>
+                    <h2 className="text-2xl md:text-3xl font-bold text-gray-800 mt-1">
+                      {localizedName(currentGoal?.goalTitle)}
+                    </h2>
+                  </div>
+                </div>
+
+                <div className="min-h-[120px] flex items-center">
+                  <p className="text-gray-700 text-lg leading-relaxed transition-opacity duration-500">
+                    {localizedName(currentGoal?.goalDescription) ||
+                      t("msg.waitingMsg")}
+                  </p>
+                </div>
+              </div>
+
+              <div className="mt-6">
+                <div className="flex justify-between items-center mb-4">
+                  <span className="text-gray-600 text-sm">
+                    {t("Our Strategic Goals")}
+                  </span>
+                </div>
+
+                <div className="flex space-x-2 mb-4">
+                  {goals?.map((_, index) => (
+                    <button
+                      key={index}
+                      onClick={() => goToGoal(index)}
+                      className={`flex-1 h-2 rounded-full transition-all duration-300 ${
+                        index !== currentGoalIndex
+                          ? "bg-gray-200 hover:bg-gray-300"
+                          : ""
+                      }`}
+                      style={
+                        index === currentGoalIndex
+                          ? {
+                              background: `linear-gradient(to right, ${
+                                theme?.find((i) => i.type === "PRIMARY_COLOR")
+                                  ?.value || "#00FF00"
+                              })`,
+                            }
+                          : {}
+                      }
+                      aria-label={t("Go to goal", {
+                        index: index + 1,
+                        title: localizedName(goals[index].goalTitle),
+                      })}
+                    />
+                  ))}
+                </div>
+
+                <div className="flex justify-between">
+                  <button
+                    onClick={() =>
+                      goToGoal(
+                        currentGoalIndex === 0
+                          ? goals?.length - 1
+                          : currentGoalIndex - 1
+                      )
+                    }
+                    className="flex items-center text-gray-600 hover:text-gray-800 transition-colors">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="h-5 w-5 mr-1"
+                      viewBox="0 0 20 20"
+                      fill="currentColor">
+                      <path
+                        fillRule="evenodd"
+                        d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    {t("Previous Goal")}
+                  </button>
+
+                  <button
+                    onClick={() =>
+                      goToGoal(
+                        currentGoalIndex === goals?.length - 1
+                          ? 0
+                          : currentGoalIndex + 1
+                      )
+                    }
+                    className="flex items-center text-gray-600 hover:text-gray-800 transition-colors">
+                    {t("Next Goal")}
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="h-5 w-5 ml-1"
+                      viewBox="0 0 20 20"
+                      fill="currentColor">
+                      <path
+                        fillRule="evenodd"
+                        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            {/* Vision Section */}
+            <div className="md:w-1/3 bg-gradient-to-br from-blue-50 to-indigo-100 p-6 md:p-8 flex flex-col justify-center items-center">
+              <div className="text-center">
+                <div className="w-32 h-32 mx-auto mb-6 bg-white rounded-2xl shadow-lg overflow-hidden">
+                  <img
+                    src={
+                      currentGoal?.presigned ||
+                      "https://www.w3.org/Icons/w3c_home"
+                    }
+                    alt="Vision Image"
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+
+                <h3 className="text-xl font-bold text-gray-800 mb-2">
+                  {localizedName(vision?.[0]?.visionTitle)}
+                </h3>
+                <p className="text-gray-600">
+                  {localizedName(vision?.[0]?.visionDescription)}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OrganizationGoals;
diff --git a/apps/edr-freight-web/backoffice/src/pages/LoginPage.tsx b/apps/edr-freight-web/backoffice/src/pages/LoginPage.tsx
new file mode 100644
index 000000000..355ce66c0
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/LoginPage.tsx
@@ -0,0 +1,16 @@
+import { RootRedirect } from "@/routes/RootRedirect";
+import { Login } from "@/shared/components/login/Login";
+import SmartOfficeLoader from "@/shared/components/SmartOfficeLoader";
+import { useAuth } from "@/shared/context/AuthContext";
+import { Root } from "@radix-ui/react-slot";
+
+export const LoginPage = () => {
+  const { user, loading } = useAuth();
+  if (loading) {
+    return <SmartOfficeLoader label="Loading SmartOffice..." />;
+  }
+  if (user) {
+    return <RootRedirect />;
+  }
+  return <Login />;
+};
diff --git a/apps/edr-freight-web/backoffice/src/pages/OrgAdminDashboard.tsx b/apps/edr-freight-web/backoffice/src/pages/OrgAdminDashboard.tsx
new file mode 100644
index 000000000..34c2fa413
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/OrgAdminDashboard.tsx
@@ -0,0 +1,347 @@
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Users,
+  FileText,
+  Building2,
+  Files,
+  Upload,
+  AlertCircle,
+  RefreshCw,
+} from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { Navigate } from "react-router-dom";
+import { useOrganizationReport } from "@/shared/hooks/useOrganizationReport";
+import { Alert, AlertDescription } from "@/shared/common/ui/alert";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import { useAuth } from "@/shared/context/AuthContext";
+import { t } from "i18next";
+import SmartOfficeAuditPage from "@/record-management/pages/AuditLog/SmartOfficeAuditPage";
+import { useUnit } from "@/user-management/hooks/useUnit";
+import type { UnitDto } from "@/user-management/dto/unit/unitDto";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { useEffect, useState } from "react";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useUnitReport } from "@/shared/hooks/useUnitReport";
+import {
+  useTenantConfig,
+  resolveModuleConfig,
+} from "@/layout/components/TenantConfig";
+import { hasComplaintVerification } from "@/complaints/utils/complaintVerificationStorage";
+import { COMPLAINT_RECORDS_PATH } from "@/complaints/utils/complaintRoutes";
+
+const MODULE_PATHS: Record<string, string> = {
+  recordManagement: "/record-management/dashboard",
+  performance: "/performance-management/plan-years",
+  objective: "/objective-management/plan-years",
+  dms: "/dms/dashboard",
+};
+
+const OrgAdminDashboard = () => {
+  const navigate = useNavigate();
+  const { user } = useAuth();
+  const { config: tenantConfig } = useTenantConfig();
+  const localizedName = useLocalizedName();
+  const organizationId = user?.employee?.[0]?.organizationId ?? "";
+  const isOrganizationAdmin =
+    user?.roles?.some((role) => role.key === "organization_admin") ?? false;
+  const hasUnitAdminRole =
+    user?.roles?.some((role) => role.key === "unit_admin") ?? false;
+  const isUnitAdmin = !isOrganizationAdmin && hasUnitAdminRole;
+  const [selectedUnitId, setSelectedUnitId] = useState("");
+  const { getAccessibleList } = useUnit();
+  const { data: unitsResponse, isLoading: isUnitsLoading } = getAccessibleList(
+    organizationId,
+    { take: 1000, skip: 0 },
+    isUnitAdmin && !!organizationId,
+  );
+  const units = (unitsResponse?.data?.items ?? []) as UnitDto[];
+
+  useEffect(() => {
+    if (!units.some((unit) => unit.id === selectedUnitId)) {
+      setSelectedUnitId(units[0]?.id ?? "");
+    }
+  }, [selectedUnitId, units]);
+
+  const { report, isLoading, isError, error, refetch } =
+    useOrganizationReport(organizationId, { enabled: !isUnitAdmin });
+  const unitReportQuery = useUnitReport(organizationId, selectedUnitId, {
+    enabled: isUnitAdmin,
+  });
+  const activeReport = isUnitAdmin ? unitReportQuery.data : report;
+  const isDashboardLoading = isUnitAdmin
+    ? isUnitsLoading || (!!selectedUnitId && unitReportQuery.isLoading)
+    : isLoading;
+  const isDashboardError = isUnitAdmin
+    ? unitReportQuery.isError
+    : isError;
+  const dashboardError = isUnitAdmin ? unitReportQuery.error : error;
+  const refetchDashboard = () =>
+    isUnitAdmin ? unitReportQuery.refetch() : refetch();
+
+  const statusCode: number | undefined = (dashboardError as any)?.response
+    ?.status;
+  const isUnauthorized =
+    isDashboardError && (statusCode === 401 || statusCode === 403);
+
+  const fallbackPath = (() => {
+    if (hasComplaintVerification()) return COMPLAINT_RECORDS_PATH;
+
+    const modules = resolveModuleConfig(tenantConfig);
+    const enabledModulePaths = Object.entries(MODULE_PATHS)
+      .filter(([key]) => modules[key as keyof typeof modules])
+      .map(([, path]) => path);
+
+    if (enabledModulePaths.length === 1) return enabledModulePaths[0];
+    return "/homepage";
+  })();
+
+  if (isUnauthorized) {
+    return <Navigate to={fallbackPath} replace />;
+  }
+
+  // Define stats structure for the dashboard
+  const getStats = () => [
+    {
+      id: "employees",
+      title: t("dashboard.totalEmployees"),
+      value: activeReport?.employeesCount?.toLocaleString() || "0",
+      icon: Users,
+      color: "from-blue-500 to-blue-600",
+    },
+    ...(!isUnitAdmin
+      ? [{
+          id: "units",
+          title: t("dashboard.totalUnits"),
+          value: report?.unitsCount?.toLocaleString() || "0",
+          icon: Building2,
+          color: "from-primary-500 to-primary-600",
+        }]
+      : []),
+    {
+      id: "positions",
+      title: t("dashboard.totalPositions"),
+      value: activeReport?.positionsCount?.toLocaleString() || "0",
+      icon: FileText,
+      color: "from-purple-500 to-purple-600",
+    },
+  ];
+
+  // Use report activities if available, otherwise use static data
+
+  const quickActions = [
+    {
+      id: "user-mgmt",
+      title: t("dashboard.userManagement"),
+      description: t("dashboard.userManagementDesc"),
+      icon: Users,
+      action: () => navigate("/user-management/user_management"),
+      color: "bg-gradient-to-r from-blue-500 to-cyan-600",
+    },
+    {
+      id: "content-mgmt",
+      title: t("dashboard.contentManagement"),
+      description: t("dashboard.contentManagementDesc"),
+      icon: Files,
+      action: () => navigate("/user-management/content-management"),
+      color: "bg-gradient-to-r from-purple-500 to-indigo-600",
+    },
+    {
+      id: "excel-upload",
+      title: t("dashboard.excelUploader"),
+      description: t("dashboard.excelUploaderDesc"),
+      icon: Upload,
+      action: () => navigate("/user-management/bulk-upload"),
+      color: "bg-gradient-to-r from-primary-500 to-primary-600",
+    },
+    {
+      id: "position-settings",
+      title: t("dashboard.positionSettings"),
+      description: t("dashboard.positionSettingsDesc"),
+      icon: FileText,
+      action: () => navigate("/user-management/position-management"),
+      color: "bg-gradient-to-r from-orange-500 to-red-600",
+    },
+    {
+      id: "archive-users",
+      title: t("dashboard.archiveUsers"),
+      description: t("dashboard.archiveUsersDesc"),
+      icon: AlertCircle,
+      action: () => navigate("/user-management/archives"),
+      color: "bg-gradient-to-r from-gray-500 to-slate-600",
+    },
+    {
+      id: "web-management",
+      title: t("dashboard.webManagement"),
+      description: t("dashboard.webManagementDesc"),
+      icon: FileText,
+      action: () => navigate("/user-management/web-management"),
+      color: "bg-gradient-to-r from-teal-500 to-cyan-600",
+    },
+  ];
+
+  return (
+    <div className="mx-auto p-6 space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">
+            {isUnitAdmin
+              ? t("dashboard.unitDashboard", "Unit Dashboard")
+              : t("dashboard.organizationDashboard")}
+          </h1>
+          <p className="text-muted-foreground dark:text-gray-400">
+            {t("dashboard.orgMsg")}
+          </p>
+        </div>
+
+        <div className="flex items-center gap-3">
+          {isUnitAdmin && (
+            <Select
+              value={selectedUnitId}
+              onValueChange={setSelectedUnitId}
+              disabled={isUnitsLoading || units.length === 0}
+            >
+              <SelectTrigger className="w-[260px]">
+                <SelectValue
+                  placeholder={t("dashboard.selectUnit", "Select unit")}
+                />
+              </SelectTrigger>
+              <SelectContent>
+                {units.map((unit) => (
+                  <SelectItem key={unit.id} value={unit.id}>
+                    {localizedName(unit.name)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          )}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={refetchDashboard}
+            disabled={isDashboardLoading || (isUnitAdmin && !selectedUnitId)}
+          >
+            <RefreshCw
+              className={`h-4 w-4 mr-2 ${
+                isDashboardLoading ? "animate-spin" : ""
+              }`}
+            />
+            {t("dashboard.refresh")}
+          </Button>
+        </div>
+      </div>
+
+      {/* Error display */}
+      {isDashboardError && (
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>
+            {t("dashboard.errorMsg")}
+            {dashboardError instanceof Error && `: ${dashboardError.message}`}
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        {isDashboardLoading
+          ? // Loading skeletons for stats
+            Array(isUnitAdmin ? 2 : 3)
+              .fill(0)
+              .map((_, index) => (
+                <Card
+                  key={`skeleton-stat-${index}`}
+                  className="hover:shadow-lg transition-shadow duration-200 dark:bg-gray-800 dark:border-gray-700"
+                >
+                  <CardContent className="p-6">
+                    <div className="flex items-center justify-between">
+                      <div className="w-full">
+                        <Skeleton className="h-4 w-24 mb-2" />
+                        <Skeleton className="h-8 w-16" />
+                      </div>
+                      <Skeleton className="h-12 w-12 rounded-full" />
+                    </div>
+                  </CardContent>
+                </Card>
+              ))
+          : getStats().map((stat) => (
+              <Card
+                key={`stat-${stat.id}`}
+                className="hover:shadow-lg transition-shadow duration-200 border-l-4 border-l-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:border-l-blue-500"
+              >
+                <CardContent className="p-6">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-sm font-medium text-muted-foreground dark:text-gray-400">
+                        {stat.title}
+                      </p>
+                      <h3 className="text-3xl font-bold mt-2 text-gray-900 dark:text-gray-100">
+                        {stat.value}
+                      </h3>
+                    </div>
+                    <div
+                      className={`p-4 rounded-full bg-gradient-to-r ${stat.color} shadow-lg`}
+                    >
+                      <stat.icon className="h-6 w-6 text-white" />
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+      </div>
+
+      {/* Quick Actions */}
+      <Card className="dark:bg-gray-800 dark:border-gray-700">
+        <CardHeader>
+          <CardTitle className="flex items-center dark:text-gray-100">
+            <RefreshCw className="h-5 w-5 mr-2" />
+            {t("landingPage.quickActions")}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {quickActions.map((action) => (
+              <Button
+                key={`action-${action.id}`}
+                onClick={action.action}
+                className={`h-auto p-6 ${action.color} text-white hover:opacity-90 hover:scale-105 transition-all duration-200`}
+              >
+                <div className="flex flex-col items-center space-y-3 text-center">
+                  <action.icon className="h-8 w-8" />
+                  <div>
+                    <div className="font-semibold text-base">
+                      {action.title}
+                    </div>
+                    <div className="text-sm opacity-90 mt-1">
+                      {action.description}
+                    </div>
+                  </div>
+                </div>
+              </Button>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+      {isUnitAdmin ? (
+        selectedUnitId && <SmartOfficeAuditPage unitId={selectedUnitId} />
+      ) : (
+        organizationId && (
+          <SmartOfficeAuditPage organizationId={organizationId} />
+        )
+      )}
+    </div>
+  );
+};
+
+export default OrgAdminDashboard;
diff --git a/apps/edr-freight-web/backoffice/src/pages/OrganizationAdminsPage.tsx b/apps/edr-freight-web/backoffice/src/pages/OrganizationAdminsPage.tsx
new file mode 100644
index 000000000..6fce0ec39
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/OrganizationAdminsPage.tsx
@@ -0,0 +1,7 @@
+import OrganizationsAdmins from "@/super-admin/components/organizationAdmins/OrganizationAdmins";
+
+const OrganizationAdminsPage = () => {
+  return <OrganizationsAdmins />;
+};
+
+export default OrganizationAdminsPage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/Organizations/AdminRegistrationPage.tsx b/apps/edr-freight-web/backoffice/src/pages/Organizations/AdminRegistrationPage.tsx
new file mode 100644
index 000000000..51d5adaf8
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/Organizations/AdminRegistrationPage.tsx
@@ -0,0 +1,9 @@
+import { AdminRegistrationForm } from "@/super-admin/components/organizations/AdminRegistrationForm";
+
+export default function AdminRegistrationPage() {
+  return (
+    <div className="p-6">
+      <AdminRegistrationForm />
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/pages/Organizations/EditOrganizationPage.tsx b/apps/edr-freight-web/backoffice/src/pages/Organizations/EditOrganizationPage.tsx
new file mode 100644
index 000000000..732138f8a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/Organizations/EditOrganizationPage.tsx
@@ -0,0 +1,9 @@
+import { EditOrganizationForm } from "@/super-admin/components/organizations/EditOrganizationForm";
+import { useParams } from "react-router-dom";
+
+const EditOrganizationPage = () => {
+  const { id } = useParams();
+  return id && <EditOrganizationForm id={id as string} />;
+};
+
+export default EditOrganizationPage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/Organizations/NewOrganizationPage.tsx b/apps/edr-freight-web/backoffice/src/pages/Organizations/NewOrganizationPage.tsx
new file mode 100644
index 000000000..9224d5789
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/Organizations/NewOrganizationPage.tsx
@@ -0,0 +1,7 @@
+import { NewOrganizationForm } from "@/super-admin/components/organizations/NewOrganizationForm";
+
+const NewOrganizationPage = () => {
+  return <NewOrganizationForm />;
+};
+
+export default NewOrganizationPage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/Organizations/OrganizationDetailPage.tsx b/apps/edr-freight-web/backoffice/src/pages/Organizations/OrganizationDetailPage.tsx
new file mode 100644
index 000000000..7565394bf
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/Organizations/OrganizationDetailPage.tsx
@@ -0,0 +1,22 @@
+import { OrganizationCard } from "@/super-admin/components/organizations/OrganizationDetail";
+import { useOrganizationDetail, useOrganizations } from "@/super-admin/hooks/useOrganizations";
+import { useParams } from "react-router-dom";
+
+type OrgRouteParams = { id: string };
+
+const OrganizationDetailPage = () => {
+ const { id } = useParams<OrgRouteParams>();
+ if (!id) {
+   return <div className="text-gray-900 dark:text-gray-100">Organization ID is missing</div>; // or navigate away
+ }
+
+
+
+  return (
+    <OrganizationCard
+      id={id}
+    />
+  );
+};
+
+export default OrganizationDetailPage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/Organizations/OrganizationsPage.tsx b/apps/edr-freight-web/backoffice/src/pages/Organizations/OrganizationsPage.tsx
new file mode 100644
index 000000000..5569715ce
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/Organizations/OrganizationsPage.tsx
@@ -0,0 +1,7 @@
+import Organizations from "@/super-admin/components/organizations/Organizations";
+
+const OrganizationsPage = () => {
+  return <Organizations />;
+};
+
+export default OrganizationsPage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/PositionConfigurationPage.tsx b/apps/edr-freight-web/backoffice/src/pages/PositionConfigurationPage.tsx
new file mode 100644
index 000000000..735ce3133
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/PositionConfigurationPage.tsx
@@ -0,0 +1,531 @@
+import React, { useEffect, useState } from "react";
+import { useAuth } from "@/shared/context/AuthContext";
+import { usePositionConfigurationByPositionId } from "@/shared/hooks/usePositionConfigurations";
+import { usePositions } from "@/user-management/hooks/usePosition";
+import { useUnit } from "@/user-management/hooks/useUnit";
+import { Card, CardContent } from "@/shared/common/ui/card";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/shared/common/ui/form";
+import { Switch } from "@/shared/common/ui/switch";
+import { Alert, AlertDescription } from "@/shared/common/ui/alert";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import {
+  Settings,
+  Mail,
+  MessageSquare,
+  Bell,
+  Workflow,
+  Loader2,
+  AlertCircle,
+  Save,
+} from "lucide-react";
+import {
+  PositionConfiguration,
+  PositionConfigurationPayload,
+} from "@/shared/services/positionConfigurationService";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { t } from "i18next";
+
+export enum PositionScopeToFetch {
+  PARALLEL_WITH_IMMEDIATE_CHILD = "parallel_with_immediate_child",
+  IMMEDIATE_CHILD = "immediate_child",
+  ALL = "all",
+}
+
+export const positionScopeValues = [
+  PositionScopeToFetch.ALL,
+  PositionScopeToFetch.IMMEDIATE_CHILD,
+  PositionScopeToFetch.PARALLEL_WITH_IMMEDIATE_CHILD,
+] as const;
+
+const configurationSchema = z.object({
+  positionId: z.string().min(1, "Position is required"),
+  smsNotificationWhenRecordSubmitted: z.boolean(),
+  emailNotificationWhenRecordSubmitted: z.boolean(),
+  inboxNotificationWhenRecordSubmitted: z.boolean(),
+  skipWorkflowIfNotAssigned: z.boolean(),
+  positionScopeToFetch: z.enum(positionScopeValues),
+});
+
+type ConfigurationFormData = z.infer<typeof configurationSchema>;
+
+const defaultFormValues: ConfigurationFormData = {
+  positionId: "",
+  smsNotificationWhenRecordSubmitted: true,
+  emailNotificationWhenRecordSubmitted: true,
+  inboxNotificationWhenRecordSubmitted: true,
+  skipWorkflowIfNotAssigned: false,
+  positionScopeToFetch: PositionScopeToFetch.ALL,
+};
+
+const parsePositionScope = (
+  config: PositionConfiguration | null,
+): PositionScopeToFetch => {
+  if (
+    config?.positionScopeToFetch &&
+    positionScopeValues.includes(config.positionScopeToFetch as PositionScopeToFetch)
+  ) {
+    return config.positionScopeToFetch as PositionScopeToFetch;
+  }
+
+  if (!config?.items?.data) return PositionScopeToFetch.ALL;
+
+  try {
+    const parsed = JSON.parse(config.items.data) as {
+      positionScopeToFetch?: PositionScopeToFetch;
+    };
+    if (
+      parsed.positionScopeToFetch &&
+      positionScopeValues.includes(parsed.positionScopeToFetch)
+    ) {
+      return parsed.positionScopeToFetch;
+    }
+  } catch {
+    return PositionScopeToFetch.ALL;
+  }
+
+  return PositionScopeToFetch.ALL;
+};
+
+const buildPayload = (
+  data: ConfigurationFormData,
+): PositionConfigurationPayload => ({
+  positionId: data.positionId,
+  smsNotificationWhenRecordSubmitted: data.smsNotificationWhenRecordSubmitted,
+  emailNotificationWhenRecordSubmitted:
+    data.emailNotificationWhenRecordSubmitted,
+  inboxNotificationWhenRecordSubmitted:
+    data.inboxNotificationWhenRecordSubmitted,
+  skipWorkflowIfNotAssigned: data.skipWorkflowIfNotAssigned,
+  positionScopeToFetch: data.positionScopeToFetch,
+});
+
+const PositionConfigurationPage = () => {
+  const { user } = useAuth();
+  const defaultUnitId = user?.employee?.[0]?.unitId || "";
+  const organizationId = user?.employee?.[0]?.organizationId || "";
+  const localizedName = useLocalizedName();
+  const [selectedUnitId, setSelectedUnitId] = useState(defaultUnitId);
+  const [selectedPositionId, setSelectedPositionId] = useState("");
+
+  const {
+    configuration,
+    isLoading: isLoadingConfig,
+    isError: isConfigError,
+    error: configError,
+    saveConfiguration,
+    isSaving,
+    refetch,
+  } = usePositionConfigurationByPositionId(selectedPositionId);
+
+  const { getList: getUnitList } = useUnit();
+  const { data: units, isLoading: isLoadingUnits } = getUnitList(
+    organizationId,
+    { take: 1000 },
+  );
+
+  const { usePositionListByUnitId } = usePositions();
+  const { data: positions, isLoading: isLoadingPositions } =
+    usePositionListByUnitId(selectedUnitId, { take: 1000 });
+
+  const form = useForm<ConfigurationFormData>({
+    resolver: zodResolver(configurationSchema),
+    defaultValues: defaultFormValues,
+  });
+
+  useEffect(() => {
+    if (defaultUnitId && !selectedUnitId) {
+      setSelectedUnitId(defaultUnitId);
+    }
+  }, [defaultUnitId, selectedUnitId]);
+
+  useEffect(() => {
+    setSelectedPositionId("");
+  }, [selectedUnitId]);
+
+  useEffect(() => {
+    if (!selectedPositionId) {
+      form.reset(defaultFormValues);
+      return;
+    }
+
+    if (isLoadingConfig) return;
+
+    if (configuration) {
+      form.reset({
+        positionId: selectedPositionId,
+        smsNotificationWhenRecordSubmitted:
+          configuration.smsNotificationWhenRecordSubmitted,
+        emailNotificationWhenRecordSubmitted:
+          configuration.emailNotificationWhenRecordSubmitted,
+        inboxNotificationWhenRecordSubmitted:
+          configuration.inboxNotificationWhenRecordSubmitted,
+        skipWorkflowIfNotAssigned: configuration.skipWorkflowIfNotAssigned,
+        positionScopeToFetch: parsePositionScope(configuration),
+      });
+      return;
+    }
+
+    form.reset({
+      ...defaultFormValues,
+      positionId: selectedPositionId,
+    });
+  }, [selectedPositionId, configuration, isLoadingConfig, form]);
+
+  const handleSave = (data: ConfigurationFormData) => {
+    saveConfiguration(buildPayload(data), {
+      onSuccess: () => {
+        refetch();
+      },
+    });
+  };
+
+  if (!organizationId) {
+    return (
+      <div className="flex h-64 items-center justify-center p-6">
+        <div className="flex flex-col items-center gap-2">
+          <AlertCircle className="h-8 w-8 text-red-500" />
+          <div className="text-sm text-muted-foreground">
+            {t("setting.msg1")}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative overflow-hidden rounded-2xl border border-slate-200/80 bg-gradient-to-br from-white via-slate-50 to-slate-100/60 p-4 shadow-sm sm:p-6 dark:border-slate-700/80 dark:bg-gradient-to-br dark:from-slate-950 dark:via-slate-900 dark:to-slate-900">
+      <div className="mb-5 space-y-1 border-b border-slate-200 pb-4 dark:border-slate-700">
+        <h1 className="flex items-center gap-2 text-2xl font-bold text-slate-900 sm:text-3xl dark:text-slate-100">
+          <Settings className="h-8 w-8 text-primary" />
+          {t("setting.positionConfig")}
+        </h1>
+        <p className="text-sm text-slate-600 dark:text-slate-400">
+          {t("setting.positionConfigMsg")}
+        </p>
+      </div>
+
+      <Card className="border-slate-200 bg-white/90 dark:border-slate-700 dark:bg-slate-900/70">
+        <CardContent className="space-y-6 pt-6">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <div className="space-y-2 w-full max-w-md">
+              <label className="text-sm font-medium text-slate-700 dark:text-slate-200">
+                {t("contentManagement.unit")}
+              </label>
+              <Select value={selectedUnitId} onValueChange={setSelectedUnitId}>
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder={t("organization.selectUnit")} />
+                </SelectTrigger>
+                <SelectContent
+                  position="item-aligned"
+                  className="max-h-72 w-[min(24rem,90vw)]"
+                >
+                  {isLoadingUnits ? (
+                    <SelectItem value="loading" disabled>
+                      {t("common.loading", "Loading...")}
+                    </SelectItem>
+                  ) : units?.data?.items?.length ? (
+                    units.data.items.map(
+                      (unit: {
+                        id: string;
+                        name: { am?: string; en?: string };
+                      }) => (
+                        <SelectItem key={unit.id} value={unit.id}>
+                          {localizedName(unit.name)}
+                        </SelectItem>
+                      ),
+                    )
+                  ) : (
+                    <SelectItem value="no-units" disabled>
+                      {t("setting.noUnit", "No units found")}
+                    </SelectItem>
+                  )}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2 w-full max-w-md">
+              <label className="text-sm font-medium text-slate-700 dark:text-slate-200">
+                {t("setting.position")}
+              </label>
+              <Select
+                value={selectedPositionId}
+                onValueChange={setSelectedPositionId}
+                disabled={!selectedUnitId}>
+                <SelectTrigger className="w-full">
+                  <SelectValue
+                    placeholder={
+                      selectedUnitId
+                        ? t("setting.select")
+                        : t("setting.select2")
+                    }
+                  />
+                </SelectTrigger>
+                <SelectContent
+                  position="item-aligned"
+                  className="max-h-72 w-[min(24rem,90vw)]"
+                >
+                  {!selectedUnitId ? (
+                    <SelectItem value="no-unit-selected" disabled>
+                      {t("setting.select2")}
+                    </SelectItem>
+                  ) : isLoadingPositions ? (
+                    <SelectItem value="loading" disabled>
+                      {t("common.loading", "Loading...")}
+                    </SelectItem>
+                  ) : positions?.items?.length ? (
+                    positions.items.map(
+                      (position: {
+                        id: string;
+                        name: { am?: string; en?: string };
+                      }) => (
+                        <SelectItem key={position.id} value={position.id}>
+                          {localizedName(position.name)}
+                        </SelectItem>
+                      ),
+                    )
+                  ) : (
+                    <SelectItem value="no-positions" disabled>
+                      {t(
+                        "setting.noPositions",
+                        "No positions found in this unit",
+                      )}
+                    </SelectItem>
+                  )}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          {!selectedPositionId ? (
+            <p className="text-sm text-slate-600 dark:text-slate-400">
+              {t(
+                "setting.selectPositionToConfigure",
+                "Select a unit and position to load configuration.",
+              )}
+            </p>
+          ) : isLoadingConfig ? (
+            <div className="flex items-center justify-center py-10">
+              <div className="flex flex-col items-center gap-2">
+                <Loader2 className="h-8 w-8 animate-spin text-primary" />
+                <p className="text-sm text-muted-foreground">
+                  {t("setting.msg2")}
+                </p>
+              </div>
+            </div>
+          ) : (
+            <>
+              {isConfigError && (
+                <Alert variant="destructive">
+                  <AlertCircle className="h-4 w-4" />
+                  <AlertDescription className="flex flex-wrap items-center gap-2">
+                    {t("setting.error")}{" "}
+                    {configError instanceof Error
+                      ? configError.message
+                      : "Unknown error"}
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => refetch()}>
+                      {t("setting.retry")}
+                    </Button>
+                  </AlertDescription>
+                </Alert>
+              )}
+
+              <Form {...form}>
+                <form
+                  onSubmit={form.handleSubmit(handleSave)}
+                  className="space-y-6">
+                  <FormField
+                    control={form.control}
+                    name="positionScopeToFetch"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel className="dark:text-gray-200">
+                          {t("setting.positionScope")}
+                        </FormLabel>
+                        <Select
+                          onValueChange={field.onChange}
+                          value={field.value}>
+                          <FormControl>
+                            <SelectTrigger>
+                              <SelectValue
+                                placeholder={t("setting.positionScope")}
+                              />
+                            </SelectTrigger>
+                          </FormControl>
+                          <SelectContent>
+                            <SelectItem value={PositionScopeToFetch.ALL}>
+                              {t("setting.all")}
+                            </SelectItem>
+                            <SelectItem
+                              value={PositionScopeToFetch.IMMEDIATE_CHILD}>
+                              {t("setting.immediateChild")}
+                            </SelectItem>
+                            <SelectItem
+                              value={
+                                PositionScopeToFetch.PARALLEL_WITH_IMMEDIATE_CHILD
+                              }>
+                              {t("setting.parallel")}
+                            </SelectItem>
+                          </SelectContent>
+                        </Select>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <div className="space-y-4">
+                    <h3 className="text-lg font-semibold">
+                      {t("setting.notification")}
+                    </h3>
+
+                    <FormField
+                      control={form.control}
+                      name="smsNotificationWhenRecordSubmitted"
+                      render={({ field }) => (
+                        <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                          <div className="space-y-0.5">
+                            <FormLabel className="flex items-center gap-2">
+                              <MessageSquare className="h-4 w-4" />
+                              {t("setting.sms")}
+                            </FormLabel>
+                            <div className="text-sm text-muted-foreground">
+                              {t("setting.smsMsg")}
+                            </div>
+                          </div>
+                          <FormControl>
+                            <Switch
+                              checked={field.value}
+                              onCheckedChange={field.onChange}
+                            />
+                          </FormControl>
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="emailNotificationWhenRecordSubmitted"
+                      render={({ field }) => (
+                        <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                          <div className="space-y-0.5">
+                            <FormLabel className="flex items-center gap-2">
+                              <Mail className="h-4 w-4" />
+                              {t("setting.email")}
+                            </FormLabel>
+                            <div className="text-sm text-muted-foreground">
+                              {t("setting.emailMsg")}
+                            </div>
+                          </div>
+                          <FormControl>
+                            <Switch
+                              checked={field.value}
+                              onCheckedChange={field.onChange}
+                            />
+                          </FormControl>
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="inboxNotificationWhenRecordSubmitted"
+                      render={({ field }) => (
+                        <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                          <div className="space-y-0.5">
+                            <FormLabel className="flex items-center gap-2">
+                              <Bell className="h-4 w-4" />
+                              {t("setting.inbox")}
+                            </FormLabel>
+                            <div className="text-sm text-muted-foreground">
+                              {t("setting.inboxMsg")}
+                            </div>
+                          </div>
+                          <FormControl>
+                            <Switch
+                              checked={field.value}
+                              onCheckedChange={field.onChange}
+                            />
+                          </FormControl>
+                        </FormItem>
+                      )}
+                    />
+
+                    <h3 className="text-lg font-semibold">
+                      {t("setting.workflow")}
+                    </h3>
+
+                    <FormField
+                      control={form.control}
+                      name="skipWorkflowIfNotAssigned"
+                      render={({ field }) => (
+                        <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                          <div className="space-y-0.5">
+                            <FormLabel className="flex items-center gap-2">
+                              <Workflow className="h-4 w-4" />
+                              {t("setting.workflowMsg")}
+                            </FormLabel>
+                            <div className="text-sm text-muted-foreground">
+                              {t("setting.workflowMsg1")}
+                            </div>
+                          </div>
+                          <FormControl>
+                            <Switch
+                              checked={field.value}
+                              onCheckedChange={field.onChange}
+                            />
+                          </FormControl>
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+
+                  <div className="flex justify-end">
+                    <Button
+                      type="submit"
+                      disabled={isSaving}
+                      className="bg-primary hover:bg-primary/90">
+                      {isSaving ? (
+                        <>
+                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                          {t("setting.updating")}
+                        </>
+                      ) : (
+                        <>
+                          <Save className="mr-2 h-4 w-4" />
+                          {configuration
+                            ? t("setting.UpdateConfig")
+                            : t("setting.createConfig")}
+                        </>
+                      )}
+                    </Button>
+                  </div>
+                </form>
+              </Form>
+            </>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default PositionConfigurationPage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/SettingsPage.tsx b/apps/edr-freight-web/backoffice/src/pages/SettingsPage.tsx
new file mode 100644
index 000000000..8f4281c14
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/SettingsPage.tsx
@@ -0,0 +1,224 @@
+import { useState } from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/shared/common/ui/tabs";
+import { Input } from "@/shared/common/ui/input";
+import { Button } from "@/shared/common/ui/button";
+import { Shield, Save, Trash2, Plus, Edit2 } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/shared/common/ui/dialog";
+import PasswordSettingsForm from "@/super-admin/components/settings/PasswordSettingsForm";
+import { usePasswordSettingsQuery, usePasswordSettingsMutations } from "@/super-admin/hooks/usePasswordSettings";
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import { toast } from "sonner";
+
+export default function SettingsPage() {
+  const [createDialogOpen, setCreateDialogOpen] = useState(false);
+  const [editDialogOpen, setEditDialogOpen] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  
+  const { data: passwordSettings, refetch: refetchPasswordSettings } = usePasswordSettingsQuery();
+  const { delete: deleteMutation } = usePasswordSettingsMutations();
+
+  const handleDeletePasswordSettings = async () => {
+    if (!passwordSettings?.id) {
+      toast.error("No password settings to delete");
+      return;
+    }
+    
+    try {
+      console.log("Attempting to delete password settings with ID:", passwordSettings.id);
+      await deleteMutation.mutateAsync(passwordSettings.id);
+      console.log("Delete successful, closing dialog");
+      setDeleteDialogOpen(false);
+    } catch (error) {
+      console.error("Delete error:", error);
+      toast.error("Failed to delete password settings");
+    }
+  };
+
+  const handleEditPasswordSettings = () => {
+    if (passwordSettings?.id) {
+      setEditDialogOpen(true);
+    }
+  };
+
+  const handleCreateSuccess = () => {
+    setCreateDialogOpen(false);
+    refetchPasswordSettings();
+  };
+
+  const handleEditSuccess = () => {
+    setEditDialogOpen(false);
+    refetchPasswordSettings();
+  };
+
+  return (
+    <div className="p-6 space-y-6">
+      <Card className="shadow-lg border-gray-200 dark:border-gray-700">
+        <CardHeader>
+          <CardTitle className="text-xl font-semibold">
+            System Settings
+          </CardTitle>
+          <CardDescription>
+            Configure system-wide settings for your organization
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Tabs defaultValue="security" className="w-full">
+            {/* Only Security Tab */}
+            {/* Security Settings */}
+            <TabsContent value="security" className="space-y-4">
+              <div className="flex justify-between items-center mb-4">
+                <h3 className="text-lg font-semibold">Password Settings</h3>
+              </div>
+
+              {!passwordSettings ? (
+                <Card>
+                  <CardContent className="pt-6">
+                    <p className="text-center text-gray-600 dark:text-gray-400 mb-4">
+                      No password settings configured yet
+                    </p>
+                    <div className="flex justify-center">
+                      <Dialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
+                        <DialogTrigger asChild>
+                          <Button className="bg-primary hover:bg-primary/90">
+                            <Plus className="h-4 w-4 mr-2" />
+                            Create Password Settings
+                          </Button>
+                        </DialogTrigger>
+                        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+                          <DialogHeader>
+                            <DialogTitle>Create Password Settings</DialogTitle>
+                          </DialogHeader>
+                          <PasswordSettingsForm 
+                            onSuccessCallback={handleCreateSuccess}
+                            isDialogForm={true}
+                          />
+                        </DialogContent>
+                      </Dialog>
+                    </div>
+                  </CardContent>
+                </Card>
+              ) : (
+                <Card>
+                  <CardContent className="pt-6">
+                    <div className="border rounded-lg overflow-hidden">
+                      <div className="overflow-x-auto">
+                        <table className="w-full">
+                          <thead>
+                            <tr className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+                              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-900 dark:text-white">Setting</th>
+                              <th className="px-6 py-3 text-left text-sm font-semibold text-gray-900 dark:text-white">Value</th>
+                              <th className="px-6 py-3 text-right text-sm font-semibold text-gray-900 dark:text-white">Actions</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            <tr className="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800/50">
+                              <td className="px-6 py-4 text-sm font-medium text-gray-900 dark:text-white">Minimum Password Length</td>
+                              <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">{passwordSettings.minimumPasswordLength}</td>
+                              <td rowSpan={5} className="px-6 py-4 text-right">
+                                <div className="flex justify-end gap-2">
+                                  <Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
+                                    <DialogTrigger asChild>
+                                      <Button variant="outline" size="sm" onClick={handleEditPasswordSettings}>
+                                        <Edit2 className="h-4 w-4 mr-2" />
+                                        Update
+                                      </Button>
+                                    </DialogTrigger>
+                                    <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+                                      <DialogHeader>
+                                        <DialogTitle>Update Password Settings</DialogTitle>
+                                      </DialogHeader>
+                                      <PasswordSettingsForm 
+                                        onSuccessCallback={handleEditSuccess}
+                                        isDialogForm={true}
+                                      />
+                                    </DialogContent>
+                                  </Dialog>
+                                  <Button
+                                    variant="destructive"
+                                    size="sm"
+                                    onClick={() => setDeleteDialogOpen(true)}>
+                                    <Trash2 className="h-4 w-4 mr-2" />
+                                    Delete
+                                  </Button>
+                                </div>
+                              </td>
+                            </tr>
+                            <tr className="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800/50">
+                              <td className="px-6 py-4 text-sm font-medium text-gray-900 dark:text-white">Maximum Password Length</td>
+                              <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">{passwordSettings.maximumPasswordLength}</td>
+                            </tr>
+                            <tr className="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800/50">
+                              <td className="px-6 py-4 text-sm font-medium text-gray-900 dark:text-white">Password Expiry (Days)</td>
+                              <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">{passwordSettings.passwordExpiry}</td>
+                            </tr>
+                            <tr className="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800/50">
+                              <td className="px-6 py-4 text-sm font-medium text-gray-900 dark:text-white">Session Timeout (Minutes)</td>
+                              <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">{passwordSettings.sessionTimeout}</td>
+                            </tr>
+                            <tr className="hover:bg-gray-50 dark:hover:bg-gray-800/50">
+                              <td className="px-6 py-4 text-sm font-medium text-gray-900 dark:text-white">Default Password Enabled</td>
+                              <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
+                                {passwordSettings.isDefaultPasswordEnabled ? "Yes" : "No"}
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Password Settings</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete the password settings? This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <div className="flex justify-end gap-3">
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <Button
+              onClick={handleDeletePasswordSettings}
+              className="bg-red-600 hover:bg-red-700"
+              disabled={deleteMutation.isPending}>
+              {deleteMutation.isPending ? "Deleting..." : "Delete"}
+            </Button>
+          </div>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}
+
diff --git a/apps/edr-freight-web/backoffice/src/pages/SuperAdminArchiveUsersPage.tsx b/apps/edr-freight-web/backoffice/src/pages/SuperAdminArchiveUsersPage.tsx
new file mode 100644
index 000000000..d317b91a4
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/SuperAdminArchiveUsersPage.tsx
@@ -0,0 +1,146 @@
+import { useEffect, useMemo, useState } from "react";
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import { t } from "i18next";
+import { ArchivedUserColumnDefn } from "@/user-management/components/content/ArchivedUserColumnDefn";
+import {
+  fetchValidOrganization,
+  ValidOrganizationDto,
+} from "@/record-management/services/api/organizationService";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import {
+  SimpleTreeSelect,
+  TreeViewItemO,
+} from "@/shared/common/form/fields/FormFields";
+import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { useArchivedUsers } from "@/super-admin/hooks/useArchivedUsers";
+
+const SuperAdminArchiveUsersPage = () => {
+  const [pageIndex, setPageIndex] = useState(0);
+  const pageSize = 10;
+  const localizedName = useLocalizedName();
+  const { t } = useTranslation();
+
+  const {
+    data: exteranlOrgsResponse,
+    isLoading: loadingExternalOrgs,
+    error: externalOrgsError,
+  } = useQuery({
+    queryKey: ["organizations"], // include param
+    queryFn: fetchValidOrganization,
+    staleTime: 5 * 60 * 1000,
+  });
+
+  // State for selected unit (single selection)
+  const [selectedUnitId, setSelectedUnitId] = useState<string | null>(null);
+
+  // Handle unit selection and ensure dropdown closes
+  const handleUnitSelection = (unitId: string | null) => {
+    setSelectedUnitId(unitId);
+  };
+
+  const treeOrganizationsOptions: TreeViewItemO[] = useMemo(() => {
+    return (
+      exteranlOrgsResponse?.items.map((org: ValidOrganizationDto) => ({
+        id: org.id,
+        name: org.name, // converts {en,am} => string
+        hierarchyType: "organization",
+        value: org.units.length === 1 ? org.units[0].id : "",
+        children:
+          Array.isArray(org.units) && org.units.length > 0
+            ? org.units.map((unit) => ({
+                id: unit.id,
+                name: unit.name, // string
+                hierarchyType: "unit",
+                value: unit.id,
+                children: [],
+              }))
+            : [],
+      })) || []
+    );
+  }, [exteranlOrgsResponse, localizedName]);
+
+  // After defining treeOrganizationsOptions
+  useEffect(() => {
+    if (!selectedUnitId && exteranlOrgsResponse?.items) {
+      const firstValidUnit = exteranlOrgsResponse.items
+        .flatMap((org) => org.units)
+        .find((unit) => unit.id);
+
+      if (firstValidUnit) {
+        setSelectedUnitId(firstValidUnit.id);
+      }
+    }
+  }, [exteranlOrgsResponse, selectedUnitId]);
+
+  // Save
+  useEffect(() => {
+    if (selectedUnitId)
+      sessionStorage.setItem("selectedArchiveUnitId", selectedUnitId);
+  }, [selectedUnitId]);
+
+  // Load on mount
+  useEffect(() => {
+    const saved = sessionStorage.getItem("selectedArchiveUnitId");
+    if (saved) setSelectedUnitId(saved);
+  }, []);
+
+  const { data: archivedUsersData, refetch } = useArchivedUsers(
+    selectedUnitId ?? ""
+  );
+
+  const handlePageChange = (newPage: number) => {
+    setPageIndex(newPage);
+  };
+
+  if (loadingExternalOrgs) {
+    return <div className="text-gray-900 dark:text-gray-100">{t("loading")}</div>;
+  }
+
+  return (
+    <div className="p-6 space-y-6">
+      <Card className="col-span-2 shadow-none border-none bg-transparent px-0">
+        <CardHeader className="flex flex-row justify-between items-center px-0">
+          <CardTitle className="text-xl font-semibold">
+            {t("setting.archivedUsers")}
+          </CardTitle>
+        </CardHeader>
+
+        {/* Unit Selector */}
+        <div className="mb-4">
+          <SimpleTreeSelect
+            label={t("selectUnit")}
+            options={treeOrganizationsOptions}
+            value={selectedUnitId}
+            onChange={handleUnitSelection}
+            collapsible
+          />
+        </div>
+
+        {/* Archived Users Table */}
+        <CardContent className="px-0">
+          <AdvancedTable
+            columns={ArchivedUserColumnDefn}
+            data={archivedUsersData?.items || []}
+            tableName="Archived Users"
+            toolBarPosition="right"
+            itemCount={archivedUsersData?.count || 0}
+            pageIndex={pageIndex}
+            onPageChange={handlePageChange}
+            nextFunction={() => handlePageChange(pageIndex + 1)}
+            prevFunction={() => handlePageChange(Math.max(pageIndex - 1, 0))}
+            refresh={refetch}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default SuperAdminArchiveUsersPage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/SuperAdminArchivedPage.tsx b/apps/edr-freight-web/backoffice/src/pages/SuperAdminArchivedPage.tsx
new file mode 100644
index 000000000..33fc3f6f1
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/SuperAdminArchivedPage.tsx
@@ -0,0 +1,210 @@
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ArchiveRestore, Building2, Landmark } from "lucide-react";
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useOrganizations } from "@/super-admin/hooks/useOrganizations";
+import {
+  useArchivedOrganizations,
+  useArchivedUnits,
+  useArchiveActions,
+} from "@/user-management/hooks/useArchived";
+
+type Tab = "organizations" | "units";
+
+const SuperAdminArchivedPage = () => {
+  const { t } = useTranslation();
+  const localizedName = useLocalizedName();
+
+  const [activeTab, setActiveTab] = useState<Tab>("organizations");
+
+  const { organizationsResponse } = useOrganizations("Org", {
+    take: 300,
+    skip: 0,
+  });
+  const organizations: any[] = organizationsResponse?.items ?? [];
+
+  const [selectedOrgId, setSelectedOrgId] = useState<string>("");
+  if (!selectedOrgId && organizations.length > 0) {
+    setSelectedOrgId(organizations[0].id);
+  }
+
+  const {
+    data: archivedOrgsData,
+    refetch: refetchArchivedOrgs,
+  } = useArchivedOrganizations();
+  const { data: archivedUnitsData, refetch: refetchArchivedUnits } =
+    useArchivedUnits(activeTab === "units" ? selectedOrgId || undefined : undefined);
+
+  const archivedOrgs: any[] = useMemo(
+    () => archivedOrgsData?.items ?? archivedOrgsData ?? [],
+    [archivedOrgsData],
+  );
+  const archivedUnits: any[] = useMemo(
+    () => archivedUnitsData?.items ?? archivedUnitsData ?? [],
+    [archivedUnitsData],
+  );
+
+  const {
+    restoreUnit,
+    isRestoringUnit,
+    restoreOrganization,
+    isRestoringOrganization,
+  } = useArchiveActions();
+
+  const orgColumns = [
+    {
+      id: "name",
+      header: t("organization.name", "Name"),
+      cell: ({ row }: any) => localizedName(row.original?.name) || "—",
+    },
+    {
+      id: "key",
+      header: t("organization.key", "Key"),
+      accessorKey: "key",
+    },
+    {
+      id: "actions",
+      header: t("userIncomingretun.Actions", "Actions"),
+      cell: ({ row }: any) => (
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={isRestoringOrganization}
+          onClick={() => restoreOrganization(row.original.id)}
+          className="flex items-center gap-2 text-primary-700 hover:bg-primary-50">
+          <ArchiveRestore className="h-4 w-4" />
+          {t("archive.restore", "Restore")}
+        </Button>
+      ),
+    },
+  ];
+
+  const unitColumns = [
+    {
+      id: "name",
+      header: t("organization.name", "Name"),
+      cell: ({ row }: any) => localizedName(row.original?.name) || "—",
+    },
+    {
+      id: "key",
+      header: t("organization.key", "Key"),
+      accessorKey: "key",
+    },
+    {
+      id: "actions",
+      header: t("userIncomingretun.Actions", "Actions"),
+      cell: ({ row }: any) => (
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={isRestoringUnit}
+          onClick={() => restoreUnit(row.original.id)}
+          className="flex items-center gap-2 text-primary-700 hover:bg-primary-50">
+          <ArchiveRestore className="h-4 w-4" />
+          {t("archive.restore", "Restore")}
+        </Button>
+      ),
+    },
+  ];
+
+  return (
+    <div className="p-6 space-y-6">
+      <Card className="shadow-none border-none bg-transparent px-0">
+        <CardHeader className="flex flex-row justify-between items-center px-0">
+          <CardTitle className="text-xl font-semibold">
+            {t("archive.archivedItems", "Archived Items")}
+          </CardTitle>
+        </CardHeader>
+
+        <div className="flex gap-2 mb-4">
+          <Button
+            variant={activeTab === "organizations" ? "default" : "outline"}
+            onClick={() => setActiveTab("organizations")}
+            className="flex items-center gap-2">
+            <Landmark className="h-4 w-4" />
+            {t("archive.archivedOrganizations", "Archived Organizations")}
+          </Button>
+          <Button
+            variant={activeTab === "units" ? "default" : "outline"}
+            onClick={() => setActiveTab("units")}
+            className="flex items-center gap-2">
+            <Building2 className="h-4 w-4" />
+            {t("archive.archivedUnits", "Archived Units")}
+          </Button>
+        </div>
+
+        {activeTab === "units" && organizations.length > 0 && (
+          <div className="mb-4 w-full sm:w-1/2">
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-200">
+              {t("organization.selectOrganization", "Select Organization")}
+            </label>
+            <Select
+              value={selectedOrgId}
+              onValueChange={(value) => setSelectedOrgId(value)}>
+              <SelectTrigger className="mt-1 block w-full">
+                <SelectValue
+                  placeholder={t("organization.selectOrganization")}
+                />
+              </SelectTrigger>
+              <SelectContent>
+                {organizations.map((org: any) => (
+                  <SelectItem key={org.id} value={org.id}>
+                    {localizedName(org.name)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+
+        <CardContent className="px-0">
+          {activeTab === "organizations" ? (
+            <AdvancedTable
+              columns={orgColumns as any}
+              data={archivedOrgs}
+              tableName="ArchivedOrganizations"
+              toolBarPosition="right"
+              itemCount={archivedOrgs.length}
+              pageIndex={0}
+              onPageChange={() => {}}
+              nextFunction={() => {}}
+              prevFunction={() => {}}
+              refresh={refetchArchivedOrgs}
+            />
+          ) : (
+            <AdvancedTable
+              columns={unitColumns as any}
+              data={archivedUnits}
+              tableName="ArchivedUnits"
+              toolBarPosition="right"
+              itemCount={archivedUnits.length}
+              pageIndex={0}
+              onPageChange={() => {}}
+              nextFunction={() => {}}
+              prevFunction={() => {}}
+              refresh={refetchArchivedUnits}
+            />
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default SuperAdminArchivedPage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/UnitConfigurationPage.tsx b/apps/edr-freight-web/backoffice/src/pages/UnitConfigurationPage.tsx
new file mode 100644
index 000000000..1ad084b17
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/UnitConfigurationPage.tsx
@@ -0,0 +1,1937 @@
+import React, { useEffect, useState } from "react";
+import { Edit2Icon, Settings } from "lucide-react";
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "@/shared/common/ui/select";
+import { useMyAdminOrganizations } from "@/user-management/hooks/useOrgAdminOrganizations";
+import { useUnit } from "@/user-management/hooks/useUnit";
+import { useUnitConfiguration } from "@/shared/hooks/useUnitConfiguration";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/common/ui/table";
+import {
+  ERecordSenderInformationScope,
+  prefixSuffixService,
+} from "@/user-management/services/api/prefixSuffixService";
+import type { UnitConfigurationItem } from "@/user-management/services/api/prefixSuffixService";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { Button } from "@/shared/common/ui/button";
+import {
+  PositionScopeToFetch,
+  positionScopeValues,
+} from "./PositionConfigurationPage";
+import { t } from "i18next";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { Switch } from "@/shared/common/ui/switch";
+import { toast } from "sonner";
+import type { UnitDto } from "@/user-management/dto/unit/unitDto";
+
+const configurationCardShell =
+  "relative overflow-hidden rounded-2xl border border-slate-200/80 bg-gradient-to-br from-white via-slate-50 to-slate-100/60 p-4 shadow-sm sm:p-6 dark:border-slate-700/80 dark:bg-gradient-to-br dark:from-slate-950 dark:via-slate-900 dark:to-slate-900";
+
+const UnitConfigurationPage = () => {
+  const queryClient = useQueryClient();
+  const localizedName = useLocalizedName();
+  const { getAccessibleList } = useUnit();
+
+  // Org admin: fetch only the orgs they administer
+  const { organizations, isLoading: isLoadingOrgs } = useMyAdminOrganizations();
+  const [selectedOrgId, setSelectedOrgId] = useState("");
+  const [selectedUnitId, setSelectedUnitId] = useState("");
+
+  // Auto-select the first org on load
+  useEffect(() => {
+    if (organizations.length > 0 && !selectedOrgId) {
+      setSelectedOrgId(organizations[0].id);
+    }
+  }, [organizations, selectedOrgId]);
+
+  // Organization admins see all units; unit admins see only units they administer.
+  const { data: unitsResponse, isLoading: isLoadingUnits } = getAccessibleList(
+    selectedOrgId,
+    { take: 1000, skip: 0 },
+  );
+  const units = (unitsResponse?.data?.items ?? []) as UnitDto[];
+
+  // Reset unit selection when org changes
+  useEffect(() => {
+    setSelectedUnitId("");
+  }, [selectedOrgId]);
+
+  // Auto-select first unit once units load
+  useEffect(() => {
+    if (units.length > 0 && !selectedUnitId) {
+      setSelectedUnitId(units[0].id);
+    }
+  }, [units, selectedUnitId]);
+  const [open, setOpen] = useState(false);
+  const [newScope, setNewScope] = useState("");
+  const [recordSenderInformationScope, setRecordSenderInformationScope] =
+    useState<ERecordSenderInformationScope>(ERecordSenderInformationScope.NAME);
+  const [canAssignCustomReferenceNumber, setCanAssignCustomReferenceNumber] =
+    useState(false);
+
+  const [canUseNewInternalMemoFormat, setCanUseNewInternalMemoFormat] =
+    useState(false);
+  const [canHaveTagBasedReferenceNumber, setCanHaveTagBasedReferenceNumber] =
+    useState(false);
+  const [referenceNumberCountFirst, setReferenceNumberCountFirst] =
+    useState(false);
+  const [canUserSkipLevel, setCanUserSkipLevel] = useState(false);
+  const [canSendToBranch, setCanSendToBranch] = useState(false);
+  const [
+    canRecordDateLabelHasLocalization,
+    setCanRecordDateLabelHasLocalization,
+  ] = useState(false);
+  const [canRecordDateHaveTime, setCanRecordDateHaveTime] = useState(false);
+  const [includeSignatureAssign, setIncludeSignatureAssign] = useState(false);
+  const [waitForAllCollaborators, setWaitForAllCollaborators] = useState(false);
+  const [shouldCollaboratorAlwaysSign, setShouldCollaboratorAlwaysSign] =
+    useState(false);
+  const [
+    shouldIncludeForYourReferenceInCC,
+    setShouldIncludeForYourReferenceInCC,
+  ] = useState(false);
+  const [canCollaborationBeCreatedForAll, setCanCollaborationBeCreatedForAll] =
+    useState(false);
+  const [canCreateDirectRecord, setCanCreateDirectRecord] = useState(false);
+  const [canCreateBankRecord, setCanCreateBankRecord] = useState(false);
+  const [
+    isApprovalRequiredForPositionChange,
+    setIsApprovalRequiredForPositionChange,
+  ] = useState(false);
+  const [
+    canPositionBasedRecordsBeCreated,
+    setCanPositionBasedRecordsBeCreated,
+  ] = useState(false);
+  const [
+    canPositionBasedReferenceBeUsedForAllTypes,
+    setCanPositionBasedReferenceBeUsedForAllTypes,
+  ] = useState(false);
+  const [
+    canInternalMemoRequirePositionBasedReferenceNumber,
+    setCanInternalMemoRequirePositionBasedReferenceNumber,
+  ] = useState(false);
+  const [
+    shouldDirectRecordHaveHeaderAndFooter,
+    setShouldDirectRecordHaveHeaderAndFooter,
+  ] = useState(false);
+  const [
+    canRecordBeEditedByCollaborators,
+    setCanRecordBeEditedByCollaborators,
+  ] = useState(false);
+  const [canRecordHaveCollaboratorsName, setCanRecordHaveCollaboratorsName] =
+    useState(false);
+  const [canRecordBeEditedOnWorkflow, setCanRecordBeEditedOnWorkflow] =
+    useState(false);
+  const [
+    canIncomingAssignmentsBeSeparated,
+    setcanIncomingAssignmentsBeSeparated,
+  ] = useState(false);
+  const [canROReturn, setCanROReturn] = useState(false);
+  const [internalMemoHasReferenceNumber, setInternalMemoHasReferenceNumber] =
+    useState(false);
+  const [attachSignatureOnAttachment, setAttachSignatureOnAttachment] =
+    useState(false);
+  const { data, isLoading, error } = useUnitConfiguration(selectedUnitId, {
+    enabled: !!selectedUnitId,
+  });
+  const config: UnitConfigurationItem | undefined = data?.data?.items?.[0];
+  const [IsLoading, setIsLoading] = useState(false);
+  useEffect(() => {
+    if (config) {
+      setCanAssignCustomReferenceNumber(
+        config.canAssignCustomReferenceNumber || false,
+      );
+      setRecordSenderInformationScope(
+        (config.recordSenderInformationScope as ERecordSenderInformationScope) ||
+          ERecordSenderInformationScope.NAME,
+      );
+      setCanUseNewInternalMemoFormat(
+        config.canInternalMemosHaveSenderInformation || false,
+      );
+      setCanRecordDateLabelHasLocalization(
+        config.canRecordDateLabelHasLocalization || false,
+      );
+      setCanRecordDateHaveTime(config.canRecordDateHaveTime || false);
+      setIncludeSignatureAssign(config.forwardWithTeeterSignature || false);
+      setWaitForAllCollaborators(
+        config.waitAllCollaboratorsBeforeAction || false,
+      );
+      setShouldCollaboratorAlwaysSign(
+        config.shouldCollaboratorAlwaysSign || false,
+      );
+      setShouldIncludeForYourReferenceInCC(
+        config.shouldIncludeForYourReferenceInCC || false,
+      );
+      setCanCollaborationBeCreatedForAll(
+        config.canCollaborationBeCreatedForAll || false,
+      );
+      setCanCreateDirectRecord(config.canCreateDirectRecord || false);
+      setCanCreateBankRecord(config.canCreateBankRelatedRecords || false);
+      setIsApprovalRequiredForPositionChange(
+        config.isApprovalRequiredForPositionChange || false,
+      );
+      setCanPositionBasedRecordsBeCreated(
+        config.canPositionBasedRecordsBeCreated || false,
+      );
+      setCanPositionBasedReferenceBeUsedForAllTypes(
+        config.canPositionBasedReferenceBeUsedForAllTypes || false,
+      );
+      setShouldDirectRecordHaveHeaderAndFooter(
+        config.shouldDirectRecordHaveHeaderAndFooter || false,
+      );
+      setCanInternalMemoRequirePositionBasedReferenceNumber(
+        config.canInternalMemoRequirePositionBasedReferenceNumber || false,
+      );
+      setCanRecordBeEditedByCollaborators(
+        config.canRecordBeEditedByCollaborators || false,
+      );
+      setCanRecordHaveCollaboratorsName(
+        config.canRecordHaveCollaboratorsName || false,
+      );
+      setCanRecordBeEditedOnWorkflow(
+        config.canRecordBeEditedOnWorkflow || false,
+      );
+      setcanIncomingAssignmentsBeSeparated(
+        config.canIncomingAssignmentsBeSeparated || false,
+      );
+      setCanROReturn(config.canROReturn || false);
+      setInternalMemoHasReferenceNumber(
+        config.internalMemoHasReferenceNumber || false,
+      );
+      setAttachSignatureOnAttachment(
+        config.attachSignatureOnAttachment || false,
+      );
+      setCanHaveTagBasedReferenceNumber(
+        config.canHaveTagBasedReferenceNumber || false,
+      );
+      setReferenceNumberCountFirst(config.referenceNumberCountFirst || false);
+      setCanUserSkipLevel(config.canUserSkipLevel || false);
+      setCanSendToBranch(config.canSendToBranch || false);
+    }
+  }, [config]);
+
+  const handleCanHaveTagBasedReferenceNumberToggle = (checked: boolean) => {
+    if (!config?.id) return;
+    setCanHaveTagBasedReferenceNumber(checked);
+    updateCanHaveTagBasedReferenceNumber({
+      id: config.id,
+      value: checked,
+    });
+  };
+
+  const handleReferenceNumberCountFirstToggle = (checked: boolean) => {
+    if (!config?.id) return;
+    setReferenceNumberCountFirst(checked);
+    updateReferenceNumberCountFirst({
+      id: config.id,
+      value: checked,
+    });
+  };
+
+  const handleCanUserSkipLevelToggle = (checked: boolean) => {
+    if (!config?.id) return;
+    setCanUserSkipLevel(checked);
+    updateCanUserSkipLevel({
+      id: config.id,
+      value: checked,
+    });
+  };
+  const handleCanSendToBranchToggle = (checked: boolean) => {
+    if (!config?.id) return;
+    setCanSendToBranch(checked);
+    updateCanSendToBranch({
+      id: config.id,
+      value: checked,
+    });
+  };
+  const {
+    mutate: updateCanHaveTagBasedReferenceNumber,
+    isPending: isUpdatingCanHaveTagBasedReferenceNumber,
+  } = useMutation({
+    mutationFn: ({ id, value }: { id: string; value: boolean }) =>
+      prefixSuffixService.updateInternalPrefixSuffix(
+        { canHaveTagBasedReferenceNumber: value, unitId: selectedUnitId },
+        id,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["unitConfig", selectedUnitId],
+      });
+      toast.success(
+        `${t("setting.canHaveTagBasedReferenceNumber", "Can Have Tag Based Reference Number")} ${
+          canHaveTagBasedReferenceNumber ? "enabled" : "disabled"
+        }`,
+      );
+    },
+    onError: (err) => console.error("Failed to update", err),
+  });
+
+  const {
+    mutate: updateReferenceNumberCountFirst,
+    isPending: isUpdatingReferenceNumberCountFirst,
+  } = useMutation({
+    mutationFn: ({ id, value }: { id: string; value: boolean }) =>
+      prefixSuffixService.updateInternalPrefixSuffix(
+        { referenceNumberCountFirst: value, unitId: selectedUnitId },
+        id,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["unitConfig", selectedUnitId],
+      });
+      toast.success(
+        `${t(
+          "setting.referenceNumberCountFirst",
+          "Should The Number Count Come First On The Reference Number",
+        )} ${referenceNumberCountFirst ? "enabled" : "disabled"}`,
+      );
+    },
+    onError: (err) => console.error("Failed to update", err),
+  });
+
+  const {
+    mutate: updateCanUserSkipLevel,
+    isPending: isUpdatingCanUserSkipLevel,
+  } = useMutation({
+    mutationFn: ({ id, value }: { id: string; value: boolean }) =>
+      prefixSuffixService.updateInternalPrefixSuffix(
+        { canUserSkipLevel: value, unitId: selectedUnitId },
+        id,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["unitConfig", selectedUnitId],
+      });
+      toast.success(
+        `${t("setting.canUserSkipLevel", "User Can Skip Level")} ${
+          canUserSkipLevel ? "enabled" : "disabled"
+        }`,
+      );
+    },
+    onError: (err) => console.error("Failed to update", err),
+  });
+  const {
+    mutate: updateCanSendToBranch,
+    isPending: isUpdatingCanSendToBranch,
+  } = useMutation({
+    mutationFn: ({ id, value }: { id: string; value: boolean }) =>
+      prefixSuffixService.updateInternalPrefixSuffix(
+        { canSendToBranch: value, unitId: selectedUnitId },
+        id,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["unitConfig", selectedUnitId],
+      });
+      toast.success(
+        `${t("setting.canSendToBranch", "Can Send to Branch")} ${
+          canSendToBranch ? "enabled" : "disabled"
+        }`,
+      );
+    },
+    onError: (err) => console.error("Failed to update", err),
+  });
+  const {
+    mutate: updateRecordSenderInformationScope,
+    isPending: isUpdatingRecordSenderInformationScope,
+  } = useMutation({
+    mutationFn: ({
+      id,
+      scope,
+    }: {
+      id: string;
+      scope: ERecordSenderInformationScope;
+    }) =>
+      prefixSuffixService.updateInternalPrefixSuffix(
+        { recordSenderInformationScope: scope, unitId: selectedUnitId },
+        id,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["unitConfig", selectedUnitId],
+      });
+      toast.success(
+        `${t("setting.recordSenderInformationScope", "Record Sender Information Scope")} updated`,
+      );
+    },
+    onError: (err) => console.error("Failed to update", err),
+  });
+
+  const {
+    mutate: updateCanAssignCustomReferenceNumber,
+    isPending: isUpdatingCanAssignCustomReferenceNumber,
+  } = useMutation({
+    mutationFn: ({ id, value }: { id: string; value: boolean }) =>
+      prefixSuffixService.updateInternalPrefixSuffix(
+        { canAssignCustomReferenceNumber: value, unitId: selectedUnitId },
+        id,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["unitConfig", selectedUnitId],
+      });
+
+      toast.success(
+        `${t("setting.canAssignCustomReferenceNumber")} ${
+          canAssignCustomReferenceNumber ? "enabled" : "disabled"
+        }`,
+      );
+    },
+    onError: (err) => console.error("Failed to update", err),
+  });
+
+  const {
+    mutate: updateCanUseNewInternalMemoFormat,
+    isPending: isUpdatingCanUseNewInternalMemoFormat,
+  } = useMutation({
+    mutationFn: ({ id, value }: { id: string; value: boolean }) =>
+      prefixSuffixService.updateInternalPrefixSuffix(
+        {
+          canInternalMemosHaveSenderInformation: value,
+          unitId: selectedUnitId,
+        },
+        id,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["unitConfig", selectedUnitId],
+      });
+
+      toast.success(
+        `${t("setting.canUseNewInternalMemoFormat")} ${
+          canUseNewInternalMemoFormat ? "enabled" : "disabled"
+        }`,
+      );
+    },
+    onError: (err) => console.error("Failed to update", err),
+  });
+
+  const {
+    mutate: updateCanRecordDateLabelHasLocalization,
+    isPending: isUpdatingCanRecordDateLabelHasLocalization,
+  } = useMutation({
+    mutationFn: ({ id, value }: { id: string; value: boolean }) =>
+      prefixSuffixService.updateInternalPrefixSuffix(
+        {
+          canRecordDateLabelHasLocalization: value,
+          unitId: selectedUnitId,
+        },
+        id,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["unitConfig", selectedUnitId],
+      });
+
+      toast.success(
+        `${t("setting.canRecordDateLabelHasLocalization")} ${
+          canRecordDateLabelHasLocalization ? "enabled" : "disabled"
+        }`,
+      );
+    },
+    onError: (err) => console.error("Failed to update", err),
+  });
+
+  const {
+    mutate: updateCanRecordDateHaveTime,
+    isPending: isUpdatingCanRecordDateHaveTime,
+  } = useMutation({
+    mutationFn: ({ id, value }: { id: string; value: boolean }) =>
+      prefixSuffixService.updateInternalPrefixSuffix(
+        {
+          canRecordDateHaveTime: value,
+          unitId: selectedUnitId,
+        },
+        id,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["unitConfig", selectedUnitId],
+      });
+
+      toast.success(
+        `${t("setting.canRecordDateHaveTime", "Record Date Can Have Time")} ${
+          canRecordDateHaveTime ? "enabled" : "disabled"
+        }`,
+      );
+    },
+    onError: (err) => console.error("Failed to update", err),
+  });
+
+  // mutation for updating scope
+  const { mutate: updateScope, isPending: isUpdating } = useMutation({
+    mutationFn: ({ id, scope }: { id: string; scope: string }) =>
+      prefixSuffixService.updateInternalPrefixSuffix(
+        { positionScopeToFetch: scope, unitId: selectedUnitId },
+        id,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["unitConfig", selectedUnitId],
+      });
+      setOpen(false); // close modal
+    },
+    onError: (err) => {
+      console.error("Failed to update scope", err);
+    },
+  });
+
+  // mutation for updating signature
+  const { mutate: updateSignature, isPending: isUpdatingSignature } =
+    useMutation({
+      mutationFn: ({ id, signature }: { id: string; signature: boolean }) =>
+        prefixSuffixService.updateInternalPrefixSuffix(
+          { forwardWithTeeterSignature: signature, unitId: selectedUnitId },
+          id,
+        ),
+      onSuccess: () => {
+        queryClient.invalidateQueries({
+          queryKey: ["unitConfig", selectedUnitId],
+        });
+        toast.success(
+          `Signature & Teeter ${includeSignatureAssign ? "enabled" : "disabled"}`,
+        );
+      },
+      onError: (err) => {
+        console.error("Failed to update signature", err);
+      },
+    });
+
+  const {
+    mutate: updateCollaboratorWait,
+    isPending: isUpdatingCollaboratorWait,
+  } = useMutation({
+    mutationFn: ({ id, wait }: { id: string; wait: boolean }) =>
+      prefixSuffixService.updateInternalPrefixSuffix(
+        {
+          waitAllCollaboratorsBeforeAction: wait,
+          unitId: selectedUnitId,
+        },
+        id,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["unitConfig", selectedUnitId],
+      });
+      toast.success(
+        `${t("setting.title6")} ${waitForAllCollaborators ? "enabled" : "disabled"}`,
+      );
+    },
+    onError: (err) => {
+      console.error("Failed to update collaborator wait setting", err);
+    },
+  });
+  // Open modal and pre-fill value
+  const handleEdit = () => {
+    if (!config?.id) return;
+    setNewScope(config.positionScopeToFetch as PositionScopeToFetch);
+    setOpen(true);
+  };
+
+  const handleSave = () => {
+    if (!config?.id) return;
+    if (newScope && newScope !== config.positionScopeToFetch) {
+      updateScope({ id: config.id, scope: newScope });
+    }
+  };
+  const handleToggle = (checked: boolean) => {
+    if (!config?.id) return;
+    setIncludeSignatureAssign(checked);
+    updateSignature({ id: config.id, signature: checked });
+  };
+  const handleCanAssignCustomReferenceNumberToggle = (checked: boolean) => {
+    if (!config?.id) return;
+
+    setCanAssignCustomReferenceNumber(checked);
+    updateCanAssignCustomReferenceNumber({
+      id: config.id,
+      value: checked,
+    });
+  };
+
+  const handleCanUseNewInternalMemoFormatToggle = (checked: boolean) => {
+    if (!config?.id) return;
+
+    setCanUseNewInternalMemoFormat(checked);
+    updateCanUseNewInternalMemoFormat({
+      id: config.id,
+      value: checked,
+    });
+  };
+  const handleCanRecordDateLabelHasLocalizationToggle = (checked: boolean) => {
+    if (!config?.id) return;
+
+    setCanRecordDateLabelHasLocalization(checked);
+    updateCanRecordDateLabelHasLocalization({
+      id: config.id,
+      value: checked,
+    });
+  };
+  const handleCanRecordDateHaveTimeToggle = (checked: boolean) => {
+    if (!config?.id) return;
+
+    setCanRecordDateHaveTime(checked);
+    updateCanRecordDateHaveTime({
+      id: config.id,
+      value: checked,
+    });
+  };
+  const handleCollaboratorWaitToggle = (checked: boolean) => {
+    if (!config?.id) return;
+    setWaitForAllCollaborators(checked);
+    updateCollaboratorWait({ id: config.id, wait: checked });
+  };
+
+  const {
+    mutate: updateCollaboratorAlwaysSign,
+    isPending: isUpdatingCollaboratorAlwaysSign,
+  } = useMutation({
+    mutationFn: ({ id, value }: { id: string; value: boolean }) =>
+      prefixSuffixService.updateInternalPrefixSuffix(
+        { shouldCollaboratorAlwaysSign: value, unitId: selectedUnitId },
+        id,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["unitConfig", selectedUnitId],
+      });
+      toast.success(
+        `${t("setting.shouldCollaboratorAlwaysSign")} ${shouldCollaboratorAlwaysSign ? "enabled" : "disabled"}`,
+      );
+    },
+    onError: (err) => console.error("Failed to update", err),
+  });
+
+  const {
+    mutate: updateIncludeForYourReference,
+    isPending: isUpdatingIncludeForYourReference,
+  } = useMutation({
+    mutationFn: ({ id, value }: { id: string; value: boolean }) =>
+      prefixSuffixService.updateInternalPrefixSuffix(
+        { shouldIncludeForYourReferenceInCC: value, unitId: selectedUnitId },
+        id,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["unitConfig", selectedUnitId],
+      });
+      toast.success(
+        `${t("setting.shouldIncludeForYourReferenceInCC")} ${shouldIncludeForYourReferenceInCC ? "enabled" : "disabled"}`,
+      );
+    },
+    onError: (err) => console.error("Failed to update", err),
+  });
+
+  const handleCollaboratorAlwaysSignToggle = (checked: boolean) => {
+    if (!config?.id) return;
+    setShouldCollaboratorAlwaysSign(checked);
+    updateCollaboratorAlwaysSign({ id: config.id, value: checked });
+  };
+  const handleRecordSenderInformationScopeToggle = (
+    scope: ERecordSenderInformationScope,
+  ) => {
+    if (!config?.id) return;
+    setRecordSenderInformationScope(scope);
+    updateRecordSenderInformationScope({ id: config.id, scope });
+  };
+
+  const handleIncludeForYourReferenceToggle = (checked: boolean) => {
+    if (!config?.id) return;
+    setShouldIncludeForYourReferenceInCC(checked);
+    updateIncludeForYourReference({ id: config.id, value: checked });
+  };
+
+  const {
+    mutate: updateCanCollaborationBeCreatedForAll,
+    isPending: isUpdatingCanCollaborationBeCreatedForAll,
+  } = useMutation({
+    mutationFn: ({ id, value }: { id: string; value: boolean }) =>
+      prefixSuffixService.updateInternalPrefixSuffix(
+        { canCollaborationBeCreatedForAll: value, unitId: selectedUnitId },
+        id,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["unitConfig", selectedUnitId],
+      });
+      toast.success(
+        `${t("setting.canCollaborationBeCreatedForAll")} ${
+          canCollaborationBeCreatedForAll ? "enabled" : "disabled"
+        }`,
+      );
+    },
+    onError: (err) => console.error("Failed to update", err),
+  });
+
+  const handleCanCollaborationBeCreatedForAllToggle = (checked: boolean) => {
+    if (!config?.id) return;
+    setCanCollaborationBeCreatedForAll(checked);
+    updateCanCollaborationBeCreatedForAll({ id: config.id, value: checked });
+  };
+
+  const {
+    mutate: updateCanCreateDirectRecord,
+    isPending: isUpdatingCanCreateDirectRecord,
+  } = useMutation({
+    mutationFn: ({ id, value }: { id: string; value: boolean }) =>
+      prefixSuffixService.updateInternalPrefixSuffix(
+        { canCreateDirectRecord: value, unitId: selectedUnitId },
+        id,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["unitConfig", selectedUnitId],
+      });
+      toast.success(
+        `${t("setting.canCreateDirectRecord")} ${canCreateDirectRecord ? "enabled" : "disabled"}`,
+      );
+    },
+    onError: (err) =>
+      console.error("Failed to update direct record creation setting", err),
+  });
+
+  const handleCanCreateDirectRecordToggle = (checked: boolean) => {
+    if (!config?.id) return;
+    setCanCreateDirectRecord(checked);
+    updateCanCreateDirectRecord({ id: config.id, value: checked });
+  };
+
+  const {
+    mutate: updateCanCreateBankRecord,
+    isPending: isUpdatingCanCreateBankRecord,
+  } = useMutation({
+    mutationFn: ({ id, value }: { id: string; value: boolean }) =>
+      prefixSuffixService.updateInternalPrefixSuffix(
+        { canCreateBankRelatedRecords: value, unitId: selectedUnitId },
+        id,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["unitConfig", selectedUnitId],
+      });
+      toast.success(
+        `${t("setting.canCreateBankRecord")} ${canCreateBankRecord ? "enabled" : "disabled"}`,
+      );
+    },
+    onError: (err) =>
+      console.error("Failed to update bank record creation setting", err),
+  });
+
+  const handleCanCreateBankRecordToggle = (checked: boolean) => {
+    if (!config?.id) return;
+    setCanCreateBankRecord(checked);
+    updateCanCreateBankRecord({ id: config.id, value: checked });
+  };
+
+  const {
+    mutate: updateIsApprovalRequiredForPositionChange,
+    isPending: isUpdatingIsApprovalRequiredForPositionChange,
+  } = useMutation({
+    mutationFn: ({ id, value }: { id: string; value: boolean }) =>
+      prefixSuffixService.updateInternalPrefixSuffix(
+        { isApprovalRequiredForPositionChange: value, unitId: selectedUnitId },
+        id,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["unitConfig", selectedUnitId],
+      });
+      toast.success(
+        `${t("setting.isApprovalRequiredForPositionChange")} ${
+          isApprovalRequiredForPositionChange ? "enabled" : "disabled"
+        }`,
+      );
+    },
+    onError: (err) =>
+      console.error("Failed to update position change approval setting", err),
+  });
+
+  const handleIsApprovalRequiredForPositionChangeToggle = (
+    checked: boolean,
+  ) => {
+    if (!config?.id) return;
+    setIsApprovalRequiredForPositionChange(checked);
+    updateIsApprovalRequiredForPositionChange({
+      id: config.id,
+      value: checked,
+    });
+  };
+
+  const {
+    mutate: updateCanPositionBasedRecordsBeCreated,
+    isPending: isUpdatingCanPositionBasedRecordsBeCreated,
+  } = useMutation({
+    mutationFn: ({ id, value }: { id: string; value: boolean }) =>
+      prefixSuffixService.updateInternalPrefixSuffix(
+        { canPositionBasedRecordsBeCreated: value, unitId: selectedUnitId },
+        id,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["unitConfig", selectedUnitId],
+      });
+      toast.success(
+        `${t("setting.canPositionBasedRecordsBeCreated")} ${
+          canPositionBasedRecordsBeCreated ? "enabled" : "disabled"
+        }`,
+      );
+    },
+    onError: (err) =>
+      console.error(
+        "Failed to update position-based record creation setting",
+        err,
+      ),
+  });
+
+  const handleCanPositionBasedRecordsBeCreatedToggle = (checked: boolean) => {
+    if (!config?.id) return;
+    setCanPositionBasedRecordsBeCreated(checked);
+    updateCanPositionBasedRecordsBeCreated({ id: config.id, value: checked });
+  };
+
+  const {
+    mutate: updateCanPositionBasedReferenceBeUsedForAllTypes,
+    isPending: isUpdatingCanPositionBasedReferenceBeUsedForAllTypes,
+  } = useMutation({
+    mutationFn: ({ id, value }: { id: string; value: boolean }) =>
+      prefixSuffixService.updateInternalPrefixSuffix(
+        {
+          canPositionBasedReferenceBeUsedForAllTypes: value,
+          unitId: selectedUnitId,
+        },
+        id,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["unitConfig", selectedUnitId],
+      });
+      toast.success(
+        `${t("setting.canPositionBasedReferenceBeUsedForAllTypes")} ${
+          canPositionBasedReferenceBeUsedForAllTypes ? "enabled" : "disabled"
+        }`,
+      );
+    },
+    onError: (err) =>
+      console.error(
+        "Failed to update position-based reference usage setting",
+        err,
+      ),
+  });
+
+  const handleCanPositionBasedReferenceBeUsedForAllTypesToggle = (
+    checked: boolean,
+  ) => {
+    if (!config?.id) return;
+    setCanPositionBasedReferenceBeUsedForAllTypes(checked);
+    updateCanPositionBasedReferenceBeUsedForAllTypes({
+      id: config.id,
+      value: checked,
+    });
+  };
+
+  const {
+    mutate: updateShouldDirectRecordHaveHeaderAndFooter,
+    isPending: isUpdatingShouldDirectRecordHaveHeaderAndFooter,
+  } = useMutation({
+    mutationFn: ({ id, value }: { id: string; value: boolean }) =>
+      prefixSuffixService.updateInternalPrefixSuffix(
+        {
+          shouldDirectRecordHaveHeaderAndFooter: value,
+          unitId: selectedUnitId,
+        },
+        id,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["unitConfig", selectedUnitId],
+      });
+      toast.success(
+        `${t("setting.shouldDirectRecordHaveHeaderAndFooter")} ${
+          shouldDirectRecordHaveHeaderAndFooter
+            ? t("setting.enabled")
+            : t("setting.disabled")
+        }`,
+      );
+    },
+    onError: (err) => console.error("Failed to update", err),
+  });
+
+  const handleShouldDirectRecordHaveHeaderAndFooterToggle = (
+    checked: boolean,
+  ) => {
+    if (!config?.id) return;
+    setShouldDirectRecordHaveHeaderAndFooter(checked);
+    updateShouldDirectRecordHaveHeaderAndFooter({
+      id: config.id,
+      value: checked,
+    });
+  };
+
+  const {
+    mutate: updateCanRecordBeEditedByCollaborators,
+    isPending: isUpdatingCanRecordBeEditedByCollaborators,
+  } = useMutation({
+    mutationFn: ({ id, value }: { id: string; value: boolean }) =>
+      prefixSuffixService.updateInternalPrefixSuffix(
+        { canRecordBeEditedByCollaborators: value, unitId: selectedUnitId },
+        id,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["unitConfig", selectedUnitId],
+      });
+      toast.success(
+        `${t("setting.canRecordBeEditedByCollaborators")} ${canRecordBeEditedByCollaborators ? "enabled" : "disabled"}`,
+      );
+    },
+    onError: (err) => console.error("Failed to update", err),
+  });
+
+  const handleCanRecordBeEditedByCollaboratorsToggle = (checked: boolean) => {
+    if (!config?.id) return;
+    setCanRecordBeEditedByCollaborators(checked);
+    updateCanRecordBeEditedByCollaborators({ id: config.id, value: checked });
+  };
+
+  const {
+    mutate: updateCanRecordHaveCollaboratorsName,
+    isPending: isUpdatingCanRecordHaveCollaboratorsName,
+  } = useMutation({
+    mutationFn: ({ id, value }: { id: string; value: boolean }) =>
+      prefixSuffixService.updateInternalPrefixSuffix(
+        { canRecordHaveCollaboratorsName: value, unitId: selectedUnitId },
+        id,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["unitConfig", selectedUnitId],
+      });
+      toast.success(
+        `${t("setting.canRecordHaveCollaboratorsName")} ${canRecordHaveCollaboratorsName ? "enabled" : "disabled"}`,
+      );
+    },
+    onError: (err) => console.error("Failed to update", err),
+  });
+
+  const handleCanRecordHaveCollaboratorsNameToggle = (checked: boolean) => {
+    if (!config?.id) return;
+    setCanRecordHaveCollaboratorsName(checked);
+    updateCanRecordHaveCollaboratorsName({ id: config.id, value: checked });
+  };
+
+  const {
+    mutate: updateCanRecordBeEditedOnWorkflow,
+    isPending: isUpdatingCanRecordBeEditedOnWorkflow,
+  } = useMutation({
+    mutationFn: ({ id, value }: { id: string; value: boolean }) =>
+      prefixSuffixService.updateInternalPrefixSuffix(
+        { canRecordBeEditedOnWorkflow: value, unitId: selectedUnitId },
+        id,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["unitConfig", selectedUnitId],
+      });
+      toast.success(
+        `${t("setting.canRecordBeEditedOnWorkflow")} ${canRecordBeEditedOnWorkflow ? "enabled" : "disabled"}`,
+      );
+    },
+    onError: (err) => console.error("Failed to update", err),
+  });
+  const {
+    mutate: updatecanIncomingAssignmentsBeSeparated,
+    isPending: isUpdatingcanIncomingAssignmentsBeSeparated,
+  } = useMutation({
+    mutationFn: ({ id, value }: { id: string; value: boolean }) =>
+      prefixSuffixService.updateInternalPrefixSuffix(
+        { canIncomingAssignmentsBeSeparated: value, unitId: selectedUnitId },
+        id,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["unitConfig", selectedUnitId],
+      });
+      toast.success(
+        `${t("setting.canIncomingAssignmentsBeSeparated")} ${canIncomingAssignmentsBeSeparated ? "enabled" : "disabled"}`,
+      );
+    },
+    onError: (err) => console.error("Failed to update", err),
+  });
+
+  const handleCanRecordBeEditedOnWorkflowToggle = (checked: boolean) => {
+    if (!config?.id) return;
+    setCanRecordBeEditedOnWorkflow(checked);
+    updateCanRecordBeEditedOnWorkflow({ id: config.id, value: checked });
+  };
+  const handlecanIncomingAssignmentsBeSeparatedToggle = (checked: boolean) => {
+    if (!config?.id) return;
+    setcanIncomingAssignmentsBeSeparated(checked);
+    updatecanIncomingAssignmentsBeSeparated({ id: config.id, value: checked });
+  };
+
+  const { mutate: updateCanROReturn, isPending: isUpdatingCanROReturn } =
+    useMutation({
+      mutationFn: ({ id, value }: { id: string; value: boolean }) =>
+        prefixSuffixService.updateInternalPrefixSuffix(
+          { canROReturn: value, unitId: selectedUnitId },
+          id,
+        ),
+      onSuccess: () => {
+        queryClient.invalidateQueries({
+          queryKey: ["unitConfig", selectedUnitId],
+        });
+        toast.success(
+          `${t("setting.canROReturn")} ${canROReturn ? "enabled" : "disabled"}`,
+        );
+      },
+      onError: (err) => console.error("Failed to update", err),
+    });
+
+  const handleCanROReturnToggle = (checked: boolean) => {
+    if (!config?.id) return;
+    setCanROReturn(checked);
+    updateCanROReturn({ id: config.id, value: checked });
+  };
+
+  const {
+    mutate: updateInternalMemoHasReferenceNumber,
+    isPending: isUpdatingInternalMemoHasReferenceNumber,
+  } = useMutation({
+    mutationFn: ({ id, value }: { id: string; value: boolean }) =>
+      prefixSuffixService.updateInternalPrefixSuffix(
+        { internalMemoHasReferenceNumber: value, unitId: selectedUnitId },
+        id,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["unitConfig", selectedUnitId],
+      });
+      toast.success(
+        `${t("setting.internalMemoHasReferenceNumber")} ${
+          internalMemoHasReferenceNumber ? "enabled" : "disabled"
+        }`,
+      );
+    },
+    onError: (err) => console.error("Failed to update", err),
+  });
+  const {
+    mutate: updateCanInternalMemoRequirePositionBasedReferenceNumber,
+    isPending: isUpdatingCanInternalMemoRequirePositionBasedReferenceNumber,
+  } = useMutation({
+    mutationFn: ({ id, value }: { id: string; value: boolean }) =>
+      prefixSuffixService.updateInternalPrefixSuffix(
+        {
+          canInternalMemoRequirePositionBasedReferenceNumber: value,
+          unitId: selectedUnitId,
+        },
+        id,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["unitConfig", selectedUnitId],
+      });
+
+      toast.success(
+        `${t(
+          "setting.canInternalMemoRequirePositionBasedReferenceNumber",
+          "Internal Memo Require Position Based Reference Number",
+        )} ${
+          canInternalMemoRequirePositionBasedReferenceNumber
+            ? "enabled"
+            : "disabled"
+        }`,
+      );
+    },
+    onError: (err) => console.error("Failed to update", err),
+  });
+
+  const handleCanInternalMemoRequirePositionBasedReferenceNumberToggle = (
+    checked: boolean,
+  ) => {
+    if (!config?.id) return;
+
+    setCanInternalMemoRequirePositionBasedReferenceNumber(checked);
+
+    updateCanInternalMemoRequirePositionBasedReferenceNumber({
+      id: config.id,
+      value: checked,
+    });
+  };
+  const handleInternalMemoHasReferenceNumberToggle = (checked: boolean) => {
+    if (!config?.id) return;
+    setInternalMemoHasReferenceNumber(checked);
+    updateInternalMemoHasReferenceNumber({ id: config.id, value: checked });
+  };
+
+  const {
+    mutate: updateAttachSignatureOnAttachment,
+    isPending: isUpdatingAttachSignatureOnAttachment,
+  } = useMutation({
+    mutationFn: ({ id, value }: { id: string; value: boolean }) =>
+      prefixSuffixService.updateInternalPrefixSuffix(
+        { attachSignatureOnAttachment: value, unitId: selectedUnitId },
+        id,
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["unitConfig", selectedUnitId],
+      });
+      toast.success(
+        `${t("setting.attachSignatureOnAttachment", "Attach Signature On Attachment")} ${
+          attachSignatureOnAttachment ? "enabled" : "disabled"
+        }`,
+      );
+    },
+    onError: (err) => console.error("Failed to update", err),
+  });
+
+  const handleAttachSignatureOnAttachmentToggle = (checked: boolean) => {
+    if (!config?.id) return;
+    setAttachSignatureOnAttachment(checked);
+    updateAttachSignatureOnAttachment({ id: config.id, value: checked });
+  };
+
+  const { mutate: createConfig, isPending: isCreatingConfig } = useMutation({
+    mutationFn: (unitId: string) =>
+      prefixSuffixService.createInternalPrefixSuffix({ unitId }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["unitConfig", selectedUnitId],
+      });
+    },
+    onError: (err) => {
+      console.error("Failed to create unit configuration", err);
+    },
+  });
+
+  // Auto-create an empty configuration when a unit has none, so the settings
+  // table renders immediately with all toggles off instead of an empty state.
+  useEffect(() => {
+    if (
+      !config &&
+      !isLoading &&
+      !error &&
+      selectedUnitId &&
+      !isCreatingConfig
+    ) {
+      createConfig(selectedUnitId);
+    }
+  }, [
+    config,
+    isLoading,
+    error,
+    selectedUnitId,
+    isCreatingConfig,
+    createConfig,
+  ]);
+
+  return (
+    <div className={configurationCardShell}>
+      <div className="mb-5 flex flex-col gap-4 border-b border-slate-200 pb-4 dark:border-slate-700 sm:flex-row sm:items-start sm:justify-between">
+        <div className="space-y-1">
+          <h1 className="flex items-center gap-2 text-2xl font-bold text-slate-900 sm:text-3xl dark:text-slate-100">
+            <Settings className="h-8 w-8 text-primary" />
+            {t("setting.title1")}
+          </h1>
+          <p className="text-sm text-slate-600 dark:text-slate-400">
+            {t("setting.title2")}
+          </p>
+        </div>
+
+        <div className="flex flex-col gap-2 sm:ml-auto sm:flex-row sm:items-center">
+          {/* Organization selector */}
+          <Select
+            value={selectedOrgId}
+            onValueChange={(value) => setSelectedOrgId(value)}
+          >
+            <SelectTrigger className="h-10 w-full bg-white/90 dark:border-slate-700 dark:bg-slate-900 sm:w-36 [&>span]:truncate">
+              <SelectValue
+                placeholder={
+                  t("organization.selectOrganization") || "Select organization"
+                }
+              />
+            </SelectTrigger>
+            <SelectContent
+              position="popper"
+              align="end"
+              className="dark:border-slate-700 dark:bg-slate-900"
+            >
+              {isLoadingOrgs ? (
+                <SelectItem value="loading" disabled>
+                  {t("setting.loading")}
+                </SelectItem>
+              ) : organizations.length > 0 ? (
+                organizations.map((org) => (
+                  <SelectItem key={org.id} value={org.id}>
+                    <span className="block truncate max-w-70">
+                      {localizedName(org.name as { am: string; en: string })}
+                    </span>
+                  </SelectItem>
+                ))
+              ) : (
+                <SelectItem value="no-orgs" disabled>
+                  {t("organization.noOrganizationsFound") ||
+                    "No organizations found"}
+                </SelectItem>
+              )}
+            </SelectContent>
+          </Select>
+
+          {/* Unit selector */}
+          <Select
+            value={selectedUnitId}
+            onValueChange={(value) => setSelectedUnitId(value)}
+            disabled={!selectedOrgId}
+          >
+            <SelectTrigger className="h-10 w-full bg-white/90 dark:border-slate-700 dark:bg-slate-900 sm:w-36 [&>span]:truncate">
+              <SelectValue
+                placeholder={t("organization.selectUnit") || "Select a unit"}
+              />
+            </SelectTrigger>
+            <SelectContent
+              position="popper"
+              align="end"
+              className="dark:border-slate-700 dark:bg-slate-900"
+            >
+              {isLoadingUnits ? (
+                <SelectItem value="loading" disabled>
+                  {t("setting.loading")}
+                </SelectItem>
+              ) : units.length > 0 ? (
+                units.map((unit) => (
+                  <SelectItem key={unit.id} value={unit.id}>
+                    <span className="block truncate max-w-70">
+                      {localizedName(unit.name as { am: string; en: string })}
+                    </span>
+                  </SelectItem>
+                ))
+              ) : (
+                <SelectItem value="no-units" disabled>
+                  {t("setting.noUnit")}
+                </SelectItem>
+              )}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      <div className="space-y-3">
+        {isLoading && (
+          <p className="text-sm text-slate-600 dark:text-slate-300">
+            Loading configuration...
+          </p>
+        )}
+        {error && (
+          <p className="text-sm text-red-600 dark:text-red-400">
+            Failed to load configuration
+          </p>
+        )}
+        {!config && !isLoading && !error && (
+          <p className="text-sm text-slate-600 dark:text-slate-300">
+            {isCreatingConfig
+              ? t(
+                  "setting.preparingDefaults",
+                  "Preparing default configuration...",
+                )
+              : t("setting.loading", "Loading...")}
+          </p>
+        )}
+
+        {config && (
+          <div className="max-h-128 overflow-x-auto overflow-y-auto rounded-xl border border-slate-200 bg-white/90 dark:border-slate-700 dark:bg-slate-900/70">
+            <Table>
+              <TableHeader className="sticky top-0 z-10 bg-white/95 backdrop-blur dark:bg-slate-900/95">
+                <TableRow className="dark:border-slate-700">
+                  <TableHead className="text-slate-600 dark:text-slate-300">
+                    {t("setting.Name")}
+                  </TableHead>
+                  <TableHead className="text-slate-600 dark:text-slate-300">
+                    {t("setting.Value")}
+                  </TableHead>
+                  <TableHead className="text-right text-slate-600 dark:text-slate-300">
+                    {t("setting.Action")}
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                <TableRow className="dark:border-slate-700">
+                  <TableCell className="font-medium text-slate-900 dark:text-slate-100">
+                    {t("setting.title3")}
+                  </TableCell>
+                  <TableCell className="text-slate-700 dark:text-slate-300">
+                    {config.positionScopeToFetch}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Button
+                      onClick={handleEdit}
+                      variant="outline"
+                      size="sm"
+                      className="dark:border-slate-700 dark:bg-slate-900 dark:hover:bg-slate-800"
+                    >
+                      <Edit2Icon className="h-4 w-4" />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+                <TableRow className="dark:border-slate-700">
+                  <TableCell className="font-medium text-slate-900 dark:text-slate-100">
+                    {t("setting.title5")}
+                  </TableCell>
+                  <TableCell className="text-slate-700 dark:text-slate-300">
+                    {config.forwardWithTeeterSignature ? "Yes" : "No"}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Switch
+                      id="add-teeter-assign"
+                      checked={includeSignatureAssign}
+                      onCheckedChange={handleToggle}
+                      disabled={isUpdatingSignature}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow className="dark:border-slate-700">
+                  <TableCell className="font-medium text-slate-900 dark:text-slate-100">
+                    {t("setting.title6")}
+                  </TableCell>
+                  <TableCell className="text-slate-700 dark:text-slate-300">
+                    {config.waitAllCollaboratorsBeforeAction ? "Yes" : "No"}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Switch
+                      id="wait-for-all-collaborators-before-action"
+                      checked={waitForAllCollaborators}
+                      onCheckedChange={handleCollaboratorWaitToggle}
+                      disabled={isUpdatingCollaboratorWait}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="font-medium">
+                    {t(
+                      "setting.canAssignCustomReferenceNumber",
+                      "Can Assign Custom Reference Number",
+                    )}
+                  </TableCell>
+
+                  <TableCell>
+                    {config.canAssignCustomReferenceNumber ? "Yes" : "No"}
+                  </TableCell>
+
+                  <TableCell className="text-right">
+                    <Switch
+                      id="can-assign-custom-reference-number"
+                      checked={canAssignCustomReferenceNumber}
+                      onCheckedChange={
+                        handleCanAssignCustomReferenceNumberToggle
+                      }
+                      disabled={isUpdatingCanAssignCustomReferenceNumber}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="font-medium">
+                    {t(
+                      "setting.canUseNewInternalMemoFormat",
+                      "New Internal Memo Format",
+                    )}
+                  </TableCell>
+
+                  <TableCell>
+                    {config.canInternalMemosHaveSenderInformation
+                      ? "Yes"
+                      : "No"}
+                  </TableCell>
+
+                  <TableCell className="text-right">
+                    <Switch
+                      id="can-use-new-internal-memo-format"
+                      checked={canUseNewInternalMemoFormat}
+                      onCheckedChange={handleCanUseNewInternalMemoFormatToggle}
+                      disabled={isUpdatingCanUseNewInternalMemoFormat}
+                    />
+                  </TableCell>
+                </TableRow>
+                {canUseNewInternalMemoFormat && (
+                  <TableRow>
+                    <TableCell className="font-medium">
+                      {t(
+                        "setting.recordSenderInformationScope",
+                        "Record Sender Information Scope",
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      {config.recordSenderInformationScope || "NAME"}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Select
+                        value={recordSenderInformationScope}
+                        onValueChange={(value) =>
+                          handleRecordSenderInformationScopeToggle(
+                            value as ERecordSenderInformationScope,
+                          )
+                        }
+                        disabled={isUpdatingRecordSenderInformationScope}
+                      >
+                        <SelectTrigger className="w-40 dark:border-slate-700 dark:bg-slate-900">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent className="dark:border-slate-700 dark:bg-slate-900">
+                          <SelectItem
+                            value={ERecordSenderInformationScope.NAME}
+                          >
+                            Name
+                          </SelectItem>
+                          <SelectItem
+                            value={ERecordSenderInformationScope.SIGNATURE}
+                          >
+                            Signature
+                          </SelectItem>
+                          <SelectItem
+                            value={ERecordSenderInformationScope.STAMP}
+                          >
+                            Stamp
+                          </SelectItem>
+                          <SelectItem
+                            value={
+                              ERecordSenderInformationScope.NAME_AND_SIGNATURE
+                            }
+                          >
+                            Name & Signature
+                          </SelectItem>
+                          <SelectItem
+                            value={ERecordSenderInformationScope.NAME_AND_STAMP}
+                          >
+                            Name & Stamp
+                          </SelectItem>
+                          <SelectItem
+                            value={
+                              ERecordSenderInformationScope.SIGNATURE_AND_STAMP
+                            }
+                          >
+                            SIGNATURE & Stamp
+                          </SelectItem>
+                          <SelectItem value={ERecordSenderInformationScope.ALL}>
+                            All
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </TableCell>
+                  </TableRow>
+                )}
+                <TableRow>
+                  <TableCell className="font-medium">
+                    {t(
+                      "setting.canRecordDateLabelHasLocalization",
+                      "Does Record Date Label Have Localization?",
+                    )}
+                  </TableCell>
+
+                  <TableCell>
+                    {config.canRecordDateLabelHasLocalization ? "Yes" : "No"}
+                  </TableCell>
+
+                  <TableCell className="text-right">
+                    <Switch
+                      id="can-record-date-label-has-localization"
+                      checked={canRecordDateLabelHasLocalization}
+                      onCheckedChange={
+                        handleCanRecordDateLabelHasLocalizationToggle
+                      }
+                      disabled={isUpdatingCanRecordDateLabelHasLocalization}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="font-medium">
+                    {t(
+                      "setting.canRecordDateHaveTime",
+                      "Record Date Can Have Time",
+                    )}
+                  </TableCell>
+
+                  <TableCell>
+                    {config.canRecordDateHaveTime ? "Yes" : "No"}
+                  </TableCell>
+
+                  <TableCell className="text-right">
+                    <Switch
+                      id="can-record-date-have-time"
+                      checked={canRecordDateHaveTime}
+                      onCheckedChange={handleCanRecordDateHaveTimeToggle}
+                      disabled={isUpdatingCanRecordDateHaveTime}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="font-medium">
+                    {t("setting.canCreateDirectRecord")}
+                  </TableCell>
+                  <TableCell>
+                    {config.canCreateDirectRecord
+                      ? t("common.yes")
+                      : t("common.no")}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Switch
+                      id="can-create-direct-record"
+                      checked={canCreateDirectRecord}
+                      onCheckedChange={handleCanCreateDirectRecordToggle}
+                      disabled={isUpdatingCanCreateDirectRecord}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="font-medium">
+                    {t("setting.canCreateBankRecord")}
+                  </TableCell>
+                  <TableCell>
+                    {config.canCreateBankRelatedRecords
+                      ? t("common.yes")
+                      : t("common.no")}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Switch
+                      id="can-create-bank-record"
+                      checked={canCreateBankRecord}
+                      onCheckedChange={handleCanCreateBankRecordToggle}
+                      disabled={isUpdatingCanCreateBankRecord}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="font-medium">
+                    {t("setting.isApprovalRequiredForPositionChange")}
+                  </TableCell>
+                  <TableCell>
+                    {config.isApprovalRequiredForPositionChange
+                      ? t("common.yes")
+                      : t("common.no")}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Switch
+                      id="is-approval-required-for-position-change"
+                      checked={isApprovalRequiredForPositionChange}
+                      onCheckedChange={
+                        handleIsApprovalRequiredForPositionChangeToggle
+                      }
+                      disabled={isUpdatingIsApprovalRequiredForPositionChange}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="font-medium">
+                    {t("setting.canPositionBasedRecordsBeCreated")}
+                  </TableCell>
+                  <TableCell>
+                    {config.canPositionBasedRecordsBeCreated
+                      ? t("common.yes")
+                      : t("common.no")}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Switch
+                      id="can-position-based-records-be-created"
+                      checked={canPositionBasedRecordsBeCreated}
+                      onCheckedChange={
+                        handleCanPositionBasedRecordsBeCreatedToggle
+                      }
+                      disabled={isUpdatingCanPositionBasedRecordsBeCreated}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="font-medium">
+                    {t("setting.canPositionBasedReferenceBeUsedForAllTypes")}
+                  </TableCell>
+                  <TableCell>
+                    {config.canPositionBasedReferenceBeUsedForAllTypes
+                      ? t("common.yes")
+                      : t("common.no")}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Switch
+                      id="can-position-based-reference-be-used-for-all-types"
+                      checked={canPositionBasedReferenceBeUsedForAllTypes}
+                      onCheckedChange={
+                        handleCanPositionBasedReferenceBeUsedForAllTypesToggle
+                      }
+                      disabled={
+                        isUpdatingCanPositionBasedReferenceBeUsedForAllTypes
+                      }
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="font-medium">
+                    {t(
+                      "setting.canInternalMemoRequirePositionBasedReferenceNumber",
+                      "Internal Memo Require Position Based Reference Number",
+                    )}
+                  </TableCell>
+
+                  <TableCell>
+                    {config.canInternalMemoRequirePositionBasedReferenceNumber
+                      ? "Yes"
+                      : "No"}
+                  </TableCell>
+
+                  <TableCell className="text-right">
+                    <Switch
+                      id="can-internal-memo-require-position-based-reference-number"
+                      checked={
+                        canInternalMemoRequirePositionBasedReferenceNumber
+                      }
+                      onCheckedChange={
+                        handleCanInternalMemoRequirePositionBasedReferenceNumberToggle
+                      }
+                      disabled={
+                        isUpdatingCanInternalMemoRequirePositionBasedReferenceNumber
+                      }
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="font-medium">
+                    {t("setting.shouldDirectRecordHaveHeaderAndFooter")}
+                  </TableCell>
+                  <TableCell>
+                    {config.shouldDirectRecordHaveHeaderAndFooter
+                      ? t("common.yes")
+                      : t("common.no")}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Switch
+                      id="should-direct-record-have-header-and-footer"
+                      checked={shouldDirectRecordHaveHeaderAndFooter}
+                      onCheckedChange={
+                        handleShouldDirectRecordHaveHeaderAndFooterToggle
+                      }
+                      disabled={isUpdatingShouldDirectRecordHaveHeaderAndFooter}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="font-medium">
+                    {t("setting.shouldCollaboratorAlwaysSign")}
+                  </TableCell>
+                  <TableCell>
+                    {config.shouldCollaboratorAlwaysSign ? "Yes" : "No"}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Switch
+                      id="should-collaborator-always-sign"
+                      checked={shouldCollaboratorAlwaysSign}
+                      onCheckedChange={handleCollaboratorAlwaysSignToggle}
+                      disabled={isUpdatingCollaboratorAlwaysSign}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="font-medium">
+                    {t("setting.shouldIncludeForYourReferenceInCC")}
+                  </TableCell>
+                  <TableCell>
+                    {config.shouldIncludeForYourReferenceInCC ? "Yes" : "No"}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Switch
+                      id="should-include-for-your-reference"
+                      checked={shouldIncludeForYourReferenceInCC}
+                      onCheckedChange={handleIncludeForYourReferenceToggle}
+                      disabled={isUpdatingIncludeForYourReference}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="font-medium">
+                    {t("setting.canCollaborationBeCreatedForAll")}
+                  </TableCell>
+                  <TableCell>
+                    {config.canCollaborationBeCreatedForAll ? "Yes" : "No"}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Switch
+                      id="can-collaboration-be-created-for-all"
+                      checked={canCollaborationBeCreatedForAll}
+                      onCheckedChange={
+                        handleCanCollaborationBeCreatedForAllToggle
+                      }
+                      disabled={isUpdatingCanCollaborationBeCreatedForAll}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="font-medium">
+                    {t("setting.canRecordBeEditedByCollaborators")}
+                  </TableCell>
+                  <TableCell>
+                    {config.canRecordBeEditedByCollaborators ? "Yes" : "No"}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Switch
+                      id="can-record-be-edited-by-collaborators"
+                      checked={canRecordBeEditedByCollaborators}
+                      onCheckedChange={
+                        handleCanRecordBeEditedByCollaboratorsToggle
+                      }
+                      disabled={isUpdatingCanRecordBeEditedByCollaborators}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="font-medium">
+                    {t("setting.canRecordHaveCollaboratorsName")}
+                  </TableCell>
+                  <TableCell>
+                    {config.canRecordHaveCollaboratorsName ? "Yes" : "No"}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Switch
+                      id="can-record-have-collaborators-name"
+                      checked={canRecordHaveCollaboratorsName}
+                      onCheckedChange={
+                        handleCanRecordHaveCollaboratorsNameToggle
+                      }
+                      disabled={isUpdatingCanRecordHaveCollaboratorsName}
+                    />
+                  </TableCell>
+                </TableRow>
+
+                <TableRow>
+                  <TableCell className="font-medium">
+                    {t("setting.canRecordBeEditedOnWorkflow")}
+                  </TableCell>
+                  <TableCell>
+                    {config.canRecordBeEditedOnWorkflow ? "Yes" : "No"}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Switch
+                      id="can-record-be-edited-on-workflow"
+                      checked={canRecordBeEditedOnWorkflow}
+                      onCheckedChange={handleCanRecordBeEditedOnWorkflowToggle}
+                      disabled={isUpdatingCanRecordBeEditedOnWorkflow}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="font-medium">
+                    {t("setting.canIncomingAssignmentsBeSeparated")}
+                  </TableCell>
+                  <TableCell>
+                    {config.canIncomingAssignmentsBeSeparated ? "Yes" : "No"}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Switch
+                      id="can-incoming-assignements-be-separated"
+                      checked={canIncomingAssignmentsBeSeparated}
+                      onCheckedChange={
+                        handlecanIncomingAssignmentsBeSeparatedToggle
+                      }
+                      disabled={isUpdatingcanIncomingAssignmentsBeSeparated}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="font-medium">
+                    {t("setting.canROReturn")}
+                  </TableCell>
+                  <TableCell>{config.canROReturn ? "Yes" : "No"}</TableCell>
+                  <TableCell className="text-right">
+                    <Switch
+                      id="can-ro-return"
+                      checked={canROReturn}
+                      onCheckedChange={handleCanROReturnToggle}
+                      disabled={isUpdatingCanROReturn}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="font-medium">
+                    {t("setting.internalMemoHasReferenceNumber")}
+                  </TableCell>
+                  <TableCell>
+                    {config.internalMemoHasReferenceNumber ? "Yes" : "No"}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Switch
+                      id="internal-memo-has-reference-number"
+                      checked={internalMemoHasReferenceNumber}
+                      onCheckedChange={
+                        handleInternalMemoHasReferenceNumberToggle
+                      }
+                      disabled={isUpdatingInternalMemoHasReferenceNumber}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="font-medium">
+                    {t(
+                      "setting.attachSignatureOnAttachment",
+                      "Attach Signature On Attachment",
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    {config.attachSignatureOnAttachment ? "Yes" : "No"}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Switch
+                      id="attach-signature-on-attachment"
+                      checked={attachSignatureOnAttachment}
+                      onCheckedChange={handleAttachSignatureOnAttachmentToggle}
+                      disabled={isUpdatingAttachSignatureOnAttachment}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="font-medium">
+                    {t(
+                      "setting.canHaveTagBasedReferenceNumber",
+                      "Can Have Tag Based Reference Number",
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    {config.canHaveTagBasedReferenceNumber ? "Yes" : "No"}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Switch
+                      id="can-have-tag-based-reference-number"
+                      checked={canHaveTagBasedReferenceNumber}
+                      onCheckedChange={
+                        handleCanHaveTagBasedReferenceNumberToggle
+                      }
+                      disabled={isUpdatingCanHaveTagBasedReferenceNumber}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="font-medium">
+                    {t(
+                      "setting.referenceNumberCountFirst",
+                      "Should The Number Count Come First On The Reference Number",
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    {config.referenceNumberCountFirst ? "Yes" : "No"}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Switch
+                      id="reference-number-count-first"
+                      checked={referenceNumberCountFirst}
+                      onCheckedChange={handleReferenceNumberCountFirstToggle}
+                      disabled={isUpdatingReferenceNumberCountFirst}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="font-medium">
+                    {t("setting.canUserSkipLevel", "User Can Skip Level")}
+                  </TableCell>
+                  <TableCell>
+                    {config.canUserSkipLevel ? "Yes" : "No"}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Switch
+                      id="can-user-skip-level"
+                      checked={canUserSkipLevel}
+                      onCheckedChange={handleCanUserSkipLevelToggle}
+                      disabled={isUpdatingCanUserSkipLevel}
+                    />
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell className="font-medium">
+                    {t(
+                      "setting.canSendToBranch",
+                      "User Can Send to Branch Departments Directly",
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    {config.canUserSkipLevel ? "Yes" : "No"}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Switch
+                      id="can-send-to-branch"
+                      checked={canSendToBranch}
+                      onCheckedChange={handleCanSendToBranchToggle}
+                      disabled={isUpdatingCanSendToBranch}
+                    />
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </div>
+
+      {/* Modal for editing */}
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="dark:border-slate-700 dark:bg-slate-900">
+          <DialogHeader>
+            <DialogTitle className="dark:text-slate-100">
+              {t("setting.editTitle")}
+            </DialogTitle>
+            <DialogDescription className="dark:text-slate-400">
+              {t("setting.editMsg")}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="my-4">
+            <Select
+              value={newScope}
+              onValueChange={(value) =>
+                setNewScope(value as PositionScopeToFetch)
+              }
+            >
+              <SelectTrigger className="w-full dark:border-slate-700 dark:bg-slate-900">
+                <SelectValue placeholder="Select scope" />
+              </SelectTrigger>
+              <SelectContent className="dark:border-slate-700 dark:bg-slate-900">
+                {positionScopeValues.map((scope) => (
+                  <SelectItem key={scope} value={scope}>
+                    {scope.replace(/_/g, " ").toUpperCase()}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <DialogFooter className="flex justify-end gap-2">
+            <Button
+              variant="secondary"
+              onClick={() => setOpen(false)}
+              className="dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700"
+            >
+              {t("common.Cancel")}
+            </Button>
+            <Button
+              onClick={handleSave}
+              disabled={isUpdating}
+              className="bg-primary hover:bg-primary/90 text-primary-foreground"
+            >
+              {isUpdating
+                ? t("contentManagement.saving")
+                : t("delegation.save")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};
+
+export default UnitConfigurationPage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/UploadedDocumentViewPage.tsx b/apps/edr-freight-web/backoffice/src/pages/UploadedDocumentViewPage.tsx
new file mode 100644
index 000000000..0b0fb2299
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/UploadedDocumentViewPage.tsx
@@ -0,0 +1,14 @@
+import ViewDocument from "@/super-admin/components/externalUsers/ViewDocuments";
+import { useParams } from "react-router-dom";
+
+const UploadedDocumentViewPage = () => {
+  const { id } = useParams<{ id: string }>();
+
+  if (!id) {
+    return <div className="text-gray-900 dark:text-gray-100">Error: Document ID is missing</div>;
+  }
+
+  return <ViewDocument userId={id} />;
+};
+
+export default UploadedDocumentViewPage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/UserManagementPage.tsx b/apps/edr-freight-web/backoffice/src/pages/UserManagementPage.tsx
new file mode 100644
index 000000000..79d29fcaf
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/UserManagementPage.tsx
@@ -0,0 +1,9 @@
+import UserManagementTree from "../user-management/userManagement/UserManagementTree";
+
+export default function UserManagementPage() {
+  return (
+    <div className="p-6">
+      <UserManagementTree />
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/pages/UserProfileEditPage.tsx b/apps/edr-freight-web/backoffice/src/pages/UserProfileEditPage.tsx
new file mode 100644
index 000000000..0970b5c25
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/UserProfileEditPage.tsx
@@ -0,0 +1,9 @@
+import UpdateProfile from '@/super-admin/components/externalUsers/UpdateProfile';
+import React from 'react'
+import { useParams } from 'react-router-dom';
+
+export default function UserProfileEditPage() {
+
+  
+  return <UpdateProfile />
+}
diff --git a/apps/edr-freight-web/backoffice/src/pages/WebManagementPage.tsx b/apps/edr-freight-web/backoffice/src/pages/WebManagementPage.tsx
new file mode 100644
index 000000000..f89529768
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/WebManagementPage.tsx
@@ -0,0 +1,7 @@
+import { WebManagementHomePage } from "@/user-management/web-Management/webManagement";
+
+const WebManagement = () => {
+  return <WebManagementHomePage />;
+};
+
+export default WebManagement;
diff --git a/apps/edr-freight-web/backoffice/src/pages/ai/AiBookingMockTestPage.tsx b/apps/edr-freight-web/backoffice/src/pages/ai/AiBookingMockTestPage.tsx
new file mode 100644
index 000000000..bd9f1d968
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/ai/AiBookingMockTestPage.tsx
@@ -0,0 +1,221 @@
+import { useState } from "react";
+import {
+  Alert,
+  Badge,
+  Button,
+  Card,
+  Code,
+  Group,
+  Stack,
+  Table,
+  Text,
+  Textarea,
+  Title,
+} from "@mantine/core";
+import axios from "axios";
+
+import {
+  AiBookingExtractResult,
+  extractBookingFromText,
+} from "@/services/ai.service";
+
+const EXAMPLE_TEXT =
+  "Book 2x40ft containers from Djibouti to Indode. Cargo electronics. Customer ABC Logistics.";
+
+const formatValue = (value: string | number | boolean | null): string => {
+  if (value === null) return "—";
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  return String(value);
+};
+
+const EXTRACTED_FIELD_LABELS: Array<{
+  key: keyof AiBookingExtractResult["extracted"];
+  label: string;
+}> = [
+  { key: "customerName", label: "Customer Name" },
+  { key: "origin", label: "Origin" },
+  { key: "destination", label: "Destination" },
+  { key: "cargoType", label: "Cargo Type" },
+  { key: "containerType", label: "Container Type" },
+  { key: "quantity", label: "Quantity" },
+  { key: "direction", label: "Direction" },
+  { key: "weightKg", label: "Weight (kg)" },
+  { key: "pickupRequired", label: "Pickup Required" },
+  { key: "deliveryRequired", label: "Delivery Required" },
+];
+
+export default function AiBookingMockTestPage() {
+  const [text, setText] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState<AiBookingExtractResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [showRawJson, setShowRawJson] = useState(false);
+
+  const handleTest = async () => {
+    setLoading(true);
+    setError(null);
+    setResult(null);
+    try {
+      setResult(await extractBookingFromText(text));
+    } catch (err) {
+      const backendMessage = axios.isAxiosError(err)
+        ? (err.response?.data as { message?: string | string[] } | undefined)
+            ?.message
+        : null;
+      setError(
+        backendMessage
+          ? `Mock AI request failed: ${
+              Array.isArray(backendMessage)
+                ? backendMessage.join(", ")
+                : backendMessage
+            }`
+          : "Mock AI request failed",
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCreateDraftBooking = () => {
+    window.alert("Draft booking creation will be connected in the next step.");
+  };
+
+  const canCreateDraft = Boolean(result?.validation.valid);
+
+  return (
+    <Stack gap="lg" p="md" maw={860}>
+      <Title order={2}>Mock AI Booking Assistant</Title>
+
+      <Card withBorder radius="md" padding="lg">
+        <Stack gap="sm">
+          <Textarea
+            label="Customer booking request"
+            placeholder="Enter customer booking request..."
+            description={`Example: ${EXAMPLE_TEXT}`}
+            minRows={4}
+            autosize
+            value={text}
+            onChange={(event) => setText(event.currentTarget.value)}
+          />
+          <Group>
+            <Button
+              onClick={handleTest}
+              loading={loading}
+              disabled={text.trim().length < 5}
+            >
+              {loading ? "Testing..." : "Test Mock AI"}
+            </Button>
+            <Button
+              variant="light"
+              color="gray"
+              onClick={() => setText(EXAMPLE_TEXT)}
+            >
+              Use example
+            </Button>
+          </Group>
+        </Stack>
+      </Card>
+
+      {error && (
+        <Alert color="red" title="Request failed">
+          {error}
+        </Alert>
+      )}
+
+      {result && (
+        <>
+          <Card withBorder radius="md" padding="lg">
+            <Stack gap="sm">
+              <Group justify="space-between">
+                <Title order={4}>Extracted Booking Data</Title>
+                <Badge variant="light" color="gray">
+                  provider: {result.provider}
+                </Badge>
+              </Group>
+              <Table withTableBorder={false} verticalSpacing="xs">
+                <Table.Tbody>
+                  {EXTRACTED_FIELD_LABELS.map(({ key, label }) => (
+                    <Table.Tr key={key}>
+                      <Table.Td w={200}>
+                        <Text size="sm" c="dimmed">
+                          {label}
+                        </Text>
+                      </Table.Td>
+                      <Table.Td>
+                        <Text size="sm" fw={500}>
+                          {formatValue(result.extracted[key])}
+                        </Text>
+                      </Table.Td>
+                    </Table.Tr>
+                  ))}
+                </Table.Tbody>
+              </Table>
+            </Stack>
+          </Card>
+
+          <Card withBorder radius="md" padding="lg">
+            <Stack gap="sm">
+              <Group>
+                <Title order={4}>Validation</Title>
+                <Badge color={result.validation.valid ? "green" : "red"}>
+                  {result.validation.valid ? "Valid" : "Invalid"}
+                </Badge>
+              </Group>
+              {result.validation.errors.length > 0 && (
+                <Stack gap={4}>
+                  {result.validation.errors.map((message) => (
+                    <Text key={message} size="sm" c="red">
+                      • {message}
+                    </Text>
+                  ))}
+                </Stack>
+              )}
+            </Stack>
+          </Card>
+
+          <Card withBorder radius="md" padding="lg">
+            <Stack gap="sm">
+              <Group>
+                <Title order={4}>Recommendation</Title>
+                <Badge
+                  color={
+                    result.recommendation.action === "CREATE_DRAFT_BOOKING"
+                      ? "green"
+                      : "yellow"
+                  }
+                >
+                  {result.recommendation.action}
+                </Badge>
+                <Badge variant="light">
+                  confidence {Math.round(result.recommendation.confidence * 100)}%
+                </Badge>
+              </Group>
+              <Text size="sm">{result.recommendation.message}</Text>
+            </Stack>
+          </Card>
+
+          <Group>
+            <Button
+              color="green"
+              disabled={!canCreateDraft}
+              onClick={handleCreateDraftBooking}
+            >
+              Create Draft Booking
+            </Button>
+            <Button
+              variant="subtle"
+              color="gray"
+              onClick={() => setShowRawJson((open) => !open)}
+            >
+              {showRawJson ? "Hide raw JSON" : "Show raw JSON"}
+            </Button>
+          </Group>
+
+          {showRawJson && (
+            <Code block>{JSON.stringify(result, null, 2)}</Code>
+          )}
+        </>
+      )}
+    </Stack>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx b/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx
index 477900ee1..c406b7a4b 100644
--- a/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx
@@ -4,18 +4,21 @@ import {
   Button,
   Card,
   Group,
+  MultiSelect,
   Select,
   Stack,
   Tabs,
   Text,
   TextInput,
 } from "@mantine/core";
+import { DateInput } from "@mantine/dates";
 import {
   AlertTriangle,
   ArrowRight,
   Calendar,
   CheckCircle2,
   Clock,
+  FilterX,
   LayoutList,
   Package,
   Plus,
@@ -26,6 +29,7 @@ import {
 } from "lucide-react";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
 
 import { BookingActionsMenu } from "@/components/bookings/BookingActionsMenu";
 import { BookingApprovalProgressCell } from "@/components/bookings/BookingApprovalProgressCell";
@@ -43,6 +47,7 @@ import {
   useBookingList,
   useBookingListSummary,
 } from "@/hooks/bookings/useBookings";
+import { api } from "@/services/api";
 import type { BookingListFilter } from "@/services/bookings.service";
 import type { BookingListRow } from "@/types/booking";
 import {
@@ -77,6 +82,33 @@ const FREIGHT_TYPE_OPTIONS = [
   { value: "BULK", label: "Bulk" },
 ];
 
+const PAYMENT_STATUS_OPTIONS = [
+  { value: "PENDING", label: "Payment pending" },
+  { value: "PNR_GENERATED", label: "PNR generated" },
+  { value: "VERIFICATION_IN_PROGRESS", label: "Verification in progress" },
+  { value: "PAID", label: "Paid" },
+  { value: "FAILED", label: "Payment failed" },
+];
+
+const OWNERSHIP_OPTIONS = [
+  { value: "true", label: "Government" },
+  { value: "false", label: "Private" },
+];
+
+/** Local start-of-day → ISO, for inclusive "from" date filters. */
+function startOfDayIso(d: Date): string {
+  const x = new Date(d);
+  x.setHours(0, 0, 0, 0);
+  return x.toISOString();
+}
+
+/** Local end-of-day → ISO, for inclusive "to" date filters. */
+function endOfDayIso(d: Date): string {
+  const x = new Date(d);
+  x.setHours(23, 59, 59, 999);
+  return x.toISOString();
+}
+
 function formatDate(value: string | null | undefined): string {
   if (!value) return "—";
   const d = new Date(value);
@@ -95,10 +127,18 @@ export default function BookingRequestsPage() {
   const [query, setQuery] = useState("");
   // Booking-kind tabs (one-time vs general contract) replace the old status tabs.
   const [kindTab, setKindTab] = useState<BookingKindTab>("ONE_TIME");
-  // Per-tab filter selects (each nullable = "all").
-  const [statusFilter, setStatusFilter] = useState<string | null>(null);
+  // Per-tab filter controls (empty/null = "all").
+  const [statusFilter, setStatusFilter] = useState<string[]>([]);
   const [directionFilter, setDirectionFilter] = useState<string | null>(null);
   const [freightTypeFilter, setFreightTypeFilter] = useState<string | null>(null);
+  const [paymentStatusFilter, setPaymentStatusFilter] = useState<string | null>(null);
+  const [ownershipFilter, setOwnershipFilter] = useState<string | null>(null);
+  const [originYardFilter, setOriginYardFilter] = useState<string | null>(null);
+  const [destinationYardFilter, setDestinationYardFilter] = useState<string | null>(null);
+  const [createdFrom, setCreatedFrom] = useState<Date | null>(null);
+  const [createdTo, setCreatedTo] = useState<Date | null>(null);
+  const [scheduledFrom, setScheduledFrom] = useState<Date | null>(null);
+  const [scheduledTo, setScheduledTo] = useState<Date | null>(null);
   const [allocateOpen, setAllocateOpen] = useState(false);
   const [allocateIds, setAllocateIds] = useState<string[]>([]);
   const suppressRowClickRef = useRef(false);
@@ -118,9 +158,21 @@ export default function BookingRequestsPage() {
       // React Query cache key per kind tab.
       tab: kindTab,
       bookingType: kindTab,
-      ...(statusFilter ? { statuses: statusFilter } : {}),
+      ...(statusFilter.length ? { statuses: statusFilter.join(",") } : {}),
       ...(directionFilter ? { tradeDirection: directionFilter } : {}),
       ...(freightTypeFilter ? { freightType: freightTypeFilter } : {}),
+      ...(paymentStatusFilter ? { paymentStatus: paymentStatusFilter } : {}),
+      ...(ownershipFilter
+        ? { isGovernment: ownershipFilter as "true" | "false" }
+        : {}),
+      ...(originYardFilter ? { originYardId: originYardFilter } : {}),
+      ...(destinationYardFilter
+        ? { destinationYardId: destinationYardFilter }
+        : {}),
+      ...(createdFrom ? { createdFrom: startOfDayIso(createdFrom) } : {}),
+      ...(createdTo ? { createdTo: endOfDayIso(createdTo) } : {}),
+      ...(scheduledFrom ? { scheduledFrom: startOfDayIso(scheduledFrom) } : {}),
+      ...(scheduledTo ? { scheduledTo: endOfDayIso(scheduledTo) } : {}),
     };
   }, [
     pagination.pageIndex,
@@ -129,6 +181,14 @@ export default function BookingRequestsPage() {
     statusFilter,
     directionFilter,
     freightTypeFilter,
+    paymentStatusFilter,
+    ownershipFilter,
+    originYardFilter,
+    destinationYardFilter,
+    createdFrom,
+    createdTo,
+    scheduledFrom,
+    scheduledTo,
   ]);
 
   const { data, isLoading, isError, refetch, isFetching } = useBookingList(filter);
@@ -142,6 +202,49 @@ export default function BookingRequestsPage() {
     refetch: refetchSummary,
   } = useBookingListSummary(filter);
 
+  // Yard options for the origin/destination filters (shared routes reference list).
+  const { data: yardRefs } = useQuery(
+    api.routes.yards.queryOptions({ staleTime: 5 * 60_000 }),
+  );
+  const yardOptions = useMemo(
+    () =>
+      (yardRefs ?? []).map((y) => ({
+        value: y.id,
+        label: y.label ?? y.code,
+      })),
+    [yardRefs],
+  );
+
+  const resetPage = useCallback(() => {
+    setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+  }, [setPagination, pagination.pageSize]);
+
+  const activeFilterCount =
+    (statusFilter.length ? 1 : 0) +
+    (directionFilter ? 1 : 0) +
+    (freightTypeFilter ? 1 : 0) +
+    (paymentStatusFilter ? 1 : 0) +
+    (ownershipFilter ? 1 : 0) +
+    (originYardFilter ? 1 : 0) +
+    (destinationYardFilter ? 1 : 0) +
+    (createdFrom || createdTo ? 1 : 0) +
+    (scheduledFrom || scheduledTo ? 1 : 0);
+
+  const clearFilters = useCallback(() => {
+    setStatusFilter([]);
+    setDirectionFilter(null);
+    setFreightTypeFilter(null);
+    setPaymentStatusFilter(null);
+    setOwnershipFilter(null);
+    setOriginYardFilter(null);
+    setDestinationYardFilter(null);
+    setCreatedFrom(null);
+    setCreatedTo(null);
+    setScheduledFrom(null);
+    setScheduledTo(null);
+    resetPage();
+  }, [resetPage]);
+
   const rows = useMemo(() => {
     const items = (data?.items ?? []).map(toBookingListRow);
     const q = query.trim().toLowerCase();
@@ -415,18 +518,44 @@ export default function BookingRequestsPage() {
                     </Text>
                   </Group>
                   <Group gap="sm" wrap="wrap">
-                    <Select
-                      placeholder="All statuses"
+                    <MultiSelect
+                      placeholder={statusFilter.length ? undefined : "All statuses"}
                       data={STATUS_OPTIONS}
                       value={statusFilter}
                       onChange={(v) => {
                         setStatusFilter(v);
-                        setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+                        resetPage();
                       }}
                       clearable
                       searchable
                       radius="lg"
-                      style={{ minWidth: 200 }}
+                      style={{ minWidth: 220 }}
+                    />
+                    <Select
+                      placeholder="All origins"
+                      data={yardOptions}
+                      value={originYardFilter}
+                      onChange={(v) => {
+                        setOriginYardFilter(v);
+                        resetPage();
+                      }}
+                      clearable
+                      searchable
+                      radius="lg"
+                      style={{ minWidth: 180 }}
+                    />
+                    <Select
+                      placeholder="All destinations"
+                      data={yardOptions}
+                      value={destinationYardFilter}
+                      onChange={(v) => {
+                        setDestinationYardFilter(v);
+                        resetPage();
+                      }}
+                      clearable
+                      searchable
+                      radius="lg"
+                      style={{ minWidth: 180 }}
                     />
                     <Select
                       placeholder="All directions"
@@ -434,11 +563,11 @@ export default function BookingRequestsPage() {
                       value={directionFilter}
                       onChange={(v) => {
                         setDirectionFilter(v);
-                        setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+                        resetPage();
                       }}
                       clearable
                       radius="lg"
-                      style={{ minWidth: 170 }}
+                      style={{ minWidth: 150 }}
                     />
                     <Select
                       placeholder="All freight types"
@@ -446,13 +575,98 @@ export default function BookingRequestsPage() {
                       value={freightTypeFilter}
                       onChange={(v) => {
                         setFreightTypeFilter(v);
-                        setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+                        resetPage();
                       }}
                       clearable
                       radius="lg"
-                      style={{ minWidth: 170 }}
+                      style={{ minWidth: 150 }}
                     />
                   </Group>
+                  <Group gap="sm" wrap="wrap">
+                    <Select
+                      placeholder="All payment statuses"
+                      data={PAYMENT_STATUS_OPTIONS}
+                      value={paymentStatusFilter}
+                      onChange={(v) => {
+                        setPaymentStatusFilter(v);
+                        resetPage();
+                      }}
+                      clearable
+                      radius="lg"
+                      style={{ minWidth: 180 }}
+                    />
+                    <Select
+                      placeholder="Gov / Private"
+                      data={OWNERSHIP_OPTIONS}
+                      value={ownershipFilter}
+                      onChange={(v) => {
+                        setOwnershipFilter(v);
+                        resetPage();
+                      }}
+                      clearable
+                      radius="lg"
+                      style={{ minWidth: 140 }}
+                    />
+                    <DateInput
+                      placeholder="Created from"
+                      value={createdFrom}
+                      onChange={(v) => {
+                        setCreatedFrom(v ? new Date(v) : null);
+                        resetPage();
+                      }}
+                      maxDate={createdTo ?? undefined}
+                      clearable
+                      radius="lg"
+                      style={{ minWidth: 140 }}
+                    />
+                    <DateInput
+                      placeholder="Created to"
+                      value={createdTo}
+                      onChange={(v) => {
+                        setCreatedTo(v ? new Date(v) : null);
+                        resetPage();
+                      }}
+                      minDate={createdFrom ?? undefined}
+                      clearable
+                      radius="lg"
+                      style={{ minWidth: 140 }}
+                    />
+                    <DateInput
+                      placeholder="Scheduled from"
+                      value={scheduledFrom}
+                      onChange={(v) => {
+                        setScheduledFrom(v ? new Date(v) : null);
+                        resetPage();
+                      }}
+                      maxDate={scheduledTo ?? undefined}
+                      clearable
+                      radius="lg"
+                      style={{ minWidth: 150 }}
+                    />
+                    <DateInput
+                      placeholder="Scheduled to"
+                      value={scheduledTo}
+                      onChange={(v) => {
+                        setScheduledTo(v ? new Date(v) : null);
+                        resetPage();
+                      }}
+                      minDate={scheduledFrom ?? undefined}
+                      clearable
+                      radius="lg"
+                      style={{ minWidth: 150 }}
+                    />
+                    {activeFilterCount > 0 ? (
+                      <Button
+                        variant="subtle"
+                        color="gray"
+                        radius="lg"
+                        leftSection={<FilterX size={16} />}
+                        onClick={clearFilters}
+                      >
+                        Clear filters ({activeFilterCount})
+                      </Button>
+                    ) : null}
+                  </Group>
                 </Stack>
               </Box>
 
diff --git a/apps/edr-freight-web/backoffice/src/pages/bookings/DocumentClearanceDetailPage.tsx b/apps/edr-freight-web/backoffice/src/pages/bookings/DocumentClearanceDetailPage.tsx
index 2cb5404e7..bb271e205 100644
--- a/apps/edr-freight-web/backoffice/src/pages/bookings/DocumentClearanceDetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/bookings/DocumentClearanceDetailPage.tsx
@@ -1,10 +1,11 @@
 import { useMemo } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import {
   Alert,
   Badge,
   Box,
+  Button,
   Grid,
   Group,
   Loader,
@@ -21,6 +22,7 @@ import {
   CheckCircle2,
   Clock,
   PackageCheck,
+  PackagePlus,
   ShieldCheck,
 } from "lucide-react";
 import type { Freight } from "@edr/types";
@@ -36,12 +38,18 @@ import { ClearanceMilestoneTimeline } from "@/components/contracts/ClearanceMile
 import { useFileViewer } from "@/hooks/useFileViewer";
 import { useBookingMilestones } from "@/hooks/contracts/useContracts";
 import { bookingsService } from "@/services/bookings.service";
+import { contractsService } from "@/services/contracts.service";
 import { downloadBookingFile } from "@/services/files.service";
 import { useBookingDetail } from "@/hooks/bookings/useBookings";
+import { useAuth } from "@/auth/useAuth";
+import { FREIGHT_PERMS, hasPermission, isDjiboutiGl } from "@/lib/permissions";
+import { RequestedCargoChips } from "@/features/clearance/requestedCargo";
 
 export default function DocumentClearanceDetailPage() {
   const params = useParams<{ id?: string; bookingId?: string }>();
   const id = params.id ?? params.bookingId;
+  const navigate = useNavigate();
+  const { user } = useAuth();
   const { view, viewer } = useFileViewer();
 
   const { data: booking } = useBookingDetail(id);
@@ -58,6 +66,21 @@ export default function DocumentClearanceDetailPage() {
 
   const { data: bookingMilestones } = useBookingMilestones(id);
 
+  // The originating shipment request carries the quantities the customer asked
+  // for (per container type, or bulk weight/items). The bare instance itself has
+  // no cargo until GL completes the booking, so surface the request here.
+  const { data: contractRequests } = useQuery({
+    queryKey: ["shipment-requests-for-contract", booking?.contractId],
+    queryFn: () => contractsService.listBookingRequests(booking!.contractId!),
+    enabled: Boolean(booking?.contractId),
+  });
+  const requestedLines = useMemo(
+    () =>
+      (contractRequests ?? []).find((r) => r.createdBookingId === id)
+        ?.requestedLines ?? null,
+    [contractRequests, id],
+  );
+
   const stats = useMemo(() => {
     const docs = (clearance?.documents ?? []).filter(
       (d) => d.uploadedBy === "customer",
@@ -76,6 +99,17 @@ export default function DocumentClearanceDetailPage() {
     booking?.contractKind === "GENERAL" &&
     Boolean(clearance?.phase);
 
+  // Bare initiated instance whose clearance is done: GL completes the booking
+  // (container numbers, VGM, shipment day) via the completion form.
+  // Creating the booking is a GL Ethiopia action — never available to Djibouti GL.
+  const canCompleteBooking =
+    booking?.status === "CLEARANCE_READY" &&
+    Boolean(booking?.contractId) &&
+    Boolean(booking?.customsClearingEnabled) &&
+    !(Number(booking?.totalAmount ?? 0) > 0) &&
+    hasPermission(user, FREIGHT_PERMS.contracts.createBooking) &&
+    !isDjiboutiGl(user);
+
   const docsPhaseComplete =
     clearance?.milestones?.some(
       (m) => m.milestoneCode === "DOCUMENTS_APPROVED" && m.status === "COMPLETED",
@@ -146,9 +180,30 @@ export default function DocumentClearanceDetailPage() {
               </Badge>
             )
           }
+          action={
+            canCompleteBooking ? (
+              <Button
+                color="edr-green"
+                radius="md"
+                leftSection={<PackagePlus size={16} />}
+                onClick={() =>
+                  navigate(
+                    `/dashboard/contracts/${booking!.contractId}/bookings/${id}/complete`,
+                  )
+                }
+              >
+                Create booking
+              </Button>
+            ) : undefined
+          }
         />
 
-        <ClearanceHero booking={booking} clearance={clearance} stats={stats} />
+        <ClearanceHero
+          booking={booking}
+          clearance={clearance}
+          stats={stats}
+          requestedLines={requestedLines}
+        />
 
         {isPhasedGeneral ? (
           <Paper withBorder radius="md" p="lg">
@@ -189,6 +244,10 @@ export default function DocumentClearanceDetailPage() {
                     tradeDirection={booking?.tradeDirection ?? "IMPORT"}
                     workflowFiles={workflowFiles}
                     roleMode="ET"
+                    // A bare initiated instance still has no cargo/price — the
+                    // stepper's "Create booking" step must read as NOT-yet-created
+                    // so it never claims the booking is done before GL completes it.
+                    bookingCreated={Number(booking?.totalAmount ?? 0) > 0}
                     onChanged={() => void refetch()}
                     onViewFile={view}
                     onDownloadFile={(f) => void downloadBookingFile(f.id, f.name)}
@@ -256,10 +315,12 @@ function ClearanceHero({
   booking,
   clearance,
   stats,
+  requestedLines,
 }: {
   booking: ReturnType<typeof useBookingDetail>["data"];
   clearance: Freight.ClearanceView;
   stats: { pct: number; approved: number; total: number };
+  requestedLines?: Freight.RequestedShipmentLines | null;
 }) {
   const direction = booking?.tradeDirection ?? "—";
   const origin =
@@ -325,6 +386,18 @@ function ClearanceHero({
           <Progress value={stats.pct} color="edr-green" radius="xl" size="md" />
         </Box>
       </Group>
+
+      {requestedLines ? (
+        <>
+          <Box my="md" h={1} bg="var(--mantine-color-default-border)" />
+          <Group gap={10} align="center" wrap="wrap">
+            <Text size="xs" fw={700} tt="uppercase" c="dimmed" lts="0.05em">
+              Requested cargo
+            </Text>
+            <RequestedCargoChips lines={requestedLines} size="sm" />
+          </Group>
+        </>
+      ) : null}
     </Paper>
   );
 }
diff --git a/apps/edr-freight-web/backoffice/src/pages/contract_templates/ContractTemplateEditorPage.tsx b/apps/edr-freight-web/backoffice/src/pages/contract_templates/ContractTemplateEditorPage.tsx
new file mode 100644
index 000000000..17977b743
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/contract_templates/ContractTemplateEditorPage.tsx
@@ -0,0 +1,1105 @@
+import { useMemo, useRef, useState } from "react";
+import { useParams } from "react-router-dom";
+import {
+  ActionIcon,
+  Badge,
+  Box,
+  Button,
+  Card,
+  Center,
+  Group,
+  Loader,
+  Menu,
+  Modal,
+  Paper,
+  ScrollArea,
+  Stack,
+  Switch,
+  Text,
+  Textarea,
+  TextInput,
+  Title,
+  Tooltip,
+} from "@mantine/core";
+import {
+  AlertTriangle,
+  ArrowDown,
+  ArrowUp,
+  Building2,
+  CalendarClock,
+  CalendarDays,
+  CalendarRange,
+  ChevronDown,
+  Coins,
+  Hash,
+  ListOrdered,
+  ListPlus,
+  ListTree,
+  Mail,
+  MapPin,
+  Package,
+  Pencil,
+  Phone,
+  Plus,
+  RefreshCw,
+  Settings2,
+  Trash2,
+  Weight,
+} from "lucide-react";
+
+import { PageContainer, PageHeader } from "@/components/page";
+import {
+  useAddArticle,
+  useContractTemplate,
+  useContractTemplatePreview,
+  useRemoveArticle,
+  useReplaceArticles,
+  useUpdateArticle,
+  useUpdateContractTemplate,
+} from "@/hooks/contract-templates/useContractTemplates";
+import type { ContractTemplateArticle } from "@/services/contract-templates.service";
+
+const BODY_HINT =
+  'One clause per line. Use "New clause" for the next number (1., 2., …), "Sub-clause" for a nested number (1.1, then 1.1.1), and "Bullet" for a • point — the number or bullet is typed for you, just add the text. Placeholders are filled from the contract when the document is generated.';
+
+interface ArticleDraft {
+  id?: string;
+  title: string;
+  body: string;
+}
+
+interface PlaceholderDef {
+  token: string;
+  label: string;
+  icon: typeof Building2;
+  hint: string;
+}
+
+/**
+ * Placeholders the renderer fills from the contract view model
+ * (contract-view-model.builder.ts). Quick row = the ones template authors
+ * reach for constantly; the rest live in the grouped "More" menu.
+ */
+const QUICK_PLACEHOLDERS: PlaceholderDef[] = [
+  {
+    token: "{{client.companyName}}",
+    label: "Client name",
+    icon: Building2,
+    hint: "Company name of the contracting client",
+  },
+  {
+    token: "{{reference}}",
+    label: "Reference",
+    icon: Hash,
+    hint: "Contract reference number",
+  },
+  {
+    token: "{{contractDate}}",
+    label: "Contract date",
+    icon: CalendarDays,
+    hint: "Full signature date of the contract",
+  },
+  {
+    token: "{{contractYear}}",
+    label: "Contract year",
+    icon: CalendarRange,
+    hint: "Year the contract is signed",
+  },
+];
+
+const MORE_PLACEHOLDER_GROUPS: { label: string; items: PlaceholderDef[] }[] = [
+  {
+    label: "Client",
+    items: [
+      {
+        token: "{{client.companyAddress}}",
+        label: "Client address",
+        icon: MapPin,
+        hint: "Street address of the client",
+      },
+      {
+        token: "{{client.companyLocation}}",
+        label: "Client location",
+        icon: MapPin,
+        hint: "Region / city of the client",
+      },
+      {
+        token: "{{client.phone}}",
+        label: "Client phone",
+        icon: Phone,
+        hint: "Client phone number",
+      },
+      {
+        token: "{{client.email}}",
+        label: "Client email",
+        icon: Mail,
+        hint: "Client email address",
+      },
+      {
+        token: "{{client.tinNumber}}",
+        label: "Client TIN",
+        icon: Hash,
+        hint: "Client tax identification number",
+      },
+    ],
+  },
+  {
+    label: "Route & cargo",
+    items: [
+      {
+        token: "{{schedule.originLabel}}",
+        label: "Origin",
+        icon: MapPin,
+        hint: "Origin yard / station",
+      },
+      {
+        token: "{{schedule.destinationLabel}}",
+        label: "Destination",
+        icon: MapPin,
+        hint: "Destination yard / station",
+      },
+      {
+        token: "{{schedule.serviceType}}",
+        label: "Service type",
+        icon: Settings2,
+        hint: "Contracted service type name",
+      },
+      {
+        token: "{{schedule.cargoDescription}}",
+        label: "Cargo description",
+        icon: Package,
+        hint: "Description of the cargo",
+      },
+      {
+        token: "{{schedule.totalWeightVgm}}",
+        label: "Total weight",
+        icon: Weight,
+        hint: "Total verified gross mass",
+      },
+      {
+        token: "{{schedule.equipmentReturn}}",
+        label: "Equipment return",
+        icon: RefreshCw,
+        hint: "Empty-equipment return terms",
+      },
+      {
+        token: "{{schedule.scheduledDate}}",
+        label: "Scheduled date",
+        icon: CalendarClock,
+        hint: "Scheduled shipment date",
+      },
+    ],
+  },
+  {
+    label: "Pricing",
+    items: [
+      {
+        token: "{{pricing.currency}}",
+        label: "Currency",
+        icon: Coins,
+        hint: "Payment currency (e.g. USD)",
+      },
+    ],
+  },
+  {
+    label: "Service provider (EDR)",
+    items: [
+      {
+        token: "{{provider.name}}",
+        label: "Provider name",
+        icon: Building2,
+        hint: "EDR legal company name",
+      },
+      {
+        token: "{{provider.address}}",
+        label: "Provider address",
+        icon: MapPin,
+        hint: "EDR principal place of business",
+      },
+      {
+        token: "{{provider.phone}}",
+        label: "Provider phone",
+        icon: Phone,
+        hint: "EDR phone number",
+      },
+      {
+        token: "{{provider.email}}",
+        label: "Provider email",
+        icon: Mail,
+        hint: "EDR email address",
+      },
+    ],
+  },
+];
+
+const ALL_PLACEHOLDERS: PlaceholderDef[] = [
+  ...QUICK_PLACEHOLDERS,
+  ...MORE_PLACEHOLDER_GROUPS.flatMap((g) => g.items),
+];
+
+const KNOWN_TOKENS = new Set<string>([
+  ...ALL_PLACEHOLDERS.map((p) => p.token),
+  // Still filled by the renderer, just no longer offered as an insert button.
+  "{{pricing.totalAmount}}",
+]);
+
+/** Any {{…}} tokens in the text the renderer does not know how to fill. */
+function unknownTokens(text: string): string[] {
+  const found = text.match(/\{\{[^{}]+\}\}/g) ?? [];
+  return [...new Set(found.filter((t) => !KNOWN_TOKENS.has(t)))];
+}
+
+interface ParsedClause {
+  text: string;
+  /** Computed outline number, e.g. "3" or "2.1.4". */
+  number: string;
+  /** Nesting level: 1 = clause, 2 = sub-clause (x.y), 3 = x.y.z, … */
+  depth: number;
+  bullets: string[];
+}
+
+interface ParsedBody {
+  /** Set (instead of clauses) when the body is one plain paragraph. */
+  paragraph?: string;
+  clauses: ParsedClause[];
+}
+
+/**
+ * Leading outline token on a clause line ("1. ", "2.1 ", "1.1.1) ") — its
+ * segment count sets the depth; the digits themselves are recomputed. Single
+ * segment requires "."/")" so prose like "10 tons…" is untouched; a token may
+ * end the line (empty clause still being typed).
+ */
+const CLAUSE_NUMBER_RE = /^(?:(\d+(?:\.\d+)+)[.)]?|(\d+)[.)])(?:\s+|$)/;
+
+/** Depth of the outline token in a CLAUSE_NUMBER_RE match, else null. */
+function matchDepth(match: RegExpExecArray | null): number | null {
+  if (!match) return null;
+  const token = match[1] ?? match[2];
+  return Math.min(token.split(".").length, MAX_CLAUSE_DEPTH);
+}
+
+/** Deepest supported sub-clause level. */
+const MAX_CLAUSE_DEPTH = 6;
+
+/**
+ * Mirror of the API renderer's rules (contract-article.util.ts): one clause per
+ * line; a leading outline number ("2. ", "2.1 ") nests the line as a sub-clause
+ * at that depth and is renumbered sequentially; "- " nests a bullet under the
+ * previous clause; a single un-numbered bullet-less clause renders as a plain
+ * paragraph instead of a numbered list of one.
+ */
+function parseArticleBody(body: string): ParsedBody {
+  const clauses: ParsedClause[] = [];
+  const counters: number[] = [];
+  let sawNumberToken = false;
+  for (const raw of body.split("\n")) {
+    const line = raw.trim();
+    if (!line) continue;
+    if (line.startsWith("- ") && clauses.length > 0) {
+      clauses[clauses.length - 1].bullets.push(line.slice(2).trim());
+      continue;
+    }
+    const cleaned = line.replace(/^- /, "");
+    const match = CLAUSE_NUMBER_RE.exec(cleaned);
+    let depth = matchDepth(match) ?? 1;
+    // A sub-clause can only sit directly under an existing parent.
+    depth = Math.min(depth, counters.length + 1);
+    if (match) sawNumberToken = true;
+    counters.splice(depth);
+    while (counters.length < depth) counters.push(0);
+    counters[depth - 1] += 1;
+    clauses.push({
+      text: match ? cleaned.slice(match[0].length).trim() : cleaned,
+      number: counters.slice(0, depth).join("."),
+      depth,
+      bullets: [],
+    });
+  }
+  if (
+    clauses.length === 1 &&
+    clauses[0].bullets.length === 0 &&
+    !sawNumberToken
+  ) {
+    return { paragraph: clauses[0].text, clauses: [] };
+  }
+  return { clauses };
+}
+
+/**
+ * Rewrite the leading outline tokens in a body so every numbered clause line
+ * carries its computed sequential number (stale numbers self-heal). Lines
+ * without a number token and bullet lines pass through untouched.
+ */
+function renumberBody(body: string): string {
+  const counters: number[] = [];
+  return body
+    .split("\n")
+    .map((raw) => {
+      const line = raw.trim();
+      if (!line || line.startsWith("- ")) return raw;
+      const match = CLAUSE_NUMBER_RE.exec(line);
+      let depth = matchDepth(match) ?? 1;
+      depth = Math.min(depth, counters.length + 1);
+      counters.splice(depth);
+      while (counters.length < depth) counters.push(0);
+      counters[depth - 1] += 1;
+      if (!match) return raw;
+      const number = counters.slice(0, depth).join(".");
+      return `${number}. ${line.slice(match[0].length).trim()}`;
+    })
+    .join("\n");
+}
+
+/** Render clause text with {{placeholders}} highlighted as green chips. */
+function HighlightedText({ text }: { text: string }) {
+  const parts = text.split(/(\{\{[^{}]+\}\})/g);
+  return (
+    <>
+      {parts.map((part, i) =>
+        /^\{\{[^{}]+\}\}$/.test(part) ? (
+          <Text
+            key={i}
+            component="span"
+            size="xs"
+            fw={600}
+            c={KNOWN_TOKENS.has(part) ? "edr-green.8" : "red.7"}
+            px={4}
+            style={{
+              borderRadius: 4,
+              background: KNOWN_TOKENS.has(part)
+                ? "var(--mantine-color-edr-green-0)"
+                : "var(--mantine-color-red-0)",
+              whiteSpace: "nowrap",
+            }}
+          >
+            {part}
+          </Text>
+        ) : (
+          <span key={i}>{part}</span>
+        ),
+      )}
+    </>
+  );
+}
+
+export default function ContractTemplateEditorPage() {
+  const { code } = useParams<{ code: string }>();
+  const { data: template, isLoading } = useContractTemplate(code);
+  const preview = useContractTemplatePreview(code);
+
+  const updateTemplate = useUpdateContractTemplate(code ?? "");
+  const addArticle = useAddArticle(code ?? "");
+  const updateArticle = useUpdateArticle(code ?? "");
+  const removeArticle = useRemoveArticle(code ?? "");
+  const replaceArticles = useReplaceArticles(code ?? "");
+
+  const [articleDraft, setArticleDraft] = useState<ArticleDraft | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<ContractTemplateArticle | null>(null);
+  const [detailsOpen, setDetailsOpen] = useState(false);
+
+  const sortedArticles = useMemo(
+    () => [...(template?.articles ?? [])].sort((a, b) => a.order - b.order),
+    [template],
+  );
+
+  const moveArticle = (index: number, delta: -1 | 1) => {
+    const next = [...sortedArticles];
+    const target = index + delta;
+    if (target < 0 || target >= next.length) return;
+    [next[index], next[target]] = [next[target], next[index]];
+    replaceArticles.mutate(
+      next.map(({ id, title, body }) => ({ id, title, body })),
+    );
+  };
+
+  const saveArticle = (values: { title: string; body: string }) => {
+    if (!articleDraft) return;
+    if (articleDraft.id) {
+      updateArticle.mutate({ articleId: articleDraft.id, payload: values });
+    } else {
+      addArticle.mutate(values);
+    }
+    setArticleDraft(null);
+  };
+
+  if (isLoading || !template) {
+    return (
+      <PageContainer>
+        <Center h={360}>
+          <Loader color="edr-green" />
+        </Center>
+      </PageContainer>
+    );
+  }
+
+  return (
+    <PageContainer>
+      <PageHeader
+        title={template.name}
+        subtitle={template.documentTitle}
+        backTo="/dashboard/contract-templates"
+        meta={
+          <Group gap={6}>
+            <Badge variant="outline" color="edr-green">
+              {template.code.replaceAll("_", " · ")}
+            </Badge>
+            {!template.isActive && (
+              <Badge variant="light" color="red">
+                Inactive
+              </Badge>
+            )}
+          </Group>
+        }
+        action={
+          <Group gap="sm">
+            <Switch
+              color="edr-green"
+              label="Active"
+              checked={template.isActive}
+              onChange={(event) =>
+                updateTemplate.mutate({ isActive: event.currentTarget.checked })
+              }
+            />
+            <Button
+              variant="light"
+              color="edr-green"
+              leftSection={<Settings2 size={16} />}
+              onClick={() => setDetailsOpen(true)}
+            >
+              Document details
+            </Button>
+            <Button
+              color="edr-green"
+              leftSection={<Plus size={16} />}
+              onClick={() => setArticleDraft({ title: "", body: "" })}
+            >
+              Add article
+            </Button>
+          </Group>
+        }
+      />
+
+      <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
+        {/* ── Article list ─────────────────────────────────────────────── */}
+        <Stack gap="sm">
+          {sortedArticles.map((article, index) => (
+            <Card key={article.id} withBorder radius="lg" padding="md">
+              <Group justify="space-between" align="flex-start" wrap="nowrap">
+                <div style={{ minWidth: 0 }}>
+                  <Text fw={700} size="sm" c="edr-green.7">
+                    Article {index + 1}
+                  </Text>
+                  <Title order={5}>{article.title}</Title>
+                  <Text size="sm" c="dimmed" lineClamp={2} mt={4}>
+                    {article.body}
+                  </Text>
+                </div>
+                <Group gap={4} wrap="nowrap">
+                  <Tooltip label="Move up">
+                    <ActionIcon
+                      variant="subtle"
+                      color="gray"
+                      disabled={index === 0}
+                      onClick={() => moveArticle(index, -1)}
+                    >
+                      <ArrowUp size={16} />
+                    </ActionIcon>
+                  </Tooltip>
+                  <Tooltip label="Move down">
+                    <ActionIcon
+                      variant="subtle"
+                      color="gray"
+                      disabled={index === sortedArticles.length - 1}
+                      onClick={() => moveArticle(index, 1)}
+                    >
+                      <ArrowDown size={16} />
+                    </ActionIcon>
+                  </Tooltip>
+                  <Tooltip label="Edit article">
+                    <ActionIcon
+                      variant="subtle"
+                      color="edr-green"
+                      onClick={() =>
+                        setArticleDraft({
+                          id: article.id,
+                          title: article.title,
+                          body: article.body,
+                        })
+                      }
+                    >
+                      <Pencil size={16} />
+                    </ActionIcon>
+                  </Tooltip>
+                  <Tooltip label="Remove article">
+                    <ActionIcon
+                      variant="subtle"
+                      color="red"
+                      onClick={() => setDeleteTarget(article)}
+                    >
+                      <Trash2 size={16} />
+                    </ActionIcon>
+                  </Tooltip>
+                </Group>
+              </Group>
+            </Card>
+          ))}
+          {sortedArticles.length === 0 && (
+            <Card withBorder radius="lg" padding="xl">
+              <Center>
+                <Text c="dimmed">
+                  No articles yet — add the first article to build this contract.
+                </Text>
+              </Center>
+            </Card>
+          )}
+        </Stack>
+
+        {/* ── Live preview ─────────────────────────────────────────────── */}
+        <Card withBorder radius="lg" padding="sm" className="xl:sticky xl:top-4 self-start">
+          <Group justify="space-between" mb="xs" px={4}>
+            <Text fw={600} size="sm">
+              Document preview (mock data)
+            </Text>
+            <Tooltip label="Refresh preview">
+              <ActionIcon
+                variant="subtle"
+                color="edr-green"
+                loading={preview.isFetching}
+                onClick={() => void preview.refetch()}
+              >
+                <RefreshCw size={16} />
+              </ActionIcon>
+            </Tooltip>
+          </Group>
+          <Paper withBorder radius="md" style={{ overflow: "hidden" }}>
+            {preview.isLoading ? (
+              <Center h={480}>
+                <Loader color="edr-green" />
+              </Center>
+            ) : (
+              <iframe
+                title="Template preview"
+                srcDoc={preview.data?.html}
+                style={{
+                  width: "100%",
+                  height: "calc(100vh - 240px)",
+                  minHeight: 480,
+                  border: 0,
+                  background: "#f3f8f5",
+                }}
+              />
+            )}
+          </Paper>
+        </Card>
+      </div>
+
+      {/* ── Add / edit article modal ───────────────────────────────────── */}
+      {articleDraft && (
+        <ArticleEditorModal
+          initial={articleDraft}
+          saving={addArticle.isPending || updateArticle.isPending}
+          onClose={() => setArticleDraft(null)}
+          onSave={saveArticle}
+        />
+      )}
+
+      {/* ── Delete confirm ─────────────────────────────────────────────── */}
+      <Modal
+        opened={Boolean(deleteTarget)}
+        onClose={() => setDeleteTarget(null)}
+        title="Remove article"
+        size="md"
+      >
+        <Stack gap="md">
+          <Text size="sm">
+            Remove <strong>{deleteTarget?.title}</strong> from this template? The
+            remaining articles are renumbered automatically.
+          </Text>
+          <Group justify="flex-end">
+            <Button variant="default" onClick={() => setDeleteTarget(null)}>
+              Cancel
+            </Button>
+            <Button
+              color="red"
+              loading={removeArticle.isPending}
+              onClick={() => {
+                if (deleteTarget) removeArticle.mutate(deleteTarget.id);
+                setDeleteTarget(null);
+              }}
+            >
+              Remove article
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+
+      {/* ── Document details modal ─────────────────────────────────────── */}
+      <DocumentDetailsModal
+        opened={detailsOpen}
+        onClose={() => setDetailsOpen(false)}
+        initial={{
+          name: template.name,
+          description: template.description ?? "",
+          documentTitle: template.documentTitle,
+          whereasClauses: template.whereasClauses,
+        }}
+        saving={updateTemplate.isPending}
+        onSave={(values) => {
+          updateTemplate.mutate(values);
+          setDetailsOpen(false);
+        }}
+      />
+    </PageContainer>
+  );
+}
+
+interface ArticleEditorModalProps {
+  initial: ArticleDraft;
+  saving: boolean;
+  onClose: () => void;
+  onSave: (values: { title: string; body: string }) => void;
+}
+
+/**
+ * Rich add/edit article editor: placeholder buttons insert at the text cursor
+ * of whichever field (title or body) was focused last, with a live preview of
+ * the numbered clauses exactly as the renderer lays them out.
+ */
+function ArticleEditorModal({
+  initial,
+  saving,
+  onClose,
+  onSave,
+}: ArticleEditorModalProps) {
+  const [title, setTitle] = useState(initial.title);
+  const [body, setBody] = useState(initial.body);
+
+  const titleRef = useRef<HTMLInputElement>(null);
+  const bodyRef = useRef<HTMLTextAreaElement>(null);
+  // Placeholders drop into whichever field held the cursor last (body default).
+  const lastFocused = useRef<"title" | "body">("body");
+
+  const insertAtCursor = (snippet: string) => {
+    const isTitle = lastFocused.current === "title";
+    const el = isTitle ? titleRef.current : bodyRef.current;
+    const value = isTitle ? title : body;
+    const start = el?.selectionStart ?? value.length;
+    const end = el?.selectionEnd ?? start;
+    const next = value.slice(0, start) + snippet + value.slice(end);
+    if (isTitle) setTitle(next);
+    else setBody(next);
+    // Refocus and place the caret right after the inserted snippet once the
+    // controlled re-render has flushed.
+    requestAnimationFrame(() => {
+      if (!el) return;
+      el.focus();
+      const caret = start + snippet.length;
+      el.setSelectionRange(caret, caret);
+    });
+  };
+
+  /**
+   * Insert a structured line (clause / sub-clause / bullet) on a fresh line
+   * below the one the caret is on. Clause lines get their outline number typed
+   * in automatically ("3. ", "3.1. ", …) and every numbered line in the body is
+   * renumbered so the text always matches the preview.
+   */
+  const insertStructuredLine = (kind: "clause" | "sub" | "bullet") => {
+    const el = bodyRef.current;
+    lastFocused.current = "body";
+    const caret = el?.selectionStart ?? body.length;
+    // Structured lines never split a sentence — insert after the caret's line.
+    const lineEnd = body.indexOf("\n", caret);
+    const insertAt = lineEnd === -1 ? body.length : lineEnd;
+    const before = body.slice(0, insertAt);
+    const after = body.slice(insertAt); // "" or starts with "\n"
+
+    let prefix: string;
+    if (kind === "bullet") {
+      prefix = "- ";
+    } else {
+      // New clause always starts a fresh top-level number. Sub-clause nests
+      // one level under a clause (1 → 1.1) but adds a SIBLING when the caret
+      // is already on a sub-clause (1.1 → 1.2 → 1.3, not ever-deeper) — a
+      // third level is reached by typing its number (e.g. "1.1.1 ") directly.
+      const above = parseArticleBody(before);
+      const lastDepth = above.paragraph
+        ? 1
+        : (above.clauses[above.clauses.length - 1]?.depth ?? 0);
+      const depth =
+        kind === "sub"
+          ? lastDepth <= 1
+            ? Math.min(lastDepth + 1, MAX_CLAUSE_DEPTH)
+            : lastDepth
+          : 1;
+      // Digits are placeholders — renumberBody assigns the real value.
+      prefix = `${Array.from({ length: depth }, () => "1").join(".")}. `;
+    }
+
+    const beforeLines = before.length > 0 ? before.split("\n") : [];
+    const afterLines =
+      after.length > 0 ? after.slice(1).split("\n") : [];
+    const insertedIdx = beforeLines.length;
+    const joined = [...beforeLines, prefix, ...afterLines].join("\n");
+    const next = kind === "bullet" ? joined : renumberBody(joined);
+    setBody(next);
+
+    // Caret lands at the end of the inserted line, ready for typing.
+    const caretTarget = next
+      .split("\n")
+      .slice(0, insertedIdx + 1)
+      .join("\n").length;
+    requestAnimationFrame(() => {
+      const field = bodyRef.current;
+      if (!field) return;
+      field.focus();
+      field.setSelectionRange(caretTarget, caretTarget);
+    });
+  };
+
+  const parsed = useMemo(() => parseArticleBody(body), [body]);
+  const clauseCount = parsed.paragraph ? 1 : parsed.clauses.length;
+  const unknown = useMemo(
+    () => unknownTokens(`${title}\n${body}`),
+    [title, body],
+  );
+  const canSave = title.trim().length >= 2 && body.trim().length >= 2;
+
+  return (
+    <Modal
+      opened
+      onClose={onClose}
+      title={initial.id ? "Edit article" : "Add article"}
+      size="min(1120px, 95vw)"
+    >
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+        {/* ── Editor ─────────────────────────────────────────────────── */}
+        <Stack gap="sm">
+          <TextInput
+            ref={titleRef}
+            label="Article title"
+            placeholder="e.g. Obligations of the Client"
+            value={title}
+            onChange={(event) => setTitle(event.currentTarget.value)}
+            onFocus={() => (lastFocused.current = "title")}
+            required
+          />
+
+          <Box>
+            <Text size="sm" fw={500} mb={4}>
+              Insert placeholder
+            </Text>
+            <Group gap={6} wrap="wrap">
+              {QUICK_PLACEHOLDERS.map(({ token, label, icon: Icon, hint }) => (
+                <Tooltip key={token} label={hint} withArrow>
+                  <Button
+                    variant="light"
+                    color="edr-green"
+                    size="compact-sm"
+                    radius="md"
+                    leftSection={<Icon size={13} />}
+                    // Keep the field's focus/caret alive so insertion lands
+                    // where the user was typing.
+                    onMouseDown={(e) => e.preventDefault()}
+                    onClick={() => insertAtCursor(token)}
+                  >
+                    {label}
+                  </Button>
+                </Tooltip>
+              ))}
+              <Menu shadow="md" width={300} position="bottom-start">
+                <Menu.Target>
+                  <Button
+                    variant="default"
+                    size="compact-sm"
+                    radius="md"
+                    leftSection={<Plus size={13} />}
+                    rightSection={<ChevronDown size={13} />}
+                    onMouseDown={(e) => e.preventDefault()}
+                  >
+                    More
+                  </Button>
+                </Menu.Target>
+                <Menu.Dropdown mah={340} style={{ overflowY: "auto" }}>
+                  {MORE_PLACEHOLDER_GROUPS.map((group) => (
+                    <Box key={group.label}>
+                      <Menu.Label>{group.label}</Menu.Label>
+                      {group.items.map(({ token, label, icon: Icon, hint }) => (
+                        <Menu.Item
+                          key={token}
+                          leftSection={<Icon size={14} />}
+                          onClick={() => insertAtCursor(token)}
+                        >
+                          <Text size="sm">{label}</Text>
+                          <Text size="xs" c="dimmed" title={hint}>
+                            {token}
+                          </Text>
+                        </Menu.Item>
+                      ))}
+                    </Box>
+                  ))}
+                </Menu.Dropdown>
+              </Menu>
+            </Group>
+          </Box>
+
+          <Box>
+            <Text size="sm" fw={500} mb={4}>
+              Add structure
+            </Text>
+            <Group gap={6} wrap="wrap">
+              <Tooltip
+                label="New line with the next clause number typed for you (1., 2., 3., …)"
+                withArrow
+              >
+                <Button
+                  variant="light"
+                  color="edr-green"
+                  size="compact-sm"
+                  radius="md"
+                  leftSection={<ListOrdered size={13} />}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onClick={() => insertStructuredLine("clause")}
+                >
+                  New clause
+                </Button>
+              </Tooltip>
+              <Tooltip
+                label="Numbered point under the current clause — 1.1, then 1.2, 1.3 on each click. For a deeper level type its number yourself (e.g. 1.1.1 )"
+                withArrow
+              >
+                <Button
+                  variant="light"
+                  color="edr-green"
+                  size="compact-sm"
+                  radius="md"
+                  leftSection={<ListTree size={13} />}
+                  disabled={body.trim().length === 0}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onClick={() => insertStructuredLine("sub")}
+                >
+                  Sub-clause
+                </Button>
+              </Tooltip>
+              <Tooltip
+                label="New line with a bullet (•) under the current clause"
+                withArrow
+              >
+                <Button
+                  variant="light"
+                  color="edr-green"
+                  size="compact-sm"
+                  radius="md"
+                  leftSection={<ListPlus size={13} />}
+                  disabled={body.trim().length === 0}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onClick={() => insertStructuredLine("bullet")}
+                >
+                  Bullet
+                </Button>
+              </Tooltip>
+            </Group>
+          </Box>
+
+          <Textarea
+            ref={bodyRef}
+            label="Article body"
+            description={BODY_HINT}
+            value={body}
+            onChange={(event) => setBody(event.currentTarget.value)}
+            onFocus={() => (lastFocused.current = "body")}
+            autosize
+            minRows={12}
+            maxRows={22}
+            styles={{
+              input: { fontFamily: "ui-monospace, monospace", fontSize: 13 },
+            }}
+            required
+          />
+
+          {unknown.length > 0 && (
+            <Group gap={6} wrap="nowrap" align="flex-start">
+              <AlertTriangle size={14} className="mt-0.5 shrink-0 text-red-600" />
+              <Text size="xs" c="red.7">
+                Unknown placeholder{unknown.length > 1 ? "s" : ""}{" "}
+                {unknown.join(", ")} — the generator won't fill{" "}
+                {unknown.length > 1 ? "these" : "this"}. Pick from the Insert
+                placeholder buttons instead.
+              </Text>
+            </Group>
+          )}
+        </Stack>
+
+        {/* ── Live preview ───────────────────────────────────────────── */}
+        <Paper withBorder radius="md" p="md" className="self-start lg:sticky lg:top-0">
+          <Group justify="space-between" mb="xs">
+            <Text fw={600} size="sm">
+              Live preview
+            </Text>
+            <Text size="xs" c="dimmed">
+              {clauseCount} clause{clauseCount !== 1 ? "s" : ""}
+            </Text>
+          </Group>
+          <ScrollArea.Autosize mah="60vh">
+            {title.trim() || clauseCount > 0 ? (
+              <Stack gap="xs">
+                {title.trim() && (
+                  <Title order={5}>
+                    <HighlightedText text={title} />
+                  </Title>
+                )}
+                {parsed.paragraph && (
+                  <Text size="sm">
+                    <HighlightedText text={parsed.paragraph} />
+                  </Text>
+                )}
+                {parsed.clauses.map((clause, i) => (
+                  <Box key={i} pl={(clause.depth - 1) * 20}>
+                    <Text size="sm">
+                      <Text component="span" fw={600} c="edr-green.7">
+                        {clause.number}.{" "}
+                      </Text>
+                      <HighlightedText text={clause.text} />
+                    </Text>
+                    {clause.bullets.length > 0 && (
+                      <Stack gap={2} mt={2} pl="lg">
+                        {clause.bullets.map((bullet, j) => (
+                          <Text key={j} size="sm" c="dimmed">
+                            • <HighlightedText text={bullet} />
+                          </Text>
+                        ))}
+                      </Stack>
+                    )}
+                  </Box>
+                ))}
+              </Stack>
+            ) : (
+              <Text size="sm" c="dimmed" ta="center" py="xl">
+                Start typing — the article renders here exactly as it will
+                appear in the contract.
+              </Text>
+            )}
+          </ScrollArea.Autosize>
+        </Paper>
+      </div>
+
+      <Group justify="flex-end" mt="md">
+        <Button variant="default" onClick={onClose}>
+          Cancel
+        </Button>
+        <Button
+          color="edr-green"
+          disabled={!canSave}
+          loading={saving}
+          onClick={() => onSave({ title: title.trim(), body: body.trim() })}
+        >
+          {initial.id ? "Save changes" : "Add article"}
+        </Button>
+      </Group>
+    </Modal>
+  );
+}
+
+interface DocumentDetailsModalProps {
+  opened: boolean;
+  onClose: () => void;
+  initial: {
+    name: string;
+    description: string;
+    documentTitle: string;
+    whereasClauses: string[];
+  };
+  saving: boolean;
+  onSave: (values: {
+    name: string;
+    description: string;
+    documentTitle: string;
+    whereasClauses: string[];
+  }) => void;
+}
+
+function DocumentDetailsModal({
+  opened,
+  onClose,
+  initial,
+  saving,
+  onSave,
+}: DocumentDetailsModalProps) {
+  const [name, setName] = useState(initial.name);
+  const [description, setDescription] = useState(initial.description);
+  const [documentTitle, setDocumentTitle] = useState(initial.documentTitle);
+  const [whereas, setWhereas] = useState(initial.whereasClauses.join("\n\n"));
+
+  // Re-sync local state each time the modal opens with fresh server data.
+  const [lastOpened, setLastOpened] = useState(false);
+  if (opened && !lastOpened) {
+    setName(initial.name);
+    setDescription(initial.description);
+    setDocumentTitle(initial.documentTitle);
+    setWhereas(initial.whereasClauses.join("\n\n"));
+    setLastOpened(true);
+  } else if (!opened && lastOpened) {
+    setLastOpened(false);
+  }
+
+  return (
+    <Modal opened={opened} onClose={onClose} title="Document details" size="xl">
+      <Stack gap="sm">
+        <TextInput
+          label="Template name"
+          value={name}
+          onChange={(event) => setName(event.currentTarget.value)}
+          required
+        />
+        <TextInput
+          label="Cover page title"
+          description="Printed on the contract cover, e.g. “Import Container Transport Service by Railway”."
+          value={documentTitle}
+          onChange={(event) => setDocumentTitle(event.currentTarget.value)}
+          required
+        />
+        <Textarea
+          label="Card description"
+          description="Shown on the Templates page card only — not printed."
+          value={description}
+          onChange={(event) => setDescription(event.currentTarget.value)}
+          autosize
+          minRows={2}
+        />
+        <Textarea
+          label="Recitals (WHEREAS clauses)"
+          description="One recital per paragraph — separate recitals with a blank line."
+          value={whereas}
+          onChange={(event) => setWhereas(event.currentTarget.value)}
+          autosize
+          minRows={5}
+          maxRows={12}
+        />
+        <Group justify="flex-end">
+          <Button variant="default" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            color="edr-green"
+            loading={saving}
+            disabled={name.trim().length < 3 || documentTitle.trim().length < 3}
+            onClick={() =>
+              onSave({
+                name: name.trim(),
+                description: description.trim(),
+                documentTitle: documentTitle.trim(),
+                whereasClauses: whereas
+                  .split(/\n\s*\n/)
+                  .map((clause) => clause.trim())
+                  .filter(Boolean),
+              })
+            }
+          >
+            Save details
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/pages/contract_templates/ContractTemplatesPage.tsx b/apps/edr-freight-web/backoffice/src/pages/contract_templates/ContractTemplatesPage.tsx
new file mode 100644
index 000000000..4a3654aa3
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/contract_templates/ContractTemplatesPage.tsx
@@ -0,0 +1,242 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  Badge,
+  Box,
+  Button,
+  Card,
+  Group,
+  SimpleGrid,
+  Skeleton,
+  Stack,
+  Text,
+  ThemeIcon,
+  Tooltip,
+} from "@mantine/core";
+import {
+  Boxes,
+  Clock,
+  Container,
+  Eye,
+  FileText,
+  Pencil,
+} from "lucide-react";
+
+import { PageContainer, PageHeader } from "@/components/page";
+import { useContractTemplates } from "@/hooks/contract-templates/useContractTemplates";
+import type { ContractTemplate } from "@/services/contract-templates.service";
+import TemplatePreviewModal from "./TemplatePreviewModal";
+
+const DIRECTION_LABEL: Record<string, string> = {
+  IMPORT: "Import",
+  EXPORT: "Export",
+  INTERCITY: "Intercity",
+};
+
+const DIRECTION_DOT: Record<string, string> = {
+  IMPORT: "var(--mantine-color-blue-5)",
+  EXPORT: "var(--mantine-color-violet-5)",
+  INTERCITY: "var(--mantine-color-orange-5)",
+};
+
+function templateDirection(code: ContractTemplate["code"]): string {
+  return code.split("_")[0];
+}
+
+function isBulk(code: ContractTemplate["code"]): boolean {
+  return code.endsWith("_BULK");
+}
+
+function formatUpdated(value: string): string {
+  return new Date(value).toLocaleDateString("en-GB", {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+  });
+}
+
+export default function ContractTemplatesPage() {
+  const navigate = useNavigate();
+  const { data: templates, isLoading } = useContractTemplates();
+  const [previewCode, setPreviewCode] = useState<string | null>(null);
+
+  const previewTemplate = templates?.find((t) => t.code === previewCode);
+
+  return (
+    <PageContainer>
+      <PageHeader
+        title="Contract templates"
+        subtitle="The six contract documents generated when a contract is approved — one per trade direction and freight type. Articles are fully editable."
+      />
+
+      <SimpleGrid cols={{ base: 1, md: 2, xl: 3 }} spacing="lg">
+        {isLoading
+          ? Array.from({ length: 6 }, (_, i) => <TemplateCardSkeleton key={i} />)
+          : (templates ?? []).map((template) => (
+              <TemplateCard
+                key={template.code}
+                template={template}
+                onPreview={() => setPreviewCode(template.code)}
+                onEdit={() =>
+                  navigate(`/dashboard/contract-templates/${template.code}`)
+                }
+              />
+            ))}
+      </SimpleGrid>
+
+      <TemplatePreviewModal
+        code={previewCode}
+        title={previewTemplate ? `${previewTemplate.name} — preview` : undefined}
+        onClose={() => setPreviewCode(null)}
+      />
+    </PageContainer>
+  );
+}
+
+function TemplateCard({
+  template,
+  onPreview,
+  onEdit,
+}: {
+  template: ContractTemplate;
+  onPreview: () => void;
+  onEdit: () => void;
+}) {
+  const direction = templateDirection(template.code);
+  const bulk = isBulk(template.code);
+
+  return (
+    <Card
+      withBorder
+      radius="lg"
+      padding={0}
+      className="group flex flex-col overflow-hidden transition-all duration-150 hover:-translate-y-0.5 hover:shadow-md"
+    >
+      <Stack gap="md" p="lg" style={{ flex: 1 }}>
+        {/* Kicker row: muted icon well + category label + state */}
+        <Group justify="space-between" align="center" wrap="nowrap">
+          <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
+            <ThemeIcon size={40} radius="md" variant="light" color="gray" c="gray.6">
+              {bulk ? (
+                <Boxes size={20} strokeWidth={1.75} />
+              ) : (
+                <Container size={20} strokeWidth={1.75} />
+              )}
+            </ThemeIcon>
+            <Group gap={7} wrap="nowrap">
+              <Box
+                w={7}
+                h={7}
+                style={{
+                  borderRadius: 999,
+                  flexShrink: 0,
+                  background: DIRECTION_DOT[direction] ?? "var(--mantine-color-gray-5)",
+                }}
+              />
+              <Text size="xs" fw={600} tt="uppercase" lts="0.06em" c="dimmed">
+                {DIRECTION_LABEL[direction] ?? direction} ·{" "}
+                {bulk ? "Bulk" : "Container"}
+              </Text>
+            </Group>
+          </Group>
+          {!template.isActive && (
+            <Tooltip label="Not used for new contracts" withArrow>
+              <Badge size="sm" variant="light" color="red">
+                Inactive
+              </Badge>
+            </Tooltip>
+          )}
+        </Group>
+
+        {/* Name + description */}
+        <div>
+          <Text fw={600} size="md" lh={1.35}>
+            {template.name}
+          </Text>
+          <Text size="sm" c="dimmed" lineClamp={2} mt={4} lh={1.5}>
+            {template.description || template.documentTitle}
+          </Text>
+        </div>
+
+        {/* Meta stats */}
+        <Group gap="lg" mt="auto">
+          <Group gap={5} wrap="nowrap">
+            <FileText size={13} className="text-gray-400" />
+            <Text size="xs" c="dimmed">
+              {template.articles.length} article
+              {template.articles.length !== 1 ? "s" : ""}
+            </Text>
+          </Group>
+          <Group gap={5} wrap="nowrap">
+            <Clock size={13} className="text-gray-400" />
+            <Text size="xs" c="dimmed">
+              Updated {formatUpdated(template.updatedAt)}
+            </Text>
+          </Group>
+        </Group>
+      </Stack>
+
+      {/* Footer actions, separated by a hairline */}
+      <Box
+        px="md"
+        py="xs"
+        style={{ borderTop: "1px solid var(--mantine-color-default-border)" }}
+      >
+        <Group justify="space-between">
+          <Button
+            variant="subtle"
+            color="gray"
+            size="compact-sm"
+            radius="md"
+            leftSection={<Eye size={14} />}
+            onClick={onPreview}
+          >
+            Preview
+          </Button>
+          <Button
+            variant="light"
+            color="edr-green"
+            size="compact-sm"
+            radius="md"
+            leftSection={<Pencil size={14} />}
+            onClick={onEdit}
+          >
+            Edit articles
+          </Button>
+        </Group>
+      </Box>
+    </Card>
+  );
+}
+
+function TemplateCardSkeleton() {
+  return (
+    <Card withBorder radius="lg" padding={0} className="overflow-hidden">
+      <Stack gap="md" p="lg">
+        <Group gap="sm">
+          <Skeleton height={40} width={40} radius="md" />
+          <Skeleton height={10} width={120} radius="xl" />
+        </Group>
+        <div>
+          <Skeleton height={14} width="70%" radius="xl" />
+          <Skeleton height={10} width="95%" radius="xl" mt={10} />
+          <Skeleton height={10} width="60%" radius="xl" mt={6} />
+        </div>
+        <Group gap="lg">
+          <Skeleton height={10} width={70} radius="xl" />
+          <Skeleton height={10} width={110} radius="xl" />
+        </Group>
+      </Stack>
+      <Box
+        px="md"
+        py="xs"
+        style={{ borderTop: "1px solid var(--mantine-color-default-border)" }}
+      >
+        <Group justify="space-between">
+          <Skeleton height={26} width={90} radius="md" />
+          <Skeleton height={26} width={110} radius="md" />
+        </Group>
+      </Box>
+    </Card>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/pages/contract_templates/TemplatePreviewModal.tsx b/apps/edr-freight-web/backoffice/src/pages/contract_templates/TemplatePreviewModal.tsx
new file mode 100644
index 000000000..fd741305e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/contract_templates/TemplatePreviewModal.tsx
@@ -0,0 +1,49 @@
+import { Center, Loader, Modal, Paper, Text } from "@mantine/core";
+
+import { useContractTemplatePreview } from "@/hooks/contract-templates/useContractTemplates";
+
+interface TemplatePreviewModalProps {
+  code: string | null;
+  title?: string;
+  onClose: () => void;
+}
+
+/** Full-document HTML preview rendered by the API against mock contract data. */
+export default function TemplatePreviewModal({
+  code,
+  title,
+  onClose,
+}: TemplatePreviewModalProps) {
+  const { data, isLoading, isError } = useContractTemplatePreview(
+    code ?? undefined,
+    Boolean(code),
+  );
+
+  return (
+    <Modal
+      opened={Boolean(code)}
+      onClose={onClose}
+      title={title ?? "Contract preview"}
+      size="90%"
+      padding="sm"
+    >
+      {isLoading ? (
+        <Center h={420}>
+          <Loader color="edr-green" />
+        </Center>
+      ) : isError ? (
+        <Center h={200}>
+          <Text c="red">Failed to render the preview.</Text>
+        </Center>
+      ) : (
+        <Paper withBorder radius="md" style={{ overflow: "hidden" }}>
+          <iframe
+            title="Contract template preview"
+            srcDoc={data?.html}
+            style={{ width: "100%", height: "72vh", border: 0, background: "#f3f8f5" }}
+          />
+        </Paper>
+      )}
+    </Modal>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/pages/contracts/ContractClearanceListPage.tsx b/apps/edr-freight-web/backoffice/src/pages/contracts/ContractClearanceListPage.tsx
index 78f42a7d7..142173298 100644
--- a/apps/edr-freight-web/backoffice/src/pages/contracts/ContractClearanceListPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/contracts/ContractClearanceListPage.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState, type ReactNode } from "react";
+import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
 import { useNavigate } from "react-router-dom";
 import {
   ActionIcon,
@@ -7,6 +7,7 @@ import {
   Button,
   Card,
   Group,
+  Menu,
   SegmentedControl,
   Stack,
   Text,
@@ -16,16 +17,18 @@ import {
 } from "@mantine/core";
 import {
   ArrowRight,
+  Calendar,
   ChevronRight,
+  ExternalLink,
+  Eye,
   FileText,
-  Flag,
   Inbox,
   LayoutGrid,
+  MoreHorizontal,
   PackageCheck,
   PackagePlus,
   RefreshCw,
   Search,
-  Send,
   ShieldCheck,
   ShipWheel,
   Table as TableIcon,
@@ -46,17 +49,23 @@ import { PageHeader } from "@/components/page/PageHeader";
 import { KpiStrip } from "@/components/page/KpiStrip";
 import { bookingTable } from "@/components/bookings/booking-ui.styles";
 import { useAuth } from "@/auth/useAuth";
-import {
-  useContractClearanceQueue,
-  useEtClearanceQueue,
-} from "@/hooks/contracts/useContracts";
+import { useContractClearanceQueue } from "@/hooks/contracts/useContracts";
 import { useBookingEtClearanceQueue } from "@/hooks/bookings/useBookings";
 import type { BookingDetail } from "@/types/booking";
-import { FREIGHT_PERMS, hasPermission } from "@/lib/permissions";
+import { FREIGHT_PERMS, hasPermission, isDjiboutiGl } from "@/lib/permissions";
 import { GlUpcomingWindowsSection } from "@/components/contracts/GlUpcomingWindowsSection";
+import {
+  RequestedCargoChips,
+  summarizeRequestedCargo,
+} from "@/features/clearance/requestedCargo";
+import { contractsService } from "@/services/contracts.service";
+import { useQuery } from "@tanstack/react-query";
 
 type ViewMode = "table" | "cards";
-type QueueTab = "all" | "et" | "shipments";
+type QueueTab = "all" | "shipments";
+
+/** Persist the selected queue tab so returning from a detail keeps it. */
+const QUEUE_TAB_STORAGE_KEY = "edr.clearance.queueTab";
 
 interface ClearanceRow {
   id: string;
@@ -197,21 +206,35 @@ export default function ContractClearanceListPage() {
   const { user } = useAuth();
   const canReview = hasPermission(user, FREIGHT_PERMS.contracts.clearanceReview);
   const canEt = hasPermission(user, FREIGHT_PERMS.contracts.clearanceEtActions);
-  const canCreateBooking = hasPermission(
-    user,
-    FREIGHT_PERMS.contracts.createBooking,
-  );
+  // Creating a booking under a cleared contract is a GL Ethiopia action — never
+  // available to Djibouti GL.
+  const canCreateBooking =
+    hasPermission(user, FREIGHT_PERMS.contracts.createBooking) &&
+    !isDjiboutiGl(user);
 
-  const defaultQueue: QueueTab = canReview ? "all" : "et";
-  const [queueTab, setQueueTab] = useState<QueueTab>(defaultQueue);
+  const defaultQueue: QueueTab = canReview ? "all" : "shipments";
+  const [queueTab, setQueueTab] = useState<QueueTab>(() => {
+    const stored =
+      typeof window !== "undefined"
+        ? window.localStorage.getItem(QUEUE_TAB_STORAGE_KEY)
+        : null;
+    return stored === "all" || stored === "shipments" ? stored : defaultQueue;
+  });
   const [query, setQuery] = useState("");
   const [view, setView] = useState<ViewMode>("table");
   const { pagination, setPagination } = usePagination({ pageSize: 10 });
 
+  const selectQueueTab = useCallback((tab: QueueTab) => {
+    setQueueTab(tab);
+    if (typeof window !== "undefined") {
+      window.localStorage.setItem(QUEUE_TAB_STORAGE_KEY, tab);
+    }
+  }, []);
+
+  // Contract clearance rows feed both the Contracts tab and the header KPIs, so
+  // they load regardless of the active tab.
   const { data: allData, isLoading: allLoading, isError: allError, isFetching: allFetching, refetch: refetchAll } =
-    useContractClearanceQueue(queueTab === "all" || queueTab === "shipments");
-  const { data: etData, isLoading: etLoading, isError: etError, isFetching: etFetching, refetch: refetchEt } =
-    useEtClearanceQueue(queueTab === "et");
+    useContractClearanceQueue(true);
   const {
     data: bookingQueue,
     isLoading: bookingsLoading,
@@ -220,18 +243,12 @@ export default function ContractClearanceListPage() {
     refetch: refetchBookings,
   } = useBookingEtClearanceQueue(queueTab === "shipments");
 
-  const data = queueTab === "et" ? etData : allData;
-  const isLoading = queueTab === "et" ? etLoading : allLoading;
-  const isError = queueTab === "et" ? etError : allError;
-  const isFetching =
-    queueTab === "et"
-      ? etFetching
-      : queueTab === "shipments"
-        ? bookingsFetching
-        : allFetching;
+  const data = allData;
+  const isLoading = queueTab === "shipments" ? bookingsLoading : allLoading;
+  const isError = queueTab === "shipments" ? bookingsError : allError;
+  const isFetching = queueTab === "shipments" ? bookingsFetching : allFetching;
   const refetch = () => {
-    if (queueTab === "et") void refetchEt();
-    else if (queueTab === "shipments") void refetchBookings();
+    if (queueTab === "shipments") void refetchBookings();
     else void refetchAll();
   };
 
@@ -242,19 +259,8 @@ export default function ContractClearanceListPage() {
         value: "all",
         label: (
           <Group gap={6} wrap="nowrap">
-            <ShieldCheck size={15} />
-            <Box visibleFrom="sm">All</Box>
-          </Group>
-        ),
-      });
-    }
-    if (canEt) {
-      opts.push({
-        value: "et",
-        label: (
-          <Group gap={6} wrap="nowrap">
-            <Flag size={15} />
-            <Box visibleFrom="sm">ET queue</Box>
+            <FileText size={15} />
+            <Box visibleFrom="sm">Contracts</Box>
           </Group>
         ),
       });
@@ -273,9 +279,36 @@ export default function ContractClearanceListPage() {
     return opts;
   }, [canReview, canEt]);
 
-  // GENERAL-contract shipment bookings in per-booking clearance (ET queue).
+  // If a persisted/default tab isn't available for this user, fall back to the
+  // first permitted tab.
+  useEffect(() => {
+    if (
+      queueTabOptions.length > 0 &&
+      !queueTabOptions.some((o) => o.value === queueTab)
+    ) {
+      selectQueueTab(queueTabOptions[0].value);
+    }
+  }, [queueTabOptions, queueTab, selectQueueTab]);
+
+  // Shipment requests carry the requested quantities (per container type, or
+  // bulk weight/items). Map them onto the booking rows by createdBookingId so
+  // the queue shows what each shipment was requested for.
+  const { data: requestQueue } = useQuery({
+    queryKey: ["shipment-request-queue"],
+    queryFn: () => contractsService.getBookingRequestQueue(),
+    enabled: queueTab === "shipments",
+  });
+  const requestedByBooking = useMemo(() => {
+    const map = new Map<string, Freight.RequestedShipmentLines>();
+    for (const req of requestQueue ?? []) {
+      if (req.createdBookingId) map.set(req.createdBookingId, req.requestedLines);
+    }
+    return map;
+  }, [requestQueue]);
+
+  // GENERAL-contract shipment bookings in per-booking clearance.
   const bookingRows = useMemo(() => {
-    const rows = (bookingQueue ?? []).map((b: BookingDetail) => ({
+    const rows: ShipmentBookingRow[] = (bookingQueue ?? []).map((b: BookingDetail) => ({
       id: b.id,
       reference: b.reference,
       customerLabel: b.company?.name ?? b.governmentInstitution ?? "—",
@@ -284,6 +317,15 @@ export default function ContractClearanceListPage() {
       tradeDirection: b.tradeDirection ?? "—",
       freightType: b.freightType ?? "—",
       status: b.status,
+      requested: requestedByBooking.get(b.id) ?? null,
+      contractId: b.contractId ?? null,
+      contractReference: b.contractReference ?? null,
+      contractKind: b.contractKind ?? null,
+      customs: b.serviceType?.includesCustoms ?? Boolean(b.customsClearingEnabled),
+      createdAt: b.createdAt ?? null,
+      // A bare initiated instance has no cargo/price yet — GL still has to create
+      // (complete) the booking.
+      bookingCreated: Number(b.totalAmount ?? 0) > 0,
     }));
     const q = query.trim().toLowerCase();
     if (!q) return rows;
@@ -291,10 +333,12 @@ export default function ContractClearanceListPage() {
       (r) =>
         r.reference.toLowerCase().includes(q) ||
         r.customerLabel.toLowerCase().includes(q) ||
+        (r.contractReference ?? "").toLowerCase().includes(q) ||
         r.originLabel.toLowerCase().includes(q) ||
-        r.destinationLabel.toLowerCase().includes(q),
+        r.destinationLabel.toLowerCase().includes(q) ||
+        summarizeRequestedCargo(r.requested).toLowerCase().includes(q),
     );
-  }, [bookingQueue, query]);
+  }, [bookingQueue, query, requestedByBooking]);
 
   const allRows = useMemo(
     () => (data?.items ?? []).map(toClearanceRow),
@@ -420,7 +464,7 @@ export default function ContractClearanceListPage() {
         id: "go",
         size: 150,
         cell: ({ row }) =>
-          row.original.ready ? (
+          row.original.ready && canCreateBooking ? (
             <Group justify="flex-end" pr="xs">
               <Button
                 size="compact-sm"
@@ -444,7 +488,7 @@ export default function ContractClearanceListPage() {
           ),
       },
     ],
-    [navigate],
+    [navigate, canCreateBooking],
   );
 
   return (
@@ -464,29 +508,16 @@ export default function ContractClearanceListPage() {
             </Badge>
           }
           action={
-            <Group gap="sm" wrap="nowrap">
-              {canCreateBooking ? (
-                <Button
-                  variant="filled"
-                  color="edr-green"
-                  radius="md"
-                  leftSection={<Send size={15} />}
-                  onClick={() => navigate("/dashboard/shipment-requests")}
-                >
-                  Shipment requests
-                </Button>
-              ) : null}
-              <ActionIcon
-                variant="default"
-                size="lg"
-                radius="md"
-                onClick={() => refetch()}
-                loading={isFetching}
-                aria-label="Refresh"
-              >
-                <RefreshCw size={16} />
-              </ActionIcon>
-            </Group>
+            <ActionIcon
+              variant="default"
+              size="lg"
+              radius="md"
+              onClick={() => refetch()}
+              loading={isFetching}
+              aria-label="Refresh"
+            >
+              <RefreshCw size={16} />
+            </ActionIcon>
           }
         />
 
@@ -525,7 +556,7 @@ export default function ContractClearanceListPage() {
                   radius="md"
                   value={queueTab}
                   onChange={(v) => {
-                    setQueueTab(v as QueueTab);
+                    selectQueueTab(v as QueueTab);
                     setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
                   }}
                   data={queueTabOptions}
@@ -600,7 +631,16 @@ export default function ContractClearanceListPage() {
                 rows={bookingRows}
                 loading={bookingsLoading}
                 error={bookingsError}
+                canCreateBooking={canCreateBooking}
                 onOpen={(id) => navigate(`/dashboard/clearance/${id}`)}
+                onCreateBooking={(row) =>
+                  navigate(
+                    `/dashboard/contracts/${row.contractId}/bookings/${row.id}/complete`,
+                  )
+                }
+                onViewContract={(contractId) =>
+                  navigate(`/dashboard/contracts/clearance/${contractId}`)
+                }
               />
             ) : view === "table" ? (
               <Box style={{ overflowX: "auto" }} px="xs" pb="xs">
@@ -650,8 +690,26 @@ interface ShipmentBookingRow {
   tradeDirection: string;
   freightType: string;
   status: string;
+  /** Requested quantities from the originating shipment request. */
+  requested: Freight.RequestedShipmentLines | null;
+  /** Contract this shipment booking was created under. */
+  contractId: string | null;
+  contractReference: string | null;
+  contractKind: "ONE_TIME" | "GENERAL" | null;
+  customs: boolean;
+  createdAt: string | null;
+  /** true once GL has actually created (completed) the booking. */
+  bookingCreated: boolean;
 }
 
+const formatDate = (iso: string | null) => {
+  if (!iso) return "—";
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime())
+    ? "—"
+    : d.toLocaleDateString(undefined, { day: "2-digit", month: "short", year: "numeric" });
+};
+
 const prettyStatus = (s: string) =>
   s
     .toLowerCase()
@@ -670,13 +728,26 @@ function ShipmentBookingsTable({
   rows,
   loading,
   error,
+  canCreateBooking,
   onOpen,
+  onCreateBooking,
+  onViewContract,
 }: {
   rows: ShipmentBookingRow[];
   loading: boolean;
   error: boolean;
+  canCreateBooking: boolean;
   onOpen: (id: string) => void;
+  onCreateBooking: (row: ShipmentBookingRow) => void;
+  onViewContract: (contractId: string) => void;
 }) {
+  // A bare initiated instance that has cleared but not yet been created by GL.
+  const isBookable = (r: ShipmentBookingRow) =>
+    canCreateBooking &&
+    Boolean(r.contractId) &&
+    !r.bookingCreated &&
+    r.status === "CLEARANCE_READY";
+
   const columns = useMemo<ColumnDef<ShipmentBookingRow>[]>(
     () => [
       {
@@ -699,6 +770,28 @@ function ShipmentBookingsTable({
           </div>
         ),
       },
+      {
+        id: "contract",
+        header: () => <span className={bookingTable.headerCell}>Contract</span>,
+        cell: ({ row }) => {
+          const r = row.original;
+          return (
+            <Stack gap={4} py={2}>
+              <Group gap={6} wrap="nowrap">
+                <FileText size={13} className="shrink-0 text-muted-foreground" />
+                <Text size="sm" fw={500} truncate maw={150}>
+                  {r.contractReference ?? "—"}
+                </Text>
+              </Group>
+              {r.contractKind ? (
+                <Badge size="xs" variant="default" radius="sm" tt="uppercase">
+                  {r.contractKind === "GENERAL" ? "General" : "One-time"}
+                </Badge>
+              ) : null}
+            </Stack>
+          );
+        },
+      },
       {
         id: "route",
         header: () => <span className={bookingTable.headerCell}>Route</span>,
@@ -725,6 +818,28 @@ function ShipmentBookingsTable({
             <Badge variant="outline" color="gray" radius="sm">
               {prettyStatus(row.original.freightType)}
             </Badge>
+            <CustomsBadge customs={row.original.customs} />
+          </Group>
+        ),
+      },
+      {
+        id: "requested",
+        header: () => (
+          <span className={bookingTable.headerCell}>Requested cargo</span>
+        ),
+        cell: ({ row }) => (
+          <RequestedCargoChips lines={row.original.requested} size="sm" />
+        ),
+      },
+      {
+        id: "created",
+        header: () => <span className={bookingTable.headerCell}>Created</span>,
+        cell: ({ row }) => (
+          <Group gap={6} wrap="nowrap">
+            <Calendar size={13} className="shrink-0 text-muted-foreground" />
+            <Text size="sm" c="dimmed">
+              {formatDate(row.original.createdAt)}
+            </Text>
           </Group>
         ),
       },
@@ -732,26 +847,95 @@ function ShipmentBookingsTable({
         id: "status",
         header: () => <span className={bookingTable.headerCell}>Status</span>,
         cell: ({ row }) => (
-          <Badge
-            variant="light"
-            color={shipmentStatusColor(row.original.status)}
-            radius="sm"
-          >
-            {prettyStatus(row.original.status)}
-          </Badge>
-        ),
-      },
-      {
-        id: "chevron",
-        header: "",
-        cell: () => (
-          <Group justify="flex-end" pr="xs">
-            <ChevronRight size={16} className="text-muted-foreground" />
+          <Group gap={6} wrap="nowrap">
+            <Badge
+              variant="light"
+              color={shipmentStatusColor(row.original.status)}
+              radius="sm"
+            >
+              {prettyStatus(row.original.status)}
+            </Badge>
+            {row.original.bookingCreated ? (
+              <Tooltip label="Booking created by GL Ethiopia" withArrow>
+                <Badge
+                  variant="light"
+                  color="blue"
+                  radius="sm"
+                  leftSection={<PackagePlus size={11} />}
+                >
+                  Booked
+                </Badge>
+              </Tooltip>
+            ) : null}
           </Group>
         ),
       },
+      {
+        id: "actions",
+        header: "",
+        size: 200,
+        cell: ({ row }) => {
+          const r = row.original;
+          const bookable = isBookable(r);
+          return (
+            <Group
+              justify="flex-end"
+              gap={6}
+              pr="xs"
+              wrap="nowrap"
+              onClick={(e) => e.stopPropagation()}
+            >
+              {bookable ? (
+                <Button
+                  size="compact-sm"
+                  color="edr-green"
+                  radius="md"
+                  leftSection={<PackagePlus size={14} />}
+                  onClick={() => onCreateBooking(r)}
+                >
+                  Create booking
+                </Button>
+              ) : null}
+              <Menu shadow="md" radius="md" position="bottom-end" withinPortal>
+                <Menu.Target>
+                  <ActionIcon
+                    variant="subtle"
+                    color="gray"
+                    radius="md"
+                    aria-label="Row actions"
+                  >
+                    <MoreHorizontal size={16} />
+                  </ActionIcon>
+                </Menu.Target>
+                <Menu.Dropdown>
+                  <Menu.Item leftSection={<Eye size={14} />} onClick={() => onOpen(r.id)}>
+                    Open booking
+                  </Menu.Item>
+                  {bookable ? (
+                    <Menu.Item
+                      leftSection={<PackagePlus size={14} />}
+                      onClick={() => onCreateBooking(r)}
+                    >
+                      Create booking
+                    </Menu.Item>
+                  ) : null}
+                  {r.contractId ? (
+                    <Menu.Item
+                      leftSection={<ExternalLink size={14} />}
+                      onClick={() => onViewContract(r.contractId!)}
+                    >
+                      View contract
+                    </Menu.Item>
+                  ) : null}
+                </Menu.Dropdown>
+              </Menu>
+            </Group>
+          );
+        },
+      },
     ],
-    [],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [canCreateBooking, onOpen, onCreateBooking, onViewContract],
   );
 
   if (!loading && !error && rows.length === 0) {
diff --git a/apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestDetailPage.tsx b/apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestDetailPage.tsx
index c81f5b919..99f29b985 100644
--- a/apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestDetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestDetailPage.tsx
@@ -302,7 +302,7 @@ export default function ContractRequestDetailPage() {
 
   const customerLabel = contract.isGovernment
     ? (contract.governmentInstitution ?? "Government")
-    : (contract.companyId ?? "—");
+    : (contract.company?.name ?? "—");
 
   return (
     <PageContainer>
diff --git a/apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestsPage.tsx b/apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestsPage.tsx
index 70e9ac410..c4f87c3d6 100644
--- a/apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestsPage.tsx
@@ -133,21 +133,21 @@ export default function ContractRequestsPage() {
   const columns: ColumnDef<ContractListRow>[] = [
     {
       id: "contract",
-      header: () => <span className={bookingTable.headerCell}>Contract</span>,
+      header: () => <span className={bookingTable.headerCell}>Customer</span>,
       cell: ({ row }) => {
         const c = row.original;
         return (
           <div className="flex items-center gap-3 py-1.5">
             <div className={bookingTable.rowIcon}>
-              <FileText className="size-4" strokeWidth={1.75} />
+              <User className="size-4" strokeWidth={1.75} />
             </div>
             <div className="min-w-0">
               <p className="truncate font-medium text-foreground">
-                {c.reference}
+                {c.customerLabel}
               </p>
               <p className="mt-0.5 flex items-center gap-1 truncate text-xs text-muted-foreground">
-                <User className="size-3 shrink-0 opacity-70" />
-                {c.customerLabel}
+                <FileText className="size-3 shrink-0 opacity-70" />
+                {c.reference}
               </p>
             </div>
           </div>
diff --git a/apps/edr-freight-web/backoffice/src/pages/contracts/GlClearanceDetailPage.tsx b/apps/edr-freight-web/backoffice/src/pages/contracts/GlClearanceDetailPage.tsx
index 2f42866a9..3444e85f1 100644
--- a/apps/edr-freight-web/backoffice/src/pages/contracts/GlClearanceDetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/contracts/GlClearanceDetailPage.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import {
   Alert,
   Badge,
@@ -14,9 +14,19 @@ import {
   Text,
   ThemeIcon,
 } from "@mantine/core";
-import { AlertCircle, ClipboardList, FileText, Upload } from "lucide-react";
+import {
+  AlertCircle,
+  ClipboardList,
+  FileText,
+  PackagePlus,
+  Upload,
+} from "lucide-react";
 import type { Freight } from "@edr/types";
 
+import { useAuth } from "@/auth/useAuth";
+import { FREIGHT_PERMS, hasPermission } from "@/lib/permissions";
+import type { BookingDetail } from "@/types/booking";
+
 import { PageContainer } from "@/components/page/PageContainer";
 import { PageHeader } from "@/components/page/PageHeader";
 import { ClearanceReviewSection } from "@/components/bookings/detail/ClearanceReviewSection";
@@ -46,6 +56,7 @@ type GlClearanceDetail =
       reference: string;
       tradeDirection: string;
       clearance: Freight.ClearanceView;
+      booking: BookingDetail;
     };
 
 async function loadGlClearanceDetail(id: string): Promise<GlClearanceDetail> {
@@ -70,6 +81,7 @@ async function loadGlClearanceDetail(id: string): Promise<GlClearanceDetail> {
       reference: booking.reference,
       tradeDirection: booking.tradeDirection,
       clearance,
+      booking,
     };
   }
 }
@@ -77,6 +89,8 @@ async function loadGlClearanceDetail(id: string): Promise<GlClearanceDetail> {
 /** Djibouti GL clearance detail — RO/DO upload and read-only upstream context. */
 export default function GlClearanceDetailPage() {
   const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const { user } = useAuth();
   const { view, viewer } = useFileViewer();
   const [uploadKind, setUploadKind] = useState<GlClearanceUploadKind | null>(null);
 
@@ -125,6 +139,20 @@ export default function GlClearanceDetailPage() {
       ? (data.clearance.vesselDepartureDate ?? null)
       : null;
 
+  // The shipment booking instance backing this clearance (per-booking GENERAL
+  // customs). Bare until GL completes it: no cargo, no price.
+  const shipmentBooking = data.kind === "booking" ? data.booking : null;
+  const bookingCompleted = Number(shipmentBooking?.totalAmount ?? 0) > 0;
+  // Import boundary (DO collected) / export boundary (release) reached →
+  // clearance is ready and GL creates the real booking. Show the create-booking
+  // CTA here so the GL user who finishes the DJ step isn't left without a next
+  // action. Permission-gated so only booking creators (GL Ethiopia) see it.
+  const canCompleteBooking =
+    shipmentBooking?.status === "CLEARANCE_READY" &&
+    Boolean(shipmentBooking?.contractId) &&
+    !bookingCompleted &&
+    hasPermission(user, FREIGHT_PERMS.contracts.createBooking);
+
   return (
     <PageContainer>
       <Stack gap="lg">
@@ -144,6 +172,7 @@ export default function GlClearanceDetailPage() {
             <Group gap="sm">
               {isImport ? (
                 <Button
+                  variant={canCompleteBooking ? "default" : "filled"}
                   color="edr-green"
                   leftSection={<Upload size={16} />}
                   disabled={!canUploadDo}
@@ -153,6 +182,7 @@ export default function GlClearanceDetailPage() {
                 </Button>
               ) : (
                 <Button
+                  variant={canCompleteBooking ? "default" : "filled"}
                   color="edr-green"
                   leftSection={<Upload size={16} />}
                   onClick={() => setUploadKind("ro")}
@@ -160,6 +190,19 @@ export default function GlClearanceDetailPage() {
                   {hasRo ? "Replace RO" : "Upload RO"}
                 </Button>
               )}
+              {canCompleteBooking && shipmentBooking ? (
+                <Button
+                  color="edr-green"
+                  leftSection={<PackagePlus size={16} />}
+                  onClick={() =>
+                    navigate(
+                      `/dashboard/contracts/${shipmentBooking.contractId}/bookings/${id}/complete`,
+                    )
+                  }
+                >
+                  Create booking
+                </Button>
+              ) : null}
             </Group>
           }
         />
@@ -209,7 +252,15 @@ export default function GlClearanceDetailPage() {
                 <PhasedClearanceActionPanel
                   contractId={data.kind === "contract" ? id : undefined}
                   bookingId={data.kind === "booking" ? id : linkedBookingId}
-                  bookingCreated={data.kind === "booking" || Boolean(linkedBookingId)}
+                  // For a per-booking instance, "created" means COMPLETED (has
+                  // cargo/price), not merely that a booking row exists — a bare
+                  // instance is not yet a real booking. Contract-level clearance
+                  // keeps its linked-booking signal.
+                  bookingCreated={
+                    data.kind === "booking"
+                      ? bookingCompleted
+                      : Boolean(linkedBookingId)
+                  }
                   bookingMilestones={
                     data.kind === "booking"
                       ? (data.clearance.milestones ?? [])
diff --git a/apps/edr-freight-web/backoffice/src/pages/contracts/GlDjiboutiClearanceListPage.tsx b/apps/edr-freight-web/backoffice/src/pages/contracts/GlDjiboutiClearanceListPage.tsx
index afa15d8d1..bb0edcadb 100644
--- a/apps/edr-freight-web/backoffice/src/pages/contracts/GlDjiboutiClearanceListPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/contracts/GlDjiboutiClearanceListPage.tsx
@@ -1,21 +1,54 @@
-import { useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import {
+  ActionIcon,
   Badge,
   Box,
+  Button,
   Card,
   Group,
-  Loader,
   SegmentedControl,
+  Select,
   Stack,
   Text,
+  TextInput,
+  ThemeIcon,
+  Tooltip,
 } from "@mantine/core";
-import { ChevronRight, FileSignature, PackageCheck, Ship } from "lucide-react";
+import {
+  AlertTriangle,
+  ArrowRight,
+  CalendarClock,
+  ChevronRight,
+  FileSignature,
+  FileText,
+  Inbox,
+  PackageCheck,
+  RefreshCw,
+  Search,
+  ShieldCheck,
+  Ship,
+  ShipWheel,
+  Truck,
+  User,
+  Weight,
+  X,
+} from "lucide-react";
+import {
+  DataTable,
+  DataTableFooter,
+  usePagination,
+  type ColumnDef,
+} from "@edr/ui-common";
+import type { Freight } from "@edr/types";
 
 import { PageContainer } from "@/components/page/PageContainer";
 import { PageHeader } from "@/components/page/PageHeader";
+import { KpiStrip } from "@/components/page/KpiStrip";
+import { bookingTable } from "@/components/bookings/booking-ui.styles";
 import { useDjClearanceQueue } from "@/hooks/contracts/useContracts";
 import { useBookingDjClearanceQueue } from "@/hooks/bookings/useBookings";
+import type { BookingDetail } from "@/types/booking";
 
 type QueueTab = "contracts" | "shipments";
 
@@ -25,6 +58,235 @@ const prettyStatus = (s?: string | null) =>
     .replace(/_/g, " ")
     .replace(/^\w/, (c) => c.toUpperCase());
 
+function formatDate(value?: string | null): string {
+  if (!value) return "—";
+  const d = new Date(value);
+  return Number.isNaN(d.getTime())
+    ? "—"
+    : d.toLocaleDateString(undefined, {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+      });
+}
+
+function yardLabel(
+  yard?: { label?: string; code?: string; name?: string } | null,
+  fallback = "—",
+): string {
+  if (!yard) return fallback;
+  return yard.label ?? yard.name ?? yard.code ?? fallback;
+}
+
+const PHASE_LABELS: Record<string, string> = {
+  CUSTOMER_INTAKE: "Customer intake",
+  GL_ET_REVIEW: "GL ET review",
+  GL_DJ_COLLECTION: "DJ collection",
+  GL_ET_OUTPUT: "GL ET output",
+  CUSTOMER_DUTY: "Customer duty",
+  GL_ET_POST_CLEARANCE: "ET post-clearance",
+  GL_DJ_LOADING: "DJ loading",
+  POST_TRANSIT: "Post transit",
+};
+
+const phaseLabel = (phase?: string | null) =>
+  phase ? (PHASE_LABELS[phase] ?? prettyStatus(phase)) : "—";
+
+function statusColor(status: string): string {
+  switch (status) {
+    case "AWAITING_DOCUMENTS":
+    case "AWAITING_CLEARANCE_DOCUMENTS":
+      return "yellow";
+    case "DOCUMENTS_UNDER_REVIEW":
+    case "CLEARANCE_UNDER_REVIEW":
+      return "blue";
+    case "CLEARANCE_READY":
+    case "CLEARANCE_READY_FOR_BOOKING":
+      return "edr-green";
+    case "ACTIVE_SHIPMENT_IN_PROGRESS":
+    case "IN_TRANSIT":
+      return "teal";
+    default:
+      return "gray";
+  }
+}
+
+// ── DJ next action (shipments) ───────────────────────────────────────────────
+
+type DjActionKey = "RO_HOLD" | "COLLECT_DO" | "ISSUE_RO" | "LOADING" | "REVIEW";
+
+interface DjAction {
+  key: DjActionKey;
+  label: string;
+  color: string;
+}
+
+const DJ_ACTION_OPTIONS: { value: DjActionKey; label: string }[] = [
+  { value: "RO_HOLD", label: "RO amendment hold" },
+  { value: "COLLECT_DO", label: "Collect DO" },
+  { value: "ISSUE_RO", label: "Issue RO" },
+  { value: "LOADING", label: "Loading milestones" },
+  { value: "REVIEW", label: "Review" },
+];
+
+function djAction(b: BookingDetail): DjAction {
+  if (b.roHoldReason) {
+    return { key: "RO_HOLD", label: "RO amendment hold", color: "red" };
+  }
+  if (b.clearanceCurrentPhase === "GL_DJ_LOADING") {
+    return { key: "LOADING", label: "Loading milestones", color: "teal" };
+  }
+  if (b.tradeDirection === "IMPORT") {
+    return { key: "COLLECT_DO", label: "Collect DO", color: "yellow" };
+  }
+  if (b.tradeDirection === "EXPORT") {
+    return { key: "ISSUE_RO", label: "Issue RO", color: "blue" };
+  }
+  return { key: "REVIEW", label: "Review", color: "gray" };
+}
+
+// ── Row models ───────────────────────────────────────────────────────────────
+
+interface ShipmentRow {
+  id: string;
+  reference: string;
+  contractReference: string;
+  customerLabel: string;
+  originLabel: string;
+  destinationLabel: string;
+  tradeDirection: string;
+  freightType: string;
+  status: string;
+  phase: string | null;
+  roHoldReason: string | null;
+  scheduledDate: string | null;
+  weightTons: number;
+  isHazardous: boolean;
+  action: DjAction;
+}
+
+function toShipmentRow(b: BookingDetail): ShipmentRow {
+  return {
+    id: b.id,
+    reference: b.reference,
+    contractReference: b.contractReference ?? "—",
+    customerLabel: b.company?.name ?? b.governmentInstitution ?? "—",
+    originLabel: yardLabel(b.originYard),
+    destinationLabel: yardLabel(b.destinationYard),
+    tradeDirection: b.tradeDirection ?? "—",
+    freightType: b.freightType ?? "—",
+    status: b.status,
+    phase: b.clearanceCurrentPhase ?? null,
+    roHoldReason: b.roHoldReason ?? null,
+    scheduledDate: b.scheduledDate ?? null,
+    weightTons: b.cargoTotalWeightVgm ?? 0,
+    isHazardous: Boolean(b.isHazardous),
+    action: djAction(b),
+  };
+}
+
+interface ContractRow {
+  id: string;
+  reference: string;
+  customerLabel: string;
+  originLabel: string;
+  destinationLabel: string;
+  tradeDirection: string;
+  freightType: string;
+  serviceTypeName: string;
+  customs: boolean;
+  status: string;
+  clearanceStatus: string;
+  phase: string | null;
+  cycleNumber: number;
+  validFrom: string | null;
+  validUntil: string | null;
+  validityDays: number | null;
+  estimatedShipmentDate: string | null;
+}
+
+function toContractRow(c: Freight.IContract): ContractRow {
+  const routes = [...(c.routes ?? [])].sort((a, b) => a.sortOrder - b.sortOrder);
+  const first = routes[0];
+  const last = routes[routes.length - 1] ?? first;
+  return {
+    id: c.id,
+    reference: c.reference,
+    customerLabel: c.isGovernment
+      ? (c.governmentInstitution ?? "Government")
+      : (c.company?.name ?? "—"),
+    originLabel: yardLabel(first?.originYard),
+    destinationLabel: yardLabel(last?.destinationYard),
+    tradeDirection: c.tradeDirection ?? "—",
+    freightType: c.freightType ?? "—",
+    serviceTypeName: c.serviceType?.serviceName ?? "—",
+    customs: c.serviceType?.includesCustoms ?? Boolean(c.customsClearingEnabled),
+    status: c.status,
+    clearanceStatus: c.clearanceStatus,
+    phase: (c.clearancePhase as string | null) ?? null,
+    cycleNumber: c.clearanceCycleNumber ?? 1,
+    validFrom: c.contractValidFrom ?? null,
+    validUntil: c.contractValidUntil ?? null,
+    validityDays: c.contractValidityDays ?? null,
+    estimatedShipmentDate: c.estimatedShipmentDate ?? null,
+  };
+}
+
+// ── Shared cell pieces ───────────────────────────────────────────────────────
+
+function DirectionIcon({ direction }: { direction: string }) {
+  const isImport = direction === "IMPORT";
+  const Icon = isImport ? Truck : ShipWheel;
+  const label = isImport ? "Import" : direction === "EXPORT" ? "Export" : "—";
+  return (
+    <Tooltip label={label} withArrow>
+      <ThemeIcon
+        variant="light"
+        color={isImport ? "edr-green" : "gray"}
+        radius="md"
+        size={26}
+        aria-label={label}
+      >
+        <Icon size={14} strokeWidth={1.9} />
+      </ThemeIcon>
+    </Tooltip>
+  );
+}
+
+function RouteCell({
+  origin,
+  destination,
+  direction,
+  freightType,
+}: {
+  origin: string;
+  destination: string;
+  direction: string;
+  freightType: string;
+}) {
+  return (
+    <Stack gap={4} py={2}>
+      <Group gap={6} wrap="nowrap">
+        <Text size="sm" fw={500} truncate maw={120}>
+          {origin}
+        </Text>
+        <ArrowRight size={14} className="shrink-0 text-muted-foreground" />
+        <Text size="sm" fw={500} truncate maw={120}>
+          {destination}
+        </Text>
+      </Group>
+      <Group gap={8} align="center">
+        <DirectionIcon direction={direction} />
+        <Badge size="xs" variant="default" radius="sm">
+          {freightType}
+        </Badge>
+      </Group>
+    </Stack>
+  );
+}
+
+// ── Page ─────────────────────────────────────────────────────────────────────
+
 /**
  * GL Djibouti clearance queues:
  * - Contracts: ONE_TIME customs contracts in phased clearance (legacy flow).
@@ -35,13 +297,443 @@ const prettyStatus = (s?: string | null) =>
 export default function GlDjiboutiClearanceListPage() {
   const navigate = useNavigate();
   const [tab, setTab] = useState<QueueTab>("shipments");
-  const { data: contractQueue, isLoading: contractsLoading } = useDjClearanceQueue();
-  const { data: bookingQueue, isLoading: bookingsLoading } =
-    useBookingDjClearanceQueue();
+  const [query, setQuery] = useState("");
+  const [direction, setDirection] = useState<string | null>(null);
+  const [freight, setFreight] = useState<string | null>(null);
+  const [status, setStatus] = useState<string | null>(null);
+  const [action, setAction] = useState<string | null>(null);
+  const { pagination, setPagination } = usePagination({ pageSize: 10 });
 
-  const contractItems = contractQueue?.items ?? [];
-  const bookingItems = bookingQueue ?? [];
+  const {
+    data: contractQueue,
+    isLoading: contractsLoading,
+    isError: contractsError,
+    isFetching: contractsFetching,
+    refetch: refetchContracts,
+  } = useDjClearanceQueue();
+  const {
+    data: bookingQueue,
+    isLoading: bookingsLoading,
+    isError: bookingsError,
+    isFetching: bookingsFetching,
+    refetch: refetchBookings,
+  } = useBookingDjClearanceQueue();
+
+  const resetPage = useCallback(
+    () => setPagination({ pageIndex: 0, pageSize: pagination.pageSize }),
+    [setPagination, pagination.pageSize],
+  );
+
+  const allShipmentRows = useMemo(
+    () => (bookingQueue ?? []).map(toShipmentRow),
+    [bookingQueue],
+  );
+  const allContractRows = useMemo(
+    () => (contractQueue?.items ?? []).map(toContractRow),
+    [contractQueue?.items],
+  );
+
+  // KPI metrics span both queues, regardless of active tab or filters.
+  const metrics = useMemo(
+    () => ({
+      shipments: allShipmentRows.length,
+      contracts: allContractRows.length,
+      collectDo: allShipmentRows.filter((r) => r.action.key === "COLLECT_DO")
+        .length,
+      issueRo: allShipmentRows.filter((r) => r.action.key === "ISSUE_RO").length,
+      roHolds: allShipmentRows.filter((r) => r.action.key === "RO_HOLD").length,
+    }),
+    [allShipmentRows, allContractRows],
+  );
+
+  const statusOptions = useMemo(() => {
+    const source =
+      tab === "shipments"
+        ? allShipmentRows.map((r) => r.status)
+        : allContractRows.map((r) => r.status);
+    return [...new Set(source)].sort().map((s) => ({
+      value: s,
+      label: prettyStatus(s),
+    }));
+  }, [tab, allShipmentRows, allContractRows]);
+
+  const matchesShared = useCallback(
+    (
+      r: {
+        reference: string;
+        customerLabel: string;
+        originLabel: string;
+        destinationLabel: string;
+        tradeDirection: string;
+        freightType: string;
+        status: string;
+      },
+      extraSearchFields: string[] = [],
+    ) => {
+      if (direction && r.tradeDirection !== direction) return false;
+      if (freight && r.freightType !== freight) return false;
+      if (status && r.status !== status) return false;
+      const q = query.trim().toLowerCase();
+      if (!q) return true;
+      return [
+        r.reference,
+        r.customerLabel,
+        r.originLabel,
+        r.destinationLabel,
+        prettyStatus(r.status),
+        ...extraSearchFields,
+      ].some((v) => v.toLowerCase().includes(q));
+    },
+    [direction, freight, status, query],
+  );
+
+  const shipmentRows = useMemo(
+    () =>
+      allShipmentRows.filter(
+        (r) =>
+          (!action || r.action.key === action) &&
+          // Shipments also match the parent contract reference in search.
+          matchesShared(r, [r.contractReference]),
+      ),
+    [allShipmentRows, action, matchesShared],
+  );
+
+  const contractRows = useMemo(
+    () => allContractRows.filter((r) => matchesShared(r)),
+    [allContractRows, matchesShared],
+  );
+
+  const rows = tab === "shipments" ? shipmentRows : contractRows;
   const isLoading = tab === "contracts" ? contractsLoading : bookingsLoading;
+  const isError = tab === "contracts" ? contractsError : bookingsError;
+  const isFetching = contractsFetching || bookingsFetching;
+  const total = rows.length;
+  const pageCount = Math.max(1, Math.ceil(total / pagination.pageSize));
+  const showEmpty = !isLoading && !isError && total === 0;
+
+  const pagedShipmentRows = useMemo(() => {
+    const start = pagination.pageIndex * pagination.pageSize;
+    return shipmentRows.slice(start, start + pagination.pageSize);
+  }, [shipmentRows, pagination.pageIndex, pagination.pageSize]);
+
+  const pagedContractRows = useMemo(() => {
+    const start = pagination.pageIndex * pagination.pageSize;
+    return contractRows.slice(start, start + pagination.pageSize);
+  }, [contractRows, pagination.pageIndex, pagination.pageSize]);
+
+  const hasFilters = Boolean(query || direction || freight || status || action);
+
+  const clearFilters = useCallback(() => {
+    setQuery("");
+    setDirection(null);
+    setFreight(null);
+    setStatus(null);
+    setAction(null);
+    resetPage();
+  }, [resetPage]);
+
+  const handleRefresh = useCallback(() => {
+    void refetchContracts();
+    void refetchBookings();
+  }, [refetchContracts, refetchBookings]);
+
+  const openDetail = useCallback(
+    (id: string) => navigate(`/dashboard/gl-djibouti/clearance/${id}`),
+    [navigate],
+  );
+
+  const shipmentColumns: ColumnDef<ShipmentRow>[] = useMemo(
+    () => [
+      {
+        id: "booking",
+        header: () => <span className={bookingTable.headerCell}>Booking</span>,
+        cell: ({ row }) => {
+          const r = row.original;
+          return (
+            <div className="flex items-center gap-3 py-1.5">
+              <div className={bookingTable.rowIcon}>
+                <PackageCheck className="size-4" strokeWidth={1.75} />
+              </div>
+              <div className="min-w-0">
+                <p className="truncate font-medium text-foreground">
+                  {r.reference}
+                </p>
+                <p className="mt-0.5 flex items-center gap-1 truncate text-xs text-muted-foreground">
+                  <User className="size-3 shrink-0 opacity-70" />
+                  {r.customerLabel}
+                </p>
+              </div>
+            </div>
+          );
+        },
+      },
+      {
+        id: "contract",
+        header: () => <span className={bookingTable.headerCell}>Contract</span>,
+        cell: ({ row }) => (
+          <Group gap={6} wrap="nowrap">
+            <FileText size={13} className="shrink-0 text-muted-foreground" />
+            <Text size="sm" truncate maw={140}>
+              {row.original.contractReference}
+            </Text>
+          </Group>
+        ),
+      },
+      {
+        id: "route",
+        header: () => <span className={bookingTable.headerCell}>Route</span>,
+        cell: ({ row }) => {
+          const r = row.original;
+          return (
+            <RouteCell
+              origin={r.originLabel}
+              destination={r.destinationLabel}
+              direction={r.tradeDirection}
+              freightType={r.freightType}
+            />
+          );
+        },
+      },
+      {
+        id: "cargo",
+        header: () => <span className={bookingTable.headerCell}>Cargo</span>,
+        cell: ({ row }) => {
+          const r = row.original;
+          return (
+            <Stack gap={4} py={2}>
+              <Group gap={6} wrap="nowrap">
+                <Weight size={13} className="shrink-0 text-muted-foreground" />
+                <Text size="sm">{r.weightTons} t</Text>
+              </Group>
+              {r.isHazardous ? (
+                <Badge
+                  size="xs"
+                  variant="light"
+                  color="red"
+                  radius="sm"
+                  leftSection={<AlertTriangle size={10} />}
+                >
+                  Hazardous
+                </Badge>
+              ) : null}
+            </Stack>
+          );
+        },
+      },
+      {
+        id: "action",
+        header: () => <span className={bookingTable.headerCell}>DJ action</span>,
+        cell: ({ row }) => {
+          const r = row.original;
+          const badge = (
+            <Badge size="sm" variant="light" color={r.action.color} radius="sm">
+              {r.action.label}
+            </Badge>
+          );
+          return (
+            <Stack gap={4} py={2}>
+              {r.roHoldReason ? (
+                <Tooltip label={r.roHoldReason} withArrow multiline maw={280}>
+                  {badge}
+                </Tooltip>
+              ) : (
+                badge
+              )}
+              <Text size="xs" c="dimmed">
+                {phaseLabel(r.phase)}
+              </Text>
+            </Stack>
+          );
+        },
+      },
+      {
+        id: "status",
+        header: () => <span className={bookingTable.headerCell}>Status</span>,
+        cell: ({ row }) => (
+          <Badge
+            size="sm"
+            variant="light"
+            color={statusColor(row.original.status)}
+            radius="sm"
+          >
+            {prettyStatus(row.original.status)}
+          </Badge>
+        ),
+      },
+      {
+        id: "scheduled",
+        header: () => <span className={bookingTable.headerCell}>Scheduled</span>,
+        cell: ({ row }) => (
+          <Group gap={6} wrap="nowrap">
+            <CalendarClock size={13} className="shrink-0 text-muted-foreground" />
+            <Text size="sm" c="dimmed">
+              {formatDate(row.original.scheduledDate)}
+            </Text>
+          </Group>
+        ),
+      },
+      {
+        id: "chevron",
+        size: 40,
+        header: "",
+        cell: () => (
+          <Group justify="flex-end" pr="xs">
+            <ChevronRight size={16} className="text-muted-foreground" />
+          </Group>
+        ),
+      },
+    ],
+    [],
+  );
+
+  const contractColumns: ColumnDef<ContractRow>[] = useMemo(
+    () => [
+      {
+        id: "contract",
+        header: () => <span className={bookingTable.headerCell}>Contract</span>,
+        cell: ({ row }) => {
+          const r = row.original;
+          return (
+            <div className="flex items-center gap-3 py-1.5">
+              <div className={bookingTable.rowIcon}>
+                <Ship className="size-4" strokeWidth={1.75} />
+              </div>
+              <div className="min-w-0">
+                <p className="truncate font-medium text-foreground">
+                  {r.reference}
+                </p>
+                <p className="mt-0.5 flex items-center gap-1 truncate text-xs text-muted-foreground">
+                  <User className="size-3 shrink-0 opacity-70" />
+                  {r.customerLabel}
+                </p>
+              </div>
+            </div>
+          );
+        },
+      },
+      {
+        id: "route",
+        header: () => <span className={bookingTable.headerCell}>Route</span>,
+        cell: ({ row }) => {
+          const r = row.original;
+          return (
+            <RouteCell
+              origin={r.originLabel}
+              destination={r.destinationLabel}
+              direction={r.tradeDirection}
+              freightType={r.freightType}
+            />
+          );
+        },
+      },
+      {
+        id: "service",
+        header: () => <span className={bookingTable.headerCell}>Service</span>,
+        cell: ({ row }) => {
+          const r = row.original;
+          return (
+            <Stack gap={4} py={2} style={{ minWidth: 0 }}>
+              <Text size="sm" fw={500} truncate maw={160}>
+                {r.serviceTypeName}
+              </Text>
+              {r.customs ? (
+                <Badge
+                  size="xs"
+                  variant="light"
+                  color="edr-green"
+                  radius="sm"
+                  leftSection={<ShieldCheck size={11} />}
+                >
+                  Customs
+                </Badge>
+              ) : (
+                <Badge size="xs" variant="light" color="gray" radius="sm">
+                  No customs
+                </Badge>
+              )}
+            </Stack>
+          );
+        },
+      },
+      {
+        id: "clearance",
+        header: () => <span className={bookingTable.headerCell}>Clearance</span>,
+        cell: ({ row }) => {
+          const r = row.original;
+          return (
+            <Stack gap={4} py={2}>
+              <Badge
+                size="sm"
+                variant="light"
+                color={statusColor(r.clearanceStatus)}
+                radius="sm"
+              >
+                {prettyStatus(r.clearanceStatus)}
+              </Badge>
+              <Text size="xs" c="dimmed">
+                {phaseLabel(r.phase)}
+                {r.cycleNumber > 1 ? ` · Cycle ${r.cycleNumber}` : ""}
+              </Text>
+            </Stack>
+          );
+        },
+      },
+      {
+        id: "status",
+        header: () => <span className={bookingTable.headerCell}>Status</span>,
+        cell: ({ row }) => (
+          <Badge
+            size="sm"
+            variant="light"
+            color={statusColor(row.original.status)}
+            radius="sm"
+          >
+            {prettyStatus(row.original.status)}
+          </Badge>
+        ),
+      },
+      {
+        id: "validity",
+        header: () => <span className={bookingTable.headerCell}>Validity</span>,
+        cell: ({ row }) => {
+          const r = row.original;
+          return (
+            <Stack gap={2} py={2}>
+              <Group gap={6} wrap="nowrap">
+                <CalendarClock
+                  size={13}
+                  className="shrink-0 text-muted-foreground"
+                />
+                <Text size="sm" c="dimmed">
+                  {r.validUntil
+                    ? `Until ${formatDate(r.validUntil)}`
+                    : r.validityDays
+                      ? `${r.validityDays} days`
+                      : "—"}
+                </Text>
+              </Group>
+              {r.estimatedShipmentDate ? (
+                <Text size="xs" c="dimmed">
+                  Est. shipment {formatDate(r.estimatedShipmentDate)}
+                </Text>
+              ) : null}
+            </Stack>
+          );
+        },
+      },
+      {
+        id: "chevron",
+        size: 40,
+        header: "",
+        cell: () => (
+          <Group justify="flex-end" pr="xs">
+            <ChevronRight size={16} className="text-muted-foreground" />
+          </Group>
+        ),
+      },
+    ],
+    [],
+  );
 
   return (
     <PageContainer>
@@ -49,123 +741,274 @@ export default function GlDjiboutiClearanceListPage() {
         <PageHeader
           title="GL Djibouti — Clearance"
           subtitle="Customs contracts and shipment bookings handed off to Djibouti GL."
+          action={
+            <ActionIcon
+              variant="default"
+              size="lg"
+              radius="md"
+              loading={isFetching}
+              onClick={handleRefresh}
+              aria-label="Refresh"
+            >
+              <RefreshCw size={16} />
+            </ActionIcon>
+          }
         />
 
-        <SegmentedControl
-          value={tab}
-          onChange={(v) => setTab(v as QueueTab)}
-          radius="md"
-          data={[
+        <KpiStrip
+          loading={contractsLoading || bookingsLoading}
+          items={[
             {
-              value: "shipments",
-              label: (
-                <Group gap={6} wrap="nowrap">
-                  <PackageCheck size={15} />
-                  <Box visibleFrom="sm">Shipments</Box>
-                  <Badge size="sm" radius="sm" variant="light" color="edr-green">
-                    {bookingItems.length}
-                  </Badge>
-                </Group>
-              ),
+              label: "Shipments in queue",
+              value: metrics.shipments,
+              icon: PackageCheck,
+              color: "blue",
             },
             {
-              value: "contracts",
-              label: (
-                <Group gap={6} wrap="nowrap">
-                  <FileSignature size={15} />
-                  <Box visibleFrom="sm">Contracts</Box>
-                  <Badge size="sm" radius="sm" variant="light" color="gray">
-                    {contractItems.length}
-                  </Badge>
-                </Group>
-              ),
+              label: "Contracts in queue",
+              value: metrics.contracts,
+              icon: FileSignature,
+              color: "edr-green",
+            },
+            {
+              label: "Imports — collect DO",
+              value: metrics.collectDo,
+              icon: Truck,
+              color: "yellow",
+            },
+            {
+              label: "Exports — issue RO",
+              value: metrics.issueRo,
+              icon: ShipWheel,
+              color: "blue",
+            },
+            {
+              label: "RO amendment holds",
+              value: metrics.roHolds,
+              icon: AlertTriangle,
+              color: "red",
             },
           ]}
         />
 
-        {isLoading ? (
-          <Group justify="center" py={60}>
-            <Loader color="edr-green" />
-          </Group>
-        ) : tab === "contracts" ? (
-          <Stack gap="sm">
-            {contractItems.length === 0 ? (
-              <Text c="dimmed" ta="center" py="xl">
-                No Djibouti customs contracts yet.
-              </Text>
+        <Card p={0} withBorder shadow="sm" radius="lg">
+          <Stack gap={0}>
+            <Box px="md" pt="md">
+              <SegmentedControl
+                size="sm"
+                value={tab}
+                onChange={(v) => {
+                  setTab(v as QueueTab);
+                  setStatus(null);
+                  setAction(null);
+                  resetPage();
+                }}
+                radius="md"
+                data={[
+                  {
+                    value: "shipments",
+                    label: (
+                      <Group gap={6} wrap="nowrap">
+                        <PackageCheck size={15} />
+                        <Box visibleFrom="sm">Shipments</Box>
+                        <Badge size="sm" radius="sm" variant="light" color="edr-green">
+                          {allShipmentRows.length}
+                        </Badge>
+                      </Group>
+                    ),
+                  },
+                  {
+                    value: "contracts",
+                    label: (
+                      <Group gap={6} wrap="nowrap">
+                        <FileSignature size={15} />
+                        <Box visibleFrom="sm">Contracts</Box>
+                        <Badge size="sm" radius="sm" variant="light" color="gray">
+                          {allContractRows.length}
+                        </Badge>
+                      </Group>
+                    ),
+                  },
+                ]}
+              />
+            </Box>
+
+            <Box px="md" pt="md" pb="sm">
+              <Group gap="sm" wrap="wrap">
+                <TextInput
+                  placeholder="Search reference, customer, route, or status…"
+                  leftSection={<Search size={18} />}
+                  value={query}
+                  onChange={(e) => {
+                    setQuery(e.currentTarget.value);
+                    resetPage();
+                  }}
+                  rightSection={
+                    query ? (
+                      <ActionIcon
+                        size="sm"
+                        color="gray"
+                        radius="md"
+                        variant="transparent"
+                        onClick={() => {
+                          setQuery("");
+                          resetPage();
+                        }}
+                      >
+                        <X size={16} />
+                      </ActionIcon>
+                    ) : null
+                  }
+                  radius="lg"
+                  style={{ flex: 1, minWidth: 220 }}
+                />
+                <Select
+                  placeholder="Direction"
+                  data={[
+                    { value: "IMPORT", label: "Import" },
+                    { value: "EXPORT", label: "Export" },
+                  ]}
+                  value={direction}
+                  onChange={(v) => {
+                    setDirection(v);
+                    resetPage();
+                  }}
+                  clearable
+                  radius="lg"
+                  w={130}
+                />
+                <Select
+                  placeholder="Freight"
+                  data={[
+                    { value: "CONTAINER", label: "Container" },
+                    { value: "BULK", label: "Bulk" },
+                  ]}
+                  value={freight}
+                  onChange={(v) => {
+                    setFreight(v);
+                    resetPage();
+                  }}
+                  clearable
+                  radius="lg"
+                  w={130}
+                />
+                <Select
+                  placeholder="Status"
+                  data={statusOptions}
+                  value={status}
+                  onChange={(v) => {
+                    setStatus(v);
+                    resetPage();
+                  }}
+                  clearable
+                  radius="lg"
+                  w={190}
+                />
+                {tab === "shipments" ? (
+                  <Select
+                    placeholder="DJ action"
+                    data={DJ_ACTION_OPTIONS}
+                    value={action}
+                    onChange={(v) => {
+                      setAction(v);
+                      resetPage();
+                    }}
+                    clearable
+                    radius="lg"
+                    w={180}
+                  />
+                ) : null}
+                {hasFilters ? (
+                  <Button
+                    variant="subtle"
+                    color="gray"
+                    size="compact-sm"
+                    radius="md"
+                    leftSection={<X size={14} />}
+                    onClick={clearFilters}
+                  >
+                    Clear
+                  </Button>
+                ) : null}
+                <Text size="sm" c="dimmed" ml="auto">
+                  {total} record{total !== 1 ? "s" : ""}
+                </Text>
+              </Group>
+            </Box>
+
+            {showEmpty ? (
+              <Stack align="center" gap={8} py={48}>
+                <ThemeIcon variant="light" color="gray" radius="xl" size={48}>
+                  <Inbox size={22} />
+                </ThemeIcon>
+                <Text c="dimmed">
+                  {hasFilters
+                    ? "No records match these filters."
+                    : tab === "contracts"
+                      ? "No Djibouti customs contracts yet."
+                      : "No shipment bookings awaiting a Djibouti action."}
+                </Text>
+                {hasFilters ? (
+                  <Button
+                    variant="light"
+                    color="gray"
+                    size="compact-sm"
+                    radius="md"
+                    onClick={clearFilters}
+                  >
+                    Clear filters
+                  </Button>
+                ) : null}
+              </Stack>
             ) : (
-              contractItems.map((c) => (
-                <Card
-                  key={c.id}
-                  withBorder
-                  radius="md"
-                  padding="md"
-                  style={{ cursor: "pointer" }}
-                  onClick={() => navigate(`/dashboard/gl-djibouti/clearance/${c.id}`)}
-                >
-                  <Group justify="space-between" wrap="nowrap">
-                    <Group gap="sm">
-                      <Ship size={18} className="text-[color:var(--freight-brand)]" />
-                      <div>
-                        <Text fw={700}>{c.reference}</Text>
-                        <Text size="sm" c="dimmed">
-                          {c.tradeDirection} · {prettyStatus(c.status)}
-                        </Text>
-                      </div>
-                    </Group>
-                    <Group gap="xs">
-                      <Badge variant="light" color="edr-green">
-                        Contract
-                      </Badge>
-                      <ChevronRight size={18} className="text-muted-foreground" />
-                    </Group>
-                  </Group>
-                </Card>
-              ))
+              <Box style={{ overflowX: "auto" }} px="xs" pb="xs">
+                {tab === "shipments" ? (
+                  <DataTable<ShipmentRow, unknown>
+                    columns={shipmentColumns}
+                    data={pagedShipmentRows}
+                    status={isLoading ? "loading" : isError ? "error" : "success"}
+                    onRowClick={(row) => openDetail(row.id)}
+                    pagination={{
+                      pageIndex: pagination.pageIndex,
+                      pageSize: pagination.pageSize,
+                      pageCount,
+                      totalCount: total,
+                    }}
+                    tableOptions={{
+                      state: { pagination },
+                      onPaginationChange: setPagination,
+                      manualPagination: true,
+                      pageCount,
+                    }}
+                    containerClassName="border-0 shadow-none bg-transparent"
+                    footer={DataTableFooter}
+                  />
+                ) : (
+                  <DataTable<ContractRow, unknown>
+                    columns={contractColumns}
+                    data={pagedContractRows}
+                    status={isLoading ? "loading" : isError ? "error" : "success"}
+                    onRowClick={(row) => openDetail(row.id)}
+                    pagination={{
+                      pageIndex: pagination.pageIndex,
+                      pageSize: pagination.pageSize,
+                      pageCount,
+                      totalCount: total,
+                    }}
+                    tableOptions={{
+                      state: { pagination },
+                      onPaginationChange: setPagination,
+                      manualPagination: true,
+                      pageCount,
+                    }}
+                    containerClassName="border-0 shadow-none bg-transparent"
+                    footer={DataTableFooter}
+                  />
+                )}
+              </Box>
             )}
           </Stack>
-        ) : (
-          <Stack gap="sm">
-            {bookingItems.length === 0 ? (
-              <Text c="dimmed" ta="center" py="xl">
-                No shipment bookings awaiting a Djibouti action.
-              </Text>
-            ) : (
-              bookingItems.map((b) => (
-                <Card
-                  key={b.id}
-                  withBorder
-                  radius="md"
-                  padding="md"
-                  style={{ cursor: "pointer" }}
-                  onClick={() => navigate(`/dashboard/gl-djibouti/clearance/${b.id}`)}
-                >
-                  <Group justify="space-between" wrap="nowrap">
-                    <Group gap="sm">
-                      <PackageCheck
-                        size={18}
-                        className="text-[color:var(--freight-brand)]"
-                      />
-                      <div>
-                        <Text fw={700}>{b.reference}</Text>
-                        <Text size="sm" c="dimmed">
-                          {b.tradeDirection} · {prettyStatus(b.status)}
-                          {b.company?.name ? ` · ${b.company.name}` : ""}
-                        </Text>
-                      </div>
-                    </Group>
-                    <Group gap="xs">
-                      <Badge variant="light" color="blue">
-                        Shipment
-                      </Badge>
-                      <ChevronRight size={18} className="text-muted-foreground" />
-                    </Group>
-                  </Group>
-                </Card>
-              ))
-            )}
-          </Stack>
-        )}
+        </Card>
       </Stack>
     </PageContainer>
   );
diff --git a/apps/edr-freight-web/backoffice/src/pages/contracts/ShipmentRequestsPage.tsx b/apps/edr-freight-web/backoffice/src/pages/contracts/ShipmentRequestsPage.tsx
index 812d68f0d..4eb93cafd 100644
--- a/apps/edr-freight-web/backoffice/src/pages/contracts/ShipmentRequestsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/contracts/ShipmentRequestsPage.tsx
@@ -6,14 +6,26 @@ import {
   Badge,
   Box,
   Button,
+  CloseButton,
   Group,
   Modal,
+  Paper,
+  SegmentedControl,
+  Select,
   Stack,
   Text,
   Textarea,
   TextInput,
 } from "@mantine/core";
-import { Inbox, PackageSearch, RefreshCw, Search } from "lucide-react";
+import { DateInput } from "@mantine/dates";
+import {
+  ArrowUpDown,
+  FilterX,
+  Inbox,
+  PackageSearch,
+  RefreshCw,
+  Search,
+} from "lucide-react";
 import { DataTable, type ColumnDef } from "@edr/ui-common";
 import type { Freight } from "@edr/types";
 
@@ -41,6 +53,17 @@ const fmtDate = (iso?: string | null) =>
       }).format(new Date(iso))
     : "—";
 
+const fmtDateTime = (iso?: string | null) =>
+  iso
+    ? new Intl.DateTimeFormat("en-GB", {
+        day: "2-digit",
+        month: "short",
+        year: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+      }).format(new Date(iso))
+    : "—";
+
 function summarizeLines(lines: Freight.RequestedShipmentLines): string {
   if (lines.containers?.length) {
     return lines.containers
@@ -56,10 +79,46 @@ function summarizeLines(lines: Freight.RequestedShipmentLines): string {
   return "—";
 }
 
+const STATUS_META: Record<
+  Freight.BookingRequestStatus,
+  { label: string; color: string }
+> = {
+  PENDING: { label: "Pending", color: "yellow" },
+  ACCEPTED: { label: "Accepted", color: "edr-green" },
+  REJECTED: { label: "Rejected", color: "red" },
+  CANCELLED: { label: "Cancelled", color: "gray" },
+};
+
+type StatusFilter = "ALL" | Freight.BookingRequestStatus;
+type CargoFilter = "ALL" | "CONTAINER" | "BULK";
+type SortKey =
+  | "submitted-desc"
+  | "submitted-asc"
+  | "preferred-asc"
+  | "preferred-desc"
+  | "reference";
+
+const SORT_OPTIONS: Array<{ value: SortKey; label: string }> = [
+  { value: "submitted-desc", label: "Newest first" },
+  { value: "submitted-asc", label: "Oldest first" },
+  { value: "preferred-asc", label: "Preferred date (soonest)" },
+  { value: "preferred-desc", label: "Preferred date (latest)" },
+  { value: "reference", label: "Reference A–Z" },
+];
+
+const time = (iso?: string | null) => (iso ? new Date(iso).getTime() : 0);
+
 export default function ShipmentRequestsPage() {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
+
   const [query, setQuery] = useState("");
+  const [status, setStatus] = useState<StatusFilter>("PENDING");
+  const [cargo, setCargo] = useState<CargoFilter>("ALL");
+  const [preferredFrom, setPreferredFrom] = useState<Date | null>(null);
+  const [preferredTo, setPreferredTo] = useState<Date | null>(null);
+  const [sort, setSort] = useState<SortKey>("submitted-desc");
+
   const [rejectTarget, setRejectTarget] = useState<ShipmentListRow | null>(null);
   const [rejectNote, setRejectNote] = useState("");
   const [acceptTarget, setAcceptTarget] = useState<ShipmentListRow | null>(null);
@@ -80,26 +139,132 @@ export default function ShipmentRequestsPage() {
     },
   });
 
+  const allRows = useMemo<ShipmentListRow[]>(
+    () =>
+      (data ?? []).map((r) => {
+        const lines = r.requestedLines ?? {};
+        return {
+          id: r.id,
+          reference: r.reference || r.id.slice(0, 8),
+          contractId: r.contractId,
+          contractReference: r.contract?.reference ?? r.contractId,
+          scheduledDate: r.scheduledDate,
+          summary: summarizeLines(lines),
+          status: r.status,
+          createdBookingId: r.createdBookingId,
+          createdAt: r.createdAt,
+          customerName: r.contract?.company?.name ?? null,
+          freightKind: lines.containers?.length
+            ? "CONTAINER"
+            : lines.bulk
+              ? "BULK"
+              : r.contract?.freightType === "BULK"
+                ? "BULK"
+                : "CONTAINER",
+          hazardous:
+            (lines.containers ?? []).some((c) => (c.hazardousQuantity ?? 0) > 0) ||
+            (lines.bulk?.hazardousQuantity ?? 0) > 0,
+          reefer: (lines.containers ?? []).some(
+            (c) => (c.reeferQuantity ?? 0) > 0,
+          ),
+        };
+      }),
+    [data],
+  );
+
+  // Status counts always reflect the whole queue so the segmented control
+  // reads as a live overview, independent of the other filters.
+  const counts = useMemo(() => {
+    const c: Record<StatusFilter, number> = {
+      ALL: allRows.length,
+      PENDING: 0,
+      ACCEPTED: 0,
+      REJECTED: 0,
+      CANCELLED: 0,
+    };
+    allRows.forEach((r) => {
+      c[r.status] += 1;
+    });
+    return c;
+  }, [allRows]);
+
   const rows = useMemo<ShipmentListRow[]>(() => {
-    const all = (data ?? []).map((r) => ({
-      id: r.id,
-      reference: r.reference || r.id.slice(0, 8),
-      contractId: r.contractId,
-      contractReference: r.contract?.reference ?? r.contractId,
-      scheduledDate: r.scheduledDate,
-      summary: summarizeLines(r.requestedLines ?? {}),
-      status: r.status,
-      createdBookingId: r.createdBookingId,
-    }));
+    let out = allRows;
+
+    if (status !== "ALL") out = out.filter((r) => r.status === status);
+    if (cargo !== "ALL") out = out.filter((r) => r.freightKind === cargo);
+
+    // Preferred-date range: rows without a preferred day drop out once a bound
+    // is set — a date filter that keeps dateless rows reads as broken.
+    if (preferredFrom || preferredTo) {
+      const from = preferredFrom ? preferredFrom.getTime() : -Infinity;
+      const to = preferredTo
+        ? preferredTo.getTime() + 24 * 60 * 60 * 1000 - 1
+        : Infinity;
+      out = out.filter((r) => {
+        if (!r.scheduledDate) return false;
+        const t = time(r.scheduledDate);
+        return t >= from && t <= to;
+      });
+    }
+
     const q = query.trim().toLowerCase();
-    if (!q) return all;
-    return all.filter(
-      (r) =>
-        r.reference.toLowerCase().includes(q) ||
-        r.contractReference.toLowerCase().includes(q) ||
-        r.summary.toLowerCase().includes(q),
-    );
-  }, [data, query]);
+    if (q) {
+      out = out.filter(
+        (r) =>
+          r.reference.toLowerCase().includes(q) ||
+          r.contractReference.toLowerCase().includes(q) ||
+          (r.customerName ?? "").toLowerCase().includes(q) ||
+          r.summary.toLowerCase().includes(q),
+      );
+    }
+
+    const sorted = [...out];
+    switch (sort) {
+      case "submitted-asc":
+        sorted.sort((a, b) => time(a.createdAt) - time(b.createdAt));
+        break;
+      case "preferred-asc":
+        // Requests without a preferred day sink to the bottom in both orders.
+        sorted.sort(
+          (a, b) =>
+            (a.scheduledDate ? time(a.scheduledDate) : Infinity) -
+            (b.scheduledDate ? time(b.scheduledDate) : Infinity),
+        );
+        break;
+      case "preferred-desc":
+        sorted.sort(
+          (a, b) =>
+            (b.scheduledDate ? time(b.scheduledDate) : -Infinity) -
+            (a.scheduledDate ? time(a.scheduledDate) : -Infinity),
+        );
+        break;
+      case "reference":
+        sorted.sort((a, b) => a.reference.localeCompare(b.reference));
+        break;
+      default:
+        // Newest submitted on top.
+        sorted.sort((a, b) => time(b.createdAt) - time(a.createdAt));
+    }
+    return sorted;
+  }, [allRows, status, cargo, preferredFrom, preferredTo, query, sort]);
+
+  const filtersActive =
+    query.trim() !== "" ||
+    status !== "PENDING" ||
+    cargo !== "ALL" ||
+    preferredFrom !== null ||
+    preferredTo !== null ||
+    sort !== "submitted-desc";
+
+  const clearFilters = () => {
+    setQuery("");
+    setStatus("PENDING");
+    setCargo("ALL");
+    setPreferredFrom(null);
+    setPreferredTo(null);
+    setSort("submitted-desc");
+  };
 
   const columns = useMemo<ColumnDef<ShipmentListRow>[]>(
     () => [
@@ -108,9 +273,14 @@ export default function ShipmentRequestsPage() {
         header: "Request",
         meta: cellMeta,
         cell: ({ row }) => (
-          <Text size="sm" fw={700} c="dark.5">
-            {row.original.reference}
-          </Text>
+          <Box>
+            <Text size="sm" fw={700} c="dark.5">
+              {row.original.reference}
+            </Text>
+            <Text size="xs" c="dimmed" mt={2}>
+              Submitted {fmtDateTime(row.original.createdAt)}
+            </Text>
+          </Box>
         ),
       },
       {
@@ -118,9 +288,16 @@ export default function ShipmentRequestsPage() {
         header: "Contract",
         meta: cellMeta,
         cell: ({ row }) => (
-          <Text size="sm" c="gray.7">
-            {row.original.contractReference}
-          </Text>
+          <Box>
+            <Text size="sm" c="gray.7">
+              {row.original.contractReference}
+            </Text>
+            {row.original.customerName ? (
+              <Text size="xs" c="dimmed" mt={2}>
+                {row.original.customerName}
+              </Text>
+            ) : null}
+          </Box>
         ),
       },
       {
@@ -128,9 +305,21 @@ export default function ShipmentRequestsPage() {
         header: "Requested",
         meta: cellMeta,
         cell: ({ row }) => (
-          <Badge variant="light" color="edr-green" radius="sm">
-            {row.original.summary}
-          </Badge>
+          <Group gap={6} wrap="wrap">
+            <Badge variant="light" color="edr-green" radius="sm">
+              {row.original.summary}
+            </Badge>
+            {row.original.hazardous ? (
+              <Badge variant="light" color="red" radius="sm">
+                Hazardous
+              </Badge>
+            ) : null}
+            {row.original.reefer ? (
+              <Badge variant="light" color="blue" radius="sm">
+                Reefer
+              </Badge>
+            ) : null}
+          </Group>
         ),
       },
       {
@@ -141,6 +330,19 @@ export default function ShipmentRequestsPage() {
           <Text size="sm">{fmtDate(row.original.scheduledDate)}</Text>
         ),
       },
+      {
+        id: "status",
+        header: "Status",
+        meta: cellMeta,
+        cell: ({ row }) => {
+          const meta = STATUS_META[row.original.status];
+          return (
+            <Badge variant="light" color={meta.color} radius="sm">
+              {meta.label}
+            </Badge>
+          );
+        },
+      },
       {
         id: "actions",
         header: () => <span className={ruleEngineTable.headerCell}>Action</span>,
@@ -193,12 +395,14 @@ export default function ShipmentRequestsPage() {
     [navigate],
   );
 
+  const hasAnyRequests = allRows.length > 0;
+
   return (
     <PageContainer>
       <Stack gap="lg">
         <PageHeader
           title="Shipment Requests"
-          subtitle="Customer requests to ship under general customs contracts. Accept one to create the booking and start its clearance."
+          subtitle="Customer requests to ship under general customs contracts. Each request starts its booking's clearance immediately — complete the booking from the clearance page once it is ready."
           meta={
             <Badge
               variant="light"
@@ -206,7 +410,7 @@ export default function ShipmentRequestsPage() {
               radius="sm"
               leftSection={<PackageSearch size={13} />}
             >
-              {rows.length} pending
+              {counts.PENDING} pending
             </Badge>
           }
           action={
@@ -223,16 +427,108 @@ export default function ShipmentRequestsPage() {
           }
         />
 
-        <TextInput
-          radius="md"
-          maw={360}
-          placeholder="Search request, contract, cargo…"
-          leftSection={<Search size={15} />}
-          value={query}
-          onChange={(e) => setQuery(e.currentTarget.value)}
-        />
+        <Paper withBorder radius="lg" p="md" style={{ borderColor: "#E6ECF2" }}>
+          <Stack gap="sm">
+            <Group gap="sm" wrap="wrap">
+              <TextInput
+                radius="md"
+                style={{ flex: 1, minWidth: 220 }}
+                placeholder="Search request, contract, customer, cargo…"
+                leftSection={<Search size={15} />}
+                rightSection={
+                  query ? (
+                    <CloseButton
+                      size="sm"
+                      aria-label="Clear search"
+                      onClick={() => setQuery("")}
+                    />
+                  ) : null
+                }
+                value={query}
+                onChange={(e) => setQuery(e.currentTarget.value)}
+              />
+              <Select
+                radius="md"
+                w={150}
+                value={cargo}
+                onChange={(v) => setCargo((v as CargoFilter) ?? "ALL")}
+                data={[
+                  { value: "ALL", label: "All cargo" },
+                  { value: "CONTAINER", label: "Containers" },
+                  { value: "BULK", label: "Bulk" },
+                ]}
+                allowDeselect={false}
+                aria-label="Cargo type"
+              />
+              <DateInput
+                radius="md"
+                w={150}
+                placeholder="Preferred from"
+                value={preferredFrom}
+                onChange={(v) => setPreferredFrom(v ? new Date(v) : null)}
+                maxDate={preferredTo ?? undefined}
+                clearable
+                aria-label="Preferred date from"
+              />
+              <DateInput
+                radius="md"
+                w={150}
+                placeholder="Preferred to"
+                value={preferredTo}
+                onChange={(v) => setPreferredTo(v ? new Date(v) : null)}
+                minDate={preferredFrom ?? undefined}
+                clearable
+                aria-label="Preferred date to"
+              />
+              <Select
+                radius="md"
+                w={215}
+                leftSection={<ArrowUpDown size={14} />}
+                value={sort}
+                onChange={(v) => setSort((v as SortKey) ?? "submitted-desc")}
+                data={SORT_OPTIONS}
+                allowDeselect={false}
+                aria-label="Sort by"
+              />
+            </Group>
 
-        {rows.length === 0 && !isLoading ? (
+            <Group justify="space-between" gap="sm" wrap="wrap">
+              <SegmentedControl
+                radius="md"
+                size="xs"
+                value={status}
+                onChange={(v) => setStatus(v as StatusFilter)}
+                data={[
+                  { value: "ALL", label: `All · ${counts.ALL}` },
+                  { value: "PENDING", label: `Pending · ${counts.PENDING}` },
+                  { value: "ACCEPTED", label: `Accepted · ${counts.ACCEPTED}` },
+                  { value: "REJECTED", label: `Rejected · ${counts.REJECTED}` },
+                  { value: "CANCELLED", label: `Cancelled · ${counts.CANCELLED}` },
+                ]}
+              />
+              <Group gap="sm">
+                <Text size="sm" c="dimmed">
+                  {rows.length} of {allRows.length} request
+                  {allRows.length === 1 ? "" : "s"}
+                </Text>
+                {filtersActive ? (
+                  <Button
+                    variant="subtle"
+                    color="gray"
+                    size="compact-sm"
+                    radius="md"
+                    leftSection={<FilterX size={14} />}
+                    onClick={clearFilters}
+                  >
+                    Clear filters
+                  </Button>
+                ) : null}
+              </Group>
+            </Group>
+          </Stack>
+        </Paper>
+
+        {rows.length === 0 && !isLoading && !isError ? (
           <Box
             py={56}
             style={{
@@ -242,9 +538,28 @@ export default function ShipmentRequestsPage() {
             }}
           >
             <Inbox size={26} className="text-muted-foreground" />
-            <Text c="dimmed" mt="sm">
-              No pending shipment requests.
-            </Text>
+            {hasAnyRequests ? (
+              <>
+                <Text c="dimmed" mt="sm">
+                  No requests match the current filters.
+                </Text>
+                <Button
+                  variant="subtle"
+                  color="gray"
+                  size="compact-sm"
+                  radius="md"
+                  mt="xs"
+                  leftSection={<FilterX size={14} />}
+                  onClick={clearFilters}
+                >
+                  Clear filters
+                </Button>
+              </>
+            ) : (
+              <Text c="dimmed" mt="sm">
+                No shipment requests yet.
+              </Text>
+            )}
           </Box>
         ) : (
           <DataTable
diff --git a/apps/edr-freight-web/backoffice/src/pages/customers/CustomerDetailPage.tsx b/apps/edr-freight-web/backoffice/src/pages/customers/CustomerDetailPage.tsx
index 317f915fb..dc682f1c7 100644
--- a/apps/edr-freight-web/backoffice/src/pages/customers/CustomerDetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/customers/CustomerDetailPage.tsx
@@ -7,6 +7,7 @@ import {
   Card,
   Center,
   Container,
+  Divider,
   Group,
   Loader,
   SimpleGrid,
@@ -90,6 +91,11 @@ function tableStatus(query: { isLoading: boolean; isError: boolean }) {
   return query.isLoading ? "loading" : query.isError ? "error" : "success";
 }
 
+/** Matches the fileKey seeded in the API's file-upload-settings seeder. */
+const POA_DELEGATION_CODE = "poa_delegation_letter";
+/** A letter uploaded by an approved customer, awaiting this reviewer's approval. */
+const POA_DELEGATION_PENDING_CODE = "poa_delegation_letter_pending";
+
 export default function CustomerDetailPage() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
@@ -531,6 +537,32 @@ export default function CustomerDetailPage() {
     (p) => p.licenseFiles && p.licenseFiles.length > 0,
   );
 
+  const poaDocuments = useMemo(
+    () =>
+      documents.filter(
+        (d) =>
+          d.code === POA_DELEGATION_CODE ||
+          d.code === POA_DELEGATION_PENDING_CODE,
+      ),
+    [documents],
+  );
+  const poaLive = poaDocuments.filter((d) => d.code === POA_DELEGATION_CODE);
+  const poaFields = [
+    { label: "PoA name", value: company?.poaName },
+    { label: "PoA email", value: company?.poaEmail },
+    { label: "PoA phone", value: company?.poaPhone },
+    { label: "PoA location", value: company?.poaLocation },
+    { label: "PoA address", value: company?.poaAddress },
+  ];
+  const hasPoaDetails = poaFields.some((f) => f.value?.trim());
+  // A freight forwarder acts on other companies' behalf, so its PoA — details
+  // and delegation letter both — is mandatory rather than optional.
+  const poaMandatory = (company?.companyProfiles ?? []).some(
+    (p) => p.type === "freight_forwarder",
+  );
+  const delegationMissing =
+    (hasPoaDetails || poaMandatory) && poaLive.length === 0;
+
   if (isLoading) {
     return (
       <Center mih="60vh">
@@ -672,6 +704,159 @@ export default function CustomerDetailPage() {
               </Stack>
             </Card>
 
+            <Card>
+              <Stack gap="lg">
+                <Group justify="space-between" wrap="nowrap">
+                  <Group gap="xs" wrap="nowrap">
+                    <Text fw={600} c="edr-text">
+                      Power of Attorney
+                    </Text>
+                    {poaMandatory && (
+                      <Badge size="xs" color="blue" variant="light">
+                        Required for freight forwarder
+                      </Badge>
+                    )}
+                  </Group>
+                  {delegationMissing ? (
+                    <Badge size="sm" color="red" variant="light">
+                      Delegation letter missing
+                    </Badge>
+                  ) : poaLive.length > 0 ? (
+                    <Badge size="sm" color="edr-green" variant="light">
+                      Delegation letter on file
+                    </Badge>
+                  ) : (
+                    <Badge size="sm" color="gray" variant="light">
+                      Not provided
+                    </Badge>
+                  )}
+                </Group>
+
+                {hasPoaDetails ? (
+                  <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="lg">
+                    {poaFields.map((f) => (
+                      <InfoField
+                        key={f.label}
+                        label={f.label}
+                        value={f.value}
+                      />
+                    ))}
+                  </SimpleGrid>
+                ) : (
+                  <Text size="sm" c="dimmed">
+                    No Power of Attorney representative recorded for this
+                    customer.
+                  </Text>
+                )}
+
+                <Divider />
+
+                <Stack gap="sm">
+                  <Text
+                    size="xs"
+                    fw={600}
+                    c="edr-muted"
+                    tt="uppercase"
+                    style={{ letterSpacing: "0.04em" }}
+                  >
+                    Delegation letter
+                  </Text>
+
+                  {documentsQuery.isLoading ? (
+                    <Group gap="xs">
+                      <Loader size="xs" />
+                      <Text size="sm" c="dimmed">
+                        Loading documents…
+                      </Text>
+                    </Group>
+                  ) : documentsQuery.isError ? (
+                    <Group gap="sm">
+                      <Text size="sm" c="red">
+                        Failed to load documents.
+                      </Text>
+                      <Anchor
+                        component="button"
+                        type="button"
+                        size="xs"
+                        onClick={() => void documentsQuery.refetch()}
+                      >
+                        Retry
+                      </Anchor>
+                    </Group>
+                  ) : poaDocuments.length === 0 ? (
+                    <Text size="sm" c="dimmed">
+                      No delegation letter uploaded.
+                    </Text>
+                  ) : (
+                    poaDocuments.map((doc) => (
+                      <Group key={doc.id} justify="space-between" wrap="nowrap">
+                        <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
+                          <Paperclip
+                            size={14}
+                            className="shrink-0 text-edr-muted"
+                          />
+                          <Anchor
+                            component="button"
+                            type="button"
+                            size="sm"
+                            lineClamp={1}
+                            onClick={() =>
+                              view({
+                                name: doc.name,
+                                url: fileViewUrl(doc.id),
+                                mimeType: doc.mimeType,
+                              })
+                            }
+                          >
+                            {doc.name}
+                          </Anchor>
+                          <Text size="xs" c="dimmed" className="shrink-0">
+                            {formatBytes(doc.size)} ·{" "}
+                            {formatDate(doc.uploadedAt)}
+                          </Text>
+                          {doc.code === POA_DELEGATION_PENDING_CODE && (
+                            <Badge
+                              size="xs"
+                              color="yellow"
+                              variant="light"
+                              className="shrink-0"
+                            >
+                              Pending approval
+                            </Badge>
+                          )}
+                        </Group>
+                        <Group gap={4} wrap="nowrap">
+                          <ActionIcon
+                            variant="subtle"
+                            color="gray"
+                            aria-label={`Preview ${doc.name}`}
+                            onClick={() =>
+                              view({
+                                name: doc.name,
+                                url: fileViewUrl(doc.id),
+                                mimeType: doc.mimeType,
+                              })
+                            }
+                          >
+                            <Eye size={16} />
+                          </ActionIcon>
+                          <ActionIcon
+                            component="a"
+                            href={fileViewUrl(doc.id, true)}
+                            variant="subtle"
+                            color="gray"
+                            aria-label={`Download ${doc.name}`}
+                          >
+                            <Download size={16} />
+                          </ActionIcon>
+                        </Group>
+                      </Group>
+                    ))
+                  )}
+                </Stack>
+              </Stack>
+            </Card>
+
             <Card>
               <Stack gap="md">
                 <Group justify="space-between">
diff --git a/apps/edr-freight-web/backoffice/src/pages/dashboard/demo/DemoUser1Page.tsx b/apps/edr-freight-web/backoffice/src/pages/dashboard/demo/DemoUser1Page.tsx
deleted file mode 100644
index e47cb95bd..000000000
--- a/apps/edr-freight-web/backoffice/src/pages/dashboard/demo/DemoUser1Page.tsx
+++ /dev/null
@@ -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;
diff --git a/apps/edr-freight-web/backoffice/src/pages/dashboard/demo/DemoUser2Page.tsx b/apps/edr-freight-web/backoffice/src/pages/dashboard/demo/DemoUser2Page.tsx
deleted file mode 100644
index 5ef7ad172..000000000
--- a/apps/edr-freight-web/backoffice/src/pages/dashboard/demo/DemoUser2Page.tsx
+++ /dev/null
@@ -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;
diff --git a/apps/edr-freight-web/backoffice/src/pages/dashboard/org-structure/OrgStructurePage.tsx b/apps/edr-freight-web/backoffice/src/pages/dashboard/org-structure/OrgStructurePage.tsx
deleted file mode 100644
index fdfc522af..000000000
--- a/apps/edr-freight-web/backoffice/src/pages/dashboard/org-structure/OrgStructurePage.tsx
+++ /dev/null
@@ -1,1604 +0,0 @@
-import { type ReactNode, useCallback, useEffect, useMemo, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@edr/ui-common";
-import {
-  Building2,
-  ChevronRight,
-  FolderTree,
-  Network,
-  Plus,
-  RefreshCw,
-  Save,
-  Search,
-  Trash2,
-  UserPlus,
-  Users,
-} from "lucide-react";
-
-import { api } from "@/auth/http";
-
-interface LocaleText {
-  en?: string;
-  am?: string;
-}
-
-interface OrganizationRecord {
-  id: string;
-  key: string;
-  name: LocaleText;
-}
-
-interface UnitRecord {
-  id: string;
-  key: string;
-  name: LocaleText;
-  parentUnitId?: string | null;
-}
-
-interface PositionRecord {
-  id: string;
-  key: string;
-  name: LocaleText;
-  parentPositionId?: string | null;
-  rank?: number;
-}
-
-interface EmployeeUserRecord {
-  id: string;
-  name?: LocaleText;
-  email?: 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 PositionTreeNode extends PositionRecord {
-  children: PositionTreeNode[];
-}
-
-interface PositionFormState {
-  id?: string;
-  nameEn: string;
-  nameAm: string;
-  key: string;
-  parentPositionId: string;
-}
-
-interface EmployeeInviteFormState {
-  nameEn: string;
-  nameAm: string;
-  email: string;
-  username: string;
-  phoneNumber: string;
-}
-
-interface ListResponse<T> {
-  count?: number;
-  items?: T[];
-  data?: T[];
-}
-
-const ORG_KEY = "edr_freight";
-const emptyInviteForm: EmployeeInviteFormState = {
-  nameEn: "",
-  nameAm: "",
-  email: "",
-  username: "",
-  phoneNumber: "",
-};
-const emptyPositionForm: PositionFormState = {
-  nameEn: "",
-  nameAm: "",
-  key: "",
-  parentPositionId: "",
-};
-
-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 toInternalKey = (value: string) =>
-  value
-    .trim()
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, "_")
-    .replace(/^_+|_+$/g, "")
-    .replace(/_+/g, "_");
-
-const buildTree = (positions: PositionRecord[]) => {
-  const nodes = new Map<string, PositionTreeNode>();
-
-  positions.forEach((position) => {
-    nodes.set(position.id, { ...position, children: [] });
-  });
-
-  const roots: PositionTreeNode[] = [];
-
-  nodes.forEach((node) => {
-    if (node.parentPositionId) {
-      const parent = nodes.get(node.parentPositionId);
-
-      if (parent) {
-        parent.children.push(node);
-        return;
-      }
-    }
-
-    roots.push(node);
-  });
-
-  const sortNodes = (items: PositionTreeNode[]) => {
-    items.sort((left, right) => {
-      const rankDiff = (left.rank ?? 0) - (right.rank ?? 0);
-      if (rankDiff !== 0) {
-        return rankDiff;
-      }
-
-      return getLocaleLabel(left.name, left.key).localeCompare(
-        getLocaleLabel(right.name, right.key),
-      );
-    });
-
-    items.forEach((item) => sortNodes(item.children));
-  };
-
-  sortNodes(roots);
-
-  return roots;
-};
-
-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 ReadOnlyField = ({ label, value }: { label: string; value: string }) => (
-  <div className="flex flex-col gap-2 text-sm">
-    <span className="font-medium text-foreground">{label}</span>
-    <div className="rounded-xl border border-border bg-muted px-3 py-2.5 text-sm text-card-foreground">
-      {value || "-"}
-    </div>
-  </div>
-);
-
-const TreeNode = ({
-  node,
-  depth = 0,
-  selectedPositionId,
-  onSelect,
-}: {
-  node: PositionTreeNode;
-  depth?: number;
-  selectedPositionId: string | null;
-  onSelect: (node: PositionRecord) => void;
-}) => {
-  const hasChildren = node.children.length > 0;
-  const isSelected = selectedPositionId === node.id;
-
-  return (
-    <li>
-      <button
-        type="button"
-        onClick={() => onSelect(node)}
-        className={`flex w-full items-center gap-2 rounded-xl border px-3 py-2 text-left text-sm shadow-sm transition ${
-          isSelected
-            ? "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"
-        }`}
-        style={{ marginLeft: depth * 14 }}
-      >
-        <span className="flex h-7 w-7 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600 dark:bg-emerald-950/40 dark:text-emerald-300">
-          {hasChildren ? <FolderTree className="h-4 w-4" /> : <Building2 className="h-4 w-4" />}
-        </span>
-        <div className="min-w-0 flex-1">
-          <div className="truncate font-medium">{getLocaleLabel(node.name, node.key)}</div>
-          <div className="truncate text-xs text-muted-foreground">{node.key}</div>
-        </div>
-        {hasChildren ? <ChevronRight className="h-4 w-4 text-muted-foreground" /> : null}
-      </button>
-
-      {hasChildren ? (
-        <ul className="mt-2 space-y-2">
-          {node.children.map((child) => (
-            <TreeNode
-              key={child.id}
-              node={child}
-              depth={depth + 1}
-              selectedPositionId={selectedPositionId}
-              onSelect={onSelect}
-            />
-          ))}
-        </ul>
-      ) : null}
-    </li>
-  );
-};
-
-const OrgStructurePage = () => {
-  const navigate = useNavigate();
-  const { unitId, section } = useParams();
-  const activeSection = section === "employees" ? "employees" : "positions";
-
-  const [organization, setOrganization] = useState<OrganizationRecord | null>(null);
-  const [units, setUnits] = useState<UnitRecord[]>([]);
-  const [positions, setPositions] = useState<PositionRecord[]>([]);
-  const [orgEmployees, setOrgEmployees] = useState<EmployeeRecord[]>([]);
-  const [positionMembers, setPositionMembers] = useState<EmployeeRecord[]>([]);
-  const [selectedPositionId, setSelectedPositionId] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [membersLoading, setMembersLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [actionError, setActionError] = useState<string | null>(null);
-  const [actionSuccess, setActionSuccess] = useState<string | null>(null);
-  const [unitSearch, setUnitSearch] = useState("");
-  const [isCreateUnitOpen, setIsCreateUnitOpen] = useState(false);
-  const [isCreatePositionOpen, setIsCreatePositionOpen] = useState(false);
-  const [isInviteEmployeeOpen, setIsInviteEmployeeOpen] = useState(false);
-  const [isUnitEditing, setIsUnitEditing] = useState(false);
-  const [isPositionEditing, setIsPositionEditing] = useState(false);
-  const [unitNameEn, setUnitNameEn] = useState("");
-  const [unitNameAm, setUnitNameAm] = useState("");
-  const [unitFormKey, setUnitFormKey] = useState("");
-  const [createPositionMode, setCreatePositionMode] = useState<"create-root" | "create-child">(
-    "create-root",
-  );
-  const [positionForm, setPositionForm] = useState<PositionFormState>(emptyPositionForm);
-  const [inviteForm, setInviteForm] = useState<EmployeeInviteFormState>(emptyInviteForm);
-  const [submitting, setSubmitting] = useState(false);
-
-  const selectedUnit = useMemo(
-    () => units.find((item) => item.id === unitId) ?? null,
-    [unitId, units],
-  );
-  const tree = useMemo(() => buildTree(positions), [positions]);
-  const selectedPosition = useMemo(
-    () => positions.find((item) => item.id === selectedPositionId) ?? null,
-    [positions, selectedPositionId],
-  );
-  const filteredUnits = useMemo(() => {
-    const query = unitSearch.trim().toLowerCase();
-    if (!query) {
-      return units;
-    }
-
-    return units.filter((item) => {
-      const label = getLocaleLabel(item.name, item.key).toLowerCase();
-      return label.includes(query) || item.key.toLowerCase().includes(query);
-    });
-  }, [unitSearch, units]);
-  const parentOptions = useMemo(
-    () => positions.filter((item) => item.id !== selectedPositionId),
-    [positions, selectedPositionId],
-  );
-  const selectedPositionParent = useMemo(
-    () => positions.find((item) => item.id === selectedPosition?.parentPositionId) ?? null,
-    [positions, selectedPosition],
-  );
-
-  const resetMessages = () => {
-    setActionError(null);
-    setActionSuccess(null);
-  };
-
-  const resetUnitForm = useCallback(() => {
-    setUnitNameEn("");
-    setUnitNameAm("");
-    setUnitFormKey("");
-  }, []);
-
-  const syncUnitFormFromSelectedUnit = useCallback((unit: UnitRecord | null) => {
-    setUnitNameEn(unit?.name.en ?? "");
-    setUnitNameAm(unit?.name.am ?? "");
-    setUnitFormKey(unit?.key ?? "");
-  }, []);
-
-  const syncPositionFormForCreate = useCallback(
-    (mode: "create-root" | "create-child") => {
-      setCreatePositionMode(mode);
-      setPositionForm({
-        ...emptyPositionForm,
-        parentPositionId: mode === "create-child" && selectedPosition ? selectedPosition.id : "",
-      });
-    },
-    [selectedPosition],
-  );
-
-  const syncPositionFormFromSelectedPosition = useCallback((position: PositionRecord | null) => {
-    if (!position) {
-      setPositionForm(emptyPositionForm);
-      return;
-    }
-
-    setPositionForm({
-      id: position.id,
-      nameEn: position.name.en ?? "",
-      nameAm: position.name.am ?? "",
-      key: position.key,
-      parentPositionId: position.parentPositionId ?? "",
-    });
-  }, []);
-
-  const loadData = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-
-    try {
-      const organizationsResponse = await api.get<ListResponse<OrganizationRecord>>("/organizations");
-      const organizations = getItems(organizationsResponse.data);
-      const currentOrganization = organizations.find((item) => item.key === ORG_KEY);
-
-      if (!currentOrganization) {
-        throw new Error("EDR Freight organization has not been seeded yet.");
-      }
-
-      const [unitsResponse, employeesResponse] = await Promise.all([
-        api.get<ListResponse<UnitRecord>>(`/units/list/${currentOrganization.id}`),
-        api.get<ListResponse<EmployeeRecord>>(`/employees/${currentOrganization.id}/by-organization`),
-      ]);
-
-      const currentUnits = getItems(unitsResponse.data);
-      let unitPositions: PositionRecord[] = [];
-
-      if (unitId) {
-        const targetUnit = currentUnits.find((item) => item.id === unitId);
-        if (targetUnit) {
-          const positionsResponse = await api.get<ListResponse<PositionRecord>>(
-            `/positions/list/${targetUnit.id}`,
-          );
-          unitPositions = getItems(positionsResponse.data);
-        }
-      }
-
-      setOrganization(currentOrganization);
-      setUnits(currentUnits);
-      setPositions(unitPositions);
-      setOrgEmployees(getItems(employeesResponse.data));
-    } catch (loadError) {
-      setError(
-        loadError instanceof Error
-          ? loadError.message
-          : "Failed to load organization structure.",
-      );
-      setOrganization(null);
-      setUnits([]);
-      setPositions([]);
-      setOrgEmployees([]);
-    } finally {
-      setLoading(false);
-    }
-  }, [unitId]);
-
-  const loadPositionMembers = useCallback(async (positionId: string | null) => {
-    if (!positionId) {
-      setPositionMembers([]);
-      return;
-    }
-
-    setMembersLoading(true);
-
-    try {
-      const response = await api.get<ListResponse<EmployeeRecord>>(
-        `/positions/current/${positionId}/employees`,
-      );
-      setPositionMembers(getItems(response.data));
-    } catch {
-      setPositionMembers([]);
-    } finally {
-      setMembersLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    void loadData();
-  }, [loadData]);
-
-  useEffect(() => {
-    if (!selectedUnit) {
-      resetUnitForm();
-      setSelectedPositionId(null);
-      setIsUnitEditing(false);
-      setIsPositionEditing(false);
-      setIsCreateUnitOpen(false);
-      setIsCreatePositionOpen(false);
-      setIsInviteEmployeeOpen(false);
-      return;
-    }
-
-    syncUnitFormFromSelectedUnit(selectedUnit);
-    setIsUnitEditing(false);
-    setIsPositionEditing(false);
-    setIsCreatePositionOpen(false);
-    setIsInviteEmployeeOpen(false);
-  }, [resetUnitForm, selectedUnit, syncUnitFormFromSelectedUnit]);
-
-  useEffect(() => {
-    if (!positions.length) {
-      setSelectedPositionId(null);
-      setPositionMembers([]);
-      setIsPositionEditing(false);
-      return;
-    }
-
-    if (selectedPositionId && positions.some((item) => item.id === selectedPositionId)) {
-      return;
-    }
-
-    setSelectedPositionId(positions[0].id);
-  }, [positions, selectedPositionId]);
-
-  useEffect(() => {
-    if (!selectedPosition) {
-      setIsPositionEditing(false);
-      setIsInviteEmployeeOpen(false);
-      setPositionForm(emptyPositionForm);
-      setPositionMembers([]);
-      return;
-    }
-
-    setIsPositionEditing(false);
-    syncPositionFormFromSelectedPosition(selectedPosition);
-    void loadPositionMembers(selectedPosition.id);
-  }, [loadPositionMembers, selectedPosition, syncPositionFormFromSelectedPosition]);
-
-  const goToUnit = (nextUnitId: string, nextSection = activeSection) => {
-    navigate(`/dashboard/org-structure/units/${nextUnitId}/${nextSection}`);
-  };
-
-  const handleRefresh = async () => {
-    resetMessages();
-    await loadData();
-  };
-
-  const handleCreateUnit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    if (!organization) {
-      return;
-    }
-
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      await api.post("/units", {
-        name: { am: unitNameAm.trim(), en: unitNameEn.trim() },
-        key: unitFormKey.trim(),
-        organizationId: organization.id,
-      });
-
-      resetUnitForm();
-      setActionSuccess("Unit created.");
-      setIsCreateUnitOpen(false);
-      await loadData();
-    } catch (saveError) {
-      setActionError(saveError instanceof Error ? saveError.message : "Failed to create unit.");
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleUpdateUnit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    if (!organization || !selectedUnit) {
-      return;
-    }
-
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      await api.put(`/units/${selectedUnit.id}`, {
-        name: { am: unitNameAm.trim(), en: unitNameEn.trim() },
-        key: unitFormKey.trim(),
-        organizationId: organization.id,
-      });
-
-      setActionSuccess("Unit updated.");
-      setIsUnitEditing(false);
-      await loadData();
-    } catch (saveError) {
-      setActionError(saveError instanceof Error ? saveError.message : "Failed to update unit.");
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleDeleteUnit = async () => {
-    if (!selectedUnit || !window.confirm(`Delete unit '${getLocaleLabel(selectedUnit.name, selectedUnit.key)}'?`)) {
-      return;
-    }
-
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      await api.delete(`/units/${selectedUnit.id}`);
-      setActionSuccess("Unit deleted.");
-      setSelectedPositionId(null);
-      navigate("/dashboard/org-structure");
-      await loadData();
-    } catch (deleteError) {
-      setActionError(deleteError instanceof Error ? deleteError.message : "Failed to delete unit.");
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleSavePosition = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    if (!organization || !selectedUnit) {
-      setActionError("Select a unit before managing positions.");
-      return;
-    }
-
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      const payload = {
-        id: positionForm.id,
-        name: { am: positionForm.nameAm.trim(), en: positionForm.nameEn.trim() },
-        key: positionForm.key.trim(),
-        unitId: selectedUnit.id,
-        organizationId: organization.id,
-        parentPositionId: positionForm.parentPositionId || null,
-        rank: 0,
-      };
-
-      if (isPositionEditing && positionForm.id) {
-        const existing = positions.find((item) => item.id === positionForm.id);
-        await api.put(`/positions/${positionForm.id}`, payload);
-
-        if ((existing?.parentPositionId ?? "") !== (positionForm.parentPositionId || "")) {
-          await api.patch("/positions/change-parent", {
-            positionId: positionForm.id,
-            newParentId: positionForm.parentPositionId || null,
-          });
-        }
-
-        setActionSuccess("Position updated.");
-        setIsPositionEditing(false);
-      } else {
-        await api.post("/positions", payload);
-        setActionSuccess("Position created.");
-        syncPositionFormForCreate(createPositionMode);
-        setIsCreatePositionOpen(false);
-      }
-
-      await loadData();
-    } catch (saveError) {
-      setActionError(
-        saveError instanceof Error ? saveError.message : "Failed to save position.",
-      );
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleDeletePosition = async () => {
-    if (!selectedPosition) {
-      return;
-    }
-
-    if (!window.confirm(`Delete position '${getLocaleLabel(selectedPosition.name, selectedPosition.key)}'?`)) {
-      return;
-    }
-
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      await api.delete(`/positions/${selectedPosition.id}`);
-      setActionSuccess("Position deleted.");
-      await loadData();
-    } catch (deleteError) {
-      setActionError(
-        deleteError instanceof Error ? deleteError.message : "Failed to delete position.",
-      );
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleInviteEmployee = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    if (!selectedPosition) {
-      setActionError("Select a position before inviting an employee.");
-      return;
-    }
-
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      await api.post("/employee-positions/invite", {
-        positionId: selectedPosition.id,
-        username: inviteForm.username.trim(),
-        phoneNumber: inviteForm.phoneNumber.trim(),
-        email: inviteForm.email.trim(),
-        name: { am: inviteForm.nameAm.trim(), en: inviteForm.nameEn.trim() },
-      });
-
-      setInviteForm(emptyInviteForm);
-      setActionSuccess("Employee invited and assigned to the selected position.");
-      setIsInviteEmployeeOpen(false);
-      await Promise.all([loadData(), loadPositionMembers(selectedPosition.id)]);
-    } catch (inviteError) {
-      setActionError(
-        inviteError instanceof Error ? inviteError.message : "Failed to invite employee.",
-      );
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const positionMemberNames = positionMembers.map((item) => ({
-    id: item.id,
-    name: getLocaleLabel(item.name ?? item.user?.name, item.user?.email ?? item.id),
-    email: item.user?.email,
-  }));
-
-  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">
-                Org structure
-              </p>
-              <h1 className="text-2xl font-semibold text-foreground">Organization management</h1>
-              <p className="max-w-3xl text-sm text-muted-foreground">
-                Manage units, department positions, and employee onboarding for EDR Freight from a
-                single workspace.
-              </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}
-
-      {loading ? (
-        <div className="rounded-3xl border border-border bg-card p-6 text-sm text-muted-foreground shadow-sm">
-          Loading organization structure...
-        </div>
-      ) : null}
-
-      {!loading && error ? (
-        <div className="rounded-3xl border border-rose-200 bg-rose-50 p-6 text-sm text-rose-700 shadow-sm dark:border-rose-900/60 dark:bg-rose-950/40 dark:text-rose-200">
-          {error}
-        </div>
-      ) : null}
-
-      {!loading && !error ? (
-        <div className="grid gap-6 xl:grid-cols-[340px_minmax(0,1fr)]">
-          <aside className="rounded-3xl border border-border bg-card p-5 shadow-sm">
-            <div className="mb-5 flex items-center justify-between gap-3">
-              <div>
-                <h2 className="text-lg font-semibold text-card-foreground">Units</h2>
-                <p className="text-sm text-muted-foreground">
-                  {organization ? getLocaleLabel(organization.name, organization.key) : ORG_KEY}
-                </p>
-              </div>
-              <button
-                type="button"
-                onClick={() => {
-                  resetUnitForm();
-                  resetMessages();
-                  setIsCreateUnitOpen(true);
-                }}
-                className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}
-              >
-                <Plus className="h-4 w-4" />
-                Add
-              </button>
-            </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={unitSearch}
-                onChange={(event) => setUnitSearch(event.target.value)}
-                placeholder="Search units"
-              />
-            </div>
-
-            {filteredUnits.length ? (
-              <ul className="space-y-2">
-                {filteredUnits.map((item) => {
-                  const isActive = selectedUnit?.id === item.id;
-
-                  return (
-                    <li key={item.id}>
-                      <button
-                        type="button"
-                        onClick={() => goToUnit(item.id)}
-                        className={`flex w-full items-center justify-between 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"
-                        }`}
-                      >
-                        <div className="min-w-0">
-                          <div className="truncate font-medium">{getLocaleLabel(item.name, item.key)}</div>
-                          <div className="truncate text-xs text-muted-foreground">{item.key}</div>
-                        </div>
-                        <ChevronRight className="h-4 w-4 text-muted-foreground" />
-                      </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 units found.
-              </div>
-            )}
-          </aside>
-
-          <div className="space-y-6">
-            {selectedUnit ? (
-              <>
-                <section className="rounded-3xl border border-border bg-card p-6 shadow-sm">
-                  <div className="mb-5 flex flex-wrap items-center justify-between gap-3">
-                    <div>
-                      <h2 className="text-xl font-semibold text-card-foreground">
-                        {getLocaleLabel(selectedUnit.name, selectedUnit.key)}
-                      </h2>
-                      <p className="text-sm text-muted-foreground">{selectedUnit.key}</p>
-                    </div>
-                    <div className="flex gap-2">
-                      <button
-                        type="button"
-                        disabled={submitting}
-                        onClick={() => {
-                          resetMessages();
-                          syncUnitFormFromSelectedUnit(selectedUnit);
-                          setIsUnitEditing(true);
-                        }}
-                        className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                      >
-                        Edit
-                      </button>
-                      <button
-                        type="button"
-                        disabled={submitting}
-                        onClick={() => void handleDeleteUnit()}
-                        className={`${buttonClassName} border border-rose-300 bg-card text-rose-700 hover:bg-rose-50 dark:border-rose-900 dark:text-rose-300 dark:hover:bg-rose-950/30`}
-                      >
-                        <Trash2 className="h-4 w-4" />
-                        Delete unit
-                      </button>
-                    </div>
-                  </div>
-
-                  {isUnitEditing ? (
-                    <form className="grid gap-4 md:grid-cols-2" onSubmit={handleUpdateUnit}>
-                      <Field label="Unit name (EN)">
-                        <input
-                          className={inputClassName}
-                          value={unitNameEn}
-                          onChange={(event) => setUnitNameEn(event.target.value)}
-                          required
-                        />
-                      </Field>
-                      <Field label="Unit name (AM)">
-                        <input
-                          className={inputClassName}
-                          value={unitNameAm}
-                          onChange={(event) => setUnitNameAm(event.target.value)}
-                          required
-                        />
-                      </Field>
-                      <Field label="Unit key">
-                        <div className="flex gap-2">
-                          <input
-                            className={inputClassName}
-                            value={unitFormKey}
-                            onChange={(event) => setUnitFormKey(event.target.value)}
-                            required
-                          />
-                          <button
-                            type="button"
-                            onClick={() => setUnitFormKey(toInternalKey(unitNameEn))}
-                            className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                          >
-                            Key
-                          </button>
-                        </div>
-                      </Field>
-                      <div className="md:col-span-2 flex flex-wrap gap-3">
-                        <button
-                          type="submit"
-                          disabled={submitting || !unitNameEn.trim() || !unitNameAm.trim() || !unitFormKey.trim()}
-                          className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}
-                        >
-                          <Save className="h-4 w-4" />
-                          Save unit
-                        </button>
-                        <button
-                          type="button"
-                          disabled={submitting}
-                          onClick={() => {
-                            syncUnitFormFromSelectedUnit(selectedUnit);
-                            setIsUnitEditing(false);
-                          }}
-                          className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                        >
-                          Cancel
-                        </button>
-                      </div>
-                    </form>
-                  ) : (
-                    <div className="grid gap-4 md:grid-cols-2">
-                      <ReadOnlyField
-                        label="Unit name (EN)"
-                        value={selectedUnit.name.en ?? getLocaleLabel(selectedUnit.name, selectedUnit.key)}
-                      />
-                      <ReadOnlyField label="Unit name (AM)" value={selectedUnit.name.am ?? ""} />
-                      <ReadOnlyField label="Unit key" value={selectedUnit.key} />
-                    </div>
-                  )}
-                </section>
-
-                <section className="rounded-3xl border border-border bg-card p-6 shadow-sm">
-                  <div className="mb-5 flex flex-wrap items-center justify-between gap-3 border-b border-border pb-4">
-                    <div className="flex gap-2">
-                      <button
-                        type="button"
-                        onClick={() => goToUnit(selectedUnit.id, "positions")}
-                        className={`${buttonClassName} ${
-                          activeSection === "positions"
-                            ? "bg-emerald-600 text-white hover:bg-emerald-700"
-                            : "border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground"
-                        }`}
-                      >
-                        <Building2 className="h-4 w-4" />
-                        Positions
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => goToUnit(selectedUnit.id, "employees")}
-                        className={`${buttonClassName} ${
-                          activeSection === "employees"
-                            ? "bg-emerald-600 text-white hover:bg-emerald-700"
-                            : "border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground"
-                        }`}
-                      >
-                        <Users className="h-4 w-4" />
-                        Employees
-                      </button>
-                    </div>
-                  </div>
-
-                  {activeSection === "positions" ? (
-                    <div className="grid gap-6 xl:grid-cols-[minmax(0,1.1fr)_360px]">
-                      <div>
-                        <div className="mb-4 flex flex-wrap gap-2">
-                          <button
-                            type="button"
-                            disabled={submitting}
-                            onClick={() => {
-                              resetMessages();
-                              syncPositionFormForCreate("create-root");
-                              setIsCreatePositionOpen(true);
-                            }}
-                            className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                          >
-                            <Plus className="h-4 w-4" />
-                            Add root
-                          </button>
-                          <button
-                            type="button"
-                            disabled={submitting || !selectedPosition}
-                            onClick={() => {
-                              resetMessages();
-                              syncPositionFormForCreate("create-child");
-                              setIsCreatePositionOpen(true);
-                            }}
-                            className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                          >
-                            <Plus className="h-4 w-4" />
-                            Add child
-                          </button>
-                        </div>
-
-                        {tree.length ? (
-                          <ul className="space-y-3">
-                            {tree.map((node) => (
-                              <TreeNode
-                                key={node.id}
-                                node={node}
-                                selectedPositionId={selectedPositionId}
-                                onSelect={(position) => {
-                                  resetMessages();
-                                  setSelectedPositionId(position.id);
-                                }}
-                              />
-                            ))}
-                          </ul>
-                        ) : (
-                          <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
-                            No positions yet. Create the first root position for this unit.
-                          </div>
-                        )}
-                      </div>
-
-                      <div className="space-y-4">
-                        <div className="rounded-2xl border border-border bg-muted p-4">
-                          <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
-                            <div>
-                              <div className="text-sm font-medium text-foreground">Position details</div>
-                              <div className="text-sm text-muted-foreground">
-                                {selectedPosition
-                                  ? "View a selected position and edit it only when needed."
-                                  : "Select a position from the tree to inspect its details."}
-                              </div>
-                            </div>
-                            {selectedPosition ? (
-                              <div className="flex flex-wrap gap-2">
-                                <button
-                                  type="button"
-                                  disabled={submitting}
-                                  onClick={() => {
-                                    resetMessages();
-                                    syncPositionFormFromSelectedPosition(selectedPosition);
-                                    setIsPositionEditing(true);
-                                  }}
-                                  className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                                >
-                                  Edit
-                                </button>
-                                <button
-                                  type="button"
-                                  disabled={submitting}
-                                  onClick={() => void handleDeletePosition()}
-                                  className={`${buttonClassName} border border-rose-300 bg-card text-rose-700 hover:bg-rose-50 dark:border-rose-900 dark:text-rose-300 dark:hover:bg-rose-950/30`}
-                                >
-                                  <Trash2 className="h-4 w-4" />
-                                  Delete selected
-                                </button>
-                              </div>
-                            ) : null}
-                          </div>
-
-                          {selectedPosition ? (
-                            isPositionEditing ? (
-                              <form className="space-y-4" onSubmit={handleSavePosition}>
-                                <Field label="Position name (EN)">
-                                  <input
-                                    className={inputClassName}
-                                    value={positionForm.nameEn}
-                                    onChange={(event) =>
-                                      setPositionForm((current) => ({ ...current, nameEn: event.target.value }))
-                                    }
-                                    placeholder="Dispatch"
-                                    required
-                                  />
-                                </Field>
-                                <Field label="Position name (AM)">
-                                  <input
-                                    className={inputClassName}
-                                    value={positionForm.nameAm}
-                                    onChange={(event) =>
-                                      setPositionForm((current) => ({ ...current, nameAm: event.target.value }))
-                                    }
-                                    placeholder="ዲስፓች"
-                                    required
-                                  />
-                                </Field>
-                                <Field label="Position key">
-                                  <div className="flex gap-2">
-                                    <input
-                                      className={inputClassName}
-                                      value={positionForm.key}
-                                      onChange={(event) =>
-                                        setPositionForm((current) => ({ ...current, key: event.target.value }))
-                                      }
-                                      placeholder="dispatch"
-                                      required
-                                    />
-                                    <button
-                                      type="button"
-                                      onClick={() =>
-                                        setPositionForm((current) => ({
-                                          ...current,
-                                          key: toInternalKey(current.nameEn),
-                                        }))
-                                      }
-                                      className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                                    >
-                                      Key
-                                    </button>
-                                  </div>
-                                </Field>
-                                <Field label="Parent position">
-                                  <select
-                                    className={inputClassName}
-                                    value={positionForm.parentPositionId}
-                                    onChange={(event) =>
-                                      setPositionForm((current) => ({
-                                        ...current,
-                                        parentPositionId: event.target.value,
-                                      }))
-                                    }
-                                  >
-                                    <option value="">No parent (root position)</option>
-                                    {parentOptions.map((item) => (
-                                      <option key={item.id} value={item.id}>
-                                        {getLocaleLabel(item.name, item.key)}
-                                      </option>
-                                    ))}
-                                  </select>
-                                </Field>
-                                <div className="flex flex-wrap gap-3">
-                                  <button
-                                    type="submit"
-                                    disabled={
-                                      submitting ||
-                                      !positionForm.nameEn.trim() ||
-                                      !positionForm.nameAm.trim() ||
-                                      !positionForm.key.trim()
-                                    }
-                                    className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}
-                                  >
-                                    <Save className="h-4 w-4" />
-                                    Save position
-                                  </button>
-                                  <button
-                                    type="button"
-                                    disabled={submitting}
-                                    onClick={() => {
-                                      syncPositionFormFromSelectedPosition(selectedPosition);
-                                      setIsPositionEditing(false);
-                                    }}
-                                    className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                                  >
-                                    Cancel
-                                  </button>
-                                </div>
-                              </form>
-                            ) : (
-                              <div className="grid gap-4">
-                                <ReadOnlyField
-                                  label="Position name (EN)"
-                                  value={selectedPosition.name.en ?? getLocaleLabel(selectedPosition.name, selectedPosition.key)}
-                                />
-                                <ReadOnlyField label="Position name (AM)" value={selectedPosition.name.am ?? ""} />
-                                <ReadOnlyField label="Position key" value={selectedPosition.key} />
-                                <ReadOnlyField
-                                  label="Parent position"
-                                  value={selectedPositionParent
-                                    ? getLocaleLabel(
-                                        selectedPositionParent.name,
-                                        selectedPositionParent.key,
-                                      )
-                                    : "No parent (root position)"}
-                                />
-                              </div>
-                            )
-                          ) : (
-                            <div className="rounded-2xl border border-dashed border-border bg-card px-4 py-8 text-center text-sm text-muted-foreground">
-                              Select a position from the tree to view its details.
-                            </div>
-                          )}
-                        </div>
-                      </div>
-                    </div>
-                  ) : (
-                    <div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_360px]">
-                      <div className="space-y-6">
-                        <section className="rounded-2xl border border-border bg-muted p-4">
-                          <div className="mb-3 flex flex-wrap items-center justify-between gap-3">
-                            <div className="flex items-center gap-2">
-                              <UserPlus className="h-5 w-5 text-emerald-600 dark:text-emerald-300" />
-                              <h3 className="text-base font-semibold text-card-foreground">
-                                Invite employee
-                              </h3>
-                            </div>
-                            <button
-                              type="button"
-                              disabled={submitting || !selectedPosition}
-                              onClick={() => {
-                                resetMessages();
-                                setInviteForm(emptyInviteForm);
-                                setIsInviteEmployeeOpen(true);
-                              }}
-                              className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}
-                            >
-                              <UserPlus className="h-4 w-4" />
-                              Invite employee
-                            </button>
-                          </div>
-                          {selectedPosition ? (
-                            <div className="space-y-3 text-sm text-muted-foreground">
-                              <p>
-                                New users are created during onboarding and assigned directly to the selected position.
-                              </p>
-                              <ReadOnlyField
-                                label="Target position"
-                                value={getLocaleLabel(selectedPosition.name, selectedPosition.key)}
-                              />
-                            </div>
-                          ) : (
-                            <p className="text-sm text-muted-foreground">
-                              Select a position from the tree first, then onboard employees into it.
-                            </p>
-                          )}
-                        </section>
-
-                        <section>
-                          <h3 className="mb-3 text-base font-semibold text-card-foreground">
-                            Organization employees
-                          </h3>
-                          {orgEmployees.length ? (
-                            <ul className="space-y-3">
-                              {orgEmployees.map((employee) => (
-                                <li
-                                  key={employee.id}
-                                  className="rounded-2xl border border-border bg-muted px-4 py-3"
-                                >
-                                  <div className="font-medium text-card-foreground">
-                                    {getLocaleLabel(employee.name ?? employee.user?.name, employee.id)}
-                                  </div>
-                                  <div className="text-sm text-muted-foreground">
-                                    {employee.user?.email ?? employee.user?.username ?? "No login details"}
-                                  </div>
-                                  {employee.employeePositions?.length ? (
-                                    <div className="mt-2 text-xs text-muted-foreground">
-                                      {employee.employeePositions
-                                        .map((item) => getLocaleLabel(item.position?.name, item.id))
-                                        .join(", ")}
-                                    </div>
-                                  ) : null}
-                                </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 employees have been onboarded yet.
-                            </div>
-                          )}
-                        </section>
-                      </div>
-
-                      <aside className="space-y-6">
-                        <section className="rounded-2xl border border-border bg-muted p-4">
-                          <h3 className="text-base font-semibold text-card-foreground">
-                            Position picker
-                          </h3>
-                          <p className="mt-1 text-sm text-muted-foreground">
-                            Employees are invited into a position inside the selected unit.
-                          </p>
-                          {tree.length ? (
-                            <ul className="mt-4 space-y-3">
-                              {tree.map((node) => (
-                                <TreeNode
-                                  key={node.id}
-                                  node={node}
-                                  selectedPositionId={selectedPositionId}
-                                  onSelect={(position) => setSelectedPositionId(position.id)}
-                                />
-                              ))}
-                            </ul>
-                          ) : (
-                            <p className="mt-4 text-sm text-muted-foreground">
-                              Add positions first before onboarding employees.
-                            </p>
-                          )}
-                        </section>
-
-                        <section className="rounded-2xl border border-border bg-muted p-4">
-                          <h3 className="text-base font-semibold text-card-foreground">
-                            Position members
-                          </h3>
-                          {membersLoading ? (
-                            <p className="mt-4 text-sm text-muted-foreground">Loading members...</p>
-                          ) : positionMemberNames.length ? (
-                            <ul className="mt-4 space-y-3">
-                              {positionMemberNames.map((member) => (
-                                <li
-                                  key={member.id}
-                                  className="rounded-2xl border border-border bg-card px-4 py-3"
-                                >
-                                  <div className="font-medium text-card-foreground">{member.name}</div>
-                                  <div className="text-sm text-muted-foreground">
-                                    {member.email ?? "No email recorded"}
-                                  </div>
-                                </li>
-                              ))}
-                            </ul>
-                          ) : (
-                            <p className="mt-4 text-sm text-muted-foreground">
-                              No active members for the selected position yet.
-                            </p>
-                          )}
-                        </section>
-                      </aside>
-                    </div>
-                  )}
-                </section>
-              </>
-            ) : (
-              <section className="rounded-3xl border border-dashed border-border bg-muted p-10 text-center shadow-sm">
-                <div className="mx-auto flex h-14 w-14 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>
-                <h2 className="mt-5 text-xl font-semibold text-card-foreground">
-                  Choose a unit to manage
-                </h2>
-                <p className="mx-auto mt-2 max-w-xl text-sm text-muted-foreground">
-                  Use the unit list on the left to manage positions and employees strictly inside one selected unit.
-                </p>
-              </section>
-            )}
-          </div>
-        </div>
-      ) : null}
-
-      <Dialog
-        open={isCreateUnitOpen}
-        onOpenChange={(open) => {
-          setIsCreateUnitOpen(open);
-          if (!open) {
-            resetUnitForm();
-          }
-        }}
-      >
-        <DialogContent className="max-h-[90vh] overflow-y-auto rounded-3xl sm:max-w-2xl">
-          <DialogHeader>
-            <DialogTitle className="text-2xl font-bold">Create unit</DialogTitle>
-            <DialogDescription>
-              Add a new unit under the EDR Freight organization.
-            </DialogDescription>
-          </DialogHeader>
-          <form className="space-y-4" onSubmit={handleCreateUnit}>
-            <Field label="Unit name (EN)">
-              <input
-                className={inputClassName}
-                value={unitNameEn}
-                onChange={(event) => setUnitNameEn(event.target.value)}
-                placeholder="Operations"
-                required
-              />
-            </Field>
-            <Field label="Unit name (AM)">
-              <input
-                className={inputClassName}
-                value={unitNameAm}
-                onChange={(event) => setUnitNameAm(event.target.value)}
-                placeholder="ኦፕሬሽንስ"
-                required
-              />
-            </Field>
-            <Field label="Unit key">
-              <div className="flex gap-2">
-                <input
-                  className={inputClassName}
-                  value={unitFormKey}
-                  onChange={(event) => setUnitFormKey(event.target.value)}
-                  placeholder="operations"
-                  required
-                />
-                <button
-                  type="button"
-                  onClick={() => setUnitFormKey(toInternalKey(unitNameEn))}
-                  className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                >
-                  Key
-                </button>
-              </div>
-            </Field>
-            <div className="flex flex-wrap gap-3">
-              <button
-                type="submit"
-                disabled={submitting || !unitNameEn.trim() || !unitNameAm.trim() || !unitFormKey.trim()}
-                className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}
-              >
-                <Save className="h-4 w-4" />
-                Create unit
-              </button>
-              <button
-                type="button"
-                onClick={() => {
-                  resetUnitForm();
-                  setIsCreateUnitOpen(false);
-                }}
-                className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-              >
-                Cancel
-              </button>
-            </div>
-          </form>
-        </DialogContent>
-      </Dialog>
-
-      <Dialog
-        open={isCreatePositionOpen}
-        onOpenChange={(open) => {
-          setIsCreatePositionOpen(open);
-          if (!open) {
-            syncPositionFormForCreate(createPositionMode);
-          }
-        }}
-      >
-        <DialogContent className="max-h-[90vh] overflow-y-auto rounded-3xl sm:max-w-2xl">
-          <DialogHeader>
-            <DialogTitle className="text-2xl font-bold">
-              {createPositionMode === "create-child" ? "Create child position" : "Create root position"}
-            </DialogTitle>
-            <DialogDescription>
-              {createPositionMode === "create-child"
-                ? "Add a child position under the currently selected position."
-                : "Add a top-level position for the selected unit."}
-            </DialogDescription>
-          </DialogHeader>
-          <form className="space-y-4" onSubmit={handleSavePosition}>
-            <Field label="Position name (EN)">
-              <input
-                className={inputClassName}
-                value={positionForm.nameEn}
-                onChange={(event) =>
-                  setPositionForm((current) => ({ ...current, nameEn: event.target.value }))
-                }
-                placeholder="Dispatch"
-                required
-              />
-            </Field>
-            <Field label="Position name (AM)">
-              <input
-                className={inputClassName}
-                value={positionForm.nameAm}
-                onChange={(event) =>
-                  setPositionForm((current) => ({ ...current, nameAm: event.target.value }))
-                }
-                placeholder="ዲስፓች"
-                required
-              />
-            </Field>
-            <Field label="Position key">
-              <div className="flex gap-2">
-                <input
-                  className={inputClassName}
-                  value={positionForm.key}
-                  onChange={(event) =>
-                    setPositionForm((current) => ({ ...current, key: event.target.value }))
-                  }
-                  placeholder="dispatch"
-                  required
-                />
-                <button
-                  type="button"
-                  onClick={() =>
-                    setPositionForm((current) => ({
-                      ...current,
-                      key: toInternalKey(current.nameEn),
-                    }))
-                  }
-                  className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                >
-                  Key
-                </button>
-              </div>
-            </Field>
-            <Field label="Parent position">
-              <select
-                className={inputClassName}
-                value={positionForm.parentPositionId}
-                onChange={(event) =>
-                  setPositionForm((current) => ({
-                    ...current,
-                    parentPositionId: event.target.value,
-                  }))
-                }
-              >
-                <option value="">No parent (root position)</option>
-                {parentOptions.map((item) => (
-                  <option key={item.id} value={item.id}>
-                    {getLocaleLabel(item.name, item.key)}
-                  </option>
-                ))}
-              </select>
-            </Field>
-            <div className="flex flex-wrap gap-3">
-              <button
-                type="submit"
-                disabled={
-                  submitting ||
-                  !positionForm.nameEn.trim() ||
-                  !positionForm.nameAm.trim() ||
-                  !positionForm.key.trim()
-                }
-                className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}
-              >
-                <Save className="h-4 w-4" />
-                Create position
-              </button>
-              <button
-                type="button"
-                disabled={submitting}
-                onClick={() => {
-                  syncPositionFormForCreate(createPositionMode);
-                  setIsCreatePositionOpen(false);
-                }}
-                className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-              >
-                Cancel
-              </button>
-            </div>
-          </form>
-        </DialogContent>
-      </Dialog>
-
-      <Dialog
-        open={isInviteEmployeeOpen}
-        onOpenChange={(open) => {
-          setIsInviteEmployeeOpen(open);
-          if (!open) {
-            setInviteForm(emptyInviteForm);
-          }
-        }}
-      >
-        <DialogContent className="max-h-[90vh] overflow-y-auto rounded-3xl sm:max-w-2xl">
-          <DialogHeader>
-            <DialogTitle className="text-2xl font-bold">Invite employee</DialogTitle>
-            <DialogDescription>
-              Create a new employee account and assign it directly to the selected position.
-            </DialogDescription>
-          </DialogHeader>
-          <form className="space-y-4" onSubmit={handleInviteEmployee}>
-            <Field label="Target position">
-              <div className="rounded-xl border border-border bg-muted px-3 py-2.5 text-sm text-card-foreground">
-                {selectedPosition ? getLocaleLabel(selectedPosition.name, selectedPosition.key) : "No position selected"}
-              </div>
-            </Field>
-            <Field label="Full name (EN)">
-              <input
-                className={inputClassName}
-                value={inviteForm.nameEn}
-                onChange={(event) =>
-                  setInviteForm((current) => ({ ...current, nameEn: event.target.value }))
-                }
-                required
-              />
-            </Field>
-            <Field label="Full name (AM)">
-              <input
-                className={inputClassName}
-                value={inviteForm.nameAm}
-                onChange={(event) =>
-                  setInviteForm((current) => ({ ...current, nameAm: event.target.value }))
-                }
-                required
-              />
-            </Field>
-            <Field label="Email">
-              <input
-                type="email"
-                className={inputClassName}
-                value={inviteForm.email}
-                onChange={(event) =>
-                  setInviteForm((current) => ({ ...current, email: event.target.value }))
-                }
-                required
-              />
-            </Field>
-            <Field label="Username">
-              <input
-                className={inputClassName}
-                value={inviteForm.username}
-                onChange={(event) =>
-                  setInviteForm((current) => ({ ...current, username: event.target.value }))
-                }
-                required
-              />
-            </Field>
-            <Field label="Phone number">
-              <input
-                className={inputClassName}
-                value={inviteForm.phoneNumber}
-                onChange={(event) =>
-                  setInviteForm((current) => ({ ...current, phoneNumber: event.target.value }))
-                }
-                required
-              />
-            </Field>
-            <div className="flex flex-wrap gap-3">
-              <button
-                type="submit"
-                disabled={submitting || !selectedPosition}
-                className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}
-              >
-                <UserPlus className="h-4 w-4" />
-                Invite and assign
-              </button>
-              <button
-                type="button"
-                disabled={submitting}
-                onClick={() => {
-                  setInviteForm(emptyInviteForm);
-                  setIsInviteEmployeeOpen(false);
-                }}
-                className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-              >
-                Cancel
-              </button>
-            </div>
-          </form>
-        </DialogContent>
-      </Dialog>
-    </section>
-  );
-};
-
-export default OrgStructurePage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/DepartmentsPage.tsx b/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/DepartmentsPage.tsx
deleted file mode 100644
index 4d2e50920..000000000
--- a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/DepartmentsPage.tsx
+++ /dev/null
@@ -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;
diff --git a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/EmployeesPage.tsx b/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/EmployeesPage.tsx
deleted file mode 100644
index eecca7a3e..000000000
--- a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/EmployeesPage.tsx
+++ /dev/null
@@ -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;
diff --git a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/PermissionsPage.tsx b/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/PermissionsPage.tsx
deleted file mode 100644
index 10c5aba25..000000000
--- a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/PermissionsPage.tsx
+++ /dev/null
@@ -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;
diff --git a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/PositionTypesPage.tsx b/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/PositionTypesPage.tsx
deleted file mode 100644
index 55a4df00e..000000000
--- a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/PositionTypesPage.tsx
+++ /dev/null
@@ -1,1309 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-import { isAxiosError } from "axios";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@edr/ui-common";
-import { CopyPlus, Plus, RefreshCw } 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 UnitRecord {
-  id: string;
-  key: string;
-  name?: LocaleText;
-}
-
-interface PositionTypeRecord {
-  id: string;
-  key: string;
-  name?: LocaleText;
-  isSystem?: boolean;
-  unitId?: string | null;
-  createdAt?: string;
-  updatedAt?: string | null;
-}
-
-interface PermissionRecord {
-  id: string;
-  key: string;
-  name?: LocaleText;
-  applicationId?: string | null;
-}
-
-interface ListResponse<T> {
-  count?: number;
-  items?: T[];
-  data?: T[];
-}
-
-const PAGE_SIZE = 1000;
-
-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 emptyCreateForm = {
-  copyPermissionFromId: "",
-  key: "",
-  nameAm: "",
-  nameEn: "",
-};
-
-type PositionTypeEditFormState = {
-  key: string;
-  nameAm: string;
-  nameEn: string;
-};
-
-const emptyEditForm: PositionTypeEditFormState = {
-  key: "",
-  nameAm: "",
-  nameEn: "",
-};
-
-const toggleSelection = (
-  currentIds: string[],
-  targetIds: string[],
-  checked: boolean,
-) => {
-  if (checked) {
-    return [...new Set([...currentIds, ...targetIds])];
-  }
-
-  return currentIds.filter((id) => !targetIds.includes(id));
-};
-
-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 formatDate = (value?: string | null) => {
-  if (!value) {
-    return "-";
-  }
-
-  const date = new Date(value);
-
-  if (Number.isNaN(date.getTime())) {
-    return "-";
-  }
-
-  return new Intl.DateTimeFormat("en", {
-    year: "numeric",
-    month: "short",
-    day: "2-digit",
-    hour: "2-digit",
-    minute: "2-digit",
-  }).format(date);
-};
-
-const PositionTypesPage = () => {
-  const { user } = useAuth();
-  const [organizations, setOrganizations] = useState<OrganizationRecord[]>([]);
-  const [units, setUnits] = useState<UnitRecord[]>([]);
-  const [positionTypes, setPositionTypes] = useState<PositionTypeRecord[]>([]);
-  const [selectedOrgId, setSelectedOrgId] = useState("");
-  const [selectedUnitId, setSelectedUnitId] = useState("");
-  const [loadingOrganizations, setLoadingOrganizations] = useState(true);
-  const [loadingUnits, setLoadingUnits] = useState(false);
-  const [loadingPositionTypes, setLoadingPositionTypes] = useState(false);
-  const [loadingPermissionsCatalog, setLoadingPermissionsCatalog] =
-    useState(false);
-  const [submitting, setSubmitting] = useState(false);
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  const [selectedPositionType, setSelectedPositionType] =
-    useState<PositionTypeRecord | null>(null);
-  const [allPermissions, setAllPermissions] = useState<PermissionRecord[]>([]);
-  const [permissionsLoading, setPermissionsLoading] = useState(false);
-  const [permissionsError, setPermissionsError] = useState<string | null>(null);
-  const [permissionSearch, setPermissionSearch] = useState("");
-  const [selectedPermissionIds, setSelectedPermissionIds] = useState<string[]>(
-    [],
-  );
-  const [isCreateOpen, setIsCreateOpen] = useState(false);
-  const [createForm, setCreateForm] = useState(emptyCreateForm);
-  const [createPermissionSearch, setCreatePermissionSearch] = useState("");
-  const [createPermissionIds, setCreatePermissionIds] = useState<string[]>([]);
-  const [createError, setCreateError] = useState<string | null>(null);
-  const [editForm, setEditForm] =
-    useState<PositionTypeEditFormState>(emptyEditForm);
-
-  const isSuperAdmin = Boolean(
-    user?.roles?.some((role) => role.key === "super_admin"),
-  );
-  const allowedOrgIds = useMemo(
-    () =>
-      new Set(
-        (user?.employee ?? [])
-          .map((employee) => employee.organizationId)
-          .filter((organizationId): organizationId is string =>
-            Boolean(organizationId),
-          ),
-      ),
-    [user?.employee],
-  );
-
-  const visibleOrganizations = useMemo(() => {
-    if (isSuperAdmin) {
-      return organizations;
-    }
-
-    return organizations.filter((organization) =>
-      allowedOrgIds.has(organization.id),
-    );
-  }, [allowedOrgIds, isSuperAdmin, organizations]);
-
-  const selectedOrganization =
-    visibleOrganizations.find(
-      (organization) => organization.id === selectedOrgId,
-    ) ?? null;
-  const selectedUnit = units.find((unit) => unit.id === selectedUnitId) ?? null;
-  const availableCopySources = useMemo(
-    () =>
-      positionTypes.filter(
-        (positionType) => positionType.id !== selectedPositionType?.id,
-      ),
-    [positionTypes, selectedPositionType?.id],
-  );
-  const filteredPermissions = useMemo(() => {
-    const query = permissionSearch.trim().toLowerCase();
-
-    return allPermissions.filter((permission) => {
-      if (!query) {
-        return true;
-      }
-
-      const label = getLocaleLabel(
-        permission.name,
-        permission.key,
-      ).toLowerCase();
-      return (
-        label.includes(query) || permission.key.toLowerCase().includes(query)
-      );
-    });
-  }, [allPermissions, permissionSearch]);
-  const filteredCreatePermissions = useMemo(() => {
-    const query = createPermissionSearch.trim().toLowerCase();
-
-    return allPermissions.filter((permission) => {
-      if (!query) {
-        return true;
-      }
-
-      const label = getLocaleLabel(
-        permission.name,
-        permission.key,
-      ).toLowerCase();
-      return (
-        label.includes(query) || permission.key.toLowerCase().includes(query)
-      );
-    });
-  }, [allPermissions, createPermissionSearch]);
-  const allFilteredPermissionIds = filteredPermissions.map(
-    (permission) => permission.id,
-  );
-  const allFilteredCreatePermissionIds = filteredCreatePermissions.map(
-    (permission) => permission.id,
-  );
-  const areAllFilteredPermissionsSelected =
-    allFilteredPermissionIds.length > 0 &&
-    allFilteredPermissionIds.every((id) => selectedPermissionIds.includes(id));
-  const areAllFilteredCreatePermissionsSelected =
-    allFilteredCreatePermissionIds.length > 0 &&
-    allFilteredCreatePermissionIds.every((id) =>
-      createPermissionIds.includes(id),
-    );
-
-  const loadPositionTypes = async (unitId: string) => {
-    const response = await api.get<ListResponse<PositionTypeRecord>>(
-      `/position-types/list-with-commons/${unitId}`,
-      {
-        params: {
-          skip: 0,
-          take: PAGE_SIZE,
-          orderBy: "createdAt:Desc",
-        },
-      },
-    );
-
-    return getItems(response.data);
-  };
-
-  const loadPermissionsForPositionType = async (positionTypeId: string) => {
-    const response = await api.get<ListResponse<PermissionRecord>>(
-      `/position-type-permissions/given-first/${positionTypeId}`,
-    );
-
-    return getItems(response.data);
-  };
-
-  useEffect(() => {
-    let isMounted = true;
-
-    const loadOrganizations = async () => {
-      setLoadingOrganizations(true);
-      setErrorMessage(null);
-
-      try {
-        const response =
-          await api.get<ListResponse<OrganizationRecord>>("/organizations");
-
-        if (!isMounted) {
-          return;
-        }
-
-        setOrganizations(getItems(response.data));
-      } catch (error) {
-        if (!isMounted) {
-          return;
-        }
-
-        setErrorMessage(
-          isAxiosError(error)
-            ? (error.response?.data?.message ?? "Unable to load organizations.")
-            : "Unable to load organizations.",
-        );
-      } finally {
-        if (isMounted) {
-          setLoadingOrganizations(false);
-        }
-      }
-    };
-
-    void loadOrganizations();
-
-    return () => {
-      isMounted = false;
-    };
-  }, []);
-
-  useEffect(() => {
-    let isMounted = true;
-
-    const loadPermissionsCatalog = async () => {
-      setLoadingPermissionsCatalog(true);
-
-      try {
-        const response = await api.get<ListResponse<PermissionRecord>>(
-          "/permissions",
-          {
-            params: {
-              skip: 0,
-              take: 2000,
-            },
-          },
-        );
-
-        if (!isMounted) {
-          return;
-        }
-
-        setAllPermissions(getItems(response.data));
-      } catch {
-        if (!isMounted) {
-          return;
-        }
-
-        setAllPermissions([]);
-      } finally {
-        if (isMounted) {
-          setLoadingPermissionsCatalog(false);
-        }
-      }
-    };
-
-    void loadPermissionsCatalog();
-
-    return () => {
-      isMounted = false;
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!visibleOrganizations.length) {
-      setSelectedOrgId("");
-      setSelectedUnitId("");
-      setUnits([]);
-      setPositionTypes([]);
-      return;
-    }
-
-    if (
-      selectedOrgId &&
-      visibleOrganizations.some(
-        (organization) => organization.id === selectedOrgId,
-      )
-    ) {
-      return;
-    }
-
-    setSelectedOrgId(visibleOrganizations[0]?.id ?? "");
-  }, [selectedOrgId, visibleOrganizations]);
-
-  useEffect(() => {
-    if (!selectedOrgId) {
-      setUnits([]);
-      setSelectedUnitId("");
-      setPositionTypes([]);
-      return;
-    }
-
-    let isMounted = true;
-
-    const loadUnits = async () => {
-      setLoadingUnits(true);
-      setErrorMessage(null);
-      setSelectedUnitId("");
-      setPositionTypes([]);
-
-      try {
-        const response = await api.get<ListResponse<UnitRecord>>(
-          `/units/list/${selectedOrgId}`,
-        );
-        const items = getItems(response.data);
-
-        if (!isMounted) {
-          return;
-        }
-
-        setUnits(items);
-        setSelectedUnitId(items[0]?.id ?? "");
-      } catch (error) {
-        if (!isMounted) {
-          return;
-        }
-
-        setUnits([]);
-        setErrorMessage(
-          isAxiosError(error)
-            ? (error.response?.data?.message ?? "Unable to load units.")
-            : "Unable to load units.",
-        );
-      } finally {
-        if (isMounted) {
-          setLoadingUnits(false);
-        }
-      }
-    };
-
-    void loadUnits();
-
-    return () => {
-      isMounted = false;
-    };
-  }, [selectedOrgId]);
-
-  useEffect(() => {
-    if (!selectedUnitId) {
-      setPositionTypes([]);
-      return;
-    }
-
-    let isMounted = true;
-
-    const loadItems = async () => {
-      setLoadingPositionTypes(true);
-      setErrorMessage(null);
-
-      try {
-        const items = await loadPositionTypes(selectedUnitId);
-
-        if (!isMounted) {
-          return;
-        }
-
-        setPositionTypes(items);
-      } catch (error) {
-        if (!isMounted) {
-          return;
-        }
-
-        setPositionTypes([]);
-        setErrorMessage(
-          isAxiosError(error)
-            ? (error.response?.data?.message ??
-              "Unable to load position types.")
-            : "Unable to load position types.",
-        );
-      } finally {
-        if (isMounted) {
-          setLoadingPositionTypes(false);
-        }
-      }
-    };
-
-    void loadItems();
-
-    return () => {
-      isMounted = false;
-    };
-  }, [selectedUnitId]);
-
-  useEffect(() => {
-    if (!selectedPositionType) {
-      setSelectedPermissionIds([]);
-      setEditForm(emptyEditForm);
-      setPermissionsError(null);
-      setPermissionsLoading(false);
-      setPermissionSearch("");
-      return;
-    }
-
-    setEditForm({
-      key: selectedPositionType.key,
-      nameAm: selectedPositionType.name?.am ?? "",
-      nameEn: selectedPositionType.name?.en ?? "",
-    });
-
-    let isMounted = true;
-
-    const loadPermissions = async () => {
-      setPermissionsLoading(true);
-      setPermissionsError(null);
-
-      try {
-        const items = await loadPermissionsForPositionType(
-          selectedPositionType.id,
-        );
-
-        if (!isMounted) {
-          return;
-        }
-
-        setSelectedPermissionIds(items.map((permission) => permission.id));
-      } catch (error) {
-        if (!isMounted) {
-          return;
-        }
-
-        setPermissionsError(
-          isAxiosError(error)
-            ? (error.response?.data?.message ??
-              "Unable to load position type permissions.")
-            : "Unable to load position type permissions.",
-        );
-      } finally {
-        if (isMounted) {
-          setPermissionsLoading(false);
-        }
-      }
-    };
-
-    void loadPermissions();
-
-    return () => {
-      isMounted = false;
-    };
-  }, [selectedPositionType]);
-
-  const handleRefresh = async () => {
-    if (!selectedUnitId) {
-      return;
-    }
-
-    setLoadingPositionTypes(true);
-    setErrorMessage(null);
-
-    try {
-      const items = await loadPositionTypes(selectedUnitId);
-      setPositionTypes(items);
-
-      if (selectedPositionType) {
-        const nextSelected =
-          items.find((item) => item.id === selectedPositionType.id) ??
-          selectedPositionType;
-        setSelectedPositionType(nextSelected);
-      }
-    } catch (error) {
-      setErrorMessage(
-        isAxiosError(error)
-          ? (error.response?.data?.message ??
-            "Unable to refresh position types.")
-          : "Unable to refresh position types.",
-      );
-    } finally {
-      setLoadingPositionTypes(false);
-    }
-  };
-
-  const openCreateDialog = () => {
-    setCreateForm(emptyCreateForm);
-    setCreatePermissionIds([]);
-    setCreatePermissionSearch("");
-    setCreateError(null);
-    setIsCreateOpen(true);
-  };
-
-  const handleSelectCopySource = async (positionTypeId: string) => {
-    setCreateForm((current) => ({
-      ...current,
-      copyPermissionFromId: positionTypeId,
-    }));
-
-    if (!positionTypeId) {
-      setCreatePermissionIds([]);
-      return;
-    }
-
-    try {
-      const copiedPermissions =
-        await loadPermissionsForPositionType(positionTypeId);
-      setCreatePermissionIds(
-        copiedPermissions.map((permission) => permission.id),
-      );
-    } catch (error) {
-      setCreateError(
-        isAxiosError(error)
-          ? (error.response?.data?.message ?? "Unable to copy permissions.")
-          : "Unable to copy permissions.",
-      );
-    }
-  };
-
-  const handleCreatePositionType = async (
-    event: React.FormEvent<HTMLFormElement>,
-  ) => {
-    event.preventDefault();
-
-    if (!selectedUnitId) {
-      setCreateError("Select a unit before creating a position type.");
-      return;
-    }
-
-    setSubmitting(true);
-    setCreateError(null);
-
-    try {
-      const response = await api.post<PositionTypeRecord>("/position-types", {
-        key: createForm.key.trim(),
-        name: {
-          am: createForm.nameAm.trim(),
-          en: createForm.nameEn.trim(),
-        },
-        unitId: selectedUnitId,
-      });
-
-      const createdPositionType = response.data;
-
-      await api.post("/position-type-permissions/assign-seconds-for-first", {
-        firstId: createdPositionType.id,
-        secondIds: createPermissionIds,
-      });
-
-      setIsCreateOpen(false);
-      setCreateForm(emptyCreateForm);
-      setCreatePermissionIds([]);
-      await handleRefresh();
-    } catch (error) {
-      setCreateError(
-        isAxiosError(error)
-          ? (error.response?.data?.message ?? "Unable to create position type.")
-          : "Unable to create position type.",
-      );
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleSavePositionTypeChanges = async () => {
-    if (!selectedPositionType) {
-      return;
-    }
-
-    setSubmitting(true);
-    setPermissionsError(null);
-
-    try {
-      if (!selectedPositionType.isSystem) {
-        await api.put(`/position-types/${selectedPositionType.id}`, {
-          key: editForm.key.trim(),
-          name: {
-            am: editForm.nameAm.trim(),
-            en: editForm.nameEn.trim(),
-          },
-          unitId: selectedPositionType.unitId,
-        });
-      }
-
-      await api.post("/position-type-permissions/assign-seconds-for-first", {
-        firstId: selectedPositionType.id,
-        secondIds: selectedPermissionIds,
-      });
-
-      const [refreshedPermissions, refreshedPositionTypes] = await Promise.all([
-        loadPermissionsForPositionType(selectedPositionType.id),
-        selectedUnitId
-          ? loadPositionTypes(selectedUnitId)
-          : Promise.resolve(positionTypes),
-      ]);
-
-      setSelectedPermissionIds(
-        refreshedPermissions.map((permission) => permission.id),
-      );
-      setPositionTypes(refreshedPositionTypes);
-
-      const refreshedSelected = refreshedPositionTypes.find(
-        (item) => item.id === selectedPositionType.id,
-      );
-      if (refreshedSelected) {
-        setSelectedPositionType(refreshedSelected);
-      }
-    } catch (error) {
-      setPermissionsError(
-        isAxiosError(error)
-          ? (error.response?.data?.message ?? "Unable to update position type.")
-          : "Unable to update position type.",
-      );
-    } finally {
-      setSubmitting(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">
-                Position Type
-              </h1>
-              <p className="mt-3 max-w-2xl text-sm text-muted-foreground">
-                Browse position types for a selected organization unit, add new
-                ones, and manage their permissions.
-              </p>
-            </div>
-            <div className="flex items-center gap-2">
-              <div className="rounded-full border border-border bg-muted px-3 py-1 text-sm font-medium text-muted-foreground">
-                {positionTypes.length} position types
-              </div>
-              <button
-                type="button"
-                onClick={() => void handleRefresh()}
-                disabled={!selectedUnitId || loadingPositionTypes}
-                className={`${buttonClassName} border border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground`}
-              >
-                <RefreshCw className="h-4 w-4" />
-                Refresh
-              </button>
-              <button
-                type="button"
-                onClick={openCreateDialog}
-                disabled={!selectedUnitId || submitting}
-                className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}
-              >
-                <Plus className="h-4 w-4" />
-                New position type
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <div className="grid gap-3 rounded-2xl border border-border bg-background/60 p-4 md:grid-cols-2 xl:grid-cols-[minmax(0,280px)_minmax(0,280px)_1fr] xl:items-end">
-          <div className="space-y-2">
-            <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
-              Organization
-            </p>
-            <Select
-              value={selectedOrgId || undefined}
-              onValueChange={setSelectedOrgId}
-              disabled={loadingOrganizations || !visibleOrganizations.length}
-            >
-              <SelectTrigger className="w-full rounded-xl bg-background">
-                <SelectValue
-                  placeholder={
-                    loadingOrganizations
-                      ? "Loading organizations..."
-                      : "Select organization"
-                  }
-                />
-              </SelectTrigger>
-              <SelectContent>
-                {visibleOrganizations.map((organization) => (
-                  <SelectItem key={organization.id} value={organization.id}>
-                    {getLocaleLabel(organization.name, organization.key)}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-
-          <div className="space-y-2">
-            <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
-              Unit
-            </p>
-            <Select
-              value={selectedUnitId || undefined}
-              onValueChange={setSelectedUnitId}
-              disabled={!selectedOrgId || loadingUnits || !units.length}
-            >
-              <SelectTrigger className="w-full rounded-xl bg-background">
-                <SelectValue
-                  placeholder={
-                    loadingUnits ? "Loading units..." : "Select unit"
-                  }
-                />
-              </SelectTrigger>
-              <SelectContent>
-                {units.map((unit) => (
-                  <SelectItem key={unit.id} value={unit.id}>
-                    {getLocaleLabel(unit.name, unit.key)}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-
-          <p className="text-sm text-muted-foreground">
-            {selectedOrganization && selectedUnit
-              ? `Showing position types for ${getLocaleLabel(selectedUnit.name, selectedUnit.key)} in ${getLocaleLabel(selectedOrganization.name, selectedOrganization.key)}.`
-              : "Select an organization and unit to load position types."}
-          </p>
-        </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>
-        ) : loadingOrganizations || loadingUnits || loadingPositionTypes ? (
-          <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
-            Loading position types...
-          </div>
-        ) : !visibleOrganizations.length ? (
-          <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
-            No organization scope is available for this account.
-          </div>
-        ) : !selectedOrgId ? (
-          <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
-            Select an organization to continue.
-          </div>
-        ) : !units.length ? (
-          <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
-            No units are available for the selected organization.
-          </div>
-        ) : !selectedUnitId ? (
-          <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
-            Select a unit to load position types.
-          </div>
-        ) : positionTypes.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">Key</th>
-                  <th className="px-4 py-3 font-medium">Scope</th>
-                  <th className="px-4 py-3 font-medium">Unit ID</th>
-                  <th className="px-4 py-3 font-medium">Created At</th>
-                  <th className="px-4 py-3 font-medium">Updated At</th>
-                </tr>
-              </thead>
-              <tbody>
-                {positionTypes.map((positionType) => (
-                  <tr
-                    key={positionType.id}
-                    onClick={() => setSelectedPositionType(positionType)}
-                    className="cursor-pointer border-t border-border bg-background transition hover:bg-accent/20"
-                  >
-                    <td className="px-4 py-3 font-medium text-foreground">
-                      {getLocaleLabel(positionType.name, positionType.key)}
-                    </td>
-                    <td className="px-4 py-3 font-mono text-muted-foreground">
-                      {positionType.key}
-                    </td>
-                    <td className="px-4 py-3 text-muted-foreground">
-                      {positionType.isSystem ? "System" : "Unit"}
-                    </td>
-                    <td className="px-4 py-3 font-mono text-muted-foreground">
-                      {positionType.unitId ?? "-"}
-                    </td>
-                    <td className="px-4 py-3 text-muted-foreground">
-                      {formatDate(positionType.createdAt)}
-                    </td>
-                    <td className="px-4 py-3 text-muted-foreground">
-                      {formatDate(positionType.updatedAt)}
-                    </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 position types were found for the selected unit.
-          </div>
-        )}
-      </div>
-
-      <Dialog
-        open={Boolean(selectedPositionType)}
-        onOpenChange={(open) => !open && setSelectedPositionType(null)}
-      >
-        <DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-2xl">
-          <DialogHeader>
-            <DialogTitle>
-              {selectedPositionType
-                ? getLocaleLabel(
-                  selectedPositionType.name,
-                  selectedPositionType.key,
-                )
-                : "Position type details"}
-            </DialogTitle>
-            <DialogDescription>
-              {selectedPositionType
-                ? `Review and update the permission set assigned to ${getLocaleLabel(selectedPositionType.name, selectedPositionType.key)}.`
-                : undefined}
-            </DialogDescription>
-          </DialogHeader>
-
-          {selectedPositionType ? (
-            <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">
-                    Position type
-                  </p>
-                  <p className="mt-2 text-sm font-semibold text-foreground">
-                    {getLocaleLabel(
-                      selectedPositionType.name,
-                      selectedPositionType.key,
-                    )}
-                  </p>
-                </div>
-                <div>
-                  <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
-                    Key
-                  </p>
-                  <p className="mt-2 font-mono text-sm text-foreground">
-                    {selectedPositionType.key}
-                  </p>
-                </div>
-                <div>
-                  <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
-                    Scope
-                  </p>
-                  <p className="mt-2 text-sm text-foreground">
-                    {selectedPositionType.isSystem ? "System" : "Unit"}
-                  </p>
-                </div>
-                <div>
-                  <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
-                    Unit ID
-                  </p>
-                  <p className="mt-2 font-mono text-sm text-foreground">
-                    {selectedPositionType.unitId ?? "-"}
-                  </p>
-                </div>
-              </div>
-
-              <div className="space-y-3">
-                <div className="grid gap-4 rounded-2xl border border-border bg-muted/40 p-4 sm:grid-cols-2">
-                  <label className="flex flex-col gap-2 text-sm">
-                    <span className="font-medium text-foreground">
-                      English name
-                    </span>
-                    <input
-                      className={inputClassName}
-                      value={editForm.nameEn}
-                      onChange={(event) =>
-                        setEditForm((current) => ({
-                          ...current,
-                          nameEn: event.target.value,
-                        }))
-                      }
-                      disabled={selectedPositionType.isSystem}
-                    />
-                  </label>
-                  <label className="flex flex-col gap-2 text-sm">
-                    <span className="font-medium text-foreground">
-                      Amharic name
-                    </span>
-                    <input
-                      className={inputClassName}
-                      value={editForm.nameAm}
-                      onChange={(event) =>
-                        setEditForm((current) => ({
-                          ...current,
-                          nameAm: event.target.value,
-                        }))
-                      }
-                      disabled={selectedPositionType.isSystem}
-                    />
-                  </label>
-                  <label className="flex flex-col gap-2 text-sm sm:col-span-2">
-                    <span className="font-medium text-foreground">Key</span>
-                    <input
-                      className={inputClassName}
-                      value={editForm.key}
-                      onChange={(event) =>
-                        setEditForm((current) => ({
-                          ...current,
-                          key: event.target.value,
-                        }))
-                      }
-                      disabled={selectedPositionType.isSystem}
-                    />
-                  </label>
-                  {selectedPositionType.isSystem ? (
-                    <p className="text-xs text-muted-foreground sm:col-span-2">
-                      System position types keep their name and key, but you can
-                      still manage permissions here.
-                    </p>
-                  ) : null}
-                </div>
-
-                <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">
-                    {selectedPermissionIds.length} permissions selected
-                  </div>
-                </div>
-
-                {permissionsLoading ? (
-                  <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
-                    Loading position type permissions...
-                  </div>
-                ) : permissionsError ? (
-                  <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">
-                    {permissionsError}
-                  </div>
-                ) : (
-                  <div className="space-y-4">
-                    <input
-                      className={inputClassName}
-                      value={permissionSearch}
-                      onChange={(event) =>
-                        setPermissionSearch(event.target.value)
-                      }
-                      placeholder="Search permissions by name or key"
-                    />
-
-                    <label className="flex items-center gap-2 rounded-xl border border-border bg-background px-3 py-2 text-sm">
-                      <input
-                        type="checkbox"
-                        checked={areAllFilteredPermissionsSelected}
-                        onChange={(event) => {
-                          setSelectedPermissionIds((current) =>
-                            toggleSelection(
-                              current,
-                              allFilteredPermissionIds,
-                              event.target.checked,
-                            ),
-                          );
-                        }}
-                      />
-                      <span className="font-medium text-foreground">
-                        Select all
-                      </span>
-                    </label>
-
-                    {loadingPermissionsCatalog ? (
-                      <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
-                        Loading permissions catalog...
-                      </div>
-                    ) : filteredPermissions.length ? (
-                      <div className="grid max-h-[420px] gap-2 overflow-y-auto pr-1 md:grid-cols-2 xl:grid-cols-3">
-                        {filteredPermissions.map((permission) => (
-                          <label
-                            key={permission.id}
-                            className="flex items-start gap-2 rounded-xl border border-border bg-background px-3 py-2 text-xs"
-                          >
-                            <input
-                              type="checkbox"
-                              checked={selectedPermissionIds.includes(
-                                permission.id,
-                              )}
-                              onChange={(event) => {
-                                setSelectedPermissionIds((current) =>
-                                  event.target.checked
-                                    ? [...current, permission.id]
-                                    : current.filter(
-                                      (item) => item !== permission.id,
-                                    ),
-                                );
-                              }}
-                            />
-                            <div className="min-w-0 leading-4">
-                              <div className="truncate font-medium text-foreground">
-                                {getLocaleLabel(
-                                  permission.name,
-                                  permission.key,
-                                )}
-                              </div>
-                              <div className="truncate text-xs text-muted-foreground">
-                                {permission.key}
-                              </div>
-                            </div>
-                          </label>
-                        ))}
-                      </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 current search.
-                      </div>
-                    )}
-
-                    <div className="flex justify-end gap-2">
-                      <button
-                        type="button"
-                        onClick={() => setSelectedPositionType(null)}
-                        className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                      >
-                        Close
-                      </button>
-                      <button
-                        type="button"
-                        disabled={submitting || loadingPermissionsCatalog}
-                        onClick={() => void handleSavePositionTypeChanges()}
-                        className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}
-                      >
-                        Save changes
-                      </button>
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          ) : null}
-        </DialogContent>
-      </Dialog>
-
-      <Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
-        <DialogContent className="sm:max-w-2xl">
-          <DialogHeader>
-            <DialogTitle>Create position type</DialogTitle>
-            <DialogDescription>
-              Add a new position type for the selected unit and optionally copy
-              permissions from an existing one.
-            </DialogDescription>
-          </DialogHeader>
-
-          <form
-            className="space-y-4"
-            onSubmit={(event) => void handleCreatePositionType(event)}
-          >
-            <div className="grid gap-4 md:grid-cols-2">
-              <label className="flex flex-col gap-2 text-sm">
-                <span className="font-medium text-foreground">
-                  English name
-                </span>
-                <input
-                  className={inputClassName}
-                  value={createForm.nameEn}
-                  onChange={(event) =>
-                    setCreateForm((current) => ({
-                      ...current,
-                      nameEn: event.target.value,
-                    }))
-                  }
-                />
-              </label>
-
-              <label className="flex flex-col gap-2 text-sm">
-                <span className="font-medium text-foreground">
-                  Amharic name
-                </span>
-                <input
-                  className={inputClassName}
-                  value={createForm.nameAm}
-                  onChange={(event) =>
-                    setCreateForm((current) => ({
-                      ...current,
-                      nameAm: event.target.value,
-                    }))
-                  }
-                />
-              </label>
-
-              <label className="flex flex-col gap-2 text-sm">
-                <span className="font-medium text-foreground">Key</span>
-                <input
-                  className={inputClassName}
-                  value={createForm.key}
-                  onChange={(event) =>
-                    setCreateForm((current) => ({
-                      ...current,
-                      key: event.target.value,
-                    }))
-                  }
-                />
-              </label>
-
-              <label className="flex flex-col gap-2 text-sm">
-                <span className="font-medium text-foreground">
-                  Copy permissions from
-                </span>
-                <Select
-                  value={createForm.copyPermissionFromId || undefined}
-                  onValueChange={(value) => void handleSelectCopySource(value)}
-                >
-                  <SelectTrigger className="w-full rounded-xl bg-background">
-                    <SelectValue placeholder="Optional" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {availableCopySources.map((positionType) => (
-                      <SelectItem key={positionType.id} value={positionType.id}>
-                        {getLocaleLabel(positionType.name, positionType.key)}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </label>
-            </div>
-
-            <div className="space-y-3 rounded-2xl border border-border bg-background/60 p-4">
-              <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">
-                  {createPermissionIds.length} selected
-                </div>
-              </div>
-
-              <input
-                className={inputClassName}
-                value={createPermissionSearch}
-                onChange={(event) =>
-                  setCreatePermissionSearch(event.target.value)
-                }
-                placeholder="Search permissions by name or key"
-              />
-
-              <label className="flex items-center gap-2 rounded-xl border border-border bg-background px-3 py-2 text-sm">
-                <input
-                  type="checkbox"
-                  checked={areAllFilteredCreatePermissionsSelected}
-                  onChange={(event) => {
-                    setCreatePermissionIds((current) =>
-                      toggleSelection(
-                        current,
-                        allFilteredCreatePermissionIds,
-                        event.target.checked,
-                      ),
-                    );
-                  }}
-                />
-                <span className="font-medium text-foreground">Select all</span>
-              </label>
-
-              {loadingPermissionsCatalog ? (
-                <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
-                  Loading permissions catalog...
-                </div>
-              ) : filteredCreatePermissions.length ? (
-                <div className="grid max-h-[320px] gap-2 overflow-y-auto pr-1 md:grid-cols-2 xl:grid-cols-3">
-                  {filteredCreatePermissions.map((permission) => (
-                    <label
-                      key={permission.id}
-                      className="flex items-start gap-2 rounded-xl border border-border bg-background px-3 py-2 text-xs"
-                    >
-                      <input
-                        type="checkbox"
-                        checked={createPermissionIds.includes(permission.id)}
-                        onChange={(event) => {
-                          setCreatePermissionIds((current) =>
-                            event.target.checked
-                              ? [...current, permission.id]
-                              : current.filter(
-                                (item) => item !== permission.id,
-                              ),
-                          );
-                        }}
-                      />
-                      <div className="min-w-0 leading-4">
-                        <div className="truncate font-medium text-foreground">
-                          {getLocaleLabel(permission.name, permission.key)}
-                        </div>
-                        <div className="truncate text-xs text-muted-foreground">
-                          {permission.key}
-                        </div>
-                      </div>
-                    </label>
-                  ))}
-                </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 current search.
-                </div>
-              )}
-            </div>
-
-            {createForm.copyPermissionFromId ? (
-              <div className="rounded-2xl border border-sky-200 bg-sky-50 px-4 py-3 text-sm text-sky-700 dark:border-sky-950 dark:bg-sky-950/30 dark:text-sky-300">
-                <div className="flex items-center gap-2">
-                  <CopyPlus className="h-4 w-4" />
-                  The new position type will inherit permissions from the
-                  selected source.
-                </div>
-              </div>
-            ) : null}
-
-            {createError ? (
-              <div className="rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-950 dark:bg-red-950/30 dark:text-red-300">
-                {createError}
-              </div>
-            ) : null}
-
-            <div className="flex justify-end gap-2">
-              <button
-                type="button"
-                onClick={() => setIsCreateOpen(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 || !selectedUnitId}
-                className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}
-              >
-                Create position type
-              </button>
-            </div>
-          </form>
-        </DialogContent>
-      </Dialog>
-    </section>
-  );
-};
-
-export default PositionTypesPage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/RolesPage.tsx b/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/RolesPage.tsx
deleted file mode 100644
index 862df0119..000000000
--- a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/RolesPage.tsx
+++ /dev/null
@@ -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;
diff --git a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/UserManagementHostPage.tsx b/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/UserManagementHostPage.tsx
deleted file mode 100644
index d473bdc90..000000000
--- a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/UserManagementHostPage.tsx
+++ /dev/null
@@ -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 }} />;
-}
diff --git a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/UserManagementPage.tsx b/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/UserManagementPage.tsx
deleted file mode 100644
index 8c3806165..000000000
--- a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/UserManagementPage.tsx
+++ /dev/null
@@ -1,2307 +0,0 @@
-import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
-import { isAxiosError } from "axios";
-import {
-  Badge,
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@edr/ui-common";
-import {
-  Building2,
-  ChevronRight,
-  FolderTree,
-  MoreHorizontal,
-  Network,
-  RefreshCw,
-  Search,
-  ShieldCheck,
-  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 UnitRecord {
-  id: string;
-  key: string;
-  name: LocaleText;
-  parentUnitId?: string | null;
-}
-
-interface PositionRecord {
-  id: string;
-  key: string;
-  name: LocaleText;
-  parentPositionId?: string | null;
-  positionTypeId?: string | null;
-  rank?: number;
-}
-
-interface PositionTypeRecord {
-  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 PositionTreeNode extends PositionRecord {
-  children: PositionTreeNode[];
-}
-
-interface OrganizationConfigurationRecord {
-  id: string;
-  organizationId: string;
-  maximumNumberOfUnits?: number | null;
-  canCreateBranchByItself?: boolean;
-  canStartReceivingRecord?: boolean;
-}
-
-interface PositionFormState {
-  id?: string;
-  nameEn: string;
-  nameAm: string;
-  key: string;
-  parentPositionId: string;
-  positionTypeId: string;
-}
-
-interface UnitFormState {
-  nameEn: string;
-  nameAm: string;
-  key: string;
-}
-
-interface EmployeeInviteFormState {
-  nameEn: string;
-  nameAm: string;
-  email: string;
-  username: string;
-  phoneNumber: string;
-}
-
-interface ListResponse<T> {
-  count?: number;
-  items?: T[];
-  data?: T[];
-}
-
-const RESERVED_ROLE_KEYS = new Set(["super_admin", "organization_admin", "unit_admin"]);
-
-const emptyInviteForm: EmployeeInviteFormState = {
-  nameEn: "",
-  nameAm: "",
-  email: "",
-  username: "",
-  phoneNumber: "",
-};
-
-const emptyUnitForm: UnitFormState = {
-  nameEn: "",
-  nameAm: "",
-  key: "",
-};
-
-const emptyPositionForm: PositionFormState = {
-  nameEn: "",
-  nameAm: "",
-  key: "",
-  parentPositionId: "",
-  positionTypeId: "",
-};
-
-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 toInternalKey = (value: string) =>
-  value
-    .trim()
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, "_")
-    .replace(/^_+|_+$/g, "")
-    .replace(/_+/g, "_");
-
-const buildTree = (positions: PositionRecord[]) => {
-  const nodes = new Map<string, PositionTreeNode>();
-
-  positions.forEach((position) => {
-    nodes.set(position.id, { ...position, children: [] });
-  });
-
-  const roots: PositionTreeNode[] = [];
-
-  nodes.forEach((node) => {
-    if (node.parentPositionId) {
-      const parent = nodes.get(node.parentPositionId);
-
-      if (parent) {
-        parent.children.push(node);
-        return;
-      }
-    }
-
-    roots.push(node);
-  });
-
-  const sortNodes = (items: PositionTreeNode[]) => {
-    items.sort((left, right) => {
-      const rankDiff = (left.rank ?? 0) - (right.rank ?? 0);
-      if (rankDiff !== 0) {
-        return rankDiff;
-      }
-
-      return getLocaleLabel(left.name, left.key).localeCompare(
-        getLocaleLabel(right.name, right.key),
-      );
-    });
-
-    items.forEach((item) => sortNodes(item.children));
-  };
-
-  sortNodes(roots);
-
-  return roots;
-};
-
-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 TreeNode = ({
-  node,
-  depth = 0,
-  selectedPositionId,
-  onSelect,
-  expandedDepartmentIds,
-  onToggleExpand,
-  onInviteUser,
-  onAssignUser,
-  onAddSubDepartment,
-  onEdit,
-  onDelete,
-  disabled,
-}: {
-  node: PositionTreeNode;
-  depth?: number;
-  selectedPositionId: string | null;
-  onSelect: (node: PositionRecord) => void;
-  expandedDepartmentIds: Set<string>;
-  onToggleExpand: (nodeId: string) => void;
-  onInviteUser: (node: PositionRecord) => void;
-  onAssignUser: (node: PositionRecord) => void;
-  onAddSubDepartment: (node: PositionRecord) => void;
-  onEdit: (node: PositionRecord) => void;
-  onDelete: (node: PositionRecord) => void;
-  disabled?: boolean;
-}) => {
-  const hasChildren = node.children.length > 0;
-  const isSelected = selectedPositionId === node.id;
-  const isExpanded = expandedDepartmentIds.has(node.id);
-
-  return (
-    <li className="group">
-      <div
-        className={`flex w-full items-center gap-2 rounded-xl border px-3 py-2 text-left text-sm shadow-sm transition ${
-          isSelected
-            ? "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"
-        }`}
-        style={{ marginLeft: depth * 14 }}
-      >
-        {hasChildren ? (
-          <button
-            type="button"
-            onClick={(event) => {
-              event.stopPropagation();
-              onToggleExpand(node.id);
-            }}
-            className="inline-flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition hover:bg-accent hover:text-accent-foreground"
-            disabled={disabled}
-            aria-label={isExpanded ? "Collapse department" : "Expand department"}
-          >
-            <ChevronRight
-              className={`h-4 w-4 transition-transform ${isExpanded ? "rotate-90" : "rotate-0"}`}
-            />
-          </button>
-        ) : (
-          <span className="h-7 w-7 shrink-0" aria-hidden="true" />
-        )}
-        <button
-          type="button"
-          onClick={() => onSelect(node)}
-          className="flex min-w-0 flex-1 items-center gap-2 text-left"
-          disabled={disabled}
-        >
-        <span className="flex h-7 w-7 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600 dark:bg-emerald-950/40 dark:text-emerald-300">
-          {hasChildren ? <FolderTree className="h-4 w-4" /> : <Building2 className="h-4 w-4" />}
-        </span>
-        <div className="min-w-0 flex-1">
-          <div className="truncate font-medium">{getLocaleLabel(node.name, node.key)}</div>
-          <div className="truncate text-xs text-muted-foreground">{node.key}</div>
-        </div>
-        {hasChildren ? <ChevronRight className="h-4 w-4 text-muted-foreground" /> : null}
-        </button>
-
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <button
-              type="button"
-              disabled={disabled}
-              onClick={(event) => event.stopPropagation()}
-              className="ml-auto inline-flex h-9 w-9 items-center justify-center rounded-xl border border-border bg-card text-card-foreground opacity-0 transition group-hover:opacity-100 group-focus-within:opacity-100 hover:bg-accent hover:text-accent-foreground"
-              aria-label="Position actions"
-            >
-              <MoreHorizontal className="h-4 w-4" />
-            </button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem
-              onSelect={(event) => {
-                event.preventDefault();
-                onInviteUser(node);
-              }}
-            >
-              Add User
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onSelect={(event) => {
-                event.preventDefault();
-                onAssignUser(node);
-              }}
-            >
-              Assign User
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onSelect={(event) => {
-                event.preventDefault();
-                onAddSubDepartment(node);
-              }}
-            >
-              Add Sub-department
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem
-              onSelect={(event) => {
-                event.preventDefault();
-                onEdit(node);
-              }}
-            >
-              Edit Department
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem
-              variant="destructive"
-              onSelect={(event) => {
-                event.preventDefault();
-                onDelete(node);
-              }}
-            >
-              Delete Department
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-
-      {hasChildren && isExpanded ? (
-        <ul className="mt-2 space-y-2">
-          {node.children.map((child) => (
-            <TreeNode
-              key={child.id}
-              node={child}
-              depth={depth + 1}
-              selectedPositionId={selectedPositionId}
-              onSelect={onSelect}
-              expandedDepartmentIds={expandedDepartmentIds}
-              onToggleExpand={onToggleExpand}
-              onInviteUser={onInviteUser}
-              onAssignUser={onAssignUser}
-              onAddSubDepartment={onAddSubDepartment}
-              onEdit={onEdit}
-              onDelete={onDelete}
-              disabled={disabled}
-            />
-          ))}
-        </ul>
-      ) : null}
-    </li>
-  );
-};
-
-const UserManagementPage = () => {
-  const { user } = useAuth();
-  const [organizations, setOrganizations] = useState<OrganizationRecord[]>([]);
-  const [units, setUnits] = useState<UnitRecord[]>([]);
-  const [positions, setPositions] = useState<PositionRecord[]>([]);
-  const [positionTypes, setPositionTypes] = useState<PositionTypeRecord[]>([]);
-  const [orgEmployees, setOrgEmployees] = useState<EmployeeRecord[]>([]);
-  const [positionMembers, setPositionMembers] = useState<EmployeeRecord[]>([]);
-  const [selectedOrgConfiguration, setSelectedOrgConfiguration] =
-    useState<OrganizationConfigurationRecord | null>(null);
-  const [expandedDepartmentIds, setExpandedDepartmentIds] = useState<Set<string>>(new Set());
-  const [orgAdminUserIds, setOrgAdminUserIds] = useState<Set<string>>(new Set());
-  const [unitAdminUserIds, setUnitAdminUserIds] = useState<Set<string>>(new Set());
-  const [selectedOrgId, setSelectedOrgId] = useState<string | null>(null);
-  const [selectedUnitId, setSelectedUnitId] = useState<string | null>(null);
-  const [selectedPositionId, setSelectedPositionId] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [membersLoading, setMembersLoading] = useState(false);
-  const [orgEmployeesLoading, setOrgEmployeesLoading] = useState(false);
-  const [positionTypesLoading, setPositionTypesLoading] = useState(false);
-  const [actionError, setActionError] = useState<string | null>(null);
-  const [actionSuccess, setActionSuccess] = useState<string | null>(null);
-  const [loadError, setLoadError] = useState<string | null>(null);
-  const [positionTypesError, setPositionTypesError] = useState<string | null>(null);
-  const [submitting, setSubmitting] = useState(false);
-  const [unitSearch, setUnitSearch] = useState("");
-  const [positionSearch, setPositionSearch] = useState("");
-  const [employeeSearch, setEmployeeSearch] = useState("");
-  const [assignSearch, setAssignSearch] = useState("");
-  const [unitForm, setUnitForm] = useState<UnitFormState>(emptyUnitForm);
-  const [positionForm, setPositionForm] = useState<PositionFormState>(emptyPositionForm);
-  const [inviteForm, setInviteForm] = useState<EmployeeInviteFormState>(emptyInviteForm);
-  const [roleIds, setRoleIds] = useState<string[]>([]);
-  const [availableRoles, setAvailableRoles] = useState<RoleRecord[]>([]);
-  const [rolesLoading, setRolesLoading] = useState(false);
-  const [isCreateUnitOpen, setIsCreateUnitOpen] = useState(false);
-  const [isEditUnitOpen, setIsEditUnitOpen] = useState(false);
-  const [isCreatePositionOpen, setIsCreatePositionOpen] = useState(false);
-  const [isEditPositionOpen, setIsEditPositionOpen] = useState(false);
-  const [isInviteEmployeeOpen, setIsInviteEmployeeOpen] = useState(false);
-  const [isAssignEmployeeOpen, setIsAssignEmployeeOpen] = useState(false);
-  const [isManageRolesOpen, setIsManageRolesOpen] = useState(false);
-  const [selectedRoleUser, setSelectedRoleUser] = useState<EmployeeRecord | null>(null);
-  const [createPositionMode, setCreatePositionMode] = useState<"create-root" | "create-child">(
-    "create-root",
-  );
-
-  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 selectedUnit = useMemo(
-    () => units.find((item) => item.id === selectedUnitId) ?? null,
-    [selectedUnitId, units],
-  );
-  const selectedPosition = useMemo(
-    () => positions.find((item) => item.id === selectedPositionId) ?? null,
-    [positions, selectedPositionId],
-  );
-  const positionTree = useMemo(() => buildTree(positions), [positions]);
-  const parentOptions = useMemo(
-    () => positions.filter((item) => item.id !== selectedPositionId),
-    [positions, selectedPositionId],
-  );
-  const unitsAllowedLabel =
-    selectedOrgConfiguration?.maximumNumberOfUnits == null
-      ? "∞"
-      : `${selectedOrgConfiguration.maximumNumberOfUnits}`;
-
-  const filteredUnits = useMemo(() => {
-    const query = unitSearch.trim().toLowerCase();
-    if (!query) {
-      return units;
-    }
-
-    return units.filter((item) => {
-      const label = getLocaleLabel(item.name, item.key).toLowerCase();
-      return label.includes(query) || item.key.toLowerCase().includes(query);
-    });
-  }, [unitSearch, units]);
-
-  const filteredPositionTree = useMemo(() => {
-    const query = positionSearch.trim().toLowerCase();
-    if (!query) {
-      return positionTree;
-    }
-
-    const filterNode = (node: PositionTreeNode): PositionTreeNode | null => {
-      const label = `${getLocaleLabel(node.name, node.key)} ${node.key}`.toLowerCase();
-      const matchingChildren = node.children
-        .map((child) => filterNode(child))
-        .filter(Boolean) as PositionTreeNode[];
-
-      if (label.includes(query) || matchingChildren.length) {
-        return { ...node, children: matchingChildren };
-      }
-
-      return null;
-    };
-
-    return positionTree.map((node) => filterNode(node)).filter(Boolean) as PositionTreeNode[];
-  }, [positionSearch, positionTree]);
-
-  const filteredPositionMembers = useMemo(() => {
-    const query = employeeSearch.trim().toLowerCase();
-    if (!query) {
-      return positionMembers;
-    }
-
-    return positionMembers.filter((employee) => {
-      const name = getLocaleLabel(employee.name ?? employee.user?.name, employee.user?.email ?? employee.id).toLowerCase();
-      const email = employee.user?.email?.toLowerCase() ?? "";
-      const username = employee.user?.username?.toLowerCase() ?? "";
-      return name.includes(query) || email.includes(query) || username.includes(query);
-    });
-  }, [employeeSearch, positionMembers]);
-
-  const assignableEmployees = useMemo(() => {
-    const query = assignSearch.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() ?? "";
-      if (!query) {
-        return true;
-      }
-      return label.includes(query) || email.includes(query);
-    });
-  }, [assignSearch, orgEmployees]);
-
-  const resetMessages = () => {
-    setActionError(null);
-    setActionSuccess(null);
-  };
-
-  const loadOrganizations = useCallback(async () => {
-    setLoading(true);
-    setLoadError(null);
-
-    try {
-      const response = await api.get<ListResponse<OrganizationRecord>>("/organizations");
-      const nextOrganizations = getItems(response.data);
-      setOrganizations(nextOrganizations);
-    } 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);
-    }
-  }, []);
-
-  const loadOrgAdmins = useCallback(async (organizationId: string) => {
-    try {
-      const response = await api.get<ListResponse<EmployeeRecord>>(
-        `/organizations/org-admins/${organizationId}`,
-      );
-      setOrgAdminUserIds(
-        new Set(getItems(response.data).map((employee) => employee.user?.id).filter(Boolean) as string[]),
-      );
-    } catch {
-      setOrgAdminUserIds(new Set());
-    }
-  }, []);
-
-  const loadUnitAdmins = useCallback(async (unitId: string | null) => {
-    if (!unitId) {
-      setUnitAdminUserIds(new Set());
-      return;
-    }
-
-    try {
-      const response = await api.get<ListResponse<EmployeeRecord>>(`/units/unit-admins/${unitId}`);
-      setUnitAdminUserIds(
-        new Set(getItems(response.data).map((employee) => employee.user?.id).filter(Boolean) as string[]),
-      );
-    } catch {
-      setUnitAdminUserIds(new Set());
-    }
-  }, []);
-
-  const loadUnits = useCallback(async (organizationId: string) => {
-    try {
-      const response = await api.get<ListResponse<UnitRecord>>(`/units/list/${organizationId}`);
-      setUnits(getItems(response.data));
-    } catch (error) {
-      setLoadError(getErrorMessage(error, "Failed to load units."));
-      setUnits([]);
-    }
-  }, []);
-
-  const loadOrganizationConfiguration = useCallback(async (organizationId: string) => {
-    try {
-      const response = await api.get<ListResponse<OrganizationConfigurationRecord>>(
-        `/organization-configurations/list/${organizationId}`,
-      );
-      setSelectedOrgConfiguration(getItems(response.data)[0] ?? null);
-    } catch {
-      setSelectedOrgConfiguration(null);
-    }
-  }, []);
-
-  const loadPositions = useCallback(async (unitId: string) => {
-    try {
-      const response = await api.get<ListResponse<PositionRecord>>(`/positions/list/${unitId}`);
-      setPositions(getItems(response.data));
-    } catch (error) {
-      setLoadError(getErrorMessage(error, "Failed to load positions."));
-      setPositions([]);
-    }
-  }, []);
-
-  const loadPositionTypes = useCallback(async (unitId: string) => {
-    setPositionTypesLoading(true);
-    setPositionTypesError(null);
-
-    try {
-      const response = await api.get<ListResponse<PositionTypeRecord>>(
-        `/position-types/list-with-commons/${unitId}?take=1000&skip=0&orderBy=createdAt:Desc`,
-      );
-      setPositionTypes(getItems(response.data));
-    } catch (error) {
-      const message = getErrorMessage(error, "Failed to load position types.");
-      setPositionTypes([]);
-      setPositionTypesError(message);
-      throw error;
-    } finally {
-      setPositionTypesLoading(false);
-    }
-  }, []);
-
-  const loadPositionMembers = useCallback(async (positionId: string | null) => {
-    if (!positionId) {
-      setPositionMembers([]);
-      return;
-    }
-
-    setMembersLoading(true);
-
-    try {
-      const response = await api.get<ListResponse<EmployeeRecord>>(
-        `/positions/current/${positionId}/employees`,
-      );
-      setPositionMembers(getItems(response.data));
-    } catch {
-      setPositionMembers([]);
-    } finally {
-      setMembersLoading(false);
-    }
-  }, []);
-
-  const refreshOrganizations = useCallback(async () => {
-    await loadOrganizations();
-  }, [loadOrganizations]);
-
-  const refreshSelectedOrg = useCallback(async () => {
-    if (!selectedOrgId) {
-      setUnits([]);
-      setPositions([]);
-      setPositionMembers([]);
-      setOrgEmployees([]);
-      setSelectedOrgConfiguration(null);
-      return;
-    }
-
-    await Promise.all([
-      loadUnits(selectedOrgId),
-      loadOrgEmployees(selectedOrgId),
-      loadOrgAdmins(selectedOrgId),
-      loadOrganizationConfiguration(selectedOrgId),
-    ]);
-  }, [loadOrgAdmins, loadOrgEmployees, loadOrganizationConfiguration, loadUnits, selectedOrgId]);
-
-  const refreshSelectedUnit = useCallback(async () => {
-    if (!selectedUnitId) {
-      setPositions([]);
-      setPositionTypes([]);
-      setPositionTypesError(null);
-      setPositionMembers([]);
-      setUnitAdminUserIds(new Set());
-      return;
-    }
-
-    await Promise.all([
-      loadPositions(selectedUnitId),
-      loadPositionTypes(selectedUnitId),
-      loadUnitAdmins(selectedUnitId),
-    ]);
-  }, [loadPositionTypes, loadPositions, loadUnitAdmins, selectedUnitId]);
-
-  useEffect(() => {
-    void loadOrganizations();
-  }, [loadOrganizations]);
-
-  useEffect(() => {
-    if (!visibleOrganizations.length) {
-      setSelectedOrgId(null);
-      setSelectedOrgConfiguration(null);
-      setUnits([]);
-      setPositions([]);
-      setPositionMembers([]);
-      setOrgEmployees([]);
-      return;
-    }
-
-    if (selectedOrgId && visibleOrganizations.some((organization) => organization.id === selectedOrgId)) {
-      return;
-    }
-
-    setSelectedOrgId(visibleOrganizations[0]?.id ?? null);
-    setSelectedOrgConfiguration(null);
-    setUnits([]);
-    setPositions([]);
-    setPositionMembers([]);
-    setOrgEmployees([]);
-  }, [selectedOrgId, visibleOrganizations]);
-
-  useEffect(() => {
-    if (!selectedOrgId) {
-      return;
-    }
-
-    void refreshSelectedOrg();
-  }, [refreshSelectedOrg, selectedOrgId]);
-
-  useEffect(() => {
-    if (!selectedOrgId) {
-      setUnits([]);
-      setPositions([]);
-      setPositionTypes([]);
-      setPositionTypesError(null);
-      setSelectedUnitId(null);
-      setSelectedPositionId(null);
-      setExpandedDepartmentIds(new Set());
-      setPositionMembers([]);
-      setOrgEmployees([]);
-      setOrgAdminUserIds(new Set());
-      setSelectedOrgConfiguration(null);
-      return;
-    }
-  }, [selectedOrgId]);
-
-  useEffect(() => {
-    if (!selectedOrgId || !selectedUnitId) {
-      return;
-    }
-
-    if (units.some((unit) => unit.id === selectedUnitId)) {
-      return;
-    }
-
-    setSelectedUnitId(units[0]?.id ?? null);
-  }, [selectedOrgId, selectedUnitId, units]);
-
-  useEffect(() => {
-    if (!selectedOrgId || !units.length) {
-      return;
-    }
-
-    if (selectedUnitId && units.some((unit) => unit.id === selectedUnitId)) {
-      return;
-    }
-
-    setSelectedUnitId(units[0]?.id ?? null);
-  }, [selectedOrgId, selectedUnitId, units]);
-
-  useEffect(() => {
-    if (!selectedUnitId) {
-      setPositions([]);
-      setPositionTypes([]);
-      setPositionTypesError(null);
-      setSelectedPositionId(null);
-      setExpandedDepartmentIds(new Set());
-      setPositionMembers([]);
-      setUnitAdminUserIds(new Set());
-      return;
-    }
-  }, [selectedUnitId]);
-
-  useEffect(() => {
-    if (!selectedUnitId) {
-      return;
-    }
-
-    void refreshSelectedUnit();
-  }, [refreshSelectedUnit, selectedUnitId]);
-
-  useEffect(() => {
-    if (!selectedUnitId || !selectedPositionId) {
-      return;
-    }
-
-    if (!positions.some((position) => position.id === selectedPositionId)) {
-      setSelectedPositionId(null);
-    }
-  }, [positions, selectedPositionId, selectedUnitId]);
-
-  useEffect(() => {
-    if (!selectedPositionId) {
-      setPositionMembers([]);
-      return;
-    }
-  }, [selectedPositionId]);
-
-  useEffect(() => {
-    void loadPositionMembers(selectedPositionId);
-  }, [loadPositionMembers, selectedPositionId]);
-
-  const handleRefresh = async () => {
-    resetMessages();
-    await Promise.all([
-      refreshOrganizations(),
-      selectedOrgId ? refreshSelectedOrg() : Promise.resolve(),
-      selectedUnitId ? refreshSelectedUnit() : Promise.resolve(),
-      loadPositionMembers(selectedPositionId),
-    ]);
-  };
-
-  const handleSelectOrganization = async (organizationId: string) => {
-    setSelectedOrgId(organizationId);
-    setSelectedUnitId(null);
-    setSelectedPositionId(null);
-    setExpandedDepartmentIds(new Set());
-    setUnits([]);
-    setPositions([]);
-    setPositionMembers([]);
-    setOrgEmployees([]);
-    setOrgAdminUserIds(new Set());
-    setUnitAdminUserIds(new Set());
-    setSelectedOrgConfiguration(null);
-    resetMessages();
-
-    try {
-      await Promise.all([
-        loadUnits(organizationId),
-        loadOrgEmployees(organizationId),
-        loadOrgAdmins(organizationId),
-        loadOrganizationConfiguration(organizationId),
-      ]);
-    } catch {
-      // Individual loaders already handle their own error state.
-    }
-  };
-
-  const handleSelectUnit = async (unitId: string) => {
-    setSelectedUnitId(unitId);
-    setSelectedPositionId(null);
-    setExpandedDepartmentIds(new Set());
-    setPositions([]);
-    setPositionTypes([]);
-    setPositionTypesError(null);
-    setPositionMembers([]);
-    setUnitAdminUserIds(new Set());
-    resetMessages();
-  };
-
-  const handleToggleDepartment = (departmentId: string) => {
-    setExpandedDepartmentIds((current) => {
-      const next = new Set(current);
-      if (next.has(departmentId)) {
-        next.delete(departmentId);
-      } else {
-        next.add(departmentId);
-      }
-      return next;
-    });
-  };
-
-  const openCreateSubDepartmentDialog = async (parent: PositionRecord) => {
-    if (!selectedUnit) {
-      setActionError("Select a unit before creating a department.");
-      return;
-    }
-
-    resetMessages();
-
-    try {
-      await loadPositionTypes(selectedUnit.id);
-      setSelectedPositionId(parent.id);
-      setExpandedDepartmentIds((current) => new Set(current).add(parent.id));
-      setCreatePositionMode("create-child");
-      setPositionForm({
-        ...emptyPositionForm,
-        parentPositionId: parent.id,
-      });
-      setIsCreatePositionOpen(true);
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to load position types."));
-    }
-  };
-
-  const openInviteForDepartment = (position: PositionRecord) => {
-    setSelectedPositionId(position.id);
-    resetMessages();
-    setIsInviteEmployeeOpen(true);
-  };
-
-  const openAssignForDepartment = (position: PositionRecord) => {
-    setSelectedPositionId(position.id);
-    resetMessages();
-    setIsAssignEmployeeOpen(true);
-  };
-
-  const openCreateUnitDialog = () => {
-    setUnitForm(emptyUnitForm);
-    resetMessages();
-    setIsCreateUnitOpen(true);
-  };
-
-  const openEditUnitDialog = (unit: UnitRecord) => {
-    setUnitForm({
-      nameEn: unit.name.en ?? "",
-      nameAm: unit.name.am ?? "",
-      key: unit.key,
-    });
-    resetMessages();
-    setIsEditUnitOpen(true);
-  };
-
-  const openCreatePositionDialog = async (
-    mode: "create-root" | "create-child",
-    unitId = selectedUnit?.id,
-  ) => {
-    if (!unitId) {
-      setActionError("Select a unit before creating a department.");
-      return;
-    }
-
-    resetMessages();
-
-    try {
-      await loadPositionTypes(unitId);
-      setCreatePositionMode(mode);
-      setPositionForm({
-        ...emptyPositionForm,
-        parentPositionId: mode === "create-child" && selectedPosition ? selectedPosition.id : "",
-      });
-      setIsCreatePositionOpen(true);
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to load position types."));
-    }
-  };
-
-  const openEditPositionDialog = async (position: PositionRecord) => {
-    if (!selectedUnit) {
-      setActionError("Select a unit before editing a department.");
-      return;
-    }
-
-    resetMessages();
-
-    try {
-      await loadPositionTypes(selectedUnit.id);
-      setPositionForm({
-        id: position.id,
-        nameEn: position.name.en ?? "",
-        nameAm: position.name.am ?? "",
-        key: position.key,
-        parentPositionId: position.parentPositionId ?? "",
-        positionTypeId: position.positionTypeId ?? "",
-      });
-      setIsEditPositionOpen(true);
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to load position types."));
-    }
-  };
-
-  const handleCreateUnit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    if (!selectedOrganization) {
-      return;
-    }
-
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      await api.post("/units", {
-        name: { am: unitForm.nameAm.trim(), en: unitForm.nameEn.trim() },
-        key: unitForm.key.trim(),
-        organizationId: selectedOrganization.id,
-      });
-      setActionSuccess("Unit created.");
-      setIsCreateUnitOpen(false);
-      await refreshSelectedOrg();
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to create unit."));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleUpdateUnit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    if (!selectedOrganization || !selectedUnit) {
-      return;
-    }
-
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      await api.put(`/units/${selectedUnit.id}`, {
-        name: { am: unitForm.nameAm.trim(), en: unitForm.nameEn.trim() },
-        key: unitForm.key.trim(),
-        organizationId: selectedOrganization.id,
-      });
-      setActionSuccess("Unit updated.");
-      setIsEditUnitOpen(false);
-      await refreshSelectedOrg();
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to update unit."));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleDeleteUnit = async (unit: UnitRecord) => {
-    if (!unit) {
-      return;
-    }
-
-    if (!window.confirm(`Delete unit '${getLocaleLabel(unit.name, unit.key)}'?`)) {
-      return;
-    }
-
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      await api.delete(`/units/${unit.id}`);
-      setActionSuccess("Unit deleted.");
-      await refreshSelectedOrg();
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to delete unit."));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleSavePosition = async (event: React.FormEvent<HTMLFormElement>, isEditing: boolean) => {
-    event.preventDefault();
-    if (!selectedOrganization || !selectedUnit) {
-      setActionError("Select a unit before managing positions.");
-      return;
-    }
-
-    if (!positionForm.positionTypeId) {
-      setActionError("Select a position type before saving the department.");
-      return;
-    }
-
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      const payload = {
-        id: positionForm.id,
-        name: { am: positionForm.nameAm.trim(), en: positionForm.nameEn.trim() },
-        key: positionForm.key.trim(),
-        unitId: selectedUnit.id,
-        organizationId: selectedOrganization.id,
-        parentPositionId: positionForm.parentPositionId || null,
-        positionTypeId: positionForm.positionTypeId,
-        rank: 0,
-      };
-
-      if (isEditing && positionForm.id) {
-        const existing = positions.find((item) => item.id === positionForm.id);
-        await api.put(`/positions/${positionForm.id}`, payload);
-
-        if ((existing?.parentPositionId ?? "") !== (positionForm.parentPositionId || "")) {
-          await api.patch("/positions/change-parent", {
-            positionId: positionForm.id,
-            newParentId: positionForm.parentPositionId || null,
-          });
-        }
-
-        setActionSuccess("Position updated.");
-        setIsEditPositionOpen(false);
-      } else {
-        await api.post("/positions", payload);
-        setActionSuccess("Position created.");
-        setIsCreatePositionOpen(false);
-      }
-
-      await refreshSelectedUnit();
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to save position."));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleDeletePosition = async (position: PositionRecord) => {
-    if (!position) {
-      return;
-    }
-
-    if (!window.confirm(`Delete position '${getLocaleLabel(position.name, position.key)}'?`)) {
-      return;
-    }
-
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      await api.delete(`/positions/${position.id}`);
-      setActionSuccess("Position deleted.");
-      await refreshSelectedUnit();
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to delete position."));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleInviteEmployee = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    if (!selectedPosition) {
-      setActionError("Select a position before inviting an employee.");
-      return;
-    }
-
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      await api.post("/employee-positions/invite", {
-        positionId: selectedPosition.id,
-        username: inviteForm.username.trim(),
-        phoneNumber: inviteForm.phoneNumber.trim(),
-        email: inviteForm.email.trim(),
-        name: { am: inviteForm.nameAm.trim(), en: inviteForm.nameEn.trim() },
-      });
-      setInviteForm(emptyInviteForm);
-      setActionSuccess("Employee invited and assigned to the selected position.");
-      setIsInviteEmployeeOpen(false);
-      await Promise.all([loadOrgEmployees(selectedOrgId!), loadPositionMembers(selectedPosition.id)]);
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to invite employee."));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleAssignEmployee = async (employeeId: string) => {
-    if (!selectedPosition) {
-      return;
-    }
-
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      await api.post("/employee-positions/assign", {
-        positionId: selectedPosition.id,
-        employeeId,
-      });
-      setActionSuccess("Employee assigned to the selected position.");
-      setIsAssignEmployeeOpen(false);
-      setAssignSearch("");
-      await Promise.all([loadOrgEmployees(selectedOrgId!), loadPositionMembers(selectedPosition.id)]);
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to assign employee."));
-    } 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.");
-      await Promise.all([loadOrgEmployees(selectedOrgId!), loadPositionMembers(selectedPositionId)]);
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to update user status."));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleAdminRoleMutation = async (
-    endpoint: string,
-    payload: { organizationId?: string; unitId?: string; userId: string },
-    successMessage: string,
-  ) => {
-    setSubmitting(true);
-    resetMessages();
-
-    try {
-      await api.post(endpoint, payload);
-      setActionSuccess(successMessage);
-      await Promise.all([
-        selectedOrgId ? loadOrgAdmins(selectedOrgId) : Promise.resolve(),
-        loadUnitAdmins(selectedUnitId),
-      ]);
-    } catch (error) {
-      setActionError(getErrorMessage(error, "Failed to update admin role."));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  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 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);
-    }
-  };
-
-  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">Organization workspace</h1>
-              <p className="max-w-3xl text-sm text-muted-foreground">
-                Manage organizations, branches, departments, team members, and admin access from a
-                single SmartOffice-style workspace.
-              </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 user management 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 flex items-center justify-between gap-3">
-              <div>
-                <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>
-            </div>
-
-            {visibleOrganizations.length ? (
-              <ul className="space-y-2">
-                {visibleOrganizations.map((organization) => {
-                  const isActive = selectedOrgId === organization.id;
-                  const isDisabled = !isSuperAdmin;
-
-                  return (
-                    <li key={organization.id} className="group">
-                      <div
-                        className={`flex w-full items-center 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" : ""}`}
-                      >
-                        <button
-                          type="button"
-                          disabled={isDisabled}
-                          onClick={() => void handleSelectOrganization(organization.id)}
-                          className="flex min-w-0 flex-1 items-center justify-between gap-2 text-left"
-                        >
-                          <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>
-                          ) : (
-                            <ChevronRight className="h-4 w-4 text-muted-foreground" />
-                          )}
-                        </button>
-
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <button
-                              type="button"
-                              disabled={submitting}
-                              onClick={(event) => event.stopPropagation()}
-                              className="inline-flex h-9 w-9 items-center justify-center rounded-xl border border-border bg-card text-card-foreground opacity-0 transition group-hover:opacity-100 group-focus-within:opacity-100 hover:bg-accent hover:text-accent-foreground"
-                              aria-label="Organization actions"
-                            >
-                              <MoreHorizontal className="h-4 w-4" />
-                            </button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="end">
-                            <DropdownMenuItem
-                              onSelect={(event) => {
-                                event.preventDefault();
-                                void handleSelectOrganization(organization.id);
-                                openCreateUnitDialog();
-                              }}
-                            >
-                              Create unit
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
-                      </div>
-                    </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>
-            )}
-
-          </aside>
-
-          <aside className="rounded-3xl border border-border bg-card p-5 shadow-sm">
-            <div className="mb-5 flex items-center justify-between gap-3">
-              <div>
-                <h2 className="text-lg font-semibold text-card-foreground">Units</h2>
-                <p className="text-sm text-muted-foreground">
-                  {selectedOrganization
-                    ? 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">
-                {`${units.length}/${unitsAllowedLabel}`}
-              </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={unitSearch}
-                onChange={(event) => setUnitSearch(event.target.value)}
-                placeholder="Search units"
-              />
-            </div>
-
-            {filteredUnits.length ? (
-              <ul className="space-y-2">
-                {filteredUnits.map((item) => {
-                  const isActive = selectedUnit?.id === item.id;
-
-                  return (
-                    <li key={item.id} className="group">
-                      <div
-                        className={`flex w-full items-center 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"
-                        }`}
-                      >
-                        <button
-                          type="button"
-                          onClick={() => void handleSelectUnit(item.id)}
-                          className="flex min-w-0 flex-1 items-center justify-between gap-2 text-left"
-                        >
-                          <div className="min-w-0">
-                            <div className="truncate font-medium">{getLocaleLabel(item.name, item.key)}</div>
-                            <div className="truncate text-xs text-muted-foreground">{item.key}</div>
-                          </div>
-                          <ChevronRight className="h-4 w-4 text-muted-foreground" />
-                        </button>
-
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <button
-                              type="button"
-                              disabled={submitting}
-                              onClick={(event) => event.stopPropagation()}
-                              className="inline-flex h-9 w-9 items-center justify-center rounded-xl border border-border bg-card text-card-foreground opacity-0 transition group-hover:opacity-100 group-focus-within:opacity-100 hover:bg-accent hover:text-accent-foreground"
-                              aria-label="Unit actions"
-                            >
-                              <MoreHorizontal className="h-4 w-4" />
-                            </button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="end">
-                            <DropdownMenuItem
-                              onSelect={(event) => {
-                                event.preventDefault();
-                                void (async () => {
-                                  await handleSelectUnit(item.id);
-                                  await openCreatePositionDialog("create-root", item.id);
-                                })();
-                              }}
-                            >
-                              Add Department
-                            </DropdownMenuItem>
-                            <DropdownMenuSeparator />
-                            <DropdownMenuItem
-                              onSelect={(event) => {
-                                event.preventDefault();
-                                setSelectedUnitId(item.id);
-                                openEditUnitDialog(item);
-                              }}
-                            >
-                              Edit Unit
-                            </DropdownMenuItem>
-                            <DropdownMenuSeparator />
-                            <DropdownMenuItem
-                              variant="destructive"
-                              onSelect={(event) => {
-                                event.preventDefault();
-                                setSelectedUnitId(item.id);
-                                void handleDeleteUnit(item);
-                              }}
-                            >
-                              Delete Unit
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
-                      </div>
-                    </li>
-                  );
-                })}
-              </ul>
-            ) : (
-              <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
-                {selectedOrganization ? "No units found." : "Select an organization to load units."}
-              </div>
-            )}
-          </aside>
-
-          <aside className="rounded-3xl border border-border bg-card p-5 shadow-sm">
-            <div className="mb-5 flex items-center justify-between gap-3">
-              <div>
-                <h2 className="text-lg font-semibold text-card-foreground">Departments</h2>
-                <p className="text-sm text-muted-foreground">
-                  {selectedUnit ? getLocaleLabel(selectedUnit.name, selectedUnit.key) : "Select a unit"}
-                </p>
-              </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={positionSearch}
-                onChange={(event) => setPositionSearch(event.target.value)}
-                placeholder="Search departments"
-              />
-            </div>
-
-            {filteredPositionTree.length ? (
-              <ul className="space-y-2">
-                {filteredPositionTree.map((node) => (
-                  <TreeNode
-                    key={node.id}
-                    node={node}
-                    selectedPositionId={selectedPositionId}
-                    onSelect={(position) => setSelectedPositionId(position.id)}
-                    expandedDepartmentIds={expandedDepartmentIds}
-                    onToggleExpand={handleToggleDepartment}
-                    onInviteUser={openInviteForDepartment}
-                    onAssignUser={openAssignForDepartment}
-                    onAddSubDepartment={openCreateSubDepartmentDialog}
-                    onEdit={(position) => {
-                      setSelectedPositionId(position.id);
-                      void openEditPositionDialog(position);
-                    }}
-                    onDelete={(position) => {
-                      setSelectedPositionId(position.id);
-                      void handleDeletePosition(position);
-                    }}
-                    disabled={!selectedUnit || submitting}
-                  />
-                ))}
-              </ul>
-            ) : (
-              <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
-                {selectedUnit ? "No departments found." : "Select a unit to load departments."}
-              </div>
-            )}
-          </aside>
-
-          <section className="rounded-3xl border border-border bg-card p-5 shadow-sm">
-              <div className="mb-5">
-                <div>
-                  <h2 className="text-lg font-semibold text-card-foreground">Team members</h2>
-                  <p className="text-sm text-muted-foreground">
-                    {selectedPosition
-                      ? `${getLocaleLabel(selectedPosition.name, selectedPosition.key)} in ${getLocaleLabel(selectedUnit?.name, selectedUnit?.key ?? "")}`
-                      : "Select a department"}
-                  </p>
-                </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={employeeSearch}
-                  onChange={(event) => setEmployeeSearch(event.target.value)}
-                placeholder="Search team members"
-                />
-              </div>
-
-              {membersLoading ? (
-                <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
-                  Loading team members...
-                </div>
-              ) : filteredPositionMembers.length ? (
-                <div className="space-y-3">
-                  {filteredPositionMembers.map((employee) => {
-                    const userId = employee.user?.id;
-                    const isOrgAdmin = Boolean(userId && orgAdminUserIds.has(userId));
-                    const isUnitAdmin = Boolean(userId && unitAdminUserIds.has(userId));
-                    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>
-                              {isOrgAdmin ? (
-                                <Badge className="bg-green-100 text-green-700">Org admin</Badge>
-                              ) : null}
-                              {isUnitAdmin ? (
-                                <Badge className="bg-sky-100 text-sky-700">Unit admin</Badge>
-                              ) : null}
-                              {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>
-                            {assignedPositions ? (
-                              <div className="text-sm text-muted-foreground">
-                                Current positions: {assignedPositions}
-                              </div>
-                            ) : null}
-                          </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 handleAdminRoleMutation(
-                                  isOrgAdmin
-                                    ? "/user-roles/remove-org-admin-role"
-                                    : "/user-roles/assign-org-admin-role",
-                                  {
-                                    organizationId: selectedOrgId ?? undefined,
-                                    userId: userId!,
-                                  },
-                                  isOrgAdmin ? "Organization admin removed." : "Organization admin assigned.",
-                                )
-                              }
-                              className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                            >
-                              <ShieldCheck className="h-4 w-4" />
-                              {isOrgAdmin ? "Remove org admin" : "Make org admin"}
-                            </button>
-
-                            <button
-                              type="button"
-                              disabled={!userId || !selectedUnitId || submitting}
-                              onClick={() =>
-                                void handleAdminRoleMutation(
-                                  isUnitAdmin
-                                    ? "/user-roles/remove-unit-admin-role"
-                                    : "/user-roles/assign-unit-admin-role",
-                                  {
-                                    unitId: selectedUnitId ?? undefined,
-                                    userId: userId!,
-                                  },
-                                  isUnitAdmin ? "Unit admin removed." : "Unit admin assigned.",
-                                )
-                              }
-                              className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                            >
-                              <ShieldCheck className="h-4 w-4" />
-                              {isUnitAdmin ? "Remove unit admin" : "Make unit admin"}
-                            </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">
-                  No team members found for this department.
-                </div>
-              )}
-          </section>
-        </div>
-      )}
-
-      <ManagementDialog
-        open={isCreateUnitOpen}
-        onOpenChange={setIsCreateUnitOpen}
-        title="Create unit"
-        description="Add a new branch under the selected organization."
-      >
-        <form className="space-y-4" onSubmit={handleCreateUnit}>
-          <Field label="English name">
-            <input
-              className={inputClassName}
-              value={unitForm.nameEn}
-              onChange={(event) => setUnitForm((current) => ({ ...current, nameEn: event.target.value }))}
-            />
-          </Field>
-          <Field label="Amharic name">
-            <input
-              className={inputClassName}
-              value={unitForm.nameAm}
-              onChange={(event) => setUnitForm((current) => ({ ...current, nameAm: event.target.value }))}
-            />
-          </Field>
-          <Field label="Key">
-            <div className="flex gap-2">
-              <input
-                className={inputClassName}
-                value={unitForm.key}
-                onChange={(event) => setUnitForm((current) => ({ ...current, key: event.target.value }))}
-              />
-              <button
-                type="button"
-                className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                onClick={() => setUnitForm((current) => ({ ...current, key: toInternalKey(current.nameEn) }))}
-              >
-                Generate
-              </button>
-            </div>
-          </Field>
-          <div className="flex justify-end gap-2">
-            <button
-              type="button"
-              onClick={() => setIsCreateUnitOpen(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`}>
-              Save unit
-            </button>
-          </div>
-        </form>
-      </ManagementDialog>
-
-      <ManagementDialog
-        open={isEditUnitOpen}
-        onOpenChange={setIsEditUnitOpen}
-        title="Edit unit"
-        description="Update the selected branch."
-      >
-        <form className="space-y-4" onSubmit={handleUpdateUnit}>
-          <Field label="English name">
-            <input
-              className={inputClassName}
-              value={unitForm.nameEn}
-              onChange={(event) => setUnitForm((current) => ({ ...current, nameEn: event.target.value }))}
-            />
-          </Field>
-          <Field label="Amharic name">
-            <input
-              className={inputClassName}
-              value={unitForm.nameAm}
-              onChange={(event) => setUnitForm((current) => ({ ...current, nameAm: event.target.value }))}
-            />
-          </Field>
-          <Field label="Key">
-            <input
-              className={inputClassName}
-              value={unitForm.key}
-              onChange={(event) => setUnitForm((current) => ({ ...current, key: event.target.value }))}
-            />
-          </Field>
-          <div className="flex justify-end gap-2">
-            <button
-              type="button"
-              onClick={() => setIsEditUnitOpen(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`}>
-              Save changes
-            </button>
-          </div>
-        </form>
-      </ManagementDialog>
-
-      <ManagementDialog
-        open={isCreatePositionOpen}
-        onOpenChange={setIsCreatePositionOpen}
-        title={createPositionMode === "create-root" ? "Create root position" : "Create child position"}
-        description="Add a department or sub-department under the selected branch."
-      >
-        <form className="space-y-4" onSubmit={(event) => void handleSavePosition(event, false)}>
-          <Field label="English name">
-            <input
-              className={inputClassName}
-              value={positionForm.nameEn}
-              onChange={(event) =>
-                setPositionForm((current) => ({ ...current, nameEn: event.target.value }))
-              }
-            />
-          </Field>
-          <Field label="Amharic name">
-            <input
-              className={inputClassName}
-              value={positionForm.nameAm}
-              onChange={(event) =>
-                setPositionForm((current) => ({ ...current, nameAm: event.target.value }))
-              }
-            />
-          </Field>
-          <Field label="Key">
-            <div className="flex gap-2">
-              <input
-                className={inputClassName}
-                value={positionForm.key}
-                onChange={(event) => setPositionForm((current) => ({ ...current, key: event.target.value }))}
-              />
-              <button
-                type="button"
-                className={`${buttonClassName} border border-border bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground`}
-                onClick={() => setPositionForm((current) => ({ ...current, key: toInternalKey(current.nameEn) }))}
-              >
-                Generate
-              </button>
-            </div>
-          </Field>
-          <Field label="Position type">
-            <Select
-              value={positionForm.positionTypeId || undefined}
-              onValueChange={(value) =>
-                setPositionForm((current) => ({ ...current, positionTypeId: value }))
-              }
-              disabled={positionTypesLoading || submitting}
-            >
-              <SelectTrigger className="w-full rounded-xl">
-                <SelectValue
-                  placeholder={positionTypesLoading ? "Loading position types..." : "Select position type"}
-                />
-              </SelectTrigger>
-              <SelectContent>
-                {positionTypes.map((positionType) => (
-                  <SelectItem key={positionType.id} value={positionType.id}>
-                    {getLocaleLabel(positionType.name, positionType.key)}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            {positionTypesError ? (
-              <p className="mt-2 text-xs text-destructive">{positionTypesError}</p>
-            ) : null}
-          </Field>
-          <Field label="Parent position">
-            <select
-              className={inputClassName}
-              value={positionForm.parentPositionId}
-              onChange={(event) =>
-                setPositionForm((current) => ({ ...current, parentPositionId: event.target.value }))
-              }
-            >
-              <option value="">No parent</option>
-              {parentOptions.map((position) => (
-                <option key={position.id} value={position.id}>
-                  {getLocaleLabel(position.name, position.key)}
-                </option>
-              ))}
-            </select>
-          </Field>
-          <div className="flex justify-end gap-2">
-            <button
-              type="button"
-              onClick={() => setIsCreatePositionOpen(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`}>
-              Save position
-            </button>
-          </div>
-        </form>
-      </ManagementDialog>
-
-      <ManagementDialog
-        open={isEditPositionOpen}
-        onOpenChange={setIsEditPositionOpen}
-        title="Edit position"
-        description="Update the selected department or move it under a different parent."
-      >
-        <form className="space-y-4" onSubmit={(event) => void handleSavePosition(event, true)}>
-          <Field label="English name">
-            <input
-              className={inputClassName}
-              value={positionForm.nameEn}
-              onChange={(event) =>
-                setPositionForm((current) => ({ ...current, nameEn: event.target.value }))
-              }
-            />
-          </Field>
-          <Field label="Amharic name">
-            <input
-              className={inputClassName}
-              value={positionForm.nameAm}
-              onChange={(event) =>
-                setPositionForm((current) => ({ ...current, nameAm: event.target.value }))
-              }
-            />
-          </Field>
-          <Field label="Key">
-            <input
-              className={inputClassName}
-              value={positionForm.key}
-              onChange={(event) => setPositionForm((current) => ({ ...current, key: event.target.value }))}
-            />
-          </Field>
-          <Field label="Position type">
-            <Select
-              value={positionForm.positionTypeId || undefined}
-              onValueChange={(value) =>
-                setPositionForm((current) => ({ ...current, positionTypeId: value }))
-              }
-              disabled={positionTypesLoading || submitting}
-            >
-              <SelectTrigger className="w-full rounded-xl">
-                <SelectValue
-                  placeholder={positionTypesLoading ? "Loading position types..." : "Select position type"}
-                />
-              </SelectTrigger>
-              <SelectContent>
-                {positionTypes.map((positionType) => (
-                  <SelectItem key={positionType.id} value={positionType.id}>
-                    {getLocaleLabel(positionType.name, positionType.key)}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            {positionTypesError ? (
-              <p className="mt-2 text-xs text-destructive">{positionTypesError}</p>
-            ) : null}
-          </Field>
-          <Field label="Parent position">
-            <select
-              className={inputClassName}
-              value={positionForm.parentPositionId}
-              onChange={(event) =>
-                setPositionForm((current) => ({ ...current, parentPositionId: event.target.value }))
-              }
-            >
-              <option value="">No parent</option>
-              {parentOptions.map((position) => (
-                <option key={position.id} value={position.id}>
-                  {getLocaleLabel(position.name, position.key)}
-                </option>
-              ))}
-            </select>
-          </Field>
-          <div className="flex justify-end gap-2">
-            <button
-              type="button"
-              onClick={() => setIsEditPositionOpen(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`}>
-              Save changes
-            </button>
-          </div>
-        </form>
-      </ManagementDialog>
-
-      <ManagementDialog
-        open={isInviteEmployeeOpen}
-        onOpenChange={setIsInviteEmployeeOpen}
-        title="Invite employee"
-        description="Create and assign a new employee to the selected position."
-      >
-        <form className="space-y-4" onSubmit={handleInviteEmployee}>
-          <Field label="English name">
-            <input
-              className={inputClassName}
-              value={inviteForm.nameEn}
-              onChange={(event) => setInviteForm((current) => ({ ...current, nameEn: event.target.value }))}
-            />
-          </Field>
-          <Field label="Amharic name">
-            <input
-              className={inputClassName}
-              value={inviteForm.nameAm}
-              onChange={(event) => setInviteForm((current) => ({ ...current, nameAm: event.target.value }))}
-            />
-          </Field>
-          <Field label="Email">
-            <input
-              className={inputClassName}
-              type="email"
-              value={inviteForm.email}
-              onChange={(event) => setInviteForm((current) => ({ ...current, email: event.target.value }))}
-            />
-          </Field>
-          <Field label="Username">
-            <input
-              className={inputClassName}
-              value={inviteForm.username}
-              onChange={(event) => setInviteForm((current) => ({ ...current, username: event.target.value }))}
-            />
-          </Field>
-          <Field label="Phone number">
-            <input
-              className={inputClassName}
-              value={inviteForm.phoneNumber}
-              onChange={(event) =>
-                setInviteForm((current) => ({ ...current, phoneNumber: event.target.value }))
-              }
-            />
-          </Field>
-          <div className="flex justify-end gap-2">
-            <button
-              type="button"
-              onClick={() => setIsInviteEmployeeOpen(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`}>
-              Send invite
-            </button>
-          </div>
-        </form>
-      </ManagementDialog>
-
-      <ManagementDialog
-        open={isAssignEmployeeOpen}
-        onOpenChange={setIsAssignEmployeeOpen}
-        title="Assign existing employee"
-        description="Browse all employees in the selected organization and assign one to the selected position."
-      >
-        <div className="space-y-4">
-          <div className="relative">
-            <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={assignSearch}
-              onChange={(event) => setAssignSearch(event.target.value)}
-              placeholder="Search organization employees"
-            />
-          </div>
-
-          <div className="max-h-[420px] space-y-2 overflow-y-auto pr-1">
-            {orgEmployeesLoading ? (
-              <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
-                Loading organization employees...
-              </div>
-            ) : assignableEmployees.length ? (
-              assignableEmployees.map((employee) => {
-                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 (
-                  <div
-                    key={employee.id}
-                    className="flex items-start justify-between gap-3 rounded-2xl border border-border bg-background p-4"
-                  >
-                    <div className="space-y-1">
-                      <div className="font-medium text-foreground">{displayName}</div>
-                      <div className="text-sm text-muted-foreground">
-                        {employee.user?.email || employee.user?.phoneNumber || "No contact info"}
-                      </div>
-                      {assignedPositions ? (
-                        <div className="text-sm text-muted-foreground">
-                          Existing positions: {assignedPositions}
-                        </div>
-                      ) : null}
-                    </div>
-                    <button
-                      type="button"
-                      disabled={submitting}
-                      onClick={() => void handleAssignEmployee(employee.id)}
-                      className={`${buttonClassName} bg-emerald-600 text-white hover:bg-emerald-700`}
-                    >
-                      Assign
-                    </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 employees found for this organization.
-              </div>
-            )}
-          </div>
-        </div>
-      </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 UserManagementPage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/UsersPage.tsx b/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/UsersPage.tsx
deleted file mode 100644
index 70d58d313..000000000
--- a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/UsersPage.tsx
+++ /dev/null
@@ -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;
diff --git a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/iamConfig.ts b/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/iamConfig.ts
deleted file mode 100644
index ec27b5c76..000000000
--- a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/iamConfig.ts
+++ /dev/null
@@ -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;
-      }
-    `,
-  },
-};
diff --git a/apps/edr-freight-web/backoffice/src/pages/fleet/FleetResourcePage.tsx b/apps/edr-freight-web/backoffice/src/pages/fleet/FleetResourcePage.tsx
index 93c02682a..395e360d5 100644
--- a/apps/edr-freight-web/backoffice/src/pages/fleet/FleetResourcePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/fleet/FleetResourcePage.tsx
@@ -4,7 +4,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 
 import { api } from "@/services/api";
 import Breadcrumbs from "@/components/ui/Breadcrumbs";
-import { Plus } from "lucide-react";
+import { Plus, Warehouse } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 import { Navigate, useLocation } from "react-router-dom";
 
@@ -14,6 +14,7 @@ import FleetHistoryModal from "@/components/fleet/FleetHistoryModal";
 import FleetRecordActions from "@/components/fleet/FleetRecordActions";
 import FleetToolbar from "@/components/fleet/FleetToolbar";
 import WagonMovementHistoryModal from "@/components/fleet/WagonMovementHistoryModal";
+import WagonYardWorkspaceModal from "@/components/wagons/WagonYardWorkspaceModal";
 import { formatFleetCell, registerFleetOptionLabels } from "@/components/fleet/fleetFormat";
 import { useFleetViewMode } from "@/components/fleet/useFleetViewMode";
 import { ruleEngineTable } from "@/components/ruleEngine/ruleEngineStyles";
@@ -46,6 +47,7 @@ const FleetResourcePage = () => {
   const [assigningDriver, setAssigningDriver] = useState<FleetRecord | null>(null);
   const [historyTarget, setHistoryTarget] = useState<FleetRecord | null>(null);
   const [selectedDriver, setSelectedDriver] = useState<string>("");
+  const [wagonWorkspaceOpen, setWagonWorkspaceOpen] = useState(false);
   const { viewMode, setViewMode } = useFleetViewMode(slug);
 
   const serverListFilters = useMemo((): FleetListFilters | undefined => {
@@ -369,12 +371,25 @@ const FleetResourcePage = () => {
               {config.subtitle}
             </Text>
           </div>
-          <Button leftSection={<Plus size={16} />} styles={{ label: { fontWeight: 500 } }} onClick={() => {
-            setEditing(null);
-            setFormOpen(true);
-          }}>
-            {config.addLabel}
-          </Button>
+          <Group gap="sm">
+            {slug === "wagons" ? (
+              <Button
+                variant="light"
+                color="edr-green"
+                leftSection={<Warehouse size={16} />}
+                styles={{ label: { fontWeight: 500 } }}
+                onClick={() => setWagonWorkspaceOpen(true)}
+              >
+                Yard Workspace
+              </Button>
+            ) : null}
+            <Button leftSection={<Plus size={16} />} styles={{ label: { fontWeight: 500 } }} onClick={() => {
+              setEditing(null);
+              setFormOpen(true);
+            }}>
+              {config.addLabel}
+            </Button>
+          </Group>
         </Group>
 
       <Card radius="lg" padding={0} withBorder style={{ borderColor: "var(--mantine-color-gray-2)" }}>
@@ -389,31 +404,28 @@ const FleetResourcePage = () => {
               onViewModeChange={setViewMode}
               filters={
                 listFilterSelects ? (
-                  <Group gap="xs" wrap="wrap">
+                  <Group gap="sm" wrap="wrap" align="center">
                     {listFilterSelects.map((filter) => (
-                      <Group key={filter.key} gap={4} wrap="wrap">
-                        <Text size="xs" fw={500} c="dimmed">{filter.label}:</Text>
-                        <Group gap={4} wrap="wrap">
-                          {filter.data.map((option) => (
-                            <Button
-                              key={option.value}
-                              size="xs"
-                              radius="md"
-                              variant={filter.value === option.value ? "filled" : "outline"}
-                              styles={{ label: { fontWeight: 500 } }}
-                              onClick={() => {
-                                setListFilterValues((prev) => ({
-                                  ...prev,
-                                  [filter.key]: option.value,
-                                }));
-                                setPagination((prev) => ({ ...prev, pageIndex: 0 }));
-                              }}
-                            >
-                              {option.label}
-                            </Button>
-                          ))}
-                        </Group>
-                      </Group>
+                      <Select
+                        key={filter.key}
+                        aria-label={filter.label}
+                        placeholder={filter.data[0]?.label ?? filter.label}
+                        data={filter.data}
+                        value={filter.value}
+                        onChange={(value) => {
+                          setListFilterValues((prev) => ({
+                            ...prev,
+                            [filter.key]: value ?? "ALL",
+                          }));
+                          setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+                        }}
+                        size="sm"
+                        radius="lg"
+                        w={200}
+                        searchable={filter.data.length > 8}
+                        comboboxProps={{ withinPortal: true }}
+                        styles={{ input: { borderColor: "var(--mantine-color-gray-3)" } }}
+                      />
                     ))}
                   </Group>
                 ) : hasStatusColumn && statusFilterOptions.length > 1 ? (
@@ -586,6 +598,13 @@ const FleetResourcePage = () => {
         </Stack>
       </Modal>
 
+      {slug === "wagons" ? (
+        <WagonYardWorkspaceModal
+          opened={wagonWorkspaceOpen}
+          onClose={() => setWagonWorkspaceOpen(false)}
+        />
+      ) : null}
+
       {slug === "wagons" ? (
         <WagonMovementHistoryModal
           opened={Boolean(historyTarget)}
diff --git a/apps/edr-freight-web/backoffice/src/pages/trainScheduling/BatchBoardPage.tsx b/apps/edr-freight-web/backoffice/src/pages/trainScheduling/BatchBoardPage.tsx
index 1b7e490e7..9f3f862c4 100644
--- a/apps/edr-freight-web/backoffice/src/pages/trainScheduling/BatchBoardPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/trainScheduling/BatchBoardPage.tsx
@@ -1,8 +1,9 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import {
   ActionIcon,
   Alert,
+  Badge,
   Box,
   Button,
   Card,
@@ -16,10 +17,15 @@ import {
   Stack,
   Text,
   ThemeIcon,
+  Tooltip,
 } from "@mantine/core";
+import { DateInput } from "@mantine/dates";
+import { useDebouncedValue } from "@mantine/hooks";
 import {
   AlertTriangle,
+  ArrowDownWideNarrow,
   ArrowRight,
+  ArrowUpNarrowWide,
   CalendarClock,
   CalendarDays,
   Eye,
@@ -47,9 +53,31 @@ import {
 import { RouteCorridor } from "@/components/trainScheduling/scheduleVisuals";
 import { ruleEngineTable } from "@/components/ruleEngine/ruleEngineStyles";
 import { FREIGHT_BRAND, FREIGHT_BRAND_DARK } from "@/theme/freight-brand";
-import { useQuery } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { api } from "@/services/api";
-import type { BatchBoardSchedule } from "@/types/trainScheduling";
+import type {
+  BatchBoardFilters,
+  BatchBoardSchedule,
+  BatchBoardSortField,
+  TrainScheduleStatus,
+} from "@/types/trainScheduling";
+
+const STATUS_BADGE: Record<string, { color: string; label: string }> = {
+  DRAFT: { color: "gray", label: "Draft" },
+  SCHEDULED: { color: "blue", label: "Scheduled" },
+  DISPATCHED: { color: "orange", label: "Dispatched" },
+  ARRIVED: { color: "green", label: "Arrived" },
+  CANCELLED: { color: "red", label: "Cancelled" },
+};
+
+function StatusBadge({ status }: { status: string }) {
+  const meta = STATUS_BADGE[status] ?? { color: "gray", label: status };
+  return (
+    <Badge variant="light" color={meta.color} radius="sm">
+      {meta.label}
+    </Badge>
+  );
+}
 
 const fmtTons = (n: number) =>
   `${n.toLocaleString(undefined, { maximumFractionDigits: 1 })} t`;
@@ -237,7 +265,8 @@ function ScheduleCard({ schedule }: { schedule: BatchBoardSchedule }) {
                 c="dimmed"
                 style={{ letterSpacing: 0.8 }}
               >
-                Freight schedule · {schedule.status}
+                {schedule.scheduleReference ?? "Freight schedule"} ·{" "}
+                {schedule.status}
               </Text>
             </Box>
           </Group>
@@ -395,15 +424,73 @@ function CardSkeleton() {
 
 export default function BatchBoardPage() {
   const navigate = useNavigate();
-  const { data, isLoading, isError, isFetching, refetch } = useQuery(
-    api.trainScheduling.batchBoard.queryOptions({ refetchInterval: 30_000 }),
-  );
   const { viewMode, setViewMode } = useFleetViewMode("batch-board");
-  const { pagination, setPagination } = usePagination({ pageSize: 10 });
+  const { pagination, setPagination } = usePagination({ pageSize: 12 });
   const [search, setSearch] = useState("");
+  const [debouncedSearch] = useDebouncedValue(search, 300);
+  const [statusFilter, setStatusFilter] = useState("ALL");
   const [windowFilter, setWindowFilter] = useState("ALL");
+  const [sortBy, setSortBy] = useState<BatchBoardSortField>("createdAt");
+  const [sortOrder, setSortOrder] = useState<"ASC" | "DESC">("DESC");
+  const [departureFrom, setDepartureFrom] = useState<Date | null>(null);
+  const [departureTo, setDepartureTo] = useState<Date | null>(null);
 
-  const schedules = data ?? [];
+  // Every knob maps straight onto the server-side batch-board query — the API
+  // filters, searches, sorts and paginates; this page just renders the page.
+  const filters = useMemo((): BatchBoardFilters => {
+    const endOfDay = (d: Date) =>
+      new Date(d.getFullYear(), d.getMonth(), d.getDate(), 23, 59, 59, 999);
+    return {
+      page: pagination.pageIndex + 1,
+      pageSize: pagination.pageSize,
+      search: debouncedSearch.trim() || undefined,
+      statuses:
+        statusFilter === "ALL"
+          ? undefined
+          : [statusFilter as TrainScheduleStatus],
+      bookingWindowStatus:
+        windowFilter === "ALL"
+          ? undefined
+          : (windowFilter as "OPEN" | "FULL" | "CLOSED"),
+      departureFrom: departureFrom ? departureFrom.toISOString() : undefined,
+      departureTo: departureTo ? endOfDay(departureTo).toISOString() : undefined,
+      sortBy,
+      sortOrder,
+    };
+  }, [
+    pagination,
+    debouncedSearch,
+    statusFilter,
+    windowFilter,
+    departureFrom,
+    departureTo,
+    sortBy,
+    sortOrder,
+  ]);
+
+  // Any filter change restarts from the first page.
+  useEffect(() => {
+    setPagination((p) => ({ ...p, pageIndex: 0 }));
+  }, [
+    debouncedSearch,
+    statusFilter,
+    windowFilter,
+    departureFrom,
+    departureTo,
+    sortBy,
+    sortOrder,
+    setPagination,
+  ]);
+
+  const { data, isLoading, isError, isFetching, refetch } = useQuery({
+    ...api.trainScheduling.batchBoard.queryOptions({ input: { filters } }),
+    refetchInterval: 30_000,
+    placeholderData: keepPreviousData,
+  });
+
+  const schedules = data?.items ?? [];
+  const total = data?.total ?? 0;
+  const pageCount = data?.totalPages ?? 1;
 
   const summary = useMemo(() => {
     const openWindows = schedules.filter((s) => s.bookingWindowStatus === "OPEN").length;
@@ -412,33 +499,6 @@ export default function BatchBoardPage() {
     return { openWindows, totalBookings, totalWagons };
   }, [schedules]);
 
-  const filtered = useMemo(() => {
-    const query = search.trim().toLowerCase();
-    return schedules.filter((s) => {
-      if (windowFilter !== "ALL" && s.bookingWindowStatus !== windowFilter) return false;
-      if (!query) return true;
-      const haystack = [
-        s.trainNumber,
-        s.routeName,
-        s.origin,
-        s.destination,
-        s.locomotive?.code,
-        s.status,
-        s.bookingWindowStatus,
-      ]
-        .filter(Boolean)
-        .join(" ")
-        .toLowerCase();
-      return haystack.includes(query);
-    });
-  }, [schedules, search, windowFilter]);
-
-  const pageCount = Math.max(1, Math.ceil(filtered.length / pagination.pageSize));
-  const paged = useMemo(() => {
-    const start = pagination.pageIndex * pagination.pageSize;
-    return filtered.slice(start, start + pagination.pageSize);
-  }, [filtered, pagination]);
-
   const columns = useMemo((): ColumnDef<BatchBoardSchedule>[] => {
     const headerClassName = ruleEngineTable.headerCell;
     const cellClassName = ruleEngineTable.bodyCell;
@@ -456,6 +516,11 @@ export default function BatchBoardPage() {
               <Text size="sm" fw={700} lh={1.2} truncate>
                 {row.original.trainNumber ?? row.original.routeName ?? "Schedule"}
               </Text>
+              {row.original.scheduleReference ? (
+                <Text size="10px" fw={600} c="dimmed" lh={1.2}>
+                  {row.original.scheduleReference}
+                </Text>
+              ) : null}
               <Box maw={220}>
                 <RouteCorridor
                   origin={row.original.origin}
@@ -502,6 +567,30 @@ export default function BatchBoardPage() {
           );
         },
       },
+      {
+        id: "status",
+        header: "Status",
+        meta: { headerClassName, cellClassName },
+        cell: ({ row }) => <StatusBadge status={row.original.status} />,
+      },
+      {
+        id: "created",
+        header: "Created",
+        meta: { headerClassName, cellClassName },
+        cell: ({ row }) => {
+          const { day, time } = splitDate(row.original.createdAt);
+          return (
+            <Stack gap={0}>
+              <Text size="sm" fw={600} lh={1.2}>
+                {day}
+              </Text>
+              <Text size="xs" c="dimmed" lh={1.2}>
+                {time || "—"}
+              </Text>
+            </Stack>
+          );
+        },
+      },
       {
         id: "window",
         header: "Window",
@@ -623,7 +712,7 @@ export default function BatchBoardPage() {
     <PageContainer>
       <PageHeader
         title="Batch Board"
-        subtitle="Active schedules and their booking windows."
+        subtitle="All import schedules — live and historical — with their booking windows."
         action={
           <Button variant="default" loading={isFetching} onClick={() => void refetch()}>
             Refresh
@@ -635,21 +724,21 @@ export default function BatchBoardPage() {
         loading={isLoading}
         items={[
           {
-            label: "Active schedules",
-            value: schedules.length,
-            hint: "on the board right now",
+            label: "Schedules",
+            value: total,
+            hint: "matching the current filters",
             icon: Train,
           },
           {
             label: "Open windows",
             value: summary.openWindows,
-            hint: "accepting bookings",
+            hint: "accepting bookings (this page)",
             icon: CalendarDays,
           },
           {
             label: "Bookings in play",
             value: summary.totalBookings,
-            hint: `${summary.totalWagons} wagons allocated`,
+            hint: `${summary.totalWagons} wagons allocated (this page)`,
             icon: Package,
           },
         ]}
@@ -661,24 +750,96 @@ export default function BatchBoardPage() {
             <FleetToolbar
               search={search}
               onSearchChange={setSearch}
-              searchPlaceholder="Search schedules…"
+              searchPlaceholder="Search train, route, station, loco…"
               viewMode={viewMode}
               onViewModeChange={setViewMode}
               filters={
-                <Select
-                  size="sm"
-                  radius="lg"
-                  value={windowFilter}
-                  onChange={(v) => v && setWindowFilter(v)}
-                  data={[
-                    { value: "ALL", label: "All windows" },
-                    { value: "OPEN", label: "Open" },
-                    { value: "FULL", label: "Full" },
-                    { value: "CLOSED", label: "Closed" },
-                  ]}
-                  w={150}
-                  styles={{ input: { borderColor: "var(--mantine-color-gray-3)" } }}
-                />
+                <Group gap="xs" wrap="wrap">
+                  <Select
+                    size="sm"
+                    radius="lg"
+                    value={statusFilter}
+                    onChange={(v) => v && setStatusFilter(v)}
+                    data={[
+                      { value: "ALL", label: "All statuses" },
+                      { value: "DRAFT", label: "Draft" },
+                      { value: "SCHEDULED", label: "Scheduled" },
+                      { value: "DISPATCHED", label: "Dispatched" },
+                      { value: "ARRIVED", label: "Arrived" },
+                      { value: "CANCELLED", label: "Cancelled" },
+                    ]}
+                    w={150}
+                    styles={{ input: { borderColor: "var(--mantine-color-gray-3)" } }}
+                  />
+                  <Select
+                    size="sm"
+                    radius="lg"
+                    value={windowFilter}
+                    onChange={(v) => v && setWindowFilter(v)}
+                    data={[
+                      { value: "ALL", label: "All windows" },
+                      { value: "OPEN", label: "Open" },
+                      { value: "FULL", label: "Full" },
+                      { value: "CLOSED", label: "Closed" },
+                    ]}
+                    w={140}
+                    styles={{ input: { borderColor: "var(--mantine-color-gray-3)" } }}
+                  />
+                  <DateInput
+                    size="sm"
+                    radius="lg"
+                    placeholder="Departs from"
+                    value={departureFrom}
+                    onChange={(v) => setDepartureFrom(v ? new Date(v) : null)}
+                    clearable
+                    w={140}
+                    styles={{ input: { borderColor: "var(--mantine-color-gray-3)" } }}
+                  />
+                  <DateInput
+                    size="sm"
+                    radius="lg"
+                    placeholder="Departs to"
+                    value={departureTo}
+                    onChange={(v) => setDepartureTo(v ? new Date(v) : null)}
+                    clearable
+                    w={140}
+                    styles={{ input: { borderColor: "var(--mantine-color-gray-3)" } }}
+                  />
+                  <Select
+                    size="sm"
+                    radius="lg"
+                    value={sortBy}
+                    onChange={(v) => v && setSortBy(v as BatchBoardSortField)}
+                    data={[
+                      { value: "createdAt", label: "Sort: Created" },
+                      { value: "scheduledDepartureDate", label: "Sort: Departure" },
+                      { value: "trainNumber", label: "Sort: Train no." },
+                      { value: "status", label: "Sort: Status" },
+                    ]}
+                    w={160}
+                    styles={{ input: { borderColor: "var(--mantine-color-gray-3)" } }}
+                  />
+                  <Tooltip
+                    label={sortOrder === "DESC" ? "Newest / Z–A first" : "Oldest / A–Z first"}
+                    withArrow
+                  >
+                    <ActionIcon
+                      variant="default"
+                      size={36}
+                      radius="lg"
+                      aria-label="Toggle sort direction"
+                      onClick={() =>
+                        setSortOrder((o) => (o === "DESC" ? "ASC" : "DESC"))
+                      }
+                    >
+                      {sortOrder === "DESC" ? (
+                        <ArrowDownWideNarrow size={16} />
+                      ) : (
+                        <ArrowUpNarrowWide size={16} />
+                      )}
+                    </ActionIcon>
+                  </Tooltip>
+                </Group>
               }
             />
           </Box>
@@ -686,7 +847,7 @@ export default function BatchBoardPage() {
           {viewMode === "table" ? (
             <DataTable
               columns={columns}
-              data={paged}
+              data={schedules}
               status={tableStatus}
               onRowClick={(schedule) =>
                 navigate(`/dashboard/operations/batch-board/${schedule.scheduleId}`)
@@ -699,12 +860,12 @@ export default function BatchBoardPage() {
                     }
                   : undefined
               }
-              emptyMessage="No active schedules"
+              emptyMessage="No schedules match the current filters"
               pagination={{
                 pageIndex: pagination.pageIndex,
                 pageSize: pagination.pageSize,
                 pageCount,
-                totalCount: filtered.length,
+                totalCount: total,
               }}
               tableOptions={{
                 manualPagination: true,
@@ -727,7 +888,7 @@ export default function BatchBoardPage() {
               <CardSkeleton />
               <CardSkeleton />
             </SimpleGrid>
-          ) : filtered.length === 0 ? (
+          ) : schedules.length === 0 ? (
             <Paper radius="lg" p={48} m="md" bg="gray.0">
               <Stack align="center" gap="sm">
                 <Box
@@ -745,20 +906,52 @@ export default function BatchBoardPage() {
                   <Inbox size={28} color="var(--mantine-color-gray-5)" />
                 </Box>
                 <Text fw={700} c="gray.7">
-                  No active schedules
+                  No schedules match the current filters
                 </Text>
                 <Text size="sm" c="dimmed" ta="center" maw={380}>
-                  Schedules with an open booking window appear here. Create or activate a
-                  schedule to get started.
+                  Every import schedule — live and historical — appears here. Loosen the
+                  filters or clear the search to see more.
                 </Text>
               </Stack>
             </Paper>
           ) : (
-            <SimpleGrid cols={{ base: 1, md: 2, lg: 3, xl: 4 }} spacing="lg" p="md">
-              {filtered.map((s) => (
-                <ScheduleCard key={s.scheduleId} schedule={s} />
-              ))}
-            </SimpleGrid>
+            <>
+              <SimpleGrid cols={{ base: 1, md: 2, lg: 3, xl: 4 }} spacing="lg" p="md">
+                {schedules.map((s) => (
+                  <ScheduleCard key={s.scheduleId} schedule={s} />
+                ))}
+              </SimpleGrid>
+              <Group justify="space-between" px="md" pb="md">
+                <Text size="sm" c="dimmed">
+                  {total} schedule{total === 1 ? "" : "s"}
+                </Text>
+                <Group gap="xs">
+                  <Button
+                    variant="default"
+                    size="xs"
+                    disabled={pagination.pageIndex === 0}
+                    onClick={() =>
+                      setPagination((p) => ({ ...p, pageIndex: p.pageIndex - 1 }))
+                    }
+                  >
+                    Previous
+                  </Button>
+                  <Text size="sm" c="dimmed">
+                    Page {pagination.pageIndex + 1} of {pageCount}
+                  </Text>
+                  <Button
+                    variant="default"
+                    size="xs"
+                    disabled={pagination.pageIndex + 1 >= pageCount}
+                    onClick={() =>
+                      setPagination((p) => ({ ...p, pageIndex: p.pageIndex + 1 }))
+                    }
+                  >
+                    Next
+                  </Button>
+                </Group>
+              </Group>
+            </>
           )}
         </Stack>
       </Card>
diff --git a/apps/edr-freight-web/backoffice/src/pages/trainScheduling/BatchScheduleDetailPage.tsx b/apps/edr-freight-web/backoffice/src/pages/trainScheduling/BatchScheduleDetailPage.tsx
index a150978d4..114b2e742 100644
--- a/apps/edr-freight-web/backoffice/src/pages/trainScheduling/BatchScheduleDetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/trainScheduling/BatchScheduleDetailPage.tsx
@@ -20,12 +20,12 @@ import {
   AlertTriangle,
   ArrowLeft,
   ArrowLeftRight,
-  // Boxes,
   CalendarDays,
   CheckCircle2,
   ClipboardCheck,
   Clock,
   FileSignature,
+  Hash,
   Hourglass,
   Layers,
   Package,
@@ -348,9 +348,9 @@ const BOOKING_COLUMNS: ColumnDef<BatchBoardBookingDetail>[] = [
       const b = row.original;
       return (
         <Group gap={4} wrap="nowrap">
-          {/* <Badge variant="default" radius="sm" size="sm">
+          <Badge variant="default" radius="sm" size="sm">
             {b.wagons}w
-          </Badge> */}
+          </Badge>
           <Badge variant="default" radius="sm" size="sm">
             {fmtTons(b.weightTons)}
           </Badge>
@@ -622,6 +622,9 @@ export default function BatchScheduleDetailPage() {
     api.trainScheduling.scheduleDetail.queryOptions({
       input: { id: scheduleId ?? "", freightType: "CONTAINER" },
       enabled: Boolean(scheduleId),
+      // Composition data only changes through mutations, which invalidate the
+      // whole train-scheduling root — no need to refetch on remounts in between.
+      staleTime: 5 * 60_000,
     }),
   );
 
@@ -745,7 +748,13 @@ export default function BatchScheduleDetailPage() {
         items={[
           { label: "Operations" },
           { label: "Batch board", href: "/dashboard/operations/batch-board" },
-          { label: data.trainNumber ?? data.routeName ?? "Schedule" },
+          {
+            label:
+              data.scheduleReference ??
+              data.trainNumber ??
+              data.routeName ??
+              "Schedule",
+          },
         ]}
       />
 
@@ -792,6 +801,11 @@ export default function BatchScheduleDetailPage() {
                   <Title order={2} fw={800}>
                     {data.trainNumber ?? data.routeName ?? "Schedule"}
                   </Title>
+                  {data.scheduleReference ? (
+                    <HeroChip icon={<Hash size={12} />}>
+                      {data.scheduleReference}
+                    </HeroChip>
+                  ) : null}
                   <WindowStatusPill status={data.bookingWindowStatus} />
                   {data.windowPhase ? (
                     <WindowPhasePill
@@ -890,14 +904,6 @@ export default function BatchScheduleDetailPage() {
 
             <KpiStrip
               items={[
-                // {
-                //   label: "Allocated wagons",
-                //   value: data.capacity.maxWagons
-                //     ? `${data.capacity.allocatedWagons} / ${data.capacity.maxWagons}`
-                //     : data.capacity.allocatedWagons,
-                //   hint: "on this train",
-                //   icon: Boxes,
-                // },
                 {
                   label: "Train length",
                   value: data.capacity.maxLengthMeters
@@ -1111,7 +1117,7 @@ export default function BatchScheduleDetailPage() {
                 <TrainCompositionDiagram
                   locomotive={scheduleDetailQuery.data.trainSet?.locomotive}
                   wagons={scheduleDetailQuery.data.trainSet?.wagons ?? []}
-                  freightType="CONTAINER"
+                  freightType={scheduleDetailQuery.data.freightType ?? null}
                   trainNumber={scheduleDetailQuery.data.trainNumber}
                   totalLengthMeters={
                     scheduleDetailQuery.data.trainSet?.totalLengthMeters
@@ -1133,7 +1139,7 @@ export default function BatchScheduleDetailPage() {
                 <TrainConsistView
                   scheduleDetail={scheduleDetailQuery.data}
                   scheduleId={scheduleId ?? ""}
-                  maxWagons={53}
+                  maxWagons={data.capacity.maxWagons ?? 53}
                   highlightBookingId={selectedBookingId}
                 />
               </Box>
diff --git a/apps/edr-freight-web/backoffice/src/pages/warehouses/ArrivalQueuePage.tsx b/apps/edr-freight-web/backoffice/src/pages/warehouses/ArrivalQueuePage.tsx
index 606796a44..821589271 100644
--- a/apps/edr-freight-web/backoffice/src/pages/warehouses/ArrivalQueuePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/warehouses/ArrivalQueuePage.tsx
@@ -3,7 +3,6 @@ import {
   Badge,
   Button,
   Card,
-  Container,
   Group,
   Loader,
   Select,
@@ -13,10 +12,9 @@ import {
 } from '@mantine/core';
 import { ChevronDown, ChevronRight, PackageOpen, Truck } from 'lucide-react';
 
-import Breadcrumbs from '@/components/ui/Breadcrumbs';
+import { PageContainer, PageHeader } from '@/components/page';
 import {
   VisualEmptyState,
-  WarehouseHero,
   formatDate,
   formatNumber,
 } from '@/components/warehouses';
@@ -286,18 +284,14 @@ export default function ArrivalQueuePage() {
   };
 
   return (
-    <Container size="xxl" py="lg">
-      <Breadcrumbs items={[{ label: 'Arrival queue' }]} />
+    <PageContainer>
+      <PageHeader
+        title="Arrival / Unloading Queue"
+        subtitle="Arrived import trains ready to unload assigned bookings into warehouse inventory."
+        breadcrumbs={[{ label: 'Arrival queue' }]}
+      />
 
-      <Stack gap="lg" mt="sm">
-        <WarehouseHero
-          variant="container"
-          secondaryVariant="warehouse"
-          title="Arrival / Unloading Queue"
-          subtitle="Arrived import trains ready to unload assigned bookings into warehouse inventory."
-        />
-
-        <Card withBorder radius="md" padding="lg">
+      <Card withBorder radius="md" padding="lg">
           <Group justify="space-between" mb="md">
             <Stack gap={2}>
               <Text fw={600}>{trains.length} arrived import train(s)</Text>
@@ -428,8 +422,7 @@ export default function ArrivalQueuePage() {
               </Table>
             </Table.ScrollContainer>
           )}
-        </Card>
-      </Stack>
-    </Container>
+      </Card>
+    </PageContainer>
   );
 }
diff --git a/apps/edr-freight-web/backoffice/src/pages/warehouses/ExportDjiboutiUnloadingQueuePage.tsx b/apps/edr-freight-web/backoffice/src/pages/warehouses/ExportDjiboutiUnloadingQueuePage.tsx
index 609995e3e..6e694ed1e 100644
--- a/apps/edr-freight-web/backoffice/src/pages/warehouses/ExportDjiboutiUnloadingQueuePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/warehouses/ExportDjiboutiUnloadingQueuePage.tsx
@@ -1,14 +1,12 @@
 import { Fragment, useState } from 'react';
 import {
+  Alert,
   Badge,
   Button,
   Card,
-  Container,
   Group,
   Loader,
   Modal,
-  Alert,
-  Stack,
   Table,
   Tabs,
   Text,
@@ -26,13 +24,11 @@ import {
   Truck,
 } from 'lucide-react';
 
-import { PageHeader } from '@/components/page';
-import Breadcrumbs from '@/components/ui/Breadcrumbs';
+import { PageContainer, PageHeader } from '@/components/page';
 import {
   ActivityTimeline,
   InventoryMovementHistoryTable,
   VisualEmptyState,
-  WarehouseHero,
   formatDate,
   formatNumber,
 } from '@/components/warehouses';
@@ -289,23 +285,14 @@ export default function ExportDjiboutiUnloadingQueuePage() {
   };
 
   return (
-    <Container size="xxl" py="lg">
-      <Breadcrumbs items={[{ label: 'Djibouti Arrival / Unloading Queue' }]} />
+    <PageContainer>
+      <PageHeader
+        title="Djibouti Arrival / Unloading Queue"
+        subtitle="Arrived export trains at Djibouti-side destinations, auto unloading, and signed interchange handover."
+        breadcrumbs={[{ label: 'Djibouti Arrival / Unloading Queue' }]}
+      />
 
-      <Stack gap="lg" mt="sm">
-        <PageHeader
-          title="Djibouti Arrival / Unloading Queue"
-          subtitle="Arrived export trains at Djibouti-side destinations, auto unloading, and signed interchange handover."
-        />
-
-        <WarehouseHero
-          variant="train"
-          secondaryVariant="container"
-          title="Export Unloading at Djibouti Port"
-          subtitle="Review arrived trains, auto unload eligible export items, then generate the EDR and Djibouti Port signed interchange document."
-        />
-
-        <Card withBorder radius="md" padding="lg">
+      <Card withBorder radius="md" padding="lg">
           <Group justify="space-between" mb="md">
             <Text fw={600}>{trains.length} arrived export train(s)</Text>
             <Text size="sm" c="dimmed">
@@ -451,8 +438,7 @@ export default function ExportDjiboutiUnloadingQueuePage() {
               </Table>
             </Table.ScrollContainer>
           )}
-        </Card>
-      </Stack>
+      </Card>
 
       <Modal
         opened={Boolean(historyInventoryId)}
@@ -475,6 +461,6 @@ export default function ExportDjiboutiUnloadingQueuePage() {
           </Tabs>
         ) : null}
       </Modal>
-    </Container>
+    </PageContainer>
   );
 }
diff --git a/apps/edr-freight-web/backoffice/src/pages/warehouses/InterchangeDocumentsPage.tsx b/apps/edr-freight-web/backoffice/src/pages/warehouses/InterchangeDocumentsPage.tsx
index 252de969e..4bd647106 100644
--- a/apps/edr-freight-web/backoffice/src/pages/warehouses/InterchangeDocumentsPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/warehouses/InterchangeDocumentsPage.tsx
@@ -15,6 +15,8 @@ import {
 import { CheckCircle2, Download, Eye, FileText, Printer, Search, XCircle } from 'lucide-react';
 import type { ReactNode } from 'react';
 
+import { DataTable, type ColumnDef } from '@edr/ui-common';
+
 import { PageContainer, PageHeader } from '@/components/page';
 import { VisualEmptyState, formatDate, formatNumber } from '@/components/warehouses';
 import {
@@ -323,6 +325,132 @@ export default function InterchangeDocumentsPage() {
     run(() => dispute.mutateAsync({ id: document.id, remarks }), 'Interchange document disputed');
   };
 
+  const documentColumns: ColumnDef<InterchangeDocument>[] = [
+    {
+      id: 'documentNo',
+      header: 'Document No',
+      cell: ({ row }) => (
+        <Text fw={700} size="sm">
+          {row.original.documentNo}
+        </Text>
+      ),
+    },
+    { id: 'direction', header: 'Direction', cell: ({ row }) => row.original.direction },
+    {
+      id: 'train',
+      header: 'Train No / Schedule',
+      cell: ({ row }) => (
+        <Stack gap={0}>
+          <Text size="sm">{row.original.trainNo ?? '-'}</Text>
+          <Text size="xs" c="dimmed">
+            {row.original.scheduleId?.slice(0, 8) ?? '-'}
+          </Text>
+        </Stack>
+      ),
+    },
+    { id: 'route', header: 'Route', cell: ({ row }) => row.original.routeId?.slice(0, 8) ?? '-' },
+    { id: 'handoverLocation', header: 'Handover Location', cell: ({ row }) => row.original.handoverLocation },
+    { id: 'handoverFrom', header: 'Handover From', cell: ({ row }) => row.original.handoverFrom },
+    { id: 'handoverTo', header: 'Handover To', cell: ({ row }) => row.original.handoverTo },
+    {
+      id: 'status',
+      header: 'Status',
+      cell: ({ row }) => (
+        <Badge variant="light" color={statusColor[row.original.status]}>
+          {row.original.status}
+        </Badge>
+      ),
+    },
+    {
+      id: 'signedBy',
+      header: 'Signed By',
+      cell: ({ row }) => (
+        <Stack gap={0}>
+          <Text size="sm">{row.original.generatedBy ?? '-'}</Text>
+          <Text size="xs" c="dimmed">
+            {row.original.acknowledgedBy ?? 'Awaiting Djibouti Port'}
+          </Text>
+        </Stack>
+      ),
+    },
+    { id: 'generatedAt', header: 'Generated At', cell: ({ row }) => formatDate(row.original.generatedAt) },
+    {
+      id: 'actions',
+      header: '',
+      meta: { headerClassName: 'text-right', cellClassName: 'text-right' },
+      cell: ({ row }) => {
+        const doc = row.original;
+        return (
+          <Group gap="xs" justify="flex-end" wrap="nowrap">
+            <Button
+              size="compact-xs"
+              variant="light"
+              leftSection={<Eye size={14} />}
+              onClick={() => setViewId(doc.id)}
+            >
+              View
+            </Button>
+            {doc.status !== 'ACKNOWLEDGED' && doc.status !== 'CANCELLED' ? (
+              <Button
+                size="compact-xs"
+                color="green"
+                variant="light"
+                leftSection={<CheckCircle2 size={14} />}
+                onClick={() => acknowledgeDocument(doc)}
+              >
+                Acknowledge
+              </Button>
+            ) : null}
+            {doc.status === 'ACKNOWLEDGED' ? (
+              <>
+                <Button
+                  size="compact-xs"
+                  color="blue"
+                  variant="light"
+                  leftSection={<Printer size={14} />}
+                  onClick={() => run(() => printDocument(doc), 'Print view opened')}
+                >
+                  Print
+                </Button>
+                <Button
+                  size="compact-xs"
+                  color="blue"
+                  variant="light"
+                  leftSection={<Download size={14} />}
+                  onClick={() => run(() => downloadDocument(doc), 'Document downloaded')}
+                >
+                  Download
+                </Button>
+              </>
+            ) : null}
+            {doc.status !== 'CANCELLED' ? (
+              <Button
+                size="compact-xs"
+                color="orange"
+                variant="light"
+                leftSection={<FileText size={14} />}
+                onClick={() => disputeDocument(doc)}
+              >
+                Dispute
+              </Button>
+            ) : null}
+            {doc.status === 'DRAFT' || doc.status === 'GENERATED' ? (
+              <Button
+                size="compact-xs"
+                color="red"
+                variant="light"
+                leftSection={<XCircle size={14} />}
+                onClick={() => run(() => cancel.mutateAsync(doc.id), 'Interchange document cancelled')}
+              >
+                Cancel
+              </Button>
+            ) : null}
+          </Group>
+        );
+      },
+    },
+  ];
+
   return (
     <PageContainer>
       <PageHeader
@@ -342,143 +470,19 @@ export default function InterchangeDocumentsPage() {
           />
         </Group>
 
-        {isLoading ? (
-          <Group justify="center" py="xl">
-            <Loader />
-          </Group>
-        ) : documents.length === 0 ? (
+        {!isLoading && documents.length === 0 ? (
           <VisualEmptyState
             variant="container"
             title="No interchange documents"
             description="Generated freight handover documents appear here."
           />
         ) : (
-          <Table.ScrollContainer minWidth={1060}>
-            <Table striped highlightOnHover verticalSpacing="sm">
-              <Table.Thead>
-                <Table.Tr>
-                  <Table.Th>Document No</Table.Th>
-                  <Table.Th>Direction</Table.Th>
-                  <Table.Th>Train No / Schedule</Table.Th>
-                  <Table.Th>Route</Table.Th>
-                  <Table.Th>Handover Location</Table.Th>
-                  <Table.Th>Handover From</Table.Th>
-                  <Table.Th>Handover To</Table.Th>
-                  <Table.Th>Status</Table.Th>
-                  <Table.Th>Signed By</Table.Th>
-                  <Table.Th>Generated At</Table.Th>
-                  <Table.Th ta="right">Actions</Table.Th>
-                </Table.Tr>
-              </Table.Thead>
-              <Table.Tbody>
-                {documents.map((document) => (
-                  <Table.Tr key={document.id}>
-                    <Table.Td>
-                      <Text fw={700} size="sm">
-                        {document.documentNo}
-                      </Text>
-                    </Table.Td>
-                    <Table.Td>{document.direction}</Table.Td>
-                    <Table.Td>
-                      <Stack gap={0}>
-                        <Text size="sm">{document.trainNo ?? '-'}</Text>
-                        <Text size="xs" c="dimmed">
-                          {document.scheduleId?.slice(0, 8) ?? '-'}
-                        </Text>
-                      </Stack>
-                    </Table.Td>
-                    <Table.Td>{document.routeId?.slice(0, 8) ?? '-'}</Table.Td>
-                    <Table.Td>{document.handoverLocation}</Table.Td>
-                    <Table.Td>{document.handoverFrom}</Table.Td>
-                    <Table.Td>{document.handoverTo}</Table.Td>
-                    <Table.Td>
-                      <Badge variant="light" color={statusColor[document.status]}>
-                        {document.status}
-                      </Badge>
-                    </Table.Td>
-                    <Table.Td>
-                      <Stack gap={0}>
-                        <Text size="sm">{document.generatedBy ?? '-'}</Text>
-                        <Text size="xs" c="dimmed">
-                          {document.acknowledgedBy ?? 'Awaiting Djibouti Port'}
-                        </Text>
-                      </Stack>
-                    </Table.Td>
-                    <Table.Td>{formatDate(document.generatedAt)}</Table.Td>
-                    <Table.Td>
-                      <Group gap="xs" justify="flex-end" wrap="nowrap">
-                        <Button
-                          size="compact-xs"
-                          variant="light"
-                          leftSection={<Eye size={14} />}
-                          onClick={() => setViewId(document.id)}
-                        >
-                          View
-                        </Button>
-                        {document.status !== 'ACKNOWLEDGED' && document.status !== 'CANCELLED' ? (
-                          <Button
-                            size="compact-xs"
-                            color="green"
-                            variant="light"
-                            leftSection={<CheckCircle2 size={14} />}
-                            onClick={() => acknowledgeDocument(document)}
-                          >
-                            Acknowledge
-                          </Button>
-                        ) : null}
-                        {document.status === 'ACKNOWLEDGED' ? (
-                          <>
-                            <Button
-                              size="compact-xs"
-                              color="blue"
-                              variant="light"
-                              leftSection={<Printer size={14} />}
-                              onClick={() => run(() => printDocument(document), 'Print view opened')}
-                            >
-                              Print
-                            </Button>
-                            <Button
-                              size="compact-xs"
-                              color="blue"
-                              variant="light"
-                              leftSection={<Download size={14} />}
-                              onClick={() => run(() => downloadDocument(document), 'Document downloaded')}
-                            >
-                              Download
-                            </Button>
-                          </>
-                        ) : null}
-                        {document.status !== 'CANCELLED' ? (
-                          <Button
-                            size="compact-xs"
-                            color="orange"
-                            variant="light"
-                            leftSection={<FileText size={14} />}
-                            onClick={() => disputeDocument(document)}
-                          >
-                            Dispute
-                          </Button>
-                        ) : null}
-                        {document.status === 'DRAFT' || document.status === 'GENERATED' ? (
-                          <Button
-                            size="compact-xs"
-                            color="red"
-                            variant="light"
-                            leftSection={<XCircle size={14} />}
-                            onClick={() =>
-                              run(() => cancel.mutateAsync(document.id), 'Interchange document cancelled')
-                            }
-                          >
-                            Cancel
-                          </Button>
-                        ) : null}
-                      </Group>
-                    </Table.Td>
-                  </Table.Tr>
-                ))}
-              </Table.Tbody>
-            </Table>
-          </Table.ScrollContainer>
+          <DataTable
+            columns={documentColumns}
+            data={documents}
+            status={isLoading ? 'loading' : 'success'}
+            containerClassName="border-0 shadow-none"
+          />
         )}
       </Card>
 
diff --git a/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseDashboardPage.tsx b/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseDashboardPage.tsx
index 5df5018ec..8524a7e68 100644
--- a/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseDashboardPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseDashboardPage.tsx
@@ -1,5 +1,5 @@
 import { useNavigate } from 'react-router-dom';
-import { Card, Center, Group, Loader, SimpleGrid, Stack, Text, ThemeIcon } from '@mantine/core';
+import { Card, Center, Group, Loader, SimpleGrid, Text, ThemeIcon } from '@mantine/core';
 import {
   ClipboardCheck,
   ClipboardList,
@@ -16,7 +16,7 @@ import {
 } from 'lucide-react';
 
 import { PageContainer, PageHeader } from '@/components/page';
-import { WarehouseDashboardCharts, WarehouseHero } from '@/components/warehouses';
+import { WarehouseDashboardCharts } from '@/components/warehouses';
 import { useWarehouseDashboard } from '@/hooks/useWarehouses';
 import type { WarehouseDashboard } from '@/types/warehouse';
 
@@ -58,58 +58,49 @@ export default function WarehouseDashboardPage() {
         subtitle="Live overview of warehouse capacity and inventory lifecycle."
       />
 
-      <Stack gap="lg" mt="sm">
-        <WarehouseHero
-          variant="train"
-          secondaryVariant="warehouse"
-          title="Warehouse Dashboard"
-          subtitle="Live overview of warehouse capacity and inventory lifecycle."
-        />
+      {isLoading ? (
+        <Center py="xl">
+          <Loader />
+        </Center>
+      ) : isError ? (
+        <Center py="xl">
+          <Text c="red">Failed to load warehouse dashboard.</Text>
+        </Center>
+      ) : (
+        <>
+          <SimpleGrid cols={{ base: 1, xs: 2, md: 4 }} spacing="md">
+            {METRICS.map((metric) => (
+              <Card
+                key={metric.key}
+                padding="lg"
+                onClick={() => navigate(metric.to)}
+                className="cursor-pointer transition-[transform,border-color] duration-150 hover:-translate-y-0.5 hover:border-edr-primary!"
+              >
+                <Group justify="space-between" align="flex-start" wrap="nowrap">
+                  <div>
+                    <Text size="xs" c="edr-muted" tt="uppercase" fw={700} style={{ letterSpacing: 0.4 }}>
+                      {metric.label}
+                    </Text>
+                    <Text fw={800} fz={32} mt={8} c="edr-text" lh={1.1}>
+                      {data ? data[metric.key] : 0}
+                    </Text>
+                  </div>
+                  <ThemeIcon
+                    variant="light"
+                    size={46}
+                    radius="md"
+                    style={{ backgroundColor: `${metric.theme}1a`, color: metric.theme }}
+                  >
+                    {metric.icon}
+                  </ThemeIcon>
+                </Group>
+              </Card>
+            ))}
+          </SimpleGrid>
 
-        {isLoading ? (
-          <Center py="xl">
-            <Loader />
-          </Center>
-        ) : isError ? (
-          <Center py="xl">
-            <Text c="red">Failed to load warehouse dashboard.</Text>
-          </Center>
-        ) : (
-          <>
-            <SimpleGrid cols={{ base: 1, xs: 2, md: 4 }} spacing="md">
-              {METRICS.map((metric) => (
-                <Card
-                  key={metric.key}
-                  padding="lg"
-                  onClick={() => navigate(metric.to)}
-                  className="cursor-pointer transition-[transform,border-color] duration-150 hover:-translate-y-0.5 hover:border-edr-primary!"
-                >
-                  <Group justify="space-between" align="flex-start" wrap="nowrap">
-                    <div>
-                      <Text size="xs" c="edr-muted" tt="uppercase" fw={700} style={{ letterSpacing: 0.4 }}>
-                        {metric.label}
-                      </Text>
-                      <Text fw={800} fz={32} mt={8} c="edr-text" lh={1.1}>
-                        {data ? data[metric.key] : 0}
-                      </Text>
-                    </div>
-                    <ThemeIcon
-                      variant="light"
-                      size={46}
-                      radius="md"
-                      style={{ backgroundColor: `${metric.theme}1a`, color: metric.theme }}
-                    >
-                      {metric.icon}
-                    </ThemeIcon>
-                  </Group>
-                </Card>
-              ))}
-            </SimpleGrid>
-
-            <WarehouseDashboardCharts data={data} />
-          </>
-        )}
-      </Stack>
+          <WarehouseDashboardCharts data={data} />
+        </>
+      )}
     </PageContainer>
   );
 }
diff --git a/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseRulesPage.tsx b/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseRulesPage.tsx
index 81633f9f8..61ce58f5f 100644
--- a/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseRulesPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseRulesPage.tsx
@@ -6,13 +6,11 @@ import {
   Button,
   Card,
   Group,
-  Loader,
   Modal,
   NumberInput,
   Select,
   Stack,
   Tabs,
-  Table,
   Text,
   TextInput,
 } from '@mantine/core';
@@ -20,6 +18,8 @@ import { Info, Pencil, Plus, Trash2 } from 'lucide-react';
 
 import { useQuery } from '@tanstack/react-query';
 
+import { DataTable, type ColumnDef } from '@edr/ui-common';
+
 import { PageContainer, PageHeader } from '@/components/page';
 import { useToast } from '@/hooks/use-toast';
 import {
@@ -209,6 +209,48 @@ function AllocationRules() {
     }
   };
 
+  const allocationColumns: ColumnDef<AllocationRule>[] = [
+    { id: 'priority', header: 'Priority', cell: ({ row }) => row.original.priority },
+    { id: 'name', header: 'Name', cell: ({ row }) => row.original.name },
+    { id: 'freight', header: 'Freight', cell: ({ row }) => row.original.freightType ?? dash },
+    { id: 'trade', header: 'Trade', cell: ({ row }) => row.original.tradeDirection ?? dash },
+    { id: 'cargoCode', header: 'Cargo code', cell: ({ row }) => row.original.cargoTypeCode ?? dash },
+    {
+      id: 'targetYard',
+      header: 'Target yard',
+      cell: ({ row }) => <Badge variant="light">{row.original.targetYardCode}</Badge>,
+    },
+    {
+      id: 'active',
+      header: 'Active',
+      cell: ({ row }) => (
+        <Badge color={row.original.isActive ? 'green' : 'gray'} variant="light">
+          {row.original.isActive ? 'Yes' : 'No'}
+        </Badge>
+      ),
+    },
+    {
+      id: 'actions',
+      header: '',
+      meta: { headerClassName: 'text-right', cellClassName: 'text-right' },
+      cell: ({ row }) => (
+        <Group gap={4} justify="flex-end" wrap="nowrap">
+          <ActionIcon variant="subtle" color="blue" onClick={() => startEdit(row.original)} title="Edit">
+            <Pencil size={16} />
+          </ActionIcon>
+          <ActionIcon
+            variant="subtle"
+            color="red"
+            onClick={() => remove.mutate(row.original.id)}
+            title="Delete"
+          >
+            <Trash2 size={16} />
+          </ActionIcon>
+        </Group>
+      ),
+    },
+  ];
+
   return (
     <>
       <Group justify="space-between" mb="sm">
@@ -226,62 +268,13 @@ function AllocationRules() {
         </Text>
       </Alert>
 
-      {isLoading ? (
-        <Group justify="center" py="xl">
-          <Loader />
-        </Group>
-      ) : (
-        <Table.ScrollContainer minWidth={900}>
-          <Table striped highlightOnHover verticalSpacing="sm">
-            <Table.Thead>
-              <Table.Tr>
-                <Table.Th>Priority</Table.Th>
-                <Table.Th>Name</Table.Th>
-                <Table.Th>Freight</Table.Th>
-                <Table.Th>Trade</Table.Th>
-                <Table.Th>Cargo code</Table.Th>
-                <Table.Th>Target yard</Table.Th>
-                <Table.Th>Active</Table.Th>
-                <Table.Th ta="right">Actions</Table.Th>
-              </Table.Tr>
-            </Table.Thead>
-            <Table.Tbody>
-              {rules.map((rule) => (
-                <Table.Tr key={rule.id}>
-                  <Table.Td>{rule.priority}</Table.Td>
-                  <Table.Td>{rule.name}</Table.Td>
-                  <Table.Td>{rule.freightType ?? dash}</Table.Td>
-                  <Table.Td>{rule.tradeDirection ?? dash}</Table.Td>
-                  <Table.Td>{rule.cargoTypeCode ?? dash}</Table.Td>
-                  <Table.Td>
-                    <Badge variant="light">{rule.targetYardCode}</Badge>
-                  </Table.Td>
-                  <Table.Td>
-                    <Badge color={rule.isActive ? 'green' : 'gray'} variant="light">
-                      {rule.isActive ? 'Yes' : 'No'}
-                    </Badge>
-                  </Table.Td>
-                  <Table.Td ta="right">
-                    <Group gap={4} justify="flex-end" wrap="nowrap">
-                      <ActionIcon variant="subtle" color="blue" onClick={() => startEdit(rule)} title="Edit">
-                        <Pencil size={16} />
-                      </ActionIcon>
-                      <ActionIcon
-                        variant="subtle"
-                        color="red"
-                        onClick={() => remove.mutate(rule.id)}
-                        title="Delete"
-                      >
-                        <Trash2 size={16} />
-                      </ActionIcon>
-                    </Group>
-                  </Table.Td>
-                </Table.Tr>
-              ))}
-            </Table.Tbody>
-          </Table>
-        </Table.ScrollContainer>
-      )}
+      <DataTable
+        columns={allocationColumns}
+        data={rules}
+        status={isLoading ? 'loading' : 'success'}
+        emptyMessage="No allocation rules yet. Create one to route inventory to a yard automatically."
+        containerClassName="border-0 shadow-none"
+      />
 
       <Modal opened={open} onClose={() => { setOpen(false); resetForm(); }} title={editingId ? 'Edit allocation rule' : 'New allocation rule'} centered size="lg">
         <Stack gap="md">
@@ -576,6 +569,75 @@ function FeeRules() {
     }
   };
 
+  const feeColumns: ColumnDef<FeeRule>[] = [
+    {
+      id: 'type',
+      header: 'Type',
+      cell: ({ row }) => (
+        <Badge color={RULE_TYPE_COLOR[row.original.ruleType] ?? 'gray'} variant="light">
+          {FEE_RULE_TYPE_LABELS[row.original.ruleType] ?? row.original.ruleType}
+        </Badge>
+      ),
+    },
+    { id: 'name', header: 'Name', cell: ({ row }) => row.original.name },
+    { id: 'freight', header: 'Freight', cell: ({ row }) => row.original.freightType ?? dash },
+    { id: 'trade', header: 'Trade', cell: ({ row }) => row.original.tradeDirection ?? dash },
+    { id: 'cargo', header: 'Cargo', cell: ({ row }) => row.original.cargoTypeCode ?? dash },
+    { id: 'container', header: 'Container', cell: ({ row }) => row.original.containerType ?? dash },
+    {
+      id: 'scope',
+      header: 'Location scope',
+      cell: ({ row }) => {
+        const rule = row.original;
+        const hasScope = [rule.facilityId, rule.warehouseId, rule.yardId, rule.zoneId].some(Boolean);
+        if (!hasScope) return dash;
+        return (
+          <Stack gap={2}>
+            {rule.facilityId && <Text size="xs">Facility: {rule.facilityId}</Text>}
+            {rule.warehouseId && <Text size="xs">Warehouse: {rule.warehouseId}</Text>}
+            {rule.yardId && <Text size="xs">Yard: {rule.yardId}</Text>}
+            {rule.zoneId && <Text size="xs">Zone: {rule.zoneId}</Text>}
+          </Stack>
+        );
+      },
+    },
+    { id: 'freeDays', header: 'Free days', cell: ({ row }) => row.original.freeDays },
+    {
+      id: 'rate',
+      header: 'Rate / day',
+      cell: ({ row }) => `${Number(row.original.ratePerDay).toLocaleString()} ${row.original.currency}`,
+    },
+    {
+      id: 'active',
+      header: 'Active',
+      cell: ({ row }) => (
+        <Badge color={row.original.isActive ? 'green' : 'gray'} variant="light">
+          {row.original.isActive ? 'Yes' : 'No'}
+        </Badge>
+      ),
+    },
+    {
+      id: 'actions',
+      header: '',
+      meta: { headerClassName: 'text-right', cellClassName: 'text-right' },
+      cell: ({ row }) => (
+        <Group gap={4} justify="flex-end" wrap="nowrap">
+          <ActionIcon variant="subtle" color="blue" onClick={() => startEdit(row.original)} title="Edit">
+            <Pencil size={16} />
+          </ActionIcon>
+          <ActionIcon
+            variant="subtle"
+            color="red"
+            onClick={() => remove.mutate(row.original.id)}
+            title="Delete"
+          >
+            <Trash2 size={16} />
+          </ActionIcon>
+        </Group>
+      ),
+    },
+  ];
+
   return (
     <>
       <Group justify="space-between" mb="sm">
@@ -587,83 +649,13 @@ function FeeRules() {
         </Button>
       </Group>
 
-      {isLoading ? (
-        <Group justify="center" py="xl">
-          <Loader />
-        </Group>
-      ) : (
-        <Table.ScrollContainer minWidth={1100}>
-          <Table striped highlightOnHover verticalSpacing="sm">
-            <Table.Thead>
-              <Table.Tr>
-                <Table.Th>Type</Table.Th>
-                <Table.Th>Name</Table.Th>
-                <Table.Th>Freight</Table.Th>
-                <Table.Th>Trade</Table.Th>
-                <Table.Th>Cargo</Table.Th>
-                <Table.Th>Container</Table.Th>
-                <Table.Th>Location scope</Table.Th>
-                <Table.Th>Free days</Table.Th>
-                <Table.Th>Rate / day</Table.Th>
-                <Table.Th>Active</Table.Th>
-                <Table.Th ta="right">Actions</Table.Th>
-              </Table.Tr>
-            </Table.Thead>
-            <Table.Tbody>
-              {rules.map((rule) => (
-                <Table.Tr key={rule.id}>
-                  <Table.Td>
-                    <Badge color={RULE_TYPE_COLOR[rule.ruleType] ?? 'gray'} variant="light">
-                      {FEE_RULE_TYPE_LABELS[rule.ruleType] ?? rule.ruleType}
-                    </Badge>
-                  </Table.Td>
-                  <Table.Td>{rule.name}</Table.Td>
-                  <Table.Td>{rule.freightType ?? dash}</Table.Td>
-                  <Table.Td>{rule.tradeDirection ?? dash}</Table.Td>
-                  <Table.Td>{rule.cargoTypeCode ?? dash}</Table.Td>
-                  <Table.Td>{rule.containerType ?? dash}</Table.Td>
-                  <Table.Td>
-                    {[rule.facilityId, rule.warehouseId, rule.yardId, rule.zoneId].some(Boolean) ? (
-                      <Stack gap={2}>
-                        {rule.facilityId && <Text size="xs">Facility: {rule.facilityId}</Text>}
-                        {rule.warehouseId && <Text size="xs">Warehouse: {rule.warehouseId}</Text>}
-                        {rule.yardId && <Text size="xs">Yard: {rule.yardId}</Text>}
-                        {rule.zoneId && <Text size="xs">Zone: {rule.zoneId}</Text>}
-                      </Stack>
-                    ) : (
-                      dash
-                    )}
-                  </Table.Td>
-                  <Table.Td>{rule.freeDays}</Table.Td>
-                  <Table.Td>
-                    {Number(rule.ratePerDay).toLocaleString()} {rule.currency}
-                  </Table.Td>
-                  <Table.Td>
-                    <Badge color={rule.isActive ? 'green' : 'gray'} variant="light">
-                      {rule.isActive ? 'Yes' : 'No'}
-                    </Badge>
-                  </Table.Td>
-                  <Table.Td ta="right">
-                    <Group gap={4} justify="flex-end" wrap="nowrap">
-                      <ActionIcon variant="subtle" color="blue" onClick={() => startEdit(rule)} title="Edit">
-                        <Pencil size={16} />
-                      </ActionIcon>
-                      <ActionIcon
-                        variant="subtle"
-                        color="red"
-                        onClick={() => remove.mutate(rule.id)}
-                        title="Delete"
-                      >
-                        <Trash2 size={16} />
-                      </ActionIcon>
-                    </Group>
-                  </Table.Td>
-                </Table.Tr>
-              ))}
-            </Table.Tbody>
-          </Table>
-        </Table.ScrollContainer>
-      )}
+      <DataTable
+        columns={feeColumns}
+        data={rules}
+        status={isLoading ? 'loading' : 'success'}
+        emptyMessage="No storage or demurrage fee rules yet."
+        containerClassName="border-0 shadow-none"
+      />
 
       <Modal opened={open} onClose={() => { setOpen(false); resetForm(); }} title={editingId ? 'Edit fee rule' : 'New fee rule'} centered size="lg">
         <Stack gap="sm">
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/MIGRATION_TO_READABLE_URLS.md b/apps/edr-freight-web/backoffice/src/performance-management/MIGRATION_TO_READABLE_URLS.md
new file mode 100644
index 000000000..d8de59120
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/MIGRATION_TO_READABLE_URLS.md
@@ -0,0 +1,198 @@
+
+sentationsand premos r de
+- Better foolisheds more p- Looknal**
+fessio✅ **Proages
+
+ror messr er Bettegs
+-in losources ntify re to ide*
+- Easierbugging***De
+
+✅ tive URLsscripre dengines
+- Mo eearch s- Better forable)
+plic** (if apEO **S
+✅ bookmark
+hare and Easier to se
+-re they ar whe understands canul
+- Useraningfdable and me are rea
+- URLsrience**r Expe
+
+✅ **Use## Benefitstime
+
+oute at a e one rgratmiy  Graduallnd slugs
+3.th UUIDs as bohich handleram()` wSlugPaarse2. Use `phanges
+ute crt rove but reitiesp slug util:
+1. Keearise issues k Plan
+
+IfRollbac)
+
+## on collisi names (slugte planuplica Dmes
+   -g nalon very thns wi- Pla   in names
+ charactersial ecns with sp- Pla*
+   ge Cases* **Edns
+
+4.peratioest CRUD oUIDs
+   - T still use Ull API callsify a**
+   - Ver*API Testes
+
+3. * valuorrect show ceadcrumbsy br
+   - VerifLsnew UR with ation flowsavigest all n   - Tst**
+ion Te. **Navigat
+
+2URLsookmarked t with b  - Tesn
+ migratiouring ll work d stid UUID URLs- Ensure ol*
+   t*lity Tesmpatibiard Cokw
+
+1. **BacyategStr## Testing ;
+```
+
+{planSlug}`)r}/plan/$gement/${yeaormance-manaate(`/perfavigd);
+n), plan.ie(plan.nameam(localizedNlugteUniqueSea crlug =
+const planSteration - Af
+
+// Navigan.id}`);pl/plan/${Id}nt/${yearanagemeformance-m(`/pervigate
+naion - Beforeigat;
+
+// Nav|| '')(planSlug lugParamparseSd } = lanI pd:t { i;
+consd)unitI, lanYear(yearResolvedPuse } = arIda, yeearDatata: planY
+const { dams();eParusSlug } = lantionKey, pyear, posi
+const { 
+// AfterarId);
+ById(ye usePlanYeara } =YearDatlana: pconst { dat();
+ = useParams }, planIdtionIdrId, posi{ yea
+const Before
+// ``tsxonent
+
+`ble Compte PlanTapdae: Uxampl## EnSlug}`
+
+lan/\${pyear}/plaent/\${nce-managemrmaerfoigate(\`/p
+- `nav\${year}`ent/emance-managormate(\`/perf
+- `navigith:
+
+Replace w\${planId}`r}/plan/\${yeant/managemee-/performancigate(\`
+- `navarId}`\${yeement/mance-manag/perfore(\`- `navigatf:
+s oncer all instaearch fo Calls
+Savigation
+
+### 3. NuLayout.tsx`formanceMenpert/layout/nagemene-mac/performanc`sr/*`
+- rarchyents/PlanHieement/compon-managrformance `src/pesx`
+-rm.tn/PlanFogurationfits/Plan-Componenement/coance-managformerrc/p `sable.tsx`
+-n/planTratiolan-Configuponents/P/comgement-manaanceerform
+- `src/psing Paramsmponents U
+
+### 2. Coute>
+```>} />
+</RoPlanForm /ement={< ellug/edit"lan/:planSth="pRoute pa />} />
+  <ails={<PlanDetug" elementan/:planSl"plth=ute pa>
+  <Rorchy />} /eranHila={<Pment" elelansth="p  <Route pat/:year">
+managemenrformance-ath="peRoute par
+<o ye tarIdall yege 
+// Chan`tsxtsx)
+``s (App. 1. Route
+
+###eUpdato Files t Key ons
+
+##operatiCRUD t all 
+- [ ] Tesededre neolution wheo-ID resg-t ] Add slurnally
+- [nte use UUIDs itill salls API callnsure [ ] Ealls
+- I CUpdate APse 4: 
+### Phation flows
+l naviga] Test alams()`
+- [ useParng `mponents usie all codat ] Up- [Slug`
+an `:pllanId` torom `:p params fange route
+- [ ] Ch` `:yearId` to `:year params fromoute r [ ] Changege)
+-hanking Coutes (Breaate R 3: Upd## Phase
+
+#dable valuesuse rearumbs to pdate breadcrs
+- [ ] Uear numbe to use yu linkse menat [ ] Upd
+-lugso use plan ss tate()` callnavigate all ` [ ] Updmbers
+- nuars to use yell` ca `navigate()date all [ ] Upation
+-e Navig: Updatase 2 Phrk)
+
+###ll would sti URLs (shoID UUith existing[ ] Test wlugs
+-  ss andUUIDth boto parse mponents  Update coook
+- [ ] hanYear`eResolvedPlus
+- [x] Add `hookyNumber` nYearB`usePla [x] Add ons
+-y functi utilitte slug
+- [x] Creaatible)rd Comp(Backwaupport d Slug S Ad1: Phase st
+
+###lickration Che`
+
+## Migment
+``nce-departnatable/filans-/ Use: /puuid
+/c-123-table/abof: /plans-nstead 
+// ID:
+```tsx of Iat insteadld, use th`key` fiea e ns havIf positioKeys
+
+tion e Posions: Us 3. Positi
+###
+nId);
+```n(pla } = usePlatalanDa data: p
+const {lug);ram(planSugPaseSl } = parplanId id: nst {();
+corams } = usePaanSlugst { plcons';
+
+slugUtilt/utils/-managemenormancerom '@/perfram } fSlugParse part {
+impoxs:**
+```tsent compone slugs inrs**Pa
+```
+
+g}`);${planSlulan/t/2024/pemenmance-manag(`/perfor
+navigate plan.id);ame),(plan.nzedNameocaliqueSlug(leUni = creatplanSlug
+const g to a plann navigatin';
+
+// Whetilstils/slugUmanagement/umance-for '@/pereSlug } fromiquUnatet { cresx
+imporng:**
+```ttivigahen naslugs we Generat
+**Suffix
+s with ID uglans: Use Sl. P
+### 2
+y
+```r displa" fo24e "20ear will b/ ys
+/for API callactual UUID be the arId will 
+// yed);r, unitIear(yeavedPlanYol useRes, yearId } =ta{ danst 
+
+coid;0]?.s?.[ata?.itemata?.d)?.dionId!zatorganitList(text?.getConunitId = uninst co();
+itContextext = useUntContunid;
+const tionI.organizaployee?.[0]?user?.emzationId = ni
+const orga);Params(ar } = use{ yest w way
+con
+// Ne(yearId);
+earByIdePlanY= usdata } st { ams();
+conPar} = uset { yearId y
+cons Old wasx
+//*
+```tve year:*olrests to ponen com
+
+**Update
+```nt/:year">eme-managerformance"pe path=tsx
+<Rout:**
+```
+
+**To">
+```arIdment/:yege-manaperformancee path="x
+<Rout```ts:**
+routes from
+
+**Change NumbersYear s: Use lan Year# 1. Ps
+
+##n Steptio Implementat
+```
+
+##5/edin-q2-abc1234lay-prterl/plan/quament/2024ance-managerforment
+/pedepartmnce-s-table/finat/2024/plance-managemenmanerfor4/plans
+/p/202nagementormance-maerf)
+```
+/pdable (Human-rea After
+###`
+``/edit
+uuidhi-789-d/plan/guic-123-uent/abanagemnce-m/performa456-uuid
+s-table/def-3-uuid/planment/abc-12ance-managerm/perfolans
+-123-uuid/pt/abcanagemenrmance-m```
+/perfoUID-based)
+e (U# Beforhanges
+
+##re CRL Structu.
+
+## Uduleanagement moce mrmanin the perfole URLs readaban-to humased URLs D-bm UUIte froto migraains how xpl eideis gu
+ThOverviews
+
+## dable URLHuman-Rean Guide: gratio# Mi
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/Call-Management/activeCallManagement.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/Call-Management/activeCallManagement.tsx
new file mode 100644
index 000000000..3b38ea7bc
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/Call-Management/activeCallManagement.tsx
@@ -0,0 +1,969 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { useNavigate } from "react-router-dom";
+import { useToast } from "@/shared/common/ui/use-toast";
+import { useTranslation } from "react-i18next";
+
+// Import your existing components
+import { Button } from "@/shared/common/ui/button";
+import { Badge } from "@/shared/common/ui/badge";
+import { Card, CardContent } from "@/shared/common/ui/card";
+import { Progress } from "@/shared/common/ui/progress";
+import { cn } from "@/shared/lib/utils";
+import {
+  AlertCircleIcon,
+  ArrowLeftIcon,
+  ChartBarIcon,
+  ClockIcon,
+  HourglassIcon,
+  Loader2,
+  PlayCircleIcon,
+  Settings2Icon,
+  TicketIcon,
+  UserIcon,
+  AlertTriangleIcon,
+  PhoneIcon,
+  CalendarIcon,
+  BuildingIcon,
+  Activity,
+  Zap,
+  Users,
+  CheckCircle,
+  RefreshCw,
+  TrendingUp,
+  BarChart3,
+  Phone,
+  Clock,
+} from "lucide-react";
+import { getApiErrorMessage } from "@/record-management/services/api/approvalService";
+import {
+  useCallExecution,
+  useMyActiveExecution,
+} from "@/queue-management/hooks/useExecution";
+
+// Types
+enum TransferTypes {
+  REASSIGN = "reassign",
+  TRANSFER = "transfer",
+}
+
+enum TicketStatus {
+  WAITING = "waiting",
+  CALLED = "called",
+  SERVING = "serving",
+  COMPLETED = "completed",
+  TRANSFERRED = "transferred",
+  SKIPPED = "skipped",
+}
+
+interface Ticket {
+  id: string;
+  ticketNumber: string;
+
+  serviceId: string;
+  service: {
+    name: string;
+    category: {
+      name: string;
+    };
+  };
+  counterId: string;
+  counter: {
+    windowNumber: string;
+  };
+  status: TicketStatus;
+  priority: "low" | "normal" | "high" | "urgent";
+  calledAt?: string;
+  servedAt?: string;
+  completedAt?: string;
+  transferredFrom?: any;
+  transferredFromId?: string | null;
+  transferType?: TransferTypes | null;
+  handlerId?: string;
+  handler?: {
+    firstName: string;
+    lastName: string;
+    windowNumber: string;
+  };
+  estimatedWaitTime?: number;
+  customerNotes?: string;
+  customerName?: string;
+  customerPhone?: string;
+  queueGroup?: {
+    customerName?: {
+      en: string;
+      am: string;
+    };
+    customerPhone?: string;
+  };
+}
+
+const ActiveCallManagement = () => {
+  const navigate = useNavigate();
+  const { toast } = useToast();
+  const { t } = useTranslation();
+
+  // State
+  const [activeTicket, setActiveTicket] = useState<Ticket | null>(null);
+  const [serviceTime, setServiceTime] = useState(0);
+  const [isTimeExceeded, setIsTimeExceeded] = useState(false);
+  const [waitTime, setWaitTime] = useState(0);
+
+  const { mutate: callExecution, isPending: isCalling } = useCallExecution();
+
+  // Fetch active execution to show notifications
+  const { data: myActiveExecutionData, refetch: refetchActiveExecution } =
+    useMyActiveExecution();
+
+  // Auto-refresh active execution data every 30 seconds
+  useEffect(() => {
+    const interval = setInterval(() => {
+      refetchActiveExecution();
+    }, 30000); // 30 seconds
+
+    return () => clearInterval(interval);
+  }, [refetchActiveExecution]);
+
+  // Update activeTicket when myActiveExecutionData changes
+  useEffect(() => {
+    if (myActiveExecutionData) {
+      // Extract customer information
+      const customerName =
+        myActiveExecutionData.queue?.queueGroup?.customerName?.en ||
+        myActiveExecutionData.queue?.queueGroup?.customerName?.am ||
+        t("activeCallManagement.customer");
+      const customerPhone =
+        myActiveExecutionData.queue?.queueGroup?.customerPhone ||
+        t("common.na", "N/A");
+
+      // Map execution data to Ticket format
+      const mappedTicket: Ticket = {
+        id: myActiveExecutionData.id,
+        ticketNumber: myActiveExecutionData.queue?.positionInQueue
+          ? `${myActiveExecutionData.service?.prefix || "T"}-${
+              myActiveExecutionData.queue.positionInQueue
+            }`
+          : myActiveExecutionData.queueNumber || t("common.na", "N/A"),
+
+        serviceId: myActiveExecutionData.serviceId || "",
+        service: {
+          name:
+            myActiveExecutionData.service?.name?.en ||
+            t("activeCallManagement.service"),
+          category: {
+            name:
+              myActiveExecutionData.service?.name?.en ||
+              t("activeCallManagement.category"),
+          },
+        },
+        counterId: myActiveExecutionData.employeePositionId || "",
+        counter: {
+          windowNumber: myActiveExecutionData.caseWorkerName?.en || "1",
+        },
+        status:
+          myActiveExecutionData.status === "STARTED"
+            ? TicketStatus.SERVING
+            : myActiveExecutionData.status === "STOPPED"
+            ? TicketStatus.CALLED
+            : TicketStatus.COMPLETED,
+        priority: "normal" as const,
+        calledAt: myActiveExecutionData.calledAt,
+        servedAt: myActiveExecutionData.startedAt,
+        completedAt: myActiveExecutionData.endedAt,
+        transferredFrom: undefined,
+        transferredFromId: myActiveExecutionData.parentExecutionId,
+        transferType: null,
+        handlerId: myActiveExecutionData.caseWorkerId,
+        handler: myActiveExecutionData.caseWorkerName
+          ? {
+              firstName:
+                myActiveExecutionData.caseWorkerName.en.split(" ")[0] || "",
+              lastName:
+                myActiveExecutionData.caseWorkerName.en.split(" ")[1] || "",
+              windowNumber: "1",
+            }
+          : undefined,
+        estimatedWaitTime: myActiveExecutionData.service?.estimatedTime,
+        customerNotes: myActiveExecutionData.queue?.queueGroup?.customerPhone
+          ? `Customer: ${myActiveExecutionData.queue.queueGroup.customerName.en} (${myActiveExecutionData.queue.queueGroup.customerPhone})`
+          : undefined,
+        customerName: customerName,
+        customerPhone: customerPhone,
+        queueGroup: myActiveExecutionData.queue?.queueGroup,
+      };
+      setActiveTicket(mappedTicket);
+    } else {
+      // Clear active ticket if no execution data
+      setActiveTicket(null);
+    }
+  }, [myActiveExecutionData, t]);
+
+  useEffect(() => {
+    let interval: number;
+
+    if (activeTicket?.status === TicketStatus.SERVING) {
+      interval = window.setInterval(() => {
+        setServiceTime((prev) => {
+          const newTime = prev + 1;
+          // Check if time exceeded estimated time (convert minutes to seconds)
+          const estimatedSeconds = (activeTicket.estimatedWaitTime || 0) * 60;
+          setIsTimeExceeded(newTime > estimatedSeconds && estimatedSeconds > 0);
+          return newTime;
+        });
+      }, 1000);
+    }
+
+    return () => clearInterval(interval);
+  }, [activeTicket?.status, activeTicket?.estimatedWaitTime]);
+
+  useEffect(() => {
+    let interval: number;
+
+    if (activeTicket?.status === TicketStatus.CALLED) {
+      interval = window.setInterval(() => {
+        setWaitTime((prev) => prev + 1);
+      }, 1000);
+    }
+
+    return () => clearInterval(interval);
+  }, [activeTicket?.status]);
+
+  // Handlers
+  const handleCall = useCallback(() => {
+    callExecution(undefined, {
+      onSuccess: (data) => {
+        setActiveTicket(data);
+        setWaitTime(0);
+        toast({
+          title: t("activeCallManagement.ticketCalled"),
+          description: `${t("activeCallManagement.ticket")} ${
+            data.ticketNumber
+          } ${t("activeCallManagement.ticketCalledMessage")}`,
+          variant: "default",
+        });
+      },
+      onError: (error) => {
+        toast({
+          title: t("activeCallManagement.callFailed"),
+          description: getApiErrorMessage(
+            error,
+            t("activeCallManagement.callFailedMessage")
+          ),
+          variant: "destructive",
+        });
+      },
+    });
+  }, [callExecution, toast, t]);
+
+  // Helper functions
+  const formatTime = useCallback((seconds: number) => {
+    const h = Math.floor(seconds / 3600)
+      .toString()
+      .padStart(2, "0");
+    const m = Math.floor((seconds % 3600) / 60)
+      .toString()
+      .padStart(2, "0");
+    const s = (seconds % 60).toString().padStart(2, "0");
+    return `${h}:${m}:${s}`;
+  }, []);
+
+  const getPriorityColor = useCallback((priority: string) => {
+    switch (priority) {
+      case "urgent":
+        return "bg-red-100 text-red-800 border-red-200";
+      case "high":
+        return "bg-orange-100 text-orange-800 border-orange-200";
+      case "normal":
+        return "bg-blue-100 text-blue-800 border-blue-200";
+      default:
+        return "bg-gray-100 text-gray-800 border-gray-200";
+    }
+  }, []);
+
+  // Format date for display
+  const formatDate = useCallback((dateString?: string) => {
+    if (!dateString) return t("common.na", "N/A");
+    try {
+      const date = new Date(dateString);
+      return new Intl.DateTimeFormat("en-US", {
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+      }).format(date);
+    } catch {
+      return dateString;
+    }
+  }, []);
+
+  // Memoized components
+  const TicketDisplay = useMemo(() => {
+    if (!activeTicket) {
+      return (
+        <Card className="h-full flex items-center justify-center border-dashed border-2 border-gray-200 bg-gradient-to-br from-gray-50 to-white rounded-2xl">
+          <CardContent className="py-16 text-center">
+            <div className="relative inline-block mb-6">
+              <div className="h-32 w-32 rounded-full bg-gradient-to-r from-blue-100 to-blue-50 flex items-center justify-center animate-pulse">
+                <TicketIcon className="h-16 w-16 text-blue-300" />
+              </div>
+              <div className="absolute inset-0 flex items-center justify-center">
+                <div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center shadow-lg">
+                  <PlayCircleIcon className="h-6 w-6 text-white" />
+                </div>
+              </div>
+            </div>
+            <h3 className="text-2xl font-bold text-gray-900 mb-3">
+              {t("activeCallManagement.readyToServe")}
+            </h3>
+            <p className="text-gray-600 max-w-md mx-auto mb-8 text-lg">
+              {t("activeCallManagement.noActiveCustomer")}
+            </p>
+            <div className="flex items-center justify-center gap-4 text-sm text-gray-500">
+              <div className="flex items-center gap-2">
+                <Users className="w-4 h-4" />
+                <span>
+                  {t(
+                    "activeCallManagement.waitingCustomers",
+                    "Waiting customers"
+                  )}
+                </span>
+              </div>
+              <div className="w-1 h-1 bg-gray-300 rounded-full"></div>
+              <div className="flex items-center gap-2">
+                <Clock className="w-4 h-4" />
+                <span>
+                  {t(
+                    "activeCallManagement.realTimeUpdates",
+                    "Real-time updates"
+                  )}
+                </span>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      );
+    }
+
+    return (
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Customer Information Card */}
+        <Card className="bg-white/90 backdrop-blur-sm border-0 shadow-lg rounded-2xl overflow-hidden">
+          <div
+            className={cn(
+              "p-6 text-white",
+              activeTicket.status === TicketStatus.CALLED
+                ? "bg-gradient-to-r from-yellow-500 to-orange-500"
+                : "bg-gradient-to-r from-purple-500 to-indigo-500"
+            )}
+          >
+            <div className="flex justify-between items-center">
+              <div className="flex items-center gap-3">
+                <div className="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
+                  <UserIcon className="w-6 h-6" />
+                </div>
+                <div>
+                  <h3 className="font-bold text-lg">
+                    {activeTicket.status === TicketStatus.CALLED
+                      ? t("activeCallManagement.customerCalled")
+                      : t("activeCallManagement.currentlyServing")}
+                  </h3>
+                  <p className="text-white/90 text-sm">
+                    {activeTicket.status === TicketStatus.CALLED
+                      ? t("activeCallManagement.waitingAtCounter")
+                      : t("activeCallManagement.assistingCustomer")}
+                  </p>
+                </div>
+              </div>
+              <Badge className="bg-white/20 backdrop-blur-sm text-white border-0 px-3 py-1">
+                <Phone className="h-3 w-3 mr-1" />
+                {activeTicket.status === TicketStatus.CALLED
+                  ? t("activeCallManagement.called")
+                  : t("activeCallManagement.serving")}
+              </Badge>
+            </div>
+          </div>
+
+          <CardContent className="p-6">
+            <div className="space-y-6">
+              {/* Customer Name and Ticket */}
+              <div className="text-center p-6 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl">
+                <div className="text-sm text-blue-600 font-medium mb-2">
+                  {t("activeCallManagement.customer")}
+                </div>
+                <h2 className="text-3xl font-bold text-blue-900 mb-2">
+                  {activeTicket.customerName ||
+                    t("activeCallManagement.customer")}
+                </h2>
+                <div className="inline-flex items-center gap-2 bg-white px-4 py-2 rounded-full border border-blue-200">
+                  <TicketIcon className="h-4 w-4 text-blue-600" />
+                  <span className="text-sm font-medium text-blue-800">
+                    {t("activeCallManagement.ticket")} #
+                    {activeTicket.ticketNumber}
+                  </span>
+                </div>
+              </div>
+
+              {/* Customer Details Grid */}
+              <div className="grid grid-cols-1 gap-4">
+                <div className="flex items-center justify-between p-4 bg-green-50 rounded-lg border border-green-200">
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
+                      <PhoneIcon className="h-5 w-5 text-primary-600" />
+                    </div>
+                    <div>
+                      <div className="text-sm text-primary-600 font-medium">
+                        {t("activeCallManagement.phoneNumber")}
+                      </div>
+                      <div className="font-semibold text-green-900">
+                        {activeTicket.customerPhone || t("common.na", "N/A")}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex items-center justify-between p-4 bg-purple-50 rounded-lg border border-purple-200">
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
+                      <CalendarIcon className="h-5 w-5 text-purple-600" />
+                    </div>
+                    <div>
+                      <div className="text-sm text-purple-600 font-medium">
+                        {t("activeCallManagement.calledAt", "Called At")}
+                      </div>
+                      <div className="font-semibold text-purple-900">
+                        {formatDate(activeTicket.calledAt)}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Priority Badge */}
+              {activeTicket.priority && activeTicket.priority !== "normal" && (
+                <div className="flex items-center justify-center">
+                  <Badge
+                    className={cn(
+                      "px-4 py-2 text-sm font-semibold",
+                      getPriorityColor(activeTicket.priority)
+                    )}
+                  >
+                    <AlertTriangleIcon className="h-4 w-4 mr-2" />
+                    {activeTicket.priority.toUpperCase()}{" "}
+                    {t("activeCallManagement.priority", "PRIORITY")}
+                  </Badge>
+                </div>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Service Information Card */}
+        <Card className="bg-white/90 backdrop-blur-sm border-0 shadow-lg rounded-2xl overflow-hidden">
+          <div className="p-6 bg-gradient-to-r from-blue-600 to-cyan-500 text-white">
+            <div className="flex justify-between items-center">
+              <div className="flex items-center gap-3">
+                <div className="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
+                  <Settings2Icon className="w-6 h-6" />
+                </div>
+                <div>
+                  <h3 className="font-bold text-lg">
+                    {t("activeCallManagement.serviceInformation")}
+                  </h3>
+                  <p className="text-white/90 text-sm">
+                    {t("activeCallManagement.currentServiceDetails")}
+                  </p>
+                </div>
+              </div>
+              <Badge className="bg-white/20 backdrop-blur-sm text-white border-0 px-3 py-1">
+                <Settings2Icon className="h-3 w-3 mr-1" />
+                {t("activeCallManagement.service")}
+              </Badge>
+            </div>
+          </div>
+
+          <CardContent className="p-6">
+            <div className="space-y-6">
+              {/* Service Name Display */}
+              <div className="text-center p-6 bg-gradient-to-r from-cyan-50 to-blue-50 rounded-xl">
+                <div className="text-sm text-cyan-600 font-medium mb-2">
+                  {t(
+                    "activeCallManagement.currentlyServingLabel",
+                    "Currently Serving"
+                  )}
+                </div>
+                <h2 className="text-2xl font-bold text-cyan-900 mb-4">
+                  {typeof activeTicket.service?.name === "object"
+                    ? (activeTicket.service?.name as any)?.en ||
+                      (activeTicket.service?.name as any)?.am ||
+                      t("activeCallManagement.service")
+                    : activeTicket.service?.name}
+                </h2>
+                <div className="inline-flex items-center gap-2 bg-white px-4 py-2 rounded-full border border-cyan-200">
+                  <BuildingIcon className="h-4 w-4 text-cyan-600" />
+                  <span className="text-sm font-medium text-cyan-800">
+                    {t("activeCallManagement.window")}{" "}
+                    {activeTicket.counter?.windowNumber ||
+                      t("common.na", "N/A")}
+                  </span>
+                </div>
+              </div>
+
+              {/* Service Details */}
+              <div className="grid grid-cols-1 gap-4">
+                <div className="flex items-center justify-between p-4 bg-orange-50 rounded-lg border border-orange-200">
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
+                      <ClockIcon className="h-5 w-5 text-orange-600" />
+                    </div>
+                    <div>
+                      <div className="text-sm text-orange-600 font-medium">
+                        {t("activeCallManagement.estimatedTime", "Est. Time")}
+                      </div>
+                      <div className="font-semibold text-orange-900">
+                        {activeTicket.estimatedWaitTime
+                          ? `${activeTicket.estimatedWaitTime} ${t(
+                              "activeCallManagement.minutes",
+                              "minutes"
+                            )}`
+                          : t(
+                              "activeCallManagement.notSpecified",
+                              "Not specified"
+                            )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex items-center justify-between p-4 bg-indigo-50 rounded-lg border border-indigo-200">
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center">
+                      <ChartBarIcon className="h-5 w-5 text-indigo-600" />
+                    </div>
+                    <div>
+                      <div className="text-sm text-indigo-600 font-medium">
+                        {t("activeCallManagement.status")}
+                      </div>
+                      <div className="font-semibold text-indigo-900 capitalize">
+                        {activeTicket.status === TicketStatus.SERVING
+                          ? t("activeCallManagement.inProgress")
+                          : activeTicket.status === TicketStatus.CALLED
+                          ? t("activeCallManagement.waiting")
+                          : activeTicket.status}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Service Start Time */}
+              {activeTicket.servedAt && (
+                <div className="p-4 bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg border border-green-200">
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
+                      <CheckCircle className="h-5 w-5 text-primary-600" />
+                    </div>
+                    <div>
+                      <div className="text-sm font-medium text-green-800">
+                        {t("activeCallManagement.serviceStarted")}
+                      </div>
+                      <div className="text-sm text-primary-700">
+                        {formatDate(activeTicket.servedAt)}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Customer Notes */}
+              {activeTicket.customerNotes && (
+                <div className="p-4 bg-gradient-to-r from-amber-50 to-yellow-50 rounded-lg border border-amber-200">
+                  <div className="flex items-start gap-3">
+                    <div className="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center mt-0.5">
+                      <AlertCircleIcon className="h-5 w-5 text-amber-600" />
+                    </div>
+                    <div>
+                      <div className="text-sm font-medium text-amber-800 mb-1">
+                        {t("activeCallManagement.customerNotes")}
+                      </div>
+                      <div className="text-sm text-amber-700">
+                        {activeTicket.customerNotes}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }, [activeTicket, handleCall, isCalling, getPriorityColor, formatDate, t]);
+
+  const ServingTime = () => {
+    if (!activeTicket) return null;
+
+    const time =
+      activeTicket.status === TicketStatus.SERVING ? serviceTime : waitTime;
+    const isServing = activeTicket.status === TicketStatus.SERVING;
+    const maxTime = (activeTicket.estimatedWaitTime || 5) * 60;
+    const progressValue = Math.min((time / maxTime) * 100, 100);
+    const isOverdue = isTimeExceeded;
+
+    return (
+      <Card className="bg-white/90 backdrop-blur-sm border-0 shadow-lg rounded-2xl overflow-hidden">
+        <div
+          className={cn(
+            "p-6",
+            isServing
+              ? isOverdue
+                ? "bg-gradient-to-r from-red-500 to-rose-500"
+                : "bg-gradient-to-r from-green-500 to-emerald-500"
+              : isOverdue
+              ? "bg-gradient-to-r from-red-500 to-rose-500"
+              : "bg-gradient-to-r from-yellow-500 to-amber-500"
+          )}
+        >
+          <div className="flex items-center justify-between text-white">
+            <div className="flex items-center gap-4">
+              <div className="w-16 h-16 bg-white/20 rounded-2xl flex items-center justify-center">
+                <ClockIcon className="w-8 h-8" />
+              </div>
+              <div>
+                <h3 className="text-2xl font-bold mb-1">
+                  {isServing
+                    ? t("activeCallManagement.serviceTime")
+                    : t("activeCallManagement.customerWaitTime")}
+                </h3>
+                <p className="text-white/90">
+                  {isServing
+                    ? isOverdue
+                      ? `⚠️ ${t(
+                          "activeCallManagement.exceedingEstimatedTime"
+                        )} ${activeTicket.customerName}`
+                      : `${t("activeCallManagement.assisting")} ${
+                          activeTicket.customerName
+                        }`
+                    : `${activeTicket.customerName} ${t(
+                        "activeCallManagement.waitingAtCounterLabel"
+                      )}`}
+                </p>
+              </div>
+            </div>
+            <div className="text-right">
+              <div className="text-5xl font-bold font-mono mb-2">
+                {formatTime(time)}
+              </div>
+              <div className="flex items-center gap-2">
+                <Badge
+                  className={cn(
+                    "px-3 py-1.5 text-sm font-semibold",
+                    isOverdue
+                      ? "bg-white/20 text-white"
+                      : "bg-white/20 text-white"
+                  )}
+                >
+                  {progressValue.toFixed(0)}%
+                </Badge>
+                <span className="text-sm text-white/80">
+                  {Math.floor(maxTime / 60)}m {t("activeCallManagement.target")}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-gray-50 p-6">
+          <div className="flex justify-between items-center mb-4">
+            <div className="flex items-center gap-4">
+              <div className="flex items-center gap-2">
+                <ClockIcon className="w-5 h-5 text-gray-600" />
+                <span className="text-sm font-medium text-gray-700">
+                  {t("activeCallManagement.timeElapsed")}
+                </span>
+              </div>
+              <div className="text-lg font-mono font-semibold text-gray-900">
+                {Math.floor(time / 60)}m {time % 60}s
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              {isOverdue && (
+                <Badge variant="destructive" className="gap-1">
+                  <AlertTriangleIcon className="w-3 h-3" />
+                  {t("activeCallManagement.overdue", "Overdue")}
+                </Badge>
+              )}
+              <Badge
+                variant={isServing ? "success" : "warning"}
+                className="gap-1"
+              >
+                <Activity className="w-3 h-3" />
+                {isServing
+                  ? t("activeCallManagement.serving")
+                  : t("activeCallManagement.waiting")}
+              </Badge>
+            </div>
+          </div>
+          <Progress
+            value={progressValue}
+            className={cn(
+              "h-3 rounded-full",
+              isOverdue
+                ? "bg-red-100 [&>div]:bg-gradient-to-r [&>div]:from-red-500 [&>div]:to-rose-500"
+                : isServing
+                ? "bg-green-100 [&>div]:bg-gradient-to-r [&>div]:from-green-500 [&>div]:to-emerald-500"
+                : "bg-yellow-100 [&>div]:bg-gradient-to-r [&>div]:from-yellow-500 [&>div]:to-amber-500"
+            )}
+          />
+          <div className="flex justify-between text-xs text-gray-500 mt-2">
+            <span>0m</span>
+            <span>{Math.floor(maxTime / 60)}m</span>
+          </div>
+        </div>
+      </Card>
+    );
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 p-4 md:p-6">
+      <div className="max-w-7xl mx-auto">
+        {/* Enhanced Header */}
+        <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6 mb-8">
+          <div className="flex items-center gap-4">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => navigate(-1)}
+              className="border-gray-300 hover:border-blue-400 hover:bg-blue-50 gap-2"
+            >
+              <ArrowLeftIcon className="h-4 w-4" />
+              {t("activeCallManagement.back", "Back")}
+            </Button>
+            <div className="flex items-center gap-4">
+              <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-2xl flex items-center justify-center shadow-lg">
+                <Activity className="w-8 h-8 text-white" />
+              </div>
+              <div>
+                <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-600 via-cyan-600 to-indigo-600 bg-clip-text text-transparent mb-2">
+                  {t("activeCallManagement.title", "Active Call Management")}
+                </h1>
+                <p className="text-gray-600 text-lg flex items-center gap-2">
+                  <Zap className="w-5 h-5 text-blue-500" />
+                  {t(
+                    "activeCallManagement.description",
+                    "Manage active customer calls and service execution in real-time"
+                  )}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Real-time Status and Controls */}
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2 px-4 py-2 bg-white/80 backdrop-blur-sm rounded-xl shadow-sm border">
+              <div className="w-3 h-3 rounded-full bg-green-500 animate-pulse" />
+              <span className="text-sm font-medium text-gray-700">
+                {t("activeCallManagement.realTimeUpdates", "Real-time Updates")}
+              </span>
+            </div>
+            <div className="flex items-center gap-3">
+              <div className="text-right">
+                <p className="text-sm text-gray-500">
+                  {t("activeCallManagement.serviceCounter", "Service Counter")}
+                </p>
+                <Badge className="bg-gradient-to-r from-blue-500 to-blue-600 text-white px-3 py-1.5">
+                  {t("activeCallManagement.window", "Window")}{" "}
+                  {activeTicket?.counter?.windowNumber || t("common.na", "N/A")}
+                </Badge>
+              </div>
+              <div className="h-8 w-px bg-gray-300" />
+              <div className="text-right">
+                <p className="text-sm text-gray-500">
+                  {t("activeCallManagement.status", "Status")}
+                </p>
+                <Badge
+                  className={cn(
+                    "px-3 py-1.5",
+                    activeTicket
+                      ? "bg-gradient-to-r from-green-500 to-emerald-500 text-white"
+                      : "bg-gray-100 text-gray-800"
+                  )}
+                >
+                  {activeTicket
+                    ? t("activeCallManagement.active", "Active")
+                    : t("activeCallManagement.ready", "Ready")}
+                </Badge>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Enhanced Main Content */}
+        <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
+          {/* Left Sidebar - Quick Actions & Stats */}
+          <div className="lg:col-span-1 space-y-6">
+            {/* Quick Actions Card */}
+            <Card className="bg-white/90 backdrop-blur-sm border-0 shadow-lg rounded-2xl overflow-hidden">
+              <div className="p-6 bg-gradient-to-r from-blue-600 to-blue-500 text-white">
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
+                    <Zap className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <h3 className="font-semibold text-lg">
+                      {t("activeCallManagement.quickActions")}
+                    </h3>
+                    <p className="text-blue-100 text-sm">
+                      {t("activeCallManagement.commonOperations")}
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <CardContent className="p-6 space-y-4">
+                {/* Call Next Customer Button */}
+                <Button
+                  className="w-full bg-gradient-to-r from-green-500 to-emerald-500 hover:from-primary hover:to-emerald-600 text-white shadow-lg hover:shadow-xl transition-all duration-200 h-12"
+                  onClick={() => handleCall()}
+                  disabled={isCalling || !!activeTicket}
+                >
+                  {isCalling ? (
+                    <>
+                      <Loader2 className="h-5 w-5 mr-2 animate-spin" />
+                      {t("activeCallManagement.calling")}
+                    </>
+                  ) : (
+                    <>
+                      <PlayCircleIcon className="h-5 w-5 mr-2" />
+                      {t("activeCallManagement.callNextCustomer")}
+                    </>
+                  )}
+                </Button>
+
+                {/* Action Buttons Grid */}
+                <div className="grid grid-cols-1 gap-3">
+                  <Button
+                    variant="outline"
+                    className="border-gray-300 text-gray-700 hover:bg-gray-50 h-10 gap-2"
+                    disabled={!activeTicket}
+                  >
+                    <HourglassIcon className="h-4 w-4" />
+                    {t("activeCallManagement.hold")}
+                  </Button>
+                  <Button
+                    variant="outline"
+                    className="border-gray-300 text-gray-700 hover:bg-gray-50 h-10 gap-2"
+                    disabled={!activeTicket}
+                  >
+                    <Settings2Icon className="h-4 w-4" />
+                    {t("activeCallManagement.transfer")}
+                  </Button>
+                  <Button
+                    variant="outline"
+                    onClick={() => {
+                      refetchActiveExecution();
+                    }}
+                    className="border-gray-300 text-gray-700 hover:bg-gray-50 h-10 gap-2"
+                  >
+                    <RefreshCw className="h-4 w-4" />
+                    {t("activeCallManagement.refresh", "Refresh")}
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Customer Stats Card */}
+            {activeTicket && (
+              <Card className="bg-white/90 backdrop-blur-sm border-0 shadow-lg rounded-2xl overflow-hidden">
+                <div className="p-6 bg-gradient-to-r from-purple-600 to-violet-500 text-white">
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
+                      <BarChart3 className="w-5 h-5" />
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-lg">
+                        {t("activeCallManagement.customerStats")}
+                      </h3>
+                      <p className="text-purple-100 text-sm">
+                        {t(
+                          "activeCallManagement.realTimeMetrics",
+                          "Real-time metrics"
+                        )}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+                <CardContent className="p-6">
+                  <div className="space-y-4">
+                    <div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
+                      <div className="flex items-center gap-2">
+                        <Settings2Icon className="h-4 w-4 text-blue-600" />
+                        <span className="text-sm text-blue-700 font-medium">
+                          {t("activeCallManagement.currentService")}
+                        </span>
+                      </div>
+                      <span className="font-medium text-blue-900 text-sm">
+                        {typeof activeTicket.service?.name === "object"
+                          ? (activeTicket.service?.name as any)?.en ||
+                            (activeTicket.service?.name as any)?.am ||
+                            t("common.na", "N/A")
+                          : activeTicket.service?.name}
+                      </span>
+                    </div>
+                    <div className="flex items-center justify-between p-3 bg-yellow-50 rounded-lg">
+                      <div className="flex items-center gap-2">
+                        <Clock className="h-4 w-4 text-yellow-600" />
+                        <span className="text-sm text-yellow-700 font-medium">
+                          {t("activeCallManagement.waitTime")}
+                        </span>
+                      </div>
+                      <span className="font-medium text-yellow-900 font-mono">
+                        {formatTime(waitTime)}
+                      </span>
+                    </div>
+                    <div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
+                      <div className="flex items-center gap-2">
+                        <Activity className="h-4 w-4 text-primary-600" />
+                        <span className="text-sm text-primary-700 font-medium">
+                          {t("activeCallManagement.serviceTime")}
+                        </span>
+                      </div>
+                      <span className="font-medium text-green-900 font-mono">
+                        {formatTime(serviceTime)}
+                      </span>
+                    </div>
+                    <div className="flex items-center justify-between p-3 bg-purple-50 rounded-lg">
+                      <div className="flex items-center gap-2">
+                        <TrendingUp className="h-4 w-4 text-purple-600" />
+                        <span className="text-sm text-purple-700 font-medium">
+                          {t("activeCallManagement.priority")}
+                        </span>
+                      </div>
+                      <Badge
+                        className={cn(
+                          "px-2 py-0.5",
+                          getPriorityColor(activeTicket.priority)
+                        )}
+                      >
+                        {activeTicket.priority}
+                      </Badge>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+          </div>
+
+          {/* Main Content Area */}
+          <div className="lg:col-span-3 space-y-6">
+            {/* Timer Card */}
+            {activeTicket && <ServingTime />}
+
+            {/* Customer and Service Display */}
+            {TicketDisplay}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ActiveCallManagement;
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/EmployeePlan/CreateEmployeePlanPage.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/EmployeePlan/CreateEmployeePlanPage.tsx
new file mode 100644
index 000000000..9b365804f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/EmployeePlan/CreateEmployeePlanPage.tsx
@@ -0,0 +1,803 @@
+import { useForm, useWatch } from "react-hook-form";
+import { motion } from "framer-motion";
+import {
+  Calendar,
+  Target,
+  Users,
+  FileText,
+  Plus,
+  ArrowLeft,
+  User,
+} from "lucide-react";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { useEffect, useMemo } from "react";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useAuth } from "@/shared/context/AuthContext";
+import { useUnitContext } from "@/shared/context/UnitContext";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import { Alert, AlertDescription, AlertTitle } from "@/shared/common/ui/alert";
+import { Info } from "lucide-react";
+import { GenericForm } from "@/performance-management/utils/generic-form";
+import { TimeFrame } from "@/performance-management/utils/shared-field-types";
+import {
+  useEmployeePlanMutations,
+  useEmployeePositions,
+  usePositionsByUnit,
+  useEmployeePlan,
+  useServices,
+  useEmployeePlanByPlanId,
+} from "@/performance-management/hooks/useEmployeePlan";
+import { FormField } from "@/performance-management/utils/shared-field-types";
+import { useMinePlan } from "@/performance-management/hooks/usePlans";
+
+// Define PlanType enum for employee plans
+export enum EmployeePlanType {
+  NUMBER = "number",
+  PERCENTAGE = "percent",
+  BOOLEAN = "boolean",
+}
+
+export interface EmployeePlanFormValues {
+  parentEmployeePlanId?: string;
+  employeePositionId: string;
+  planId: string;
+  serviceId: string;
+  planType: EmployeePlanType;
+  expectedQuantity: number;
+  week: string | number;
+  month: string | number;
+  quarter: string | number;
+  timeframe: string;
+}
+
+interface EmployeePlanFormProps {
+  parentEmployeePlanId?: string;
+  onSuccess?: () => void;
+}
+
+export default function EmployeePlanForm({
+  parentEmployeePlanId: propParentId,
+  onSuccess,
+}: EmployeePlanFormProps = {}) {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
+  const {
+    id,
+    employeePositionId: pathEmployeePositionId,
+    planId: pathPlanId,
+    serviceId: pathServiceId,
+  } = useParams<{
+    id: string;
+    employeePositionId?: string;
+    planId?: string;
+    serviceId?: string;
+  }>();
+
+  const [searchParams] = useSearchParams();
+  const urlParentId = searchParams.get("parentEmployeePlanId");
+  const urlEmployeePositionId = searchParams.get("employeePositionId");
+  const urlPlanId = searchParams.get("planId");
+  const urlServiceId = searchParams.get("serviceId");
+
+  const parentId = propParentId || urlParentId;
+  const employeePositionId = urlEmployeePositionId || pathEmployeePositionId;
+  const planId = urlPlanId || pathPlanId;
+  const serviceId = urlServiceId || pathServiceId;
+
+  const { user, selectedPositionId } = useAuth();
+  const localizedName = useLocalizedName();
+  const isEdit = !!id;
+
+  // Pick the employee record matching the globally-selected position, so a
+  // user with positions in multiple orgs uses the right org. Falls back to
+  // the first employee record when nothing is selected.
+  const organizationId = useMemo(() => {
+    const employees = user?.employee ?? [];
+    if (selectedPositionId) {
+      const match = employees.find((emp) =>
+        emp.positions?.some(
+          (p) =>
+            p.employeePositionId === selectedPositionId ||
+            p.id === selectedPositionId,
+        ),
+      );
+      if (match?.organizationId) return match.organizationId;
+    }
+    return employees[0]?.organizationId;
+  }, [user, selectedPositionId]);
+
+  const unitContext = useUnitContext();
+  const unitsQuery = unitContext?.getList(organizationId!, {
+    take: 300,
+    skip: 0,
+  });
+  const unitId = unitsQuery?.data?.data?.items?.[0]?.id ?? "";
+
+  const { data: positionsData } = usePositionsByUnit(unitId);
+  const { data: employeePlanDetail } = useEmployeePlan(id || "");
+  const { create: createMutation, update: updateMutation } =
+    useEmployeePlanMutations();
+  const { data: myPlans } = useMinePlan();
+  console.log("my plans ", myPlans);
+  //
+  const { data: employeePositionsData } = useEmployeePositions();
+  console.log("employee positoin ", employeePositionsData);
+
+  // Fetch services and parent employee plan details
+  const { data: servicesData } = useServices();
+  console.log("services ", servicesData);
+
+  // Fetch parent employee plan detail if parentId is present in URL
+  const { data: urlParentEmployeePlanDetail } = useEmployeePlan(parentId || "");
+
+  const normalizeTimeframe = (val: unknown): string => {
+    if (!val) return TimeFrame.YEAR;
+    const str = String(val).toLowerCase();
+    if (str.includes("year")) return TimeFrame.YEAR;
+    if (str.includes("quarter")) return TimeFrame.QUARTER;
+    if (str.includes("month")) return TimeFrame.MONTH;
+    if (str.includes("week")) return TimeFrame.WEEK;
+    if (str.includes("day")) return TimeFrame.DAY;
+    return TimeFrame.YEAR;
+  };
+
+  const initialEmployeePlanFormValues = useMemo(
+    () => ({
+      parentEmployeePlanId:
+        employeePlanDetail?.data?.parentEmployeePlanId || parentId || undefined,
+      employeePositionId:
+        employeePlanDetail?.data?.employeePositionId ||
+        employeePositionId ||
+        "",
+      planId: employeePlanDetail?.data?.planId || planId || "",
+      serviceId: employeePlanDetail?.data?.serviceId || serviceId || "",
+      planType: employeePlanDetail?.data?.planType || EmployeePlanType.NUMBER,
+      expectedQuantity: employeePlanDetail?.data?.expectedQuantity || 0,
+      week: employeePlanDetail?.data?.week?.toString() || "0",
+      month: employeePlanDetail?.data?.month?.toString() || "0",
+      quarter: employeePlanDetail?.data?.quarter?.toString() || "0",
+      timeframe: (() => {
+        const rawTimeframe = employeePlanDetail?.data?.timeframe;
+        if (rawTimeframe) return normalizeTimeframe(rawTimeframe);
+
+        // Fallback for sub-plan creation when parent data is missing but parentId is present
+        const parent = urlParentEmployeePlanDetail?.data;
+        if (!parentId || !parent) {
+          return parentId ? TimeFrame.QUARTER : TimeFrame.YEAR;
+        }
+
+        const pt = normalizeTimeframe(parent.timeframe);
+        if (pt === TimeFrame.YEAR) return TimeFrame.QUARTER;
+        if (pt === TimeFrame.QUARTER) return TimeFrame.QUARTER;
+        if (pt === TimeFrame.MONTH) return TimeFrame.WEEK;
+        if (pt === TimeFrame.WEEK) return TimeFrame.DAY;
+        return TimeFrame.YEAR;
+      })(),
+    }),
+    [
+      employeePlanDetail?.data,
+      parentId,
+      employeePositionId,
+      planId,
+      serviceId,
+      urlParentEmployeePlanDetail?.data,
+    ]
+  );
+
+  const form = useForm<EmployeePlanFormValues>({
+    defaultValues: initialEmployeePlanFormValues,
+    values: isEdit || !!parentId ? initialEmployeePlanFormValues : undefined,
+  });
+
+  const watchedPlanId = useWatch({
+    control: form.control,
+    name: "planId",
+  });
+  const { data: parentEmployeePlanDetail } = useEmployeePlanByPlanId(
+    watchedPlanId || ""
+  );
+
+  const positionOptions =
+    positionsData?.data?.items?.map(
+      (position: { id: string; title: string }) => ({
+        value: position.id,
+        label: position.title,
+        icon: User,
+      })
+    ) || [];
+
+  const employeePositionOptions =
+    employeePositionsData?.items?.flatMap((emp) =>
+      emp.employeePositions.map((empPos) => ({
+        value: empPos.id, // employeePositionId
+        label: `${emp.name.en} – ${empPos.position?.name?.am}`,
+        icon: User,
+      }))
+    ) || [];
+
+  // Mock data - replace with your actual data fetching
+  const planOptions =
+    myPlans?.data?.items?.map(
+      (plan: { id: string; name: { am: string; en: string } }) => ({
+        value: plan.id,
+        label: localizedName(plan.name),
+        icon: FileText,
+      })
+    ) || [];
+
+  const serviceOptions =
+    servicesData?.data?.items?.map(
+      (service: { id: string; name: { am: string; en: string } }) => ({
+        value: service.id,
+        label: localizedName(service.name),
+        icon: Users,
+      })
+    ) || [];
+
+  // Determine allowed timeframe options based on parent employee plan
+  const timeframeOptions = useMemo(() => {
+    // Current parent detail either from URL (parentId) or watched result
+    const parent =
+      urlParentEmployeePlanDetail?.data || parentEmployeePlanDetail?.data;
+
+    if (!parentId && !parent) {
+      return [
+        {
+          value: TimeFrame.YEAR,
+          label: t("employeePlans.yearly", "Yearly"),
+        },
+      ];
+    }
+
+    const parentTimeframe = normalizeTimeframe(parent?.timeframe);
+
+    switch (parentTimeframe) {
+      case TimeFrame.YEAR:
+        return [
+          {
+            value: TimeFrame.YEAR,
+            label: t("employeePlans.yearly", "Yearly"),
+          },
+          {
+            value: TimeFrame.QUARTER,
+            label: t("employeePlans.quarterly", "Quarterly"),
+          },
+        ];
+
+      case TimeFrame.QUARTER:
+        return [
+          {
+            value: TimeFrame.QUARTER,
+            label: t("employeePlans.quarterly", "Quarterly"),
+          },
+        ];
+
+      case TimeFrame.MONTH:
+        return [
+          {
+            value: TimeFrame.WEEK,
+            label: t("employeePlans.weekly", "Weekly"),
+          },
+        ];
+
+      case TimeFrame.WEEK:
+        return [
+          {
+            value: TimeFrame.DAY,
+            label: t("employeePlans.daily", "Daily"),
+          },
+        ];
+
+      default:
+        return [
+          {
+            value: TimeFrame.YEAR,
+            label: t("employeePlans.yearly", "Yearly"),
+          },
+        ];
+    }
+  }, [
+    parentId,
+    parentEmployeePlanDetail?.data,
+    urlParentEmployeePlanDetail?.data,
+    t,
+  ]);
+
+  // Auto-select timeframe if there's only one option
+  useEffect(() => {
+    if (timeframeOptions.length === 1) {
+      const currentVal = form.getValues("timeframe");
+      if (currentVal !== timeframeOptions[0].value) {
+        form.setValue("timeframe", timeframeOptions[0].value as string, {
+          shouldValidate: true,
+          shouldDirty: true,
+        });
+      }
+    }
+  }, [timeframeOptions, form]);
+
+  useEffect(() => {
+    const current = form.getValues("timeframe");
+
+    const isValid = timeframeOptions.some((opt) => opt.value === current);
+
+    if (!isValid && timeframeOptions.length > 0) {
+      form.setValue("timeframe", timeframeOptions[0].value, {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
+    }
+  }, [timeframeOptions, form]);
+
+  const planTypeOptions = Object.values(EmployeePlanType).map((type) => ({
+    value: type,
+    label: type.charAt(0).toUpperCase() + type.slice(1).toLowerCase(),
+  }));
+
+  // TODO: Fetch employee plans for parent selection
+  const employeePlanOptions =
+    parentEmployeePlanDetail?.data.items?.map(
+      (plan: { id: string; name: { am: string; en: string } }) => ({
+        value: plan.id,
+        label: localizedName(plan.name),
+        icon: FileText,
+      })
+    ) || [];
+
+  const watchedTimeframe = useWatch({
+    control: form.control,
+    name: "timeframe",
+  });
+
+  // Reset hidden fields when timeframe changes
+  useEffect(() => {
+    if (watchedTimeframe === TimeFrame.YEAR) {
+      form.setValue("quarter", "0");
+      form.setValue("month", "0");
+      form.setValue("week", "0");
+    } else if (watchedTimeframe === TimeFrame.QUARTER) {
+      form.setValue("month", "0");
+      form.setValue("week", "0");
+    } else if (watchedTimeframe === TimeFrame.MONTH) {
+      form.setValue("week", "0");
+    }
+    // For WEEK and DAY, no reset needed as they inherit from parent timeframes
+  }, [watchedTimeframe, form]);
+
+  // Inherit context from parent employee plan
+  useEffect(() => {
+    if (parentId && parentEmployeePlanDetail?.data && !isEdit) {
+      const parent = parentEmployeePlanDetail.data;
+
+      // Inherit timeframe context
+      switch (parent.timeframe) {
+        case TimeFrame.YEAR:
+          form.setValue("timeframe", TimeFrame.QUARTER);
+          break;
+        case TimeFrame.QUARTER:
+          form.setValue("timeframe", TimeFrame.QUARTER);
+          if (parent.quarter)
+            form.setValue("quarter", parent.quarter.toString());
+          break;
+        case TimeFrame.MONTH:
+          form.setValue("timeframe", TimeFrame.WEEK);
+          if (parent.quarter)
+            form.setValue("quarter", parent.quarter.toString());
+          if (parent.month) form.setValue("month", parent.month.toString());
+          break;
+        case TimeFrame.WEEK:
+          form.setValue("timeframe", TimeFrame.DAY);
+          if (parent.quarter)
+            form.setValue("quarter", parent.quarter.toString());
+          if (parent.month) form.setValue("month", parent.month.toString());
+          if (parent.week) form.setValue("week", parent.week.toString());
+          break;
+        default:
+          break;
+      }
+    }
+  }, [parentId, parentEmployeePlanDetail, isEdit, form]);
+
+  const handleSubmit = (values: EmployeePlanFormValues) => {
+    // Prepare timeframe-specific fields based on selected timeframe
+    const getTimeframeFields = (): {
+      quarter: number;
+      month: number;
+      week: number;
+    } => {
+      const fields = {
+        quarter: 0,
+        month: 0,
+        week: 0,
+      };
+
+      switch (values.timeframe) {
+        case TimeFrame.QUARTER:
+          fields.quarter = Number(values.quarter);
+          break;
+        case TimeFrame.MONTH:
+          fields.quarter = Number(values.quarter);
+          fields.month = Number(values.month);
+          break;
+        case TimeFrame.WEEK:
+          fields.quarter = Number(values.quarter);
+          fields.month = Number(values.month);
+          fields.week = Number(values.week);
+          break;
+        case TimeFrame.DAY:
+          fields.quarter = Number(values.quarter);
+          fields.month = Number(values.month);
+          fields.week = Number(values.week);
+          break;
+        // For YEAR, all fields remain 0
+      }
+
+      return fields;
+    };
+
+    const dto = {
+      id: isEdit ? id : undefined,
+      parentEmployeePlanId: values.parentEmployeePlanId,
+      employeePositionId: values.employeePositionId,
+      planId: values.planId,
+      serviceId: values.serviceId,
+      planType: values.planType,
+      expectedQuantity: Number(values.expectedQuantity),
+      timeframe: values.timeframe,
+      ...getTimeframeFields(),
+    };
+
+    const mutation = isEdit ? updateMutation : createMutation;
+
+    mutation.mutate(dto, {
+      onSuccess: () => {
+        toast.success(
+          isEdit
+            ? t(
+                "employeePlans.planUpdatedSuccess",
+                "Employee plan updated successfully!"
+              )
+            : t(
+                "employeePlans.planCreatedSuccess",
+                "Employee plan created successfully!"
+              ),
+          {
+            description: `${t("employeePlans.plan", "Employee plan")} ${
+              isEdit
+                ? t("common.updated", "updated")
+                : t("common.created", "created")
+            }.`,
+          }
+        );
+        onSuccess?.();
+        if (!isEdit) {
+          navigate(-1);
+        }
+      },
+      onError: (error: { message?: string }) => {
+        toast.error(
+          isEdit
+            ? t(
+                "employeePlans.planUpdateFailed",
+                "Failed to update employee plan"
+              )
+            : t(
+                "employeePlans.planCreateFailed",
+                "Failed to create employee plan"
+              ),
+          {
+            description:
+              error?.message ||
+              t("common.checkInput", "Please check your input and try again."),
+          }
+        );
+      },
+    });
+  };
+
+  // Define form fields
+  const employeePlanFormFields: FormField<EmployeePlanFormValues>[] = [
+    // Basic Assignment Section
+    {
+      name: "employeePositionId",
+      label: t("employeePlans.employeePosition", "Employee Position"),
+      type: "select",
+      options:
+        employeePositionOptions.length > 0
+          ? employeePositionOptions
+          : positionOptions,
+      required: true,
+      icon: User,
+      section: t("employeePlans.assignment", "Assignment"),
+      colSpan: 6,
+    },
+    {
+      name: "serviceId",
+      label: t("employeePlans.service", "Service"),
+      type: "select",
+      options: serviceOptions,
+      required: true,
+      icon: Users,
+      section: t("employeePlans.assignment", "Assignment"),
+      colSpan: 6,
+    },
+    {
+      name: "planId",
+      label: t("employeePlans.plan", "Plan"),
+      type: "select",
+      options: planOptions,
+      required: true,
+      icon: FileText,
+      section: t("employeePlans.assignment", "Assignment"),
+      colSpan: 6,
+    },
+    {
+      name: "parentEmployeePlanId",
+      label: t("employeePlans.parentEmployeePlan", "Parent Employee Plan"),
+      type: "select",
+      options: employeePlanOptions,
+      icon: FileText,
+      section: t("employeePlans.assignment", "Assignment"),
+      disabled: !!parentId,
+      colSpan: 6,
+      defaultValue: parentId || undefined,
+    },
+
+    // Plan Details Section
+    {
+      name: "planType",
+      label: t("employeePlans.planType", "Plan Type"),
+      type: "select",
+      options: planTypeOptions,
+      required: true,
+      icon: Target,
+      section: t("employeePlans.planDetails", "Plan Details"),
+      colSpan: 4,
+    },
+    {
+      name: "expectedQuantity",
+      label: t("employeePlans.expectedQuantity", "Expected Quantity"),
+      type: "number",
+      required: true,
+      icon: Target,
+      section: t("employeePlans.planDetails", "Plan Details"),
+      colSpan: 4,
+    },
+    {
+      name: "timeframe",
+      label: t("employeePlans.timeFrame", "Time Frame"),
+      type: "select",
+      options: timeframeOptions,
+      required: true,
+      disabled: timeframeOptions.length === 1,
+      icon: Calendar,
+      section: t("employeePlans.planDetails", "Plan Details"),
+      colSpan: 4,
+    },
+
+    // Timeframe Context Section
+    {
+      name: "quarter",
+      label: t("employeePlans.quarter", "Quarter"),
+      type: "number",
+      placeholder: t("employeePlans.enterQuarter", "Enter quarter (1-4)"),
+      icon: Calendar,
+      section: t("employeePlans.timeframeContext", "Timeframe Context"),
+      hidden:
+        watchedTimeframe === TimeFrame.YEAR &&
+        (!form.getValues("quarter") ||
+          String(form.getValues("quarter")) === "0"),
+      colSpan: 4,
+      min: 1,
+      max: 4,
+    },
+    {
+      name: "month",
+      label: t("employeePlans.month", "Month"),
+      type: "number",
+      placeholder: t("employeePlans.enterMonth", "Enter month (1-12)"),
+      icon: Calendar,
+      section: t("employeePlans.timeframeContext", "Timeframe Context"),
+      hidden:
+        ![TimeFrame.MONTH, TimeFrame.WEEK, TimeFrame.DAY].includes(
+          watchedTimeframe as TimeFrame
+        ) &&
+        (!form.getValues("month") || String(form.getValues("month")) === "0"),
+      colSpan: 4,
+      min: 1,
+      max: 12,
+    },
+    {
+      name: "week",
+      label: t("employeePlans.week", "Week"),
+      type: "number",
+      placeholder: t("employeePlans.enterWeek", "Enter week (1-52)"),
+      icon: Calendar,
+      section: t("employeePlans.timeframeContext", "Timeframe Context"),
+      hidden:
+        ![TimeFrame.WEEK, TimeFrame.DAY].includes(
+          watchedTimeframe as TimeFrame
+        ) &&
+        (!form.getValues("week") || String(form.getValues("week")) === "0"),
+      colSpan: 4,
+      min: 1,
+      max: 52,
+    },
+  ];
+
+  // Filter fields based on timeframe
+  const filteredFields = employeePlanFormFields.filter((field) => {
+    if (field.hidden) return false;
+    return true;
+  });
+
+  const handleCancel = () => {
+    navigate(-1);
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 p-4 sm:p-6">
+      <div className="max-w-4xl mx-auto">
+        {/* Header */}
+        <motion.div
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="flex items-center justify-between mb-8">
+          <div className="flex items-center space-x-4">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => navigate(-1)}
+              className="border-gray-300 text-gray-700 hover:bg-gray-50">
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Back
+            </Button>
+            <div>
+              <h1 className="text-3xl font-bold bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent">
+                {isEdit ? "Edit Employee Plan" : "Create Employee Plan"}
+              </h1>
+              <p className="text-gray-600 mt-1">
+                {isEdit
+                  ? "Update employee plan assignment and details"
+                  : "Assign a plan to an employee with specific targets"}
+              </p>
+            </div>
+          </div>
+
+          <div className="flex items-center space-x-2 bg-white/80 backdrop-blur-sm rounded-2xl px-4 py-2 shadow-sm border border-gray-200">
+            <div
+              className={`w-2 h-2 rounded-full ${
+                isEdit ? "bg-amber-500" : "bg-green-500"
+              } animate-pulse`}></div>
+            <span className="text-sm font-medium text-gray-700">
+              {isEdit ? "Editing Mode" : "Creation Mode"}
+            </span>
+          </div>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.1 }}>
+          <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-xl overflow-hidden">
+            <CardHeader className="bg-gradient-to-r from-blue-500 to-cyan-500 text-white pb-6">
+              <div className="flex items-center space-x-3">
+                <div className="w-12 h-12 bg-white/20 rounded-2xl flex items-center justify-center backdrop-blur-sm">
+                  {isEdit ? (
+                    <FileText className="h-6 w-6 text-white" />
+                  ) : (
+                    <Plus className="h-6 w-6 text-white" />
+                  )}
+                </div>
+                <div>
+                  <CardTitle className="text-2xl font-bold text-white">
+                    {isEdit
+                      ? t(
+                          "employeePlans.updateEmployeePlan",
+                          "Update Employee Plan"
+                        )
+                      : t(
+                          "employeePlans.newEmployeePlanAssignment",
+                          "New Employee Plan Assignment"
+                        )}
+                  </CardTitle>
+                  <CardDescription className="text-blue-100">
+                    {isEdit
+                      ? t(
+                          "employeePlans.modifyPlanDetails",
+                          "Modify the employee plan details below"
+                        )
+                      : t(
+                          "employeePlans.assignPlanWithTimeframe",
+                          "Assign plan to employee with specific timeframe and targets"
+                        )}
+                  </CardDescription>
+                </div>
+              </div>
+            </CardHeader>
+
+            <CardContent className="p-6">
+              {/* Parent Plan Info Alert */}
+              {parentId && parentEmployeePlanDetail?.data && (
+                <Alert className="mb-6 bg-blue-50/80 border-blue-200/50 backdrop-blur-sm">
+                  <Info className="h-4 w-4 text-blue-600" />
+                  <AlertTitle className="text-blue-900 font-semibold">
+                    {t(
+                      "employeePlans.creatingSubEmployeePlan",
+                      "Creating Sub-Employee Plan"
+                    )}
+                  </AlertTitle>
+                  <AlertDescription className="text-blue-700">
+                    {t(
+                      "employeePlans.subPlanUnder",
+                      "This employee plan will be created under"
+                    )}
+                    :{" "}
+                    <strong className="text-blue-900">
+                      {parentEmployeePlanDetail.data.name ||
+                        t("employeePlans.parentPlan", "Parent Plan")}
+                    </strong>
+                  </AlertDescription>
+                </Alert>
+              )}
+
+              <GenericForm
+                form={form}
+                fields={filteredFields}
+                onSubmit={handleSubmit}
+                onCancel={handleCancel}
+                isSubmitting={
+                  createMutation.isPending || updateMutation.isPending
+                }
+                submitButtonText={
+                  isEdit
+                    ? t(
+                        "employeePlans.updateEmployeePlan",
+                        "Update Employee Plan"
+                      )
+                    : t(
+                        "employeePlans.createEmployeePlan",
+                        "Create Employee Plan"
+                      )
+                }
+                cancelButtonText={t("employeePlans.cancel", "Cancel")}
+                successMessage={
+                  isEdit
+                    ? t(
+                        "employeePlans.planUpdatedSuccess",
+                        "Employee plan updated successfully!"
+                      )
+                    : t(
+                        "employeePlans.planCreatedSuccess",
+                        "Employee plan created successfully!"
+                      )
+                }
+                errorMessage={
+                  isEdit
+                    ? t(
+                        "employeePlans.planUpdateFailed",
+                        "Failed to update employee plan"
+                      )
+                    : t(
+                        "employeePlans.planCreateFailed",
+                        "Failed to create employee plan"
+                      )
+                }
+              />
+            </CardContent>
+          </Card>
+        </motion.div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/EmployeePlan/EditEmployeePlanPage.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/EmployeePlan/EditEmployeePlanPage.tsx
new file mode 100644
index 000000000..de8548927
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/EmployeePlan/EditEmployeePlanPage.tsx
@@ -0,0 +1,317 @@
+import { useState, useEffect } from "react";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import { Label } from "@/shared/common/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { Loader2, ArrowLeft } from "lucide-react";
+import { useToast } from "@/shared/common/ui/use-toast";
+import { useTranslation } from "react-i18next";
+import { useNavigate, useParams } from "react-router-dom";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import {
+  updateEmployeePlan,
+  getEmployeePlan,
+  getPlansByUnit,
+} from "@/performance-management/services/api/employeePlanService";
+
+const EditEmployeePlanPage = () => {
+  const { id } = useParams<{ id: string }>();
+  const { toast } = useToast();
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [isSaving, setIsSaving] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isLoadingPlans, setIsLoadingPlans] = useState(false);
+
+  const [plans, setPlans] = useState<any[]>([]);
+
+  const [formData, setFormData] = useState({
+    planId: "",
+    employeePositionId: "",
+    serviceId: "",
+    timeframe: "",
+
+    expectedQuantity: 0,
+    planType: "number" as "number" | "percent",
+  });
+
+  // Fetch employee plan data when component mounts
+  useEffect(() => {
+    if (id) {
+      fetchEmployeePlan(id);
+      fetchPlans();
+    }
+  }, [id]);
+
+  const fetchEmployeePlan = async (planId: string) => {
+    setIsLoading(true);
+    try {
+      const response = await getEmployeePlan(planId);
+      const plan = response.data;
+
+      // Convert ISO dates to YYYY-MM-DD format for input fields
+
+      setFormData({
+        planId: plan.planId || "",
+        employeePositionId: plan.employeePositionId || "",
+        serviceId: plan.serviceId || "",
+        timeframe: plan.timeframe || "",
+        expectedQuantity: plan.expectedQuantity || 0,
+        planType: plan.planType || "number",
+      });
+    } catch (error) {
+      console.error("Failed to fetch employee plan:", error);
+      toast({
+        title: "Error",
+        description: "Failed to fetch employee plan data",
+        variant: "destructive",
+      });
+      navigate("/performance-management/employee-plans");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const fetchPlans = async () => {
+    setIsLoadingPlans(true);
+    try {
+      const response = await getPlansByUnit("");
+      const plansData = response.data?.items || [];
+      setPlans(Array.isArray(plansData) ? plansData : []);
+    } catch (error) {
+      console.error("Failed to fetch plans:", error);
+      toast({
+        title: "Error",
+        description: "Failed to fetch plans",
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoadingPlans(false);
+    }
+  };
+
+  const handleChange = (field: string, value: any) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!id) {
+      toast({
+        title: "Error",
+        description: "Employee plan ID is missing",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      await updateEmployeePlan(id, {
+        parentEmployeePlanId: formData.planId,
+        employeePositionId: formData.employeePositionId,
+        planId: formData.planId,
+        serviceId: formData.serviceId,
+        planType: formData.planType,
+        expectedQuantity: Number(formData.expectedQuantity),
+        timeframe: formData.timeframe,
+      });
+
+      toast({
+        title: "Success",
+        description: "Employee plan updated successfully",
+        variant: "default",
+      });
+
+      // Navigate back to list
+      navigate("/performance-management/employee-plans");
+    } catch (error: any) {
+      console.error("Failed to update employee plan:", error);
+      const errorMessage =
+        error.response?.data?.message ||
+        error.message ||
+        "Failed to update employee plan";
+      toast({
+        title: "Error",
+        description: errorMessage,
+        variant: "destructive",
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="p-6 flex items-center justify-center min-h-screen">
+        <Loader2 className="h-8 w-8 animate-spin text-purple-600" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 max-w-4xl mx-auto">
+      <div className="mb-6">
+        <Button
+          variant="ghost"
+          onClick={() => navigate("/performance-management/employee-plans")}
+          className="mb-4"
+        >
+          <ArrowLeft className="h-4 w-4 mr-2" />
+          {t("common.back", "Back")}
+        </Button>
+        <h1 className="text-2xl font-bold text-gray-900">
+          {t("employeePlans.editPlan", "Edit Employee Plan")}
+        </h1>
+        <p className="text-gray-600 mt-1">
+          {t(
+            "employeePlans.editDescription",
+            "Update the details of this employee performance plan"
+          )}
+        </p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            {t("employeePlans.planDetails", "Plan Details")}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-6">
+            {/* Plan Selection */}
+            <div className="space-y-2">
+              <Label htmlFor="planId">
+                {t("employeePlans.plan", "Plan")}
+                <span className="text-red-500">*</span>
+              </Label>
+              {isLoadingPlans ? (
+                <div className="flex items-center gap-2 text-gray-500">
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                  {t("loading", "Loading plans...")}
+                </div>
+              ) : plans.length > 0 ? (
+                <Select
+                  value={formData.planId}
+                  onValueChange={(value) => handleChange("planId", value)}
+                  required
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a plan" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {plans.map((plan: any) => (
+                      <SelectItem key={plan.id} value={plan.id}>
+                        {typeof plan.name === "string"
+                          ? plan.name
+                          : plan.name?.en || plan.name?.am || plan.id}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              ) : (
+                <p className="text-sm text-gray-500">
+                  {t("employeePlans.noPlans", "No plans available")}
+                </p>
+              )}
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {/* Start Date */}
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {/* Expected Quantity */}
+              <div className="space-y-2">
+                <Label htmlFor="expectedQuantity">
+                  {t("employeePlans.expectedQuantity", "Expected Quantity")}
+                </Label>
+                <Input
+                  id="expectedQuantity"
+                  type="number"
+                  min="0"
+                  step="0.01"
+                  value={formData.expectedQuantity}
+                  onChange={(e) =>
+                    handleChange(
+                      "expectedQuantity",
+                      parseFloat(e.target.value) || 0
+                    )
+                  }
+                  placeholder="Enter expected quantity"
+                />
+              </div>
+
+              {/* Plan Type */}
+              <div className="space-y-2">
+                <Label htmlFor="planType">
+                  {t("employeePlans.planType", "Plan Type")}
+                </Label>
+                <Select
+                  value={formData.planType}
+                  onValueChange={(value) => handleChange("planType", value)}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select plan type" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="number">
+                      {t("employeePlans.number", "Number")}
+                    </SelectItem>
+                    <SelectItem value="percent">
+                      {t("employeePlans.percentage", "Percent")}
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+
+            <div className="flex justify-end gap-3 pt-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() =>
+                  navigate("/performance-management/employee-plans")
+                }
+                disabled={isSaving}
+              >
+                {t("common.cancel", "Cancel")}
+              </Button>
+              <Button
+                type="submit"
+                disabled={isSaving}
+                className="bg-purple-600 hover:bg-purple-700"
+              >
+                {isSaving ? (
+                  <>
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    {t("saving", "Saving...")}
+                  </>
+                ) : (
+                  t("employeePlans.update", "Update Plan")
+                )}
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default EditEmployeePlanPage;
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/EmployeePlan/EmployeePlanAssignmentPage.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/EmployeePlan/EmployeePlanAssignmentPage.tsx
new file mode 100644
index 000000000..5340b57b2
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/EmployeePlan/EmployeePlanAssignmentPage.tsx
@@ -0,0 +1,1872 @@
+import { useState, useEffect, useRef, useMemo } from "react";
+import { Button } from "@/shared/common/ui/button";
+import {
+  PlusIcon,
+  Pencil,
+  Trash2,
+  Loader2,
+  Calendar,
+  Target,
+  BarChart3,
+  Clock,
+  Hash,
+  Percent,
+  Users,
+  CheckCircle,
+  TrendingUp,
+  Download,
+  Filter,
+  Search,
+  ChevronDown,
+  Eye,
+  Edit2,
+  ArrowLeft,
+  FileText,
+  Layers,
+  Package,
+  UserCheck,
+  MoreHorizontal,
+  Save,
+  X,
+  Check,
+  Clock4,
+  CalendarDays,
+} from "lucide-react";
+import { t } from "i18next";
+import {
+  useNavigate,
+  useParams,
+  useLocation,
+  useSearchParams,
+} from "react-router-dom";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/common/ui/table";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import { useToast } from "@/shared/common/ui/use-toast";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { format } from "date-fns";
+import { Badge } from "@/shared/common/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { Input } from "@/shared/common/ui/input";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/shared/common/ui/dialog";
+import { Label } from "@/shared/common/ui/label";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/shared/common/ui/tabs";
+import { ScrollArea } from "@/shared/common/ui/scroll-area";
+import {
+  useEmployeePlanByPlanId,
+  ExtendedEmployeePlanDto,
+  EMPLOYEE_PLAN_KEYS,
+} from "@/performance-management/hooks/useEmployeePlan";
+import { useEmployeePlanMutations } from "@/performance-management/hooks/useEmployeePlan";
+import { cn } from "@/shared/lib/utils";
+import { usePlan } from "@/performance-management/hooks/usePlans";
+import { useQueryClient } from "@tanstack/react-query";
+import {
+  calculateAvailableMonths,
+  filterMonthsByEmployeePlans,
+  monthsConfig,
+} from "@/performance-management/utils/ethiopianMonthCalculator";
+import { MyTeamPanel } from "./MyTeamPanel";
+
+interface MonthData {
+  employeePlanId: string | null;
+  planned: number;
+}
+// Interface based on the API response structure
+interface ApiEmployeeAssignment {
+  employeePosition_created_at: string;
+  employeePosition_updated_at: string;
+  employeePosition_id: string;
+  employeePosition_is_delegate: boolean;
+  employeePosition_is_current: boolean;
+  employeePosition_start_date: string;
+  employeePosition_amharic_start_date: string;
+  employeePosition_end_date: string | null;
+  employeePosition_amharic_end_date: string | null;
+  employeePosition_unit_id: string;
+  employeePosition_delegator_id: string | null;
+  employeePosition_employee_id: string;
+  employeePosition_position_id: string;
+  employeePosition_delegation_letter_id: string | null;
+  employee_created_at: string;
+  employee_updated_at: string;
+  employee_id: string;
+  employee_is_current: boolean;
+  employee_status: string;
+  employee_name: {
+    am: string;
+    en: string;
+  };
+  employee_organization_id: string;
+  employee_unit_id: string;
+  employee_user_id: string;
+  service_created_at: string | null;
+  service_updated_at: string | null;
+  service_amharic_created_at: string | null;
+  service_amharic_updated_at: string | null;
+  service_id: string | null;
+  service_slug: string | null;
+  service_prefix: string | null;
+  service_name: { am: string; en: string } | null;
+  service_description: { am: string; en: string } | null;
+  service_estimatedTime: number | null;
+  service_estimatedTimeUnit: string | null;
+  service_organization_id: string | null;
+  service_service_category_id: string | null;
+  no_of_employee_plans: string;
+  total_quantity: number | null;
+  planned_jul: string;
+  planned_aug: string;
+  planned_sep: string;
+  planned_oct: string;
+  planned_nov: string;
+  planned_dec: string;
+  planned_jan: string;
+  planned_feb: string;
+  planned_mar: string;
+  planned_apr: string;
+  planned_may: string;
+  planned_jun: string;
+  months: {
+    jul: MonthData;
+    aug: MonthData;
+    sep: MonthData;
+    oct: MonthData;
+    nov: MonthData;
+    dec: MonthData;
+    jan: MonthData;
+    feb: MonthData;
+    mar: MonthData;
+    apr: MonthData;
+    may: MonthData;
+    jun: MonthData;
+  };
+}
+
+interface ProcessedEmployeeAssignment {
+  id: string;
+  employeeId: string;
+  employeeName: {
+    am: string;
+    en: string;
+  };
+  positionId: string;
+  employeePositionId: string;
+  employeeStatus: string;
+  service: {
+    serviceId: string | null;
+    serviceName: { am: string; en: string } | null;
+    serviceDescription?: { am: string; en: string } | null;
+    estimatedTime?: number | null;
+    estimatedTimeUnit?: string | null;
+  };
+  monthlyPlans: {
+    jul: MonthData;
+    aug: MonthData;
+    sep: MonthData;
+    oct: MonthData;
+    nov: MonthData;
+    dec: MonthData;
+    jan: MonthData;
+    feb: MonthData;
+    mar: MonthData;
+    apr: MonthData;
+    may: MonthData;
+    jun: MonthData;
+  };
+  totalPlanned: number;
+  hasEmployeePlan: boolean;
+}
+
+interface EditingCell {
+  employeePositionId: string;
+  monthKey: string;
+  value: string;
+}
+
+interface BulkEditState {
+  employeePositionId: string;
+  isEditing: boolean;
+  monthlyInputs: {
+    [key: string]: number;
+  };
+}
+
+interface MonthlyData {
+  month: string;
+  monthAbbr: string;
+  planned: number;
+  executed: number;
+  variance: number;
+  completionRate: number;
+}
+
+export const EmployeePlanAssignmentsPage = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { yearId, planId } = useParams();
+  const { data: planData } = usePlan(planId as string);
+  const { toast } = useToast();
+  const localizedName = useLocalizedName();
+  const { create, update } = useEmployeePlanMutations();
+
+  // Get plan months from URL query parameters
+  const [searchParams] = useSearchParams();
+  const monthsParam = searchParams.get("months");
+  const planMonthsFromState = useMemo(() => {
+    if (monthsParam) {
+      // Parse comma-separated months or single month
+      return monthsParam
+        .split(",")
+        .map((m) => parseInt(m))
+        .filter((m) => !isNaN(m));
+    }
+    return [];
+  }, [monthsParam]);
+
+  // Also get navigation state as fallback
+  const navigationState = useMemo(
+    () => location.state as any,
+    [location.state],
+  );
+
+  const [assignments, setAssignments] = useState<ProcessedEmployeeAssignment[]>(
+    [],
+  );
+  const [selectedService, setSelectedService] = useState<string>("all");
+  const [searchTerm, setSearchTerm] = useState("");
+  const [statusFilter, setStatusFilter] = useState<string>("all");
+  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());
+  const [editingCell, setEditingCell] = useState<EditingCell | null>(null);
+  const [bulkEditStates, setBulkEditStates] = useState<{
+    [key: string]: BulkEditState; // keyed by employeePositionId
+  }>({});
+  const [selectedPlanType, setSelectedPlanType] = useState<
+    "number" | "percent"
+  >("percent");
+  const [selectedTimeframe, setSelectedTimeframe] = useState<
+    "yearly" | "quarterly" | "monthly" | "weekly" | "daily"
+  >("monthly");
+  const [dynamicMonthsConfig, setDynamicMonthsConfig] =
+    useState<typeof monthsConfig>(monthsConfig);
+  const queryClient = useQueryClient();
+  // Fetch actual data from API
+  const {
+    data: assignmentsResponse,
+    isLoading,
+    error,
+    refetch,
+  } = useEmployeePlanByPlanId(planId as string);
+
+  // Handle navigation to weekly view when timeframe is changed to weekly
+  useEffect(() => {
+    if (selectedTimeframe === "weekly") {
+      // Get the first month from planMonthsFromState or dynamicMonthsConfig
+      let monthToUse: number | undefined;
+
+      if (planMonthsFromState && planMonthsFromState.length > 0) {
+        monthToUse = planMonthsFromState[0];
+      } else if (dynamicMonthsConfig && dynamicMonthsConfig.length > 0) {
+        monthToUse = dynamicMonthsConfig[0].value;
+      }
+
+      if (monthToUse) {
+        console.log("Navigating to weekly view for month:", monthToUse);
+        navigate(
+          `/performance-management/${yearId}/employee-plans/plans/${planId}/${monthToUse}/weekly`,
+          {
+            state: navigationState,
+          },
+        );
+      }
+    }
+  }, [
+    selectedTimeframe,
+    planMonthsFromState,
+    dynamicMonthsConfig,
+    planId,
+    yearId,
+    navigate,
+    navigationState,
+  ]);
+
+  // Calculate available months — the plan's own date range is the source of
+  // truth (a Q4 plan must show only Apr/May/Jun, etc.). The ?months= URL
+  // param and the assignments payload are only used as fallbacks when the
+  // plan data hasn't loaded yet.
+  useEffect(() => {
+    const startDate =
+      planData?.data?.amharicStartDate || planData?.data?.startDate;
+    const endDate =
+      planData?.data?.amharicEndDate || planData?.data?.endDate;
+
+    if (startDate && endDate) {
+      const filteredMonths = calculateAvailableMonths(
+        startDate,
+        endDate,
+        monthsConfig,
+      );
+      setDynamicMonthsConfig(
+        filteredMonths.length > 0 ? filteredMonths : monthsConfig,
+      );
+      return;
+    }
+
+    if (planMonthsFromState && planMonthsFromState.length > 0) {
+      setDynamicMonthsConfig(
+        filterMonthsByEmployeePlans(monthsConfig, planMonthsFromState),
+      );
+      return;
+    }
+
+    setDynamicMonthsConfig(monthsConfig);
+  }, [
+    planData?.data?.amharicStartDate,
+    planData?.data?.amharicEndDate,
+    planData?.data?.startDate,
+    planData?.data?.endDate,
+    planMonthsFromState,
+  ]);
+
+  // First, let's debug what data you're getting
+  useEffect(() => {
+    if (assignmentsResponse?.data?.items) {
+      console.log("========== API RESPONSE DEBUG ==========");
+      console.log(
+        "Raw API response items count:",
+        assignmentsResponse.data.items.length,
+      );
+      console.log(
+        "Raw API response:",
+        JSON.stringify(assignmentsResponse.data.items, null, 2),
+      );
+
+      const processed = processApiData(assignmentsResponse.data.items);
+
+      console.log("========== PROCESSED DATA DEBUG ==========");
+      console.log("Processed assignments count:", processed.length);
+      processed.forEach((assignment, index) => {
+        console.log(`\n--- Assignment ${index + 1} ---`);
+        console.log("Composite ID:", assignment.employeePositionId);
+        console.log("Service ID:", assignment.service.serviceId);
+        console.log("Service Name:", assignment.service.serviceName);
+        console.log("Sep planned:", assignment.monthlyPlans.sep?.planned);
+        console.log("Nov planned:", assignment.monthlyPlans.nov?.planned);
+        console.log("Dec planned:", assignment.monthlyPlans.dec?.planned);
+      });
+
+      setAssignments(processed);
+    }
+  }, [assignmentsResponse]);
+
+  // Also add this to see what's being displayed
+  useEffect(() => {
+    console.log("Current assignments state:", assignments);
+  }, [assignments]);
+
+  // Process API response data
+  const processApiData = (
+    apiData: ApiEmployeeAssignment[],
+  ): ProcessedEmployeeAssignment[] => {
+    return apiData.map((item) => {
+      const monthlyPlans = {
+        jul: item.months.jul,
+        aug: item.months.aug,
+        sep: item.months.sep,
+        oct: item.months.oct,
+        nov: item.months.nov,
+        dec: item.months.dec,
+        jan: item.months.jan,
+        feb: item.months.feb,
+        mar: item.months.mar,
+        apr: item.months.apr,
+        may: item.months.may,
+        jun: item.months.jun,
+      };
+
+      const totalPlanned = Object.values(monthlyPlans).reduce(
+        (sum, plan) => sum + plan.planned,
+        0,
+      );
+      const hasEmployeePlan =
+        parseInt(item.no_of_employee_plans) > 0 ||
+        Object.values(monthlyPlans).some(
+          (plan) => plan.employeePlanId !== null,
+        );
+
+      // Create composite key: employeePositionId + serviceId
+      // This is necessary because the API returns the same employeePosition_id
+      // for different services (one employee can have multiple services)
+      const compositeId = `${item.employeePosition_id}_${
+        item.service_id || "no-service"
+      }`;
+
+      return {
+        id: compositeId,
+        employeeId: item.employee_id,
+        employeeName: item.employee_name,
+        positionId: item.employeePosition_position_id,
+        employeePositionId: compositeId, // Use composite ID as unique identifier
+        employeeStatus: item.employee_status,
+        service: {
+          serviceId: item.service_id,
+          serviceName: item.service_name,
+          serviceDescription: item.service_description,
+          estimatedTime: item.service_estimatedTime,
+          estimatedTimeUnit: item.service_estimatedTimeUnit,
+        },
+        monthlyPlans,
+        totalPlanned,
+        hasEmployeePlan,
+      };
+    });
+  };
+
+  // Calculate monthly data for display - FIXED VERSION
+  const calculateEmployeeMonthlyData = (
+    assignment: ProcessedEmployeeAssignment,
+  ): MonthlyData[] => {
+    return dynamicMonthsConfig.map((monthConfig) => {
+      const monthPlan =
+        assignment.monthlyPlans[
+          monthConfig.key as keyof typeof assignment.monthlyPlans
+        ];
+
+      const planned = monthPlan?.planned || 0;
+      const executed = 0; // You would get this from actuals API
+      const variance = executed - planned;
+      const completionRate =
+        planned > 0 ? Math.min(100, (executed / planned) * 100) : 0;
+
+      return {
+        month: monthConfig.name,
+        monthAbbr: monthConfig.abbr,
+        planned,
+        executed,
+        variance,
+        completionRate,
+      };
+    });
+  };
+  // Get all unique services for filtering
+  const allServices = Array.from(
+    new Set(
+      assignments
+        .map((assignment) => assignment.service.serviceId)
+        .filter((id) => id),
+    ),
+  );
+
+  // Toggle row expansion
+  const toggleRowExpansion = (employeePositionId: string) => {
+    const newExpanded = new Set(expandedRows);
+    if (newExpanded.has(employeePositionId)) {
+      newExpanded.delete(employeePositionId);
+    } else {
+      newExpanded.add(employeePositionId);
+    }
+    setExpandedRows(newExpanded);
+  };
+
+  // Filter assignments
+  const filteredAssignments = assignments.filter((assignment) => {
+    const matchesSearch =
+      localizedName(assignment.employeeName)
+        .toLowerCase()
+        .includes(searchTerm.toLowerCase()) ||
+      (assignment.service.serviceName
+        ? localizedName(assignment.service.serviceName || undefined)
+            .toLowerCase()
+            .includes(searchTerm.toLowerCase())
+        : false);
+
+    const matchesService =
+      selectedService === "all" ||
+      assignment.service.serviceId === selectedService;
+
+    const matchesStatus =
+      statusFilter === "all" || assignment.employeeStatus === statusFilter;
+
+    return matchesSearch && matchesService && matchesStatus;
+  });
+
+  // Helper function to extract actual employeePositionId from composite key
+  // Composite key format: "employeePositionId_serviceId"
+  const getActualPositionId = (compositeId: string): string => {
+    return compositeId.split("_")[0];
+  };
+
+  // Start editing a single cell
+  const startCellEdit = (
+    employeePositionId: string,
+    monthKey: string,
+    currentValue: number,
+  ) => {
+    const monthConfig = dynamicMonthsConfig.find((m) => m.key === monthKey);
+    console.log(`Editing ${monthConfig?.name} (value: ${monthConfig?.value})`);
+
+    setEditingCell({
+      employeePositionId,
+      monthKey,
+      value: currentValue.toString(),
+    });
+  };
+
+  // Save single cell edit
+  const saveCellEdit = async () => {
+    if (!editingCell || !planId) return;
+
+    const assignment = assignments.find(
+      (a) => a.employeePositionId === editingCell.employeePositionId,
+    );
+    if (!assignment) return;
+
+    const newValue = parseInt(editingCell.value) || 0;
+    const monthConfig = dynamicMonthsConfig.find(
+      (m) => m.key === editingCell.monthKey,
+    );
+    const monthValue = monthConfig?.value || 0;
+
+    console.log("========== SAVE CELL EDIT DEBUG ==========");
+    console.log("Month Key:", editingCell.monthKey);
+    console.log("Month Config:", monthConfig);
+    console.log("Month Value (API):", monthValue);
+    console.log("New Planned Value:", newValue);
+
+    // Store previous value for rollback
+    const previousValue =
+      assignment.monthlyPlans[
+        editingCell.monthKey as keyof typeof assignment.monthlyPlans
+      ]?.planned || 0;
+
+    // OPTIMISTIC UPDATE: Update local state immediately
+    setAssignments((prev) =>
+      prev.map((a) => {
+        if (a.employeePositionId === editingCell.employeePositionId) {
+          const updatedMonthlyPlans = {
+            ...a.monthlyPlans,
+            [editingCell.monthKey]: {
+              ...a.monthlyPlans[
+                editingCell.monthKey as keyof typeof a.monthlyPlans
+              ],
+              planned: newValue,
+            },
+          };
+
+          // Recalculate total
+          const totalPlanned = Object.values(updatedMonthlyPlans).reduce(
+            (sum, plan) => sum + plan.planned,
+            0,
+          );
+
+          return {
+            ...a,
+            monthlyPlans: updatedMonthlyPlans,
+            totalPlanned,
+          };
+        }
+        return a;
+      }),
+    );
+
+    // Close edit mode immediately for instant feedback
+    setEditingCell(null);
+
+    try {
+      // Get the current monthly plan for this month
+      const currentMonthlyPlan =
+        assignment.monthlyPlans[
+          editingCell.monthKey as keyof typeof assignment.monthlyPlans
+        ];
+
+      const employeePlanId = currentMonthlyPlan?.employeePlanId;
+
+      console.log("Employee Plan ID:", employeePlanId);
+      console.log("Current Monthly Plan:", currentMonthlyPlan);
+
+      // Extract the actual employeePositionId from composite key
+      const actualPositionId = getActualPositionId(
+        assignment.employeePositionId,
+      );
+
+      console.log("========== SAVE CELL EDIT DEBUG ==========");
+      console.log("Composite ID:", assignment.employeePositionId);
+      console.log("Actual Position ID:", actualPositionId);
+      console.log("Service ID:", assignment.service.serviceId);
+      console.log("Service Name:", assignment.service.serviceName);
+      console.log("Month Key:", editingCell.monthKey);
+      console.log("Month Value (API):", monthValue);
+      console.log("New Planned Value:", newValue);
+      console.log("Employee Plan ID:", employeePlanId);
+      console.log("Current Monthly Plan:", currentMonthlyPlan);
+
+      // Create employee plan data
+      const employeePlanData: ExtendedEmployeePlanDto = {
+        employeePositionId: actualPositionId,
+        planId: planId,
+        serviceId: assignment.service.serviceId || undefined,
+        planType: selectedPlanType === "percent" ? "percent" : "number",
+        expectedQuantity: newValue,
+        month: monthValue,
+        timeframe: selectedTimeframe,
+      };
+
+      console.log(
+        "API Request Data:",
+        JSON.stringify(employeePlanData, null, 2),
+      );
+
+      // DECISION: CREATE or UPDATE based on whether we have an employeePlanId
+      if (employeePlanId && newValue > 0) {
+        // UPDATE existing plan (PUT)
+        console.log("ACTION: UPDATE existing plan");
+        const result = await update.mutateAsync({
+          ...employeePlanData,
+          id: employeePlanId,
+        });
+        console.log("UPDATE Response:", result);
+      } else if (!employeePlanId && newValue > 0) {
+        // CREATE new plan (POST)
+        console.log("ACTION: CREATE new plan");
+        const result = await create.mutateAsync(employeePlanData);
+        console.log("CREATE Response:", result);
+      } else if (employeePlanId && newValue === 0) {
+        // UPDATE existing plan to 0 (PUT)
+        console.log("ACTION: UPDATE to 0");
+        const result = await update.mutateAsync({
+          ...employeePlanData,
+          id: employeePlanId,
+        });
+        console.log("UPDATE to 0 Response:", result);
+      }
+      // else: no plan ID and newValue === 0 → Do nothing
+
+      console.log("Invalidating queries...");
+
+      // Invalidate the query cache (refetch will happen automatically in background)
+      queryClient.invalidateQueries({
+        queryKey: EMPLOYEE_PLAN_KEYS.planId(planId),
+      });
+
+      console.log("Query invalidated successfully");
+
+      toast({
+        title: t("common.success", "Success"),
+        description: t("employeePlans.planAssignments.monthlyTargetUpdated", {
+          month: monthConfig?.name,
+        }).replace("{month}", monthConfig?.name || ""),
+        variant: "default",
+      });
+    } catch (error) {
+      console.error("========== ERROR ==========");
+      console.error("Failed to update monthly target:", error);
+      console.error("Error details:", error);
+
+      // ROLLBACK: Revert the optimistic update
+      setAssignments((prev) =>
+        prev.map((a) => {
+          if (a.employeePositionId === editingCell.employeePositionId) {
+            const revertedMonthlyPlans = {
+              ...a.monthlyPlans,
+              [editingCell.monthKey]: {
+                ...a.monthlyPlans[
+                  editingCell.monthKey as keyof typeof a.monthlyPlans
+                ],
+                planned: previousValue,
+              },
+            };
+
+            const totalPlanned = Object.values(revertedMonthlyPlans).reduce(
+              (sum, plan) => sum + plan.planned,
+              0,
+            );
+
+            return {
+              ...a,
+              monthlyPlans: revertedMonthlyPlans,
+              totalPlanned,
+            };
+          }
+          return a;
+        }),
+      );
+
+      toast({
+        title: t("common.error", "Error"),
+        description: t("employeePlans.planAssignments.failedToUpdateTarget"),
+        variant: "destructive",
+      });
+    }
+  };
+  // Start bulk edit for an employee
+  const startBulkEdit = (assignment: ProcessedEmployeeAssignment) => {
+    const monthlyInputs: { [key: string]: number } = {};
+
+    // Convert monthlyPlans to inputs
+    dynamicMonthsConfig.forEach((monthConfig) => {
+      const monthKey = monthConfig.key;
+      const monthlyPlan =
+        assignment.monthlyPlans[
+          monthKey as keyof typeof assignment.monthlyPlans
+        ];
+      monthlyInputs[monthKey] = monthlyPlan?.planned || 0;
+    });
+
+    setBulkEditStates((prev) => ({
+      ...prev,
+      [assignment.employeePositionId]: {
+        employeePositionId: assignment.employeePositionId,
+        isEditing: true,
+        monthlyInputs,
+      },
+    }));
+  };
+
+  // Update bulk edit input
+  const updateBulkEditInput = (
+    employeePositionId: string,
+    monthKey: string,
+    value: string,
+  ) => {
+    setBulkEditStates((prev) => {
+      // Check if the employeePositionId exists in the state
+      if (!prev[employeePositionId]) {
+        console.error(
+          `Employee Position ID ${employeePositionId} not found in bulk edit states`,
+        );
+        return prev;
+      }
+
+      return {
+        ...prev,
+        [employeePositionId]: {
+          ...prev[employeePositionId],
+          monthlyInputs: {
+            ...prev[employeePositionId].monthlyInputs,
+            [monthKey]: parseInt(value) || 0,
+          },
+        },
+      };
+    });
+  };
+
+  // Save bulk edit
+  const saveBulkEdit = async (employeePositionId: string) => {
+    const bulkEditState = bulkEditStates[employeePositionId];
+    if (!bulkEditState || !planId) return;
+
+    const assignment = assignments.find(
+      (a) => a.employeePositionId === employeePositionId,
+    );
+    if (!assignment) return;
+
+    // Store previous values for rollback
+    const previousMonthlyPlans = { ...assignment.monthlyPlans };
+
+    // OPTIMISTIC UPDATE: Update local state immediately
+    setAssignments((prev) =>
+      prev.map((a) => {
+        if (a.employeePositionId === employeePositionId) {
+          const updatedMonthlyPlans = { ...a.monthlyPlans };
+
+          dynamicMonthsConfig.forEach((monthConfig) => {
+            const monthKey = monthConfig.key;
+            const newValue = bulkEditState.monthlyInputs[monthKey] || 0;
+
+            updatedMonthlyPlans[monthKey as keyof typeof a.monthlyPlans] = {
+              ...updatedMonthlyPlans[monthKey as keyof typeof a.monthlyPlans],
+              planned: newValue,
+            };
+          });
+
+          // Recalculate total
+          const totalPlanned = Object.values(updatedMonthlyPlans).reduce(
+            (sum, plan) => sum + plan.planned,
+            0,
+          );
+
+          return {
+            ...a,
+            monthlyPlans: updatedMonthlyPlans,
+            totalPlanned,
+          };
+        }
+        return a;
+      }),
+    );
+
+    // Exit edit mode immediately for instant feedback
+    setBulkEditStates((prev) => ({
+      ...prev,
+      [employeePositionId]: { ...prev[employeePositionId], isEditing: false },
+    }));
+
+    try {
+      // Process each month separately
+      const promises = dynamicMonthsConfig.map(async (monthConfig) => {
+        const monthKey = monthConfig.key;
+        const newValue = bulkEditState.monthlyInputs[monthKey] || 0;
+
+        const currentMonthlyPlan =
+          assignment.monthlyPlans[
+            monthKey as keyof typeof assignment.monthlyPlans
+          ];
+
+        const employeePlanId = currentMonthlyPlan?.employeePlanId;
+        const monthValue = monthConfig.value;
+
+        // Extract the actual employeePositionId from composite key
+        const actualPositionId = getActualPositionId(
+          assignment.employeePositionId,
+        );
+
+        const employeePlanData: ExtendedEmployeePlanDto = {
+          employeePositionId: actualPositionId,
+          planId: planId,
+          serviceId: assignment.service.serviceId || undefined,
+          planType:
+            selectedPlanType === "percent" ? "percent" : selectedPlanType,
+          expectedQuantity: newValue,
+          month: monthValue,
+          timeframe: selectedTimeframe,
+        };
+
+        if (employeePlanId && newValue > 0) {
+          // UPDATE existing plan (PUT)
+          return update.mutateAsync({
+            ...employeePlanData,
+            id: employeePlanId,
+          });
+        } else if (!employeePlanId && newValue > 0) {
+          // CREATE new plan (POST)
+          return create.mutateAsync(employeePlanData);
+        } else if (employeePlanId && newValue === 0) {
+          // UPDATE to 0 (PUT)
+          return update.mutateAsync({
+            ...employeePlanData,
+            id: employeePlanId,
+          });
+        }
+        return Promise.resolve(); // Skip if no action needed
+      });
+
+      // Wait for all promises to resolve
+      await Promise.allSettled(promises);
+
+      // Invalidate the query cache (refetch will happen automatically in background)
+      queryClient.invalidateQueries({
+        queryKey: EMPLOYEE_PLAN_KEYS.planId(planId),
+      });
+
+      toast({
+        title: t("common.success", "Success"),
+        description: t(
+          "employeePlans.planAssignments.allMonthlyTargetsUpdated",
+        ),
+        variant: "default",
+      });
+    } catch (error) {
+      console.error("Failed to save bulk edit:", error);
+
+      // ROLLBACK: Revert the optimistic update
+      setAssignments((prev) =>
+        prev.map((a) => {
+          if (a.employeePositionId === employeePositionId) {
+            const totalPlanned = Object.values(previousMonthlyPlans).reduce(
+              (sum, plan) => sum + plan.planned,
+              0,
+            );
+
+            return {
+              ...a,
+              monthlyPlans: previousMonthlyPlans,
+              totalPlanned,
+            };
+          }
+          return a;
+        }),
+      );
+
+      // Restore edit mode on error
+      setBulkEditStates((prev) => ({
+        ...prev,
+        [employeePositionId]: { ...prev[employeePositionId], isEditing: true },
+      }));
+
+      toast({
+        title: t("common.error", "Error"),
+        description: t("employeePlans.planAssignments.failedToUpdateTargets"),
+        variant: "destructive",
+      });
+    }
+  };
+  // Cancel bulk edit
+  const cancelBulkEdit = (employeePositionId: string) => {
+    setBulkEditStates((prev) => ({
+      ...prev,
+      [employeePositionId]: { ...prev[employeePositionId], isEditing: false },
+    }));
+  };
+
+  // Quick set functions
+  const quickSetForAllMonths = (employeePositionId: string, value: number) => {
+    const newInputs: { [key: string]: number } = {};
+    dynamicMonthsConfig.forEach((month) => {
+      newInputs[month.key] = value;
+    });
+
+    setBulkEditStates((prev) => ({
+      ...prev,
+      [employeePositionId]: {
+        ...prev[employeePositionId],
+        monthlyInputs: newInputs,
+      },
+    }));
+  };
+
+  // Calculate total for bulk edit
+  const calculateBulkEditTotal = (employeePositionId: string) => {
+    const state = bulkEditStates[employeePositionId];
+    if (!state) return 0;
+    return Object.values(state.monthlyInputs).reduce(
+      (sum, val) => sum + val,
+      0,
+    );
+  };
+
+  if (error) {
+    return (
+      <div className="p-6">
+        <Card className="border-red-200 bg-red-50">
+          <CardContent className="pt-6">
+            <div className="text-center">
+              <h3 className="text-lg font-semibold text-red-700">
+                {t("employeePlans.planAssignments.errorLoadingAssignments")}
+              </h3>
+              <p className="text-red-600 mt-2">
+                {t("employeePlans.planAssignments.failedToLoadAssignments")}
+              </p>
+              <Button onClick={() => refetch()} className="mt-4">
+                {t("employeePlans.planAssignments.retry")}
+              </Button>
+              <Button
+                variant="outline"
+                onClick={() =>
+                  navigate(`/performance-management/${yearId}/employee-plans`)
+                }
+                className="mt-4 ml-4"
+              >
+                <ArrowLeft className="h-4 w-4 mr-2" />
+                {t("employeePlans.planAssignments.backToPlans")}
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      {/* Direct reports panel — refreshes automatically when the user
+          switches position via the global PositionSelect dropdown. */}
+      <MyTeamPanel />
+
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center gap-4">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => navigate(`/performance-management/${yearId}/plans`)}
+            className="gap-2"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            Back to Plans
+          </Button>
+          <div>
+            <h1 className="text-2xl font-bold text-gray-900">
+              Plan Assignments -{" "}
+              {planData?.data?.name
+                ? localizedName(planData.data.name)
+                : "Unnamed Plan"}
+            </h1>
+            <p className="text-gray-600 mt-1">
+              Manage monthly performance targets for assigned employees
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          {/* Plan Type Selector */}
+          <Select
+            value={selectedPlanType}
+            onValueChange={(value: "number" | "percent") =>
+              setSelectedPlanType(value)
+            }
+          >
+            <SelectTrigger className="w-[120px]">
+              <SelectValue
+                placeholder={t("employeePlans.planAssignments.planType")}
+              />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="number">
+                <div className="flex items-center gap-2">
+                  <Hash className="h-4 w-4" />
+                  {t("employeePlans.planAssignments.number")}
+                </div>
+              </SelectItem>
+              <SelectItem value="percent">
+                <div className="flex items-center gap-2">
+                  <Percent className="h-4 w-4" />
+                  {t("employeePlans.planAssignments.percent")}
+                </div>
+              </SelectItem>
+            </SelectContent>
+          </Select>
+
+          {/* Timeframe Selector */}
+          <Select
+            value={selectedTimeframe}
+            onValueChange={(
+              value: "yearly" | "quarterly" | "monthly" | "weekly" | "daily",
+            ) => setSelectedTimeframe(value)}
+          >
+            <SelectTrigger className="w-[120px]">
+              <SelectValue
+                placeholder={t("employeePlans.planAssignments.timeframe")}
+              />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="yearly">
+                <div className="flex items-center gap-2">
+                  <Calendar className="h-4 w-4" />
+                  {t("employeePlans.planAssignments.yearly")}
+                </div>
+              </SelectItem>
+              <SelectItem value="quarterly">
+                <div className="flex items-center gap-2">
+                  <CalendarDays className="h-4 w-4" />
+                  {t("employeePlans.planAssignments.quarterly")}
+                </div>
+              </SelectItem>
+              <SelectItem value="monthly">
+                <div className="flex items-center gap-2">
+                  <CalendarDays className="h-4 w-4" />
+                  {t("employeePlans.planAssignments.monthly")}
+                </div>
+              </SelectItem>
+              <SelectItem value="weekly">
+                <div className="flex items-center gap-2">
+                  <Clock4 className="h-4 w-4" />
+                  {t("employeePlans.planAssignments.weekly")}
+                </div>
+              </SelectItem>
+              <SelectItem value="daily">
+                <div className="flex items-center gap-2">
+                  <Clock className="h-4 w-4" />
+                  {t("employeePlans.planAssignments.daily")}
+                </div>
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+      {/* Summary Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium text-gray-600">
+                  {t("employeePlans.planAssignments.assignedEmployees")}
+                </p>
+                <p className="text-2xl font-bold">{assignments.length}</p>
+              </div>
+              <div className="p-2 bg-purple-100 rounded-lg">
+                <Users className="h-6 w-6 text-purple-600" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium text-gray-600">
+                  {t("employeePlans.planAssignments.totalPlanned")}
+                </p>
+                <p className="text-2xl font-bold">
+                  {assignments.reduce((sum, emp) => sum + emp.totalPlanned, 0)}
+                </p>
+              </div>
+              <div className="p-2 bg-blue-100 rounded-lg">
+                <Target className="h-6 w-6 text-blue-600" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium text-gray-600">
+                  {t("employeePlans.planAssignments.planType")}
+                </p>
+                <div className="mt-1">
+                  <Badge variant="outline" className="font-medium">
+                    {selectedPlanType === "number"
+                      ? t("employeePlans.planAssignments.number")
+                      : t("employeePlans.planAssignments.percent")}
+                  </Badge>
+                </div>
+              </div>
+              <div className="p-2 bg-green-100 rounded-lg">
+                {selectedPlanType === "number" ? (
+                  <Hash className="h-6 w-6 text-primary-600" />
+                ) : (
+                  <Percent className="h-6 w-6 text-primary-600" />
+                )}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium text-gray-600">
+                  {t("employeePlans.planAssignments.timeframe")}
+                </p>
+                <div className="mt-1">
+                  <Badge variant="outline" className="font-medium capitalize">
+                    {t(`employeePlans.planAssignments.${selectedTimeframe}`)}
+                  </Badge>
+                </div>
+              </div>
+              <div className="p-2 bg-yellow-100 rounded-lg">
+                <Calendar className="h-6 w-6 text-yellow-600" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Filters */}
+      <Card className="mb-6">
+        <CardContent className="pt-6">
+          <div className="flex flex-col md:flex-row gap-4 items-end">
+            <div className="flex-1">
+              <Label>{t("employeePlans.planAssignments.search")}</Label>
+              <div className="relative mt-1">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+                <Input
+                  placeholder={t(
+                    "employeePlans.planAssignments.searchPlaceholder",
+                  )}
+                  className="pl-10"
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                />
+              </div>
+            </div>
+
+            <div>
+              <Label>{t("employeePlans.planAssignments.service")}</Label>
+              <Select
+                value={selectedService}
+                onValueChange={setSelectedService}
+              >
+                <SelectTrigger className="w-[200px] mt-1">
+                  <SelectValue
+                    placeholder={t("employeePlans.planAssignments.allServices")}
+                  />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">
+                    {t("employeePlans.planAssignments.allServices")}
+                  </SelectItem>
+                  {allServices.map((serviceId) => (
+                    <SelectItem key={serviceId!} value={serviceId!}>
+                      {localizedName(
+                        assignments.find(
+                          (a) => a.service.serviceId === serviceId,
+                        )?.service.serviceName || undefined,
+                      ) || serviceId}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+      {/* Main Table */}
+      {isLoading ? (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="h-8 w-8 animate-spin text-purple-600" />
+          <span className="ml-2 text-gray-600">
+            {t("employeePlans.planAssignments.loadingAssignments")}
+          </span>
+        </div>
+      ) : filteredAssignments.length === 0 ? (
+        <Card className="border-dashed">
+          <CardContent className="pt-12 pb-12 text-center">
+            <Users className="h-12 w-12 mx-auto text-gray-400 mb-4" />
+            <h3 className="text-lg font-semibold text-gray-900">
+              {t("employeePlans.planAssignments.noEmployeeAssignments")}
+            </h3>
+            <p className="text-gray-600 mt-2 mb-6 max-w-md mx-auto">
+              {searchTerm
+                ? t("employeePlans.planAssignments.noEmployeesMatch")
+                : t("employeePlans.planAssignments.noEmployeesAssigned")}
+            </p>
+          </CardContent>
+        </Card>
+      ) : (
+        <Card className="overflow-hidden">
+          <CardHeader>
+            <div className="flex justify-between items-center">
+              <div>
+                <CardTitle>
+                  {t("employeePlans.planAssignments.monthlyPerformanceTargets")}
+                </CardTitle>
+                <CardDescription>
+                  {t("employeePlans.planAssignments.clickToEdit")}
+                </CardDescription>
+              </div>
+              <div className="flex items-center gap-2">
+                <Badge variant="outline" className="font-medium">
+                  {filteredAssignments.length}{" "}
+                  {t("employeePlans.planAssignments.employees")}
+                </Badge>
+                <Badge className="bg-blue-100 text-blue-800 border-blue-200">
+                  {selectedPlanType === "number"
+                    ? t("employeePlans.planAssignments.number")
+                    : t("employeePlans.planAssignments.percent")}{" "}
+                  {t("employeePlans.planAssignments.targets")}
+                </Badge>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent className="p-0">
+            <div className="relative overflow-auto max-h-[600px]">
+              <div className="min-w-[1500px] sticky top-0">
+                <Table>
+                  <TableHeader className="sticky top-0 bg-white z-10 shadow-sm">
+                    <TableRow>
+                      <TableHead className="w-[250px] sticky left-0 bg-white z-20">
+                        {t("employeePlans.planAssignments.employee")}
+                      </TableHead>
+                      <TableHead className="w-[200px]">
+                        {t("employeePlans.planAssignments.service")}
+                      </TableHead>
+                      <TableHead className="text-center w-[100px]">
+                        {t("employeePlans.planAssignments.total")}
+                      </TableHead>
+                      <TableHead className="text-center w-[100px]">
+                        {t("employeePlans.planAssignments.status")}
+                      </TableHead>
+                      {dynamicMonthsConfig.map((month) => (
+                        <TableHead
+                          key={month.key}
+                          className="text-center min-w-[100px]"
+                        >
+                          <div className="flex flex-col items-center">
+                            <span className="text-xs font-medium">
+                              {month.abbr}
+                            </span>
+                            <span className="text-xs text-gray-500">
+                              {t(
+                                `employeePlans.planAssignments.months.${month.key}`,
+                              )}
+                            </span>
+                          </div>
+                        </TableHead>
+                      ))}
+                      <TableHead className="text-right w-[150px] sticky right-0 bg-white z-20">
+                        {t("employeePlans.planAssignments.actions")}
+                      </TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {filteredAssignments.map((assignment) => {
+                      const isBulkEditing =
+                        bulkEditStates[assignment.employeePositionId]
+                          ?.isEditing;
+                      const monthlyData =
+                        calculateEmployeeMonthlyData(assignment);
+                      const isExpanded = expandedRows.has(
+                        assignment.employeePositionId,
+                      );
+
+                      return (
+                        <>
+                          {/* Main Employee Row */}
+                          <TableRow
+                            key={assignment.employeePositionId}
+                            className="hover:bg-gray-50"
+                          >
+                            <TableCell className="sticky left-0 bg-white z-10">
+                              <div className="flex items-center gap-3">
+                                <Button
+                                  variant="ghost"
+                                  size="sm"
+                                  className="h-6 w-6 p-0"
+                                  onClick={() =>
+                                    toggleRowExpansion(
+                                      assignment.employeePositionId,
+                                    )
+                                  }
+                                >
+                                  <ChevronDown
+                                    className={`h-4 w-4 transition-transform ${
+                                      isExpanded ? "rotate-180" : ""
+                                    }`}
+                                  />
+                                </Button>
+                                <div className="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
+                                  <span className="text-purple-600 font-medium">
+                                    {localizedName(
+                                      assignment.employeeName,
+                                    ).charAt(0)}
+                                  </span>
+                                </div>
+                                <div>
+                                  <p className="font-medium text-gray-900">
+                                    {localizedName(assignment.employeeName)}
+                                  </p>
+                                  <p className="text-sm text-gray-500">
+                                    ID: {assignment.employeeId}
+                                  </p>
+                                </div>
+                              </div>
+                            </TableCell>
+                            <TableCell>
+                              <div className="flex flex-col">
+                                <span className="font-medium text-gray-900">
+                                  {localizedName(
+                                    assignment.service.serviceName || undefined,
+                                  ) ||
+                                    t(
+                                      "employeePlans.planAssignments.noService",
+                                    )}
+                                </span>
+                                {assignment.service.serviceDescription && (
+                                  <span className="text-sm text-gray-500 truncate max-w-[180px]">
+                                    {localizedName(
+                                      assignment.service.serviceDescription ||
+                                        undefined,
+                                    )}
+                                  </span>
+                                )}
+                              </div>
+                            </TableCell>
+                            <TableCell className="text-center">
+                              <div
+                                className={cn(
+                                  "font-bold",
+                                  isBulkEditing
+                                    ? "text-blue-600"
+                                    : "text-gray-900",
+                                )}
+                              >
+                                {isBulkEditing
+                                  ? calculateBulkEditTotal(
+                                      assignment.employeePositionId,
+                                    )
+                                  : assignment.totalPlanned}
+                              </div>
+                            </TableCell>
+                            <TableCell className="text-center">
+                              <Badge
+                                variant="outline"
+                                className={
+                                  assignment.employeeStatus === "active"
+                                    ? "bg-green-50 text-primary-700 border-green-200"
+                                    : assignment.employeeStatus === "pending"
+                                      ? "bg-yellow-50 text-yellow-700 border-yellow-200"
+                                      : "bg-gray-50 text-gray-700 border-gray-200"
+                                }
+                              >
+                                {assignment.employeeStatus}
+                              </Badge>
+                            </TableCell>
+                            {/* Monthly Target Cells */}
+                            {dynamicMonthsConfig.map((monthConfig) => {
+                              const monthKey = monthConfig.key;
+                              const isEditingCell =
+                                editingCell?.employeePositionId ===
+                                  assignment.employeePositionId &&
+                                editingCell?.monthKey === monthKey;
+
+                              const monthlyPlan =
+                                assignment.monthlyPlans[
+                                  monthKey as keyof typeof assignment.monthlyPlans
+                                ];
+
+                              const displayValue = monthlyPlan?.planned || 0;
+                              const hasPlanId = !!monthlyPlan?.employeePlanId;
+
+                              return (
+                                <TableCell
+                                  key={monthKey}
+                                  className="text-center p-1 relative group"
+                                  onClick={() =>
+                                    !isBulkEditing &&
+                                    !isEditingCell &&
+                                    startCellEdit(
+                                      assignment.employeePositionId,
+                                      monthKey,
+                                      displayValue,
+                                    )
+                                  }
+                                  title={`Month: ${monthConfig.value} (${
+                                    monthConfig.name
+                                  }) ${
+                                    hasPlanId ? "✓ Has Plan ID" : "No Plan ID"
+                                  }`}
+                                >
+                                  {isEditingCell ? (
+                                    <div className="flex items-center justify-center gap-1">
+                                      <div className="absolute -top-1 left-1 text-xs text-gray-500">
+                                        {monthConfig.value}
+                                        {hasPlanId && (
+                                          <span className="text-green-500 ml-1">
+                                            ✓
+                                          </span>
+                                        )}
+                                      </div>
+                                      <Input
+                                        type="number"
+                                        min="0"
+                                        value={editingCell.value}
+                                        onChange={(e) =>
+                                          setEditingCell((prev) =>
+                                            prev
+                                              ? {
+                                                  ...prev,
+                                                  value: e.target.value,
+                                                }
+                                              : null,
+                                          )
+                                        }
+                                        className="h-8 w-20 text-center"
+                                        autoFocus
+                                        onKeyDown={(e) => {
+                                          if (e.key === "Enter") saveCellEdit();
+                                          if (e.key === "Escape")
+                                            setEditingCell(null);
+                                        }}
+                                      />
+                                      <Button
+                                        size="sm"
+                                        variant="ghost"
+                                        className="h-6 w-6 p-0"
+                                        onClick={saveCellEdit}
+                                      >
+                                        <Check className="h-3 w-3" />
+                                      </Button>
+                                    </div>
+                                  ) : isBulkEditing ? (
+                                    <div className="relative">
+                                      <div className="absolute -top-1 left-1 text-xs text-gray-500">
+                                        {monthConfig.value}
+                                        {hasPlanId && (
+                                          <span className="text-green-500 ml-1">
+                                            ✓
+                                          </span>
+                                        )}
+                                      </div>
+                                      <Input
+                                        type="number"
+                                        min="0"
+                                        value={
+                                          bulkEditStates[
+                                            assignment.employeePositionId
+                                          ]?.monthlyInputs[monthKey] ||
+                                          displayValue
+                                        }
+                                        onChange={(e) =>
+                                          updateBulkEditInput(
+                                            assignment.employeePositionId,
+                                            monthKey,
+                                            e.target.value,
+                                          )
+                                        }
+                                        className="h-8 w-20 text-center"
+                                      />
+                                    </div>
+                                  ) : (
+                                    <div
+                                      className={cn(
+                                        "font-medium px-3 py-1.5 rounded cursor-pointer hover:bg-gray-100 transition-colors relative",
+                                        hasPlanId
+                                          ? "text-primary-700 bg-green-50 border border-green-200"
+                                          : displayValue > 0
+                                            ? "text-blue-700 bg-blue-50 border border-blue-200"
+                                            : "text-gray-400 italic",
+                                      )}
+                                    >
+                                      <div className="absolute -top-1 left-1 text-xs text-gray-500 flex items-center">
+                                        {monthConfig.value}
+                                        {hasPlanId && (
+                                          <span
+                                            className="text-green-500 ml-1"
+                                            title={`Plan ID: ${monthlyPlan.employeePlanId}`}
+                                          >
+                                            ✓
+                                          </span>
+                                        )}
+                                      </div>
+                                      {displayValue}
+                                      {hasPlanId && (
+                                        <div className="absolute -bottom-1 right-1">
+                                          <Badge
+                                            variant="outline"
+                                            className="h-4 text-[10px] px-1 py-0 bg-green-100 text-primary-700 border-green-300"
+                                          >
+                                            ✓
+                                          </Badge>
+                                        </div>
+                                      )}
+                                    </div>
+                                  )}
+                                </TableCell>
+                              );
+                            })}
+                            <TableCell className="text-right sticky right-0 bg-white z-10">
+                              {isBulkEditing ? (
+                                <div className="flex gap-1 justify-end">
+                                  <Button
+                                    size="sm"
+                                    variant="default"
+                                    onClick={() =>
+                                      saveBulkEdit(
+                                        assignment.employeePositionId,
+                                      )
+                                    }
+                                    disabled={
+                                      create.isPending || update.isPending
+                                    }
+                                    className="h-8"
+                                  >
+                                    {create.isPending || update.isPending ? (
+                                      <Loader2 className="h-4 w-4 animate-spin" />
+                                    ) : (
+                                      <Save className="h-4 w-4" />
+                                    )}
+                                  </Button>
+                                  <Button
+                                    size="sm"
+                                    variant="outline"
+                                    onClick={() =>
+                                      cancelBulkEdit(
+                                        assignment.employeePositionId,
+                                      )
+                                    }
+                                    className="h-8"
+                                  >
+                                    <X className="h-4 w-4" />
+                                  </Button>
+                                </div>
+                              ) : (
+                                <div className="flex gap-1 justify-end">
+                                  <Button
+                                    size="sm"
+                                    variant="outline"
+                                    onClick={() => startBulkEdit(assignment)}
+                                    className="h-8"
+                                  >
+                                    <Edit2 className="h-4 w-4 mr-1" />
+                                    {t("employeePlans.planAssignments.editAll")}
+                                  </Button>
+                                  <DropdownMenu>
+                                    <DropdownMenuTrigger asChild>
+                                      <Button
+                                        size="sm"
+                                        variant="ghost"
+                                        className="h-8 w-8 p-0"
+                                      >
+                                        <MoreHorizontal className="h-4 w-4" />
+                                      </Button>
+                                    </DropdownMenuTrigger>
+                                    <DropdownMenuContent align="end">
+                                      <DropdownMenuLabel>
+                                        {t(
+                                          "employeePlans.planAssignments.quickSet",
+                                        )}
+                                      </DropdownMenuLabel>
+                                      <DropdownMenuItem
+                                        onClick={() =>
+                                          quickSetForAllMonths(
+                                            assignment.employeePositionId,
+                                            100,
+                                          )
+                                        }
+                                      >
+                                        {t(
+                                          "employeePlans.planAssignments.setAll",
+                                        )}{" "}
+                                        100
+                                      </DropdownMenuItem>
+                                      <DropdownMenuItem
+                                        onClick={() =>
+                                          quickSetForAllMonths(
+                                            assignment.employeeId,
+                                            50,
+                                          )
+                                        }
+                                      >
+                                        {t(
+                                          "employeePlans.planAssignments.setHalf",
+                                        )}
+                                      </DropdownMenuItem>
+                                      <DropdownMenuItem
+                                        onClick={() =>
+                                          quickSetForAllMonths(
+                                            assignment.employeeId,
+                                            0,
+                                          )
+                                        }
+                                      >
+                                        {t(
+                                          "employeePlans.planAssignments.clearAll",
+                                        )}
+                                      </DropdownMenuItem>
+                                      <DropdownMenuSeparator />
+                                      <DropdownMenuItem className="text-red-600">
+                                        <Trash2 className="h-4 w-4 mr-2" />
+                                        {t(
+                                          "employeePlans.planAssignments.removeAssignment",
+                                          "Remove Assignment",
+                                        )}
+                                      </DropdownMenuItem>
+                                    </DropdownMenuContent>
+                                  </DropdownMenu>
+                                </div>
+                              )}
+                            </TableCell>
+                          </TableRow>
+
+                          {/* Bulk Edit Controls Row (only shows during bulk edit) */}
+                          {isBulkEditing && (
+                            <TableRow className="bg-blue-50">
+                              <TableCell
+                                colSpan={4}
+                                className="text-right font-medium"
+                              >
+                                Quick Set:
+                              </TableCell>
+                              <TableCell colSpan={13} className="p-2">
+                                <div className="flex items-center gap-2">
+                                  <Button
+                                    size="sm"
+                                    variant="outline"
+                                    onClick={() =>
+                                      quickSetForAllMonths(
+                                        assignment.employeeId,
+                                        100,
+                                      )
+                                    }
+                                    className="h-7"
+                                  >
+                                    100
+                                  </Button>
+                                  <Button
+                                    size="sm"
+                                    variant="outline"
+                                    onClick={() =>
+                                      quickSetForAllMonths(
+                                        assignment.employeeId,
+                                        50,
+                                      )
+                                    }
+                                    className="h-7"
+                                  >
+                                    50
+                                  </Button>
+                                  <Button
+                                    size="sm"
+                                    variant="outline"
+                                    onClick={() =>
+                                      quickSetForAllMonths(
+                                        assignment.employeeId,
+                                        25,
+                                      )
+                                    }
+                                    className="h-7"
+                                  >
+                                    25
+                                  </Button>
+                                  <Button
+                                    size="sm"
+                                    variant="outline"
+                                    onClick={() =>
+                                      quickSetForAllMonths(
+                                        assignment.employeeId,
+                                        0,
+                                      )
+                                    }
+                                    className="h-7"
+                                  >
+                                    Clear
+                                  </Button>
+                                  <div className="flex-1"></div>
+                                  <span className="text-sm font-medium text-blue-700">
+                                    Total:{" "}
+                                    {calculateBulkEditTotal(
+                                      assignment.employeeId,
+                                    )}
+                                  </span>
+                                </div>
+                              </TableCell>
+                            </TableRow>
+                          )}
+
+                          {/* Expanded Row - Monthly Details */}
+                          {isExpanded && (
+                            <TableRow className="bg-gray-50">
+                              <TableCell colSpan={17} className="p-0">
+                                <div className="p-4">
+                                  <div className="overflow-x-auto">
+                                    <Table>
+                                      <TableHeader>
+                                        <TableRow>
+                                          <TableHead className="w-[100px]">
+                                            Month
+                                          </TableHead>
+                                          <TableHead className="text-right">
+                                            Planned Target
+                                          </TableHead>
+                                          <TableHead className="text-right">
+                                            Actual Executed
+                                          </TableHead>
+                                          <TableHead className="text-right">
+                                            Variance
+                                          </TableHead>
+                                          <TableHead className="text-right">
+                                            Completion Rate
+                                          </TableHead>
+                                        </TableRow>
+                                      </TableHeader>
+                                      <TableBody>
+                                        {monthlyData.map((month) => (
+                                          <TableRow key={month.month}>
+                                            <TableCell className="font-medium">
+                                              {month.month} ({month.monthAbbr})
+                                            </TableCell>
+                                            <TableCell className="text-right">
+                                              {month.planned}
+                                            </TableCell>
+                                            <TableCell className="text-right">
+                                              {month.executed}
+                                            </TableCell>
+                                            <TableCell className="text-right">
+                                              <span
+                                                className={`px-2 py-1 rounded text-xs ${
+                                                  month.variance > 0
+                                                    ? "bg-green-100 text-primary-700"
+                                                    : month.variance < 0
+                                                      ? "bg-red-100 text-red-700"
+                                                      : "bg-gray-100 text-gray-700"
+                                                }`}
+                                              >
+                                                {month.variance > 0 ? "+" : ""}
+                                                {month.variance}
+                                              </span>
+                                            </TableCell>
+                                            <TableCell className="text-right">
+                                              <span
+                                                className={`px-2 py-1 rounded text-xs ${
+                                                  month.completionRate >= 90
+                                                    ? "bg-green-100 text-primary-700"
+                                                    : month.completionRate >= 70
+                                                      ? "bg-yellow-100 text-yellow-700"
+                                                      : month.completionRate >=
+                                                          50
+                                                        ? "bg-orange-100 text-orange-700"
+                                                        : "bg-red-100 text-red-700"
+                                                }`}
+                                              >
+                                                {Math.round(
+                                                  month.completionRate,
+                                                )}
+                                                %
+                                              </span>
+                                            </TableCell>
+                                          </TableRow>
+                                        ))}
+                                      </TableBody>
+                                    </Table>
+                                  </div>
+                                </div>
+                              </TableCell>
+                            </TableRow>
+                          )}
+                        </>
+                      );
+                    })}
+                  </TableBody>
+                </Table>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+};
+
+export default EmployeePlanAssignmentsPage;
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/EmployeePlan/EmployeePlanListPage.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/EmployeePlan/EmployeePlanListPage.tsx
new file mode 100644
index 000000000..90c44aa1f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/EmployeePlan/EmployeePlanListPage.tsx
@@ -0,0 +1,1725 @@
+import { useState, useMemo, useEffect } from "react";
+import { useAuth } from "@/shared/context/AuthContext";
+import { Button } from "@/shared/common/ui/button";
+import {
+  PlusIcon,
+  Pencil,
+  Trash2,
+  Loader2,
+  Calendar,
+  Target,
+  BarChart3,
+  Clock,
+  Hash,
+  Percent,
+  Table as TableIcon,
+  Grid3x3,
+  ArrowUpRight,
+  Filter,
+  Search,
+  Download,
+  Eye,
+  EyeOff,
+  TrendingUp,
+  TrendingDown,
+  CheckCircle,
+  XCircle,
+  AlertCircle,
+  RefreshCw,
+  MoreVertical,
+  ChevronDown,
+  ChevronUp,
+  Users,
+  Star,
+  Award,
+  Activity,
+  Target as TargetIcon,
+} from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { useNavigate, useParams } from "react-router-dom";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/common/ui/table";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import { useToast } from "@/shared/common/ui/use-toast";
+import { deleteEmployeePlan } from "@/performance-management/services/api/employeePlanService";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { format, differenceInDays, isWithinInterval } from "date-fns";
+import { Badge } from "@/shared/common/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import { useMinePlan } from "@/performance-management/hooks/usePlans";
+import { EPositionTypeKey } from "@/shared/dto/user/meDto";
+import { getSelectedPositionType } from "@/performance-management/utils/positionTypeUtils";
+import {
+  calculateAvailableMonths,
+  monthsConfig,
+} from "@/performance-management/utils/ethiopianMonthCalculator";
+import { useMineEmployeePlan } from "@/performance-management/hooks/useEmployeePlan";
+import { MyTeamPanel } from "./MyTeamPanel";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import { Input } from "@/shared/common/ui/input";
+import { Progress } from "@/shared/common/ui/progress";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/shared/common/ui/tabs";
+import { Separator } from "@/shared/common/ui/separator";
+import { cn } from "@/shared/lib/utils";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+
+export interface EmployeePlan {
+  createdAt: string;
+  updatedAt: string | null;
+  amharicCreatedAt: string;
+  amharicUpdatedAt: string | null;
+  id: string;
+  startDate: string;
+  amharicStartDate: string;
+  endDate: string;
+  amharicEndDate: string;
+  employeePositionId: string;
+  serviceId?: string;
+  service?: {
+    name: {
+      en: string;
+      am: string;
+    };
+  };
+  planId: string;
+  expectedQuantity: number;
+  currentQuantity: number;
+  planType: "percent" | string;
+  timeframe: "monthly" | string;
+  year: number;
+  month: number;
+  week: number | null;
+  parentEmployeePlanId: string | null;
+  plan: { name?: { en: string; am: string } };
+  description?: { en: string; am: string };
+  weight?: number;
+  status?: string;
+  // initialGoal?: number;
+  // expectedGoal?: number;
+  name?: { en: string; am: string };
+}
+
+const EmployeePlanListPage = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { yearId } = useParams();
+  const { toast } = useToast();
+  const localizedName = useLocalizedName();
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [planToDelete, setPlanToDelete] = useState<string | null>(null);
+  const [viewType, setViewType] = useState<"table" | "grid">("table");
+  const [selectedService, setSelectedService] = useState<string>("all");
+  const [searchTerm, setSearchTerm] = useState("");
+  const [statusFilter, setStatusFilter] = useState<string>("all");
+  const [timeframeFilter, setTimeframeFilter] = useState<string>("all");
+  const [sortBy, setSortBy] = useState<"name" | "progress" | "weight" | "date">(
+    "name"
+  );
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+  const [showCompleted, setShowCompleted] = useState(true);
+  const [activeTab, setActiveTab] = useState("all");
+  const { user, selectedPositionId } = useAuth();
+  const positionType = getSelectedPositionType(user, selectedPositionId);
+  // const calculateProgress = (initialGoal?: number, expectedGoal?: number) => {
+  //   const initial = initialGoal ?? 0;
+  //   const expected = expectedGoal ?? 1;
+  //   if (expected === 0) return 0;
+  //   return Math.min(100, (initial / expected) * 100);
+  // };
+  // Use the useMinePlan hook
+  const {
+    data: minePlanResponse,
+    isLoading: isMinePlanLoading,
+    error: isMinePlanError,
+    refetch: minePlanRefetch,
+  } = useMinePlan();
+
+  const {
+    data: mineEmployeePlanResponse,
+    isLoading: isEmployeePlanLoading,
+    error: isEmployeePlanError,
+    refetch: employeePlanRefetch,
+  } = useMineEmployeePlan({
+    timeframe: "monthly",
+  });
+
+  // Determine which data to use:
+  // - For EMPLOYEE position type, always use /employee-plans/mine
+  // - For everyone else (team leads, directors, etc.), prefer /plans/mine but
+  //   fall back to /employee-plans/mine when the user actually has monthly
+  //   employee-plan assignments. This covers team leads whose own work is
+  //   tracked at the employee-plan level.
+  const isEmployee = positionType === EPositionTypeKey.EMPLOYEE;
+  const minePlanItems = minePlanResponse?.data?.items?.length ?? 0;
+  const mineEmployeePlanItems =
+    mineEmployeePlanResponse?.data?.items?.length ?? 0;
+  const useEmployeePlanData =
+    isEmployee || (mineEmployeePlanItems > 0 && minePlanItems === 0);
+
+  const currentData = useEmployeePlanData
+    ? mineEmployeePlanResponse
+    : minePlanResponse;
+  const isLoading = useEmployeePlanData
+    ? isEmployeePlanLoading
+    : isMinePlanLoading;
+  const error = useEmployeePlanData ? isEmployeePlanError : isMinePlanError;
+  const refetch = useEmployeePlanData
+    ? employeePlanRefetch
+    : minePlanRefetch;
+
+  const employeePlans = useMemo(
+    () => currentData?.data?.items || [],
+    [currentData]
+  );
+
+  // Get unique services from plans and check if any plan has a service
+  const { services, hasAnyService } = useMemo(() => {
+    const serviceMap = new Map();
+    let hasService = false;
+    employeePlans.forEach((plan: EmployeePlan) => {
+      if (plan.service && plan.serviceId) {
+        serviceMap.set(plan.serviceId, {
+          id: plan.serviceId,
+          name: plan.service?.name || { en: "Unknown", am: "Unknown" },
+        });
+        hasService = true;
+      }
+    });
+    return {
+      services: Array.from(serviceMap.values()),
+      hasAnyService: hasService,
+    };
+  }, [employeePlans]);
+
+  // Filter plans based on selected service
+  const filteredPlans = useMemo(() => {
+    let filtered = employeePlans;
+
+    // Service filter
+    if (selectedService !== "all") {
+      filtered = filtered.filter(
+        (plan: EmployeePlan) => plan.serviceId === selectedService
+      );
+    }
+
+    // Status filter
+    if (statusFilter !== "all") {
+      filtered = filtered.filter(
+        (plan: EmployeePlan) => plan.status === statusFilter
+      );
+    }
+
+    // Timeframe filter
+    if (timeframeFilter !== "all") {
+      filtered = filtered.filter(
+        (plan: EmployeePlan) => plan.timeframe === timeframeFilter
+      );
+    }
+
+    // Search filter
+    if (searchTerm) {
+      const term = searchTerm.toLowerCase();
+      filtered = filtered.filter((plan: EmployeePlan) => {
+        const name = localizedName(
+          plan?.plan?.name || plan?.name || { en: "", am: "" }
+        ).toLowerCase();
+        const description = localizedName(
+          plan.description || { en: "", am: "" }
+        ).toLowerCase();
+        return name.includes(term) || description.includes(term);
+      });
+    }
+
+    // Show completed filter
+    if (!showCompleted) {
+      filtered = filtered.filter(
+        (plan: EmployeePlan) => plan.status !== "accepted"
+      );
+    }
+
+    // Active tab filter
+    if (activeTab === "active") {
+      filtered = filtered.filter(
+        (plan: EmployeePlan) =>
+          plan.status === "accepted" || plan.status === "pending"
+      );
+    } else if (activeTab === "completed") {
+      filtered = filtered.filter(
+        (plan: EmployeePlan) => plan.status === "accepted"
+      );
+    } else if (activeTab === "draft") {
+      filtered = filtered.filter(
+        (plan: EmployeePlan) => plan.status === "draft"
+      );
+    }
+
+    // Sort plans
+    filtered.sort((a: EmployeePlan, b: EmployeePlan) => {
+      let aValue: string | number, bValue: string | number;
+
+      switch (sortBy) {
+        case "name":
+          aValue = localizedName(a.plan?.name || a.name || { en: "", am: "" });
+          bValue = localizedName(b.plan?.name || b.name || { en: "", am: "" });
+          break;
+        case "progress":
+          // aValue = calculateProgress(a.initialGoal || 0, a.expectedGoal || 1);
+          // bValue = calculateProgress(b.initialGoal || 0, b.expectedGoal || 1);
+          aValue = 0;
+          bValue = 0;
+          break;
+        case "weight":
+          aValue = a.weight || 0;
+          bValue = b.weight || 0;
+          break;
+        case "date":
+          aValue = new Date(a.createdAt).getTime();
+          bValue = new Date(b.createdAt).getTime();
+          break;
+        default:
+          return 0;
+      }
+
+      if (sortOrder === "asc") {
+        return aValue > bValue ? 1 : -1;
+      } else {
+        return aValue < bValue ? 1 : -1;
+      }
+    });
+
+    return filtered;
+  }, [
+    employeePlans,
+    selectedService,
+    statusFilter,
+    timeframeFilter,
+    searchTerm,
+    showCompleted,
+    activeTab,
+    sortBy,
+    sortOrder,
+    localizedName,
+  ]);
+  // Calculate statistics
+  const stats = useMemo(() => {
+    const total = filteredPlans.length;
+    const completed = filteredPlans.filter(
+      (p: EmployeePlan) => p.status === "accepted"
+    ).length;
+    const pending = filteredPlans.filter(
+      (p: EmployeePlan) => p.status === "pending"
+    ).length;
+    const draft = filteredPlans.filter(
+      (p: EmployeePlan) => p.status === "draft"
+    ).length;
+
+    const totalWeight = filteredPlans.reduce(
+      (sum: number, plan: EmployeePlan) => sum + (plan.weight || 0),
+      0
+    );
+    const avgWeight = total > 0 ? totalWeight / total : 0;
+
+    const totalProgress = filteredPlans.reduce(
+      (sum: number, plan: EmployeePlan) =>
+        sum, // + calculateProgress(plan.initialGoal || 0, plan.expectedGoal || 1),
+      0
+    );
+    const avgProgress = total > 0 ? totalProgress / total : 0;
+
+    return {
+      total,
+      completed,
+      pending,
+      draft,
+      avgWeight: parseFloat(avgWeight.toFixed(1)),
+      avgProgress: parseFloat(avgProgress.toFixed(1)),
+    };
+  }, [filteredPlans]);
+
+  // Handle delete
+  const handleDeleteClick = (id: string, e?: React.MouseEvent) => {
+    e?.stopPropagation();
+    setPlanToDelete(id);
+    setDeleteDialogOpen(true);
+  };
+
+  const confirmDelete = async () => {
+    if (!planToDelete) return;
+
+    setDeletingId(planToDelete);
+    setDeleteDialogOpen(false);
+
+    try {
+      await deleteEmployeePlan(planToDelete);
+      toast({
+        title: t("common.success", "Success"),
+        description: t(
+          "employeePlans.deleteSuccess",
+          "Employee plan deleted successfully"
+        ),
+        variant: "default",
+      });
+      refetch();
+    } catch (error) {
+      console.error("Failed to delete employee plan:", error);
+      toast({
+        title: t("common.error", "Error"),
+        description: t(
+          "employeePlans.deleteFailed",
+          "Failed to delete employee plan"
+        ),
+        variant: "destructive",
+      });
+    } finally {
+      setDeletingId(null);
+      setPlanToDelete(null);
+    }
+  };
+
+  const handleEdit = (id: string, e?: React.MouseEvent) => {
+    e?.stopPropagation();
+    navigate(`/performance-management/${yearId}/employee-plans/edit/${id}`);
+  };
+
+  const handlePlanClick = (
+    id: string,
+    month: number,
+    planData: EmployeePlan
+  ) => {
+    // Debug logging to check what we're getting
+    console.log("handlePlanClick called with:", { id, month, planData });
+    console.log("Position Type:", positionType);
+    console.log("Plan Data:", planData);
+
+    // Check if yearId exists
+    if (!yearId) {
+      console.error("yearId is undefined!");
+      toast({
+        title: t("common.error", "Error"),
+        description: t("employeePlans.yearIdMissing", "Year ID is missing"),
+        variant: "destructive",
+      });
+      return;
+    }
+
+    // Add null checks for planData properties
+    const employeePositionId = planData?.employeePositionId || "";
+    // If planId is missing (e.g. from minePlanResponse/Plan objects), use id as fallback
+    const planId = planData?.planId || planData?.id || "";
+    const serviceId = planData?.serviceId || "";
+
+    if (!planId) {
+      console.error("planId is undefined or empty!");
+      toast({
+        title: t("common.error", "Error"),
+        description: t(
+          "employeePlans.planIdMissing",
+          "Plan data is incomplete: Missing Plan ID"
+        ),
+        variant: "destructive",
+      });
+      return;
+    }
+    const planType = planData?.planType || "percent";
+    const currentQuantity = planData?.currentQuantity || 0;
+    const expectedQuantity = planData?.expectedQuantity || 0;
+    const timeframe = planData?.timeframe || "monthly";
+
+    try {
+      // Calculate month range from amharic start and end dates
+      let monthsToPass: number[] = [];
+
+      // For quarterly/monthly plans, calculate months from start and end dates
+      if (planData?.amharicStartDate && planData?.amharicEndDate) {
+        console.log("Calculating month range from:", {
+          start: planData.amharicStartDate,
+          end: planData.amharicEndDate,
+          timeframe: planData.timeframe,
+        });
+        const availableMonths = calculateAvailableMonths(
+          planData.amharicStartDate,
+          planData.amharicEndDate,
+          monthsConfig
+        );
+        monthsToPass = availableMonths.map((m) => m.value);
+      } else if (month) {
+        // Fallback: use the month field if available
+        monthsToPass = [month];
+      }
+
+      const monthsParam = monthsToPass.join(",");
+
+      if (
+        positionType === EPositionTypeKey.TEAM_LEADER ||
+        positionType === EPositionTypeKey.DIRECTOR
+      ) {
+        console.log("Navigating to leader/director view");
+        navigate(
+          `/performance-management/${yearId}/employee-plans/plans/${planId}?months=${monthsParam}`
+        );
+      } else if (positionType === EPositionTypeKey.EMPLOYEE) {
+        // Create navigation state with fallbacks
+        const navigationState = {
+          parentEmployeePlanId: id,
+          employeePositionId,
+          planId,
+          serviceId,
+          planType,
+          currentQuantity,
+          expectedQuantity,
+          month: month || 1, // Default to month 1 if not provided
+          timeframe,
+          planName: localizedName(
+            planData?.plan?.name || planData?.name || { en: "Plan", am: "Plan" }
+          ),
+          serviceName: planData?.service?.name
+            ? localizedName(planData.service.name)
+            : "N/A",
+          weight: planData?.weight || 0,
+          status: planData?.status || "draft",
+          // Add more properties as needed
+          description: planData?.description
+            ? localizedName(planData.description)
+            : "",
+          startDate: planData?.startDate,
+          endDate: planData?.endDate,
+          amharicStartDate: planData?.amharicStartDate,
+          amharicEndDate: planData?.amharicEndDate,
+          // Pass the specific months for this plan
+          planMonths: monthsToPass,
+        };
+
+        // Handle weekly timeframe navigation
+        if (timeframe === "monthly") {
+          // For weekly plans, we need to pick a month to display.
+          // Use the clicked month (if available) or the first available month from the plan range
+          const targetMonth =
+            month || (monthsToPass.length > 0 ? monthsToPass[0] : 1);
+
+          navigate(
+            `/performance-management/${yearId}/employee-plans/plans/${planId}/${targetMonth}/weekly`,
+            {
+              state: navigationState,
+            }
+          );
+        } else {
+          // Pass planMonths as URL query parameter to ensure it persists
+          navigate(
+            `/performance-management/${yearId}/employee-plans/plans/${planId}?months=${monthsParam}`,
+            {
+              state: navigationState,
+            }
+          );
+        }
+      } else {
+        navigate(
+          `/performance-management/${yearId}/employee-plans/plans/${planId}?months=${monthsParam}`
+        );
+      }
+    } catch (error) {
+      console.error("Navigation error:", error);
+      toast({
+        title: t("employeePlans.navigationError", "Navigation Error"),
+        description: t(
+          "employeePlans.navigationErrorMessage",
+          "Could not navigate to plan details"
+        ),
+        variant: "destructive",
+      });
+    }
+  };
+
+  const formatDate = (dateString: string) => {
+    try {
+      return format(new Date(dateString), "MMM dd, yyyy");
+    } catch {
+      return dateString;
+    }
+  };
+
+  const getTimeframeBadge = (timeframe: string) => {
+    const colors = {
+      yearly: "bg-blue-100 text-blue-800 border-blue-200",
+      quarterly: "bg-purple-100 text-purple-800 border-purple-200",
+      monthly: "bg-green-100 text-green-800 border-green-200",
+      weekly: "bg-yellow-100 text-yellow-800 border-yellow-200",
+      daily: "bg-red-100 text-red-800 border-red-200",
+    };
+
+    return (
+      <Badge
+        variant="outline"
+        className={`${
+          colors[timeframe as keyof typeof colors] ||
+          "bg-gray-100 text-gray-800 border-gray-200"
+        } font-medium`}>
+        {timeframe.charAt(0).toUpperCase() + timeframe.slice(1)}
+      </Badge>
+    );
+  };
+
+  const getPlanTypeIcon = (planType: string) => {
+    return planType === "number" ? (
+      <Hash className="h-4 w-4" />
+    ) : (
+      <Percent className="h-4 w-4" />
+    );
+  };
+
+  const getStatusBadge = (status: string) => {
+    const statusConfig = {
+      accepted: {
+        bg: "bg-green-50",
+        text: "text-primary-700",
+        border: "border-green-200",
+        label: "Accepted",
+        icon: <CheckCircle className="h-3 w-3 mr-1" />,
+      },
+      pending: {
+        bg: "bg-yellow-50",
+        text: "text-yellow-700",
+        border: "border-yellow-200",
+        label: "Pending",
+        icon: <Clock className="h-3 w-3 mr-1" />,
+      },
+      draft: {
+        bg: "bg-gray-50",
+        text: "text-gray-700",
+        border: "border-gray-200",
+        label: "Draft",
+        icon: <EyeOff className="h-3 w-3 mr-1" />,
+      },
+      rejected: {
+        bg: "bg-red-50",
+        text: "text-red-700",
+        border: "border-red-200",
+        label: "Rejected",
+        icon: <XCircle className="h-3 w-3 mr-1" />,
+      },
+    };
+
+    const config =
+      statusConfig[status as keyof typeof statusConfig] || statusConfig.draft;
+
+    return (
+      <Badge
+        variant="outline"
+        className={`${config.bg} ${config.text} ${config.border} font-medium flex items-center`}>
+        {config.icon}
+        {config.label}
+      </Badge>
+    );
+  };
+
+  const handleSort = (field: "name" | "progress" | "weight" | "date") => {
+    if (sortBy === field) {
+      setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+    } else {
+      setSortBy(field);
+      setSortOrder("asc");
+    }
+  };
+
+  const getSortIcon = (field: string) => {
+    if (sortBy !== field) return null;
+    return sortOrder === "asc" ? (
+      <ChevronUp className="h-4 w-4" />
+    ) : (
+      <ChevronDown className="h-4 w-4" />
+    );
+  };
+
+  const handleExport = () => {
+    // Export functionality
+    toast({
+      title: t("employeePlans.exportStarted", "Export Started"),
+      description: t(
+        "employeePlans.exportMessage",
+        "Your plans are being exported. You'll receive a download link shortly."
+      ),
+    });
+  };
+
+  const handleBulkAction = (action: string) => {
+    // Bulk action functionality
+    toast({
+      title: "Bulk Action",
+      description: `${action} action performed on selected items.`,
+    });
+  };
+
+  const getProgressColor = (progress: number) => {
+    if (progress >= 90) return "bg-gradient-to-r from-green-500 to-emerald-500";
+    if (progress >= 70) return "bg-gradient-to-r from-blue-500 to-cyan-500";
+    if (progress >= 50) return "bg-gradient-to-r from-yellow-500 to-amber-500";
+    return "bg-gradient-to-r from-red-500 to-rose-500";
+  };
+
+  if (error) {
+    return (
+      <div className="p-6">
+        <Card className="border-red-200 bg-gradient-to-br from-red-50/50 to-white">
+          <CardContent className="pt-12 pb-12 text-center">
+            <AlertCircle className="h-16 w-16 mx-auto text-red-400 mb-4" />
+            <h3 className="text-2xl font-bold text-red-700 mb-2">
+              {t("employeePlans.errorLoadingPlans", "Error Loading Plans")}
+            </h3>
+            <p className="text-red-600 max-w-md mx-auto mb-6">
+              We encountered an error while loading your performance plans.
+              Please check your connection and try again.
+            </p>
+            <div className="flex gap-3 justify-center">
+              <Button
+                onClick={() => refetch()}
+                className="bg-gradient-to-r from-red-500 to-rose-500 hover:from-red-600 hover:to-rose-600 text-white">
+                <RefreshCw className="h-4 w-4 mr-2" />
+                Retry
+              </Button>
+              <Button
+                variant="outline"
+                onClick={() => navigate("/performance-management")}>
+                {t("employeePlans.backToDashboard", "Back to Dashboard")}
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 bg-gradient-to-br from-gray-50/50 to-white min-h-screen">
+      <div className="max-w-7xl mx-auto">
+        {/* Direct reports panel — uses /positions/children/{myPositionId}
+            and refetches when the user switches position via the topbar. */}
+        <MyTeamPanel />
+
+        {/* Header */}
+        <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6 mb-8">
+          <div>
+            <div className="flex items-center gap-3 mb-2">
+              <div className="p-2 bg-gradient-to-r from-purple-500 to-violet-600 rounded-lg">
+                <Target className="h-6 w-6 text-white" />
+              </div>
+              <h1 className="text-3xl font-bold text-gray-900">
+                {t("employeePlans.title", "My Performance Plans")}
+              </h1>
+            </div>
+            <p className="text-gray-600">
+              {t(
+                "employeePlans.description",
+                "Manage your personal performance goals and track progress in real-time"
+              )}
+            </p>
+          </div>
+          <div className="flex items-center gap-4">
+            <Button
+              variant="outline"
+              onClick={() => refetch()}
+              disabled={isLoading}
+              className="gap-2">
+              {isLoading ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <RefreshCw className="h-4 w-4" />
+              )}
+              {t("employeePlans.refresh", "Refresh")}
+            </Button>
+            {/* <Button
+              onClick={() =>
+                navigate(
+                  `/performance-management/${yearId}/employee-plans/create`
+                )
+              }
+              className="bg-gradient-to-r from-purple-500 to-violet-600 hover:from-purple-600 hover:to-violet-700 text-white gap-2"
+            >
+              <PlusIcon className="h-4 w-4" />
+              {t("employeePlans.newPlan", "New Plan")}
+            </Button> */}
+          </div>
+        </div>
+
+        {/* Tabs */}
+        <Tabs value={activeTab} onValueChange={setActiveTab} className="mb-8">
+          <TabsList className="bg-gray-100 p-1">
+            <TabsTrigger value="all" className="data-[state=active]:bg-white">
+              {t("employeePlans.allPlans", "All Plans")}
+              <Badge variant="secondary" className="ml-2">
+                {stats.total}
+              </Badge>
+            </TabsTrigger>
+            <TabsTrigger
+              value="active"
+              className="data-[state=active]:bg-white">
+              <Activity className="h-4 w-4 mr-2" />
+              {t("employeePlans.active", "Active")}
+              <Badge variant="secondary" className="ml-2">
+                {stats.pending}
+              </Badge>
+            </TabsTrigger>
+            <TabsTrigger
+              value="completed"
+              className="data-[state=active]:bg-white">
+              <CheckCircle className="h-4 w-4 mr-2" />
+              {t("employeePlans.completed", "Completed")}
+              <Badge variant="secondary" className="ml-2">
+                {stats.completed}
+              </Badge>
+            </TabsTrigger>
+            <TabsTrigger value="draft" className="data-[state=active]:bg-white">
+              <EyeOff className="h-4 w-4 mr-2" />
+              {t("employeePlans.drafts", "Drafts")}
+              <Badge variant="secondary" className="ml-2">
+                {stats.draft}
+              </Badge>
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+
+        {/* Stats Overview */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+          <Card className="bg-gradient-to-br from-purple-50 to-white border-purple-200">
+            <CardContent className="p-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-purple-600 mb-1">
+                    {t("employeePlans.totalPlans", "Total Number of Plans")}
+                  </p>
+                  <p className="text-3xl font-bold text-purple-900">
+                    {stats.total}
+                  </p>
+                  <p className="text-xs text-purple-500 mt-2">
+                    {t(
+                      "employeePlans.activePerformanceGoals",
+                      "Active performance goals"
+                    )}
+                  </p>
+                </div>
+                <div className="p-3 bg-gradient-to-r from-purple-100 to-purple-200 rounded-xl">
+                  <Target className="h-8 w-8 text-purple-600" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="bg-gradient-to-br from-blue-50 to-white border-blue-200">
+            <CardContent className="p-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-blue-600 mb-1">
+                    {t("employeePlans.avgProgress", "Avg. Progress")}
+                  </p>
+                  <p className="text-3xl font-bold text-blue-900">
+                    {stats.avgProgress}%
+                  </p>
+                  <div className="w-full bg-blue-100 rounded-full h-2 mt-2">
+                    <div
+                      className={`h-2 rounded-full ${getProgressColor(
+                        stats.avgProgress
+                      )}`}
+                      style={{ width: `${stats.avgProgress}%` }}
+                    />
+                  </div>
+                </div>
+                <div className="p-3 bg-gradient-to-r from-blue-100 to-blue-200 rounded-xl">
+                  <TrendingUp className="h-8 w-8 text-blue-600" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="bg-gradient-to-br from-green-50 to-white border-green-200">
+            <CardContent className="p-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-primary-600 mb-1">
+                    {t("employeePlans.avgWeight", "Avg. Weight")}
+                  </p>
+                  <p className="text-3xl font-bold text-green-900">
+                    {stats.avgWeight}%
+                  </p>
+                  <p className="text-xs text-green-500 mt-2">
+                    {t(
+                      "employeePlans.averagePlanImportance",
+                      "Average plan importance"
+                    )}
+                  </p>
+                </div>
+                <div className="p-3 bg-gradient-to-r from-green-100 to-green-200 rounded-xl">
+                  <Award className="h-8 w-8 text-primary-600" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="bg-gradient-to-br from-orange-50 to-white border-orange-200">
+            <CardContent className="p-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-orange-600 mb-1">
+                    {t("employeePlans.completionRate", "Completion Rate")}
+                  </p>
+                  <p className="text-3xl font-bold text-orange-900">
+                    {stats.total > 0
+                      ? Math.round((stats.completed / stats.total) * 100)
+                      : 0}
+                    %
+                  </p>
+                  <p className="text-xs text-orange-500 mt-2">
+                    {stats.completed} {t("employeePlans.of", "of")}{" "}
+                    {stats.total} {t("employeePlans.completed", "completed")}
+                  </p>
+                </div>
+                <div className="p-3 bg-gradient-to-r from-orange-100 to-orange-200 rounded-xl">
+                  <Star className="h-8 w-8 text-orange-600" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Filters and Search */}
+        <Card className="mb-8 border-0 shadow-lg">
+          <CardContent className="p-6">
+            <div className="grid grid-cols-1 lg:grid-cols-4 gap-4">
+              {/* Search */}
+              <div className="relative">
+                <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
+                <Input
+                  placeholder={t(
+                    "employeePlans.searchPlans",
+                    "Search plans..."
+                  )}
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="pl-9"
+                />
+              </div>
+
+              {/* Service Filter */}
+              <div>
+                <label className="text-sm font-medium text-gray-700 mb-1 block">
+                  {t("employeePlans.service", "Service")}
+                </label>
+                <select
+                  value={selectedService}
+                  onChange={(e) => setSelectedService(e.target.value)}
+                  className="w-full px-3 py-2 border border-gray-200 rounded-lg bg-white text-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
+                  <option value="all">
+                    {t("employeePlans.allServices", "All Services")}
+                  </option>
+                  {services.map((service) => (
+                    <option key={service.id} value={service.id}>
+                      {localizedName(service.name)}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {/* Status Filter */}
+              <div>
+                <label className="text-sm font-medium text-gray-700 mb-1 block">
+                  {t("employeePlans.status", "Status")}
+                </label>
+                <select
+                  value={statusFilter}
+                  onChange={(e) => setStatusFilter(e.target.value)}
+                  className="w-full px-3 py-2 border border-gray-200 rounded-lg bg-white text-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
+                  <option value="all">
+                    {t("employeePlans.allStatus", "All Status")}
+                  </option>
+                  <option value="draft">
+                    {t("employeePlans.draft", "Draft")}
+                  </option>
+                  <option value="pending">
+                    {t("employeePlans.pending", "Pending")}
+                  </option>
+                  <option value="accepted">
+                    {t("employeePlans.accepted", "Accepted")}
+                  </option>
+                  <option value="rejected">
+                    {t("employeePlans.rejected", "Rejected")}
+                  </option>
+                </select>
+              </div>
+
+              {/* Timeframe Filter */}
+              <div>
+                <label className="text-sm font-medium text-gray-700 mb-1 block">
+                  {t("employeePlans.timeframe", "Timeframe")}
+                </label>
+                <select
+                  value={timeframeFilter}
+                  onChange={(e) => setTimeframeFilter(e.target.value)}
+                  className="w-full px-3 py-2 border border-gray-200 rounded-lg bg-white text-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
+                  <option value="all">
+                    {t("employeePlans.allTimeframes", "All Timeframes")}
+                  </option>
+                  <option value="daily">
+                    {t("employeePlans.daily", "Daily")}
+                  </option>
+                  <option value="weekly">
+                    {t("employeePlans.weekly", "Weekly")}
+                  </option>
+                  <option value="monthly">
+                    {t("employeePlans.monthly", "Monthly")}
+                  </option>
+                  <option value="quarterly">
+                    {t("employeePlans.quarterly", "Quarterly")}
+                  </option>
+                  <option value="yearly">
+                    {t("employeePlans.yearly", "Yearly")}
+                  </option>
+                </select>
+              </div>
+            </div>
+
+            {/* Additional Filters */}
+            <div className="flex flex-wrap items-center justify-between gap-4 mt-6 pt-6 border-t">
+              <div className="flex items-center gap-4">
+                <div className="flex items-center gap-2">
+                  <input
+                    type="checkbox"
+                    id="showCompleted"
+                    checked={showCompleted}
+                    onChange={(e) => setShowCompleted(e.target.checked)}
+                    className="rounded border-gray-300 text-purple-600 focus:ring-purple-500"
+                  />
+                  <label
+                    htmlFor="showCompleted"
+                    className="text-sm text-gray-700">
+                    {t("employeePlans.showCompleted", "Show completed plans")}
+                  </label>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-4">
+                <div className="inline-flex rounded-lg border border-gray-200 p-1 bg-gray-50">
+                  <Button
+                    variant={viewType === "table" ? "default" : "ghost"}
+                    size="sm"
+                    onClick={() => setViewType("table")}
+                    className={`gap-2 ${
+                      viewType === "table"
+                        ? "bg-white shadow-sm"
+                        : "text-gray-600 hover:text-gray-900"
+                    }`}>
+                    <TableIcon className="h-4 w-4" />
+                    {t("employeePlans.table", "Table")}
+                  </Button>
+                  <Button
+                    variant={viewType === "grid" ? "default" : "ghost"}
+                    size="sm"
+                    onClick={() => setViewType("grid")}
+                    className={`gap-2 ${
+                      viewType === "grid"
+                        ? "bg-white shadow-sm"
+                        : "text-gray-600 hover:text-gray-900"
+                    }`}>
+                    <Grid3x3 className="h-4 w-4" />
+                    {t("employeePlans.grid", "Grid")}
+                  </Button>
+                </div>
+
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="outline" className="gap-2">
+                      <Download className="h-4 w-4" />
+                      {t("employeePlans.export", "Export")}
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent>
+                    <DropdownMenuItem onClick={handleExport}>
+                      {t("employeePlans.exportAsCsv", "Export as CSV")}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onClick={handleExport}>
+                      {t("employeePlans.exportAsPdf", "Export as PDF")}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onClick={handleExport}>
+                      {t("employeePlans.exportAsExcel", "Export as Excel")}
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Loading State */}
+        {isLoading ? (
+          <div className="flex flex-col items-center justify-center py-20">
+            <div className="relative">
+              <Loader2 className="h-16 w-16 animate-spin text-purple-600" />
+              <div className="absolute inset-0 flex items-center justify-center">
+                <Target className="h-8 w-8 text-purple-400" />
+              </div>
+            </div>
+            <p className="text-gray-600 mt-4 text-lg">
+              {t(
+                "employeePlans.loadingPlans",
+                "Loading your performance plans..."
+              )}
+            </p>
+            <p className="text-gray-500 text-sm mt-2">
+              {t(
+                "employeePlans.loadingMessage",
+                "Please wait while we fetch your data"
+              )}
+            </p>
+          </div>
+        ) : filteredPlans.length === 0 ? (
+          <Card className="border-dashed border-2 bg-gradient-to-br from-gray-50/50 to-white">
+            <CardContent className="pt-16 pb-16 text-center">
+              <div className="w-24 h-24 mx-auto mb-6 rounded-full bg-gradient-to-r from-purple-100 to-violet-100 flex items-center justify-center">
+                <Target className="h-12 w-12 text-purple-400" />
+              </div>
+              <h3 className="text-2xl font-bold text-gray-900 mb-3">
+                {t("employeePlans.noPlansFound", "No Plans Found")}
+              </h3>
+              <p className="text-gray-600 max-w-md mx-auto mb-8">
+                {searchTerm ||
+                selectedService !== "all" ||
+                statusFilter !== "all"
+                  ? t(
+                      "employeePlans.noPlansMessage",
+                      "No plans match your current filters. Try adjusting your search criteria."
+                    )
+                  : t(
+                      "employeePlans.noPlansInitial",
+                      "You haven't created any performance plans yet. Start by creating your first plan to track your goals."
+                    )}
+              </p>
+              <div className="flex gap-3 justify-center">
+                {/* <Button
+                  onClick={() => {
+                    navigate(
+                      `/performance-management/${yearId}/employee-plans/create`
+                    );
+                  }}
+                  className="bg-gradient-to-r from-purple-500 to-violet-600 hover:from-purple-600 hover:to-violet-700 text-white"
+                >
+                  <PlusIcon className="h-4 w-4 mr-2" />
+                  {t("employeePlans.createFirstPlan", "Create Your First Plan")}
+                </Button> */}
+                {(searchTerm ||
+                  selectedService !== "all" ||
+                  statusFilter !== "all") && (
+                  <Button
+                    variant="outline"
+                    onClick={() => {
+                      setSearchTerm("");
+                      setSelectedService("all");
+                      setStatusFilter("all");
+                      setTimeframeFilter("all");
+                    }}>
+                    {t("employeePlans.clearFilters", "Clear Filters")}
+                  </Button>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        ) : viewType === "table" ? (
+          <Card className="border-0 shadow-lg overflow-hidden">
+            <CardHeader className="bg-gradient-to-r from-gray-50 to-gray-100/50 border-b">
+              <div className="flex justify-between items-center">
+                <div>
+                  <CardTitle>
+                    {t("employeePlans.performancePlans", "Performance Plans")}
+                  </CardTitle>
+                  <CardDescription>
+                    {filteredPlans.length}{" "}
+                    {t("employeePlans.allPlans", "plans")} •{" "}
+                    {t("employeePlans.sortedBy", "Sorted by")} {sortBy} (
+                    {sortOrder})
+                  </CardDescription>
+                </div>
+                <div className="text-sm text-gray-500">
+                  {t("employeePlans.showing", "Showing")} {filteredPlans.length}{" "}
+                  {t("employeePlans.of", "of")} {employeePlans.length}{" "}
+                  {t("employeePlans.totalPlansText", "total plans")}
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent className="p-0">
+              <div className="overflow-x-auto">
+                <Table>
+                  <TableHeader>
+                    <TableRow className="bg-gray-50/50">
+                      <TableHead
+                        className="cursor-pointer hover:bg-gray-100 transition-colors"
+                        onClick={() => handleSort("name")}>
+                        <div className="flex items-center gap-1">
+                          {t("employeePlans.planName", "Plan Name")}
+                          {getSortIcon("name")}
+                        </div>
+                      </TableHead>
+                      {hasAnyService && (
+                        <TableHead>
+                          {t("employeePlans.service", "Service")}
+                        </TableHead>
+                      )}
+                      <TableHead
+                        className="cursor-pointer hover:bg-gray-100 transition-colors"
+                        onClick={() => handleSort("progress")}>
+                        <div className="flex items-center gap-1">
+                          {t("employeePlans.progress", "Progress")}
+                          {getSortIcon("progress")}
+                        </div>
+                      </TableHead>
+                      <TableHead
+                        className="cursor-pointer hover:bg-gray-100 transition-colors"
+                        onClick={() => handleSort("weight")}>
+                        <div className="flex items-center gap-1">
+                          {t("employeePlans.weight", "Weight")}
+                          {getSortIcon("weight")}
+                        </div>
+                      </TableHead>
+                      <TableHead>
+                        {t("employeePlans.timeframe", "Timeframe")}
+                      </TableHead>
+                      <TableHead>
+                        {t("employeePlans.statusLabel", "Status")}
+                      </TableHead>
+                      <TableHead
+                        className="cursor-pointer hover:bg-gray-100 transition-colors"
+                        onClick={() => handleSort("date")}>
+                        <div className="flex items-center gap-1">
+                          {t("employeePlans.created", "Created")}
+                          {getSortIcon("date")}
+                        </div>
+                      </TableHead>
+                      <TableHead
+                        className="cursor-pointer hover:bg-gray-100 transition-colors"
+                        onClick={() => handleSort("date")}>
+                        <div className="flex items-center gap-1">
+                          {t("employeePlans.planMonth", "Plan Month")}
+                        </div>
+                      </TableHead>
+                      <TableHead className="text-right">
+                        {t("employeePlans.actions", "Actions")}
+                      </TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {filteredPlans.map((plan: EmployeePlan) => {
+                      // const progress = calculateProgress(
+                      //   plan.initialGoal || 0,
+                      //   plan.expectedGoal || 1
+                      // );
+                      const progress = 0;
+
+                      return (
+                        <TableRow
+                          key={plan.id}
+                          className="hover:bg-purple-50/30 transition-colors cursor-pointer group"
+                          onClick={(e) => {
+                            // Prevent navigation if clicking on action buttons
+                            if (
+                              e.target instanceof HTMLElement &&
+                              (e.target.closest("button") ||
+                                e.target.closest('[role="menuitem"]') ||
+                                e.target.closest('[data-state="open"]'))
+                            ) {
+                              return;
+                            }
+                            handlePlanClick(plan.id, plan.month || 1, plan);
+                          }}>
+                          <TableCell>
+                            <div className="flex flex-col">
+                              <div className="flex items-center gap-2">
+                                <span className="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">
+                                  {localizedName(
+                                    plan?.plan?.name ||
+                                      plan?.name || {
+                                        en: "Unnamed Plan",
+                                        am: "Unnamed Plan",
+                                      }
+                                  )}
+                                </span>
+                                <ArrowUpRight className="h-3 w-3 text-gray-400 group-hover:text-purple-400 transition-colors" />
+                              </div>
+                              <span className="text-sm text-gray-500 truncate max-w-xs">
+                                {localizedName(
+                                  plan.description || {
+                                    en: "No description",
+                                    am: "No description",
+                                  }
+                                )}
+                              </span>
+                            </div>
+                          </TableCell>
+                          {hasAnyService && (
+                            <TableCell>
+                              {plan.service ? (
+                                <Badge
+                                  variant="outline"
+                                  className="bg-blue-50 text-blue-700 border-blue-200">
+                                  {localizedName(plan.service.name)}
+                                </Badge>
+                              ) : (
+                                <span className="text-gray-400">-</span>
+                              )}
+                            </TableCell>
+                          )}
+                          <TableCell>
+                            <div className="flex items-center gap-3">
+                              <TooltipProvider>
+                                <Tooltip>
+                                  <TooltipTrigger>
+                                    <div className="w-24">
+                                      {/* <div className="flex justify-between text-xs mb-1">
+                                        <span className="font-medium">
+                                          {plan.initialGoal || 0}
+                                        </span>
+                                        <span className="text-gray-500">
+                                          {plan.expectedGoal || 0}
+                                        </span>
+                                      </div> */}
+                                      <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
+                                        <div
+                                          className={`h-full rounded-full transition-all duration-500 ${getProgressColor(
+                                            progress
+                                          )}`}
+                                          style={{ width: `${progress}%` }}
+                                        />
+                                      </div>
+                                    </div>
+                                  </TooltipTrigger>
+                                  <TooltipContent>
+                                    <p>Progress: {progress.toFixed(1)}%</p>
+                                  </TooltipContent>
+                                </Tooltip>
+                              </TooltipProvider>
+                              <span className="text-sm font-medium text-gray-700 min-w-[40px]">
+                                {progress.toFixed(0)}%
+                              </span>
+                            </div>
+                          </TableCell>
+                          <TableCell>
+                            <Badge variant="outline" className="font-medium">
+                              {plan.weight || 0}%
+                            </Badge>
+                          </TableCell>
+                          <TableCell>
+                            {getTimeframeBadge(plan.timeframe)}
+                          </TableCell>
+                          <TableCell>
+                            {getStatusBadge(plan.status || "draft")}
+                          </TableCell>
+                          <TableCell>
+                            <div className="flex flex-col">
+                              <span className="text-sm text-gray-700">
+                                {formatDate(plan.createdAt)}
+                              </span>
+                              <span className="text-xs text-gray-500">
+                                {plan.updatedAt &&
+                                  `${t(
+                                    "employeePlans.updated",
+                                    "Updated"
+                                  )}: ${formatDate(plan.updatedAt)}`}
+                              </span>
+                            </div>
+                          </TableCell>
+                          <TableCell>
+                            <div className="flex flex-col">
+                              <span className="text-sm text-gray-700">
+                                {formatDate(plan.amharicStartDate)}
+                              </span>
+                              <span className="text-xs text-gray-500">
+                                {plan.amharicEndDate &&
+                                  `${t(
+                                    "employeePlans.endDate",
+                                    "End Date"
+                                  )}: ${formatDate(plan.amharicEndDate)}`}
+                              </span>
+                            </div>
+                          </TableCell>
+                          <TableCell className="text-right">
+                            <div className="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                              <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={(e) => handleEdit(plan.id, e)}
+                                className="h-8 w-8 p-0 text-blue-600 hover:text-blue-700 hover:bg-blue-50">
+                                <Pencil className="h-3.5 w-3.5" />
+                              </Button>
+                              <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={(e) => handleDeleteClick(plan.id, e)}
+                                disabled={deletingId === plan.id}
+                                className="h-8 w-8 p-0 text-red-600 hover:text-red-700 hover:bg-red-50">
+                                {deletingId === plan.id ? (
+                                  <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                                ) : (
+                                  <Trash2 className="h-3.5 w-3.5" />
+                                )}
+                              </Button>
+                              <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                  <Button
+                                    variant="outline"
+                                    size="sm"
+                                    className="h-8 w-8 p-0">
+                                    <MoreVertical className="h-3.5 w-3.5" />
+                                  </Button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent align="end">
+                                  <DropdownMenuLabel>
+                                    {t("employeePlans.actions", "Actions")}
+                                  </DropdownMenuLabel>
+                                  <DropdownMenuItem
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      handleEdit(plan.id, e);
+                                    }}>
+                                    <Pencil className="h-4 w-4 mr-2" />
+                                    {t("employeePlans.editPlan", "Edit Plan")}
+                                  </DropdownMenuItem>
+                                  <DropdownMenuItem
+                                    onClick={(e) => {
+                                      e.stopPropagation();
+                                      handlePlanClick(
+                                        plan.id,
+                                        plan.month || 1,
+                                        plan
+                                      );
+                                    }}>
+                                    <Eye className="h-4 w-4 mr-2" />
+                                    {t(
+                                      "employeePlans.viewDetails",
+                                      "View Details"
+                                    )}
+                                  </DropdownMenuItem>
+                                  <DropdownMenuSeparator />
+                                  <DropdownMenuItem
+                                    onClick={(e) =>
+                                      handleDeleteClick(plan.id, e)
+                                    }
+                                    className="text-red-600">
+                                    <Trash2 className="h-4 w-4 mr-2" />
+                                    {t(
+                                      "employeePlans.deletePlanAction",
+                                      "Delete Plan"
+                                    )}
+                                  </DropdownMenuItem>
+                                </DropdownMenuContent>
+                              </DropdownMenu>
+                            </div>
+                          </TableCell>
+                        </TableRow>
+                      );
+                    })}
+                  </TableBody>
+                </Table>
+              </div>
+            </CardContent>
+          </Card>
+        ) : (
+          // Grid View
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {filteredPlans.map((plan: EmployeePlan) => {
+              // const progress = calculateProgress(
+              //   plan.initialGoal || 0,
+              //   plan.expectedGoal || 1
+              // );
+              const progress = 0;
+
+              console.log("plans sdfsd f", plan);
+
+              return (
+                <Card
+                  key={plan.id}
+                  className="hover:shadow-xl transition-all duration-300 border hover:border-purple-300 cursor-pointer hover:scale-[1.02] group"
+                  onClick={(e) => {
+                    // Prevent navigation if clicking on action buttons
+                    if (
+                      e.target instanceof HTMLElement &&
+                      (e.target.closest("button") ||
+                        e.target.closest('[role="menuitem"]'))
+                    ) {
+                      return;
+                    }
+                    handlePlanClick(plan.id, plan.month || 1, plan);
+                  }}>
+                  <CardHeader className="pb-4">
+                    <div className="flex justify-between items-start">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-2">
+                          <div className="p-2 bg-gradient-to-r from-purple-100 to-violet-100 rounded-lg">
+                            {getPlanTypeIcon(plan.planType || "number")}
+                          </div>
+                          <CardTitle className="text-lg text-gray-900 line-clamp-1 group-hover:text-purple-600 transition-colors">
+                            {localizedName(
+                              plan?.plan?.name ||
+                                plan?.name || {
+                                  en: "Unnamed Plan",
+                                  am: "Unnamed Plan",
+                                }
+                            )}
+                          </CardTitle>
+                        </div>
+                        <CardDescription className="line-clamp-2">
+                          {localizedName(
+                            plan.description || {
+                              en: "No description",
+                              am: "No description",
+                            }
+                          )}
+                        </CardDescription>
+                      </div>
+                      <div className="flex flex-col items-end gap-2">
+                        {getTimeframeBadge(plan.timeframe)}
+                        {getStatusBadge(plan.status || "draft")}
+                      </div>
+                    </div>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="space-y-5">
+                      {/* Progress Bar */}
+                      <div>
+                        <div className="flex justify-between items-center mb-2">
+                          <span className="text-sm font-medium text-gray-700">
+                            {t("employeePlans.progress", "Progress")}
+                          </span>
+                          <span className="text-lg font-bold text-gray-900">
+                            {progress.toFixed(0)}%
+                          </span>
+                        </div>
+                        <div className="h-3 bg-gray-200 rounded-full overflow-hidden">
+                          <div
+                            className={`h-full rounded-full transition-all duration-1000 ${getProgressColor(
+                              progress
+                            )}`}
+                            style={{ width: `${progress}%` }}
+                          />
+                        </div>
+                        {/* <div className="flex justify-between text-sm text-gray-500 mt-1">
+                          <span>{plan.initialGoal || 0}</span>
+                          <span>{plan.expectedGoal || 0}</span>
+                        </div> */}
+                      </div>
+
+                      {/* Stats Grid */}
+                      <div className="grid grid-cols-2 gap-4">
+                        <div className="bg-gradient-to-br from-blue-50 to-blue-100/50 p-3 rounded-lg">
+                          <p className="text-xs text-blue-600 font-medium mb-1">
+                            {t("employeePlans.weight", "Weight")}
+                          </p>
+                          <p className="text-xl font-bold text-blue-900">
+                            {plan.weight || 0}%
+                          </p>
+                        </div>
+                        <div className="bg-gradient-to-br from-green-50 to-green-100/50 p-3 rounded-lg">
+                          <p className="text-xs text-primary-600 font-medium mb-1">
+                            {t("employeePlans.type", "Type")}
+                          </p>
+                          <div className="flex items-center gap-1">
+                            {getPlanTypeIcon(plan.planType || "number")}
+                            <span className="text-lg font-bold text-green-900 capitalize">
+                              {plan.planType || "number"}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* Service and Dates */}
+                      <div className="space-y-3">
+                        <div>
+                          <p className="text-xs text-gray-500 mb-1">
+                            {t("employeePlans.service", "Service")}
+                          </p>
+                          <p className="text-sm font-medium text-gray-900">
+                            {plan.service?.name
+                              ? localizedName(plan.service.name)
+                              : "N/A"}
+                          </p>
+                        </div>
+                        <div className="space-y-2">
+                          <p className="text-xs text-gray-500">
+                            {t("employeePlans.period", "Period")}
+                          </p>
+                          <div className="flex items-center justify-between text-sm">
+                            <div className="flex items-center gap-1">
+                              <Calendar className="h-3 w-3 text-gray-400" />
+                              <span className="text-gray-700 font-medium">
+                                {formatDate(plan.startDate)}
+                              </span>
+                            </div>
+                            <span className="text-gray-300 mx-2">→</span>
+                            <div className="flex items-center gap-1">
+                              <Calendar className="h-3 w-3 text-gray-400" />
+                              <span className="text-gray-700 font-medium">
+                                {formatDate(plan.endDate)}
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* Action Buttons */}
+                      <div
+                        className="pt-4 border-t"
+                        onClick={(e) => e.stopPropagation()}>
+                        <div className="flex justify-between items-center">
+                          <TooltipProvider>
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <span className="text-xs text-gray-500">
+                                  {t("employeePlans.created", "Created")}:{" "}
+                                  {formatDate(plan.createdAt)}
+                                </span>
+                              </TooltipTrigger>
+                              <TooltipContent>
+                                <p>
+                                  {t(
+                                    "employeePlans.clickToViewDetails",
+                                    "Click to view details"
+                                  )}
+                                </p>
+                              </TooltipContent>
+                            </Tooltip>
+                          </TooltipProvider>
+                          <div className="flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              onClick={(e) => handleEdit(plan.id, e)}
+                              className="h-8 px-3 text-blue-600 border-blue-200 hover:bg-blue-50">
+                              <Pencil className="h-3.5 w-3.5" />
+                            </Button>
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              onClick={(e) => handleDeleteClick(plan.id, e)}
+                              disabled={deletingId === plan.id}
+                              className="h-8 px-3 text-red-600 border-red-200 hover:bg-red-50">
+                              {deletingId === plan.id ? (
+                                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                              ) : (
+                                <Trash2 className="h-3.5 w-3.5" />
+                              )}
+                            </Button>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              );
+            })}
+          </div>
+        )}
+
+        {/* Pagination and Summary */}
+        {filteredPlans.length > 0 && (
+          <div className="mt-8 flex flex-col sm:flex-row justify-between items-center gap-4">
+            <div className="text-sm text-gray-600">
+              {t("employeePlans.showing", "Showing")}{" "}
+              <span className="font-semibold">{filteredPlans.length}</span>{" "}
+              {t("employeePlans.of", "of")}{" "}
+              <span className="font-semibold">{employeePlans.length}</span>{" "}
+              {t("employeePlans.allPlans", "plans")}
+            </div>
+            <div className="flex items-center gap-4">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => refetch()}
+                className="gap-2">
+                <RefreshCw className="h-4 w-4" />
+                {t("employeePlans.refreshData", "Refresh Data")}
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Delete Confirmation Dialog */}
+        <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+          <AlertDialogContent className="max-w-md">
+            <AlertDialogHeader>
+              <div className="flex items-center gap-3 mb-2">
+                <div className="p-2 bg-gradient-to-r from-red-100 to-rose-100 rounded-lg">
+                  <Trash2 className="h-6 w-6 text-red-600" />
+                </div>
+                <AlertDialogTitle className="text-red-700">
+                  {t(
+                    "employeePlans.deletePerformancePlan",
+                    "Delete Performance Plan"
+                  )}
+                </AlertDialogTitle>
+              </div>
+              <AlertDialogDescription className="text-gray-600">
+                {t(
+                  "employeePlans.deletePerformancePlanMessage",
+                  "Are you sure you want to delete this performance plan? This action cannot be undone and will permanently remove all associated data."
+                )}
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel className="border-gray-300 hover:bg-gray-50">
+                {t("employeePlans.cancel", "Cancel")}
+              </AlertDialogCancel>
+              <AlertDialogAction
+                onClick={confirmDelete}
+                className="bg-gradient-to-r from-red-500 to-rose-600 hover:from-red-600 hover:to-rose-700 text-white">
+                {deletingId ? (
+                  <>
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    {t("employeePlans.deleting", "Deleting...")}
+                  </>
+                ) : (
+                  <>
+                    <Trash2 className="h-4 w-4 mr-2" />
+                    {t("employeePlans.deletePlan", "Delete Plan")}
+                  </>
+                )}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
+    </div>
+  );
+};
+
+export default EmployeePlanListPage;
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/EmployeePlan/MyTeamPanel.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/EmployeePlan/MyTeamPanel.tsx
new file mode 100644
index 000000000..6dcf25ecb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/EmployeePlan/MyTeamPanel.tsx
@@ -0,0 +1,203 @@
+import { Users, AlertTriangle, CheckCircle2 } from "lucide-react";
+import { useQueries, useQuery } from "@tanstack/react-query";
+import {
+  getChildPositions,
+  getEmployeesUnderPosition,
+} from "@/user-management/services/api/positionService";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useAuth } from "@/shared/context/AuthContext";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import { Avatar, AvatarFallback } from "@/shared/common/ui/avatar";
+import { Badge } from "@/shared/common/ui/badge";
+import type { PositionDto } from "@/user-management/dto/positions/positionDto";
+
+/**
+ * Direct reports of the currently-active position.
+ *
+ * 1. GET /positions/children/:myPositionId → direct child positions
+ *    (each item has parentPositionId === myPositionId)
+ * 2. For each child position, GET /positions/current/:childPositionId/employees
+ *    → employees holding that position
+ *
+ * This bypasses the buggy /employees/immediate-child endpoint which was
+ * returning peers (rows sharing the same position_id) instead of children.
+ */
+export const MyTeamPanel = () => {
+  const { user, selectedPositionId } = useAuth();
+  const localizedName = useLocalizedName();
+
+  // Resolve the active position so we can use its `id` (not employeePositionId).
+  const allPositions =
+    user?.employee?.flatMap((emp) => emp.positions ?? []) ?? [];
+  const activePosition =
+    allPositions.find(
+      (p) =>
+        p.employeePositionId === selectedPositionId ||
+        p.id === selectedPositionId,
+    ) ?? allPositions[0];
+  const myPositionId = activePosition?.id;
+
+  const {
+    data: childrenResp,
+    isLoading: childrenLoading,
+    error: childrenError,
+  } = useQuery({
+    queryKey: ["positionChildren", myPositionId],
+    queryFn: () => getChildPositions(myPositionId!),
+    enabled: !!myPositionId,
+  });
+
+  const childPositions: PositionDto[] = childrenResp?.data?.items ?? [];
+
+  // Fetch employees per direct-child position in parallel.
+  const employeeQueries = useQueries({
+    queries: childPositions.map((cp) => ({
+      queryKey: ["positionEmployees", cp.id],
+      queryFn: () => getEmployeesUnderPosition(cp.id),
+      enabled: !!cp.id,
+    })),
+  });
+
+  if (childrenLoading) {
+    return <Skeleton className="h-32 w-full rounded-xl mb-6" />;
+  }
+
+  if (childrenError) {
+    return (
+      <Card className="mb-6 border-red-200 bg-red-50">
+        <CardContent className="p-4 text-sm text-red-700">
+          Failed to load child positions:{" "}
+          {(childrenError as Error).message}
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const totalEmployees = employeeQueries.reduce(
+    (sum, q) => sum + ((q.data?.data?.items?.length ?? q.data?.data?.length) || 0),
+    0,
+  );
+
+  return (
+    <Card className="mb-6">
+      <CardHeader className="pb-3">
+        <CardTitle className="flex items-center gap-2 text-base">
+          <Users className="h-5 w-5" />
+          My Team
+          <Badge variant="secondary" className="ml-1">
+            {totalEmployees}
+          </Badge>
+        </CardTitle>
+
+        <div className="flex flex-wrap gap-2 text-xs mt-2 text-gray-500">
+          <span>
+            Acting as position id: <code>{myPositionId ?? "—"}</code>
+          </span>
+          <span>·</span>
+          <span>
+            {childPositions.length} direct child position
+            {childPositions.length === 1 ? "" : "s"}
+          </span>
+        </div>
+      </CardHeader>
+
+      <CardContent>
+        {childPositions.length === 0 ? (
+          <p className="text-sm text-gray-500">
+            No child positions exist under your current position.
+          </p>
+        ) : (
+          <div className="space-y-4">
+            {childPositions.map((cp, idx) => {
+              const empQuery = employeeQueries[idx];
+              const employeesRaw =
+                empQuery?.data?.data?.items ?? empQuery?.data?.data ?? [];
+              const employees = Array.isArray(employeesRaw) ? employeesRaw : [];
+
+              // Sanity-check: every returned position should have
+              // parentPositionId === myPositionId. Anything else is suspicious.
+              const isCorrectChild = cp.parentPositionId === myPositionId;
+
+              return (
+                <div
+                  key={cp.id}
+                  className={`rounded-xl border p-3 ${
+                    isCorrectChild
+                      ? "bg-white"
+                      : "bg-amber-50 border-amber-200"
+                  }`}
+                >
+                  <div className="flex items-center gap-2 mb-3">
+                    <Badge variant="outline">
+                      {localizedName(cp.name) || cp.key}
+                    </Badge>
+                    {!isCorrectChild && (
+                      <span
+                        className="inline-flex items-center gap-1 text-xs text-amber-700"
+                        title={`Expected parentPositionId=${myPositionId}, got ${cp.parentPositionId}`}
+                      >
+                        <AlertTriangle className="h-3 w-3" /> wrong parent
+                      </span>
+                    )}
+                    <span className="text-xs text-gray-500 ml-auto">
+                      {empQuery?.isLoading
+                        ? "loading…"
+                        : `${employees.length} employee${employees.length === 1 ? "" : "s"}`}
+                    </span>
+                  </div>
+
+                  {empQuery?.error ? (
+                    <p className="text-xs text-red-600">
+                      Failed to load employees for this position
+                    </p>
+                  ) : employees.length === 0 && !empQuery?.isLoading ? (
+                    <p className="text-xs text-gray-500">
+                      No employees currently hold this position.
+                    </p>
+                  ) : (
+                    <ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
+                      {employees.map((emp: any) => {
+                        const name = localizedName(emp.name);
+                        const initials = name
+                          ?.split(" ")
+                          .map((s: string) => s[0])
+                          .filter(Boolean)
+                          .slice(0, 2)
+                          .join("")
+                          .toUpperCase();
+                        return (
+                          <li
+                            key={emp.id}
+                            className="flex items-center gap-2 rounded-lg border bg-white p-2 shadow-sm"
+                          >
+                            <Avatar className="h-8 w-8">
+                              <AvatarFallback>
+                                {initials || "?"}
+                              </AvatarFallback>
+                            </Avatar>
+                            <div className="min-w-0">
+                              <p className="font-medium truncate text-xs">
+                                {name}
+                              </p>
+                            </div>
+                            <CheckCircle2 className="h-3 w-3 text-green-500 ml-auto" />
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/EmployeePlan/WeeklyEmployeePlanPage.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/EmployeePlan/WeeklyEmployeePlanPage.tsx
new file mode 100644
index 000000000..b36e32f12
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/EmployeePlan/WeeklyEmployeePlanPage.tsx
@@ -0,0 +1,693 @@
+import { useState, useEffect } from "react";
+import { useNavigate, useLocation, useParams } from "react-router-dom";
+import { useQueryClient } from "@tanstack/react-query";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Loader2,
+  Target,
+  Hash,
+  Percent,
+  ArrowLeft,
+  Save,
+  Check,
+  CalendarDays,
+  Grid,
+  List,
+} from "lucide-react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/common/ui/table";
+import { useToast } from "@/shared/common/ui/use-toast";
+
+import { Badge } from "@/shared/common/ui/badge";
+import {
+  ExtendedEmployeePlanDto,
+  useEmployeePlanMutations,
+  useSubEmployeePlanByPlanId,
+} from "@/performance-management/hooks/useEmployeePlan";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { useTranslation } from "react-i18next";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import { Tabs, TabsList, TabsTrigger } from "@/shared/common/ui/tabs";
+import { Label } from "@/shared/common/ui/label";
+import { Input } from "@/shared/common/ui/input";
+import { cn } from "@/shared/lib/utils";
+
+// Interface for the data passed via navigation state
+interface NavigationStateData {
+  parentEmployeePlanId: string;
+  employeePositionId: string;
+  planId: string;
+  serviceId: string;
+  planType: "number" | "percent" | string;
+  currentQuantity: number;
+  expectedQuantity: number;
+  month: number;
+  timeframe: string;
+  planName: string;
+  serviceName: string;
+  weight: number;
+  status: string;
+}
+
+// Week data interface
+interface WeekData {
+  weekNumber: number;
+  planned: number;
+  employeePlanId: string | null;
+}
+
+const WeeklyPlanAssignmentPage = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { t } = useTranslation();
+  const { yearId, monthId } = useParams();
+
+  const { toast } = useToast();
+  const { handleError } = useErrorHandler(t);
+  const [activeTab, setActiveTab] = useState<"table" | "calendar">("table");
+  const [isLoadingExistingPlans, setIsLoadingExistingPlans] = useState(false);
+  const queryClient = useQueryClient();
+  const { create, update } = useEmployeePlanMutations();
+
+  // Get data from navigation state
+  const navigationState = location.state as NavigationStateData;
+
+  // Destructure all necessary data from navigation state
+  const {
+    parentEmployeePlanId,
+    employeePositionId,
+    planId,
+    serviceId,
+    planType: initialPlanType,
+    expectedQuantity,
+    planName,
+    serviceName,
+    status,
+    month: monthFromPlan,
+  } = navigationState;
+
+  // Get month from URL param or plan data
+  const monthFromUrl = monthId ? parseInt(monthId) : monthFromPlan;
+
+  const [weeks, setWeeks] = useState<WeekData[]>([
+    { weekNumber: 1, planned: 0, employeePlanId: null },
+    { weekNumber: 2, planned: 0, employeePlanId: null },
+    { weekNumber: 3, planned: 0, employeePlanId: null },
+    { weekNumber: 4, planned: 0, employeePlanId: null },
+  ]);
+
+  const [selectedPlanType, setSelectedPlanType] = useState<
+    "number" | "percent"
+  >(initialPlanType === "percent" ? "percent" : "number");
+
+  const [isSaving, setIsSaving] = useState(false);
+
+  const { data: existingPlanData, isLoading: isPlanLoading } =
+    useSubEmployeePlanByPlanId(navigationState.parentEmployeePlanId);
+
+  // Fetch existing weekly plans for this month.
+  // API shape:
+  //   { "<monthNumber>": { "week_1": { id, quantity }, "week_2": { id, quantity }, ... } }
+  useEffect(() => {
+    if (!existingPlanData?.data || !monthFromUrl) return;
+
+    const monthData = existingPlanData.data[monthFromUrl.toString()];
+    if (!monthData) return;
+
+    // Build the weeks list dynamically so we render all weeks the API knows
+    // about (some months have 5 weeks, others 4).
+    const weekEntries = Object.keys(monthData)
+      .filter((k) => k.startsWith("week_"))
+      .map((k) => {
+        const weekNumber = parseInt(k.replace("week_", ""), 10);
+        const cell = monthData[k] as
+          | { id: string | null; quantity: number }
+          | number
+          | null
+          | undefined;
+
+        // Defensive: handle both the new shape ({ id, quantity }) and any
+        // legacy shape that may have returned a bare number.
+        if (cell && typeof cell === "object") {
+          return {
+            weekNumber,
+            planned: Number(cell.quantity) || 0,
+            employeePlanId: cell.id ?? null,
+          };
+        }
+        return {
+          weekNumber,
+          planned: typeof cell === "number" ? cell : 0,
+          employeePlanId: null,
+        };
+      })
+      .sort((a, b) => a.weekNumber - b.weekNumber);
+
+    if (weekEntries.length > 0) {
+      setWeeks(weekEntries);
+    }
+  }, [existingPlanData, monthFromUrl]);
+
+  // Sync loading state
+  useEffect(() => {
+    setIsLoadingExistingPlans(isPlanLoading);
+  }, [isPlanLoading]);
+
+  // Calculate total planned
+  const totalPlanned = weeks.reduce((sum, week) => sum + week.planned, 0);
+
+  // Update a week's value in local state
+  const updateWeekValue = (weekNumber: number, value: string) => {
+    const newValue = parseInt(value) || 0;
+    setWeeks((prevWeeks) =>
+      prevWeeks.map((w) =>
+        w.weekNumber === weekNumber ? { ...w, planned: newValue } : w,
+      ),
+    );
+  };
+
+  // Quick set helper
+  const quickSetForAllWeeks = (value: number) => {
+    setWeeks((prevWeeks) => prevWeeks.map((w) => ({ ...w, planned: value })));
+  };
+
+  // Save all changes
+  const handleSaveAll = async () => {
+    if (!planId || !monthFromUrl) return;
+
+    // Check if plan is already accepted
+    if (status === "accepted") {
+      toast({
+        title: t("plans.planAlreadyAccepted", "Plan Already Accepted"),
+        description: t(
+          "plans.cannotEditAcceptedPlan",
+          "This plan has already been accepted and cannot be edited. Please contact your administrator if you need to make changes.",
+        ),
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      // Run sequentially so each create's returned id can be threaded into the
+      // next iteration's local state — prevents a duplicate-key error on a
+      // second save attempt where the previous create succeeded but the local
+      // state still shows employeePlanId = null.
+      for (const week of weeks) {
+        const employeePlanData: ExtendedEmployeePlanDto = {
+          employeePositionId,
+          planId,
+          serviceId,
+          planType: selectedPlanType === "number" ? "number" : selectedPlanType,
+          expectedQuantity: week.planned,
+          timeframe: "weekly",
+          week: week.weekNumber,
+          month: monthFromUrl,
+          parentEmployeePlanId,
+        };
+
+        try {
+          if (week.employeePlanId) {
+            await update.mutateAsync({
+              ...employeePlanData,
+              id: week.employeePlanId,
+            });
+          } else {
+            const response = await create.mutateAsync(employeePlanData);
+            const newId =
+              (response as any)?.data?.id ?? (response as any)?.id;
+            if (newId) {
+              // Persist the new id so subsequent saves PUT instead of POST.
+              setWeeks((prev) =>
+                prev.map((w) =>
+                  w.weekNumber === week.weekNumber
+                    ? { ...w, employeePlanId: newId }
+                    : w,
+                ),
+              );
+              week.employeePlanId = newId;
+            }
+          }
+        } catch (err: any) {
+          // 400 with duplicate-key constraint → the row already exists in the
+          // DB even though our local state didn't have its id. Refetch and
+          // bail out of this iteration; the user can re-save and the latest
+          // ids will be in state.
+          const message: string =
+            err?.response?.data?.message ?? err?.message ?? "";
+          const isDuplicate =
+            err?.response?.status === 400 &&
+            (message.toLowerCase().includes("duplicate") ||
+              err?.response?.data?.exception?.driverError?.code === "23505");
+          if (isDuplicate) {
+            await queryClient.invalidateQueries({
+              queryKey: ["employee-plans", planId],
+            });
+            throw new Error(
+              "This week already has a saved plan. Refreshing — please try save again.",
+            );
+          }
+          throw err;
+        }
+      }
+
+      queryClient.invalidateQueries({
+        queryKey: ["employee-plans", planId],
+      });
+
+      toast({
+        title: "Success",
+        description: "All weekly targets have been saved successfully.",
+      });
+    } catch (error) {
+      console.error("Failed to save plans:", error);
+      handleError(error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  // Get month name
+  const getMonthName = (monthNum: number): string => {
+    const monthNames = [
+      "September",
+      "October",
+      "November",
+      "December",
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+    ];
+    return monthNames[monthNum - 1] || `Month ${monthNum}`;
+  };
+
+  if (!navigationState) {
+    return (
+      <div className="p-6">
+        <Card className="border-red-200 bg-red-50">
+          <CardContent className="pt-6 text-center">
+            <h3 className="text-lg font-semibold text-red-700">
+              Missing Plan Data
+            </h3>
+            <p className="text-red-600 mt-2">
+              Please go back and select a plan to continue.
+            </p>
+            <Button
+              onClick={() =>
+                navigate(`/performance-management/${yearId}/employee-plans`)
+              }
+              className="mt-4"
+            >
+              <ArrowLeft className="h-4 w-4 mr-2" /> Back to Plans
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center gap-4">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() =>
+              navigate(`/performance-management/${yearId}/employee-plans`)
+            }
+          >
+            <ArrowLeft className="h-4 w-4 mr-2" /> Back to Plans
+          </Button>
+          <div>
+            <h1 className="text-2xl font-bold text-gray-900">
+              Weekly Plan Assignment - {planName}
+            </h1>
+            <p className="text-gray-600 mt-1">
+              Set weekly targets for {getMonthName(monthFromUrl)} (4 weeks)
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          <Button
+            onClick={handleSaveAll}
+            disabled={
+              isSaving ||
+              create.isPending ||
+              update.isPending ||
+              status === "accepted"
+            }
+            className="bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white shadow-lg"
+          >
+            {isSaving ? (
+              <>
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                Saving...
+              </>
+            ) : (
+              <>
+                <Save className="h-4 w-4 mr-2" />
+                Save Changes
+              </>
+            )}
+          </Button>
+        </div>
+      </div>
+
+      {/* Alert for Accepted Plans */}
+      {status === "accepted" && (
+        <Card className="mb-6 border-red-200 bg-red-50">
+          <CardContent className="pt-6">
+            <div className="flex items-start gap-4">
+              <div className="text-red-600 mt-0.5">
+                <svg
+                  className="h-5 w-5"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              </div>
+              <div className="flex-1">
+                <h3 className="font-semibold text-red-900">
+                  {t("plans.planAlreadyAccepted", "Plan Already Accepted")}
+                </h3>
+                <p className="text-red-700 text-sm mt-1">
+                  {t(
+                    "plans.cannotEditAcceptedPlan",
+                    "This plan has already been accepted and cannot be edited. Please contact your administrator if you need to make changes.",
+                  )}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Summary Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+        {[
+          {
+            title: "Service",
+            value: serviceName,
+            icon: Target,
+            color: "blue",
+          },
+          {
+            title: "Monthly Target",
+            value: expectedQuantity,
+            icon: selectedPlanType === "number" ? Hash : Percent,
+            color: "green",
+            subtitle: selectedPlanType === "number" ? "Number" : "Number",
+          },
+          {
+            title: "Current Total",
+            value: totalPlanned,
+            icon: Target,
+            color: "purple",
+          },
+          {
+            title: "Month",
+            value: getMonthName(monthFromUrl),
+            icon: CalendarDays,
+            color: "red",
+            subtitle: `${weeks.length} weeks`,
+          },
+        ].map((card, idx) => (
+          <Card key={idx}>
+            <CardContent className="pt-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-gray-600">
+                    {card.title}
+                  </p>
+                  <p className="text-2xl font-bold">{card.value}</p>
+                  {card.subtitle && (
+                    <p className="text-xs text-gray-500 mt-1">
+                      {card.subtitle}
+                    </p>
+                  )}
+                </div>
+                <div className={`p-2 bg-${card.color}-100 rounded-lg`}>
+                  <card.icon className={`h-6 w-6 text-${card.color}-600`} />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {/* View Toggle */}
+      <Card className="mb-6">
+        <CardContent className="pt-6">
+          <div className="flex flex-col space-y-4">
+            <Tabs
+              value={activeTab}
+              onValueChange={(v: string) =>
+                setActiveTab(v as "table" | "calendar")
+              }
+            >
+              <TabsList className="grid w-full max-w-md grid-cols-2">
+                <TabsTrigger value="table" className="flex items-center gap-2">
+                  <List className="h-4 w-4" /> Table View
+                </TabsTrigger>
+                <TabsTrigger
+                  value="calendar"
+                  className="flex items-center gap-2"
+                >
+                  <Grid className="h-4 w-4" /> Calendar View
+                </TabsTrigger>
+              </TabsList>
+            </Tabs>
+
+            {/* Plan Type Selection */}
+            <div className="flex items-center gap-4">
+              <div>
+                <Label>Plan Type</Label>
+                <div className="flex gap-2 mt-1">
+                  <Button
+                    variant={
+                      selectedPlanType === "number" ? "default" : "outline"
+                    }
+                    size="sm"
+                    onClick={() => setSelectedPlanType("number")}
+                    className="gap-2"
+                  >
+                    <Hash className="h-4 w-4" /> Number
+                  </Button>
+                  <Button
+                    variant={
+                      selectedPlanType === "number" ? "default" : "outline"
+                    }
+                    size="sm"
+                    onClick={() => setSelectedPlanType("number")}
+                    className="gap-2"
+                  >
+                    <Percent className="h-4 w-4" /> Percent
+                  </Button>
+                </div>
+              </div>
+              <div className="ml-auto">
+                <div className="flex gap-2 items-center">
+                  <p className="text-sm text-gray-500 mr-2">Quick Set:</p>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => quickSetForAllWeeks(10)}
+                  >
+                    10
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => quickSetForAllWeeks(25)}
+                  >
+                    25
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => quickSetForAllWeeks(50)}
+                  >
+                    50
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => quickSetForAllWeeks(0)}
+                  >
+                    Clear
+                  </Button>
+                </div>
+              </div>
+            </div>
+
+            {/* Month Info */}
+            <div className="mt-4 p-4 bg-gray-50 rounded-lg">
+              <div className="flex items-center justify-between">
+                <div>
+                  <h4 className="font-semibold text-gray-900">
+                    {getMonthName(monthFromUrl)} Weekly Planning
+                  </h4>
+                  <p className="text-sm text-gray-600">
+                    Set weekly targets below. Don't forget to save your changes.
+                  </p>
+                </div>
+                <Badge
+                  variant={status === "accepted" ? "default" : "secondary"}
+                >
+                  Status: {status}
+                </Badge>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Loading State */}
+      {isLoadingExistingPlans ? (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="h-8 w-8 animate-spin text-purple-600" />
+          <span className="ml-2 text-gray-600">
+            Loading existing weekly plans...
+          </span>
+        </div>
+      ) : activeTab === "table" ? (
+        <Card className="overflow-hidden">
+          <CardHeader>
+            <div className="flex justify-between items-center">
+              <div>
+                <CardTitle>
+                  Weekly Targets for {getMonthName(monthFromUrl)}
+                </CardTitle>
+                <CardDescription>
+                  Enter targets for each week directly in the input fields.
+                </CardDescription>
+              </div>
+              <div className="flex items-center gap-2">
+                <Badge variant="outline" className="font-medium">
+                  {selectedPlanType === "number" ? "Units" : "Percent"}
+                </Badge>
+                <Badge className="bg-blue-100 text-blue-800 border-blue-200">
+                  Total Planned: {totalPlanned}
+                </Badge>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-[250px]">Week</TableHead>
+                  <TableHead className="text-center">Week 1</TableHead>
+                  <TableHead className="text-center">Week 2</TableHead>
+                  <TableHead className="text-center">Week 3</TableHead>
+                  <TableHead className="text-center">Week 4</TableHead>
+                  <TableHead className="text-right">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                <TableRow className="hover:bg-gray-50">
+                  <TableCell>
+                    <div className="flex items-center gap-3">
+                      <div className="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
+                        <span className="text-purple-600 font-medium">M</span>
+                      </div>
+                      <div>
+                        <p className="font-medium text-gray-900">
+                          My Weekly Targets
+                        </p>
+                        <p className="text-sm text-gray-500">
+                          Month {monthFromUrl}
+                        </p>
+                      </div>
+                    </div>
+                  </TableCell>
+
+                  {/* Weekly Cells */}
+                  {weeks.map((week) => (
+                    <TableCell
+                      key={week.weekNumber}
+                      className="text-center p-2"
+                    >
+                      <Input
+                        type="number"
+                        min="0"
+                        value={week.planned || ""}
+                        onChange={(e) =>
+                          updateWeekValue(week.weekNumber, e.target.value)
+                        }
+                        className={cn(
+                          "h-10 w-24 text-center mx-auto transition-all",
+                          week.planned > 0
+                            ? "border-purple-300 bg-purple-50 font-semibold text-purple-900"
+                            : "border-gray-200 text-gray-500",
+                        )}
+                      />
+                    </TableCell>
+                  ))}
+
+                  <TableCell className="text-right">
+                    <div className="flex items-center justify-end gap-2 text-sm text-gray-500">
+                      {totalPlanned > 0 ? (
+                        <Check className="h-4 w-4 text-green-500" />
+                      ) : (
+                        <div className="h-4 w-4" />
+                      )}
+                      <span>Total: {totalPlanned}</span>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+      ) : (
+        <Card>
+          <CardHeader>
+            <CardTitle>Calendar View</CardTitle>
+            <CardDescription>
+              Coming soon: Interactive calendar view for weekly planning
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="text-center py-12">
+              <CalendarDays className="h-12 w-12 mx-auto text-gray-400 mb-4" />
+              <h3 className="text-lg font-semibold text-gray-900">
+                Calendar View in Development
+              </h3>
+              <p className="text-gray-600 mt-2">
+                This feature will be available in the next update.
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+};
+
+export default WeeklyPlanAssignmentPage;
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/MetabaseDashboard.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/MetabaseDashboard.tsx
new file mode 100644
index 000000000..86fc5b81a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/MetabaseDashboard.tsx
@@ -0,0 +1,207 @@
+import React, { useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { useMetabaseDashboard } from "../hooks/useMetabaseDashboard";
+import { usePlanYear } from "../hooks/usePlanYear";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import { Button } from "@/shared/common/ui/button";
+import { Badge } from "@/shared/common/ui/badge";
+import { Alert, AlertDescription } from "@/shared/common/ui/alert";
+import { DashboardDropdown } from "@/shared/components/ui/DashboardDropdown";
+import {
+  RefreshCw,
+  BarChart3,
+  AlertCircle,
+  ExternalLink,
+  Loader2,
+  Calendar,
+} from "lucide-react";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { getFormattedDashboardLabel } from "../utils/dashboardUtils";
+
+interface MetabaseDashboardProps {
+  className?: string;
+  planYearId?: string;
+}
+
+export const MetabaseDashboard: React.FC<MetabaseDashboardProps> = ({
+  className = "",
+  planYearId,
+}) => {
+  const { yearId } = useParams<{ yearId: string }>();
+  const currentPlanYearId = planYearId || yearId;
+  const localizedName = useLocalizedName();
+
+  const {
+    dashboards,
+    selectedDashboard,
+    iframeUrl,
+    loading,
+    error,
+    fetchDashboards,
+    selectDashboard,
+    getFilteredDashboardUrl,
+  } = useMetabaseDashboard();
+
+  // Fetch plan year details if we have a plan year ID
+  const { data: planYearData } = usePlanYear(currentPlanYearId || "");
+  const planYear = planYearData?.data;
+
+  const handleRefresh = () => {
+    if (selectedDashboard && currentPlanYearId) {
+      getFilteredDashboardUrl(selectedDashboard.id, currentPlanYearId);
+    } else {
+      fetchDashboards();
+    }
+  };
+
+  // Auto-load filtered dashboard when plan year or selected dashboard changes
+  useEffect(() => {
+    if (selectedDashboard && currentPlanYearId) {
+      getFilteredDashboardUrl(selectedDashboard.id, currentPlanYearId);
+    }
+  }, [selectedDashboard, currentPlanYearId, getFilteredDashboardUrl]);
+
+  const openInNewTab = () => {
+    if (iframeUrl) {
+      window.open(iframeUrl, "_blank");
+    }
+  };
+
+  if (error) {
+    return (
+      <Card className={className}>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-red-600">
+            <AlertCircle className="h-5 w-5" />
+            Dashboard Error
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Alert variant="destructive">
+            <AlertCircle className="h-4 w-4" />
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+          <Button onClick={handleRefresh} className="mt-4" variant="outline">
+            <RefreshCw className="h-4 w-4 mr-2" />
+            Retry
+          </Button>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className={`space-y-4 ${className}`}>
+      {/* Dashboard Header */}
+      <Card>
+        <CardHeader>
+          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+            <div className="flex items-center gap-3">
+              <BarChart3 className="h-6 w-6 text-indigo-600" />
+              <div>
+                <p className="text-sm text-muted-foreground mt-1">
+                  {planYear
+                    ? `${planYear.year} - ${localizedName(
+                        planYear.name
+                      )} Performance Insights`
+                    : "Real-time performance insights powered by Tria"}
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <DashboardDropdown
+                dashboards={dashboards}
+                selectedDashboard={selectedDashboard}
+                onSelect={selectDashboard}
+                isLoading={loading}
+              />
+
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={handleRefresh}
+                disabled={loading}
+              >
+                <RefreshCw
+                  className={`h-4 w-4 ${loading ? "animate-spin" : ""}`}
+                />
+              </Button>
+
+              {iframeUrl && (
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={openInNewTab}
+                  title="Open in new tab"
+                >
+                  <ExternalLink className="h-4 w-4" />
+                </Button>
+              )}
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2 mt-2 flex-wrap">
+            {planYear && (
+              <Badge variant="secondary" className="bg-green-50 text-primary-700">
+                <Calendar className="h-3 w-3 mr-1" />
+                {planYear.year} - {localizedName(planYear.name)}
+              </Badge>
+            )}
+            {selectedDashboard && (
+              <>
+                <Badge
+                  variant="secondary"
+                  className="bg-indigo-50 text-indigo-700"
+                >
+                  {getFormattedDashboardLabel(selectedDashboard.name)}
+                </Badge>
+                
+              </>
+            )}
+          </div>
+        </CardHeader>
+      </Card>
+
+      {/* Dashboard Content */}
+      <Card className="min-h-[600px]">
+        <CardContent className="p-0">
+          {loading && !iframeUrl ? (
+            <div className="flex items-center justify-center h-96">
+              <div className="text-center">
+                <Loader2 className="h-8 w-8 animate-spin mx-auto mb-4 text-indigo-600" />
+                <p className="text-muted-foreground">Loading dashboard...</p>
+              </div>
+            </div>
+          ) : iframeUrl ? (
+            <div className="relative w-full h-[600px] rounded-lg overflow-hidden">
+              <iframe
+                src={iframeUrl}
+                className="w-full h-full border-0"
+                title={`${getFormattedDashboardLabel(selectedDashboard?.name) || "Performance"} Dashboard`}
+                allow="fullscreen"
+                loading="lazy"
+              />
+            </div>
+          ) : (
+            <div className="flex items-center justify-center h-96">
+              <div className="text-center">
+                <BarChart3 className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
+                <p className="text-muted-foreground">
+                  {dashboards.length === 0
+                    ? "No dashboards available"
+                    : "Select a dashboard to view analytics"}
+                </p>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/PerformanceDashboard.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/PerformanceDashboard.tsx
new file mode 100644
index 000000000..1a64d4174
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/PerformanceDashboard.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { MetabaseDashboard } from "./MetabaseDashboard";
+
+export const PerformanceDashboardPage = () => {
+  const { yearId } = useParams<{ yearId: string }>();
+  const { t } = useTranslation();
+  return (
+    <div className="p-4 md:p-6 space-y-6">
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-800">
+            <span className="bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">
+              {t(
+                "performanceDashboard.title",
+                "Performance Management Dashboard",
+              )}
+            </span>
+          </h1>
+          <p className="text-muted-foreground text-sm mt-1">
+            {t(
+              "performanceDashboard.description",
+              "Comprehensive performance analytics and insights",
+            )}
+          </p>
+        </div>
+      </div>
+      <MetabaseDashboard planYearId={yearId} />
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/Plan-Configuration/PlanForm.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/Plan-Configuration/PlanForm.tsx
new file mode 100644
index 000000000..0950119f9
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/Plan-Configuration/PlanForm.tsx
@@ -0,0 +1,902 @@
+import { useForm, useWatch } from "react-hook-form";
+import { motion } from "framer-motion";
+import { Calendar, Target, FileText, ArrowLeft } from "lucide-react";
+import {
+  useLocation,
+  useNavigate,
+  useParams,
+  useSearchParams,
+} from "react-router-dom";
+import { useEffect, useMemo } from "react";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import {
+  usePlan,
+  usePlanMutations,
+} from "@/performance-management/hooks/usePlans";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useAuth } from "@/shared/context/AuthContext";
+import { useUnitContext } from "@/shared/context/UnitContext";
+import { usePositions } from "@/user-management/hooks/usePosition";
+import {
+  usePlanYears,
+  usePlanYearById,
+} from "@/performance-management/hooks/usePlanYear";
+import { Button } from "@/shared/common/ui/button";
+import { Card, CardContent } from "@/shared/common/ui/card";
+import { Alert, AlertDescription, AlertTitle } from "@/shared/common/ui/alert";
+import { Info } from "lucide-react";
+import { GenericForm } from "@/performance-management/utils/generic-form"; // Adjust import path as needed
+import PlanType, {
+  getDayList,
+  getMonthList,
+  getQuarterList,
+  getWeekList,
+  getPlanTypeOptions,
+} from "@/performance-management/utils/plan-unit";
+import {
+  FormField,
+  TimeFrame,
+} from "@/performance-management/utils/shared-field-types";
+
+export interface PlanFormValues {
+  nameAm: string;
+  nameEn: string;
+  descriptionAm: string;
+  descriptionEn: string;
+  positionId: string;
+  parentPlanId?: string;
+  planType: PlanType;
+  planYearId: string;
+  // initialGoal: string;
+  // expectedGoal: string;
+  weight: string;
+  month: string | number;
+  week: string | number;
+  day: string | number;
+  quarter: string | number;
+  timeframe: string | number;
+  planFor?: string;
+}
+
+// Removed local TimeFrame enum definition
+
+interface PlanFormProps {
+  parentPlanId?: string;
+  onSuccess?: () => void;
+}
+
+export default function PlanForm({
+  parentPlanId: propParentId,
+  onSuccess,
+}: PlanFormProps = {}) {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
+  const {
+    id,
+    yearId: pathYearId,
+    positionId,
+    planId,
+  } = useParams<{
+    id: string;
+    yearId?: string;
+    positionId?: string;
+    planId?: string;
+  }>();
+  console.log("positon id", positionId);
+  const [searchParams] = useSearchParams();
+  const urlParentId =
+    searchParams.get("parentPlanId") || searchParams.get("parentId");
+  const queryYearId = searchParams.get("yearId");
+  // Get yearId from query params first (UUID), then fallback to path params
+  const urlYearId = queryYearId || pathYearId;
+  const location = useLocation();
+  const planFor = location.state?.planFor as string | undefined;
+  console.log("plan for in form", planFor);
+
+  const parentId =
+    propParentId || urlParentId || (planId === "root" ? undefined : planId);
+  const { user } = useAuth();
+  const localizedName = useLocalizedName();
+  const isEdit = !!id;
+
+  const organizationId =
+    user?.employee?.length && user.employee.length > 0
+      ? user.employee[0].organizationId
+      : undefined;
+
+  const unitContext = useUnitContext();
+  const unitsQuery = unitContext?.getList(organizationId!, {
+    take: 300,
+    skip: 0,
+  });
+  const unitId = unitsQuery?.data?.data?.items?.[0]?.id ?? "";
+
+  // Fetch the specific plan being edited
+  const { data: planDetail } = usePlan(id ?? "");
+
+  // Fetch parent plan data if parentId is present
+  const { data: parentPlanDetail } = usePlan(parentId ?? "");
+
+  const { usePositionListByUnitId } = usePositions();
+  usePositionListByUnitId(unitId, { take: 100, skip: 0 });
+  const { data: planYearsData } = usePlanYears(organizationId ?? "", {
+    take: 100,
+  });
+
+  // Fetch specific plan year if yearId is provided in URL
+  const { data: currentPlanYearData } = usePlanYearById(urlYearId ?? "");
+
+  const { create: createMutation, update: updateMutation } = usePlanMutations();
+
+  const normalizeTimeframe = (val: unknown): string => {
+    if (!val) return TimeFrame.YEAR;
+    const str = String(val).toLowerCase();
+    if (str.includes("year")) return TimeFrame.YEAR;
+    if (str.includes("quarter")) return TimeFrame.QUARTER;
+    if (str.includes("month")) return TimeFrame.MONTH;
+    if (str.includes("week")) return TimeFrame.WEEK;
+    if (str.includes("day")) return TimeFrame.DAY;
+    return TimeFrame.YEAR;
+  };
+
+  const initialPlanFormValues = useMemo(
+    () => ({
+      nameAm: planDetail?.data?.name?.am || "",
+      nameEn: planDetail?.data?.name?.en || "",
+      descriptionAm: planDetail?.data?.description?.am || "",
+      descriptionEn: planDetail?.data?.description?.en || "",
+      positionId: positionId || "",
+      parentPlanId:
+        planDetail?.data?.parentPlanId || parentId || planId || undefined,
+      planType: planDetail?.data?.planType || "percent",
+      planYearId: planDetail?.data?.planYearId || urlYearId || "",
+      // initialGoal: planDetail?.data?.initialGoal?.toString() || "",
+      // expectedGoal: planDetail?.data?.expectedGoal?.toString() || "",
+      weight: planDetail?.data?.weight?.toString() || "",
+      month: planDetail?.data?.month?.toString() || "0",
+      week: planDetail?.data?.week?.toString() || "0",
+      day: planDetail?.data?.day?.toString() || "0",
+      quarter: planDetail?.data?.quarter?.toString() || "0",
+      timeframe: (() => {
+        const rawTimeframe = planDetail?.data?.timeframe;
+        if (rawTimeframe) return normalizeTimeframe(rawTimeframe);
+
+        // Fallback for sub-plan creation when parent data is missing but parentId is present
+        if (!parentId || !parentPlanDetail?.data) {
+          return parentId ? TimeFrame.QUARTER : TimeFrame.YEAR;
+        }
+
+        const pt = normalizeTimeframe(parentPlanDetail.data.timeframe);
+        if (pt === TimeFrame.YEAR) return TimeFrame.QUARTER;
+        if (pt === TimeFrame.QUARTER) return TimeFrame.QUARTER;
+        if (pt === TimeFrame.MONTH) return TimeFrame.WEEK;
+        if (pt === TimeFrame.WEEK) return TimeFrame.DAY;
+        return TimeFrame.YEAR;
+      })(),
+    }),
+    [
+      planDetail?.data,
+      positionId,
+      parentId,
+      planId,
+      urlYearId,
+      parentPlanDetail?.data,
+    ],
+  );
+
+  const form = useForm<PlanFormValues>({
+    defaultValues: initialPlanFormValues,
+    values: isEdit || !!parentId ? initialPlanFormValues : undefined,
+  });
+
+  const watchedParentPlanId = useWatch({
+    control: form.control,
+    name: "parentPlanId",
+  });
+
+  const { data: watchedParentPlanDetail } = usePlan(
+    watchedParentPlanId && watchedParentPlanId !== "root"
+      ? watchedParentPlanId
+      : "",
+  );
+
+  const effectiveParentDetail = watchedParentPlanDetail || parentPlanDetail;
+
+  const planOptions =
+    planDetail?.data?.items?.map(
+      (plan: { id: string; name: { am: string; en: string } }) => ({
+        label: localizedName(plan.name),
+        value: plan.id,
+        icon: FileText,
+      }),
+    ) || [];
+
+  // Add parent plan to options if it exists and isn't already in the list
+  if (parentId && parentPlanDetail?.data) {
+    const parentPlanExists = planOptions.some(
+      (option: { label: string; value: string }) => option.value === parentId,
+    );
+    if (!parentPlanExists) {
+      planOptions.unshift({
+        label: localizedName(parentPlanDetail.data.name),
+        value: parentId,
+        icon: FileText,
+      });
+    }
+  }
+
+  // If yearId is in URL, show only that year; otherwise show all years
+  const planYearOptions =
+    urlYearId && currentPlanYearData?.data
+      ? [
+          {
+            value: currentPlanYearData.data.id,
+            label: `${currentPlanYearData.data.year}`,
+            icon: Calendar,
+          },
+        ]
+      : planYearsData?.data?.items?.map(
+          (year: { id: string; year: number }) => ({
+            value: year.id,
+            label: `${year.year}`,
+            icon: Calendar,
+          }),
+        ) || [];
+
+  const planTypeOptions = useMemo(() => getPlanTypeOptions(), []);
+
+  const timeframeOptions = useMemo(() => {
+    const parent = effectiveParentDetail?.data;
+
+    // If no parent plan, only allow Yearly
+    if (!parentId && !parent && !watchedParentPlanId) {
+      return [
+        {
+          value: TimeFrame.YEAR,
+          label: t("plans.Yearly"),
+        },
+      ];
+    }
+
+    const parentTimeframe = normalizeTimeframe(parent?.timeframe);
+
+    // Based on parent timeframe, allow the next level down
+    switch (parentTimeframe) {
+      case TimeFrame.YEAR:
+        return [
+          {
+            value: TimeFrame.YEAR,
+            label: t("plans.Yearly", "Yearly"),
+          },
+          {
+            value: TimeFrame.QUARTER,
+            label: t("plans.Quarterly"),
+          },
+        ];
+
+      case TimeFrame.QUARTER:
+        return [
+          {
+            value: TimeFrame.QUARTER,
+            label: t("plans.Quarterly", "Quarterly"),
+          },
+        ];
+
+      case TimeFrame.MONTH:
+        return [
+          {
+            value: TimeFrame.WEEK,
+            label: t("plans.Weekly"),
+          },
+        ];
+
+      case TimeFrame.WEEK:
+        return [
+          {
+            value: TimeFrame.DAY,
+            label: t("plans.Daily"),
+          },
+        ];
+
+      default:
+        // Fallback to yearly if parent timeframe is unknown
+        return [
+          {
+            value: TimeFrame.YEAR,
+            label: t("plans.Yearly"),
+          },
+        ];
+    }
+  }, [parentId, effectiveParentDetail?.data, watchedParentPlanId, t]);
+
+  // Memoize the list options to ensure they update when language changes
+  const monthListOptions = useMemo(() => getMonthList(t), [t]);
+  const weekListOptions = useMemo(() => getWeekList(t), [t]);
+  const dayListOptions = useMemo(() => getDayList(t), [t]);
+  const quarterListOptions = useMemo(() => getQuarterList(t), [t]);
+
+  const watchedTimeframe = useWatch({
+    control: form.control,
+    name: "timeframe",
+  });
+
+  // Reset hidden fields when timeframe changes, but preserve context for "drill-down" scenarios
+  useEffect(() => {
+    if (watchedTimeframe === TimeFrame.QUARTER) {
+      form.setValue("month", "0");
+      form.setValue("week", "0");
+      form.setValue("day", "0");
+    } else if (watchedTimeframe === TimeFrame.MONTH) {
+      form.setValue("week", "0");
+      form.setValue("day", "0");
+    } else if (watchedTimeframe === TimeFrame.WEEK) {
+      form.setValue("day", "0");
+    } else if (watchedTimeframe === TimeFrame.YEAR) {
+      form.setValue("quarter", "0");
+      form.setValue("month", "0");
+      form.setValue("week", "0");
+      form.setValue("day", "0");
+    }
+  }, [watchedTimeframe, form]);
+
+  // Auto-select timeframe if there's only one option
+  useEffect(() => {
+    if (timeframeOptions.length === 1) {
+      const currentVal = form.getValues("timeframe");
+      if (currentVal !== timeframeOptions[0].value) {
+        form.setValue("timeframe", timeframeOptions[0].value, {
+          shouldValidate: true,
+          shouldDirty: true,
+        });
+      }
+    }
+  }, [timeframeOptions, form]);
+
+  useEffect(() => {
+    const current = form.getValues("timeframe");
+
+    const isValid = timeframeOptions.some((opt) => opt.value === current);
+
+    if (!isValid && timeframeOptions.length > 0) {
+      form.setValue("timeframe", timeframeOptions[0].value, {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
+    }
+  }, [timeframeOptions, form]);
+
+  // Inherit timeframe context from parent plan
+  useEffect(() => {
+    if (parentId && parentPlanDetail?.data && !isEdit) {
+      const parent = parentPlanDetail.data;
+
+      // Inherit Plan Year
+      if (parent.planYearId) {
+        form.setValue("planYearId", parent.planYearId);
+      }
+
+      // Determine Child Timeframe and Context based on Parent
+      switch (parent.timeframe) {
+        case TimeFrame.YEAR:
+          form.setValue("timeframe", TimeFrame.QUARTER);
+          break;
+
+        case TimeFrame.QUARTER:
+          form.setValue("timeframe", TimeFrame.QUARTER);
+          if (parent.quarter) {
+            form.setValue("quarter", parent.quarter.toString());
+          }
+          break;
+
+        case TimeFrame.MONTH:
+          form.setValue("timeframe", TimeFrame.WEEK);
+          if (parent.quarter) {
+            form.setValue("quarter", parent.quarter.toString());
+          }
+          if (parent.month) {
+            form.setValue("month", parent.month.toString());
+          }
+          break;
+
+        case TimeFrame.WEEK:
+          form.setValue("timeframe", TimeFrame.DAY);
+          if (parent.quarter) {
+            form.setValue("quarter", parent.quarter.toString());
+          }
+          if (parent.month) {
+            form.setValue("month", parent.month.toString());
+          }
+          if (parent.week) {
+            form.setValue("week", parent.week.toString());
+          }
+          break;
+
+        default:
+          break;
+      }
+    }
+  }, [parentId, parentPlanDetail, isEdit, form]);
+
+  // Auto-populate plan year when yearId is in URL or when plan year data loads
+  useEffect(() => {
+    // If yearId is in URL, use the current plan year data
+    if (urlYearId && currentPlanYearData?.data) {
+      form.setValue("planYearId", currentPlanYearData.data.id);
+    } else if (planYearsData?.data?.items) {
+      const currentVal = form.getValues("planYearId");
+      // If current value is a year number (e.g. "2022"), try to find the UUID
+      const matched = planYearsData.data.items.find(
+        (y: { id: string; year: number }) =>
+          y.year.toString() === currentVal || y.id === currentVal,
+      );
+
+      if (matched && matched.id !== currentVal) {
+        form.setValue("planYearId", matched.id);
+      }
+    }
+  }, [form, planYearsData, urlYearId, currentPlanYearData]);
+
+  // Helper function to convert TimeFrame enum to number
+  // (Removed - not currently used)
+
+  const handleSubmit = (values: PlanFormValues) => {
+    // Check if plan is already accepted (case-insensitive)
+    const planStatus = planDetail?.data?.status?.toLowerCase();
+    console.log("Plan status:", planStatus, "Plan detail:", planDetail?.data);
+
+    if (isEdit && planStatus === "accepted") {
+      toast.error(t("plans.planAlreadyAccepted", "Plan is already accepted"), {
+        description: t(
+          "plans.cannotEditAcceptedPlan",
+          "You cannot edit a plan that has already been accepted",
+        ),
+      });
+      return;
+    }
+
+    // Create base DTO without timeframe-specific fields
+    const baseDto = {
+      id: isEdit ? id : undefined,
+      name: {
+        am: values.nameAm,
+        en: values.nameEn,
+      },
+      description: {
+        am: values.descriptionAm,
+        en: values.descriptionEn,
+      },
+      positionId: positionId || values.positionId || undefined,
+      parentPlanId:
+        planId === "root" || !values.parentPlanId
+          ? undefined
+          : (values.parentPlanId as string),
+      planType: values.planType || PlanType.PERCENTAGE,
+      planYearId: values.planYearId,
+      timeframe: values.timeframe as string,
+      // initialGoal: Number(values.initialGoal),
+      // expectedGoal: Number(values.expectedGoal),
+      weight: Number(values.weight),
+      planFor: planFor || values.planFor || undefined,
+    };
+
+    // Add timeframe-specific fields based on the selected timeframe
+    let timeframeSpecificFields = {};
+
+    switch (values.timeframe) {
+      case TimeFrame.YEAR:
+        // Yearly plans don't need quarter, month, week, day
+        timeframeSpecificFields = {
+          quarter: undefined,
+          month: undefined,
+          week: undefined,
+          day: undefined,
+        };
+        break;
+
+      case TimeFrame.QUARTER:
+        // Quarterly plans need quarter only
+        timeframeSpecificFields = {
+          quarter: Number(values.quarter),
+          month: undefined,
+          week: undefined,
+          day: undefined,
+        };
+        break;
+
+      case TimeFrame.MONTH:
+        // Monthly plans need quarter and month
+        timeframeSpecificFields = {
+          quarter: undefined,
+          month: Number(values.month),
+          week: undefined,
+          day: undefined,
+        };
+        break;
+
+      case TimeFrame.WEEK:
+        // Weekly plans need quarter, month, and week
+        timeframeSpecificFields = {
+          quarter: undefined,
+          month: undefined,
+          week: Number(values.week),
+          day: undefined,
+        };
+        break;
+
+      case TimeFrame.DAY:
+        // Daily plans need all timeframe fields
+        timeframeSpecificFields = {
+          quarter: undefined,
+          month: undefined,
+          week: undefined,
+          day: Number(values.day),
+        };
+        break;
+
+      default:
+        // Fallback - set all to 0
+        timeframeSpecificFields = {
+          quarter: undefined,
+          month: undefined,
+          week: undefined,
+          day: undefined,
+        };
+    }
+
+    // Combine base DTO with timeframe-specific fields
+    const dto = {
+      ...baseDto,
+      ...timeframeSpecificFields,
+    };
+
+    const mutation = isEdit ? updateMutation : createMutation;
+
+    mutation.mutate(dto, {
+      onSuccess: () => {
+        toast.success(
+          isEdit
+            ? t("plans.planUpdatedSuccess", "Plan updated successfully!")
+            : t("plans.planCreatedSuccess", "Plan created successfully!"),
+          {
+            description: `"${values.nameEn}" ${t(
+              "common.hasBeenText",
+              "has been",
+            )} ${
+              isEdit
+                ? t("common.updated", "updated")
+                : t("common.created", "created")
+            }.`,
+          },
+        );
+        onSuccess?.();
+        if (!isEdit) {
+          // After creating a plan, navigate to the plans-table view for the
+          // appropriate year / position / parent plan. Use path params first
+          // (if the form was opened via a route containing them), otherwise
+          // fall back to the submitted form values.
+          const targetYear = urlYearId || values.planYearId || pathYearId;
+          const targetPosition = positionId || values.positionId;
+          const targetPlan =
+            planId || (values.parentPlanId as string) || parentId;
+
+          if (targetYear && targetPosition && targetPlan) {
+            navigate(
+              `/performance-management/${targetYear}/plans-table/${targetPosition}/${targetPlan}`,
+            );
+          } else if (targetYear && targetPosition) {
+            navigate(
+              `/performance-management/${targetYear}/plans-table/${targetPosition}`,
+            );
+          } else if (targetYear) {
+            navigate(`/performance-management/${targetYear}/plans`);
+          } else {
+            navigate(`/performance-management`);
+          }
+        }
+      },
+    });
+  };
+
+  // Define form fields with sections
+  const planFormFields: FormField<PlanFormValues>[] = [
+    // Basic Information Section
+    {
+      name: "nameAm",
+      label: t("plans.nameAmharic", "Name (Amharic)"),
+      type: "text",
+      placeholder: t("plans.planNameAmharic", "የዕቅድ ስም አማርኛ"),
+      required: true,
+      icon: FileText,
+      section: t("plans.basicInformation", "Basic Information"),
+      colSpan: 6,
+    },
+    {
+      name: "nameEn",
+      label: t("plans.nameEnglish", "Name (English)"),
+      type: "text",
+      placeholder: t("plans.planNameEnglish", "Plan Name in English"),
+      required: true,
+      icon: FileText,
+      section: t("plans.basicInformation", "Basic Information"),
+      colSpan: 6,
+    },
+    {
+      name: "descriptionEn",
+      label: t("plans.descriptionEnglish", "Description (English)"),
+      type: "textarea",
+      placeholder: t(
+        "plans.describePlanEnglish",
+        "Describe the plan in English...",
+      ),
+      required: true,
+      icon: FileText,
+      section: t("plans.basicInformation", "Basic Information"),
+      colSpan: 12,
+    },
+    {
+      name: "descriptionAm",
+      label: t("plans.descriptionAmharic", "Description (Amharic)"),
+      type: "textarea",
+      placeholder: t("plans.describePlanAmharic", "ዕቅዱን በአማርኛ ይግለጹ..."),
+      required: true,
+      icon: FileText,
+      section: t("plans.basicInformation", "Basic Information"),
+      colSpan: 12,
+    },
+
+    // Organization Section
+    {
+      name: "planYearId",
+      label: t("plans.planYear", "Plan Year"),
+      type: "select",
+      options: planYearOptions,
+      required: true,
+      icon: Calendar,
+      section: t("plans.organization", "Organization"),
+      colSpan: 4,
+      disabled: !!urlYearId, // Disable if yearId is in URL params
+    },
+    {
+      name: "timeframe",
+      label: t("plans.timeFrame", "Time Frame"),
+      type: "select",
+      options: timeframeOptions,
+      placeholder: t("plans.enterTimeFrame", "Enter time frame"),
+      required: true,
+      disabled: timeframeOptions.length === 1,
+      icon: Calendar,
+      section: t("plans.organization", "Organization"),
+      colSpan: 4,
+    },
+    // {
+    //   name: "initialGoal",
+    //   label: t("plans.initialGoal", "Initial Goal"),
+    //   type: "number",
+    //   required: true,
+    //   icon: Target,
+    //   section: t("plans.organization", "Organization"),
+    //   colSpan: 2,
+    // },
+    // {
+    //   name: "expectedGoal",
+    //   label: t("plans.expectedGoal", "Expected Goal"),
+    //   type: "number",
+    //   placeholder: t("plans.enterExpectedGoal", "Enter expected goal"),
+    //   icon: Users,
+    //   section: t("plans.organization", "Organization"),
+    //   colSpan: 2,
+    // },
+
+    // Plan Details Section
+    {
+      name: "parentPlanId",
+      label: t("plans.parentPlan", "Parent Plan"),
+      type: "select",
+      options: planOptions,
+      icon: FileText,
+      section: t("plans.planDetails", "Plan Details"),
+      disabled: !!parentId || !!planId,
+      colSpan: 4,
+      defaultValue: parentId || planId || undefined,
+    },
+    {
+      name: "weight",
+      label: t("plans.weight", "Weight"),
+      type: "number",
+      placeholder: t("plans.enterWeight", "Enter weight"),
+      icon: Target,
+      section: t("plans.planDetails", "Plan Details"),
+      colSpan: 2,
+    },
+    {
+      name: "month",
+      label: t("plans.month", "Month"),
+      type: "select",
+      placeholder: t("plans.enterMonth", "Enter month"),
+      icon: Calendar,
+      section: t("plans.planDetails", "Plan Details"),
+      hidden:
+        watchedTimeframe !== TimeFrame.MONTH &&
+        (!form.getValues("month") || form.getValues("month") === "0"),
+      colSpan: 3,
+      options: monthListOptions,
+      disabled: parentPlanDetail?.data?.timeframe === TimeFrame.MONTH,
+    },
+    {
+      name: "week",
+      label: t("plans.week", "Week"),
+      type: "select",
+      placeholder: t("plans.enterWeek", "Enter week"),
+      icon: Calendar,
+      section: t("plans.planDetails", "Plan Details"),
+      hidden:
+        watchedTimeframe !== TimeFrame.WEEK &&
+        (!form.getValues("week") || form.getValues("week") === "0"),
+      colSpan: 4,
+      options: weekListOptions,
+      disabled: parentPlanDetail?.data?.timeframe === TimeFrame.WEEK,
+    },
+    {
+      name: "day",
+      label: t("plans.day", "Day"),
+      type: "select",
+      placeholder: t("plans.enterDay", "Enter day"),
+      icon: Calendar,
+      section: t("plans.planDetails", "Plan Details"),
+      hidden: watchedTimeframe !== TimeFrame.DAY,
+      colSpan: 4,
+      options: dayListOptions,
+      disabled: parentPlanDetail?.data?.timeframe === TimeFrame.DAY,
+    },
+    {
+      name: "quarter",
+      label: t("plans.quarter", "Quarter"),
+      type: "select",
+      placeholder: t("plans.enterQuarter", "Enter quarter"),
+      icon: Calendar,
+      section: t("plans.planDetails", "Plan Details"),
+      hidden:
+        watchedTimeframe !== TimeFrame.QUARTER &&
+        (!form.getValues("quarter") || form.getValues("quarter") === "0"),
+      colSpan: 4,
+      options: quarterListOptions,
+      disabled: parentPlanDetail?.data?.timeframe === TimeFrame.QUARTER,
+    },
+    {
+      name: "planType",
+      label: t("plans.planType", "Plan Type"),
+      type: "select",
+      options: planTypeOptions,
+      icon: FileText,
+      section: t("plans.planDetails", "Plan Details"),
+      colSpan: 4,
+    },
+  ];
+
+  // Filter fields based on timeframe
+  const filteredFields = planFormFields.filter((field) => {
+    if (field.hidden) return false;
+    return true;
+  });
+
+  const handleCancel = () => {
+    navigate(-1);
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 p-4 sm:p-6">
+      <div className="max-w-4xl mx-auto">
+        {/* Header */}
+        <motion.div
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="flex items-center justify-between mb-8"
+        >
+          <div className="flex items-center space-x-4">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => navigate(-1)}
+              className="border-gray-300 text-gray-700 hover:bg-gray-50"
+            >
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              {t("common.back", "Back")}
+            </Button>
+            <div>
+              <h1 className="text-3xl font-bold bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent">
+                {isEdit
+                  ? t("plans.editPlan", "Edit Plan")
+                  : t("plans.createNewPlan", "Create New Plan")}
+              </h1>
+            </div>
+          </div>
+        </motion.div>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.1 }}
+        >
+          <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-xl overflow-hidden">
+            <CardContent className="p-6">
+              {/* Plan Already Accepted Alert */}
+              {isEdit &&
+                planDetail?.data?.status?.toLowerCase() === "accepted" && (
+                  <Alert className="mb-6 bg-red-50/80 border-red-200/50 backdrop-blur-sm">
+                    <Info className="h-4 w-4 text-red-600" />
+                    <AlertTitle className="text-red-900 font-semibold">
+                      {t("plans.planAlreadyAccepted", "Plan Already Accepted")}
+                    </AlertTitle>
+                    <AlertDescription className="text-red-700">
+                      {t(
+                        "plans.cannotEditAcceptedPlan",
+                        "This plan has already been accepted and cannot be edited. Please contact your administrator if you need to make changes.",
+                      )}
+                    </AlertDescription>
+                  </Alert>
+                )}
+
+              {/* Parent Plan Info Alert */}
+              {parentId && parentPlanDetail?.data && (
+                <Alert className="mb-6 bg-blue-50/80 border-blue-200/50 backdrop-blur-sm">
+                  <Info className="h-4 w-4 text-blue-600" />
+                  <AlertTitle className="text-blue-900 font-semibold">
+                    {t("plans.creatingSubPlan", "Creating Sub-Plan")}
+                  </AlertTitle>
+                  <AlertDescription className="text-blue-700">
+                    {t(
+                      "plans.subPlanDescription",
+                      "This plan will be created as a sub-plan under:",
+                    )}{" "}
+                    <strong className="text-blue-900">
+                      {localizedName(parentPlanDetail.data.name)}
+                    </strong>
+                  </AlertDescription>
+                </Alert>
+              )}
+
+              <GenericForm
+                form={form}
+                fields={filteredFields.map((field) => ({
+                  ...field,
+                  disabled:
+                    field.disabled ||
+                    (isEdit &&
+                      planDetail?.data?.status?.toLowerCase() === "accepted"),
+                }))}
+                onSubmit={handleSubmit}
+                onCancel={handleCancel}
+                isSubmitting={
+                  createMutation.isPending || updateMutation.isPending
+                }
+                submitButtonText={
+                  isEdit
+                    ? t("plans.updatePlan", "Update Plan")
+                    : t("plans.createPlan", "Create Plan")
+                }
+                cancelButtonText={t("common.cancel", "Cancel")}
+                successMessage={
+                  isEdit
+                    ? t(
+                        "plans.planUpdatedSuccessfully",
+                        "Plan updated successfully!",
+                      )
+                    : t(
+                        "plans.planCreatedSuccessfully",
+                        "Plan created successfully!",
+                      )
+                }
+                errorMessage={
+                  isEdit
+                    ? t("plans.failedToUpdatePlan", "Failed to update plan")
+                    : t("plans.failedToCreatePlan", "Failed to create plan")
+                }
+              />
+            </CardContent>
+          </Card>
+        </motion.div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/Plan-Configuration/planDetail.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/Plan-Configuration/planDetail.tsx
new file mode 100644
index 000000000..be95271bf
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/Plan-Configuration/planDetail.tsx
@@ -0,0 +1,317 @@
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
+import {
+  ArrowLeftIcon,
+  EditIcon,
+  CalendarIcon,
+  PlusIcon,
+  XIcon,
+} from "lucide-react";
+import { Button } from "@/shared/common/ui/button";
+import { Card, CardContent } from "@/shared/common/ui/card";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import { Separator } from "@/shared/common/ui/separator";
+import { usePlan, checkIsUnitAdmin } from "../../hooks/usePlans";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useAuth } from "@/shared/context/AuthContext";
+import { useMemo, useState } from "react";
+import PlanForm from "./PlanForm";
+
+const PlanDetails = () => {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const localizedName = useLocalizedName();
+  const { user } = useAuth();
+  const { yearId } = useParams();
+  const [searchParams] = useSearchParams();
+  const positionId = searchParams.get("positionId");
+
+  // Check if user is unit admin
+  const isUnitAdmin = useMemo(() => checkIsUnitAdmin(user), [user]);
+
+  // State to control sub-plan form visibility
+  const [showSubPlanForm, setShowSubPlanForm] = useState(false);
+
+  // TanStack Query hook
+  const { data, isLoading, isError, error, refetch } = usePlan(id || "");
+  const plan = data?.data;
+
+  if (isLoading) {
+    return (
+      <div className="p-6 space-y-6">
+        <Skeleton className="h-8 w-2/5" />
+        <Card>
+          <CardContent className="p-6 space-y-4">
+            <Skeleton className="h-5 w-1/4" />
+            <Skeleton className="h-9 w-3/5" />
+            <Skeleton className="h-5 w-1/4" />
+            <Skeleton className="h-9 w-3/5" />
+            <Skeleton className="h-5 w-1/4" />
+            <Skeleton className="h-9 w-3/5" />
+          </CardContent>
+        </Card>
+        <div className="flex gap-4">
+          <Skeleton className="h-9 w-28" />
+          <Skeleton className="h-9 w-28" />
+        </div>
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <div className="p-6 space-y-6">
+        <Card>
+          <CardContent className="p-6">
+            <div className="text-red-600 text-lg mb-4">
+              Error loading plan details
+            </div>
+            <div className="text-muted-foreground mb-4">
+              {error?.message || "Failed to load plan data. Please try again."}
+            </div>
+            <div className="flex gap-4">
+              <Button onClick={() => refetch()} variant="outline">
+                Retry
+              </Button>
+              <Button
+                variant="ghost"
+                onClick={() => navigate("/performance-management/plans")}
+                className="flex items-center gap-2">
+                <ArrowLeftIcon className="h-4 w-4" />
+                Back to List
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  if (!plan) {
+    return (
+      <div className="p-6 space-y-6">
+        <Card>
+          <CardContent className="p-6">
+            <div className="text-lg mb-4">Plan not found</div>
+            <Button
+              variant="ghost"
+              onClick={() =>
+                navigate(
+                  `/performance-management/${yearId}/plans-table/${positionId}`
+                )
+              }
+              className="flex items-center gap-2">
+              <ArrowLeftIcon className="h-4 w-4" />
+              Back to List
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h2 className="text-2xl font-bold">Plan Details</h2>
+          <p className="text-muted-foreground">Plan ID: {plan.id}</p>
+        </div>
+        <Button
+          variant="ghost"
+          onClick={() =>
+            navigate(
+              `/performance-management/${yearId}/plans-table/${positionId}`
+            )
+          }
+          className="flex items-center gap-2">
+          <ArrowLeftIcon className="h-4 w-4" />
+          Back to List
+        </Button>
+      </div>
+
+      <Card>
+        <CardContent className="p-6 space-y-6">
+          {/* Plan Name */}
+          <div>
+            <div className="text-sm text-muted-foreground mb-2">Plan Name</div>
+            <div className="p-3 border rounded-md bg-muted/50">
+              <div className="text-base font-semibold">
+                {localizedName(plan.name)}
+              </div>
+            </div>
+          </div>
+
+          {/* Description */}
+          <div>
+            <div className="text-sm text-muted-foreground mb-2">
+              Description
+            </div>
+            <div className="p-3 border rounded-md bg-muted/50">
+              <div className="text-base">{localizedName(plan.description)}</div>
+            </div>
+          </div>
+
+          {/* Plan Details */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div>
+              <div className="text-sm text-muted-foreground mb-2">
+                Calendar Year
+              </div>
+              <div className="p-3 border rounded-md bg-muted/50">
+                <div className="flex items-center gap-2">
+                  <CalendarIcon className="h-4 w-4 text-blue-600" />
+                  <div className="text-base font-semibold">
+                    {plan.calendarYear}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <div className="text-sm text-muted-foreground mb-2">
+                Start Date
+              </div>
+              <div className="p-3 border rounded-md bg-muted/50">
+                <div className="text-base">
+                  {new Date(plan.startDate).toLocaleDateString()}
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <div className="text-sm text-muted-foreground mb-2">End Date</div>
+              <div className="p-3 border rounded-md bg-muted/50">
+                <div className="text-base">
+                  {new Date(plan.endDate).toLocaleDateString()}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Related IDs */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div>
+              <div className="text-sm text-muted-foreground mb-2">
+                Position ID
+              </div>
+              <div className="p-3 border rounded-md bg-muted/50">
+                <div
+                  className="text-base font-mono truncate"
+                  title={plan.positionId}>
+                  {plan.positionId}
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <div className="text-sm text-muted-foreground mb-2">Unit ID</div>
+              <div className="p-3 border rounded-md bg-muted/50">
+                <div
+                  className="text-base font-mono truncate"
+                  title={plan.unitId}>
+                  {plan.unitId}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <Separator />
+
+          {/* Timestamps */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div>
+              <div className="text-sm text-muted-foreground mb-2">
+                Created At
+              </div>
+              <div className="p-3 border rounded-md bg-muted/50">
+                <div className="text-base">
+                  {plan.createdAt
+                    ? new Date(plan.createdAt).toLocaleString()
+                    : "N/A"}
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <div className="text-sm text-muted-foreground mb-2">
+                Last Updated
+              </div>
+              <div className="p-3 border rounded-md bg-muted/50">
+                <div className="text-base">
+                  {plan.updatedAt
+                    ? new Date(plan.updatedAt).toLocaleString()
+                    : "N/A"}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex justify-end pt-4 gap-4">
+            <Button variant="outline" onClick={() => navigate(-1)}>
+              Back to Plans
+            </Button>
+            {/* Show Edit button only for Unit Admins */}
+            {isUnitAdmin && (
+              <Button
+                onClick={() =>
+                  navigate(`/performance-management/plans/${id}/edit`)
+                }
+                className="flex items-center gap-2">
+                <EditIcon className="h-4 w-4" />
+                Edit Plan
+              </Button>
+            )}
+            {/* Show Add Sub-Plan button only for Non-Unit Admins */}
+            {/* {!isUnitAdmin && (
+              <Button
+                onClick={() => setShowSubPlanForm(!showSubPlanForm)}
+                className="flex items-center gap-2 bg-gradient-to-r from-purple-500 to-violet-600 hover:from-purple-600 hover:to-violet-700 text-white">
+                {showSubPlanForm ? (
+                  <>
+                    <XIcon className="h-4 w-4" />
+                    Cancel
+                  </>
+                ) : (
+                  <>
+                    <PlusIcon className="h-4 w-4" />
+                    Add Sub-Plan
+                  </>
+                )}
+              </Button>
+            )} */}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Inline Sub-Plan Form */}
+      {!isUnitAdmin && showSubPlanForm && (
+        <Card className="border-purple-200 border-2">
+          <CardContent className="p-6">
+            <div className="mb-4">
+              <h3 className="text-xl font-bold text-purple-700">
+                Create Sub-Plan
+              </h3>
+              <p className="text-sm text-muted-foreground">
+                Creating a sub-plan under:{" "}
+                <span className="font-semibold">
+                  {localizedName(plan.name)}
+                </span>
+              </p>
+            </div>
+            <Separator className="mb-6" />
+            <PlanForm
+              parentPlanId={id}
+              onSuccess={() => {
+                setShowSubPlanForm(false);
+                refetch();
+              }}
+            />
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+};
+
+export default PlanDetails;
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/Plan-Configuration/planTable.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/Plan-Configuration/planTable.tsx
new file mode 100644
index 000000000..ddd4c399f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/Plan-Configuration/planTable.tsx
@@ -0,0 +1,1025 @@
+import { useState, useMemo, useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import {
+  DownloadIcon,
+  EditIcon,
+  TrashIcon,
+  EyeIcon,
+  PlusIcon,
+  ArrowLeft,
+  Building2,
+  Target,
+  Users,
+  RefreshCw,
+  BarChart3,
+  Send,
+  Calendar,
+  FolderTree,
+  Clock,
+  CalendarDays,
+  Layers,
+} from "lucide-react";
+import { motion } from "framer-motion";
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import { Plan } from "../../types/planTypes";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import { useToast } from "@/shared/common/ui/use-toast";
+import { ColumnDef } from "@tanstack/react-table";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+import { Button } from "@/shared/common/ui/button";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import { Badge } from "@/shared/common/ui/badge";
+
+import {
+  usePlanList,
+  usePlanMutations,
+  checkIsUnitAdmin,
+  useMinePlan,
+  usePlan,
+} from "@/performance-management/hooks/usePlans";
+import {
+  usePlanYearById,
+  usePlanYears,
+} from "@/performance-management/hooks/usePlanYear";
+import { useUnitContext } from "@/shared/context/UnitContext";
+import { useAuth } from "@/shared/context/AuthContext";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { PlanYear } from "@/performance-management/types/planYearTypes";
+import { getUserPositionType } from "@/performance-management/utils/positionTypeUtils";
+import { EPositionTypeKey, MeDto } from "@/shared/dto/user/meDto";
+import { useUserDetail } from "@/record-management/components/hooks/useUserDetail";
+import { useAuthUser } from "@/record-management/hooks/useAuthUser";
+import { useTranslation } from "react-i18next";
+import { TimeFrame } from "@/performance-management/utils/shared-field-types";
+
+interface PlanTableProps {
+  useMinePlans?: boolean;
+}
+
+const PlanTable = ({ useMinePlans = false }: PlanTableProps) => {
+  const navigate = useNavigate();
+  const { toast } = useToast();
+  const { t } = useTranslation();
+  const { yearId, positionId, planId, planFor } = useParams<{
+    yearId?: string;
+    positionId?: string;
+    planId?: string;
+    planFor?: string;
+  }>();
+
+  // Support both year numbers (2024) and UUIDs for backward compatibility
+  const { data: planYearData } = usePlanYearById(yearId as string);
+
+  // Get the year number for display (works with both UUID and year number)
+  const displayYear = planYearData?.data?.year || yearId;
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [selectedPlan, setSelectedPlan] = useState<Plan | null>(null);
+  const [pageIndex, setPageIndex] = useState(0);
+  const { user, selectedPositionId } = useAuth();
+  const localizedName = useLocalizedName();
+  const { userDetails } = useAuthUser();
+  const { permissionKeys } = useUserDetail(userDetails as MeDto);
+  const isInitiator = permissionKeys?.includes("can:initiatePlan");
+
+  const organizationId =
+    user?.employee?.length && user.employee.length > 0
+      ? user.employee[0].organizationId
+      : undefined;
+
+  const unitContext = useUnitContext();
+  const unitsQuery = unitContext?.getList(organizationId!, {
+    take: 300,
+    skip: 0,
+  });
+  const unitId = unitsQuery?.data?.data?.items?.[0]?.id ?? "";
+
+  // Get the current year from planYearData
+  const currentYear = planYearData?.data?.year || "N/A";
+
+  // Resolve the active position by matching the globally-selected employeePositionId.
+  // Falls back to the user's first position when none has been selected yet.
+  const currentPositionId = useMemo(() => {
+    const allPositions =
+      user?.employee?.flatMap((emp) => emp.positions ?? []) ?? [];
+    if (selectedPositionId) {
+      const active = allPositions.find(
+        (p) =>
+          p.employeePositionId === selectedPositionId ||
+          p.id === selectedPositionId,
+      );
+      if (active?.id) return active.id;
+    }
+    return allPositions[0]?.id ?? "";
+  }, [user, selectedPositionId]);
+
+  // Reflect the effective positionId in the URL so it's never undefined on the plans-table route
+  useEffect(() => {
+    if (useMinePlans) return;
+    if (positionId) return;
+    if (!currentPositionId || !yearId) return;
+
+    const path = planId
+      ? `/performance-management/${yearId}/plans-table/${currentPositionId}/${planId}${
+          planFor ? `/${planFor}` : ""
+        }`
+      : `/performance-management/${yearId}/plans-table/${currentPositionId}`;
+
+    navigate(path, { replace: true });
+  }, [
+    useMinePlans,
+    positionId,
+    currentPositionId,
+    yearId,
+    planId,
+    planFor,
+    navigate,
+  ]);
+
+  // Check if user is unit admin
+  const isUnitAdmin = useMemo(() => checkIsUnitAdmin(user), [user]);
+
+  // Check if user is deputy
+  const isDeputy = useMemo(() => {
+    return getUserPositionType(user) === EPositionTypeKey.DEPUTY;
+  }, [user]);
+
+  // Build params based on role, year filter, and positionId from URL
+  const planParams = useMemo(() => {
+    const baseParams: Record<string, string> = {
+      orderBy: "createdAt:DESC",
+    };
+
+    if (yearId) {
+      baseParams.planYearId = yearId;
+    }
+
+    // Use positionId from URL, falling back to the logged-in user's positionId
+    const effectivePositionId = positionId || currentPositionId;
+    if (effectivePositionId) {
+      baseParams.positionId = effectivePositionId;
+    }
+
+    if (planFor) {
+      baseParams.planFor = planFor;
+    }
+    if (planId) {
+      baseParams.parentPlanId = planId;
+    }
+
+    return Object.keys(baseParams).length > 0 ? baseParams : undefined;
+  }, [yearId, positionId, currentPositionId, planFor, planId]);
+
+  const minePlanParams = useMemo(() => {
+    const basicParams: Record<string, string> = {
+      orderBy: "createdAt:DESC",
+    };
+    if (yearId) {
+      basicParams.planYearId = yearId;
+    }
+    if (planId) {
+      basicParams.parentPlanId = planId;
+    }
+    return Object.keys(basicParams).length > 0 ? basicParams : undefined;
+  }, [yearId, planId]);
+
+  const {
+    data: minePlanData,
+    isLoading: isMinePlanLoading,
+    isError: isMinePlanError,
+    error: minePlanError,
+    refetch: refetchMinePlan,
+  } = useMinePlan(minePlanParams);
+
+  // On the /my-plans route, fall back to /plans/list/{currentPositionId} when /plans/mine
+  // finishes loading and returns no items.
+  const minePlansEmpty =
+    useMinePlans &&
+    !isMinePlanLoading &&
+    !isMinePlanError &&
+    !!minePlanData &&
+    (minePlanData?.data?.items?.length ?? 0) === 0;
+
+  const {
+    data: planListData,
+    isLoading: isPlanListLoading,
+    isError: isPlanListError,
+    error: planListError,
+    refetch: refetchPlanList,
+  } = usePlanList(
+    useMinePlans
+      ? minePlansEmpty
+        ? currentPositionId
+        : ""
+      : positionId || currentPositionId,
+    useMinePlans ? (minePlansEmpty ? planParams : undefined) : planParams,
+  );
+
+  // On /my-plans: prefer mine results, fall back to list results when mine is empty.
+  const data = useMinePlans
+    ? minePlansEmpty
+      ? planListData
+      : minePlanData
+    : planListData;
+  const isLoading = useMinePlans
+    ? isMinePlanLoading || (minePlansEmpty && isPlanListLoading)
+    : isPlanListLoading;
+  const isError = useMinePlans
+    ? isMinePlanError || (minePlansEmpty && isPlanListError)
+    : isPlanListError;
+  const error = useMinePlans
+    ? minePlansEmpty
+      ? planListError
+      : minePlanError
+    : planListError;
+  const refetch = useMinePlans
+    ? () => {
+        refetchMinePlan();
+        if (minePlansEmpty) refetchPlanList();
+      }
+    : refetchPlanList;
+
+  const plans = data?.data?.items?.length ? data.data.items : [];
+  const { delete: deletePlan } = usePlanMutations();
+  console.log("mine plans ", planListData);
+  // Get parent plan info if planId exists and not in mine plans view
+  const planIdForQuery = planId && !useMinePlans ? (planId as string) : "";
+  console.log("planId for Query ", planIdForQuery);
+  const { data: parentPlanData, isLoading: isParentPlanLoading } =
+    usePlan(planIdForQuery);
+  console.log("parentPlanData time frame", parentPlanData?.data.timeframe);
+  // Helper function to format time frame
+  const formatTimeFrame = (timeFrame: string) => {
+    if (!timeFrame) return "N/A";
+
+    const timeFrameMap: Record<string, string> = {
+      [TimeFrame.YEAR]: "Yearly",
+      [TimeFrame.QUARTER]: "Quarterly",
+      [TimeFrame.MONTH]: "Monthly",
+      [TimeFrame.WEEK]: "Weekly",
+      [TimeFrame.DAY]: "Daily",
+    };
+
+    return (
+      timeFrameMap[timeFrame] ||
+      timeFrame.charAt(0).toUpperCase() + timeFrame.slice(1).replace("ly", "")
+    );
+  };
+  console.log("first Plan ");
+  // Get time frame for mine plans (check first plan's time frame if available)
+  const minePlanTimeFrame = useMemo(() => {
+    if (!useMinePlans || !plans.length) return null;
+    const firstPlan = plans[0];
+    return firstPlan.timeframe ? formatTimeFrame(firstPlan.timeframe) : null;
+  }, [useMinePlans, plans]);
+
+  console.log("minePlanTimeFrame", minePlanTimeFrame);
+  // Get plan year info for mine plans - use yearId from params
+  const minePlanYearInfo = useMemo(() => {
+    if (!useMinePlans) return null;
+    return currentYear;
+  }, [useMinePlans, currentYear]);
+
+  // Get quarter/month/week/day info for mine plans
+  const minePlanPeriodInfo = useMemo(() => {
+    if (!useMinePlans || !plans.length) return null;
+    const firstPlan = plans[0];
+
+    if (firstPlan.timeframe === TimeFrame.QUARTER && firstPlan.quarter) {
+      return { type: "Quarter", value: firstPlan.quarter };
+    } else if (firstPlan.timeframe === TimeFrame.MONTH && firstPlan.month) {
+      return { type: "Month", value: firstPlan.month };
+    } else if (firstPlan.timeframe === TimeFrame.WEEK && firstPlan.week) {
+      return { type: "Week", value: firstPlan.week };
+    } else if (firstPlan.timeframe === TimeFrame.DAY && firstPlan.day) {
+      return { type: "Day", value: firstPlan.day };
+    }
+
+    return null;
+  }, [useMinePlans, plans]);
+
+  // Get quarter/month/week/day info for parent plan
+  const parentPlanPeriodInfo = useMemo(() => {
+    if (!parentPlanData?.data) return null;
+    const parent = parentPlanData.data;
+
+    if (parent.timeframe === TimeFrame.QUARTER && parent.quarter) {
+      return { type: "Quarter", value: parent.quarter };
+    } else if (parent.timeframe === TimeFrame.MONTH && parent.month) {
+      return { type: "Month", value: parent.month };
+    } else if (parent.timeframe === TimeFrame.WEEK && parent.week) {
+      return { type: "Week", value: parent.week };
+    } else if (parent.timeframe === TimeFrame.DAY && parent.day) {
+      return { type: "Day", value: parent.day };
+    }
+
+    return null;
+  }, [parentPlanData]);
+
+  const handleNavigation = (item: Plan) => {
+    let path = "";
+
+    if (item.planFor === "team") {
+      path = `/performance-management/${yearId}/employee-plans`;
+    } else if (useMinePlans) {
+      path = `/performance-management/${yearId}/plan/${item.id}/departments`;
+    } else {
+      path = `/performance-management/${yearId}/plan/${item.id}?positionId=${
+        positionId || ""
+      }`;
+    }
+
+    navigate(path);
+  };
+
+  const handleDelete = async () => {
+    if (!selectedPlan) return;
+
+    deletePlan.mutate(selectedPlan.id, {
+      onSuccess: () => {
+        setIsDeleteDialogOpen(false);
+        setSelectedPlan(null);
+        toast({
+          title: t("planTable.success", "Success"),
+          description: t(
+            "planTable.planDeletedSuccessfully",
+            "Plan deleted successfully",
+          ),
+          variant: "default",
+        });
+      },
+      onError: (error) => {
+        toast({
+          title: t("planTable.error", "Error"),
+          description:
+            error.message ||
+            t("planTable.failedToDeletePlan", "Failed to delete plan"),
+          variant: "destructive",
+        });
+      },
+    });
+  };
+
+  const columns: ColumnDef<Plan>[] = [
+    {
+      accessorKey: "name",
+      header: t("planTable.planName"),
+      size: 200,
+      enableColumnFilter: true,
+      enableSorting: true,
+      cell: ({ row }) => (
+        <div className="flex items-center space-x-3">
+          <div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-blue-500 rounded-xl flex items-center justify-center">
+            <Target className="h-5 w-5 text-white" />
+          </div>
+          <div className="flex flex-col">
+            <div className="font-semibold text-gray-900">
+              {localizedName(row.original.name)}
+            </div>
+          </div>
+        </div>
+      ),
+    },
+    {
+      accessorKey: "description",
+      header: t("common.description", "Description"),
+      size: 220,
+      enableColumnFilter: true,
+      enableSorting: false,
+      cell: ({ row }) => (
+        <div className="max-w-[200px]">
+          <p className="text-sm text-gray-600 line-clamp-2">
+            {localizedName(row.original.description) ||
+              t("planTable.noDescription", "No description")}
+          </p>
+        </div>
+      ),
+    },
+
+    {
+      accessorKey: "weight",
+      header: t("planTable.weight"),
+      size: 140,
+      enableColumnFilter: true,
+      enableSorting: true,
+      cell: ({ row }) => (
+        <div className="flex items-center space-x-2">
+          <Users className="h-4 w-4 text-gray-400" />
+          <span className="text-sm font-medium truncate max-w-[100px]">
+            {row.original.weight || "N/A"}
+          </span>
+        </div>
+      ),
+    },
+    {
+      accessorKey: "planFor",
+      header: t("planTable.planFor", "Plan For"),
+      size: 140,
+      enableColumnFilter: true,
+      enableSorting: true,
+      cell: ({ row }) => (
+        <div className="flex items-center space-x-2">
+          <span className="text-sm font-medium truncate max-w-[100px]">
+            {row.original.planFor || "N/A"}
+          </span>
+        </div>
+      ),
+    },
+    {
+      accessorKey: "timeframe",
+      header: t("planTable.timeframe", "Time Frame"),
+      size: 160,
+      enableColumnFilter: true,
+      enableSorting: true,
+      cell: ({ row }) => {
+        const plan = row.original;
+        const timeframeValue = plan.timeframe?.toString() || "";
+        const timeframeLabel = timeframeValue
+          ? formatTimeFrame(timeframeValue)
+          : "N/A";
+
+        // Determine period info based on timeframe
+        let periodInfo = "";
+        if (timeframeValue === TimeFrame.QUARTER && plan.quarter) {
+          periodInfo = ` - Q${plan.quarter}`;
+        } else if (timeframeValue === TimeFrame.MONTH && plan.month) {
+          periodInfo = ` - M${plan.month}`;
+        } else if (timeframeValue === TimeFrame.WEEK && plan.week) {
+          periodInfo = ` - W${plan.week}`;
+        } else if (timeframeValue === TimeFrame.DAY && plan.day) {
+          periodInfo = ` - D${plan.day}`;
+        }
+
+        return (
+          <div className="flex items-center space-x-2">
+            <Clock className="h-4 w-4 text-gray-400" />
+            <span className="text-sm font-medium truncate max-w-[120px]">
+              {timeframeLabel}
+              {periodInfo && (
+                <span className="text-xs text-blue-600 font-semibold">
+                  {periodInfo}
+                </span>
+              )}
+            </span>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: "planType",
+      header: t("planTable.planType"),
+      size: 140,
+      enableColumnFilter: true,
+      enableSorting: true,
+      cell: ({ row }) => (
+        <div className="flex items-center space-x-2">
+          <Building2 className="h-4 w-4 text-gray-400" />
+          <span className="text-sm font-medium truncate max-w-[100px]">
+            {row.original.planType || "N/A"}
+          </span>
+        </div>
+      ),
+    },
+    {
+      id: "actions",
+      header: t("planTable.actions"),
+      size: 160,
+      cell: ({ row }) => (
+        <div className="flex gap-2">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="w-9 h-9 p-0 bg-blue-50 border-blue-200 text-blue-600 hover:bg-blue-100 hover:text-blue-700"
+                  onClick={() => handleNavigation(row.original)}
+                >
+                  <EyeIcon className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{t("planTable.viewDetailsTooltip", "View details")}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+
+          {!useMinePlans && (
+            <>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="w-9 h-9 p-0 bg-green-50 border-green-200 text-primary-600 hover:bg-primary-100 hover:text-primary-700"
+                      onClick={() =>
+                        navigate(
+                          `/performance-management/${yearId}/plan/${row.original.id}/edit`,
+                        )
+                      }
+                    >
+                      <EditIcon className="h-4 w-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{t("planTable.editTooltip", "Edit")}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="w-9 h-9 p-0 bg-red-50 border-red-200 text-red-600 hover:bg-red-100 hover:text-red-700"
+                      onClick={() => {
+                        setSelectedPlan(row.original);
+                        setIsDeleteDialogOpen(true);
+                      }}
+                      disabled={deletePlan.isPending}
+                    >
+                      <TrashIcon className="h-4 w-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{t("planTable.deleteTooltip", "Delete")}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </>
+          )}
+        </div>
+      ),
+    },
+  ];
+
+  // Information Section Component
+  const renderInformationSection = () => {
+    if (useMinePlans) {
+      return (
+        <motion.div
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-100 rounded-2xl p-6 mb-8 shadow-sm"
+        >
+          <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
+            <div className="flex items-start gap-4">
+              <div className="w-12 h-12 bg-blue-100 rounded-2xl flex items-center justify-center">
+                <CalendarDays className="h-6 w-6 text-blue-600" />
+              </div>
+              <div>
+                <h3 className="text-lg font-semibold text-gray-900">
+                  {t("planTable.planInformation")}
+                </h3>
+                <div className="flex flex-wrap gap-4 mt-3">
+                  <div className="flex items-center gap-2">
+                    <Calendar className="h-4 w-4 text-blue-500" />
+                    <span className="text-sm font-medium text-gray-700">
+                      {t("planTable.year")}:
+                    </span>
+                    <Badge className="bg-blue-100 text-blue-700 hover:bg-blue-200">
+                      {minePlanYearInfo || "N/A"}
+                    </Badge>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Clock className="h-4 w-4 text-purple-500" />
+                    <span className="text-sm font-medium text-gray-700">
+                      {t("planTable.timeframe")}
+                    </span>
+                    <Badge className="bg-purple-100 text-purple-700 hover:bg-purple-200">
+                      {minePlanTimeFrame || "N/A"}
+                    </Badge>
+                  </div>
+                  {minePlanPeriodInfo && (
+                    <div className="flex items-center gap-2">
+                      <CalendarDays className="h-4 w-4 text-indigo-500" />
+                      <span className="text-sm font-medium text-gray-700">
+                        {minePlanPeriodInfo.type}:
+                      </span>
+                      <Badge className="bg-indigo-100 text-indigo-700 hover:bg-indigo-200">
+                        {minePlanPeriodInfo.value}
+                      </Badge>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      );
+    }
+
+    // For regular plan list with parent plan
+    if (planId && parentPlanData) {
+      return (
+        <motion.div
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="bg-gradient-to-r from-green-50 to-emerald-50 border border-green-100 rounded-2xl p-6 mb-8 shadow-sm"
+        >
+          <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
+            <div className="flex items-start gap-4">
+              <div className="w-12 h-12 bg-green-100 rounded-2xl flex items-center justify-center">
+                <Layers className="h-6 w-6 text-primary-600" />
+              </div>
+              <div>
+                <h3 className="text-lg font-semibold text-gray-900">
+                  {t("planTable.parentInformation")}
+                </h3>
+                <div className="flex flex-wrap gap-4 mt-3">
+                  <div className="flex items-center gap-2">
+                    <FolderTree className="h-4 w-4 text-green-500" />
+                    <span className="text-sm font-medium text-gray-700">
+                      {t("planTable.parentPlan")}:
+                    </span>
+                    <Badge className="bg-green-100 text-primary-700 hover:bg-primary-200">
+                      {localizedName(parentPlanData?.data?.name)}
+                    </Badge>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Clock className="h-4 w-4 text-amber-500" />
+                    <span className="text-sm font-medium text-gray-700">
+                      {t("planTable.timeframe")}
+                    </span>
+                    <Badge className="bg-amber-100 text-amber-700 hover:bg-amber-200">
+                      {parentPlanData?.data?.timeframe
+                        ? formatTimeFrame(parentPlanData?.data.timeframe)
+                        : "N/A"}
+                    </Badge>
+                  </div>
+                  {parentPlanPeriodInfo && (
+                    <div className="flex items-center gap-2">
+                      <CalendarDays className="h-4 w-4 text-teal-500" />
+                      <span className="text-sm font-medium text-gray-700">
+                        {parentPlanPeriodInfo.type}:
+                      </span>
+                      <Badge className="bg-teal-100 text-teal-700 hover:bg-teal-200">
+                        {parentPlanPeriodInfo.value}
+                      </Badge>
+                    </div>
+                  )}
+                  {yearId && (
+                    <div className="flex items-center gap-2">
+                      <Calendar className="h-4 w-4 text-blue-500" />
+                      <span className="text-sm font-medium text-gray-700">
+                        {t("planTable.year")}:
+                      </span>
+                      <Badge className="bg-blue-100 text-blue-700 hover:bg-blue-200">
+                        {currentYear}
+                      </Badge>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() =>
+                navigate(`/performance-management/${yearId}/plan/${planId}`)
+              }
+              className="border-green-300 text-primary-700 hover:bg-green-50"
+            >
+              <EyeIcon className="h-4 w-4 mr-2" />
+              {t("planTable.parentPlan")}
+            </Button>
+          </div>
+        </motion.div>
+      );
+    }
+
+    // For regular plan list without parent plan but with year info
+    if (yearId && currentYear !== "N/A") {
+      return (
+        <motion.div
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="bg-gradient-to-r from-purple-50 to-violet-50 border border-purple-100 rounded-2xl p-6 mb-8 shadow-sm"
+        >
+          <div className="flex items-start gap-4">
+            <div className="w-12 h-12 bg-purple-100 rounded-2xl flex items-center justify-center">
+              <Calendar className="h-6 w-6 text-purple-600" />
+            </div>
+            <div>
+              <div className="flex items-center gap-4 mt-3">
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-medium text-gray-700">
+                    {t("planTable.currentYear", "Current Year:")}
+                  </span>
+                  <Badge className="bg-purple-100 text-purple-700 hover:bg-purple-200">
+                    {currentYear}
+                  </Badge>
+                </div>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      );
+    }
+
+    return null;
+  };
+
+  const extraToolbar = (
+    <div className="flex gap-3">
+      {positionId && yearId && (
+        <Button
+          variant="outline"
+          className="border-gray-300 text-gray-700 hover:bg-gray-50"
+          onClick={() => navigate(`/performance-management/${yearId}/plans`)}
+        >
+          <ArrowLeft className="h-4 w-4 mr-2" />
+          {t("planTable.back")}
+        </Button>
+      )}
+
+      {yearId && !positionId && (
+        <Button
+          variant="outline"
+          className="border-gray-300 text-gray-700 hover:bg-gray-50"
+          onClick={() => navigate("/performance-management/plan-years")}
+        >
+          <ArrowLeft className="h-4 w-4 mr-2" />
+          {t("planTable.backToPlanYears", "Back to Plan Years")}
+        </Button>
+      )}
+
+      {(isUnitAdmin || isInitiator || (isDeputy && positionId)) && (
+        <Button
+          onClick={() => {
+            navigate(
+              planId
+                ? `/performance-management/${yearId}/plans/new/${positionId}/${planId}`
+                : `/performance-management/${yearId}/plans/new/${positionId}`,
+              {
+                state: {
+                  from: "plan-table",
+                  positionId: positionId || "",
+                  yearId: yearId || "",
+                  planId: planId || "",
+                  planFor: planFor,
+                },
+              },
+            );
+          }}
+          className="bg-gradient-to-r from-purple-500 to-violet-600 hover:from-purple-600 hover:to-violet-700 text-white shadow-lg shadow-purple-500/25"
+        >
+          <PlusIcon className="h-4 w-4 mr-2" />
+          {t("planTable.createPlan", "Create Plan")}
+        </Button>
+      )}
+
+      <Button
+        variant="outline"
+        onClick={() => {
+          toast({
+            title: t("planTable.exportStarted", "Export Started"),
+            description: t(
+              "planTable.preparingPlansData",
+              "Preparing plans data for export...",
+            ),
+            variant: "default",
+          });
+        }}
+        className="border-blue-200 text-blue-600 hover:bg-blue-50"
+      >
+        <DownloadIcon className="h-4 w-4 mr-2" />
+        {t("planTable.exportAll", "Export All")}
+      </Button>
+    </div>
+  );
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 p-6">
+        <div className="max-w-7xl mx-auto space-y-6">
+          {/* Information Section Skeleton */}
+          <Skeleton className="h-32 bg-white/80 rounded-2xl" />
+
+          {/* Header Skeleton */}
+          <div className="flex justify-between items-center">
+            <div className="space-y-3">
+              <Skeleton className="h-8 w-64 bg-gray-300 rounded-xl" />
+              <Skeleton className="h-4 w-96 bg-gray-300 rounded" />
+            </div>
+            <Skeleton className="h-10 w-32 bg-gray-300 rounded-xl" />
+          </div>
+
+          {/* Stats Skeleton */}
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
+            {[...Array(4)].map((_, i) => (
+              <Skeleton
+                key={i}
+                className="h-24 bg-white rounded-2xl shadow-sm"
+              />
+            ))}
+          </div>
+
+          {/* Table Skeleton */}
+          <div className="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg border border-gray-200/50 p-6">
+            <div className="space-y-4">
+              <Skeleton className="h-12 w-full bg-gray-300 rounded-xl" />
+              {[...Array(5)].map((_, i) => (
+                <Skeleton
+                  key={i}
+                  className="h-16 w-full bg-gray-300 rounded-xl"
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 p-6 flex items-center justify-center">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="text-center bg-white/80 backdrop-blur-sm rounded-2xl p-8 shadow-lg border border-gray-200/50 max-w-md"
+        >
+          <div className="w-16 h-16 bg-red-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
+            <BarChart3 className="h-8 w-8 text-red-500" />
+          </div>
+          <h3 className="text-xl font-semibold text-gray-900 mb-2">
+            Error Loading Plans
+          </h3>
+          <p className="text-gray-600 mb-6">
+            {error?.message || "Failed to load plans data. Please try again."}
+          </p>
+          <Button
+            onClick={() => refetch()}
+            className="bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white"
+          >
+            <RefreshCw className="h-4 w-4 mr-2" />
+            {t("planTable.tryAgain", "Try Again")}
+          </Button>
+        </motion.div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 p-4 sm:p-6">
+      <div className="max-w-7xl mx-auto">
+        {/* Information Section */}
+        {renderInformationSection()}
+
+        {/* Header */}
+        <motion.div
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="flex flex-col lg:flex-row justify-between items-start lg:items-center mb-8"
+        >
+          <div>
+            <h1 className="text-3xl font-bold bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent">
+              {useMinePlans
+                ? t("planTable.myPlans", "My Plans")
+                : t("planTable.planManagement", "Plan Management")}
+            </h1>
+            
+          </div>
+
+          <div className="flex items-center gap-3 bg-white/80 backdrop-blur-sm rounded-2xl px-4 py-2 shadow-sm border border-gray-200 mt-4 lg:mt-0">
+            <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+            <span className="text-sm font-medium text-gray-700">
+              {plans.length}{" "}
+              {plans.length === 1
+                ? t("planTable.plan", "Plan")
+                : t("planTable.plans", "Plans")}{" "}
+              {t("planTable.total", "Total")}
+            </span>
+          </div>
+        </motion.div>
+
+        {/* Stats Cards */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.1 }}
+          className="mb-8"
+        >
+          <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-gray-200/50 max-w-sm">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-gray-600 text-sm font-medium">
+                  {t("planTable.totalPlansLabel", "Total Plans")}
+                </p>
+                <p className="text-3xl font-bold text-gray-900">
+                  {plans.length}
+                </p>
+              </div>
+              <div className="w-12 h-12 bg-blue-500/10 rounded-2xl flex items-center justify-center">
+                <Target className="h-6 w-6 text-blue-500" />
+              </div>
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Table */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2 }}
+        >
+          <AdvancedTable<Plan, unknown>
+            columns={columns}
+            data={plans}
+            tableName={
+              useMinePlans
+                ? t("planTable.myPlansTable", "My Plans")
+                : t("planTable.performancePlansTable", "Performance Plans")
+            }
+            extraToolbar={extraToolbar}
+            toolBarPosition="right"
+            isLoading={isLoading}
+            itemCount={plans.length}
+            pageIndex={pageIndex}
+            onPageChange={setPageIndex}
+            nextFunction={() => setPageIndex((prev) => prev + 1)}
+            prevFunction={() => setPageIndex((prev) => Math.max(0, prev - 1))}
+            refresh={refetch}
+          />
+        </motion.div>
+
+        {/* Delete Confirmation Dialog */}
+        <AlertDialog
+          open={isDeleteDialogOpen}
+          onOpenChange={setIsDeleteDialogOpen}
+        >
+          <AlertDialogContent className="bg-white border-0 shadow-2xl rounded-2xl">
+            <AlertDialogHeader>
+              <div className="w-12 h-12 bg-red-100 rounded-2xl flex items-center justify-center mb-4">
+                <TrashIcon className="h-6 w-6 text-red-500" />
+              </div>
+              <AlertDialogTitle className="text-xl font-bold text-gray-900">
+                {t("planTable.confirmDeletion", "Confirm Deletion")}
+              </AlertDialogTitle>
+              <AlertDialogDescription className="text-gray-600">
+                {t(
+                  "planTable.deleteConfirmationMessage",
+                  "Are you sure you want to delete the plan",
+                )}{" "}
+                "
+                <span className="font-semibold text-gray-900">
+                  {localizedName(selectedPlan?.name)}
+                </span>
+                "
+                {t(
+                  "planTable.deleteConfirmationWarning",
+                  "? This action cannot be undone and all associated data will be permanently removed.",
+                )}
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel
+                onClick={() => {
+                  setIsDeleteDialogOpen(false);
+                  setSelectedPlan(null);
+                }}
+                disabled={deletePlan.isPending}
+                className="border-gray-300 text-gray-700 hover:bg-gray-50"
+              >
+                {t("planTable.cancel", "Cancel")}
+              </AlertDialogCancel>
+              <AlertDialogAction
+                onClick={handleDelete}
+                disabled={deletePlan.isPending}
+                className="bg-gradient-to-r from-red-500 to-pink-600 hover:from-red-600 hover:to-pink-700 text-white shadow-lg shadow-red-500/25"
+              >
+                {deletePlan.isPending ? (
+                  <>
+                    <div className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent mr-2" />
+                    {t("planTable.deleting", "Deleting...")}
+                  </>
+                ) : (
+                  t("planTable.deletePlanButton", "Delete Plan")
+                )}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </div>
+    </div>
+  );
+};
+
+export default PlanTable;
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/Plan-Team-Memeber-Management/TeamMemeberManagement.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/Plan-Team-Memeber-Management/TeamMemeberManagement.tsx
new file mode 100644
index 000000000..086dffeb3
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/Plan-Team-Memeber-Management/TeamMemeberManagement.tsx
@@ -0,0 +1,1841 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useState, useEffect, useMemo, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import { useToast } from "@/shared/common/ui/use-toast";
+import { useQueryClient } from "@tanstack/react-query";
+import { useForm } from "react-hook-form";
+import { FormField } from "@/performance-management/utils/shared-field-types";
+// Import your existing components
+import { Button } from "@/shared/common/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/common/ui/table";
+import { Badge } from "@/shared/common/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { Input } from "@/shared/common/ui/input";
+import { Avatar, AvatarFallback } from "@/shared/common/ui/avatar";
+import {
+  Check,
+  CheckCheckIcon,
+  ChevronDown,
+  ChevronUp,
+  ClipboardList,
+  ClockIcon,
+  Download,
+  Edit,
+  Eye,
+  Grid3x3,
+  Loader2,
+  MoreVertical,
+  PlusIcon,
+  RefreshCw,
+  Search,
+  Trash2,
+  TrendingUp,
+  UserPlus,
+  Users,
+  X,
+} from "lucide-react";
+
+// ADD THESE NEW IMPORTS
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+
+import {
+  usePlanTeamMutation,
+  usePlanTeamList,
+  usePlanTeamMemberList,
+} from "@/performance-management/hooks/useTeamMemeberHook";
+import useSettings from "@/record-management/components/hooks/useSettings";
+import { useAuthUser } from "@/record-management/hooks/useAuthUser";
+import { useAuth } from "@/shared/context/AuthContext";
+import {
+  CreatePlanBulkTeamMemberDto,
+  CreatePlanTeamDto,
+} from "@/performance-management/services/api/planTeamServices";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { useTranslation } from "react-i18next";
+import { GenericForm } from "@/performance-management/utils/generic-form";
+import { useLocalizedName } from "@/shared/common/localizedName";
+
+interface Memebers {
+  createdAt: string;
+  updatedAt: string;
+  amharicCreatedAt: string;
+  amharicUpdatedAt: string | null;
+  id: string;
+  planTeamId: string;
+  employeePositionId: string;
+  isActive: boolean;
+  employeePosition: {
+    createdAt: string;
+    updatedAt: string;
+    id: string;
+    isDelegate: boolean;
+    isCurrent: boolean;
+    startDate: string;
+    amharicStartDate: string;
+    endDate: string | null;
+    amharicEndDate: string | null;
+    unitId: string;
+    delegatorId: string | null;
+    employeeId: string;
+    positionId: string;
+    delegationLetterId: string | null;
+    employee: {
+      createdAt: string;
+      updatedAt: string;
+      id: string;
+      isCurrent: boolean;
+      status: string;
+      name: {
+        am: string;
+        en: string;
+      };
+      organizationId: string;
+      unitId: string;
+      userId: string;
+    };
+  };
+}
+
+// Types - No changes needed here
+interface PlanTeamFormValues {
+  id?: string;
+  nameAm: string;
+  nameEn: string;
+  descriptionAm?: string;
+  descriptionEn?: string;
+  teamLeaderId: string;
+  positionId: string;
+}
+
+interface TeamMemberValues {
+  employeePositionId: string;
+}
+const TeamsManagement = () => {
+  const navigate = useNavigate();
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+
+  // State - No changes needed here
+  const [selectedTeam, setSelectedTeam] = useState<PlanTeamFormValues | null>(
+    null,
+  );
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [teamToDelete, setTeamToDelete] = useState<string | null>(null);
+  const [viewType, setViewType] = useState<"table" | "grid">("table");
+  const [searchTerm, setSearchTerm] = useState("");
+  const [statusFilter, setStatusFilter] = useState<string>("all");
+  const [sortBy, setSortBy] = useState<
+    "name" | "members" | "performance" | "date"
+  >("name");
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+  const [showArchived, setShowArchived] = useState(false);
+  const [teamDialogOpen, setTeamDialogOpen] = useState(false);
+  const [teamMemberDialogOpen, setTeamMemberDialogOpen] = useState(false);
+  const [selectedPositionId, setSelectedPositionId] = useState<string>("");
+
+  const [currentTeamForMembers, setCurrentTeamForMembers] = useState<any>(null);
+  const [selectedMemberIds, setSelectedMemberIds] = useState<string[]>([]);
+  const { t } = useTranslation();
+  const localizedName = useLocalizedName();
+
+  const initialPlanTeamFormValues = useMemo(
+    () => ({
+      nameAm: "",
+      nameEn: "",
+      descriptionAm: "",
+      descriptionEn: "",
+      teamLeaderId: "",
+      positionId: "",
+    }),
+    [],
+  );
+
+  // Forms - No changes needed here
+  const teamForm = useForm<PlanTeamFormValues>({
+    defaultValues: initialPlanTeamFormValues,
+  });
+
+  const teamMemberForm = useForm<TeamMemberValues>({
+    defaultValues: {
+      employeePositionId: "",
+    },
+  });
+
+  const { userDetails } = useAuthUser();
+  const { selectedPositionId: globalSelectedPositionId } = useAuth();
+
+  // Get user's positions - No changes needed here
+  const userPositions = useMemo(() => {
+    if (!userDetails?.employee) return [];
+    return userDetails.employee.flatMap((emp: any) =>
+      emp.positions.map((pos: any) => ({
+        id: pos.id,
+        employeePositionId: pos.employeePositionId,
+        name: localizedName(pos.name),
+        positionId: pos.id,
+      })),
+    );
+  }, [userDetails, localizedName]);
+
+  // Map the globally-selected position (which may be an employeePositionId or a
+  // delegation position id) to the underlying position id used by this page.
+  const resolvedGlobalPositionId = useMemo(() => {
+    if (!globalSelectedPositionId) return "";
+    const match = userPositions.find(
+      (p: any) =>
+        p.employeePositionId === globalSelectedPositionId ||
+        p.id === globalSelectedPositionId,
+    );
+    return match?.id ?? "";
+  }, [globalSelectedPositionId, userPositions]);
+
+  // Sync the local selection with the global position picker so that switching
+  // position from the topbar updates the team list shown here.
+  useEffect(() => {
+    if (resolvedGlobalPositionId) {
+      setSelectedPositionId(resolvedGlobalPositionId);
+    } else if (userPositions.length > 0 && !selectedPositionId) {
+      setSelectedPositionId(userPositions[0].id);
+    }
+  }, [resolvedGlobalPositionId, userPositions, selectedPositionId]);
+
+  // Custom hooks for data fetching and mutations - Fixed to prevent API calls with empty position ID
+  const {
+    data: teamsData,
+    isLoading: teamsLoading,
+    refetch: refetchTeams,
+  } = usePlanTeamList(selectedPositionId, {
+    enabled: !!selectedPositionId, // Only fetch when we have a valid position ID
+  });
+
+  const { handleError } = useErrorHandler(t);
+  const { alluser: usersData, isLoading: usersLoading } = useSettings();
+  const {
+    createPlanTeam: createTeam,
+    updatePlanTeam: updateTeam,
+    deletePlanTeam: deleteTeam,
+    deletePlanTeamMember: deleteTeamMember,
+    createPlanBulkTeamMember: createBulkTeamMember,
+    isPlanTeamLoading,
+  } = usePlanTeamMutation();
+
+  // Extract data from hooks - Made stable to prevent re-renders
+  const teams = useMemo(
+    () => teamsData?.data?.items || [],
+    [teamsData?.data?.items],
+  );
+  const users = useMemo(() => usersData || [], [usersData]);
+
+  // Helper function to get display name - Made stable with useCallback
+  const getDisplayName = useCallback(
+    (nameObj: any): string => {
+      if (!nameObj) return "";
+      if (typeof nameObj === "string") return nameObj;
+      if (nameObj && typeof nameObj === "object") {
+        const result = localizedName(nameObj);
+        return result || "";
+      }
+      return String(nameObj || "");
+    },
+    [localizedName],
+  );
+
+  // Get all users for team leader selection (filtered by position) - Fixed dependencies
+  const userOptions = useMemo(() => {
+    if (!users.length || !selectedPositionId) return [];
+
+    return users.flatMap((user) =>
+      user.employeePositions.map((pos) => ({
+        value: pos.id,
+        label: `${localizedName(user?.name)} - ${localizedName(
+          pos?.position?.name,
+        )}`,
+        userId: user.id,
+        userName: localizedName(user.name),
+        positionName: localizedName(pos.position.name),
+      })),
+    );
+  }, [users, selectedPositionId, localizedName]);
+
+  // Get available users for team members (exclude already added members) - Fixed dependencies
+  const getAvailableUsersForTeam = useMemo(() => {
+    if (!userOptions.length || !currentTeamForMembers) return userOptions;
+
+    const existingMemberIds =
+      currentTeamForMembers.members
+        ?.map((member: any) => {
+          return (
+            member.employeePositionId ||
+            member.employeePosition?.id ||
+            member.positionId || // fallback
+            null
+          );
+        })
+        .filter(Boolean) || [];
+
+    return userOptions.filter(
+      (option) =>
+        !existingMemberIds.includes(option.value) &&
+        option.value !== currentTeamForMembers.teamLeaderId,
+    );
+  }, [userOptions, currentTeamForMembers]);
+
+  // Effects - No changes needed here
+  useEffect(() => {
+    if (selectedTeam && teamDialogOpen) {
+      teamForm.reset({
+        nameAm: selectedTeam.nameAm,
+        nameEn: selectedTeam.nameEn,
+        descriptionAm: selectedTeam.descriptionAm || "",
+        descriptionEn: selectedTeam.descriptionEn || "",
+        teamLeaderId: selectedTeam.teamLeaderId || "",
+      });
+    } else if (!teamDialogOpen) {
+      teamForm.reset(initialPlanTeamFormValues);
+    }
+  }, [selectedTeam, teamDialogOpen, teamForm, initialPlanTeamFormValues]);
+
+  // Filter and sort teams - Fixed dependencies to prevent infinite re-renders
+  const filteredTeams = useMemo(() => {
+    let filtered = [...teams];
+
+    if (searchTerm) {
+      const term = searchTerm.toLowerCase();
+      filtered = filtered.filter((team) => {
+        const name = getDisplayName(team.name).toLowerCase();
+        const description =
+          getDisplayName(team.description)?.toLowerCase() || "";
+        return name.includes(term) || description.includes(term);
+      });
+    }
+
+    if (statusFilter !== "all") {
+      filtered = filtered.filter((team) => team.status === statusFilter);
+    }
+
+    if (!showArchived) {
+      filtered = filtered.filter((team) => team.status !== "archived");
+    }
+
+    filtered.sort((a, b) => {
+      let aValue: any, bValue: any;
+
+      switch (sortBy) {
+        case "name":
+          aValue = getDisplayName(a.name).toLowerCase();
+          bValue = getDisplayName(b.name).toLowerCase();
+          break;
+        case "members":
+          aValue = a.members?.length || 0;
+          bValue = b.members?.length || 0;
+          break;
+        case "performance":
+          aValue = a.averagePerformance || 0;
+          bValue = b.averagePerformance || 0;
+          break;
+        case "date":
+          aValue = new Date(a.createdAt).getTime();
+          bValue = new Date(b.createdAt).getTime();
+          break;
+        default:
+          return 0;
+      }
+
+      return sortOrder === "asc"
+        ? aValue > bValue
+          ? 1
+          : -1
+        : aValue < bValue
+          ? 1
+          : -1;
+    });
+
+    return filtered;
+  }, [
+    teams,
+    searchTerm,
+    statusFilter,
+    showArchived,
+    sortBy,
+    sortOrder,
+    getDisplayName,
+  ]);
+
+  // helper function for member
+  const TeamMembersHoverCard = ({
+    teamId,
+    teamName,
+  }: {
+    teamId: string;
+    teamName: string;
+  }) => {
+    const { data: membersData } = usePlanTeamMemberList(teamId);
+    const [showTooltip, setShowTooltip] = useState(false);
+
+    const members: Memebers[] = membersData?.data?.items || [];
+
+    return (
+      <div
+        className="relative"
+        onMouseEnter={() => setShowTooltip(true)}
+        onMouseLeave={() => setShowTooltip(false)}
+      >
+        <div className="flex -space-x-2">
+          {members.slice(0, 3).map((member: any) => (
+            <Avatar
+              key={member.id}
+              className="h-8 w-8 border-2 border-white cursor-help"
+            >
+              <AvatarFallback className="bg-gradient-to-r from-blue-100 to-blue-50 text-blue-600 text-xs">
+                {member.employeePosition.employee.name.en?.charAt(0) || "U"}
+              </AvatarFallback>
+            </Avatar>
+          ))}
+          {members.length > 3 && (
+            <div className="h-8 w-8 rounded-full bg-gradient-to-r from-gray-100 to-gray-50 border-2 border-white flex items-center justify-center text-xs text-gray-600">
+              +{members.length - 3}
+            </div>
+          )}
+          <Badge variant="outline" className="bg-gray-50">
+            {members.length || 0} members
+          </Badge>
+        </div>
+
+        {showTooltip && members.length > 0 && (
+          <div className="absolute z-50 top-full left-0 mb-2 p-3 bg-green-900 text-white text-xs rounded-lg shadow-xl min-w-[200px]">
+            <div className="font-semibold mb-2 text-sm">
+              Team {teamName} Members
+            </div>
+            <div className="space-y-2 max-h-60 overflow-y-auto">
+              {members.map((member: any) => (
+                <div
+                  key={member.id}
+                  className="flex items-center gap-2 p-2 hover:bg-gray-800 rounded"
+                >
+                  <Avatar className="h-6 w-6">
+                    <AvatarFallback className="bg-blue-500 text-white text-xs">
+                      {member.employeePosition?.employee?.name?.en.charAt(0) ||
+                        "U"}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1 min-w-0">
+                    <div className="font-medium truncate">
+                      {getDisplayName(
+                        member.employeePosition?.employee?.name,
+                      ) ||
+                        t(
+                          "teamMemberManagement.unknownMember",
+                          "Unknown Member",
+                        )}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div className="absolute top-full left-4 border-4 border-transparent border-t-gray-900"></div>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  // Calculate statistics - Fixed dependencies
+  const stats = useMemo(() => {
+    const total = filteredTeams.length;
+    const active = filteredTeams.filter((t) => t.status === "active").length;
+    const totalMembers = filteredTeams.reduce(
+      (sum, team) => sum + (team.members?.length || 0),
+      0,
+    );
+    const avgPerformance =
+      filteredTeams.length > 0
+        ? filteredTeams.reduce(
+            (sum, team) => sum + (team.averagePerformance || 0),
+            0,
+          ) / filteredTeams.length
+        : 0;
+
+    return {
+      total,
+      active,
+      totalMembers,
+      avgPerformance: parseFloat(avgPerformance.toFixed(1)),
+    };
+  }, [filteredTeams]);
+
+  // Handlers - No changes needed here
+  const handleCreateTeam = () => {
+    setSelectedTeam(null);
+    setTeamDialogOpen(true);
+  };
+
+  const handleEditTeam = (team: any) => {
+    setSelectedTeam({
+      id: team.id,
+      nameAm: team.name?.am || "",
+      nameEn: team.name?.en || "",
+      descriptionAm: team.description?.am || "",
+      descriptionEn: team.description?.en || "",
+      teamLeaderId: team.teamLeaderId,
+      positionId: team.positionId,
+    });
+    setTeamDialogOpen(true);
+  };
+
+  const handleDeleteClick = (teamId: string) => {
+    setTeamToDelete(teamId);
+    setDeleteDialogOpen(true);
+  };
+
+  const confirmDelete = async () => {
+    if (!teamToDelete) return;
+
+    try {
+      await deleteTeam({ id: teamToDelete });
+      toast({
+        title: t("common.success", "Success"),
+        description: t("teamMemberManagement.teamDeleted"),
+      });
+      setDeleteDialogOpen(false);
+      setTeamToDelete(null);
+      queryClient.invalidateQueries({ queryKey: ["plan-team-list"] });
+    } catch (error) {
+      handleError(error);
+    }
+  };
+
+  const handleTeamSubmit = async (values: PlanTeamFormValues) => {
+    try {
+      const selectedLeader = userOptions.find(
+        (user) => user.value === values.teamLeaderId,
+      );
+
+      if (!selectedLeader) {
+        toast({
+          title: t("common.error", "Error"),
+          description: t("teamMemberManagement.selectValidLeader"),
+          variant: "destructive",
+        });
+        return;
+      }
+
+      const teamData: CreatePlanTeamDto = {
+        name: { am: values.nameAm, en: values.nameEn },
+        description: {
+          am: values.descriptionAm || "",
+          en: values.descriptionEn || "",
+        },
+        teamLeaderId: values.teamLeaderId,
+        positionId: selectedPositionId,
+      };
+
+      if (selectedTeam?.id) {
+        await updateTeam({ id: selectedTeam.id, data: teamData });
+        toast({
+          title: t("common.success", "Success"),
+          description: t("teamMemberManagement.teamUpdated"),
+        });
+      } else {
+        await createTeam({ data: teamData });
+        toast({
+          title: t("common.success", "Success"),
+          description: t("teamMemberManagement.teamCreated"),
+        });
+      }
+
+      setTeamDialogOpen(false);
+      queryClient.invalidateQueries({ queryKey: ["plan-team-list"] });
+    } catch (error) {
+      handleError(error);
+    }
+  };
+
+  const handleAddTeamMember = (team: any) => {
+    setCurrentTeamForMembers(team);
+    setTeamMemberDialogOpen(true);
+    setSelectedMemberIds([]);
+  };
+
+  const handleTeamMemberSubmit = async (values: TeamMemberValues) => {
+    if (!currentTeamForMembers) return;
+
+    try {
+      // Normalize to an array because CreatePlanBulkTeamMemberDto expects string[]
+      const employeePositions: string[] = Array.isArray(
+        values.employeePositionId,
+      )
+        ? values.employeePositionId
+        : values.employeePositionId
+          ? [values.employeePositionId]
+          : [];
+
+      if (!employeePositions || employeePositions.length === 0) {
+        toast({
+          title: t("common.error", "Error"),
+          description: t("teamMemberManagement.selectTeamMember"),
+          variant: "destructive",
+        });
+        return;
+      }
+
+      const teamMemberData: CreatePlanBulkTeamMemberDto = {
+        planTeamId: currentTeamForMembers.id,
+        employeePositionIds: employeePositions,
+      };
+
+      await createBulkTeamMember({ data: teamMemberData });
+
+      toast({
+        title: t("common.success", "Success"),
+        description: t("teamMemberManagement.memberAdded"),
+      });
+
+      setTeamMemberDialogOpen(false);
+      teamMemberForm.reset();
+      queryClient.invalidateQueries({ queryKey: ["plan-team-list"] });
+    } catch (error) {
+      handleError(error);
+    }
+  };
+
+  const handleRemoveTeamMember = async (memberId: string) => {
+    if (!currentTeamForMembers) return;
+
+    try {
+      await deleteTeamMember(memberId);
+      toast({
+        title: t("common.success", "Success"),
+        description: t("teamMemberManagement.memberRemoved"),
+      });
+      queryClient.invalidateQueries({ queryKey: ["plan-team-list"] });
+    } catch (error) {
+      handleError(error);
+    }
+  };
+
+  const handleRemoveMultipleMembers = async () => {
+    if (!currentTeamForMembers || selectedMemberIds.length === 0) return;
+
+    try {
+      const deletePromises = selectedMemberIds.map((memberId) =>
+        deleteTeamMember(memberId),
+      );
+      await Promise.all(deletePromises);
+
+      toast({
+        title: t("common.success", "Success"),
+        description: `${selectedMemberIds.length} ${t(
+          "teamMemberManagement.membersRemovedSuccessfully",
+          "team members removed successfully",
+        )}`,
+      });
+
+      setSelectedMemberIds([]);
+      queryClient.invalidateQueries({ queryKey: ["plan-team-list"] });
+    } catch (error) {
+      handleError(error);
+    }
+  };
+
+  const handleSort = (field: "name" | "members" | "performance" | "date") => {
+    if (sortBy === field) {
+      setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+    } else {
+      setSortBy(field);
+      setSortOrder("asc");
+    }
+  };
+
+  const getStatusBadge = (status: string) => {
+    const statusConfig = {
+      active: {
+        bg: "bg-green-50",
+        text: "text-primary-700",
+        border: "border-green-200",
+        label: t("teamMemberManagement.active"),
+        icon: <Check className="h-3 w-3 mr-1" />,
+      },
+      inactive: {
+        bg: "bg-yellow-50",
+        text: "text-yellow-700",
+        border: "border-yellow-200",
+        label: t("teamMemberManagement.inactive"),
+        icon: <ClockIcon className="h-3 w-3 mr-1" />,
+      },
+      archived: {
+        bg: "bg-gray-50",
+        text: "text-gray-700",
+        border: "border-gray-200",
+        label: t("teamMemberManagement.archived"),
+        icon: <ArchiveIcon className="h-3 w-3 mr-1" />,
+      },
+    };
+
+    const config =
+      statusConfig[status as keyof typeof statusConfig] || statusConfig.active;
+
+    return (
+      <Badge
+        variant="outline"
+        className={`${config.bg} ${config.text} ${config.border} font-medium flex items-center`}
+      >
+        {config.icon}
+        {config.label}
+      </Badge>
+    );
+  };
+
+  const getPerformanceColor = (score?: number) => {
+    if (!score) return "bg-gradient-to-r from-gray-300 to-gray-400";
+    if (score >= 90) return "bg-gradient-to-r from-green-500 to-emerald-500";
+    if (score >= 70) return "bg-gradient-to-r from-blue-500 to-cyan-500";
+    if (score >= 50) return "bg-gradient-to-r from-yellow-500 to-amber-500";
+    return "bg-gradient-to-r from-red-500 to-rose-500";
+  };
+
+  const formatDate = (dateString: string) => {
+    try {
+      return new Intl.DateTimeFormat("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+      }).format(new Date(dateString));
+    } catch {
+      return dateString;
+    }
+  };
+
+  // Handle export - No changes needed here
+  const handleExport = () => {
+    toast({
+      title: "Export Started",
+      description:
+        "Teams data is being exported. You'll receive a download link shortly.",
+    });
+  };
+
+  // Form fields - No changes needed here
+  const planFormFields: FormField<PlanTeamFormValues>[] = [
+    {
+      name: "nameAm",
+      label: t("teamMemberManagement.nameAmharic", "Name Amharic"),
+      type: "text",
+      required: true,
+    },
+    {
+      name: "nameEn",
+      label: t("teamMemberManagement.nameEnglish", "Name English"),
+      type: "text",
+      required: true,
+    },
+    {
+      name: "descriptionAm",
+      label: t(
+        "teamMemberManagement.descriptionAmharic",
+        "Description Amharic",
+      ),
+      type: "textarea",
+    },
+    {
+      name: "descriptionEn",
+      label: "Description English",
+      type: "textarea",
+    },
+    {
+      name: "teamLeaderId",
+      label: t("teamMemberManagement.teamLeader"),
+      type: "select",
+      options: userOptions,
+      required: true,
+    },
+  ];
+
+  const teamMemberFormFields: FormField<TeamMemberValues>[] = [
+    {
+      name: "employeePositionId",
+      label: t("teamMemberManagement.teamMember", "Team Member"),
+      type: "multiselect",
+      options: getAvailableUsersForTeam,
+      required: true,
+    },
+  ];
+
+  const handleCancel = (): void => {
+    setTeamDialogOpen(false);
+    teamForm.reset();
+  };
+
+  const handleTeamMemberCancel = (): void => {
+    setTeamMemberDialogOpen(false);
+    teamMemberForm.reset();
+    setSelectedMemberIds([]);
+  };
+
+  // Combined loading state - No changes needed here
+  const isLoading = teamsLoading || usersLoading || isPlanTeamLoading;
+
+  return (
+    <div className="p-6 bg-gradient-to-br from-gray-50/50 to-white min-h-screen">
+      <div className="max-w-7xl mx-auto">
+        {/* Header - No changes needed here */}
+        <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6 mb-8">
+          <div>
+            <div className="flex items-center gap-3 mb-2">
+              <div className="p-2 bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg">
+                <Users className="h-6 w-6 text-white" />
+              </div>
+              <h1 className="text-3xl font-bold text-gray-900">
+                {t("teamMemberManagement.title")}
+              </h1>
+            </div>
+            <p className="text-gray-600">
+              {t("teamMemberManagement.description")}
+            </p>
+            {selectedPositionId && (
+              <div className="mt-2">
+                <Badge
+                  variant="outline"
+                  className="bg-blue-50 text-blue-700 border-blue-200"
+                >
+                  Viewing teams for:{" "}
+                  {getDisplayName(
+                    userPositions.find((p: any) => p.id === selectedPositionId)
+                      ?.name,
+                  )}
+                </Badge>
+              </div>
+            )}
+          </div>
+          <div className="flex items-center gap-4">
+            {/* Position Selector */}
+            {userPositions.length > 1 && (
+              <div className="min-w-[200px]">
+                <label className="text-sm font-medium text-gray-700 mb-1 block">
+                  Select Position
+                </label>
+                <Select
+                  value={selectedPositionId}
+                  onValueChange={setSelectedPositionId}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select position" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {userPositions.map((position: any) => (
+                      <SelectItem key={position.id} value={position.id}>
+                        {getDisplayName(position.name)}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+            <Button
+              variant="outline"
+              onClick={() => refetchTeams()}
+              disabled={teamsLoading}
+              className="gap-2"
+            >
+              {teamsLoading ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <RefreshCw className="h-4 w-4" />
+              )}
+              {t("teamMemberManagement.refresh")}
+            </Button>
+            <Button
+              onClick={handleCreateTeam}
+              disabled={isPlanTeamLoading || !selectedPositionId}
+              className="bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-700 hover:to-blue-600 text-white gap-2"
+            >
+              {isPlanTeamLoading ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <PlusIcon className="h-4 w-4" />
+              )}
+              {t("teamMemberManagement.createTeam")}
+            </Button>
+          </div>
+        </div>
+
+        {/* Stats Overview - No changes needed here */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+          <Card className="bg-gradient-to-br from-blue-50 to-white border-blue-200">
+            <CardContent className="p-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-blue-600 mb-1">
+                    {t("teamMemberManagement.totalTeams")}
+                  </p>
+                  <p className="text-3xl font-bold text-blue-900">
+                    {stats.total}
+                  </p>
+                  <p className="text-xs text-blue-500 mt-2">
+                    {t(
+                      "teamMemberManagement.activePerformanceTeams",
+                      "Active performance teams",
+                    )}
+                  </p>
+                </div>
+                <div className="p-3 bg-gradient-to-r from-blue-100 to-blue-200 rounded-xl">
+                  <Users className="h-8 w-8 text-blue-600" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="bg-gradient-to-br from-green-50 to-white border-green-200">
+            <CardContent className="p-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-primary-600 mb-1">
+                    {t("teamMemberManagement.activeTeams")}
+                  </p>
+                  <p className="text-3xl font-bold text-green-900">
+                    {stats.active}
+                  </p>
+                  <p className="text-xs text-green-500 mt-2">
+                    {t(
+                      "teamMemberManagement.currentlyActive",
+                      "Currently active",
+                    )}
+                  </p>
+                </div>
+                <div className="p-3 bg-gradient-to-r from-green-100 to-green-200 rounded-xl">
+                  <CheckCheckIcon className="h-8 w-8 text-primary-600" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="bg-gradient-to-br from-orange-50 to-white border-orange-200">
+            <CardContent className="p-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-orange-600 mb-1">
+                    {t("teamMemberManagement.averagePerformance")}
+                  </p>
+                  <p className="text-3xl font-bold text-orange-900">
+                    {stats.avgPerformance}%
+                  </p>
+                  <div className="w-full bg-orange-100 rounded-full h-2 mt-2">
+                    <div
+                      className={`h-2 rounded-full ${getPerformanceColor(
+                        stats.avgPerformance,
+                      )}`}
+                      style={{
+                        width: `${Math.min(stats.avgPerformance, 100)}%`,
+                      }}
+                    />
+                  </div>
+                </div>
+                <div className="p-3 bg-gradient-to-r from-orange-100 to-orange-200 rounded-xl">
+                  <TrendingUp className="h-8 w-8 text-orange-600" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Filters and Search - No changes needed here */}
+        <Card className="mb-8 border-0 shadow-lg">
+          <CardContent className="p-6">
+            <div className="grid grid-cols-1 lg:grid-cols-4 gap-4 mb-4">
+              <div className="relative">
+                <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
+                <Input
+                  placeholder={t("teamMemberManagement.searchTeams")}
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="pl-9"
+                />
+              </div>
+
+              <div>
+                <label className="text-sm font-medium text-gray-700 mb-1 block">
+                  {t("teamMemberManagement.status")}
+                </label>
+                <Select value={statusFilter} onValueChange={setStatusFilter}>
+                  <SelectTrigger>
+                    <SelectValue
+                      placeholder={t("teamMemberManagement.allStatuses")}
+                    />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">
+                      {t("teamMemberManagement.allStatuses")}
+                    </SelectItem>
+                    <SelectItem value="active">
+                      {t("teamMemberManagement.active")}
+                    </SelectItem>
+                    <SelectItem value="inactive">
+                      {t("teamMemberManagement.inactive")}
+                    </SelectItem>
+                    <SelectItem value="archived">
+                      {t("teamMemberManagement.archived")}
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="flex items-end">
+                <div className="inline-flex rounded-lg border border-gray-200 p-1 bg-gray-50">
+                  <Button
+                    variant={viewType === "table" ? "default" : "ghost"}
+                    size="sm"
+                    onClick={() => setViewType("table")}
+                    className={`gap-2 ${
+                      viewType === "table"
+                        ? "bg-white shadow-sm"
+                        : "text-gray-600 hover:text-gray-900"
+                    }`}
+                  >
+                    <ClipboardList className="h-4 w-4" />
+                    {t("teamMemberManagement.tableView", "Table")}
+                  </Button>
+                  <Button
+                    variant={viewType === "grid" ? "default" : "ghost"}
+                    size="sm"
+                    onClick={() => setViewType("grid")}
+                    className={`gap-2 ${
+                      viewType === "grid"
+                        ? "bg-white shadow-sm"
+                        : "text-gray-600 hover:text-gray-900"
+                    }`}
+                  >
+                    <Grid3x3 className="h-4 w-4" />
+                    {t("teamMemberManagement.gridView")}
+                  </Button>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex flex-wrap items-center justify-between gap-4 pt-4 border-t">
+              <div className="flex items-center gap-4">
+                <div className="flex items-center gap-2">
+                  <input
+                    type="checkbox"
+                    id="showArchived"
+                    checked={showArchived}
+                    onChange={(e) => setShowArchived(e.target.checked)}
+                    className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                  />
+                  <label
+                    htmlFor="showArchived"
+                    className="text-sm text-gray-700"
+                  >
+                    {t("teamMemberManagement.showArchived")}
+                  </label>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-4">
+                <Button
+                  variant="outline"
+                  className="gap-2"
+                  onClick={handleExport}
+                >
+                  <Download className="h-4 w-4" />
+                  {t("teamMemberManagement.export")}
+                </Button>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Loading State - No changes needed here */}
+        {isLoading ? (
+          <div className="flex flex-col items-center justify-center py-20">
+            <div className="relative">
+              <Loader2 className="h-16 w-16 animate-spin text-blue-600" />
+              <div className="absolute inset-0 flex items-center justify-center">
+                <Users className="h-8 w-8 text-blue-400" />
+              </div>
+            </div>
+            <p className="text-gray-600 mt-4 text-lg">
+              {t("teamMemberManagement.loadingTeams")}
+            </p>
+            <p className="text-gray-500 text-sm mt-2">
+              Please wait while we fetch your data
+            </p>
+          </div>
+        ) : filteredTeams.length === 0 ? (
+          <Card className="border-dashed border-2 bg-gradient-to-br from-gray-50/50 to-white">
+            <CardContent className="pt-16 pb-16 text-center">
+              <div className="w-24 h-24 mx-auto mb-6 rounded-full bg-gradient-to-r from-blue-100 to-blue-50 flex items-center justify-center">
+                <Users className="h-12 w-12 text-blue-400" />
+              </div>
+              <h3 className="text-2xl font-bold text-gray-900 mb-3">
+                {t("teamMemberManagement.noTeams")}
+              </h3>
+              <div className="flex gap-3 justify-center">
+                <Button
+                  onClick={handleCreateTeam}
+                  className="bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-700 hover:to-blue-600 text-white"
+                >
+                  <PlusIcon className="h-4 w-4 mr-2" />
+                  {t(
+                    "teamMemberManagement.createFirstTeam",
+                    "Create Your First Team",
+                  )}
+                </Button>
+                {(searchTerm || statusFilter !== "all") && (
+                  <Button
+                    variant="outline"
+                    onClick={() => {
+                      setSearchTerm("");
+                      setStatusFilter("all");
+                    }}
+                  >
+                    {t("common.clearFilters", "Clear Filters")}
+                  </Button>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        ) : viewType === "table" ? (
+          <Card className="border-0 shadow-lg overflow-hidden">
+            <CardHeader className="bg-gradient-to-r from-gray-50 to-gray-100/50 border-b">
+              <div className="flex justify-between items-center">
+                <div>
+                  <CardTitle>
+                    {t(
+                      "teamMemberManagement.performanceTeams",
+                      "Performance Teams",
+                    )}
+                  </CardTitle>
+                  <CardDescription>
+                    {filteredTeams.length} teams • Sorted by {sortBy} (
+                    {sortOrder})
+                  </CardDescription>
+                </div>
+                <div className="text-sm text-gray-500">
+                  Showing {filteredTeams.length} of {teams.length} total teams
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent className="p-0">
+              <div className="overflow-x-auto">
+                <Table>
+                  <TableHeader>
+                    <TableRow className="bg-gray-50/50">
+                      <TableHead
+                        className="cursor-pointer hover:bg-gray-100 transition-colors"
+                        onClick={() => handleSort("name")}
+                      >
+                        <div className="flex items-center gap-1">
+                          {t("teamMemberManagement.teamName", "Team Name")}
+                          {sortBy === "name" &&
+                            (sortOrder === "asc" ? (
+                              <ChevronUp className="h-4 w-4" />
+                            ) : (
+                              <ChevronDown className="h-4 w-4" />
+                            ))}
+                        </div>
+                      </TableHead>
+                      <TableHead
+                        className="cursor-pointer hover:bg-gray-100 transition-colors"
+                        onClick={() => handleSort("members")}
+                      >
+                        <div className="flex items-center gap-1">
+                          {t("teamMemberManagement.members", "Members")}
+                          {sortBy === "members" &&
+                            (sortOrder === "asc" ? (
+                              <ChevronUp className="h-4 w-4" />
+                            ) : (
+                              <ChevronDown className="h-4 w-4" />
+                            ))}
+                        </div>
+                      </TableHead>
+                      <TableHead
+                        className="cursor-pointer hover:bg-gray-100 transition-colors"
+                        onClick={() => handleSort("performance")}
+                      >
+                        <div className="flex items-center gap-1">
+                          {t("teamMemberManagement.performance", "Performance")}
+                          {sortBy === "performance" &&
+                            (sortOrder === "asc" ? (
+                              <ChevronUp className="h-4 w-4" />
+                            ) : (
+                              <ChevronDown className="h-4 w-4" />
+                            ))}
+                        </div>
+                      </TableHead>
+
+                      <TableHead className="text-right">
+                        {t("common.actions", "Actions")}
+                      </TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {filteredTeams.map((team) => (
+                      <TableRow
+                        key={team.id}
+                        className="hover:bg-blue-50/30 transition-colors group"
+                      >
+                        <TableCell>
+                          <div className="flex items-center gap-3">
+                            <Avatar className="h-10 w-10 bg-gradient-to-r from-blue-100 to-blue-50 text-blue-600">
+                              <Users className="h-5 w-5" />
+                            </Avatar>
+                            <div>
+                              <div className="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">
+                                {getDisplayName(team.name)}
+                              </div>
+                              {team.description && (
+                                <div className="text-sm text-gray-500 truncate max-w-xs">
+                                  {getDisplayName(team.description)}
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex items-center">
+                            <div className="flex -space-x-2 mr-3">
+                              {team.members?.slice(0, 3).map((member: any) => (
+                                <Avatar
+                                  key={member.id}
+                                  className="h-8 w-8 border-2 border-white"
+                                >
+                                  <AvatarFallback className="bg-gradient-to-r from-blue-100 to-blue-50 text-blue-600 text-xs">
+                                    {getDisplayName(
+                                      member.employee?.name,
+                                    )?.charAt(0) || "U"}
+                                  </AvatarFallback>
+                                </Avatar>
+                              ))}
+                              {(team.members?.length || 0) > 3 && (
+                                <div className="h-8 w-8 rounded-full bg-gradient-to-r from-gray-100 to-gray-50 border-2 border-white flex items-center justify-center text-xs text-gray-600">
+                                  +{(team.members?.length || 0) - 3}
+                                </div>
+                              )}
+                            </div>
+                            <Badge variant="outline" className="bg-gray-50">
+                              {team.members?.length || 0} members
+                            </Badge>
+                          </div>
+                        </TableCell>
+                        {/* <TableCell>
+                          <div className="flex items-center gap-2">
+                            <Avatar className="h-6 w-6">
+                              <AvatarFallback className="bg-blue-100 text-blue-600 text-xs">
+                                {getDisplayName(team.teamLeader?.name)?.charAt(
+                                  0
+                                ) || "TL"}
+                              </AvatarFallback>
+                            </Avatar>
+                            <span className="text-sm">
+                              {getDisplayName(team.teamLeader?.name) ||
+                                "Not assigned"}
+                            </span>
+                          </div>
+                        </TableCell> */}
+                        <TableCell>
+                          <div className="flex items-center gap-3">
+                            <div className="w-32">
+                              <div className="flex justify-between text-xs mb-1">
+                                <span className="font-medium">
+                                  {team.averagePerformance || 0}%
+                                </span>
+                                <span className="text-gray-500">
+                                  Target: 100%
+                                </span>
+                              </div>
+                              <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
+                                <div
+                                  className={`h-full rounded-full ${getPerformanceColor(
+                                    team.averagePerformance,
+                                  )}`}
+                                  style={{
+                                    width: `${team.averagePerformance || 0}%`,
+                                  }}
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </TableCell>
+                        <TableCell className="text-right">
+                          <div className="flex justify-end">
+                            <DropdownMenu>
+                              <DropdownMenuTrigger asChild>
+                                <Button
+                                  variant="ghost"
+                                  size="sm"
+                                  className="h-8 w-8 p-0 hover:bg-gray-100"
+                                >
+                                  <span className="sr-only">Open menu</span>
+                                  <MoreVertical className="h-4 w-4" />
+                                </Button>
+                              </DropdownMenuTrigger>
+                              <DropdownMenuContent align="end" className="w-48">
+                                <DropdownMenuItem
+                                  onClick={() => handleEditTeam(team)}
+                                  className="flex items-center gap-2 cursor-pointer"
+                                >
+                                  <Edit className="h-4 w-4 text-blue-600" />
+                                  <span>
+                                    {t(
+                                      "teamMemberManagement.editTeam",
+                                      "Edit Team",
+                                    )}
+                                  </span>
+                                </DropdownMenuItem>
+
+                                <DropdownMenuItem
+                                  onClick={() => handleAddTeamMember(team)}
+                                  className="flex items-center gap-2 cursor-pointer"
+                                >
+                                  <UserPlus className="h-4 w-4 text-primary-600" />
+                                  <span>
+                                    {t(
+                                      "teamMemberManagement.addMembers",
+                                      "Add Members",
+                                    )}
+                                  </span>
+                                </DropdownMenuItem>
+                                {/* 
+                                <DropdownMenuItem
+                                  onClick={() => navigate(`/teams/${team.id}`)}
+                                  className="flex items-center gap-2 cursor-pointer"
+                                >
+                                  <Eye className="h-4 w-4 text-purple-600" />
+                                  <span>{t("teamMemberManagement.viewDetails", "View Details")}</span>
+                                </DropdownMenuItem> */}
+
+                                <DropdownMenuSeparator />
+
+                                <DropdownMenuItem
+                                  onClick={() => handleDeleteClick(team.id)}
+                                  className="flex items-center gap-2 cursor-pointer text-red-600 focus:text-red-700 focus:bg-red-50"
+                                >
+                                  <Trash2 className="h-4 w-4" />
+                                  <span>
+                                    {t(
+                                      "teamMemberManagement.deleteTeam",
+                                      "Delete Team",
+                                    )}
+                                  </span>
+                                </DropdownMenuItem>
+                              </DropdownMenuContent>
+                            </DropdownMenu>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </CardContent>
+          </Card>
+        ) : (
+          // Grid View - Updated to use dropdown
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {filteredTeams.map((team) => (
+              <Card
+                key={team.id}
+                className="hover:shadow-xl transition-all duration-300 border hover:border-blue-300 group bg-gradient-to-br from-white to-gray-50/50"
+              >
+                <CardHeader className="pb-4">
+                  <div className="flex justify-between items-start">
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 mb-2">
+                        <Avatar className="h-10 w-10 bg-gradient-to-r from-blue-100 to-blue-50 text-blue-600">
+                          <Users className="h-5 w-5" />
+                        </Avatar>
+                        <CardTitle className="text-lg text-gray-900 line-clamp-1">
+                          {getDisplayName(team.name)}
+                        </CardTitle>
+                      </div>
+                      {team.description && (
+                        <CardDescription className="line-clamp-2">
+                          {getDisplayName(team.description)}
+                        </CardDescription>
+                      )}
+                    </div>
+                    <div className="flex items-start gap-2">
+                      {getStatusBadge(team.status)}
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 w-8 p-0 hover:bg-gray-100"
+                          >
+                            <span className="sr-only">Open menu</span>
+                            <MoreVertical className="h-4 w-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end" className="w-48">
+                          <DropdownMenuItem
+                            onClick={() => handleEditTeam(team)}
+                            className="flex items-center gap-2 cursor-pointer"
+                          >
+                            <Edit className="h-4 w-4 text-blue-600" />
+                            <span>
+                              {t("teamMemberManagement.editTeam", "Edit Team")}
+                            </span>
+                          </DropdownMenuItem>
+
+                          <DropdownMenuItem
+                            onClick={() => handleAddTeamMember(team)}
+                            className="flex items-center gap-2 cursor-pointer"
+                          >
+                            <UserPlus className="h-4 w-4 text-primary-600" />
+                            <span>
+                              {t(
+                                "teamMemberManagement.addMembers",
+                                "Add Members",
+                              )}
+                            </span>
+                          </DropdownMenuItem>
+
+                          <DropdownMenuItem
+                            onClick={() => navigate(`/teams/${team.id}`)}
+                            className="flex items-center gap-2 cursor-pointer"
+                          >
+                            <Eye className="h-4 w-4 text-purple-600" />
+                            <span>
+                              {t(
+                                "teamMemberManagement.viewDetails",
+                                "View Details",
+                              )}
+                            </span>
+                          </DropdownMenuItem>
+
+                          <DropdownMenuSeparator />
+
+                          <DropdownMenuItem
+                            onClick={() => handleDeleteClick(team.id)}
+                            className="flex items-center gap-2 cursor-pointer text-red-600 focus:text-red-700 focus:bg-red-50"
+                          >
+                            <Trash2 className="h-4 w-4" />
+                            <span>
+                              {t(
+                                "teamMemberManagement.deleteTeam",
+                                "Delete Team",
+                              )}
+                            </span>
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-5">
+                    {/* Team Leader */}
+                    <div>
+                      <div className="flex items-center gap-2 mb-2">
+                        <Users className="h-4 w-4 text-blue-500" />
+                        <span className="text-sm font-medium text-gray-700">
+                          Team Leader
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-2 p-2 bg-blue-50 rounded-lg">
+                        <Avatar className="h-6 w-6">
+                          <AvatarFallback className="bg-blue-100 text-blue-600 text-xs">
+                            {getDisplayName(team.teamLeader?.name)?.charAt(0) ||
+                              "TL"}
+                          </AvatarFallback>
+                        </Avatar>
+                        <span className="text-sm font-medium">
+                          {getDisplayName(team.teamLeader?.name) ||
+                            "Not assigned"}
+                        </span>
+                      </div>
+                    </div>
+
+                    {/* Team Members */}
+                    <div>
+                      <div className="flex justify-between items-center mb-2">
+                        <span className="text-sm font-medium text-gray-700">
+                          {t(
+                            "teamMemberManagement.teamMembers",
+                            "Team Members",
+                          )}{" "}
+                          ({team.members?.length || 0})
+                        </span>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => handleAddTeamMember(team)}
+                          className="h-6 text-xs"
+                        >
+                          <PlusIcon className="h-3 w-3 mr-1" />
+                          Add
+                        </Button>
+                      </div>
+                      <div className="flex -space-x-2">
+                        {team.members?.slice(0, 5).map((member: any) => (
+                          <Avatar
+                            key={member.id}
+                            className="h-8 w-8 border-2 border-white"
+                            title={getDisplayName(member.employee?.name)}
+                          >
+                            <AvatarFallback className="bg-gradient-to-r from-blue-100 to-blue-50 text-blue-600 text-xs">
+                              {getDisplayName(member.employee?.name)?.charAt(
+                                0,
+                              ) || "U"}
+                            </AvatarFallback>
+                          </Avatar>
+                        ))}
+                        {(team.members?.length || 0) > 5 && (
+                          <div
+                            className="h-8 w-8 rounded-full bg-gradient-to-r from-gray-100 to-gray-50 border-2 border-white flex items-center justify-center text-xs text-gray-600"
+                            title={`${
+                              (team.members?.length || 0) - 5
+                            } more members`}
+                          >
+                            +{(team.members?.length || 0) - 5}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* Performance */}
+                    <div>
+                      <div className="flex justify-between items-center mb-2">
+                        <span className="text-sm font-medium text-gray-700">
+                          Performance
+                        </span>
+                        <span className="text-lg font-bold text-gray-900">
+                          {team.averagePerformance || 0}%
+                        </span>
+                      </div>
+                      <div className="h-3 bg-gray-200 rounded-full overflow-hidden">
+                        <div
+                          className={`h-full rounded-full ${getPerformanceColor(
+                            team.averagePerformance,
+                          )}`}
+                          style={{ width: `${team.averagePerformance || 0}%` }}
+                        />
+                      </div>
+                    </div>
+
+                    {/* Created Date */}
+                    <div className="pt-4 border-t">
+                      <div className="flex justify-between items-center">
+                        <span className="text-xs text-gray-500">
+                          Created: {formatDate(team.createdAt)}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        )}
+
+        {/* Dialogs - No changes needed here */}
+        {/* Create/Edit Team Dialog */}
+        <Dialog open={teamDialogOpen} onOpenChange={setTeamDialogOpen}>
+          <DialogContent className="sm:max-w-[600px]">
+            <DialogHeader>
+              <DialogTitle className="flex items-center gap-2">
+                <Users className="h-5 w-5 text-blue-600" />
+                {selectedTeam?.id
+                  ? t("teamMemberManagement.editTeam")
+                  : t("teamMemberManagement.createTeam")}
+              </DialogTitle>
+              <DialogDescription>
+                {selectedTeam?.id
+                  ? t(
+                      "teamMemberManagement.editPlanTitle",
+                      "Update team information",
+                    )
+                  : t(
+                      "teamMemberManagement.createPlanTitle",
+                      `Create a new performance team for ${
+                        userPositions.find(
+                          (p: any) => p.id === selectedPositionId,
+                        )?.name || "selected position"
+                      }`,
+                    )}
+              </DialogDescription>
+            </DialogHeader>
+
+            <GenericForm
+              form={teamForm}
+              fields={planFormFields}
+              onSubmit={handleTeamSubmit}
+              onCancel={handleCancel}
+              isSubmitting={isPlanTeamLoading}
+              submitButtonText={
+                selectedTeam?.id
+                  ? t("teamMemberManagement.updatePlan", "Update Plan")
+                  : t("teamMemberManagement.createPlan", "Create Plan")
+              }
+              cancelButtonText={t("teamMemberManagement.cancel", "Cancel")}
+            />
+          </DialogContent>
+        </Dialog>
+
+        {/* Team Member Management Dialog */}
+        <Dialog
+          open={teamMemberDialogOpen}
+          onOpenChange={setTeamMemberDialogOpen}
+        >
+          <DialogContent className="sm:max-w-[700px] max-h-[90vh] overflow-y-auto">
+            <DialogHeader>
+              <DialogTitle className="flex items-center gap-2">
+                <UserPlus className="h-5 w-5 text-primary-600" />
+                {t(
+                  "teamMemberManagement.manageTeamMembers",
+                  "Manage Team Members",
+                )}
+              </DialogTitle>
+              <DialogDescription>
+                {currentTeamForMembers && (
+                  <div className="flex items-center gap-2">
+                    Team:{" "}
+                    <span className="font-semibold">
+                      {getDisplayName(currentTeamForMembers.name)}
+                    </span>
+                    • Current members:{" "}
+                    <span className="font-semibold">
+                      {currentTeamForMembers.members?.length || 0}
+                    </span>
+                  </div>
+                )}
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-6">
+              {/* Current Team Members List */}
+              <div>
+                <div className="flex items-center justify-between mb-3">
+                  <h4 className="font-semibold text-gray-900">
+                    {t(
+                      "teamMemberManagement.currentTeamMembers",
+                      "Current Team Members",
+                    )}
+                  </h4>
+                  {selectedMemberIds.length > 0 && (
+                    <Button
+                      variant="destructive"
+                      size="sm"
+                      onClick={handleRemoveMultipleMembers}
+                      disabled={isPlanTeamLoading}
+                    >
+                      <Trash2 className="h-3.5 w-3.5 mr-2" />
+                      Remove Selected ({selectedMemberIds.length})
+                    </Button>
+                  )}
+                </div>
+
+                {currentTeamForMembers?.members &&
+                currentTeamForMembers.members.length > 0 ? (
+                  <div className="space-y-2 max-h-60 overflow-y-auto">
+                    {currentTeamForMembers.members.map((member: any) => (
+                      <div
+                        key={member.id}
+                        className={`flex items-center justify-between p-3 rounded-lg border ${
+                          selectedMemberIds.includes(member.id)
+                            ? "bg-blue-50 border-blue-200"
+                            : "bg-gray-50"
+                        }`}
+                      >
+                        <div className="flex items-center gap-3">
+                          <input
+                            type="checkbox"
+                            checked={selectedMemberIds.includes(member.id)}
+                            onChange={(e) => {
+                              if (e.target.checked) {
+                                setSelectedMemberIds([
+                                  ...selectedMemberIds,
+                                  member.id,
+                                ]);
+                              } else {
+                                setSelectedMemberIds(
+                                  selectedMemberIds.filter(
+                                    (id) => id !== member.id,
+                                  ),
+                                );
+                              }
+                            }}
+                            className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                          />
+                          <Avatar className="h-8 w-8">
+                            <AvatarFallback className="bg-gradient-to-r from-blue-100 to-blue-50 text-blue-600">
+                              {getDisplayName(member.employee?.name)?.charAt(
+                                0,
+                              ) || "U"}
+                            </AvatarFallback>
+                          </Avatar>
+                          <div>
+                            <p className="font-medium text-gray-900">
+                              {getDisplayName(member.employee?.name) ||
+                                "Unknown Member"}
+                            </p>
+                            <p className="text-sm text-gray-500">
+                              {getDisplayName(
+                                member.employeePosition?.position?.name,
+                              )}
+                            </p>
+                          </div>
+                        </div>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => handleRemoveTeamMember(member.id)}
+                          disabled={isPlanTeamLoading}
+                          className="h-8 w-8 p-0 text-red-600 hover:text-red-700 hover:bg-red-50"
+                        >
+                          <X className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="text-center py-8 border-2 border-dashed rounded-lg bg-gray-50">
+                    <Users className="h-12 w-12 text-gray-400 mx-auto mb-3" />
+                    <p className="text-gray-600">
+                      {t(
+                        "teamMemberManagement.noMembersAdded",
+                        "No team members added yet",
+                      )}
+                    </p>
+                    <p className="text-sm text-gray-500 mt-1">
+                      {t(
+                        "teamMemberManagement.addMembersInstruction",
+                        "Add members using the form below",
+                      )}
+                    </p>
+                  </div>
+                )}
+              </div>
+
+              {/* Add New Team Member Form */}
+              <div>
+                <h4 className="font-semibold text-gray-900 mb-3">
+                  {t(
+                    "teamMemberManagement.addNewTeamMember",
+                    "Add New Team Member",
+                  )}
+                </h4>
+                <GenericForm
+                  form={teamMemberForm}
+                  fields={teamMemberFormFields}
+                  onSubmit={handleTeamMemberSubmit}
+                  onCancel={handleTeamMemberCancel}
+                  isSubmitting={isPlanTeamLoading}
+                  submitButtonText={t(
+                    "teamMemberManagement.addMember",
+                    "Add Member",
+                  )}
+                  cancelButtonText={t("common.close", "Close")}
+                />
+              </div>
+            </div>
+          </DialogContent>
+        </Dialog>
+
+        {/* Delete Confirmation Dialog */}
+        <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+          <DialogContent className="max-w-md">
+            <DialogHeader>
+              <div className="flex items-center gap-3 mb-2">
+                <div className="p-2 bg-gradient-to-r from-red-100 to-rose-100 rounded-lg">
+                  <Trash2 className="h-6 w-6 text-red-600" />
+                </div>
+                <DialogTitle className="text-red-700">
+                  {t("teamMemberManagement.deleteTeam", "Delete Team")}
+                </DialogTitle>
+              </div>
+              <DialogDescription className="text-gray-600">
+                {t(
+                  "teamMemberManagement.deleteConfirmMessage",
+                  "Are you sure you want to delete this team? This action cannot be undone and will remove all team data including member assignments.",
+                )}
+              </DialogDescription>
+            </DialogHeader>
+            <DialogFooter>
+              <Button
+                variant="outline"
+                onClick={() => setDeleteDialogOpen(false)}
+                className="border-gray-300 hover:bg-gray-50"
+              >
+                {t("common.cancel", "Cancel")}
+              </Button>
+              <Button
+                onClick={confirmDelete}
+                className="bg-gradient-to-r from-red-500 to-rose-600 hover:from-red-600 hover:to-rose-700 text-white"
+                disabled={isPlanTeamLoading}
+              >
+                {isPlanTeamLoading ? (
+                  <>
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    {t("common.deleting", "Deleting...")}
+                  </>
+                ) : (
+                  <>
+                    <Trash2 className="h-4 w-4 mr-2" />
+                    {t("teamMemberManagement.deleteTeam", "Delete Team")}
+                  </>
+                )}
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </div>
+  );
+};
+
+// ArchiveIcon component
+const ArchiveIcon = (props: any) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <rect width="20" height="5" x="2" y="3" rx="1" />
+    <path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" />
+    <path d="M10 12h4" />
+  </svg>
+);
+
+export default TeamsManagement;
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/DepartmentListView.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/DepartmentListView.tsx
new file mode 100644
index 000000000..a56c6b96c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/DepartmentListView.tsx
@@ -0,0 +1,1304 @@
+import React, { useMemo, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import {
+  Building2,
+  Target,
+  TrendingUp,
+  Users,
+  ArrowRight,
+  ArrowLeft,
+  PlusIcon,
+  ChevronDown,
+  ChevronUp,
+  Filter,
+  Search,
+  Grid,
+  List,
+  Download,
+  Eye,
+  MoreVertical,
+  CheckCircle,
+  XCircle,
+  AlertCircle,
+  Clock,
+  UserPlus,
+  Settings,
+  Send,
+} from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import {
+  useMySubPlans,
+  usePlanMutations,
+  useSubPlans,
+  useTeamSubPlans,
+} from "@/performance-management/hooks/usePlans";
+import { Button } from "@/shared/common/ui/button";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import { SectorList } from "@/performance-management/types/planTypes";
+import { EPositionTypeKey } from "@/shared/dto/user/meDto";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import { Badge } from "@/shared/common/ui/badge";
+import { Tabs, TabsList, TabsTrigger } from "@/shared/common/ui/tabs";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import { Input } from "@/shared/common/ui/input";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import { toast } from "sonner";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { useTranslation } from "react-i18next";
+
+export interface DepartmentListViewProps {
+  positionType?: EPositionTypeKey;
+}
+
+// This will be moved inside the component to access t() function
+
+export const DepartmentListView: React.FC<DepartmentListViewProps> = ({
+  positionType = EPositionTypeKey.DEPUTY,
+}) => {
+  const navigate = useNavigate();
+  const { yearId, planId } = useParams<{ yearId: string; planId: string }>();
+  const localizedName = useLocalizedName();
+  const { t } = useTranslation();
+
+  const POSITION_TYPE_LABELS = {
+    [EPositionTypeKey.DEPUTY]: {
+      singular: t("departmentListView.department"),
+      plural: t("departmentListView.departments"),
+      title: t("departmentListView.title"),
+      description: t("departmentListView.description"),
+      icon: Building2,
+    },
+    [EPositionTypeKey.DIRECTOR]: {
+      singular: t("departmentListView.director"),
+      plural: t("departmentListView.directors"),
+      title: t("subPlanListView.directorOverview"),
+      description: t("subPlanListView.directorDescription"),
+      icon: Users,
+    },
+    [EPositionTypeKey.TEAM_LEADER]: {
+      singular: t("departmentListView.teamLeader"),
+      plural: t("departmentListView.teamLeaders"),
+      title: t("subPlanListView.teamLeaderOverview"),
+      description: t("subPlanListView.teamLeaderDescription"),
+      icon: Users,
+    },
+    [EPositionTypeKey.EMPLOYEE]: {
+      singular: t("departmentListView.employee"),
+      plural: t("departmentListView.employees"),
+      title: t("subPlanListView.employeeOverview"),
+      description: t("subPlanListView.employeeDescription"),
+      icon: Users,
+    },
+  } as const;
+
+  const [activeTab, setActiveTab] = useState("all");
+  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
+  const [searchTerm, setSearchTerm] = useState("");
+  const [sortBy, setSortBy] = useState<"name" | "weight" | "plans" | "rank">(
+    "rank"
+  );
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+
+  const { data, isLoading, error } = useSubPlans(planId || "");
+  const { data: teamSubPlansData } = useTeamSubPlans(planId || "");
+  const { data: mySubPlansData } = useMySubPlans(planId || "");
+  console.log("data", mySubPlansData);
+  const departments: SectorList[] = Array.isArray(data?.data?.items)
+    ? data!.data!.items
+    : [];
+  const teamDepartments: SectorList[] = Array.isArray(
+    teamSubPlansData?.data?.items
+  )
+    ? teamSubPlansData!.data!.items
+    : [];
+
+  const myDepartments: SectorList[] = Array.isArray(mySubPlansData?.data)
+    ? mySubPlansData.data
+    : Array.isArray(mySubPlansData?.data?.items)
+    ? mySubPlansData.data.items
+    : mySubPlansData?.data && typeof mySubPlansData.data === "object"
+    ? // wrap single object into an array
+      ([mySubPlansData.data] as SectorList[])
+    : [];
+  const labels =
+    POSITION_TYPE_LABELS[positionType as keyof typeof POSITION_TYPE_LABELS] ||
+    POSITION_TYPE_LABELS[EPositionTypeKey.DEPUTY];
+  const Icon = labels.icon;
+  const { handleError } = useErrorHandler(t);
+  // Combined data for tabs
+  const allItems = [...departments, ...teamDepartments, ...myDepartments];
+  const { requestApproval: requestApprovalMutation } = usePlanMutations();
+  const calculateTotalWeight = (items: SectorList[]) => {
+    if (items.length === 0) return 0;
+    const total = items.reduce(
+      (sum, item) => sum + Number(item.total_weight || 0),
+      0
+    );
+    return total;
+  };
+
+  // Filter and sort items based on active tab and search
+  const getFilteredItems = () => {
+    let items: SectorList[] = [];
+
+    switch (activeTab) {
+      case "all":
+        items = allItems;
+        break;
+      case "departments":
+        items = departments;
+        break;
+      case "teams":
+        items = teamDepartments;
+        break;
+      case "mine":
+        items = myDepartments;
+        break;
+      default:
+        items = allItems;
+    }
+
+    // Search filter
+    if (searchTerm) {
+      items = items.filter((item) =>
+        localizedName(item.position_name)
+          .toLowerCase()
+          .includes(searchTerm.toLowerCase())
+      );
+    }
+
+    // Sort
+    items.sort((a, b) => {
+      let aValue: any, bValue: any;
+
+      switch (sortBy) {
+        case "name":
+          aValue = localizedName(a.position_name).toLowerCase();
+          bValue = localizedName(b.position_name).toLowerCase();
+          break;
+        case "weight":
+          aValue = a.total_weight || 0;
+          bValue = b.total_weight || 0;
+          break;
+        case "plans":
+          aValue = a.no_of_plans || 0;
+          bValue = b.no_of_plans || 0;
+          break;
+        case "rank":
+          aValue = a.position_rank || 0;
+          bValue = b.position_rank || 0;
+          break;
+        default:
+          return 0;
+      }
+
+      return sortOrder === "asc"
+        ? aValue > bValue
+          ? 1
+          : -1
+        : aValue < bValue
+        ? 1
+        : -1;
+    });
+
+    return items;
+  };
+  const [isRequestApprovalDialogOpen, setIsRequestApprovalDialogOpen] =
+    useState(false);
+  const filteredItems = getFilteredItems();
+
+  const canRequestApproval = useMemo(() => {
+    // Get all relevant items (adjust based on your business logic)
+    const relevantItems = filteredItems; // Or use allItems depending on your requirement
+
+    if (relevantItems.length === 0) return false;
+
+    // Check if total weight sums to 100%
+    const totalWeight = calculateTotalWeight(relevantItems);
+    const hasFullWeight = Math.abs(totalWeight - 100) < 0.01; // Allow small floating point differences
+
+    // Additional checks (you can add more as needed):
+    const hasPlans = relevantItems.every((item) => (item.no_of_plans || 0) > 0);
+    const allActive = relevantItems.every((item) => {
+      const plans = item.no_of_plans || 0;
+      return plans > 0; // Or plans >= 1 depending on your requirement
+    });
+
+    // You can customize this logic based on your exact requirements
+    return hasFullWeight && hasPlans && allActive;
+  }, [filteredItems]); // Or allItems, depending on which items should be considered
+
+  // Also calculate the current total weight for display
+  const currentTotalWeight = useMemo(() => {
+    return calculateTotalWeight(filteredItems);
+  }, [filteredItems]);
+  console.log("canRequestApproval", canRequestApproval);
+  console.log("currentTotalWeight", currentTotalWeight);
+  const handleDepartmentClick = (item: SectorList, planId: string) => {
+    console.log("itemmmmm ", item);
+    const departmentId =
+      item.planTeam_position_id ?? item.position_id ?? item.positionId;
+
+    const planFor = item.positionId
+      ? "self"
+      : item.planTeam_id
+      ? "team"
+      : "position";
+
+    if (yearId) {
+      navigate(
+        `/performance-management/${yearId}/plans-table/${departmentId}/${planId}/${planFor}`,
+        { state: { planFor } }
+      );
+    }
+  };
+
+  const handleCreateSubPlan = (department: SectorList) => {
+    const departmentId =
+      department?.position_id ||
+      department?.positionId ||
+      department?.planTeam_position_id;
+    if (yearId && planId) {
+      navigate(
+        `/performance-management/${yearId}/plans/new/${departmentId}/${planId}`
+      );
+    }
+  };
+
+  const getSectorColor = (index: number) => {
+    const colors = [
+      "bg-gradient-to-br from-blue-500 via-blue-600 to-cyan-500",
+      "bg-gradient-to-br from-purple-500 via-purple-600 to-pink-500",
+      "bg-gradient-to-br from-green-500 via-green-600 to-emerald-500",
+      "bg-gradient-to-br from-orange-500 via-orange-600 to-red-500",
+      "bg-gradient-to-br from-indigo-500 via-indigo-600 to-blue-500",
+      "bg-gradient-to-br from-teal-500 via-teal-600 to-green-500",
+      "bg-gradient-to-br from-rose-500 via-rose-600 to-pink-500",
+      "bg-gradient-to-br from-amber-500 via-amber-600 to-orange-500",
+    ];
+    return colors[index % colors.length];
+  };
+
+  const getStatusBadge = (item: SectorList) => {
+    const plans = item.no_of_plans || 0;
+    if (plans === 0) {
+      return (
+        <Badge
+          variant="outline"
+          className="bg-red-50 text-red-700 border-red-200"
+        >
+          <XCircle className="h-3 w-3 mr-1" />
+          {t("departmentListView.noPlansBadge")}
+        </Badge>
+      );
+    } else if (plans >= 5) {
+      return (
+        <Badge
+          variant="outline"
+          className="bg-green-50 text-primary-700 border-green-200"
+        >
+          <CheckCircle className="h-3 w-3 mr-1" />
+          {t("departmentListView.activeBadge")}
+        </Badge>
+      );
+    } else {
+      return (
+        <Badge
+          variant="outline"
+          className="bg-yellow-50 text-yellow-700 border-yellow-200"
+        >
+          <AlertCircle className="h-3 w-3 mr-1" />
+          {t("departmentListView.partialBadge")}
+        </Badge>
+      );
+    }
+  };
+  const handleRequestApproval = async () => {
+    if (!planId) return;
+
+    requestApprovalMutation.mutate(planId, {
+      onSuccess: () => {
+        setIsRequestApprovalDialogOpen(false);
+        toast.success("Plan deleted successfully");
+      },
+      onError: (error) => {
+        handleError(error);
+      },
+    });
+  };
+
+  const getPerformanceRing = (weight: number) => {
+    const percentage = Math.min(Math.max(weight || 0, 0), 100);
+    const color =
+      percentage >= 90
+        ? "stroke-green-500"
+        : percentage >= 70
+        ? "stroke-blue-500"
+        : percentage >= 50
+        ? "stroke-yellow-500"
+        : "stroke-red-500";
+
+    return (
+      <div className="relative w-16 h-16">
+        <svg className="w-full h-full transform -rotate-90" viewBox="0 0 36 36">
+          <path
+            d="M18 2.0845
+              a 15.9155 15.9155 0 0 1 0 31.831
+              a 15.9155 15.9155 0 0 1 0 -31.831"
+            fill="none"
+            className="stroke-gray-200"
+            strokeWidth="3"
+          />
+          <path
+            d="M18 2.0845
+              a 15.9155 15.9155 0 0 1 0 31.831
+              a 15.9155 15.9155 0 0 1 0 -31.831"
+            fill="none"
+            className={color}
+            strokeWidth="3"
+            strokeDasharray={`${percentage}, 100`}
+            strokeLinecap="round"
+          />
+        </svg>
+        <div className="absolute inset-0 flex items-center justify-center">
+          <span className="text-sm font-bold">{percentage}%</span>
+        </div>
+      </div>
+    );
+  };
+
+  const handleSort = (field: "name" | "weight" | "plans" | "rank") => {
+    if (sortBy === field) {
+      setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+    } else {
+      setSortBy(field);
+      setSortOrder("asc");
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="p-6 space-y-6">
+        <div className="flex justify-between items-center mb-8">
+          <div className="space-y-2">
+            <Skeleton className="h-8 w-48" />
+            <Skeleton className="h-4 w-64" />
+          </div>
+          <Skeleton className="h-10 w-32" />
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+          {[1, 2, 3].map((i) => (
+            <Skeleton key={i} className="h-32 rounded-xl" />
+          ))}
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {[1, 2, 3, 4, 5, 6].map((i) => (
+            <Skeleton key={i} className="h-64 rounded-2xl" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-6">
+        <Card className="border-red-200 bg-red-50">
+          <CardHeader>
+            <CardTitle className="text-red-800 flex items-center gap-2">
+              <AlertCircle className="h-5 w-5" />
+              Error Loading {labels.plural}
+            </CardTitle>
+            <CardDescription className="text-red-600">
+              {error instanceof Error
+                ? error.message
+                : `Failed to load ${labels.plural.toLowerCase()}`}
+            </CardDescription>
+          </CardHeader>
+          <CardFooter>
+            <Button
+              variant="outline"
+              onClick={() => navigate(-1)}
+              className="border-red-200 text-red-600 hover:bg-red-100"
+            >
+              <ArrowLeft className="mr-2 h-4 w-4" />
+              Go Back
+            </Button>
+          </CardFooter>
+        </Card>
+      </div>
+    );
+  }
+
+  if (filteredItems.length === 0 && !searchTerm) {
+    return (
+      <div className="p-6">
+        <Button variant="outline" onClick={() => navigate(-1)} className="mb-6">
+          <ArrowLeft className="mr-2 h-4 w-4" />
+          Back
+        </Button>
+        <Card className="border-dashed border-2">
+          <CardContent className="pt-12 pb-12 text-center">
+            <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-gradient-to-r from-blue-100 to-blue-50 flex items-center justify-center">
+              <Icon className="h-10 w-10 text-blue-400" />
+            </div>
+            <h3 className="text-2xl font-bold text-gray-900 mb-3">
+              No {labels.plural} Available
+            </h3>
+            <p className="text-gray-600 max-w-md mx-auto mb-8">
+              There are no {labels.plural.toLowerCase()}/sub-plans to display
+              for this plan.
+            </p>
+            <Button
+              onClick={() => navigate(-1)}
+              className="bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-700 hover:to-blue-600 text-white"
+            >
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Return to Previous Page
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 space-y-6">
+      {/* Header Section */}
+      <motion.div
+        initial={{ opacity: 0, y: -10 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="space-y-6"
+      >
+        <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
+          <div className="flex-1">
+            <div className="flex items-center gap-2 mb-2">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => navigate(-1)}
+                className="text-gray-500 hover:text-gray-700 -ml-2"
+              >
+                <ArrowLeft className="h-4 w-4 mr-1" />
+                {t("departmentListView.back")}
+              </Button>
+              <Badge
+                variant="outline"
+                className="bg-blue-50 text-blue-700 border-blue-200"
+              >
+                <Icon className="h-3 w-3 mr-1" />
+                {labels.singular}
+              </Badge>
+            </div>
+            <h1 className="text-3xl font-bold bg-gradient-to-r from-gray-900 via-gray-800 to-gray-700 bg-clip-text text-transparent">
+              {labels.title}
+            </h1>
+            <p className="text-gray-600 mt-2 max-w-2xl">{labels.description}</p>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" className="gap-2">
+              <Download className="h-4 w-4" />
+              {t("departmentListView.export")}
+            </Button>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm">
+                  <Settings className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem>
+                  {t("departmentListView.viewSettings")}
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  {t("departmentListView.notificationSettings")}
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  {t("departmentListView.helpSupport")}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+
+        {/* Stats Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <Card className="bg-gradient-to-br from-blue-50 to-blue-100/50 border-blue-200">
+            <CardContent className="p-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-blue-600 mb-1">
+                    {t("departmentListView.total")} {labels.plural}
+                  </p>
+                  <p className="text-2xl font-bold text-blue-900">
+                    {filteredItems.length}
+                  </p>
+                  <p className="text-xs text-blue-500 mt-1">
+                    {t("departmentListView.acrossAllCategories")}
+                  </p>
+                </div>
+                <div className="w-12 h-12 bg-gradient-to-r from-blue-500 to-blue-600 rounded-xl flex items-center justify-center">
+                  <Icon className="h-6 w-6 text-white" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="bg-gradient-to-br from-green-50 to-green-100/50 border-green-200">
+            <CardContent className="p-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-primary-600 mb-1">
+                    {t("departmentListView.activePlans")}
+                  </p>
+                  <p className="text-2xl font-bold text-green-900">
+                    {filteredItems.reduce(
+                      (sum, item) => sum + Number(item.no_of_plans || 0),
+                      0
+                    )}
+                  </p>
+                  <p className="text-xs text-green-500 mt-1">
+                    {t("departmentListView.totalSubPlansCreated")}
+                  </p>
+                </div>
+                <div className="w-12 h-12 bg-gradient-to-r from-green-500 to-green-600 rounded-xl flex items-center justify-center">
+                  <Target className="h-6 w-6 text-white" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="bg-gradient-to-br from-purple-50 to-purple-100/50 border-purple-200">
+            <CardContent className="p-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-purple-600 mb-1">
+                    {t("departmentListView.avgPerformance")}
+                  </p>
+                  <p className="text-2xl font-bold text-purple-900">
+                    {Math.round(
+                      filteredItems.reduce(
+                        (sum, item) => sum + Number(item.total_weight || 0),
+                        0
+                      ) / Math.max(filteredItems.length, 1)
+                    )}
+                    %
+                  </p>
+                  <p className="text-xs text-purple-500 mt-1">
+                    {t("departmentListView.averageWeightAcrossAll")}
+                  </p>
+                </div>
+                <div className="w-12 h-12 bg-gradient-to-r from-purple-500 to-purple-600 rounded-xl flex items-center justify-center">
+                  <TrendingUp className="h-6 w-6 text-white" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="bg-gradient-to-br from-orange-50 to-orange-100/50 border-orange-200">
+            <CardContent className="p-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-orange-600 mb-1">
+                    {t("departmentListView.completionRate")}
+                  </p>
+                  <p className="text-2xl font-bold text-orange-900">
+                    {Math.round(
+                      (filteredItems.filter(
+                        (item) => Number(item.no_of_plans || 0) > 0
+                      ).length /
+                        Math.max(filteredItems.length, 1)) *
+                        100
+                    )}
+                    %
+                  </p>
+                  <p className="text-xs text-orange-500 mt-1">
+                    {labels.plural} {t("departmentListView.completionRateDesc")}
+                  </p>
+                </div>
+                <div className="w-12 h-12 bg-gradient-to-r from-orange-500 to-orange-600 rounded-xl flex items-center justify-center">
+                  <CheckCircle className="h-6 w-6 text-white" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </motion.div>
+
+      {/* Filters and Controls */}
+      <div className="space-y-4">
+        <div className="flex flex-col lg:flex-row gap-4">
+          {/* Search */}
+          <div className="flex-1 relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+            <Input
+              placeholder={`${t(
+                "departmentListView.searchDepartments"
+              )} ${labels.plural.toLowerCase()}...`}
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="pl-9"
+            />
+          </div>
+
+          {/* Tabs */}
+          <Tabs
+            defaultValue="all"
+            className="w-full lg:w-auto"
+            onValueChange={setActiveTab}
+          >
+            <TabsList className="grid grid-cols-4 w-full lg:w-auto">
+              <TabsTrigger value="all" className="flex items-center gap-2">
+                <Grid className="h-4 w-4" />
+                {t("departmentListView.all")}
+                <Badge
+                  variant="secondary"
+                  className="ml-1 px-1.5 py-0.5 text-xs"
+                >
+                  {allItems.length}
+                </Badge>
+              </TabsTrigger>
+              <TabsTrigger
+                value="departments"
+                className="flex items-center gap-2"
+              >
+                <Building2 className="h-4 w-4" />
+                {t("departmentListView.departments")}
+                <Badge
+                  variant="secondary"
+                  className="ml-1 px-1.5 py-0.5 text-xs"
+                >
+                  {departments.length}
+                </Badge>
+              </TabsTrigger>
+              <TabsTrigger value="teams" className="flex items-center gap-2">
+                <Users className="h-4 w-4" />
+                {t("departmentListView.teams")}
+                <Badge
+                  variant="secondary"
+                  className="ml-1 px-1.5 py-0.5 text-xs"
+                >
+                  {teamDepartments.length}
+                </Badge>
+              </TabsTrigger>
+              <TabsTrigger value="mine" className="flex items-center gap-2">
+                <UserPlus className="h-4 w-4" />
+                {t("departmentListView.mine")}
+                <Badge
+                  variant="secondary"
+                  className="ml-1 px-1.5 py-0.5 text-xs"
+                >
+                  {myDepartments.length || 1}
+                </Badge>
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
+
+        {/* View Controls and Sort */}
+        <div className="flex flex-wrap items-center justify-between gap-4">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium text-gray-700">
+              {t("departmentListView.view")}:
+            </span>
+            <div className="inline-flex rounded-lg border border-gray-200 p-1 bg-gray-50">
+              <Button
+                variant={viewMode === "grid" ? "default" : "ghost"}
+                size="sm"
+                onClick={() => setViewMode("grid")}
+                className="gap-2"
+              >
+                <Grid className="h-4 w-4" />
+                {t("departmentListView.gridView")}
+              </Button>
+              <Button
+                variant={viewMode === "list" ? "default" : "ghost"}
+                size="sm"
+                onClick={() => setViewMode("list")}
+                className="gap-2"
+              >
+                <List className="h-4 w-4" />
+                {t("departmentListView.listView")}
+              </Button>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            {canRequestApproval && (
+              <motion.div
+                initial={{ opacity: 0, scale: 0.9 }}
+                animate={{ opacity: 1, scale: 1 }}
+                className="relative"
+              >
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button
+                        variant="outline"
+                        size="lg"
+                        className="w-9 h-9 p-0 bg-gradient-to-r from-green-50 to-emerald-50 border-green-200 text-primary-600 hover:bg-primary-100 hover:text-primary-700 hover:border-green-300 group relative overflow-hidden"
+                        onClick={() => setIsRequestApprovalDialogOpen(true)}
+                        disabled={requestApprovalMutation.isPending}
+                      >
+                        {/* Animated background effect */}
+                        <div className="absolute inset-0 bg-gradient-to-r from-green-400/10 to-emerald-400/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+
+                        {/* Pulsing animation when ready for approval */}
+                        <motion.div
+                          className="absolute inset-0 border-2 border-green-400 rounded-lg"
+                          animate={{
+                            scale: [1, 1.05, 1],
+                            opacity: [0.5, 0.8, 0.5],
+                          }}
+                          transition={{
+                            duration: 2,
+                            repeat: Infinity,
+                            repeatType: "loop",
+                          }}
+                        />
+
+                        <Send className="h-4 w-4 relative z-10" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom">
+                      <p>{t("departmentListView.allPlansTotal100")}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </motion.div>
+            )}
+
+            {/* If not ready for approval, show a disabled button with explanation */}
+            {!canRequestApproval && (
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="outline"
+                      size="lg"
+                      className="w-9 h-9 p-0 bg-gray-50 border-gray-200 text-gray-400 cursor-not-allowed relative"
+                      disabled
+                    >
+                      <Send className="h-4 w-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom" className="max-w-xs">
+                    <div className="space-y-2">
+                      <p className="font-medium">
+                        {t("departmentListView.approvalRequirementsNotMet")}:
+                      </p>
+                      <ul className="text-sm space-y-1">
+                        <li className="flex items-center gap-1">
+                          {Math.abs(currentTotalWeight - 100) < 0.01 ? (
+                            <CheckCircle className="h-3 w-3 text-green-500" />
+                          ) : (
+                            <XCircle className="h-3 w-3 text-red-500" />
+                          )}
+                          {t("departmentListView.totalWeightMust100")} (
+                          {t("departmentListView.current")}:{" "}
+                          {currentTotalWeight.toFixed(1)}%)
+                        </li>
+                        <li className="flex items-center gap-1">
+                          <CheckCircle className="h-3 w-3 text-green-500" />
+                          {t("departmentListView.allDepartmentsMustHavePlans")}
+                        </li>
+                        <li className="flex items-center gap-1">
+                          <CheckCircle className="h-3 w-3 text-green-500" />
+                          {t("departmentListView.allPlansMustBeActive")}
+                        </li>
+                      </ul>
+                      <p className="text-xs text-gray-500 pt-1">
+                        {t("departmentListView.completeAllRequirements")} to
+                        enable approval request
+                      </p>
+                    </div>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            )}
+          </div>
+          <div className="flex items-center gap-4">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm" className="gap-2">
+                  <Filter className="h-4 w-4" />
+                  {t("departmentListView.sort")}
+                  {sortOrder === "asc" ? (
+                    <ChevronUp className="h-4 w-4" />
+                  ) : (
+                    <ChevronDown className="h-4 w-4" />
+                  )}
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => handleSort("name")}>
+                  {t("departmentListView.name")}{" "}
+                  {sortBy === "name" && (sortOrder === "asc" ? "↑" : "↓")}
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => handleSort("weight")}>
+                  {t("departmentListView.weight")}{" "}
+                  {sortBy === "weight" && (sortOrder === "asc" ? "↑" : "↓")}
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => handleSort("plans")}>
+                  {t("departmentListView.plans")}{" "}
+                  {sortBy === "plans" && (sortOrder === "asc" ? "↑" : "↓")}
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => handleSort("rank")}>
+                  {t("departmentListView.rank")}{" "}
+                  {sortBy === "rank" && (sortOrder === "asc" ? "↑" : "↓")}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+      </div>
+
+      {/* Departments Grid/List View */}
+      <AnimatePresence mode="wait">
+        {viewMode === "grid" ? (
+          <motion.div
+            key="grid"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6"
+          >
+            {filteredItems.map((item, index) => (
+              <motion.div
+                key={item.position_id}
+                initial={{ opacity: 0, scale: 0.9 }}
+                animate={{ opacity: 1, scale: 1 }}
+                transition={{ delay: index * 0.05 }}
+                className="group"
+              >
+                <Card className="h-full hover:shadow-xl transition-all duration-300 border border-gray-200/50 hover:border-blue-300 overflow-hidden hover:-translate-y-1">
+                  {/* Card Header with Gradient */}
+                  <div
+                    className={`${getSectorColor(
+                      index
+                    )} p-6 relative overflow-hidden`}
+                  >
+                    <div className="flex items-center justify-between mb-4">
+                      <div className="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur-sm">
+                        <Icon className="h-6 w-6 text-white" />
+                      </div>
+                      <motion.div
+                        whileHover={{ x: 5 }}
+                        className="opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+                      >
+                        <ArrowRight className="h-5 w-5 text-white/80" />
+                      </motion.div>
+                    </div>
+
+                    <div className="flex items-center justify-between">
+                      <h3 className="text-lg font-bold text-white line-clamp-2 pr-2">
+                        {localizedName(
+                          item.position_name || item?.planTeam_name
+                        ) || t("departmentListView.myDepartment")}
+                      </h3>
+                      {getStatusBadge(item)}
+                    </div>
+                  </div>
+
+                  {/* Card Content */}
+                  <CardContent className="p-6 space-y-4">
+                    {/* Performance Ring */}
+                    <div className="flex items-center justify-between">
+                      {getPerformanceRing(item.total_weight || 0)}
+                      <div className="space-y-2 flex-1 pl-4">
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center gap-2">
+                            <Target className="h-4 w-4 text-blue-500" />
+                            <span className="text-sm font-medium">
+                              {t("departmentListView.plans")}
+                            </span>
+                          </div>
+                          <span className="font-bold">
+                            {item.no_of_plans || 0}
+                          </span>
+                        </div>
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center gap-2">
+                            <TrendingUp className="h-4 w-4 text-green-500" />
+                            <span className="text-sm font-medium">
+                              {t("departmentListView.weight")}
+                            </span>
+                          </div>
+                          <span className="font-bold">
+                            {item.total_weight || 0}%
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Progress Bar */}
+                    {item.total_weight && (
+                      <div className="space-y-2">
+                        <div className="flex justify-between text-xs text-gray-500">
+                          <span>{t("departmentListView.progress")}</span>
+                          <span>{item.total_weight}%</span>
+                        </div>
+                        <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
+                          <motion.div
+                            initial={{ width: 0 }}
+                            animate={{ width: `${item.total_weight}%` }}
+                            transition={{ duration: 1, delay: 0.2 }}
+                            className={`h-full rounded-full ${
+                              item.total_weight >= 90
+                                ? "bg-green-500"
+                                : item.total_weight >= 70
+                                ? "bg-blue-500"
+                                : item.total_weight >= 50
+                                ? "bg-yellow-500"
+                                : "bg-red-500"
+                            }`}
+                          />
+                        </div>
+                      </div>
+                    )}
+
+                    {/* Action Buttons */}
+                    <div className="flex items-center gap-2 pt-4">
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              onClick={() =>
+                                handleDepartmentClick(item, planId as string)
+                              }
+                              variant="outline"
+                              size="sm"
+                              className="flex-1 border-blue-200 text-blue-600 hover:bg-blue-50 hover:text-blue-700"
+                            >
+                              <Eye className="h-4 w-4 mr-1" />
+                              {t("departmentListView.view")}
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>
+                              {t("departmentListView.viewDetails")}{" "}
+                              {labels.singular.toLowerCase()}
+                            </p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              onClick={() => handleCreateSubPlan(item)}
+                              size="sm"
+                              className="flex-1 bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-700 hover:to-blue-600 text-white"
+                            >
+                              <PlusIcon className="h-4 w-4 mr-1" />
+                              {t("departmentListView.newPlan")}
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>
+                              {t("departmentListView.newPlan")}{" "}
+                              {labels.singular.toLowerCase()}
+                            </p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                    </div>
+                  </CardContent>
+
+                  {/* Card Footer */}
+                  <CardFooter className="px-6 pb-6 pt-0">
+                    <div className="flex items-center justify-between text-xs text-gray-500 w-full">
+                      <div className="flex items-center gap-1">
+                        <Clock className="h-3 w-3" />
+                        <span>{t("departmentListView.updatedRecently")}</span>
+                      </div>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 w-8 p-0"
+                          >
+                            <MoreVertical className="h-4 w-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem>
+                            {t("departmentListView.viewDetailsAction")}
+                          </DropdownMenuItem>
+                          <DropdownMenuItem>
+                            {t("departmentListView.managePermissions")}
+                          </DropdownMenuItem>
+                          <DropdownMenuItem>
+                            {t("departmentListView.viewReports")}
+                          </DropdownMenuItem>
+                          <DropdownMenuSeparator />
+                          <DropdownMenuItem className="text-red-600">
+                            {t("departmentListView.archive")}
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
+                  </CardFooter>
+                </Card>
+              </motion.div>
+            ))}
+          </motion.div>
+        ) : (
+          <motion.div
+            key="list"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="space-y-4"
+          >
+            <Card className="overflow-hidden">
+              <CardContent className="p-0">
+                <div className="overflow-x-auto">
+                  <table className="w-full">
+                    <thead className="bg-gray-50">
+                      <tr>
+                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          {labels.singular}
+                        </th>
+
+                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          {t("departmentListView.plans")}
+                        </th>
+                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          {t("departmentListView.weight")}
+                        </th>
+                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          {t("departmentListView.status")}
+                        </th>
+                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          {t("departmentListView.actions")}
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-gray-200">
+                      {filteredItems.map((item, index) => (
+                        <tr
+                          key={item.position_id}
+                          className="hover:bg-gray-50 transition-colors cursor-pointer"
+                          onClick={() =>
+                            handleDepartmentClick(item, planId as string)
+                          }
+                        >
+                          <td className="px-6 py-4 whitespace-nowrap">
+                            <div className="flex items-center gap-3">
+                              <div
+                                className={`w-10 h-10 ${getSectorColor(
+                                  index
+                                )} rounded-lg flex items-center justify-center`}
+                              >
+                                <Icon className="h-5 w-5 text-white" />
+                              </div>
+                              <div>
+                                <div className="font-medium text-gray-900">
+                                  {localizedName(item.position_name)}
+                                </div>
+                                <div className="text-sm text-gray-500">
+                                  {labels.singular} ID: {item.position_id}
+                                </div>
+                              </div>
+                            </div>
+                          </td>
+
+                          <td className="px-6 py-4 whitespace-nowrap">
+                            <div className="flex items-center gap-2">
+                              <Target className="h-4 w-4 text-blue-500" />
+                              <span className="font-medium">
+                                {item.no_of_plans || 0}
+                              </span>
+                            </div>
+                          </td>
+                          <td className="px-6 py-4 whitespace-nowrap">
+                            <div className="flex items-center gap-2">
+                              <TrendingUp className="h-4 w-4 text-green-500" />
+                              <span
+                                className={`font-medium ${
+                                  (item.total_weight || 0) >= 90
+                                    ? "text-primary-600"
+                                    : (item.total_weight || 0) >= 70
+                                    ? "text-blue-600"
+                                    : (item.total_weight || 0) >= 50
+                                    ? "text-yellow-600"
+                                    : "text-red-600"
+                                }`}
+                              >
+                                {item.total_weight || 0}%
+                              </span>
+                            </div>
+                          </td>
+                          <td className="px-6 py-4 whitespace-nowrap">
+                            {getStatusBadge(item)}
+                          </td>
+                          <td className="px-6 py-4 whitespace-nowrap">
+                            <div className="flex items-center gap-2">
+                              <Button
+                                size="sm"
+                                variant="ghost"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handleCreateSubPlan(item);
+                                }}
+                                className="text-blue-600 hover:text-blue-700 hover:bg-blue-50"
+                              >
+                                <PlusIcon className="h-4 w-4" />
+                              </Button>
+                              <Button
+                                size="sm"
+                                variant="ghost"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handleDepartmentClick(item, planId as string);
+                                }}
+                                className="text-gray-600 hover:text-gray-700 hover:bg-gray-50"
+                              >
+                                <Eye className="h-4 w-4" />
+                              </Button>
+                              <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                  <Button
+                                    size="sm"
+                                    variant="ghost"
+                                    onClick={(e) => e.stopPropagation()}
+                                    className="h-8 w-8 p-0"
+                                  >
+                                    <MoreVertical className="h-4 w-4" />
+                                  </Button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent align="end">
+                                  <DropdownMenuItem>
+                                    {t("departmentListView.viewDetails")}
+                                  </DropdownMenuItem>
+                                  <DropdownMenuItem>
+                                    {t("departmentListView.exportData")}
+                                  </DropdownMenuItem>
+                                  <DropdownMenuItem>
+                                    {t("departmentListView.manageAccess")}
+                                  </DropdownMenuItem>
+                                  <DropdownMenuSeparator />
+                                  <DropdownMenuItem>
+                                    {t("departmentListView.archive")}
+                                  </DropdownMenuItem>
+                                </DropdownMenuContent>
+                              </DropdownMenu>
+                            </div>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </CardContent>
+            </Card>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Empty State for Search */}
+      {filteredItems.length === 0 && searchTerm && (
+        <Card className="border-dashed border-2">
+          <CardContent className="pt-12 pb-12 text-center">
+            <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-gradient-to-r from-gray-100 to-gray-50 flex items-center justify-center">
+              <Search className="h-10 w-10 text-gray-400" />
+            </div>
+            <h3 className="text-xl font-bold text-gray-900 mb-3">
+              {t("departmentListView.noResultsFound")}
+            </h3>
+            <p className="text-gray-600 max-w-md mx-auto mb-8">
+              {t("departmentListView.noResultsDesc")}{" "}
+              {labels.plural.toLowerCase()}{" "}
+              {t("departmentListView.noResultsDesc")} "{searchTerm}".{" "}
+              {t("departmentListView.tryDifferentSearch")}.
+            </p>
+            <Button
+              variant="outline"
+              onClick={() => setSearchTerm("")}
+              className="gap-2"
+            >
+              <XCircle className="h-4 w-4" />
+              {t("departmentListView.clearSearch")}
+            </Button>
+          </CardContent>
+        </Card>
+      )}
+      <AlertDialog
+        open={isRequestApprovalDialogOpen}
+        onOpenChange={setIsRequestApprovalDialogOpen}
+      >
+        <AlertDialogContent className="bg-white border-0 shadow-2xl rounded-2xl">
+          <AlertDialogHeader>
+            <div className="w-12 h-12 bg-blue-100 rounded-2xl flex items-center justify-center mb-4">
+              <Send className="h-6 w-6 text-blue-500" />
+            </div>
+            <AlertDialogTitle className="text-xl font-bold text-gray-900">
+              {t("departmentListView.confirmRequestApproval")}
+            </AlertDialogTitle>
+            <AlertDialogDescription className="text-gray-600">
+              {t("departmentListView.requestApprovalDesc")}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel
+              onClick={() => {
+                setIsRequestApprovalDialogOpen(false);
+              }}
+              disabled={requestApprovalMutation.isPending}
+              className="border-gray-300 text-gray-700 hover:bg-gray-50"
+            >
+              {t("departmentListView.cancel")}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleRequestApproval}
+              disabled={requestApprovalMutation.isPending}
+              className="bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white shadow-lg shadow-blue-500/25"
+            >
+              {requestApprovalMutation.isPending ? (
+                <>
+                  <div className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent mr-2" />
+                  {t("departmentListView.approvalRequesting")}
+                </>
+              ) : (
+                t("departmentListView.requestApproval")
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/PlanHierarchy.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/PlanHierarchy.tsx
new file mode 100644
index 000000000..393f569e1
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/PlanHierarchy.tsx
@@ -0,0 +1,111 @@
+import React, { useEffect, useMemo } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { useAuth } from "@/shared/context/AuthContext";
+import { getUserPositionType } from "@/performance-management/utils/positionTypeUtils";
+import { EPositionTypeKey } from "@/shared/dto/user/meDto";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import {
+  checkIsPlanInitiator,
+  useSectorList,
+} from "@/performance-management/hooks/usePlans";
+import { SectorListView } from "./SectorListView";
+import { useAuthUser } from "@/record-management/hooks/useAuthUser";
+
+const PlanHierarchy: React.FC = () => {
+  const { positionId, yearId } = useParams<{
+    positionId?: string;
+    yearId?: string;
+  }>();
+  const navigate = useNavigate();
+  const { user, selectedPositionId } = useAuth();
+  const { isLoading: isAuthLoading } = useAuthUser();
+  const isInitiator = useMemo(
+    () => checkIsPlanInitiator(user, selectedPositionId || undefined),
+    [user, selectedPositionId]
+  );
+
+  const positionType = getUserPositionType(user);
+
+  // Fetch sector list
+  const { data: sectorData, isLoading, error } = useSectorList(yearId);
+  console.log("sectorData", sectorData);
+  // Redirect non-initiators to their position-filtered plans
+  useEffect(() => {
+    if (isAuthLoading || !yearId) return;
+
+    // If user is not an initiator, redirect them to their own plans
+    if (!isInitiator) {
+      // Deputy users go to "my-plans"
+      if (positionType === EPositionTypeKey.DEPUTY) {
+        navigate(`/performance-management/${yearId}/my-plans`, {
+          replace: true,
+        });
+        return;
+      }
+
+      // Other users (directors, team leaders, employees) also go to my-plans
+      navigate(`/performance-management/${yearId}/my-plans`, {
+        replace: true,
+      });
+      return;
+    }
+
+    // If positionId is provided, redirect to the plans table with that position filter
+    if (positionId) {
+      navigate(`/performance-management/${yearId}/plans-table/${positionId}`, {
+        replace: true,
+      });
+    }
+  }, [positionId, yearId, navigate, positionType, isInitiator, isAuthLoading]);
+
+  if (isLoading || isAuthLoading) {
+    return (
+      <div className="space-y-6 p-6">
+        <Skeleton className="h-64 w-full rounded-lg" />
+        <Skeleton className="h-96 w-full rounded-lg" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-6">
+        <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
+          <h3 className="text-red-800 dark:text-red-200 font-semibold mb-2">
+            Error Loading Hierarchy
+          </h3>
+          <p className="text-red-600 dark:text-red-400">
+            {error instanceof Error
+              ? error.message
+              : "Failed to load plan hierarchy"}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!positionType) {
+    return (
+      <div className="p-6">
+        <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
+          <h3 className="text-yellow-800 dark:text-yellow-200 font-semibold mb-2">
+            Position Type Not Found
+          </h3>
+          <p className="text-yellow-600 dark:text-yellow-400">
+            Your user account does not have a valid position type assigned.
+            Please contact your administrator.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // Show sector list
+  return (
+    <div className="p-6">
+      <SectorListView sectors={sectorData?.data?.items || []} />
+    </div>
+  );
+};
+
+export default PlanHierarchy;
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/SectorDetailView.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/SectorDetailView.tsx
new file mode 100644
index 000000000..dbac0ff25
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/SectorDetailView.tsx
@@ -0,0 +1,119 @@
+import React, { useEffect, useState, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import { Button } from "@/shared/common/ui/button";
+import { ArrowLeft } from "lucide-react";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import { getPlanList } from "@/performance-management/services/api/planService";
+import { UnifiedHierarchyView } from "./UnifiedHierarchyView";
+import { EPositionTypeKey } from "@/shared/dto/user/meDto";
+
+interface SectorDetailViewProps {
+  positionId: string;
+  positionType: EPositionTypeKey;
+}
+
+export const SectorDetailView: React.FC<SectorDetailViewProps> = ({
+  positionId,
+  positionType,
+}) => {
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState(true);
+  const [hierarchyData, setHierarchyData] = useState<any>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchSectorPlans = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      // Fetch plans for this specific position
+      const response = await getPlanList(positionId, {
+        positionId,
+        take: 100,
+        skip: 0,
+      });
+
+      setHierarchyData(response?.data);
+    } catch (err: any) {
+      console.error("Failed to fetch sector plans:", err);
+      setError(err.message || "Failed to load sector plans");
+    } finally {
+      setLoading(false);
+    }
+  }, [positionId]);
+
+  useEffect(() => {
+    fetchSectorPlans();
+  }, [fetchSectorPlans]);
+
+  const handleAddPlan = (targetId?: string) => {
+    console.log("Add plan clicked for:", targetId || "current level");
+    // TODO: Implement plan creation modal
+  };
+
+  const handleManageWeekly = () => {
+    console.log("Manage weekly tasks clicked");
+    // TODO: Implement weekly tasks management modal
+  };
+
+  const handleViewTeamLead = (teamLeadId: string) => {
+    console.log("View team lead:", teamLeadId);
+    // TODO: Implement drill-down navigation
+  };
+
+  const handleViewEmployee = (employeeId: string) => {
+    console.log("View employee:", employeeId);
+    // TODO: Implement drill-down navigation
+  };
+
+  const handleBackToSectors = () => {
+    navigate("/performance-management/plans");
+  };
+
+  if (loading) {
+    return (
+      <div className="space-y-6 p-6">
+        <Skeleton className="h-64 w-full rounded-lg" />
+        <Skeleton className="h-96 w-full rounded-lg" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-6">
+        <Button
+          variant="outline"
+          onClick={handleBackToSectors}
+          className="mb-4">
+          <ArrowLeft className="mr-2 h-4 w-4" />
+          Back to Sectors
+        </Button>
+        <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
+          <h3 className="text-red-800 dark:text-red-200 font-semibold mb-2">
+            Error Loading Sector Plans
+          </h3>
+          <p className="text-red-600 dark:text-red-400">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      <Button variant="outline" onClick={handleBackToSectors} className="mb-6">
+        <ArrowLeft className="mr-2 h-4 w-4" />
+        Back to Sectors
+      </Button>
+
+      <UnifiedHierarchyView
+        positionType={positionType}
+        data={hierarchyData}
+        onAddPlan={handleAddPlan}
+        onManageWeekly={handleManageWeekly}
+        onViewTeamLead={handleViewTeamLead}
+        onViewEmployee={handleViewEmployee}
+      />
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/SectorListView.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/SectorListView.tsx
new file mode 100644
index 000000000..cb791d039
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/SectorListView.tsx
@@ -0,0 +1,355 @@
+import React from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import {
+  Building2,
+  Target,
+  TrendingUp,
+  Users,
+  ArrowRight,
+  Star,
+  Calendar,
+} from "lucide-react";
+import { motion } from "framer-motion";
+import { SectorList } from "@/performance-management/types/planTypes";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { usePlanYears } from "@/performance-management/hooks/usePlanYear";
+import { useAuth } from "@/shared/context/AuthContext";
+import { getUserPositionType } from "@/performance-management/utils/positionTypeUtils";
+
+interface SectorListViewProps {
+  sectors: SectorList[];
+}
+
+export const SectorListView: React.FC<SectorListViewProps> = ({ sectors }) => {
+  const navigate = useNavigate();
+  const { yearId } = useParams<{ yearId: string }>();
+  const localizedName = useLocalizedName();
+  const { t } = useTranslation();
+
+  // const { data: planYear } = usePlanYears(organizationId);
+  const handleSectorClick = (positionId: string) => {
+    if (yearId) {
+      navigate(`/performance-management/${yearId}/plans-table/${positionId}`);
+    }
+  };
+
+  const getSectorColor = (index: number) => {
+    const colors = [
+      "from-blue-500 to-cyan-500",
+      "from-purple-500 to-pink-500",
+      "from-green-500 to-emerald-500",
+      "from-orange-500 to-red-500",
+      "from-indigo-500 to-blue-500",
+      "from-teal-500 to-green-500",
+    ];
+    return colors[index % colors.length];
+  };
+
+  const getRankBadge = (rank: number) => {
+    if (rank === 1)
+      return "bg-gradient-to-r from-yellow-400 to-amber-500 text-white";
+    if (rank === 2)
+      return "bg-gradient-to-r from-gray-400 to-gray-500 text-white";
+    if (rank === 3)
+      return "bg-gradient-to-r from-amber-600 to-orange-500 text-white";
+    return "bg-gradient-to-r from-slate-400 to-slate-500 text-white";
+  };
+
+  const getPerformanceColor = (weight: number) => {
+    if (weight >= 90) return "text-green-500";
+    if (weight >= 75) return "text-blue-500";
+    if (weight >= 60) return "text-yellow-500";
+    return "text-red-500";
+  };
+
+  if (!sectors || sectors.length === 0) {
+    return (
+      <div className="min-h-[400px] flex items-center justify-center bg-gradient-to-br from-slate-50 to-blue-50 rounded-2xl">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="text-center"
+        >
+          <div className="w-20 h-20 bg-white/80 backdrop-blur-sm rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg border border-white/20">
+            <Building2 className="h-10 w-10 text-gray-400" />
+          </div>
+          <h3 className="text-xl font-semibold text-gray-700 mb-2">
+            {t("sectorListView.noSectorsAvailable", "No Sectors Available")}
+          </h3>
+          <p className="text-gray-500 max-w-sm">
+            {t(
+              "sectorListView.noSectorsMessage",
+              "There are no sectors to display at this time. Sectors will appear here once they are added to the system."
+            )}
+          </p>
+        </motion.div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <motion.div
+        initial={{ opacity: 0, y: -10 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4"
+      >
+        <div>
+          <h1 className="text-3xl font-bold bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent">
+            {t("sectorListView.title", "Sector Overview")}
+          </h1>
+          <p className="text-gray-600 mt-2">
+            {t(
+              "sectorListView.description",
+              "Manage and monitor performance across all sectors"
+            )}
+          </p>
+        </div>
+
+        <div className="flex items-center gap-3 bg-white/80 backdrop-blur-sm rounded-2xl px-4 py-2 shadow-sm border border-gray-200">
+          <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+          <span className="text-sm font-medium text-gray-700">
+            {sectors.length}{" "}
+            {sectors.length === 1
+              ? t("sectorListView.sector", "Sector")
+              : t("sectorListView.sectors", "Sectors")}{" "}
+            {t("sectorListView.active", "Active")}
+          </span>
+        </div>
+      </motion.div>
+
+      {/* Stats Summary */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.1 }}
+        className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"
+      >
+        <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-gray-200/50">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-600 text-sm font-medium">
+                {t("sectorListView.totalPlans", "Total Plans")}
+              </p>
+              <p className="text-3xl font-bold text-gray-900">
+                {sectors.reduce(
+                  (sum, sector) => sum + Number(sector.no_of_plans || 0),
+                  0
+                )}
+              </p>
+            </div>
+            <div className="w-12 h-12 bg-blue-500/10 rounded-2xl flex items-center justify-center">
+              <Target className="h-6 w-6 text-blue-500" />
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-gray-200/50">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-600 text-sm font-medium">
+                {t("sectorListView.avgWeight", "Avg. Weight")}
+              </p>
+              <p className="text-3xl font-bold text-gray-900">
+                {Math.round(
+                  sectors.reduce(
+                    (sum, sector) => sum + Number(sector.total_weight || 0),
+                    0
+                  ) / sectors.length
+                )}
+                %
+              </p>
+            </div>
+            <div className="w-12 h-12 bg-green-500/10 rounded-2xl flex items-center justify-center">
+              <TrendingUp className="h-6 w-6 text-green-500" />
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-gray-200/50">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-600 text-sm font-medium">
+                {t("sectorListView.activeSectors", "Active Sectors")}
+              </p>
+              <p className="text-3xl font-bold text-gray-900">
+                {sectors.filter((s) => Number(s.no_of_plans) > 0).length}
+              </p>
+            </div>
+            <div className="w-12 h-12 bg-purple-500/10 rounded-2xl flex items-center justify-center">
+              <Users className="h-6 w-6 text-purple-500" />
+            </div>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Sectors Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
+        {sectors.map((sector, index) => (
+          <motion.div
+            key={sector.position_id}
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ delay: index * 0.1 }}
+            onClick={() => handleSectorClick(sector.position_id)}
+            className="group bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg hover:shadow-2xl cursor-pointer transform hover:-translate-y-2 transition-all duration-300 border border-gray-200/50 hover:border-purple-300 overflow-hidden"
+          >
+            {/* Header with Gradient */}
+            <div
+              className={`bg-gradient-to-r ${getSectorColor(
+                index
+              )} p-6 relative overflow-hidden`}
+            >
+              <div className="absolute top-4 right-4">
+                <div
+                  className={`px-3 py-1 rounded-full text-xs font-bold ${getRankBadge(
+                    sector.position_rank
+                  )} shadow-lg`}
+                >
+                  #{sector.position_rank}
+                </div>
+              </div>
+
+              <div className="flex items-center justify-between mb-4">
+                <div className="w-12 h-12 bg-white/20 rounded-2xl flex items-center justify-center backdrop-blur-sm">
+                  <Building2 className="h-6 w-6 text-white" />
+                </div>
+                <motion.div
+                  whileHover={{ x: 5 }}
+                  className="opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+                >
+                  <ArrowRight className="h-5 w-5 text-white/80" />
+                </motion.div>
+              </div>
+
+              <h3 className="text-xl font-bold text-white line-clamp-2 leading-tight">
+                {localizedName(sector.position_name)}
+              </h3>
+            </div>
+
+            {/* Content */}
+            <div className="p-6 space-y-4">
+              {/* Plans Count */}
+              <div className="flex items-center justify-between p-3 bg-blue-50 rounded-xl">
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 bg-blue-500/10 rounded-lg flex items-center justify-center">
+                    <Target className="h-5 w-5 text-blue-600" />
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium text-gray-600">
+                      {t("sectorListView.plans", "Plans")}
+                    </p>
+                    <p className="text-lg font-bold text-gray-900">
+                      {sector.no_of_plans || 0}
+                    </p>
+                  </div>
+                </div>
+                {sector.no_of_plans > 0 && (
+                  <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+                )}
+              </div>
+
+              {/* Total Weight */}
+              {sector.total_weight !== null && (
+                <div className="flex items-center justify-between p-3 bg-green-50 rounded-xl">
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 bg-green-500/10 rounded-lg flex items-center justify-center">
+                      <TrendingUp className="h-5 w-5 text-primary-600" />
+                    </div>
+                    <div>
+                      <p className="text-sm font-medium text-gray-600">
+                        {t("sectorListView.weight", "Weight")}
+                      </p>
+                      <p
+                        className={`text-lg font-bold ${getPerformanceColor(
+                          sector.total_weight
+                        )}`}
+                      >
+                        {sector.total_weight}%
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Performance Indicator */}
+                  <div className="flex items-center gap-1">
+                    {[...Array(5)].map((_, i) => (
+                      <Star
+                        key={i}
+                        className={`h-4 w-4 ${
+                          i < Math.floor(sector.total_weight! / 20)
+                            ? "text-yellow-400 fill-current"
+                            : "text-gray-300"
+                        }`}
+                      />
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Additional Info */}
+              <div className="flex items-center justify-between text-sm text-gray-500 pt-2">
+                <div className="flex items-center gap-1">
+                  <Calendar className="h-4 w-4" />
+                  <span>{t("sectorListView.active", "Active")}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+                  <span className="font-medium">
+                    {t("sectorListView.online", "Online")}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {/* Hover Effect Overlay */}
+            <div className="absolute inset-0 bg-gradient-to-br from-purple-500/5 to-blue-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-2xl pointer-events-none"></div>
+          </motion.div>
+        ))}
+      </div>
+
+      {/* Footer Summary */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.5 }}
+        className="bg-gradient-to-r from-blue-50 to-purple-50 rounded-2xl p-6 border border-blue-200/50 mt-8"
+      >
+        <div className="flex items-center justify-between">
+          <div>
+            <h3 className="text-lg font-semibold text-gray-800">
+              {t("sectorListView.performanceSummary", "Performance Summary")}
+            </h3>
+            <p className="text-gray-600 text-sm">
+              {t(
+                "sectorListView.performanceSummaryDescription",
+                "All sectors are actively monitored and updated in real-time"
+              )}
+            </p>
+          </div>
+          <div className="flex items-center gap-4 text-sm">
+            <div className="flex items-center gap-2">
+              <div className="w-3 h-3 bg-green-500 rounded-full"></div>
+              <span className="text-gray-700">
+                {t("sectorListView.onTrack", "On Track")}
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
+              <span className="text-gray-700">
+                {t("sectorListView.needsAttention", "Needs Attention")}
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="w-3 h-3 bg-red-500 rounded-full"></div>
+              <span className="text-gray-700">
+                {t("sectorListView.atRisk", "At Risk")}
+              </span>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/SubPlanListView.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/SubPlanListView.tsx
new file mode 100644
index 000000000..34853d1e2
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/SubPlanListView.tsx
@@ -0,0 +1,446 @@
+import React from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import {
+  Building2,
+  Target,
+  TrendingUp,
+  Users,
+  ArrowRight,
+  Star,
+  Calendar,
+  ArrowLeft,
+  PlusIcon,
+} from "lucide-react";
+import { motion } from "framer-motion";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useSubPlans } from "@/performance-management/hooks/usePlans";
+import { Button } from "@/shared/common/ui/button";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import { SectorList } from "@/performance-management/types/planTypes";
+import { EPositionTypeKey } from "@/shared/dto/user/meDto";
+import { useTranslation } from "react-i18next";
+
+interface SubPlanListViewProps {
+  positionType: EPositionTypeKey;
+}
+
+export const SubPlanListView: React.FC<SubPlanListViewProps> = ({
+  positionType,
+}) => {
+  const navigate = useNavigate();
+  const { yearId, planId } = useParams<{ yearId: string; planId: string }>();
+  const localizedName = useLocalizedName();
+  const { t } = useTranslation();
+
+  const POSITION_TYPE_LABELS = {
+    [EPositionTypeKey.DEPUTY]: {
+      singular: t("subPlanListView.department"),
+      plural: t("subPlanListView.departments"),
+      title: t("subPlanListView.departmentOverview"),
+      description: t("subPlanListView.departmentDescription"),
+    },
+    [EPositionTypeKey.DIRECTOR]: {
+      singular: t("subPlanListView.director"),
+      plural: t("subPlanListView.directors"),
+      title: t("subPlanListView.directorOverview"),
+      description: t("subPlanListView.directorDescription"),
+    },
+    [EPositionTypeKey.TEAM_LEADER]: {
+      singular: t("subPlanListView.teamLeader"),
+      plural: t("subPlanListView.teamLeaders"),
+      title: t("subPlanListView.teamLeaderOverview"),
+      description: t("subPlanListView.teamLeaderDescription"),
+    },
+    [EPositionTypeKey.EMPLOYEE]: {
+      singular: t("subPlanListView.employee"),
+      plural: t("subPlanListView.employees"),
+      title: t("subPlanListView.employeeOverview"),
+      description: t("subPlanListView.employeeDescription"),
+    },
+  } as const;
+
+  const { data, isLoading, error } = useSubPlans(planId || "");
+  const items: SectorList[] = data?.data?.items || [];
+
+  const labels =
+    POSITION_TYPE_LABELS[positionType as keyof typeof POSITION_TYPE_LABELS] ||
+    POSITION_TYPE_LABELS[EPositionTypeKey.DEPUTY];
+
+  const handleItemClick = (positionId: string, planId: string) => {
+    if (yearId) {
+      // Navigate to plans table for this sub-plan
+      navigate(
+        `/performance-management/${yearId}/plans-table/${positionId}/${planId}`
+      );
+    }
+  };
+
+  const handleCreateSubPlan = (item: SectorList) => {
+    if (yearId && planId) {
+      // Navigate to create plan with both positionId and parentPlanId
+      navigate(
+        `/performance-management/${yearId}/plans/new/${item.position_id}?parentPlanId=${planId}`
+      );
+    }
+  };
+
+  const getSectorColor = (index: number) => {
+    const colors = [
+      "from-blue-500 to-cyan-500",
+      "from-purple-500 to-pink-500",
+      "from-green-500 to-emerald-500",
+      "from-orange-500 to-red-500",
+      "from-indigo-500 to-blue-500",
+      "from-teal-500 to-green-500",
+    ];
+    return colors[index % colors.length];
+  };
+
+  const getRankBadge = (rank: number) => {
+    if (rank === 1)
+      return "bg-gradient-to-r from-yellow-400 to-amber-500 text-white";
+    if (rank === 2)
+      return "bg-gradient-to-r from-gray-400 to-gray-500 text-white";
+    if (rank === 3)
+      return "bg-gradient-to-r from-amber-600 to-orange-500 text-white";
+    return "bg-gradient-to-r from-slate-400 to-slate-500 text-white";
+  };
+
+  const getPerformanceColor = (weight: number) => {
+    if (weight >= 90) return "text-green-500";
+    if (weight >= 75) return "text-blue-500";
+    if (weight >= 60) return "text-yellow-500";
+    return "text-red-500";
+  };
+
+  if (isLoading) {
+    return (
+      <div className="p-6 space-y-6">
+        <Skeleton className="h-64 w-full rounded-lg" />
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <Skeleton className="h-40 w-full rounded-lg" />
+          <Skeleton className="h-40 w-full rounded-lg" />
+          <Skeleton className="h-40 w-full rounded-lg" />
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-6">
+        <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
+          <h3 className="text-red-800 dark:text-red-200 font-semibold mb-2">
+            {t("subPlanListView.errorLoading")} {labels.plural}
+          </h3>
+          <p className="text-red-600 dark:text-red-400">
+            {error instanceof Error
+              ? error.message
+              : `${t(
+                  "subPlanListView.failedToLoad"
+                )} ${labels.plural.toLowerCase()}`}
+          </p>
+          <Button
+            variant="outline"
+            onClick={() => navigate(-1)}
+            className="mt-4 border-red-200 text-red-600 hover:bg-red-100"
+          >
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            {t("subPlanListView.goBack")}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (!items || items.length === 0) {
+    return (
+      <div className="p-6">
+        <Button variant="outline" onClick={() => navigate(-1)} className="mb-6">
+          <ArrowLeft className="mr-2 h-4 w-4" />
+          {t("subPlanListView.back")}
+        </Button>
+        <div className="min-h-[400px] flex items-center justify-center bg-gradient-to-br from-slate-50 to-blue-50 rounded-2xl">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="text-center"
+          >
+            <div className="w-20 h-20 bg-white/80 backdrop-blur-sm rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg border border-white/20">
+              <Building2 className="h-10 w-10 text-gray-400" />
+            </div>
+            <h3 className="text-xl font-semibold text-gray-700 mb-2">
+              {t("subPlanListView.noAvailable", { type: labels.plural })}
+            </h3>
+            <p className="text-gray-500 max-w-sm">
+              {t("subPlanListView.noSubPlansToDisplay", {
+                type: labels.plural.toLowerCase(),
+              })}
+            </p>
+          </motion.div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 space-y-6">
+      {/* Header */}
+      <motion.div
+        initial={{ opacity: 0, y: -10 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4"
+      >
+        <div>
+          <div className="flex items-center gap-2 mb-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => navigate(-1)}
+              className="text-gray-500 hover:text-gray-700 -ml-2"
+            >
+              <ArrowLeft className="h-4 w-4 mr-1" />
+              {t("subPlanListView.back")}
+            </Button>
+          </div>
+          <h1 className="text-3xl font-bold bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent">
+            {labels.title}
+          </h1>
+          <p className="text-gray-600 mt-2">{labels.description}</p>
+        </div>
+
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-3 bg-white/80 backdrop-blur-sm rounded-2xl px-4 py-2 shadow-sm border border-gray-200">
+            <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+            <span className="text-sm font-medium text-gray-700">
+              {items.length}{" "}
+              {items.length === 1 ? labels.singular : labels.plural}{" "}
+              {t("subPlanListView.active")}
+            </span>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Stats Summary */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.1 }}
+        className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"
+      >
+        <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-gray-200/50">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-600 text-sm font-medium">
+                {t("subPlanListView.totalPlans")}
+              </p>
+              <p className="text-3xl font-bold text-gray-900">
+                {items.reduce(
+                  (sum: number, item: SectorList) =>
+                    sum + (Number(item.no_of_plans) || 0),
+                  0
+                )}
+              </p>
+            </div>
+            <div className="w-12 h-12 bg-blue-500/10 rounded-2xl flex items-center justify-center">
+              <Target className="h-6 w-6 text-blue-500" />
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-gray-200/50">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-600 text-sm font-medium">
+                {t("subPlanListView.avgWeight")}
+              </p>
+              <p className="text-3xl font-bold text-gray-900">
+                {items.length > 0
+                  ? Math.round(
+                      items.reduce(
+                        (sum: number, item: SectorList) =>
+                          sum + (Number(item.total_weight) || 0),
+                        0
+                      ) / items.length
+                    )
+                  : 0}
+                %
+              </p>
+            </div>
+            <div className="w-12 h-12 bg-green-500/10 rounded-2xl flex items-center justify-center">
+              <TrendingUp className="h-6 w-6 text-green-500" />
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-gray-200/50">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-gray-600 text-sm font-medium">
+                {t("subPlanListView.active")} {labels.plural}
+              </p>
+              <p className="text-3xl font-bold text-gray-900">
+                {
+                  items.filter((s: SectorList) => Number(s.no_of_plans) > 0)
+                    .length
+                }
+              </p>
+            </div>
+            <div className="w-12 h-12 bg-purple-500/10 rounded-2xl flex items-center justify-center">
+              <Users className="h-6 w-6 text-purple-500" />
+            </div>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Items Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
+        {items.map((item: SectorList, index: number) => (
+          <motion.div
+            key={item.position_id}
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ delay: index * 0.1 }}
+            className="group bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 border border-gray-200/50 hover:border-purple-300 overflow-hidden"
+          >
+            {/* Header with Gradient */}
+            <div
+              className={`bg-gradient-to-r ${getSectorColor(
+                index
+              )} p-6 relative overflow-hidden`}
+            >
+              <div className="absolute top-4 right-4">
+                <div
+                  className={`px-3 py-1 rounded-full text-xs font-bold ${getRankBadge(
+                    item.position_rank
+                  )} shadow-lg`}
+                >
+                  #{item.position_rank}
+                </div>
+              </div>
+
+              <div className="flex items-center justify-between mb-4">
+                <div className="w-12 h-12 bg-white/20 rounded-2xl flex items-center justify-center backdrop-blur-sm">
+                  <Building2 className="h-6 w-6 text-white" />
+                </div>
+                <motion.div
+                  whileHover={{ x: 5 }}
+                  className="opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+                >
+                  <ArrowRight className="h-5 w-5 text-white/80" />
+                </motion.div>
+              </div>
+
+              <h3 className="text-xl font-bold text-white line-clamp-2 leading-tight">
+                {localizedName(item.position_name)}
+              </h3>
+            </div>
+
+            {/* Content */}
+            <div className="p-6 space-y-4">
+              {/* Plans Count */}
+              <div className="flex items-center justify-between p-3 bg-blue-50 rounded-xl">
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 bg-blue-500/10 rounded-lg flex items-center justify-center">
+                    <Target className="h-5 w-5 text-blue-600" />
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium text-gray-600">
+                      {t("subPlanListView.totalPlans")}
+                    </p>
+                    <p className="text-lg font-bold text-gray-900">
+                      {item.no_of_plans || 0}
+                    </p>
+                  </div>
+                </div>
+                {Number(item.no_of_plans) > 0 && (
+                  <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+                )}
+              </div>
+
+              {/* Total Weight */}
+              {item.total_weight !== null && (
+                <div className="flex items-center justify-between p-3 bg-green-50 rounded-xl">
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 bg-green-500/10 rounded-lg flex items-center justify-center">
+                      <TrendingUp className="h-5 w-5 text-primary-600" />
+                    </div>
+                    <div>
+                      <p className="text-sm font-medium text-gray-600">
+                        {t("subPlanListView.avgWeight")}
+                      </p>
+                      <p
+                        className={`text-lg font-bold ${getPerformanceColor(
+                          item.total_weight
+                        )}`}
+                      >
+                        {item.total_weight}%
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Performance Indicator */}
+                  <div className="flex items-center gap-1">
+                    {[...Array(5)].map((_, i) => (
+                      <Star
+                        key={i}
+                        className={`h-4 w-4 ${
+                          i < Math.floor((item.total_weight || 0) / 20)
+                            ? "text-yellow-400 fill-current"
+                            : "text-gray-300"
+                        }`}
+                      />
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Action Buttons */}
+              <div className="flex items-center gap-2 pt-4">
+                <Button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleItemClick(item.position_id, planId as string);
+                  }}
+                  variant="outline"
+                  size="sm"
+                  className="flex-1 border-blue-200 text-blue-600 hover:bg-blue-50"
+                >
+                  {t("subPlanListView.viewPlans")}
+                </Button>
+                <Button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleCreateSubPlan(item);
+                  }}
+                  size="sm"
+                  className="flex-1 bg-gradient-to-r from-purple-500 to-violet-600 hover:from-purple-600 hover:to-violet-700 text-white"
+                >
+                  <PlusIcon className="h-4 w-4 mr-1" />
+                  {t("subPlanListView.createPlan")}
+                </Button>
+              </div>
+
+              {/* Additional Info */}
+              <div className="flex items-center justify-between text-sm text-gray-500 pt-2">
+                <div className="flex items-center gap-1">
+                  <Calendar className="h-4 w-4" />
+                  <span>{t("subPlanListView.active")}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+                  <span className="font-medium">
+                    {t("subPlanListView.online")}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {/* Hover Effect Overlay */}
+            <div className="absolute inset-0 bg-gradient-to-br from-purple-500/5 to-blue-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-2xl pointer-events-none"></div>
+          </motion.div>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/UnifiedHierarchyView.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/UnifiedHierarchyView.tsx
new file mode 100644
index 000000000..fd2b11713
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/UnifiedHierarchyView.tsx
@@ -0,0 +1,373 @@
+import React, { useState } from "react";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Plus,
+  ChevronDown,
+  ChevronRight,
+  User,
+  Calendar,
+  CheckCircle2,
+} from "lucide-react";
+import { PlansTable } from "./shared/PlansTable";
+import { EPositionTypeKey } from "@/shared/dto/user/meDto";
+import {
+  WeeklyTask,
+  Employee,
+  TeamLead,
+  Directorate,
+} from "@/performance-management/types/planHierarchyTypes";
+
+// Props for the unified view
+interface UnifiedHierarchyViewProps {
+  positionType: EPositionTypeKey;
+  data: any; // Will be typed based on API response
+  onAddPlan: (targetId?: string) => void;
+  onManageWeekly?: () => void;
+  onViewTeamLead?: (teamLeadId: string) => void;
+  onViewEmployee?: (employeeId: string) => void;
+}
+
+export const UnifiedHierarchyView: React.FC<UnifiedHierarchyViewProps> = ({
+  positionType,
+  data,
+  onAddPlan,
+  onManageWeekly,
+  onViewTeamLead,
+  onViewEmployee,
+}) => {
+  const [expandedDirectorate, setExpandedDirectorate] = useState<string | null>(
+    null
+  );
+
+  const toggleDirectorate = (id: string) => {
+    setExpandedDirectorate((prev) => (prev === id ? null : id));
+  };
+
+  // Deputy (Sector) View
+  if (positionType === EPositionTypeKey.DEPUTY) {
+    return (
+      <div className="space-y-6">
+        {/* Sector Plans Overview */}
+        <div className="bg-white dark:bg-gray-900 rounded-lg shadow p-6">
+          <div className="flex justify-between items-center mb-4">
+            <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
+              Sector Plans
+            </h2>
+            <Button onClick={() => onAddPlan()}>
+              <Plus className="mr-2 h-4 w-4" />
+              Add Sector Plan
+            </Button>
+          </div>
+          <PlansTable plans={data?.plans || []} editable />
+        </div>
+
+        {/* Directorates Section */}
+        <div className="bg-white dark:bg-gray-900 rounded-lg shadow p-6">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
+            Directorates
+          </h2>
+
+          <div className="space-y-2">
+            {(data?.directorates || []).map((dir: Directorate) => (
+              <div
+                key={dir.id}
+                className="border border-gray-200 dark:border-gray-700 rounded-lg">
+                {/* Directorate Header */}
+                <div
+                  className="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800"
+                  onClick={() => toggleDirectorate(dir.id)}>
+                  <div className="flex items-center gap-3">
+                    {expandedDirectorate === dir.id ? (
+                      <ChevronDown className="h-5 w-5 text-gray-500" />
+                    ) : (
+                      <ChevronRight className="h-5 w-5 text-gray-500" />
+                    )}
+                    <div>
+                      <h3 className="font-medium text-gray-900 dark:text-gray-100">
+                        {dir.name}
+                      </h3>
+                      <p className="text-sm text-gray-500 dark:text-gray-400">
+                        {dir.planCount} plans • {dir.progress}% complete
+                      </p>
+                    </div>
+                  </div>
+                  <Button
+                    size="sm"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onAddPlan(dir.id);
+                    }}>
+                    <Plus className="h-4 w-4 mr-1" />
+                    Add Plan
+                  </Button>
+                </div>
+
+                {/* Expanded Directorate Plans */}
+                {expandedDirectorate === dir.id && (
+                  <div className="p-4 border-t border-gray-200 dark:border-gray-700">
+                    {dir.plans?.length > 0 ? (
+                      <PlansTable plans={dir.plans} />
+                    ) : (
+                      <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+                        No plans added yet
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Director (Directorate) View
+  if (positionType === EPositionTypeKey.DIRECTOR) {
+    return (
+      <div className="space-y-6">
+        {/* Directorate Plans */}
+        <div className="bg-white dark:bg-gray-900 rounded-lg shadow p-6">
+          <div className="flex justify-between items-center mb-4">
+            <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
+              My Plans
+            </h2>
+            <Button onClick={() => onAddPlan()}>
+              <Plus className="mr-2 h-4 w-4" />
+              Add Plan
+            </Button>
+          </div>
+          <PlansTable plans={data?.plans || []} editable />
+        </div>
+
+        {/* Team Leads List */}
+        <div className="bg-white dark:bg-gray-900 rounded-lg shadow p-6">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
+            Team Leads
+          </h2>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {(data?.teamLeads || []).map((tl: TeamLead) => (
+              <div
+                key={tl.id}
+                className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition cursor-pointer"
+                onClick={() => onViewTeamLead?.(tl.id)}>
+                <h3 className="font-medium text-gray-900 dark:text-gray-100 mb-2">
+                  {tl.name}
+                </h3>
+                <div className="space-y-1 text-sm text-gray-600 dark:text-gray-400">
+                  <p>{tl.planCount} plans assigned</p>
+                  <div className="flex items-center gap-2">
+                    <div className="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+                      <div
+                        className="bg-purple-600 h-2 rounded-full transition-all"
+                        style={{ width: `${tl.progress}%` }}
+                      />
+                    </div>
+                    <span>{tl.progress}%</span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Team Leader View
+  if (positionType === EPositionTypeKey.TEAM_LEADER) {
+    return (
+      <div className="space-y-6">
+        {/* Team Lead Plans */}
+        <div className="bg-white dark:bg-gray-900 rounded-lg shadow p-6">
+          <div className="flex justify-between items-center mb-4">
+            <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
+              My Plans
+            </h2>
+            <Button onClick={() => onAddPlan()}>
+              <Plus className="mr-2 h-4 w-4" />
+              Add Plan
+            </Button>
+          </div>
+          <PlansTable plans={data?.plans || []} />
+        </div>
+
+        {/* Weekly Milestones */}
+        <div className="bg-white dark:bg-gray-900 rounded-lg shadow p-6">
+          <div className="flex justify-between items-center mb-4">
+            <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
+              Weekly Milestones
+            </h2>
+            <Button onClick={onManageWeekly} variant="outline">
+              Manage Weekly Tasks
+            </Button>
+          </div>
+          <div className="space-y-2">
+            {(data?.weeklyMilestones || []).length > 0 ? (
+              data.weeklyMilestones.map((milestone: string, index: number) => (
+                <div
+                  key={index}
+                  className="flex items-center gap-2 p-3 bg-gray-50 dark:bg-gray-800 rounded">
+                  <div className="h-2 w-2 rounded-full bg-purple-600"></div>
+                  <span className="text-sm text-gray-700 dark:text-gray-300">
+                    {milestone}
+                  </span>
+                </div>
+              ))
+            ) : (
+              <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+                No weekly milestones set
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Team Members */}
+        <div className="bg-white dark:bg-gray-900 rounded-lg shadow p-6">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
+            Team Members
+          </h2>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {(data?.employees || []).map((employee: Employee) => (
+              <div
+                key={employee.id}
+                className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition cursor-pointer"
+                onClick={() => onViewEmployee?.(employee.id)}>
+                <div className="flex items-start gap-3">
+                  <div className="p-2 bg-purple-100 dark:bg-purple-900 rounded">
+                    <User className="h-5 w-5 text-purple-600 dark:text-purple-300" />
+                  </div>
+                  <div className="flex-1">
+                    <h3 className="font-medium text-gray-900 dark:text-gray-100">
+                      {employee.name}
+                    </h3>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      {employee.position}
+                    </p>
+                    <div className="mt-2 space-y-1 text-xs text-gray-500 dark:text-gray-400">
+                      <p>
+                        {employee.planCount} plans • {employee.weeklyTasksCount}{" "}
+                        weekly tasks
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Employee View
+  if (positionType === EPositionTypeKey.EMPLOYEE) {
+    return (
+      <div className="space-y-6">
+        {/* Weekly Expectations */}
+        <div className="bg-white dark:bg-gray-900 rounded-lg shadow p-6">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
+            <Calendar className="h-5 w-5" />
+            My Weekly Expectations
+          </h2>
+
+          {(data?.weeklyTasks || []).length > 0 ? (
+            <div className="space-y-3">
+              {data.weeklyTasks.map((task: WeeklyTask) => (
+                <div
+                  key={task.id}
+                  className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+                  <div className="flex items-start justify-between mb-2">
+                    <h3 className="font-medium text-gray-900 dark:text-gray-100">
+                      {task.description}
+                    </h3>
+                    <span
+                      className={`px-2 py-1 rounded-full text-xs font-medium ${
+                        task.status === "completed"
+                          ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-primary-300"
+                          : task.status === "in-progress"
+                          ? "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300"
+                          : "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300"
+                      }`}>
+                      {task.status}
+                    </span>
+                  </div>
+                  <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
+                    <strong>Expected Outcome:</strong> {task.expectedOutcome}
+                  </p>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">
+                    <strong>Deadline:</strong> {task.deadline}
+                  </p>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+              No weekly tasks assigned yet
+            </div>
+          )}
+        </div>
+
+        {/* Assigned Plans */}
+        <div className="bg-white dark:bg-gray-900 rounded-lg shadow p-6">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
+            <CheckCircle2 className="h-5 w-5" />
+            Assigned Plans
+          </h2>
+          <PlansTable plans={data?.plans || []} />
+        </div>
+
+        {/* Performance Summary */}
+        <div className="bg-white dark:bg-gray-900 rounded-lg shadow p-6">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
+            Performance Summary
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
+              <div className="text-sm text-purple-600 dark:text-purple-400 mb-1">
+                Total Plans
+              </div>
+              <div className="text-2xl font-bold text-purple-900 dark:text-purple-100">
+                {data?.plans?.length || 0}
+              </div>
+            </div>
+            <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+              <div className="text-sm text-blue-600 dark:text-blue-400 mb-1">
+                Weekly Tasks
+              </div>
+              <div className="text-2xl font-bold text-blue-900 dark:text-blue-100">
+                {data?.weeklyTasks?.length || 0}
+              </div>
+            </div>
+            <div className="p-4 bg-green-50 dark:bg-primary-900/20 rounded-lg">
+              <div className="text-sm text-primary-600 dark:text-primary-400 mb-1">
+                Completed
+              </div>
+              <div className="text-2xl font-bold text-green-900 dark:text-green-100">
+                {data?.weeklyTasks?.filter(
+                  (t: WeeklyTask) => t.status === "completed"
+                ).length || 0}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Fallback for unsupported position types
+  return (
+    <div className="p-6">
+      <div className="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+        <h3 className="text-gray-800 dark:text-gray-200 font-semibold mb-2">
+          Unsupported Position Type
+        </h3>
+        <p className="text-gray-600 dark:text-gray-400">
+          Your position type is not supported in the plan hierarchy view.
+        </p>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/shared/PlansTable.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/shared/PlansTable.tsx
new file mode 100644
index 000000000..1287be5a2
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/shared/PlansTable.tsx
@@ -0,0 +1,136 @@
+import React from "react";
+import { Button } from "@/shared/common/ui/button";
+import { Edit, Trash2 } from "lucide-react";
+
+import { Plan } from "@/performance-management/types/planHierarchyTypes";
+
+interface PlansTableProps {
+  plans: Plan[];
+  editable?: boolean;
+  onEdit?: (planId: string) => void;
+  onDelete?: (planId: string) => void;
+}
+
+const StatusBadge: React.FC<{ status: Plan["status"] }> = ({ status }) => {
+  const statusColors = {
+    pending:
+      "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300",
+    "in-progress":
+      "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
+    completed:
+      "bg-green-100 text-green-800 dark:bg-green-900 dark:text-primary-300",
+    overdue: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300",
+  };
+
+  return (
+    <span
+      className={`px-2 py-1 rounded-full text-xs font-medium ${statusColors[status]}`}>
+      {status}
+    </span>
+  );
+};
+
+const ProgressBar: React.FC<{ progress: number }> = ({ progress }) => {
+  return (
+    <div className="w-full">
+      <div className="flex items-center gap-2">
+        <div className="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+          <div
+            className="bg-purple-600 h-2 rounded-full transition-all"
+            style={{ width: `${progress}%` }}
+          />
+        </div>
+        <span className="text-sm text-gray-600 dark:text-gray-400 min-w-[3rem]">
+          {progress}%
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export const PlansTable: React.FC<PlansTableProps> = ({
+  plans,
+  editable = false,
+  onEdit,
+  onDelete,
+}) => {
+  if (!plans || plans.length === 0) {
+    return (
+      <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+        No plans available
+      </div>
+    );
+  }
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+        <thead className="bg-gray-100 dark:bg-gray-800">
+          <tr>
+            <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-200">
+              Plan Name
+            </th>
+            <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-200">
+              Weight
+            </th>
+            <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-200">
+              Timeline
+            </th>
+            <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-200">
+              Status
+            </th>
+            <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-200">
+              Progress
+            </th>
+            {editable && (
+              <th className="px-4 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-200">
+                Actions
+              </th>
+            )}
+          </tr>
+        </thead>
+        <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
+          {plans.map((plan) => (
+            <tr
+              key={plan.id}
+              className="hover:bg-gray-50 dark:hover:bg-gray-800">
+              <td className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">
+                {plan.name}
+              </td>
+              <td className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">
+                {plan.weight}
+              </td>
+              <td className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">
+                {plan.timeline}
+              </td>
+              <td className="px-4 py-3">
+                <StatusBadge status={plan.status} />
+              </td>
+              <td className="px-4 py-3">
+                <ProgressBar progress={plan.progress} />
+              </td>
+              {editable && (
+                <td className="px-4 py-3">
+                  <div className="flex gap-2">
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => onEdit?.(plan.id)}>
+                      <Edit className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="destructive"
+                      onClick={() => onDelete?.(plan.id)}>
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </td>
+              )}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/views/DeputyView.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/views/DeputyView.tsx
new file mode 100644
index 000000000..024194d24
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/views/DeputyView.tsx
@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import { Button } from "@/shared/common/ui/button";
+import { Plus, ChevronDown, ChevronRight } from "lucide-react";
+import { PlansTable } from "../shared/PlansTable";
+import { DeputyData } from "@/performance-management/types/planHierarchyTypes";
+
+interface DeputyViewProps {
+  sectorData: DeputyData;
+  onAddPlan: (targetId?: string) => void;
+}
+
+export const DeputyView: React.FC<DeputyViewProps> = ({
+  sectorData,
+  onAddPlan,
+}) => {
+  const [expandedDirectorate, setExpandedDirectorate] = useState<string | null>(
+    null
+  );
+
+  const toggleDirectorate = (id: string) => {
+    setExpandedDirectorate((prev) => (prev === id ? null : id));
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Sector Plans Overview */}
+      <div className="bg-white dark:bg-gray-900 rounded-lg shadow p-6">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
+            Sector Plans
+          </h2>
+          <Button onClick={() => onAddPlan()}>
+            <Plus className="mr-2 h-4 w-4" />
+            Add Sector Plan
+          </Button>
+        </div>
+        <PlansTable plans={sectorData.plans} editable />
+      </div>
+
+      {/* Directorates Section */}
+      <div className="bg-white dark:bg-gray-900 rounded-lg shadow p-6">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
+          Directorates
+        </h2>
+
+        {/* Directorates List */}
+        <div className="space-y-2">
+          {sectorData.directorates.map((dir) => (
+            <div
+              key={dir.id}
+              className="border border-gray-200 dark:border-gray-700 rounded-lg">
+              {/* Directorate Header */}
+              <div
+                className="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800"
+                onClick={() => toggleDirectorate(dir.id)}>
+                <div className="flex items-center gap-3">
+                  {expandedDirectorate === dir.id ? (
+                    <ChevronDown className="h-5 w-5 text-gray-500" />
+                  ) : (
+                    <ChevronRight className="h-5 w-5 text-gray-500" />
+                  )}
+                  <div>
+                    <h3 className="font-medium text-gray-900 dark:text-gray-100">
+                      {dir.name}
+                    </h3>
+                    <p className="text-sm text-gray-500 dark:text-gray-400">
+                      {dir.planCount} plans • {dir.progress}% complete
+                    </p>
+                  </div>
+                </div>
+                <Button
+                  size="sm"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onAddPlan(dir.id);
+                  }}>
+                  <Plus className="h-4 w-4 mr-1" />
+                  Add Plan
+                </Button>
+              </div>
+
+              {/* Expanded Directorate Plans */}
+              {expandedDirectorate === dir.id && (
+                <div className="p-4 border-t border-gray-200 dark:border-gray-700">
+                  {dir.plans.length > 0 ? (
+                    <PlansTable plans={dir.plans} />
+                  ) : (
+                    <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+                      No plans added yet
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/views/DirectorView.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/views/DirectorView.tsx
new file mode 100644
index 000000000..b591ba36f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/views/DirectorView.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+import { Button } from "@/shared/common/ui/button";
+import { Plus } from "lucide-react";
+import { PlansTable } from "../shared/PlansTable";
+import { DirectorData } from "@/performance-management/types/planHierarchyTypes";
+
+interface DirectorViewProps {
+  directorateData: DirectorData;
+  onAddPlan: () => void;
+  onViewTeamLead: (teamLeadId: string) => void;
+}
+
+export const DirectorView: React.FC<DirectorViewProps> = ({
+  directorateData,
+  onAddPlan,
+  onViewTeamLead,
+}) => {
+  return (
+    <div className="space-y-6">
+      {/* Directorate Plans */}
+      <div className="bg-white dark:bg-gray-900 rounded-lg shadow p-6">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
+            My Plans
+          </h2>
+          <Button onClick={onAddPlan}>
+            <Plus className="mr-2 h-4 w-4" />
+            Add Plan
+          </Button>
+        </div>
+        <PlansTable plans={directorateData.plans} editable />
+      </div>
+
+      {/* Team Leads List */}
+      <div className="bg-white dark:bg-gray-900 rounded-lg shadow p-6">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
+          Team Leads
+        </h2>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {directorateData.teamLeads.map((tl) => (
+            <div
+              key={tl.id}
+              className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition cursor-pointer"
+              onClick={() => onViewTeamLead(tl.id)}>
+              <h3 className="font-medium text-gray-900 dark:text-gray-100 mb-2">
+                {tl.name}
+              </h3>
+              <div className="space-y-1 text-sm text-gray-600 dark:text-gray-400">
+                <p>{tl.planCount} plans assigned</p>
+                <div className="flex items-center gap-2">
+                  <div className="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+                    <div
+                      className="bg-purple-600 h-2 rounded-full transition-all"
+                      style={{ width: `${tl.progress}%` }}
+                    />
+                  </div>
+                  <span>{tl.progress}%</span>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/views/EmployeeView.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/views/EmployeeView.tsx
new file mode 100644
index 000000000..d9d20eccd
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/views/EmployeeView.tsx
@@ -0,0 +1,103 @@
+import React from "react";
+import { Calendar, CheckCircle2 } from "lucide-react";
+import { PlansTable } from "../shared/PlansTable";
+import { EmployeeData } from "@/performance-management/types/planHierarchyTypes";
+
+interface EmployeeViewProps {
+  employeeData: EmployeeData;
+}
+
+export const EmployeeView: React.FC<EmployeeViewProps> = ({ employeeData }) => {
+  return (
+    <div className="space-y-6">
+      {/* Weekly Expectations */}
+      <div className="bg-white dark:bg-gray-900 rounded-lg shadow p-6">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
+          <Calendar className="h-5 w-5" />
+          My Weekly Expectations
+        </h2>
+
+        {employeeData.weeklyTasks.length > 0 ? (
+          <div className="space-y-3">
+            {employeeData.weeklyTasks.map((task) => (
+              <div
+                key={task.id}
+                className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+                <div className="flex items-start justify-between mb-2">
+                  <h3 className="font-medium text-gray-900 dark:text-gray-100">
+                    {task.description}
+                  </h3>
+                  <span
+                    className={`px-2 py-1 rounded-full text-xs font-medium ${
+                      task.status === "completed"
+                        ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-primary-300"
+                        : task.status === "in-progress"
+                        ? "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300"
+                        : "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300"
+                    }`}>
+                    {task.status}
+                  </span>
+                </div>
+                <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
+                  <strong>Expected Outcome:</strong> {task.expectedOutcome}
+                </p>
+                <p className="text-xs text-gray-500 dark:text-gray-400">
+                  <strong>Deadline:</strong> {task.deadline}
+                </p>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+            No weekly tasks assigned yet
+          </div>
+        )}
+      </div>
+
+      {/* Assigned Plans */}
+      <div className="bg-white dark:bg-gray-900 rounded-lg shadow p-6">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
+          <CheckCircle2 className="h-5 w-5" />
+          Assigned Plans
+        </h2>
+        <PlansTable plans={employeeData.plans} />
+      </div>
+
+      {/* Performance Summary */}
+      <div className="bg-white dark:bg-gray-900 rounded-lg shadow p-6">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
+          Performance Summary
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
+            <div className="text-sm text-purple-600 dark:text-purple-400 mb-1">
+              Total Plans
+            </div>
+            <div className="text-2xl font-bold text-purple-900 dark:text-purple-100">
+              {employeeData.plans.length}
+            </div>
+          </div>
+          <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
+            <div className="text-sm text-blue-600 dark:text-blue-400 mb-1">
+              Weekly Tasks
+            </div>
+            <div className="text-2xl font-bold text-blue-900 dark:text-blue-100">
+              {employeeData.weeklyTasks.length}
+            </div>
+          </div>
+          <div className="p-4 bg-green-50 dark:bg-primary-900/20 rounded-lg">
+            <div className="text-sm text-primary-600 dark:text-primary-400 mb-1">
+              Completed
+            </div>
+            <div className="text-2xl font-bold text-green-900 dark:text-green-100">
+              {
+                employeeData.weeklyTasks.filter((t) => t.status === "completed")
+                  .length
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/views/TeamLeaderView.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/views/TeamLeaderView.tsx
new file mode 100644
index 000000000..04208239d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/PlanHierarchy/views/TeamLeaderView.tsx
@@ -0,0 +1,103 @@
+import React from "react";
+import { Button } from "@/shared/common/ui/button";
+import { Plus, User } from "lucide-react";
+import { PlansTable } from "../shared/PlansTable";
+import { TeamLeaderData } from "@/performance-management/types/planHierarchyTypes";
+
+interface TeamLeaderViewProps {
+  teamLeaderData: TeamLeaderData;
+  onAddPlan: () => void;
+  onManageWeekly: () => void;
+  onViewEmployee: (employeeId: string) => void;
+}
+
+export const TeamLeaderView: React.FC<TeamLeaderViewProps> = ({
+  teamLeaderData,
+  onAddPlan,
+  onManageWeekly,
+  onViewEmployee,
+}) => {
+  return (
+    <div className="space-y-6">
+      {/* Team Lead Plans */}
+      <div className="bg-white dark:bg-gray-900 rounded-lg shadow p-6">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
+            My Plans
+          </h2>
+          <Button onClick={onAddPlan}>
+            <Plus className="mr-2 h-4 w-4" />
+            Add Plan
+          </Button>
+        </div>
+        <PlansTable plans={teamLeaderData.plans} />
+      </div>
+
+      {/* Weekly Milestones */}
+      <div className="bg-white dark:bg-gray-900 rounded-lg shadow p-6">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
+            Weekly Milestones
+          </h2>
+          <Button onClick={onManageWeekly} variant="outline">
+            Manage Weekly Tasks
+          </Button>
+        </div>
+        <div className="space-y-2">
+          {teamLeaderData.weeklyMilestones.length > 0 ? (
+            teamLeaderData.weeklyMilestones.map((milestone, index) => (
+              <div
+                key={index}
+                className="flex items-center gap-2 p-3 bg-gray-50 dark:bg-gray-800 rounded">
+                <div className="h-2 w-2 rounded-full bg-purple-600"></div>
+                <span className="text-sm text-gray-700 dark:text-gray-300">
+                  {milestone}
+                </span>
+              </div>
+            ))
+          ) : (
+            <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+              No weekly milestones set
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Team Members */}
+      <div className="bg-white dark:bg-gray-900 rounded-lg shadow p-6">
+        <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">
+          Team Members
+        </h2>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {teamLeaderData.employees.map((employee) => (
+            <div
+              key={employee.id}
+              className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition cursor-pointer"
+              onClick={() => onViewEmployee(employee.id)}>
+              <div className="flex items-start gap-3">
+                <div className="p-2 bg-purple-100 dark:bg-purple-900 rounded">
+                  <User className="h-5 w-5 text-purple-600 dark:text-purple-300" />
+                </div>
+                <div className="flex-1">
+                  <h3 className="font-medium text-gray-900 dark:text-gray-100">
+                    {employee.name}
+                  </h3>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
+                    {employee.position}
+                  </p>
+                  <div className="mt-2 space-y-1 text-xs text-gray-500 dark:text-gray-400">
+                    <p>
+                      {employee.planCount} plans • {employee.weeklyTasksCount}{" "}
+                      weekly tasks
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/PlanYear/PlanYearCard.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/PlanYear/PlanYearCard.tsx
new file mode 100644
index 000000000..02cef9f13
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/PlanYear/PlanYearCard.tsx
@@ -0,0 +1,140 @@
+import { Calendar, Edit, Trash2 } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { PlanYear } from "../../types/planYearTypes";
+import { Button } from "@/shared/common/ui/button";
+import { Badge } from "@/shared/common/ui/badge";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useNavigate, useLocation } from "react-router-dom";
+
+interface PlanYearCardProps {
+  planYear: PlanYear;
+  onEdit?: (id: string) => void;
+  onDelete?: (id: string) => void;
+  isUnitAdmin?: boolean;
+}
+
+export const PlanYearCard = ({
+  planYear,
+  onEdit,
+  onDelete,
+  isUnitAdmin = false,
+}: PlanYearCardProps) => {
+  const localizedName = useLocalizedName();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { t } = useTranslation();
+
+  console.log("plan yera ", planYear.id);
+
+  const handleCardClick = () => {
+    // Check if we're in the OKR context (objective-management)
+    const isOKRContext = location.pathname.startsWith("/objective-management");
+    const planYearLabel = localizedName(planYear.name) || String(planYear.year);
+    const routeState = {
+      planYearName: planYearLabel,
+      planYearLabel,
+      planYear: {
+        id: planYear.id,
+        year: planYear.year,
+        name: planYear.name,
+      },
+    };
+
+    if (isOKRContext) {
+      navigate(`/objective-management/${planYear.id}/dashboard`, {
+        state: routeState,
+      });
+    } else {
+      navigate(`/performance-management/${planYear.id}/dashboard`, {
+        state: routeState,
+      });
+    }
+  };
+
+  const handleEdit = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onEdit?.(planYear.id);
+  };
+
+  const handleDelete = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onDelete?.(planYear.id);
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    });
+  };
+
+  return (
+    <div
+      onClick={handleCardClick}
+      className="group relative bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 hover:shadow-lg hover:border-purple-300 dark:hover:border-purple-600 transition-all cursor-pointer"
+    >
+      {/* Active Badge */}
+      {planYear.isActive && (
+        <div className="absolute top-3 right-3">
+          <Badge className="bg-green-500 hover:bg-primary-600 text-white">
+            {t("planYearList.active", "Active")}
+          </Badge>
+        </div>
+      )}
+
+      {/* Year Number - Large Display */}
+      <div className="flex items-center gap-3 mb-4">
+        <div className="p-3 bg-purple-100 dark:bg-purple-900 rounded-lg">
+          <Calendar className="h-6 w-6 text-purple-600 dark:text-purple-300" />
+        </div>
+        <h3 className="text-3xl font-bold text-gray-900 dark:text-white">
+          {planYear.year}
+        </h3>
+      </div>
+
+      {/* Name */}
+      <h4 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">
+        {localizedName(planYear.name)}
+      </h4>
+
+      {/* Description */}
+      {planYear.description && (
+        <p className="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">
+          {localizedName(planYear.description)}
+        </p>
+      )}
+
+      {/* Actions - Only visible to unit admins */}
+      {isUnitAdmin && (
+        <div className="flex gap-2 pt-4 border-t border-gray-200 dark:border-gray-700 opacity-0 group-hover:opacity-100 transition-opacity">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleEdit}
+            className="flex-1"
+          >
+            <Edit className="h-4 w-4 mr-1" />
+            {t("planYearList.edit", "Edit")}
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleDelete}
+            className="flex-1 text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/20"
+          >
+            <Trash2 className="h-4 w-4 mr-1" />
+            {t("planYearList.delete", "Delete")}
+          </Button>
+        </div>
+      )}
+
+      {/* Click indicator */}
+      <div className="absolute bottom-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity">
+        <span className="text-xs text-purple-600 dark:text-purple-400 font-medium">
+          {t("planYearList.viewPlans", "View Plans")} →
+        </span>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/PlanYear/PlanYearForm.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/PlanYear/PlanYearForm.tsx
new file mode 100644
index 000000000..0eb5770e4
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/PlanYear/PlanYearForm.tsx
@@ -0,0 +1,151 @@
+import { useForm } from "react-hook-form";
+import { useNavigate, useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { GenericForm } from "@/performance-management/utils/generic-form";
+import { FormField } from "@/performance-management/utils/shared-field-types";
+import {
+  usePlanYear,
+  usePlanYearMutations,
+  usePlanYears,
+} from "@/performance-management/hooks/usePlanYear";
+import { PlanYearFormValues } from "@/performance-management/types/planYearTypes";
+import { useAuth } from "@/shared/context/AuthContext";
+import { generateEthiopianYearOptions } from "@/performance-management/utils/EthiopianYear";
+import { useMemo } from "react";
+
+export default function PlanYearForm() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const isEdit = !!id;
+
+  const { data: planYearData } = usePlanYear(id || "");
+  const { create, update } = usePlanYearMutations();
+  const { user } = useAuth();
+  const organizationId =
+    user?.employee?.length && user.employee.length > 0
+      ? user.employee[0].organizationId
+      : undefined;
+
+  // Fetch all plan years to check which years are taken
+  const { data: allPlanYears } = usePlanYears(organizationId || "");
+
+  const yearOptions = useMemo(() => {
+    const baseOptions = generateEthiopianYearOptions();
+
+    // Get taken years (excluding current plan year if editing)
+    const takenYears = new Set(
+      allPlanYears?.data?.items
+        ?.filter((planYear: { id: string | undefined }) => planYear.id !== id)
+        .map((planYear: { year: any }) => planYear.year) || []
+    );
+
+    // Mark taken years as disabled
+    return baseOptions.map((option) => ({
+      ...option,
+      disabled: takenYears.has(Number(option.value)),
+    }));
+  }, [allPlanYears, id]);
+
+  const initialValues: PlanYearFormValues = {
+    year: Number(yearOptions[0].value),
+    nameAm: planYearData?.data?.name?.am || "",
+    nameEn: planYearData?.data?.name?.en || "",
+    descriptionAm: "",
+    descriptionEn: "",
+    organizationId: organizationId || "",
+  };
+
+  const form = useForm<PlanYearFormValues>({
+    defaultValues: initialValues,
+    values: initialValues,
+  });
+
+  const planYearFormFields: FormField<PlanYearFormValues>[] = [
+    {
+      name: "year",
+      label: t("planYear.year", "Year"),
+      type: "year-picker",
+      placeholder: t("planYear.enterYear", "Enter year (e.g., 2025)"),
+      required: true,
+      defaultValue: Number(yearOptions[0].value),
+      calendarType: "habesha",
+      language: "am",
+      minYear: !isEdit ? Number(yearOptions[0].value) : undefined,
+      colSpan: 12,
+    },
+    {
+      name: "nameAm",
+      label: t("planYear.nameAmharic", "Name (Amharic)"),
+      type: "text",
+      placeholder: t("planYear.enterAmharicName", "Enter Amharic name"),
+      required: true,
+      colSpan: 6,
+    },
+    {
+      name: "nameEn",
+      label: t("planYear.nameEnglish", "Name (English)"),
+      type: "text",
+      placeholder: t("planYear.enterEnglishName", "Enter English name"),
+      required: true,
+      colSpan: 6,
+    },
+  ];
+
+  const handleSubmit = (values: PlanYearFormValues) => {
+    const dto = {
+      id: isEdit ? id : undefined,
+      year: Number(values.year),
+      name: {
+        am: values.nameAm,
+        en: values.nameEn,
+      },
+      organizationId: organizationId,
+    };
+
+    const mutation = isEdit ? update : create;
+
+    mutation.mutate(dto, {
+      onSuccess: () => {
+        navigate("/performance-management/plan-years");
+      },
+    });
+  };
+
+  const handleCancel = () => {
+    navigate("/performance-management/plan-years");
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <GenericForm<PlanYearFormValues>
+        form={form}
+        fields={planYearFormFields}
+        onSubmit={handleSubmit}
+        onCancel={handleCancel}
+        title={
+          isEdit
+            ? t("planYear.editPlanYear", "Edit Plan Year")
+            : t("planYear.createPlanYear", "Create Plan Year")
+        }
+        description={
+          isEdit
+            ? t(
+                "planYear.updatePlanYearInfo",
+                "Update the plan year information"
+              )
+            : t(
+                "planYear.createPlanYearInfo",
+                "Create a new plan year to organize your plans"
+              )
+        }
+        submitButtonText={
+          isEdit
+            ? t("planYear.updatePlanYear", "Update Plan Year")
+            : t("planYear.createPlanYear", "Create Plan Year")
+        }
+        cancelButtonText={t("common.cancel", "Cancel")}
+      />
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/PlanYear/PlanYearList.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/PlanYear/PlanYearList.tsx
new file mode 100644
index 000000000..c7677e7a6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/PlanYear/PlanYearList.tsx
@@ -0,0 +1,266 @@
+import { useState, useMemo } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { PlusIcon, RefreshCw } from "lucide-react";
+import { useQueryClient } from "@tanstack/react-query";
+import { Button } from "@/shared/common/ui/button";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import { PlanYearCard } from "./PlanYearCard";
+import {
+  usePlanYears,
+  usePlanYearMutations,
+} from "@/performance-management/hooks/usePlanYear";
+import { PlanYear } from "@/performance-management/types/planYearTypes";
+import { useAuth } from "@/shared/context/AuthContext";
+import {
+  checkIsPlanInitiator,
+  checkIsUnitAdmin,
+} from "@/performance-management/hooks/usePlans";
+import { useLocalizedName } from "@/shared/common/localizedName";
+
+export default function PlanYearList() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { user } = useAuth();
+  const localizedName = useLocalizedName();
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [selectedPlanYear, setSelectedPlanYear] = useState<PlanYear | null>(
+    null
+  );
+  const basePath = useMemo(() => {
+    const segments = location.pathname.startsWith("/objective");
+    if (segments) {
+      return "/objective-management";
+    }
+    return "/performance-management";
+  }, [location.pathname]);
+
+  const organizationId: string =
+    user?.employee?.length && user.employee.length > 0
+      ? user.employee[0].organizationId
+      : "";
+
+  // Check if user is unit admin
+  const isUnitAdmin = useMemo(() => checkIsPlanInitiator(user), [user]);
+  console.log("isUnitAdmin", isUnitAdmin);
+  const { data, isLoading, isFetching, isError, error, refetch } = usePlanYears(
+    organizationId,
+    {
+      take: 100,
+      skip: 0,
+    }
+  );
+
+  const { delete: deletePlanYear } = usePlanYearMutations();
+
+  const planYears = data?.data?.items || [];
+
+  const handleEdit = (id: string) => {
+    navigate(`${basePath}/plan-years/${id}/edit`);
+  };
+
+  const handleRefresh = () => {
+    queryClient.invalidateQueries({
+      queryKey: ["planYears", "list", organizationId],
+    });
+  };
+
+  const handleDelete = (id: string) => {
+    const planYear = planYears.find((py: PlanYear) => py.id === id);
+    if (planYear) {
+      setSelectedPlanYear(planYear);
+      setIsDeleteDialogOpen(true);
+    }
+  };
+
+  const confirmDelete = () => {
+    if (!selectedPlanYear) return;
+
+    deletePlanYear.mutate(selectedPlanYear.id, {
+      onSuccess: () => {
+        setIsDeleteDialogOpen(false);
+        setSelectedPlanYear(null);
+      },
+    });
+  };
+
+  if (isLoading) {
+    return (
+      <div className="p-6 space-y-6">
+        <div className="flex justify-between items-center mb-6">
+          <Skeleton className="h-8 w-64" />
+          <Skeleton className="h-10 w-40" />
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {[1, 2, 3, 4, 5, 6].map((i) => (
+            <Skeleton key={i} className="h-64 w-full rounded-lg" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <div className="p-6 space-y-4">
+        <div className="text-destructive text-lg font-semibold">
+          {t("planYear.loadingError", "Error loading plan years")}
+        </div>
+        <div className="text-muted-foreground">
+          {error?.message ||
+            t(
+              "planYear.loadingErrorMessage",
+              "Failed to load plan years. Please try again."
+            )}
+        </div>
+        <Button onClick={() => refetch()}>
+          {t("planYear.retry", "Retry")}
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      {/* Header */}
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+            {t("planYearList.title", "Plan Years")}
+          </h1>
+          <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+            {t("planYearList.description", "Manage and organize plans by year")}
+          </p>
+        </div>
+
+        <div className="flex flex-wrap gap-2">
+          {isUnitAdmin && (
+            <Button
+              onClick={() => navigate(`${basePath}/plan-years/new`)}
+              className="bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white">
+              <PlusIcon className="h-4 w-4 mr-2" />
+              {t("planYearList.createPlanYear", "Create Plan Year")}
+            </Button>
+          )}
+
+          <Button
+            variant="outline"
+            onClick={handleRefresh}
+            disabled={isFetching}
+            className="gap-2"
+          >
+            <RefreshCw className={`h-4 w-4 ${isFetching ? "animate-spin" : ""}`} />
+            {t("common.refresh", "Refresh")}
+          </Button>
+        </div>
+      </div>
+
+      {/* Plan Years Grid */}
+      {planYears.length === 0 ? (
+        <div className="text-center py-12">
+          <div className="text-gray-400 dark:text-gray-500 mb-4">
+            <svg
+              className="mx-auto h-12 w-12"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+              />
+            </svg>
+          </div>
+          <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
+            {t("planYearList.noPlanYears", "No plan years yet")}
+          </h3>
+          <p className="text-gray-600 dark:text-gray-400 mb-4">
+            {t(
+              "planYearList.getStarted",
+              "Get started by creating your first plan year"
+            )}
+          </p>
+          {isUnitAdmin && (
+            <Button
+              onClick={() => navigate("/performance-management/plan-years/new")}
+              className="bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white">
+              <PlusIcon className="h-4 w-4 mr-2" />
+              {t("planYearList.createPlanYear", "Create Plan Year")}
+            </Button>
+          )}
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+          {planYears.map((planYear: PlanYear) => (
+            <PlanYearCard
+              key={planYear.id}
+              planYear={planYear}
+              onEdit={handleEdit}
+              onDelete={handleDelete}
+              isUnitAdmin={isUnitAdmin}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog
+        open={isDeleteDialogOpen}
+        onOpenChange={setIsDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t("planYearList.confirmDeletion", "Confirm Deletion")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t(
+                "planYearList.deleteConfirmation",
+                'Are you sure you want to delete the plan year "{{year}} - {{name}}"? This action cannot be undone and may affect associated plans.',
+                {
+                  year: selectedPlanYear?.year,
+                  name: localizedName(selectedPlanYear?.name),
+                }
+              )}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel
+              onClick={() => {
+                setIsDeleteDialogOpen(false);
+                setSelectedPlanYear(null);
+              }}
+              disabled={deletePlanYear.isPending}>
+              {t("common.cancel", "Cancel")}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={confirmDelete}
+              disabled={deletePlanYear.isPending}
+              className="bg-red-600 hover:bg-red-700">
+              {deletePlanYear.isPending ? (
+                <>
+                  <div className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent mr-2" />
+                  {t("planYearList.deleting", "Deleting...")}
+                </>
+              ) : (
+                t("planYearList.delete", "Delete")
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/Service-Configuration/serviceDetail.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/Service-Configuration/serviceDetail.tsx
new file mode 100644
index 000000000..8acc57517
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/Service-Configuration/serviceDetail.tsx
@@ -0,0 +1,166 @@
+import { useNavigate, useParams } from "react-router-dom";
+import { ArrowLeftIcon, EditIcon, ClockIcon } from "lucide-react";
+import { Button } from "@/shared/common/ui/button";
+import { Card, CardContent } from "@/shared/common/ui/card";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import { Separator } from "@/shared/common/ui/separator";
+import { useService } from "@/performance-management/hooks/useServiceHook"; // your hook
+import { useLocalizedName } from "@/shared/common/localizedName";
+
+const ServiceDetails = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const localizedName = useLocalizedName();
+  const { data: service, isLoading, isError, refetch } = useService(id || "");
+
+  if (isLoading) {
+    return (
+      <div className="p-6 space-y-6">
+        <Skeleton className="h-8 w-2/5" />
+        <Card>
+          <CardContent className="p-6 space-y-4">
+            <Skeleton className="h-5 w-1/4" />
+            <Skeleton className="h-9 w-3/5" />
+            <Skeleton className="h-5 w-1/4" />
+            <Skeleton className="h-9 w-3/5" />
+          </CardContent>
+        </Card>
+        <div className="flex gap-4">
+          <Skeleton className="h-9 w-28" />
+          <Skeleton className="h-9 w-28" />
+        </div>
+      </div>
+    );
+  }
+
+  if (isError || !service) {
+    return (
+      <div className="p-6 space-y-6">
+        <Card>
+          <CardContent className="p-6">
+            <div className="text-red-600 text-lg mb-4">
+              {isError ? "Error loading service details" : "Service not found"}
+            </div>
+            <div className="flex gap-4">
+              <Button onClick={() => refetch()} variant="outline">
+                Retry
+              </Button>
+              <Button
+                variant="ghost"
+                onClick={() => navigate("/performance-management/services")}
+                className="flex items-center gap-2">
+                <ArrowLeftIcon className="h-4 w-4" />
+                Back to List
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 space-y-6">
+      <div className="flex justify-between items-center">
+        <h2 className="text-2xl font-bold">Service Details</h2>
+        <Button
+          variant="ghost"
+          onClick={() => navigate("/performance-management/services")}
+          className="flex items-center gap-2">
+          <ArrowLeftIcon className="h-4 w-4" />
+          Back to List
+        </Button>
+      </div>
+
+      <Card>
+        <CardContent className="p-6 space-y-6">
+          {/* Service Name */}
+          <div>
+            <div className="text-sm text-muted-foreground mb-2">
+              Service Name
+            </div>
+            <div className="p-3 border rounded-md bg-muted/50">
+              <div className="text-base">
+                {localizedName(service.data.name)}
+              </div>
+            </div>
+          </div>
+
+          {/* Description */}
+          <div>
+            <div className="text-sm text-muted-foreground mb-2">
+              Description
+            </div>
+            <div className="p-3 border rounded-md bg-muted/50">
+              <div className="text-base">
+                {localizedName(service.data.description)}
+              </div>
+            </div>
+          </div>
+
+          {/* Category */}
+          <div>
+            <div className="text-sm text-muted-foreground mb-2">Created At</div>
+            <div className="p-3 border rounded-md bg-muted/50">
+              <div className="text-base">
+                {service.data.amharicCreatedAt || "N/A"}
+              </div>
+            </div>
+          </div>
+
+          {/* Estimated Duration and Status */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div>
+              <div className="text-sm text-muted-foreground mb-2">
+                Estimated Duration
+              </div>
+              <div className="p-3 border rounded-md bg-muted/50">
+                <div className="flex items-center gap-2">
+                  <ClockIcon className="h-4 w-4" />
+                  <div className="text-base">
+                    {service.data.estimatedTime}{" "}
+                    {service.data.estimatedTimeUnit?.toLowerCase()}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <Separator />
+
+          {/* Timestamps */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div>
+              <div className="text-sm text-muted-foreground mb-2">
+                Created At
+              </div>
+              <div className="p-3 border rounded-md bg-muted/50">
+                <div className="text-base">
+                  {service.data.createdAt
+                    ? new Date(service.data.createdAt).toLocaleString()
+                    : "N/A"}
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <div className="text-sm text-muted-foreground mb-2">
+                Last Updated
+              </div>
+              <div className="p-3 border rounded-md bg-muted/50">
+                <div className="text-base">
+                  {service.data.updatedAt
+                    ? new Date(service.data.updatedAt).toLocaleString()
+                    : "N/A"}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default ServiceDetails;
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/Service-Configuration/serviceForm.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/Service-Configuration/serviceForm.tsx
new file mode 100644
index 000000000..d41f6d5ec
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/Service-Configuration/serviceForm.tsx
@@ -0,0 +1,338 @@
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import DateMeasurementUnit from "@/performance-management/utils/data-measurement-unit";
+import { GenericForm } from "@/performance-management/utils/generic-form";
+import { FormField } from "@/performance-management/utils/shared-field-types";
+
+import {
+  useService,
+  useServiceMutations,
+  useServiceList,
+} from "@/performance-management/hooks/useServiceHook";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useServiceCategoryList } from "@/performance-management/hooks/useServiceCategory";
+import { useAuth } from "@/shared/context/AuthContext";
+import { useState } from "react";
+
+// Validation schema factory
+const createServiceSchema = (t: (key: string) => string) =>
+  z.object({
+    slug: z.string().optional(),
+    prefix: z.string().optional(),
+    nameAm: z
+      .string()
+      .min(1, t("services.validation.nameAmRequired"))
+      .max(100, t("services.validation.nameMaxLength")),
+    nameEn: z
+      .string()
+      .min(1, t("services.validation.nameEnRequired"))
+      .max(100, t("services.validation.nameMaxLength")),
+    descriptionAm: z
+      .string()
+      .min(1, t("services.validation.descriptionAmRequired"))
+      .max(500, t("services.validation.descriptionMaxLength")),
+    descriptionEn: z
+      .string()
+      .min(1, t("services.validation.descriptionEnRequired"))
+      .max(500, t("services.validation.descriptionMaxLength")),
+    organizationId: z
+      .string()
+      .min(1, t("services.validation.organizationRequired")),
+    serviceCategoryId: z
+      .string()
+      .min(1, t("services.validation.categoryRequired")),
+    parentServiceId: z.string().optional(),
+    estimatedTime: z
+      .coerce.number()
+      .min(1, t("services.validation.estimatedTimeMin"))
+      .max(1440, t("services.validation.estimatedTimeMax")), // Max 24 hours in minutes
+    estimatedTimeUnit: z.nativeEnum(DateMeasurementUnit),
+  });
+
+interface ServiceFormValues {
+  slug?: string;
+  prefix?: string;
+  nameAm: string;
+  nameEn: string;
+  descriptionAm: string;
+  descriptionEn: string;
+  organizationId: string;
+  serviceCategoryId: string;
+  parentServiceId?: string;
+  estimatedTime: number;
+  estimatedTimeUnit: DateMeasurementUnit;
+}
+
+export default function ServiceForm() {
+  const { id } = useParams<{ id: string }>(); // Get id from URL
+  const isEdit = !!id;
+  const { t } = useTranslation();
+  const localizedName = useLocalizedName();
+  const { user } = useAuth();
+  const [selectedCategoryId, setSelectedCategoryId] = useState<string>("");
+
+  const organizationId =
+    user?.employee?.length && user.employee.length > 0
+      ? user.employee[0].organizationId
+      : "";
+
+  // Fetch service categories
+  const { data: serviceCategoriesResponse } =
+    useServiceCategoryList(organizationId);
+
+  // Fetch parent services based on selected category
+  const { data: parentServicesResponse } = useServiceList(
+    organizationId,
+    selectedCategoryId || undefined
+  );
+
+  // Debug: Log the response to see its structure
+  console.log("Service Categories Response:", serviceCategoriesResponse);
+  console.log(
+    "serviceCategoriesResponse?.data:",
+    serviceCategoriesResponse?.data
+  );
+
+  // Extract service categories from response - handle different response structures
+  let serviceCategories = [];
+  if (serviceCategoriesResponse?.data) {
+    // Try different possible structures
+    if (Array.isArray(serviceCategoriesResponse.data)) {
+      serviceCategories = serviceCategoriesResponse.data;
+    } else if (serviceCategoriesResponse.data.data) {
+      serviceCategories = Array.isArray(serviceCategoriesResponse.data.data)
+        ? serviceCategoriesResponse.data.data
+        : [];
+    } else if (serviceCategoriesResponse.data.items) {
+      serviceCategories = Array.isArray(serviceCategoriesResponse.data.items)
+        ? serviceCategoriesResponse.data.items
+        : [];
+    }
+  }
+
+  console.log("Extracted Service Categories:", serviceCategories);
+
+  // Extract parent services
+  let parentServices = [];
+  if (parentServicesResponse?.data) {
+    if (Array.isArray(parentServicesResponse.data)) {
+      parentServices = parentServicesResponse.data;
+    } else if (parentServicesResponse.data.data) {
+      parentServices = Array.isArray(parentServicesResponse.data.data)
+        ? parentServicesResponse.data.data
+        : [];
+    } else if (parentServicesResponse.data.items) {
+      parentServices = Array.isArray(parentServicesResponse.data.items)
+        ? parentServicesResponse.data.items
+        : [];
+    }
+  }
+
+  // Fetch single service (for edit)
+  const { data: serviceDetail } = useService(id ?? "");
+
+  const { create: createMutation, update: updateMutation } =
+    useServiceMutations();
+
+  const initialValues: ServiceFormValues = {
+    slug: serviceDetail?.data?.slug || "",
+    prefix: serviceDetail?.data?.prefix || "",
+    nameAm: serviceDetail?.data?.name?.am || "",
+    nameEn: serviceDetail?.data?.name?.en || "",
+    descriptionAm: serviceDetail?.data?.description?.am || "",
+    descriptionEn: serviceDetail?.data?.description?.en || "",
+    organizationId: serviceDetail?.data?.organizationId || organizationId,
+    serviceCategoryId: serviceDetail?.data?.serviceCategoryId || "",
+    parentServiceId: serviceDetail?.data?.parentServiceId || undefined,
+    estimatedTime: serviceDetail?.data?.estimatedTime || 0,
+    estimatedTimeUnit:
+      serviceDetail?.data?.estimatedTimeUnit || DateMeasurementUnit.MINUTES,
+  };
+
+  // Update selected category when service detail loads or form changes
+  if (serviceDetail?.data?.serviceCategoryId && !selectedCategoryId) {
+    setSelectedCategoryId(serviceDetail.data.serviceCategoryId);
+  }
+
+  const fields: FormField<ServiceFormValues>[] = [
+    {
+      name: "slug",
+      label: t("services.slug", "Slug"),
+      type: "text",
+      placeholder: t("services.enterSlug", "Enter slug"),
+      required: false,
+    },
+    {
+      name: "prefix",
+      label: t("services.prefix", "Prefix"),
+      type: "text",
+      placeholder: t("services.enterPrefix", "Enter prefix"),
+      required: false,
+    },
+    {
+      name: "serviceCategoryId",
+      label: t("services.serviceCategoryField", "Service Category"),
+      type: "select",
+      placeholder: t(
+        "services.selectServiceCategory",
+        "Select Service Category"
+      ),
+      required: true,
+
+      options: (() => {
+        const options = Array.isArray(serviceCategories)
+          ? serviceCategories.map((category) => {
+              console.log("Processing category:", category);
+              return {
+                value: category.id,
+                label: localizedName(category.name),
+              };
+            })
+          : [];
+        console.log("Generated dropdown options:", options);
+        return options;
+      })(),
+      onChange: (value: string) => {
+        setSelectedCategoryId(value);
+        form.setValue("parentServiceId", undefined); // Reset parent service when category changes
+      },
+    },
+    {
+      name: "parentServiceId",
+      label: t("services.parentService", "Parent Service (Optional)"),
+      type: "select",
+      placeholder: t(
+        "services.parentServiceOptional",
+        "Parent Service (Optional)"
+      ),
+      required: false,
+      options: parentServices.map(
+        (service: { id: string; name: { en: string; am: string } }) => ({
+          value: service.id,
+          label: localizedName(service.name),
+        })
+      ),
+    },
+    {
+      name: "nameAm",
+      label: t("services.nameAm", "Name (Amharic)"),
+      type: "text",
+      placeholder: t("services.nameAmPlaceholder", "Enter Amharic name"),
+      required: true,
+    },
+    {
+      name: "nameEn",
+      label: t("services.nameEn", "Name (English)"),
+      type: "text",
+      placeholder: t("services.nameEnPlaceholder", "Enter English name"),
+      required: true,
+    },
+    {
+      name: "descriptionAm",
+      label: t("services.descriptionAm", "Description (Amharic)"),
+      type: "textarea",
+      placeholder: t(
+        "services.descriptionAmPlaceholder",
+        "Enter Amharic description"
+      ),
+      required: true,
+    },
+    {
+      name: "descriptionEn",
+      label: t("services.descriptionEn", "Description (English)"),
+      type: "textarea",
+      placeholder: t(
+        "services.descriptionEnPlaceholder",
+        "Enter English description"
+      ),
+      required: true,
+    },
+    {
+      name: "estimatedTime",
+      label: t("services.estimatedTime", "Estimated Time"),
+      type: "number",
+      placeholder: t("services.enterEstimatedTime", "Enter estimated time"),
+    },
+    {
+      name: "estimatedTimeUnit",
+      label: t("services.timeUnit", "Time Unit"),
+      type: "select",
+      options: Object.values(DateMeasurementUnit).map((unit) => ({
+        value: unit,
+        label: t(`services.timeUnits.${unit.toLowerCase()}`, unit),
+      })),
+    },
+  ];
+
+  const form = useForm<ServiceFormValues>({
+    resolver: zodResolver(createServiceSchema(t)),
+    defaultValues: initialValues,
+    values: initialValues, // Important for Edit Mode
+  });
+
+  const handleSubmit = (values: ServiceFormValues) => {
+    const dto = {
+      id: isEdit ? id : undefined, // Include id for updates
+      slug: values.slug || "",
+      prefix: values.prefix || "",
+      name: {
+        am: values.nameAm,
+        en: values.nameEn,
+      },
+      description: {
+        am: values.descriptionAm,
+        en: values.descriptionEn,
+      },
+      organizationId: values.organizationId,
+      serviceCategoryId: values.serviceCategoryId,
+      parentServiceId: values.parentServiceId || undefined,
+      estimatedTime: Number(values.estimatedTime) || 0,
+      estimatedTimeUnit: values.estimatedTimeUnit,
+    };
+
+    if (isEdit) {
+      updateMutation.mutate(dto);
+    } else {
+      createMutation.mutate(dto);
+    }
+  };
+
+  return (
+    <GenericForm<ServiceFormValues>
+      form={form}
+      fields={fields}
+      onSubmit={handleSubmit}
+      submitButtonText={
+        isEdit
+          ? t("services.updateService", "Update Service")
+          : t("services.createService", "Create Service")
+      }
+      title={
+        isEdit
+          ? t("services.editTitle", "Edit Service")
+          : t("services.createTitle", "Create Service")
+      }
+      description={
+        isEdit
+          ? t("services.editDescription", "Update the service information")
+          : t(
+              "services.createDescription",
+              "Add a new service to your organization"
+            )
+      }
+      successMessage={
+        isEdit
+          ? t("services.updateSuccess", "Service updated successfully")
+          : t("services.createSuccess", "Service created successfully")
+      }
+      errorMessage={
+        isEdit
+          ? t("services.updateError", "Failed to update service")
+          : t("services.createError", "Failed to create service")
+      }
+    />
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/Service-Configuration/serviceTable.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/Service-Configuration/serviceTable.tsx
new file mode 100644
index 000000000..0fb4112ca
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/Service-Configuration/serviceTable.tsx
@@ -0,0 +1,393 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import {
+  DownloadIcon,
+  EditIcon,
+  TrashIcon,
+  EyeIcon,
+  PlusIcon,
+} from "lucide-react";
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import { IServiceResponse } from "../../types/servicetypes";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import { useToast } from "@/shared/common/ui/use-toast";
+import { ColumnDef } from "@tanstack/react-table";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+import { Button } from "@/shared/common/ui/button";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+
+import {
+  useServiceList,
+  useServiceMutations,
+} from "@/performance-management/hooks/useServiceHook";
+import { useAuth } from "@/shared/context/AuthContext";
+import { useLocalizedName } from "@/shared/common/localizedName";
+
+const ServicesTable = () => {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const { toast } = useToast();
+  const [pageIndex, setPageIndex] = useState(0);
+
+  const [selectedService, setSelectedService] =
+    useState<IServiceResponse | null>(null);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const { user } = useAuth();
+
+  const organizationId =
+    user?.employee?.length && user.employee.length > 0
+      ? user.employee[0].organizationId
+      : undefined;
+
+  const localizedName = useLocalizedName();
+  // ✅ SAFELY HANDLE employee ARRAY
+
+  // Use the organizationId directly from user's employee data
+  const { data, isLoading, isError, refetch } = useServiceList(
+    organizationId || ""
+  );
+
+  const { delete: deleteMutation } = useServiceMutations();
+
+  const handleDelete = async () => {
+    if (!selectedService) return;
+
+    deleteMutation.mutate(selectedService.id, {
+      onSuccess: () => {
+        toast({
+          title: t("services.deleteSuccess", "Deleted"),
+          description: t(
+            "services.deleteSuccessMessage",
+            "Service deleted successfully"
+          ),
+        });
+        setIsDeleteDialogOpen(false);
+        setSelectedService(null);
+        refetch();
+      },
+      onError: () => {
+        toast({
+          title: t("common.error", "Error"),
+          description: t("services.deleteError", "Failed to delete service"),
+          variant: "destructive",
+        });
+      },
+    });
+  };
+
+  const services = (data?.data?.items || []).sort(
+    (a: IServiceResponse, b: IServiceResponse) => {
+      const dateA = new Date(a.createdAt).getTime();
+      const dateB = new Date(b.createdAt).getTime();
+      return dateB - dateA; // Descending order (newest first)
+    }
+  );
+
+  const columns: ColumnDef<IServiceResponse>[] = [
+    {
+      accessorKey: "name",
+      header: ({ column }) => {
+        return (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+            className="h-auto p-0 font-semibold"
+          >
+            {t("services.serviceName", "Service Name")}
+            {column.getIsSorted() === "asc"
+              ? " ↑"
+              : column.getIsSorted() === "desc"
+              ? " ↓"
+              : ""}
+          </Button>
+        );
+      },
+      cell: ({ row }) => localizedName(row.original.name),
+      size: 200,
+      enableSorting: true,
+      sortingFn: (rowA, rowB) => {
+        const nameA = localizedName(rowA.original.name).toLowerCase();
+        const nameB = localizedName(rowB.original.name).toLowerCase();
+        return nameA.localeCompare(nameB);
+      },
+    },
+
+    {
+      accessorKey: "description",
+      header: ({ column }) => {
+        return (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+            className="h-auto p-0 font-semibold"
+          >
+            {t("services.description", "Description")}
+            {column.getIsSorted() === "asc"
+              ? " ↑"
+              : column.getIsSorted() === "desc"
+              ? " ↓"
+              : ""}
+          </Button>
+        );
+      },
+      cell: ({ row }) => (
+        <div
+          className="max-w-[300px] truncate"
+          title={localizedName(row.original.description)}
+        >
+          {localizedName(row.original.description)}
+        </div>
+      ),
+      enableSorting: true,
+      sortingFn: (rowA, rowB) => {
+        const descA = localizedName(rowA.original.description).toLowerCase();
+        const descB = localizedName(rowB.original.description).toLowerCase();
+        return descA.localeCompare(descB);
+      },
+    },
+
+    {
+      accessorKey: "estimatedTime",
+      header: ({ column }) => {
+        return (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+            className="h-auto p-0 font-semibold"
+          >
+            {t("services.estimatedTime", "Estimated Time")}
+            {column.getIsSorted() === "asc"
+              ? " ↑"
+              : column.getIsSorted() === "desc"
+              ? " ↓"
+              : ""}
+          </Button>
+        );
+      },
+      cell: ({ row }) =>
+        `${row.original.estimatedTime} ${t(
+          `services.timeUnits.${row.original.estimatedTimeUnit.toLowerCase()}`,
+          row.original.estimatedTimeUnit
+        )}`,
+      enableSorting: true,
+      sortingFn: (rowA, rowB) => {
+        return rowA.original.estimatedTime - rowB.original.estimatedTime;
+      },
+    },
+
+    {
+      accessorKey: "createdAt",
+      header: ({ column }) => {
+        return (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+            className="h-auto p-0 font-semibold"
+          >
+            {t("services.createdAt", "Created At")}
+            {column.getIsSorted() === "asc"
+              ? " ↑"
+              : column.getIsSorted() === "desc"
+              ? " ↓"
+              : " ↓"}
+          </Button>
+        );
+      },
+      cell: ({ row }) => new Date(row.original.createdAt).toLocaleString(),
+      enableSorting: true,
+      sortingFn: (rowA, rowB) => {
+        const dateA = new Date(rowA.original.createdAt).getTime();
+        const dateB = new Date(rowB.original.createdAt).getTime();
+        return dateA - dateB;
+      },
+    },
+
+    {
+      id: "actions",
+      header: t("common.actions", "Actions"),
+      cell: ({ row }) => (
+        <div className="flex gap-2">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() =>
+                    navigate(
+                      `/performance-management/services/${row.original.id}`
+                    )
+                  }
+                >
+                  <EyeIcon className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                {t("services.viewDetails", "View details")}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() =>
+                    navigate(
+                      `/performance-management/services/${row.original.id}/edit`
+                    )
+                  }
+                >
+                  <EditIcon className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>{t("common.edit", "Edit")}</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => {
+                    setSelectedService(row.original);
+                    setIsDeleteDialogOpen(true);
+                  }}
+                  disabled={deleteMutation.isPending}
+                >
+                  <TrashIcon className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>{t("common.delete", "Delete")}</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      ),
+    },
+  ];
+
+  const extraToolbar = (
+    <div className="flex gap-2">
+      <Button
+        onClick={() => navigate(`/performance-management/services/new`)}
+        className="bg-gradient-to-r from-purple-500 to-violet-600 text-white"
+      >
+        <PlusIcon className="h-4 w-4 mr-2" />
+        {t("services.createService", "Create Service")}
+      </Button>
+
+      <Button
+        variant="outline"
+        onClick={() =>
+          toast({
+            title: t("services.exporting", "Exporting"),
+            description: t(
+              "services.preparingData",
+              "Preparing service data..."
+            ),
+          })
+        }
+      >
+        <DownloadIcon className="h-4 w-4 mr-2" />
+        {t("services.exportAll", "Export All")}
+      </Button>
+    </div>
+  );
+
+  // ⬇️ LOADING UI
+  if (isLoading)
+    return (
+      <div className="p-6 space-y-6">
+        <Skeleton className="h-8 w-64" />
+        <Skeleton className="h-12 w-full" />
+        <Skeleton className="h-12 w-full" />
+      </div>
+    );
+
+  // ⬇️ ERROR UI
+  if (isError)
+    return (
+      <div className="p-6 space-y-4">
+        <p className="text-destructive font-semibold">
+          {t("services.loadError", "Failed to load services")}
+        </p>
+        <Button onClick={() => refetch()}>{t("common.retry", "Retry")}</Button>
+      </div>
+    );
+
+  return (
+    <div className="p-6">
+      <AdvancedTable<IServiceResponse, unknown>
+        columns={columns}
+        data={services}
+        tableName={t("services.title", "Service Management")}
+        extraToolbar={extraToolbar}
+        toolBarPosition="right"
+        itemCount={services.length}
+        pageIndex={pageIndex}
+        onPageChange={setPageIndex}
+        nextFunction={() => setPageIndex((p) => p + 1)}
+        prevFunction={() => setPageIndex((p) => Math.max(0, p - 1))}
+        refresh={refetch}
+      />
+
+      {/* DELETE DIALOG */}
+      <AlertDialog
+        open={isDeleteDialogOpen}
+        onOpenChange={setIsDeleteDialogOpen}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t("services.deleteTitle", "Confirm Deletion")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t(
+                "services.deleteConfirmation",
+                'Are you sure you want to delete "{{name}}"? This action cannot be undone.',
+                { name: localizedName(selectedService?.name) }
+              )}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+
+          <AlertDialogFooter>
+            <AlertDialogCancel>
+              {t("common.cancel", "Cancel")}
+            </AlertDialogCancel>
+
+            <AlertDialogAction
+              className="bg-red-600 hover:bg-red-700"
+              disabled={deleteMutation.isPending}
+              onClick={handleDelete}
+            >
+              {deleteMutation.isPending
+                ? t("common.deleting", "Deleting...")
+                : t("common.delete", "Delete")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+};
+
+export default ServicesTable;
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/ServiceAssignment/ServiceAssignmentPage.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/ServiceAssignment/ServiceAssignmentPage.tsx
new file mode 100644
index 000000000..f6adf9dda
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/ServiceAssignment/ServiceAssignmentPage.tsx
@@ -0,0 +1,201 @@
+import { useState } from "react";
+import { Input } from "@/shared/common/ui/input";
+import { Search } from "lucide-react";
+import { OrganizationList } from "./lists/OrganizationList";
+import { UnitList } from "./lists/UnitList";
+import { DepartmentList } from "./lists/DepartmentList";
+import { PositionServicesList } from "./lists/PositionServicesList";
+import { useOrganizationsData } from "@/user-management/userManagement/hooks/useOrganizationsData";
+import { useUnitsData } from "@/user-management/userManagement/hooks/useUnitsData";
+import { useDepartmentsData } from "@/user-management/userManagement/hooks/useDepartmentsData";
+import { useSelectionHandlers } from "@/user-management/userManagement/handlers/useSelectionHandlers";
+import { Breadcrumb } from "@/user-management/userManagement/components/Breadcrumb";
+import { useAuth } from "@/shared/context/AuthContext";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { t } from "i18next";
+import { AssignServiceDialog } from "./dialogs/AssignServiceDialog";
+
+const ServiceAssignmentPage = () => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [unitSearchQuery, setUnitSearchQuery] = useState("");
+  const [departmentSearchQuery, setDepartmentSearchQuery] = useState("");
+  const { user } = useAuth();
+  const localizedName = useLocalizedName();
+
+  // Dialog state for service assignment
+  const [isAssignDialogOpen, setIsAssignDialogOpen] = useState(false);
+  const [selectedPositionId, setSelectedPositionId] = useState<string>("");
+  const [selectedPositionName, setSelectedPositionName] = useState<string>("");
+
+  // Get organization ID from user
+  const organizationId =
+    user?.employee && user.employee.length > 0
+      ? user.employee[0].organizationId
+      : undefined;
+
+  // Hooks for data loading
+  const { organizations, isLoading: orgsLoading } = useOrganizationsData({
+    currentOrgId: organizationId,
+  });
+
+  const {
+    selectedOrgId,
+    selectedUnitId,
+    selectedDepartmentId,
+    breadcrumb,
+    handleSelectOrganization,
+    handleSelectUnit,
+    handleSelectDepartment,
+  } = useSelectionHandlers(organizations, localizedName);
+
+  const [take] = useState(100);
+  const [skip] = useState(0);
+
+  const {
+    units,
+    isLoading: unitsLoading,
+    setUnits,
+  } = useUnitsData(selectedOrgId, { take, skip });
+
+  const {
+    departments,
+    isLoading: deptsLoading,
+    setDepartments,
+    positions,
+  } = useDepartmentsData(selectedUnitId);
+
+  // Handle assign service action
+  const handleAssignService = (positionId: string, positionName: string) => {
+    setSelectedPositionId(positionId);
+    setSelectedPositionName(positionName);
+    setIsAssignDialogOpen(true);
+  };
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="p-4 border-b">
+        <div className="flex justify-between items-center mb-4">
+          <h1 className="text-xl font-semibold text-gray-800">
+            {t("organization.serviceAssignment", "Service Assignment")}
+          </h1>
+        </div>
+
+        <div className="flex gap-2">
+          <div className="relative flex-1">
+            <Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-500" />
+            <Input
+              placeholder="Search organizations, units, departments..."
+              className="pl-8"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+        </div>
+
+        <div className="mt-4">
+          <Breadcrumb breadcrumb={breadcrumb} hasTeamMembers={false} />
+        </div>
+      </div>
+
+      {/* Position Services List */}
+      <div className="px-4 pb-4">
+        <PositionServicesList positionId={selectedDepartmentId} />
+      </div>
+
+      {/* Desktop view - grid layout */}
+      <div className="flex-1 p-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div className="border rounded-md p-3 bg-white shadow-sm">
+          <h3 className="font-medium text-gray-700 mb-3 border-b pb-2">
+            {t("organization.organizations")}
+          </h3>
+          <OrganizationList
+            selectedOrgId={selectedOrgId}
+            organizations={organizations}
+            isLoading={orgsLoading}
+            searchQuery={searchQuery}
+            onSelectOrganization={(id: string) => {
+              setUnits([]);
+              setDepartments([]);
+              handleSelectOrganization(id);
+            }}
+          />
+        </div>
+
+        <div className="border rounded-md p-3 bg-white shadow-sm">
+          <h3 className="font-medium text-gray-700 mb-3 border-b pb-2">
+            {t("contentManagement.Units")}
+          </h3>
+          <div className="mb-3">
+            <div className="relative">
+              <Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-500" />
+              <Input
+                placeholder={t("search.searchUnits", "Search units...")}
+                className="pl-8 text-sm"
+                value={unitSearchQuery}
+                onChange={(e) => setUnitSearchQuery(e.target.value)}
+              />
+            </div>
+          </div>
+          <UnitList
+            organizationId={selectedOrgId}
+            selectedUnitId={selectedUnitId}
+            onSelectUnit={(id: string) => {
+              setDepartments([]);
+              handleSelectUnit(id, units);
+            }}
+            units={units}
+            isLoading={unitsLoading}
+            searchQuery={unitSearchQuery}
+          />
+        </div>
+
+        <div className="border rounded-md p-3 bg-white shadow-sm">
+          <h3 className="font-medium text-gray-700 mb-3 border-b pb-2">
+            {t("userIncoming.Departments")}
+          </h3>
+          <div className="mb-3">
+            <div className="relative">
+              <Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-500" />
+              <Input
+                placeholder={t(
+                  "search.searchDepartments",
+                  "Search departments..."
+                )}
+                className="pl-8 text-sm"
+                value={departmentSearchQuery}
+                onChange={(e) => setDepartmentSearchQuery(e.target.value)}
+              />
+            </div>
+          </div>
+          <DepartmentList
+            unitId={selectedUnitId}
+            selectedDepartmentId={selectedDepartmentId}
+            onSelectDepartment={(id: string) => {
+              handleSelectDepartment(id, departments);
+            }}
+            departments={departments}
+            positions={positions}
+            isLoading={deptsLoading}
+            searchQuery={departmentSearchQuery}
+            onAssignService={handleAssignService}
+          />
+        </div>
+      </div>
+
+      {/* Assign Service Dialog */}
+      <AssignServiceDialog
+        isOpen={isAssignDialogOpen}
+        onClose={() => {
+          setIsAssignDialogOpen(false);
+          setSelectedPositionId("");
+          setSelectedPositionName("");
+        }}
+        positionId={selectedPositionId}
+        positionName={selectedPositionName}
+        organizationId={selectedOrgId}
+      />
+    </div>
+  );
+};
+
+export default ServiceAssignmentPage;
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/ServiceAssignment/dialogs/AssignServiceDialog.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/ServiceAssignment/dialogs/AssignServiceDialog.tsx
new file mode 100644
index 000000000..cfb07d23c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/ServiceAssignment/dialogs/AssignServiceDialog.tsx
@@ -0,0 +1,595 @@
+import { useState, useEffect, useCallback } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { Button } from "@/shared/common/ui/button";
+import { Checkbox } from "@/shared/common/ui/checkbox";
+import { Label } from "@/shared/common/ui/label";
+import { Input } from "@/shared/common/ui/input";
+import {
+  Search,
+  Loader2,
+  ChevronRight,
+  ChevronDown,
+  Folder,
+  FileText,
+} from "lucide-react";
+import { useToast } from "@/shared/common/ui/use-toast";
+import { t } from "i18next";
+import { ScrollArea } from "@/shared/common/ui/scroll-area";
+import {
+  assignServicesToPosition,
+  getAssignedServices,
+} from "@/performance-management/services/api/serviceAssignmentService";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useServiceCategoryList } from "@/performance-management/hooks/useServiceCategory";
+import { useServiceList } from "@/performance-management/hooks/useServiceHook";
+
+interface AssignServiceDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  positionId: string;
+  positionName: string;
+  organizationId: string;
+}
+
+interface ServiceCategory {
+  id: string;
+  name: Record<string, string>;
+  description?: Record<string, string>;
+}
+
+interface Service {
+  id: string;
+  name: Record<string, string>;
+  description?: Record<string, string>;
+  serviceCategoryId?: string;
+  parentServiceId?: string;
+  childServices?: Service[];
+}
+
+export const AssignServiceDialog = ({
+  isOpen,
+  onClose,
+  positionId,
+  positionName,
+  organizationId,
+}: AssignServiceDialogProps) => {
+  const { toast } = useToast();
+  const localizedName = useLocalizedName();
+  const [selectedServiceIds, setSelectedServiceIds] = useState<string[]>([]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [isSaving, setIsSaving] = useState(false);
+  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(
+    new Set()
+  );
+  const [expandedServices, setExpandedServices] = useState<Set<string>>(
+    new Set()
+  );
+  const [alreadyAssignedServiceIds, setAlreadyAssignedServiceIds] = useState<
+    string[]
+  >([]);
+
+  // Fetch service categories
+  const { data: serviceCategoriesResponse, isLoading: categoriesLoading } =
+    useServiceCategoryList(organizationId);
+
+  // Fetch all services (without category filter for search)
+  const { data: allServicesResponse } = useServiceList(organizationId);
+
+  // Helper function to safely render text that might be localized
+  const renderText = (
+    text: Record<string, string> | string | undefined
+  ): string => {
+    if (!text) return "";
+    if (typeof text === "string") return text;
+    if (typeof text === "object") {
+      const textObj = text as Record<string, string>;
+      if (textObj.en || textObj.am) {
+        return localizedName({ am: textObj.am || "", en: textObj.en || "" });
+      }
+    }
+    return String(text);
+  };
+
+  // Extract service categories
+  let serviceCategories: ServiceCategory[] = [];
+  if (serviceCategoriesResponse?.data) {
+    if (Array.isArray(serviceCategoriesResponse.data)) {
+      serviceCategories = serviceCategoriesResponse.data;
+    } else if (serviceCategoriesResponse.data.data) {
+      serviceCategories = Array.isArray(serviceCategoriesResponse.data.data)
+        ? serviceCategoriesResponse.data.data
+        : [];
+    } else if (serviceCategoriesResponse.data.items) {
+      serviceCategories = Array.isArray(serviceCategoriesResponse.data.items)
+        ? serviceCategoriesResponse.data.items
+        : [];
+    }
+  }
+
+  // Extract all services
+  let allServices: Service[] = [];
+  if (allServicesResponse?.data) {
+    if (Array.isArray(allServicesResponse.data)) {
+      allServices = allServicesResponse.data;
+    } else if (allServicesResponse.data.data) {
+      allServices = Array.isArray(allServicesResponse.data.data)
+        ? allServicesResponse.data.data
+        : [];
+    } else if (allServicesResponse.data.items) {
+      allServices = Array.isArray(allServicesResponse.data.items)
+        ? allServicesResponse.data.items
+        : [];
+    }
+  }
+
+  // Build parent-child relationships
+  const servicesWithChildren = allServices.map((service) => {
+    const childServices = allServices.filter(
+      (s) => s.parentServiceId === service.id
+    );
+    return {
+      ...service,
+      childServices: childServices.length > 0 ? childServices : undefined,
+    };
+  });
+
+  // Fetch assigned service when dialog opens
+  const fetchAssignedService = useCallback(async () => {
+    try {
+      const response = await getAssignedServices(positionId);
+      let assignedServices = response.data?.data || response.data || [];
+
+      if (!Array.isArray(assignedServices)) {
+        assignedServices = assignedServices.items || [];
+      }
+
+      if (Array.isArray(assignedServices) && assignedServices.length > 0) {
+        const serviceIds = assignedServices
+          .map(
+            (service: { id?: string; serviceId?: string; firstId?: string }) =>
+              service.id || service.serviceId || service.firstId
+          )
+          .filter((id: string | undefined): id is string => !!id);
+
+        setSelectedServiceIds(serviceIds);
+        setAlreadyAssignedServiceIds(serviceIds);
+
+        // Auto-expand categories containing the selected services
+        serviceIds.forEach((serviceId: string) => {
+          const service = allServices.find((s) => s.id === serviceId);
+          if (service?.serviceCategoryId) {
+            setExpandedCategories((prev) =>
+              new Set(prev).add(service.serviceCategoryId!)
+            );
+          }
+          // Auto-expand parent services if this is a child service
+          if (service?.parentServiceId) {
+            setExpandedServices((prev) =>
+              new Set(prev).add(service.parentServiceId!)
+            );
+          }
+        });
+      } else {
+        setSelectedServiceIds([]);
+        setAlreadyAssignedServiceIds([]);
+      }
+    } catch (error) {
+      console.error("Failed to fetch assigned service:", error);
+      setSelectedServiceIds([]);
+      setAlreadyAssignedServiceIds([]);
+    }
+  }, [positionId, allServices]);
+
+  useEffect(() => {
+    if (isOpen && positionId) {
+      fetchAssignedService();
+    }
+  }, [isOpen, positionId, fetchAssignedService]);
+
+  const handleToggleService = (serviceId: string) => {
+    // Check if service is already assigned
+    if (alreadyAssignedServiceIds.includes(serviceId)) {
+      toast({
+        title: "Warning",
+        description: "Service already assigned to this position",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setSelectedServiceIds((prev) => {
+      if (prev.includes(serviceId)) {
+        return prev.filter((id) => id !== serviceId);
+      } else {
+        return [...prev, serviceId];
+      }
+    });
+  };
+
+  const handleSave = async () => {
+    // Filter out already assigned services
+    const newServiceIds = selectedServiceIds.filter(
+      (id) => !alreadyAssignedServiceIds.includes(id)
+    );
+
+    if (newServiceIds.length === 0) {
+      toast({
+        title: "Warning",
+        description: "Please select at least one new service to assign",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      await assignServicesToPosition(positionId, newServiceIds);
+
+      toast({
+        title: "Success",
+        description: `${newServiceIds.length} service(s) assigned to ${positionName} successfully`,
+        variant: "default",
+      });
+
+      onClose();
+    } catch (error: unknown) {
+      console.error("Failed to assign service:", error);
+      const errorMessage =
+        (
+          error as {
+            response?: { data?: { message?: string } };
+            message?: string;
+          }
+        ).response?.data?.message ||
+        (error as { message?: string }).message ||
+        "Failed to assign service";
+      toast({
+        title: "Error",
+        description: errorMessage,
+        variant: "destructive",
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleClearSelection = () => {
+    setSelectedServiceIds([]);
+  };
+
+  const toggleCategory = (categoryId: string) => {
+    setExpandedCategories((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(categoryId)) {
+        newSet.delete(categoryId);
+      } else {
+        newSet.add(categoryId);
+      }
+      return newSet;
+    });
+  };
+
+  const toggleService = (serviceId: string) => {
+    setExpandedServices((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(serviceId)) {
+        newSet.delete(serviceId);
+      } else {
+        newSet.add(serviceId);
+      }
+      return newSet;
+    });
+  };
+
+  // Group services by category (only parent services)
+  const parentServicesByCategory = servicesWithChildren
+    .filter((service) => !service.parentServiceId)
+    .reduce((acc, service) => {
+      const categoryId = service.serviceCategoryId || "uncategorized";
+      if (!acc[categoryId]) {
+        acc[categoryId] = [];
+      }
+      acc[categoryId].push(service);
+      return acc;
+    }, {} as Record<string, Service[]>);
+
+  // Filter categories and services based on search
+  const filteredData = searchQuery
+    ? {
+        categories: serviceCategories.filter((cat) =>
+          renderText(cat.name).toLowerCase().includes(searchQuery.toLowerCase())
+        ),
+        services: servicesWithChildren.filter((service) => {
+          const searchLower = searchQuery.toLowerCase();
+          const serviceName = renderText(service.name).toLowerCase();
+          const serviceDesc = renderText(service.description).toLowerCase();
+          return (
+            serviceName.includes(searchLower) ||
+            serviceDesc.includes(searchLower)
+          );
+        }),
+      }
+    : { categories: serviceCategories, services: servicesWithChildren };
+
+  // Auto-expand categories when searching
+  useEffect(() => {
+    if (searchQuery && filteredData.services.length > 0) {
+      const categoriesToExpand = new Set<string>();
+      const servicesToExpand = new Set<string>();
+      filteredData.services.forEach((service) => {
+        if (service.serviceCategoryId) {
+          categoriesToExpand.add(service.serviceCategoryId);
+        }
+        // If it's a child service, expand its parent
+        if (service.parentServiceId) {
+          servicesToExpand.add(service.parentServiceId);
+        }
+      });
+      setExpandedCategories(categoriesToExpand);
+      setExpandedServices(servicesToExpand);
+    }
+  }, [searchQuery, filteredData.services]);
+
+  const renderService = (service: Service, isChild: boolean = false) => {
+    const isExpanded = expandedServices.has(service.id);
+    const hasChildren =
+      service.childServices && service.childServices.length > 0;
+    const isAlreadyAssigned = alreadyAssignedServiceIds.includes(service.id);
+
+    return (
+      <div key={service.id} className="space-y-1">
+        <div
+          className={`flex items-start gap-3 p-3 rounded-lg border transition-colors ${
+            isChild ? "ml-6" : ""
+          } ${
+            selectedServiceIds.includes(service.id)
+              ? "border-purple-500 bg-purple-50"
+              : isAlreadyAssigned
+              ? "border-gray-300 bg-gray-50 opacity-60"
+              : "border-gray-200 hover:bg-gray-50"
+          } ${hasChildren ? "cursor-pointer" : ""}`}
+        >
+          {hasChildren && (
+            <div
+              onClick={() => toggleService(service.id)}
+              className="cursor-pointer pt-1"
+            >
+              {isExpanded ? (
+                <ChevronDown className="h-4 w-4 text-gray-500" />
+              ) : (
+                <ChevronRight className="h-4 w-4 text-gray-500" />
+              )}
+            </div>
+          )}
+          <Checkbox
+            checked={selectedServiceIds.includes(service.id)}
+            onCheckedChange={() => handleToggleService(service.id)}
+            id={`service-${service.id}`}
+            className="mt-1"
+            disabled={isAlreadyAssigned}
+          />
+          <FileText className="h-4 w-4 text-blue-500 mt-1" />
+          <div
+            className="flex-1"
+            onClick={() =>
+              !isAlreadyAssigned && handleToggleService(service.id)
+            }
+          >
+            <Label
+              htmlFor={`service-${service.id}`}
+              className={`cursor-pointer block ${
+                isAlreadyAssigned ? "cursor-not-allowed" : ""
+              }`}
+            >
+              <div className="font-medium text-gray-900">
+                {renderText(service.name)}
+                {isAlreadyAssigned && (
+                  <span className="ml-2 text-xs text-gray-500">
+                    (Already Assigned)
+                  </span>
+                )}
+              </div>
+              {service.description && (
+                <div className="text-sm text-gray-600 mt-1 line-clamp-2">
+                  {renderText(service.description)}
+                </div>
+              )}
+            </Label>
+          </div>
+        </div>
+
+        {/* Render child services */}
+        {hasChildren && isExpanded && (
+          <div className="ml-6 space-y-2 mt-1">
+            {service.childServices!.map((childService) =>
+              renderService(childService, true)
+            )}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-2xl h-[80vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>{t("assignServices", "Assign Services")}</DialogTitle>
+          <DialogDescription>
+            {t(
+              "assignServicesDescription",
+              `Select one or more services to assign to position: ${positionName}`
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 flex flex-col min-h-0 gap-4">
+          {/* Search */}
+          <div className="relative shrink-0">
+            <Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-500" />
+            <Input
+              placeholder={t(
+                "searchServices",
+                "Search services or categories..."
+              )}
+              className="pl-8"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+
+          {/* Tree View */}
+          <ScrollArea className="flex-1 border rounded-md p-2 min-h-0">
+            <div className="max-h-[400px]">
+              {categoriesLoading ? (
+                <div className="flex items-center justify-center py-8">
+                  <Loader2 className="h-8 w-8 animate-spin text-purple-600" />
+                </div>
+              ) : filteredData.categories.length === 0 &&
+                filteredData.services.length === 0 ? (
+                <div className="text-center py-8 text-gray-500">
+                  {t("noServicesFound", "No services found")}
+                </div>
+              ) : (
+                <div>
+                  <div className="space-y-1 pr-3">
+                    {filteredData.categories.map((category) => {
+                      const categoryServices = searchQuery
+                        ? filteredData.services.filter(
+                            (s) =>
+                              s.serviceCategoryId === category.id &&
+                              !s.parentServiceId
+                          )
+                        : parentServicesByCategory[category.id] || [];
+
+                      const isExpanded = expandedCategories.has(category.id);
+
+                      if (searchQuery && categoryServices.length === 0) {
+                        return null;
+                      }
+
+                      return (
+                        <div key={category.id} className="space-y-1">
+                          {/* Category Header */}
+                          <div
+                            className="flex items-center gap-2 p-2 rounded-md hover:bg-gray-100 cursor-pointer"
+                            onClick={() => toggleCategory(category.id)}
+                          >
+                            {isExpanded ? (
+                              <ChevronDown className="h-4 w-4 text-gray-500" />
+                            ) : (
+                              <ChevronRight className="h-4 w-4 text-gray-500" />
+                            )}
+                            <Folder className="h-4 w-4 text-purple-500" />
+                            <span className="font-medium text-gray-900">
+                              {renderText(category.name)}
+                            </span>
+                            <span className="text-xs text-gray-500 ml-auto">
+                              ({categoryServices.length})
+                            </span>
+                          </div>
+
+                          {/* Services under this category */}
+                          {isExpanded && categoryServices.length > 0 && (
+                            <div className="ml-6 space-y-2 mt-1">
+                              {categoryServices.map((service) =>
+                                renderService(service)
+                              )}
+                            </div>
+                          )}
+                        </div>
+                      );
+                    })}
+
+                    {/* Uncategorized services */}
+                    {parentServicesByCategory["uncategorized"] &&
+                      parentServicesByCategory["uncategorized"].length > 0 && (
+                        <div className="space-y-1">
+                          <div
+                            className="flex items-center gap-2 p-2 rounded-md hover:bg-gray-100 cursor-pointer"
+                            onClick={() => toggleCategory("uncategorized")}
+                          >
+                            {expandedCategories.has("uncategorized") ? (
+                              <ChevronDown className="h-4 w-4 text-gray-500" />
+                            ) : (
+                              <ChevronRight className="h-4 w-4 text-gray-500" />
+                            )}
+                            <Folder className="h-4 w-4 text-gray-400" />
+                            <span className="font-medium text-gray-700">
+                              Uncategorized
+                            </span>
+                            <span className="text-xs text-gray-500 ml-auto">
+                              (
+                              {parentServicesByCategory["uncategorized"].length}
+                              )
+                            </span>
+                          </div>
+
+                          {expandedCategories.has("uncategorized") && (
+                            <div className="ml-6 space-y-2 mt-1">
+                              {parentServicesByCategory["uncategorized"].map(
+                                (service) => renderService(service)
+                              )}
+                            </div>
+                          )}
+                        </div>
+                      )}
+                  </div>
+                </div>
+              )}
+            </div>
+          </ScrollArea>
+
+          {/* Selected service info */}
+          <div className="flex items-center justify-between text-sm shrink-0">
+            <div className="text-gray-600">
+              {selectedServiceIds.length > 0
+                ? t(
+                    "servicesSelected",
+                    `${selectedServiceIds.length} service(s) selected`
+                  )
+                : t("noServiceSelected", "No services selected")}
+            </div>
+            {selectedServiceIds.length > 0 && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleClearSelection}
+                className="text-red-600 hover:text-red-700 hover:bg-red-50"
+              >
+                {t("clearSelection", "Clear Selection")}
+              </Button>
+            )}
+          </div>
+        </div>
+
+        <DialogFooter className="shrink-0">
+          <Button variant="outline" onClick={onClose} disabled={isSaving}>
+            {t("common.cancel", "Cancel")}
+          </Button>
+          <Button
+            onClick={handleSave}
+            disabled={isSaving || selectedServiceIds.length === 0}
+            className="bg-purple-600 hover:bg-purple-700"
+          >
+            {isSaving ? (
+              <>
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                {t("saving", "Saving...")}
+              </>
+            ) : (
+              t("assignServices", "Assign Services")
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/ServiceAssignment/lists/DepartmentList.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/ServiceAssignment/lists/DepartmentList.tsx
new file mode 100644
index 000000000..89182d157
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/ServiceAssignment/lists/DepartmentList.tsx
@@ -0,0 +1,192 @@
+import {
+  ChevronDown,
+  ChevronRight,
+  Briefcase,
+  MoreVertical,
+} from "lucide-react";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useState } from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import { Button } from "@/shared/common/ui/button";
+import { t } from "i18next";
+import { PositionDto } from "@/user-management/dto/positions/positionDto";
+
+interface DepartmentListProps {
+  unitId: string;
+  selectedDepartmentId: string;
+  onSelectDepartment: (id: string) => void;
+  departments: any[];
+  positions: PositionDto[];
+  isLoading: boolean;
+  searchQuery: string;
+  onAssignService?: (positionId: string, positionName: string) => void;
+}
+
+export const DepartmentList = ({
+  unitId,
+  selectedDepartmentId,
+  onSelectDepartment,
+  departments,
+  positions,
+  isLoading,
+  searchQuery,
+  onAssignService,
+}: DepartmentListProps) => {
+  const localizedName = useLocalizedName();
+  const [expandedPositions, setExpandedPositions] = useState<Set<string>>(
+    new Set()
+  );
+
+  const togglePosition = (positionId: string) => {
+    setExpandedPositions((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(positionId)) {
+        newSet.delete(positionId);
+      } else {
+        newSet.add(positionId);
+      }
+      return newSet;
+    });
+  };
+
+  // Recursive function to render position hierarchy
+  const renderPosition = (position: PositionDto, level: number = 0) => {
+    const hasSubPositions =
+      position.subPositions && position.subPositions.length > 0;
+    const isExpanded = expandedPositions.has(position.id);
+
+    return (
+      <div key={position.id} className="space-y-1">
+        <div
+          className={`flex items-center gap-2 p-2 rounded-lg border transition-colors ${
+            selectedDepartmentId === position.id
+              ? "bg-purple-50 border-purple-500"
+              : "bg-white border-gray-200 hover:bg-gray-50"
+          }`}
+          style={{ marginLeft: `${level * 16}px` }}
+        >
+          {hasSubPositions ? (
+            <button
+              onClick={() => togglePosition(position.id)}
+              className="p-1 hover:bg-gray-200 rounded flex-shrink-0"
+            >
+              {isExpanded ? (
+                <ChevronDown className="h-4 w-4" />
+              ) : (
+                <ChevronRight className="h-4 w-4" />
+              )}
+            </button>
+          ) : (
+            <div className="w-6 flex-shrink-0" />
+          )}
+
+          <button
+            onClick={() => onSelectDepartment(position.id)}
+            className="flex-1 flex items-center gap-2 text-left min-w-0"
+          >
+            <Briefcase className="h-4 w-4 flex-shrink-0" />
+            <span className="font-medium truncate">
+              {localizedName(position.name)}
+            </span>
+          </button>
+
+          {hasSubPositions && (
+            <span className="text-xs text-gray-500 px-2 flex-shrink-0">
+              {position.subPositions.length}
+            </span>
+          )}
+
+          {onAssignService && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 w-8 p-0 flex-shrink-0"
+                >
+                  <MoreVertical className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem
+                  onClick={() =>
+                    onAssignService(position.id, localizedName(position.name))
+                  }
+                >
+                  {t("assignService", "Assign Service")}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+        </div>
+
+        {/* Render sub-positions recursively */}
+        {isExpanded && hasSubPositions && (
+          <div className="space-y-1">
+            {position.subPositions.map((subPosition) =>
+              renderPosition(subPosition, level + 1)
+            )}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  if (!unitId) {
+    return (
+      <div className="text-center py-8 text-gray-500">
+        {t("selectUnitFirst", "Select a unit first")}
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="space-y-2">
+        {[1, 2, 3].map((i) => (
+          <Skeleton key={i} className="h-12 w-full" />
+        ))}
+      </div>
+    );
+  }
+
+  // Filter positions based on search query
+  const filterPositions = (positions: PositionDto[]): PositionDto[] => {
+    if (!searchQuery) return positions;
+
+    return positions.filter((position) => {
+      const matchesSearch = localizedName(position.name)
+        .toLowerCase()
+        .includes(searchQuery.toLowerCase());
+
+      // Also check sub-positions
+      const hasMatchingSubPosition =
+        position.subPositions &&
+        filterPositions(position.subPositions).length > 0;
+
+      return matchesSearch || hasMatchingSubPosition;
+    });
+  };
+
+  const filteredPositions = filterPositions(positions);
+
+  if (filteredPositions.length === 0) {
+    return (
+      <div className="text-center py-8 text-gray-500">
+        {t("noPositionsFound", "No positions found")}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {filteredPositions.map((position) => renderPosition(position))}
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/ServiceAssignment/lists/OrganizationList.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/ServiceAssignment/lists/OrganizationList.tsx
new file mode 100644
index 000000000..3e375def5
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/ServiceAssignment/lists/OrganizationList.tsx
@@ -0,0 +1,72 @@
+import { Building2 } from "lucide-react";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import { useLocalizedName } from "@/shared/common/localizedName";
+
+interface Organization {
+  id: string;
+  name: {
+    en: string;
+    am: string;
+  };
+}
+
+interface OrganizationListProps {
+  selectedOrgId: string;
+  organizations: Organization[];
+  isLoading: boolean;
+  searchQuery: string;
+  onSelectOrganization: (id: string) => void;
+}
+
+export const OrganizationList = ({
+  selectedOrgId,
+  organizations,
+  isLoading,
+  searchQuery,
+  onSelectOrganization,
+}: OrganizationListProps) => {
+  const localizedName = useLocalizedName();
+
+  const filteredOrganizations = organizations.filter((org) =>
+    localizedName(org.name).toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  if (isLoading) {
+    return (
+      <div className="space-y-2">
+        {[1, 2, 3].map((i) => (
+          <Skeleton key={i} className="h-12 w-full" />
+        ))}
+      </div>
+    );
+  }
+
+  if (filteredOrganizations.length === 0) {
+    return (
+      <div className="text-center py-8 text-gray-500">
+        No organizations found
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {filteredOrganizations.map((org) => (
+        <button
+          key={org.id}
+          onClick={() => onSelectOrganization(org.id)}
+          className={`w-full text-left p-3 rounded-lg border transition-colors ${
+            selectedOrgId === org.id
+              ? "bg-purple-50 border-purple-500 text-purple-700"
+              : "bg-white border-gray-200 hover:bg-gray-50"
+          }`}
+        >
+          <div className="flex items-center gap-2">
+            <Building2 className="h-4 w-4" />
+            <span className="font-medium">{localizedName(org.name)}</span>
+          </div>
+        </button>
+      ))}
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/ServiceAssignment/lists/PositionServicesList.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/ServiceAssignment/lists/PositionServicesList.tsx
new file mode 100644
index 000000000..da991fd26
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/ServiceAssignment/lists/PositionServicesList.tsx
@@ -0,0 +1,360 @@
+import React, { useEffect, useState } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/common/ui/table";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import { Button } from "@/shared/common/ui/button";
+import {
+  MoreVertical,
+  Clock,
+  ChevronDown,
+  ChevronRight,
+  Trash2,
+} from "lucide-react";
+import {
+  getPositionServices,
+  deletePositionService,
+} from "@/performance-management/services/api/serviceAssignmentService";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import { useToast } from "@/shared/common/ui/use-toast";
+import { CreateWorkingHoursModal } from "@/performance-management/components/WorkingHours/CreateWorkingHoursModal";
+import { EditWorkingHoursModal } from "@/performance-management/components/WorkingHours/EditWorkingHoursModal";
+import { WorkingDaysTable } from "@/performance-management/components/WorkingHours/WorkingDaysTable";
+import { useWorkingHoursMutations } from "@/performance-management/hooks/useWorkingHoursHook";
+import { WorkingHoursResponse } from "@/performance-management/types/workingHoursTypes";
+import { t } from "i18next";
+
+interface PositionServicesListProps {
+  positionId: string;
+}
+
+export const PositionServicesList = ({
+  positionId,
+}: PositionServicesListProps) => {
+  const [services, setServices] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isWorkingHoursModalOpen, setIsWorkingHoursModalOpen] = useState(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [selectedPositionServiceId, setSelectedPositionServiceId] =
+    useState<string>("");
+  const [editingWorkingDay, setEditingWorkingDay] =
+    useState<WorkingHoursResponse | null>(null);
+  const [expandedServiceId, setExpandedServiceId] = useState<string | null>(
+    null
+  );
+  const [refreshTrigger, setRefreshTrigger] = useState(0);
+  const [deletingServiceId, setDeletingServiceId] = useState<string | null>(
+    null
+  );
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [isDeletingService, setIsDeletingService] = useState(false);
+  const localizedName = useLocalizedName();
+  const { toast } = useToast();
+  const { delete: deleteWorkingHours } = useWorkingHoursMutations();
+
+  const handleCreateWorkingHours = (positionServiceId: string) => {
+    setSelectedPositionServiceId(positionServiceId);
+    setIsWorkingHoursModalOpen(true);
+  };
+
+  const handleWorkingHoursSuccess = () => {
+    setIsWorkingHoursModalOpen(false);
+    setSelectedPositionServiceId("");
+    setRefreshTrigger((prev) => prev + 1);
+  };
+
+  const handleEditWorkingDay = (workingDay: WorkingHoursResponse) => {
+    setEditingWorkingDay(workingDay);
+    setIsEditModalOpen(true);
+  };
+
+  const handleEditSuccess = () => {
+    setIsEditModalOpen(false);
+    setEditingWorkingDay(null);
+    setRefreshTrigger((prev) => prev + 1);
+  };
+
+  const handleDeleteWorkingDay = async (id: string) => {
+    deleteWorkingHours.mutate(id, {
+      onSuccess: () => {
+        toast({
+          title: "Success",
+          description: "Working hours deleted successfully",
+        });
+        setRefreshTrigger((prev) => prev + 1);
+      },
+      onError: (error: any) => {
+        toast({
+          title: "Error",
+          description:
+            error?.response?.data?.message || "Failed to delete working hours",
+          variant: "destructive",
+        });
+      },
+    });
+  };
+
+  const toggleExpand = (serviceId: string) => {
+    setExpandedServiceId(expandedServiceId === serviceId ? null : serviceId);
+  };
+
+  const handleDeleteService = (positionServiceId: string) => {
+    setDeletingServiceId(positionServiceId);
+    setIsDeleteDialogOpen(true);
+  };
+
+  const confirmDeleteService = async () => {
+    if (!deletingServiceId) return;
+
+    setIsDeletingService(true);
+    try {
+      await deletePositionService(deletingServiceId);
+      toast({
+        title: "Success",
+        description: "Service removed from position successfully",
+      });
+      // Refresh the services list
+      const response = await getPositionServices(positionId);
+      const data = response.data;
+      if (data && Array.isArray(data.items)) {
+        setServices(data.items);
+      } else if (Array.isArray(data)) {
+        setServices(data);
+      } else {
+        setServices([]);
+      }
+      setIsDeleteDialogOpen(false);
+      setDeletingServiceId(null);
+    } catch (error: any) {
+      toast({
+        title: "Error",
+        description:
+          error?.response?.data?.message || "Failed to remove service",
+        variant: "destructive",
+      });
+    } finally {
+      setIsDeletingService(false);
+    }
+  };
+
+  useEffect(() => {
+    const fetchServices = async () => {
+      if (!positionId) {
+        setServices([]);
+        return;
+      }
+
+      setIsLoading(true);
+      try {
+        const response = await getPositionServices(positionId);
+        // Handle both array and single object response
+        const data = response.data;
+        if (data && Array.isArray(data.items)) {
+          setServices(data.items);
+        } else if (Array.isArray(data)) {
+          setServices(data);
+        } else if (data) {
+          setServices([data]);
+        } else {
+          setServices([]);
+        }
+      } catch (error) {
+        console.error("Failed to fetch position services", error);
+        setServices([]);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchServices();
+  }, [positionId]);
+
+  if (!positionId) {
+    return null;
+  }
+
+  if (isLoading) {
+    return (
+      <div className="space-y-2 border rounded-md p-4 bg-white mt-4">
+        <Skeleton className="h-8 w-full" />
+        <Skeleton className="h-8 w-full" />
+        <Skeleton className="h-8 w-full" />
+      </div>
+    );
+  }
+
+  if (services.length === 0) {
+    return (
+      <div className="text-center py-8 text-gray-500 border rounded-md bg-white mt-4">
+        {t("noServicesFound", "No services found for this position")}
+      </div>
+    );
+  }
+
+  return (
+    <div className="border rounded-md bg-white overflow-hidden mt-4 shadow-sm">
+      <div className="p-3 border-b bg-gray-50">
+        <h3 className="font-medium text-gray-700">
+          {t("associatedServices", "Associated Services")}
+        </h3>
+      </div>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-12"></TableHead>
+            <TableHead>{t("name", "Name")}</TableHead>
+            <TableHead>{t("slug", "Slug")}</TableHead>
+            <TableHead>{t("description", "Description")}</TableHead>
+            <TableHead className="text-right">
+              {t("actions", "Actions")}
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {services.map((positionService) => (
+            <React.Fragment key={positionService.id}>
+              <TableRow className="cursor-pointer hover:bg-gray-50">
+                <TableCell onClick={() => toggleExpand(positionService.id)}>
+                  <Button variant="ghost" size="sm" className="p-0 h-6 w-6">
+                    {expandedServiceId === positionService.id ? (
+                      <ChevronDown className="h-4 w-4" />
+                    ) : (
+                      <ChevronRight className="h-4 w-4" />
+                    )}
+                  </Button>
+                </TableCell>
+                <TableCell
+                  className="font-medium"
+                  onClick={() => toggleExpand(positionService.id)}
+                >
+                  {localizedName(positionService.service?.name)}
+                </TableCell>
+                <TableCell onClick={() => toggleExpand(positionService.id)}>
+                  {positionService.service?.slug}
+                </TableCell>
+                <TableCell onClick={() => toggleExpand(positionService.id)}>
+                  {localizedName(positionService.service?.description)}
+                </TableCell>
+                <TableCell className="text-right">
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" size="sm">
+                        <MoreVertical className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem
+                        onClick={() =>
+                          handleCreateWorkingHours(positionService.id)
+                        }
+                      >
+                        <Clock className="h-4 w-4 mr-2" />
+                        {t("createWorkingHours", "Create Working Hours")}
+                      </DropdownMenuItem>
+                      <DropdownMenuItem
+                        onClick={() => handleDeleteService(positionService.id)}
+                        className="text-red-600 focus:text-red-600"
+                      >
+                        <Trash2 className="h-4 w-4 mr-2" />
+                        {t("removeService", "Remove Service")}
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </TableCell>
+              </TableRow>
+              {expandedServiceId === positionService.id && (
+                <TableRow>
+                  <TableCell colSpan={5} className="bg-gray-50 p-4">
+                    <div className="space-y-2">
+                      <h4 className="font-semibold text-sm text-gray-700">
+                        {t("workingDays", "Working Days")}
+                      </h4>
+                      <WorkingDaysTable
+                        positionServiceId={positionService.id}
+                        onEdit={handleEditWorkingDay}
+                        onDelete={handleDeleteWorkingDay}
+                        refreshTrigger={refreshTrigger}
+                      />
+                    </div>
+                  </TableCell>
+                </TableRow>
+              )}
+            </React.Fragment>
+          ))}
+        </TableBody>
+      </Table>
+
+      {/* Create Working Hours Modal */}
+      <CreateWorkingHoursModal
+        open={isWorkingHoursModalOpen}
+        onClose={() => {
+          setIsWorkingHoursModalOpen(false);
+          setSelectedPositionServiceId("");
+        }}
+        onSuccess={handleWorkingHoursSuccess}
+        positionServiceId={selectedPositionServiceId}
+      />
+
+      {/* Edit Working Hours Modal */}
+      <EditWorkingHoursModal
+        open={isEditModalOpen}
+        onClose={() => {
+          setIsEditModalOpen(false);
+          setEditingWorkingDay(null);
+        }}
+        onSuccess={handleEditSuccess}
+        workingDay={editingWorkingDay}
+      />
+
+      {/* Delete Service Confirmation Dialog */}
+      <AlertDialog
+        open={isDeleteDialogOpen}
+        onOpenChange={setIsDeleteDialogOpen}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Remove Service from Position</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to remove this service from the position?
+              This will also delete all associated working hours. This action
+              cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeletingService}>
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={confirmDeleteService}
+              disabled={isDeletingService}
+              className="bg-red-600 hover:bg-red-700"
+            >
+              {isDeletingService ? "Removing..." : "Remove"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/ServiceAssignment/lists/UnitList.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/ServiceAssignment/lists/UnitList.tsx
new file mode 100644
index 000000000..c890e739d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/ServiceAssignment/lists/UnitList.tsx
@@ -0,0 +1,78 @@
+import { Building } from "lucide-react";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import { useLocalizedName } from "@/shared/common/localizedName";
+
+interface Unit {
+  id: string;
+  name: {
+    en: string;
+    am: string;
+  };
+}
+
+interface UnitListProps {
+  organizationId: string;
+  selectedUnitId: string;
+  onSelectUnit: (id: string) => void;
+  units: Unit[];
+  isLoading: boolean;
+  searchQuery: string;
+}
+
+export const UnitList = ({
+  organizationId,
+  selectedUnitId,
+  onSelectUnit,
+  units,
+  isLoading,
+  searchQuery,
+}: UnitListProps) => {
+  const localizedName = useLocalizedName();
+
+  const filteredUnits = units.filter((unit) =>
+    localizedName(unit.name).toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  if (!organizationId) {
+    return (
+      <div className="text-center py-8 text-gray-500">
+        Select an organization first
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="space-y-2">
+        {[1, 2, 3].map((i) => (
+          <Skeleton key={i} className="h-12 w-full" />
+        ))}
+      </div>
+    );
+  }
+
+  if (filteredUnits.length === 0) {
+    return <div className="text-center py-8 text-gray-500">No units found</div>;
+  }
+
+  return (
+    <div className="space-y-2">
+      {filteredUnits.map((unit) => (
+        <button
+          key={unit.id}
+          onClick={() => onSelectUnit(unit.id)}
+          className={`w-full text-left p-3 rounded-lg border transition-colors ${
+            selectedUnitId === unit.id
+              ? "bg-purple-50 border-purple-500 text-purple-700"
+              : "bg-white border-gray-200 hover:bg-gray-50"
+          }`}
+        >
+          <div className="flex items-center gap-2">
+            <Building className="h-4 w-4" />
+            <span className="font-medium">{localizedName(unit.name)}</span>
+          </div>
+        </button>
+      ))}
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/ServiceCategory/ServiceCategoryForm.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/ServiceCategory/ServiceCategoryForm.tsx
new file mode 100644
index 000000000..83ebfb20b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/ServiceCategory/ServiceCategoryForm.tsx
@@ -0,0 +1,195 @@
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { useTranslation } from "react-i18next";
+import { useAuth } from "@/shared/context/AuthContext";
+import { GenericForm } from "@/performance-management/utils/generic-form";
+import { FormField } from "@/performance-management/utils/shared-field-types";
+import { useServiceCategoryMutations } from "@/performance-management/hooks/useServiceCategory";
+import {
+  CreateServiceCategoryRequest,
+  ServiceCategory,
+} from "@/performance-management/services/api/serviceCategoryService";
+import { useNavigate } from "react-router-dom";
+import { useEffect } from "react";
+
+// Validation schema factory
+const createServiceCategorySchema = (t: (key: string) => string) =>
+  z.object({
+    slug: z.string().optional(),
+    nameEn: z
+      .string()
+      .min(1, t("serviceCategory.validation.nameEnRequired"))
+      .max(100, t("serviceCategory.validation.nameMaxLength")),
+    nameAm: z
+      .string()
+      .min(1, t("serviceCategory.validation.nameAmRequired"))
+      .max(100, t("serviceCategory.validation.nameMaxLength")),
+    descriptionEn: z
+      .string()
+      .min(1, t("serviceCategory.validation.descriptionEnRequired"))
+      .max(500, t("serviceCategory.validation.descriptionMaxLength")),
+    descriptionAm: z
+      .string()
+      .min(1, t("serviceCategory.validation.descriptionAmRequired"))
+      .max(500, t("serviceCategory.validation.descriptionMaxLength")),
+  });
+
+interface ServiceCategoryFormValues {
+  slug?: string;
+  nameEn: string;
+  nameAm: string;
+  descriptionEn: string;
+  descriptionAm: string;
+}
+
+interface ServiceCategoryFormProps {
+  category?: ServiceCategory;
+  onSuccess?: () => void;
+  onCancel?: () => void;
+}
+
+export const ServiceCategoryForm = ({
+  category,
+  onSuccess,
+  onCancel,
+}: ServiceCategoryFormProps) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { user } = useAuth();
+  const { create, update } = useServiceCategoryMutations();
+
+  const organizationId = user?.employee?.[0]?.organizationId;
+  const isEditing = !!category;
+
+  const form = useForm<ServiceCategoryFormValues>({
+    resolver: zodResolver(createServiceCategorySchema(t)),
+    defaultValues: {
+      slug: category?.slug || "",
+      nameEn: category?.name?.en || "",
+      nameAm: category?.name?.am || "",
+      descriptionEn: category?.description?.en || "",
+      descriptionAm: category?.description?.am || "",
+    },
+  });
+
+  // Reset form when category changes
+  useEffect(() => {
+    if (category) {
+      form.reset({
+        slug: category.slug,
+        nameEn: category.name?.en || "",
+        nameAm: category.name?.am || "",
+        descriptionEn: category.description?.en || "",
+        descriptionAm: category.description?.am || "",
+      });
+    }
+  }, [category, form]);
+
+  const serviceCategoryFormFields: FormField<ServiceCategoryFormValues>[] = [
+    {
+      name: "slug",
+      label: t("serviceCategory.slug"),
+      type: "text",
+      placeholder: t("serviceCategory.slugPlaceholder"),
+      description: t("serviceCategory.slugDescription"),
+      required: false,
+    },
+    {
+      name: "nameEn",
+      label: t("serviceCategory.nameEn"),
+      type: "text",
+      placeholder: t("serviceCategory.nameEnPlaceholder"),
+      required: true,
+    },
+    {
+      name: "nameAm",
+      label: t("serviceCategory.nameAm"),
+      type: "text",
+      placeholder: t("serviceCategory.nameAmPlaceholder"),
+      required: true,
+    },
+    {
+      name: "descriptionEn",
+      label: t("serviceCategory.descriptionEn"),
+      type: "textarea",
+      placeholder: t("serviceCategory.descriptionEnPlaceholder"),
+      required: true,
+      rows: 4,
+    },
+    {
+      name: "descriptionAm",
+      label: t("serviceCategory.descriptionAm"),
+      type: "textarea",
+      placeholder: t("serviceCategory.descriptionAmPlaceholder"),
+      required: true,
+      rows: 4,
+    },
+  ];
+
+  const handleSubmit = async (values: ServiceCategoryFormValues) => {
+    if (!organizationId) {
+      throw new Error(t("serviceCategory.organizationRequired"));
+    }
+
+    const requestData: CreateServiceCategoryRequest = {
+      slug: values.slug || "",
+      name: {
+        en: values.nameEn,
+        am: values.nameAm,
+      },
+      description: {
+        en: values.descriptionEn,
+        am: values.descriptionAm,
+      },
+      organizationId,
+    };
+
+    if (isEditing && category) {
+      await update.mutateAsync({ id: category.id, data: requestData });
+    } else {
+      await create.mutateAsync(requestData);
+    }
+
+    onSuccess?.();
+  };
+
+  const handleCancel = () => {
+    if (onCancel) {
+      onCancel();
+    } else {
+      navigate(-1);
+    }
+  };
+
+  return (
+    <GenericForm<ServiceCategoryFormValues>
+      form={form}
+      fields={serviceCategoryFormFields}
+      onSubmit={handleSubmit}
+      onCancel={handleCancel}
+      isSubmitting={create.isPending || update.isPending}
+      submitButtonText={
+        isEditing
+          ? t("serviceCategory.updateCategory")
+          : t("serviceCategory.createCategory")
+      }
+      cancelButtonText={t("common.cancel")}
+      successMessage={
+        isEditing
+          ? t("serviceCategory.updateSuccess")
+          : t("serviceCategory.createSuccess")
+      }
+      errorMessage={
+        isEditing
+          ? t("serviceCategory.updateError")
+          : t("serviceCategory.createError")
+      }
+      title={
+        isEditing
+          ? t("serviceCategory.editTitle")
+          : t("serviceCategory.createTitle")
+      }
+    />
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/ServiceCategory/ServiceCategoryList.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/ServiceCategory/ServiceCategoryList.tsx
new file mode 100644
index 000000000..ab7e23189
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/ServiceCategory/ServiceCategoryList.tsx
@@ -0,0 +1,308 @@
+import { useState } from "react";
+import { Pencil, Trash2 } from "lucide-react";
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import { Button } from "@/shared/common/ui/button";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { ColumnDef } from "@tanstack/react-table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import { Input } from "@/shared/common/ui/input";
+import { Label } from "@/shared/common/ui/label";
+import { Textarea } from "@/shared/common/ui/textarea";
+import {
+  useServiceCategoryList,
+  useServiceCategoryMutations,
+} from "../../hooks/useServiceCategory";
+import { ServiceCategory } from "../../services/api/serviceCategoryService";
+
+interface ServiceCategoryListProps {
+  organizationId: string;
+  extraToolbar?: React.ReactNode;
+}
+
+export const ServiceCategoryList = ({
+  organizationId,
+  extraToolbar,
+}: ServiceCategoryListProps) => {
+  const [pageIndex, setPageIndex] = useState(0);
+  const [isEditOpen, setIsEditOpen] = useState(false);
+  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
+  const [selectedCategory, setSelectedCategory] =
+    useState<ServiceCategory | null>(null);
+  const localizedName = useLocalizedName();
+
+  // Form state
+  const [formData, setFormData] = useState({
+    slug: "",
+    name: { am: "", en: "" },
+    description: { am: "", en: "" },
+  });
+
+  const { data, isLoading, isError, refetch } =
+    useServiceCategoryList(organizationId);
+  const { update, delete: deleteCategory } = useServiceCategoryMutations();
+
+  const handleEdit = (category: ServiceCategory) => {
+    setSelectedCategory(category);
+    setFormData({
+      slug: category.slug,
+      name: category.name,
+      description: category.description,
+    });
+    setIsEditOpen(true);
+  };
+
+  const handleUpdate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!organizationId || !selectedCategory) return;
+
+    update.mutate(
+      {
+        id: selectedCategory.id,
+        data: {
+          ...formData,
+          organizationId,
+        },
+      },
+      {
+        onSuccess: () => {
+          setIsEditOpen(false);
+          setSelectedCategory(null);
+          setFormData({
+            slug: "",
+            name: { am: "", en: "" },
+            description: { am: "", en: "" },
+          });
+        },
+      }
+    );
+  };
+
+  const handleDeleteClick = (category: ServiceCategory) => {
+    setSelectedCategory(category);
+    setIsDeleteOpen(true);
+  };
+
+  const handleDelete = () => {
+    if (!selectedCategory) return;
+
+    deleteCategory.mutate(selectedCategory.id, {
+      onSuccess: () => {
+        setIsDeleteOpen(false);
+        setSelectedCategory(null);
+      },
+    });
+  };
+
+  const columns: ColumnDef<ServiceCategory>[] = [
+    {
+      accessorKey: "slug",
+      header: "Slug",
+    },
+    {
+      accessorKey: "name",
+      header: "Name",
+      cell: ({ row }) => localizedName(row.original.name),
+    },
+    {
+      accessorKey: "description",
+      header: "Description",
+      cell: ({ row }) => localizedName(row.original.description),
+    },
+    {
+      id: "actions",
+      header: "Actions",
+      cell: ({ row }) => (
+        <div className="flex gap-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => handleEdit(row.original)}
+          >
+            <Pencil className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => handleDeleteClick(row.original)}
+          >
+            <Trash2 className="h-4 w-4 text-destructive" />
+          </Button>
+        </div>
+      ),
+    },
+  ];
+
+  if (isLoading)
+    return (
+      <div className="p-6 space-y-6">
+        <Skeleton className="h-8 w-64" />
+        <Skeleton className="h-12 w-full" />
+        <Skeleton className="h-12 w-full" />
+      </div>
+    );
+
+  if (isError)
+    return (
+      <div className="p-6 space-y-4">
+        <p className="text-destructive font-semibold">
+          Failed to load service categories
+        </p>
+        <Button onClick={() => refetch()}>Retry</Button>
+      </div>
+    );
+
+  const serviceCategories = data?.data?.items || [];
+
+  return (
+    <div className="p-6">
+      <AdvancedTable<ServiceCategory, unknown>
+        columns={columns}
+        data={serviceCategories}
+        tableName="Service Categories"
+        extraToolbar={extraToolbar}
+        toolBarPosition="right"
+        itemCount={serviceCategories.length}
+        pageIndex={pageIndex}
+        onPageChange={setPageIndex}
+        nextFunction={() => setPageIndex((p) => p + 1)}
+        prevFunction={() => setPageIndex((p) => Math.max(0, p - 1))}
+        refresh={refetch}
+      />
+
+      {/* Edit Dialog */}
+      <Dialog open={isEditOpen} onOpenChange={setIsEditOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Edit Service Category</DialogTitle>
+          </DialogHeader>
+          <form onSubmit={handleUpdate} className="space-y-4">
+            <div>
+              <Label>Slug</Label>
+              <Input
+                value={formData.slug}
+                onChange={(e) =>
+                  setFormData({ ...formData, slug: e.target.value })
+                }
+                required
+              />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <Label>Name (English)</Label>
+                <Input
+                  value={formData.name.en}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      name: { ...formData.name, en: e.target.value },
+                    })
+                  }
+                  required
+                />
+              </div>
+              <div>
+                <Label>Name (Amharic)</Label>
+                <Input
+                  value={formData.name.am}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      name: { ...formData.name, am: e.target.value },
+                    })
+                  }
+                  required
+                />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <Label>Description (English)</Label>
+                <Textarea
+                  value={formData.description.en}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      description: {
+                        ...formData.description,
+                        en: e.target.value,
+                      },
+                    })
+                  }
+                  required
+                />
+              </div>
+              <div>
+                <Label>Description (Amharic)</Label>
+                <Textarea
+                  value={formData.description.am}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      description: {
+                        ...formData.description,
+                        am: e.target.value,
+                      },
+                    })
+                  }
+                  required
+                />
+              </div>
+            </div>
+            <div className="flex justify-end gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setIsEditOpen(false)}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" disabled={update.isPending}>
+                {update.isPending ? "Updating..." : "Update"}
+              </Button>
+            </div>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog open={isDeleteOpen} onOpenChange={setIsDeleteOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Service Category</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete "
+              {selectedCategory && localizedName(selectedCategory.name)}"? This
+              action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              disabled={deleteCategory.isPending}
+              className="bg-destructive text-white hover:bg-destructive/90"
+            >
+              {deleteCategory.isPending ? "Deleting..." : "Delete"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/ServiceCategory/ServiceCategoryPage.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/ServiceCategory/ServiceCategoryPage.tsx
new file mode 100644
index 000000000..39b94a31a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/ServiceCategory/ServiceCategoryPage.tsx
@@ -0,0 +1,183 @@
+import { useState } from "react";
+import { PlusIcon } from "lucide-react";
+import { Button } from "@/shared/common/ui/button";
+import { useAuth } from "@/shared/context/AuthContext";
+import { useUnitContext } from "@/shared/context/UnitContext";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/shared/common/ui/dialog";
+import { Input } from "@/shared/common/ui/input";
+import { Label } from "@/shared/common/ui/label";
+import { Textarea } from "@/shared/common/ui/textarea";
+import { useServiceCategoryMutations } from "../../hooks/useServiceCategory";
+import { ServiceCategoryList } from "./ServiceCategoryList";
+
+export const ServiceCategoryPage = () => {
+  const [isCreateOpen, setIsCreateOpen] = useState(false);
+  const { user } = useAuth();
+
+  // Form state
+  const [formData, setFormData] = useState({
+    slug: "",
+    name: { am: "", en: "" },
+    description: { am: "", en: "" },
+  });
+
+  const organizationId =
+    user?.employee?.length && user.employee.length > 0
+      ? user.employee[0].organizationId
+      : undefined;
+
+  const unitContext = useUnitContext();
+  const unitsQuery = unitContext?.getList(organizationId!, {
+    take: 300,
+    skip: 0,
+  });
+
+  const { create } = useServiceCategoryMutations();
+
+  const handleCreate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!organizationId) return;
+
+    create.mutate(
+      {
+        ...formData,
+        organizationId: organizationId,
+      },
+      {
+        onSuccess: () => {
+          setIsCreateOpen(false);
+          setFormData({
+            slug: "",
+            name: { am: "", en: "" },
+            description: { am: "", en: "" },
+          });
+        },
+      }
+    );
+  };
+
+  const extraToolbar = (
+    <div className="flex gap-2">
+      <Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
+        <DialogTrigger asChild>
+          <Button className="bg-gradient-to-r from-purple-500 to-violet-600 text-white">
+            <PlusIcon className="h-4 w-4 mr-2" />
+            Create Service Category
+          </Button>
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Create Service Category</DialogTitle>
+          </DialogHeader>
+          <form onSubmit={handleCreate} className="space-y-4">
+            <div>
+              <Label>Slug</Label>
+              <Input
+                value={formData.slug}
+                onChange={(e) =>
+                  setFormData({ ...formData, slug: e.target.value })
+                }
+                required
+              />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <Label>Name (English)</Label>
+                <Input
+                  value={formData.name.en}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      name: { ...formData.name, en: e.target.value },
+                    })
+                  }
+                  required
+                />
+              </div>
+              <div>
+                <Label>Name (Amharic)</Label>
+                <Input
+                  value={formData.name.am}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      name: { ...formData.name, am: e.target.value },
+                    })
+                  }
+                  required
+                />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <Label>Description (English)</Label>
+                <Textarea
+                  value={formData.description.en}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      description: {
+                        ...formData.description,
+                        en: e.target.value,
+                      },
+                    })
+                  }
+                  required
+                />
+              </div>
+              <div>
+                <Label>Description (Amharic)</Label>
+                <Textarea
+                  value={formData.description.am}
+                  onChange={(e) =>
+                    setFormData({
+                      ...formData,
+                      description: {
+                        ...formData.description,
+                        am: e.target.value,
+                      },
+                    })
+                  }
+                  required
+                />
+              </div>
+            </div>
+            <div className="flex justify-end gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setIsCreateOpen(false)}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" disabled={create.isPending}>
+                {create.isPending ? "Creating..." : "Create"}
+              </Button>
+            </div>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+
+  if (!organizationId) {
+    return (
+      <div className="p-6 space-y-4">
+        <p className="text-destructive font-semibold">No organization found</p>
+      </div>
+    );
+  }
+
+  return (
+    <ServiceCategoryList
+      organizationId={organizationId}
+      extraToolbar={extraToolbar}
+    />
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/WorkingHours/CreateWorkingHoursModal.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/WorkingHours/CreateWorkingHoursModal.tsx
new file mode 100644
index 000000000..619664357
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/WorkingHours/CreateWorkingHoursModal.tsx
@@ -0,0 +1,226 @@
+import { useState, useEffect } from "react";
+import { useForm } from "react-hook-form";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/shared/common/ui/dialog";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import { Label } from "@/shared/common/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { toast } from "sonner";
+import { useWorkingHoursMutations } from "@/performance-management/hooks/useWorkingHoursHook";
+import { CreateWorkingHoursDto, WeekDay } from "../../types/workingHoursTypes";
+
+interface CreateWorkingHoursModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  positionServiceId?: string;
+}
+
+const weekDays: (WeekDay | "all")[] = [
+  "all",
+  "monday",
+  "tuesday",
+  "wednesday",
+  "thursday",
+  "friday",
+  "saturday",
+  "sunday",
+];
+
+export const CreateWorkingHoursModal = ({
+  open,
+  onClose,
+  onSuccess,
+  positionServiceId = "",
+}: CreateWorkingHoursModalProps) => {
+  const { create } = useWorkingHoursMutations();
+  const [selectedWeekDay, setSelectedWeekDay] = useState<WeekDay | "all">(
+    "all"
+  );
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    setValue,
+    formState: { errors },
+  } = useForm<CreateWorkingHoursDto>({
+    defaultValues: {
+      slug: "",
+      weekDay: "monday",
+      positionServiceId: positionServiceId,
+      startTime: "09:00",
+      endTime: "17:00",
+    },
+  });
+
+  // Update form when positionServiceId prop changes
+  useEffect(() => {
+    if (positionServiceId) {
+      setValue("positionServiceId", positionServiceId);
+    }
+  }, [positionServiceId, setValue]);
+
+  const onSubmit = async (data: CreateWorkingHoursDto) => {
+    // If "all" is selected, create working hours for all days
+    if (selectedWeekDay === "all") {
+      const allDays: WeekDay[] = [
+        "monday",
+        "tuesday",
+        "wednesday",
+        "thursday",
+        "friday",
+        "saturday",
+        "sunday",
+      ];
+
+      let successCount = 0;
+      let errorCount = 0;
+
+      for (const day of allDays) {
+        const payload = {
+          ...data,
+          weekDay: day,
+        };
+
+        try {
+          await create.mutateAsync(payload);
+          successCount++;
+        } catch (error) {
+          errorCount++;
+          console.error(`Failed to create working hours for ${day}:`, error);
+        }
+      }
+
+      if (successCount > 0) {
+        toast.success(`Working hours created for ${successCount} day(s)${errorCount > 0 ? `, ${errorCount} failed` : ""}`);
+        reset();
+        onClose();
+        onSuccess();
+      } else {
+        toast.error("Failed to create working hours for all days");
+      }
+    } else {
+      // Single day creation
+      const payload = {
+        ...data,
+        weekDay: selectedWeekDay as WeekDay,
+      };
+
+      create.mutate(payload, {
+        onSuccess: () => {
+          reset();
+          onClose();
+          onSuccess();
+        },
+      });
+    }
+  };
+
+  const handleClose = () => {
+    reset();
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>Create Working Hours</DialogTitle>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="slug">Slug</Label>
+            <Input
+              id="slug"
+              {...register("slug", { required: "Slug is required" })}
+              placeholder="e.g., morning-shift"
+            />
+            {errors.slug && (
+              <p className="text-sm text-red-500">{errors.slug.message}</p>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="weekDay">Week Day</Label>
+            <Select
+              value={selectedWeekDay}
+              onValueChange={(value) =>
+                setSelectedWeekDay(value as WeekDay | "all")
+              }
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select a day" />
+              </SelectTrigger>
+              <SelectContent>
+                {weekDays.map((day) => (
+                  <SelectItem key={day} value={day}>
+                    <span className="capitalize">
+                      {day === "all" ? "All Days" : day}
+                    </span>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="startTime">Start Time</Label>
+              <Input
+                id="startTime"
+                type="time"
+                {...register("startTime", {
+                  required: "Start time is required",
+                })}
+              />
+              {errors.startTime && (
+                <p className="text-sm text-red-500">
+                  {errors.startTime.message}
+                </p>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="endTime">End Time</Label>
+              <Input
+                id="endTime"
+                type="time"
+                {...register("endTime", { required: "End time is required" })}
+              />
+              {errors.endTime && (
+                <p className="text-sm text-red-500">{errors.endTime.message}</p>
+              )}
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={handleClose}>
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              disabled={create.isPending}
+              className="bg-gradient-to-r from-purple-500 to-violet-600 text-white"
+            >
+              {create.isPending ? "Creating..." : "Create"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/WorkingHours/EditWorkingHoursModal.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/WorkingHours/EditWorkingHoursModal.tsx
new file mode 100644
index 000000000..e14b597fb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/WorkingHours/EditWorkingHoursModal.tsx
@@ -0,0 +1,190 @@
+import { useState, useEffect } from "react";
+import { useForm } from "react-hook-form";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/shared/common/ui/dialog";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import { Label } from "@/shared/common/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { useWorkingHoursMutations } from "@/performance-management/hooks/useWorkingHoursHook";
+import {
+  CreateWorkingHoursDto,
+  WeekDay,
+  WorkingHoursResponse,
+} from "../../types/workingHoursTypes";
+
+interface EditWorkingHoursModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  workingDay: WorkingHoursResponse | null;
+}
+
+const weekDays: WeekDay[] = [
+  "monday",
+  "tuesday",
+  "wednesday",
+  "thursday",
+  "friday",
+  "saturday",
+  "sunday",
+];
+
+export const EditWorkingHoursModal = ({
+  open,
+  onClose,
+  onSuccess,
+  workingDay,
+}: EditWorkingHoursModalProps) => {
+  const { update } = useWorkingHoursMutations();
+  const [selectedWeekDay, setSelectedWeekDay] = useState<WeekDay>("monday");
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    setValue,
+    formState: { errors },
+  } = useForm<CreateWorkingHoursDto>({
+    defaultValues: {
+      slug: "",
+      weekDay: "monday",
+      positionServiceId: "",
+      startTime: "09:00",
+      endTime: "17:00",
+    },
+  });
+
+  // Update form when workingDay changes
+  useEffect(() => {
+    if (workingDay) {
+      setValue("slug", workingDay.slug);
+      setValue("positionServiceId", workingDay.positionServiceId);
+      setValue("startTime", workingDay.startTime.substring(0, 5)); // Remove seconds
+      setValue("endTime", workingDay.endTime.substring(0, 5)); // Remove seconds
+      setSelectedWeekDay(workingDay.weekDay);
+    }
+  }, [workingDay, setValue]);
+
+  const onSubmit = async (data: CreateWorkingHoursDto) => {
+    if (!workingDay?.id) return;
+
+    const payload = {
+      ...data,
+      weekDay: selectedWeekDay,
+    };
+
+    update.mutate(
+      { id: workingDay.id, data: payload },
+      {
+        onSuccess: () => {
+          reset();
+          onClose();
+          onSuccess();
+        },
+      }
+    );
+  };
+
+  const handleClose = () => {
+    reset();
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>Edit Working Hours</DialogTitle>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="slug">Slug</Label>
+            <Input
+              id="slug"
+              {...register("slug", { required: "Slug is required" })}
+              placeholder="e.g., morning-shift"
+            />
+            {errors.slug && (
+              <p className="text-sm text-red-500">{errors.slug.message}</p>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="weekDay">Week Day</Label>
+            <Select
+              value={selectedWeekDay}
+              onValueChange={(value) => setSelectedWeekDay(value as WeekDay)}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select a day" />
+              </SelectTrigger>
+              <SelectContent>
+                {weekDays.map((day) => (
+                  <SelectItem key={day} value={day}>
+                    <span className="capitalize">{day}</span>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="startTime">Start Time</Label>
+              <Input
+                id="startTime"
+                type="time"
+                {...register("startTime", {
+                  required: "Start time is required",
+                })}
+              />
+              {errors.startTime && (
+                <p className="text-sm text-red-500">
+                  {errors.startTime.message}
+                </p>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="endTime">End Time</Label>
+              <Input
+                id="endTime"
+                type="time"
+                {...register("endTime", { required: "End time is required" })}
+              />
+              {errors.endTime && (
+                <p className="text-sm text-red-500">{errors.endTime.message}</p>
+              )}
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={handleClose}>
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              disabled={update.isPending}
+              className="bg-gradient-to-r from-purple-500 to-violet-600 text-white"
+            >
+              {update.isPending ? "Updating..." : "Update"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/WorkingHours/WorkingDaysTable.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/WorkingHours/WorkingDaysTable.tsx
new file mode 100644
index 000000000..0b5e9494a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/WorkingHours/WorkingDaysTable.tsx
@@ -0,0 +1,166 @@
+import { useEffect, useState } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/common/ui/table";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/shared/common/ui/alert-dialog";
+import { Button } from "@/shared/common/ui/button";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import { Edit, Trash2 } from "lucide-react";
+import { getWorkingHoursByPositionServiceId } from "@/performance-management/services/api/workingHoursService";
+import { WorkingHoursResponse } from "@/performance-management/types/workingHoursTypes";
+import { t } from "i18next";
+
+interface WorkingDaysTableProps {
+  positionServiceId: string;
+  onEdit?: (workingDay: WorkingHoursResponse) => void;
+  onDelete?: (id: string) => void;
+  refreshTrigger?: number;
+}
+
+export const WorkingDaysTable = ({
+  positionServiceId,
+  onEdit,
+  onDelete,
+  refreshTrigger,
+}: WorkingDaysTableProps) => {
+  const [workingDays, setWorkingDays] = useState<WorkingHoursResponse[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const fetchWorkingDays = async () => {
+    if (!positionServiceId) {
+      setWorkingDays([]);
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const response = await getWorkingHoursByPositionServiceId(
+        positionServiceId
+      );
+      const data = response.data;
+
+      if (data && Array.isArray(data.items)) {
+        setWorkingDays(data.items);
+      } else if (Array.isArray(data)) {
+        setWorkingDays(data);
+      } else {
+        setWorkingDays([]);
+      }
+    } catch (error) {
+      console.error("Failed to fetch working days", error);
+      setWorkingDays([]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchWorkingDays();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [positionServiceId, refreshTrigger]);
+
+  if (isLoading) {
+    return (
+      <div className="space-y-2 p-4">
+        <Skeleton className="h-8 w-full" />
+        <Skeleton className="h-8 w-full" />
+        <Skeleton className="h-8 w-full" />
+      </div>
+    );
+  }
+
+  if (workingDays.length === 0) {
+    return (
+      <div className="text-center py-8 text-gray-500">
+        {t("noWorkingDaysFound", "No working days configured for this service")}
+      </div>
+    );
+  }
+
+  return (
+    <div className="border rounded-md bg-white overflow-hidden">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>{t("weekDay", "Week Day")}</TableHead>
+            <TableHead>{t("slug", "Slug")}</TableHead>
+            <TableHead>{t("startTime", "Start Time")}</TableHead>
+            <TableHead>{t("endTime", "End Time")}</TableHead>
+            <TableHead className="text-right">
+              {t("actions", "Actions")}
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {workingDays.map((day) => (
+            <TableRow key={day.id}>
+              <TableCell className="font-medium capitalize">
+                {day.weekDay}
+              </TableCell>
+              <TableCell>{day.slug}</TableCell>
+              <TableCell>{day.startTime}</TableCell>
+              <TableCell>{day.endTime}</TableCell>
+              <TableCell className="text-right">
+                <div className="flex justify-end gap-2">
+                  {onEdit && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => onEdit(day)}
+                    >
+                      <Edit className="h-4 w-4" />
+                    </Button>
+                  )}
+                  {onDelete && (
+                    <AlertDialog>
+                      <AlertDialogTrigger asChild>
+                        <Button variant="ghost" size="sm">
+                          <Trash2 className="h-4 w-4 text-red-500" />
+                        </Button>
+                      </AlertDialogTrigger>
+                      <AlertDialogContent>
+                        <AlertDialogHeader>
+                          <AlertDialogTitle>
+                            Delete Working Hours
+                          </AlertDialogTitle>
+                          <AlertDialogDescription>
+                            Are you sure you want to delete this working hours
+                            configuration? This action cannot be undone.
+                          </AlertDialogDescription>
+                        </AlertDialogHeader>
+                        <AlertDialogFooter>
+                          <AlertDialogCancel>Cancel</AlertDialogCancel>
+                          <AlertDialogAction
+                            onClick={() => onDelete(day.id)}
+                            className="bg-red-600 hover:bg-red-700"
+                          >
+                            Delete
+                          </AlertDialogAction>
+                        </AlertDialogFooter>
+                      </AlertDialogContent>
+                    </AlertDialog>
+                  )}
+                </div>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/components/WorkingHours/WorkingHoursTable.tsx b/apps/edr-freight-web/backoffice/src/performance-management/components/WorkingHours/WorkingHoursTable.tsx
new file mode 100644
index 000000000..004778118
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/components/WorkingHours/WorkingHoursTable.tsx
@@ -0,0 +1,199 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { EditIcon, TrashIcon, PlusIcon } from "lucide-react";
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import { WorkingHoursResponse } from "../../types/workingHoursTypes";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import { ColumnDef } from "@tanstack/react-table";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+import { Button } from "@/shared/common/ui/button";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import {
+  useWorkingHoursList,
+  useWorkingHoursMutations,
+} from "@/performance-management/hooks/useWorkingHoursHook";
+import { CreateWorkingHoursModal } from "./CreateWorkingHoursModal";
+
+const WorkingHoursTable = () => {
+  const [pageIndex, setPageIndex] = useState(0);
+  const [selectedHours, setSelectedHours] =
+    useState<WorkingHoursResponse | null>(null);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+
+  const { data, isLoading, isError, refetch } = useWorkingHoursList();
+  const { delete: deleteMutation } = useWorkingHoursMutations();
+
+  const handleDelete = async () => {
+    if (!selectedHours) return;
+
+    deleteMutation.mutate(selectedHours.id, {
+      onSuccess: () => {
+        setIsDeleteDialogOpen(false);
+        setSelectedHours(null);
+        refetch();
+      },
+    });
+  };
+
+  const workingHours = data?.data?.items || data?.data || [];
+
+  const columns: ColumnDef<WorkingHoursResponse>[] = [
+    {
+      accessorKey: "slug",
+      header: "Slug",
+      size: 150,
+    },
+    {
+      accessorKey: "weekDay",
+      header: "Week Day",
+      cell: ({ row }) => (
+        <span className="capitalize">{row.original.weekDay}</span>
+      ),
+    },
+    {
+      accessorKey: "startTime",
+      header: "Start Time",
+    },
+    {
+      accessorKey: "endTime",
+      header: "End Time",
+    },
+    {
+      accessorKey: "positionServiceId",
+      header: "Position Service ID",
+      cell: ({ row }) => (
+        <div
+          className="max-w-[200px] truncate"
+          title={row.original.positionServiceId}
+        >
+          {row.original.positionServiceId}
+        </div>
+      ),
+    },
+    {
+      id: "actions",
+      header: "Actions",
+      cell: ({ row }) => (
+        <div className="flex gap-2">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => {
+                    setSelectedHours(row.original);
+                    setIsDeleteDialogOpen(true);
+                  }}
+                  disabled={deleteMutation.isPending}
+                >
+                  <TrashIcon className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Delete</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      ),
+    },
+  ];
+
+  const extraToolbar = (
+    <div className="flex gap-2">
+      <Button
+        onClick={() => setIsCreateModalOpen(true)}
+        className="bg-gradient-to-r from-purple-500 to-violet-600 text-white"
+      >
+        <PlusIcon className="h-4 w-4 mr-2" />
+        Create Working Hours
+      </Button>
+    </div>
+  );
+
+  if (isLoading)
+    return (
+      <div className="p-6 space-y-6">
+        <Skeleton className="h-8 w-64" />
+        <Skeleton className="h-12 w-full" />
+        <Skeleton className="h-12 w-full" />
+      </div>
+    );
+
+  if (isError)
+    return (
+      <div className="p-6 space-y-4">
+        <p className="text-destructive font-semibold">
+          Failed to load working hours
+        </p>
+        <Button onClick={() => refetch()}>Retry</Button>
+      </div>
+    );
+
+  return (
+    <div className="p-6">
+      <AdvancedTable<WorkingHoursResponse, unknown>
+        columns={columns}
+        data={workingHours}
+        tableName="Working Hours Management"
+        extraToolbar={extraToolbar}
+        toolBarPosition="right"
+        itemCount={workingHours.length}
+        pageIndex={pageIndex}
+        onPageChange={setPageIndex}
+        nextFunction={() => setPageIndex((p) => p + 1)}
+        prevFunction={() => setPageIndex((p) => Math.max(0, p - 1))}
+        refresh={refetch}
+      />
+
+      <CreateWorkingHoursModal
+        open={isCreateModalOpen}
+        onClose={() => setIsCreateModalOpen(false)}
+        onSuccess={refetch}
+      />
+
+      <AlertDialog
+        open={isDeleteDialogOpen}
+        onOpenChange={setIsDeleteDialogOpen}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Confirm Deletion</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete working hours for "
+              {selectedHours?.weekDay}"? This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+
+            <AlertDialogAction
+              className="bg-red-600 hover:bg-red-700"
+              disabled={deleteMutation.isPending}
+              onClick={handleDelete}
+            >
+              {deleteMutation.isPending ? "Deleting..." : "Delete"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+};
+
+export default WorkingHoursTable;
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/hooks/useCombinedEmployeePlan.tsx b/apps/edr-freight-web/backoffice/src/performance-management/hooks/useCombinedEmployeePlan.tsx
new file mode 100644
index 000000000..8a626e7a9
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/hooks/useCombinedEmployeePlan.tsx
@@ -0,0 +1,67 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  getEmployeePlanByPlanId,
+  getEmployeeSubPlanByPlanId,
+} from "../services/api/employeePlanService";
+interface CombinedEmployeePlanResponse {
+  items: any[];
+  total: number;
+}
+
+export const useCombinedEmployeePlanByPlanId = (planId: string | undefined) => {
+  // Main query that intelligently fetches data
+  const query = useQuery<CombinedEmployeePlanResponse>({
+    queryKey: ["combined-employee-plan", planId],
+    queryFn: async () => {
+      if (!planId) return { items: [], total: 0 };
+
+      try {
+        // First, try to get data from the sub endpoint (this has actual plan data)
+        const subResponse = await getEmployeeSubPlanByPlanId(planId);
+
+        if (subResponse.data?.items && subResponse.data.items.length > 0) {
+          return {
+            items: subResponse.data.items,
+            total: subResponse.data.total || subResponse.data.items.length,
+          };
+        }
+
+        // If sub endpoint returns empty, try the initial endpoint
+        const initialResponse = await getEmployeePlanByPlanId(planId);
+
+        if (initialResponse.data?.items) {
+          // Transform initial data to match the expected format
+          const transformedItems = initialResponse.data.items.map(
+            (item: any) => ({
+              ...item,
+              weeks: {}, // Initialize empty weeks object
+              no_of_employee_plans: "0", // No plans exist yet
+            })
+          );
+
+          return {
+            items: transformedItems,
+            total: transformedItems.length,
+          };
+        }
+
+        // Both endpoints returned empty
+        return { items: [], total: 0 };
+      } catch (error) {
+        console.error("Error fetching employee plans:", error);
+        // Return empty but don't throw - we'll show empty state in UI
+        return { items: [], total: 0 };
+      }
+    },
+    enabled: !!planId,
+    staleTime: 5 * 60 * 1000, // 5 minutes
+    gcTime: 10 * 60 * 1000, // 10 minutes
+  });
+
+  return {
+    data: query.data,
+    isLoading: query.isLoading,
+    error: query.error,
+    refetch: query.refetch,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/hooks/useEmployeePlan.tsx b/apps/edr-freight-web/backoffice/src/performance-management/hooks/useEmployeePlan.tsx
new file mode 100644
index 000000000..2f5497c12
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/hooks/useEmployeePlan.tsx
@@ -0,0 +1,182 @@
+// hooks/useEmployeePlanMutations.ts
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { toast } from "sonner";
+import { useAuth } from "@/shared/context/AuthContext";
+import {
+  createEmployeePlan,
+  getEmployeePlan,
+  getEmployeePlans,
+  updateEmployeePlan,
+  deleteEmployeePlan,
+  getPlansByUnit,
+  getPositionsByUnit,
+  fetchImmediateChild,
+  getServices,
+  getParentEmployeePlanDetail,
+  type CreateEmployeePlanDto,
+  getEmployeePlanByPlanId,
+  getEmployeeSubPlanByPlanId,
+  getMyEmployeePlan,
+  planParam,
+} from "../services/api/employeePlanService";
+
+// Query Keys
+export const EMPLOYEE_PLAN_KEYS = {
+  all: ["employee-plans"] as const,
+  list: (planId: string) => ["employee-plans", "list", planId] as const,
+  detail: (id: string) => ["employee-plans", id] as const,
+  plansByUnit: (unitId: string) => ["employee-plans", "plans", unitId] as const,
+  positionsByUnit: (unitId: string) =>
+    ["employee-plans", "positions", unitId] as const,
+  employeePositions: () => ["employee-plans", "employee-positions"] as const,
+  services: ["employee-plans", "services"] as const,
+  parentDetail: (id: string) => ["employee-plans", "parent", id] as const,
+  planId: (planId: string) => ["employee-plans", "plan", planId] as const,
+  subPlanId: (subPlanId: string) =>
+    ["sub-employee-plans", "plan", subPlanId] as const,
+};
+
+// GET SINGLE Employee Plan
+export function useEmployeePlan(id: string) {
+  return useQuery({
+    queryKey: EMPLOYEE_PLAN_KEYS.detail(id),
+    queryFn: () => getEmployeePlan(id),
+    enabled: !!id,
+  });
+}
+
+// GET Employee Plans LIST by planId
+export function useEmployeePlanList(planId: string) {
+  return useQuery({
+    queryKey: EMPLOYEE_PLAN_KEYS.list(planId),
+    queryFn: () => getEmployeePlans(planId),
+    enabled: !!planId,
+  });
+}
+
+// GET Plans by Unit
+export function usePlansByUnit(unitId: string) {
+  return useQuery({
+    queryKey: EMPLOYEE_PLAN_KEYS.plansByUnit(unitId),
+    queryFn: () => getPlansByUnit(unitId),
+    enabled: !!unitId,
+  });
+}
+
+// GET Positions by Unit
+export function usePositionsByUnit(unitId: string) {
+  return useQuery({
+    queryKey: EMPLOYEE_PLAN_KEYS.positionsByUnit(unitId),
+    queryFn: () => getPositionsByUnit(unitId),
+    enabled: !!unitId,
+  });
+}
+
+// GET Employee Positions by Position ID
+export function useEmployeePositions() {
+  const { selectedPositionId } = useAuth();
+  return useQuery({
+    queryKey: [...EMPLOYEE_PLAN_KEYS.employeePositions(), selectedPositionId],
+    queryFn: () => fetchImmediateChild(),
+    enabled: true,
+  });
+}
+
+// GET Services
+export function useServices() {
+  return useQuery({
+    queryKey: EMPLOYEE_PLAN_KEYS.services,
+    queryFn: () => getServices(),
+  });
+}
+
+// GET MY Employee Plans
+export function useMineEmployeePlan(params: planParam) {
+  const { selectedPositionId } = useAuth();
+  return useQuery({
+    queryKey: ["my-employee-plans", selectedPositionId, params],
+    queryFn: () => getMyEmployeePlan(params),
+  });
+}
+
+// GET Employee Plans by Plan ID
+export function useEmployeePlanByPlanId(planId: string) {
+  const { selectedPositionId } = useAuth();
+  return useQuery({
+    queryKey: [...EMPLOYEE_PLAN_KEYS.planId(planId), selectedPositionId],
+    queryFn: () => getEmployeePlanByPlanId(planId),
+    enabled: !!planId,
+  });
+}
+// GET Sub Employee Plans by Plan ID
+export function useSubEmployeePlanByPlanId(planId: string) {
+  const { selectedPositionId } = useAuth();
+  return useQuery({
+    queryKey: [...EMPLOYEE_PLAN_KEYS.subPlanId(planId), selectedPositionId],
+    queryFn: () => getEmployeeSubPlanByPlanId(planId),
+    enabled: !!planId,
+  });
+}
+// GET Parent Employee Plan Detail
+export function useParentEmployeePlanDetail(id: string) {
+  return useQuery({
+    queryKey: EMPLOYEE_PLAN_KEYS.parentDetail(id),
+    queryFn: () => getParentEmployeePlanDetail(id),
+    enabled: !!id,
+  });
+}
+
+// Extended DTO interface to include all fields from your form
+export interface ExtendedEmployeePlanDto extends CreateEmployeePlanDto {
+  id?: string;
+}
+
+// UNIFIED HOOK - Returns all Employee Plan operations in one object
+export function useEmployeePlanMutations() {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  const createMutation = useMutation({
+    mutationFn: (data: ExtendedEmployeePlanDto) => {
+      const { id, ...createData } = data;
+      return createEmployeePlan(createData);
+    },
+    onError: (exception) => {
+      handleError(exception);
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: (data: ExtendedEmployeePlanDto) => {
+      if (!data.id) {
+        throw new Error("Employee plan ID is required for update");
+      }
+      const { id, ...updateData } = data;
+      return updateEmployeePlan(id, updateData);
+    },
+    onError: (exception) => {
+      handleError(exception);
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => deleteEmployeePlan(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: EMPLOYEE_PLAN_KEYS.all });
+      toast.success("Employee plan deleted successfully");
+    },
+    onError: (exception) => {
+      queryClient.invalidateQueries({ queryKey: EMPLOYEE_PLAN_KEYS.all });
+      handleError(exception);
+    },
+  });
+
+  return {
+    create: createMutation,
+    update: updateMutation,
+    delete: deleteMutation,
+  };
+}
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/hooks/useMetabaseDashboard.ts b/apps/edr-freight-web/backoffice/src/performance-management/hooks/useMetabaseDashboard.ts
new file mode 100644
index 000000000..7444603e9
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/hooks/useMetabaseDashboard.ts
@@ -0,0 +1,177 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  metabaseService,
+  MetabaseDashboard,
+  GetIframeUrlRequest,
+} from "../services/api/metabaseService";
+
+export const useMetabaseDashboard = () => {
+  const { i18n } = useTranslation();
+  const [dashboards, setDashboards] = useState<MetabaseDashboard[]>([]);
+  const [selectedDashboard, setSelectedDashboard] =
+    useState<MetabaseDashboard | null>(null);
+  const [iframeUrl, setIframeUrl] = useState<string>("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const currentRequestRef = useRef<string | null>(null);
+
+  const fetchDashboards = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const response = await metabaseService.getPermittedDashboards(
+        i18n.language === "am" ? "am" : "en",
+      );
+      setDashboards(response.items);
+
+      // Auto-select the first dashboard if available
+      if (response.items.length > 0 && !selectedDashboard) {
+        setSelectedDashboard(response.items[0]);
+      }
+    } catch (err) {
+      // Handle different error types
+      const error = err as { response?: { status?: number } };
+      if (error?.response?.status === 403) {
+        setError("You don't have permission to access any dashboards");
+      } else if (error?.response?.status === 401) {
+        setError("Please log in to access dashboards");
+      } else {
+        setError("Failed to load dashboards");
+      }
+      console.error("Error fetching permitted dashboards:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, [selectedDashboard, i18n.language]);
+
+  const getIframeUrl = useCallback(
+    async (
+      dashboardId: string,
+      params: GetIframeUrlRequest = { params: {} },
+    ) => {
+      // Prevent multiple simultaneous requests for the same dashboard
+      if (currentRequestRef.current === dashboardId) {
+        return null;
+      }
+
+      try {
+        currentRequestRef.current = dashboardId;
+        setLoading(true);
+        setError(null);
+        const response = await metabaseService.getIframeUrl(
+          dashboardId,
+          params,
+        );
+
+        const secureUrl = response.iframeUrl.replace(/^http:\/\//i, "https://");
+        // Only update if this is still the current request
+        if (currentRequestRef.current === dashboardId) {
+          setIframeUrl(secureUrl);
+        }
+        return secureUrl;
+      } catch (err) {
+        if (currentRequestRef.current === dashboardId) {
+          // Handle permission errors specifically
+          const error = err as { response?: { status?: number } };
+          if (error?.response?.status === 403) {
+            setError("You don't have permission to access this dashboard");
+          } else {
+            setError("Failed to load dashboard");
+          }
+          console.error("Error getting iframe URL:", err);
+        }
+        return null;
+      } finally {
+        if (currentRequestRef.current === dashboardId) {
+          setLoading(false);
+          currentRequestRef.current = null;
+        }
+      }
+    },
+    [],
+  );
+
+  const getFilteredDashboardUrl = useCallback(
+    async (dashboardId: string, planYearId: string) => {
+      // Prevent multiple simultaneous requests for the same dashboard
+      const requestKey = `${dashboardId}-${planYearId}`;
+      if (currentRequestRef.current === requestKey) {
+        return null;
+      }
+
+      try {
+        currentRequestRef.current = requestKey;
+        setLoading(true);
+        setError(null);
+        const response = await metabaseService.getFilteredDashboardUrl(
+          dashboardId,
+          planYearId,
+        );
+
+        const secureUrl = response.iframeUrl.replace(/^http:\/\//i, "https://");
+        // Only update if this is still the current request
+        if (currentRequestRef.current === requestKey) {
+          setIframeUrl(secureUrl);
+        }
+        return secureUrl;
+      } catch (err) {
+        if (currentRequestRef.current === requestKey) {
+          // Handle permission errors specifically
+          const error = err as { response?: { status?: number } };
+          if (error?.response?.status === 403) {
+            setError("You don't have permission to access this dashboard");
+          } else {
+            setError("Failed to load filtered dashboard");
+          }
+          console.error("Error getting filtered dashboard URL:", err);
+        }
+        return null;
+      } finally {
+        if (currentRequestRef.current === requestKey) {
+          setLoading(false);
+          currentRequestRef.current = null;
+        }
+      }
+    },
+    [],
+  );
+
+  const selectDashboard = useCallback((dashboard: MetabaseDashboard) => {
+    setSelectedDashboard(dashboard);
+    setIframeUrl(""); // Clear previous iframe URL
+    // The useEffect will handle calling getIframeUrl
+  }, []);
+
+  const getDashboardByNumber = useCallback(
+    (dashboardNumber: number) => {
+      return dashboards.find(
+        (d) => d.metabaseDashboardNumber === dashboardNumber,
+      );
+    },
+    [dashboards],
+  );
+
+  useEffect(() => {
+    fetchDashboards();
+  }, [fetchDashboards]);
+
+  useEffect(() => {
+    if (selectedDashboard) {
+      getIframeUrl(selectedDashboard.id);
+    }
+  }, [selectedDashboard, getIframeUrl]);
+
+  return {
+    dashboards,
+    selectedDashboard,
+    iframeUrl,
+    loading,
+    error,
+    fetchDashboards,
+    getIframeUrl,
+    getFilteredDashboardUrl,
+    selectDashboard,
+    getDashboardByNumber,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/hooks/usePlanYear.ts b/apps/edr-freight-web/backoffice/src/performance-management/hooks/usePlanYear.ts
new file mode 100644
index 000000000..03f75cd8c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/hooks/usePlanYear.ts
@@ -0,0 +1,184 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { AxiosError, AxiosResponse } from "axios";
+import {
+  getPlanYears,
+  getPlanYear,
+  createPlanYear,
+  updatePlanYear,
+  deletePlanYear,
+  PlanYearParams,
+} from "../services/api/planYearService";
+import { CreatePlanYearDto, PlanYear } from "../types/planYearTypes";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+// Query keys
+const PLAN_YEAR_KEYS = {
+  all: ["planYears"] as const,
+  lists: () => [...PLAN_YEAR_KEYS.all, "list"] as const,
+  list: (unitId: string, params?: PlanYearParams) =>
+    [...PLAN_YEAR_KEYS.lists(), unitId, params] as const,
+  details: () => [...PLAN_YEAR_KEYS.all, "detail"] as const,
+  detail: (id: string) => [...PLAN_YEAR_KEYS.details(), id] as const,
+  active: (unitId: string) =>
+    [...PLAN_YEAR_KEYS.all, "active", unitId] as const,
+};
+
+// Fetch all plan years
+export const usePlanYears = (unitId: string, params?: PlanYearParams) => {
+  return useQuery({
+    queryKey: PLAN_YEAR_KEYS.list(unitId, params),
+    queryFn: () => getPlanYears(unitId, params),
+    enabled: !!unitId,
+    staleTime: 300_000,
+    refetchOnWindowFocus: false,
+  });
+};
+// Fetch plan year by ID or year number
+export const usePlanYearById = (id: string) => {
+  return useQuery({
+    queryKey: PLAN_YEAR_KEYS.list(id),
+    queryFn: () => getPlanYear(id),
+    enabled: !!id,
+    staleTime: 300_000,
+    refetchOnWindowFocus: false,
+  });
+};
+
+// Fetch plan year by year number (e.g., "2024")
+export const usePlanYearByNumber = (unitId: string, year: string) => {
+  return useQuery({
+    queryKey: [...PLAN_YEAR_KEYS.all, "byYear", unitId, year],
+    queryFn: async () => {
+      const response = await getPlanYears(unitId, { take: 100 });
+      const planYear = response.data?.items?.find(
+        (py: any) => py.year.toString() === year
+      );
+      if (!planYear) {
+        throw new Error(`Plan year ${year} not found`);
+      }
+      return { data: planYear };
+    },
+    enabled: !!unitId && !!year && /^\d{4}$/.test(year),
+    staleTime: 300_000,
+    refetchOnWindowFocus: false,
+  });
+};
+// Fetch single plan year
+export const usePlanYear = (id: string) => {
+  return useQuery({
+    queryKey: PLAN_YEAR_KEYS.detail(id),
+    queryFn: () => getPlanYear(id),
+    enabled: !!id,
+    staleTime: 300_000,
+    refetchOnWindowFocus: false,
+  });
+};
+
+// Hook to resolve year parameter (supports both year number and UUID)
+export const useResolvedPlanYear = (
+  yearParam: string,
+  unitId: string
+): {
+  data: any;
+  isLoading: boolean;
+  error: any;
+  yearId: string | null;
+} => {
+  const isYearNumber = /^\d{4}$/.test(yearParam);
+
+  const byNumber = usePlanYearByNumber(
+    unitId,
+    isYearNumber ? yearParam : ""
+  );
+  const byId = usePlanYearById(!isYearNumber ? yearParam : "");
+
+  if (isYearNumber) {
+    return {
+      data: byNumber.data,
+      isLoading: byNumber.isLoading,
+      error: byNumber.error,
+      yearId: byNumber.data?.data?.id || null,
+    };
+  }
+
+  return {
+    data: byId.data,
+    isLoading: byId.isLoading,
+    error: byId.error,
+    yearId: yearParam,
+  };
+};
+
+// Mutations
+export const usePlanYearMutations = () => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  const create = useMutation<
+    AxiosResponse,
+    AxiosError,
+    CreatePlanYearDto,
+    unknown
+  >({
+    mutationFn: createPlanYear,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: PLAN_YEAR_KEYS.all });
+      toast.success(
+        t("planYear.createdSuccessfully", "Plan year created successfully")
+      );
+    },
+    onError: (error: AxiosError) => {
+      handleError(error);
+    },
+  });
+
+  const update = useMutation<
+    AxiosResponse,
+    AxiosError,
+    CreatePlanYearDto,
+    unknown
+  >({
+    mutationFn: updatePlanYear,
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: PLAN_YEAR_KEYS.all });
+      if (variables.id) {
+        queryClient.invalidateQueries({
+          queryKey: PLAN_YEAR_KEYS.detail(variables.id),
+        });
+      }
+      toast.success(
+        t("planYear.updatedSuccessfully", "Plan year updated successfully")
+      );
+    },
+    onError: (error: AxiosError) => {
+      handleError(error);
+    },
+  });
+
+  const deleteMutation = useMutation<
+    AxiosResponse,
+    AxiosError,
+    string,
+    unknown
+  >({
+    mutationFn: deletePlanYear,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: PLAN_YEAR_KEYS.all });
+      toast.success(
+        t("planYear.deletedSuccessfully", "Plan year deleted successfully")
+      );
+    },
+    onError: (error: AxiosError) => {
+      handleError(error);
+    },
+  });
+
+  return {
+    create,
+    update,
+    delete: deleteMutation,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/hooks/usePlans.tsx b/apps/edr-freight-web/backoffice/src/performance-management/hooks/usePlans.tsx
new file mode 100644
index 000000000..4b0e2acce
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/hooks/usePlans.tsx
@@ -0,0 +1,201 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useAuth } from "@/shared/context/AuthContext";
+import {
+  approvePlan,
+  createPlan,
+  CreatePlanDto,
+  deletePlan,
+  getMinePlan,
+  getMySubPlans,
+  getPlan,
+  getPlanList,
+  getSectorList,
+  getSubPlans,
+  getTeamSubPlans,
+  PlanParams,
+  rejectPlan,
+  requestApproval,
+  updatePlan,
+} from "../services/api/planService";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+import { MeDto } from "@/shared/dto/user/meDto";
+import { SectorListParam } from "../types/planTypes";
+
+//  Query Keys
+const Plan_KEYS = {
+  all: ["plans"] as const,
+  list: (id: string, params?: PlanParams) =>
+    ["plans", "list", id, params] as const,
+  detail: (id: string) => ["plans", id] as const,
+};
+
+// Helper function to check if user is unit admin
+export const checkIsUnitAdmin = (user: MeDto | null): boolean => {
+  if (!user || !user.roles) return false;
+  return user.roles.some((role) => role.key === "unit_admin");
+};
+
+export const checkIsPlanInitiator = (
+  user: MeDto | null,
+  positionId?: string
+): boolean => {
+  if (!user || !user.employee) return false;
+
+  if (positionId) {
+    // Check specific position
+    return user.employee.some((emp) =>
+      emp.positions.some(
+        (pos) =>
+          pos.employeePositionId === positionId &&
+          pos.permissions.some((perm) => perm.key === "can:initiatePlan")
+      )
+    );
+  }
+
+  // Check all positions (fallback)
+  return user.employee.some((emp) =>
+    emp.positions.some((pos) =>
+      pos.permissions.some((perm) => perm.key === "can:initiatePlan")
+    )
+  );
+};
+
+//  GET SINGLE Plan
+export function usePlan(id: string) {
+  return useQuery({
+    queryKey: Plan_KEYS.detail(id),
+    queryFn: () => getPlan(id),
+    enabled: !!id,
+  });
+}
+export function useSectorList(id?: string) {
+  return useQuery({
+    queryKey: ["plans-sector", "sector", id],
+    queryFn: () => getSectorList(id),
+    enabled: !!id,
+  });
+}
+
+export function useMinePlan(params?: SectorListParam) {
+  const { selectedPositionId } = useAuth();
+  return useQuery({
+    // Include selectedPositionId in the key so switching positions yields a
+    // distinct cache entry and refetches with the up-to-date header.
+    queryKey: ["my-plans", selectedPositionId, params],
+    queryFn: () => getMinePlan(params),
+  });
+}
+//  GET Plan LIST with optional params filtering
+export function usePlanList(unitId: string, params?: PlanParams) {
+  return useQuery({
+    queryKey: Plan_KEYS.list(unitId, params),
+    queryFn: () => getPlanList(unitId, params),
+    enabled: !!unitId,
+  });
+}
+
+export function useSubPlans(id: string) {
+  return useQuery({
+    queryKey: ["plans", "sub-plans", id],
+    queryFn: () => getSubPlans(id),
+    enabled: !!id,
+  });
+}
+export function useMySubPlans(id: string) {
+  return useQuery({
+    queryKey: ["plans", "my-sub-plans", id],
+    queryFn: () => getMySubPlans(id),
+    enabled: !!id,
+  });
+}
+export function useTeamSubPlans(id: string) {
+  return useQuery({
+    queryKey: ["plans", "team-sub-plans", id],
+    queryFn: () => getTeamSubPlans(id),
+    enabled: !!id,
+  });
+}
+//UNIFIED HOOK - Returns all Plan operations in one object
+export function usePlanMutations() {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+  const createMutation = useMutation({
+    mutationFn: (data: CreatePlanDto) => createPlan(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: Plan_KEYS.all });
+      toast("Plan created successfully");
+    },
+    onError: (exception) => {
+      queryClient.invalidateQueries({ queryKey: Plan_KEYS.all });
+      handleError(exception);
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: (data: CreatePlanDto) => updatePlan(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: Plan_KEYS.all });
+    },
+    onError: (exception) => {
+      queryClient.invalidateQueries({ queryKey: Plan_KEYS.all });
+      handleError(exception);
+    },
+  });
+  const requestApprovalMutation = useMutation({
+    mutationFn: (id: string) => requestApproval(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: Plan_KEYS.all });
+      toast("Plan Approval Requested successfully");
+    },
+    onError: (exception) => {
+      queryClient.invalidateQueries({ queryKey: Plan_KEYS.all });
+      handleError(exception);
+    },
+  });
+  const approveMutation = useMutation({
+    mutationFn: (id: string) => approvePlan(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: Plan_KEYS.all });
+      toast("Plan Approved successfully");
+    },
+    onError: (exception) => {
+      queryClient.invalidateQueries({ queryKey: Plan_KEYS.all });
+      handleError(exception);
+    },
+  });
+  const rejectMutation = useMutation({
+    mutationFn: (id: string) => rejectPlan(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: Plan_KEYS.all });
+      toast("Plan Rejected successfully");
+    },
+    onError: (exception) => {
+      queryClient.invalidateQueries({ queryKey: Plan_KEYS.all });
+      handleError(exception);
+    },
+  });
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => deletePlan(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: Plan_KEYS.all });
+      toast("Plan deleted successfully");
+    },
+    onError: (exception) => {
+      queryClient.invalidateQueries({ queryKey: Plan_KEYS.all });
+      handleError(exception);
+    },
+  });
+
+  return {
+    create: createMutation,
+    update: updateMutation,
+    delete: deleteMutation,
+    requestApproval: requestApprovalMutation,
+    approve: approveMutation,
+    reject: rejectMutation,
+  };
+}
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/hooks/useServiceCategory.tsx b/apps/edr-freight-web/backoffice/src/performance-management/hooks/useServiceCategory.tsx
new file mode 100644
index 000000000..095db77d3
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/hooks/useServiceCategory.tsx
@@ -0,0 +1,77 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  serviceCategoryService,
+  CreateServiceCategoryRequest,
+} from "../services/api/serviceCategoryService";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+
+//  Query Keys
+const SERVICE_CATEGORY_KEYS = {
+  all: ["service-categories"] as const,
+  list: (organizationId: string) =>
+    ["service-categories", "list", organizationId] as const,
+};
+
+//  GET SERVICE CATEGORY LIST
+export function useServiceCategoryList(organizationId: string) {
+  return useQuery({
+    queryKey: SERVICE_CATEGORY_KEYS.list(organizationId),
+    queryFn: () => serviceCategoryService.getList(organizationId),
+    enabled: !!organizationId,
+  });
+}
+
+// 🎯 UNIFIED HOOK - Returns all service category operations in one object
+export function useServiceCategoryMutations() {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  const createMutation = useMutation({
+    mutationFn: (data: CreateServiceCategoryRequest) =>
+      serviceCategoryService.create(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: SERVICE_CATEGORY_KEYS.all });
+      toast("Service Category created successfully");
+    },
+    onError: (exception) => {
+      handleError(exception);
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: ({
+      id,
+      data,
+    }: {
+      id: string;
+      data: CreateServiceCategoryRequest;
+    }) => serviceCategoryService.update(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: SERVICE_CATEGORY_KEYS.all });
+      toast("Service Category updated successfully");
+    },
+    onError: (exception) => {
+      handleError(exception);
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => serviceCategoryService.delete(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: SERVICE_CATEGORY_KEYS.all });
+      toast("Service Category deleted successfully");
+    },
+    onError: (exception) => {
+      handleError(exception);
+    },
+  });
+
+  return {
+    create: createMutation,
+    update: updateMutation,
+    delete: deleteMutation,
+  };
+}
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/hooks/useServiceHook.tsx b/apps/edr-freight-web/backoffice/src/performance-management/hooks/useServiceHook.tsx
new file mode 100644
index 000000000..ac92cf874
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/hooks/useServiceHook.tsx
@@ -0,0 +1,109 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  createService,
+  updateService,
+  deleteService,
+  getService,
+  getServiceList,
+  CreateServiceDto,
+} from "../services/api/performanceService";
+import { useAuth } from "@/shared/context/AuthContext";
+import { useUnit } from "@/user-management/hooks/useUnit";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { useNavigate, useParams } from "react-router-dom";
+
+//  Query Keys
+const SERVICE_KEYS = {
+  all: ["services"] as const,
+  list: (id: string) => ["services", "list", id] as const,
+  detail: (id: string) => ["services", id] as const,
+};
+
+//  GET SINGLE SERVICE
+export function useService(id: string) {
+  return useQuery({
+    queryKey: SERVICE_KEYS.detail(id),
+    queryFn: () => getService(id),
+    enabled: !!id,
+  });
+}
+
+//  GET SERVICE LIST
+export function useServiceList(
+  organizationId: string,
+  serviceCategoryId?: string,
+  parentServiceId?: string
+) {
+  // react-query
+  const queryKey = [
+    ...SERVICE_KEYS.list(organizationId as string),
+    ...(serviceCategoryId ? [serviceCategoryId] : []),
+    ...(parentServiceId ? [parentServiceId] : []),
+  ];
+
+  return useQuery({
+    queryKey,
+    queryFn: () =>
+      getServiceList(
+        organizationId as string,
+        serviceCategoryId,
+        parentServiceId
+      ),
+    enabled: !!organizationId, // only fetch when organizationId exists
+  });
+}
+
+// 🎯 UNIFIED HOOK - Returns all service operations in one object
+export function useServiceMutations() {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+  const navigate = useNavigate();
+
+  const createMutation = useMutation({
+    mutationFn: (data: CreateServiceDto) => createService(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: SERVICE_KEYS.all });
+      toast("Service created successfully");
+      navigate(`/performance-management/services`);
+    },
+    onError: (exception) => {
+      queryClient.invalidateQueries({ queryKey: SERVICE_KEYS.all });
+      handleError(exception);
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: (data: CreateServiceDto) => updateService(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: SERVICE_KEYS.all });
+      toast("Service updated successfully");
+      navigate(`/performance-management/services`);
+    },
+    onError: (exception) => {
+      queryClient.invalidateQueries({ queryKey: SERVICE_KEYS.all });
+      handleError(exception);
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => deleteService(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: SERVICE_KEYS.all });
+      toast("Service deleted successfully");
+      navigate(`/performance-management/services`);
+    },
+    onError: (exception) => {
+      queryClient.invalidateQueries({ queryKey: SERVICE_KEYS.all });
+      handleError(exception);
+    },
+  });
+
+  return {
+    create: createMutation,
+    update: updateMutation,
+    delete: deleteMutation,
+  };
+}
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/hooks/useTeamMemeberHook.tsx b/apps/edr-freight-web/backoffice/src/performance-management/hooks/useTeamMemeberHook.tsx
new file mode 100644
index 000000000..ee537fe87
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/hooks/useTeamMemeberHook.tsx
@@ -0,0 +1,152 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  createPlanBulkTeamMember,
+  CreatePlanBulkTeamMemberDto,
+  createPlanTeam,
+  CreatePlanTeamDto,
+  createPlanTeamMember,
+  CreatePlanTeamMemberDto,
+  deletePlanTeam,
+  deletePlanTeamMember,
+  getPlanTeamList,
+  getPlanTeamMemberList,
+  updatePlanTeam,
+  updatePlanTeamMember,
+} from "../services/api/planTeamServices";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { getEnvUrl } from "@/shared/config/env";
+import { id } from "date-fns/locale";
+
+// Fetch teams
+export const usePlanTeamList = (id: string, options?: { enabled?: boolean }) =>
+  useQuery({
+    queryKey: ["plan-team-list", id],
+    queryFn: () => getPlanTeamList(id),
+    enabled: options?.enabled !== false && !!id, // Only fetch when enabled and id exists
+  });
+
+export const usePlanTeamMemberList = (
+  id: string,
+  options?: { enabled?: boolean },
+) =>
+  useQuery({
+    queryKey: ["plan-team-member-list", id],
+    queryFn: () => getPlanTeamMemberList(id),
+    enabled: options?.enabled !== false && !!id, // Only fetch when enabled and id exists
+  });
+
+export const usePlanTeamMutation = () => {
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+  const queryClient = useQueryClient();
+  const createPlanTeamMutation = useMutation({
+    mutationFn: ({ data }: { data: CreatePlanTeamDto }) => createPlanTeam(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["plan-team-list"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const updatePlanTeamMutation = useMutation({
+    mutationFn: ({ id, data }: { id: string; data: CreatePlanTeamDto }) =>
+      updatePlanTeam(id, data),
+    onSuccess: () => {},
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const deletePlanTeamMutation = useMutation({
+    mutationFn: ({ id }: { id: string }) => deletePlanTeam(id),
+    onSuccess: () => {
+      toast.success("Plan team deleted successfully");
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const createPlanTeamMemberMutation = useMutation({
+    mutationFn: ({ data }: { data: CreatePlanTeamMemberDto }) =>
+      createPlanTeamMember(data),
+    onSuccess: () => {
+      toast.success("Plan team member created successfully");
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+  const createPlanBulkTeamMemberMutation = useMutation({
+    mutationFn: ({ data }: { data: CreatePlanBulkTeamMemberDto }) =>
+      createPlanBulkTeamMember(data),
+    onSuccess: () => {
+      toast.success("Plan team member created successfully");
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+  const updatePlanTeamMemberMutation = useMutation({
+    mutationFn: ({ id, data }: { id: string; data: CreatePlanTeamMemberDto }) =>
+      updatePlanTeamMember(id, data),
+    onSuccess: () => {
+      toast.success("Plan team member updated successfully");
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const deletePlanTeamMemberMutation = useMutation({
+    mutationFn: deletePlanTeamMember,
+    onSuccess: () => {
+      toast.success("Plan team member deleted successfully");
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+  return {
+    createPlanTeam: createPlanTeamMutation.mutate,
+    isLoading: createPlanTeamMutation.isPending,
+    isError: createPlanTeamMutation.isError,
+    error: createPlanTeamMutation.error,
+    updatePlanTeam: updatePlanTeamMutation.mutate,
+    deletePlanTeam: deletePlanTeamMutation.mutate,
+    createPlanTeamMember: createPlanTeamMemberMutation.mutate,
+    updatePlanTeamMember: updatePlanTeamMemberMutation.mutate,
+    deletePlanTeamMember: deletePlanTeamMemberMutation.mutate,
+    isPlanTeamLoading: updatePlanTeamMutation.isPending,
+    isPlanTeamError: updatePlanTeamMutation.isError,
+    planTeamError: updatePlanTeamMutation.error,
+    isPlanTeamMemberLoading: deletePlanTeamMutation.isPending,
+    isPlanTeamMemberError: deletePlanTeamMutation.isError,
+    planTeamMemberError: deletePlanTeamMutation.error,
+    isPlanTeamMemberCreateLoading: createPlanTeamMemberMutation.isPending,
+    isPlanTeamMemberCreateError: createPlanTeamMemberMutation.isError,
+    planTeamMemberCreateError: createPlanTeamMemberMutation.error,
+    isPlanTeamMemberUpdateLoading: updatePlanTeamMemberMutation.isPending,
+    isPlanTeamMemberUpdateError: updatePlanTeamMemberMutation.isError,
+    planTeamMemberUpdateError: updatePlanTeamMemberMutation.error,
+    isPlanTeamMemberDeleteLoading: deletePlanTeamMemberMutation.isPending,
+    isPlanTeamMemberDeleteError: deletePlanTeamMemberMutation.isError,
+    planTeamMemberDeleteError: deletePlanTeamMemberMutation.error,
+    createPlanBulkTeamMember: createPlanBulkTeamMemberMutation.mutate,
+    isPlanBulkTeamMemberCreateLoading:
+      createPlanBulkTeamMemberMutation.isPending,
+  };
+};
+// Fetch users for team member selection
+export const useUsers = () =>
+  useQuery({
+    queryKey: ["users"],
+    queryFn: async () => {
+      const apiBaseUrl = getEnvUrl("VITE_API_URL");
+      const response = await fetch(`${apiBaseUrl}/users/active`);
+      return response.json();
+    },
+  });
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/hooks/useWorkingHoursHook.ts b/apps/edr-freight-web/backoffice/src/performance-management/hooks/useWorkingHoursHook.ts
new file mode 100644
index 000000000..4dd6ecd22
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/hooks/useWorkingHoursHook.ts
@@ -0,0 +1,75 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import {
+  createWorkingHours,
+  getWorkingHoursList,
+  getWorkingHoursByPositionServiceId,
+  updateWorkingHours,
+  deleteWorkingHours,
+} from "../services/api/workingHoursService";
+import { CreateWorkingHoursDto } from "../types/workingHoursTypes";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+export const useWorkingHoursList = () => {
+  return useQuery({
+    queryKey: ["workingHours"],
+    queryFn: getWorkingHoursList,
+  });
+};
+
+export const useWorkingHoursByPositionService = (positionServiceId: string) => {
+  return useQuery({
+    queryKey: ["workingHours", positionServiceId],
+    queryFn: () => getWorkingHoursByPositionServiceId(positionServiceId),
+    enabled: !!positionServiceId,
+  });
+};
+
+export const useWorkingHoursMutations = () => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  const create = useMutation({
+    mutationFn: (data: CreateWorkingHoursDto) => createWorkingHours(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["workingHours"] });
+      toast.success(
+        t("workingHours.createdSuccessfully", "Working hours created successfully")
+      );
+    },
+    onError: (error: any) => {
+      handleError(error);
+    },
+  });
+
+  const update = useMutation({
+    mutationFn: ({ id, data }: { id: string; data: CreateWorkingHoursDto }) =>
+      updateWorkingHours(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["workingHours"] });
+      toast.success(
+        t("workingHours.updatedSuccessfully", "Working hours updated successfully")
+      );
+    },
+    onError: (error: any) => {
+      handleError(error);
+    },
+  });
+
+  const deleteHours = useMutation({
+    mutationFn: (id: string) => deleteWorkingHours(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["workingHours"] });
+      toast.success(
+        t("workingHours.deletedSuccessfully", "Working hours deleted successfully")
+      );
+    },
+    onError: (error: any) => {
+      handleError(error);
+    },
+  });
+
+  return { create, update, delete: deleteHours };
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/layout/performanceMenuLayout.tsx b/apps/edr-freight-web/backoffice/src/performance-management/layout/performanceMenuLayout.tsx
new file mode 100644
index 000000000..37d6f2d1a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/layout/performanceMenuLayout.tsx
@@ -0,0 +1,333 @@
+import { NavLink, useParams } from "react-router-dom";
+import { useAuth } from "@/shared/context/AuthContext";
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+
+import { ScrollArea } from "@/shared/common/ui/scroll-area";
+
+// Icons
+import {
+  ChevronDown,
+  ChevronRight,
+  Home,
+  TableProperties,
+  Calendar,
+} from "lucide-react";
+import { MenuItem as BaseMenuItem } from "@/layout/AppMenuTabs";
+import { FaTasks } from "react-icons/fa";
+import { getSelectedPositionType } from "@/performance-management/utils/positionTypeUtils";
+import { EPositionTypeKey } from "@/shared/dto/user/meDto";
+import { checkIsPlanInitiator } from "@/performance-management/hooks/usePlans";
+
+// Extended MenuItem interface with position type support
+interface MenuItem extends BaseMenuItem {
+  positionTypes?: EPositionTypeKey[];
+}
+
+interface PerformanceMenuTablsProps {
+  collapsed?: boolean;
+  toggleSidebar?: () => void;
+}
+
+export const PerformanceMenuTabls = ({
+  collapsed = false,
+}: PerformanceMenuTablsProps) => {
+  const { user, selectedPositionId } = useAuth();
+  const userRoles = user?.roles.map((role) => role.key) || [];
+  const userPositionType = getSelectedPositionType(user, selectedPositionId);
+  const isPlanInitiator = checkIsPlanInitiator(
+    user,
+    selectedPositionId || undefined,
+  );
+
+  // Debug: log user roles and position type
+  console.log("User roles:", userRoles);
+  console.log("User position type:", userPositionType);
+  console.log("Has empty role:", userRoles.includes(""));
+
+  const { t } = useTranslation();
+  const [openDropdown, setOpenDropdown] = useState<string | null>(null);
+
+  const toggleDropdown = (label: string) => {
+    setOpenDropdown((prev) => (prev === label ? null : label));
+  };
+  const { yearId } = useParams<{ yearId: string }>();
+
+  // Year-independent menu items (always visible)
+  const yearIndependentItems: MenuItem[] = [
+    {
+      label: "Plan Years",
+      href: "/performance-management/plan-years",
+      icon: <Calendar className="h-4 w-4" />,
+      roles: ["super_admin", "unit_admin", ""],
+      isPrimary: true,
+    },
+
+    {
+      label: "Service Categories",
+      href: "/performance-management/service-categories",
+      icon: <TableProperties className="h-4 w-4" />,
+      roles: ["super_admin", "unit_admin", "user"],
+      isPrimary: true,
+    },
+    {
+      label: "Services",
+      href: `/performance-management/services`,
+      icon: <TableProperties className="h-4 w-4" />,
+      roles: ["super_admin", "unit_admin", "user"],
+      isPrimary: true,
+    },
+    {
+      label: "Service Assignment",
+      href: `/performance-management/service-assignment`,
+      icon: <TableProperties className="h-4 w-4" />,
+      roles: ["super_admin", "unit_admin", "user"],
+      isPrimary: true,
+    },
+    {
+      label: "Active Call Management",
+      href: `/performance-management/active-call-management`,
+      icon: <TableProperties className="h-4 w-4" />,
+      roles: [""],
+      positionTypes: [EPositionTypeKey.EMPLOYEE],
+      isPrimary: true,
+    },
+  ];
+
+  // Year-dependent menu items (only visible when yearId exists)
+  const yearDependentItems: MenuItem[] = [
+    {
+      label: "dashboard",
+      href: `/performance-management/${yearId}/dashboard`,
+      icon: <Home className="h-4 w-4" />,
+      roles: ["super_admin", "unit_admin", ""],
+      isPrimary: true,
+    },
+    {
+      label: "Plans",
+      href: `/performance-management/${yearId}/${
+        isPlanInitiator ? "plans" : "my-plans"
+      }`,
+      icon: <TableProperties className="h-4 w-4" />,
+      roles: [""],
+      positionTypes: [
+        EPositionTypeKey.DIRECTOR,
+        EPositionTypeKey.DEPUTY,
+        EPositionTypeKey.OFFICE_HEAD,
+        EPositionTypeKey.BUDGET_PLAN,
+      ],
+      isPrimary: true,
+    },
+    {
+      label: "Employee Plans",
+      href: `/performance-management/${yearId}/employee-plans`,
+      icon: <FaTasks className="h-4 w-4" />,
+      roles: ["super_admin", "unit_admin", ""],
+      // Employee Plans is relevant for anyone who can be assigned monthly
+      // tasks, which is effectively every employee position. Leaving the
+      // positionTypes filter off avoids hiding the link when the backend
+      // returns a positionType.key that doesn't match the enum (e.g. an
+      // unexpected key would otherwise hide the item entirely).
+      isPrimary: true,
+    },
+    {
+      label: "Team Member Management",
+      href: `/performance-management/${yearId}/team-member-management`,
+      icon: <FaTasks className="h-4 w-4" />,
+      roles: ["super_admin", "unit_admin", ""],
+      isPrimary: true,
+    },
+  ];
+
+  // Filter items based on user roles and position types
+  const filterByRoles = (items: MenuItem[]) => {
+    return items.filter((item) => {
+      // Check role requirements
+      let hasRole = true;
+      if (item.roles && item.roles.length > 0) {
+        hasRole = item.roles.some((role) => userRoles.includes(role));
+
+        // Special case: If item allows "" (empty string role), it should ALSO match users with NO roles ([])
+        if (item.roles.includes("") && userRoles.length === 0) {
+          hasRole = true;
+        }
+      }
+
+      // Check position type requirements
+      let hasPositionType = true;
+      if (item.positionTypes && item.positionTypes.length > 0) {
+        hasPositionType = userPositionType
+          ? item.positionTypes.includes(userPositionType)
+          : false;
+      }
+
+      // User must satisfy both role AND position type requirements (if they exist)
+      return hasRole && hasPositionType;
+    });
+  };
+
+  // Combine and filter menu items based on whether yearId exists and user roles
+  const filteredMenu = yearId
+    ? filterByRoles([...yearIndependentItems, ...yearDependentItems])
+    : filterByRoles(yearIndependentItems);
+
+  const primaryMenu = filteredMenu.filter((i) => i.isPrimary);
+  const secondaryMenu = filteredMenu.filter((i) => !i.isPrimary);
+  const renderChildren = (children: MenuItem[]) => {
+    return (
+      <div className="ml-8 mt-1 space-y-1">
+        {children.map((child) => (
+          <NavLink
+            key={child.href}
+            to={child.href!}
+            className={({ isActive }) =>
+              `block px-3 py-2 text-sm rounded-md transition-colors ${
+                isActive
+                  ? "bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300"
+                  : "text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800"
+              }`
+            }
+          >
+            {t(`organization.${child.label}`)}
+          </NavLink>
+        ))}
+      </div>
+    );
+  };
+
+  // ---- MAIN RETURN ----
+  return (
+    <>
+      {/* --------------------- MOBILE TABS --------------------- */}
+      <div className="md:hidden fixed top-16 left-0 right-0 z-30 bg-white dark:bg-gray-900 border-b dark:border-gray-800 pt-5 pb-3 px-4 space-y-3">
+        {/* Primary row */}
+        <div className="flex items-center overflow-x-auto scrollbar-none">
+          {primaryMenu.map((item) => (
+            <NavLink
+              key={item.href}
+              to={item.href!}
+              className={({ isActive }) => {
+                // Custom active check: for Plans, match /plans, /plans-table, /my-plans, or /plan/{id}
+                let isItemActive = isActive;
+                if (item.label === "Plans") {
+                  const currentPath = window.location.pathname;
+                  isItemActive =
+                    currentPath.includes("/my-plans") ||
+                    currentPath.includes("/plan/") ||
+                    currentPath.includes("/plans");
+                }
+
+                return `flex items-center gap-1 px-3 py-2.5 mr-2 text-xs font-medium ${
+                  isItemActive
+                    ? "text-[#A043F0] border-b-2 border-[#A043F0]"
+                    : "text-slate-700 hover:text-[#A043F0]"
+                }`;
+              }}
+            >
+              {item.icon}
+              <span className="max-w-[80px] truncate">
+                {t(`organization.${item.label}`)}
+              </span>
+            </NavLink>
+          ))}
+        </div>
+
+        {/* Secondary row */}
+        {secondaryMenu.length > 0 && (
+          <div className="flex items-center overflow-x-auto border-t pt-3">
+            {secondaryMenu.map((item) => (
+              <NavLink
+                key={item.label}
+                to={item.href || "#"}
+                className="flex items-center gap-1 px-3 py-2.5 mr-2 text-xs font-medium text-slate-700 hover:text-[#A043F0]"
+              >
+                {item.icon}
+                <span className="max-w-[80px] truncate">
+                  {t(`organization.${item.label}`)}
+                </span>
+              </NavLink>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* --------------------- DESKTOP SIDEBAR --------------------- */}
+      <div className="hidden md:flex flex-col h-full">
+        <ScrollArea className="flex-1">
+          <div className="mt-4 space-y-1">
+            {filteredMenu.map((item) => {
+              // ---------- PARENT WITH CHILDREN ----------
+              if (item.children && item.children.length > 0) {
+                const isOpen = openDropdown === item.label;
+
+                return (
+                  <div key={item.label} className="mx-2">
+                    {/* Parent row */}
+                    <button
+                      onClick={() => toggleDropdown(item.label)}
+                      className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors text-left ${
+                        isOpen
+                          ? "bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300"
+                          : "text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800"
+                      } ${collapsed ? "justify-center" : ""}`}
+                    >
+                      {item.icon}
+                      {!collapsed && (
+                        <>
+                          <span className="font-medium whitespace-nowrap">
+                            {t(`organization.${item.label}`)}
+                          </span>
+                          <div className="ml-auto">
+                            {isOpen ? (
+                              <ChevronDown className="h-4 w-4" />
+                            ) : (
+                              <ChevronRight className="h-4 w-4" />
+                            )}
+                          </div>
+                        </>
+                      )}
+                    </button>
+
+                    {/* Children */}
+                    {!collapsed && isOpen && renderChildren(item.children)}
+                  </div>
+                );
+              }
+
+              // ---------- REGULAR ITEM ----------
+              return (
+                <NavLink
+                  key={item.href}
+                  to={item.href!}
+                  className={({ isActive }) => {
+                    // Custom active check: for Plans, check if path contains /my-plans or /plan/
+                    let isItemActive = isActive;
+                    if (item.label === "Plans") {
+                      const currentPath = window.location.pathname;
+                      isItemActive =
+                        currentPath.includes("/my-plans") ||
+                        currentPath.includes("/plan/");
+                    }
+
+                    return `flex items-center gap-3 px-3 py-2.5 mx-2 rounded-lg transition-colors ${
+                      isItemActive
+                        ? "bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300"
+                        : "text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800"
+                    } ${collapsed ? "justify-center" : ""}`;
+                  }}
+                >
+                  {item.icon}
+                  {!collapsed && (
+                    <span className="font-medium whitespace-nowrap">
+                      {t(`organization.${item.label}`)}
+                    </span>
+                  )}
+                </NavLink>
+              );
+            })}
+          </div>
+        </ScrollArea>
+      </div>
+    </>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/layout/planLayout.tsx b/apps/edr-freight-web/backoffice/src/performance-management/layout/planLayout.tsx
new file mode 100644
index 000000000..66fc7289f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/layout/planLayout.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import PlanHierarchy from "@/performance-management/components/PlanHierarchy/PlanHierarchy";
+
+const PlanLayout: React.FC = () => {
+  const { t } = useTranslation();
+  return (
+    <div className="p-6 bg-gray-50 dark:bg-gray-900 min-h-screen">
+      <h1 className="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">
+        {t("planTable.planManagement", "Plan Management")}
+      </h1>
+      <PlanHierarchy />
+    </div>
+  );
+};
+
+export default PlanLayout;
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/pages/ServiceCategoryPage.tsx b/apps/edr-freight-web/backoffice/src/performance-management/pages/ServiceCategoryPage.tsx
new file mode 100644
index 000000000..2634aa627
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/pages/ServiceCategoryPage.tsx
@@ -0,0 +1,389 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { EditIcon, TrashIcon, PlusIcon } from "lucide-react";
+import { Button } from "@/shared/common/ui/button";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { useAuth } from "@/shared/context/AuthContext";
+import {
+  useServiceCategoryList,
+  useServiceCategoryMutations,
+} from "@/performance-management/hooks/useServiceCategory";
+import { ServiceCategory } from "@/performance-management/services/api/serviceCategoryService";
+import { ServiceCategoryForm } from "@/performance-management/components/ServiceCategory/ServiceCategoryForm";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import { ColumnDef } from "@tanstack/react-table";
+import { useToast } from "@/shared/common/ui/use-toast";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+
+export const ServiceCategoryPage = () => {
+  const { t } = useTranslation();
+  const localizedName = useLocalizedName();
+  const { user } = useAuth();
+  const { toast } = useToast();
+  const { delete: deleteCategory } = useServiceCategoryMutations();
+
+  const [pageIndex, setPageIndex] = useState(0);
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+  const [editingCategory, setEditingCategory] =
+    useState<ServiceCategory | null>(null);
+  const [selectedCategory, setSelectedCategory] =
+    useState<ServiceCategory | null>(null);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+
+  const organizationId = user?.employee?.[0]?.organizationId;
+
+  const {
+    data: serviceCategoryList,
+    isLoading,
+    isError,
+    refetch,
+  } = useServiceCategoryList(organizationId ?? "");
+
+  const categories = (serviceCategoryList?.data?.items || []).sort(
+    (a: ServiceCategory, b: ServiceCategory) => {
+      const dateA = new Date(a.createdAt).getTime();
+      const dateB = new Date(b.createdAt).getTime();
+      return dateB - dateA; // Descending order (newest first)
+    }
+  );
+
+  const handleEdit = (category: ServiceCategory) => {
+    setEditingCategory(category);
+  };
+
+  const handleDelete = async () => {
+    if (!selectedCategory) return;
+
+    try {
+      await deleteCategory.mutateAsync(selectedCategory.id);
+      toast({
+        title: t("serviceCategory.deleteSuccess", "Deleted"),
+        description: t(
+          "serviceCategory.deleteSuccessMessage",
+          "Service category deleted successfully"
+        ),
+      });
+      setIsDeleteDialogOpen(false);
+      setSelectedCategory(null);
+      refetch();
+    } catch {
+      toast({
+        title: t("common.error", "Error"),
+        description: t(
+          "serviceCategory.deleteError",
+          "Failed to delete service category"
+        ),
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleFormSuccess = () => {
+    setIsCreateDialogOpen(false);
+    setEditingCategory(null);
+    refetch();
+  };
+
+  const handleFormCancel = () => {
+    setIsCreateDialogOpen(false);
+    setEditingCategory(null);
+  };
+
+  const columns: ColumnDef<ServiceCategory>[] = [
+    {
+      accessorKey: "slug",
+      header: ({ column }) => {
+        return (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+            className="h-auto p-0 font-semibold"
+          >
+            {t("serviceCategory.slug", "Slug")}
+            {column.getIsSorted() === "asc"
+              ? " ↑"
+              : column.getIsSorted() === "desc"
+              ? " ↓"
+              : ""}
+          </Button>
+        );
+      },
+      cell: ({ row }) => <div>{row.original.slug}</div>,
+      size: 150,
+      enableSorting: true,
+    },
+    {
+      accessorKey: "name",
+      header: ({ column }) => {
+        return (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+            className="h-auto p-0 font-semibold"
+          >
+            {t("serviceCategory.name", "Name")}
+            {column.getIsSorted() === "asc"
+              ? " ↑"
+              : column.getIsSorted() === "desc"
+              ? " ↓"
+              : ""}
+          </Button>
+        );
+      },
+      cell: ({ row }) => <div>{localizedName(row.original.name)}</div>,
+      size: 200,
+      enableSorting: true,
+      sortingFn: (rowA, rowB) => {
+        const nameA = localizedName(rowA.original.name).toLowerCase();
+        const nameB = localizedName(rowB.original.name).toLowerCase();
+        return nameA.localeCompare(nameB);
+      },
+    },
+    {
+      accessorKey: "description",
+      header: ({ column }) => {
+        return (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+            className="h-auto p-0 font-semibold"
+          >
+            {t("serviceCategory.description", "Description")}
+            {column.getIsSorted() === "asc"
+              ? " ↑"
+              : column.getIsSorted() === "desc"
+              ? " ↓"
+              : ""}
+          </Button>
+        );
+      },
+      cell: ({ row }) => (
+        <div
+          className="max-w-[300px] truncate"
+          title={localizedName(row.original.description)}
+        >
+          {localizedName(row.original.description)}
+        </div>
+      ),
+      enableSorting: true,
+      sortingFn: (rowA, rowB) => {
+        const descA = localizedName(rowA.original.description).toLowerCase();
+        const descB = localizedName(rowB.original.description).toLowerCase();
+        return descA.localeCompare(descB);
+      },
+    },
+    {
+      accessorKey: "createdAt",
+      header: ({ column }) => {
+        return (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+            className="h-auto p-0 font-semibold"
+          >
+            {t("serviceCategory.createdAt", "Created At")}
+            {column.getIsSorted() === "asc"
+              ? " ↑"
+              : column.getIsSorted() === "desc"
+              ? " ↓"
+              : " ↓"}
+          </Button>
+        );
+      },
+      cell: ({ row }) => new Date(row.original.createdAt).toLocaleDateString(),
+      size: 150,
+      enableSorting: true,
+      sortingFn: (rowA, rowB) => {
+        const dateA = new Date(rowA.original.createdAt).getTime();
+        const dateB = new Date(rowB.original.createdAt).getTime();
+        return dateA - dateB;
+      },
+    },
+    {
+      id: "actions",
+      header: t("common.actions", "Actions"),
+      cell: ({ row }) => (
+        <div className="flex gap-2">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => handleEdit(row.original)}
+                >
+                  <EditIcon className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>{t("common.edit", "Edit")}</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => {
+                    setSelectedCategory(row.original);
+                    setIsDeleteDialogOpen(true);
+                  }}
+                  disabled={deleteCategory.isPending}
+                >
+                  <TrashIcon className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>{t("common.delete", "Delete")}</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      ),
+      size: 100,
+    },
+  ];
+
+  const extraToolbar = (
+    <div className="flex gap-2">
+      <Button
+        onClick={() => setIsCreateDialogOpen(true)}
+        className="bg-gradient-to-r from-purple-500 to-violet-600 text-white"
+      >
+        <PlusIcon className="h-4 w-4 mr-2" />
+        {t("serviceCategory.createNew", "Create Category")}
+      </Button>
+    </div>
+  );
+
+  // Loading UI
+  if (isLoading) {
+    return (
+      <div className="p-6 space-y-6">
+        <Skeleton className="h-8 w-64" />
+        <Skeleton className="h-12 w-full" />
+        <Skeleton className="h-12 w-full" />
+      </div>
+    );
+  }
+
+  // Error UI
+  if (isError) {
+    return (
+      <div className="p-6 space-y-4">
+        <p className="text-destructive font-semibold">
+          {t("serviceCategory.loadError", "Failed to load service categories")}
+        </p>
+        <Button onClick={() => refetch()}>{t("common.retry", "Retry")}</Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6">
+      <AdvancedTable<ServiceCategory, unknown>
+        columns={columns}
+        data={categories}
+        tableName={t("serviceCategory.title", "Service Categories")}
+        extraToolbar={extraToolbar}
+        toolBarPosition="right"
+        itemCount={categories.length}
+        pageIndex={pageIndex}
+        onPageChange={setPageIndex}
+        nextFunction={() => setPageIndex((p) => p + 1)}
+        prevFunction={() => setPageIndex((p) => Math.max(0, p - 1))}
+        refresh={refetch}
+      />
+
+      {/* Create Dialog */}
+      <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
+        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+          <DialogHeader></DialogHeader>
+          <ServiceCategoryForm
+            onSuccess={handleFormSuccess}
+            onCancel={handleFormCancel}
+          />
+        </DialogContent>
+      </Dialog>
+
+      {/* Edit Dialog */}
+      <Dialog
+        open={!!editingCategory}
+        onOpenChange={() => setEditingCategory(null)}
+      >
+        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>
+              {t("serviceCategory.editTitle", "Edit Service Category")}
+            </DialogTitle>
+          </DialogHeader>
+          {editingCategory && (
+            <ServiceCategoryForm
+              category={editingCategory}
+              onSuccess={handleFormSuccess}
+              onCancel={handleFormCancel}
+            />
+          )}
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Dialog */}
+      <AlertDialog
+        open={isDeleteDialogOpen}
+        onOpenChange={setIsDeleteDialogOpen}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t("serviceCategory.deleteTitle", "Delete Service Category")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t(
+                "serviceCategory.deleteConfirmation",
+                'Are you sure you want to delete "{{name}}"? This action cannot be undone.',
+                { name: localizedName(selectedCategory?.name) }
+              )}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+
+          <AlertDialogFooter>
+            <AlertDialogCancel>
+              {t("common.cancel", "Cancel")}
+            </AlertDialogCancel>
+
+            <AlertDialogAction
+              className="bg-red-600 hover:bg-red-700"
+              disabled={deleteCategory.isPending}
+              onClick={handleDelete}
+            >
+              {deleteCategory.isPending
+                ? t("common.deleting", "Deleting...")
+                : t("common.delete", "Delete")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/routes/PerformanceAppLayouts.tsx b/apps/edr-freight-web/backoffice/src/performance-management/routes/PerformanceAppLayouts.tsx
new file mode 100644
index 000000000..321e6753e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/routes/PerformanceAppLayouts.tsx
@@ -0,0 +1,111 @@
+import { Outlet, useLocation } from "react-router-dom";
+import { DynamicBreadcrumb } from "@/shared/components/ui/DynamicBreadcrumb";
+import { TopBar } from "@/layout/TopBar";
+import { useState } from "react";
+import { PerformanceMenuTabls } from "../layout/performanceMenuLayout";
+import { Button } from "@/shared/common/ui/button";
+import { ChevronLeft, ChevronRight, Menu } from "lucide-react";
+import { Sheet, SheetContent, SheetTrigger } from "@/shared/common/ui/sheet";
+import { PositionSelect } from "@/record-management/components/positionSelection";
+
+export const PerformanceAppLayout = () => {
+  const { pathname } = useLocation();
+  const isAuthPage = pathname === "/";
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+
+  const toggleSidebar = () => setSidebarOpen((prev) => !prev);
+
+  if (isAuthPage) {
+    return (
+      <div className="min-h-screen w-full bg-gray-50">
+        <Outlet />
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex flex-col bg-background text-foreground">
+      {/* TOP BAR */}
+      <TopBar />
+
+      {/* CONTENT AREA */}
+      <div className="flex flex-1 pt-16">
+        {/* SIDEBAR */}
+        <div
+          className={`hidden md:flex flex-col h-[calc(100vh-4rem)] fixed left-0 top-16 transition-all duration-300 bg-white dark:bg-gray-900 border-r dark:border-gray-800 z-20 ${
+            sidebarOpen ? "w-64" : "w-16"
+          }`}>
+          {/* Sidebar content */}
+          <PerformanceMenuTabls
+            collapsed={!sidebarOpen}
+            toggleSidebar={toggleSidebar}
+          />
+
+          {/* Sidebar toggle button */}
+          <div className="p-3 border-t dark:border-gray-800 mt-auto">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={toggleSidebar}
+              className="w-full flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+              {sidebarOpen ? (
+                <>
+                  <ChevronLeft className="h-4 w-4" />
+                  {!sidebarOpen && (
+                    <span className="sr-only">Expand sidebar</span>
+                  )}
+                </>
+              ) : (
+                <>
+                  <ChevronRight className="h-4 w-4" />
+                  {sidebarOpen && (
+                    <span className="sr-only">Collapse sidebar</span>
+                  )}
+                </>
+              )}
+            </Button>
+          </div>
+        </div>
+
+        {/* MOBILE SIDEBAR TRIGGER */}
+        <div className="md:hidden fixed bottom-6 right-6 z-40">
+          <Sheet>
+            <SheetTrigger asChild>
+              <Button
+                size="icon"
+                className="h-12 w-12 rounded-full shadow-lg bg-[#A043F0] hover:bg-[#8a36d0]">
+                <Menu className="h-6 w-6 text-white" />
+              </Button>
+            </SheetTrigger>
+            <SheetContent side="left" className="w-64 p-0">
+              <div className="flex flex-col h-full">
+                <div className="p-4 border-b">
+                  <h2 className="text-lg font-semibold">Menu</h2>
+                </div>
+                <div className="flex-1 p-2">
+                  <PerformanceMenuTabls />
+                </div>
+              </div>
+            </SheetContent>
+          </Sheet>
+        </div>
+
+        {/* MAIN CONTENT */}
+        <div
+          className={`flex-1 transition-all duration-300 min-h-[calc(100vh-4rem)] w-full ${
+            sidebarOpen ? "md:ml-64" : "md:ml-16"
+          }`}>
+          <div className="p-4 md:p-6">
+            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mb-6">
+              <DynamicBreadcrumb />
+              <PositionSelect />
+            </div>
+            <div className="w-full">
+              <Outlet />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/services/api/employeePlanService.ts b/apps/edr-freight-web/backoffice/src/performance-management/services/api/employeePlanService.ts
new file mode 100644
index 000000000..0d61337c8
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/services/api/employeePlanService.ts
@@ -0,0 +1,201 @@
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import axiosInstance from "@/shared/services/axiosInstance";
+import performanceInstance from "@/shared/services/performanceInstance";
+import { AxiosResponse } from "axios";
+
+export interface CreateEmployeePlanDto {
+  planId: string;
+  employeePositionId: string;
+  serviceId?: string;
+  parentEmployeePlanId?: string;
+  expectedQuantity: number;
+  planType: "number" | "percent" | "boolean";
+  timeframe: string;
+  week?: number;
+  month?: number;
+  quarter?: number;
+}
+export interface EmployeeDTO {
+  createdAt: string;
+  updatedAt: string;
+  id: string;
+  isCurrent: boolean;
+  status: string;
+  name: LocalizedName;
+  organizationId: string;
+  unitId: string;
+  userId: string;
+  employeePositions: EmployeePositionDTO[];
+}
+
+export interface LocalizedName {
+  am: string;
+  en: string;
+}
+
+export interface planParam {
+  timeframe: string;
+  skip?: number;
+  take?: number;
+}
+
+export interface EmployeePositionDTO {
+  createdAt: string;
+  updatedAt: string;
+  id: string;
+  isDelegate: boolean;
+  isCurrent: boolean;
+  startDate: string;
+  amharicStartDate: string;
+  endDate: string | null;
+  amharicEndDate: string | null;
+  unitId: string;
+  delegatorId: string | null;
+  employeeId: string;
+  positionId: string;
+  delegationLetterId: string | null;
+  position: PositionDTO;
+}
+
+export interface PositionDTO {
+  createdAt: string;
+  updatedAt: string;
+  id: string;
+  name: LocalizedName;
+  key: string;
+  rank: number;
+  parentPositionId: string | null;
+  unitId: string;
+  organizationId: string;
+  projectId: string | null;
+  positionTypeId: string;
+}
+
+export interface ImmediateChildResponse {
+  count: number;
+  items: EmployeeDTO[];
+}
+
+export const createEmployeePlan = async (
+  data: CreateEmployeePlanDto
+): Promise<AxiosResponse> => {
+  return performanceInstance.post("/employee-plans", data, {
+    headers: withHeaders(),
+  });
+};
+
+export const getEmployeePlans = async (
+  planId: string
+): Promise<AxiosResponse> => {
+  return performanceInstance.get(`/employee-plans/list/${planId}`, {
+    headers: withHeaders(),
+  });
+};
+
+export const getEmployeePlan = async (id: string): Promise<AxiosResponse> => {
+  return performanceInstance.get(`/employee-plans/${id}`, {
+    headers: withHeaders(),
+  });
+};
+
+export const updateEmployeePlan = async (
+  id: string,
+  data: CreateEmployeePlanDto
+): Promise<AxiosResponse> => {
+  return performanceInstance.put(`/employee-plans/${id}`, data, {
+    headers: withHeaders(),
+  });
+};
+
+export const deleteEmployeePlan = async (
+  id: string
+): Promise<AxiosResponse> => {
+  return performanceInstance.delete(`/employee-plans/${id}`, {
+    headers: withHeaders(),
+  });
+};
+
+export const getPlansByUnit = async (
+  unitId: string
+): Promise<AxiosResponse> => {
+  return performanceInstance.get(`/plans/mine`, {
+    headers: withHeaders(),
+    params: { unitId },
+  });
+};
+
+export const getPositionsByUnit = async (
+  unitId: string
+): Promise<AxiosResponse> => {
+  return performanceInstance.get(`/positions`, {
+    headers: withHeaders(),
+    params: { unitId },
+  });
+};
+
+export const getEmployeePositions = async (
+  positionId: string
+): Promise<AxiosResponse> => {
+  return performanceInstance.get(`/employee-positions`, {
+    headers: withHeaders(),
+    params: { positionId },
+  });
+};
+
+export const getServices = async (): Promise<AxiosResponse> => {
+  return performanceInstance.get(`/services`, {
+    headers: withHeaders(),
+  });
+};
+
+export const getParentEmployeePlanDetail = async (
+  id: string
+): Promise<AxiosResponse> => {
+  return performanceInstance.get(`/employee-plans/${id}`, {
+    headers: withHeaders(),
+  });
+};
+
+export const fetchImmediateChild =
+  async (): Promise<ImmediateChildResponse> => {
+    try {
+      const { data } = await axiosInstance.get(`/employees/immediate-child`, {
+        headers: withHeaders(),
+      });
+      return data;
+    } catch (error: any) {
+      throw new Error(
+        error?.response?.data?.message || "Failed to fetch immediate child"
+      );
+    }
+  };
+export const getEmployeePlanByPlanId = async (
+  planId: string
+): Promise<AxiosResponse> => {
+  return performanceInstance.get(
+    `/employee-plans/plan/${planId}/employee-plans`,
+    {
+      headers: withHeaders(),
+    }
+  );
+};
+
+export const getEmployeeSubPlanByPlanId = async (
+  planId: string
+): Promise<AxiosResponse> => {
+  return performanceInstance.get(
+    `/employee-plans/${planId}/sub-employee-plans`,
+    {
+      headers: withHeaders(),
+    }
+  );
+};
+
+export const getMyEmployeePlan = async (
+  params?: planParam
+): Promise<AxiosResponse> => {
+  return performanceInstance.get(`/employee-plans/mine`, {
+    headers: withHeaders(),
+    params,
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/services/api/metabaseService.ts b/apps/edr-freight-web/backoffice/src/performance-management/services/api/metabaseService.ts
new file mode 100644
index 000000000..34e4212fb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/services/api/metabaseService.ts
@@ -0,0 +1,147 @@
+import axios, { AxiosResponse } from "axios";
+import Cookies from "js-cookie";
+import { getEnvUrl } from "@/shared/config/env";
+
+export interface MetabaseDashboard {
+  id: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  description: {
+    am: string;
+    en: string;
+  };
+  metabaseDashboardNumber: number;
+  permissionId: string;
+  createdAt: string;
+  updatedAt: string;
+  tenantId: string;
+  params: string[];
+}
+
+export interface MetabaseDashboardsResponse {
+  count: number;
+  items: MetabaseDashboard[];
+}
+
+export interface MetabaseIframeResponse {
+  iframeUrl: string;
+}
+
+export interface CreateDashboardRequest {
+  name: {
+    am: string;
+    en: string;
+  };
+  metabaseDashboardNumber: number;
+  description: {
+    am: string;
+    en: string;
+  };
+  permissionId: string;
+  params: Record<string, unknown>[];
+}
+
+export interface GetIframeUrlRequest {
+  params: Record<string, unknown>;
+}
+
+// Create a dedicated axios instance for Metabase API
+const metabaseAxios = axios.create({
+  baseURL: getEnvUrl("VITE_CHRONICLE_URL"),
+});
+
+// Add auth token interceptor
+metabaseAxios.interceptors.request.use((config) => {
+  const token = Cookies.get("auth-token");
+  if (token) {
+    config.headers["Authorization"] = `Bearer ${token}`;
+  }
+  // Add tenant ID header
+  config.headers["x-tenant-id"] = "adf98293-41ba-4bda-bdb4-70e30a70c1b7";
+  return config;
+});
+
+class MetabaseService {
+  private baseUrl = "/metabase-dashboards";
+
+  async createDashboard(
+    data: CreateDashboardRequest,
+  ): Promise<MetabaseDashboard> {
+    const response: AxiosResponse<MetabaseDashboard> = await metabaseAxios.post(
+      this.baseUrl,
+      data,
+    );
+    return response.data;
+  }
+
+  async getAllDashboards(): Promise<MetabaseDashboardsResponse> {
+    const response: AxiosResponse<MetabaseDashboardsResponse> =
+      await metabaseAxios.get(this.baseUrl);
+    return response.data;
+  }
+
+  async getPermittedDashboards(
+    locale: string = "en",
+  ): Promise<MetabaseDashboardsResponse> {
+    const response: AxiosResponse<MetabaseDashboardsResponse> =
+      await metabaseAxios.get(`${this.baseUrl}/permitted`, {
+        params: {
+          locale,
+        },
+      });
+    return response.data;
+  }
+
+  async getIframeUrl(
+    dashboardId: string,
+    params: GetIframeUrlRequest,
+  ): Promise<MetabaseIframeResponse> {
+    const response: AxiosResponse<MetabaseIframeResponse> =
+      await metabaseAxios.post(
+        `${this.baseUrl}/${dashboardId}/iframe-url`,
+        params,
+      );
+    return response.data;
+  }
+
+  async getFilteredDashboardUrl(
+    dashboardId: string,
+    planYearId: string,
+  ): Promise<MetabaseIframeResponse> {
+    const params: GetIframeUrlRequest = {
+      params: {
+        plan_year: planYearId,
+      },
+    };
+
+    const response: AxiosResponse<MetabaseIframeResponse> =
+      await metabaseAxios.post(
+        `${this.baseUrl}/${dashboardId}/iframe-url`,
+        params,
+      );
+    return response.data;
+  }
+}
+
+export const metabaseService = new MetabaseService();
+
+// Helper function to create a performance dashboard
+export const createPerformanceDashboard = async () => {
+  const dashboardData: CreateDashboardRequest = {
+    name: {
+      am: "performance",
+      en: "performance",
+    },
+    metabaseDashboardNumber: 2,
+    description: {
+      am: "performance",
+      en: "performance",
+    },
+    permissionId: "a83825b9-9806-4918-bc10-56226bbe41d4",
+    params: [],
+  };
+
+  return metabaseService.createDashboard(dashboardData);
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/services/api/performanceService.ts b/apps/edr-freight-web/backoffice/src/performance-management/services/api/performanceService.ts
new file mode 100644
index 000000000..a9b8e4303
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/services/api/performanceService.ts
@@ -0,0 +1,65 @@
+import { Axios, AxiosResponse } from "axios";
+import performanceInstance from "@/shared/services/performanceInstance";
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import DateMeasurementUnit from "@/performance-management/utils/data-measurement-unit";
+
+export interface CreateServiceDto {
+  id?: string; // Optional for create, required for update
+  slug: string;
+  prefix: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  description: {
+    am: string;
+    en: string;
+  };
+  organizationId: string;
+  serviceCategoryId?: string;
+  parentServiceId?: string;
+  estimatedTime: number;
+  estimatedTimeUnit: DateMeasurementUnit;
+}
+
+export const createService = async (
+  data: CreateServiceDto
+): Promise<AxiosResponse> => {
+  return performanceInstance.post("/services", data, {
+    headers: withHeaders(),
+  });
+};
+
+export const getService = async (id: string): Promise<AxiosResponse> => {
+  return performanceInstance.get(`/services/${id}`, {
+    headers: withHeaders(),
+  });
+};
+export const getServiceList = async (
+  organizationId: string,
+  serviceCategoryId?: string,
+  parentServiceId?: string
+): Promise<AxiosResponse> => {
+  const params: any = {};
+  if (serviceCategoryId) params.serviceCategoryId = serviceCategoryId;
+  if (parentServiceId) params.parentServiceId = parentServiceId;
+
+  return performanceInstance.get(`/services/list/${organizationId}`, {
+    headers: withHeaders(),
+    params,
+  });
+};
+
+export const updateService = async (
+  data: CreateServiceDto
+): Promise<AxiosResponse> => {
+  return performanceInstance.put(`/services/${data.id}`, data, {
+    headers: withHeaders(),
+  });
+};
+
+export const deleteService = async (id: string): Promise<AxiosResponse> => {
+  return performanceInstance.delete(`/services/${id}`, {
+    headers: withHeaders(),
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/services/api/planService.ts b/apps/edr-freight-web/backoffice/src/performance-management/services/api/planService.ts
new file mode 100644
index 000000000..484b8e9d5
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/services/api/planService.ts
@@ -0,0 +1,155 @@
+import { SectorListParam } from "@/performance-management/types/planTypes";
+import PlanType from "@/performance-management/utils/plan-unit";
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import performanceInstance from "@/shared/services/performanceInstance";
+import { AxiosResponse } from "axios";
+
+export interface PlanParams {
+  serviceId?: string;
+  positionId?: string;
+  parentPlanId?: string;
+  skip?: number;
+  take?: number;
+  orderBy?: string;
+  planFor?: "team" | "self" | "position";
+}
+
+export interface CreatePlanDto {
+  id?: string;
+  name: {
+    am: string;
+    en: string;
+  };
+
+  description: {
+    am: string;
+    en: string;
+  };
+
+  positionId?: string;
+  parentPlanId?: string; //
+  planType: PlanType; //
+  planYearId: string; //
+  // initialGoal: number;
+  // expectedGoal: number;
+  weight: number;
+  month?: number;
+  week?: number;
+  day?: number;
+  quarter?: number;
+  timeframe: string;
+}
+
+export const createPlan = async (
+  data: CreatePlanDto,
+): Promise<AxiosResponse> => {
+  return performanceInstance.post("/plans", data, {
+    headers: withHeaders(),
+  });
+};
+
+export const updatePlan = async (
+  data: CreatePlanDto,
+): Promise<AxiosResponse> => {
+  return performanceInstance.put(`/plans/${data?.id}`, data, {
+    headers: withHeaders(),
+  });
+};
+
+export const requestApproval = async (id: string): Promise<AxiosResponse> => {
+  return performanceInstance.post(
+    `/plans/${id}/sent`,
+    {},
+    {
+      headers: withHeaders(),
+    },
+  );
+};
+export const approvePlan = async (id: string): Promise<AxiosResponse> => {
+  return performanceInstance.post(
+    `/plans/${id}/approve`,
+    {},
+    {
+      headers: withHeaders(),
+    },
+  );
+};
+export const rejectPlan = async (id: string): Promise<AxiosResponse> => {
+  return performanceInstance.post(
+    `/plans/${id}/reject`,
+    {},
+    {
+      headers: withHeaders(),
+    },
+  );
+};
+export const deletePlan = async (id: string): Promise<AxiosResponse> => {
+  return performanceInstance.delete(`/plans/${id}`, {
+    headers: withHeaders(),
+  });
+};
+
+export const getPlan = async (id: string): Promise<AxiosResponse> => {
+  return performanceInstance.get(`/plans/${id}`, {
+    headers: withHeaders(),
+  });
+};
+
+export const getPlanList = async (
+  id: string,
+  params?: PlanParams,
+): Promise<AxiosResponse> => {
+  return performanceInstance.get(`/plans/list/${id}`, {
+    headers: withHeaders(),
+    params,
+  });
+};
+
+export const getSectorList = async (
+  id?: string,
+  params?: SectorListParam,
+): Promise<AxiosResponse> => {
+  return performanceInstance.get(`/plans/${id}/sector`, {
+    headers: withHeaders(),
+    params,
+  });
+};
+
+export const getMinePlan = async (
+  params?: SectorListParam,
+): Promise<AxiosResponse> => {
+  return performanceInstance.get(`/plans/mine`, {
+    headers: withHeaders(),
+    params,
+  });
+};
+
+export const getSubPlans = async (
+  id: string,
+  params?: SectorListParam,
+): Promise<AxiosResponse> => {
+  return performanceInstance.get(`/plans/${id}/sub-plans`, {
+    headers: withHeaders(),
+    params,
+  });
+};
+
+export const getMySubPlans = async (
+  id: string,
+  params?: SectorListParam,
+): Promise<AxiosResponse> => {
+  return performanceInstance.get(`/plans/${id}/mine-sub-plans`, {
+    headers: withHeaders(),
+    params,
+  });
+};
+
+export const getTeamSubPlans = async (
+  id: string,
+  params?: SectorListParam,
+): Promise<AxiosResponse> => {
+  return performanceInstance.get(`/plans/${id}/team-sub-plans`, {
+    headers: withHeaders(),
+    params,
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/services/api/planTeamServices.ts b/apps/edr-freight-web/backoffice/src/performance-management/services/api/planTeamServices.ts
new file mode 100644
index 000000000..cd87ad31e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/services/api/planTeamServices.ts
@@ -0,0 +1,120 @@
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import performanceInstance from "@/shared/services/performanceInstance";
+import { AxiosResponse } from "axios";
+
+export interface CreatePlanTeamDto {
+  name: {
+    am: string;
+    en: string;
+  };
+  description: {
+    am: string;
+    en: string;
+  };
+  teamLeaderId: string;
+  positionId: string;
+}
+
+export interface CreatePlanTeamMemberDto {
+  planTeamId: string;
+  employeePositionIds: string;
+}
+export interface CreatePlanBulkTeamMemberDto {
+  planTeamId: string;
+  employeePositionIds: string[];
+}
+export interface PlanTeamParams {
+  skip?: number;
+  take?: number;
+  orderBy?: string;
+}
+export interface CreatePlanTeamMemberDto {
+  planTeamId: string;
+  employeePositionId: string;
+}
+export const getPlanTeam = async (id: string): Promise<AxiosResponse> => {
+  return performanceInstance.get(`/plan-teams/${id}`, {
+    headers: withHeaders(),
+  });
+};
+export const updatePlanTeam = async (
+  id: string,
+  data: CreatePlanTeamDto
+): Promise<AxiosResponse> => {
+  return performanceInstance.put(`/plan-teams/${id}`, data, {
+    headers: withHeaders(),
+  });
+};
+export const deletePlanTeam = async (id: string): Promise<AxiosResponse> => {
+  return performanceInstance.delete(`/plan-teams/${id}`, {
+    headers: withHeaders(),
+  });
+};
+
+export const createPlanTeam = async (
+  data: CreatePlanTeamDto
+): Promise<AxiosResponse> => {
+  return performanceInstance.post(`/plan-teams`, data, {
+    headers: withHeaders(),
+  });
+};
+
+export const getPlanTeamList = async (
+  id: string,
+  params?: PlanTeamParams
+): Promise<AxiosResponse> => {
+  return performanceInstance.get(`/plan-teams/list/${id}`, {
+    headers: withHeaders(),
+    params,
+  });
+};
+
+export const getPlanTeamMembers = async (
+  id: string
+): Promise<AxiosResponse> => {
+  return performanceInstance.get(`/plan-team-members/${id}`, {
+    headers: withHeaders(),
+  });
+};
+
+export const createPlanTeamMember = async (
+  data: CreatePlanTeamMemberDto
+): Promise<AxiosResponse> => {
+  return performanceInstance.post(`/plan-team-members`, data, {
+    headers: withHeaders(),
+  });
+};
+export const createPlanBulkTeamMember = async (
+  data: CreatePlanBulkTeamMemberDto
+): Promise<AxiosResponse> => {
+  return performanceInstance.post(`/plan-team-members/bulk-create`, data, {
+    headers: withHeaders(),
+  });
+};
+
+export const deletePlanTeamMember = async (
+  id: string
+): Promise<AxiosResponse> => {
+  return performanceInstance.delete(`/plan-team-members/${id}`, {
+    headers: withHeaders(),
+  });
+};
+
+export const updatePlanTeamMember = async (
+  id: string,
+  data: CreatePlanTeamMemberDto
+): Promise<AxiosResponse> => {
+  return performanceInstance.put(`/plan-team-members/${id}`, data, {
+    headers: withHeaders(),
+  });
+};
+
+export const getPlanTeamMemberList = async (
+  id: string,
+  params?: PlanTeamParams
+): Promise<AxiosResponse> => {
+  return performanceInstance.get(`/plan-team-members/list/${id}`, {
+    headers: withHeaders(),
+    params,
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/services/api/planYearService.ts b/apps/edr-freight-web/backoffice/src/performance-management/services/api/planYearService.ts
new file mode 100644
index 000000000..5169b229c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/services/api/planYearService.ts
@@ -0,0 +1,90 @@
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import performanceInstance from "@/shared/services/performanceInstance";
+import { AxiosResponse } from "axios";
+import { CreatePlanYearDto } from "../../types/planYearTypes";
+
+export interface PlanYearParams {
+  skip?: number;
+  take?: number;
+  orderBy?: string;
+  isActive?: boolean;
+}
+
+// Get all plan years
+export const getPlanYears = async (
+  organizationId: string,
+  params?: PlanYearParams
+): Promise<AxiosResponse> => {
+  return performanceInstance.get(`/plan-years/list/${organizationId}`, {
+    headers: withHeaders(),
+    params,
+  });
+};
+
+// Get single plan year by ID
+export const getPlanYear = async (id: string): Promise<AxiosResponse> => {
+  return performanceInstance.get(`/plan-years/${id}`, {
+    headers: withHeaders(),
+  });
+};
+
+// Create new plan year
+export const createPlanYear = async (
+  data: CreatePlanYearDto
+): Promise<AxiosResponse> => {
+  // return new Promise((resolve) => {
+  //   setTimeout(() => {
+  //     resolve({
+  //       data: { ...data, id: `py-${data.year}` },
+  //       status: 201,
+  //       statusText: "Created",
+  //       headers: {},
+  //       config: {} as any,
+  //     });
+  //   }, 500);
+  // });
+
+  return performanceInstance.post("/plan-years", data, {
+    headers: withHeaders(),
+  });
+};
+
+// Update existing plan year
+export const updatePlanYear = async (
+  data: CreatePlanYearDto
+): Promise<AxiosResponse> => {
+  // return new Promise((resolve) => {
+  //   setTimeout(() => {
+  //     resolve({
+  //       data: data,
+  //       status: 200,
+  //       statusText: "OK",
+  //       headers: {},
+  //       config: {} as any,
+  //     });
+  //   }, 500);
+  // });
+
+  return performanceInstance.put(`/plan-years/${data.id}`, data, {
+    headers: withHeaders(),
+  });
+};
+
+// Delete plan year
+export const deletePlanYear = async (id: string): Promise<AxiosResponse> => {
+  // return new Promise((resolve) => {
+  //   setTimeout(() => {
+  //     resolve({
+  //       data: { success: true },
+  //       status: 200,
+  //       statusText: "OK",
+  //       headers: {},
+  //       config: {} as any,
+  //     });
+  //   }, 500);
+  // });
+
+  return performanceInstance.delete(`/plan-years/${id}`, {
+    headers: withHeaders(),
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/services/api/serviceAssignmentService.ts b/apps/edr-freight-web/backoffice/src/performance-management/services/api/serviceAssignmentService.ts
new file mode 100644
index 000000000..46b2b7184
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/services/api/serviceAssignmentService.ts
@@ -0,0 +1,125 @@
+import performanceInstance from "@/shared/services/performanceInstance";
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import { AxiosResponse } from "axios";
+
+export interface ServiceAssignment {
+  id: string;
+  positionId: string;
+  serviceId: string;
+  assignedAt: string;
+}
+
+export interface AssignServicesPayload {
+  positionId: string;
+  serviceIds: string[];
+}
+
+/**
+ * Fetch services assigned to a specific position
+ * Returns the service (second) assigned to a position (first)
+ */
+export const getAssignedServices = async (
+  positionId: string
+): Promise<AxiosResponse> => {
+  return performanceInstance.get(
+    `/position-services/seconds-for-first/${positionId}`,
+    {
+      headers: withHeaders(),
+    }
+  );
+};
+
+/**
+ * Assign service(s) to a position
+ * API expects: firstIds (positions array) and secondId (service)
+ */
+export const assignServicesToPosition = async (
+  positionId: string,
+  serviceIds: string[]
+): Promise<AxiosResponse> => {
+  return performanceInstance.post(
+    `/position-services/assign-firsts-for-second`,
+    {
+      firstIds: [positionId],
+      secondId: serviceIds[0], // Single service ID
+    },
+    {
+      headers: withHeaders(),
+    }
+  );
+};
+
+/**
+ * Remove a service assignment from a position
+ */
+export const removeServiceFromPosition = async (
+  positionId: string,
+  serviceId: string
+): Promise<AxiosResponse> => {
+  return performanceInstance.delete(
+    `/positions/${positionId}/services/${serviceId}`,
+    {
+      headers: withHeaders(),
+    }
+  );
+};
+
+/**
+ * Get all services for a specific organization
+ */
+export const getServicesByOrganization = async (
+  organizationId: string
+): Promise<AxiosResponse> => {
+  return performanceInstance.get(`/services/list/${organizationId}`, {
+    headers: withHeaders(),
+  });
+};
+
+// Keep backward compatibility
+export const getServicesByUnit = getServicesByOrganization;
+
+/**
+ * Get all services (active and published) - deprecated, use getServicesByUnit
+ */
+export const getAvailableServices = async (): Promise<AxiosResponse> => {
+  return performanceInstance.get("/services", {
+    headers: withHeaders(),
+    params: {
+      isActive: true,
+      status: "PUBLISHED",
+    },
+  });
+};
+
+/**
+ * Get services associated with a position (using position endpoint)
+ */
+export const getPositionServices = async (
+  positionId: string
+): Promise<AxiosResponse> => {
+  return performanceInstance.get(`/position-services/position/${positionId}`, {
+    headers: withHeaders(),
+  });
+};
+
+/**
+ * Get position services by position ID (for working days configuration)
+ */
+export const getPositionServicesByPositionId = async (
+  positionId: string
+): Promise<AxiosResponse> => {
+  return performanceInstance.get(`/position-services/position/${positionId}`, {
+    headers: withHeaders(),
+  });
+};
+
+/**
+ * Delete a position service by ID
+ */
+export const deletePositionService = async (
+  positionServiceId: string
+): Promise<AxiosResponse> => {
+  return performanceInstance.delete(`/position-services/${positionServiceId}`, {
+    headers: withHeaders(),
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/services/api/serviceCategoryService.ts b/apps/edr-freight-web/backoffice/src/performance-management/services/api/serviceCategoryService.ts
new file mode 100644
index 000000000..59fecf765
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/services/api/serviceCategoryService.ts
@@ -0,0 +1,66 @@
+import { AxiosResponse } from "axios";
+import performanceInstance from "@/shared/services/performanceInstance";
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+
+export interface ServiceCategory {
+  id: string;
+  slug: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  description: {
+    am: string;
+    en: string;
+  };
+  organizationId: string;
+  createdAt: string;
+  updatedAt?: string;
+}
+
+export interface CreateServiceCategoryRequest {
+  slug: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  description: {
+    am: string;
+    en: string;
+  };
+  organizationId: string;
+}
+
+export const serviceCategoryService = {
+  create: async (
+    data: CreateServiceCategoryRequest
+  ): Promise<AxiosResponse> => {
+    return performanceInstance.post("/service-categories", data, {
+      headers: withHeaders(),
+    });
+  },
+
+  getList: async (organizationId: string): Promise<AxiosResponse> => {
+    return performanceInstance.get(
+      `/service-categories/list/${organizationId}`,
+      {
+        headers: withHeaders(),
+      }
+    );
+  },
+
+  update: async (
+    id: string,
+    data: CreateServiceCategoryRequest
+  ): Promise<AxiosResponse> => {
+    return performanceInstance.put(`/service-categories/${id}`, data, {
+      headers: withHeaders(),
+    });
+  },
+
+  delete: async (id: string): Promise<AxiosResponse> => {
+    return performanceInstance.delete(`/service-categories/${id}`, {
+      headers: withHeaders(),
+    });
+  },
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/services/api/workingHoursService.ts b/apps/edr-freight-web/backoffice/src/performance-management/services/api/workingHoursService.ts
new file mode 100644
index 000000000..6c68d69c5
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/services/api/workingHoursService.ts
@@ -0,0 +1,52 @@
+import { AxiosResponse } from "axios";
+import performanceInstance from "@/shared/services/performanceInstance";
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import { CreateWorkingHoursDto } from "@/performance-management/types/workingHoursTypes";
+
+export const createWorkingHours = async (
+  data: CreateWorkingHoursDto
+): Promise<AxiosResponse> => {
+  return performanceInstance.post("/working-days", data, {
+    headers: withHeaders(),
+  });
+};
+
+export const getWorkingHours = async (id: string): Promise<AxiosResponse> => {
+  return performanceInstance.get(`/working-days/${id}`, {
+    headers: withHeaders(),
+  });
+};
+
+export const getWorkingHoursList = async (): Promise<AxiosResponse> => {
+  return performanceInstance.get("/working-days", {
+    headers: withHeaders(),
+  });
+};
+
+export const getWorkingHoursByPositionServiceId = async (
+  positionServiceId: string
+): Promise<AxiosResponse> => {
+  return performanceInstance.get("/working-days", {
+    headers: withHeaders(),
+    params: {
+      positionServiceId,
+    },
+  });
+};
+
+export const updateWorkingHours = async (
+  id: string,
+  data: CreateWorkingHoursDto
+): Promise<AxiosResponse> => {
+  return performanceInstance.put(`/working-days/${id}`, data, {
+    headers: withHeaders(),
+  });
+};
+
+export const deleteWorkingHours = async (
+  id: string
+): Promise<AxiosResponse> => {
+  return performanceInstance.delete(`/working-days/${id}`, {
+    headers: withHeaders(),
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/types/planHierarchyTypes.ts b/apps/edr-freight-web/backoffice/src/performance-management/types/planHierarchyTypes.ts
new file mode 100644
index 000000000..2ea525bd0
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/types/planHierarchyTypes.ts
@@ -0,0 +1,59 @@
+export interface Plan {
+  id: string;
+  name: string;
+  description?: string;
+  weight: number;
+  timeline: string;
+  status: "pending" | "in-progress" | "completed" | "overdue";
+  progress: number;
+}
+
+export interface WeeklyTask {
+  id: string;
+  description: string;
+  deadline: string;
+  status: "pending" | "in-progress" | "completed";
+  expectedOutcome: string;
+}
+
+export interface Employee {
+  id: string;
+  name: string;
+  position: string;
+  planCount: number;
+  weeklyTasksCount: number;
+  plans: Plan[];
+  weeklyTasks: WeeklyTask[];
+}
+
+export interface TeamLead {
+  id: string;
+  name: string;
+  planCount: number;
+  progress: number;
+  plans: Plan[];
+  weeklyMilestones: string[];
+  employees: Employee[];
+}
+
+export interface Directorate {
+  id: string;
+  name: string;
+  planCount: number;
+  progress: number;
+  plans: Plan[];
+  teamLeads: TeamLead[];
+}
+
+export interface Sector {
+  id: string;
+  name: string;
+  plans: Plan[];
+  directorates: Directorate[];
+}
+
+// View Data Interfaces
+export interface DeputyData extends Sector {}
+export interface DirectorData extends Directorate {}
+export interface TeamLeaderData extends TeamLead {}
+export interface EmployeeData extends Employee {}
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/types/planTypes.ts b/apps/edr-freight-web/backoffice/src/performance-management/types/planTypes.ts
new file mode 100644
index 000000000..f972d6c91
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/types/planTypes.ts
@@ -0,0 +1,104 @@
+// types/plantypes.ts
+export interface Plan {
+  createdAt: string;
+  updatedAt: string;
+  tenantId: string;
+  amharicCreatedAt: string;
+  amharicUpdatedAt: string;
+  id: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  description: {
+    am: string;
+    en: string;
+  };
+  planYearId: string;
+  // initialGoal?: number;
+  // expectedGoal?: number;
+  weight: number;
+  month: number;
+  week: number;
+  day: number;
+  quarter: number;
+  timeframe: number;
+  positionId: string;
+  unitId: string;
+  parentPlanId?: string;
+  planType?: string;
+  planFor?: string;
+}
+
+export enum BillingCycle {
+  MONTHLY = "MONTHLY",
+  QUARTERLY = "QUARTERLY",
+  ANNUALLY = "ANNUALLY",
+  ONE_TIME = "ONE_TIME",
+}
+
+export enum PlanStatus {
+  DRAFT = "DRAFT",
+  ACTIVE = "ACTIVE",
+  ARCHIVED = "ARCHIVED",
+  COMING_SOON = "COMING_SOON",
+}
+
+export enum SupportLevel {
+  BASIC = "BASIC",
+  PRIORITY = "PRIORITY",
+  PREMIUM = "PREMIUM",
+  DEDICATED = "DEDICATED",
+}
+
+export enum CancellationPolicy {
+  ANYTIME = "ANYTIME",
+  THIRTY_DAYS = "THIRTY_DAYS",
+  END_OF_TERM = "END_OF_TERM",
+}
+
+export interface SectorList {
+  position_created_at: string;
+  position_updated_at: string;
+  position_id: string;
+  position_name: {
+    am: string;
+    en: string;
+  };
+  position_key: string;
+  position_rank: number;
+  position_parent_position_id: string;
+  position_unit_id: string;
+  position_organization_id: string;
+  position_project_id: string | null;
+  position_position_type_id: string;
+  no_of_plans: number;
+  total_weight: number | null;
+  planTeam_name?: {
+    am: string;
+    en: string;
+  };
+  planTeam_description?: {
+    am: string;
+    en: string;
+  };
+  id?: string;
+  planTeam_id?: string;
+  positionId?: string;
+  planTeam_position_id?:string;
+}
+
+export interface SectorListResponse {
+  count: number;
+  items: SectorList[];
+}
+
+export interface SectorListParam {
+  positonId?: string;
+  organizationId?: string;
+  parentPlanId?: string;
+  take?: number;
+  skip?: number;
+  orderBy?: string;
+  planYearId?: string;
+}
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/types/planYearTypes.ts b/apps/edr-freight-web/backoffice/src/performance-management/types/planYearTypes.ts
new file mode 100644
index 000000000..255243eb8
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/types/planYearTypes.ts
@@ -0,0 +1,38 @@
+export interface PlanYear {
+  id: string;
+  year: number;
+  name: {
+    am: string;
+    en: string;
+  };
+  description?: {
+    am: string;
+    en: string;
+  };
+  isActive: boolean;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export interface CreatePlanYearDto {
+  id?: string;
+  year: number;
+  name: {
+    am: string;
+    en: string;
+  };
+  description?: {
+    am: string;
+    en: string;
+  };
+  organizationId?: string;
+}
+
+export interface PlanYearFormValues {
+  year: number;
+  nameAm: string;
+  nameEn: string;
+  descriptionAm?: string;
+  descriptionEn?: string;
+  organizationId?: string;
+}
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/types/servicetypes.ts b/apps/edr-freight-web/backoffice/src/performance-management/types/servicetypes.ts
new file mode 100644
index 000000000..9a38ab2a7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/types/servicetypes.ts
@@ -0,0 +1,45 @@
+import DateMeasurementUnit from "../utils/data-measurement-unit";
+
+export interface Service {
+  id: string;
+  name: string | { en: string; am: string }; // Can be string or localized object
+  description: string;
+  categoryId: string;
+  categoryName?: string;
+  isActive: boolean;
+  createdAt?: string;
+  updatedAt?: string;
+
+  // Add these missing properties
+  estimatedDuration?: number;
+  estimatedDurationUnit?: string;
+  status?: string;
+  parentId?: string;
+  requirements?: string;
+}
+
+export interface IServiceResponse {
+  createdAt: string;
+  updatedAt: string | null;
+  tenantId: string;
+  amharicCreatedAt: string | null;
+  amharicUpdatedAt: string | null;
+  id: string;
+  slug: string;
+
+  name: {
+    am: string;
+    en: string;
+  };
+
+  description: {
+    am: string;
+    en: string;
+  };
+
+  estimatedTime: number;
+  estimatedTimeUnit: DateMeasurementUnit;
+
+  organizationId: string | null;
+  serviceCategoryId?: string | null;
+}
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/types/workingHoursTypes.ts b/apps/edr-freight-web/backoffice/src/performance-management/types/workingHoursTypes.ts
new file mode 100644
index 000000000..6475c4192
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/types/workingHoursTypes.ts
@@ -0,0 +1,22 @@
+export type WeekDay =
+  | "monday"
+  | "tuesday"
+  | "wednesday"
+  | "thursday"
+  | "friday"
+  | "saturday"
+  | "sunday";
+
+export interface CreateWorkingHoursDto {
+  slug: string;
+  weekDay: WeekDay;
+  positionServiceId: string;
+  startTime: string; // Format: "HH:mm"
+  endTime: string; // Format: "HH:mm"
+}
+
+export interface WorkingHoursResponse extends CreateWorkingHoursDto {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+}
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/utils/EthiopianYear.ts b/apps/edr-freight-web/backoffice/src/performance-management/utils/EthiopianYear.ts
new file mode 100644
index 000000000..6cf38b90b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/utils/EthiopianYear.ts
@@ -0,0 +1,14 @@
+// utils/ethiopianYears.ts
+export const generateEthiopianYearOptions = (yearsAhead = 5) => {
+  const today = new Date();
+  let currentYear = today.getFullYear() - 8;
+  const month = today.getMonth() + 1;
+  const day = today.getDate();
+
+  if (month > 9 || (month === 9 && day >= 11)) currentYear += 1;
+
+  return Array.from({ length: yearsAhead + 1 }, (_, i) => {
+    const year = currentYear + i;
+    return { label: year.toString(), value: year.toString() };
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/utils/FormFieldRenderer.tsx b/apps/edr-freight-web/backoffice/src/performance-management/utils/FormFieldRenderer.tsx
new file mode 100644
index 000000000..379d5e6d0
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/utils/FormFieldRenderer.tsx
@@ -0,0 +1,549 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { FieldValues, Path, UseFormReturn } from "react-hook-form";
+import { motion, AnimatePresence, Variants } from "framer-motion";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import { Label } from "@/shared/common/ui/label";
+import { Textarea } from "@/shared/common/ui/textarea";
+import { Switch } from "@/shared/common/ui/switch";
+import { Checkbox } from "@/shared/common/ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { MultiSelect } from "@/shared/common/ui/multi-select";
+import { Calendar } from "@/shared/common/ui/calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/shared/common/ui/popover";
+import { RadioGroup, RadioGroupItem } from "@/shared/common/ui/radio-group";
+import { Tabs, TabsList, TabsTrigger } from "@/shared/common/ui/tabs";
+import { format } from "date-fns";
+import { CalendarIcon, AlertCircle } from "lucide-react";
+import { cn } from "@/shared/lib/utils";
+import { SliderUI } from "@/shared/common/ui/SliderUI";
+import { FormField } from "./shared-field-types";
+import RichTextEditor from "@/record-management/common/RichTextEditor";
+import StarRating from "@/shared/common/ui/star-rating";
+import HabeshaDatePicker from "@/shared/common/ui/habesha-date-picker";
+import YearPicker from "@/shared/common/ui/year-picker";
+import { useEffect } from "react";
+
+interface FormFieldRendererProps<T extends FieldValues> {
+  field: FormField<T>;
+  form: UseFormReturn<T>;
+  isLoading?: boolean;
+  isSubmitting?: boolean;
+  defaultValue?: any;
+  shouldClearEditor?: boolean;
+  onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
+}
+
+const itemVariants: Variants = {
+  hidden: { y: 20, opacity: 0 },
+  visible: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      type: "spring" as const,
+      stiffness: 100,
+      damping: 15,
+    },
+  },
+};
+
+export function FormFieldRenderer<T extends FieldValues>({
+  field,
+  form,
+  isLoading = false,
+  isSubmitting = false,
+  defaultValue,
+  shouldClearEditor = false,
+  onScroll,
+}: FormFieldRendererProps<T>) {
+  const {
+    register,
+    formState: { errors },
+    setValue,
+    watch,
+    getValues,
+  } = form;
+  const fieldName = field.name as Path<T>;
+  const fieldValue = watch(fieldName);
+  const hasError = !!errors[fieldName];
+
+  // Set default value when component mounts
+  useEffect(() => {
+    const currentValue = getValues(fieldName);
+
+    // If field has no value and we have a default value
+    if (
+      currentValue === undefined ||
+      currentValue === null ||
+      currentValue === ""
+    ) {
+      let valueToSet = null;
+
+      // Priority 1: Field-specific defaultValue
+      if (field.defaultValue !== undefined && field.defaultValue !== null) {
+        valueToSet = field.defaultValue;
+      }
+      // Priority 2: Global form defaultValue for this field
+      else if (defaultValue !== undefined && defaultValue !== null) {
+        const globalDefault =
+          typeof defaultValue === "object"
+            ? defaultValue[field.name as string]
+            : defaultValue;
+        if (globalDefault !== undefined && globalDefault !== null) {
+          valueToSet = globalDefault;
+        }
+      }
+
+      if (valueToSet !== null) {
+        setValue(fieldName, valueToSet, { shouldValidate: true });
+      }
+    }
+  }, [
+    fieldName,
+    fieldValue,
+    field.defaultValue,
+    defaultValue,
+    setValue,
+    getValues,
+  ]);
+
+  // Get grid classes with proper defaults
+  const getGridClasses = () => {
+    const classes = [];
+
+    // Determine column spans with defaults
+    const colSpan = field.colSpan || 12;
+    const smColSpan = field.smColSpan || colSpan;
+    const lgColSpan = field.lgColSpan || colSpan;
+
+    // Special handling for textarea - make it full width by default
+    if (field.type === "textarea" && !field.colSpan) {
+      return "col-span-12 sm:col-span-12 lg:col-span-12";
+    }
+
+    // Map spans to Tailwind classes
+    const spanClasses: Record<number, string> = {
+      1: "col-span-1",
+      2: "col-span-2",
+      3: "col-span-3",
+      4: "col-span-4",
+      5: "col-span-5",
+      6: "col-span-6",
+      7: "col-span-7",
+      8: "col-span-8",
+      9: "col-span-9",
+      10: "col-span-10",
+      11: "col-span-11",
+      12: "col-span-12",
+    };
+
+    const smSpanClasses: Record<number, string> = {
+      1: "sm:col-span-1",
+      2: "sm:col-span-2",
+      3: "sm:col-span-3",
+      4: "sm:col-span-4",
+      5: "sm:col-span-5",
+      6: "sm:col-span-6",
+      7: "sm:col-span-7",
+      8: "sm:col-span-8",
+      9: "sm:col-span-9",
+      10: "sm:col-span-10",
+      11: "sm:col-span-11",
+      12: "sm:col-span-12",
+    };
+
+    const lgSpanClasses: Record<number, string> = {
+      1: "lg:col-span-1",
+      2: "lg:col-span-2",
+      3: "lg:col-span-3",
+      4: "lg:col-span-4",
+      5: "lg:col-span-5",
+      6: "lg:col-span-6",
+      7: "lg:col-span-7",
+      8: "lg:col-span-8",
+      9: "lg:col-span-9",
+      10: "lg:col-span-10",
+      11: "lg:col-span-11",
+      12: "lg:col-span-12",
+    };
+
+    // Add base column span
+    classes.push(spanClasses[colSpan] || "col-span-12");
+
+    // Add responsive spans if different from base
+    if (smColSpan !== colSpan) {
+      classes.push(smSpanClasses[smColSpan] || `sm:col-span-${smColSpan}`);
+    }
+
+    if (lgColSpan !== colSpan) {
+      classes.push(lgSpanClasses[lgColSpan] || `lg:col-span-${lgColSpan}`);
+    }
+
+    return classes.join(" ");
+  };
+
+  const renderFieldContent = (field: FormField<T>) => {
+    const formProps = register(fieldName);
+    const inputClasses = cn(
+      "transition-all duration-200 focus:ring-2 focus:ring-primary/20",
+      hasError && "border-destructive focus:ring-destructive/20"
+    );
+
+    switch (field.type) {
+      case "text":
+        return (
+          <Input
+            id={field.name as string}
+            placeholder={field.placeholder}
+            disabled={field.disabled || isLoading || isSubmitting}
+            autoComplete={field.autoComplete}
+            className={inputClasses}
+            {...formProps}
+          />
+        );
+
+      case "textarea":
+        return (
+          <Textarea
+            id={field.name as string}
+            placeholder={field.placeholder}
+            disabled={field.disabled || isLoading || isSubmitting}
+            rows={field.rows || 4}
+            className={cn(inputClasses, "resize-none")}
+            {...formProps}
+          />
+        );
+
+      case "number":
+        return (
+          <Input
+            id={field.name as string}
+            type="number"
+            placeholder={field.placeholder}
+            disabled={field.disabled || isLoading || isSubmitting}
+            min={field?.min}
+            max={field?.max}
+            step={field?.step}
+            className={inputClasses}
+            {...formProps}
+          />
+        );
+
+      case "password":
+        return (
+          <Input
+            id={field.name as string}
+            type="password"
+            placeholder={field.placeholder}
+            disabled={field.disabled || isLoading || isSubmitting}
+            autoComplete={field.autoComplete}
+            className={inputClasses}
+            {...formProps}
+          />
+        );
+
+      case "switch":
+        return (
+          <div className="flex items-center space-x-2">
+            <Switch
+              id={field.name as string}
+              disabled={field.disabled || isLoading || isSubmitting}
+              checked={fieldValue as boolean}
+              onCheckedChange={(checked) => {
+                setValue(fieldName, checked as any);
+                field.onChange?.(checked);
+              }}
+            />
+          </div>
+        );
+
+      case "checkbox":
+        return (
+          <Checkbox
+            id={field.name as string}
+            disabled={field.disabled || isLoading || isSubmitting}
+            checked={fieldValue as boolean}
+            onCheckedChange={(checked) => {
+              setValue(fieldName, checked as any);
+              field.onChange?.(checked);
+            }}
+          />
+        );
+
+      case "select":
+        return (
+          <Select
+            value={(fieldValue as string) || undefined}
+            onValueChange={(value) => {
+              setValue(fieldName, value as any);
+              field.onChange?.(value);
+            }}
+            disabled={field.disabled || isLoading || isSubmitting}>
+            <SelectTrigger className={cn("w-full", inputClasses)}>
+              <SelectValue placeholder={field.placeholder} />
+            </SelectTrigger>
+            <SelectContent
+              onScroll={onScroll}
+              className="max-h-60 overflow-y-auto">
+              {field.options?.map((option) => (
+                <SelectItem
+                  key={option.value}
+                  value={option.value}
+                  disabled={option.disabled}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        );
+
+      case "multiselect":
+        return (
+          <MultiSelect
+            options={field.options || []}
+            value={fieldValue as string[]}
+            onValueChange={(value) => {
+              setValue(fieldName, value as any);
+              field.onChange?.(value);
+            }}
+            placeholder={field.placeholder}
+            disabled={field.disabled || isLoading || isSubmitting}
+            className={inputClasses}
+          />
+        );
+
+      case "date":
+        return (
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                className={cn(
+                  "w-full justify-start text-left font-normal transition-all duration-200",
+                  !fieldValue && "text-muted-foreground",
+                  inputClasses
+                )}
+                disabled={field.disabled || isLoading || isSubmitting}>
+                <CalendarIcon className="mr-2 h-4 w-4" />
+                {fieldValue ? (
+                  format(fieldValue as Date, "PPP")
+                ) : (
+                  <span>{field.placeholder || "Pick a date"}</span>
+                )}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto p-0" align="start">
+              <Calendar
+                mode="single"
+                selected={fieldValue as Date}
+                onSelect={(date) => {
+                  setValue(fieldName, date as any);
+                  field.onChange?.(date);
+                }}
+                disabled={field.disabled || isLoading || isSubmitting}
+                initialFocus
+              />
+            </PopoverContent>
+          </Popover>
+        );
+
+      // ... rest of your switch cases remain the same
+      case "radio":
+        return (
+          <RadioGroup
+            value={fieldValue as string}
+            onValueChange={(value) => {
+              setValue(fieldName, value as any);
+              field.onChange?.(value);
+            }}
+            disabled={field.disabled || isLoading || isSubmitting}
+            className={cn(
+              field.orientation === "horizontal"
+                ? "flex space-x-4"
+                : "space-y-3",
+              "mt-2"
+            )}>
+            {field.data?.map((option: any) => (
+              <div key={option.value} className="flex items-center space-x-2">
+                <RadioGroupItem
+                  value={option.value}
+                  id={`${String(field.name)}-${option.value}`}
+                />
+                <Label
+                  htmlFor={`${String(field.name)}-${option.value}`}
+                  className="font-normal cursor-pointer">
+                  {option.label}
+                </Label>
+              </div>
+            )) ||
+              field.options?.map((option) => (
+                <div key={option.value} className="flex items-center space-x-2">
+                  <RadioGroupItem
+                    value={option.value}
+                    id={`${String(field.name)}-${option.value}`}
+                  />
+                  <Label
+                    htmlFor={`${String(field.name)}-${option.value}`}
+                    className="font-normal cursor-pointer">
+                    {option.label}
+                  </Label>
+                </div>
+              ))}
+          </RadioGroup>
+        );
+
+      case "rating":
+        return (
+          <StarRating
+            value={fieldValue as number}
+            onChange={(rating) => {
+              setValue(fieldName, rating as any);
+              field.onChange?.(rating);
+            }}
+            maxRating={field.count || 5}
+            disabled={field.disabled || isLoading || isSubmitting}
+            labels={field.labels}
+            language={field.language || "en"}
+            size={field.size || "md"}
+            showLabels={field.showLabels !== false}
+            className={inputClasses}
+          />
+        );
+
+      case "habesha-date":
+        // Ensure we have a valid Date object or undefined
+        const dateValue = (() => {
+          if (
+            fieldValue &&
+            typeof fieldValue === "object" &&
+            fieldValue.constructor === Date &&
+            !isNaN((fieldValue as Date).getTime())
+          ) {
+            return fieldValue as Date;
+          }
+          if (fieldValue && typeof fieldValue === "string") {
+            const parsed = new Date(fieldValue);
+            return !isNaN(parsed.getTime()) ? parsed : undefined;
+          }
+          return undefined;
+        })();
+
+        return (
+          <HabeshaDatePicker
+            value={dateValue}
+            onChange={(date) => {
+              setValue(fieldName, date as any);
+              field.onChange?.(date);
+            }}
+            placeholder={field.placeholder}
+            disabled={field.disabled || isLoading || isSubmitting}
+            language={field.language || "am"}
+            className={inputClasses}
+          />
+        );
+
+      case "year-picker":
+        return (
+          <YearPicker
+            value={fieldValue as number}
+            onChange={(year) => {
+              setValue(fieldName, year as any);
+              field.onChange?.(year);
+            }}
+            placeholder={field.placeholder}
+            disabled={field.disabled || isLoading || isSubmitting}
+            calendarType={field.calendarType || "habesha"}
+            language={field.language || "am"}
+            minYear={field.minYear}
+            maxYear={field.maxYear}
+            className={inputClasses}
+          />
+        );
+
+      // ... other cases remain unchanged
+
+      default:
+        return null;
+    }
+  };
+
+  const fieldKey = field.name as string;
+  const gridClasses = getGridClasses();
+  const isCheckable = field.type === "checkbox" || field.type === "switch";
+
+  return (
+    <motion.div
+      key={fieldKey}
+      variants={itemVariants}
+      className={cn(gridClasses, field.className, "flex flex-col gap-2 group")}>
+      {isCheckable ? (
+        <div
+          className={cn(
+            "flex flex-row items-start space-x-3 space-y-0 rounded-lg border p-4 transition-all duration-200 hover:bg-muted/30",
+            hasError
+              ? "border-destructive/50 bg-destructive/5"
+              : "border-border"
+          )}>
+          {renderFieldContent(field)}
+          <div className="space-y-1 leading-none cursor-pointer">
+            <Label
+              htmlFor={field.name as string}
+              className="cursor-pointer font-medium">
+              {field.label}
+              {field.required && (
+                <span className="text-destructive ml-1">*</span>
+              )}
+            </Label>
+            {field.description && (
+              <p className="text-sm text-muted-foreground">
+                {field.description}
+              </p>
+            )}
+          </div>
+        </div>
+      ) : (
+        <>
+          <div className="flex justify-between items-baseline">
+            <Label
+              htmlFor={field.name as string}
+              className="text-sm font-medium text-foreground/80 group-focus-within:text-primary transition-colors">
+              {field.label}
+              {field.required && (
+                <span className="text-destructive ml-1">*</span>
+              )}
+            </Label>
+          </div>
+          {field.description && (
+            <p className="text-xs text-muted-foreground -mt-1 mb-1">
+              {field.description}
+            </p>
+          )}
+          {renderFieldContent(field)}
+        </>
+      )}
+
+      <AnimatePresence mode="wait">
+        {hasError && (
+          <motion.div
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            className="flex items-center text-sm font-medium text-destructive mt-1">
+            <AlertCircle className="w-4 h-4 mr-1.5" />
+            {errors[fieldName]?.message as string}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </motion.div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/utils/RichTextViewer.tsx b/apps/edr-freight-web/backoffice/src/performance-management/utils/RichTextViewer.tsx
new file mode 100644
index 000000000..3857471e8
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/utils/RichTextViewer.tsx
@@ -0,0 +1,148 @@
+// @ts-ignore - Tiptap type declarations issue
+import { useEditor, EditorContent } from "@tiptap/react";
+// @ts-ignore - Tiptap type declarations issue
+import StarterKit from "@tiptap/starter-kit";
+// @ts-ignore - Tiptap type declarations issue
+import Underline from "@tiptap/extension-underline";
+// @ts-ignore - Tiptap type declarations issue
+import Link from "@tiptap/extension-link";
+// @ts-ignore - Tiptap type declarations issue
+import TextAlign from "@tiptap/extension-text-align";
+// @ts-ignore - Tiptap type declarations issue
+import Image from "@tiptap/extension-image";
+// @ts-ignore - Tiptap type declarations issue
+import { Color } from "@tiptap/extension-color";
+// @ts-ignore - Tiptap type declarations issue
+import { TextStyle } from "@tiptap/extension-text-style";
+// @ts-ignore - Tiptap type declarations issue
+import Highlight from "@tiptap/extension-highlight";
+import { useEffect } from "react";
+import { cn } from "@/shared/lib/utils";
+
+interface RichTextViewerProps {
+  content: string;
+  minHeight?: number;
+  className?: string;
+  variant?: "default" | "minimal" | "bordered";
+}
+
+const RichTextViewer = ({
+  content,
+  minHeight = 200,
+  className,
+  variant = "default",
+}: RichTextViewerProps) => {
+  // @ts-ignore - Tiptap type declarations issue
+  const extensions = [
+    // @ts-ignore
+    StarterKit.configure({
+      heading: {
+        levels: [1, 2, 3],
+      },
+    }),
+    // @ts-ignore
+    Underline.configure(),
+    // @ts-ignore
+    TextStyle.configure(),
+    // @ts-ignore
+    Highlight.configure({ multicolor: true }),
+    // @ts-ignore
+    Color.configure(),
+    // @ts-ignore
+    Link.configure({
+      openOnClick: false,
+      HTMLAttributes: {
+        rel: "noopener noreferrer",
+        target: "_blank",
+        class: "text-blue-600 hover:text-blue-800 underline",
+      },
+    }),
+    // @ts-ignore
+    TextAlign.configure({
+      types: ["heading", "paragraph"],
+      alignments: ["left", "center", "right", "justify"],
+    }),
+    // @ts-ignore
+    Image.configure({
+      inline: true,
+      allowBase64: true,
+      HTMLAttributes: {
+        class: "rounded-md max-w-full h-auto",
+      },
+    }),
+  ];
+
+  const editor = useEditor({
+    extensions,
+    content,
+    editable: false,
+  });
+
+  useEffect(() => {
+    if (editor && content !== editor.getHTML()) {
+      editor.commands.setContent(content);
+    }
+  }, [content, editor]);
+
+  if (!editor) {
+    return (
+      <div
+        className={cn(
+          "animate-pulse bg-gray-200 rounded-md",
+          "dark:bg-gray-700",
+          className
+        )}
+        style={{ minHeight: `${minHeight}px` }}
+      />
+    );
+  }
+
+  const variantStyles = {
+    default:
+      "border border-gray-200 rounded-md bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900",
+    minimal: "bg-transparent",
+    bordered: "border border-gray-200 rounded-md dark:border-gray-700",
+  };
+
+  return (
+    <div
+      className={cn(variantStyles[variant], className)}
+      style={{ minHeight: `${minHeight}px` }}>
+      <EditorContent
+        editor={editor}
+        className={cn(
+          "px-6 py-4 min-h-[200px]",
+          // Base typography styles
+          "[&_.tiptap]:outline-none",
+          "[&_.tiptap_h1]:text-2xl [&_.tiptap_h1]:font-bold [&_.tiptap_h1]:my-4",
+          "[&_.tiptap_h2]:text-xl [&_.tiptap_h2]:font-bold [&_.tiptap_h2]:my-3",
+          "[&_.tiptap_h3]:text-lg [&_.tiptap_h3]:font-bold [&_.tiptap_h3]:my-2",
+          "[&_.tiptap_p]:my-2 [&_.tiptap_p]:leading-relaxed",
+          "[&_.tiptap_ul]:my-2 [&_.tiptap_ul]:list-disc [&_.tiptap_ul]:pl-6",
+          "[&_.tiptap_ol]:my-2 [&_.tiptap_ol]:list-decimal [&_.tiptap_ol]:pl-6",
+          "[&_.tiptap_li]:my-1",
+          "[&_.tiptap_blockquote]:border-l-4 [&_.tiptap_blockquote]:border-gray-300",
+          "[&_.tiptap_blockquote]:pl-4 [&_.tiptap_blockquote]:italic [&_.tiptap_blockquote]:my-2",
+          "[&_.tiptap_code]:bg-gray-100 [&_.tiptap_code]:px-1 [&_.tiptap_code]:rounded",
+          "[&_.tiptap_code]:text-sm dark:[&_.tiptap_code]:bg-gray-800",
+          "[&_.tiptap_pre]:bg-gray-900 [&_.tiptap_pre]:text-white [&_.tiptap_pre]:p-4",
+          "[&_.tiptap_pre]:rounded-md [&_.tiptap_pre]:my-2 dark:[&_.tiptap_pre]:bg-gray-800",
+          "[&_.tiptap_strong]:font-bold",
+          "[&_.tiptap_em]:italic",
+          "[&_.tiptap_underline]:underline",
+          "[&_.tiptap_highlight]:bg-yellow-200 dark:[&_.tiptap_highlight]:bg-yellow-800",
+          "[&_.tiptap_table]:border-collapse [&_.tiptap_table]:border [&_.tiptap_table]:border-gray-300",
+          "[&_.tiptap_th]:bg-gray-100 [&_.tiptap_th]:p-2 dark:[&_.tiptap_th]:bg-gray-800",
+          "[&_.tiptap_td]:p-2 [&_.tiptap_td]:border [&_.tiptap_td]:border-gray-300",
+          "dark:[&_.tiptap_td]:border-gray-700",
+          "[&_.tiptap_img]:rounded-md [&_.tiptap_img]:max-w-full [&_.tiptap_img]:h-auto",
+          // Dark mode support
+          "dark:[&_.tiptap]:text-gray-100",
+          "dark:[&_.tiptap_blockquote]:border-gray-600"
+        )}
+      />
+    </div>
+  );
+};
+
+export default RichTextViewer;
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/utils/dashboardUtils.ts b/apps/edr-freight-web/backoffice/src/performance-management/utils/dashboardUtils.ts
new file mode 100644
index 000000000..2a366061c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/utils/dashboardUtils.ts
@@ -0,0 +1,93 @@
+import { MetabaseDashboard } from "../services/api/metabaseService";
+
+/**
+ * Utility functions for Metabase dashboard management
+ */
+
+/**
+ * Find dashboard by metabase dashboard number
+ */
+export const findDashboardByNumber = (
+  dashboards: MetabaseDashboard[],
+  dashboardNumber: number
+): MetabaseDashboard | undefined => {
+  return dashboards.find((d) => d.metabaseDashboardNumber === dashboardNumber);
+};
+
+/**
+ * Display-only labels for permitted Metabase dashboards.
+ */
+export const formatDashboardDisplayName = (name: string): string => {
+  if (!name?.trim()) return name;
+
+  return name
+    .replace(/position\s+performance/gi, "Team Leader Performance")
+    .replace(/employee\s+performance/gi, "Expert Performance")
+    .replace(/^position$/i, "Team Leader")
+    .replace(/^employee$/i, "Expert");
+};
+
+export const getFormattedDashboardLabel = (
+  name: string | { en?: string; am?: string } | undefined,
+  locale: "en" | "am" = "en",
+): string => {
+  if (!name) return "Dashboard";
+
+  const raw =
+    typeof name === "string"
+      ? name
+      : (locale === "am" ? name.am : name.en) || name.en || name.am || "Dashboard";
+
+  return formatDashboardDisplayName(raw);
+};
+
+/**
+ * Get dashboard display name (prefers English, falls back to Amharic)
+ */
+export const getDashboardDisplayName = (
+  dashboard: MetabaseDashboard,
+): string => {
+  const raw =
+    dashboard.name.en ||
+    dashboard.name.am ||
+    `Dashboard #${dashboard.metabaseDashboardNumber}`;
+
+  return formatDashboardDisplayName(raw);
+};
+
+/**
+ * Get dashboard description (prefers English, falls back to Amharic)
+ */
+export const getDashboardDescription = (
+  dashboard: MetabaseDashboard
+): string => {
+  return dashboard.description.en || dashboard.description.am || "";
+};
+
+/**
+ * Check if dashboard has parameters
+ */
+export const hasParameters = (dashboard: MetabaseDashboard): boolean => {
+  return dashboard.params && dashboard.params.length > 0;
+};
+
+/**
+ * Sort dashboards by dashboard number
+ */
+export const sortDashboardsByNumber = (
+  dashboards: MetabaseDashboard[]
+): MetabaseDashboard[] => {
+  return [...dashboards].sort(
+    (a, b) => a.metabaseDashboardNumber - b.metabaseDashboardNumber
+  );
+};
+
+/**
+ * Filter dashboards by tenant ID
+ */
+export const filterDashboardsByTenant = (
+  dashboards: MetabaseDashboard[],
+  tenantId: string
+): MetabaseDashboard[] => {
+  return dashboards.filter((d) => d.tenantId === tenantId);
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/utils/data-measurement-unit.ts b/apps/edr-freight-web/backoffice/src/performance-management/utils/data-measurement-unit.ts
new file mode 100644
index 000000000..8a451eae6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/utils/data-measurement-unit.ts
@@ -0,0 +1,11 @@
+enum DateMeasurementUnit {
+  MINUTES = "minute",
+  HOURS = "hour",
+  DAY = "day",
+  WEEKS = "weeks",
+  YEAR = "year",
+  MONTH = "month",
+  SECOND = "second",
+}
+
+export default DateMeasurementUnit;
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/utils/date-utils.ts b/apps/edr-freight-web/backoffice/src/performance-management/utils/date-utils.ts
new file mode 100644
index 000000000..469873ade
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/utils/date-utils.ts
@@ -0,0 +1,29 @@
+//
+export const formatDateForApi = (date: Date): string => {
+  const mm = String(date.getMonth() + 1).padStart(2, "0");
+  const dd = String(date.getDate()).padStart(2, "0");
+  const yyyy = date.getFullYear();
+  return `${mm}/${dd}/${yyyy}`;
+};
+
+export const getDefaultStartDate = (daysAgo: number = 30): Date => {
+  const today = new Date();
+  today.setDate(today.getDate() - daysAgo);
+  return today;
+};
+
+export const getDateRange = (range: "week" | "month" | "quarter"): Date => {
+  const today = new Date();
+  switch (range) {
+    case "week":
+      today.setDate(today.getDate() - 7);
+      break;
+    case "month":
+      today.setDate(today.getDate() - 30);
+      break;
+    case "quarter":
+      today.setDate(today.getDate() - 90);
+      break;
+  }
+  return today;
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/utils/ethiopianMonthCalculator.ts b/apps/edr-freight-web/backoffice/src/performance-management/utils/ethiopianMonthCalculator.ts
new file mode 100644
index 000000000..78b09d3ef
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/utils/ethiopianMonthCalculator.ts
@@ -0,0 +1,422 @@
+/**
+ * Ethiopian Calendar Month Calculator
+ * Maps Ethiopian months to Gregorian months and calculates available months based on date ranges
+ */
+
+// Ethiopian months mapping to Gregorian months
+// Ethiopian calendar: Meskerem (1) - Pagume (13)
+// Gregorian mapping: Sep (9) - Aug (8) of next year
+// Amharic month names have multiple accepted spellings (e.g. ሚያዝያ vs ሚያዚያ,
+// ነሐሴ vs ነሃሴ). Each entry lists every spelling we have seen from the backend
+// so the parser does not silently fall back to month=1.
+const ETHIOPIAN_MONTHS = [
+  {
+    ethMonth: 1,
+    name: "Meskerem",
+    amharicNames: ["መስከረም"],
+    abbr: "MES",
+    gregMonth: 9,
+    gregMonthName: "September",
+  },
+  {
+    ethMonth: 2,
+    name: "Tekemt",
+    amharicNames: ["ጥቅምት"],
+    abbr: "TEK",
+    gregMonth: 10,
+    gregMonthName: "October",
+  },
+  {
+    ethMonth: 3,
+    name: "Hedar",
+    amharicNames: ["ኅዳር", "ህዳር", "ሕዳር"],
+    abbr: "HED",
+    gregMonth: 11,
+    gregMonthName: "November",
+  },
+  {
+    ethMonth: 4,
+    name: "Tahsas",
+    amharicNames: ["ታኅሣሥ", "ታህሳስ", "ታህሳሥ"],
+    abbr: "TAH",
+    gregMonth: 12,
+    gregMonthName: "December",
+  },
+  {
+    ethMonth: 5,
+    name: "Tir",
+    amharicNames: ["ጥር"],
+    abbr: "TIR",
+    gregMonth: 1,
+    gregMonthName: "January",
+  },
+  {
+    ethMonth: 6,
+    name: "Yekatit",
+    amharicNames: ["የካቲት"],
+    abbr: "YEK",
+    gregMonth: 2,
+    gregMonthName: "February",
+  },
+  {
+    ethMonth: 7,
+    name: "Megabit",
+    amharicNames: ["መጋቢት"],
+    abbr: "MEG",
+    gregMonth: 3,
+    gregMonthName: "March",
+  },
+  {
+    ethMonth: 8,
+    name: "Miazia",
+    amharicNames: ["ሚያዝያ", "ሚያዚያ"],
+    abbr: "MIA",
+    gregMonth: 4,
+    gregMonthName: "April",
+  },
+  {
+    ethMonth: 9,
+    name: "Genbot",
+    amharicNames: ["ግንቦት"],
+    abbr: "GEN",
+    gregMonth: 5,
+    gregMonthName: "May",
+  },
+  {
+    ethMonth: 10,
+    name: "Sene",
+    amharicNames: ["ሰኔ"],
+    abbr: "SEN",
+    gregMonth: 6,
+    gregMonthName: "June",
+  },
+  {
+    ethMonth: 11,
+    name: "Hamle",
+    amharicNames: ["ሐምሌ", "ሃምሌ"],
+    abbr: "HAM",
+    gregMonth: 7,
+    gregMonthName: "July",
+  },
+  {
+    ethMonth: 12,
+    name: "Nehase",
+    amharicNames: ["ነሐሴ", "ነሃሴ"],
+    abbr: "NEH",
+    gregMonth: 8,
+    gregMonthName: "August",
+  },
+  {
+    ethMonth: 13,
+    name: "Pagume",
+    amharicNames: ["ጳጉሜ", "ጳጉሜን"],
+    abbr: "PAG",
+    gregMonth: 9,
+    gregMonthName: "September (next year)",
+  },
+];
+
+// Gregorian to Ethiopian month mapping (for reverse lookup)
+const GREGORIAN_TO_ETHIOPIAN: { [key: number]: number } = {
+  9: 1, // September -> Meskerem
+  10: 2, // October -> Tekemt
+  11: 3, // November -> Hedar
+  12: 4, // December -> Tahsas
+  1: 5, // January -> Tir
+  2: 6, // February -> Yekatit
+  3: 7, // March -> Megabit
+  4: 8, // April -> Miazia
+  5: 9, // May -> Genbot
+  6: 10, // June -> Sene
+  7: 11, // July -> Hamle
+  8: 12, // August -> Nehase
+};
+
+// Gregorian month keys used in the API (Jul-Jun cycle)
+const GREGORIAN_MONTH_KEYS = [
+  "jul",
+  "aug",
+  "sep",
+  "oct",
+  "nov",
+  "dec",
+  "jan",
+  "feb",
+  "mar",
+  "apr",
+  "may",
+  "jun",
+];
+
+export const monthsConfig: MonthConfig[] = [
+  {
+    key: "jul",
+    name: "July",
+    abbr: "JUL",
+    index: 1,
+    apiKey: "planned_jul",
+    value: 11,
+  },
+  {
+    key: "aug",
+    name: "August",
+    abbr: "AUG",
+    index: 2,
+    apiKey: "planned_aug",
+    value: 12,
+  },
+  {
+    key: "sep",
+    name: "September",
+    abbr: "SEP",
+    index: 3,
+    apiKey: "planned_sep",
+    value: 1,
+  },
+  {
+    key: "oct",
+    name: "October",
+    abbr: "OCT",
+    index: 4,
+    apiKey: "planned_oct",
+    value: 2,
+  },
+  {
+    key: "nov",
+    name: "November",
+    abbr: "NOV",
+    index: 5,
+    apiKey: "planned_nov",
+    value: 3,
+  },
+  {
+    key: "dec",
+    name: "December",
+    abbr: "DEC",
+    index: 6,
+    apiKey: "planned_dec",
+    value: 4,
+  },
+  {
+    key: "jan",
+    name: "January",
+    abbr: "JAN",
+    index: 7,
+    apiKey: "planned_jan",
+    value: 5,
+  },
+  {
+    key: "feb",
+    name: "February",
+    abbr: "FEB",
+    index: 8,
+    apiKey: "planned_feb",
+    value: 6,
+  },
+  {
+    key: "mar",
+    name: "March",
+    abbr: "MAR",
+    index: 9,
+    apiKey: "planned_mar",
+    value: 7,
+  },
+  {
+    key: "apr",
+    name: "April",
+    abbr: "APR",
+    index: 10,
+    apiKey: "planned_apr",
+    value: 8,
+  },
+  {
+    key: "may",
+    name: "May",
+    abbr: "MAY",
+    index: 11,
+    apiKey: "planned_may",
+    value: 9,
+  },
+  {
+    key: "jun",
+    name: "June",
+    abbr: "JUN",
+    index: 12,
+    apiKey: "planned_jun",
+    value: 10,
+  },
+];
+
+interface MonthConfig {
+  key: string;
+  name: string;
+  abbr: string;
+  index: number;
+  apiKey: string;
+  value: number;
+  ethMonth?: number;
+  ethMonthName?: string;
+}
+
+/**
+ * Parse Ethiopian date string. Supports both:
+ *   "ሚያዚያ 01/2018 - 09:00 ሌሊት"   (slash between day and year)
+ *   "ታኅሣሥ 06: 2018 - 12:51 ማታ"   (legacy: colon between day and year)
+ */
+export const parseEthiopianDateString = (
+  dateStr: string
+): { year: number; month: number; day: number } | null => {
+  try {
+    const trimmed = dateStr.trim();
+
+    // Match "<MonthName> <DD><sep><YYYY>" where <sep> is "/" or ":"
+    const match = trimmed.match(/^(\S+)\s+(\d+)\s*[\/:]\s*(\d+)/);
+    if (!match) return null;
+
+    const [, monthName, dayStr, yearStr] = match;
+    const monthConfig = ETHIOPIAN_MONTHS.find(
+      (m) => m.name === monthName || m.amharicNames.includes(monthName)
+    );
+
+    if (!monthConfig) {
+      console.warn(
+        `Unknown Ethiopian month name "${monthName}" in "${dateStr}"`
+      );
+    }
+
+    return {
+      year: parseInt(yearStr),
+      month: monthConfig?.ethMonth || 1,
+      day: parseInt(dayStr),
+    };
+  } catch (error) {
+    console.error("Error parsing Ethiopian date:", error);
+    return null;
+  }
+};
+
+/**
+ * Calculate available months based on start and end dates
+ * Returns filtered monthsConfig with only available months
+ */
+export const calculateAvailableMonths = (
+  startDateStr: string,
+  endDateStr: string,
+  allMonthsConfig: MonthConfig[]
+): MonthConfig[] => {
+  try {
+    const startDate = parseEthiopianDateString(startDateStr);
+    const endDate = parseEthiopianDateString(endDateStr);
+
+    if (!startDate || !endDate) {
+      console.warn("Could not parse dates, returning all months");
+      return allMonthsConfig;
+    }
+
+    console.log("Start Date (Ethiopian):", startDate);
+    console.log("End Date (Ethiopian):", endDate);
+
+    // If same year, filter months between start and end
+    if (startDate.year === endDate.year) {
+      return allMonthsConfig.filter((month) => {
+        const monthNum = month.value; // value represents Ethiopian month number
+        return monthNum >= startDate.month && monthNum <= endDate.month;
+      });
+    }
+
+    // If spanning multiple years, include all months from start to end
+    // This handles cases where the plan spans across Ethiopian year boundary
+    return allMonthsConfig.filter((month) => {
+      const monthNum = month.value;
+
+      // Include months from start month onwards in start year
+      if (monthNum >= startDate.month) {
+        return true;
+      }
+
+      // Include months up to end month in end year
+      if (monthNum <= endDate.month) {
+        return true;
+      }
+
+      return false;
+    });
+  } catch (error) {
+    console.error("Error calculating available months:", error);
+    return allMonthsConfig;
+  }
+};
+
+/**
+ * Filter months config to only include months that have employee plans
+ * @param allMonthsConfig - All available months
+ * @param employeePlanMonths - Array of month numbers from employee plans
+ * @returns Filtered months config
+ */
+export const filterMonthsByEmployeePlans = (
+  allMonthsConfig: MonthConfig[],
+  employeePlanMonths: number[]
+): MonthConfig[] => {
+  console.log("filterMonthsByEmployeePlans called with:", {
+    allMonthsConfigLength: allMonthsConfig.length,
+    employeePlanMonths,
+    monthValues: allMonthsConfig.map((m) => ({ key: m.key, value: m.value })),
+  });
+
+  if (!employeePlanMonths || employeePlanMonths.length === 0) {
+    console.log("No employee plan months provided, returning all months");
+    return allMonthsConfig;
+  }
+
+  const filtered = allMonthsConfig.filter((month) => {
+    const matches = employeePlanMonths.includes(month.value);
+    console.log(
+      `Month ${month.key} (value: ${month.value}) matches: ${matches}`
+    );
+    return matches;
+  });
+
+  console.log(
+    "Filtered result:",
+    filtered.map((m) => ({ key: m.key, value: m.value }))
+  );
+  return filtered;
+};
+
+/**
+ * Get month config with Ethiopian month information
+ */
+export const getEnhancedMonthsConfig = (
+  baseConfig: MonthConfig[]
+): MonthConfig[] => {
+  return baseConfig.map((month) => {
+    const ethMonth = ETHIOPIAN_MONTHS.find(
+      (em) =>
+        em.gregMonth === parseInt(month.name.substring(0, 2)) ||
+        em.abbr === month.abbr
+    );
+    return {
+      ...month,
+      ethMonth: ethMonth?.ethMonth,
+      ethMonthName: ethMonth?.name,
+    };
+  });
+};
+
+/**
+ * Convert Gregorian month number to Ethiopian month number
+ */
+export const gregMonthToEthMonth = (gregMonth: number): number => {
+  return GREGORIAN_TO_ETHIOPIAN[gregMonth] || 1;
+};
+
+/**
+ * Get month name in both Gregorian and Ethiopian
+ */
+export const getMonthDisplayName = (monthKey: string): string => {
+  const monthIndex = GREGORIAN_MONTH_KEYS.indexOf(monthKey);
+  if (monthIndex === -1) return monthKey;
+
+  const ethMonth = ETHIOPIAN_MONTHS[monthIndex];
+  return `${monthKey.toUpperCase()} (${ethMonth.name})`;
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/utils/form-field-types.tsx b/apps/edr-freight-web/backoffice/src/performance-management/utils/form-field-types.tsx
new file mode 100644
index 000000000..55bded047
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/utils/form-field-types.tsx
@@ -0,0 +1,99 @@
+
+export type FormFieldType =
+  | "text"
+  | "textarea"
+  | "switch"
+  | "number"
+  | "checkbox"
+  | "select"
+  | "multiselect"
+  | "password"
+  | "date"
+  | "datetime"
+  | "dateinput"
+  | "time"
+  | "radio"
+  | "file"
+  | "color"
+  | "slider"
+  | "segmented"
+  | "native-select"
+  | "json"
+  | "rating"
+  | "autocomplete"
+  | "richtext";
+
+interface BaseFormField<T> {
+  name: keyof T;
+  label: string;
+  description?: string;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  hidden?: boolean;
+  className?: string;
+  wrapperProps?: Record<string, unknown>;
+  data?: any;
+  clearable?: any;
+}
+
+interface RichTextFormField<T> extends BaseFormField<T> {
+  type: "richtext";
+  minHeight?: number;
+  withTypography?: boolean;
+  withLinks?: boolean;
+  withImages?: boolean;
+  withTextAlignment?: boolean;
+  withColor?: boolean;
+  withHighlight?: boolean;
+}
+
+type SpecificFormField<T> =
+  | (BaseFormField<T> & { type: "text" })
+  | (BaseFormField<T> & { type: "textarea" })
+  | (BaseFormField<T> & { type: "switch" })
+  | (BaseFormField<T> & { type: "number" })
+  | (BaseFormField<T> & { type: "checkbox" })
+  | (BaseFormField<T> & { type: "select" })
+  | (BaseFormField<T> & { type: "multiselect" })
+  | (BaseFormField<T> & { type: "password" })
+  | (BaseFormField<T> & { type: "date" })
+  | (BaseFormField<T> & { type: "datetime" })
+  | (BaseFormField<T> & { type: "dateinput" })
+  | (BaseFormField<T> & { type: "time" })
+  | (BaseFormField<T> & { type: "radio" })
+  | (BaseFormField<T> & { type: "file" })
+  | (BaseFormField<T> & { type: "color" })
+  | (BaseFormField<T> & { type: "slider" })
+  | (BaseFormField<T> & { type: "segmented" })
+  | (BaseFormField<T> & { type: "native-select" })
+  | (BaseFormField<T> & { type: "json" })
+  | (BaseFormField<T> & { type: "rating" })
+  | (RichTextFormField<T> & { type: "richtext" })
+  | (BaseFormField<T> & { type: "autocomplete" });
+
+export type FormField<T> = SpecificFormField<T>;
+
+// Updated GenericFormProps to work with our shadcn/Tailwind useGenericForm
+export interface GenericFormProps<T> {
+  form: {
+    values: T;
+    setValues: (values: Partial<T>) => void;
+    errors: Record<string, string>;
+    setError: (field: keyof T, message: string) => void;
+    validate: () => boolean;
+    reset: () => void;
+    fields: FormField<T>[];
+  };
+  fields: FormField<T>[];
+  onSubmit: (values: T) => Promise<void> | void;
+  onCancel?: () => void;
+  isLoading?: boolean;
+  isSubmitting?: boolean;
+  submitButtonText?: string;
+  cancelButtonText?: string;
+  successMessage?: string;
+  errorMessage?: string;
+  customButtons?: React.ReactNode;
+  resetOnSuccess?: boolean;
+}
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/utils/generic-form.tsx b/apps/edr-freight-web/backoffice/src/performance-management/utils/generic-form.tsx
new file mode 100644
index 000000000..356b89fbd
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/utils/generic-form.tsx
@@ -0,0 +1,462 @@
+import { useState, useEffect } from "react";
+import { FieldValues } from "react-hook-form";
+import { motion, Variants } from "framer-motion";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/shared/common/ui/card";
+import { Badge } from "@/shared/common/ui/badge";
+import { useToast } from "@/shared/common/ui/use-toast";
+import { Loader2, Check, ArrowLeft, Shield, Edit } from "lucide-react";
+import { FormField, GenericFormProps } from "./shared-field-types";
+import { FormFieldRenderer } from "./FormFieldRenderer";
+import { cn } from "@/shared/lib/utils";
+import { useInfiniteQuery } from "@tanstack/react-query";
+
+const containerVariants: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.08,
+      duration: 0.6,
+    },
+  },
+};
+
+const sectionVariants: Variants = {
+  hidden: {
+    opacity: 0,
+    y: 20,
+    scale: 0.98,
+  },
+  visible: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: {
+      type: "spring" as const,
+      stiffness: 100,
+      damping: 15,
+      duration: 0.5,
+    },
+  },
+};
+
+const buttonVariants: Variants = {
+  hidden: { opacity: 0, x: 20 },
+  visible: {
+    opacity: 1,
+    x: 0,
+    transition: {
+      type: "spring",
+      stiffness: 200,
+      damping: 20,
+    },
+  },
+  hover: {
+    scale: 1.02,
+    transition: {
+      type: "spring",
+      stiffness: 400,
+      damping: 10,
+    },
+  },
+  tap: {
+    scale: 0.98,
+  },
+};
+
+// Section icons mapping
+const sectionIcons: Record<string, React.ElementType> = {
+  "Basic Information": Shield,
+  Organization: Shield,
+  "Plan Details": Edit,
+  default: Edit,
+};
+
+// Section color themes
+const sectionThemes: Record<
+  string,
+  { gradient: string; border: string; bg: string }
+> = {
+  "Basic Information": {
+    gradient: "from-green-500 to-emerald-500",
+    border: "border-green-200/50",
+    bg: "bg-green-50/30",
+  },
+  Organization: {
+    gradient: "from-purple-500 to-pink-500",
+    border: "border-purple-200/50",
+    bg: "bg-purple-50/30",
+  },
+  "Plan Details": {
+    gradient: "from-emerald-500 to-teal-500",
+    border: "border-emerald-200/50",
+    bg: "bg-emerald-50/30",
+  },
+  default: {
+    gradient: "from-gray-500 to-slate-500",
+    border: "border-gray-200/50",
+    bg: "bg-gray-50/30",
+  },
+};
+
+// Get grid column class based on field type and context
+const getGridClasses = (field: FormField<any>) => {
+  // For textarea fields, default to full width
+  if (field.type === "textarea") {
+    return "col-span-full";
+  }
+
+  // Determine column spans with defaults
+  const colSpan = field.colSpan || 12;
+
+  // Map to actual Tailwind classes based on your grid system
+  const spanMap: Record<number, string> = {
+    1: "col-span-1",
+    2: "col-span-2",
+    3: "col-span-3",
+    4: "col-span-4",
+    5: "col-span-5",
+    6: "col-span-6",
+    7: "col-span-7",
+    8: "col-span-8",
+    9: "col-span-9",
+    10: "col-span-10",
+    11: "col-span-11",
+    12: "col-span-12",
+  };
+
+  return spanMap[colSpan] || "col-span-12";
+};
+
+export function GenericForm<T extends FieldValues>({
+  form,
+  fields,
+  onSubmit,
+  onCancel,
+  isLoading = false,
+  isSubmitting: externalIsSubmitting,
+  submitButtonText = "Submit",
+  cancelButtonText = "Cancel",
+  successMessage = "Operation completed successfully",
+  errorMessage = "An error occurred",
+  customButtons,
+  resetOnSuccess = false,
+  defaultValue,
+  title,
+  description,
+  showProgress = true,
+}: GenericFormProps<T> & {
+  title?: string;
+  description?: string;
+  showProgress?: boolean;
+}) {
+  const [internalIsSubmitting, setInternalIsSubmitting] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const isSubmitting = externalIsSubmitting ?? internalIsSubmitting;
+  const { toast } = useToast();
+  const [shouldClearEditor, setShouldClearEditor] = useState(false);
+
+  // Calculate form completion progress
+  const calculateProgress = () => {
+    const totalFields = fields.filter((field) => !field.hidden).length;
+    const filledFields = fields.filter((field) => {
+      if (field.hidden) return false;
+      const value = form.getValues(field.name as any);
+      return value !== undefined && value !== null && value !== "";
+    }).length;
+
+    return Math.round((filledFields / totalFields) * 100);
+  };
+
+
+
+  // Update progress on form changes
+  useEffect(() => {
+    const subscription = form.watch(() => {
+      setProgress(calculateProgress());
+    });
+    return () => subscription.unsubscribe();
+  }, [form, fields]);
+
+  const handleSubmit = async (values: T) => {
+    try {
+      setInternalIsSubmitting(true);
+      await onSubmit(values);
+      if (resetOnSuccess) {
+        form.reset();
+        setProgress(0);
+      }
+      setShouldClearEditor(true);
+    } catch (error: unknown) {
+      console.error("Error submitting form:", error);
+    } finally {
+      setInternalIsSubmitting(false);
+    }
+  };
+
+  const renderFormField = (
+    field: FormField<T>,
+    index: number,
+    fieldsInSection: FormField<T>[]
+  ) => {
+    const gridClass = getGridClasses(field);
+
+    return (
+      <motion.div
+        key={field.name as string}
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: index * 0.05 }}
+        className={gridClass}>
+        <FormFieldRenderer
+          field={field}
+          form={form}
+          isLoading={isLoading}
+          isSubmitting={isSubmitting}
+          defaultValue={defaultValue}
+          shouldClearEditor={shouldClearEditor}
+          onScroll={field.onScroll}
+        />
+      </motion.div>
+    );
+  };
+
+  // Group fields by section
+  const sections = fields.reduce((acc, field) => {
+    const section = field.section || "default";
+    if (!acc[section]) {
+      acc[section] = [];
+    }
+    acc[section].push(field);
+    return acc;
+  }, {} as Record<string, FormField<T>[]>);
+
+  const hasMultipleSections = Object.keys(sections).length > 1;
+
+  const SectionIcon = ({ sectionName }: { sectionName: string }) => {
+    const IconComponent = sectionIcons[sectionName] || sectionIcons.default;
+    return <IconComponent className="h-4 w-4" />;
+  };
+
+  const renderActionButtons = (className?: string) => (
+    <motion.div
+      variants={containerVariants}
+      initial="hidden"
+      animate="visible"
+      className={cn(
+        "flex flex-col sm:flex-row justify-between items-center gap-4",
+        className
+      )}>
+      <div className="flex items-center space-x-3 text-sm text-muted-foreground"></div>
+
+      <div className="flex flex-col sm:flex-row gap-3 w-full sm:w-auto">
+        {customButtons}
+
+        {onCancel && (
+          <motion.div variants={buttonVariants}>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={onCancel}
+              disabled={isLoading || isSubmitting}
+              className="min-w-[120px] border-2 hover:border-gray-300 hover:bg-gray-50/80 transition-all duration-200 group">
+              <ArrowLeft className="h-4 w-4 mr-2 group-hover:-translate-x-1 transition-transform" />
+              {cancelButtonText}
+            </Button>
+          </motion.div>
+        )}
+
+        <motion.div variants={buttonVariants} whileHover="hover" whileTap="tap">
+          <Button
+            type="submit"
+            disabled={isLoading || isSubmitting}
+            className="min-w-[140px] bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white shadow-lg shadow-green-500/25 hover:shadow-xl hover:shadow-green-500/30 transition-all duration-300">
+            {isSubmitting ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Processing...
+              </>
+            ) : (
+              <>
+                <Check className="mr-2 h-4 w-4" />
+                {submitButtonText}
+              </>
+            )}
+          </Button>
+        </motion.div>
+      </div>
+    </motion.div>
+  );
+
+  return (
+    <div className="w-full max-w-7xl mx-auto space-y-8">
+      {/* Header Section */}
+      {(title || description) && (
+        <motion.div
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="text-center space-y-4">
+          {title && (
+            <h1 className="text-3xl font-bold bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent">
+              {title}
+            </h1>
+          )}
+          {description && (
+            <p className="text-lg text-muted-foreground max-w-2xl mx-auto leading-relaxed">
+              {description}
+            </p>
+          )}
+        </motion.div>
+      )}
+
+      {/* Progress Bar */}
+      {showProgress && (
+        <motion.div
+          initial={{ opacity: 0, scaleX: 0 }}
+          animate={{ opacity: 1, scaleX: 1 }}
+          className="space-y-2">
+          <div className="flex justify-between items-center text-sm text-muted-foreground">
+            <span>Form Progress</span>
+            <span className="font-semibold text-primary">{progress}%</span>
+          </div>
+          <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
+            <motion.div
+              className="h-full bg-gradient-to-r from-green-500 to-emerald-500 rounded-full"
+              initial={{ width: "0%" }}
+              animate={{ width: `${progress}%` }}
+              transition={{ duration: 0.8, ease: "easeOut" }}
+            />
+          </div>
+        </motion.div>
+      )}
+
+      <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-8">
+        {/* Loading Overlay */}
+        {(isLoading || isSubmitting) && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 bg-background/80 backdrop-blur-lg flex items-center justify-center z-50">
+            <motion.div
+              initial={{ scale: 0.8, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              className="bg-white/95 p-8 rounded-3xl shadow-2xl border border-gray-200/50 flex flex-col items-center gap-6 max-w-sm w-full mx-4">
+              <motion.div
+                animate={{ rotate: 360 }}
+                transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+                className="w-16 h-16 bg-gradient-to-r from-green-500 to-emerald-500 rounded-full flex items-center justify-center">
+                <Loader2 className="h-8 w-8 text-white" />
+              </motion.div>
+              <div className="text-center space-y-2">
+                <h3 className="font-semibold text-lg text-gray-900">
+                  Processing...
+                </h3>
+                <p className="text-sm text-gray-600">
+                  Please wait while we save your changes
+                </p>
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+
+        {/* Form Sections */}
+        <motion.div
+          variants={containerVariants}
+          initial="hidden"
+          animate="visible"
+          className="space-y-8">
+          {hasMultipleSections ? (
+            Object.entries(sections).map(([sectionName, sectionFields]) => {
+              const theme = sectionThemes[sectionName] || sectionThemes.default;
+              const visibleFields = sectionFields.filter(
+                (field) => !field.hidden
+              );
+
+              if (visibleFields.length === 0) return null;
+
+              return (
+                <motion.div
+                  key={sectionName}
+                  variants={sectionVariants}
+                  whileHover={{ y: -2 }}
+                  className="group">
+                  <Card
+                    className={`border-0 shadow-lg overflow-hidden backdrop-blur-sm bg-white/70 ${theme.bg} transition-all duration-300 group-hover:shadow-xl`}>
+                    {sectionName !== "default" && (
+                      <CardHeader
+                        className={`pb-4 bg-gradient-to-r ${theme.gradient} text-white`}>
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center space-x-3">
+                            <div className="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur-sm">
+                              <SectionIcon sectionName={sectionName} />
+                            </div>
+                            <div>
+                              <CardTitle className="text-xl font-bold text-white">
+                                {sectionName}
+                              </CardTitle>
+                              <CardDescription className="text-white/80">
+                                {visibleFields.length} field
+                                {visibleFields.length !== 1 ? "s" : ""} to
+                                complete
+                              </CardDescription>
+                            </div>
+                          </div>
+                          <Badge
+                            variant="secondary"
+                            className="bg-white/20 text-white border-white/30">
+                            {sectionName === "default"
+                              ? "General"
+                              : sectionName}
+                          </Badge>
+                        </div>
+                      </CardHeader>
+                    )}
+                    <CardContent className="p-6">
+                      <div className="grid grid-cols-12 gap-4">
+                        {visibleFields.map((field, index) =>
+                          renderFormField(field, index, visibleFields)
+                        )}
+                      </div>
+                    </CardContent>
+                  </Card>
+                </motion.div>
+              );
+            })
+          ) : (
+            <motion.div variants={sectionVariants}>
+              <Card className="border-0 shadow-xl bg-white/80 backdrop-blur-sm overflow-hidden ring-1 ring-black/5">
+                <CardContent className="p-8">
+                  <div className="grid grid-cols-12 gap-4">
+                    {fields
+                      .filter((field) => !field.hidden)
+                      .map((field, index) =>
+                        renderFormField(
+                          field,
+                          index,
+                          fields.filter((f) => !f.hidden)
+                        )
+                      )}
+                  </div>
+                  {/* Action Buttons Inside Card for Single Section */}
+                  {renderActionButtons("pt-8 mt-8 border-t border-gray-100")}
+                </CardContent>
+              </Card>
+            </motion.div>
+          )}
+        </motion.div>
+
+        {/* Action Buttons Outside for Multiple Sections */}
+        {hasMultipleSections &&
+          renderActionButtons("pt-8 border-t border-gray-200/50")}
+      </form>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/utils/multi-select.tsx b/apps/edr-freight-web/backoffice/src/performance-management/utils/multi-select.tsx
new file mode 100644
index 000000000..1b798bf8c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/utils/multi-select.tsx
@@ -0,0 +1,98 @@
+// components/ui/multi-select.tsx
+import * as React from "react";
+import { Check, ChevronsUpDown, X } from "lucide-react";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from "@/shared/common/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/shared/common/ui/popover";
+import { Badge } from "@/shared/common/ui/badge";
+import { cn } from "@/shared/lib/utils";
+
+interface MultiSelectProps {
+  options: { value: string; label: string }[];
+  value: string[];
+  onValueChange: (value: string[]) => void;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+export function MultiSelect({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Select options",
+  disabled = false,
+}: MultiSelectProps) {
+  const [open, setOpen] = React.useState(false);
+
+  const handleSelect = (optionValue: string) => {
+    onValueChange(
+      value.includes(optionValue)
+        ? value.filter((v) => v !== optionValue)
+        : [...value, optionValue]
+    );
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-full justify-between"
+          disabled={disabled}>
+          <div className="flex flex-wrap gap-1">
+            {value.length === 0 && <span>{placeholder}</span>}
+            {value.map((val) => {
+              const option = options.find((o) => o.value === val);
+              return (
+                <Badge key={val} variant="secondary" className="mr-1">
+                  {option?.label}
+                  <X
+                    className="ml-1 h-3 w-3 cursor-pointer"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleSelect(val);
+                    }}
+                  />
+                </Badge>
+              );
+            })}
+          </div>
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-full p-0">
+        <Command>
+          <CommandInput placeholder="Search options..." />
+          <CommandEmpty>No option found.</CommandEmpty>
+          <CommandGroup>
+            {options.map((option) => (
+              <CommandItem
+                key={option.value}
+                onSelect={() => handleSelect(option.value)}>
+                <Check
+                  className={cn(
+                    "mr-2 h-4 w-4",
+                    value.includes(option.value) ? "opacity-100" : "opacity-0"
+                  )}
+                />
+                {option.label}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/utils/navConfig.tsx b/apps/edr-freight-web/backoffice/src/performance-management/utils/navConfig.tsx
new file mode 100644
index 000000000..cfc08818b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/utils/navConfig.tsx
@@ -0,0 +1,70 @@
+import React from "react";
+
+type NavItemProps = {
+  to?: string;
+  children?: React.ReactNode;
+  [key: string]: any;
+};
+
+/**
+ * Filters navigation items based on user's roles & dynamic permission config.
+ */
+export const filterNavLinksByRole = (
+  navItems: React.ReactNode,
+  userRoles?: string[],
+  permissions?: Record<string, string[]>
+): React.ReactNode => {
+  if (!userRoles || userRoles.length === 0) return null;
+
+  if (userRoles.includes("super_admin")) return navItems;
+
+  const filteredItems = React.Children.map(navItems, (item) => {
+    if (!React.isValidElement<NavItemProps>(item)) return null;
+
+    const props = item.props as NavItemProps;
+    const path = props.to;
+    const children = props.children;
+
+    if (children) {
+      const filteredChildren = React.Children.map(children, (child) => {
+        if (!React.isValidElement<NavItemProps>(child)) return null;
+
+        const childProps = child.props as NavItemProps;
+        const childPath = childProps.to;
+
+        return childPath && shouldShowItem(childPath, userRoles, permissions)
+          ? child
+          : null;
+      })?.filter(Boolean);
+
+      if (filteredChildren?.length) {
+        // Cast item as ReactElement<NavItemProps> to allow children
+        return React.cloneElement<NavItemProps>(item, {
+          ...props,
+          children: filteredChildren,
+        });
+      }
+
+      return path && shouldShowItem(path, userRoles, permissions) ? item : null;
+    }
+
+    return path && shouldShowItem(path, userRoles, permissions) ? item : null;
+  })?.filter(Boolean);
+
+  return filteredItems ?? null;
+};
+
+const shouldShowItem = (
+  path: string,
+  userRoles?: string[],
+  permissions?: Record<string, string[]>
+): boolean => {
+  if (!userRoles || userRoles.length === 0) return false;
+  if (!permissions) return false;
+
+  const cleanPath = path.startsWith("/") ? path.slice(1) : path;
+
+  if (!permissions[cleanPath]) return false;
+
+  return userRoles.some((role) => permissions[cleanPath].includes(role));
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/utils/plan-unit.ts b/apps/edr-freight-web/backoffice/src/performance-management/utils/plan-unit.ts
new file mode 100644
index 000000000..9e5d0f83d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/utils/plan-unit.ts
@@ -0,0 +1,83 @@
+import i18n from "@/i18n";
+
+enum PlanType {
+  NUMBER = "number",
+  PERCENTAGE = "percent",
+  BOOLEAN = "boolean",
+}
+
+export const getPlanTypeOptions = () => [ 
+  { label: i18n.t("plans.Number"), value: "number" },
+  { label: i18n.t("plans.Percent"), value: "percent" },
+]
+
+// Quarter list with translation keys
+export const QUARTER_KEYS = [
+  { key: "plans.quarters.q1", value: "1" },
+  { key: "plans.quarters.q2", value: "2" },
+  { key: "plans.quarters.q3", value: "3" },
+  { key: "plans.quarters.q4", value: "4" },
+];
+
+// Month list with translation keys
+export const MONTH_KEYS = [
+  { key: "plans.months.july", value: "1" },
+  { key: "plans.months.august", value: "2" },
+  { key: "plans.months.september", value: "3" },
+  { key: "plans.months.october", value: "4" },
+  { key: "plans.months.november", value: "5" },
+  { key: "plans.months.december", value: "6" },
+  { key: "plans.months.january", value: "7" },
+  { key: "plans.months.february", value: "8" },
+  { key: "plans.months.march", value: "9" },
+  { key: "plans.months.april", value: "10" },
+  { key: "plans.months.may", value: "11" },
+  { key: "plans.months.june", value: "12" },
+];
+
+// Week list with translation keys
+export const WEEK_KEYS = [
+  { key: "plans.weeks.week1", value: "1" },
+  { key: "plans.weeks.week2", value: "2" },
+  { key: "plans.weeks.week3", value: "3" },
+  { key: "plans.weeks.week4", value: "4" },
+];
+
+// Day list with translation keys
+export const DAY_KEYS = [
+  { key: "plans.days.monday", value: "1" },
+  { key: "plans.days.tuesday", value: "2" },
+  { key: "plans.days.wednesday", value: "3" },
+  { key: "plans.days.thursday", value: "4" },
+  { key: "plans.days.friday", value: "5" },
+  { key: "plans.days.saturday", value: "6" },
+  { key: "plans.days.sunday", value: "7" },
+];
+
+export const getQuarterList = (t?: (key: string) => string) => {
+  const translator = t || ((key: string) => i18n.t(key));
+  return QUARTER_KEYS.map(item => ({ label: translator(item.key), value: item.value }));
+};
+
+export const getMonthList = (t?: (key: string) => string) => {
+  const translator = t || ((key: string) => i18n.t(key));
+  return MONTH_KEYS.map(item => ({ label: translator(item.key), value: item.value }));
+};
+
+export const getWeekList = (t?: (key: string) => string) => {
+  const translator = t || ((key: string) => i18n.t(key));
+  return WEEK_KEYS.map(item => ({ label: translator(item.key), value: item.value }));
+};
+
+export const getDayList = (t?: (key: string) => string) => {
+  const translator = t || ((key: string) => i18n.t(key));
+  return DAY_KEYS.map(item => ({ label: translator(item.key), value: item.value }));
+};
+
+// Deprecated: Use getQuarterList(), getMonthList(), getWeekList(), getDayList() instead
+export const QuarterList = getQuarterList();
+export const MonthList = getMonthList();
+export const WeekList = getWeekList();
+export const DayList = getDayList();
+
+export default PlanType;
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/utils/positionTypeUtils.ts b/apps/edr-freight-web/backoffice/src/performance-management/utils/positionTypeUtils.ts
new file mode 100644
index 000000000..d3eb2f3fc
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/utils/positionTypeUtils.ts
@@ -0,0 +1,154 @@
+import {
+  MeDto,
+  EPositionTypeKey,
+  POSITION_TYPE_ALIASES,
+} from "@/shared/dto/user/meDto";
+
+/** Build match candidates from backend keys like performance_director or org/director */
+const positionTypeCandidates = (rawKey: string): string[] => {
+  const candidates = new Set<string>([rawKey]);
+
+  const slashIdx = rawKey.lastIndexOf("/");
+  if (slashIdx >= 0) {
+    candidates.add(rawKey.slice(slashIdx + 1));
+  }
+
+  const underscoreIdx = rawKey.lastIndexOf("_");
+  if (underscoreIdx >= 0) {
+    candidates.add(rawKey.slice(underscoreIdx + 1));
+  }
+
+  if (rawKey.toLowerCase().startsWith("performance_")) {
+    candidates.add(rawKey.slice("performance_".length));
+  }
+
+  // performance_teamleader → teamleader → team-leader
+  if (rawKey.toLowerCase().includes("teamleader")) {
+    candidates.add("teamleader");
+    candidates.add("team-leader");
+  }
+
+  return [...candidates];
+};
+
+/**
+ * Returns true when a backend key matches the canonical position type.
+ * Checks positionType.key (e.g. performance_director) and position.key (e.g. org/director).
+ */
+export const matchesPositionType = (
+  rawKey: string | undefined | null,
+  level: EPositionTypeKey,
+): boolean => {
+  if (!rawKey) return false;
+  const aliases = POSITION_TYPE_ALIASES[level] ?? [level];
+  return positionTypeCandidates(rawKey).some((candidate) => aliases.includes(candidate));
+};
+
+/** Resolve positionType.key or position.key to canonical EPositionTypeKey. */
+export const resolvePositionTypeKey = (
+  rawKey: string | undefined | null,
+): EPositionTypeKey | null => {
+  if (!rawKey) return null;
+  for (const level of Object.values(EPositionTypeKey)) {
+    if (matchesPositionType(rawKey, level as EPositionTypeKey)) {
+      return level as EPositionTypeKey;
+    }
+  }
+  return null;
+};
+
+type PositionLike = {
+  key?: string;
+  positionType?: { key?: string } | null;
+};
+
+export const resolvePositionType = (
+  position: PositionLike | undefined | null,
+): EPositionTypeKey | null => {
+  if (!position) return null;
+  return (
+    resolvePositionTypeKey(position.positionType?.key) ??
+    resolvePositionTypeKey(position.key) ??
+    null
+  );
+};
+
+/**
+ * Get user's highest position type based on hierarchy priority
+ * Priority order: DEPUTY > DIRECTOR > BUDGET_PLAN > OFFICE_HEAD > TEAM_LEADER > EMPLOYEE
+ */
+export const getUserPositionType = (
+  user: MeDto | null,
+): EPositionTypeKey | null => {
+  if (!user?.employee?.length) return null;
+
+  const positions = user.employee[0]?.positions || [];
+  if (!positions.length) return null;
+
+  const positionHierarchy = [
+    EPositionTypeKey.DEPUTY,
+    EPositionTypeKey.DIRECTOR,
+    EPositionTypeKey.BUDGET_PLAN,
+    EPositionTypeKey.OFFICE_HEAD,
+    EPositionTypeKey.TEAM_LEADER,
+    EPositionTypeKey.EMPLOYEE,
+  ];
+
+  for (const level of positionHierarchy) {
+    const hasPosition = positions.some((p) => resolvePositionType(p) === level);
+    if (hasPosition) return level;
+  }
+
+  return EPositionTypeKey.EMPLOYEE;
+};
+
+/**
+ * Position type for the currently selected position (employeePositionId or position id).
+ */
+export const getSelectedPositionType = (
+  user: MeDto | null,
+  selectedPositionId: string | null | undefined,
+): EPositionTypeKey | null => {
+  if (!user?.employee?.length) return null;
+
+  const allPositions = user.employee.flatMap((emp) => emp.positions ?? []);
+
+  if (selectedPositionId) {
+    const active = allPositions.find(
+      (p) =>
+        p.employeePositionId === selectedPositionId || p.id === selectedPositionId,
+    );
+    const resolved = resolvePositionType(active);
+    if (resolved) return resolved;
+  }
+
+  return getUserPositionType(user);
+};
+
+export const hasPositionType = (
+  user: MeDto | null,
+  type: EPositionTypeKey,
+): boolean => {
+  if (!user?.employee?.length) return false;
+  const positions = user.employee[0]?.positions || [];
+  return positions.some((p) => resolvePositionType(p) === type);
+};
+
+export const getUserOrgContext = (user: MeDto | null) => {
+  if (!user?.employee?.length) return null;
+
+  const employee = user.employee[0];
+  const position = employee?.positions?.[0];
+
+  return {
+    organizationId: employee?.organizationId,
+    unitId: employee?.unitId,
+    employeeId: employee?.id,
+    positionId: position?.id,
+  };
+};
+
+export const getUserPositionId = (user: MeDto | null): string | null => {
+  if (!user?.employee?.length) return null;
+  return user.employee[0]?.positions?.[0]?.id || null;
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/utils/shared-field-types.tsx b/apps/edr-freight-web/backoffice/src/performance-management/utils/shared-field-types.tsx
new file mode 100644
index 000000000..20108f7ad
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/utils/shared-field-types.tsx
@@ -0,0 +1,265 @@
+// shared-field-types.ts
+import { LucideIcon } from "lucide-react";
+import { UseFormReturn } from "react-hook-form";
+import { FieldValues } from "react-hook-form";
+
+export type FormFieldType =
+  | "text"
+  | "textarea"
+  | "switch"
+  | "number"
+  | "checkbox"
+  | "select"
+  | "multiselect"
+  | "password"
+  | "date"
+  | "datetime"
+  | "dateinput"
+  | "time"
+  | "radio"
+  | "file"
+  | "color"
+  | "slider"
+  | "segmented"
+  | "native-select"
+  | "json"
+  | "rating"
+  | "autocomplete"
+  | "richtext"
+  | "habesha-date"
+  | "year-picker";
+
+export interface BaseFormField<T> {
+  name: keyof T;
+  label: string;
+  description?: string;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  hidden?: boolean;
+  className?: string;
+  wrapperProps?: Record<string, unknown>;
+  data?: any;
+  clearable?: any;
+  section?: string;
+  icon?: React.ComponentType<{ className?: string }>;
+  group?: string;
+  defaultValue?: any;
+  // Grid span control (1-12)
+  colSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+  // For responsive design
+  smColSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+  lgColSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+  // Existing properties...
+  options?: string[] | { value: string; label: string; icon?: LucideIcon }[];
+  onChange?: (value: any) => void;
+  onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
+}
+
+// Define specific field interfaces for better type safety
+export interface TextFormField<T> extends BaseFormField<T> {
+  type: "text";
+  autoComplete?: string;
+}
+
+export interface TextareaFormField<T> extends BaseFormField<T> {
+  type: "textarea";
+  rows?: number;
+}
+
+export interface NumberFormField<T> extends BaseFormField<T> {
+  type: "number";
+  min?: number;
+  max?: number;
+  step?: number | "any";
+}
+
+export interface PasswordFormField<T> extends BaseFormField<T> {
+  type: "password";
+  autoComplete?: "current-password" | "new-password";
+}
+
+export interface SwitchFormField<T> extends BaseFormField<T> {
+  type: "switch";
+}
+
+export interface CheckboxFormField<T> extends BaseFormField<T> {
+  type: "checkbox";
+}
+
+export interface SelectFormField<T> extends BaseFormField<T> {
+  type: "select";
+  options: { value: string; label: string; disabled?: boolean }[];
+  searchable?: boolean;
+  clearable?: boolean;
+  defaultValue?: string;
+}
+
+export interface MultiSelectFormField<T> extends BaseFormField<T> {
+  type: "multiselect";
+  options: { value: string; label: string; disabled?: boolean }[];
+  searchable?: boolean;
+  defaultValue?: string[];
+}
+
+export interface DateFormField<T> extends BaseFormField<T> {
+  type: "date" | "datetime" | "dateinput" | "time";
+  minDate?: Date;
+  maxDate?: Date;
+  defaultValue?: string;
+}
+
+export interface RadioFormField<T> extends BaseFormField<T> {
+  type: "radio";
+  options: { value: string; label: string }[];
+  orientation?: "horizontal" | "vertical";
+}
+
+export interface FileFormField<T> extends BaseFormField<T> {
+  type: "file";
+  accept?: string;
+  multiple?: boolean;
+}
+
+export interface ColorFormField<T> extends BaseFormField<T> {
+  type: "color";
+}
+
+export interface SliderFormField<T> extends BaseFormField<T> {
+  type: "slider";
+  min?: number;
+  max?: number;
+  step?: number;
+  marks?: { value: number; label: string }[];
+}
+
+export interface SegmentedFormField<T> extends BaseFormField<T> {
+  type: "segmented";
+  options: { value: string; label: string }[];
+}
+
+export interface RatingFormField<T> extends BaseFormField<T> {
+  type: "rating";
+  count?: number;
+  size?: "sm" | "md" | "lg";
+  showLabels?: boolean;
+  labels?: string[];
+  language?: "am" | "en";
+}
+
+export interface HabeshaDateFormField<T> extends BaseFormField<T> {
+  type: "habesha-date";
+  language?: "am" | "en";
+}
+
+export interface YearPickerFormField<T> extends BaseFormField<T> {
+  type: "year-picker";
+  calendarType?: "gregorian" | "habesha";
+  language?: "am" | "en";
+  minYear?: number;
+  maxYear?: number;
+}
+
+export interface AutocompleteFormField<T> extends BaseFormField<T> {
+  type: "autocomplete";
+  options: string[] | { value: string; label: string }[];
+}
+
+export interface RichTextFormField<T> extends BaseFormField<T> {
+  type: "richtext";
+  minHeight?: number;
+  withTypography?: boolean;
+  withLinks?: boolean;
+  withImages?: boolean;
+  withTextAlignment?: boolean;
+  withColor?: boolean;
+  withHighlight?: boolean;
+}
+
+// Union type for all form fields
+export type FormField<T> =
+  | TextFormField<T>
+  | TextareaFormField<T>
+  | NumberFormField<T>
+  | PasswordFormField<T>
+  | SwitchFormField<T>
+  | CheckboxFormField<T>
+  | SelectFormField<T>
+  | MultiSelectFormField<T>
+  | DateFormField<T>
+  | RadioFormField<T>
+  | FileFormField<T>
+  | ColorFormField<T>
+  | SliderFormField<T>
+  | SegmentedFormField<T>
+  | RatingFormField<T>
+  | AutocompleteFormField<T>
+  | RichTextFormField<T>
+  | HabeshaDateFormField<T>
+  | YearPickerFormField<T>;
+
+// Type guards for better type checking
+export function isSelectField<T>(
+  field: FormField<T>
+): field is SelectFormField<T> {
+  return field.type === "select";
+}
+
+export function isMultiSelectField<T>(
+  field: FormField<T>
+): field is MultiSelectFormField<T> {
+  return field.type === "multiselect";
+}
+
+export function isRadioField<T>(
+  field: FormField<T>
+): field is RadioFormField<T> {
+  return field.type === "radio";
+}
+
+export function isAutocompleteField<T>(
+  field: FormField<T>
+): field is AutocompleteFormField<T> {
+  return field.type === "autocomplete";
+}
+
+export function hasOptions<T>(
+  field: FormField<T>
+): field is
+  | SelectFormField<T>
+  | MultiSelectFormField<T>
+  | RadioFormField<T>
+  | AutocompleteFormField<T> {
+  return (
+    field.type === "select" ||
+    field.type === "multiselect" ||
+    field.type === "radio" ||
+    field.type === "autocomplete"
+  );
+}
+
+// GenericFormProps using react-hook-form
+export interface GenericFormProps<T extends FieldValues> {
+  form: UseFormReturn<T>;
+  fields: FormField<T>[];
+  onSubmit: (values: T) => Promise<void> | void;
+  onCancel?: () => void;
+  isLoading?: boolean;
+  isSubmitting?: boolean;
+  submitButtonText?: string;
+  cancelButtonText?: string;
+  successMessage?: string;
+  errorMessage?: string;
+  customButtons?: React.ReactNode;
+  resetOnSuccess?: boolean;
+  defaultValue?: string;
+}
+
+export enum TimeFrame {
+  MONTH = "monthly",
+  WEEK = "weekly",
+  DAY = "daily",
+  QUARTER = "quarterly",
+  YEAR = "yearly",
+}
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/utils/slugUtils.ts b/apps/edr-freight-web/backoffice/src/performance-management/utils/slugUtils.ts
new file mode 100644
index 000000000..d68b6fdbb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/utils/slugUtils.ts
@@ -0,0 +1,91 @@
+/**
+ * Utility functions for generating and handling URL slugs
+ */
+
+/**
+ * Generate a URL-friendly slug from a localized name object
+ * Uses English name, falls back to Amharic if English is not available
+ */
+export const generateSlugFromLocalizedName = (name: {
+  en?: string;
+  am?: string;
+}): string => {
+  const text = name.en || name.am || "";
+  return generateSlug(text);
+};
+
+/**
+ * Generate a URL-friendly slug from text
+ * - Converts to lowercase
+ * - Replaces spaces with hyphens
+ * - Removes special characters
+ * - Handles multiple consecutive hyphens
+ */
+export const generateSlug = (text: string): string => {
+  return text
+    .toLowerCase()
+    .trim()
+    .replace(/[^\w\s-]/g, "") // Remove special characters
+    .replace(/\s+/g, "-") // Replace spaces with hyphens
+    .replace(/-+/g, "-") // Replace multiple hyphens with single hyphen
+    .replace(/^-+|-+$/g, ""); // Remove leading/trailing hyphens
+};
+
+/**
+ * Create a unique slug by appending ID suffix
+ * Format: "plan-name-abc123"
+ */
+export const createUniqueSlug = (text: string, id: string): string => {
+  const baseSlug = generateSlug(text);
+  const shortId = id.slice(0, 8); // Use first 8 chars of UUID
+  return `${baseSlug}-${shortId}`;
+};
+
+/**
+ * Extract ID from a unique slug
+ * Format: "plan-name-abc123" -> "abc123"
+ */
+export const extractIdFromSlug = (slug: string): string => {
+  const parts = slug.split("-");
+  return parts[parts.length - 1]; // Return last part (the ID)
+};
+
+/**
+ * Check if a string is a UUID
+ */
+export const isUUID = (str: string): boolean => {
+  const uuidRegex =
+    /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+  return uuidRegex.test(str);
+};
+
+/**
+ * Parse year from URL parameter
+ * Handles both year numbers (2024) and UUIDs (for backward compatibility)
+ */
+export const parseYearParam = (yearParam: string): {
+  isYear: boolean;
+  value: string;
+} => {
+  // Check if it's a 4-digit year
+  if (/^\d{4}$/.test(yearParam)) {
+    return { isYear: true, value: yearParam };
+  }
+  // Otherwise treat as UUID
+  return { isYear: false, value: yearParam };
+};
+
+/**
+ * Parse slug parameter
+ * Handles both slugs and UUIDs (for backward compatibility)
+ */
+export const parseSlugParam = (
+  slugParam: string
+): { isSlug: boolean; id: string } => {
+  if (isUUID(slugParam)) {
+    // It's a UUID, use directly
+    return { isSlug: false, id: slugParam };
+  }
+  // It's a slug, extract ID
+  return { isSlug: true, id: extractIdFromSlug(slugParam) };
+};
diff --git a/apps/edr-freight-web/backoffice/src/performance-management/utils/statusBadge.tsx b/apps/edr-freight-web/backoffice/src/performance-management/utils/statusBadge.tsx
new file mode 100644
index 000000000..ec2fb0943
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/performance-management/utils/statusBadge.tsx
@@ -0,0 +1,52 @@
+// utils/statusBadge.tsx
+interface StatusBadgeProps {
+  status: string;
+  className?: string;
+}
+
+export function StatusBadge({ status, className = "" }: StatusBadgeProps) {
+  const getStatusConfig = (status: string) => {
+    const config = {
+      waiting: {
+        gradient: "from-yellow-500 to-amber-500",
+        glow: "shadow-lg shadow-yellow-500/20",
+        icon: "⏳",
+      },
+      in_progress: {
+        gradient: "from-blue-500 to-cyan-500",
+        glow: "shadow-lg shadow-blue-500/20",
+        icon: "⚡",
+      },
+      completed: {
+        gradient: "from-green-500 to-emerald-500",
+        glow: "shadow-lg shadow-green-500/20",
+        icon: "✅",
+      },
+      cancelled: {
+        gradient: "from-red-500 to-pink-500",
+        glow: "shadow-lg shadow-red-500/20",
+        icon: "❌",
+      },
+    };
+
+    const defaultConfig = {
+      gradient: "from-gray-500 to-slate-500",
+      glow: "shadow-lg shadow-gray-500/20",
+      icon: "📋",
+    };
+
+    return config[status as keyof typeof config] || defaultConfig;
+  };
+
+  const { gradient, glow, icon } = getStatusConfig(status);
+  const label =
+    status.charAt(0).toUpperCase() + status.slice(1).replace("_", " ");
+
+  return (
+    <div
+      className={`inline-flex items-center px-4 py-2 rounded-2xl bg-gradient-to-r ${gradient} ${glow} border border-white/20 backdrop-blur-sm ${className}`}>
+      <span className="text-sm mr-2">{icon}</span>
+      <span className="text-white font-semibold text-sm">{label}</span>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/permissions/index.ts b/apps/edr-freight-web/backoffice/src/permissions/index.ts
new file mode 100644
index 000000000..4d1a13bfb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/permissions/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Permission key type used by the vendored IAM UI (shared/super-admin/
+ * user-management). The source app models a permission as a string key
+ * (e.g. "can:viewAllRecords"); `string` keeps `.includes(p)` / `Permission[]`
+ * usage valid. Replace with the source app's real enum/union if stricter
+ * typing is needed.
+ */
+export type Permission = string;
diff --git a/apps/edr-freight-web/backoffice/src/queue-management/hooks/useExecution.ts b/apps/edr-freight-web/backoffice/src/queue-management/hooks/useExecution.ts
new file mode 100644
index 000000000..d3c0ec9a8
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/queue-management/hooks/useExecution.ts
@@ -0,0 +1,33 @@
+// STUB — @/queue-management is not migrated. These placeholders let
+// performance-management's call-management widget resolve; the queue feature is
+// inert here. Replace with the real @/queue-management/hooks if it is copied.
+
+/** No-op call-execution mutation matching the react-query mutation shape used. */
+export function useCallExecution() {
+  return {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    mutate: (..._args: any[]) => {
+      // eslint-disable-next-line no-console
+      console.warn("[queue-management stub] useCallExecution — not migrated.");
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    mutateAsync: async (..._args: any[]) => undefined,
+    isPending: false,
+    isError: false,
+    isSuccess: false,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    data: undefined as any,
+    reset: () => {},
+  };
+}
+
+/** No active execution — matches the query-result shape the widget reads. */
+export function useMyActiveExecution() {
+  return {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    data: null as any,
+    isLoading: false,
+    isError: false,
+    refetch: () => {},
+  };
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/assets/Sounds/Notification-smartOffice.mp3 b/apps/edr-freight-web/backoffice/src/record-management/assets/Sounds/Notification-smartOffice.mp3
new file mode 100644
index 000000000..7ce0795ac
Binary files /dev/null and b/apps/edr-freight-web/backoffice/src/record-management/assets/Sounds/Notification-smartOffice.mp3 differ
diff --git a/apps/edr-freight-web/backoffice/src/record-management/assets/Sounds/smile-ringtone.mp3 b/apps/edr-freight-web/backoffice/src/record-management/assets/Sounds/smile-ringtone.mp3
new file mode 100644
index 000000000..25852e7cc
Binary files /dev/null and b/apps/edr-freight-web/backoffice/src/record-management/assets/Sounds/smile-ringtone.mp3 differ
diff --git a/apps/edr-freight-web/backoffice/src/record-management/assets/Sounds/smile-ringtone.ogg b/apps/edr-freight-web/backoffice/src/record-management/assets/Sounds/smile-ringtone.ogg
new file mode 100644
index 000000000..1ff31035e
Binary files /dev/null and b/apps/edr-freight-web/backoffice/src/record-management/assets/Sounds/smile-ringtone.ogg differ
diff --git a/apps/edr-freight-web/backoffice/src/record-management/assets/react.svg b/apps/edr-freight-web/backoffice/src/record-management/assets/react.svg
new file mode 100644
index 000000000..6c87de9bb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/record-management/bootstrap/prefetchQueries.ts b/apps/edr-freight-web/backoffice/src/record-management/bootstrap/prefetchQueries.ts
new file mode 100644
index 000000000..982f33705
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/bootstrap/prefetchQueries.ts
@@ -0,0 +1,12 @@
+// import { fetchAppro } from "@/queries/approvalTasks";
+// import { QueryClient } from "@tanstack/react-query";
+
+// const queryClient = new QueryClient();
+// export async function prefetchCoreQueries() {
+//   await Promise.all([
+//     queryClient.prefetchQuery({
+//       queryKey: ["approvalRecord"],
+//       queryFn: () => fetchApprovalTasks(),
+//     }),
+//   ]);
+// }
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/Count.tsx b/apps/edr-freight-web/backoffice/src/record-management/common/Count.tsx
new file mode 100644
index 000000000..82349dff6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/Count.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import { Badge } from "@/shared/common/ui/badge";
+import useCounter from "@/record-management/components/hooks/useCounter";
+
+// Define all possible count types for type safety
+export type CountTitle =
+  | "Approval"
+  | "Incoming"
+  | "External"
+  | "Internal"
+  | "CC"
+  | "Pending";
+
+interface CountProps {
+  title: CountTitle;
+}
+
+const Counter: React.FC<CountProps> = ({ title }) => {
+  const {
+    incomingCount,
+    approvalCount,
+    internalIncomingCount,
+    externalIncomingCount,
+    ccIncomingCount,
+    pendingCount,
+  } = useCounter();
+
+  // Type-safe count mapping
+  const countMap: Record<CountTitle, number> = {
+    Approval: approvalCount ?? 0,
+    Incoming: incomingCount ?? 0,
+    External: externalIncomingCount ?? 0,
+    Internal: internalIncomingCount ?? 0,
+    CC: ccIncomingCount ?? 0,
+    Pending: pendingCount ?? 0,
+  };
+
+  const count = countMap[title];
+
+  // Don't render if count is 0 or undefined
+  if (!count) return 0;
+
+  return (
+    <Badge className="px-2 py-0 text-xs rounded-full bg-muted text-foreground ml-auto">
+      {count}
+    </Badge>
+  );
+};
+
+export default Counter;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/DataTable.tsx b/apps/edr-freight-web/backoffice/src/record-management/common/DataTable.tsx
new file mode 100644
index 000000000..cdd1f1e46
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/DataTable.tsx
@@ -0,0 +1,217 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import {
+  Table as ShadcnTable,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/common/ui/table";
+import { DataTablePaginationFinal } from "@/shared/common/ui/table/DataTablePaginationFinal";
+import { DataTableToolbar } from "./dataTableToolbar";
+import { useTranslation } from "react-i18next";
+import { usePersistedColumnVisibility } from "@/shared/hooks/usePersistedColumnVisibility";
+
+interface CCIncomingRecord {
+  content: {
+    ccs: { hasSeen: boolean }[];
+  }[];
+}
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  tableName: string;
+  initialColumnVisibility?: VisibilityState;
+  totalCount?: number;
+  pagination?: {
+    pageIndex: number;
+    pageSize: number;
+  };
+  setPagination?: (pagination: { pageIndex: number; pageSize: number }) => void;
+  extraToolbar?: React.ReactNode;
+  toolBarPosition?: "right" | "left" | "center";
+  refresh?: () => void;
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  initialColumnVisibility,
+  totalCount,
+  pagination = { pageIndex: 0, pageSize: 10 },
+  setPagination,
+  tableName,
+  toolBarPosition,
+  refresh,
+  extraToolbar,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const { t } = useTranslation();
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    [],
+  );
+  const [columnVisibility, setColumnVisibility] = usePersistedColumnVisibility(
+    tableName,
+    {
+      letterName: false,
+      fileName: false,
+      ...(initialColumnVisibility ?? {}),
+    },
+  );
+  const [rowSelection, setRowSelection] = React.useState({});
+
+  // Calculate pageCount safely
+  const safeTotalCount = totalCount ?? 0;
+  const pageSize = pagination?.pageSize ?? 10;
+  const pageCount = Math.max(Math.ceil(safeTotalCount / pageSize), 1);
+
+  const table = useReactTable({
+    data,
+    columns,
+    manualPagination: true,
+    pageCount,
+    state: {
+      pagination,
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+    },
+    onPaginationChange: React.useCallback(
+      (updater: any) => {
+        const newPagination =
+          typeof updater === "function" ? updater(pagination) : updater;
+
+        if (setPagination) {
+          setPagination({
+            pageIndex: newPagination.pageIndex,
+            pageSize: newPagination.pageSize,
+          });
+        }
+      },
+      [pagination, setPagination],
+    ),
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+  });
+
+  return (
+    <div className="space-y-2 md:space-y-4">
+      <DataTableToolbar
+        table={table}
+        tableName={tableName}
+        extraToolbar={extraToolbar}
+        toolBarPosition={toolBarPosition}
+        refreshTable={refresh}
+      />
+      {/* Table container with horizontal scroll for mobile */}
+      {/* Table container with horizontal scroll */}
+      <div className="overflow-x-auto w-full custom-scrollbar">
+        <div className="rounded-md border dark:border-gray-700 min-w-max bg-white dark:bg-gray-900 custom-scrollbar">
+          <ShadcnTable
+            className="w-full text-gray-700 dark:text-gray-300"
+            style={{ tableLayout: "auto" }}
+          >
+            <TableHeader className="bg-gray-50 dark:bg-gray-800">
+              {table.getHeaderGroups().map((headerGroup) => (
+                <TableRow key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => (
+                    <TableHead
+                      key={header.id}
+                      className="whitespace-nowrap px-2 md:px-4 py-2 text-left text-base font-medium text-gray-500 dark:text-gray-400"
+                    >
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
+                          )}
+                    </TableHead>
+                  ))}
+                </TableRow>
+              ))}
+            </TableHeader>
+            <TableBody>
+              {table.getRowModel().rows?.length ? (
+                table.getRowModel().rows.map((row) => (
+                  <TableRow
+                    key={row.id}
+                    data-state={row.getIsSelected() && "selected"}
+                    className={`${
+                      (tableName === "CC Incoming Records" &&
+                        !(row.original as CCIncomingRecord)?.content?.[0]
+                          ?.ccs?.[0]?.hasSeen) ||
+                      (row.original as any)?.status === "draft" ||
+                      (row.original as any)?.incomingInstances?.[0]?.status ===
+                        "draft" ||
+                      (row.original as any)?.content?.[0]?.ccs?.[0]?.hasSeen ===
+                        false
+                        ? "bg-primary-50 dark:bg-primary-900/20 hover:bg-primary-100 dark:hover:bg-primary-900/30 font-semibold border-l-4 border-l-primary-500 dark:border-l-primary-400"
+                        : "hover:bg-gray-50 dark:hover:bg-gray-800/50"
+                    }`}
+                  >
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell
+                        key={cell.id}
+                        className="whitespace-nowrap px-2 md:px-4 py-2 text-base"
+                      >
+                        <div className="max-h-[110px] max-w-[460px] overflow-y-auto overflow-x-auto scrollbar-hidden hover:cursor-pointer custom-scrollbar">
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext(),
+                          )}
+                        </div>
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell
+                    colSpan={columns.length}
+                    className="h-16 md:h-24 text-center text-base"
+                  >
+                    {t("common.noResult")}
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </ShadcnTable>
+        </div>
+      </div>
+
+      {/* Pagination only when more than one page */}
+      {safeTotalCount > pageSize && (
+        <div className="px-2">
+          <DataTablePaginationFinal table={table} itemCount={safeTotalCount} />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/DelegationView.tsx b/apps/edr-freight-web/backoffice/src/record-management/common/DelegationView.tsx
new file mode 100644
index 000000000..846080fdd
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/DelegationView.tsx
@@ -0,0 +1,104 @@
+import { t } from "i18next";
+import { useAuthUser } from "../hooks/useAuthUser";
+import { useNavigate } from "react-router-dom";
+
+const DelegationView = () => {
+  const { logout } = useAuthUser();
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    logout();
+  };
+
+  const handleNavigateToDelegation = () => {
+    navigate("/record-management/delegation");
+  };
+
+  return (
+    <div className="flex-1 flex items-center justify-center p-4 bg-gradient-to-br from-red-50 via-orange-50 to-amber-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
+      <div className="w-full max-w-2xl bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg rounded-3xl border border-red-200/60 dark:border-red-800/60 shadow-2xl p-8">
+        {/* Main Icon Container */}
+        <div className="relative mb-8">
+          <div className="relative w-24 h-24 bg-gradient-to-br from-red-100 to-orange-100 dark:from-red-900/40 dark:to-orange-900/40 rounded-full flex items-center justify-center shadow-lg animate-soft-pulse mx-auto">
+            <div className="absolute inset-0 bg-white/30 dark:bg-gray-700/30 rounded-full animate-ping opacity-60"></div>
+            <svg
+              className="w-12 h-12 text-red-600 dark:text-red-400 relative z-10"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+            >
+              <path
+                fillRule="evenodd"
+                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </div>
+
+          {/* Decorative elements */}
+          <div className="absolute top-0 right-10 w-8 h-8 bg-yellow-100 dark:bg-yellow-900/40 rounded-full animate-bounce"></div>
+          <div className="absolute bottom-2 left-10 w-6 h-6 bg-orange-100 dark:bg-orange-900/40 rounded-full animate-bounce delay-300"></div>
+        </div>
+
+        {/* Main Content */}
+        <div className="text-center mb-8">
+          <h2 className="text-3xl font-bold bg-gradient-to-r from-red-700 to-orange-700 dark:from-red-400 dark:to-orange-400 bg-clip-text text-transparent mb-4">
+            {t("msg.accessDenied")}
+          </h2>
+
+          <div className="bg-white/80 dark:bg-gray-700/80 p-6 rounded-xl border border-gray-100 dark:border-gray-600 shadow-sm mb-6 max-w-md mx-auto">
+            <p className="text-sm text-gray-600 dark:text-gray-300 opacity-90 leading-6">
+              {t("userIncoming.errDelegation")}
+            </p>
+          </div>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex flex-col sm:flex-row gap-4 w-full max-w-md mx-auto">
+          {/* Sign Out Button */}
+          <button
+            onClick={handleLogout}
+            className="group flex-1 px-6 py-4 bg-white dark:bg-gray-700 border border-red-200 dark:border-red-700 text-red-700 dark:text-red-400 rounded-xl hover:bg-red-50 dark:hover:bg-red-900/20 hover:border-red-300 dark:hover:border-red-600 hover:shadow-lg transition-all duration-300 font-semibold flex items-center justify-center gap-3 shadow-sm hover:scale-105"
+          >
+            <svg
+              className="w-5 h-5 group-hover:scale-110 transition-transform duration-300"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+              />
+            </svg>
+            {t("profile.signOut")}
+          </button>
+
+          {/* Delegation Management Button */}
+          <button
+            onClick={handleNavigateToDelegation}
+            className="group flex-1 px-6 py-4 bg-gradient-to-r from-red-600 to-orange-600 text-white rounded-xl hover:from-red-700 hover:to-orange-700 hover:shadow-xl transition-all duration-300 font-semibold flex items-center justify-center gap-3 shadow-md hover:scale-105"
+          >
+            <svg
+              className="w-5 h-5 group-hover:scale-110 transition-transform duration-300"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"
+              />
+            </svg>
+            {t("header.navigation.delegation")}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DelegationView;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/DynamicModal.tsx b/apps/edr-freight-web/backoffice/src/record-management/common/DynamicModal.tsx
new file mode 100644
index 000000000..c37e9dbc2
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/DynamicModal.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/shared/common/ui/dialog";
+import { Button } from "@/shared/common/ui/button";
+
+interface DynamicModalProps {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  renderContent: React.ReactNode;
+  confirmButtonText?: string;
+  cancelButtonText?: string;
+}
+
+const DynamicModal: React.FC<DynamicModalProps> = ({
+  open,
+  onClose,
+  onConfirm,
+  renderContent,
+  confirmButtonText = "OK",
+  cancelButtonText = "Cancel",
+}) => {
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Modal</DialogTitle>
+        </DialogHeader>
+        {renderContent}
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>
+            {cancelButtonText}
+          </Button>
+          <Button onClick={onConfirm}>{confirmButtonText}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default DynamicModal;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/EnhancedDynamicModal.tsx b/apps/edr-freight-web/backoffice/src/record-management/common/EnhancedDynamicModal.tsx
new file mode 100644
index 000000000..a826bb5df
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/EnhancedDynamicModal.tsx
@@ -0,0 +1,402 @@
+import React from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/shared/common/ui/dialog";
+import { Button } from "@/shared/common/ui/button";
+import { toast } from "sonner";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { MultiSelect } from "@/shared/common/ui/multi-select";
+import { useForm } from "react-hook-form";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/shared/common/ui/form";
+import { useTranslation } from "react-i18next";
+
+interface ActionConfig {
+  type:
+    | "accept"
+    | "delete"
+    | "submit"
+    | "custom"
+    | "adjust"
+    | "forward"
+    | "assigne"
+    | "reject"
+    | "download";
+  confirmText?: string;
+  confirmVariant?:
+    | "default"
+    | "destructive"
+    | "outline"
+    | "secondary"
+    | "ghost"
+    | "link";
+  isLoading?: boolean;
+  disabled?: boolean;
+  onAction: (data?: Record<string, any>) => Promise<void> | void;
+}
+
+interface FormFieldConfig {
+  name: string;
+  label: string;
+  type: "text" | "textarea" | "select" | "checkbox" | "multiselect";
+  placeholder?: string;
+  options?: {
+    value: string;
+    label: string;
+    icon?: React.ComponentType<{ className?: string }>;
+  }[];
+  defaultValue?: any;
+  required?: boolean;
+  rules?: Record<string, any>;
+  variant?: "default" | "secondary" | "destructive" | "inverted";
+  animation?: number;
+  maxCount?: number;
+}
+
+interface DynamicModalProps {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  description?: string;
+  actionConfig: ActionConfig;
+  formConfig?: {
+    fields: FormFieldConfig[];
+    onSubmit?: (data: Record<string, any>) => void | Promise<void>;
+    defaultValues?: Record<string, any>;
+  };
+  customContent?: React.ReactNode;
+}
+
+// 👇 Loader Component
+const Loader = () => (
+  <svg
+    className="animate-spin h-4 w-4 text-white"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      className="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      strokeWidth="4"
+    ></circle>
+    <path
+      className="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8v8H4z"
+    ></path>
+  </svg>
+);
+
+const EnhancedDynamicModal: React.FC<DynamicModalProps> = ({
+  open,
+  onClose,
+  title,
+  description,
+  actionConfig,
+  formConfig,
+  customContent,
+}) => {
+  const form = useForm({
+    defaultValues: formConfig?.defaultValues || {},
+  });
+
+  const [loading, setLoading] = React.useState(false);
+  const [formData, setFormData] = React.useState<Record<string, any>>({});
+  const { t } = useTranslation();
+
+  const handleSubmit = async (data: Record<string, any>) => {
+    try {
+      setLoading(true);
+      if (formConfig?.onSubmit) {
+        await formConfig.onSubmit(data);
+      }
+      await actionConfig.onAction(data);
+      onClose();
+    } catch (error) {
+      console.error("Modal submission error:", error);
+      toast.error(
+        "Action failed: " +
+          (error instanceof Error ? error.message : String(error)),
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleActionClick = async () => {
+    try {
+      setLoading(true);
+      await actionConfig.onAction();
+      onClose();
+    } catch (error) {
+      console.error("Action failed:", error);
+      toast.error(
+        "Action failed: " +
+          (error instanceof Error ? error.message : String(error)),
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleChange = (
+    e: React.ChangeEvent<
+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    >,
+  ) => {
+    const { name, value, type } = e.target;
+    const checked =
+      type === "checkbox" ? (e.target as HTMLInputElement).checked : undefined;
+
+    setFormData((prev) => ({
+      ...prev,
+      [name]: type === "checkbox" ? checked : value,
+    }));
+  };
+
+  const getActionButtonText = () => {
+    if (actionConfig.confirmText) return actionConfig.confirmText;
+    switch (actionConfig.type) {
+      case "accept":
+        return "Accept";
+      case "delete":
+        return "Delete";
+      case "submit":
+        return "Submit";
+      case "adjust":
+        return "Adjust";
+      case "forward":
+        return "Forward";
+      case "reject":
+        return "Reject";
+      default:
+        return "Confirm";
+    }
+  };
+
+  const getActionButtonVariant = () => {
+    if (actionConfig.confirmVariant) return actionConfig.confirmVariant;
+    switch (actionConfig.type) {
+      case "delete":
+        return "destructive";
+      default:
+        return "default";
+    }
+  };
+
+  const renderFormField = (field: FormFieldConfig) => {
+    switch (field.type) {
+      case "multiselect":
+        return (
+          <FormField
+            control={form.control}
+            name={field.name}
+            rules={field.rules}
+            render={({ field: formField }) => (
+              <FormItem className="space-y-1">
+                <FormLabel>{field.label}</FormLabel>
+                <FormControl>
+                  <MultiSelect
+                    options={field.options || []}
+                    onValueChange={(value: string[]) => {
+                      formField.onChange(value);
+                    }}
+                    defaultValue={formField.value}
+                    placeholder={field.placeholder}
+                    variant={field.variant || "default"}
+                    animation={field.animation || 0}
+                    maxCount={field.maxCount || 3}
+                    className="z-[60]"
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        );
+      case "select":
+        return (
+          <FormField
+            control={form.control}
+            name={field.name}
+            render={({ field: formField }) => (
+              <FormItem>
+                <FormLabel>{field.label}</FormLabel>
+                <Select
+                  onValueChange={formField.onChange}
+                  value={formField.value}
+                >
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder={field.placeholder} />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent className="z-[80]">
+                    {field.options?.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        );
+      case "text":
+        return (
+          <FormField
+            key={field.name}
+            control={form.control}
+            name={field.name}
+            render={({ field: formField }) => (
+              <FormItem>
+                <FormLabel>{field.label}</FormLabel>
+                <FormControl>
+                  <input
+                    {...formField}
+                    type="text"
+                    placeholder={field.placeholder}
+                    className="w-full px-3 py-2 border rounded"
+                    required={field.required}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        );
+
+      case "textarea":
+        return (
+          <FormField
+            key={field.name}
+            control={form.control}
+            name={field.name}
+            render={({ field: formField }) => (
+              <FormItem className="w-full">
+                <FormLabel>{field.label}</FormLabel>
+                <FormControl>
+                  <textarea
+                    {...formField}
+                    placeholder={field.placeholder}
+                    className="w-full px-3 py-2 border rounded resize-none break-words overflow-wrap-anywhere whitespace-pre-wrap"
+                    style={{ wordBreak: 'break-word', overflowWrap: 'break-word' }}
+                    rows={4}
+                    required={field.required}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        );
+
+      case "checkbox":
+        return (
+          <div className="mb-4 flex items-center" key={field.name}>
+            <input
+              type="checkbox"
+              id={field.name}
+              name={field.name}
+              checked={!!formData[field.name]}
+              onChange={handleChange}
+              className="mr-2 bg-primary-800"
+              required={field.required}
+            />
+            <label htmlFor={field.name} className="text-sm font-medium">
+              {field.label}
+            </label>
+          </div>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          {description && (
+            <p className="text-sm text-muted-foreground">{description}</p>
+          )}
+        </DialogHeader>
+
+        {customContent}
+
+        {formConfig ? (
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(handleSubmit)}
+              className="space-y-4 w-full"
+            >
+              <div className="w-full space-y-4">
+              {formConfig.fields.map((field) => (
+                <React.Fragment key={field.name}>
+                  {renderFormField(field)}
+                </React.Fragment>
+              ))}
+              </div>
+
+              <DialogFooter>
+                <Button variant="outline" onClick={onClose} disabled={loading}>
+                  {t("common.Cancel")}
+                </Button>
+                <Button
+                  type="submit"
+                  variant={getActionButtonVariant()}
+                  disabled={loading}
+                  className=" bg-primary-800"
+                >
+                  {loading ? <Loader /> : getActionButtonText()}
+                </Button>
+              </DialogFooter>
+            </form>
+          </Form>
+        ) : (
+          <>
+            {customContent}
+            <DialogFooter>
+              <Button variant="outline" onClick={onClose} disabled={loading}>
+                {t("common.Cancel")}
+              </Button>
+              <Button
+                onClick={handleActionClick}
+                variant={getActionButtonVariant()}
+                disabled={loading}
+                className=" bg-primary-800"
+              >
+                {loading ? <Loader /> : getActionButtonText()}
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default EnhancedDynamicModal;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/Loader/Animation - 1750141072607.json b/apps/edr-freight-web/backoffice/src/record-management/common/Loader/Animation - 1750141072607.json
new file mode 100644
index 000000000..0760d49c7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/Loader/Animation - 1750141072607.json	
@@ -0,0 +1,893 @@
+{
+  "v": "4.8.0",
+  "meta": {
+    "g": "LottieFiles AE 1.1.0",
+    "a": "",
+    "k": "",
+    "d": "",
+    "tc": "#-1ffff"
+  },
+  "fr": 50,
+  "ip": 0,
+  "op": 100,
+  "w": 1920,
+  "h": 1080,
+  "nm": "Comp 1",
+  "ddd": 0,
+  "assets": [],
+  "layers": [
+    {
+      "ddd": 0,
+      "ind": 1,
+      "ty": 3,
+      "nm": "Null 1",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 0, "ix": 11 },
+        "r": {
+          "a": 1,
+          "k": [
+            {
+              "i": { "x": [0.177], "y": [1] },
+              "o": { "x": [0.619], "y": [0] },
+              "t": 0,
+              "s": [0]
+            },
+            {
+              "i": { "x": [0.347], "y": [1] },
+              "o": { "x": [0.806], "y": [0] },
+              "t": 50,
+              "s": [360]
+            },
+            { "t": 100, "s": [720] }
+          ],
+          "ix": 10
+        },
+        "p": { "a": 0, "k": [960, 540, 0], "ix": 2 },
+        "a": { "a": 0, "k": [0, 0, 0], "ix": 1 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "ip": 0,
+      "op": 100.1001001001,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 2,
+      "ty": 4,
+      "nm": "Ellipse 5",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 1,
+          "k": [
+            {
+              "i": { "x": [0.667], "y": [1] },
+              "o": { "x": [0.333], "y": [0] },
+              "t": 0,
+              "s": [80]
+            },
+            {
+              "i": { "x": [0.667], "y": [1] },
+              "o": { "x": [0.333], "y": [0] },
+              "t": 50,
+              "s": [100]
+            },
+            { "t": 97.91796875, "s": [80] }
+          ],
+          "ix": 11
+        },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": {
+          "a": 1,
+          "k": [
+            {
+              "i": { "x": 0.667, "y": 1 },
+              "o": { "x": 0.333, "y": 0 },
+              "t": 0,
+              "s": [0, 0, 0],
+              "to": [-5.422, 30.78, 0],
+              "ti": [0, 0, 0]
+            },
+            {
+              "i": { "x": 0.667, "y": 1 },
+              "o": { "x": 0.333, "y": 0 },
+              "t": 50,
+              "s": [-32.529, 184.683, 0],
+              "to": [0, 0, 0],
+              "ti": [-5.422, 30.78, 0]
+            },
+            { "t": 97.91796875, "s": [0, 0, 0] }
+          ],
+          "ix": 2
+        },
+        "a": { "a": 0, "k": [0, 0, 0], "ix": 1 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "d": 1,
+              "ty": "el",
+              "s": { "a": 0, "k": [118, 118], "ix": 2 },
+              "p": { "a": 0, "k": [0, 0], "ix": 3 },
+              "nm": "Ellipse Path 1",
+              "mn": "ADBE Vector Shape - Ellipse",
+              "hd": false
+            },
+            {
+              "ty": "op",
+              "nm": "Offset Paths 1",
+              "a": { "a": 0, "k": -0.5, "ix": 1 },
+              "lj": 1,
+              "ml": { "a": 0, "k": 4, "ix": 3 },
+              "ix": 3,
+              "mn": "ADBE Vector Filter - Offset",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Ellipse 4 Stroke",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        },
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "d": 1,
+              "ty": "el",
+              "s": { "a": 0, "k": [118, 118], "ix": 2 },
+              "p": { "a": 0, "k": [0, 0], "ix": 3 },
+              "nm": "Ellipse Path 1",
+              "mn": "ADBE Vector Shape - Ellipse",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": {
+                "a": 1,
+                "k": [
+                  {
+                    "i": { "x": [0.667], "y": [1] },
+                    "o": { "x": [0.333], "y": [0] },
+                    "t": 8.332,
+                    "s": [0.882352948189, 0.031372550875, 0.494117647409, 1]
+                  },
+                  {
+                    "i": { "x": [0.667], "y": [1] },
+                    "o": { "x": [0.333], "y": [0] },
+                    "t": 83.332,
+                    "s": [0.882352948189, 0.031372550875, 0.494117647409, 1]
+                  },
+                  {
+                    "t": 91.66796875,
+                    "s": [0.886274516582, 0.172549024224, 0.141176477075, 1]
+                  }
+                ],
+                "ix": 4
+              },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Ellipse 4 Fill",
+          "np": 2,
+          "cix": 2,
+          "bm": 0,
+          "ix": 2,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 100.1001001001,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 3,
+      "ty": 4,
+      "nm": "Ellipse 4",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 1,
+          "k": [
+            {
+              "i": { "x": [0.667], "y": [1] },
+              "o": { "x": [0.333], "y": [0] },
+              "t": 0,
+              "s": [80]
+            },
+            {
+              "i": { "x": [0.667], "y": [1] },
+              "o": { "x": [0.333], "y": [0] },
+              "t": 50,
+              "s": [100]
+            },
+            { "t": 97.91796875, "s": [80] }
+          ],
+          "ix": 11
+        },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": {
+          "a": 1,
+          "k": [
+            {
+              "i": { "x": 0.667, "y": 1 },
+              "o": { "x": 0.333, "y": 0 },
+              "t": 0,
+              "s": [0, 0, 0],
+              "to": [-31.447, 3.79, 0],
+              "ti": [0, 0, 0]
+            },
+            {
+              "i": { "x": 0.667, "y": 1 },
+              "o": { "x": 0.333, "y": 0 },
+              "t": 50,
+              "s": [-188.683, 22.739, 0],
+              "to": [0, 0, 0],
+              "ti": [-31.447, 3.79, 0]
+            },
+            { "t": 97.91796875, "s": [0, 0, 0] }
+          ],
+          "ix": 2
+        },
+        "a": { "a": 0, "k": [0, 0, 0], "ix": 1 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "d": 1,
+              "ty": "el",
+              "s": { "a": 0, "k": [118, 118], "ix": 2 },
+              "p": { "a": 0, "k": [0, 0], "ix": 3 },
+              "nm": "Ellipse Path 1",
+              "mn": "ADBE Vector Shape - Ellipse",
+              "hd": false
+            },
+            {
+              "ty": "op",
+              "nm": "Offset Paths 1",
+              "a": { "a": 0, "k": -0.5, "ix": 1 },
+              "lj": 1,
+              "ml": { "a": 0, "k": 4, "ix": 3 },
+              "ix": 3,
+              "mn": "ADBE Vector Filter - Offset",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Ellipse 4 Stroke",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        },
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "d": 1,
+              "ty": "el",
+              "s": { "a": 0, "k": [118, 118], "ix": 2 },
+              "p": { "a": 0, "k": [0, 0], "ix": 3 },
+              "nm": "Ellipse Path 1",
+              "mn": "ADBE Vector Shape - Ellipse",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": {
+                "a": 1,
+                "k": [
+                  {
+                    "i": { "x": [0.667], "y": [1] },
+                    "o": { "x": [0.333], "y": [0] },
+                    "t": 8.332,
+                    "s": [0.937254905701, 0.337254911661, 0.0941176489, 1]
+                  },
+                  {
+                    "i": { "x": [0.667], "y": [1] },
+                    "o": { "x": [0.333], "y": [0] },
+                    "t": 83.332,
+                    "s": [0.937254905701, 0.337254911661, 0.0941176489, 1]
+                  },
+                  {
+                    "t": 91.66796875,
+                    "s": [0.886274516582, 0.172549024224, 0.141176477075, 1]
+                  }
+                ],
+                "ix": 4
+              },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Ellipse 4 Fill",
+          "np": 2,
+          "cix": 2,
+          "bm": 0,
+          "ix": 2,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 100.1001001001,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 4,
+      "ty": 4,
+      "nm": "Ellipse 3",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 1,
+          "k": [
+            {
+              "i": { "x": [0.667], "y": [1] },
+              "o": { "x": [0.333], "y": [0] },
+              "t": 0,
+              "s": [80]
+            },
+            {
+              "i": { "x": [0.667], "y": [1] },
+              "o": { "x": [0.333], "y": [0] },
+              "t": 50,
+              "s": [100]
+            },
+            { "t": 97.91796875, "s": [80] }
+          ],
+          "ix": 11
+        },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": {
+          "a": 1,
+          "k": [
+            {
+              "i": { "x": 0.667, "y": 1 },
+              "o": { "x": 0.333, "y": 0 },
+              "t": 0,
+              "s": [0, 0, 0],
+              "to": [28.75, 12.877, 0],
+              "ti": [0, 0, 0]
+            },
+            {
+              "i": { "x": 0.667, "y": 1 },
+              "o": { "x": 0.333, "y": 0 },
+              "t": 50,
+              "s": [172.499, 77.265, 0],
+              "to": [0, 0, 0],
+              "ti": [28.75, 12.877, 0]
+            },
+            { "t": 97.91796875, "s": [0, 0, 0] }
+          ],
+          "ix": 2
+        },
+        "a": { "a": 0, "k": [0, 0, 0], "ix": 1 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "d": 1,
+              "ty": "el",
+              "s": { "a": 0, "k": [118, 118], "ix": 2 },
+              "p": { "a": 0, "k": [0, 0], "ix": 3 },
+              "nm": "Ellipse Path 1",
+              "mn": "ADBE Vector Shape - Ellipse",
+              "hd": false
+            },
+            {
+              "ty": "op",
+              "nm": "Offset Paths 1",
+              "a": { "a": 0, "k": -0.5, "ix": 1 },
+              "lj": 1,
+              "ml": { "a": 0, "k": 4, "ix": 3 },
+              "ix": 3,
+              "mn": "ADBE Vector Filter - Offset",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Ellipse 3 Stroke",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        },
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "d": 1,
+              "ty": "el",
+              "s": { "a": 0, "k": [118, 118], "ix": 2 },
+              "p": { "a": 0, "k": [0, 0], "ix": 3 },
+              "nm": "Ellipse Path 1",
+              "mn": "ADBE Vector Shape - Ellipse",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": {
+                "a": 1,
+                "k": [
+                  {
+                    "i": { "x": [0.667], "y": [1] },
+                    "o": { "x": [0.333], "y": [0] },
+                    "t": 8.332,
+                    "s": [0.04705882445, 0.772549033165, 0.57647061348, 1]
+                  },
+                  {
+                    "i": { "x": [0.667], "y": [1] },
+                    "o": { "x": [0.333], "y": [0] },
+                    "t": 83.332,
+                    "s": [0.04705882445, 0.772549033165, 0.57647061348, 1]
+                  },
+                  {
+                    "t": 91.66796875,
+                    "s": [0.886274516582, 0.172549024224, 0.141176477075, 1]
+                  }
+                ],
+                "ix": 4
+              },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Ellipse 3 Fill",
+          "np": 2,
+          "cix": 2,
+          "bm": 0,
+          "ix": 2,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 100.1001001001,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 5,
+      "ty": 4,
+      "nm": "Ellipse 2",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 1,
+          "k": [
+            {
+              "i": { "x": [0.667], "y": [1] },
+              "o": { "x": [0.333], "y": [0] },
+              "t": 0,
+              "s": [80]
+            },
+            {
+              "i": { "x": [0.667], "y": [1] },
+              "o": { "x": [0.333], "y": [0] },
+              "t": 50,
+              "s": [100]
+            },
+            { "t": 97.91796875, "s": [80] }
+          ],
+          "ix": 11
+        },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": {
+          "a": 1,
+          "k": [
+            {
+              "i": { "x": 0.667, "y": 1 },
+              "o": { "x": 0.333, "y": 0 },
+              "t": 0,
+              "s": [0, 0, 0],
+              "to": [22.333, -22.333, 0],
+              "ti": [0, 0, 0]
+            },
+            {
+              "i": { "x": 0.667, "y": 1 },
+              "o": { "x": 0.333, "y": 0 },
+              "t": 50,
+              "s": [134, -134, 0],
+              "to": [0, 0, 0],
+              "ti": [22.333, -22.333, 0]
+            },
+            { "t": 97.91796875, "s": [0, 0, 0] }
+          ],
+          "ix": 2
+        },
+        "a": { "a": 0, "k": [0, 0, 0], "ix": 1 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "d": 1,
+              "ty": "el",
+              "s": { "a": 0, "k": [118, 118], "ix": 2 },
+              "p": { "a": 0, "k": [0, 0], "ix": 3 },
+              "nm": "Ellipse Path 1",
+              "mn": "ADBE Vector Shape - Ellipse",
+              "hd": false
+            },
+            {
+              "ty": "op",
+              "nm": "Offset Paths 1",
+              "a": { "a": 0, "k": -0.5, "ix": 1 },
+              "lj": 1,
+              "ml": { "a": 0, "k": 4, "ix": 3 },
+              "ix": 3,
+              "mn": "ADBE Vector Filter - Offset",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Ellipse 2 Stroke",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        },
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "d": 1,
+              "ty": "el",
+              "s": { "a": 0, "k": [118, 118], "ix": 2 },
+              "p": { "a": 0, "k": [0, 0], "ix": 3 },
+              "nm": "Ellipse Path 1",
+              "mn": "ADBE Vector Shape - Ellipse",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": {
+                "a": 1,
+                "k": [
+                  {
+                    "i": { "x": [0.667], "y": [1] },
+                    "o": { "x": [0.333], "y": [0] },
+                    "t": 8.332,
+                    "s": [0, 0.584313750267, 0.921568632126, 1]
+                  },
+                  {
+                    "i": { "x": [0.667], "y": [1] },
+                    "o": { "x": [0.333], "y": [0] },
+                    "t": 83.332,
+                    "s": [0, 0.584313750267, 0.921568632126, 1]
+                  },
+                  {
+                    "t": 91.66796875,
+                    "s": [0.886274516582, 0.172549024224, 0.141176477075, 1]
+                  }
+                ],
+                "ix": 4
+              },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Ellipse 2 Fill",
+          "np": 2,
+          "cix": 2,
+          "bm": 0,
+          "ix": 2,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 100.1001001001,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 6,
+      "ty": 4,
+      "nm": "Ellipse 1",
+      "parent": 1,
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 1,
+          "k": [
+            {
+              "i": { "x": [0.188], "y": [1] },
+              "o": { "x": [0.333], "y": [0] },
+              "t": 0,
+              "s": [80]
+            },
+            {
+              "i": { "x": [0.667], "y": [1] },
+              "o": { "x": [0.899], "y": [-0.919] },
+              "t": 50,
+              "s": [100]
+            },
+            { "t": 97.91796875, "s": [80] }
+          ],
+          "ix": 11
+        },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": {
+          "a": 1,
+          "k": [
+            {
+              "i": { "x": 0.667, "y": 1 },
+              "o": { "x": 0.333, "y": 0 },
+              "t": 0,
+              "s": [0, 0, 0],
+              "to": [-14.904, -28.412, 0],
+              "ti": [0, 0, 0]
+            },
+            {
+              "i": { "x": 0.667, "y": 1 },
+              "o": { "x": 0.333, "y": 0 },
+              "t": 50,
+              "s": [-89.422, -170.473, 0],
+              "to": [0, 0, 0],
+              "ti": [-14.904, -28.412, 0]
+            },
+            { "t": 97.91796875, "s": [0, 0, 0] }
+          ],
+          "ix": 2
+        },
+        "a": { "a": 0, "k": [0, 0, 0], "ix": 1 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "d": 1,
+              "ty": "el",
+              "s": { "a": 0, "k": [118, 118], "ix": 2 },
+              "p": { "a": 0, "k": [0, 0], "ix": 3 },
+              "nm": "Ellipse Path 1",
+              "mn": "ADBE Vector Shape - Ellipse",
+              "hd": false
+            },
+            {
+              "ty": "op",
+              "nm": "Offset Paths 1",
+              "a": { "a": 0, "k": -0.5, "ix": 1 },
+              "lj": 1,
+              "ml": { "a": 0, "k": 4, "ix": 3 },
+              "ix": 3,
+              "mn": "ADBE Vector Filter - Offset",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Ellipse 1 Stroke",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        },
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "d": 1,
+              "ty": "el",
+              "s": { "a": 0, "k": [118, 118], "ix": 2 },
+              "p": { "a": 0, "k": [0, 0], "ix": 3 },
+              "nm": "Ellipse Path 1",
+              "mn": "ADBE Vector Shape - Ellipse",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": {
+                "a": 1,
+                "k": [
+                  {
+                    "i": { "x": [0.667], "y": [1] },
+                    "o": { "x": [0.333], "y": [0] },
+                    "t": 8.332,
+                    "s": [0.439215689898, 0.278431385756, 0.917647063732, 1]
+                  },
+                  {
+                    "i": { "x": [0.667], "y": [1] },
+                    "o": { "x": [0.333], "y": [0] },
+                    "t": 83.332,
+                    "s": [0.439215689898, 0.278431385756, 0.917647063732, 1]
+                  },
+                  {
+                    "t": 91.66796875,
+                    "s": [0.886274516582, 0.172549024224, 0.141176477075, 1]
+                  }
+                ],
+                "ix": 4
+              },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Ellipse 1 Fill",
+          "np": 2,
+          "cix": 2,
+          "bm": 0,
+          "ix": 2,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 100.1001001001,
+      "st": 0,
+      "bm": 0
+    }
+  ],
+  "markers": []
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/NavBar.tsx b/apps/edr-freight-web/backoffice/src/record-management/common/NavBar.tsx
new file mode 100644
index 000000000..957052be0
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/NavBar.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const NavBar: React.FC = () => {
+  return <div></div>;
+};
+
+export default NavBar;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/NotificationCard.tsx b/apps/edr-freight-web/backoffice/src/record-management/common/NotificationCard.tsx
new file mode 100644
index 000000000..e04d89a4d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/NotificationCard.tsx
@@ -0,0 +1,196 @@
+import { useState } from "react";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { Bell, CheckCircle, Clock } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/shared/common/ui/dialog";
+
+interface LocaleValidationDto {
+  am?: string;
+  en: string;
+}
+
+interface NotificationCardProps {
+  id: string;
+  time?: string;
+  isUnread: boolean;
+  subject?: LocaleValidationDto;
+  onClick: (id: string) => void;
+  onRemind?: (id: string, minutes: number) => void;
+}
+
+const NotificationCard = ({
+  id,
+  subject,
+  time,
+  isUnread,
+  onClick,
+  onRemind,
+}: NotificationCardProps) => {
+  const localizedName = useLocalizedName();
+  const [showReminder, setShowReminder] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+  const [openFullText, setOpenFullText] = useState(false);
+  const safeTime = typeof time === "string" ? time : "";
+  const safeSubject = subject ?? { en: "Notification", am: "" };
+  const safeSubjectText =
+    localizedName(safeSubject as { am: string; en: string }) || "Notification";
+  const hasSubjectText = safeSubjectText.trim().length > 0;
+
+  const handleRemind = (minutes: number, e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (onRemind) {
+      onRemind(id, minutes);
+      setShowReminder(false);
+    }
+  };
+
+  return (
+    <div
+      className={`group flex cursor-pointer items-start gap-2 rounded-xl p-2.5 shadow-sm ring-1 ring-inset transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md sm:gap-3 sm:p-3 ${
+        isUnread
+          ? "bg-primary-50/80 ring-primary-300 hover:bg-primary-50 dark:bg-primary-900/25 dark:ring-primary-700/50 dark:hover:bg-primary-900/35"
+          : "bg-white ring-gray-200 hover:bg-gray-50 dark:bg-gray-900 dark:ring-gray-700 dark:hover:bg-gray-800"
+      }`}
+      onClick={() => onClick(id)}
+    >
+      <div
+        className={`mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${
+          isUnread
+            ? "bg-primary-100 text-primary-700 dark:bg-primary-800/60 dark:text-primary-300"
+            : "bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-300"
+        }`}
+      >
+        <Bell
+          className={`h-4 w-4 ${
+            isUnread
+              ? "text-primary-600 dark:text-primary-300"
+              : "text-gray-500 dark:text-gray-300"
+          }`}
+        />
+      </div>
+
+      <div className="flex-1 min-w-0">
+        <div className="flex items-start gap-2">
+          <p
+            className={`min-w-0 break-words text-sm font-semibold text-gray-900 dark:text-gray-100 ${
+              expanded ? "line-clamp-none" : "line-clamp-2"
+            }`}
+          >
+            {safeSubjectText}
+          </p>
+          {isUnread && (
+            <span className="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-primary-500 animate-pulse"></span>
+          )}
+        </div>
+
+        <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1">
+          {hasSubjectText && (
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                setExpanded((prev) => !prev);
+              }}
+              className="text-[11px] font-medium text-primary-600 hover:text-primary-700 hover:underline dark:text-primary-400 dark:hover:text-primary-300"
+            >
+              {expanded ? "Show less" : "Show more"}
+            </button>
+          )}
+
+          {hasSubjectText && (
+            <Dialog open={openFullText} onOpenChange={setOpenFullText}>
+              <DialogTrigger asChild>
+                <button
+                  type="button"
+                  onClick={(e) => e.stopPropagation()}
+                  className="text-[11px] font-medium text-primary-600 hover:text-primary-700 hover:underline dark:text-primary-400 dark:hover:text-primary-300"
+                >
+                  View full
+                </button>
+              </DialogTrigger>
+              <DialogContent
+                className="w-[calc(100vw-2rem)] max-w-lg border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900"
+                onClick={(e: React.MouseEvent<HTMLDivElement>) =>
+                  e.stopPropagation()
+                }
+              >
+                <DialogHeader>
+                  <DialogTitle className="text-base font-semibold text-gray-900 dark:text-gray-100">
+                    Notification
+                  </DialogTitle>
+                  <DialogDescription className="text-xs text-gray-500 dark:text-gray-400">
+                    {safeTime}
+                  </DialogDescription>
+                </DialogHeader>
+                <div className="max-h-[50vh] overflow-y-auto rounded-md bg-gray-50 p-3 text-sm leading-relaxed text-gray-700 dark:bg-gray-800 dark:text-gray-200">
+                  <p className="whitespace-pre-wrap break-words">
+                    {safeSubjectText}
+                  </p>
+                </div>
+              </DialogContent>
+            </Dialog>
+          )}
+        </div>
+
+        <p className="mt-1 text-[11px] font-medium text-gray-400 dark:text-gray-500">
+          {safeTime}
+        </p>
+      </div>
+
+      <div className="flex shrink-0 items-center gap-1 sm:gap-2">
+        {onRemind && (
+          <DropdownMenu open={showReminder} onOpenChange={setShowReminder}>
+            <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 w-7 p-0 hover:bg-primary-100"
+              >
+                <Clock className="h-4 w-4 text-gray-500" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-48">
+              <DropdownMenuItem onClick={(e) => handleRemind(5, e)}>
+                Remind in 5 minutes
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={(e) => handleRemind(15, e)}>
+                Remind in 15 minutes
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={(e) => handleRemind(30, e)}>
+                Remind in 30 minutes
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={(e) => handleRemind(60, e)}>
+                Remind in 1 hour
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={(e) => handleRemind(240, e)}>
+                Remind in 4 hours
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={(e) => handleRemind(1440, e)}>
+                Remind tomorrow
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+
+        {!isUnread && (
+          <CheckCircle className="mt-1 h-4 w-4 self-start text-primary-500 dark:text-primary-400" />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default NotificationCard;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/RecordDetailCard.tsx b/apps/edr-freight-web/backoffice/src/record-management/common/RecordDetailCard.tsx
new file mode 100644
index 000000000..187fe8949
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/RecordDetailCard.tsx
@@ -0,0 +1,1453 @@
+"use client";
+
+import type React from "react";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  ChevronDown,
+  ChevronLeft,
+  ExternalLink,
+  Maximize,
+  Minimize,
+  RefreshCw,
+  View,
+  Printer,
+  X,
+} from "lucide-react";
+import {
+  useNavigate,
+  useLocation,
+  useSearchParams,
+  useParams,
+} from "react-router-dom";
+import { toast } from "sonner";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import FileList from "@/record-management/common/fileListComponent";
+import ParentContainer from "@/record-management/components/recordOfficer/recordDetails/ParentAssignementContainer";
+import RecordRemarksView from "@/record-management/components/recordOfficer/recordDetails/RecordRemarksView";
+import PrintDialog from "@/record-management/components/PrintDialog";
+import type { AttachmentFile } from "@/record-management/utils/printService";
+import type {
+  CollaboratorDto,
+  RecordDto,
+} from "../dto/userRecords/userRecordsDto";
+import type { ReceiverEmployeeDto } from "../dto/approval/approvalRecordsDto";
+import type { ReceiverPositionDto } from "../dto/userRecords/userRecordsDto";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { regeneratePdf } from "../services/api/userRecordService";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { t } from "i18next";
+import { useAuthUser } from "../hooks/useAuthUser";
+import { useUnitConfiguration } from "@/shared/hooks/useUnitConfiguration";
+import { useUserDetail } from "../components/hooks/useUserDetail";
+import type { MeDto } from "@/shared/dto/user/meDto";
+import { Button, getActionButtonVariant } from "@/shared/common/ui/button";
+import { CommentCard } from "@/record-management/common/WorkflowCommentHistory";
+import { renderStatus } from "../utils/renderDetails";
+import { InternalIncomingRecordActions } from "../components/userIncoming/internalIncomingRecords/internalIncomingRecordsActions";
+import { ExternalIncomingRecordActions } from "../components/userIncoming/externalIncomingRecords/externalIncomingRecordsColumns";
+import { CCIncomingRecordActions } from "../components/userIncoming/ccIncomingRecords/ccIncomingRecordsColumns";
+import UserRecordsActions from "../components/userRecords/userRecordsActions";
+import ApproveRecordsActions from "../components/Approval/ApproveRecords/approveRecordsActions";
+import CollaborationActionsComponent from "../components/collaborations/collaborationActions";
+import { DelegationRecordActions } from "../components/delegation/delegationColumnAction";
+import PendingRecordDetailActions from "../components/pendingRecords/pendingRecordDetailActions";
+import IncomingRecordDetailActions from "../components/recordOfficer/incomingRecords/incomingRecordDetailActions";
+import { IncomingRecordActions } from "../components/recordOfficer/incomingRecords/incomingRecordActions";
+import { Card, CardContent } from "@/shared/common/ui/card";
+import { Send } from "lucide-react";
+import RemarkList from "@/record-management/common/RemarkList";
+import MyApprovalRecordsActions from "../components/Approval/ApproveRecords/myApprovalRecordsActions";
+import MyApprovaRecordsActions from "../components/Approval/ApproveRecords/myApprovalRecordsActions";
+import { InternalIncomingRecordActionsV2 } from "../components/userIncoming/internalIncomingRecords/internalIncomingRecordsActionsV2";
+import { ExternalIncomingRecordActionsV2 } from "../components/userIncoming/externalIncomingRecords/externalIncomingRecordsColumnsV2";
+import { ReplySection } from "@/record-management/common/ReplySection";
+
+type Props = {
+  record: RecordDto;
+  attachmentUrl?: string;
+  backurl: string;
+  type:
+    | "incoming"
+    | "outgoing"
+    | "internal"
+    | "cc"
+    | "pending"
+    | "externalincoming"
+    | "userRecord"
+    | "collaboration"
+    | "approval"
+    | "delegation";
+  isDraft?: boolean;
+  isSecured?: boolean;
+  isLoadingAttachment?: boolean;
+  errorAttachment?: any;
+  attachmentMessage?: any;
+  actions?: string;
+  // Optional row payload for action components that need a shape the plain
+  // record fetch can't supply (e.g. the approval-task instance id).
+  actionRowData?: any;
+};
+
+const formatDate = (d?: string | null) =>
+  d
+    ? new Date(d).toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      })
+    : "—";
+
+const Box = ({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) => (
+  <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-4 hover:border-primary-200 dark:hover:border-primary-600 transition-colors">
+    <label className="block text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
+      {title}
+    </label>
+    {children}
+  </div>
+);
+
+const Info = ({
+  title,
+  value,
+  localizedName,
+  isRecordType = false,
+  infoKey,
+  isReplied = false,
+  replyid,
+  navigate,
+  letterType,
+}: {
+  title: string;
+  value?: string | null | undefined;
+  localizedName?: string;
+  isRecordType?: boolean;
+  infoKey?: string;
+  isReplied?: boolean;
+  replyid?: any;
+  navigate?: any;
+  letterType?: string;
+}) => {
+  const location = useLocation();
+  const currentUrl = location.pathname + location.search;
+  return (
+    <Box title={title}>
+      {infoKey === "status" ? (
+        <div className="flex items-center gap-2">
+          {renderStatus(value || "", value || "")}
+        </div>
+      ) : (
+        <p className="text-sm text-gray-900 dark:text-gray-200 font-medium break-words">
+          {isRecordType
+            ? t(`nav.${value}`)
+            : localizedName || value || (isReplied ? "" : "__")}
+        </p>
+      )}
+
+      {isReplied &&
+        Array.isArray(replyid) &&
+        replyid.map((item, index) => (
+          <div className="flex mt-1">
+            <button
+              key={item.id || index}
+              onClick={() =>
+                OnReplyClick(
+                  currentUrl,
+                  item.id || "",
+                  navigate,
+                  letterType || "",
+                )
+              }
+              className="
+      flex items-center gap-1.5
+      px-3 py-1.5
+      text-xs font-semibold text-white
+      bg-primary-500
+      border border-primary-600
+      rounded-l-lg
+      shadow-sm
+      hover:bg-primary-600
+      active:bg-primary-700
+      transition-all duration-200
+      focus:outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-1
+    ">
+              <View className="w-4 h-4" />
+              {t("common.viewReply")} {replyid.length > 1 && `#${index + 1}`}
+            </button>
+
+            <button
+              key={`${item.id || index}-2`}
+              onClick={() =>
+                OnReplyClickNewtab(currentUrl, item.id || "", letterType || "")
+              }
+              className="
+    flex items-center gap-1.5
+    px-3 py-1.5
+    text-xs font-semibold text-white
+    bg-primary-500
+    border border-primary-600
+    border-l-0
+    rounded-r-lg
+    shadow-sm
+    hover:bg-primary-600
+    active:bg-primary-700
+    transition-all duration-200
+    focus:outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-1
+  ">
+              <ExternalLink className="w-4 h-4" />
+            </button>
+          </div>
+        ))}
+    </Box>
+  );
+};
+
+const ChipList = ({
+  title,
+  items,
+  lang,
+  localizedName,
+}: {
+  title: string;
+  lang?: string | null;
+  localizedName: (name: any) => string | undefined;
+  items: (
+    | string
+    | {
+        employeePosition?: { employee?: { name: { am: string; en?: string } } };
+        position?: { name?: { am?: string; en?: string } };
+        name?: { am?: string; en?: string } | string;
+        unit?: { name?: { am?: string; en?: string } };
+      }
+  )[];
+}) => (
+  <Box title={title}>
+    {items.length ? (
+      <div className="space-y-2 max-h-40 overflow-y-auto pr-2">
+        {items.map((it, i) => {
+          let label: string;
+          if (typeof it === "string") {
+            label = String(it);
+          } else if (typeof it === "object" && it !== null) {
+            label =
+              (typeof it.name === "string"
+                ? it.name
+                : localizedName(it.name)) ||
+              localizedName(it.position?.name) ||
+              localizedName(it?.employeePosition?.employee?.name) ||
+              localizedName(it?.unit?.name) ||
+              "_";
+          } else {
+            label = "N/A";
+          }
+          return (
+            <div
+              key={i}
+              className="text-sm text-gray-700 dark:text-gray-200 bg-primary-50 dark:bg-primary-900/30 border border-primary-100 dark:border-primary-800 rounded-lg px-3 py-2 break-words">
+              {label}
+            </div>
+          );
+        })}
+      </div>
+    ) : (
+      <span className="text-sm text-gray-400 dark:text-gray-500 italic">
+        None
+      </span>
+    )}
+  </Box>
+);
+
+const ReceivingUnitChipList = ({
+  title,
+  items,
+  lang,
+  localizedName,
+}: {
+  title: string;
+  lang?: string | null;
+  localizedName: (name: any) => string | undefined;
+  items: any[];
+}) => (
+  <Box title={title}>
+    {items.length ? (
+      <div className="space-y-2 max-h-40 overflow-y-auto pr-2">
+        {items.map((it, i) => {
+          let label: string;
+
+          if (typeof it === "string") {
+            label = String(it);
+          } else if (typeof it === "object" && it !== null) {
+            label = localizedName(it.unit.name) || "-";
+          } else {
+            label = "N/A";
+          }
+
+          return (
+            <div
+              key={i}
+              className="text-sm text-gray-700 dark:text-gray-200 bg-primary-50 dark:bg-primary-900/30 border border-primary-100 dark:border-primary-800 rounded-lg px-3 py-2 break-words">
+              {label}
+            </div>
+          );
+        })}
+      </div>
+    ) : (
+      <span className="text-sm text-gray-400 dark:text-gray-500 italic">
+        __
+      </span>
+    )}
+  </Box>
+);
+
+const ReceiverEmployeeChipList = ({
+  title,
+  items,
+  lang,
+  localizedName,
+}: {
+  title: string;
+  items: ReceiverEmployeeDto[];
+  localizedName: (name: any) => string | undefined;
+  lang: string | null;
+}) => (
+  <Box title={title}>
+    {items.length ? (
+      <div className="space-y-2 max-h-40 overflow-y-auto pr-2">
+        {items.map((it, i) => {
+          const name = it?.employeePosition?.employee?.name;
+          return (
+            <div
+              key={i}
+              className="text-sm text-gray-700 dark:text-gray-200 bg-primary-50 dark:bg-primary-900/30 border border-primary-100 dark:border-primary-800 rounded-lg px-3 py-2 break-words">
+              {localizedName(name) || "N/A"}
+            </div>
+          );
+        })}
+      </div>
+    ) : (
+      <span className="text-sm text-gray-400 dark:text-gray-500 italic">
+        None
+      </span>
+    )}
+  </Box>
+);
+
+const ReceiverPositionChipList = ({
+  title,
+  items,
+  lang,
+  localizedName,
+}: {
+  title: string;
+  lang?: string | null;
+  items: ReceiverPositionDto[];
+  localizedName: (name: any) => string | undefined;
+}) => (
+  <Box title={title}>
+    {items.length ? (
+      <div className="space-y-2 max-h-40 overflow-y-auto pr-2">
+        {items.map((it, i) => {
+          const name = it?.position?.name;
+          return (
+            <div
+              key={i}
+              className="text-sm text-gray-700 dark:text-gray-200 bg-primary-50 dark:bg-primary-900/30 border border-primary-100 dark:border-primary-800 rounded-lg px-3 py-2 break-words">
+              {localizedName(name) || "-"}
+            </div>
+          );
+        })}
+      </div>
+    ) : (
+      <span className="text-sm text-gray-400 dark:text-gray-500 italic">
+        None
+      </span>
+    )}
+  </Box>
+);
+
+const CollaborationChipList = ({
+  title,
+  items,
+  lang,
+  localizedName,
+}: {
+  title: string;
+  items: CollaboratorDto[];
+  lang: string | null;
+  localizedName: (name: any) => string | undefined;
+}) => (
+  <Box title={title}>
+    {items.length ? (
+      <div className="space-y-2 max-h-40 overflow-y-auto pr-2">
+        {items.map((it, i) => {
+          const name = it?.employeePosition?.employee.name;
+          return (
+            <div
+              key={i}
+              className="text-sm text-gray-700 dark:text-gray-200 bg-primary-50 dark:bg-primary-900/30 border border-primary-100 dark:border-primary-800 rounded-lg px-3 py-2 break-words">
+              {localizedName(name) || "N/A"}
+            </div>
+          );
+        })}
+      </div>
+    ) : (
+      <span className="text-sm text-gray-400 dark:text-gray-500 italic">
+        None
+      </span>
+    )}
+  </Box>
+);
+const OnReplyClick = (
+  backurl: any,
+  id: string,
+  navigate: any,
+  letterType: string,
+) => {
+  if (letterType === "outgoing") {
+    navigate(`/record-management/userRecords/viewRecord/${id}`, {
+      state: { backurl: backurl, type: "userRecord" },
+    });
+  } else if (letterType === "internal" || letterType === "internal_memo") {
+    navigate(`/record-management/viewIncoming/internal/${id}`, {
+      state: { backurl: backurl, type: letterType },
+    });
+  } else {
+    navigate(`/record-management/viewIncoming/incoming/${id}`, {
+      state: { backurl: backurl, type: letterType },
+    });
+  }
+};
+const OnReplyClickNewtab = (backurl: any, id: string, letterType: string) => {
+  let url = "";
+
+  if (letterType === "outgoing") {
+    url = `/record-management/userRecords/viewRecord/${id}`;
+  } else if (letterType === "internal" || letterType === "internal_memo") {
+    url = `/record-management/viewIncoming/internal/${id}`;
+  } else {
+    url = `/record-management/viewIncoming/incoming/${id}`;
+  }
+
+  // Append state as query parameters since window.open doesn't support state
+  const params = new URLSearchParams();
+  if (backurl) params.set("backurl", backurl);
+  if (letterType) params.set("type", letterType);
+
+  const finalUrl = params.toString() ? `${url}?${params.toString()}` : url;
+
+  window.open(finalUrl, "_blank");
+};
+
+type NonSmartReceiverLike = {
+  name?: string;
+  value?: string;
+  isCc?: boolean;
+  isCC?: boolean;
+  isForYourReference?: boolean;
+};
+
+const formatFileSize = (bytes: number) => {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+};
+
+export default function RecordDetailCard({
+  record,
+  attachmentUrl,
+  backurl,
+  type,
+  isDraft,
+  isLoadingAttachment,
+  errorAttachment,
+  isSecured,
+  actions,
+  actionRowData,
+}: Props) {
+  const navigate = useNavigate();
+  const { id: routeId, type: incomingDetailType } = useParams<{
+    id?: string;
+    type?: string;
+  }>();
+  const [isOpen, setIsOpen] = useState(true);
+  const [isPrintDialogOpen, setIsPrintDialogOpen] = useState(false);
+  const [isAddReplyModalOpen, setIsAddReplyModalOpen] = useState(false);
+  const [isFullScreenOpen, setIsFullScreenOpen] = useState(false);
+  const fullscreenContainerRef = useRef<HTMLDivElement>(null);
+  const { t, i18n } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+  const lang = i18n.language;
+  const queryClient = useQueryClient();
+  const content = record.content[0];
+  const { userDetails } = useAuthUser();
+  const { permissionKeys } = useUserDetail(userDetails as MeDto);
+  const { receivingUnits } = record;
+  const localizedName = useLocalizedName();
+  const unitId = userDetails?.employee?.[0]?.unitId ?? "";
+  const { data: unitConfigData } = useUnitConfiguration(unitId, {
+    enabled: !!unitId,
+  });
+  const canRecordBeEditedOnWorkflow =
+    unitConfigData?.data?.items?.[0]?.canRecordBeEditedOnWorkflow ?? false;
+  const canRecordBeEditedByCollaborators =
+    unitConfigData?.data?.items?.[0]?.canRecordBeEditedByCollaborators ?? false;
+  const { receiverPositions, receiverEmployees, ccs } = content;
+  const { internalCC, externalCC, forYourReferenceInternal, forYourReferenceExternal } = useMemo(() => {
+    const result: {
+      internalCC: any[];
+      externalCC: any[];
+      forYourReferenceInternal: any[];
+      forYourReferenceExternal: any[];
+    } = {
+      internalCC: [],
+      externalCC: [],
+      forYourReferenceInternal: [],
+      forYourReferenceExternal: [],
+    };
+
+    (ccs || []).forEach((cc: any) => {
+      const { type, isForYourReference } = cc;
+      if (type === "internal") {
+        if (isForYourReference) {
+          result.forYourReferenceInternal.push(cc);
+        } else {
+          result.internalCC.push(cc);
+        }
+      } else if (type === "external") {
+        if (isForYourReference) {
+          result.forYourReferenceExternal.push(cc);
+        } else {
+          result.externalCC.push(cc);
+        }
+      }
+    });
+
+    return result;
+  }, [ccs]);
+  const legacyNonSmartReceivers = useMemo<NonSmartReceiverLike[]>(
+    () =>
+      (content.nonSmartReceivers as NonSmartReceiverLike[] | undefined) || [],
+    [content.nonSmartReceivers],
+  );
+
+  const normalizeNonSmartName = (item: NonSmartReceiverLike | string) => {
+    if (typeof item === "string") return item;
+    return item?.name || item?.value || "";
+  };
+
+  const legacyNonSmartCC = useMemo(
+    () =>
+      legacyNonSmartReceivers
+        .filter((item) => Boolean(item?.isCc ?? item?.isCC))
+        .map((item) => normalizeNonSmartName(item))
+        .filter(Boolean),
+    [legacyNonSmartReceivers],
+  );
+
+  const legacyNonSmartFYR = useMemo(
+    () =>
+      legacyNonSmartReceivers
+        .filter((item) => item?.isForYourReference === true)
+        .map((item) => normalizeNonSmartName(item))
+        .filter(Boolean) as string[],
+    [legacyNonSmartReceivers],
+  );
+
+  const legacyNonSmartTo = useMemo(
+    () =>
+      legacyNonSmartReceivers
+        .filter((item) => !Boolean(item?.isCc ?? item?.isCC))
+        .map((item) => normalizeNonSmartName(item))
+        .filter(Boolean),
+    [legacyNonSmartReceivers],
+  );
+
+  const nonSmartOfficeReceivers = useMemo(
+    () =>
+      Array.from(
+        new Set([
+          ...(content.nonSmartOfficeReceivers || []),
+          ...legacyNonSmartTo,
+        ]),
+      ),
+    [content.nonSmartOfficeReceivers, legacyNonSmartTo],
+  );
+
+  const nonSmartOfficeCC = useMemo(
+    () =>
+      Array.from(
+        new Set([
+          ...(content.nonSmartOfficeReceiverCCs || []),
+          ...legacyNonSmartCC,
+        ]),
+      ),
+    [content.nonSmartOfficeReceiverCCs, legacyNonSmartCC],
+  );
+
+  const combinedReceivers = [
+    ...(receivingUnits || []),
+    ...nonSmartOfficeReceivers,
+  ];
+
+  const combinedCC = [...(externalCC || []), ...nonSmartOfficeCC];
+  const combinedCCInternal = [...(internalCC || [])];
+
+  const incomingInstanceActionRow = useMemo(() => {
+    const fromIncomingInstances = Array.isArray(record?.incomingInstances)
+      ? record.incomingInstances[0]
+      : record?.incomingInstances;
+
+    if (fromIncomingInstances) return fromIncomingInstances;
+    if (record?.incomingInstance) return record.incomingInstance;
+
+    // Fallback for detail routes that are opened by incoming-instance id.
+    if (
+      routeId &&
+      ["incoming", "internal", "externalincoming"].includes(type)
+    ) {
+      return {
+        id: routeId,
+        recordId: record.id,
+        status: record.statusKey,
+        record,
+      };
+    }
+
+    return undefined;
+  }, [record, routeId, type]);
+  const fallbackIncomingInstance =
+    actionRowData?.lastIncomingInstance ||
+    actionRowData?.incomingInstances ||
+    incomingInstanceActionRow;
+  const detailCommentSource =
+    typeof actionRowData?.comment === "string" && actionRowData.comment.trim()
+      ? actionRowData
+      : fallbackIncomingInstance;
+  const detailComment =
+    typeof detailCommentSource?.comment === "string"
+      ? detailCommentSource.comment.trim()
+      : "";
+  const detailCommentCreatedAt = detailCommentSource?.createdAt || "";
+  const actionAssignerName = actionRowData?.delegateAssigner?.employee?.name;
+  const actionAssignerDelegateeName =
+    actionRowData?.delegateAssignee?.employee?.name;
+  const actionEmployeeName = actionRowData?.employeePosition?.employee?.name;
+  const fallbackAssignerName =
+    fallbackIncomingInstance?.assigner?.employee?.name;
+  const fallbackAssignerDelegatorName =
+    fallbackIncomingInstance?.assigner?.delegator?.employee?.name;
+  const fallbackEmployeeName = fallbackIncomingInstance?.employee?.name;
+
+  const resolveDetailCommentAssignerName = () => {
+    const nameSources = [
+      {
+        type: "actionAssigner",
+        name: actionAssignerName,
+        delegateeName: actionAssignerDelegateeName,
+      },
+      {
+        type: "actionEmployee",
+        name: actionEmployeeName,
+        delegateeName: undefined,
+      },
+      {
+        type: "fallbackAssigner",
+        name: fallbackAssignerName,
+        delegateeName: fallbackAssignerDelegatorName,
+      },
+      {
+        type: "fallbackEmployee",
+        name: fallbackEmployeeName,
+        delegateeName: undefined,
+      },
+    ] as const;
+
+    for (const source of nameSources) {
+      const resolvedName = localizedName(source.name);
+      const rawName = source.name?.en || source.name?.am;
+
+      const resolvedDelegateeName = localizedName(source.delegateeName);
+      if (!resolvedName && !rawName) {
+        continue;
+      }
+
+      switch (source.type) {
+        case "actionAssigner":
+          return resolvedDelegateeName
+            ? `${resolvedDelegateeName} (${t("viewDetail.for")} ${
+                resolvedName || rawName
+              })`
+            : resolvedName || rawName;
+        case "actionEmployee":
+          return resolvedName || rawName;
+        case "fallbackAssigner":
+          return resolvedDelegateeName
+            ? `${resolvedDelegateeName} (${t("viewDetail.for")} ${
+                resolvedName || rawName
+              })`
+            : resolvedName || rawName;
+        case "fallbackEmployee":
+          return resolvedName || rawName;
+        default:
+          break;
+      }
+    }
+
+    return t("common.unknownUser", "Unknown user");
+  };
+
+  const detailCommentAssignerName = resolveDetailCommentAssignerName();
+  const mappedIncomingInstances =
+    fallbackIncomingInstance && fallbackIncomingInstance.length > 0
+      ? fallbackIncomingInstance
+          ?.map((i: any) => {
+            const actionAssignerDelegateeName = localizedName(
+              i?.delegateAssignee?.employee?.name,
+            );
+            const resolvedName = localizedName(i?.assigner?.employee?.name);
+
+            const assignerName = actionAssignerDelegateeName
+              ? `${actionAssignerDelegateeName} (${t("viewDetail.for")} ${resolvedName})`
+              : resolvedName;
+
+            return {
+              amharicCreatedAt: i.amharicCreatedAt,
+              comment: i.comment,
+              assignerName: assignerName,
+              createdAt: i.createdAt,
+            };
+          })
+          // Deduplicate: keep first occurrence of assignerName + createdAt/amharicCreatedAt
+          .filter((item: any, index: any, self: any[]) => {
+            const key = `${item.assignerName}|${item.createdAt || item.amharicCreatedAt}`;
+            const firstIndex = self.findIndex(
+              (x) =>
+                `${x.assignerName}|${x.createdAt || x.amharicCreatedAt}` ===
+                key,
+            );
+            return item?.comment && index === firstIndex;
+          })
+      : undefined;
+  const openFull = () => {
+    if (!attachmentUrl) return;
+    setIsFullScreenOpen(true);
+    // requestFullscreen must be called synchronously inside a user-gesture handler
+    requestAnimationFrame(() => {
+      fullscreenContainerRef.current?.requestFullscreen?.().catch(() => {});
+    });
+  };
+
+  const closeFullScreen = () => {
+    setIsFullScreenOpen(false);
+    if (document.fullscreenElement) {
+      document.exitFullscreen?.().catch(() => {});
+    }
+  };
+
+  useEffect(() => {
+    const onFullscreenChange = () => {
+      if (!document.fullscreenElement) {
+        setIsFullScreenOpen(false);
+      }
+    };
+    document.addEventListener("fullscreenchange", onFullscreenChange);
+    return () => document.removeEventListener("fullscreenchange", onFullscreenChange);
+  }, []);
+  const { mutate: regeneratePdfMutation, isPending: isRegenerating } =
+    useMutation({
+      mutationFn: async () => {
+        if (!record.id) throw new Error("Record ID is missing");
+        await regeneratePdf(record.id);
+      },
+      onSuccess: () => {
+        toast.success(t("msg.pdfRegenerated"));
+        queryClient.invalidateQueries();
+      },
+      onError: (error) => {
+        handleError(error);
+      },
+    });
+
+  const refreshDetailData = () => {
+    const queryIds = [routeId, record.id].filter(Boolean) as string[];
+
+    queryIds.forEach((id) => {
+      queryClient.invalidateQueries({ queryKey: ["record-instance", id] });
+      queryClient.invalidateQueries({ queryKey: ["record", id] });
+      queryClient.invalidateQueries({ queryKey: ["record-pdf", id] });
+    });
+
+    queryClient.invalidateQueries({ queryKey: ["incoming-instances"] });
+    queryClient.invalidateQueries({ queryKey: ["external-incoming"] });
+    queryClient.invalidateQueries({ queryKey: ["incoming-cc"] });
+    queryClient.invalidateQueries({ queryKey: ["approvalRecord"] });
+  };
+  const metaBoxes = [
+    <Info
+      key="recType"
+      title={t("convert.recordType")}
+      value={record.recordTypeKey}
+      isRecordType={true}
+    />,
+    record.recordTypeKey !== "external" && (
+      <ReceiverPositionChipList
+        key="recvDept"
+        title={t("viewDetail.receivingDepartments")}
+        items={receiverPositions}
+        lang={lang}
+        localizedName={localizedName}
+      />
+    ),
+    record.recordTypeKey === "external" && (
+      <ReceivingUnitChipList
+        key="recvOrgs"
+        title={t("viewDetail.receivingOrganizations")}
+        items={combinedReceivers}
+        lang={lang}
+        localizedName={localizedName}
+      />
+    ),
+    record.recordTypeKey !== "external" && (
+      <ReceiverEmployeeChipList
+        key="recvEmp"
+        title={t("viewDetail.receivingUserEmployees")}
+        items={receiverEmployees}
+        lang={lang}
+        localizedName={localizedName}
+      />
+    ),
+
+    record.recordTypeKey === "non_smart_user" && (
+      <>
+        <Info
+          key="sendBur"
+          title={t("viewDetail.sendingBureau")}
+          value={record.metadata.organizationName.am}
+          localizedName={localizedName(record.metadata.organizationName)}
+        />
+        <Info
+          key="letterNo"
+          title={t("viewDetail.letterNumber")}
+          value={record.letterNumber}
+        />
+        <Info
+          key="deliveredBy"
+          title={t("viewDetail.deliveredBy")}
+          value={
+            record.metadata?.deliveredBy?.en || record.metadata?.deliveredBy?.am
+          }
+        />
+      </>
+    ),
+    record.recordTypeKey !== "non_smart_user" && (
+      <>
+        <Info
+          key="sendDept"
+          title={t("viewDetail.sendingDepartment")}
+          value={record.initiator?.position?.name?.am}
+          localizedName={localizedName(record.initiator?.position?.name)}
+        />
+        <Info
+          key="sendEmp"
+          title={t("viewDetail.sendingEmployee")}
+          value={
+            record.delegateInitiator?.employee?.name?.am ||
+            record.initiator?.employee?.name?.am
+          }
+          localizedName={
+            record.delegateInitiator
+              ? `${localizedName(record.delegateInitiator?.employee?.name)} (${t("viewDetail.for")} ${localizedName(
+                  record.initiator?.employee?.name,
+                )})`
+              : localizedName(record.initiator?.employee?.name)
+          }
+        />
+      </>
+    ),
+    (record.statusKey === "Dispatched" ||
+      ["incoming", "internal", "cc", "outgoing"].includes(type)) && (
+      <Info
+        key="refNo"
+        title={t("viewDetail.referenceNumber")}
+        value={record.referenceNumber}
+      />
+    ),
+    ["incoming", "internal", "cc", "outgoing", "pending"].includes(type) && (
+      <Info
+        key="sentDate"
+        title={t("viewDetail.sentDate")}
+        value={
+          lang === "en"
+            ? formatDate(record.dispatchedDate)
+            : record.amharicDispatchedDate
+        }
+      />
+    ),
+    record.initiationType === "team" && (
+      <CollaborationChipList
+        key="collaborators"
+        title={t("viewDetail.collaborators")}
+        items={record.collaborators}
+        lang={lang}
+        localizedName={localizedName}
+      />
+    ),
+    <Info
+      key="subject"
+      title={t("viewDetail.subject")}
+      value={content.subject}
+    />,
+    <Info
+      key="letterName"
+      title={t("viewDetail.fileName")}
+      value={record.letterName ?? "____"}
+    />,
+    <ChipList
+      key="externalCC"
+      title={t("viewDetail.externalCcOrganizations")}
+      items={combinedCC}
+      lang={lang}
+      localizedName={localizedName}
+    />,
+    <ChipList
+      key="internalCC"
+      title={t("viewDetail.internalCcDepartments")}
+      items={combinedCCInternal}
+      lang={lang}
+      localizedName={localizedName}
+    />,
+    (forYourReferenceExternal.length > 0 || legacyNonSmartFYR.length > 0) && (
+      <ChipList
+        key="forYourReferenceExternal"
+        title={t("addRecord.forYourReferenceExternal")}
+        items={[...forYourReferenceExternal, ...legacyNonSmartFYR]}
+        lang={lang}
+        localizedName={localizedName}
+      />
+    ),
+    forYourReferenceInternal.length > 0 && (
+      <ChipList
+        key="forYourReferenceInternal"
+        title={t("addRecord.forYourReferenceInternal")}
+        items={forYourReferenceInternal}
+        lang={lang}
+        localizedName={localizedName}
+      />
+    ),
+    <Info
+      key="status"
+      title={t("userIncoming.Status")}
+      value={incomingInstanceActionRow?.status || record.statusKey}
+      infoKey="status"
+    />,
+
+    incomingInstanceActionRow?.status === "replied" && (
+      <Info
+        key="seestatus"
+        title={t("userIncoming.ViewReplyLetterDetails")}
+        value={""}
+        infoKey="seestatus"
+        isReplied={incomingInstanceActionRow?.status === "replied"}
+        replyid={incomingInstanceActionRow?.replyRecords || []}
+        navigate={navigate}
+        letterType="outgoing"
+      />
+    ),
+    Boolean(record?.inReplyToIncomingInstanceId) && (
+      <Info
+        key="seestatus"
+        title={t("userIncoming.ViewReplyLetterDetails")}
+        value={""}
+        infoKey="seestatus"
+        isReplied={Boolean(record?.inReplyToIncomingInstanceId)}
+        replyid={[{ id: record?.inReplyToIncomingInstanceId }]}
+        navigate={navigate}
+        letterType={record.recordTypeKey}
+      />
+    ),
+    <Info
+      key="isReply"
+      title={t("userIncoming.isReplyLetter")}
+      value={record?.inReplyToIncomingInstanceId ? "yes" : "no"}
+      infoKey="status"
+    />,
+  ].filter(Boolean);
+  const isRecordOfficer = permissionKeys.includes("can:dispatchRecords");
+
+  const refreshReplies = () => {
+    const queryIds = [routeId, record.id].filter(Boolean) as string[];
+    queryIds.forEach((id) => {
+      queryClient.invalidateQueries({ queryKey: ["record-instance", id] });
+      queryClient.invalidateQueries({ queryKey: ["record", id] });
+    });
+  };
+  const [searchParamsUrl, setSearchParamsUrl] = useSearchParams();
+  const initialView = searchParamsUrl.get("view") || "self";
+  const isSelf = initialView === "self";
+
+  const renderActions = () => {
+    switch (actions) {
+      // case "OutgoingRecordActions":
+      //   return (
+      //     <OutgoingRecordActions
+      //       rowData={{ ...incomingInstanceActionRow, record: record }}
+      //       pageIndex={Number(searchParamsUrl.get("page") || 1)}
+      //     />
+      //   );
+      case "MyApprovaRecordsActions":
+        return (
+          <MyApprovaRecordsActions
+            rowData={actionRowData as any}
+            fromTable={false}
+          />
+        );
+      case "InternalIncomingRecordActions":
+        return (
+          <InternalIncomingRecordActionsV2
+            rowData={{
+              ...incomingInstanceActionRow,
+              record: record,
+              ...actionRowData,
+            }}
+            refetchTable={refreshDetailData}
+            fromTable={false}
+            isSelf={isSelf}
+          />
+        );
+      case "ExternalIncomingRecordActions":
+        return (
+          <ExternalIncomingRecordActionsV2
+            rowData={{
+              ...incomingInstanceActionRow,
+              record: record,
+              ...actionRowData,
+            }}
+            refetchTable={refreshDetailData}
+            fromTable={false}
+            isSelf={isSelf}
+          />
+        );
+      case "CCIncomingRecordActions":
+        return (
+          <CCIncomingRecordActions
+            rowData={record as any}
+            refetch={refreshDetailData}
+            isTable={false}
+            isSelf={isSelf}
+            calledFrom="recordDetail"
+          />
+        );
+      case "UserRecordsActions":
+        return (
+          <UserRecordsActions
+            rowData={record}
+            refetchTable={refreshDetailData}
+            fromTable={false}
+            isSelf={isSelf}
+          />
+        );
+      case "ApproveRecordsActions":
+        return (
+          <ApproveRecordsActions
+            rowData={actionRowData ?? record}
+            refetchTable={refreshDetailData}
+            fromTable={false}
+            canRecordBeEditedOnWorkflow={canRecordBeEditedOnWorkflow}
+          />
+        );
+      case "CollaborationActionsComponent":
+        return actionRowData ? (
+          <CollaborationActionsComponent
+            rowData={actionRowData}
+            refreshTable={refreshDetailData}
+            fromTable={false}
+            showViewDetailButton={false}
+            canRecordBeEditedByCollaborators={canRecordBeEditedByCollaborators}
+          />
+        ) : null;
+      case "DelegationRecordActions":
+        return actionRowData ? (
+          <DelegationRecordActions
+            rowData={actionRowData}
+            refetchTable={refreshDetailData}
+            type={actionRowData.delegationType ?? "delegator"}
+            fromTable={false}
+          />
+        ) : null;
+      case "PendingRecordDetailActions":
+        return (
+          <PendingRecordDetailActions
+            recordId={record.id}
+            canROReturn={Boolean(actionRowData?.canROReturn)}
+            backToTable={actionRowData?.backToTable ?? backurl}
+          />
+        );
+      case "IncomingRecordDetailActions":
+        return (
+          <IncomingRecordDetailActions
+            rowData={actionRowData}
+            refetchTable={refreshDetailData}
+            shouldAddEditAction={true}
+          />
+        );
+      case "IncomingRecordActions":
+        return (
+          <IncomingRecordActions
+            rowData={actionRowData ?? record}
+            refetchTable={refreshDetailData}
+            shouldAddEditAction={
+              incomingDetailType === "draft" || record.statusKey === "Draft"
+            }
+            type={incomingDetailType}
+            pageIndex={Number(searchParamsUrl.get("page") || 1)}
+            fromTable={false}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+  const actionsContent = renderActions();
+  const isFinalLookGenerated = record?.isFinalLookGenerated ?? false;
+
+  return (
+    <div className="w-full max-w-none space-y-6 dark:bg-gray-900 p-6 rounded-lg">
+      <div className="flex items-center">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => navigate(backurl)}
+          className="flex items-center text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200">
+          <ChevronLeft className="h-4 w-4" />
+          {t("common.back")}
+        </Button>
+      </div>
+      <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
+        {t("viewDetail.recordDetail")}
+      </h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {metaBoxes}
+      </div>
+      {(detailComment || mappedIncomingInstances?.length > 0) &&
+        ["incoming", "internal", "externalincoming", "delegation"].includes(
+          type,
+        ) && (
+          <CommentCard
+            key="incomingComment"
+            createdAt={detailCommentCreatedAt}
+            comment={detailComment}
+            assignerName={detailCommentAssignerName}
+            commentSection={mappedIncomingInstances}
+            variant={type === "delegation" ? "secondary" : "info"}
+          />
+        )}
+      {["incoming", "internal", "externalincoming"].includes(type) && (
+        <RemarkList
+          instanceIds={[
+            fallbackIncomingInstance && fallbackIncomingInstance?.length > 0
+              ? fallbackIncomingInstance[0].id
+              : fallbackIncomingInstance?.id,
+          ].filter(Boolean)}
+        />
+      )}
+      {!isSecured || (isSecured && !isRecordOfficer) ? (
+        <div className="w-full">
+          <div
+            className="flex items-center justify-between w-full cursor-pointer rounded-xl border border-gray-200 dark:border-gray-700 px-5 py-4 bg-white dark:bg-gray-800 hover:border-primary-300 dark:hover:border-primary-600 hover:bg-primary-50/30 dark:hover:bg-primary-900/20 transition-all"
+            onClick={() => setIsOpen(!isOpen)}>
+            <span className="font-semibold text-gray-900 dark:text-white">
+              {t("viewDetail.letterPreview")}
+            </span>
+            <div className="flex items-center gap-2 text-sm font-medium text-primary-600 dark:text-primary-400">
+              {t("viewDetail.view")}
+              <ChevronDown
+                className={`h-5 w-5 transition-transform ${
+                  isOpen ? "rotate-180" : ""
+                }`}
+              />
+            </div>
+          </div>
+
+          {isOpen && (
+            <div className="mt-4 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-3 sm:p-5">
+              {/* Header */}
+              <div className="flex flex-col gap-3 sm:flex-row sm:justify-between sm:items-center mb-4">
+                <p className="text-gray-900 dark:text-white font-semibold text-sm sm:text-base">
+                  {t("viewDetail.letterPreview")}
+                </p>
+
+                {/* Action Buttons */}
+                <div className="grid grid-cols-1 sm:flex gap-2 sm:gap-3 w-full sm:w-auto">
+                  <button
+                    className="
+                        flex items-center justify-center
+                        px-3 sm:px-4 py-2
+                        text-sm font-medium
+                        text-white
+                        bg-primary-600 hover:bg-primary-700
+                        dark:bg-primary-700 dark:hover:bg-primary-600
+                        rounded-lg transition-all duration-200
+                        disabled:opacity-50
+                        w-full sm:w-auto
+                        border border-primary-700 dark:border-primary-600
+                      "
+                    onClick={() => regeneratePdfMutation()}
+                    disabled={isRegenerating || isLoadingAttachment}>
+                    <RefreshCw
+                      className={`h-4 w-4 mr-2 ${
+                        isRegenerating ? "animate-spin" : ""
+                      }`}
+                    />
+
+                    <span className="truncate">
+                      {isRegenerating
+                        ? t("viewDetail.regeneratingPdf")
+                        : t("viewDetail.regeneratePdf")}
+                    </span>
+                  </button>
+
+                  <button
+                    className="
+          flex items-center justify-center
+          px-3 sm:px-4 py-2
+          text-sm font-medium
+          text-white
+          bg-primary-600 hover:bg-primary-700
+          dark:bg-primary-700 dark:hover:bg-primary-600
+          rounded-lg transition-all duration-200
+          disabled:opacity-50
+          w-full sm:w-auto
+          border border-primary-700 dark:border-primary-600
+        "
+                    onClick={() => setIsPrintDialogOpen(true)}
+                    disabled={!attachmentUrl}>
+                    <Printer className="h-4 w-4 mr-2 shrink-0" />
+                    <span>{t("print.print") || "Print"}</span>
+                  </button>
+
+                  <button
+                    className="
+          flex items-center justify-center
+          px-3 sm:px-4 py-2
+          text-sm font-medium
+          text-white
+          bg-primary-600 hover:bg-primary-700
+          dark:bg-primary-700 dark:hover:bg-primary-600
+          rounded-lg transition-all duration-200
+          disabled:opacity-50
+          w-full sm:w-auto
+          border border-primary-700 dark:border-primary-600
+        "
+                    onClick={openFull}
+                    disabled={!attachmentUrl}>
+                    <Maximize className="h-4 w-4 mr-2 shrink-0" />
+                    <span>{t("viewDetail.fullScreen")}</span>
+                  </button>
+                </div>
+              </div>
+
+              {/* PDF Preview */}
+              {attachmentUrl ? (
+                <div className="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
+                  <iframe
+                    src={attachmentUrl}
+                    title="PDF Preview"
+                    className="
+          w-full
+          h-[400px]
+          sm:h-[600px]
+          md:h-[800px]
+          lg:h-[900px]
+          bg-white
+        "
+                  />
+                </div>
+              ) : (
+                <div
+                  className="
+        h-[180px] sm:h-[220px]
+        flex flex-col items-center justify-center
+        bg-gray-50 dark:bg-gray-900
+        border-2 border-dashed
+        border-gray-200 dark:border-gray-700
+        rounded-lg
+        text-gray-500 dark:text-gray-400
+        px-4 text-center
+      ">
+                  {isLoadingAttachment || isRegenerating ? (
+                    <p className="text-gray-600 dark:text-gray-400 flex items-center gap-2 text-sm sm:text-base">
+                      <span className="animate-spin rounded-full h-4 w-4 border-t-2 border-primary-600 dark:border-primary-400"></span>
+
+                      {t("viewDetail.loading")}
+                    </p>
+                  ) : (
+                    <p className="text-gray-600 dark:text-gray-400 text-sm sm:text-base">
+                      {t("viewDetail.noPreview")}
+                    </p>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      ) : (
+        <div className="w-full p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-xl text-yellow-800 dark:text-yellow-300 text-sm">
+          {t("viewDetail.securedRecordMessage")}
+        </div>
+      )}
+      <div className="space-y-4">
+        {!isSecured || (isSecured && !isRecordOfficer) ? (
+          <Box title={t("viewDetail.attachments")}>
+            <FileList
+              attachments={content.recordAttachments ?? []}
+              showDelete={false}
+            />
+          </Box>
+        ) : (
+          <div className="w-full p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-xl text-yellow-800 dark:text-yellow-300 text-sm">
+            {t("viewDetail.securedAttachmentMessage")}
+          </div>
+        )}
+
+        {[
+          "",
+          "",
+          "collaboration",
+          "outgoing",
+          "pending",
+          "approval",
+          "userRecord",
+        ].includes(type) && (
+          <RecordRemarksView recordId={record.id} error={""} />
+        )}
+        {record.recordTypeKey === "external" &&
+          record.statusKey === "Dispatched" && (
+            <ReplySection
+              recordId={record.id}
+              replies={record.replies ?? []}
+              isRecordOfficer={isRecordOfficer}
+              onRefresh={refreshReplies}
+              isAddOpen={isAddReplyModalOpen}
+              onCloseAdd={() => setIsAddReplyModalOpen(false)}
+            />
+          )}
+
+        <Box title={t("userIncoming.Actions")}>
+          <div className="flex flex-wrap gap-3">
+            {actionsContent}
+            {record.recordTypeKey === "external" && type === "outgoing" && (
+              <Button
+                variant={getActionButtonVariant("reply")}
+                onClick={() => setIsAddReplyModalOpen(true)}>
+                <Send className="h-4 w-4 mr-2" />
+                {t("common.addReply", "Add Reply")}
+              </Button>
+            )}
+            {!actionsContent &&
+              !(record.recordTypeKey === "external" && type === "outgoing") && (
+                <p className="text-sm text-gray-500 dark:text-gray-400 italic">
+                  {t("userIncoming.noActionsAvailable", {
+                    defaultValue: "No actions available for this record.",
+                  })}
+                </p>
+              )}
+          </div>
+        </Box>
+
+        <ParentContainer
+          recordId={record.id}
+          recordTitle=""
+          recordType={record.recordTypeKey}
+          subject={content.subject}
+          createdDate={record.createdAt}
+          referenceNumber={record.referenceNumber || ""}
+          showStat={true}
+        />
+        <div className="flex justify-end pt-2">
+          <button
+            type="button"
+            className="flex items-center bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 text-white px-5 py-2.5 rounded-lg font-medium transition-colors"
+            onClick={() => navigate(backurl)}>
+            <ChevronLeft className="h-5 w-5 mr-2" />
+            {t("viewDetail.back")}
+          </button>
+        </div>
+      </div>
+      <PrintDialog
+        isOpen={isPrintDialogOpen}
+        onClose={() => setIsPrintDialogOpen(false)}
+        pdfUrl={attachmentUrl || ""}
+        attachments={(() => {
+          const mapped =
+            content.recordAttachments?.map((att: any) => {
+              // Check if there's a sealed PDF version of the attachment
+              const hasSealedPdf =
+                att.sealedFileInfo &&
+                att.sealedFileInfo.contentType === "application/pdf";
+
+              const mappedAttachment = {
+                id: att.id || att.itemId,
+                name:
+                  att.fileInfo?.originalname ||
+                  att.fileInfo?.fileName ||
+                  att.name,
+                // Use sealed PDF if available, otherwise use presigned URL
+                url: hasSealedPdf
+                  ? `http://minio-dev.license.aafda.gov.et/smart-office-dev/${att.sealedFileInfo.bucket}${att.sealedFileInfo.fileName}`
+                  : att.presigned || att.url,
+                fileType: hasSealedPdf
+                  ? "application/pdf"
+                  : att.fileInfo?.contentType ||
+                    att.fileInfo?.type ||
+                    "application/octet-stream",
+                size: hasSealedPdf
+                  ? att.sealedFileInfo.size
+                  : att.fileInfo?.size || att.length || 0,
+              };
+
+              return mappedAttachment;
+            }) || [];
+
+          return mapped;
+        })()}
+      />
+
+      {isFullScreenOpen && (
+        <div
+          ref={fullscreenContainerRef}
+          className="fixed inset-0 z-9999 flex flex-col bg-black"
+        >
+          <div className="flex items-center justify-between px-4 py-2 bg-gray-900 text-white shrink-0">
+            <div className="flex items-center gap-2 text-sm font-medium">
+              <Minimize className="h-4 w-4" />
+              {t("viewDetail.fullScreen")}
+            </div>
+            <button
+              type="button"
+              onClick={closeFullScreen}
+              className="rounded p-1 hover:bg-gray-700 transition-colors"
+              aria-label="Close full screen"
+            >
+              <X className="h-5 w-5" />
+            </button>
+          </div>
+          <iframe
+            src={attachmentUrl}
+            title="PDF Full Screen"
+            className="flex-1 w-full border-0"
+            allowFullScreen
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/RemarkList.tsx b/apps/edr-freight-web/backoffice/src/record-management/common/RemarkList.tsx
new file mode 100644
index 000000000..df9813fe8
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/RemarkList.tsx
@@ -0,0 +1,61 @@
+import React from "react";
+import { Loader2 } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { useGetMergedRemarks } from "../components/hooks/useGetRemarks";
+import { CommentCard } from "./WorkflowCommentHistory";
+import { useLocalizedName } from "@/shared/common/localizedName";
+
+interface RemarkListProps {
+  instanceIds: string[];
+  showFromText?: boolean;
+}
+
+const RemarkList: React.FC<RemarkListProps> = ({
+  instanceIds,
+  showFromText = true,
+}) => {
+  const { t } = useTranslation();
+  const localizedName = useLocalizedName();
+  const { mergedItems, isLoading, isError } = useGetMergedRemarks(instanceIds);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-10">
+        <Loader2 className="h-6 w-6 animate-spin text-primary" />
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <div className="rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-600 dark:border-red-900 dark:bg-red-950/20 dark:text-red-400">
+        {t("remark.failedToLoad", "Failed to load remarks.")}
+      </div>
+    );
+  }
+
+  if (!mergedItems.length) {
+    return <div></div>;
+  }
+
+  return (
+    <div className="space-y-4">
+      {mergedItems.map((remark) => (
+        <CommentCard
+          key={remark.id}
+          createdAt={remark.createdAt}
+          amharicCreatedAt={remark.createdAt}
+          comment={remark.comment}
+          assignerName={
+            localizedName(remark.commentor?.employee?.name) || "Unknown User"
+          }
+          variant="secondary"
+          showCommentTitle={false}
+          showFromText={showFromText}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default RemarkList;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/RemarkViewer.tsx b/apps/edr-freight-web/backoffice/src/record-management/common/RemarkViewer.tsx
new file mode 100644
index 000000000..7ac128ff9
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/RemarkViewer.tsx
@@ -0,0 +1,136 @@
+// components/remarks/RemarksViewer.tsx
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { GitBranch, MessageSquareText } from "lucide-react";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import { ScrollArea } from "@/shared/common/ui/scroll-area";
+
+import RemarkList from "./RemarkList";
+import { useChildIncomingInstances } from "../components/hooks/useIncomingInstances";
+
+interface RemarksViewerProps {
+  incomingInstanceId: string;
+}
+
+type LocalizedText = {
+  am?: string;
+  en?: string;
+};
+
+type RemarkInstanceOptionSource = {
+  assignee?: {
+    employee?: {
+      name?: LocalizedText;
+    };
+  } | null;
+  assigneePosition?: {
+    name?: LocalizedText;
+  } | null;
+};
+
+const RemarksViewer: React.FC<RemarksViewerProps> = ({
+  incomingInstanceId,
+}) => {
+  const { t, i18n } = useTranslation();
+  const [selectedInstanceId, setSelectedInstanceId] =
+    useState(incomingInstanceId);
+
+  const { data: childInstancesData, isLoading: isLoadingInstances } =
+    useChildIncomingInstances(incomingInstanceId, {
+      enabled: !!incomingInstanceId,
+  });
+  const childInstances = childInstancesData ?? [];
+
+  const getLocalizedText = (value?: LocalizedText | null) => {
+    if (!value) return "";
+    return i18n.language === "am"
+      ? value.am || value.en || ""
+      : value.en || value.am || "";
+  };
+
+  const getInstanceLabel = (
+    instance: RemarkInstanceOptionSource,
+    index: number,
+  ) => {
+    const assigneeName = getLocalizedText(instance.assignee?.employee?.name);
+    const assigneePositionName = getLocalizedText(
+      instance.assigneePosition?.name,
+    );
+
+    return (
+      assigneeName ||
+      assigneePositionName ||
+      `${t("remark.childInstance", "Child Instance")} ${index + 1}`
+    );
+  };
+
+  const instanceOptions = [
+    {
+      id: incomingInstanceId,
+      label: t("remark.parentInstance", "Parent Instance"),
+    },
+    ...childInstances.map((instance, index) => ({
+      id: instance.id,
+      label: getInstanceLabel(instance, index),
+    })),
+  ];
+
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-lg">
+          <MessageSquareText className="h-5 w-5" />
+          {t("remark.remarksHistory", "Remarks History")}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Instance Selector */}
+        <div className="space-y-2">
+          <label className="text-sm font-medium">
+            {t("remark.filterByInstance", "Filter by Instance")}
+          </label>
+          <Select
+            value={selectedInstanceId}
+            onValueChange={setSelectedInstanceId}
+            disabled={isLoadingInstances}>
+            <SelectTrigger>
+              <SelectValue
+                placeholder={t("remark.selectInstance", "Select instance")}
+              />
+            </SelectTrigger>
+            <SelectContent>
+              {instanceOptions.map((instance) => (
+                <SelectItem key={instance.id} value={instance.id}>
+                  <div className="flex items-center gap-2">
+                    <GitBranch className="h-4 w-4" />
+                    <span>{instance.label}</span>
+                  </div>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Remarks List */}
+        <ScrollArea className="h-[500px] pr-4">
+          <RemarkList instanceIds={[selectedInstanceId]} />
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default RemarksViewer;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/ReplyModal.tsx b/apps/edr-freight-web/backoffice/src/record-management/common/ReplyModal.tsx
new file mode 100644
index 000000000..e99597121
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/ReplyModal.tsx
@@ -0,0 +1,463 @@
+import React, { useState, useRef, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/shared/common/ui/dialog";
+import { Button } from "@/shared/common/ui/button";
+import { Textarea } from "@/shared/common/ui/textarea";
+import { Label } from "@/shared/common/ui/label";
+import {
+  Paperclip,
+  UploadCloud,
+  X,
+  Send,
+  Loader2,
+  FileText,
+  FileImage,
+  FileArchive,
+  Pencil,
+} from "lucide-react";
+import { uploadReplies } from "../services/api/newFileService";
+import { AttachmentInfo } from "../dto/userRecords/userRecordsDto";
+import { addReplies, editReplies } from "../services/api/recordOfficerService";
+
+export interface ReplyToEdit {
+  id: string;
+  comment: string;
+  attachment?: {
+    fileName: string;
+    contentType: string;
+    size: number;
+    originalname: string;
+  } | null;
+  attachments?: AttachmentInfo[];
+}
+
+interface ReplyModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  recordId: string;
+  onSuccess?: () => void;
+  /** When provided the modal operates in edit mode */
+  replyToEdit?: ReplyToEdit | null;
+}
+
+const formatFileSize = (bytes: number) => {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+};
+
+export const ReplyModal: React.FC<ReplyModalProps> = ({
+  isOpen,
+  onClose,
+  recordId,
+  onSuccess,
+  replyToEdit,
+}) => {
+  const { t } = useTranslation();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const isEditMode = Boolean(replyToEdit);
+
+  const [comment, setComment] = useState("");
+  const [files, setFiles] = useState<File[]>([]);
+  /** Existing server-side attachment (edit mode only) */
+  const [existingAttachment, setExistingAttachment] = useState<any | null>(
+    null,
+  );
+  const [dragActive, setDragActive] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Pre-fill form when editing
+  useEffect(() => {
+    if (isOpen && replyToEdit) {
+      setComment(replyToEdit.comment || "");
+      const att =
+        replyToEdit.attachment ||
+        (replyToEdit.attachments && replyToEdit.attachments[0]) ||
+        null;
+      setExistingAttachment(att);
+      setFiles([]);
+      setError(null);
+    } else if (isOpen && !replyToEdit) {
+      // Reset for add mode
+      setComment("");
+      setExistingAttachment(null);
+      setFiles([]);
+      setError(null);
+    }
+  }, [isOpen, replyToEdit]);
+
+  const resetForm = () => {
+    setComment("");
+    setFiles([]);
+    setExistingAttachment(null);
+    setError(null);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
+
+  const handleClose = () => {
+    if (isLoading) return;
+    resetForm();
+    onClose();
+  };
+
+  const handleDrag = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.type === "dragenter" || e.type === "dragover") {
+      setDragActive(true);
+    } else if (e.type === "dragleave") {
+      setDragActive(false);
+    }
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+
+    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+      setFiles([e.dataTransfer.files[0]]);
+      setExistingAttachment(null);
+      setError(null);
+    }
+  };
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      setFiles([e.target.files[0]]);
+      setExistingAttachment(null);
+      setError(null);
+    }
+  };
+
+  const removeFile = (index: number) => {
+    setFiles((prev) => prev.filter((_, i) => i !== index));
+    // Reset the input so the browser fires onChange even if the same file is picked again
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
+
+  const removeExistingAttachment = () => {
+    setExistingAttachment(null);
+  };
+
+  const getFileIcon = (type: string) => {
+    if (type.startsWith("image/"))
+      return <FileImage className="h-5 w-5 text-primary-500" />;
+    if (type === "application/pdf")
+      return <FileText className="h-5 w-5 text-primary-500" />;
+    if (type.includes("zip") || type.includes("rar"))
+      return <FileArchive className="h-5 w-5 text-primary-500" />;
+    return <Paperclip className="h-5 w-5 text-primary-500" />;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!comment.trim()) {
+      setError(t("validation.commentRequired", "Comment is required"));
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      let attachmentObj = null;
+
+      if (files.length > 0) {
+        const attachments = await uploadReplies(files);
+        const uploadedFile = Array.isArray(attachments)
+          ? attachments[0]
+          : attachments;
+        if (uploadedFile) {
+          attachmentObj = {
+            fileName: uploadedFile.fileName,
+            contentType: uploadedFile.contentType,
+            size: uploadedFile.size,
+            originalname: uploadedFile.originalname,
+            bucket: uploadedFile.bucket,
+          };
+        }
+      } else if (existingAttachment) {
+        const fileInfo = existingAttachment.fileInfo || existingAttachment;
+        attachmentObj = {
+          fileName: fileInfo.fileName,
+          contentType: fileInfo.contentType,
+          size: fileInfo.size,
+          originalname:
+            fileInfo.originalname || existingAttachment.name?.en || "File",
+          bucket: fileInfo.bucket,
+        };
+      }
+
+      if (isEditMode && replyToEdit) {
+        // --- EDIT ---
+        const editPayload = {
+          recordId,
+          comment,
+          attachment: attachmentObj,
+        };
+        await editReplies(replyToEdit.id, editPayload);
+        toast.success(t("msg.replyEdited", "Reply updated successfully!"));
+      } else {
+        // --- ADD ---
+        const replyPayload = {
+          recordId,
+          comment,
+          attachment: attachmentObj,
+        };
+        await addReplies(replyPayload);
+        toast.success(t("msg.replyAdded", "Reply added successfully!"));
+      }
+
+      resetForm();
+      onClose();
+      if (onSuccess) onSuccess();
+    } catch (err: any) {
+      const serverMessage =
+        err?.response?.data?.message ||
+        err?.response?.data?.exception?.response?.message ||
+        err?.message ||
+        null;
+      setError(
+        serverMessage ??
+          t("msg.replyError", "An error occurred while saving the reply."),
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Dialog
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) handleClose();
+      }}
+    >
+      <DialogContent className="max-w-lg max-h-[90vh] bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-2xl p-6 rounded-xl flex flex-col">
+        <DialogHeader className="border-b border-gray-100 dark:border-gray-700 pb-3">
+          <DialogTitle className="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
+            {isEditMode ? (
+              <>
+                <Pencil className="h-5 w-5 text-primary-500" />
+                {t("common.editReply", "Edit Reply")}
+              </>
+            ) : (
+              <>
+                <Send className="h-5 w-5 text-primary-500" />
+                {t("common.addReply", "Add Reply")}
+              </>
+            )}
+          </DialogTitle>
+        </DialogHeader>
+
+        <form
+          onSubmit={handleSubmit}
+          className="space-y-5 pt-3 flex-1 overflow-y-auto pr-2 pb-2"
+        >
+          {/* Comment input */}
+          <div className="space-y-2">
+            <Label
+              htmlFor="reply-comment"
+              className="text-sm font-semibold text-gray-700 dark:text-gray-300"
+            >
+              {t("common.replyMessage", "Reply Message")}{" "}
+              <span className="text-red-500">*</span>
+            </Label>
+            <Textarea
+              id="reply-comment"
+              placeholder={t(
+                "common.replyPlaceholder",
+                "Write your reply message or comment here...",
+              )}
+              value={comment}
+              onChange={(e) => {
+                setComment(e.target.value);
+                if (e.target.value.trim()) setError(null);
+              }}
+              rows={4}
+              disabled={isLoading}
+              className="resize-none border-gray-300 focus:border-primary-500 dark:border-gray-600 focus:ring-primary-500"
+            />
+          </div>
+
+          {/* Drag & Drop Uploader */}
+          <div className="space-y-2">
+            <Label className="text-sm font-semibold text-gray-700 dark:text-gray-300">
+              {t("common.attachments", "Attachments")}
+            </Label>
+
+            <p className="text-xs text-red-600 dark:text-red-400 mt-1">
+              {t(
+                "common.replynote",
+                "Only one attachment per reply is allowed.",
+              )}
+            </p>
+
+            <div
+              onDragEnter={handleDrag}
+              onDragOver={handleDrag}
+              onDragLeave={handleDrag}
+              onDrop={handleDrop}
+              onClick={() => fileInputRef.current?.click()}
+              className={`
+                border-2 border-dashed rounded-lg p-5 text-center cursor-pointer transition-all duration-200
+                ${
+                  dragActive
+                    ? "border-primary-500 bg-primary-50/50 dark:bg-primary-950/20"
+                    : "border-gray-300 hover:border-primary-400 hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-800/40"
+                }
+              `}
+            >
+              <input
+                ref={fileInputRef}
+                type="file"
+                onChange={handleFileSelect}
+                className="hidden"
+                disabled={isLoading}
+              />
+              <UploadCloud className="h-10 w-10 mx-auto text-gray-400 dark:text-gray-500 mb-2 animate-bounce-slow" />
+              <p className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                {t("common.uploadMessage", "Click to upload or drag and drop")}
+              </p>
+              <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                {t("common.uploadFormats", "PDF, PNG, JPG, ZIP (max 10MB)")}
+              </p>
+            </div>
+          </div>
+
+          {/* Existing attachment (edit mode) */}
+          {existingAttachment && (
+            <div className="space-y-2">
+              <Label className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                {t("common.existingAttachment", "Existing Attachment")}
+              </Label>
+              <div className="border border-gray-100 dark:border-gray-700 rounded-lg p-2 bg-gray-50/50 dark:bg-gray-900/30">
+                <div className="flex items-center justify-between border border-gray-200 dark:border-gray-700 rounded-lg p-2 bg-white dark:bg-gray-800 text-sm shadow-sm">
+                  <div className="flex items-center gap-3 min-w-0">
+                    {getFileIcon(
+                      existingAttachment.contentType ||
+                        existingAttachment.fileInfo?.contentType ||
+                        "",
+                    )}
+                    <div className="min-w-0">
+                      <p className="font-medium text-gray-800 dark:text-gray-200 truncate max-w-[240px]">
+                        {existingAttachment.originalname ||
+                          existingAttachment.fileInfo?.originalname ||
+                          existingAttachment.name?.en ||
+                          existingAttachment.fileName ||
+                          "File"}
+                      </p>
+                      {(existingAttachment.size != null ||
+                        existingAttachment.fileInfo?.size != null) && (
+                        <p className="text-xs text-gray-500 dark:text-gray-400">
+                          {formatFileSize(
+                            existingAttachment.size ??
+                              existingAttachment.fileInfo?.size ??
+                              0,
+                          )}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={removeExistingAttachment}
+                    disabled={isLoading}
+                    className="p-1.5 rounded-full text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+                  >
+                    <X className="h-4 w-4" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* New file attachment list */}
+          {files.length > 0 && (
+            <div className="max-h-40 overflow-y-auto space-y-2 border border-gray-100 dark:border-gray-700 rounded-lg p-2 bg-gray-50/50 dark:bg-gray-900/30">
+              {files.map((file, idx) => (
+                <div
+                  key={idx}
+                  className="flex items-center justify-between border border-gray-200 dark:border-gray-700 rounded-lg p-2 bg-white dark:bg-gray-800 text-sm shadow-sm"
+                >
+                  <div className="flex items-center gap-3 min-w-0">
+                    {getFileIcon(file.type)}
+                    <div className="min-w-0">
+                      <p className="font-medium text-gray-800 dark:text-gray-200 truncate max-w-[240px]">
+                        {file.name}
+                      </p>
+                      <p className="text-xs text-gray-500 dark:text-gray-400">
+                        {formatFileSize(file.size)}
+                      </p>
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => removeFile(idx)}
+                    disabled={isLoading}
+                    className="p-1.5 rounded-full text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+                  >
+                    <X className="h-4 w-4" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {error && (
+            <div className="text-sm font-semibold text-red-500 bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-900 rounded-lg px-3 py-2">
+              {error}
+            </div>
+          )}
+
+          <DialogFooter className="border-t border-gray-100 dark:border-gray-700 pt-3 gap-2 flex-shrink-0">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleClose}
+              disabled={isLoading}
+              className="w-full sm:w-auto"
+            >
+              {t("common.cancel", "Cancel")}
+            </Button>
+            <Button
+              type="submit"
+              disabled={isLoading}
+              className="w-full sm:w-auto flex items-center justify-center gap-2 bg-primary-600 hover:bg-primary-700 dark:bg-primary-700 dark:hover:bg-primary-600"
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                  {t("common.submitting", "Submitting...")}
+                </>
+              ) : isEditMode ? (
+                <>
+                  <Pencil className="h-4 w-4" />
+                  {t("common.update", "Update")}
+                </>
+              ) : (
+                <>
+                  <Send className="h-4 w-4" />
+                  {t("common.submit", "Submit")}
+                </>
+              )}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/ReplySection.tsx b/apps/edr-freight-web/backoffice/src/record-management/common/ReplySection.tsx
new file mode 100644
index 000000000..d6dc71703
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/ReplySection.tsx
@@ -0,0 +1,317 @@
+import React, { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import {
+  MessageSquare,
+  Clock,
+  Pencil,
+  Trash2,
+  AlertTriangle,
+  Loader2,
+} from "lucide-react";
+import { Card, CardContent } from "@/shared/common/ui/card";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/shared/common/ui/dialog";
+import FileList from "@/record-management/common/fileListComponent";
+import { ReplyModal } from "@/record-management/common/ReplyModal";
+import type { ReplyToEdit } from "@/record-management/common/ReplyModal";
+import { deleteReplies } from "../services/api/recordOfficerService";
+import { useLocalizedName } from "@/shared/common/localizedName";
+
+interface ReplySectionProps {
+  recordId: string;
+  replies: any[];
+  isRecordOfficer: boolean;
+  onRefresh: () => void;
+  isAddOpen: boolean;
+  onCloseAdd: () => void;
+}
+
+export const ReplySection: React.FC<ReplySectionProps> = ({
+  recordId,
+  replies,
+  isRecordOfficer,
+  onRefresh,
+  isAddOpen,
+  onCloseAdd,
+}) => {
+  const { t, i18n } = useTranslation();
+  const [isAddReplyModalOpen, setIsAddReplyModalOpen] = useState(false);
+  const [replyToEdit, setReplyToEdit] = useState<ReplyToEdit | null>(null);
+  const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = useState(false);
+  const [replyToDeleteId, setReplyToDeleteId] = useState<string | null>(null);
+  const [isDeletingReply, setIsDeletingReply] = useState(false);
+  const localizedName = useLocalizedName();
+  const lang = i18n.language;
+  // Sync isAddOpen prop to internal state
+  useEffect(() => {
+    if (isAddOpen) {
+      setReplyToEdit(null);
+      setIsAddReplyModalOpen(true);
+    }
+  }, [isAddOpen]);
+
+  const handleEditReply = (reply: any) => {
+    setReplyToEdit({
+      id: reply.id,
+      comment: reply.comment,
+      attachment: reply.attachment || null,
+      attachments:
+        reply.attachments?.map((att: any) => ({
+          fileInfo: {
+            bucket: att.fileInfo?.bucket || "",
+            fileName: att.fileInfo?.fileName || att.name,
+            contentType: att.fileInfo?.contentType || att.type || "",
+            originalname: att.fileInfo?.originalname || att.name || "",
+            size: att.fileInfo?.size || att.size || 0,
+          },
+          name: att.name || {
+            am: att.fileInfo?.originalname || "",
+            en: att.fileInfo?.originalname || "",
+          },
+        })) ?? [],
+    });
+    setIsAddReplyModalOpen(true);
+  };
+
+  const handleDeleteReply = async () => {
+    if (!replyToDeleteId) return;
+    setIsDeletingReply(true);
+    try {
+      await deleteReplies(replyToDeleteId);
+      toast.success(t("msg.replyDeleted", "Reply deleted successfully!"));
+      onRefresh();
+    } catch (err: any) {
+      const serverMessage =
+        err?.response?.data?.message || err?.message || null;
+      toast.error(
+        serverMessage ?? t("msg.replyDeleteError", "Failed to delete reply."),
+      );
+    } finally {
+      setIsDeletingReply(false);
+      setIsDeleteConfirmOpen(false);
+      setReplyToDeleteId(null);
+    }
+  };
+
+  const confirmDeleteReply = (replyId: string) => {
+    setReplyToDeleteId(replyId);
+    setIsDeleteConfirmOpen(true);
+  };
+
+  const handleModalClose = () => {
+    setIsAddReplyModalOpen(false);
+    setReplyToEdit(null);
+    onCloseAdd();
+  };
+
+  return (
+    <div className="space-y-4">
+      <Card className="border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+        <CardContent className="p-0">
+          <div className="rounded-t-lg border-b border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900">
+            <div className="flex items-center gap-2">
+              <MessageSquare className="h-5 w-5 text-primary" />
+              <h3 className="font-semibold text-gray-900 dark:text-white">
+                {t("common.replies", "Replies")}{" "}
+                {replies?.length > 0 && `(${replies.length})`}
+              </h3>
+            </div>
+          </div>
+
+          <div className="p-4">
+            {replies?.length > 0 ? (
+              <ul className="relative space-y-4 border-l-2 border-gray-200 pl-5 dark:border-gray-700">
+                {replies.map((reply: any) => {
+                  const nameStr = reply.employeePosition?.employee.name
+                    ? localizedName(reply.employeePosition?.employee.name)
+                    : "";
+                  const initials = nameStr
+                    ? nameStr
+                        .split(" ")
+                        .filter(Boolean)
+                        .slice(0, 2)
+                        .map((n: string) => n[0].toUpperCase())
+                        .join("")
+                    : "RO";
+
+                  return (
+                    <li key={reply.id} className="relative">
+                      <span className="absolute -left-[27px] top-1 h-3 w-3 rounded-full bg-primary ring-4 ring-white dark:ring-gray-800" />
+
+                      <div className="rounded-lg border border-gray-200 bg-white transition-shadow hover:shadow-sm dark:border-gray-700 dark:bg-gray-800">
+                        <header className="flex items-start justify-between gap-2 border-b border-gray-100 p-3 dark:border-gray-700">
+                          <div className="flex min-w-0 items-center gap-3">
+                            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-primary-500 to-primary-600 text-xs font-semibold text-white shadow-sm">
+                              {initials}
+                            </div>
+
+                            <div className="min-w-0">
+                              <div className="flex flex-wrap items-center gap-2">
+                                <span className="truncate text-sm font-semibold text-gray-900 dark:text-white">
+                                  {localizedName(
+                                    reply.employeePosition?.employee.name,
+                                  )}
+                                </span>
+                                <span className="text-xs text-gray-500 dark:text-gray-400">
+                                  (
+                                  {localizedName(
+                                    reply.employeePosition?.position.name,
+                                  )}
+                                  )
+                                </span>
+                              </div>
+                              <div className="mt-1 flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400">
+                                <Clock className="h-3 w-3" />
+                                <span>
+                                  {lang === "en"
+                                    ? new Date(reply.updatedAt).toLocaleString()
+                                    : reply.amharicUpdatedAt ||
+                                      new Date(
+                                        reply.updatedAt,
+                                      ).toLocaleString()}
+                                </span>
+                              </div>
+                            </div>
+                          </div>
+
+                          {/* Edit / Delete buttons — RO only */}
+                          {isRecordOfficer && (
+                            <div className="flex items-center gap-1 shrink-0">
+                              <button
+                                type="button"
+                                onClick={() => handleEditReply(reply)}
+                                className="p-1.5 rounded-md text-gray-400 hover:text-primary-600 hover:bg-primary-50 dark:hover:bg-primary-900/20 transition-colors"
+                                title={t("common.edit", "Edit")}
+                              >
+                                <Pencil className="h-4 w-4" />
+                              </button>
+                              <button
+                                type="button"
+                                onClick={() => confirmDeleteReply(reply.id)}
+                                className="p-1.5 rounded-md text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+                                title={t("common.delete", "Delete")}
+                              >
+                                <Trash2 className="h-4 w-4" />
+                              </button>
+                            </div>
+                          )}
+                        </header>
+
+                        <div className="p-3 space-y-3">
+                          <div>
+                            <p className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">
+                              {t("common.comment", "Comment")}
+                            </p>
+                            <p className="whitespace-pre-wrap break-words text-sm leading-relaxed text-gray-700 dark:text-gray-200">
+                              {reply.comment}
+                            </p>
+                          </div>
+
+                          {(reply.attachment) && (
+                            <div className="pt-2 border-t border-gray-100 dark:border-gray-700 space-y-2">
+                              <p className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                                {t(
+                                  "common.replyAttachments",
+                                  "Reply Attachments",
+                                )}
+                              </p>
+                              <FileList
+                                attachments={[reply.attachment]}
+                                showDelete={false}
+                              />
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </li>
+                  );
+                })}
+              </ul>
+            ) : (
+              <div className="text-center p-6 border-2 border-dashed border-gray-200 dark:border-gray-700 rounded-lg">
+                <MessageSquare className="h-10 w-10 text-gray-400 dark:text-gray-500 mx-auto mb-2" />
+                <p className="text-sm text-gray-500 dark:text-gray-400 italic">
+                  {t("common.noReplies", "No replies added yet.")}
+                </p>
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      {recordId && (
+        <ReplyModal
+          isOpen={isAddReplyModalOpen}
+          onClose={handleModalClose}
+          recordId={recordId}
+          onSuccess={onRefresh}
+          replyToEdit={replyToEdit}
+        />
+      )}
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog
+        open={isDeleteConfirmOpen}
+        onOpenChange={(open) => {
+          if (!open && !isDeletingReply) {
+            setIsDeleteConfirmOpen(false);
+            setReplyToDeleteId(null);
+          }
+        }}
+      >
+        <DialogContent className="max-w-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-2xl p-6 rounded-xl">
+          <DialogHeader>
+            <DialogTitle className="text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2">
+              <AlertTriangle className="h-5 w-5 text-red-500" />
+              {t("common.confirmDelete", "Confirm Delete")}
+            </DialogTitle>
+          </DialogHeader>
+          <p className="text-sm text-gray-600 dark:text-gray-300 py-3">
+            {t(
+              "common.deleteReplyConfirmation",
+              "Are you sure you want to delete this reply? This action cannot be undone.",
+            )}
+          </p>
+          <DialogFooter className="gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => {
+                setIsDeleteConfirmOpen(false);
+                setReplyToDeleteId(null);
+              }}
+              disabled={isDeletingReply}
+            >
+              {t("common.cancel", "Cancel")}
+            </Button>
+            <Button
+              type="button"
+              onClick={handleDeleteReply}
+              disabled={isDeletingReply}
+              className="bg-red-600 hover:bg-red-700 text-white"
+            >
+              {isDeletingReply ? (
+                <>
+                  <Loader2 className="h-4 w-4 animate-spin mr-2" />
+                  {t("common.deleting", "Deleting...")}
+                </>
+              ) : (
+                <>
+                  <Trash2 className="h-4 w-4 mr-2" />
+                  {t("common.delete", "Delete")}
+                </>
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/RichTextEditor.tsx b/apps/edr-freight-web/backoffice/src/record-management/common/RichTextEditor.tsx
new file mode 100644
index 000000000..5d48b25e4
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/RichTextEditor.tsx
@@ -0,0 +1,194 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Editor } from "@tinymce/tinymce-react";
+import type { Editor as TinyMCEEditor } from "tinymce";
+
+import "tinymce/tinymce";
+import "tinymce/icons/default";
+import "tinymce/themes/silver";
+import "tinymce/models/dom/model";
+
+// Plugins
+import "tinymce/plugins/autolink";
+import "tinymce/plugins/link";
+import "tinymce/plugins/lists";
+import "tinymce/plugins/code";
+import "tinymce/plugins/table";
+import "tinymce/plugins/image";
+import "tinymce/plugins/preview";
+import "tinymce/plugins/searchreplace";
+import "tinymce/plugins/wordcount";
+// fontsize and fontfamily are built into TinyMCE 7 core — they are toolbar
+// buttons, not plugins. Do not list them under plugins.
+
+// CSS
+import "tinymce/skins/ui/oxide/skin.min.css";
+import "tinymce/skins/ui/oxide-dark/skin.min.css";
+
+export default function RichTextEditor({
+  value,
+  onChange,
+  shouldClear,
+}: {
+  value?: string;
+  onChange?: (v: string) => void;
+  shouldClear?: boolean;
+}) {
+  const editorRef = useRef<TinyMCEEditor | null>(null);
+  const [isDarkMode, setIsDarkMode] = useState(() => {
+    if (typeof window === "undefined") {
+      return false;
+    }
+
+    const root = document.documentElement;
+    return (
+      root.classList.contains("dark") || root.getAttribute("data-theme") === "dark"
+    );
+  });
+
+  // ✅ When shouldClear becomes true → clear editor + remove draft
+  useEffect(() => {
+    if (shouldClear) {
+      if (editorRef.current) {
+        editorRef.current.setContent("");
+      }
+    }
+  }, [shouldClear]);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    const updateThemeMode = () => {
+      setIsDarkMode(
+        root.classList.contains("dark") ||
+          root.getAttribute("data-theme") === "dark",
+      );
+    };
+
+    updateThemeMode();
+
+    const observer = new MutationObserver(updateThemeMode);
+    observer.observe(root, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"],
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  const init = useMemo(
+    () => ({
+      // Point self-hosted TinyMCE at the static assets copied into /public/tinymce.
+      // Without this, the bundled TinyMCE has an empty baseURL and resolves
+      // skin/content CSS against the current page URL, producing 404s like
+      // /record-management/userRecords//skins/ui/oxide/skin.css on deep routes.
+      base_url: "/tinymce",
+      suffix: ".min",
+      height: 480,
+      menubar: true,
+      plugins:
+        "autolink link lists code table image preview searchreplace wordcount",
+      toolbar: [
+        "| fontfamily fontsize",
+        "undo redo | styles | bold italic underline |",
+        "alignleft aligncenter alignright alignjustify |",
+        "bullist numlist outdent indent | link image table | code preview ",
+      ].join(" "),
+      skin: isDarkMode ? "oxide-dark" : "oxide",
+      content_css: false,
+      promotion: false,
+      content_style: `
+        body {
+          background-color: ${isDarkMode ? "#0f172a" : "#ffffff"};
+          color: ${isDarkMode ? "#e2e8f0" : "#0f172a"};
+          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+          line-height: 1.4;
+          margin: 1rem;
+        }
+        a {
+          color: ${isDarkMode ? "#93c5fd" : "#2563eb"};
+        }
+        table {
+          border-collapse: collapse;
+        }
+        table, th, td {
+          border-color: ${isDarkMode ? "#475569" : "#cbd5e1"};
+        }
+        table:not([cellpadding]) td, table:not([cellpadding]) th {
+          padding: 0.4rem;
+        }
+        table[border]:not([border="0"]):not([style*="border-width"]) td,
+        table[border]:not([border="0"]):not([style*="border-width"]) th {
+          border-width: 1px;
+        }
+        table[border]:not([border="0"]):not([style*="border-style"]) td,
+        table[border]:not([border="0"]):not([style*="border-style"]) th {
+          border-style: solid;
+        }
+        code {
+          background-color: ${isDarkMode ? "#334155" : "#e2e8f0"};
+          border-radius: 3px;
+          padding: 0.1rem 0.2rem;
+        }
+        hr {
+          border-color: ${isDarkMode ? "#475569" : "#cbd5e1"};
+          border-style: solid;
+          border-width: 1px 0 0 0;
+        }
+        .mce-content-body:not([dir=rtl]) blockquote {
+          border-left: 2px solid ${isDarkMode ? "#475569" : "#cbd5e1"};
+          margin-left: 1.5rem;
+          padding-left: 1rem;
+        }
+        .mce-content-body[dir=rtl] blockquote {
+          border-right: 2px solid ${isDarkMode ? "#475569" : "#cbd5e1"};
+          margin-right: 1.5rem;
+          padding-right: 1rem;
+        }
+      `,
+
+      // Fonts (Latin + Amharic/Ethiopic)
+      font_family_formats:
+        "Arial=arial,helvetica,sans-serif;" +
+        "Courier New=courier new,courier,monospace;" +
+        "Georgia=georgia,palatino;" +
+        "Tahoma=tahoma,arial,helvetica,sans-serif;" +
+        "Times New Roman=times new roman,times;" +
+        "Verdana=verdana,geneva;" +
+        "Roboto=Roboto, sans-serif;" +
+        "Open Sans=Open Sans, sans-serif;" +
+        "Lato=Lato, sans-serif;" +
+        "Montserrat=Montserrat, sans-serif;" +
+        "Nyala=Nyala, sans-serif;" + // Windows Amharic font
+        "Abyssinica SIL=Abyssinica SIL, serif;" + // Amharic (Linux/Google Fonts)
+        "Noto Sans Ethiopic=Noto Sans Ethiopic, sans-serif;" + // Google Fonts Amharic
+        "Ebrima=Ebrima, sans-serif;" + // Ethiopic, Arabic
+        "Sylfaen=Sylfaen, serif;" + // Ethiopic + Armenian/Georgian
+        "Geez Able=Geez Able, serif;" + // Common Ethiopic font
+        "Visual Geez Unicode=Visual Geez Unicode, serif;" + // Popular for Amharic docs
+        "Segoe UI=Segoe UI, sans-serif;" +
+        "Helvetica=helvetica,arial,sans-serif;" +
+        "Trebuchet MS=Trebuchet MS, sans-serif;" +
+        "Garamond=Garamond, serif;" +
+        "Cambria=Cambria, serif;" +
+        "Calibri=Calibri, sans-serif;",
+
+      // Extended font sizes
+      fontsize_formats:
+        "8pt 10pt 12pt 14pt 18pt 66pt 24pt 36pt 48pt 72pt " +
+        "1em 1.2em 1.5em 2em 3em 4em " +
+        "small medium large x-large xx-large",
+    }),
+    [isDarkMode],
+  );
+
+  return (
+    <Editor
+      key={isDarkMode ? "tinymce-dark" : "tinymce-light"}
+      onInit={(_, editor) => (editorRef.current = editor)}
+      value={value}
+      onEditorChange={onChange}
+      init={init}
+    />
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/WorkflowCommentHistory.tsx b/apps/edr-freight-web/backoffice/src/record-management/common/WorkflowCommentHistory.tsx
new file mode 100644
index 000000000..78b04cd53
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/WorkflowCommentHistory.tsx
@@ -0,0 +1,624 @@
+import React, { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { format, isToday, isYesterday } from "date-fns";
+import {
+  MessageCircle,
+  ChevronDown,
+  ChevronUp,
+  RefreshCw,
+  User,
+  Calendar,
+  Building,
+  Clock3,
+} from "lucide-react";
+import { Card, CardContent } from "@/shared/common/ui/card";
+import { useRemarks } from "@/record-management/components/hooks/useRecordAssignment";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { renderStatus } from "@/record-management/utils/renderDetails";
+
+/* ============================================================================
+ *  CommentCard — compact assignment/comment panel (named export)
+ * ========================================================================== */
+
+export interface CommentCardProps {
+  createdAt: string;
+  /** Optional Amharic-formatted timestamp shown when the locale is `am`. */
+  amharicCreatedAt?: string | null;
+  comment?: string | null;
+  assignerName: string;
+  showCommentTitle?: boolean;
+  showFromText?: boolean;
+  commentSection?: {
+    amharicCreatedAt?: string | null;
+    comment?: string | null;
+    assignerName: string;
+    createdAt: string;
+  }[];
+  variant?: "default" | "secondary" | "info" | "success";
+}
+
+const formatCreatedAt = (createdAt: string) => {
+  if (!createdAt) {
+    return "Unknown time";
+  }
+
+  const date = new Date(createdAt);
+  if (Number.isNaN(date.getTime())) {
+    return createdAt;
+  }
+
+  return date.toLocaleString(undefined, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+};
+
+const getInitials = (name: string) =>
+  name
+    .split(" ")
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase() ?? "")
+    .join("") || "A";
+
+export const CommentCard = ({
+  createdAt,
+  amharicCreatedAt,
+  comment,
+  assignerName,
+  commentSection,
+  showCommentTitle = true,
+  showFromText = true,
+}: CommentCardProps) => {
+  const { t, i18n } = useTranslation();
+  const lang = i18n.language || "en";
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+
+  const toggleExpand = (id: string) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  // Helper function to render a single comment
+  const renderSingleComment = (
+    commentText: string | null | undefined,
+    assigner: string,
+    date?: string,
+    amharicDate?: string | null,
+    key?: number,
+  ) => {
+    const displayedComment =
+      commentText?.trim() ||
+      t("viewDetail.noComment", { defaultValue: "No comment provided." });
+    const initials = getInitials(assigner);
+
+    let displayedDate = "";
+    if (date) {
+      displayedDate =
+        lang === "am" && amharicDate ? amharicDate : formatCreatedAt(date);
+    } else if (amharicDate && lang === "am") {
+      displayedDate = amharicDate;
+    } else {
+      displayedDate = t("viewDetail.dateNotAvailable", {
+        defaultValue: "Date not available",
+      });
+    }
+
+    const commentId = key !== undefined ? String(key) : "single";
+    const isExpanded = expanded.has(commentId);
+    const isLongComment = displayedComment.length > 150;
+    return (
+      <li key={commentId} className="relative">
+        <span className="absolute -left-[27px] top-1 h-3 w-3 rounded-full bg-primary-500 ring-4 ring-white dark:ring-gray-800" />
+
+        <div className="rounded-lg border border-gray-200 bg-white transition-shadow hover:shadow-sm dark:border-gray-700 dark:bg-gray-800">
+          <header className="flex items-start justify-between gap-2 border-b border-gray-100 p-3 dark:border-gray-700">
+            <div className="flex min-w-0 items-center gap-3">
+              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-primary-500 to-primary-600 text-xs font-semibold text-white shadow-sm">
+                {initials}
+              </div>
+
+              <div className="min-w-0">
+                <div className="flex flex-wrap items-center gap-2">
+                  <span className="truncate text-sm font-semibold text-gray-900 dark:text-white">
+                    {showFromText && <>{t("viewDetail.from", "From")} </>}
+                    <span className="font-medium">
+                      {assigner ||
+                        t("common.unknownUser", { defaultValue: "Unknown" })}
+                    </span>
+                  </span>
+
+                  {renderStatus("commented", "commented")}
+                </div>
+
+                {displayedDate && (
+                  <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-gray-600 dark:text-gray-400">
+                    <span className="inline-flex items-center gap-1">
+                      <Clock3 className="h-3 w-3" />
+                      {displayedDate}
+                    </span>
+                  </div>
+                )}
+              </div>
+            </div>
+          </header>
+
+          <div className="p-3">
+            <div
+              className={`transition-all duration-200 ${
+                isExpanded ? "" : "max-h-20 overflow-hidden"
+              }`}
+            >
+              <p className="whitespace-pre-wrap break-words text-sm leading-relaxed text-gray-700 dark:text-gray-200">
+                {displayedComment}
+              </p>
+            </div>
+
+            {isLongComment && (
+              <button
+                type="button"
+                onClick={() => toggleExpand(commentId)}
+                className="mt-2 inline-flex items-center gap-1.5 rounded-md bg-gray-50 px-2.5 py-1 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:bg-gray-700/50 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white"
+              >
+                {isExpanded ? (
+                  <>
+                    <ChevronUp className="h-3 w-3" />
+                    {t("featuredNews.readLess")}
+                  </>
+                ) : (
+                  <>
+                    <ChevronDown className="h-3 w-3" />
+                    {t("featuredNews.readMore")}
+                  </>
+                )}
+              </button>
+            )}
+          </div>
+        </div>
+      </li>
+    );
+  };
+
+  const renderCommentPanel = (comments: React.ReactNode[]) => (
+    <Card className="border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+      <CardContent className="p-0">
+        {showCommentTitle && (
+          <div className="rounded-t-lg border-b border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900">
+            <div className="flex items-center gap-2">
+              <MessageCircle className="h-5 w-5 text-primary-600 dark:text-primary-400" />
+              <h3 className="font-semibold text-gray-900 dark:text-white">
+                {t("viewDetail.comment", { defaultValue: "Comment" })}
+                {comments.length > 1 ? ` (${comments.length})` : ""}
+              </h3>
+            </div>
+          </div>
+        )}
+
+        <div className="p-4">
+          <ul className="relative space-y-4 border-l-2 border-gray-200 pl-5 dark:border-gray-700">
+            {comments}
+          </ul>
+        </div>
+      </CardContent>
+    </Card>
+  );
+
+  // Case 1: Multiple comments in commentSection
+  if (commentSection && commentSection.length > 1) {
+    const comments = commentSection
+      .filter((section) => section.comment?.trim())
+      .map((section, index) =>
+        renderSingleComment(
+          section.comment,
+          section.assignerName,
+          section.createdAt,
+          section.amharicCreatedAt,
+          index,
+        ),
+      );
+
+    if (!comments.length) {
+      return null;
+    }
+
+    return renderCommentPanel(comments);
+  }
+
+  // Case 2: Single comment in commentSection
+  if (commentSection && commentSection.length === 1) {
+    const singleComment = commentSection[0];
+    if (
+      singleComment.comment &&
+      singleComment.comment !== "" &&
+      singleComment.comment.trim().length > 0
+    ) {
+      return renderCommentPanel([
+        renderSingleComment(
+          singleComment.comment,
+          singleComment.assignerName,
+          singleComment.createdAt,
+          singleComment.amharicCreatedAt,
+        ),
+      ]);
+    }
+  }
+
+  // Case 3: No commentSection or empty array, use props
+  return renderCommentPanel([
+    renderSingleComment(
+      comment,
+      assignerName || "",
+      createdAt,
+      amharicCreatedAt,
+    ),
+  ]);
+};
+/* ============================================================================
+ *  WorkflowCommentHistory — outgoing-record timeline (default export)
+ *  Untouched visually. Renders inline cards with date grouping, action-colored
+ *  dots on the rail, and status badges. Independent from CommentCard above.
+ * ========================================================================== */
+
+export interface WorkflowHistoryItem {
+  id: string;
+  comment?: string | null;
+  action?: string | null;
+  createdAt: string;
+  amharicCreatedAt?: string | null;
+  employeePosition?: {
+    employee?: { name?: { en?: string; am?: string } | null } | null;
+    position?: { name?: { en?: string; am?: string } | null } | null;
+  } | null;
+  delegatedEmployeePosition?: {
+    employee?: { name?: { en?: string; am?: string } | null } | null;
+    position?: { name?: { en?: string; am?: string } | null } | null;
+  } | null;
+}
+
+export interface WorkflowCommentHistoryProps {
+  /** When provided, the component fetches outgoing-history itself. */
+  recordId?: string;
+  /** Or pass pre-fetched items to skip the network call. */
+  items?: WorkflowHistoryItem[];
+  /** Override the header title. */
+  title?: string;
+  /** Restrict to a subset of raw API actions (case-insensitive). */
+  filterActions?: string[];
+  className?: string;
+  showHeader?: boolean;
+  emptyMessage?: string;
+}
+
+const ACTION_DOT: Record<string, string> = {
+  approved: "bg-primary-500",
+  accepted: "bg-primary-500",
+  forwarded: "bg-blue-500",
+  rejected: "bg-red-500",
+  send_back: "bg-amber-500",
+  sent_back: "bg-amber-500",
+  adjustment: "bg-amber-500",
+  adjustment_requested: "bg-amber-500",
+  default: "bg-primary-500",
+};
+
+const dateBucketLabel = (
+  iso: string,
+  lang: string,
+  amharic: string | undefined | null,
+  t: (key: string) => string,
+) => {
+  const d = new Date(iso);
+  if (isToday(d)) return t("common.today");
+  if (isYesterday(d)) return t("common.yesterday");
+  return lang === "en"
+    ? format(d, "MMMM d, yyyy")
+    : amharic?.split(" ")?.slice(0, 3).join(" ") || format(d, "MMMM d, yyyy");
+};
+
+const WorkflowCommentHistory: React.FC<WorkflowCommentHistoryProps> = ({
+  recordId,
+  items: providedItems,
+  title,
+  filterActions,
+  className = "",
+  showHeader = true,
+  emptyMessage,
+}) => {
+  const { t, i18n } = useTranslation();
+  const lang = i18n.language || "en";
+  const localizedName = useLocalizedName();
+  const shouldFetch = !providedItems && !!recordId;
+  const { data, isLoading, error, refetch } = useRemarks(recordId ?? "", {
+    enabled: shouldFetch,
+  });
+
+  const rawItems: WorkflowHistoryItem[] =
+    providedItems ?? (data?.items as WorkflowHistoryItem[] | undefined) ?? [];
+
+  const filteredItems = useMemo(() => {
+    if (!filterActions?.length) return rawItems;
+    const set = new Set(filterActions.map((a) => a.toLowerCase()));
+    return rawItems.filter((i) => set.has((i.action || "").toLowerCase()));
+  }, [rawItems, filterActions]);
+
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+
+  const groupedByDate = useMemo(() => {
+    if (!filteredItems.length)
+      return [] as { label: string; items: WorkflowHistoryItem[] }[];
+    const groups = new Map<
+      string,
+      { label: string; items: WorkflowHistoryItem[] }
+    >();
+    [...filteredItems]
+      .sort(
+        (a, b) =>
+          new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
+      )
+      .forEach((item) => {
+        const key = format(new Date(item.createdAt), "yyyy-MM-dd");
+        const label = dateBucketLabel(
+          item.createdAt,
+          lang,
+          item.amharicCreatedAt,
+          t,
+        );
+        const bucket = groups.get(key);
+        if (bucket) bucket.items.push(item);
+        else groups.set(key, { label, items: [item] });
+      });
+    return Array.from(groups.values());
+  }, [filteredItems, lang, t]);
+
+  if (shouldFetch && isLoading) {
+    return (
+      <div
+        className={`flex justify-center items-center p-8 ${className}`}
+        role="status"
+      >
+        <RefreshCw className="h-6 w-6 animate-spin mr-2 text-gray-600 dark:text-gray-400" />
+        <span className="text-sm text-gray-600 dark:text-gray-400">
+          {t("viewDetail.loadingRemarks")}
+        </span>
+      </div>
+    );
+  }
+
+  if (shouldFetch && error) {
+    return (
+      <div
+        className={`flex flex-col items-center justify-center p-6 text-center ${className}`}
+      >
+        <div className="rounded-full bg-red-100 dark:bg-red-900/30 p-3 mb-3">
+          <MessageCircle className="h-6 w-6 text-red-600 dark:text-red-400" />
+        </div>
+        <p className="text-red-600 dark:text-red-400 font-medium mb-2">
+          {t("viewDetail.failedToLoadRemarks")}
+        </p>
+        <button
+          onClick={() => refetch()}
+          className="mt-2 text-sm text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300 font-medium"
+        >
+          {t("common.retry")}
+        </button>
+      </div>
+    );
+  }
+
+  if (!filteredItems.length) {
+    return (
+      <div
+        className={`text-center p-8 border-2 border-dashed border-gray-200 dark:border-gray-700 rounded-lg ${className}`}
+      >
+        <MessageCircle className="h-12 w-12 text-gray-400 dark:text-gray-500 mx-auto mb-3" />
+        <p className="text-muted-foreground dark:text-gray-400 font-medium">
+          {emptyMessage || t("viewDetail.noRemarksAvailable")}
+        </p>
+      </div>
+    );
+  }
+
+  const toggleExpand = (id: string) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const initialsOf = (name?: string) =>
+    (name || "?")
+      .split(/\s+/)
+      .filter(Boolean)
+      .slice(0, 2)
+      .map((p) => p[0]?.toUpperCase())
+      .join("") || "?";
+
+  return (
+    <Card
+      className={`shadow-sm border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 ${className}`}
+    >
+      <CardContent className="p-0">
+        {showHeader && (
+          <div className="p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 rounded-t-lg">
+            <div className="flex items-center gap-2">
+              <MessageCircle className="h-5 w-5 text-primary-600 dark:text-primary-400" />
+              <h3 className="font-semibold text-gray-900 dark:text-white">
+                {title || t("viewDetail.remarks")} ({filteredItems.length})
+              </h3>
+            </div>
+          </div>
+        )}
+
+        <div className="p-4 space-y-6">
+          {groupedByDate.map((group) => (
+            <section key={group.label} aria-label={group.label}>
+              <div className="flex items-center gap-3 mb-3">
+                <span className="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+                  {group.label}
+                </span>
+                <div className="flex-1 h-px bg-gray-200 dark:bg-gray-700" />
+              </div>
+
+              <ul className="relative border-l-2 border-gray-200 dark:border-gray-700 pl-5 space-y-4">
+                {group.items.map((item, idx) => {
+                  const isExpanded = expanded.has(item.id);
+                  const delegatedEmployeeName = item.delegatedEmployeePosition
+                    ? localizedName(
+                        item.delegatedEmployeePosition?.employee?.name as {
+                          am: string;
+                          en: string;
+                        },
+                      )
+                    : "";
+                  const assignedEmployeeName = item.employeePosition?.employee
+                    ? localizedName(
+                        (item.employeePosition.employee.name as {
+                          am: string;
+                          en: string;
+                        }) || {
+                          en: "",
+                          am: "",
+                        },
+                      )
+                    : "";
+                  const employeeName =
+                    delegatedEmployeeName && delegatedEmployeeName !== ""
+                      ? `${delegatedEmployeeName} (${t("viewDetail.for")} ${assignedEmployeeName})`
+                      : assignedEmployeeName;
+
+                  const positionName =
+                    lang === "en"
+                      ? item.employeePosition?.position?.name?.en ||
+                        item.employeePosition?.position?.name?.am
+                      : item.employeePosition?.position?.name?.am ||
+                        item.employeePosition?.position?.name?.en;
+                  const hasComment =
+                    !!item.comment && item.comment.trim().length > 0;
+                  const prev = idx > 0 ? group.items[idx - 1] : null;
+                  const sameSenderAsPrev =
+                    !!prev &&
+                    prev.employeePosition?.employee?.name?.en ===
+                      item.employeePosition?.employee?.name?.en;
+                  const actionKey = (item.action || "").toLowerCase();
+                  const dotClass = ACTION_DOT[actionKey] || ACTION_DOT.default;
+                  const statusKey = actionKey || "commented";
+
+                  return (
+                    <li key={item.id} className="relative">
+                      <span
+                        className={`absolute -left-[27px] top-1 h-3 w-3 rounded-full ring-4 ring-white dark:ring-gray-800 ${dotClass}`}
+                      />
+                      <div className="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:shadow-sm transition-shadow">
+                        <header className="flex items-start justify-between gap-2 p-3 border-b border-gray-100 dark:border-gray-700">
+                          <div className="flex items-center gap-3 min-w-0">
+                            {sameSenderAsPrev ? (
+                              <div className="w-8 h-8 flex-shrink-0" />
+                            ) : (
+                              <div className="flex-shrink-0 w-8 h-8 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full flex items-center justify-center text-white text-xs font-semibold shadow-sm">
+                                {employeeName ? (
+                                  initialsOf(employeeName)
+                                ) : (
+                                  <User className="h-4 w-4" />
+                                )}
+                              </div>
+                            )}
+                            <div className="min-w-0">
+                              <div className="flex flex-wrap items-center gap-2">
+                                <span className="font-semibold text-gray-900 dark:text-white text-sm truncate">
+                                  {t("viewDetail.from", "From")}{" "}
+                                  <span className="font-medium">
+                                    {employeeName || t("common.unknownUser")}
+                                  </span>
+                                </span>
+                                {renderStatus(statusKey, statusKey)}
+                              </div>
+                              <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-gray-600 dark:text-gray-400">
+                                {positionName && (
+                                  <span className="inline-flex items-center gap-1">
+                                    <Building className="h-3 w-3" />
+                                    <span className="truncate">
+                                      {positionName}
+                                    </span>
+                                  </span>
+                                )}
+                                <span
+                                  className="inline-flex items-center gap-1"
+                                  title={format(
+                                    new Date(item.createdAt),
+                                    "PPpp",
+                                  )}
+                                >
+                                  <Calendar className="h-3 w-3" />
+                                  {lang === "en"
+                                    ? format(new Date(item.createdAt), "h:mm a")
+                                    : item.amharicCreatedAt ||
+                                      format(
+                                        new Date(item.createdAt),
+                                        "h:mm a",
+                                      )}
+                                </span>
+                              </div>
+                            </div>
+                          </div>
+                        </header>
+
+                        <div className="p-3">
+                          {hasComment ? (
+                            <>
+                              <div
+                                className={`transition-all duration-200 ${
+                                  isExpanded ? "" : "max-h-20 overflow-hidden"
+                                }`}
+                              >
+                                <p className="text-sm text-gray-700 dark:text-gray-200 whitespace-pre-wrap leading-relaxed">
+                                  {item.comment}
+                                </p>
+                              </div>
+                              {(item.comment?.length ?? 0) > 150 && (
+                                <button
+                                  onClick={() => toggleExpand(item.id)}
+                                  className="mt-2 inline-flex items-center gap-1.5 rounded-md bg-gray-50 px-2.5 py-1 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:bg-gray-700/50 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white"
+                                >
+                                  {isExpanded ? (
+                                    <>
+                                      <ChevronUp className="h-3 w-3" />
+                                      {t("featuredNews.readLess")}
+                                    </>
+                                  ) : (
+                                    <>
+                                      <ChevronDown className="h-3 w-3" />
+                                      {t("featuredNews.readMore")}
+                                    </>
+                                  )}
+                                </button>
+                              )}
+                            </>
+                          ) : (
+                            <p className="text-sm text-gray-500 dark:text-gray-400 italic">
+                              {t("viewDetail.noComment")}
+                            </p>
+                          )}
+                        </div>
+                      </div>
+                    </li>
+                  );
+                })}
+              </ul>
+            </section>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default WorkflowCommentHistory;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/commonTypes.ts b/apps/edr-freight-web/backoffice/src/record-management/common/commonTypes.ts
new file mode 100644
index 000000000..27ccd1ad6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/commonTypes.ts
@@ -0,0 +1,11 @@
+export interface paSelectOptions {
+  Title: string;
+  Value: string;
+}
+export interface MultiSelectOptions {
+  label: string;
+  value: string;
+  icon?: React.ComponentType<{
+    className?: string;
+  }>;
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/dataTableColumnHeader.tsx b/apps/edr-freight-web/backoffice/src/record-management/common/dataTableColumnHeader.tsx
new file mode 100644
index 000000000..e267526ee
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/dataTableColumnHeader.tsx
@@ -0,0 +1,96 @@
+import { type Column } from "@tanstack/react-table";
+
+import { cn } from "@/shared/lib/utils";
+import { Button } from "@/shared/common/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  ChevronsUpDown,
+  EyeOff,
+} from "lucide-react";
+
+interface DataTableColumnHeaderProps<TData, TValue>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>;
+  title: string;
+}
+
+export function DataTableColumnHeader<TData, TValue>({
+  column,
+  title,
+  className,
+}: DataTableColumnHeaderProps<TData, TValue>) {
+  if (!column.getCanSort()) {
+    return <div className={cn(className)}>{title}</div>;
+  }
+
+  return (
+    <div className={cn("flex items-center space-x-2", className)}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            aria-label={
+              column.getIsSorted() === "desc"
+                ? `Sorted descending. Click to sort ascending.`
+                : column.getIsSorted() === "asc"
+                ? `Sorted ascending. Click to sort descending.`
+                : `Not sorted. Click to sort ascending.`
+            }
+            variant="ghost"
+            size="sm"
+            className="-ml-3 h-8 data-[state=open]:bg-accent"
+          >
+            <span>{title}</span>
+            {column.getIsSorted() === "desc" ? (
+              <ArrowDownIcon className="ml-2 h-4 w-4" aria-hidden="true" />
+            ) : column.getIsSorted() === "asc" ? (
+              <ArrowUpIcon className="ml-2 h-4 w-4" aria-hidden="true" />
+            ) : (
+              <ChevronsUpDown className="ml-2 h-4 w-4" aria-hidden="true" />
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem
+            aria-label="Sort ascending"
+            onClick={() => column.toggleSorting(false)}
+          >
+            <ArrowUpIcon
+              className="mr-2 h-3.5 w-3.5 text-muted-foreground/70"
+              aria-hidden="true"
+            />
+            Asc
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            aria-label="Sort descending"
+            onClick={() => column.toggleSorting(true)}
+          >
+            <ArrowDownIcon
+              className="mr-2 h-3.5 w-3.5 text-muted-foreground/70"
+              aria-hidden="true"
+            />
+            Desc
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            aria-label="Hide column"
+            onClick={() => column.toggleVisibility(false)}
+          >
+            <EyeOff
+              className="mr-2 h-3.5 w-3.5 text-muted-foreground/70"
+              aria-hidden="true"
+            />
+            Hide
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/dataTableFacetedFilter.tsx b/apps/edr-freight-web/backoffice/src/record-management/common/dataTableFacetedFilter.tsx
new file mode 100644
index 000000000..0ae2809c3
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/dataTableFacetedFilter.tsx
@@ -0,0 +1,151 @@
+import * as React from "react";
+import { Column } from "@tanstack/react-table";
+
+import { cn } from "@/shared/lib/utils";
+import { Badge } from "@/shared/common/ui/badge";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/shared/common/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/shared/common/ui/popover";
+import { Separator } from "@/shared/common/ui/separator";
+import { CheckIcon, PlusCircle } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+export type FilterOption = {
+  label: string;
+  value: string;
+  icon?: React.ComponentType<{ className?: string }>;
+};
+
+interface DataTableFacetedFilter<TData, TValue> {
+  column?: Column<TData, TValue>;
+  title?: string;
+  options: FilterOption[];
+}
+
+export function DataTableFacetedFilter<TData, TValue>({
+  column,
+  title,
+  options,
+}: DataTableFacetedFilter<TData, TValue>) {
+  const facets = column?.getFacetedUniqueValues();
+  const selectedValues = new Set(column?.getFilterValue() as string[]);
+  const { t } = useTranslation();
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline" size="sm" className="h-8 border-dashed">
+          <PlusCircle className="mr-2 h-4 w-4" />
+          {title}
+          {selectedValues?.size > 0 && (
+            <>
+              <Separator orientation="vertical" className="mx-2 h-4" />
+              <Badge
+                variant="secondary"
+                className="rounded-sm px-1 font-normal lg:hidden"
+              >
+                {selectedValues.size}
+              </Badge>
+              <div className="hidden space-x-1 lg:flex">
+                {selectedValues.size > 2 ? (
+                  <Badge
+                    variant="secondary"
+                    className="rounded-sm px-1 font-normal"
+                  >
+                    {selectedValues.size} selected
+                  </Badge>
+                ) : (
+                  options
+                    .filter((option) => selectedValues.has(option.value))
+                    .map((option) => (
+                      <Badge
+                        variant="secondary"
+                        key={option.value}
+                        className="rounded-sm px-1 font-normal"
+                      >
+                        {option.label}
+                      </Badge>
+                    ))
+                )}
+              </div>
+            </>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder={title} />
+          <CommandList>
+            <CommandEmpty>{t("common.noResult")}</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => {
+                const isSelected = selectedValues.has(option.value);
+                return (
+                  <CommandItem
+                    key={option.value}
+                    onSelect={() => {
+                      if (isSelected) {
+                        selectedValues.delete(option.value);
+                      } else {
+                        selectedValues.add(option.value);
+                      }
+                      const filterValues = Array.from(selectedValues);
+                      column?.setFilterValue(
+                        filterValues.length ? filterValues : undefined
+                      );
+                    }}
+                  >
+                    <div
+                      className={cn(
+                        "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                        isSelected
+                          ? "bg-primary text-primary-foreground"
+                          : "opacity-50 [&_svg]:invisible"
+                      )}
+                    >
+                      <CheckIcon className={cn("h-4 w-4")} />
+                    </div>
+                    {option.icon && (
+                      <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+                    )}
+                    <span>{option.label}</span>
+                    {facets?.get(option.value) && (
+                      <span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
+                        {facets.get(option.value)}
+                      </span>
+                    )}
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+            {selectedValues.size > 0 && (
+              <>
+                <CommandSeparator />
+                <CommandGroup>
+                  <CommandItem
+                    onSelect={() => column?.setFilterValue(undefined)}
+                    className="justify-center text-center"
+                  >
+                    Clear filters
+                  </CommandItem>
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/dataTableSkeleton.tsx b/apps/edr-freight-web/backoffice/src/record-management/common/dataTableSkeleton.tsx
new file mode 100644
index 000000000..3dff9ea96
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/dataTableSkeleton.tsx
@@ -0,0 +1,77 @@
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/common/ui/table";
+
+interface DataTableLoadingProps {
+  columnCount: number;
+  rowCount?: number;
+}
+
+export function DataTableLoading({
+  columnCount,
+  rowCount = 10,
+}: DataTableLoadingProps) {
+  return (
+    <div className="w-full space-y-3 overflow-auto">
+      <div className="flex w-full items-center justify-between space-x-2 overflow-auto p-1">
+        <div className="flex flex-1 items-center space-x-2">
+          <Skeleton className="h-7 w-[150px] lg:w-[250px]" />
+          <Skeleton className="h-7 w-[70px] border-dashed" />
+        </div>
+        <Skeleton className="ml-auto hidden h-7 w-[70px] lg:flex" />
+      </div>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {Array.from({ length: 1 }).map((_, i) => (
+              <TableRow key={i} className="hover:bg-transparent">
+                {Array.from({ length: columnCount }).map((_, i) => (
+                  <TableHead key={i}>
+                    <Skeleton className="h-6 w-full" />
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {Array.from({ length: rowCount }).map((_, i) => (
+              <TableRow key={i} className="hover:bg-transparent">
+                {Array.from({ length: columnCount }).map((_, i) => (
+                  <TableCell key={i}>
+                    <Skeleton className="h-6 w-full" />
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex w-full flex-col items-center justify-between gap-4 overflow-auto px-2 py-1 sm:flex-row sm:gap-8">
+        <div className="flex-1">
+          <Skeleton className="h-8 w-40" />
+        </div>
+        <div className="flex flex-col items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8">
+          <div className="flex items-center space-x-2">
+            <Skeleton className="h-8 w-24" />
+            <Skeleton className="h-8 w-[70px]" />
+          </div>
+          <div className="flex w-[100px] items-center justify-center text-sm font-medium">
+            <Skeleton className="h-8 w-20" />
+          </div>
+          <div className="flex items-center space-x-2">
+            <Skeleton className="hidden h-8 w-8 lg:block" />
+            <Skeleton className="h-8 w-8" />
+            <Skeleton className="h-8 w-8" />
+            <Skeleton className="hidden h-8 w-8 lg:block" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/dataTableToolbar.tsx b/apps/edr-freight-web/backoffice/src/record-management/common/dataTableToolbar.tsx
new file mode 100644
index 000000000..713afd610
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/dataTableToolbar.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import type { Table } from "@tanstack/react-table";
+
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+
+import { X } from "lucide-react";
+import { DataTableViewOptions } from "./dataTableViewOptions";
+import { DataTableFacetedFilter } from "./dataTableFacetedFilter";
+import { ReactNode } from "react";
+
+export interface FilterConfig {
+  columnKey: string;
+  title: string;
+  options: { label: string; value: string }[];
+  isVisible?: boolean;
+}
+
+export interface DataTableToolbarProps<TData> {
+  table: Table<TData>;
+  tableName: string;
+  toolBarPosition?: "right" | "left" | "center";
+  extraToolbar?: ReactNode;
+  filters?: FilterConfig[];
+  refreshTable?: () => void;
+}
+
+export function DataTableToolbar<TData>({
+  table,
+  tableName,
+  toolBarPosition = "left",
+  extraToolbar,
+  filters = [],
+  refreshTable,
+}: DataTableToolbarProps<TData>) {
+  const isFiltered = table.getState().columnFilters.length > 0;
+
+  return (
+    <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+      {/* Filters & Reset */}
+      <div className="flex flex-wrap items-center gap-2">
+        <Input
+          placeholder={`Filter ${tableName}...`}
+          onChange={(event) => table.setGlobalFilter(event.target.value)}
+          className="h-8 w-full sm:w-[150px] lg:w-[250px]"
+        />
+
+        {filters.map(
+          ({ columnKey, title, options, isVisible = true }) =>
+            isVisible &&
+            table.getColumn(columnKey) && (
+              <DataTableFacetedFilter
+                key={columnKey}
+                column={table.getColumn(columnKey)}
+                title={title}
+                options={options}
+              />
+            )
+        )}
+
+        {isFiltered && (
+          <Button
+            variant="ghost"
+            onClick={() => table.resetColumnFilters()}
+            className="h-8 px-2 lg:px-3"
+          >
+            Reset
+            <X className="ml-2 h-4 w-4" />
+          </Button>
+        )}
+      </div>
+
+      {/* Extra Toolbar + View Options */}
+      <div
+        className={`flex flex-wrap items-center gap-2 ${
+          toolBarPosition === "center"
+            ? "justify-center"
+            : toolBarPosition === "left"
+            ? "justify-start"
+            : "justify-end"
+        }`}
+      >
+        {extraToolbar}
+        <DataTableViewOptions table={table} refreshTable={refreshTable} />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/dataTableViewOptions.tsx b/apps/edr-freight-web/backoffice/src/record-management/common/dataTableViewOptions.tsx
new file mode 100644
index 000000000..736d15c89
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/dataTableViewOptions.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
+import { Table } from "@tanstack/react-table";
+import { RefreshCw, RotateCcw, Settings2 } from "lucide-react";
+
+import { Button } from "@/shared/common/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from "@/shared/common/ui/dropdown-menu";
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+import { getColumnToggleLabel } from "@/shared/common/ui/table/getColumnToggleLabel";
+
+interface DataTableViewOptionsProps<TData> {
+  table: Table<TData>;
+  refreshTable?: () => void;
+}
+
+export function DataTableViewOptions<TData>({
+  table,
+  refreshTable,
+}: DataTableViewOptionsProps<TData>) {
+  const [refreshing, setRefreshing] = useState(false);
+  const handleRefresh = async () => {
+    if (refreshTable) {
+      try {
+        setRefreshing(true);
+        await refreshTable(); // your actual refresh logic
+      } finally {
+        setRefreshing(false);
+      }
+    }
+  };
+  const { t } = useTranslation();
+  return (
+    <div className="flex flex-wrap items-center justify-end gap-2 mt-2">
+      {/* Refresh Button */}
+      <Button
+        variant="outline"
+        size="sm"
+        className="h-8"
+        onClick={handleRefresh}
+      >
+        <RefreshCw
+          className={`mr-2 transition-transform duration-500 ${
+            refreshing ? "animate-spin" : ""
+          }`}
+        />
+        {t("dashboard.refresh")}
+      </Button>
+
+      {/* Column Visibility Dropdown */}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-8 flex items-center gap-1"
+          >
+            <Settings2 className="h-4 w-4" />
+            {t("viewDetail.view")}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-[180px]">
+          <DropdownMenuLabel>{t("viewDetail.toogleColumns")}</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          {table
+            .getAllColumns()
+            .filter(
+              (column) =>
+                typeof column.accessorFn !== "undefined" && column.getCanHide()
+            )
+            .map((column) => (
+              <DropdownMenuCheckboxItem
+                key={column.id}
+                checked={column.getIsVisible()}
+                onCheckedChange={(value) => column.toggleVisibility(!!value)}
+              >
+                {getColumnToggleLabel(column.id, t)}
+              </DropdownMenuCheckboxItem>
+            ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/dynamicDialog.tsx b/apps/edr-freight-web/backoffice/src/record-management/common/dynamicDialog.tsx
new file mode 100644
index 000000000..6f354013a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/dynamicDialog.tsx
@@ -0,0 +1,91 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import React from "react";
+
+export interface DynamicDialogProps {
+  open: boolean; // Controlled open state of the dialog
+  onOpenChange: (open: boolean) => void; // Callback when the open state changes
+  title?: string; // Title text in the dialog header
+  description?: string; // Description text in the dialog header
+  confirmText?: string; // Text on the confirm button
+  cancelText?: string; // Text on the cancel button
+  onConfirm: (remark?: string) => void; // Action to run on confirmation with an optional remark
+  onCancel?: () => void; // Action to run on cancel (optional)
+  includeRemark?: boolean; // Whether to display the remark textarea
+  remarkLabel?: string; // Label for the remark textarea
+  remarkPlaceholder?: string; // Placeholder text for the remark textarea
+}
+
+export function DynamicDialog({
+  open,
+  onOpenChange,
+  title = "Please confirm your action",
+  description = "Are you sure you want to continue?",
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  onConfirm,
+  onCancel,
+  includeRemark = false,
+  remarkLabel = "Remark:",
+  remarkPlaceholder = "Enter remark...",
+}: DynamicDialogProps) {
+  const [remark, setRemark] = React.useState<string>("");
+
+  const handleConfirm = () => {
+    onConfirm(includeRemark ? remark : undefined);
+  };
+
+  const handleCancel = () => {
+    onCancel && onCancel();
+    onOpenChange(false); // Close dialog after cancel
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        {includeRemark && (
+          <div className="my-4 space-y-2">
+            <label htmlFor="remark" className="block text-sm font-medium">
+              {remarkLabel}
+            </label>
+            <textarea
+              id="remark"
+              placeholder={remarkPlaceholder}
+              value={remark}
+              onChange={(e) => setRemark(e.target.value)}
+              className="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:ring focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+            />
+          </div>
+        )}
+        <AlertDialogFooter>
+          <AlertDialogCancel
+            onClick={handleCancel}
+            type="button"
+            className="cursor-pointer"
+          >
+            {cancelText}
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={handleConfirm}
+            type="button"
+            className="cursor-pointer"
+          >
+            {confirmText}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/editor/EditorPropTypes.ts b/apps/edr-freight-web/backoffice/src/record-management/common/editor/EditorPropTypes.ts
new file mode 100644
index 000000000..091b1260d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/editor/EditorPropTypes.ts
@@ -0,0 +1,123 @@
+import * as PropTypes from "prop-types";
+import { IEvents } from "./Events";
+import { IProps } from "./rte";
+
+export type CopyProps<T> = { [P in keyof T]: PropTypes.Requireable<unknown> };
+
+export type IEventPropTypes = CopyProps<IEvents>;
+
+export interface IEditorPropTypes extends IEventPropTypes, CopyProps<IProps> {}
+
+export const eventPropTypes: IEventPropTypes = {
+  onActivate: PropTypes.func,
+  onAddUndo: PropTypes.func,
+  onBeforeAddUndo: PropTypes.func,
+  onBeforeExecCommand: PropTypes.func,
+  onBeforeGetContent: PropTypes.func,
+  onBeforeRenderUI: PropTypes.func,
+  onBeforeSetContent: PropTypes.func,
+  onBeforePaste: PropTypes.func,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  onClearUndos: PropTypes.func,
+  onClick: PropTypes.func,
+  onContextMenu: PropTypes.func,
+  onCommentChange: PropTypes.func,
+  onCompositionEnd: PropTypes.func,
+  onCompositionStart: PropTypes.func,
+  onCompositionUpdate: PropTypes.func,
+  onCopy: PropTypes.func,
+  onCut: PropTypes.func,
+  onDblclick: PropTypes.func,
+  onDeactivate: PropTypes.func,
+  onDirty: PropTypes.func,
+  onDrag: PropTypes.func,
+  onDragDrop: PropTypes.func,
+  onDragEnd: PropTypes.func,
+  onDragGesture: PropTypes.func,
+  onDragOver: PropTypes.func,
+  onDrop: PropTypes.func,
+  onExecCommand: PropTypes.func,
+  onFocus: PropTypes.func,
+  onFocusIn: PropTypes.func,
+  onFocusOut: PropTypes.func,
+  onGetContent: PropTypes.func,
+  onHide: PropTypes.func,
+  onInit: PropTypes.func,
+  onInput: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onKeyPress: PropTypes.func,
+  onKeyUp: PropTypes.func,
+  onLoadContent: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  onMouseLeave: PropTypes.func,
+  onMouseMove: PropTypes.func,
+  onMouseOut: PropTypes.func,
+  onMouseOver: PropTypes.func,
+  onMouseUp: PropTypes.func,
+  onNodeChange: PropTypes.func,
+  onObjectResizeStart: PropTypes.func,
+  onObjectResized: PropTypes.func,
+  onObjectSelected: PropTypes.func,
+  onPaste: PropTypes.func,
+  onPostProcess: PropTypes.func,
+  onPostRender: PropTypes.func,
+  onPreProcess: PropTypes.func,
+  onProgressState: PropTypes.func,
+  onRedo: PropTypes.func,
+  onRemove: PropTypes.func,
+  onReset: PropTypes.func,
+  onSaveContent: PropTypes.func,
+  onSelectionChange: PropTypes.func,
+  onSetAttrib: PropTypes.func,
+  onSetContent: PropTypes.func,
+  onShow: PropTypes.func,
+  onSubmit: PropTypes.func,
+  onUndo: PropTypes.func,
+  onVisualAid: PropTypes.func,
+  onSkinLoadError: PropTypes.func,
+  onThemeLoadError: PropTypes.func,
+  onModelLoadError: PropTypes.func,
+  onPluginLoadError: PropTypes.func,
+  onIconsLoadError: PropTypes.func,
+  onLanguageLoadError: PropTypes.func,
+  onScriptsLoad: PropTypes.func,
+  onScriptsLoadError: PropTypes.func,
+};
+
+export const EditorPropTypes: IEditorPropTypes = {
+  apiKey: PropTypes.string,
+  licenseKey: PropTypes.string,
+  id: PropTypes.string,
+  inline: PropTypes.bool,
+  init: PropTypes.object,
+  initialValue: PropTypes.string,
+  onEditorChange: PropTypes.func,
+  value: PropTypes.string,
+  tagName: PropTypes.string,
+  tabIndex: PropTypes.number,
+  cloudChannel: PropTypes.string,
+  plugins: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  toolbar: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  disabled: PropTypes.bool,
+  textareaName: PropTypes.string,
+  tinymceScriptSrc: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+    PropTypes.arrayOf(
+      PropTypes.shape({
+        src: PropTypes.string,
+        async: PropTypes.bool,
+        defer: PropTypes.bool,
+      })
+    ),
+  ]),
+  rollback: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf([false])]),
+  scriptLoading: PropTypes.shape({
+    async: PropTypes.bool,
+    defer: PropTypes.bool,
+    delay: PropTypes.number,
+  }),
+  ...eventPropTypes,
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/editor/Events.ts b/apps/edr-freight-web/backoffice/src/record-management/common/editor/Events.ts
new file mode 100644
index 000000000..9501ca49b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/editor/Events.ts
@@ -0,0 +1,93 @@
+import type { Editor as TinyMCEEditor, EditorEvent, Events } from "tinymce";
+
+export type EventHandler<A> = (
+  a: EditorEvent<A>,
+  editor: TinyMCEEditor
+) => unknown;
+
+type EEventHandler<K extends keyof Events.EditorEventMap> = EventHandler<
+  Events.EditorEventMap[K]
+>;
+
+export interface INativeEvents {
+  onBeforePaste: EEventHandler<"beforepaste">;
+  onBlur: EEventHandler<"blur">;
+  onClick: EEventHandler<"click">;
+  onCompositionEnd: EEventHandler<"compositionend">;
+  onCompositionStart: EEventHandler<"compositionstart">;
+  onCompositionUpdate: EEventHandler<"compositionupdate">;
+  onContextMenu: EEventHandler<"contextmenu">;
+  onCopy: EEventHandler<"copy">;
+  onCut: EEventHandler<"cut">;
+  onDblclick: EEventHandler<"dblclick">;
+  onDrag: EEventHandler<"drag">;
+  onDragDrop: EEventHandler<"dragdrop">;
+  onDragEnd: EEventHandler<"dragend">;
+  onDragGesture: EEventHandler<"draggesture">;
+  onDragOver: EEventHandler<"dragover">;
+  onDrop: EEventHandler<"drop">;
+  onFocus: EEventHandler<"focus">;
+  onFocusIn: EEventHandler<"focusin">;
+  onFocusOut: EEventHandler<"focusout">;
+  onInput: EEventHandler<"input">;
+  onKeyDown: EEventHandler<"keydown">;
+  onKeyPress: EEventHandler<"keypress">;
+  onKeyUp: EEventHandler<"keyup">;
+  onMouseDown: EEventHandler<"mousedown">;
+  onMouseEnter: EEventHandler<"mouseenter">;
+  onMouseLeave: EEventHandler<"mouseleave">;
+  onMouseMove: EEventHandler<"mousemove">;
+  onMouseOut: EEventHandler<"mouseout">;
+  onMouseOver: EEventHandler<"mouseover">;
+  onMouseUp: EEventHandler<"mouseup">;
+  onPaste: EEventHandler<"paste">;
+  onSelectionChange: EEventHandler<"selectionchange">;
+}
+
+export interface ITinyEvents {
+  onActivate: EEventHandler<"activate">;
+  onAddUndo: EEventHandler<"AddUndo">;
+  onBeforeAddUndo: EEventHandler<"BeforeAddUndo">;
+  onBeforeExecCommand: EEventHandler<"BeforeExecCommand">;
+  onBeforeGetContent: EEventHandler<"BeforeGetContent">;
+  onBeforeRenderUI: EventHandler<unknown>;
+  onBeforeSetContent: EEventHandler<"BeforeSetContent">;
+  onChange: EventHandler<unknown>;
+  onClearUndos: EEventHandler<"ClearUndos">;
+  onCommentChange: EventHandler<unknown>;
+  onDeactivate: EEventHandler<"deactivate">;
+  onDirty: EventHandler<unknown>;
+  onExecCommand: EEventHandler<"ExecCommand">;
+  onGetContent: EEventHandler<"GetContent">;
+  onHide: EventHandler<unknown>;
+  onInit: EEventHandler<"init">;
+  onLoadContent: EEventHandler<"LoadContent">;
+  onNodeChange: EEventHandler<"NodeChange">;
+  onPostProcess: EventHandler<unknown>;
+  onPostRender: EEventHandler<"PostRender">;
+  onPreProcess: EventHandler<unknown>;
+  onProgressState: EEventHandler<"ProgressState">;
+  onRedo: EEventHandler<"Redo">;
+  onRemove: EEventHandler<"remove">;
+  onReset: EventHandler<unknown>;
+  onSaveContent: EventHandler<unknown>;
+  onSetAttrib: EventHandler<unknown>;
+  onObjectResizeStart: EEventHandler<"ObjectResizeStart">;
+  onObjectResized: EEventHandler<"ObjectResized">;
+  onObjectSelected: EEventHandler<"ObjectSelected">;
+  onSetContent: EEventHandler<"SetContent">;
+  onShow: EventHandler<unknown>;
+  onSubmit: EventHandler<unknown>;
+  onUndo: EEventHandler<"Undo">;
+  onVisualAid: EventHandler<unknown>;
+  onSkinLoadError: EEventHandler<"SkinLoadError">;
+  onThemeLoadError: EEventHandler<"ThemeLoadError">;
+  onModelLoadError: EEventHandler<"ModelLoadError">;
+  onPluginLoadError: EEventHandler<"PluginLoadError">;
+  onIconsLoadError: EEventHandler<"IconsLoadError">;
+  onLanguageLoadError: EEventHandler<"LanguageLoadError">;
+  onScriptsLoad: () => void;
+  onScriptsLoadError: (err: unknown) => void;
+}
+
+export interface IEvents extends INativeEvents, ITinyEvents {}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/editor/ScriptLoader2.ts b/apps/edr-freight-web/backoffice/src/record-management/common/editor/ScriptLoader2.ts
new file mode 100644
index 000000000..083a44478
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/editor/ScriptLoader2.ts
@@ -0,0 +1,177 @@
+import { uuid } from "./Utils";
+
+export type CallbackFn = () => void;
+
+export interface ScriptItem {
+  src: string;
+  async?: boolean;
+  defer?: boolean;
+}
+
+interface Id {
+  id: string;
+}
+
+const injectScriptTag = (
+  doc: Document,
+  item: ScriptItem & Id,
+  handler: (id: string, err?: unknown) => void
+) => {
+  const scriptTag = doc.createElement("script");
+  scriptTag.referrerPolicy = "origin";
+  scriptTag.type = "application/javascript";
+  scriptTag.id = item.id;
+  scriptTag.src = item.src;
+  scriptTag.async = item.async ?? false;
+  scriptTag.defer = item.defer ?? false;
+
+  const loadHandler = () => {
+    scriptTag.removeEventListener("load", loadHandler);
+    scriptTag.removeEventListener("error", errorHandler);
+    handler(item.src);
+  };
+  const errorHandler = (err: unknown) => {
+    scriptTag.removeEventListener("load", loadHandler);
+    scriptTag.removeEventListener("error", errorHandler);
+    handler(item.src, err);
+  };
+
+  scriptTag.addEventListener("load", loadHandler);
+  scriptTag.addEventListener("error", errorHandler);
+
+  if (doc.head) {
+    doc.head.appendChild(scriptTag);
+  }
+};
+
+interface ScriptState {
+  id: string;
+  src: string;
+  done: boolean;
+  error?: unknown;
+  handlers: ((src: string, err?: unknown) => void)[];
+}
+
+const createDocumentScriptLoader = (doc: Document) => {
+  let lookup: Record<string, ScriptState> = {};
+
+  const scriptLoadOrErrorHandler = (src: string, err?: unknown) => {
+    const item = lookup[src];
+    item.done = true;
+    item.error = err;
+    for (const h of item.handlers) {
+      h(src, err);
+    }
+    item.handlers = [];
+  };
+
+  const loadScripts = (
+    items: ScriptItem[],
+    success: () => void,
+    failure?: (err: unknown) => void
+  ) => {
+    // eslint-disable-next-line no-console
+    const failureOrLog = (err: unknown) =>
+      failure !== undefined ? failure(err) : console.error(err);
+    if (items.length === 0) {
+      failureOrLog(new Error("At least one script must be provided"));
+      return;
+    }
+    let successCount = 0;
+    let failed = false;
+    const loaded = (_src: string, err?: unknown) => {
+      if (failed) {
+        return;
+      }
+      if (err) {
+        failed = true;
+        failureOrLog(err);
+      } else if (++successCount === items.length) {
+        success();
+      }
+    };
+    for (const item of items) {
+      const existing = lookup[item.src];
+      if (existing) {
+        if (existing.done) {
+          loaded(item.src, existing.error);
+        } else {
+          existing.handlers.push(loaded);
+        }
+      } else {
+        // create a new entry
+        const id = uuid("tiny-");
+        lookup[item.src] = {
+          id,
+          src: item.src,
+          done: false,
+          error: null,
+          handlers: [loaded],
+        };
+        injectScriptTag(doc, { id, ...item }, scriptLoadOrErrorHandler);
+      }
+    }
+  };
+
+  const deleteScripts = () => {
+    for (const item of Object.values(lookup)) {
+      const scriptTag = doc.getElementById(item.id);
+      if (scriptTag != null && scriptTag.tagName === "SCRIPT") {
+        scriptTag.parentNode?.removeChild(scriptTag);
+      }
+    }
+    lookup = {};
+  };
+
+  const getDocument = () => doc;
+
+  return {
+    loadScripts,
+    deleteScripts,
+    getDocument,
+  };
+};
+
+type DocumentScriptLoader = ReturnType<typeof createDocumentScriptLoader>;
+
+const createScriptLoader = () => {
+  const cache: DocumentScriptLoader[] = [];
+
+  const getDocumentScriptLoader = (doc: Document) => {
+    let loader = cache.find((l) => l.getDocument() === doc);
+    if (loader === undefined) {
+      loader = createDocumentScriptLoader(doc);
+      cache.push(loader);
+    }
+    return loader;
+  };
+
+  const loadList = (
+    doc: Document,
+    items: ScriptItem[],
+    delay: number,
+    success: () => void,
+    failure?: (err: unknown) => void
+  ) => {
+    const doLoad = () =>
+      getDocumentScriptLoader(doc).loadScripts(items, success, failure);
+    if (delay > 0) {
+      setTimeout(doLoad, delay);
+    } else {
+      doLoad();
+    }
+  };
+
+  const reinitialize = () => {
+    for (let loader = cache.pop(); loader != null; loader = cache.pop()) {
+      loader.deleteScripts();
+    }
+  };
+
+  return {
+    loadList,
+    reinitialize,
+  };
+};
+
+export const ScriptLoader = createScriptLoader();
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/editor/TinyMCE.ts b/apps/edr-freight-web/backoffice/src/record-management/common/editor/TinyMCE.ts
new file mode 100644
index 000000000..69cc7dfd2
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/editor/TinyMCE.ts
@@ -0,0 +1,9 @@
+import type { TinyMCE as TinyMCEGlobal } from "tinymce";
+
+const getTinymce = (view: Window): TinyMCEGlobal | null => {
+  const global = view as any;
+
+  return global && global.tinymce ? global.tinymce : null;
+};
+
+export { getTinymce };
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/editor/Utils.ts b/apps/edr-freight-web/backoffice/src/record-management/common/editor/Utils.ts
new file mode 100644
index 000000000..8c8c837f6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/editor/Utils.ts
@@ -0,0 +1,160 @@
+import type { Editor as TinyMCEEditor, EditorEvent } from "tinymce";
+import { eventPropTypes, IEventPropTypes } from "./EditorPropTypes";
+import { IAllProps } from "./rte";
+
+export const isFunction = (x: unknown): x is (...args: any[]) => unknown =>
+  typeof x === "function";
+
+const isEventProp = (name: string): name is keyof IEventPropTypes =>
+  name in eventPropTypes;
+
+const eventAttrToEventName = <T extends string>(attrName: `on${T}`): T =>
+  attrName.substr(2) as T;
+
+type PropLookup = <K extends keyof IAllProps>(
+  key: K
+) => IAllProps[K] | undefined;
+
+export const configHandlers2 = <H>(
+  handlerLookup: PropLookup,
+  on: (name: string, handler: H) => void,
+  off: (name: string, handler: H) => void,
+  adapter: <K extends keyof IEventPropTypes>(lookup: PropLookup, key: K) => H,
+  prevProps: Partial<IAllProps>,
+  props: Partial<IAllProps>,
+  boundHandlers: Record<string, H>
+): void => {
+  const prevEventKeys = Object.keys(prevProps).filter(isEventProp);
+  const currEventKeys = Object.keys(props).filter(isEventProp);
+
+  const removedKeys = prevEventKeys.filter(
+    (key: keyof IAllProps) => props[key] === undefined
+  );
+  const addedKeys = currEventKeys.filter(
+    (key: keyof IAllProps) => prevProps[key] === undefined
+  );
+
+  removedKeys.forEach((key: any) => {
+    // remove event handler
+    const eventName = eventAttrToEventName(key);
+    const wrappedHandler = boundHandlers[eventName];
+    off(eventName, wrappedHandler);
+    delete boundHandlers[eventName];
+  });
+
+  addedKeys.forEach((key: any) => {
+    const wrappedHandler = adapter(handlerLookup, key);
+    const eventName = eventAttrToEventName(key);
+    boundHandlers[eventName] = wrappedHandler;
+    on(eventName, wrappedHandler);
+  });
+};
+
+export const configHandlers = (
+  editor: TinyMCEEditor,
+  prevProps: Partial<IAllProps>,
+  props: Partial<IAllProps>,
+  boundHandlers: Record<string, (event: EditorEvent<any>) => unknown>,
+  lookup: PropLookup
+): void =>
+  configHandlers2(
+    lookup,
+    editor.on.bind(editor),
+    editor.off.bind(editor),
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    (handlerLookup, key) => (e) => handlerLookup(key)?.(e, editor),
+    prevProps,
+    props,
+    boundHandlers
+  );
+
+let unique = 0;
+
+export const uuid = (prefix: string): string => {
+  const time = Date.now();
+  const random = Math.floor(Math.random() * 1000000000);
+
+  unique++;
+
+  return prefix + "_" + random + unique + String(time);
+};
+
+export const isTextareaOrInput = (
+  element: Element | null
+): element is HTMLTextAreaElement | HTMLInputElement =>
+  element !== null &&
+  (element.tagName.toLowerCase() === "textarea" ||
+    element.tagName.toLowerCase() === "input");
+
+const normalizePluginArray = (plugins?: string | string[]): string[] => {
+  if (typeof plugins === "undefined" || plugins === "") {
+    return [];
+  }
+
+  return Array.isArray(plugins) ? plugins : plugins.split(" ");
+};
+
+// eslint-disable-next-line max-len
+export const mergePlugins = (
+  initPlugins: string | string[] | undefined,
+  inputPlugins: string | string[] | undefined
+): string[] =>
+  normalizePluginArray(initPlugins).concat(normalizePluginArray(inputPlugins));
+
+export const isBeforeInputEventAvailable = () =>
+  window.InputEvent &&
+  typeof (InputEvent.prototype as any).getTargetRanges === "function";
+
+export const isInDoc = (elem: Node) => {
+  if (!("isConnected" in Node.prototype)) {
+    // Fallback for IE and old Edge
+    let current = elem;
+    let parent = elem.parentNode;
+    while (parent != null) {
+      current = parent;
+      parent = current.parentNode;
+    }
+    return current === elem.ownerDocument;
+  }
+
+  return elem.isConnected;
+};
+
+export const setMode = (
+  editor: TinyMCEEditor | undefined,
+  mode: "readonly" | "design"
+) => {
+  if (editor !== undefined) {
+    if (
+      editor.mode != null &&
+      typeof editor.mode === "object" &&
+      typeof editor.mode.set === "function"
+    ) {
+      editor.mode.set(mode);
+    } else {
+      // support TinyMCE 4
+      (editor as any).setMode(mode);
+    }
+  }
+};
+
+
+ export const isValidEthiopianPhone = (phone: string): boolean => {
+   const normalized = phone.replace(/\s+/g, "");
+   return (
+     /^(\+2519\d{8}|09\d{8})$/.test(normalized) ||
+     /^(\+2517\d{8}|07\d{8})$/.test(normalized)
+   );
+ };
+ export const isValidEthiopianPhoneNum = (phone: string): boolean => {
+   const normalized = phone.replace(/\s+/g, "");
+   return (
+     /^(\+2519\d{8}|09\d{8})$/.test(normalized) ||
+     /^(\+2517\d{8}|07\d{8})$/.test(normalized) 
+   );
+ };
+ 
+ export const isValidEmail = (email: string) => {
+   const emailRegex = /^[^\s@]+@[^\s@]+\.[a-zA-Z]{2,}$/;
+   return emailRegex.test(email);
+ };
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/editor/rte.tsx b/apps/edr-freight-web/backoffice/src/record-management/common/editor/rte.tsx
new file mode 100644
index 000000000..c9ca0d432
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/editor/rte.tsx
@@ -0,0 +1,574 @@
+import * as React from "react";
+
+import {
+  isFunction,
+  isTextareaOrInput,
+  mergePlugins,
+  uuid,
+  configHandlers,
+  isBeforeInputEventAvailable,
+  isInDoc,
+  setMode,
+} from "./Utils";
+import { EditorPropTypes, IEditorPropTypes } from "./EditorPropTypes";
+import type {
+  Bookmark,
+  Editor as TinyMCEEditor,
+  EditorEvent,
+  TinyMCE,
+} from "tinymce";
+import { IEvents } from "./Events";
+import { ScriptItem, ScriptLoader } from "./ScriptLoader2";
+import { getTinymce } from "./TinyMCE";
+
+type OmitStringIndexSignature<T> = {
+  [K in keyof T as string extends K ? never : K]: T[K];
+};
+
+interface DoNotUse<T extends string> {
+  __brand: T;
+}
+
+type OmittedInitProps = "selector" | "target" | "readonly" | "license_key";
+
+type EditorOptions = Parameters<TinyMCE["init"]>[0];
+
+export type InitOptions = Omit<
+  OmitStringIndexSignature<EditorOptions>,
+  OmittedInitProps
+> & {
+  selector?: DoNotUse<"selector prop is handled internally by the component">;
+  target?: DoNotUse<"target prop is handled internally by the component">;
+  readonly?: DoNotUse<"readonly prop is overridden by the component, use the `disabled` prop instead">;
+  license_key?: DoNotUse<"license_key prop is overridden by the integration, use the `licenseKey` prop instead">;
+} & { [key: string]: unknown };
+
+export type Version = `${"4" | "5" | "6" | "7"}${
+  | ""
+  | "-dev"
+  | "-testing"
+  | `.${number}`
+  | `.${number}.${number}`}`;
+
+export interface IProps {
+  /**
+   * @see {@link https://www.tiny.cloud/docs/tinymce/7/react-ref/#apikey React Tech Ref - apiKey}
+   * @description TinyMCE API key for deployments using Tiny Cloud.
+   */
+  apiKey: string;
+  /**
+   * @see {@link https://www.tiny.cloud/docs/tinymce/7/react-ref/#id React Tech Ref - id}
+   * @description The ID of the element to render the editor into.
+   */
+  id: string;
+  /**
+   * @see {@link https://www.tiny.cloud/docs/tinymce/7/react-ref/#inline React Tech Ref - inline}
+   * @description Whether the editor should be rendered inline. Equivalent to the `inline` option in TinyMCE.
+   */
+  inline: boolean;
+  /**
+   * @see {@link https://www.tiny.cloud/docs/tinymce/7/react-ref/#initialvalue React Tech Ref - initialValue}
+   * @description The initial HTML content of the editor.
+   *
+   * IMPORTANT: Ensure that this is **not** updated by `onEditorChange` or the editor will be unusable.
+   */
+  initialValue: string;
+  /**
+   * @see {@link https://www.tiny.cloud/docs/tinymce/7/react-ref/#oneditorchange React Tech Ref - onEditorChange}
+   * @description Used to store the state of the editor outside the component. Typically used for controlled components.
+   * @param a The current HTML content of the editor.
+   * @param editor The TinyMCE editor instance.
+   * @returns void
+   */
+  onEditorChange: (a: string, editor: TinyMCEEditor) => void;
+  /**
+   * @see {@link https://www.tiny.cloud/docs/tinymce/7/react-ref/#value React Tech Ref - value}
+   * @description The current HTML content of the editor. Typically used for controlled components.
+   */
+  value: string;
+  /**
+   * @see {@link https://www.tiny.cloud/docs/tinymce/7/react-ref/#init React Tech Ref - init}
+   * @description Additional settings passed to `tinymce.init()` when initializing the editor.
+   */
+  init: InitOptions;
+  /**
+   * @see {@link https://www.tiny.cloud/docs/tinymce/7/react-ref/#tagname React Tech Ref - tagName}
+   * @description The tag name of the element to render the editor into. Only valid when `inline` is `true`.
+   */
+  tagName: string;
+  /**
+   * @see {@link https://www.tiny.cloud/docs/tinymce/7/react-ref/#tabIndex React Tech Ref - tabIndex}
+   * @description The tab index of the element that the editor wraps.
+   */
+  tabIndex: number;
+  /**
+   * @see {@link https://www.tiny.cloud/docs/tinymce/7/react-ref/#cloudchannel React Tech Ref - cloudChannel}
+   * @description The TinyMCE build to use when loading from Tiny Cloud.
+   */
+  cloudChannel: Version;
+  /**
+   * @see {@link https://www.tiny.cloud/docs/tinymce/7/react-ref/#plugins React Tech Ref - plugins}
+   * @description The plugins to load into the editor. Equivalent to the `plugins` option in TinyMCE.
+   */
+  plugins: NonNullable<EditorOptions["plugins"]>;
+  /**
+   * @see {@link https://www.tiny.cloud/docs/tinymce/7/react-ref/#toolbar React Tech Ref - toolbar}
+   * @description The toolbar to load into the editor. Equivalent to the `toolbar` option in TinyMCE.
+   */
+  toolbar: NonNullable<EditorOptions["toolbar"]>;
+  /**
+   * @see {@link https://www.tiny.cloud/docs/tinymce/7/react-ref/#disabled React Tech Ref - disabled}
+   * @description Whether the editor should be "disabled" (read-only).
+   */
+  disabled: boolean;
+  /**
+   * @see {@link https://www.tiny.cloud/docs/tinymce/7/react-ref/#textareaname React Tech Ref - textareaName}
+   * @description Set the `name` attribute of the `textarea` element used for the editor in forms. Only valid in iframe mode.
+   */
+  textareaName: string;
+  /**
+   * @see {@link https://www.tiny.cloud/docs/tinymce/7/react-ref/#tinymcescriptsrc React Tech Ref - tinymceScriptSrc}
+   * @description The URL of the TinyMCE script to lazy load.
+   */
+  tinymceScriptSrc: string | string[] | ScriptItem[];
+  /**
+   * @see {@link https://www.tiny.cloud/docs/tinymce/7/react-ref/#rollback React Tech Ref - rollback}
+   * @description The number of milliseconds to wait before reverting to the previous value when the editor's content changes.
+   */
+  rollback: number | false;
+  /**
+   * @see {@link https://www.tiny.cloud/docs/tinymce/7/react-ref/#scriptloading React Tech Ref - scriptLoading}
+   * @description Options for how the TinyMCE script should be loaded.
+   * @property async Whether the script should be loaded with the `async` attribute.
+   * @property defer Whether the script should be loaded with the `defer` attribute.
+   * @property delay The number of milliseconds to wait before loading the script.
+   */
+  scriptLoading: {
+    async?: boolean;
+    defer?: boolean;
+    delay?: number;
+  };
+  /**
+   * @see {@link https://www.tiny.cloud/docs/tinymce/7/react-ref/#licenseKey React Tech Ref - licenseKey}
+   * @description Tiny Cloud License Key for when self-hosting TinyMCE.
+   */
+  licenseKey: string;
+}
+
+export interface IAllProps extends Partial<IProps>, Partial<IEvents> {}
+
+/**
+ * @see {@link https://www.tiny.cloud/docs/tinymce/7/react-ref/ TinyMCE React Technical Reference}
+ */
+export class Editor extends React.Component<IAllProps> {
+  public static propTypes: IEditorPropTypes = EditorPropTypes;
+
+  public static defaultProps: Partial<IAllProps> = {
+    cloudChannel: "7",
+  };
+
+  public editor?: TinyMCEEditor;
+
+  private id: string;
+  private elementRef: React.RefObject<HTMLElement>;
+  private inline: boolean;
+  private currentContent?: string;
+  private boundHandlers: Record<
+    string,
+    (event: EditorEvent<unknown>) => unknown
+  >;
+  private rollbackTimer: number | undefined = undefined;
+  private valueCursor: Bookmark | undefined = undefined;
+
+  public constructor(props: Partial<IAllProps>) {
+    super(props);
+    this.id = this.props.id || uuid("tiny-react");
+    this.elementRef =
+      React.createRef<HTMLElement>() as React.RefObject<HTMLElement>;
+    this.inline = this.props.inline ?? this.props.init?.inline ?? false;
+    this.boundHandlers = {};
+  }
+
+  private get view() {
+    return this.elementRef.current?.ownerDocument.defaultView ?? window;
+  }
+
+  public componentDidUpdate(prevProps: Partial<IAllProps>) {
+    if (this.rollbackTimer) {
+      clearTimeout(this.rollbackTimer);
+      this.rollbackTimer = undefined;
+    }
+    if (this.editor) {
+      this.bindHandlers(prevProps);
+      if (this.editor.initialized) {
+        this.currentContent = this.currentContent ?? this.editor.getContent();
+        if (
+          typeof this.props.initialValue === "string" &&
+          this.props.initialValue !== prevProps.initialValue
+        ) {
+          // same as resetContent in TinyMCE 5
+          this.editor.setContent(this.props.initialValue);
+          this.editor.undoManager.clear();
+          this.editor.undoManager.add();
+          this.editor.setDirty(false);
+        } else if (
+          typeof this.props.value === "string" &&
+          this.props.value !== this.currentContent
+        ) {
+          const localEditor = this.editor;
+          localEditor.undoManager.transact(() => {
+            // inline editors grab focus when restoring selection
+            // so we don't try to keep their selection unless they are currently focused
+            let cursor: Bookmark | undefined;
+            if (!this.inline || localEditor.hasFocus()) {
+              try {
+                // getBookmark throws exceptions when the editor has not been focused
+                // possibly only in inline mode but I'm not taking chances
+                cursor = localEditor.selection.getBookmark(3);
+              } catch (e) {
+                /* ignore */
+              }
+            }
+            const valueCursor = this.valueCursor;
+            localEditor.setContent(this.props.value as string);
+            if (!this.inline || localEditor.hasFocus()) {
+              for (const bookmark of [cursor, valueCursor]) {
+                if (bookmark) {
+                  try {
+                    localEditor.selection.moveToBookmark(bookmark);
+                    this.valueCursor = bookmark;
+                    break;
+                  } catch (e) {
+                    /* ignore */
+                  }
+                }
+              }
+            }
+          });
+        }
+        if (this.props.disabled !== prevProps.disabled) {
+          const disabled = this.props.disabled ?? false;
+          setMode(this.editor, disabled ? "readonly" : "design");
+        }
+      }
+    }
+  }
+
+  public componentDidMount() {
+    if (getTinymce(this.view) !== null) {
+      this.initialise();
+    } else if (
+      Array.isArray(this.props.tinymceScriptSrc) &&
+      this.props.tinymceScriptSrc.length === 0
+    ) {
+      this.props.onScriptsLoadError?.(
+        new Error(
+          "No `tinymce` global is present but the `tinymceScriptSrc` prop was an empty array."
+        )
+      );
+    } else if (this.elementRef.current?.ownerDocument) {
+      const successHandler = () => {
+        this.props.onScriptsLoad?.();
+        this.initialise();
+      };
+      const errorHandler = (err: unknown) => {
+        this.props.onScriptsLoadError?.(err);
+      };
+      ScriptLoader.loadList(
+        this.elementRef.current.ownerDocument,
+        this.getScriptSources(),
+        this.props.scriptLoading?.delay ?? 0,
+        successHandler,
+        errorHandler
+      );
+    }
+  }
+
+  public componentWillUnmount() {
+    const editor = this.editor;
+    if (editor) {
+      editor.off(this.changeEvents(), this.handleEditorChange);
+      editor.off(this.beforeInputEvent(), this.handleBeforeInput);
+      editor.off("keypress", this.handleEditorChangeSpecial);
+      editor.off("keydown", this.handleBeforeInputSpecial);
+      editor.off("NewBlock", this.handleEditorChange);
+      Object.keys(this.boundHandlers).forEach((eventName) => {
+        editor.off(eventName, this.boundHandlers[eventName]);
+      });
+      this.boundHandlers = {};
+      editor.remove();
+      this.editor = undefined;
+    }
+  }
+
+  public render() {
+    return this.inline ? this.renderInline() : this.renderIframe();
+  }
+
+  private changeEvents() {
+    const isIE = getTinymce(this.view)?.Env?.browser?.isIE();
+    return isIE
+      ? "change keyup compositionend setcontent CommentChange"
+      : "change input compositionend setcontent CommentChange";
+  }
+
+  private beforeInputEvent() {
+    return isBeforeInputEventAvailable()
+      ? "beforeinput SelectionChange"
+      : "SelectionChange";
+  }
+
+  private renderInline() {
+    const { tagName = "div" } = this.props;
+
+    return React.createElement(tagName, {
+      ref: this.elementRef,
+      id: this.id,
+      tabIndex: this.props.tabIndex,
+    });
+  }
+
+  private renderIframe() {
+    return React.createElement("textarea", {
+      ref: this.elementRef,
+      style: { visibility: "hidden" },
+      name: this.props.textareaName,
+      id: this.id,
+      tabIndex: this.props.tabIndex,
+    });
+  }
+
+  private getScriptSources(): ScriptItem[] {
+    const async = this.props.scriptLoading?.async;
+    const defer = this.props.scriptLoading?.defer;
+    if (this.props.tinymceScriptSrc !== undefined) {
+      if (typeof this.props.tinymceScriptSrc === "string") {
+        return [{ src: this.props.tinymceScriptSrc, async, defer }];
+      }
+      // multiple scripts can be specified which allows for hybrid mode
+      return this.props.tinymceScriptSrc.map((item) => {
+        if (typeof item === "string") {
+          // async does not make sense for multiple items unless
+          // they are not dependent (which will be unlikely)
+          return { src: item, async, defer };
+        } else {
+          return item;
+        }
+      });
+    }
+    // Use self-hosted TinyMCE instead of CDN to avoid slow external requests
+    return [{ src: "/tinymce/tinymce.min.js", async, defer }];
+  }
+
+  private getInitialValue() {
+    if (typeof this.props.initialValue === "string") {
+      return this.props.initialValue;
+    } else if (typeof this.props.value === "string") {
+      return this.props.value;
+    } else {
+      return "";
+    }
+  }
+
+  private bindHandlers(prevProps: Partial<IAllProps>) {
+    if (this.editor !== undefined) {
+      // typescript chokes trying to understand the type of the lookup function
+      configHandlers(
+        this.editor,
+        prevProps,
+        this.props,
+        this.boundHandlers,
+        (key: keyof IAllProps) => this.props[key] as any
+      );
+
+      // check if we should monitor editor changes
+      const isValueControlled = (p: Partial<IAllProps>) =>
+        p.onEditorChange !== undefined || p.value !== undefined;
+      const wasControlled = isValueControlled(prevProps);
+      const nowControlled = isValueControlled(this.props);
+      if (!wasControlled && nowControlled) {
+        this.editor.on(this.changeEvents(), this.handleEditorChange);
+        this.editor.on(this.beforeInputEvent(), this.handleBeforeInput);
+        this.editor.on("keydown", this.handleBeforeInputSpecial);
+        this.editor.on("keyup", this.handleEditorChangeSpecial);
+        this.editor.on("NewBlock", this.handleEditorChange);
+      } else if (wasControlled && !nowControlled) {
+        this.editor.off(this.changeEvents(), this.handleEditorChange);
+        this.editor.off(this.beforeInputEvent(), this.handleBeforeInput);
+        this.editor.off("keydown", this.handleBeforeInputSpecial);
+        this.editor.off("keyup", this.handleEditorChangeSpecial);
+        this.editor.off("NewBlock", this.handleEditorChange);
+      }
+    }
+  }
+
+  private rollbackChange = () => {
+    const editor = this.editor;
+    const value = this.props.value;
+    if (editor && value && value !== this.currentContent) {
+      editor.undoManager.ignore(() => {
+        editor.setContent(value);
+        // only restore cursor on inline editors when they are focused
+        // as otherwise it will cause a focus grab
+        if (this.valueCursor && (!this.inline || editor.hasFocus())) {
+          try {
+            editor.selection.moveToBookmark(this.valueCursor);
+          } catch (e) {
+            /* ignore */
+          }
+        }
+      });
+    }
+    this.rollbackTimer = undefined;
+  };
+
+  private handleBeforeInput = (_evt: EditorEvent<unknown>) => {
+    if (
+      this.props.value !== undefined &&
+      this.props.value === this.currentContent &&
+      this.editor
+    ) {
+      if (!this.inline || this.editor.hasFocus()) {
+        try {
+          // getBookmark throws exceptions when the editor has not been focused
+          // possibly only in inline mode but I'm not taking chances
+          this.valueCursor = this.editor.selection.getBookmark(3);
+        } catch (e) {
+          /* ignore */
+        }
+      }
+    }
+  };
+
+  private handleBeforeInputSpecial = (evt: EditorEvent<KeyboardEvent>) => {
+    if (
+      evt.key === "Enter" ||
+      evt.key === "Backspace" ||
+      evt.key === "Delete"
+    ) {
+      this.handleBeforeInput(evt);
+    }
+  };
+
+  private handleEditorChange = (_evt: EditorEvent<unknown>) => {
+    const editor = this.editor;
+    if (editor && editor.initialized) {
+      const newContent = editor.getContent();
+      if (
+        this.props.value !== undefined &&
+        this.props.value !== newContent &&
+        this.props.rollback !== false
+      ) {
+        // start a timer and revert to the value if not applied in time
+        if (!this.rollbackTimer) {
+          this.rollbackTimer = window.setTimeout(
+            this.rollbackChange,
+            typeof this.props.rollback === "number" ? this.props.rollback : 200
+          );
+        }
+      }
+
+      if (newContent !== this.currentContent) {
+        this.currentContent = newContent;
+        if (isFunction(this.props.onEditorChange)) {
+          this.props.onEditorChange(newContent, editor);
+        }
+      }
+    }
+  };
+
+  private handleEditorChangeSpecial = (evt: EditorEvent<KeyboardEvent>) => {
+    if (evt.key === "Backspace" || evt.key === "Delete") {
+      this.handleEditorChange(evt);
+    }
+  };
+
+  private initialise = (attempts = 0) => {
+    const target = this.elementRef.current;
+    if (!target) {
+      return; // Editor has been unmounted
+    }
+    if (!isInDoc(target)) {
+      // this is probably someone trying to help by rendering us offscreen
+      // but we can't do that because the editor iframe must be in the document
+      // in order to have state
+      if (attempts === 0) {
+        // we probably just need to wait for the current events to be processed
+        setTimeout(() => this.initialise(1), 1);
+      } else if (attempts < 100) {
+        // wait for ten seconds, polling every tenth of a second
+        setTimeout(() => this.initialise(attempts + 1), 100);
+      } else {
+        // give up, at this point it seems that more polling is unlikely to help
+        throw new Error("tinymce can only be initialised when in a document");
+      }
+      return;
+    }
+
+    const tinymce = getTinymce(this.view);
+    if (!tinymce) {
+      throw new Error("tinymce should have been loaded into global scope");
+    }
+
+    const finalInit: EditorOptions = {
+      ...(this.props.init as Omit<InitOptions, OmittedInitProps>),
+      selector: undefined,
+      target,
+      readonly: this.props.disabled,
+      inline: this.inline,
+      plugins: mergePlugins(this.props.init?.plugins, this.props.plugins),
+      toolbar: this.props.toolbar ?? this.props.init?.toolbar,
+      ...(this.props.licenseKey ? { license_key: this.props.licenseKey } : {}),
+      setup: (editor) => {
+        this.editor = editor;
+        this.bindHandlers({});
+
+        // When running in inline mode the editor gets the initial value
+        // from the innerHTML of the element it is initialized on.
+        // However we don't want to take on the responsibility of sanitizing
+        // to remove XSS in the react integration so we have a chicken and egg
+        // problem... We avoid it by sneaking in a set content before the first
+        // "official" setContent and using TinyMCE to do the sanitization.
+        if (this.inline && !isTextareaOrInput(target)) {
+          editor.once("PostRender", (_evt) => {
+            editor.setContent(this.getInitialValue(), { no_events: true });
+          });
+        }
+
+        if (this.props.init && isFunction(this.props.init.setup)) {
+          this.props.init.setup(editor);
+        }
+      },
+      init_instance_callback: (editor) => {
+        // check for changes that happened since tinymce.init() was called
+        const initialValue = this.getInitialValue();
+        this.currentContent = this.currentContent ?? editor.getContent();
+        if (this.currentContent !== initialValue) {
+          this.currentContent = initialValue;
+          // same as resetContent in TinyMCE 5
+          editor.setContent(initialValue);
+          editor.undoManager.clear();
+          editor.undoManager.add();
+          editor.setDirty(false);
+        }
+        const disabled = this.props.disabled ?? false;
+        setMode(this.editor, disabled ? "readonly" : "design");
+        // ensure existing init_instance_callback is called
+        if (
+          this.props.init &&
+          isFunction(this.props.init.init_instance_callback)
+        ) {
+          this.props.init.init_instance_callback(editor);
+        }
+      },
+    };
+    if (!this.inline) {
+      target.style.visibility = "";
+    }
+    if (isTextareaOrInput(target)) {
+      target.value = this.getInitialValue();
+    }
+
+    tinymce.init(finalInit);
+  };
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/fileListComponent.tsx b/apps/edr-freight-web/backoffice/src/record-management/common/fileListComponent.tsx
new file mode 100644
index 000000000..6ac8e6049
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/fileListComponent.tsx
@@ -0,0 +1,201 @@
+import React, { useState, useEffect } from "react";
+import { Card, CardContent } from "@/shared/common/ui/card";
+import { Button } from "@/shared/common/ui/button";
+import { ArrowBigDownDash, ExternalLink, File, Trash2 } from "lucide-react";
+
+import { useQuery } from "@tanstack/react-query";
+import {
+  getAttachmentsById,
+  getSealedAttachmentsById,
+} from "../services/api/userRecordService";
+import { useTranslation } from "react-i18next";
+
+export interface IAttachmentInfoWithId {
+  id?: string;
+  fileInfo: {
+    fileName: string;
+    contentType?: string;
+    size?: number;
+    type?: string;
+    lastModified?: number;
+    originalname?: string;
+  };
+  presigned?: string;
+  length?: number;
+  itemId?: string;
+}
+
+interface FileListProps {
+  attachments: IAttachmentInfoWithId[];
+  showDelete: boolean;
+  onDelete?: (fileId: string) => void;
+}
+const formatFileSize = (sizeInBytes: number): string => {
+  if (sizeInBytes < 1024) return `${sizeInBytes} B`;
+  if (sizeInBytes < 1024 * 1024) return `${(sizeInBytes / 1024).toFixed(2)} KB`;
+  return `${(sizeInBytes / (1024 * 1024)).toFixed(2)} MB`;
+};
+const FileList: React.FC<FileListProps> = ({
+  attachments,
+  onDelete,
+  showDelete,
+}) => {
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [selectedFile, setSelectedFile] = useState<string | null>(null);
+  const { t } = useTranslation();
+
+  const { data: fetchedFile, isSuccess } = useQuery({
+    queryKey: ["record-attachment", selectedId],
+    queryFn: async () => {
+      if (!selectedId) return null;
+
+      try {
+        // Try regular attachment first
+        return await getAttachmentsById(selectedId);
+      } catch (error) {
+        // If it fails, try sealed attachment
+        return await getSealedAttachmentsById(selectedId);
+      }
+    },
+    enabled: !!selectedId,
+    staleTime: 1000 * 60 * 5,
+  });
+  // Open presigned URL when fetched
+  useEffect(() => {
+    if (fetchedFile?.presigned && isSuccess) {
+      const url = fetchedFile.presigned;
+      openFile(url, fetchedFile);
+      setSelectedId(null);
+    } else if (selectedFile) {
+      openFile(selectedFile, fetchedFile);
+      setSelectedFile(null);
+    }
+  }, [fetchedFile, isSuccess, selectedFile]);
+
+  const openFile = (url: string, fetchedFile: any) => {
+    const contentType = fetchedFile?.fileInfo?.contentType;
+    // Detect Office file types
+    if (
+      contentType === "application/vnd.ms-excel" ||
+      contentType ===
+        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+    ) {
+      window.location.href = `ms-excel:ofe|u|${url}`;
+    } else if (
+      contentType === "application/vnd.ms-powerpoint" ||
+      contentType ===
+        "application/vnd.openxmlformats-officedocument.presentationml.presentation"
+    ) {
+      window.location.href = `ms-powerpoint:ofe|u|${url}`;
+    } else if (
+      contentType === "application/msword" ||
+      contentType ===
+        "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+    ) {
+      window.location.href = `ms-word:ofe|u|${url}`;
+    } else {
+      // Fallback: open normally in browser tab
+      window.open(url, "_blank", "noopener,noreferrer");
+    }
+  };
+
+  const downloadFile = async (url: string, fileName: string) => {
+    const response = await fetch(url, {
+      // credentials optional based on your API
+      // credentials: "include"
+    });
+
+    const blob = await response.blob();
+    const blobUrl = URL.createObjectURL(blob);
+
+    const link = document.createElement("a");
+    link.href = blobUrl;
+    link.download = fileName;
+
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+
+    URL.revokeObjectURL(blobUrl);
+  };
+
+  const handleOpen = (id: string | undefined) => {
+    if (id) setSelectedId(id);
+  };
+  return (
+    <Card className="w-full">
+      <CardContent>
+        {attachments.length > 0 ? (
+          <ul className="space-y-2">
+            {attachments.map((file) => (
+              <li
+                key={
+                  file?.id ||
+                  file?.itemId ||
+                  file?.fileInfo.fileName ||
+                  Math.random().toString()
+                }
+                className="flex flex-col sm:flex-row sm:items-center justify-between border p-3 rounded-lg bg-white dark:bg-gray-800 dark:border-gray-700 w-full gap-3">
+                <div className="flex items-start sm:items-center space-x-3 min-w-0 w-full sm:w-auto">
+                  <File className="w-8 h-8 text-primary-600 dark:text-primary-300 flex-shrink-0 mt-0.5 sm:mt-0" />
+                  <div className="flex flex-col min-w-0 flex-1 sm:flex-initial" title={file?.fileInfo.originalname}>
+                    <span className="truncate font-medium text-gray-700 dark:text-gray-100 text-sm sm:text-base" title={file?.fileInfo.originalname}>
+                      {file?.fileInfo.originalname}
+                    </span>
+                    <span className="text-xs sm:text-sm text-gray-500 dark:text-gray-300">
+                      {formatFileSize(file?.fileInfo.size || 0)}
+                    </span>
+                  </div>
+                </div>
+
+                <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 w-full sm:w-auto">
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="w-full sm:w-auto justify-center flex items-center space-x-1 bg-primary-50 hover:bg-primary-100 text-primary-700 dark:bg-primary-900/50 dark:hover:bg-primary-800/70 dark:text-white dark:border-primary-700"
+                    onClick={() =>
+                      handleOpen(
+                        file?.id ?? setSelectedFile(file.presigned || "") ?? "",
+                      )
+                    }>
+                    <ExternalLink className="w-4 h-4" />
+                    <span>{t("viewDetail.open")}</span>
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="w-full sm:w-auto justify-center flex items-center space-x-1 bg-primary-50 hover:bg-primary-100 text-primary-700 dark:bg-primary-900/50 dark:hover:bg-primary-800/70 dark:text-white dark:border-primary-700"
+                    onClick={() =>
+                      downloadFile(
+                        file.presigned || "",
+                        file?.fileInfo?.originalname || "",
+                      )
+                    }>
+                    <ArrowBigDownDash className="w-4 h-4" />
+                    <span>{t("userRecord.Download")}</span>
+                  </Button>
+                  {showDelete && onDelete && (
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      className="w-full sm:w-auto justify-center flex items-center space-x-1 text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/50"
+                      onClick={() => onDelete(file?.id || file.itemId || "")}>
+                      <Trash2 className="w-4 h-4" />
+                      <span className="sm:hidden">{t("common.delete", "Delete")}</span>
+                    </Button>
+                  )}
+                </div>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <p className="text-gray-500 dark:text-gray-400">
+            {t("viewDetail.noAttachmentsAvailable")}
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default FileList;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/loader.tsx b/apps/edr-freight-web/backoffice/src/record-management/common/loader.tsx
new file mode 100644
index 000000000..008798a9a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/loader.tsx
@@ -0,0 +1,121 @@
+import { cn } from "@/shared/lib/utils";
+
+interface LoaderProps {
+  mode?: "page" | "inline";
+  label?: string;
+  className?: string;
+  showLabel?: boolean;
+}
+
+const Loader = ({
+  mode = "page",
+  label = "Loading...",
+  className,
+  showLabel,
+}: LoaderProps) => {
+  const isInline = mode === "inline";
+  const shouldShowLabel = showLabel ?? !isInline;
+
+  return (
+    <div
+      className={cn(
+        isInline
+          ? "inline-flex items-center justify-center"
+          : "w-full min-h-[60vh] flex flex-col items-center justify-center gap-5 rounded-2xl border border-primary-100/80 bg-gradient-to-br from-white via-primary-50/70 to-primary-100/60 dark:border-primary-900/40 dark:from-slate-900 dark:via-slate-900 dark:to-primary-950/40 shadow-sm backdrop-blur-[1px] select-none",
+        className,
+      )}
+      role="status"
+      aria-live="polite"
+      aria-label={label}
+      aria-busy="true"
+    >
+      <div className={cn("relative", isInline ? "h-8 w-8" : "h-32 w-32")}>
+        {/* OUTER FADE RING */}
+        <span
+          className={cn(
+            "absolute inset-0 rounded-full border-primary-100/70 dark:border-primary-950/80",
+            isInline ? "border-2" : "border-[3px]",
+          )}
+        />
+
+        {/* MAIN SPINNER */}
+        <span
+          className={cn(
+            "absolute inset-0 rounded-full border-transparent border-t-primary-600 border-r-primary-500 dark:border-t-primary-400 dark:border-r-primary-500 motion-safe:animate-spin motion-reduce:animate-none",
+            isInline ? "border-2" : "border-[3px]",
+          )}
+        />
+
+        {/* SECONDARY COUNTER SPINNER */}
+        <span
+          className={cn(
+            "absolute rounded-full border-transparent border-b-primary-500 border-l-primary-400 dark:border-b-primary-300 dark:border-l-primary-400 motion-safe:animate-spin motion-reduce:animate-none",
+            isInline ? "inset-1 border-2" : "inset-2 border-[3px]",
+          )}
+          style={{ animationDirection: "reverse", animationDuration: "1.3s" }}
+        />
+
+        {/* INNER CORE GLOW */}
+        <span
+          className={cn(
+            "absolute rounded-full bg-primary-500/80 dark:bg-primary-400/85 motion-safe:animate-pulse motion-reduce:animate-none",
+            isInline
+              ? "inset-3 shadow-[0_0_10px_rgba(34,197,94,0.5)]"
+              : "inset-8 shadow-[0_0_34px_rgba(34,197,94,0.5)]",
+          )}
+        />
+
+        {/* DOCUMENT ICON */}
+        <div className="absolute inset-0 z-10 flex items-center justify-center">
+          <div
+            className={cn(
+              "relative rounded-[4px] shadow-md border border-primary-200/80 dark:border-primary-900/70 bg-gradient-to-b from-white to-primary-50 dark:from-slate-800 dark:to-slate-900",
+              isInline ? "w-[0.9rem] h-[1.1rem]" : "w-9 h-11",
+            )}
+          >
+            {/* Fold */}
+            <div
+              className={cn(
+                "absolute top-0 right-0 border-l-transparent border-b-primary-200 dark:border-b-primary-500/90",
+                isInline
+                  ? "border-l-[5px] border-b-[5px]"
+                  : "border-l-[8px] border-b-[8px]",
+              )}
+            />
+
+            {/* Lines */}
+            <div className="absolute left-1 right-1 top-[24%] h-[2px] rounded bg-primary-400/70 dark:bg-primary-300/70" />
+            <div className="absolute left-1 right-1 top-[44%] h-[2px] rounded bg-primary-400/50 dark:bg-primary-300/50" />
+            <div className="absolute left-1 right-1 top-[64%] h-[2px] rounded bg-primary-400/30 dark:bg-primary-300/35" />
+
+            {/* Seal */}
+            <span
+              className={cn(
+                "absolute rounded-full border border-primary-400/70 bg-primary-100/80 dark:bg-primary-500/20 dark:border-primary-300/70",
+                isInline
+                  ? "h-1.5 w-1.5 right-0.5 bottom-0.5"
+                  : "h-2.5 w-2.5 right-1 bottom-1",
+              )}
+            />
+          </div>
+        </div>
+      </div>
+
+      {shouldShowLabel && (
+        <p className="text-sm font-semibold tracking-wide text-primary-700 dark:text-primary-300">
+          {label}
+        </p>
+      )}
+
+      {!isInline && (
+        <div className="flex items-center gap-1.5" aria-hidden="true">
+          <span className="h-1.5 w-1.5 rounded-full bg-primary-500/70 motion-safe:animate-pulse" />
+          <span className="h-1.5 w-1.5 rounded-full bg-primary-500/70 motion-safe:animate-pulse [animation-delay:180ms]" />
+          <span className="h-1.5 w-1.5 rounded-full bg-primary-500/70 motion-safe:animate-pulse [animation-delay:360ms]" />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Loader;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/secretaryViewList.tsx b/apps/edr-freight-web/backoffice/src/record-management/common/secretaryViewList.tsx
new file mode 100644
index 000000000..35f66875f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/secretaryViewList.tsx
@@ -0,0 +1,98 @@
+import { cn } from "@/shared/lib/utils";
+import { t } from "i18next";
+import { Button } from "@/shared/common/ui/button";
+import { useReportByHooks } from "../components/hooks/useReportByHooks";
+const SecretaryList = (
+  isSecretary: boolean,
+  secretaryView: any,
+  setSecretaryView: any,
+  type: string,
+  useParentCounts = false,
+) => {
+  const { breakdownCounts } = useReportByHooks({
+    isSecretary: isSecretary && useParentCounts,
+  });
+
+  const secretaryOption = [
+    { value: "self", label: t("userIncoming.self") },
+    { value: "parent", label: t("userIncoming.parent") },
+  ];
+  const statusMain = [
+    { value: "non_smart_user", label: t("userIncoming.nonSmart") },
+    { value: "external", label: t("userIncoming.external") },
+  ];
+  return type === "SEC" ? (
+    isSecretary && (
+      <div className="flex flex-wrap gap-2 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-3 py-3 rounded-t-md shadow-sm">
+        {secretaryOption.map((option) => (
+          <Button
+            key={option.value}
+            onClick={() => setSecretaryView(option.value)}
+            className={cn(
+              "px-5 py-2.5 rounded-full text-base font-medium transition-all duration-200 ease-in-out",
+              "focus:ring-2 focus:ring-primary-500/30 focus:outline-none",
+              secretaryView === option.value
+                ? "bg-primary-600 dark:bg-primary-700 text-white shadow-md scale-[1.02] hover:bg-primary-600 dark:hover:bg-primary-600 hover:shadow-lg"
+                : "bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-primary-50 dark:hover:bg-primary-900/30 hover:text-primary-700 dark:hover:text-primary-400 hover:shadow-sm",
+            )}
+          >
+            {option.label}
+          </Button>
+        ))}
+      </div>
+    )
+  ) : (
+    <div className="flex flex-wrap items-center gap-2 p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
+      {statusMain.map((option) => {
+        const isActive = secretaryView.includes(option.value);
+        const notification =
+          option.value === "external"
+            ? breakdownCounts.externalSmart
+            : option.value === "non_smart_user"
+              ? breakdownCounts.external
+              : 0;
+
+        return (
+          <div key={option.value} className="relative">
+            <Button
+              onClick={() =>
+                option.value === "external"
+                  ? setSecretaryView(["external"])
+                  : setSecretaryView([
+                      "external_non_smart_user",
+                      "non_smart_user",
+                    ])
+              }
+              className={`
+            relative px-5 py-2 rounded-full text-sm sm:text-sm font-medium transition-all duration-200
+            ${
+              isActive
+                ? "bg-primary-600 dark:bg-primary-700 text-white shadow-sm shadow-primary-200 dark:shadow-primary-900/50 hover:bg-primary-700 dark:hover:bg-primary-600"
+                : "bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-600 hover:border-primary-300 dark:hover:border-primary-600 hover:text-primary-700 dark:hover:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/30"
+            }
+          `}
+            >
+              {option.label}
+            </Button>
+
+            {notification > 0 && (
+              <span
+                className="
+              absolute -top-2 -right-2 min-w-[20px] h-[20px]
+              flex items-center justify-center
+              text-xs font-semibold text-white
+              bg-red-500 dark:bg-red-600 rounded-full
+              ring-2 ring-white dark:ring-gray-800
+            "
+              >
+                {notification}
+              </span>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default SecretaryList;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/common/treeSelect.tsx b/apps/edr-freight-web/backoffice/src/record-management/common/treeSelect.tsx
new file mode 100644
index 000000000..6834d02aa
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/common/treeSelect.tsx
@@ -0,0 +1,1063 @@
+"use client";
+
+import {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  useMemo,
+  ReactNode,
+} from "react";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from "@/shared/common/ui/collapsible";
+import { ChevronRight, ChevronDown, Search } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/shared/common/ui/context-menu";
+import { X } from "lucide-react";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/shared/common/ui/hover-card";
+import { Info } from "lucide-react";
+import { Badge } from "@/shared/common/ui/badge";
+import { cn } from "@/shared/lib/utils";
+import { Input } from "@/shared/common/ui/input";
+
+export interface TreeViewItem {
+  id: string;
+  name: string | { am?: string; en?: string };
+  type: string;
+  value: string;
+  children?: TreeViewItem[];
+  checked?: boolean | "indeterminate";
+  hasChildren?: boolean;
+}
+
+// Helper function to safely get name as string
+const getItemName = (name: string | { am?: string; en?: string } | undefined): string => {
+  if (!name) return "Unknown";
+  if (typeof name === "string") return name;
+  return name.en || name.am || "Unknown";
+};
+
+export interface TreeViewIconMap {
+  [key: string]: React.ReactNode | undefined;
+}
+
+export interface TreeViewMenuItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  action: (items: TreeViewItem[]) => void;
+}
+
+export interface TreeViewProps {
+  className?: string;
+  data: TreeViewItem[];
+  title?: string;
+  showExpandAll?: boolean;
+  showCheckboxes?: boolean;
+  checkboxPosition?: "left" | "right";
+  searchPlaceholder?: string;
+  selectionText?: string;
+  checkboxLabels?: {
+    check: string;
+    uncheck: string;
+  };
+  getIcon?: (item: TreeViewItem, depth: number) => React.ReactNode;
+  onSelectionChange?: (selectedItems: TreeViewItem[]) => void;
+  onAction?: (action: string, items: TreeViewItem[]) => void;
+  onCheckChange?: (item: TreeViewItem, checked: boolean) => void;
+  iconMap?: TreeViewIconMap;
+  menuItems?: TreeViewMenuItem[];
+  allowSelection?: boolean;
+}
+
+interface TreeItemProps {
+  item: TreeViewItem;
+  depth?: number;
+  selectedIds: Set<string>;
+  lastSelectedId: React.MutableRefObject<string | null>;
+  onSelect: (ids: Set<string>) => void;
+  expandedIds: Set<string>;
+  onToggleExpand: (id: string, isOpen: boolean) => void;
+  getIcon?: (item: TreeViewItem, depth: number) => React.ReactNode;
+  onAction?: (action: string, items: TreeViewItem[]) => void;
+  onAccessChange?: (item: TreeViewItem, hasAccess: boolean) => void;
+  allItems: TreeViewItem[];
+  showAccessRights?: boolean;
+  itemMap: Map<string, TreeViewItem>;
+  iconMap?: TreeViewIconMap;
+  menuItems?: TreeViewMenuItem[];
+  getSelectedItems: () => TreeViewItem[];
+  allowSelection?: boolean;
+}
+
+// Helper function to build a map of all items by ID
+const buildItemMap = (items: TreeViewItem[]): Map<string, TreeViewItem> => {
+  const map = new Map<string, TreeViewItem>();
+  const processItem = (item: TreeViewItem) => {
+    map.set(item.id, item);
+    item.children?.forEach(processItem);
+  };
+  items.forEach(processItem);
+  return map;
+};
+
+// Update the getCheckState function to work bottom-up
+const getCheckState = (
+  item: TreeViewItem,
+  itemMap: Map<string, TreeViewItem>
+): "checked" | "unchecked" | "indeterminate" => {
+  // Get the original item from the map
+  const originalItem = itemMap.get(item.id);
+  if (!originalItem) return "unchecked";
+
+  // If it's a leaf node (no children), return its check state
+  if (!originalItem.children || originalItem.children.length === 0) {
+    return originalItem.checked ? "checked" : "unchecked";
+  }
+
+  // Count the check states of immediate children
+  let checkedCount = 0;
+  let indeterminateCount = 0;
+
+  originalItem.children.forEach((child) => {
+    const childState = getCheckState(child, itemMap);
+    if (childState === "checked") checkedCount++;
+    if (childState === "indeterminate") indeterminateCount++;
+  });
+
+  // Calculate parent state based on children states
+  const totalChildren = originalItem.children.length;
+
+  // If all children are checked
+  if (checkedCount === totalChildren) {
+    return "checked";
+  }
+  // If any child is checked or indeterminate
+  if (checkedCount > 0 || indeterminateCount > 0) {
+    return "indeterminate";
+  }
+  // If no children are checked or indeterminate
+  return "unchecked";
+};
+
+// Add this default icon map
+const defaultIconMap: TreeViewIconMap = {
+  file: "",
+  folder: "",
+};
+
+function TreeItem({
+  item,
+  depth = 0,
+  selectedIds,
+  lastSelectedId,
+  onSelect,
+  expandedIds,
+  onToggleExpand,
+  getIcon,
+  onAction,
+  onAccessChange,
+  allItems,
+  showAccessRights,
+  itemMap,
+  iconMap = defaultIconMap,
+  menuItems,
+  getSelectedItems,
+  allowSelection,
+}: TreeItemProps): ReactNode {
+  const isOpen = expandedIds.has(item.id);
+  const isSelected = selectedIds.has(item.id);
+  const itemRef = useRef<HTMLDivElement>(null);
+  const [selectionStyle, setSelectionStyle] = useState("");
+
+  // Get all visible items in order
+  const getVisibleItems = useCallback(
+    (items: TreeViewItem[]): TreeViewItem[] => {
+      let visibleItems: TreeViewItem[] = [];
+
+      items.forEach((item) => {
+        visibleItems.push(item);
+        if (item.children && expandedIds.has(item.id)) {
+          visibleItems = [...visibleItems, ...getVisibleItems(item.children)];
+        }
+      });
+
+      return visibleItems;
+    },
+    [expandedIds]
+  );
+
+  useEffect(() => {
+    if (!isSelected) {
+      setSelectionStyle("");
+      return;
+    }
+
+    // Get all visible items from the entire tree
+    const visibleItems = getVisibleItems(allItems);
+    const currentIndex = visibleItems.findIndex((i) => i.id === item.id);
+
+    const prevItem = visibleItems[currentIndex - 1];
+    const nextItem = visibleItems[currentIndex + 1];
+
+    const isPrevSelected = prevItem && selectedIds.has(prevItem.id);
+    const isNextSelected = nextItem && selectedIds.has(nextItem.id);
+
+    const roundTop = !isPrevSelected;
+    const roundBottom = !isNextSelected;
+
+    setSelectionStyle(
+      `${roundTop ? "rounded-t-md" : ""} ${roundBottom ? "rounded-b-md" : ""}`
+    );
+  }, [
+    isSelected,
+    selectedIds,
+    expandedIds,
+    item.id,
+    getVisibleItems,
+    allItems,
+  ]);
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (allowSelection) {
+      let newSelection = new Set(selectedIds);
+
+      if (!itemRef.current) return;
+
+      if (e.shiftKey && lastSelectedId.current !== null) {
+        const items = Array.from(
+          document.querySelectorAll("[data-tree-item]")
+        ) as HTMLElement[];
+        const lastIndex = items.findIndex(
+          (el) => el.getAttribute("data-id") === lastSelectedId.current
+        );
+        const currentIndex = items.findIndex((el) => el === itemRef.current);
+        const [start, end] = [
+          Math.min(lastIndex, currentIndex),
+          Math.max(lastIndex, currentIndex),
+        ];
+
+        items.slice(start, end + 1).forEach((el) => {
+          const id = el.getAttribute("data-id");
+          const parentFolderClosed = el.closest('[data-folder-closed="true"]');
+          const isClosedFolder =
+            el.getAttribute("data-folder-closed") === "true";
+
+          if (id && (isClosedFolder || !parentFolderClosed)) {
+            newSelection.add(id);
+          }
+        });
+      } else if (e.ctrlKey || e.metaKey) {
+        if (newSelection.has(item.id)) {
+          newSelection.delete(item.id);
+        } else {
+          newSelection.add(item.id);
+        }
+      } else {
+        newSelection = new Set([item.id]);
+        // Open folder on single click if it's a folder
+        if (item.children && isSelected) {
+          onToggleExpand(item.id, !isOpen);
+        }
+      }
+
+      lastSelectedId.current = item.id;
+      onSelect(newSelection);
+    }
+  };
+
+  // const handleAction = (action: string) => {
+  //   if (onAction) {
+  //     // Get all selected items, or just this item if none selected
+  //     const selectedItems =
+  //       selectedIds.size > 0
+  //         ? allItems
+  //             .flatMap((item) => getAllDescendants(item))
+  //             .filter((item) => selectedIds.has(item.id))
+  //         : [item];
+  //     onAction(action, selectedItems);
+  //   }
+  // };
+
+  // Helper function to get all descendants of an item (including the item itself)
+  const getAllDescendants = (item: TreeViewItem): TreeViewItem[] => {
+    const descendants = [item];
+    if (item.children) {
+      item.children.forEach((child) => {
+        descendants.push(...getAllDescendants(child));
+      });
+    }
+    return descendants;
+  };
+
+  const handleAccessClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (onAccessChange) {
+      const currentState = getCheckState(item, itemMap);
+      // Toggle between checked and unchecked, treating indeterminate as unchecked
+      const newChecked = currentState === "checked" ? false : true;
+      onAccessChange(item, newChecked);
+    }
+  };
+
+  const renderIcon = () => {
+    if (getIcon) {
+      return getIcon(item, depth);
+    }
+
+    // Use the provided iconMap or fall back to default
+    return iconMap[item.type] || iconMap.folder || defaultIconMap.folder;
+  };
+
+  const getItemPath = (item: TreeViewItem, items: TreeViewItem[]): string => {
+    const itemName = typeof item.name === "string" ? item.name : item.name?.en || item.name?.am || "";
+    const path: string[] = [itemName];
+
+    const findParent = (
+      currentItem: TreeViewItem,
+      allItems: TreeViewItem[]
+    ) => {
+      for (const potentialParent of allItems) {
+        if (
+          potentialParent.children?.some((child) => child.id === currentItem.id)
+        ) {
+          const parentName = typeof potentialParent.name === "string" ? potentialParent.name : potentialParent.name?.en || potentialParent.name?.am || "";
+          path.unshift(parentName);
+          findParent(potentialParent, allItems);
+          break;
+        }
+        if (potentialParent.children) {
+          findParent(currentItem, potentialParent.children);
+        }
+      }
+    };
+
+    findParent(item, items);
+    return path.join(" → ");
+  };
+
+  // Add function to count selected items in a folder
+  const getSelectedChildrenCount = (item: TreeViewItem): number => {
+    let count = 0;
+
+    if (!item.children) return 0;
+
+    item.children.forEach((child) => {
+      if (selectedIds.has(child.id)) {
+        count++;
+      }
+      if (child.children) {
+        count += getSelectedChildrenCount(child);
+      }
+    });
+
+    return count;
+  };
+
+  // Get selected count only if item has children and is collapsed
+  const selectedCount =
+    (item.children && !isOpen && getSelectedChildrenCount(item)) || null;
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger>
+        <div>
+          <div
+            ref={itemRef}
+            data-tree-item
+            data-id={item.id}
+            data-depth={depth}
+            data-folder-closed={item.children && !isOpen}
+            className={`select-none cursor-pointer ${
+              isSelected ? `bg-orange-100 ${selectionStyle}` : "text-foreground"
+            } px-1`}
+            style={{ paddingLeft: `${depth * 20}px` }}
+            onClick={handleClick}
+          >
+            <div className="flex items-center h-8">
+              {item.children ? (
+                <div className="flex items-center gap-2 flex-1 group">
+                  <Collapsible
+                    open={isOpen}
+                    onOpenChange={(open) => onToggleExpand(item.id, open)}
+                  >
+                    <CollapsibleTrigger
+                      asChild
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <Button variant="ghost" size="icon" className="h-6 w-6">
+                        <motion.div
+                          initial={false}
+                          animate={{ rotate: isOpen ? 90 : 0 }}
+                          transition={{ duration: 0.1 }}
+                        >
+                          <ChevronRight className="h-4 w-4" />
+                        </motion.div>
+                      </Button>
+                    </CollapsibleTrigger>
+                  </Collapsible>
+                  {showAccessRights && (
+                    <div
+                      className="relative flex items-center justify-center w-4 h-4 cursor-pointer hover:opacity-80"
+                      onClick={handleAccessClick}
+                    >
+                      {getCheckState(item, itemMap) === "checked" && (
+                        <div className="w-4 h-4 border rounded bg-primary border-primary flex items-center justify-center">
+                          <svg
+                            className="h-3 w-3 text-primary-foreground"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M5 13l4 4L19 7"
+                            />
+                          </svg>
+                        </div>
+                      )}
+                      {getCheckState(item, itemMap) === "unchecked" && (
+                        <div className="w-4 h-4 border rounded border-input" />
+                      )}
+                      {getCheckState(item, itemMap) === "indeterminate" && (
+                        <div className="w-4 h-4 border rounded bg-primary border-primary flex items-center justify-center">
+                          <div className="h-0.5 w-2 bg-primary-foreground" />
+                        </div>
+                      )}
+                    </div>
+                  )}
+                  {renderIcon()}
+                  <span className="flex-1">{getItemName(item.name)}</span>
+                  {selectedCount !== null && selectedCount > 0 && (
+                    <Badge
+                      variant="secondary"
+                      className="mr-2 bg-blue-100 hover:bg-blue-100"
+                    >
+                      {selectedCount} selected
+                    </Badge>
+                  )}
+                  <HoverCard>
+                    <HoverCardTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-6 w-6 p-0 group-hover:opacity-100 opacity-0 items-center justify-center"
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <Info className="h-4 w-4 text-muted-foreground" />
+                      </Button>
+                    </HoverCardTrigger>
+                    <HoverCardContent className="w-80">
+                      <div className="space-y-2">
+                        <h4 className="text-sm font-semibold">{getItemName(item.name)}</h4>
+                        <div className="text-sm text-muted-foreground space-y-1">
+                          <div>
+                            <span className="font-medium">Type:</span>{" "}
+                            {item.type.charAt(0).toUpperCase() +
+                              item.type.slice(1).replace("_", " ")}
+                          </div>
+                          <div>
+                            <span className="font-medium">ID:</span> {item.id}
+                          </div>
+                          <div>
+                            <span className="font-medium">Location:</span>{" "}
+                            {getItemPath(item, allItems)}
+                          </div>
+                          <div>
+                            <span className="font-medium">Items:</span>{" "}
+                            {item.children?.length || 0} direct items
+                          </div>
+                        </div>
+                      </div>
+                    </HoverCardContent>
+                  </HoverCard>
+                </div>
+              ) : (
+                <div className="flex items-center gap-2 flex-1 pl-8 group">
+                  {showAccessRights && (
+                    <div
+                      className="relative flex items-center justify-center w-4 h-4 cursor-pointer hover:opacity-80"
+                      onClick={handleAccessClick}
+                    >
+                      {item.checked ? (
+                        <div className="w-4 h-4 border rounded bg-primary border-primary flex items-center justify-center">
+                          <svg
+                            className="h-3 w-3 text-primary-foreground"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M5 13l4 4L19 7"
+                            />
+                          </svg>
+                        </div>
+                      ) : (
+                        <div className="w-4 h-4 border rounded border-input" />
+                      )}
+                    </div>
+                  )}
+                  {renderIcon()}
+                  <span className="flex-1">{getItemName(item.name)}</span>
+                  <HoverCard>
+                    <HoverCardTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-6 w-6 p-0 group-hover:opacity-100 opacity-0 items-center justify-center"
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <Info className="h-4 w-4 text-muted-foreground" />
+                      </Button>
+                    </HoverCardTrigger>
+                    <HoverCardContent className="w-80">
+                      <div className="space-y-2">
+                        <h4 className="text-sm font-semibold">{getItemName(item.name)}</h4>
+                        <div className="text-sm text-muted-foreground space-y-1">
+                          <div>
+                            <span className="font-medium">Type:</span>{" "}
+                            {item.type.charAt(0).toUpperCase() +
+                              item.type.slice(1).replace("_", " ")}
+                          </div>
+                          <div>
+                            <span className="font-medium">ID:</span> {item.id}
+                          </div>
+                          <div>
+                            <span className="font-medium">Location:</span>{" "}
+                            {getItemPath(item, allItems)}
+                          </div>
+                        </div>
+                      </div>
+                    </HoverCardContent>
+                  </HoverCard>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {item.children && (
+            <Collapsible
+              open={isOpen}
+              onOpenChange={(open) => onToggleExpand(item.id, open)}
+            >
+              <AnimatePresence initial={false}>
+                {isOpen && (
+                  <CollapsibleContent forceMount asChild>
+                    <motion.div
+                      initial={{ height: 0, opacity: 0 }}
+                      animate={{ height: "auto", opacity: 1 }}
+                      exit={{ height: 0, opacity: 0 }}
+                      transition={{ duration: 0.05 }}
+                    >
+                      {item.children?.map((child) => (
+                        <TreeItem
+                          key={child.id}
+                          item={child}
+                          depth={depth + 1}
+                          selectedIds={selectedIds}
+                          lastSelectedId={lastSelectedId}
+                          onSelect={onSelect}
+                          expandedIds={expandedIds}
+                          onToggleExpand={onToggleExpand}
+                          getIcon={getIcon}
+                          onAction={onAction}
+                          onAccessChange={onAccessChange}
+                          allItems={allItems}
+                          showAccessRights={showAccessRights}
+                          itemMap={itemMap}
+                          iconMap={iconMap}
+                          menuItems={menuItems}
+                          getSelectedItems={getSelectedItems}
+                          allowSelection={allowSelection}
+                        />
+                      ))}
+                    </motion.div>
+                  </CollapsibleContent>
+                )}
+              </AnimatePresence>
+            </Collapsible>
+          )}
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-64">
+        {menuItems?.map((menuItem) => (
+          <ContextMenuItem
+            key={menuItem.id}
+            onClick={() => {
+              const items = selectedIds.has(item.id)
+                ? getSelectedItems()
+                : [item];
+              menuItem.action(items);
+            }}
+          >
+            {menuItem.icon && (
+              <span className="mr-2 h-4 w-4">{menuItem.icon}</span>
+            )}
+            {menuItem.label}
+          </ContextMenuItem>
+        ))}
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}
+
+export default function TreeView({
+  className,
+  checkboxLabels = {
+    check: "Check",
+    uncheck: "Uncheck",
+  },
+  data,
+  iconMap,
+  searchPlaceholder = "Search...",
+  selectionText = "selected",
+  showExpandAll = true,
+  showCheckboxes = false,
+  getIcon,
+  onSelectionChange,
+  onAction,
+  onCheckChange,
+  menuItems,
+}: TreeViewProps) {
+  const [currentMousePos, setCurrentMousePos] = useState<number>(0);
+  const [dragStart, setDragStart] = useState<number | null>(null);
+  const [dragStartPosition, setDragStartPosition] = useState<{
+    x: number;
+    y: number;
+  } | null>(null);
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+  const [isDragging, setIsDragging] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const dragRef = useRef<HTMLDivElement>(null);
+  const lastSelectedId = useRef<string | null>(null);
+  const treeRef = useRef<HTMLDivElement>(null);
+
+  const DRAG_THRESHOLD = 10; // pixels
+
+  // Create a map of all items by ID
+  const itemMap = useMemo(() => buildItemMap(data), [data]);
+
+  // Memoize the search results and expanded IDs
+  const { filteredData, searchExpandedIds } = useMemo(() => {
+    if (!searchQuery.trim()) {
+      return { filteredData: data, searchExpandedIds: new Set<string>() };
+    }
+
+    const searchLower = searchQuery.toLowerCase();
+    const newExpandedIds = new Set<string>();
+
+    // Helper function to check if an item or its descendants match the search
+    const itemMatches = (item: TreeViewItem): boolean => {
+      const itemName = typeof item.name === "string" ? item.name : item.name?.en || item.name?.am || "";
+      const nameMatches = itemName.toLowerCase().includes(searchLower);
+      if (nameMatches) return true;
+
+      if (item.children) {
+        return item.children.some((child) => itemMatches(child));
+      }
+
+      return false;
+    };
+
+    // Helper function to filter tree while keeping parent structure
+    const filterTree = (items: TreeViewItem[]): TreeViewItem[] => {
+      return items
+        .map((item) => {
+          if (!item.children) {
+            return itemMatches(item) ? item : null;
+          }
+
+          const filteredChildren = filterTree(item.children);
+          if (filteredChildren.length > 0 || itemMatches(item)) {
+            if (item.children) {
+              newExpandedIds.add(item.id);
+            }
+            return {
+              ...item,
+              children: filteredChildren,
+            };
+          }
+          return null;
+        })
+        .filter((item): item is TreeViewItem => item !== null);
+    };
+
+    return {
+      filteredData: filterTree(data),
+      searchExpandedIds: newExpandedIds,
+    };
+  }, [data, searchQuery]);
+
+  // Update expanded IDs when search changes
+  useEffect(() => {
+    if (searchQuery.trim()) {
+      setExpandedIds((prev) => new Set([...prev, ...searchExpandedIds]));
+    }
+  }, [searchExpandedIds, searchQuery]);
+
+  useEffect(() => {
+    const handleClickAway = (e: MouseEvent) => {
+      const target = e.target as Element;
+
+      const clickedInside =
+        (treeRef.current && treeRef.current.contains(target)) ||
+        (dragRef.current && dragRef.current.contains(target)) ||
+        // Ignore clicks on context menus
+        target.closest('[role="menu"]') ||
+        target.closest("[data-radix-popper-content-wrapper]");
+
+      if (!clickedInside) {
+        setSelectedIds(new Set());
+        lastSelectedId.current = null;
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickAway);
+    return () => document.removeEventListener("mousedown", handleClickAway);
+  }, []);
+
+  // Function to collect all folder IDs
+  const getAllFolderIds = (items: TreeViewItem[]): string[] => {
+    let ids: string[] = [];
+    items.forEach((item) => {
+      if (item.children) {
+        ids.push(item.id);
+        ids = [...ids, ...getAllFolderIds(item.children)];
+      }
+    });
+    return ids;
+  };
+
+  const handleExpandAll = () => {
+    setExpandedIds(new Set(getAllFolderIds(data)));
+  };
+
+  const handleCollapseAll = () => {
+    setExpandedIds(new Set());
+  };
+
+  const handleToggleExpand = (id: string, isOpen: boolean) => {
+    const newExpandedIds = new Set(expandedIds);
+    if (isOpen) {
+      newExpandedIds.add(id);
+    } else {
+      newExpandedIds.delete(id);
+    }
+    setExpandedIds(newExpandedIds);
+  };
+
+  // Get selected items
+  const getSelectedItems = useCallback((): TreeViewItem[] => {
+    const items: TreeViewItem[] = [];
+    const processItem = (item: TreeViewItem) => {
+      if (selectedIds.has(item.id)) {
+        items.push(item);
+      }
+      item.children?.forEach(processItem);
+    };
+    data.forEach(processItem);
+    return items;
+  }, [selectedIds, data]);
+
+  // Get selected items, filtering out parents if their children are selected
+  const getEffectiveSelectedItems = useCallback((): TreeViewItem[] => {
+    const selectedItems = getSelectedItems();
+
+    // Build a set of all selected IDs for quick lookup
+    const selectedIdsSet = new Set(selectedItems.map((item) => item.id));
+
+    // Filter out parents whose children are also selected
+    return selectedItems.filter((item) => {
+      // If this item has no children, always include it
+      if (!item.children) return true;
+
+      // Check if any children of this item are selected
+      const hasSelectedChildren = item.children.some((child) =>
+        selectedIdsSet.has(child.id)
+      );
+
+      // Only include this item if none of its children are selected
+      return !hasSelectedChildren;
+    });
+  }, [getSelectedItems]);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    // Only track on left click and not on buttons
+    if (e.button !== 0 || (e.target as HTMLElement).closest("button")) return;
+
+    setDragStartPosition({ x: e.clientX, y: e.clientY });
+  }, []);
+
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      // Check if primary button is still held down
+      if (!(e.buttons & 1)) {
+        setIsDragging(false);
+        setDragStart(null);
+        setDragStartPosition(null);
+        return;
+      }
+
+      // If we haven't registered a potential drag start position, ignore
+      if (!dragStartPosition) return;
+
+      // Calculate distance moved
+      const deltaX = e.clientX - dragStartPosition.x;
+      const deltaY = e.clientY - dragStartPosition.y;
+      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+      // If we haven't started dragging yet, check if we should start
+      if (!isDragging) {
+        if (distance > DRAG_THRESHOLD) {
+          setIsDragging(true);
+          setDragStart(dragStartPosition.y);
+
+          // Clear selection if not holding shift/ctrl
+          if (!e.shiftKey && !e.ctrlKey) {
+            setSelectedIds(new Set());
+            lastSelectedId.current = null;
+          }
+        }
+        return;
+      }
+
+      // Rest of the existing drag logic
+      if (!dragRef.current) return;
+
+      const items = Array.from(
+        dragRef.current.querySelectorAll("[data-tree-item]")
+      ) as HTMLElement[];
+
+      const startY = dragStart;
+      const currentY = e.clientY;
+      const [selectionStart, selectionEnd] = [
+        Math.min(startY || 0, currentY),
+        Math.max(startY || 0, currentY),
+      ];
+
+      const newSelection = new Set(
+        e.shiftKey || e.ctrlKey ? Array.from(selectedIds) : []
+      );
+
+      items.forEach((item) => {
+        const rect = item.getBoundingClientRect();
+        const itemTop = rect.top;
+        const itemBottom = rect.top + rect.height;
+
+        if (itemBottom >= selectionStart && itemTop <= selectionEnd) {
+          const id = item.getAttribute("data-id");
+          const isClosedFolder =
+            item.getAttribute("data-folder-closed") === "true";
+          const parentFolderClosed = item.closest(
+            '[data-folder-closed="true"]'
+          );
+
+          if (id && (isClosedFolder || !parentFolderClosed)) {
+            newSelection.add(id);
+          }
+        }
+      });
+
+      setSelectedIds(newSelection);
+      setCurrentMousePos(e.clientY);
+    },
+    [isDragging, dragStart, selectedIds, dragStartPosition]
+  );
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+    setDragStart(null);
+    setDragStartPosition(null);
+  }, []);
+
+  // Add cleanup for mouse events
+  useEffect(() => {
+    if (isDragging) {
+      document.addEventListener("mouseup", handleMouseUp);
+      document.addEventListener("mouseleave", handleMouseUp);
+    }
+    return () => {
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("mouseleave", handleMouseUp);
+    };
+  }, [isDragging, handleMouseUp]);
+
+  // Call onSelectionChange when selection changes
+  useEffect(() => {
+    if (onSelectionChange) {
+      onSelectionChange(getSelectedItems());
+    }
+  }, [selectedIds, onSelectionChange, getSelectedItems]);
+
+  return (
+    <div className="flex gap-4">
+      <div
+        ref={treeRef}
+        className="bg-background p-6 rounded-xl border max-w-2xl space-y-4 w-full relative shadow-lg"
+      >
+        <AnimatePresence mode="wait">
+          {selectedIds.size > 0 ? (
+            <motion.div
+              key="selection"
+              initial={{ opacity: 0, y: -20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              className="h-10 flex items-center justify-between bg-background rounded-lg border px-4"
+            >
+              <div
+                className="font-medium cursor-pointer flex items-center"
+                title="Clear selection"
+                onClick={() => {
+                  setSelectedIds(new Set());
+                  lastSelectedId.current = null;
+                }}
+              >
+                <X className="h-4 w-4 mr-2" />
+                {selectedIds.size} {selectionText}
+              </div>
+
+              {showCheckboxes && (
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => {
+                      const effectiveItems = getEffectiveSelectedItems();
+                      const processItem = (item: TreeViewItem) => {
+                        onCheckChange?.(item, true);
+                        item.children?.forEach(processItem);
+                      };
+                      effectiveItems.forEach(processItem);
+                    }}
+                    className="text-primary-600 hover:text-primary-700 hover:bg-primary-50"
+                  >
+                    {checkboxLabels.check}
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => {
+                      const effectiveItems = getEffectiveSelectedItems();
+                      const processItem = (item: TreeViewItem) => {
+                        onCheckChange?.(item, false);
+                        item.children?.forEach(processItem);
+                      };
+                      effectiveItems.forEach(processItem);
+                    }}
+                    className="text-red-600 hover:text-red-700 hover:bg-red-50"
+                  >
+                    {checkboxLabels.uncheck}
+                  </Button>
+                </div>
+              )}
+            </motion.div>
+          ) : (
+            <motion.div
+              key="search"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 20 }}
+              className="h-10 flex items-center gap-2"
+            >
+              <div className="relative flex-1">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder={searchPlaceholder}
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="h-10 pl-9"
+                />
+              </div>
+              {showExpandAll && (
+                <div className="flex gap-2 shrink-0">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-10 px-2"
+                    onClick={handleExpandAll}
+                  >
+                    <ChevronDown className="h-4 w-4 mr-1" />
+                    Expand All
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-10 px-2"
+                    onClick={handleCollapseAll}
+                  >
+                    <ChevronRight className="h-4 w-4 mr-1" />
+                    Collapse All
+                  </Button>
+                </div>
+              )}
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        <div
+          ref={dragRef}
+          className={cn("rounded-lg bg-card relative select-none", className)}
+          onMouseDown={handleMouseDown}
+          onMouseMove={handleMouseMove}
+        >
+          {isDragging && (
+            <div
+              className="absolute inset-0 bg-blue-500/0 pointer-events-none"
+              style={{
+                top: Math.min(
+                  dragStart || 0,
+                  dragStart === null ? 0 : currentMousePos
+                ),
+                height: Math.abs(
+                  (dragStart || 0) - (dragStart === null ? 0 : currentMousePos)
+                ),
+              }}
+            />
+          )}
+          {filteredData.map((item) => (
+            <TreeItem
+              key={item.id}
+              item={item}
+              selectedIds={selectedIds}
+              lastSelectedId={lastSelectedId}
+              onSelect={setSelectedIds}
+              expandedIds={expandedIds}
+              onToggleExpand={handleToggleExpand}
+              getIcon={getIcon}
+              onAction={onAction}
+              onAccessChange={onCheckChange}
+              allItems={data}
+              showAccessRights={showCheckboxes}
+              itemMap={itemMap}
+              iconMap={iconMap}
+              menuItems={menuItems}
+              getSelectedItems={getSelectedItems}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/Approval/ApproveRecords/MyApprovalsTable.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/Approval/ApproveRecords/MyApprovalsTable.tsx
new file mode 100644
index 000000000..7ac3199eb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/Approval/ApproveRecords/MyApprovalsTable.tsx
@@ -0,0 +1,144 @@
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import MyApprovalColumns from "./myApprovalColumns";
+import Loader from "@/record-management/components/Loader/loader";
+import {
+  useMyApprovals,
+  useMyProcessedApprovals,
+} from "../../hooks/useApprovalTasks";
+import { ApprovalRecordQueryParams } from "@/record-management/services/api/approvalService";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { useEffect, useMemo, useState } from "react";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { cleanFilterParams, FilterParams } from "@/shared/utils/filterParams";
+
+interface Props {
+  status: "approve" | "reject" | "send_back" | "send_to_ro" | "active" | "all";
+  filters: Partial<FilterParams>;
+  liveSearch?: { key: string; value: string } | null;
+}
+
+export default function MyApprovalsTable({
+  status,
+  filters,
+  liveSearch,
+}: Props) {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const { userDetails } = useAuthUser();
+  const localizedName = useLocalizedName();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const urlPage = Number(searchParams.get("page") || 1);
+  const [pageIndex, setPageIndex] = useState(urlPage - 1);
+  const pageSize = 10;
+
+  /* build params */
+  const filterParams = useMemo(() => {
+    const baseParams: ApprovalRecordQueryParams = {
+      skip: pageIndex * pageSize,
+      take: pageSize,
+      orderBy: "createdAt:DESC",
+      ...(status &&
+        status !== "active" &&
+        status !== "all" && { action: status }),
+      ...filters,
+    };
+
+    const cleaned = cleanFilterParams(baseParams) as ApprovalRecordQueryParams;
+
+    return liveSearch
+      ? { ...cleaned, [liveSearch.key]: liveSearch.value }
+      : cleaned;
+  }, [filters, pageIndex, pageSize, status, liveSearch]);
+
+  // Snap back to page 1 whenever any filter changes
+  useEffect(() => {
+    setPageIndex(0);
+    setSearchParams(
+      (prev) => {
+        const params = new URLSearchParams(prev);
+        params.set("page", "1");
+        return params;
+      },
+      { replace: true },
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [status, filters]);
+
+  const { data, isLoading, isError, refetch } =
+    useMyProcessedApprovals(filterParams);
+  const isDelegated = userDetails?.employee?.some((emp) =>
+    emp.positions.some((pos) => pos.hasDelegated),
+  );
+  const totalPages = data?.count ? Math.ceil(data?.count / pageSize) : 1;
+  useEffect(() => {
+    if (!data?.count) return; // wait until data is loaded
+
+    let newPage = pageIndex + 1;
+
+    if (newPage > totalPages) {
+      newPage = 1;
+      setPageIndex(0);
+    }
+
+    setSearchParams((prev) => {
+      const params = new URLSearchParams(prev);
+      params.set("page", newPage.toString());
+      return params;
+    });
+  }, [pageIndex, totalPages, setSearchParams, data?.count]);
+  const handlePageChange = () => {
+    const newPage = pageIndex + 1;
+
+    setPageIndex(newPage);
+
+    setSearchParams((prev) => {
+      prev.set("page", newPage.toString());
+      return prev;
+    });
+  };
+
+  if (isLoading) return <Loader />;
+
+  if (isError && isDelegated) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full p-6 bg-red-50 border border-red-200 rounded-lg">
+        <h2 className="text-xl font-semibold text-red-700">
+          {t("msg.accessDenied")}
+        </h2>
+        <p className="mt-2 text-lg text-red-600 text-center max-w-sm">
+          {t("userIncoming.errDelegation")}
+        </p>
+      </div>
+    );
+  }
+  if (isError) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full p-6 bg-red-50 border border-red-200 rounded-lg">
+        <h2 className="text-xl font-semibold text-red-700">{t("msg.error")}</h2>
+        <p className="mt-2 text-lg text-red-600 text-center max-w-sm">
+          {t("userRecord.Error loading records.")}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <AdvancedTable
+      columns={MyApprovalColumns(navigate, localizedName, pageIndex + 1)}
+      data={data?.items || []}
+      tableName="My Approval Records"
+      toolBarPosition="right"
+      itemCount={data?.count || 0}
+      pageIndex={pageIndex}
+      onPageChange={setPageIndex}
+      nextFunction={handlePageChange}
+      prevFunction={() => setPageIndex(Math.max(0, pageIndex - 1))}
+      refresh={refetch}
+      initialColumnVisibility={{
+        Receiver: false,
+      }}
+    />
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/Approval/ApproveRecords/TasksTable.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/Approval/ApproveRecords/TasksTable.tsx
new file mode 100644
index 000000000..fd8919b75
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/Approval/ApproveRecords/TasksTable.tsx
@@ -0,0 +1,208 @@
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import ApproveRecordsColumns from "./approveRecordsColumns";
+import Loader from "@/record-management/components/Loader/loader";
+import { useApprovalTasks } from "../../hooks/useApprovalTasks";
+import { useTranslation } from "react-i18next";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { useQueryClient } from "@tanstack/react-query";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { useUnitConfiguration } from "@/shared/hooks/useUnitConfiguration";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import ApproveRecordPage from "../approve/approveRecordPage";
+import { PendingApprovalDto } from "@/record-management/dto/approval/approvalRecordsDto";
+import { ApprovalRecordQueryParams } from "@/record-management/services/api/approvalService";
+import { cleanFilterParams, FilterParams } from "@/shared/utils/filterParams";
+interface Props {
+  filters: Partial<FilterParams>;
+  onReview?: boolean;
+  liveSearch?: { key: string; value: string } | null;
+}
+
+export default function TasksTable({ onReview, filters, liveSearch }: Props) {
+  const { userDetails } = useAuthUser();
+  const localizedName = useLocalizedName();
+  const unitId = userDetails?.employee?.[0]?.unitId ?? "";
+  const { data: unitConfigData } = useUnitConfiguration(unitId, {
+    enabled: !!unitId,
+  });
+  const canRecordBeEditedOnWorkflow =
+    unitConfigData?.data?.items?.[0]?.canRecordBeEditedOnWorkflow ?? false;
+  const [searchParams, setSearchParams] = useSearchParams();
+  const urlPage = Number(searchParams.get("pageT") || 1);
+  const [pageIndex, setPageIndex] = useState(urlPage - 1);
+  const pageSize = 10;
+
+  const filterParams = useMemo(() => {
+    const { fromCreatedAt, toCreatedAt, ...restFilters } = filters;
+    const baseParams = {
+      skip: pageIndex * pageSize,
+      take: pageSize,
+      orderBy: "record.updatedAt:DESC",
+      onReview,
+      ...restFilters,
+      fromUpdatedAt:
+        typeof fromCreatedAt === "string" ? fromCreatedAt : undefined,
+      toUpdatedAt: typeof toCreatedAt === "string" ? toCreatedAt : undefined,
+    };
+
+    const cleaned = cleanFilterParams(baseParams) as ApprovalRecordQueryParams;
+
+    return liveSearch
+      ? { ...cleaned, [liveSearch.key]: liveSearch.value }
+      : cleaned;
+  }, [pageIndex, filters, onReview, liveSearch]);
+
+  // Snap back to page 1 whenever any filter changes
+  useEffect(() => {
+    setPageIndex(0);
+    setSearchParams(
+      (prev) => {
+        const params = new URLSearchParams(prev);
+        params.set("pageT", "1");
+        return params;
+      },
+      { replace: true },
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filters, onReview]);
+
+  const { approvalRecords, approvalCount, isLoading, isError, refetch } =
+    useApprovalTasks(filterParams);
+  const { t } = useTranslation();
+  const isDelegated = userDetails?.employee?.some((emp) =>
+    emp.positions.some((pos) => pos.hasDelegated),
+  );
+  const totalPages = approvalCount ? Math.ceil(approvalCount / pageSize) : 1;
+  useEffect(() => {
+    if (!approvalCount) return; // wait until data is loaded
+
+    let newPage = pageIndex + 1;
+
+    if (newPage > totalPages) {
+      newPage = 1;
+      setPageIndex(0);
+    }
+
+    setSearchParams((prev) => {
+      const params = new URLSearchParams(prev);
+      params.set("page", newPage.toString());
+      return params;
+    });
+  }, [pageIndex, totalPages, setSearchParams, approvalCount]);
+  const handlePageChange = () => {
+    const newPage = pageIndex + 1;
+
+    setPageIndex(newPage);
+
+    setSearchParams((prev) => {
+      prev.set("pageT", newPage.toString());
+      return prev;
+    });
+  };
+
+  if (isLoading) return <Loader />;
+  if (isError && isDelegated) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full p-6 bg-red-50 border border-red-200 rounded-lg">
+        <h2 className="text-xl font-semibold text-red-700">
+          {t("msg.accessDenied")}
+        </h2>
+        <p className="mt-2 text-lg text-red-600 text-center max-w-sm">
+          {t("userIncoming.errDelegation")}
+        </p>
+      </div>
+    );
+  }
+  if (isError) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full p-6 bg-red-50 border border-red-200 rounded-lg">
+        <h2 className="text-xl font-semibold text-red-700">{t("msg.error")}</h2>
+        <p className="mt-2 text-lg text-red-600 text-center max-w-sm">
+          {t("userRecord.errorLoadingRecords.")}
+        </p>
+      </div>
+    );
+  }
+  // Lift the Approve modal state to the table so it survives row remounts.
+  // Each row's <ApproveRecordsActions> can be torn down and rebuilt by
+  // TanStack Table without affecting the modal that's already open.
+  const [approveTarget, setApproveTarget] = useState<PendingApprovalDto | null>(
+    null,
+  );
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  const handleApproveClick = useCallback((row: PendingApprovalDto) => {
+    setApproveTarget(row);
+  }, []);
+
+  const handleApproveClose = useCallback(() => {
+    setApproveTarget(null);
+    refetch();
+    queryClient.invalidateQueries({ queryKey: ["approvalRecord"] });
+    queryClient.invalidateQueries({ queryKey: ["pendingRecords"] });
+    queryClient.invalidateQueries({ queryKey: ["dashbordReport"] });
+  }, [refetch, queryClient]);
+
+  const handleApproveSuccess = useCallback(() => {
+    setApproveTarget(null);
+    navigate(`/record-management/approval`);
+  }, [navigate]);
+
+  // Memoize columns: recreating this array on every render hands a new
+  // reference to AdvancedTable, which forces TanStack Table to rebuild
+  // every cell. That caused all <ApproveRecordsActions> rows to unmount.
+  const columns = useMemo(
+    () =>
+      ApproveRecordsColumns(
+        refetch,
+        localizedName,
+        pageIndex + 1,
+        canRecordBeEditedOnWorkflow,
+        handleApproveClick,
+      ),
+    [
+      refetch,
+      localizedName,
+      pageIndex,
+      canRecordBeEditedOnWorkflow,
+      handleApproveClick,
+    ],
+  );
+
+  return (
+    <>
+      <AdvancedTable
+        columns={columns}
+        data={approvalRecords || []}
+        tableName="Pending Approval Tasks"
+        toolBarPosition="right"
+        itemCount={approvalCount || 0}
+        pageIndex={pageIndex}
+        onPageChange={setPageIndex}
+        nextFunction={handlePageChange}
+        prevFunction={() => setPageIndex(Math.max(0, pageIndex - 1))}
+        refresh={refetch}
+        initialColumnVisibility={{
+          Receiver: false,
+        }}
+      />
+      {approveTarget && (
+        <ApproveRecordPage
+          recordId={approveTarget.record?.id ?? ""}
+          recordTypeKey={approveTarget.record?.recordTypeKey}
+          referenceNumber={approveTarget.record?.referenceNumber ?? ""}
+          isWithTeamSignature={approveTarget.record?.isWithTeamSignature}
+          open={true}
+          onSuccess={handleApproveSuccess}
+          onClose={handleApproveClose}
+          preferredLanguage={
+            approveTarget.record?.preferredLanguage ??
+            (approveTarget as any).preferredLanguage
+          }
+        />
+      )}
+    </>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/Approval/ApproveRecords/approveRecords.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/Approval/ApproveRecords/approveRecords.tsx
new file mode 100644
index 000000000..02f4df195
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/Approval/ApproveRecords/approveRecords.tsx
@@ -0,0 +1,149 @@
+import { useMemo, useState } from "react";
+import { Button } from "@/shared/common/ui/button";
+
+import { useTranslation } from "react-i18next";
+
+import MyApprovalsTable from "./MyApprovalsTable";
+import TasksTable from "./TasksTable";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { useCombinedFilters } from "@/shared/hooks/useCombinedFilters";
+import DelegationView from "@/record-management/common/DelegationView";
+import {
+  CombinedFilterBar,
+  CombinedFilterField,
+} from "@/shared/components/filters/CombinedFilterBar";
+import { FilterParams } from "@/shared/utils/filterParams";
+
+const approvalStatuses = [
+  "approve",
+  "reject",
+  "send_back",
+  "send_to_ro",
+] as const;
+type ApprovalStatus =
+  | (typeof approvalStatuses)[number]
+  | "active"
+  | "under_review"
+  | "all";
+
+export default function ApproveRecords() {
+  const { t } = useTranslation();
+  const { userDetails } = useAuthUser();
+  const isDelegated = userDetails?.employee?.some((emp) =>
+    emp.positions.some((pos) => pos.hasDelegated),
+  );
+  const [statusFilter, setStatusFilter] = useState<ApprovalStatus>("active");
+  const combinedFilters = useCombinedFilters<FilterParams>();
+  const [liveSearch, setLiveSearch] = useState<{
+    key: string;
+    value: string;
+  } | null>(null); // ← add
+
+  const handleLiveSearch = (key: string, value: string) => {
+    if (!key || !value) {
+      setLiveSearch(null);
+      return;
+    }
+    setLiveSearch({ key, value });
+  };
+
+  const filterFields = useMemo<CombinedFilterField[]>(
+    () => [
+      {
+        key: "receiverEmployee",
+        label: t("ApprovalPage.receiverEmployee"),
+        type: "text",
+      },
+      {
+        key: "receiverPosition",
+        label: t("ApprovalPage.receiverPosition"),
+        type: "text",
+      },
+      { key: "subject", label: t("ApprovalPage.Subject"), type: "text" },
+      { key: "letterName", label: t("ApprovalPage.LetterName"), type: "text" },
+      {
+        key: "sendingPosition",
+        label: t("ApprovalPage.SendingDepartment"),
+        type: "text",
+      },
+      {
+        key: "createdAt",
+        label: t("ApprovalPage.Date"),
+        type: "dateRange",
+        fromKey: "fromCreatedAt",
+        toKey: "toCreatedAt",
+      },
+    ],
+    [t],
+  );
+
+  const statusOptions = [
+    { value: "all", label: t("ApprovalPage.All") },
+    { value: "active", label: t("statusBar.InProgress") },
+    { value: "under_review", label: t("statusBar.Under Review") },
+    { value: "send_to_ro", label: t("statusBar.Approved") },
+    { value: "approve", label: t("statusBar.Accepted") },
+    { value: "send_back", label: t("statusBar.Adjustment") },
+    { value: "reject", label: t("statusBar.Rejected") },
+  ];
+
+  const isMyApprovalsMode =
+    approvalStatuses.includes(statusFilter as any) || statusFilter === "all";
+  const isUnderReviewMode = statusFilter === "under_review";
+
+  return isDelegated ? (
+    <DelegationView />
+  ) : (
+    <div className="flex flex-col gap-2 bg-background text-foreground pt-10">
+      <div className="flex flex-col sm:flex-row justify-between items-start gap-4 w-full">
+        <h4 className="text-xl font-medium text-gray-900 dark:text-gray-100">
+          {t("ApprovalPage.Letters")}
+        </h4>
+
+        <CombinedFilterBar
+          fields={filterFields}
+          filters={combinedFilters.filters}
+          setFilter={combinedFilters.setFilter}
+          setFilters={combinedFilters.setFilters}
+          removeFilter={combinedFilters.removeFilter}
+          removeFilters={combinedFilters.removeFilters}
+          onLiveSearch={handleLiveSearch}
+        />
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        {statusOptions.map(({ value, label }) => (
+          <Button
+            key={value}
+            variant={statusFilter === value ? "linkActive" : "link"}
+            onClick={() => setStatusFilter(value as ApprovalStatus)}
+            className="rounded-md text-sm sm:text-base">
+            {label}
+          </Button>
+        ))}
+      </div>
+
+      {isMyApprovalsMode ? (
+        <MyApprovalsTable
+          status={
+            statusFilter as
+              | "approve"
+              | "reject"
+              | "send_back"
+              | "send_to_ro"
+              | "active"
+              | "all"
+          }
+          filters={combinedFilters.filters}
+          liveSearch={liveSearch}
+        />
+      ) : (
+        <TasksTable
+          filters={combinedFilters.filters}
+          onReview={isUnderReviewMode}
+          liveSearch={liveSearch}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/Approval/ApproveRecords/approveRecordsActions.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/Approval/ApproveRecords/approveRecordsActions.tsx
new file mode 100644
index 000000000..69ff6f8ac
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/Approval/ApproveRecords/approveRecordsActions.tsx
@@ -0,0 +1,501 @@
+import { Button, getActionButtonVariant } from "@/shared/common/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import { useMemo, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { fetchApprovalTasks } from "@/record-management/services/api/approvalService";
+import {
+  SearchCheck,
+  Banknote,
+  FilePenLine,
+  EllipsisVertical,
+  CheckCircle2,
+  SquarePen,
+} from "lucide-react";
+import { useNavigate } from "react-router-dom";
+
+import RejectRecord from "../approve/rejectRecord";
+import AcceptRecord from "@/record-management/components/Approval/approve/AcceptRecord";
+import AdjustRecord from "../approve/AdjustRecord";
+import { useUserDetail } from "@/record-management/components/hooks/useUserDetail";
+import ApproveRecordPage from "../approve/approveRecordPage";
+import { useTranslation } from "react-i18next";
+import { PendingApprovalDto } from "@/record-management/dto/approval/approvalRecordsDto";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { MeDto } from "@/shared/dto/user/meDto";
+import { useQueryClient } from "@tanstack/react-query";
+import UnderReviewRecord from "../approve/UnderReviewRecord";
+import IncomingInstanceDetail from "../../userIncoming/IncomingInstanceDetail";
+interface UserRecordProps {
+  rowData: any;
+  refetchTable?: () => void; // Optional refetch function
+  pageIndex?: number;
+  fromTable: boolean;
+  canRecordBeEditedOnWorkflow?: boolean;
+  // When provided, the Approve modal is owned by the parent (TasksTable).
+  // The row delegates the click upward instead of mounting the modal in
+  // its own state. This prevents row remounts from killing the modal.
+  onApproveClick?: (row: any) => void;
+}
+
+const ApproveRecordsActions: React.FC<UserRecordProps> = ({
+  rowData,
+  refetchTable,
+  pageIndex,
+  fromTable,
+  canRecordBeEditedOnWorkflow = false,
+  onApproveClick,
+}) => {
+  const [showAcceptDialog, setShowAcceptDialog] = useState(false);
+  const [showAdjustDialog, setAdjustDialog] = useState(false);
+  const [showRejectDialog, setShowRejectDialog] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [showApprove, setShowApprove] = useState<boolean>(false);
+  const [showReview, setShowReview] = useState<boolean>(false);
+
+  const { userDetails } = useAuthUser();
+
+  const queryClient = useQueryClient();
+  const { checkHaveParent, permissionKeys } = useUserDetail(
+    userDetails as MeDto,
+  );
+  const sendInternal = permissionKeys.includes("can:sendInternalRecordToRo");
+  const sendInternalMemo = permissionKeys.includes("can:dispatchInternalMemo");
+  const sendExternal = permissionKeys.includes("can:sendExternalRecordToRo");
+
+  // The detail page hands us a flat RecordDto. In that shape, `rowData.id` is
+  // the record id — NOT the workflow instance id the mutations expect, which
+  // is why every action returned 400 instance_not_found. Look up the matching
+  // approval task by record id so the detail page acts on the same row shape
+  // the table uses.
+
+  const hasTaskShape = !!rowData?.record?.id;
+  const recordIdForLookup: string | undefined = hasTaskShape
+    ? rowData?.record?.id
+    : rowData?.id;
+
+  const { data: lookupResp } = useQuery({
+    queryKey: ["approvalTaskByRecord", recordIdForLookup],
+    queryFn: () => fetchApprovalTasks({ take: 1000 }),
+    enabled: !fromTable && !hasTaskShape && !!recordIdForLookup,
+    staleTime: 30_000,
+  });
+
+  const lookupTask = useMemo(() => {
+    const items: any[] = (lookupResp as any)?.items ?? [];
+    if (!Array.isArray(items)) return null;
+    return items.find((t: any) => t?.record?.id === recordIdForLookup) ?? null;
+  }, [lookupResp, recordIdForLookup]);
+
+  // Effective row: in table mode trust the prop; in detail mode prefer the
+  // task-shaped lookup result so .id is the workflow instance id.
+  const effectiveRowData: any =
+    fromTable || hasTaskShape ? rowData : (lookupTask ?? rowData);
+  const taskResolved = fromTable || hasTaskShape || !!lookupTask;
+
+  const onReviewStatus = effectiveRowData?.onReview ?? false;
+  const effectiveRecordTypeKey =
+    effectiveRowData?.record?.recordTypeKey ?? effectiveRowData?.recordTypeKey;
+  const { t } = useTranslation();
+
+  const navigate = useNavigate();
+  const approveVissible = permissionKeys.includes("can:sendToRO");
+
+  const acceptVisible = checkHaveParent !== null;
+  const handleViewDetails = () => {
+    setDropdownOpen(false);
+    navigate(
+      `/record-management/viewApproval/${rowData?.record.id}/?page=${pageIndex}`,
+      {
+        // The approval-task shape (with task id, status, nested .record) isn't
+        // recoverable from a record id alone, so hand it to the detail page so
+        // action buttons there can act on the correct workflow instance.
+        state: { approvalRow: rowData },
+      },
+    );
+  };
+
+  const openAcceptDialog = (e: Event) => {
+    e.preventDefault();
+    setDropdownOpen(false);
+    setShowAcceptDialog(true);
+  };
+
+  const openAdjustDialog = (e: Event) => {
+    e.preventDefault();
+    setDropdownOpen(false);
+    setAdjustDialog(true);
+  };
+
+  const openRejectDialog = (e: Event) => {
+    e.preventDefault();
+    setDropdownOpen(false);
+    setShowRejectDialog(true);
+  };
+
+  // Accept both Radix's `Event` (from DropdownMenuItem onSelect) and
+  // React's MouseEvent (from <Button onClick>) so the same handler is
+  // safe to wire to both call sites.
+  const handleApproval = (e: Event | React.MouseEvent) => {
+    e.preventDefault();
+    setDropdownOpen(false);
+    if (onApproveClick) {
+      // Modal is hoisted to TasksTable — let it own the open state so the
+      // modal survives any row remount.
+      onApproveClick(effectiveRowData);
+    } else {
+      setShowApprove(true);
+    }
+  };
+  const handleReview = (e: Event | React.MouseEvent) => {
+    e.preventDefault();
+    setDropdownOpen(false);
+    setShowReview(true);
+  };
+
+  const handleEditClick = () => {
+    setDropdownOpen(false);
+    // `?from=approval` keeps the sidebar from auto-highlighting Outgoing
+    // (the edit route lives under /userRecords/) and lets editUserRecord
+    // resolve the fallback return URL when location.state is missing.
+    navigate(
+      `/record-management/userRecords/editUserRecord/${rowData?.record?.id}?from=approval`,
+      {
+        state: {
+          returnUrl: "/record-management/approval",
+          recordId: rowData?.record?.id,
+        },
+      },
+    );
+  };
+  const outgoingInstance = rowData?.outgoingHistories?.[0];
+
+  const isActiveStatus = effectiveRowData?.status === "active";
+  const canEditRecord = isActiveStatus && canRecordBeEditedOnWorkflow;
+  const canShowWorkflowActions =
+    effectiveRowData?.status !== ("Draft" as string) ||
+    rowData?.action === "send_back";
+  const canApproveRecord =
+    (approveVissible &&
+      sendExternal &&
+      effectiveRecordTypeKey === "external") ||
+    (approveVissible &&
+      sendInternal &&
+      effectiveRecordTypeKey === "internal") ||
+    (approveVissible &&
+      sendInternalMemo &&
+      effectiveRecordTypeKey === "internal_memo");
+  const hasInlineActions =
+    (canEditRecord || canShowWorkflowActions) &&
+    outgoingInstance?.action !== "send_back" &&
+    outgoingInstance?.action !== "send_to_ro" &&
+    outgoingInstance?.action !== "approve" &&
+    outgoingInstance?.action !== "reject";
+  return (
+    <>
+      {fromTable ? (
+        <div className="flex flex-wrap gap-2 items-center justify-start">
+          <Button
+            variant={"viewDetail"}
+            onClick={handleViewDetails}
+            className="min-w-[110px] text-sm sm:text-base"
+          >
+            {t("ApprovalPage.View Detail")}
+          </Button>
+
+          <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                className="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
+                aria-haspopup="menu"
+                aria-expanded={dropdownOpen}
+              >
+                <EllipsisVertical className="h-4 w-4" />
+                <span className="sr-only">
+                  {" "}
+                  {t("ApprovalPage.Open actions menu")}
+                </span>
+              </Button>
+            </DropdownMenuTrigger>
+
+            <DropdownMenuContent
+              align="end"
+              className="w-[200px] sm:w-[220px]"
+              onInteractOutside={(e) => {
+                const target = e.target as HTMLElement;
+                if (!target.closest('[role="dialog"]')) {
+                  setDropdownOpen(false);
+                }
+              }}
+            >
+              <DropdownMenuLabel className="text-sm sm:text-base">
+                {t("ApprovalPage.Actions")}
+              </DropdownMenuLabel>
+
+              {/* Show Edit for Draft status */}
+              {canEditRecord && (
+                <DropdownMenuItem
+                  onSelect={handleEditClick}
+                  className="cursor-pointer hover:!text-primary-700 !bg-transparent !transition-colors duration-200"
+                >
+                  <SquarePen className="mr-2 h-4 w-4 group-hover:text-white transition-colors duration-200" />
+                  {t("userRecord.Edit")}
+                </DropdownMenuItem>
+              )}
+
+              {/* Only show these if NOT Approved */}
+              {canShowWorkflowActions && (
+                <>
+                  {acceptVisible && (
+                    <DropdownMenuItem
+                      onSelect={openAcceptDialog}
+                      className="cursor-pointer hover:!text-primary-700 !bg-transparent !transition-colors duration-200"
+                    >
+                      <SearchCheck className="mr-2 h-4 w-4 group-hover:text-white transition-colors duration-200" />
+                      {t("statusBar.acceptForward")}
+                    </DropdownMenuItem>
+                  )}
+                  <DropdownMenuItem
+                    onSelect={openRejectDialog}
+                    className="cursor-pointer hover:!text-red-600 !bg-transparent !transition-colors duration-200"
+                  >
+                    <Banknote className="mr-2 h-4 w-4 text-red-600 group-hover:text-white transition-colors duration-200" />
+                    {t("statusBar.Reject")}
+                  </DropdownMenuItem>
+                  {!onReviewStatus && (
+                    <DropdownMenuItem
+                      onSelect={handleReview}
+                      className="cursor-pointer hover:!text-red-600 !bg-transparent !transition-colors duration-200"
+                    >
+                      <Banknote className="mr-2 h-4 w-4 text-red-600 group-hover:text-white transition-colors duration-200" />
+                      {t("statusBar.Under Review")}
+                    </DropdownMenuItem>
+                  )}
+
+                  <DropdownMenuItem
+                    onSelect={openAdjustDialog}
+                    className="cursor-pointer hover:!text-primary-700 !bg-transparent !transition-colors duration-200"
+                  >
+                    <FilePenLine className="mr-2 h-4 w-4 group-hover:text-white transition-colors duration-200" />
+                    {t("statusBar.Adjust")}
+                  </DropdownMenuItem>
+                  {canApproveRecord && (
+                    <DropdownMenuItem
+                      onSelect={handleApproval}
+                      className="cursor-pointer hover:!text-primary-700 !bg-transparent !transition-colors duration-200"
+                    >
+                      <CheckCircle2 className="mr-2 h-4 w-4 group-hover:text-white transition-colors duration-200" />
+                      {t("statusBar.Approve")}
+                    </DropdownMenuItem>
+                  )}
+                  {(rowData?.record?.statusKey === "Dispatched" ||
+                    (rowData?.record?.recordTypeKey === "internal_memo" &&
+                      rowData?.record?.statusKey === "Approved")) && (
+                    <IncomingInstanceDetail
+                      instanceId={rowData?.record?.id as string}
+                      instanceType={"outgoing"}
+                      rowData={rowData}
+                    />
+                  )}
+                </>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+          {(rowData?.record?.statusKey === "Dispatched" ||
+            (rowData?.record?.recordTypeKey === "internal_memo" &&
+              rowData?.record?.statusKey === "Approved")) && (
+            <IncomingInstanceDetail
+              instanceId={rowData?.record?.id as string}
+              instanceType={"outgoing"}
+              rowData={rowData}
+            />
+          )}
+        </div>
+      ) : (
+        <>
+          {canEditRecord && (
+            <div className="flex flex-wrap gap-2">
+              <Button
+                variant={getActionButtonVariant("Edit")}
+                onClick={handleEditClick}
+              >
+                <SquarePen className="h-4 w-4" />
+                <span>{t("userRecord.Edit")}</span>
+              </Button>
+            </div>
+          )}
+          {hasInlineActions && (
+            <div className="flex flex-wrap gap-2">
+              {canShowWorkflowActions && acceptVisible && (
+                <Button
+                  variant={getActionButtonVariant("Accept and Forward")}
+                  onClick={(e) => openAcceptDialog(e as any)}
+                >
+                  <SearchCheck className="h-4 w-4" />
+                  <span>{t("statusBar.acceptForward")}</span>
+                </Button>
+              )}
+
+              {canShowWorkflowActions && (
+                <Button
+                  variant={getActionButtonVariant("Reject")}
+                  onClick={(e) => openRejectDialog(e as any)}
+                >
+                  <Banknote className="h-4 w-4" />
+                  <span>{t("statusBar.Reject")}</span>
+                </Button>
+              )}
+
+              {canShowWorkflowActions && !onReviewStatus && (
+                <Button
+                  variant={getActionButtonVariant("Under Review")}
+                  onClick={handleReview}
+                >
+                  <Banknote className="h-4 w-4" />
+                  <span>{t("statusBar.Under Review")}</span>
+                </Button>
+              )}
+
+              {canShowWorkflowActions && (
+                <Button
+                  variant={getActionButtonVariant("Adjustment")}
+                  onClick={(e) => openAdjustDialog(e as any)}
+                >
+                  <FilePenLine className="h-4 w-4" />
+                  <span>{t("statusBar.Adjust")}</span>
+                </Button>
+              )}
+
+              {canShowWorkflowActions && canApproveRecord && (
+                <Button
+                  variant={getActionButtonVariant("Approve")}
+                  onClick={handleApproval}
+                >
+                  <CheckCircle2 className="h-4 w-4" />
+                  <span>{t("statusBar.Approve")}</span>
+                </Button>
+              )}
+            </div>
+          )}
+          {(rowData?.record?.statusKey === "Dispatched" ||
+            (rowData?.record?.recordTypeKey === "internal_memo" &&
+              rowData?.record?.statusKey === "Approved")) && (
+            <IncomingInstanceDetail
+              instanceId={rowData?.record?.id as string}
+              instanceType={"outgoing"}
+              rowData={rowData}
+              fromTable={false}
+            />
+          )}
+          {!hasInlineActions && (
+            <p className="text-sm text-gray-500 dark:text-gray-400 italic">
+              {t("userIncoming.noActionsAvailable", {
+                defaultValue: "No actions available for this record.",
+              })}
+            </p>
+          )}
+        </>
+      )}
+      {/* Modals — all driven off effectiveRowData so the workflow instance id
+          is correct in both table and detail-page modes. */}
+      {showAcceptDialog && (
+        <AcceptRecord
+          record={effectiveRowData}
+          onClose={() => {
+            setShowAcceptDialog(false);
+            refetchTable && refetchTable();
+            queryClient.invalidateQueries({ queryKey: ["approvalRecord"] });
+            queryClient.invalidateQueries({ queryKey: ["dashbordReport"] });
+          }}
+          onSuccess={() => {
+            setShowAcceptDialog(false);
+            navigate(`/record-management/approval`);
+          }}
+        />
+      )}
+      {showReview && (
+        <UnderReviewRecord
+          recordId={effectiveRowData?.id}
+          onClose={() => {
+            setShowReview(false);
+            refetchTable && refetchTable();
+            queryClient.invalidateQueries({ queryKey: ["reviewRecord"] });
+            queryClient.invalidateQueries({ queryKey: ["dashbordReport"] });
+          }}
+          onSuccess={() => {
+            setShowReview(false);
+            navigate(`/record-management/approval`);
+          }}
+        />
+      )}
+      {showAdjustDialog && (
+        <AdjustRecord
+          record={effectiveRowData as PendingApprovalDto}
+          onClose={() => {
+            setAdjustDialog(false);
+            refetchTable && refetchTable();
+            queryClient.invalidateQueries({ queryKey: ["approvalRecord"] });
+            queryClient.invalidateQueries({ queryKey: ["dashbordReport"] });
+          }}
+          onSuccess={() => {
+            setAdjustDialog(false);
+            navigate(`/record-management/approval`);
+          }}
+        />
+      )}
+
+      {showRejectDialog && (
+        <RejectRecord
+          record={effectiveRowData}
+          onClose={() => {
+            setShowRejectDialog(false);
+            refetchTable && refetchTable();
+            queryClient.invalidateQueries({ queryKey: ["approvalRecord"] });
+            queryClient.invalidateQueries({ queryKey: ["dashbordReport"] });
+          }}
+          onSuccess={() => {
+            setShowRejectDialog(false);
+            navigate(`/record-management/approval`);
+          }}
+        />
+      )}
+      {showApprove && (
+        <ApproveRecordPage
+          recordId={effectiveRowData?.record?.id ?? effectiveRowData?.id}
+          recordTypeKey={
+            effectiveRowData?.record?.recordTypeKey ??
+            effectiveRowData?.recordTypeKey
+          }
+          isWithTeamSignature={
+            effectiveRowData?.record?.isWithTeamSignature ??
+            effectiveRowData?.isWithTeamSignature
+          }
+          onSuccess={() => {
+            setShowApprove(false);
+            navigate(`/record-management/approval`);
+          }}
+          open={showApprove}
+          onClose={() => {
+            setShowApprove(false);
+            refetchTable && refetchTable();
+            queryClient.invalidateQueries({ queryKey: ["approvalRecord"] });
+            queryClient.invalidateQueries({ queryKey: ["pendingRecords"] });
+            queryClient.invalidateQueries({ queryKey: ["dashbordReport"] });
+          }}
+          preferredLanguage={
+            effectiveRowData?.record?.preferredLanguage ??
+            effectiveRowData?.preferredLanguage
+          }
+        />
+      )}
+    </>
+  );
+};
+
+export default ApproveRecordsActions;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/Approval/ApproveRecords/approveRecordsColumns.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/Approval/ApproveRecords/approveRecordsColumns.tsx
new file mode 100644
index 000000000..0398b4663
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/Approval/ApproveRecords/approveRecordsColumns.tsx
@@ -0,0 +1,370 @@
+import { ColumnDef } from "@tanstack/react-table";
+
+import { renderStatus } from "@/record-management/utils/renderDetails";
+import { t } from "i18next";
+import { PendingApprovalDto } from "@/record-management/dto/approval/approvalRecordsDto";
+import { concat } from "lodash";
+import i18n from "@/i18n";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+import ApproveRecordsActions from "./approveRecordsActions";
+import { BellRing } from "lucide-react";
+import { DataTableColumnHeader } from "@/shared/common/ui/dataTableColumnHeader";
+
+// Utility component to show tooltip on hover
+const OverflowTooltip = ({
+  children,
+  text,
+  maxWidth = 200,
+}: {
+  children: React.ReactNode;
+  text: string;
+  maxWidth?: number;
+}) => {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <div
+          className="overflow-hidden text-ellipsis whitespace-nowrap"
+          style={{ maxWidth: `${maxWidth}px` }}
+        >
+          {children}
+        </div>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p className="max-w-xs break-words">{text}</p>
+      </TooltipContent>
+    </Tooltip>
+  );
+};
+
+const ApproveRecordsColumns = (
+  refetch: () => void,
+  localizedName: (name?: { am: string; en: string }) => string,
+  pageNo: number,
+  canRecordBeEditedOnWorkflow: boolean,
+  onApproveClick?: (row: PendingApprovalDto) => void,
+): ColumnDef<PendingApprovalDto>[] => [
+  {
+    id: "Subject",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={t("ApprovalPage.Subject")}
+      />
+    ),
+    cell: ({ row }) => {
+      const firstRecord = row.original;
+      // original is an array
+      const contentArray = Array.isArray(firstRecord?.record?.content)
+        ? firstRecord.record.content
+        : [];
+      const subject = contentArray[0]?.subject ?? t("ApprovalPage.No Subject");
+
+      return (
+        <OverflowTooltip text={subject} maxWidth={200}>
+          <div className="overflow-hidden text-ellipsis whitespace-nowrap">
+            {subject}
+          </div>
+        </OverflowTooltip>
+      );
+    },
+    enableHiding: true,
+    accessorKey: "Subject",
+  },
+  {
+    id: "letterName",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={t("ApprovalPage.FileName")}
+      />
+    ),
+    cell: ({ row }) => {
+      const record = row.original;
+      const fileName = record.letterName || record.record.letterName || "N/A";
+
+      return (
+        <OverflowTooltip text={fileName} maxWidth={150}>
+          <div className="overflow-hidden text-ellipsis whitespace-nowrap">
+            {fileName}
+          </div>
+        </OverflowTooltip>
+      );
+    },
+    enableHiding: true,
+    accessorKey: "FileName",
+  },
+  {
+    id: "sendingDepartment",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={t("ApprovalPage.SendingDepartment")}
+      />
+    ),
+    cell: ({ row }) => {
+      // Look in every spot the workflow payload is known to put initiator
+      // info. The API has been inconsistent here — sometimes it's on the
+      // record, sometimes on the content node, sometimes on the row itself.
+      const rowAny: any = row.original;
+      const record: any = rowAny?.record;
+      const content: any = Array.isArray(record?.content) ? record.content[0] : undefined;
+      const candidates: any[] = [
+        record?.initiator,
+        content?.initiator,
+        content?.record?.initiator,
+        rowAny?.initiator,
+        rowAny?.employeePosition,
+        rowAny?.fromEmployeePosition,
+      ];
+      const initiator = candidates.find(Boolean);
+
+      const positionName = initiator
+        ? localizedName(initiator.position?.name ?? initiator.name)
+        : "";
+
+      if (!positionName) {
+        return <div>-</div>;
+      }
+
+      return (
+        <OverflowTooltip text={positionName} maxWidth={200}>
+          <div className="overflow-hidden text-ellipsis whitespace-nowrap">
+            {positionName}
+          </div>
+        </OverflowTooltip>
+      );
+    },
+    enableHiding: true,
+    accessorKey: "SendingDepartment",
+  },
+  {
+    accessorKey: "Receiver",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={t("ApprovalPage.Receiver")}
+      />
+    ),
+    cell: ({ row }) => {
+      const rowAny: any = row.original;
+      const record: any = rowAny?.record;
+      const content: any = Array.isArray(record?.content) ? record.content[0] : undefined;
+
+      // Pull the first array we can find at any of the known paths, so the
+      // column tolerates inconsistent backend shapes.
+      const pickArray = (...paths: any[]): any[] =>
+        paths.find((p) => Array.isArray(p) && p.length > 0) ?? [];
+
+      let receivers: string[] = [];
+
+      if (record?.recordTypeKey === "external") {
+        const receivingUnitsSource = pickArray(
+          record?.receivingUnits,
+          content?.receivingUnits,
+          content?.record?.receivingUnits,
+          rowAny?.receivingUnits,
+        );
+
+        const units0 = receivingUnitsSource.map(
+          (unitItem: any) =>
+            localizedName(unitItem?.unit?.name) ||
+            localizedName(unitItem?.name) ||
+            unitItem?.unit?.key ||
+            "",
+        );
+        const nonSmart = pickArray(
+          content?.nonSmartOfficeReceivers,
+          record?.nonSmartOfficeReceivers,
+        );
+        const units1 = nonSmart.map((u: any) =>
+          typeof u === "string" ? u : u?.name || "",
+        );
+        receivers = concat(units0, units1).filter(Boolean);
+      } else {
+        const empSource = pickArray(
+          content?.receiverEmployees,
+          record?.receiverEmployees,
+          content?.record?.receiverEmployees,
+          rowAny?.receiverEmployees,
+        );
+        const posSource = pickArray(
+          content?.receiverPositions,
+          record?.receiverPositions,
+          content?.record?.receiverPositions,
+          rowAny?.receiverPositions,
+        );
+
+        const employeeNames = empSource.map((emp: any) =>
+          localizedName(
+            emp?.employeePosition?.employee?.name ?? emp?.employee?.name,
+          ),
+        );
+        const positionNames = posSource.map((rp: any) =>
+          localizedName(rp?.position?.name ?? rp?.name),
+        );
+
+        receivers = [...employeeNames, ...positionNames].filter(Boolean);
+      }
+
+      return (
+        <div className="space-y-1">
+          {receivers.length > 0 ? (
+            receivers.map((name, i) => <div key={i}>{name}</div>)
+          ) : (
+            <div>{"-"}</div>
+          )}
+        </div>
+      );
+    },
+    enableHiding: true,
+  },
+  {
+    accessorKey: "recordStatus",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={t("ApprovalPage.RecordStatus")}
+      />
+    ),
+    cell: ({ row }) => {
+      return (
+        <div>
+          {renderStatus(
+            row.original.record?.statusKey,
+            row.original.record?.statusKey ?? "Pending",
+          )}
+        </div>
+      );
+    },
+    enableHiding: true,
+  },
+  {
+    accessorKey: "TaskStatus",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title={t("ApprovalPage.Status")} />
+    ),
+    cell: ({ row }) => {
+      const isonReview = row.original.onReview;
+      return (
+        <div>
+          {isonReview
+            ? renderStatus("onReview", "onReview")
+            : renderStatus(row.original.status, row.original.status)}
+        </div>
+      );
+    },
+    enableHiding: true,
+  },
+  {
+    accessorKey: "submittedDate",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title={t("ApprovalPage.Date")} />
+    ),
+    cell: ({ row }) => {
+      const original = row.original;
+      const record = original.record;
+
+      const isAmharic = i18n.language === "am";
+      const amharicDate = record?.amharicSubmittedDate;
+      const submittedDate = record?.submittedDate ?? original.createdAt;
+
+      if (isAmharic && amharicDate) {
+        return <div>{amharicDate}</div>;
+      }
+
+      const formattedDate = submittedDate
+        ? new Date(submittedDate).toLocaleDateString("en-US", {
+            month: "short", // "Aug"
+            day: "numeric", // "7"
+            year: "numeric", // "2025"
+            hour: "numeric", // "2 PM"
+            minute: "numeric", // "30"
+          })
+        : "-";
+
+      return <div>{formattedDate}</div>;
+    },
+  },
+  {
+    id: "isUrgent",
+    header: () => t("userIncoming.Is Urgent"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      const isUrgent = rowData.record.isUrgent;
+
+      return (
+        <span
+          className={`relative inline-flex items-center px-2 py-1 rounded-md text-sm font-semibold ${
+            isUrgent
+              ? "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/50 dark:text-yellow-300"
+              : "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300"
+          }`}
+        >
+          {isUrgent && (
+            <span className="absolute -top-0 -right-5 flex h-4 w-4">
+              {/* Pulsing ring */}
+              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
+
+              {/* Bell icon stays visible */}
+              <span className="relative inline-flex items-center justify-center pt-3">
+                <BellRing className="h-5 w-5 text-red-500" />
+              </span>
+            </span>
+          )}
+
+          {isUrgent ? t("common.yes") : t("common.no")}
+        </span>
+      );
+    },
+    enableHiding: true,
+    accessorKey: "isUrgent",
+  },
+  {
+    id: "isSecured",
+    header: () => t("userIncoming.Is Secured"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      const isSecured = rowData.record.isSecured;
+
+      return (
+        <span
+          className={`px-2 py-1 rounded-md text-xs font-semibold ${
+            isSecured
+              ? "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/50 dark:text-yellow-300"
+              : "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300"
+          }`}
+        >
+          {isSecured ? t("common.yes") : t("common.no")}
+        </span>
+      );
+    },
+    enableHiding: true,
+    accessorKey: "isSecured",
+  },
+  {
+    id: "Actions",
+    header: () => t("ApprovalPage.Actions"),
+    accessorKey: "Actions",
+    cell: ({ row }) => {
+      const rowData = row.original;
+      return (
+        <ApproveRecordsActions
+          rowData={rowData as unknown as PendingApprovalDto}
+          refetchTable={refetch}
+          pageIndex={pageNo}
+          fromTable={true}
+          canRecordBeEditedOnWorkflow={canRecordBeEditedOnWorkflow}
+          onApproveClick={onApproveClick}
+        />
+      );
+    },
+    enableHiding: true,
+  },
+];
+
+export default ApproveRecordsColumns;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/Approval/ApproveRecords/myApprovalColumns.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/Approval/ApproveRecords/myApprovalColumns.tsx
new file mode 100644
index 000000000..1521f6c9f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/Approval/ApproveRecords/myApprovalColumns.tsx
@@ -0,0 +1,313 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { renderStatus } from "@/record-management/utils/renderDetails";
+import { t } from "i18next";
+import { Button } from "@/shared/common/ui/button";
+import { NavigateFunction } from "react-router-dom";
+import { concat } from "lodash";
+import i18n from "i18next";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+import { useState, useRef, useEffect } from "react";
+import { DataTableColumnHeader } from "@/shared/common/ui/dataTableColumnHeader";
+import { ProcessedApprovalRecords } from "@/record-management/dto/approval/newApprovalRecordsDto";
+import IncomingInstanceDetail from "../../userIncoming/IncomingInstanceDetail";
+
+// Utility component to show tooltip only when text overflows
+const OverflowTooltip = ({
+  children,
+  text,
+  maxWidth = 200,
+}: {
+  children: React.ReactNode;
+  text: string;
+  maxWidth?: number;
+}) => {
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const textRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const checkOverflow = () => {
+      if (textRef.current) {
+        const element = textRef.current;
+        setIsOverflowing(element.scrollWidth > element.clientWidth);
+      }
+    };
+
+    checkOverflow();
+    window.addEventListener("resize", checkOverflow);
+    return () => window.removeEventListener("resize", checkOverflow);
+  }, [text]);
+
+  if (isOverflowing) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div
+            ref={textRef}
+            className="overflow-hidden text-ellipsis whitespace-nowrap"
+            style={{ maxWidth: `${maxWidth}px` }}
+          >
+            {children}
+          </div>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p className="max-w-xs break-words">{text}</p>
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <div
+      ref={textRef}
+      className="overflow-hidden text-ellipsis whitespace-nowrap"
+      style={{ maxWidth: `${maxWidth}px` }}
+    >
+      {children}
+    </div>
+  );
+};
+
+const MyApprovalColumns = (
+  navigate: NavigateFunction,
+  localizedName: (name?: { am: string; en: string }) => string,
+  pageNo: number,
+): ColumnDef<ProcessedApprovalRecords>[] => [
+  {
+    id: "letterName",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={t("ApprovalPage.FileName")}
+      />
+    ),
+    cell: ({ row }) => {
+      const record = row.original as ProcessedApprovalRecords;
+      // Fix: Access letterName from the nested record object
+      const fileName = record.letterName || "N/A";
+
+      return (
+        <OverflowTooltip text={fileName} maxWidth={150}>
+          <div className="overflow-hidden text-ellipsis whitespace-nowrap">
+            {fileName}
+          </div>
+        </OverflowTooltip>
+      );
+    },
+    enableHiding: true,
+    accessorKey: "FileName",
+  },
+  {
+    id: "sendingDepartment",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={t("ApprovalPage.SendingDepartment")}
+      />
+    ),
+    cell: ({ row }) => {
+      const record = row.original as ProcessedApprovalRecords;
+      const initiator = record.initiator;
+
+      if (!initiator) {
+        return <div>-</div>;
+      }
+
+      const positionName = localizedName(initiator.position?.name);
+
+      return (
+        <OverflowTooltip text={positionName} maxWidth={200}>
+          <div className="overflow-hidden text-ellipsis whitespace-nowrap">
+            {positionName}
+          </div>
+        </OverflowTooltip>
+      );
+    },
+    enableHiding: true,
+    accessorKey: "SendingDepartment",
+  },
+  {
+    id: "subject",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={t("ApprovalPage.Subject")}
+      />
+    ),
+    cell: ({ row }) => {
+      const record = row.original as ProcessedApprovalRecords;
+      const subject = record.content?.[0]?.subject;
+
+      return (
+        <OverflowTooltip text={subject} maxWidth={200}>
+          <div className="overflow-hidden text-ellipsis whitespace-nowrap">
+            {subject}
+          </div>
+        </OverflowTooltip>
+      );
+    },
+    enableHiding: true,
+    accessorKey: "Subject",
+  },
+  {
+    id: "Receiver",
+    accessorKey: "Receiver",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={t("ApprovalPage.Receiver")}
+      />
+    ),
+    cell: ({ row }) => {
+      const record = row.original as ProcessedApprovalRecords;
+      const isExternal = record?.recordTypeKey === "external";
+      if (isExternal) {
+        const units0 = record?.receivingUnits.map(
+          (unitItem: any) =>
+            localizedName(unitItem.unit?.name) || unitItem.unit?.key || "N/A",
+        );
+        const units1 =
+          record.content?.[0]?.nonSmartReceivers?.map(
+            (unitItem: any) => unitItem || "N/A",
+          ) || [];
+        const unitNames = concat(units0, units1);
+        return (
+          <div className="space-y-1">
+            {unitNames?.length ? (
+              unitNames.map((name, idx) => <div key={idx}>{name}</div>)
+            ) : (
+              <div>No Department</div>
+            )}
+          </div>
+        );
+      } else {
+        const employeeNames = record.content?.[0]?.receiverEmployees
+          ?.map((emp) => localizedName(emp?.employeePosition.employee.name))
+          .filter(Boolean);
+
+        const positionNames = record.content?.[0]?.receiverPositions
+          ?.map((pos) => localizedName(pos?.position.name))
+          .filter(Boolean);
+        const receivers = [...employeeNames, ...positionNames];
+        return (
+          <div className="space-y-1">
+            {receivers?.length ? (
+              receivers.map((name, idx) => <div key={idx}>{name}</div>)
+            ) : (
+              <div>No Position</div>
+            )}
+          </div>
+        );
+      }
+    },
+    enableHiding: true,
+  },
+  {
+    accessorKey: "submittedDate",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title={t("ApprovalPage.Date")} />
+    ),
+    cell: ({ row }) => {
+      const original = row.original;
+
+      const isAmharic = i18n.language === "am";
+      // Use amharicCreatedAt from the root level of the response for Amharic localization
+      const amharicDate =
+        original.amharicCreatedAt || original?.amharicSubmittedDate;
+      const submittedDate = original?.submittedDate ?? original.createdAt;
+
+      if (isAmharic && amharicDate) {
+        return <div>{amharicDate}</div>;
+      }
+
+      const formattedDate = submittedDate
+        ? new Date(submittedDate).toLocaleDateString("en-US", {
+            month: "short", // "Aug"
+            day: "numeric", // "7"
+            year: "numeric", // "2025"
+            hour: "numeric", // "2 PM"
+            minute: "numeric", // "30"
+          })
+        : "-";
+
+      return <div>{formattedDate}</div>;
+    },
+  },
+  {
+    accessorKey: "recordStatus",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={t("ApprovalPage.RecordStatus")}
+      />
+    ),
+    cell: ({ row }) => {
+      return (
+        <div>
+          {renderStatus(
+            row.original?.statusKey ?? "Pending",
+            row.original?.statusKey ?? "Pending",
+          )}
+        </div>
+      );
+    },
+    enableHiding: true,
+  },
+  {
+    accessorKey: "TaskStatus",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title={t("ApprovalPage.Status")} />
+    ),
+    cell: ({ row }) => {
+      const taskStatus =
+        row.original?.outgoingHistories?.[0]?.action ?? "Pending";
+      return <div>{renderStatus(taskStatus, taskStatus)}</div>;
+    },
+    enableHiding: true,
+  },
+  {
+    id: "Actions",
+    header: () => t("ApprovalPage.Actions"),
+    accessorKey: "Actions",
+    cell: ({ row }) => {
+      const rowData = row.original;
+
+      const handleViewDetails = () => {
+        navigate(
+          `/record-management/viewProcessedApproval/${rowData?.id}/?page=${pageNo}`,
+          {
+            // The approval-task shape (with task id, status, nested .record) isn't
+            // recoverable from a record id alone, so hand it to the detail page so
+            // action buttons there can act on the correct workflow instance.
+            state: { approvalRow: rowData },
+          },
+        );
+      };
+      return (
+        <div className="flex items-center justify-center gap-2">
+          <Button
+            variant={"viewDetail"}
+            onClick={handleViewDetails}
+            className="min-w-[110px] text-sm sm:text-base"
+          >
+            {t("ApprovalPage.View Detail")}
+          </Button>
+          {rowData?.statusKey === "Dispatched" && (
+            <IncomingInstanceDetail
+              instanceId={rowData?.id as string}
+              instanceType={"outgoing"}
+              rowData={rowData}
+              fromTable={true}
+            />
+          )}
+        </div>
+      );
+    },
+    enableHiding: true,
+  },
+];
+
+export default MyApprovalColumns;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/Approval/ApproveRecords/myApprovalRecordsActions.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/Approval/ApproveRecords/myApprovalRecordsActions.tsx
new file mode 100644
index 000000000..d053d11fa
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/Approval/ApproveRecords/myApprovalRecordsActions.tsx
@@ -0,0 +1,25 @@
+import { ProcessedApprovalRecords } from "@/record-management/dto/approval/newApprovalRecordsDto";
+import IncomingInstanceDetail from "../../userIncoming/IncomingInstanceDetail";
+
+const MyApprovaRecordsActions = ({
+  rowData,
+  fromTable,
+}: {
+  rowData: ProcessedApprovalRecords;
+  fromTable: boolean;
+}) => {
+  return (
+    rowData?.statusKey === "Dispatched" && (
+      <div className="flex items-center justify-center gap-2">
+        <IncomingInstanceDetail
+          instanceId={rowData?.id as string}
+          instanceType={"outgoing"}
+          rowData={rowData}
+          fromTable={fromTable}
+        />
+      </div>
+    )
+  );
+};
+
+export default MyApprovaRecordsActions;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/Approval/approve/AcceptRecord.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/Approval/approve/AcceptRecord.tsx
new file mode 100644
index 000000000..b1644de3c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/Approval/approve/AcceptRecord.tsx
@@ -0,0 +1,68 @@
+import { useCallback } from "react";
+import { toast } from "sonner";
+import { useApprovalTasks } from "../../hooks/useApprovalTasks";
+import EnhancedDynamicModal from "@/record-management/common/EnhancedDynamicModal";
+
+import { t } from "i18next";
+import { AdjustmentDto } from "@/record-management/dto/userRecords/userRecordsDto";
+import { PendingApprovalDto } from "@/record-management/dto/approval/approvalRecordsDto";
+
+interface AcceptRecordProps {
+  record: PendingApprovalDto;
+  onSuccess: () => void;
+  onClose: () => void;
+}
+
+const AcceptRecord: React.FC<AcceptRecordProps> = ({
+  record,
+  onSuccess,
+  onClose,
+}) => {
+  const { refetch, acceptRecord } = useApprovalTasks(undefined);
+
+  const handleAccept = useCallback(
+    async (data: any) => {
+      if (!record) throw new Error("Invalid record");
+
+      const requestBody: AdjustmentDto = {
+        instanceId: record.id,
+        action: "approve",
+        comment: data.remarks || "No Comment/አስተያየት የለም", // get from passed data
+      };
+
+      await acceptRecord(requestBody);
+      await refetch();
+
+      toast.success(t("ApprovalPage.Record accepted successfully"));
+      onSuccess();
+    },
+    [record, acceptRecord, refetch, onSuccess]
+  );
+
+  return (
+    <EnhancedDynamicModal
+      open={true}
+      onClose={onClose}
+      title={t("ApprovalPage.Accept Record")}
+      actionConfig={{
+        type: "accept",
+        onAction: handleAccept,
+        confirmText: t("ApprovalPage.confirmApprove"),
+        confirmVariant: "default",
+      }}
+      formConfig={{
+        fields: [
+          {
+            type: "textarea",
+            name: "remarks",
+            label: t("ApprovalPage.Remarks"),
+            placeholder: t("ApprovalPage.Remarks"),
+            required: false,
+          },
+        ],
+      }}
+    />
+  );
+};
+
+export default AcceptRecord;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/Approval/approve/AdjustRecord.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/Approval/approve/AdjustRecord.tsx
new file mode 100644
index 000000000..a92c54734
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/Approval/approve/AdjustRecord.tsx
@@ -0,0 +1,100 @@
+import { useState, useCallback, useRef } from "react";
+import { toast } from "sonner";
+import { useApprovalTasks } from "../../hooks/useApprovalTasks";
+
+import EnhancedDynamicModal from "@/record-management/common/EnhancedDynamicModal";
+import { PendingApprovalDto } from "@/record-management/dto/approval/approvalRecordsDto";
+import { t } from "i18next";
+
+interface AcceptRecordProps {
+  record: PendingApprovalDto;
+  onSuccess: () => void;
+  onClose: () => void;
+}
+
+const AdjustRecord: React.FC<AcceptRecordProps> = ({
+  record,
+  onSuccess,
+  onClose,
+}) => {
+  const { refetch, adjustRecord } = useApprovalTasks();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // handleAccept now receives the form data from the modal
+  const handleAccept = useCallback(
+    async (data?: Record<string, any>) => {
+      if (!record) {
+        toast.error("Invalid record");
+        return;
+      }
+
+      const remarks = data?.remarks?.trim() ?? "";
+
+      // Validate that remarks are not empty
+      if (!remarks) {
+        toast.error(t("ApprovalPage.remarkRequired", "Remark is required"));
+        return;
+      }
+
+      setIsSubmitting(true);
+
+      try {
+        const requestBody = {
+          instanceId: record.id,
+          action: "send_back",
+          comment: remarks,
+          goBackTo: undefined,
+        };
+
+        await adjustRecord(requestBody);
+        await refetch();
+
+        toast.success(t("ApprovalPage.Record adjusted successfully"));
+        onSuccess();
+      } catch (error) {
+        console.error("Failed to adjust record:", error);
+        toast.error(
+          t("ApprovalPage.adjustmentFailed", "Failed to adjust record"),
+        );
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [record, adjustRecord, refetch, onSuccess],
+  );
+
+  return (
+    <EnhancedDynamicModal
+      open={true}
+      onClose={onClose}
+      title={t("ApprovalPage.Adjust Record")}
+      actionConfig={{
+        type: "adjust",
+        confirmText: t("ApprovalPage.confirmAdjustment"),
+        confirmVariant: "default",
+        onAction: handleAccept,
+        disabled: isSubmitting,
+      }}
+      formConfig={{
+        fields: [
+          {
+            type: "textarea",
+            name: "remarks",
+            label: t("ApprovalPage.Remark"),
+            required: true,
+            placeholder: t("ApprovalPage.Remark"),
+          
+            rules: {
+              required: {
+                value: true,
+                message: t("ApprovalPage.remarkRequired", "Remark is required"),
+              },
+            },
+          },
+        ],
+      }}
+    />
+  );
+};
+
+export default AdjustRecord;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/Approval/approve/ApprovalRecordSchema.ts b/apps/edr-freight-web/backoffice/src/record-management/components/Approval/approve/ApprovalRecordSchema.ts
new file mode 100644
index 000000000..571f9d1ed
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/Approval/approve/ApprovalRecordSchema.ts
@@ -0,0 +1,13 @@
+
+// approveRecordSchema.ts
+import { z } from "zod";
+
+import { t } from "i18next";
+
+export const ApproveRecordSchema = z.object({
+  teeter: z.string().min(1, t('ApprovalPage.Please select or upload a teeter'),),
+  signature: z.string().min(1, t('ApprovalPage.Please select or upload a signature'),),
+ 
+});
+
+export type ApproveRecordFormValues = z.infer<typeof ApproveRecordSchema>;
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/Approval/approve/UnderReviewRecord.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/Approval/approve/UnderReviewRecord.tsx
new file mode 100644
index 000000000..f97ec0896
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/Approval/approve/UnderReviewRecord.tsx
@@ -0,0 +1,66 @@
+import React, { useCallback, useState } from "react";
+import { toast } from "sonner";
+import EnhancedDynamicModal from "@/record-management/common/EnhancedDynamicModal";
+import Loader from "@/record-management/components/Loader/loader";
+import { useTranslation } from "react-i18next";
+import { useApprovalTasks } from "../../hooks/useApprovalTasks";
+
+interface UnderReviewRecordProps {
+  recordId: string;
+
+  onSuccess: () => void;
+  onClose: () => void;
+}
+
+const UnderReviewRecord: React.FC<UnderReviewRecordProps> = ({
+  recordId,
+
+  onSuccess,
+  onClose,
+}) => {
+  const { makeRecordUnderReview, refetch } = useApprovalTasks();
+  const [loading, setLoading] = useState(false);
+  const { t } = useTranslation();
+
+  const handleMakeReview = useCallback(async () => {
+    if (!recordId) {
+      toast.error("Invalid record ID");
+      return;
+    }
+    try {
+      setLoading(true);
+
+      await makeRecordUnderReview({
+        id: recordId,
+      });
+      await refetch();
+      onSuccess();
+      toast.success(t("userRecord.Record forwarded successfully"));
+    } catch (error) {
+      toast.error(t("userRecord.Failed to forward the record"));
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  }, [recordId, makeRecordUnderReview, refetch, onSuccess]);
+
+  return (
+    <>
+      <EnhancedDynamicModal
+        open={true}
+        onClose={onClose}
+        title={t("userRecord.Make Review")}
+        actionConfig={{
+          type: "forward",
+          onAction: handleMakeReview,
+          confirmText: t("userRecord.Confirm Review"),
+          confirmVariant: "default",
+          isLoading: false, // disable button while loading
+        }}
+      />
+      {loading && <Loader mode="inline" className="mt-2" showLabel={false} />}
+    </>
+  );
+};
+
+export default UnderReviewRecord;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/Approval/approve/approveRecordPage.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/Approval/approve/approveRecordPage.tsx
new file mode 100644
index 000000000..693a8777b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/Approval/approve/approveRecordPage.tsx
@@ -0,0 +1,620 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useForm, Controller, type FieldErrors } from "react-hook-form";
+import { toast } from "sonner";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { Switch } from "@/shared/common/ui/switch";
+import { Textarea } from "@/shared/common/ui/textarea";
+import { useApprovalTasks } from "../../hooks/useApprovalTasks";
+import { UploadedTeeter } from "../../Settings/uploadTeeterandSingature";
+
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { useUnitConfiguration } from "@/shared/hooks/useUnitConfiguration";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import {
+  useSignatureListWithPresigned,
+  useTeetersListWithPresigned,
+} from "../../hooks/useSignatureAndTeeterWithPresigned";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { usePositionPrefixes } from "../../hooks/usePositionPrefixes";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import i18n from "@/i18n";
+import { getNoStampsForLanguageMessage } from "@/record-management/utils/stampMessages";
+
+interface ApproveRecordProps {
+  open: boolean;
+  onClose: () => void;
+  recordId: string;
+  onSuccess: () => void;
+  recordTypeKey?: string;
+  referenceNumber?: string;
+  isWithTeamSignature?: boolean;
+  preferredLanguage?: string;
+}
+
+type ApproveFormValues = {
+  reason: string;
+  selectedTeeter: string;
+  selectedSignature: string;
+  positionPrefix?: string;
+  isWithTeamSignature: boolean;
+};
+
+interface UploadedSignature {
+  id: string;
+  url: string;
+  name?: string;
+}
+
+const ApproveRecordModal: React.FC<ApproveRecordProps> = ({
+  open,
+  onClose,
+  recordId,
+  onSuccess,
+  recordTypeKey = "external",
+  referenceNumber,
+  isWithTeamSignature: recordIsWithTeamSignature = false,
+  preferredLanguage,
+}) => {
+  const { sendToRo, sendToRoLoading, refetch } = useApprovalTasks();
+  const [uploadedTeeters, setUploadedTeeters] = useState<UploadedTeeter[]>([]);
+  const [signatures, setSignatures] = useState<UploadedSignature[]>([]);
+  const [defaultSignature, setDefaultSignature] = useState<
+    string | undefined
+  >();
+  const [selectedTeeterUrl, setSelectedTeeterUrl] = useState<string>("");
+  const [selectedSignatureUrl, setSelectedSignatureUrl] = useState<string>("");
+  const teeterRef = useRef<HTMLDivElement>(null);
+  const positionPrefixRef = useRef<HTMLDivElement>(null);
+  const { t } = useTranslation();
+  const effectivePreferredLanguage =
+    preferredLanguage === "am" || preferredLanguage === "en"
+      ? preferredLanguage
+      : preferredLanguage?.toLowerCase().startsWith("am")
+        ? "am"
+        : preferredLanguage?.toLowerCase().startsWith("en")
+          ? "en"
+          : i18n.language?.startsWith("am")
+            ? "am"
+            : "en";
+  const { handleError } = useErrorHandler(t);
+  const { control, handleSubmit, reset, setValue, watch } =
+    useForm<ApproveFormValues>({
+      defaultValues: {
+        reason: "",
+        selectedTeeter: undefined,
+        selectedSignature: undefined,
+        positionPrefix: undefined,
+        isWithTeamSignature: recordIsWithTeamSignature,
+      },
+    });
+
+  const selectedTeeter = watch("selectedTeeter");
+  const selectedSignature = watch("selectedSignature");
+
+  const { userDetails } = useAuthUser();
+  const employeeId = userDetails?.employee?.[0]?.id ?? "";
+  const unitId = userDetails?.employee?.[0]?.unitId ?? "";
+  const positionIdFromMetadata = userDetails?.employee?.[0]?.positions?.[0]?.id;
+  const localizedName = useLocalizedName(preferredLanguage);
+  const { data: unitConfigData } = useUnitConfiguration(unitId, {
+    enabled: !!unitId,
+  });
+  const shouldCollaboratorAlwaysSign =
+    unitConfigData?.data?.items?.[0]?.shouldCollaboratorAlwaysSign ?? false;
+  const canPositionBasedReferenceBeUsedForAllTypes =
+    unitConfigData?.data?.items?.[0]
+      ?.canPositionBasedReferenceBeUsedForAllTypes ?? false;
+  const isInternalMemoRecord = recordTypeKey === "internal_memo";
+  const canInternalMemoRequirePositionBasedReferenceNumber =
+    unitConfigData?.data?.items?.[0]
+      ?.canInternalMemoRequirePositionBasedReferenceNumber ?? false;
+  const hasReferenceNumber = Boolean(referenceNumber?.trim());
+  const shouldShowPositionPrefixSelector =
+    !hasReferenceNumber &&
+    (canPositionBasedReferenceBeUsedForAllTypes || isInternalMemoRecord);
+
+  const isPositionPrefixRequired =
+    !hasReferenceNumber &&
+    isInternalMemoRecord &&
+    canInternalMemoRequirePositionBasedReferenceNumber;
+
+  // When shouldCollaboratorAlwaysSign is on, force isWithTeamSignature to true
+  useEffect(() => {
+    if (shouldCollaboratorAlwaysSign) {
+      setValue("isWithTeamSignature", true);
+    }
+  }, [shouldCollaboratorAlwaysSign, setValue]);
+
+  // Clear position prefix if selector shouldn't be shown
+  useEffect(() => {
+    if (!shouldShowPositionPrefixSelector) {
+      setValue("positionPrefix", "");
+    }
+  }, [setValue, shouldShowPositionPrefixSelector]);
+
+  const { data: signatureData } = useSignatureListWithPresigned(employeeId);
+  const locale: "am" | "en" = (preferredLanguage ?? "")
+    .toLowerCase()
+    .startsWith("am")
+    ? "am"
+    : "en";
+  const { data: teeterData } = useTeetersListWithPresigned(locale);
+  const { data: positionPrefixesData } = usePositionPrefixes(
+    unitId,
+    recordTypeKey,
+    positionIdFromMetadata,
+  );
+
+  // Handle Teeter data
+  useEffect(() => {
+    const teetersArray = Array.isArray(teeterData)
+      ? teeterData
+      : teeterData?.presignedTeeters;
+
+    if (!teetersArray?.length) return;
+
+    setUploadedTeeters(teetersArray);
+    const match =
+      teetersArray.find((t) => t.locale === locale) ??
+      (teetersArray.length === 1 ? teetersArray[0] : null);
+    if (match) {
+      setValue("selectedTeeter", match.id);
+      setSelectedTeeterUrl(match.url);
+    }
+  }, [teeterData, setValue, locale]);
+
+  // Handle Signature data
+  useEffect(() => {
+    if (!signatureData) return;
+
+    const currentItem = signatureData.items?.find(
+      (item) => item.isCurrent && item.uploadedSuccessfully,
+    );
+
+    if (currentItem && signatureData.presignedSignatureUrl) {
+      const validSignatures = [
+        {
+          id: currentItem.id,
+          url: signatureData.presignedSignatureUrl,
+          name: currentItem.fileInfo.originalname,
+        },
+      ];
+
+      setSignatures(validSignatures);
+      setDefaultSignature(currentItem.id);
+      setValue("selectedSignature", currentItem.id);
+      setSelectedSignatureUrl(signatureData.presignedSignatureUrl);
+    }
+  }, [signatureData, setValue]);
+
+  useEffect(() => {
+    if (selectedTeeter) {
+      const teeter = uploadedTeeters.find((t) => t.id === selectedTeeter);
+      setSelectedTeeterUrl(teeter?.url || "");
+    }
+  }, [selectedTeeter, uploadedTeeters]);
+
+  useEffect(() => {
+    if (selectedSignature) {
+      const signature = signatures.find((s) => s.id === selectedSignature);
+      setSelectedSignatureUrl(signature?.url || "");
+    }
+  }, [selectedSignature, signatures]);
+
+  const onError = (errors: FieldErrors<ApproveFormValues>) => {
+    if (errors.selectedTeeter) {
+      teeterRef.current?.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+      return;
+    }
+
+    if (errors.positionPrefix) {
+      positionPrefixRef.current?.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    }
+  };
+
+  const onSubmit = async (data: ApproveFormValues) => {
+    if (!recordId) {
+      toast.error("Invalid record ID");
+      return;
+    }
+
+    if (!data.selectedTeeter) {
+      toast.error(t("ApprovalPage.selectStamp"));
+      return;
+    }
+
+    if (isPositionPrefixRequired && !data.positionPrefix) {
+      toast.error(
+        t(
+          "ApprovalPage.positionPrefixRequired",
+          "Reference number selection is required",
+        ),
+      );
+      return;
+    }
+
+    try {
+      await Promise.all([
+        sendToRo({
+          id: recordId,
+          stampId: data.selectedTeeter || undefined,
+          signatureId: data.selectedSignature || defaultSignature,
+          note: data.reason ? data.reason : "No Comment/አስተያየት የለም",
+          recordPrefixId: data.positionPrefix ? data.positionPrefix : undefined,
+          isWithTeamSignature: data.isWithTeamSignature,
+        }),
+        refetch(),
+      ]);
+      toast.success(t("msg.approveSuccess"));
+      onSuccess();
+      handleClose();
+    } catch (error) {
+      // toast.error(error.message || t("msg.approveFailed"));
+      handleError(error);
+    }
+  };
+
+  const handleClose = () => {
+    reset();
+    setSelectedTeeterUrl("");
+    setSelectedSignatureUrl("");
+    onClose();
+  };
+
+  const isLoadingData = !teeterData && !signatureData;
+  const localizedValue = (name: { en: string; am: string }) => {
+    if (effectivePreferredLanguage === "am") {
+      return name.am || name.en;
+    }
+    return name.en || name.am;
+  };
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        // Radix only fires this with `false` (close intent). Guarding
+        // ensures any phantom fire during the loading→form content swap
+        // can't unintentionally close the modal.
+        if (next === false) {
+          handleClose();
+        }
+      }}
+    >
+      <DialogContent aria-describedby={undefined} className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>{t("ApprovalPage.approveRecord")}</DialogTitle>
+        </DialogHeader>
+
+        {isLoadingData ? (
+          <p className="flex items-center justify-center py-8">
+            {t("common.loading")}
+          </p>
+        ) : (
+          <form
+            onSubmit={handleSubmit(onSubmit, onError)}
+            className="flex max-h-[calc(85vh-4.5rem)] flex-col"
+          >
+            <div className="flex-1 space-y-4 overflow-y-auto px-6 py-4">
+              <div ref={teeterRef}>
+                <label className="block text-sm font-medium">
+                  {t("ApprovalPage.selectStamp")}
+                </label>
+                {uploadedTeeters.length === 0 ? (
+                  <p className="mt-2 rounded border border-amber-200 bg-amber-50 p-2 text-sm text-amber-700 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-300">
+                    {getNoStampsForLanguageMessage(locale, t)}
+                  </p>
+                ) : uploadedTeeters.length === 1 ? (
+                  <div className="mt-2 border rounded p-2">
+                    <p className="text-sm font-medium mb-1">
+                      {t("ApprovalPage.yourStamp")}
+                    </p>
+                    <div className="relative h-24 w-24">
+                      {selectedTeeterUrl && (
+                        <img
+                          src={selectedTeeterUrl}
+                          alt={t("ApprovalPage.yourStamp")}
+                          className="h-24 w-24 object-contain"
+                        />
+                      )}
+                    </div>
+                  </div>
+                ) : (
+                  <Controller
+                    name="selectedTeeter"
+                    control={control}
+                    rules={{ required: "Please select a stamp" }}
+                    render={({ field, fieldState }) => (
+                      <>
+                        <Select
+                          onValueChange={field.onChange}
+                          value={field.value}
+                        >
+                          <SelectTrigger>
+                            <SelectValue
+                              placeholder={t("ApprovalPage.selectStamp")}
+                            >
+                              {field.value
+                                ? (teeterData?.presignedTeeters?.find(
+                                    (t) => t.id === field.value,
+                                  )?.name ?? t("ApprovalPage.selectStamp"))
+                                : null}
+                            </SelectValue>
+                          </SelectTrigger>
+                          <SelectContent>
+                            {uploadedTeeters.map((teeter) => (
+                              <SelectItem key={teeter.id} value={teeter.id}>
+                                {(() => {
+                                  const name = teeter.name as unknown;
+                                  if (typeof name === "string") return name;
+                                  const localized = name as
+                                    | { en?: string; am?: string }
+                                    | undefined;
+                                  return (
+                                    localized?.en || localized?.am || "Teeter"
+                                  );
+                                })()}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        {fieldState.error && (
+                          <p className="text-sm text-red-500 mt-1">
+                            {fieldState.error.message}
+                          </p>
+                        )}
+                        {selectedTeeterUrl && (
+                          <div className="mt-2 border rounded p-2">
+                            <p className="text-sm font-medium mb-1">
+                              {t("ApprovalPage.selectedStamp")}
+                            </p>
+                            <div className="relative h-24 w-24">
+                              <img
+                                src={selectedTeeterUrl}
+                                alt={t("ApprovalPage.selectedStamp")}
+                                className="h-24 w-24 object-contain"
+                              />
+                            </div>
+                          </div>
+                        )}
+                      </>
+                    )}
+                  />
+                )}
+              </div>
+
+              {signatures.length > 0 && (
+                <div>
+                  <label className="block text-sm font-medium">
+                    {t("ApprovalPage.signature")}
+                  </label>
+                  {signatures.length === 1 ? (
+                    <div className="mt-2 border rounded p-2">
+                      <p className="text-sm font-medium mb-1">
+                        {t("ApprovalPage.yourSignature")}
+                      </p>
+                      <div className="relative h-16 w-48">
+                        {selectedSignatureUrl && (
+                          <img
+                            src={selectedSignatureUrl}
+                            alt={t("ApprovalPage.yourSignature")}
+                            className="h-24 w-24 object-contain"
+                          />
+                        )}
+                      </div>
+                    </div>
+                  ) : (
+                    <Controller
+                      name="selectedSignature"
+                      control={control}
+                      render={({ field }) => (
+                        <>
+                          <Select
+                            onValueChange={field.onChange}
+                            value={field.value}
+                          >
+                            <SelectTrigger>
+                              <SelectValue
+                                placeholder={t("ApprovalPage.selectSignature")}
+                              />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {signatures.map((signature) => (
+                                <SelectItem
+                                  key={signature.id}
+                                  value={signature.id}
+                                >
+                                  {signature.name || signature.id}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                          {selectedSignatureUrl && (
+                            <div className="mt-2 border rounded p-2">
+                              <p className="text-sm font-medium mb-1">
+                                {t("ApprovalPage.selectedSignature")}
+                              </p>
+                              <div className="relative h-16 w-48">
+                                <img
+                                  src={selectedSignatureUrl}
+                                  alt={t("ApprovalPage.selectedSignature")}
+                                  className="h-24 w-24 object-contain"
+                                />
+                              </div>
+                            </div>
+                          )}
+                        </>
+                      )}
+                    />
+                  )}
+                </div>
+              )}
+
+              {hasReferenceNumber && (
+                <div>
+                  <label className="block text-sm font-medium">
+                    {t("viewDetail.referenceNumber", "Reference Number")}
+                  </label>
+                  <div className="mt-1 rounded-md border bg-slate-50 px-3 py-2 text-sm font-medium text-slate-700">
+                    {referenceNumber}
+                  </div>
+                </div>
+              )}
+
+              {shouldShowPositionPrefixSelector &&
+              positionPrefixesData?.length ? (
+                <div ref={positionPrefixRef}>
+                  <label className="block text-sm font-medium">
+                    {t("contentManagement.positionPrefixes") ||
+                      "Position Prefix"}
+                  </label>
+                  <div className="flex gap-2 items-end">
+                    <div className="flex-1">
+                      <Controller
+                        name="positionPrefix"
+                        control={control}
+                        rules={{
+                          validate: (value) =>
+                            !isPositionPrefixRequired ||
+                            Boolean(value) ||
+                            t(
+                              "ApprovalPage.positionPrefixRequired",
+                              "Reference number selection is required",
+                            ),
+                        }}
+                        render={({ field, fieldState }) => (
+                          <>
+                            <Select
+                              onValueChange={field.onChange}
+                              value={field.value || ""}
+                            >
+                              <SelectTrigger>
+                                <SelectValue
+                                  placeholder={
+                                    isInternalMemoRecord
+                                      ? t(
+                                          "addRecord.Select Position Prefix",
+                                          "Select Position Prefix",
+                                        )
+                                      : t(
+                                          "contentManagement.positionPrefixes",
+                                        ) || "Select position prefix"
+                                  }
+                                />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {positionPrefixesData?.map((prefix) => (
+                                  <SelectItem key={prefix.id} value={prefix.id}>
+                                    {localizedValue(prefix.name)}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                            {fieldState.error ? (
+                              <p className="mt-1 text-sm text-red-500">
+                                {fieldState.error.message}
+                              </p>
+                            ) : (
+                              isPositionPrefixRequired && (
+                                <p className="mt-1 text-xs text-slate-500">
+                                  {t(
+                                    "ApprovalPage.positionPrefixRequired",
+                                    "Reference number selection is required",
+                                  )}
+                                </p>
+                              )
+                            )}
+                          </>
+                        )}
+                      />
+                    </div>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={() => setValue("positionPrefix", "")}
+                      className="h-10 px-3"
+                    >
+                      {t("common.Cancel") || "Clear"}
+                    </Button>
+                  </div>
+                </div>
+              ) : null}
+
+              {recordIsWithTeamSignature && shouldCollaboratorAlwaysSign && (
+                <div className="flex items-center gap-4">
+                  <label className="text-sm font-medium">
+                    {t("addRecord.isTeamSig")}
+                  </label>
+                  <Controller
+                    name="isWithTeamSignature"
+                    control={control}
+                    render={({ field }) => (
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                    )}
+                  />
+                </div>
+              )}
+
+              <div>
+                <label className="block text-sm font-medium">
+                  {t("ApprovalPage.Remark")}
+                </label>
+                <Controller
+                  name="reason"
+                  control={control}
+                  render={({ field }) => (
+                    <Textarea
+                      {...field}
+                      placeholder={t("ApprovalPage.Remark")}
+                      rows={4}
+                      className="w-full"
+                    />
+                  )}
+                />
+              </div>
+            </div>
+
+            <div className="flex justify-end space-x-2 border-t px-6 py-4">
+              <Button type="button" variant="outline" onClick={handleClose}>
+                {t("common.Cancel")}
+              </Button>
+              <Button
+                type="submit"
+                disabled={sendToRoLoading}
+                className="bg-primary-800 text-white"
+              >
+                {sendToRoLoading
+                  ? t("ApprovalPage.approving")
+                  : t("statusBar.Approve")}
+              </Button>
+            </div>
+          </form>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default ApproveRecordModal;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/Approval/approve/rejectRecord.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/Approval/approve/rejectRecord.tsx
new file mode 100644
index 000000000..81fb17023
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/Approval/approve/rejectRecord.tsx
@@ -0,0 +1,67 @@
+import { useState, useCallback } from "react";
+import { toast } from "sonner";
+import { useApprovalTasks } from "../../hooks/useApprovalTasks";
+import EnhancedDynamicModal from "@/record-management/common/EnhancedDynamicModal";
+import { PendingApprovalDto } from "@/record-management/dto/approval/approvalRecordsDto";
+import { t } from "i18next";
+
+interface AcceptRecordProps {
+  record: PendingApprovalDto;
+  onSuccess: () => void;
+  onClose: () => void;
+}
+
+const RejectRecord: React.FC<AcceptRecordProps> = ({
+  record,
+  onSuccess,
+  onClose,
+}) => {
+  const { refetch, rejectRecord } = useApprovalTasks();
+
+  const handleReject = useCallback(
+    async (data?: Record<string, any>) => {
+      const requestBody = {
+        instanceId: record.id,
+        action: "reject",
+        comment: data?.remarks || "No Comment/አስተያየት የለም",
+        goBackTo: undefined,
+      };
+
+      if (!record) throw new Error("Invalid record");
+
+      await rejectRecord(requestBody);
+      await refetch();
+
+      toast.success(t("ApprovalPage.Record Rejected successfully"));
+      onSuccess();
+    },
+    [record, rejectRecord, refetch, onSuccess]
+  );
+
+  return (
+    <EnhancedDynamicModal
+      open={true}
+      onClose={onClose}
+      title={t("ApprovalPage.Reject Record")}
+      actionConfig={{
+        type: "reject",
+        onAction: handleReject,
+        confirmText: t("ApprovalPage.confirmRejection"),
+        confirmVariant: "default",
+      }}
+      formConfig={{
+        fields: [
+          {
+            type: "textarea",
+            name: "remarks",
+            label: t("ApprovalPage.Remark"),
+            placeholder: t("ApprovalPage.Remark"),
+            required: false,
+          },
+        ],
+      }}
+    />
+  );
+};
+
+export default RejectRecord;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/Loader/Animation - 1750141072607.json b/apps/edr-freight-web/backoffice/src/record-management/components/Loader/Animation - 1750141072607.json
new file mode 100644
index 000000000..b71538788
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/Loader/Animation - 1750141072607.json	
@@ -0,0 +1 @@
+{"v":"4.8.0","meta":{"g":"LottieFiles AE 1.1.0","a":"","k":"","d":"","tc":"#-1ffff"},"fr":50,"ip":0,"op":100,"w":1920,"h":1080,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":3,"nm":"Null 1","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.177],"y":[1]},"o":{"x":[0.619],"y":[0]},"t":0,"s":[0]},{"i":{"x":[0.347],"y":[1]},"o":{"x":[0.806],"y":[0]},"t":50,"s":[360]},{"t":100,"s":[720]}],"ix":10},"p":{"a":0,"k":[960,540,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ip":0,"op":100.1001001001,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Ellipse 5","parent":1,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":50,"s":[100]},{"t":97.91796875,"s":[80]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[0,0,0],"to":[-5.422,30.78,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":50,"s":[-32.529,184.683,0],"to":[0,0,0],"ti":[-5.422,30.78,0]},{"t":97.91796875,"s":[0,0,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[118,118],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"op","nm":"Offset Paths 1","a":{"a":0,"k":-0.5,"ix":1},"lj":1,"ml":{"a":0,"k":4,"ix":3},"ix":3,"mn":"ADBE Vector Filter - Offset","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 4 Stroke","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[118,118],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":8.332,"s":[0.882352948189,0.031372550875,0.494117647409,1]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":83.332,"s":[0.882352948189,0.031372550875,0.494117647409,1]},{"t":91.66796875,"s":[0.886274516582,0.172549024224,0.141176477075,1]}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 4 Fill","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":100.1001001001,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Ellipse 4","parent":1,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":50,"s":[100]},{"t":97.91796875,"s":[80]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[0,0,0],"to":[-31.447,3.79,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":50,"s":[-188.683,22.739,0],"to":[0,0,0],"ti":[-31.447,3.79,0]},{"t":97.91796875,"s":[0,0,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[118,118],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"op","nm":"Offset Paths 1","a":{"a":0,"k":-0.5,"ix":1},"lj":1,"ml":{"a":0,"k":4,"ix":3},"ix":3,"mn":"ADBE Vector Filter - Offset","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 4 Stroke","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[118,118],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":8.332,"s":[0.937254905701,0.337254911661,0.0941176489,1]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":83.332,"s":[0.937254905701,0.337254911661,0.0941176489,1]},{"t":91.66796875,"s":[0.886274516582,0.172549024224,0.141176477075,1]}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 4 Fill","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":100.1001001001,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Ellipse 3","parent":1,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":50,"s":[100]},{"t":97.91796875,"s":[80]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[0,0,0],"to":[28.75,12.877,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":50,"s":[172.499,77.265,0],"to":[0,0,0],"ti":[28.75,12.877,0]},{"t":97.91796875,"s":[0,0,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[118,118],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"op","nm":"Offset Paths 1","a":{"a":0,"k":-0.5,"ix":1},"lj":1,"ml":{"a":0,"k":4,"ix":3},"ix":3,"mn":"ADBE Vector Filter - Offset","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 3 Stroke","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[118,118],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":8.332,"s":[0.04705882445,0.772549033165,0.57647061348,1]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":83.332,"s":[0.04705882445,0.772549033165,0.57647061348,1]},{"t":91.66796875,"s":[0.886274516582,0.172549024224,0.141176477075,1]}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 3 Fill","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":100.1001001001,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Ellipse 2","parent":1,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":50,"s":[100]},{"t":97.91796875,"s":[80]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[0,0,0],"to":[22.333,-22.333,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":50,"s":[134,-134,0],"to":[0,0,0],"ti":[22.333,-22.333,0]},{"t":97.91796875,"s":[0,0,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[118,118],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"op","nm":"Offset Paths 1","a":{"a":0,"k":-0.5,"ix":1},"lj":1,"ml":{"a":0,"k":4,"ix":3},"ix":3,"mn":"ADBE Vector Filter - Offset","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 2 Stroke","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[118,118],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":8.332,"s":[0,0.584313750267,0.921568632126,1]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":83.332,"s":[0,0.584313750267,0.921568632126,1]},{"t":91.66796875,"s":[0.886274516582,0.172549024224,0.141176477075,1]}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 2 Fill","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":100.1001001001,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Ellipse 1","parent":1,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.188],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[80]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.899],"y":[-0.919]},"t":50,"s":[100]},{"t":97.91796875,"s":[80]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[0,0,0],"to":[-14.904,-28.412,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":50,"s":[-89.422,-170.473,0],"to":[0,0,0],"ti":[-14.904,-28.412,0]},{"t":97.91796875,"s":[0,0,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[118,118],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"op","nm":"Offset Paths 1","a":{"a":0,"k":-0.5,"ix":1},"lj":1,"ml":{"a":0,"k":4,"ix":3},"ix":3,"mn":"ADBE Vector Filter - Offset","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1 Stroke","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[118,118],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":8.332,"s":[0.439215689898,0.278431385756,0.917647063732,1]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":83.332,"s":[0.439215689898,0.278431385756,0.917647063732,1]},{"t":91.66796875,"s":[0.886274516582,0.172549024224,0.141176477075,1]}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1 Fill","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":100.1001001001,"st":0,"bm":0}],"markers":[]}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/Loader/loader.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/Loader/loader.tsx
new file mode 100644
index 000000000..01d1c499c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/Loader/loader.tsx
@@ -0,0 +1 @@
+export { default } from "@/record-management/common/loader";
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/NotificationList.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/NotificationList.tsx
new file mode 100644
index 000000000..074e60bd5
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/NotificationList.tsx
@@ -0,0 +1,304 @@
+import React, { useRef, useCallback, useState, useEffect } from "react";
+import NotificationCard from "../common/NotificationCard";
+import { useNotifications } from "@/shared/hooks/useNotification";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import { Bell, BellOff, CheckCheck, Loader2 } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import type { Notification } from "@/shared/hooks/useNotification";
+import { toast } from "sonner";
+import { useSocketNotification } from "./hooks/useSocket";
+import { useTranslation } from "react-i18next";
+
+dayjs.extend(relativeTime);
+
+const NotificationList = () => {
+  const { t } = useTranslation();
+  const [activeTab, setActiveTab] = useState<"all" | "unread">("unread");
+  const loaderRef = useRef<HTMLDivElement>(null);
+  const [visibleCount, setVisibleCount] = useState(3);
+  const [unseenCount, setUnseenCount] = useState(0);
+  const navigate = useNavigate();
+  const { notifications, loading, error, markAsRead, refresh, setParams } =
+    useNotifications(
+      { take: 100, skip: 0, orderBy: "createdAt:DESC" },
+      setUnseenCount,
+    );
+  const { scheduleReminder } = useSocketNotification();
+
+  const filteredNotifications = notifications
+    .filter((n) => (activeTab === "unread" ? !n.isSeen : true))
+    .sort(
+      (a, b) =>
+        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+    );
+
+  const visibleNotifications = filteredNotifications.slice(0, visibleCount);
+  const hasUnread = unseenCount > 0;
+
+  const handleObserver = useCallback(
+    (entries: IntersectionObserverEntry[]) => {
+      const [entry] = entries;
+      if (entry.isIntersecting && !loading) {
+        setVisibleCount((prev) => prev + 3);
+        if (visibleCount + 3 > notifications.length) {
+          setParams((prev) => ({
+            ...prev,
+            skip: prev.skip + prev.take,
+          }));
+        }
+      }
+    },
+    [loading, notifications.length, setParams, visibleCount],
+  );
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(handleObserver, {
+      root: null,
+      rootMargin: "20px",
+      threshold: 0.1,
+    });
+
+    const currentLoader = loaderRef.current;
+    if (currentLoader) observer.observe(currentLoader);
+
+    return () => {
+      if (currentLoader) observer.unobserve(currentLoader);
+    };
+  }, [handleObserver]);
+
+  const markAllAsRead = useCallback(() => {
+    filteredNotifications
+      .filter((n) => !n.isSeen)
+      .forEach((n) => markAsRead(n.id));
+  }, [filteredNotifications, markAsRead]);
+
+  const resolveNavigationPath = useCallback(
+    (notification: Notification): string | null => {
+      const itemId = notification.itemId || notification.id;
+      const routeRaw = `${notification.metadata?.route || ""}`
+        .toLowerCase()
+        .replace(/[\s_-]/g, "");
+      const recordTypeRaw = `${notification.metadata?.recordType || ""}`
+        .toLowerCase()
+        .replace(/[\s_-]/g, "");
+
+      // 1. If the backend gave us a ready-made route, use it (replace {id} / :id placeholders)
+      if (
+        notification.metadata?.route &&
+        notification.metadata.route.startsWith("/")
+      ) {
+        return notification.metadata.route
+          .replace(/\{id\}/gi, itemId)
+          .replace(/:id\b/gi, itemId);
+      }
+
+      // 2. DMS / Document routes
+      if (
+        routeRaw.includes("dms") ||
+        routeRaw.includes("document") ||
+        recordTypeRaw.includes("document") ||
+        recordTypeRaw.includes("file")
+      ) {
+        return `/dms/documents/${itemId}`;
+      }
+
+      // 3. Record-management — outgoing / approval
+      if (
+        routeRaw.includes("outgoing") ||
+        routeRaw.includes("approval") ||
+        routeRaw.includes("approve")
+      ) {
+        return `/record-management/viewApproval/${itemId}`;
+      }
+
+      // 4. Record-management — incoming
+      if (
+        routeRaw.includes("incoming") ||
+        ["external", "internal", "cc", "nonsmartuser", "internalmemo"].includes(
+          recordTypeRaw,
+        )
+      ) {
+        if (recordTypeRaw === "internal" || recordTypeRaw === "internalmemo") {
+          return `/record-management/viewIncoming/internal/${itemId}`;
+        }
+        if (recordTypeRaw === "cc") {
+          return `/record-management/viewIncoming/cc/${itemId}`;
+        }
+        return `/record-management/viewIncoming/incoming/${itemId}`;
+      }
+
+      return null;
+    },
+    [],
+  );
+
+  const handleNotificationOnClick = useCallback(
+    (notification: Notification) => {
+      if (!notification.isSeen) markAsRead(notification.id);
+
+      const itemId = notification.itemId || notification.id;
+      if (!itemId) {
+        toast.info(
+          t("notifications.noTarget", {
+            defaultValue: "Notification does not contain a target record",
+          }),
+        );
+        return;
+      }
+
+      const path = resolveNavigationPath(notification);
+      if (path) {
+        navigate(path);
+      } else {
+        toast.info(
+          t("notifications.noRoute", {
+            defaultValue:
+              "No specific route defined for this notification type",
+          }),
+        );
+      }
+    },
+    [navigate, markAsRead, resolveNavigationPath, t],
+  );
+
+  const handleRemind = useCallback(
+    (notificationId: string, minutes: number) => {
+      const notification = notifications.find((n) => n.id === notificationId);
+      if (notification) {
+        scheduleReminder(notification, minutes);
+      }
+    },
+    [notifications, scheduleReminder],
+  );
+
+  if (loading && notifications.length === 0) {
+    return (
+      <div className="flex h-90 items-center justify-center">
+        <Loader2 className="h-6 w-6 animate-spin text-green-500" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="mx-4 my-5 rounded-xl border border-red-200 bg-red-50 p-4 text-center dark:border-red-900/60 dark:bg-red-950/30">
+        <p className="text-sm text-red-600 dark:text-red-300">{error}</p>
+        <button
+          onClick={refresh}
+          className="mt-2 rounded-md px-3 py-1 text-sm font-medium text-primary-700 hover:bg-primary-100 dark:text-primary-300 dark:hover:bg-primary-900/30">
+          {t("profile.tryAgain")}
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full max-h-[calc(100dvh-5rem)] flex-col overflow-hidden rounded-2xl bg-white dark:bg-gray-900 sm:max-h-[430px]">
+      <div className="border-b border-gray-100 bg-gradient-to-r from-primary-50 to-primary-50 px-3 py-3 dark:border-gray-800 dark:from-primary-950/40 dark:to-primary-950/30 sm:px-4">
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex items-center gap-2">
+            <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-primary-500/10 text-primary-600 dark:bg-primary-900/30 dark:text-primary-300">
+              <Bell className="h-4 w-4" />
+            </div>
+            <div className="min-w-0">
+              <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+                {t("header.notifications")}
+              </h3>
+              <p className="text-xs text-gray-500 dark:text-gray-400">
+                {hasUnread ? `${unseenCount} unread` : "You're all caught up"}
+              </p>
+            </div>
+          </div>
+
+          {hasUnread && (
+            <button
+              onClick={markAllAsRead}
+              className="inline-flex shrink-0 items-center gap-1 rounded-lg bg-primary-500 px-2.5 py-1.5 text-xs font-medium text-white transition-colors hover:bg-primary-600">
+              <CheckCheck className="h-3.5 w-3.5" />
+              Mark all
+            </button>
+          )}
+        </div>
+
+        <div className="mt-3 inline-flex rounded-xl bg-white p-1 shadow-sm ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10">
+          <button
+            className={`rounded-lg px-3 py-1.5 text-xs font-semibold transition-colors ${
+              activeTab === "unread"
+                ? "bg-primary-500 text-white shadow-sm"
+                : "text-gray-600 hover:bg-primary-50 dark:text-gray-300 dark:hover:bg-primary-900/20"
+            }`}
+            onClick={() => {
+              setActiveTab("unread");
+              setVisibleCount(3);
+            }}>
+            Unread
+            {unseenCount > 0 && (
+              <span
+                className={`ml-1.5 rounded-full px-1.5 py-0.5 text-[10px] ${
+                  activeTab === "unread"
+                    ? "bg-white/25 text-white"
+                    : "bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300"
+                }`}>
+                {unseenCount}
+              </span>
+            )}
+          </button>
+
+          <button
+            className={`rounded-lg px-3 py-1.5 text-xs font-semibold transition-colors ${
+              activeTab === "all"
+                ? "bg-primary-500 text-white shadow-sm"
+                : "text-gray-600 hover:bg-primary-50 dark:text-gray-300 dark:hover:bg-primary-900/20"
+            }`}
+            onClick={() => {
+              setActiveTab("all");
+              setVisibleCount(3);
+            }}>
+            All
+          </button>
+        </div>
+      </div>
+
+      <div className="space-y-2.5 overflow-y-auto px-3 py-3 sm:space-y-3 sm:px-4">
+        {visibleNotifications.length === 0 ? (
+          <div className="py-10 text-center">
+            <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-gray-100 dark:bg-gray-800">
+              {activeTab === "unread" ? (
+                <BellOff className="h-6 w-6 text-gray-400 dark:text-gray-500" />
+              ) : (
+                <Bell className="h-6 w-6 text-gray-400 dark:text-gray-500" />
+              )}
+            </div>
+            <h3 className="mt-3 text-sm font-semibold text-gray-900 dark:text-gray-100">
+              No {activeTab === "unread" ? "unread " : ""}notifications
+            </h3>
+            <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+              New activity will appear here
+            </p>
+          </div>
+        ) : (
+          visibleNotifications.map((n) => (
+            <NotificationCard
+              key={n.id}
+              id={n.id}
+              subject={n.subject}
+              time={dayjs(n.createdAt).fromNow()}
+              isUnread={!n.isSeen}
+              onClick={() => handleNotificationOnClick(n)}
+              onRemind={handleRemind}
+            />
+          ))
+        )}
+
+        <div ref={loaderRef} className="flex justify-center py-4">
+          {loading && (
+            <Loader2 className="h-5 w-5 animate-spin text-primary-500" />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NotificationList;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/PdfViewer.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/PdfViewer.tsx
new file mode 100644
index 000000000..285823878
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/PdfViewer.tsx
@@ -0,0 +1,55 @@
+// components/PdfViewer.tsx
+"use client";
+import { useState } from 'react';
+import { Document, Page, pdfjs } from 'react-pdf';
+import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
+import 'react-pdf/dist/esm/Page/TextLayer.css';
+
+// Configure PDF worker
+pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
+
+export default function PdfViewer({ url }: { url: string }) {
+  const [numPages, setNumPages] = useState<number | null>(null);
+  const [pageNumber, setPageNumber] = useState(1);
+
+  function onDocumentLoadSuccess({ numPages }: { numPages: number }) {
+    setNumPages(numPages);
+    setPageNumber(1);
+  }
+
+  return (
+    <div className="w-full h-[500px] overflow-auto border">
+      <div className="flex justify-center mb-2">
+        <button 
+          disabled={pageNumber <= 1} 
+          onClick={() => setPageNumber(prev => prev - 1)}
+          className="px-3 py-1 mr-2 bg-gray-200 rounded disabled:opacity-50"
+        >
+          Previous
+        </button>
+        <span className="mx-2">
+          Page {pageNumber} of {numPages}
+        </span>
+        <button 
+          disabled={numPages !== null && pageNumber >= numPages} 
+          onClick={() => setPageNumber(prev => prev + 1)}
+          className="px-3 py-1 bg-gray-200 rounded disabled:opacity-50"
+        >
+          Next
+        </button>
+      </div>
+      
+      <Document
+        file={url}
+        onLoadSuccess={onDocumentLoadSuccess}
+        className="w-full"
+      >
+        <Page 
+          pageNumber={pageNumber} 
+          width={800} 
+          renderTextLayer={false}
+        />
+      </Document>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/PendingUsersList.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/PendingUsersList.tsx
new file mode 100644
index 000000000..ebbb14048
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/PendingUsersList.tsx
@@ -0,0 +1,57 @@
+import { usePendingUsers } from "@/user-management/userManagement/hooks/usePendingUsersHook";
+import ApprovalCard from "@/user-management/userManagement/dialogs/PendingUsersCard";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+const UserApprovalDropdown = () => {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
+  const {
+    pendingUsers,
+    loadingPendingUsers,
+    approveMutation,
+    rejectMutation,
+  } = usePendingUsers({ take: 5, skip: 0 });
+
+  const count = pendingUsers?.count || 0;
+  const pendingEmployees = pendingUsers?.items || [];
+
+  return (
+    <div className="space-y-2">
+      {pendingEmployees.length === 0 ? (
+        <p className="text-sm text-gray-500 text-center py-3">
+          {t("pendingUsers.noPendingApprovals")}
+        </p>
+      ) : (
+        <>
+          {pendingEmployees.slice(0, 3).map((emp: any) => (
+            <ApprovalCard
+              key={emp.id}
+              id={emp.id}
+              name={emp.name}
+              unit={emp.unit}
+              time={emp.createdAt}
+              onApprove={(id) => approveMutation.mutate(id)}
+              onReject={(id) => rejectMutation.mutate(id)}
+              onClick={(id) => navigate(`/employees/${id}`)}
+            />
+          ))}
+
+          {/* Review All */}
+          <button
+            onClick={() => {
+              
+              navigate("/record-management/employees/pending");
+            }}
+            className="w-full text-sm text-blue-600 hover:underline pt-2"
+          >
+            {t("pendingUsers.reviewAll")}
+          </button>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default UserApprovalDropdown;
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/PrintDialog.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/PrintDialog.tsx
new file mode 100644
index 000000000..2b6fa5911
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/PrintDialog.tsx
@@ -0,0 +1,280 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Printer, FileText, Paperclip, AlertCircle } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/shared/common/ui/dialog";
+import { Button } from "@/shared/common/ui/button";
+import { Checkbox } from "@/shared/common/ui/checkbox";
+import { Label } from "@/shared/common/ui/label";
+import { Separator } from "@/shared/common/ui/separator";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+import { toast } from "sonner";
+import type {
+  PrintOptions,
+  AttachmentFile,
+} from "@/record-management/utils/printService";
+import {
+  printRecordWithAttachments,
+  validatePrintOptions,
+} from "@/record-management/utils/printService";
+
+interface PrintDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  pdfUrl: string;
+  attachments: AttachmentFile[];
+}
+
+export const PrintDialog: React.FC<PrintDialogProps> = ({
+  isOpen,
+  onClose,
+  pdfUrl,
+  attachments,
+}) => {
+  const { t } = useTranslation();
+  const [isLoading, setIsLoading] = useState(false);
+  const [options, setOptions] = useState<PrintOptions>({
+    includeRecord: true,
+    includeAttachments: attachments.length > 0,
+    attachmentIndices: attachments.map((_, idx) => idx),
+  });
+
+  // Log files when dialog opens
+  React.useEffect(() => {
+    if (isOpen) {
+    }
+  }, [isOpen, pdfUrl, attachments]);
+
+  const handleRecordToggle = (checked: boolean) => {
+    setOptions((prev) => ({
+      ...prev,
+      includeRecord: checked,
+    }));
+  };
+
+  const handleAttachmentsToggle = (checked: boolean) => {
+    setOptions((prev) => ({
+      ...prev,
+      includeAttachments: checked,
+      attachmentIndices: checked ? attachments.map((_, idx) => idx) : [],
+    }));
+  };
+
+  const handleAttachmentToggle = (index: number, checked: boolean) => {
+    setOptions((prev) => {
+      const indices = prev.attachmentIndices || [];
+      if (checked) {
+        return {
+          ...prev,
+          attachmentIndices: [...indices, index],
+        };
+      } else {
+        return {
+          ...prev,
+          attachmentIndices: indices.filter((i) => i !== index),
+        };
+      }
+    });
+  };
+
+  const handlePrint = async () => {
+    if (!validatePrintOptions(options)) {
+      toast.error(
+        t("print.selectAtLeastOne") ||
+          "Please select at least one item to print",
+      );
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      await printRecordWithAttachments(pdfUrl, attachments, options);
+      toast.success(t("print.success") || "Print job sent successfully");
+      // Wait for all print windows to open before closing
+      setTimeout(() => {
+        onClose();
+      }, 3000);
+    } catch (error) {
+      console.error("Print error:", error);
+      toast.error(t("print.error") || "Failed to print. Please try again.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const selectedCount =
+    (options.includeRecord ? 1 : 0) + (options.attachmentIndices?.length || 0);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-md max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <div className="flex items-center gap-2">
+            <Printer className="w-5 h-5 text-primary-600" />
+            <DialogTitle>{t("print.title") || "Print Options"}</DialogTitle>
+          </div>
+          <DialogDescription>
+            {t("print.description") || "Select what you want to print"}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4 overflow-y-auto max-h-[calc(90vh-200px)]">
+          {/* Record Section */}
+          <div className="space-y-3">
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="record"
+                checked={options.includeRecord}
+                onCheckedChange={handleRecordToggle}
+              />
+              <Label
+                htmlFor="record"
+                className="flex items-center gap-2 cursor-pointer font-medium"
+              >
+                <FileText className="w-4 h-4 text-blue-600" />
+                {t("print.recordDocument") || "Record Document"}
+              </Label>
+            </div>
+            <p className="text-sm text-muted-foreground ml-6">
+              {t("print.recordDescription") || "Print the main record document"}
+            </p>
+          </div>
+
+          <Separator />
+
+          {/* Attachments Section */}
+          <div className="space-y-3">
+            {attachments.length > 0 ? (
+              <>
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="attachments"
+                    checked={
+                      options.includeAttachments &&
+                      options.attachmentIndices?.length === attachments.length
+                    }
+                    onCheckedChange={handleAttachmentsToggle}
+                  />
+                  <Label
+                    htmlFor="attachments"
+                    className="flex items-center gap-2 cursor-pointer font-medium"
+                  >
+                    <Paperclip className="w-4 h-4 text-orange-600" />
+                    {t("print.attachments") || "Attachments"} (
+                    {attachments.length})
+                  </Label>
+                </div>
+
+                {/* Individual Attachments */}
+                {options.includeAttachments && (
+                  <div className="ml-6 space-y-2 bg-muted/50 p-3 rounded-lg max-h-[200px] overflow-y-auto">
+                    <TooltipProvider>
+                      {attachments.map((attachment, index) => (
+                        <div
+                          key={attachment.id}
+                          className="flex items-center space-x-2 min-w-0"
+                        >
+                          <Checkbox
+                            id={`attachment-${index}`}
+                            checked={
+                              options.attachmentIndices?.includes(index) ||
+                              false
+                            }
+                            onCheckedChange={(checked) =>
+                              handleAttachmentToggle(index, checked as boolean)
+                            }
+                            className="flex-shrink-0"
+                          />
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Label
+                                htmlFor={`attachment-${index}`}
+                                className="flex items-center gap-2 cursor-pointer text-sm flex-1 min-w-0 "
+                              >
+                                <span className="truncate">
+                                  {attachment.name}
+                                </span>
+                                <span className="text-xs text-muted-foreground whitespace-nowrap flex-shrink-0">
+                                  ({(attachment.size / 1024).toFixed(1)} KB)
+                                </span>
+                              </Label>
+                            </TooltipTrigger>
+                            <TooltipContent
+                              side="top"
+                              className="max-w-xs break-words bg-primary-500 text-black border-primary-600"
+                            >
+                              <p className="font-medium text-black">
+                                {attachment.name}
+                              </p>
+                              <p className="text-xs text-black/80 mt-1">
+                                Size: {(attachment.size / 1024).toFixed(1)} KB
+                              </p>
+                            </TooltipContent>
+                          </Tooltip>
+                        </div>
+                      ))}
+                    </TooltipProvider>
+                  </div>
+                )}
+              </>
+            ) : (
+              <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                <AlertCircle className="w-4 h-4" />
+                {t("print.noAttachments") || "No attachments available"}
+              </div>
+            )}
+          </div>
+
+          {/* Summary */}
+          <div className="bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800 rounded-lg p-3">
+            <p className="text-sm font-medium text-blue-900 dark:text-blue-100">
+              {t("print.summary") || "Items to print"}: {selectedCount}
+            </p>
+            <p className="text-xs text-blue-700 dark:text-blue-200 mt-1">
+              {selectedCount === 0
+                ? t("print.selectAtLeastOne") ||
+                  "Please select at least one item"
+                : t("print.readyToPrint") || "Ready to print"}
+            </p>
+          </div>
+        </div>
+
+        <DialogFooter className="gap-2">
+          <Button variant="outline" onClick={onClose} disabled={isLoading}>
+            {t("common.cancel") || "Cancel"}
+          </Button>
+          <Button
+            onClick={handlePrint}
+            disabled={isLoading || selectedCount === 0}
+            className="bg-primary-600 hover:bg-primary-700"
+          >
+            {isLoading ? (
+              <>
+                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                {t("print.printing") || "Printing..."}
+              </>
+            ) : (
+              <>
+                <Printer className="w-4 h-4 mr-2" />
+                {t("print.print") || "Print"}
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default PrintDialog;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/ReminderList.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/ReminderList.tsx
new file mode 100644
index 000000000..20ed30fad
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/ReminderList.tsx
@@ -0,0 +1,142 @@
+import React from "react";
+import { useReminder } from "@/shared/hooks/useReminder";
+import { useNavigate } from "react-router-dom";
+import { Clock, Trash2, Bell, BellOff } from "lucide-react";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import { Button } from "@/shared/common/ui/button";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { toast } from "sonner";
+
+dayjs.extend(relativeTime);
+
+const ReminderList = () => {
+  const { pendingReminders, deleteReminder, snoozeReminder } = useReminder();
+  const navigate = useNavigate();
+  const localizedName = useLocalizedName();
+
+  const handleReminderClick = (reminder: any) => {
+    const metadataType = reminder.metadata?.route;
+    const recordTypeKey = reminder.metadata?.recordType;
+
+    // Same routing logic as notifications
+    if (metadataType === "Outgoing") {
+      navigate(`/record-management/viewApproval/${reminder.itemId}`);
+    } else if (metadataType === "Incoming") {
+      switch (recordTypeKey) {
+        case "external":
+          navigate(
+            `/record-management/viewIncoming/incoming/${reminder.itemId}`
+          );
+          break;
+        case "internal":
+          navigate(
+            `/record-management/viewIncoming/internal/${reminder.itemId}`
+          );
+          break;
+        case "cc":
+          navigate(`/record-management/viewIncoming/${reminder.itemId}`);
+          break;
+        case "non_smart_user":
+          navigate(
+            `/record-management/viewIncoming/incoming/${reminder.itemId}`
+          );
+          break;
+      }
+    } else {
+      toast.info("No specific route defined for this reminder");
+    }
+  };
+
+  const handleDelete = (id: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    deleteReminder(id);
+    toast.success("Reminder deleted");
+  };
+
+  const handleSnooze = (id: string, minutes: number, e: React.MouseEvent) => {
+    e.stopPropagation();
+    snoozeReminder(id, minutes);
+  };
+
+  if (pendingReminders.length === 0) {
+    return (
+      <div className="text-center py-6">
+        <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
+          <BellOff className="h-5 w-5 text-gray-400" />
+        </div>
+        <h3 className="mt-2 text-sm font-medium text-gray-900">
+          No active reminders
+        </h3>
+        <p className="mt-1 text-xs text-gray-500">
+          Set reminders from notifications to see them here
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between mb-2">
+        <h3 className="text-sm font-medium text-gray-900">
+          Active Reminders ({pendingReminders.length})
+        </h3>
+      </div>
+
+      <div className="space-y-2 max-h-[500px] overflow-y-auto">
+        {pendingReminders.map((reminder) => (
+          <div
+            key={reminder.id}
+            className="flex items-start gap-3 p-3 rounded-md border bg-blue-50 border-blue-400 hover:shadow-sm transition-all cursor-pointer"
+            onClick={() => handleReminderClick(reminder)}
+          >
+            <div className="mt-1">
+              <Clock className="w-5 h-5 text-blue-600" />
+            </div>
+
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2">
+                <h4 className="font-medium text-sm text-gray-900 break-all">
+                  {localizedName(reminder.subject as { am: string; en: string })}
+                </h4>
+                <span className="w-2 h-2 rounded-full bg-blue-500 animate-pulse"></span>
+              </div>
+              <p className="text-xs text-gray-600">{reminder.message}</p>
+              <div className="flex items-center gap-2 mt-1">
+                <p className="text-[11px] text-blue-600 font-medium">
+                  Remind {dayjs(reminder.remindAt).fromNow()}
+                </p>
+                <span className="text-[11px] text-gray-400">
+                  ({dayjs(reminder.remindAt).format("MMM D, h:mm A")})
+                </span>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-1">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 w-7 p-0 hover:bg-blue-100"
+                onClick={(e) => handleSnooze(reminder.id, 15, e)}
+                title="Snooze 15 min"
+              >
+                <Bell className="h-4 w-4 text-gray-500" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 w-7 p-0 hover:bg-red-100"
+                onClick={(e) => handleDelete(reminder.id, e)}
+                title="Delete reminder"
+              >
+                <Trash2 className="h-4 w-4 text-red-500" />
+              </Button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ReminderList;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/Settings/StampGenerator.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/Settings/StampGenerator.tsx
new file mode 100644
index 000000000..ba732ef44
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/Settings/StampGenerator.tsx
@@ -0,0 +1,378 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import { useTranslation } from "react-i18next";
+import { Download } from "lucide-react";
+
+const STAMP_WIDTH = 698;
+// A three-line stamp renders at 698px x 161px. Height adjusts by line count.
+const NAME_FONT_SIZE = 46;
+const POSITION_FONT_SIZE = 40;
+const TEXT_COLOR = "#0033cc";
+const FONT_FAMILY = "Georgia, 'Times New Roman', serif";
+const HORIZONTAL_PADDING = 8;
+const MAX_TEXT_WIDTH = STAMP_WIDTH - HORIZONTAL_PADDING * 2;
+// These spacing values are tuned to visually match the provided teeter reference.
+// Baseline-to-baseline spacing (normal line spacing), NOT derived from font sizes.
+const NAME_LINE_HEIGHT = 45;
+const NAME_TO_POSITION_BASELINE_GAP = 45;
+const POSITION_LINE_HEIGHT = 45;
+// Gap between language blocks when user selects "both".
+// Kept small so the second language starts with "normal" line spacing.
+const BLOCK_GAP = 0;
+const PADDING_TOP = 8;
+const PADDING_BOTTOM = 8;
+const TEXT_DESCENT_PADDING = 9;
+const EXPORT_SCALE = 1;
+
+export type StampBlock = {
+  name: string;
+  position: string;
+};
+
+type StampGeneratorProps = {
+  blocks: StampBlock[];
+  onPreviewChange?: (dataUrl: string | null) => void;
+};
+
+function measureTextWidth(
+  text: string,
+  fontSize: number,
+  fontWeight: string,
+): number {
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return text.length * fontSize * 0.5;
+  ctx.font = `${fontWeight} ${fontSize}px ${FONT_FAMILY}`;
+  return ctx.measureText(text).width;
+}
+
+function wrapWords(
+  text: string,
+  maxWidth: number,
+  fontSize: number,
+  fontWeight: string,
+): string[] {
+  const trimmed = text.trim();
+  if (!trimmed) return [""];
+
+  const words = trimmed.split(/\s+/);
+  const lines: string[] = [];
+  let currentLine = "";
+
+  for (const word of words) {
+    const candidate = currentLine ? `${currentLine} ${word}` : word;
+    if (measureTextWidth(candidate, fontSize, fontWeight) <= maxWidth) {
+      currentLine = candidate;
+    } else {
+      if (currentLine) lines.push(currentLine);
+      currentLine = word;
+    }
+  }
+
+  if (currentLine) lines.push(currentLine);
+  return lines.length > 0 ? lines : [""];
+}
+
+function buildLayout(blocks: StampBlock[]) {
+  const layoutBlocks = blocks.map((block) => {
+    const nameLines = wrapWords(
+      block.name,
+      MAX_TEXT_WIDTH,
+      NAME_FONT_SIZE,
+      "bold",
+    );
+    const positionLines = wrapWords(
+      block.position,
+      MAX_TEXT_WIDTH,
+      POSITION_FONT_SIZE,
+      "bold",
+    );
+    const widestLine = Math.max(
+      ...nameLines.map((line) => measureTextWidth(line, NAME_FONT_SIZE, "bold")),
+      ...positionLines.map((line) =>
+        measureTextWidth(line, POSITION_FONT_SIZE, "bold"),
+      ),
+    );
+
+    return { nameLines, positionLines, widestLine };
+  });
+  const width = Math.min(
+    STAMP_WIDTH,
+    Math.max(
+      1,
+      Math.ceil(
+        Math.max(...layoutBlocks.map((block) => block.widestLine)) +
+          HORIZONTAL_PADDING * 2,
+      ),
+    ),
+  );
+  const centerX = width / 2;
+  let nextNameBaseline = PADDING_TOP + NAME_FONT_SIZE;
+  let lastTextBaseline = nextNameBaseline;
+  const elements: React.ReactNode[] = [];
+
+  layoutBlocks.forEach(({ nameLines, positionLines }, blockIndex) => {
+    const nameY = nextNameBaseline;
+    elements.push(
+      <text
+        key={`name-${blockIndex}`}
+        x={centerX}
+        y={nameY}
+        textAnchor="middle"
+        fontFamily={FONT_FAMILY}
+        fontWeight="bold"
+        fill={TEXT_COLOR}
+        fontSize={NAME_FONT_SIZE}
+      >
+        {nameLines.map((line, lineIndex) => (
+          <tspan
+            key={`${blockIndex}-name-${lineIndex}`}
+            x={centerX}
+            dy={lineIndex === 0 ? 0 : NAME_LINE_HEIGHT}
+          >
+            {line || " "}
+          </tspan>
+        ))}
+      </text>,
+    );
+
+    // Use normal line spacing from name baseline to position baseline.
+    const positionStartY =
+      nameY + (nameLines.length - 1) * NAME_LINE_HEIGHT +
+      NAME_TO_POSITION_BASELINE_GAP;
+    elements.push(
+      <text
+        key={`position-${blockIndex}`}
+        x={centerX}
+        y={positionStartY}
+        textAnchor="middle"
+        fontFamily={FONT_FAMILY}
+        fontWeight="bold"
+        fill={TEXT_COLOR}
+        fontSize={POSITION_FONT_SIZE}
+      >
+        {positionLines.map((line, lineIndex) => (
+          <tspan
+            key={`${blockIndex}-pos-${lineIndex}`}
+            x={centerX}
+            dy={lineIndex === 0 ? 0 : POSITION_LINE_HEIGHT}
+          >
+            {line}
+          </tspan>
+        ))}
+      </text>,
+    );
+
+    const lastPositionBaselineY =
+      positionStartY + (positionLines.length - 1) * POSITION_LINE_HEIGHT;
+    lastTextBaseline = lastPositionBaselineY;
+
+    if (blockIndex < blocks.length - 1) {
+      nextNameBaseline = lastPositionBaselineY + NAME_LINE_HEIGHT + BLOCK_GAP;
+    }
+  });
+
+  // Fit-to-content height with small padding.
+  const height = Math.max(
+    1,
+    lastTextBaseline + TEXT_DESCENT_PADDING + PADDING_BOTTOM,
+  );
+
+  return { elements, height, width };
+}
+
+async function svgToPngDataUrl(
+  svgElement: SVGSVGElement,
+  width: number,
+  height: number,
+): Promise<string> {
+  const clone = svgElement.cloneNode(true) as SVGSVGElement;
+  clone.setAttribute("width", String(width));
+  clone.setAttribute("height", String(height));
+  clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+
+  const serializer = new XMLSerializer();
+  const svgString = serializer.serializeToString(clone);
+  const svgBlob = new Blob([svgString], {
+    type: "image/svg+xml;charset=utf-8",
+  });
+  const url = URL.createObjectURL(svgBlob);
+
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      const canvas = document.createElement("canvas");
+      canvas.width = width;
+      canvas.height = height;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        URL.revokeObjectURL(url);
+        reject(new Error("Canvas not supported"));
+        return;
+      }
+      ctx.clearRect(0, 0, width, height);
+      ctx.drawImage(img, 0, 0, width, height);
+      URL.revokeObjectURL(url);
+      resolve(canvas.toDataURL("image/png"));
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error("Failed to render stamp image"));
+    };
+    img.src = url;
+  });
+}
+
+const StampGenerator: React.FC<StampGeneratorProps> = ({
+  blocks: initialBlocks,
+  onPreviewChange,
+}) => {
+  const { t } = useTranslation();
+  const svgRef = useRef<SVGSVGElement>(null);
+  const [editableBlocks, setEditableBlocks] = useState<StampBlock[]>(initialBlocks);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    setEditableBlocks(initialBlocks);
+  }, [initialBlocks]);
+
+  const { elements, height, width } = useMemo(
+    () => buildLayout(editableBlocks),
+    [editableBlocks],
+  );
+
+  const updateBlock = (
+    index: number,
+    field: keyof StampBlock,
+    value: string,
+  ) => {
+    setEditableBlocks((prev) =>
+      prev.map((block, i) =>
+        i === index ? { ...block, [field]: value } : block,
+      ),
+    );
+  };
+
+  const refreshPreview = useCallback(async () => {
+    if (!svgRef.current) return;
+    try {
+      const dataUrl = await svgToPngDataUrl(
+        svgRef.current,
+        width * EXPORT_SCALE,
+        height * EXPORT_SCALE,
+      );
+      setPreviewUrl(dataUrl);
+      onPreviewChange?.(dataUrl);
+    } catch {
+      setPreviewUrl(null);
+      onPreviewChange?.(null);
+    }
+  }, [height, onPreviewChange, width]);
+
+  useEffect(() => {
+    const timer = window.setTimeout(() => {
+      void refreshPreview();
+    }, 150);
+    return () => window.clearTimeout(timer);
+  }, [editableBlocks, height, refreshPreview]);
+
+  const handleDownload = async () => {
+    if (!svgRef.current) return;
+    const dataUrl = await svgToPngDataUrl(
+      svgRef.current,
+      width * EXPORT_SCALE,
+      height * EXPORT_SCALE,
+    );
+    const link = document.createElement("a");
+    link.href = dataUrl;
+    link.download = "stamp.png";
+    link.click();
+  };
+
+  return (
+    <div className="space-y-4 text-left">
+      {editableBlocks.map((block, index) => (
+        <div
+          key={`stamp-block-${index}`}
+          className="space-y-2 rounded-lg border border-gray-200 p-3 dark:border-gray-600"
+        >
+          {editableBlocks.length > 1 && (
+            <p className="text-xs font-medium text-gray-500 dark:text-gray-400">
+              {index === 0
+                ? t("signatureUpload.stampBlockAmharic")
+                : t("signatureUpload.stampBlockEnglish")}
+            </p>
+          )}
+          <div className="space-y-1">
+            <label className="text-sm font-medium dark:text-gray-200">
+              {t("signatureUpload.stampNameLabel")}
+            </label>
+            <Input
+              value={block.name}
+              onChange={(e) => updateBlock(index, "name", e.target.value)}
+              className="dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600"
+            />
+          </div>
+          <div className="space-y-1">
+            <label className="text-sm font-medium dark:text-gray-200">
+              {t("signatureUpload.stampPositionLabel")}
+            </label>
+            <Input
+              value={block.position}
+              onChange={(e) => updateBlock(index, "position", e.target.value)}
+              className="dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600"
+            />
+          </div>
+        </div>
+      ))}
+
+      <div
+        className="overflow-x-auto rounded-lg border border-dashed border-gray-300 p-2 dark:border-gray-600"
+        style={{
+          background:
+            "repeating-conic-gradient(#e5e7eb 0% 25%, transparent 0% 50%) 0 0 / 16px 16px",
+        }}
+      >
+        <svg
+          ref={svgRef}
+          width={width}
+          height={height}
+          viewBox={`0 0 ${width} ${height}`}
+          xmlns="http://www.w3.org/2000/svg"
+          className="mx-auto max-w-full"
+          aria-label="Teeter stamp preview"
+        >
+          {elements}
+        </svg>
+      </div>
+
+      {previewUrl && (
+        <div className="space-y-2">
+          <p className="text-sm text-gray-600 dark:text-gray-300">
+            {t("signatureUpload.generatedTeeterPreview")}:
+          </p>
+          <div className="mx-auto w-full max-w-md rounded-lg border border-gray-200 p-4 dark:border-gray-600 dark:bg-gray-700">
+            <img
+              src={previewUrl}
+              alt={t("signatureUpload.generatedTeeterPreview")}
+              className="mx-auto max-h-40 max-w-full object-contain"
+            />
+          </div>
+        </div>
+      )}
+
+      <Button
+        type="button"
+        onClick={() => void handleDownload()}
+        className="w-full bg-blue-600 text-white hover:bg-blue-700"
+      >
+        <Download className="mr-2 h-4 w-4" />
+        {t("signatureUpload.downloadTransparentPng")}
+      </Button>
+    </div>
+  );
+};
+
+export default StampGenerator;
+export { svgToPngDataUrl, STAMP_WIDTH };
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/Settings/letterTemplates/filePreview.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/Settings/letterTemplates/filePreview.tsx
new file mode 100644
index 000000000..0cf633134
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/Settings/letterTemplates/filePreview.tsx
@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+
+const FilePreview = ({
+  file,
+  fallbackUrl,
+}: {
+  file?: File;
+  fallbackUrl?: string;
+}) => {
+  const [src, setSrc] = useState<string | null>(fallbackUrl ?? null);
+
+  useEffect(() => {
+    if (!file) {
+      setSrc(fallbackUrl ?? null);
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.onload = () => setSrc(reader.result as string);
+    reader.readAsDataURL(file);
+  }, [file, fallbackUrl]);
+
+  if (!src) return null;
+  return (
+    <img
+      src={src}
+      alt="Preview"
+      className="w-full max-h-40 object-contain mt-2 rounded-md border"
+    />
+  );
+};
+
+export default FilePreview;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/Settings/recordOfficerSettings.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/Settings/recordOfficerSettings.tsx
new file mode 100644
index 000000000..5e4fac6cd
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/Settings/recordOfficerSettings.tsx
@@ -0,0 +1,126 @@
+import React, { useEffect, useState } from "react";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from "@/shared/common/ui/form";
+import { Input } from "@/shared/common/ui/input";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+} from "@/shared/common/ui/card";
+import { useForm } from "react-hook-form";
+
+type FormValues = {
+  refPrefix: string;
+  seal: FileList;
+};
+
+const FilePreview = ({
+  file,
+  fallbackUrl,
+}: {
+  file?: File;
+  fallbackUrl?: string;
+}) => {
+  const [src, setSrc] = useState<string | null>(fallbackUrl ?? null);
+
+  useEffect(() => {
+    if (!file) {
+      setSrc(fallbackUrl ?? null);
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.onload = () => setSrc(reader.result as string);
+    reader.readAsDataURL(file);
+  }, [file, fallbackUrl]);
+
+  if (!src) return null;
+  return (
+    <img
+      src={src}
+      alt="Preview"
+      className="w-full max-h-40 object-contain mt-2 rounded-md border"
+    />
+  );
+};
+
+const RecordOfficerSettings = () => {
+  const form = useForm<FormValues>();
+
+  const watchSeal = form.watch("seal")?.[0];
+  const defaultSealUrl = "/defaults/seal.png";
+  const onSubmit = (data: FormValues) => {};
+
+  return (
+    <div className="w-full h-full mx-auto p-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Configuration</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+                {/* Reference Prefix */}
+                <FormField
+                  control={form.control}
+                  name="refPrefix"
+                  rules={{ required: "Prefix is required" }}
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Reference Number Prefix</FormLabel>
+                      <FormControl>
+                        <Input placeholder="e.g., REF-" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {/* Seal File */}
+                <FormField
+                  control={form.control}
+                  name="seal"
+                  rules={{ required: "Seal image is required" }}
+                  render={({ field: { onChange, ref } }) => (
+                    <FormItem>
+                      <FormLabel>Seal (Image)</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="file"
+                          accept="image/*"
+                          onChange={(e) => onChange(e.target.files)}
+                          ref={ref}
+                        />
+                      </FormControl>
+                      <FilePreview
+                        file={watchSeal}
+                        fallbackUrl={defaultSealUrl}
+                      />
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <Button type="submit" className="w-full">
+                Submit
+              </Button>
+            </form>
+          </Form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default RecordOfficerSettings;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/Settings/signatureForm.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/Settings/signatureForm.tsx
new file mode 100644
index 000000000..4c4595377
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/Settings/signatureForm.tsx
@@ -0,0 +1,150 @@
+import { Button } from "@/shared/common/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { t } from "i18next";
+import { Maximize2, X } from "lucide-react";
+import { useRef, useState } from "react";
+import SignaturePad from "react-signature-canvas";
+import { toast } from "sonner";
+
+export default function SignatureForm({
+  onSubmit,
+  onCancel,
+}: {
+  onSubmit: (dataUrl: string) => void;
+  onCancel: () => void;
+}) {
+  const sigPadRef = useRef<SignaturePad>(null);
+  const [maximized, setMaximized] = useState(false);
+
+  const handleSave = () => {
+    if (!sigPadRef.current?.isEmpty()) {
+      onSubmit(sigPadRef?.current?.toDataURL("image/png") || "");
+    } else {
+      toast.error("please add a signature");
+    }
+  };
+
+  return (
+    <>
+      {/* Inline Signature Pad (Default View) */}
+      {!maximized && (
+        <div className="flex flex-col w-full max-w-xxl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-sm border dark:border-gray-700 p-4 sm:p-6 space-y-3 transition-all">
+          {/* Header with Maximize button */}
+          <div className="flex justify-between items-center w-full">
+            <h3 className="text-base sm:text-lg font-semibold dark:text-gray-200">
+              {t("ApprovalPage.signature")}
+            </h3>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setMaximized(true)}
+              title="Maximize"
+              className="hover:bg-gray-100 dark:hover:bg-gray-700"
+            >
+              <Maximize2 className="w-4 h-4 sm:w-5 sm:h-5 dark:text-gray-200" />
+            </Button>
+          </div>
+
+          {/* Signature Canvas */}
+          <div className="w-full h-48 sm:h-56 md:h-64 border dark:border-gray-600 rounded-md overflow-hidden">
+            <SignaturePad
+              ref={sigPadRef}
+              penColor="blue"
+              canvasProps={{
+                className:
+                  "w-full h-full bg-white cursor-crosshair touch-none rounded-md",
+              }}
+            />
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex flex-wrap justify-center sm:justify-end gap-2 pt-2">
+            <Button
+              onClick={() => sigPadRef.current?.clear()}
+              variant="outline"
+              className="text-sm sm:text-base dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700"
+            >
+              {t("userIncoming.Clear")}
+            </Button>
+            <Button
+              onClick={handleSave}
+              className="bg-primary-600 hover:bg-primary-700 text-white text-sm sm:text-base"
+            >
+              {t("delegation.save")}
+            </Button>
+            <Button
+              onClick={onCancel}
+              className="bg-gray-500 hover:bg-gray-600 text-white text-sm sm:text-base"
+            >
+              {t("addRecord.Cancel")}
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* Maximized Modal (Full Screen View) */}
+      <Dialog open={maximized} onOpenChange={setMaximized}>
+        <DialogContent className="w-[95vw] h-[85vh] sm:w-[90vw] sm:h-[80vh] flex flex-col p-4 sm:p-6 rounded-lg bg-white dark:bg-gray-800">
+          <DialogHeader className="flex justify-between items-center border-b dark:border-gray-700 pb-2">
+            <DialogTitle className="text-lg sm:text-xl font-semibold dark:text-gray-200">
+              {t("convert.drawSig")}
+            </DialogTitle>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setMaximized(false)}
+              className="hover:bg-gray-100 dark:hover:bg-gray-700"
+            >
+              <X className="w-5 h-5 dark:text-gray-200" />
+            </Button>
+          </DialogHeader>
+
+          {/* Responsive Canvas */}
+          <div className="flex-1 flex items-center justify-center py-4">
+            <div className="w-full h-full max-h-[60vh] sm:max-h-[65vh] border dark:border-gray-600 rounded-md overflow-hidden">
+              <SignaturePad
+                ref={sigPadRef}
+                penColor="blue"
+                canvasProps={{
+                  className:
+                    "w-full h-full bg-white cursor-crosshair rounded-md touch-none",
+                }}
+              />
+            </div>
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex flex-wrap justify-center sm:justify-end gap-2 pt-2 border-t dark:border-gray-700 mt-auto">
+            <Button
+              onClick={() => sigPadRef.current?.clear()}
+              variant="outline"
+              className="text-sm sm:text-base dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700"
+            >
+              {t("userIncoming.Clear")}
+            </Button>
+            <Button
+              onClick={handleSave}
+              className="bg-primary-600 hover:bg-primary-700 text-white text-sm sm:text-base"
+            >
+              {t("delegation.save")}
+            </Button>
+            <Button
+              onClick={() => {
+                setMaximized(false);
+                onCancel();
+              }}
+              className="bg-gray-500 hover:bg-gray-600 text-white text-sm sm:text-base"
+            >
+              {t("addRecord.Cancel")}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/Settings/signatureFormTrigger.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/Settings/signatureFormTrigger.tsx
new file mode 100644
index 000000000..61595cfcb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/Settings/signatureFormTrigger.tsx
@@ -0,0 +1,86 @@
+import { SignatureAndTeeterService } from "@/record-management/services/api/signatureAndTeeterService";
+import { Button } from "@/shared/common/ui/button";
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import SignatureForm from "./signatureForm";
+
+const SignatureFormTrigger = ({
+  setSignatureUrl,
+  employeeId,
+  getFileName,
+  queryClient,
+  setUploadStatus,
+}: {
+  setSignatureUrl: (url: string) => void;
+  employeeId: string;
+  getFileName: (type: "signature") => string;
+  queryClient: ReturnType<typeof useQueryClient>;
+  setUploadStatus: (msg: string) => void;
+}) => {
+  const [open, setOpen] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+
+  // helper: base64 -> Blob
+  const dataURLtoBlob = (dataUrl: string): Blob => {
+    const arr = dataUrl.split(",");
+    const mime = arr[0].match(/:(.*?);/)?.[1] || "image/png";
+    const bstr = atob(arr[1]);
+    let n = bstr.length;
+    const u8arr = new Uint8Array(n);
+    while (n--) u8arr[n] = bstr.charCodeAt(n);
+    return new Blob([u8arr], { type: mime });
+  };
+
+  const handleSave = async (dataUrl: string) => {
+    setIsUploading(true);
+    setUploadStatus("Uploading signature...");
+
+    try {
+      const blob = dataURLtoBlob(dataUrl);
+      const file = new File([blob], getFileName("signature"), {
+        type: "image/png",
+      });
+
+      await SignatureAndTeeterService.signature.uploadAndCreate(
+        file,
+        getFileName("signature"),
+        employeeId,
+      );
+
+      queryClient.invalidateQueries({
+        queryKey: ["signatureListWithPresigned"],
+      });
+
+      setSignatureUrl(dataUrl); // update local preview
+      setUploadStatus("Signature uploaded successfully ✅");
+      setOpen(false);
+    } catch (err) {
+      console.error("Signature upload failed", err);
+      setUploadStatus("Signature upload failed ❌");
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      {!open ? (
+        <Button
+          onClick={() => setOpen(true)}
+          className="bg-blue-600 text-white w-full hover:bg-blue-700">
+          Open Signature Form
+        </Button>
+      ) : (
+        <div className="space-y-3">
+          <SignatureForm
+            onSubmit={handleSave}
+            onCancel={() => setOpen(false)}
+          />
+          {isUploading && <p className="text-sm text-gray-500">Uploading...</p>}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SignatureFormTrigger;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/Settings/uploadTeeterandSingature.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/Settings/uploadTeeterandSingature.tsx
new file mode 100644
index 000000000..3035d58c7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/Settings/uploadTeeterandSingature.tsx
@@ -0,0 +1,810 @@
+import React, { useState, useRef, useEffect } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+
+import { Button } from "@/shared/common/ui/button";
+import { Upload } from "lucide-react";
+
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/shared/common/ui/tabs";
+import { Input } from "@/shared/common/ui/input";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import {
+  deactivateSignature,
+  deactivateTeeter,
+  SignatureAndTeeterService,
+} from "@/record-management/services/api/signatureAndTeeterService";
+import {
+  useSignatureListWithPresigned,
+  useTeetersListWithPresigned,
+} from "../hooks/useSignatureAndTeeterWithPresigned";
+import { useTranslation } from "react-i18next";
+import { useDelegations } from "../hooks/useDelegations";
+import SignatureForm from "./signatureForm";
+import DelegationView from "@/record-management/common/DelegationView";
+import { XSSUploadValidator } from "@/shared/services/validation/XSSUploadValidator";
+import { SVGContentValidator } from "@/shared/services/validation/SVGContentValidator";
+import { EmbeddedContentValidator } from "@/shared/services/validation/EmbeddedContentValidator";
+import { MagicByteDetector } from "@/shared/services/validation/MagicByteDetector";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import StampGenerator, {
+  type StampBlock,
+} from "./StampGenerator";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+
+export type UploadedTeeter = {
+  id: string;
+  url: string;
+  name?: string;
+  locale?: string;
+};
+
+type TeeterLanguage = "am" | "en" | "both";
+type TeeterUploadLocale = "am" | "en" | null;
+
+const UploadTeeterAndSignature = () => {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [uploadStatus, setUploadStatus] = useState<string>("");
+  const [isUploading, setIsUploading] = useState(false);
+  const [customFileName, setCustomFileName] = useState<string>("");
+  const { t } = useTranslation();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const queryClient = useQueryClient();
+  const { userDetails, selectedPosition } = useAuthUser();
+  const employeeId = userDetails?.employee?.[0]?.id ?? "";
+  const employeePositionId =
+    userDetails?.employee?.filter((e) => e.positions?.length > 0)?.[0]
+      ?.positions?.[0]?.employeePositionId ?? "";
+  const { data: signatureData } = useSignatureListWithPresigned(employeeId);
+  const { data: teeterData } = useTeetersListWithPresigned();
+  const { handleError } = useErrorHandler(t);
+  const signatureUrl = signatureData?.presignedSignatureUrl ?? null;
+  const signatureId = signatureData?.signatureId ?? null;
+  const teeters = teeterData?.presignedTeeters ?? [];
+  const [localSignatureUrl, setLocalSignatureUrl] = useState<string | null>(
+    null,
+  );
+  const isDelegated = userDetails?.employee?.some((emp) =>
+    emp.positions?.some((pos) => pos.hasDelegated),
+  );
+  const [openSignatureForm, setOpenSignatureForm] = useState(false);
+  const [showLanguagePicker, setShowLanguagePicker] = useState(false);
+  const [teeterLanguage, setTeeterLanguage] = useState<TeeterLanguage | "">("");
+  const [uploadLocale, setUploadLocale] = useState<"am" | "en" | "">("");
+  const [stampBlocks, setStampBlocks] = useState<StampBlock[] | null>(null);
+  const [generatedTeeterPreview, setGeneratedTeeterPreview] = useState<
+    string | null
+  >(null);
+
+  const resolveGeneratedTeeterLocale = (
+    language: TeeterLanguage | "",
+  ): TeeterUploadLocale | undefined => {
+    if (language === "am" || language === "en") {
+      return language;
+    }
+    if (language === "both") {
+      return null;
+    }
+    return undefined;
+  };
+
+  const buildStampBlocks = (language: TeeterLanguage): StampBlock[] => {
+    const personName = userDetails?.name;
+    const positionName = selectedPosition?.name;
+
+    if (!personName || !positionName) {
+      return [];
+    }
+
+    if (language === "am") {
+      return [{ name: personName.am, position: positionName.am }];
+    }
+    if (language === "en") {
+      return [{ name: personName.en, position: positionName.en }];
+    }
+    return [
+      { name: personName.am, position: positionName.am },
+      { name: personName.en, position: positionName.en },
+    ];
+  };
+
+  const handleStartGenerateTeeter = () => {
+    setShowLanguagePicker(true);
+    setTeeterLanguage("");
+    setStampBlocks(null);
+    setGeneratedTeeterPreview(null);
+  };
+
+  const handleConfirmGenerateTeeter = () => {
+    if (!teeterLanguage) return;
+    const blocks = buildStampBlocks(teeterLanguage);
+    if (
+      blocks.length === 0 ||
+      blocks.some((b) => !b.name?.trim() || !b.position?.trim())
+    ) {
+      setUploadStatus(t("signatureUpload.missingEmployeeData"));
+      return;
+    }
+    setStampBlocks(blocks);
+    setShowLanguagePicker(false);
+  };
+
+  const handleCancelGenerateTeeter = () => {
+    setShowLanguagePicker(false);
+    setTeeterLanguage("");
+    setStampBlocks(null);
+    setGeneratedTeeterPreview(null);
+    setUploadLocale("");
+  };
+
+  const handleGeneratedTeeterUpload = async () => {
+    if (!generatedTeeterPreview) {
+      setUploadStatus(t("signatureUpload.selectPngFirst"));
+      return;
+    }
+
+    setIsUploading(true);
+    setUploadStatus(t("signatureUpload.uploading"));
+
+    try {
+      const blob = await (await fetch(generatedTeeterPreview)).blob();
+      const generatedName = getGeneratedTeeterFileName();
+      const file = new File([blob], generatedName, {
+        type: "image/png",
+      });
+
+      const generatedLocale = resolveGeneratedTeeterLocale(teeterLanguage);
+      if (generatedLocale === undefined) {
+        setUploadStatus(t("signatureUpload.selectTeeterLanguage"));
+        return;
+      }
+
+      await SignatureAndTeeterService.teeter.uploadAndCreate(
+        file,
+        generatedName,
+        employeePositionId,
+        generatedLocale,
+      );
+      queryClient.invalidateQueries({ queryKey: ["teetersListWithPresigned"] });
+      setCustomFileName("");
+      setStampBlocks(null);
+      setGeneratedTeeterPreview(null);
+      setUploadStatus(t("signatureUpload.uploadSuccess"));
+    } catch (error) {
+      handleError(error);
+      setUploadStatus(t("signatureUpload.uploadFailed"));
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const handleDrawnSignatureUpload = async (
+    dataUrl: string,
+    fileName: string,
+  ) => {
+    setIsUploading(true);
+    setUploadStatus(t("signatureUpload.uploading"));
+
+    try {
+      // convert dataUrl -> file
+      const blob = await (await fetch(dataUrl)).blob();
+      const file = new File(
+        [blob],
+        fileName?.trim() ? `${fileName}.png` : getFileName("signature"),
+        { type: "image/png" },
+      );
+
+      await SignatureAndTeeterService.signature.uploadAndCreate(
+        file,
+        file.name,
+        employeeId,
+      );
+
+      queryClient.invalidateQueries({
+        queryKey: ["signatureListWithPresigned"],
+      });
+
+      setLocalSignatureUrl(dataUrl); // local preview
+      setUploadStatus(t("signatureUpload.uploadSuccess"));
+      setOpenSignatureForm(false);
+    } catch (err) {
+      handleError(err);
+      console.error("Signature upload failed", err);
+      setUploadStatus(t("signatureUpload.uploadFailed"));
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  // sync with API data
+  useEffect(() => {
+    if (signatureUrl) {
+      setLocalSignatureUrl(signatureUrl);
+    }
+  }, [signatureUrl]);
+  const getBaseName = () => userDetails?.username ?? "file";
+  const getFileName = (type: "signature" | "teeter") => {
+    const fallback = getBaseName();
+    const namePart = customFileName.trim() || fallback;
+    return `${namePart}.png`;
+  };
+
+  const getGeneratedTeeterFileName = () => {
+    const fallback = getBaseName();
+    const base = (customFileName.trim() || fallback)
+      .toLowerCase()
+      .replace(/\s+/g, "-");
+    const languageSuffix =
+      teeterLanguage === "am"
+        ? "amharic"
+        : teeterLanguage === "en"
+          ? "english"
+          : "amharic-english";
+    return `${base}-${languageSuffix}.png`;
+  };
+
+  const handleTeeterRemove = async (id: string) => {
+    try {
+      setUploadStatus(t("signatureUpload.removing"));
+      await deactivateTeeter(id);
+      queryClient.invalidateQueries({ queryKey: ["teetersListWithPresigned"] });
+      setUploadStatus(t("signatureUpload.removedSuccess"));
+    } catch (err) {
+      console.error(t("signatureUpload.removeTeeterFailed"), err);
+      setUploadStatus(t("signatureUpload.removeFailed"));
+    }
+  };
+
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setUploadStatus("");
+
+    // Step 1: Validate file metadata (name, extension, MIME type, size)
+    const validationResult = await XSSUploadValidator.validateFileForUpload(
+      file,
+      {
+        allowedMimeTypes: ["image/jpeg", "image/png", "image/gif"],
+        allowedExtensions: [".jpg", ".jpeg", ".png", ".gif"],
+        maxSizeMB: 10,
+        uploadContext: "signature",
+      },
+    );
+
+    if (!validationResult.isValid) {
+      const errorMsg =
+        validationResult.clientValidation.fileName?.error ||
+        validationResult.clientValidation.extension?.error ||
+        validationResult.clientValidation.mimeType?.error ||
+        validationResult.clientValidation.size?.error ||
+        "File validation failed";
+      setUploadStatus(errorMsg);
+      setSelectedFile(null);
+      setPreviewUrl(null);
+      if (fileInputRef.current) fileInputRef.current.value = "";
+      return;
+    }
+
+    // Step 2: Read file content and validate magic bytes
+    try {
+      const fileBuffer = await file.arrayBuffer();
+      const uint8Array = new Uint8Array(fileBuffer);
+
+      // Detect actual file type from magic bytes
+      const detectedType = MagicByteDetector.detectFileType(uint8Array);
+
+      // If magic bytes can't be detected, allow the file if declared type is allowed
+      // This prevents false positives for valid image files with non-standard headers
+      if (!detectedType) {
+        const allowedMimes = ["image/jpeg", "image/png", "image/gif"];
+        if (!allowedMimes.includes(file.type)) {
+          setUploadStatus(
+            `File type ${file.type} is not allowed. Only PNG, JPEG, and GIF images are supported.`,
+          );
+          setSelectedFile(null);
+          setPreviewUrl(null);
+          if (fileInputRef.current) fileInputRef.current.value = "";
+          console.warn(`File type not allowed: ${file.name} (${file.type})`);
+          return;
+        }
+        // Allow the file to proceed with declared type console.log(`Magic byte detection skipped for file: ${file.name}. Using declared type: ${file.type}`);
+      }
+
+      // Check if detected type matches declared type (only if detected)
+      if (detectedType) {
+        const mimeMatch = MagicByteDetector.validateMimeTypeMatch(
+          uint8Array,
+          file.type,
+        );
+
+        if (!mimeMatch) {
+          const detectedMime =
+            typeof detectedType === "string"
+              ? detectedType
+              : detectedType?.mime;
+          const detectedDesc =
+            MagicByteDetector.getFileTypeDescription(detectedMime);
+          setUploadStatus(
+            `File type mismatch detected. File appears to be ${detectedDesc}, not an image. Upload blocked for security.`,
+          );
+          setSelectedFile(null);
+          setPreviewUrl(null);
+          if (fileInputRef.current) fileInputRef.current.value = "";
+          console.warn(
+            `File type mismatch: declared=${file.type}, detected=${detectedMime}`,
+          );
+          return;
+        }
+      }
+
+      // Step 3: Scan for embedded XSS attacks (MUST happen regardless of magic byte detection)
+      const contentStr = new TextDecoder().decode(uint8Array);
+
+      // Check for XSS patterns using the validator
+      const hasXSSPatterns = EmbeddedContentValidator.containsXSSPatterns(
+        contentStr,
+        file.type,
+      );
+
+      // Additional aggressive check for common attack vectors
+      const maliciousPatterns = [
+        /<script/i,
+        /javascript:/i,
+        /on\w+\s*=/i, // onclick=, onload=, etc.
+        /<iframe/i,
+        /<object/i,
+        /<embed/i,
+        /eval\(/i,
+        /expression\(/i,
+        /vbscript:/i,
+        /data:text\/html/i,
+        /alert\(/i,
+        /document\.domain/i,
+        /document\.write/i,
+      ];
+
+      const hasAggressivePatterns = maliciousPatterns.some((pattern) =>
+        pattern.test(contentStr),
+      );
+
+      if (hasXSSPatterns || hasAggressivePatterns) {
+        const threatLevel = EmbeddedContentValidator.getThreatLevel(
+          contentStr,
+          file.type,
+        );
+        setUploadStatus(
+          `File contains potentially malicious content (Threat Level: ${threatLevel}). Upload blocked for security.`,
+        );
+        setSelectedFile(null);
+        setPreviewUrl(null);
+        if (fileInputRef.current) fileInputRef.current.value = "";
+        console.warn(
+          `XSS threat detected in file: ${file.name}, Threat Level: ${threatLevel}, Patterns found: ${hasXSSPatterns ? "validator" : ""} ${hasAggressivePatterns ? "aggressive" : ""}`,
+        );
+        return;
+      }
+
+      // Step 4: Additional SVG-specific validation if file is SVG
+      if (
+        file.type === "image/svg+xml" ||
+        file.name.toLowerCase().endsWith(".svg")
+      ) {
+        const svgValidation = SVGContentValidator.validateSVGContent(
+          uint8Array,
+          file.name,
+        );
+        if (!svgValidation.isValid) {
+          setUploadStatus(svgValidation.error || "SVG file validation failed");
+          setSelectedFile(null);
+          setPreviewUrl(null);
+          if (fileInputRef.current) fileInputRef.current.value = "";
+          console.warn(`SVG validation failed for file: ${file.name}`);
+          return;
+        }
+      }
+
+      // All validations passed - create preview
+      const preview = URL.createObjectURL(file);
+      setSelectedFile(file);
+      setPreviewUrl(preview);
+    } catch (error) {
+      const errorMsg =
+        error instanceof Error
+          ? error.message
+          : "Failed to validate file content";
+      setUploadStatus(`Error validating file: ${errorMsg}`);
+      setSelectedFile(null);
+      setPreviewUrl(null);
+      if (fileInputRef.current) fileInputRef.current.value = "";
+      console.error("File content validation error:", error);
+    }
+  };
+
+  const handleUpload = async (type: "signature" | "teeter") => {
+    if (!selectedFile)
+      return setUploadStatus(t("signatureUpload.selectPngFirst"));
+
+    setIsUploading(true);
+    setUploadStatus(t("signatureUpload.uploading"));
+
+    try {
+      if (type === "signature") {
+        if (signatureUrl) {
+          setUploadStatus(t("signatureUpload.signatureExists"));
+          setIsUploading(false);
+          return;
+        }
+
+        await SignatureAndTeeterService.signature.uploadAndCreate(
+          selectedFile,
+          getFileName("signature"),
+          employeeId,
+        );
+        queryClient.invalidateQueries({
+          queryKey: ["signatureListWithPresigned"],
+        });
+      } else {
+        await SignatureAndTeeterService.teeter.uploadAndCreate(
+          selectedFile,
+          getFileName("teeter"),
+          employeePositionId,
+          uploadLocale || undefined,
+        );
+        queryClient.invalidateQueries({
+          queryKey: ["teetersListWithPresigned"],
+        });
+      }
+      setCustomFileName("");
+      setSelectedFile(null);
+      setPreviewUrl(null);
+      setUploadStatus(t("signatureUpload.uploadSuccess"));
+      if (fileInputRef.current) fileInputRef.current.value = "";
+    } catch (error) {
+      handleError(error);
+      setUploadStatus(t("signatureUpload.uploadFailed"));
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const handleRemove = async () => {
+    if (!signatureId) return;
+
+    try {
+      setUploadStatus(t("signatureUpload.removing"));
+      await deactivateSignature(signatureId);
+      queryClient.invalidateQueries({
+        queryKey: ["signatureListWithPresigned"],
+      });
+      setUploadStatus(t("signatureUpload.removedSuccess"));
+      setLocalSignatureUrl(null);
+    } catch (error) {
+      console.error(t("signatureUpload.removeFailed"), error);
+      setUploadStatus(t("signatureUpload.removeTeeterFailed"));
+    }
+  };
+
+  return isDelegated ? (
+    <DelegationView />
+  ) : (
+    <div className="p-4 w-full max-w-screen-md mx-auto mt-3">
+      <Tabs
+        defaultValue="signature"
+        className="w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg">
+        <TabsList className="flex w-full rounded-t-lg bg-gradient-to-r from-primary-400 to-primary-600 text-white font-semibold dark:from-gray-700 dark:to-gray-600 dark:text-gray-200">
+          <TabsTrigger
+            value="signature"
+            className="w-1/2 py-1 hover:bg-primary-500 dark:hover:bg-gray-500 cursor-pointer dark:text-gray-200 dark:data-[state=active]:bg-gray-600">
+            {t("signatureUpload.signature")}
+          </TabsTrigger>
+          <TabsTrigger
+            value="teeter"
+            className="w-1/2 py-1 hover:bg-primary-500 dark:hover:bg-gray-500 cursor-pointer dark:text-gray-200 dark:data-[state=active]:bg-gray-600">
+            {t("signatureUpload.teeter")}
+          </TabsTrigger>
+        </TabsList>
+
+        {/* Signature Tab */}
+        <TabsContent value="signature" className="p-4 space-y-6">
+          {localSignatureUrl ? (
+            // same uploaded signature section you already have
+            <div className="space-y-3">
+              <p className="text-sm text-gray-600 dark:text-gray-300">
+                {t("signatureUpload.uploadSignature")}
+              </p>
+              <div className="w-full max-w-xs mx-auto border border-gray-200 dark:border-gray-600 rounded-lg p-4 dark:bg-gray-700">
+                <img
+                  src={localSignatureUrl}
+                  alt="Uploaded signature"
+                  className="max-h-32 w-full object-contain"
+                />
+              </div>
+              <Button
+                onClick={handleRemove}
+                className="bg-red-600 text-white hover:bg-red-700 w-full">
+                {t("signatureUpload.remove")}
+              </Button>
+            </div>
+          ) : (
+            <div className="space-y-4">
+              {!openSignatureForm ? (
+                // 👉 File upload section
+                <div className="border-2 border-dashed border-primary-300 dark:border-primary-600 rounded-lg p-6 text-center space-y-4">
+                  <Input
+                    type="text"
+                    placeholder={t("signatureUpload.enterFileName")}
+                    value={customFileName}
+                    onChange={(e) => setCustomFileName(e.target.value)}
+                    className="w-full dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600"
+                  />
+                  <Input
+                    type="file"
+                    accept="image/png"
+                    onChange={handleFileChange}
+                    className="w-full dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600"
+                  />
+
+                  {previewUrl && (
+                    <div className="space-y-2">
+                      <p className="text-sm text-gray-600 dark:text-gray-300">
+                        {t("signatureUpload.preview")}:
+                      </p>
+                      <div className="w-full max-w-xs mx-auto border border-gray-200 dark:border-gray-600 rounded-lg p-4 dark:bg-gray-700">
+                        <img
+                          src={previewUrl}
+                          alt="Signature Preview"
+                          className="max-h-32 w-full object-contain"
+                        />
+                      </div>
+                    </div>
+                  )}
+
+                  <Button
+                    onClick={() => handleUpload("signature")}
+                    disabled={!selectedFile || isUploading}
+                    className="bg-primary-600 text-white disabled:bg-primary-300 w-full">
+                    {isUploading
+                      ? t("signatureUpload.uploading")
+                      : t("signatureUpload.upload")}{" "}
+                    <Upload />
+                  </Button>
+
+                  <Button
+                    onClick={() => setOpenSignatureForm(true)}
+                    className="bg-blue-600 text-white w-full hover:bg-blue-700">
+                    {t("signatureUpload.openSignatureForm")}
+                  </Button>
+                </div>
+              ) : (
+                // 👉 Signature form section
+                <div className="border-2 border-dashed border-primary-300 dark:border-primary-600 rounded-lg p-6 space-y-4">
+                  <Input
+                    type="text"
+                    placeholder={t("signatureUpload.enterFileName")}
+                    value={customFileName}
+                    onChange={(e) => setCustomFileName(e.target.value)}
+                    className="w-full dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600"
+                  />
+
+                  <SignatureForm
+                    onSubmit={(dataUrl) =>
+                      handleDrawnSignatureUpload(dataUrl, customFileName)
+                    }
+                    onCancel={() => setOpenSignatureForm(false)}
+                  />
+                </div>
+              )}
+            </div>
+          )}
+        </TabsContent>
+
+        {/* Teeter Tab */}
+        <TabsContent value="teeter" className="p-4 space-y-6">
+          {teeters.length > 0 && (
+            <div className="space-y-6">
+              {teeters.map(({ id, url }) => (
+                <div key={id} className="space-y-3">
+                  <p className="text-sm text-gray-600 dark:text-gray-300">
+                    {t("signatureUpload.uploadTeeter")}
+                  </p>
+                  <div className="w-full max-w-xs mx-auto border border-gray-200 dark:border-gray-600 rounded-lg p-4 dark:bg-gray-700">
+                    <img
+                      src={url}
+                      alt="Uploaded teeter"
+                      className="max-h-32 w-full object-contain"
+                    />
+                  </div>
+                  <Button
+                    onClick={() => handleTeeterRemove(id)}
+                    className="bg-red-600 text-white hover:bg-red-700 w-full">
+                    {t("signatureUpload.remove")}
+                  </Button>
+                </div>
+              ))}
+            </div>
+          )}
+
+          <div className="border-2 border-dashed border-primary-300 dark:border-primary-600 rounded-lg p-6 text-center space-y-4">
+            {!stampBlocks && !showLanguagePicker && (
+              <Button
+                type="button"
+                onClick={handleStartGenerateTeeter}
+                className="w-full bg-blue-600 text-white hover:bg-blue-700"
+              >
+                {t("signatureUpload.generateTeeter")}
+              </Button>
+            )}
+
+            {showLanguagePicker && (
+              <div className="space-y-4 text-left">
+                <p className="text-sm font-medium text-gray-700 dark:text-gray-200">
+                  {t("signatureUpload.selectTeeterLanguage")}
+                </p>
+                <Select
+                  value={teeterLanguage}
+                  onValueChange={(value) =>
+                    setTeeterLanguage(value as TeeterLanguage)
+                  }
+                >
+                  <SelectTrigger className="w-full dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600">
+                    <SelectValue
+                      placeholder={t("signatureUpload.selectTeeterLanguage")}
+                    />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="am">
+                      {t("signatureUpload.languageAmharic")}
+                    </SelectItem>
+                    <SelectItem value="en">
+                      {t("signatureUpload.languageEnglish")}
+                    </SelectItem>
+                    <SelectItem value="both">
+                      {t("signatureUpload.languageBoth")}
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+                <div className="flex gap-2">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={handleCancelGenerateTeeter}
+                    className="flex-1 dark:border-gray-600 dark:text-gray-200"
+                  >
+                    {t("signatureUpload.cancelGenerateTeeter")}
+                  </Button>
+                  <Button
+                    type="button"
+                    onClick={handleConfirmGenerateTeeter}
+                    disabled={!teeterLanguage}
+                    className="flex-1 bg-primary-600 text-white disabled:bg-primary-300"
+                  >
+                    {t("signatureUpload.confirmGenerateTeeter")}
+                  </Button>
+                </div>
+              </div>
+            )}
+
+            {stampBlocks && (
+              <div className="space-y-4 text-left">
+                <StampGenerator
+                  blocks={stampBlocks}
+                  onPreviewChange={setGeneratedTeeterPreview}
+                />
+                <Button
+                  type="button"
+                  onClick={() => void handleGeneratedTeeterUpload()}
+                  disabled={!generatedTeeterPreview || isUploading}
+                  className="w-full bg-primary-600 text-white disabled:bg-primary-300"
+                >
+                  {isUploading
+                    ? t("signatureUpload.uploading")
+                    : t("signatureUpload.uploadGeneratedTeeter")}{" "}
+                  <Upload className="ml-2 h-4 w-4" />
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={handleCancelGenerateTeeter}
+                  className="w-full dark:border-gray-600 dark:text-gray-200"
+                >
+                  {t("signatureUpload.cancelGenerateTeeter")}
+                </Button>
+              </div>
+            )}
+
+            {!stampBlocks && (
+              <>
+                <Input
+                  type="text"
+                  placeholder={t("signatureUpload.enterFileName")}
+                  value={customFileName}
+                  onChange={(e) => setCustomFileName(e.target.value)}
+                  className="w-full dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600"
+                />
+                <div className="text-left space-y-1">
+                  <p className="text-sm font-medium text-gray-700 dark:text-gray-200">
+                    {t("signatureUpload.selectTeeterLanguage")}
+                  </p>
+                  <Select
+                    value={uploadLocale}
+                    onValueChange={(v) => setUploadLocale(v as "am" | "en")}
+                  >
+                    <SelectTrigger className="w-full dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600">
+                      <SelectValue
+                        placeholder={t("signatureUpload.selectTeeterLanguage")}
+                      />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="am">
+                        {t("signatureUpload.languageAmharic")}
+                      </SelectItem>
+                      <SelectItem value="en">
+                        {t("signatureUpload.languageEnglish")}
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <Input
+                  type="file"
+                  accept="image/png"
+                  onChange={handleFileChange}
+                  ref={fileInputRef}
+                  className="w-full dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600"
+                />
+                <p className="text-primary-700 dark:text-primary-400 font-medium">
+                  {t("signatureUpload.uploadTeeterNote")}
+                </p>
+
+                {previewUrl && (
+                  <div className="space-y-2">
+                    <p className="text-sm text-gray-600 dark:text-gray-300">
+                      {t("signatureUpload.preview")}:
+                    </p>
+                    <div className="w-full max-w-xs mx-auto border border-gray-200 dark:border-gray-600 rounded-lg p-4 dark:bg-gray-700">
+                      <img
+                        src={previewUrl}
+                        alt="Teeter Preview"
+                        className="max-h-32 w-full object-contain"
+                      />
+                    </div>
+                  </div>
+                )}
+                <Button
+                  onClick={() => handleUpload("teeter")}
+                  disabled={!selectedFile || isUploading}
+                  className="bg-primary-600 text-white disabled:bg-primary-300 w-full">
+                  {isUploading
+                    ? t("signatureUpload.uploading")
+                    : t("signatureUpload.upload")}{" "}
+                  <Upload />
+                </Button>
+              </>
+            )}
+          </div>
+        </TabsContent>
+      </Tabs>
+
+      {/* Upload Status */}
+      {uploadStatus && (
+        <p
+          className={`mt-4 text-center font-semibold ${uploadStatus.includes("failed") ? "text-red-600 dark:text-red-400" : "text-primary-700 dark:text-primary-400"
+            }`}>
+          {uploadStatus}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default UploadTeeterAndSignature;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/collaborations/CollaborationCommentsDialog.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/collaborations/CollaborationCommentsDialog.tsx
new file mode 100644
index 000000000..91152e390
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/collaborations/CollaborationCommentsDialog.tsx
@@ -0,0 +1,568 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import {
+  Loader2,
+  MessageSquare,
+  Pencil,
+  RotateCcw,
+  Trash2,
+} from "lucide-react";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+
+import { useRecordCollaboratorComments } from "../hooks/useRecordCollaboratorComments";
+import { useMyCollaborations } from "../hooks/useMyCollaborations";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { Button } from "@/shared/common/ui/button";
+import { Card, CardContent } from "@/shared/common/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { ScrollArea } from "@/shared/common/ui/scroll-area";
+import { Textarea } from "@/shared/common/ui/textarea";
+import { Badge } from "@/shared/common/ui/badge";
+import { Avatar, AvatarFallback } from "@/shared/common/ui/avatar";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+
+interface CollaborationCommentsDialogProps {
+  open: boolean;
+  onClose: () => void;
+  recordId: string;
+  contentId?: string;
+  collaborationId?: string;
+  recordStatus: string;
+}
+
+const formatCommentTime = (
+  timestamp: string,
+  locale: string,
+  fallback: string | null | undefined,
+) => {
+  if (locale.startsWith("am") && fallback) {
+    return fallback;
+  }
+
+  const date = new Date(timestamp);
+  if (Number.isNaN(date.getTime())) {
+    return fallback || "";
+  }
+
+  return date.toLocaleString();
+};
+
+const buildInitials = (name: string) =>
+  name
+    .split(" ")
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase() ?? "")
+    .join("") || "C";
+
+const CollaborationCommentsDialog: React.FC<
+  CollaborationCommentsDialogProps
+> = ({ open, onClose, recordId, contentId, collaborationId, recordStatus }) => {
+  const { t, i18n } = useTranslation();
+  const localizedName = useLocalizedName();
+  const { handleError } = useErrorHandler(t);
+  const { signCollaboration, signStatus } = useMyCollaborations();
+  const { selectedPosition, activePositionLookupId } = useAuthUser();
+  const {
+    comments,
+    isLoading,
+    isFetching,
+    error,
+    createComment,
+    updateComment,
+    deleteComment,
+    isCreatingComment,
+    isUpdatingComment,
+    isDeletingComment,
+  } = useRecordCollaboratorComments({
+    recordId,
+    contentId,
+    collaborationId,
+    enabled: open,
+  });
+
+  const [newComment, setNewComment] = useState("");
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editingText, setEditingText] = useState("");
+  const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
+  const prevErrorRef = useRef<unknown>(null);
+  const currentEmployeePositionId =
+    selectedPosition?.employeePositionId ||
+    selectedPosition?.id ||
+    activePositionLookupId;
+
+  useEffect(() => {
+    if (error && error !== prevErrorRef.current) {
+      prevErrorRef.current = error;
+      void handleError(error);
+    }
+  }, [error, handleError]);
+
+  useEffect(() => {
+    if (!editingId) return;
+
+    const editingComment = comments.find((comment) => comment.id === editingId);
+    if (editingComment) {
+      setEditingText(editingComment.comment);
+    }
+  }, [comments, editingId]);
+
+  useEffect(() => {
+    if (!open) {
+      setNewComment("");
+      setEditingId(null);
+      setEditingText("");
+      setDeleteTargetId(null);
+    }
+  }, [open]);
+
+  const isBusy = isCreatingComment || isUpdatingComment || isDeletingComment;
+  const canManageOwnComment = Boolean(collaborationId);
+
+  const isCommentModificationAllowed =
+    collaborationId && recordStatus !== "Dispatched";
+  const sortedComments = useMemo(() => comments, [comments]);
+  const ownComment = useMemo(
+    () =>
+      sortedComments.find(
+        (comment) =>
+          comment.recordCollaborator?.employeePosition?.id ===
+          currentEmployeePositionId,
+      ) ?? null,
+    [currentEmployeePositionId, sortedComments],
+  );
+
+  const handleCreate = async () => {
+    const comment = newComment.trim();
+    if (!comment) {
+      toast.error(
+        t("collaboration.commentRequired", "Comment cannot be empty."),
+      );
+      return;
+    }
+
+    try {
+      await createComment({ recordId, comment });
+      setNewComment("");
+      toast.success(t("collaboration.commentSubmitted", "Comment submitted."));
+    } catch {
+      return;
+    }
+  };
+
+  const handleEditStart = (commentId: string, commentText: string) => {
+    setEditingId(commentId);
+    setEditingText(commentText);
+  };
+
+  const handleEditCancel = () => {
+    setEditingId(null);
+    setEditingText("");
+  };
+
+  const handleUpdate = async () => {
+    const comment = editingText.trim();
+    if (!editingId || !comment) {
+      toast.error(
+        t("collaboration.commentRequired", "Comment cannot be empty."),
+      );
+      return;
+    }
+
+    try {
+      await updateComment({ id: editingId, comment });
+      toast.success(
+        t("collaboration.commentUpdated", "Comment updated successfully."),
+      );
+      setEditingId(null);
+      setEditingText("");
+    } catch {
+      return;
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!deleteTargetId) return;
+
+    try {
+      await deleteComment(deleteTargetId);
+      toast.success(
+        t("collaboration.commentDeleted", "Comment deleted successfully."),
+      );
+      setDeleteTargetId(null);
+      setEditingId(null);
+      setEditingText("");
+    } catch {
+      return;
+    }
+  };
+
+  const handleAdjust = async (commentText: string) => {
+    if (!collaborationId) {
+      toast.error(
+        t(
+          "collaboration.adjustFailed",
+          "Failed to send the adjustment request.",
+        ),
+      );
+      return;
+    }
+
+    const trimmedComment = commentText.trim();
+    if (!trimmedComment) {
+      toast.error(
+        t(
+          "collaboration.adjustCommentMissing",
+          "No comment found to use for adjustment.",
+        ),
+      );
+      return;
+    }
+
+    try {
+      await signCollaboration({
+        payload: {
+          collabId: collaborationId,
+          signStatus: "adjustment_requested",
+          comment: trimmedComment,
+        },
+      });
+
+      toast.success(
+        t("collaboration.adjustSubmitted", "Adjustment sent successfully."),
+      );
+    } catch {
+      return;
+    }
+  };
+  return (
+    <>
+      <Dialog open={open} onOpenChange={(nextOpen) => !nextOpen && onClose()}>
+        <DialogContent className="sm:max-w-3xl w-full overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>
+              {t("collaboration.commentTitle", "Collaboration comments")}
+            </DialogTitle>
+            <DialogDescription>
+              {t(
+                "collaboration.commentDialogDescription",
+                "Review all collaborator comments here. If you have not commented yet, you can add yours below.",
+              )}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4 min-w-0">
+            <div className="rounded-2xl border border-border/60 bg-muted/20 p-3 min-w-0">
+              <div className="mb-3 flex items-center justify-between gap-3">
+                <div className="flex items-center gap-2">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+                    <MessageSquare className="h-5 w-5" />
+                  </div>
+                  <div>
+                    <p className="text-sm font-semibold">
+                      {t("collaboration.comments", "Comments")}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {sortedComments.length === 0
+                        ? t(
+                            "collaboration.commentsEmpty",
+                            "No comments have been added yet.",
+                          )
+                        : t(
+                            "collaboration.commentsCount",
+                            "{{count}} comment(s)",
+                            { count: sortedComments.length },
+                          )}
+                    </p>
+                  </div>
+                </div>
+                {(isLoading || isFetching) && (
+                  <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                )}
+              </div>
+
+              <ScrollArea className="max-h-[360px] overflow-y-scroll pr-3">
+                <div className="space-y-3">
+                  {sortedComments.length === 0 && !isLoading ? (
+                    <div className="rounded-2xl border border-dashed border-border/70 bg-background/70 px-4 py-8 text-center text-sm text-muted-foreground">
+                      {t(
+                        "collaboration.commentsEmptyState",
+                        "Once collaborators start commenting, their feedback will appear here.",
+                      )}
+                    </div>
+                  ) : (
+                    sortedComments.map((comment) => {
+                      const isOwnComment =
+                        comment.recordCollaborator?.employeePosition?.id ===
+                        currentEmployeePositionId;
+                      const isEditingThis = editingId === comment.id;
+                      const displayName =
+                        localizedName(
+                          comment.recordCollaborator?.employeePosition?.employee
+                            ?.name,
+                        ) || t("collaboration.unknownUser", "Unknown user");
+                      const updated =
+                        Boolean(comment.updatedAt) &&
+                        comment.updatedAt !== comment.createdAt;
+
+                      return (
+                        <Card
+                          key={comment.id}
+                          className="overflow-hidden rounded-2xl border border-border/70 bg-background/95 shadow-sm min-w-0"
+                        >
+                          <div className="h-1 w-full bg-gradient-to-r from-primary/80 via-primary/40 to-transparent" />
+                          <CardContent className="space-y-4 p-4 min-w-0">
+                            <div className="flex items-start justify-between gap-3">
+                              <div className="flex min-w-0 items-center gap-3">
+                                <Avatar className="h-10 w-10 border border-primary/10">
+                                  <AvatarFallback className="bg-primary/10 text-primary">
+                                    {buildInitials(displayName)}
+                                  </AvatarFallback>
+                                </Avatar>
+                                <div className="min-w-0">
+                                  <div className="flex flex-wrap items-center gap-2">
+                                    <p className="truncate text-sm font-semibold text-foreground">
+                                      {displayName}
+                                    </p>
+                                    {isOwnComment && (
+                                      <Badge
+                                        variant="secondary"
+                                        className="rounded-full"
+                                      >
+                                        {t(
+                                          "collaboration.yourComment",
+                                          "Your comment",
+                                        )}
+                                      </Badge>
+                                    )}
+                                    {updated && (
+                                      <Badge
+                                        variant="outline"
+                                        className="rounded-full"
+                                      >
+                                        {t("collaboration.edited", "Edited")}
+                                      </Badge>
+                                    )}
+                                  </div>
+                                  <p className="text-xs text-muted-foreground">
+                                    {formatCommentTime(
+                                      updated
+                                        ? comment.updatedAt
+                                        : comment.createdAt,
+                                      i18n.language,
+                                      updated
+                                        ? comment.amharicUpdatedAt
+                                        : comment.amharicCreatedAt,
+                                    )}
+                                  </p>
+                                </div>
+                              </div>
+
+                              {isOwnComment &&
+                                !isEditingThis &&
+                                canManageOwnComment &&
+                                isCommentModificationAllowed && (
+                                  <div className="flex items-center gap-2">
+                                    <Button
+                                      type="button"
+                                      variant="outline"
+                                      size="sm"
+                                      onClick={() =>
+                                        void handleAdjust(comment.comment)
+                                      }
+                                      disabled={isBusy || signStatus.isLoading}
+                                      className="gap-2 rounded-full"
+                                    >
+                                      <RotateCcw className="h-3.5 w-3.5" />
+                                      {t("collaboration.adjust", "Adjust")}
+                                    </Button>
+                                    <Button
+                                      type="button"
+                                      variant="outline"
+                                      size="sm"
+                                      onClick={() =>
+                                        handleEditStart(
+                                          comment.id,
+                                          comment.comment,
+                                        )
+                                      }
+                                      disabled={isBusy}
+                                      className="gap-2 rounded-full"
+                                    >
+                                      <Pencil className="h-3.5 w-3.5" />
+                                      {t("common.Edit", "Edit")}
+                                    </Button>
+                                    <Button
+                                      type="button"
+                                      variant="outline"
+                                      size="sm"
+                                      onClick={() =>
+                                        setDeleteTargetId(comment.id)
+                                      }
+                                      disabled={isBusy || signStatus.isLoading}
+                                      className="gap-2 rounded-full border-red-200 text-red-700 hover:bg-red-50 hover:text-red-700"
+                                    >
+                                      <Trash2 className="h-3.5 w-3.5" />
+                                      {t("common.delete", "Delete")}
+                                    </Button>
+                                  </div>
+                                )}
+                            </div>
+
+                            {isEditingThis ? (
+                              <div className="space-y-3">
+                                <Textarea
+                                  value={editingText}
+                                  onChange={(e) =>
+                                    setEditingText(e.target.value)
+                                  }
+                                  rows={4}
+                                  placeholder={t(
+                                    "collaboration.commentPlaceholder",
+                                    "Write your comment...",
+                                  )}
+                                  className="w-full max-w-full resize-none [field-sizing:fixed] break-all"
+                                />
+                                <div className="flex justify-end gap-2">
+                                  <Button
+                                    type="button"
+                                    variant="outline"
+                                    onClick={handleEditCancel}
+                                    disabled={isUpdatingComment}
+                                  >
+                                    {t("common.cancel", "Cancel")}
+                                  </Button>
+                                  <Button
+                                    type="button"
+                                    onClick={handleUpdate}
+                                    disabled={isUpdatingComment}
+                                  >
+                                    {isUpdatingComment && (
+                                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                    )}
+                                    {t("common.save", "Save")}
+                                  </Button>
+                                </div>
+                              </div>
+                            ) : (
+                              <p className="whitespace-pre-wrap break-all text-sm leading-6 text-muted-foreground min-w-0">
+                                {comment.comment}
+                              </p>
+                            )}
+                          </CardContent>
+                        </Card>
+                      );
+                    })
+                  )}
+                </div>
+              </ScrollArea>
+            </div>
+
+            {!ownComment &&
+              !isLoading &&
+              canManageOwnComment &&
+              isCommentModificationAllowed && (
+                <div className="rounded-2xl border border-border/60 bg-background p-4 shadow-sm">
+                  <div className="mb-3">
+                    <p className="text-sm font-semibold">
+                      {t("collaboration.addComment", "Add your comment")}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {t(
+                        "collaboration.singleCommentRule",
+                        "You can submit one comment for the current record version.",
+                      )}
+                    </p>
+                  </div>
+                  <Textarea
+                    value={newComment}
+                    onChange={(e) => setNewComment(e.target.value)}
+                    rows={4}
+                    placeholder={t(
+                      "collaboration.commentPlaceholder",
+                      "Write your comment...",
+                    )}
+                    disabled={isCreatingComment}
+                    className="w-full max-w-full resize-none [field-sizing:fixed] break-all"
+                  />
+                  <div className="mt-3 flex justify-end">
+                    <Button
+                      type="button"
+                      onClick={handleCreate}
+                      disabled={isCreatingComment}
+                      className="min-w-32"
+                    >
+                      {isCreatingComment && (
+                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      )}
+                      {t("collaboration.postComment", "Post comment")}
+                    </Button>
+                  </div>
+                </div>
+              )}
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={onClose}>
+              {t("collaboration.close", "Close")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <AlertDialog
+        open={Boolean(deleteTargetId)}
+        onOpenChange={(nextOpen) => !nextOpen && setDeleteTargetId(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t("collaboration.deleteCommentTitle", "Delete comment?")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t(
+                "collaboration.deleteCommentDescription",
+                "This will remove your current comment. You can add a fresh one again afterward.",
+              )}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeletingComment}>
+              {t("common.cancel", "Cancel")}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              disabled={isDeletingComment}
+              className="bg-red-600 hover:bg-red-700"
+            >
+              {isDeletingComment && (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              )}
+              {t("common.delete", "Delete")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+};
+
+export default CollaborationCommentsDialog;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/collaborations/approveCollaborationRecord.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/collaborations/approveCollaborationRecord.tsx
new file mode 100644
index 000000000..64dbddccf
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/collaborations/approveCollaborationRecord.tsx
@@ -0,0 +1,74 @@
+import React, { useCallback } from "react";
+import { toast } from "sonner";
+import EnhancedDynamicModal from "@/record-management/common/EnhancedDynamicModal";
+
+import { useTranslation } from "react-i18next";
+import { useMyCollaborations } from "../hooks/useMyCollaborations";
+
+interface ApproveCollaborationRecordProps {
+  collaborationId: string;
+  onSuccess: () => void;
+  onClose: () => void;
+}
+
+const ApproveCollaborationRecord: React.FC<ApproveCollaborationRecordProps> = ({
+  collaborationId,
+  onSuccess,
+  onClose,
+}) => {
+  const { signCollaboration, refetch, signStatus } = useMyCollaborations();
+
+  const { t } = useTranslation();
+
+  const handleApprove = useCallback(
+    async (data: any) => {
+      if (!collaborationId) {
+        toast.error("Invalid record ID");
+        return;
+      }
+      try {
+        const remark = data.remarks;
+        signCollaboration({
+          payload: {
+            collabId: collaborationId,
+            signStatus: "signed",
+            comment: remark || "No Comment/አስተያየት የለም",
+          },
+        }).then(() => {
+          toast.success(t("userRecord.Record approved successfully!"));
+          onSuccess();
+        });
+      } catch (error: any) {
+        toast.error(error.message || t("userRecord.Failed to approve record."));
+      }
+    },
+    [collaborationId, refetch, onSuccess]
+  );
+  return (
+    <EnhancedDynamicModal
+      open={true}
+      onClose={onClose}
+      title={t("userRecord.Approve Record")}
+      formConfig={{
+        fields: [
+          {
+            type: "textarea",
+            name: "remarks",
+            label: t("ApprovalPage.Remark"),
+            placeholder: t("ApprovalPage.Remark"),
+            required: false,
+          },
+        ],
+      }}
+      actionConfig={{
+        type: "forward",
+        onAction: handleApprove,
+        confirmText: t("userRecord.Confirm Approve"),
+        confirmVariant: "default",
+        isLoading: signStatus.isLoading,
+      }}
+    />
+  );
+};
+
+export default ApproveCollaborationRecord;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/collaborations/collaboration.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/collaborations/collaboration.tsx
new file mode 100644
index 000000000..073212887
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/collaborations/collaboration.tsx
@@ -0,0 +1,179 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+
+import Loader from "../../components/Loader/loader";
+
+import { Button } from "@/shared/common/ui/button";
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import {
+  CombinedFilterBar,
+  CombinedFilterField,
+} from "@/shared/components/filters/CombinedFilterBar";
+import { useMyCollaborations } from "../hooks/useMyCollaborations";
+import CollaborationsColumns from "./collaborationColumns";
+import { MyCollaborationsQuery } from "@/record-management/services/api/collaborationService";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { useCombinedFilters } from "@/shared/hooks/useCombinedFilters";
+import { useUnitConfiguration } from "@/shared/hooks/useUnitConfiguration";
+import DelegationView from "@/record-management/common/DelegationView";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { cleanFilterParams, FilterParams } from "@/shared/utils/filterParams";
+import { useState } from "react";
+
+const Collaborations = () => {
+  const { t } = useTranslation();
+  const [pageIndex, setPageIndex] = React.useState(0);
+  const pageSize = 10;
+  const localizedName = useLocalizedName();
+  const [statusFilter, setStatusFilter] = React.useState("All");
+  const combinedFilters = useCombinedFilters<FilterParams>();
+  const [liveSearch, setLiveSearch] = useState<{
+    key: string;
+    value: string;
+  } | null>(null); // ← add
+
+  const handleLiveSearch = (key: string, value: string) => {
+    if (!key || !value) {
+      setLiveSearch(null);
+      return;
+    }
+    setLiveSearch({ key, value });
+  };
+  const { userDetails } = useAuthUser();
+  const isDelegated = userDetails?.employee?.some((emp) =>
+    emp.positions.some((pos) => pos.hasDelegated),
+  );
+  const unitId = userDetails?.employee?.[0]?.unitId ?? "";
+  const { data: unitConfigData } = useUnitConfiguration(unitId, {
+    enabled: !!unitId,
+  });
+  const canRecordBeEditedByCollaborators =
+    unitConfigData?.data?.items?.[0]?.canRecordBeEditedByCollaborators ?? false;
+
+  const filterFields = React.useMemo<CombinedFilterField[]>(
+    () => [
+      {
+        key: "receiverPosition",
+        label: t("userRecord.ReceiverPosition"),
+        type: "text",
+      },
+      {
+        key: "receiverEmployee",
+        label: t("userRecord.ReceiverEmployee"),
+        type: "text",
+      },
+      { key: "subject", label: t("userRecord.Subject"), type: "text" },
+      { key: "reference", label: t("userRecord.Reference"), type: "text" },
+      { key: "letterName", label: t("viewDetail.fileName"), type: "text" },
+      {
+        key: "createdAt",
+        label: t("userRecord.Date"),
+        type: "dateRange",
+        fromKey: "fromCreatedAt",
+        toKey: "toCreatedAt",
+      },
+    ],
+    [t],
+  );
+
+  const filterParams = React.useMemo(() => {
+    const baseParams: MyCollaborationsQuery = {
+      skip: pageIndex * pageSize,
+      take: pageSize,
+      ...(combinedFilters.filters as MyCollaborationsQuery),
+    };
+
+    if (statusFilter !== "All") baseParams.signStatus = statusFilter;
+
+    const cleaned = cleanFilterParams(baseParams);
+
+    return liveSearch
+      ? { ...cleaned, [liveSearch.key]: liveSearch.value }
+      : cleaned;
+  }, [combinedFilters.filters, pageIndex, statusFilter, liveSearch]);
+
+  const { data, isLoading, isError, refetch } =
+    useMyCollaborations(filterParams);
+
+  const statusOptions = React.useMemo(
+    () => [
+      { value: "All", label: t("statusBar.All") },
+      { value: "draft", label: t("statusBar.InProgress") },
+      { value: "signed", label: t("statusBar.Accepted") },
+      { value: "rejected", label: t("statusBar.Rejected") },
+    ],
+    [t],
+  );
+
+  return isDelegated ? (
+    <DelegationView />
+  ) : (
+    <div className="flex flex-col gap-2 w-full overflow-x-auto">
+      <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-4 w-full mt-5">
+        <h4 className="text-xl font-medium">
+          {t("header.navigation.collaborations")}
+        </h4>
+
+        <CombinedFilterBar
+          fields={filterFields}
+          filters={combinedFilters.filters}
+          setFilter={combinedFilters.setFilter}
+          setFilters={combinedFilters.setFilters}
+          removeFilter={combinedFilters.removeFilter}
+          removeFilters={combinedFilters.removeFilters}
+          onFilterChange={() => setPageIndex(0)}
+          onLiveSearch={handleLiveSearch}
+        />
+      </div>
+
+      <div className="flex flex-wrap gap-2 mb-4">
+        {statusOptions.map((opt) => (
+          <Button
+            key={opt.value}
+            variant={statusFilter === opt.value ? "linkActive" : "link"}
+            onClick={() => {
+              setStatusFilter(opt.value);
+              setPageIndex(0);
+            }}
+            className="rounded-md text-sm sm:text-base">
+            {opt.label}
+          </Button>
+        ))}
+      </div>
+
+      <div className="w-full overflow-x-auto">
+        {isLoading ? (
+          <Loader />
+        ) : isError ? (
+          <div className="flex flex-col items-center justify-center h-full p-6 bg-red-50 border border-red-200 rounded-lg">
+            <p className="mt-2 text-lg text-red-600 text-center max-w-sm">
+              {t("userIncoming.Error loading records.")}
+            </p>
+          </div>
+        ) : (
+          <AdvancedTable
+            columns={CollaborationsColumns(
+              refetch,
+              localizedName,
+              canRecordBeEditedByCollaborators,
+            )}
+            data={data?.items || []}
+            tableName="Collaborations"
+            toolBarPosition="right"
+            itemCount={data?.count || 0}
+            pageIndex={pageIndex}
+            onPageChange={setPageIndex}
+            nextFunction={() => setPageIndex(pageIndex + 1)}
+            prevFunction={() => setPageIndex(Math.max(0, pageIndex - 1))}
+            refresh={refetch}
+            initialColumnVisibility={{
+              referenceNumber: false,
+            }}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Collaborations;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/collaborations/collaborationActions.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/collaborations/collaborationActions.tsx
new file mode 100644
index 000000000..c3b690e4d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/collaborations/collaborationActions.tsx
@@ -0,0 +1,374 @@
+import { CollaborationDto } from "@/record-management/services/api/collaborationService";
+import { getMyRecordCollaboratorComments } from "@/record-management/services/api/recordCollaboratorCommentsService";
+import { Button, getActionButtonVariant } from "@/shared/common/ui/button";
+import { t } from "i18next";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import ApproveCollaborationRecord from "./approveCollaborationRecord";
+import RejectCollaborationRecord from "./rejectCollaborationRecord";
+import CommentCollaborationRecord from "./commentCollaborationRecord";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import {
+  Banknote,
+  Edit3,
+  MessageSquare,
+  MoreVertical,
+  RotateCcw,
+  SquareCheckBig,
+} from "lucide-react";
+import { useMyCollaborations } from "../hooks/useMyCollaborations";
+import { useUnitConfiguration } from "@/shared/hooks/useUnitConfiguration";
+
+const CollaborationActionsComponent = ({
+  rowData,
+  refreshTable,
+  canRecordBeEditedByCollaborators,
+  showViewDetailButton = true,
+  fromTable = true,
+}: {
+  rowData: CollaborationDto;
+  refreshTable: () => void;
+  canRecordBeEditedByCollaborators?: boolean;
+  showViewDetailButton?: boolean;
+  fromTable?: boolean;
+}) => {
+  const navigate = useNavigate();
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [showApprove, setShowApprove] = useState<boolean>(false);
+  const [showReject, setShowReject] = useState<boolean>(false);
+  const [showComment, setShowComment] = useState<boolean>(false);
+  const queryClient = useQueryClient();
+  const { userDetails } = useAuthUser();
+  const { signCollaboration, signStatus } = useMyCollaborations();
+  const unitId = userDetails?.employee?.[0]?.unitId ?? "";
+  const { data: unitConfigData } = useUnitConfiguration(unitId, {
+    enabled: canRecordBeEditedByCollaborators === undefined && Boolean(unitId),
+  });
+  const currentUserId = userDetails?.id;
+  const contentId = rowData?.record?.content?.[0]?.id;
+  const canEditFromConfig =
+    canRecordBeEditedByCollaborators ??
+    unitConfigData?.data?.items?.[0]?.canRecordBeEditedByCollaborators ??
+    false;
+
+  const handleViewDetails = () => {
+    navigate(
+      `/record-management/collaborations/viewRecord/${rowData?.record?.id}`,
+      {
+        state: {
+          collaboration: rowData,
+          actionRowData: rowData,
+        },
+      },
+    );
+  };
+  const handleApproveClick = () => {
+    setShowApprove(true);
+  };
+  const handleRejectClick = () => {
+    setShowReject(true);
+  };
+  const handleEditClick = () => {
+    setDropdownOpen(false);
+    if (rowData?.record?.id) {
+      navigate(
+        `/record-management/userRecords/editUserRecord/${rowData.record.id}?from=collaborations`,
+      );
+    }
+  };
+  const handleCommentClick = () => {
+    setShowComment(true);
+  };
+  const handleAdjustClick = async () => {
+    setDropdownOpen(false);
+
+    if (!rowData?.id || !contentId) {
+      toast.error(
+        t(
+          "collaboration.adjustCommentMissing",
+          "No comment found to use for adjustment.",
+        ),
+      );
+      return;
+    }
+
+    try {
+      const myComments = await getMyRecordCollaboratorComments(rowData.id);
+      const currentComment = myComments.find(
+        (comment) => comment.recordContentId === contentId,
+      );
+
+      if (!currentComment?.comment?.trim()) {
+        toast.error(
+          t(
+            "collaboration.adjustCommentMissing",
+            "No comment found to use for adjustment.",
+          ),
+        );
+        return;
+      }
+
+      await signCollaboration({
+        payload: {
+          collabId: rowData.id,
+          signStatus: "team_rejected",
+          comment: currentComment.comment,
+        },
+      });
+
+      toast.success(
+        t("collaboration.adjustSubmitted", "Adjustment sent successfully."),
+      );
+      refreshTable();
+      queryClient.invalidateQueries({
+        queryKey: ["my-collaborations"],
+      });
+      queryClient.invalidateQueries({ queryKey: ["dashbordReport"] });
+    } catch (error: any) {
+      toast.error(
+        error?.message ||
+          t(
+            "collaboration.adjustFailed",
+            "Failed to send the adjustment request.",
+          ),
+      );
+    }
+  };
+  const isSignable = rowData.signStatus === "draft";
+  // "team_rejected" = collaborator commented (send-back). "rejected" = hard reject.
+  // In either state Edit is restricted to the record's creator.
+  const isRejectedOrCommented =
+    rowData.signStatus === "rejected" || rowData.signStatus === "team_rejected";
+  const isCreator =
+    Boolean(currentUserId) && currentUserId === rowData?.record?.userId;
+  // Once the collaborator has signed or hard-rejected, no further Edit /
+  // Comment should be possible from their side.
+  const isUserActionFinalized =
+    rowData.signStatus === "signed" || rowData.signStatus === "rejected";
+  const isEditable =
+    !isUserActionFinalized && (!isRejectedOrCommented || isCreator);
+  const canEdit = isEditable && canEditFromConfig;
+  const canAdjust = canEdit && false;
+  const canComment = !isUserActionFinalized;
+  // Hide the three-dot entirely when there's nothing to put in the menu —
+  // otherwise the dropdown opens to just the "Actions" header with no items.
+  const hasAnyAction = isSignable || canEdit || canComment;
+  return (
+    <>
+      {fromTable ? (
+        <div className="flex">
+          {showViewDetailButton && (
+            <Button variant={"viewDetail"} onClick={() => handleViewDetails()}>
+              {t("userRecord.View Detail")}
+            </Button>
+          )}
+
+          {hasAnyAction && (
+            <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" className="h-8 w-8 p-0">
+                  <MoreVertical className="h-4 w-4" />
+                  <span className="sr-only">
+                    {t("userIncoming.Open actions menu")}
+                  </span>
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                align="end"
+                onInteractOutside={(e) => {
+                  const target = e.target as HTMLElement;
+                  if (!target.closest('[role="dialog"]')) {
+                    setDropdownOpen(false);
+                  }
+                }}
+              >
+                <DropdownMenuLabel>{t("userRecord.Actions")}</DropdownMenuLabel>
+                {isSignable && (
+                  <DropdownMenuItem
+                    onSelect={handleApproveClick}
+                    className="cursor-pointer hover:!text-primary-700 !bg-transparent"
+                  >
+                    <SquareCheckBig className="mr-2 h-4 w-4" />
+                    {t("userRecord.Approve")}
+                  </DropdownMenuItem>
+                )}
+                {isSignable && (
+                  <DropdownMenuItem
+                    onSelect={handleRejectClick}
+                    className="cursor-pointer hover:!text-red-600 !bg-transparent !transition-colors duration-200"
+                  >
+                    <Banknote className="mr-2 h-4 w-4 text-red-600 group-hover:text-white transition-colors duration-200" />
+                    {t("statusBar.Reject")}
+                  </DropdownMenuItem>
+                )}
+                {canEdit && (
+                  <DropdownMenuItem
+                    onSelect={handleEditClick}
+                    className="cursor-pointer !bg-transparent"
+                  >
+                    <Edit3 className="mr-2 h-4 w-4" />
+                    {t("collaboration.edit", "Edit")}
+                  </DropdownMenuItem>
+                )}
+                {canAdjust && (
+                  <DropdownMenuItem
+                    onSelect={() => void handleAdjustClick()}
+                    disabled={signStatus.isLoading}
+                    className="cursor-pointer !bg-transparent"
+                  >
+                    <RotateCcw className="mr-2 h-4 w-4" />
+                    {t("collaboration.adjust", "Adjust")}
+                  </DropdownMenuItem>
+                )}
+                {canComment && (
+                  <DropdownMenuItem
+                    onSelect={handleCommentClick}
+                    className="cursor-pointer !bg-transparent"
+                  >
+                    <MessageSquare className="mr-2 h-4 w-4" />
+                    {t("collaboration.comment", "Comment")}
+                  </DropdownMenuItem>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+        </div>
+      ) : hasAnyAction ? (
+        <div className="flex flex-wrap gap-2">
+          {isSignable && (
+            <Button
+              variant={getActionButtonVariant("Approve")}
+              onClick={handleApproveClick}
+            >
+              <SquareCheckBig className="h-4 w-4" />
+              <span>
+                {t("userRecord.Approve")}
+              </span>
+            </Button>
+          )}
+
+          {isSignable && (
+            <Button
+              variant={getActionButtonVariant("Reject")}
+              onClick={handleRejectClick}
+            >
+              <Banknote className="h-4 w-4" />
+              <span>
+                {t("statusBar.Reject")}
+              </span>
+            </Button>
+          )}
+
+          {canEdit && (
+            <Button
+              variant={getActionButtonVariant("Edit")}
+              onClick={handleEditClick}
+            >
+              <Edit3 className="h-4 w-4" />
+              <span>
+                {t("collaboration.edit", "Edit")}
+              </span>
+            </Button>
+          )}
+
+          {canAdjust && (
+            <Button
+              variant={getActionButtonVariant("Adjustment")}
+              onClick={() => void handleAdjustClick()}
+              disabled={signStatus.isLoading}
+            >
+              <RotateCcw className="h-4 w-4" />
+              <span>
+                {t("collaboration.adjust", "Adjust")}
+              </span>
+            </Button>
+          )}
+
+          {canComment && (
+            <Button
+              variant={getActionButtonVariant("Comment")}
+              onClick={handleCommentClick}
+            >
+              <MessageSquare className="h-4 w-4" />
+              <span>
+                {t("collaboration.comment", "Comment")}
+              </span>
+            </Button>
+          )}
+        </div>
+      ) : null}
+
+      {showApprove && isSignable && (
+        <ApproveCollaborationRecord
+          collaborationId={rowData?.id as string}
+          onSuccess={() => {
+            setShowApprove(false);
+            refreshTable();
+            queryClient.invalidateQueries({
+              queryKey: ["my-collaborations"],
+            });
+            queryClient.invalidateQueries({ queryKey: ["dashbordReport"] });
+            navigate("/record-management/collaborations");
+          }}
+          onClose={() => {
+            setShowApprove(false);
+            refreshTable();
+            queryClient.invalidateQueries({
+              queryKey: ["my-collaborations"],
+            });
+            queryClient.invalidateQueries({ queryKey: ["dashbordReport"] });
+          }}
+        />
+      )}
+      {showReject && isSignable && (
+        <RejectCollaborationRecord
+          collaborationId={rowData?.id as string}
+          onSuccess={() => {
+            setShowReject(false);
+            refreshTable();
+            queryClient.invalidateQueries({
+              queryKey: ["my-collaborations"],
+            });
+            queryClient.invalidateQueries({ queryKey: ["dashbordReport"] });
+            navigate("/record-management/collaborations");
+          }}
+          onClose={() => {
+            setShowReject(false);
+            refreshTable();
+            queryClient.invalidateQueries({
+              queryKey: ["my-collaborations"],
+            });
+            queryClient.invalidateQueries({ queryKey: ["dashbordReport"] });
+          }}
+        />
+      )}
+      {showComment && (
+        <CommentCollaborationRecord
+          collaborationId={rowData?.id as string}
+          recordId={rowData?.record?.id as string}
+          contentId={rowData?.record?.content?.[0]?.id as string}
+          onClose={() => {
+            setShowComment(false);
+            refreshTable();
+            queryClient.invalidateQueries({
+              queryKey: ["my-collaborations"],
+            });
+            queryClient.invalidateQueries({ queryKey: ["dashbordReport"] });
+          }}
+          recordStatus={rowData?.record?.statusKey}
+        />
+      )}
+    </>
+  );
+};
+
+export default CollaborationActionsComponent;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/collaborations/collaborationActivity.ts b/apps/edr-freight-web/backoffice/src/record-management/components/collaborations/collaborationActivity.ts
new file mode 100644
index 000000000..6ebc62205
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/collaborations/collaborationActivity.ts
@@ -0,0 +1,55 @@
+// Local-only collaboration activity log shared between the detail-page
+// CollaborationPanel and the row-level action modals. No backend.
+
+export type EditEntry = {
+  action: "edit";
+  userId: string;
+  userName: string;
+  timestamp: string;
+  notes?: string;
+  taggedCollaboratorIds: string[];
+};
+
+export type CommentEntry = {
+  action: "comment";
+  userId: string;
+  userName: string;
+  timestamp: string;
+  comment: string;
+  taggedCollaboratorIds: string[];
+};
+
+export type ActivityEntry = EditEntry | CommentEntry;
+
+const STORAGE_PREFIX = "collab-activity:";
+
+export const loadActivity = (recordId: string): ActivityEntry[] => {
+  try {
+    const raw = localStorage.getItem(STORAGE_PREFIX + recordId);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+};
+
+export const saveActivity = (
+  recordId: string,
+  entries: ActivityEntry[],
+): void => {
+  try {
+    localStorage.setItem(STORAGE_PREFIX + recordId, JSON.stringify(entries));
+  } catch {
+    // localStorage may be unavailable (private mode, quota); fail quietly
+  }
+};
+
+export const appendActivity = (
+  recordId: string,
+  entry: ActivityEntry,
+): ActivityEntry[] => {
+  const next = [...loadActivity(recordId), entry];
+  saveActivity(recordId, next);
+  return next;
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/collaborations/collaborationColumns.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/collaborations/collaborationColumns.tsx
new file mode 100644
index 000000000..f49dfd13b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/collaborations/collaborationColumns.tsx
@@ -0,0 +1,226 @@
+import { CollaborationDto } from "@/record-management/services/api/collaborationService";
+import { renderStatus } from "@/record-management/utils/renderDetails";
+import { ColumnDef } from "@tanstack/react-table";
+import { t } from "i18next";
+import CollaborationActionsComponent from "./collaborationActions";
+import i18n from "@/i18n";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+const CollaborationsColumns = (
+  refetch: () => void,
+  localizedName: (name?: { am: string; en: string }) => string,
+  canRecordBeEditedByCollaborators: boolean,
+): ColumnDef<CollaborationDto>[] => [
+  {
+    id: "letterName",
+    header: () => t("viewDetail.fileName"),
+    accessorFn: (row) =>
+      row.record.referenceNumber ?? t("msg.noReferenceNumber"),
+    enableHiding: true,
+    cell: ({ row }) => {
+      const letterName = row.original.record.letterName;
+      return (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="max-w-[200px] truncate cursor-help">
+                {letterName}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{letterName}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
+    },
+  },
+  {
+    id: "referenceNumber",
+    header: () => t("viewDetail.referenceNumber"),
+    accessorFn: (row) =>
+      row.record.referenceNumber ?? t("msg.noReferenceNumber"),
+    enableHiding: true,
+    cell: ({ row }) => {
+      const referenceNumber =
+        row.original.record.referenceNumber ?? t("msg.noReferenceNumber");
+
+      return (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="max-w-[200px] truncate cursor-help">
+                {referenceNumber}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{referenceNumber}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
+    },
+  },
+  {
+    id: "receiverInfo",
+    header: () => t("ApprovalPage.Receiver"),
+    cell: ({ row }) => {
+      const rowData = row.original.record;
+      const recordTypeKey = rowData.recordTypeKey;
+      const isInternal =
+        recordTypeKey === "internal" ||
+        recordTypeKey === "internal_memo" ||
+        recordTypeKey === "direct";
+      const isExternal = recordTypeKey === "external";
+
+      // INTERNAL: receiver positions
+      const receiverPositions =
+        rowData.content?.flatMap(
+          (item) =>
+            item.receiverPositions?.map((rp: any) =>
+              localizedName(rp.position?.name),
+            ) || [],
+        ) || [];
+
+      // INTERNAL: receiver employees
+      const receiverEmployees =
+        rowData.content?.flatMap(
+          (item) =>
+            item.receiverEmployees?.map((re: any) =>
+              localizedName(re.employeePosition?.employee?.name),
+            ) || [],
+        ) || [];
+
+      const internalReceivers = [
+        ...receiverPositions,
+        ...receiverEmployees,
+      ].filter(Boolean);
+
+      // EXTERNAL: receiving units
+      const receivingUnits =
+        rowData.receivingUnits?.map((unitItem: any) =>
+          localizedName(unitItem.unit?.name),
+        ) || [];
+
+      // NON-SMART OFFICES (shown independently)
+      const nonSmartOffices = (rowData.content || []).flatMap(
+        (item) => item.nonSmartOfficeReceivers || [],
+      );
+
+      // EXTERNAL: combine receiving units + non-smart
+      const externalReceivers = [...receivingUnits].filter(Boolean);
+
+      // FINAL: receivers to show
+      const receiversToShow = [
+        ...(isInternal ? internalReceivers : []),
+        ...(isExternal ? externalReceivers : []),
+        ...nonSmartOffices, // always included
+      ].filter(Boolean);
+
+      return receiversToShow.length > 0 ? (
+        <div className="space-y-1">
+          {receiversToShow.map((receiver, i) => (
+            <div key={i}>{receiver}</div>
+          ))}
+        </div>
+      ) : (
+        <div className="text-gray-500">{t("userRecord.No receivers")}</div>
+      );
+    },
+    enableHiding: true,
+  },
+  {
+    header: () => t("userRecord.Subject"),
+    accessorFn: (row) => row.record.content[0]?.subject ?? "—",
+    id: "subject",
+    cell: ({ row }) => {
+      const subject = row.original.record.content[0]?.subject ?? "—";
+
+      return (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="max-w-[200px] truncate cursor-help">
+                {subject}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{subject}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
+    },
+  },
+  {
+    header: () => t("userRecord.Status"),
+    accessorFn: (row) => row.record.statusKey,
+    id: "status",
+    cell: ({ row }) => {
+      const status = row.original.record.statusKey;
+      return renderStatus(status, status);
+    },
+  },
+  {
+    header: () => t("userRecord.signStatus"),
+    accessorFn: (row) => row.signStatus,
+    id: "signStatus",
+    cell: ({ row }) => {
+      const status = row.original.signStatus;
+      return renderStatus(status, status);
+    },
+  },
+  // {
+  //   header: () => t("userRecord.createdAt") ?? "Created At",
+  //   accessorFn: (row) => row.createdAt,
+  //   id: "createdAt",
+  //   cell: ({ getValue }) => {
+  //     const date = getValue() as string;
+  //     return date ? new Date(date).toLocaleDateString("en-GB") : "—";
+  //   },
+  // },
+  {
+    id: "Date",
+    header: () => t("userIncoming.Date"),
+    cell: ({ row }) => {
+      const isAmharic = i18n.language === "am";
+      const amharicDate = row.original.amharicCreatedAt;
+      const createdAt = row.original.createdAt;
+      let displayText = "-";
+      if (isAmharic && amharicDate) {
+        displayText = amharicDate;
+      } else if (createdAt)
+        displayText = new Date(createdAt).toLocaleDateString(i18n.language, {
+          year: "numeric",
+          month: "short",
+          day: "numeric",
+          hour: "numeric",
+          minute: "numeric",
+        });
+
+      return displayText;
+    },
+    size: 150,
+  },
+  {
+    id: "Actions",
+    header: () => t("ApprovalPage.Actions"),
+    accessorKey: "Actions",
+    cell: ({ row }) => {
+      const rowData = row.original;
+      return (
+        <CollaborationActionsComponent
+          rowData={rowData as unknown as CollaborationDto}
+          refreshTable={refetch}
+          canRecordBeEditedByCollaborators={canRecordBeEditedByCollaborators}
+        />
+      );
+    },
+  },
+];
+
+export default CollaborationsColumns;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/collaborations/commentCollaborationRecord.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/collaborations/commentCollaborationRecord.tsx
new file mode 100644
index 000000000..92cf0d6a6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/collaborations/commentCollaborationRecord.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import CollaborationCommentsDialog from "./CollaborationCommentsDialog";
+
+interface CommentCollaborationRecordProps {
+  collaborationId: string;
+  recordId: string;
+  contentId?: string;
+  onClose: () => void;
+  recordStatus: string;
+}
+
+const CommentCollaborationRecord: React.FC<CommentCollaborationRecordProps> = ({
+  collaborationId,
+  recordId,
+  contentId,
+  onClose,
+  recordStatus,
+}) => {
+  return (
+    <CollaborationCommentsDialog
+      open={true}
+      onClose={onClose}
+      recordId={recordId}
+      contentId={contentId}
+      collaborationId={collaborationId}
+      recordStatus={recordStatus}
+    />
+  );
+};
+
+export default CommentCollaborationRecord;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/collaborations/rejectCollaborationRecord.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/collaborations/rejectCollaborationRecord.tsx
new file mode 100644
index 000000000..966630025
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/collaborations/rejectCollaborationRecord.tsx
@@ -0,0 +1,75 @@
+import React, { useCallback } from "react";
+import { toast } from "sonner";
+import EnhancedDynamicModal from "@/record-management/common/EnhancedDynamicModal";
+
+import { useTranslation } from "react-i18next";
+import { useMyCollaborations } from "../hooks/useMyCollaborations";
+
+interface RejectCollaborationRecordProps {
+  collaborationId: string;
+  onSuccess: () => void;
+  onClose: () => void;
+}
+
+const RejectCollaborationRecord: React.FC<RejectCollaborationRecordProps> = ({
+  collaborationId,
+  onSuccess,
+  onClose,
+}) => {
+  const { signCollaboration, refetch, signStatus } = useMyCollaborations();
+
+  const { t } = useTranslation();
+
+  const handleReject = useCallback(
+    async (data: any) => {
+      if (!collaborationId) {
+        toast.error("Invalid record ID");
+        return;
+      }
+
+      try {
+        const remark = data.remarks;
+        signCollaboration({
+          payload: {
+            collabId: collaborationId,
+            signStatus: "rejected",
+            comment: remark || "No Comment/አስተያየት የለም",
+          },
+        }).then(() => {
+          toast.success(t("userRecord.Record rejected successfully!"));
+          onSuccess();
+        });
+      } catch (error: any) {
+        toast.error(error.message || t("userRecord.Failed to approve record."));
+      }
+    },
+    [collaborationId, refetch, onSuccess]
+  );
+  return (
+    <EnhancedDynamicModal
+      open={true}
+      onClose={onClose}
+      title={t("userRecord.Reject Record")}
+      formConfig={{
+        fields: [
+          {
+            type: "textarea",
+            name: "remarks",
+            label: t("ApprovalPage.Remark"),
+            placeholder: t("ApprovalPage.Remark"),
+            required: false,
+          },
+        ],
+      }}
+      actionConfig={{
+        type: "reject",
+        onAction: handleReject,
+        confirmText: t("userRecord.Confirm Reject"),
+        confirmVariant: "destructive",
+        isLoading: signStatus.isLoading,
+      }}
+    />
+  );
+};
+
+export default RejectCollaborationRecord;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/collaborations/viewCollaborationRecord.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/collaborations/viewCollaborationRecord.tsx
new file mode 100644
index 000000000..b48ca172e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/collaborations/viewCollaborationRecord.tsx
@@ -0,0 +1,22 @@
+import { useLocation, useParams } from "react-router-dom";
+import LetterViewer from "../common/letterViewer";
+import { CollaborationDto } from "@/record-management/services/api/collaborationService";
+
+const ViewCollaborationRecord = () => {
+  const location = useLocation();
+  const collaboration = (
+    location.state as { collaboration?: CollaborationDto } | null
+  )?.collaboration;
+
+  return (
+    <LetterViewer
+      backurl="/record-management/collaborations"
+      type="collaboration"
+      shouldFetchInstance={false}
+      actionRowData={collaboration}
+      actions="CollaborationActionsComponent"
+    />
+  );
+};
+
+export default ViewCollaborationRecord;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/common/ErrorBoundary.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/common/ErrorBoundary.tsx
new file mode 100644
index 000000000..9a0c8cc2a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/common/ErrorBoundary.tsx
@@ -0,0 +1,45 @@
+import React, { Component, ErrorInfo, ReactNode } from "react";
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error?: Error;
+}
+
+export class ErrorBoundary extends Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  state: ErrorBoundaryState = { hasError: false };
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    // Log to console in development; replace with a reporting service (e.g. Sentry) in production
+    if (import.meta.env.DEV) {
+      console.error("ErrorBoundary caught:", error, info.componentStack);
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="flex flex-col items-center justify-center h-full p-6 bg-red-50 border border-red-200 rounded-lg">
+          <h2 className="text-xl font-semibold text-red-700">
+            Something went wrong.
+          </h2>
+          <p className="mt-2 text-lg text-red-600 text-center max-w-sm">
+            {this.state.error?.message || "Please try again later."}
+          </p>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/common/Header.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/common/Header.tsx
new file mode 100644
index 000000000..901001c93
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/common/Header.tsx
@@ -0,0 +1,413 @@
+import React, { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { NavLink, useLocation } from "react-router-dom";
+import { cn } from "@/shared/lib/utils";
+import {
+  LayoutGrid,
+  Upload,
+  Download,
+  CheckSquare,
+  UserCheck,
+  FileText,
+  LucideIcon,
+  Settings,
+  Handshake,
+  BellRing,
+  BarChart3,
+} from "lucide-react";
+import { useUserDetail } from "../hooks/useUserDetail";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import Cookies from "js-cookie";
+import { useDelegations } from "../hooks/useDelegations";
+import Top from "./Top";
+
+import { useReport } from "../hooks/useReport";
+import { hasApprovalPermission } from "@/record-management/routes/routes";
+import { useReportByHooks } from "../hooks/useReportByHooks";
+import { useMyCollaborations } from "../hooks/useMyCollaborations";
+
+interface HeaderProps {
+  onToggleSidebar?: () => void;
+}
+
+export interface INavTabs {
+  icon: LucideIcon;
+  isVissible?: boolean;
+  label?: string;
+  title?: string;
+  href?: string;
+  url?: string;
+  isActive?: boolean;
+  count?: boolean;
+  isPrimary?: boolean;
+  countBadge?: number;
+  isUrgent?: boolean;
+}
+
+const Header: React.FC<HeaderProps> = ({ onToggleSidebar }) => {
+  const baseParams = {
+    skip: 0,
+    take: 10,
+    orderBy: "employeePosition.createdAt:DESC",
+  };
+  const { t } = useTranslation();
+  const location = useLocation();
+  const { hasDelegated } = useDelegations(baseParams);
+  const { userDetails, selectedPositionPermissionKeys, selectedPosition } =
+    useAuthUser();
+  const { permissionKeys } = useUserDetail(userDetails);
+  const useParentCounts =
+    permissionKeys.includes("can:viewParentPositionRecord") &&
+    new URLSearchParams(location.search).get("view") === "parent";
+  const currentPosition = Cookies.get("current-position-id");
+  const canViewApprovalTab = hasApprovalPermission(
+    selectedPositionPermissionKeys,
+  );
+
+  // Reuse the auth layer's already-normalized active position instead of
+  // re-deriving it here. useAuthUser resolves it by matching BOTH `id` and
+  // `employeePositionId` (and honors the delegated-position cookie), so a
+  // delegate's position is found and `isDelegate` is reliable. The previous
+  // local lookup matched `pos.id === selectedPositionId` only — but
+  // `selectedPositionId` is normalized to `employeePositionId`, so the find
+  // returned undefined and `!undefined` left every tab visible for delegates.
+  const canViewDelegationTab = !selectedPosition?.isDelegate;
+  const userRoles =
+    userDetails?.roles?.map((r: { key: string }) => r.key) || [];
+  const showUserManagementShortcut =
+    userRoles.includes("admin") ||
+    userRoles.includes("unit_admin") ||
+    userRoles.includes("super_admin");
+
+  const {
+    dashboard,
+    ROdashboard,
+    TotalDraftExternal,
+    TotalDraftInternal,
+    TotalDraftCC,
+    ROTotalDraftIncoming,
+    ROPending,
+    TotalUrgentDraftInternal,
+    TotalUrgentDraftExternal,
+    ROPendingUrgent,
+  } = useReport("");
+  const { breakdownCounts } = useReportByHooks({
+    isSecretary: useParentCounts,
+  });
+  const { data: draftCollaborations } = useMyCollaborations({
+    skip: 0,
+    take: 1,
+    signStatus: "draft",
+  });
+  const collaborationDraftCount =
+    draftCollaborations?.count ?? dashboard?.collaborationCount?.draft ?? 0;
+  const incomingHref = useParentCounts
+    ? "/record-management/userIncoming?view=parent"
+    : "/record-management/userIncoming";
+
+  const navigationTabs = useMemo(
+    (): INavTabs[] => [
+      {
+        icon: LayoutGrid,
+        label: t("header.navigation.dashboard"),
+        href: "/record-management/dashboard",
+        isActive: location.pathname.includes("/record-management/dashboard"),
+        isPrimary: true,
+        // Delegates see only Outgoing, Incoming, Approval — hide Dashboard.
+        isVissible: canViewDelegationTab,
+      },
+      {
+        icon: BarChart3,
+        label: "Reports",
+        href: "/record-management/sector-reports",
+        isActive: location.pathname.startsWith(
+          "/record-management/sector-reports",
+        ),
+        isPrimary: false,
+        isVissible: false,
+      },
+      {
+        icon: Upload,
+        label: t("header.navigation.outgoing"),
+        href: "/record-management/userRecords",
+        isActive:
+          location.pathname.startsWith("/record-management/userRecords") &&
+          new URLSearchParams(location.search).get("from") !== "collaborations",
+        isPrimary: true,
+        isVissible: true,
+      },
+      {
+        icon: Download,
+        label: t("header.navigation.incoming"),
+        href: incomingHref,
+        isActive:
+          location.pathname.startsWith("/record-management/userIncoming") ||
+          location.pathname.startsWith(
+            "/record-management/viewIncoming/incoming/",
+          ) ||
+          location.pathname.startsWith(
+            "/record-management/viewIncoming/internal",
+          ) ||
+          location.pathname.startsWith("/record-management/viewIncoming/cc"),
+        isPrimary: true,
+        isVissible: true,
+        countBadge:
+          breakdownCounts.external +
+          breakdownCounts.externalSmart +
+          breakdownCounts.internal +
+          breakdownCounts.ccUnseen +
+          breakdownCounts.forYourReference,
+        isUrgent: TotalUrgentDraftInternal > 0 || TotalUrgentDraftExternal > 0,
+      },
+      {
+        icon: CheckSquare,
+        label: t("header.navigation.approval"),
+        href: "/record-management/approval",
+        isActive:
+          location.pathname.startsWith("/record-management/approval") ||
+          location.pathname.startsWith("/record-management/viewApproval"),
+        isPrimary: false,
+        isVissible: canViewApprovalTab,
+        countBadge: breakdownCounts?.approval || 0,
+        isUrgent:
+          (dashboard?.activeApprovalCount?.myUrgentWorkflowCount || 0) > 0,
+      },
+      {
+        icon: UserCheck,
+        label: t("header.navigation.delegation"),
+        href: "/record-management/delegation",
+        isActive: location.pathname.startsWith("/record-management/delegation"),
+        isPrimary: false,
+        isVissible: canViewDelegationTab,
+      },
+      {
+        icon: Handshake,
+        label: t("header.navigation.collaborations"),
+        href: "/record-management/collaborations",
+        isActive:
+          location.pathname.startsWith("/record-management/collaborations") ||
+          new URLSearchParams(location.search).get("from") === "collaborations",
+        isPrimary: false,
+        isVissible: canViewDelegationTab,
+        countBadge: collaborationDraftCount,
+      },
+      {
+        icon: Settings,
+        label: t("header.navigation.settings"),
+        href: "/record-management/uploadTeeterandSignature",
+        isActive: location.pathname.startsWith(
+          "/record-management/uploadTeeterandSignature",
+        ),
+        isPrimary: false,
+        isVissible: canViewDelegationTab,
+      },
+    ],
+    [
+      t,
+      location.pathname,
+      location.search,
+      TotalDraftCC,
+      TotalDraftInternal,
+      TotalDraftExternal,
+      TotalUrgentDraftInternal,
+      TotalUrgentDraftExternal,
+      canViewApprovalTab,
+      canViewDelegationTab,
+      useParentCounts,
+      incomingHref,
+      breakdownCounts.approval,
+      breakdownCounts.ccUnseen,
+      breakdownCounts.external,
+      breakdownCounts.externalSmart,
+      breakdownCounts.forYourReference,
+      breakdownCounts.internal,
+      dashboard?.activeApprovalCount?.myNotUrgentWorkflowsCount,
+      dashboard?.activeApprovalCount?.myUrgentWorkflowCount,
+      collaborationDraftCount,
+    ],
+  );
+
+  const recordOfficerNavs = useMemo(
+    (): INavTabs[] => [
+      {
+        icon: LayoutGrid,
+        label: t("header.navigation.dashboard"),
+        href: "/record-management/dashboard",
+        isActive: location.pathname.includes("/dashboard"),
+        isVissible: true,
+      },
+      {
+        icon: Upload,
+        label: t("header.navigation.outgoing"),
+        href: "/record-management/recordOfficer/outgoing",
+        isActive:
+          location.pathname.startsWith(
+            "/record-management/recordOfficer/outgoing",
+          ) ||
+          location.pathname.includes("/record-management/view/") ||
+          location.pathname.includes("/record-management/outgoingview/"),
+        isVissible: true,
+      },
+      {
+        icon: Download,
+        label: t("header.navigation.incoming"),
+        href: "/record-management/recordOfficer/incoming",
+        isActive:
+          location.pathname.startsWith(
+            "/record-management/recordOfficer/incoming",
+          ) ||
+          location.pathname.includes("/record-management/viewIncoming/") ||
+          location.pathname.includes("/record-management/recordViewIncoming/"),
+        isVissible: true,
+        countBadge: ROTotalDraftIncoming,
+      },
+      {
+        icon: FileText,
+        label: t("header.navigation.pending"),
+        href: "/record-management/pending",
+        isActive:
+          location.pathname.startsWith("/record-management/pending") ||
+          location.pathname.includes("/record-management/viewPending/"),
+        isVissible: true,
+        countBadge: ROPending,
+        isUrgent: ROPendingUrgent > 0,
+      },
+    ],
+    [t, location.pathname, ROTotalDraftIncoming, ROPending, ROPendingUrgent],
+  );
+
+  const activeNavigationTabs = useMemo(() => {
+    if (permissionKeys.includes("can:dispatchRecords")) {
+      return recordOfficerNavs;
+    }
+    return navigationTabs.filter((tab) => tab.isVissible);
+  }, [permissionKeys, navigationTabs, recordOfficerNavs]);
+
+  // const { user } = useAuth();
+  // console.log("User Info:", user);
+  // const organizationId =
+  //   user?.employee && user.employee.length > 0
+  //     ? user.employee[0].unitId
+  //     : undefined;
+
+  // const unitId = organizationId;
+  return (
+    <div className="flex flex-col">
+      <Top
+        onToggleSidebar={onToggleSidebar}
+        showUserManagementShortcut={showUserManagementShortcut}
+      />
+
+      {/* Navigation Tabs */}
+      {currentPosition ? (
+        <div className="fixed top-16 left-0 right-0 z-30 bg-white dark:bg-gray-900 border-b dark:border-gray-800 overflow-hidden pt-1 pb-1 px-2 sm:pt-1.5 sm:pb-1.5 sm:px-4 md:px-8">
+          {/* Mobile layout: Simple horizontal scrollable (up to sm) */}
+          <div className="sm:hidden">
+            <div className="flex items-center overflow-x-auto scrollbar-none">
+              {activeNavigationTabs.map((tab, index) => (
+                <NavLink
+                  key={`${tab.href}-${index}`}
+                  to={tab.href || "#"}
+                  className={({ isActive }) =>
+                    cn(
+                      "flex items-center gap-1 px-3 py-2 mr-2 text-xs font-medium transition-colors whitespace-nowrap relative",
+                      isActive
+                        ? "text-primary-800 dark:text-white border-b-2 border-primary-600 dark:border-primary-400"
+                        : "text-gray-700 dark:text-gray-300 hover:text-primary-800 dark:hover:text-white",
+                    )
+                  }
+                >
+                  <tab.icon className="h-4 w-4 flex-shrink-0" />
+                  <span className="max-w-[80px] truncate">{tab.label}</span>
+
+                  {/* Count Badge - positioned on tab */}
+                  {typeof tab?.countBadge === "number" &&
+                    tab.countBadge > 0 && (
+                      <span className="bg-red-500 text-white text-[10px] font-bold rounded-full px-1.5 py-0.5 ml-1">
+                        {tab.countBadge > 99 ? "99+" : tab.countBadge}
+                      </span>
+                    )}
+
+                  {/* Urgent Bell - positioned on tab */}
+                  {typeof tab?.isUrgent === "boolean" && tab.isUrgent && (
+                    <span className="relative flex h-3 w-3 ml-1">
+                      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
+                      <span className="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
+                    </span>
+                  )}
+
+                  {/* Live indicator for Delegation */}
+                  {hasDelegated &&
+                    (tab.label?.toLowerCase() === "delegation" ||
+                      tab.label?.toLowerCase() === "ዉክልና") && (
+                      <span className="absolute -top-1 -right-1 flex h-2 w-2">
+                        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-500 opacity-75"></span>
+                        <span className="relative inline-flex rounded-full h-2 w-2 bg-red-500"></span>
+                      </span>
+                    )}
+                </NavLink>
+              ))}
+            </div>
+          </div>
+
+          {/* Desktop layout: All tabs in one row (sm and up) */}
+          <div className="hidden sm:flex overflow-x-auto scrollbar-none w-full bg-gray-200 dark:bg-gray-800 rounded-md py-1.5">
+            <div className="flex w-full mx-1.5 gap-1.5">
+              {activeNavigationTabs.map((tab, index) => (
+                <NavLink
+                  key={`${tab.href}-${index}`}
+                  to={tab.href || "#"}
+                  className={() =>
+                    cn(
+                      "flex items-center justify-center px-2.5 py-2.5 rounded-sm text-sm whitespace-nowrap flex-1 font-Urbanist relative",
+                      tab.isActive
+                        ? "bg-primary-50 dark:bg-primary-900/40 text-primary-800 dark:text-white font-medium"
+                        : "text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700",
+                    )
+                  }
+                >
+                  <tab.icon className="h-4 w-4 mr-1.5 flex-shrink-0" />
+                  <span className="flex items-center gap-1.5">
+                    {tab.label}
+
+                    {/* Count Badge (inline) */}
+                    {typeof tab?.countBadge === "number" &&
+                      tab.countBadge > 0 && (
+                        <span className="bg-red-500 text-white text-xs font-semibold rounded-full px-1.5 py-0.5">
+                          {tab.countBadge > 99 ? "99+" : tab.countBadge}
+                        </span>
+                      )}
+
+                    {/* Urgent Bell (pulsing) */}
+                    {typeof tab?.isUrgent === "boolean" && tab.isUrgent && (
+                      <span className="relative flex h-4 w-4">
+                        {/* Pulse effect */}
+                        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
+                        {/* Bell icon */}
+                        <span className="relative inline-flex items-center justify-center">
+                          <BellRing className="h-4 w-4 text-red-500" />
+                        </span>
+                      </span>
+                    )}
+                  </span>
+
+                  {/* Live indicator for Delegation */}
+                  {hasDelegated &&
+                    (tab.label?.toLowerCase() === "delegation" ||
+                      tab.label?.toLowerCase() === "ዉክልና") && (
+                      <span className="relative -top-0.5 -right-0.5 flex h-2 w-2">
+                        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-500 opacity-75"></span>
+                        <span className="relative inline-flex rounded-full h-2 w-2 bg-red-500"></span>
+                      </span>
+                    )}
+                </NavLink>
+              ))}
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default Header;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/common/NavigationHeader/PasswordReset.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/common/NavigationHeader/PasswordReset.tsx
new file mode 100644
index 000000000..c48dbc441
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/common/NavigationHeader/PasswordReset.tsx
@@ -0,0 +1,343 @@
+import { useState } from "react";
+
+import {
+  LockKeyhole,
+  Mail,
+  Eye,
+  EyeOff,
+  ArrowLeft,
+  ShieldCheck,
+  KeyRound,
+  RefreshCw,
+} from "lucide-react";
+import { Button } from "@/shared/common/ui/button";
+import { useNavigate } from "react-router-dom";
+import { Input } from "@/shared/common/ui/input";
+import { Label } from "@/shared/common/ui/label";
+import { motion } from "framer-motion";
+import { cn } from "@/shared/lib/utils";
+import {
+  changePassword,
+  requestPasswordReset,
+} from "@/record-management/services/api/userService";
+
+const ChangePasswordPage = () => {
+  const navigate = useNavigate();
+  const [email, setEmail] = useState("");
+  const [verificationCode, setVerificationCode] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [message, setMessage] = useState<{
+    type: "success" | "error";
+    text: string;
+  } | null>(null);
+  const [resendLoading, setResendLoading] = useState(false);
+  const [step, setStep] = useState<"email" | "verify">("email");
+
+  const handleEmailSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setMessage(null);
+
+    try {
+      await requestPasswordReset(email);
+      setMessage({
+        type: "success",
+        text: "Verification code sent to your email",
+      });
+      setStep("verify");
+    } catch (err: any) {
+      setMessage({
+        type: "error",
+        text: err.message || "Failed to send verification code",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handlePasswordSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setMessage(null);
+
+    if (newPassword !== confirmPassword) {
+      setMessage({ type: "error", text: "Passwords do not match" });
+      setLoading(false);
+      return;
+    }
+
+    try {
+      await changePassword({
+        email,
+        verificationCode,
+        newPassword,
+        confirmPassword,
+      });
+      setMessage({
+        type: "success",
+        text: "Password changed successfully! Redirecting...",
+      });
+
+      setTimeout(() => navigate("/profile"), 2000);
+    } catch (err: any) {
+      setMessage({
+        type: "error",
+        text: err.message || "Failed to change password",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleResendCode = async () => {
+    setResendLoading(true);
+    try {
+      await requestPasswordReset(email);
+      setMessage({
+        type: "success",
+        text: "Verification code resent to your email",
+      });
+    } catch {
+      setMessage({ type: "error", text: "Failed to resend code" });
+    } finally {
+      setResendLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-indigo-50/30 flex items-center justify-center p-4">
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3 }}
+        className="w-full max-w-md"
+      >
+        <div className="border-0 shadow-xl rounded-2xl overflow-hidden bg-white/90 backdrop-blur-sm">
+          <div className="bg-gradient-to-r from-indigo-600 to-purple-600 p-6 text-white">
+            <div className="flex items-center gap-4">
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => navigate(-1)}
+                className="rounded-full bg-white/10 hover:bg-white/20"
+              >
+                <ArrowLeft className="h-5 w-5" />
+              </Button>
+              <div>
+                <h2 className="text-2xl font-bold">
+                  {step === "email"
+                    ? "Request Password Reset"
+                    : "Change Password"}
+                </h2>
+                <p className="text-sm text-indigo-100">
+                  {step === "email"
+                    ? "Enter your email to receive a verification code"
+                    : "Secure your account with a new password"}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="p-6">
+            {message && (
+              <motion.div
+                initial={{ opacity: 0, y: -10 }}
+                animate={{ opacity: 1, y: 0 }}
+                className={cn(
+                  "p-4 rounded-lg mb-6 flex items-start gap-3",
+                  message.type === "success"
+                    ? "bg-primary-50 text-primary-700"
+                    : "bg-red-50 text-red-700"
+                )}
+              >
+                <ShieldCheck
+                  className={cn(
+                    "h-5 w-5 flex-shrink-0 mt-0.5",
+                    message.type === "success"
+                      ? "text-primary-500"
+                      : "text-red-500"
+                  )}
+                />
+                <div>
+                  <p className="font-medium">{message.text}</p>
+                  {message.type === "success" &&
+                    message.text.includes("Redirecting") && (
+                      <div className="w-full bg-primary-200 rounded-full h-1.5 mt-2">
+                        <div
+                          className="bg-primary-600 h-1.5 rounded-full"
+                          style={{ width: "100%" }}
+                        ></div>
+                      </div>
+                    )}
+                </div>
+              </motion.div>
+            )}
+
+            {step === "email" ? (
+              <form onSubmit={handleEmailSubmit} className="space-y-5">
+                <div className="space-y-2">
+                  <Label htmlFor="email" className="text-gray-700">
+                    Email Address
+                  </Label>
+                  <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                      <Mail className="h-5 w-5 text-gray-400" />
+                    </div>
+                    <Input
+                      id="email"
+                      type="email"
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                      required
+                      placeholder="Enter your email"
+                      className="pl-10 py-5 rounded-xl border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                    />
+                  </div>
+                </div>
+
+                <Button
+                  type="submit"
+                  disabled={loading}
+                  className="w-full py-6 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white font-medium shadow-lg transition-all duration-300"
+                >
+                  {loading ? (
+                    <span className="flex items-center justify-center">
+                      <RefreshCw className="animate-spin h-5 w-5 mr-2" />
+                      Sending Code...
+                    </span>
+                  ) : (
+                    "Send Verification Code"
+                  )}
+                </Button>
+              </form>
+            ) : (
+              <form onSubmit={handlePasswordSubmit} className="space-y-5">
+                <div className="space-y-2">
+                  <Label htmlFor="code" className="text-gray-700">
+                    Verification Code
+                  </Label>
+                  <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                      <KeyRound className="h-5 w-5 text-gray-400" />
+                    </div>
+                    <Input
+                      id="code"
+                      type="text"
+                      value={verificationCode}
+                      onChange={(e) => setVerificationCode(e.target.value)}
+                      required
+                      placeholder="Enter 6-digit code"
+                      className="pl-10 py-5 rounded-xl border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="newPassword" className="text-gray-700">
+                    New Password
+                  </Label>
+                  <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                      <LockKeyhole className="h-5 w-5 text-gray-400" />
+                    </div>
+                    <Input
+                      id="newPassword"
+                      type={showPassword ? "text" : "password"}
+                      value={newPassword}
+                      onChange={(e) => setNewPassword(e.target.value)}
+                      required
+                      placeholder="At least 8 characters"
+                      className="pl-10 py-5 rounded-xl border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-transparent pr-10"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowPassword(!showPassword)}
+                      className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-indigo-600"
+                    >
+                      {showPassword ? (
+                        <EyeOff className="h-5 w-5" />
+                      ) : (
+                        <Eye className="h-5 w-5" />
+                      )}
+                    </button>
+                  </div>
+                  <p className="text-xs text-gray-500 mt-1">
+                    Must include uppercase, lowercase, number, and special
+                    character
+                  </p>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="confirmPassword" className="text-gray-700">
+                    Confirm Password
+                  </Label>
+                  <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                      <LockKeyhole className="h-5 w-5 text-gray-400" />
+                    </div>
+                    <Input
+                      id="confirmPassword"
+                      type={showConfirmPassword ? "text" : "password"}
+                      value={confirmPassword}
+                      onChange={(e) => setConfirmPassword(e.target.value)}
+                      required
+                      placeholder="Re-enter your password"
+                      className="pl-10 py-5 rounded-xl border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-transparent pr-10"
+                    />
+                    <button
+                      type="button"
+                      onClick={() =>
+                        setShowConfirmPassword(!showConfirmPassword)
+                      }
+                      className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-indigo-600"
+                    >
+                      {showConfirmPassword ? (
+                        <EyeOff className="h-5 w-5" />
+                      ) : (
+                        <Eye className="h-5 w-5" />
+                      )}
+                    </button>
+                  </div>
+                </div>
+
+                <Button
+                  type="submit"
+                  disabled={loading}
+                  className="w-full py-6 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white font-medium shadow-lg transition-all duration-300"
+                >
+                  {loading ? (
+                    <span className="flex items-center justify-center">
+                      <RefreshCw className="animate-spin h-5 w-5 mr-2" />
+                      Changing Password...
+                    </span>
+                  ) : (
+                    "Change Password"
+                  )}
+                </Button>
+
+                <div className="text-center">
+                  <button
+                    type="button"
+                    onClick={handleResendCode}
+                    disabled={resendLoading}
+                    className="text-indigo-600 hover:underline text-sm"
+                  >
+                    {resendLoading
+                      ? "Resending..."
+                      : "Resend Verification Code"}
+                  </button>
+                </div>
+              </form>
+            )}
+          </div>
+        </div>
+      </motion.div>
+    </div>
+  );
+};
+
+export default ChangePasswordPage;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/common/NavigationHeader/Profile.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/common/NavigationHeader/Profile.tsx
new file mode 100644
index 000000000..6d128954a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/common/NavigationHeader/Profile.tsx
@@ -0,0 +1,1049 @@
+import React, { useEffect, useState } from "react";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import { Badge } from "@/shared/common/ui/badge";
+import {
+  ChevronLeft,
+  Mail,
+  User,
+  Briefcase,
+  Key,
+  CheckCircle2,
+  Shield,
+  Lock,
+  CircleUser,
+  Star,
+  ShieldCheck,
+  Clock,
+  UserPen,
+  ShieldOff,
+  IdCard,
+  Settings,
+  Building,
+  Users,
+  FileText,
+  ChevronDown,
+  LogOut,
+  Monitor,
+} from "lucide-react";
+import { Button } from "@/shared/common/ui/button";
+import { NavLink, useNavigate } from "react-router-dom";
+import { useAuthUser } from "../../../hooks/useAuthUser";
+import { useTranslation } from "react-i18next";
+import { motion } from "framer-motion";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import Top from "../Top";
+import { Label } from "@/shared/common/ui/label";
+import { Switch } from "@/shared/common/ui/switch";
+import { useSessions } from "@/shared/hooks/useSession";
+import { useQueryClient } from "@tanstack/react-query";
+import Loader from "@/record-management/components/Loader/loader";
+
+// Define TypeScript interfaces for the props
+interface PositionDetailItemProps {
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+}
+
+interface InfoBoxProps {
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+  color?: "blue" | "purple" | "green" | "gray";
+  fullWidth?: boolean;
+  amharic?: boolean;
+  capitalize?: boolean;
+}
+
+interface ProfileInfoItemProps {
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+  capitalize?: boolean;
+}
+
+interface SecurityItemProps {
+  title: string;
+  description: string;
+  action: React.ReactNode;
+  status?: "secure" | "warning" | "inactive";
+
+  twoFactorStatus?: "on" | "off";
+}
+
+interface ActivityItemProps {
+  icon: React.ReactNode;
+  title: string;
+  time: string;
+  type: "success" | "info" | "warning";
+}
+
+const ProfilePage = () => {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+
+  const {
+    userDetails,
+    isLoading,
+    isError,
+    refetch,
+    logout,
+    setTwoFactorAuth,
+    twoFactorData,
+    editTwoFA,
+    isLoadingStatus,
+  } = useAuthUser();
+  const userRoles = userDetails?.roles?.map((r: { key: string }) => r.key) || [];
+  const showUserManagementShortcut =
+    userRoles.includes("admin") ||
+    userRoles.includes("unit_admin") ||
+    userRoles.includes("super_admin");
+  const localizedName = useLocalizedName();
+  const [isSessionsExpanded, setIsSessionsExpanded] = useState(false);
+  const [twoFactor, setTwoFactor] = useState(false);
+  const [permissionsExpanded, setPermissionsExpanded] = useState(false);
+  const PERMISSIONS_INITIAL_SHOW = 4;
+  useEffect(() => {
+    if (!userDetails) return;
+    if (twoFactorData?.[0]) {
+      setTwoFactor(twoFactorData?.[0].isMFARequired);
+    }
+  }, [twoFactorData, userDetails]);
+
+  const {
+    data: sessionsQuery,
+    deleteSession,
+    deleteAllSessions,
+  } = useSessions({
+    skip: 0,
+    take: 10,
+    orderBy: "CreatedAt:DESC",
+  });
+  const userSessions = sessionsQuery?.sessions || [];
+  const handleLogoutSession = (sessionId: string) => {
+    deleteSession(sessionId);
+    queryClient.invalidateQueries({ queryKey: ["my-sessions"] });
+  };
+  const handleLogoutAllSessions = () => {
+    const otherSessions = userSessions.filter((s) => s.id);
+
+    if (otherSessions.length > 0) {
+      deleteAllSessions({ sessionIds: otherSessions.map((s) => s.id) });
+      queryClient.invalidateQueries({ queryKey: ["my-sessions"] });
+    }
+  };
+  const handleFactorAuthentication = () => {
+    if (isLoading || isLoadingStatus) return; // prevent duplicate clicks
+    if (!userDetails) return;
+
+    const item = twoFactorData?.[0];
+    const hasExistingRecord = !!item?.id;
+    if (!hasExistingRecord) {
+      // ✅ POST only if no record exists at all
+      setTwoFactorAuth({ isMFARequired: true });
+    } else {
+      //  Toggle using PUT/edit if a record already exists
+      const newStatus = !twoFactor;
+      editTwoFA({ id: item.id, isEnabled: newStatus });
+    }
+  };
+
+  const handleLogout = () => {
+    logout();
+  };
+
+  if (isLoading) {
+    return <Loader label={t("profile.loading")} />;
+  }
+
+  if (isError || !userDetails) {
+    return (
+      <div className="min-h-screen bg-white dark:bg-gray-900 flex items-center justify-center">
+        <motion.div
+          initial={{ scale: 0.9 }}
+          animate={{ scale: 1 }}
+          className="text-center space-y-4"
+        >
+          <div className="text-red-500">
+            <motion.div
+              animate={{ x: [-5, 5, -5] }}
+              transition={{ repeat: Infinity, duration: 1.5 }}
+            >
+              <CircleUser className="w-12 h-12 mx-auto" />
+            </motion.div>
+            <p className="mt-2 text-gray-700 dark:text-gray-300">
+              {t("profile.error")}
+            </p>
+          </div>
+          <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
+            <Button
+              onClick={() => refetch()}
+              className="mt-4 bg-primary hover:bg-primary-700 text-white"
+            >
+              {t("profile.tryAgain")}
+            </Button>
+          </motion.div>
+        </motion.div>
+      </div>
+    );
+  }
+
+  const employeeData = userDetails.employee?.[0] || {};
+  const position = employeeData.positions?.[0] || {};
+  const positionIsDeletation = employeeData.positions.filter(
+    (item: any) => item.isDelegate
+  );
+  const positionHasDeletation = employeeData.positions.filter(
+    (item: any) => item.hasDelegated
+  );
+  // Animation variants
+  const container = {
+    hidden: { opacity: 0 },
+    show: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  };
+
+  const item = {
+    hidden: { opacity: 0, y: 20 },
+    show: { opacity: 1, y: 0 },
+  };
+
+  // New reusable components for the improved layout
+  const PositionDetailItem: React.FC<PositionDetailItemProps> = ({
+    icon,
+    label,
+    value,
+  }) => (
+    <motion.div
+      whileHover={{ x: 4 }}
+      className="flex items-center gap-3 p-3 rounded-xl bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600"
+    >
+      <div className="p-2 rounded-lg bg-primary-100 dark:bg-primary-900 text-primary-600 dark:text-primary-400">
+        {icon}
+      </div>
+      <div className="flex-1 min-w-0">
+        <p className="text-xs text-gray-500 dark:text-gray-400 whitespace-normal break-words">
+          {label}
+        </p>
+        <p
+          className="text-sm font-medium text-gray-800 dark:text-gray-200 break-words"
+          title={value}
+        >
+          {value}
+        </p>
+      </div>
+    </motion.div>
+  );
+
+  const InfoBox: React.FC<InfoBoxProps> = ({
+    icon,
+    label,
+    value,
+    color = "gray",
+    fullWidth = false,
+    amharic = false,
+    capitalize = false,
+  }) => (
+    <motion.div
+      whileHover={{ scale: 1.02 }}
+      className={`p-3 rounded-xl border ${
+        color === "blue"
+          ? "bg-primary/10 dark:bg-primary/20 border-primary/30 dark:border-primary/40"
+          : color === "purple"
+          ? "bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800"
+          : color === "green"
+          ? "bg-primary-50 dark:bg-primary-900/20 border-primary-200 dark:border-primary-800"
+          : "bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600"
+      } ${fullWidth ? "col-span-2" : ""}`}
+    >
+      <div className="flex items-center gap-2 mb-2">
+        <div
+          className={`p-1 rounded-lg ${
+            color === "blue"
+              ? "bg-primary/15 dark:bg-primary/25 text-primary dark:text-primary-300"
+              : color === "purple"
+              ? "bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-400"
+              : color === "green"
+              ? "bg-primary-100 dark:bg-primary-900 text-primary-600 dark:text-primary-400"
+              : "bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300"
+          }`}
+        >
+          {icon}
+        </div>
+        <p className="text-xs font-medium text-gray-500 dark:text-gray-400">
+          {label}
+        </p>
+      </div>
+      <p
+        className={`text-sm font-semibold text-gray-800 dark:text-gray-200 truncate ${
+          amharic ? "font-amharic" : ""
+        } ${capitalize ? "capitalize" : ""}`}
+        title={value}
+      >
+        {value || "Not specified"}
+      </p>
+    </motion.div>
+  );
+
+  // Reusable Component: ProfileInfoItem
+  const ProfileInfoItem: React.FC<ProfileInfoItemProps> = ({
+    icon,
+    label,
+    value,
+    capitalize = false,
+  }) => (
+    <motion.div
+      whileHover={{ x: 4 }}
+      className="flex items-center gap-3 p-3 rounded-2xl bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 transition-all duration-200"
+    >
+      <div className="p-2 rounded-xl bg-primary-100 dark:bg-primary-900 text-primary-600 dark:text-primary-400">
+        {icon}
+      </div>
+      <div className="flex-1 min-w-0">
+        <p className="text-xs text-gray-500 dark:text-gray-400">{label}</p>
+        <p
+          className={`font-medium text-gray-800 dark:text-gray-200 text-sm truncate ${
+            capitalize ? "capitalize" : ""
+          }`}
+        >
+          {value}
+        </p>
+      </div>
+    </motion.div>
+  );
+
+  // Reusable Component: SecurityItem
+  const SecurityItem: React.FC<SecurityItemProps> = ({
+    title,
+    description,
+    status,
+    action,
+    twoFactorStatus,
+  }) => (
+    <motion.div
+      whileHover={{ x: 4 }}
+      className="flex items-center justify-between p-4 rounded-2xl bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600"
+    >
+      <div className="flex items-center gap-3">
+        <div
+          className={`w-3 h-3 rounded-full ${
+            status === "secure"
+              ? "bg-primary-500"
+              : status === "warning"
+              ? "bg-yellow-500"
+              : "bg-gray-400 dark:bg-gray-500"
+          }`}
+        ></div>
+        <div>
+          <p className="font-medium text-gray-800 dark:text-gray-200">
+            {title}
+          </p>
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            {description}
+          </p>
+        </div>
+      </div>
+      {action}
+    </motion.div>
+  );
+
+  // Reusable Component: ActivityItem
+  const ActivityItem: React.FC<ActivityItemProps> = ({
+    icon,
+    title,
+    time,
+    type,
+  }) => (
+    <motion.div
+      whileHover={{ x: 4 }}
+      className="flex items-start gap-3 p-3 rounded-2xl bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600"
+    >
+      <div
+        className={`p-2 rounded-full ${
+          type === "success"
+            ? "bg-primary-100 dark:bg-primary-900 text-primary-600 dark:text-primary-400"
+            : type === "info"
+            ? "bg-primary/15 dark:bg-primary/25 text-primary dark:text-primary-300"
+            : "bg-yellow-100 dark:bg-yellow-900 text-yellow-600 dark:text-yellow-400"
+        }`}
+      >
+        {icon}
+      </div>
+      <div className="flex-1">
+        <p className="text-sm font-medium text-gray-800 dark:text-gray-200">{title}</p>
+        <p className="text-xs text-gray-500 dark:text-gray-400">{time}</p>
+      </div>
+    </motion.div>
+  );
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-primary-50 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-6 lg:p-8">
+      <Top showUserManagementShortcut={showUserManagementShortcut} />
+      <div className="max-w-7xl mx-auto">
+        {/* Enhanced Header */}
+        <motion.div
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8 mt-6"
+        >
+          <div className="flex items-center gap-4">
+            <motion.div whileHover={{ x: -3 }} whileTap={{ scale: 0.95 }}>
+              <Button
+                onClick={() => navigate(-1)}
+                className="flex items-center gap-2 px-4 py-2 rounded-xl border border-primary-200 dark:border-primary-700 bg-white dark:bg-gray-800 text-primary-800 dark:text-primary-300 hover:bg-primary-50 dark:hover:bg-gray-700 hover:border-primary-300 dark:hover:border-primary-600 transition-all duration-200 shadow-sm hover:shadow-md"
+              >
+                <ChevronLeft className="w-5 h-5" />
+                {t("common.back")}
+              </Button>
+            </motion.div>
+
+            <div className="hidden sm:block w-px h-6 bg-primary-200 dark:bg-primary-700"></div>
+
+            <motion.div
+              initial={{ opacity: 0, x: -10 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: 0.1 }}
+              className="hidden sm:block"
+            ></motion.div>
+          </div>
+
+          {/* User Quick Stats */}
+          <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.2 }}
+            className="flex items-center gap-3 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-2xl p-3 border border-primary-200 dark:border-primary-700 shadow-sm"
+          >
+            <div className="flex items-center gap-2">
+              <div className="w-2 h-2 bg-primary-500 rounded-full animate-pulse"></div>
+              <span className="text-sm font-medium text-primary-800 dark:text-primary-300">
+                Online
+              </span>
+            </div>
+            <div className="w-px h-4 bg-primary-200 dark:bg-primary-700"></div>
+            <Badge className="bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-300 border-primary-200 dark:border-primary-700">
+              {t(`profile.userTypes.${userDetails.userType}`)}
+            </Badge>
+          </motion.div>
+        </motion.div>
+
+        {/* Main Content Grid - Reorganized */}
+        <motion.div
+          variants={container}
+          initial="hidden"
+          animate="show"
+          className="grid grid-cols-1 xl:grid-cols-10 gap-6 lg:gap-8"
+        >
+          {/* Left Sidebar - Profile & Account Status */}
+          <div className="xl:col-span-4 space-y-6 lg:space-y-8">
+            {/* Enhanced Profile Card */}
+            <motion.div variants={item}>
+              <Card className="border-0 rounded-3xl overflow-hidden shadow-xl bg-white dark:bg-gray-800 hover:shadow-2xl transition-all duration-500 group">
+                {/* Profile Header with Gradient */}
+                <div className="relative bg-gradient-to-br from-primary-500 via-primary-600 to-primary-600 h-32 overflow-hidden">
+                  <div className="absolute inset-0 bg-grid-white/10"></div>
+                  <div className="absolute top-4 right-4">
+                    <Badge className="bg-white/20 backdrop-blur-sm text-white border-0">
+                      {userDetails.status === "accepted"
+                        ? "Verified"
+                        : "Pending"}
+                    </Badge>
+                  </div>
+
+                  {/* Profile Avatar */}
+                  <div className="absolute -bottom-6 left-1/2 transform -translate-x-1/2">
+                    <motion.div
+                      whileHover={{ scale: 1.05, rotate: 2 }}
+                      className="relative h-24 w-24 rounded-full border-4 border-white dark:border-gray-800 bg-white dark:bg-gray-800 shadow-2xl group-hover:shadow-3xl transition-all duration-300"
+                    >
+                      <div className="absolute inset-0 bg-gradient-to-br from-primary-400 to-primary-500 rounded-full flex items-center justify-center">
+                        <CircleUser className="w-10 h-10 text-white" />
+                      </div>
+                      <div className="absolute bottom-1 right-1 w-4 h-4 bg-primary-400 border-2 border-white rounded-full"></div>
+                    </motion.div>
+                  </div>
+                </div>
+
+                <CardContent className="pt-14 pb-6 px-6">
+                  {/* User Info */}
+                  <div className="text-center mb-6">
+                    <motion.h2
+                      whileHover={{ scale: 1.02 }}
+                      className="text-xl font-bold text-gray-800 dark:text-gray-100 mb-2 truncate"
+                      title={
+                        localizedName(userDetails.name) || t("profile.noName")
+                      }
+                    >
+                      {localizedName(userDetails.name) || t("profile.noName")}
+                    </motion.h2>
+                    <div className="flex items-center justify-center gap-2 text-gray-600 dark:text-gray-400">
+                      <User className="w-4 h-4" />
+                      <span className="text-sm">@{userDetails.username}</span>
+                    </div>
+                  </div>
+
+                  {/* Status Indicators */}
+                  <div className="grid grid-cols-2 gap-3 mb-6">
+                    <motion.div
+                      whileHover={{ scale: 1.05 }}
+                      className="text-center p-3 rounded-2xl bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800"
+                    >
+                      <div className="text-lg font-bold text-primary dark:text-primary-300">
+                        {positionIsDeletation ? "Yes" : "No"}
+                      </div>
+                      <div className="text-xs text-blue-800 dark:text-blue-300">Delegate</div>
+                    </motion.div>
+                    <motion.div
+                      whileHover={{ scale: 1.05 }}
+                      className="text-center p-3 rounded-2xl bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800"
+                    >
+                      <div className="text-lg font-bold text-purple-600 dark:text-purple-400">
+                        {position.permissions?.length || 0}
+                      </div>
+                      <div className="text-xs text-purple-800 dark:text-purple-300">Permissions</div>
+                    </motion.div>
+                  </div>
+
+                  {/* Profile Details */}
+                  <div className="space-y-4">
+                    <ProfileInfoItem
+                      icon={<Mail className="w-4 h-4" />}
+                      label={t("profile.email")}
+                      value={userDetails.email}
+                    />
+                    <ProfileInfoItem
+                      icon={<Briefcase className="w-4 h-4" />}
+                      label={t("profile.userType")}
+                      value={t(`profile.userTypes.${userDetails.userType}`)}
+                      capitalize
+                    />
+                    <ProfileInfoItem
+                      icon={<CheckCircle2 className="w-4 h-4" />}
+                      label={t("profile.passwordSet")}
+                      value={
+                        userDetails.hasSetPassword
+                          ? t("common.yes")
+                          : t("common.no")
+                      }
+                    />
+                  </div>
+
+                  {/* Action Buttons */}
+                  <div className="grid grid-cols-2 gap-3 mt-6">
+                    <NavLink to="/update-profile">
+                      <Button className="w-full bg-primary-600 hover:bg-primary-700 text-white rounded-xl py-2 transition-all duration-200">
+                        <UserPen className="w-4 h-4 mr-2" />
+                        Edit
+                      </Button>
+                    </NavLink>
+                    <NavLink to="/change-password">
+                      <Button
+                        variant="outline"
+                        className="w-full border-primary-300 dark:border-primary-700 text-primary-700 dark:text-primary-300 hover:bg-primary-50 dark:hover:bg-gray-700 rounded-xl py-2"
+                      >
+                        <Lock className="w-4 h-4 mr-2" />
+                        Security
+                      </Button>
+                    </NavLink>
+                  </div>
+                </CardContent>
+              </Card>
+            </motion.div>
+
+            {/* Account Status Card */}
+            <motion.div variants={item}>
+              <Card className="border-0 rounded-3xl shadow-lg bg-gradient-to-br from-white to-primary-50 dark:from-gray-800 dark:to-gray-900 border border-primary-200 dark:border-primary-800">
+                <CardHeader className="pb-4">
+                  <CardTitle className="flex items-center gap-2 text-lg text-gray-800 dark:text-gray-100">
+                    <ShieldCheck className="w-5 h-5 text-primary-600" />
+                    Account Status
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  {/* Verification Status */}
+                  <div className="flex items-center justify-between p-3 rounded-2xl bg-white dark:bg-gray-700 border border-primary-200 dark:border-primary-800 shadow-sm">
+                    <div className="flex items-center gap-3">
+                      <div
+                        className={`p-2 rounded-xl ${
+                          userDetails.status === "accepted"
+                            ? "bg-primary-100 dark:bg-primary-900 text-primary-600 dark:text-primary-400"
+                            : "bg-amber-100 dark:bg-amber-900 text-amber-600 dark:text-amber-400"
+                        }`}
+                      >
+                        {userDetails.status === "accepted" ? (
+                          <CheckCircle2 className="w-4 h-4" />
+                        ) : (
+                          <Clock className="w-4 h-4" />
+                        )}
+                      </div>
+                      <div>
+                        <p className="text-sm font-medium text-gray-800 dark:text-gray-200">
+                          Account Status
+                        </p>
+                        <p className="text-xs text-gray-500 dark:text-gray-400">
+                          {userDetails.status === "accepted"
+                            ? "Verified and active"
+                            : "Pending approval"}
+                        </p>
+                      </div>
+                    </div>
+                    <Badge
+                      className={
+                        userDetails.status === "accepted"
+                          ? "bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-300 border-primary-200 dark:border-primary-700"
+                          : "bg-amber-100 dark:bg-amber-900 text-amber-800 dark:text-amber-300 border-amber-200 dark:border-amber-700"
+                      }
+                    >
+                      {userDetails.status === "accepted" ? "Active" : "Pending"}
+                    </Badge>
+                  </div>
+
+                  {/* Password Status */}
+                  <div className="flex items-center justify-between p-3 rounded-2xl bg-white dark:bg-gray-700 border border-primary-200 dark:border-primary-800 shadow-sm">
+                    <div className="flex items-center gap-3">
+                      <div
+                        className={`p-2 rounded-xl ${
+                          userDetails.hasSetPassword
+                            ? "bg-primary-100 dark:bg-primary-900 text-primary-600 dark:text-primary-400"
+                            : "bg-red-100 dark:bg-red-900 text-red-600 dark:text-red-400"
+                        }`}
+                      >
+                        <Lock className="w-4 h-4" />
+                      </div>
+                      <div>
+                        <p className="text-sm font-medium text-gray-800 dark:text-gray-200">
+                          Password
+                        </p>
+                        <p className="text-xs text-gray-500 dark:text-gray-400">
+                          {userDetails.hasSetPassword
+                            ? "Secured with password"
+                            : "No password set"}
+                        </p>
+                      </div>
+                    </div>
+                    <Badge
+                      className={
+                        userDetails.hasSetPassword
+                          ? "bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-300 border-primary-200 dark:border-primary-700"
+                          : "bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-300 border-red-200 dark:border-red-700"
+                      }
+                    >
+                      {userDetails.hasSetPassword ? "Set" : "Not Set"}
+                    </Badge>
+                  </div>
+
+                  {/* Quick Action */}
+                  <div className="pt-2">
+                    <NavLink to="/update-profile">
+                      <Button
+                        variant="outline"
+                        className="w-full border-primary-300 dark:border-primary-700 text-primary-700 dark:text-primary-300 hover:bg-primary-50 dark:hover:bg-gray-700 rounded-xl py-2 transition-all duration-200"
+                      >
+                        <Settings className="w-4 h-4 mr-2" />
+                        Manage Account Settings
+                      </Button>
+                    </NavLink>
+                  </div>
+                </CardContent>
+              </Card>
+            </motion.div>
+          </div>
+
+          {/* Right Column - Main Content */}
+          <div className="xl:col-span-6 space-y-6 lg:space-y-8">
+            <motion.div variants={item}>
+              <Card className="border-0 rounded-3xl shadow-xl bg-white dark:bg-gray-800">
+                <CardHeader className="bg-gradient-to-r from-primary-600 to-primary-600 border-b-0 pb-6 pt-6">
+                  <CardTitle className="flex items-center gap-3 text-lg text-white">
+                    <div className="p-2 bg-white/20 rounded-xl backdrop-blur-sm">
+                      <Users className="w-5 h-5" />
+                    </div>
+                    <div>
+                      Employee Information
+                      <p className="text-primary-100 text-xs font-normal mt-1">
+                        Personal & organizational details
+                      </p>
+                    </div>
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="p-6">
+                  <div className="space-y-4">
+                    {/* Basic Info */}
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                      <InfoBox
+                        icon={<IdCard className="w-4 h-4" />}
+                        label="Employee ID"
+                        value={employeeData?.id || "Not specified"}
+                        color="blue"
+                      />
+                      <InfoBox
+                        icon={<Building className="w-4 h-4" />}
+                        label="Organization ID"
+                        value={employeeData?.organizationId || "Not specified"}
+                        color="purple"
+                      />
+                      <InfoBox
+                        icon={<User className="w-4 h-4" />}
+                        label="User Type"
+                        value={userDetails.userType}
+                        color="green"
+                        capitalize
+                      />
+                    </div>
+
+                    {/* Names */}
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                      <InfoBox
+                        icon={<FileText className="w-4 h-4" />}
+                        label="English Name"
+                        value={employeeData?.name?.en || "Not specified"}
+                        fullWidth
+                      />
+                      <InfoBox
+                        icon={<FileText className="w-4 h-4" />}
+                        label="Amharic Name"
+                        value={employeeData?.name?.am || "Not specified"}
+                        fullWidth
+                        amharic
+                      />
+                    </div>
+
+                    {/* Position Summary */}
+                    {userDetails.employee[0]?.positions?.[0] && (
+                      <div className="p-4 rounded-2xl bg-gradient-to-br from-gray-50 to-white dark:from-gray-700 dark:to-gray-800 border border-gray-200 dark:border-gray-600">
+                        <h4 className="font-semibold text-gray-800 dark:text-gray-200 mb-3 flex items-center gap-2">
+                          <Briefcase className="w-4 h-4 text-primary-600 dark:text-primary-400" />
+                          Current Position
+                        </h4>
+                        <div className="grid grid-cols-2 gap-4">
+                          <div>
+                            <p className="text-xs text-gray-500 dark:text-gray-400">
+                              Position
+                            </p>
+                            <p className="text-sm font-medium text-gray-800 dark:text-gray-200">
+                              {userDetails.employee[0].positions[0].name?.en ||
+                                "Not specified"}
+                            </p>
+                          </div>
+                          <div>
+                            <p className="text-xs text-gray-500 dark:text-gray-400">
+                              Delegation
+                            </p>
+                            <Badge
+                              className={
+                                positionHasDeletation.length
+                                  ? "bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-300 border-primary-200 dark:border-primary-700"
+                                  : "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300 border-gray-200 dark:border-gray-600"
+                              }
+                            >
+                              {positionHasDeletation.length ? "Active" : "None"}
+                            </Badge>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </CardContent>
+              </Card>
+            </motion.div>
+            {/* Top Row: Position Details & Security */}
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8">
+              {/* Position Details */}
+              <motion.div variants={item} className="lg:col-span-1">
+                <Card className="border-0 rounded-3xl shadow-xl bg-white dark:bg-gray-800 h-full">
+                  <CardHeader className="bg-gradient-to-r from-primary-600 to-primary-600 border-b-0 pb-6 pt-6">
+                    <CardTitle className="flex items-center gap-3 text-lg text-white">
+                      <div className="p-2 bg-white/20 rounded-xl backdrop-blur-sm">
+                        <Briefcase className="w-5 h-5" />
+                      </div>
+                      <div>
+                        {t("profile.positionDetails")}
+                        <p className="text-primary-100 text-xs font-normal mt-1">
+                          Your current role
+                        </p>
+                      </div>
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent className="p-6">
+                    <div className="space-y-4">
+                      <PositionDetailItem
+                        icon={<User className="w-4 h-4" />}
+                        label={t("profile.positionName")}
+                        value={localizedName(position.name) || t("common.na")}
+                      />
+                      <PositionDetailItem
+                        icon={<Key className="w-4 h-4" />}
+                        label={t("profile.positionKey")}
+                        value={position.key || t("common.na")}
+                      />
+                      <PositionDetailItem
+                        icon={<IdCard className="w-4 h-4" />}
+                        label={t("profile.employeeId")}
+                        value={employeeData.id || t("common.na")}
+                      />
+                    </div>
+                  </CardContent>
+                </Card>
+              </motion.div>
+
+              {/* Security Card */}
+              <motion.div variants={item} className="lg:col-span-1">
+                <Card className="border-0 rounded-3xl shadow-xl bg-white dark:bg-gray-800 h-full">
+                  <CardHeader className="bg-gradient-to-r from-primary-600 to-primary-600 border-b-0 pb-6 pt-6">
+                    <CardTitle className="flex items-center gap-3 text-lg text-white">
+                      <div className="p-2 bg-white/20 rounded-xl backdrop-blur-sm">
+                        <Lock className="w-5 h-5" />
+                      </div>
+                      <div>
+                        {t("profile.accountSecurity")}
+                        <p className="text-primary-100 text-xs font-normal mt-1">
+                          Account safety
+                        </p>
+                      </div>
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent className="p-6">
+                    <div className="space-y-4">
+                      <SecurityItem
+                        title={t("profile.password")}
+                        description={
+                          userDetails.hasSetPassword
+                            ? t("profile.passwordSetStatus")
+                            : t("profile.passwordNotSetStatus")
+                        }
+                        status={
+                          userDetails.hasSetPassword ? "secure" : "warning"
+                        }
+                        action={
+                          <NavLink to="/change-password">
+                            <Button
+                              size="sm"
+                              className="bg-primary-600 hover:bg-primary-700 text-white rounded-lg"
+                            >
+                              {t("profile.changePassword")}
+                            </Button>
+                          </NavLink>
+                        }
+                      />
+                      <SecurityItem
+                        title="Two-Factor Authentication"
+                        description="Add an extra layer of security"
+                        twoFactorStatus={twoFactor ? "on" : "off"}
+                        action={
+                          <div className="flex items-center gap-2">
+                            <Label
+                              htmlFor="two-factor"
+                              className="text-sm text-gray-700 dark:text-gray-300"
+                            >
+                              {twoFactor ? "Enabled" : "Disabled"}
+                            </Label>
+                            <Switch
+                              id="two-factor"
+                              checked={twoFactor}
+                              disabled={isLoading}
+                              onCheckedChange={handleFactorAuthentication}
+                            />
+                          </div>
+                        }
+                      />
+                      <div className="mt-4 space-y-3">
+                        <div className="flex items-center justify-between p-4 rounded-2xl bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600">
+                          <div className="flex items-center gap-2">
+                            <Monitor className="w-4 h-4 text-gray-600 dark:text-gray-400" />
+                            <span className="font-medium text-gray-900 dark:text-gray-100">
+                              {t("profile.sessions")}
+                            </span>
+                            {userSessions.length > 0 && (
+                              <span className="bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-300 text-xs px-2 py-0.5 rounded-full">
+                                {userSessions.length} active
+                              </span>
+                            )}
+                          </div>
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() =>
+                              setIsSessionsExpanded(!isSessionsExpanded)
+                            }
+                            className="flex items-center gap-1"
+                          >
+                            {isSessionsExpanded ? "Hide" : "Show"}
+                            <ChevronDown
+                              className={`w-4 h-4 transition-transform ${
+                                isSessionsExpanded ? "rotate-180" : ""
+                              }`}
+                            />
+                          </Button>
+                        </div>
+
+                        {/* Expandable Sessions Content */}
+                        {isSessionsExpanded && (
+                          <motion.div
+                            initial={{ opacity: 0, height: 0 }}
+                            animate={{ opacity: 1, height: "auto" }}
+                            exit={{ opacity: 0, height: 0 }}
+                            className="border border-gray-200 dark:border-gray-600 rounded-xl bg-gray-50/50 dark:bg-gray-800/50 overflow-hidden"
+                          >
+                            <div className="p-4 space-y-3">
+                              {userSessions.length === 0 ? (
+                                <div className="text-center py-4 text-gray-500 dark:text-gray-400">
+                                  <Monitor className="w-8 h-8 mx-auto mb-2 text-gray-300 dark:text-gray-600" />
+                                  <p className="text-sm">No active sessions</p>
+                                </div>
+                              ) : (
+                                <>
+                                  {userSessions.map((session) => (
+                                    <div
+                                      key={session.id}
+                                      className="flex items-center justify-between p-3 bg-white dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600"
+                                    >
+                                      <div className="flex items-center gap-3 flex-1">
+                                        <div className="p-2 bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-400 rounded-lg">
+                                          <Monitor className="w-4 h-4" />
+                                        </div>
+                                        <div className="flex-1 min-w-0">
+                                          <p className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
+                                            Device: {session.device}
+                                          </p>
+                                          <p className="text-xs text-gray-600 dark:text-gray-400 truncate">
+                                            Email: {session.email}
+                                          </p>
+                                          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                                            Created:{" "}
+                                            {new Date(
+                                              session.createdAt
+                                            ).toLocaleString()}
+                                          </p>
+                                        </div>
+                                      </div>
+                                      <Button
+                                        variant="ghost"
+                                        size="sm"
+                                        className="p-1 hover:bg-red-50 hover:text-red-600 transition-colors"
+                                        onClick={() =>
+                                          handleLogoutSession(session.id)
+                                        }
+                                        title="Logout this session"
+                                      >
+                                        <LogOut className="w-4 h-4" />
+                                      </Button>
+                                    </div>
+                                  ))}
+
+                                  <Button
+                                    variant="outline"
+                                    size="sm"
+                                    className="w-full text-red-600 border-red-200 hover:bg-red-50 hover:text-red-700 mt-2"
+                                    onClick={handleLogoutAllSessions}
+                                  >
+                                    <LogOut className="w-4 h-4 mr-2" />
+                                    Logout All Other Sessions
+                                  </Button>
+                                </>
+                              )}
+                            </div>
+                          </motion.div>
+                        )}
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              </motion.div>
+            </div>
+
+            {/* Middle Row: Permissions */}
+            <motion.div variants={item}>
+              <Card className="border-0 rounded-3xl shadow-xl bg-white dark:bg-gray-800 overflow-hidden">
+                <CardHeader className="bg-gradient-to-r from-primary-600 to-primary-600 border-b-0 pb-6 pt-6">
+                  <CardTitle className="flex items-center gap-3 text-lg text-white">
+                    <div className="p-2 bg-white/20 rounded-xl backdrop-blur-sm">
+                      <Shield className="w-5 h-5" />
+                    </div>
+                    <div>
+                      {t("profile.permissions")}
+                      <p className="text-primary-100 text-xs font-normal mt-1">
+                        Access rights and privileges
+                      </p>
+                    </div>
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="p-6">
+                  {position.permissions?.length > 0 ? (
+                    <motion.div
+                      layout
+                      className="grid grid-cols-1 sm:grid-cols-2 gap-3"
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      transition={{ staggerChildren: 0.05 }}
+                    >
+                      {(permissionsExpanded ? position.permissions : position.permissions.slice(0, PERMISSIONS_INITIAL_SHOW)).map((perm: any, index: number) => (
+                        <motion.div
+                          key={perm.id}
+                          initial={{ opacity: 0, scale: 0.9 }}
+                          animate={{ opacity: 1, scale: 1 }}
+                          transition={{ delay: index * 0.05 }}
+                          whileHover={{ scale: 1.03, y: -2 }}
+                          className="flex items-center gap-3 p-3 rounded-2xl bg-gradient-to-r from-primary-50 to-primary-50 dark:from-primary-900/30 dark:to-primary-900/30 border border-primary-200 dark:border-primary-800 hover:shadow-md transition-all duration-200"
+                        >
+                          <div className="p-2 rounded-xl bg-gradient-to-br from-primary-500 to-primary-600 dark:from-primary-400 dark:to-primary-500 shadow-sm">
+                            <Star className="w-3.5 h-3.5 text-white" />
+                          </div>
+                          <span className="text-sm font-medium text-primary-900 dark:text-primary-100 truncate">
+                            {perm.key}
+                          </span>
+                        </motion.div>
+                      ))}
+                      {position.permissions.length > PERMISSIONS_INITIAL_SHOW && (
+                        <Button
+                          variant="outline"
+                          className="col-span-1 sm:col-span-2 flex items-center justify-center gap-2 border-primary-300 dark:border-primary-700 text-primary-700 dark:text-primary-300 hover:bg-primary-50 dark:hover:bg-primary-900/30"
+                          onClick={() => setPermissionsExpanded(!permissionsExpanded)}
+                        >
+                          {permissionsExpanded ? (
+                            <>
+                              <ChevronDown className="w-4 h-4 rotate-180" />
+                              Show Less
+                            </>
+                          ) : (
+                            <>
+                              <ChevronDown className="w-4 h-4" />
+                              Show {position.permissions.length - PERMISSIONS_INITIAL_SHOW} More ({position.permissions.length} total)
+                            </>
+                          )}
+                        </Button>
+                      )}
+                    </motion.div>
+                  ) : (
+                    <div className="text-center py-8">
+                      <div className="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-2xl flex items-center justify-center mx-auto mb-4">
+                        <ShieldOff className="w-7 h-7 text-gray-400 dark:text-gray-500" />
+                      </div>
+                      <p className="text-gray-600 dark:text-gray-300 font-medium">
+                        {t("profile.noPermissions")}
+                      </p>
+                      <p className="text-gray-400 dark:text-gray-500 text-sm mt-1">
+                        No special access rights assigned
+                      </p>
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            </motion.div>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+export default ProfilePage;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/common/NavigationHeader/UpdateProfile.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/common/NavigationHeader/UpdateProfile.tsx
new file mode 100644
index 000000000..ab09a3ac6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/common/NavigationHeader/UpdateProfile.tsx
@@ -0,0 +1,434 @@
+import React, { useEffect, useState } from "react";
+import { CardContent } from "@/shared/common/ui/card";
+import { Badge } from "@/shared/common/ui/badge";
+import {
+  ChevronLeft,
+  Mail,
+  CircleUser,
+  Phone,
+  UserPen,
+  RefreshCw,
+  CheckCircle2,
+  Clock,
+  User,
+  AlertCircle,
+  Save,
+  SquareUserRound,
+} from "lucide-react";
+import { Button } from "@/shared/common/ui/button";
+import { useNavigate } from "react-router-dom";
+import { useAuthUser } from "../../../hooks/useAuthUser";
+import { useTranslation } from "react-i18next";
+import { motion } from "framer-motion";
+import { Input } from "@/shared/common/ui/input";
+import { toast } from "sonner";
+import { updateProfile } from "@/shared/services/authService";
+const UpdateProfile = () => {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const { userDetails, isLoading, isError, refetch } = useAuthUser();
+  const [error, setError] = useState("");
+  const [errors, setErrors] = useState<{ [key: string]: string }>({});
+  const [loading, setLoading] = useState(false);
+  const [userName, setUserName] = useState(userDetails?.username);
+  const [email, setEmail] = useState(userDetails?.email);
+  const [englishName, setEnglishName] = useState(userDetails?.name.en);
+  const [amharicName, setAmharicName] = useState(userDetails?.name.am);
+  const [phoneNumber, setPhoneNumber] = useState(userDetails?.phoneNumber);
+  const [success, setSuccess] = useState(false);
+  useEffect(() => {
+    if (userDetails) {
+      setUserName(userDetails.username ?? "");
+      setEmail(userDetails.email ?? "");
+      setEnglishName(userDetails.name?.en ?? "");
+      setAmharicName(userDetails.name?.am ?? "");
+      setPhoneNumber(userDetails.phoneNumber ?? "");
+    }
+  }, [userDetails]);
+  // Animation variants
+  const container = {
+    hidden: { opacity: 0 },
+    show: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.2,
+      },
+    },
+  };
+
+  const item = {
+    hidden: { opacity: 0, y: 20 },
+    show: { opacity: 1, y: 0, transition: { duration: 0.4 } },
+  };
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSuccess(false);
+    // check for empty field
+    const newErrors: { [key: string]: string } = {};
+    if (!email.trim()) newErrors.email = t("profile.emailRequired");
+    if (!userName.trim()) newErrors.userName = t("profile.usernameRequired");
+    if (!phoneNumber.trim()) newErrors.phoneNumber = t("profile.phoneRequired");
+    if (!englishName.trim())
+      newErrors.englishName = t("profile.englishNameRequired");
+    if (!amharicName.trim())
+      newErrors.amharicName = t("profile.amharicNameRequired");
+    setErrors(newErrors);
+    // Phone number validation: must start with +2519 and followed by 8 digits
+    const phoneRegex = /^(\+2519\d{8}|09\d{8})$/;
+    if (!phoneRegex.test(phoneNumber)) {
+      setError(t("profile.invalidPhoneFormat"));
+      toast.error(t("profile.invalidPhoneFormat"), {
+        description: t("profile.validPhoneFormat"),
+      });
+      return;
+    }
+
+    // Email validation
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(email)) {
+      setError(t("profile.invalidEmailFormat"));
+      toast.error(t("profile.invalidEmailFormat"), {
+        description: t("profile.validEmailFormat"),
+      });
+      return;
+    }
+
+    setLoading(true);
+    try {
+      await updateProfile({
+        email,
+        username: userName,
+        phoneNumber,
+        name: {
+          am: amharicName,
+          en: englishName,
+        },
+      });
+      setSuccess(true);
+      toast.success(t("profile.profileUpdateSuccess"), {
+        description: t("profile.profileUpdated"),
+      });
+
+      //setTimeout(() => (window.location.href = "/profile"), 1200);
+    } catch (error: any) {
+      const message = error?.message || t("profile.profileUpdateFailed");
+      setError(message);
+      toast.error(t("profile.profileUpdateFailed"), {
+        description: message,
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen w-full bg-gradient-to-br from-background via-secondary/20 to-background flex flex-col">
+      <motion.div
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="flex items-center justify-between p-4 sm:p-6 lg:p-8 border-b border-border/50 backdrop-blur-sm bg-background/80"
+      >
+        <Button
+          onClick={() => navigate(-1)}
+          variant="outline"
+          className="flex items-center gap-2 px-4 py-2 rounded-lg hover:bg-secondary/50 transition-all duration-200 hover:scale-105 active:scale-95"
+        >
+          <ChevronLeft className="w-4 h-4 sm:w-5 sm:h-5" />
+          <span className="text-sm sm:text-base">Back</span>
+        </Button>
+
+        <div className="flex flex-col items-center text-center">
+          <h1 className="text-xl sm:text-2xl lg:text-3xl font-bold text-foreground bg-gradient-to-r from-primary-500 to-primary-600 bg-clip-text text-transparent">
+            Profile Settings
+          </h1>
+          <p className="text-xs sm:text-sm text-muted-foreground mt-1 hidden sm:block">
+            Manage your account information
+          </p>
+        </div>
+
+        <div className="w-12 sm:w-14" />
+      </motion.div>
+
+      <div className="flex-1 flex items-center justify-center p-4 sm:p-6 lg:p-8">
+        <motion.div
+          initial={{ opacity: 0, scale: 0.95, y: 20 }}
+          animate={{ opacity: 1, scale: 1, y: 0 }}
+          transition={{ duration: 0.5, type: "spring", stiffness: 100 }}
+          className="w-full max-w-2xl rounded-2xl overflow-hidden shadow-2xl bg-card border border-border/50 backdrop-blur-sm"
+        >
+          {/* Profile Header with Green Gradient */}
+          <div className="relative bg-gradient-to-r from-primary-500 via-primary-600 to-primary-600 h-32 sm:h-40 lg:h-48 overflow-hidden">
+            {/* Decorative Elements */}
+            <div className="absolute inset-0 bg-grid-white/10" />
+            <div className="absolute top-0 left-0 w-32 h-32 bg-white/10 rounded-full -translate-x-1/2 -translate-y-1/2" />
+            <div className="absolute bottom-0 right-0 w-24 h-24 bg-white/10 rounded-full translate-x-1/3 translate-y-1/3" />
+
+            {/* Status Badge */}
+            <div className="absolute top-4 right-4">
+              <Badge
+                className={`rounded-full text-xs px-3 py-1.5 backdrop-blur-sm border-0 ${
+                  userDetails?.status === "accepted"
+                    ? "bg-primary-500/20 text-primary-100 border border-primary-400/50"
+                    : "bg-yellow-500/20 text-yellow-100 border border-yellow-400/50"
+                }`}
+              >
+                {userDetails?.status === "accepted" ? (
+                  <div className="flex items-center gap-1">
+                    <CheckCircle2 className="w-3 h-3" />
+                    <span>Verified</span>
+                  </div>
+                ) : (
+                  <div className="flex items-center gap-1">
+                    <Clock className="w-3 h-3" />
+                    <span>Pending</span>
+                  </div>
+                )}
+              </Badge>
+            </div>
+
+            {/* Profile Avatar */}
+            <div className="absolute -bottom-6 sm:-bottom-8 left-1/2 transform -translate-x-1/2">
+              <motion.div
+                whileHover={{ scale: 1.08, rotate: 5 }}
+                whileTap={{ scale: 0.95 }}
+                className="relative h-24 w-24 sm:h-32 sm:w-32 rounded-full border-4 border-card bg-card shadow-2xl overflow-hidden group"
+              >
+                <div className="absolute inset-0 bg-gradient-to-br from-primary-400/30 to-primary-600/30 flex items-center justify-center group-hover:from-primary-400/40 group-hover:to-primary-600/40 transition-all duration-300">
+                  <UserPen className="w-8 h-8 sm:w-12 sm:h-12 text-white drop-shadow-sm" />
+                </div>
+                <div className="absolute inset-0 border-2 border-white/20 rounded-full" />
+                {/* Online Status Indicator */}
+                <div className="absolute bottom-1 right-1 sm:bottom-2 sm:right-2 w-3 h-3 sm:w-4 sm:h-4 bg-primary-400 border-2 border-card rounded-full" />
+              </motion.div>
+            </div>
+          </div>
+
+          <CardContent className="pt-16 sm:pt-20 pb-6 sm:pb-8 px-4 sm:px-6 lg:px-8">
+            {/* User Info Header */}
+            <div className="text-center mb-6 sm:mb-8">
+              <motion.h2
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.2 }}
+                className="text-2xl sm:text-3xl lg:text-4xl font-bold text-foreground mb-2"
+              >
+                Update Your Profile
+              </motion.h2>
+              <motion.p
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.3 }}
+                className="text-muted-foreground text-sm sm:text-base lg:text-lg"
+              >
+                Keep your information current and accurate
+              </motion.p>
+            </div>
+
+            {/* Current User Display */}
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ delay: 0.4 }}
+              className="flex flex-col items-center justify-center gap-3 mb-6 sm:mb-8 p-4 bg-primary-50/50 dark:bg-primary-950/20 rounded-xl border border-primary-200/50 dark:border-primary-800/50"
+            >
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-full bg-gradient-to-r from-primary-500 to-primary-600 flex items-center justify-center">
+                  <User className="w-5 h-5 text-white" />
+                </div>
+                <div className="text-left">
+                  <p className="text-lg sm:text-xl font-semibold text-foreground">
+                    {userDetails?.name?.en || "Not set"}
+                  </p>
+                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <SquareUserRound className="w-4 h-4" />
+                    <span>
+                      {userDetails?.employee[0]?.positions[0]?.name?.en || ""}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+
+            {/* Success Message */}
+            {success && (
+              <motion.div
+                initial={{ opacity: 0, y: -10, scale: 0.95 }}
+                animate={{ opacity: 1, y: 0, scale: 1 }}
+                exit={{ opacity: 0, y: -10, scale: 0.95 }}
+                className="mb-6 p-4 bg-primary-50 dark:bg-primary-950/30 border border-primary-200 dark:border-primary-800 rounded-xl flex items-center gap-3 backdrop-blur-sm"
+              >
+                <CheckCircle2 className="w-5 h-5 text-primary-600 dark:text-primary-400 flex-shrink-0" />
+                <div>
+                  <p className="text-sm font-medium text-primary-800 dark:text-primary-300">
+                    Profile updated successfully!
+                  </p>
+                  <p className="text-xs text-primary-600 dark:text-primary-400/70">
+                    Your changes have been saved
+                  </p>
+                </div>
+              </motion.div>
+            )}
+
+            {/* Form */}
+            <motion.form
+              variants={container}
+              initial="hidden"
+              animate="show"
+              className="space-y-4 sm:space-y-6"
+              onSubmit={handleSubmit}
+            >
+              {/* Form Fields Grid */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
+                {/* Username */}
+                <motion.div variants={item} className="relative md:col-span-2">
+                  <label className="text-sm font-medium text-foreground mb-2 block">
+                    Username
+                  </label>
+                  <div className="relative group">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none transition-colors duration-200 group-focus-within:text-primary-600">
+                      <User className="h-4 w-4 sm:h-5 sm:w-5 text-muted-foreground group-focus-within:text-primary-600" />
+                    </div>
+                    <Input
+                      placeholder="Enter your username"
+                      className="pl-10 h-11 sm:h-12 bg-input/50 border-border/50 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 transition-all duration-200 group-hover:border-primary-500/50"
+                      value={userName}
+                      onChange={(e) => setUserName(e.target.value)}
+                    />
+                  </div>
+                  {errors.userName && (
+                    <p className="text-xs text-destructive mt-2 flex items-center gap-1">
+                      <AlertCircle className="w-3 h-3" />
+                      {errors.userName}
+                    </p>
+                  )}
+                </motion.div>
+
+                {/* English Name */}
+                <motion.div variants={item} className="relative">
+                  <label className="text-sm font-medium text-foreground mb-2 block">
+                    English Name
+                  </label>
+                  <div className="relative group">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none transition-colors duration-200 group-focus-within:text-primary-600">
+                      <UserPen className="h-4 w-4 sm:h-5 sm:w-5 text-muted-foreground group-focus-within:text-primary-600" />
+                    </div>
+                    <Input
+                      placeholder="English name"
+                      className="pl-10 h-11 sm:h-12 bg-input/50 border-border/50 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 transition-all duration-200 group-hover:border-primary-500/50"
+                      value={englishName}
+                      onChange={(e) => setEnglishName(e.target.value)}
+                    />
+                  </div>
+                  {errors.englishName && (
+                    <p className="text-xs text-destructive mt-2 flex items-center gap-1">
+                      <AlertCircle className="w-3 h-3" />
+                      {errors.englishName}
+                    </p>
+                  )}
+                </motion.div>
+
+                {/* Amharic Name */}
+                <motion.div variants={item} className="relative">
+                  <label className="text-sm font-medium text-foreground mb-2 block">
+                    Amharic Name
+                  </label>
+                  <div className="relative group">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none transition-colors duration-200 group-focus-within:text-primary-600">
+                      <UserPen className="h-4 w-4 sm:h-5 sm:w-5 text-muted-foreground group-focus-within:text-primary-600" />
+                    </div>
+                    <Input
+                      placeholder="Amharic name"
+                      className="pl-10 h-11 sm:h-12 bg-input/50 border-border/50 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 transition-all duration-200 group-hover:border-primary-500/50"
+                      value={amharicName}
+                      onChange={(e) => setAmharicName(e.target.value)}
+                    />
+                  </div>
+                  {errors.amharicName && (
+                    <p className="text-xs text-destructive mt-2 flex items-center gap-1">
+                      <AlertCircle className="w-3 h-3" />
+                      {errors.amharicName}
+                    </p>
+                  )}
+                </motion.div>
+
+                {/* Email */}
+                <motion.div variants={item} className="relative">
+                  <label className="text-sm font-medium text-foreground mb-2 block">
+                    Email Address
+                  </label>
+                  <div className="relative group">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none transition-colors duration-200 group-focus-within:text-primary-600">
+                      <Mail className="h-4 w-4 sm:h-5 sm:w-5 text-muted-foreground group-focus-within:text-primary-600" />
+                    </div>
+                    <Input
+                      type="email"
+                      placeholder="your@email.com"
+                      className="pl-10 h-11 sm:h-12 bg-input/50 border-border/50 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 transition-all duration-200 group-hover:border-primary-500/50"
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                    />
+                  </div>
+                  {errors.email && (
+                    <p className="text-xs text-destructive mt-2 flex items-center gap-1">
+                      <AlertCircle className="w-3 h-3" />
+                      {errors.email}
+                    </p>
+                  )}
+                </motion.div>
+
+                {/* Phone Number */}
+                <motion.div variants={item} className="relative">
+                  <label className="text-sm font-medium text-foreground mb-2 block">
+                    Phone Number
+                  </label>
+                  <div className="relative group">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none transition-colors duration-200 group-focus-within:text-primary-600">
+                      <Phone className="h-4 w-4 sm:h-5 sm:w-5 text-muted-foreground group-focus-within:text-primary-600" />
+                    </div>
+                    <Input
+                      type="tel"
+                      placeholder="+1 (555) 000-0000"
+                      className="pl-10 h-11 sm:h-12 bg-input/50 border-border/50 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 transition-all duration-200 group-hover:border-primary-500/50"
+                      value={phoneNumber}
+                      onChange={(e) => setPhoneNumber(e.target.value)}
+                    />
+                  </div>
+                  {errors.phoneNumber && (
+                    <p className="text-xs text-destructive mt-2 flex items-center gap-1">
+                      <AlertCircle className="w-3 h-3" />
+                      {errors.phoneNumber}
+                    </p>
+                  )}
+                </motion.div>
+              </div>
+
+              {/* Submit Button */}
+              <motion.div variants={item} className="pt-4 sm:pt-6">
+                <Button
+                  type="submit"
+                  className="w-full h-11 sm:h-12 bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 text-white font-semibold text-sm sm:text-base shadow-lg rounded-xl transition-all duration-200 hover:shadow-xl hover:scale-[1.02] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
+                  disabled={loading}
+                >
+                  {loading ? (
+                    <span className="flex items-center justify-center gap-2">
+                      <RefreshCw className="animate-spin h-4 w-4 sm:h-5 sm:w-5" />
+                      <span>Updating Profile...</span>
+                    </span>
+                  ) : (
+                    <span className="flex items-center justify-center gap-2">
+                      <Save className="h-4 w-4 sm:h-5 sm:w-5" />
+                      <span>Update Profile</span>
+                    </span>
+                  )}
+                </Button>
+              </motion.div>
+            </motion.form>
+          </CardContent>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+export default UpdateProfile;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/common/PreviewModal.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/common/PreviewModal.tsx
new file mode 100644
index 000000000..5aa05ceff
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/common/PreviewModal.tsx
@@ -0,0 +1,129 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { Spinner } from "@/shared/common/ui/sppiner";
+import { X, Printer, RotateCcw } from "lucide-react";
+import { toast } from "sonner";
+
+interface PreviewModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  pdfData: ArrayBuffer | null;
+  isLoading: boolean;
+  error: string | null;
+  onRetry: () => void;
+}
+
+export const PreviewModal: React.FC<PreviewModalProps> = ({
+  isOpen,
+  onClose,
+  pdfData,
+  isLoading,
+  error,
+  onRetry,
+}) => {
+  const { t } = useTranslation();
+  const [pdfUrl, setPdfUrl] = useState<string | null>(null);
+
+  React.useEffect(() => {
+    if (pdfData) {
+      const blob = new Blob([pdfData], { type: "application/pdf" });
+      const url = URL.createObjectURL(blob);
+      setPdfUrl(url);
+
+      return () => {
+        URL.revokeObjectURL(url);
+      };
+    }
+  }, [pdfData]);
+
+  const handlePrint = () => {
+    if (pdfUrl) {
+      const printWindow = window.open(pdfUrl, "_blank");
+      if (printWindow) {
+        printWindow.onload = () => {
+          printWindow.print();
+        };
+      } else {
+        toast.error("Unable to open print window");
+      }
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-4xl w-full h-[90vh] flex flex-col">
+        <DialogHeader className="flex flex-row items-center justify-between">
+          <DialogTitle>{t("preview.title")}</DialogTitle>
+          <div className="flex items-center gap-2">
+            {pdfUrl && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handlePrint}
+                className="flex items-center gap-2"
+              >
+                <Printer className="h-4 w-4" />
+                {t("preview.print")}
+              </Button>
+            )}
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onClose}
+              className="h-8 w-8 p-0"
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+        </DialogHeader>
+
+        <div className="flex-1 flex items-center justify-center">
+          {isLoading && (
+            <div className="flex flex-col items-center gap-4">
+              <Spinner size="large" />
+              <p className="text-sm text-muted-foreground">
+                {t("preview.generating")}
+              </p>
+            </div>
+          )}
+
+          {error && (
+            <div className="flex flex-col items-center gap-4 text-center">
+              <div className="text-destructive">
+                <p className="font-medium">{t("preview.failed")}</p>
+                <p className="text-sm text-muted-foreground mt-1">
+                  {error.includes("network") || error.includes("Network")
+                    ? t("preview.networkError")
+                    : error}
+                </p>
+              </div>
+              <Button
+                onClick={onRetry}
+                variant="outline"
+                className="flex items-center gap-2"
+              >
+                <RotateCcw className="h-4 w-4" />
+                {t("preview.retry")}
+              </Button>
+            </div>
+          )}
+
+          {pdfUrl && !isLoading && !error && (
+            <iframe
+              src={pdfUrl}
+              className="w-full h-full border rounded"
+              title={t("preview.title")}
+            />
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/common/Top.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/common/Top.tsx
new file mode 100644
index 000000000..507e7da74
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/common/Top.tsx
@@ -0,0 +1,610 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import { useNavigate, useLocation } from "react-router-dom";
+import { Button } from "@/shared/common/ui/button";
+import { cn } from "@/shared/lib/utils";
+import { FiBell, FiMenu } from "react-icons/fi";
+import {
+  Check,
+  ChevronDown,
+  ClipboardList,
+  Clock,
+  FileText,
+  Home,
+  Languages,
+  Key,
+  LogOut,
+  LucideIcon,
+  Moon,
+  Sun,
+  User,
+  UserPen,
+  UsersRound,
+} from "lucide-react";
+import { DynamicBreadcrumb } from "@/shared/components/ui/DynamicBreadcrumb";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import NotificationList from "../NotificationList";
+import ReminderList from "../ReminderList";
+import { useNotifications } from "@/shared/hooks/useNotification";
+import { useReminder } from "@/shared/hooks/useReminder";
+import UserApprovalDropdown from "../PendingUsersList";
+import { usePendingUsers } from "@/user-management/userManagement/hooks/usePendingUsersHook";
+import { useUserDetail } from "../hooks/useUserDetail";
+import { MeDto } from "@/shared/dto/user/meDto";
+import { useDarkMode } from "@/shared/hooks/useDarkMode";
+import {
+  UI_LANGUAGE_OPTIONS,
+  getUiLanguageLabel,
+  getUiLanguageShortLabel,
+  resolveUiLanguage,
+} from "@/shared/i18n/uiLanguages";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+import {
+  resolveModuleConfig,
+  useTenantConfig,
+} from "@/layout/components/TenantConfig";
+
+interface HeaderProps {
+  onToggleSidebar?: () => void;
+  showRecordManagementShortcut?: boolean;
+  showUserManagementShortcut?: boolean;
+}
+
+export interface INavTabs {
+  icon: LucideIcon;
+  isVissible?: boolean;
+  label?: string;
+  title?: string;
+  href?: string;
+  url?: string;
+  isActive?: boolean;
+  count?: boolean;
+  isPrimary?: boolean;
+  countBadge?: number;
+}
+
+const Top: React.FC<HeaderProps> = ({
+  onToggleSidebar,
+  showRecordManagementShortcut = false,
+  showUserManagementShortcut = false,
+}) => {
+  const { t, i18n } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { userDetails, logout } = useAuthUser();
+  const currentLanguage = resolveUiLanguage(
+    i18n.resolvedLanguage || i18n.language,
+  );
+
+  const fullName =
+    currentLanguage === "am"
+      ? userDetails?.name?.am || userDetails?.name?.en || t("header.user")
+      : userDetails?.name?.en || userDetails?.name?.am || t("header.user");
+
+  const splittedName = fullName.trim().split(" ");
+  const initials =
+    splittedName.length === 1
+      ? splittedName[0][0]
+      : `${splittedName[0][0]}${splittedName[1][0]}`;
+
+  const userRoles = userDetails?.roles?.map((role: any) => role.key) || [];
+  const isSuperAdmin = userRoles.includes("super_admin");
+
+  const activePositionName =
+    currentLanguage === "am"
+      ? userDetails?.employee?.[0]?.positions?.[0]?.name?.am ||
+        userDetails?.employee?.[0]?.positions?.[0]?.name?.en
+      : userDetails?.employee?.[0]?.positions?.[0]?.name?.en ||
+        userDetails?.employee?.[0]?.positions?.[0]?.name?.am;
+
+  const normalizedUserType = userDetails?.userType?.trim().toLowerCase() || "";
+  const userTypeLabel =
+    normalizedUserType === "individual"
+      ? t("header.user")
+      : normalizedUserType
+        ? normalizedUserType
+            .replace(/[_-]/g, " ")
+            .replace(/\b\w/g, (char) => char.toUpperCase())
+        : "";
+
+  const roleLabel =
+    activePositionName ||
+    userTypeLabel ||
+    (normalizedUserType
+      ? userDetails?.roles?.[0]?.key
+          ?.replace(/[:_]/g, " ")
+          .replace(/\b\w/g, (char) => char.toUpperCase())
+      : "");
+
+  const { permissionKeys } = useUserDetail(userDetails as MeDto);
+  const canActivateUsers = permissionKeys.includes("can:activateEmployee");
+
+  const handleLogout = () => {
+    logout();
+  };
+
+  const { isDarkMode, toggleDarkMode } = useDarkMode();
+  const { pendingUsers } = usePendingUsers({ take: 5, skip: 0 });
+  const pendingUsersCount = pendingUsers?.count || 0;
+
+  const [openNotifications, setOpenNotifications] = useState(false);
+  const [openReminders, setOpenReminders] = useState(false);
+  const [openPendingUsers, setPendingUsers] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const remindersRef = useRef<HTMLDivElement>(null);
+  const pendingUsersRef = useRef<HTMLDivElement>(null);
+  const { pendingCount } = useReminder();
+  const { config: tenantConfig } = useTenantConfig();
+  const moduleConfig = resolveModuleConfig(tenantConfig);
+  const isOrgAdmin =
+    userRoles.includes("unit_admin") ||
+    userRoles.includes("organization_admin");
+
+  const modulesList = [
+    {
+      id: "homepage",
+      label: t("nav.homePage", "Home Page"),
+      path: "/homepage",
+    },
+    ...(moduleConfig.recordManagement
+      ? [
+          {
+            id: "recordManagement",
+            label: t("nav.Record Management", "Record Management"),
+            path: "/record-management/dashboard",
+          },
+        ]
+      : []),
+    ...(moduleConfig.performance
+      ? [
+          {
+            id: "performanceManagement",
+            label: t("nav.PerformanceManagement", "Performance Management"),
+            path: "/performance-management/plan-years",
+          },
+        ]
+      : []),
+    ...(moduleConfig.objective
+      ? [
+          {
+            id: "objectiveManagement",
+            label: t("nav.objectiveManagement", "Objective Management"),
+            path: "/objective-management/plan-years",
+          },
+        ]
+      : []),
+    ...(moduleConfig.dms
+      ? [
+          {
+            id: "documentManagement",
+            label: t("nav.DocumentManagement", "Document Management"),
+            path: "/dms/dashboard",
+          },
+        ]
+      : []),
+    ...(isOrgAdmin && moduleConfig.siteManagement
+      ? [
+          {
+            id: "orgAdmin",
+            label: t("nav.admin", "Admin"),
+            path: "/user-management/user_management-dashboard",
+          },
+        ]
+      : []),
+    ...(isSuperAdmin
+      ? [
+          {
+            id: "superAdmin",
+            label: t("OrganizationAdmin", "Super Admin"),
+            path: "/user-management/dashboard",
+          },
+        ]
+      : []),
+  ];
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      const isDialogInteraction =
+        target.closest("[role='dialog']") ||
+        target.closest("[data-slot='dialog-content']") ||
+        target.closest("[data-slot='dialog-overlay']") ||
+        target.closest("[data-slot='dialog-close']");
+
+      if (isDialogInteraction) {
+        return;
+      }
+
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(target as Node)
+      ) {
+        setOpenNotifications(false);
+      }
+
+      if (
+        pendingUsersRef.current &&
+        !pendingUsersRef.current.contains(target as Node)
+      ) {
+        setPendingUsers(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const { unseenCount, refresh } = useNotifications({
+    take: 100,
+    skip: 0,
+    orderBy: "createdAt:DESC",
+  });
+
+  const changeLanguage = (lng: string) => {
+    i18n.changeLanguage(lng);
+  };
+
+  return (
+    <div className="flex h-24 flex-col">
+      <header className="fixed left-0 right-0 top-0 z-40 h-16 border-b border-primary-100/70 bg-white/90 shadow-sm backdrop-blur-md dark:border-gray-800 dark:bg-gray-900/90">
+        <div className="flex h-full items-center justify-between px-2 sm:px-4 md:px-6">
+          <div className="flex min-w-0 flex-1 items-center gap-2 md:gap-3">
+            <DropdownMenu>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-9 w-9 flex-shrink-0 rounded-xl bg-white/90 text-gray-600 shadow-sm ring-1 ring-inset ring-black/5 transition-colors hover:bg-primary-50 hover:text-primary-700 hover:ring-primary-200 dark:bg-gray-800/90 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-primary-900/20 dark:hover:text-primary-300 dark:hover:ring-primary-700/40"
+                      aria-label={t("nav.moduleNavigationHint")}
+                      title={t("nav.moduleNavigationHint")}
+                    >
+                      <FiMenu className="h-5 w-5" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                </TooltipTrigger>
+                <TooltipContent side="bottom" sideOffset={6}>
+                  {t("nav.moduleNavigationHint")}
+                </TooltipContent>
+              </Tooltip>
+              <DropdownMenuContent
+                align="start"
+                className="w-56 dark:bg-gray-900 dark:border-gray-800"
+              >
+                {modulesList
+                  .filter((item) => {
+                    const currentPath = location.pathname;
+                    if (item.id === "homepage") {
+                      return !currentPath.startsWith("/homepage");
+                    }
+                    if (item.id === "recordManagement") {
+                      return !currentPath.startsWith("/record-management");
+                    }
+                    if (item.id === "performanceManagement") {
+                      return !currentPath.startsWith("/performance-management");
+                    }
+                    if (item.id === "objectiveManagement") {
+                      return !currentPath.startsWith("/objective-management");
+                    }
+                    if (item.id === "documentManagement") {
+                      return !currentPath.startsWith("/dms");
+                    }
+                    if (item.id === "complaints") {
+                      return !currentPath.startsWith("/complaints");
+                    }
+                    if (item.id === "orgAdmin" || item.id === "superAdmin") {
+                      return !currentPath.startsWith("/user-management");
+                    }
+                    return true;
+                  })
+                  .map((item) => (
+                    <DropdownMenuItem
+                      key={item.id}
+                      onClick={() => navigate(item.path)}
+                      className="cursor-pointer hover:bg-primary-50 dark:hover:bg-primary-900/30 hover:text-primary-700 dark:hover:text-primary-400 py-2.5"
+                    >
+                      <span>{item.label}</span>
+                    </DropdownMenuItem>
+                  ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            <div className="hidden min-w-0 flex-1 sm:block sm:max-w-[34vw] lg:max-w-[41vw] xl:max-w-[48vw]">
+              <DynamicBreadcrumb />
+            </div>
+
+            {showUserManagementShortcut && (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="flex h-9 w-9 sm:w-auto items-center justify-center sm:justify-start gap-1.5 rounded-xl bg-white/90 text-gray-600 shadow-sm ring-1 ring-inset ring-black/5 transition-colors hover:bg-primary-50 hover:text-primary-700 hover:ring-primary-200 dark:bg-gray-800/90 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-primary-900/20 dark:hover:text-primary-300 dark:hover:ring-primary-700/40 px-0 sm:px-3"
+                onClick={() => navigate("/user-management")}
+              >
+                <User className="h-4 w-4 shrink-0 text-primary-500" />
+                <span className="hidden sm:inline text-xs font-semibold">
+                  {t("dashboard.userManagement", "User Management")}
+                </span>
+              </Button>
+            )}
+          </div>
+
+          <div className="flex max-w-[56vw] flex-shrink-0 items-center space-x-1.5 sm:max-w-none sm:space-x-2.5">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-9 w-9 rounded-xl bg-white/90 text-gray-600 shadow-sm ring-1 ring-inset ring-black/5 transition-colors hover:bg-primary-50 hover:text-primary-700 hover:ring-primary-200 dark:bg-gray-800/90 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-primary-900/20 dark:hover:text-primary-300 dark:hover:ring-primary-700/40 sm:h-10 sm:w-10"
+              aria-label={isDarkMode ? "Light mode" : "Dark mode"}
+              onClick={toggleDarkMode}
+              title={
+                isDarkMode ? "Switch to light mode" : "Switch to dark mode"
+              }
+            >
+              {isDarkMode ? (
+                <Sun className="h-4 w-4 text-yellow-500" />
+              ) : (
+                <Moon className="h-4 w-4 text-gray-700 dark:text-gray-300" />
+              )}
+            </Button>
+
+            {canActivateUsers && (
+              <div className="relative">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="relative h-9 w-9 rounded-xl bg-white/90 text-gray-600 shadow-sm ring-1 ring-inset ring-black/5 transition-colors hover:bg-primary-50 hover:text-primary-700 hover:ring-primary-200 dark:bg-gray-800/90 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-primary-900/20 dark:hover:text-primary-300 dark:hover:ring-primary-700/40 sm:h-10 sm:w-10"
+                  aria-label={t("header.notifications")}
+                  onClick={() => setPendingUsers((prev) => !prev)}
+                >
+                  <ClipboardList className="h-4 w-4" />
+                </Button>
+
+                {pendingUsersCount > 0 && (
+                  <span className="absolute -right-1.5 -top-1.5 rounded-full bg-yellow-500 px-1.5 py-0.5 text-[10px] font-bold text-white shadow">
+                    {pendingUsersCount > 99 ? "99+" : pendingUsersCount}
+                  </span>
+                )}
+
+                {openPendingUsers && (
+                  <div
+                    ref={pendingUsersRef}
+                    className="fixed left-3 right-3 top-16 z-50 mt-2 max-h-[calc(100dvh-5rem)] overflow-y-auto rounded-2xl bg-white p-3 shadow-2xl ring-1 ring-black/5 dark:bg-gray-900 dark:ring-white/10 sm:absolute sm:left-auto sm:right-0 sm:top-auto sm:max-h-96 sm:w-80 sm:p-4"
+                  >
+                    <UserApprovalDropdown />
+                  </div>
+                )}
+              </div>
+            )}
+
+            <div className="relative" ref={dropdownRef}>
+              <Button
+                variant="ghost"
+                size="icon"
+                className={cn(
+                  "relative h-9 w-9 rounded-xl bg-white/90 text-gray-600 shadow-sm ring-1 ring-inset ring-black/5 transition-colors hover:bg-primary-50 hover:text-primary-700 hover:ring-primary-200 dark:bg-gray-800/90 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-primary-900/20 dark:hover:text-primary-300 dark:hover:ring-primary-700/40 sm:h-10 sm:w-10",
+                  openNotifications &&
+                    "bg-primary-50 text-primary-700 ring-primary-300 dark:bg-primary-900/30 dark:text-primary-300 dark:ring-primary-700/60",
+                )}
+                aria-label={t("header.notifications")}
+                onClick={() =>
+                  setOpenNotifications((prev) => {
+                    const next = !prev;
+                    if (next) refresh();
+                    return next;
+                  })
+                }
+              >
+                <FiBell
+                  className={cn(
+                    "h-4 w-4 transition-colors",
+                    openNotifications &&
+                      "fill-primary-100 text-primary-700 dark:fill-primary-900/40 dark:text-primary-300",
+                  )}
+                />
+                {unseenCount > 0 && (
+                  <span className="absolute -right-1.5 -top-1.5 min-w-[18px] rounded-full bg-red-500 px-1.5 py-0.5 text-center text-[10px] font-bold text-white shadow">
+                    {unseenCount > 99 ? "99+" : unseenCount}
+                  </span>
+                )}
+              </Button>
+
+              {openNotifications && (
+                <div className="fixed left-3 right-3 top-16 z-50 mt-2 max-h-[calc(100dvh-5rem)] overflow-hidden rounded-2xl bg-white shadow-2xl ring-1 ring-black/5 dark:bg-gray-900 dark:ring-white/10 sm:absolute sm:left-auto sm:right-0 sm:top-auto sm:w-[24rem]">
+                  <NotificationList />
+                </div>
+              )}
+            </div>
+
+            {/* Reminders */}
+            <div className="relative" ref={remindersRef}>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="relative h-9 w-9 rounded-xl bg-white/90 text-gray-600 shadow-sm ring-1 ring-inset ring-black/5 transition-colors hover:bg-primary/10 hover:text-primary hover:ring-primary/30 dark:bg-gray-800/90 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-primary/20 dark:hover:text-primary-300 dark:hover:ring-primary/40 sm:h-10 sm:w-10"
+                aria-label="Reminders"
+                onClick={() => setOpenReminders((prev) => !prev)}
+              >
+                <Clock className="h-4 w-4" />
+                {pendingCount > 0 && (
+                  <span className="absolute -right-1.5 -top-1.5 min-w-[18px] rounded-full bg-primary px-1.5 py-0.5 text-center text-[10px] font-bold text-primary-foreground shadow">
+                    {pendingCount > 99 ? "99+" : pendingCount}
+                  </span>
+                )}
+              </Button>
+              {openReminders && (
+                <div className="fixed left-3 right-3 top-16 z-50 mt-2 max-h-[calc(100dvh-5rem)] overflow-hidden rounded-2xl bg-white shadow-2xl ring-1 ring-black/5 dark:bg-gray-900 dark:ring-white/10 sm:absolute sm:left-auto sm:right-0 sm:top-auto sm:w-[24rem]">
+                  <ReminderList />
+                </div>
+              )}
+            </div>
+
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-9 w-9 justify-center rounded-xl bg-white/90 px-0 text-xs font-semibold text-gray-700 shadow-sm ring-1 ring-inset ring-black/5 transition-colors hover:bg-primary-50 hover:text-primary-700 hover:ring-primary-200 dark:bg-gray-800/90 dark:text-gray-200 dark:ring-white/10 dark:hover:bg-primary-900/20 dark:hover:text-primary-300 dark:hover:ring-primary-700/40 sm:h-10 sm:w-auto sm:gap-2 sm:px-3"
+                >
+                  <Languages className="h-4 w-4 text-primary-500" />
+                  <span className="hidden md:inline">
+                    {getUiLanguageLabel(currentLanguage, t)}
+                  </span>
+                  <span className="hidden sm:inline md:hidden">
+                    {getUiLanguageShortLabel(currentLanguage, t)}
+                  </span>
+                  <ChevronDown className="hidden h-3.5 w-3.5 text-gray-400 sm:block" />
+                </Button>
+              </DropdownMenuTrigger>
+
+              <DropdownMenuContent
+                className="w-52 rounded-xl bg-white p-2 shadow-xl ring-1 ring-black/5 dark:bg-gray-900 dark:ring-white/10"
+                align="end"
+                forceMount
+              >
+                {UI_LANGUAGE_OPTIONS.map((lang) => (
+                  <DropdownMenuItem
+                    key={lang.value}
+                    onClick={() => changeLanguage(lang.value)}
+                    className={cn(
+                      "flex cursor-pointer items-center justify-between rounded-lg px-3 py-2.5 text-sm text-gray-700 transition-colors hover:bg-primary-50 dark:text-gray-200 dark:hover:bg-primary-900/30",
+                      currentLanguage === lang.value &&
+                        "bg-primary-100 text-primary-800 dark:bg-primary-800/50 dark:text-white",
+                    )}
+                  >
+                    <div className="flex items-center gap-2">
+                      <span className="inline-flex h-6 w-6 items-center justify-center rounded-md bg-gray-100 text-[11px] font-bold text-gray-600 dark:bg-gray-700 dark:text-gray-200">
+                        {getUiLanguageShortLabel(lang.value, t)}
+                      </span>
+                      <span>{getUiLanguageLabel(lang.value, t)}</span>
+                    </div>
+                    {currentLanguage === lang.value && (
+                      <Check className="h-4 w-4 text-primary-600 dark:text-primary-400" />
+                    )}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  className="group h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-r from-white to-primary-50/80 p-0 text-gray-700 shadow-sm ring-1 ring-inset ring-black/5 transition-colors hover:from-primary-50 hover:to-primary-100 hover:ring-primary-200 dark:from-gray-900 dark:to-gray-800 dark:text-gray-200 dark:ring-white/10 dark:hover:from-gray-800 dark:hover:to-primary-900/20 dark:hover:ring-primary-700/40 sm:h-10 sm:w-auto sm:max-w-[170px] sm:justify-start sm:gap-2 sm:rounded-2xl sm:px-1.5 sm:pr-2 md:max-w-[200px]"
+                  aria-label={t("header.userMenu")}
+                >
+                  <div
+                    className="
+    flex h-8 w-8 sm:h-9 sm:w-9
+    items-center justify-center
+    rounded-full
+    bg-gradient-to-br
+    from-primary-500 via-primary-500 to-primary-600
+    text-[11px] sm:text-sm
+    font-semibold
+    text-white
+    shadow-sm
+    ring-2 ring-white dark:ring-gray-900
+    shrink-0
+  "
+                  >
+                    {initials.toUpperCase()}
+                  </div>
+                  <div className="hidden min-w-0 flex-col items-start text-left lg:flex">
+                    <span className="max-w-[118px] truncate text-xs font-semibold leading-none">
+                      {fullName}
+                    </span>
+                    <span className="max-w-[118px] truncate pt-1 text-[10px] font-medium leading-none text-gray-500 dark:text-gray-400">
+                      {roleLabel}
+                    </span>
+                  </div>
+                  <ChevronDown className="hidden h-4 w-4 text-gray-400 transition group-hover:text-primary-600 dark:group-hover:text-primary-300 sm:block" />
+                </Button>
+              </DropdownMenuTrigger>
+
+              <DropdownMenuContent
+                className="w-64 rounded-xl bg-white p-2 shadow-xl ring-1 ring-black/5 dark:bg-gray-900 dark:ring-white/10"
+                align="end"
+              >
+                <div className="mb-1 rounded-lg bg-gradient-to-r from-primary-500 to-primary-600 p-3 text-white">
+                  <p className="truncate text-sm font-semibold">{fullName}</p>
+                  <p className="truncate pt-1 text-xs text-white/90">
+                    {roleLabel}
+                  </p>
+                </div>
+
+                <DropdownMenuItem
+                  className="flex cursor-pointer items-center rounded-lg px-3 py-2.5 text-sm text-gray-700 transition-colors hover:bg-primary-50 dark:text-gray-200 dark:hover:bg-primary-900/20"
+                  onClick={() => navigate("/profile")}
+                >
+                  <User className="mr-2.5 h-4 w-4 text-primary-600 dark:text-primary-400" />
+                  <span>{t("header.viewProfile")}</span>
+                </DropdownMenuItem>
+
+                <DropdownMenuItem
+                  className="flex cursor-pointer items-center rounded-lg px-3 py-2.5 text-sm text-gray-700 transition-colors hover:bg-primary-50 dark:text-gray-200 dark:hover:bg-primary-900/20"
+                  onClick={() => navigate("/update-profile")}
+                >
+                  <UserPen className="mr-2.5 h-4 w-4 text-primary-600 dark:text-primary-400" />
+                  <span>{t("header.editProfile")}</span>
+                </DropdownMenuItem>
+
+                <DropdownMenuItem
+                  className="flex cursor-pointer items-center rounded-lg px-3 py-2.5 text-sm text-gray-700 transition-colors hover:bg-primary-50 dark:text-gray-200 dark:hover:bg-primary-900/20"
+                  onClick={() => navigate("/change-password")}
+                >
+                  <Key className="mr-2.5 h-4 w-4 text-primary-600 dark:text-primary-400" />
+                  <span>{t("header.changePassword")}</span>
+                </DropdownMenuItem>
+
+                {showRecordManagementShortcut && (
+                  <DropdownMenuItem
+                    className="flex cursor-pointer items-center rounded-lg px-3 py-2.5 text-sm text-gray-700 transition-colors hover:bg-primary-50 dark:text-gray-200 dark:hover:bg-primary-900/20"
+                    onClick={() => navigate("/record-management/dashboard")}
+                  >
+                    <FileText className="mr-2.5 h-4 w-4 text-primary-600 dark:text-primary-400" />
+                    <span>{t("nav.Record Management")}</span>
+                  </DropdownMenuItem>
+                )}
+
+                {showUserManagementShortcut && (
+                  <DropdownMenuItem
+                    className="flex cursor-pointer items-center rounded-lg px-3 py-2.5 text-sm text-gray-700 transition-colors hover:bg-primary-50 dark:text-gray-200 dark:hover:bg-primary-900/20"
+                    onClick={() => navigate("/user-management")}
+                  >
+                    <UsersRound className="mr-2.5 h-4 w-4 text-primary-600 dark:text-primary-400" />
+                    <span>
+                      {t("dashboard.userManagement", "User Management")}
+                    </span>
+                  </DropdownMenuItem>
+                )}
+
+                <DropdownMenuSeparator className="my-1 h-px bg-gray-200 dark:bg-gray-700" />
+
+                <DropdownMenuItem
+                  className="flex cursor-pointer items-center rounded-lg px-3 py-2.5 text-sm text-red-600 transition-colors hover:bg-red-50 dark:hover:bg-red-950/30"
+                  onClick={handleLogout}
+                >
+                  <LogOut className="mr-2.5 h-4 w-4" />
+                  <span>{t("header.signOut")}</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+      </header>
+    </div>
+  );
+};
+
+export default Top;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/common/letterViewer.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/common/letterViewer.tsx
new file mode 100644
index 000000000..e6f6108b0
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/common/letterViewer.tsx
@@ -0,0 +1,215 @@
+import React, { useEffect, useMemo, useRef } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useLocation, useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import Loader from "@/record-management/components/Loader/loader";
+import RecordDetailCard from "@/record-management/common/RecordDetailCard";
+import {
+  fetchLetterById,
+  fetchLetterPreview,
+  fetchRecordById,
+  fetchRecordInstanceById,
+  fetchDelegationRecordById,
+} from "@/record-management/services/api/userRecordService";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+interface LetterViewerProps {
+  backurl: string;
+  type:
+    | "incoming"
+    | "outgoing"
+    | "internal"
+    | "cc"
+    | "pending"
+    | "externalincoming"
+    | "userRecord"
+    | "collaboration"
+    | "approval"
+    | "delegation";
+  statusKey?: string;
+  id?: string;
+  shouldFetchInstance: boolean;
+  actions?: string;
+  // Optional row payload to forward to action components (e.g. the approval
+  // task object for ApproveRecordsActions, which can't be reconstructed from
+  // the plain record fetch).
+  actionRowData?: any;
+}
+
+const LetterViewer: React.FC<LetterViewerProps> = ({
+  backurl,
+  type,
+  id,
+  shouldFetchInstance,
+  actions,
+  actionRowData,
+}) => {
+  // ✅ Keep params immutable
+  const { id: paramId } = useParams<{ id: string }>();
+  const location = useLocation();
+  const recordId = id || paramId;
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  const status = ["Draft", "Adjustment"];
+
+  // ✅ Determine which API to use
+  // const shouldFetchInstance =
+  //   type === "internal" ||
+  //   type === "incoming" ||
+  //   type === "externalincoming";
+
+  // ✅ Fetch main record (for non-instance types)
+  const {
+    data: record,
+    isLoading: isLoadingRecord,
+    error: errorRecord,
+  } = useQuery({
+    queryKey: ["record", recordId, type],
+    queryFn: () =>
+      type === "delegation"
+        ? fetchDelegationRecordById(recordId!)
+        : fetchRecordById(recordId!),
+    enabled: !shouldFetchInstance && !!recordId,
+  });
+
+  // ✅ Fetch record instance (for instance-based types)
+  const {
+    data: recordInstance,
+    isLoading: isLoadingInstance,
+    error: errorInstance,
+  } = useQuery({
+    queryKey: ["record-instance", recordId],
+    queryFn: () => fetchRecordInstanceById(recordId!),
+    enabled: shouldFetchInstance && !!recordId,
+  });
+
+  // Surface main-record fetch failures via the centralized error handler.
+  // Inline <p className="text-red-600"> below is preserved.
+  // record-pdf failure is intentionally not toasted — it has its own inline UX.
+  const recordFetchError = errorRecord || errorInstance;
+  const prevRecordErrorRef = useRef<unknown>(null);
+  useEffect(() => {
+    if (recordFetchError && recordFetchError !== prevRecordErrorRef.current) {
+      prevRecordErrorRef.current = recordFetchError;
+      handleError(recordFetchError);
+    }
+  }, [recordFetchError, handleError]);
+
+  // ✅ Compute effective ID (don’t mutate)
+  const effectiveRecordId = recordInstance?.id ?? recordId;
+  const canFetchAttachment = shouldFetchInstance
+    ? !!recordInstance?.id
+    : type === "userRecord"
+      ? !!record
+      : !!effectiveRecordId;
+
+  // ✅ Fetch attachment
+  const {
+    data: attachment,
+    isLoading: isLoadingAttachment,
+    error: errorAttachment,
+  } = useQuery({
+    queryKey: ["record-pdf", effectiveRecordId],
+    queryFn: async () => {
+      if (!effectiveRecordId) return null;
+
+      if (type === "userRecord" && record) {
+        if (status.includes(record.statusKey ?? "")) {
+          return fetchLetterPreview(effectiveRecordId);
+        } else {
+          return fetchLetterById(effectiveRecordId);
+        }
+      }
+
+      return fetchLetterById(effectiveRecordId);
+    },
+    enabled: canFetchAttachment,
+    retry: false, // don’t auto-retry on 400
+  });
+
+  // ✅ Compute attachment URL
+  const attachmentUrl = useMemo(() => {
+    if (!attachment) return null;
+
+    if (attachment instanceof ArrayBuffer) {
+      const blob = new Blob([attachment], { type: "application/pdf" });
+      return URL.createObjectURL(blob);
+    }
+
+    if (typeof attachment === "object" && "presigned" in attachment) {
+      return attachment.presigned;
+    }
+
+    if (typeof attachment === "string" && attachment.startsWith("http")) {
+      return attachment;
+    }
+
+    return null;
+  }, [attachment]);
+
+  // ✅ Handle loading and error messages
+  let attachmentMessage: string | null = null;
+  if (isLoadingAttachment) {
+    attachmentMessage = "Loading record...";
+  } else if (errorAttachment) {
+    const err: any = errorAttachment;
+    const message =
+      err?.response?.data?.message || err?.message || err?.exception?.message;
+
+    if (message === "record_final_look_not_yet_generated") {
+      attachmentMessage =
+        "The record is still being generated. If this takes too long, try clicking the Regenerate button. If the issue persists, please contact your administrator.";
+    } else {
+      attachmentMessage = "Something went wrong while fetching the record.";
+    }
+  }
+
+  const isLoadingAny = shouldFetchInstance
+    ? isLoadingInstance
+    : isLoadingRecord;
+
+  const activeRecord = recordInstance || record;
+  const currentContent = activeRecord?.content?.[0] ?? null;
+  const locationActionRowData = (
+    location.state as { actionRowData?: any } | null
+  )?.actionRowData;
+  const effectiveActionRowData = actionRowData ?? locationActionRowData;
+
+  return (
+    <div className="w-full mx-0 font-serif">
+      {isLoadingAny && <Loader />}
+
+      {(errorRecord || errorInstance) && (
+        <p className="text-red-600 text-center py-4">
+          {errorRecord instanceof Error
+            ? errorRecord.message
+            : "Failed to load record"}
+        </p>
+      )}
+
+      {activeRecord && currentContent && !isLoadingAny ? (
+        <RecordDetailCard
+          record={activeRecord}
+          attachmentUrl={attachmentUrl}
+          isDraft={activeRecord.statusKey === "Draft"}
+          isLoadingAttachment={isLoadingAttachment}
+          backurl={backurl}
+          type={type}
+          isSecured={activeRecord.isSecured}
+          actions={actions}
+          actionRowData={effectiveActionRowData}
+        />
+      ) : (
+        !isLoadingAny &&
+        !errorRecord && (
+          <p className="text-center py-8 text-gray-500">
+            {recordId ? <Loader /> : "No record selected"}
+          </p>
+        )
+      )}
+    </div>
+  );
+};
+
+export default LetterViewer;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/common/socketInstance.ts b/apps/edr-freight-web/backoffice/src/record-management/components/common/socketInstance.ts
new file mode 100644
index 000000000..c57f136a7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/common/socketInstance.ts
@@ -0,0 +1,27 @@
+// src/lib/socketInstance.ts
+import { io, Socket } from "socket.io-client";
+import { getEnvUrl } from "@/shared/config/env";
+
+let socket: Socket | null = null;
+
+export const getSocketInstance = (userId: string) => {
+  if (!socket) {
+    const url = getEnvUrl("VITE_SOCKET_URL");
+
+    socket = io(url, {
+      transports: ["websocket"],
+      query: { id: userId, type: "user" },
+      reconnection: true,
+      reconnectionAttempts: 5,
+      reconnectionDelay: 2000,
+    });
+  }
+  return socket;
+};
+
+export const disconnectSocket = () => {
+  if (socket) {
+    socket.disconnect();
+    socket = null;
+  }
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/dashboard/ChartToggle.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/dashboard/ChartToggle.tsx
new file mode 100644
index 000000000..b9ae293b9
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/dashboard/ChartToggle.tsx
@@ -0,0 +1,41 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { BarChart3, PieChart, Table as TableIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+interface ChartToggleProps {
+  value: "pie" | "bar" | "table";
+  onChange: (value: "pie" | "bar" | "table") => void;
+}
+
+export function ChartToggle({ value, onChange }: ChartToggleProps) {
+  const { t } = useTranslation();
+  return (
+    <Select
+      value={value}
+      onValueChange={(val) => onChange(val as "pie" | "bar" | "table")}
+    >
+      <SelectTrigger className="w-[128px] h-7 text-xs border-gray-200 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 dark:text-gray-200">
+        <SelectValue placeholder="Chart Type" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="pie" className="flex items-center gap-2 text-xs">
+          <PieChart className="h-3 w-3" />
+          <span>{t('dashboard.pieChart')}</span>
+        </SelectItem>
+        <SelectItem value="bar" className="flex items-center gap-2 text-xs">
+          <BarChart3 className="h-3 w-3" />
+          <span>{t('dashboard.barChart')}</span>
+        </SelectItem>
+        <SelectItem value="table" className="flex items-center gap-2 text-xs">
+          <TableIcon className="h-3 w-3" />
+          <span>{t('dashboard.table')}</span>
+        </SelectItem>
+      </SelectContent>
+    </Select>
+  );
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/dashboard/DataTable.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/dashboard/DataTable.tsx
new file mode 100644
index 000000000..81bce20b0
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/dashboard/DataTable.tsx
@@ -0,0 +1,90 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/common/ui/table";
+import { useTranslation } from "react-i18next";
+interface DataItem {
+  name: string;
+  value: number;
+  fill?: string;
+}
+
+interface DataTableViewProps {
+  data: DataItem[];
+}
+
+export function DataTableView({ data }: DataTableViewProps) {
+  // Sort data by value in descending order
+  const sortedData = [...data].sort((a, b) => b.value - a.value);
+  const { t } = useTranslation();
+
+  // Calculate total for percentage
+  const total = data.reduce((sum, item) => sum + item.value, 0);
+
+  // Check if there's actual data (not just the fallback "No Data" entry)
+  const hasRealData =
+    data.length > 0 && !(data.length === 1 && data[0].name === "No Data");
+
+  return (
+    <div className="h-[220px] sm:h-[260px] w-full overflow-auto">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-[80px] sm:w-[100px] text-xs sm:text-sm">
+              {t('dashboard.Status')}
+            </TableHead>
+            <TableHead className="text-right text-xs sm:text-sm">
+              {t('dashboard.Count')}
+            </TableHead>
+            <TableHead className="text-right w-[80px] sm:w-[100px] text-xs sm:text-sm">
+              {t('dashboard.Percentage')}
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {sortedData.map((item, index) => (
+            <TableRow key={index}>
+              <TableCell className="flex items-center gap-1 sm:gap-2 text-xs sm:text-sm py-2 sm:py-4">
+                <div
+                  className="w-3 sm:w-4 h-2 sm:h-3"
+                  style={{
+                    backgroundColor: item.fill || "#cccccc",
+                    display: "inline-block",
+                  }}
+                />
+                <span>{typeof item.name === "string" ? item.name : (item.name as any)?.en || (item.name as any)?.am || "Item"}</span>
+              </TableCell>
+              <TableCell className="text-right font-medium text-xs sm:text-sm py-2 sm:py-4">
+                {item.value}
+              </TableCell>
+              <TableCell className="text-right text-xs sm:text-sm py-2 sm:py-4">
+                {total > 0
+                  ? `${Math.round((item.value / total) * 100)}%`
+                  : "0%"}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+
+      {data.length === 0 && (
+        <div className="flex justify-center items-center h-[180px] sm:h-[200px] text-gray-500 dark:text-gray-400 text-xs sm:text-sm">
+          {t('common.noResult')}
+        </div>
+      )}
+
+      {hasRealData && (
+        <div className="mt-2 sm:mt-4 px-2 sm:px-4">
+          <div className="flex justify-between text-xs sm:text-sm font-medium">
+            <span>{t('dashboard.Total')}</span>
+            <span>{total}</span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/dashboard/ExportButton.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/dashboard/ExportButton.tsx
new file mode 100644
index 000000000..4b7b5178b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/dashboard/ExportButton.tsx
@@ -0,0 +1,219 @@
+import { Button } from "@/shared/common/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+import html2canvas from "html2canvas";
+import jsPDF from "jspdf";
+import { prepareForHtml2Canvas } from "@/shared/utils/chartExportUtils";
+import { FileDown, Printer } from "lucide-react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+interface ExportButtonProps {
+  dashboardRef:
+    | React.RefObject<HTMLDivElement>
+    | { current: HTMLDivElement | null };
+}
+
+export function ExportButton({ dashboardRef }: ExportButtonProps) {
+  const [isExporting, setIsExporting] = useState(false);
+  const { t } = useTranslation();
+const exportToPdf = async () => {
+    try {
+      if (!dashboardRef.current) return;
+
+      const originalNode = dashboardRef.current;
+      const dashboardClone = originalNode.cloneNode(true) as HTMLElement;
+
+      // Add marker classes to elements that need color preservation
+      const elementsToPreserve = [
+        ...dashboardClone.querySelectorAll(
+          ".chart-container, .chart-legend, .status-indicator, .color-preserve, .logo-container",
+        ),
+      ];
+      elementsToPreserve.forEach((el) => {
+        el.classList.add("keep-color");
+      });
+
+      // Inject print-mode CSS into the clone
+      const styleTag = document.createElement("style");
+      styleTag.textContent = `
+        * { color: #000 !important; background-color: #fff !important; border-color: #000 !important; }
+        .keep-color { color: unset !important; background-color: unset !important; border-color: unset !important; }
+        .keep-color * { color: unset !important; background-color: unset !important; border-color: unset !important; fill: unset !important; stroke: unset !important; }
+        .keep-color svg, .keep-color svg * { fill: unset !important; stroke: unset !important; }
+        .keep-color img { filter: none !important; -webkit-filter: none !important; }
+      `;
+      dashboardClone.appendChild(styleTag);
+
+      // Render off-screen
+      dashboardClone.style.position = "absolute";
+      dashboardClone.style.top = "-10000px";
+      dashboardClone.style.left = "0";
+      dashboardClone.style.zIndex = "10000";
+      document.body.appendChild(dashboardClone);
+
+      // Patch oklch CSS vars and inline SVG presentation attribute CSS variables
+      // so html2canvas can render Recharts SVG fills correctly.
+      const patch = prepareForHtml2Canvas(dashboardClone);
+
+      let canvas;
+      try {
+        canvas = await html2canvas(dashboardClone, {
+          useCORS: true,
+          backgroundColor: "#ffffff",
+          scale: 2,
+          logging: false,
+        });
+      } finally {
+        patch.restore();
+        document.body.removeChild(dashboardClone);
+      }
+
+      const imgData = canvas.toDataURL("image/png");
+      const pdf = new jsPDF({
+        orientation: "portrait",
+        unit: "px",
+        format: [canvas.width, canvas.height],
+      });
+      pdf.addImage(imgData, "PNG", 0, 0, canvas.width, canvas.height);
+      pdf.save("dashboard.pdf");
+    } catch (error) {
+      console.error("Error generating PDF:", error);
+    }
+  };
+
+  // Fallback method using direct printing
+  const handlePrintFallback = () => {
+    if (!dashboardRef.current) return;
+
+    try {
+      // Create a print-specific stylesheet
+      const style = document.createElement("style");
+      style.innerHTML = `
+        @media print {
+          body * {
+            visibility: hidden;
+          }
+          #dashboard-print-container, #dashboard-print-container * {
+            visibility: visible;
+          }
+          #dashboard-print-container {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+          }
+          .chart-container {
+            page-break-inside: avoid;
+          }
+        }
+      `;
+      document.head.appendChild(style);
+
+      // Create print container
+      const printContainer = document.createElement("div");
+      printContainer.id = "dashboard-print-container";
+
+      // Clone the dashboard content
+      const clone = dashboardRef.current.cloneNode(true);
+      printContainer.appendChild(clone);
+      document.body.appendChild(printContainer);
+
+      // Print
+      window.print();
+
+      // Clean up
+      setTimeout(() => {
+        if (printContainer.parentNode) {
+          printContainer.parentNode.removeChild(printContainer);
+        }
+        document.head.removeChild(style);
+      }, 500);
+    } catch (error) {
+      console.error("Error during print:", error);
+      alert("There was an error with printing. Please try again.");
+    }
+  };
+
+  const pdfLabel = isExporting
+    ? t("dashboard.exporting")
+    : t("dashboard.exportPdf");
+  const printLabel = t("dashboard.print");
+
+  return (
+    <div className="flex items-center gap-2 max-w-full overflow-visible">
+      {/* sm+ : full buttons with visible labels */}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="outline"
+            size="sm"
+            className="hidden sm:inline-flex items-center gap-1"
+            onClick={exportToPdf}
+            disabled={isExporting}>
+            <FileDown className="h-4 w-4" />
+            <span>{pdfLabel}</span>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <span>{pdfLabel}</span>
+        </TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="outline"
+            size="sm"
+            className="hidden sm:inline-flex items-center gap-1"
+            onClick={handlePrintFallback}
+            disabled={isExporting}>
+            <Printer className="h-4 w-4" />
+            <span>{printLabel}</span>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <span>{printLabel}</span>
+        </TooltipContent>
+      </Tooltip>
+
+      {/* < sm : compact icon-only buttons with tooltip labels */}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="outline"
+            size="icon"
+            className="sm:hidden"
+            onClick={exportToPdf}
+            disabled={isExporting}
+            aria-label={pdfLabel}>
+            <FileDown className="h-4 w-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <span>{pdfLabel}</span>
+        </TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="outline"
+            size="icon"
+            className="sm:hidden"
+            onClick={handlePrintFallback}
+            disabled={isExporting}
+            aria-label={printLabel}>
+            <Printer className="h-4 w-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <span>{printLabel}</span>
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/dashboard/GenericChart.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/dashboard/GenericChart.tsx
new file mode 100644
index 000000000..859729fac
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/dashboard/GenericChart.tsx
@@ -0,0 +1,235 @@
+import { useState } from "react";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import {
+  PieChart,
+  Pie,
+  Cell,
+  ResponsiveContainer,
+  Tooltip,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Text,
+} from "recharts";
+import { ChartToggle } from "./ChartToggle";
+import { DataTableView } from "./DataTable";
+import { useTranslation } from "react-i18next";
+
+// Custom tooltip component
+const CustomTooltip = ({ active, payload }: any) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className="bg-white dark:bg-gray-800 p-2 border dark:border-gray-700 rounded shadow-sm text-xs text-gray-900 dark:text-gray-100">
+        <p>{`${payload[0].name}: ${payload[0].value}`}</p>
+      </div>
+    );
+  }
+  return null;
+};
+
+// Custom label rendering inside the donut slices
+const renderCustomizedLabel = ({
+  cx,
+  cy,
+  midAngle,
+  innerRadius,
+  outerRadius,
+  value,
+}: any) => {
+  if (value === 0) return null;
+
+  const RADIAN = Math.PI / 180;
+  const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
+  const x = cx + radius * Math.cos(-midAngle * RADIAN);
+  const y = cy + radius * Math.sin(-midAngle * RADIAN);
+
+  return (
+    <text
+      x={x}
+      y={y}
+      fill="white"
+      textAnchor="middle"
+      dominantBaseline="central"
+      fontSize={12}
+      fontWeight="bold"
+    >
+      {value}
+    </text>
+  );
+};
+
+export interface ChartDataItem {
+  name: string;
+  value: number;
+  fill: string;
+  [key: string]: any;
+}
+
+interface GenericChartProps {
+  title: string;
+  data: ChartDataItem[];
+  colorLegend: Record<string, string>;
+  initialChartType?: "pie" | "bar" | "table";
+  className?: string;
+}
+
+export function GenericChart({
+  title,
+  data,
+  colorLegend,
+  initialChartType = "pie",
+  className = "",
+}: GenericChartProps) {
+  const [chartType, setChartType] = useState<"pie" | "bar" | "table">(
+    initialChartType
+  );
+  const [selectedPieIndex, setSelectedPieIndex] = useState<number | null>(null);
+
+  // Filter out items with zero value
+  const filteredData = data.filter((item) => item.value > 0);
+
+  // Ensure we always have data to display
+  const displayData =
+    filteredData.length > 0
+      ? filteredData
+      : [{ name: "No Data", value: 1, fill: "#cccccc" }];
+
+  // Function to highlight a sector
+  const onPieEnter = (_: any, index: number) => {
+    setSelectedPieIndex(index);
+  };
+
+  const onPieLeave = () => {
+    setSelectedPieIndex(null);
+  };
+  const { t } = useTranslation();
+  // Render pie chart
+  const renderPieChart = () => (
+    <ResponsiveContainer width="100%" height="100%">
+      <PieChart>
+        <Pie
+          data={displayData as any}
+          cx="50%"
+          cy="50%"
+          labelLine={false}
+          outerRadius={130}
+          innerRadius={70}
+          paddingAngle={4}
+          dataKey="value"
+          stroke="#ffffff"
+          strokeWidth={4}
+          onMouseEnter={onPieEnter}
+          onMouseLeave={onPieLeave}
+        // activeIndex={selectedPieIndex as number}
+        >
+          {displayData.map((entry, index) => (
+            <Cell
+              key={`cell-${index}`}
+              fill={entry.fill}
+              strokeWidth={selectedPieIndex === index ? 2 : 1}
+              stroke={selectedPieIndex === index ? "#ccc" : "#fff"}
+            />
+          ))}
+        </Pie>
+        <Tooltip content={<CustomTooltip />} />
+      </PieChart>
+    </ResponsiveContainer>
+  );
+
+  // Render bar chart
+  const renderBarChart = () => (
+    <ResponsiveContainer width="100%" height="100%">
+      <BarChart
+        data={displayData}
+        layout="vertical"
+        margin={{ top: 20, right: 30, left: 70, bottom: 5 }}
+      >
+        <XAxis type="number" hide />
+        <YAxis
+          dataKey="name"
+          type="category"
+          axisLine={false}
+          tickLine={false}
+          width={70}
+          fontSize={12}
+        />
+        <Tooltip content={<CustomTooltip />} />
+        <Bar dataKey="value" radius={6} barSize={30}>
+          {displayData.map((entry, index) => (
+            <Cell key={`cell-${index}`} fill={entry.fill} />
+          ))}
+        </Bar>
+      </BarChart>
+    </ResponsiveContainer>
+  );
+
+  // Render table view
+  const renderTableView = () => <DataTableView data={displayData} />;
+
+  return (
+    <Card
+      className={`shadow-sm border border-gray-100 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 ${className}`}
+    >
+      <CardHeader className="pb-1 pt-4 px-4 flex flex-row justify-between items-start">
+        <div className="flex items-center justify-between w-full">
+          <CardTitle className="text-md font-medium text-gray-700 dark:text-gray-200">
+            {title}
+          </CardTitle>
+          <ChartToggle value={chartType} onChange={setChartType} />
+        </div>
+      </CardHeader>
+      <CardContent className="p-0 pt-2 pb-6">
+        <div className="h-[260px] w-full relative">
+          {filteredData.length === 0 && (
+            <div className="absolute inset-0 flex items-center justify-center text-blue-500 text-sm font-semibold">
+              {t("common.noResult")}
+            </div>
+          )}
+          {chartType === "pie" && renderPieChart()}
+          {chartType === "bar" && renderBarChart()}
+          {chartType === "table" && renderTableView()}
+
+          {selectedPieIndex !== null && chartType === "pie" && (
+            <div className="absolute top-0 left-0 w-full h-full pointer-events-none">
+              <div
+                className="absolute border border-gray-300 rounded-md"
+                style={{
+                  left: "25%",
+                  top: "25%",
+                  width: "25%",
+                  height: "50%",
+                  transform: "rotate(45deg)",
+                  border: "1px solid #ccc",
+                  opacity: 0.7,
+                }}
+              />
+            </div>
+          )}
+        </div>
+
+        {/* Legend */}
+        {displayData?.length !== 0 && (
+          <div className="flex flex-wrap justify-center gap-4 mt-2 mb-1 text-xs px-4">
+            {Object.entries(colorLegend).map(([key, color], index) => (
+              <div key={`legend-${index}`} className="flex items-center">
+                <div
+                  className="w-3 h-3 mr-1 rounded-full"
+                  style={{ backgroundColor: color }}
+                />
+                <span className="text-gray-600 dark:text-gray-400">
+                  {t(`statusBar.${key}`)}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/dashboard/IncomingReportAccordion.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/dashboard/IncomingReportAccordion.tsx
new file mode 100644
index 000000000..a08baef57
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/dashboard/IncomingReportAccordion.tsx
@@ -0,0 +1,207 @@
+import React, { useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/shared/common/ui/card";
+import { ChevronDown } from "lucide-react";
+import { cn } from "@/super-admin/lib/utils";
+
+interface ReportStats {
+  assigned: number;
+  approved: number;
+  pending: number;
+  rejected: number;
+  reassigned: number;
+  replied: number;
+}
+
+interface DepartmentData extends ReportStats {
+  [key: string]: any;
+}
+
+interface IncomingReportAccordionProps {
+  data: Record<string, DepartmentData>;
+  title?: string;
+}
+
+const StatBadge: React.FC<{ label: string; value: number; color: string }> = ({
+  label,
+  value,
+  color,
+}) => (
+  <div className="flex items-center gap-2">
+    <span className={cn("text-xs font-medium px-2 py-1 rounded-md", color)}>
+      {label}: {value}
+    </span>
+  </div>
+);
+
+const DepartmentRow: React.FC<{
+  name: string;
+  stats: ReportStats;
+  isExpanded: boolean;
+  onToggle: () => void;
+  hasChildren: boolean;
+  level: number;
+}> = ({ name, stats, isExpanded, onToggle, hasChildren, level }) => {
+  const paddingLeft = level * 20;
+
+  return (
+    <div className="border-b border-gray-200 dark:border-gray-700">
+      <button
+        onClick={onToggle}
+        className={cn(
+          "w-full px-4 py-3 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors",
+          level > 0 && "bg-gray-50 dark:bg-gray-900"
+        )}
+        style={{ paddingLeft: `${paddingLeft + 16}px` }}
+      >
+        <div className="flex items-center gap-3 flex-1">
+          {hasChildren && (
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-gray-600 dark:text-gray-400 transition-transform",
+                isExpanded && "rotate-180"
+              )}
+            />
+          )}
+          {!hasChildren && <div className="w-4" />}
+          <span className="font-medium text-gray-800 dark:text-gray-100 text-sm">
+            {name}
+          </span>
+        </div>
+      </button>
+
+      {isExpanded && (
+        <div className="bg-white dark:bg-gray-800 px-4 py-3 border-t border-gray-100 dark:border-gray-700">
+          <div className="flex flex-wrap gap-2">
+            <StatBadge
+              label="Assigned"
+              value={stats.assigned}
+              color="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200"
+            />
+            <StatBadge
+              label="Approved"
+              value={stats.approved}
+              color="bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200"
+            />
+            <StatBadge
+              label="Pending"
+              value={stats.pending}
+              color="bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200"
+            />
+            <StatBadge
+              label="Rejected"
+              value={stats.rejected}
+              color="bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200"
+            />
+            <StatBadge
+              label="Reassigned"
+              value={stats.reassigned}
+              color="bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200"
+            />
+            <StatBadge
+              label="Replied"
+              value={stats.replied}
+              color="bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200"
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const NestedDepartment: React.FC<{
+  name: string;
+  data: DepartmentData;
+  level: number;
+}> = ({ name, data, level }) => {
+  const [expandedItems, setExpandedItems] = useState<Record<string, boolean>>({});
+
+  const stats: ReportStats = {
+    assigned: data.assigned,
+    approved: data.approved,
+    pending: data.pending,
+    rejected: data.rejected,
+    reassigned: data.reassigned,
+    replied: data.replied,
+  };
+
+  const children = Object.entries(data).filter(
+    ([key]) =>
+      ![
+        "assigned",
+        "approved",
+        "pending",
+        "rejected",
+        "reassigned",
+        "replied",
+      ].includes(key)
+  );
+
+  const hasChildren = children.length > 0;
+
+  const toggleExpand = (key: string) => {
+    setExpandedItems((prev) => ({
+      ...prev,
+      [key]: !prev[key],
+    }));
+  };
+
+  return (
+    <>
+      <DepartmentRow
+        name={name}
+        stats={stats}
+        isExpanded={expandedItems[name] || false}
+        onToggle={() => toggleExpand(name)}
+        hasChildren={hasChildren}
+        level={level}
+      />
+      {expandedItems[name] &&
+        hasChildren &&
+        children.map(([childName, childData]) => (
+          <NestedDepartment
+            key={childName}
+            name={childName}
+            data={childData as DepartmentData}
+            level={level + 1}
+          />
+        ))}
+    </>
+  );
+};
+
+export const IncomingReportAccordion: React.FC<IncomingReportAccordionProps> = ({
+  data,
+  title = "Incoming Report",
+}) => {
+  const [expandedDepts, setExpandedDepts] = useState<Record<string, boolean>>({});
+
+  const toggleDepartment = (deptName: string) => {
+    setExpandedDepts((prev) => ({
+      ...prev,
+      [deptName]: !prev[deptName],
+    }));
+  };
+
+  return (
+    <Card className="shadow-md border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800">
+      <CardHeader className="border-b border-gray-200 dark:border-gray-700">
+        <CardTitle className="text-lg font-semibold text-gray-800 dark:text-gray-100">
+          {title}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="p-0">
+        <div className="divide-y divide-gray-200 dark:divide-gray-700">
+          {Object.entries(data).map(([deptName, deptData]) => (
+            <NestedDepartment
+              key={deptName}
+              name={deptName}
+              data={deptData as DepartmentData}
+              level={0}
+            />
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/dashboard/IncomingReportSection.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/dashboard/IncomingReportSection.tsx
new file mode 100644
index 000000000..950faeeed
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/dashboard/IncomingReportSection.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+import { Loader2, AlertCircle } from "lucide-react";
+import { IncomingReportAccordion } from "./IncomingReportAccordion";
+import { useIncomingReport } from "../hooks/useIncomingReport";
+import { Button } from "@/shared/common/ui/button";
+
+interface IncomingReportSectionProps {
+  positionId?: string;
+}
+
+export const IncomingReportSection: React.FC<IncomingReportSectionProps> = ({
+  positionId,
+}) => {
+  const { data, isLoading, isError, error, refetch } =
+    useIncomingReport(positionId);
+
+  if (!positionId) {
+    return (
+      <div className="p-6 text-center text-gray-500 dark:text-gray-400">
+        No position selected
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="p-6 flex items-center justify-center h-64">
+        <div className="flex flex-col items-center gap-2">
+          <Loader2 className="h-8 w-8 animate-spin text-primary" />
+          <div className="text-sm text-muted-foreground">
+            Loading incoming report...
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <div className="p-6 flex items-center justify-center h-64">
+        <div className="flex flex-col items-center gap-4">
+          <AlertCircle className="h-12 w-12 text-red-500" />
+          <div className="text-red-500 font-medium">
+            Error loading incoming report
+          </div>
+          <p className="text-gray-500 text-center max-w-md mb-4">
+            {error instanceof Error
+              ? error.message
+              : "There was an issue loading the report data."}
+          </p>
+          <Button
+            onClick={() => refetch()}
+            className="bg-primary hover:bg-primary/90 text-primary-foreground"
+          >
+            Retry
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (!data || Object.keys(data).length === 0) {
+    return (
+      <div className="p-6 text-center text-gray-500 dark:text-gray-400">
+        No incoming report data available
+      </div>
+    );
+  }
+
+  return <IncomingReportAccordion data={data} title="Incoming Report" />;
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/dashboard/RecordOfficerDashboard.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/dashboard/RecordOfficerDashboard.tsx
new file mode 100644
index 000000000..fc96f55fa
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/dashboard/RecordOfficerDashboard.tsx
@@ -0,0 +1,209 @@
+import { useRef } from "react";
+import { Card } from "@/shared/common/ui/card";
+import { ExportButton } from "./ExportButton";
+import { GenericChart, ChartDataItem } from "./GenericChart";
+import { ArrowUp, ArrowDown, CalendarDays } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { t } from "i18next";
+import { useIncomingRecordCounts } from "../hooks/useIncomingRecordCount";
+import { useReport } from "../hooks/useReport";
+
+// Updated color palette to match user dashboard
+const COLORS = {
+  Incoming: "var(--primary-300)", // Green
+  Outgoing: "var(--primary-400)", // Teal
+};
+
+export function RecordOfficerDashboard() {
+  //const { recordSummary, loading, error } = useSelector(recordOfficerSelector);
+  const dashboardRef = useRef<HTMLDivElement>(null);
+  const navigate = useNavigate();
+  // incoming Data
+  const {
+    monthlyCount,
+    weeklyCount,
+    dailyCount,
+    monthlyCountOutgoing,
+    weeklyCountOutgoing,
+    dailyCountOutgoing,
+  } = useIncomingRecordCounts();
+  const monthlyIncomingRecord = monthlyCount;
+  const weeklyIncomingRecord = weeklyCount;
+  const dailyIncomingRecord = dailyCount;
+  const { ROTotalIncoming, ROTotalOutgoing } = useReport("");
+  const monthlyOutgoingRecord = monthlyCountOutgoing;
+  const weeklyOutgoingRecord = weeklyCountOutgoing;
+  const dailyOutgoingRecord = dailyCountOutgoing;
+  //Prepare chart data
+  const totalData: ChartDataItem[] = [
+    { name: "Incoming", value: ROTotalIncoming || 0, fill: COLORS.Incoming },
+    { name: "Outgoing", value: ROTotalOutgoing || 0, fill: COLORS.Outgoing },
+  ];
+
+  const monthlyData: ChartDataItem[] = [
+    {
+      name: "Incoming",
+      value: monthlyIncomingRecord || 0,
+      fill: COLORS.Incoming,
+    },
+    {
+      name: "Outgoing",
+      value: monthlyOutgoingRecord || 0,
+      fill: COLORS.Outgoing,
+    },
+  ];
+
+  const weeklyData: ChartDataItem[] = [
+    {
+      name: "Incoming",
+      value: weeklyIncomingRecord || 0,
+      fill: COLORS.Incoming,
+    },
+    {
+      name: "Outgoing",
+      value: weeklyOutgoingRecord || 0,
+      fill: COLORS.Outgoing,
+    },
+  ];
+
+  const dailyData: ChartDataItem[] = [
+    {
+      name: "Incoming",
+      value: dailyIncomingRecord || 0,
+      fill: COLORS.Incoming,
+    },
+    {
+      name: "Outgoing",
+      value: dailyOutgoingRecord || 0,
+      fill: COLORS.Outgoing,
+    },
+  ];
+
+  return (
+    <div className="bg-background text-foreground">
+      <div className="mb-3 mt-6 flex w-full flex-wrap items-center justify-end gap-2 overflow-visible">
+        <ExportButton dashboardRef={dashboardRef} />
+      </div>
+
+      {/* Dashboard content with ref for export */}
+      <div ref={dashboardRef} className="flex flex-col w-full gap-4 sm:gap-6">
+        {/* Records Summary Cards - First Row (2 cards) */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <Card
+            className="shadow-md border border-blue-100 dark:border-blue-900 rounded-xl bg-white dark:bg-gray-800 hover:bg-blue-50 dark:hover:bg-blue-900/20 hover:shadow-lg transition-all duration-200 cursor-pointer"
+            onClick={() =>
+              navigate("/record-management/recordOfficer/outgoing")
+            }
+          >
+            <div className="p-5 flex items-center">
+              <div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg mr-4">
+                <ArrowUp className="h-5 w-5 text-blue-600 dark:text-blue-400" />
+              </div>
+              <div className="flex flex-col flex-1">
+                <span className="text-gray-600 dark:text-gray-400 text-sm font-medium">
+                  {t("dashboard.totalOutgoing")}
+                </span>
+                <span className="text-gray-800 dark:text-gray-100 text-2xl font-semibold mt-1">
+                  {ROTotalOutgoing || 0}
+                </span>
+              </div>
+            </div>
+          </Card>
+          <Card
+            className="shadow-md border border-primary-100 dark:border-primary-900 rounded-xl bg-white dark:bg-gray-800 hover:bg-primary-50 dark:hover:bg-primary-900/20 hover:shadow-lg transition-all duration-200 cursor-pointer"
+            onClick={() =>
+              navigate("/record-management/recordOfficer/outgoing")
+            }
+          >
+            <div className="p-5 flex items-center">
+              <div className="p-2 bg-primary-100 dark:bg-primary-900/30 rounded-lg mr-4">
+                <CalendarDays className="h-5 w-5 text-primary-600 dark:text-primary-400" />
+              </div>
+              <div className="flex flex-col flex-1">
+                <span className="text-gray-600 dark:text-gray-400 text-sm font-medium">
+                  {t("dashboard.monthlyOutgoing")}
+                </span>
+                <span className="text-gray-800 dark:text-gray-100 text-2xl font-semibold mt-1">
+                  {monthlyOutgoingRecord || 0}
+                </span>
+              </div>
+            </div>
+          </Card>
+        </div>
+
+        {/* Records Summary Cards - Second Row (2 cards) */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <Card
+            className="shadow-md border border-primary-100 dark:border-primary-900 rounded-xl bg-white dark:bg-gray-800 hover:bg-primary-50 dark:hover:bg-primary-900/20 hover:shadow-lg transition-all duration-200 cursor-pointer"
+            onClick={() =>
+              navigate("/record-management/recordOfficer/incoming")
+            }
+          >
+            <div className="p-5 flex items-center">
+              <div className="p-2 bg-primary-100 dark:bg-primary-900/30 rounded-lg mr-4">
+                <ArrowDown className="h-5 w-5 text-primary-600 dark:text-primary-400" />
+              </div>
+              <div className="flex flex-col flex-1">
+                <span className="text-gray-600 dark:text-gray-400 text-sm font-medium">
+                  {t("dashboard.totalIncoming")}
+                </span>
+                <span className="text-gray-800 dark:text-gray-100 text-2xl font-semibold mt-1">
+                  {ROTotalIncoming || 0}
+                </span>
+              </div>
+            </div>
+          </Card>
+          <Card
+            className="shadow-md border border-amber-100 dark:border-amber-900 rounded-xl bg-white dark:bg-gray-800 hover:bg-amber-50 dark:hover:bg-amber-900/20 hover:shadow-lg transition-all duration-200 cursor-pointer"
+            onClick={() =>
+              navigate("/record-management/recordOfficer/incoming")
+            }
+          >
+            <div className="p-5 flex items-center">
+              <div className="p-2 bg-amber-100 dark:bg-amber-900/30 rounded-lg mr-4">
+                <CalendarDays className="h-5 w-5 text-amber-600 dark:text-amber-400" />
+              </div>
+              <div className="flex flex-col flex-1">
+                <span className="text-gray-600 dark:text-gray-400 text-sm font-medium">
+                  {t("dashboard.monthlyIncoming")}
+                </span>
+                <span className="text-gray-800 dark:text-gray-100 text-2xl font-semibold mt-1">
+                  {monthlyIncomingRecord || 0}
+                </span>
+              </div>
+            </div>
+          </Card>
+        </div>
+
+        {/* Comparison Charts - Row 1 */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
+          <GenericChart
+            title={t("dashboard.totalInVsOut")}
+            data={totalData}
+            colorLegend={COLORS}
+          />
+          <GenericChart
+            title={t("dashboard.monthlyInVsOut")}
+            data={monthlyData}
+            colorLegend={COLORS}
+          />
+        </div>
+
+        {/* Comparison Charts - Row 2 */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
+          <GenericChart
+            title={t("dashboard.weeklyInVsOut")}
+            data={weeklyData}
+            colorLegend={COLORS}
+          />
+          <GenericChart
+            title={t("dashboard.dailyInVsOut")}
+            data={dailyData}
+            colorLegend={COLORS}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+export default RecordOfficerDashboard;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/dashboard/dashboardCards.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/dashboard/dashboardCards.tsx
new file mode 100644
index 000000000..332e29f70
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/dashboard/dashboardCards.tsx
@@ -0,0 +1,170 @@
+import { Card, CardContent } from "@/shared/common/ui/card";
+import { ArrowDown, ArrowUp, MessageSquare, CheckSquare } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import UseDashboard from "../hooks/useDashboard";
+import { useCCIncomingRecords } from "../hooks/useCCIncomingRecords";
+import { useTranslation } from "react-i18next";
+
+export function DashboardCards() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const {
+    totalOutgoingRecords,
+    totalApprovalRecords,
+    totalExternalRecords,
+    totalIncomingRecords,
+    totalInternalRecords,
+    totalApproval,
+  } = UseDashboard();
+
+  const { ccCount } = useCCIncomingRecords({
+    skip: 0,
+    take: 10,
+    orderBy: "record.dispatchedDate:DESC,record.createdAt:DESC",
+  });
+  const totalCcRecords = ccCount ?? 0;
+
+  // Navigation handlers
+  const handleOutgoingClick = () => navigate("/record-management/userRecords");
+  const handleIncomingClick = () => navigate("/record-management/userIncoming");
+  const handleInternalClick = () =>
+    navigate("/record-management/userIncoming/internal");
+  const handleExternalClick = () => navigate("/record-management/userIncoming");
+  const handleCCClick = () => navigate("/record-management/userIncoming/cc");
+  const handleApprovalClick = () => navigate("/record-management/approval");
+
+  return (
+    <div className="flex flex-col gap-4 font-urbanist">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        <Card
+          className="shadow-md border border-primary/20 dark:border-primary/40 rounded-xl bg-white dark:bg-gray-800 hover:bg-primary/5 dark:hover:bg-primary/10 hover:shadow-lg transition-all duration-200 cursor-pointer"
+          onClick={handleOutgoingClick}
+        >
+          <CardContent className="p-5">
+            <div className="flex items-center">
+              <div className="p-2 bg-primary/10 dark:bg-primary/20 rounded-lg mr-4">
+                <ArrowUp className="h-5 w-5 text-primary dark:text-primary-400" />
+              </div>
+              <div className="flex flex-col flex-1">
+                <p className="text-sm font-medium text-gray-600 dark:text-gray-400">
+                  {t("dashboard.totalOutgoing")}
+                </p>
+                <p className="text-2xl font-semibold text-gray-800 dark:text-gray-100">
+                  {totalOutgoingRecords || 0}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card
+          className="shadow-md border border-primary/20 dark:border-primary/40 rounded-xl bg-white dark:bg-gray-800 hover:bg-primary/5 dark:hover:bg-primary/10 hover:shadow-lg transition-all duration-200 cursor-pointer"
+          onClick={handleIncomingClick}
+        >
+          <CardContent className="p-5">
+            <div className="flex items-center">
+              <div className="p-2 bg-primary/10 dark:bg-primary/20 rounded-lg mr-4">
+                <ArrowDown className="h-5 w-5 text-primary dark:text-primary-400" />
+              </div>
+              <div className="flex flex-col flex-1">
+                <p className="text-sm font-medium text-gray-600 dark:text-gray-400">
+                  {t("dashboard.totalIncoming")}
+                </p>
+                <p className="text-2xl font-semibold text-gray-800 dark:text-gray-100">
+                  {totalIncomingRecords || 0}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card
+          className="shadow-md border border-primary/20 dark:border-primary/40 rounded-xl bg-white dark:bg-gray-800 hover:bg-primary/5 dark:hover:bg-primary/10 hover:shadow-lg transition-all duration-200 cursor-pointer"
+          onClick={handleInternalClick}
+        >
+          <CardContent className="p-5">
+            <div className="flex items-center">
+              <div className="p-2 bg-primary/10 dark:bg-primary/20 rounded-lg mr-4">
+                <ArrowDown className="h-5 w-5 text-primary dark:text-primary-400" />
+              </div>
+              <div className="flex flex-col flex-1">
+                <p className="text-sm font-medium text-gray-600 dark:text-gray-400">
+                  {t("dashboard.internalIncoming")}
+                </p>
+                <p className="text-2xl font-semibold text-gray-800 dark:text-gray-100">
+                  {totalInternalRecords || 0}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        <Card
+          className="shadow-md border border-primary/20 dark:border-primary/40 rounded-xl bg-white dark:bg-gray-800 hover:bg-primary/5 dark:hover:bg-primary/10 hover:shadow-lg transition-all duration-200 cursor-pointer"
+          onClick={handleExternalClick}
+        >
+          <CardContent className="p-5">
+            <div className="flex items-center">
+              <div className="p-2 bg-primary/10 dark:bg-primary/20 rounded-lg mr-4">
+                <ArrowDown className="h-5 w-5 text-primary dark:text-primary-400" />
+              </div>
+              <div className="flex flex-col flex-1">
+                <p className="text-sm font-medium text-gray-600 dark:text-gray-400">
+                  {t("dashboard.externalIncoming")}
+                </p>
+                <p className="text-2xl font-semibold text-gray-800 dark:text-gray-100">
+                  {totalExternalRecords || 0}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card
+          className="shadow-md border border-primary/20 dark:border-primary/40 rounded-xl bg-white dark:bg-gray-800 hover:bg-primary/5 dark:hover:bg-primary/10 hover:shadow-lg transition-all duration-200 cursor-pointer"
+          onClick={handleCCClick}
+        >
+          <CardContent className="p-5">
+            <div className="flex items-center">
+              <div className="p-2 bg-primary/10 dark:bg-primary/20 rounded-lg mr-4">
+                <MessageSquare className="h-5 w-5 text-primary dark:text-primary-400" />
+              </div>
+              <div className="flex flex-col flex-1">
+                <p className="text-sm font-medium text-gray-600 dark:text-gray-400">
+                  {t("dashboard.ccRecords")}
+                </p>
+                <p className="text-2xl font-semibold text-gray-800 dark:text-gray-100">
+                  {totalCcRecords || 0}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card
+          className="shadow-md border border-primary/20 dark:border-primary/40 rounded-xl bg-white dark:bg-gray-800 hover:bg-primary/5 dark:hover:bg-primary/10 hover:shadow-lg transition-all duration-200 cursor-pointer"
+          onClick={handleApprovalClick}
+        >
+          <CardContent className="p-5">
+            <div className="flex items-center">
+              <div className="p-2 bg-primary/10 dark:bg-primary/20 rounded-lg mr-4">
+                <CheckSquare className="h-5 w-5 text-primary dark:text-primary-400" />
+              </div>
+              <div className="flex flex-col flex-1">
+                <p className="text-sm font-medium text-gray-600 dark:text-gray-400">
+                  {t("dashboard.totalApproval")}
+                </p>
+                <p className="text-2xl font-semibold text-gray-800 dark:text-gray-100">
+                  {totalApprovalRecords || 0}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/dashboard/userDashboard.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/dashboard/userDashboard.tsx
new file mode 100644
index 000000000..4fdd89f9e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/dashboard/userDashboard.tsx
@@ -0,0 +1,219 @@
+"use client";
+
+import { useRef } from "react";
+import { DashboardCards } from "./dashboardCards";
+import { ExportButton } from "./ExportButton";
+import { GenericChart, ChartDataItem } from "./GenericChart";
+import { IncomingReportSection } from "./IncomingReportSection";
+import UseDashboard from "../hooks/useDashboard";
+import Loader from "../../components/Loader/loader";
+import { useTranslation } from "react-i18next";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import DelegationView from "@/record-management/common/DelegationView";
+import { useReportByHooks } from "../hooks/useReportByHooks";
+
+// Color palettes
+const APPROVAL_COLORS = {
+  "In Progress": "var(--primary)",
+  Accepted: "var(--primary-400)",
+  Adjustment: "var(--primary)",
+  Rejected: "var(--primary-300)",
+  Approved: "var(--primary-400)",
+};
+
+const INCOMING_COLORS = {
+  "In Progress": "var(--primary)",
+  Accepted: "var(--primary-500)",
+  Reassigned: "var(--primary-300)",
+  Rejected: "var(--primary-300)",
+};
+
+const INTERNAL_COLORS = {
+  "In Progress": "var(--primary)",
+  Accepted: "var(--primary-500)",
+  Reassigned: "var(--primary-300)",
+  Rejected: "var(--primary-300)",
+};
+
+const EXTERNAL_COLORS = {
+  "In Progress": "var(--primary)",
+  Accepted: "var(--primary-500)",
+  Reassigned: "var(--primary-300)",
+  Rejected: "var(--primary-300)",
+};
+
+const OUTGOING_COLORS = {
+  Draft: "var(--primary)",
+  Submitted: "var(--primary-300)",
+  Accepted: "var(--primary-500)",
+  Approved: "var(--primary-400)",
+  Rejected: "var(--primary-300)",
+  Adjusted: "var(--primary)",
+  Sent: "var(--primary-300)",
+};
+
+export function UserDashboard() {
+  const { t } = useTranslation();
+  const { userDetails } = useAuthUser();
+  useReportByHooks();
+  const dashboardRef = useRef<HTMLDivElement>(null);
+
+  // Get current position ID from user details
+  const currentPositionId = userDetails?.employee?.[0]?.positions?.[0]?.id;
+  const {
+    totalInternalAcceptedRecords,
+    totalInProgressRecords,
+    totalAcceptedRecords,
+    totalInternalInProgressRecords,
+    totalInternalReassignedRecords,
+    totalInternalRejectedRecords,
+    totalReassignedRecords,
+    totalRejectedRecords,
+    totalApproval,
+    totalIncoming,
+    totalOutgoing,
+    isLoading,
+  } = UseDashboard();
+
+  const getTranslatedData = (
+    data: Record<string, number>,
+    colors: Record<string, string>,
+  ) => {
+    return Object.entries(data || {}).map(([name, value]) => ({
+      name: t(`statusBar.${name}`),
+      value,
+      fill: colors[name as keyof typeof colors] || "var(--primary-400)",
+    }));
+  };
+
+  const outgoingData = getTranslatedData(
+    Object.fromEntries(
+      (totalOutgoing || []).map((item) => [item.name, item.value]),
+    ),
+    OUTGOING_COLORS,
+  );
+
+  const incomingData = getTranslatedData(
+    Object.fromEntries(
+      (totalIncoming || []).map((item) => [item.name, item.value]),
+    ),
+    INCOMING_COLORS,
+  );
+
+  const approvalData = getTranslatedData(
+    Object.fromEntries(
+      (totalApproval || []).map((item) => [item.name, item.value]),
+    ),
+    APPROVAL_COLORS,
+  );
+
+  const internalData: ChartDataItem[] = [
+    {
+      name: t("statusBar.In Progress"),
+      value: totalInternalInProgressRecords || 0,
+      fill: INTERNAL_COLORS["In Progress"],
+    },
+    {
+      name: t("statusBar.Accepted"),
+      value: totalInternalAcceptedRecords || 0,
+      fill: INTERNAL_COLORS["Accepted"],
+    },
+    {
+      name: t("statusBar.Reassigned"),
+      value: totalInternalReassignedRecords || 0,
+      fill: INTERNAL_COLORS["Reassigned"],
+    },
+    {
+      name: t("statusBar.Rejected"),
+      value: totalInternalRejectedRecords || 0,
+      fill: INTERNAL_COLORS["Rejected"],
+    },
+  ];
+
+  const externalData: ChartDataItem[] = [
+    {
+      name: t("statusBar.In Progress"),
+      value: totalInProgressRecords || 0,
+      fill: EXTERNAL_COLORS["In Progress"],
+    },
+    {
+      name: t("statusBar.Accepted"),
+      value: totalAcceptedRecords || 0,
+      fill: EXTERNAL_COLORS["Accepted"],
+    },
+    {
+      name: t("statusBar.Reassigned"),
+      value: totalReassignedRecords || 0,
+      fill: EXTERNAL_COLORS["Reassigned"],
+    },
+    {
+      name: t("statusBar.Rejected"),
+      value: totalRejectedRecords || 0,
+      fill: EXTERNAL_COLORS["Rejected"],
+    },
+  ];
+
+  if (isLoading) {
+    return (
+      <div className="w-full h-full">
+        <Loader />
+      </div>
+    );
+  }
+  const isDelegated = userDetails?.employee?.some((emp) =>
+    emp.positions.some((pos) => pos.hasDelegated),
+  );
+  return isDelegated ? (
+    <DelegationView />
+  ) : (
+    <div className="mt-5 bg-background text-foreground">
+      <div className="mb-3 mt-3 flex w-full flex-wrap items-center justify-end gap-2 overflow-visible">
+        <ExportButton dashboardRef={dashboardRef} />
+      </div>
+
+      <div ref={dashboardRef} className="flex flex-col w-full gap-4 sm:gap-6">
+        <div className="chart-container">
+          <DashboardCards />
+        </div>
+
+        <div className="w-full">
+          <IncomingReportSection positionId={currentPositionId} />
+        </div>
+
+        <div className="grid w-full grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
+          <GenericChart
+            title={t("dashboard.approvalStats")}
+            data={approvalData}
+            colorLegend={APPROVAL_COLORS}
+          />
+          <GenericChart
+            title={t("dashboard.externalIncomingRecords")}
+            data={externalData}
+            colorLegend={EXTERNAL_COLORS}
+          />
+        </div>
+
+        <div className="grid w-full grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
+          <GenericChart
+            title={t("dashboard.internalIncomingRecords")}
+            data={internalData}
+            colorLegend={INTERNAL_COLORS}
+          />
+          <GenericChart
+            title={t("dashboard.incomingStats")}
+            data={incomingData}
+            colorLegend={INCOMING_COLORS}
+          />
+        </div>
+
+        <div className="grid w-full grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
+          <GenericChart
+            title={t("dashboard.outgoingStats")}
+            data={outgoingData}
+            colorLegend={OUTGOING_COLORS}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/delegation/DelegationColumns.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/delegation/DelegationColumns.tsx
new file mode 100644
index 000000000..288d773c0
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/delegation/DelegationColumns.tsx
@@ -0,0 +1,189 @@
+import { DelegatePositionDto } from "@/record-management/dto/delegation/delegationDto";
+import { ColumnDef } from "@tanstack/react-table";
+import dayjs from "dayjs";
+import { t } from "i18next";
+import { renderStatus } from "@/record-management/utils/renderDetails";
+import { DelegationRecordActions } from "./delegationColumnAction";
+import { format } from "date-fns";
+import i18n from "i18next";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+
+export const DelegationsColumns = (
+  refetch: () => void,
+): ColumnDef<DelegatePositionDto>[] => [
+  {
+    accessorKey: "delegatedPosition",
+    header: () => t("delegation.position"),
+    enableHiding: true, //Delegated Position
+    cell: ({ row }) => {
+      const isAmharic = i18n.language === "am";
+      const positionName = isAmharic
+        ? row.original.position?.name?.am
+        : row.original.position?.name?.en;
+      return (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="max-w-[200px] truncate cursor-help">
+                {positionName}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{positionName}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
+    },
+  },
+  {
+    accessorKey: "delegatedEmployee",
+    header: () => t("delegation.delegatedEmployee"), //Delegated Employee
+    enableHiding: true,
+    cell: ({ row }) => {
+      const isAmharic = i18n.language === "am";
+      const employeeName = isAmharic
+        ? row.original.employee?.name.am
+        : row.original.employee?.name.en;
+
+      return (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="max-w-[200px] truncate cursor-help">
+                {employeeName}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{employeeName}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
+    }, // Replace with name if available
+  },
+  {
+    accessorKey: "startDate",
+    header: () => t("delegation.startDate"),
+    enableHiding: true,
+    cell: ({ row }) => {
+      const isAmharic = i18n.language === "am";
+      const startDate = row.original.startDate;
+      const amharicStartDate = row.original.amharicStartDate;
+
+      if (isAmharic && amharicStartDate) {
+        return <div>{amharicStartDate}</div>;
+      }
+
+      const formattedDate = startDate
+        ? new Date(startDate).toLocaleDateString("en-US", {
+            month: "short",
+            day: "numeric",
+            year: "numeric",
+            hour: "2-digit",
+            minute: "2-digit",
+          })
+        : "-";
+
+      return <div>{formattedDate}</div>;
+    },
+  },
+  {
+    accessorKey: "endDate",
+    header: () => t("delegation.endDate"),
+    enableHiding: true,
+    cell: ({ row }) => {
+      const isAmharic = i18n.language === "am";
+      const endDate = row.original.endDate;
+      const amharicEndDate = row.original.amharicEndDate;
+
+      if (isAmharic && amharicEndDate) {
+        return <div>{amharicEndDate}</div>;
+      }
+
+      const formattedDate = endDate
+        ? new Date(endDate).toLocaleDateString("en-US", {
+            month: "short",
+            day: "numeric",
+            year: "numeric",
+            hour: "2-digit",
+            minute: "2-digit",
+          })
+        : "-";
+
+      return <div>{formattedDate}</div>;
+    },
+  },
+  {
+    accessorKey: "isCurrent",
+    header: () => t("userIncoming.RecordStatus"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      const isExpired = row.original.endDate
+        ? dayjs(row.original.endDate).isBefore(dayjs())
+        : false;
+      const normalizedStatus =
+        rowData.delegationLetter?.statusKey?.toLowerCase() ?? "";
+
+      if (
+        isExpired &&
+        (normalizedStatus === "accepted" ||
+          normalizedStatus === "approved" ||
+          normalizedStatus === "adjustment")
+      ) {
+        return renderStatus("expired", "expired");
+      }
+
+      if (normalizedStatus) {
+        return renderStatus(normalizedStatus, normalizedStatus);
+      }
+
+      return renderStatus("deactivated", "deactivated");
+    },
+    enableHiding: true,
+  },
+  {
+    id: "Task Status",
+    header: () => t("userIncoming.Status"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      const normalizedStatus = rowData.status?.toLowerCase() ?? "";
+      const isExpired = row.original.endDate
+        ? dayjs(row.original.endDate).isBefore(dayjs())
+        : false;
+
+      if (normalizedStatus === "pending") {
+        return isExpired
+          ? renderStatus("expired", "expired")
+          : renderStatus(normalizedStatus, normalizedStatus);
+      }
+
+      return renderStatus(normalizedStatus, normalizedStatus);
+    },
+    accessorKey: "TaskStatus",
+    enableHiding: true,
+    size: 120,
+  },
+  {
+    id: "Actions",
+    header: () => t("userRecord.Actions"),
+    accessorKey: "Actions",
+    enableHiding: true,
+    cell: ({ row }) => {
+      const rowData = row.original;
+
+      return (
+        <DelegationRecordActions
+          rowData={rowData as unknown as DelegatePositionDto}
+          refetchTable={refetch}
+          type="delegator"
+        />
+      );
+    },
+  },
+];
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/delegation/MydelegateeColumn.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/delegation/MydelegateeColumn.tsx
new file mode 100644
index 000000000..b20c89b81
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/delegation/MydelegateeColumn.tsx
@@ -0,0 +1,147 @@
+import { DelegatePositionDto } from "@/record-management/dto/delegation/delegationDto";
+import { ColumnDef } from "@tanstack/react-table";
+import { t } from "i18next";
+import { renderStatus } from "@/record-management/utils/renderDetails";
+import i18n from "i18next";
+import { DelegationRecordActions } from "./delegationColumnAction";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+
+export const MydelegateeColumn = (
+  refetch: () => void
+): ColumnDef<DelegatePositionDto>[] => [
+  {
+    accessorKey: "delegateePosition",
+    header: () => t("delegation.delegateePosition"), //Delegated Position
+    enableHiding: true,
+    cell: ({ row }) => {
+      const isAmharic = i18n.language === "am";
+      const positionName = isAmharic
+        ? row.original.position?.name.am
+        : row.original.position?.name.en;
+
+      return (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="max-w-[200px] truncate cursor-help">
+                {positionName}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{positionName}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
+    },
+  },
+  {
+    accessorKey: "delegateeEmployee",
+    header: () => t("delegation.delegateeEmployee"), //Delegated Employee
+    enableHiding: true,
+    cell: ({ row }) => {
+      const isAmharic = i18n.language === "am";
+      const employeeName = isAmharic
+        ? row.original.delegator?.employee?.name.am
+        : row.original.delegator?.employee?.name.en;
+
+      return (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="max-w-[200px] truncate cursor-help">
+                {employeeName}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{employeeName}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
+    },
+  },
+  {
+    accessorKey: "startDate",
+    header: () => t("delegation.startDate"),
+    enableHiding: true,
+    cell: ({ row }) => {
+      const isAmharic = i18n.language === "am";
+      const startDate = row.original.startDate;
+      const amharicStartDate = row.original.amharicStartDate;
+
+      if (isAmharic && amharicStartDate) {
+        return <div>{amharicStartDate}</div>;
+      }
+
+      const formattedDate = startDate
+        ? new Date(startDate).toLocaleDateString("en-US", {
+            month: "short",
+            day: "numeric",
+            year: "numeric",
+            hour: "2-digit",
+            minute: "2-digit",
+          })
+        : "-";
+
+      return <div>{formattedDate}</div>;
+    },
+  },
+  {
+    accessorKey: "endDate",
+    header: () => t("delegation.endDate"),
+    enableHiding: true,
+    cell: ({ row }) => {
+      const isAmharic = i18n.language === "am";
+      const endDate = row.original.endDate;
+      const amharicEndDate = row.original.amharicEndDate;
+
+      if (isAmharic && amharicEndDate) {
+        return <div>{amharicEndDate}</div>;
+      }
+
+      const formattedDate = endDate
+        ? new Date(endDate).toLocaleString("en-US", {
+            month: "short",
+            day: "numeric",
+            year: "numeric",
+            hour: "2-digit",
+            minute: "2-digit",
+          })
+        : "-";
+
+      return <div>{formattedDate}</div>;
+    },
+  },
+  {
+    accessorKey: "isCurrent",
+    header: () => t("userRecord.Status"),
+    cell: ({ row }) =>
+      row.original.isCurrent
+        ? renderStatus("activated", "activated")
+        : renderStatus("deactivated", "deactivated"),
+    enableHiding: true,
+  },
+  {
+    id: "Actions",
+    header: () => t("userRecord.Actions"),
+    accessorKey: "Actions",
+    enableHiding: true,
+    cell: ({ row }) => {
+      const rowData = row.original;
+
+      return (
+        <DelegationRecordActions
+          rowData={rowData as unknown as DelegatePositionDto}
+          refetchTable={refetch}
+          type="delegatee"
+        />
+      );
+    },
+  },
+];
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/delegation/delegationColumnAction.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/delegation/delegationColumnAction.tsx
new file mode 100644
index 000000000..6d27b4ac9
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/delegation/delegationColumnAction.tsx
@@ -0,0 +1,260 @@
+import { Button, getActionButtonVariant } from "@/shared/common/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { Edit, Eye, OctagonAlert, MoreVertical, Trash2 } from "lucide-react";
+import { useState } from "react";
+// import AssigneRecord from "@/components/userIncoming/internalIncomingRecords/AssigneRecord";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { DelegatePositionDto } from "@/record-management/dto/delegation/delegationDto";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { CommentCard } from "@/record-management/common/WorkflowCommentHistory";
+import DeleteDelegation from "./deleteDelegation";
+import { formatAmharicDateTime } from "@/record-management/services/dateService";
+import dayjs from "dayjs";
+
+interface IncomingRecordActionsProps {
+  rowData: DelegatePositionDto;
+  refetchTable?: () => void; // Optional callback to refetch table data
+  type: "delegator" | "delegatee";
+  fromTable?: boolean;
+}
+
+export const getDelegationActionState = (
+  rowData: DelegatePositionDto,
+  type: "delegator" | "delegatee",
+) => {
+  const isExpired = rowData.endDate
+    ? dayjs(rowData.endDate).isBefore(dayjs())
+    : false;
+  const canEditDelegation =
+    !isExpired &&
+    (rowData.delegationLetter?.statusKey === "Approved" ||
+      rowData.delegationLetter?.statusKey === "Adjustment" ||
+      rowData.delegationLetter?.statusKey === "Draft");
+  const canManageDelegation = rowData.isCurrent && type === "delegator";
+
+  return {
+    isExpired,
+    canEditDelegation,
+    canManageDelegation,
+  };
+};
+
+export function DelegationRecordActions({
+  rowData,
+  refetchTable,
+  type,
+  fromTable = true,
+}: IncomingRecordActionsProps) {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [showTerminationDialog, setShowTerminationDialog] = useState(false);
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const localizeName = useLocalizedName();
+  const { canEditDelegation, canManageDelegation } = getDelegationActionState(
+    rowData,
+    type,
+  );
+  const terminationReason = rowData?.terminationReason ?? null;
+  const hasTermination = !!terminationReason;
+  const terminatedEmployeeName =
+    (rowData?.terminationReason?.terminatorEmployeePosition?.employee?.name &&
+      (localizeName(
+        rowData.terminationReason.terminatorEmployeePosition.employee.name,
+      ) ||
+        rowData.terminationReason.terminatorEmployeePosition.employee.name.en ||
+        rowData.terminationReason.terminatorEmployeePosition.employee.name
+          .am)) ||
+    t("common.unknownUser", "Unknown user");
+  const handleEditClick = () => {
+    setDropdownOpen(false);
+    navigate(`/record-management/editDelegation/${rowData?.id}`, {
+      state: { delegation: rowData },
+    });
+  };
+  const handleViewDetails = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    setDropdownOpen(false);
+    navigate(
+      `/record-management/viewDelegationLetter/${rowData?.delegationLetter.id}`,
+      {
+        state: {
+          delegation: rowData,
+          delegationType: type,
+        },
+      },
+    );
+  };
+  const handleDelete = () => {
+    setDropdownOpen(false);
+    setShowDeleteDialog(true);
+  };
+  return (
+    <>
+      {fromTable ? (
+        <>
+          {rowData.delegationLetter ? (
+            <Button
+              variant="viewDetail"
+              className="min-w-[110px]"
+              onClick={(e: any) => handleViewDetails(e)}
+            >
+              {t("delegation.viewLetter")}
+            </Button>
+          ) : hasTermination ? (
+            <Button
+              variant="viewDetail"
+              className="min-w-[110px] inline-flex items-center gap-2"
+              aria-label={t(
+                "delegation.viewTerminationDetail",
+                "View termination detail",
+              )}
+              title={t(
+                "delegation.viewTerminationDetail",
+                "View termination detail",
+              )}
+              onClick={(e) => {
+                e.preventDefault();
+                setShowTerminationDialog(true);
+              }}
+            >
+              <Eye className="h-4 w-4" />
+              {t("userRecord.View Detail")}
+            </Button>
+          ) : (
+            <p className="flex items-center gap-2 text-sm font-medium text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-md px-3 py-2">
+              <OctagonAlert className="h-4 w-4" />
+              {t("delegation.noLetterAssigned")}
+            </p>
+          )}
+
+          {canManageDelegation && (
+            <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" className="h-8 w-8 p-0">
+                  <MoreVertical className="h-4 w-4" />
+                  <span className="sr-only">
+                    {t("userIncoming.Open actions menu")}
+                  </span>
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                align="end"
+                onInteractOutside={(e: any) => {
+                  const target = e.target as HTMLElement;
+                  if (!target.closest('[role="dialog"]')) {
+                    setDropdownOpen(false);
+                  }
+                }}
+              >
+                <DropdownMenuLabel>{t("userRecord.Actions")}</DropdownMenuLabel>
+                {canEditDelegation && (
+                  <DropdownMenuItem
+                    onSelect={handleEditClick}
+                    className="cursor-pointer hover:!text-primary-700 !bg-transparent !transition-colors duration-200"
+                  >
+                    <Edit className="mr-2 h-4 w-4 group-hover:text-white transition-colors duration-200" />
+                    <span> {t("userRecord.Edit")}</span>
+                  </DropdownMenuItem>
+                )}
+                <DropdownMenuItem
+                  onSelect={handleDelete}
+                  className="text-red-600 cursor-pointer hover:!text-red-800 !bg-transparent !transition-colors duration-200"
+                >
+                  <Trash2 className="mr-2 h-4 w-4 text-red-600 group-hover:text-white transition-colors duration-200" />
+                  {t("userRecord.Delete")}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+        </>
+      ) : canManageDelegation ? (
+        <div className="flex flex-wrap gap-2">
+          {canEditDelegation && (
+            <Button
+              variant={getActionButtonVariant("Edit")}
+              onClick={handleEditClick}
+            >
+              <Edit className="h-4 w-4" />
+              <span>
+                {t("userRecord.Edit")}
+              </span>
+            </Button>
+          )}
+
+          <Button
+            variant={getActionButtonVariant("Delete")}
+            onClick={handleDelete}
+          >
+            <Trash2 className="h-4 w-4" />
+            <span>
+              {t("userRecord.Delete")}
+            </span>
+          </Button>
+        </div>
+      ) : (
+        <p className="text-sm text-gray-500 dark:text-gray-400 italic">
+          {t("userIncoming.noActionsAvailable", {
+            defaultValue: "No actions available for this record.",
+          })}
+        </p>
+      )}
+
+      {showDeleteDialog && (
+        <DeleteDelegation
+          delegateId={(rowData?.id as string) || "0"}
+          onSuccess={() => {
+            setShowDeleteDialog(false);
+            if (refetchTable) {
+              refetchTable(); // Call the refetch function if provided
+            }
+            navigate("/record-management/delegation");
+          }}
+          onClose={() => {
+            setShowDeleteDialog(false);
+            if (refetchTable) {
+              refetchTable();
+            }
+          }}
+        />
+      )}
+
+      {showTerminationDialog && terminationReason && (
+        <Dialog
+          open={showTerminationDialog}
+          onOpenChange={setShowTerminationDialog}
+        >
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>
+                {t("delegation.terminationDetail", "Termination Detail")}
+              </DialogTitle>
+            </DialogHeader>
+            <CommentCard
+              createdAt={terminationReason.terminatedAt}
+              amharicCreatedAt={formatAmharicDateTime(
+                terminationReason.terminatedAt,
+              )}
+              comment={terminationReason.comment}
+              assignerName={terminatedEmployeeName}
+              variant="secondary"
+            />
+          </DialogContent>
+        </Dialog>
+      )}
+    </>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/delegation/delegationForm.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/delegation/delegationForm.tsx
new file mode 100644
index 000000000..cfd46dc40
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/delegation/delegationForm.tsx
@@ -0,0 +1,1084 @@
+import { Controller, UseFormReturn, useWatch } from "react-hook-form";
+import * as z from "zod";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from "@/shared/common/ui/form";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { Button } from "@/shared/common/ui/button";
+import { CommentCard } from "@/record-management/common/WorkflowCommentHistory";
+import { cn } from "@/shared/lib/utils";
+import { useNavigate } from "react-router-dom";
+import { delegationFormSchema } from "./delegationFormSchema";
+import { KeyValue } from "@/record-management/types/recordSelectTypes";
+import useSettings from "../hooks/useSettings";
+import { OrganizationsPositions } from "@/record-management/services/api/departmentService";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { format, isValid, parseISO } from "date-fns";
+import { fetchEmployeesByPosition } from "@/record-management/services/api/employeesService";
+import { EmployeeByPositionDto } from "@/user-management/dto/employees/employees";
+import { useTranslation } from "react-i18next";
+import DateField from "@/shared/common/form/fields/DateField";
+import DateTimeField from "@/shared/common/form/fields/DateTimeField";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import {
+  FormMultiSelectField,
+  FormSingleSelectField,
+} from "@/shared/common/form/fields/FormFields";
+import React from "react";
+import { useUserRecords } from "../hooks/useUserRecords";
+import { SingleSelect } from "@/shared/common/ui/single-select";
+import {
+  useSignatureListWithPresigned,
+  useTeetersListWithPresigned,
+} from "../hooks/useSignatureAndTeeterWithPresigned";
+import { UploadedTeeter } from "../Settings/uploadTeeterandSingature";
+import { useAuthUser } from "@/record-management/hooks/useAuthUser";
+import { RecordContentOutgoingHistory } from "@/record-management/services/api/userRecordService";
+import { previewDelegationPdf } from "@/record-management/services/api/employeePositionService";
+import { Eye, Download, Loader2 } from "lucide-react";
+
+type DelegationFormValues = z.infer<typeof delegationFormSchema>;
+
+interface DelegationFormProps {
+  formInstance: UseFormReturn<any>;
+  onSubmit: (values: DelegationFormValues) => void;
+  isEditing?: boolean;
+  selectedPositionId?: string;
+  selectedPositionName?: { am: string; en: string };
+  selectedEmployeeId?: string;
+  startDate?: string;
+  endDate?: Date | null;
+  startAmDate?: string;
+  endAmDate?: string;
+  internalCC?: string[];
+  stampId?: string;
+  latestOutgoingHistory?: RecordContentOutgoingHistory;
+}
+
+interface UploadedSignature {
+  id: string;
+  url: string;
+  name?: string;
+}
+
+const getEmployeePositions = (employee?: EmployeeByPositionDto) =>
+  Array.isArray(employee?.employeePositions) ? employee.employeePositions : [];
+
+const getMatchingEmployeePosition = (
+  employee: EmployeeByPositionDto,
+  positionId?: string,
+) =>
+  getEmployeePositions(employee).find(
+    (employeePosition: any) =>
+      employeePosition?.position?.id === positionId ||
+      employeePosition?.positionId === positionId,
+  ) ?? getEmployeePositions(employee)[0];
+
+export const useLocalized = (lang: string) => {
+  return useCallback(
+    (name?: { am: string; en: string }) => {
+      if (!name) return "";
+      return lang.startsWith("am") ? name.am || name.en : name.en || name.am;
+    },
+    [lang],
+  );
+};
+
+const DelegationForm = ({
+  formInstance,
+  onSubmit,
+  isEditing,
+  selectedPositionId,
+  selectedPositionName,
+  selectedEmployeeId,
+  startDate,
+  endDate,
+  startAmDate,
+  endAmDate,
+  internalCC,
+  stampId,
+  latestOutgoingHistory,
+}: DelegationFormProps) => {
+  const navigate = useNavigate();
+  const form = formInstance;
+  const { allDepartmentUnits, listAllDepartmentResponse } = useSettings();
+  const [uploadedTeeters, setUploadedTeeters] = useState<UploadedTeeter[]>([]);
+  const [selectedTeeterUrl, setSelectedTeeterUrl] = useState<string>("");
+  const [uploadedSignatures, setUploadedSignatures] = useState<
+    UploadedSignature[]
+  >([]);
+  const [selectedSignatureUrl, setSelectedSignatureUrl] = useState<string>("");
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+  const [previewPdfUrl, setPreviewPdfUrl] = useState<string | null>(null);
+  const [isLoadingPreview, setIsLoadingPreview] = useState(false);
+  const { userDetails } = useAuthUser();
+  const employeeId = userDetails?.employee?.[0]?.id ?? "";
+  const { data: signatureData } = useSignatureListWithPresigned(employeeId);
+  const selectedFormLanguage = useWatch({
+    control: form.control,
+    name: "language",
+    defaultValue: "am",
+  });
+  const { data: teeterData } = useTeetersListWithPresigned(
+    selectedFormLanguage === "am" || selectedFormLanguage === "en"
+      ? selectedFormLanguage
+      : undefined,
+  );
+  const localizeName = useLocalized(selectedFormLanguage);
+  const departmentsList = useMemo(() => {
+    const options = allDepartmentUnits.map((unit: OrganizationsPositions) => ({
+      label: localizeName(unit.name),
+      value: unit.id && unit.id.trim() !== "" ? unit.id : unit.key || "",
+    }));
+
+    const hasSelectedPositionOption =
+      !!selectedPositionId &&
+      options.some((option) => option.value === selectedPositionId);
+
+    if (
+      isEditing &&
+      selectedPositionId &&
+      selectedPositionName &&
+      !hasSelectedPositionOption
+    ) {
+      options.unshift({
+        label: localizeName(selectedPositionName),
+        value: selectedPositionId,
+      });
+    }
+
+    return options;
+  }, [
+    allDepartmentUnits,
+    isEditing,
+    localizeName,
+    selectedPositionId,
+    selectedPositionName,
+  ]);
+
+  const [positionEmployeesData, setPositionEmployeesData] = useState<
+    EmployeeByPositionDto[]
+  >([]);
+  const { t } = useTranslation();
+  const isPreferredLanguageAmharic = selectedFormLanguage === "am";
+  useEffect(() => {
+    if (isEditing && internalCC && internalCC.length > 0) {
+      form.setValue("internalCC", internalCC);
+    }
+    if (isEditing && endDate) {
+      form.setValue("endDate", endDate);
+    }
+  }, [isEditing, internalCC, stampId, form, endDate]);
+
+  const watchedPositionId = useWatch({
+    control: form.control,
+    name: "positionId",
+  });
+  const watchedEmployeeId = useWatch({
+    control: form.control,
+    name: "employeeId",
+  });
+  const selectedPosition = useMemo(
+    () =>
+      allDepartmentUnits.find((unit: OrganizationsPositions) => {
+        const unitValue =
+          unit.id && unit.id.trim() !== "" ? unit.id : unit.key || "";
+        return unitValue === watchedPositionId;
+      }),
+    [allDepartmentUnits, watchedPositionId],
+  );
+  const selectedUser = useMemo(
+    () =>
+      positionEmployeesData.find((emp: EmployeeByPositionDto) => {
+        const matchingEmployeePosition = getMatchingEmployeePosition(
+          emp,
+          watchedPositionId,
+        );
+        const employeePositionId = matchingEmployeePosition?.id;
+        return (
+          employeePositionId === watchedEmployeeId ||
+          emp.id === watchedEmployeeId ||
+          emp.user?.id === watchedEmployeeId
+        );
+      }),
+    [positionEmployeesData, watchedEmployeeId, watchedPositionId],
+  );
+
+  const positionEmployees: KeyValue[] = useMemo(
+    () =>
+      positionEmployeesData.map((emp: EmployeeByPositionDto) => ({
+        label: localizeName(emp.user.name),
+        value: emp.id,
+        employeePositionId: getMatchingEmployeePosition(emp, watchedPositionId)
+          ?.id,
+      })),
+    [localizeName, positionEmployeesData, watchedPositionId],
+  );
+  const lastLoadedPositionIdRef = useRef<string | null>(null);
+  const initialEditPositionIdRef = useRef<string | undefined>(
+    selectedPositionId,
+  );
+  const initialEditEmployeeIdRef = useRef<string | undefined>(
+    selectedEmployeeId,
+  );
+
+  useEffect(() => {
+    initialEditPositionIdRef.current = selectedPositionId;
+  }, [selectedPositionId]);
+
+  useEffect(() => {
+    initialEditEmployeeIdRef.current = selectedEmployeeId;
+  }, [selectedEmployeeId]);
+
+  useEffect(() => {
+    const teetersArray = Array.isArray(teeterData)
+      ? teeterData
+      : teeterData?.presignedTeeters;
+
+    if (!teetersArray?.length) {
+      return;
+    }
+
+    setUploadedTeeters(teetersArray);
+
+    if (isEditing && stampId) {
+      const matchingTeeter = teetersArray.find((t) => t.id === stampId);
+      form.setValue("stampId", stampId);
+      setSelectedTeeterUrl(matchingTeeter?.url || "");
+      return;
+    }
+
+    const match =
+      teetersArray.find((t) => t.locale === selectedFormLanguage) ??
+      (teetersArray.length === 1 ? teetersArray[0] : null);
+    if (match) {
+      form.setValue("stampId", match.id);
+      setSelectedTeeterUrl(match.url);
+    }
+  }, [teeterData, form, isEditing, stampId, selectedFormLanguage]);
+  useEffect(() => {
+    if (!signatureData) {
+      return;
+    }
+
+    const currentSignature = signatureData?.items?.find(
+      (item) => item.isCurrent && item.uploadedSuccessfully,
+    );
+
+    if (!currentSignature || !signatureData.presignedSignatureUrl) {
+      setUploadedSignatures([]);
+      setSelectedSignatureUrl("");
+      return;
+    }
+
+    const availableSignatures: UploadedSignature[] = [
+      {
+        id: currentSignature.id,
+        url: signatureData.presignedSignatureUrl,
+        name: currentSignature.fileInfo?.originalname || "Signature",
+      },
+    ];
+
+    setUploadedSignatures(availableSignatures);
+    form.setValue("signatureId", currentSignature.id);
+    setSelectedSignatureUrl(signatureData.presignedSignatureUrl);
+  }, [signatureData, form]);
+
+  const selectedStampId = form.watch("stampId");
+  const selectedSignatureId = form.watch("signatureId");
+
+  useEffect(() => {
+    if (!selectedStampId) {
+      setSelectedTeeterUrl("");
+      return;
+    }
+
+    const selectedStamp = uploadedTeeters.find((t) => t.id === selectedStampId);
+    setSelectedTeeterUrl(selectedStamp?.url || "");
+  }, [selectedStampId, uploadedTeeters]);
+
+  useEffect(() => {
+    if (!selectedSignatureId) {
+      setSelectedSignatureUrl("");
+      return;
+    }
+
+    const selectedSignature = uploadedSignatures.find(
+      (s) => s.id === selectedSignatureId,
+    );
+    setSelectedSignatureUrl(selectedSignature?.url || "");
+  }, [selectedSignatureId, uploadedSignatures]);
+
+  useEffect(() => {
+    const targetPositionId = initialEditPositionIdRef.current;
+    if (!targetPositionId) return;
+    if (watchedPositionId === targetPositionId) {
+      initialEditPositionIdRef.current = undefined;
+      return;
+    }
+
+    form.setValue("positionId", targetPositionId, {
+      shouldDirty: false,
+    });
+  }, [form, watchedPositionId]);
+
+  useEffect(() => {
+    if (!watchedPositionId) return;
+  }, [watchedPositionId, selectedPosition]);
+
+  useEffect(() => {
+    if (!watchedEmployeeId && !selectedEmployeeId) return;
+  }, [selectedEmployeeId, selectedUser, watchedEmployeeId]);
+
+  useEffect(() => {
+    if (!selectedUser || !watchedPositionId) return;
+
+    const resolvedEmployeePositionId = getMatchingEmployeePosition(
+      selectedUser,
+      watchedPositionId,
+    )?.id;
+
+    if (!resolvedEmployeePositionId) return;
+
+    const currentEmployeeValue = form.getValues("employeeId");
+    if (currentEmployeeValue === resolvedEmployeePositionId) return;
+
+    form.setValue("employeeId", resolvedEmployeePositionId, {
+      shouldDirty: false,
+      shouldValidate: true,
+    });
+    form.clearErrors("employeeId");
+  }, [form, selectedUser, watchedPositionId]);
+
+  useEffect(() => {
+    if (!watchedPositionId) {
+      lastLoadedPositionIdRef.current = null;
+      setPositionEmployeesData([]);
+      return;
+    }
+    if (lastLoadedPositionIdRef.current === watchedPositionId) {
+      return;
+    }
+
+    const loadEmployees = async () => {
+      try {
+        lastLoadedPositionIdRef.current = watchedPositionId;
+        const res = await fetchEmployeesByPosition(watchedPositionId);
+        setPositionEmployeesData(res);
+
+        const targetEmployeeId = initialEditEmployeeIdRef.current;
+        const selectedEmployee = res.find((emp: EmployeeByPositionDto) => {
+          const matchingEmployeePosition = getMatchingEmployeePosition(
+            emp,
+            watchedPositionId,
+          );
+          const employeePositionId = matchingEmployeePosition?.id;
+          return (
+            employeePositionId === watchedEmployeeId ||
+            emp.id === watchedEmployeeId ||
+            employeePositionId === targetEmployeeId ||
+            emp.id === targetEmployeeId ||
+            emp.user?.id === targetEmployeeId
+          );
+        });
+
+        const selectedEmployeePositionId = selectedEmployee
+          ? getMatchingEmployeePosition(selectedEmployee, watchedPositionId)?.id
+          : undefined;
+
+        if (selectedEmployeePositionId) {
+          if (selectedEmployeePositionId !== watchedEmployeeId) {
+            form.setValue("employeeId", selectedEmployeePositionId, {
+              shouldDirty: false,
+              shouldValidate: true,
+            });
+            form.clearErrors("employeeId");
+          }
+        }
+
+        if (isEditing && watchedPositionId === selectedPositionId) {
+          initialEditEmployeeIdRef.current = undefined;
+        }
+      } catch (error) {
+        console.error("Failed to fetch employees by positionId", error);
+        lastLoadedPositionIdRef.current = null;
+        setPositionEmployeesData([]);
+      }
+    };
+
+    loadEmployees();
+  }, [
+    form,
+    isEditing,
+    selectedPositionId,
+    watchedEmployeeId,
+    watchedPositionId,
+  ]);
+
+  const handleSubmit = (values: DelegationFormValues) => {
+    onSubmit(values);
+  };
+
+  const handlePreview = async () => {
+    try {
+      setIsLoadingPreview(true);
+      const formValues = form.getValues();
+      
+      const startDate = formValues.startDate instanceof Date 
+        ? formValues.startDate 
+        : new Date(formValues.startDate);
+      const endDate = formValues.endDate instanceof Date 
+        ? formValues.endDate 
+        : new Date(formValues.endDate);
+
+      // Build CC array with proper unitId and positionId
+      const departmentUnitByValue = new Map(
+        allDepartmentUnits.map((unit) => [
+          unit.id && unit.id.trim() !== "" ? unit.id : unit.key || "",
+          unit,
+        ]),
+      );
+      
+      const internalCCValues =
+        formValues.internalCC
+          ?.map((selectedId: string) => departmentUnitByValue.get(selectedId))
+          .filter((unit: any) => Boolean(unit)) ?? [];
+
+      const payload = {
+        delegationDto: {
+          employeePositionId: formValues.employeeId,
+          from: startDate,
+          to: endDate,
+        },
+        signatureId: formValues.signatureId,
+        stampId: formValues.stampId,
+        locale: formValues.language,
+        cc: internalCCValues.map((c: any) => ({
+          unitId: c.unitId!,
+          positionId: c.id!,
+          type: "internal" as const,
+        })),
+      };
+
+      const pdfBlob = await previewDelegationPdf(payload);
+      const url = URL.createObjectURL(pdfBlob);
+      setPreviewPdfUrl(url);
+      setIsPreviewOpen(true);
+    } catch (error) {
+      console.error("Failed to generate preview:", error);
+    } finally {
+      setIsLoadingPreview(false);
+    }
+  };
+
+  const handlePositionChange = (
+    nextPositionId: string,
+    currentPositionId: string | undefined,
+    onChange: (value: string) => void,
+  ) => {
+    if (nextPositionId === currentPositionId) {
+      return;
+    }
+
+    lastLoadedPositionIdRef.current = null;
+    initialEditPositionIdRef.current = undefined;
+    initialEditEmployeeIdRef.current = undefined;
+    setPositionEmployeesData([]);
+    form.setValue("employeeId", "", {
+      shouldDirty: true,
+      shouldValidate: true,
+    });
+    onChange(nextPositionId);
+  };
+
+  const handleEmployeeChange = (employeePositionId: string) => {
+    form.setValue("employeeId", employeePositionId, {
+      shouldDirty: true,
+      shouldTouch: true,
+      shouldValidate: true,
+    });
+    form.clearErrors("employeeId");
+  };
+
+  const formatEnglishDateTime = (rawDate?: string) => {
+    if (!rawDate) return "-";
+
+    const parsedDate = parseISO(rawDate);
+    if (isValid(parsedDate)) {
+      return format(parsedDate, "MMMM do, yyyy h:mm a");
+    }
+
+    const fallbackDate = new Date(rawDate);
+    return isValid(fallbackDate)
+      ? format(fallbackDate, "MMMM do, yyyy h:mm a")
+      : rawDate;
+  };
+
+  const formatHistoryDateTime = (rawDate?: string) => {
+    if (!rawDate) return "-";
+
+    const parsedDate = parseISO(rawDate);
+    const dateToFormat = isValid(parsedDate) ? parsedDate : new Date(rawDate);
+    if (!isValid(dateToFormat)) return rawDate;
+
+    if (selectedFormLanguage === "am") {
+      return new Intl.DateTimeFormat("am-ET", {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+      }).format(dateToFormat);
+    }
+
+    return formatEnglishDateTime(rawDate);
+  };
+
+  const historyEmployeeName =
+    localizeName(
+      latestOutgoingHistory?.employeePosition?.employee?.name as
+        | { en: string; am: string }
+        | undefined,
+    ) || "";
+
+  const renderReadOnlyField = (label: string, value: string | undefined) => (
+    <FormItem className="w-full">
+      <FormLabel className="text-base font-medium text-gray-700 dark:text-gray-200">
+        {label}
+      </FormLabel>
+      <div className="border rounded-md px-3 py-2 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-200">
+        {value || "-"}
+      </div>
+    </FormItem>
+  );
+  return (
+    <div className="container mx-auto px-4 py-6 space-y-6">
+      <h1 className="text-xl md:text-2xl font-bold dark:text-gray-100">
+        {isEditing
+          ? t("delegation.editDelegation")
+          : t("delegation.addDelegation")}
+      </h1>
+
+      {isEditing && latestOutgoingHistory?.comment && (
+        <CommentCard
+          createdAt={
+            latestOutgoingHistory.createdAt ?? "2026-05-14T06:26:45.274Z"
+          }
+          comment={latestOutgoingHistory.comment}
+          assignerName={
+            historyEmployeeName || t("common.unknownUser", "Unknown user")
+          }
+          variant="secondary"
+        />
+      )}
+
+      <div className="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-4 md:p-6 border border-gray-100 dark:border-gray-700">
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(handleSubmit)}
+            className="space-y-6">
+            <FormField
+              control={form.control}
+              name="language"
+              render={({ field }) => (
+                <FormItem className="w-full max-w-sm">
+                  <FormLabel className="text-base font-medium text-gray-700 dark:text-gray-200">
+                    {t("common.language", "Language")}
+                  </FormLabel>
+                  <FormControl>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <SelectTrigger className="w-full dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600">
+                        <SelectValue
+                          placeholder={t(
+                            "common.selectLanguage",
+                            "Select language",
+                          )}
+                        />
+                      </SelectTrigger>
+                      <SelectContent className="dark:bg-gray-800 dark:border-gray-600">
+                        <SelectItem value="en">English</SelectItem>
+                        <SelectItem value="am">Amharic</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+                  <FormMessage className="text-base text-red-500 mt-1" />
+                </FormItem>
+              )}
+            />
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-x-8 md:gap-y-6">
+              {isEditing ? (
+                <>
+                  <FormField
+                    control={form.control}
+                    name="positionId"
+                    render={({ field }) => (
+                      <FormItem className="w-full">
+                        <FormLabel className="text-base font-medium text-gray-700 dark:text-gray-200">
+                          {t("delegation.delegatedPosition")}
+                        </FormLabel>
+                        <FormControl>
+                          <SingleSelect
+                            options={departmentsList}
+                            onValueChange={(value) =>
+                              handlePositionChange(
+                                value,
+                                field.value,
+                                field.onChange,
+                              )
+                            }
+                            value={field.value ?? ""}
+                            placeholder={t(
+                              "delegation.selectDelegatedPosition",
+                            )}
+                          />
+                        </FormControl>
+                        <FormMessage className="text-base text-red-500 mt-1" />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="employeeId"
+                    render={({ field }) => (
+                      <FormItem className="w-full">
+                        <FormLabel className="text-base font-medium text-gray-700 dark:text-gray-200">
+                          {t("delegation.delegateTo")}
+                        </FormLabel>
+                        <FormControl>
+                          <Select
+                            onValueChange={handleEmployeeChange}
+                            value={field.value ?? ""}
+                            disabled={!watchedPositionId}>
+                            <SelectTrigger
+                              className={cn(
+                                "w-full border rounded-md px-3 py-2 text-base shadow-sm transition dark:text-gray-200",
+                                !watchedPositionId
+                                  ? "bg-gray-100 dark:bg-gray-700 cursor-not-allowed text-gray-400 dark:text-gray-500"
+                                  : "border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary dark:bg-gray-700",
+                              )}>
+                              <SelectValue
+                                placeholder={t("delegation.selectEmployee")}
+                                className="text-gray-500 dark:text-gray-400"
+                              />
+                            </SelectTrigger>
+                            <SelectContent className="max-h-60 overflow-y-auto border border-gray-200 dark:border-gray-600 rounded-md shadow-lg bg-white dark:bg-gray-800 z-50">
+                              {positionEmployees.length > 0 ? (
+                                positionEmployees.map((e) => (
+                                  <SelectItem
+                                    key={e.employeePositionId}
+                                    value={e.employeePositionId ?? e.value}
+                                    className="px-3 py-2 text-base hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer dark:text-gray-200">
+                                    {e.label}
+                                  </SelectItem>
+                                ))
+                              ) : (
+                                <div className="px-4 py-2 text-base text-muted-foreground">
+                                  {t("delegation.noEmployeesAvailable")}
+                                </div>
+                              )}
+                            </SelectContent>
+                          </Select>
+                        </FormControl>
+                        <FormMessage className="text-base text-red-500 mt-1" />
+                      </FormItem>
+                    )}
+                  />
+                  <DateField
+                    name="startDate"
+                    label={t("delegation.startDate")}
+                    control={form.control}
+                    isEthiopian={isPreferredLanguageAmharic}
+                  />
+                  <DateTimeField
+                    name="endDate"
+                    label={t("delegation.endDate")}
+                    control={form.control}
+                    isEthiopian={isPreferredLanguageAmharic}
+                    isEditing={isEditing}
+                  />
+                  {/* cc departments */}
+                  <FormMultiSelectField
+                    control={form.control}
+                    name="internalCC"
+                    label={t("addRecord.Internal CC")}
+                    options={listAllDepartmentResponse.map(
+                      (unit: OrganizationsPositions) => ({
+                        label: localizeName(unit.name),
+                        value:
+                          unit.id && unit.id.trim() !== ""
+                            ? unit.id
+                            : unit.key || "",
+                      }),
+                    )}
+                    placeholder={t("addRecord.Select Internal CC")}
+                    maxCount={5}
+                  />
+                </>
+              ) : (
+                <>
+                  {/* Position */}
+                  <FormField
+                    control={form.control}
+                    name="positionId"
+                    render={({ field }) => (
+                      <FormItem className="w-full">
+                        <FormLabel className="text-base font-medium text-gray-700 dark:text-gray-200">
+                          {t("delegation.delegatedPosition")}
+                        </FormLabel>
+                        <FormControl>
+                          <SingleSelect
+                            options={departmentsList}
+                            onValueChange={(value) =>
+                              handlePositionChange(
+                                value,
+                                field.value,
+                                field.onChange,
+                              )
+                            }
+                            value={field.value ?? ""}
+                            placeholder={t(
+                              "delegation.selectDelegatedPosition",
+                            )}
+                          />
+                        </FormControl>
+                        <FormMessage className="text-base text-red-500 mt-1" />
+                      </FormItem>
+                    )}
+                  />
+
+                  {/* Employee */}
+                  <FormField
+                    control={form.control}
+                    name="employeeId"
+                    render={({ field }) => (
+                      <FormItem className="w-full">
+                        <FormLabel className="text-base font-medium text-gray-700 dark:text-gray-200">
+                          {t("delegation.delegateTo")}
+                        </FormLabel>
+                        <FormControl>
+                          <Select
+                            onValueChange={handleEmployeeChange}
+                            value={field.value ?? ""}
+                            disabled={!form.watch("positionId")}>
+                            <SelectTrigger
+                              className={cn(
+                                "w-full border rounded-md px-3 py-2 text-base shadow-sm transition dark:text-gray-200",
+                                !form.watch("positionId")
+                                  ? "bg-gray-100 dark:bg-gray-700 cursor-not-allowed text-gray-400 dark:text-gray-500"
+                                  : "border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary dark:bg-gray-700",
+                              )}>
+                              <SelectValue
+                                placeholder={t("delegation.selectEmployee")}
+                                className="text-gray-500 dark:text-gray-400"
+                              />
+                            </SelectTrigger>
+                            <SelectContent className="max-h-60 overflow-y-auto border border-gray-200 dark:border-gray-600 rounded-md shadow-lg bg-white dark:bg-gray-800 z-50">
+                              {positionEmployees.length > 0 ? (
+                                positionEmployees.map((e) => (
+                                  <SelectItem
+                                    key={e.employeePositionId}
+                                    value={e.employeePositionId ?? e.value}
+                                    className="px-3 py-2 text-base hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer dark:text-gray-200">
+                                    {e.label}
+                                  </SelectItem>
+                                ))
+                              ) : (
+                                <div className="px-4 py-2 text-base text-muted-foreground">
+                                  {t("delegation.noEmployeesAvailable")}
+                                </div>
+                              )}
+                            </SelectContent>
+                          </Select>
+                        </FormControl>
+                        <FormMessage className="text-base text-red-500 mt-1" />
+                      </FormItem>
+                    )}
+                  />
+
+                  <DateField
+                    name="startDate"
+                    label={t("delegation.startDate")}
+                    control={form.control}
+                    isEthiopian={isPreferredLanguageAmharic}
+                  />
+                  <DateField
+                    name="endDate"
+                    label={t("delegation.endDate")}
+                    control={form.control}
+                    isEthiopian={isPreferredLanguageAmharic}
+                    minDate={form.watch("startDate")}
+                  />
+                  {/* cc departments */}
+                  <FormMultiSelectField
+                    control={form.control}
+                    name="internalCC"
+                    label={t("addRecord.Internal CC")}
+                    options={listAllDepartmentResponse.map(
+                      (unit: OrganizationsPositions) => ({
+                        label: localizeName(unit.name),
+                        value:
+                          unit.id && unit.id.trim() !== ""
+                            ? unit.id
+                            : unit.key || "",
+                      }),
+                    )}
+                    placeholder={t("addRecord.Select Internal CC")}
+                    maxCount={5}
+                  />
+                </>
+              )}
+              <div className="sm:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-x-8">
+                {uploadedTeeters.length > 0 && (
+                  <div>
+                    <FormLabel className="text-base font-medium text-gray-700 dark:text-gray-200">
+                      {t("ApprovalPage.selectTetter")}
+                    </FormLabel>
+                    <Controller
+                      name="stampId"
+                      control={form.control}
+                      rules={{ required: "Please select a tetter" }}
+                      render={({ field, fieldState }) => (
+                        <>
+                          <Select
+                            onValueChange={field.onChange}
+                            value={field.value}>
+                            <SelectTrigger className="dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600">
+                              <SelectValue
+                                placeholder={t("ApprovalPage.selectTetter")}
+                                className="dark:text-gray-400">
+                                {field.value
+                                  ? (teeterData?.presignedTeeters?.find(
+                                      (t) => t.id === field.value,
+                                    )?.name ?? t("ApprovalPage.selectTetter"))
+                                  : null}
+                              </SelectValue>
+                            </SelectTrigger>
+                            <SelectContent className="dark:bg-gray-800 dark:border-gray-600">
+                              {uploadedTeeters.map((teeter) => (
+                                <SelectItem
+                                  key={teeter.id}
+                                  value={teeter.id}
+                                  className="dark:text-gray-200 dark:hover:bg-gray-700">
+                                  {teeter.name || "Teeter"}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                          {fieldState.error && (
+                            <p className="text-sm text-red-500 mt-1">
+                              {fieldState.error.message}
+                            </p>
+                          )}
+                          {selectedTeeterUrl && (
+                            <div className="mt-2 border dark:border-gray-600 rounded p-2 dark:bg-gray-700">
+                              <p className="text-sm font-medium mb-1 dark:text-gray-200">
+                                {t("ApprovalPage.selectedStamp")}
+                              </p>
+                              <div className="relative h-30 w-30">
+                                <img
+                                  src={selectedTeeterUrl}
+                                  alt={t("ApprovalPage.selectedStamp")}
+                                  className="h-30 w-30 object-contain"
+                                />
+                              </div>
+                            </div>
+                          )}
+                        </>
+                      )}
+                    />
+                  </div>
+                )}
+
+                <div>
+                  <FormLabel className="text-base font-medium text-gray-700 dark:text-gray-200 sm:mb-11">
+                    {t("ApprovalPage.selectSignature")}
+                  </FormLabel>
+                  {uploadedSignatures.length <= 1 ? (
+                    <div className="mt-2 border dark:border-gray-600 rounded p-2 dark:bg-gray-700">
+                      <p className="text-sm font-medium mb-1 dark:text-gray-200">
+                        {t("ApprovalPage.selectedSignature")}
+                      </p>
+                      <div className="relative h-30 w-30">
+                        {selectedSignatureUrl ? (
+                          <img
+                            src={selectedSignatureUrl}
+                            alt={t("ApprovalPage.selectedSignature")}
+                            className="h-30 w-30 object-contain"
+                          />
+                        ) : (
+                          <p className="text-sm text-gray-500 dark:text-gray-400">
+                            {t(
+                              "ApprovalPage.noSignatureFound",
+                              "No signature found",
+                            )}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                  ) : (
+                    <Controller
+                      name="signatureId"
+                      control={form.control}
+                      rules={{ required: "Please select a signature" }}
+                      render={({ field, fieldState }) => (
+                        <>
+                          <Select
+                            onValueChange={field.onChange}
+                            value={field.value}>
+                            <SelectTrigger className="dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600">
+                              <SelectValue
+                                placeholder={t("ApprovalPage.selectSignature")}
+                                className="dark:text-gray-400"
+                              />
+                            </SelectTrigger>
+                            <SelectContent className="dark:bg-gray-800 dark:border-gray-600">
+                              {uploadedSignatures.map((signature) => (
+                                <SelectItem
+                                  key={signature.id}
+                                  value={signature.id}
+                                  className="dark:text-gray-200 dark:hover:bg-gray-700">
+                                  {signature.name || "Signature"}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                          {fieldState.error && (
+                            <p className="text-sm text-red-500 mt-1">
+                              {fieldState.error.message}
+                            </p>
+                          )}
+                          {selectedSignatureUrl && (
+                            <div className="mt-2 border dark:border-gray-600 rounded p-2 dark:bg-gray-700">
+                              <p className="text-sm font-medium mb-1 dark:text-gray-200">
+                                {t("ApprovalPage.selectedSignature")}
+                              </p>
+                              <div className="relative h-30 w-30">
+                                <img
+                                  src={selectedSignatureUrl}
+                                  alt={t("ApprovalPage.selectedSignature")}
+                                  className="h-30 w-30 object-contain"
+                                />
+                              </div>
+                            </div>
+                          )}
+                        </>
+                      )}
+                    />
+                  )}
+                </div>
+              </div>
+            </div>
+            <div className="flex flex-col-reverse sm:flex-row justify-end gap-3 pt-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => navigate("/record-management/delegation")}
+                className="w-full sm:w-auto">
+                {t("common.Cancel")}
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={handlePreview}
+                disabled={isLoadingPreview || !form.watch("employeeId") || !form.watch("startDate") || !form.watch("endDate")}
+                className="w-full sm:w-auto gap-2">
+                <Eye className="h-4 w-4" />
+                {t("delegation.preview", "Preview")}
+              </Button>
+            </div>
+
+            {/* PDF Preview Section */}
+            {isPreviewOpen && (
+              <div className="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-4 md:p-6 border border-gray-100 dark:border-gray-700 mt-6">
+                <div className="flex items-center justify-between mb-4">
+                  <h2 className="text-xl font-bold dark:text-gray-100">
+                    {t("delegation.previewDelegation", "Delegation Preview")}
+                  </h2>
+                  <button
+                    onClick={() => {
+                      setIsPreviewOpen(false);
+                      if (previewPdfUrl) {
+                        URL.revokeObjectURL(previewPdfUrl);
+                        setPreviewPdfUrl(null);
+                      }
+                    }}
+                    className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                  </button>
+                </div>
+
+                {isLoadingPreview ? (
+                  <div className="flex items-center justify-center h-96">
+                    <div className="flex flex-col items-center gap-2">
+                      <Loader2 className="h-8 w-8 animate-spin text-primary" />
+                      <p className="text-gray-500 dark:text-gray-400">
+                        {t("common.loading", "Loading...")}
+                      </p>
+                    </div>
+                  </div>
+                ) : previewPdfUrl ? (
+                  <>
+                    <div className="mb-4 border border-gray-200 dark:border-gray-600 rounded-lg overflow-auto" style={{ height: "calc(100vh - 300px)", minHeight: "600px" }}>
+                      <iframe
+                        src={previewPdfUrl}
+                        className="w-full h-full border-0"
+                      />
+                    </div>
+
+                    <div className="flex flex-col-reverse sm:flex-row justify-end gap-3 pt-4 border-t dark:border-gray-700">
+                      <Button
+                        type="button"
+                        variant="outline"
+                        onClick={() => {
+                          const link = document.createElement("a");
+                          link.href = previewPdfUrl;
+                          link.download = "delegation-preview.pdf";
+                          document.body.appendChild(link);
+                          link.click();
+                          document.body.removeChild(link);
+                        }}
+                        className="w-full sm:w-auto gap-2"
+                      >
+                        <Download className="h-4 w-4" />
+                        {t("common.download", "Download")}
+                      </Button>
+                      <Button
+                        type="submit"
+                        className="w-full sm:w-auto"
+                        variant={"addRecordBtn"}
+                      >
+                        {isEditing ? t("delegation.update") : t("delegation.save")}{" "}
+                        {t("delegation.title")}
+                      </Button>
+                    </div>
+                  </>
+                ) : (
+                  <div className="flex items-center justify-center h-96">
+                    <p className="text-gray-500 dark:text-gray-400">
+                      {t("common.nothingToDisplay", "Nothing to display")}
+                    </p>
+                  </div>
+                )}
+              </div>
+            )}
+          </form>
+        </Form>
+      </div>
+    </div>
+  );
+};
+
+export default DelegationForm;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/delegation/delegationFormSchema.ts b/apps/edr-freight-web/backoffice/src/record-management/components/delegation/delegationFormSchema.ts
new file mode 100644
index 000000000..fca86b941
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/delegation/delegationFormSchema.ts
@@ -0,0 +1,96 @@
+// delegationFormSchema.ts
+import * as z from "zod";
+import { t } from "i18next";
+
+const MIN_END_DATE_LEAD_TIME_MS = 2 * 60 * 1000;
+const MIN_START_DATE_LEAD_TIME_MS = 0;
+
+const validateStartDate = (startDate: Date, ctx: z.RefinementCtx) => {
+  const minimumAllowedDate = new Date(Date.now() + MIN_START_DATE_LEAD_TIME_MS);
+
+  if (startDate.getTime() < minimumAllowedDate.getTime()) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      path: ["startDate"],
+      message: t(
+        "delegation.startDateMinimumNowError",
+        "Start date must be now or in the future",
+      ),
+    });
+  }
+};
+
+const validateEndDate = (endDate: Date, ctx: z.RefinementCtx) => {
+  const minimumAllowedDate = new Date(Date.now() + MIN_END_DATE_LEAD_TIME_MS);
+
+  if (endDate.getTime() < minimumAllowedDate.getTime()) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      path: ["endDate"],
+      message: t(
+        "delegation.endDateMinimumFutureError",
+        "End date must be at least 2 minutes from now",
+      ),
+    });
+  }
+};
+
+const validateEndAfterStart = (
+  startDate: Date | undefined,
+  endDate: Date,
+  ctx: z.RefinementCtx,
+) => {
+  if (
+    startDate instanceof Date &&
+    !Number.isNaN(startDate.getTime()) &&
+    endDate instanceof Date &&
+    !Number.isNaN(endDate.getTime()) &&
+    endDate.getTime() <= startDate.getTime()
+  ) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      path: ["endDate"],
+      message: t(
+        "delegation.endDateBeforeStartError",
+        "End date must be after start date",
+      ),
+    });
+  }
+};
+
+export const delegationFormSchema = z
+  .object({
+    positionId: z.string().min(1, "Position is required"),
+    employeeId: z.string().min(1, "Delegated employee is required"),
+    startDate: z.date(),
+    endDate: z.date(),
+    internalCC: z.array(z.string()).optional(),
+    signatureId: z.string().optional(),
+    stampId: z.string().optional(),
+    language: z.enum(["en", "am"]).optional(),
+    locale: z.enum(["en", "am"]).optional(),
+    // delegationLetterId: z.string().optional(),
+    //recordType: z.enum(["outgoing", "incoming"]).optional(),
+  })
+  .superRefine((values, ctx) => {
+    validateStartDate(values.startDate, ctx);
+    validateEndDate(values.endDate, ctx);
+    validateEndAfterStart(values.startDate, values.endDate, ctx);
+  });
+
+export const editdelegationFormSchema = z
+  .object({
+    positionId: z.string().min(1, "Position is required"),
+    employeeId: z.string().min(1, "Delegated employee is required"),
+    endDate: z.date(),
+    startDate: z.date(),
+    internalCC: z.array(z.string()).optional(),
+    stampId: z.string().optional(),
+    signatureId: z.string().optional(),
+    language: z.enum(["en", "am"]).optional(),
+  })
+  .superRefine((values, ctx) => {
+    validateStartDate(values.startDate, ctx);
+    validateEndDate(values.endDate, ctx);
+    validateEndAfterStart(values.startDate, values.endDate, ctx);
+  });
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/delegation/delegations.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/delegation/delegations.tsx
new file mode 100644
index 000000000..4167a87fe
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/delegation/delegations.tsx
@@ -0,0 +1,229 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { CirclePlus } from "lucide-react";
+
+import { Button } from "@/shared/common/ui/button";
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import Loader from "@/record-management/components/Loader/loader";
+import { DelegationsColumns } from "./DelegationColumns";
+import { MydelegateeColumn } from "./MydelegateeColumn";
+import { useDelegations } from "@/record-management/components/hooks/useDelegations";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+import { useCanDelegate } from "@/record-management/components/hooks/useCanDelegate";
+import {
+  CombinedFilterBar,
+  CombinedFilterField,
+} from "@/shared/components/filters/CombinedFilterBar";
+import { useCombinedFilters } from "@/shared/hooks/useCombinedFilters";
+import { cleanFilterParams, FilterParams } from "@/shared/utils/filterParams";
+import { useState } from "react";
+
+const Delegations = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [statusFilter, setStatusFilter] = React.useState("myDelegation");
+  const [pageIndex, setPageIndex] = React.useState(0);
+  const pageSize = 10;
+
+  const myDelegationFilters = useCombinedFilters<FilterParams>();
+  const myDelegateeFilters = useCombinedFilters<FilterParams>();
+  const activeFilterStore =
+    statusFilter === "myDelegation" ? myDelegationFilters : myDelegateeFilters;
+  const combinedFilters = useCombinedFilters<FilterParams>();
+  const [liveSearch, setLiveSearch] = useState<{
+    key: string;
+    value: string;
+  } | null>(null); // ← add
+
+  const handleLiveSearch = (key: string, value: string) => {
+    if (!key || !value) {
+      setLiveSearch(null);
+      return;
+    }
+    setLiveSearch({ key, value });
+  };
+  const filterFields = React.useMemo<CombinedFilterField[]>(
+    () =>
+      statusFilter === "myDelegation"
+        ? [
+            {
+              key: "delegatedPosition",
+              label: t("delegation.delegatedPosition"),
+              type: "text",
+            },
+            {
+              key: "delegatedEmployee",
+              label: t("delegation.delegatedEmployee"),
+              type: "text",
+            },
+            {
+              key: "startDate",
+              label: t("delegation.startDate"),
+              type: "dateRange",
+              fromKey: "fromStartDate",
+              toKey: "endDate",
+            },
+          ]
+        : [
+            {
+              key: "delegatorPosition",
+              label: t("delegation.delegatedPosition"),
+              type: "text",
+            },
+            {
+              key: "delegatorEmployee",
+              label: t("delegation.delegatedEmployee"),
+              type: "text",
+            },
+            {
+              key: "startDate",
+              label: t("delegation.startDate"),
+              type: "dateRange",
+              fromKey: "fromStartDate",
+              toKey: "endDate",
+            },
+          ],
+    [statusFilter, t],
+  );
+
+  const filterParams = React.useMemo(() => {
+    const base = {
+      skip: pageIndex * pageSize,
+      take: pageSize,
+      orderBy: "employeePosition.createdAt:DESC",
+      to: "",
+      ...(statusFilter === "myDelegation"
+        ? myDelegationFilters.filters
+        : myDelegateeFilters.filters),
+    };
+
+    const cleaned = cleanFilterParams(base);
+
+    return liveSearch
+      ? { ...cleaned, [liveSearch.key]: liveSearch.value }
+      : cleaned;
+  }, [
+    myDelegateeFilters.filters,
+    myDelegationFilters.filters,
+    pageIndex,
+    statusFilter,
+    liveSearch,
+  ]);
+  const { data: canDelegateResponse } = useCanDelegate();
+  const canDelegate = canDelegateResponse?.status === true;
+
+  const { delegations, isLoading, isError, refetch, myDelegated } =
+    useDelegations(filterParams);
+
+  const activeDelegationMessage = t(
+    "delegation.activeDelegationExists",
+    "active delegation exists and either edit the active delegation or delete and create again",
+  );
+
+  const statusOptions = React.useMemo(
+    () => [
+      { value: "myDelegation", label: t("delegation.myDelegations") },
+      { value: "myDelegatee", label: t("delegation.myDelegatee") },
+    ],
+    [t],
+  );
+
+  return (
+    <div className="w-full">
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 w-full">
+        <h4 className="text-xl font-medium mb-5">{t("delegation.title")}</h4>
+
+        <div className="flex flex-col items-end gap-2 w-full sm:w-auto">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span tabIndex={!canDelegate ? 0 : -1}>
+                <Button
+                  variant="addRecordBtn"
+                  size="default"
+                  disabled={!canDelegate}
+                  onClick={() => navigate("/record-management/delegation/new")}>
+                  <CirclePlus className="h-4 w-6 mr-2" />
+                  {t("delegation.addDelegation")}
+                </Button>
+              </span>
+            </TooltipTrigger>
+            {!canDelegate && (
+              <TooltipContent side="bottom" className="max-w-xs">
+                {activeDelegationMessage}
+              </TooltipContent>
+            )}
+          </Tooltip>
+          <CombinedFilterBar
+            fields={filterFields}
+            filters={activeFilterStore.filters}
+            setFilter={activeFilterStore.setFilter}
+            setFilters={activeFilterStore.setFilters}
+            removeFilter={activeFilterStore.removeFilter}
+            removeFilters={activeFilterStore.removeFilters}
+            onFilterChange={() => setPageIndex(0)}
+            onLiveSearch={handleLiveSearch}
+          />
+        </div>
+      </div>
+
+      {/* Status Filter Row */}
+      <div className="flex flex-wrap gap-2">
+        {statusOptions.map((opt) => (
+          <Button
+            key={opt.value}
+            variant={statusFilter === opt.value ? "linkActive" : "link"}
+            onClick={() => {
+              setStatusFilter(opt.value);
+              setPageIndex(0);
+            }}
+            className="rounded-md text-base">
+            {opt.label}
+          </Button>
+        ))}
+      </div>
+
+      {/* Table */}
+      {isLoading ? (
+        <Loader />
+      ) : isError ? (
+        <p className="text-destructive">
+          {t("userRecord.Error loading records.")}
+        </p>
+      ) : (
+        <AdvancedTable
+          columns={
+            statusFilter === "myDelegation"
+              ? DelegationsColumns(refetch)
+              : MydelegateeColumn(refetch)
+          }
+          data={
+            statusFilter === "myDelegation"
+              ? delegations?.data || []
+              : myDelegated?.data || []
+          }
+          tableName={
+            statusFilter === "myDelegation" ? "Delegation" : "Delegatee"
+          }
+          toolBarPosition="right"
+          itemCount={
+            statusFilter === "myDelegation"
+              ? delegations?.count || 0
+              : myDelegated?.count || 0
+          }
+          pageIndex={pageIndex}
+          onPageChange={setPageIndex}
+          nextFunction={() => setPageIndex(pageIndex + 1)}
+          prevFunction={() => setPageIndex(Math.max(0, pageIndex - 1))}
+          refresh={refetch}
+        />
+      )}
+    </div>
+  );
+};
+
+export default Delegations;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/delegation/deleteDelegation.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/delegation/deleteDelegation.tsx
new file mode 100644
index 000000000..b21833dd2
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/delegation/deleteDelegation.tsx
@@ -0,0 +1,93 @@
+import { useCallback } from "react";
+import { toast } from "sonner";
+import EnhancedDynamicModal from "@/record-management/common/EnhancedDynamicModal";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useDelegations } from "../hooks/useDelegations";
+
+interface DeleteDelegationProps {
+  delegateId: string;
+  onSuccess: () => void;
+  onClose: () => void;
+}
+
+const DeleteDelegation: React.FC<DeleteDelegationProps> = ({
+  delegateId,
+  onSuccess,
+  onClose,
+}) => {
+  const { deleteDelegationAsync, refetch } = useDelegations();
+  const { t } = useTranslation();
+
+  const handleDelete = useCallback(
+    async (data?: Record<string, unknown>) => {
+      if (!delegateId) throw new Error("Invalid Delegation ID");
+      const reason = String(data?.reason ?? "").trim();
+      if (!reason) {
+        toast.error(
+          t(
+            "delegation.deleteReasonRequired",
+            "Please provide a reason for deletion.",
+          ),
+        );
+        throw new Error("reason required");
+      }
+
+      await deleteDelegationAsync({
+          id: delegateId,
+          comment: reason,
+        });
+      refetch();
+      onSuccess();
+    },
+    [delegateId, deleteDelegationAsync, refetch, onSuccess, t],
+  );
+
+  return (
+    <EnhancedDynamicModal
+      open={true}
+      onClose={onClose}
+      title={t("userRecord.Delete Delegation")}
+      description={t(
+        "delegation.deleteDescription",
+        "Provide a reason for ending this delegation.",
+      )}
+      actionConfig={{
+        type: "delete",
+        onAction: handleDelete,
+        confirmText: t("userRecord.Confirm Delete"),
+        confirmVariant: "destructive",
+      }}
+      formConfig={{
+        fields: [
+          {
+            name: "reason",
+            label: t("delegation.deleteReasonLabel", "Reason"),
+            type: "textarea",
+            placeholder: t(
+              "delegation.deleteReasonPlaceholder",
+              "Why are you ending this delegation?",
+            ),
+            required: true,
+            rules: {
+              required: t(
+                "delegation.deleteReasonRequired",
+                "Please provide a reason for deletion.",
+              ),
+              validate: (value: string) =>
+                value && value.trim().length > 0
+                  ? true
+                  : t(
+                      "delegation.deleteReasonRequired",
+                      "Please provide a reason for deletion.",
+                    ),
+            },
+          },
+        ],
+        defaultValues: { reason: "" },
+      }}
+    />
+  );
+};
+
+export default DeleteDelegation;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/delegation/editDelegation.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/delegation/editDelegation.tsx
new file mode 100644
index 000000000..4ea19916e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/delegation/editDelegation.tsx
@@ -0,0 +1,223 @@
+import { useEffect, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+
+import DelegationForm from "@/record-management/components/delegation/delegationForm";
+
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { useDelegations } from "@/record-management/components/hooks/useDelegations";
+import { editdelegationFormSchema } from "./delegationFormSchema";
+import { toast } from "sonner";
+import { useSignatureListWithPresigned } from "../hooks/useSignatureAndTeeterWithPresigned";
+import { useAuthUser } from "@/record-management/hooks/useAuthUser";
+import useSettings from "../hooks/useSettings";
+import { DelegatePositionDto } from "@/record-management/dto/delegation/delegationDto";
+import { useTranslation } from "react-i18next";
+import {
+  fetchRecordContentByRecordId,
+  RecordContentOutgoingHistory,
+} from "@/record-management/services/api/userRecordService";
+
+type DelegationFormValues = z.infer<typeof editdelegationFormSchema>;
+
+const EditDelegationPage = () => {
+  const { id } = useParams<{ id: string }>();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const baseParams = {
+    skip: 0,
+    take: 200,
+    orderBy: "employeePosition.createdAt:DESC",
+  };
+  const { editDelegation, delegations, refetch } = useDelegations(baseParams);
+  const { userDetails } = useAuthUser();
+  const employeeId = userDetails?.employee?.[0]?.id ?? "";
+  const { data: signatureData } = useSignatureListWithPresigned(employeeId);
+  const { allDepartmentUnits } = useSettings();
+  const { t } = useTranslation();
+  const routeDelegation = (
+    location.state as { delegation?: DelegatePositionDto } | null
+  )?.delegation;
+  const fetchedDelegation = delegations?.data?.find((e) => e.id === id);
+  const delegation =
+    routeDelegation?.id === id ? routeDelegation : fetchedDelegation;
+  const [resolvedInternalCC, setResolvedInternalCC] = useState<string[]>([]);
+  const [latestOutgoingHistory, setLatestOutgoingHistory] =
+    useState<RecordContentOutgoingHistory | null>(null);
+
+  const StartDate = delegation?.startDate;
+  const ParsedStartDate = useMemo(
+    () => (delegation?.startDate ? new Date(delegation.startDate) : null),
+    [delegation?.startDate],
+  );
+  const EndDate = useMemo(
+    () => (delegation?.endDate ? new Date(delegation.endDate) : null),
+    [delegation?.endDate],
+  );
+  const internalCC = delegation?.internalCC;
+  const stampId = delegation?.stampId;
+  const AmharicStartDate = delegation?.amharicStartDate;
+  const AmharicEndDate = delegation?.amharicEndDate;
+  const delegationEmployeePosition = (delegation as any)?.employeePosition;
+  const selectedEmployeeId =
+    delegation?.employeePositionId ||
+    delegationEmployeePosition?.id ||
+    delegation?.employee?.employeePositions?.find(
+      (employeePosition: any) =>
+        employeePosition?.position?.id === delegation?.delegateePosition?.id,
+    )?.id ||
+    delegation?.employee?.employeePositions?.[0]?.id ||
+    delegation?.employee?.id ||
+    "";
+  const form = useForm<DelegationFormValues>({
+    resolver: zodResolver(editdelegationFormSchema),
+    defaultValues: {
+      positionId: delegation?.positionId || "",
+      employeeId: selectedEmployeeId,
+      startDate: ParsedStartDate || new Date(),
+      endDate: EndDate || new Date(),
+      internalCC: resolvedInternalCC || internalCC || [],
+      stampId: stampId || "",
+      language: delegation?.delegationLetter?.preferredLanguage || "am",
+    },
+  });
+
+  useEffect(() => {
+    if (!delegation) return;
+
+    form.setValue("positionId", delegation.delegateePosition?.id || "", {
+      shouldDirty: false,
+    });
+    form.setValue("employeeId", selectedEmployeeId, {
+      shouldDirty: false,
+    });
+    form.setValue("startDate", ParsedStartDate || new Date(), {
+      shouldDirty: false,
+    });
+    form.setValue("endDate", EndDate || new Date(), {
+      shouldDirty: false,
+    });
+    form.setValue("stampId", stampId || "", {
+      shouldDirty: false,
+    });
+    form.setValue(
+      "language",
+      delegation?.delegationLetter?.preferredLanguage || "am",
+      {
+        shouldDirty: false,
+      },
+    );
+  }, [delegation, form, ParsedStartDate, EndDate, stampId, selectedEmployeeId]);
+
+  useEffect(() => {
+    const letterId =
+      delegation?.delegationLetter?.id || delegation?.delegationLetterId?.id;
+
+    if (!letterId) {
+      const fallbackInternalCC = internalCC || [];
+      setLatestOutgoingHistory(null);
+      setResolvedInternalCC(fallbackInternalCC);
+      form.setValue("internalCC", fallbackInternalCC, {
+        shouldDirty: false,
+      });
+      return;
+    }
+
+    const loadDelegationInternalCC = async () => {
+      try {
+        const recordContent = await fetchRecordContentByRecordId(letterId);
+        const topOutgoingHistory =
+          recordContent?.outgoingHistories?.[0] ?? null;
+        const nextInternalCC = (recordContent?.ccPositions ?? [])
+          .map((cc: any) => cc?.position?.id)
+          .filter((ccId: unknown): ccId is string => typeof ccId === "string");
+
+        const fallbackInternalCC = internalCC || [];
+        const resolved =
+          nextInternalCC.length > 0 ? nextInternalCC : fallbackInternalCC;
+        setLatestOutgoingHistory(topOutgoingHistory);
+        setResolvedInternalCC(resolved);
+        form.setValue("internalCC", resolved, {
+          shouldDirty: false,
+        });
+      } catch {
+        const fallbackInternalCC = internalCC || [];
+        setLatestOutgoingHistory(null);
+        setResolvedInternalCC(fallbackInternalCC);
+        form.setValue("internalCC", fallbackInternalCC, {
+          shouldDirty: false,
+        });
+      }
+    };
+
+    loadDelegationInternalCC();
+  }, [delegation, form, internalCC]);
+
+  const handleEditDelegation = (values: DelegationFormValues) => {
+    const departmentUnitByValue = new Map(
+      allDepartmentUnits.map((unit) => [
+        unit.id && unit.id.trim() !== "" ? unit.id : unit.key || "",
+        unit,
+      ]),
+    );
+    const internalCCValues =
+      values.internalCC
+        ?.map((selectedId) => departmentUnitByValue.get(selectedId))
+        .filter((unit): unit is (typeof allDepartmentUnits)[number] =>
+          Boolean(unit),
+        ) ?? [];
+    editDelegation(
+      {
+        ...values,
+        id: delegation?.delegationLetter?.id || "",
+        startDate: values.startDate,
+        endDate: values.endDate,
+        positionId: values.positionId,
+        employeeId: values.employeeId,
+        // Reverse so the BE's render-time reversal lands back on selection
+        // order — mirrors the workaround applied in add/edit user records.
+        internalCC: [
+          ...(internalCCValues?.slice().map((c) => ({
+            unitId: c.unitId!,
+            positionId: c.id!,
+            type: "internal" as const,
+          })) ?? []),
+        ],
+        stampId: values.stampId,
+        signatureId:
+          signatureData?.items?.find(
+            (item) => item.isCurrent && item.uploadedSuccessfully,
+          )?.id || "",
+        language: values.language ?? "am",
+      },
+      {
+        onSuccess: () => {
+          navigate("/record-management/delegation");
+          toast.success(t("delegation.updatedSuccess"));
+          refetch();
+        },
+      },
+    );
+  };
+
+  return (
+    <DelegationForm
+      formInstance={form}
+      onSubmit={handleEditDelegation}
+      isEditing={true}
+      selectedPositionId={delegation?.delegateePosition?.id || ""}
+      selectedPositionName={delegation?.delegateePosition?.name}
+      selectedEmployeeId={selectedEmployeeId}
+      startDate={StartDate}
+      endDate={EndDate}
+      startAmDate={AmharicStartDate}
+      endAmDate={AmharicEndDate}
+      internalCC={resolvedInternalCC}
+      stampId={stampId || ""}
+      latestOutgoingHistory={latestOutgoingHistory ?? undefined}
+    />
+  );
+};
+
+export default EditDelegationPage;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/delegation/letterViewer.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/delegation/letterViewer.tsx
new file mode 100644
index 000000000..5ec86e13e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/delegation/letterViewer.tsx
@@ -0,0 +1,312 @@
+// function LetterViewer() {
+//     return (
+//        {/* Record Details Display */}
+//             {selectedLetterId && (
+//               <div className="mt-6 space-y-4">
+//                 <h3 className="text-lg font-semibold text-gray-800">
+//                   {t("delegation.letterDetails")}
+//                 </h3>
+
+//                 {isLoadingRecord ? (
+//                   <div className="flex items-center justify-center py-8">
+//                     <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+//                     <span className="ml-2">{t("common.loading")}</span>
+//                   </div>
+//                 ) : selectedRecord ? (
+//                   <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
+
+//                     <Card className="xl:col-span-1">
+//                       <CardHeader>
+//                         <CardTitle className="flex items-center gap-2">
+//                           <FileText className="h-5 w-5" />
+//                           {t("delegation.recordInformation")}
+//                         </CardTitle>
+//                       </CardHeader>
+//                       <CardContent className="space-y-4">
+//                         <div className="border-b border-gray-100 pb-3">
+//                           <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
+//                             {t("common.referenceNumber")}
+//                           </label>
+//                           <p className="text-sm text-gray-900 mt-1 font-medium">
+//                             {selectedRecord.referenceNumber ||
+//                               t("common.notAvailable")}
+//                           </p>
+//                         </div>
+
+//                         <div className="border-b border-gray-100 pb-3">
+//                           <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
+//                             {t("common.subject")}
+//                           </label>
+//                           <p className="text-sm text-gray-900 mt-1 line-clamp-2">
+//                             {selectedRecord.content?.[0]?.subject ||
+//                               t("common.notAvailable")}
+//                           </p>
+//                         </div>
+
+//                         {selectedRecord.content?.[0]?.receiverPositions &&
+//                           selectedRecord.content[0].receiverPositions.length >
+//                           0 && (
+//                             <div className="border-b border-gray-100 pb-3">
+//                               <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
+//                                 {t("delegation.receiverPositions")}
+//                               </label>
+//                               <div className="text-sm text-gray-900 mt-1">
+//                                 {selectedRecord.content[0].receiverPositions.map(
+//                                   (receiver, index) => (
+//                                     <span
+//                                       key={receiver.id}
+//                                       className="inline-block">
+//                                       <span className="bg-blue-50 text-blue-700 px-2 py-1 rounded-md text-xs mr-1 mb-1 inline-block">
+//                                         {localizedName(
+//                                           receiver?.position?.name
+//                                         ) || t("common.notAvailable")}
+//                                       </span>
+//                                     </span>
+//                                   )
+//                                 )}
+//                               </div>
+//                             </div>
+//                           )}
+
+//                         {selectedRecord.initiator && (
+//                           <div className="border-b border-gray-100 pb-3">
+//                             <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
+//                               {t("delegation.initiator")}
+//                             </label>
+//                             <p className="text-sm text-gray-900 mt-1">
+//                               {localizedName(selectedRecord?.initiator?.name) ||
+//                                 t("common.notAvailable")}
+//                             </p>
+//                           </div>
+//                         )}
+
+//                         <div className="border-b border-gray-100 pb-3">
+//                           <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
+//                             {t("common.status")}
+//                           </label>
+//                           <div className="mt-1">
+//                             <Badge
+//                               variant={
+//                                 selectedRecord.statusKey === "Dispatched"
+//                                   ? "default"
+//                                   : selectedRecord.statusKey === "Draft"
+//                                     ? "secondary"
+//                                     : selectedRecord.statusKey === "Submitted"
+//                                       ? "outline"
+//                                       : "secondary"
+//                               }>
+//                               {t(
+//                                 `status.${selectedRecord.statusKey.toLowerCase()}`,
+//                                 selectedRecord.statusKey
+//                               )}
+//                             </Badge>
+//                           </div>
+//                         </div>
+
+//                         <div className="border-b border-gray-100 pb-3">
+//                           <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
+//                             {t("common.createdDate")}
+//                           </label>
+//                           <p className="text-sm text-gray-900 mt-1">
+//                             {selectedRecord.createdAt
+//                               ? formatDate(
+//                                 selectedRecord.createdAt,
+//                                 lang === "am" ? "am-ET" : "en-US"
+//                               )
+//                               : t("common.notAvailable")}
+//                           </p>
+//                         </div>
+
+//                         {selectedRecord.dispatchedDate && (
+//                           <div>
+//                             <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
+//                               {t("common.dispatchedDate")}
+//                             </label>
+//                             <p className="text-sm text-gray-900 mt-1">
+//                               {formatDate(
+//                                 selectedRecord.dispatchedDate,
+//                                 lang === "am" ? "am-ET" : "en-US"
+//                               )}
+//                             </p>
+//                           </div>
+//                         )}
+//                       </CardContent>
+//                     </Card>
+
+//                     {/* PDF Viewer */}
+//                     <Card className="lg:col-span-2">
+//                       <CardHeader>
+//                         <CardTitle className="flex items-center gap-2">
+//                           <Eye className="h-5 w-5" />
+//                           {t("delegation.letterPreview")}
+//                         </CardTitle>
+//                       </CardHeader>
+//                       <CardContent>
+//                         {isLoadingPdf ? (
+//                           <div className="flex items-center justify-center h-[600px] bg-gray-50 rounded-md">
+//                             <div className="text-center">
+//                               <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-2"></div>
+//                               <p className="text-sm text-gray-500">
+//                                 {t("delegation.loadingPdf")}
+//                               </p>
+//                             </div>
+//                           </div>
+//                         ) : pdfUrl ? (
+//                           <div className="space-y-3">
+//                             <iframe
+//                               src={pdfUrl}
+//                               className="w-full h-[600px] border rounded-md"
+//                               title={t("delegation.letterPreview")}
+//                               onError={() =>
+//                                 setPdfError(t("delegation.pdfLoadError"))
+//                               }
+//                             />
+//                             <Button
+//                               type="button"
+//                               variant="outline"
+//                               size="sm"
+//                               onClick={() => window.open(pdfUrl, "_blank")}
+//                               className="w-full">
+//                               <Eye className="h-4 w-4 mr-2" />
+//                               {t("delegation.openInNewTab")}
+//                             </Button>
+//                           </div>
+//                         ) : (
+//                           <div className="flex items-center justify-center h-[600px] bg-gray-50 rounded-md">
+//                             <div className="text-center">
+//                               <FileText className="h-12 w-12 text-gray-400 mx-auto mb-2" />
+//                               <p className="text-sm text-gray-500">
+//                                 {pdfError || t("delegation.pdfNotAvailable")}
+//                               </p>
+//                               {pdfError &&
+//                                 pdfError !==
+//                                 t("delegation.pdfNotAvailable") && (
+//                                   <Button
+//                                     type="button"
+//                                     variant="outline"
+//                                     size="sm"
+//                                     onClick={() => {
+//                                       // Retry PDF loading
+//                                       const fetchPdf = async () => {
+//                                         if (
+//                                           selectedRecord &&
+//                                           selectedLetterId
+//                                         ) {
+//                                           setIsLoadingPdf(true);
+//                                           setPdfError(null);
+//                                           try {
+//                                             const isDispatched =
+//                                               selectedRecord.statusKey ===
+//                                               "Dispatched";
+//                                             const isDraft = [
+//                                               "Draft",
+//                                               "Adjustment",
+//                                             ].includes(
+//                                               selectedRecord.statusKey
+//                                             );
+//                                             let pdfResponse;
+
+//                                             if (isDispatched) {
+//                                               // For dispatched records, use fetchLetterById (returns MinIO presigned URL)
+//                                               pdfResponse =
+//                                                 await fetchLetterById(
+//                                                   selectedLetterId
+//                                                 );
+//                                             } else if (isDraft) {
+//                                               // For draft/adjustment records, use preview endpoint (returns ArrayBuffer)
+//                                               pdfResponse =
+//                                                 await fetchLetterPreview(
+//                                                   selectedLetterId
+//                                                 );
+//                                             } else {
+//                                               // For other statuses, try fetchLetterById first
+//                                               pdfResponse =
+//                                                 await fetchLetterById(
+//                                                   selectedLetterId
+//                                                 );
+//                                             }
+
+//                                             // Handle different response types
+//                                             let finalPdfUrl = null;
+
+//                                             if (pdfResponse) {
+//                                               if (
+//                                                 pdfResponse instanceof
+//                                                 ArrayBuffer
+//                                               ) {
+//                                                 // Handle ArrayBuffer response (from preview endpoint)
+//                                                 if (
+//                                                   pdfResponse.byteLength > 0
+//                                                 ) {
+//                                                   const blob = new Blob(
+//                                                     [pdfResponse],
+//                                                     { type: "application/pdf" }
+//                                                   );
+//                                                   finalPdfUrl =
+//                                                     URL.createObjectURL(blob);
+//                                                 }
+//                                               } else if (
+//                                                 typeof pdfResponse ===
+//                                                 "object" &&
+//                                                 pdfResponse.presigned
+//                                               ) {
+//                                                 // Handle MinIO presigned URL response
+//                                                 finalPdfUrl =
+//                                                   pdfResponse.presigned;
+//                                               } else if (
+//                                                 typeof pdfResponse ===
+//                                                 "string" &&
+//                                                 pdfResponse.startsWith("http")
+//                                               ) {
+//                                                 // Handle direct URL response
+//                                                 finalPdfUrl = pdfResponse;
+//                                               }
+//                                             }
+
+//                                             if (finalPdfUrl) {
+//                                               setPdfUrl(finalPdfUrl);
+//                                               setPdfError(null);
+//                                             } else {
+//                                               setPdfError(
+//                                                 t("delegation.pdfNotAvailable")
+//                                               );
+//                                             }
+//                                           } catch (error: any) {
+//                                             setPdfError(
+//                                               t("delegation.pdfLoadError")
+//                                             );
+//                                           } finally {
+//                                             setIsLoadingPdf(false);
+//                                           }
+//                                         }
+//                                       };
+//                                       fetchPdf();
+//                                     }}
+//                                     className="mt-2">
+//                                     {t("delegation.retryPdf")}
+//                                   </Button>
+//                                 )}
+//                             </div>
+//                           </div>
+//                         )}
+//                       </CardContent>
+//                     </Card>
+//                   </div>
+//                 ) : (
+//                   <Card>
+//                     <CardContent className="py-8">
+//                       <div className="text-center">
+//                         <FileText className="h-12 w-12 text-gray-400 mx-auto mb-2" />
+//                         <p className="text-sm text-gray-500">
+//                           {t("delegation.recordNotFound")}
+//                         </p>
+//                       </div>
+//                     </CardContent>
+//                   </Card>
+//                 )}
+//               </div>
+//             )}
+//     );
+// }
+
+// export default LetterViewer;
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/delegation/viewDelegationLetter.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/delegation/viewDelegationLetter.tsx
new file mode 100644
index 000000000..87c5ec0c7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/delegation/viewDelegationLetter.tsx
@@ -0,0 +1,104 @@
+import { useEffect, useRef } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { useLocation, useParams } from "react-router-dom";
+
+import LetterViewer from "../common/letterViewer";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { fetchRecordContentByRecordId } from "@/record-management/services/api/userRecordService";
+import { DelegatePositionDto } from "@/record-management/dto/delegation/delegationDto";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { CommentCard } from "@/record-management/common/WorkflowCommentHistory";
+
+const DelegationLetterView = () => {
+  const { id } = useParams<{ id: string }>();
+  const location = useLocation();
+  const { t } = useTranslation();
+  const localizeName = useLocalizedName();
+
+  const { handleError } = useErrorHandler(t);
+  const routeState = location.state as {
+    delegation?: DelegatePositionDto;
+    delegationType?: "delegator" | "delegatee";
+  } | null;
+
+  const delegation = routeState?.delegation;
+  const terminationReason = delegation?.terminationReason ?? null;
+
+  const { data, error } = useQuery({
+    queryKey: ["delegation-latest-outgoing-history", id],
+    queryFn: () => fetchRecordContentByRecordId(id!),
+    enabled: Boolean(id),
+
+    staleTime: 0,
+    refetchOnMount: true,
+    refetchOnWindowFocus: true,
+    refetchOnReconnect: true,
+  });
+
+  const previousErrorRef = useRef<unknown>(null);
+  useEffect(() => {
+    if (error && error !== previousErrorRef.current) {
+      previousErrorRef.current = error;
+      handleError(error);
+    }
+  }, [error, handleError]);
+
+  const latestOutgoingHistory = data?.outgoingHistories?.[0];
+  const delegationActionRowData = delegation
+    ? {
+        ...delegation,
+        delegationType: routeState?.delegationType,
+        comment: latestOutgoingHistory?.comment,
+        createdAt: latestOutgoingHistory?.createdAt,
+        employeePosition: latestOutgoingHistory?.employeePosition,
+        assigner:
+          localizeName(
+            latestOutgoingHistory?.employeePosition?.employee?.name as
+              | { en: string; am: string }
+              | undefined,
+          ) || "",
+      }
+    : undefined;
+
+  const terminatedEmployeeName =
+    (delegation?.terminationReason?.terminatorEmployeePosition?.employee
+      ?.name &&
+      (localizeName(
+        delegation.terminationReason.terminatorEmployeePosition.employee.name,
+      ) ||
+        delegation.terminationReason.terminatorEmployeePosition.employee.name
+          .en ||
+        delegation.terminationReason.terminatorEmployeePosition.employee.name
+          .am)) ||
+    t("common.unknownUser", "Unknown user");
+
+  const terminationBanner = terminationReason ? (
+    <div className="max-w-8xl mx-none px-6 pt-6">
+      <h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-2">
+        {t("delegation.terminationDetail", "Termination Detail")}
+      </h3>
+      <CommentCard
+        createdAt={terminationReason.terminatedAt}
+        comment={terminationReason.comment}
+        assignerName={terminatedEmployeeName}
+        variant="secondary"
+      />
+    </div>
+  ) : null;
+
+  return (
+    <>
+      {terminationBanner}
+      <LetterViewer
+        backurl="/record-management/delegation"
+        type="delegation"
+        shouldFetchInstance={false}
+        actions="DelegationRecordActions"
+        actionRowData={delegationActionRowData}
+      />
+    </>
+  );
+};
+
+export default DelegationLetterView;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useApprovalTasks.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useApprovalTasks.ts
new file mode 100644
index 000000000..42e70cabb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useApprovalTasks.ts
@@ -0,0 +1,237 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { useEffect, useRef } from "react";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import {
+  sendToRO,
+  submitRecord,
+  sendBack,
+  goToNext,
+  submitAndSendToRo,
+  fetchApprovalTasks,
+  ApprovalRecordQueryParams,
+  makeUnderReview,
+  fetchMyRecordsApprovals,
+  fetchMyProcessedRecordsApprovals,
+} from "@/record-management/services/api/approvalService";
+
+export const useApprovalTasks = (queryParams?: ApprovalRecordQueryParams) => {
+  // Explicitly type your options object using UseQueryOptions
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  const { data, isLoading, isError, error, refetch } = useQuery({
+    queryKey: ["approvalRecord", queryParams],
+    queryFn: ({ queryKey }) => {
+      const [_key, params] = queryKey as [string, ApprovalRecordQueryParams];
+      return fetchApprovalTasks(params);
+    },
+    staleTime: 0,
+    placeholderData: { count: 0, items: [] },
+  });
+
+  // Surface list-fetch failures via the centralized error handler.
+  const prevApprovalErrorRef = useRef<unknown>(null);
+  useEffect(() => {
+    if (error && error !== prevApprovalErrorRef.current) {
+      prevApprovalErrorRef.current = error;
+      handleError(error);
+    }
+  }, [error, handleError]);
+
+  const approveRecordMutation = useMutation({
+    mutationFn: async ({
+      taskId,
+      stampId,
+      signatureId,
+      note,
+    }: {
+      taskId: string;
+      stampId: string;
+      signatureId: string;
+      note: string;
+    }) => {
+      return await sendToRO(taskId, stampId, signatureId, note);
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const submitRecordMutation = useMutation({
+    mutationFn: async ({
+      id,
+      delegatorId,
+    }: {
+      id: string;
+      delegatorId?: string;
+    }) => {
+      return await submitRecord(id, delegatorId);
+    },
+    onSuccess: () => {
+      // Toast is owned by the calling component (e.g. forwardRecord.tsx
+      // shows "Record forwarded successfully"). Avoid double-toast here.
+      queryClient.invalidateQueries({ queryKey: ["approvalRecord"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+  const MakeRecordUnerReviewMutation = useMutation({
+    mutationFn: async ({ id }: { id: string }) => {
+      return await makeUnderReview(id);
+    },
+    onSuccess: () => {
+      // Toast owned by calling component (UnderReviewRecord.tsx).
+      queryClient.invalidateQueries({ queryKey: ["reviewRecord"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const acceptRecordMutation = useMutation({
+    mutationFn: async (body: any) => {
+      return await goToNext(body);
+    },
+    onSuccess: () => {
+      // Toast owned by calling component (AcceptRecord.tsx).
+      queryClient.invalidateQueries({ queryKey: ["approvalRecord"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const rejectRecordMutation = useMutation({
+    mutationFn: async (body: any) => {
+      return await sendBack(body);
+    },
+    onSuccess: () => {
+      // Toast owned by calling component (rejectRecord.tsx).
+      queryClient.invalidateQueries({ queryKey: ["approvalRecord"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+  const adjustRecordMutation = useMutation({
+    mutationFn: async (body: any) => {
+      return await sendBack(body);
+    },
+    onSuccess: () => {
+      // Toast owned by calling component (AdjustRecord.tsx).
+      queryClient.invalidateQueries({ queryKey: ["approvalRecord"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const sendToRoMutation = useMutation({
+    mutationFn: async ({
+      id,
+      stampId,
+      signatureId,
+      note,
+      recordPrefixId,
+      isWithTeamSignature,
+    }: {
+      id: string;
+      stampId?: string;
+      signatureId?: string;
+      note?: string;
+      recordPrefixId?: string;
+      isWithTeamSignature?: boolean;
+    }) => {
+      return await sendToRO(
+        id,
+        stampId,
+        signatureId,
+        note,
+        recordPrefixId,
+        isWithTeamSignature,
+      );
+    },
+    onSuccess: () => {
+      // Toast owned by calling component (approveRecordPage.tsx).
+      queryClient.invalidateQueries({ queryKey: ["approvalRecord"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const submitAndSendToRoMutation = useMutation({
+    mutationFn: async ({
+      id,
+      stampId,
+      signatureId,
+      note,
+      recordPrefixId,
+    }: {
+      id: string;
+      stampId?: string;
+      signatureId?: string;
+      note?: string;
+      recordPrefixId?: string;
+    }) => {
+      return await submitAndSendToRo(
+        id,
+        stampId,
+        signatureId,
+        note,
+        recordPrefixId,
+      );
+    },
+    onSuccess: () => {
+      // Toast owned by calling component (approveRecord.tsx).
+      queryClient.invalidateQueries({ queryKey: ["approvalRecord"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const approvalCount = data?.count || 0;
+
+  return {
+    approvalCount,
+    approvalRecords: data?.items || [],
+
+    approveRecord: approveRecordMutation.mutateAsync,
+    approveRecordLoading: approveRecordMutation.isPending,
+    acceptRecord: acceptRecordMutation.mutateAsync,
+    acceptRecordLoading: acceptRecordMutation.isPending,
+    adjustRecord: adjustRecordMutation.mutateAsync,
+    adjustRecordLoading: adjustRecordMutation.isPending,
+
+    isLoading,
+    isError,
+    refetch,
+    submitRecord: submitRecordMutation.mutateAsync,
+    submitRecordLoading: submitRecordMutation.isPending,
+    sendToRo: sendToRoMutation.mutateAsync,
+    sendToRoLoading: sendToRoMutation.isPending,
+    submitAndSend: submitAndSendToRoMutation.mutateAsync,
+    isSubmitAndSendLoading: submitAndSendToRoMutation.isPending,
+    rejectRecord: rejectRecordMutation.mutateAsync,
+    makeRecordUnderReview: MakeRecordUnerReviewMutation.mutateAsync,
+  };
+};
+
+export const useMyApprovals = (params?: ApprovalRecordQueryParams) => {
+  return useQuery({
+    queryKey: ["myRecordApprovals", params],
+    queryFn: () => fetchMyRecordsApprovals(params),
+    staleTime: 1000 * 60 * 5,
+  });
+};
+export const useMyProcessedApprovals = (params?: ApprovalRecordQueryParams) => {
+  return useQuery({
+    queryKey: ["myProcessedApprovals", params],
+    queryFn: () => fetchMyProcessedRecordsApprovals(params),
+    staleTime: 1000 * 60 * 5,
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useAssignTasks.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useAssignTasks.ts
new file mode 100644
index 000000000..14876f9d7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useAssignTasks.ts
@@ -0,0 +1,83 @@
+import { useMutation } from "@tanstack/react-query";
+import {
+  AcceptIncomingRecordPayload,
+  ReAssignRecordPayload,
+  AssignCCPayload,
+} from "@/record-management/dto/userRecords/usersDto";
+import {
+  acceptRecord,
+  reassignRecord,
+  assignCCRecord,
+  AddRemarkPayload,
+  addRemarkService,
+} from "@/record-management/services/api/incomingRecordService";
+
+export const useAssignTasks = () => {
+  const {
+    mutate: assignRecord,
+    isPending,
+    isError,
+    isSuccess,
+    data,
+    error,
+  } = useMutation({
+    mutationFn: (body: ReAssignRecordPayload) => reassignRecord(body),
+  });
+  const {
+    mutateAsync: addRemark,
+    mutateAsync: addRemarkAsync,
+    isPending: isAddingRemark,
+    isError: isAddRemarkError,
+    isSuccess: isAddRemarkSuccess,
+    data: addRemarkData,
+    error: addRemarkError,
+  } = useMutation({
+    mutationFn: (body: AddRemarkPayload) => addRemarkService(body),
+  });
+  const {
+    mutate: acceptIncoming,
+    isPending: isAcceptPending,
+    isError: isAcceptError,
+    isSuccess: isAcceptSuccess,
+    data: acceptData,
+    error: acceptError,
+  } = useMutation({
+    mutationFn: (body: AcceptIncomingRecordPayload) => acceptRecord(body),
+  });
+
+  const {
+    mutate: assignCC,
+    isPending: isAssignCCPending,
+    isError: isAssignCCError,
+    isSuccess: isAssignCCSuccess,
+    data: assignCCData,
+    error: assignCCError,
+  } = useMutation({
+    mutationFn: (body: AssignCCPayload) => assignCCRecord(body),
+  });
+
+  return {
+    assignRecord,
+    isPending,
+    isError,
+    isSuccess,
+    data,
+    error,
+    acceptIncoming,
+    isAcceptPending,
+    isAcceptError,
+    isAcceptSuccess,
+    acceptData,
+    acceptError,
+    assignCC,
+    isAssignCCPending,
+    isAssignCCError,
+    isAssignCCSuccess,
+    assignCCData,
+    assignCCError,
+    addRemark,
+    addRemarkAsync,
+    isAddRemarkError,
+    isAddingRemark,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useCCIncomingRecords.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useCCIncomingRecords.ts
new file mode 100644
index 000000000..45f44b808
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useCCIncomingRecords.ts
@@ -0,0 +1,249 @@
+import {
+  getCCIncoming,
+  getCCIncomingParent,
+  PaginationParams,
+} from "@/record-management/services/api/incomingRecordService";
+import { MeDto } from "@/shared/dto/user/meDto";
+import { useQuery } from "@tanstack/react-query";
+import { useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { useUserDetail } from "./useUserDetail";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+// Define the DTO for CC records
+export interface MetadataLang {
+  am: string;
+  en: string;
+}
+
+export interface Metadata {
+  deliveredBy: MetadataLang;
+  organizationName: MetadataLang;
+}
+
+export interface ContentItem {
+  id: string;
+  subject: string;
+}
+
+export interface Initiator {
+  id: string;
+  employee: {
+    id: string;
+    name: {
+      am: string;
+      en: string;
+    };
+  };
+  position: {
+    createdAt: string;
+    updatedAt: string;
+    id: string;
+    name: {
+      am: string;
+      en: string;
+    };
+    key: string;
+    rank: 1;
+    parentPositionId: string;
+    unitId: string;
+    organizationId: string;
+    projectId: null;
+    positionTypeId: string;
+  };
+  unit: {
+    id: string;
+    name: {
+      am: string;
+      en: string;
+    };
+    organization: {
+      id: string;
+      name: {
+        am: string;
+        en: string;
+      };
+    };
+  };
+}
+
+export interface Record {
+  isUrgent: any;
+  amharicDispatchedDate: string;
+  letterName: string;
+  referenceNumber: string;
+  id: string;
+  letterNumber: string;
+  metadata: Metadata;
+  dispatchedDate: string; // or Date if you parse it
+  initiationType: string;
+  recordTypeKey: string;
+  content: ContentItem[];
+  initiator: Initiator | null;
+}
+
+export interface AssigneePositionName {
+  am: string;
+  en: string;
+}
+
+export interface AssigneePosition {
+  id: string;
+  name: AssigneePositionName;
+}
+
+export interface CCIncomingRecordDto {
+  hasSeen: string;
+  createdAt: string; // or Date if parsed
+  id?: string;
+  status?: string;
+  latestRemarkAt?: string | null;
+  childAssignments?: {
+    latestRemarkAt?: string | null;
+  }[];
+  isRead?: boolean;
+  comment?: string | null;
+  record: Record;
+  assigneePosition?: AssigneePosition;
+  amharicCreatedAt: string;
+  amharicDispatchedDate: string;
+  pageNo?: number;
+  isLocked?: boolean;
+  isDelegation?: boolean;
+  // Other optional fields as needed
+}
+
+export interface MemoDto {
+  id: string;
+  createdAt: string;
+  referenceNumber: string | null;
+  dispatchedDate: string | null;
+  amharicDispatchedDate: string | null;
+  amharicCreatedAt: string;
+  initiationType: string;
+  recordTypeKey: string;
+  content: MemoContentDto[];
+  initiator: InitiatorDto;
+  initiatedAs?: string;
+  pageNo?: number;
+  status: string;
+  isLocked?: boolean;
+  isDelegation?: boolean;
+}
+
+export interface MemoContentDto {
+  id: string;
+  subject: string;
+  ccs: CCDto[];
+}
+
+export interface CCDto {
+  id?: string;
+  hasSeen?: boolean;
+  status?: string;
+  seenAt?: string | null;
+  seenByEmployeePosition?: unknown | null;
+  positionId?: string;
+  unitId?: string;
+  type?: "internal" | "external";
+  isForYourReference?: boolean;
+  value?: string;
+  label?: string;
+  employeePositionId?: string | null;
+}
+
+export interface InitiatorDto {
+  id: string;
+  employee: EmployeeDto;
+  position: PositionDto;
+}
+
+export interface EmployeeDto {
+  id: string;
+  name: NameDto;
+}
+
+export interface NameDto {
+  am: string;
+  en: string;
+}
+
+export interface PositionDto {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  name: NameDto;
+  key: string;
+  rank: number;
+  parentPositionId: string | null;
+  unitId: string;
+  organizationId: string;
+  projectId: string | null;
+  positionTypeId: string;
+}
+
+export const useCCIncomingRecords = (params?: PaginationParams) => {
+  const { userDetails } = useAuthUser();
+  const { permissionKeys } = useUserDetail(userDetails as MeDto);
+  const RO = permissionKeys.includes("can:dispatchRecords");
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+  // Use React Query for data fetching with caching
+
+  const {
+    data, // Default to mock data for now
+    isLoading,
+    isError,
+    error: ccError,
+    refetch,
+  } = useQuery({
+    queryKey: ["incoming-cc", params],
+    staleTime: 1000 * 60 * 5, // Cache data for 5 minutes
+    queryFn: () => getCCIncoming(params),
+    enabled: Boolean(!RO),
+  });
+  const {
+    data: dataParent,
+    isLoading: isLoadingParent,
+    isError: isErrorParent,
+    error: ccParentError,
+    refetch: refetchParent,
+  } = useQuery({
+    queryKey: ["incoming-cc-parent", params],
+    staleTime: 1000 * 60 * 5, // Cache data for 5 minutes
+    queryFn: () => getCCIncomingParent(params),
+    enabled: Boolean(params?.fetchParent),
+  });
+
+  // Surface list-fetch failures via the centralized error handler.
+  const listFetchError = ccError || ccParentError;
+  const prevListErrorRef = useRef<unknown>(null);
+  useEffect(() => {
+    if (listFetchError && listFetchError !== prevListErrorRef.current) {
+      prevListErrorRef.current = listFetchError;
+      handleError(listFetchError);
+    }
+  }, [listFetchError, handleError]);
+
+  const ccRecords = data?.items ?? [];
+  const ccCount = data?.count ?? 0;
+
+  return {
+    ccCount,
+    ccRecords,
+    fetchAttachments: data,
+    isLoading,
+    isError,
+    refetch,
+    ...(params?.fetchParent
+      ? {
+          ccParent: dataParent?.items ?? [],
+          ccParentCount: dataParent?.count ?? 0,
+          refetchParent,
+          isErrorParent,
+          isLoadingParent,
+        }
+      : {}),
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useCanAssignRecord.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useCanAssignRecord.ts
new file mode 100644
index 000000000..2bdd14b5d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useCanAssignRecord.ts
@@ -0,0 +1,29 @@
+import { useQuery } from "@tanstack/react-query";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { getPositionTypeConfigurationsByUnitId } from "@/user-management/services/api/positionTypeConfigurationService";
+
+const FIVE_MIN = 5 * 60 * 1000;
+
+const useCanAssignRecord = () => {
+  const { selectedPosition } = useAuthUser();
+  const positionTypeId = selectedPosition?.positionType?.id ?? null;
+
+  const { data } = useQuery({
+    queryKey: ["positionTypeConfigurations", positionTypeId],
+    queryFn: async () => {
+      const res = await getPositionTypeConfigurationsByUnitId(positionTypeId!);
+      return res.data;
+    },
+    enabled: !!positionTypeId,
+    staleTime: FIVE_MIN,
+  });
+
+  const config = data?.items?.[0];
+
+  // No config exists → allow by default; explicit false → deny
+  const canAssignRecord = !config || config.canAssignRecord !== false;
+
+  return { canAssignRecord };
+};
+
+export default useCanAssignRecord;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useCanDelegate.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useCanDelegate.ts
new file mode 100644
index 000000000..b58393050
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useCanDelegate.ts
@@ -0,0 +1,14 @@
+import { useQuery } from "@tanstack/react-query";
+import { canDelegate } from "@/record-management/services/api/employeePositionService";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+
+export const useCanDelegate = () => {
+  const { selectedPositionId } = useAuthUser();
+
+  return useQuery({
+    queryKey: ["canDelegateStatus", selectedPositionId],
+    queryFn: canDelegate,
+    enabled: !!selectedPositionId,
+    staleTime: 5 * 60 * 1000,
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useChildOutgoingInstances.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useChildOutgoingInstances.ts
new file mode 100644
index 000000000..27566a6d3
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useChildOutgoingInstances.ts
@@ -0,0 +1,25 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { getMainChildIncomingInstances } from "@/record-management/services/api/incomingInstanceService";
+import { AssignmentHistoryDto } from "../userIncoming/remarkCreationCard";
+
+interface UseChildOutgoingInstancesOptions {
+  enabled?: boolean;
+}
+
+export const useChildOutgoingInstances = (
+  outgoingInstanceId: string,
+  options?: UseChildOutgoingInstancesOptions,
+) => {
+  return useQuery<AssignmentHistoryDto[]>({
+    queryKey: ["child-outgoing-instances", outgoingInstanceId],
+
+    queryFn: () => getMainChildIncomingInstances(outgoingInstanceId),
+
+    enabled:
+      options?.enabled !== undefined
+        ? options.enabled && !!outgoingInstanceId
+        : !!outgoingInstanceId,
+    staleTime: 0,
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useCounter.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useCounter.ts
new file mode 100644
index 000000000..5f9fd5951
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useCounter.ts
@@ -0,0 +1,176 @@
+import { useUserRecords } from "./useUserRecords";
+import { useExternalIncomingRecords } from "./useExternalIncomingRecords";
+import { useInternalIncomingRecords } from "./useInternalIncomingRecords";
+import { useCCIncomingRecords } from "./useCCIncomingRecords";
+import { useApprovalTasks, useMyApprovals } from "./useApprovalTasks";
+import { usePendingRecords } from "./usePendingRecords";
+
+export interface NotificationProps {
+  incomingCount: number;
+  approvalCount: number;
+  internalIncomingCount: number;
+  externalIncomingCount: number;
+  ccIncomingCount: number;
+  pendingCount: number;
+}
+
+const useCounter = () => {
+  const { recordsResponse, isError, isLoading, refetch } = useUserRecords();
+  // Grouped counters for outgoing statuses
+
+  const { recordsResponse: draftOutgoing } = useUserRecords({
+    status: "Draft",
+  });
+  const { recordsResponse: submittedOutgoing } = useUserRecords({
+    status: "Submitted",
+  });
+  const { recordsResponse: acceptedOutgoing } = useUserRecords({
+    status: "Accepted",
+  });
+  const { recordsResponse: approvedOutgoing } = useUserRecords({
+    status: "Approved",
+  });
+  const { recordsResponse: rejectedOutgoing } = useUserRecords({
+    status: "Rejected",
+  });
+  const { recordsResponse: returnedOutgoing } = useUserRecords({
+    status: "Returned",
+  });
+  const { recordsResponse: adjustmentOutgoing } = useUserRecords({
+    status: "Adjustment",
+  });
+  const { recordsResponse: sentOutgoing } = useUserRecords({
+    status: "Dispatched",
+  });
+  const outgoingCounters = {
+    Draft: draftOutgoing?.count,
+    Accepted: acceptedOutgoing?.count,
+    Rejected: rejectedOutgoing?.count,
+    Adjustment: adjustmentOutgoing?.count,
+    Dispatched: sentOutgoing?.count,
+    Submitted: submittedOutgoing?.count,
+    Approved: approvedOutgoing?.count,
+    Returned: returnedOutgoing?.count,
+  };
+  const totalOutgoingRecords = recordsResponse?.count;
+
+  // External incoming counts
+  const { externalCount: draftCount } = useExternalIncomingRecords({
+    status: "draft",
+  });
+
+  const { externalCount: acceptedCount } = useExternalIncomingRecords({
+    status: "accepted",
+  });
+  const { externalCount: rejectdCount } = useExternalIncomingRecords({
+    status: "rejected",
+  });
+  const { externalCount: reassignCount } = useExternalIncomingRecords({
+    status: "re_assigned",
+  });
+
+  const externalCountdraft = draftCount ?? 0;
+  const externalCountAccepted = acceptedCount ?? 0;
+  const externalCountRejected = rejectdCount ?? 0;
+  const externalCountReassigned = reassignCount ?? 0;
+  const TotalExternal =
+    externalCountdraft +
+    externalCountAccepted +
+    externalCountRejected +
+    externalCountReassigned;
+
+  // Internal incoming counts
+  const { InternalCount: draftCountI } = useInternalIncomingRecords({
+    status: "draft",
+  });
+  const { InternalCount: acceptedCountI } = useInternalIncomingRecords({
+    status: "accepted",
+  });
+  const { InternalCount: rejectdCountI } = useInternalIncomingRecords({
+    status: "rejected",
+  });
+  const { InternalCount: reassignCountI } = useInternalIncomingRecords({
+    status: "re_assigned",
+  });
+
+  const internalCountdraft = draftCountI ?? 0;
+  const internalCountAccepted = acceptedCountI ?? 0;
+  const internalCountRejected = rejectdCountI ?? 0;
+  const internalCountReassigned = reassignCountI ?? 0;
+  const TotalInternal =
+    internalCountdraft +
+    internalCountAccepted +
+    internalCountRejected +
+    internalCountReassigned;
+
+  // CC counts
+  const { ccCount: allcc } = useCCIncomingRecords();
+
+  const TotalCC = allcc ?? 0;
+  // Approval counts grouped
+  const { approvalCount: appoveCount } = useApprovalTasks();
+  const { data: approvalApprove } = useMyApprovals({ action: "send_to_ro" });
+  const { data: acceptApprove } = useMyApprovals({ action: "approve" });
+  const { data: adjustmentApprove } = useMyApprovals({ action: "send_back" });
+  const { data: rejectedApprove } = useMyApprovals({ action: "reject" });
+  const approvalData1 = appoveCount ?? 0;
+  const { pendingRecordsCount } = usePendingRecords();
+  const approvalCounters = {
+    active: approvalData1,
+    accepted: acceptApprove?.count ?? 0,
+    rejected: rejectedApprove?.count ?? 0,
+    adjustment: adjustmentApprove?.count ?? 0,
+    approved: approvalApprove?.count ?? 0,
+  };
+  //const TotalApproval = approvalData1;
+  const TotalApproval = Object.values(approvalCounters).reduce(
+    (sum, val) => sum + (val ?? 0),
+    0,
+  );
+  // Combined totals for incoming records by status
+  const TotalIncomingRecordsDrafts = externalCountdraft + internalCountdraft;
+  const TotalIncomingRecordsAccepted =
+    externalCountAccepted + internalCountAccepted;
+  const TotalIncomingRecordsRejected =
+    externalCountRejected + internalCountRejected;
+  const TotalIncomingRecordsReassigned =
+    externalCountReassigned + internalCountReassigned;
+  const incomingCount =
+    TotalIncomingRecordsDrafts +
+    TotalIncomingRecordsAccepted +
+    TotalIncomingRecordsRejected +
+    TotalIncomingRecordsReassigned;
+
+  return {
+    isLoading,
+    isError,
+    refetch,
+    tot: totalOutgoingRecords,
+    externalIncomingCount: TotalExternal,
+    internalIncomingCount: TotalInternal,
+    ccIncomingCount: TotalCC,
+    approvalCount: TotalApproval,
+    externalCountReassigned,
+    externalCountRejected,
+    externalCountAccepted,
+    draftCount,
+    internalCountReassigned,
+    internalCountRejected,
+    internalCountAccepted,
+    internalCountdraft,
+    TotalIncomingRecordsDrafts,
+    TotalIncomingRecordsAccepted,
+    TotalIncomingRecordsReassigned,
+    TotalIncomingRecordsRejected,
+    outgoingCounters,
+    approvalCounters,
+    incomingCount,
+    pendingCount: pendingRecordsCount,
+    TotalExternal,
+    TotalInternal,
+    TotalCC,
+    TotalApproval,
+  };
+};
+
+export default useCounter;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useCreateIncomingRecord.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useCreateIncomingRecord.ts
new file mode 100644
index 000000000..7966a2512
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useCreateIncomingRecord.ts
@@ -0,0 +1,102 @@
+import {
+  useMutation,
+  //useMutation,
+  useQuery,
+} from "@tanstack/react-query";
+
+import { AssignIncomingRecordPayload } from "@/record-management/dto/userRecords/usersDto";
+import {
+  getRecordIncoming,
+  assignIncomingRecordApi,
+  getExternalRecordIncoming,
+  assignDraftIncomingRecordApi,
+} from "@/record-management/services/api/incomingRecordService";
+import { OutgoingRecordQueryParams } from "@/record-management/services/api/recordOfficerService";
+import { StartAssignRecord } from "../recordOfficer/incomingRecords/AssigneIncomingRecords";
+import { MeDto } from "@/shared/dto/user/meDto";
+import { useUserDetail } from "./useUserDetail";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+
+export interface AssignIncomingRecordResponse {
+  recordId: string;
+  recordBoxes: string[];
+}
+
+export const useCreateIncomingRecords = (
+  params?: OutgoingRecordQueryParams
+) => {
+  // Use React Query for data fetching with caching
+  const { userDetails } = useAuthUser();
+  const { permissionKeys } = useUserDetail(userDetails as MeDto);
+  const RO = permissionKeys.includes("can:dispatchRecords");
+  const {
+    data: queryData,
+    isLoading,
+    isError,
+    refetch: refetch1,
+  } = useQuery({
+    queryKey: ["record-incoming", params],
+    staleTime: 1000 * 60 * 5,
+    queryFn: () => getRecordIncoming(RO ? params : {}),
+    enabled: Boolean(RO),
+  });
+  const {
+    data: externalRecordIncoming,
+    isLoading: isExternalRecordIncoming,
+    isError: isExternalRecordIncomingError,
+    refetch,
+  } = useQuery({
+    queryKey: ["external-record-incoming", params],
+    staleTime: 1000 * 60 * 5,
+    queryFn: () => getExternalRecordIncoming(RO ? params : {}),
+    enabled: Boolean(RO),
+  });
+  // Import or define the actual function to assign an incoming record
+
+  const {
+    mutate: assignIncomingRecordMutation,
+    isPending,
+    isSuccess,
+    data: mutationData,
+    error,
+  } = useMutation({
+    mutationFn: (body: AssignIncomingRecordPayload): Promise<any> =>
+      assignIncomingRecordApi(body),
+  });
+
+  const {
+    mutateAsync: startAssignIncomingRecordMutation,
+    data: startMutationData,
+    isPending: isStartingPending,
+    isSuccess: isStartAssignSuccess,
+    error: isStartError,
+  } = useMutation<AssignIncomingRecordResponse, Error, string>({
+    mutationFn: (id: string) => assignDraftIncomingRecordApi(id),
+  });
+
+  const externalRecordsAfter = queryData?.items ?? [];
+  const externalRecordsAfterCount = queryData?.count ?? [];
+  const externalRecords = externalRecordIncoming?.items ?? [];
+  const externalRecordsCount = externalRecordIncoming?.count ?? 0;
+  return {
+    refetch,
+    assignIncomingRecord: assignIncomingRecordMutation,
+    isPending,
+    isSuccess,
+    error,
+    mutationData,
+    externalRecordsAfter,
+    externalRecordsAfterCount,
+    isLoading,
+    isError,
+
+    // isAssignError: isError,
+    externalRecords,
+    isExternalRecordIncoming,
+    isExternalRecordIncomingError,
+    externalRecordsCount,
+    startAssignIncomingRecordMutation,
+    startMutationData,
+    refetch1,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useDashboard.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useDashboard.ts
new file mode 100644
index 000000000..20278b565
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useDashboard.ts
@@ -0,0 +1,152 @@
+import useCounter from "@/record-management/components/hooks/useCounter";
+
+export interface CounterProps {
+  totalOutgoingRecords: number;
+  totalIncomingRecords: number;
+  totalInternalRecords: number;
+  totalExternalRecords: number;
+  totalCcRecords: number;
+  totalForYourReferenceRecords: number;
+  totalApprovalRecords: number;
+  totalReassignedRecords: number;
+  totalRejectedRecords: number;
+  totalInProgressRecords: number;
+  totalAcceptedRecords: number;
+  totalInternalInProgressRecords: number;
+  totalInternalAcceptedRecords: number;
+  totalInternalReassignedRecords: number;
+  totalInternalRejectedRecords: number;
+  totalIncoming: any[];
+  totalOutgoing: any[];
+  totalApproval: any[];
+}
+
+const UseDashboard = () => {
+  const {
+    tot,
+    TotalExternal,
+    TotalInternal,
+    TotalCC,
+    TotalApproval,
+    externalCountReassigned,
+    externalCountRejected,
+    externalCountAccepted,
+    draftCount,
+    internalCountReassigned,
+    internalCountRejected,
+    internalCountAccepted,
+    internalCountdraft,
+    TotalIncomingRecordsDrafts,
+    TotalIncomingRecordsAccepted,
+    TotalIncomingRecordsReassigned,
+    TotalIncomingRecordsRejected,
+    outgoingCounters,
+    approvalCounters,
+    isLoading,
+  } = useCounter();
+
+  const totalForYourReferenceRecords = 0;
+
+  const OutgoingRecords = [
+    {
+      name: "Draft",
+      value: outgoingCounters.Draft || 0,
+    },
+    {
+      name: "Accepted",
+      value: outgoingCounters.Accepted || 0,
+    },
+    {
+      name: "Rejected",
+      value: outgoingCounters.Rejected || 0,
+    },
+    {
+      name: "Adjustment",
+      value: outgoingCounters.Adjustment || 0,
+    },
+    {
+      name: "Sent",
+      value: outgoingCounters.Dispatched || 0,
+    },
+    {
+      name: "Submitted",
+      value: outgoingCounters.Submitted || 0,
+    },
+    {
+      name: "Approved",
+      value: outgoingCounters.Approved || 0,
+    },
+    {
+      name: "Returned",
+      value: outgoingCounters.Returned || 0,
+    },
+  ];
+
+  const IncomingRecords = [
+    {
+      name: "In Progress",
+      value: TotalIncomingRecordsDrafts || 0,
+    },
+    {
+      name: "Accepted",
+      value: TotalIncomingRecordsAccepted || 0,
+    },
+    {
+      name: "Rejected",
+      value: TotalIncomingRecordsRejected || 0,
+    },
+    {
+      name: "Reassigned",
+      value: TotalIncomingRecordsReassigned || 0,
+    },
+  ];
+
+  const ApprovalRecords = [
+    {
+      name: "In progress",
+      value: approvalCounters.active || 0,
+    },
+    {
+      name: "Accepted",
+      value: approvalCounters.accepted || 0,
+    },
+    {
+      name: "Rejected",
+      value: approvalCounters.rejected || 0,
+    },
+    {
+      name: "Adjustment",
+      value: approvalCounters.adjustment || 0,
+    },
+    {
+      name: "Approved",
+      value: approvalCounters.approved || 0,
+    },
+  ];
+
+  const TotalIncoming = TotalExternal + TotalInternal + TotalCC;
+
+  return {
+    totalOutgoingRecords: tot || 0,
+    totalIncomingRecords: TotalIncoming || 0,
+    totalInternalRecords: TotalInternal || 0,
+    totalExternalRecords: TotalExternal || 0,
+    totalCcRecords: TotalCC || 0,
+    totalApprovalRecords: TotalApproval || 0,
+    totalReassignedRecords: externalCountReassigned || 0,
+    totalInProgressRecords: draftCount,
+    totalAcceptedRecords: externalCountAccepted,
+    totalRejectedRecords: externalCountRejected || 0,
+    totalInternalInProgressRecords: internalCountdraft || 0,
+    totalInternalAcceptedRecords: internalCountAccepted || 0,
+    totalInternalReassignedRecords: internalCountReassigned || 0,
+    totalInternalRejectedRecords: internalCountRejected || 0,
+    totalIncoming: IncomingRecords,
+    totalOutgoing: OutgoingRecords,
+    totalApproval: ApprovalRecords,
+    isLoading: isLoading,
+    totalForYourReferenceRecords: totalForYourReferenceRecords || 0,
+  };
+};
+
+export default UseDashboard;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useDelegations.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useDelegations.tsx
new file mode 100644
index 000000000..520f49489
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useDelegations.tsx
@@ -0,0 +1,165 @@
+import { DelegatePositionResponse } from "@/record-management/dto/delegation/delegationDto";
+import {
+  delegatePosition,
+  DelegatePositionPayload,
+  deleteDelegations,
+  EndDelegationPayload,
+  myDelegationDetails,
+  myDelegations,
+  submitDelegations,
+} from "@/record-management/services/api/employeePositionService";
+import { updateDelegationRecord } from "@/record-management/services/api/userRecordService";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { MeDto } from "@/shared/dto/user/meDto";
+import { useUserDetail } from "./useUserDetail";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import Cookies from "js-cookie";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+interface DelegationQueryParams {
+  skip?: number;
+  take?: number;
+}
+
+export const useDelegations = (params?: DelegationQueryParams) => {
+  const { userDetails } = useAuthUser();
+  const { permissionKeys, isLoading: userLoading } = useUserDetail(
+    userDetails as MeDto,
+  );
+  const RO = permissionKeys.includes("can:dispatchRecords");
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  const {
+    data: delegationResponse,
+    isLoading,
+    isError,
+    refetch,
+  } = useQuery<DelegatePositionResponse>({
+    queryKey: ["delegations", params],
+    queryFn: () => myDelegations(!RO ? params : {}),
+    staleTime: 5 * 60 * 1000,
+    enabled: !userLoading && !RO,
+  });
+  const {
+    data: myDelegated,
+    isLoading: isloadingDetail,
+    isError: isErrorDetail,
+    refetch: refetchDetail,
+  } = useQuery<DelegatePositionResponse>({
+    queryKey: ["delegationDetail", params],
+    queryFn: () => myDelegationDetails(!RO ? params : {}),
+    staleTime: 5 * 60 * 1000,
+    enabled: !userLoading && !RO,
+  });
+
+  const delegateMutation = useMutation({
+    mutationFn: (payload: DelegatePositionPayload) => delegatePosition(payload),
+    onSuccess: (response: any) => {
+      toast.success(t("msg.success"));
+
+      // Store delegation start and end dates in auth cookie for monitoring
+      if (response?.data?.startDate || response?.data?.endDate) {
+        const authUserCookie = Cookies.get("auth-user");
+        if (authUserCookie) {
+          try {
+            const userData = JSON.parse(authUserCookie);
+            if (response.data.startDate) {
+              userData.delegationStartDate = response.data.startDate;
+            }
+            if (response.data.endDate) {
+              userData.delegationEndDate = response.data.endDate;
+            }
+            Cookies.set("auth-user", JSON.stringify(userData));
+          } catch (error) {
+            console.error(
+              "Error updating auth cookie with delegation dates:",
+              error,
+            );
+          }
+        }
+      }
+
+      queryClient.invalidateQueries({ queryKey: ["delegations"] });
+      queryClient.invalidateQueries({ queryKey: ["canDelegateStatus"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+  const deleteMutation = useMutation({
+    mutationFn: ({
+      id,
+      ...payload
+    }: { id: string } & EndDelegationPayload) =>
+      deleteDelegations(id, payload),
+    onSuccess: () => {
+      // Clear delegation dates from auth cookie when delegation is deleted
+      const authUserCookie = Cookies.get("auth-user");
+      if (authUserCookie) {
+        try {
+          const userData = JSON.parse(authUserCookie);
+          delete userData.delegationStartDate;
+          delete userData.delegationEndDate;
+          Cookies.set("auth-user", JSON.stringify(userData));
+        } catch (error) {
+          console.error(
+            "Error clearing delegation dates from auth cookie:",
+            error,
+          );
+        }
+      }
+
+      queryClient.invalidateQueries({ queryKey: ["delegations"] });
+      queryClient.invalidateQueries({ queryKey: ["canDelegateStatus"] });
+      // Hook-level toast fires reliably even if the calling modal has
+      // already unmounted (per-call callbacks are dropped on unmount).
+      toast.success(
+        t(
+          "delegation.terminatedSuccess",
+          "Delegation terminated successfully",
+        ),
+      );
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+  const editmutation = useMutation({
+    mutationFn: updateDelegationRecord,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["delegations"] });
+      queryClient.invalidateQueries({ queryKey: ["delegationDetail"] });
+      queryClient.invalidateQueries({ queryKey: ["canDelegateStatus"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+  const hasDelegated =
+    (delegationResponse?.data?.filter(
+      (pos: { isCurrent: boolean }) => pos.isCurrent,
+    )?.length ?? 0) > 0;
+  const hasbeenDelegated =
+    (myDelegated?.data?.filter((pos: { isCurrent: boolean }) => pos.isCurrent)
+      ?.length ?? 0) > 0;
+  return {
+    delegations: delegationResponse,
+    isLoading,
+    isError,
+    refetch,
+    delegatePosition: delegateMutation.mutate,
+    mydelegated: myDelegated?.data,
+    delegatePositionAsync: delegateMutation.mutateAsync,
+    isDelegating: delegateMutation.isPending,
+    deleteDelegation: deleteMutation.mutate,
+    deleteDelegationAsync: deleteMutation.mutateAsync,
+    editDelegation: editmutation.mutate,
+    hasDelegated,
+    hasbeenDelegated,
+    myDelegated,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useExternalIncomingRecords.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useExternalIncomingRecords.ts
new file mode 100644
index 000000000..324f27920
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useExternalIncomingRecords.ts
@@ -0,0 +1,201 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { fetchAttachment } from "@/record-management/services/api/attachmentService";
+import {
+  getIncoming,
+  getIncomingParent,
+  getIncomingV2,
+} from "@/record-management/services/api/incomingRecordService";
+import { MeDto } from "@/shared/dto/user/meDto";
+import { useUserDetail } from "./useUserDetail";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+export interface UseExternalIncomingRecordsParams {
+  pageIndex?: number;
+  pageSize?: number;
+  status?: string;
+  order?: string;
+  searchQuery?: string;
+  filterType?: string;
+  referenceNumber?: string;
+  subject?: string;
+  fromDispatchedDate?: string;
+  toDispatchedDate?: string;
+  sendingPosition?: string;
+  from?: string; // Sender information filter
+  [key: string]: any; // allow extra filters
+}
+
+export const useExternalIncomingRecords = ({
+  fetchParent,
+  recordType = ["external", "non_smart_user", "external_non_smart_user"],
+  pageIndex = 0,
+  pageSize = 10,
+  status,
+  order = "createdAt:DESC",
+  searchQuery,
+  filterType,
+  ...filters
+}: UseExternalIncomingRecordsParams = {}) => {
+  const { userDetails } = useAuthUser();
+  const { permissionKeys } = useUserDetail(userDetails as MeDto);
+  const RO = permissionKeys.includes("can:dispatchRecords");
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+  // const recordTypes: string[] = [
+  //   "external",
+  //   "non_smart_user",
+  //   "branch",
+  //   "external_non_smart_user",
+  // ];
+
+  // Build query params
+  const params: Record<string, any> = {
+    recordType: recordType,
+    status: status ?? undefined,
+    skip: pageIndex,
+    take: pageSize,
+    orderBy: order,
+  };
+
+  // Map searchQuery depending on filterType
+  if (searchQuery) {
+    switch (filterType) {
+      case "Department":
+        params.receiverPosition = searchQuery;
+        break;
+      case "Subject":
+        params.subject = searchQuery;
+        break;
+      case "Date":
+      case "Dispatched Date":
+        params.fromDispatchedDate = searchQuery;
+        break;
+      case "Reference Number":
+        params.referenceNumber = searchQuery;
+        break;
+    }
+  }
+
+  // Handle dispatched date range filters
+  if (filters.fromDispatchedDate) {
+    params.fromDispatchedDate = filters.fromDispatchedDate;
+  }
+  if (filters.toDispatchedDate) {
+    params.toDispatchedDate = filters.toDispatchedDate;
+  }
+
+  Object.assign(params, filters); // merge extra filters
+  const v2Params = { ...params };
+  delete v2Params.orderBy;
+
+  const { data, isLoading, isError, error, refetch } = useQuery({
+    queryKey: [
+      "external-incoming",
+      pageIndex,
+      pageSize,
+      status,
+      filterType,
+      searchQuery,
+      order,
+      filters,
+      recordType,
+    ],
+    queryFn: () => getIncoming(!RO ? params : {}),
+    staleTime: 1000 * 60 * 5, // 5 minutes
+    enabled: Boolean(!RO),
+  });
+  const {
+    data: dataV2,
+    isLoading: isLoadingV2,
+    isError: isErrorV2,
+    error: errorV2,
+    refetch: refetchV2,
+  } = useQuery({
+    queryKey: [
+      "external-incoming-v2",
+      pageIndex,
+      pageSize,
+      status,
+      filterType,
+      searchQuery,
+      order,
+      filters,
+      recordType,
+    ],
+    queryFn: () => getIncomingV2(!RO ? v2Params : {}),
+    staleTime: 1000 * 60 * 5, // 5 minutes
+    enabled: Boolean(!RO),
+  });
+  const {
+    data: dataParent,
+    isLoading: isLoadingParent,
+    isError: isErrorParent,
+    error: parentError,
+    refetch: refetchParent,
+  } = useQuery({
+    queryKey: [
+      "external-incoming-parent",
+      pageIndex,
+      pageSize,
+      status,
+      filterType,
+      searchQuery,
+      order,
+      filters,
+      recordType,
+    ],
+    queryFn: () => getIncomingParent(fetchParent ? params : {}),
+    staleTime: 1000 * 60 * 5, // 5 minutes
+    enabled: Boolean(fetchParent),
+  });
+
+  // Surface list-fetch failures via the centralized error handler.
+  const listFetchError = error || parentError;
+  const prevListErrorRef = useRef<unknown>(null);
+  useEffect(() => {
+    if (listFetchError && listFetchError !== prevListErrorRef.current) {
+      prevListErrorRef.current = listFetchError;
+      handleError(listFetchError);
+    }
+  }, [listFetchError, handleError]);
+
+  const externalRecords = data?.items ?? [];
+  const externalCount = data?.count ?? 0;
+  const externalRecords2 = dataV2?.items ?? [];
+  const externalCount2 = dataV2?.count ?? 0;
+
+  const {
+    mutate: fetchAttachments,
+    data: attachmentsData,
+    isError: isAttachmentsError,
+  } = useMutation({
+    mutationFn: (recordId: string) => fetchAttachment(recordId),
+  });
+  return {
+    externalRecords,
+    externalCount,
+    externalRecords2,
+    externalCount2,
+    isLoadingV2,
+    isErrorV2,
+    refetchV2,
+    isLoading,
+    isError,
+    refetch,
+    fetchAttachments,
+    attachmentsData,
+    isAttachmentsError,
+    ...(fetchParent
+      ? {
+          externalParent: dataParent?.items ?? [],
+          externalParentCount: dataParent?.count ?? 0,
+          isLoadingParent,
+          refetchParent,
+          isErrorParent,
+        }
+      : {}),
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useGetRemarks.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useGetRemarks.ts
new file mode 100644
index 000000000..cb3d9ca73
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useGetRemarks.ts
@@ -0,0 +1,84 @@
+// hooks/useGetRemarks.ts
+// dto/IncomingRecords/remark.dto.ts
+
+export interface LocalizedNameDto {
+  am: string;
+  en: string;
+}
+
+export interface RemarkEmployeeDto {
+  id: string;
+  name: LocalizedNameDto;
+}
+
+export interface RemarkCommentorDto {
+  id: string;
+  employee: RemarkEmployeeDto;
+}
+
+export interface IncomingRemarkDto {
+  createdAt: string;
+  updatedAt: string;
+  id: string;
+
+  incomingInstanceId: string;
+
+  commentorId: string;
+  delegateCommenterId: string | null;
+
+  comment: string;
+
+  commentor: RemarkCommentorDto;
+
+  delegateCommenter: RemarkCommentorDto | null;
+}
+
+export interface IncomingRemarkResponseDto {
+  count: number;
+  items: IncomingRemarkDto[];
+}
+import { getRemarksByIncomingInstanceId } from "@/record-management/services/api/incomingRecordService";
+import { useQueries, useQuery } from "@tanstack/react-query";
+
+export const useGetRemarks = (
+  incomingInstanceId: string,
+  enabled: boolean = true,
+) => {
+  const { data, isLoading, isError, error, refetch, isFetching } = useQuery({
+    queryKey: ["incoming-remarks", incomingInstanceId],
+    queryFn: () => getRemarksByIncomingInstanceId(incomingInstanceId),
+    enabled: !!incomingInstanceId && enabled,
+    staleTime: 0,
+  });
+
+  return {
+    remarks: data,
+    isLoadingRemarks: isLoading,
+    isFetchingRemarks: isFetching,
+    isRemarksError: isError,
+    remarksError: error,
+    refetchRemarks: refetch,
+  };
+};
+
+export const useGetMergedRemarks = (instanceIds: string[]) => {
+  const results = useQueries({
+    queries: instanceIds.map((id) => ({
+      queryKey: ["incoming-remarks", id],
+      queryFn: () => getRemarksByIncomingInstanceId(id),
+      enabled: !!id,
+      staleTime: 0,
+    })),
+  });
+
+  const isLoading = results.some((r) => r.isLoading);
+  const isError = results.some((r) => r.isError);
+  const mergedItems = results
+    .flatMap((r) => r.data?.items ?? [])
+    .sort(
+      (a, b) =>
+        new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
+    );
+
+  return { mergedItems, isLoading, isError };
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useHeaderFooterPresigned.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useHeaderFooterPresigned.ts
new file mode 100644
index 000000000..3ca681fb5
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useHeaderFooterPresigned.ts
@@ -0,0 +1,62 @@
+import {
+  HeaderFooterResponseDto,
+  headerFooterService,
+} from "@/user-management/services/api/headerFooterService";
+import { useQuery } from "@tanstack/react-query";
+
+export const useHeaderFooterPresigned = (
+  unitId: string,
+  positionId?: string,
+  recordTypeKey?: string,
+) => {
+  return useQuery({
+    queryKey: ["headers-footers", unitId, positionId, recordTypeKey],
+    queryFn: async () => {
+      const [headerListRes, footerListRes] = await Promise.all([
+        headerFooterService.getHeadersByUnitId(
+          unitId,
+          positionId,
+          recordTypeKey,
+        ),
+        headerFooterService.getFootersByUnitId(
+          unitId,
+          positionId,
+          recordTypeKey,
+        ),
+      ]);
+
+      // Only fetch presigned URLs for files that are both active and uploaded
+      const activeHeaders = headerListRes.data.items.filter(
+        (item) => item.isCurrent && item.uploadedSuccessfully,
+      );
+      const activeFooters = footerListRes.data.items.filter(
+        (item) => item.isCurrent && item.uploadedSuccessfully,
+      );
+
+      const withPresigned = async (
+        items: HeaderFooterResponseDto[],
+        type: "header" | "footer",
+      ) =>
+        Promise.all(
+          items.map(async (item) => {
+            try {
+              const detail =
+                type === "header"
+                  ? await headerFooterService.getHeaderById(item.id)
+                  : await headerFooterService.getFooterById(item.id);
+              return { ...item, presigned: detail.data.presigned };
+            } catch {
+              return item;
+            }
+          }),
+        );
+
+      const headersWithPresigned = await withPresigned(activeHeaders, "header");
+      const footersWithPresigned = await withPresigned(activeFooters, "footer");
+
+      return { headers: headersWithPresigned, footers: footersWithPresigned };
+    },
+    enabled: !!unitId,
+    staleTime: 10 * 60 * 1000, // 10 minutes
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useIncomingInstances.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useIncomingInstances.ts
new file mode 100644
index 000000000..a5409fd32
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useIncomingInstances.ts
@@ -0,0 +1,25 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { getChildIncomingInstances } from "@/record-management/services/api/incomingInstanceService";
+import { AssignmentHistoryDto } from "../userIncoming/remarkCreationCard";
+
+interface UseChildIncomingInstancesOptions {
+  enabled?: boolean;
+}
+
+export const useChildIncomingInstances = (
+  incomingInstanceId: string,
+  options?: UseChildIncomingInstancesOptions,
+) => {
+  return useQuery<AssignmentHistoryDto[]>({
+    queryKey: ["child-incoming-instances", incomingInstanceId],
+
+    queryFn: () => getChildIncomingInstances(incomingInstanceId),
+
+    enabled:
+      options?.enabled !== undefined
+        ? options.enabled && !!incomingInstanceId
+        : !!incomingInstanceId,
+    staleTime: 0,
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useIncomingRecordCount.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useIncomingRecordCount.ts
new file mode 100644
index 000000000..4de3ee205
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useIncomingRecordCount.ts
@@ -0,0 +1,117 @@
+import { useQuery } from "@tanstack/react-query";
+import { getReportRO } from "@/record-management/services/api/reportService";
+type CountItem = Record<string, number>;
+type CountGroup = Record<string, CountItem>;
+type BoxCount = Record<string, number>;
+
+const getDateRanges = () => {
+  // helpers
+  const pad2 = (n: number) => String(n).padStart(2, "0");
+  const ymdLocal = (d: Date) =>
+    `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
+
+  // now (local)
+  const now = new Date();
+
+  // daily: start of today -> start of tomorrow (exclusive end)
+  const startOfToday = new Date(
+    now.getFullYear(),
+    now.getMonth(),
+    now.getDate()
+  );
+  const startOfTomorrow = new Date(
+    now.getFullYear(),
+    now.getMonth(),
+    now.getDate() + 1
+  );
+  const dailyFrom = ymdLocal(startOfToday);
+  const dailyTo = ymdLocal(startOfTomorrow);
+
+  // weekly (Monday..next Monday exclusive)
+  const tmp = new Date(now.getFullYear(), now.getMonth(), now.getDate()); // copy
+  const dow = tmp.getDay(); // 0 = Sun, 1 = Mon, ...
+  const diffToMonday = (dow + 6) % 7; // days back to Monday
+  const startOfWeek = new Date(
+    tmp.getFullYear(),
+    tmp.getMonth(),
+    tmp.getDate() - diffToMonday
+  );
+  const startOfNextWeek = new Date(
+    startOfWeek.getFullYear(),
+    startOfWeek.getMonth(),
+    startOfWeek.getDate() + 7
+  );
+  const weeklyFrom = ymdLocal(startOfWeek);
+  const weeklyTo = ymdLocal(startOfNextWeek);
+
+  // monthly: first of month -> first of next month (exclusive end)
+  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+  const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0); // last day of current month
+
+  const monthlyFrom = ymdLocal(startOfMonth);
+  const monthlyTo = ymdLocal(endOfMonth);
+  return {
+    daily: { fromDate: dailyFrom, toDate: dailyTo },
+    weekly: { fromDate: weeklyFrom, toDate: weeklyTo },
+    monthly: { fromDate: monthlyFrom, toDate: monthlyTo },
+  };
+};
+
+export const useIncomingRecordCounts = () => {
+  const ranges = getDateRanges();
+
+  // daily
+  const { data: daily } = useQuery({
+    queryKey: ["incomingRecords", "daily"],
+    queryFn: () => getReportRO(ranges.daily),
+  });
+
+  // weekly
+  const { data: weekly } = useQuery({
+    queryKey: ["incomingRecords", "weekly"],
+    queryFn: () => getReportRO(ranges.weekly),
+  });
+
+  // monthly
+  const { data: monthly } = useQuery({
+    queryKey: ["incomingRecords", "monthly"],
+    queryFn: () => getReportRO(ranges.monthly),
+  });
+  // Smart: recordBoxCount (flat object with numbers)
+  const sumSmart = (data?: BoxCount) => {
+    if (!data) return 0;
+
+    return Object.values(data).reduce((a, b) => a + b, 0);
+  };
+
+  // Incoming: recordCount (object of objects)
+  const sumIncoming = (data?: CountGroup) => {
+    if (!data) return 0;
+
+    return Object.entries(data)
+      .filter(
+        ([key]) => !["internal", "internal_memo", "external"].includes(key)
+      )
+      .flatMap(([_, obj]) => Object.values(obj))
+      .reduce((a, b) => a + b, 0);
+  };
+
+  // Combine both
+  const calculateTotal = (
+    recordCount?: CountGroup,
+    recordBoxCount?: BoxCount
+  ) => {
+    return sumIncoming(recordCount) + sumSmart(recordBoxCount);
+  };
+  const monthlytotalOutgoing = monthly?.outgoingInstanceCount?.Dispatched || 0;
+  const weeklytotalOutgoing = weekly?.outgoingInstanceCount?.Dispatched || 0;
+  const dailytotalOutgoing = daily?.outgoingInstanceCount?.Dispatched || 0;
+  return {
+    dailyCount: calculateTotal(daily?.recordCount, daily?.recordBoxCount),
+    weeklyCount: calculateTotal(weekly?.recordCount, weekly?.recordBoxCount),
+    monthlyCount: calculateTotal(monthly?.recordCount, monthly?.recordBoxCount),
+    dailyCountOutgoing: dailytotalOutgoing,
+    weeklyCountOutgoing: weeklytotalOutgoing,
+    monthlyCountOutgoing: monthlytotalOutgoing,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useIncomingRecords.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useIncomingRecords.ts
new file mode 100644
index 000000000..bbff193f2
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useIncomingRecords.ts
@@ -0,0 +1,132 @@
+import { useState } from "react";
+import { SendLetterDto } from "@/record-management/dto/IncomingRecords/IncomingLetterDto";
+import {
+  createIncoming,
+  updateIncoming,
+} from "@/record-management/services/api/nonSmartOfficeService";
+import { nonSmartOfficeFileService } from "@/record-management/services/api/nonSmartOfficeFileService";
+import { useTranslation } from "react-i18next";
+import { CreateLetterResult } from "@/external-portal/hooks/useCreateExternalLetterRecord";
+import { EditLetterFormValues } from "../recordOfficer/incomingRecords/AddIncoming/Form-Schema";
+import { useQueries, useQuery } from "@tanstack/react-query";
+import { data } from "jquery";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+export const useIncomings = () => {
+  const [isSending, setIsSending] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  const sendLetterAndUploadFile = async (
+    values: SendLetterDto,
+    file: File,
+  ): Promise<CreateLetterResult> => {
+    let recordId: string | null = null;
+    try {
+      setIsSending(true);
+
+      const createRes = await createIncoming(values);
+      recordId = createRes.recordId;
+      const { presigned: uploadUrl } = createRes;
+
+      if (!recordId || !uploadUrl) {
+        return Promise.reject(
+          new Error("Failed to create record or get upload URL"),
+        );
+      }
+
+      await nonSmartOfficeFileService.uploadFile(file, uploadUrl);
+      await nonSmartOfficeFileService.updateStatus(recordId, true);
+
+      setIsUploading(true);
+
+      return createRes; // ✅ Now sendletterResponse.data works
+    } catch (error) {
+      // If upload failed, mark status as false
+      if (recordId) {
+        try {
+          await nonSmartOfficeFileService.updateStatus(recordId, false);
+        } catch (statusError) {
+          await handleError(statusError);
+        }
+      }
+      return Promise.reject(error);
+    } finally {
+      setIsSending(false);
+      setIsUploading(false);
+    }
+  };
+
+  return {
+    sendLetterAndUploadFile,
+    isSending,
+    isUploading,
+  };
+};
+
+export const useUpdateIncoming = () => {
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  const updateIncomingRecord = async (
+    payload: any,
+    id: string,
+    file?: File,
+  ): Promise<any> => {
+    try {
+      setIsUpdating(true);
+      // 1. Update metadata
+      const updatedRes = await updateIncoming(payload, id);
+
+      const { presigned: uploadUrl } = updatedRes;
+
+      // 2. If a new file is provided, upload it
+      if (file && uploadUrl) {
+        try {
+          await nonSmartOfficeFileService.uploadFile(file, uploadUrl);
+          await nonSmartOfficeFileService.updateStatus(id, true);
+        } catch (uploadError) {
+          // If upload failed, mark status as false
+          try {
+            await nonSmartOfficeFileService.updateStatus(id, false);
+          } catch (statusError) {
+            await handleError(statusError);
+          }
+          throw uploadError;
+        }
+      }
+
+      return updatedRes;
+    } catch (error) {
+      return Promise.reject(error);
+    } finally {
+      setIsUpdating(false);
+      setIsUploading(false);
+    }
+  };
+
+  return {
+    updateIncomingRecord,
+    isUpdating,
+    isUploading,
+  };
+};
+
+export const useGetUploadingUrl = (file: File[]) => {
+  const {
+    data: uploadFileUrl,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["uploadUrl"],
+    queryFn: () => nonSmartOfficeFileService.getFileUploadUrl(file),
+  });
+  return {
+    uploadFileUrl,
+    isLoading,
+    error,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useIncomingReport.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useIncomingReport.ts
new file mode 100644
index 000000000..f5f02c288
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useIncomingReport.ts
@@ -0,0 +1,34 @@
+import { useQuery } from "@tanstack/react-query";
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+
+interface ReportStats {
+  assigned: number;
+  approved: number;
+  pending: number;
+  rejected: number;
+  reassigned: number;
+  replied: number;
+}
+
+interface IncomingReportData {
+  [key: string]: ReportStats & Record<string, any>;
+}
+
+export const useIncomingReport = (positionId?: string) => {
+  return useQuery({
+    queryKey: ["incomingReport", positionId],
+    queryFn: async () => {
+      const response = await recordAxiosInstance.get<IncomingReportData>(
+        "/reports/incoming-report",
+        {
+          headers: {
+            ...(positionId && { "x-current-position-id": positionId }),
+          },
+        }
+      );
+      return response.data;
+    },
+    enabled: !!positionId,
+    staleTime: 5 * 60 * 1000, // 5 minutes
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useInternalIncomingRecords.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useInternalIncomingRecords.ts
new file mode 100644
index 000000000..f67868762
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useInternalIncomingRecords.ts
@@ -0,0 +1,179 @@
+import { fetchAttachment } from "@/record-management/services/api/attachmentService";
+import {
+  getIncoming,
+  getIncomingParent,
+  getIncomingV2,
+} from "@/record-management/services/api/incomingRecordService";
+import { MeDto } from "@/shared/dto/user/meDto";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { useUserDetail } from "./useUserDetail";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+
+export interface UseInternalIncomingRecordsParams {
+  pageIndex?: number;
+  pageSize?: number;
+  status?: string;
+  filterType?: string; // "Department" | "Subject" | "Date" | "Reference Number"
+  searchQuery?: string;
+  order?: string;
+  letterNumber?: string;
+  referenceNumber?: string;
+  subject?: string;
+  recordTypeKey?: string;
+  fromCreatedAt?: string;
+  toCreatedAt?: string;
+  fromSubmittedAt?: string;
+  toSubmittedAt?: string;
+  fromDispatchedDate?: string;
+  toDispatchedDate?: string;
+  receiverPosition?: string;
+  receiverEmployee?: string;
+  sendingPosition?: string;
+  sendingEmployee?: string;
+  receiverUnit?: string;
+  dispatchedBy?: string;
+  from?: string; // Sender information filter
+  fetchParent?: boolean;
+  isUrgent?: boolean;
+  isRO?: boolean;
+}
+
+export const useInternalIncomingRecords = ({
+  pageIndex,
+  pageSize,
+  status,
+  filterType,
+  searchQuery,
+  fetchParent,
+  order = "createdAt:DESC",
+  ...filters
+}: UseInternalIncomingRecordsParams) => {
+  const { userDetails } = useAuthUser();
+  const { permissionKeys } = useUserDetail(userDetails as MeDto);
+  const RO = permissionKeys.includes("can:dispatchRecords");
+  const incomingType = ["internal", "internal_memo", "direct"];
+  // Base params
+  const params: Record<string, any> = {
+    recordType: incomingType,
+    status: status ?? undefined,
+    skip: pageIndex,
+    take: pageSize,
+    orderBy: order,
+  };
+
+  // Map searchQuery + filterType to backend param
+  if (searchQuery) {
+    switch (filterType) {
+      case "Department":
+        params.sendingPosition = searchQuery;
+        break;
+      case "Subject":
+        params.subject = searchQuery;
+        break;
+      case "Date":
+        params.fromCreatedAt = searchQuery; // or adapt depending on backend
+        break;
+      case "Reference Number":
+        params.referenceNumber = searchQuery;
+        break;
+    }
+  }
+
+  // Merge additional filters
+  Object.assign(params, filters);
+  const v2Params = { ...params };
+  delete v2Params.orderBy;
+
+  const { data, isLoading, isError, refetch } = useQuery({
+    queryKey: [
+      "incoming-instances",
+      pageIndex,
+      pageSize,
+      status,
+      filterType,
+      searchQuery,
+      filters,
+    ],
+    queryFn: () => getIncoming(!RO ? params : {}),
+    staleTime: 1000 * 60 * 5,
+    enabled: Boolean(!RO),
+  });
+  const {
+    data: dataV2,
+    isLoading: isLoadingV2,
+    isError: isErrorV2,
+    refetch: refetchV2,
+  } = useQuery({
+    queryKey: [
+      "incoming-instances/v2",
+      pageIndex,
+      pageSize,
+      status,
+      filterType,
+      searchQuery,
+      filters,
+    ],
+    queryFn: () => getIncomingV2(!RO ? v2Params : {}),
+    staleTime: 1000 * 60 * 5,
+    enabled: Boolean(!RO),
+  });
+  const {
+    data: dataParent,
+    isLoading: isLoadingParent,
+    isError: isErrorParent,
+    refetch: refetchParent,
+  } = useQuery({
+    queryKey: [
+      "incoming-instances-parent",
+      pageIndex,
+      pageSize,
+      status,
+      filterType,
+      searchQuery,
+      filters,
+    ],
+    queryFn: () => getIncomingParent(fetchParent ? params : {}),
+    staleTime: 1000 * 60 * 5,
+    enabled: Boolean(fetchParent),
+  });
+  const internalRecords = data?.items ?? [];
+  const InternalCount = data?.count ?? 0;
+  const internalRecords2 = dataV2?.items ?? [];
+  const InternalCount2 = dataV2?.count ?? 0;
+
+  // Mutation for fetching attachments
+  const {
+    mutate: fetchAttachments,
+    data: attachmentsData,
+    isError: isAttachmentsError,
+    isPending: isAttachmentsLoading,
+  } = useMutation({
+    mutationFn: (recordId: string) => fetchAttachment(recordId),
+  });
+
+  return {
+    InternalCount,
+    internalRecords,
+    internalRecords2,
+    InternalCount2,
+    fetchAttachments,
+    attachmentsData,
+    isAttachmentsError,
+    isAttachmentsLoading,
+    isLoading,
+    refetchV2,
+    isLoadingV2,
+    isErrorV2,
+    isError,
+    refetch,
+    ...(fetchParent
+      ? {
+          internalParent: dataParent?.items ?? [],
+          internalParentCount: dataParent?.count ?? 0,
+          refetchParent,
+          isErrorParent,
+          isLoadingParent,
+        }
+      : {}),
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useMyCollaborations.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useMyCollaborations.ts
new file mode 100644
index 000000000..7375e7626
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useMyCollaborations.ts
@@ -0,0 +1,64 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  fetchMyCollaborations,
+  getCollaborationByRecordId,
+  signRecordCollaborator,
+  CollaborationDto,
+  MyCollaborationsQuery,
+  SignRecordCollaboratorPayload,
+  CollaborationListResponse,
+} from "@/record-management/services/api/collaborationService";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { MeDto } from "@/shared/dto/user/meDto";
+import { useUserDetail } from "./useUserDetail";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+
+export const useMyCollaborations = (queryParams?: MyCollaborationsQuery) => {
+  const { userDetails } = useAuthUser();
+  const { permissionKeys } = useUserDetail(userDetails as MeDto);
+  const RO = permissionKeys.includes("can:dispatchRecords");
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  const query = useQuery({
+    queryKey: ["my-collaborations", queryParams],
+    queryFn: () => fetchMyCollaborations(!RO ? queryParams : {}),
+    staleTime: 5 * 60 * 1000,
+    enabled: Boolean(!RO),
+  });
+
+  const signMutation = useMutation({
+    mutationFn: ({ payload }: { payload: SignRecordCollaboratorPayload }) =>
+      signRecordCollaborator(payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["my-collaborations"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  return {
+    ...query,
+    signCollaboration: signMutation.mutateAsync,
+    signStatus: {
+      isLoading: signMutation.isPending,
+      isError: signMutation.isError,
+      error: signMutation.error,
+    },
+  };
+};
+
+export const useCollaborationByRecordId = (
+  recordId?: string,
+  options?: { enabled?: boolean },
+) => {
+  return useQuery<CollaborationListResponse>({
+    queryKey: ["collaboration-by-record", recordId],
+    queryFn: () => getCollaborationByRecordId(recordId as string),
+    enabled: (options?.enabled ?? true) && !!recordId,
+    staleTime: 0,
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useNonSmartRecordPdfAssign.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useNonSmartRecordPdfAssign.ts
new file mode 100644
index 000000000..54eecb02f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useNonSmartRecordPdfAssign.ts
@@ -0,0 +1,47 @@
+import { useMutation } from "@tanstack/react-query";
+import {
+  createAndAssignNonSmartRecordPdf,
+  updateAndAssignNonSmartRecordPdf,
+} from "@/record-management/services/api/nonSmartOfficeService";
+import { NonSmartRecordPdfAssignPayload } from "@/record-management/dto/IncomingRecords/nonSmartRecordPdfDto";
+
+export const useNonSmartRecordPdfAssign = () => {
+  const {
+    mutateAsync: createAndAssign,
+    isPending: isCreating,
+    isSuccess: isCreateSuccess,
+    data: createData,
+    error: createError,
+    reset: resetCreate,
+  } = useMutation({
+    mutationFn: (payload: NonSmartRecordPdfAssignPayload): Promise<any> =>
+      createAndAssignNonSmartRecordPdf(payload),
+  });
+
+  const {
+    mutateAsync: updateAndAssign,
+    isPending: isUpdating,
+    isSuccess: isUpdateSuccess,
+    data: updateData,
+    error: updateError,
+    reset: resetUpdate,
+  } = useMutation({
+    mutationFn: ({ id, payload }: { id: string; payload: NonSmartRecordPdfAssignPayload }): Promise<any> =>
+      updateAndAssignNonSmartRecordPdf(id, payload),
+  });
+
+  return {
+    createAndAssign,
+    isCreating,
+    isCreateSuccess,
+    createData,
+    createError,
+    resetCreate,
+    updateAndAssign,
+    isUpdating,
+    isUpdateSuccess,
+    updateData,
+    updateError,
+    resetUpdate,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useNotificationCount.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useNotificationCount.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useOrganizationUnit.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useOrganizationUnit.ts
new file mode 100644
index 000000000..45174526d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useOrganizationUnit.ts
@@ -0,0 +1,13 @@
+import { fetchOrganizationById } from "@/record-management/services/api/organizationService";
+import { useQuery } from "@tanstack/react-query";
+
+const useOrganizationUnit = (id: string) => {
+  return useQuery({
+    queryKey: ["organizationUnit", id],
+    queryFn: () => fetchOrganizationById(id),
+    enabled: !!id,
+    staleTime: 5 * 60 * 1000,
+  });
+};
+
+export default useOrganizationUnit;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useOutgoingRecords.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useOutgoingRecords.ts
new file mode 100644
index 000000000..a52a8edd1
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useOutgoingRecords.ts
@@ -0,0 +1,68 @@
+import { RecordDto } from "@/record-management/dto/userRecords/userRecordsDto";
+import {
+  dispatchedRecords,
+  OutgoingRecordQueryParams,
+} from "@/record-management/services/api/recordOfficerService";
+import { lockRecord } from "@/record-management/services/api/userRecordService";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+
+export const useOutgoingRecords = (params?: OutgoingRecordQueryParams) => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const {
+    data: recordsResponse,
+    isLoading,
+    isError,
+    refetch,
+  } = useQuery({
+    queryKey: ["outgoingRecords", params],
+    queryFn: async () => {
+      const data = await dispatchedRecords(params);
+
+      return {
+        count: data?.count,
+        items: data?.items as RecordDto[],
+      };
+    },
+    staleTime: 1 * 60 * 1000,
+    retry: false,
+  });
+  const { mutate: makeRecordLocked, isPending: isLocking } = useMutation({
+    mutationFn: ({
+      recordId,
+      isLocked,
+    }: {
+      recordId: string;
+      isLocked: boolean;
+    }) => lockRecord(recordId, isLocked),
+
+    onSuccess: (_, variables) => {
+      toast.success(
+        variables.isLocked
+          ? t("userIncoming.RecordLocked", "Record locked successfully")
+          : t("userIncoming.RecordUnlocked", "Record unlocked successfully"),
+      );
+
+      // refresh relevant caches
+      queryClient.invalidateQueries({ queryKey: ["outgoingRecords"] });
+    },
+
+    onError: (err: any) => {
+      console.error("Failed to lock record", err);
+      toast.error(
+        t("userIncoming.LockUpdateFailed", "Failed to update record lock"),
+      );
+    },
+  });
+
+  return {
+    recordsResponse,
+    isLoading,
+    isError,
+    refetch,
+    makeRecordLocked,
+    isLocking,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useOutgoingRecordsCount.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useOutgoingRecordsCount.ts
new file mode 100644
index 000000000..7e4a58cc4
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useOutgoingRecordsCount.ts
@@ -0,0 +1,89 @@
+// import { useQuery } from "@tanstack/react-query";
+// import {
+//   dispatchedRecords,
+//   OutgoingRecordQueryParams,
+// } from "@/record-management/services/api/recordOfficerService";
+// import { getReportRO } from "@/record-management/services/api/reportService";
+
+// const getDateRanges = () => {
+//   // helpers
+//   const pad2 = (n: number) => String(n).padStart(2, "0");
+//   const ymdLocal = (d: Date) =>
+//     `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
+
+//   // now (local)
+//   const now = new Date();
+
+//   // daily: start of today -> start of tomorrow (exclusive end)
+//   const startOfToday = new Date(
+//     now.getFullYear(),
+//     now.getMonth(),
+//     now.getDate()
+//   );
+//   const startOfTomorrow = new Date(
+//     now.getFullYear(),
+//     now.getMonth(),
+//     now.getDate() + 1
+//   );
+//   const dailyFrom = ymdLocal(startOfToday);
+//   const dailyTo = ymdLocal(startOfTomorrow);
+
+//   // weekly (Monday..next Monday exclusive)
+//   const tmp = new Date(now.getFullYear(), now.getMonth(), now.getDate()); // copy
+//   const dow = tmp.getDay(); // 0 = Sun, 1 = Mon, ...
+//   const diffToMonday = (dow + 6) % 7; // days back to Monday
+//   const startOfWeek = new Date(
+//     tmp.getFullYear(),
+//     tmp.getMonth(),
+//     tmp.getDate() - diffToMonday
+//   );
+//   const startOfNextWeek = new Date(
+//     startOfWeek.getFullYear(),
+//     startOfWeek.getMonth(),
+//     startOfWeek.getDate() + 7
+//   );
+//   const weeklyFrom = ymdLocal(startOfWeek);
+//   const weeklyTo = ymdLocal(startOfNextWeek);
+
+//   // monthly: first of month -> first of next month (exclusive end)
+//   const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+//   const startOfNextMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1);
+//   const monthlyFrom = ymdLocal(startOfMonth);
+//   const monthlyTo = ymdLocal(startOfNextMonth);
+
+//   return {
+//     daily: { fromDate: dailyFrom, toDate: dailyTo },
+//     weekly: { fromDate: weeklyFrom, toDate: weeklyTo },
+//     monthly: { fromDate: monthlyFrom, toDate: monthlyTo },
+//   };
+// };
+
+// export const useOutgoingRecordCounts = () => {
+//   const ranges = getDateRanges();
+//   // daily
+//   const { data: daily } = useQuery({
+//     queryKey: ["outgoingRecords", "daily"],
+//     queryFn: () => getReportRO(ranges.daily as OutgoingRecordQueryParams),
+//   });
+
+//   // weekly
+//   const { data: weekly } = useQuery({
+//     queryKey: ["outgoingRecords", "weekly"],
+//     queryFn: () => getReportRO(ranges.weekly as OutgoingRecordQueryParams),
+//   });
+
+//   // monthly
+//   const { data: monthly } = useQuery({
+//     queryKey: ["outgoingRecords", "monthly"],
+//     queryFn: () => getReportRO(ranges.monthly as OutgoingRecordQueryParams),
+//   });
+//   const monthlytotalOutgoing = monthly?.outgoingInstanceCount?.Dispatched || 0;
+//   const weeklytotalOutgoing = weekly?.outgoingInstanceCount?.Dispatched || 0;
+//   const dailytotalOutgoing = daily?.outgoingInstanceCount?.Dispatched || 0;
+
+//   return {
+//     dailyCountOutgoing: dailytotalOutgoing,
+//     weeklyCountOutgoing: weeklytotalOutgoing,
+//     monthlyCountOutgoing: monthlytotalOutgoing,
+//   };
+// };
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/usePendingRecords.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/usePendingRecords.ts
new file mode 100644
index 000000000..456aa877d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/usePendingRecords.ts
@@ -0,0 +1,66 @@
+import {
+  OutgoingRecordQueryParams,
+  toBeDispatchedRecords,
+} from "@/record-management/services/api/recordOfficerService";
+import { MeDto } from "@/shared/dto/user/meDto";
+import { useQuery } from "@tanstack/react-query";
+import { useUserDetail } from "./useUserDetail";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+
+interface RecordContent {
+  nonSmartReceivers: any;
+  id: string;
+  subject: string;
+}
+
+export interface PendingRecord {
+  letterName: any;
+  preferredLanguage: string;
+  amharicSubmittedDate: string;
+  amharicApprovedDate: string;
+  approvedDate: string;
+  initiator: any;
+  from: string;
+  status: string;
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  statusKey: string;
+  content: RecordContent[];
+  referenceNumber: string | null;
+  submittedDate: string | null;
+  recordTypeKey: string;
+  receivingUnits: string[];
+  ID: string;
+  count: number;
+  counts: number;
+  isUrgent: boolean;
+  isSecured: boolean;
+}
+
+export const usePendingRecords = (params?: OutgoingRecordQueryParams) => {
+  const { userDetails } = useAuthUser();
+  const { permissionKeys } = useUserDetail(userDetails as MeDto);
+  const RO = permissionKeys.includes("can:dispatchRecords");
+
+  const { data, isLoading, isError, refetch } = useQuery<{
+    items: PendingRecord[];
+    count: number;
+  }>({
+    queryKey: ["pendingRecords", params],
+    queryFn: () => toBeDispatchedRecords(RO ? params : {}),
+    staleTime: 60 * 1000,
+    enabled: Boolean(RO),
+  });
+
+  const records = data?.items || [];
+  const pendingRecordsCount = data?.count || 0;
+  return {
+    pendingRecordsResponse: data,
+    records,
+    pendingRecordsCount,
+    isLoading,
+    isError,
+    refetch,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/usePositionPrefixes.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/usePositionPrefixes.ts
new file mode 100644
index 000000000..f59590507
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/usePositionPrefixes.ts
@@ -0,0 +1,48 @@
+import { useQuery } from "@tanstack/react-query";
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+
+export interface PositionPrefixDto {
+  id: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  positionId: string;
+  recordTypeKey: string;
+  unitId: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+const fetchPositionPrefixes = async (
+  unitId: string,
+  recordTypeKey: string = "external",
+  positionId?: string,
+): Promise<PositionPrefixDto[]> => {
+  try {
+    const params = new URLSearchParams();
+    if (positionId) {
+      params.append("positionId", positionId);
+    }
+    const queryString = params.toString();
+    const url = `/record-prefixes/list/by-position/${unitId}/${recordTypeKey}${queryString ? `?${queryString}` : ""}`;
+    const { data } = await recordAxiosInstance.get(url);
+    return data?.items || [];
+  } catch (error: any) {
+    console.error("Failed to fetch position prefixes:", error);
+    return [];
+  }
+};
+
+export const usePositionPrefixes = (
+  unitId: string,
+  recordTypeKey: string = "external",
+  positionId?: string,
+) => {
+  return useQuery({
+    queryKey: ["positionPrefixes", unitId, recordTypeKey, positionId],
+    queryFn: () => fetchPositionPrefixes(unitId, recordTypeKey, positionId),
+    enabled: !!unitId,
+    staleTime: 5 * 60 * 1000, // 5 minutes
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useRecordAssignment.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useRecordAssignment.ts
new file mode 100644
index 000000000..1b64331b7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useRecordAssignment.ts
@@ -0,0 +1,54 @@
+import {
+  AssignmentApiResponse,
+  AssignmentStep,
+} from "@/record-management/dto/AssignementStep";
+import { getMovementSlip } from "@/record-management/services/api/movementService";
+import { getRemarks } from "@/record-management/services/api/remarkService";
+
+import { useQuery } from "@tanstack/react-query";
+
+export const useRecordAssignments = (
+  recordId: string,
+  options?: { enabled?: boolean },
+) => {
+  return useQuery({
+    queryKey: ["assignments", recordId],
+    queryFn: () => getMovementSlip(recordId),
+    enabled: !!recordId && options?.enabled !== false,
+    staleTime: 0,
+    gcTime: 0,
+    refetchOnMount: "always",
+    refetchOnWindowFocus: true,
+    refetchOnReconnect: true,
+  });
+};
+
+export const useRemarks = (
+  recordId: string,
+  options?: { enabled?: boolean },
+) => {
+  return useQuery({
+    queryKey: ["remarks", recordId],
+    queryFn: () => getRemarks(recordId),
+    enabled: !!recordId && options?.enabled !== false,
+    staleTime: 0,
+    gcTime: 0,
+  });
+};
+
+export const transformAssignmentsToSteps = (
+  assignments: AssignmentApiResponse[]
+): AssignmentStep[] => {
+  return assignments.map((item) => {
+    return {
+      assignedDate: item.createdAt,
+      completedDate: null, // no completedDate yet
+      status:
+        item.status === "re_assigned"
+          ? "Reassigned"
+          : item.status === "draft"
+          ? "Pending"
+          : "Accepted",
+    };
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useRecordById.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useRecordById.ts
new file mode 100644
index 000000000..a666c7328
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useRecordById.ts
@@ -0,0 +1,12 @@
+import { fetchRecordById } from "@/record-management/services/api/userRecordService";
+import { useQuery } from "@tanstack/react-query";
+
+export const useRecordById = (id: string) => {
+  return useQuery({
+    queryKey: ["record", id],
+    queryFn: () => fetchRecordById(id),
+    enabled: !!id,
+    staleTime: 0,
+    gcTime: 0,
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useRecordCollaboratorComments.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useRecordCollaboratorComments.ts
new file mode 100644
index 000000000..21a4b3276
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useRecordCollaboratorComments.ts
@@ -0,0 +1,148 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import axios from "axios";
+import { useTranslation } from "react-i18next";
+
+import {
+  createRecordCollaboratorComment,
+  deleteRecordCollaboratorComment,
+  getMyRecordCollaboratorComments,
+  listRecordCollaboratorComments,
+  RecordCollaboratorCommentDto,
+  updateRecordCollaboratorComment,
+} from "@/record-management/services/api/recordCollaboratorCommentsService";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+interface UseRecordCollaboratorCommentsOptions {
+  recordId?: string;
+  contentId?: string;
+  collaborationId?: string;
+  enabled?: boolean;
+}
+
+interface AggregatedCollaboratorComments {
+  comments: RecordCollaboratorCommentDto[];
+  myComment: RecordCollaboratorCommentDto | null;
+}
+
+const sortComments = (items: RecordCollaboratorCommentDto[]) =>
+  [...items].sort((a, b) => {
+    const left = new Date(a.updatedAt || a.createdAt).getTime();
+    const right = new Date(b.updatedAt || b.createdAt).getTime();
+    return right - left;
+  });
+
+export const useRecordCollaboratorComments = ({
+  recordId,
+  contentId,
+  collaborationId,
+  enabled = true,
+}: UseRecordCollaboratorCommentsOptions) => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  const commentsQuery = useQuery<AggregatedCollaboratorComments>({
+    queryKey: [
+      "record-collaborator-comments",
+      recordId,
+      contentId,
+      collaborationId,
+    ],
+    enabled: enabled && Boolean(recordId) && Boolean(contentId),
+    queryFn: async () => {
+      const commentsResponse = await listRecordCollaboratorComments(
+        contentId as string,
+        {
+          skip: 0,
+          take: 100,
+          // order: "createdAt:DESC",
+        },
+      );
+
+      const myComments = collaborationId
+        ? await getMyRecordCollaboratorComments(collaborationId)
+        : [];
+
+      const versionFilteredComments = contentId
+        ? commentsResponse.items.filter(
+            (comment) => comment.recordContentId === contentId,
+          )
+        : commentsResponse.items;
+      const versionFilteredMyComments = contentId
+        ? myComments.filter((comment) => comment.recordContentId === contentId)
+        : myComments;
+
+      return {
+        comments: sortComments(versionFilteredComments),
+        myComment: versionFilteredMyComments[0] ?? null,
+      };
+    },
+    staleTime: 0,
+    refetchOnMount: true,
+    refetchOnWindowFocus: true,
+    refetchOnReconnect: true,
+  });
+
+  const invalidateComments = async () => {
+    await queryClient.invalidateQueries({
+      queryKey: [
+        "record-collaborator-comments",
+        recordId,
+        contentId,
+        collaborationId,
+      ],
+    });
+  };
+
+  const createMutation = useMutation({
+    mutationFn: createRecordCollaboratorComment,
+    onSuccess: invalidateComments,
+    onError: async (error) => {
+      if (axios.isAxiosError(error) && error.response?.status === 409) {
+        await handleError({
+          response: {
+            status: 409,
+            data: {
+              message: t(
+                "collaboration.commentExists",
+                "You have already commented on this record version.",
+              ),
+            },
+          },
+        });
+        return;
+      }
+
+      await handleError(error);
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: ({ id, comment }: { id: string; comment: string }) =>
+      updateRecordCollaboratorComment(id, { comment }),
+    onSuccess: invalidateComments,
+    onError: async (error) => {
+      await handleError(error);
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: deleteRecordCollaboratorComment,
+    onSuccess: invalidateComments,
+    onError: async (error) => {
+      await handleError(error);
+    },
+  });
+
+  return {
+    ...commentsQuery,
+    comments: commentsQuery.data?.comments ?? [],
+    myComment: commentsQuery.data?.myComment ?? null,
+    createComment: createMutation.mutateAsync,
+    updateComment: updateMutation.mutateAsync,
+    deleteComment: deleteMutation.mutateAsync,
+    isCreatingComment: createMutation.isPending,
+    isUpdatingComment: updateMutation.isPending,
+    isDeletingComment: deleteMutation.isPending,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useRecordPrefixOrSuffixes.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useRecordPrefixOrSuffixes.ts
new file mode 100644
index 000000000..f61f09938
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useRecordPrefixOrSuffixes.ts
@@ -0,0 +1,21 @@
+// import {
+//   fetchPrefixes,
+//   fetchSuffixes,
+// } from "@/record-management/services/api/prefixAndSuffixService";
+// import { useQuery } from "@tanstack/react-query";
+
+// export const useRecordPrefixes = () => {
+//   return useQuery({
+//     queryKey: ["record-prefixes"],
+//     queryFn: fetchPrefixes,
+//     staleTime: 5 * 60 * 1000,
+//   });
+// };
+
+// export const useRecordSuffixes = () => {
+//   return useQuery({
+//     queryKey: ["record-suffixes"],
+//     queryFn: fetchSuffixes,
+//     staleTime: 5 * 60 * 1000,
+//   });
+// };
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useRecordPreview.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useRecordPreview.ts
new file mode 100644
index 000000000..43444e4b4
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useRecordPreview.ts
@@ -0,0 +1,42 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { previewRecord } from "@/record-management/services/api/userRecordService";
+import { CreateOrEditLetter } from "../userRecords/common/formSchema";
+import { toast } from "sonner";
+import { HeaderFooterResponseDto } from "@/user-management/services/api/headerFooterService";
+import { OrganizationsPositions } from "@/record-management/services/api/departmentService";
+import { EmployeeWithUnitDto } from "@/user-management/dto/employees/employees";
+
+export const useRecordPreview = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const generatePreview = (
+    formData: CreateOrEditLetter,
+    files: File[] = [],
+    headers: HeaderFooterResponseDto[] = [],
+    footers: HeaderFooterResponseDto[] = [],
+    positionsData: OrganizationsPositions[] = [],
+    employeesData: EmployeeWithUnitDto[] = []
+  ) => {
+    // Navigate to preview page with state, replace current history entry for instant back navigation
+    // navigate("/record-management/userRecords/record-preview", {
+    //   state: {
+    //     formData,
+    //     files,
+    //     headers,
+    //     footers,
+    //     positionsData,
+    //     employeesData,
+    //   },
+    //   replace: false, // Don't replace so back button works properly
+    // });
+  };
+
+  return {
+    isLoading,
+    generatePreview,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useReport.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useReport.ts
new file mode 100644
index 000000000..719ee3c2e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useReport.ts
@@ -0,0 +1,184 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  getIncomingReport,
+  getReport,
+  Report,
+  getReportRO,
+  ReportRO,
+} from "@/record-management/services/api/reportService";
+import { MeDto } from "@/shared/dto/user/meDto";
+import { useUserDetail } from "./useUserDetail";
+import { useAuthUser } from "@/record-management/hooks/useAuthUser";
+
+export interface ReportIncoming {
+  status: string;
+  count: number;
+}
+
+export const useReport = (id: string) => {
+  const { userDetails } = useAuthUser();
+  const { isRO } = useUserDetail(userDetails as MeDto);
+  const { data, isLoading, isError, refetch } = useQuery<ReportIncoming[]>({
+    queryKey: ["report", id],
+    queryFn: () => getIncomingReport(id),
+    staleTime: 60 * 1000, // cache for 1 minute
+    enabled: !!id, // only run if id is truthy
+  });
+  const { data: dashboard } = useQuery<Report>({
+    queryKey: ["dashbordReport"],
+    queryFn: () => getReport(),
+    staleTime: 60 * 1000, // cache for 1 minute
+    enabled: Boolean(!isRO), // only run if id is truthy
+  });
+  const { data: ROdashboard } = useQuery<ReportRO>({
+    queryKey: ["dashbordReportRO"],
+    queryFn: () => getReportRO(),
+    staleTime: 60 * 1000, // cache for 1 minute
+    enabled: Boolean(isRO), // only run if ro is truthy
+  });
+  const report = data ?? []; // ensure we always return an array
+  // Calculate Total For User
+
+  // internal and internal memo
+  const employeeDraftForYourReference =
+    dashboard?.incomingStatusCountByEmployee?.for_your_reference?.draft || 0;
+  const positionDraftForYourReference =
+    dashboard?.incomingStatusCountByPosition?.for_your_reference?.draft || 0;
+
+  const employeeDraftInternal =
+    dashboard?.incomingStatusCountByEmployee?.internal?.draft || 0;
+  const positionDraftinternal =
+    dashboard?.incomingStatusCountByPosition?.internal?.draft || 0;
+  const employeeDraftInternalMemo =
+    dashboard?.incomingStatusCountByEmployee?.internal_memo?.draft || 0;
+  const positionDraftinternalMemo =
+    dashboard?.incomingStatusCountByPosition?.internal_memo?.draft || 0;
+  const TotalDraftInternal =
+    employeeDraftInternal +
+    positionDraftinternal +
+    employeeDraftInternalMemo +
+    positionDraftinternalMemo;
+  const TotalDraftForYourRef =
+    employeeDraftForYourReference + positionDraftForYourReference;
+  const UrgentemployeeDraftInternal =
+    dashboard?.incomingStatusCountByEmployee?.internal?.urgent?.draft || 0;
+  const UrgentpositionDraftInternal =
+    dashboard?.incomingStatusCountByPosition?.internal?.urgent?.draft || 0;
+  const UrgentemployeeDraftInternalMemo =
+    dashboard?.incomingStatusCountByEmployee?.internal_memo?.urgent?.draft || 0;
+  const UrgentpositionDraftInternalMemo =
+    dashboard?.incomingStatusCountByPosition?.internal_memo?.urgent?.draft || 0;
+  const TotalUrgentDraftInternal =
+    UrgentemployeeDraftInternal +
+    UrgentpositionDraftInternal +
+    UrgentemployeeDraftInternalMemo +
+    UrgentpositionDraftInternalMemo;
+  // external
+  const employeeDraftNonSmartUser =
+    dashboard?.incomingStatusCountByEmployee?.non_smart_user?.draft || 0;
+  const positionDraftNonSmartUser =
+    dashboard?.incomingStatusCountByPosition?.non_smart_user?.draft || 0;
+  const employeeDraftExternalNonSmartUser =
+    dashboard?.incomingStatusCountByEmployee?.external_non_smart_user?.draft ||
+    0;
+  const positionDraftExternalNonSmartUser =
+    dashboard?.incomingStatusCountByPosition?.external_non_smart_user?.draft ||
+    0;
+  const employeeDraftExternal =
+    dashboard?.incomingStatusCountByEmployee?.external?.draft || 0;
+  const positionDraftExternal =
+    dashboard?.incomingStatusCountByPosition?.external?.draft || 0;
+  const TotalDraftsNonSmart =
+    employeeDraftNonSmartUser + positionDraftNonSmartUser;
+  const TotalDraftsExternalNonSmart =
+    employeeDraftExternalNonSmartUser + positionDraftExternalNonSmartUser;
+  const TotalDraftsExternal = employeeDraftExternal + positionDraftExternal;
+  const TotalDraftExternal =
+    TotalDraftsExternal + TotalDraftsExternalNonSmart + TotalDraftsNonSmart;
+  const TotalDraftCC = dashboard?.incomingCCCounts?.Unseen || 0;
+  const UrgentemployeeDraftNonSmart =
+    dashboard?.incomingStatusCountByEmployee?.non_smart_user?.urgent?.draft ||
+    0;
+  const UrgentpositionDraftNonSmart =
+    dashboard?.incomingStatusCountByPosition?.non_smart_user?.urgent?.draft ||
+    0;
+  const UrgentemployeeDraftExternalNonSmart =
+    dashboard?.incomingStatusCountByEmployee?.external_non_smart_user?.urgent
+      ?.draft || 0;
+  const UrgentpositionDraftExternalNonSmart =
+    dashboard?.incomingStatusCountByPosition?.external_non_smart_user?.urgent
+      ?.draft || 0;
+  const UrgentemployeeDraftExternal =
+    dashboard?.incomingStatusCountByEmployee?.external?.urgent?.draft || 0;
+  const UrgentpositionDraftExternal =
+    dashboard?.incomingStatusCountByPosition?.external?.urgent?.draft || 0;
+  const TotalUrgentDraftExternal =
+    UrgentemployeeDraftExternal +
+    UrgentpositionDraftExternal +
+    UrgentemployeeDraftExternalNonSmart +
+    UrgentpositionDraftExternalNonSmart +
+    UrgentemployeeDraftNonSmart +
+    UrgentpositionDraftNonSmart;
+  // Calculate Total For RO
+  const ROIncomingNonSmart =
+    ROdashboard?.recordCount?.non_smart_user?.not_assigned || 0;
+  const ROIncomingExternalNonSmart =
+    ROdashboard?.recordCount?.external_non_smart_user?.not_assigned || 0;
+  const ROIncomingSmart = ROdashboard?.recordBoxCount?.draft || 0;
+  const ROTotalDraftIncoming =
+    ROIncomingNonSmart + ROIncomingExternalNonSmart + ROIncomingSmart;
+  const ROPending = ROdashboard?.outgoingInstanceCount?.Approved || 0;
+  const ROPendingUrgent =
+    ROdashboard?.outgoingInstanceCount?.urgent?.Approved || 0;
+  const totalOutgoing = ROdashboard?.outgoingInstanceCount?.Dispatched || 0;
+  const totalArrayIncoming = [ROdashboard?.recordCount];
+  const smartIncomingArray = [ROdashboard?.recordBoxCount];
+  const totalIncomingSmart = smartIncomingArray.reduce((acc, item) => {
+    if (!item) return acc;
+
+    const itemSum = Object.values(item)
+      .filter((value) => typeof value === "number")
+      .reduce((sum, num) => sum + num, 0);
+
+    return acc + itemSum;
+  }, 0);
+
+  const totalIncoming = totalArrayIncoming.reduce((acc, item) => {
+    if (!item) return acc;
+
+    const itemSum = Object.entries(item)
+      .filter(
+        ([key]) =>
+          key !== "internal" && key !== "internal_memo" && key !== "external",
+      )
+      .flatMap(([_, obj]) => Object.values(obj))
+      .reduce((sum, num) => sum + num, 0);
+
+    return acc + itemSum;
+  }, 0);
+  return {
+    report,
+    isLoading,
+    isError,
+    refetch,
+    dashboard,
+    ROdashboard,
+    TotalDraftInternal,
+    TotalDraftExternal,
+    TotalDraftCC,
+    TotalDraftsExternal,
+    TotalDraftsExternalNonSmart,
+    TotalDraftsNonSmart,
+    ROIncomingNonSmart,
+    ROIncomingExternalNonSmart,
+    ROTotalDraftIncoming,
+    ROIncomingSmart,
+    ROPending,
+    TotalUrgentDraftInternal,
+    TotalUrgentDraftExternal,
+    ROPendingUrgent,
+    ROTotalIncoming: totalIncoming + totalIncomingSmart,
+    ROTotalOutgoing: totalOutgoing,
+    TotalDraftForYourRef,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useReportByHooks.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useReportByHooks.ts
new file mode 100644
index 000000000..e2c674852
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useReportByHooks.ts
@@ -0,0 +1,211 @@
+import { useInternalIncomingRecords } from "./useInternalIncomingRecords";
+import { useExternalIncomingRecords } from "./useExternalIncomingRecords";
+import { useCCIncomingRecords } from "./useCCIncomingRecords";
+import { useApprovalTasks } from "./useApprovalTasks";
+
+import { useMemo } from "react";
+
+export interface UseReportByHooksParams {
+  pagination?: {
+    pageIndex: number;
+    pageSize: number;
+  };
+  isSecretary?: boolean;
+  searchParams?: Record<string, any>;
+}
+
+export const useReportByHooks = ({
+  pagination = { pageIndex: 0, pageSize: 10 },
+  isSecretary = false,
+  searchParams = {},
+}: UseReportByHooksParams = {}) => {
+  const useParentCounts = isSecretary;
+  // Base params for all queries
+  const baseParams = {
+    skip: pagination.pageIndex * 1,
+    take: 1,
+    orderBy: "record.dispatchedDate:DESC,record.createdAt:DESC",
+    status: "draft",
+    fetchParent: useParentCounts,
+    ...searchParams,
+  };
+
+  // Internal Incoming Records - Draft
+  const {
+    InternalCount2: internalDraftCountSelf = 0,
+    internalParentCount: internalDraftCountParent = 0,
+    isLoading: internalLoading,
+  } = useInternalIncomingRecords({
+      pageIndex: baseParams.skip,
+      pageSize: baseParams.take,
+      status: "draft",
+      fetchParent: useParentCounts,
+      ...searchParams,
+    });
+  const internalDraftCount = useParentCounts
+    ? internalDraftCountParent
+    : internalDraftCountSelf;
+
+  // External Incoming Records - Draft (non_smart_user)
+  const {
+    externalCount2: nonSmartUserDraftCountSelf = 0,
+    externalParentCount: nonSmartUserDraftCountParent = 0,
+    isLoading: nonSmartUserLoading,
+  } = useExternalIncomingRecords({
+    pageIndex: baseParams.skip,
+    pageSize: baseParams.take,
+    status: "draft",
+    fetchParent: useParentCounts,
+    ...searchParams,
+    recordType: ["non_smart_user"],
+  });
+  const nonSmartUserDraftCount = useParentCounts
+    ? nonSmartUserDraftCountParent
+    : nonSmartUserDraftCountSelf;
+
+  // External Incoming Records - Draft (external_non_smart_user)
+  const {
+    externalCount2: externalNonSmartUserDraftCountSelf = 0,
+    externalParentCount: externalNonSmartUserDraftCountParent = 0,
+    isLoading: externalNonSmartUserLoading,
+  } = useExternalIncomingRecords({
+    pageIndex: baseParams.skip,
+    pageSize: baseParams.take,
+    status: "draft",
+    fetchParent: useParentCounts,
+    ...searchParams,
+    recordType: ["external_non_smart_user"],
+  });
+  const externalNonSmartUserDraftCount = useParentCounts
+    ? externalNonSmartUserDraftCountParent
+    : externalNonSmartUserDraftCountSelf;
+
+  const {
+    externalCount2: externalSmartDraftCountSelf = 0,
+    externalParentCount: externalSmartDraftCountParent = 0,
+    isLoading: externalSmartDraftLoading,
+  } = useExternalIncomingRecords({
+    pageIndex: baseParams.skip,
+    pageSize: baseParams.take,
+    status: "draft",
+    fetchParent: useParentCounts,
+    ...searchParams,
+    recordType: ["external"],
+  });
+  const externalSmartDraftCount = useParentCounts
+    ? externalSmartDraftCountParent
+    : externalSmartDraftCountSelf;
+
+  // External Incoming Records - Draft (external)
+  const {
+    externalCount2: externalDraftCountSelf = 0,
+    externalParentCount: externalDraftCountParent = 0,
+    isLoading: externalLoading,
+  } = useExternalIncomingRecords({
+    pageIndex: baseParams.skip,
+    pageSize: baseParams.take,
+    status: "draft",
+    fetchParent: useParentCounts,
+    ...searchParams,
+    recordType: ["external_non_smart_user", "non_smart_user"],
+  });
+  const externalDraftCount = useParentCounts
+    ? externalDraftCountParent
+    : externalDraftCountSelf;
+
+  // CC Incoming Records - Unseen (equivalent to unread)
+  const {
+    ccCount: ccUnseenCountSelf = 0,
+    ccParentCount: ccUnseenCountParent = 0,
+    isLoading: ccLoading,
+  } = useCCIncomingRecords({
+      skip: baseParams.skip,
+      take: baseParams.take,
+      fetchParent: useParentCounts,
+      ...searchParams,
+      hasSeen: false,
+    });
+  const ccUnseenCount = useParentCounts
+    ? ccUnseenCountParent
+    : ccUnseenCountSelf;
+
+  // For Your Reference - Draft
+  const {
+    ccCount: forYourRefDraftCountSelf = 0,
+    ccParentCount: forYourRefDraftCountParent = 0,
+    isLoading: forYourRefLoading,
+  } = useCCIncomingRecords({
+      skip: pagination.pageIndex * 1,
+      take: 1,
+      orderBy: "record.dispatchedDate:DESC,record.createdAt:DESC",
+      isForYourReference: true,
+      ...searchParams,
+      fetchParent: useParentCounts,
+      hasSeen: false,
+    });
+  const forYourRefDraftCount = useParentCounts
+    ? forYourRefDraftCountParent
+    : forYourRefDraftCountSelf;
+
+  // Approval Tasks - Active
+  const { approvalCount = 0, isLoading: approvalLoading } = useApprovalTasks({
+    skip: pagination.pageIndex * 1,
+    take: 1,
+  });
+
+  // Compute total counts
+  const totalCounts = useMemo(
+    () => ({
+      internalDraftCount,
+      nonSmartUserDraftCount,
+      externalNonSmartUserDraftCount,
+      externalDraftCount,
+      externalSmartDraftCount,
+      ccUnseenCount,
+      forYourRefDraftCount,
+      approvalCount,
+      totalDraftCount:
+        internalDraftCount +
+        externalDraftCount +
+        externalSmartDraftCount +
+        forYourRefDraftCount,
+      totalUnseenCount: ccUnseenCount,
+      totalApprovalCount: approvalCount,
+    }),
+    [
+      internalDraftCount,
+      nonSmartUserDraftCount,
+      externalNonSmartUserDraftCount,
+      externalDraftCount,
+      externalSmartDraftCount,
+      ccUnseenCount,
+      forYourRefDraftCount,
+      approvalCount,
+    ],
+  );
+
+  const isLoading =
+    internalLoading ||
+    nonSmartUserLoading ||
+    externalNonSmartUserLoading ||
+    externalSmartDraftLoading ||
+    externalLoading ||
+    ccLoading ||
+    forYourRefLoading ||
+    approvalLoading;
+
+  return {
+    counts: totalCounts,
+    isLoading,
+    breakdownCounts: {
+      internal: internalDraftCount,
+      nonSmartUser: nonSmartUserDraftCount,
+      externalNonSmartUser: externalNonSmartUserDraftCount,
+      external: externalDraftCount,
+      ccUnseen: ccUnseenCount,
+      forYourReference: forYourRefDraftCount,
+      approval: approvalCount,
+      externalSmart: externalSmartDraftCount,
+    },
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useSeals.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useSeals.ts
new file mode 100644
index 000000000..527a1c403
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useSeals.ts
@@ -0,0 +1,79 @@
+// useSeal.ts
+import { useQuery, useQueries, UseQueryResult } from "@tanstack/react-query";
+
+import {
+  fetchSeal,
+  fetchSealById,
+} from "@/record-management/services/api/sealService";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+
+export interface Seal {
+  id: string;
+  isCurrent: boolean;
+  uploadedSuccessfully: boolean;
+  // other seal properties
+}
+
+export interface SealDetail {
+  id: string;
+  name: { am: string; en?: string };
+  presigned: string;
+  isCurrent: boolean;
+  uploadedSuccessfully: boolean;
+}
+
+export const useSeal = () => {
+  const { userDetails } = useAuthUser();
+  const unitId = userDetails?.employee?.[0]?.unitId ?? null;
+
+  const {
+    data: sealsData,
+    isLoading: isSealsLoading,
+    isError: isSealsError,
+    refetch,
+  } = useQuery<{ items: Seal[] }, Error>({
+    queryKey: ["seals", unitId],
+    queryFn: () => {
+      if (!unitId) {
+        throw new Error("Organization unit ID is required");
+      }
+
+      return fetchSeal(unitId);
+    },
+    staleTime: 1000 * 60 * 1,
+    enabled: !!unitId, // Only fetch if unitId exists
+  });
+
+  // Filter to only include active and successfully uploaded seals
+  const activeSeals = (sealsData?.items || []).filter(
+    (seal: Seal) => seal.isCurrent && seal.uploadedSuccessfully
+  );
+
+  const sealDetailQueries = useQueries({
+    queries: activeSeals.map((seal: Seal) => ({
+      queryKey: ["sealDetails", seal.id],
+      queryFn: () => fetchSealById(seal.id),
+      enabled: !!seal.id && !!sealsData?.items,
+    })),
+  }) as UseQueryResult<SealDetail, Error>[];
+
+  const isLoading =
+    isSealsLoading || sealDetailQueries.some((q) => q.isLoading);
+  const isError = isSealsError || sealDetailQueries.some((q) => q.isError);
+
+  // Extract successful queries only and filter out deactivated seals
+  const sealDetailsData = sealDetailQueries
+    .filter(
+      (q) =>
+        q.isSuccess && q.data && q.data.isCurrent && q.data.uploadedSuccessfully
+    )
+    .map((q) => q.data);
+
+  return {
+    seals: activeSeals,
+    sealDetailsData,
+    isLoading,
+    isError,
+    refetch,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useSettings.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useSettings.ts
new file mode 100644
index 000000000..1d0aa20e9
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useSettings.ts
@@ -0,0 +1,305 @@
+import { useQueries, useQuery } from "@tanstack/react-query";
+import {
+  fetchAllInternalDepartments,
+  fetchAssignedScopeDepartments,
+  fetchCurrentDepartment,
+  fetchInternalDepartments,
+  fetchImmediateChildDepartments,
+  fetchInternalReceivingDepartments,
+  fetchScopedDepartments,
+  fetchScopedEmployees,
+} from "@/record-management/services/api/departmentService";
+import {
+  fetchModifiedValidOrganization,
+  fetchUnitById,
+  fetchValidOrganization,
+} from "@/record-management/services/api/organizationService";
+import { fetchRecordTypes } from "@/record-management/services/api/recordTypesService";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import {
+  fetchCurrentEmployees,
+  fetchRecordReceivingEmployees,
+} from "@/record-management/services/api/employeesService";
+import { UnitDto } from "@/user-management/dto/unit/unitDto";
+import { Params } from "@/user-management/services/api/positionTypesService";
+
+const FIVE_MIN = 5 * 60 * 1000;
+
+const useSettings = (params?: Params) => {
+  const { userDetails } = useAuthUser();
+  const unitId = userDetails?.employee?.[0]?.unitId ?? null;
+  const take = 300;
+  const skip = 0;
+  /* ───────────────── Organizations ───────────────── */
+  const {
+    data: orgsResponse,
+    isLoading: loadingOrgs,
+    error: orgsError,
+  } = useQuery({
+    queryKey: ["organizations", { take: 50, skip: 0 }], // include param
+    queryFn: fetchValidOrganization,
+    enabled: !!unitId,
+    staleTime: FIVE_MIN,
+  });
+  const {
+    data: orgsModifiedResponse,
+    isLoading: loadingModifiedOrgs,
+    error: orgsModifiedError,
+  } = useQuery({
+    queryKey: ["organizationsModified", { take: 50, skip: 0 }], // include param
+    queryFn: fetchModifiedValidOrganization,
+    staleTime: FIVE_MIN,
+  });
+  const {
+    data: exteranlOrgsResponse,
+    isLoading: loadingExternalOrgs,
+    error: externalOrgsError,
+  } = useQuery({
+    queryKey: ["organizations"], // include param
+    queryFn: fetchValidOrganization,
+    staleTime: FIVE_MIN,
+  });
+  /* ───────────────── Departments (internal) ───────────────── */
+  const {
+    data: deptResponse,
+    isLoading: loadingDepts,
+    error: deptsError,
+  } = useQuery({
+    queryKey: ["departments"],
+    queryFn: () => fetchInternalReceivingDepartments(),
+    enabled: !!unitId,
+    staleTime: FIVE_MIN,
+  });
+
+  /* ───────────────── Record Types (tenant-wide) ───────────────── */
+  const {
+    data: recordTypesResponse,
+    isLoading: loadingRecordTypes,
+    error: recordTypesError,
+  } = useQuery({
+    queryKey: ["record-types"],
+    queryFn: fetchRecordTypes,
+    staleTime: FIVE_MIN,
+  });
+  /* ───────────────── Current Employees ───────────────── */
+  const {
+    data: allDeptResponse,
+    isLoading: loadingAllDepts,
+    error: AllDeptsError,
+  } = useQuery({
+    queryKey: ["departments"],
+    queryFn: () =>
+      fetchInternalReceivingDepartments({
+        take: 1000, // Adjust as needed
+        skip: 0,
+      }),
+
+    staleTime: FIVE_MIN,
+    enabled: !!unitId,
+  });
+  const {
+    data: allScopedDeptResponse,
+    isLoading: loadingAllScopedDepts,
+    error: AllScopedDeptsError,
+  } = useQuery({
+    queryKey: ["scoped-departments"],
+    queryFn: () =>
+      fetchScopedDepartments({
+        take: 1000, // Adjust as needed
+        skip: 0,
+      }),
+
+    staleTime: FIVE_MIN,
+    enabled: !!unitId,
+  });
+  const {
+    data: departmentsForAssign,
+    isLoading: loadingdepartmentsForAssign,
+    error: departmentsForAssignError,
+  } = useQuery({
+    queryKey: ["assigned-departments"],
+    queryFn: () =>
+      fetchAssignedScopeDepartments({
+        take: 1000, // Adjust as needed
+        skip: 0,
+      }),
+
+    staleTime: FIVE_MIN,
+    enabled: !!unitId,
+  });
+  /* ───────────────── Scopeed Employees ───────────────── */
+  const {
+    data: allScopedEmployeeResponse,
+    isLoading: loadingAllScopedEmployees,
+    error: AllScopedEmployeesError,
+  } = useQuery({
+    queryKey: ["scoped-Employees"],
+    queryFn: () =>
+      fetchScopedEmployees({
+        take: 1000, // Adjust as needed
+        skip: 0,
+      }),
+
+    staleTime: FIVE_MIN,
+    enabled: !!unitId,
+  });
+  /* ───────────────── Current Department ───────────────── */
+  const {
+    data: positionResponse,
+    isLoading: loadingPosition,
+    error: positionError,
+  } = useQuery({
+    queryKey: ["current-department", unitId],
+    queryFn: () => fetchCurrentDepartment(unitId!),
+    enabled: !!unitId,
+    staleTime: FIVE_MIN,
+  });
+  /*-----------------------employees-------------/
+  /* ───────────────── Current Employees ───────────────── */
+  const {
+    data: employeesResponse,
+    isLoading: loadingEmployees,
+    error: employeesError,
+  } = useQuery({
+    queryKey: ["current-employees", unitId, take, skip],
+    queryFn: () => fetchCurrentEmployees({ take, skip }, unitId!),
+    enabled: !!unitId,
+    staleTime: FIVE_MIN,
+  });
+
+  const {
+    data: currentEmployeesResponse,
+    isLoading: loadingCurrentEmployees,
+    error: CurrentEmployeesError,
+  } = useQuery({
+    queryKey: ["current-employees", unitId],
+    queryFn: () => fetchRecordReceivingEmployees({ take, skip }, unitId!),
+    enabled: !!unitId,
+    staleTime: FIVE_MIN,
+  });
+  const { data: countData } = useQuery({
+    queryKey: ["all-departments-count", unitId],
+    queryFn: () => fetchAllInternalDepartments(unitId!, { take: 1, skip: 0 }),
+    enabled: !!unitId,
+    staleTime: FIVE_MIN,
+  });
+
+  const totalCount = countData?.count ?? 0;
+
+  // Second query: fetch all using real count
+  const {
+    data: allPostionList,
+    isLoading: loadingPositionList,
+    error: allPostionListError,
+  } = useQuery({
+    queryKey: ["postion-list", unitId],
+    queryFn: () => fetchAllInternalDepartments(unitId!, { take, skip }),
+    enabled: !!unitId,
+    staleTime: FIVE_MIN,
+  });
+  const {
+    data: allDepratments,
+    isLoading: loadingallDepratments,
+    error: allDepratmentsError,
+  } = useQuery({
+    queryKey: ["all-departments", unitId, totalCount],
+    queryFn: () =>
+      fetchAllInternalDepartments(unitId!, { take: totalCount, skip: 0 }),
+    enabled: !!unitId && totalCount > 0,
+    staleTime: FIVE_MIN,
+  });
+  /*--------- Departmenst (immediate child) ----- */
+  const {
+    data: immedateChildResponse,
+    isLoading: loadingImmedateChildDepts,
+    error: deptsImmedateChildError,
+  } = useQuery({
+    queryKey: ["immediate-departments"],
+    queryFn: () => fetchImmediateChildDepartments(),
+    enabled: !!unitId,
+    staleTime: FIVE_MIN,
+  });
+
+  return {
+    /* raw lists */
+    allOrgs: orgsResponse?.items ?? [],
+    allModifiedOrgs: orgsModifiedResponse ?? [],
+    allDepartmentUnits: deptResponse?.items ?? [],
+    listPositionResponse: positionResponse,
+    alluser: employeesResponse?.items ?? [],
+    listAllDepartmentResponse: allDeptResponse?.items ?? [],
+    allExternalOrgs: exteranlOrgsResponse?.items ?? [],
+    allScopedDepartments: allScopedDeptResponse?.items ?? [],
+    allScopedEmployees: allScopedEmployeeResponse?.items ?? [],
+    allPostionList: allPostionList?.items ?? [],
+    immedateChildResponse: immedateChildResponse?.items ?? [],
+    allValidDepartments: departmentsForAssign?.items ?? [],
+    allDepratments: allDepratments?.items ?? [],
+    allDepartmentsCount: allDepratments?.count,
+
+    /* lookup tables */
+    recordTypes: recordTypesResponse?.items ?? [],
+
+    employeesResponse,
+    currentEmployeesResponse,
+
+    /* loading / error flags */
+    isLoading:
+      loadingOrgs ||
+      loadingDepts ||
+      loadingRecordTypes ||
+      loadingPosition ||
+      loadingEmployees ||
+      loadingCurrentEmployees ||
+      loadingAllDepts ||
+      loadingExternalOrgs ||
+      loadingAllScopedDepts ||
+      loadingAllScopedEmployees ||
+      loadingallDepratments ||
+      loadingdepartmentsForAssign ||
+      loadingImmedateChildDepts,
+
+    error:
+      orgsError ||
+      deptsError ||
+      recordTypesError ||
+      positionError ||
+      employeesError ||
+      CurrentEmployeesError ||
+      AllDeptsError ||
+      externalOrgsError ||
+      AllScopedDeptsError ||
+      AllScopedEmployeesError ||
+      allDepratmentsError ||
+      departmentsForAssignError ||
+      deptsImmedateChildError,
+  };
+};
+
+export const useUnitsByIds = (unitIds: string[] | string | string[][]) => {
+  // Flatten nested arrays and normalize to a flat array of strings
+  const idsArray = Array.isArray(unitIds)
+    ? unitIds.flat().map(String) // flatten and ensure all are strings
+    : [unitIds];
+
+  // Use useQueries for multiple IDs
+  const queries = useQueries({
+    queries: idsArray.map((id) => ({
+      queryKey: ["unit", id],
+      queryFn: () => fetchUnitById(id),
+      enabled: !!id,
+    })),
+  });
+
+  // Extract results
+  const units: UnitDto[] = queries
+    .filter((q) => !q.isLoading && !q.error && q.data)
+    .map((q) => q.data as UnitDto);
+
+  const isLoading = queries.some((q) => q.isLoading);
+  const hasError = queries.some((q) => !!q.error);
+
+  return { units, isLoading, hasError, queries };
+};
+
+export default useSettings;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useSignatureAndTeeterWithPresigned.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useSignatureAndTeeterWithPresigned.ts
new file mode 100644
index 000000000..bb474530d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useSignatureAndTeeterWithPresigned.ts
@@ -0,0 +1,77 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  fetchMyTeetersList,
+  fetchSignatureList,
+  fetchSignaturePresigned,
+  fetchTeeterPresigned,
+  fetchTeetersList,
+} from "@/record-management/services/api/signatureAndTeeterService";
+import { UploadedTeeter } from "../Settings/uploadTeeterandSingature";
+
+export const useSignatureListWithPresigned = (employeeId: string) => {
+  return useQuery({
+    queryKey: ["signatureListWithPresigned", employeeId],
+    queryFn: async () => {
+      const meta = await fetchSignatureList(employeeId);
+
+      const current = meta.items.find(
+        (s) => s.isCurrent && s.uploadedSuccessfully,
+      );
+      let presigned: string | null = null;
+
+      if (current?.id) {
+        const res = await fetchSignaturePresigned(current.id);
+        presigned = res.presigned;
+      }
+
+      return {
+        ...meta,
+        presignedSignatureUrl: presigned,
+        signatureId: current?.id ?? null,
+      };
+    },
+    enabled: !!employeeId,
+    staleTime: 0,
+    refetchOnMount: true,
+    refetchOnWindowFocus: true,
+    refetchOnReconnect: true,
+  });
+};
+
+export const useTeetersListWithPresigned = (locale?: string) => {
+  return useQuery({
+    queryKey: ["teetersListWithPresigned", locale ?? ""],
+    queryFn: async () => {
+      const meta = await fetchMyTeetersList();
+
+      // Keep stamps that match the requested locale OR have no locale set.
+      // This gives the dropdown: locale-specific stamps + universal (null) stamps.
+      const current = meta.items.filter(
+        (t) =>
+          t.uploadedSuccessfully &&
+          t.isCurrent &&
+          (!locale || !t.locale || t.locale === locale),
+      );
+      const presignedTeeters: UploadedTeeter[] = await Promise.all(
+        current.map(async (item) => {
+          const { presigned } = await fetchTeeterPresigned(item.id);
+          return {
+            id: item.id,
+            url: presigned,
+            name: item?.name.en,
+            locale: item.locale,
+          };
+        }),
+      );
+
+      return {
+        ...meta,
+        presignedTeeters,
+      };
+    },
+    staleTime: 0,
+    refetchOnMount: true,
+    refetchOnWindowFocus: true,
+    refetchOnReconnect: true,
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useSignatureTeeterLists.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useSignatureTeeterLists.ts
new file mode 100644
index 000000000..281ede42c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useSignatureTeeterLists.ts
@@ -0,0 +1,29 @@
+import {
+  SignatureListResponse,
+  TeeterListResponse,
+} from "@/record-management/dto/userRecords/teetersAndSignatureDto";
+import {
+  fetchSignatureList,
+  fetchTeetersList,
+} from "@/record-management/services/api/signatureAndTeeterService";
+import { useQuery, UseQueryOptions } from "@tanstack/react-query";
+
+/* ─────────────────  Signature  ───────────────── */
+
+export const useSignatureList = <TData = SignatureListResponse>(id: string) =>
+  useQuery({
+    queryKey: ["signatureList"],
+    queryFn: () => fetchSignatureList(id),
+    enabled: !!id,
+    staleTime: 5 * 60 * 1000,
+  });
+
+/* ─────────────────  Teeters (Amharic / English)  ───────────────── */
+
+export const useTeetersList = <TData = TeeterListResponse>(id: string) =>
+  useQuery({
+    queryKey: ["teetersList"],
+    queryFn: () => fetchTeetersList(id),
+    enabled: !!id,
+    staleTime: 5 * 60 * 1000,
+  });
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useSocket.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useSocket.tsx
new file mode 100644
index 000000000..3140c7b15
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useSocket.tsx
@@ -0,0 +1,167 @@
+// src/hooks/useNotificationSocket.tsx
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { io, Socket } from "socket.io-client";
+import { toast } from "sonner";
+import { getEnvUrl } from "@/shared/config/env";
+import { useReminder } from "@/shared/hooks/useReminder";
+
+// Define notification data structure
+export interface INotification {
+  id?: string;
+  message: string;
+  timestamp?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  isSeen?: boolean;
+  itemId?: string;
+  subject?: { en?: string; am?: string } | string;
+  metadata?: { route?: string; recordType?: string };
+  type?: "info" | "warning" | "error";
+}
+
+// Define context value type
+interface NotificationContextValue {
+  socket: Socket | null;
+  notifications: INotification[];
+  scheduleReminder: (notification: INotification, minutes: number) => void;
+}
+
+// Create the Notification context
+const NotificationContext = createContext<NotificationContextValue>({
+  socket: null,
+  notifications: [],
+  scheduleReminder: () => {},
+});
+
+// Define props for the provider
+interface NotificationProviderProps {
+  userId: string;
+  children: React.ReactNode;
+}
+
+// Notification provider component
+export const NotificationProvider: React.FC<NotificationProviderProps> = ({
+  userId,
+  children,
+}) => {
+  const notificationUrl = getEnvUrl("VITE_NOTIFICATION_URL");
+  const socketRef = useRef<Socket | null>(null);
+  const [notifications, setNotifications] = useState<INotification[]>([]);
+  const { scheduleReminder: scheduleReminderHook } = useReminder();
+
+  // Request browser notification permission once
+  useEffect(() => {
+    if ("Notification" in window && Notification.permission !== "granted") {
+      Notification.requestPermission().then((permission) => {
+        if (permission !== "granted") {
+          console.warn("Browser notifications are disabled by the user.");
+        }
+      });
+    }
+  }, []);
+
+  // Function to schedule a reminder from a notification
+  const scheduleReminder = (notification: INotification, minutes: number) => {
+    const remindAt = new Date(Date.now() + minutes * 60 * 1000).toISOString();
+    
+    const subject = typeof notification.subject === "object" 
+      ? notification.subject 
+      : { en: String(notification.subject || "Notification") };
+
+    scheduleReminderHook({
+      id: `reminder-${notification.id || Date.now()}`,
+      notificationId: notification.id || `notif-${Date.now()}`,
+      message: notification.message,
+      subject: { 
+        en: subject.en || "Notification",
+        am: subject.am 
+      },
+      remindAt,
+      itemId: notification.itemId || "",
+      metadata: notification.metadata,
+    });
+
+    toast.success(`Reminder set for ${minutes} minutes from now`);
+  };
+
+  // Connect socket when userId changes
+  useEffect(() => {
+    if (!userId) return;
+
+    // Disconnect any existing socket before creating a new one to prevent leaks
+    if (socketRef.current) {
+      socketRef.current.disconnect();
+      socketRef.current = null;
+    }
+
+    const socket = io(notificationUrl, {
+      transports: ["websocket"],
+      query: { id: userId, type: "user" },
+      reconnection: true,
+      reconnectionAttempts: 15,
+      reconnectionDelay: 1000,
+      reconnectionDelayMax: 30000,
+    });
+
+    socketRef.current = socket;
+
+    // Listen for notifications
+    socket.on("my-notification", (data: INotification) => {
+      if (!data?.message) return;
+
+      const normalized: INotification = {
+        ...data,
+        id: data.id || `rt-${Date.now()}`,
+        createdAt: data.createdAt || new Date().toISOString(),
+        updatedAt: data.updatedAt || data.createdAt || new Date().toISOString(),
+        isSeen: data.isSeen ?? false,
+        itemId: data.itemId || data.id || "",
+      };
+
+      // Show toast popup
+      toast(normalized.message, {
+        description: new Date().toLocaleTimeString(),
+        duration: 4000,
+      });
+
+      // Add to notification list
+      setNotifications((prev) => {
+        const deduped = prev.filter((item) => item.id !== normalized.id);
+        return [normalized, ...deduped];
+      });
+
+      // Broadcast to the shared notification hook for site-level sync
+      window.dispatchEvent(
+        new CustomEvent("record-management:notification-received", {
+          detail: normalized,
+        })
+      );
+
+      // Show browser notification if permission is granted
+      if ("Notification" in window && Notification.permission === "granted") {
+        new Notification("New Notification", { body: normalized.message });
+      }
+    });
+
+    return () => {
+      socket.disconnect();
+      socketRef.current = null;
+    };
+  }, [notificationUrl, userId]);
+
+  return (
+    <NotificationContext.Provider
+      value={{ socket: socketRef.current, notifications, scheduleReminder }}>
+      {children}
+    </NotificationContext.Provider>
+  );
+};
+
+// Custom hook to use the notification context
+export const useSocketNotification = () => useContext(NotificationContext);
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useTemplate.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useTemplate.ts
new file mode 100644
index 000000000..0bdfcb923
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useTemplate.ts
@@ -0,0 +1,38 @@
+import { getTemplate } from "@/record-management/services/api/templateService";
+import { useQuery } from "@tanstack/react-query";
+
+export interface NameDTO {
+  am: string;
+  en: string;
+}
+
+export interface LetterTemplateDto {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  name: NameDTO;
+  key: string;
+  subject: string;
+  body: string;
+  sincerelyText: string;
+  unitId: string;
+}
+
+export interface LetterTemplateListResponseDTO {
+  count: number;
+  items: LetterTemplateDto[];
+}
+
+const useTemplate = (unitId: string) => {
+  const { data, isLoading, isError, refetch } =
+    useQuery<LetterTemplateListResponseDTO>({
+      queryKey: ["message"],
+      queryFn: () => getTemplate(unitId as string, { take: 200 }),
+      staleTime: 10 * 60 * 1000,
+    });
+  const templates = data?.items || [];
+
+  return { templates, isLoading, isError, refetch };
+};
+
+export default useTemplate;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useUserDetail.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useUserDetail.ts
new file mode 100644
index 000000000..4f4f24199
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useUserDetail.ts
@@ -0,0 +1,50 @@
+import { MeDto } from "@/shared/dto/user/meDto";
+interface Permission {
+  id: string;
+  key: string;
+}
+
+interface Position {
+  id: string;
+  permissions: Permission[];
+}
+
+interface EmployeeData {
+  id: string;
+  positions: Position[];
+}
+
+export const useUserDetail = (userDetails?: MeDto) => {
+  // Extract permissions from top-level permissions array
+  const topLevelPermissions = userDetails?.permissions?.map((permission: Permission) => permission.key) ?? [];
+  
+  // Extract all unique permission keys from all positions
+  const positionPermissions =
+    userDetails?.employee?.flatMap((employee: EmployeeData) =>
+      employee.positions.flatMap((position: Position) =>
+        position.permissions.map((permission: Permission) => permission.key)
+      )
+    ) ?? [];
+
+  // Combine both top-level and position permissions, removing duplicates
+  const permissionKeys = [...new Set([...topLevelPermissions, ...positionPermissions])];
+
+  const checkHaveParent =
+    userDetails?.employee?.[0]?.positions?.[0]?.parentPositionId;
+  const isLoading = !userDetails;
+  const isRO = permissionKeys.includes("can:dispatchRecords");
+  const isUnitAdmin = permissionKeys.includes("can:dispatchRecords");
+
+  return {
+    // unitId,
+    userDetails,
+    permissionKeys,
+    checkHaveParent,
+    isLoading,
+    isRO,
+    isUnitAdmin,
+    error: false,
+    hasPermission: (permissionKey: string) =>
+      permissionKeys.includes(permissionKey),
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useUserRecords.ts b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useUserRecords.ts
new file mode 100644
index 000000000..3dc256a30
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/hooks/useUserRecords.ts
@@ -0,0 +1,339 @@
+import { RecordPayload } from "@/record-management/dto/userRecords/userRecordsDto";
+import {
+  fetchMyRecords,
+  createRecord,
+  updateRecord,
+  deleteRecord,
+  softDeleteRecord,
+  getAttachmentsById,
+  getSealedAttachmentsById,
+  deleteAttachmentsById,
+  makeSecureRecord,
+  unMakeSecureRecord,
+  makeUrgentRecord,
+  unMakeUrgentRecord,
+  fetchMyRecordsParent,
+  directSubmitRecord,
+  directDispatchRecord,
+  forceDispatchCollaboratorRecord,
+  forceDispatchCollaboratorInternalMemoRecord,
+  canSkipLevelUp,
+} from "@/record-management/services/api/userRecordService";
+
+import {
+  InitiationType,
+  KeyValue,
+} from "@/record-management/types/recordSelectTypes";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { useEffect, useRef } from "react";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+interface RecordQueryParams {
+  skip?: number;
+  take?: number;
+  status?: string;
+  subject?: string;
+  to?: string;
+  receiverPosition?: string;
+  referenceNumber?: string;
+  fromCreatedAt?: string;
+  toCreatedAt?: string;
+  fetchParent?: boolean;
+}
+
+// ✅ Translated initiation type options
+export const useInitiationTypeOptions = (): KeyValue[] => {
+  const { t } = useTranslation();
+
+  return [
+    {
+      label: t("initiationType.self", "Self (በራስ)"),
+      value: InitiationType.Self,
+      employeePositionId: "",
+    },
+    {
+      label: t("initiationType.team", "Team (በቡድን)"),
+      value: InitiationType.Team,
+      employeePositionId: "",
+    },
+  ];
+};
+
+export const useCanJumpOnStepUp = () =>
+  useQuery({
+    queryKey: ["canJumpOnStepUp"],
+    queryFn: async () => {
+      const data = await canSkipLevelUp();
+      return data.canSkipLevel === true;
+    },
+    staleTime: 5 * 60 * 1000,
+    retry: false,
+  });
+
+export const useUserRecords = (params?: RecordQueryParams) => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+  // -------------------- Fetch Records --------------------
+  const {
+    data: recordsResponse,
+    isLoading,
+    isError,
+    error: recordsError,
+    refetch,
+  } = useQuery({
+    queryKey: ["userRecords", params],
+    queryFn: async () => {
+      const data = await fetchMyRecords(params);
+      return {
+        count: data.count,
+        items: data.items,
+      };
+    },
+    staleTime: 5 * 60 * 1000,
+    retry: false,
+  });
+  const {
+    data: dataParent,
+    isLoading: isLoadingParent,
+    isError: isErrorParent,
+    error: parentError,
+    refetch: refetchParent,
+  } = useQuery({
+    queryKey: ["userRecords-parent", params],
+    queryFn: () => fetchMyRecordsParent(params?.fetchParent ? params : {}),
+    staleTime: 5 * 60 * 1000,
+    enabled: Boolean(params?.fetchParent),
+    retry: false,
+  });
+
+  // Surface list-fetch failures via the centralized error handler.
+  // Inline `isError` UI is preserved by callers; this just adds a toast.
+  const listFetchError = recordsError || parentError;
+  const prevListErrorRef = useRef<unknown>(null);
+  useEffect(() => {
+    if (listFetchError && listFetchError !== prevListErrorRef.current) {
+      prevListErrorRef.current = listFetchError;
+      handleError(listFetchError);
+    }
+  }, [listFetchError, handleError]);
+  // -------------------- Create Record --------------------
+  const addMutation = useMutation({
+    mutationFn: (payload: RecordPayload) => createRecord(payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["userRecords"] });
+      queryClient.invalidateQueries({ queryKey: ["record"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  // -------------------- Edit Record --------------------
+  const editMutation = useMutation({
+    mutationFn: ({
+      id,
+      updatedRecord,
+    }: {
+      id: string;
+      updatedRecord: RecordPayload;
+    }) => updateRecord(id, updatedRecord),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["userRecords"] });
+      queryClient.invalidateQueries({ queryKey: ["record"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  // -------------------- Delete Record --------------------
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => deleteRecord(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["userRecords"] });
+      queryClient.invalidateQueries({ queryKey: ["record"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+  //-------------------------direct submit record -----------
+  const directSubmitMutation = useMutation({
+    mutationFn: ({
+      recordId,
+      signatureId,
+    }: {
+      recordId: string;
+      signatureId: string;
+    }) => directSubmitRecord({ recordId, signatureId }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["userRecords"] });
+      queryClient.invalidateQueries({ queryKey: ["record"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const directDispatchMutation = useMutation({
+    mutationFn: ({
+      recordId,
+      signatureId,
+    }: {
+      recordId: string;
+      signatureId: string;
+    }) => directDispatchRecord({ recordId, signatureId }),
+    onSuccess: () => {
+      toast.success(t("userRecord.directDispatchSuccess"));
+      queryClient.invalidateQueries({ queryKey: ["userRecords"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const forceDispatchCollaboratorMutation = useMutation({
+    mutationFn: ({ recordId, type }: { recordId: string; type?: string }) =>
+      type === "other"
+        ? forceDispatchCollaboratorInternalMemoRecord(recordId)
+        : forceDispatchCollaboratorRecord(recordId),
+    onSuccess: () => {
+      toast.success(
+        t("userRecord.forceDispatchSuccess", "Record dispatched successfully"),
+      );
+      queryClient.invalidateQueries({ queryKey: ["userRecords"] });
+      queryClient.invalidateQueries({ queryKey: ["record"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const useAttachmentById = (selectedId: string | null) =>
+    useQuery({
+      queryKey: ["record-attachment", selectedId],
+      queryFn: async () => {
+        try {
+          return await getAttachmentsById(selectedId ?? "");
+        } catch {
+          return await getSealedAttachmentsById(selectedId ?? "");
+        }
+      },
+      enabled: !!selectedId,
+      staleTime: 1000 * 60 * 5,
+    });
+  //-------------------Soft Delete --------------------------
+  const softDeleteMutation = useMutation({
+    mutationFn: (id: string) => softDeleteRecord(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["userRecords"] });
+      queryClient.invalidateQueries({ queryKey: ["record"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+  // -------------------- Delete Attachment --------------------
+  const deleteAttachmentMutation = useMutation({
+    mutationFn: (recordId: string) => deleteAttachmentsById(recordId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["userRecords"] });
+      queryClient.invalidateQueries({ queryKey: ["record"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  //---------------- Make Secure Record ----------------
+  const makeSecureMutation = useMutation({
+    mutationFn: ({ id }: { id: string }) => makeSecureRecord(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["userRecords"] });
+      queryClient.invalidateQueries({ queryKey: ["record"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const unMakeSecureMutation = useMutation({
+    mutationFn: ({ id }: { id: string }) => unMakeSecureRecord(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["userRecords"] });
+      queryClient.invalidateQueries({ queryKey: ["record"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+  const markUrgentRecordMutation = useMutation({
+    mutationFn: ({ id }: { id: string }) => makeUrgentRecord(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["userRecords"] });
+      queryClient.invalidateQueries({ queryKey: ["record"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const unMarkUrgentRecordMutation = useMutation({
+    mutationFn: ({ id }: { id: string }) => unMakeUrgentRecord(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["userRecords"] });
+      queryClient.invalidateQueries({ queryKey: ["record"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+  return {
+    useAttachmentById,
+    recordsResponse,
+    isLoading,
+    isError,
+    refetch,
+    ...(params?.fetchParent
+      ? {
+          recordParent: dataParent?.items ?? [],
+          recordParentCount: dataParent?.count ?? 0,
+          refetchParent,
+          isErrorParent,
+          isLoadingParent,
+        }
+      : {}),
+
+    // CRUD
+    addRecord: addMutation.mutateAsync,
+    editRecord: editMutation.mutateAsync,
+    deleteRecord: deleteMutation.mutate,
+    deleteRecordAsync: deleteMutation.mutateAsync,
+    softDeleteRecord: softDeleteMutation.mutate,
+    makeSecureRecord: makeSecureMutation.mutate,
+    unMakeSecureRecord: unMakeSecureMutation.mutate,
+    markUrgentRecord: markUrgentRecordMutation.mutate,
+    unMarkUrgentRecord: unMarkUrgentRecordMutation.mutate,
+    directlySubmit: directSubmitMutation.mutateAsync,
+    // Mutation States
+    isAdding: addMutation.isPending,
+    isEditing: editMutation.isPending,
+    isDeleting: deleteMutation.isPending,
+
+    addStatus: addMutation.status,
+    editStatus: editMutation.status,
+    deleteStatus: deleteMutation.status,
+
+    addRecordData: addMutation.data,
+    addRecordSuccess: addMutation.isSuccess,
+    deleteAttachment: deleteAttachmentMutation.mutateAsync,
+    isDeleteingAttachment: deleteAttachmentMutation.isPending,
+    directDispatch: directDispatchMutation.mutateAsync,
+    isDirectDispatching: directDispatchMutation.isPending,
+    forceDispatchCollaborator: forceDispatchCollaboratorMutation.mutateAsync,
+    isForceDispatchingCollaborator: forceDispatchCollaboratorMutation.isPending,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/pendingRecords/convertRecords.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/pendingRecords/convertRecords.tsx
new file mode 100644
index 000000000..a9eb7c5bb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/pendingRecords/convertRecords.tsx
@@ -0,0 +1,420 @@
+"use client";
+
+import type React from "react";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import { toast } from "sonner";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  Loader2,
+  FileCheck,
+  ArrowRight,
+  ArrowLeft,
+  Sparkles,
+  CheckCircle2,
+} from "lucide-react";
+import SealSelector from "./sealSelector";
+import { usePendingRecords } from "../hooks/usePendingRecords";
+import { fetchRecordById } from "@/record-management/services/api/userRecordService";
+import { dispatchRecord } from "@/record-management/services/api/recordOfficerService";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { useUnitConfiguration } from "@/shared/hooks/useUnitConfiguration";
+import { useAuthUser } from "@/record-management/hooks/useAuthUser";
+
+import { useRecordTagPrefixes } from "@/user-management/hooks/useRecordTagPrefixes";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { Label } from "@/shared/common/ui/label";
+import { RecordTagSelector } from "@/user-management/components/content/RecordTagSelector";
+interface ConvertRecordProps {
+  recordId: string;
+}
+
+export interface RecordSummaryDTO {
+  id: string;
+  recordType: string;
+  subject: string;
+}
+
+export const mapToRecordSummary = (record: any): RecordSummaryDTO => {
+  return {
+    id: record.id,
+    recordType: record.recordTypeKey,
+    subject: record.content?.[0]?.subject || "No subject",
+  };
+};
+
+const ConvertRecord: React.FC<ConvertRecordProps> = ({ recordId }) => {
+  const navigate = useNavigate();
+  const [selectedSeal, setSelectedSeal] = useState<string | null>(null);
+  const [selectedAttachmentSeal, setSelectedAttachmentSeal] = useState<
+    string | null
+  >(null);
+  const [recordSummary, setRecordSummary] = useState<RecordSummaryDTO | null>(
+    null,
+  );
+  const [selectedTagId, setSelectedTagId] = useState<string>("");
+  const [selectedPrefixId, setSelectedPrefixId] = useState<string>("");
+  const [skip] = useState(0);
+  const pageSize = 100;
+  const { userDetails } = useAuthUser();
+  const unitId = userDetails?.employee?.[0]?.unitId;
+
+  const { data: unitConfigData, isLoading: isUnitConfigLoading } =
+    useUnitConfiguration(unitId ?? "", {
+      enabled: !!unitId,
+    });
+  const unitConfig = unitConfigData?.data?.items?.[0];
+  const canHaveTagBasedReferenceNumber =
+    unitConfig?.canHaveTagBasedReferenceNumber ?? false;
+  const { prefixes, isLoadingPrefixes, isErrorPrefixes } = useRecordTagPrefixes(
+    {
+      unitId: unitId ?? "",
+      recordTagId: selectedTagId || undefined,
+      skip,
+      take: pageSize,
+    },
+  );
+  const { isLoading, refetch } = usePendingRecords();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  useEffect(() => {
+    setSelectedPrefixId("");
+  }, [selectedTagId]);
+
+  useEffect(() => {
+    if (recordId) {
+      fetchRecordById(recordId)
+        .then((record) => {
+          const summary = mapToRecordSummary(record);
+          setRecordSummary(summary);
+        })
+        .catch((err) => {
+          toast.error(`Failed to fetch record: ${err.message}`);
+          handleError(err);
+        });
+    }
+  }, [handleError, recordId]);
+
+  const queryClient = useQueryClient();
+
+  const { mutate: convertRecord } = useMutation({
+    mutationFn: dispatchRecord,
+    onSuccess: () => {
+      toast.success(t("convert.recordConverted"));
+      queryClient.invalidateQueries({ queryKey: ["outgoingRecords"] });
+      navigate("/record-management/recordOfficer/outgoing");
+      refetch();
+    },
+    onError: (error: any) => {
+      handleError(error);
+    },
+  });
+
+  const handleConvert = () => {
+    if (!selectedSeal) {
+      toast.error(t("convert.selectSeal"));
+      return;
+    }
+
+    // If tag-based reference numbers are enabled, validate tag and prefix selection
+    // if (canHaveTagBasedReferenceNumber) {
+    //   if (!selectedTagId) {
+    //     toast.error(
+    //       t("convert.selectTagRequired", "Please select a reference tag"),
+    //     );
+    //     return;
+    //   }
+    //   if (!selectedPrefixId) {
+    //     toast.error(
+    //       t(
+    //         "convert.selectReferenceRequired",
+    //         "Please select a reference number",
+    //       ),
+    //     );
+    //     return;
+    //   }
+    // }
+    convertRecord({
+      recordId: recordId,
+      sealId: selectedSeal,
+      ...(selectedAttachmentSeal && {
+        attachmentSealId: selectedAttachmentSeal,
+      }),
+      ...(canHaveTagBasedReferenceNumber &&
+        selectedPrefixId && {
+          recordPrefixId: selectedPrefixId,
+        }),
+    });
+  };
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-slate-950">
+      <div className="w-full max-w-4xl mx-auto space-y-6 py-8 px-4 sm:px-6">
+        {/* Back Button */}
+        <div className="flex justify-start">
+          <Button
+            onClick={() => navigate(-1)}
+            variant="ghost"
+            className="flex items-center gap-2 text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100 hover:bg-slate-100 dark:hover:bg-slate-800/50 rounded-xl transition-all duration-300 font-semibold text-sm py-2 px-3 shadow-xs hover:shadow-md"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            <span>{t("back", "Back")}</span>
+          </Button>
+        </div>
+        {/* Header Section */}
+        <div className="text-center space-y-3">
+          <div className="inline-flex items-center justify-center p-3 rounded-2xl bg-primary-600 shadow-lg mb-4">
+            <FileCheck className="h-8 w-8 text-white" />
+          </div>
+          <h1 className="text-4xl font-bold text-slate-900 dark:text-slate-100">
+            {t("convert.convertRecord")}
+          </h1>
+          <p className="text-slate-600 dark:text-slate-400 text-lg max-w-2xl mx-auto">
+            Review record details and select a seal to convert and dispatch
+          </p>
+        </div>
+
+        {/* Main Card */}
+        <Card className="border border-slate-200 dark:border-slate-800 shadow-lg bg-white dark:bg-slate-900 rounded-2xl">
+          <CardHeader className="border-b border-slate-200 dark:border-slate-800 px-6 sm:px-8 py-6 bg-slate-50 dark:bg-slate-900">
+            <div className="flex items-start gap-4">
+              <div className="p-2 rounded-xl bg-primary-600 shadow-md flex-shrink-0">
+                <Sparkles className="h-5 w-5 text-white" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <CardTitle className="text-xl sm:text-2xl font-bold text-slate-900 dark:text-slate-100 mb-2">
+                  {t("convert.convertRecord")}
+                </CardTitle>
+                <p className="text-base text-slate-600 dark:text-slate-400 line-clamp-2">
+                  {recordSummary?.subject}
+                </p>
+              </div>
+            </div>
+          </CardHeader>
+
+          <CardContent className="space-y-8 px-6 sm:px-8 py-8">
+            {/* Record Details Section */}
+            <div className="space-y-4 p-6 bg-primary-50 dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700">
+              <h3 className="text-sm font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wider flex items-center gap-2 mb-4">
+                <div className="w-1 h-5 bg-primary-600 rounded-full" />
+                Record Information
+              </h3>
+
+              <div className="grid gap-4">
+                <div className="flex flex-col sm:flex-row sm:items-center gap-2 p-4 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700 hover:border-primary-500 dark:hover:border-primary-600 transition-colors duration-300">
+                  <span className="text-sm font-semibold text-slate-600 dark:text-slate-400 min-w-[120px]">
+                    {t("convert.subject")}
+                  </span>
+                  <span className="text-base font-medium text-slate-900 dark:text-slate-100 flex-1">
+                    {recordSummary?.subject}
+                  </span>
+                </div>
+
+                <div className="flex flex-col sm:flex-row sm:items-center gap-2 p-4 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700 hover:border-primary-500 dark:hover:border-primary-600 transition-colors duration-300">
+                  <span className="text-sm font-semibold text-slate-600 dark:text-slate-400 min-w-[120px]">
+                    {t("convert.recordType")}
+                  </span>
+                  <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-primary-100 dark:bg-primary-900/50 text-primary-700 dark:text-primary-300 border border-primary-200 dark:border-primary-800">
+                    {recordSummary?.recordType === "external"
+                      ? "External"
+                      : "Internal"}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {/* Tag Based Reference Number Section - Only show if config is enabled */}
+            {canHaveTagBasedReferenceNumber && !isUnitConfigLoading && (
+              <div className="space-y-4">
+                <h3 className="text-sm font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wider flex items-center gap-2">
+                  <div className="w-1 h-5 bg-primary-600 rounded-full" />
+                  {t("convert.referenceInformation", "Reference Information")}
+                </h3>
+                <div className="p-6 bg-primary-50 dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 space-y-4">
+                  {/* Tag Selection */}
+                  <div className="space-y-2">
+                    <Label className="text-sm font-semibold">
+                      {t("convert.selectTag", "Select Reference Tag")} *
+                    </Label>
+                    <RecordTagSelector
+                      unitId={unitId ?? ""}
+                      selectedTagIds={selectedTagId ? [selectedTagId] : []}
+                      onChange={(ids) => setSelectedTagId(ids[0] || "")}
+                      placeholder={t("nav.selectTag") || "Choose a tag..."}
+                      multiple={false}
+                    />
+                  </div>
+
+                  {/* Reference Number Selection - Only show when tag is selected */}
+                  {selectedTagId && (
+                    <div className="space-y-2">
+                      <Label className="text-sm font-semibold">
+                        {t(
+                          "convert.selectReferenceNumber",
+                          "Select Reference Number",
+                        )}{" "}
+                        *
+                      </Label>
+                      {isLoadingPrefixes ? (
+                        <div className="flex items-center gap-2">
+                          <Loader2 className="h-4 w-4 animate-spin" />
+                          <span className="text-sm text-muted-foreground">
+                            {t("common.loading", "Loading...")}
+                          </span>
+                        </div>
+                      ) : isErrorPrefixes ? (
+                        <div className="text-sm text-red-600 dark:text-red-400">
+                          {t(
+                            "common.error",
+                            "Failed to load reference numbers",
+                          )}
+                        </div>
+                      ) : prefixes.length === 0 ? (
+                        <div className="text-sm text-amber-600 dark:text-amber-400">
+                          {t(
+                            "convert.noReferenceNumbers",
+                            "No reference numbers available for this tag",
+                          )}
+                        </div>
+                      ) : (
+                        <Select
+                          value={selectedPrefixId}
+                          onValueChange={setSelectedPrefixId}
+                        >
+                          <SelectTrigger className="w-full">
+                            <SelectValue
+                              placeholder={t(
+                                "convert.chooseReferenceNumber",
+                                "Choose a reference number",
+                              )}
+                            />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {prefixes.map((prefix) => (
+                              <SelectItem key={prefix.id} value={prefix.id}>
+                                {prefix.name?.am} / {prefix.name?.en}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* Seal Selection Section */}
+            <div className="space-y-4">
+              <h3 className="text-sm font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wider flex items-center gap-2">
+                <div className="w-1 h-5 bg-primary-600 rounded-full" />
+                Select Seal
+              </h3>
+              <div className="p-6 bg-primary-50 dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700">
+                <SealSelector
+                  selectedSeal={selectedSeal}
+                  onSelect={setSelectedSeal}
+                />
+              </div>
+            </div>
+
+            {/* Optional Attachment Seal Selection Section */}
+            <div className="space-y-4">
+              <h3 className="text-sm font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wider flex items-center gap-2">
+                <div className="w-1 h-5 bg-blue-600 rounded-full" />
+                Select Seal for Attachments (Optional)
+              </h3>
+              <div className="p-6 bg-blue-50 dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700">
+                <p className="text-sm text-slate-600 dark:text-slate-400 mb-4">
+                  Use a different seal for attachments if needed. Leave empty to
+                  use the same seal as the record.
+                </p>
+                <SealSelector
+                  selectedSeal={selectedAttachmentSeal}
+                  onSelect={setSelectedAttachmentSeal}
+                />
+              </div>
+            </div>
+
+            {/* Action Button */}
+            <div className="pt-4">
+              <Button
+                onClick={handleConvert}
+                disabled={isLoading || !selectedSeal}
+                className="w-full h-14 bg-primary-600 hover:bg-primary-700 text-white shadow-lg hover:shadow-xl transition-all duration-300 rounded-xl text-base font-semibold group/btn disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {isLoading ? (
+                  <div className="flex items-center gap-3">
+                    <Loader2 className="animate-spin h-5 w-5" />
+                    <span>Processing...</span>
+                  </div>
+                ) : (
+                  <div className="flex items-center gap-3">
+                    <CheckCircle2 className="h-5 w-5 group-hover/btn:scale-110 transition-transform duration-300" />
+                    <span>{t("convert.convertAndDispatch")}</span>
+                    <ArrowRight className="h-5 w-5 group-hover/btn:translate-x-1 transition-transform duration-300" />
+                  </div>
+                )}
+              </Button>
+
+              {!selectedSeal && (
+                <p className="text-sm text-amber-600 dark:text-amber-400 mt-3 text-center flex items-center justify-center gap-2">
+                  <span className="inline-block w-1.5 h-1.5 bg-amber-500 rounded-full animate-pulse" />
+                  Please select a seal to continue
+                </p>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Info Card */}
+        <div className="p-6 bg-primary-50 dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm">
+          <div className="flex items-start gap-4">
+            <div className="p-2 rounded-lg bg-primary-100 dark:bg-primary-900/50 flex-shrink-0">
+              <svg
+                className="h-5 w-5 text-primary-600 dark:text-primary-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+            </div>
+            <div className="flex-1">
+              <h4 className="text-sm font-semibold text-primary-900 dark:text-gray-100 mb-1">
+                Important Information
+              </h4>
+              <p className="text-sm text-gray-700 dark:text-gray-300">
+                Once converted and dispatched, this record will be moved to the
+                outgoing records section. Make sure you've selected the correct
+                seal before proceeding.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ConvertRecord;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/pendingRecords/pendingRecordColumns.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/pendingRecords/pendingRecordColumns.tsx
new file mode 100644
index 000000000..fb2504683
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/pendingRecords/pendingRecordColumns.tsx
@@ -0,0 +1,257 @@
+import { RecordDto } from "@/record-management/dto/userRecords/userRecordsDto";
+import { ColumnDef } from "@tanstack/react-table";
+import PendingRecordsActions from "./pendingRecordsActions";
+import { PendingRecord } from "../hooks/usePendingRecords";
+import { t } from "i18next";
+import { concat } from "lodash";
+import i18n from "i18next";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+import { BellRing } from "lucide-react";
+import { DataTableColumnHeader } from "@/shared/common/ui/dataTableColumnHeader";
+
+export const PendingRecordsColumns = (
+  localizedName: (name?: { am: string; en: string }) => string,
+  pageIndex: number,
+  canROReturn: boolean,
+): ColumnDef<PendingRecord>[] => [
+  {
+    id: "letterName",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title={t("viewDetail.fileName")} />
+    ),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      const subject = rowData.letterName;
+      return <span>{subject ?? "-"}</span>;
+    },
+    enableHiding: true,
+    accessorKey: "letterName",
+  },
+  {
+    id: "Subject",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title={t("userRecord.Subject")} />
+    ),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      const subject = rowData.content?.[0]?.subject;
+      return (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="max-w-[200px] truncate cursor-help block">
+                {subject}
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{subject}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
+    },
+    enableHiding: true,
+    accessorKey: "subject",
+  },
+  {
+    id: "Receiver",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title={t("userRecord.To")} />
+    ),
+    cell: ({ row }) => {
+      const rowData = row.original;
+
+      if (["internal", "internal_memo"].includes(rowData.recordTypeKey)) {
+        const receivers = rowData.content.flatMap((item: any) => {
+          const positionNames =
+            item.receiverPositions?.map(
+              (rp: any) => localizedName(rp.position?.name) || "N/A",
+            ) || [];
+
+          const employeeNames =
+            item.receiverEmployees?.map(
+              (rp: any) =>
+                localizedName(rp.employeePosition?.employee?.name) || "N/A",
+            ) || [];
+
+          return [...positionNames, ...employeeNames];
+        });
+
+        return receivers.length > 0 ? (
+          <div className="space-y-1">
+            {receivers.map((receiver: string, idx: number) => (
+              <div key={idx}>{receiver}</div>
+            ))}
+          </div>
+        ) : (
+          <div>__</div>
+        );
+      }
+
+      if (rowData.recordTypeKey === "external") {
+        const units0 =
+          rowData.receivingUnits?.map(
+            (unitItem: any) =>
+              localizedName(unitItem.unit?.name) || unitItem.unit?.key || "N/A",
+          ) || [];
+
+        const units1 =
+          rowData.content?.[0]?.nonSmartReceivers?.map(
+            (unitItem: any) => unitItem.name || "N/A",
+          ) || [];
+
+        const units = concat(units0, units1);
+
+        return units.length > 0 ? (
+          <div className="space-y-1">
+            {units.map((unit: string, idx: number) => (
+              <div key={idx}>{unit}</div>
+            ))}
+          </div>
+        ) : (
+          <div>__</div>
+        );
+      }
+
+      return <div>__</div>;
+    },
+    enableHiding: true,
+    accessorKey: "Receiver",
+  },
+  {
+    id: "sendingDepartment",
+    header: ({ column }) => (
+      <DataTableColumnHeader
+        column={column}
+        title={t("userIncoming.Sending Department")}
+      />
+    ),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      const sendingDepartment =
+        localizedName(rowData.initiator?.position?.name) || "__";
+      return (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="max-w-[200px] truncate cursor-help block">
+                {sendingDepartment}
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{sendingDepartment}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
+    },
+    enableHiding: true,
+    accessorKey: "sendingDepartment",
+  },
+  {
+    id: "isUrgent",
+    header: () => t("userIncoming.Is Urgent"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      const isUrgent = rowData.isUrgent;
+
+      return (
+        <span
+          className={`relative inline-flex items-center px-2 py-1 rounded-md text-sm font-semibold ${
+            isUrgent
+              ? "bg-yellow-100 text-yellow-800"
+              : "bg-gray-100 text-gray-600"
+          }`}
+        >
+          {isUrgent && (
+            <span className="absolute -top-0 -right-5 flex h-4 w-4">
+              {/* Pulsing ring */}
+              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
+
+              {/* Bell icon stays visible */}
+              <span className="relative inline-flex items-center justify-center pt-3">
+                <BellRing className="h-5 w-5 text-red-500" />
+              </span>
+            </span>
+          )}
+
+          {isUrgent ? t("common.yes") : t("common.no")}
+        </span>
+      );
+    },
+    enableHiding: true,
+    accessorKey: "isUrgent",
+  },
+  {
+    id: "isSecured",
+    header: () => t("userIncoming.Is Secured"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      const isSecured = rowData.isSecured;
+
+      return (
+        <span
+          className={`px-2 py-1 rounded-md text-xs font-semibold ${
+            isSecured
+              ? "bg-yellow-100 text-yellow-800"
+              : "bg-gray-100 text-gray-600"
+          }`}
+        >
+          {isSecured ? t("common.yes") : t("common.no")}
+        </span>
+      );
+    },
+    enableHiding: true,
+    accessorKey: "isSecured",
+  },
+  {
+    accessorKey: "submittedDate",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title={t("userRecord.Date")} />
+    ),
+    cell: ({ row }) => {
+      const record = row.original;
+      const isAmharic = i18n.language === "am";
+      const amharicDate =
+        record.amharicApprovedDate || record.amharicSubmittedDate;
+      const submittedDate = record.submittedDate;
+      if (isAmharic && amharicDate) {
+        return <div>{amharicDate}</div>;
+      }
+
+      const formattedDate = submittedDate
+        ? new Date(submittedDate).toLocaleDateString(i18n.language, {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+            hour: "numeric",
+            minute: "numeric",
+          })
+        : "-";
+
+      return <div>{formattedDate}</div>;
+    },
+  },
+  {
+    id: "Actions",
+    header: () => t("userRecord.Actions"),
+    accessorKey: "Actions",
+    cell: ({ row }) => {
+      const rowData = row.original;
+      return (
+        <PendingRecordsActions
+          key={rowData.ID}
+          rowData={rowData as unknown as RecordDto}
+          pageIndex={pageIndex}
+          canROReturn={canROReturn}
+        />
+      );
+    },
+    enableHiding: true,
+  },
+];
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/pendingRecords/pendingRecordDetailActions.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/pendingRecords/pendingRecordDetailActions.tsx
new file mode 100644
index 000000000..040d3e5c9
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/pendingRecords/pendingRecordDetailActions.tsx
@@ -0,0 +1,167 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { Pencil, Undo } from "lucide-react";
+
+import { Button, getActionButtonVariant } from "@/shared/common/ui/button";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import { Textarea } from "@/shared/common/ui/textarea";
+import { Label } from "@/shared/common/ui/label";
+import {
+  useSendBackToInitiator,
+  SendBackPayload,
+} from "@/record-management/services/api/returnService";
+import { RecordDto } from "@/record-management/dto/userRecords/userRecordsDto";
+
+interface PendingRecordDetailActionsProps {
+  recordId: string;
+  canROReturn: boolean;
+  backToTable: string;
+}
+
+const PendingRecordDetailActions = ({
+  recordId,
+  canROReturn,
+  backToTable,
+}: PendingRecordDetailActionsProps) => {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const mutation = useSendBackToInitiator();
+
+  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+  const [returnComment, setReturnComment] = useState("");
+
+  const handleConvert = () => {
+    navigate(`/record-management/convert/${recordId}`);
+  };
+
+  const handleReturnClick = () => {
+    setReturnComment("");
+    setShowConfirmDialog(true);
+  };
+
+  const handleConfirmReturn = async () => {
+    if (!returnComment.trim()) {
+      toast.error(t("userIncomingretunretun.CommentRequired"));
+      return;
+    }
+
+    const payload: SendBackPayload = {
+      recordId,
+      action: "send_back",
+      comment: returnComment.trim(),
+    };
+
+    try {
+      await mutation.mutateAsync(payload);
+      toast.success(t("userIncomingretun.RecordReturnedSuccessfully"));
+
+      queryClient.invalidateQueries({ queryKey: ["pendingRecords"] });
+      queryClient.invalidateQueries({ queryKey: ["userRecords"] });
+      queryClient.invalidateQueries({ queryKey: ["dashbordReportRO"] });
+
+      setShowConfirmDialog(false);
+      setReturnComment("");
+      navigate(backToTable);
+    } catch {
+      toast.error(t("userIncomingretun.FailedToReturnRecord"));
+    }
+  };
+
+  return (
+    <>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button
+          variant={getActionButtonVariant("Edit")}
+          onClick={handleConvert}
+        >
+          <Pencil className="h-4 w-4" />
+          <span>{t("convert.convertRecord")}</span>
+        </Button>
+
+        {canROReturn && (
+          <Button
+            variant={getActionButtonVariant("Return")}
+            onClick={handleReturnClick}
+            disabled={mutation.isPending}
+          >
+            <Undo className="h-4 w-4" />
+            <span>{mutation.isPending
+              ? t("userIncomingretun.returning")
+              : t("userIncomingretun.return")}</span>
+          </Button>
+        )}
+      </div>
+
+      <AlertDialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
+        <AlertDialogContent className="max-w-md">
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t("userIncomingretun.conformReturn")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t(
+                "userIncomingretun.Please provide a reason for returning this record.",
+              )}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+
+          <div className="space-y-2">
+            <Label htmlFor="return-comment" className="text-sm font-medium">
+              {t("userIncomingretun.ReturnComment")} *
+            </Label>
+            <Textarea
+              id="return-comment"
+              placeholder={t("userIncomingretun.EnterReturnReason")}
+              value={returnComment}
+              onChange={(e) => setReturnComment(e.target.value)}
+              rows={3}
+              className="resize-none"
+            />
+            {!returnComment.trim() && (
+              <p className="text-sm text-destructive">
+                {t("userIncomingretun.CommentRequired")}
+              </p>
+            )}
+          </div>
+
+          <AlertDialogFooter>
+            <AlertDialogCancel
+              onClick={() => {
+                setShowConfirmDialog(false);
+                setReturnComment("");
+              }}
+            >
+              {t("common.Cancel")}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleConfirmReturn}
+              disabled={mutation.isPending || !returnComment.trim()}
+            >
+              {mutation.isPending
+                ? t("userIncomingretun.returing")
+                : t("userIncomingretun.return")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+};
+
+export default PendingRecordDetailActions;
+
+// Helper to satisfy unused-import linting if needed elsewhere.
+export type { RecordDto };
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/pendingRecords/pendingRecords.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/pendingRecords/pendingRecords.tsx
new file mode 100644
index 000000000..b3da27bfe
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/pendingRecords/pendingRecords.tsx
@@ -0,0 +1,167 @@
+import { useEffect, useMemo, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+import Loader from "@/record-management/components/Loader/loader";
+import {
+  CombinedFilterBar,
+  CombinedFilterField,
+} from "@/shared/components/filters/CombinedFilterBar";
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { useCombinedFilters } from "@/shared/hooks/useCombinedFilters";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useUnitConfiguration } from "@/shared/hooks/useUnitConfiguration";
+import { cleanFilterParams, FilterParams } from "@/shared/utils/filterParams";
+import { PendingRecordsColumns } from "./pendingRecordColumns";
+import { usePendingRecords } from "../hooks/usePendingRecords";
+
+const PendingRecords = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const urlPage = Number(searchParams.get("page") || 1);
+  const [pageIndex, setPageIndex] = useState(urlPage - 1);
+  const pageSize = 10;
+  const { t } = useTranslation();
+  const localizedName = useLocalizedName();
+  const { userDetails } = useAuthUser();
+  const combinedFilters = useCombinedFilters<FilterParams>();
+  const [liveSearch, setLiveSearch] = useState<{
+    key: string;
+    value: string;
+  } | null>(null); // ← add
+  const unitId = userDetails?.employee?.[0]?.unitId ?? "";
+  const { data: unitConfigData } = useUnitConfiguration(unitId, {
+    enabled: !!unitId,
+  });
+  const canROReturn = unitConfigData?.data?.items?.[0]?.canROReturn ?? false;
+
+  const filterFields = useMemo<CombinedFilterField[]>(
+    () => [
+      { key: "letterName", label: t("viewDetail.fileName"), type: "text" },
+      { key: "receiver", label: t("userRecord.To"), type: "text" },
+      {
+        key: "sendingPosition",
+        label: t("userIncoming.Sending Department"),
+        type: "text",
+      },
+      { key: "subject", label: t("userRecord.Subject"), type: "text" },
+      {
+        key: "approvedAt",
+        label: t("userRecord.Date"),
+        type: "dateRange",
+        fromKey: "fromApprovedAt",
+        toKey: "toApprovedAt",
+      },
+    ],
+    [t],
+  );
+
+  useEffect(() => {
+    setPageIndex(urlPage - 1);
+  }, [combinedFilters.filters, urlPage]);
+
+  const baseParams = useMemo(() => {
+    const cleaned = cleanFilterParams({
+      skip: pageIndex * pageSize,
+      take: pageSize,
+      orderBy: "updatedAt:DESC",
+      ...combinedFilters.filters,
+    });
+
+    // Apply live search AFTER cleanFilterParams so it doesn't get stripped
+    return liveSearch
+      ? { ...cleaned, [liveSearch.key]: liveSearch.value }
+      : cleaned;
+  }, [combinedFilters.filters, pageIndex, liveSearch]);
+
+  const { isLoading, isError, records, refetch, pendingRecordsCount } =
+    usePendingRecords(baseParams);
+
+  const handlePageChange = (newPage: number) => {
+    setPageIndex(newPage);
+  };
+
+  const handlePageChangeInc = () => {
+    const newPage = pageIndex + 1;
+    setPageIndex(newPage);
+
+    setSearchParams((prev) => {
+      prev.set("page", newPage.toString());
+      return prev;
+    });
+  };
+
+  const handleLiveSearch = (key: string, value: string) => {
+    if (!key || !value) {
+      setLiveSearch(null);
+      return;
+    }
+    setLiveSearch({ key, value });
+    setPageIndex(0);
+  };
+
+  const totalPages = pendingRecordsCount
+    ? Math.ceil(pendingRecordsCount / pageSize)
+    : 1;
+
+  useEffect(() => {
+    if (!pendingRecordsCount) return;
+
+    let newPage = pageIndex + 1;
+
+    if (newPage > totalPages) {
+      newPage = 1;
+      setPageIndex(0);
+    }
+
+    setSearchParams((prev) => {
+      const params = new URLSearchParams(prev);
+      params.set("page", newPage.toString());
+      return params;
+    });
+  }, [pageIndex, totalPages, setSearchParams, pendingRecordsCount]);
+
+  return (
+    <div className="w-full mx-auto py-6 space-y-6">
+      <div className="flex flex-col sm:flex-row justify-between items-start w-full gap-4 mb-4">
+        <h4 className="text-xl font-medium">{t("userRecord.Letters")}</h4>
+
+        <CombinedFilterBar
+          fields={filterFields}
+          filters={combinedFilters.filters}
+          setFilter={combinedFilters.setFilter}
+          setFilters={combinedFilters.setFilters}
+          removeFilter={combinedFilters.removeFilter}
+          removeFilters={combinedFilters.removeFilters}
+          onFilterChange={() => setPageIndex(0)}
+          onLiveSearch={handleLiveSearch}
+        />
+      </div>
+
+      {isLoading && <Loader />}
+      {isError && <p>{t("userRecord.Error loading records.")}</p>}
+      {!isLoading && !isError && (
+        <AdvancedTable
+          columns={PendingRecordsColumns(
+            localizedName,
+            pageIndex + 1,
+            canROReturn,
+          )}
+          data={records || []}
+          tableName="Pending Records"
+          toolBarPosition="right"
+          hideToolbarFilter
+          extraToolbar={<div className="flex gap-2"></div>}
+          itemCount={pendingRecordsCount || 2}
+          pageIndex={pageIndex}
+          onPageChange={handlePageChange}
+          nextFunction={handlePageChangeInc}
+          prevFunction={() => handlePageChange(Math.max(pageIndex - 1, 0))}
+          refresh={refetch}
+        />
+      )}
+    </div>
+  );
+};
+
+export default PendingRecords;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/pendingRecords/pendingRecordsActions.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/pendingRecords/pendingRecordsActions.tsx
new file mode 100644
index 000000000..8c389e24c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/pendingRecords/pendingRecordsActions.tsx
@@ -0,0 +1,206 @@
+import React, { useState } from "react";
+import { RecordDto } from "@/record-management/dto/userRecords/userRecordsDto";
+import { Button } from "@/shared/common/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import { Textarea } from "@/shared/common/ui/textarea";
+import { Label } from "@/shared/common/ui/label";
+import { EllipsisVertical, Pencil, RotateCcw, Undo } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import {
+  useSendBackToInitiator,
+  SendBackPayload,
+} from "@/record-management/services/api/returnService";
+import { useQueryClient } from "@tanstack/react-query";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+
+interface UserRecordProps {
+  rowData: RecordDto;
+  pageIndex: number;
+  canROReturn: boolean;
+}
+
+const PendingRecordsActions: React.FC<UserRecordProps> = ({
+  rowData,
+  pageIndex,
+  canROReturn,
+}) => {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const { selectedPositionPermissionKeys } = useAuthUser();
+  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+  const [returnComment, setReturnComment] = useState("");
+
+  // Use your mutation hook here
+  const mutation = useSendBackToInitiator();
+
+  const handleViewDetails = () => {
+    navigate(`/record-management/viewPending/${rowData.id}/?page=${pageIndex}`);
+  };
+
+  const handleReturnClick = () => {
+    setReturnComment(""); // Reset comment when opening dialog
+    setShowConfirmDialog(true);
+  };
+
+  const handleConfirmReturn = async () => {
+    // Validate that comment is provided
+    if (!returnComment.trim()) {
+      toast.error(t("userIncomingretunretun.CommentRequired"));
+      return;
+    }
+
+    const payload: SendBackPayload = {
+      recordId: rowData.id,
+      action: "send_back",
+      comment: returnComment.trim(),
+    };
+
+    try {
+      await mutation.mutateAsync(payload);
+      toast.success(t("userIncomingretun.RecordReturnedSuccessfully"));
+
+      // Invalidate queries to refresh the data
+      queryClient.invalidateQueries({ queryKey: ["pendingRecords"] });
+      queryClient.invalidateQueries({ queryKey: ["userRecords"] });
+      queryClient.invalidateQueries({ queryKey: ["dashbordReportRO"] });
+
+      setShowConfirmDialog(false);
+      setReturnComment(""); // Reset comment after successful return
+    } catch {
+      toast.error(t("userIncomingretun.FailedToReturnRecord"));
+    }
+  };
+
+  return (
+    <div className="flex gap-2">
+      <Button variant={"viewDetail"} onClick={handleViewDetails}>
+        {t("userIncomingretun.View Detail")}
+      </Button>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            className="flex h-8 w-8 p-0 data-[state=open]:bg-muted">
+            <EllipsisVertical className="h-4 w-4" />
+            <span className="sr-only">
+              {t("userIncomingretun.Open actions menu")}
+            </span>
+          </Button>
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent
+          align="end"
+          className="w-[200px]"
+          onCloseAutoFocus={(e) => e.preventDefault()}
+          onInteractOutside={(e) => {
+            const target = e.target as HTMLElement;
+            if (target.closest('[role="dialog"]')) {
+              e.preventDefault();
+            }
+          }}>
+          <DropdownMenuLabel>
+            {t("userIncomingretun.Actions")}
+          </DropdownMenuLabel>
+
+          {/* Convert Action */}
+          <DropdownMenuItem
+            className="cursor-pointer hover:!text-primary-700 !bg-transparent !transition-colors duration-200"
+            onClick={() =>
+              navigate(`/record-management/convert/${rowData?.id}`)
+            }>
+            <Pencil className="mr-2 h-4 w-4 group-hover:text-white transition-colors duration-200" />
+            {t("convert.convertRecord")}
+          </DropdownMenuItem>
+
+          {/* Return Action */}
+          {canROReturn && (
+            <DropdownMenuItem
+              className="cursor-pointer hover:!text-red-500 !bg-transparent !transition-colors duration-200"
+              onClick={handleReturnClick}
+              disabled={mutation.isPending} // disable while loading
+            >
+              <Undo className="mr-2 h-4 w-4 group-hover:text-white transition-colors duration-200" />
+              {mutation.isPending
+                ? t("userIncomingretun.returning")
+                : t("userIncomingretun.return")}
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {/* Confirmation Dialog */}
+      <AlertDialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
+        <AlertDialogContent className="max-w-md">
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t("userIncomingretun.conformReturn")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t(
+                "userIncomingretun.Please provide a reason for returning this record.",
+              )}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+
+          <div className="space-y-2">
+            <Label htmlFor="return-comment" className="text-sm font-medium">
+              {t("userIncomingretun.ReturnComment")} *
+            </Label>
+            <Textarea
+              id="return-comment"
+              placeholder={t("userIncomingretun.EnterReturnReason")}
+              value={returnComment}
+              onChange={(e) => setReturnComment(e.target.value)}
+              rows={3}
+              className="resize-none"
+            />
+            {!returnComment.trim() && (
+              <p className="text-sm text-destructive">
+                {t("userIncomingretun.CommentRequired")}
+              </p>
+            )}
+          </div>
+
+          <AlertDialogFooter>
+            <AlertDialogCancel
+              onClick={() => {
+                setShowConfirmDialog(false);
+                setReturnComment("");
+              }}>
+              {t("common.Cancel")}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleConfirmReturn}
+              disabled={mutation.isPending || !returnComment.trim()}>
+              {mutation.isPending
+                ? t("userIncomingretun.returing")
+                : t("userIncomingretun.return")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+};
+
+export default PendingRecordsActions;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/pendingRecords/sealSelector.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/pendingRecords/sealSelector.tsx
new file mode 100644
index 000000000..dffddd4b4
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/pendingRecords/sealSelector.tsx
@@ -0,0 +1,84 @@
+import React from "react";
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "@/shared/common/ui/select";
+import { X } from "lucide-react";
+
+import { useSeal } from "../hooks/useSeals";
+import { useTranslation } from "react-i18next";
+import { useLocalizedName } from "@/shared/common/localizedName";
+
+export interface SealOption {
+  value: string;
+  label: string;
+}
+
+interface SealSelectorProps {
+  selectedSeal: string | null;
+  onSelect: (seal: string | null) => void;
+  options?: SealOption[];
+}
+
+const SealSelector: React.FC<SealSelectorProps> = ({
+  selectedSeal,
+  onSelect,
+}) => {
+  const { sealDetailsData, isLoading } = useSeal();
+ const { t } = useTranslation();
+  const selectedSealObj = sealDetailsData.find(
+    (seal: any) => seal.id === selectedSeal
+  );
+  const localizedName = useLocalizedName()
+
+  return (
+    <div className="mb-6">
+      <label className="block text-sm font-semibold mb-2">{t('convert.selectSealLabel')}</label>
+      <div className="flex items-center gap-2">
+        <div className="flex-1">
+          <Select value={selectedSeal || ""} onValueChange={onSelect}>
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder={t('convert.selectSealPlaceholder')} />
+            </SelectTrigger>
+            <SelectContent>
+              {isLoading && <div className="p-2">{t('convert.loadingSeals')}</div>}
+              {sealDetailsData.map((seal: any) => (
+                <SelectItem key={seal.id} value={seal.id}>
+                  {localizedName(seal.name)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        {selectedSeal && (
+          <button
+            type="button"
+            onClick={() => onSelect(null)}
+            aria-label={t("signatureUpload.remove", "Clear")}
+            title={t("signatureUpload.remove", "Clear")}
+            className="inline-flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-white text-slate-500 hover:border-red-300 hover:bg-red-50 hover:text-red-600 transition-colors dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:border-red-700 dark:hover:bg-red-950/30 dark:hover:text-red-300"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+
+      {/* Show preview if one is selected */}
+      {selectedSealObj && (
+        <div className="mt-4 flex flex-col items-start gap-2">
+          <p className="text-sm font-medium">{t('convert.selectedSealPreview')}</p>
+          <img
+            src={selectedSealObj.presigned}
+            alt={selectedSealObj.name.am}
+            className="w-48 h-48 object-contain border rounded"
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SealSelector;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/pendingRecords/viewPendingRecords.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/pendingRecords/viewPendingRecords.tsx
new file mode 100644
index 000000000..b81c3161e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/pendingRecords/viewPendingRecords.tsx
@@ -0,0 +1,31 @@
+import { useSearchParams } from "react-router-dom";
+import LetterViewer from "../common/letterViewer";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { useUnitConfiguration } from "@/shared/hooks/useUnitConfiguration";
+
+const PendingRecords = () => {
+  const [searchParams] = useSearchParams();
+  const pageIndex = searchParams.get("page") || 1;
+
+  const { userDetails } = useAuthUser();
+  const unitId = userDetails?.employee?.[0]?.unitId ?? "";
+  const { data: unitConfigData } = useUnitConfiguration(unitId, {
+    enabled: !!unitId,
+  });
+  const canROReturn =
+    unitConfigData?.data?.items?.[0]?.canROReturn ?? false;
+
+  const backToTable = `/record-management/pending/?page=${pageIndex}`;
+
+  return (
+    <LetterViewer
+      backurl={backToTable}
+      type="userRecord"
+      shouldFetchInstance={false}
+      actions="PendingRecordDetailActions"
+      actionRowData={{ canROReturn, backToTable }}
+    />
+  );
+};
+
+export default PendingRecords;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/positionSelection.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/positionSelection.tsx
new file mode 100644
index 000000000..889552384
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/positionSelection.tsx
@@ -0,0 +1,249 @@
+import { useLocalizedName } from "@/shared/common/localizedName";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from "@/shared/common/ui/select";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { useQueryClient } from "@tanstack/react-query";
+import Cookies from "js-cookie";
+import { useTranslation } from "react-i18next";
+import { UserCheck } from "lucide-react";
+import { useEffect } from "react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+import { PositionName } from "../dto/delegation/delegationDto";
+interface BasePosition {
+  id: string;
+  employeePositionId: string;
+  name: PositionName;
+  isDelegate: boolean;
+}
+
+export const PositionSelect = () => {
+  const {
+    unFilteredUserDetails,
+    selectedPositionId,
+    setSelectedPositionId,
+    isLoading,
+  } = useAuthUser();
+  const queryClient = useQueryClient();
+  const localizedName = useLocalizedName();
+  const { t } = useTranslation();
+  const allPositions = Array.isArray(unFilteredUserDetails?.employee)
+    ? unFilteredUserDetails.employee.flatMap((emp) => emp?.positions ?? [])
+    : [];
+  const selectablePositions = allPositions ?? [];
+  const currentPositionCookie = Cookies.get("current-position-id");
+  const delegatedPositionCookie = Cookies.get("delegatedPositionId");
+  const activePositionId =
+    selectedPositionId || currentPositionCookie || delegatedPositionCookie;
+
+  const currentPosition =
+    selectablePositions.find(
+      (pos) =>
+        pos.id === activePositionId ||
+        pos.employeePositionId === activePositionId ||
+        pos.id === currentPositionCookie ||
+        pos.employeePositionId === delegatedPositionCookie,
+    ) ?? selectablePositions[0];
+
+  useEffect(() => {
+    if (isLoading || !currentPosition) return;
+
+    if (
+      currentPosition.employeePositionId &&
+      selectedPositionId !== currentPosition.employeePositionId
+    ) {
+      setSelectedPositionId(currentPosition.employeePositionId);
+    }
+
+    if (Cookies.get("current-position-id") !== currentPosition.id) {
+      Cookies.set("current-position-id", currentPosition.id);
+    }
+
+    if (
+      currentPosition.employeePositionId &&
+      Cookies.get("delegatedPositionId") !== currentPosition.employeePositionId
+    ) {
+      Cookies.set("delegatedPositionId", currentPosition.employeePositionId);
+    }
+  }, [currentPosition, isLoading, selectedPositionId, setSelectedPositionId]);
+
+  if (isLoading || selectablePositions.length === 0) return null;
+
+  const handleChange = (value: string) => {
+    setSelectedPositionId(value);
+    const selected = selectablePositions.find((pos) => pos.id === value);
+
+    Cookies.set("current-position-id", value);
+    Cookies.set("delegatedPositionId", selected?.employeePositionId || "");
+
+    // Invalidate relevant queries
+    [
+      // record-management
+      "userRecords",
+      "approvalRecord",
+      "incoming-cc",
+      "record-incoming",
+      "incoming-instances",
+      "my-collaborations",
+      "external-incoming",
+      "dashbordReportRO",
+      "dashbordReport",
+      "myRecordApprovals",
+      "authUser",
+      // performance-management
+      "plans",
+      "plans-sector",
+      "my-plans",
+      "my-employee-plans",
+      "employee-plans",
+      "combined-employee-plan",
+      "plan-team-list",
+      "plan-team-member-list",
+      // OKR / objective-management
+      "goals",
+      "goal-participants",
+      "goal-participant",
+      "majorTasks",
+      "majorTasks-participants",
+      "majorTasks-participant",
+      "detailTasks",
+      "detailTask",
+      "expectations",
+      "expectation",
+      "employee-expectations",
+      "achievements",
+      "achievement",
+      "achievementStatistics",
+      "participants",
+      "position",
+      "employees",
+      "directorSignature",
+      "signatureListWithPresigned",
+      "teetersListWithPresigned",
+    ].forEach((key) => {
+      queryClient.invalidateQueries({ queryKey: [key] });
+    });
+  };
+  function getPositionName(pos: BasePosition): PositionName {
+    return pos.name;
+  }
+  return selectablePositions.length > 1 ? (
+    <div className="relative mt-3 lg:mt-3">
+      <Select value={currentPosition?.id || ""} onValueChange={handleChange}>
+        <TooltipProvider delayDuration={300}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="contents">
+                <SelectTrigger className="flex items-center cursor-pointer gap-3 p-8 bg-white/80 dark:bg-gray-800/80 hover:bg-gray-100 dark:hover:bg-gray-700/80 rounded-xl transition-all shadow-sm max-w-[320px] backdrop-blur-sm border-0">
+                  <div className="bg-primary-100 text-primary-800 dark:bg-primary-900/30 dark:text-primary-300 p-2 rounded-lg">
+                    <UserCheck className="w-4 h-4" />
+                  </div>
+
+                  <div className="flex-1 text-left min-w-0 overflow-hidden">
+                    <div className="flex items-center gap-2">
+                      <p className="font-medium truncate text-sm">
+                        {currentPosition
+                          ? localizedName(currentPosition.name)
+                          : t("delegation.select")}
+                      </p>
+                      {currentPosition && currentPosition.isDelegate && (
+                        <span className="flex-shrink-0 text-xs bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-200 px-2 py-0.5 rounded-md">
+                          {t("delegation.title")}
+                        </span>
+                      )}
+                    </div>
+                    <p className="text-sm text-gray-500 dark:text-gray-400 truncate mt-0.5">
+                      {t("delegation.acting")}
+                    </p>
+                  </div>
+                </SelectTrigger>
+              </div>
+            </TooltipTrigger>
+            {currentPosition && (
+              <TooltipContent
+                side="bottom"
+                align="start"
+                className="max-w-[320px]"
+              >
+                <p className="font-medium">
+                  {localizedName(getPositionName(currentPosition))}
+                </p>
+                {currentPosition && currentPosition.isDelegate && (
+                  <p className="text-yellow-600 dark:text-yellow-400 text-xs mt-1">
+                    {t("delegation.title")}
+                  </p>
+                )}
+              </TooltipContent>
+            )}
+          </Tooltip>
+        </TooltipProvider>
+
+        <SelectContent
+          className="w-[320px] max-w-[90vw] rounded-xl p-2 shadow-lg bg-white dark:bg-gray-800 max-h-[60vh] overflow-y-auto border-0"
+          align="start"
+        >
+          <div className="py-1">
+            <h3 className="px-3 py-2 text-sm font-medium text-gray-500 dark:text-gray-400 sticky top-0 bg-white dark:bg-gray-800 z-10 backdrop-blur-sm bg-opacity-90 dark:bg-opacity-90">
+              {t("delegation.switchRole")}
+            </h3>
+
+            {selectablePositions.map((pos) => {
+              const positionId = pos.id;
+              const positionName = localizedName(pos.name);
+              return (
+                <SelectItem
+                  key={positionId}
+                  value={positionId || ""}
+                  className="rounded-lg px-3 py-3 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-750 border-0"
+                >
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <div className="flex items-center gap-3 w-full">
+                          <div className="bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary p-2 rounded-lg flex-shrink-0">
+                            <UserCheck className="w-4 h-4" />
+                          </div>
+                          <div className="min-w-0 flex-1">
+                            <p className="font-medium truncate text-sm">
+                              {positionName}
+                            </p>
+                            {pos?.isDelegate && (
+                              <span className="text-xs text-yellow-600 dark:text-yellow-400 mt-1 inline-block">
+                                {t("delegation.title")}
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                      </TooltipTrigger>
+                      <TooltipContent
+                        side="right"
+                        align="center"
+                        className="max-w-[280px]"
+                        hidden={positionName.length < 40}
+                      >
+                        <p>{positionName}</p>
+                        {pos?.isDelegate && (
+                          <p className="text-yellow-600 dark:text-yellow-400 text-xs mt-1">
+                            {t("delegation.title")}
+                          </p>
+                        )}
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </SelectItem>
+              );
+            })}
+          </div>
+        </SelectContent>
+      </Select>
+    </div>
+  ) : null;
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/RecordOfficerLayout.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/RecordOfficerLayout.tsx
new file mode 100644
index 000000000..9359040e1
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/RecordOfficerLayout.tsx
@@ -0,0 +1,11 @@
+// import { Label } from "@/shared/common/ui/label";
+import { Outlet } from "react-router-dom";
+
+const RecordOfficerLayout = () => (
+  <>
+    {/* <Label className="mb-4  text-xl"></Label> */}
+    <Outlet />
+  </>
+);
+
+export default RecordOfficerLayout;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/AddIncoming/AddIncomingRecordForm.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/AddIncoming/AddIncomingRecordForm.tsx
new file mode 100644
index 000000000..8a87add0a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/AddIncoming/AddIncomingRecordForm.tsx
@@ -0,0 +1,1025 @@
+"use client";
+
+import { useEffect, useState, useRef } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { FileText, Hash, User, Building2, Upload, Cloud } from "lucide-react";
+import { DmsFilePickerModal } from "@/record-management/components/userRecords/common/DmsFilePickerModal";
+import { DmsAttachmentItem } from "@/record-management/components/userRecords/common/DmsAttachmentItem";
+
+import { Input } from "@/shared/common/ui/input";
+import { Button } from "@/shared/common/ui/button";
+import {
+  sendLetterSchema,
+  defaultSendLetterValues,
+  type SendLetterFormValues,
+} from "./Form-Schema";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from "@/shared/common/ui/form";
+import { ReusableFileUploader } from "@/shared/common/ui/fileUploader/reusableFileUploader";
+import {
+  useIncomings,
+  useUpdateIncoming,
+} from "@/record-management/components/hooks/useIncomingRecords";
+
+import { toast } from "sonner";
+import { t } from "i18next";
+import { useQueryClient } from "@tanstack/react-query";
+import { RadioGroup, RadioGroupItem } from "@/shared/common/ui/radio-group";
+import { Label } from "@/shared/common/ui/label";
+
+import {
+  STORAGE_UPLOAD_ERROR_CODE,
+  STORAGE_UPLOAD_TOO_LARGE,
+  UploadKeyResponse,
+  uploadMultiple,
+  uploadSingle,
+} from "@/record-management/services/api/newFileService";
+
+import {
+  AttachmentInfo,
+  FileInfo as RecordFileInfo,
+  RecordAttachmentDto,
+} from "@/record-management/dto/userRecords/userRecordsDto";
+import { fetchRecordById } from "@/record-management/services/api/userRecordService";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { Spinner } from "@/shared/common/ui/sppiner";
+import { useNonSmartRecordPdfAssign } from "@/record-management/components/hooks/useNonSmartRecordPdfAssign";
+import AssignIncomingRecordModal from "./AssignIncomingRecordModal";
+
+interface AddIncomingRecordFormProps {
+  editingId?: string;
+  onSuccess?: () => void;
+  onCancel?: (error: unknown) => void;
+}
+
+const AddIncomingRecordForm = ({
+  editingId,
+  onSuccess,
+  onCancel,
+}: AddIncomingRecordFormProps) => {
+  const form = useForm<SendLetterFormValues>({
+    resolver: zodResolver(sendLetterSchema),
+    defaultValues: {
+      ...defaultSendLetterValues,
+      receiverPositions: [],
+      receiverEmployeePositions: [],
+    },
+  });
+
+  const queryClient = useQueryClient();
+  const [files, setFiles] = useState<File[]>([]);
+  const [dmsAttachments, setDmsAttachments] = useState<any[]>([]);
+  const [isDmsPickerOpen, setIsDmsPickerOpen] = useState(false);
+  const localFileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleLocalUploadClick = () => {
+    localFileInputRef.current?.click();
+  };
+
+  const handleLocalFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      const selected = Array.from(e.target.files);
+      setFiles([...files, ...selected]);
+    }
+  };
+
+  const handleAttachDmsDocs = (docs: any[]) => {
+    setDmsAttachments((prev) => {
+      const next = [...prev];
+      docs.forEach((doc) => {
+        if (!next.some((x) => x.id === doc.id)) {
+          next.push(doc);
+        }
+      });
+      return next;
+    });
+  };
+
+  const handleRemoveDmsAttachment = (id: string) => {
+    setDmsAttachments((prev) => prev.filter((x) => x.id !== id));
+  };
+
+  const { sendLetterAndUploadFile, isSending, isUploading } = useIncomings();
+  const { updateIncomingRecord, isUpdating } = useUpdateIncoming();
+  const { handleError } = useErrorHandler(t);
+  const [mainFileIndex, setMainFileIndex] = useState<number | null>(null);
+  const [mainFileError, setMainFileError] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [existingFileInfo, setExistingFileInfo] =
+    useState<RecordFileInfo | null>(null);
+  const [existingAttachments, setExistingAttachments] = useState<
+    AttachmentInfo[]
+  >([]);
+  const [replaceMainFile, setReplaceMainFile] = useState(false);
+  const [showAssignModal, setShowAssignModal] = useState(false);
+  const [pendingFormData, setPendingFormData] =
+    useState<SendLetterFormValues | null>(null);
+  const [isCreateAndAssign, setIsCreateAndAssign] = useState(false);
+  const lang = localStorage.getItem("i18nextLng") || "am"; // Default to Amharic if not set
+  const {
+    createAndAssign,
+    isCreating,
+    updateAndAssign,
+    isUpdating: isAssigning,
+  } = useNonSmartRecordPdfAssign();
+  const isLoading =
+    isSending ||
+    isUploading ||
+    isUpdating ||
+    isSubmitting ||
+    isCreating ||
+    isAssigning;
+
+  useEffect(() => {
+    if (files.length > 0 && mainFileIndex === null && !editingId) {
+      setMainFileIndex(0); // Set first file as default main file
+      setMainFileError("");
+    }
+  }, [files, mainFileIndex, editingId]);
+
+  useEffect(() => {
+    if (!editingId) return;
+
+    const loadExistingRecord = async () => {
+      try {
+        const record = await fetchRecordById(editingId);
+        const content = record.content?.[0];
+
+        setExistingFileInfo(record.fileInfo ?? null);
+        setExistingAttachments(
+          (content?.recordAttachments ?? []).map(
+            (attachment: RecordAttachmentDto) => ({
+              fileInfo: {
+                fileName: attachment.fileInfo.fileName,
+                contentType: attachment.fileInfo.contentType,
+                originalname: attachment.fileInfo.originalname,
+                size: attachment.fileInfo.size ?? 0,
+                bucket: attachment.fileInfo.bucket ?? "",
+              },
+              name: {
+                am:
+                  attachment.fileInfo.originalname ||
+                  attachment.fileInfo.fileName,
+                en:
+                  attachment.fileInfo.originalname ||
+                  attachment.fileInfo.fileName,
+              },
+            }),
+          ),
+        );
+      } catch (error) {
+        await handleError(error);
+      }
+    };
+
+    loadExistingRecord();
+  }, [editingId, handleError]);
+
+  useEffect(() => {
+    if (!editingId || !replaceMainFile) {
+      setMainFileError("");
+      return;
+    }
+
+    if (files.length === 0) {
+      setReplaceMainFile(false);
+      setMainFileIndex(null);
+      return;
+    }
+
+    if (mainFileIndex === null) {
+      setMainFileIndex(0);
+    }
+  }, [editingId, replaceMainFile, files, mainFileIndex]);
+
+  const handleAssignmentSuccess = async (assignmentData: any) => {
+    if (!pendingFormData) return;
+
+    try {
+      const selectedMainFile =
+        mainFileIndex !== null ? files[mainFileIndex] : null;
+
+      // Upload files
+      let fileInfos: UploadKeyResponse["fileInfo"][] = [];
+      try {
+        if (files.length > 1) {
+          fileInfos = await uploadMultiple(files);
+        } else if (files.length === 1) {
+          const fileInfo = await uploadSingle(files[0]);
+          fileInfos = [fileInfo];
+        }
+      } catch (uploadError) {
+        if (
+          uploadError instanceof Error &&
+          uploadError.message === STORAGE_UPLOAD_TOO_LARGE
+        ) {
+          toast.error(t("userRecord.storageUploadFailed"), {
+            description: t("msg.fileTooLarge"),
+          });
+        } else if (
+          uploadError instanceof Error &&
+          uploadError.message === STORAGE_UPLOAD_ERROR_CODE
+        ) {
+          toast.error(t("userRecord.storageUploadFailed"));
+        } else {
+          await handleError(uploadError);
+        }
+        return;
+      }
+      const uploadedFiles: AttachmentInfo[] = fileInfos.map((f) => ({
+        fileInfo: {
+          bucket: f.bucket,
+          fileName: f.fileName,
+          contentType: f.contentType,
+          originalname: f.originalname,
+          size: f.size,
+        },
+        name: {
+          am: f.originalname,
+          en: f.originalname,
+        },
+      }));
+
+      const newMainFile =
+        replaceMainFile && mainFileIndex !== null
+          ? (uploadedFiles[mainFileIndex]?.fileInfo ?? null)
+          : null;
+      const newUploadedAttachments = uploadedFiles.filter((_, index) =>
+        editingId
+          ? !replaceMainFile || index !== mainFileIndex
+          : index !== mainFileIndex,
+      );
+      // convert DMS documents → AttachmentInfo
+      const dmsUploadedFiles: AttachmentInfo[] = dmsAttachments.map((doc) => ({
+        fileInfo: {
+          bucket: doc.fileInfo?.bucket || "",
+          fileName: doc.fileInfo?.fileName || "",
+          contentType: doc.fileInfo?.contentType || "",
+          size: doc.fileInfo?.size || 0,
+          originalname:
+            doc.fileInfo?.originalname ||
+            (typeof doc.name === "object"
+              ? doc.name?.en || doc.name?.am
+              : doc.name) ||
+            "document",
+        },
+        name: {
+          am:
+            (typeof doc.name === "object"
+              ? doc.name?.am || doc.name?.en
+              : doc.name) || "document",
+          en:
+            (typeof doc.name === "object"
+              ? doc.name?.en || doc.name?.am
+              : doc.name) || "document",
+        },
+      }));
+
+      const finalFileInfo =
+        newMainFile ??
+        (editingId
+          ? existingFileInfo
+          : uploadedFiles[mainFileIndex ?? 0]?.fileInfo);
+      const finalAttachments = editingId
+        ? [
+            ...existingAttachments,
+            ...newUploadedAttachments,
+            ...dmsUploadedFiles,
+          ]
+        : [...newUploadedAttachments, ...dmsUploadedFiles];
+
+      if (!finalFileInfo) {
+        throw new Error("Main file information is required");
+      }
+
+      // Build payload for API
+      const selectedEmployees = assignmentData.assignedEmployees;
+      const employeePositionIds = selectedEmployees;
+
+      const payload = {
+        uploadDto: {
+          fileInfo: {
+            fileName: finalFileInfo.fileName,
+            contentType: finalFileInfo.contentType,
+            size: finalFileInfo.size ?? 0,
+            originalname: finalFileInfo.originalname,
+            bucket: finalFileInfo.bucket ?? "",
+          },
+          subject: pendingFormData.subject,
+          receiverPositions: assignmentData.receivingDepartments,
+          receiverEmployeePositions: employeePositionIds,
+          letterNumber: pendingFormData.letterNumber,
+          organizationName: pendingFormData.organizationName,
+          deliveredBy: pendingFormData.deliveredBy,
+          preferredLanguage: pendingFormData.preferredLanguage || lang || "am",
+          letterName: pendingFormData.letterName,
+          attachments: finalAttachments.map((att) => ({
+            fileInfo: {
+              fileName: att.fileInfo.fileName,
+              contentType: att.fileInfo.contentType,
+              size: att.fileInfo.size,
+              originalname: att.fileInfo.originalname,
+            },
+            name: att.name,
+          })),
+        },
+        assignDto: {
+          recordBoxId: null,
+          recordId: editingId || null,
+          employeePositionIds,
+          positionIds: assignmentData.receivingDepartments,
+          comment: assignmentData.remarks,
+        },
+      };
+
+      if (isCreateAndAssign) {
+        try {
+          await createAndAssign(payload);
+          form.reset({
+            ...defaultSendLetterValues,
+            receiverPositions: [],
+            receiverEmployeePositions: [],
+          });
+          setFiles([]);
+          setDmsAttachments([]);
+          setMainFileIndex(null);
+          setShowAssignModal(false);
+          setPendingFormData(null);
+          setIsCreateAndAssign(false);
+
+          queryClient.invalidateQueries({
+            queryKey: ["external-record-incoming"],
+          });
+
+          toast.success(t("incomingRecord.createdAndAssignedSuccess"));
+          onSuccess?.();
+        } catch (error) {
+          await handleError(error);
+        }
+      } else if (editingId) {
+        try {
+          await updateAndAssign({ id: editingId, payload });
+          form.reset({
+            ...defaultSendLetterValues,
+            receiverPositions: [],
+            receiverEmployeePositions: [],
+          });
+          setFiles([]);
+          setDmsAttachments([]);
+          setMainFileIndex(null);
+          setShowAssignModal(false);
+          setPendingFormData(null);
+
+          queryClient.invalidateQueries({
+            queryKey: ["external-record-incoming"],
+          });
+
+          toast.success(t("incomingRecord.updatedAndAssignedSuccess"));
+          onSuccess?.();
+        } catch (error) {
+          await handleError(error);
+        }
+      }
+    } catch (error) {
+      console.error("Error during assignment:", error);
+      await handleError(error);
+    }
+  };
+
+  const onSubmit = async (values: SendLetterFormValues) => {
+    if (!editingId && files.length === 0) {
+      toast.error(t("userRecord.Please select file"));
+      return;
+    }
+
+    if (!editingId && mainFileIndex === null) {
+      toast.error(t("userRecord.Please select a main file"));
+      setMainFileError(t("userRecord.Please select a main file"));
+      return;
+    }
+
+    if (editingId && replaceMainFile && mainFileIndex === null) {
+      toast.error(t("userRecord.Please select a main file"));
+      setMainFileError(t("userRecord.Please select a main file"));
+      return;
+    }
+    setMainFileError("");
+
+    setIsSubmitting(true);
+
+    try {
+      const selectedMainFile =
+        mainFileIndex !== null ? files[mainFileIndex] : null;
+
+      // Check if replacement main file is PDF
+      if (
+        selectedMainFile &&
+        (!editingId || replaceMainFile) &&
+        selectedMainFile.type !== "application/pdf"
+      ) {
+        toast.error(t("userRecord.The main file must be a PDF document"));
+        setMainFileError(t("userRecord.The main file must be a PDF document"));
+        return;
+      }
+
+      // =========================
+      // 1. UPLOAD FILES (NEW LOGIC)
+      // =========================
+      let fileInfos: UploadKeyResponse["fileInfo"][] = [];
+
+      try {
+        if (files.length > 1) {
+          fileInfos = await uploadMultiple(files);
+        } else if (files.length === 1) {
+          const fileInfo = await uploadSingle(files[0]);
+          fileInfos = [fileInfo];
+        }
+      } catch (uploadError) {
+        if (
+          uploadError instanceof Error &&
+          uploadError.message === STORAGE_UPLOAD_TOO_LARGE
+        ) {
+          toast.error(t("userRecord.storageUploadFailed"), {
+            description: t("msg.fileTooLarge"),
+          });
+        } else if (
+          uploadError instanceof Error &&
+          uploadError.message === STORAGE_UPLOAD_ERROR_CODE
+        ) {
+          toast.error(t("userRecord.storageUploadFailed"));
+        } else {
+          await handleError(uploadError);
+        }
+        setIsSubmitting(false);
+        return; // Exit early but keep form intact
+      }
+
+      // Convert fileInfo → AttachmentInfo
+      const uploadedFiles: AttachmentInfo[] = fileInfos.map((f) => ({
+        fileInfo: {
+          bucket: f.bucket,
+          fileName: f.fileName,
+          contentType: f.contentType,
+          originalname: f.originalname,
+          size: f.size,
+        },
+        name: {
+          am: f.originalname,
+          en: f.originalname,
+        },
+      }));
+      const newMainFile =
+        replaceMainFile && mainFileIndex !== null
+          ? (uploadedFiles[mainFileIndex]?.fileInfo ?? null)
+          : null;
+      const newUploadedAttachments = uploadedFiles.filter((_, index) =>
+        editingId
+          ? !replaceMainFile || index !== mainFileIndex
+          : index !== mainFileIndex,
+      );
+      // convert DMS documents → AttachmentInfo
+      const dmsUploadedFiles: AttachmentInfo[] = dmsAttachments.map((doc) => ({
+        fileInfo: {
+          bucket: doc.fileInfo?.bucket || "",
+          fileName: doc.fileInfo?.fileName || "",
+          contentType: doc.fileInfo?.contentType || "",
+          size: doc.fileInfo?.size || 0,
+          originalname:
+            doc.fileInfo?.originalname ||
+            (typeof doc.name === "object"
+              ? doc.name?.en || doc.name?.am
+              : doc.name) ||
+            "document",
+        },
+        name: {
+          am:
+            (typeof doc.name === "object"
+              ? doc.name?.am || doc.name?.en
+              : doc.name) || "document",
+          en:
+            (typeof doc.name === "object"
+              ? doc.name?.en || doc.name?.am
+              : doc.name) || "document",
+        },
+      }));
+
+      const finalFileInfo =
+        newMainFile ??
+        (editingId
+          ? existingFileInfo
+          : uploadedFiles[mainFileIndex ?? 0]?.fileInfo);
+      const finalAttachments = editingId
+        ? [
+            ...existingAttachments,
+            ...newUploadedAttachments,
+            ...dmsUploadedFiles,
+          ]
+        : [...newUploadedAttachments, ...dmsUploadedFiles];
+
+      if (!finalFileInfo) {
+        throw new Error("Main file information is required");
+      }
+
+      // =========================
+      // 2. BUILD PAYLOAD
+      // =========================
+      const payload = {
+        ...values,
+        fileInfo: finalFileInfo,
+        attachments: finalAttachments,
+        receiverPositions: [],
+        receiverEmployeePositions: [],
+      };
+
+      // =========================
+      // 3. CREATE RECORD
+      // =========================
+
+      try {
+        if (editingId) {
+          await updateIncomingRecord(payload, editingId);
+        } else {
+          if (!selectedMainFile) {
+            throw new Error("Main file is required");
+          }
+          await sendLetterAndUploadFile(
+            {
+              ...payload,
+              fileInfo: {
+                fileName: finalFileInfo.fileName,
+                contentType: finalFileInfo.contentType,
+                originalname: finalFileInfo.originalname,
+                size: finalFileInfo.size ?? 0,
+              },
+            },
+            selectedMainFile,
+          );
+        }
+      } catch (recordError) {
+        await handleError(recordError);
+        setIsSubmitting(false);
+        return; // Exit early but keep form intact
+      }
+
+      form.reset({
+        ...defaultSendLetterValues,
+        receiverPositions: [],
+        receiverEmployeePositions: [],
+      });
+
+      setFiles([]);
+      setDmsAttachments([]);
+      setMainFileIndex(null);
+      await queryClient.invalidateQueries({
+        queryKey: ["external-record-incoming"],
+      });
+
+      toast.success(
+        editingId
+          ? t("incomingRecord.updatedSuccess")
+          : t("incomingRecord.createdSuccess"),
+      );
+      onSuccess?.();
+    } catch (error) {
+      console.error("Unexpected error in form submission:", error);
+
+      const handledMessage = await handleError(error);
+      if (!handledMessage?.trim()) {
+        toast.error(t("userRecord.An unexpected error occurred"));
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Form {...form}>
+      {isLoading && (
+        <div
+          className="pointer-events-auto fixed inset-0 z-[100] flex items-center justify-center bg-white/80 backdrop-blur-sm dark:bg-gray-950/70"
+          onClick={(e) => e.stopPropagation()}>
+          <div className="flex flex-col items-center gap-3 rounded-xl bg-white p-6 shadow-lg dark:bg-gray-900 dark:shadow-2xl dark:shadow-black/40">
+            <Spinner size="large" />
+            <p className="text-sm text-gray-600 dark:text-gray-300">
+              {t("userIncoming.Processing...")}
+            </p>
+          </div>
+        </div>
+      )}
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="mx-auto max-w-2xl space-y-8 rounded-xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900"
+        aria-labelledby="form-title">
+        <div className="border-b border-gray-200 pb-4 dark:border-gray-700">
+          <div className="flex items-center gap-3">
+            <div className="rounded-lg bg-primary-50 p-2 dark:bg-primary-900/30">
+              <FileText className="h-6 w-6 text-primary-600 dark:text-primary-400" />
+            </div>
+            <div>
+              <h2
+                id="form-title"
+                className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+                {editingId
+                  ? t("userRecord.Edit Record")
+                  : t("userRecord.Add Record")}
+              </h2>
+              <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                {editingId
+                  ? t("msg.updateRecordMsg")
+                  : t("msg.createRecordMsg")}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-6">
+          <div className="space-y-4">
+            <h3 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-gray-700 dark:text-gray-200">
+              <FileText className="h-4 w-4 text-primary-600 dark:text-primary-400" />
+              {t("addRecord.letterInformation")}
+            </h3>
+
+            <FormField
+              control={form.control}
+              name="subject"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="text-gray-700 dark:text-gray-200">
+                    {t("userIncoming.Subject")}
+                  </FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={t("userIncoming.Subject")}
+                      {...field}
+                      disabled={isLoading}
+                      className="border-gray-300 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus:border-primary-400 dark:focus:ring-primary-400"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="letterNumber"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="flex items-center gap-1 text-gray-700 dark:text-gray-200">
+                      <Hash className="h-3 w-3" />
+                      {t("userRecord.Letter Number")}
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder={t("userRecord.Letter Number")}
+                        {...field}
+                        disabled={isLoading}
+                        className="border-gray-300 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus:border-primary-400 dark:focus:ring-primary-400"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="letterName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="text-gray-700 dark:text-gray-200">
+                      {t("viewDetail.fileName1")}
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder={t("viewDetail.fileName1")}
+                        {...field}
+                        disabled={isLoading}
+                        className="border-gray-300 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus:border-primary-400 dark:focus:ring-primary-400"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="deliveredBy"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="flex items-center gap-1 text-gray-700 dark:text-gray-200">
+                    <User className="h-3 w-3" />
+                    {t("userRecord.Delivered By")}
+                  </FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={t("userRecord.Delivered By")}
+                      {...field}
+                      disabled={isLoading}
+                      className="border-gray-300 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus:border-primary-400 dark:focus:ring-primary-400"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+
+          <div className="space-y-4 border-t border-gray-200 pt-4 dark:border-gray-700">
+            <h3 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-gray-700 dark:text-gray-200">
+              <Building2 className="h-4 w-4 text-primary-600 dark:text-primary-400" />
+              {t("addRecord.organizationInformation")}
+            </h3>
+
+            <FormField
+              control={form.control}
+              name="organizationName.am"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="text-gray-700 dark:text-gray-200">
+                    {t("userIncoming.Sending Organization (Amharic)")}
+                  </FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={t(
+                        "userIncoming.Sending Organization (Amharic)",
+                      )}
+                      {...field}
+                      disabled={isLoading}
+                      className="border-gray-300 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus:border-primary-400 dark:focus:ring-primary-400"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="organizationName.en"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="text-gray-700 dark:text-gray-200">
+                    {t("userIncoming.Sending Organization (English)")}
+                  </FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={t(
+                        "userIncoming.Sending Organization (English)",
+                      )}
+                      {...field}
+                      disabled={isLoading}
+                      className="border-gray-300 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus:border-primary-400 dark:focus:ring-primary-400"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+
+          <div className="space-y-4 border-t border-gray-200 pt-4 dark:border-gray-700">
+            <h3 className="text-sm font-semibold uppercase tracking-wide text-gray-700 dark:text-gray-200">
+              {t("Document Attachments")}
+            </h3>
+            {editingId && existingFileInfo && (
+              <div className="rounded-lg border border-primary-200 bg-primary-50 p-4 text-sm text-gray-700 dark:border-primary-700/40 dark:bg-primary-900/20 dark:text-gray-200">
+                <p className="font-medium text-gray-900 dark:text-gray-100">
+                  {t("viewDetail.letter")}:
+                </p>
+                <p>
+                  {existingFileInfo.originalname || existingFileInfo.fileName}
+                </p>
+                {existingAttachments.length > 0 && (
+                  <p className="mt-2 text-gray-600 dark:text-gray-400">
+                    {existingAttachments.length} existing attachment
+                    {existingAttachments.length > 1 ? "s" : ""} will be kept
+                    unless removed separately.
+                  </p>
+                )}
+              </div>
+            )}
+            <div className="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800/60">
+              {/* Action buttons row */}
+              <div className="flex flex-wrap gap-4 mb-4">
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={handleLocalUploadClick}
+                  className="flex items-center gap-2 border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
+                  <Upload className="h-4 w-4" />
+                  {t("addRecord.uploadFromComputer") || "Upload from Computer"}
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => setIsDmsPickerOpen(true)}
+                  className="flex items-center gap-2 border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
+                  <Cloud className="h-4 w-4" />
+                  {t("addRecord.addAttachmentFromDms") ||
+                    "+ Add Attachment from DMS"}
+                </Button>
+                <input
+                  type="file"
+                  ref={localFileInputRef}
+                  className="hidden"
+                  multiple
+                  onChange={handleLocalFileChange}
+                />
+              </div>
+
+              <ReusableFileUploader
+                files={files}
+                setFiles={setFiles}
+                isLoading={isLoading}
+              />
+
+              {/* DMS attachments list */}
+              {dmsAttachments && dmsAttachments.length > 0 && (
+                <div className="flex flex-col gap-4 mt-4 max-h-48 overflow-y-auto px-3">
+                  {dmsAttachments.map((doc) => (
+                    <DmsAttachmentItem
+                      key={doc.id}
+                      doc={doc}
+                      onRemove={() => handleRemoveDmsAttachment(doc.id)}
+                    />
+                  ))}
+                </div>
+              )}
+
+              <DmsFilePickerModal
+                isOpen={isDmsPickerOpen}
+                onClose={() => setIsDmsPickerOpen(false)}
+                onAttach={handleAttachDmsDocs}
+              />
+            </div>
+          </div>
+
+          {editingId && files.length > 0 && (
+            <div className="space-y-3 rounded-lg border border-primary-200 bg-primary-50 p-4 dark:border-primary-700/40 dark:bg-primary-900/20">
+              <Label className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+                Main file behavior
+              </Label>
+              <div className="space-y-2">
+                <label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200">
+                  <input
+                    type="radio"
+                    checked={!replaceMainFile}
+                    onChange={() => {
+                      setReplaceMainFile(false);
+                      setMainFileIndex(null);
+                    }}
+                    disabled={isLoading}
+                    className="accent-primary"
+                  />
+                  Keep existing main file and add new uploads as attachments
+                </label>
+                <label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200">
+                  <input
+                    type="radio"
+                    checked={replaceMainFile}
+                    onChange={() => setReplaceMainFile(true)}
+                    disabled={isLoading}
+                    className="accent-primary"
+                  />
+                  Replace the main file with one of the new uploads
+                </label>
+              </div>
+            </div>
+          )}
+
+          {(files.length > 1 ||
+            (editingId && replaceMainFile && files.length > 0)) && (
+            <div className="rounded-lg border border-primary-200 bg-primary-50 p-4 dark:border-primary-700/40 dark:bg-primary-900/20">
+              <h3 className="mb-3 text-sm font-semibold text-gray-900 dark:text-gray-100">
+                {t("Select the main file for the record")}
+              </h3>
+              <RadioGroup
+                value={mainFileIndex?.toString()}
+                onValueChange={(value) => {
+                  setMainFileIndex(Number(value));
+                  setMainFileError("");
+                }}
+                className="space-y-2">
+                {files.map((file, index) => (
+                  <div
+                    key={file.name}
+                    className="flex items-center space-x-3 rounded-md p-2 transition-colors hover:bg-primary-100 dark:hover:bg-primary-900/40">
+                    <RadioGroupItem
+                      value={index.toString()}
+                      id={`main-file-${index}`}
+                      className="border-primary-600 text-primary-600 dark:border-primary-400 dark:text-primary-400"
+                    />
+                    <Label
+                      htmlFor={`main-file-${index}`}
+                      className="flex-1 cursor-pointer text-sm text-gray-700 dark:text-gray-200">
+                      {file.name}
+                    </Label>
+                  </div>
+                ))}
+              </RadioGroup>
+              {mainFileError && (
+                <p className="mt-2 flex items-center gap-1 text-sm text-red-600 dark:text-red-400">
+                  <span className="font-medium">!</span> {mainFileError}
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+
+        <div className="border-t border-gray-200 pt-4 dark:border-gray-700">
+          <div className="space-y-3">
+            <Button
+              type="submit"
+              disabled={isLoading}
+              className="w-full rounded-lg bg-primary-600 py-3 font-medium text-white shadow-sm transition-all duration-200 hover:bg-primary-700 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50 dark:bg-primary-500 dark:hover:bg-primary-600">
+              {isLoading
+                ? t("userIncoming.Processing...")
+                : editingId
+                  ? t("userRecord.Update")
+                  : t("common.create")}
+            </Button>
+
+            <Button
+              type="button"
+              disabled={isLoading}
+              onClick={async () => {
+                const isValid = await form.trigger();
+                if (!isValid) {
+                  toast.error(
+                    t("userRecord.Please fill in all required fields"),
+                  );
+                  return;
+                }
+
+                if (!editingId && files.length === 0) {
+                  toast.error(t("userRecord.Please select file"));
+                  return;
+                }
+
+                if (!editingId && mainFileIndex === null) {
+                  toast.error(t("userRecord.Please select a main file"));
+                  setMainFileError(t("userRecord.Please select a main file"));
+                  return;
+                }
+
+                if (editingId && replaceMainFile && mainFileIndex === null) {
+                  toast.error(t("userRecord.Please select a main file"));
+                  setMainFileError(t("userRecord.Please select a main file"));
+                  return;
+                }
+
+                const selectedMainFile =
+                  mainFileIndex !== null ? files[mainFileIndex] : null;
+
+                if (
+                  selectedMainFile &&
+                  (!editingId || replaceMainFile) &&
+                  selectedMainFile.type !== "application/pdf"
+                ) {
+                  toast.error(
+                    t("userRecord.The main file must be a PDF document"),
+                  );
+                  setMainFileError(
+                    t("userRecord.The main file must be a PDF document"),
+                  );
+                  return;
+                }
+
+                setPendingFormData(form.getValues());
+                setIsCreateAndAssign(!editingId);
+                setShowAssignModal(true);
+              }}
+              className="w-full rounded-lg bg-blue-600 py-3 font-medium text-white shadow-sm transition-all duration-200 hover:bg-blue-700 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-600">
+              {editingId
+                ? t("userIncoming.Update and Assign")
+                : t("userIncoming.Create and Assign")}
+            </Button>
+          </div>
+        </div>
+      </form>
+
+      <AssignIncomingRecordModal
+        isOpen={showAssignModal}
+        onSuccess={handleAssignmentSuccess}
+        onClose={() => {
+          setShowAssignModal(false);
+          setPendingFormData(null);
+          setIsCreateAndAssign(false);
+        }}
+      />
+    </Form>
+  );
+};
+
+export default AddIncomingRecordForm;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/AddIncoming/AssignIncomingRecordModal.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/AddIncoming/AssignIncomingRecordModal.tsx
new file mode 100644
index 000000000..fb30705e2
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/AddIncoming/AssignIncomingRecordModal.tsx
@@ -0,0 +1,203 @@
+import { useForm, FormProvider } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Button } from "@/shared/common/ui/button";
+import useSettings from "@/record-management/components/hooks/useSettings";
+import { useUserDetail } from "@/record-management/components/hooks/useUserDetail";
+import {
+  PositionDto,
+  PositionHolderDto,
+} from "@/record-management/dto/userRecords/usersDto";
+import { toast } from "sonner";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/shared/common/ui/dialog";
+import { useTranslation } from "react-i18next";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/shared/common/ui/form";
+import { MultiSelect } from "@/shared/common/ui/multi-select";
+import { Textarea } from "@/shared/common/ui/textarea";
+
+const assignmentSchema = z.object({
+  receivingDepartments: z.array(z.string()),
+  assignedEmployees: z.array(z.string()),
+  remarks: z.string(),
+}).refine(
+  (data) => data.receivingDepartments.length > 0 || data.assignedEmployees.length > 0,
+  {
+    message: "Either receiver position or employee is required",
+    path: ["receivingDepartments"],
+  }
+);
+
+interface AssignIncomingRecordModalProps {
+  isOpen: boolean;
+  onSuccess: (assignmentData: AssignmentFormData) => void;
+  onClose: () => void;
+}
+
+export interface AssignmentFormData {
+  receivingDepartments: string[];
+  assignedEmployees: string[];
+  remarks: string;
+}
+
+const AssignIncomingRecordModal = ({
+  isOpen,
+  onSuccess,
+  onClose,
+}: AssignIncomingRecordModalProps) => {
+  const form = useForm<z.infer<typeof assignmentSchema>>({
+    resolver: zodResolver(assignmentSchema),
+    defaultValues: {
+      receivingDepartments: [],
+      assignedEmployees: [],
+      remarks: "",
+    },
+  });
+
+  const { listPositionResponse, listAllDepartmentResponse } = useSettings();
+  const { permissionKeys } = useUserDetail();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+  const localizedName = useLocalizedName();
+
+  const positionOptions = Array.isArray(listAllDepartmentResponse)
+    ? listAllDepartmentResponse.map((pos: PositionDto) => ({
+        label: localizedName(pos.name) || "N/A",
+        value: pos.id,
+      }))
+    : [];
+
+  const employeeOptions = Array.isArray(listPositionResponse)
+    ? listPositionResponse.flatMap((unit: PositionHolderDto) =>
+        unit.employeePositions.map((pos) => ({
+          label: localizedName(unit.user?.name) || "Unnamed employee",
+          value: pos.id,
+          positionId: pos.positionId,
+        })),
+      )
+    : [];
+
+  const handleFormSubmit = form.handleSubmit((values) => {
+    try {
+      form.reset();
+      onSuccess(values);
+    } catch (err) {
+      console.error("Assignment error:", err);
+      toast.error(
+        err instanceof Error ? err.message : "Failed to process assignment"
+      );
+    }
+  });
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="sm:max-w-[425px] bg-white dark:bg-gray-800 max-h-[90vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>{t("userIncoming.Assign Record")}</DialogTitle>
+          <DialogDescription>
+            {t(
+              "userIncoming.Assign this record to one or more departments"
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <FormProvider {...form}>
+          <form onSubmit={handleFormSubmit} className="flex flex-col flex-1 overflow-hidden">
+            <div className="flex-1 overflow-y-auto px-4 space-y-4">
+              <FormField
+                control={form.control}
+                name="receivingDepartments"
+                render={({ field }) => (
+                  <FormItem className="space-y-1">
+                    <FormLabel>
+                      {t("userIncoming.Department")} <span className="text-red-500">*</span>
+                    </FormLabel>
+                    <FormControl>
+                      <MultiSelect
+                        options={positionOptions}
+                        onValueChange={field.onChange}
+                        value={field.value}
+                        placeholder={t("userIncoming.Department") + "..."}
+                        variant="default"
+                        animation={200}
+                        maxCount={5}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="assignedEmployees"
+                render={({ field }) => (
+                  <FormItem className="space-y-1">
+                    <FormLabel>
+                      {t("userIncoming.Employees")} <span className="text-red-500">*</span>
+                    </FormLabel>
+                    <FormControl>
+                      <MultiSelect
+                        options={employeeOptions}
+                        onValueChange={field.onChange}
+                        value={field.value}
+                        placeholder={t("userIncoming.Employees") + "..."}
+                        variant="default"
+                        animation={200}
+                        maxCount={5}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {!permissionKeys.includes("can:dispatchRecords") && (
+                <FormField
+                  control={form.control}
+                  name="remarks"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t("userIncoming.Remark")}</FormLabel>
+                      <Textarea
+                        rows={4}
+                        placeholder={t("userIncoming.Remark") + "..."}
+                        {...field}
+                      />
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+            </div>
+
+            <DialogFooter className="border-t border-gray-200 dark:border-gray-700 pt-4 mt-4">
+              <Button type="button" variant="outline" onClick={onClose}>
+                {t("common.Cancel")}
+              </Button>
+              <Button type="submit">
+                {t("userIncoming.Continue")}
+              </Button>
+            </DialogFooter>
+          </form>
+        </FormProvider>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default AssignIncomingRecordModal;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/AddIncoming/Form-Schema.ts b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/AddIncoming/Form-Schema.ts
new file mode 100644
index 000000000..2f6e6b026
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/AddIncoming/Form-Schema.ts
@@ -0,0 +1,69 @@
+import { t } from "i18next";
+import { z } from "zod";
+
+export const sendLetterSchema = z.object({
+  fileInfo: z.object({
+    fileName: z.string(),
+    contentType: z.string(),
+    size: z.number(),
+    originalname: z.string(),
+  }),
+  receiverPositions: z.array(z.string()),
+  receiverEmployeePositions: z.array(z.string()),
+  preferredLanguage: z.enum(["am", "en"]),
+  subject: z.string().min(1, { message: t("msg.subjectRequired") }),
+  letterNumber: z.string().min(1, { message: t("msg.letterNoRequired") }),
+  deliveredBy: z.string().min(1, { message: t("msg.deliveredByRequired") }),
+  letterName: z.string().min(1, { message: t("msg.fileNameRequired") }),
+  organizationName: z.object({
+    am: z.string(),
+    en: z.string(),
+  }),
+});
+
+export type SendLetterFormValues = z.infer<typeof sendLetterSchema>;
+
+export const editLetterSchema = z.object({
+  fileInfo: z
+    .object({
+      fileName: z.string(),
+      contentType: z.string(),
+      size: z.number(),
+      originalname: z.string(),
+    })
+    .optional(), // ✅ allow edit without providing file
+
+  receiverPositions: z.array(z.string()).optional(),
+  receiverEmployeePositions: z.array(z.string()).optional(),
+  preferredLanguage: z.enum(["am", "en"]),
+  subject: z.string().min(1, { message: t("msg.subjectRequired") }),
+  letterNumber: z.string().min(1, { message: t("msg.letterNoRequired") }),
+  deliveredBy: z.string().min(1, { message: t("msg.deliveredByRequired") }),
+  letterName: z.string().min(1, { message: t("msg.fileNameRequired") }),
+  organizationName: z.object({
+    am: z.string(),
+    en: z.string(),
+  }),
+});
+
+export type EditLetterFormValues = z.infer<typeof editLetterSchema>;
+
+export const defaultSendLetterValues: SendLetterFormValues = {
+  fileInfo: {
+    fileName: "",
+    contentType: "",
+    size: 0,
+    originalname: "",
+  },
+  subject: "",
+  receiverPositions: [],
+  receiverEmployeePositions: [],
+  letterNumber: "",
+  organizationName: {
+    am: "",
+    en: "",
+  },
+  deliveredBy: "",
+  preferredLanguage: "en",
+  letterName: "",
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/AssigneIncomingExternalRecord.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/AssigneIncomingExternalRecord.tsx
new file mode 100644
index 000000000..16c3aeb4d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/AssigneIncomingExternalRecord.tsx
@@ -0,0 +1,237 @@
+import { MultiSelect } from "@/shared/common/ui/multi-select";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/shared/common/ui/form";
+import { Textarea } from "@/shared/common/ui/textarea";
+import { useForm, FormProvider } from "react-hook-form";
+import { Button } from "@/shared/common/ui/button";
+import useSettings from "@/record-management/components/hooks/useSettings";
+import { useUserDetail } from "@/record-management/components/hooks/useUserDetail";
+import {
+  AssignIncomingRecordPayload,
+  AssignRecordDto,
+  PositionDto,
+  PositionHolderDto,
+} from "@/record-management/dto/userRecords/usersDto";
+import { toast } from "sonner";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/shared/common/ui/dialog";
+import { useCreateIncomingRecords } from "@/record-management/components/hooks/useCreateIncomingRecord";
+import { useTranslation } from "react-i18next";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+interface AssignRecordProps {
+  isOpen?: boolean;
+  record: AssignRecordDto;
+  onSuccess: () => void;
+  onClose: () => void;
+}
+
+export interface StartAssignRecord {
+  id: string;
+}
+
+const AssigneIncomingRecord = ({
+  isOpen = false,
+  record,
+  onSuccess,
+  onClose,
+}: AssignRecordProps) => {
+  const form = useForm<{
+    receivingDepartments: string[];
+    assignedEmployees: string[];
+    remarks: string;
+  }>({
+    defaultValues: {
+      receivingDepartments: [],
+      assignedEmployees: [],
+      remarks: "",
+    },
+  });
+
+  const { listPositionResponse, listAllDepartmentResponse } = useSettings();
+  const { permissionKeys } = useUserDetail();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+  const localizedName = useLocalizedName();
+  // Map your position list to options for MultiSelect
+  const positionOptions = Array.isArray(listAllDepartmentResponse)
+    ? listAllDepartmentResponse.map((pos: PositionDto) => ({
+        label: localizedName(pos.name) || localizedName(pos.name) || "N/A",
+        value: pos.id,
+      }))
+    : [];
+
+  const employeeOptions = Array.isArray(listPositionResponse)
+    ? listPositionResponse.flatMap((unit: PositionHolderDto) =>
+        unit.employeePositions.map((pos) => ({
+          label: localizedName(unit.user?.name) || "Unnamed employee",
+          value: pos.id,
+          positionId: pos.positionId,
+        })),
+      )
+    : [];
+
+  const {
+    assignIncomingRecord,
+    isPending,
+  } = useCreateIncomingRecords();
+
+  const handleFormSubmit = form.handleSubmit(async (values) => {
+    try {
+      if (!record?.id) throw new Error("Record id missing");
+
+      const selectedDepartments = values.receivingDepartments;
+      const selectedEmployees = values.assignedEmployees;
+
+      const employeePositions = selectedEmployees
+        .map((employeeId) => {
+          const empIdStr = employeeId.toString();
+          const match = employeeOptions.find(
+            (emp) => emp.value.toString() === empIdStr,
+          );
+          if (!match) return null;
+          return {
+            positionId: match.positionId,
+            employeePositionId: empIdStr,
+          };
+        })
+        .filter((pos): pos is NonNullable<typeof pos> => pos !== null);
+
+      if (selectedDepartments.length === 0 && employeePositions.length === 0)
+        throw new Error("No departments or employees selected for assignment.");
+
+      const employeePositionIds = employeePositions.map(
+        (p) => p.employeePositionId,
+      );
+      const payload: AssignIncomingRecordPayload = {
+        recordBoxId: record.id,
+        recordId: record?.record?.id, // ✅ safe access
+        employeePositionIds,
+        positionIds: selectedDepartments.length > 0 ? selectedDepartments : [],
+        comment: values.remarks,
+      };
+
+      assignIncomingRecord(payload, {
+        onSuccess: () => {
+          form.reset();
+          onSuccess();
+          onClose();
+        },
+        onError: (error) => {
+          handleError(error);
+        },
+      });
+    } catch (err) {
+      console.error("Assignment error:", err);
+      toast.error(
+        err instanceof Error ? err.message : "Failed to Assign a Record",
+      );
+    }
+  });
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="sm:max-w-[425px] bg-white dark:bg-gray-800 max-h-[90vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>{t("userIncoming.Assign Record")}</DialogTitle>
+          <DialogDescription>
+            {t("userIncoming.Assign this record to one or more departments")}
+          </DialogDescription>
+        </DialogHeader>
+
+        <FormProvider {...form}>
+          <form onSubmit={handleFormSubmit} className="flex flex-col flex-1 overflow-hidden">
+            <div className="flex-1 overflow-y-auto px-4 space-y-4">
+              <FormField
+                control={form.control}
+                name="receivingDepartments"
+                render={({ field }) => (
+                  <FormItem className="space-y-1">
+                    <FormLabel>{t("userIncoming.Department")}</FormLabel>
+                    <FormControl>
+                      <MultiSelect
+                        options={positionOptions}
+                        onValueChange={field.onChange}
+                        value={field.value}
+                        placeholder={t("userIncoming.Department") + "..."}
+                        variant="default"
+                        animation={200}
+                        maxCount={5}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="assignedEmployees"
+                render={({ field }) => (
+                  <FormItem className="space-y-1">
+                    <FormLabel>{t("userIncoming.Employees")}</FormLabel>
+                    <FormControl>
+                      <MultiSelect
+                        options={employeeOptions}
+                        onValueChange={field.onChange}
+                        value={field.value}
+                        placeholder={t("userIncoming.Employees") + "..."}
+                        variant="default"
+                        animation={200}
+                        maxCount={5}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {!permissionKeys.includes("can:dispatchRecords") && (
+                <FormField
+                  control={form.control}
+                  name="remarks"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t("userIncoming.Remark")}</FormLabel>
+                      <Textarea
+                        rows={4}
+                        placeholder={t("userIncoming.Remark") + "..."}
+                        {...field}
+                      />
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+
+            </div>
+
+            <DialogFooter className="border-t border-gray-200 dark:border-gray-700 pt-4 mt-4">
+              <Button type="button" variant="outline" onClick={onClose}>
+                {t("common.Cancel")}
+              </Button>
+              <Button type="submit" disabled={isPending}>
+                {isPending
+                  ? t("userIncoming.Assigning...")
+                  : t("userIncoming.Assign")}
+              </Button>
+            </DialogFooter>
+          </form>
+        </FormProvider>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default AssigneIncomingRecord;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/AssigneIncomingRecords.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/AssigneIncomingRecords.tsx
new file mode 100644
index 000000000..5f275ba41
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/AssigneIncomingRecords.tsx
@@ -0,0 +1,287 @@
+import { MultiSelect } from "@/shared/common/ui/multi-select";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/shared/common/ui/form";
+import { Textarea } from "@/shared/common/ui/textarea";
+import { useForm, FormProvider } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Button } from "@/shared/common/ui/button";
+import useSettings from "@/record-management/components/hooks/useSettings";
+import { useUserDetail } from "@/record-management/components/hooks/useUserDetail";
+import {
+  AssignIncomingRecordPayload,
+  AssignRecordDto,
+  PositionDto,
+  PositionHolderDto,
+} from "@/record-management/dto/userRecords/usersDto";
+import { toast } from "sonner";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/shared/common/ui/dialog";
+import { useCreateIncomingRecords } from "@/record-management/components/hooks/useCreateIncomingRecord";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { FormMultiSelectField } from "@/shared/common/form/fields/FormFields";
+import { OrganizationsPositions } from "@/record-management/services/api/departmentService";
+import { EmployeeWithUnitDto } from "@/user-management/dto/employees/employees";
+import { KeyValue } from "@/record-management/types/recordSelectTypes";
+
+interface AssignRecordProps {
+  isOpen?: boolean;
+  record: AssignRecordDto;
+  onSuccess: () => void;
+  onClose: () => void;
+}
+
+export interface StartAssignRecord {
+  id: string;
+}
+
+const assignmentSchema = z
+  .object({
+    receivingDepartments: z.array(z.string()),
+    assignedEmployees: z.array(z.string()),
+    remarks: z.string(),
+  })
+  .refine(
+    (data) =>
+      data.receivingDepartments.length > 0 || data.assignedEmployees.length > 0,
+    {
+      message: "Either position or employee is required",
+      path: ["receivingDepartments"],
+    },
+  );
+
+const AssigneIncomingRecord = ({
+  isOpen = false,
+  record,
+  onSuccess,
+  onClose,
+}: AssignRecordProps) => {
+  const form = useForm<z.infer<typeof assignmentSchema>>({
+    resolver: zodResolver(assignmentSchema),
+    defaultValues: {
+      receivingDepartments: [],
+      assignedEmployees: [],
+      remarks: "",
+    },
+  });
+
+  const {
+    listPositionResponse,
+    listAllDepartmentResponse,
+    currentEmployeesResponse,
+  } = useSettings();
+
+  const { permissionKeys } = useUserDetail();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+  const localizedName = useLocalizedName();
+  const departmentOptions = listAllDepartmentResponse.map((d) => ({
+    label: localizedName(d.name),
+    value: String(d.id), // make sure it’s a string
+  }));
+
+  const employeesList: KeyValue[] =
+    currentEmployeesResponse?.items
+      .filter((e) => e.employeePositions?.[0]?.id) // only include valid IDs
+      .map((employee) => ({
+        label: localizedName(employee.user.name),
+        value: String(employee.employeePositions[0].id),
+        employeePositionId: String(employee.employeePositions[0].id),
+      })) || [];
+
+  const employeeOptions = Array.isArray(listPositionResponse)
+    ? listPositionResponse.flatMap((unit: PositionHolderDto) =>
+        unit.employeePositions.map((pos) => ({
+          label: localizedName(unit.user?.name) || "Unnamed employee",
+          value: pos.id,
+          positionId: pos.positionId,
+        })),
+      )
+    : [];
+
+  const {
+    assignIncomingRecord,
+    startAssignIncomingRecordMutation: startAssigningRecord,
+    isPending,
+  } = useCreateIncomingRecords();
+
+  const handleFormSubmit = form.handleSubmit(async (values) => {
+    try {
+      if (!record?.id) throw new Error("Record id missing");
+
+      const selectedDepartments = values.receivingDepartments || [];
+      const selectedEmployees = values.assignedEmployees || [];
+
+      const employeePositions = selectedEmployees
+        .map((employeeId) => {
+          const empIdStr = employeeId.toString();
+          const match = employeeOptions.find(
+            (emp) => emp.value.toString() === empIdStr,
+          );
+          if (!match) return null;
+          return {
+            positionId: match.positionId,
+            employeePositionId: empIdStr,
+          };
+        })
+        .filter((pos): pos is NonNullable<typeof pos> => pos !== null);
+
+      if (selectedDepartments.length === 0 && employeePositions.length === 0)
+        throw new Error("No departments or employees selected for assignment.");
+
+      const employeePositionIds = employeePositions.map(
+        (p) => p.employeePositionId,
+      );
+
+      // Prepare payload logic
+      let payload: AssignIncomingRecordPayload;
+
+      // ✅ If multiple record boxes exist, start assignment first
+      if (record.recordBoxes.length === 0) {
+        startAssigningRecord(record.id, {
+          onSuccess: (response) => {
+            payload = {
+              recordBoxId: response.recordBoxes[0],
+              recordId: response.recordId,
+              employeePositionIds,
+              positionIds:
+                selectedDepartments.length > 0 ? selectedDepartments : [],
+              comment: values.remarks,
+            };
+
+            assignIncomingRecord(payload, {
+              onSuccess: () => {
+                form.reset();
+                onSuccess();
+                onClose();
+              },
+              onError: (error) => {
+                handleError(error);
+              },
+            });
+          },
+          onError: (error) => {
+            handleError(error);
+          },
+        });
+      } else {
+        // ✅ Directly assign without starting
+        payload = {
+          recordBoxId: record.recordBoxes[0].id,
+          recordId: record.id,
+          employeePositionIds,
+          positionIds:
+            selectedDepartments.length > 0 ? selectedDepartments : [],
+          comment: values.remarks,
+        };
+
+        assignIncomingRecord(payload, {
+          onSuccess: () => {
+            form.reset();
+            onSuccess();
+            onClose();
+          },
+          onError: (error) => {
+            handleError(error);
+          },
+        });
+      }
+    } catch (err) {
+      console.error("Form submit error:", err);
+      toast.error("Something went wrong while submitting the form");
+    }
+  });
+
+  return (
+    <Dialog
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!isPending) {
+          if (!open) onClose();
+        }
+      }}
+    >
+      <DialogContent
+        className="sm:max-w-[425px] bg-white dark:bg-gray-800 max-h-[90vh] flex flex-col"
+        onEscapeKeyDown={(e) => isPending && e.preventDefault()}
+        onPointerDownOutside={(e) => isPending && e.preventDefault()}
+      >
+        <DialogHeader>
+          <DialogTitle>{t("userIncoming.Assign Record")}</DialogTitle>
+          <DialogDescription>
+            {t("userIncoming.Assign this record to one or more departments")}
+          </DialogDescription>
+        </DialogHeader>
+
+        <FormProvider {...form}>
+          <form onSubmit={handleFormSubmit} className="flex flex-col flex-1 overflow-hidden">
+            <div className="flex-1 overflow-y-auto px-4 space-y-4">
+              <FormMultiSelectField
+                control={form.control}
+                name="receivingDepartments"
+                label={t("userIncoming.Department")}
+                options={departmentOptions}
+                placeholder={t("userIncoming.Department")}
+                maxCount={5}
+              />
+
+              <FormMultiSelectField
+                control={form.control}
+                name="assignedEmployees"
+                label={t("userIncoming.Employees")}
+                options={employeesList}
+                placeholder={t("userIncoming.Employees")}
+                maxCount={5}
+              />
+
+              {!permissionKeys.includes("can:dispatchRecords") && (
+                <FormField
+                  control={form.control}
+                  name="remarks"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t("userIncoming.Remark")}</FormLabel>
+                      <Textarea
+                        rows={4}
+                        placeholder={t("userIncoming.Remark") + "..."}
+                        {...field}
+                      />
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+
+            </div>
+
+            <DialogFooter className="border-t border-gray-200 dark:border-gray-700 pt-4 mt-4">
+              <Button type="button" variant="outline" onClick={onClose}>
+                {t("common.Cancel")}
+              </Button>
+              <Button type="submit" disabled={isPending}>
+                {isPending
+                  ? t("userIncoming.Assigning...")
+                  : t("userIncoming.Assign")}
+              </Button>
+            </DialogFooter>
+          </form>
+        </FormProvider>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default AssigneIncomingRecord;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/deleteRecord.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/deleteRecord.tsx
new file mode 100644
index 000000000..28901883f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/deleteRecord.tsx
@@ -0,0 +1,46 @@
+import { useCallback } from "react";
+import EnhancedDynamicModal from "@/record-management/common/EnhancedDynamicModal";
+import { useUserRecords } from "../../hooks/useUserRecords";
+// import { useIncomingRecords } from "@/components/hooks/useIncomingRecords";
+import { useTranslation } from "react-i18next";
+
+interface DeleteRecordProps {
+  recordId: string;
+  onSuccess: () => void;
+  onClose: () => void;
+}
+
+const DeleteRecord: React.FC<DeleteRecordProps> = ({
+  recordId,
+  onSuccess,
+  onClose,
+}) => {
+  const { refetch, deleteRecord } = useUserRecords();
+   const { t } = useTranslation();
+
+  const handleDelete = useCallback(async () => {
+    if (!recordId) throw new Error("Invalid record ID");
+
+    await deleteRecord(recordId);
+    await refetch();
+
+
+    onSuccess();
+  }, [recordId, deleteRecord, refetch, onSuccess]);
+
+  return (
+    <EnhancedDynamicModal
+      open={true}
+      onClose={onClose}
+      title={t("userRecord.Delete Record")}
+      actionConfig={{
+        type: "delete",
+        onAction: handleDelete,
+        confirmText: t("userRecord.Confirm Delete"),
+        confirmVariant: "default",
+      }}
+    />
+  );
+};
+
+export default DeleteRecord;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/editIncoming.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/editIncoming.tsx
new file mode 100644
index 000000000..c05667bba
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/editIncoming.tsx
@@ -0,0 +1,961 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useNavigate, useParams } from "react-router-dom";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { t } from "i18next";
+import { FileText, Hash, User, Building2 } from "lucide-react";
+
+import { Input } from "@/shared/common/ui/input";
+import { Button } from "@/shared/common/ui/button";
+import {
+  defaultSendLetterValues,
+  EditLetterFormValues,
+  editLetterSchema,
+} from "./AddIncoming/Form-Schema";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from "@/shared/common/ui/form";
+import { ReusableFileUploader } from "@/shared/common/ui/fileUploader/reusableFileUploader";
+import { RadioGroup, RadioGroupItem } from "@/shared/common/ui/radio-group";
+import { Label } from "@/shared/common/ui/label";
+import { Spinner } from "@/shared/common/ui/sppiner";
+import { useUpdateIncoming } from "@/record-management/components/hooks/useIncomingRecords";
+import {
+  STORAGE_UPLOAD_ERROR_CODE,
+  STORAGE_UPLOAD_TOO_LARGE,
+  UploadKeyResponse,
+  uploadMultiple,
+  uploadSingle,
+} from "@/record-management/services/api/newFileService";
+import { AttachmentInfo } from "@/record-management/dto/userRecords/userRecordsDto";
+import {
+  deleteAttachmentsById,
+  fetchRecordById,
+} from "@/record-management/services/api/userRecordService";
+import FileList, {
+  IAttachmentInfoWithId,
+} from "@/record-management/common/fileListComponent";
+import AssignCCRecord from "@/record-management/components/userIncoming/ccIncomingRecords/AssignCCRecord";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { useNonSmartRecordPdfAssign } from "@/record-management/components/hooks/useNonSmartRecordPdfAssign";
+import AssignIncomingRecordModal from "./AddIncoming/AssignIncomingRecordModal";
+
+interface EditIncomingRecordFormProps {
+  onSuccess?: () => void;
+  onCancel?: (error: unknown) => void;
+}
+
+const EditIncomingRecordForm = ({
+  onSuccess,
+  onCancel,
+}: EditIncomingRecordFormProps) => {
+  const form = useForm<EditLetterFormValues>({
+    resolver: zodResolver(editLetterSchema),
+    defaultValues: {
+      ...defaultSendLetterValues,
+      receiverPositions: [],
+      receiverEmployeePositions: [],
+      preferredLanguage: "am", //
+    },
+  });
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { id: recordId } = useParams<{ id: string }>();
+
+  const [files, setFiles] = useState<File[]>([]);
+  const [mainFileIndex, setMainFileIndex] = useState<number | null>(null);
+  const [mainFileError, setMainFileError] = useState("");
+  const [existingFileInfo, setExistingFileInfo] = useState<
+    AttachmentInfo["fileInfo"] | null
+  >(null);
+  const [existingAttachments, setExistingAttachments] = useState<
+    IAttachmentInfoWithId[]
+  >([]);
+  // Attachment ids the user has clicked "delete" on but not yet committed
+  // by submitting the form. Empty array means nothing is staged.
+  const [pendingDeletionIds, setPendingDeletionIds] = useState<string[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showCCAssignModal, setShowCCAssignModal] = useState(false);
+  const [hasCCAssigned, setHasCCAssigned] = useState(false);
+  const [showAssignModal, setShowAssignModal] = useState(false);
+  const [pendingFormData, setPendingFormData] =
+    useState<EditLetterFormValues | null>(null);
+  const [pendingUploadedFiles, setPendingUploadedFiles] = useState<
+    AttachmentInfo[]
+  >([]);
+  const [pendingFinalFileInfo, setPendingFinalFileInfo] = useState<any>(null);
+  const {
+    updateIncomingRecord,
+    isUpdating: isUpdatingRecord,
+    isUploading: isUploadingRecord,
+  } = useUpdateIncoming();
+  const { handleError } = useErrorHandler(t);
+  const { updateAndAssign, isUpdating: isAssigning } =
+    useNonSmartRecordPdfAssign();
+
+  const {
+    data: record,
+    isLoading,
+    error: recordFetchError,
+  } = useQuery({
+    queryKey: ["record", recordId],
+    queryFn: async () => {
+      try {
+        const result = await fetchRecordById(recordId!);
+
+        return result;
+      } catch (error) {
+        console.error("❌ editIncoming: Failed to fetch record:", error);
+        throw error;
+      }
+    },
+    enabled: !!recordId,
+  });
+
+  // Surface main-record fetch failures via the centralized error handler.
+  // record-pdf failure stays silent — it's a sidecar preview.
+  const prevRecordErrorRef = useRef<unknown>(null);
+  useEffect(() => {
+    if (recordFetchError && recordFetchError !== prevRecordErrorRef.current) {
+      prevRecordErrorRef.current = recordFetchError;
+      handleError(recordFetchError);
+    }
+  }, [recordFetchError, handleError]);
+
+
+
+  useEffect(() => {
+    if (record) {
+      const content = record.content?.[0];
+      const preferredLanguage: "am" | "en" =
+        record.preferredLanguage === "en" ? "en" : "am";
+
+      form.reset({
+        fileInfo: record.fileInfo ?? undefined,
+        subject: content?.subject ?? "",
+        letterNumber: record.letterNumber ?? "",
+        deliveredBy:
+          record.metadata.deliveredBy.am ||
+          record.metadata.deliveredBy.en ||
+          "",
+        organizationName: {
+          am: record.metadata.organizationName?.am ?? "",
+          en: record.metadata.organizationName?.en ?? "",
+        },
+        receiverPositions: [],
+        receiverEmployeePositions: [],
+        preferredLanguage,
+        letterName: record.letterName || "",
+      });
+
+      setExistingFileInfo(record.fileInfo ?? null);
+      setExistingAttachments(
+        (content?.recordAttachments ?? []).map((attachment: any) => ({
+          id: attachment.id,
+          presigned: attachment.presigned,
+          fileInfo: {
+            fileName: attachment.fileInfo.fileName,
+            contentType: attachment.fileInfo.contentType,
+            originalname:
+              attachment.fileInfo.originalname || attachment.fileInfo.fileName,
+            size: attachment.fileInfo.size ?? 0,
+          },
+        })),
+      );
+
+      // Check if CC is already assigned
+      const ccContent = content?.ccs;
+      setHasCCAssigned(ccContent && ccContent.length > 0);
+    } else {
+    }
+  }, [record, form]);
+
+  // === Form Submit ===
+  const onSubmit = async (values: EditLetterFormValues) => {
+    try {
+      setIsSubmitting(true);
+      if (!existingFileInfo && files.length === 0) {
+        toast.error(t("userRecord.Please select a main file"));
+        setMainFileError(t("userRecord.Please select a main file"));
+        return;
+      }
+
+      // =========================
+      // 1. UPLOAD NEW FILES (if any)
+      // =========================
+      let uploadedFiles: AttachmentInfo[] = [];
+      if (files.length > 0) {
+        if (!existingFileInfo && mainFileIndex === null) {
+          toast.error(t("userRecord.Please select a main file"));
+          setMainFileError(t("userRecord.Please select a main file"));
+          return;
+        } else {
+          setMainFileError("");
+        }
+
+        // Upload all new files
+        let fileInfos: UploadKeyResponse["fileInfo"][] = [];
+
+        if (files.length > 1) {
+          fileInfos = await uploadMultiple(files);
+        } else if (files.length === 1) {
+          const fileInfo = await uploadSingle(files[0]);
+          fileInfos = [fileInfo];
+        }
+
+        // Convert fileInfo → AttachmentInfo
+        uploadedFiles = fileInfos.map((f) => ({
+          fileInfo: {
+            bucket: f.bucket,
+            fileName: f.fileName,
+            contentType: f.contentType,
+            originalname: f.originalname,
+            size: f.size,
+          },
+          name: {
+            am: f.originalname,
+            en: f.originalname,
+          },
+        }));
+      }
+
+      const finalFileInfo =
+        mainFileIndex !== null
+          ? (uploadedFiles[mainFileIndex]?.fileInfo ?? existingFileInfo)
+          : existingFileInfo;
+
+      if (!finalFileInfo) {
+        toast.error(t("userRecord.Please select a main file"));
+        setMainFileError(t("userRecord.Please select a main file"));
+        return;
+      }
+
+      // Exclude attachments the user staged for deletion — otherwise the
+      // update payload re-sends them and the backend keeps/re-creates them,
+      // making the deletion appear to revert after editing again.
+      const finalAttachments = [
+        ...existingAttachments
+          .filter(
+            (attachment) =>
+              !attachment.id || !pendingDeletionIds.includes(attachment.id),
+          )
+          .map((attachment) => ({
+            fileInfo: {
+              bucket: "",
+              fileName: attachment.fileInfo.fileName,
+              contentType:
+                attachment.fileInfo.contentType || "application/octet-stream",
+              originalname:
+                attachment.fileInfo.originalname ||
+                attachment.fileInfo.fileName,
+              size: attachment.fileInfo.size || 0,
+            },
+            name: {
+              am:
+                attachment.fileInfo.originalname ||
+                attachment.fileInfo.fileName,
+              en:
+                attachment.fileInfo.originalname ||
+                attachment.fileInfo.fileName,
+            },
+          })),
+        ...uploadedFiles.filter((_, index) => index !== mainFileIndex),
+      ];
+
+      // =========================
+      // 2. BUILD PAYLOAD
+      // =========================
+      const payload = {
+        ...values,
+        fileInfo: finalFileInfo,
+        subject: values.subject || "",
+        letterNumber: values.letterNumber || "",
+        deliveredBy: values.deliveredBy || "",
+        receiverPositions: values.receiverPositions ?? [],
+        receiverEmployeePositions: values.receiverEmployeePositions ?? [],
+        preferredLanguage: values.preferredLanguage || "am",
+        organizationName: {
+          am: values.organizationName?.am || "",
+          en: values.organizationName?.en || "",
+        },
+        letterName: values.letterName || "",
+        attachments: finalAttachments,
+      };
+
+      // =========================
+      // 3. UPDATE RECORD
+      // =========================
+
+      await updateIncomingRecord(payload, recordId as string);
+
+      // Commit staged attachment deletions now that the record update succeeded.
+      if (pendingDeletionIds.length > 0) {
+        const deletionResults = await Promise.allSettled(
+          pendingDeletionIds.map((id) => deleteAttachmentsById(id)),
+        );
+        const firstFailure = deletionResults.find(
+          (r): r is PromiseRejectedResult => r.status === "rejected",
+        );
+        if (firstFailure) {
+          await handleError(firstFailure.reason);
+        }
+        setPendingDeletionIds([]);
+      }
+
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ["record-incoming"] }),
+        queryClient.invalidateQueries({
+          queryKey: ["external-record-incoming"],
+        }),
+        // Force the detail-page record + PDF queries to refetch so a replaced
+        // main file shows up instead of the stale cached version.
+        queryClient.invalidateQueries({ queryKey: ["record"] }),
+        queryClient.invalidateQueries({ queryKey: ["record-pdf"] }),
+        queryClient.invalidateQueries({ queryKey: ["record-attachment"] }),
+      ]);
+
+      // If there are new files, prepare for assignment modal
+      if (uploadedFiles.length > 0) {
+        // Store uploaded files (raw) and final attachments for assignment
+        // uploadedFiles contains newly uploaded files, finalAttachments includes existing + new
+        setPendingUploadedFiles(finalAttachments);
+        setPendingFinalFileInfo(finalFileInfo);
+        setPendingFormData(values);
+        setShowAssignModal(true);
+        return;
+      }
+
+      toast.success(
+        t(
+          "userRecord.incomingRecordUpdated",
+          "Incoming record changes have been saved.",
+        ),
+      );
+      onSuccess?.();
+      navigate("/record-management/recordOfficer/incoming");
+    } catch (error) {
+      if (
+        error instanceof Error &&
+        error.message === STORAGE_UPLOAD_TOO_LARGE
+      ) {
+        toast.error(t("userRecord.storageUploadFailed"), {
+          description: t("msg.fileTooLarge"),
+        });
+      } else if (
+        error instanceof Error &&
+        error.message === STORAGE_UPLOAD_ERROR_CODE
+      ) {
+        toast.error(t("userRecord.storageUploadFailed"));
+      } else {
+        await handleError(error);
+      }
+      onCancel?.(error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleAssignmentSuccess = async (assignmentData: any) => {
+    if (!pendingFormData || !recordId) return;
+    if (!existingFileInfo && files.length === 0) {
+      toast.error(t("userRecord.Please select a main file"));
+      setMainFileError(t("userRecord.Please select a main file"));
+      return;
+    }
+    try {
+      // Refetch the record to get the latest file information after update
+      let uploadedFiles: AttachmentInfo[] = [];
+      if (files.length > 0) {
+        if (!existingFileInfo && mainFileIndex === null) {
+          toast.error(t("userRecord.Please select a main file"));
+          setMainFileError(t("userRecord.Please select a main file"));
+          return;
+        } else {
+          setMainFileError("");
+        }
+
+        // Upload all new files
+        let fileInfos: UploadKeyResponse["fileInfo"][] = [];
+
+        if (files.length > 1) {
+          fileInfos = await uploadMultiple(files);
+        } else if (files.length === 1) {
+          const fileInfo = await uploadSingle(files[0]);
+          fileInfos = [fileInfo];
+        }
+
+        // Convert fileInfo → AttachmentInfo
+        uploadedFiles = fileInfos.map((f) => ({
+          fileInfo: {
+            bucket: f.bucket,
+            fileName: f.fileName,
+            contentType: f.contentType,
+            originalname: f.originalname,
+            size: f.size,
+          },
+          name: {
+            am: f.originalname,
+            en: f.originalname,
+          },
+        }));
+      }
+      // Get latest attachments from the record
+      const finalFileInfo =
+        mainFileIndex !== null
+          ? (uploadedFiles[mainFileIndex]?.fileInfo ?? existingFileInfo)
+          : existingFileInfo;
+      const finalAttachments = [
+        ...existingAttachments
+          .filter(
+            (attachment) =>
+              !attachment.id || !pendingDeletionIds.includes(attachment.id),
+          )
+          .map((attachment) => ({
+            fileInfo: {
+              bucket: "",
+              fileName: attachment.fileInfo.fileName,
+              contentType:
+                attachment.fileInfo.contentType || "application/octet-stream",
+              originalname:
+                attachment.fileInfo.originalname ||
+                attachment.fileInfo.fileName,
+              size: attachment.fileInfo.size || 0,
+            },
+            name: {
+              am:
+                attachment.fileInfo.originalname ||
+                attachment.fileInfo.fileName,
+              en:
+                attachment.fileInfo.originalname ||
+                attachment.fileInfo.fileName,
+            },
+          })),
+        ...uploadedFiles.filter((_, index) => index !== mainFileIndex),
+      ];
+      const payload = {
+        uploadDto: {
+          fileInfo: {
+            fileName: finalFileInfo?.fileName || "",
+            contentType: finalFileInfo?.contentType || "",
+            size: finalFileInfo?.size ?? 0,
+            originalname: finalFileInfo?.originalname || "",
+            bucket: finalFileInfo?.bucket ?? "",
+          },
+          subject: pendingFormData.subject,
+          receiverPositions: assignmentData.receivingDepartments,
+          receiverEmployeePositions: assignmentData.assignedEmployees,
+          letterNumber: pendingFormData.letterNumber,
+          organizationName: pendingFormData.organizationName,
+          deliveredBy: pendingFormData.deliveredBy,
+          preferredLanguage: pendingFormData.preferredLanguage || "am",
+          letterName: pendingFormData.letterName,
+          // Use latest attachments from record (includes newly uploaded files)
+          attachments: finalAttachments.map((att: any) => ({
+            fileInfo: {
+              fileName: att.fileInfo?.fileName || att.fileName,
+              contentType:
+                att.fileInfo?.contentType ||
+                att.contentType ||
+                "application/octet-stream",
+              size: att.fileInfo?.size || att.size || 0,
+              originalname:
+                att.fileInfo?.originalname || att.originalname || att.fileName,
+              bucket: att.fileInfo?.bucket || "",
+            },
+            name: {
+              am:
+                att.fileInfo?.originalname || att.originalname || att.fileName,
+              en:
+                att.fileInfo?.originalname || att.originalname || att.fileName,
+            },
+          })),
+        },
+        assignDto: {
+          recordBoxId: null,
+          recordId: recordId || null,
+          employeePositionIds: assignmentData.assignedEmployees,
+          positionIds: assignmentData.receivingDepartments,
+          comment: assignmentData.remarks,
+        },
+      };
+
+      await updateAndAssign({ id: recordId, payload });
+
+      setShowAssignModal(false);
+      setPendingFormData(null);
+      setPendingUploadedFiles([]);
+      setPendingFinalFileInfo(null);
+      setPendingDeletionIds([]);
+
+      queryClient.invalidateQueries({
+        queryKey: ["external-record-incoming"],
+      });
+      queryClient.invalidateQueries({ queryKey: ["record-incoming"] });
+
+      toast.success(
+        t(
+          "incomingRecord.updatedAndAssignedSuccess",
+          "Record updated and assigned successfully",
+        ),
+      );
+      onSuccess?.();
+      navigate("/record-management/recordOfficer/incoming");
+    } catch (error) {
+      await handleError(error);
+    }
+  };
+
+  const isLoadingAny =
+    isLoading ||
+    isSubmitting ||
+    isUpdatingRecord ||
+    isUploadingRecord ||
+    isAssigning;
+
+  return (
+    <Form {...form}>
+      {isLoadingAny && (
+        <div
+          className="pointer-events-auto fixed inset-0 z-[100] flex items-center justify-center bg-white/80 backdrop-blur-sm dark:bg-gray-950/70"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div className="flex flex-col items-center gap-3 rounded-xl bg-white p-6 shadow-lg dark:bg-gray-900 dark:shadow-2xl dark:shadow-black/40">
+            <Spinner size="large" />
+            <p className="text-sm text-gray-600 dark:text-gray-300">
+              {t("userIncoming.Processing...")}
+            </p>
+          </div>
+        </div>
+      )}
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="mx-auto max-w-2xl space-y-8 rounded-xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900"
+        aria-labelledby="edit-form-title"
+      >
+        {/* Header */}
+        <div className="border-b border-gray-200 pb-4 dark:border-gray-700">
+          <div className="flex items-center gap-3">
+            <div className="rounded-lg bg-primary-50 p-2 dark:bg-primary-900/30">
+              <FileText className="h-6 w-6 text-primary-600 dark:text-primary-400" />
+            </div>
+            <div>
+              <h2
+                id="edit-form-title"
+                className="text-2xl font-bold text-gray-900 dark:text-gray-100"
+              >
+                {t("addRecord.editIncomingRecord")}
+              </h2>
+              <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                {t("msg.updateRecordMsg")}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-6">
+          {/* Letter Information Section */}
+          <div className="space-y-4">
+            <h3 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-gray-700 dark:text-gray-200">
+              <FileText className="h-4 w-4 text-primary-600 dark:text-primary-400" />
+              {t("addRecord.letterInformation")}
+            </h3>
+
+            {/* Subject */}
+            <FormField
+              control={form.control}
+              name="subject"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="text-gray-700 dark:text-gray-200">
+                    {t("userIncoming.Subject")}
+                  </FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={t("userIncoming.Subject")}
+                      {...field}
+                      disabled={isLoading}
+                      className="border-gray-300 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus:border-primary-400 dark:focus:ring-primary-400"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Letter Number + File Name in grid */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="letterNumber"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="flex items-center gap-1 text-gray-700 dark:text-gray-200">
+                      <Hash className="h-3 w-3" />
+                      {t("userRecord.Letter Number")}
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder={t("userRecord.Letter Number")}
+                        {...field}
+                        disabled={isLoading}
+                        className="border-gray-300 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus:border-primary-400 dark:focus:ring-primary-400"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="letterName"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="text-gray-700 dark:text-gray-200">
+                      {t("viewDetail.fileName1")}
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder={t("viewDetail.fileName1")}
+                        {...field}
+                        disabled={isLoading}
+                        className="border-gray-300 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus:border-primary-400 dark:focus:ring-primary-400"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            {/* Delivered By */}
+            <FormField
+              control={form.control}
+              name="deliveredBy"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="flex items-center gap-1 text-gray-700 dark:text-gray-200">
+                    <User className="h-3 w-3" />
+                    {t("userRecord.Delivered By")}
+                  </FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={t("userRecord.Delivered By")}
+                      {...field}
+                      disabled={isLoading}
+                      className="border-gray-300 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus:border-primary-400 dark:focus:ring-primary-400"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+
+          {/* Organization Information Section */}
+          <div className="space-y-4 border-t border-gray-200 pt-4 dark:border-gray-700">
+            <h3 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-gray-700 dark:text-gray-200">
+              <Building2 className="h-4 w-4 text-primary-600 dark:text-primary-400" />
+              {t("addRecord.organizationInformation")}
+            </h3>
+
+            <FormField
+              control={form.control}
+              name="organizationName.am"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="text-gray-700 dark:text-gray-200">
+                    {t("userIncoming.Sending Organization (Amharic)")}
+                  </FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={t(
+                        "userIncoming.Sending Organization (Amharic)",
+                      )}
+                      {...field}
+                      disabled={isLoading}
+                      className="border-gray-300 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus:border-primary-400 dark:focus:ring-primary-400"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="organizationName.en"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="text-gray-700 dark:text-gray-200">
+                    {t("userIncoming.Sending Organization (English)")}
+                  </FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={t(
+                        "userIncoming.Sending Organization (English)",
+                      )}
+                      {...field}
+                      disabled={isLoading}
+                      className="border-gray-300 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus:border-primary-400 dark:focus:ring-primary-400"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+
+          {/* Document Attachments Section */}
+          <div className="space-y-4 border-t border-gray-200 pt-4 dark:border-gray-700">
+            <h3 className="text-sm font-semibold uppercase tracking-wide text-gray-700 dark:text-gray-200">
+              {t("Document Attachments")}
+            </h3>
+
+            {/* Existing Main Letter */}
+            {existingFileInfo && (
+              <div className="rounded-lg border border-primary-200 bg-primary-50 p-4 text-sm text-gray-700 dark:border-primary-700/40 dark:bg-primary-900/20 dark:text-gray-200">
+                <p className="font-medium text-gray-900 dark:text-gray-100">
+                  {t("viewDetail.letter")}:
+                </p>
+                <div className="mt-1 flex items-center justify-between">
+                  <p>
+                    {existingFileInfo.originalname || existingFileInfo.fileName}
+                  </p>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => {
+                      setExistingFileInfo(null);
+                      setMainFileError(
+                        t("userRecord.Please select a main file"),
+                      );
+                    }}
+                    className="text-red-600 hover:bg-red-50 hover:text-red-700 dark:text-red-400 dark:hover:bg-red-900/20 dark:hover:text-red-300"
+                  >
+                    {t("common.delete", "Remove")}
+                  </Button>
+                </div>
+                {existingAttachments.filter(
+                  (attachment) =>
+                    !attachment.id ||
+                    !pendingDeletionIds.includes(attachment.id),
+                ).length > 0 && (
+                  <p className="mt-2 text-gray-600 dark:text-gray-400">
+                    {
+                      existingAttachments.filter(
+                        (attachment) =>
+                          !attachment.id ||
+                          !pendingDeletionIds.includes(attachment.id),
+                      ).length
+                    }{" "}
+                    existing attachment
+                    {existingAttachments.filter(
+                      (attachment) =>
+                        !attachment.id ||
+                        !pendingDeletionIds.includes(attachment.id),
+                    ).length > 1
+                      ? "s"
+                      : ""}
+                  </p>
+                )}
+              </div>
+            )}
+
+            {/* Existing Attachments List */}
+            {existingAttachments.filter(
+              (attachment) =>
+                !attachment.id || !pendingDeletionIds.includes(attachment.id),
+            ).length > 0 && (
+              <div className="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800/60">
+                <h4 className="mb-2 text-sm font-medium text-gray-700 dark:text-gray-200">
+                  {t("viewDetail.attachments")}
+                </h4>
+                <FileList
+                  attachments={existingAttachments.filter(
+                    (attachment) =>
+                      !attachment.id ||
+                      !pendingDeletionIds.includes(attachment.id),
+                  )}
+                  showDelete
+                  onDelete={(fileId: string) => {
+                    setPendingDeletionIds((prev) =>
+                      prev.includes(fileId) ? prev : [...prev, fileId],
+                    );
+                  }}
+                />
+              </div>
+            )}
+
+            {/* File Uploader */}
+            <div className="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800/60">
+              <ReusableFileUploader
+                files={files}
+                setFiles={setFiles}
+                isLoading={isUploadingRecord}
+              />
+            </div>
+          </div>
+
+          {/* Main file selection for new uploads */}
+          {files.length > 0 && (
+            <div className="rounded-lg border border-primary-200 bg-primary-50 p-4 dark:border-primary-700/40 dark:bg-primary-900/20">
+              <h3 className="mb-3 text-sm font-semibold text-gray-900 dark:text-gray-100">
+                {t("Select the main file for the record")}
+              </h3>
+              <RadioGroup
+                value={mainFileIndex?.toString()}
+                onValueChange={(value) => {
+                  setMainFileIndex(Number(value));
+                  setMainFileError("");
+                }}
+                className="space-y-2"
+              >
+                {files.map((file, index) => (
+                  <div
+                    key={file.name}
+                    className="flex items-center space-x-3 rounded-md p-2 transition-colors hover:bg-primary-100 dark:hover:bg-primary-900/40"
+                  >
+                    <RadioGroupItem
+                      value={index.toString()}
+                      id={`edit-main-file-${index}`}
+                      className="border-primary-600 text-primary-600 dark:border-primary-400 dark:text-primary-400"
+                    />
+                    <Label
+                      htmlFor={`edit-main-file-${index}`}
+                      className="flex-1 cursor-pointer text-sm text-gray-700 dark:text-gray-200"
+                    >
+                      {file.name}
+                    </Label>
+                  </div>
+                ))}
+              </RadioGroup>
+              {mainFileError && (
+                <p className="mt-2 flex items-center gap-1 text-sm text-red-600 dark:text-red-400">
+                  <span className="font-medium">!</span> {mainFileError}
+                </p>
+              )}
+            </div>
+          )}
+
+          {/* CC Assignment Section */}
+          {hasCCAssigned && (
+            <div className="rounded-lg border border-blue-200 bg-blue-50 p-4 dark:border-blue-700/40 dark:bg-blue-900/20">
+              <div className="flex items-center justify-between">
+                <div>
+                  <h3 className="font-semibold text-blue-800 dark:text-blue-200">
+                    {t("userIncoming.CC Assignment")}
+                  </h3>
+                  <p className="text-sm text-blue-600 dark:text-blue-400">
+                    {t("userIncoming.This record has CC assignments")}
+                  </p>
+                </div>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => setShowCCAssignModal(true)}
+                  className="border-blue-300 text-blue-700 hover:bg-blue-100 dark:border-blue-600 dark:text-blue-300 dark:hover:bg-blue-900/40"
+                >
+                  {t("userIncoming.Manage CC")}
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Action Buttons */}
+        <div className="border-t border-gray-200 pt-4 dark:border-gray-700">
+          <div className="space-y-3">
+            <Button
+              type="submit"
+              disabled={isLoadingAny}
+              className="w-full rounded-lg bg-primary-600 py-3 font-medium text-white shadow-sm transition-all duration-200 hover:bg-primary-700 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50 dark:bg-primary-500 dark:hover:bg-primary-600"
+            >
+              {isLoadingAny
+                ? t("userIncoming.Processing...")
+                : t("userIncoming.update", "Update")}
+            </Button>
+
+            <Button
+              type="button"
+              disabled={isLoadingAny}
+              onClick={async () => {
+                const isValid = await form.trigger();
+                if (!isValid) {
+                  toast.error(
+                    t("userRecord.Please fill in all required fields"),
+                  );
+                  return;
+                }
+
+                setPendingFormData(form.getValues());
+                setShowAssignModal(true);
+              }}
+              className="w-full rounded-lg bg-blue-600 py-3 font-medium text-white shadow-sm transition-all duration-200 hover:bg-blue-700 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-600"
+            >
+              {isAssigning
+                ? t("userIncoming.Assigning...")
+                : t("userIncoming.Update and Assign")}
+            </Button>
+          </div>
+        </div>
+      </form>
+
+      {/* CC Assignment Modal */}
+      {record && showCCAssignModal && (
+        <AssignCCRecord
+          open={showCCAssignModal}
+          onClose={() => setShowCCAssignModal(false)}
+          record={{
+            id: record.id,
+            createdAt: record.createdAt,
+            referenceNumber: record.referenceNumber,
+            dispatchedDate: record.dispatchedDate,
+            amharicDispatchedDate: record.amharicDispatchedDate,
+            amharicCreatedAt: record.amharicCreatedAt,
+            initiationType: record.initiationType,
+            recordTypeKey: record.recordTypeKey,
+            content: record.content.map((content: any) => ({
+              id: content.id,
+              subject: content.subject,
+              ccs:
+                content.ccs?.map((cc: any, index: number) => ({
+                  id: `cc-${content.id}-${index}`,
+                  hasSeen: false,
+                  seenAt: null,
+                  seenByEmployeePosition: null,
+                })) || [],
+            })),
+            initiator: record.initiator,
+            initiatedAs: record.initiatedAs,
+            status: record.statusKey,
+          }}
+          refetch={() => {
+            queryClient.invalidateQueries({ queryKey: ["record", recordId] });
+            setHasCCAssigned(true);
+          }}
+        />
+      )}
+
+      {/* Record Assignment Modal */}
+      <AssignIncomingRecordModal
+        isOpen={showAssignModal}
+        onSuccess={handleAssignmentSuccess}
+        onClose={() => {
+          setShowAssignModal(false);
+          setPendingFormData(null);
+        }}
+      />
+    </Form>
+  );
+};
+
+export default EditIncomingRecordForm;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/headerSection.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/headerSection.tsx
new file mode 100644
index 000000000..ab417dda5
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/headerSection.tsx
@@ -0,0 +1,106 @@
+import { cn } from "@/shared/lib/utils";
+import { t } from "i18next";
+import { NavLink } from "react-router-dom";
+import { useReport } from "../../hooks/useReport";
+
+const HeaderSection = () => {
+  const { ROIncomingExternalNonSmart, ROIncomingNonSmart, ROIncomingSmart } =
+    useReport("");
+  return (
+    <div className="flex gap-6 border-b border-gray-200 dark:border-gray-700 mb-4">
+      {/* Non-Smart Letters Tab */}
+      <NavLink
+        to="/record-management/recordOfficer/incoming"
+        className={({ isActive }) =>
+          cn(
+            "relative pb-2 text-sm sm:text-base font-medium transition-colors",
+            isActive
+              ? "text-primary-800 dark:text-white"
+              : "text-gray-500 dark:text-gray-300 hover:text-primary-700 dark:hover:text-white"
+          )
+        }
+      >
+        {({ isActive }) => (
+          <div className="relative flex items-center">
+            <span>{t("userRecord.recordOfficeRegester")}</span>
+
+            {/* 🔴 Notification badge for Non-Smart Letters */}
+            {ROIncomingNonSmart > 0 && (
+              <span className="ml-2 bg-red-500 text-white text-xs font-semibold rounded-full px-1.5 py-0.5 leading-none shadow">
+                {ROIncomingNonSmart}
+              </span>
+            )}
+
+            {/* Active underline */}
+            {isActive && (
+              <span className="absolute left-0 -bottom-[1px] h-0.5 w-full bg-primary-600 dark:bg-white rounded-full transition-all"></span>
+            )}
+          </div>
+        )}
+      </NavLink>
+
+      {/* Incoming Letters Tab */}
+      <NavLink
+        to="/record-management/recordOfficer/incomingHistory"
+        className={({ isActive }) =>
+          cn(
+            "relative pb-2 text-sm sm:text-base font-medium transition-colors",
+            isActive
+              ? "text-primary-800 dark:text-white"
+              : "text-gray-500 dark:text-gray-300 hover:text-primary-700 dark:hover:text-white"
+          )
+        }
+      >
+        {({ isActive }) => (
+          <div className="relative flex items-center">
+            <span>{t("userRecord.fromSmartUsers")}</span>
+
+            {/* 🔴 Notification badge for Incoming Letters */}
+            {ROIncomingSmart > 0 && (
+              <span className="ml-2 bg-red-500 text-white text-xs font-semibold rounded-full px-1.5 py-0.5 leading-none shadow">
+                {ROIncomingSmart}
+              </span>
+            )}
+
+            {/* Active underline */}
+            {isActive && (
+              <span className="absolute left-0 -bottom-[1px] h-0.5 w-full bg-primary-600 dark:bg-white rounded-full transition-all"></span>
+            )}
+          </div>
+        )}
+      </NavLink>
+      {/* non smart external */}
+      <NavLink
+        to="/record-management/recordOfficer/incomingNonSmartExternal"
+        className={({ isActive }) =>
+          cn(
+            "relative pb-2 text-sm sm:text-base font-medium transition-colors",
+            isActive
+              ? "text-primary-800 dark:text-white"
+              : "text-gray-500 dark:text-gray-300 hover:text-primary-700 dark:hover:text-white"
+          )
+        }
+      >
+        {({ isActive }) => (
+          <div className="relative flex items-center">
+            <span>{t("userRecord.fromExternalNonsmart")}</span>
+
+            {/* 🔴 Notification badge for Incoming Letters */}
+            {ROIncomingExternalNonSmart > 0 && (
+              <span className="ml-2 bg-red-500 text-white text-xs font-semibold rounded-full px-1.5 py-0.5 leading-none shadow">
+                {ROIncomingExternalNonSmart}
+              </span>
+            )}
+
+            {/* Active underline */}
+            {isActive && (
+              <span className="absolute left-0 -bottom-[1px] h-0.5 w-full bg-primary-600 dark:bg-white rounded-full transition-all"></span>
+            )}
+          </div>
+        )}
+      </NavLink>
+    </div>
+  );
+};
+
+export default HeaderSection;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/incomingDraftRecordsColumns.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/incomingDraftRecordsColumns.tsx
new file mode 100644
index 000000000..d78bfaf18
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/incomingDraftRecordsColumns.tsx
@@ -0,0 +1,200 @@
+import { ColumnDef } from "@tanstack/react-table";
+
+import { IncomingRecordActions } from "./incomingRecordActions";
+import { CorrespondenceDto } from "@/record-management/dto/IncomingRecords/RecordOfficerIncoming";
+import { t } from "i18next";
+import i18n from "i18next";
+import { renderStatus } from "@/record-management/utils/renderDetails";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+
+export const IncomingDraftRecordsColumns = (
+  refetch: () => void,
+  localizedName: (name?: { am?: string; en?: string }) => string,
+  type: string,
+  pageNo: number,
+  openDropdownId?: string | null,
+  onDropdownChange?: (id: string | null) => void,
+  onAssignExternal?: (rowData: CorrespondenceDto) => void,
+): ColumnDef<CorrespondenceDto>[] => [
+  {
+    accessorKey: "letterName",
+    header: () => t("viewDetail.fileName1"),
+    cell: ({ row }) => {
+      const letterName = row.original?.letterName || "-";
+      return (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="max-w-[200px] truncate cursor-help">
+                {letterName}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{letterName}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
+    },
+  },
+  {
+    accessorKey: "referenceNumber",
+    header: () => t("userRecord.Reference Number"),
+    cell: ({ row }) => {
+      const referenceNumber = row.original?.referenceNumber || "-";
+
+      return (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="max-w-[200px] truncate cursor-help font-medium">
+                {referenceNumber}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{referenceNumber}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
+    },
+  },
+  {
+    accessorKey: "Letter_Number",
+    header: () => t("userRecord.Letter Number"),
+    cell: ({ row }) => {
+      const letterNumber = row.original?.letterNumber || "-";
+
+      return (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="max-w-[200px] truncate cursor-help">
+                {letterNumber}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{letterNumber}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
+    },
+  },
+  {
+    accessorKey: "From",
+    header: () => t("userIncoming.Sending Organization"),
+    cell: ({ row }) => {
+      const rowData = row?.original;
+      const organizationName =
+        localizedName(rowData?.metadata?.organizationName) || "-";
+
+      return (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="max-w-[200px] truncate cursor-help">
+                {organizationName}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{organizationName}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
+    },
+  },
+  {
+    accessorKey: "Subject",
+    header: () => t("userRecord.Subject"),
+    cell: ({ row }) => {
+      const subject = row.original.content[0]?.subject || "-";
+
+      return (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="max-w-[200px] truncate cursor-help">
+                {subject}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{subject}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
+    },
+  },
+  {
+    id: "Status",
+    header: () => t("userRecord.Status"),
+    cell: ({ row }) => {
+      const status = row.original.nonSmartOfficeRecordStatus;
+      return renderStatus(status, status);
+    },
+    enableHiding: true,
+  },
+  {
+    accessorKey: "submittedDate",
+    header: () => t("userRecord.Date"),
+    cell: ({ row }) => {
+      const record = row.original;
+
+      const isAmharic = i18n.language === "am";
+      const amharicDate = record.amharicCreatedAt;
+      const submittedDate = record.createdAt;
+
+      if (isAmharic && amharicDate) {
+        return <div>{amharicDate}</div>;
+      }
+
+      const formattedDate = submittedDate
+        ? new Date(submittedDate).toLocaleDateString(i18n.language, {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+            hour: "numeric",
+            minute: "numeric",
+          })
+        : "-";
+
+      return <div>{formattedDate}</div>;
+    },
+  },
+  {
+    id: "Actions",
+    header: () => t("userRecord.Actions"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      const dropdownId = rowData.id || "";
+
+      return (
+        <IncomingRecordActions
+          shouldAddEditAction={
+            type === "draft" || rowData.statusKey === "Draft"
+          }
+          rowData={rowData as CorrespondenceDto}
+          refetchTable={refetch}
+          type={type}
+          pageIndex={pageNo}
+          recordTypeKey="non_smart_user"
+          onAssignExternal={(record) =>
+            onAssignExternal?.(record as CorrespondenceDto)
+          }
+          isDropdownOpen={openDropdownId === dropdownId}
+          onDropdownOpenChange={(open) => {
+            onDropdownChange?.(open ? dropdownId : null);
+          }}
+          dropdownId={dropdownId}
+        />
+      );
+    },
+  },
+];
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/incomingExternalNonSmart.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/incomingExternalNonSmart.tsx
new file mode 100644
index 000000000..28ecd1326
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/incomingExternalNonSmart.tsx
@@ -0,0 +1,199 @@
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import {
+  CombinedFilterBar,
+  CombinedFilterField,
+} from "@/shared/components/filters/CombinedFilterBar";
+import { useCombinedFilters } from "@/shared/hooks/useCombinedFilters";
+import { FilterParams } from "@/shared/utils/filterParams";
+import { IncomingDraftRecordsColumns } from "./incomingDraftRecordsColumns";
+import Loader from "../../Loader/loader";
+import { useState, useMemo, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useCreateIncomingRecords } from "../../hooks/useCreateIncomingRecord";
+import { Button } from "@/shared/common/ui/button";
+import HeaderSection from "./headerSection";
+import { useSearchParams } from "react-router-dom";
+
+const IncomingRecordsDraft = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const urlPage = Number(searchParams.get("page") || 1);
+  const [pageIndex, setPageIndex] = useState(urlPage - 1);
+  const pageSize = 10;
+  const { t } = useTranslation();
+  const localizedName = useLocalizedName();
+  const type = "externalNonSmart";
+
+  const combinedFilters = useCombinedFilters<FilterParams>();
+  const [liveSearch, setLiveSearch] = useState<{
+    key: string;
+    value: string;
+  } | null>(null);
+  const [statusFilter, setStatusFilter] = useState<string>("");
+  const [openDropdownId, setOpenDropdownId] = useState<string | null>(null);
+
+  const filterFields = useMemo<CombinedFilterField[]>(
+    () => [
+      {
+        key: "letterNumber",
+        label: t("userRecord.Letter Number"),
+        type: "text",
+      },
+      {
+        key: "sendingOrganization",
+        label: t("userRecord.sendingOrganization"),
+        type: "text",
+      },
+      { key: "subject", label: t("userRecord.Subject"), type: "text" },
+      { key: "letterName", label: t("viewDetail.fileName1"), type: "text" },
+      {
+        key: "dispatchedDate",
+        label: t("userRecord.Date"),
+        type: "dateRange",
+        fromKey: "from",
+        toKey: "to",
+      },
+    ],
+    [t],
+  );
+
+  const handleLiveSearch = (key: string, value: string) => {
+    if (!key || !value) {
+      setLiveSearch(null);
+      return;
+    }
+    setLiveSearch({ key, value });
+    setPageIndex(0);
+  };
+
+  const filterParams = useMemo(() => {
+    const base = {
+      skip: pageIndex * pageSize,
+      take: pageSize,
+      orderBy: "record.createdAt:DESC",
+      recordTypeKey: "external_non_smart_user",
+      ...(statusFilter && { nonSmartOfficeRecordStatus: statusFilter }),
+      ...combinedFilters.filters,
+    };
+
+    // Apply live search after spread so cleanFilterParams doesn't strip it
+    return liveSearch ? { ...base, [liveSearch.key]: liveSearch.value } : base;
+  }, [pageIndex, statusFilter, combinedFilters.filters, liveSearch]);
+
+  const {
+    externalRecords,
+    externalRecordsCount,
+    isExternalRecordIncoming,
+    isExternalRecordIncomingError,
+    refetch1,
+    refetch,
+  } = useCreateIncomingRecords(filterParams);
+
+  const statusOptions = [
+    { value: "", label: t("statusBar.All") },
+    { value: "not_assigned", label: t("statusBar.not_assigned") },
+    { value: "assigned", label: t("statusBar.assigned") },
+  ];
+
+  const Refresh = async (): Promise<void> => {
+    await refetch();
+    await refetch1();
+  };
+
+  const totalPages = externalRecordsCount
+    ? Math.ceil(externalRecordsCount / pageSize)
+    : 1;
+
+  useEffect(() => {
+    if (!externalRecordsCount) return;
+
+    let newPage = pageIndex + 1;
+    if (newPage > totalPages) {
+      newPage = 1;
+      setPageIndex(0);
+    }
+
+    setSearchParams((prev) => {
+      const params = new URLSearchParams(prev);
+      params.set("page", newPage.toString());
+      return params;
+    });
+  }, [pageIndex, totalPages, setSearchParams, externalRecordsCount]);
+
+  const handlePageChangeInc = () => {
+    const newPage = pageIndex + 1;
+    setPageIndex(newPage);
+    setSearchParams((prev) => {
+      prev.set("page", newPage.toString());
+      return prev;
+    });
+  };
+
+  return (
+    <div className="w-full mx-auto py-6 space-y-6">
+      <div className="flex w-full min-w-0 flex-col gap-4">
+        <h4 className="text-xl font-medium text-gray-900 dark:text-gray-100">
+          {t("userIncoming.Letters")}
+        </h4>
+
+        <CombinedFilterBar
+          fields={filterFields}
+          filters={combinedFilters.filters}
+          setFilter={combinedFilters.setFilter}
+          setFilters={combinedFilters.setFilters}
+          removeFilter={combinedFilters.removeFilter}
+          removeFilters={combinedFilters.removeFilters}
+          onFilterChange={() => setPageIndex(0)}
+          onLiveSearch={handleLiveSearch}
+          className="w-full min-w-0"
+        />
+      </div>
+      <HeaderSection />
+
+      <div className="flex flex-wrap gap-2 mb-4 mt-5">
+        {statusOptions.map((opt) => (
+          <Button
+            key={opt.value}
+            variant={statusFilter === opt.value ? "linkActive" : "link"}
+            onClick={() => {
+              setStatusFilter(opt.value);
+              setPageIndex(0);
+            }}
+            className="rounded-md text-base base:text-base">
+            {opt.label}
+          </Button>
+        ))}
+      </div>
+
+      {isExternalRecordIncomingError && (
+        <p>{t("userIncoming.Error loading records.")}</p>
+      )}
+      {isExternalRecordIncoming ? (
+        <Loader />
+      ) : (
+        <AdvancedTable
+          columns={IncomingDraftRecordsColumns(
+            Refresh,
+            localizedName as (name?: { am?: string; en?: string }) => string,
+            type,
+            pageIndex + 1,
+            openDropdownId,
+            setOpenDropdownId,
+          )}
+          data={externalRecords || []}
+          tableName="incoming draft external"
+          toolBarPosition="right"
+          extraToolbar={<div className="flex gap-2"></div>}
+          itemCount={externalRecordsCount || 2}
+          pageIndex={pageIndex}
+          onPageChange={setPageIndex}
+          nextFunction={handlePageChangeInc}
+          prevFunction={() => setPageIndex(Math.max(pageIndex - 1, 0))}
+          refresh={Refresh}
+        />
+      )}
+    </div>
+  );
+};
+
+export default IncomingRecordsDraft;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/incomingRecordActions.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/incomingRecordActions.tsx
new file mode 100644
index 000000000..49d3f472b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/incomingRecordActions.tsx
@@ -0,0 +1,389 @@
+import { Button, getActionButtonVariant } from "@/shared/common/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import { UserPlus, Edit, Trash, MoreVertical, Lock, Unlock } from "lucide-react";
+import { useState } from "react";
+// import AssigneRecord from "@/components/userIncoming/internalIncomingRecords/AssigneRecord";
+import { useNavigate } from "react-router-dom";
+import DeleteRecord from "./deleteRecord";
+import { AssignRecordDto } from "@/record-management/dto/userRecords/usersDto";
+import AssigneIncomingRecord from "./AssigneIncomingRecords";
+import AssigneRecordExternal from "./AssigneIncomingExternalRecord";
+import { toast } from "sonner";
+import {
+  CorrespondenceDto,
+  IncomingRecordWrapperDto,
+} from "@/record-management/dto/IncomingRecords/RecordOfficerIncoming";
+import { useTranslation } from "react-i18next";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { lockRecord } from "@/record-management/services/api/userRecordService";
+
+type PreventableEvent = {
+  preventDefault: () => void;
+};
+
+interface IncomingRecordActionsProps {
+  rowData: CorrespondenceDto | IncomingRecordWrapperDto;
+  refetchTable?: () => void; // Optional callback to refetch table data
+  shouldAddEditAction?: boolean;
+  type?: string;
+  pageIndex?: number;
+  fromTable?: boolean;
+  isDropdownOpen?: boolean;
+  onDropdownOpenChange?: (open: boolean) => void;
+  dropdownId?: string;
+  recordTypeKey?: string;
+  onAssignInternal?: (
+    rowData: CorrespondenceDto | IncomingRecordWrapperDto,
+  ) => void;
+  onAssignExternal?: (
+    rowData: CorrespondenceDto | IncomingRecordWrapperDto,
+  ) => void;
+}
+
+export function IncomingRecordActions({
+  rowData,
+  refetchTable,
+  shouldAddEditAction,
+  type,
+  pageIndex,
+  fromTable = true,
+  isDropdownOpen = false,
+  onDropdownOpenChange,
+  dropdownId = "",
+  recordTypeKey: recordTypeKeyProp,
+  onAssignInternal,
+  onAssignExternal,
+}: IncomingRecordActionsProps) {
+  const [showAssignModal, setShowAssignModal] = useState(false);
+  const [showAssignModalExternal, setShowAssignModalExternal] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const recordId =
+    "record" in rowData && rowData.record?.id ? rowData.record.id : rowData.id;
+  const isLocked =
+    ("record" in rowData && rowData.record?.isLocked !== undefined
+      ? rowData.record.isLocked
+      : rowData.isLocked) ?? false;
+
+  const { mutate: updateRecordLock, isPending: isUpdatingLock } = useMutation({
+    mutationFn: ({ id, value }: { id: string; value: boolean }) =>
+      lockRecord(id, value),
+    onSuccess: (_, variables) => {
+      toast.success(
+        variables.value
+          ? t("userIncoming.RecordLocked", "Record locked")
+          : t("userIncoming.RecordUnlocked", "Record unlocked"),
+      );
+      queryClient.invalidateQueries({ queryKey: ["external-record-incoming"] });
+      queryClient.invalidateQueries({ queryKey: ["record-incoming"] });
+      queryClient.invalidateQueries({ queryKey: ["dashbordReportRO"] });
+      refetchTable?.();
+    },
+    onError: () => {
+      toast.error(t("userIncoming.LockUpdateFailed", "Failed to update lock"));
+    },
+  });
+
+  const handleDetailView = () => {
+    
+
+    if (recordId) {
+      navigate(
+        `/record-management/viewIncoming/${recordId}/${type}/?page=${pageIndex}`,
+        {
+          state: { actionRowData: rowData },
+        },
+      );
+    }
+  };
+
+  const handleAssign = (e: PreventableEvent) => {
+    e.preventDefault();
+    if (onAssignInternal) {
+      onAssignInternal(rowData);
+      onDropdownOpenChange?.(false);
+      return;
+    }
+    setShowAssignModal(true);
+  };
+  const handleAssignExternal = (e: PreventableEvent) => {
+    e.preventDefault();
+    if (onAssignExternal) {
+      onAssignExternal(rowData);
+      onDropdownOpenChange?.(false);
+      return;
+    }
+    setShowAssignModalExternal(true);
+  };
+  const handleEdit = (e: PreventableEvent) => {
+    e.preventDefault();
+    
+    if (rowData.id) {
+      navigate(`/record-management/editIncoming/${rowData.id}`);
+    }
+  };
+
+  const handleDelete = (e: PreventableEvent) => {
+    e.preventDefault();
+    
+    setShowDeleteDialog(true);
+  };
+
+  const handleToggleLock = (e: PreventableEvent) => {
+    e.preventDefault();
+    
+    if (!recordId) return;
+    updateRecordLock({ id: recordId, value: !isLocked });
+  };
+
+  const recordTypeKey =
+    recordTypeKeyProp ??
+    ("record" in rowData
+      ? rowData.record?.recordTypeKey
+      : (rowData as CorrespondenceDto & { recordTypeKey?: string })
+          .recordTypeKey);
+  const isCorrespondence = "statusKey" in rowData;
+  const nonStatus =
+    "nonSmartOfficeRecordStatus" in rowData &&
+    rowData.nonSmartOfficeRecordStatus === "not_assigned";
+  const canAssignExternal =
+    recordTypeKey === "external" ||
+    recordTypeKey === "non_smart_user" ||
+    recordTypeKey === "external_non_smart_user";
+  const canAssignInternal = isCorrespondence && !canAssignExternal;
+
+  return (
+    <>
+      {fromTable ? (
+        <>
+          <Button variant={"viewDetail"} onClick={() => handleDetailView()}>
+            {t("userIncoming.View Detail")}
+          </Button>
+          <DropdownMenu open={isDropdownOpen} onOpenChange={onDropdownOpenChange || (() => {})}>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="h-8 w-8 p-0 relative">
+                <MoreVertical className="h-4 w-4" />
+                <span className="sr-only">
+                  {t("userIncoming.Open actions menu")}
+                </span>
+              </Button>
+            </DropdownMenuTrigger>
+
+            <DropdownMenuContent
+              align="end"
+              onCloseAutoFocus={(e) => e.preventDefault()}
+              onInteractOutside={(e) => {
+                const target = e.target as HTMLElement;
+                if (!target.closest('[role="dialog"]')) {
+                  
+                }
+              }}
+            >
+              <DropdownMenuLabel>{t("userRecord.Actions")}</DropdownMenuLabel>
+              <DropdownMenuItem
+                onSelect={handleToggleLock}
+                disabled={isUpdatingLock}
+                className="cursor-pointer hover:!text-primary-700 !bg-transparent !transition-colors duration-200"
+              >
+                {isLocked ? (
+                  <Unlock className="mr-2 h-4 w-4 transition-colors duration-200" />
+                ) : (
+                  <Lock className="mr-2 h-4 w-4 transition-colors duration-200" />
+                )}
+                <span>
+                  {isLocked
+                    ? t("userIncoming.UnlockRecord", "Unlock Record")
+                    : t("userIncoming.LockRecord", "Lock Record")}
+                </span>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              {canAssignInternal && (
+                <>
+                  <DropdownMenuItem
+                    onSelect={handleAssign}
+                    className="cursor-pointer hover:!text-primary-700 !bg-transparent !transition-colors duration-200"
+                  >
+                    <UserPlus className="mr-2 h-4 w-4 group-hover:text-white transition-colors duration-200" />
+                    <span>{t("userIncoming.Assign")}</span>
+                  </DropdownMenuItem>
+                  {shouldAddEditAction && nonStatus && (
+                    <>
+                      <DropdownMenuItem
+                        onSelect={handleEdit}
+                        className="cursor-pointer hover:!text-primary-700 !bg-transparent !transition-colors duration-200"
+                      >
+                        <Edit className="mr-2 h-4 w-4 group-hover:text-white transition-colors duration-200" />
+                        <span> {t("userRecord.Edit")}</span>
+                      </DropdownMenuItem>
+
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem
+                        onSelect={handleDelete}
+                        className="text-red-600 cursor-pointer hover:!text-red-800 !bg-transparent !transition-colors duration-200"
+                      >
+                        <Trash className="mr-2 h-4 w-4 text-red-600 group-hover:text-white transition-colors duration-200" />
+                        <span> {t("userRecord.Delete")}</span>
+                      </DropdownMenuItem>
+                    </>
+                  )}
+                </>
+              )}
+              {canAssignExternal && (
+                <DropdownMenuItem
+                  onSelect={handleAssignExternal}
+                  className="cursor-pointer hover:!text-primary-700 !bg-transparent !transition-colors duration-200"
+                >
+                  <UserPlus className="mr-2 h-4 w-4 group-hover:text-white transition-colors duration-200" />
+                  <span>{t("userIncoming.Assign")}</span>
+                </DropdownMenuItem>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </>
+      ) : (
+        <div className="flex flex-wrap gap-2">
+          {canAssignInternal && (
+            <Button
+              variant={getActionButtonVariant("Assign")}
+              onClick={handleAssign}
+            >
+              <UserPlus className="h-4 w-4" />
+              <span>
+                {t("userIncoming.Assign")}
+              </span>
+            </Button>
+          )}
+
+          {canAssignExternal && (
+            <Button
+              variant={getActionButtonVariant("Assign")}
+              onClick={handleAssignExternal}
+            >
+              <UserPlus className="h-4 w-4" />
+              <span>
+                {t("userIncoming.Assign")}
+              </span>
+            </Button>
+          )}
+
+          {shouldAddEditAction && nonStatus && (
+            <Button
+              variant={getActionButtonVariant("Edit")}
+              onClick={handleEdit}
+            >
+              <Edit className="h-4 w-4" />
+              <span>
+                {t("userRecord.Edit")}
+              </span>
+            </Button>
+          )}
+
+          {shouldAddEditAction && nonStatus && (
+            <Button
+              variant={getActionButtonVariant("Delete")}
+              onClick={handleDelete}
+            >
+              <Trash className="h-4 w-4" />
+              <span>
+                {t("userRecord.Delete")}
+              </span>
+            </Button>
+          )}
+
+          <Button
+            variant={isLocked ? "outline" : getActionButtonVariant("Edit")}
+            onClick={handleToggleLock}
+            disabled={isUpdatingLock}
+          >
+            {isLocked ? (
+              <Unlock className="h-4 w-4" />
+            ) : (
+              <Lock className="h-4 w-4" />
+            )}
+            <span>
+              {isLocked
+                ? t("userIncoming.UnlockRecord", "Unlock Record")
+                : t("userIncoming.LockRecord", "Lock Record")}
+            </span>
+          </Button>
+        </div>
+      )}
+
+      {showAssignModal && (
+        <AssigneIncomingRecord
+          record={rowData as unknown as AssignRecordDto}
+          onClose={() => {
+            setShowAssignModal(false);
+            onDropdownOpenChange?.(false);
+            if (refetchTable) {
+              refetchTable();
+            }
+          }}
+          onSuccess={() => {
+            toast.success(t("msg.successassign"));
+            setShowAssignModal(false);
+            queryClient.invalidateQueries({
+              queryKey: ["external-record-incoming"],
+            });
+            queryClient.invalidateQueries({ queryKey: ["dashbordReportRO"] });
+          }}
+          isOpen={true}
+        />
+      )}
+      {showAssignModalExternal && (
+        <AssigneRecordExternal
+          record={rowData as unknown as AssignRecordDto}
+          onClose={() => {
+            setShowAssignModalExternal(false);
+            onDropdownOpenChange?.(false);
+            if (refetchTable) {
+              refetchTable();
+            }
+          }}
+          onSuccess={() => {
+            toast.success(t("msg.successassign"));
+            queryClient.invalidateQueries({
+              queryKey: ["record-incoming"],
+            });
+            queryClient.invalidateQueries({ queryKey: ["dashbordReportRO"] });
+            setShowAssignModalExternal(false);
+            if (refetchTable) {
+              refetchTable();
+            }
+          }}
+          isOpen={true}
+        />
+      )}
+      {showDeleteDialog && (
+        <DeleteRecord
+          recordId={(rowData?.id as string) || "0"}
+          onSuccess={() => {
+            setShowDeleteDialog(false);
+            queryClient.invalidateQueries({
+              queryKey: ["external-record-incoming"],
+            });
+            queryClient.invalidateQueries({ queryKey: ["dashbordReportRO"] });
+            if (refetchTable) {
+              refetchTable(); // Call the refetch function if provided
+            }
+          }}
+          onClose={() => {
+            setShowDeleteDialog(false);
+            if (refetchTable) {
+              refetchTable();
+            }
+          }}
+        />
+      )}
+    </>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/incomingRecordDetailActions.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/incomingRecordDetailActions.tsx
new file mode 100644
index 000000000..3ce9b1d06
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/incomingRecordDetailActions.tsx
@@ -0,0 +1,137 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { UserPlus, Edit, Trash } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+
+import { Button, getActionButtonVariant } from "@/shared/common/ui/button";
+import { RecordDto } from "@/record-management/dto/userRecords/userRecordsDto";
+import { AssignRecordDto } from "@/record-management/dto/userRecords/usersDto";
+import AssigneIncomingRecord from "./AssigneIncomingRecords";
+import DeleteRecord from "./deleteRecord";
+
+interface IncomingRecordDetailActionsProps {
+  rowData: RecordDto;
+  refetchTable?: () => void;
+  shouldAddEditAction?: boolean;
+}
+
+const IncomingRecordDetailActions = ({
+  rowData,
+  refetchTable,
+  shouldAddEditAction = false,
+}: IncomingRecordDetailActionsProps) => {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  const [showAssign, setShowAssign] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+
+  // Mirror the table flow: rows from the Draft / External-NonSmart tables
+  // (CorrespondenceDto) always go through AssigneIncomingRecord, which uses
+  // record.id as the record id and falls back to start-assignment when
+  // recordBoxes is empty. The detail view only has the bare RecordDto, so we
+  // wrap it into the minimum shape the modal needs and reuse whatever
+  // recordBoxes the API happened to return.
+  const existingRecordBoxes =
+    (rowData as unknown as { recordBoxes?: any[] })?.recordBoxes ?? [];
+  const assignPayload = {
+    id: rowData?.id,
+    record: rowData,
+    recordBoxes: existingRecordBoxes,
+    recordBoxId: null,
+    createdAt: rowData?.createdAt ?? "",
+    status: rowData?.statusKey ?? "",
+    content: rowData?.content as any,
+  } as unknown as AssignRecordDto;
+
+  const nonStatus =
+    rowData &&
+    "nonSmartOfficeRecordStatus" in rowData &&
+    rowData.nonSmartOfficeRecordStatus === "not_assigned";
+
+  const handleSuccess = () => {
+    toast.success(t("msg.successassign"));
+    queryClient.invalidateQueries({ queryKey: ["record-incoming"] });
+    queryClient.invalidateQueries({ queryKey: ["external-record-incoming"] });
+    queryClient.invalidateQueries({ queryKey: ["dashbordReportRO"] });
+    queryClient.invalidateQueries({ queryKey: ["record"] });
+    refetchTable?.();
+    setShowAssign(false);
+    navigate("/record-management/recordOfficer/incoming");
+  };
+
+  const handleEdit = () => {
+    if (rowData.id) {
+      navigate(`/record-management/editIncoming/${rowData.id}`);
+    }
+  };
+
+  const handleDelete = () => {
+    setShowDeleteDialog(true);
+  };
+
+  return (
+    <>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button
+          variant={getActionButtonVariant("Assign")}
+          onClick={() => setShowAssign(true)}
+        >
+          <UserPlus className="h-4 w-4" />
+          <span>{t("userIncoming.Assign")}</span>
+        </Button>
+
+        {shouldAddEditAction && nonStatus && (
+          <>
+            <Button
+              variant={getActionButtonVariant("Edit")}
+              onClick={handleEdit}
+            >
+              <Edit className="h-4 w-4" />
+              <span>{t("userRecord.Edit")}</span>
+            </Button>
+
+            <Button
+              variant={getActionButtonVariant("Delete")}
+              onClick={handleDelete}
+            >
+              <Trash className="h-4 w-4" />
+              <span>{t("userRecord.Delete")}</span>
+            </Button>
+          </>
+        )}
+      </div>
+
+      {showAssign && (
+        <AssigneIncomingRecord
+          record={assignPayload}
+          isOpen={true}
+          onClose={() => setShowAssign(false)}
+          onSuccess={handleSuccess}
+        />
+      )}
+
+      {showDeleteDialog && (
+        <DeleteRecord
+          recordId={rowData?.id || "0"}
+          onSuccess={() => {
+            setShowDeleteDialog(false);
+            queryClient.invalidateQueries({
+              queryKey: ["external-record-incoming"],
+            });
+            queryClient.invalidateQueries({ queryKey: ["dashbordReportRO"] });
+            refetchTable?.();
+            navigate("/record-management/recordOfficer/incoming");
+          }}
+          onClose={() => {
+            setShowDeleteDialog(false);
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default IncomingRecordDetailActions;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/incomingRecordsColumns.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/incomingRecordsColumns.tsx
new file mode 100644
index 000000000..8e7998c8d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/incomingRecordsColumns.tsx
@@ -0,0 +1,171 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { IncomingRecordActions } from "./incomingRecordActions";
+import { t } from "i18next";
+import i18n from "i18next";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+import { renderStatus } from "@/record-management/utils/renderDetails";
+
+export const IncomingRecordsColumns = (
+  refetch: () => void,
+  localizedName: (name?: { am?: string; en?: string }) => string,
+  pageIndex: number,
+  openDropdownId?: string | null,
+  onDropdownChange?: (id: string | null) => void,
+): ColumnDef<any>[] => [
+  {
+    id: "referenceNumber",
+    accessorKey: "record.referenceNumber",
+    header: () => t("userRecord.Reference Number"),
+    cell: ({ row }) => {
+      const referenceNumber = row.original.record?.referenceNumber || "-";
+
+      return (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="max-w-[200px] truncate cursor-help font-medium">
+                {referenceNumber}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{referenceNumber}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
+    },
+  },
+  {
+    id: "Letter_Number",
+    accessorKey: "record.letterNumber",
+    header: () => t("userRecord.Letter Number"),
+    cell: ({ row }) => {
+      const letterNumber = row.original.record?.letterNumber || "-";
+
+      return (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="max-w-[200px] truncate cursor-help">
+                {letterNumber}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{letterNumber}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
+    },
+  },
+  {
+    id: "sendingOrganization",
+    accessorKey: "record.metadata.organizationName.en",
+    header: () => t("userIncoming.Sending Organization"),
+    cell: ({ row }) => {
+      const orgName =
+        localizedName(row.original.record?.metadata?.organizationName) ||
+        localizedName(row.original.record?.initiator?.unit?.name);
+
+      return (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="max-w-[200px] truncate cursor-help">
+                {orgName}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{orgName}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
+    },
+  },
+  {
+    id: "Subject",
+    accessorKey: "record.content",
+    header: () => t("userRecord.Subject"),
+    cell: ({ row }) => {
+      const subject = row.original.record?.content?.[0]?.subject || "-";
+      return (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="max-w-[200px] truncate cursor-help">
+                {subject}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{subject}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
+    },
+  },
+  {
+    id: "Status",
+    header: () => t("userRecord.Status"),
+    cell: ({ row }) => {
+      const status = row.original.status;
+      return renderStatus(status, status);
+    },
+    enableHiding: true,
+  },
+  {
+    id: "dispatchedDate",
+    accessorKey: "record.dispatchedDate",
+    header: () => t("userRecord.Date"),
+    cell: ({ row }) => {
+      const record = row.original.record;
+      const isAmharic = i18n.language === "am";
+      const amharicDate = record?.amharicDispatchedDate;
+      const submittedDate = record?.dispatchedDate;
+
+      if (isAmharic && amharicDate) return <div>{amharicDate}</div>;
+
+      const formattedDate = submittedDate
+        ? new Date(submittedDate).toLocaleDateString(i18n.language, {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+            hour: "numeric",
+            minute: "numeric",
+          })
+        : "-";
+
+      return <div>{formattedDate}</div>;
+    },
+  },
+  {
+    id: "Actions",
+    header: () => t("userRecord.Actions"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      const dropdownId = rowData.id || "";
+      return (
+        <IncomingRecordActions
+          shouldAddEditAction={
+            row.original.statusKey === "Draft" ? true : false
+          }
+          rowData={rowData}
+          refetchTable={refetch}
+          type="history"
+          pageIndex={pageIndex}
+          isDropdownOpen={openDropdownId === dropdownId}
+          onDropdownOpenChange={(open) => {
+            onDropdownChange?.(open ? dropdownId : null);
+          }}
+          dropdownId={dropdownId}
+        />
+      );
+    },
+  },
+];
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/incomingRecordsDraft.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/incomingRecordsDraft.tsx
new file mode 100644
index 000000000..8ae11ad6e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/incomingRecordsDraft.tsx
@@ -0,0 +1,264 @@
+import { IncomingDraftRecordsColumns } from "./incomingDraftRecordsColumns";
+import Loader from "../../Loader/loader";
+import { PlusCircle } from "lucide-react";
+import { useState, useMemo, useEffect, useCallback } from "react";
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import { useTranslation } from "react-i18next";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useCreateIncomingRecords } from "../../hooks/useCreateIncomingRecord";
+import { Link, useSearchParams } from "react-router-dom";
+import { Button } from "@/shared/common/ui/button";
+import HeaderSection from "./headerSection";
+import {
+  CombinedFilterBar,
+  CombinedFilterField,
+} from "@/shared/components/filters/CombinedFilterBar";
+import { useCombinedFilters } from "@/shared/hooks/useCombinedFilters";
+import { FilterParams } from "@/shared/utils/filterParams";
+import { CorrespondenceDto } from "@/record-management/dto/IncomingRecords/RecordOfficerIncoming";
+import { AssignRecordDto } from "@/record-management/dto/userRecords/usersDto";
+import AssigneRecordExternal from "./AssigneIncomingExternalRecord";
+import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+
+const IncomingRecordsDraft = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const urlPage = Number(searchParams.get("page") || 1);
+  const [pageIndex, setPageIndex] = useState(urlPage - 1);
+  const pageSize = 10;
+  const { t } = useTranslation();
+  const localizedName = useLocalizedName();
+  const queryClient = useQueryClient();
+  const type = "draft";
+
+  const combinedFilters = useCombinedFilters<FilterParams>();
+  const [liveSearch, setLiveSearch] = useState<{
+    key: string;
+    value: string;
+  } | null>(null);
+  const [statusFilter, setStatusFilter] = useState<string>("");
+  const [openDropdownId, setOpenDropdownId] = useState<string | null>(null);
+  const [assignRecord, setAssignRecord] = useState<CorrespondenceDto | null>(
+    null,
+  );
+
+  const filterFields = useMemo<CombinedFilterField[]>(
+    () => [
+      {
+        key: "letterNumber",
+        label: t("userRecord.Letter Number"),
+        type: "text",
+      },
+      {
+        key: "sendingOrganization",
+        label: t("userRecord.sendingOrganization"),
+        type: "text",
+      },
+      { key: "subject", label: t("userRecord.Subject"), type: "text" },
+      { key: "letterName", label: t("viewDetail.fileName1"), type: "text" },
+      {
+        key: "date",
+        label: t("userRecord.Date"),
+        type: "dateRange",
+        fromKey: "from",
+        toKey: "to",
+      },
+    ],
+    [t],
+  );
+
+  const handleLiveSearch = (key: string, value: string) => {
+    if (!key || !value) {
+      setLiveSearch(null);
+      return;
+    }
+    setLiveSearch({ key, value });
+    setPageIndex(0);
+  };
+
+  const filterParams = useMemo(() => {
+    const base: any = {
+      skip: pageIndex * pageSize,
+      take: pageSize,
+      orderBy: "record.createdAt:DESC",
+      recordTypeKey: "non_smart_user",
+      ...(statusFilter && { nonSmartOfficeRecordStatus: statusFilter }),
+      ...combinedFilters.filters,
+    };
+
+    return liveSearch ? { ...base, [liveSearch.key]: liveSearch.value } : base;
+  }, [pageIndex, statusFilter, combinedFilters.filters, liveSearch]);
+
+  const {
+    externalRecords,
+    externalRecordsCount,
+    isExternalRecordIncoming,
+    isExternalRecordIncomingError,
+    refetch1,
+    refetch,
+  } = useCreateIncomingRecords(filterParams);
+
+  const statusOptions = [
+    { value: "", label: t("statusBar.All") },
+    { value: "not_assigned", label: t("statusBar.not_assigned") },
+    { value: "assigned", label: t("statusBar.assigned") },
+  ];
+
+  const Refresh = useCallback(async (): Promise<void> => {
+    await refetch();
+    await refetch1();
+  }, [refetch, refetch1]);
+
+  const handleAssignExternal = useCallback((record: CorrespondenceDto) => {
+    setAssignRecord(record);
+  }, []);
+
+  const columns = useMemo(
+    () =>
+      IncomingDraftRecordsColumns(
+        Refresh,
+        localizedName as (name?: { am?: string; en?: string }) => string,
+        type,
+        pageIndex + 1,
+        openDropdownId,
+        setOpenDropdownId,
+        handleAssignExternal,
+      ),
+    [
+      Refresh,
+      localizedName,
+      type,
+      pageIndex,
+      openDropdownId,
+      handleAssignExternal,
+    ],
+  );
+
+  const totalPages = externalRecordsCount
+    ? Math.ceil(externalRecordsCount / pageSize)
+    : 1;
+
+  useEffect(() => {
+    if (!externalRecordsCount) return;
+
+    let newPage = pageIndex + 1;
+    if (newPage > totalPages) {
+      newPage = 1;
+      setPageIndex(0);
+    }
+
+    setSearchParams((prev) => {
+      const params = new URLSearchParams(prev);
+      params.set("page", newPage.toString());
+      return params;
+    });
+  }, [pageIndex, totalPages, setSearchParams, externalRecordsCount]);
+
+  const handlePageChangeInc = () => {
+    const newPage = pageIndex + 1;
+    setPageIndex(newPage);
+    setSearchParams((prev) => {
+      prev.set("page", newPage.toString());
+      return prev;
+    });
+  };
+
+  return (
+    <div className="w-full mx-auto py-6 space-y-2">
+      <div className="flex w-full min-w-0 flex-col gap-4">
+        <h4 className="text-xl font-medium text-gray-900 dark:text-gray-100">
+          {t("userIncoming.Letters")}
+        </h4>
+
+        <CombinedFilterBar
+          fields={filterFields}
+          filters={combinedFilters.filters}
+          setFilter={combinedFilters.setFilter}
+          setFilters={combinedFilters.setFilters}
+          removeFilter={combinedFilters.removeFilter}
+          removeFilters={combinedFilters.removeFilters}
+          onFilterChange={() => setPageIndex(0)}
+          onLiveSearch={handleLiveSearch}
+          className="w-full min-w-0"
+        />
+      </div>
+      <HeaderSection />
+
+      <Link
+        to="/record-management/recordOfficer/incoming/add"
+        state={{ shouldRefetch: true }}>
+        <Button
+          size="default"
+          className="flex items-center gap-2 bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 font-medium rounded-xl shadow-sm hover:shadow-md transition-all duration-200 px-4 py-2">
+          <PlusCircle className="h-4 w-4" />
+          {t("userRecord.addRecordRO")}
+        </Button>
+      </Link>
+
+      <div className="flex flex-wrap gap-2 mb-4 mt-5">
+        {statusOptions.map((opt) => (
+          <Button
+            key={opt.value}
+            variant={statusFilter === opt.value ? "linkActive" : "link"}
+            onClick={() => {
+              setStatusFilter(opt.value);
+              setPageIndex(0);
+            }}
+            className="rounded-md text-base base:text-base">
+            {opt.label}
+          </Button>
+        ))}
+      </div>
+
+      {isExternalRecordIncomingError && (
+        <p>{t("userIncoming.Error loading records.")}</p>
+      )}
+      {isExternalRecordIncoming ? (
+        <Loader />
+      ) : (
+        <>
+          <AdvancedTable
+            columns={columns}
+            data={externalRecords || []}
+            tableName="incoming draft"
+            toolBarPosition="right"
+            hideToolbarFilter
+            extraToolbar={<div className="flex gap-2"></div>}
+            itemCount={externalRecordsCount || 2}
+            pageIndex={pageIndex}
+            onPageChange={setPageIndex}
+            nextFunction={handlePageChangeInc}
+            prevFunction={() => setPageIndex(Math.max(pageIndex - 1, 0))}
+            refresh={Refresh}
+          />
+
+          {assignRecord && (
+            <AssigneRecordExternal
+              record={assignRecord as unknown as AssignRecordDto}
+              onClose={() => {
+                setAssignRecord(null);
+              }}
+              onSuccess={() => {
+                toast.success(t("msg.successassign"));
+                queryClient.invalidateQueries({
+                  queryKey: ["external-record-incoming"],
+                });
+                queryClient.invalidateQueries({
+                  queryKey: ["record-incoming"],
+                });
+                queryClient.invalidateQueries({
+                  queryKey: ["dashbordReportRO"],
+                });
+                setAssignRecord(null);
+                void Refresh();
+              }}
+              isOpen={true}
+            />
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default IncomingRecordsDraft;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/incomingRecordsHistory.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/incomingRecordsHistory.tsx
new file mode 100644
index 000000000..749bcb34d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/incomingRecordsHistory.tsx
@@ -0,0 +1,213 @@
+import Loader from "../../../components/Loader/loader";
+import { useState, useMemo, useEffect } from "react";
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import { useTranslation } from "react-i18next";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useCreateIncomingRecords } from "../../hooks/useCreateIncomingRecord";
+import HeaderSection from "./headerSection";
+import { IncomingRecordsColumns } from "./incomingRecordsColumns";
+import { useLocation, useSearchParams } from "react-router-dom";
+import { MeDto } from "@/shared/dto/user/meDto";
+import { useUserDetail } from "../../hooks/useUserDetail";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { Button } from "@/shared/common/ui/button";
+import {
+  CombinedFilterBar,
+  CombinedFilterField,
+} from "@/shared/components/filters/CombinedFilterBar";
+import { useCombinedFilters } from "@/shared/hooks/useCombinedFilters";
+import { FilterParams } from "@/shared/utils/filterParams";
+
+const IncomingRecordshistory = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const urlPage = Number(searchParams.get("page") || 1);
+  const [pageIndex, setPageIndex] = useState(urlPage - 1);
+  const pageSize = 10;
+  const { t } = useTranslation();
+  const { userDetails } = useAuthUser();
+  const { permissionKeys } = useUserDetail(userDetails as MeDto);
+  const RO = permissionKeys.includes("can:dispatchRecords");
+  const [statusFilter, setStatusFilter] = useState<string>("");
+  const location = useLocation();
+  const shouldRefetch = location.state?.shouldRefetch;
+  const localizedName = useLocalizedName();
+
+  const combinedFilters = useCombinedFilters<FilterParams>();
+  const [liveSearch, setLiveSearch] = useState<{
+    key: string;
+    value: string;
+  } | null>(null);
+  const [openDropdownId, setOpenDropdownId] = useState<string | null>(null);
+
+  const filterFields = useMemo<CombinedFilterField[]>(
+    () => [
+      {
+        key: "referenceNumber",
+        label: t("viewDetail.referenceNumber"),
+        type: "text",
+      },
+      {
+        key: "sendingOrganization",
+        label: t("userRecord.sendingOrganization"),
+        type: "text",
+      },
+      { key: "subject", label: t("userRecord.Subject"), type: "text" },
+      {
+        key: "letterNumber",
+        label: t("userRecord.Letter Number"),
+        type: "text",
+      },
+      { key: "letterName", label: t("viewDetail.fileName1"), type: "text" },
+      {
+        key: "dispatchedDate",
+        label: t("userRecord.Date"),
+        type: "dateRange",
+        fromKey: "from",
+        toKey: "to",
+      },
+    ],
+    [t],
+  );
+
+  const handleLiveSearch = (key: string, value: string) => {
+    if (!key || !value) {
+      setLiveSearch(null);
+      return;
+    }
+    setLiveSearch({ key, value });
+    setPageIndex(0);
+  };
+
+  const filterParams = useMemo(() => {
+    const base: any = {
+      skip: pageIndex * pageSize,
+      take: pageSize,
+      orderBy: "record.dispatchedDate:DESC",
+      isRO: RO,
+      ...(statusFilter && { recordBoxStatus: statusFilter }),
+      ...combinedFilters.filters,
+    };
+
+    return liveSearch ? { ...base, [liveSearch.key]: liveSearch.value } : base;
+  }, [pageIndex, RO, statusFilter, combinedFilters.filters, liveSearch]);
+
+  const {
+    externalRecordsAfter,
+    externalRecordsAfterCount,
+    isLoading,
+    error,
+    refetch1,
+    refetch,
+  } = useCreateIncomingRecords(filterParams);
+
+  const statusOptions = [
+    { value: "", label: t("statusBar.All") },
+    { value: "draft", label: t("statusBar.not_assigned") },
+    { value: "assigned", label: t("statusBar.assigned") },
+  ];
+
+  const Refresh = async (): Promise<void> => {
+    await refetch();
+    await refetch1();
+  };
+
+  useEffect(() => {
+    if (shouldRefetch) {
+      refetch1();
+    }
+  }, [shouldRefetch, refetch1]);
+
+  const totalPages = externalRecordsAfterCount
+    ? Math.ceil(externalRecordsAfterCount / pageSize)
+    : 1;
+
+  useEffect(() => {
+    if (!externalRecordsAfterCount) return;
+
+    let newPage = pageIndex + 1;
+    if (newPage > totalPages) {
+      newPage = 1;
+      setPageIndex(0);
+    }
+
+    setSearchParams((prev) => {
+      const params = new URLSearchParams(prev);
+      params.set("page", newPage.toString());
+      return params;
+    });
+  }, [pageIndex, totalPages, setSearchParams, externalRecordsAfterCount]);
+
+  const handlePageChangeInc = () => {
+    const newPage = pageIndex + 1;
+    setPageIndex(newPage);
+    setSearchParams((prev) => {
+      prev.set("page", newPage.toString());
+      return prev;
+    });
+  };
+
+  return (
+    <div className="w-full mx-auto py-6 space-y-6">
+      <div className="flex w-full min-w-0 flex-col gap-4">
+        <h4 className="text-xl font-medium text-gray-900 dark:text-gray-100">
+          {t("userIncoming.Letters")}
+        </h4>
+
+        <CombinedFilterBar
+          fields={filterFields}
+          filters={combinedFilters.filters}
+          setFilter={combinedFilters.setFilter}
+          setFilters={combinedFilters.setFilters}
+          removeFilter={combinedFilters.removeFilter}
+          removeFilters={combinedFilters.removeFilters}
+          onFilterChange={() => setPageIndex(0)}
+          onLiveSearch={handleLiveSearch}
+          className="w-full min-w-0"
+        />
+      </div>
+      <HeaderSection />
+
+      <div className="flex flex-wrap gap-2 mb-4">
+        {statusOptions.map((opt) => (
+          <Button
+            key={opt.value}
+            variant={statusFilter === opt.value ? "linkActive" : "link"}
+            onClick={() => {
+              setStatusFilter(opt.value);
+              setPageIndex(0);
+            }}
+            className="rounded-md text-base base:text-base">
+            {opt.label}
+          </Button>
+        ))}
+      </div>
+
+      {error && <p>{t("userIncoming.Error loading records.")}</p>}
+      {isLoading ? (
+        <Loader />
+      ) : (
+        <AdvancedTable
+          columns={IncomingRecordsColumns(
+            Refresh,
+            localizedName as (name?: { am?: string; en?: string }) => string,
+            pageIndex + 1,
+            openDropdownId,
+            setOpenDropdownId,
+          )}
+          data={externalRecordsAfter || []}
+          tableName="incoming history"
+          toolBarPosition="right"
+          extraToolbar={<div className="flex gap-2"></div>}
+          itemCount={externalRecordsAfterCount || 2}
+          pageIndex={pageIndex}
+          onPageChange={setPageIndex}
+          nextFunction={handlePageChangeInc}
+          prevFunction={() => setPageIndex(Math.max(pageIndex - 1, 0))}
+          refresh={Refresh}
+        />
+      )}
+    </div>
+  );
+};
+
+export default IncomingRecordshistory;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/incomingview.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/incomingview.tsx
new file mode 100644
index 000000000..3ad5b6f33
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/incomingview.tsx
@@ -0,0 +1,32 @@
+
+import { useInternalIncomingRecords } from "@/record-management/components/hooks/useInternalIncomingRecords";
+
+
+export interface IViewUserRecordsProps {
+  recordId: string;
+}
+
+const ViewRecord = ({ recordId }: IViewUserRecordsProps) => {
+    //enter the correct import path for useCCIncomingRecords
+    // const { incomingRecords} = useIncomingRecords();
+    const { internalRecords} = useInternalIncomingRecords(
+      {  pageIndex: 0,
+  pageSize: 10,}
+    )
+  const selectedRecord = internalRecords.find(
+    (incomingRecords: { id: string }) => incomingRecords.id === recordId
+  );
+
+
+  return (
+    selectedRecord && (
+      <div>
+        <div className="w-full my-2">
+          {/* <FileList attachments={fetchAttachments} showDelete={false} /> */}
+        </div>
+      </div>
+    )
+  );
+};
+
+export default ViewRecord;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/softDelete.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/softDelete.tsx
new file mode 100644
index 000000000..c94b88c7b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/softDelete.tsx
@@ -0,0 +1,254 @@
+// import * as React from "react";
+// import { useTranslation } from "react-i18next";
+// import { useNavigate } from "react-router-dom";
+// import { Search, MoveLeft } from "lucide-react";
+
+// import { useUserRecords } from "../../hooks/useUserRecords";
+// import { SoftDeleteColumns } from "./softDeleteColumns";
+// import Loader from "../../../components/Loader/loader";
+
+// import {
+//   Select,
+//   SelectTrigger,
+//   SelectContent,
+//   SelectItem,
+//   SelectValue,
+// } from "@/shared/common/ui/select";
+// import { Input } from "@/shared/common/ui/input";
+// import { Button } from "@/shared/common/ui/button";
+// import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+// import { useAuthUser } from "@/shared/hooks/useAuthUser";
+// import { useState } from "react";
+// import DelegationView from "@/record-management/common/DelegationView";
+// import i18n from "@/i18n";
+// import EthiopianDatePickerModal, {
+//   convertEthiopianToGregorian,
+// } from "@/shared/common/form/fields/AmharicDatePicker";
+// const SoftDeleteRO = () => {
+//   const { t } = useTranslation();
+//   const navigate = useNavigate();
+//   const [pageIndex, setPageIndex] = React.useState(0);
+//   const pageSize = 10;
+//   const { userDetails } = useAuthUser();
+//   const isDelegated = userDetails?.employee?.some((emp) =>
+//     emp.positions.some((pos) => pos.hasDelegated)
+//   );
+//   const [searchQuery, setSearchQuery] = React.useState("");
+//   const [showFromPicker, setShowFromPicker] = useState(false);
+//   const [showToPicker, setShowToPicker] = useState(false);
+//   const [filterType, setFilterType] = React.useState<
+//     "subject" | "Date" | "letterName"
+//   >("subject");
+//   const [fromDate, setFromDate] = React.useState<string>("");
+//   const [toDate, setToDate] = React.useState<string>("");
+//   const [fromDateDisplay, setFromDateDisplay] = React.useState<string>("");
+//   const [toDateDisplay, setToDateDisplay] = React.useState<string>("");
+//   const lang = i18n.language;
+//   const filterParams = React.useMemo(() => {
+//     const baseParams = {
+//       skip: pageIndex * pageSize,
+//       take: pageSize,
+//       orderBy: "deletedAt:DESC",
+//       subject: filterType === "subject" ? searchQuery.trim() : "",
+//       fromDeletedAt: filterType === "Date" && fromDate ? fromDate : "",
+//       toDeletedAt: filterType === "Date" && toDate ? toDate : "",
+//       letterName: filterType === "letterName" ? searchQuery.trim() : "",
+//     };
+
+//     return Object.fromEntries(
+//       Object.entries(baseParams).filter(([, v]) => v !== "")
+//     );
+//   }, [pageIndex, filterType, searchQuery, fromDate, toDate]);
+//   const {
+//     recordsResponse,
+//     isLoading,
+//     isError,
+//     refetch,
+//     recordParent,
+//     recordParentCount,
+//     refetchParent,
+//     isLoadingParent,
+//     isErrorParent,
+//   } = useUserRecords(filterParams);
+//   let Error, loading;
+//   return isDelegated ? (
+//     <DelegationView />
+//   ) : (
+//     <div className="flex flex-col gap-2 bg-background text-foreground mt-3">
+//       {/* Header and Filter */}
+//       <div className="flex">
+//         <Button
+//           size="sm" // or use className for custom sizing
+//           className="bg-gray-600 text-sm px-1 py-1 w-[100px] hover:bg-gray-700"
+//           onClick={() => navigate(-1)}
+//         >
+//           <MoveLeft className="w-4 h-4" />
+//           {t("common.back")}
+//         </Button>
+//       </div>
+
+//       <div className="flex items-center justify-between flex-wrap gap-4 mb-4">
+//         <h4 className="text-xl font-medium text-gray-900 dark:text-gray-100">
+//           {t("msg.recycleBin")}
+//         </h4>
+//         <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2 w-full sm:w-auto">
+//           <Select
+//             value={filterType}
+//             onValueChange={(val) => {
+//               setFilterType(val as "subject" | "Date" | "letterName");
+//               setSearchQuery("");
+//               setFromDate("");
+//               setToDate("");
+//             }}
+//           >
+//             <SelectTrigger className="w-full sm:w-[200px]">
+//               <SelectValue placeholder={t("userRecord.Filter by")} />
+//             </SelectTrigger>
+//             <SelectContent>
+//               <SelectItem value="subject">{t("userRecord.Subject")}</SelectItem>
+//               <SelectItem value="Date">{t("userRecord.Date")}</SelectItem>
+//               <SelectItem value="letterName">
+//                 {t("viewDetail.fileName")}
+//               </SelectItem>
+//             </SelectContent>
+//           </Select>
+
+//           {filterType === "Date" ? (
+//             <div className="flex flex-col sm:flex-row gap-2">
+//               {lang.startsWith("en") ? (
+//                 <>
+//                   <label className="mt-2">From: </label>
+//                   <Input
+//                     type="date"
+//                     value={fromDate}
+//                     onChange={(e) => setFromDate(e.target.value)}
+//                     className="w-[150px]"
+//                   />
+//                   <label className="mt-2">To: </label>
+//                   <Input
+//                     type="date"
+//                     value={toDate}
+//                     onChange={(e) => setToDate(e.target.value)}
+//                     min={fromDate}
+//                     className="w-[150px]"
+//                   />
+//                 </>
+//               ) : (
+//                 <div className="flex flex-wrap items-center gap-3">
+//                   {/* From Date */}
+//                   <div className="relative">
+//                     <label className="font-medium mr-2">ከ:</label>
+//                     <input
+//                       type="text"
+//                       value={fromDateDisplay}
+//                       readOnly
+//                       onClick={() => setShowFromPicker((prev) => !prev)}
+//                       className="border border-gray-300 dark:border-gray-700 rounded-md px-2 py-1.5 w-40 bg-white dark:bg-gray-800 cursor-pointer"
+//                       placeholder="ቀን ይምረጡ"
+//                     />
+//                     {showFromPicker && (
+//                       <div className="absolute z-50 mt-1 bg-white dark:bg-gray-800 shadow-lg rounded-md p-2">
+//                         <EthiopianDatePickerModal
+//                           value={fromDate}
+//                           onChange={(ethiopianDate: string) => {
+//                             const gregorianDate =
+//                               convertEthiopianToGregorian(ethiopianDate);
+//                             const formatted = gregorianDate
+//                               .toISOString()
+//                               .split("T")[0]; // "YYYY-MM-DD"
+//                             setFromDate(formatted);
+//                             setFromDateDisplay(ethiopianDate);
+//                             setShowFromPicker(false);
+//                           }}
+//                         />
+//                       </div>
+//                     )}
+//                   </div>
+
+//                   {/* To Date */}
+//                   <div className="relative">
+//                     <label className="font-medium mr-2">እስከ:</label>
+//                     <input
+//                       type="text"
+//                       value={toDateDisplay}
+//                       readOnly
+//                       onClick={() => setShowToPicker((prev) => !prev)}
+//                       className="border border-gray-300 dark:border-gray-700 rounded-md px-2 py-1.5 w-40 bg-white dark:bg-gray-800 cursor-pointer"
+//                       placeholder="ቀን ይምረጡ"
+//                     />
+//                     {showToPicker && (
+//                       <div className="absolute z-50 mt-1 bg-white dark:bg-gray-800 shadow-lg rounded-md p-2">
+//                         <EthiopianDatePickerModal
+//                           value={fromDate}
+//                           onChange={(ethiopianDate: string) => {
+//                             const gregorianDate =
+//                               convertEthiopianToGregorian(ethiopianDate);
+//                             const formatted = gregorianDate
+//                               .toISOString()
+//                               .split("T")[0]; // "YYYY-MM-DD"
+//                             setToDate(formatted);
+//                             setToDateDisplay(ethiopianDate);
+//                             setShowFromPicker(false);
+//                           }}
+//                         />
+//                       </div>
+//                     )}
+//                   </div>
+//                 </div>
+//               )}
+//             </div>
+//           ) : (
+//             <div className="relative w-full sm:w-[200px]">
+//               <Input
+//                 type="text"
+//                 className="pl-8"
+//                 placeholder={`${t(
+//                   "userRecord.Search"
+//                 )} ${filterType.toLowerCase()}`}
+//                 value={searchQuery}
+//                 onChange={(e) => setSearchQuery(e.target.value)}
+//               />
+//               <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500" />
+//             </div>
+//           )}
+//         </div>
+//       </div>
+//       {/* Table */}
+//       {loading ? (
+//         <Loader />
+//       ) : Error ? ( // delegated error first
+//         <div className="flex flex-col items-center justify-center h-full p-6 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+//           <h2 className="text-xl font-semibold text-red-700 dark:text-red-400">
+//             {t("msg.error")}
+//           </h2>
+//         </div>
+//       ) : Error ? ( // normal error
+//         <div className="flex flex-col items-center justify-center h-full p-6 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+//           <h2 className="text-xl font-semibold text-red-700 dark:text-red-400">
+//             {t("msg.error")}
+//           </h2>
+//         </div>
+//       ) : (
+//         <AdvancedTable
+//           columns={SoftDeleteColumns(refetch)} // ✅ Pass hook result
+//           data={recordParent || []}
+//           tableName="Soft Delete"
+//           toolBarPosition="right"
+//           itemCount={recordParentCount || 0}
+//           pageIndex={pageIndex}
+//           onPageChange={setPageIndex}
+//           nextFunction={() => setPageIndex(pageIndex + 1)}
+//           prevFunction={() => setPageIndex(Math.max(0, pageIndex - 1))}
+//           refresh={refetch}
+//         />
+//       )}
+//     </div>
+//   );
+// };
+
+// export default SoftDeleteRO;
+
+const SoftDeleteRO = () => {
+  return <></>;
+};
+export default SoftDeleteRO;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/softDeleteColumns.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/softDeleteColumns.tsx
new file mode 100644
index 000000000..add51bbbf
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/softDeleteColumns.tsx
@@ -0,0 +1,146 @@
+import { ColumnDef } from "@tanstack/react-table";
+
+import { IncomingRecordActions } from "./incomingRecordActions";
+import { CorrespondenceDto } from "@/record-management/dto/IncomingRecords/RecordOfficerIncoming";
+import { t } from "i18next";
+import i18n from "i18next";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+
+export const SoftDeleteColumns = (
+  refetch: () => void
+): ColumnDef<CorrespondenceDto>[] => [
+  {
+    accessorKey: "letterName",
+    header: () => t("viewDetail.fileName1"),
+    cell: ({ row }) => {
+      const letterName = row.original?.letterName || "-";
+
+      return (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="max-w-[200px] truncate cursor-help">
+                {letterName}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{letterName}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
+    },
+  },
+  {
+    accessorKey: "referenceNumber",
+    header: () => t("userRecord.Reference Number"),
+    cell: ({ row }) => {
+      const referenceNumber = row.original?.referenceNumber || "-";
+
+      return (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="max-w-[200px] truncate cursor-help font-medium">
+                {referenceNumber}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{referenceNumber}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
+    },
+  },
+  {
+    accessorKey: "Letter_Number",
+    header: () => t("userRecord.Letter Number"),
+    cell: ({ row }) => {
+      const letterNumber = row.original?.letterNumber || "-";
+
+      return (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="max-w-[200px] truncate cursor-help">
+                {letterNumber}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{letterNumber}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
+    },
+  },
+  {
+    accessorKey: "Subject",
+    header: () => t("userRecord.Subject"),
+    cell: ({ row }) => {
+      const subject = row.original.content[0]?.subject || "-";
+
+      return (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="max-w-[200px] truncate cursor-help">
+                {subject}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{subject}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
+    },
+  },
+  {
+    accessorKey: "submittedDate",
+    header: () => t("userRecord.Date"),
+    cell: ({ row }) => {
+      const record = row.original;
+
+      const isAmharic = i18n.language === "am";
+      const amharicDate = record.amharicCreatedAt;
+      const submittedDate = record.createdAt;
+
+      if (isAmharic && amharicDate) {
+        return <div>{amharicDate}</div>;
+      }
+
+      const formattedDate = submittedDate
+        ? new Date(submittedDate).toLocaleDateString(i18n.language, {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+            hour: "numeric",
+            minute: "numeric",
+          })
+        : "-";
+
+      return <div>{formattedDate}</div>;
+    },
+  },
+  {
+    id: "Actions",
+    header: () => t("userRecord.Actions"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      return (
+        <IncomingRecordActions
+          rowData={rowData as CorrespondenceDto}
+          refetchTable={refetch}
+          type="softDelete"
+        />
+      );
+    },
+  },
+];
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/viewIncoming.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/viewIncoming.tsx
new file mode 100644
index 000000000..760382669
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/incomingRecords/viewIncoming.tsx
@@ -0,0 +1,24 @@
+import { useParams, useSearchParams } from "react-router-dom";
+import LetterViewer from "../../common/letterViewer";
+
+const RecordOfficerIncomingViewer = () => {
+  const { type } = useParams();
+  const [searchParams] = useSearchParams();
+  const pageIndex = searchParams.get("page") || 1;
+  const backURL =
+    type === "draft"
+      ? `/record-management/recordOfficer/incoming/?page=${pageIndex}`
+      : type === "externalNonSmart"
+        ? `/record-management/recordOfficer/incomingNonSmartExternal/?page=${pageIndex}`
+        : `/record-management/recordOfficer/incomingHistory/?page=${pageIndex}`;
+  return (
+    <LetterViewer
+      backurl={backURL}
+      type="incoming"
+      shouldFetchInstance={false}
+      actions="IncomingRecordDetailActions"
+    />
+  );
+};
+
+export default RecordOfficerIncomingViewer;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/outgoingRecords/outgoingRecordActions.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/outgoingRecords/outgoingRecordActions.tsx
new file mode 100644
index 000000000..ede65b755
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/outgoingRecords/outgoingRecordActions.tsx
@@ -0,0 +1,176 @@
+import { Button } from "@/shared/common/ui/button";
+
+import { useNavigate } from "react-router-dom";
+import { t } from "i18next";
+import { RecordOfficerRecordsDto } from "@/record-management/dto/recordOfficer/recordOfficerRecordDto";
+import { ReplyModal } from "@/record-management/common/ReplyModal";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import { EllipsisVertical, Lock, Send, Unlock } from "lucide-react";
+import { useState } from "react";
+import { useOutgoingRecords } from "@/record-management/components/hooks/useOutgoingRecords";
+
+import { useQueryClient } from "@tanstack/react-query";
+
+interface OutgoingRecordActionsProps {
+  rowData: RecordOfficerRecordsDto;
+  pageIndex: number;
+}
+
+export function OutgoingRecordActions({
+  rowData,
+  pageIndex,
+}: OutgoingRecordActionsProps) {
+  console.log("rowData", rowData);
+  const [isReplyOpen, setIsReplyOpen] = useState(false);
+  const [isLockConfirmationOpen, setIsLockConfirmationOpen] = useState(false);
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { makeRecordLocked, isLocking } = useOutgoingRecords();
+  const isLocked = rowData?.isLocked ?? false;
+
+  const handleView = () => {
+    if (rowData.id) {
+      navigate(`/record-management/view/${rowData.id}/?page=${pageIndex}`);
+    }
+  };
+  const handleLockRecord = () => {
+    if (!rowData?.id) return;
+    setIsLockConfirmationOpen(false);
+    makeRecordLocked({
+      recordId: rowData.id,
+      isLocked: !isLocked,
+    });
+  };
+
+  const refreshAfterReply = () => {
+    queryClient.invalidateQueries({
+      queryKey: ["record-instance", rowData.id],
+    });
+    queryClient.invalidateQueries({ queryKey: ["record", rowData.id] });
+  };
+
+  return (
+    <>
+      <div className="flex items-center justify-center gap-2">
+        <Button variant={"viewDetail"} onClick={() => handleView()}>
+          {t("userIncoming.View Detail")}
+        </Button>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              className="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
+            >
+              <EllipsisVertical className="h-4 w-4" />
+              <span className="sr-only">
+                {t(
+                  "userIncomingretun.Open actions menu",
+                  "Open actions menu",
+                )}
+              </span>
+            </Button>
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent
+            align="end"
+            className="w-[200px]"
+            onCloseAutoFocus={(e) => e.preventDefault()}
+          >
+            <DropdownMenuLabel>
+              {t("userIncomingretun.Actions", "Actions")}
+            </DropdownMenuLabel>
+
+            <DropdownMenuItem
+              className="cursor-pointer hover:!text-primary-700 !bg-transparent !transition-colors duration-200"
+              disabled={isLocking}
+              onSelect={() => setIsLockConfirmationOpen(true)}
+            >
+              {isLocked ? (
+                <Unlock className="mr-2 h-4 w-4 transition-colors duration-200" />
+              ) : (
+                <Lock className="mr-2 h-4 w-4 transition-colors duration-200" />
+              )}
+              {isLocked
+                ? t("userIncoming.UnlockRecord", "Unlock Record")
+                : t("userIncoming.LockRecord", "Lock Record")}
+            </DropdownMenuItem>
+
+            {rowData.recordTypeKey === "external" && (
+              <DropdownMenuItem
+                className="cursor-pointer hover:!text-primary-700 !bg-transparent !transition-colors duration-200"
+                onClick={() => setIsReplyOpen(true)}
+              >
+                <Send className="mr-2 h-4 w-4 transition-colors duration-200" />
+                {t("common.addReply", "Add Reply")}
+              </DropdownMenuItem>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <AlertDialog
+        open={isLockConfirmationOpen}
+        onOpenChange={setIsLockConfirmationOpen}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {isLocked
+                ? t("userIncoming.ConfirmUnlockRecord", "Unlock record?")
+                : t("userIncoming.ConfirmLockRecord", "Lock record?")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {isLocked
+                ? t(
+                    "userIncoming.ConfirmUnlockRecordDescription",
+                    "Are you sure you want to unlock this record?",
+                  )
+                : t(
+                    "userIncoming.ConfirmLockRecordDescription",
+                    "Are you sure you want to lock this record?",
+                  )}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isLocking}>
+              {t("common.Cancel", "Cancel")}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              disabled={isLocking}
+              onClick={handleLockRecord}
+            >
+              {isLocked
+                ? t("userIncoming.UnlockRecord", "Unlock Record")
+                : t("userIncoming.LockRecord", "Lock Record")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {rowData.id && (
+        <ReplyModal
+          isOpen={isReplyOpen}
+          onClose={() => setIsReplyOpen(false)}
+          recordId={rowData.id}
+          onSuccess={refreshAfterReply}
+        />
+      )}
+    </>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/outgoingRecords/outgoingRecords.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/outgoingRecords/outgoingRecords.tsx
new file mode 100644
index 000000000..3249f2635
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/outgoingRecords/outgoingRecords.tsx
@@ -0,0 +1,191 @@
+import { useEffect, useMemo, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+import { OutgoingRecordsColumns } from "./outgoingRecordsColumns";
+import { useOutgoingRecords } from "@/record-management/components/hooks/useOutgoingRecords";
+import Loader from "../../../components/Loader/loader";
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import {
+  CombinedFilterBar,
+  CombinedFilterField,
+} from "@/shared/components/filters/CombinedFilterBar";
+import { useCombinedFilters } from "@/shared/hooks/useCombinedFilters";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { OutgoingRecordQueryParams } from "@/record-management/services/api/recordOfficerService";
+import { cleanFilterParams, FilterParams } from "@/shared/utils/filterParams";
+import { cn } from "@/shared/common/ui/fileUploader/utils";
+
+const OutgoingRecords = () => {
+  const pageSize = 10;
+  const { t } = useTranslation();
+  const localizedName = useLocalizedName();
+  const combinedFilters = useCombinedFilters<FilterParams>();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const urlPage = Number(searchParams.get("page") || 1);
+  const [pageIndex, setPageIndex] = useState(urlPage - 1);
+  const [lettertypes, setLettertypes] = useState("All");
+  const [liveSearch, setLiveSearch] = useState<{
+    key: string;
+    value: string;
+  } | null>(null);
+  const columns = useMemo(
+    () => OutgoingRecordsColumns(localizedName, pageIndex + 1),
+    [localizedName, pageIndex],
+  );
+
+  const filterFields = useMemo<CombinedFilterField[]>(
+    () => [
+      {
+        key: "referenceNumber",
+        label: t("userRecord.Reference Number"),
+        type: "text",
+      },
+      { key: "receiver", label: t("userRecord.To"), type: "text" },
+      {
+        key: "sendingPosition",
+        label: t("userIncoming.Sending Department"),
+        type: "text",
+      },
+      { key: "subject", label: t("userIncoming.Subject"), type: "text" },
+      {
+        key: "dispatchedBy",
+        label: t("userIncoming.ConvertedBy"),
+        type: "text",
+      },
+      {
+        key: "dispatchedDate",
+        label: t("userRecord.Date"),
+        type: "dateRange",
+        fromKey: "fromDispatchedDate",
+        toKey: "toDispatchedDate",
+      },
+    ],
+    [t],
+  );
+
+  const filterParams = useMemo(() => {
+    const cleaned = cleanFilterParams({
+      skip: pageIndex * pageSize,
+      take: pageSize,
+      orderBy: "dispatchedDate:DESC,createdAt:DESC",
+      recordTypeKey: lettertypes === "All" ? undefined : lettertypes,
+      ...combinedFilters.filters,
+    }) as OutgoingRecordQueryParams;
+
+    return liveSearch
+      ? { ...cleaned, [liveSearch.key]: liveSearch.value }
+      : cleaned;
+  }, [pageIndex, lettertypes, combinedFilters.filters, liveSearch]);
+
+  const { recordsResponse, isLoading, isError, refetch } =
+    useOutgoingRecords(filterParams);
+
+  const handlePageChange = (newPage: number) => {
+    setPageIndex(newPage);
+  };
+
+  const handlePageChangeInc = () => {
+    const newPage = pageIndex + 1;
+    setPageIndex(newPage);
+
+    setSearchParams((prev) => {
+      prev.set("page", newPage.toString());
+      return prev;
+    });
+  };
+  const handleLiveSearch = (key: string, value: string) => {
+    if (!key || !value) {
+      setLiveSearch(null);
+      return;
+    }
+    setLiveSearch({ key, value });
+    setPageIndex(0);
+  };
+  const totalPages = recordsResponse?.count
+    ? Math.ceil(recordsResponse?.count / pageSize)
+    : 1;
+
+  useEffect(() => {
+    if (!recordsResponse?.count) return;
+
+    let newPage = pageIndex + 1;
+
+    if (newPage > totalPages) {
+      newPage = 1;
+      setPageIndex(0);
+    }
+
+    setSearchParams((prev) => {
+      const params = new URLSearchParams(prev);
+      params.set("page", newPage.toString());
+      return params;
+    });
+  }, [pageIndex, totalPages, setSearchParams, recordsResponse?.count]);
+  const recordTypes = useMemo(
+    () => [
+      { value: "All", label: t("userRecord.All") },
+      { value: "external", label: t("nav.external") },
+      { value: "internal", label: t("nav.internal") },
+    ],
+    [t],
+  );
+  return (
+    <div className="w-full mx-auto py-6 space-y-6">
+      <div className="flex flex-col sm:flex-row justify-between items-start gap-4 w-full">
+        <h4 className="text-xl font-medium mt-2">
+          {t("userIncoming.Letters")}
+        </h4>
+
+        <CombinedFilterBar
+          fields={filterFields}
+          filters={combinedFilters.filters}
+          setFilter={combinedFilters.setFilter}
+          setFilters={combinedFilters.setFilters}
+          removeFilter={combinedFilters.removeFilter}
+          removeFilters={combinedFilters.removeFilters}
+          onFilterChange={() => setPageIndex(0)}
+          onLiveSearch={handleLiveSearch}
+        />
+      </div>
+      <div className="flex flex-wrap gap-1 sm:gap-1 md:gap-2">
+        {recordTypes.map((item) => (
+          <button
+            key={item.value}
+            onClick={() => setLettertypes(item.value)}
+            className={cn(
+              "flex items-center justify-center gap-1 sm:gap-2 text-base base:text-base border min-w-[90px] sm:min-w-[120px] md:min-w-[180px] rounded-md px-2 py-1.5 relative transition-colors cursor-pointer",
+              lettertypes === item.value
+                ? "text-primary-700 dark:text-primary-foreground border-primary dark:border-primary bg-primary-50 dark:bg-primary/30"
+                : "text-gray-600 dark:text-gray-300 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700",
+            )}
+          >
+            {item.label}
+          </button>
+        ))}
+      </div>
+
+      {isError && <p>{t("userIncoming.Error loading records.")}</p>}
+      {isLoading ? (
+        <Loader />
+      ) : (
+        <AdvancedTable
+          columns={columns}
+          data={recordsResponse?.items || []}
+          tableName="Outgoing Records"
+          toolBarPosition="right"
+          hideToolbarFilter
+          extraToolbar={<div className="flex gap-2"></div>}
+          itemCount={recordsResponse?.count || 2}
+          pageIndex={pageIndex}
+          onPageChange={handlePageChange}
+          nextFunction={handlePageChangeInc}
+          prevFunction={() => handlePageChange(Math.max(pageIndex - 1, 0))}
+          refresh={refetch}
+        />
+      )}
+    </div>
+  );
+};
+
+export default OutgoingRecords;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/outgoingRecords/outgoingRecordsColumns.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/outgoingRecords/outgoingRecordsColumns.tsx
new file mode 100644
index 000000000..cd52817fa
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/outgoingRecords/outgoingRecordsColumns.tsx
@@ -0,0 +1,226 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { OutgoingRecordActions } from "./outgoingRecordActions";
+import { t } from "i18next";
+import { concat } from "lodash";
+import { RecordDto } from "@/record-management/dto/userRecords/userRecordsDto";
+import { RecordOfficerRecordsDto } from "@/record-management/dto/recordOfficer/recordOfficerRecordDto";
+import i18n from "i18next";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+
+/**
+ * OutgoingRecordsColumns
+ * @param localizedName - function to translate multilingual names
+ */
+export const OutgoingRecordsColumns = (
+  localizedName: (name?: { am: string; en: string }) => string,
+  pageNo: number,
+): ColumnDef<RecordDto>[] => {
+  return [
+    {
+      accessorKey: "letterName",
+      header: () => t("viewDetail.fileName"),
+      cell: ({ row }) => {
+        const reference = row.getValue("letterName") as string;
+        return <div className="font-medium">{reference}</div>;
+      },
+      enableHiding: true,
+    },
+    {
+      accessorKey: "referenceNumber",
+      header: () => t("userRecord.Reference Number"),
+      cell: ({ row }) => {
+        const reference = row.getValue("referenceNumber") as string;
+        return <div className="font-medium">{reference}</div>;
+      },
+      enableHiding: true,
+    },
+
+    {
+      accessorKey: "To",
+      header: () => t("userIncoming.To"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+
+        if (["internal", "internal_memo"].includes(rowData.recordTypeKey)) {
+          const positions =
+            rowData.content?.flatMap(
+              (item: any) =>
+                item.receiverPositions?.map((rp: any) =>
+                  localizedName(rp.position?.name),
+                ) || [],
+            ) || [];
+
+          const employees =
+            rowData.content?.flatMap(
+              (item: any) =>
+                item.receiverEmployees?.map((rp: any) =>
+                  localizedName(rp.employeePosition?.employee?.name),
+                ) || [],
+            ) || [];
+
+          const internalReceivers = [...positions, ...employees].filter(
+            Boolean,
+          );
+
+          return internalReceivers.length > 0 ? (
+            <div className="space-y-1">
+              {internalReceivers.map((value: string, idx: number) => (
+                <div key={idx}>{value}</div>
+              ))}
+            </div>
+          ) : (
+            <div>__</div>
+          );
+        }
+
+        if (rowData.recordTypeKey === "external") {
+          const receivingUnits =
+            rowData.receivingUnits?.map((unitItem: any) =>
+              localizedName(unitItem.unit?.name),
+            ) || [];
+
+          const nonSmartOffices =
+            rowData.content?.[0]?.nonSmartReceivers?.map(
+              (unitItem: any) => unitItem.name || "N/A",
+            ) || [];
+          const externalReceivers = concat(
+            receivingUnits,
+            nonSmartOffices,
+          ).filter(Boolean);
+
+          return externalReceivers.length > 0 ? (
+            <div className="space-y-1">
+              {externalReceivers.map((unit: string, idx: number) => (
+                <div key={idx}>{unit}</div>
+              ))}
+            </div>
+          ) : (
+            <div>__</div>
+          );
+        }
+
+        return <div>__</div>;
+      },
+      enableHiding: true,
+    },
+
+    {
+      accessorKey: "Sending_Department",
+      header: () => t("userIncoming.Sending Department"),
+      cell: ({ row }) => {
+        const department = localizedName(
+          row.original?.initiator?.position?.name,
+        );
+        return (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div className="max-w-[200px] truncate cursor-help">
+                  {department}
+                </div>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{department}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        );
+      },
+      enableHiding: true,
+    },
+
+    {
+      accessorKey: "dispatchedBy",
+      header: () => t("userIncoming.ConvertedBy"),
+      cell: ({ row }) => {
+        const name =
+          row.original?.outgoingInstances?.[0]?.dispatchedBy?.employee?.name;
+        const localized = localizedName(name);
+        return (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div className="max-w-[200px] truncate cursor-help">
+                  {localized}
+                </div>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{localized}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        );
+      },
+    },
+
+    {
+      accessorKey: "subject",
+      header: () => t("userIncoming.Subject"),
+      cell: ({ row }) => {
+        const subject = row.original.content?.[0]?.subject;
+        return (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div className="max-w-[200px] truncate cursor-help">
+                  {subject}
+                </div>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{subject}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        );
+      },
+      enableHiding: true,
+    },
+
+    {
+      accessorKey: "submittedDate",
+      header: () => t("userRecord.Date"),
+      cell: ({ row }) => {
+        const record = row.original;
+
+        const isAmharic = i18n.language === "am";
+        const amharicDate = record.amharicDispatchedDate;
+        const submittedDate = record.dispatchedDate;
+
+        if (isAmharic && amharicDate) {
+          return <div>{amharicDate}</div>;
+        }
+
+        const formattedDate = submittedDate
+          ? new Date(submittedDate).toLocaleDateString(i18n.language, {
+              year: "numeric",
+              month: "short",
+              day: "numeric",
+              hour: "numeric",
+              minute: "numeric",
+            })
+          : "-";
+
+        return <div>{formattedDate}</div>;
+      },
+    },
+    {
+      id: "Actions",
+      accessorKey: "Actions",
+      header: () => t("userIncoming.Actions"),
+      cell: ({ row }) => {
+        return (
+          <OutgoingRecordActions
+            rowData={row.original as unknown as RecordOfficerRecordsDto}
+            pageIndex={pageNo}
+          />
+        );
+      },
+      enableHiding: true,
+    },
+  ];
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/outgoingRecords/outgoingview.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/outgoingRecords/outgoingview.tsx
new file mode 100644
index 000000000..d1fd57696
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/outgoingRecords/outgoingview.tsx
@@ -0,0 +1,26 @@
+import { useOutgoingRecords } from "@/record-management/components/hooks/useOutgoingRecords";
+
+export interface IViewUserRecordsProps {
+  recordId: string;
+}
+
+const OutgoingViewRecord = ({ recordId }: IViewUserRecordsProps) => {
+  //enter the correct import path for useCCIncomingRecords
+  const { recordsResponse } = useOutgoingRecords();
+  const outgoingRecords = recordsResponse?.items || [];
+  const selectedRecord = outgoingRecords.find(
+    (outgoingRecords: { id: string }) => outgoingRecords.id === recordId
+  );
+
+  return (
+    selectedRecord && (
+      <div>
+        <div className="w-full my-2">
+          <h1>hellow</h1>
+        </div>
+      </div>
+    )
+  );
+};
+
+export default OutgoingViewRecord;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/outgoingRecords/view.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/outgoingRecords/view.tsx
new file mode 100644
index 000000000..1c51ed1e8
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/outgoingRecords/view.tsx
@@ -0,0 +1,17 @@
+import { useSearchParams } from "react-router-dom";
+import LetterViewer from "../../common/letterViewer";
+
+const OutgoingRecords = () => {
+  const [searchParams] = useSearchParams();
+  const pageIndex = searchParams.get("page") || 1;
+  return (
+    <LetterViewer
+      backurl={`/record-management/recordOfficer/outgoing/?page=${pageIndex}`}
+      type="outgoing"
+      shouldFetchInstance={false}
+      actions="OutgoingRecordActions"
+    />
+  );
+};
+
+export default OutgoingRecords;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/outgoingRecords/viewOutgoing.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/outgoingRecords/viewOutgoing.tsx
new file mode 100644
index 000000000..93c611a30
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/outgoingRecords/viewOutgoing.tsx
@@ -0,0 +1,25 @@
+import { useOutgoingRecords } from "@/record-management/components/hooks/useOutgoingRecords";
+
+export interface IViewUserRecordsProps {
+  recordId: string;
+}
+
+const ViewRecord = ({ recordId }: IViewUserRecordsProps) => {
+  //enter the correct import path for useCCIncomingRecords
+  const { recordsResponse } = useOutgoingRecords();
+  const outgoingRecords = recordsResponse?.items || [];
+  const selectedRecord = outgoingRecords.find(
+    (outgoingRecords: { id: string }) => outgoingRecords.id === recordId
+  );
+  return (
+    selectedRecord && (
+      <div>
+        <div className="w-full my-2">
+          <h1>hellow</h1>
+        </div>
+      </div>
+    )
+  );
+};
+
+export default ViewRecord;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/recordDetails/MovementPdfExportButton.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/recordDetails/MovementPdfExportButton.tsx
new file mode 100644
index 000000000..b63f04eea
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/recordDetails/MovementPdfExportButton.tsx
@@ -0,0 +1,682 @@
+import React, { useMemo, useState } from "react";
+import {
+  Document,
+  Font,
+  Image,
+  Page,
+  StyleSheet,
+  Text,
+  View,
+  pdf,
+} from "@react-pdf/renderer";
+import { FileDown, LoaderCircle } from "lucide-react";
+import { toast } from "sonner";
+
+import notoEthiopic from "@/record-management/fonts/NotoSansEthiopic-Regular.ttf";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { Button } from "@/shared/common/ui/button";
+import { useTranslation } from "react-i18next";
+import type {
+  AssignmentApiResponse,
+  AssignmentMultipleUser,
+  LocalizedText,
+} from "@/record-management/dto/AssignementStep";
+
+interface MovementNode {
+  id: string;
+  routeType: "Sequential" | "Multiple";
+  taskStatus: string;
+  assigner: string;
+  assignee: string;
+  remark: string;
+  signature?: string;
+  teeter?: string;
+  children?: MovementNode[];
+}
+
+interface MovementPdfExportButtonProps {
+  recordTitle: string;
+  recordType: string;
+  subject: string;
+  createdDate: string;
+  referenceNumber?: string;
+  assignmentChain: AssignmentApiResponse[];
+  multipleAssignments?: AssignmentApiResponse[];
+  lang: string;
+}
+
+interface MovementTreeRow {
+  id: string;
+  level: number;
+  routeType: "Sequential" | "Multiple";
+  taskStatus: string;
+  assigner: string;
+  assignee: string;
+  remark: string;
+}
+
+interface PdfLabels {
+  assigner: string;
+  assignee: string;
+  status: string;
+  remark: string;
+  title: string;
+  empty: string;
+  exportPdf: string;
+  exporting: string;
+  page: string;
+  of: string;
+}
+
+Font.register({
+  family: "CustomFont",
+  fonts: [
+    {
+      src: notoEthiopic, // handles Amharic + English fallback
+    },
+  ],
+});
+const fallbackText = "N/A";
+
+const styles = StyleSheet.create({
+  page: {
+    paddingTop: 28,
+    paddingBottom: 32,
+    paddingHorizontal: 28,
+    fontSize: 10,
+    color: "#111827",
+    fontFamily: "CustomFont",
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: 700,
+    marginBottom: 6,
+  },
+  subtitle: {
+    fontSize: 10,
+    color: "#4B5563",
+    marginBottom: 16,
+  },
+  section: {
+    marginBottom: 16,
+    borderWidth: 1,
+    borderColor: "#E5E7EB",
+    borderStyle: "solid",
+    borderRadius: 6,
+    padding: 12,
+  },
+  sectionTitle: {
+    fontSize: 11,
+    fontWeight: 700,
+    color: "var(--primary-700, var(--primary))",
+    marginBottom: 8,
+  },
+  metaGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+  },
+  metaItem: {
+    width: "48%",
+    marginBottom: 8,
+    marginRight: "2%",
+  },
+  metaLabel: {
+    fontSize: 9,
+    color: "#6B7280",
+    marginBottom: 2,
+  },
+  metaValue: {
+    fontSize: 10,
+    fontWeight: 600,
+  },
+  legendRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 10,
+    gap: 8,
+  },
+  legendPill: {
+    borderRadius: 999,
+    borderWidth: 1,
+    borderColor: "#A7F3D0",
+    borderStyle: "solid",
+    backgroundColor: "#ECFDF5",
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    fontSize: 8.5,
+    color: "#065F46",
+  },
+  listContainer: {
+    borderWidth: 1,
+    borderColor: "#D1D5DB",
+    borderStyle: "solid",
+    borderRadius: 6,
+    padding: 10,
+  },
+  treeRow: {
+    borderBottomWidth: 1,
+    borderBottomColor: "#E5E7EB",
+    borderBottomStyle: "solid",
+    paddingTop: 8,
+    paddingBottom: 8,
+  },
+  treeRowLast: {
+    borderBottomWidth: 0,
+  },
+  treeHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 4,
+  },
+  treeMarker: {
+    width: 16,
+    height: 16,
+    borderRadius: 999,
+    textAlign: "center",
+    fontSize: 8,
+    paddingTop: 2,
+    marginRight: 6,
+    color: "#FFFFFF",
+    backgroundColor: "var(--primary)",
+  },
+  treeMarkerMultiple: {
+    backgroundColor: "#7C3AED",
+  },
+  treeTitle: {
+    fontSize: 10,
+    fontWeight: 700,
+    color: "#111827",
+  },
+  fieldRow: {
+    flexDirection: "row",
+    marginTop: 2,
+  },
+  fieldLabel: {
+    width: 72,
+    fontSize: 9,
+    color: "#6B7280",
+  },
+  fieldValue: {
+    flex: 1,
+    fontSize: 9.5,
+    color: "#111827",
+  },
+  emptyState: {
+    borderWidth: 1,
+    borderColor: "#E5E7EB",
+    borderStyle: "dashed",
+    borderRadius: 6,
+    padding: 18,
+    textAlign: "center",
+    color: "#6B7280",
+  },
+  footer: {
+    position: "absolute",
+    bottom: 14,
+    right: 28,
+    fontSize: 8,
+    color: "#6B7280",
+  },
+  treeNode: {
+    borderWidth: 1,
+    borderColor: "#D1D5DB",
+    borderRadius: 6,
+    padding: 8,
+    marginBottom: 6,
+  },
+  treeChildren: {
+    borderLeftWidth: 1,
+    borderLeftColor: "#9CA3AF",
+    marginLeft: 8,
+    paddingLeft: 8,
+  },
+  flowRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 8,
+  },
+  actorBlock: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: "#D1D5DB",
+    borderRadius: 6,
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+    backgroundColor: "#FFFFFF",
+  },
+  actorLabel: {
+    fontSize: 8,
+    color: "#6B7280",
+    marginBottom: 3,
+  },
+  actorValue: {
+    fontSize: 9.5,
+    color: "#111827",
+  },
+  flowArrow: {
+    marginHorizontal: 8,
+    fontSize: 12,
+    color: "#4B5563",
+  },
+  statusRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 6,
+  },
+  statusLabel: {
+    fontSize: 8,
+    color: "#6B7280",
+    marginRight: 6,
+  },
+  statusPill: {
+    borderWidth: 1,
+    borderColor: "#A7F3D0",
+    borderRadius: 999,
+    backgroundColor: "#ECFDF5",
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+  },
+  statusPillText: {
+    fontSize: 8.5,
+    color: "#065F46",
+  },
+  remarkRow: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    marginTop: 6,
+  },
+  remarkAssets: {
+    width: 88,
+    marginRight: 12,
+    flexShrink: 0,
+  },
+  remarkAssetImage: {
+    width: 80,
+    height: 80,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: "#D1D5DB",
+    backgroundColor: "#FFFFFF",
+    objectFit: "contain",
+    padding: 4,
+    marginBottom: 8,
+  },
+  remarkText: {
+    flex: 1,
+    fontSize: 9.5,
+    color: "#111827",
+  },
+  remarkLabel: {
+    fontSize: 8,
+    color: "#6B7280",
+    marginBottom: 3,
+  },
+});
+
+const formatStatus = (
+  value: string | null | undefined,
+  t: (...args: any[]) => string,
+) => {
+  if (!value) return fallbackText;
+
+  const formatted = value
+    .split("_")
+    .filter(Boolean)
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+
+  return t(`statusBar.${value}`, formatted);
+};
+
+const getLocalizedPersonName = (
+  value: unknown,
+  localizeName: (value?: LocalizedText) => string,
+) => {
+  if (typeof value === "string") {
+    return value;
+  }
+
+  if (value && typeof value === "object" && "am" in value) {
+    return localizeName(value as LocalizedText) || fallbackText;
+  }
+
+  return "";
+};
+
+const getAssignerText = (
+  assignment: AssignmentApiResponse,
+  localizeName: (value?: LocalizedText) => string,
+) => {
+  const person = getLocalizedPersonName(
+    assignment?.assigner?.employee?.name,
+    localizeName,
+  );
+  const position = getLocalizedPersonName(
+    assignment?.assigner?.position?.name,
+    localizeName,
+  );
+
+  if (person && position) return `${person} - ${position}`;
+  return person || position || fallbackText;
+};
+
+const getSequentialAssigneeText = (
+  assignment: AssignmentApiResponse,
+  isExternalOutgoing: boolean,
+  localizeName: (value?: LocalizedText) => string,
+) => {
+  const employeeName = getLocalizedPersonName(
+    assignment?.assignee?.employee?.name,
+    localizeName,
+  );
+  const positionName = getLocalizedPersonName(
+    assignment?.assigneePosition?.name,
+    localizeName,
+  );
+
+  if (
+    isExternalOutgoing &&
+    assignment?.assigneePosition?.role &&
+    assignment?.assigneePosition?.department
+  ) {
+    return `${assignment.assigneePosition.role}, ${assignment.assigneePosition.department}`;
+  }
+
+  if (employeeName && positionName) return `${employeeName} - ${positionName}`;
+  return employeeName || positionName || fallbackText;
+};
+
+const getMultipleAssigneeText = (
+  assignment: AssignmentApiResponse,
+  isExternalOutgoing: boolean,
+  localizeName: (value?: LocalizedText) => string,
+) => {
+  if (
+    !Array.isArray(assignment?.assignedToUsers) ||
+    assignment.assignedToUsers.length === 0
+  ) {
+    return fallbackText;
+  }
+
+  return assignment.assignedToUsers
+    .map((user: AssignmentMultipleUser) => {
+      if (isExternalOutgoing && user?.role && user?.department) {
+        return `${user.role}, ${user.department}`;
+      }
+
+      const name = getLocalizedPersonName(user?.name, localizeName);
+      return name || user?.department || fallbackText;
+    })
+    .join(", ");
+};
+
+const renderTree = (nodes: MovementNode[], labels: PdfLabels, level = 0) => {
+  return nodes.map((node) => {
+    return (
+      <View key={node.id} style={{ marginLeft: level * 12 }}>
+        <View
+          style={[
+            styles.treeNode,
+            {
+              backgroundColor:
+                node.routeType === "Multiple" ? "#F3E8FF" : "#ECFDF5",
+              borderColor:
+                node.routeType === "Multiple" ? "#7C3AED" : "var(--primary)",
+            },
+          ]}
+        >
+          <View style={styles.flowRow}>
+            <View style={styles.actorBlock}>
+              <Text style={styles.actorLabel}>{labels.assigner}</Text>
+              <Text style={styles.actorValue}>{node.assigner}</Text>
+            </View>
+            <Text style={styles.flowArrow}>-&gt;</Text>
+            <View style={styles.actorBlock}>
+              <Text style={styles.actorLabel}>{labels.assignee}</Text>
+              <Text style={styles.actorValue}>{node.assignee}</Text>
+            </View>
+          </View>
+
+          <View style={styles.statusRow}>
+            <Text style={styles.statusLabel}>{labels.status}</Text>
+            <View style={styles.statusPill}>
+              <Text style={styles.statusPillText}>{node.taskStatus}</Text>
+            </View>
+          </View>
+
+          <View style={styles.remarkRow}>
+            {(node.signature || node.teeter) && (
+              <View style={styles.remarkAssets}>
+                {node.signature && (
+                  <Image src={node.signature} style={styles.remarkAssetImage} />
+                )}
+                {node.teeter && (
+                  <Image src={node.teeter} style={styles.remarkAssetImage} />
+                )}
+              </View>
+            )}
+            <View style={styles.remarkText}>
+              <Text style={styles.remarkLabel}>{labels.remark}</Text>
+              <Text>{node.remark}</Text>
+            </View>
+          </View>
+        </View>
+
+        {node.children && node.children.length > 0 && (
+          <View style={styles.treeChildren}>
+            {renderTree(node.children, labels, level + 1)}
+          </View>
+        )}
+      </View>
+    );
+  });
+};
+const buildTree = ({
+  assignments,
+  routeType,
+  isExternalOutgoing,
+  localizeName,
+  t,
+}: {
+  assignments: AssignmentApiResponse[];
+  routeType: "Sequential" | "Multiple";
+  isExternalOutgoing: boolean;
+  localizeName: (value?: LocalizedText) => string;
+  t: (...args: any[]) => string;
+}): MovementNode[] => {
+  return assignments.map((assignment) => {
+    const node: MovementNode = {
+      id: assignment?.id || Math.random().toString(),
+      routeType,
+      taskStatus:
+        routeType === "Multiple" && Array.isArray(assignment?.assignedToUsers)
+          ? assignment.assignedToUsers
+              .map((u) => formatStatus(u?.status, t))
+              .join(", ")
+          : formatStatus(assignment?.status, t),
+      assigner: getAssignerText(assignment, localizeName),
+      assignee:
+        routeType === "Multiple"
+          ? getMultipleAssigneeText(
+              assignment,
+              isExternalOutgoing,
+              localizeName,
+            )
+          : getSequentialAssigneeText(
+              assignment,
+              isExternalOutgoing,
+              localizeName,
+            ),
+      remark: assignment?.comment || fallbackText,
+      children: [],
+      signature: assignment?.signature?.presigned,
+      teeter: assignment?.teeter?.presigned,
+    };
+
+    // ✅ sequential children
+    if (assignment.children?.length) {
+      node.children = buildTree({
+        assignments: assignment.children,
+        routeType,
+        isExternalOutgoing,
+        localizeName,
+        t,
+      });
+    }
+
+    return node;
+  });
+};
+
+const MovementSlipPdfDocument: React.FC<{
+  recordTitle: string;
+  recordType: string;
+  subject: string;
+  createdDate: string;
+  referenceNumber?: string;
+  rows: MovementTreeRow[];
+  labels: PdfLabels;
+}> = ({ recordTitle, rows, labels }) => {
+  return (
+    <Document title={`Movement Slip - ${recordTitle || "Record"}`}>
+      <Page size="A4" style={styles.page}>
+        <Text style={styles.title}>{labels.title}</Text>
+
+        {rows.length > 0 ? (
+          <View style={styles.section}>
+            <View style={styles.listContainer}>
+              {renderTree(rows as MovementNode[], labels)}
+            </View>
+          </View>
+        ) : (
+          <Text style={styles.emptyState}>{labels.empty}</Text>
+        )}
+
+        <Text
+          style={styles.footer}
+          render={({ pageNumber, totalPages }) =>
+            `${labels.page} ${pageNumber} ${labels.of} ${totalPages}`
+          }
+          fixed
+        />
+      </Page>
+    </Document>
+  );
+};
+
+const MovementPdfExportButton: React.FC<MovementPdfExportButtonProps> = ({
+  recordTitle,
+  recordType,
+  subject,
+  createdDate,
+  referenceNumber,
+  assignmentChain,
+  multipleAssignments = [],
+}) => {
+  const localizedName = useLocalizedName();
+  const { t } = useTranslation();
+  const [isExporting, setIsExporting] = useState(false);
+
+  const labels: PdfLabels = {
+    assigner: t("assignment.assignedBy"),
+    assignee: t("assignment.assignedTo"),
+    status: t("userIncoming.Status"),
+    remark: t("assignment.comment"),
+    title: t("assignment.assignmentFlow"),
+    empty: t("assignment.noAssignments"),
+    exportPdf: t("common.export", "Export PDF"),
+    exporting: t("common.exporting", "Exporting..."),
+    page: t("common.page", "Page"),
+    of: t("common.of", "of"),
+  };
+
+  const isExternalOutgoing = Boolean(
+    recordType === "External" && referenceNumber?.includes("outgoing"),
+  );
+
+  const translate = (...args: Parameters<typeof t>) => String(t(...args));
+
+  const tree = useMemo(() => {
+    const tFn = (key: string, defaultValue?: string) => t(key, defaultValue ?? key);
+    const base = buildTree({
+      assignments: assignmentChain,
+      routeType: "Sequential",
+      isExternalOutgoing,
+      localizeName: localizedName,
+      t: translate,
+    });
+
+    if (multipleAssignments.length) {
+      base.push(
+        ...buildTree({
+          assignments: multipleAssignments,
+          routeType: "Multiple",
+          isExternalOutgoing,
+          localizeName: localizedName,
+          t: translate,
+        }),
+      );
+    }
+
+    return base;
+  }, [
+    assignmentChain,
+    multipleAssignments,
+    isExternalOutgoing,
+    localizedName,
+    translate,
+  ]);
+
+  const handleExport = async () => {
+    try {
+      setIsExporting(true);
+
+      const blob = await pdf(
+        <MovementSlipPdfDocument
+          recordTitle={recordTitle}
+          recordType={recordType}
+          subject={subject}
+          createdDate={createdDate}
+          referenceNumber={referenceNumber}
+          rows={tree as MovementTreeRow[]}
+          labels={labels}
+        />,
+      ).toBlob();
+
+      const fileNameBase =
+        recordTitle?.trim().replace(/[<>:\"/\\|?*]+/g, "_") ||
+        "record-movement-slip";
+      const blobUrl = URL.createObjectURL(blob);
+      const anchor = document.createElement("a");
+      anchor.href = blobUrl;
+      anchor.download = `${fileNameBase}.pdf`;
+      document.body.appendChild(anchor);
+      anchor.click();
+      document.body.removeChild(anchor);
+      URL.revokeObjectURL(blobUrl);
+    } catch (error: any) {
+      toast.error(error?.message || "Failed to export movement PDF");
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      className="gap-2"
+      onClick={handleExport}
+      disabled={isExporting}
+    >
+      {isExporting ? (
+        <LoaderCircle className="h-4 w-4 animate-spin" />
+      ) : (
+        <FileDown className="h-4 w-4" />
+      )}
+      <span>{isExporting ? labels.exporting : labels.exportPdf}</span>
+    </Button>
+  );
+};
+
+export default MovementPdfExportButton;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/recordDetails/ParentAssignementContainer.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/recordDetails/ParentAssignementContainer.tsx
new file mode 100644
index 000000000..7398d49f2
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/recordDetails/ParentAssignementContainer.tsx
@@ -0,0 +1,68 @@
+import React from "react";
+import RecordAssignmentStats from "./RecordAssignmentStats";
+import RecordAssignmentView from "./RecordAssignmentView";
+import { useRecordAssignments } from "@/record-management/components/hooks/useRecordAssignment";
+import { useReport } from "../../hooks/useReport";
+
+interface ParentContainerProps {
+  recordId: string;
+  recordTitle: string;
+  recordType: string;
+  subject: string;
+  createdDate: string;
+  referenceNumber?: string;
+  showStat?: boolean;
+}
+
+export const ParentContainer: React.FC<ParentContainerProps> = ({
+  recordId,
+  recordTitle,
+  recordType,
+  subject,
+  createdDate,
+  referenceNumber,
+  showStat = false,
+}) => {
+  const {
+    data: assignments,
+    isLoading,
+    error,
+  } = useRecordAssignments(recordId);
+  if (isLoading)
+    return (
+      <div className="text-gray-600 dark:text-gray-400 p-4">
+        Loading assignments...
+      </div>
+    );
+  if (error)
+    return (
+      <div className="text-red-600 dark:text-red-400 p-4">
+        Error loading assignments
+      </div>
+    );
+  if (!assignments)
+    return (
+      <div className="text-gray-500 dark:text-gray-400 p-4">
+        No assignments found.
+      </div>
+    );
+  return (
+    <>
+      {showStat && <RecordAssignmentStats recordId={recordId} />}
+
+      <RecordAssignmentView
+        recordId={recordId}
+        recordTitle={recordTitle}
+        recordType={recordType}
+        subject={subject}
+        createdDate={createdDate}
+        referenceNumber={referenceNumber}
+        assignmentChain={assignments}
+        multipleAssignments={[]} // or split as you want
+        loading={isLoading}
+      />
+    </>
+  );
+};
+
+export default ParentContainer;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/recordDetails/RecordAssignmentStats.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/recordDetails/RecordAssignmentStats.tsx
new file mode 100644
index 000000000..bc1b08046
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/recordDetails/RecordAssignmentStats.tsx
@@ -0,0 +1,258 @@
+import React, { useMemo } from "react";
+import { Card, CardContent } from "@/shared/common/ui/card";
+import {
+  Clock,
+  Users,
+  CheckCircle2,
+  AlertCircle,
+  LucideIcon,
+  TrendingUp,
+  RefreshCw,
+  CircleX,
+  MessageSquareReply,
+} from "lucide-react";
+import { AssignmentApiResponse } from "@/record-management/dto/AssignementStep";
+import { useTranslation } from "react-i18next";
+import { cn } from "@/shared/lib/utils";
+import { useReport } from "../../hooks/useReport";
+
+interface RecordAssignmentStatsProps {
+  recordId: string;
+}
+
+const RecordAssignmentStats: React.FC<RecordAssignmentStatsProps> = ({
+  recordId,
+}) => {
+  const { t } = useTranslation();
+  const { report } = useReport(recordId);
+  const stats = useMemo(() => {
+    const reassignedSteps =
+      Number(report.find((s) => s.status === "re_assigned")?.count) || 0;
+
+    const acceptedSteps =
+      Number(report.find((s) => s.status === "accepted")?.count) || 0;
+    const pendingSteps =
+      Number(report.find((s) => s.status === "draft")?.count) || 0;
+    const repliedSteps =
+      Number(report.find((s) => s.status === "replied")?.count) || 0;
+    const rejectedSteps =
+      Number(report.find((s) => s.status === "rejected")?.count) || 0;
+
+    const totalAllocations =
+      reassignedSteps +
+      acceptedSteps +
+      pendingSteps +
+      rejectedSteps +
+      repliedSteps;
+    return {
+      totalAllocations,
+      reassignedAssignments: reassignedSteps,
+      acceptedAssignments: acceptedSteps,
+      pendingAssignments: pendingSteps,
+      rejectedAssigments: rejectedSteps,
+      repliedAssigments: repliedSteps,
+      completionRate:
+        totalAllocations > 0
+          ? Math.round(
+              ((acceptedSteps +
+                rejectedSteps +
+                reassignedSteps +
+                repliedSteps) /
+                totalAllocations) *
+                100,
+            )
+          : 0,
+      avgResponseTime: "N/A",
+    };
+  }, [report]);
+
+  interface StatItem {
+    label: string;
+    value: number | string;
+    icon: LucideIcon;
+    iconColor: string;
+    bgColor: string;
+    textColor?: string;
+    trend?: number;
+    description?: string;
+  }
+
+  const statsData: StatItem[] = [
+    {
+      label: t("statusBar.totalAllocations"),
+      value: stats.totalAllocations,
+      icon: Users,
+      iconColor: "text-blue-600",
+      bgColor: "bg-blue-50",
+      textColor: "text-blue-700",
+      description: t("msg.totalAllocations"),
+    },
+    {
+      label: t("statusBar.draft"),
+      value: stats.pendingAssignments,
+      icon: AlertCircle,
+      iconColor: "text-amber-600",
+      bgColor: "bg-amber-50",
+      textColor: "text-amber-700",
+      description: t("msg.draft"),
+    },
+    {
+      label: t("statusBar.Reassigned"),
+      value: stats.reassignedAssignments,
+      icon: RefreshCw,
+      iconColor: "text-purple-600",
+      bgColor: "bg-purple-50",
+      textColor: "text-purple-700",
+      description: t("msg.reassigned"),
+    },
+    {
+      label: t("statusBar.Accepted"),
+      value: stats.acceptedAssignments,
+      icon: CheckCircle2,
+      iconColor: "text-green-600",
+      bgColor: "bg-green-50",
+      textColor: "text-green-700",
+      description: t("msg.accepted"),
+    },
+    {
+      label: t("statusBar.replied"),
+      value: stats.repliedAssigments,
+      icon: MessageSquareReply,
+      iconColor: "text-green-600",
+      bgColor: "bg-green-50",
+      textColor: "text-green-700",
+      description: t("msg.replied"),
+    },
+    {
+      label: t("statusBar.Rejected"),
+      value: stats.rejectedAssigments,
+      icon: CircleX,
+      iconColor: "text-red-600",
+      bgColor: "bg-red-50",
+      textColor: "text-red-700",
+      description: t("msg.rejected"),
+    },
+    {
+      label: t("statusBar.completionRate"),
+      value: `${stats.completionRate}%`,
+      icon: TrendingUp,
+      iconColor: "text-green-800",
+      bgColor: "bg-green-50",
+      textColor: "text-green-900",
+      description: t("msg.completionRate"),
+    },
+  ];
+
+  return (
+    <Card className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200">
+      <CardContent className="p-6 overflow-x-auto md:overflow-visible dark:bg-gray-800">
+        <div className="flex items-center justify-between mb-6">
+          <div>
+            <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
+              {t("statusBar.assignmentStatistics")}
+            </h3>
+          </div>
+          <div className="hidden sm:flex items-center space-x-2 px-3 py-1.5 bg-gray-50 dark:bg-gray-700 rounded-lg">
+            <Clock className="h-4 w-4 text-gray-400 dark:text-gray-500" />
+            <span className="text-sm text-gray-600 dark:text-gray-300">
+              {t("dashboard.lastUpdated")}:{" "}
+              {new Date().toLocaleString(undefined, {
+                dateStyle: "medium",
+                timeStyle: "short",
+              })}
+            </span>
+          </div>
+        </div>
+
+        {/* Grid layout for better responsiveness */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {statsData.map((stat, idx) => (
+            <div
+              key={idx}
+              className={cn(
+                "group relative p-4 rounded-lg border border-gray-100 dark:border-gray-700 transition-all duration-200",
+                "hover:border-gray-200 dark:hover:border-gray-600 hover:shadow-md bg-white dark:bg-gray-800",
+              )}
+            >
+              <div className="flex items-start justify-between">
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-1 truncate">
+                    {stat.label}
+                  </p>
+                  <p
+                    className={cn(
+                      "text-2xl font-bold truncate",
+                      stat.textColor,
+                      "dark:text-gray-200",
+                    )}
+                  >
+                    {stat.value}
+                  </p>
+                  {stat.description && (
+                    <p className="text-xs text-gray-400 dark:text-gray-500 mt-2 line-clamp-2">
+                      {stat.description}
+                    </p>
+                  )}
+                </div>
+                <div
+                  className={cn(
+                    "p-2 rounded-lg transition-colors duration-200",
+                    stat.bgColor,
+                    "dark:bg-opacity-20",
+                    "group-hover:bg-opacity-80",
+                  )}
+                >
+                  <stat.icon
+                    className={cn("h-5 w-5", stat.iconColor, "dark:opacity-80")}
+                  />
+                </div>
+              </div>
+
+              {/* Progress bar for completion rate */}
+              {stat.label === t("statusBar.completionRate") ? (
+                <div className="mt-3">
+                  <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
+                    <div
+                      className="bg-green-500 dark:bg-green-400 h-1.5 rounded-full transition-all duration-500"
+                      style={{ width: `${stats.completionRate}%` }}
+                    />
+                  </div>
+                </div>
+              ) : (
+                <div className="mt-3">
+                  <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5"></div>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+
+        {/* Summary section */}
+        <div className="mt-6 pt-4 border-t border-gray-100 dark:border-gray-700">
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <div className="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
+              <div className="flex items-center space-x-1">
+                <div className="w-2 h-2 bg-green-500 dark:bg-green-400 rounded-full"></div>
+                <span>
+                  {t("assignment.onTrack")}:{" "}
+                  {stats.acceptedAssignments +
+                    stats.repliedAssigments +
+                    stats.reassignedAssignments +
+                    stats.rejectedAssigments}
+                </span>
+              </div>
+              <div className="flex items-center space-x-1">
+                <div className="w-2 h-2 bg-amber-500 dark:bg-amber-400 rounded-full"></div>
+                <span>
+                  {t("assignment.attentionNeeded")}: {stats.pendingAssignments}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default RecordAssignmentStats;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/recordDetails/RecordAssignmentView.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/recordDetails/RecordAssignmentView.tsx
new file mode 100644
index 000000000..40b3b1aac
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/recordDetails/RecordAssignmentView.tsx
@@ -0,0 +1,679 @@
+import React, { useState, useCallback, useEffect } from "react";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from "@/shared/common/ui/accordion";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+} from "@/shared/common/ui/card";
+import { Badge } from "@/shared/common/ui/badge";
+import {
+  Clock,
+  Users,
+  UserCircle,
+  ArrowRight,
+  Split,
+  ChevronDown,
+  ArrowDown,
+} from "lucide-react";
+import { cn } from "@/shared/common/ui/fileUploader/utils";
+import { renderStatus } from "@/record-management/utils/renderDetails";
+import { useTranslation } from "react-i18next";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import i18n from "@/i18n";
+import MovementPdfExportButton from "./MovementPdfExportButton";
+import type {
+  AssignmentApiResponse,
+  AssignmentMultipleUser,
+  LocalizedText,
+  AssignmentPosition,
+} from "@/record-management/dto/AssignementStep";
+import RemarkList from "@/record-management/common/RemarkList";
+
+export interface AssignmentItem {
+  type: "sequential" | "multiple";
+  data: AssignmentApiResponse;
+  date: number;
+  id: string;
+}
+
+interface RecordAssignmentViewProps {
+  recordId: string;
+  recordTitle: string;
+  recordType: string;
+  subject: string;
+  createdDate: string;
+  referenceNumber?: string;
+  assignmentChain: AssignmentApiResponse[];
+  multipleAssignments: AssignmentApiResponse[];
+  loading?: boolean;
+}
+
+const RecordAssignmentView: React.FC<RecordAssignmentViewProps> = ({
+  recordId,
+  recordTitle,
+  recordType,
+  subject,
+  createdDate,
+  referenceNumber,
+  assignmentChain,
+  multipleAssignments = [],
+  loading = false,
+}) => {
+  const [expandedItems, setExpandedItems] = useState<string[]>([]);
+  const { t } = useTranslation();
+  const localizedName = useLocalizedName() as (
+    value?: string | LocalizedText | null,
+  ) => string;
+  const lang = i18n.language;
+  const isExternalOutgoing =
+    recordType === "External" && referenceNumber?.includes("outgoing");
+
+  const getLocalizedText = (value?: string | LocalizedText | null) => {
+    if (!value) {
+      return "";
+    }
+
+    return typeof value === "string" ? value : localizedName(value) || "";
+  };
+
+  const getAssigneeDisplayText = (assignee?: AssignmentPosition | null) => {
+    if (!assignee) {
+      return "Unknown";
+    }
+    if (isExternalOutgoing && assignee.role && assignee.department) {
+      return `${assignee.role}, ${assignee.department}`;
+    }
+    if (typeof assignee.name === "object" && assignee.name !== null) {
+      return getLocalizedText(assignee.name) || "Unknown";
+    }
+    return assignee.name || "Unknown";
+  };
+
+  const getAssetUrl = (
+    asset?: { presigned?: string; url?: string | null } | null,
+  ) => asset?.presigned || asset?.url || "";
+
+  const renderRemarkSection = (assignment: AssignmentApiResponse) => {
+    const signatureUrl = getAssetUrl(assignment.signature);
+    const teeterUrl = getAssetUrl(assignment.teeter);
+    const hasVisuals = Boolean(signatureUrl || teeterUrl);
+    const hasComment = Boolean(assignment.comment);
+
+    if (!hasVisuals && !hasComment) {
+      return null;
+    }
+
+    return (
+      <div className="p-3 bg-primary/5 rounded-lg border border-primary/20">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-start">
+          {hasVisuals && (
+            <div className="flex shrink-0 flex-row gap-2 sm:w-28 sm:flex-col">
+              {signatureUrl && (
+                <img
+                  src={signatureUrl}
+                  alt="Signature"
+                  className="h-20 w-20 rounded-md border border-border/50 bg-background object-contain p-1"
+                />
+              )}
+              {teeterUrl && (
+                <img
+                  src={teeterUrl}
+                  alt="Teeter"
+                  className="h-20 w-20 rounded-md border border-border/50 bg-background object-contain p-1"
+                />
+              )}
+            </div>
+          )}
+
+          {hasComment && (
+            <p className="text-sm min-w-0">
+              <span className="font-semibold text-foreground">
+                {t("assignment.comment")}{" "}
+              </span>
+              <span className="text-muted-foreground">
+                {assignment.comment}
+              </span>
+            </p>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  const getAllAssignmentsInOrder = useCallback((): AssignmentItem[] => {
+    const flattenAssignments = (
+      assignments: AssignmentApiResponse[],
+      type: "sequential" | "multiple",
+    ): AssignmentItem[] => {
+      return assignments.flatMap((assignment) => {
+        const baseItem = {
+          type,
+          data: assignment,
+          date: new Date(assignment.createdAt).getTime(),
+          id: assignment.id,
+        };
+
+        if (assignment.children && assignment.children.length > 0) {
+          return [baseItem, ...flattenAssignments(assignment.children, type)];
+        }
+        return [baseItem];
+      });
+    };
+
+    const sequentialAssignments = flattenAssignments(
+      assignmentChain,
+      "sequential",
+    );
+    const multipleAssignmentsFlattened = flattenAssignments(
+      multipleAssignments,
+      "multiple",
+    );
+
+    return [...sequentialAssignments, ...multipleAssignmentsFlattened].sort(
+      (a, b) => a.date - b.date,
+    );
+  }, [assignmentChain, multipleAssignments]);
+
+  const allAssignments = getAllAssignmentsInOrder();
+
+  const rootAssignments = allAssignments.filter((item) => {
+    return (
+      !item.data.parentAssignmentId &&
+      !item.data.parentId &&
+      !item.data.previousStepId
+    );
+  });
+
+  const assignmentMap = new Map<string, AssignmentItem[]>();
+  allAssignments.forEach((item) => {
+    const parentId =
+      item.data.parentAssignmentId ||
+      item.data.parentId ||
+      item.data.previousStepId;
+    if (parentId) {
+      if (!assignmentMap.has(parentId)) {
+        assignmentMap.set(parentId, []);
+      }
+      assignmentMap.get(parentId)!.push(item);
+    }
+  });
+  const renderAssignmentTree = (item: AssignmentItem, index: number) => {
+    const hasChildren = assignmentMap.has(item.id);
+    const children = assignmentMap.get(item.id) || [];
+    const isExpanded = expandedItems.includes(item.id);
+    return (
+      <AccordionItem
+        value={item.id}
+        key={item.id}
+        className="rounded-lg mb-3 overflow-hidden border border-border/50 bg-card hover:border-border transition-all duration-200 hover:shadow-md">
+        <AccordionTrigger className="py-4 px-5 border border-border rounded-md hover:no-underline hover:bg-primary/10 transition-colors">
+          <div className="relative flex items-start gap-4 w-full pl-0">
+            <div
+              className={cn(
+                "relative z-10 h-10 w-10 rounded-full flex items-center justify-center text-sm font-bold aspect-square flex-shrink-0 transition-all duration-300",
+                item.type === "multiple"
+                  ? "bg-gradient-to-br from-purple-500 to-purple-600 text-white shadow-lg"
+                  : "bg-gradient-to-br from-primary-500 to-primary-600 text-white shadow-lg",
+              )}>
+              {item.type === "multiple" ? (
+                <Split className="h-5 w-5" />
+              ) : (
+                <span>{index + 1}</span>
+              )}
+            </div>
+
+            <div className="flex flex-col flex-1 min-w-0">
+              <div className="flex items-center gap-3 flex-wrap">
+                <span className="font-semibold text-foreground break-words whitespace-normal">
+                  {item.type === "sequential" ? (
+                    <>
+                      {item.data.assignee?.employee ? (
+                        <>
+                          {item.data.assignee?.employee?.name && (
+                            <span>
+                              {getLocalizedText(
+                                item.data.assignee.employee.name,
+                              )}
+                            </span>
+                          )}
+                          {item.data.assigneePosition && (
+                            <span className="text-muted-foreground font-normal">
+                              {" "}
+                              •{" "}
+                              {getAssigneeDisplayText(
+                                item.data.assigneePosition,
+                              )}
+                            </span>
+                          )}
+                          {!item.data.assigneePosition?.name &&
+                            !item.data.assignee?.employee?.name &&
+                            "Unknown"}
+                        </>
+                      ) : (
+                        <>
+                          {item.data.assigneePosition && (
+                            <span>
+                              {getAssigneeDisplayText(
+                                item.data.assigneePosition,
+                              )}
+                            </span>
+                          )}
+                          {!item.data.assigneePosition?.name && "Unknown"}
+                        </>
+                      )}
+                    </>
+                  ) : (
+                    `Multiple Recipients (${
+                      item.data.assignedToUsers?.length ?? 0
+                    })`
+                  )}
+                </span>
+
+                {item.type === "sequential" &&
+                  (() => {
+                    const formattedStatus = item.data.status
+                      .split("_")
+                      .map(
+                        (word: string) =>
+                          word.charAt(0).toUpperCase() + word.slice(1),
+                      )
+                      .join(" ");
+
+                    return (
+                      <span>
+                        {renderStatus(formattedStatus, formattedStatus)}
+                      </span>
+                    );
+                  })()}
+              </div>
+
+              <span className="text-xs text-muted-foreground mt-1 flex items-center gap-1">
+                <Clock className="h-3 w-3" />
+                {lang === "en"
+                  ? (() => {
+                      const date = item.data.createdAt;
+                      return date
+                        ? new Date(date).toLocaleString("en-US", {
+                            year: "numeric",
+                            month: "short",
+                            day: "numeric",
+                            hour: "2-digit",
+                            minute: "2-digit",
+                          })
+                        : "—";
+                    })()
+                  : item.data.amharicCreatedAt || "—"}
+              </span>
+
+              {hasChildren && (
+                <div className="mt-2 text-xs font-medium text-primary bg-primary/10 rounded-full px-2 py-1 inline-block w-fit">
+                  +{children.length} {t("assignment.next")}
+                </div>
+              )}
+            </div>
+          </div>
+        </AccordionTrigger>
+
+        <AccordionContent className="px-5 py-4 bg-secondary/20 border-t border-border/30">
+          <div className="space-y-5">
+            {item.type === "sequential" ? (
+              <>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 items-start">
+                  {/* Assigned By */}
+                  <div className="flex flex-col gap-2 border border-gray-300 dark:border-gray-700 rounded-md p-3 dark:bg-gray-800">
+                    <span className="text-xs font-semibold text-muted-foreground dark:text-gray-400 uppercase tracking-wide">
+                      {t("assignment.assignedBy")}
+                    </span>
+                    <div className="flex items-start gap-3 p-3 bg-primary-50 dark:bg-primary-900/30 rounded-lg border border-primary-200 dark:border-primary-800">
+                      <UserCircle className="h-5 w-5 text-primary dark:text-primary-400 flex-shrink-0 mt-0.5" />
+                      <div className="min-w-0">
+                        <p className="font-semibold text-sm text-foreground dark:text-gray-200">
+                          {item.data.assigner?.employee?.name && (
+                            <span className="block sm:inline">
+                              {getLocalizedText(
+                                item.data.assigner.employee.name,
+                              )}
+                            </span>
+                          )}
+                          {item.data.assigner?.position?.name && (
+                            <span className="block sm:inline text-muted-foreground dark:text-gray-400 font-normal">
+                              {" "}
+                              •{" "}
+                              {getLocalizedText(
+                                item.data.assigner.position.name,
+                              )}
+                            </span>
+                          )}
+                          {!item.data.assigner?.position?.name &&
+                            !item.data.assigner?.employee?.name &&
+                            "Unknown"}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Arrow */}
+                  <div className="flex justify-center items-center md:pt-8">
+                    {/* Mobile: Down arrow */}
+                    <div className="flex md:hidden items-center gap-2 text-gray-700 dark:text-gray-300">
+                      <ArrowDown className="h-5 w-5 text-gray-700 dark:text-gray-300" />
+                    </div>
+
+                    {/* Desktop: Right arrow */}
+                    <div className="hidden md:flex items-center gap-2 text-gray-700 dark:text-gray-300">
+                      <div className="h-px w-4 bg-gray-700 dark:bg-gray-400" />
+                      <ArrowRight className="h-5 w-5 text-gray-700 dark:text-gray-300" />
+                      <div className="h-px w-4 bg-gray-700 dark:bg-gray-400" />
+                    </div>
+                  </div>
+
+                  {/* Assigned To */}
+                  <div className="flex flex-col gap-2 border border-gray-300 dark:border-gray-700 rounded-md p-3 dark:bg-gray-800">
+                    <span className="text-xs font-semibold text-muted-foreground dark:text-gray-400 uppercase tracking-wide">
+                      {t("assignment.assignedTo")}
+                    </span>
+                    <div className="flex items-start gap-3 p-3 bg-primary-50 dark:bg-primary-900/30 rounded-lg border border-primary-200 dark:border-primary-800">
+                      <UserCircle className="h-5 w-5 text-primary dark:text-primary-400 flex-shrink-0 mt-0.5" />
+                      <div className="min-w-0">
+                        {item.data.assignee?.employee ? (
+                          <>
+                            <p className="font-semibold text-sm text-foreground dark:text-gray-200">
+                              {item.data.assignee?.employee?.name && (
+                                <span className="block sm:inline">
+                                  {getLocalizedText(
+                                    item.data.assignee.employee.name,
+                                  )}
+                                </span>
+                              )}
+                              {item.data.assigneePosition && (
+                                <span className="block sm:inline text-muted-foreground dark:text-gray-400 font-normal">
+                                  {" "}
+                                  •{" "}
+                                  {getAssigneeDisplayText(
+                                    item.data.assigneePosition,
+                                  )}
+                                </span>
+                              )}
+                              {!item.data.assigneePosition?.name &&
+                                !item.data.assignee?.employee?.name &&
+                                "Unknown"}
+                            </p>
+                          </>
+                        ) : (
+                          <>
+                            <p className="font-semibold text-sm text-foreground dark:text-gray-200">
+                              {item.data.assigneePosition && (
+                                <span>
+                                  {getAssigneeDisplayText(
+                                    item.data.assigneePosition,
+                                  )}
+                                </span>
+                              )}
+                              {!item.data.assigneePosition?.name && "Unknown"}
+                            </p>
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Metadata */}
+                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 pt-2">
+                  <div className="flex flex-col gap-1 p-3 bg-card rounded-lg border border-border/50">
+                    <span className="text-xs text-muted-foreground font-medium">
+                      {t("assignment.assignedOn")}
+                    </span>
+                    <span className="text-sm font-semibold text-foreground">
+                      {lang === "en"
+                        ? (() => {
+                            const date = item.data.createdAt;
+                            return date
+                              ? new Date(date).toLocaleString("en-US", {
+                                  year: "numeric",
+                                  month: "short",
+                                  day: "numeric",
+                                  hour: "2-digit",
+                                  minute: "2-digit",
+                                })
+                              : "—";
+                          })()
+                        : item.data.amharicCreatedAt || "—"}
+                    </span>
+                  </div>
+                  <div className="flex flex-col gap-1 p-3 bg-card rounded-lg border border-border/50">
+                    <span className="text-xs text-muted-foreground font-medium">
+                      {t("assignment.assignedUsing")}
+                    </span>
+                    <span className="text-sm font-semibold text-foreground">
+                      {item.data.assignee?.employee?.name
+                        ? t("assignment.byName")
+                        : t("assignment.byDepartment")}
+                    </span>
+                  </div>
+                  {item.data.status !== "draft" && (
+                    <div className="flex flex-col gap-1 p-3 bg-card rounded-lg border border-border/50">
+                      <span className="text-xs text-muted-foreground font-medium">
+                        {t(`statusBar.${item.data.status}`) +
+                          " " +
+                          t(`userRecord.Date`)}
+                      </span>
+                      <span className="text-sm font-semibold text-foreground">
+                        {lang === "en"
+                          ? (() => {
+                              const date =
+                                item.data.respondedAt ||
+                                item.data.repliedAt ||
+                                item.data.reassignAt;
+                              return date
+                                ? new Date(date).toLocaleString("en-US", {
+                                    year: "numeric",
+                                    month: "short",
+                                    day: "numeric",
+                                    hour: "2-digit",
+                                    minute: "2-digit",
+                                  })
+                                : "—";
+                            })()
+                          : item.data.amharicRespondedAt ||
+                            item.data.amharicRepliedAt ||
+                            item.data.amharicReassignedAt ||
+                            "—"}
+                      </span>
+                    </div>
+                  )}
+                </div>
+
+                {renderRemarkSection(item.data)}
+                <RemarkList instanceIds={[item.data.id]} />
+              </>
+            ) : (
+              <>
+                <div className="flex flex-col gap-2">
+                  <span className="text-xs font-semibold text-muted-foreground dark:text-gray-400 uppercase tracking-wide">
+                    {t("assignment.assignedBy")}
+                  </span>
+                  <div className="flex items-start gap-3 p-3 bg-card dark:bg-gray-800 rounded-lg border border-border/50 dark:border-gray-700">
+                    <UserCircle className="h-5 w-5 text-primary dark:text-primary-400 flex-shrink-0 mt-0.5" />
+                    <div className="min-w-0">
+                      <p className="font-semibold text-sm text-foreground dark:text-gray-200">
+                        {item.data.assigner?.employee?.name &&
+                          getLocalizedText(item.data.assigner.employee.name)}
+                        {item.data.assigner?.position?.name && (
+                          <span className="text-muted-foreground dark:text-gray-400 font-normal">
+                            {" "}
+                            • {localizedName(item.data.assigner.position.name)}
+                          </span>
+                        )}
+                        {!item.data.assigner?.position?.name &&
+                          !item.data.assigner?.employee?.name &&
+                          "Unknown"}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Recipients Grid */}
+                <div className="flex flex-col gap-2">
+                  <span className="text-xs font-semibold text-muted-foreground dark:text-gray-400 uppercase tracking-wide">
+                    {t("assignment.assignedTo")}
+                  </span>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                    {item.data.assignedToUsers?.map(
+                      (user: AssignmentMultipleUser) => (
+                        <div
+                          key={user.id}
+                          className="flex gap-3 p-3 bg-card rounded-lg border border-border/50 hover:border-primary transition-colors">
+                          <UserCircle className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
+                          <div className="flex-1 min-w-0">
+                            <div className="flex justify-between items-start gap-2 mb-1">
+                              <p className="font-semibold text-sm text-foreground">
+                                {isExternalOutgoing &&
+                                user.role &&
+                                user.department
+                                  ? `${user.role}, ${user.department}`
+                                  : localizedName(user.name)}
+                              </p>
+                              <span className="flex-shrink-0">
+                                {renderStatus(
+                                  user.status || "Unknown",
+                                  user.status || "Unknown",
+                                )}
+                              </span>
+                            </div>
+
+                            {!isExternalOutgoing && user.department && (
+                              <p className="text-xs text-muted-foreground mb-1">
+                                {user.department}
+                              </p>
+                            )}
+
+                            {user.completedDate && (
+                              <p className="text-xs text-muted-foreground">
+                                {t("assignment.responded")}{" "}
+                                {new Date(
+                                  user.completedDate,
+                                ).toLocaleDateString()}
+                              </p>
+                            )}
+                          </div>
+                        </div>
+                      ),
+                    )}
+                  </div>
+                </div>
+
+                {renderRemarkSection(item.data)}
+              </>
+            )}
+          </div>
+
+          {hasChildren && (
+            <div className="mt-5 pt-5 border-t border-border/30">
+              <div className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-3">
+                {t("assignment.next")}
+              </div>
+              <div className="ml-4 pl-4 border-l-2 border-primary/30 space-y-3">
+                <Accordion
+                  type="multiple"
+                  value={expandedItems}
+                  onValueChange={setExpandedItems}>
+                  {children.map((child, childIndex) =>
+                    renderAssignmentTree(child, childIndex),
+                  )}
+                </Accordion>
+              </div>
+            </div>
+          )}
+        </AccordionContent>
+      </AccordionItem>
+    );
+  };
+
+  return (
+    <div className="space-y-6 w-full">
+      {(assignmentChain.length > 0 || multipleAssignments.length > 0) && (
+        <Card className="border-border/50 shadow-lg">
+          <CardHeader className="pb-4 border-b border-border/30">
+            <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+              <div className="flex items-center gap-3">
+                <div className="h-10 w-10 rounded-lg bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center">
+                  <Users className="h-5 w-5 text-white" />
+                </div>
+                <div>
+                  <CardTitle className="text-2xl font-bold">
+                    {t("assignment.assignmentFlow")}
+                  </CardTitle>
+                  <p className="text-sm text-muted-foreground mt-1">
+                    {rootAssignments.length} {t("assignment.assInProg")}
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex justify-start md:justify-end">
+                <MovementPdfExportButton
+                  recordTitle={recordTitle}
+                  recordType={recordType}
+                  subject={subject}
+                  createdDate={createdDate}
+                  referenceNumber={referenceNumber}
+                  assignmentChain={assignmentChain}
+                  multipleAssignments={multipleAssignments}
+                  lang={lang}
+                />
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent className="pt-6">
+            {loading ? (
+              <div className="flex flex-col gap-4">
+                {[1, 2, 3].map((i) => (
+                  <div key={i} className="animate-pulse">
+                    <div className="h-6 rounded w-1/4 mb-2 bg-muted"></div>
+                    <div className="h-20 rounded w-full bg-muted"></div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <Accordion
+                type="multiple"
+                className="space-y-0"
+                value={expandedItems}
+                onValueChange={setExpandedItems}>
+                {rootAssignments.map((assignment, index) =>
+                  renderAssignmentTree(assignment, index),
+                )}
+              </Accordion>
+            )}
+          </CardContent>
+        </Card>
+      )}
+
+      {!loading &&
+        assignmentChain.length === 0 &&
+        multipleAssignments.length === 0 && (
+          <Card className="border-border/50 border-dashed">
+            <CardContent className="py-12 text-center">
+              <div className="flex justify-center mb-4">
+                <div className="h-16 w-16 rounded-full bg-muted flex items-center justify-center">
+                  <Users className="h-8 w-8 text-muted-foreground/60" />
+                </div>
+              </div>
+              <p className="text-lg font-semibold text-foreground mb-2">
+                {t("assignment.noAssignments")}
+              </p>
+              <p className="text-sm text-muted-foreground">{t("msg.noMsg")}</p>
+            </CardContent>
+          </Card>
+        )}
+    </div>
+  );
+};
+
+export default RecordAssignmentView;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/recordDetails/RecordRemarksView.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/recordDetails/RecordRemarksView.tsx
new file mode 100644
index 000000000..38f04b610
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordOfficer/recordDetails/RecordRemarksView.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import WorkflowCommentHistory from "@/record-management/common/WorkflowCommentHistory";
+
+interface RecordRemarksViewProps {
+  recordId: string;
+  /** Kept for back-compat with existing callers; not consumed. */
+  error?: string;
+}
+
+const RecordRemarksView: React.FC<RecordRemarksViewProps> = ({ recordId }) => {
+  return <WorkflowCommentHistory recordId={recordId} />;
+};
+
+export default RecordRemarksView;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/recordVerification.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/recordVerification.tsx
new file mode 100644
index 000000000..93f859d92
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/recordVerification.tsx
@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from "react";
+import { Badge } from "@/shared/common/ui/badge";
+import { Card, CardContent } from "@/shared/common/ui/card";
+import { Separator } from "@/shared/common/ui/separator";
+import { RecordVerificationDto } from "../dto/userRecords/recordVerificationDto";
+import { verifyRecordById } from "../services/api/userRecordService";
+
+interface RecordVerificationProps {
+  recordId: string;
+}
+
+const Section = ({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) => (
+  <div className="mb-6">
+    <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">
+      {title}
+    </h3>
+    <div className="flex flex-wrap gap-2">{children}</div>
+  </div>
+);
+
+const RecordVerification: React.FC<RecordVerificationProps> = ({
+  recordId,
+}) => {
+  const [record, setRecord] = useState<RecordVerificationDto>();
+
+  useEffect(() => {
+    const load = async () => {
+      const response = await verifyRecordById(recordId);
+      setRecord(response);
+
+      // 🧠 Receivers
+    };
+
+    void load();
+  }, [recordId]);
+
+  if (!record) return null;
+
+  return (
+    <div className="max-w-4xl mx-auto px-6 py-10">
+      <Card className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 shadow-lg rounded-2xl">
+        <CardContent className="p-6">
+          <h2 className="text-2xl font-bold text-primary mb-6">
+            📄 Record Verification
+          </h2>
+
+          <Section title="Reference Number">
+            <Badge variant="outline" className="text-base px-3 py-1">
+              {record.referenceNumber || "N/A"}
+            </Badge>
+          </Section>
+
+          <Section title="Subject">
+            <p className="text-gray-700 dark:text-gray-300 font-medium text-base">
+              {record?.content?.[0]?.subject}
+            </p>
+          </Section>
+
+          <Section title="Sent Date">
+            <Badge className="bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200 px-3 py-1">
+              {record.dispatchedDate
+                ? new Date(record.dispatchedDate).toLocaleDateString()
+                : "Not Sent"}
+            </Badge>
+          </Section>
+
+          {/* <Section title="Initiator">
+            <Badge className="bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 px-3 py-1">
+              {record.initiator?.employee?.name?.am ||
+                record.initiator?.employee?.name?.en}
+            </Badge>
+          </Section> */}
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default RecordVerification;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/sectorReports/MonthlyActivitySection.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/sectorReports/MonthlyActivitySection.tsx
new file mode 100644
index 000000000..9c3f25566
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/sectorReports/MonthlyActivitySection.tsx
@@ -0,0 +1,165 @@
+import { Activity } from "lucide-react";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Legend,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import { LocalizedText, SectorRecordReport } from "./types";
+
+interface MonthlyActivitySectionProps {
+  reports: SectorRecordReport[];
+  getName: (name: LocalizedText) => string;
+}
+
+export function MonthlyActivitySection({
+  reports,
+  getName,
+}: MonthlyActivitySectionProps) {
+  const chartData = reports
+    .map((report) => ({
+      name: report.groupName
+        ? getName(report.groupName)
+        : getName(report.sectorName),
+      sector: getName(report.sectorName),
+      incoming: report.incoming.thisMonth,
+      outgoing: report.outgoing.thisMonth,
+    }))
+    .sort(
+      (a, b) =>
+        b.incoming + b.outgoing - (a.incoming + a.outgoing),
+    );
+
+  const monthlyIncoming = chartData.reduce(
+    (total, item) => total + item.incoming,
+    0,
+  );
+  const monthlyOutgoing = chartData.reduce(
+    (total, item) => total + item.outgoing,
+    0,
+  );
+  const monthlyTotal = monthlyIncoming + monthlyOutgoing;
+  const distribution = chartData.slice(0, 5).map((item) => ({
+    ...item,
+    share: monthlyTotal
+      ? Math.round(((item.incoming + item.outgoing) / monthlyTotal) * 100)
+      : 0,
+  }));
+  const chartWidth = Math.max(700, chartData.length * 140);
+
+  return (
+    <section className="overflow-hidden rounded-xl border bg-card shadow-sm">
+      <div className="flex items-center gap-3 border-b px-5 py-4">
+        <span className="rounded-lg bg-primary/10 p-2 text-primary">
+          <Activity className="size-5" />
+        </span>
+        <div>
+          <h2 className="font-semibold">Monthly activity</h2>
+          <p className="text-xs text-muted-foreground">
+            Incoming and outgoing records by sector or group this month
+          </p>
+        </div>
+      </div>
+
+      <div className="grid xl:grid-cols-[minmax(0,3fr)_minmax(230px,1fr)]">
+        <div className="border-b p-5 xl:border-b-0 xl:border-r">
+          <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
+            <div>
+              <h3 className="text-sm font-semibold">Activity comparison</h3>
+              <p className="text-xs text-muted-foreground">
+                Incoming vs outgoing records
+              </p>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Total: {monthlyTotal.toLocaleString()}
+            </p>
+        </div>
+        <div className="min-h-80 overflow-x-auto">
+          <div className="h-80" style={{ width: chartWidth }}>
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart
+              data={chartData}
+              margin={{ top: 8, right: 8, left: 0, bottom: 48 }}>
+              <CartesianGrid strokeDasharray="3 3" vertical={false} />
+              <XAxis
+                dataKey="name"
+                angle={-30}
+                textAnchor="end"
+                interval={0}
+                height={72}
+                tick={{ fontSize: 11 }}
+              />
+              <YAxis allowDecimals={false} />
+              <Tooltip
+                formatter={(value, name) => [
+                  Number(value ?? 0).toLocaleString(),
+                  String(name).toLowerCase() === "incoming"
+                    ? "Incoming"
+                    : "Outgoing",
+                ]}
+                labelFormatter={(label, payload) => {
+                  const sector = payload?.[0]?.payload?.sector;
+                  return sector && sector !== label
+                    ? `${sector} — ${label}`
+                    : label;
+                }}
+              />
+              <Legend verticalAlign="top" height={32} />
+              <Bar
+                dataKey="incoming"
+                name="Incoming"
+                fill="#10b981"
+                radius={[4, 4, 0, 0]}
+              />
+              <Bar
+                dataKey="outgoing"
+                name="Outgoing"
+                fill="#8b5cf6"
+                radius={[4, 4, 0, 0]}
+              />
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+        </div>
+
+        <aside className="p-5">
+          <h3 className="text-sm font-semibold">Sector distribution</h3>
+          <p className="mb-5 text-xs text-muted-foreground">
+            Share of monthly activity
+          </p>
+          <div className="space-y-5">
+            {distribution.map((item, index) => (
+              <div key={`${item.sector}-${item.name}`}>
+                <div className="mb-2 flex items-center gap-3">
+                  <span
+                    className="flex size-9 shrink-0 items-center justify-center rounded-md text-xs font-bold text-white"
+                    style={{
+                      backgroundColor: `hsl(158 64% ${26 + index * 8}%)`,
+                    }}>
+                    {item.share}%
+                  </span>
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-xs font-semibold uppercase">
+                      {item.name}
+                    </p>
+                    <div className="mt-2 h-1.5 overflow-hidden rounded-full bg-muted">
+                      <div
+                        className="h-full rounded-full bg-emerald-700"
+                        style={{ width: `${item.share}%` }}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </aside>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/sectorReports/RecordSummarySection.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/sectorReports/RecordSummarySection.tsx
new file mode 100644
index 000000000..a2bae892b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/sectorReports/RecordSummarySection.tsx
@@ -0,0 +1,64 @@
+import { ArrowDownToLine, ArrowUpFromLine } from "lucide-react";
+import { RecordPeriodTotals } from "./types";
+
+interface RecordSummarySectionProps {
+  direction: "incoming" | "outgoing";
+  totals: RecordPeriodTotals;
+  allTimeLabel?: string;
+}
+
+export function RecordSummarySection({
+  direction,
+  totals,
+  allTimeLabel = "All time",
+}: RecordSummarySectionProps) {
+  const incoming = direction === "incoming";
+  const Icon = incoming ? ArrowDownToLine : ArrowUpFromLine;
+
+  return (
+    <section className="rounded-lg border bg-card p-5 shadow-sm">
+      <div className="mb-8 flex items-start justify-between">
+        <span
+          className={
+            incoming
+              ? "rounded-md bg-emerald-500/10 p-2.5 text-emerald-700"
+              : "rounded-md bg-violet-500/10 p-2.5 text-violet-600"
+          }>
+          <Icon className="size-5" />
+        </span>
+        <span
+          className={
+            incoming
+              ? "rounded-full bg-emerald-500/10 px-2 py-1 text-[10px] font-semibold uppercase text-emerald-700"
+              : "rounded-full bg-violet-500/10 px-2 py-1 text-[10px] font-semibold uppercase text-violet-600"
+          }>
+          This month
+        </span>
+      </div>
+
+      <p className="text-3xl font-semibold tracking-tight">
+        {totals.thisMonth.toLocaleString()}
+      </p>
+      <p className="mt-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+        {direction} records
+      </p>
+
+      <div className="mt-5 grid grid-cols-3 border-t pt-3 text-xs">
+        <div>
+          <p className="text-muted-foreground">Today</p>
+          <p className="mt-1 font-semibold">{totals.today.toLocaleString()}</p>
+        </div>
+        <div>
+          <p className="text-muted-foreground">This week</p>
+          <p className="mt-1 font-semibold">
+            {totals.thisWeek.toLocaleString()}
+          </p>
+        </div>
+        <div>
+          <p className="text-muted-foreground">{allTimeLabel}</p>
+          <p className="mt-1 font-semibold">{totals.allTime.toLocaleString()}</p>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/sectorReports/SectorOverviewTable.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/sectorReports/SectorOverviewTable.tsx
new file mode 100644
index 000000000..8fa4eab62
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/sectorReports/SectorOverviewTable.tsx
@@ -0,0 +1,96 @@
+import { ArrowRight, Building2 } from "lucide-react";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/common/ui/table";
+import { SectorRecordReport } from "./types";
+
+interface SectorOverviewTableProps {
+  reports: SectorRecordReport[];
+  getName: (name: SectorRecordReport["sectorName"]) => string;
+  onSelect?: (sectorId: string) => void;
+  hasDateRange?: boolean;
+}
+
+export function SectorOverviewTable({
+  reports,
+  getName,
+  onSelect,
+  hasDateRange,
+}: SectorOverviewTableProps) {
+  return (
+    <section className="overflow-hidden rounded-xl border bg-card shadow-sm">
+      <div className="flex items-center gap-3 border-b px-5 py-4">
+        <Building2 className="size-5 text-primary" />
+        <div>
+          <h2 className="font-semibold">Sector reporting grid</h2>
+          <p className="text-xs text-muted-foreground">
+            Record activity for every sector and group in the selected scope
+          </p>
+        </div>
+      </div>
+      <div className="overflow-x-auto">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Sector</TableHead>
+              <TableHead>Group</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead className="text-emerald-600">
+                Incoming {hasDateRange ? "(selected range)" : "(all time)"}
+              </TableHead>
+              <TableHead className="text-violet-600">
+                Outgoing {hasDateRange ? "(selected range)" : "(all time)"}
+              </TableHead>
+              <TableHead>Today</TableHead>
+              <TableHead>This week</TableHead>
+              <TableHead>This month</TableHead>
+              {onSelect && <TableHead className="w-12" />}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {reports.map((report) => (
+              <TableRow
+                key={`${report.sectorId}-${report.groupId ?? ""}`}
+                className={onSelect ? "cursor-pointer" : undefined}
+                onClick={() => onSelect?.(report.sectorId)}>
+                <TableCell className="font-medium">{getName(report.sectorName)}</TableCell>
+                <TableCell>
+                  {report.groupName ? getName(report.groupName) : "—"}
+                </TableCell>
+                <TableCell>
+                  <span className="rounded-full bg-emerald-500/10 px-2 py-1 text-[10px] font-semibold uppercase text-emerald-700">
+                    Active stream
+                  </span>
+                </TableCell>
+                <TableCell>
+                  <span className="rounded-full bg-emerald-500/10 px-2.5 py-1 font-semibold text-emerald-600">
+                    {report.incoming.allTime.toLocaleString()}
+                  </span>
+                </TableCell>
+                <TableCell>
+                  <span className="rounded-full bg-violet-500/10 px-2.5 py-1 font-semibold text-violet-600">
+                    {report.outgoing.allTime.toLocaleString()}
+                  </span>
+                </TableCell>
+                <TableCell>{(report.incoming.today + report.outgoing.today).toLocaleString()}</TableCell>
+                <TableCell>{(report.incoming.thisWeek + report.outgoing.thisWeek).toLocaleString()}</TableCell>
+                <TableCell>{(report.incoming.thisMonth + report.outgoing.thisMonth).toLocaleString()}</TableCell>
+                {onSelect && <TableCell>
+                  <Button variant="ghost" size="icon" aria-label="View sector report">
+                    <ArrowRight className="size-4" />
+                  </Button>
+                </TableCell>}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/sectorReports/SectorReportFilters.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/sectorReports/SectorReportFilters.tsx
new file mode 100644
index 000000000..1ad10b52b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/sectorReports/SectorReportFilters.tsx
@@ -0,0 +1,213 @@
+import { useState } from "react";
+import {
+  CalendarDays,
+  Filter,
+  Layers3,
+  RefreshCw,
+  RotateCcw,
+} from "lucide-react";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+
+export interface ReportFilterOption {
+  id: string;
+  label: string;
+  parentId?: string | null;
+  unitId?: string | null;
+}
+
+interface SectorReportFiltersProps {
+  units: ReportFilterOption[];
+  sectors: ReportFilterOption[];
+  groups: ReportFilterOption[];
+  unitId: string;
+  sectorId: string;
+  groupId: string;
+  fromDate: string;
+  toDate: string;
+  loading?: boolean;
+  refreshing?: boolean;
+  onUnitChange: (value: string) => void;
+  onSectorChange: (value: string) => void;
+  onGroupChange: (value: string) => void;
+  onFromDateChange: (value: string) => void;
+  onToDateChange: (value: string) => void;
+  onReset: () => void;
+  onRefresh: () => void;
+}
+
+export function SectorReportFilters({
+  units,
+  sectors,
+  groups,
+  unitId,
+  sectorId,
+  groupId,
+  fromDate,
+  toDate,
+  loading,
+  refreshing,
+  onUnitChange,
+  onSectorChange,
+  onGroupChange,
+  onFromDateChange,
+  onToDateChange,
+  onReset,
+  onRefresh,
+}: SectorReportFiltersProps) {
+  const [showAdvanced, setShowAdvanced] = useState(
+    Boolean(groupId || fromDate || toDate),
+  );
+  const advancedFilterCount = [groupId, fromDate, toDate].filter(Boolean).length;
+
+  return (
+    <div className="w-full rounded-lg border bg-card p-4 shadow-sm lg:w-auto lg:min-w-[470px]">
+      <div className="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_40px_40px] items-end gap-3">
+      <label className="space-y-1.5 text-xs font-medium">
+        <span className="text-[9px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+          Filter by unit
+        </span>
+        <Select
+          value={unitId}
+          disabled={loading}
+          onValueChange={onUnitChange}>
+          <SelectTrigger className="h-9 w-full bg-background text-xs">
+            <SelectValue placeholder="Select a unit" />
+          </SelectTrigger>
+          <SelectContent>
+            {units.map((unit) => (
+              <SelectItem key={unit.id} value={unit.id}>
+                {unit.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </label>
+
+      <label className="space-y-1.5 text-xs font-medium">
+        <span className="text-[9px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+          Sector
+        </span>
+        <Select
+          value={sectorId || "all"}
+          disabled={!unitId || loading}
+          onValueChange={(value) => onSectorChange(value === "all" ? "" : value)}>
+          <SelectTrigger className="h-9 w-full bg-background text-xs">
+            <SelectValue
+              placeholder={unitId ? "All sectors" : "Select a unit first"}
+            />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All sectors</SelectItem>
+            {sectors.map((sector) => (
+              <SelectItem key={sector.id} value={sector.id}>
+                {sector.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </label>
+
+      <Button
+        type="button"
+        size="icon"
+        className="relative size-9 bg-emerald-800 text-white hover:bg-emerald-700"
+        aria-label="Toggle advanced filters"
+        aria-expanded={showAdvanced}
+        onClick={() => setShowAdvanced((visible) => !visible)}>
+        <Filter className="size-4" />
+        {advancedFilterCount > 0 && (
+          <span className="absolute -right-1.5 -top-1.5 flex size-4 items-center justify-center rounded-full bg-violet-600 text-[9px] font-bold text-white">
+            {advancedFilterCount}
+          </span>
+        )}
+      </Button>
+      <Button
+        type="button"
+        variant="outline"
+        size="icon"
+        className="size-9"
+        disabled={!unitId || refreshing}
+        aria-label="Refresh sector report"
+        onClick={onRefresh}>
+        <RefreshCw className={`size-4 ${refreshing ? "animate-spin" : ""}`} />
+      </Button>
+      </div>
+
+      {showAdvanced && (
+      <div className="mt-4 grid gap-3 border-t pt-4 sm:grid-cols-2">
+      <label className="space-y-1.5 text-xs font-medium sm:col-span-2">
+        <span className="flex items-center gap-2">
+          <Layers3 className="size-4 text-primary" />
+          Group
+        </span>
+        <Select
+          value={groupId || "all"}
+          disabled={!unitId || !sectorId || loading}
+          onValueChange={(value) => onGroupChange(value === "all" ? "" : value)}>
+          <SelectTrigger className="h-9 w-full bg-background text-xs">
+            <SelectValue
+              placeholder={sectorId ? "All groups" : "Select a sector first"}
+            />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All groups</SelectItem>
+            {groups.map((group) => (
+              <SelectItem key={group.id} value={group.id}>
+                {group.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </label>
+
+      <label className="space-y-1.5 text-xs font-medium">
+        <span className="flex items-center gap-2">
+          <CalendarDays className="size-4 text-primary" />
+          From date
+        </span>
+        <input
+          type="date"
+          value={fromDate}
+          max={toDate || undefined}
+          disabled={!unitId || loading}
+          onChange={(event) => onFromDateChange(event.target.value)}
+          className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+        />
+      </label>
+
+      <label className="space-y-1.5 text-xs font-medium">
+        <span className="flex items-center gap-2">
+          <CalendarDays className="size-4 text-primary" />
+          To date
+        </span>
+        <input
+          type="date"
+          value={toDate}
+          min={fromDate || undefined}
+          disabled={!unitId || loading}
+          onChange={(event) => onToDateChange(event.target.value)}
+          className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+        />
+      </label>
+
+      <Button
+        variant="outline"
+        size="sm"
+        className="gap-2 sm:col-span-2 sm:justify-self-end"
+        disabled={!unitId}
+        onClick={onReset}>
+        <RotateCcw className="size-4" />
+        Reset
+      </Button>
+      </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/sectorReports/types.ts b/apps/edr-freight-web/backoffice/src/record-management/components/sectorReports/types.ts
new file mode 100644
index 000000000..c5e2fb071
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/sectorReports/types.ts
@@ -0,0 +1,28 @@
+export type LocalizedText = string | { am?: string; en?: string };
+
+export interface RecordPeriodTotals {
+  today: number;
+  thisWeek: number;
+  thisMonth: number;
+  allTime: number;
+}
+
+export interface SectorRecordReport {
+  sectorId: string;
+  sectorName: LocalizedText;
+  groupId?: string | null;
+  groupName?: LocalizedText | null;
+  incoming: RecordPeriodTotals;
+  outgoing: RecordPeriodTotals;
+}
+
+export interface SectorReportResponse {
+  items: SectorRecordReport[];
+}
+
+export interface SectorReportFilters {
+  unitId?: string;
+  positionId?: string;
+  from?: string;
+  to?: string;
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/sectorReports/useSectorReport.ts b/apps/edr-freight-web/backoffice/src/record-management/components/sectorReports/useSectorReport.ts
new file mode 100644
index 000000000..14605d5bd
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/sectorReports/useSectorReport.ts
@@ -0,0 +1,41 @@
+import { useQuery } from "@tanstack/react-query";
+import { fetchSectorRecordReport } from "@/record-management/services/api/sectorReportService";
+import { SectorReportFilters } from "./types";
+import {
+  fetchPositionsByRankAndUnit,
+  getChildPositions,
+} from "@/user-management/services/api/positionService";
+
+export const useSectorReport = (filters: SectorReportFilters) =>
+  useQuery({
+    queryKey: [
+      "sector-record-report",
+      filters.unitId,
+      filters.positionId,
+      filters.from,
+      filters.to,
+    ],
+    queryFn: () => fetchSectorRecordReport(filters),
+    enabled: Boolean(filters.unitId),
+    staleTime: 60 * 1000,
+  });
+
+export const usePositionsByRankAndUnit = (unitId: string, rank: number) =>
+  useQuery({
+    queryKey: ["positions-by-rank-and-unit", unitId, rank],
+    queryFn: () => fetchPositionsByRankAndUnit(unitId, rank),
+    enabled: Boolean(unitId),
+    staleTime: 5 * 60 * 1000,
+  });
+
+export const useChildPositions = (parentPositionId: string) =>
+  useQuery({
+    queryKey: ["child-positions", parentPositionId],
+    queryFn: async () => {
+      const response = await getChildPositions(parentPositionId);
+      const data = response.data;
+      return Array.isArray(data) ? data : (data?.items ?? []);
+    },
+    enabled: Boolean(parentPositionId),
+    staleTime: 5 * 60 * 1000,
+  });
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/IncomingInstanceDetail.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/IncomingInstanceDetail.tsx
new file mode 100644
index 000000000..503a1fcb0
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/IncomingInstanceDetail.tsx
@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import { MessageSquareMore, MessageSquareText } from "lucide-react";
+import { t } from "i18next";
+import RemarkCreationDialog, { InstanceType } from "./remarkCreationCard";
+import { Button } from "@/shared/common/ui/button";
+
+interface IncomingInstanceDetailProps {
+  rowData?: any;
+  instanceId: string;
+  iconSize?: number;
+  className?: string;
+  instanceType?: InstanceType;
+  fromTable?: boolean;
+}
+
+const IncomingInstanceDetail = ({
+  instanceId,
+  rowData,
+  iconSize = 20,
+  className = "",
+  instanceType,
+  fromTable = true,
+}: IncomingInstanceDetailProps) => {
+  const [isRemarkDialogOpen, setIsRemarkDialogOpen] = useState(false);
+
+  const commentCount = 0;
+
+  return (
+    <>
+      {/* Comments Icon with Badge */}
+      {fromTable ? (
+        <button
+          onClick={() => setIsRemarkDialogOpen(true)}
+          className={`relative inline-flex items-center justify-center rounded-md hover:bg-accent hover:text-accent-foreground transition-colors p-1 ${className}`}
+          title={t("remark.viewAndAdd", "View & Add Remarks")}
+        >
+          <MessageSquareText
+            style={{ width: iconSize, height: iconSize }}
+            className="text-muted-foreground hover:text-primary transition-colors"
+          />
+          {commentCount > 0 && (
+            <span className="absolute -top-1 -right-1 flex min-w-[18px] h-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-white">
+              {commentCount > 99 ? "99+" : commentCount}
+            </span>
+          )}
+        </button>
+      ) : (
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setIsRemarkDialogOpen(true)}
+          className="h-9 rounded-full border-violet-200 bg-gradient-to-r from-violet-50 to-purple-50 px-4 shadow-sm transition-all duration-300 hover:border-violet-300 hover:from-violet-100 hover:to-purple-100 dark:border-violet-800/50 dark:from-violet-950/30 dark:to-purple-950/30 dark:hover:border-violet-700/60 dark:hover:from-violet-900/50 dark:hover:to-purple-900/50"
+        >
+          <MessageSquareMore className="mr-2 h-4 w-4 text-violet-600 dark:text-violet-400" />
+          {t("userIncoming.Remark", "Remark")}
+        </Button>
+      )}
+
+      {/* Remarks Dialog */}
+      <RemarkCreationDialog
+        open={isRemarkDialogOpen}
+        onClose={() => setIsRemarkDialogOpen(false)}
+        incomingInstanceId={instanceId}
+        onSuccess={() => {}}
+        instanceType={instanceType}
+        rowData={rowData}
+      />
+    </>
+  );
+};
+
+export default IncomingInstanceDetail;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/ccIncomingRecords/AssignCCRecord.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/ccIncomingRecords/AssignCCRecord.tsx
new file mode 100644
index 000000000..c03830001
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/ccIncomingRecords/AssignCCRecord.tsx
@@ -0,0 +1,307 @@
+import { useAssignTasks } from "@/record-management/components/hooks/useAssignTasks";
+import { MultiSelect } from "@/shared/common/ui/multi-select";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import {
+  AssignCCPayload,
+  PositionDto,
+  PositionHolderDto,
+} from "@/record-management/dto/userRecords/usersDto";
+import { useLocalizedName } from "@/shared/common/localizedName";
+
+import { Button } from "@/shared/common/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/shared/common/ui/form";
+import { Textarea } from "@/shared/common/ui/textarea";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm, FormProvider } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { z } from "zod";
+import { MemoDto } from "@/record-management/components/hooks/useCCIncomingRecords";
+import { useUserDetail } from "@/record-management/components/hooks/useUserDetail";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { MeDto } from "@/shared/dto/user/meDto";
+import useSettings from "@/record-management/components/hooks/useSettings";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+const assignCCSchema = z.object({
+  receivingDepartments: z.array(z.string()).optional(),
+  assignedEmployees: z.array(z.string()).optional(),
+  remarks: z.string().min(1, "Comment is required"),
+}).refine(
+  (data) => (data.receivingDepartments?.length ?? 0) > 0 || (data.assignedEmployees?.length ?? 0) > 0,
+  {
+    message: "At least one department or employee must be selected",
+    path: ["receivingDepartments"],
+  }
+);
+
+type AssignCCFormData = z.infer<typeof assignCCSchema>;
+
+interface AssignCCRecordProps {
+  open: boolean;
+  onClose: () => void;
+  record: MemoDto;
+  refetch: () => void;
+}
+
+const AssignCCRecord = ({
+  open,
+  onClose,
+  record,
+  refetch,
+}: AssignCCRecordProps) => {
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+  const localizedName = useLocalizedName();
+  const { userDetails } = useAuthUser();
+  const unitId = userDetails?.employee?.[0]?.unitId ?? null;
+
+  const { listPositionResponse, allDepartmentUnits, allScopedDepartments } =
+    useSettings();
+  const { permissionKeys } = useUserDetail();
+
+  const form = useForm<AssignCCFormData>({
+    resolver: zodResolver(assignCCSchema),
+    defaultValues: {
+      receivingDepartments: [],
+      assignedEmployees: [],
+      remarks: "",
+    },
+  });
+
+  // Map your position list to options for MultiSelect
+  const positionOptions = Array.isArray(allScopedDepartments)
+    ? allScopedDepartments.map((pos: PositionDto) => ({
+        label: localizedName(pos.name) || localizedName(pos.name) || "N/A",
+        value: pos.id,
+      }))
+    : [];
+  const positionOptions1 = Array.isArray(allScopedDepartments)
+    ? allScopedDepartments.map((pos: PositionDto) => ({
+        label: localizedName(pos.name) || localizedName(pos.name) || "N/A",
+        value: pos.id,
+      }))
+    : [];
+
+  const employeeOptions = Array.isArray(listPositionResponse)
+    ? listPositionResponse.flatMap((unit: PositionHolderDto) =>
+        unit.employeePositions.map((pos: any) => ({
+          label: localizedName(unit.user?.name) || "Unnamed employee",
+          value: pos.id,
+          positionId: pos.positionId,
+        })),
+      )
+    : [];
+
+  const { assignCC, isAssignCCPending, isAssignCCError, assignCCError } =
+    useAssignTasks();
+
+  const handleFormSubmit = form.handleSubmit(async (values) => {
+    try {
+      const finalRemarks = values.remarks || "";
+
+      // Build positions array from employees only
+      // Note: We only use employees since we need both positionId and employeePositionId
+      const positions: { positionId: string; employeePositionId: string }[] =
+        [];
+
+      // Add positions from selected employees
+      if (values.assignedEmployees) {
+        values.assignedEmployees.forEach((empId) => {
+          const employee = employeeOptions.find((emp) => emp.value === empId);
+          if (employee?.positionId) {
+            positions.push({
+              positionId: employee.positionId, // The position/department ID
+              employeePositionId: empId, // The employee's specific position assignment ID
+            });
+          }
+        });
+      }
+
+      // Add positions from departments (find employees in those departments)
+      if (values.receivingDepartments) {
+        values.receivingDepartments.forEach((deptId) => {
+          // Find employees in this department
+          const employeesInDept = employeeOptions.filter(
+            (emp) => emp.positionId === deptId,
+          );
+
+          // Add all employees in this department
+          employeesInDept.forEach((employee) => {
+            // Avoid duplicates
+            const alreadyAdded = positions.some(
+              (pos) => pos.employeePositionId === employee.value,
+            );
+            if (!alreadyAdded) {
+              positions.push({
+                positionId: deptId, // The department/position ID
+                employeePositionId: employee.value, // The employee's specific position assignment ID
+              });
+            }
+          });
+        });
+      }
+
+      // Validate that we have positions to assign
+      if (positions.length === 0) {
+        toast.error(
+          "Please select at least one employee or department with employees",
+        );
+        return;
+      }
+
+      // Get the CC record ID from the content[0].ccs array
+      // The structure is: record.content[0].ccs[0].id
+      const ccRecordId = record.content?.[0]?.ccs?.[0]?.id;
+
+      if (!ccRecordId) {
+        console.error(
+          "CC record ID not found in content[0].ccs array. Record:",
+          record,
+        );
+        toast.error("CC record ID not found in content[0].ccs array");
+        return;
+      }
+
+      const payload: AssignCCPayload = {
+        recordCCId: ccRecordId, // Use the CC record ID from content[0].ccs[0].id (e.g., "597e72f7-6c9b-48cd-a9fe-46536f42306a")
+        recordId: record.id, // The main record ID (e.g., "14b2c17e-59a1-48e0-bfd6-d89e467d4c39")
+        comment: finalRemarks,
+        positions,
+      };
+
+      assignCC(payload, {
+        onSuccess: () => {
+          toast.success(t("userIncoming.successassign"));
+          form.reset();
+          refetch();
+          onClose();
+        },
+        onError: (error) => {
+          handleError(error);
+        },
+      });
+    } catch (error) {
+      console.error("Form submission error:", error);
+      toast.error(t("userIncoming.An error occurred during assignment."));
+    }
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[425px] bg-white">
+        <DialogHeader>
+          <DialogTitle>{t("userIncoming.Assign CC Record")}</DialogTitle>
+          <DialogDescription>
+            {t("userIncoming.Assign this CC record to one or more departments")}
+          </DialogDescription>
+        </DialogHeader>
+
+        <FormProvider {...form}>
+          <form onSubmit={handleFormSubmit} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="receivingDepartments"
+              render={({ field }) => (
+                <FormItem className="space-y-1">
+                  <FormLabel>
+                    {t("userIncoming.Departments")} <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <FormControl>
+                    <MultiSelect
+                      options={positionOptions}
+                      onValueChange={field.onChange}
+                      value={field.value}
+                      placeholder={t("userIncoming.Select department(s)...")}
+                      variant="default"
+                      animation={200}
+                      maxCount={5}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="assignedEmployees"
+              render={({ field }) => (
+                <FormItem className="space-y-1">
+                  <FormLabel>
+                    {t("userIncoming.Employees")} <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <FormControl>
+                    <MultiSelect
+                      options={employeeOptions}
+                      value={field.value} // string[] of employeeIds
+                      onValueChange={field.onChange} // directly writes string[]
+                      placeholder={t("userIncoming.Select employee(s)...")}
+                      variant="default"
+                      animation={200}
+                      maxCount={5}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="remarks"
+              render={({ field }) => (
+                <FormItem className="space-y-1">
+                  <FormLabel>{t("userIncoming.Remark")}</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder={t("userIncoming.Enter your remarks...")}
+                      className="resize-none"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {isAssignCCError && assignCCError && (
+              <p className="text-sm text-red-600">
+                {assignCCError instanceof Error
+                  ? assignCCError.message
+                  : t("userIncoming.An error occurred during assignment.")}
+              </p>
+            )}
+
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={onClose}>
+                {t("userIncoming.Cancel")}
+              </Button>
+              <Button type="submit" disabled={isAssignCCPending}>
+                {isAssignCCPending
+                  ? t("userIncoming.Assigning...")
+                  : t("userIncoming.Assign CC")}
+              </Button>
+            </DialogFooter>
+          </form>
+        </FormProvider>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default AssignCCRecord;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/ccIncomingRecords/CCIncomingRecords.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/ccIncomingRecords/CCIncomingRecords.tsx
new file mode 100644
index 000000000..f04d06a68
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/ccIncomingRecords/CCIncomingRecords.tsx
@@ -0,0 +1,305 @@
+import { useState, useEffect, useMemo, useCallback } from "react";
+import React from "react";
+import HeaderSection from "../headerSection";
+import { t } from "i18next";
+import { useSearchParams } from "react-router-dom";
+
+import { DataTable } from "@/record-management/common/DataTable";
+import { Button } from "@/shared/common/ui/button";
+import {
+  CombinedFilterBar,
+  CombinedFilterField,
+} from "@/shared/components/filters/CombinedFilterBar";
+import { useCCIncomingRecords } from "@/record-management/components/hooks/useCCIncomingRecords";
+import useCanAssignRecord from "@/record-management/components/hooks/useCanAssignRecord";
+import { CCIncomingRecordsColumns } from "./ccIncomingRecordsColumns";
+import Loader from "@/record-management/components/Loader/loader";
+import { getCCIncoming } from "@/record-management/services/api/incomingRecordService";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { useCombinedFilters } from "@/shared/hooks/useCombinedFilters";
+import { useUserDetail } from "../../hooks/useUserDetail";
+import { MeDto } from "@/shared/dto/user/meDto";
+import secretaryList from "@/record-management/common/secretaryViewList";
+import DelegationView from "@/record-management/common/DelegationView";
+import { FilterParams } from "@/shared/utils/filterParams";
+
+const CCIncomingRecords = () => {
+  const [statusFilter, setStatusFilter] = useState<string>("");
+  const localizedName = useLocalizedName();
+  const { userDetails } = useAuthUser();
+  const { permissionKeys } = useUserDetail(userDetails as MeDto);
+  const isSecretary = permissionKeys.includes("can:viewParentPositionRecord");
+  const selfFilters = useCombinedFilters<FilterParams>();
+  const parentFilters = useCombinedFilters<FilterParams>();
+  const [searchParamsUrl, setSearchParamsUrl] = useSearchParams();
+  const urlPage = Number(searchParamsUrl.get("page") || 1);
+  const initialView = searchParamsUrl.get("view") || "self";
+  const [liveSearch, setLiveSearch] = useState<{
+    key: string;
+    value: string;
+  } | null>(null);
+  const [secretaryView, setSecretaryView] = useState(isSecretary ? initialView : "self");
+  const [pagination, setPagination] = React.useState({
+    pageIndex: urlPage - 1,
+    pageSize: 10,
+  });
+  const [openDropdownId, setOpenDropdownId] = useState<string | null>(null);
+  const isDelegated = userDetails?.employee?.some((emp) =>
+    emp.positions.some((pos) => pos.hasDelegated),
+  );
+
+  useEffect(() => {
+    if (!isSecretary && secretaryView === "parent") {
+      setSecretaryView("self");
+    }
+  }, [isSecretary, secretaryView]);
+  const isSelf = secretaryView === "self";
+  const syncViewParam = useCallback((params: URLSearchParams) => {
+    if (secretaryView === "parent") {
+      params.set("view", "parent");
+    } else {
+      params.delete("view");
+    }
+    return params;
+  }, [secretaryView]);
+  const activeFilterStore = isSelf ? selfFilters : parentFilters;
+
+  const filterFields = useMemo<CombinedFilterField[]>(
+    () => [
+      {
+        key: "sendingPosition",
+        label: t("userIncoming.Department"),
+        type: "text",
+      },
+      { key: "subject", label: t("userIncoming.Subject"), type: "text" },
+      {
+        key: "referenceNumber",
+        label: t("viewDetail.referenceNumber"),
+        type: "text",
+      },
+      {
+        key: "dispatchedDate",
+        label: t("userIncoming.Date"),
+        type: "dateRange",
+        fromKey: "fromDispatchedDate",
+        toKey: "toDispatchedDate",
+      },
+    ],
+    [],
+  );
+
+  useEffect(() => {
+    setSearchParamsUrl(
+      (prev) => syncViewParam(new URLSearchParams(prev)),
+      { replace: true },
+    );
+  }, [secretaryView, setSearchParamsUrl, syncViewParam]);
+  // Add this effect
+  React.useEffect(() => {
+    setLiveSearch(null);
+  }, [secretaryView]);
+  React.useEffect(() => {
+    setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+    setSearchParamsUrl(
+      (prev) => {
+        const params = new URLSearchParams(prev);
+        params.set("page", "1");
+        return syncViewParam(params);
+      },
+      { replace: true },
+    );
+  }, [
+    activeFilterStore.filters,
+    statusFilter,
+    setSearchParamsUrl,
+    syncViewParam,
+  ]);
+
+  React.useEffect(() => {
+    setPagination((prev) =>
+      prev.pageIndex === urlPage - 1
+        ? prev
+        : { ...prev, pageIndex: urlPage - 1 },
+    );
+  }, [urlPage]);
+
+  const mapStatusToHasSeen = (status: string): boolean | undefined => {
+    if (status === "seen") return true;
+    return undefined;
+  };
+  const handleLiveSearch = React.useCallback((key: string, value: string) => {
+    if (!key || !value) {
+      setLiveSearch(null);
+      return;
+    }
+    setLiveSearch({ key, value });
+    setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+  }, []);
+  const baseParams = useMemo(
+    () => ({
+      skip: pagination.pageIndex * pagination.pageSize,
+      take: pagination.pageSize,
+      orderBy: "record.dispatchedDate:DESC,record.createdAt:DESC",
+      hasSeen: mapStatusToHasSeen(statusFilter),
+      ...activeFilterStore.filters,
+      ...(liveSearch ? { [liveSearch.key]: liveSearch.value } : {}),
+      fetchParent: isSecretary,
+    }),
+    [
+      pagination.pageIndex,
+      pagination.pageSize,
+      statusFilter,
+      activeFilterStore.filters,
+      liveSearch,
+      isSecretary,
+    ],
+  );
+
+  const statusOptions = [
+    { value: "", label: t("statusBar.All") },
+    { value: "draft", label: t("statusBar.InProgress") },
+    { value: "seen", label: t("statusBar.seen") },
+  ];
+  const {
+    ccRecords,
+    isLoading,
+    isError,
+    ccCount,
+    refetch,
+    ccParent,
+    ccParentCount,
+    refetchParent,
+    isErrorParent,
+    isLoadingParent,
+  } = useCCIncomingRecords(baseParams);
+
+  const { canAssignRecord: canAssignCC } = useCanAssignRecord();
+
+  let Error, loading;
+  if (isSelf) {
+    Error = isError;
+    loading = isLoading;
+  } else {
+    Error = isErrorParent;
+    loading = isLoadingParent;
+  }
+
+  const safeTotalCount = Math.max(
+    isSelf ? ccCount || 0 : ccParentCount || 0,
+    1,
+  );
+
+  useEffect(() => {
+    const radioElementCC = document.getElementById(
+      "ccradio",
+    ) as HTMLInputElement;
+    if (radioElementCC) {
+      radioElementCC.checked = true;
+    }
+  }, []);
+
+  const totalPages = Math.ceil(safeTotalCount / pagination.pageSize);
+
+  React.useEffect(() => {
+    if (safeTotalCount === 1) return;
+
+    let newPage = pagination.pageIndex + 1;
+
+    if (newPage > totalPages) {
+      newPage = 1;
+      setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+    }
+
+    setSearchParamsUrl((prev) => {
+      const params = new URLSearchParams(prev);
+      params.set("page", newPage.toString());
+      return syncViewParam(params);
+    });
+  }, [
+    totalPages,
+    safeTotalCount,
+    pagination.pageIndex,
+    setSearchParamsUrl,
+    syncViewParam,
+  ]);
+
+  return isDelegated ? (
+    <DelegationView />
+  ) : (
+    <div className="flex flex-col gap-2">
+      <div className="mt-4 flex w-full min-w-0 flex-col gap-4">
+        <h4 className="text-xl font-medium text-gray-900 dark:text-gray-100">
+          {t("userIncoming.Letters")}
+          <span className="ml-2 inline-flex items-center justify-center rounded-full bg-primary/10 px-2.5 py-0.5 text-sm font-semibold text-primary dark:bg-primary/20 dark:text-primary-foreground">
+            {isSelf ? (ccCount ?? 0) : (ccParentCount ?? 0)}
+          </span>
+        </h4>
+        <CombinedFilterBar
+          fields={filterFields}
+          filters={activeFilterStore.filters}
+          setFilter={activeFilterStore.setFilter}
+          setFilters={activeFilterStore.setFilters}
+          removeFilter={activeFilterStore.removeFilter}
+          removeFilters={activeFilterStore.removeFilters}
+          onFilterChange={() =>
+            setPagination((prev) => ({ ...prev, pageIndex: 0 }))
+          }
+          onLiveSearch={handleLiveSearch}
+          className="w-full min-w-0"
+        />
+      </div>
+
+      <HeaderSection />
+      {secretaryList(isSecretary, secretaryView, setSecretaryView, "SEC")}
+
+      <div className="flex flex-wrap gap-2">
+        {statusOptions.map((option) => (
+          <Button
+            key={option.value}
+            variant={statusFilter === option.value ? "linkActive" : "link"}
+            onClick={() => setStatusFilter(option.value)}
+            className="rounded-md text-sm sm:text-base">
+            {option.label}
+          </Button>
+        ))}
+      </div>
+
+      {loading && (
+        <div className="w-full h-full">
+          <Loader />
+        </div>
+      )}
+      {Error && isDelegated && <p>{t("userIncoming.errDelegation")}</p>}
+      {Error && !isDelegated && (
+        <p>{t("userIncoming.Error loading records.")}</p>
+      )}
+
+      {!loading && !Error && (
+        <DataTable
+          tableName="CC Incoming Records"
+          columns={CCIncomingRecordsColumns(
+            isSelf ? refetch : refetchParent ? refetchParent : () => {},
+            localizedName as (name?: { am?: string; en?: string }) => string,
+            isSecretary,
+            isSelf,
+            pagination.pageIndex + 1,
+            false,
+            canAssignCC,
+            "cc",
+            openDropdownId,
+            setOpenDropdownId,
+          )}
+          data={isSelf ? ccRecords : ccParent ? ccParent : []}
+          toolBarPosition="right"
+          totalCount={safeTotalCount}
+          pagination={pagination}
+          setPagination={setPagination}
+          refresh={isSelf ? refetch : refetchParent}
+        />
+      )}
+    </div>
+  );
+};
+
+export default CCIncomingRecords;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/ccIncomingRecords/ccIncomingRecordsColumns.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/ccIncomingRecords/ccIncomingRecordsColumns.tsx
new file mode 100644
index 000000000..ecf84931a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/ccIncomingRecords/ccIncomingRecordsColumns.tsx
@@ -0,0 +1,374 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { DataTableColumnHeader } from "@/shared/common/ui/dataTableColumnHeader";
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import AssignCCRecord from "./AssignCCRecord";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import { MoreHorizontal, Forward } from "lucide-react";
+import { MemoDto } from "@/record-management/components/hooks/useCCIncomingRecords";
+import { Button, getActionButtonVariant } from "@/shared/common/ui/button";
+import { useNavigate } from "react-router-dom";
+import { t } from "i18next";
+import i18n from "i18next";
+import { hasSeen } from "@/record-management/services/api/incomingRecordService";
+import { useCallback, useRef, useEffect } from "react";
+import { renderStatus } from "@/record-management/utils/renderDetails";
+
+// Utility component to show tooltip only when text overflows
+const OverflowTooltip = ({
+  children,
+  text,
+  maxWidth = 200,
+}: {
+  children: React.ReactNode;
+  text: string;
+  maxWidth?: number;
+}) => {
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const textRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const checkOverflow = () => {
+      if (textRef.current) {
+        const element = textRef.current;
+        setIsOverflowing(element.scrollWidth > element.clientWidth);
+      }
+    };
+
+    checkOverflow();
+    window.addEventListener("resize", checkOverflow);
+    return () => window.removeEventListener("resize", checkOverflow);
+  }, [text]);
+
+  if (isOverflowing) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div
+            ref={textRef}
+            className="overflow-hidden text-ellipsis whitespace-nowrap"
+            style={{ maxWidth: `${maxWidth}px` }}
+          >
+            {children}
+          </div>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p className="max-w-xs break-words">{text}</p>
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <div
+      ref={textRef}
+      className="overflow-hidden text-ellipsis whitespace-nowrap"
+      style={{ maxWidth: `${maxWidth}px` }}
+    >
+      {children}
+    </div>
+  );
+};
+
+// CC Incoming Actions component
+export function CCIncomingRecordActions({
+  rowData,
+  refetch,
+  isSecretary,
+  isSelf,
+  pageIndex,
+  isTable,
+  isForYourReference = false,
+  canAssignCC = true,
+  calledFrom,
+  isDropdownOpen = false,
+  onDropdownOpenChange,
+  dropdownId = "",
+}: {
+  rowData: MemoDto;
+  refetch?: () => void;
+  isSecretary?: boolean;
+  isSelf: boolean;
+  pageIndex?: number;
+  isTable: boolean;
+  isForYourReference?: boolean;
+  canAssignCC?: boolean;
+  calledFrom?: string;
+  isDropdownOpen?: boolean;
+  onDropdownOpenChange?: (open: boolean) => void;
+  dropdownId?: string;
+}) {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const [isAssignDialogOpen, setIsAssignDialogOpen] = useState(false);
+  const secretaryView = isSelf ? "" : "parent";
+  const isAssignable = !rowData?.isDelegation;
+  const isLocked = rowData?.isLocked;
+  const handleViewDetails = () => {
+    const detailPath =
+      calledFrom === "ForYourReference" ? "for-your-reference" : "cc";
+    const baseUrl = `/record-management/viewIncoming/${detailPath}/${rowData?.id}/?page=${pageIndex}`;
+    const url = secretaryView === "parent" ? `${baseUrl}&view=parent` : baseUrl;
+
+    navigate(url, {
+      state: {
+        actionRowData: rowData,
+      },
+    });
+    handleSeen();
+  };
+
+  const handleSeen = useCallback(async () => {
+    if (!rowData?.id) throw new Error("Invalid Record ID");
+    await hasSeen(rowData?.id, isForYourReference);
+    if (refetch) await refetch();
+    queryClient.invalidateQueries({ queryKey: ["incoming-cc"] });
+    queryClient.invalidateQueries({ queryKey: ["dashbordReport"] });
+    // Refetch useReportByHooks by invalidating its underlying query keys
+    queryClient.invalidateQueries({ queryKey: ["incoming-instances"] });
+    queryClient.invalidateQueries({ queryKey: ["incoming-instances-parent"] });
+    queryClient.invalidateQueries({ queryKey: ["external-incoming"] });
+    queryClient.invalidateQueries({ queryKey: ["external-incoming-parent"] });
+    queryClient.invalidateQueries({ queryKey: ["approvalRecord"] });
+  }, [queryClient, refetch, rowData?.id]);
+
+  const openAssignDialog = () => {
+    setIsAssignDialogOpen(true);
+  };
+
+  const closeAssignDialog = () => {
+    setIsAssignDialogOpen(false);
+    navigate("/record-management/userIncoming/cc");
+  };
+  return (
+    <>
+      {isTable ? (
+        <div className="flex items-center gap-1">
+          <Button
+            variant="viewDetail"
+            className="min-w-[110px]"
+            onClick={() => handleViewDetails()}
+          >
+            {t("userIncoming.View Detail")}
+          </Button>
+          {calledFrom !== "ForYourReference" && canAssignCC && !isLocked && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" className="h-8 w-8 p-0">
+                  <span className="sr-only">Open menu</span>
+                  <MoreHorizontal className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {isAssignable && (
+                  <DropdownMenuItem onSelect={openAssignDialog}>
+                    <Forward className="mr-2 h-4 w-4" />
+                    {t("userIncoming.Assign CC")}
+                  </DropdownMenuItem>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+        </div>
+      ) : (
+        canAssignCC &&
+        !isLocked &&
+        isAssignable && (
+          <Button
+            variant={getActionButtonVariant("Assign")}
+            onClick={openAssignDialog}
+          >
+            <Forward className="h-4 w-4" />
+            <span>{t("userIncoming.Assign")}</span>
+          </Button>
+        )
+      )}
+
+      <AssignCCRecord
+        open={isAssignDialogOpen}
+        onClose={closeAssignDialog}
+        record={rowData}
+        refetch={refetch ? refetch : () => {}}
+      />
+    </>
+  );
+}
+
+export const CCIncomingRecordsColumns = (
+  refetch: () => void,
+  localizedName: (name?: { am?: string; en?: string }) => string,
+  isSecretary: boolean,
+  isSelf: boolean,
+  pageNo: number,
+  isForYourReference: boolean = false,
+  canAssignCC: boolean = true,
+  calledFrom: string,
+  openDropdownId?: string | null,
+  onDropdownChange?: (id: string | null) => void,
+): ColumnDef<MemoDto>[] => [
+  {
+    id: "referenceNumber",
+    header: () => t("viewDetail.referenceNumber"),
+    accessorKey: "referenceNumber",
+    cell: ({ row }) => {
+      const referenceNo = row?.original?.referenceNumber || "";
+      const recordTypeKey = row?.original?.recordTypeKey || "";
+
+      return (
+        <OverflowTooltip text={referenceNo} maxWidth={150}>
+          {referenceNo === "" ? (
+            <span className="inline-block px-3 py-1 text-xs font-medium text-blue-700 bg-blue-100 rounded-full border border-blue-200">
+              {recordTypeKey === "direct"
+                ? t("nav.direct")
+                : t("nav.internal_memo")}
+            </span>
+          ) : (
+            referenceNo
+          )}
+        </OverflowTooltip>
+      );
+    },
+    enableHiding: true,
+    size: 150,
+  },
+  {
+    id: "sendingDepartment",
+    header: () => t("userIncoming.Sending Department"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      const initiatorPosition = (rowData as any)?.initiatorPosition;
+      const positionName =
+        (typeof initiatorPosition === "string"
+          ? initiatorPosition
+          : localizedName(initiatorPosition?.name || initiatorPosition)) ||
+        rowData.initiator?.position
+          ? localizedName(rowData.initiator?.position?.name)
+          : localizedName(rowData.initiator?.employee?.name);
+      const displayText = positionName || t("userIncoming.No Department");
+
+      return (
+        <OverflowTooltip text={displayText} maxWidth={200}>
+          {displayText}
+        </OverflowTooltip>
+      );
+    },
+    enableHiding: true,
+    accessorKey: "sendingDepartment",
+    size: 200,
+  },
+  // {
+  //   id: "recordTypeKey",
+  //   header: ({ column }) => (
+  //     <DataTableColumnHeader
+  //       column={column}
+  //       title={t("userIncoming.Record Type")}
+  //     />
+  //   ),
+  //   cell: ({ row }) => {
+  //     const recordType = row?.original?.recordTypeKey;
+  //     return recordType
+  //       ? recordType
+  //       : t("userIncoming.No Record Type");
+  //   },
+  //   accessorKey: "referenceNumber",
+  //   enableHiding: true,
+  // },
+  {
+    id: "Subject",
+    header: () => t("userIncoming.Subject"),
+    accessorKey: "subject",
+    cell: ({ row }) => {
+      const Subject = row.original.content[0]?.subject;
+      const displayText = Subject ? Subject : t("userIncoming.No Subject");
+
+      return (
+        <OverflowTooltip text={displayText} maxWidth={200}>
+          {displayText}
+        </OverflowTooltip>
+      );
+    },
+    enableHiding: true,
+    size: 200,
+  },
+  {
+    accessorKey: "createdAt",
+    header: () => t("userIncoming.Date"),
+    cell: ({ row }) => {
+      const record = row.original;
+
+      const isAmharic = i18n.language === "am";
+      const amharicDate =
+        record.amharicDispatchedDate ?? record.amharicCreatedAt;
+      const createdAt = record.dispatchedDate ?? record.createdAt;
+
+      let displayText = "-";
+      if (isAmharic && amharicDate) {
+        displayText = amharicDate;
+      } else if (createdAt) {
+        displayText = new Date(createdAt).toLocaleDateString(i18n.language, {
+          year: "numeric",
+          month: "short",
+          day: "numeric",
+          hour: "numeric",
+          minute: "numeric",
+        });
+      }
+
+      return displayText;
+    },
+    size: 150,
+  },
+  {
+    id: "Task Status",
+    header: () => t("userIncoming.Status"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      const status =
+        row.original.content?.[0]?.ccs?.[0]?.status || rowData.status;
+      const statusElement = status ? renderStatus(status, status) : null;
+      return statusElement;
+    },
+    accessorKey: "TaskStatus",
+    enableHiding: true,
+    size: 120,
+  },
+  {
+    id: "Actions",
+    header: () => t("userIncoming.Actions"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      const dropdownId = rowData.id || "";
+      return (
+        <CCIncomingRecordActions
+          rowData={rowData}
+          refetch={refetch}
+          isSecretary={isSecretary}
+          isSelf={isSelf}
+          pageIndex={pageNo}
+          calledFrom={calledFrom}
+          isTable={true}
+          isForYourReference={isForYourReference}
+          canAssignCC={canAssignCC}
+          isDropdownOpen={openDropdownId === dropdownId}
+          onDropdownOpenChange={(open) => {
+            onDropdownChange?.(open ? dropdownId : null);
+          }}
+          dropdownId={dropdownId}
+        />
+      );
+    },
+    enableHiding: true,
+    accessorKey: "Actions",
+  },
+];
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/externalIncomingRecords/externalIncomingRecords.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/externalIncomingRecords/externalIncomingRecords.tsx
new file mode 100644
index 000000000..b56a2737b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/externalIncomingRecords/externalIncomingRecords.tsx
@@ -0,0 +1,346 @@
+import { useState, useEffect, useMemo, useCallback } from "react";
+import { DataTable } from "@/record-management/common/DataTable";
+import { Button } from "@/shared/common/ui/button";
+import { useExternalIncomingRecords } from "@/record-management/components/hooks/useExternalIncomingRecords";
+import Loader from "@/record-management/components/Loader/loader";
+import React from "react";
+import HeaderSection from "../headerSection";
+import { t } from "i18next";
+import { ExternalIncomingRecordsColumns } from "./externalIncomingRecordsColumns";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { useUserDetail } from "../../hooks/useUserDetail";
+import { MeDto } from "@/shared/dto/user/meDto";
+import secretaryList from "@/record-management/common/secretaryViewList";
+import { useSearchParams } from "react-router-dom";
+import DelegationView from "@/record-management/common/DelegationView";
+import {
+  CombinedFilterBar,
+  CombinedFilterField,
+} from "@/shared/components/filters/CombinedFilterBar";
+import { useCombinedFilters } from "@/shared/hooks/useCombinedFilters";
+import { FilterParams } from "@/shared/utils/filterParams";
+
+  const ExternalIncomingRecords = () => {
+  const localizedName = useLocalizedName();
+  const { userDetails } = useAuthUser();
+  const { permissionKeys } = useUserDetail(userDetails as MeDto);
+  const selfFilters = useCombinedFilters<FilterParams>();
+  const parentFilters = useCombinedFilters<FilterParams>();
+  const [statusFilterMain, setStatusFilterMain] = useState<string[]>([
+    "non_smart_user",
+    "external_non_smart_user",
+  ]);
+  const [liveSearch, setLiveSearch] = useState<{
+    key: string;
+    value: string;
+  } | null>(null); // ← add
+  const [openDropdownId, setOpenDropdownId] = useState<string | null>(null);
+
+  const handleLiveSearch = (key: string, value: string) => {
+    if (!key || !value) {
+      setLiveSearch(null);
+      return;
+    }
+    setLiveSearch({ key, value });
+  };
+  const [tabFilters, setTabFilters] = useState<
+    Record<string, { status: string }>
+  >({
+    non_smart_user: { status: "" },
+    external: { status: "" },
+  });
+  const [tabFiltersSec, setTabFiltersSec] = useState<
+    Record<string, { status: string }>
+  >({
+    non_smart_user: { status: "" },
+    external: { status: "" },
+  });
+  const [searchParamsUrl, setSearchParamsUrl] = useSearchParams();
+  const urlPage = Number(searchParamsUrl.get("page") || 1);
+  const initialView = searchParamsUrl.get("view") || "self";
+  const isSecretary = permissionKeys.includes("can:viewParentPositionRecord");
+  const [secretaryView, setSecretaryView] = useState(isSecretary ? initialView : "self");
+  const [pagination, setPagination] = React.useState({
+    pageIndex: urlPage - 1,
+    pageSize: 10,
+  });
+  const isDelegated = userDetails?.employee?.some((emp) =>
+    emp.positions.some((pos) => pos.hasDelegated),
+  );
+
+  useEffect(() => {
+    if (!isSecretary && secretaryView === "parent") {
+      setSecretaryView("self");
+    }
+  }, [isSecretary, secretaryView]);
+
+  const isSelf = secretaryView === "self";
+  const syncViewParam = useCallback((params: URLSearchParams) => {
+    if (secretaryView === "parent") {
+      params.set("view", "parent");
+    } else {
+      params.delete("view");
+    }
+    return params;
+  }, [secretaryView]);
+  const activeFilterStore = isSelf ? selfFilters : parentFilters;
+  const currentTab =
+    statusFilterMain.length > 1 ? "non_smart_user" : "external";
+  const statusFilter = isSelf
+    ? tabFilters[currentTab]?.status || ""
+    : tabFiltersSec[currentTab]?.status || "";
+
+  const filterFields = useMemo<CombinedFilterField[]>(
+    () => [
+      {
+        key: "receiverPosition",
+        label: t("userRecord.sendingOrganization"),
+        type: "text",
+      },
+      { key: "subject", label: t("userIncoming.Subject"), type: "text" },
+      {
+        key: "dispatchedDate",
+        label: t("userIncoming.Date"),
+        type: "dateRange",
+        fromKey: "fromDispatchedDate",
+        toKey: "toDispatchedDate",
+      },
+      {
+        key: "referenceNumber",
+        label: t("userIncoming.Reference Number"),
+        type: "text",
+      },
+      { key: "letterName", label: t("viewDetail.fileName1"), type: "text" },
+    ],
+    [],
+  );
+
+  useEffect(() => {
+    setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+    setSearchParamsUrl(
+      (prev) => {
+        const params = new URLSearchParams(prev);
+        params.set("page", "1");
+        return syncViewParam(params);
+      },
+      { replace: true },
+    );
+  }, [
+    activeFilterStore.filters,
+    statusFilter,
+    statusFilterMain,
+    setSearchParamsUrl,
+    syncViewParam,
+  ]);
+
+  useEffect(() => {
+    setPagination((prev) =>
+      prev.pageIndex === urlPage - 1
+        ? prev
+        : { ...prev, pageIndex: urlPage - 1 },
+    );
+  }, [urlPage]);
+
+  useEffect(() => {
+    setSearchParamsUrl(
+      (prev) => syncViewParam(new URLSearchParams(prev)),
+      { replace: true },
+    );
+  }, [secretaryView, setSearchParamsUrl, syncViewParam]);
+
+  const recordType = window.location.pathname.includes("external")
+    ? "external"
+    : window.location.pathname.includes("cc")
+      ? "cc"
+      : "internal";
+
+  const {
+    externalRecords,
+    isLoading,
+    isError,
+    refetch,
+    externalCount,
+    externalParent,
+    isLoadingParent,
+    isErrorParent,
+    refetchParent,
+    externalParentCount,
+  } = useExternalIncomingRecords({
+    pageIndex: pagination.pageIndex * pagination.pageSize,
+    pageSize: pagination.pageSize,
+    status: statusFilter || undefined,
+    ...activeFilterStore.filters,
+    recordType: statusFilterMain,
+    fetchParent: isSecretary,
+    ...(liveSearch ? { [liveSearch.key]: liveSearch.value } : {}),
+  });
+
+  let Error, loading;
+  if (isSelf) {
+    Error = isError;
+    loading = isLoading;
+  } else {
+    Error = isErrorParent;
+    loading = isLoadingParent;
+  }
+  const safeTotalCount = Math.max(
+    isSelf ? externalCount || 0 : externalParentCount || 0,
+    1,
+  );
+
+  const statusOptions = [
+    { value: "", label: t("statusBar.All") },
+    { value: "draft", label: t("statusBar.In Progress") },
+    { value: "accepted", label: t("statusBar.Accepted") },
+    { value: "replied", label: t("statusBar.Replied") },
+    { value: "re_assigned", label: t("statusBar.Reassigned") },
+    { value: "rejected", label: t("statusBar.Rejected") },
+  ];
+
+  const handleStatusChange = (value: string) => {
+    if (isSelf) {
+      setTabFilters((prev) => ({
+        ...prev,
+        [currentTab]: { ...prev[currentTab], status: value },
+      }));
+    } else {
+      setTabFiltersSec((prev) => ({
+        ...prev,
+        [currentTab]: { ...prev[currentTab], status: value },
+      }));
+    }
+  };
+
+  useEffect(() => {
+    setLiveSearch(null);
+  }, [secretaryView]);
+
+  useEffect(() => {
+    const radioElementExternal = document.getElementById(
+      "externalradio",
+    ) as HTMLInputElement;
+    if (radioElementExternal) {
+      radioElementExternal.checked = true;
+    }
+  }, []);
+
+  const totalPages = Math.ceil(safeTotalCount / pagination.pageSize);
+
+  React.useEffect(() => {
+    if (safeTotalCount === 1) return;
+
+    let newPage = pagination.pageIndex + 1;
+
+    if (newPage > totalPages) {
+      newPage = 1;
+      setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+    }
+
+    setSearchParamsUrl((prev) => {
+      const params = new URLSearchParams(prev);
+      params.set("page", newPage.toString());
+      return syncViewParam(params);
+    });
+  }, [
+    totalPages,
+    safeTotalCount,
+    pagination.pageIndex,
+    setSearchParamsUrl,
+    syncViewParam,
+  ]);
+
+  const columns = useMemo(
+    () =>
+      ExternalIncomingRecordsColumns(
+        isSelf ? refetch : refetchParent ? refetchParent : () => {},
+        localizedName as (name?: { am?: string; en?: string }) => string,
+        isSecretary,
+        isSelf,
+        pagination.pageIndex + 1,
+        openDropdownId,
+        setOpenDropdownId,
+      ),
+    [
+      refetch,
+      refetchParent,
+      isSelf,
+      isSecretary,
+      localizedName,
+      pagination.pageIndex,
+      openDropdownId,
+      setOpenDropdownId,
+    ],
+  );
+  return isDelegated ? (
+    <DelegationView />
+  ) : (
+    <div className="flex flex-col gap-2">
+      <div className="mt-4 flex w-full min-w-0 flex-col gap-4">
+        <h4 className="text-xl font-medium text-gray-900 dark:text-gray-100">
+          {t("userIncoming.Letters")}
+        </h4>
+
+        <CombinedFilterBar
+          fields={filterFields}
+          filters={activeFilterStore.filters}
+          setFilter={activeFilterStore.setFilter}
+          setFilters={activeFilterStore.setFilters}
+          removeFilter={activeFilterStore.removeFilter}
+          removeFilters={activeFilterStore.removeFilters}
+          onFilterChange={() =>
+            setPagination((prev) => ({ ...prev, pageIndex: 0 }))
+          }
+          onLiveSearch={handleLiveSearch}
+          className="w-full min-w-0"
+        />
+      </div>
+
+      <HeaderSection />
+      {secretaryList(isSecretary, secretaryView, setSecretaryView, "SEC")}
+      {secretaryList(
+        isSecretary,
+        statusFilterMain,
+        setStatusFilterMain,
+        "EXT",
+        !isSelf,
+      )}
+      <div className="flex flex-wrap gap-2">
+        {statusOptions.map((option) => (
+          <Button
+            key={option.value}
+            variant={statusFilter === option.value ? "linkActive" : "link"}
+            onClick={() => handleStatusChange(option.value)}
+            className="rounded-md text-sm sm:text-base"
+          >
+            {option.label}
+          </Button>
+        ))}
+      </div>
+
+      {loading && (
+        <div className="w-full h-full">
+          <Loader />
+        </div>
+      )}
+      {Error && isDelegated && <p>{t("userIncoming.errDelegation")}</p>}
+      {Error && !isDelegated && (
+        <p>{t("userIncoming.Error loading records.")}</p>
+      )}
+
+      {!loading && !Error && (
+        <DataTable
+          tableName={`${recordType.toUpperCase()} Incoming Records`}
+          columns={columns}
+          data={isSelf ? externalRecords : externalParent ? externalParent : []}
+          totalCount={safeTotalCount}
+          pagination={pagination}
+          setPagination={setPagination}
+          refresh={isSelf ? refetch : refetchParent}
+        />
+      )}
+    </div>
+  );
+};
+
+export default ExternalIncomingRecords;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/externalIncomingRecords/externalIncomingRecordsColumns.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/externalIncomingRecords/externalIncomingRecordsColumns.tsx
new file mode 100644
index 000000000..058599dba
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/externalIncomingRecords/externalIncomingRecordsColumns.tsx
@@ -0,0 +1,822 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { renderStatus } from "@/record-management/utils/renderDetails";
+
+import {
+  Activity,
+  BellRing,
+  EllipsisVertical,
+  Eye,
+  FileText,
+  Forward,
+  Lock,
+  MessageSquareMore,
+  Repeat2,
+  SearchCheck,
+  SquareX,
+  X,
+} from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import { Button } from "@/shared/common/ui/button";
+import { useState, useRef, useEffect } from "react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+
+import { useNavigate } from "react-router-dom";
+
+import React from "react";
+import { t } from "i18next";
+import { CCIncomingRecordDto } from "../../hooks/useCCIncomingRecords";
+import { AssignRecordDto } from "@/record-management/dto/IncomingRecords/taskDto";
+import AssigneRecord from "../internalIncomingRecords/AssigneRecord";
+import useCanAssignRecord from "@/record-management/components/hooks/useCanAssignRecord";
+import AcceptIncomingRecord from "../internalIncomingRecords/AcceptIncoming";
+import { toast } from "sonner";
+import i18n from "@/i18n";
+import { DisplayRecordDto } from "../internalIncomingRecords/internalIncomingRecordsActions";
+import ParentContainer from "../../recordOfficer/recordDetails/ParentAssignementContainer";
+import { useQueryClient } from "@tanstack/react-query";
+import RejectIncomingRecord from "../internalIncomingRecords/RejectIncoming";
+import RemarkCreationDialog from "../remarkCreationCard";
+import { useTranslation } from "react-i18next";
+import IncomingInstanceDetail from "../IncomingInstanceDetail";
+import { FaDiagramProject, FaSitemap } from "react-icons/fa6";
+
+// Utility component to show tooltip only when text overflows
+const OverflowTooltip = ({
+  children,
+  text,
+  maxWidth = 200,
+}: {
+  children: React.ReactNode;
+  text: string;
+  maxWidth?: number;
+}) => {
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const textRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const checkOverflow = () => {
+      if (textRef.current) {
+        const element = textRef.current;
+        setIsOverflowing(element.scrollWidth > element.clientWidth);
+      }
+    };
+
+    checkOverflow();
+    window.addEventListener("resize", checkOverflow);
+    return () => window.removeEventListener("resize", checkOverflow);
+  }, [text]);
+
+  if (isOverflowing) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div
+            ref={textRef}
+            className="overflow-hidden text-ellipsis whitespace-nowrap"
+            style={{ maxWidth: `${maxWidth}px` }}
+          >
+            {children}
+          </div>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p className="max-w-xs break-words">{text}</p>
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <div
+      ref={textRef}
+      className="overflow-hidden text-ellipsis whitespace-nowrap"
+      style={{ maxWidth: `${maxWidth}px` }}
+    >
+      {children}
+    </div>
+  );
+};
+
+const TaskUpdateBadge = ({
+  latestRemarkAt,
+  className = "",
+}: {
+  latestRemarkAt?: string | null;
+  className?: string;
+}) => {
+  const isRemark = !!latestRemarkAt;
+
+  return (
+    isRemark && (
+      <span
+        className={`inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-medium ${
+          isRemark
+            ? "border-amber-200 bg-amber-50 text-amber-700"
+            : "border-blue-200 bg-blue-50 text-blue-700"
+        } ${className}`}
+      >
+        {t("userIncoming.remarkAdded", "Remark Added")}
+      </span>
+    )
+  );
+};
+
+type PreventableEvent = {
+  preventDefault: () => void;
+};
+
+const getLatestRemarkAt = (
+  latestRemarkAt?: string | null,
+  childAssignments?: { latestRemarkAt?: string | null }[],
+) => {
+  const remarkDates = [
+    latestRemarkAt,
+    ...(childAssignments?.map((child) => child.latestRemarkAt) ?? []),
+  ].filter(Boolean) as string[];
+
+  return remarkDates.reduce<string | null>((latest, current) => {
+    if (!latest) return current;
+
+    const latestTime = new Date(latest).getTime();
+    const currentTime = new Date(current).getTime();
+
+    if (Number.isNaN(latestTime) || Number.isNaN(currentTime)) {
+      return latest;
+    }
+
+    return currentTime > latestTime ? current : latest;
+  }, null);
+};
+
+// External Incoming Actions component
+export const ExternalIncomingRecordActions = React.memo(
+  ({
+    rowData,
+    refetchTable,
+    isSelf,
+    pageIndex,
+    fromTable,
+    isDropdownOpen = false,
+    onDropdownOpenChange,
+    dropdownId = "",
+  }: {
+    rowData: CCIncomingRecordDto;
+    refetchTable?: () => void;
+    isSecretary?: boolean;
+    isSelf: boolean;
+    pageIndex?: number;
+    fromTable: boolean;
+    isLocked?: boolean; // NEW
+    isDropdownOpen?: boolean;
+    onDropdownOpenChange?: (open: boolean) => void;
+    dropdownId?: string;
+  }) => {
+    const navigate = useNavigate();
+    const { t } = useTranslation();
+    const [showAssignModal, setShowAssignModal] = useState(false);
+    const [showAcceptDialog, setShowAcceptDialog] = useState(false);
+    const [showRejectDialog, setShowRejectDialog] = useState(false);
+    const [showRemarkDialog, setShowRemarkDialog] = useState(false);
+    const [selectedRecord, setSelectedRecord] =
+      useState<DisplayRecordDto | null>(null);
+    const [isPanelOpen, setIsPanelOpen] = useState(false);
+    const queryClient = useQueryClient();
+    const secretaryView = isSelf ? "" : "parent";
+
+    const handleViewDetails = (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+
+      const baseUrl = `/record-management/viewIncoming/incoming/${rowData?.id}/?page=${pageIndex}`;
+      const url =
+        secretaryView === "parent" ? `${baseUrl}&view=parent` : baseUrl;
+
+      navigate(url, {
+        state: {
+          actionRowData: rowData,
+        },
+      });
+    };
+
+    const handleReply = (e: PreventableEvent) => {
+      e.preventDefault();
+      navigate(`/record-management/userRecords/addUserRecord/${rowData.id}`);
+    };
+
+    const openAssignDialog = (e: PreventableEvent) => {
+      e.preventDefault();
+
+      setShowAssignModal(true);
+    };
+
+    const openRemarkDialog = (e: PreventableEvent) => {
+      e.preventDefault();
+
+      setShowRemarkDialog(true);
+    };
+
+    const openAcceptDialog = (e: PreventableEvent) => {
+      e.preventDefault();
+
+      setShowAcceptDialog(true);
+    };
+
+    const openRejectDialog = (e: PreventableEvent) => {
+      e.preventDefault();
+
+      setShowRejectDialog(true);
+    };
+
+    const status = rowData?.status;
+    const latestRemarkAt = getLatestRemarkAt(
+      rowData?.latestRemarkAt,
+      rowData?.childAssignments,
+    );
+    const isLocked = rowData?.isLocked ?? false;
+    const normalizedStatus = (status ?? "").toString().trim().toLowerCase();
+    const isRejected = normalizedStatus === "rejected";
+    const isInProgress =
+      normalizedStatus === "draft" || normalizedStatus === "in_progress";
+    const isReassigned = normalizedStatus === "re_assigned";
+    const { canAssignRecord } = useCanAssignRecord();
+
+    const isAcceptable = !isRejected && isInProgress;
+    const isAssignable = !rowData?.isDelegation && canAssignRecord;
+    const isRejectable = !rowData?.isDelegation && !isRejected && isInProgress;
+    const isRemarkable = isReassigned;
+    const isReplyable = !isRejected && isInProgress;
+
+    const shouldShowMenu = true;
+
+    const hasInlineActions =
+      shouldShowMenu &&
+      isSelf &&
+      (isAcceptable ||
+        isAssignable ||
+        isReplyable ||
+        isRejectable ||
+        isRemarkable);
+
+    const effectiveIsAcceptable = isAcceptable && !isLocked;
+    const effectiveIsAssignable = isAssignable && !isLocked;
+    const effectiveIsRejectable = isRejectable && !isLocked;
+    const effectiveIsReplyable = isReplyable && !isLocked;
+    const effectiveIsRemarkable = isRemarkable && !isLocked;
+    const effectiveHasInlineActions = hasInlineActions && !isLocked;
+    const effectiveShouldShowMenu = shouldShowMenu && isSelf && !isLocked;
+
+    return (
+      <>
+        {fromTable ? (
+          <div className="flex gap-1 items-center">
+            {/* View Detail Button - ALLOWED even when locked */}
+            <div className="flex min-w-[110px] flex-col items-start">
+              <Button
+                variant="viewDetail"
+                className="w-full"
+                onClick={handleViewDetails}
+              >
+                {t("userIncoming.View Detail")}
+              </Button>
+              <TaskUpdateBadge
+                latestRemarkAt={latestRemarkAt}
+                className="mt-1"
+              />
+            </div>
+
+            {/* NEW: Locked Badge */}
+            {isLocked && (
+              <div className="flex items-center gap-1.5 rounded-full border border-amber-200 bg-amber-50 px-3 py-1.5 text-xs font-medium text-amber-700 dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-400">
+                <Lock className="h-3.5 w-3.5" />
+                {t("userIncoming.Locked", "Locked")}
+              </div>
+            )}
+
+            {/* Dropdown Menu - Hidden when locked */}
+            {effectiveShouldShowMenu && (
+              <DropdownMenu
+                open={isDropdownOpen}
+                onOpenChange={onDropdownOpenChange || (() => {})}
+              >
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    className="flex h-8 w-8 p-0 sm:h-8 sm:w-8 data-[state=open]:bg-muted"
+                    aria-haspopup="menu"
+                    aria-expanded={isDropdownOpen}
+                  >
+                    <EllipsisVertical className="h-4 w-4" />
+                    <span className="sr-only">
+                      {t("userIncoming.Open actions menu")}
+                    </span>
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  {effectiveIsAcceptable && (
+                    <DropdownMenuItem
+                      onSelect={openAcceptDialog}
+                      className="cursor-pointer hover:!text-[#17a397] !bg-transparent transition-colors duration-200"
+                    >
+                      <SearchCheck className="mr-2 h-4 w-4 group-hover:text-white transition-colors duration-200" />
+                      {t("userIncoming.Accept")}
+                    </DropdownMenuItem>
+                  )}
+                  {effectiveIsAssignable && (
+                    <DropdownMenuItem
+                      onSelect={openAssignDialog}
+                      className="cursor-pointer hover:!text-[#17a397] !bg-transparent transition-colors duration-200"
+                    >
+                      <Forward className="mr-2 h-4 w-4" />
+                      {t("userIncoming.Assign")}
+                    </DropdownMenuItem>
+                  )}
+                  {effectiveIsReplyable && (
+                    <DropdownMenuItem
+                      onSelect={handleReply}
+                      className="cursor-pointer hover:!text-[#17a397] !bg-transparent transition-colors duration-200"
+                    >
+                      <Repeat2 className="mr-2 h-4 w-4 group-hover:text-white transition-colors duration-200" />
+                      {t("userIncoming.reply")}
+                    </DropdownMenuItem>
+                  )}
+                  {effectiveIsRejectable && (
+                    <DropdownMenuItem
+                      onSelect={openRejectDialog}
+                      className="cursor-pointer hover:!text-[#ff8787] !bg-transparent transition-colors duration-200"
+                    >
+                      <SquareX className="mr-2 h-4 w-4 group-hover:text-white transition-colors duration-200" />
+                      {t("userIncoming.Reject")}
+                    </DropdownMenuItem>
+                  )}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+
+            {/* Activity Button - ALLOWED even when locked */}
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="
+          h-9 w-9 rounded-lg
+          text-muted-foreground
+              hover:bg-primary
+      hover:text-gray-100
+          transition-colors
+        "
+                    onClick={(e) => {
+                      e.preventDefault();
+
+                      const record = rowData?.record;
+
+                      if (record) {
+                        setSelectedRecord({
+                          id: record.id,
+                          recordTypeKey: record.recordTypeKey,
+                          subject: record.content[0]?.subject ?? "",
+                          createdAt: new Date().toISOString(),
+                          referenceNumber: "N/A",
+                        });
+
+                        setIsPanelOpen(true);
+                      }
+                    }}
+                    aria-label={t("setting.viewWF")}
+                  >
+                    <FaSitemap className="h-4 w-4" />
+                  </Button>
+                </TooltipTrigger>
+
+                <TooltipContent side="top">
+                  <p>{t("setting.viewWF")}</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+            <IncomingInstanceDetail
+              instanceId={rowData.id as string}
+              rowData={rowData}
+            />
+            {isPanelOpen && (
+              <>
+                <div
+                  className="fixed inset-0 z-40 bg-black/40 dark:bg-black/60 backdrop-blur-sm transition-opacity duration-300"
+                  onClick={() => setIsPanelOpen(false)}
+                />
+
+                <div
+                  className={`fixed top-0 right-0 z-50 h-full w-full sm:w-[600px] lg:w-[720px] bg-white dark:bg-gray-900 shadow-2xl border-l border-gray-200 dark:border-gray-800 transform transition-transform duration-300 ease-in-out flex flex-col ${
+                    isPanelOpen ? "translate-x-0" : "translate-x-full"
+                  }`}
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <div className="flex items-center justify-between px-5 py-4 border-b border-gray-200 dark:border-gray-800 bg-gradient-to-r from-primary-50 to-primary-50/50 dark:from-primary-900/20 dark:to-primary-900/10">
+                    <div className="flex items-center gap-3">
+                      <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary-100 dark:bg-primary-900/40">
+                        <FileText className="h-5 w-5 text-primary-600 dark:text-primary-400" />
+                      </div>
+                      <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+                        {t("userIncoming.View Detail")}
+                      </h2>
+                    </div>
+                    <button
+                      className="flex h-8 w-8 items-center justify-center rounded-lg text-gray-500 dark:text-gray-400 hover:bg-red-50 dark:hover:bg-red-900/30 hover:text-red-600 dark:hover:text-red-400 transition-colors"
+                      onClick={() => setIsPanelOpen(false)}
+                    >
+                      <X className="h-5 w-5" />
+                    </button>
+                  </div>
+
+                  <div className="flex-1 overflow-y-auto bg-gray-50/50 dark:bg-gray-900">
+                    {selectedRecord ? (
+                      <div className="p-4 sm:p-5">
+                        <ParentContainer
+                          recordId={selectedRecord.id}
+                          recordTitle=""
+                          recordType={selectedRecord.recordTypeKey}
+                          subject={selectedRecord.subject}
+                          createdDate={selectedRecord.createdAt}
+                          referenceNumber={selectedRecord.referenceNumber}
+                        />
+                      </div>
+                    ) : (
+                      <div className="flex flex-col items-center justify-center h-full text-gray-400 dark:text-gray-500">
+                        <FileText className="h-12 w-12 mb-3 opacity-40" />
+                        <p className="text-sm font-medium">
+                          No record selected.
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+        ) : (
+          <>
+            <div>
+              {isLocked ? (
+                /* NEW: Locked state for inline view */
+                <div className="flex items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 px-4 py-2.5 text-sm font-medium text-amber-700 dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-400">
+                  <Lock className="h-4 w-4" />
+                  {t("userIncoming.RecordLocked", "This record is locked")}
+                </div>
+              ) : effectiveHasInlineActions ? (
+                <div className="flex flex-wrap gap-5">
+                  {effectiveIsAcceptable && (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={openAcceptDialog}
+                      className="h-9 px-4 flex items-center gap-2 rounded-full bg-gradient-to-r from-emerald-50 to-green-50 border-emerald-200 hover:from-emerald-100 hover:to-green-100 hover:border-emerald-300 hover:text-emerald-700 transition-all duration-300 shadow-sm hover:shadow-md"
+                    >
+                      <SearchCheck className="h-4 w-4 text-emerald-600" />
+                      <span className="text-sm font-medium text-emerald-700">
+                        {t("userIncoming.Accept")}
+                      </span>
+                    </Button>
+                  )}
+                  {effectiveIsAssignable && (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={openAssignDialog}
+                      className="h-9 px-4 flex items-center gap-2 rounded-full bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-200 hover:from-blue-100 hover:to-indigo-100 hover:border-blue-300 hover:text-blue-700 transition-all duration-300 shadow-sm hover:shadow-md"
+                    >
+                      <Forward className="h-4 w-4 text-blue-600" />
+                      <span className="text-sm font-medium text-blue-700">
+                        {t("userIncoming.Assign")}
+                      </span>
+                    </Button>
+                  )}
+                  {effectiveIsReplyable && (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={handleReply}
+                      className="h-9 px-4 flex items-center gap-2 rounded-full bg-gradient-to-r from-amber-50 to-orange-50 border-amber-200 hover:from-amber-100 hover:to-orange-100 hover:border-amber-300 hover:text-amber-700 transition-all duration-300 shadow-sm hover:shadow-md"
+                    >
+                      <Repeat2 className="h-4 w-4 text-amber-600" />
+                      <span className="text-sm font-medium text-amber-700">
+                        {t("userIncoming.reply")}
+                      </span>
+                    </Button>
+                  )}
+                  {effectiveIsRejectable && (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={openRejectDialog}
+                      className="h-9 px-4 flex items-center gap-2 rounded-full bg-gradient-to-r from-rose-50 to-red-50 border-rose-200 hover:from-rose-100 hover:to-red-100 hover:border-rose-300 hover:text-rose-700 transition-all duration-300 shadow-sm hover:shadow-md"
+                    >
+                      <SquareX className="h-4 w-4 text-rose-600" />
+                      <span className="text-sm font-medium text-rose-700">
+                        {t("userIncoming.Reject")}
+                      </span>
+                    </Button>
+                  )}
+
+                  <IncomingInstanceDetail
+                    instanceId={rowData.id as string}
+                    instanceType={"outgoing"}
+                    fromTable={false}
+                  />
+                </div>
+              ) : (
+                <p className="text-sm text-gray-500 dark:text-gray-400 italic">
+                  {t("userIncoming.noActionsAvailable", {
+                    defaultValue: "No actions available for this record.",
+                  })}
+                </p>
+              )}
+            </div>
+          </>
+        )}
+
+        {showRemarkDialog && !isLocked && (
+          <RemarkCreationDialog
+            open={showRemarkDialog}
+            onClose={() => {
+              setShowRemarkDialog(false);
+              refetchTable?.();
+              queryClient.invalidateQueries({
+                queryKey: ["incoming-instances"],
+              });
+              queryClient.invalidateQueries({
+                queryKey: ["dashbordReport"],
+              });
+            }}
+            incomingInstanceId={rowData?.id as string}
+          />
+        )}
+
+        {showAssignModal && !isLocked && (
+          <AssigneRecord
+            record={rowData as unknown as AssignRecordDto}
+            isTable={fromTable}
+            onClose={() => {
+              setShowAssignModal(false);
+              if (refetchTable) {
+                refetchTable();
+              }
+              queryClient.invalidateQueries({
+                queryKey: ["external-incoming"],
+              });
+              queryClient.invalidateQueries({
+                queryKey: ["external-incoming-v2"],
+              });
+              queryClient.invalidateQueries({ queryKey: ["dashbordReport"] });
+            }}
+            onSuccess={() => {
+              toast.success(t("msg.successassign"));
+              setShowAssignModal(false);
+              if (refetchTable) {
+                refetchTable();
+              }
+              queryClient.invalidateQueries({
+                queryKey: ["external-incoming"],
+              });
+              queryClient.invalidateQueries({
+                queryKey: ["external-incoming-v2"],
+              });
+              queryClient.invalidateQueries({ queryKey: ["dashbordReport"] });
+            }}
+            isOpen={true}
+          />
+        )}
+
+        {showAcceptDialog && !isLocked && (
+          <AcceptIncomingRecord
+            open={showAcceptDialog}
+            onClose={() => {
+              setShowAcceptDialog(false);
+              if (refetchTable) {
+                refetchTable();
+              }
+              queryClient.invalidateQueries({
+                queryKey: ["external-incoming"],
+              });
+              queryClient.invalidateQueries({
+                queryKey: ["external-incoming-v2"],
+              });
+              queryClient.invalidateQueries({ queryKey: ["dashbordReport"] });
+            }}
+            incomingInstanceId={rowData.id as string}
+          />
+        )}
+
+        {showRejectDialog && !isLocked && (
+          <RejectIncomingRecord
+            open={showRejectDialog}
+            onClose={() => {
+              setShowRejectDialog(false);
+              if (refetchTable) {
+                refetchTable();
+              }
+              queryClient.invalidateQueries({
+                queryKey: ["incoming-instances"],
+              });
+              queryClient.invalidateQueries({ queryKey: ["dashbordReport"] });
+            }}
+            onSuccess={() => {
+              if (!fromTable) {
+                navigate(-1);
+              }
+            }}
+            incomingInstanceId={rowData.id as string}
+          />
+        )}
+      </>
+    );
+  },
+);
+
+export const ExternalIncomingRecordsColumns = (
+  refetch: () => void,
+  localizedName: (name?: { am?: string; en?: string }) => string,
+  isSecretary: boolean,
+  isSelf: boolean,
+  pageNo: number,
+  openDropdownId?: string | null,
+  onDropdownChange?: (id: string | null) => void,
+): ColumnDef<CCIncomingRecordDto>[] => [
+  {
+    id: "letterName",
+    header: () => t("viewDetail.fileName1"),
+    cell: ({ row }) => {
+      const letterName = row?.original?.record?.letterName || "-";
+
+      return (
+        <OverflowTooltip text={letterName} maxWidth={150}>
+          {letterName}
+        </OverflowTooltip>
+      );
+    },
+    accessorKey: "letterName",
+    enableHiding: true,
+    size: 150,
+  },
+  {
+    id: "referenceNumber",
+    header: () => t("viewDetail.referenceNumber"),
+    cell: ({ row }) => {
+      const referenceNo = row?.original?.record?.referenceNumber || "___";
+
+      return (
+        <OverflowTooltip text={referenceNo} maxWidth={150}>
+          {referenceNo}
+        </OverflowTooltip>
+      );
+    },
+    accessorKey: "referenceNumber",
+    enableHiding: true,
+    size: 150,
+  },
+  {
+    id: "organizationName",
+    header: () => t("userIncoming.Sending Organization"),
+    cell: ({ row }) => {
+      const organizationName =
+        row?.original?.record?.metadata?.organizationName ||
+        row?.original?.record?.initiator?.unit?.organization?.name;
+
+      const localizedOrgName = localizedName(organizationName);
+      const displayText =
+        localizedOrgName || t("userIncoming.No Sending organization");
+
+      return (
+        <OverflowTooltip text={displayText} maxWidth={200}>
+          {displayText}
+        </OverflowTooltip>
+      );
+    },
+    accessorKey: "organizationName",
+    enableHiding: true,
+
+    size: 200,
+  },
+  {
+    id: "subject",
+    header: () => t("userIncoming.Subject"),
+    cell: ({ row }) => {
+      const subject = row.original.record.content?.[0].subject;
+      const displayText = subject ? subject : t("userIncoming.No Subject");
+
+      return (
+        <OverflowTooltip text={displayText} maxWidth={200}>
+          {displayText}
+        </OverflowTooltip>
+      );
+    },
+
+    accessorKey: "Subject",
+    enableHiding: true,
+    size: 200,
+  },
+  {
+    id: "isUrgent",
+    header: () => t("userIncoming.Is Urgent"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      const isUrgent = rowData.record.isUrgent;
+
+      return (
+        <span
+          className={`relative inline-flex items-center px-2 py-1 rounded-md text-sm font-semibold ${
+            isUrgent
+              ? "bg-yellow-100 text-yellow-800"
+              : "bg-gray-100 text-gray-600"
+          }`}
+        >
+          {isUrgent && (
+            <span className="absolute -top-0 -right-5 flex h-4 w-4">
+              {/* Pulsing ring */}
+              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
+
+              {/* Bell icon stays visible */}
+              <span className="relative inline-flex items-center justify-center pt-3">
+                <BellRing className="h-5 w-5 text-red-500" />
+              </span>
+            </span>
+          )}
+
+          {isUrgent ? t("common.yes") : t("common.no")}
+        </span>
+      );
+    },
+    enableHiding: true,
+    accessorKey: "isUrgent",
+  },
+  {
+    accessorKey: "createdAt",
+    header: () => t("userIncoming.Date"),
+    cell: ({ row }) => {
+      const record = row.original;
+      const isAmharic = i18n.language === "am";
+      const amharicDate = record.amharicCreatedAt;
+      const createdAt = record.createdAt;
+      let displayText = "-";
+      if (isAmharic && amharicDate) {
+        displayText = amharicDate;
+      } else if (createdAt) {
+        displayText = new Date(createdAt).toLocaleDateString(i18n.language, {
+          year: "numeric",
+          month: "short",
+          day: "numeric",
+          hour: "numeric",
+          minute: "numeric",
+        });
+      }
+
+      return displayText;
+    },
+    size: 150,
+  },
+  {
+    id: "status",
+    header: () => t("userRecord.Status"),
+    cell: ({ row }) => {
+      const status = row.original.status;
+      const statusElement = status ? renderStatus(status, status) : null;
+
+      return statusElement;
+    },
+    accessorKey: "TaskStatus",
+    enableHiding: true,
+    size: 120,
+  },
+  {
+    id: "Actions",
+    header: t("userIncoming.Actions"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      const dropdownId = rowData.id || "";
+      return (
+        <ExternalIncomingRecordActions
+          rowData={rowData}
+          refetchTable={refetch}
+          isSecretary={isSecretary}
+          isSelf={isSelf}
+          pageIndex={pageNo}
+          fromTable={true}
+          isDropdownOpen={openDropdownId === dropdownId}
+          onDropdownOpenChange={(open) => {
+            onDropdownChange?.(open ? dropdownId : null);
+          }}
+          dropdownId={dropdownId}
+        />
+      );
+    },
+    enableHiding: true,
+    accessorKey: "Actions",
+  },
+];
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/externalIncomingRecords/externalIncomingRecordsColumnsV2.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/externalIncomingRecords/externalIncomingRecordsColumnsV2.tsx
new file mode 100644
index 000000000..ce75d125c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/externalIncomingRecords/externalIncomingRecordsColumnsV2.tsx
@@ -0,0 +1,792 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { renderStatus } from "@/record-management/utils/renderDetails";
+
+import {
+  Activity,
+  BellRing,
+  EllipsisVertical,
+  FileText,
+  Forward,
+  Lock,
+  MessageSquareMore,
+  Repeat2,
+  SearchCheck,
+  SquareX,
+  X,
+} from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import { Button } from "@/shared/common/ui/button";
+import { useState, useRef, useEffect } from "react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+
+import { useNavigate } from "react-router-dom";
+
+import React from "react";
+import { t } from "i18next";
+import AcceptIncomingRecord from "../internalIncomingRecords/AcceptIncoming";
+import { toast } from "sonner";
+import i18n from "@/i18n";
+import { DisplayRecordDto } from "../internalIncomingRecords/internalIncomingRecordsActions";
+import ParentContainer from "../../recordOfficer/recordDetails/ParentAssignementContainer";
+import { useQueryClient } from "@tanstack/react-query";
+import RejectIncomingRecord from "../internalIncomingRecords/RejectIncoming";
+import { IncomingLetterItem } from "@/record-management/dto/IncomingRecords/incomingTasksDto";
+import AssigneRecordV2 from "../internalIncomingRecords/AssignRecordV2";
+import useCanAssignRecord from "@/record-management/components/hooks/useCanAssignRecord";
+import RemarkCreationDialog from "../remarkCreationCard";
+import { useTranslation } from "react-i18next";
+import IncomingInstanceDetail from "../IncomingInstanceDetail";
+
+// Utility component to show tooltip only when text overflows
+const OverflowTooltip = ({
+  children,
+  text,
+  maxWidth = 200,
+}: {
+  children: React.ReactNode;
+  text: string;
+  maxWidth?: number;
+}) => {
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const textRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const checkOverflow = () => {
+      if (textRef.current) {
+        const element = textRef.current;
+        setIsOverflowing(element.scrollWidth > element.clientWidth);
+      }
+    };
+
+    checkOverflow();
+    window.addEventListener("resize", checkOverflow);
+    return () => window.removeEventListener("resize", checkOverflow);
+  }, [text]);
+
+  if (isOverflowing) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div
+            ref={textRef}
+            className="overflow-hidden text-ellipsis whitespace-nowrap"
+            style={{ maxWidth: `${maxWidth}px` }}>
+            {children}
+          </div>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p className="max-w-xs break-words">{text}</p>
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <div
+      ref={textRef}
+      className="overflow-hidden text-ellipsis whitespace-nowrap"
+      style={{ maxWidth: `${maxWidth}px` }}>
+      {children}
+    </div>
+  );
+};
+
+const TaskUpdateBadge = ({
+  latestRemarkAt,
+  className = "",
+}: {
+  latestRemarkAt?: string | null;
+  className?: string;
+}) => {
+  const isRemark = !!latestRemarkAt;
+
+  return (
+    isRemark && (
+      <span
+        className={`inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-medium ${
+          isRemark
+            ? "border-amber-200 bg-amber-50 text-amber-700"
+            : "border-blue-200 bg-blue-50 text-blue-700"
+        } ${className}`}>
+        {t("userIncoming.remarkAdded", "Remark Added")}
+      </span>
+    )
+  );
+};
+
+type PreventableEvent = {
+  preventDefault: () => void;
+};
+
+const getLatestRemarkAt = (
+  latestRemarkAt?: string | null,
+  childAssignments?: { latestRemarkAt?: string | null }[],
+) => {
+  const remarkDates = [
+    latestRemarkAt,
+    ...(childAssignments?.map((child) => child.latestRemarkAt) ?? []),
+  ].filter(Boolean) as string[];
+
+  return remarkDates.reduce<string | null>((latest, current) => {
+    if (!latest) return current;
+
+    const latestTime = new Date(latest).getTime();
+    const currentTime = new Date(current).getTime();
+
+    if (Number.isNaN(latestTime) || Number.isNaN(currentTime)) {
+      return latest;
+    }
+
+    return currentTime > latestTime ? current : latest;
+  }, null);
+};
+
+// External Incoming Actions component
+export const ExternalIncomingRecordActionsV2 = React.memo(
+  ({
+    rowData,
+    refetchTable,
+    isSelf,
+    pageIndex,
+    fromTable,
+    isDropdownOpen = false,
+    onDropdownOpenChange,
+    dropdownId = "",
+    onAssign,
+  }: {
+    rowData: IncomingLetterItem;
+    refetchTable?: () => void;
+    isSecretary?: boolean;
+    isSelf: boolean;
+    pageIndex?: number;
+    fromTable: boolean;
+    isLocked?: boolean; // NEW
+    isDropdownOpen?: boolean;
+    onDropdownOpenChange?: (open: boolean) => void;
+    dropdownId?: string;
+    onAssign?: (rowData: IncomingLetterItem) => void;
+  }) => {
+    const navigate = useNavigate();
+    const { t } = useTranslation();
+    const [showAssignModal, setShowAssignModal] = useState(false);
+    const [showAcceptDialog, setShowAcceptDialog] = useState(false);
+    const [showRejectDialog, setShowRejectDialog] = useState(false);
+    const [showRemarkDialog, setShowRemarkDialog] = useState(false);
+    const [selectedRecord, setSelectedRecord] =
+      useState<DisplayRecordDto | null>(null);
+    const [isPanelOpen, setIsPanelOpen] = useState(false);
+    const queryClient = useQueryClient();
+    const secretaryView = isSelf ? "" : "parent";
+
+    const handleViewDetails = (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+      
+      const lastIncomingInstance = rowData?.incomingInstances?.[0];
+      const baseUrl = `/record-management/viewIncoming/incoming/${lastIncomingInstance?.id}/?page=${pageIndex}`;
+      const url =
+        secretaryView === "parent" ? `${baseUrl}&view=parent` : baseUrl;
+
+      navigate(url, {
+        state: {
+          actionRowData: rowData,
+        },
+      });
+    };
+
+    const handleReply = (e: PreventableEvent) => {
+      e.preventDefault();
+      navigate(`/record-management/userRecords/addUserRecord/${rowData.id}`);
+    };
+
+    const openRemarkDialog = (e: PreventableEvent) => {
+      e.preventDefault();
+      
+      setShowRemarkDialog(true);
+    };
+
+    const openAssignDialog = (e: PreventableEvent) => {
+      e.preventDefault();
+      if (fromTable && onAssign) {
+        onAssign(rowData);
+        onDropdownOpenChange?.(false);
+        return;
+      }
+      
+      setShowAssignModal(true);
+    };
+
+    const openAcceptDialog = (e: PreventableEvent) => {
+      e.preventDefault();
+      
+      setShowAcceptDialog(true);
+    };
+
+    const openRejectDialog = (e: PreventableEvent) => {
+      e.preventDefault();
+      
+      setShowRejectDialog(true);
+    };
+
+    const lastInstance = rowData?.incomingInstances?.[0];
+    const latestRemarkAt = getLatestRemarkAt(
+      lastInstance?.latestRemarkAt,
+      lastInstance?.childAssignments,
+    );
+    const status = lastInstance?.status;
+    const isLocked = rowData?.isLocked ?? false;
+    const normalizedStatus = (status ?? "").toString().trim().toLowerCase();
+    const isRejected = normalizedStatus === "rejected";
+    const isInProgress =
+      normalizedStatus === "draft" || normalizedStatus === "in_progress";
+    const isReassigned = normalizedStatus === "re_assigned";
+    const { canAssignRecord } = useCanAssignRecord();
+
+    const isAcceptable = !isRejected && isInProgress;
+    const isAssignable = !rowData?.isDelegation && canAssignRecord;
+    const isRejectable = !rowData?.isDelegation && !isRejected && isInProgress;
+    const isRemarkable = isReassigned;
+    const isReplyable = !isRejected && isInProgress;
+
+    const shouldShowMenu = true;
+
+    const hasInlineActions =
+      shouldShowMenu &&
+      isSelf &&
+      (isAcceptable ||
+        isAssignable ||
+        isReplyable ||
+        isRejectable ||
+        isRemarkable);
+
+    const effectiveIsAcceptable = isAcceptable && !isLocked;
+    const effectiveIsAssignable = isAssignable && !isLocked;
+    const effectiveIsRejectable = isRejectable && !isLocked;
+    const effectiveIsReplyable = isReplyable && !isLocked;
+    const effectiveIsRemarkable = isRemarkable && !isLocked;
+    const effectiveHasInlineActions = hasInlineActions && !isLocked;
+    const effectiveShouldShowMenu = shouldShowMenu && isSelf && !isLocked;
+
+    return (
+      <>
+        {fromTable ? (
+          <div className="flex gap-1 items-center">
+            {/* View Detail Button - ALLOWED even when locked */}
+            <div className="flex min-w-[110px] flex-col items-start">
+              <Button
+                variant="viewDetail"
+                className="w-full"
+                onClick={handleViewDetails}>
+                {t("userIncoming.View Detail")}
+              </Button>
+              <TaskUpdateBadge
+                latestRemarkAt={latestRemarkAt}
+                className="mt-1"
+              />
+            </div>
+
+            {/* NEW: Locked Badge */}
+            {isLocked && (
+              <div className="flex items-center gap-1.5 rounded-full border border-amber-200 bg-amber-50 px-3 py-1.5 text-xs font-medium text-amber-700 dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-400">
+                <Lock className="h-3.5 w-3.5" />
+                {t("userIncoming.Locked", "Locked")}
+              </div>
+            )}
+
+            {/* Dropdown Menu - Hidden when locked */}
+            {effectiveShouldShowMenu && (
+              <DropdownMenu open={isDropdownOpen} onOpenChange={onDropdownOpenChange || (() => {})}>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    className="flex h-8 w-8 p-0 sm:h-8 sm:w-8 data-[state=open]:bg-muted"
+                    aria-haspopup="menu"
+                    aria-expanded={isDropdownOpen}>
+                    <EllipsisVertical className="h-4 w-4" />
+                    <span className="sr-only">
+                      {t("userIncoming.Open actions menu")}
+                    </span>
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  {effectiveIsAcceptable && (
+                    <DropdownMenuItem
+                      onSelect={openAcceptDialog}
+                      className="cursor-pointer hover:!text-[#17a397] !bg-transparent transition-colors duration-200">
+                      <SearchCheck className="mr-2 h-4 w-4 group-hover:text-white transition-colors duration-200" />
+                      {t("userIncoming.Accept")}
+                    </DropdownMenuItem>
+                  )}
+                  {effectiveIsAssignable && (
+                    <DropdownMenuItem
+                      onSelect={openAssignDialog}
+                      className="cursor-pointer hover:!text-[#17a397] !bg-transparent transition-colors duration-200">
+                      <Forward className="mr-2 h-4 w-4" />
+                      {t("userIncoming.Assign")}
+                    </DropdownMenuItem>
+                  )}
+                  {effectiveIsReplyable && (
+                    <DropdownMenuItem
+                      onSelect={handleReply}
+                      className="cursor-pointer hover:!text-[#17a397] !bg-transparent transition-colors duration-200">
+                      <Repeat2 className="mr-2 h-4 w-4 group-hover:text-white transition-colors duration-200" />
+                      {t("userIncoming.reply")}
+                    </DropdownMenuItem>
+                  )}
+                  {effectiveIsRejectable && (
+                    <DropdownMenuItem
+                      onSelect={openRejectDialog}
+                      className="cursor-pointer hover:!text-[#ff8787] !bg-transparent transition-colors duration-200">
+                      <SquareX className="mr-2 h-4 w-4 group-hover:text-white transition-colors duration-200" />
+                      {t("userIncoming.Reject")}
+                    </DropdownMenuItem>
+                  )}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+
+            {/* Activity Button - ALLOWED even when locked */}
+            <Button
+              className="bg-transparent hover:bg-transparent text-primary hover:text-primary h-12 w-12 sm:h-10 sm:w-10 p-0"
+              onClick={(e) => {
+                e.preventDefault();
+                const record = rowData;
+                if (record) {
+                  setSelectedRecord({
+                    id: record.id,
+                    recordTypeKey: record.recordTypeKey,
+                    subject: record.content[0]?.subject ?? "",
+                    createdAt: new Date().toISOString(),
+                    referenceNumber: "N/A",
+                  });
+                  setIsPanelOpen(true);
+                }
+              }}
+              aria-label={t("userIncoming.View Detail")}>
+              <Activity />
+            </Button>
+            <IncomingInstanceDetail
+              instanceId={rowData?.incomingInstances?.[0]?.id as string}
+              rowData={rowData}
+            />
+            {isPanelOpen && (
+              <>
+                <div
+                  className="fixed inset-0 z-40 bg-black/40 dark:bg-black/60 backdrop-blur-sm transition-opacity duration-300"
+                  onClick={() => setIsPanelOpen(false)}
+                />
+
+                <div
+                  className={`fixed top-0 right-0 z-50 h-full w-full sm:w-[600px] lg:w-[720px] bg-white dark:bg-gray-900 shadow-2xl border-l border-gray-200 dark:border-gray-800 transform transition-transform duration-300 ease-in-out flex flex-col ${
+                    isPanelOpen ? "translate-x-0" : "translate-x-full"
+                  }`}
+                  onClick={(e) => e.stopPropagation()}>
+                  <div className="flex items-center justify-between px-5 py-4 border-b border-gray-200 dark:border-gray-800 bg-gradient-to-r from-green-50 to-emerald-50/50 dark:from-green-900/20 dark:to-emerald-900/10">
+                    <div className="flex items-center gap-3">
+                      <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-green-100 dark:bg-green-900/40">
+                        <FileText className="h-5 w-5 text-green-600 dark:text-green-400" />
+                      </div>
+                      <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+                        {t("userIncoming.View Detail")}
+                      </h2>
+                    </div>
+                    <button
+                      className="flex h-8 w-8 items-center justify-center rounded-lg text-gray-500 dark:text-gray-400 hover:bg-red-50 dark:hover:bg-red-900/30 hover:text-red-600 dark:hover:text-red-400 transition-colors"
+                      onClick={() => setIsPanelOpen(false)}>
+                      <X className="h-5 w-5" />
+                    </button>
+                  </div>
+
+                  <div className="flex-1 overflow-y-auto bg-gray-50/50 dark:bg-gray-900">
+                    {selectedRecord ? (
+                      <div className="p-4 sm:p-5">
+                        <ParentContainer
+                          recordId={selectedRecord.id}
+                          recordTitle=""
+                          recordType={selectedRecord.recordTypeKey}
+                          subject={selectedRecord.subject}
+                          createdDate={selectedRecord.createdAt}
+                          referenceNumber={selectedRecord.referenceNumber}
+                        />
+                      </div>
+                    ) : (
+                      <div className="flex flex-col items-center justify-center h-full text-gray-400 dark:text-gray-500">
+                        <FileText className="h-12 w-12 mb-3 opacity-40" />
+                        <p className="text-sm font-medium">
+                          No record selected.
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+        ) : (
+          <>
+            <div>
+              {isLocked ? (
+                /* NEW: Locked state for inline view */
+                <div className="flex items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 px-4 py-2.5 text-sm font-medium text-amber-700 dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-400">
+                  <Lock className="h-4 w-4" />
+                  {t("userIncoming.RecordLocked", "This record is locked")}
+                </div>
+              ) : effectiveHasInlineActions ? (
+                <div className="flex flex-wrap gap-5">
+                  {effectiveIsAcceptable && (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={openAcceptDialog}
+                      className="h-9 px-4 flex items-center gap-2 rounded-full bg-gradient-to-r from-emerald-50 to-green-50 border-emerald-200 hover:from-emerald-100 hover:to-green-100 hover:border-emerald-300 hover:text-emerald-700 transition-all duration-300 shadow-sm hover:shadow-md dark:border-emerald-800 dark:from-emerald-950/50 dark:to-green-950/50 dark:hover:border-emerald-700 dark:hover:from-emerald-900/50 dark:hover:to-green-900/50 dark:text-emerald-300">
+                      <SearchCheck className="h-4 w-4 text-emerald-600" />
+                      <span className="text-sm font-medium text-emerald-700">
+                        {t("userIncoming.Accept")}
+                      </span>
+                    </Button>
+                  )}
+                  {effectiveIsAssignable && (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={openAssignDialog}
+                      className="h-9 px-4 flex items-center gap-2 rounded-full bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-200 hover:from-blue-100 hover:to-indigo-100 hover:border-blue-300 hover:text-blue-700 transition-all duration-300 shadow-sm hover:shadow-md dark:border-blue-800 dark:from-blue-950/50 dark:to-indigo-950/50 dark:hover:border-blue-700 dark:hover:from-blue-900/50 dark:hover:to-indigo-900/50 dark:text-blue-300">
+                      <Forward className="h-4 w-4 text-blue-600" />
+                      <span className="text-sm font-medium text-blue-700">
+                        {t("userIncoming.Assign")}
+                      </span>
+                    </Button>
+                  )}
+                  {effectiveIsReplyable && (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={handleReply}
+                      className="h-9 px-4 flex items-center gap-2 rounded-full bg-gradient-to-r from-amber-50 to-orange-50 border-amber-200 hover:from-amber-100 hover:to-orange-100 hover:border-amber-300 hover:text-amber-700 transition-all duration-300 shadow-sm hover:shadow-md dark:border-amber-800 dark:from-amber-950/50 dark:to-orange-950/50 dark:hover:border-amber-700 dark:hover:from-amber-900/50 dark:hover:to-orange-900/50 dark:text-amber-300">
+                      <Repeat2 className="h-4 w-4 text-amber-600" />
+                      <span className="text-sm font-medium text-amber-700">
+                        {t("userIncoming.reply")}
+                      </span>
+                    </Button>
+                  )}
+                  {effectiveIsRejectable && (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={openRejectDialog}
+                      className="h-9 px-4 flex items-center gap-2 rounded-full bg-gradient-to-r from-rose-50 to-red-50 border-rose-200 hover:from-rose-100 hover:to-red-100 hover:border-rose-300 hover:text-rose-700 transition-all duration-300 shadow-sm hover:shadow-md dark:border-rose-800 dark:from-rose-950/50 dark:to-red-950/50 dark:hover:border-rose-700 dark:hover:from-rose-900/50 dark:hover:to-red-900/50 dark:text-rose-300">
+                      <SquareX className="h-4 w-4 text-rose-600" />
+                      <span className="text-sm font-medium text-rose-700">
+                        {t("userIncoming.Reject")}
+                      </span>
+                    </Button>
+                  )}
+
+                  <IncomingInstanceDetail
+                    instanceId={rowData?.incomingInstances?.[0]?.id as string}
+                    rowData={rowData}
+                    fromTable={false}
+                  />
+                </div>
+              ) : (
+                <p className="text-sm text-gray-500 dark:text-gray-400 italic">
+                  {t("userIncoming.noActionsAvailable", {
+                    defaultValue: "No actions available for this record.",
+                  })}
+                </p>
+              )}
+            </div>
+          </>
+        )}
+
+        {showAssignModal && !isLocked && (
+          <AssigneRecordV2
+            record={rowData as unknown as IncomingLetterItem}
+            isTable={fromTable}
+            onClose={() => {
+              setShowAssignModal(false);
+              if (refetchTable) {
+                refetchTable();
+              }
+              queryClient.invalidateQueries({
+                queryKey: ["external-incoming"],
+              });
+              queryClient.invalidateQueries({
+                queryKey: ["external-incoming-v2"],
+              });
+              queryClient.invalidateQueries({ queryKey: ["dashbordReport"] });
+            }}
+            onSuccess={() => {
+              toast.success(t("msg.successassign"));
+              setShowAssignModal(false);
+              if (refetchTable) {
+                refetchTable();
+              }
+              queryClient.invalidateQueries({
+                queryKey: ["external-incoming"],
+              });
+              queryClient.invalidateQueries({
+                queryKey: ["external-incoming-v2"],
+              });
+              queryClient.invalidateQueries({ queryKey: ["dashbordReport"] });
+            }}
+            isOpen={true}
+          />
+        )}
+
+        {showAcceptDialog && !isLocked && (
+          <AcceptIncomingRecord
+            open={showAcceptDialog}
+            onClose={() => {
+              setShowAcceptDialog(false);
+              if (refetchTable) {
+                refetchTable();
+              }
+              queryClient.invalidateQueries({
+                queryKey: ["external-incoming"],
+              });
+              queryClient.invalidateQueries({
+                queryKey: ["external-incoming-v2"],
+              });
+              queryClient.invalidateQueries({ queryKey: ["dashbordReport"] });
+            }}
+            incomingInstanceId={rowData?.incomingInstances?.[0]?.id as string}
+          />
+        )}
+        {showRejectDialog && !isLocked && (
+          <RejectIncomingRecord
+            open={showRejectDialog}
+            onClose={() => {
+              setShowRejectDialog(false);
+              if (refetchTable) {
+                refetchTable();
+              }
+              queryClient.invalidateQueries({
+                queryKey: ["incoming-instances"],
+              });
+              queryClient.invalidateQueries({ queryKey: ["dashbordReport"] });
+            }}
+            onSuccess={() => {
+              if (!fromTable) {
+                navigate(-1);
+              }
+            }}
+            incomingInstanceId={rowData?.incomingInstances?.[0]?.id as string}
+          />
+        )}
+
+        {showRemarkDialog && !isLocked && (
+          <RemarkCreationDialog
+            open={showRemarkDialog}
+            onClose={() => {
+              setShowRemarkDialog(false);
+              refetchTable?.();
+              queryClient.invalidateQueries({
+                queryKey: ["incoming-instances"],
+              });
+              queryClient.invalidateQueries({
+                queryKey: ["dashbordReport"],
+              });
+            }}
+            incomingInstanceId={rowData?.incomingInstances?.[0]?.id as string}
+            rowData={rowData}
+          />
+        )}
+      </>
+    );
+  },
+);
+
+export const ExternalIncomingRecordsColumnsV2 = (
+  refetch: () => void,
+  localizedName: (name?: { am?: string; en?: string }) => string,
+  isSecretary: boolean,
+  isSelf: boolean,
+  pageNo: number,
+  openDropdownId?: string | null,
+  onDropdownChange?: (id: string | null) => void,
+  onAssign?: (rowData: IncomingLetterItem) => void,
+): ColumnDef<IncomingLetterItem>[] => [
+  {
+    id: "letterName",
+    header: () => t("viewDetail.fileName1"),
+    cell: ({ row }) => {
+      const letterName = row?.original?.letterName || "-";
+
+      return (
+        <OverflowTooltip text={letterName} maxWidth={150}>
+          {letterName}
+        </OverflowTooltip>
+      );
+    },
+    accessorKey: "letterName",
+    enableHiding: true,
+    size: 150,
+  },
+  {
+    id: "referenceNumber",
+    header: () => t("viewDetail.referenceNumber"),
+    cell: ({ row }) => {
+      const referenceNo = row?.original?.referenceNumber || "";
+
+      return (
+        <OverflowTooltip text={referenceNo} maxWidth={150}>
+          {referenceNo}
+        </OverflowTooltip>
+      );
+    },
+    accessorKey: "referenceNumber",
+    enableHiding: true,
+    size: 150,
+  },
+  {
+    id: "organizationName",
+    header: () => t("userIncoming.Sending Organization"),
+    cell: ({ row }) => {
+      const organizationName =
+        row?.original?.metadata?.organizationName ||
+        row?.original?.initiator?.unit?.organization?.name;
+
+      const localizedOrgName = localizedName(organizationName);
+      const displayText =
+        localizedOrgName || t("userIncoming.No Sending organization");
+
+      return (
+        <OverflowTooltip text={displayText} maxWidth={200}>
+          {displayText}
+        </OverflowTooltip>
+      );
+    },
+    accessorKey: "organizationName",
+    enableHiding: true,
+
+    size: 200,
+  },
+  {
+    id: "subject",
+    header: () => t("userIncoming.Subject"),
+    cell: ({ row }) => {
+      const subject = row.original.content?.[0].subject;
+      const displayText = subject ? subject : t("userIncoming.No Subject");
+
+      return (
+        <OverflowTooltip text={displayText} maxWidth={200}>
+          {displayText}
+        </OverflowTooltip>
+      );
+    },
+
+    accessorKey: "Subject",
+    enableHiding: true,
+    size: 200,
+  },
+  {
+    id: "isUrgent",
+    header: () => t("userIncoming.Is Urgent"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      const isUrgent = rowData.isUrgent;
+
+      return (
+        <span
+          className={`relative inline-flex items-center px-2 py-1 rounded-md text-sm font-semibold ${
+            isUrgent
+              ? "bg-yellow-100 text-yellow-800"
+              : "bg-gray-100 text-gray-600"
+          }`}>
+          {isUrgent && (
+            <span className="absolute -top-0 -right-5 flex h-4 w-4">
+              {/* Pulsing ring */}
+              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
+
+              {/* Bell icon stays visible */}
+              <span className="relative inline-flex items-center justify-center pt-3">
+                <BellRing className="h-5 w-5 text-red-500" />
+              </span>
+            </span>
+          )}
+
+          {isUrgent ? t("common.yes") : t("common.no")}
+        </span>
+      );
+    },
+    enableHiding: true,
+    accessorKey: "isUrgent",
+  },
+  {
+    accessorKey: "createdAt",
+    header: () => t("userIncoming.Date"),
+    cell: ({ row }) => {
+      const record = row.original;
+      const lastInstance = record?.incomingInstances?.[0];
+      const isAmharic = i18n.language === "am";
+      const amharicDate = lastInstance?.amharicCreatedAt;
+      const createdAt = lastInstance?.createdAt;
+
+      let displayText = "-";
+      if (isAmharic && amharicDate) {
+        displayText = amharicDate;
+      } else if (createdAt) {
+        displayText = new Date(createdAt).toLocaleDateString(i18n.language, {
+          year: "numeric",
+          month: "short",
+          day: "numeric",
+          hour: "numeric",
+          minute: "numeric",
+        });
+      }
+
+      return displayText;
+    },
+    size: 150,
+  },
+  {
+    id: "status",
+    header: () => t("userRecord.Status"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      const lastInstance = rowData?.incomingInstances?.[0];
+      const status = lastInstance?.status;
+      const statusElement = status ? renderStatus(status, status) : null;
+
+      return statusElement;
+    },
+    accessorKey: "TaskStatus",
+    enableHiding: true,
+    size: 120,
+  },
+  {
+    id: "Actions",
+    header: t("userIncoming.Actions"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      const dropdownId = rowData.id || "";
+      return (
+        <ExternalIncomingRecordActionsV2
+          rowData={rowData}
+          refetchTable={refetch}
+          isSecretary={isSecretary}
+          isSelf={isSelf}
+          pageIndex={pageNo}
+          fromTable={true}
+          isDropdownOpen={openDropdownId === dropdownId}
+          onDropdownOpenChange={(open) => {
+            onDropdownChange?.(open ? dropdownId : null);
+          }}
+          dropdownId={dropdownId}
+          onAssign={onAssign}
+        />
+      );
+    },
+    enableHiding: true,
+    accessorKey: "Actions",
+  },
+];
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/externalIncomingRecords/externalIncomingRecordsV2.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/externalIncomingRecords/externalIncomingRecordsV2.tsx
new file mode 100644
index 000000000..1b3d6bb1e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/externalIncomingRecords/externalIncomingRecordsV2.tsx
@@ -0,0 +1,556 @@
+import { useState, useEffect, useMemo, useCallback } from "react";
+import { DataTable } from "@/record-management/common/DataTable";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { useExternalIncomingRecords } from "@/record-management/components/hooks/useExternalIncomingRecords";
+import { Search } from "lucide-react";
+import Loader from "@/record-management/components/Loader/loader";
+import React from "react";
+import HeaderSection from "../headerSection";
+import { t } from "i18next";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { useUserDetail } from "../../hooks/useUserDetail";
+import { MeDto } from "@/shared/dto/user/meDto";
+import secretaryList from "@/record-management/common/secretaryViewList";
+import { useSearchParams } from "react-router-dom";
+import DelegationView from "@/record-management/common/DelegationView";
+import EthiopianDatePickerModal, {
+  convertEthiopianToGregorian,
+} from "@/shared/common/form/fields/AmharicDatePicker";
+import i18n from "@/i18n";
+import { IncomingLetterItem } from "@/record-management/dto/IncomingRecords/incomingTasksDto";
+import { ExternalIncomingRecordsColumnsV2 } from "./externalIncomingRecordsColumnsV2";
+import AssigneRecordV2 from "../internalIncomingRecords/AssignRecordV2";
+import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+
+const ExternalIncomingRecords = () => {
+  const localizedName = useLocalizedName();
+  const queryClient = useQueryClient();
+  const [filterType, setFilterType] = useState<
+    | "Department"
+    | "Subject"
+    | "Dispatched Date"
+    | "Reference Number"
+    | "letterName"
+  >("Department");
+  const { userDetails } = useAuthUser();
+  const { permissionKeys } = useUserDetail(userDetails as MeDto);
+  const [statusFilterMain, setStatusFilterMain] = useState<string[]>([
+    "non_smart_user",
+    "external_non_smart_user",
+  ]);
+
+  const [tabFilters, setTabFilters] = useState<
+    Record<string, { search: string; status: string }>
+  >({
+    non_smart_user: { search: "", status: "" },
+    external: { search: "", status: "" },
+  });
+  const [tabFiltersSec, setTabFiltersSec] = useState<
+    Record<string, { search: string; status: string }>
+  >({
+    non_smart_user: { search: "", status: "" },
+    external: { search: "", status: "" },
+  });
+  const [searchParamsUrl, setSearchParamsUrl] = useSearchParams();
+  const urlPage = Number(searchParamsUrl.get("page") || 1);
+  const initialView = searchParamsUrl.get("view") || "self";
+  const isSecretary = permissionKeys.includes("can:viewParentPositionRecord");
+  const [secretaryView, setSecretaryView] = useState(isSecretary ? initialView : "self");
+  const [fromDispatchedDate, setFromDispatchedDate] = useState("");
+  const [toDispatchedDate, setToDispatchedDate] = useState("");
+  const [fromDispatchedDateDisplay, setFromDispatchedDateDisplay] =
+    useState("");
+  const [pagination, setPagination] = React.useState({
+    pageIndex: urlPage - 1,
+    pageSize: 10,
+  });
+  const [toDispatchedDateDisplay, setToDispatchedDateDisplay] = useState("");
+  const lang = i18n.language;
+  const [showFromPicker, setShowFromPicker] = useState(false);
+  const [showToPicker, setShowToPicker] = useState(false);
+  const [openDropdownId, setOpenDropdownId] = useState<string | null>(null);
+  const [assignRecord, setAssignRecord] = useState<IncomingLetterItem | null>(
+    null,
+  );
+  const isDelegated = userDetails?.employee?.some((emp) =>
+    emp.positions.some((pos) => pos.hasDelegated),
+  );
+
+  useEffect(() => {
+    if (!isSecretary && secretaryView === "parent") {
+      setSecretaryView("self");
+    }
+  }, [isSecretary, secretaryView]);
+
+  const isSelf = secretaryView === "self";
+  const syncViewParam = useCallback((params: URLSearchParams) => {
+    if (secretaryView === "parent") {
+      params.set("view", "parent");
+    } else {
+      params.delete("view");
+    }
+    return params;
+  }, [secretaryView]);
+  const currentTab =
+    statusFilterMain.length > 1 ? "non_smart_user" : "external";
+  const searchQuery = isSelf
+    ? tabFilters[currentTab]?.search || ""
+    : tabFiltersSec[currentTab]?.search || "";
+  const statusFilter = isSelf
+    ? tabFilters[currentTab]?.status || ""
+    : tabFiltersSec[currentTab]?.status || "";
+  // Snap back to page 1 whenever any filter changes
+  useEffect(() => {
+    setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+    setSearchParamsUrl(
+      (prev) => {
+        const params = new URLSearchParams(prev);
+        params.set("page", "1");
+        return syncViewParam(params);
+      },
+      { replace: true },
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    statusFilter,
+    statusFilterMain,
+    searchQuery,
+    filterType,
+    fromDispatchedDate,
+    toDispatchedDate,
+    syncViewParam,
+  ]);
+
+  // Honour external URL page changes (deep links, back/forward)
+  useEffect(() => {
+    setPagination((prev) =>
+      prev.pageIndex === urlPage - 1
+        ? prev
+        : { ...prev, pageIndex: urlPage - 1 },
+    );
+  }, [urlPage]);
+  useEffect(() => {
+    setSearchParamsUrl(
+      (prev) => syncViewParam(new URLSearchParams(prev)),
+      { replace: true },
+    );
+  }, [secretaryView, setSearchParamsUrl, syncViewParam]);
+
+  const recordType = window.location.pathname.includes("external")
+    ? "external"
+    : window.location.pathname.includes("cc")
+      ? "cc"
+      : "internal";
+  const searchParams: Record<string, string> = {};
+  if (searchQuery) {
+    switch (filterType) {
+      case "Department":
+        searchParams.receiverPosition = searchQuery;
+        break;
+      case "Subject":
+        searchParams.subject = searchQuery;
+        break;
+      case "Reference Number":
+        searchParams.referenceNumber = searchQuery;
+        break;
+      case "letterName":
+        searchParams.letterName = searchQuery;
+        break;
+    }
+  }
+
+  const {
+    externalRecords2,
+    externalCount2: externalCount,
+    isLoadingV2: isLoading,
+    isErrorV2: isError,
+    refetchV2,
+    externalParent,
+    externalParentCount,
+    isLoadingParent,
+    isErrorParent,
+    refetchParent,
+  } = useExternalIncomingRecords({
+    pageIndex: pagination.pageIndex * pagination.pageSize,
+    pageSize: pagination.pageSize,
+    status: statusFilter || undefined,
+    fromDispatchedDate: fromDispatchedDate || undefined,
+    toDispatchedDate: toDispatchedDate || undefined,
+    ...searchParams,
+    recordType: statusFilterMain,
+    fetchParent: isSecretary,
+  });
+  let Error, loading;
+  if (isSelf) {
+    Error = isError;
+    loading = isLoading;
+  } else {
+    Error = isErrorParent;
+    loading = isLoadingParent;
+  }
+  const refetchCurrent = useCallback(() => {
+    if (isSelf) {
+      refetchV2();
+    } else {
+      refetchParent?.();
+    }
+  }, [isSelf, refetchV2, refetchParent]);
+
+  const handleAssignRecord = useCallback((record: IncomingLetterItem) => {
+    setAssignRecord(record);
+  }, []);
+
+  // Status filter options based on image
+  const statusOptions = [
+    { value: "", label: t("statusBar.All") },
+    { value: "draft", label: t("statusBar.In Progress") },
+    { value: "accepted", label: t("statusBar.Accepted") },
+    { value: "replied", label: t("statusBar.Replied") },
+    { value: "re_assigned", label: t("statusBar.Reassigned") },
+    { value: "rejected", label: t("statusBar.Rejected") },
+  ];
+
+  // Handle search input change
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const query = e.target.value;
+    if (isSelf) {
+      setTabFilters((prev) => ({
+        ...prev,
+        [currentTab]: { ...prev[currentTab], search: query },
+      }));
+    } else {
+      setTabFiltersSec((prev) => ({
+        ...prev,
+        [currentTab]: { ...prev[currentTab], search: query },
+      }));
+    }
+  };
+
+  const handleStatusChange = (value: string) => {
+    if (isSelf) {
+      setTabFilters((prev) => ({
+        ...prev,
+        [currentTab]: { ...prev[currentTab], status: value },
+      }));
+    } else {
+      setTabFiltersSec((prev) => ({
+        ...prev,
+        [currentTab]: { ...prev[currentTab], status: value },
+      }));
+    }
+  };
+
+  useEffect(() => {
+    const radioElementExternal = document.getElementById(
+      "externalradio",
+    ) as HTMLInputElement;
+    if (radioElementExternal) {
+      radioElementExternal.checked = true;
+    }
+  }, []);
+  const safeTotalCount = Math.max(
+    isSelf ? externalCount || 0 : externalParentCount || 0,
+    1,
+  );
+  const totalPages = Math.ceil(safeTotalCount / pagination.pageSize);
+
+  React.useEffect(() => {
+    if (safeTotalCount === 1) return; // wait until data is loaded
+
+    let newPage = pagination.pageIndex + 1;
+
+    if (newPage > totalPages) {
+      newPage = 1;
+      setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+    }
+
+    setSearchParamsUrl((prev) => {
+      const params = new URLSearchParams(prev);
+      params.set("page", newPage.toString());
+      return syncViewParam(params);
+    });
+  }, [
+    totalPages,
+    safeTotalCount,
+    pagination.pageIndex,
+    setSearchParamsUrl,
+    syncViewParam,
+  ]);
+  const columns = useMemo(
+    () =>
+      ExternalIncomingRecordsColumnsV2(
+        isSelf ? refetchV2 : refetchParent ? refetchParent : () => {},
+        localizedName as (name?: { am?: string; en?: string }) => string,
+        isSecretary,
+        isSelf,
+        pagination.pageIndex + 1,
+        openDropdownId,
+        setOpenDropdownId,
+        handleAssignRecord,
+      ),
+    // Only recreate when these actually change
+    [
+      refetchV2,
+      refetchParent,
+      localizedName,
+      isSecretary,
+      isSelf,
+      pagination.pageIndex,
+      openDropdownId,
+      setOpenDropdownId,
+      handleAssignRecord,
+    ],
+  );
+
+  return isDelegated ? (
+    <DelegationView />
+  ) : (
+    <div className="flex flex-col gap-2">
+      {/* Filter Dropdown and Search */}
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 w-full mt-4">
+        {/* Left Side: Heading */}
+        <h4 className="text-xl font-medium mt-2">
+          {t("userIncoming.Letters")}
+        </h4>
+
+        {/* Right Side: Filter and Search */}
+        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2 w-full sm:w-auto">
+          {/* Filter Dropdown */}
+          <Select
+            value={filterType}
+            onValueChange={(value) => {
+              return setFilterType(
+                value === "referenceNumber"
+                  ? "Reference Number"
+                  : value === "dispatchedDate"
+                    ? "Dispatched Date"
+                    : (value as
+                        | "Department"
+                        | "Subject"
+                        | "Dispatched Date"
+                        | "Reference Number"
+                        | "letterName"),
+              );
+            }}
+          >
+            <SelectTrigger className="w-full sm:w-[200px]">
+              <SelectValue placeholder="Select filter type" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="Department">
+                {t("userRecord.sendingOrganization")}
+              </SelectItem>
+              <SelectItem value="Subject">
+                {t("userIncoming.Subject")}
+              </SelectItem>
+              <SelectItem value="Dispatched Date">
+                {t("userIncoming.Date")}
+              </SelectItem>
+              <SelectItem value="Reference Number">
+                {t("userIncoming.Reference Number")}
+              </SelectItem>
+              <SelectItem value="letterName">
+                {t("viewDetail.fileName1")}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+
+          {filterType !== "Dispatched Date" ? (
+            <div className="relative w-full sm:w-[200px]">
+              <div className="absolute left-2 top-1/2 transform -translate-y-1/2 pointer-events-none">
+                <Search className="h-4 w-4 text-gray-500" />
+              </div>
+              <Input
+                className="w-full pl-8 text-sm sm:text-base"
+                type="text"
+                placeholder={`${t(
+                  "userIncoming.Search",
+                )} ${filterType.toLowerCase()}`}
+                value={searchQuery}
+                onChange={handleSearchChange}
+              />
+            </div>
+          ) : (
+            <div className="flex flex-col sm:flex-row gap-2">
+              {lang.startsWith("en") ? (
+                <>
+                  <label className="mt-2">From: </label>
+                  <Input
+                    type="date"
+                    value={fromDispatchedDate}
+                    onChange={(e) => setFromDispatchedDate(e.target.value)}
+                    className="w-[150px]"
+                  />
+                  <label className="mt-2">To: </label>
+                  <Input
+                    type="date"
+                    value={toDispatchedDate}
+                    onChange={(e) => setToDispatchedDate(e.target.value)}
+                    min={fromDispatchedDate}
+                    className="w-[150px]"
+                  />
+                </>
+              ) : (
+                <div className="flex flex-wrap items-center gap-3">
+                  {/* From Date */}
+                  <div className="relative">
+                    <label className="font-medium mr-2">ከ:</label>
+                    <input
+                      type="text"
+                      value={fromDispatchedDateDisplay}
+                      readOnly
+                      onClick={() => setShowFromPicker((prev) => !prev)}
+                      className="border border-gray-300 dark:border-gray-700 rounded-md px-2 py-1.5 w-40 bg-white dark:bg-gray-800 cursor-pointer"
+                      placeholder="ቀን ይምረጡ"
+                    />
+                    {showFromPicker && (
+                      <div className="absolute z-50 mt-1 bg-white dark:bg-gray-800 shadow-lg rounded-md p-2">
+                        <EthiopianDatePickerModal
+                          value={fromDispatchedDate}
+                          onChange={(ethiopianDate: string) => {
+                            const gregorianDate =
+                              convertEthiopianToGregorian(ethiopianDate);
+                            const formatted = gregorianDate
+                              .toISOString()
+                              .split("T")[0]; // "YYYY-MM-DD"
+                            setFromDispatchedDate(formatted);
+                            setFromDispatchedDateDisplay(ethiopianDate);
+                            setShowFromPicker(false);
+                          }}
+                        />
+                      </div>
+                    )}
+                  </div>
+
+                  {/* To Date */}
+                  <div className="relative">
+                    <label className="font-medium mr-2">እስከ:</label>
+                    <input
+                      type="text"
+                      value={toDispatchedDateDisplay}
+                      readOnly
+                      onClick={() => setShowToPicker((prev) => !prev)}
+                      className="border border-gray-300 dark:border-gray-700 rounded-md px-2 py-1.5 w-40 bg-white dark:bg-gray-800 cursor-pointer"
+                      placeholder="ቀን ይምረጡ"
+                    />
+                    {showToPicker && (
+                      <div className="absolute z-50 mt-1 bg-white dark:bg-gray-800 shadow-lg rounded-md p-2">
+                        <EthiopianDatePickerModal
+                          value={toDispatchedDate}
+                          onChange={(ethiopianDate: string) => {
+                            const gregorianDate =
+                              convertEthiopianToGregorian(ethiopianDate);
+                            const formatted = gregorianDate
+                              .toISOString()
+                              .split("T")[0]; // "YYYY-MM-DD"
+                            setToDispatchedDate(formatted);
+                            setToDispatchedDateDisplay(ethiopianDate);
+                            setShowFromPicker(false);
+                          }}
+                        />
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+          {/* </div> */}
+        </div>
+      </div>
+      {/* Navigation Buttons */}
+      <HeaderSection />
+      {/* secretary options */}
+      {secretaryList(isSecretary, secretaryView, setSecretaryView, "SEC")}
+      {/* Status external*/}
+
+      {secretaryList(
+        isSecretary,
+        statusFilterMain,
+        setStatusFilterMain,
+        "EXT",
+        !isSelf,
+      )}
+      {/* Status Filter Buttons */}
+      <div className="flex flex-wrap gap-2">
+        {statusOptions.map((option) => (
+          <Button
+            key={option.value}
+            variant={statusFilter === option.value ? "linkActive" : "link"}
+            onClick={() => handleStatusChange(option.value)}
+            className="rounded-md text-sm sm:text-base"
+          >
+            {option.label}
+          </Button>
+        ))}
+      </div>
+
+      {/* Records Table */}
+      {loading && (
+        <div className="w-full h-full">
+          <Loader />
+        </div>
+      )}
+      {Error && isDelegated && <p>{t("userIncoming.errDelegation")}</p>}
+      {Error && !isDelegated && (
+        <p>{t("userIncoming.Error loading records.")}</p>
+      )}
+
+      {!loading && !Error && (
+        <>
+          <DataTable
+            tableName={`${recordType.toUpperCase()} Incoming Records`}
+            columns={columns}
+            data={
+              isSelf
+                ? (externalRecords2 as IncomingLetterItem[])
+                : externalParent
+                  ? (externalParent as IncomingLetterItem[])
+                  : []
+            }
+            totalCount={safeTotalCount}
+            pagination={pagination}
+            setPagination={setPagination}
+            refresh={isSelf ? refetchV2 : refetchParent}
+          />
+
+          {assignRecord && !assignRecord.isLocked && (
+            <AssigneRecordV2
+              record={assignRecord}
+              isTable={true}
+              onClose={() => {
+                setAssignRecord(null);
+              }}
+              onSuccess={() => {
+                toast.success(t("msg.successassign"));
+                setAssignRecord(null);
+                refetchCurrent();
+                queryClient.invalidateQueries({
+                  queryKey: ["external-incoming"],
+                });
+                queryClient.invalidateQueries({
+                  queryKey: ["external-incoming-v2"],
+                });
+                queryClient.invalidateQueries({
+                  queryKey: ["dashbordReport"],
+                });
+              }}
+              isOpen={true}
+            />
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+export default ExternalIncomingRecords;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/forYourReferenceIncomingRecords/ForYourReferenceIncomingRecords.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/forYourReferenceIncomingRecords/ForYourReferenceIncomingRecords.tsx
new file mode 100644
index 000000000..9e903a11c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/forYourReferenceIncomingRecords/ForYourReferenceIncomingRecords.tsx
@@ -0,0 +1,259 @@
+import { useState, useEffect, useMemo, useCallback } from "react";
+import React from "react";
+import HeaderSection from "../headerSection";
+import { t } from "i18next";
+import { useSearchParams } from "react-router-dom";
+
+import { DataTable } from "@/record-management/common/DataTable";
+import { Button } from "@/shared/common/ui/button";
+import {
+  CombinedFilterBar,
+  CombinedFilterField,
+} from "@/shared/components/filters/CombinedFilterBar";
+import { useCCIncomingRecords } from "@/record-management/components/hooks/useCCIncomingRecords";
+import { CCIncomingRecordsColumns } from "../ccIncomingRecords/ccIncomingRecordsColumns";
+import Loader from "@/record-management/components/Loader/loader";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { useCombinedFilters } from "@/shared/hooks/useCombinedFilters";
+import { useUserDetail } from "../../hooks/useUserDetail";
+import { MeDto } from "@/shared/dto/user/meDto";
+import secretaryList from "@/record-management/common/secretaryViewList";
+import DelegationView from "@/record-management/common/DelegationView";
+import useCanAssignRecord from "../../hooks/useCanAssignRecord";
+import { FilterParams } from "@/shared/utils/filterParams";
+
+const ForYourReferenceIncomingRecords = () => {
+  const [statusFilter, setStatusFilter] = useState<string>("");
+  const localizedName = useLocalizedName();
+  const { userDetails } = useAuthUser();
+  const { permissionKeys } = useUserDetail(userDetails as MeDto);
+  const isSecretary = permissionKeys.includes("can:viewParentPositionRecord");
+  const selfFilters = useCombinedFilters<FilterParams>();
+  const parentFilters = useCombinedFilters<FilterParams>();
+  const [searchParamsUrl, setSearchParamsUrl] = useSearchParams();
+  const urlPage = Number(searchParamsUrl.get("page") || 1);
+  const initialView = searchParamsUrl.get("view") || "self";
+  const [secretaryView, setSecretaryView] = useState(isSecretary ? initialView : "self");
+  const [pagination, setPagination] = React.useState({
+    pageIndex: urlPage - 1,
+    pageSize: 10,
+  });
+
+  useEffect(() => {
+    if (!isSecretary && secretaryView === "parent") {
+      setSecretaryView("self");
+    }
+  }, [isSecretary, secretaryView]);
+  const [liveSearch, setLiveSearch] = useState<{
+    key: string;
+    value: string;
+  } | null>(null);
+
+  const handleLiveSearch = (key: string, value: string) => {
+    if (!key || !value) {
+      setLiveSearch(null);
+      return;
+    }
+    setLiveSearch({ key, value });
+  };
+  const isDelegated = userDetails?.employee?.some((emp) =>
+    emp.positions.some((pos) => pos.hasDelegated),
+  );
+  const isSelf = secretaryView === "self";
+  const syncViewParam = useCallback((params: URLSearchParams) => {
+    if (secretaryView === "parent") {
+      params.set("view", "parent");
+    } else {
+      params.delete("view");
+    }
+    return params;
+  }, [secretaryView]);
+  const { canAssignRecord: canAssignCC } = useCanAssignRecord();
+  const activeFilterStore = isSelf ? selfFilters : parentFilters;
+
+  const filterFields = useMemo<CombinedFilterField[]>(
+    () => [
+      {
+        key: "sendingPosition",
+        label: t("userIncoming.Department"),
+        type: "text",
+      },
+      { key: "subject", label: t("userIncoming.Subject"), type: "text" },
+      {
+        key: "referenceNumber",
+        label: t("viewDetail.referenceNumber"),
+        type: "text",
+      },
+      {
+        key: "dispatchedDate",
+        label: t("userIncoming.Date"),
+        type: "dateRange",
+        fromKey: "fromDispatchedDate",
+        toKey: "toDispatchedDate",
+      },
+    ],
+    [],
+  );
+
+  useEffect(() => {
+    setSearchParamsUrl(
+      (prev) => syncViewParam(new URLSearchParams(prev)),
+      { replace: true },
+    );
+  }, [secretaryView, setSearchParamsUrl, syncViewParam]);
+
+  React.useEffect(() => {
+    setPagination((prev) => ({ ...prev, pageIndex: urlPage - 1 }));
+  }, [activeFilterStore.filters, statusFilter, urlPage]);
+
+  const mapStatusToHasSeen = (status: string): boolean | undefined => {
+    if (status === "seen") return true;
+    return undefined;
+  };
+
+  const baseParams = {
+    skip: pagination.pageIndex * pagination.pageSize,
+    take: pagination.pageSize,
+    orderBy: "record.dispatchedDate:DESC,record.createdAt:DESC",
+    hasSeen: mapStatusToHasSeen(statusFilter),
+    isForYourReference: true,
+    ...activeFilterStore.filters,
+    fetchParent: isSecretary,
+    ...(liveSearch ? { [liveSearch.key]: liveSearch.value } : {}),
+  };
+
+  const statusOptions = [
+    { value: "", label: t("statusBar.All") },
+    { value: "draft", label: t("statusBar.InProgress") },
+    { value: "seen", label: t("statusBar.seen") },
+  ];
+
+  const {
+    ccRecords,
+    isLoading,
+    isError,
+    ccCount,
+    refetch,
+    ccParent,
+    ccParentCount,
+    refetchParent,
+    isErrorParent,
+    isLoadingParent,
+  } = useCCIncomingRecords(baseParams);
+
+  let Error, loading;
+  if (isSelf) {
+    Error = isError;
+    loading = isLoading;
+  } else {
+    Error = isErrorParent;
+    loading = isLoadingParent;
+  }
+
+  const safeTotalCount = Math.max(
+    isSelf ? ccCount || 0 : ccParentCount || 0,
+    1,
+  );
+
+  const totalPages = Math.ceil(safeTotalCount / pagination.pageSize);
+
+  useEffect(() => {
+    setLiveSearch(null);
+  }, [secretaryView]);
+
+  React.useEffect(() => {
+    if (safeTotalCount === 1) return;
+    let newPage = pagination.pageIndex + 1;
+    if (newPage > totalPages) {
+      newPage = 1;
+      setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+    }
+    setSearchParamsUrl((prev) => {
+      const params = new URLSearchParams(prev);
+      params.set("page", newPage.toString());
+      return syncViewParam(params);
+    });
+  }, [
+    totalPages,
+    safeTotalCount,
+    pagination.pageIndex,
+    setSearchParamsUrl,
+    syncViewParam,
+  ]);
+
+  return isDelegated ? (
+    <DelegationView />
+  ) : (
+    <div className="flex flex-col gap-2">
+      <div className="mt-4 flex w-full min-w-0 flex-col gap-4">
+        <h4 className="text-xl font-medium text-gray-900 dark:text-gray-100">
+          {t("userIncoming.Letters")}
+        </h4>
+        <CombinedFilterBar
+          fields={filterFields}
+          filters={activeFilterStore.filters}
+          setFilter={activeFilterStore.setFilter}
+          setFilters={activeFilterStore.setFilters}
+          removeFilter={activeFilterStore.removeFilter}
+          removeFilters={activeFilterStore.removeFilters}
+          onFilterChange={() =>
+            setPagination((prev) => ({ ...prev, pageIndex: 0 }))
+          }
+          onLiveSearch={handleLiveSearch}
+          className="w-full min-w-0"
+        />
+      </div>
+
+      <HeaderSection />
+      {secretaryList(isSecretary, secretaryView, setSecretaryView, "SEC")}
+
+      <div className="flex flex-wrap gap-2">
+        {statusOptions.map((option) => (
+          <Button
+            key={option.value}
+            variant={statusFilter === option.value ? "linkActive" : "link"}
+            onClick={() => setStatusFilter(option.value)}
+            className="rounded-md text-sm sm:text-base"
+          >
+            {option.label}
+          </Button>
+        ))}
+      </div>
+
+      {loading && (
+        <div className="w-full h-full">
+          <Loader />
+        </div>
+      )}
+      {Error && isDelegated && <p>{t("userIncoming.errDelegation")}</p>}
+      {Error && !isDelegated && (
+        <p>{t("userIncoming.Error loading records.")}</p>
+      )}
+
+      {!loading && !Error && (
+        <DataTable
+          tableName="For Your Reference Records"
+          columns={CCIncomingRecordsColumns(
+            isSelf ? refetch : refetchParent ? refetchParent : () => {},
+            localizedName as (name?: { am?: string; en?: string }) => string,
+            isSecretary,
+            isSelf,
+            pagination.pageIndex + 1,
+            false,
+            canAssignCC,
+            "ForYourReference",
+          )}
+          data={isSelf ? ccRecords : ccParent ? ccParent : []}
+          toolBarPosition="right"
+          totalCount={safeTotalCount}
+          pagination={pagination}
+          setPagination={setPagination}
+          refresh={isSelf ? refetch : refetchParent}
+        />
+      )}
+    </div>
+  );
+};
+
+export default ForYourReferenceIncomingRecords;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/headerSection.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/headerSection.tsx
new file mode 100644
index 000000000..5ec34861d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/headerSection.tsx
@@ -0,0 +1,220 @@
+import { Input } from "@/shared/common/ui/input";
+import { cn } from "@/shared/lib/utils";
+import { t } from "i18next";
+import { NavLink, useLocation } from "react-router-dom";
+import { BellRing } from "lucide-react";
+import { useReport } from "../hooks/useReport";
+import { useReportByHooks } from "../hooks/useReportByHooks";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { useUserDetail } from "../hooks/useUserDetail";
+import { MeDto } from "@/shared/dto/user/meDto";
+
+const HeaderSection = () => {
+  const location = useLocation();
+  const { userDetails } = useAuthUser();
+  const { permissionKeys } = useUserDetail(userDetails as MeDto);
+  const useParentCounts =
+    permissionKeys.includes("can:viewParentPositionRecord") &&
+    new URLSearchParams(location.search).get("view") === "parent";
+  const {
+    //   TotalDraftCC,
+    //   TotalDraftInternal,
+    //   TotalDraftExternal,
+    TotalUrgentDraftInternal,
+    TotalUrgentDraftExternal,
+    //   TotalDraftForYourRef,
+  } = useReport("");
+  const { breakdownCounts } = useReportByHooks({
+    isSecretary: useParentCounts,
+  });
+  const externalIncomingCount =
+    breakdownCounts.external + breakdownCounts.externalSmart;
+  const incomingViewSearch = useParentCounts ? "?view=parent" : "";
+  return (
+    <div className="flex flex-wrap justify-center sm:justify-start gap-2">
+      <div
+        className="
+    flex flex-col sm:flex-nowrap sm:flex-row 
+    sm:overflow-x-auto 
+    items-stretch sm:items-center 
+    gap-2 sm:gap-4 md:gap-6 
+    w-full 
+    pt-2 pb-2 
+    scrollbar-none
+  "
+      >
+        {/* External Tab */}
+        <NavLink
+          to={`/record-management/userIncoming${incomingViewSearch}`}
+          end
+          className={({ isActive }) =>
+            cn(
+              "flex items-center justify-center gap-1 sm:gap-2 text-base base:text-base border min-w-[90px] sm:min-w-[120px] md:min-w-[180px] rounded-md px-2 py-1.5 relative",
+              isActive
+                ? "text-primary-800 dark:text-white border-primary-600 dark:border-primary-500 bg-primary-50 dark:bg-primary-900/40"
+                : "text-gray-600 dark:text-gray-300 border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800",
+            )
+          }
+        >
+          {/* Radio */}
+          <Input
+            type="radio"
+            id="externalradio"
+            checked={location.pathname === "/record-management/userIncoming"}
+            readOnly
+            className="h-3 w-3 sm:h-4 sm:w-4 rounded-full border border-gray-300 text-primary-600 focus:ring-primary-500 checked:bg-primary accent-primary"
+          />
+
+          {/* Label + Count + Bell */}
+          <span className="flex items-center gap-1">
+            {t("nav.external")}
+
+            {/* External Count Badge */}
+            {externalIncomingCount > 0 && (
+              <span className="bg-red-500 text-white text-xs font-semibold rounded-full px-1.5 py-0.5">
+                {externalIncomingCount}
+              </span>
+            )}
+
+            {/* Urgent Bell (no number) */}
+            {TotalUrgentDraftExternal > 0 && (
+              <span className="relative flex h-4 w-4">
+                {/* Pulse effect */}
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
+                {/* Bell icon */}
+                <BellRing className="relative h-4 w-4 text-red-500" />
+              </span>
+            )}
+          </span>
+        </NavLink>
+
+        {/* Internal Tab */}
+        <NavLink
+          to={`/record-management/userIncoming/internal${incomingViewSearch}`}
+          className={({ isActive }) =>
+            cn(
+              "flex items-center justify-center gap-1 sm:gap-2 text-base base:text-base border min-w-[90px] sm:min-w-[120px] md:min-w-[180px] rounded-md px-2 py-1.5 relative",
+              isActive
+                ? "text-primary-800 dark:text-white border-primary-600 dark:border-primary-500 bg-primary-50 dark:bg-primary-900/40"
+                : "text-gray-600 dark:text-gray-300 border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800",
+            )
+          }
+        >
+          {/* Radio */}
+          <Input
+            type="radio"
+            id="internalradio"
+            checked={
+              location.pathname === "/record-management/userIncoming/internal"
+            }
+            readOnly
+            className="h-3 w-3 sm:h-4 sm:w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 checked:bg-primary accent-primary"
+          />
+
+          {/* Label + Count + Bell */}
+          <span className="flex items-center gap-1">
+            {t("nav.internal")}
+
+            {/* Internal Count Badge */}
+            {breakdownCounts.internal > 0 && (
+              <span className="bg-red-500 text-white text-xs font-semibold rounded-full px-1.5 py-0.5">
+                {breakdownCounts.internal}
+              </span>
+            )}
+
+            {/* Urgent Bell (no number) */}
+            {TotalUrgentDraftInternal > 0 && (
+              <span className="relative flex h-4 w-4">
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
+                <BellRing className="relative h-4 w-4 text-red-500" />
+              </span>
+            )}
+          </span>
+        </NavLink>
+
+        {/* CC Tab */}
+        <NavLink
+          to={`/record-management/userIncoming/cc${incomingViewSearch}`}
+          className={({ isActive }) =>
+            cn(
+              "flex items-center justify-center gap-1 sm:gap-2 text-base base:text-base border min-w-[90px] sm:min-w-[120px] md:min-w-[180px] rounded-md px-2 py-1.5 relative overflow-visible",
+              isActive
+                ? "text-primary-800 dark:text-white border-primary-600 dark:border-primary-500 bg-primary-50 dark:bg-primary-900/40"
+                : "text-gray-600 dark:text-gray-300 border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800",
+            )
+          }
+        >
+          <Input
+            type="radio"
+            id="ccradio"
+            checked={location.pathname === "/record-management/userIncoming/cc"}
+            readOnly
+            className="h-3 w-3 sm:h-4 sm:w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 checked:bg-primary accent-primary"
+          />
+          <span>{t("nav.cc")}</span>
+
+          {/* CC Count Badge */}
+          {breakdownCounts.ccUnseen > 0 && (
+            <span className="bg-red-500 text-white text-xs font-semibold rounded-full px-1.5 py-0.5">
+              {breakdownCounts.ccUnseen}
+            </span>
+          )}
+        </NavLink>
+
+        {/* For Your Reference Tab */}
+        <NavLink
+          to={`/record-management/userIncoming/for-your-reference${incomingViewSearch}`}
+          className={({ isActive }) =>
+            cn(
+              "flex items-center justify-center gap-1 sm:gap-2 text-base base:text-base border min-w-[90px] sm:min-w-[120px] md:min-w-[180px] rounded-md px-2 py-1.5 relative",
+              isActive
+                ? "text-primary-800 dark:text-white border-primary-600 dark:border-primary-500 bg-primary-50 dark:bg-primary-900/40"
+                : "text-gray-600 dark:text-gray-300 border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800",
+            )
+          }
+        >
+          <Input
+            type="radio"
+            id="forYourReferenceRadio"
+            checked={
+              location.pathname ===
+              "/record-management/userIncoming/for-your-reference"
+            }
+            readOnly
+            className="h-3 w-3 sm:h-4 sm:w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 checked:bg-primary accent-primary"
+          />
+          <span>{t("nav.forYourReference")}</span>
+          {breakdownCounts.forYourReference > 0 && (
+            <span className="bg-red-500 text-white text-xs font-semibold rounded-full px-1.5 py-0.5">
+              {breakdownCounts.forYourReference}
+            </span>
+          )}
+        </NavLink>
+
+        {/* Collaboration Tab */}
+        {/* <NavLink
+          to="/record-management/collaborations"
+          className={({ isActive }) =>
+            cn(
+              "flex items-center justify-center gap-1 sm:gap-2 text-base base:text-base text-bold border min-w-[90px] sm:min-w-[120px] md:min-w-[180px] rounded-md px-2 py-1.5",
+              isActive
+                ? "text-primary-700 border-primary bg-primary-50"
+                : "text-gray-600 border-gray-300 bg-white"
+            )
+          }
+        >
+          <Input
+            type="radio"
+            id="collaborationradio"
+            checked={location.pathname === "/record-management/collaborations"}
+            readOnly
+            className="h-3 w-3 sm:h-4 sm:w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 checked:bg-primary"
+          />
+          <span>{t("nav.collaboration")}</span>
+        </NavLink> */}
+      </div>
+    </div>
+  );
+};
+
+export default HeaderSection;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/AcceptIncoming.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/AcceptIncoming.tsx
new file mode 100644
index 000000000..dad9cebe2
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/AcceptIncoming.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { useAssignTasks } from "@/record-management/components/hooks/useAssignTasks";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/shared/common/ui/dialog";
+import { Textarea } from "@/shared/common/ui/textarea";
+import { t } from "i18next";
+import { useState } from "react";
+import { toast } from "sonner";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+const AcceptIncomingRecord: React.FC<{
+  open: boolean;
+  onClose: () => void;
+  incomingInstanceId: string;
+}> = ({ open, onClose, incomingInstanceId }) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [comment, setComment] = useState("");
+  const { acceptIncoming } = useAssignTasks();
+  const { handleError } = useErrorHandler(t);
+
+  const handleConfirmClick = async () => {
+    setIsLoading(true);
+
+    const requestBody = {
+      incomingInstanceId: incomingInstanceId,
+      status: "accepted",
+      comment: comment,
+    };
+
+    acceptIncoming(requestBody, {
+      onSuccess: () => {
+        toast.success(t("userIncoming.Record accepted successfully"));
+        setIsLoading(false);
+        onClose();
+      },
+      onError: (error) => {
+        handleError(error);
+        setIsLoading(false);
+      },
+    });
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(isOpen) => {
+        if (!isOpen) onClose(); // Only call onClose when dialog is closing
+      }}
+    >
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('userIncoming.Confirm Acceptance')}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <p>{t('userIncoming.Are you sure you want to accept this record?')}</p>
+          <Textarea
+            placeholder={t('userIncoming.Comment')}
+            value={comment}
+            onChange={(e) => setComment(e.target.value)}
+          />
+        </div>
+
+        <DialogFooter className="flex gap-2">
+          <Button variant="outline" onClick={onClose} disabled={isLoading}>
+            {t('userIncoming.Cancel')}
+          </Button>
+          <Button
+            onClick={handleConfirmClick}
+            disabled={isLoading}
+            className="bg-primary-600 hover:bg-primary-700"
+          >
+            {isLoading ? t('userIncoming.Processing...') : t('userIncoming.Confirm')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default AcceptIncomingRecord;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/AssignRecordV2.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/AssignRecordV2.tsx
new file mode 100644
index 000000000..c4f06837d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/AssignRecordV2.tsx
@@ -0,0 +1,704 @@
+import { useAssignTasks } from "@/record-management/components/hooks/useAssignTasks";
+import { MultiSelect } from "@/shared/common/ui/multi-select";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/shared/common/ui/form";
+import { Textarea } from "@/shared/common/ui/textarea";
+import { useForm, FormProvider } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Button } from "@/shared/common/ui/button";
+import useSettings from "@/record-management/components/hooks/useSettings";
+import { useUserDetail } from "@/record-management/components/hooks/useUserDetail";
+import {
+  PositionDto,
+  ReAssignRecordPayload,
+} from "@/record-management/dto/userRecords/usersDto";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/shared/common/ui/dialog";
+import { AssignRecordDto } from "@/record-management/dto/IncomingRecords/taskDto";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useRemarkByUnitId } from "@/super-admin/hooks/useRemark";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { useEffect, useMemo, useState } from "react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/shared/common/ui/popover";
+import { ChevronsUpDown } from "lucide-react";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/shared/common/ui/command";
+import { Controller } from "react-hook-form";
+
+import {
+  useSignatureListWithPresigned,
+  useTeetersListWithPresigned,
+} from "../../hooks/useSignatureAndTeeterWithPresigned";
+import { useUnitConfiguration } from "@/shared/hooks/useUnitConfiguration";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { EmployeeWithUnitDto } from "@/user-management/dto/employees/employees";
+import { IncomingLetterItem } from "@/record-management/dto/IncomingRecords/incomingTasksDto";
+import { useQueries } from "@tanstack/react-query";
+import { getChildIncomingInstances } from "@/record-management/services/api/incomingInstanceService";
+import { getNoStampsForLanguageMessage } from "@/record-management/utils/stampMessages";
+
+const assignRecordSchema = z
+  .object({
+    receivingDepartments: z.array(z.string()),
+    assignedEmployees: z.array(z.string()),
+    remarks: z.string(),
+    selectedRemark: z.string(),
+    selectedTeeter: z.string(),
+    selectedSignature: z.string(),
+  })
+  .refine(
+    (data) =>
+      data.receivingDepartments.length > 0 || data.assignedEmployees.length > 0,
+    {
+      message: "Either receiver position or employee is required",
+      path: ["receivingDepartments"],
+    },
+  );
+
+interface AssignRecordProps {
+  isOpen?: boolean;
+  record: IncomingLetterItem;
+  onSuccess: () => void;
+  onClose: () => void;
+  isTable?: boolean;
+}
+
+const AssigneRecordV2: React.FC<AssignRecordProps> = ({
+  isOpen = false,
+  record,
+  onSuccess,
+  onClose,
+  isTable,
+}) => {
+  const form = useForm<z.infer<typeof assignRecordSchema>>({
+    resolver: zodResolver(assignRecordSchema),
+    defaultValues: {
+      receivingDepartments: [],
+      assignedEmployees: [],
+      remarks: "",
+      selectedRemark: "",
+      selectedTeeter: "",
+      selectedSignature: "",
+    },
+  });
+  const { userDetails } = useAuthUser();
+  const unitId = userDetails?.employee?.[0]?.unitId ?? null;
+  const { data } = useUnitConfiguration(unitId as string, {
+    enabled: !!unitId,
+  });
+  const config = data?.data?.items?.[0];
+  const [teeters, setTeeters] = useState<any[]>([]);
+  const [signatures, setSignatures] = useState<any[]>([]);
+
+  const [teeterUrl, setTeeterUrl] = useState("");
+  const [signatureUrl, setSignatureUrl] = useState("");
+  const { currentEmployeesResponse, allScopedDepartments } = useSettings();
+  const { permissionKeys } = useUserDetail();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+  const [open, setOpen] = useState(false);
+  const { data: remarksData, isLoading: isRemarkLoading } = useRemarkByUnitId(
+    unitId as string,
+    {
+      skip: 0,
+      take: 300,
+    },
+  );
+
+  const selectedTeeter = form.watch("selectedTeeter");
+  const selectedSignature = form.watch("selectedSignature");
+  // Transform remarks for dropdown
+  const remarkOptions = useMemo(
+    () =>
+      remarksData?.items.map((r: { remark: string; description?: string }) => ({
+        label: r.remark, // or `${r.remark} - ${r.description}` if you want
+        value: r.remark,
+      })) || [],
+    [remarksData?.items],
+  );
+
+  // Note: We don't auto-set the first remark to give users full control
+  const localizedName = useLocalizedName();
+
+  const topLevelIncomingInstances = useMemo(
+    () => record?.incomingInstances ?? [],
+    [record?.incomingInstances],
+  );
+
+  const childIncomingInstanceQueries = useQueries({
+    queries: topLevelIncomingInstances.map((instance) => ({
+      queryKey: ["child-incoming-instances", instance.id],
+      queryFn: () => getChildIncomingInstances(instance.id),
+      enabled: isOpen && !!instance.id,
+      staleTime: 0,
+    })),
+  });
+
+  const fetchedChildIncomingInstances = childIncomingInstanceQueries.flatMap(
+    (query) => query.data ?? [],
+  );
+
+  const assignedSelectionIds = useMemo(() => {
+    const positionIds = new Set<string>();
+    const employeeIds = new Set<string>();
+    const employeePositionIds = new Set<string>();
+    const collectInstanceIds = (instance: any) => {
+      if (!instance) {
+        return;
+      }
+
+      if (instance.assigneePositionId) {
+        positionIds.add(instance.assigneePositionId);
+      }
+      if (instance.assigneePosition?.id) {
+        positionIds.add(instance.assigneePosition.id);
+      }
+      if (instance.assigneeId) {
+        employeeIds.add(instance.assigneeId);
+        employeePositionIds.add(instance.assigneeId);
+      }
+      if (instance.assignee?.id) {
+        employeeIds.add(instance.assignee.id);
+        employeePositionIds.add(instance.assignee.id);
+      }
+      if (instance.assignee?.employee?.id) {
+        employeeIds.add(instance.assignee.employee.id);
+      }
+      if (Array.isArray(instance.children)) {
+        instance.children.forEach(collectInstanceIds);
+      }
+    };
+
+    [...topLevelIncomingInstances, ...fetchedChildIncomingInstances].forEach(
+      collectInstanceIds,
+    );
+
+    return { positionIds, employeeIds, employeePositionIds };
+  }, [fetchedChildIncomingInstances, topLevelIncomingInstances]);
+
+  // Map your position list to options for MultiSelect
+  const positionOptions = Array.isArray(allScopedDepartments)
+    ? allScopedDepartments
+        .filter((pos: PositionDto) => !assignedSelectionIds.positionIds.has(pos.id))
+        .map((pos: PositionDto) => ({
+          label: localizedName(pos.name) || localizedName(pos.name) || "N/A",
+          value: pos.id,
+        }))
+    : [];
+
+  const employeeOptions = (currentEmployeesResponse?.items ?? []).flatMap(
+    (employee: EmployeeWithUnitDto) =>
+      (employee.employeePositions ?? [])
+        .filter(
+          (empPos) =>
+            !assignedSelectionIds.employeePositionIds.has(empPos.id) &&
+            !assignedSelectionIds.employeeIds.has(employee.id),
+        )
+        .map((empPos) => ({
+          label:
+            localizedName(employee.user?.name) ||
+            localizedName(employee.name) ||
+            "Unnamed employee",
+          value: empPos.id,
+          employeePositionId: empPos.id,
+          positionId: empPos.position?.id ?? "",
+        })),
+  );
+
+  const { assignRecord, isPending } = useAssignTasks();
+  const employeeId = userDetails?.employee?.[0]?.id ?? "";
+
+  const locale: "am" | "en" = record?.preferredLanguage
+    ?.toLowerCase()
+    .startsWith("am")
+    ? "am"
+    : "en";
+  const { data: teeterData } = useTeetersListWithPresigned(locale);
+  const { data: signatureData } = useSignatureListWithPresigned(employeeId);
+  const handleFormSubmit = form.handleSubmit(async (values) => {
+    try {
+      if (!record?.id) {
+        throw new Error("Record id missing");
+      }
+
+      // ✅ 1. Convert department IDs to positionIds
+      const departmentPositions = values.receivingDepartments.flatMap(
+        (departmentId: string) => {
+          return positionOptions
+            .filter((pos) => pos.value === departmentId)
+            .map((pos) => ({
+              positionId: pos.value,
+            }));
+        },
+      );
+
+      // ✅ 2. Handle selected employees
+      const employeePositions = values.assignedEmployees
+        .map((employeeId: string) => {
+          const empIdStr = employeeId.toString();
+          const match = employeeOptions.find(
+            (emp) => emp.value.toString() === empIdStr,
+          );
+          if (!match) return null;
+
+          return {
+            positionId: match.positionId,
+            employeePositionId: employeeId,
+          };
+        })
+        .filter((pos: any): pos is NonNullable<typeof pos> => pos !== null);
+
+      const positions = [...departmentPositions, ...employeePositions];
+
+      // Use selectedRemark if available, otherwise use manual remarks
+      const finalRemarks = (
+        values.selectedRemark ||
+        values.remarks ||
+        ""
+      ).trim();
+
+      // Record officer (no dispatch permission) must provide a comment
+      if (!permissionKeys.includes("can:dispatchRecords") && !finalRemarks) {
+        form.setError("remarks", {
+          type: "required",
+          message: t("userIncoming.commentRequired", "Comment is required"),
+        });
+        return;
+      }
+      const instance = record?.incomingInstances?.[0];
+
+      const payload: ReAssignRecordPayload = {
+        incomingInstanceId: instance.id,
+        recordId: isTable ? record.id : record?.id || "",
+        comment: finalRemarks,
+        positions,
+
+        // ✅ OPTIONAL SAFE ADDITION
+        ...(selectedTeeter && { teeterId: selectedTeeter }),
+        ...(selectedSignature && { signatureId: selectedSignature }),
+      };
+
+      assignRecord(payload, {
+        onSuccess: () => {
+          form.reset();
+          onSuccess();
+          onClose();
+        },
+        onError: (error) => {
+          handleError(error);
+        },
+      });
+    } catch (err) {
+      console.error("Form submit error:", err);
+    }
+  });
+  useEffect(() => {
+    const teeters = teeterData?.presignedTeeters;
+    if (!teeters?.length) return;
+    setTeeters(teeters);
+    const match =
+      teeters.find((t) => t.locale === locale) ??
+      (teeters.length === 1 ? teeters[0] : null);
+    if (match) form.setValue("selectedTeeter", match.id);
+  }, [teeterData, locale, form]);
+
+  useEffect(() => {
+    const current = signatureData?.items?.find(
+      (i) => i.isCurrent && i.uploadedSuccessfully,
+    );
+
+    if (current && signatureData?.presignedSignatureUrl) {
+      setSignatures([
+        {
+          id: current.id,
+          url: signatureData.presignedSignatureUrl,
+        },
+      ]);
+    }
+  }, [signatureData]);
+  useEffect(() => {
+    const t = teeters.find((x) => x.id === selectedTeeter);
+    setTeeterUrl(t?.url || "");
+  }, [selectedTeeter, teeters]);
+
+  useEffect(() => {
+    const s = signatures.find((x) => x.id === selectedSignature);
+    setSignatureUrl(s?.url || "");
+  }, [selectedSignature, signatures]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="sm:max-w-[425px] bg-white dark:bg-gray-800 max-h-[90vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>{t("userIncoming.Assign Record")}</DialogTitle>
+          <DialogDescription>
+            {t("userIncoming.Assign this record to one or more departments")}
+          </DialogDescription>
+        </DialogHeader>
+
+        <FormProvider {...form}>
+          <form onSubmit={handleFormSubmit} className="flex flex-col flex-1 overflow-hidden">
+            <div className="flex-1 overflow-y-auto px-4 space-y-4">
+              <FormField
+                control={form.control}
+                name="receivingDepartments"
+                render={({ field }) => (
+                  <FormItem className="space-y-1">
+                    <FormLabel>
+                      {t("userIncoming.Departments")}{" "}
+                      <span className="text-red-500">*</span>
+                    </FormLabel>
+                    <FormControl>
+                      <MultiSelect
+                        options={positionOptions}
+                        onValueChange={field.onChange}
+                        value={field.value}
+                        placeholder={t("userIncoming.Select department(s)...")}
+                        variant="default"
+                        animation={200}
+                        maxCount={5}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="assignedEmployees"
+                render={({ field }) => (
+                  <FormItem className="space-y-1">
+                    <FormLabel>
+                      {t("userIncoming.Employees")}{" "}
+                      <span className="text-red-500">*</span>
+                    </FormLabel>
+                    <FormControl>
+                      <MultiSelect
+                        options={employeeOptions}
+                        value={field.value} // string[] of employeeIds
+                        onValueChange={field.onChange} // directly writes string[]
+                        placeholder={t("userIncoming.Select employee(s)...")}
+                        variant="default"
+                        animation={200}
+                        maxCount={5}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {!permissionKeys.includes("can:dispatchRecords") && (
+                <>
+                  {/* Dropdown for existing remarks */}
+                  <FormField
+                    control={form.control}
+                    name="selectedRemark"
+                    render={({ field }) => (
+                      <FormItem className="space-y-1">
+                        <FormLabel>
+                          {t("userIncoming.Select Predefined Remark")}
+                        </FormLabel>
+
+                        <div className="flex gap-2">
+                          {/* Searchable Dropdown */}
+                          <Popover open={open} onOpenChange={setOpen}>
+                            <PopoverTrigger asChild>
+                              <Button
+                                variant="outline"
+                                role="combobox"
+                                className="flex-1 justify-between"
+                                disabled={isRemarkLoading}
+                              >
+                                {field.value
+                                  ? remarkOptions.find(
+                                      (o: any) => o.value === field.value,
+                                    )?.label
+                                  : t("userIncoming.Select a remark...")}
+                                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                              </Button>
+                            </PopoverTrigger>
+
+                            <PopoverContent className="w-[300px] p-0 dark:bg-gray-800 dark:border-gray-700">
+                              <Command>
+                                <CommandInput
+                                  placeholder={t("userIncoming.searchRemark")}
+                                />
+                                <CommandList>
+                                  <CommandEmpty>
+                                    {t("userIncoming.noRemark")}
+                                  </CommandEmpty>
+                                  <CommandGroup>
+                                    {remarkOptions.map((option: any) => (
+                                      <CommandItem
+                                        key={option.value}
+                                        value={option.value}
+                                        onSelect={() => {
+                                          field.onChange(option.value);
+                                          form.setValue("remarks", option.value);
+                                          setOpen(false);
+                                        }}
+                                      >
+                                        {option.label}
+                                      </CommandItem>
+                                    ))}
+                                  </CommandGroup>
+                                </CommandList>
+                              </Command>
+                            </PopoverContent>
+                          </Popover>
+
+                          {/* Clear button */}
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            onClick={() => {
+                              field.onChange("");
+                              form.setValue("remarks", "");
+                            }}
+                            disabled={!field.value}
+                            className="px-3"
+                          >
+                            {t("userIncoming.Clear")}
+                          </Button>
+                        </div>
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                {config && config.forwardWithTeeterSignature && (
+                  <>
+                    {teeters.length === 0 && teeterData && (
+                      <p className="rounded border border-amber-200 bg-amber-50 p-2 text-sm text-amber-700 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-300">
+                        {getNoStampsForLanguageMessage(locale, t)}
+                      </p>
+                    )}
+                    {teeters.length > 0 && (
+                      <FormField
+                        control={form.control}
+                        name="selectedTeeter"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>Stamp (optional)</FormLabel>
+                            <div className="flex items-center gap-2">
+                              <FormControl>
+                                <Select
+                                  onValueChange={field.onChange}
+                                  value={field.value}
+                                >
+                                  <SelectTrigger>
+                                    <SelectValue placeholder="Select stamp">
+                                      {field.value
+                                        ? (teeterData?.presignedTeeters?.find(
+                                            (t) => t.id === field.value,
+                                          )?.name ?? "Select stamp")
+                                        : null}
+                                    </SelectValue>
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {teeters.map((t) => (
+                                      <SelectItem key={t.id} value={t.id}>
+                                        {t.name || "Stamp"}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </FormControl>
+                              <Button
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                onClick={() => field.onChange("")}
+                                disabled={!field.value}
+                              >
+                                {t("common.Clear", "Clear")}
+                              </Button>
+                            </div>
+
+                              {teeterUrl && (
+                                <img
+                                  src={teeterUrl}
+                                  className="h-20 w-20 object-contain mt-2"
+                                />
+                              )}
+                            </FormItem>
+                          )}
+                        />
+                      )}
+                      {signatures.length > 0 && (
+                        <FormField
+                          control={form.control}
+                          name="selectedSignature"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>Signature (optional)</FormLabel>
+                              <div className="flex items-center gap-2">
+                                <FormControl>
+                                  <Select
+                                    onValueChange={field.onChange}
+                                    value={field.value}
+                                  >
+                                    <SelectTrigger>
+                                      <SelectValue placeholder="Select signature" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                      {signatures.map((s) => (
+                                        <SelectItem key={s.id} value={s.id}>
+                                          Signature
+                                        </SelectItem>
+                                      ))}
+                                    </SelectContent>
+                                  </Select>
+                                </FormControl>
+                                <Button
+                                  type="button"
+                                  variant="outline"
+                                  size="sm"
+                                  onClick={() => field.onChange("")}
+                                  disabled={!field.value}
+                                >
+                                  {t("common.Clear", "Clear")}
+                                </Button>
+                              </div>
+
+                              {signatureUrl && (
+                                <img
+                                  src={signatureUrl}
+                                  className="h-16 w-40 object-contain mt-2"
+                                />
+                              )}
+                            </FormItem>
+                          )}
+                        />
+                      )}
+                    </>
+                  )}
+                  {/* Display selected predefined remark (read-only) */}
+                  {form.watch("selectedRemark") && (
+                    <FormField
+                      control={form.control}
+                      name="remarks"
+                      rules={{
+                        validate: (value) =>
+                          (typeof value === "string" &&
+                            value.trim().length > 0) ||
+                          t(
+                            "userIncoming.commentRequired",
+                            "Comment is required",
+                          ),
+                      }}
+                      render={({ field }) => (
+                        <FormItem className="space-y-1">
+                          <FormLabel>
+                            {t("userIncoming.Comment", "Comment")}{" "}
+                            <span className="text-red-500">*</span>
+                          </FormLabel>
+                          <FormControl>
+                            <Textarea
+                              rows={4}
+                              placeholder={t(
+                                "userIncoming.Predefined remark selected...",
+                              )}
+                              {...field}
+                              readOnly={true}
+                              className="bg-gray-50 dark:bg-gray-700 cursor-not-allowed dark:text-gray-300"
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  )}
+
+                  {/* Manual remarks textarea (only when no predefined remark selected) */}
+                  {!form.watch("selectedRemark") && (
+                    <FormField
+                      control={form.control}
+                      name="remarks"
+                      rules={{
+                        validate: (value) =>
+                          (typeof value === "string" &&
+                            value.trim().length > 0) ||
+                          t(
+                            "userIncoming.commentRequired",
+                            "Comment is required",
+                          ),
+                      }}
+                      render={({ field }) => (
+                        <FormItem className="space-y-1">
+                          <FormLabel>
+                            {t("userIncoming.Comment", "Comment")}{" "}
+                            <span className="text-red-500">*</span>
+                          </FormLabel>
+                          <FormControl>
+                            <Textarea
+                              rows={4}
+                              placeholder={t(
+                                "userIncoming.Enter your remarks...",
+                              )}
+                              {...field}
+                              className="dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100"
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  )}
+                </>
+              )}
+
+            </div>
+
+            <DialogFooter className="border-t border-gray-200 dark:border-gray-700 pt-4 mt-4">
+              <Button type="button" variant="outline" onClick={onClose}>
+                {t("userIncoming.Cancel")}
+              </Button>
+              <Button type="submit" disabled={isPending}>
+                {isPending
+                  ? t("userIncoming.Assigning...")
+                  : t("userIncoming.Assign")}
+              </Button>
+            </DialogFooter>
+          </form>
+        </FormProvider>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default AssigneRecordV2;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/AssigneRecord.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/AssigneRecord.tsx
new file mode 100644
index 000000000..4f0858de2
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/AssigneRecord.tsx
@@ -0,0 +1,769 @@
+import { useAssignTasks } from "@/record-management/components/hooks/useAssignTasks";
+import { MultiSelect } from "@/shared/common/ui/multi-select";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/shared/common/ui/form";
+import { Textarea } from "@/shared/common/ui/textarea";
+import { useForm, FormProvider } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Button } from "@/shared/common/ui/button";
+import useSettings from "@/record-management/components/hooks/useSettings";
+import { useUserDetail } from "@/record-management/components/hooks/useUserDetail";
+import {
+  PositionDto,
+  ReAssignRecordPayload,
+} from "@/record-management/dto/userRecords/usersDto";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/shared/common/ui/dialog";
+import { AssignRecordDto } from "@/record-management/dto/IncomingRecords/taskDto";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useRemarkByUnitId } from "@/super-admin/hooks/useRemark";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { useEffect, useMemo, useState } from "react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/shared/common/ui/popover";
+import { ChevronsUpDown } from "lucide-react";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/shared/common/ui/command";
+import { Controller } from "react-hook-form";
+
+import {
+  useSignatureListWithPresigned,
+  useTeetersListWithPresigned,
+} from "../../hooks/useSignatureAndTeeterWithPresigned";
+import { useUnitConfiguration } from "@/shared/hooks/useUnitConfiguration";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { EmployeeWithUnitDto } from "@/user-management/dto/employees/employees";
+import { useQueries } from "@tanstack/react-query";
+import { getChildIncomingInstances } from "@/record-management/services/api/incomingInstanceService";
+import { getNoStampsForLanguageMessage } from "@/record-management/utils/stampMessages";
+
+const assignRecordSchema = z
+  .object({
+    receivingDepartments: z.array(z.string()),
+    assignedEmployees: z.array(z.string()),
+    remarks: z.string(),
+    selectedRemark: z.string(),
+    selectedTeeter: z.string(),
+    selectedSignature: z.string(),
+  })
+  .refine(
+    (data) =>
+      data.receivingDepartments.length > 0 || data.assignedEmployees.length > 0,
+    {
+      message: "Either receiver position or employee is required",
+      path: ["receivingDepartments"],
+    },
+  );
+
+interface AssignRecordProps {
+  isOpen?: boolean;
+  record: AssignRecordDto;
+  onSuccess: () => void;
+  onClose: () => void;
+  isTable?: boolean;
+}
+
+const AssigneRecord: React.FC<AssignRecordProps> = ({
+  isOpen = false,
+  record,
+  onSuccess,
+  onClose,
+  isTable,
+}) => {
+  const form = useForm<z.infer<typeof assignRecordSchema>>({
+    resolver: zodResolver(assignRecordSchema),
+    defaultValues: {
+      receivingDepartments: [],
+      assignedEmployees: [],
+      remarks: "",
+      selectedRemark: "",
+      selectedTeeter: "",
+      selectedSignature: "",
+    },
+  });
+  const { userDetails } = useAuthUser();
+  const unitId = userDetails?.employee?.[0]?.unitId ?? null;
+  const { data } = useUnitConfiguration(unitId as string, {
+    enabled: !!unitId,
+  });
+  const config = data?.data?.items?.[0];
+  const [teeters, setTeeters] = useState<any[]>([]);
+  const [signatures, setSignatures] = useState<any[]>([]);
+
+  const [teeterUrl, setTeeterUrl] = useState("");
+  const [signatureUrl, setSignatureUrl] = useState("");
+  const { currentEmployeesResponse, allScopedDepartments } = useSettings();
+  const { permissionKeys } = useUserDetail();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+  const [open, setOpen] = useState(false);
+  const { data: remarksData, isLoading: isRemarkLoading } = useRemarkByUnitId(
+    unitId as string,
+    {
+      skip: 0,
+      take: 300,
+    },
+  );
+
+  const selectedTeeter = form.watch("selectedTeeter");
+  const selectedSignature = form.watch("selectedSignature");
+  // Transform remarks for dropdown
+  const remarkOptions = useMemo(
+    () =>
+      remarksData?.items.map((r: { remark: string; description?: string }) => ({
+        label: r.remark, // or `${r.remark} - ${r.description}` if you want
+        value: r.remark,
+      })) || [],
+    [remarksData?.items],
+  );
+
+  // Note: We don't auto-set the first remark to give users full control
+  const localizedName = useLocalizedName();
+
+  const topLevelIncomingInstances = useMemo(() => {
+    const instances = record?.incomingInstances;
+    return instances?.length ? instances : [record];
+  }, [record]);
+
+  const childIncomingInstanceQueries = useQueries({
+    queries: topLevelIncomingInstances.map((instance) => ({
+      queryKey: ["child-incoming-instances", instance.id],
+      queryFn: () => getChildIncomingInstances(instance.id),
+      enabled: isOpen && !!instance.id,
+      staleTime: 0,
+    })),
+  });
+
+  const fetchedChildIncomingInstances = childIncomingInstanceQueries.flatMap(
+    (query) => query.data ?? [],
+  );
+
+  const assignedSelectionIds = useMemo(() => {
+    const positionIds = new Set<string>();
+    const employeeIds = new Set<string>();
+    const employeePositionIds = new Set<string>();
+    const collectInstanceIds = (instance: any) => {
+      if (!instance) {
+        return;
+      }
+
+      if (instance.assigneePositionId) {
+        positionIds.add(instance.assigneePositionId);
+      }
+      if (instance.assigneePosition?.id) {
+        positionIds.add(instance.assigneePosition.id);
+      }
+      if (instance.assigneeId) {
+        employeeIds.add(instance.assigneeId);
+        employeePositionIds.add(instance.assigneeId);
+      }
+      if (instance.assignee?.id) {
+        employeeIds.add(instance.assignee.id);
+        employeePositionIds.add(instance.assignee.id);
+      }
+      if (instance.assignee?.employee?.id) {
+        employeeIds.add(instance.assignee.employee.id);
+      }
+      if (Array.isArray(instance.children)) {
+        instance.children.forEach(collectInstanceIds);
+      }
+    };
+
+    [...topLevelIncomingInstances, ...fetchedChildIncomingInstances].forEach(
+      collectInstanceIds,
+    );
+
+    return { positionIds, employeeIds, employeePositionIds };
+  }, [fetchedChildIncomingInstances, topLevelIncomingInstances]);
+
+  // Map your position list to options for MultiSelect
+  const positionOptions = Array.isArray(allScopedDepartments)
+    ? allScopedDepartments
+        .filter((pos: PositionDto) => !assignedSelectionIds.positionIds.has(pos.id))
+        .map((pos: PositionDto) => ({
+          label: localizedName(pos.name) || localizedName(pos.name) || "N/A",
+          value: pos.id,
+        }))
+    : [];
+
+  const employeeOptions = (currentEmployeesResponse?.items ?? []).flatMap(
+    (employee: EmployeeWithUnitDto) =>
+      (employee.employeePositions ?? [])
+        .filter(
+          (empPos) =>
+            !assignedSelectionIds.employeePositionIds.has(empPos.id) &&
+            !assignedSelectionIds.employeeIds.has(employee.id),
+        )
+        .map((empPos) => ({
+          label:
+            localizedName(employee.user?.name) ||
+            localizedName(employee.name) ||
+            "Unnamed employee",
+          value: empPos.id,
+          employeePositionId: empPos.id,
+          positionId: empPos.position?.id ?? "",
+        })),
+  );
+
+  const { assignRecord, isPending } = useAssignTasks();
+  const employeeId = userDetails?.employee?.[0]?.id ?? "";
+
+  const locale: "am" | "en" = record?.preferredLanguage
+    ?.toLowerCase()
+    .startsWith("am")
+    ? "am"
+    : "en";
+  const { data: teeterData } = useTeetersListWithPresigned(locale);
+  const { data: signatureData } = useSignatureListWithPresigned(employeeId);
+  const handleFormSubmit = form.handleSubmit(async (values) => {
+    try {
+      if (!record?.id) {
+        throw new Error("Record id missing");
+      }
+
+      // ✅ 1. Convert department IDs to positionIds
+      const departmentPositions = values.receivingDepartments.flatMap(
+        (departmentId: string) => {
+          return positionOptions
+            .filter((pos) => pos.value === departmentId)
+            .map((pos) => ({
+              positionId: pos.value,
+            }));
+        },
+      );
+
+      // ✅ 2. Handle selected employees
+      const employeePositions = values.assignedEmployees
+        .map((employeeId: string) => {
+          const empIdStr = employeeId.toString();
+          const match = employeeOptions.find(
+            (emp) => emp.value.toString() === empIdStr,
+          );
+          if (!match) return null;
+
+          return {
+            positionId: match.positionId,
+            employeePositionId: employeeId,
+          };
+        })
+        .filter((pos: any): pos is NonNullable<typeof pos> => pos !== null);
+
+      const positions = [...departmentPositions, ...employeePositions];
+
+      // Use selectedRemark if available, otherwise use manual remarks
+      const finalRemarks = (
+        values.selectedRemark ||
+        values.remarks ||
+        ""
+      ).trim();
+
+      // Record officer (no dispatch permission) must provide a comment
+      if (!permissionKeys.includes("can:dispatchRecords") && !finalRemarks) {
+        form.setError("remarks", {
+          type: "required",
+          message: t("userIncoming.commentRequired", "Comment is required"),
+        });
+        return;
+      }
+      const payload: ReAssignRecordPayload = {
+        incomingInstanceId: record.id,
+        recordId: isTable ? record.record.id : record?.recordId || "",
+        comment: finalRemarks,
+        positions,
+
+        // ✅ OPTIONAL SAFE ADDITION
+        ...(selectedTeeter && { teeterId: selectedTeeter }),
+        ...(selectedSignature && { signatureId: selectedSignature }),
+      };
+
+      assignRecord(payload, {
+        onSuccess: () => {
+          form.reset();
+          onSuccess();
+          onClose();
+        },
+        onError: (error) => {
+          handleError(error);
+        },
+      });
+    } catch (err) {
+      console.error("Form submit error:", err);
+    }
+  });
+  useEffect(() => {
+    const teeters = teeterData?.presignedTeeters;
+    if (!teeters?.length) return;
+    setTeeters(teeters);
+    const match =
+      teeters.find((t) => t.locale === locale) ??
+      (teeters.length === 1 ? teeters[0] : null);
+    if (match) form.setValue("selectedTeeter", match.id);
+  }, [teeterData, locale, form]);
+
+  useEffect(() => {
+    const current = signatureData?.items?.find(
+      (i) => i.isCurrent && i.uploadedSuccessfully,
+    );
+
+    if (current && signatureData?.presignedSignatureUrl) {
+      setSignatures([
+        {
+          id: current.id,
+          url: signatureData.presignedSignatureUrl,
+        },
+      ]);
+    }
+  }, [signatureData]);
+  useEffect(() => {
+    const t = teeters.find((x) => x.id === selectedTeeter);
+    setTeeterUrl(t?.url || "");
+  }, [selectedTeeter, teeters]);
+
+  useEffect(() => {
+    const s = signatures.find((x) => x.id === selectedSignature);
+    setSignatureUrl(s?.url || "");
+  }, [selectedSignature, signatures]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent
+        className="
+      w-[95vw]
+      max-w-[425px]
+      max-h-[90vh]
+      overflow-y-auto
+      rounded-xl
+      bg-white
+      dark:bg-gray-800
+      p-4
+      sm:p-6
+    ">
+        <DialogHeader className="space-y-2 text-left">
+          <DialogTitle className="text-lg font-semibold">
+            {t("userIncoming.Assign Record")}
+          </DialogTitle>
+
+          <DialogDescription className="text-sm leading-relaxed">
+            {t("userIncoming.Assign this record to one or more departments")}
+          </DialogDescription>
+        </DialogHeader>
+
+        <FormProvider {...form}>
+          <form onSubmit={handleFormSubmit} className="flex flex-col flex-1 overflow-hidden">
+            <div className="flex-1 overflow-y-auto px-4 space-y-4">
+            <FormField
+              control={form.control}
+              name="receivingDepartments"
+              render={({ field }) => (
+                <FormItem className="space-y-1">
+                  <FormLabel>
+                    {t("userIncoming.Departments")}{" "}
+                    <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <FormControl>
+                    <MultiSelect
+                      options={positionOptions}
+                      onValueChange={field.onChange}
+                      value={field.value}
+                      placeholder={t("userIncoming.Select department(s)...")}
+                      variant="default"
+                      animation={200}
+                      maxCount={3}
+                    />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="assignedEmployees"
+              render={({ field }) => (
+                <FormItem className="space-y-1">
+                  <FormLabel>
+                    {t("userIncoming.Employees")}{" "}
+                    <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <FormControl>
+                    <MultiSelect
+                      options={employeeOptions}
+                      value={field.value}
+                      onValueChange={field.onChange}
+                      placeholder={t("userIncoming.Select employee(s)...")}
+                      variant="default"
+                      animation={200}
+                      maxCount={3}
+                    />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {!permissionKeys.includes("can:dispatchRecords") && (
+              <>
+                {/* Predefined Remark */}
+                <FormField
+                  control={form.control}
+                  name="selectedRemark"
+                  render={({ field }) => (
+                    <FormItem className="space-y-2">
+                      <FormLabel>
+                        {t("userIncoming.Select Predefined Remark")}
+                      </FormLabel>
+
+                      <div className="flex flex-col sm:flex-row gap-2">
+                        <Popover open={open} onOpenChange={setOpen}>
+                          <PopoverTrigger asChild>
+                            <Button
+                              variant="outline"
+                              role="combobox"
+                              disabled={isRemarkLoading}
+                              className="
+                            w-full
+                            justify-between
+                            overflow-hidden
+                          ">
+                              <span className="truncate">
+                                {field.value
+                                  ? remarkOptions.find(
+                                      (o: any) => o.value === field.value,
+                                    )?.label
+                                  : t("userIncoming.Select a remark...")}
+                              </span>
+
+                              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                            </Button>
+                          </PopoverTrigger>
+
+                          <PopoverContent
+                            align="start"
+                            className="
+                          w-[85vw]
+                          max-w-[300px]
+                          p-0
+                          dark:bg-gray-800
+                          dark:border-gray-700
+                        ">
+                            <Command>
+                              <CommandInput
+                                placeholder={t("userIncoming.searchRemark")}
+                              />
+
+                              <CommandList>
+                                <CommandEmpty>
+                                  {t("userIncoming.noRemark")}
+                                </CommandEmpty>
+
+                                <CommandGroup>
+                                  {remarkOptions.map((option: any) => (
+                                    <CommandItem
+                                      key={option.value}
+                                      value={option.value}
+                                      onSelect={() => {
+                                        field.onChange(option.value);
+                                        form.setValue("remarks", option.value);
+                                        setOpen(false);
+                                      }}>
+                                      {option.label}
+                                    </CommandItem>
+                                  ))}
+                                </CommandGroup>
+                              </CommandList>
+                            </Command>
+                          </PopoverContent>
+                        </Popover>
+
+                        <Button
+                          type="button"
+                          variant="outline"
+                          onClick={() => {
+                            field.onChange("");
+                            form.setValue("remarks", "");
+                          }}
+                          disabled={!field.value}
+                          className="w-full sm:w-auto">
+                          {t("userIncoming.Clear")}
+                        </Button>
+                      </div>
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {config && config.forwardWithTeeterSignature && (
+                  <div className="space-y-4">
+                    {/* Stamp */}
+                    {teeters.length === 0 && teeterData && (
+                      <p className="rounded border border-amber-200 bg-amber-50 p-2 text-sm text-amber-700 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-300">
+                        {getNoStampsForLanguageMessage(locale, t)}
+                      </p>
+                    )}
+                    {teeters.length > 0 && (
+                      <FormField
+                        control={form.control}
+                        name="selectedTeeter"
+                        render={({ field }) => (
+                          <FormItem className="space-y-2">
+                            <FormLabel>Stamp (optional)</FormLabel>
+
+                            <div className="flex flex-col sm:flex-row gap-2">
+                              <FormControl>
+                                <Select
+                                  onValueChange={field.onChange}
+                                  value={field.value}>
+                                  <SelectTrigger className="w-full">
+                                    <SelectValue placeholder="Select stamp">
+                                      {field.value
+                                        ? (teeterData?.presignedTeeters?.find(
+                                            (t) => t.id === field.value,
+                                          )?.name ?? "Select stamp")
+                                        : null}
+                                    </SelectValue>
+                                  </SelectTrigger>
+
+                                  <SelectContent>
+                                    {teeters.map((t) => (
+                                      <SelectItem key={t.id} value={t.id}>
+                                        {t.name || "Stamp"}
+                                      </SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </FormControl>
+
+                              <Button
+                                type="button"
+                                variant="outline"
+                                onClick={() => field.onChange("")}
+                                disabled={!field.value}
+                                className="w-full sm:w-auto">
+                                {t("common.Clear", "Clear")}
+                              </Button>
+                            </div>
+
+                            {teeterUrl && (
+                              <img
+                                src={teeterUrl}
+                                className="
+                              h-20
+                              w-20
+                              object-contain
+                              mt-2
+                              rounded-md
+                              border
+                            "
+                              />
+                            )}
+                          </FormItem>
+                        )}
+                      />
+                    )}
+
+                    {/* Signature */}
+                    {signatures.length > 0 && (
+                      <FormField
+                        control={form.control}
+                        name="selectedSignature"
+                        render={({ field }) => (
+                          <FormItem className="space-y-2">
+                            <FormLabel>Signature (optional)</FormLabel>
+
+                            <div className="flex flex-col sm:flex-row gap-2">
+                              <FormControl>
+                                <Select
+                                  onValueChange={field.onChange}
+                                  value={field.value}>
+                                  <SelectTrigger className="w-full">
+                                    <SelectValue placeholder="Select signature" />
+                                  </SelectTrigger>
+
+                                  <SelectContent>
+                                    {signatures.map((s) => (
+                                      <SelectItem key={s.id} value={s.id}>
+                                        Signature
+                                      </SelectItem>
+                                    ))}
+                                  </SelectContent>
+                                </Select>
+                              </FormControl>
+
+                              <Button
+                                type="button"
+                                variant="outline"
+                                onClick={() => field.onChange("")}
+                                disabled={!field.value}
+                                className="w-full sm:w-auto">
+                                {t("common.Clear", "Clear")}
+                              </Button>
+                            </div>
+
+                            {signatureUrl && (
+                              <img
+                                src={signatureUrl}
+                                className="
+                              h-16
+                              w-full
+                              max-w-[160px]
+                              object-contain
+                              mt-2
+                              rounded-md
+                              border
+                            "
+                              />
+                            )}
+                          </FormItem>
+                        )}
+                      />
+                    )}
+                  </div>
+                )}
+
+                {/* Readonly predefined remark */}
+                {form.watch("selectedRemark") && (
+                  <FormField
+                    control={form.control}
+                    name="remarks"
+                    rules={{
+                      validate: (value) =>
+                        (typeof value === "string" &&
+                          value.trim().length > 0) ||
+                        t(
+                          "userIncoming.commentRequired",
+                          "Comment is required",
+                        ),
+                    }}
+                    render={({ field }) => (
+                      <FormItem className="space-y-2">
+                        <FormLabel>
+                          {t("userIncoming.Comment", "Comment")}
+                          <span className="text-red-500 ml-1">*</span>
+                        </FormLabel>
+
+                        <FormControl>
+                          <Textarea
+                            rows={4}
+                            {...field}
+                            readOnly
+                            placeholder={t(
+                              "userIncoming.Predefined remark selected...",
+                            )}
+                            className="
+                          resize-none
+                          bg-gray-50
+                          dark:bg-gray-700
+                          cursor-not-allowed
+                          dark:text-gray-300
+                        "
+                          />
+                        </FormControl>
+
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                )}
+
+                {/* Manual comment */}
+                {!form.watch("selectedRemark") && (
+                  <FormField
+                    control={form.control}
+                    name="remarks"
+                    rules={{
+                      validate: (value) =>
+                        (typeof value === "string" &&
+                          value.trim().length > 0) ||
+                        t(
+                          "userIncoming.commentRequired",
+                          "Comment is required",
+                        ),
+                    }}
+                    render={({ field }) => (
+                      <FormItem className="space-y-2">
+                        <FormLabel>
+                          {t("userIncoming.Comment", "Comment")}
+                          <span className="text-red-500 ml-1">*</span>
+                        </FormLabel>
+
+                        <FormControl>
+                          <Textarea
+                            rows={4}
+                            placeholder={t(
+                              "userIncoming.Enter your remarks...",
+                            )}
+                            {...field}
+                            className="
+                          resize-none
+                          dark:bg-gray-700
+                          dark:border-gray-600
+                          dark:text-gray-100
+                        "
+                          />
+                        </FormControl>
+
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                )}
+              </>
+            )}
+
+            </div>
+
+            <DialogFooter className="border-t border-gray-200 dark:border-gray-700 pt-4 mt-4">
+              <Button type="button" variant="outline" onClick={onClose}>
+                {t("userIncoming.Cancel")}
+              </Button>
+
+              <Button
+                type="submit"
+                disabled={isPending}
+                className="w-full sm:w-auto">
+                {isPending
+                  ? t("userIncoming.Assigning...")
+                  : t("userIncoming.Assign")}
+              </Button>
+            </DialogFooter>
+          </form>
+        </FormProvider>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default AssigneRecord;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/RejectIncoming.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/RejectIncoming.tsx
new file mode 100644
index 000000000..be0e8d5ee
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/RejectIncoming.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { useAssignTasks } from "@/record-management/components/hooks/useAssignTasks";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/shared/common/ui/dialog";
+import { useState } from "react";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { Textarea } from "@/shared/common/ui/textarea";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+const RejectIncomingRecord: React.FC<{
+  open: boolean;
+  onClose: () => void;
+  incomingInstanceId: string;
+  onSuccess?: () => void;
+}> = ({ open, onClose, incomingInstanceId, onSuccess }) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [comment, setComment] = useState("");
+  const { acceptIncoming } = useAssignTasks();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  const handleConfirmClick = async () => {
+    setIsLoading(true);
+
+    const requestBody = {
+      incomingInstanceId: incomingInstanceId,
+      status: "rejected",
+      comment: comment,
+    };
+
+    acceptIncoming(requestBody, {
+      onSuccess: () => {
+        toast.success(t("userIncoming.Record rejected successfully"));
+        setIsLoading(false);
+        onClose();
+        onSuccess?.();
+      },
+      onError: (error) => {
+        handleError(error);
+        setIsLoading(false);
+      },
+    });
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(isOpen) => {
+        if (!isOpen) onClose(); // Only call onClose when dialog is closing
+      }}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t("userIncoming.Confirm")}</DialogTitle>
+        </DialogHeader>
+        <p>{t("userIncoming.Are you sure you want to reject this record?")}</p>
+        <Textarea
+          placeholder={t("userIncoming.Comment")}
+          value={comment}
+          onChange={(e) => setComment(e.target.value)}
+        />
+        <DialogFooter className="flex gap-2">
+          <Button variant="outline" onClick={onClose} disabled={isLoading}>
+            {t("userIncoming.Cancel")}
+          </Button>
+          <Button
+            onClick={handleConfirmClick}
+            disabled={isLoading}
+            className="bg-primary-600 hover:bg-primary-700">
+            {isLoading
+              ? t("userIncoming.Processing...")
+              : t("userIncoming.Confirm")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default RejectIncomingRecord;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/incomingInternalRecordsColumns.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/incomingInternalRecordsColumns.tsx
new file mode 100644
index 000000000..e83a418d5
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/incomingInternalRecordsColumns.tsx
@@ -0,0 +1,258 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { DataTableColumnHeader } from "@/shared/common/ui/dataTableColumnHeader";
+import { renderStatus } from "@/record-management/utils/renderDetails";
+import { AssignedRecordDto } from "@/record-management/dto/IncomingRecords/taskDto";
+import { InternalIncomingRecordActions } from "./internalIncomingRecordsActions";
+import { t } from "i18next";
+import i18n from "i18next";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+import { useState, useRef, useEffect } from "react";
+import { BellRing } from "lucide-react";
+
+// Utility component to show tooltip only when text overflows
+const OverflowTooltip = ({
+  children,
+  text,
+  maxWidth = 200,
+}: {
+  children: React.ReactNode;
+  text: string;
+  maxWidth?: number;
+}) => {
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const textRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const checkOverflow = () => {
+      if (textRef.current) {
+        const element = textRef.current;
+        setIsOverflowing(element.scrollWidth > element.clientWidth);
+      }
+    };
+
+    checkOverflow();
+    window.addEventListener("resize", checkOverflow);
+    return () => window.removeEventListener("resize", checkOverflow);
+  }, [text]);
+
+  if (isOverflowing) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div
+            ref={textRef}
+            className="overflow-hidden text-ellipsis whitespace-nowrap"
+            style={{ maxWidth: `${maxWidth}px` }}
+          >
+            {children}
+          </div>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p className="max-w-xs break-words">{text}</p>
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <div
+      ref={textRef}
+      className="overflow-hidden text-ellipsis whitespace-nowrap"
+      style={{ maxWidth: `${maxWidth}px` }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const InternalIncomingRecordsColumns = (
+  refetch: () => void,
+  localizedName: (name: { en: string; am: string }) => string,
+  isSecretary: boolean,
+  isSelf: boolean,
+  pageNo: number,
+  openDropdownId?: string | null,
+  onDropdownChange?: (id: string | null) => void,
+): ColumnDef<AssignedRecordDto>[] => {
+  return [
+    {
+      id: "letterName",
+      header: () => t("viewDetail.fileName"),
+      cell: ({ row }) => {
+        const letterName = row?.original?.record?.letterName || "-";
+
+        return (
+          <OverflowTooltip text={letterName} maxWidth={150}>
+            {letterName}
+          </OverflowTooltip>
+        );
+      },
+      accessorKey: "letterName",
+      enableHiding: true,
+      size: 150,
+    },
+    {
+      id: "referenceNumber",
+      header: () => t("viewDetail.referenceNumber"),
+      accessorKey: "referenceNumber",
+      cell: ({ row }) => {
+        const referenceNo = row?.original?.record?.referenceNumber || "";
+        const recordTypeKey = row?.original?.record?.recordTypeKey || "";
+        return (
+          <OverflowTooltip text={referenceNo} maxWidth={150}>
+            {referenceNo === "" ? (
+              <span className="inline-block px-3 py-1 text-xs font-medium text-blue-700 bg-blue-100 rounded-full border border-blue-200">
+                {recordTypeKey === "direct"
+                  ? t("nav.direct")
+                  : t("nav.internal_memo")}
+              </span>
+            ) : (
+              referenceNo
+            )}
+          </OverflowTooltip>
+        );
+      },
+      enableHiding: true,
+      size: 150,
+    },
+    {
+      id: "Sending_Department",
+      header: () => t("userIncoming.Sending Department"),
+      accessorKey: "Sending_Department",
+      cell: ({ row }) => {
+        const positionName = row.original.record.initiator?.position?.name;
+        const localized = localizedName(positionName); // ✅ dynamic translation
+        const displayText = localized || t("userIncoming.No Department");
+
+        return (
+          <OverflowTooltip text={displayText} maxWidth={200}>
+            {displayText}
+          </OverflowTooltip>
+        );
+      },
+      enableHiding: true,
+      size: 200,
+    },
+    {
+      id: "subject",
+      header: () => t("userIncoming.Subject"),
+      cell: ({ row }) => {
+        const subject = row.original.record.content?.[0].subject;
+        const displayText = subject ? subject : t("userIncoming.No Subject");
+
+        return (
+          <OverflowTooltip text={displayText} maxWidth={200}>
+            {displayText}
+          </OverflowTooltip>
+        );
+      },
+      accessorKey: "Subject",
+      enableHiding: true,
+      size: 200,
+    },
+    {
+      id: "isUrgent",
+      header: () => t("userIncoming.Is Urgent"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        const isUrgent = rowData.record.isUrgent;
+        return (
+          <span
+            className={`relative inline-flex items-center px-2 py-1 rounded-md text-sm font-semibold ${
+              isUrgent
+                ? "bg-yellow-100 text-yellow-800"
+                : "bg-gray-100 text-gray-600"
+            }`}
+          >
+            {isUrgent && (
+              <span className="absolute -top-0 -right-5 flex h-4 w-4">
+                {/* Pulsing ring */}
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
+
+                {/* Bell icon stays visible */}
+                <span className="relative inline-flex items-center justify-center pt-3">
+                  <BellRing className="h-5 w-5 text-red-500" />
+                </span>
+              </span>
+            )}
+
+            {isUrgent ? t("common.yes") : t("common.no")}
+          </span>
+        );
+      },
+      enableHiding: true,
+      accessorKey: "isUrgent",
+    },
+    {
+      accessorKey: "dispatchedDate",
+      header: () => t("userIncoming.Date"),
+      cell: ({ row }) => {
+        const record = row.original;
+
+        const isAmharic = i18n.language === "am";
+        const amharicDate =
+          record?.record?.amharicDispatchedDate || record?.amharicCreatedAt;
+        const createdAt = record.record?.dispatchedDate || record?.createdAt;
+
+        let displayText = "-";
+        if (isAmharic && amharicDate) {
+          displayText = amharicDate;
+        } else if (createdAt) {
+          displayText = new Date(createdAt).toLocaleDateString(i18n.language, {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+            hour: "numeric",
+            minute: "numeric",
+          });
+        }
+
+        return displayText;
+      },
+      size: 150,
+    },
+	    {
+	      id: "Task Status",
+	      header: () => t("userIncoming.Status"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        const statusElement = rowData.status
+          ? renderStatus(rowData.status, rowData.status)
+          : null;
+        return statusElement;
+      },
+      accessorKey: "TaskStatus",
+	      enableHiding: true,
+	      size: 120,
+	    },
+	    {
+	      id: "Actions",
+      header: t("userIncoming.Actions"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        const dropdownId = rowData.id || "";
+        return (
+          <InternalIncomingRecordActions
+            rowData={rowData}
+            refetchTable={refetch}
+            isSecretary={isSecretary}
+            isSelf={isSelf}
+            pageIndex={pageNo}
+            fromTable={true}
+            isDropdownOpen={openDropdownId === dropdownId}
+            onDropdownOpenChange={(open) => {
+              onDropdownChange?.(open ? dropdownId : null);
+            }}
+            dropdownId={dropdownId}
+          />
+        );
+      },
+      enableHiding: true,
+      accessorKey: "Actions",
+    },
+  ];
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/incomingInternalRecordsColumnsV2.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/incomingInternalRecordsColumnsV2.tsx
new file mode 100644
index 000000000..af10da60c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/incomingInternalRecordsColumnsV2.tsx
@@ -0,0 +1,259 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { DataTableColumnHeader } from "@/shared/common/ui/dataTableColumnHeader";
+import { renderStatus } from "@/record-management/utils/renderDetails";
+import { AssignedRecordDto } from "@/record-management/dto/IncomingRecords/taskDto";
+import { InternalIncomingRecordActions } from "./internalIncomingRecordsActions";
+import { t } from "i18next";
+import i18n from "i18next";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+import { useState, useRef, useEffect } from "react";
+import { BellRing } from "lucide-react";
+import { IncomingLetterItem } from "@/record-management/dto/IncomingRecords/incomingTasksDto";
+import { InternalIncomingRecordActionsV2 } from "./internalIncomingRecordsActionsV2";
+
+// Utility component to show tooltip only when text overflows
+const OverflowTooltip = ({
+  children,
+  text,
+  maxWidth = 200,
+}: {
+  children: React.ReactNode;
+  text: string;
+  maxWidth?: number;
+}) => {
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const textRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const checkOverflow = () => {
+      if (textRef.current) {
+        const element = textRef.current;
+        setIsOverflowing(element.scrollWidth > element.clientWidth);
+      }
+    };
+
+    checkOverflow();
+    window.addEventListener("resize", checkOverflow);
+    return () => window.removeEventListener("resize", checkOverflow);
+  }, [text]);
+
+  if (isOverflowing) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div
+            ref={textRef}
+            className="overflow-hidden text-ellipsis whitespace-nowrap"
+            style={{ maxWidth: `${maxWidth}px` }}
+          >
+            {children}
+          </div>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p className="max-w-xs break-words">{text}</p>
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <div
+      ref={textRef}
+      className="overflow-hidden text-ellipsis whitespace-nowrap"
+      style={{ maxWidth: `${maxWidth}px` }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const InternalIncomingRecordsColumnsV2 = (
+  refetch: () => void,
+  localizedName: (name: { en: string; am: string }) => string,
+  isSecretary: boolean,
+  isSelf: boolean,
+  pageNo: number,
+  openDropdownId?: string | null,
+  onDropdownChange?: (id: string | null) => void,
+  onAssign?: (rowData: IncomingLetterItem) => void,
+): ColumnDef<IncomingLetterItem>[] => {
+  return [
+    {
+      id: "letterName",
+      header: () => t("viewDetail.fileName"),
+      cell: ({ row }) => {
+        const letterName = row?.original?.letterName || "-";
+
+        return (
+          <OverflowTooltip text={letterName} maxWidth={150}>
+            {letterName}
+          </OverflowTooltip>
+        );
+      },
+      accessorKey: "letterName",
+      enableHiding: true,
+      size: 150,
+    },
+    {
+      id: "referenceNumber",
+      header: () => t("viewDetail.referenceNumber"),
+      accessorKey: "referenceNumber",
+      cell: ({ row }) => {
+        const referenceNo = row?.original?.referenceNumber || "";
+        const recordTypeKey = row?.original?.recordTypeKey || "";
+        return (
+          <OverflowTooltip text={referenceNo} maxWidth={150}>
+            {referenceNo === "" ? (
+              <span className="inline-block px-3 py-1 text-xs font-medium text-blue-700 bg-blue-100 rounded-full border border-blue-200">
+                {recordTypeKey === "direct"
+                  ? t("nav.direct")
+                  : t("nav.internal_memo")}
+              </span>
+            ) : (
+              referenceNo
+            )}
+          </OverflowTooltip>
+        );
+      },
+      enableHiding: true,
+      size: 150,
+    },
+    {
+      id: "Sending_Department",
+      header: () => t("userIncoming.Sending Department"),
+      accessorKey: "Sending_Department",
+      cell: ({ row }) => {
+        const positionName = row.original.initiator?.position?.name;
+        const localized = localizedName(positionName); // ✅ dynamic translation
+        const displayText = localized || t("userIncoming.No Department");
+
+        return (
+          <OverflowTooltip text={displayText} maxWidth={200}>
+            {displayText}
+          </OverflowTooltip>
+        );
+      },
+      enableHiding: true,
+      size: 200,
+    },
+    {
+      id: "subject",
+      header: () => t("userIncoming.Subject"),
+      cell: ({ row }) => {
+        const subject = row.original.content?.[0].subject;
+        const displayText = subject ? subject : t("userIncoming.No Subject");
+
+        return (
+          <OverflowTooltip text={displayText} maxWidth={200}>
+            {displayText}
+          </OverflowTooltip>
+        );
+      },
+      accessorKey: "Subject",
+      enableHiding: true,
+      size: 200,
+    },
+    {
+      id: "isUrgent",
+      header: () => t("userIncoming.Is Urgent"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        const isUrgent = rowData.isUrgent;
+        return (
+          <span
+            className={`relative inline-flex items-center px-2 py-1 rounded-md text-sm font-semibold ${
+              isUrgent
+                ? "bg-yellow-100 text-yellow-800"
+                : "bg-gray-100 text-gray-600"
+            }`}
+          >
+            {isUrgent && (
+              <span className="absolute -top-0 -right-5 flex h-4 w-4">
+                {/* Pulsing ring */}
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
+
+                {/* Bell icon stays visible */}
+                <span className="relative inline-flex items-center justify-center pt-3">
+                  <BellRing className="h-5 w-5 text-red-500" />
+                </span>
+              </span>
+            )}
+
+            {isUrgent ? t("common.yes") : t("common.no")}
+          </span>
+        );
+      },
+      enableHiding: true,
+      accessorKey: "isUrgent",
+    },
+    {
+      accessorKey: "dispatchedDate",
+      header: () => t("userIncoming.Date"),
+      cell: ({ row }) => {
+        const record = row.original;
+        const lastInstance = record?.incomingInstances?.[0];
+        const isAmharic = i18n.language === "am";
+        const amharicDate = lastInstance?.amharicCreatedAt;
+        const createdAt = lastInstance?.createdAt;
+
+        let displayText = "-";
+        if (isAmharic && amharicDate) {
+          displayText = amharicDate;
+        } else if (createdAt) {
+          displayText = new Date(createdAt).toLocaleDateString(i18n.language, {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+            hour: "numeric",
+            minute: "numeric",
+          });
+        }
+
+        return displayText;
+      },
+      size: 150,
+    },
+	    {
+	      id: "Task Status",
+	      header: () => t("userIncoming.Status"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        const lastInstance = rowData?.incomingInstances?.[0];
+        const status = lastInstance?.status;
+        const statusElement = status ? renderStatus(status, status) : null;
+        return statusElement;
+      },
+      accessorKey: "TaskStatus",
+	      enableHiding: true,
+	      size: 120,
+	    },
+	    {
+	      id: "Actions",
+      header: t("userIncoming.Actions"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        const dropdownId = rowData.id || "";
+        return (
+          <InternalIncomingRecordActionsV2
+            rowData={rowData}
+            refetchTable={refetch}
+            isSecretary={isSecretary}
+            isSelf={isSelf}
+            pageIndex={pageNo}
+            fromTable={true}
+            isDropdownOpen={openDropdownId === dropdownId}
+            onDropdownOpenChange={(open) => { onDropdownChange?.(open ? dropdownId : null); }}
+            dropdownId={dropdownId}
+            onAssign={onAssign}
+          />
+        );
+      },
+      enableHiding: true,
+      accessorKey: "Actions",
+    },
+  ];
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/internalIncomingRecords.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/internalIncomingRecords.tsx
new file mode 100644
index 000000000..52446311f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/internalIncomingRecords.tsx
@@ -0,0 +1,301 @@
+import { useState, useEffect, useMemo, useCallback } from "react";
+import { useSearchParams } from "react-router-dom";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+import { DataTable } from "@/record-management/common/DataTable";
+import { Button } from "@/shared/common/ui/button";
+import {
+  CombinedFilterBar,
+  CombinedFilterField,
+} from "@/shared/components/filters/CombinedFilterBar";
+import { useInternalIncomingRecords } from "@/record-management/components/hooks/useInternalIncomingRecords";
+import Loader from "@/record-management/components/Loader/loader";
+import HeaderSection from "../headerSection";
+import { InternalIncomingRecordsColumns } from "./incomingInternalRecordsColumns";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { useUserDetail } from "../../hooks/useUserDetail";
+import { MeDto } from "@/shared/dto/user/meDto";
+import secretaryList from "@/record-management/common/secretaryViewList";
+import DelegationView from "@/record-management/common/DelegationView";
+import { useCombinedFilters } from "@/shared/hooks/useCombinedFilters";
+import { FilterParams } from "@/shared/utils/filterParams";
+
+const InternalIncomingRecords = () => {
+  const localizedName = useLocalizedName();
+  const { t } = useTranslation();
+  const { userDetails } = useAuthUser();
+  const { permissionKeys } = useUserDetail(userDetails as MeDto);
+  const selfFilters = useCombinedFilters<FilterParams>();
+  const parentFilters = useCombinedFilters<FilterParams>();
+  const [liveSearch, setLiveSearch] = useState<{
+    key: string;
+    value: string;
+  } | null>(null); // ← add
+  const [openDropdownId, setOpenDropdownId] = useState<string | null>(null);
+
+  const handleLiveSearch = (key: string, value: string) => {
+    if (!key || !value) {
+      setLiveSearch(null);
+      return;
+    }
+    setLiveSearch({ key, value });
+  };
+  const [statusFilter, setStatusFilter] = useState<string>("");
+  const isSecretary = permissionKeys.includes("can:viewParentPositionRecord");
+  const [searchParamsUrl, setSearchParamsUrl] = useSearchParams();
+  const urlPage = Number(searchParamsUrl.get("page") || 1);
+  const initialView = searchParamsUrl.get("view") || "self";
+  const [pagination, setPagination] = useState({
+    pageIndex: urlPage - 1,
+    pageSize: 10,
+  });
+  const isDelegated = userDetails?.employee?.some((emp) =>
+    emp.positions.some((pos) => pos.hasDelegated),
+  );
+  const [secretaryView, setSecretaryView] = useState(isSecretary ? initialView : "self");
+
+  useEffect(() => {
+    if (!isSecretary && secretaryView === "parent") {
+      setSecretaryView("self");
+    }
+  }, [isSecretary, secretaryView]);
+
+  const isSelf = secretaryView === "self";
+  const syncViewParam = useCallback((params: URLSearchParams) => {
+    if (secretaryView === "parent") {
+      params.set("view", "parent");
+    } else {
+      params.delete("view");
+    }
+    return params;
+  }, [secretaryView]);
+  const activeFilterStore = isSelf ? selfFilters : parentFilters;
+
+  const filterFields = useMemo<CombinedFilterField[]>(
+    () => [
+      {
+        key: "sendingPosition",
+        label: t("userIncoming.Department"),
+        type: "text",
+      },
+      { key: "subject", label: t("userIncoming.Subject"), type: "text" },
+      {
+        key: "dispatchedDate",
+        label: t("userIncoming.Dispatched Date"),
+        type: "dateRange",
+        fromKey: "fromDispatchedDate",
+        toKey: "toDispatchedDate",
+      },
+      {
+        key: "referenceNumber",
+        label: t("userIncoming.Reference Number"),
+        type: "text",
+      },
+    ],
+    [t],
+  );
+
+  useEffect(() => {
+    setSearchParamsUrl(
+      (prev) => syncViewParam(new URLSearchParams(prev)),
+      { replace: true },
+    );
+  }, [secretaryView, setSearchParamsUrl, syncViewParam]);
+
+  useEffect(() => {
+    setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+    setSearchParamsUrl(
+      (prev) => {
+        const params = new URLSearchParams(prev);
+        params.set("page", "1");
+        return syncViewParam(params);
+      },
+      { replace: true },
+    );
+  }, [
+    activeFilterStore.filters,
+    statusFilter,
+    setSearchParamsUrl,
+    syncViewParam,
+  ]);
+
+  useEffect(() => {
+    setPagination((prev) =>
+      prev.pageIndex === urlPage - 1
+        ? prev
+        : { ...prev, pageIndex: urlPage - 1 },
+    );
+  }, [urlPage]);
+
+  useEffect(() => {
+    setLiveSearch(null);
+  }, [secretaryView]);
+
+  const {
+    internalRecords,
+    isLoading,
+    isError,
+    refetch,
+    InternalCount,
+    internalParent,
+    internalParentCount,
+    refetchParent,
+    isErrorParent,
+    isLoadingParent,
+  } = useInternalIncomingRecords({
+    pageIndex: pagination.pageIndex * pagination.pageSize,
+    pageSize: pagination.pageSize,
+    status: statusFilter || undefined,
+    ...activeFilterStore.filters,
+    fetchParent: isSecretary,
+    ...(liveSearch ? { [liveSearch.key]: liveSearch.value } : {}),
+  });
+
+  let Error, loading;
+  if (isSelf) {
+    Error = isError;
+    loading = isLoading;
+  } else {
+    Error = isErrorParent;
+    loading = isLoadingParent;
+  }
+
+  const safeTotalCount = Math.max(
+    isSelf ? InternalCount || 1 : internalParentCount || 1,
+    1,
+  );
+
+  const statusOptions = [
+    { value: "", label: t("statusBar.All") },
+    { value: "draft", label: t("statusBar.In Progress") },
+    { value: "accepted", label: t("statusBar.Accepted") },
+    { value: "replied", label: t("statusBar.Replied") },
+    { value: "re_assigned", label: t("statusBar.Reassigned") },
+    { value: "rejected", label: t("statusBar.Rejected") },
+  ];
+
+  useEffect(() => {
+    if (isSelf) refetch();
+    else refetchParent?.();
+  }, [
+    activeFilterStore.filters,
+    pagination.pageIndex,
+    pagination.pageSize,
+    statusFilter,
+    refetch,
+    isSelf,
+    refetchParent,
+  ]);
+
+  const totalPages = Math.ceil(safeTotalCount / pagination.pageSize);
+
+  React.useEffect(() => {
+    if (safeTotalCount === 1) return;
+
+    let newPage = pagination.pageIndex + 1;
+
+    if (newPage > totalPages) {
+      newPage = 1;
+      setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+    }
+
+    setSearchParamsUrl((prev) => {
+      const params = new URLSearchParams(prev);
+      params.set("page", newPage.toString());
+      return syncViewParam(params);
+    });
+  }, [
+    totalPages,
+    safeTotalCount,
+    pagination.pageIndex,
+    setSearchParamsUrl,
+    syncViewParam,
+  ]);
+
+  const columns = useMemo(
+    () =>
+      InternalIncomingRecordsColumns(
+        isSelf ? refetch : refetchParent ? refetchParent : () => {},
+        localizedName,
+        isSecretary,
+        isSelf,
+        pagination?.pageIndex + 1,
+        openDropdownId,
+        setOpenDropdownId,
+      ),
+    [refetch, refetchParent, localizedName, isSecretary, isSelf, pagination, openDropdownId, setOpenDropdownId],
+  );
+
+  return isDelegated ? (
+    <DelegationView />
+  ) : (
+    <div className="flex flex-col gap-2 bg-background text-foreground">
+      <div className="mt-4 flex w-full min-w-0 flex-col gap-4">
+        <h4 className="text-xl font-medium text-gray-900 dark:text-gray-100">
+          {t("userIncoming.Letters")}
+        </h4>
+
+        <CombinedFilterBar
+          fields={filterFields}
+          filters={activeFilterStore.filters}
+          setFilter={activeFilterStore.setFilter}
+          setFilters={activeFilterStore.setFilters}
+          removeFilter={activeFilterStore.removeFilter}
+          removeFilters={activeFilterStore.removeFilters}
+          onFilterChange={() =>
+            setPagination((prev) => ({ ...prev, pageIndex: 0 }))
+          }
+          onLiveSearch={handleLiveSearch}
+          className="w-full min-w-0"
+        />
+      </div>
+
+      <HeaderSection />
+      {secretaryList(isSecretary, secretaryView, setSecretaryView, "SEC")}
+
+      <div className="flex flex-wrap gap-2">
+        {statusOptions.map((option) => (
+          <Button
+            key={option.value}
+            variant={statusFilter === option.value ? "linkActive" : "link"}
+            onClick={() => setStatusFilter(option.value)}
+            className="rounded-md text-sm sm:text-base">
+            {option.label}
+          </Button>
+        ))}
+      </div>
+
+      {loading && (
+        <div className="w-full h-full">
+          <Loader />
+        </div>
+      )}
+      {Error && isDelegated && (
+        <p className="text-red-600 dark:text-red-400">
+          {t("userIncoming.errDelegation")}
+        </p>
+      )}
+      {Error && !isDelegated && (
+        <p className="text-red-600 dark:text-red-400">
+          {t("userIncoming.Error loading records.")}
+        </p>
+      )}
+      {!loading && !Error && (
+        <DataTable
+          tableName="Internal Incoming Records"
+          columns={columns}
+          data={isSelf ? internalRecords : internalParent ? internalParent : []}
+          totalCount={safeTotalCount}
+          pagination={pagination}
+          setPagination={setPagination}
+          toolBarPosition="right"
+          refresh={isSelf ? refetch : refetchParent}
+        />
+      )}
+    </div>
+  );
+};
+
+export default InternalIncomingRecords;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/internalIncomingRecordsActions.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/internalIncomingRecordsActions.tsx
new file mode 100644
index 000000000..01ef3e04a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/internalIncomingRecordsActions.tsx
@@ -0,0 +1,576 @@
+import {
+  SearchCheck,
+  Forward,
+  EllipsisVertical,
+  Activity,
+  FileText,
+  X,
+  SquareX,
+  Repeat2,
+  MessageSquareMore,
+  Lock, // Added lock icon
+} from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import { Button, getActionButtonVariant } from "@/shared/common/ui/button";
+import { useState, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+
+import AssigneRecord from "./AssigneRecord";
+import useCanAssignRecord from "@/record-management/components/hooks/useCanAssignRecord";
+import { AssignRecordDto } from "@/record-management/dto/userRecords/usersDto";
+import { toast } from "sonner";
+
+import AcceptIncomingRecord from "./AcceptIncoming";
+import RejectIncomingRecord from "./RejectIncoming";
+import ParentContainer from "@/record-management/components/recordOfficer/recordDetails/ParentAssignementContainer";
+import { useTranslation } from "react-i18next";
+import { AssignedRecordDto } from "@/record-management/dto/IncomingRecords/taskDto";
+import { useQueryClient } from "@tanstack/react-query";
+import { hasSeen } from "@/record-management/services/api/incomingRecordService";
+import RemarkCreationDialog from "../remarkCreationCard";
+import IncomingInstanceDetail from "../IncomingInstanceDetail";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+import { FaSitemap } from "react-icons/fa";
+
+export interface DisplayRecordDto {
+  id: string;
+  recordTypeKey: string;
+  subject: string;
+  createdAt: string;
+  referenceNumber?: string;
+  pageIndex?: number;
+}
+
+type PreventableEvent = {
+  preventDefault: () => void;
+};
+
+const getLatestRemarkAt = (
+  latestRemarkAt?: string | null,
+  childAssignments?: { latestRemarkAt?: string | null }[],
+) => {
+  const remarkDates = [
+    latestRemarkAt,
+    ...(childAssignments?.map((child) => child.latestRemarkAt) ?? []),
+  ].filter(Boolean) as string[];
+
+  return remarkDates.reduce<string | null>((latest, current) => {
+    if (!latest) return current;
+
+    const latestTime = new Date(latest).getTime();
+    const currentTime = new Date(current).getTime();
+
+    if (Number.isNaN(latestTime) || Number.isNaN(currentTime)) {
+      return latest;
+    }
+
+    return currentTime > latestTime ? current : latest;
+  }, null);
+};
+
+const TaskUpdateHint = ({
+  latestRemarkAt,
+  remarkLabel,
+}: {
+  latestRemarkAt?: string | null;
+  remarkLabel: string;
+}) => {
+  const isRemark = !!latestRemarkAt;
+
+  return (
+    isRemark && (
+      <span
+        className={`mt-1 inline-flex justify-center rounded-full border px-2 py-0.5 text-[11px] font-medium ${
+          isRemark
+            ? "border-amber-200 bg-amber-50 text-amber-700"
+            : "border-blue-200 bg-blue-50 text-blue-700"
+        }`}>
+        {remarkLabel}
+      </span>
+    )
+  );
+};
+
+// Internal Incoming Actions component
+export function InternalIncomingRecordActions({
+  rowData,
+  refetchTable,
+  isSelf,
+  pageIndex,
+  fromTable,
+  isDropdownOpen = false,
+  onDropdownOpenChange,
+  dropdownId = "",
+}: {
+  rowData?: AssignedRecordDto;
+  refetchTable?: () => void;
+  isSecretary?: boolean;
+  isSelf?: boolean;
+  pageIndex?: number;
+  fromTable: boolean;
+  isLocked?: boolean; // NEW
+  isDropdownOpen?: boolean;
+  onDropdownOpenChange?: (open: boolean) => void;
+  dropdownId?: string;
+}) {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const [showAssignModal, setShowAssignModal] = useState(false);
+  const [showRemarkDialog, setShowRemarkDialog] = useState(false);
+  const [showAcceptDialog, setShowAcceptDialog] = useState(false);
+  const [showRejectDialog, setShowRejectDialog] = useState(false);
+  const [isPanelOpen, setIsPanelOpen] = useState(false);
+  const [selectedRecord, setSelectedRecord] = useState<DisplayRecordDto | null>(
+    null,
+  );
+  const secretaryView = isSelf ? "" : "parent";
+  const queryClient = useQueryClient();
+
+  const handleSeen = useCallback(async () => {
+    if (!rowData?.id) throw new Error("Invalid Record ID");
+    // await hasSeen(rowData?.id);
+    if (refetchTable) await refetchTable();
+    queryClient.invalidateQueries({ queryKey: ["record-incoming"] });
+    queryClient.invalidateQueries({ queryKey: ["dashbordReport"] });
+    queryClient.invalidateQueries({ queryKey: ["incoming-instances"] });
+    queryClient.invalidateQueries({ queryKey: ["incoming-instances-parent"] });
+    queryClient.invalidateQueries({ queryKey: ["external-incoming"] });
+    queryClient.invalidateQueries({ queryKey: ["external-incoming-parent"] });
+    queryClient.invalidateQueries({ queryKey: ["approvalRecord"] });
+  }, [queryClient, refetchTable, rowData?.id]);
+
+  const openRemarkDialog = (e: PreventableEvent) => {
+    e.preventDefault();
+    
+    setShowRemarkDialog(true);
+  };
+
+  const handleViewDetails = async (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    
+    const baseUrl = `/record-management/viewIncoming/internal/${rowData?.id}/?page=${pageIndex}`;
+    const url = secretaryView === "parent" ? `${baseUrl}&view=parent` : baseUrl;
+
+    navigate(url, {
+      state: {
+        actionRowData: rowData,
+      },
+    });
+    await handleSeen();
+  };
+
+  const handleReply = (e: PreventableEvent) => {
+    e.preventDefault();
+    navigate(`/record-management/userRecords/addUserRecord/${rowData?.id}`);
+  };
+
+  const openAssignDialog = (e: PreventableEvent) => {
+    e.preventDefault();
+    
+    setShowAssignModal(true);
+  };
+
+  const openAcceptDialog = (e: PreventableEvent) => {
+    e.preventDefault();
+    
+    setShowAcceptDialog(true);
+  };
+
+  const openRejectDialog = (e: PreventableEvent) => {
+    e.preventDefault();
+    
+    setShowRejectDialog(true);
+  };
+
+  const isDelegation = Boolean(rowData?.record?.isDelegation);
+  const status = rowData?.status;
+  const latestRemarkAt = getLatestRemarkAt(
+    rowData?.latestRemarkAt,
+    rowData?.childAssignments,
+  );
+  const isLocked = rowData?.isLocked ?? false;
+  const normalizedStatus = (status ?? "").toString().trim().toLowerCase();
+  const isRejected = normalizedStatus === "rejected";
+  const isInProgress =
+    normalizedStatus === "draft" || normalizedStatus === "in_progress";
+  const isReassigned = normalizedStatus === "re_assigned";
+  const { canAssignRecord } = useCanAssignRecord();
+
+  const isAcceptable = !isRejected && isInProgress;
+  const isAssignable = !isDelegation && canAssignRecord;
+  const isRejectable = !isDelegation && !isRejected && isInProgress;
+  const isRemarkable = isReassigned;
+  const isReplyable =
+    !isRejected &&
+    (normalizedStatus === "draft" || normalizedStatus === "in_progress") &&
+    !isDelegation;
+
+  const shouldShowMenu = true;
+  const hasInlineActions =
+    shouldShowMenu &&
+    isSelf &&
+    (isAcceptable ||
+      isAssignable ||
+      isReplyable ||
+      isRejectable ||
+      isRemarkable);
+
+  const effectiveIsAcceptable = isAcceptable && !isLocked;
+  const effectiveIsAssignable = isAssignable && !isLocked;
+  const effectiveIsRejectable = isRejectable && !isLocked;
+  const effectiveIsReplyable = isReplyable && !isLocked;
+  const effectiveIsRemarkable = isRemarkable && !isLocked;
+  const effectiveHasInlineActions = hasInlineActions && !isLocked;
+  const effectiveShouldShowMenu = shouldShowMenu && isSelf && !isLocked;
+
+  return (
+    <>
+      {fromTable ? (
+        <div className="flex flex-wrap gap-1 sm:gap-2 items-center">
+          {/* View Detail Button - ALLOWED even when locked */}
+          <div className="flex min-w-[110px] flex-col items-start">
+            <Button
+              variant="viewDetail"
+              className="w-full"
+              onClick={(e) => handleViewDetails(e)}>
+              {t("userIncoming.View Detail")}
+            </Button>
+            <TaskUpdateHint
+              latestRemarkAt={latestRemarkAt}
+              remarkLabel={t("userIncoming.remarkAdded")}
+            />
+          </div>
+
+          {/* NEW: Locked Badge */}
+          {isLocked && (
+            <div className="flex items-center gap-1.5 rounded-full border border-amber-200 bg-amber-50 px-3 py-1.5 text-xs font-medium text-amber-700 dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-400">
+              <Lock className="h-3.5 w-3.5" />
+              {t("userIncoming.Locked", "Locked")}
+            </div>
+          )}
+
+          {/* Dropdown Menu - Hidden when locked */}
+          {effectiveShouldShowMenu && (
+            <DropdownMenu open={isDropdownOpen} onOpenChange={onDropdownOpenChange || (() => {})}>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  className="flex h-10 w-10 sm:h-8 sm:w-8 p-0 items-center justify-center data-[state=open]:bg-muted"
+                  aria-haspopup="menu"
+                  aria-expanded={isDropdownOpen}>
+                  <EllipsisVertical className="h-4 w-4" />
+                  <span className="sr-only">
+                    {t("userIncoming.Open actions menu")}
+                  </span>
+                </Button>
+              </DropdownMenuTrigger>
+
+              <DropdownMenuContent
+                align="end"
+                className="w-48 sm:w-[200px]"
+                onInteractOutside={(e) => {
+                  const target = e.target as HTMLElement;
+                  if (!target.closest('[role="dialog"]')) {
+                    
+                  }
+                }}>
+                <DropdownMenuLabel>
+                  {t("userIncoming.Actions")}
+                </DropdownMenuLabel>
+
+                <>
+                  {effectiveIsAcceptable && (
+                    <DropdownMenuItem
+                      onSelect={openAcceptDialog}
+                      className="cursor-pointer hover:!text-[#17a397] !bg-transparent transition-colors duration-200">
+                      <SearchCheck className="mr-2 h-4 w-4 group-hover:text-white transition-colors duration-200" />
+                      {t("userIncoming.Accept")}
+                    </DropdownMenuItem>
+                  )}
+                  {effectiveIsAssignable && (
+                    <DropdownMenuItem
+                      onSelect={openAssignDialog}
+                      className="cursor-pointer hover:!text-[#17a397] !bg-transparent transition-colors duration-200">
+                      <Forward className="mr-2 h-4 w-4 group-hover:text-white transition-colors duration-200" />
+                      {t("userIncoming.Assign")}
+                    </DropdownMenuItem>
+                  )}
+                  {effectiveIsReplyable && (
+                    <DropdownMenuItem
+                      onSelect={handleReply}
+                      className="cursor-pointer hover:!text-[#17a397] !bg-transparent transition-colors duration-200">
+                      <Repeat2 className="mr-2 h-4 w-4 group-hover:text-white transition-colors duration-200" />
+                      {t("userIncoming.reply")}
+                    </DropdownMenuItem>
+                  )}
+                  {effectiveIsRejectable && (
+                    <DropdownMenuItem
+                      onSelect={openRejectDialog}
+                      className="cursor-pointer hover:!text-[#ff8787] !bg-transparent transition-colors duration-200">
+                      <SquareX className="mr-2 h-4 w-4 group-hover:text-white transition-colors duration-200" />
+                      {t("userIncoming.Reject")}
+                    </DropdownMenuItem>
+                  )}
+                </>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+
+          {/* Activity Button - ALLOWED even when locked */}
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="
+          h-9 w-9 rounded-lg
+          text-muted-foreground
+          hover:bg-primary
+      hover:text-gray-100
+          transition-all duration-200
+        "
+                  onClick={(e) => {
+                    e.preventDefault();
+
+                    const record = rowData?.record;
+
+                    if (record) {
+                      setSelectedRecord({
+                        id: record.id,
+                        recordTypeKey: record.recordTypeKey,
+                        subject: record.content[0]?.subject ?? "",
+                        createdAt: new Date().toISOString(),
+                        referenceNumber: "N/A",
+                      });
+
+                      setIsPanelOpen(true);
+                    }
+                  }}
+                  aria-label={t("setting.viewWF")}>
+                  <FaSitemap className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+
+              <TooltipContent side="top">
+                <p>{t("setting.viewWF")}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+          <IncomingInstanceDetail
+            instanceId={rowData?.id as string}
+            rowData={rowData}
+          />
+          {/* Backdrop and Slide Panel */}
+          {isPanelOpen && (
+            <>
+              <div
+                className="fixed inset-0 z-40 bg-black/40 dark:bg-black/60 backdrop-blur-sm transition-opacity duration-300"
+                onClick={() => setIsPanelOpen(false)}
+              />
+
+              <div
+                className={`fixed top-0 right-0 z-50 h-full w-full sm:w-[600px] lg:w-[720px] bg-white dark:bg-gray-900 shadow-2xl border-l border-gray-200 dark:border-gray-800 transform transition-transform duration-300 ease-in-out flex flex-col ${
+                  isPanelOpen ? "translate-x-0" : "translate-x-full"
+                }`}
+                onClick={(e) => e.stopPropagation()}>
+                <div className="flex items-center justify-between px-5 py-4 border-b border-gray-200 dark:border-gray-800 bg-gradient-to-r from-primary-50 to-primary-50/50 dark:from-primary-900/20 dark:to-primary-900/10">
+                  <div className="flex items-center gap-3">
+                    <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary-100 dark:bg-primary-900/40">
+                      <FileText className="h-5 w-5 text-primary-600 dark:text-primary-400" />
+                    </div>
+                    <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+                      {t("userIncoming.View Detail")}
+                    </h2>
+                  </div>
+                  <button
+                    className="flex h-8 w-8 items-center justify-center rounded-lg text-gray-500 dark:text-gray-400 hover:bg-red-50 dark:hover:bg-red-900/30 hover:text-red-600 dark:hover:text-red-400 transition-colors"
+                    onClick={() => setIsPanelOpen(false)}>
+                    <X className="h-5 w-5" />
+                  </button>
+                </div>
+
+                <div className="flex-1 overflow-y-auto bg-gray-50/50 dark:bg-gray-900">
+                  {selectedRecord ? (
+                    <div className="p-4 sm:p-5">
+                      <ParentContainer
+                        recordId={selectedRecord.id}
+                        recordTitle=""
+                        recordType={selectedRecord.recordTypeKey}
+                        subject={selectedRecord.subject}
+                        createdDate={selectedRecord.createdAt}
+                        referenceNumber={selectedRecord.referenceNumber}
+                      />
+                    </div>
+                  ) : (
+                    <div className="flex flex-col items-center justify-center h-full text-gray-400 dark:text-gray-500">
+                      <FileText className="h-12 w-12 mb-3 opacity-40" />
+                      <p className="text-sm font-medium">No record selected.</p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      ) : (
+        <div>
+          {isLocked ? (
+            /* NEW: Locked state for inline view */
+            <div className="flex items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 px-4 py-2.5 text-sm font-medium text-amber-700 dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-400">
+              <Lock className="h-4 w-4" />
+              {t("userIncoming.RecordLocked", "This record is locked")}
+            </div>
+          ) : effectiveHasInlineActions ? (
+            <div className="flex flex-wrap gap-5">
+              {effectiveIsAcceptable && (
+                <Button
+                  variant={getActionButtonVariant("Accept")}
+                  onClick={openAcceptDialog}>
+                  <SearchCheck className="h-4 w-4" />
+                  <span>{t("userIncoming.Accept")}</span>
+                </Button>
+              )}
+
+              {effectiveIsAssignable && (
+                <Button
+                  variant={getActionButtonVariant("Assign")}
+                  onClick={openAssignDialog}>
+                  <Forward className="h-4 w-4" />
+                  <span>{t("userIncoming.Assign")}</span>
+                </Button>
+              )}
+
+              {effectiveIsReplyable && (
+                <Button
+                  variant={getActionButtonVariant("Reply")}
+                  onClick={handleReply}>
+                  <Repeat2 className="h-4 w-4" />
+                  <span>{t("userIncoming.reply")}</span>
+                </Button>
+              )}
+
+              {effectiveIsRejectable && (
+                <Button
+                  variant={getActionButtonVariant("Reject")}
+                  onClick={openRejectDialog}>
+                  <SquareX className="h-4 w-4" />
+                  <span>{t("userIncoming.Reject")}</span>
+                </Button>
+              )}
+
+              <IncomingInstanceDetail
+                instanceId={rowData?.id as string}
+                rowData={rowData}
+                fromTable={false}
+              />
+            </div>
+          ) : (
+            <p className="text-sm text-gray-500 italic">
+              {t("userIncoming.noActionsAvailable", {
+                defaultValue: "No actions available for this record.",
+              })}
+            </p>
+          )}
+        </div>
+      )}
+
+      {/* =========================
+        REMARK MODAL
+      ========================== */}
+      {showRemarkDialog && !isLocked && (
+        <RemarkCreationDialog
+          open={showRemarkDialog}
+          onClose={() => {
+            setShowRemarkDialog(false);
+            refetchTable?.();
+            queryClient.invalidateQueries({
+              queryKey: ["incoming-instances"],
+            });
+            queryClient.invalidateQueries({
+              queryKey: ["dashbordReport"],
+            });
+          }}
+          incomingInstanceId={rowData?.id as string}
+        />
+      )}
+
+      {showAssignModal && !isLocked && (
+        <AssigneRecord
+          record={rowData as unknown as AssignRecordDto}
+          isTable={fromTable}
+          onClose={() => {
+            setShowAssignModal(false);
+            if (refetchTable) {
+              refetchTable();
+            }
+            queryClient.invalidateQueries({ queryKey: ["incoming-instances"] });
+            queryClient.invalidateQueries({ queryKey: ["dashbordReport"] });
+          }}
+          onSuccess={() => {
+            toast.success(t("msg.successassign"));
+            setShowAssignModal(false);
+            if (refetchTable) {
+              refetchTable();
+            }
+            queryClient.invalidateQueries({ queryKey: ["incoming-instances"] });
+            queryClient.invalidateQueries({ queryKey: ["dashbordReport"] });
+          }}
+          isOpen={true}
+        />
+      )}
+
+      {showAcceptDialog && !isLocked && (
+        <AcceptIncomingRecord
+          open={showAcceptDialog}
+          onClose={() => {
+            setShowAcceptDialog(false);
+            if (refetchTable) {
+              refetchTable();
+            }
+            queryClient.invalidateQueries({ queryKey: ["incoming-instances"] });
+            queryClient.invalidateQueries({
+              queryKey: ["incoming-instances/v2"],
+            });
+            queryClient.invalidateQueries({ queryKey: ["dashbordReport"] });
+          }}
+          incomingInstanceId={rowData ? rowData.id : ""}
+        />
+      )}
+
+      {showRejectDialog && !isLocked && (
+        <RejectIncomingRecord
+          open={showRejectDialog}
+          onClose={() => {
+            setShowRejectDialog(false);
+            if (refetchTable) {
+              refetchTable();
+            }
+            queryClient.invalidateQueries({ queryKey: ["incoming-instances"] });
+            queryClient.invalidateQueries({
+              queryKey: ["incoming-instances/v2"],
+            });
+            queryClient.invalidateQueries({ queryKey: ["dashbordReport"] });
+          }}
+          onSuccess={() => {
+            if (!fromTable) {
+              navigate(-1);
+            }
+          }}
+          incomingInstanceId={rowData ? rowData.id : ""}
+        />
+      )}
+    </>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/internalIncomingRecordsActionsV2.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/internalIncomingRecordsActionsV2.tsx
new file mode 100644
index 000000000..19844f528
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/internalIncomingRecordsActionsV2.tsx
@@ -0,0 +1,574 @@
+import {
+  SearchCheck,
+  Forward,
+  EllipsisVertical,
+  Activity,
+  FileText,
+  X,
+  SquareX,
+  Repeat2,
+  MessageSquareMore,
+  Lock, // Added lock icon
+} from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import { Button } from "@/shared/common/ui/button";
+import { useState, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { toast } from "sonner";
+
+import AcceptIncomingRecord from "./AcceptIncoming";
+import RejectIncomingRecord from "./RejectIncoming";
+import ParentContainer from "@/record-management/components/recordOfficer/recordDetails/ParentAssignementContainer";
+import { useTranslation } from "react-i18next";
+
+import { useQueryClient } from "@tanstack/react-query";
+import { hasSeen } from "@/record-management/services/api/incomingRecordService";
+import { IncomingLetterItem } from "@/record-management/dto/IncomingRecords/incomingTasksDto";
+import AssignRecordV2 from "./AssignRecordV2";
+import useCanAssignRecord from "@/record-management/components/hooks/useCanAssignRecord";
+
+import IncomingInstanceDetail from "../IncomingInstanceDetail";
+
+export interface DisplayRecordDto {
+  id: string;
+  recordTypeKey: string;
+  subject: string;
+  createdAt: string;
+  referenceNumber?: string;
+  pageIndex?: number;
+}
+
+type PreventableEvent = {
+  preventDefault: () => void;
+};
+
+const getLatestRemarkAt = (
+  latestRemarkAt?: string | null,
+  childAssignments?: { latestRemarkAt?: string | null }[],
+) => {
+  const remarkDates = [
+    latestRemarkAt,
+    ...(childAssignments?.map((child) => child.latestRemarkAt) ?? []),
+  ].filter(Boolean) as string[];
+
+  return remarkDates.reduce<string | null>((latest, current) => {
+    if (!latest) return current;
+
+    const latestTime = new Date(latest).getTime();
+    const currentTime = new Date(current).getTime();
+
+    if (Number.isNaN(latestTime) || Number.isNaN(currentTime)) {
+      return latest;
+    }
+
+    return currentTime > latestTime ? current : latest;
+  }, null);
+};
+
+const TaskUpdateHint = ({
+  latestRemarkAt,
+  remarkLabel,
+}: {
+  latestRemarkAt?: string | null;
+  remarkLabel: string;
+}) => {
+  const isRemark = !!latestRemarkAt;
+
+  return (
+    isRemark && (
+      <span
+        className={`mt-1 inline-flex justify-center rounded-full border px-2 py-0.5 text-[11px] font-medium ${
+          isRemark
+            ? "border-amber-200 bg-amber-50 text-amber-700"
+            : "border-blue-200 bg-blue-50 text-blue-700"
+        }`}>
+        {remarkLabel}
+      </span>
+    )
+  );
+};
+
+// Internal Incoming Actions component
+export function InternalIncomingRecordActionsV2({
+  rowData,
+  refetchTable,
+  isSelf,
+  pageIndex,
+  fromTable,
+  isDropdownOpen,
+  onDropdownOpenChange,
+  dropdownId,
+  onAssign,
+}: {
+  rowData?: IncomingLetterItem;
+  refetchTable?: () => void;
+  isSecretary?: boolean;
+  isSelf?: boolean;
+  pageIndex?: number;
+  fromTable: boolean;
+  isLocked?: boolean; // NEW
+  isDropdownOpen?: boolean;
+  onDropdownOpenChange?: (open: boolean) => void;
+  dropdownId?: string;
+  onAssign?: (rowData: IncomingLetterItem) => void;
+}) {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const [showAssignModal, setShowAssignModal] = useState(false);
+  const [showRemarkDialog, setShowRemarkDialog] = useState(false);
+  const [showAcceptDialog, setShowAcceptDialog] = useState(false);
+  const [showRejectDialog, setShowRejectDialog] = useState(false);
+  const [isPanelOpen, setIsPanelOpen] = useState(false);
+  const [selectedRecord, setSelectedRecord] = useState<DisplayRecordDto | null>(
+    null,
+  );
+  const secretaryView = isSelf ? "" : "parent";
+  const queryClient = useQueryClient();
+
+  const handleSeen = useCallback(async () => {
+    if (!rowData?.id) throw new Error("Invalid Record ID");
+    // await hasSeen(rowData?.id);
+    if (refetchTable) await refetchTable();
+    queryClient.invalidateQueries({ queryKey: ["record-incoming"] });
+    queryClient.invalidateQueries({ queryKey: ["dashbordReport"] });
+    queryClient.invalidateQueries({ queryKey: ["incoming-instances"] });
+    queryClient.invalidateQueries({ queryKey: ["incoming-instances-parent"] });
+    queryClient.invalidateQueries({ queryKey: ["external-incoming"] });
+    queryClient.invalidateQueries({ queryKey: ["external-incoming-parent"] });
+    queryClient.invalidateQueries({ queryKey: ["approvalRecord"] });
+  }, [queryClient, refetchTable, rowData?.id]);
+
+  const handleViewDetails = async (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    
+    const lastIncomingInstance = rowData?.incomingInstances?.[0];
+    const baseUrl = `/record-management/viewIncoming/internal/${lastIncomingInstance?.id}/?page=${pageIndex}`;
+    const url = secretaryView === "parent" ? `${baseUrl}&view=parent` : baseUrl;
+
+    navigate(url, {
+      state: {
+        actionRowData: rowData,
+      },
+    });
+    await handleSeen();
+  };
+
+  const handleReply = (e: PreventableEvent) => {
+    e.preventDefault();
+    navigate(`/record-management/userRecords/addUserRecord/${rowData?.id}`);
+  };
+
+  const openAssignDialog = (e: PreventableEvent) => {
+    e.preventDefault();
+    if (fromTable && onAssign && rowData) {
+      onAssign(rowData);
+      onDropdownOpenChange?.(false);
+      return;
+    }
+    
+    setShowAssignModal(true);
+  };
+  const openRemarkDialog = (e: PreventableEvent) => {
+    e.preventDefault();
+    
+    setShowRemarkDialog(true);
+  };
+  const openAcceptDialog = (e: PreventableEvent) => {
+    e.preventDefault();
+    
+    setShowAcceptDialog(true);
+  };
+  const openRejectDialog = (e: PreventableEvent) => {
+    e.preventDefault();
+    
+    setShowRejectDialog(true);
+  };
+
+  const isDelegation = Boolean(rowData?.isDelegation);
+  const lastInstance = rowData?.incomingInstances?.[0];
+  const latestRemarkAt = getLatestRemarkAt(
+    lastInstance?.latestRemarkAt,
+    lastInstance?.childAssignments,
+  );
+  const status = lastInstance?.status;
+  const isLocked = rowData?.isLocked ?? false;
+  const normalizedStatus = (status ?? "").toString().trim().toLowerCase();
+  const isRejected = normalizedStatus === "rejected";
+  const isInProgress =
+    normalizedStatus === "draft" || normalizedStatus === "in_progress";
+  const isReassigned = normalizedStatus === "re_assigned";
+  const isAcceptable = !isRejected && isInProgress;
+  const { canAssignRecord } = useCanAssignRecord();
+
+  const isAssignable = !isDelegation && canAssignRecord;
+  const isRejectable = !isDelegation && !isRejected && isInProgress;
+  const isRemarkable = isReassigned;
+  const isReplyable = !isRejected && isInProgress && !isDelegation;
+  const shouldShowMenu = true;
+
+  const hasInlineActions =
+    shouldShowMenu &&
+    isSelf &&
+    (isAcceptable ||
+      isAssignable ||
+      isReplyable ||
+      isRejectable ||
+      isRemarkable);
+
+  const effectiveIsAcceptable = isAcceptable && !isLocked;
+  const effectiveIsAssignable = isAssignable && !isLocked;
+  const effectiveIsRejectable = isRejectable && !isLocked;
+  const effectiveIsReplyable = isReplyable && !isLocked;
+  const effectiveIsRemarkable = isRemarkable && !isLocked;
+  const effectiveHasInlineActions = hasInlineActions && !isLocked;
+  const effectiveShouldShowMenu = shouldShowMenu && isSelf && !isLocked;
+
+  return (
+    <>
+      {/* =========================
+        TABLE VIEW
+      ========================== */}
+      {fromTable ? (
+        <div className="flex flex-wrap items-center gap-1 sm:gap-2">
+          {/* View Detail - ALLOWED even when locked */}
+          <div className="flex min-w-[110px] flex-col items-start">
+            <Button
+              variant="viewDetail"
+              className="w-full"
+              onClick={handleViewDetails}>
+              {t("userIncoming.View Detail")}
+            </Button>
+            <TaskUpdateHint
+              latestRemarkAt={latestRemarkAt}
+              remarkLabel={t("userIncoming.remarkAdded")}
+            />
+          </div>
+
+          {/* NEW: Locked Badge */}
+          {isLocked && (
+            <div className="flex items-center gap-1.5 rounded-full border border-amber-200 bg-amber-50 px-3 py-1.5 text-xs font-medium text-amber-700 dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-400">
+              <Lock className="h-3.5 w-3.5" />
+              {t("userIncoming.Locked", "Locked")}
+            </div>
+          )}
+
+          {/* Actions Dropdown - Hidden when locked */}
+          {effectiveShouldShowMenu && (
+            <DropdownMenu open={isDropdownOpen} onOpenChange={onDropdownOpenChange || (() => {})}>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  className="flex h-10 w-10 items-center justify-center p-0 data-[state=open]:bg-muted sm:h-8 sm:w-8">
+                  <EllipsisVertical className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+
+              <DropdownMenuContent
+                align="end"
+                className="w-48 sm:w-[200px]"
+                onInteractOutside={(e) => {
+                  const target = e.target as HTMLElement;
+                  if (!target.closest('[role="dialog"]')) {
+                    
+                  }
+                }}>
+                <DropdownMenuLabel>
+                  {t("userIncoming.Actions")}
+                </DropdownMenuLabel>
+
+                {/* Assign */}
+                {effectiveIsAssignable && (
+                  <DropdownMenuItem
+                    onSelect={openAssignDialog}
+                    className="cursor-pointer hover:!text-[#17a397]">
+                    <Forward className="mr-2 h-4 w-4" />
+                    {t("userIncoming.Assign")}
+                  </DropdownMenuItem>
+                )}
+
+                {/* Accept */}
+                {effectiveIsAcceptable && (
+                  <DropdownMenuItem
+                    onSelect={openAcceptDialog}
+                    className="cursor-pointer hover:!text-[#17a397]">
+                    <SearchCheck className="mr-2 h-4 w-4" />
+                    {t("userIncoming.Accept")}
+                  </DropdownMenuItem>
+                )}
+
+                {/* Reply */}
+                {effectiveIsReplyable && (
+                  <DropdownMenuItem
+                    onSelect={handleReply}
+                    className="cursor-pointer hover:!text-[#17a397]">
+                    <Repeat2 className="mr-2 h-4 w-4" />
+                    {t("userIncoming.reply")}
+                  </DropdownMenuItem>
+                )}
+
+                {/* Reject */}
+                {effectiveIsRejectable && (
+                  <DropdownMenuItem
+                    onSelect={openRejectDialog}
+                    className="cursor-pointer hover:!text-[#ff8787]">
+                    <SquareX className="mr-2 h-4 w-4" />
+                    {t("userIncoming.Reject")}
+                  </DropdownMenuItem>
+                )}
+
+                {/* Remark */}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+
+          {/* Activity / Parent Container Trigger - ALLOWED even when locked */}
+          <Button
+            className="h-12 w-12 bg-transparent p-0 text-[#17a397] hover:bg-transparent hover:text-[#17a397] sm:h-10 sm:w-10"
+            onClick={(e) => {
+              e.preventDefault();
+              if (!rowData) return;
+              setSelectedRecord({
+                id: rowData.id,
+                recordTypeKey: rowData.recordTypeKey,
+                subject: rowData.content[0]?.subject ?? "",
+                createdAt: new Date().toISOString(),
+                referenceNumber: "N/A",
+              });
+              setIsPanelOpen(true);
+            }}>
+            <Activity />
+          </Button>
+          <IncomingInstanceDetail
+            instanceId={
+              (rowData?.incomingInstances?.[0]?.id as string) ||
+              (rowData?.id as string)
+            }
+            rowData={rowData}
+          />
+          {/* =========================
+            SIDE PANEL
+          ========================== */}
+          {isPanelOpen && (
+            <>
+              <div
+                className="fixed inset-0 z-40 bg-black/40 backdrop-blur-sm"
+                onClick={() => setIsPanelOpen(false)}
+              />
+              <div
+                className={`fixed right-0 top-0 z-50 flex h-full w-full transform flex-col border-l border-gray-200 bg-white shadow-2xl transition-transform duration-300 sm:w-[600px] lg:w-[720px] dark:border-gray-800 dark:bg-gray-900 ${
+                  isPanelOpen ? "translate-x-0" : "translate-x-full"
+                }`}>
+                <div className="flex items-center justify-between border-b border-gray-200 bg-gradient-to-r from-green-50 to-emerald-50/50 px-5 py-4 dark:border-gray-800">
+                  <div className="flex items-center gap-3">
+                    <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-green-100">
+                      <FileText className="h-5 w-5 text-green-600" />
+                    </div>
+                    <h2 className="text-lg font-semibold">
+                      {t("userIncoming.View Detail")}
+                    </h2>
+                  </div>
+                  <button
+                    className="flex h-8 w-8 items-center justify-center rounded-lg text-gray-500 hover:bg-red-50 hover:text-red-600"
+                    onClick={() => setIsPanelOpen(false)}>
+                    <X className="h-5 w-5" />
+                  </button>
+                </div>
+                <div className="flex-1 overflow-y-auto bg-gray-50/50 dark:bg-gray-900">
+                  {selectedRecord ? (
+                    <div className="p-4 sm:p-5">
+                      <ParentContainer
+                        recordId={selectedRecord.id}
+                        recordTitle=""
+                        recordType={selectedRecord.recordTypeKey}
+                        subject={selectedRecord.subject}
+                        createdDate={selectedRecord.createdAt}
+                        referenceNumber={selectedRecord.referenceNumber}
+                      />
+                    </div>
+                  ) : (
+                    <div className="flex h-full flex-col items-center justify-center text-gray-400">
+                      <FileText className="mb-3 h-12 w-12 opacity-40" />
+                      <p className="text-sm font-medium">No record selected.</p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      ) : (
+        /* =========================
+          INLINE ACTIONS
+        ========================== */
+        <div>
+          {isLocked ? (
+            /* NEW: Locked state for inline view */
+            <div className="flex items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 px-4 py-2.5 text-sm font-medium text-amber-700 dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-400">
+              <Lock className="h-4 w-4" />
+              {t("userIncoming.RecordLocked", "This record is locked")}
+            </div>
+          ) : effectiveHasInlineActions ? (
+            <div className="flex flex-wrap gap-5">
+              {/* Assign */}
+              {effectiveIsAssignable && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={openAssignDialog}
+                  className="h-9 rounded-full border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 px-4 shadow-sm transition-all duration-300 hover:border-blue-300 hover:from-blue-100 hover:to-indigo-100 dark:border-blue-800 dark:from-blue-950/50 dark:to-indigo-950/50 dark:hover:border-blue-700 dark:hover:from-blue-900/50 dark:hover:to-indigo-900/50 dark:text-blue-300">
+                  <Forward className="mr-2 h-4 w-4 text-blue-600" />
+                  {t("userIncoming.Assign")}
+                </Button>
+              )}
+
+              {/* Accept */}
+              {effectiveIsAcceptable && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={openAcceptDialog}
+                  className="h-9 rounded-full border-emerald-200 bg-gradient-to-r from-emerald-50 to-green-50 px-4 shadow-sm transition-all duration-300 hover:border-emerald-300 hover:from-emerald-100 hover:to-green-100 dark:border-emerald-800 dark:from-emerald-950/50 dark:to-green-950/50 dark:hover:border-emerald-700 dark:hover:from-emerald-900/50 dark:hover:to-green-900/50 dark:text-emerald-300">
+                  <SearchCheck className="mr-2 h-4 w-4 text-emerald-600" />
+                  {t("userIncoming.Accept")}
+                </Button>
+              )}
+
+              {/* Reply */}
+              {effectiveIsReplyable && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleReply}
+                  className="h-9 rounded-full border-amber-200 bg-gradient-to-r from-amber-50 to-orange-50 px-4 shadow-sm transition-all duration-300 hover:border-amber-300 hover:from-amber-100 hover:to-orange-100 dark:border-amber-800 dark:from-amber-950/50 dark:to-orange-950/50 dark:hover:border-amber-700 dark:hover:from-amber-900/50 dark:hover:to-orange-900/50 dark:text-amber-300">
+                  <Repeat2 className="mr-2 h-4 w-4 text-amber-600" />
+                  {t("userIncoming.reply")}
+                </Button>
+              )}
+
+              {/* Reject */}
+              {effectiveIsRejectable && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={openRejectDialog}
+                  className="h-9 rounded-full border-rose-200 bg-gradient-to-r from-rose-50 to-red-50 px-4 shadow-sm transition-all duration-300 hover:border-rose-300 hover:from-rose-100 hover:to-red-100 dark:border-rose-800 dark:from-rose-950/50 dark:to-red-950/50 dark:hover:border-rose-700 dark:hover:from-rose-900/50 dark:hover:to-red-900/50 dark:text-rose-300">
+                  <SquareX className="mr-2 h-4 w-4 text-rose-600" />
+                  {t("userIncoming.Reject")}
+                </Button>
+              )}
+
+              {/* Remark */}
+              <IncomingInstanceDetail
+                instanceId={
+                  (rowData?.incomingInstances?.[0]?.id as string) ||
+                  (rowData?.id as string)
+                }
+                rowData={rowData}
+                fromTable={false}
+              />
+            </div>
+          ) : (
+            <p className="italic text-sm text-gray-500 dark:text-gray-400">
+              {t("userIncoming.noActionsAvailable", {
+                defaultValue: "No actions available for this record.",
+              })}
+            </p>
+          )}
+        </div>
+      )}
+
+      {/* =========================
+        REMARK MODAL
+      ========================== */}
+
+      {/* =========================
+        ASSIGN MODAL
+      ========================== */}
+      {showAssignModal && !isLocked && (
+        <AssignRecordV2
+          record={rowData as IncomingLetterItem}
+          isTable={fromTable}
+          isOpen
+          onClose={() => {
+            setShowAssignModal(false);
+            refetchTable?.();
+            queryClient.invalidateQueries({
+              queryKey: ["incoming-instances"],
+            });
+            queryClient.invalidateQueries({
+              queryKey: ["dashbordReport"],
+            });
+          }}
+          onSuccess={() => {
+            toast.success(t("msg.successassign"));
+            setShowAssignModal(false);
+            refetchTable?.();
+            queryClient.invalidateQueries({ queryKey: ["incoming-instances"] });
+            queryClient.invalidateQueries({
+              queryKey: ["incoming-instances/v2"],
+            });
+            queryClient.invalidateQueries({
+              queryKey: ["dashbordReport"],
+            });
+          }}
+        />
+      )}
+
+      {/* =========================
+        ACCEPT MODAL
+      ========================== */}
+      {showAcceptDialog && !isLocked && (
+        <AcceptIncomingRecord
+          open={showAcceptDialog}
+          incomingInstanceId={rowData?.incomingInstances?.[0]?.id as string}
+          onClose={() => {
+            setShowAcceptDialog(false);
+            refetchTable?.();
+            queryClient.invalidateQueries({
+              queryKey: ["incoming-instances"],
+            });
+            queryClient.invalidateQueries({
+              queryKey: ["incoming-instances/v2"],
+            });
+            queryClient.invalidateQueries({
+              queryKey: ["dashbordReport"],
+            });
+          }}
+        />
+      )}
+
+      {/* =========================
+        REJECT MODAL
+      ========================== */}
+      {showRejectDialog && !isLocked && (
+        <RejectIncomingRecord
+          open={showRejectDialog}
+          incomingInstanceId={rowData?.incomingInstances?.[0]?.id as string}
+          onClose={() => {
+            setShowRejectDialog(false);
+            refetchTable?.();
+            queryClient.invalidateQueries({ queryKey: ["incoming-instances"] });
+            queryClient.invalidateQueries({
+              queryKey: ["incoming-instances/v2"],
+            });
+            queryClient.invalidateQueries({
+              queryKey: ["dashbordReport"],
+            });
+          }}
+          onSuccess={() => {
+            if (!fromTable) {
+              navigate(-1);
+            }
+          }}
+        />
+      )}
+    </>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/internalIncomingRecordsV2.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/internalIncomingRecordsV2.tsx
new file mode 100644
index 000000000..b7deb4247
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/internalIncomingRecords/internalIncomingRecordsV2.tsx
@@ -0,0 +1,491 @@
+import { useState, useEffect, useMemo, useCallback } from "react";
+import { DataTable } from "@/record-management/common/DataTable";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { useInternalIncomingRecords } from "@/record-management/components/hooks/useInternalIncomingRecords";
+import { Search } from "lucide-react";
+import Loader from "@/record-management/components/Loader/loader";
+import React from "react";
+import HeaderSection from "../headerSection";
+import { useTranslation } from "react-i18next";
+
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { useUserDetail } from "../../hooks/useUserDetail";
+import { MeDto } from "@/shared/dto/user/meDto";
+import { useSearchParams } from "react-router-dom";
+import secretaryList from "@/record-management/common/secretaryViewList";
+import DelegationView from "@/record-management/common/DelegationView";
+import EthiopianDatePickerModal, {
+  convertEthiopianToGregorian,
+} from "@/shared/common/form/fields/AmharicDatePicker";
+import i18n from "@/i18n";
+import { InternalIncomingRecordsColumnsV2 } from "./incomingInternalRecordsColumnsV2";
+import { IncomingLetterItem } from "@/record-management/dto/IncomingRecords/incomingTasksDto";
+import AssignRecordV2 from "./AssignRecordV2";
+import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+
+const InternalIncomingRecordsV2 = () => {
+  const localizedName = useLocalizedName();
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const { userDetails } = useAuthUser();
+  const { permissionKeys } = useUserDetail(userDetails as MeDto);
+  const lang = i18n.language;
+  const [showFromPicker, setShowFromPicker] = useState(false);
+  const [showToPicker, setShowToPicker] = useState(false);
+  // Filters & pagination
+  const [statusFilter, setStatusFilter] = useState<string>("");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [searchQuerySec, setSearchQuerySec] = useState("");
+  const [filterType, setFilterType] = useState<
+    "Department" | "Subject" | "Dispatched Date" | "Reference Number"
+  >("Department");
+  const [fromDispatchedDate, setFromDispatchedDate] = useState("");
+  const [toDispatchedDate, setToDispatchedDate] = useState("");
+  const [fromDispatchedDateDisplay, setFromDispatchedDateDisplay] =
+    useState("");
+  const [toDispatchedDateDisplay, setToDispatchedDateDisplay] = useState("");
+  const isSecretary = permissionKeys.includes("can:viewParentPositionRecord");
+  const [searchParamsUrl, setSearchParamsUrl] = useSearchParams();
+  const urlPage = Number(searchParamsUrl.get("page") || 1);
+  const initialView = searchParamsUrl.get("view") || "self";
+  const [pagination, setPagination] = useState({
+    pageIndex: urlPage - 1,
+    pageSize: 10,
+  });
+  const isDelegated = userDetails?.employee?.some((emp) =>
+    emp.positions.some((pos) => pos.hasDelegated),
+  );
+  const [secretaryView, setSecretaryView] = useState(isSecretary ? initialView : "self");
+  const [openDropdownId, setOpenDropdownId] = useState<string | null>(null);
+  const [assignRecord, setAssignRecord] = useState<IncomingLetterItem | null>(
+    null,
+  );
+
+  useEffect(() => {
+    if (!isSecretary && secretaryView === "parent") {
+      setSecretaryView("self");
+    }
+  }, [isSecretary, secretaryView]);
+
+  const isSelf = secretaryView === "self";
+  const syncViewParam = useCallback((params: URLSearchParams) => {
+    if (secretaryView === "parent") {
+      params.set("view", "parent");
+    } else {
+      params.delete("view");
+    }
+    return params;
+  }, [secretaryView]);
+  useEffect(() => {
+    setSearchParamsUrl(
+      (prev) => syncViewParam(new URLSearchParams(prev)),
+      { replace: true },
+    );
+  }, [secretaryView, setSearchParamsUrl, syncViewParam]);
+
+  // Snap back to page 1 whenever any filter changes
+  useEffect(() => {
+    setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+    setSearchParamsUrl(
+      (prev) => {
+        const params = new URLSearchParams(prev);
+        params.set("page", "1");
+        return syncViewParam(params);
+      },
+      { replace: true },
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    statusFilter,
+    searchQuery,
+    searchQuerySec,
+    filterType,
+    fromDispatchedDate,
+    toDispatchedDate,
+    syncViewParam,
+  ]);
+
+  // Honour external URL page changes (deep links, back/forward)
+  useEffect(() => {
+    setPagination((prev) =>
+      prev.pageIndex === urlPage - 1
+        ? prev
+        : { ...prev, pageIndex: urlPage - 1 },
+    );
+  }, [urlPage]);
+  // Map filterType + searchQuery to backend parameters
+  const searchParams: Record<string, string> = {};
+  if (isSelf ? searchQuery : searchQuerySec) {
+    switch (filterType) {
+      case "Department":
+        searchParams.sendingPosition = isSelf ? searchQuery : searchQuerySec;
+        break;
+      case "Subject":
+        searchParams.subject = isSelf ? searchQuery : searchQuerySec;
+        break;
+      case "Reference Number":
+        searchParams.referenceNumber = isSelf ? searchQuery : searchQuerySec;
+        break;
+    }
+  }
+
+  // Add dispatched date filter if set
+  if (fromDispatchedDate) searchParams.fromDispatchedDate = fromDispatchedDate;
+  if (toDispatchedDate) searchParams.toDispatchedDate = toDispatchedDate;
+
+  const {
+    isLoadingV2: isLoading,
+    isErrorV2: isError,
+    refetchV2,
+    internalRecords2,
+    InternalCount2,
+    internalParent,
+    internalParentCount,
+    refetchParent,
+    isErrorParent,
+    isLoadingParent,
+  } = useInternalIncomingRecords({
+    pageIndex: pagination.pageIndex * pagination.pageSize,
+    pageSize: pagination.pageSize,
+    status: statusFilter || undefined,
+    ...searchParams,
+    fetchParent: isSecretary,
+  });
+  let Error, loading;
+  if (isSelf) {
+    Error = isError;
+    loading = isLoading;
+  } else {
+    Error = isErrorParent;
+    loading = isLoadingParent;
+  }
+  const refetchCurrent = useCallback(() => {
+    if (isSelf) {
+      refetchV2();
+    } else {
+      refetchParent?.();
+    }
+  }, [isSelf, refetchV2, refetchParent]);
+
+  const handleAssignRecord = useCallback((record: IncomingLetterItem) => {
+    setAssignRecord(record);
+  }, []);
+
+  const statusOptions = [
+    { value: "", label: t("statusBar.All") },
+    { value: "draft", label: t("statusBar.In Progress") },
+    { value: "accepted", label: t("statusBar.Accepted") },
+    { value: "replied", label: t("statusBar.Replied") },
+    { value: "re_assigned", label: t("statusBar.Reassigned") },
+    { value: "rejected", label: t("statusBar.Rejected") },
+  ];
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    (isSelf ? setSearchQuery : setSearchQuerySec)(e.target.value);
+  };
+
+  useEffect(() => {
+    if (isSelf) refetchV2();
+    else {
+    }
+  }, [
+    pagination.pageIndex,
+    pagination.pageSize,
+    statusFilter,
+    searchQuery,
+    filterType,
+    fromDispatchedDate,
+    toDispatchedDate,
+    refetchV2,
+    isSelf,
+  ]);
+  const safeTotalCount = Math.max(
+    isSelf ? InternalCount2 || 0 : internalParentCount || 0,
+    1,
+  );
+  const totalPages = Math.ceil(safeTotalCount / pagination.pageSize);
+
+  React.useEffect(() => {
+    if (safeTotalCount === 1) return; // wait until data is loaded
+
+    let newPage = pagination.pageIndex + 1;
+
+    if (newPage > totalPages) {
+      newPage = 1;
+      setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+    }
+
+    setSearchParamsUrl((prev) => {
+      const params = new URLSearchParams(prev);
+      params.set("page", newPage.toString());
+      return syncViewParam(params);
+    });
+  }, [
+    totalPages,
+    safeTotalCount,
+    pagination.pageIndex,
+    setSearchParamsUrl,
+    syncViewParam,
+  ]);
+  const columns = useMemo(
+    () =>
+      InternalIncomingRecordsColumnsV2(
+        isSelf ? refetchV2 : refetchParent ? refetchParent : () => {},
+        localizedName,
+        isSecretary,
+        isSelf,
+        pagination?.pageIndex + 1,
+        openDropdownId,
+        setOpenDropdownId,
+        handleAssignRecord,
+      ),
+    [
+      refetchV2,
+      refetchParent,
+      localizedName,
+      isSecretary,
+      isSelf,
+      pagination,
+      openDropdownId,
+      setOpenDropdownId,
+      handleAssignRecord,
+    ],
+  );
+  return isDelegated ? (
+    <DelegationView />
+  ) : (
+    <div className="flex flex-col gap-2 bg-background text-foreground">
+      {/* Header + Filter */}
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 w-full mt-4">
+        <h4 className="text-xl font-medium mt-2 text-gray-900 dark:text-gray-100">
+          {t("userIncoming.Letters")}
+        </h4>
+
+        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2 w-full sm:w-auto">
+          {/* Filter Dropdown */}
+          <Select
+            value={filterType}
+            onValueChange={(value) => {
+              return setFilterType(
+                value === "referenceNumber"
+                  ? "Reference Number"
+                  : value === "dispatchedDate"
+                    ? "Dispatched Date"
+                    : (value as
+                        | "Department"
+                        | "Subject"
+                        | "Dispatched Date"
+                        | "Reference Number"),
+              );
+            }}
+          >
+            <SelectTrigger className="w-full sm:w-[200px]">
+              <SelectValue placeholder="Select filter type" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="Department">
+                {t("userIncoming.Department")}
+              </SelectItem>
+              <SelectItem value="Subject">
+                {t("userIncoming.Subject")}
+              </SelectItem>
+              <SelectItem value="Dispatched Date">
+                {t("userIncoming.Dispatched Date")}
+              </SelectItem>
+              <SelectItem value="Reference Number">
+                {t("userIncoming.Reference Number")}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+
+          {/* Search Input */}
+          {filterType !== "Dispatched Date" ? (
+            <div className="relative w-full sm:w-[200px]">
+              <div className="absolute left-2 top-1/2 transform -translate-y-1/2 pointer-events-none">
+                <Search className="h-4 w-4 text-gray-500" />
+              </div>
+              <Input
+                className="w-full pl-8 text-sm sm:text-base"
+                type="text"
+                placeholder={`${t(
+                  "userIncoming.Search",
+                )} ${filterType.toLowerCase()}`}
+                value={isSelf ? searchQuery : searchQuerySec}
+                onChange={handleSearchChange}
+              />
+            </div>
+          ) : (
+            <div className="flex flex-col sm:flex-row gap-2">
+              {lang.startsWith("en") ? (
+                <>
+                  <label className="mt-2">From: </label>
+                  <Input
+                    type="date"
+                    value={fromDispatchedDate}
+                    onChange={(e) => setFromDispatchedDate(e.target.value)}
+                    className="w-[150px]"
+                  />
+                  <label className="mt-2">To: </label>
+                  <Input
+                    type="date"
+                    value={toDispatchedDate}
+                    onChange={(e) => setToDispatchedDate(e.target.value)}
+                    min={fromDispatchedDate}
+                    className="w-[150px]"
+                  />
+                </>
+              ) : (
+                <div className="flex flex-wrap items-center gap-3">
+                  {/* From Date */}
+                  <div className="relative">
+                    <label className="font-medium mr-2">ከ:</label>
+                    <input
+                      type="text"
+                      value={fromDispatchedDateDisplay}
+                      readOnly
+                      onClick={() => setShowFromPicker((prev) => !prev)}
+                      className="border border-gray-300 dark:border-gray-700 rounded-md px-2 py-1.5 w-40 bg-white dark:bg-gray-800 cursor-pointer"
+                      placeholder="ቀን ይምረጡ"
+                    />
+                    {showFromPicker && (
+                      <div className="absolute z-50 mt-1 bg-white dark:bg-gray-800 shadow-lg rounded-md p-2">
+                        <EthiopianDatePickerModal
+                          value={fromDispatchedDate}
+                          onChange={(ethiopianDate: string) => {
+                            const gregorianDate =
+                              convertEthiopianToGregorian(ethiopianDate);
+                            const formatted = gregorianDate
+                              .toISOString()
+                              .split("T")[0]; // "YYYY-MM-DD"
+                            setFromDispatchedDate(formatted);
+                            setFromDispatchedDateDisplay(ethiopianDate);
+                            setShowFromPicker(false);
+                          }}
+                        />
+                      </div>
+                    )}
+                  </div>
+
+                  {/* To Date */}
+                  <div className="relative">
+                    <label className="font-medium mr-2">እስከ:</label>
+                    <input
+                      type="text"
+                      value={toDispatchedDateDisplay}
+                      readOnly
+                      onClick={() => setShowToPicker((prev) => !prev)}
+                      className="border border-gray-300 dark:border-gray-700 rounded-md px-2 py-1.5 w-40 bg-white dark:bg-gray-800 cursor-pointer"
+                      placeholder="ቀን ይምረጡ"
+                    />
+                    {showToPicker && (
+                      <div className="absolute z-50 mt-1 bg-white dark:bg-gray-800 shadow-lg rounded-md p-2">
+                        <EthiopianDatePickerModal
+                          value={toDispatchedDate}
+                          onChange={(ethiopianDate: string) => {
+                            const gregorianDate =
+                              convertEthiopianToGregorian(ethiopianDate);
+                            const formatted = gregorianDate
+                              .toISOString()
+                              .split("T")[0]; // "YYYY-MM-DD"
+                            setToDispatchedDate(formatted);
+                            setToDispatchedDateDisplay(ethiopianDate);
+                            setShowFromPicker(false);
+                          }}
+                        />
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Navigation Buttons */}
+      <HeaderSection />
+      {/* secretary options */}
+      {secretaryList(isSecretary, secretaryView, setSecretaryView, "SEC")}
+      {/* Status Buttons */}
+      <div className="flex flex-wrap gap-2">
+        {statusOptions.map((option) => (
+          <Button
+            key={option.value}
+            variant={statusFilter === option.value ? "linkActive" : "link"}
+            onClick={() => setStatusFilter(option.value)}
+            className="rounded-md text-sm sm:text-base"
+          >
+            {option.label}
+          </Button>
+        ))}
+      </div>
+
+      {/* Records Table */}
+      {loading && (
+        <div className="w-full h-full">
+          <Loader />
+        </div>
+      )}
+      {Error && isDelegated && (
+        <p className="text-red-600 dark:text-red-400">
+          {t("userIncoming.errDelegation")}
+        </p>
+      )}
+      {Error && !isDelegated && (
+        <p className="text-red-600 dark:text-red-400">
+          {t("userIncoming.Error loading records.")}
+        </p>
+      )}
+      {!loading && !Error && (
+        <>
+          <DataTable
+            tableName="Internal Incoming Records V2"
+            columns={columns}
+            data={isSelf ? internalRecords2 : internalParent ?? []}
+            totalCount={isSelf ? InternalCount2 : internalParentCount ?? 0}
+            pagination={pagination}
+            setPagination={setPagination}
+            toolBarPosition="right"
+            refresh={isSelf ? refetchV2 : refetchParent}
+          />
+
+          {assignRecord && !assignRecord.isLocked && (
+            <AssignRecordV2
+              record={assignRecord}
+              isTable={true}
+              isOpen
+              onClose={() => {
+                setAssignRecord(null);
+              }}
+              onSuccess={() => {
+                toast.success(t("msg.successassign"));
+                setAssignRecord(null);
+                refetchCurrent();
+                queryClient.invalidateQueries({
+                  queryKey: ["incoming-instances"],
+                });
+                queryClient.invalidateQueries({
+                  queryKey: ["incoming-instances/v2"],
+                });
+                queryClient.invalidateQueries({
+                  queryKey: ["dashbordReport"],
+                });
+              }}
+            />
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default InternalIncomingRecordsV2;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/remarkCreationCard.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/remarkCreationCard.tsx
new file mode 100644
index 000000000..d766f9a48
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/remarkCreationCard.tsx
@@ -0,0 +1,419 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Loader2, MessageSquare, GitBranch, Eye, Plus } from "lucide-react";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@/shared/common/ui/button";
+import { Textarea } from "@/shared/common/ui/textarea";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/shared/common/ui/tabs";
+
+import { useAssignTasks } from "../hooks/useAssignTasks";
+import { useChildIncomingInstances } from "../hooks/useIncomingInstances";
+
+import RemarkList from "@/record-management/common/RemarkList";
+import { useQueryClient } from "@tanstack/react-query";
+import { useChildOutgoingInstances } from "../hooks/useChildOutgoingInstances";
+
+export interface AssignmentHistoryDto {
+  createdAt: string;
+  id: string;
+  amharicCreatedAt: string;
+  repliedAt: string | null;
+  parentAssignmentId: string;
+  assignerId: string;
+  assigneeId: string;
+  assigneePositionId: string;
+  assigneePosition: {
+    id: string;
+    name: {
+      am: string;
+      en: string;
+    };
+  };
+  assignee: {
+    id: string;
+    employee: {
+      name: {
+        am: string;
+        en: string;
+      };
+    };
+  };
+  assigner: {
+    id: string;
+    employee: {
+      id: string;
+      name: {
+        am: string;
+        en: string;
+      };
+    };
+    delegator: {
+      id: string;
+      name?: {
+        am?: string;
+        en?: string;
+      };
+    } | null;
+    position: {
+      id: string;
+      name: {
+        am: string;
+        en: string;
+      };
+    };
+  };
+}
+
+export type InstanceType = "incoming" | "outgoing";
+
+interface RemarkCreationDialogProps {
+  open: boolean;
+  onClose: () => void;
+  incomingInstanceId: string;
+  instanceType?: InstanceType;
+  onSuccess?: () => void;
+  rowData?: any;
+}
+
+const RemarkCreationDialog: React.FC<RemarkCreationDialogProps> = ({
+  open,
+  onClose,
+  incomingInstanceId,
+  instanceType = "incoming",
+  onSuccess,
+  rowData,
+}) => {
+  const { t, i18n } = useTranslation();
+  const queryClient = useQueryClient();
+  const [comment, setComment] = useState("");
+  const [selectedPositionId, setSelectedPositionId] =
+    useState(incomingInstanceId);
+  const [activeTab, setActiveTab] = useState<"view" | "create">("view");
+
+  const { addRemarkAsync, isAddingRemark } = useAssignTasks();
+
+  const { data: incomingChildInstances, isLoading: isLoadingIncoming } =
+    useChildIncomingInstances(incomingInstanceId, {
+      enabled: open && !!incomingInstanceId && instanceType === "incoming",
+    });
+
+  const { data: outgoingChildInstances, isLoading: isLoadingOutgoing } =
+    useChildOutgoingInstances(incomingInstanceId, {
+      enabled: open && !!incomingInstanceId && instanceType === "outgoing",
+    });
+
+  const isLoadingInstances =
+    instanceType === "incoming" ? isLoadingIncoming : isLoadingOutgoing;
+  const childInstances = useMemo<AssignmentHistoryDto[]>(
+    () =>
+      instanceType === "incoming"
+        ? (incomingChildInstances ?? [])
+        : (outgoingChildInstances ?? []),
+    [instanceType, incomingChildInstances, outgoingChildInstances],
+  );
+
+  // Build dropdown options:
+  //   - Parent instances grouped by assigner.id (one entry per unique boss)
+  //   - Child instances grouped by assigneePositionId (one entry per unique position)
+  const instanceOptions = useMemo(() => {
+    const options: Array<{
+      value: string;
+      label: string;
+      instanceIds: string[];
+      isParent?: boolean;
+    }> = [];
+
+    // Parent instances — grouped by assigner so all instances from the same boss collapse
+    const assignerGrouped = new Map<
+      string,
+      { label: string; instanceIds: string[] }
+    >();
+    const parentInstances: Array<{
+      id: string;
+      assigner?: {
+        id?: string;
+        employee?: { name?: { am?: string; en?: string } };
+      };
+    }> = rowData?.incomingInstances ?? [];
+    parentInstances.forEach((instance) => {
+      const assignerId = instance.assigner?.id;
+      if (!assignerId) return;
+      const label =
+        i18n.language === "am"
+          ? instance.assigner?.employee?.name?.am
+          : instance.assigner?.employee?.name?.en;
+
+      if (assignerGrouped.has(assignerId)) {
+        assignerGrouped.get(assignerId)!.instanceIds.push(instance.id);
+      } else {
+        assignerGrouped.set(assignerId, {
+          label: label || assignerId,
+          instanceIds: [instance.id],
+        });
+      }
+    });
+    assignerGrouped.forEach(({ label, instanceIds }, assignerId) => {
+      options.push({ value: assignerId, label, instanceIds, isParent: true });
+    });
+
+    // Child instances — grouped by assigneePositionId; value = assigneePositionId
+    const grouped = new Map<string, { label: string; instanceIds: string[] }>();
+    childInstances.forEach((instance) => {
+      const posId = instance.assigneePositionId;
+      const label =
+        i18n.language === "am"
+          ? instance.assignee?.employee?.name?.am ||
+            instance.assigneePosition?.name?.am
+          : instance.assignee?.employee?.name?.en ||
+            instance.assigneePosition?.name?.en;
+
+      if (grouped.has(posId)) {
+        grouped.get(posId)!.instanceIds.push(instance.id);
+      } else {
+        grouped.set(posId, {
+          label: label || posId,
+          instanceIds: [instance.id],
+        });
+      }
+    });
+    grouped.forEach(({ label, instanceIds }, posId) => {
+      options.push({ value: posId, label, instanceIds });
+    });
+
+    return options;
+  }, [childInstances, rowData, i18n.language]);
+
+  // All instance IDs for the selected group — passed to RemarkList for merged viewing.
+  // Also handles the case where selectedPositionId is a raw instance ID (not a group key)
+  // by searching which group contains it.
+  const selectedInstanceIds = useMemo(() => {
+    const exact = instanceOptions.find((o) => o.value === selectedPositionId);
+    if (exact) return exact.instanceIds;
+
+    const containing = instanceOptions.find((o) =>
+      o.instanceIds.includes(selectedPositionId),
+    );
+    return containing?.instanceIds ?? [incomingInstanceId];
+  }, [selectedPositionId, instanceOptions, incomingInstanceId]);
+
+  // Tracks whether we've already initialized selectedPositionId for the current
+  // open session. Prevents child-instance async load from resetting user selection.
+  const initializedRef = useRef(false);
+
+  useEffect(() => {
+    if (!open) {
+      initializedRef.current = false;
+      return;
+    }
+    if (initializedRef.current) return;
+
+    const matchingOption = instanceOptions.find((o) =>
+      o.instanceIds.includes(incomingInstanceId),
+    );
+    initializedRef.current = true;
+    setSelectedPositionId(matchingOption?.value ?? incomingInstanceId);
+    setActiveTab("view");
+    setComment("");
+  }, [open, incomingInstanceId, instanceOptions]);
+
+  const handleSubmit = async () => {
+    const trimmedComment = comment.trim();
+
+    if (!trimmedComment) {
+      toast.error(t("remark.commentRequired", "Comment cannot be empty."));
+      return;
+    }
+
+    if (!selectedPositionId) {
+      toast.error(t("remark.instanceRequired", "Please select an instance."));
+      return;
+    }
+
+    const selectedOption = instanceOptions.find(
+      (o) => o.value === selectedPositionId,
+    );
+    const targetIds = selectedOption?.instanceIds ?? [selectedPositionId];
+
+    try {
+      await Promise.all(
+        targetIds.map((id) =>
+          addRemarkAsync({ incomingInstanceId: id, comment: trimmedComment }),
+        ),
+      );
+
+      targetIds.forEach((id) =>
+        queryClient.invalidateQueries({ queryKey: ["incoming-remarks", id] }),
+      );
+      toast.success(t("remark.success", "Remark submitted successfully."));
+      setComment("");
+      setActiveTab("view");
+      onSuccess?.();
+    } catch {
+      return;
+    }
+  };
+
+  const handleClose = () => {
+    setComment("");
+    setSelectedPositionId(incomingInstanceId);
+    setActiveTab("view");
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(nextOpen) => !nextOpen && handleClose()}>
+      <DialogContent className="sm:max-w-2xl h-[98dvh] max-h-[98dvh] flex flex-col p-4 sm:p-6 gap-4 sm:gap-6 overflow-hidden">
+        <DialogHeader className="flex-shrink-0 text-left">
+          <DialogTitle className="flex items-center gap-2">
+            <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-primary/10 text-primary">
+              <MessageSquare className="h-4 w-4" />
+            </div>
+            {t("remark.title", "Remarks & Feedback")}
+          </DialogTitle>
+          <DialogDescription>
+            {t(
+              "remark.description",
+              "View and add remarks for workflow instances",
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 flex-1 flex flex-col min-h-0 overflow-hidden">
+          {/* Instance Selection */}
+          <div className="space-y-1.5 flex-shrink-0">
+            <label className="text-sm font-medium">
+              {t("remark.selectInstance", "Select Instance")}
+            </label>
+
+            <Select
+              value={selectedPositionId}
+              onValueChange={setSelectedPositionId}
+              disabled={isAddingRemark || isLoadingInstances}>
+              <SelectTrigger className="w-full">
+                <SelectValue
+                  placeholder={t(
+                    "remark.selectInstancePlaceholder",
+                    "Select an instance",
+                  )}
+                />
+              </SelectTrigger>
+
+              <SelectContent>
+                {instanceOptions.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    <div className="flex items-center gap-2">
+                      <GitBranch className="h-4 w-4 text-muted-foreground" />
+                      <span>{option.label}</span>
+                      {option.isParent && (
+                        <span className="ml-2 text-xs text-muted-foreground">
+                          ({t("remark.current", "current")})
+                        </span>
+                      )}
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Tabs for View/Create Remarks */}
+          <Tabs
+            value={activeTab}
+            onValueChange={(value) => setActiveTab(value as "view" | "create")}
+            className="flex-1 flex flex-col min-h-0 overflow-hidden"
+          >
+            <TabsList className="grid w-full grid-cols-2 flex-shrink-0">
+              <TabsTrigger value="view" className="flex items-center gap-2">
+                <Eye className="h-4 w-4" />
+                {t("remark.viewRemarks", "View Remarks")}
+              </TabsTrigger>
+              <TabsTrigger value="create" className="flex items-center gap-2">
+                <Plus className="h-4 w-4" />
+                {t("remark.createRemark", "Create Remark")}
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent
+              value="view"
+              className="mt-2 sm:mt-4 flex-1 flex flex-col min-h-0 overflow-hidden outline-none"
+            >
+              <div className="flex-1 pr-1 overflow-y-auto min-h-0">
+                <RemarkList
+                  instanceIds={selectedInstanceIds}
+                  showFromText={false}
+                />
+              </div>
+            </TabsContent>
+
+            <TabsContent
+              value="create"
+              className="mt-2 sm:mt-4 flex-1 flex flex-col min-h-0 overflow-hidden outline-none space-y-4"
+            >
+              <div className="space-y-2 flex-1 flex flex-col min-h-0">
+                <label className="text-sm font-medium">
+                  {t("remark.remark", "Remark")}
+                </label>
+
+                <Textarea
+                  value={comment}
+                  onChange={(e) => setComment(e.target.value)}
+                  placeholder={t("remark.placeholder", "Write your remark...")}
+                  disabled={isAddingRemark}
+                  className="flex-1 min-h-0 resize-none p-3 text-sm"
+                />
+              </div>
+            </TabsContent>
+          </Tabs>
+        </div>
+
+        <DialogFooter className="flex-shrink-0 mt-2 pt-3 border-t sm:mt-4 sm:pt-4">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={handleClose}
+            disabled={isAddingRemark}>
+            {t("common.cancel", "Cancel")}
+          </Button>
+
+          {activeTab === "create" && (
+            <Button
+              type="button"
+              onClick={handleSubmit}
+              disabled={isAddingRemark}
+              className="min-w-32">
+              {isAddingRemark && (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              )}
+              {t("remark.submit", "Submit Remark")}
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default RemarkCreationDialog;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/userIncomingLayout.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/userIncomingLayout.tsx
new file mode 100644
index 000000000..3618f6eed
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/userIncomingLayout.tsx
@@ -0,0 +1,11 @@
+// import { Label } from "@/shared/common/ui/label";
+import { Outlet } from "react-router-dom";
+
+const UserIncomingRecordsLayout = () => (
+  <>
+    {/* <Label className="mb-4  text-xl"></Label> */}
+    <Outlet />
+  </>
+);
+
+export default UserIncomingRecordsLayout;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/viewIncoming/cc.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/viewIncoming/cc.tsx
new file mode 100644
index 000000000..d9d22be79
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/viewIncoming/cc.tsx
@@ -0,0 +1,20 @@
+import { useSearchParams, useLocation } from "react-router-dom";
+import LetterViewer from "../../common/letterViewer";
+
+const CCViewer = () => {
+  const [searchParams] = useSearchParams();
+  const location = useLocation();
+  const view = searchParams.get("view") || ""; // default to 'self'
+  const pageIndex = searchParams.get("page") || 1;
+  const stateBackurl = location.state?.backurl;
+  const backurl = stateBackurl
+    ? stateBackurl
+    : view === "parent"
+    ? `/record-management/userIncoming/cc/?page=${pageIndex}&view=parent`
+    : `/record-management/userIncoming/cc/?page=${pageIndex}`;
+  return (
+    <LetterViewer backurl={backurl} type="cc" shouldFetchInstance={false} actions="CCIncomingRecordActions" />
+  );
+};
+
+export default CCViewer;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/viewIncoming/forYourReference.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/viewIncoming/forYourReference.tsx
new file mode 100644
index 000000000..66fa2585c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/viewIncoming/forYourReference.tsx
@@ -0,0 +1,27 @@
+import { useSearchParams, useLocation } from "react-router-dom";
+import LetterViewer from "../../common/letterViewer";
+
+const ForYourReferenceViewer = () => {
+  const [searchParams] = useSearchParams();
+  const location = useLocation();
+  const view = searchParams.get("view") || "";
+  const pageIndex = searchParams.get("page") || 1;
+  const stateBackurl = location.state?.backurl;
+
+  const backurl = stateBackurl
+    ? stateBackurl
+    : view === "parent"
+      ? `/record-management/userIncoming/for-your-reference?page=${pageIndex}&view=parent`
+      : `/record-management/userIncoming/for-your-reference?page=${pageIndex}`;
+
+  return (
+    <LetterViewer
+      backurl={backurl}
+      type="cc"
+      shouldFetchInstance={false}
+      actions="CCIncomingRecordActions"
+    />
+  );
+};
+
+export default ForYourReferenceViewer;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/viewIncoming/incoming.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/viewIncoming/incoming.tsx
new file mode 100644
index 000000000..6a1bc0d20
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/viewIncoming/incoming.tsx
@@ -0,0 +1,24 @@
+import { useNavigate, useSearchParams, useLocation } from "react-router-dom";
+import LetterViewer from "../../common/letterViewer";
+const IncomingViewer = () => {
+  const [searchParams] = useSearchParams();
+  const location = useLocation();
+  const view = searchParams.get("view") || ""; // default to 'self'
+  const pageIndex = searchParams.get("page") || 1;
+  const stateBackurl = location.state?.backurl;
+  const backurl = stateBackurl
+    ? stateBackurl
+    : view === "parent"
+    ? `/record-management/userIncoming?page=${pageIndex}&view=parent`
+    : `/record-management/userIncoming?page=${pageIndex}`;
+  return (
+    <LetterViewer
+      backurl={backurl}
+      type="externalincoming"
+      shouldFetchInstance={true}
+      actions="ExternalIncomingRecordActions"
+    />
+  )
+};
+
+export default IncomingViewer;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/viewIncoming/internal.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/viewIncoming/internal.tsx
new file mode 100644
index 000000000..31a1134cd
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userIncoming/viewIncoming/internal.tsx
@@ -0,0 +1,25 @@
+import { useSearchParams, useLocation } from "react-router-dom";
+import LetterViewer from "../../common/letterViewer";
+
+const InternalViewer = () => {
+  const [searchParams] = useSearchParams();
+  const location = useLocation();
+  const view = searchParams.get("view") || "";
+  const pageIndex = searchParams.get("page") || 1; // default to 'self'
+  const stateBackurl = location.state?.backurl;
+  const backurl = stateBackurl
+    ? stateBackurl
+    : view === "parent"
+    ? `/record-management/userIncoming/internal?page=${pageIndex}&view=parent`
+    : `/record-management/userIncoming/internal?page=${pageIndex}`;
+  return (
+    <LetterViewer
+      backurl={backurl}
+      type="internal"
+      shouldFetchInstance={true}
+      actions="InternalIncomingRecordActions"
+    />
+  );
+};
+
+export default InternalViewer;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/TeamRecordCollaborationDetailsDialog.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/TeamRecordCollaborationDetailsDialog.tsx
new file mode 100644
index 000000000..20bf213f6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/TeamRecordCollaborationDetailsDialog.tsx
@@ -0,0 +1,268 @@
+import React, { useMemo } from "react";
+import { AlertCircle, Clock3, MessageSquareText, Users } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { useCollaborationByRecordId } from "../hooks/useMyCollaborations";
+import { renderStatus } from "@/record-management/utils/renderDetails";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { ScrollArea } from "@/shared/common/ui/scroll-area";
+import { Separator } from "@/shared/common/ui/separator";
+
+interface TeamRecordCollaborationDetailsDialogProps {
+  open: boolean;
+  onClose: () => void;
+  recordId: string;
+}
+
+const TeamRecordCollaborationDetailsDialog: React.FC<
+  TeamRecordCollaborationDetailsDialogProps
+> = ({ open, onClose, recordId }) => {
+  const { t, i18n } = useTranslation();
+  const localizedName = useLocalizedName();
+  const { data, isLoading, error } = useCollaborationByRecordId(recordId, {
+    enabled: open && !!recordId,
+  });
+
+  const items = data?.items ?? [];
+  const signedCount = useMemo(
+    () => items.filter((item) => item.signStatus === "signed").length,
+    [items],
+  );
+  const pendingCount = useMemo(
+    () =>
+      items.filter((item) => !item.signStatus || item.signStatus === "draft")
+        .length,
+    [items],
+  );
+  const rejectedCount = useMemo(
+    () => items.filter((item) => item.signStatus === "rejected").length,
+    [items],
+  );
+  const adjustmentCount = useMemo(
+    () =>
+      items.filter((item) => item.signStatus === "adjustment_requested").length,
+    [items],
+  );
+  const commentCount = useMemo(
+    () => items.filter((item) => Boolean(item.comment?.trim())).length,
+    [items],
+  );
+  const reviewedCount = useMemo(
+    () =>
+      items.filter(
+        (item) =>
+          item.signStatus === "signed" ||
+          item.signStatus === "rejected" ||
+          item.signStatus === "team_rejected" ||
+          item.signStatus === "adjustment_requested" ||
+          Boolean(item.comment?.trim()),
+      ).length,
+    [items],
+  );
+
+  const formatActionDate = (
+    signedAt?: string | null,
+    amharicSignedAt?: string | null,
+  ) => {
+    if (i18n.language.startsWith("am") && amharicSignedAt) {
+      return amharicSignedAt;
+    }
+
+    if (!signedAt) {
+      return t("common.notAvailable", "Not Available");
+    }
+
+    const date = new Date(signedAt);
+    if (Number.isNaN(date.getTime())) {
+      return signedAt;
+    }
+
+    return date.toLocaleString();
+  };
+
+  const getLocalizedLabel = (name?: { am?: string; en?: string }) =>
+    name
+      ? localizedName({
+          am: name.am ?? "",
+          en: name.en ?? "",
+        })
+      : "";
+
+  const getCollaboratorName = (item: (typeof items)[number]) =>
+    getLocalizedLabel(item.employeePosition?.employee?.name) ||
+    item.employeePosition?.employee?.id ||
+    item.userId ||
+    t("common.unknownUser", "Unknown user");
+
+  const getPositionName = (item: (typeof items)[number]) =>
+    getLocalizedLabel(item.employeePosition?.position?.name) ||
+    item.employeePositionId ||
+    t("common.notAvailable", "Not Available");
+
+  return (
+    <Dialog open={open} onOpenChange={(nextOpen) => !nextOpen && onClose()}>
+      <DialogContent className="sm:max-w-4xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>
+            {t("header.navigation.collaboration")} {t("userRecord.View Detail")}
+          </DialogTitle>
+          <DialogDescription>
+            {t(
+              "collaboration.detailsDescription",
+              "Review each collaborator, their current action status, and any comment they left on this record.",
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-5">
+          <div className="rounded-lg border bg-slate-50 p-4">
+            <div className="flex items-center gap-3">
+              <Users className="h-4 w-4 text-slate-600" />
+              <div>
+                <p className="text-xs font-medium uppercase tracking-wide text-slate-500">
+                  {t("viewDetail.collaborators", "Collaborators")}
+                </p>
+                <p className="text-2xl font-semibold text-slate-900">
+                  {items.length}
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="rounded-lg border bg-primary-50 p-4">
+            <div className="flex items-center gap-3">
+              <div className="h-3 w-3 rounded-full bg-primary-500" />
+              <div>
+                <p className="text-xs font-medium uppercase tracking-wide text-slate-500">
+                  {t("statusBar.signed", "Signed")}
+                </p>
+                <p className="text-2xl font-semibold text-slate-900">
+                  {signedCount}
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="rounded-lg border bg-amber-50 p-4">
+            <div className="flex items-center gap-3">
+              <Clock3 className="h-4 w-4 text-amber-700" />
+              <div>
+                <p className="text-xs font-medium uppercase tracking-wide text-slate-500">
+                  {t("statusBar.InProgress", "Pending")}
+                </p>
+                <p className="text-2xl font-semibold text-slate-900">
+                  {pendingCount}
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="rounded-lg border bg-rose-50 p-4">
+            <div className="flex items-center gap-3">
+              <AlertCircle className="h-4 w-4 text-rose-700" />
+              <div>
+                <p className="text-xs font-medium uppercase tracking-wide text-slate-500">
+                  {t("statusBar.Rejected", "Rejected")}
+                </p>
+                <p className="text-2xl font-semibold text-slate-900">
+                  {rejectedCount}
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="rounded-lg border bg-amber-50 p-4">
+            <div className="flex items-center gap-3">
+              <Clock3 className="h-4 w-4 text-amber-700" />
+              <div>
+                <p className="text-xs font-medium uppercase tracking-wide text-slate-500">
+                  {t("statusBar.AdjustmentRequested", "Adjustment Requested")}
+                </p>
+                <p className="text-2xl font-semibold text-slate-900">
+                  {adjustmentCount}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {isLoading ? (
+          <div className="flex min-h-56 items-center justify-center rounded-lg border border-dashed text-sm text-slate-500">
+            {t("common.loading", "Loading")}
+          </div>
+        ) : error ? (
+          <div className="flex min-h-56 flex-col items-center justify-center gap-3 rounded-lg border border-red-200 bg-red-50 px-6 text-center">
+            <AlertCircle className="h-6 w-6 text-red-600" />
+            <p className="text-sm text-red-700">
+              {error instanceof Error
+                ? error.message
+                : t("msg.error", "Failed to load collaborations")}
+            </p>
+          </div>
+        ) : items.length === 0 ? (
+          <div className="flex min-h-56 flex-col items-center justify-center gap-3 rounded-lg border border-dashed text-center">
+            <Users className="h-6 w-6 text-slate-400" />
+            <p className="text-sm text-slate-500">{t("msg.noMsg")}</p>
+          </div>
+        ) : (
+          <ScrollArea className="max-h-[65vh] rounded-lg border">
+            <div className="divide-y">
+              {items.map((item) => (
+                <div key={item.id} className="space-y-4 p-4">
+                  <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+                    <div className="space-y-1">
+                      <div className="font-medium text-slate-900">
+                        {getCollaboratorName(item)}
+                      </div>
+                      {/* <div className="text-sm text-slate-500">
+                        {getPositionName(item)}
+                      </div> */}
+                    </div>
+                    <div>{renderStatus(item.signStatus, item.signStatus)}</div>
+                  </div>
+
+                  <Separator />
+
+                  <div className="space-y-2">
+                    <div className="flex items-center gap-2 text-sm font-medium text-slate-700">
+                      <MessageSquareText className="h-4 w-4" />
+                      {t("collaboration.comments", "Comments")}
+                    </div>
+                    <div className="rounded-md border bg-white p-3 text-sm text-slate-700">
+                      {item.comment?.trim() ||
+                        t("userRecord.noComment", "No Comment")}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </ScrollArea>
+        )}
+
+        {items.length > 0 && (
+          <div className="text-xs text-slate-500">
+            {t(
+              "collaboration.reviewedCount",
+              "{{count}} collaborator(s) reviewed",
+              {
+                count: reviewedCount,
+              },
+            )}
+          </div>
+        )}
+        {items.length > 0 && (
+          <div className="text-xs text-slate-500">
+            {t("collaboration.commentsCount", "{{count}} comment(s)", {
+              count: commentCount,
+            })}
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default TeamRecordCollaborationDetailsDialog;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/addUserRecord/addUserRecord.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/addUserRecord/addUserRecord.tsx
new file mode 100644
index 000000000..baf5440a8
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/addUserRecord/addUserRecord.tsx
@@ -0,0 +1,378 @@
+"use client";
+import { useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import RecordForm, { type RecordFormIntent } from "../common/recordForm";
+
+const serializeReceiverGroup = (group: any) => ({
+  prefix: group.prefix ?? "",
+  suffix: group.suffix ?? "",
+  receivers:
+    group.receivers?.map((receiver: any) => ({
+      ...receiver,
+      name:
+        receiver.type === "non_smart"
+          ? typeof receiver.name === "string"
+            ? receiver.name
+            : receiver.name?.en || receiver.name?.am || ""
+          : receiver.name,
+    })) ?? [],
+});
+import { useUserRecords } from "@/record-management/components/hooks/useUserRecords";
+import { recordFileService } from "@/record-management/services/api/recordFileService";
+import {
+  AttachmentInfo,
+  RecordPayload,
+} from "@/record-management/dto/userRecords/userRecordsDto";
+import {
+  CreateOrEditLetter,
+  defaultCreateLetterValues,
+} from "../common/formSchema";
+import { useTranslation } from "react-i18next";
+import useSettings from "../../hooks/useSettings";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import {
+  STORAGE_UPLOAD_ERROR_CODE,
+  STORAGE_UPLOAD_TOO_LARGE,
+  recordFileServiceV2,
+  UploadKeyResponse,
+  uploadMultiple,
+  uploadSingle,
+} from "@/record-management/services/api/newFileService";
+import {
+  createAndSubmitRecord,
+  createSubmitAndSendToRoRecord,
+  createAndSubmitDirectRecord,
+} from "@/record-management/services/api/userRecordService";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import ApproveRecordModal from "../approveRecord";
+import DelegationView from "@/record-management/common/DelegationView";
+import { useSignatureListWithPresigned } from "../../hooks/useSignatureAndTeeterWithPresigned";
+import { useUnitConfiguration } from "@/shared/hooks/useUnitConfiguration";
+
+export const AddUserRecords = ({ id }: { id?: string }) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const queryClient = useQueryClient();
+  const { addRecord } = useUserRecords();
+
+  const invalidateRecordLists = () => {
+    queryClient.invalidateQueries({ queryKey: ["userRecords"] });
+    queryClient.invalidateQueries({ queryKey: ["userRecords-parent"] });
+    queryClient.invalidateQueries({ queryKey: ["approvalRecord"] });
+  };
+  const { t } = useTranslation();
+  const [attachments, setAttachments] = useState<File[]>([]);
+  const [dmsAttachments, setDmsAttachments] = useState<any[]>([]);
+  const { handleError } = useErrorHandler(t);
+  const { allModifiedOrgs, allDepartmentUnits, currentEmployeesResponse } =
+    useSettings();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [approveTarget, setApproveTarget] = useState<{
+    payload: RecordPayload;
+    unitId: string;
+    recordTypeKey: string;
+  } | null>(null);
+  const { userDetails } = useAuthUser();
+  const unitId = userDetails?.employee?.[0]?.unitId || "";
+  const { data: signatureData } = useSignatureListWithPresigned(
+    userDetails?.id || "",
+  );
+  const { data: unitConfigData } = useUnitConfiguration(unitId, {
+    enabled: !!unitId,
+  });
+  const isDelegated = userDetails?.employee?.some((emp) =>
+    emp.positions.some((pos) => pos.hasDelegated),
+  );
+
+  const handleFormSubmit = async (
+    values: CreateOrEditLetter,
+    intent: RecordFormIntent = "draft",
+  ): Promise<void> => {
+    setIsSubmitting(true);
+    try {
+      const receiversList = values.ReceiversList ?? [];
+      const ccList = values.ccList ?? [];
+      const forYourReferenceList = values.forYourReferenceList ?? [];
+      const receivingPositionIds = values.toPositions || [];
+      const receivingEmployeeIds = values.toEmployees || [];
+      const receivingUnitIds = values.receivingUnitIds?.map((u) => u.id) || [];
+
+      // Walk values.internalCC in user-selection order rather than filtering
+      // allDepartmentUnits (which would re-order by directory position), so
+      // the cc[] payload preserves the order the user added departments in.
+      const internalCCValues =
+        (values.internalCC ?? [])
+          .map((id) => allDepartmentUnits?.find((u) => u.id === id))
+          .filter((u): u is NonNullable<typeof u> => u != null) ?? [];
+
+      const externalCCValues = values.externalCC ?? [];
+
+      // Same selection-order fix as internalCCValues: walk the form arrays so
+      // cc employees and for-your-reference entries appear in the order the
+      // user added them rather than the underlying directory's order.
+      const ccEmployee =
+        (values.ccEmployees ?? [])
+          .map((employeePositionId) =>
+            currentEmployeesResponse?.items?.find(
+              (e) => e.employeePositions?.[0]?.id === employeePositionId,
+            ),
+          )
+          .filter((e): e is NonNullable<typeof e> => e != null) ?? [];
+
+      const forYourReferenceValues =
+        (values.forYourReference ?? [])
+          .map((id) => allDepartmentUnits?.find((u) => u.id === id))
+          .filter((u): u is NonNullable<typeof u> => u != null) ?? [];
+
+      // =========================
+      // 1. UPLOAD FILES (non-mutation: handle errors locally)
+      // =========================
+      let fileInfos: UploadKeyResponse["fileInfo"][] = [];
+
+      try {
+        if (attachments?.length > 1) {
+          fileInfos = await uploadMultiple(attachments);
+        } else if (attachments?.length === 1) {
+          const fileInfo = await uploadSingle(attachments[0]);
+          fileInfos = [fileInfo];
+        }
+      } catch (uploadError) {
+        if (
+          uploadError instanceof Error &&
+          uploadError.message === STORAGE_UPLOAD_TOO_LARGE
+        ) {
+          toast.error(t("userRecord.storageUploadFailed"), {
+            description: t("msg.fileTooLarge"),
+          });
+        } else if (
+          uploadError instanceof Error &&
+          uploadError.message === STORAGE_UPLOAD_ERROR_CODE
+        ) {
+          await handleError(new Error(t("userRecord.storageUploadFailed")));
+        } else {
+          await handleError(uploadError);
+        }
+        return;
+      }
+
+      // convert fileInfo → AttachmentInfo (ONLY IF REQUIRED)
+      const uploadedFiles: AttachmentInfo[] = fileInfos.map((f) => ({
+        fileInfo: {
+          bucket: f.bucket,
+          fileName: f.fileName,
+          contentType: f.contentType,
+          originalname: f.originalname,
+          size: f.size,
+        },
+        name: {
+          am: f.originalname,
+          en: f.originalname,
+        },
+      }));
+
+      // convert DMS documents → AttachmentInfo
+      const dmsUploadedFiles: AttachmentInfo[] = dmsAttachments.map((doc) => ({
+        fileInfo: {
+          bucket: doc.fileInfo?.bucket || "",
+          fileName: doc.fileInfo?.fileName || "",
+          contentType: doc.fileInfo?.contentType || "",
+          size: doc.fileInfo?.size || 0,
+          originalname:
+            doc.fileInfo?.originalname ||
+            (typeof doc.name === "object" ? doc.name?.en || doc.name?.am : doc.name) ||
+            "document",
+        },
+        name: {
+          am: (typeof doc.name === "object" ? doc.name?.am || doc.name?.en : doc.name) || "document",
+          en: (typeof doc.name === "object" ? doc.name?.en || doc.name?.am : doc.name) || "document",
+        },
+      }));
+
+      // =========================
+      // 2. BUILD PAYLOAD
+      // =========================
+      const unitConfig = unitConfigData?.data?.items?.[0];
+
+      // Reverse each CC bucket before serializing. The BE renders the PDF in
+      // reverse of the order we send (last entry comes out first), so flipping
+      // the array here lets the BE's reversal land back on selection order.
+      // Applies to: internal departments, external CC units, CC employees,
+      // For-Your-Reference, and the receivers inside each ccList group.
+      const payload: RecordPayload = {
+        body: values.body,
+        referenceNumber: values.referenceNumber,
+        cc: [
+          ...internalCCValues
+            .slice()
+            // .reverse()
+            .map((c) => ({
+              unitId: c.unitId!,
+              positionId: c.id!,
+              type: "internal" as const,
+            })),
+          ...externalCCValues
+            .slice()
+            // .reverse()
+            .map((c) => ({
+              unitId: c.id,
+              type: "external" as const,
+            })),
+          ...ccEmployee.slice().map((c) => ({
+            positionId: c.employeePositions[0]?.position?.id,
+            employeePositionId: c.employeePositions[0]?.id,
+            type: "internal" as const,
+          })),
+          ...forYourReferenceValues.slice().map((c) => ({
+            unitId: c.unitId!,
+            positionId: c.id!,
+            type: "internal" as const,
+            isForYourReference: true,
+          })),
+        ],
+        receiverList: receiversList.map(serializeReceiverGroup),
+        ccList: ccList.map(serializeReceiverGroup).map((g) => ({
+          ...g,
+          receivers: g.receivers.slice(),
+        })),
+        forYourReferenceList: forYourReferenceList
+          .map(serializeReceiverGroup)
+          .map((g) => ({
+            ...g,
+            receivers: g.receivers.slice(),
+          })),
+        nonSmartOfficeReceiverCCs: values.nonSmartOfficeReceiverCCs ?? [],
+        headerId:
+          values.recordType === "direct" &&
+          unitConfig?.shouldDirectRecordHaveHeaderAndFooter === false
+            ? null
+            : values.headerId,
+        footerId:
+          values.recordType === "direct" &&
+          unitConfig?.shouldDirectRecordHaveHeaderAndFooter === false
+            ? null
+            : values.footerId,
+        receivingUnitIds,
+        nonSmartOfficeReceivers: values.nonSmartOfficeReceivers ?? [],
+        recordType: values.recordType,
+        subject: values.subject,
+        collaborators: values.collaborators ?? [],
+        toPositions: values.toPositions ?? [],
+        toEmployees: values.toEmployees ?? [],
+        preferredLanguage: values.preferredLanguage as "am" | "en",
+        initiationType: values.initiationType,
+        sincerelyText: values.sincerelyText,
+        recordTemplateId: values.recordTemplateId || undefined,
+        prefix: values.prefix ?? "",
+        prefixCC: values.ccPrefix ?? "",
+        suffix: values.suffix ?? "",
+        suffixCC: values.ccSuffix ?? "",
+        isWithTeamSignature: values.isWithTeamSignature,
+        skipOneLevel: values.skipOneLevel ?? false,
+        letterName: values.letterName,
+        recordTagIds: values.recordTagIds,
+        initiatedAs: values.initiatedAs || values.initiationType || "",
+        inReplyToIncomingInstanceId: id,
+
+        attachments: [...uploadedFiles, ...dmsUploadedFiles],
+      };
+
+      // =========================
+      // 3. SEND PAYLOAD ACCORDING TO INTENT (mutation: errors already toasted by addMutation.onError)
+      // =========================
+      if (intent === "forward") {
+        await createAndSubmitRecord(payload);
+        invalidateRecordLists();
+        toast.success(t("userRecord.recordCreatedAndForwarded"));
+        navigate("/record-management/userRecords");
+      } else if (intent === "direct") {
+        const signatureId = signatureData?.signatureId;
+        if (!signatureId) {
+          toast.error(t("userRecord.noSignatureForDirectSend"));
+          return;
+        }
+        await createAndSubmitDirectRecord({ payload, signatureId });
+        invalidateRecordLists();
+        toast.success(t("userRecord.recordCreatedAndSent"));
+        navigate("/record-management/userRecords");
+      } else if (intent === "approve") {
+        // Defer the create call — the approval modal will collect stamp/
+        // signature/etc. and then dispatch the combined endpoint.
+        setApproveTarget({
+          payload,
+          unitId: userDetails?.employee?.[0]?.unitId ?? "",
+          recordTypeKey: values.recordType,
+        });
+      } else {
+        let created;
+        try {
+          created = await addRecord(payload);
+        } catch {
+          return;
+        }
+        if (!created?.id) {
+          await handleError(new Error(t("msg.genericError")));
+          return;
+        }
+        invalidateRecordLists();
+        toast.success(
+          attachments.length > 0 || dmsAttachments.length > 0
+            ? t("msg.submittedWithAttachments")
+            : t("msg.submittedSuccess"),
+        );
+        navigate("/record-management/userRecords");
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return isDelegated ? (
+    <DelegationView />
+  ) : (
+    <div className="w-full max-w-5xl mx-auto">
+      <div className="pb-2 text-xl font-bold">{t("userRecord.Add Record")}</div>
+      <RecordForm
+        key={location.key}
+        onSubmit={handleFormSubmit}
+        defaultValues={defaultCreateLetterValues}
+        isEditMode={false}
+        isLoading={isSubmitting}
+        setFiles={setAttachments}
+        files={attachments}
+        dmsAttachments={dmsAttachments}
+        setDmsAttachments={setDmsAttachments}
+        treeOrganizationsOptions={allModifiedOrgs ?? []}
+        ccTreeOrganizationsOptions={allModifiedOrgs ?? []}
+        fyrTreeOrganizationsOptions={allModifiedOrgs ?? []}
+      />
+      {approveTarget && (
+        <ApproveRecordModal
+          open={!!approveTarget}
+          onClose={() => setApproveTarget(null)}
+          recordData={{
+            unitId: approveTarget.unitId,
+            recordTypeKey: approveTarget.recordTypeKey,
+            referenceNumber: approveTarget.payload.referenceNumber,
+          }}
+          onCustomSubmit={async (approvalData) => {
+            await createSubmitAndSendToRoRecord(
+              approveTarget.payload,
+              approvalData,
+            );
+            invalidateRecordLists();
+          }}
+          onSuccess={() => {
+            setApproveTarget(null);
+            toast.success(t("userRecord.recordCreatedAndForwarded"));
+            navigate("/record-management/userRecords");
+          }}
+          preferredLanguage={
+            approveTarget.payload.preferredLanguage === "en" ? "en" : "am"
+          }
+        />
+      )}
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/approveRecord.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/approveRecord.tsx
new file mode 100644
index 000000000..9bd1b0cb6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/approveRecord.tsx
@@ -0,0 +1,607 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useForm, Controller, type FieldErrors } from "react-hook-form";
+import { toast } from "sonner";
+import { Button } from "@/shared/common/ui/button";
+import { useTranslation } from "react-i18next";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { Textarea } from "@/shared/common/ui/textarea";
+
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { UploadedTeeter } from "../Settings/uploadTeeterandSingature";
+import { useApprovalTasks } from "../hooks/useApprovalTasks";
+import {
+  useSignatureListWithPresigned,
+  useTeetersListWithPresigned,
+} from "../hooks/useSignatureAndTeeterWithPresigned";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { usePositionPrefixes } from "../hooks/usePositionPrefixes";
+import { useUnitConfiguration } from "@/shared/hooks/useUnitConfiguration";
+import { getNoStampsForLanguageMessage } from "@/record-management/utils/stampMessages";
+
+export interface ApprovalSubmitData {
+  stampId?: string;
+  signatureId?: string;
+  note: string;
+  recordPrefixId?: string;
+}
+
+interface ApproveRecordProps {
+  open: boolean;
+  onClose: () => void;
+  /** Required for the default flow. Optional when `onCustomSubmit` is provided
+   *  (e.g. "Create and Approve" where the record doesn't exist yet). */
+  recordId?: string;
+  onSuccess: () => void;
+  recordData?: {
+    unitId: string;
+    recordTypeKey: string;
+    referenceNumber?: string;
+  };
+  preferredLanguage?: string;
+  /** When provided, the modal calls this with the collected approval data
+   *  instead of running the default `submitAndSend`. Use this to drive
+   *  combined endpoints like create-submit-and-send-to-ro or
+   *  update-submit-and-send-to-ro. */
+  onCustomSubmit?: (data: ApprovalSubmitData) => Promise<void>;
+}
+
+type ApproveFormValues = {
+  reason: string;
+  selectedTeeter: string;
+  selectedSignature: string;
+  selectedPositionPrefix?: string;
+};
+
+interface UploadedSignature {
+  id: string;
+  url: string;
+}
+
+type LocalizedNameValue = {
+  en?: string;
+  am?: string;
+};
+
+const ApproveRecordModal: React.FC<ApproveRecordProps> = ({
+  open,
+  onClose,
+  recordId,
+  onSuccess,
+  recordData,
+  onCustomSubmit,
+  preferredLanguage,
+}) => {
+  const { submitAndSend, isSubmitAndSendLoading, refetch } = useApprovalTasks();
+  const { t, i18n } = useTranslation();
+  const [uploadedTeeters, setUploadedTeeters] = useState<UploadedTeeter[]>([]);
+  const [signatures, setSignatures] = useState<UploadedSignature[]>([]);
+  const [defaultSignature, setDefaultSignature] = useState<
+    string | undefined
+  >();
+  const [selectedTeeterUrl, setSelectedTeeterUrl] = useState<string>("");
+  const [selectedSignatureUrl, setSelectedSignatureUrl] = useState<string>("");
+  const teeterRef = useRef<HTMLDivElement>(null);
+  const positionPrefixRef = useRef<HTMLDivElement>(null);
+  const { control, handleSubmit, reset, setValue, watch } =
+    useForm<ApproveFormValues>({
+      defaultValues: {
+        reason: "",
+        selectedTeeter: "",
+        selectedSignature: "",
+        selectedPositionPrefix: "",
+      },
+    });
+
+  const selectedTeeter = watch("selectedTeeter");
+  const selectedSignature = watch("selectedSignature");
+
+  const { userDetails } = useAuthUser();
+  const unitId = userDetails?.employee?.[0]?.unitId ?? "";
+
+  const employeeId = userDetails?.employee?.[0]?.id ?? "";
+  const approverPositionId =
+    userDetails?.employee?.[0]?.positions?.[0]?.id ?? undefined;
+
+  const { data: signatureData } = useSignatureListWithPresigned(employeeId);
+  const locale: "am" | "en" = (preferredLanguage ?? "")
+    .toLowerCase()
+    .startsWith("am")
+    ? "am"
+    : "en";
+  const { data: teeterData } = useTeetersListWithPresigned(locale);
+  const { handleError } = useErrorHandler(t);
+  const { data: unitConfigData } = useUnitConfiguration(unitId, {
+    enabled: !!unitId,
+  });
+  const canPositionBasedReferenceBeUsedForAllTypes =
+    unitConfigData?.data?.items?.[0]
+      ?.canPositionBasedReferenceBeUsedForAllTypes ?? false;
+  const canInternalMemoRequirePositionBasedReferenceNumber =
+    unitConfigData?.data?.items?.[0]
+      ?.canInternalMemoRequirePositionBasedReferenceNumber ?? false;
+  const hasReferenceNumber = Boolean(recordData?.referenceNumber?.trim());
+
+  // Fetch position prefixes if record data is available, filtered by approver's position and record type
+  const { data: positionPrefixes = [] } = usePositionPrefixes(
+    unitId || "",
+    recordData?.recordTypeKey || "external",
+    approverPositionId,
+  );
+  const shouldShowPositionPrefixSelector =
+    !hasReferenceNumber &&
+    (canPositionBasedReferenceBeUsedForAllTypes ||
+      recordData?.recordTypeKey === "internal_memo");
+  const isInternalMemoRecord = recordData?.recordTypeKey === "internal_memo";
+
+  const isPositionPrefixRequired =
+    !hasReferenceNumber &&
+    isInternalMemoRecord &&
+    canInternalMemoRequirePositionBasedReferenceNumber;
+  const effectivePreferredLanguage =
+    preferredLanguage === "am" || preferredLanguage === "en"
+      ? preferredLanguage
+      : preferredLanguage?.toLowerCase().startsWith("am")
+        ? "am"
+        : preferredLanguage?.toLowerCase().startsWith("en")
+          ? "en"
+          : i18n.language?.startsWith("am")
+            ? "am"
+            : "en";
+
+  const localizedValue = (name: { en: string; am: string }) => {
+    if (effectivePreferredLanguage === "am") {
+      return name.am || name.en;
+    }
+    return name.en || name.am;
+  };
+  useEffect(() => {
+    const teeters = teeterData?.presignedTeeters;
+    if (teeters?.length) {
+      setUploadedTeeters(teeters);
+      const match =
+        teeters.find((t) => t.locale === locale) ??
+        (teeters.length === 1 ? teeters[0] : null);
+      if (match) {
+        setValue("selectedTeeter", match.id);
+        setSelectedTeeterUrl(match.url);
+      }
+    }
+
+    const currentItem = signatureData?.items.find(
+      (item) => item.isCurrent && item.uploadedSuccessfully,
+    );
+
+    if (currentItem && signatureData?.presignedSignatureUrl) {
+      const validSignatures = [
+        {
+          id: currentItem.id,
+          url: signatureData.presignedSignatureUrl,
+          name: currentItem.fileInfo.originalname,
+        },
+      ];
+
+      setSignatures(validSignatures);
+      setDefaultSignature(currentItem.id);
+      setValue("selectedSignature", currentItem.id);
+      setSelectedSignatureUrl(signatureData.presignedSignatureUrl);
+    }
+  }, [teeterData, signatureData, setValue, locale]);
+
+  useEffect(() => {
+    if (selectedTeeter) {
+      const teeter = uploadedTeeters.find((t) => t.id === selectedTeeter);
+      setSelectedTeeterUrl(teeter?.url || "");
+    }
+  }, [selectedTeeter, uploadedTeeters]);
+
+  useEffect(() => {
+    if (selectedSignature) {
+      const signature = signatures.find((s) => s.id === selectedSignature);
+      setSelectedSignatureUrl(signature?.url || "");
+    }
+  }, [selectedSignature, signatures]);
+
+  useEffect(() => {
+    if (!shouldShowPositionPrefixSelector) {
+      setValue("selectedPositionPrefix", "");
+    }
+  }, [setValue, shouldShowPositionPrefixSelector]);
+  const onError = (errors: FieldErrors<ApproveFormValues>) => {
+    if (errors.selectedTeeter) {
+      teeterRef.current?.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+      return;
+    }
+
+    if (errors.selectedPositionPrefix) {
+      positionPrefixRef.current?.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    }
+  };
+  const onSubmit = async (data: ApproveFormValues) => {
+    if (!data.selectedTeeter) {
+      toast.error(t("ApprovalPage.selectStamp"));
+      return;
+    }
+
+    if (isPositionPrefixRequired && !data.selectedPositionPrefix) {
+      toast.error(
+        t(
+          "ApprovalPage.positionPrefixRequired",
+          "Reference number selection is required",
+        ),
+      );
+      return;
+    }
+
+    const approvalPayload: ApprovalSubmitData = {
+      stampId: data.selectedTeeter || undefined,
+      signatureId: data.selectedSignature || defaultSignature,
+      note: data.reason ? data.reason : "No Comment/አስተያየት የለም",
+      recordPrefixId: data.selectedPositionPrefix
+        ? data.selectedPositionPrefix
+        : undefined,
+    };
+
+    try {
+      if (onCustomSubmit) {
+        await onCustomSubmit(approvalPayload);
+      } else {
+        if (!recordId) {
+          toast.error("Invalid record ID");
+          return;
+        }
+        await Promise.all([
+          submitAndSend({
+            id: recordId,
+            ...approvalPayload,
+          }),
+          refetch(),
+        ]);
+      }
+      toast.success(t("ApprovalPage.recordApprovedSuccessfully"));
+      onSuccess();
+      handleClose();
+    } catch (error) {
+      handleError(error);
+    }
+  };
+
+  const handleClose = () => {
+    reset();
+    setSelectedTeeterUrl("");
+    setSelectedSignatureUrl("");
+    onClose();
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) {
+          handleClose();
+        }
+      }}
+    >
+      <DialogContent
+        className="w-[calc(100vw-2rem)] max-w-[425px] max-h-[85vh] overflow-hidden p-0 sm:max-w-[425px]"
+        onEscapeKeyDown={(event) => event.preventDefault()}
+        onPointerDownOutside={(event) => event.preventDefault()}
+      >
+        <DialogHeader className="border-b px-6 pb-4 pt-6">
+          <DialogTitle>{t("ApprovalPage.approveRecord")}</DialogTitle>
+        </DialogHeader>
+
+        <form
+          onSubmit={handleSubmit(onSubmit, onError)}
+          className="flex max-h-[calc(85vh-4.5rem)] flex-col"
+        >
+          <div className="flex-1 space-y-4 overflow-y-auto px-6 py-4">
+            <div ref={teeterRef}>
+              <label className="block text-sm font-medium">
+                {t("ApprovalPage.selectStamp")}
+              </label>
+              {uploadedTeeters.length === 0 ? (
+                teeterData ? (
+                  <p className="mt-2 rounded border border-amber-200 bg-amber-50 p-2 text-sm text-amber-700 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-300">
+                    {getNoStampsForLanguageMessage(locale, t)}
+                  </p>
+                ) : (
+                  <p className="mt-2 text-sm text-muted-foreground">
+                    {t("common.loading")}
+                  </p>
+                )
+              ) : uploadedTeeters.length === 1 ? (
+                <div className="mt-2 border rounded p-2">
+                  <p className="text-sm font-medium mb-1">
+                    {t("ApprovalPage.yourStamp")}
+                  </p>
+                  <div className="relative h-24 w-24">
+                    {selectedTeeterUrl && (
+                      <img
+                        src={selectedTeeterUrl}
+                        alt="Your stamp"
+                        className="h-24 w-24 object-contain"
+                      />
+                    )}
+                  </div>
+                </div>
+              ) : (
+                <Controller
+                  name="selectedTeeter"
+                  control={control}
+                  rules={{ required: "Please select a stamp" }}
+                  render={({ field, fieldState }) => (
+                    <>
+                      <Select
+                        onValueChange={field.onChange}
+                        value={field.value}
+                      >
+                        <SelectTrigger>
+                          <SelectValue
+                            placeholder={t("ApprovalPage.selectStamp")}
+                          >
+                            {field.value
+                              ? (teeterData?.presignedTeeters?.find(
+                                  (t) => t.id === field.value,
+                                )?.name ?? t("ApprovalPage.selectStamp"))
+                              : null}
+                          </SelectValue>
+                        </SelectTrigger>
+                        <SelectContent>
+                          {uploadedTeeters.map((teeter) => (
+                            <SelectItem key={teeter.id} value={teeter.id}>
+                              {(() => {
+                                const name = teeter.name as unknown;
+                                if (typeof name === "string") return name;
+                                const localized = name as
+                                  | LocalizedNameValue
+                                  | undefined;
+                                return (
+                                  localized?.en || localized?.am || "Teeter"
+                                );
+                              })()}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      {fieldState.error && (
+                        <p className="text-sm text-red-500 mt-1">
+                          {fieldState.error.message}
+                        </p>
+                      )}
+                      {selectedTeeterUrl && (
+                        <div className="mt-2 border rounded p-2">
+                          <p className="text-sm font-medium mb-1">
+                            {t("ApprovalPage.selectedStamp")}
+                          </p>
+                          <div className="relative h-24 w-24">
+                            <img
+                              src={selectedTeeterUrl}
+                              alt="Selected stamp"
+                              className="h-24 w-24 object-contain"
+                            />
+                          </div>
+                        </div>
+                      )}
+                    </>
+                  )}
+                />
+              )}
+            </div>
+
+            {signatures.length > 0 && (
+              <div>
+                <label className="block text-sm font-medium">
+                  {t("ApprovalPage.signature")}
+                </label>
+                {signatures.length === 1 ? (
+                  <div className="mt-2 border rounded p-2">
+                    <p className="text-sm font-medium mb-1">
+                      {t("ApprovalPage.yourSignature")}
+                    </p>
+                    <div className="relative h-16 w-48">
+                      {selectedSignatureUrl && (
+                        <img
+                          src={selectedSignatureUrl}
+                          alt="Your signature"
+                          className="h-24 w-24 object-contain"
+                        />
+                      )}
+                    </div>
+                  </div>
+                ) : (
+                  <Controller
+                    name="selectedSignature"
+                    control={control}
+                    render={({ field }) => (
+                      <>
+                        <Select
+                          onValueChange={field.onChange}
+                          value={field.value}
+                        >
+                          <SelectTrigger>
+                            <SelectValue placeholder="Select a signature" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {signatures.map((signature) => (
+                              <SelectItem
+                                key={signature.id}
+                                value={signature.id}
+                              >
+                                {t("ApprovalPage.signature")} {signature.id}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        {selectedSignatureUrl && (
+                          <div className="mt-2 border rounded p-2">
+                            <p className="text-sm font-medium mb-1">
+                              {t("ApprovalPage.selectedSignature")}
+                            </p>
+                            <div className="relative h-16 w-48">
+                              <img
+                                src={selectedSignatureUrl}
+                                alt="Selected signature"
+                                className="h-24 w-24 object-contain"
+                              />
+                            </div>
+                          </div>
+                        )}
+                      </>
+                    )}
+                  />
+                )}
+              </div>
+            )}
+
+            {hasReferenceNumber && (
+              <div>
+                <label className="block text-sm font-medium">
+                  {t("viewDetail.referenceNumber", "Reference Number")}
+                </label>
+                <div className="mt-1 rounded-md border bg-slate-50 px-3 py-2 text-sm font-medium text-slate-700">
+                  {recordData?.referenceNumber}
+                </div>
+              </div>
+            )}
+
+            {shouldShowPositionPrefixSelector &&
+              positionPrefixes.length > 0 && (
+                <div ref={positionPrefixRef}>
+                  {" "}
+                  {/* Ref for scrolling into view on validation error */}
+                  <label className="block text-sm font-medium">
+                    {t("contentManagement.positionPrefixes") ||
+                      "Position Prefix"}
+                  </label>
+                  <div className="flex gap-2 items-end">
+                    <div className="flex-1">
+                      <Controller
+                        name="selectedPositionPrefix"
+                        control={control}
+                        rules={{
+                          validate: (value) =>
+                            !isPositionPrefixRequired ||
+                            Boolean(value) ||
+                            t(
+                              "ApprovalPage.positionPrefixRequired",
+                              "Reference number selection is required",
+                            ),
+                        }}
+                        render={({ field, fieldState }) => (
+                          <>
+                            <Select
+                              onValueChange={field.onChange}
+                              value={field.value || ""}
+                            >
+                              <SelectTrigger>
+                                <SelectValue
+                                  placeholder={
+                                    isInternalMemoRecord
+                                      ? t(
+                                          "addRecord.Select Position Prefix",
+                                          "Select Position Prefix",
+                                        )
+                                      : t(
+                                          "contentManagement.positionPrefixes",
+                                        ) || "Select position prefix"
+                                  }
+                                />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {positionPrefixes.map((prefix) => (
+                                  <SelectItem key={prefix.id} value={prefix.id}>
+                                    {localizedValue(prefix.name)}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                            {fieldState.error ? (
+                              <p className="mt-1 text-sm text-red-500">
+                                {fieldState.error.message}
+                              </p>
+                            ) : (
+                              isPositionPrefixRequired && (
+                                <p className="mt-1 text-xs text-slate-500">
+                                  {t(
+                                    "ApprovalPage.positionPrefixRequired",
+                                    "Reference number selection is required",
+                                  )}
+                                </p>
+                              )
+                            )}
+                          </>
+                        )}
+                      />
+                    </div>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={() => setValue("selectedPositionPrefix", "")}
+                      className="h-10 px-3"
+                    >
+                      {t("common.Cancel") || "Clear"}
+                    </Button>
+                  </div>
+                </div>
+              )}
+
+            <div>
+              <label className="block text-sm font-medium">
+                {t("ApprovalPage.Remark")}
+              </label>
+              <Controller
+                name="reason"
+                control={control}
+                render={({ field }) => (
+                  <Textarea
+                    {...field}
+                    placeholder={t("ApprovalPage.Remark")}
+                    rows={4}
+                    className="w-full"
+                  />
+                )}
+              />
+            </div>
+          </div>
+
+          <div className="flex justify-end space-x-2 border-t px-6 py-4">
+            <Button type="button" variant="outline" onClick={handleClose}>
+              {t("common.Cancel")}
+            </Button>
+            <Button
+              type="submit"
+              disabled={isSubmitAndSendLoading}
+              className="bg-primary-800 text-white"
+            >
+              {isSubmitAndSendLoading
+                ? t("ApprovalPage.approving")
+                : t("statusBar.Approve")}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default ApproveRecordModal;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/collaborationDetails.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/collaborationDetails.tsx
new file mode 100644
index 000000000..d490cc1c9
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/collaborationDetails.tsx
@@ -0,0 +1,221 @@
+import React from "react";
+import { AlertCircle, CheckCircle2, Clock3, Users } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { Badge } from "@/shared/common/ui/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/common/ui/table";
+import { useTranslation } from "react-i18next";
+import { useCollaborationByRecordId } from "../hooks/useMyCollaborations";
+import { useLocalizedName } from "@/shared/common/localizedName";
+
+interface CollaborationDetailsProps {
+  open: boolean;
+  onClose: () => void;
+  recordId: string;
+}
+
+const CollaborationDetails: React.FC<CollaborationDetailsProps> = ({
+  open,
+  onClose,
+  recordId,
+}) => {
+  const { t } = useTranslation();
+  const localizedName = useLocalizedName();
+  const { data, isLoading, error } = useCollaborationByRecordId(recordId, {
+    enabled: open && !!recordId,
+  });
+  const items = data?.items || [];
+
+  const getCollaboratorLabel = (item: any) => {
+    return (
+      localizedName(item?.employeePosition?.employee?.name) ||
+      localizedName(item?.employee?.name) ||
+      localizedName(item?.employeePosition?.position?.name) ||
+      item?.employeePositionId ||
+      "__"
+    );
+  };
+
+  const getStatusLabel = (status?: string) => {
+    if (!status) return "__";
+    return t(`statusBar.${status}`, status);
+  };
+
+  const getStatusVariant = (status?: string) => {
+    switch (status) {
+      case "signed":
+        return "success";
+      case "rejected":
+      case "reject":
+        return "danger";
+      default:
+        return "secondary";
+    }
+  };
+
+  const signedCount = items.filter((item: any) => item.signStatus === "signed").length;
+  const pendingCount = items.filter(
+    (item: any) => item.signStatus === "draft" || !item.signStatus,
+  ).length;
+
+  return (
+    <Dialog open={open} onOpenChange={(nextOpen) => !nextOpen && onClose()}>
+      <DialogContent className="overflow-hidden border-0 p-0 sm:max-w-[760px]">
+        <DialogHeader className="border-b bg-gradient-to-r from-primary-600 via-primary-600 to-cyan-600 px-6 py-5 text-white">
+          <div className="flex items-center gap-3">
+            <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-white/15 backdrop-blur">
+              <Users className="h-5 w-5" />
+            </div>
+            <div className="min-w-0">
+              <DialogTitle className="text-xl font-semibold text-white">
+                {t("header.navigation.collaboration")}
+              </DialogTitle>
+              <p className="mt-1 text-sm text-white/80">
+                {t("viewDetail.collaborators", "Collaborator")} {items.length}
+              </p>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <div className="space-y-5 bg-slate-50 px-6 py-5">
+          {!isLoading && !error && items.length > 0 && (
+            <div className="grid gap-3 sm:grid-cols-3">
+              <div className="rounded-2xl border border-primary-100 bg-white p-4 shadow-sm">
+                <div className="flex items-center gap-3">
+                  <div className="rounded-xl bg-primary-100 p-2 text-primary-700">
+                    <Users className="h-4 w-4" />
+                  </div>
+                  <div>
+                    <p className="text-xs font-medium uppercase tracking-wide text-slate-500">
+                      {t("viewDetail.collaborators", "Collaborators")}
+                    </p>
+                    <p className="text-xl font-semibold text-slate-900">{items.length}</p>
+                  </div>
+                </div>
+              </div>
+              <div className="rounded-2xl border border-primary-100 bg-white p-4 shadow-sm">
+                <div className="flex items-center gap-3">
+                  <div className="rounded-xl bg-primary-100 p-2 text-primary-700">
+                    <CheckCircle2 className="h-4 w-4" />
+                  </div>
+                  <div>
+                    <p className="text-xs font-medium uppercase tracking-wide text-slate-500">
+                      {t("statusBar.Accepted", "Signed")}
+                    </p>
+                    <p className="text-xl font-semibold text-slate-900">{signedCount}</p>
+                  </div>
+                </div>
+              </div>
+              <div className="rounded-2xl border border-amber-100 bg-white p-4 shadow-sm">
+                <div className="flex items-center gap-3">
+                  <div className="rounded-xl bg-amber-100 p-2 text-amber-700">
+                    <Clock3 className="h-4 w-4" />
+                  </div>
+                  <div>
+                    <p className="text-xs font-medium uppercase tracking-wide text-slate-500">
+                      {t("statusBar.InProgress", "Pending")}
+                    </p>
+                    <p className="text-xl font-semibold text-slate-900">{pendingCount}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {isLoading ? (
+            <div className="rounded-2xl border border-slate-200 bg-white p-10 text-center shadow-sm">
+              <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-slate-100">
+                <Clock3 className="h-5 w-5 text-slate-500" />
+              </div>
+              <div className="text-sm font-medium text-slate-700">
+                {t("setting.loading")}
+              </div>
+            </div>
+          ) : error ? (
+            <div className="rounded-2xl border border-red-100 bg-white p-10 text-center shadow-sm">
+              <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
+                <AlertCircle className="h-5 w-5 text-red-600" />
+              </div>
+              <div className="text-sm font-medium text-red-600">
+                {error instanceof Error
+                  ? error.message
+                  : t("msg.error", "Failed to load collaborations")}
+              </div>
+            </div>
+          ) : !items?.length ? (
+            <div className="rounded-2xl border border-slate-200 bg-white p-10 text-center shadow-sm">
+              <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-slate-100">
+                <Users className="h-5 w-5 text-slate-500" />
+              </div>
+              <div className="text-sm font-medium text-slate-700">{t("msg.noMsg")}</div>
+            </div>
+          ) : (
+            <div className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
+              <div className="border-b bg-slate-50 px-4 py-3">
+                <p className="text-sm font-semibold text-slate-800">
+                  {t("header.navigation.collaboration")}
+                </p>
+              </div>
+              <div className="max-h-[50vh] overflow-auto">
+                <Table>
+                  <TableHeader className="sticky top-0 z-10 bg-white">
+                    <TableRow className="border-slate-200 hover:bg-transparent">
+                      <TableHead className="h-12 px-4 text-xs font-semibold uppercase tracking-wide text-slate-500">
+                        {t("viewDetail.collaborators", "Collaborator")}
+                      </TableHead>
+                      <TableHead className="h-12 px-4 text-xs font-semibold uppercase tracking-wide text-slate-500">
+                        {t("userRecord.signStatus", "Status")}
+                      </TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {items.map((item: any, index: number) => (
+                      <TableRow
+                        key={item.id}
+                        className="border-slate-100 hover:bg-primary-50/40"
+                      >
+                        <TableCell className="px-4 py-4">
+                          <div className="flex items-center gap-3">
+                            <div className="flex h-9 w-9 items-center justify-center rounded-full bg-gradient-to-br from-primary-500 to-primary-600 text-xs font-semibold text-white">
+                              {index + 1}
+                            </div>
+                            <div>
+                              <p className="font-medium text-slate-900">
+                                {getCollaboratorLabel(item)}
+                              </p>
+                              <p className="text-xs text-slate-500">
+                                {item.employeePositionId || "__"}
+                              </p>
+                            </div>
+                          </div>
+                        </TableCell>
+                        <TableCell className="px-4 py-4">
+                          <Badge variant={getStatusVariant(item.signStatus) as any}>
+                            {getStatusLabel(item.signStatus)}
+                          </Badge>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default CollaborationDetails;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/DmsAttachmentItem.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/DmsAttachmentItem.tsx
new file mode 100644
index 000000000..3536c8d1f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/DmsAttachmentItem.tsx
@@ -0,0 +1,58 @@
+import { Cloud, X } from "lucide-react";
+import { Button } from "@/shared/common/ui/button";
+import { formatBytes, resolveOwnerName } from "@/DMS/pages/_shared/utils";
+
+interface DmsAttachmentItemProps {
+  doc: any;
+  onRemove: () => void;
+}
+
+export function DmsAttachmentItem({ doc, onRemove }: DmsAttachmentItemProps) {
+  const originalname =
+    doc.fileInfo?.originalname ||
+    (typeof doc.name === "object" ? doc.name?.en || doc.name?.am : doc.name) ||
+    "document";
+  const size = doc.fileInfo?.size || 0;
+  const owner = resolveOwnerName(doc.ownerName) || "N/A";
+
+  return (
+    <div className="relative flex items-center gap-2.5 rounded-md border border-transparent p-2 dark:border-gray-700 dark:bg-gray-800/50">
+      <div className="flex flex-1 gap-2.5 items-center min-w-0">
+        <div className="p-2 bg-blue-50 dark:bg-blue-900/20 text-blue-500 dark:text-blue-400 rounded-md shrink-0">
+          <Cloud className="size-5" />
+        </div>
+        <div className="flex w-full flex-col min-w-0">
+          <div className="flex items-center gap-2 min-w-0">
+            <p className="truncate text-sm font-medium text-foreground/80">
+              {originalname}
+            </p>
+            <span className="shrink-0 text-[10px] text-blue-600 dark:text-blue-400 font-semibold bg-blue-50 dark:bg-blue-950/50 border border-blue-100 dark:border-blue-900/30 px-1.5 py-0.5 rounded-full select-none">
+              DMS
+            </span>
+          </div>
+          <p className="text-xs text-muted-foreground flex items-center gap-2 mt-0.5">
+            <span>{formatBytes(size)}</span>
+            {owner !== "N/A" && (
+              <>
+                <span className="text-gray-300 dark:text-gray-700">•</span>
+                <span className="truncate max-w-[120px]">Owner: {owner}</span>
+              </>
+            )}
+          </p>
+        </div>
+      </div>
+      <div className="flex items-center gap-2 shrink-0">
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          className="size-7 dark:border-gray-600 dark:hover:bg-gray-700"
+          onClick={onRemove}
+        >
+          <X className="size-4" aria-hidden="true" />
+          <span className="sr-only">Remove file</span>
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/DmsFilePickerModal.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/DmsFilePickerModal.tsx
new file mode 100644
index 000000000..53087dd02
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/DmsFilePickerModal.tsx
@@ -0,0 +1,719 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/shared/common/ui/dialog";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import {
+  getMySubFolders,
+  getMyCollaborationsSubFolders,
+} from "@/DMS/api/folders.api";
+import { listMyDocuments, getMyShares } from "@/DMS/api/dms.api";
+import { dmsHttp } from "@/DMS/api/dms.http";
+import {
+  ODWinFolderSvg,
+  ODIconWord,
+  ODIconExcel,
+  ODIconPpt,
+  ODIconPdf,
+  ODIconImage,
+  ODIconVideo,
+  ODIconFile,
+} from "@/DMS/pages/_shared/od-icons";
+import { detectFileKind } from "@/DMS/pages/_shared/file-kind.utils";
+import {
+  formatBytes,
+  resolveOwnerName,
+  pickName,
+} from "@/DMS/pages/_shared/utils";
+import {
+  Search,
+  ChevronRight,
+  Loader2,
+  FolderOpen,
+  CheckCircle2,
+  XCircle,
+  AlertCircle,
+  ChevronLeft,
+  ChevronRight as ChevronRightIcon,
+  HardDrive,
+  Clock,
+  Star,
+  Share2,
+  Users,
+} from "lucide-react";
+
+// ─── Section definitions ────────────────────────────────────────────────────
+
+type SectionKey =
+  | "myFiles"
+  | "recents"
+  | "favorites"
+  | "shared"
+  | "sharedWithMe";
+
+interface SidebarSection {
+  key: SectionKey;
+  label: string;
+  icon: React.ReactNode;
+  /** Whether folder-navigation (breadcrumbs) is supported in this section */
+  navigable: boolean;
+}
+
+const SECTIONS: SidebarSection[] = [
+  {
+    key: "myFiles",
+    label: "My Files",
+    icon: <HardDrive className="h-4 w-4" />,
+    navigable: true,
+  },
+  {
+    key: "recents",
+    label: "Recents",
+    icon: <Clock className="h-4 w-4" />,
+    navigable: false,
+  },
+  {
+    key: "favorites",
+    label: "Favorites",
+    icon: <Star className="h-4 w-4" />,
+    navigable: true,
+  },
+  {
+    key: "shared",
+    label: "Shared",
+    icon: <Share2 className="h-4 w-4" />,
+    navigable: true,
+  },
+  {
+    key: "sharedWithMe",
+    label: "Shared with me",
+    icon: <Users className="h-4 w-4" />,
+    navigable: true,
+  },
+];
+
+// ─── Props ──────────────────────────────────────────────────────────────────
+
+interface DmsFilePickerModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onAttach: (selectedDocs: any[]) => void;
+}
+
+// ─── Breadcrumb node ─────────────────────────────────────────────────────────
+
+interface BreadcrumbNode {
+  id: string | null;
+  name: string;
+}
+
+const itemTypeOf = (item: any) =>
+  String(item?.type ?? item?.itemType ?? "").toLowerCase() === "folder"
+    ? "folder"
+    : "document";
+
+const normalizeBrowseItem = (item: any) => ({
+  ...item,
+  id:
+    itemTypeOf(item) === "folder"
+      ? (item.folderId ?? item.id)
+      : (item.documentId ?? item.id),
+  type: itemTypeOf(item),
+});
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+export function DmsFilePickerModal({
+  isOpen,
+  onClose,
+  onAttach,
+}: DmsFilePickerModalProps) {
+  const { t } = useTranslation();
+
+  // ── Sidebar active section ────────────────────────────────────────────────
+  const [activeSection, setActiveSection] = useState<SectionKey>("myFiles");
+
+  // ── Browsing / navigation state ───────────────────────────────────────────
+  const [currentFolderId, setCurrentFolderId] = useState<string | null>(null);
+  const [breadcrumbs, setBreadcrumbs] = useState<BreadcrumbNode[]>([
+    { id: null, name: "My Files" },
+  ]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+
+  // ── Data state ────────────────────────────────────────────────────────────
+  const [items, setItems] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // ── Pagination state ──────────────────────────────────────────────────────
+  const [page, setPage] = useState(1);
+  const [totalCount, setTotalCount] = useState(0);
+  const limit = 50;
+
+  // ── Selection state ───────────────────────────────────────────────────────
+  const [selectedDocs, setSelectedDocs] = useState<Map<string, any>>(new Map());
+
+  // ── Debounce search ───────────────────────────────────────────────────────
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearch(searchQuery);
+      setPage(1);
+    }, 400);
+    return () => clearTimeout(handler);
+  }, [searchQuery]);
+
+  // ── Reset on modal open ───────────────────────────────────────────────────
+  useEffect(() => {
+    if (isOpen) {
+      setActiveSection("myFiles");
+      setCurrentFolderId(null);
+      setBreadcrumbs([{ id: null, name: "My Files" }]);
+      setSearchQuery("");
+      setDebouncedSearch("");
+      setPage(1);
+      setSelectedDocs(new Map());
+    }
+  }, [isOpen]);
+
+  // ── Reset folder navigation when section changes ──────────────────────────
+  const handleSectionChange = (key: SectionKey) => {
+    if (key === activeSection) return;
+    const sec = SECTIONS.find((s) => s.key === key)!;
+    setActiveSection(key);
+    setCurrentFolderId(null);
+    setBreadcrumbs([{ id: null, name: sec.label }]);
+    setSearchQuery("");
+    setDebouncedSearch("");
+    setPage(1);
+    setItems([]);
+  };
+
+  // ── Data fetcher (depends on active section) ──────────────────────────────
+  const loadContents = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const skip = (page - 1) * limit;
+      const q = debouncedSearch.trim() || undefined;
+
+      if (
+        currentFolderId &&
+        (activeSection === "favorites" || activeSection === "shared")
+      ) {
+        const res = await getMySubFolders(currentFolderId, {
+          skip,
+          take: limit,
+          q,
+        });
+        const fetched = Array.isArray(res?.items) ? res.items : [];
+        setItems(fetched.map(normalizeBrowseItem));
+        setTotalCount(Number(res?.count ?? fetched.length));
+      } else if (activeSection === "myFiles") {
+        const res = await getMySubFolders(currentFolderId, {
+          skip,
+          take: limit,
+          q,
+        });
+        const fetched = Array.isArray(res?.items) ? res.items : [];
+        setItems(fetched.map(normalizeBrowseItem));
+        setTotalCount(Number(res?.count ?? fetched.length));
+      } else if (activeSection === "recents") {
+        const res = await listMyDocuments({
+          skip,
+          take: limit,
+          name: q,
+          orderBy: "updatedAt:DESC",
+        });
+        // listMyDocuments returns only documents (no folders)
+        const fetched = Array.isArray(res?.items) ? res.items : [];
+        // Normalise to the same shape as browse items
+        const docs = fetched.map((d: any) =>
+          normalizeBrowseItem({ ...d, type: "document" }),
+        );
+        setItems(docs);
+        setTotalCount(Number(res?.count ?? docs.length));
+      } else if (activeSection === "favorites") {
+        const res = await dmsHttp.get<{ items: any[]; count: number }>(
+          "/api/favorites",
+        );
+        const raw: any[] = Array.isArray(res.data?.items)
+          ? res.data.items
+          : Array.isArray(res.data)
+            ? (res.data as any[])
+            : [];
+        // Each favorite item wraps the document/folder in `.document` or `.folder`
+        const fetched = raw
+          .map((fav: any) => {
+            const doc = fav.document ?? fav.folder ?? fav;
+            if (!doc?.id) return null;
+            return {
+              ...doc,
+              id: fav.folderId ?? fav.documentId ?? doc.id,
+              type: fav.folder || fav.folderId ? "folder" : "document",
+              fileInfo: doc.fileInfo ?? doc.presignedUrl ?? undefined,
+            };
+          })
+          .filter(Boolean)
+          .map(normalizeBrowseItem)
+          .filter((item: any) => {
+            if (!q) return true;
+            return pickName(item.name, "")
+              .toLowerCase()
+              .includes(q.toLowerCase());
+          });
+        setItems(fetched);
+        setTotalCount(fetched.length);
+      } else if (activeSection === "shared") {
+        // Items the current user has shared with others
+        const res = await getMyShares({ skip, take: limit });
+        const raw: any[] = Array.isArray(res?.items) ? res.items : [];
+        const fetched = raw
+          .map((share: any) => {
+            if (!share.documentId && !share.folderId) return null;
+            const type = share.itemType === "folder" ? "folder" : "document";
+            return {
+              id: type === "folder" ? share.folderId : share.documentId,
+              name: share.itemName,
+              type,
+              ownerName: share.recipientName,
+              updatedAt: share.sharedAt,
+            };
+          })
+          .filter(Boolean)
+          .map(normalizeBrowseItem)
+          .filter((item: any) => {
+            if (!q) return true;
+            return pickName(item.name, "")
+              .toLowerCase()
+              .includes(q.toLowerCase());
+          });
+        setItems(fetched);
+        setTotalCount(Number(res?.count ?? fetched.length));
+      } else if (activeSection === "sharedWithMe") {
+        // Items other users have shared with the current user (browsable folders)
+        const res = await getMyCollaborationsSubFolders(currentFolderId, {
+          skip,
+          take: limit,
+          q,
+        });
+        const fetched = Array.isArray(res?.items) ? res.items : [];
+        setItems(fetched.map(normalizeBrowseItem));
+        setTotalCount(Number(res?.count ?? fetched.length));
+      }
+    } catch (err: any) {
+      console.error("Failed to load DMS contents:", err);
+      setError(
+        err?.message ?? "Failed to load files from DMS. Please try again.",
+      );
+      setItems([]);
+      setTotalCount(0);
+    } finally {
+      setLoading(false);
+    }
+  }, [activeSection, currentFolderId, page, debouncedSearch]);
+
+  useEffect(() => {
+    if (isOpen) loadContents();
+  }, [isOpen, loadContents]);
+
+  // ── Folder navigation ─────────────────────────────────────────────────────
+  const currentSection = SECTIONS.find((s) => s.key === activeSection)!;
+
+  const handleFolderClick = (folder: any) => {
+    if (!currentSection.navigable) return;
+    setCurrentFolderId(folder.id);
+    setBreadcrumbs((prev) => [
+      ...prev,
+      { id: folder.id, name: pickName(folder.name, "Untitled Folder") },
+    ]);
+    setPage(1);
+    setSearchQuery("");
+    setDebouncedSearch("");
+  };
+
+  const handleBreadcrumbClick = (node: BreadcrumbNode, index: number) => {
+    setCurrentFolderId(node.id);
+    setBreadcrumbs((prev) => prev.slice(0, index + 1));
+    setPage(1);
+    setSearchQuery("");
+    setDebouncedSearch("");
+  };
+
+  // ── Document selection ────────────────────────────────────────────────────
+  const handleDocClick = (doc: any) => {
+    setSelectedDocs((prev) => {
+      const next = new Map(prev);
+      if (next.has(doc.id)) next.delete(doc.id);
+      else next.set(doc.id, doc);
+      return next;
+    });
+  };
+
+  const documentsOnPage = useMemo(
+    () => items.filter((x) => x?.type === "document"),
+    [items],
+  );
+  const foldersOnPage = useMemo(
+    () => items.filter((x) => x?.type === "folder"),
+    [items],
+  );
+  const displayGroups = useMemo(
+    () =>
+      [
+        { label: "Folders", items: foldersOnPage },
+        { label: "Documents", items: documentsOnPage },
+      ].filter((group) => group.items.length > 0),
+    [foldersOnPage, documentsOnPage],
+  );
+  const isAllSelected = useMemo(
+    () =>
+      documentsOnPage.length > 0 &&
+      documentsOnPage.every((doc) => selectedDocs.has(doc.id)),
+    [documentsOnPage, selectedDocs],
+  );
+  const handleSelectAllToggle = () => {
+    setSelectedDocs((prev) => {
+      const next = new Map(prev);
+      if (isAllSelected) documentsOnPage.forEach((doc) => next.delete(doc.id));
+      else documentsOnPage.forEach((doc) => next.set(doc.id, doc));
+      return next;
+    });
+  };
+
+  // ── Attach action ─────────────────────────────────────────────────────────
+  const handleAttach = () => {
+    onAttach(Array.from(selectedDocs.values()));
+    onClose();
+  };
+
+  const totalPages = Math.ceil(totalCount / limit);
+  const selectedCount = selectedDocs.size;
+
+  // ── Document icon helper ──────────────────────────────────────────────────
+  const renderDocIcon = (item: any) => {
+    const { kind } = detectFileKind(item);
+    const cls = "h-8 w-8";
+    switch (kind) {
+      case "word":
+        return <ODIconWord className={cls} />;
+      case "sheet":
+        return <ODIconExcel className={cls} />;
+      case "slide":
+        return <ODIconPpt className={cls} />;
+      case "pdf":
+        return <ODIconPdf className={cls} />;
+      case "image":
+        return <ODIconImage className={cls} />;
+      case "video":
+        return <ODIconVideo className={cls} />;
+      default:
+        return <ODIconFile className={cls} />;
+    }
+  };
+
+  // ─────────────────────────────────────────────────────────────────────────
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="h-[90vh] max-h-[780px] w-[calc(100vw-2rem)] max-w-[calc(100vw-2rem)] flex flex-col gap-0 overflow-hidden rounded-2xl border bg-white p-0 shadow-2xl dark:border-gray-800 dark:bg-gray-900 sm:w-[92vw] sm:max-w-6xl">
+        {/* ── Header ─────────────────────────────────────────────────────── */}
+        <DialogHeader className="px-6 py-4 border-b dark:border-gray-800 shrink-0">
+          <DialogTitle className="text-xl font-bold flex items-center gap-2 dark:text-white">
+            <FolderOpen className="h-5 w-5 text-primary-500" />
+            {t("dms.picker.title") || "Select from DMS"}
+          </DialogTitle>
+        </DialogHeader>
+
+        {/* ── Body: sidebar + main ────────────────────────────────────────── */}
+        <div className="flex flex-1 overflow-hidden">
+          {/* ── Left Sidebar ─────────────────────────────────────────────── */}
+          <aside className="w-52 shrink-0 border-r dark:border-gray-800 bg-gray-50 dark:bg-gray-900 flex flex-col py-3 gap-0.5 overflow-y-auto">
+            {SECTIONS.map((sec) => (
+              <button
+                key={sec.key}
+                onClick={() => handleSectionChange(sec.key)}
+                className={`flex items-center gap-3 px-4 py-2.5 text-sm font-medium rounded-lg mx-2 transition-colors text-left ${
+                  activeSection === sec.key
+                    ? "bg-primary-100 dark:bg-primary-900/40 text-primary-700 dark:text-primary-300"
+                    : "text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800"
+                }`}
+              >
+                <span
+                  className={
+                    activeSection === sec.key
+                      ? "text-primary-600 dark:text-primary-400"
+                      : "text-gray-400 dark:text-gray-500"
+                  }
+                >
+                  {sec.icon}
+                </span>
+                {sec.label}
+              </button>
+            ))}
+          </aside>
+
+          {/* ── Main Panel ───────────────────────────────────────────────── */}
+          <div className="flex flex-col flex-1 overflow-hidden">
+            {/* Search + breadcrumbs toolbar */}
+            <div className="px-5 py-3 border-b dark:border-gray-800 shrink-0 space-y-2">
+              {/* Breadcrumbs (only for navigable sections) */}
+              {currentSection.navigable && (
+                <div className="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-400 flex-wrap">
+                  {breadcrumbs.map((node, idx) => (
+                    <React.Fragment key={`${node.id ?? "root"}-${idx}`}>
+                      {idx > 0 && (
+                        <ChevronRight className="h-3.5 w-3.5 text-gray-300 dark:text-gray-600 shrink-0" />
+                      )}
+                      <button
+                        onClick={() => handleBreadcrumbClick(node, idx)}
+                        className={`hover:underline truncate max-w-[160px] ${
+                          idx === breadcrumbs.length - 1
+                            ? "text-gray-900 dark:text-white font-semibold"
+                            : "hover:text-primary-600 dark:hover:text-primary-400"
+                        }`}
+                      >
+                        {node.name}
+                      </button>
+                    </React.Fragment>
+                  ))}
+                </div>
+              )}
+
+              {/* Search box */}
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+                <Input
+                  placeholder={t("dms.search") || "Search…"}
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-9 h-9 text-sm bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700"
+                />
+              </div>
+            </div>
+
+            {/* File table */}
+            <div className="flex-1 overflow-y-auto">
+              {loading ? (
+                <div className="flex items-center justify-center h-full gap-2 text-gray-400 dark:text-gray-500">
+                  <Loader2 className="h-6 w-6 animate-spin" />
+                  <span className="text-sm">
+                    {t("dms.loading") || "Loading…"}
+                  </span>
+                </div>
+              ) : error ? (
+                <div className="flex flex-col items-center justify-center h-full gap-2 py-16 text-red-500">
+                  <AlertCircle className="h-10 w-10 text-red-300" />
+                  <p className="text-sm font-medium">{error}</p>
+                  <Button variant="outline" size="sm" onClick={loadContents}>
+                    {t("dms.retry") || "Retry"}
+                  </Button>
+                </div>
+              ) : items.length === 0 ? (
+                <div className="flex flex-col items-center justify-center h-full gap-2 py-16 text-gray-400 dark:text-gray-500">
+                  <XCircle className="h-10 w-10 text-gray-300 dark:text-gray-700" />
+                  <p className="text-sm font-medium">
+                    {debouncedSearch
+                      ? t("dms.noSearchResults") || "No files match your search"
+                      : t("dms.emptyFolder") || "Nothing to show here"}
+                  </p>
+                </div>
+              ) : (
+                <table className="w-full text-left border-collapse text-sm">
+                  <thead className="sticky top-0 bg-white dark:bg-gray-900 border-b dark:border-gray-800 z-10">
+                    <tr className="text-gray-500 dark:text-gray-400 font-semibold select-none">
+                      <th className="p-3 w-10 text-center">
+                        {documentsOnPage.length > 0 && (
+                          <input
+                            type="checkbox"
+                            checked={isAllSelected}
+                            onChange={handleSelectAllToggle}
+                            className="rounded border-gray-300 text-primary-600 focus:ring-primary-500 cursor-pointer h-4 w-4"
+                          />
+                        )}
+                      </th>
+                      <th className="p-3">{t("dms.name") || "Name"}</th>
+                      <th className="p-3 hidden md:table-cell">
+                        {t("dms.owner") || "Owner"}
+                      </th>
+                      <th className="p-3 hidden sm:table-cell">
+                        {t("dms.size") || "Size"}
+                      </th>
+                      <th className="p-3 hidden lg:table-cell">
+                        {t("dms.date") || "Last Modified"}
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-gray-100 dark:divide-gray-800 bg-white dark:bg-gray-900">
+                    {displayGroups.flatMap((group) => [
+                      <tr
+                        key={`group-${group.label}`}
+                        className="bg-gray-50 dark:bg-gray-800/60"
+                      >
+                        <td
+                          colSpan={5}
+                          className="px-3 py-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400"
+                        >
+                          {group.label}
+                        </td>
+                      </tr>,
+                      ...group.items.map((item) => {
+                        const isFolder = item.type === "folder";
+                        const isSelected = selectedDocs.has(item.id);
+                        const nameStr = pickName(
+                          item.name,
+                          isFolder ? "Untitled Folder" : "Untitled Document",
+                        );
+                        const ownerName =
+                          resolveOwnerName(item.ownerName) || "N/A";
+                        const sizeStr = isFolder
+                          ? "--"
+                          : formatBytes(item.fileInfo?.size ?? item.size ?? 0);
+                        const dateStr = item.updatedAt
+                          ? new Date(item.updatedAt).toLocaleDateString()
+                          : "--";
+
+                        return (
+                          <tr
+                            key={item.id}
+                            onClick={() => !isFolder && handleDocClick(item)}
+                            onDoubleClick={() =>
+                              isFolder && handleFolderClick(item)
+                            }
+                            className={`hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors select-none cursor-pointer ${
+                              isSelected
+                                ? "bg-primary-50/50 dark:bg-primary-950/20"
+                                : ""
+                            }`}
+                          >
+                            {/* Checkbox */}
+                            <td
+                              className="p-3 text-center"
+                              onClick={(e) => e.stopPropagation()}
+                            >
+                              {!isFolder ? (
+                                <input
+                                  type="checkbox"
+                                  checked={isSelected}
+                                  onChange={() => handleDocClick(item)}
+                                  className="rounded border-gray-300 text-primary-600 focus:ring-primary-500 cursor-pointer h-4 w-4"
+                                />
+                              ) : (
+                                <div className="h-4 w-4" />
+                              )}
+                            </td>
+
+                            {/* Icon + Name */}
+                            <td className="p-3 font-medium flex items-center gap-3 truncate max-w-xs sm:max-w-md">
+                              <div className="shrink-0 flex items-center justify-center">
+                                {isFolder ? (
+                                  <ODWinFolderSvg className="h-8 w-8 text-amber-400 dark:text-amber-500" />
+                                ) : (
+                                  renderDocIcon(item)
+                                )}
+                              </div>
+                              <span
+                                className={`truncate text-gray-800 dark:text-gray-200 ${
+                                  isFolder
+                                    ? "hover:underline font-semibold"
+                                    : ""
+                                }`}
+                                onClick={(e) => {
+                                  if (isFolder) {
+                                    e.stopPropagation();
+                                    handleFolderClick(item);
+                                  }
+                                }}
+                              >
+                                {nameStr}
+                              </span>
+                              {isSelected && (
+                                <CheckCircle2 className="h-4 w-4 text-primary-500 shrink-0 ml-auto" />
+                              )}
+                            </td>
+
+                            {/* Owner */}
+                            <td className="p-3 text-gray-500 dark:text-gray-400 truncate hidden md:table-cell">
+                              {ownerName}
+                            </td>
+
+                            {/* Size */}
+                            <td className="p-3 text-gray-500 dark:text-gray-400 hidden sm:table-cell">
+                              {sizeStr}
+                            </td>
+
+                            {/* Date */}
+                            <td className="p-3 text-gray-500 dark:text-gray-400 hidden lg:table-cell">
+                              {dateStr}
+                            </td>
+                          </tr>
+                        );
+                      }),
+                    ])}
+                  </tbody>
+                </table>
+              )}
+            </div>
+
+            {/* Pagination */}
+            {totalPages > 1 && (
+              <div className="px-5 py-3 border-t dark:border-gray-800 flex items-center justify-between shrink-0 bg-white dark:bg-gray-900">
+                <span className="text-xs text-gray-500 dark:text-gray-400">
+                  Page {page} of {totalPages} &bull; {totalCount} item
+                  {totalCount !== 1 ? "s" : ""}
+                </span>
+                <div className="flex items-center gap-1">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setPage((p) => Math.max(1, p - 1))}
+                    disabled={page <= 1}
+                  >
+                    <ChevronLeft className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+                    disabled={page >= totalPages}
+                  >
+                    <ChevronRightIcon className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* ── Footer ─────────────────────────────────────────────────────── */}
+        <DialogFooter className="px-6 py-4 border-t dark:border-gray-800 flex items-center justify-between shrink-0 bg-white dark:bg-gray-900">
+          <span className="text-sm text-gray-500 dark:text-gray-400">
+            {selectedCount > 0
+              ? `${selectedCount} file${selectedCount !== 1 ? "s" : ""} selected`
+              : t("dms.picker.hint") || "Click a file to select it"}
+          </span>
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={onClose}>
+              {t("common.cancel") || "Cancel"}
+            </Button>
+            <Button
+              onClick={handleAttach}
+              disabled={selectedCount === 0}
+              className="gap-1.5"
+            >
+              <CheckCircle2 className="h-4 w-4" />
+              {t("dms.picker.attach") || "Attach"}{" "}
+              {selectedCount > 0 && `(${selectedCount})`}
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/fileKeyGenerator.ts b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/fileKeyGenerator.ts
new file mode 100644
index 000000000..f1ae62453
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/fileKeyGenerator.ts
@@ -0,0 +1,3 @@
+export const generateFileKey = (file: File): string => {
+  return `${file.name}-${file.size}-${file.lastModified}`;
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/formSchema.ts b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/formSchema.ts
new file mode 100644
index 000000000..ab7514104
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/formSchema.ts
@@ -0,0 +1,331 @@
+import { TreeViewItem } from "@/shared/common/ui/treeSelect";
+
+import { z } from "zod";
+import { t } from "i18next";
+
+const EXTERNAL_LIKE_RECORD_TYPE_KEYS = ["external", "bank"];
+
+const isExternalLikeRecordType = (recordType?: string) =>
+  EXTERNAL_LIKE_RECORD_TYPE_KEYS.includes(
+    String(recordType || "").toLowerCase(),
+  );
+
+export const fileInfoSchema = z.object({
+  bucket: z.string().min(1),
+  fileName: z.string().min(1),
+  contentType: z.string().min(1),
+  originalname: z.string().min(1),
+  size: z.number().nonnegative(),
+});
+
+export const attachmentNameSchema = z.object({
+  am: z.string().min(1),
+  en: z.string().min(1),
+});
+
+export const attachmentSchema = z.object({
+  fileInfo: fileInfoSchema,
+  name: attachmentNameSchema,
+});
+
+export const TreeViewItemSchema: z.ZodType<TreeViewItem> = z.lazy(() =>
+  z.object({
+    id: z.string(),
+    name: z.object({
+      en: z.string(),
+      am: z.string(),
+    }),
+    hierarchyType: z.string(),
+    children: z.array(z.lazy(() => TreeViewItemSchema)).optional(),
+    checked: z.boolean().optional(),
+  }),
+);
+
+const ReceiverItemSchema = z.object({
+  unitId: z.string().optional(),
+  name: z
+    .union([
+      z.string(),
+      z.object({
+        am: z.string(),
+        en: z.string(),
+      }),
+    ])
+    .optional(),
+  type: z.enum(["unit", "non_smart"]),
+});
+
+const ReceiverGroupSchema = z.object({
+  prefix: z.string().optional(),
+  suffix: z.string().optional(),
+  receivers: z.array(ReceiverItemSchema),
+});
+
+const createLetterSchema = z
+  .object({
+    recordType: z.string().min(1, t("msg.recordTypeRequired")),
+    initiationType: z.string().min(1, t("msg.initiationTypeRequired")),
+    subject: z.string().min(1, t("msg.subjectRequired")),
+    referenceNumber: z.string().optional(),
+    preferredLanguage: z.string().min(1, t("msg.preferredLanguageRequired")),
+    prefix: z.string().optional(),
+    suffix: z.string().optional(),
+    body: z.string().min(1, t("msg.bodyRequired")),
+    ccPrefix: z.string().optional(),
+    ccSuffix: z.string().optional(),
+    ReceiversList: z.array(ReceiverGroupSchema).optional(),
+    ReceiverList: z.array(ReceiverGroupSchema).optional(),
+    nonSmartReceiversList: z.array(ReceiverGroupSchema).optional(),
+    ccList: z.array(ReceiverGroupSchema).optional(),
+    forYourReferenceList: z.array(ReceiverGroupSchema).optional(),
+    groupedItems: z
+      .array(
+        z.object({
+          prefix: z.string().optional(),
+          suffix: z.string().optional(),
+          values: z.array(z.string()),
+        }),
+      )
+      .optional(),
+    groupedCCItems: z
+      .array(
+        z.object({
+          prefix: z.string().optional(),
+          suffix: z.string().optional(),
+          values: z.array(z.string()),
+        }),
+      )
+      .optional(),
+    groupedFYRItems: z
+      .array(
+        z.object({
+          prefix: z.string().optional(),
+          suffix: z.string().optional(),
+          values: z.array(z.string()),
+        }),
+      )
+      .optional(),
+    groupedTreeItems: z
+      .array(
+        z.object({
+          prefix: z.string().optional(),
+          suffix: z.string().optional(),
+          values: z.array(TreeViewItemSchema),
+        }),
+      )
+      .optional(),
+    groupedCCTreeItems: z
+      .array(
+        z.object({
+          prefix: z.string().optional(),
+          suffix: z.string().optional(),
+          values: z.array(TreeViewItemSchema),
+        }),
+      )
+      .optional(),
+    groupedFYRTreeItems: z
+      .array(
+        z.object({
+          prefix: z.string().optional(),
+          suffix: z.string().optional(),
+          values: z.array(TreeViewItemSchema),
+        }),
+      )
+      .optional(),
+    nonSmartOfficeReceiverCCs: z.array(z.string()).optional(),
+    nonSmartOfficeReceivers: z.array(z.string()).optional(),
+    internalCC: z.array(z.string()).optional(),
+    forYourReference: z.array(z.string()).optional(),
+    externalCC: z.array(TreeViewItemSchema).optional(),
+    receivingUnitIds: z.array(TreeViewItemSchema).optional(),
+    forYourReferenceUnitIds: z.array(TreeViewItemSchema).optional(),
+    toPositions: z.array(z.string()),
+    recordTagIds: z.array(z.string()),
+    toEmployees: z.array(z.string()),
+    ccEmployees: z.array(z.string()).optional(),
+    collaborators: z.array(z.string()).optional(),
+    sincerelyText: z.string().trim().min(1, t("msg.sincerelyTextRequired")),
+    recordTemplateId: z.string().optional(),
+    headerId: z.string().optional().nullable(),
+    footerId: z.string().optional().nullable(),
+    mode: z.union([z.literal("add"), z.literal("edit")]),
+    personalRemark: z.string().optional(),
+    isWithTeamSignature: z.boolean(),
+    skipOneLevel: z.boolean().optional(),
+    letterName: z.string().min(1, t("msg.letterNameRequired")),
+    initiatedAs: z.string().min(1, "error"),
+    inReplyToIncomingInstanceId: z.string().optional(),
+    positionPrefixId: z.string().optional(),
+    attachments: z.array(attachmentSchema).optional(),
+  })
+  .superRefine((data, ctx) => {
+    if (isExternalLikeRecordType(data.recordType)) {
+      const hasReceiversList = Boolean(
+        data.ReceiversList?.some((group) => group.receivers.length > 0),
+      );
+      const hasGroupedReceivers = Boolean(
+        data.groupedItems?.some((group) => group.values.length > 0),
+      );
+      const hasGroupedTreeReceivers = Boolean(
+        data.groupedTreeItems?.some((group) => group.values.length > 0),
+      );
+      if (
+        !data.receivingUnitIds?.length &&
+        !data.nonSmartOfficeReceivers?.length &&
+        !hasReceiversList &&
+        !hasGroupedReceivers &&
+        !hasGroupedTreeReceivers
+      ) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: t("msg.receivingUnitRequired"),
+          path: ["receivingUnitIds"],
+        });
+      }
+    }
+
+    const requiresInternalRecipients = [
+      "internal",
+      "internal_memo",
+      "direct",
+    ].includes(data.recordType);
+
+    if (requiresInternalRecipients) {
+      const hasInternalRecipients =
+        Boolean(data.toPositions?.length) || Boolean(data.toEmployees?.length);
+
+      if (!hasInternalRecipients) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: t(
+            "msg.atLeastOneDepartmentOrUserRequired",
+            "At least one department or user is required",
+          ),
+          path: ["toPositions"],
+        });
+      }
+    }
+
+    if (data.initiationType === "team" && !data.collaborators?.length) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: t(
+          "msg.collaboratorsRequired",
+          "At least one collaborator is required",
+        ),
+        path: ["collaborators"],
+      });
+    }
+  });
+
+export type FormDataType = z.infer<typeof createLetterSchema>;
+
+export interface AddOrEditRecordState extends FormDataType {
+  mode: "add" | "edit";
+  recordId?: string;
+}
+export type CreateOrEditLetter = z.infer<typeof createLetterSchema>;
+
+/** Map API / legacy language strings to the form's "en" | "am" values. */
+export const normalizePreferredLanguage = (
+  value?: string | null,
+  fallback: "en" | "am" = "am",
+): "en" | "am" => {
+  if (!value) return fallback;
+  const normalized = value.trim().toLowerCase();
+  if (normalized === "en" || normalized === "am") return normalized;
+  if (normalized.startsWith("en")) return "en";
+  if (normalized.startsWith("am")) return "am";
+  return fallback;
+};
+
+const defaultCreateLetterValues: AddOrEditRecordState = {
+  recordType: "internal",
+  initiationType: "self",
+  subject: "",
+  preferredLanguage: "am",
+  prefix: "",
+  suffix: "",
+  body: "",
+  ccPrefix: "",
+  ccSuffix: "",
+  ReceiversList: [{ prefix: "", suffix: "", receivers: [] }],
+  ReceiverList: [{ prefix: "", suffix: "", receivers: [] }],
+  nonSmartReceiversList: [{ prefix: "", suffix: "", receivers: [] }],
+  ccList: [{ prefix: "", suffix: "", receivers: [] }],
+  forYourReferenceList: [{ prefix: "", suffix: "", receivers: [] }],
+  groupedItems: [{ prefix: "", suffix: "", values: [] }],
+  groupedCCItems: [{ prefix: "", suffix: "", values: [] }],
+  groupedTreeItems: [{ prefix: "", suffix: "", values: [] }],
+  groupedCCTreeItems: [{ prefix: "", suffix: "", values: [] }],
+  nonSmartOfficeReceivers: [],
+  nonSmartOfficeReceiverCCs: [],
+  internalCC: [],
+  forYourReference: [],
+  externalCC: [],
+  forYourReferenceUnitIds: [],
+  recordTagIds: [],
+  toPositions: [],
+  toEmployees: [],
+  ccEmployees: [],
+  collaborators: [],
+  sincerelyText: "ከሠላምታ ጋር",
+  mode: "add",
+  recordTemplateId: undefined,
+  headerId: "",
+  footerId: "",
+  personalRemark: "",
+  isWithTeamSignature: false,
+  skipOneLevel: false,
+  letterName: "",
+  initiatedAs: "self",
+  inReplyToIncomingInstanceId: "",
+  positionPrefixId: "",
+  referenceNumber: "",
+  // sincerelyText:"Sincerly"
+};
+const DEFAULT_VALUES: CreateOrEditLetter = {
+  recordType: "internal",
+  initiationType: "self",
+  subject: "",
+  preferredLanguage: "am",
+  prefix: "",
+  suffix: "",
+  body: "",
+  ccPrefix: "",
+  ccSuffix: "",
+  ReceiversList: [{ prefix: "", suffix: "", receivers: [] }],
+  ReceiverList: [{ prefix: "", suffix: "", receivers: [] }],
+  nonSmartReceiversList: [{ prefix: "", suffix: "", receivers: [] }],
+  ccList: [{ prefix: "", suffix: "", receivers: [] }],
+  forYourReferenceList: [{ prefix: "", suffix: "", receivers: [] }],
+  groupedItems: [{ prefix: "", suffix: "", values: [] }],
+  groupedCCItems: [{ prefix: "", suffix: "", values: [] }],
+  groupedTreeItems: [{ prefix: "", suffix: "", values: [] }],
+  groupedCCTreeItems: [{ prefix: "", suffix: "", values: [] }],
+  nonSmartOfficeReceivers: [],
+  nonSmartOfficeReceiverCCs: [],
+  internalCC: [],
+  forYourReference: [],
+  externalCC: [],
+  forYourReferenceUnitIds: [],
+  recordTagIds: [],
+  toPositions: [],
+  toEmployees: [],
+  ccEmployees: [],
+  collaborators: [],
+  sincerelyText: "ከሠላምታ ጋር",
+  mode: "add",
+  recordTemplateId: undefined,
+  personalRemark: "",
+  isWithTeamSignature: false,
+  skipOneLevel: false,
+  footerId: "",
+  headerId: "",
+  letterName: "",
+  initiatedAs: "self",
+  inReplyToIncomingInstanceId: "",
+  positionPrefixId: "",
+};
+
+export { createLetterSchema, defaultCreateLetterValues };
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/fullPageSpinner.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/fullPageSpinner.tsx
new file mode 100644
index 000000000..7d69fe221
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/fullPageSpinner.tsx
@@ -0,0 +1,9 @@
+import { Spinner } from "@/shared/common/ui/sppiner";
+
+const FullPageSpinner = () => (
+  <div className="w-full h-[80vh] flex items-center justify-center">
+    <Spinner size="large" className="text-primary" />
+  </div>
+);
+
+export default FullPageSpinner;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/pdfViewer.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/pdfViewer.tsx
new file mode 100644
index 000000000..89eb2664b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/pdfViewer.tsx
@@ -0,0 +1,22 @@
+import { Worker, Viewer } from "@react-pdf-viewer/core";
+import { defaultLayoutPlugin } from "@react-pdf-viewer/default-layout";
+import { zoomPlugin } from "@react-pdf-viewer/zoom";
+import "@react-pdf-viewer/core/lib/styles/index.css";
+import "@react-pdf-viewer/default-layout/lib/styles/index.css";
+
+const MyPdfViewer = ({ pdfUrl }: { pdfUrl: string }) => {
+  const defaultLayoutPluginInstance = defaultLayoutPlugin();
+  const zoomPluginInstance = zoomPlugin();
+  return (
+    <div style={{ height: "800px" }}>
+      <Worker workerUrl="https://unpkg.com/pdfjs-dist@3.11.174/build/pdf.worker.min.js">
+        <Viewer
+          fileUrl={pdfUrl}
+          plugins={[defaultLayoutPluginInstance, zoomPluginInstance]}
+        />
+      </Worker>
+    </div>
+  );
+};
+
+export default MyPdfViewer;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/recordForm.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/recordForm.tsx
new file mode 100644
index 000000000..69a01d746
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/recordForm.tsx
@@ -0,0 +1,4010 @@
+"use client";
+
+import type React from "react";
+
+import { useCallback, useEffect, useMemo, useState, useRef } from "react";
+import { useFieldArray, useForm, useWatch } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { useLocation, useNavigate } from "react-router-dom";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import {
+  ChevronLeft,
+  Eye,
+  MessageSquareText,
+  Upload,
+  Cloud,
+} from "lucide-react";
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/shared/common/ui/form";
+import { Input } from "@/shared/common/ui/input";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import { Button } from "@/shared/common/ui/button";
+import { Switch } from "@/shared/common/ui/switch";
+import { Sheet, SheetContent, SheetTitle } from "@/shared/common/ui/sheet";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import { Badge } from "@/shared/common/ui/badge";
+
+import {
+  type CreateOrEditLetter,
+  createLetterSchema,
+  defaultCreateLetterValues,
+  normalizePreferredLanguage,
+} from "./formSchema";
+import {
+  useCanJumpOnStepUp,
+  useInitiationTypeOptions,
+} from "@/record-management/components/hooks/useUserRecords";
+import useSettings from "@/record-management/components/hooks/useSettings";
+import useTemplate, {
+  type LetterTemplateDto,
+} from "@/record-management/components/hooks/useTemplate";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { useUnitConfiguration } from "@/shared/hooks/useUnitConfiguration";
+import { usePrefixSuffix } from "@/shared/hooks/usePrefixSuffix";
+import { useHeaderFooterPresigned } from "../../hooks/useHeaderFooterPresigned";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useRecordPreview } from "../../hooks/useRecordPreview";
+
+import {
+  CustomSelect,
+  FormAddableList,
+  FormMultiSelectField,
+  FormSelectField,
+  FormTreeSelectField,
+} from "@/shared/common/form/fields/FormFields";
+import FullPageSpinner from "./fullPageSpinner";
+import RichTextEditor from "@/record-management/common/RichTextEditor";
+import { ReusableFileUploader } from "@/shared/common/ui/fileUploader/reusableFileUploader";
+import RecordPreviewPage from "@/record-management/pages/RecordPreviewPage";
+import { DmsFilePickerModal } from "./DmsFilePickerModal";
+import { DmsAttachmentItem } from "./DmsAttachmentItem";
+import CollaborationCommentsDialog from "@/record-management/components/collaborations/CollaborationCommentsDialog";
+
+import type { KeyValue } from "@/record-management/types/recordSelectTypes";
+import type { EmployeeWithUnitDto } from "@/user-management/dto/employees/employees";
+import type { OrganizationsPositions } from "@/record-management/services/api/departmentService";
+import type { TreeViewItem } from "@/shared/common/ui/treeSelect";
+import { getLeafCheckedItems, updateCheckState } from "./treeUtils";
+import { SingleSelect } from "@/shared/common/ui/single-select";
+import { usePermissions } from "@/shared/context/PermissionContext";
+import { useUserDetail } from "../../hooks/useUserDetail";
+import { MeDto } from "@/shared/dto/user/meDto";
+import { useTenantConfig } from "@/layout/components/TenantConfig";
+import { config } from "zod/v4/core";
+export type RecordFormIntent = "draft" | "forward" | "approve" | "direct";
+
+const DISABLED_DIRECT_HEADER_FOOTER_VALUE = "__disabled__";
+const EXTERNAL_LIKE_RECORD_TYPE_KEYS = ["external", "bank"];
+
+const normalizeRecordTypeKey = (recordType?: string) =>
+  String(recordType || "").toLowerCase();
+
+const isExternalLikeRecordType = (recordType?: string) =>
+  EXTERNAL_LIKE_RECORD_TYPE_KEYS.includes(normalizeRecordTypeKey(recordType));
+
+type RecordFormProps = {
+  onSubmit: (
+    values: CreateOrEditLetter,
+    intent?: RecordFormIntent,
+  ) => void | Promise<void>;
+  files: File[];
+  treeOrganizationsOptions: TreeViewItem[];
+  ccTreeOrganizationsOptions: TreeViewItem[];
+  fyrTreeOrganizationsOptions: TreeViewItem[];
+  defaultValues?: CreateOrEditLetter | null;
+  fullApiResponse?: any;
+  recordId?: string;
+  isEditMode?: boolean;
+  isLoading?: boolean;
+  isLoadingRecord?: boolean;
+  setFiles?: (files: File[]) => void;
+  existingAttachmentComponent?: React.ReactNode;
+  dmsAttachments?: any[];
+  setDmsAttachments?: React.Dispatch<React.SetStateAction<any[]>>;
+};
+
+type PrefixSuffixOption = { id: string; name: { en: string; am: string } };
+type LocalizedName = { am: string; en: string };
+
+type ReceiverItem = {
+  unitId?: string;
+  name?: string | LocalizedName;
+  type: "unit" | "non_smart";
+};
+
+type ReceiverGroup = {
+  prefix?: string;
+  suffix?: string;
+  receivers: ReceiverItem[];
+};
+
+const createEmptyReceiverGroup = (): ReceiverGroup => ({
+  prefix: "",
+  suffix: "",
+  receivers: [],
+});
+
+const deepCloneTreeItems = (items: TreeViewItem[]): TreeViewItem[] =>
+  items.map((item) => ({
+    ...item,
+    checked: item.checked ?? false,
+    children: item.children ? deepCloneTreeItems(item.children) : [],
+  }));
+
+const syncCheckedState = (
+  items: TreeViewItem[],
+  selectedIds: Set<string>,
+): TreeViewItem[] =>
+  items.map((item) => {
+    const children = item.children
+      ? syncCheckedState(item.children, selectedIds)
+      : [];
+
+    if (children.length === 0) {
+      return {
+        ...item,
+        checked: selectedIds.has(item.id),
+        children,
+      };
+    }
+
+    const allChildrenChecked = children.every(
+      (child) => child.checked === true,
+    );
+    const someChildrenChecked = children.some(
+      (child) => child.checked === true || child.checked === "indeterminate",
+    );
+
+    return {
+      ...item,
+      checked: allChildrenChecked
+        ? true
+        : someChildrenChecked
+          ? "indeterminate"
+          : false,
+      children,
+    };
+  });
+
+const isUnitReceiver = (receiver: unknown): receiver is ReceiverItem =>
+  Boolean(
+    receiver &&
+    typeof receiver === "object" &&
+    (receiver as ReceiverItem).type === "unit" &&
+    (receiver as ReceiverItem).unitId,
+  );
+
+const isNonSmartReceiver = (receiver: unknown): receiver is ReceiverItem =>
+  Boolean(
+    receiver &&
+    typeof receiver === "object" &&
+    (receiver as ReceiverItem).type === "non_smart" &&
+    getReceiverNameText((receiver as ReceiverItem).name).trim(),
+  );
+
+const getReceiverNameText = (name?: string | LocalizedName): string => {
+  if (!name) return "";
+  if (typeof name === "string") return name;
+  return name.en || name.am || "";
+};
+
+const dedupeUnitReceivers = (receivers: ReceiverItem[]): ReceiverItem[] => {
+  const map = new Map<string, ReceiverItem>();
+  receivers.filter(isUnitReceiver).forEach((receiver) => {
+    if (!map.has(receiver.unitId!)) {
+      map.set(receiver.unitId!, {
+        unitId: receiver.unitId,
+        name: receiver.name,
+        type: "unit",
+      });
+    }
+  });
+  return Array.from(map.values());
+};
+
+const dedupeNonSmartReceivers = (receivers: ReceiverItem[]): ReceiverItem[] => {
+  const normalized = Array.from(
+    new Set(
+      receivers
+        .filter(isNonSmartReceiver)
+        .map((receiver) => getReceiverNameText(receiver.name).trim())
+        .filter(Boolean),
+    ),
+  );
+  return normalized.map((name) => ({
+    name,
+    type: "non_smart",
+  }));
+};
+
+const normalizeReceiverGroups = (
+  groups?: ReceiverGroup[] | null,
+): ReceiverGroup[] => {
+  const normalized =
+    groups?.map((group) => ({
+      prefix: group?.prefix ?? "",
+      suffix: group?.suffix ?? "",
+      receivers: [
+        ...dedupeUnitReceivers(
+          Array.isArray(group?.receivers) ? group.receivers : [],
+        ),
+        ...dedupeNonSmartReceivers(
+          Array.isArray(group?.receivers) ? group.receivers : [],
+        ),
+      ],
+    })) ?? [];
+
+  if (normalized.length === 0) {
+    return [createEmptyReceiverGroup()];
+  }
+
+  return normalized;
+};
+
+const hasReceiverGroupContent = (group: ReceiverGroup) =>
+  Boolean(group.prefix?.trim()) ||
+  Boolean(group.suffix?.trim()) ||
+  group.receivers.length > 0;
+
+const stripEmptyReceiverGroups = (groups?: ReceiverGroup[] | null) =>
+  (groups ?? []).filter(hasReceiverGroupContent);
+
+const findTreeItemById = (
+  items: TreeViewItem[],
+  id: string,
+): TreeViewItem | undefined => {
+  for (const item of items) {
+    if (item.id === id) {
+      return item;
+    }
+    if (item.children?.length) {
+      const found = findTreeItemById(item.children, id);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return undefined;
+};
+
+const receiverToTreeViewItem = (
+  receiver: ReceiverItem,
+  options: TreeViewItem[],
+): TreeViewItem | null => {
+  if (!isUnitReceiver(receiver)) {
+    return null;
+  }
+
+  const matched = findTreeItemById(options, receiver.unitId!);
+  if (matched) {
+    return {
+      id: matched.id,
+      name: matched.name,
+      hierarchyType: matched.hierarchyType,
+      checked: true,
+    };
+  }
+
+  const fallbackName =
+    getReceiverNameText(receiver.name) || receiver.unitId || "";
+  return {
+    id: receiver.unitId!,
+    name: {
+      en: fallbackName,
+      am: fallbackName,
+    },
+    hierarchyType: "unit",
+    checked: true,
+  };
+};
+
+const buildReceiverGroupsFromLegacy = ({
+  groupedTreeItems,
+  groupedItems,
+  prefix,
+  suffix,
+  fallbackUnits,
+  fallbackNames,
+}: {
+  groupedTreeItems?: {
+    prefix?: string;
+    suffix?: string;
+    values?: TreeViewItem[];
+  }[];
+  groupedItems?: { prefix?: string; suffix?: string; values?: string[] }[];
+  prefix?: string;
+  suffix?: string;
+  fallbackUnits?: TreeViewItem[];
+  fallbackNames?: string[];
+}): ReceiverGroup[] => {
+  const maxLength = Math.max(
+    groupedTreeItems?.length ?? 0,
+    groupedItems?.length ?? 0,
+  );
+  const groups: ReceiverGroup[] = [];
+
+  for (let index = 0; index < maxLength; index += 1) {
+    const treeGroup = groupedTreeItems?.[index];
+    const listGroup = groupedItems?.[index];
+    const unitReceivers =
+      treeGroup?.values?.map((unit) => ({
+        unitId: unit.id,
+        name: {
+          en: unit.name?.en || unit.name?.am || unit.id,
+          am: unit.name?.am || unit.name?.en || unit.id,
+        },
+        type: "unit" as const,
+      })) ?? [];
+    const nonSmartReceivers =
+      listGroup?.values?.map((name) => ({
+        name,
+        type: "non_smart" as const,
+      })) ?? [];
+
+    groups.push({
+      prefix: treeGroup?.prefix ?? listGroup?.prefix ?? prefix ?? "",
+      suffix: treeGroup?.suffix ?? listGroup?.suffix ?? suffix ?? "",
+      receivers: [...unitReceivers, ...nonSmartReceivers],
+    });
+  }
+
+  if (groups.length > 0) {
+    return normalizeReceiverGroups(groups);
+  }
+
+  const fallbackReceivers: ReceiverItem[] = [
+    ...((fallbackUnits ?? []).map((unit) => ({
+      unitId: unit.id,
+      name: {
+        en: unit.name?.en || unit.name?.am || unit.id,
+        am: unit.name?.am || unit.name?.en || unit.id,
+      },
+      type: "unit" as const,
+    })) || []),
+    ...((fallbackNames ?? []).map((name) => ({
+      name,
+      type: "non_smart" as const,
+    })) || []),
+  ];
+
+  return normalizeReceiverGroups([
+    {
+      prefix: prefix ?? "",
+      suffix: suffix ?? "",
+      receivers: fallbackReceivers,
+    },
+  ]);
+};
+
+const buildLegacyGroupedValues = (
+  groups: ReceiverGroup[],
+  options: TreeViewItem[],
+) => {
+  const groupedTreeItems = groups.map((group) => ({
+    prefix: group.prefix ?? "",
+    suffix: group.suffix ?? "",
+    values: group.receivers
+      .filter(isUnitReceiver)
+      .map((receiver) => receiverToTreeViewItem(receiver, options))
+      .filter((item): item is TreeViewItem => Boolean(item)),
+  }));
+
+  const groupedItems = groups.map((group) => ({
+    prefix: group.prefix ?? "",
+    suffix: group.suffix ?? "",
+    values: group.receivers
+      .filter(isNonSmartReceiver)
+      .map((receiver) => getReceiverNameText(receiver.name).trim()),
+  }));
+
+  return {
+    groupedTreeItems,
+    groupedItems,
+    units: groupedTreeItems.flatMap((group) => group.values),
+    names: groupedItems.flatMap((group) => group.values),
+  };
+};
+
+const resolveLocalizedPrefixSuffixValue = (
+  value: string | undefined,
+  options: PrefixSuffixOption[],
+  language: "am" | "en",
+): string => {
+  if (!value) return "";
+
+  const matched = options.find((option) => {
+    const english = option.name?.en ?? "";
+    const amharic = option.name?.am ?? "";
+    return value === option.id || value === english || value === amharic;
+  });
+
+  if (!matched) {
+    return value;
+  }
+
+  return matched.name?.[language] || matched.name?.en || matched.name?.am || "";
+};
+
+const localizeReceiverGroups = (
+  groups: ReceiverGroup[],
+  {
+    prefixOptions,
+    suffixOptions,
+    language,
+  }: {
+    prefixOptions: PrefixSuffixOption[];
+    suffixOptions: PrefixSuffixOption[];
+    language: "am" | "en";
+  },
+): ReceiverGroup[] =>
+  groups.map((group) => ({
+    ...group,
+    prefix: resolveLocalizedPrefixSuffixValue(
+      group.prefix,
+      prefixOptions,
+      language,
+    ),
+    suffix: resolveLocalizedPrefixSuffixValue(
+      group.suffix,
+      suffixOptions,
+      language,
+    ),
+  }));
+
+type GroupedExternalReceiverBlockProps = {
+  form: any;
+  title: string;
+  fieldArrayName: "ReceiversList" | "ccList" | "forYourReferenceList";
+  prefixOptions: PrefixSuffixOption[];
+  suffixOptions: PrefixSuffixOption[];
+  treeLabel: string;
+  addableLabel: string;
+  addablePlaceholder: string;
+  initialOptions: TreeViewItem[];
+  excludedIds: { id: string }[];
+  localizedName: (
+    name?:
+      | {
+          am: string;
+          en: string;
+        }
+      | undefined,
+  ) => string;
+  prefixLabel: string;
+  suffixLabel: string;
+  prefixPlaceholder: string;
+  suffixPlaceholder: string;
+  addLabel: string;
+  removeLabel: string;
+};
+
+const GroupedExternalReceiverBlock = ({
+  form,
+  title,
+  fieldArrayName,
+  prefixOptions,
+  suffixOptions,
+  treeLabel,
+  addableLabel,
+  addablePlaceholder,
+  initialOptions,
+  excludedIds,
+  localizedName,
+  prefixLabel,
+  suffixLabel,
+  prefixPlaceholder,
+  suffixPlaceholder,
+  addLabel,
+  removeLabel,
+}: GroupedExternalReceiverBlockProps) => {
+  const { fields, append, remove } = useFieldArray({
+    control: form.control,
+    name: fieldArrayName,
+  });
+  const watchedGroups = useWatch({
+    control: form.control,
+    name: fieldArrayName,
+    defaultValue: [],
+  });
+  const [localOptionsMap, setLocalOptionsMap] = useState<
+    Record<string, TreeViewItem[]>
+  >({});
+
+  // For each group index, the set of leaf unit IDs already picked in any
+  // OTHER group within this same section. Used to hide already-selected
+  // organizations from the "+ Add" flow so the user can't pick the same
+  // org twice across groups.
+  const otherGroupSelectedIdsByIndex = useMemo(() => {
+    const perGroup: Set<string>[] = (watchedGroups ?? []).map((group: any) => {
+      const ids = new Set<string>();
+      (group?.receivers ?? []).forEach((r: ReceiverItem) => {
+        if (r?.type === "unit" && r?.unitId) ids.add(r.unitId);
+      });
+      return ids;
+    });
+    return perGroup.map((_, i) => {
+      const union = new Set<string>();
+      perGroup.forEach((set, j) => {
+        if (j !== i) set.forEach((id) => union.add(id));
+      });
+      return union;
+    });
+  }, [watchedGroups]);
+
+  useEffect(() => {
+    if (fields.length === 0) {
+      append(createEmptyReceiverGroup());
+    }
+  }, [append, fields.length]);
+
+  useEffect(() => {
+    setLocalOptionsMap((prev) => {
+      const next: Record<string, TreeViewItem[]> = { ...prev };
+      let changed = false;
+
+      fields.forEach((field) => {
+        if (!next[field.id]) {
+          next[field.id] = deepCloneTreeItems(initialOptions);
+          changed = true;
+        }
+      });
+
+      Object.keys(next).forEach((id) => {
+        if (!fields.some((field) => field.id === id)) {
+          delete next[id];
+          changed = true;
+        }
+      });
+
+      return changed ? next : prev;
+    });
+  }, [fields, initialOptions]);
+
+  useEffect(() => {
+    setLocalOptionsMap((prev) => {
+      const next: Record<string, TreeViewItem[]> = { ...prev };
+      let changed = false;
+
+      fields.forEach((field, index) => {
+        const selectedIds: Set<string> = new Set<string>(
+          (watchedGroups[index]?.receivers || [])
+            .filter(
+              (receiver: ReceiverItem) =>
+                receiver?.type === "unit" && Boolean(receiver.unitId),
+            )
+            .map((receiver: ReceiverItem) => receiver.unitId as string),
+        );
+        const baseOptions =
+          prev[field.id] ?? deepCloneTreeItems(initialOptions);
+        const syncedOptions = syncCheckedState(baseOptions, selectedIds);
+
+        if (JSON.stringify(baseOptions) !== JSON.stringify(syncedOptions)) {
+          next[field.id] = syncedOptions;
+          changed = true;
+        }
+      });
+
+      return changed ? next : prev;
+    });
+  }, [fields, watchedGroups, initialOptions]);
+
+  const handleLocalCheckChange =
+    (fieldId: string, index: number) =>
+    (items: TreeViewItem | TreeViewItem[], checked: boolean) => {
+      const currentOptions =
+        localOptionsMap[fieldId] ?? deepCloneTreeItems(initialOptions);
+      const itemsArray = Array.isArray(items) ? items : [items];
+      const updatedOptions = updateCheckState(
+        currentOptions,
+        itemsArray,
+        checked,
+      );
+
+      setLocalOptionsMap((prev) => ({
+        ...prev,
+        [fieldId]: updatedOptions,
+      }));
+
+      // Clicking a parent cascades the check across the FULL local tree —
+      // including children that are visually filtered out by getFilteredOptions
+      // because they're already selected in the other tree (receiver ↔ CC) or
+      // in another group within this same section. Drop those filtered leaves
+      // here so the cascade can never silently re-add a unit the user already
+      // picked elsewhere.
+      const excludedIdSet = new Set(excludedIds.map((e) => e.id));
+      (otherGroupSelectedIdsByIndex[index] ?? new Set<string>()).forEach((id) =>
+        excludedIdSet.add(id),
+      );
+      const newCheckedLeaves = getLeafCheckedItems(updatedOptions).filter(
+        (leaf) => !excludedIdSet.has(leaf.id),
+      );
+      const newCheckedIds = new Set(newCheckedLeaves.map((leaf) => leaf.id));
+
+      const currentReceivers: ReceiverItem[] =
+        form.getValues(`${fieldArrayName}.${index}.receivers`) || [];
+      const currentUnitReceivers = currentReceivers.filter(
+        (r): r is ReceiverItem & { unitId: string } =>
+          r?.type === "unit" && Boolean(r?.unitId),
+      );
+      const nonSmartReceivers = dedupeNonSmartReceivers(currentReceivers);
+
+      // Preserve user-selection order: keep existing receivers in their
+      // current order (dropping any that became unchecked) and append the
+      // newly-checked leaves at the end. Rebuilding from
+      // getLeafCheckedItems alone would resort everything by tree-traversal
+      // order, which is what made multi-select external CC display in
+      // directory order instead of the order the user picked.
+      const keptUnitReceivers = currentUnitReceivers.filter((r) =>
+        newCheckedIds.has(r.unitId),
+      );
+      const currentIds = new Set(currentUnitReceivers.map((r) => r.unitId));
+      const newlyAddedReceivers: ReceiverItem[] = newCheckedLeaves
+        .filter((leaf) => !currentIds.has(leaf.id))
+        .map((leaf) => ({
+          unitId: leaf.id,
+          name:
+            typeof leaf.name === "string"
+              ? { en: leaf.name, am: leaf.name }
+              : {
+                  en: leaf.name?.en || leaf.name?.am || leaf.id,
+                  am: leaf.name?.am || leaf.name?.en || leaf.id,
+                },
+          type: "unit",
+        }));
+      const orderedUnitReceivers: ReceiverItem[] = [
+        ...keptUnitReceivers,
+        ...newlyAddedReceivers,
+      ];
+
+      form.setValue(
+        `${fieldArrayName}.${index}.receivers`,
+        [...dedupeUnitReceivers(orderedUnitReceivers), ...nonSmartReceivers],
+        { shouldDirty: true, shouldValidate: true },
+      );
+    };
+
+  const handleRemoveSelectedUnit = (index: number, unitId: string) => {
+    const fieldPath = `${fieldArrayName}.${index}.receivers`;
+    const currentReceivers: ReceiverItem[] = form.getValues(fieldPath) || [];
+    const updatedReceivers = currentReceivers.filter(
+      (item) => !(item?.type === "unit" && item?.unitId === unitId),
+    );
+
+    form.setValue(fieldPath, updatedReceivers, {
+      shouldDirty: true,
+      shouldValidate: true,
+    });
+  };
+
+  const combineNames = (
+    parent: TreeViewItem["name"],
+    child: TreeViewItem["name"],
+  ): { am: string; en: string } => {
+    const toObj = (n: TreeViewItem["name"]) =>
+      typeof n === "string"
+        ? { en: n, am: n }
+        : { en: n?.en ?? "", am: n?.am ?? "" };
+    const p = toObj(parent);
+    const c = toObj(child);
+    const join = (a: string, b: string) => (a && b ? `${a} / ${b}` : a || b);
+    return { en: join(p.en, c.en), am: join(p.am, c.am) };
+  };
+
+  const getFilteredOptions = (
+    treeItems: TreeViewItem[],
+    extraExcluded?: Set<string>,
+  ): TreeViewItem[] =>
+    treeItems.flatMap((node) => {
+      if (
+        excludedIds.some((receiving) => receiving.id === node.id) ||
+        extraExcluded?.has(node.id)
+      )
+        return [];
+      const hadChildren = !!node.children && node.children.length > 0;
+      const filteredChildren = node.children
+        ? getFilteredOptions(node.children, extraExcluded)
+        : [];
+      // If the node was a parent and every one of its children got filtered
+      // out, drop the parent too — otherwise it would render as an empty
+      // group that, when clicked, selects nothing useful.
+      if (hadChildren && filteredChildren.length === 0) return [];
+      // When exactly one leaf descendant remains after filtering, collapse
+      // the visual hierarchy into a single "Parent / Child" entry so the
+      // user doesn't have to expand a group that contains one option.
+      // Keeping the child's id/checked state means clicking this entry
+      // selects exactly that leaf — the cascade still does the right thing.
+      if (
+        filteredChildren.length === 1 &&
+        (!filteredChildren[0].children ||
+          filteredChildren[0].children.length === 0)
+      ) {
+        const child = filteredChildren[0];
+        return [
+          {
+            ...child,
+            name: combineNames(node.name, child.name),
+          },
+        ];
+      }
+      return [{ ...node, children: filteredChildren }];
+    });
+
+  return (
+    <div className="space-y-6 w-full">
+      {fields.map((field, index) => {
+        const localOptions =
+          localOptionsMap[field.id] ?? deepCloneTreeItems(initialOptions);
+        const selectedUnitReceivers: ReceiverItem[] = dedupeUnitReceivers(
+          (watchedGroups[index]?.receivers || []).filter(
+            (item: ReceiverItem) => item?.type === "unit" && item?.unitId,
+          ),
+        );
+
+        return (
+          <div
+            key={field.id}
+            className="space-y-4 p-4 rounded-lg border border-gray-200 bg-white dark:bg-gray-900 w-full"
+          >
+            <div className="flex items-center justify-between gap-3">
+              <div className="text-sm font-semibold text-slate-700 dark:text-slate-200">
+                {`${title} #${index + 1}`}
+              </div>
+              {fields.length > 1 && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  className="h-9 px-3 text-red-600"
+                  onClick={() => remove(index)}
+                >
+                  {removeLabel}
+                </Button>
+              )}
+            </div>
+
+            <CustomSelect
+              form={form}
+              name={`${fieldArrayName}.${index}.prefix`}
+              label={prefixLabel}
+              placeholder={prefixPlaceholder}
+              options={prefixOptions || []}
+              localizedName={localizedName}
+            />
+
+            {selectedUnitReceivers.length > 0 && (
+              <div className="flex flex-wrap gap-1 mt-2">
+                {selectedUnitReceivers.map((unit, unitIndex) => (
+                  <div
+                    key={`${unit.unitId}-${unitIndex}`}
+                    className="flex items-center gap-1 px-2 py-1 bg-blue-50 text-blue-700 border border-blue-100 rounded-md"
+                  >
+                    <span className="text-sm truncate max-w-[220px]">
+                      {localizedName(
+                        typeof unit.name === "string"
+                          ? { en: unit.name, am: unit.name }
+                          : unit.name,
+                      ) || unit.unitId}
+                    </span>
+                    <button
+                      type="button"
+                      className="cursor-pointer text-blue-700 hover:text-red-600 ml-1"
+                      onClick={() =>
+                        unit.unitId &&
+                        handleRemoveSelectedUnit(index, unit.unitId)
+                      }
+                    >
+                      x
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            <FormTreeSelectField
+              control={form.control}
+              name={`${fieldArrayName}.${index}.receivers`}
+              label={treeLabel}
+              options={getFilteredOptions(
+                localOptions,
+                otherGroupSelectedIdsByIndex[index],
+              )}
+              handleCheckChange={handleLocalCheckChange(field.id, index)}
+              collapsible={true}
+              localizedName={localizedName}
+              selectedCountResolver={(value) =>
+                Array.isArray(value)
+                  ? value.filter(
+                      (item) => item?.type === "unit" && item?.unitId,
+                    ).length
+                  : 0
+              }
+            />
+
+            <FormAddableList
+              form={form}
+              name={`${fieldArrayName}.${index}.receivers`}
+              label={addableLabel}
+              placeholder={addablePlaceholder}
+              valueAdapter={{
+                getDisplayItems: (fieldValue) =>
+                  Array.isArray(fieldValue)
+                    ? fieldValue
+                        .filter(
+                          (item) => item?.type === "non_smart" && item?.name,
+                        )
+                        .map((item) => getReceiverNameText(item.name))
+                    : [],
+                onItemsChange: (items, fieldValue) => {
+                  const source = Array.isArray(fieldValue) ? fieldValue : [];
+                  const unitReceivers = dedupeUnitReceivers(source);
+                  const nonSmartReceivers = dedupeNonSmartReceivers(
+                    items.map((name) => ({
+                      name,
+                      type: "non_smart" as const,
+                    })),
+                  );
+                  return [...unitReceivers, ...nonSmartReceivers];
+                },
+              }}
+            />
+
+            <CustomSelect
+              form={form}
+              name={`${fieldArrayName}.${index}.suffix`}
+              label={suffixLabel}
+              placeholder={suffixPlaceholder}
+              options={suffixOptions || []}
+              localizedName={localizedName}
+            />
+          </div>
+        );
+      })}
+
+      <Button
+        type="button"
+        variant="outline"
+        className="h-9 px-3"
+        onClick={() => append(createEmptyReceiverGroup())}
+      >
+        + {addLabel}
+      </Button>
+    </div>
+  );
+};
+
+const RecordForm = ({
+  defaultValues,
+  fullApiResponse,
+  recordId,
+  treeOrganizationsOptions,
+  ccTreeOrganizationsOptions,
+  fyrTreeOrganizationsOptions,
+  isEditMode,
+  onSubmit,
+  files,
+  setFiles,
+  existingAttachmentComponent,
+  isLoading,
+  isLoadingRecord,
+  dmsAttachments = [],
+  setDmsAttachments,
+}: RecordFormProps) => {
+  const [isDmsPickerOpen, setIsDmsPickerOpen] = useState(false);
+  const localFileInputRef = useRef<HTMLInputElement>(null);
+  const { config: tenantConfig } = useTenantConfig();
+  const handleLocalUploadClick = () => {
+    localFileInputRef.current?.click();
+  };
+
+  const handleLocalFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && setFiles) {
+      const selected = Array.from(e.target.files);
+      setFiles([...files, ...selected]);
+    }
+  };
+
+  const handleAttachDmsDocs = (docs: any[]) => {
+    if (setDmsAttachments) {
+      setDmsAttachments((prev) => {
+        const next = [...prev];
+        docs.forEach((doc) => {
+          if (!next.some((x) => x.id === doc.id)) {
+            next.push(doc);
+          }
+        });
+        return next;
+      });
+    }
+  };
+
+  const handleRemoveDmsAttachment = (id: string) => {
+    if (setDmsAttachments) {
+      setDmsAttachments((prev) => prev.filter((x) => x.id !== id));
+    }
+  };
+
+  const navigate = useNavigate();
+  const location = useLocation();
+  const localizedName = useLocalizedName();
+  const { t, i18n } = useTranslation();
+  const lang = i18n.language;
+  const queryClient = useQueryClient();
+  const { data: canJumpOnStepUpData, isFetched: hasLoadedCanJumpOnStepUp } =
+    useCanJumpOnStepUp();
+  // const { permissions } = usePermissions();
+  const {
+    userDetails,
+    unFilteredUserDetails,
+    selectedPositionPermissionKeys,
+    selectedPositionId,
+  } = useAuthUser();
+
+  const allPositions =
+    unFilteredUserDetails?.employee?.flatMap((emp) => emp.positions) || [];
+  const currentPosition = allPositions.find(
+    (pos) =>
+      pos.employeePositionId === selectedPositionId ||
+      pos.id === selectedPositionId,
+  );
+  const permissionKeys = currentPosition?.permissions?.map((p) => p.key) || [];
+  const currentPositionId = currentPosition?.id;
+  const canApprove =
+    permissionKeys.includes("can:sendExternalRecordToRo") ||
+    (selectedPositionPermissionKeys?.includes("can:sendExternalRecordToRo") ??
+      false);
+  const canapproveinternal =
+    permissionKeys.includes("can:sendInternalRecordToRo") ||
+    (selectedPositionPermissionKeys?.includes("can:sendInternalRecordToRo") ??
+      false);
+  const canapproveinternalMemo =
+    permissionKeys.includes("can:dispatchInternalMemo") ||
+    (selectedPositionPermissionKeys?.includes("can:dispatchInternalMemo") ??
+      false);
+  const intentRef = useRef<RecordFormIntent>("draft");
+  // Guards against re-entrant submissions: set synchronously on the form's
+  // submit event, before validation/normalization runs, so a second click
+  // fired while those are still in flight is rejected immediately.
+  const isSubmittingRef = useRef(false);
+  // When the user reached this form via another tab (?from=collaborations
+  // or ?from=approval), the back/cancel/save fallback should return them
+  // there instead of the default Outgoing list. Forward and Update-and-
+  // Approve buttons honor the same target via their consumer's onSuccess.
+  const fromParam = new URLSearchParams(location.search).get("from");
+
+  const isFromCollaboration = fromParam === "collaborations";
+  const fallbackReturnUrl =
+    fromParam === "collaborations"
+      ? "/record-management/collaborations"
+      : fromParam === "approval"
+        ? "/record-management/approval"
+        : "/record-management/userRecords";
+  // Use refs to track initialization to prevent loops
+  const initializedRef = useRef(false);
+  useEffect(() => {
+    initializedRef.current = false;
+  }, [defaultValues, defaultValues?.mode]); // Reset when key properties change
+  const shouldUseProvidedDefaultValues = Boolean(
+    defaultValues && (isEditMode || defaultValues.mode === "edit"),
+  );
+
+  const getFormDefaultValues = useCallback(() => {
+    if (shouldUseProvidedDefaultValues && defaultValues) {
+      const receiversList = normalizeReceiverGroups(
+        defaultValues.ReceiversList && defaultValues.ReceiversList.length > 0
+          ? defaultValues.ReceiversList
+          : buildReceiverGroupsFromLegacy({
+              groupedTreeItems: defaultValues.groupedTreeItems,
+              groupedItems: defaultValues.groupedItems,
+              prefix: defaultValues.prefix ?? "",
+              suffix: defaultValues.suffix ?? "",
+              fallbackUnits: defaultValues.receivingUnitIds ?? [],
+              fallbackNames: defaultValues.nonSmartOfficeReceivers ?? [],
+            }),
+      );
+
+      const ccListSource =
+        defaultValues.ccList && defaultValues.ccList.length > 0
+          ? defaultValues.ccList
+          : [createEmptyReceiverGroup()];
+      const ccList: ReceiverGroup[] = ccListSource.map((group) => ({
+        prefix: group?.prefix ?? "",
+        suffix: group?.suffix ?? "",
+        receivers: Array.isArray(group?.receivers) ? group.receivers : [],
+      }));
+
+      // FIX: Build forYourReferenceList properly from API data
+      const forYourReferenceList = normalizeReceiverGroups(
+        defaultValues.forYourReferenceList &&
+          defaultValues.forYourReferenceList.length > 0
+          ? defaultValues.forYourReferenceList
+          : buildReceiverGroupsFromLegacy({
+              groupedTreeItems: defaultValues.groupedFYRTreeItems, // Use FYR-specific legacy fields
+              groupedItems: defaultValues.groupedFYRItems, // Use FYR-specific legacy fields
+              prefix: defaultValues.ccPrefix ?? "", // FYR uses CC prefix/suffix
+              suffix: defaultValues.ccSuffix ?? "",
+              fallbackUnits: defaultValues.forYourReferenceUnitIds ?? [],
+              fallbackNames: defaultValues.nonSmartOfficeReceiverCCs ?? [],
+            }),
+      );
+
+      const receiverLegacy = buildLegacyGroupedValues(
+        receiversList,
+        treeOrganizationsOptions,
+      );
+      const ccLegacy = buildLegacyGroupedValues(
+        ccList,
+        ccTreeOrganizationsOptions,
+      );
+      const fyrLegacy = buildLegacyGroupedValues(
+        forYourReferenceList,
+        fyrTreeOrganizationsOptions,
+      );
+
+      return {
+        ...defaultValues,
+        // A returned/adjustment letter created under a delegated position can
+        // come back from the API without a stored `preferredLanguage`. Falling
+        // through to an empty value blanks out the Preferred Language select
+        // and its placeholder. Keep the UI consistent with the rest of the app
+        // by defaulting to the current application language. UI-only — does not
+        // alter stored data.
+        preferredLanguage: normalizePreferredLanguage(
+          defaultValues.preferredLanguage,
+          lang === "en" ? "en" : "am",
+        ),
+        headerId: defaultValues.headerId ?? "",
+        footerId: defaultValues.footerId ?? "",
+        ReceiversList: receiversList,
+        ReceiverList: receiversList,
+        ccList,
+        forYourReferenceList,
+        groupedTreeItems: receiverLegacy.groupedTreeItems,
+        groupedItems: receiverLegacy.groupedItems,
+        groupedCCTreeItems: ccLegacy.groupedTreeItems,
+        groupedCCItems: ccLegacy.groupedItems,
+        groupedFYRTreeItems: fyrLegacy.groupedTreeItems,
+        groupedFYRItems: fyrLegacy.groupedItems,
+        receivingUnitIds: receiverLegacy.units,
+        nonSmartOfficeReceivers: receiverLegacy.names,
+        externalCC: ccLegacy.units,
+        nonSmartOfficeReceiverCCs: ccLegacy.names,
+        forYourReferenceUnitIds: fyrLegacy.units,
+        prefix: defaultValues.prefix ?? receiversList[0]?.prefix ?? "",
+        suffix: defaultValues.suffix ?? receiversList[0]?.suffix ?? "",
+        ccPrefix: defaultValues.ccPrefix ?? ccList[0]?.prefix ?? "",
+        ccSuffix: defaultValues.ccSuffix ?? ccList[0]?.suffix ?? "",
+        skipOneLevel: defaultValues.skipOneLevel ?? false,
+      };
+    }
+
+    const values = { ...defaultCreateLetterValues };
+    values.sincerelyText = i18n.getFixedT("am")("msg.sincerely");
+    values.ReceiversList = normalizeReceiverGroups(values.ReceiversList);
+    values.ReceiverList = values.ReceiversList;
+    values.ccList = normalizeReceiverGroups(values.ccList);
+    values.forYourReferenceList = normalizeReceiverGroups(
+      values.forYourReferenceList,
+    );
+
+    const receiverLegacy = buildLegacyGroupedValues(
+      values.ReceiversList,
+      treeOrganizationsOptions,
+    );
+    const ccLegacy = buildLegacyGroupedValues(
+      values.ccList,
+      ccTreeOrganizationsOptions,
+    );
+    const fyrLegacy = buildLegacyGroupedValues(
+      values.forYourReferenceList,
+      fyrTreeOrganizationsOptions,
+    );
+
+    values.groupedTreeItems = receiverLegacy.groupedTreeItems;
+    values.groupedItems = receiverLegacy.groupedItems;
+    values.groupedCCTreeItems = ccLegacy.groupedTreeItems;
+    values.groupedCCItems = ccLegacy.groupedItems;
+    values.groupedFYRTreeItems = fyrLegacy.groupedTreeItems;
+    values.groupedFYRItems = fyrLegacy.groupedItems;
+    values.receivingUnitIds = receiverLegacy.units;
+    values.nonSmartOfficeReceivers = receiverLegacy.names;
+    values.externalCC = ccLegacy.units;
+    values.nonSmartOfficeReceiverCCs = ccLegacy.names;
+    values.forYourReferenceUnitIds = fyrLegacy.units;
+    values.prefix = values.prefix ?? values.ReceiversList[0]?.prefix ?? "";
+    values.suffix = values.suffix ?? values.ReceiversList[0]?.suffix ?? "";
+    values.ccPrefix = values.ccPrefix ?? values.ccList[0]?.prefix ?? "";
+    values.ccSuffix = values.ccSuffix ?? values.ccList[0]?.suffix ?? "";
+    values.skipOneLevel = values.skipOneLevel ?? false;
+    return values;
+  }, [
+    defaultValues,
+    shouldUseProvidedDefaultValues,
+    treeOrganizationsOptions,
+    ccTreeOrganizationsOptions,
+    fyrTreeOrganizationsOptions,
+    lang,
+  ]);
+  const form = useForm<CreateOrEditLetter>({
+    resolver: zodResolver(createLetterSchema),
+    defaultValues: getFormDefaultValues(),
+    mode: "onSubmit",
+  });
+
+  // Field-array `replace` handles for ccList / ReceiversList. RHF v7's
+  // `form.reset()` doesn't reliably update useFieldArray internal state,
+  // which is why edit mode was showing a stale empty group alongside the
+  // API group. Calling `replace(newArray)` after reset forces useFieldArray
+  // to mirror the new array exactly (1:1 with the API group count).
+  const { replace: replaceCcList } = useFieldArray({
+    control: form.control,
+    name: "ccList",
+  });
+  const { replace: replaceReceiversList } = useFieldArray({
+    control: form.control,
+    name: "ReceiversList",
+  });
+  const { replace: replaceForYourReferenceList } = useFieldArray({
+    control: form.control,
+    name: "forYourReferenceList",
+  });
+  const recordTemplateId = form.watch("recordTemplateId");
+  const preferredLanguageWatch = useWatch({
+    control: form.control,
+    name: "preferredLanguage",
+    defaultValue: getFormDefaultValues().preferredLanguage ?? "am",
+  });
+  const sincerelyTextWatch = useWatch({
+    control: form.control,
+    name: "sincerelyText",
+    defaultValue: getFormDefaultValues().sincerelyText ?? "",
+  });
+  const localizedFormName = useCallback(
+    (name?: { am: string; en: string }) => {
+      if (!name) return "";
+      return lang === "am" ? name.am || name.en : name.en || name.am;
+    },
+    [lang],
+  );
+  const defaultSincerelyTextByLanguage = useMemo(
+    () => ({
+      am: i18n.getFixedT("am")("msg.sincerely"),
+      en: i18n.getFixedT("en")("msg.sincerely"),
+    }),
+    [i18n],
+  );
+  const { checkHaveParent } = useUserDetail(userDetails as MeDto);
+  const hasParent = !!checkHaveParent;
+
+  useEffect(() => {
+    if (shouldUseProvidedDefaultValues) {
+      const next = getFormDefaultValues();
+      form.reset(next);
+      replaceCcList(next.ccList ?? []);
+      replaceReceiversList(next.ReceiversList ?? []);
+    }
+  }, [
+    form,
+    getFormDefaultValues,
+    replaceCcList,
+    replaceReceiversList,
+    shouldUseProvidedDefaultValues,
+  ]);
+
+  // Belt-and-suspenders: there are two competing `form.reset` effects above
+  // that can race when `defaultValues` arrives mid-load. Specific fields
+  // bound to <Select> components (initiationType) and <MultiSelect>
+  // (collaborators) can end up empty in edit mode if a reset runs with
+  // partial data. After both resets settle, force-set these two fields from
+  // the latest defaultValues. Uses shouldDirty:false so it doesn't mark the
+  // form as dirty.
+  useEffect(() => {
+    if (!shouldUseProvidedDefaultValues || !defaultValues) return;
+    if (defaultValues.initiationType) {
+      form.setValue("initiationType", defaultValues.initiationType, {
+        shouldDirty: false,
+      });
+    }
+    if (defaultValues.initiatedAs) {
+      form.setValue("initiatedAs", defaultValues.initiatedAs, {
+        shouldDirty: false,
+      });
+    }
+    if (defaultValues.collaborators) {
+      form.setValue("collaborators", defaultValues.collaborators, {
+        shouldDirty: false,
+      });
+    }
+    form.setValue("skipOneLevel", defaultValues.skipOneLevel ?? false, {
+      shouldDirty: false,
+    });
+    const resolvedPreferredLanguage = normalizePreferredLanguage(
+      defaultValues.preferredLanguage,
+      lang === "en" ? "en" : "am",
+    );
+    form.setValue("preferredLanguage", resolvedPreferredLanguage, {
+      shouldDirty: false,
+    });
+    if (defaultValues.headerId) {
+      form.setValue("headerId", defaultValues.headerId, {
+        shouldDirty: false,
+      });
+    }
+    if (defaultValues.footerId) {
+      form.setValue("footerId", defaultValues.footerId, {
+        shouldDirty: false,
+      });
+    }
+  }, [
+    defaultValues,
+    defaultValues?.initiationType,
+    defaultValues?.initiatedAs,
+    defaultValues?.collaborators,
+    defaultValues?.skipOneLevel,
+    defaultValues?.preferredLanguage,
+    defaultValues?.headerId,
+    defaultValues?.footerId,
+    form,
+    shouldUseProvidedDefaultValues,
+    lang,
+  ]);
+
+  useEffect(() => {
+    const nextSincerelyText =
+      defaultSincerelyTextByLanguage[
+        preferredLanguageWatch === "en" ? "en" : "am"
+      ];
+    const currentSincerelyText = sincerelyTextWatch ?? "";
+    const isUsingDefaultSincerelyText =
+      currentSincerelyText === defaultSincerelyTextByLanguage.am ||
+      currentSincerelyText === defaultSincerelyTextByLanguage.en;
+
+    if (
+      !isUsingDefaultSincerelyText ||
+      currentSincerelyText === nextSincerelyText
+    ) {
+      return;
+    }
+
+    form.setValue("sincerelyText", nextSincerelyText, {
+      shouldDirty: false,
+      shouldValidate: true,
+    });
+  }, [
+    defaultSincerelyTextByLanguage,
+    form,
+    preferredLanguageWatch,
+    sincerelyTextWatch,
+  ]);
+
+  // Direct guard: use the raw API response to force-set initiatedAs and
+  // skipOneLevel in edit mode. These fields are not reliably populated via
+  // the defaultValues chain because of render-order races between options
+  // availability and form.reset timing. fullApiResponse is always the
+  // authoritative source and arrives alongside defaultValues.
+  useEffect(() => {
+    if (!isEditMode || !fullApiResponse) return;
+    if (fullApiResponse.initiatedAs) {
+      form.setValue("initiatedAs", fullApiResponse.initiatedAs, {
+        shouldDirty: false,
+      });
+    }
+    if (fullApiResponse.initiationType) {
+      form.setValue("initiationType", fullApiResponse.initiationType, {
+        shouldDirty: false,
+        shouldValidate: true,
+      });
+    }
+    if (fullApiResponse.skipOneLevel !== undefined) {
+      form.setValue("skipOneLevel", fullApiResponse.skipOneLevel, {
+        shouldDirty: false,
+      });
+    }
+    const content = fullApiResponse.content?.[0];
+    if (content) {
+      form.setValue(
+        "preferredLanguage",
+        normalizePreferredLanguage(fullApiResponse.preferredLanguage),
+        { shouldDirty: false },
+      );
+      if (content.headerId) {
+        form.setValue("headerId", content.headerId, { shouldDirty: false });
+      }
+      if (content.footerId) {
+        form.setValue("footerId", content.footerId, { shouldDirty: false });
+      }
+    }
+  }, [
+    fullApiResponse,
+    fullApiResponse?.initiatedAs,
+    fullApiResponse?.initiationType,
+    fullApiResponse?.skipOneLevel,
+    fullApiResponse?.preferredLanguage,
+    fullApiResponse?.content,
+    isEditMode,
+    form,
+  ]);
+
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const [previewState, setPreviewState] = useState<{
+    formData: unknown;
+    files: File[];
+    headers: unknown[];
+    footers: unknown[];
+    positionsData: unknown[];
+    employeesData: unknown[];
+  } | null>(null);
+  const [commentsDialogOpen, setCommentsDialogOpen] = useState(false);
+  const [selectedHeader, setSelectedHeader] = useState<string>("");
+  const [selectedFooter, setSelectedFooter] = useState<string>("");
+  const [refreshing, setRefreshing] = useState(false);
+  const [hasSubmitted, setHasSubmitted] = useState(false);
+  const initiationTypeOptions = useInitiationTypeOptions();
+
+  const canUseAttachmentFromDMS = tenantConfig.moduleConfig?.dms ?? false;
+
+  const [receivingOptions, setReceivingOptions] = useState<TreeViewItem[]>(
+    treeOrganizationsOptions,
+  );
+  const [ccReceivingOptions, setCcReceivingOptions] = useState<TreeViewItem[]>(
+    ccTreeOrganizationsOptions,
+  );
+  const [fyrReceivingOptions, setFyrReceivingOptions] = useState<
+    TreeViewItem[]
+  >(ccTreeOrganizationsOptions);
+
+  const unitId = userDetails?.employee?.[0]?.unitId;
+
+  const { data: unitConfigData, isLoading: isUnitConfigLoading } =
+    useUnitConfiguration(unitId ?? "", {
+      enabled: !!unitId,
+    });
+  const unitConfig = unitConfigData?.data?.items?.[0];
+
+  const canAssignCustomReferenceNumber =
+    unitConfig?.canAssignCustomReferenceNumber ?? false;
+  const internalMemoHasReferenceNumber =
+    unitConfig?.internalMemoHasReferenceNumber ?? false;
+  const shouldCollaboratorAlwaysSign =
+    unitConfig?.shouldCollaboratorAlwaysSign ?? false;
+  const shouldIncludeForYourReferenceInCC =
+    unitConfig?.shouldIncludeForYourReferenceInCC ?? false;
+  const canUserSkipLevel = unitConfig?.canUserSkipLevel ?? false;
+  const canCollaborationBeCreatedForAll =
+    unitConfig?.canCollaborationBeCreatedForAll ?? false;
+
+  const canCollaboratorsEditRecord =
+    unitConfig?.canRecordBeEditedByCollaborators ?? false;
+  const canEditWhileCollaborating =
+    isFromCollaboration && canCollaboratorsEditRecord;
+  const { templates, isLoading: isTemplateLoading } = useTemplate(
+    unitId as string,
+  );
+  const {
+    listAllDepartmentResponse,
+    recordTypes,
+    currentEmployeesResponse,
+    isLoading: isSettingsLoading,
+  } = useSettings();
+  const { data: prefixSuffixData, isLoading: isPrefixLoading } =
+    usePrefixSuffix(unitId as string, form?.watch("recordType"), false);
+  const { data: ccData, isLoading: isCCLoading } = usePrefixSuffix(
+    unitId as string,
+    "external",
+    true,
+  );
+
+  const dedupeTreeItemsById = useCallback(
+    (items: TreeViewItem[] | undefined) => {
+      const uniqueMap = new Map<string, TreeViewItem>();
+      items?.forEach((item) => {
+        if (!uniqueMap.has(item.id)) {
+          uniqueMap.set(item.id, item);
+        }
+      });
+      return Array.from(uniqueMap.values());
+    },
+    [],
+  );
+  const receiversListWatch = useWatch({
+    control: form.control,
+    name: "ReceiversList",
+    defaultValue: [],
+  });
+  const forYourReferenceListsWatch = useWatch({
+    control: form.control,
+    name: "forYourReferenceList",
+    defaultValue: [],
+  });
+
+  const ccListWatch = useWatch({
+    control: form.control,
+    name: "ccList",
+    defaultValue: [],
+  });
+
+  const receivingUnitIdsWatch = useWatch({
+    control: form.control,
+    name: "receivingUnitIds",
+    defaultValue: [],
+  });
+  const forYourReferenceUnitIdsWatch = useWatch({
+    control: form.control,
+    name: "forYourReferenceUnitIds",
+    defaultValue: [],
+  });
+
+  const externalCCWatch = useWatch({
+    control: form.control,
+    name: "externalCC",
+    defaultValue: [],
+  });
+
+  // Watch form values for filtering
+  const recordTypeValue = form?.watch("recordType");
+  const initiationType = form.watch("initiationType");
+  const initiatedAsValue = form.watch("initiatedAs");
+  const shouldShowReferenceNumberField =
+    canAssignCustomReferenceNumber &&
+    (recordTypeValue === "internal" ||
+      isExternalLikeRecordType(recordTypeValue) ||
+      (recordTypeValue === "internal_memo" && internalMemoHasReferenceNumber));
+
+  useEffect(() => {
+    if (!shouldShowReferenceNumberField) {
+      form.setValue("referenceNumber", "", {
+        shouldDirty: false,
+        shouldValidate: true,
+      });
+    }
+  }, [form, shouldShowReferenceNumberField]);
+
+  const isDirectRecordType = (item: {
+    name?: { en?: string; am?: string };
+    key?: string;
+  }) => {
+    const key = String(item.key || "").toLowerCase();
+    const rawName = [item.name?.en, item.name?.am]
+      .filter(Boolean)
+      .join(" ")
+      .toLowerCase();
+    return key.includes("direct") || rawName.includes("direct");
+  };
+
+  const isBankRecordType = (item: {
+    name?: { en?: string; am?: string };
+    key?: string;
+  }) => {
+    const key = normalizeRecordTypeKey(item.key);
+    const rawName = [item.name?.en, item.name?.am]
+      .filter(Boolean)
+      .join(" ")
+      .toLowerCase();
+    return key === "bank" || rawName.includes("bank");
+  };
+
+  // Check if current record type is direct
+  const isCurrentRecordDirect = useMemo(() => {
+    if (String(recordTypeValue || "").toLowerCase() === "direct") return true;
+    if (!recordTypeValue || !recordTypes) return false;
+    const currentRecordType = recordTypes.find(
+      (item: any) => item.key === recordTypeValue,
+    );
+    return currentRecordType ? isDirectRecordType(currentRecordType) : false;
+  }, [recordTypeValue, recordTypes]);
+
+  const canJumpOnStepUp = canJumpOnStepUpData === true;
+  const shouldShowCanSkipLevel =
+    initiatedAsValue === "position" && canJumpOnStepUp && canUserSkipLevel;
+
+  useEffect(() => {
+    if (initiatedAsValue !== "position") {
+      if (!form.getValues("skipOneLevel")) return;
+      form.setValue("skipOneLevel", false, {
+        shouldDirty: false,
+        shouldValidate: true,
+      });
+      return;
+    }
+
+    // In edit mode the saved skipOneLevel must be preserved; routing was
+    // already established when the record was created so auto-clearing it
+    // here would silently change the routing path on resubmit.
+    if (isEditMode) return;
+
+    const shouldClearCanSkipLevel =
+      isCurrentRecordDirect || (hasLoadedCanJumpOnStepUp && !canJumpOnStepUp);
+
+    if (shouldClearCanSkipLevel) {
+      if (!form.getValues("skipOneLevel")) return;
+      form.setValue("skipOneLevel", false, {
+        shouldDirty: false,
+        shouldValidate: true,
+      });
+    }
+  }, [
+    canJumpOnStepUp,
+    form,
+    hasLoadedCanJumpOnStepUp,
+    initiatedAsValue,
+    isCurrentRecordDirect,
+    isEditMode,
+    shouldShowCanSkipLevel,
+  ]);
+
+  const receivingUnitIds = useMemo(() => {
+    const unitsFromGroups = receiversListWatch
+      ?.flatMap((group) => group?.receivers || [])
+      .filter(isUnitReceiver)
+      .map((receiver) => receiverToTreeViewItem(receiver, receivingOptions))
+      .filter((item): item is TreeViewItem => Boolean(item));
+
+    return dedupeTreeItemsById(
+      unitsFromGroups
+        ? unitsFromGroups.length > 0
+          ? unitsFromGroups
+          : receivingUnitIdsWatch
+        : receivingUnitIdsWatch,
+    );
+  }, [
+    receiversListWatch,
+    receivingUnitIdsWatch,
+    receivingOptions,
+    dedupeTreeItemsById,
+  ]);
+  const forYourReferenceUnitIds = useMemo(() => {
+    const unitsFromGroups = forYourReferenceListsWatch // <-- fix: use forYourReferenceListsWatch, not forYourReferenceUnitIdsWatch
+      ?.flatMap((group) => group?.receivers || [])
+      .filter(isUnitReceiver)
+      .map((receiver) => receiverToTreeViewItem(receiver, fyrReceivingOptions)) // <-- fix: use fyrReceivingOptions
+      .filter((item): item is TreeViewItem => Boolean(item));
+
+    return dedupeTreeItemsById(
+      unitsFromGroups
+        ? unitsFromGroups.length > 0
+          ? unitsFromGroups
+          : forYourReferenceUnitIdsWatch // fallback to legacy field
+        : forYourReferenceUnitIdsWatch,
+    );
+  }, [
+    forYourReferenceListsWatch, // <-- fix dependency
+    forYourReferenceUnitIdsWatch,
+    fyrReceivingOptions, // <-- fix dependency
+    dedupeTreeItemsById,
+  ]);
+  const externalCC = useMemo(() => {
+    const unitsFromGroups = ccListWatch
+      ?.flatMap((group) => group?.receivers || [])
+      .filter(isUnitReceiver)
+      .map((receiver) => receiverToTreeViewItem(receiver, ccReceivingOptions))
+      .filter((item): item is TreeViewItem => Boolean(item));
+
+    return dedupeTreeItemsById(
+      unitsFromGroups
+        ? unitsFromGroups.length > 0
+          ? unitsFromGroups
+          : externalCCWatch
+        : externalCCWatch,
+    );
+  }, [ccListWatch, externalCCWatch, ccReceivingOptions, dedupeTreeItemsById]);
+
+  const watchedToPositions = useWatch({
+    control: form.control,
+    name: "toPositions",
+    defaultValue: [],
+  });
+  const watchedToEmployees = useWatch({
+    control: form.control,
+    name: "toEmployees",
+    defaultValue: [],
+  });
+  const watchedCcEmployees = useWatch({
+    control: form.control,
+    name: "ccEmployees",
+    defaultValue: [],
+  });
+  const toPositions = useMemo(
+    () => watchedToPositions ?? [],
+    [watchedToPositions],
+  );
+  const toEmployees = useMemo(
+    () => watchedToEmployees ?? [],
+    [watchedToEmployees],
+  );
+  const internalCC = form?.watch("internalCC") || [];
+  const forYourReference = form?.watch("forYourReference") || [];
+  const recordTypeKey = form?.watch("recordType") || "";
+  // Fetch position prefixes with record type and position ID from metadata
+  // REMOVED: Position prefix functionality has been removed from the form
+  const { data: headerFooterData } = useHeaderFooterPresigned(
+    unitId!,
+    currentPositionId!,
+    recordTypeKey as string,
+  );
+  const { isLoading: isPreviewLoading } = useRecordPreview();
+
+  const recordPrefixesResponse =
+    prefixSuffixData?.items
+      ?.filter((item) => item.type === "prefix" && !item.isForCC)
+      .map((item) => ({
+        ...item,
+        name: {
+          en: item.name?.en ?? "",
+          am: item.name?.am ?? "",
+        },
+      })) || [];
+
+  const recordSuffixesResponse =
+    prefixSuffixData?.items
+      ?.filter((item) => item.type === "suffix" && !item.isForCC)
+      .map((item) => ({
+        ...item,
+        name: {
+          en: item.name?.en ?? "",
+          am: item.name?.am ?? "",
+        },
+      })) || [];
+
+  const ccPrefixesResponse =
+    ccData?.items
+      ?.filter((item) => item.type === "prefix" && item.isForCC)
+      .map((item) => ({
+        ...item,
+        name: {
+          en: item.name?.en ?? "",
+          am: item.name?.am ?? "",
+        },
+      })) || [];
+
+  const ccSuffixesResponse =
+    ccData?.items
+      ?.filter((item) => item.type === "suffix" && item.isForCC)
+      .map((item) => ({
+        ...item,
+        name: {
+          en: item.name?.en ?? "",
+          am: item.name?.am ?? "",
+        },
+      })) || [];
+  // Position prefix options - REMOVED
+  // const positionPrefixOptions: KeyValue[] = [];
+  const headers = useMemo(
+    () => headerFooterData?.headers || [],
+    [headerFooterData?.headers],
+  );
+  const footers = useMemo(
+    () => headerFooterData?.footers || [],
+    [headerFooterData?.footers],
+  );
+  const savedRecordContent = fullApiResponse?.content?.[0];
+  const mergeSavedHeaderFooterItem = useCallback(
+    (
+      items: Array<{
+        id: string;
+        name?: { am?: string; en?: string };
+        presigned?: string;
+      }>,
+      savedId?: string | null,
+      savedEntity?: {
+        id?: string;
+        name?: { am?: string; en?: string };
+        presigned?: string;
+      } | null,
+    ) => {
+      if (!savedId || items.some((item) => item.id === savedId)) {
+        return items;
+      }
+      return [
+        ...items,
+        {
+          id: savedId,
+          name: savedEntity?.name ?? { am: "", en: "" },
+          presigned: savedEntity?.presigned,
+        },
+      ];
+    },
+    [],
+  );
+  const effectiveHeaders = useMemo(
+    () =>
+      mergeSavedHeaderFooterItem(
+        headers,
+        defaultValues?.headerId ?? savedRecordContent?.headerId,
+        savedRecordContent?.header,
+      ),
+    [
+      headers,
+      defaultValues?.headerId,
+      mergeSavedHeaderFooterItem,
+      savedRecordContent?.header,
+      savedRecordContent?.headerId,
+    ],
+  );
+  const effectiveFooters = useMemo(
+    () =>
+      mergeSavedHeaderFooterItem(
+        footers,
+        defaultValues?.footerId ?? savedRecordContent?.footerId,
+        savedRecordContent?.footer,
+      ),
+    [
+      footers,
+      defaultValues?.footerId,
+      mergeSavedHeaderFooterItem,
+      savedRecordContent?.footer,
+      savedRecordContent?.footerId,
+    ],
+  );
+
+  const canCreateDirectRecord = unitConfig?.canCreateDirectRecord ?? false;
+  const canCreateBankRecord = unitConfig?.canCreateBankRelatedRecords ?? false;
+  const canPositionBasedRecordsBeCreated =
+    unitConfig?.canPositionBasedRecordsBeCreated ?? false;
+  const shouldShowHeaderFooterSelection =
+    !isCurrentRecordDirect ||
+    unitConfig?.shouldDirectRecordHaveHeaderAndFooter !== false;
+  const isEditingExistingTeamRecord =
+    Boolean(isEditMode) &&
+    (defaultValues?.initiationType === "team" ||
+      initiationType === "team" ||
+      fullApiResponse?.initiationType === "team");
+  const canShowTeamInitiation =
+    canCollaborationBeCreatedForAll ||
+    recordTypeValue === "direct" ||
+    isEditingExistingTeamRecord;
+  const filteredInitiationTypeOptions = initiationTypeOptions.filter(
+    (option) => option.value !== "team" || canShowTeamInitiation,
+  );
+
+  const recordTypeOptions: KeyValue[] =
+    recordTypes
+      ?.filter(
+        (item: { name?: { en?: string; am?: string }; key?: string }) => {
+          if (!canCreateDirectRecord && isDirectRecordType(item)) return false;
+          if (!canCreateBankRecord && isBankRecordType(item)) return false;
+          return true;
+        },
+      )
+      .map((item: { name: { en: string; am: string }; key: string }) => ({
+        label:
+          item.key == "direct"
+            ? localizedName({ en: "Direct Letter", am: "ቀጥታ ደብዳቤ" })
+            : localizedName(item.name),
+        value: item.key,
+      })) || [];
+
+  const creationType: KeyValue[] = [
+    ...(canPositionBasedRecordsBeCreated ||
+    initiatedAsValue === "position" ||
+    defaultValues?.initiatedAs === "position"
+      ? [
+          {
+            label: t("addRecord.Position"),
+            value: "position",
+            employeePositionId: "",
+          },
+        ]
+      : []),
+    { label: t("addRecord.personal"), value: "self", employeePositionId: "" },
+  ];
+
+  const employeesList: KeyValue[] = useMemo(
+    () =>
+      currentEmployeesResponse?.items.map((employee: EmployeeWithUnitDto) => ({
+        label: localizedFormName(employee.user.name),
+        value: employee.employeePositions?.[0]?.id ?? "",
+        employeePositionId: "",
+      })) || [],
+    [currentEmployeesResponse?.items, localizedFormName],
+  );
+
+  const employeesCCList: KeyValue[] = useMemo(
+    () =>
+      currentEmployeesResponse?.items.map((employee: EmployeeWithUnitDto) => ({
+        label: localizedFormName(employee.user.name),
+        value: employee.employeePositions?.[0]?.id ?? "",
+        employeePositionId: "",
+      })) || [],
+    [currentEmployeesResponse?.items, localizedFormName],
+  );
+  const ccEmployeeOptions = useMemo(
+    () =>
+      employeesCCList.filter((option) => !toEmployees.includes(option.value)),
+    [employeesCCList, toEmployees],
+  );
+  const ccEmployeesInvalidSelectionMessage = t(
+    "msg.ccEmployeesInvalidSelection",
+    "One or more selected CC users do not have a valid assigned position. Remove them or update their employee profile.",
+  );
+  const hasInvalidCcEmployeeSelection = useCallback(
+    (selectedValues?: string[] | null) => {
+      const selectedSet = new Set((selectedValues ?? []).filter(Boolean));
+      if (selectedSet.size === 0) return false;
+
+      return Array.from(selectedSet).some((employeePositionId) => {
+        const employee = currentEmployeesResponse?.items?.find(
+          (item) => item.employeePositions?.[0]?.id === employeePositionId,
+        );
+        const employeePosition = employee?.employeePositions?.[0];
+
+        return (
+          !employee || !employeePosition?.id || !employeePosition?.position?.id
+        );
+      });
+    },
+    [currentEmployeesResponse?.items],
+  );
+  const setCcEmployeesInvalidSelectionError = useCallback(() => {
+    form.setError("ccEmployees", {
+      type: "manual",
+      message: ccEmployeesInvalidSelectionMessage,
+    });
+  }, [ccEmployeesInvalidSelectionMessage, form]);
+  const validateCcEmployeesSelection = useCallback(
+    (selectedValues?: string[] | null) => {
+      if (hasInvalidCcEmployeeSelection(selectedValues)) {
+        setCcEmployeesInvalidSelectionError();
+        return false;
+      }
+
+      if (form.getFieldState("ccEmployees").error?.type === "manual") {
+        form.clearErrors("ccEmployees");
+      }
+      return true;
+    },
+    [form, hasInvalidCcEmployeeSelection, setCcEmployeesInvalidSelectionError],
+  );
+  const surfaceCcEmployeesSubmitError = useCallback(
+    (error: unknown) => {
+      const message = error instanceof Error ? error.message : "";
+
+      if (
+        message.includes("Cannot read properties of null") &&
+        message.includes("id")
+      ) {
+        setCcEmployeesInvalidSelectionError();
+        setHasSubmitted(true);
+        setShouldScrollToError(true);
+        toast.error(t("addRecord.formHasErrors"));
+        return true;
+      }
+
+      return false;
+    },
+    [setCcEmployeesInvalidSelectionError, t],
+  );
+  useEffect(() => {
+    validateCcEmployeesSelection(watchedCcEmployees);
+  }, [validateCcEmployeesSelection, watchedCcEmployees]);
+
+  const letterTemplates = templates.map((template: LetterTemplateDto) => ({
+    id: template.id,
+    name: localizedName(template.name),
+    subject: template.subject,
+    content: template.body,
+    sincerelyText: template.sincerelyText,
+  }));
+  const letterTemplateOptions = [
+    ...letterTemplates.map((template) => ({
+      label: template.name || "Template",
+      value: template.id,
+    })),
+    {
+      label: t("Cancel"),
+      value: "unselect",
+    },
+  ];
+
+  const shouldClearEditor = false;
+  // Add these refs and state
+  const editorSectionRef = useRef<HTMLDivElement>(null);
+  const [lastErrorField, setLastErrorField] = useState<string | null>(null);
+  const [shouldScrollToError, setShouldScrollToError] = useState(false);
+  // Enhanced scroll function with multiple fallbacks
+  const scrollToFirstError = useCallback((errors: Record<string, unknown>) => {
+    if (!errors || Object.keys(errors).length === 0) return;
+
+    const firstError = Object.keys(errors)[0];
+    setLastErrorField(firstError);
+
+    const findAndScrollToElement = (attempt = 0) => {
+      let errorElement: HTMLElement | null = null;
+
+      if (firstError === "body") {
+        // Try multiple methods to find the body editor section
+        errorElement = editorSectionRef.current;
+
+        if (!errorElement) {
+          // Try to find by data attribute
+          errorElement = document.querySelector(
+            '[data-field="body-section"]',
+          ) as HTMLElement;
+        }
+
+        if (!errorElement) {
+          // Try to find by card content
+          const cards = Array.from(document.querySelectorAll(".card"));
+          errorElement = cards.find(
+            (card) =>
+              card.textContent?.includes("Letter Content") ||
+              card.textContent?.includes("Body"),
+          ) as HTMLElement;
+        }
+      } else {
+        errorElement = document.querySelector(`[data-field="${firstError}"]`);
+      }
+
+      if (errorElement) {
+        // Scroll to the element
+        errorElement.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+        });
+
+        // Add visual highlight
+        errorElement.classList.add(
+          "ring-2",
+          "ring-destructive",
+          "ring-offset-2",
+        );
+
+        setTimeout(() => {
+          errorElement?.classList.remove(
+            "ring-2",
+            "ring-destructive",
+            "ring-offset-2",
+          );
+          setLastErrorField(null);
+        }, 4000);
+
+        return true;
+      } else if (attempt < 5) {
+        // Retry after a short delay (DOM might not be ready yet)
+        setTimeout(() => findAndScrollToElement(attempt + 1), 200);
+        return false;
+      } else {
+        return false;
+      }
+    };
+
+    findAndScrollToElement();
+  }, []);
+
+  useEffect(() => {
+    setReceivingOptions(treeOrganizationsOptions);
+  }, [treeOrganizationsOptions]);
+
+  useEffect(() => {
+    setCcReceivingOptions(ccTreeOrganizationsOptions);
+  }, [ccTreeOrganizationsOptions]);
+  useEffect(() => {
+    setFyrReceivingOptions(fyrTreeOrganizationsOptions);
+  }, [fyrTreeOrganizationsOptions]);
+
+  // Watch for form submission and errors
+  useEffect(() => {
+    if (shouldScrollToError && Object.keys(form.formState.errors).length > 0) {
+      scrollToFirstError(form.formState.errors);
+      setShouldScrollToError(false);
+    }
+  }, [form.formState.errors, shouldScrollToError, scrollToFirstError]);
+
+  // Also add a direct effect for body errors
+  useEffect(() => {
+    if (form.formState.errors.body && hasSubmitted) {
+      setTimeout(() => {
+        if (editorSectionRef.current) {
+          editorSectionRef.current.scrollIntoView({
+            behavior: "smooth",
+            block: "center",
+          });
+          editorSectionRef.current.classList.add(
+            "ring-2",
+            "ring-destructive",
+            "ring-offset-2",
+          );
+
+          setTimeout(() => {
+            editorSectionRef.current?.classList.remove(
+              "ring-2",
+              "ring-destructive",
+              "ring-offset-2",
+            );
+          }, 4000);
+        }
+      }, 150);
+    }
+  }, [form.formState.errors.body, hasSubmitted]);
+
+  const currentUserCollaborationId = useMemo(() => {
+    const collaborators = fullApiResponse?.collaborators ?? [];
+    const currentByUserId = collaborators.find(
+      (collaborator: any) => collaborator.userId === userDetails?.id,
+    );
+
+    if (currentByUserId?.id) {
+      return currentByUserId.id as string;
+    }
+
+    const currentByPositionId = collaborators.find(
+      (collaborator: any) =>
+        collaborator.employeePositionId === selectedPositionId,
+    );
+
+    return currentByPositionId?.id as string | undefined;
+  }, [fullApiResponse?.collaborators, selectedPositionId, userDetails?.id]);
+  const isTeamRejectedEdit =
+    isEditMode && fullApiResponse?.statusKey === "Team Rejected";
+
+  // Allow editing initiation type when the letter returns to initiator as "Team Adjusted"
+  const isTeamAdjustedEdit =
+    isEditMode && fullApiResponse?.statusKey === "Team Adjusted";
+
+  const effectiveRecordId = recordId || fullApiResponse?.id;
+  const currentContentId = fullApiResponse?.content?.[0]?.id;
+  const canOpenCollaborationComments =
+    Boolean(isEditMode) &&
+    initiationType === "team" &&
+    Boolean(effectiveRecordId);
+  const selectedHeaderId = form.watch("headerId");
+  const selectedFooterId = form.watch("footerId");
+
+  useEffect(() => {
+    if (!shouldShowHeaderFooterSelection) {
+      if (
+        isEditMode &&
+        (savedRecordContent?.headerId || savedRecordContent?.footerId)
+      ) {
+        return;
+      }
+      form.setValue("headerId", DISABLED_DIRECT_HEADER_FOOTER_VALUE, {
+        shouldDirty: false,
+      });
+      form.setValue("footerId", DISABLED_DIRECT_HEADER_FOOTER_VALUE, {
+        shouldDirty: false,
+      });
+      setSelectedHeader("");
+      setSelectedFooter("");
+    }
+  }, [
+    isEditMode,
+    savedRecordContent?.footerId,
+    savedRecordContent?.headerId,
+    shouldShowHeaderFooterSelection,
+    form,
+  ]);
+
+  // Force isWithTeamSignature=true when shouldCollaboratorAlwaysSign is enabled
+  useEffect(() => {
+    if (shouldCollaboratorAlwaysSign && initiationType === "team") {
+      form.setValue("isWithTeamSignature", true);
+    }
+  }, [shouldCollaboratorAlwaysSign, initiationType, form]);
+
+  useEffect(() => {
+    if (
+      isUnitConfigLoading ||
+      canShowTeamInitiation ||
+      initiationType !== "team" ||
+      isEditingExistingTeamRecord
+    ) {
+      return;
+    }
+
+    form.setValue("initiationType", "self", {
+      shouldDirty: true,
+      shouldValidate: true,
+    });
+    form.setValue("collaborators", [], {
+      shouldDirty: true,
+      shouldValidate: true,
+    });
+    form.setValue("isWithTeamSignature", false, {
+      shouldDirty: true,
+      shouldValidate: true,
+    });
+  }, [
+    canShowTeamInitiation,
+    form,
+    initiationType,
+    isEditingExistingTeamRecord,
+    isUnitConfigLoading,
+  ]);
+
+  useEffect(() => {
+    if (
+      isUnitConfigLoading ||
+      canPositionBasedRecordsBeCreated ||
+      isEditMode ||
+      initiatedAsValue !== "position"
+    ) {
+      return;
+    }
+
+    form.setValue("initiatedAs", "self", {
+      shouldDirty: true,
+      shouldValidate: true,
+    });
+  }, [
+    canPositionBasedRecordsBeCreated,
+    form,
+    initiatedAsValue,
+    isEditMode,
+    isUnitConfigLoading,
+  ]);
+
+  // ✅ 1. Initialize options and sincerely text
+  useEffect(() => {
+    if (receivingOptions.length === 0) {
+      setReceivingOptions(treeOrganizationsOptions);
+    }
+
+    if (ccReceivingOptions.length === 0) {
+      setCcReceivingOptions(ccTreeOrganizationsOptions);
+    }
+    if (fyrReceivingOptions.length === 0) {
+      setFyrReceivingOptions(fyrTreeOrganizationsOptions);
+    }
+  }, [
+    receivingOptions.length,
+    ccReceivingOptions.length,
+    treeOrganizationsOptions,
+    ccTreeOrganizationsOptions,
+    fyrTreeOrganizationsOptions,
+    t,
+    form,
+  ]);
+
+  // ✅ 2. Initialize header/footer only when the current value is empty or invalid.
+  // This preserves edit-mode defaults instead of forcing the first option.
+  useEffect(() => {
+    if (!shouldShowHeaderFooterSelection) {
+      return;
+    }
+
+    const currentHeaderId = form.getValues("headerId");
+    const currentFooterId = form.getValues("footerId");
+
+    if (headers.length > 0) {
+      const headerExists = headers.some(
+        (header) => header.id === currentHeaderId,
+      );
+      // In edit mode, only auto-select when the field is empty. A non-empty
+      // headerId from the saved record should never be overridden by a
+      // re-fetch triggered by a recordTypeKey query key change.
+      if (!currentHeaderId || (!isEditMode && !headerExists)) {
+        form.setValue("headerId", headers[0].id, { shouldDirty: false });
+      } else if (
+        isEditMode &&
+        defaultValues?.headerId &&
+        currentHeaderId !== defaultValues.headerId
+      ) {
+        form.setValue("headerId", defaultValues.headerId, {
+          shouldDirty: false,
+        });
+      }
+    }
+
+    if (footers.length > 0) {
+      const footerExists = footers.some(
+        (footer) => footer.id === currentFooterId,
+      );
+      if (!currentFooterId || (!isEditMode && !footerExists)) {
+        form.setValue("footerId", footers[0].id, { shouldDirty: false });
+      } else if (
+        isEditMode &&
+        defaultValues?.footerId &&
+        currentFooterId !== defaultValues.footerId
+      ) {
+        form.setValue("footerId", defaultValues.footerId, {
+          shouldDirty: false,
+        });
+      }
+    }
+  }, [
+    headers,
+    footers,
+    form,
+    isEditMode,
+    defaultValues?.headerId,
+    defaultValues?.footerId,
+    selectedHeaderId,
+    selectedFooterId,
+    shouldShowHeaderFooterSelection,
+  ]);
+
+  // ✅ 3. Initialize form with default values (only once)
+  useEffect(() => {
+    if (
+      !isLoadingRecord &&
+      shouldUseProvidedDefaultValues &&
+      defaultValues &&
+      !initializedRef.current
+    ) {
+      const receiversList = normalizeReceiverGroups(
+        defaultValues.ReceiversList && defaultValues.ReceiversList.length > 0
+          ? defaultValues.ReceiversList
+          : buildReceiverGroupsFromLegacy({
+              groupedTreeItems: defaultValues.groupedTreeItems,
+              groupedItems: defaultValues.groupedItems,
+              prefix: defaultValues.prefix ?? "",
+              suffix: defaultValues.suffix ?? "",
+              fallbackUnits: defaultValues.receivingUnitIds ?? [],
+              fallbackNames: defaultValues.nonSmartOfficeReceivers ?? [],
+            }),
+      );
+
+      const ccListSource =
+        defaultValues.ccList && defaultValues.ccList.length > 0
+          ? defaultValues.ccList
+          : [createEmptyReceiverGroup()];
+      const ccList: ReceiverGroup[] = ccListSource.map((group) => ({
+        prefix: group?.prefix ?? "",
+        suffix: group?.suffix ?? "",
+        receivers: Array.isArray(group?.receivers) ? group.receivers : [],
+      }));
+
+      // FIX: Initialize forYourReferenceList properly
+      const forYourReferenceList = normalizeReceiverGroups(
+        defaultValues.forYourReferenceList &&
+          defaultValues.forYourReferenceList.length > 0
+          ? defaultValues.forYourReferenceList
+          : buildReceiverGroupsFromLegacy({
+              groupedTreeItems: defaultValues.groupedFYRTreeItems,
+              groupedItems: defaultValues.groupedFYRItems,
+              prefix: defaultValues.ccPrefix ?? "",
+              suffix: defaultValues.ccSuffix ?? "",
+              fallbackUnits: defaultValues.forYourReferenceUnitIds ?? [],
+              fallbackNames: defaultValues.nonSmartOfficeReceiverCCs ?? [],
+            }),
+      );
+
+      const receiverLegacy = buildLegacyGroupedValues(
+        receiversList,
+        treeOrganizationsOptions,
+      );
+      const ccLegacy = buildLegacyGroupedValues(
+        ccList,
+        ccTreeOrganizationsOptions,
+      );
+      const fyrLegacy = buildLegacyGroupedValues(
+        forYourReferenceList,
+        fyrTreeOrganizationsOptions,
+      );
+
+      replaceForYourReferenceList(forYourReferenceList);
+
+      form.reset({
+        ...defaultValues,
+        preferredLanguage: normalizePreferredLanguage(
+          defaultValues.preferredLanguage,
+          lang === "en" ? "en" : "am",
+        ),
+        headerId: defaultValues.headerId ?? "",
+        footerId: defaultValues.footerId ?? "",
+        ReceiversList: receiversList,
+        ReceiverList: receiversList,
+        ccList,
+        forYourReferenceList,
+        groupedTreeItems: receiverLegacy.groupedTreeItems,
+        groupedItems: receiverLegacy.groupedItems,
+        groupedCCTreeItems: ccLegacy.groupedTreeItems,
+        groupedCCItems: ccLegacy.groupedItems,
+        groupedFYRTreeItems: fyrLegacy.groupedTreeItems,
+        groupedFYRItems: fyrLegacy.groupedItems,
+        receivingUnitIds: receiverLegacy.units,
+        nonSmartOfficeReceivers: receiverLegacy.names,
+        externalCC: ccLegacy.units,
+        nonSmartOfficeReceiverCCs: ccLegacy.names,
+        forYourReferenceUnitIds: fyrLegacy.units,
+        prefix: defaultValues.prefix ?? receiversList[0]?.prefix ?? "",
+        suffix: defaultValues.suffix ?? receiversList[0]?.suffix ?? "",
+        ccPrefix: defaultValues.ccPrefix ?? ccList[0]?.prefix ?? "",
+        ccSuffix: defaultValues.ccSuffix ?? ccList[0]?.suffix ?? "",
+        skipOneLevel: defaultValues.skipOneLevel ?? false,
+        mode: isEditMode ? "edit" : "add",
+      });
+
+      replaceCcList(ccList);
+      replaceReceiversList(receiversList);
+      replaceForYourReferenceList(forYourReferenceList);
+
+      initializedRef.current = true;
+      return;
+    }
+
+    if (initializedRef.current) {
+      form.setValue("mode", isEditMode ? "edit" : "add");
+    }
+  }, [
+    isLoadingRecord,
+    defaultValues,
+    isEditMode,
+    form,
+    treeOrganizationsOptions,
+    ccTreeOrganizationsOptions,
+    fyrTreeOrganizationsOptions,
+    replaceCcList,
+    replaceReceiversList,
+    replaceForYourReferenceList,
+    shouldUseProvidedDefaultValues,
+    lang,
+  ]);
+
+  // ✅ 4. Handle recordType change watcher (one-time setup)
+  // Preserve organization fields when record type changes, only reset truly incompatible fields
+  useEffect(() => {
+    const sub = form.watch((v, { name }) => {
+      if (name === "recordType" && initializedRef.current) {
+        requestAnimationFrame(() => {
+          if (isExternalLikeRecordType(v.recordType)) {
+            // Only reset internal-specific fields that are incompatible with external records
+            form.resetField("toPositions");
+            form.resetField("toEmployees");
+            form.resetField("internalCC");
+            form.resetField("ccEmployees");
+            // Clear prefix/suffix for internal recipients only
+            form.setValue("prefix", "");
+            form.setValue("suffix", "");
+          } else {
+            // Only reset external-specific fields that are incompatible with internal records
+            form.resetField("nonSmartOfficeReceiverCCs");
+            // Clear prefix/suffix for external recipients only
+            form.setValue("ccPrefix", "");
+            form.setValue("ccSuffix", "");
+            if (v.recordType === "internal_memo" || v.recordType === "direct") {
+              const emptyCcGroups = [createEmptyReceiverGroup()];
+              form.setValue("ccList", emptyCcGroups, {
+                shouldDirty: true,
+                shouldValidate: true,
+              });
+              replaceCcList(emptyCcGroups);
+              form.setValue("externalCC", [], {
+                shouldDirty: true,
+                shouldValidate: true,
+              });
+              form.setValue("nonSmartOfficeReceiverCCs", [], {
+                shouldDirty: true,
+                shouldValidate: true,
+              });
+              form.setValue("ccPrefix", "", {
+                shouldDirty: true,
+                shouldValidate: true,
+              });
+              form.setValue("ccSuffix", "", {
+                shouldDirty: true,
+                shouldValidate: true,
+              });
+            }
+          }
+          // Note: receivingUnitIds and externalCC are preserved for external records
+          // Note: toPositions and toEmployees are preserved for internal records
+          // This allows users to switch record types without losing their organization selections
+        });
+      }
+    });
+    return () => sub.unsubscribe();
+  }, [form, replaceCcList]);
+
+  // ✅ 5. Update header/footer previews dynamically when selected
+  useEffect(() => {
+    if (!shouldShowHeaderFooterSelection) {
+      setSelectedHeader("");
+      setSelectedFooter("");
+      return;
+    }
+
+    if (effectiveHeaders.length && selectedHeaderId) {
+      const h = effectiveHeaders.find((x) => x.id === selectedHeaderId);
+      if (h?.presigned)
+        setSelectedHeader(
+          `<div class="letter-header"><img src="${h.presigned}" alt="Header" style="width: 100%; max-height: 200px;" /></div>`,
+        );
+    }
+
+    if (effectiveFooters.length && selectedFooterId) {
+      const f = effectiveFooters.find((x) => x.id === selectedFooterId);
+      if (f?.presigned)
+        setSelectedFooter(
+          `<div class="letter-footer"><img src="${f.presigned}" alt="Footer" style="width: 100%; max-height: 200px;" /></div>`,
+        );
+    }
+  }, [
+    effectiveFooters,
+    effectiveHeaders,
+    selectedHeaderId,
+    selectedFooterId,
+    shouldShowHeaderFooterSelection,
+  ]);
+
+  const handleSubmit = async (values: CreateOrEditLetter) => {
+    try {
+      if (!validateCcEmployeesSelection(values.ccEmployees)) {
+        setHasSubmitted(true);
+        setShouldScrollToError(true);
+        toast.error(t("addRecord.formHasErrors"));
+        return;
+      }
+
+      if (shouldShowHeaderFooterSelection) {
+        const missingHeader =
+          !values.headerId ||
+          values.headerId === DISABLED_DIRECT_HEADER_FOOTER_VALUE;
+        const missingFooter =
+          !values.footerId ||
+          values.footerId === DISABLED_DIRECT_HEADER_FOOTER_VALUE;
+
+        if (missingHeader || missingFooter) {
+          if (missingHeader) {
+            form.setError("headerId", {
+              type: "manual",
+              message: t("msg.headerRequired"),
+            });
+          }
+
+          if (missingFooter) {
+            form.setError("footerId", {
+              type: "manual",
+              message: t("msg.footerRequired"),
+            });
+          }
+
+          setHasSubmitted(true);
+          setShouldScrollToError(true);
+          toast.error(t("addRecord.formHasErrors"));
+          return;
+        }
+
+        form.clearErrors(["headerId", "footerId"]);
+      }
+
+      const preferredLanguage = values.preferredLanguage === "en" ? "en" : "am";
+      const normalizedReceiversList = normalizeReceiverGroups(
+        values.ReceiversList,
+      );
+      const normalizedCCList = stripEmptyReceiverGroups(
+        normalizeReceiverGroups(values.ccList),
+      );
+      const normalizedFYRList = stripEmptyReceiverGroups(
+        normalizeReceiverGroups(values.forYourReferenceList),
+      );
+      const localizedReceiversList = localizeReceiverGroups(
+        normalizedReceiversList,
+        {
+          prefixOptions: recordPrefixesResponse,
+          suffixOptions: recordSuffixesResponse,
+          language: preferredLanguage,
+        },
+      );
+      const localizedCCList = localizeReceiverGroups(normalizedCCList, {
+        prefixOptions: ccPrefixesResponse,
+        suffixOptions: ccSuffixesResponse,
+        language: preferredLanguage,
+      });
+      const localizedFYRList = localizeReceiverGroups(normalizedFYRList, {
+        prefixOptions: ccPrefixesResponse, // FYR uses CC prefix/suffix
+        suffixOptions: ccSuffixesResponse,
+        language: preferredLanguage,
+      });
+
+      const receiversLegacy = buildLegacyGroupedValues(
+        localizedReceiversList,
+        receivingOptions,
+      );
+      const ccLegacy = buildLegacyGroupedValues(
+        localizedCCList,
+        ccReceivingOptions,
+      );
+      const fyrLegacy = buildLegacyGroupedValues(
+        localizedFYRList,
+        fyrReceivingOptions,
+      );
+
+      const normalizedValues: CreateOrEditLetter = {
+        ...values,
+        ReceiversList: localizedReceiversList,
+        ReceiverList: localizedReceiversList,
+        ccList: localizedCCList,
+        groupedTreeItems: receiversLegacy.groupedTreeItems,
+        groupedItems: receiversLegacy.groupedItems,
+        groupedCCTreeItems: ccLegacy.groupedTreeItems,
+        groupedFYRTreeItems: fyrLegacy.groupedTreeItems,
+        groupedCCItems: ccLegacy.groupedItems,
+        forYourReferenceList: localizedFYRList,
+        receivingUnitIds:
+          dedupeTreeItemsById(
+            receiversLegacy.units.length > 0
+              ? receiversLegacy.units
+              : values.receivingUnitIds || [],
+          ) || [],
+        externalCC:
+          dedupeTreeItemsById(
+            ccLegacy.units.length > 0
+              ? ccLegacy.units
+              : values.externalCC || [],
+          ) || [],
+        prefix: resolveLocalizedPrefixSuffixValue(
+          values.prefix ?? localizedReceiversList?.[0]?.prefix ?? "",
+          recordPrefixesResponse,
+          preferredLanguage,
+        ),
+        suffix: resolveLocalizedPrefixSuffixValue(
+          values.suffix ?? localizedReceiversList?.[0]?.suffix ?? "",
+          recordSuffixesResponse,
+          preferredLanguage,
+        ),
+        ccPrefix: resolveLocalizedPrefixSuffixValue(
+          values.ccPrefix ?? localizedCCList?.[0]?.prefix ?? "",
+          ccPrefixesResponse,
+          preferredLanguage,
+        ),
+        ccSuffix: resolveLocalizedPrefixSuffixValue(
+          values.ccSuffix ?? localizedCCList?.[0]?.suffix ?? "",
+          ccSuffixesResponse,
+          preferredLanguage,
+        ),
+        nonSmartOfficeReceivers:
+          receiversLegacy.names ?? values.nonSmartOfficeReceivers ?? [],
+        // FIX: Include FYR units
+        forYourReferenceUnitIds:
+          dedupeTreeItemsById(
+            fyrLegacy.units.length > 0
+              ? fyrLegacy.units
+              : values.forYourReferenceUnitIds || [],
+          ) || [],
+        nonSmartOfficeReceiverCCs:
+          ccLegacy.names ?? values.nonSmartOfficeReceiverCCs ?? [],
+        skipOneLevel: shouldShowCanSkipLevel
+          ? (values.skipOneLevel ?? false)
+          : false,
+      };
+
+      await onSubmit(normalizedValues, intentRef.current);
+      intentRef.current = "draft";
+      setHasSubmitted(true);
+      // Validate form before submission
+      // After successful submit → clear editor
+    } catch (error) {
+      if (surfaceCcEmployeesSubmitError(error)) {
+        return;
+      }
+
+      const message =
+        error instanceof Error && error.message
+          ? error.message
+          : t("msg.genericError");
+      toast.error(message);
+    }
+  };
+
+  const validateReceiversBeforePreview = async () => {
+    if (isExternalLikeRecordType(recordTypeValue)) {
+      return form.trigger([
+        "ReceiversList",
+        "receivingUnitIds",
+        "nonSmartOfficeReceivers",
+      ]);
+    }
+
+    if (
+      recordTypeValue === "internal" ||
+      recordTypeValue === "internal_memo" ||
+      recordTypeValue === "direct"
+    ) {
+      return form.trigger(["toPositions", "toEmployees"]);
+    }
+
+    return true;
+  };
+
+  const handlePreviewValidationFailure = () => {
+    setHasSubmitted(true);
+    setShouldScrollToError(true);
+    toast.error(t("addRecord.formHasErrors"));
+  };
+
+  const handleOpenPreview = async () => {
+    const receiversValid = await validateReceiversBeforePreview();
+    if (!receiversValid) {
+      handlePreviewValidationFailure();
+      return;
+    }
+
+    const currentValues = form.getValues();
+    const preferredLanguage =
+      currentValues.preferredLanguage === "en" ? "en" : "am";
+    const normalizedReceiversList = normalizeReceiverGroups(
+      currentValues.ReceiversList,
+    );
+    const normalizedCCList = normalizeReceiverGroups(currentValues.ccList);
+    const sanitizedCCList = stripEmptyReceiverGroups(normalizedCCList);
+    const localizedReceiversList = localizeReceiverGroups(
+      normalizedReceiversList,
+      {
+        prefixOptions: recordPrefixesResponse,
+        suffixOptions: recordSuffixesResponse,
+        language: preferredLanguage,
+      },
+    );
+    const localizedCCList = localizeReceiverGroups(sanitizedCCList, {
+      prefixOptions: ccPrefixesResponse,
+      suffixOptions: ccSuffixesResponse,
+      language: preferredLanguage,
+    });
+    const receiversLegacy = buildLegacyGroupedValues(
+      localizedReceiversList,
+      receivingOptions,
+    );
+    const ccLegacy = buildLegacyGroupedValues(
+      localizedCCList,
+      ccReceivingOptions,
+    );
+    const normalizedFYRList = normalizeReceiverGroups(
+      currentValues.forYourReferenceList,
+    );
+    const sanitizedFYRList = stripEmptyReceiverGroups(normalizedFYRList);
+    const localizedFYRList = localizeReceiverGroups(sanitizedFYRList, {
+      prefixOptions: ccPrefixesResponse,
+      suffixOptions: ccSuffixesResponse,
+      language: preferredLanguage,
+    });
+    const fyrLegacy = buildLegacyGroupedValues(
+      localizedFYRList,
+      fyrReceivingOptions,
+    );
+
+    const previewFormData = {
+      ...currentValues,
+      ReceiversList: localizedReceiversList,
+      ReceiverList: localizedReceiversList,
+      ccList: localizedCCList,
+      forYourReferenceList: localizedFYRList,
+      groupedFYRTreeItems: fyrLegacy.groupedTreeItems,
+      groupedFYRItems: fyrLegacy.groupedItems,
+      groupedTreeItems: receiversLegacy.groupedTreeItems,
+      groupedItems: receiversLegacy.groupedItems,
+      groupedCCTreeItems: ccLegacy.groupedTreeItems,
+      groupedCCItems: ccLegacy.groupedItems,
+      prefix: resolveLocalizedPrefixSuffixValue(
+        currentValues.prefix ?? localizedReceiversList?.[0]?.prefix ?? "",
+        recordPrefixesResponse,
+        preferredLanguage,
+      ),
+      suffix: resolveLocalizedPrefixSuffixValue(
+        currentValues.suffix ?? localizedReceiversList?.[0]?.suffix ?? "",
+        recordSuffixesResponse,
+        preferredLanguage,
+      ),
+      ccPrefix: resolveLocalizedPrefixSuffixValue(
+        currentValues.ccPrefix ?? localizedCCList?.[0]?.prefix ?? "",
+        ccPrefixesResponse,
+        preferredLanguage,
+      ),
+      ccSuffix: resolveLocalizedPrefixSuffixValue(
+        currentValues.ccSuffix ?? localizedCCList?.[0]?.suffix ?? "",
+        ccSuffixesResponse,
+        preferredLanguage,
+      ),
+      skipOneLevel: shouldShowCanSkipLevel
+        ? (currentValues.skipOneLevel ?? false)
+        : false,
+    };
+
+    setPreviewState({
+      formData: previewFormData,
+      files,
+      headers: effectiveHeaders,
+      footers: effectiveFooters,
+      positionsData: listAllDepartmentResponse || [],
+      employeesData: currentEmployeesResponse?.items || [],
+    });
+    setPreviewOpen(true);
+  };
+
+  const handleInvalidSubmit = (submitErrors: typeof form.formState.errors) => {
+    setHasSubmitted(true);
+    setShouldScrollToError(true);
+    // Surface the exact field paths and Zod messages so we can see why
+    // submit was blocked. The generic toast hides this detail otherwise.
+    const errors = submitErrors;
+    const flat: Array<{ path: string; type?: string; message?: string }> = [];
+    const walk = (obj: unknown, path: string): void => {
+      if (!obj || typeof obj !== "object") return;
+      const o = obj as Record<string, unknown>;
+      if (o.message || o.type) {
+        flat.push({
+          path: path || "(root)",
+          type: typeof o.type === "string" ? o.type : undefined,
+          message: typeof o.message === "string" ? o.message : undefined,
+        });
+        return;
+      }
+      for (const key of Object.keys(o)) {
+        walk(o[key], path ? `${path}.${key}` : key);
+      }
+    };
+    walk(errors, "");
+    console.error(
+      "[RecordForm] Submit validation failed",
+      "\n  errors flat:",
+      flat,
+      "\n  raw errors:",
+      errors,
+    );
+    toast.error(t("addRecord.formHasErrors"));
+  };
+
+  const submitForm = form.handleSubmit(handleSubmit, handleInvalidSubmit);
+
+  const onFormSubmit = async (e: React.BaseSyntheticEvent) => {
+    if (isSubmittingRef.current) {
+      e.preventDefault();
+      return;
+    }
+
+    isSubmittingRef.current = true;
+    try {
+      await submitForm(e);
+    } finally {
+      isSubmittingRef.current = false;
+    }
+  };
+
+  const renderSubmitLabel = (
+    intent: RecordFormIntent,
+    label: React.ReactNode,
+  ) =>
+    isLoading && intentRef.current === intent ? (
+      <>
+        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+        {t("userRecord.Submitting")}
+      </>
+    ) : (
+      label
+    );
+
+  // Also add a direct error watcher as backup
+  useEffect(() => {
+    const subscription = form.watch(() => {
+      // If we're watching for errors and an error occurs, trigger scroll
+      if (shouldScrollToError && form.formState.errors) {
+        const errors = form.formState.errors;
+        if (Object.keys(errors).length > 0) {
+          scrollToFirstError(errors);
+        }
+      }
+    });
+
+    return () => subscription.unsubscribe();
+  }, [form, shouldScrollToError, scrollToFirstError]);
+  const handleRefresh = async () => {
+    try {
+      setRefreshing(true);
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ["letterTemplates"] }),
+        queryClient.invalidateQueries({ queryKey: ["headers-footers"] }),
+        queryClient.invalidateQueries({ queryKey: ["prefixSuffix"] }),
+        queryClient.invalidateQueries({ queryKey: ["settings"] }),
+      ]);
+      toast.success(t("msg.refreshedSuccess"));
+    } catch {
+      toast.error(t("msg.refreshFailed"));
+    } finally {
+      setRefreshing(false);
+    }
+  };
+
+  const isFormLoading =
+    isSettingsLoading ||
+    isPrefixLoading ||
+    isCCLoading ||
+    isTemplateLoading ||
+    refreshing ||
+    isLoadingRecord;
+
+  if (isFormLoading) {
+    return <FullPageSpinner />;
+  }
+  return (
+    <Form {...form}>
+      {isLoading && (
+        <div
+          className="pointer-events-auto fixed inset-0 z-[100] flex items-center justify-center bg-white/80 backdrop-blur-sm dark:bg-gray-950/70"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Card className="w-96 shadow-2xl border-0 dark:bg-gray-800 dark:border-gray-700">
+            <CardContent className="p-8 flex flex-col items-center gap-4 dark:bg-gray-800">
+              <div className="flex items-center gap-3">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+                <span className="text-lg font-semibold dark:text-white">
+                  {t("userRecord.Submitting")}
+                </span>
+              </div>
+              <p className="text-muted-foreground dark:text-gray-400 text-center text-sm">
+                {t("addRecord.processingRequest")}
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      <Button
+        type="button"
+        variant="default"
+        onClick={handleOpenPreview}
+        disabled={isLoading || isPreviewLoading}
+        aria-label={t("preview.button")}
+        className="fixed right-0 top-1/2 z-40 h-14 w-11 -translate-y-1/2 rounded-l-lg rounded-r-none bg-primary-700 px-0 text-white shadow-lg hover:bg-primary-800 disabled:opacity-60"
+      >
+        {isPreviewLoading ? (
+          <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/40 border-t-white" />
+        ) : (
+          <div className="flex flex-col items-center gap-0.5">
+            <ChevronLeft className="h-5 w-5" />
+            <Eye className="h-4 w-4" />
+          </div>
+        )}
+      </Button>
+
+      <Sheet open={previewOpen} onOpenChange={setPreviewOpen}>
+        <SheetContent
+          side="right"
+          className="w-[96vw] max-w-none gap-0 p-0 sm:max-w-[92vw]"
+        >
+          <SheetTitle className="sr-only">{t("preview.title")}</SheetTitle>
+          {previewState && (
+            <RecordPreviewPage
+              isOpen={previewOpen}
+              onClose={() => setPreviewOpen(false)}
+              state={previewState}
+              unitId={unitId as string}
+              embedded
+            />
+          )}
+        </SheetContent>
+      </Sheet>
+
+      <div className="min-h-screen bg-gradient-to-br from-primary-50 to-primary-50/30 dark:from-gray-900 dark:to-gray-800">
+        <div className="max-w-7xl mx-auto px-4 py-8">
+          {/* Header Section */}
+          <Card className="mb-8 border-0 shadow-lg bg-gradient-to-r from-primary-800 to-primary-700 dark:from-primary-900 dark:to-primary-800 text-white">
+            <CardContent className="p-8">
+              <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
+                <div className="space-y-3">
+                  <div className="flex items-center gap-3">
+                    <div className="p-2 rounded-lg bg-white/10 backdrop-blur-sm">
+                      <svg
+                        className="w-6 h-6"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                        />
+                      </svg>
+                    </div>
+                    <Badge
+                      variant="secondary"
+                      className="bg-white/20 text-white border-0"
+                    >
+                      {isEditMode
+                        ? t("addRecord.Edit Mode")
+                        : t("addRecord.Create Mode")}
+                    </Badge>
+                  </div>
+                  <div>
+                    <h1 className="text-3xl font-bold tracking-tight">
+                      {isEditMode
+                        ? t("addRecord.Edit Record")
+                        : t("addRecord.Create New Record")}
+                    </h1>
+                    <p className="text-primary-300 mt-2 text-lg">
+                      {t("addRecord.Fill in the details below")}
+                    </p>
+                  </div>
+                </div>
+                <div className="flex flex-wrap gap-3">
+                  {canOpenCollaborationComments && (
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={() => setCommentsDialogOpen(true)}
+                      className="bg-white/10 hover:bg-white/20 border-white/20 text-white backdrop-blur-sm"
+                    >
+                      <MessageSquareText className="w-4 h-4 mr-2" />
+                      {t("collaboration.comments", "Comments")}
+                    </Button>
+                  )}
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={handleRefresh}
+                    className="bg-white/10 hover:bg-white/20 border-white/20 text-white backdrop-blur-sm"
+                  >
+                    <svg
+                      className="w-4 h-4 mr-2"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                      />
+                    </svg>
+                    {t("Refresh Options")}
+                  </Button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <form onSubmit={onFormSubmit} className="space-y-8">
+            {/* Basic Information Section */}
+            <Card className="border-0 shadow-lg hover:shadow-xl transition-all duration-300 dark:bg-gray-800 dark:border-gray-700">
+              <CardHeader className="pb-4 dark:bg-gray-800">
+                <div className="flex items-center gap-3">
+                  <div className="p-2 rounded-lg bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400">
+                    <svg
+                      className="w-5 h-5"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                      />
+                    </svg>
+                  </div>
+                  <div>
+                    <CardTitle className="text-xl dark:text-white">
+                      {t("addRecord.Basic Information")}
+                    </CardTitle>
+                    <CardDescription className="dark:text-gray-400">
+                      {t("addRecord.enterBasicDetails")}
+                    </CardDescription>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent className="dark:bg-gray-800">
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  <FormSelectField
+                    control={form.control}
+                    name="recordType"
+                    label={t("addRecord.Record Type")}
+                    options={recordTypeOptions}
+                    placeholder={t("addRecord.Select Record Type")}
+                    disabled={
+                      (isFromCollaboration && !canCollaboratorsEditRecord) ||
+                      isTeamRejectedEdit
+                    }
+                  />
+
+                  <FormSelectField
+                    control={form.control}
+                    name="initiatedAs"
+                    label={t("addRecord.Creation Type")}
+                    options={creationType}
+                    placeholder={t("addRecord.Select Creation Type")}
+                    disabled={
+                      (isFromCollaboration && !isTeamAdjustedEdit) ||
+                      isTeamRejectedEdit
+                    }
+                  />
+
+                  <FormSelectField
+                    control={form.control}
+                    name="initiationType"
+                    label={t("addRecord.Initiation Type")}
+                    options={filteredInitiationTypeOptions}
+                    placeholder={t("addRecord.Select Initiation Type")}
+                    disabled={
+                      (isFromCollaboration && !isTeamAdjustedEdit) ||
+                      isTeamRejectedEdit
+                    }
+                  />
+
+                  {isEditMode && isLoadingRecord && (
+                    <div className="space-y-1">
+                      <FormLabel>
+                        <span>
+                          {t("addRecord.Preferred Language")}
+                          <span className="text-destructive ml-1">*</span>
+                        </span>
+                      </FormLabel>
+                      <Skeleton className="h-10 w-full rounded-md" />
+                    </div>
+                  )}
+                  <div
+                    className={isEditMode && isLoadingRecord ? "hidden" : ""}
+                  >
+                    <FormSelectField
+                      control={form.control}
+                      name="preferredLanguage"
+                      label={t("addRecord.Preferred Language")}
+                      options={[
+                        { label: t("addRecord.English"), value: "en" },
+                        { label: t("addRecord.Amharic"), value: "am" },
+                      ]}
+                      placeholder={t("Select Language")}
+                      customLabel={
+                        <FormLabel>
+                          <span>
+                            {t("addRecord.Preferred Language")}
+                            <span className="text-destructive ml-1">*</span>
+                          </span>
+                        </FormLabel>
+                      }
+                    />
+                  </div>
+
+                  {(initiationType === "team" || isEditingExistingTeamRecord) &&
+                    canShowTeamInitiation && (
+                      <>
+                        {isFromCollaboration ? (
+                          <FormField
+                            control={form.control}
+                            name="collaborators"
+                            render={({ field }) => {
+                              const apiCollaborators =
+                                fullApiResponse?.collaborators || [];
+                              return (
+                                <div className="space-y-2">
+                                  <FormLabel>
+                                    {t("addRecord.Collaborators")}
+                                  </FormLabel>
+
+                                  <div className="min-h-10 rounded-md border bg-muted px-3 py-2 text-sm text-muted-foreground">
+                                    {apiCollaborators.length > 0
+                                      ? apiCollaborators
+                                          .map((collaborator: any) =>
+                                            localizedFormName(
+                                              collaborator.employeePosition
+                                                ?.employee?.name,
+                                            ),
+                                          )
+                                          .join(", ")
+                                      : t("addRecord.No Collaborators")}
+                                  </div>
+                                </div>
+                              );
+                            }}
+                          />
+                        ) : (
+                          <FormMultiSelectField
+                            control={form.control}
+                            name="collaborators"
+                            label={t("addRecord.Collaborators")}
+                            options={employeesList}
+                            placeholder={t("addRecord.Select Collaborators")}
+                            maxCount={5}
+                            disabled={isTeamRejectedEdit}
+                          />
+                        )}
+                        {!shouldCollaboratorAlwaysSign && (
+                          <FormField
+                            control={form.control}
+                            name="isWithTeamSignature"
+                            render={({ field }) => (
+                              <FormItem className="flex items-center gap-4 pt-8">
+                                <FormLabel className="text-sm font-medium">
+                                  {t("addRecord.isTeamSig")}
+                                </FormLabel>
+                                <FormControl>
+                                  <Switch
+                                    checked={field.value}
+                                    onCheckedChange={field.onChange}
+                                  />
+                                </FormControl>
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+                        )}
+                      </>
+                    )}
+
+                  <FormField
+                    control={form.control}
+                    name="subject"
+                    render={({ field }) => (
+                      <FormItem className="space-y-2">
+                        <FormLabel>
+                          <span>
+                            {t("addRecord.Subject")}
+                            <span className="text-destructive ml-1">*</span>
+                          </span>
+                        </FormLabel>
+                        <FormControl>
+                          <Input
+                            placeholder={t("addRecord.Enter Subject")}
+                            {...field}
+                            className="focus:ring-2 focus:ring-primary-500"
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="letterName"
+                    render={({ field }) => (
+                      <FormItem className="space-y-2">
+                        <FormLabel>
+                          <span>
+                            {t("addRecord.letterName")}
+                            <span className="text-destructive ml-1">*</span>
+                          </span>
+                        </FormLabel>
+                        <FormControl>
+                          <Input
+                            placeholder={t("addRecord.addLetterName")}
+                            {...field}
+                            className="focus:ring-2 focus:ring-primary-500"
+                            disabled={
+                              isFromCollaboration && !canCollaboratorsEditRecord
+                            }
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  {shouldShowReferenceNumberField && (
+                    <FormField
+                      control={form.control}
+                      name="referenceNumber"
+                      render={({ field }) => (
+                        <FormItem className="space-y-2">
+                          <FormLabel>
+                            <span>{t("addRecord.Reference Number")}</span>
+                          </FormLabel>
+                          <FormControl>
+                            <Input
+                              placeholder={t(
+                                "addRecord.Enter Reference Number",
+                              )}
+                              {...field}
+                              className="focus:ring-2 focus:ring-green-500"
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Recipients Section */}
+            <Card className="border-0 shadow-lg hover:shadow-xl transition-all duration-300 dark:bg-gray-800 dark:border-gray-700">
+              <CardHeader className="pb-4 dark:bg-gray-800">
+                <div className="flex items-center gap-3">
+                  <div className="p-2 rounded-lg bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400">
+                    <svg
+                      className="w-5 h-5"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+                      />
+                    </svg>
+                  </div>
+                  <div>
+                    <CardTitle className="text-xl dark:text-white">
+                      {t("addRecord.Recipients")}
+                    </CardTitle>
+                    <CardDescription className="dark:text-gray-400">
+                      {t("addRecord.specifyRecipients")}
+                    </CardDescription>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent className="dark:bg-gray-800">
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  {isExternalLikeRecordType(recordTypeValue) ? (
+                    <>
+                      <div className="space-y-6 col-span-full">
+                        <GroupedExternalReceiverBlock
+                          form={form}
+                          title={t("addRecord.Receiving Unit")}
+                          fieldArrayName="ReceiversList"
+                          prefixOptions={recordPrefixesResponse}
+                          suffixOptions={recordSuffixesResponse}
+                          treeLabel={t("addRecord.Receiving Unit")}
+                          addableLabel={t("addRecord.Non Smart Receiving Unit")}
+                          addablePlaceholder={t(
+                            "addRecord.Enter Non Smart Receiving Organization",
+                          )}
+                          initialOptions={receivingOptions}
+                          excludedIds={[
+                            ...externalCC,
+                            ...forYourReferenceUnitIds,
+                          ]}
+                          localizedName={localizedFormName}
+                          prefixLabel={t("addRecord.Prefix")}
+                          suffixLabel={t("addRecord.Suffix")}
+                          prefixPlaceholder={t("addRecord.Select Prefix")}
+                          suffixPlaceholder={t("addRecord.Select Suffix")}
+                          addLabel={t("addRecord.Add")}
+                          removeLabel={t("signatureUpload.remove")}
+                        />
+                      </div>
+                    </>
+                  ) : (
+                    <>
+                      <FormMultiSelectField
+                        control={form.control}
+                        name="toPositions"
+                        label={t("addRecord.To Departments")}
+                        options={listAllDepartmentResponse
+                          .filter((unit) => {
+                            const unitValue =
+                              unit.id && unit.id.trim() !== ""
+                                ? unit.id
+                                : unit.key || "";
+                            return !(
+                              internalCC.includes(unitValue) ||
+                              forYourReference.includes(unitValue)
+                            );
+                          })
+                          .map((unit: OrganizationsPositions) => ({
+                            label: localizedFormName(unit.name),
+                            value:
+                              unit.id && unit.id.trim() !== ""
+                                ? unit.id
+                                : unit.key || "",
+                          }))}
+                        placeholder={t("addRecord.Select Department")}
+                        maxCount={5}
+                      />
+                      <FormMultiSelectField
+                        control={form.control}
+                        name="toEmployees"
+                        label={t("addRecord.Receiving Users")}
+                        options={employeesList}
+                        placeholder={t("addRecord.Select Receiving Users")}
+                        maxCount={5}
+                      />
+                    </>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Template & Formatting Section */}
+            <Card className="border-0 shadow-lg hover:shadow-xl transition-all duration-300 dark:bg-gray-800 dark:border-gray-700">
+              <CardHeader className="pb-4 dark:bg-gray-800">
+                <div className="flex items-center gap-3">
+                  <div className="p-2 rounded-lg bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400">
+                    <svg
+                      className="w-5 h-5"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
+                      />
+                    </svg>
+                  </div>
+                  <div>
+                    <CardTitle className="text-xl dark:text-white">
+                      {t("addRecord.Template & Formatting")}
+                    </CardTitle>
+                    <CardDescription className="dark:text-gray-400">
+                      {t("addRecord.customizeAppearance")}
+                    </CardDescription>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent className="dark:bg-gray-800">
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  <FormItem className="min-w-0 space-y-2">
+                    <FormLabel>{t("addRecord.Letter Template")}</FormLabel>
+                    <SingleSelect
+                      onValueChange={(templateId) => {
+                        if (templateId === "unselect") {
+                          form.setValue("subject", "");
+                          form.setValue("body", "");
+                          form.setValue("sincerelyText", "", {
+                            shouldDirty: true,
+                            shouldValidate: true,
+                          });
+                          form.setValue("recordTemplateId", "", {
+                            shouldDirty: true,
+                            shouldValidate: true,
+                          });
+                        } else if (templateId && templateId.trim() !== "") {
+                          const selectedTemplate = letterTemplates.find(
+                            (t) => t.id === templateId,
+                          );
+                          if (selectedTemplate) {
+                            form.setValue("subject", selectedTemplate.subject);
+                            form.setValue("body", selectedTemplate.content);
+                            form.setValue(
+                              "sincerelyText",
+                              selectedTemplate.sincerelyText ?? "",
+                              {
+                                shouldDirty: true,
+                                shouldValidate: true,
+                              },
+                            );
+                          }
+                          form.setValue("recordTemplateId", templateId, {
+                            shouldDirty: true,
+                            shouldValidate: true,
+                          });
+                        }
+                      }}
+                      value={recordTemplateId || ""}
+                      options={letterTemplateOptions}
+                      placeholder={t("addRecord.Select Letter Template")}
+                      className="focus:ring-2 focus:ring-primary-500"
+                    />
+                  </FormItem>
+
+                  {shouldShowHeaderFooterSelection && (
+                    <>
+                      <FormSelectField
+                        control={form.control}
+                        name="headerId"
+                        label={t("addRecord.Header")}
+                        options={
+                          effectiveHeaders?.length
+                            ? effectiveHeaders.map((header) => ({
+                                label: localizedName(header.name),
+                                value: header.id,
+                              }))
+                            : [
+                                {
+                                  label: t("addRecord.No Header"),
+                                  value: "none",
+                                },
+                              ]
+                        }
+                        placeholder={
+                          effectiveHeaders?.length
+                            ? t("addRecord.Select Header")
+                            : t("addRecord.Loading Headers...")
+                        }
+                      />
+
+                      <FormSelectField
+                        control={form.control}
+                        name="footerId"
+                        label={t("addRecord.Footer")}
+                        options={
+                          effectiveFooters?.length
+                            ? effectiveFooters.map((footer) => ({
+                                label: localizedName(footer.name),
+                                value: footer.id,
+                              }))
+                            : [
+                                {
+                                  label: t("addRecord.No Footer"),
+                                  value: "none",
+                                },
+                              ]
+                        }
+                        placeholder={
+                          effectiveFooters?.length
+                            ? t("addRecord.Select Footer")
+                            : t("addRecord.Loading Footers...")
+                        }
+                      />
+                    </>
+                  )}
+
+                  <FormField
+                    control={form.control}
+                    name="sincerelyText"
+                    render={({ field }) => (
+                      <FormItem
+                        className="space-y-2"
+                        data-field="sincerelyText"
+                      >
+                        <FormLabel>{t("addRecord.Sincerely Text")}</FormLabel>
+                        <FormControl>
+                          <Input
+                            placeholder={t("addRecord.Enter Sincerely Text")}
+                            {...field}
+                            className="focus:ring-2 focus:ring-primary-500"
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Letter Content Section */}
+            <Card className="border-0 shadow-lg hover:shadow-xl transition-all duration-300 dark:bg-gray-800 dark:border-gray-700">
+              <CardHeader className="pb-4 dark:bg-gray-800">
+                <div className="flex items-center gap-3">
+                  <div className="p-2 rounded-lg bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400">
+                    <svg
+                      className="w-5 h-5"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+                      />
+                    </svg>
+                  </div>
+                  <div>
+                    <CardTitle className="text-xl dark:text-white">
+                      {t("addRecord.Letter Content")}
+                    </CardTitle>
+                    <CardDescription className="dark:text-gray-400">
+                      {t("addRecord.writeLetterContent")}
+                    </CardDescription>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-6 dark:bg-gray-800">
+                {shouldShowHeaderFooterSelection && selectedHeader && (
+                  <div className="bg-muted rounded-lg p-4 border-2 border-dashed border-muted-foreground/20">
+                    <p className="text-sm font-medium text-muted-foreground mb-2">
+                      {t("addRecord.Header Preview")}
+                    </p>
+                    <div dangerouslySetInnerHTML={{ __html: selectedHeader }} />
+                  </div>
+                )}
+                <Card
+                  ref={editorSectionRef}
+                  className={`border-0 shadow-lg hover:shadow-xl transition-all duration-300 ${
+                    lastErrorField === "body"
+                      ? "ring-4 ring-destructive ring-offset-2"
+                      : ""
+                  }`}
+                >
+                  <FormField
+                    control={form.control}
+                    name="body"
+                    render={({ field }) => (
+                      <FormItem className="w-full">
+                        <FormLabel>
+                          <span>
+                            {t("addRecord.Body")}
+                            <span className="text-destructive ml-1">*</span>
+                          </span>
+                        </FormLabel>
+                        <RichTextEditor
+                          value={field.value}
+                          onChange={field.onChange}
+                          shouldClear={shouldClearEditor}
+                        />
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </Card>
+
+                {shouldShowHeaderFooterSelection && selectedFooter && (
+                  <div className="bg-muted rounded-lg p-4 border-2 border-dashed border-muted-foreground/20">
+                    <p className="text-sm font-medium text-muted-foreground mb-2">
+                      {t("addRecord.Footer Preview")}
+                    </p>
+                    <div dangerouslySetInnerHTML={{ __html: selectedFooter }} />
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+
+            {/* Carbon Copy (CC) Section */}
+            <Card className="border-0 shadow-lg hover:shadow-xl transition-all duration-300 dark:bg-gray-800 dark:border-gray-700">
+              <CardHeader className="pb-4 dark:bg-gray-800">
+                <div className="flex items-center gap-3">
+                  <div className="p-2 rounded-lg bg-cyan-100 dark:bg-cyan-900/30 text-cyan-600 dark:text-cyan-400">
+                    <svg
+                      className="w-5 h-5"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"
+                      />
+                    </svg>
+                  </div>
+                  <div>
+                    <CardTitle className="text-xl dark:text-white">
+                      {t("addRecord.Carbon Copy (CC)")}
+                    </CardTitle>
+                    <CardDescription className="dark:text-gray-400">
+                      {t("addRecord.addCCRecipients")}
+                    </CardDescription>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent className="dark:bg-gray-800">
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  <FormMultiSelectField
+                    control={form.control}
+                    name="internalCC"
+                    label={t("addRecord.Internal CC")}
+                    options={listAllDepartmentResponse
+                      .filter((unit) => {
+                        const unitValue =
+                          unit.id && unit.id.trim() !== ""
+                            ? unit.id
+                            : unit.key || "";
+                        return !(
+                          toPositions.includes(unitValue) ||
+                          forYourReference.includes(unitValue)
+                        );
+                      })
+                      .map((unit: OrganizationsPositions) => ({
+                        label: localizedFormName(unit.name),
+                        value:
+                          unit.id && unit.id.trim() !== ""
+                            ? unit.id
+                            : unit.key || "",
+                      }))}
+                    placeholder={t("addRecord.Select Internal CC")}
+                    maxCount={5}
+                  />
+
+                  <div data-field="ccEmployees">
+                    <FormMultiSelectField
+                      control={form.control}
+                      name="ccEmployees"
+                      label={t("addRecord.ccUsers")}
+                      options={ccEmployeeOptions}
+                      placeholder={t("addRecord.selectCCUsers")}
+                      maxCount={5}
+                      onCustomChange={validateCcEmployeesSelection}
+                    />
+                  </div>
+                  <>
+                    {" "}
+                    {recordTypeValue !== "internal_memo" &&
+                      recordTypeValue !== "direct" && (
+                        <div className="space-y-6 col-span-full">
+                          <GroupedExternalReceiverBlock
+                            form={form}
+                            title={t("nav.cc")}
+                            fieldArrayName="ccList"
+                            prefixOptions={ccPrefixesResponse}
+                            suffixOptions={ccSuffixesResponse}
+                            treeLabel={t("addRecord.External CC")}
+                            addableLabel={t("addRecord.Non Smart CC Unit")}
+                            addablePlaceholder={t(
+                              "addRecord.Enter Non Smart CC Organization",
+                            )}
+                            initialOptions={ccReceivingOptions}
+                            excludedIds={[
+                              ...receivingUnitIds,
+                              ...forYourReferenceUnitIds,
+                            ]}
+                            localizedName={localizedFormName}
+                            prefixLabel={t("addRecord.Prefix")}
+                            suffixLabel={t("addRecord.Suffix")}
+                            prefixPlaceholder={t("addRecord.Select Prefix")}
+                            suffixPlaceholder={t("addRecord.Select Suffix")}
+                            addLabel={t("addRecord.Add")}
+                            removeLabel={t("signatureUpload.remove")}
+                          />
+                        </div>
+                      )}
+                  </>
+                  {shouldIncludeForYourReferenceInCC && (
+                    <div className="space-y-6 col-span-full">
+                      <GroupedExternalReceiverBlock
+                        form={form}
+                        title={t("addRecord.forYourReferenceExternal")}
+                        fieldArrayName="forYourReferenceList"
+                        prefixOptions={ccPrefixesResponse}
+                        suffixOptions={ccSuffixesResponse}
+                        treeLabel={t("addRecord.forYourReferenceExternal")}
+                        addableLabel={t("addRecord.Non Smart FYR Unit")}
+                        addablePlaceholder={t(
+                          "addRecord.Enter Non Smart FYR Organization",
+                        )}
+                        initialOptions={fyrReceivingOptions}
+                        excludedIds={[...receivingUnitIds, ...externalCC]}
+                        localizedName={localizedFormName}
+                        prefixLabel={t("addRecord.Prefix")}
+                        suffixLabel={t("addRecord.Suffix")}
+                        prefixPlaceholder={t("addRecord.Select Prefix")}
+                        suffixPlaceholder={t("addRecord.Select Suffix")}
+                        addLabel={t("addRecord.Add")}
+                        removeLabel={t("signatureUpload.remove")}
+                      />
+                    </div>
+                  )}
+                  {/* For Your Reference (Internal) */}
+                  {shouldIncludeForYourReferenceInCC && (
+                    <FormMultiSelectField
+                      control={form.control}
+                      name="forYourReference"
+                      label={t("addRecord.forYourReferenceInternal")}
+                      options={listAllDepartmentResponse
+                        .filter((unit) => {
+                          const unitValue =
+                            unit.id && unit.id.trim() !== ""
+                              ? unit.id
+                              : unit.key || "";
+                          return !(
+                            toPositions.includes(unitValue) ||
+                            internalCC.includes(unitValue)
+                          );
+                        })
+                        .map((unit: OrganizationsPositions) => ({
+                          label: localizedFormName(unit.name),
+                          value:
+                            unit.id && unit.id.trim() !== ""
+                              ? unit.id
+                              : unit.key || "",
+                        }))}
+                      placeholder={t("addRecord.selectForYourReference")}
+                      maxCount={5}
+                    />
+                  )}
+
+                  {shouldShowCanSkipLevel && (
+                    <FormField
+                      control={form.control}
+                      name="skipOneLevel"
+                      render={({ field }) => (
+                        <FormItem className="flex min-h-10 items-center justify-between gap-4 rounded-md border px-3 py-2 dark:border-gray-700">
+                          <FormLabel className="text-sm font-medium">
+                            {t(
+                              "addRecord.skipOneLevel",
+                              "Should Jump One Step",
+                            )}
+                          </FormLabel>
+                          <FormControl>
+                            <Switch
+                              checked={field.value ?? false}
+                              onCheckedChange={field.onChange}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Attachments Section */}
+            <Card className="border-0 shadow-lg hover:shadow-xl transition-all duration-300 dark:bg-gray-800 dark:border-gray-700">
+              <CardHeader className="pb-4 dark:bg-gray-800">
+                <div className="flex items-center gap-3">
+                  <div className="p-2 rounded-lg bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400">
+                    <svg
+                      className="w-5 h-5"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"
+                      />
+                    </svg>
+                  </div>
+                  <div>
+                    <CardTitle className="text-xl dark:text-white">
+                      {t("addRecord.Attachments")}
+                    </CardTitle>
+                    <CardDescription className="dark:text-gray-400">
+                      {t("addRecord.uploadSupportingDocuments")}
+                    </CardDescription>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-6 dark:bg-gray-800">
+                <p className="text-muted-foreground text-sm">
+                  {t("addRecord.attachment")}
+                </p>
+
+                {form.getValues("mode") === "edit" &&
+                  existingAttachmentComponent &&
+                  existingAttachmentComponent}
+
+                {/* Action buttons row */}
+                {tenantConfig?.moduleConfig?.dms && (
+                  <div className="flex flex-wrap gap-4 mb-4">
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={handleLocalUploadClick}
+                      className="flex items-center gap-2 border-2 hover:bg-primary-100 dark:hover:bg-gray-700 dark:border-gray-600 dark:text-gray-200 transition-all duration-200"
+                    >
+                      <Upload className="h-4 w-4" />
+                      {t("addRecord.uploadFromComputer") ||
+                        "Upload from Computer"}
+                    </Button>
+                    {canUseAttachmentFromDMS && (
+                      <Button
+                        type="button"
+                        variant="outline"
+                        onClick={() => setIsDmsPickerOpen(true)}
+                        className="flex items-center gap-2 border-2 hover:bg-primary-100 dark:hover:bg-gray-700 dark:border-gray-600 dark:text-gray-200 transition-all duration-200"
+                      >
+                        <Cloud className="h-4 w-4" />
+                        {t("addRecord.addAttachmentFromDms") ||
+                          "+ Add Attachment from DMS"}
+                      </Button>
+                    )}
+                    <input
+                      type="file"
+                      ref={localFileInputRef}
+                      className="hidden"
+                      multiple
+                      onChange={handleLocalFileChange}
+                    />
+                  </div>
+                )}
+
+                <ReusableFileUploader
+                  setFiles={setFiles}
+                  files={files}
+                  isLoading={false}
+                />
+
+                {/* DMS attachments list */}
+                {canUseAttachmentFromDMS &&
+                  dmsAttachments &&
+                  dmsAttachments.length > 0 && (
+                    <div className="flex flex-col gap-4 mt-4 max-h-48 overflow-y-auto px-3">
+                      {dmsAttachments.map((doc) => (
+                        <DmsAttachmentItem
+                          key={doc.id}
+                          doc={doc}
+                          onRemove={() => handleRemoveDmsAttachment(doc.id)}
+                        />
+                      ))}
+                    </div>
+                  )}
+
+                {canUseAttachmentFromDMS && (
+                  <DmsFilePickerModal
+                    isOpen={isDmsPickerOpen}
+                    onClose={() => setIsDmsPickerOpen(false)}
+                    onAttach={handleAttachDmsDocs}
+                  />
+                )}
+              </CardContent>
+            </Card>
+
+            {/* Action Buttons */}
+            <Card className="border-0 shadow-lg bg-gradient-to-r from-primary-50 to-primary-50/50 dark:from-gray-800 dark:to-gray-700 dark:border-gray-700">
+              <CardContent className="p-6 dark:bg-transparent">
+                <div className="flex flex-col sm:flex-row gap-4 justify-end">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => {
+                      const currentDefaults = getFormDefaultValues();
+                      form.reset(currentDefaults);
+                      if (currentDefaults.ccList) {
+                        replaceCcList(currentDefaults.ccList);
+                      }
+                      if (currentDefaults.ReceiversList) {
+                        replaceReceiversList(currentDefaults.ReceiversList);
+                      }
+                      if (currentDefaults.forYourReferenceList) {
+                        replaceForYourReferenceList(
+                          currentDefaults.forYourReferenceList,
+                        );
+                      }
+                      if (window.history.length > 1) {
+                        navigate(-1);
+                      } else {
+                        navigate(fallbackReturnUrl);
+                      }
+                    }}
+                    className="px-8 border-2 hover:bg-primary-100 dark:hover:bg-gray-700 dark:border-gray-600 dark:text-gray-200 transition-all duration-200"
+                  >
+                    {t("common.Cancel")}
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={handleOpenPreview}
+                    disabled={isLoading || isPreviewLoading}
+                    className="px-8 border-2 border-primary-200 bg-primary-50 text-primary-700 hover:bg-primary-100 hover:text-primary-800 dark:border-primary-800 dark:bg-primary-900/40 dark:text-primary-400 dark:hover:bg-primary-900/60 dark:hover:text-primary-300 transition-all duration-200"
+                  >
+                    <svg
+                      className="w-4 h-4 mr-2"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                      />
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                      />
+                    </svg>
+                    {isPreviewLoading
+                      ? t("preview.generating")
+                      : t("preview.button")}
+                  </Button>
+                  {(!isFromCollaboration || canEditWhileCollaborating) && (
+                    <Button
+                      type="submit"
+                      disabled={isLoading}
+                      onClick={() => {
+                        intentRef.current = "draft";
+                      }}
+                      className="px-8 bg-gradient-to-r from-primary-600 to-primary-700 hover:from-primary-700 hover:to-primary-800 text-white shadow-lg hover:shadow-xl dark:from-primary-700 dark:to-primary-800 dark:hover:from-primary-600 dark:hover:to-primary-700 transition-all duration-200"
+                    >
+                      {renderSubmitLabel("draft", t("common.saveAsDraft"))}
+                    </Button>
+                  )}
+                  {!isCurrentRecordDirect &&
+                    (!isFromCollaboration || canEditWhileCollaborating) &&
+                    hasParent && (
+                      <Button
+                        type="submit"
+                        disabled={isLoading}
+                        onClick={() => {
+                          intentRef.current = "forward";
+                        }}
+                        className="px-8 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white shadow-lg hover:shadow-xl dark:from-blue-700 dark:to-blue-800 dark:hover:from-blue-600 dark:hover:to-blue-700 transition-all duration-200"
+                      >
+                        {renderSubmitLabel(
+                          "forward",
+                          isEditMode
+                            ? t("userRecord.updateAndForward")
+                            : t("userRecord.createAndForward"),
+                        )}
+                      </Button>
+                    )}
+                  {!isFromCollaboration && recordTypeValue === "direct" && (
+                    <Button
+                      type="submit"
+                      disabled={isLoading}
+                      onClick={() => {
+                        intentRef.current = "direct";
+                      }}
+                      className="px-8 bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-600 hover:to-amber-700 text-white shadow-lg hover:shadow-xl dark:from-amber-600 dark:to-amber-700 dark:hover:from-amber-500 dark:hover:to-amber-600 transition-all duration-200"
+                    >
+                      {isEditMode
+                        ? t("userRecord.updateAndSend")
+                        : t("userRecord.createAndSend")}
+                    </Button>
+                  )}
+                  {canApprove &&
+                    isExternalLikeRecordType(recordTypeValue) &&
+                    !isCurrentRecordDirect &&
+                    !isFromCollaboration &&
+                    !(initiationType === "team") && (
+                      <Button
+                        type="submit"
+                        disabled={isLoading}
+                        onClick={() => {
+                          intentRef.current = "approve";
+                        }}
+                        className="px-8 bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 text-white shadow-lg hover:shadow-xl dark:from-purple-700 dark:to-purple-800 dark:hover:from-purple-600 dark:hover:to-purple-700 transition-all duration-200"
+                      >
+                        {renderSubmitLabel(
+                          "approve",
+                          isEditMode
+                            ? t("userRecord.updateAndApprove")
+                            : t("userRecord.createAndApprove"),
+                        )}
+                      </Button>
+                    )}
+                  {canapproveinternal &&
+                    recordTypeValue === "internal" &&
+                    !isCurrentRecordDirect &&
+                    !isFromCollaboration &&
+                    !(initiationType === "team") && (
+                      <Button
+                        type="submit"
+                        disabled={isLoading}
+                        onClick={() => {
+                          intentRef.current = "approve";
+                        }}
+                        className="px-8 bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 text-white shadow-lg hover:shadow-xl dark:from-purple-700 dark:to-purple-800 dark:hover:from-purple-600 dark:hover:to-purple-700 transition-all duration-200"
+                      >
+                        {renderSubmitLabel(
+                          "approve",
+                          isEditMode
+                            ? t("userRecord.updateAndApprove")
+                            : t("userRecord.createAndApprove"),
+                        )}
+                      </Button>
+                    )}
+                  {canapproveinternalMemo &&
+                    recordTypeValue === "internal_memo" &&
+                    !isCurrentRecordDirect &&
+                    !isFromCollaboration &&
+                    !(initiationType === "team") && (
+                      <Button
+                        type="submit"
+                        disabled={isLoading}
+                        onClick={() => {
+                          intentRef.current = "approve";
+                        }}
+                        className="px-8 bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 text-white shadow-lg hover:shadow-xl dark:from-purple-700 dark:to-purple-800 dark:hover:from-purple-600 dark:hover:to-purple-700 transition-all duration-200"
+                      >
+                        {renderSubmitLabel(
+                          "approve",
+                          isEditMode
+                            ? t("userRecord.updateAndApprove")
+                            : t("userRecord.createAndApprove"),
+                        )}
+                      </Button>
+                    )}
+                </div>
+              </CardContent>
+            </Card>
+          </form>
+
+          {canOpenCollaborationComments && effectiveRecordId && (
+            <CollaborationCommentsDialog
+              open={commentsDialogOpen}
+              onClose={() => setCommentsDialogOpen(false)}
+              recordId={effectiveRecordId}
+              contentId={currentContentId}
+              collaborationId={currentUserCollaborationId}
+              recordStatus={""}
+            />
+          )}
+        </div>
+      </div>
+    </Form>
+  );
+};
+
+export default RecordForm;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/recordSubmissionHandler.ts b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/recordSubmissionHandler.ts
new file mode 100644
index 000000000..eda882cd5
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/recordSubmissionHandler.ts
@@ -0,0 +1,3 @@
+class RecordSubmissionHandler {}
+
+export default RecordSubmissionHandler;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/recordTabsWrapper.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/recordTabsWrapper.tsx
new file mode 100644
index 000000000..e1b6fafc6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/recordTabsWrapper.tsx
@@ -0,0 +1,35 @@
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+} from "@/shared/common/ui/tabs";
+import React from "react";
+
+type RecordTab = "record" | "attachments";
+
+interface RecordTabsWrapperProps {
+  activeTab: RecordTab;
+  setActiveTab: (tab: RecordTab) => void;
+  children: React.ReactNode;
+}
+
+export const RecordTabsWrapper: React.FC<RecordTabsWrapperProps> = ({
+  activeTab,
+  setActiveTab,
+  children,
+}) => {
+  return (
+    <Tabs
+      value={activeTab}
+      onValueChange={(val) => setActiveTab(val as RecordTab)}
+      className="w-full"
+    >
+      <TabsList className="grid grid-cols-2 w-[300px] mx-auto mb-6">
+        <TabsTrigger value="record">Record</TabsTrigger>
+        <TabsTrigger value="attachments">Attachments</TabsTrigger>
+      </TabsList>
+      {children}
+    </Tabs>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/recordViewConstructor.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/recordViewConstructor.tsx
new file mode 100644
index 000000000..b60eebe02
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/recordViewConstructor.tsx
@@ -0,0 +1,118 @@
+import React from "react";
+import Html from "react-pdf-html";
+import arialFont from "@/record-management/fonts/arial.ttf"; // Adjust the path as necessary
+import {
+  Page,
+  Text,
+  Font,
+  View,
+  Image,
+  Document,
+  StyleSheet,
+  PDFViewer,
+} from "@react-pdf/renderer";
+
+// Register font
+Font.register({
+  family: "Arial",
+  src: arialFont,
+});
+Font.register({
+  family: "Verdana",
+  src: arialFont,
+});
+Font.register({
+  family: "sans-serif",
+  src: arialFont,
+});
+
+const styles = StyleSheet.create({
+  page: {
+    // fontSize: 12,
+    // fontFamily: "Arial",
+    paddingTop: 70,
+    paddingBottom: 70,
+    paddingHorizontal: 35,
+    position: "relative",
+  },
+  headerContainer: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    height: 50,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  footerContainer: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 50,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  headerImage: {
+    width: "100%",
+    height: "100%",
+    objectFit: "cover",
+  },
+  footerImage: {
+    width: "100%",
+    height: "100%",
+    objectFit: "cover",
+  },
+  content: {
+    marginTop: 60,
+    marginBottom: 60,
+  },
+});
+
+interface PdfViewerProps {
+  htmlBody: string;
+  header: string;
+  footer: string;
+}
+
+const RecordLetterPdfObjectPreview: React.FC<PdfViewerProps> = ({
+  htmlBody,
+  header,
+  footer,
+}) => {
+  const isHeaderImage = typeof header === "string" && header.startsWith("http");
+  const isFooterImage = typeof footer === "string" && footer.startsWith("http");
+
+  return (
+    <PDFViewer style={{ width: "100%", height: "90vh" }}>
+      <Document>
+        <Page size="A4" style={styles.page} wrap>
+          {/* Header (repeats on every page) */}
+          <View style={styles.headerContainer} fixed>
+            {isHeaderImage ? (
+              <Image src={header} style={styles.headerImage} />
+            ) : (
+              <Text>{header || "Default Header Text"}</Text>
+            )}
+          </View>
+
+          {/* Main Content */}
+          <View style={styles.content}>
+            <Html>{htmlBody}</Html>
+          </View>
+
+          {/* Footer (repeats on every page) */}
+          <View style={styles.footerContainer} fixed>
+            {isFooterImage ? (
+              <Image src={footer} style={styles.footerImage} />
+            ) : (
+              <Text>{footer || "Default Footer Text"}</Text>
+            )}
+          </View>
+        </Page>
+      </Document>
+    </PDFViewer>
+  );
+};
+
+export default RecordLetterPdfObjectPreview;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/treeUtils.ts b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/treeUtils.ts
new file mode 100644
index 000000000..c6af4c2a4
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/treeUtils.ts
@@ -0,0 +1,161 @@
+// treeUtils.ts
+import { TreeViewItem } from "@/shared/common/ui/treeSelect";
+
+import { UseFormReturn } from "react-hook-form";
+
+// Helper to get all checked items (including from children)
+export const getCheckedItems = (items: TreeViewItem[]): TreeViewItem[] => {
+  let checkedItems: TreeViewItem[] = [];
+  items.forEach((item) => {
+    if (item.checked) {
+      checkedItems.push(item);
+    }
+    if (item.children) {
+      checkedItems = [...checkedItems, ...getCheckedItems(item.children)];
+    }
+  });
+  return checkedItems;
+};
+
+// Update children's checked state (only when parent is explicitly changed)
+export const updateChildrenState = (
+  children: TreeViewItem[],
+  checked: boolean
+): TreeViewItem[] => {
+  return children.map((child) => ({
+    ...child,
+    checked,
+    children: child.children
+      ? updateChildrenState(child.children, checked)
+      : undefined,
+  }));
+};
+
+// Update parent state based on children
+export const updateParentState = (item: TreeViewItem): TreeViewItem => {
+  if (!item.children || item.children.length === 0) {
+    return item;
+  }
+
+  const allChildrenChecked = item.children.every((child) => child.checked);
+  const someChildrenChecked = item.children.some((child) => child.checked);
+
+  return {
+    ...item,
+    checked: allChildrenChecked
+      ? true
+      : someChildrenChecked
+      ? "indeterminate"
+      : false,
+    children: item.children.map(updateParentState),
+  };
+};
+
+// Main function to update check state
+export const updateCheckState = (
+  treeItems: TreeViewItem[],
+  itemsArray: TreeViewItem[],
+  checked: boolean
+): TreeViewItem[] => {
+  return treeItems
+    .map((currentItem) => {
+      // Check if current item is in the changed items
+      const isItemChanged = itemsArray.some(
+        (item) => item.id === currentItem.id
+      );
+
+      if (isItemChanged) {
+        // Update this item and all its children
+        return {
+          ...currentItem,
+          checked,
+          children: currentItem.children
+            ? updateChildrenState(currentItem.children, checked)
+            : undefined,
+        };
+      }
+
+      // If not changed, check children recursively
+      if (currentItem.children) {
+        return {
+          ...currentItem,
+          children: updateCheckState(currentItem.children, itemsArray, checked),
+        };
+      }
+
+      return currentItem;
+    })
+    .map(updateParentState); // Update parent states after children are updated
+};
+
+// Get only the checked items from the tree
+export const getAllCheckedItems = (tree: TreeViewItem[]): TreeViewItem[] => {
+  return tree.flatMap((item) => {
+    const checkedItems: TreeViewItem[] = [];
+
+    // Only include items that are explicitly checked (not indeterminate)
+    if (item.checked === true && item.children?.length == 0) {
+      checkedItems.push({
+        id: item.id,
+        name: item.name,
+        hierarchyType: item.hierarchyType,
+        checked: item.checked,
+      });
+    }
+
+    // Recursively check children
+    if (item.children) {
+      checkedItems.push(...getAllCheckedItems(item.children));
+    }
+
+    return checkedItems;
+  });
+};
+
+export const getLeafCheckedItems = (tree: TreeViewItem[]): TreeViewItem[] => {
+  return getAllCheckedItems(tree);
+};
+
+// Main handler function
+export function handleTreeViewChange(
+  items: TreeViewItem | TreeViewItem[],
+  checked: boolean,
+  fieldName: string,
+  options: TreeViewItem[],
+  setOptions: React.Dispatch<React.SetStateAction<TreeViewItem[]>>,
+  form: UseFormReturn<any>
+) {
+  const itemsArray = Array.isArray(items) ? items : [items];
+  
+  // Update the tree state
+  const updatedOptions = updateCheckState(options, itemsArray, checked);
+  
+
+  setOptions(updatedOptions);
+
+  // Get only the leaf nodes that are checked
+  const leafCheckedItems = getLeafCheckedItems(updatedOptions);
+  
+  form.setValue(fieldName, leafCheckedItems);
+}
+
+export const getCheckedLeafNodes = (tree: TreeViewItem[]): TreeViewItem[] => {
+  const checkedItems: TreeViewItem[] = [];
+
+  tree?.forEach((item) => {
+    if (item.checked === true) {
+      checkedItems.push({
+        id: item.id,
+        name: item.name,
+        hierarchyType: item.hierarchyType,
+        checked: true,
+      });
+    }
+
+    if (item.children) {
+      checkedItems.push(...getCheckedLeafNodes(item.children));
+    }
+  });
+
+  return checkedItems;
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/useRecordFormHandlers.ts b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/useRecordFormHandlers.ts
new file mode 100644
index 000000000..fb29d1265
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/common/useRecordFormHandlers.ts
@@ -0,0 +1,160 @@
+import { useCallback } from "react";
+import { UseFormReturn } from "react-hook-form";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import type { CreateOrEditLetter } from "./formSchema";
+import type { TreeViewItem } from "@/shared/common/ui/treeSelect";
+import { handleTreeViewChange } from "./treeUtils";
+
+interface RecordFormHandlersParams {
+  form: UseFormReturn<CreateOrEditLetter>;
+  receivingOptions: TreeViewItem[];
+  setReceivingOptions: React.Dispatch<React.SetStateAction<TreeViewItem[]>>;
+  ccReceivingOptions: TreeViewItem[];
+  setCcReceivingOptions: React.Dispatch<React.SetStateAction<TreeViewItem[]>>;
+  nonSmartOfficeUnits: string[];
+  setNonSmartOfficeUnits: React.Dispatch<React.SetStateAction<string[]>>;
+  nonSmartOfficeCCUnits: string[];
+  setNonSmartOfficeCCUnits: React.Dispatch<React.SetStateAction<string[]>>;
+  setHasSubmitted: React.Dispatch<React.SetStateAction<boolean>>;
+  setShouldScrollToError: React.Dispatch<React.SetStateAction<boolean>>;
+  onSubmit: (values: CreateOrEditLetter) => void | Promise<void>;
+}
+
+export function useRecordFormHandlers({
+  form,
+  receivingOptions,
+  setReceivingOptions,
+  ccReceivingOptions,
+  setCcReceivingOptions,
+  nonSmartOfficeUnits,
+  setNonSmartOfficeUnits,
+  nonSmartOfficeCCUnits,
+  setNonSmartOfficeCCUnits,
+  setHasSubmitted,
+  setShouldScrollToError,
+  onSubmit,
+}: RecordFormHandlersParams) {
+  const { t } = useTranslation();
+
+  const handleCheckChange = useCallback(
+    (items: TreeViewItem | TreeViewItem[], checked: boolean) =>
+      handleTreeViewChange(
+        items,
+        checked,
+        "receivingUnitIds",
+        receivingOptions,
+        setReceivingOptions,
+        form,
+      ),
+    [receivingOptions, setReceivingOptions, form],
+  );
+
+  const handleCcCheckChange = useCallback(
+    (items: TreeViewItem | TreeViewItem[], checked: boolean) =>
+      handleTreeViewChange(
+        items,
+        checked,
+        "externalCC",
+        ccReceivingOptions,
+        setCcReceivingOptions,
+        form,
+      ),
+    [ccReceivingOptions, setCcReceivingOptions, form],
+  );
+
+  const handleDeleteUnit = useCallback(
+    (field: "nonSmartOfficeReceivers" | "nonSmartOfficeReceiverCCs") =>
+      (_value: string, index: number) => {
+        const current =
+          field === "nonSmartOfficeReceivers"
+            ? nonSmartOfficeUnits
+            : nonSmartOfficeCCUnits;
+        const updated = current.filter((_, i) => i !== index);
+
+        if (field === "nonSmartOfficeReceivers") {
+          setNonSmartOfficeUnits(updated);
+        } else {
+          setNonSmartOfficeCCUnits(updated);
+        }
+
+        form.setValue(field, updated);
+      },
+    [nonSmartOfficeUnits, nonSmartOfficeCCUnits, setNonSmartOfficeUnits, setNonSmartOfficeCCUnits, form],
+  );
+
+  const handleAdd = useCallback(
+    (field: "nonSmartOfficeReceivers" | "nonSmartOfficeReceiverCCs") =>
+      (value: string) => {
+        const current =
+          field === "nonSmartOfficeReceivers"
+            ? nonSmartOfficeUnits
+            : nonSmartOfficeCCUnits;
+        if (!current.includes(value)) {
+          const updated = [...current, value];
+
+          if (field === "nonSmartOfficeReceivers") {
+            setNonSmartOfficeUnits(updated);
+          } else {
+            setNonSmartOfficeCCUnits(updated);
+          }
+
+          form.setValue(field, updated);
+        }
+      },
+    [nonSmartOfficeUnits, nonSmartOfficeCCUnits, setNonSmartOfficeUnits, setNonSmartOfficeCCUnits, form],
+  );
+
+  const handleRemoveItem = useCallback(
+    (field: "receivingUnitIds" | "externalCC", value: string) => {
+      const findNode = (tree: TreeViewItem[]): TreeViewItem | null => {
+        for (const node of tree) {
+          if (node.id === value) return node;
+          if (node.children?.length) {
+            const found = findNode(node.children);
+            if (found) return found;
+          }
+        }
+        return null;
+      };
+
+      const targetNode =
+        field === "receivingUnitIds"
+          ? findNode(receivingOptions)
+          : findNode(ccReceivingOptions);
+
+      if (!targetNode) return;
+      if (field === "receivingUnitIds") {
+        handleCheckChange(targetNode, false);
+      } else {
+        handleCcCheckChange(targetNode, false);
+      }
+    },
+    [receivingOptions, ccReceivingOptions, handleCheckChange, handleCcCheckChange],
+  );
+
+  const handleSubmit = async (values: CreateOrEditLetter) => {
+    try {
+      await onSubmit(values);
+      setHasSubmitted(true);
+    } catch {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    }
+  };
+
+  const handleInvalidSubmit = () => {
+    setHasSubmitted(true);
+    setShouldScrollToError(true);
+    toast.error(t("addRecord.formHasErrors"));
+  };
+
+  return {
+    handleCheckChange,
+    handleCcCheckChange,
+    handleDeleteUnit,
+    handleAdd,
+    handleRemoveItem,
+    handleSubmit,
+    handleInvalidSubmit,
+  };
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/deleteRecord.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/deleteRecord.tsx
new file mode 100644
index 000000000..b9e9a40ae
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/deleteRecord.tsx
@@ -0,0 +1,45 @@
+import { useCallback } from "react";
+import { toast } from "sonner";
+import EnhancedDynamicModal from "@/record-management/common/EnhancedDynamicModal";
+import { useUserRecords } from "../hooks/useUserRecords";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+interface DeleteRecordProps {
+  recordId: string;
+  onSuccess: () => void;
+  onClose: () => void;
+}
+
+const DeleteRecord: React.FC<DeleteRecordProps> = ({
+  recordId,
+  onSuccess,
+  onClose,
+}) => {
+  const { refetch, deleteRecordAsync } = useUserRecords();
+  const { t } = useTranslation();
+  const handleDelete = useCallback(async () => {
+    if (!recordId) throw new Error("Invalid record ID");
+
+    await deleteRecordAsync(recordId);
+    toast.success(t("userRecord.Record is deleted successfully"));
+    refetch();
+    onSuccess();
+  }, [recordId, refetch, onSuccess, deleteRecordAsync, t]);
+
+  return (
+    <EnhancedDynamicModal
+      open={true}
+      onClose={onClose}
+      title={t("userRecord.Delete Record")}
+      actionConfig={{
+        type: "delete",
+        onAction: handleDelete,
+        confirmText: t("userRecord.Confirm Delete"),
+        confirmVariant: "default",
+      }}
+    />
+  );
+};
+
+export default DeleteRecord;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/downloadRecords.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/downloadRecords.tsx
new file mode 100644
index 000000000..48e8ac222
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/downloadRecords.tsx
@@ -0,0 +1,73 @@
+import { useCallback } from "react";
+import { toast } from "sonner";
+import EnhancedDynamicModal from "@/record-management/common/EnhancedDynamicModal";
+import { useTranslation } from "react-i18next";
+import { useQuery } from "@tanstack/react-query";
+import { fetchLetterById } from "@/record-management/services/api/userRecordService";
+
+interface DownloadRecordProps {
+  recordId: string;
+  onSuccess: () => void;
+  onClose: () => void;
+}
+
+const DownloadRecord: React.FC<DownloadRecordProps> = ({
+  recordId,
+  onSuccess,
+  onClose,
+}) => {
+  const {
+    data: data,
+    isLoading: isLoadingAttachment,
+    error: errorAttachment,
+    refetch: refetchAttachment,
+  } = useQuery({
+    queryKey: ["record-pdf", recordId],
+    queryFn: () => fetchLetterById(recordId!),
+    enabled: !!recordId,
+    retry: false,
+  });
+  const { t } = useTranslation();
+  const handleDownload = useCallback(async () => {
+    try {
+      if (!data?.presigned) {
+        toast.error("PDF not available.");
+        return;
+      }
+
+      const response = await fetch(data?.presigned); // make sure it's a valid URL
+      const blob = await response.blob();
+
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = `${data?.fileInfo.originalname}.pdf`;
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+      window.URL.revokeObjectURL(url);
+
+      toast.success(t("userRecord.Download successful!"));
+      onSuccess();
+    } catch (error) {
+      console.error(error);
+      toast.error(t("userRecor.Failed to download PDF."));
+    }
+  }, [data, recordId, onSuccess]);
+
+  return (
+    <EnhancedDynamicModal
+      title={t("userRecord.Download Record PDF")}
+      open={true}
+      onClose={onClose}
+      actionConfig={{
+        type: "download",
+        onAction: handleDownload,
+        confirmText: t("userRecord.Downloaded"),
+        confirmVariant: "default",
+      }}
+    ></EnhancedDynamicModal>
+  );
+};
+
+export default DownloadRecord;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/editUserRecord/editUserRecord.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/editUserRecord/editUserRecord.tsx
new file mode 100644
index 000000000..5cc282834
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/editUserRecord/editUserRecord.tsx
@@ -0,0 +1,1086 @@
+import { useEffect, useState } from "react";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { toast } from "sonner";
+import { useQueryClient } from "@tanstack/react-query";
+
+import RecordForm, { type RecordFormIntent } from "../common/recordForm";
+
+const serializeReceiverGroup = (group: any) => ({
+  prefix: group.prefix ?? "",
+  suffix: group.suffix ?? "",
+  receivers:
+    group.receivers?.map((receiver: any) => ({
+      ...receiver,
+      name:
+        receiver.type === "non_smart"
+          ? typeof receiver.name === "string"
+            ? receiver.name
+            : receiver.name?.en || receiver.name?.am || ""
+          : receiver.name,
+    })) ?? [],
+});
+
+import { useUserRecords } from "@/record-management/components/hooks/useUserRecords";
+import ApproveRecordModal from "../approveRecord";
+import {
+  CreateOrEditLetter,
+  normalizePreferredLanguage,
+} from "../common/formSchema";
+import { useTranslation } from "react-i18next";
+import {
+  deleteAttachmentsById,
+  fetchRecordById,
+  regeneratePdf,
+  updateAndSubmitRecord,
+  updateSubmitAndSendToRoRecord,
+  updateAndSubmitDirectRecord,
+} from "@/record-management/services/api/userRecordService";
+
+import FileList, {
+  IAttachmentInfoWithId,
+} from "@/record-management/common/fileListComponent";
+import {
+  AttachmentInfo,
+  RecordPayload,
+} from "@/record-management/dto/userRecords/userRecordsDto";
+import useSettings from "../../hooks/useSettings";
+import { TreeViewItem } from "@/shared/common/ui/treeSelect";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import DelegationView from "@/record-management/common/DelegationView";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { useUnitConfiguration } from "@/shared/hooks/useUnitConfiguration";
+import {
+  UploadKeyResponse,
+  uploadMultiple,
+  uploadSingle,
+} from "@/record-management/services/api/newFileService";
+import { useSignatureListWithPresigned } from "../../hooks/useSignatureAndTeeterWithPresigned";
+import WorkflowCommentHistory from "@/record-management/common/WorkflowCommentHistory";
+
+export const EditUserRecords = () => {
+  const { id: recordIdFromRoute } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  const invalidateRecordLists = () => {
+    queryClient.invalidateQueries({ queryKey: ["userRecords"] });
+    queryClient.invalidateQueries({ queryKey: ["userRecords-parent"] });
+    queryClient.invalidateQueries({ queryKey: ["approvalRecord"] });
+    if (recordIdFromRoute) {
+      queryClient.invalidateQueries({
+        queryKey: ["record", recordIdFromRoute],
+      });
+    }
+  };
+  const { userDetails } = useAuthUser();
+  const unitId = userDetails?.employee?.[0]?.unitId || "";
+  const { data: signatureData } = useSignatureListWithPresigned(
+    userDetails?.id || "",
+  );
+  const { data: unitConfigData } = useUnitConfiguration(unitId, {
+    enabled: !!unitId,
+  });
+  const isDelegated = userDetails?.employee?.some((emp) =>
+    emp.positions.some((pos) => pos.hasDelegated),
+  );
+  const { allModifiedOrgs, allDepartmentUnits, currentEmployeesResponse } =
+    useSettings();
+  const [attachments, setAttachments] = useState<File[]>([]);
+  const [dmsAttachments, setDmsAttachments] = useState<any[]>([]);
+  const [uploadAttachments, setUploadedAttachments] = useState<
+    IAttachmentInfoWithId[]
+  >([]);
+  // Attachment ids the user has clicked "delete" on but not yet committed
+  // by submitting the form. Empty array means nothing is staged.
+  const [pendingDeletionIds, setPendingDeletionIds] = useState<string[]>([]);
+
+  const [updatedTreeReceivingOptions, setUpdatedTreeReceivingOptions] =
+    useState<TreeViewItem[]>([]);
+  const [updatedCCTreeReceivingOptions, setUpdatedCCTreeReceivingOptions] =
+    useState<TreeViewItem[]>([]);
+  const [updatedFYRTreeReceivingOptions, setUpdatedFYRTreeReceivingOptions] =
+    useState<TreeViewItem[]>([]);
+
+  const [recordData, setRecordData] = useState<CreateOrEditLetter | null>(null);
+  const [fullApiResponse, setFullApiResponse] = useState<any>(null);
+  const [recordContentId, setRecordContentId] = useState<string | null>(null);
+  const [isLoadingRecord, setIsLoadingRecord] = useState(true);
+  const { t } = useTranslation();
+
+  // Show the workflow comment history above the form when this outgoing
+  // record came back for adjustment, so the editor sees what the reviewer
+  // asked them to change.
+  const isAdjustmentStatus = fullApiResponse?.statusKey === "Adjustment";
+  const { editRecord } = useUserRecords();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [approveTarget, setApproveTarget] = useState<{
+    id: string;
+    payload: RecordPayload;
+    unitId: string;
+    recordTypeKey: string;
+  } | null>(null);
+  const location = useLocation();
+  const [remountKey, setRemountKey] = useState(0);
+  const { handleError } = useErrorHandler(t);
+  // Decide where Save / Forward / Approve should return the user.
+  // `state.returnUrl` (set by the Approval tab's row action) wins, then we
+  // honor the `?from=` query param introduced for the Collaboration / Approval
+  // entry points, finally falling back to the Outgoing list.
+  const fromParam = new URLSearchParams(location.search).get("from");
+  const queryParamReturnUrl =
+    fromParam === "collaborations"
+      ? "/record-management/collaborations"
+      : fromParam === "approval"
+        ? "/record-management/approval"
+        : null;
+  const fallbackReturnUrl =
+    queryParamReturnUrl ?? "/record-management/userRecords";
+  useEffect(() => {
+    setRemountKey((prev) => prev + 1);
+  }, [location.key]);
+  const load = async () => {
+    try {
+      setIsLoadingRecord(true);
+      const res = await fetchRecordById(recordIdFromRoute!);
+      const content = res?.content?.[0];
+      if (!res || !content) throw new Error("Record or content not found");
+
+      // Extract receiving units
+      const receivingUnitsRaw = [...(res.receivingUnits || [])].sort(
+        (a: any, b: any) => (a?.order ?? 0) - (b?.order ?? 0),
+      );
+      const receivingUnits = receivingUnitsRaw.map((ru) => ru.unitId);
+      const nonSmartReceivers = [...(content.nonSmartReceivers || [])]
+        .filter(
+          (item) => item.isCc !== true || item.isForYourReference === true,
+        )
+        .sort((a: any, b: any) => (a?.order ?? 0) - (b?.order ?? 0));
+      const nonSmartReceiverCCs = [...(content.nonSmartReceivers || [])]
+        .filter((item) => item.isCc === true)
+        .sort((a: any, b: any) => (a?.order ?? 0) - (b?.order ?? 0));
+
+      // ============ FIX 1: Properly extract FYR data from API ============
+      // Extract FYR from both res.forYourReferenceList and content.ccs
+      const apiForYourReferenceGroups = res.forYourReferenceList ?? [];
+      let forYourReferenceList: ReceiverGroup[] = [];
+
+      if (apiForYourReferenceGroups.length > 0) {
+        // Use API groups if available
+        forYourReferenceList = apiForYourReferenceGroups.map((group: any) => ({
+          prefix: group.prefix ?? "",
+          suffix: group.suffix ?? "",
+          receivers: [
+            ...(group.receivers ?? [])
+              .filter((r: any) => {
+                const type = r.type;
+                return (
+                  type === "unit" || type === "non_smart" || type === "external"
+                );
+              })
+              .map((r: any) => {
+                const apiReceiver = r as any & {
+                  unit?: { name?: { am?: string; en?: string } };
+                };
+                return {
+                  unitId: r.unitId ?? undefined,
+                  name: r.unitId
+                    ? {
+                        en:
+                          apiReceiver.unit?.name?.en ||
+                          apiReceiver.unit?.name?.am ||
+                          r.unitId,
+                        am:
+                          apiReceiver.unit?.name?.am ||
+                          apiReceiver.unit?.name?.en ||
+                          r.unitId,
+                      }
+                    : r.name || "",
+                  type: r.unitId ? ("unit" as const) : ("non_smart" as const),
+                };
+              }),
+            ...((group as any).nonSmartReceivers ?? []).map((item: any) => ({
+              name:
+                typeof item === "string"
+                  ? item
+                  : (item?.name ?? item?.value ?? ""),
+              type: "non_smart" as const,
+            })),
+          ],
+        }));
+      } else {
+        // Fallback: extract from content.ccs where isForYourReference is true
+        const fyrGroupMap = new Map<string, ReceiverGroup>();
+        const fyrItems = (content.ccs || []).filter(
+          (c: any) => c.isForYourReference === true,
+        );
+
+        fyrItems.forEach((item: any) => {
+          const key = `${item.prefix ?? ""}||${item.suffix ?? ""}`;
+          const existing = fyrGroupMap.get(key);
+          const receiver: ReceiverGroupItem = item.unitId
+            ? {
+                unitId: item.unitId,
+                name: {
+                  en: item.unit?.name?.en || item.unitId || "",
+                  am: item.unit?.name?.am || item.unitId || "",
+                },
+                type: "unit",
+              }
+            : {
+                name: item.name || "",
+                type: "non_smart",
+              };
+
+          if (existing) {
+            existing.receivers.push(receiver);
+          } else {
+            fyrGroupMap.set(key, {
+              prefix: item.prefix ?? "",
+              suffix: item.suffix ?? "",
+              receivers: [receiver],
+            });
+          }
+        });
+
+        forYourReferenceList =
+          fyrGroupMap.size > 0
+            ? Array.from(fyrGroupMap.values())
+            : [{ prefix: "", suffix: "", receivers: [] }];
+      }
+
+      // ============ FIX 2: Extract FYR unit IDs for tree selection ============
+      const fyrUnitIds = new Set<string>();
+      forYourReferenceList.forEach((group) => {
+        group.receivers.forEach((receiver) => {
+          if (receiver.type === "unit" && receiver.unitId) {
+            fyrUnitIds.add(receiver.unitId);
+          }
+        });
+      });
+
+      // ============ FIX 3: Build FYR tree options with proper checked state ============
+      const updatedFYRTreeReceivingOptions2 = allModifiedOrgs.map((org) => {
+        const isOrgSelected = fyrUnitIds.has(org.id);
+        const updatedChildren =
+          org.children?.map((child) => ({
+            ...child,
+            checked: fyrUnitIds.has(child.id),
+          })) || [];
+
+        const allChildrenChecked =
+          updatedChildren.length > 0
+            ? updatedChildren.every((child) => child.checked)
+            : false;
+        const someChildrenChecked = updatedChildren.some(
+          (child) => child.checked,
+        );
+
+        let checkedState: boolean | "indeterminate" = false;
+        if (isOrgSelected) {
+          checkedState = true;
+        } else if (allChildrenChecked) {
+          checkedState = true;
+        } else if (someChildrenChecked) {
+          checkedState = "indeterminate";
+        }
+
+        return {
+          ...org,
+          checked: checkedState,
+          children: updatedChildren,
+        };
+      });
+
+      // ============ FIX 4: Build checked FYR units (same pattern as externalCC) ============
+      const checkedFYRUnits: TreeViewItem[] =
+        updatedFYRTreeReceivingOptions2.flatMap((org) => {
+          const items: TreeViewItem[] = [];
+
+          // Include org itself if it's checked
+          if (org.checked === true) {
+            items.push({
+              id: org.id,
+              name: org.name,
+              checked: true,
+              hierarchyType: org.hierarchyType,
+              children: [],
+            });
+          }
+
+          // Include all checked children
+          if (org.children?.length) {
+            const checkedChildren = org.children
+              .filter((child) => child.checked === true)
+              .map((child) => ({
+                id: child.id,
+                name: child.name,
+                checked: true,
+                hierarchyType: child.hierarchyType,
+                children: [],
+              }));
+            items.push(...checkedChildren);
+          }
+
+          return items;
+        });
+
+      // Build receiver groups (same as before)
+      type ReceiverGroupItem = {
+        unitId?: string;
+        name?: string | { en: string; am: string };
+        type: "unit" | "non_smart";
+      };
+      type ReceiverGroup = {
+        prefix: string;
+        suffix: string;
+        receivers: ReceiverGroupItem[];
+      };
+
+      const buildGroupKey = (prefix: string, suffix: string) =>
+        `${prefix}||${suffix}`;
+      const receiverGroupMap = new Map<string, ReceiverGroup>();
+
+      const defaultPrefix = content.prefix ?? "";
+      const defaultSuffix = content.suffix ?? "";
+
+      receivingUnitsRaw.forEach((ru: any) => {
+        const key = buildGroupKey(
+          ru.prefix ?? defaultPrefix,
+          ru.suffix ?? defaultSuffix,
+        );
+        const existing = receiverGroupMap.get(key);
+        const receiver = {
+          unitId: ru.unitId,
+          name: {
+            en: ru.unit?.name?.en || ru.unit?.name?.am || ru.unitId || "",
+            am: ru.unit?.name?.am || ru.unit?.name?.en || ru.unitId || "",
+          },
+          type: "unit" as const,
+        };
+
+        if (existing) {
+          existing.receivers.push(receiver);
+        } else {
+          receiverGroupMap.set(key, {
+            prefix: ru.prefix ?? defaultPrefix,
+            suffix: ru.suffix ?? defaultSuffix,
+            receivers: [receiver],
+          });
+        }
+      });
+
+      nonSmartReceivers.forEach((item: any) => {
+        const key = buildGroupKey(
+          item.prefix ?? defaultPrefix,
+          item.suffix ?? defaultSuffix,
+        );
+        const existing = receiverGroupMap.get(key);
+        const receiver = {
+          name: item.name,
+          type: "non_smart" as const,
+        };
+
+        if (existing) {
+          existing.receivers.push(receiver);
+        } else {
+          receiverGroupMap.set(key, {
+            prefix: item.prefix ?? defaultPrefix,
+            suffix: item.suffix ?? defaultSuffix,
+            receivers: [receiver],
+          });
+        }
+      });
+
+      const receiversList: ReceiverGroup[] =
+        receiverGroupMap.size > 0
+          ? Array.from(receiverGroupMap.values())
+          : [{ prefix: defaultPrefix, suffix: defaultSuffix, receivers: [] }];
+
+      // Build CC list (same as before, keep existing logic)
+      const apiCcGroups = res.ccList ?? content.ccList ?? [];
+      const ccList = apiCcGroups.map((group: any) => ({
+        prefix: group.prefix ?? "",
+        suffix: group.suffix ?? "",
+        receivers: [
+          ...(group.receivers ?? [])
+            .filter((r: any) => {
+              const t = (r as { type?: string }).type;
+              return t !== "internal";
+            })
+            .map((r: any) => {
+              const apiReceiver = r as typeof r & {
+                unit?: { name?: { am?: string; en?: string } };
+                position?: { name?: { am?: string; en?: string } };
+              };
+              const displayName =
+                apiReceiver.unit?.name?.am ||
+                apiReceiver.unit?.name?.en ||
+                apiReceiver.position?.name?.am ||
+                apiReceiver.position?.name?.en ||
+                r.name ||
+                r.unitId ||
+                "";
+              return {
+                id: r.id ?? undefined,
+                unitId: r.unitId ?? undefined,
+                positionId: r.positionId ?? undefined,
+                name: r.unitId
+                  ? {
+                      en:
+                        apiReceiver.unit?.name?.en ||
+                        apiReceiver.unit?.name?.am ||
+                        apiReceiver.position?.name?.en ||
+                        apiReceiver.position?.name?.am ||
+                        displayName,
+                      am:
+                        apiReceiver.unit?.name?.am ||
+                        apiReceiver.unit?.name?.en ||
+                        apiReceiver.position?.name?.am ||
+                        apiReceiver.position?.name?.en ||
+                        displayName,
+                    }
+                  : displayName || undefined,
+                type: r.unitId ? ("unit" as const) : ("non_smart" as const),
+              };
+            }),
+          ...((group as any).nonSmartReceivers ?? []).map((item: any) => ({
+            id: item?.id ?? undefined,
+            name:
+              typeof item === "string"
+                ? item
+                : (item?.name ?? item?.value ?? undefined),
+            type: "non_smart" as const,
+          })),
+        ],
+      }));
+
+      // Extract CC unit IDs for tree
+      const ccReceivingUnits = (content.ccs || [])
+        .filter((c) => c.type === "external")
+        .map((c) => c.unitId)
+        .filter(Boolean);
+
+      const updatedCCTreeReceivingOptions2 = allModifiedOrgs.map((org) => {
+        const isOrgSelected = ccReceivingUnits.includes(org.id);
+        const updatedChildren =
+          org.children?.map((child) => ({
+            ...child,
+            checked: ccReceivingUnits.includes(child.id),
+          })) || [];
+
+        const allChildrenChecked =
+          updatedChildren.length > 0
+            ? updatedChildren.every((child) => child.checked)
+            : false;
+        const someChildrenChecked = updatedChildren.some(
+          (child) => child.checked,
+        );
+
+        let checkedState: boolean | "indeterminate" = false;
+        if (isOrgSelected) {
+          checkedState = true;
+        } else if (allChildrenChecked) {
+          checkedState = true;
+        } else if (someChildrenChecked) {
+          checkedState = "indeterminate";
+        }
+
+        return {
+          ...org,
+          checked: checkedState,
+          children: updatedChildren,
+        };
+      });
+
+      const checkedCCUnits: TreeViewItem[] =
+        updatedCCTreeReceivingOptions2.flatMap((org) => {
+          const items: TreeViewItem[] = [];
+          if (org.checked === true) {
+            items.push({
+              id: org.id,
+              name: org.name,
+              checked: true,
+              hierarchyType: org.hierarchyType,
+              children: [],
+            });
+          }
+          if (org.children?.length) {
+            const checkedChildren = org.children
+              .filter((child) => child.checked === true)
+              .map((child) => ({
+                id: child.id,
+                name: child.name,
+                checked: true,
+                hierarchyType: child.hierarchyType,
+                children: [],
+              }));
+            items.push(...checkedChildren);
+          }
+          return items;
+        });
+
+      // Build receiving units tree
+      const receivingUnitsTree: TreeViewItem[] = receivingUnitsRaw.map(
+        (ru: any) => ({
+          id: ru.unitId,
+          name: {
+            en: ru.unit?.name?.en || ru.unitId || "",
+            am: ru.unit?.name?.am || ru.unitId || "",
+          },
+          hierarchyType: "unit",
+          value: ru.unitId,
+          children: [],
+          checked: true,
+        }),
+      );
+
+      const updatedTreeReceivingOptions2 = allModifiedOrgs.map((org) => {
+        const isOrgSelected = receivingUnits.includes(org.id);
+        const updatedChildren =
+          org.children?.map((child) => ({
+            ...child,
+            checked: receivingUnits.includes(child.id),
+          })) || [];
+
+        const allChildrenChecked =
+          updatedChildren.length > 0
+            ? updatedChildren.every((child) => child.checked)
+            : false;
+        const someChildrenChecked = updatedChildren.some(
+          (child) => child.checked,
+        );
+
+        let checkedState: boolean | "indeterminate" = false;
+        if (isOrgSelected) {
+          checkedState = true;
+        } else if (allChildrenChecked) {
+          checkedState = true;
+        } else if (someChildrenChecked) {
+          checkedState = "indeterminate";
+        }
+
+        return {
+          ...org,
+          checked: checkedState,
+          children: updatedChildren,
+        };
+      });
+
+      const sortedReceiverEmployees = [
+        ...(content.receiverEmployees || []),
+      ].sort((a: any, b: any) => (a?.order ?? 0) - (b?.order ?? 0));
+      const sortedReceiverPositions = [
+        ...(content.receiverPositions || []),
+      ].sort((a: any, b: any) => (a?.order ?? 0) - (b?.order ?? 0));
+
+      const collaboratorPositionIds = (res.collaborators || [])
+        .map((c) => c.employeePositionId)
+        .filter((id): id is string => Boolean(id));
+
+      const resolvedInitiationType =
+        res.initiationType ||
+        (res.isWithTeamSignature ? "team" : "") ||
+        res.initiatedAs ||
+        "self";
+
+      // ============ FIX 5: Set form data with proper FYR values ============
+      setRecordData({
+        body: content.body,
+        footerId: content.footerId ?? "",
+        headerId: content.headerId ?? "",
+        initiationType: resolvedInitiationType,
+        preferredLanguage: normalizePreferredLanguage(res.preferredLanguage),
+        receivingUnitIds: receivingUnitsTree,
+        recordType: res.recordTypeKey,
+        sincerelyText: content.sincerelyText,
+        subject: content.subject,
+        referenceNumber: res.referenceNumber ?? "",
+        internalCC: (content.ccs || [])
+          .filter(
+            (c) =>
+              c.type === "internal" &&
+              c.employeePositionId === null &&
+              !c.isForYourReference,
+          )
+          .map((c) => c.positionId),
+        externalCC: checkedCCUnits,
+        collaborators: collaboratorPositionIds,
+        recordTemplateId: content.recordTemplateId ?? "",
+        toEmployees: sortedReceiverEmployees.map((rp) => rp.employeePositionId),
+        ccEmployees: (content?.ccs || [])
+          .filter((c) => c.employeePositionId !== null && !c.isForYourReference)
+          .map((rp) => rp.employeePositionId),
+        toPositions: sortedReceiverPositions.map((rp) => rp.positionId),
+        prefix: content.prefix ?? "",
+        suffix: content.suffix ?? "",
+        ccPrefix: content.prefixCC ?? "",
+        ccSuffix: content.suffixCC ?? "",
+        ReceiversList: receiversList,
+        ReceiverList: receiversList,
+        ccList,
+        // ============ FIX 6: Include forYourReferenceList in form data ============
+        forYourReferenceList: forYourReferenceList,
+        groupedItems: [
+          {
+            prefix: content.prefix ?? "",
+            suffix: content.suffix ?? "",
+            values: nonSmartReceivers.map((rs: any) => rs.name),
+          },
+        ],
+        groupedCCItems: [
+          {
+            prefix: content.prefixCC ?? "",
+            suffix: content.suffixCC ?? "",
+            values: nonSmartReceiverCCs.map((rs: any) => rs.name),
+          },
+        ],
+        groupedTreeItems: [
+          {
+            prefix: content.prefix ?? "",
+            suffix: content.suffix ?? "",
+            values: receivingUnitsTree,
+          },
+        ],
+        groupedCCTreeItems: [
+          {
+            prefix: content.prefixCC ?? "",
+            suffix: content.suffixCC ?? "",
+            values: checkedCCUnits,
+          },
+        ],
+        // ============ FIX 7: Include FYR legacy fields ============
+        groupedFYRTreeItems: [
+          {
+            prefix: content.prefixCC ?? "",
+            suffix: content.suffixCC ?? "",
+            values: checkedFYRUnits,
+          },
+        ],
+        groupedFYRItems: forYourReferenceList.map((group) => ({
+          prefix: group.prefix,
+          suffix: group.suffix,
+          values: group.receivers
+            .filter((r) => r.type === "non_smart")
+            .map((r) =>
+              typeof r.name === "string" ? r.name : r.name?.en || "",
+            ),
+        })),
+        isWithTeamSignature: res.isWithTeamSignature,
+        skipOneLevel: res.skipOneLevel ?? content.skipOneLevel ?? false,
+        letterName: res.letterName,
+        nonSmartOfficeReceiverCCs: nonSmartReceiverCCs.map(
+          (rs: any) => rs.name,
+        ),
+        nonSmartOfficeReceivers: nonSmartReceivers.map((rs: any) => rs.name),
+        mode: "edit",
+        recordTagIds: (content.recordTagRecords || []).map(
+          (r) => r.recordTagId,
+        ),
+        initiatedAs: res.initiatedAs || res.initiationType || "",
+        forYourReference: (content.ccs || [])
+          .filter((c) => c.isForYourReference === true && c.positionId)
+          .map((c) => c.positionId),
+        // ============ FIX 8: Include FYR unit IDs ============
+        forYourReferenceUnitIds: checkedFYRUnits,
+      } as CreateOrEditLetter);
+
+      setRecordContentId(content.id);
+      setFullApiResponse(res);
+      setUpdatedTreeReceivingOptions(updatedTreeReceivingOptions2);
+      setUpdatedCCTreeReceivingOptions(updatedCCTreeReceivingOptions2);
+      setUpdatedFYRTreeReceivingOptions(updatedFYRTreeReceivingOptions2);
+
+      setUploadedAttachments(content?.recordAttachments || []);
+    } catch (error) {
+      await handleError(error);
+    } finally {
+      setIsLoadingRecord(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!recordIdFromRoute || !allModifiedOrgs?.length) return;
+    load();
+  }, [recordIdFromRoute, allModifiedOrgs.length]);
+
+  const handleFormSubmit = async (
+    values: CreateOrEditLetter,
+    intent: RecordFormIntent = "draft",
+  ): Promise<void> => {
+    setIsSubmitting(true);
+
+    try {
+      if (!recordIdFromRoute || !recordContentId) {
+        throw new Error("Missing record ID or content ID");
+      }
+
+      const receiversList = values.ReceiversList ?? [];
+      const ccList = values.ccList ?? [];
+      const forYourReferenceList = values.forYourReferenceList ?? [];
+
+      const receivingPositionIds = values.toPositions || [];
+      const receivingEmployeeIds = values.toEmployees || [];
+      const receivingUnitIds = values.receivingUnitIds?.map((u) => u.id) || [];
+
+      // Walk values.internalCC in user-selection order rather than filtering
+      // allDepartmentUnits (which would re-order by directory position), so
+      // the cc[] payload preserves the order the user added departments in.
+      // The receivingPositionIds check still excludes positions that are
+      // also direct recipients — same as the previous filter.
+      const internalCCValues =
+        (values.internalCC ?? [])
+          .filter((id) => !receivingPositionIds.includes(id))
+          .map((id) => allDepartmentUnits?.find((u) => u.id === id))
+          .filter((u): u is NonNullable<typeof u> => u != null) ?? [];
+
+      // Same selection-order fix as internalCCValues: walk the form arrays
+      // so cc employees and for-your-reference entries appear in the order
+      // the user added them. The receivingEmployeeIds check still excludes
+      // employees that are also direct recipients — same as the previous
+      // filter.
+      const ccEmployee =
+        (values.ccEmployees ?? [])
+          .filter((id) => !receivingEmployeeIds.includes(id))
+          .map((employeePositionId) =>
+            currentEmployeesResponse?.items?.find(
+              (employee) =>
+                employee.employeePositions?.[0]?.id === employeePositionId,
+            ),
+          )
+          .filter(
+            (employee): employee is NonNullable<typeof employee> =>
+              employee != null,
+          ) ?? [];
+
+      const forYourReferenceValues =
+        (values.forYourReference ?? [])
+          .map((id) => allDepartmentUnits?.find((u) => u.id === id))
+          .filter((u): u is NonNullable<typeof u> => u != null) ?? [];
+
+      // =========================
+      // 2. NORMALIZE EXISTING ATTACHMENTS (OLD + NEW)
+      // =========================
+      const existingAttachments: AttachmentInfo[] = (
+        values?.attachments || []
+      ).map((att: any) => {
+        // already new format
+        if (att.fileInfo) return att;
+
+        // old format → convert
+        return {
+          fileInfo: {
+            bucket: att.bucket || "",
+            fileName: att.fileName || att.name,
+            contentType: att.contentType || "application/octet-stream",
+            originalname: att.originalname || att.fileName || att.name,
+            size: att.size || 0,
+          },
+          name: {
+            am: att.originalname || att.fileName || att.name,
+            en: att.originalname || att.fileName || att.name,
+          },
+        };
+      });
+
+      // =========================
+      // 3. UPLOAD NEW FILES ONLY
+      // =========================
+      let newUploaded: UploadKeyResponse["fileInfo"][] = [];
+
+      if (attachments?.length > 1) {
+        newUploaded = await uploadMultiple(attachments);
+      } else if (attachments?.length === 1) {
+        const file = await uploadSingle(attachments[0]);
+        newUploaded = [file];
+      }
+
+      const newAttachments: AttachmentInfo[] = newUploaded.map((f) => ({
+        fileInfo: f,
+        name: {
+          am: f.originalname,
+          en: f.originalname,
+        },
+      }));
+
+      // =========================
+      // 4. MERGE FINAL ATTACHMENTS
+      // =========================
+      const dmsAttachmentsMapped: AttachmentInfo[] = dmsAttachments.map(
+        (doc: any) => ({
+          fileInfo: {
+            bucket: doc.fileInfo?.bucket || "",
+            fileName: doc.fileInfo?.fileName || doc.fileInfo?.originalname || "",
+            contentType: doc.fileInfo?.contentType || "application/octet-stream",
+            originalname:
+              doc.fileInfo?.originalname ||
+              doc.name?.en ||
+              doc.name?.am ||
+              "",
+            size: doc.fileInfo?.size || 0,
+          },
+          name: {
+            am: doc.name?.am || doc.name?.en || doc.fileInfo?.originalname || "",
+            en: doc.name?.en || doc.name?.am || doc.fileInfo?.originalname || "",
+          },
+        }),
+      );
+
+      const finalAttachments: AttachmentInfo[] = [
+        ...existingAttachments,
+        ...newAttachments,
+        ...dmsAttachmentsMapped,
+      ];
+
+      // =========================
+      // 5. BUILD PAYLOAD
+      // =========================
+      const unitConfig = unitConfigData?.data?.items?.[0];
+
+      // Reverse each CC bucket before serializing. The BE renders the PDF in
+      // reverse of the order we send (last entry comes out first), so flipping
+      // the array here lets the BE's reversal land back on selection order.
+      // Applies to: internal departments, CC employees, For-Your-Reference,
+      // and the receivers inside each ccList group (external CC).
+      const payload: RecordPayload = {
+        body: values.body,
+        referenceNumber: values.referenceNumber,
+        cc: [
+          ...(internalCCValues
+            ?.slice()
+            // .reverse()
+            .map((c) => ({
+              unitId: c.unitId!,
+              positionId: c.id!,
+              type: "internal" as const,
+            })) ?? []),
+
+          ...(ccEmployee
+            ?.slice()
+            // .reverse()
+            .map((c) => ({
+              positionId: c.employeePositions[0]?.position?.id,
+              employeePositionId: c.employeePositions[0]?.id,
+              type: "internal" as const,
+            })) ?? []),
+          ...forYourReferenceValues
+            .slice()
+            // .reverse()
+            .map((c) => ({
+              unitId: c.unitId!,
+              positionId: c.id!,
+              type: "internal" as const,
+              isForYourReference: true,
+            })),
+        ],
+        headerId:
+          values.recordType === "direct" &&
+          unitConfig?.shouldDirectRecordHaveHeaderAndFooter === false
+            ? null
+            : values.headerId,
+        footerId:
+          values.recordType === "direct" &&
+          unitConfig?.shouldDirectRecordHaveHeaderAndFooter === false
+            ? null
+            : values.footerId,
+        receiverList: receiversList.map(serializeReceiverGroup),
+        ccList: ccList.map(serializeReceiverGroup).map((g) => ({
+          ...g,
+          receivers: g.receivers.slice(),
+          // .reverse()
+        })),
+        forYourReferenceList: forYourReferenceList
+          .map(serializeReceiverGroup)
+          .map((g) => ({
+            ...g,
+            receivers: g.receivers.slice(),
+          })),
+        receivingUnitIds,
+        nonSmartOfficeReceivers: values.nonSmartOfficeReceivers ?? [],
+        nonSmartOfficeReceiverCCs: values.nonSmartOfficeReceiverCCs ?? [],
+        recordType: values.recordType,
+        subject: values.subject,
+        collaborators: values.collaborators ?? [],
+        toPositions: values.toPositions ?? [],
+        toEmployees: values.toEmployees ?? [],
+        preferredLanguage: values.preferredLanguage as "am" | "en",
+        initiationType: values.initiationType,
+        sincerelyText: values.sincerelyText,
+        recordTemplateId: values.recordTemplateId || undefined,
+        letterName: values.letterName ?? "",
+        isWithTeamSignature: values?.isWithTeamSignature,
+        skipOneLevel: values.skipOneLevel ?? false,
+        recordTagIds: values.recordTagIds,
+        inReplyToIncomingInstanceId: values.inReplyToIncomingInstanceId,
+        initiatedAs: values.initiatedAs || "",
+        attachments: finalAttachments,
+      };
+
+      // ─── Approve intent: defer to ApproveRecordModal ─────────
+      // The modal collects stamp/signature/etc., then dispatches the combined
+      // update-submit-and-send-to-RO endpoint via its onCustomSubmit. Pending
+      // attachment deletions are committed inside the modal's flow.
+      if (intent === "approve") {
+        setApproveTarget({
+          id: recordIdFromRoute,
+          payload,
+          unitId: userDetails?.employee?.[0]?.unitId ?? "",
+          recordTypeKey: values.recordType,
+        });
+        return;
+      }
+
+      // ─── Forward / Direct intents ─────────
+      if (intent === "forward") {
+        await updateAndSubmitRecord(recordIdFromRoute, payload);
+      } else if (intent === "direct") {
+        const signatureId = signatureData?.signatureId;
+        if (!signatureId) {
+          toast.error(t("userRecord.noSignatureForDirectSend"));
+          return;
+        }
+        await updateAndSubmitDirectRecord(recordIdFromRoute, {
+          payload,
+          signatureId,
+        });
+      } else {
+        // ─── Draft intent (default): plain update ────────────
+        await editRecord({
+          id: recordIdFromRoute,
+          updatedRecord: payload,
+        });
+      }
+
+      // Commit staged attachment deletions now that the record update succeeded.
+      if (pendingDeletionIds.length > 0) {
+        const deletionResults = await Promise.allSettled(
+          pendingDeletionIds.map((id) => deleteAttachmentsById(id)),
+        );
+        const firstFailure = deletionResults.find(
+          (r): r is PromiseRejectedResult => r.status === "rejected",
+        );
+        if (firstFailure) {
+          await handleError(firstFailure.reason);
+        }
+        setPendingDeletionIds([]);
+      }
+
+      const returnUrl = location.state?.returnUrl || fallbackReturnUrl;
+      const recordId = location.state?.recordId;
+
+      // Regenerate PDF if returning to approval page
+      if (recordId && returnUrl === "/record-management/approval") {
+        try {
+          await regeneratePdf(recordId);
+          queryClient.invalidateQueries({ queryKey: ["record-pdf", recordId] });
+          queryClient.invalidateQueries({ queryKey: ["record", recordId] });
+        } catch (regenerateError) {
+          await handleError(regenerateError);
+          // Don't block navigation if regeneration fails
+        }
+      }
+
+      // Invalidate related lists so the user sees the change in any tab.
+      invalidateRecordLists();
+
+      if (intent === "forward") {
+        toast.success(t("userRecord.recordUpdatedAndForwarded"));
+      } else {
+        // After-submit attachment count = retained existing + newly-uploaded.
+        const retainedExistingCount =
+          (uploadAttachments?.length ?? 0) - pendingDeletionIds.length;
+        const finalAttachmentCount = retainedExistingCount + attachments.length;
+        toast.success(
+          finalAttachmentCount > 0
+            ? t("msg.submittedWithAttachments")
+            : t("msg.submittedSuccess"),
+        );
+      }
+      navigate(returnUrl);
+    } catch (submitError) {
+      await handleError(submitError);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // Stage the deletion locally; the actual DELETE request is fired only
+  // after the user confirms the change by clicking submit and the record
+  // update succeeds. If they navigate away or refresh, nothing is lost.
+  const handleAttachmentDelete = (fileId: string) => {
+    setPendingDeletionIds((prev) =>
+      prev.includes(fileId) ? prev : [...prev, fileId],
+    );
+  };
+
+  const visibleUploadAttachments = (uploadAttachments || []).filter(
+    (attachment) =>
+      !attachment.id || !pendingDeletionIds.includes(attachment.id),
+  );
+
+  return isDelegated ? (
+    <DelegationView />
+  ) : (
+    <div className="w-full max-w-5xl mx-auto">
+      <div className="pb-2 text-xl font-bold">{t("addRecord.EditRecord")}</div>
+
+      {isAdjustmentStatus && recordIdFromRoute && (
+        <div className="mb-4">
+          <WorkflowCommentHistory recordId={recordIdFromRoute} />
+        </div>
+      )}
+
+      <RecordForm
+        key={remountKey}
+        onSubmit={handleFormSubmit}
+        recordId={recordIdFromRoute}
+        defaultValues={recordData}
+        fullApiResponse={fullApiResponse}
+        isEditMode={true}
+        isLoading={isSubmitting}
+        isLoadingRecord={isLoadingRecord}
+        existingAttachmentComponent={
+          <div className="max-w-4xl mx-auto">
+            <FileList
+              attachments={visibleUploadAttachments}
+              showDelete={true}
+              onDelete={handleAttachmentDelete}
+            />
+          </div>
+        }
+        files={attachments}
+        setFiles={setAttachments}
+        dmsAttachments={dmsAttachments}
+        setDmsAttachments={setDmsAttachments}
+        treeOrganizationsOptions={updatedTreeReceivingOptions}
+        ccTreeOrganizationsOptions={updatedCCTreeReceivingOptions}
+        fyrTreeOrganizationsOptions={updatedFYRTreeReceivingOptions}
+      />
+      {approveTarget && (
+        <ApproveRecordModal
+          open={!!approveTarget}
+          onClose={() => setApproveTarget(null)}
+          recordData={{
+            unitId: approveTarget.unitId,
+            recordTypeKey: approveTarget.recordTypeKey,
+          }}
+          onCustomSubmit={async (approvalData) => {
+            await updateSubmitAndSendToRoRecord(
+              approveTarget.id,
+              approveTarget.payload,
+              approvalData,
+            );
+            invalidateRecordLists();
+          }}
+          onSuccess={() => {
+            setApproveTarget(null);
+            toast.success(t("userRecord.recordUpdatedAndForwarded"));
+            navigate(location.state?.returnUrl || fallbackReturnUrl);
+          }}
+          preferredLanguage={
+            approveTarget.payload.preferredLanguage === "en" ? "en" : "am"
+          }
+        />
+      )}
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/forwardRecord.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/forwardRecord.tsx
new file mode 100644
index 000000000..1df8180e4
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/forwardRecord.tsx
@@ -0,0 +1,62 @@
+import React, { useCallback } from "react";
+import { toast } from "sonner";
+import EnhancedDynamicModal from "@/record-management/common/EnhancedDynamicModal";
+
+import { useApprovalTasks } from "../hooks/useApprovalTasks";
+import Loader from "@/record-management/components/Loader/loader";
+import { useTranslation } from "react-i18next";
+
+interface ForwardRecordProps {
+  recordId: string;
+  delegateId?: string; // Optional delegate ID if needed
+  onSuccess: () => void;
+  onClose: () => void;
+}
+
+const ForwardRecord: React.FC<ForwardRecordProps> = ({
+  recordId,
+  delegateId,
+  onSuccess,
+  onClose,
+}) => {
+  const { submitRecord, submitRecordLoading, refetch } = useApprovalTasks();
+  const { t } = useTranslation();
+
+  const handleForward = useCallback(async () => {
+    if (!recordId) return;
+    try {
+      await submitRecord({
+        id: recordId,
+        delegatorId: delegateId || undefined,
+      });
+      await refetch();
+      toast.success(t("userRecord.Record forwarded successfully"));
+      onSuccess();
+    } catch {
+      // Hook's onError already routes through handleError; swallow here
+      // to keep the modal closed cleanly without a second toast.
+    }
+  }, [recordId, submitRecord, delegateId, refetch, onSuccess, t]);
+
+  return (
+    <>
+      <EnhancedDynamicModal
+        open={true}
+        onClose={onClose}
+        title={t("userRecord.Forward Record")}
+        actionConfig={{
+          type: "forward",
+          onAction: handleForward,
+          confirmText: t("userRecord.Confirm Forward"),
+          confirmVariant: "default",
+          isLoading: submitRecordLoading,
+        }}
+      />
+      {submitRecordLoading && (
+        <Loader mode="inline" className="mt-2" showLabel={false} />
+      )}
+    </>
+  );
+};
+
+export default ForwardRecord;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/sendRecord.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/sendRecord.tsx
new file mode 100644
index 000000000..0b8eb7e15
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/sendRecord.tsx
@@ -0,0 +1,64 @@
+import React, { useCallback, useState } from "react";
+import { toast } from "sonner";
+import EnhancedDynamicModal from "@/record-management/common/EnhancedDynamicModal";
+
+import { useUserRecords } from "../hooks/useUserRecords";
+import { useSignatureListWithPresigned } from "../hooks/useSignatureAndTeeterWithPresigned";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { useTranslation } from "react-i18next";
+
+interface SendRecordProps {
+  recordId: string;
+  onSuccess: () => void;
+  onClose: () => void;
+}
+
+const SendRecord: React.FC<SendRecordProps> = ({
+  recordId,
+  onSuccess,
+  onClose,
+}) => {
+  const { directDispatch, isDirectDispatching } = useUserRecords();
+  const { userDetails } = useAuthUser();
+  const { data: signatureData } = useSignatureListWithPresigned(
+    userDetails?.id || "",
+  );
+  const { t } = useTranslation();
+
+  const handleSendDirect = useCallback(async () => {
+    const signatureId = signatureData?.signatureId;
+
+    if (!signatureId) {
+      toast.error(t("userRecord.noSignatureForDirectSend"));
+      return;
+    }
+
+    try {
+      await directDispatch({ recordId, signatureId });
+      onSuccess();
+    } catch (error) {
+      // Error toast is handled in useUserRecords hook
+      console.error(error);
+    }
+  }, [recordId, signatureData, directDispatch, onSuccess, t]);
+
+  return (
+    <EnhancedDynamicModal
+      open={true}
+      onClose={onClose}
+      title={t("userRecord.SendDirectRecordTitle")}
+      description={t("userRecord.SendDirectRecordDescription")}
+      actionConfig={{
+        type: "custom",
+        onAction: handleSendDirect,
+        confirmText: isDirectDispatching
+          ? t("userRecord.Sending")
+          : t("userRecord.Send"),
+        confirmVariant: "default",
+        isLoading: isDirectDispatching,
+      }}
+    />
+  );
+};
+
+export default SendRecord;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/shareViaEmail.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/shareViaEmail.tsx
new file mode 100644
index 000000000..d63498433
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/shareViaEmail.tsx
@@ -0,0 +1,133 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import { Label } from "@/shared/common/ui/label";
+import { Spinner } from "@/shared/common/ui/sppiner";
+
+interface ShareViaEmailProps {
+  recordId: string;
+  open: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+const ShareViaEmail: React.FC<ShareViaEmailProps> = ({
+  recordId,
+  open,
+  onClose,
+  onSuccess,
+}) => {
+  const { t } = useTranslation();
+  const [email, setEmail] = useState("");
+  const [isSharing, setIsSharing] = useState(false);
+  const [emailError, setEmailError] = useState("");
+
+  const validateEmail = (email: string): boolean => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setEmail(value);
+
+    if (emailError && value) {
+      if (validateEmail(value)) {
+        setEmailError("");
+      }
+    }
+  };
+
+  const handleShare = async () => {
+    // Validate email
+    if (!email.trim()) {
+      setEmailError(t("shareViaEmail.emailRequired"));
+      return;
+    }
+
+    if (!validateEmail(email)) {
+      setEmailError(t("shareViaEmail.invalidEmailFormat"));
+      return;
+    }
+
+    try {
+      setIsSharing(true);
+      // await shareRecordViaEmail(recordId, email.trim());
+      toast.success(t("shareViaEmail.shareSuccess"));
+      onSuccess();
+      handleClose();
+    } catch (error: any) {
+      const errorMessage = error.message || t("shareViaEmail.shareFailed");
+      toast.error(errorMessage);
+      setEmailError(errorMessage);
+    } finally {
+      setIsSharing(false);
+    }
+  };
+
+  const handleClose = () => {
+    setEmail("");
+    setEmailError("");
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t("shareViaEmail.title")}</DialogTitle>
+          <DialogDescription>
+            {t("shareViaEmail.description")}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="email">{t("shareViaEmail.emailLabel")}</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder={t("shareViaEmail.emailPlaceholder")}
+              value={email}
+              onChange={handleEmailChange}
+              className={emailError ? "border-red-500" : ""}
+              disabled={isSharing}
+            />
+            {emailError && <p className="text-sm text-red-500">{emailError}</p>}
+          </div>
+        </div>
+
+        <DialogFooter className="flex-col sm:flex-row gap-2">
+          <Button
+            variant="outline"
+            onClick={handleClose}
+            disabled={isSharing}
+            className="w-full sm:w-auto"
+          >
+            {t("common.Cancel")}
+          </Button>
+          <Button
+            onClick={handleShare}
+            disabled={isSharing || !email.trim()}
+            className="w-full sm:w-auto"
+          >
+            {isSharing && <Spinner size="small" className="mr-2" />}
+            {t("shareViaEmail.shareButton")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default ShareViaEmail;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/softDelete.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/softDelete.tsx
new file mode 100644
index 000000000..dbfd5774c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/softDelete.tsx
@@ -0,0 +1,253 @@
+// import * as React from "react";
+// import { useTranslation } from "react-i18next";
+// import { useNavigate } from "react-router-dom";
+// import { Search, MoveLeft } from "lucide-react";
+
+// import { useUserRecords } from "../hooks/useUserRecords";
+// import { SoftDeleteColumns } from "./softDeleteColumns";
+// import Loader from "../../components/Loader/loader";
+
+// import {
+//   Select,
+//   SelectTrigger,
+//   SelectContent,
+//   SelectItem,
+//   SelectValue,
+// } from "@/shared/common/ui/select";
+// import { Input } from "@/shared/common/ui/input";
+// import { Button } from "@/shared/common/ui/button";
+// import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+// import { useAuthUser } from "@/shared/hooks/useAuthUser";
+// import { useState } from "react";
+// import DelegationView from "@/record-management/common/DelegationView";
+// import i18n from "@/i18n";
+// import EthiopianDatePickerModal, {
+//   convertEthiopianToGregorian,
+// } from "@/shared/common/form/fields/AmharicDatePicker";
+// const SoftDelete = () => {
+//   const { t } = useTranslation();
+//   const navigate = useNavigate();
+//   const [pageIndex, setPageIndex] = React.useState(0);
+//   const pageSize = 10;
+//   const { userDetails } = useAuthUser();
+//   const isDelegated = userDetails?.employee?.some((emp) =>
+//     emp.positions.some((pos) => pos.hasDelegated)
+//   );
+//   const [searchQuery, setSearchQuery] = React.useState("");
+//   const [showFromPicker, setShowFromPicker] = useState(false);
+//   const [showToPicker, setShowToPicker] = useState(false);
+//   const [filterType, setFilterType] = React.useState<
+//     "subject" | "Date" | "letterName"
+//   >("subject");
+//   const [fromDate, setFromDate] = React.useState<string>("");
+//   const [toDate, setToDate] = React.useState<string>("");
+//   const [fromDateDisplay, setFromDateDisplay] = React.useState<string>("");
+//   const [toDateDisplay, setToDateDisplay] = React.useState<string>("");
+//   const lang = i18n.language;
+//   const filterParams = React.useMemo(() => {
+//     const baseParams = {
+//       skip: pageIndex * pageSize,
+//       take: pageSize,
+//       orderBy: "deletedAt:DESC",
+//       subject: filterType === "subject" ? searchQuery.trim() : "",
+//       fromDeletedAt: filterType === "Date" && fromDate ? fromDate : "",
+//       toDeletedAt: filterType === "Date" && toDate ? toDate : "",
+//       letterName: filterType === "letterName" ? searchQuery.trim() : "",
+//     };
+
+//     return Object.fromEntries(
+//       Object.entries(baseParams).filter(([, v]) => v !== "")
+//     );
+//   }, [pageIndex, filterType, searchQuery, fromDate, toDate]);
+//   const {
+//     recordsResponse,
+//     isLoading,
+//     isError,
+//     refetch,
+//     recordParent,
+//     recordParentCount,
+//     refetchParent,
+//     isLoadingParent,
+//     isErrorParent,
+//   } = useUserRecords(filterParams);
+//   let Error, loading;
+//   return isDelegated ? (
+//     <DelegationView />
+//   ) : (
+//     <div className="flex flex-col gap-2 bg-background text-foreground">
+//       {/* Header and Filter */}
+//       <div className="flex">
+//         <Button
+//           size="sm" // or use className for custom sizing
+//           className="bg-gray-600 text-sm px-1 py-1 w-[100px] hover:bg-gray-700"
+//           onClick={() => navigate(-1)}
+//         >
+//           <MoveLeft className="w-4 h-4" />
+//           {t("common.back")}
+//         </Button>
+//       </div>
+
+//       <div className="flex items-center justify-between flex-wrap gap-4 mb-4">
+//         <h4 className="text-xl font-medium text-gray-900 dark:text-gray-100">
+//           {t("msg.recycleBin")}
+//         </h4>
+//         <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2 w-full sm:w-auto">
+//           <Select
+//             value={filterType}
+//             onValueChange={(val) => {
+//               setFilterType(val as "subject" | "Date" | "letterName");
+//               setSearchQuery("");
+//               setFromDate("");
+//               setToDate("");
+//             }}
+//           >
+//             <SelectTrigger className="w-full sm:w-[200px]">
+//               <SelectValue placeholder={t("userRecord.Filter by")} />
+//             </SelectTrigger>
+//             <SelectContent>
+//               <SelectItem value="subject">{t("userRecord.Subject")}</SelectItem>
+//               <SelectItem value="Date">{t("userRecord.Date")}</SelectItem>
+//               <SelectItem value="letterName">
+//                 {t("viewDetail.fileName")}
+//               </SelectItem>
+//             </SelectContent>
+//           </Select>
+
+//           {filterType === "Date" ? (
+//             <div className="flex flex-col sm:flex-row gap-2">
+//               {lang.startsWith("en") ? (
+//                 <>
+//                   <label className="mt-2">From: </label>
+//                   <Input
+//                     type="date"
+//                     value={fromDate}
+//                     onChange={(e) => setFromDate(e.target.value)}
+//                     className="w-[150px]"
+//                   />
+//                   <label className="mt-2">To: </label>
+//                   <Input
+//                     type="date"
+//                     value={toDate}
+//                     onChange={(e) => setToDate(e.target.value)}
+//                     min={fromDate}
+//                     className="w-[150px]"
+//                   />
+//                 </>
+//               ) : (
+//                 <div className="flex flex-wrap items-center gap-3">
+//                   {/* From Date */}
+//                   <div className="relative">
+//                     <label className="font-medium mr-2">ከ:</label>
+//                     <input
+//                       type="text"
+//                       value={fromDateDisplay}
+//                       readOnly
+//                       onClick={() => setShowFromPicker((prev) => !prev)}
+//                       className="border border-gray-300 dark:border-gray-700 rounded-md px-2 py-1.5 w-40 bg-white dark:bg-gray-800 cursor-pointer"
+//                       placeholder="ቀን ይምረጡ"
+//                     />
+//                     {showFromPicker && (
+//                       <div className="absolute z-50 mt-1 bg-white dark:bg-gray-800 shadow-lg rounded-md p-2">
+//                         <EthiopianDatePickerModal
+//                           value={fromDate}
+//                           onChange={(ethiopianDate: string) => {
+//                             const gregorianDate =
+//                               convertEthiopianToGregorian(ethiopianDate);
+//                             const formatted = gregorianDate
+//                               .toISOString()
+//                               .split("T")[0]; // "YYYY-MM-DD"
+//                             setFromDate(formatted);
+//                             setFromDateDisplay(ethiopianDate);
+//                             setShowFromPicker(false);
+//                           }}
+//                         />
+//                       </div>
+//                     )}
+//                   </div>
+
+//                   {/* To Date */}
+//                   <div className="relative">
+//                     <label className="font-medium mr-2">እስከ:</label>
+//                     <input
+//                       type="text"
+//                       value={toDateDisplay}
+//                       readOnly
+//                       onClick={() => setShowToPicker((prev) => !prev)}
+//                       className="border border-gray-300 dark:border-gray-700 rounded-md px-2 py-1.5 w-40 bg-white dark:bg-gray-800 cursor-pointer"
+//                       placeholder="ቀን ይምረጡ"
+//                     />
+//                     {showToPicker && (
+//                       <div className="absolute z-50 mt-1 bg-white dark:bg-gray-800 shadow-lg rounded-md p-2">
+//                         <EthiopianDatePickerModal
+//                           value={fromDate}
+//                           onChange={(ethiopianDate: string) => {
+//                             const gregorianDate =
+//                               convertEthiopianToGregorian(ethiopianDate);
+//                             const formatted = gregorianDate
+//                               .toISOString()
+//                               .split("T")[0]; // "YYYY-MM-DD"
+//                             setToDate(formatted);
+//                             setToDateDisplay(ethiopianDate);
+//                             setShowFromPicker(false);
+//                           }}
+//                         />
+//                       </div>
+//                     )}
+//                   </div>
+//                 </div>
+//               )}
+//             </div>
+//           ) : (
+//             <div className="relative w-full sm:w-[200px]">
+//               <Input
+//                 type="text"
+//                 className="pl-8"
+//                 placeholder={`${t(
+//                   "userRecord.Search"
+//                 )} ${filterType.toLowerCase()}`}
+//                 value={searchQuery}
+//                 onChange={(e) => setSearchQuery(e.target.value)}
+//               />
+//               <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500" />
+//             </div>
+//           )}
+//         </div>
+//       </div>
+//       {/* Table */}
+//       {loading ? (
+//         <Loader />
+//       ) : Error ? ( // delegated error first
+//         <div className="flex flex-col items-center justify-center h-full p-6 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+//           <h2 className="text-xl font-semibold text-red-700 dark:text-red-400">
+//             {t("msg.error")}
+//           </h2>
+//         </div>
+//       ) : Error ? ( // normal error
+//         <div className="flex flex-col items-center justify-center h-full p-6 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+//           <h2 className="text-xl font-semibold text-red-700 dark:text-red-400">
+//             {t("msg.error")}
+//           </h2>
+//         </div>
+//       ) : (
+//         <AdvancedTable
+//           columns={SoftDeleteColumns(refetch)} // ✅ Pass hook result
+//           data={recordParent || []}
+//           tableName="Soft Delete"
+//           toolBarPosition="right"
+//           itemCount={recordParentCount || 0}
+//           pageIndex={pageIndex}
+//           onPageChange={setPageIndex}
+//           nextFunction={() => setPageIndex(pageIndex + 1)}
+//           prevFunction={() => setPageIndex(Math.max(0, pageIndex - 1))}
+//           refresh={refetch}
+//         />
+//       )}
+//     </div>
+//   );
+// };
+
+// export default SoftDelete;
+const SoftDelete = () => {
+  return <></>;
+};
+export default SoftDelete;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/softDeleteColumns.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/softDeleteColumns.tsx
new file mode 100644
index 000000000..fce1e79af
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/softDeleteColumns.tsx
@@ -0,0 +1,128 @@
+import { ColumnDef } from "@tanstack/react-table";
+import UserRecordsActions from "./userRecordsActions";
+import { DataTableColumnHeader } from "@/shared/common/ui/dataTableColumnHeader";
+import { t } from "i18next";
+import { RecordDto } from "@/record-management/dto/userRecords/userRecordsDto";
+import i18n from "i18next";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+// Utility component to show tooltip on hover
+const OverflowTooltip = ({
+  children,
+  text,
+  maxWidth = 200,
+}: {
+  children: React.ReactNode;
+  text: string;
+  maxWidth?: number;
+}) => {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <div
+          className="overflow-hidden text-ellipsis whitespace-nowrap"
+          style={{ maxWidth: `${maxWidth}px` }}
+        >
+          {children}
+        </div>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p className="max-w-xs break-words">{text}</p>
+      </TooltipContent>
+    </Tooltip>
+  );
+};
+
+export const SoftDeleteColumns = (
+  refetch: () => void
+): ColumnDef<RecordDto>[] => {
+  return [
+    {
+      id: "letterName",
+      header: ({ column }) => (
+        <DataTableColumnHeader
+          column={column}
+          title={t("viewDetail.fileName")}
+        />
+      ),
+      accessorKey: "letterName",
+      cell: ({ row }) => {
+        const rowData = row.original;
+        const letterName = rowData.letterName || "_";
+        return (
+          <div className="flex gap-1">
+            <span>{letterName}</span>
+          </div>
+        );
+      },
+      enableHiding: true,
+    },
+    {
+      id: "Subject",
+      header: () => t("userRecord.Subject"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        const subject = rowData.content?.[0]?.subject || "-";
+
+        return (
+          <OverflowTooltip text={subject} maxWidth={200}>
+            <div className="overflow-hidden text-ellipsis whitespace-nowrap">
+              {subject}
+            </div>
+          </OverflowTooltip>
+        );
+      },
+      enableHiding: true,
+    },
+    {
+      id: "Date",
+      header: () => t("userRecord.Date"),
+      cell: ({ row }) => {
+        const record = row.original;
+
+        // Check current language
+        const isAmharic = i18n.language === "am";
+
+        // Use the Amharic date if language is Amharic and date is available
+        if (isAmharic && record.amharicCreatedAt) {
+          return <div>{record.amharicCreatedAt}</div>;
+        }
+
+        // Otherwise, use the default formatted English date
+        const safeLocale = ["am", "en"].includes(i18n.language)
+          ? i18n.language
+          : "en"; // fallback to English if invalid
+
+        const createdDate = record.createdAt
+          ? new Date(record.updatedAt).toLocaleDateString(safeLocale, {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+            hour: "numeric",
+            minute: "numeric",
+          })
+          : "-";
+
+        return <div>{createdDate}</div>;
+      },
+    },
+    {
+      id: "Actions",
+      header: () => t("userRecord.Actions"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        return (
+          <UserRecordsActions
+            rowData={rowData as unknown as RecordDto}
+            refetchTable={refetch}
+            fromTable={true}
+            waitForAllCollaboratorsBeforeAction={false}
+          />
+        );
+      },
+    },
+  ];
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/userRecords.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/userRecords.tsx
new file mode 100644
index 000000000..c07e3610e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/userRecords.tsx
@@ -0,0 +1,761 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { CirclePlus, Search, X } from "lucide-react";
+import { useQueryClient } from "@tanstack/react-query";
+
+import { useUserRecords } from "../hooks/useUserRecords";
+import { UserRecordsColumns } from "./userRecordsColumns";
+import Loader from "../../components/Loader/loader";
+
+import {
+  Select,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { Input } from "@/shared/common/ui/input";
+import { Button } from "@/shared/common/ui/button";
+import { Badge } from "@/shared/common/ui/badge";
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { useCombinedFilters } from "@/shared/hooks/useCombinedFilters";
+import { useUserDetail } from "../hooks/useUserDetail";
+import { useState } from "react";
+import { MeDto } from "@/shared/dto/user/meDto";
+import secretaryList from "@/record-management/common/secretaryViewList";
+import DelegationView from "@/record-management/common/DelegationView";
+import { cn } from "@/shared/lib/utils";
+import i18n from "@/i18n";
+import EthiopianDatePickerModal, {
+  convertEthiopianToGregorian,
+} from "@/shared/common/form/fields/AmharicDatePicker";
+import { useUnitConfiguration } from "@/shared/hooks/useUnitConfiguration";
+import ApproveRecord from "./approveRecord";
+import { RecordDto } from "@/record-management/dto/userRecords/userRecordsDto";
+import { cleanFilterParams } from "@/shared/utils/filterParams";
+
+type Filters = {
+  receiverPosition?: string;
+  receiverEmployee?: string;
+  receiverUnit?: string;
+  subject?: string;
+  referenceNumber?: string;
+  letterName?: string;
+  fromCreatedAt?: string;
+  toCreatedAt?: string;
+};
+
+type TextFilterKey = Exclude<keyof Filters, "fromCreatedAt" | "toCreatedAt">;
+type FilterConfig =
+  | {
+      key: TextFilterKey;
+      label: string;
+      type: "text";
+    }
+  | {
+      key: "createdAt";
+      label: string;
+      type: "dateRange";
+      fromKey: "fromCreatedAt";
+      toKey: "toCreatedAt";
+    };
+
+type ActiveFilterChip = {
+  key: string;
+  label: string;
+  value: string;
+  remove: () => void;
+};
+
+const UserRecords = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const localizedName = useLocalizedName();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const urlPage = Number(searchParams.get("page") || 1);
+  const initialView = searchParams.get("view") || "self";
+
+  const [pageIndex, setPageIndex] = React.useState(urlPage - 1);
+  const pageSize = 10;
+  const { userDetails } = useAuthUser();
+  const isDelegated = userDetails?.employee?.some((emp) =>
+    emp.positions.some((pos) => pos.hasDelegated),
+  );
+
+  const [statusFilter, setStatusFilter] = React.useState("All");
+  const [menuFilter, setMenuFilter] = React.useState("All");
+  const [showFromPicker, setShowFromPicker] = useState(false);
+  const [showToPicker, setShowToPicker] = useState(false);
+  const [approveTarget, setApproveTarget] = useState<RecordDto | null>(null);
+  const [selectedFilterKey, setSelectedFilterKey] =
+    React.useState<FilterConfig["key"]>("receiverPosition");
+  const [filterInputValue, setFilterInputValue] = React.useState("");
+  const [liveSearch, setLiveSearch] = React.useState<{
+    key: string;
+    value: string;
+  } | null>(null);
+  const [openDropdownId, setOpenDropdownId] = useState<string | null>(null);
+  const selfFilters = useCombinedFilters<Filters>();
+  const parentFilters = useCombinedFilters<Filters>();
+  const [fromDate, setFromDate] = React.useState<string>("");
+  const [toDate, setToDate] = React.useState<string>("");
+  const [fromDateDisplay, setFromDateDisplay] = React.useState<string>("");
+  const [toDateDisplay, setToDateDisplay] = React.useState<string>("");
+  const { permissionKeys } = useUserDetail(userDetails as MeDto);
+  const isSecretary = permissionKeys.includes("can:viewParentPositionRecord");
+  const [secretaryView, setSecretaryView] = useState(isSecretary ? initialView : "self");
+  const lang = i18n.language;
+  const isSelf = secretaryView === "self";
+
+  React.useEffect(() => {
+    if (!isSecretary && secretaryView === "parent") {
+      setSecretaryView("self");
+    }
+  }, [isSecretary, secretaryView]);
+  const queryClient = useQueryClient();
+
+  const filterFields = React.useMemo<FilterConfig[]>(
+    () => [
+      {
+        key: "receiverPosition",
+        label: t("userRecord.ReceiverPosition"),
+        type: "text",
+      },
+      {
+        key: "receiverEmployee",
+        label: t("userRecord.ReceiverEmployee"),
+        type: "text",
+      },
+      {
+        key: "receiverUnit",
+        label: t("userRecord.ReceiverUnit"),
+        type: "text",
+      },
+      { key: "subject", label: t("userRecord.Subject"), type: "text" },
+      {
+        key: "createdAt",
+        label: t("userRecord.Date"),
+        type: "dateRange",
+        fromKey: "fromCreatedAt",
+        toKey: "toCreatedAt",
+      },
+      {
+        key: "referenceNumber",
+        label: t("userRecord.Reference"),
+        type: "text",
+      },
+      { key: "letterName", label: t("viewDetail.fileName"), type: "text" },
+    ],
+    [t],
+  );
+
+  const activeFilterStore = isSelf ? selfFilters : parentFilters;
+  const activeFilters = activeFilterStore.filters;
+
+  const isFilterActive = React.useCallback(
+    (field: FilterConfig) => {
+      if (field.type === "dateRange") {
+        return Boolean(
+          activeFilters[field.fromKey] || activeFilters[field.toKey],
+        );
+      }
+
+      return Boolean(activeFilters[field.key]);
+    },
+    [activeFilters],
+  );
+
+  const availableFilterFields = React.useMemo(
+    () => filterFields.filter((field) => !isFilterActive(field)),
+    [filterFields, isFilterActive],
+  );
+
+  const selectedFilter = React.useMemo(
+    () =>
+      availableFilterFields.find((field) => field.key === selectedFilterKey),
+    [availableFilterFields, selectedFilterKey],
+  );
+
+  React.useEffect(() => {
+    if (selectedFilter || availableFilterFields.length === 0) return;
+
+    setSelectedFilterKey(availableFilterFields[0].key);
+    setFilterInputValue("");
+    setFromDate("");
+    setToDate("");
+    setFromDateDisplay("");
+    setToDateDisplay("");
+  }, [availableFilterFields, selectedFilter]);
+
+  const filterParams = React.useMemo(() => {
+    const { __liveSearch, ...cleanFilters } = activeFilters as any;
+
+    return cleanFilterParams({
+      skip: pageIndex * pageSize,
+      take: pageSize,
+      status: statusFilter !== "All" ? statusFilter : undefined,
+      recordTypeKey: menuFilter !== "All" ? menuFilter : undefined,
+      orderBy: "createdAt:DESC",
+      fetchParent: isSecretary,
+      ...cleanFilters,
+      // Inject live search into params — overrides nothing from chips
+      ...(liveSearch ? { [liveSearch.key]: liveSearch.value } : {}),
+    });
+  }, [
+    pageIndex,
+    statusFilter,
+    menuFilter,
+    isSecretary,
+    activeFilters,
+    liveSearch,
+  ]);
+
+  React.useEffect(() => {
+    if (!selectedFilter) return;
+    if (selectedFilter.type === "dateRange") return;
+
+    const value = filterInputValue.trim();
+
+    if (value.length < 3) {
+      setLiveSearch(null); // clear live search when input is too short
+      return;
+    }
+
+    const handler = setTimeout(() => {
+      // Write to separate liveSearch state, NOT the filter store
+      setLiveSearch({ key: selectedFilter.key, value });
+      setPageIndex(0);
+    }, 500);
+
+    return () => clearTimeout(handler);
+  }, [filterInputValue, selectedFilter]);
+  const activeFilterChips = React.useMemo<ActiveFilterChip[]>(
+    () =>
+      filterFields.reduce<ActiveFilterChip[]>((chips, field) => {
+        if (field.type === "dateRange") {
+          const from = activeFilters[field.fromKey];
+          const to = activeFilters[field.toKey];
+          if (!from && !to) return chips;
+
+          chips.push({
+            key: field.key,
+            label: field.label,
+            value: [
+              from ? `${t("common.from", "From")}: ${from}` : "",
+              to ? `${t("common.to", "To")}: ${to}` : "",
+            ]
+              .filter(Boolean)
+              .join(" - "),
+            remove: () =>
+              activeFilterStore.removeFilters([field.fromKey, field.toKey]),
+          });
+          return chips;
+        }
+
+        const value = activeFilters[field.key];
+        if (!value) return chips;
+
+        chips.push({
+          key: field.key,
+          label: field.label,
+          value: String(value),
+          remove: () => activeFilterStore.removeFilter(field.key),
+        });
+        return chips;
+      }, []),
+    [activeFilterStore, activeFilters, filterFields, t],
+  );
+
+  const handleAddFilter = React.useCallback(() => {
+    if (!selectedFilter) return;
+
+    if (selectedFilter.type === "dateRange") {
+      if (!fromDate && !toDate) return;
+      activeFilterStore.setFilters({
+        fromCreatedAt: fromDate,
+        toCreatedAt: toDate,
+      });
+      setFromDate("");
+      setToDate("");
+      setFromDateDisplay("");
+      setToDateDisplay("");
+      setPageIndex(0);
+      return;
+    }
+
+    const value = filterInputValue.trim();
+    if (!value) return;
+
+    activeFilterStore.setFilter(selectedFilter.key, value);
+    setFilterInputValue("");
+    setLiveSearch(null); // ← clear live search when promoting to chip
+    setPageIndex(0);
+  }, [activeFilterStore, filterInputValue, selectedFilter, fromDate, toDate]);
+
+  const handleRemoveFilter = React.useCallback((remove: () => void) => {
+    remove();
+    setPageIndex(0);
+  }, []);
+
+  React.useEffect(() => {
+    setSearchParams((prev) => {
+      const params = new URLSearchParams(prev);
+      if (secretaryView === "parent") {
+        params.set("view", "parent");
+      } else {
+        params.delete("view");
+      }
+      return params;
+    }, { replace: true });
+  }, [secretaryView, setSearchParams]);
+
+  const {
+    recordsResponse,
+    isLoading,
+    isError,
+    refetch,
+    recordParent,
+    recordParentCount,
+    refetchParent,
+    isLoadingParent,
+    isErrorParent,
+  } = useUserRecords(filterParams);
+
+  const unitId = userDetails?.employee?.[0]?.unitId ?? null;
+  const { data } = useUnitConfiguration(unitId as string, {
+    enabled: !!unitId,
+  });
+  const config = data?.data?.items?.[0];
+  const waitForAllCollaboratorsBeforeAction =
+    config?.waitAllCollaboratorsBeforeAction || false;
+
+  let Error, loading;
+  if (isSelf) {
+    Error = isError;
+    loading = isLoading;
+  } else {
+    Error = isErrorParent;
+    loading = isLoadingParent;
+  }
+
+  const itemCount = isSelf
+    ? (recordsResponse?.count ?? null)
+    : (recordParentCount ?? null);
+
+  const totalPages = itemCount ? Math.ceil(itemCount / pageSize) : 1;
+
+  const statusOptions = React.useMemo(
+    () => [
+      { value: "All", label: t("userRecord.All") },
+      { value: "Draft", label: t("userRecord.Draft") },
+      { value: "Submitted", label: t("userRecord.Submitted") },
+      { value: "Accepted", label: t("userRecord.Accepted") },
+      { value: "Approved", label: t("userRecord.Approved") },
+      { value: "Rejected", label: t("userRecord.Rejected") },
+      { value: "Returned", label: t("userRecord.Returned") },
+      { value: "Adjustment", label: t("userRecord.Adjustment") },
+      { value: "Team Signature", label: t("userRecord.Team Signature") },
+      { value: "Dispatched", label: t("userRecord.Sent") },
+    ],
+    [t],
+  );
+
+  const menu = React.useMemo(
+    () => [
+      { value: "All", label: t("userRecord.All") },
+      { value: "external", label: t("nav.external") },
+      { value: "internal", label: t("nav.internal") },
+      { value: "internal_memo", label: t("nav.internal_memo") },
+      { value: "direct", label: t("nav.direct", "Direct") },
+    ],
+    [t],
+  );
+
+  React.useEffect(() => {
+    if (!itemCount) return;
+
+    let newPage = pageIndex + 1;
+
+    if (newPage > totalPages) {
+      newPage = 1;
+      setPageIndex(0);
+    }
+
+    setSearchParams((prev) => {
+      const params = new URLSearchParams(prev);
+      params.set("page", newPage.toString());
+      return params;
+    });
+  }, [pageIndex, totalPages, itemCount, setSearchParams]);
+
+  const handlePageChange = () => {
+    const newPage = pageIndex + 1;
+    setPageIndex(newPage);
+
+    setSearchParams((prev) => {
+      prev.set("page", newPage.toString());
+      return prev;
+    });
+  };
+
+  const refreshCurrentTable = React.useCallback(() => {
+    if (isSelf) {
+      refetch();
+      return;
+    }
+
+    refetchParent?.();
+  }, [isSelf, refetch, refetchParent]);
+
+  const handleApproveClick = React.useCallback((row: RecordDto) => {
+    setApproveTarget(row);
+  }, []);
+
+  const handleApproveClose = React.useCallback(() => {
+    setApproveTarget(null);
+    refreshCurrentTable();
+    queryClient.invalidateQueries({ queryKey: ["userRecords"] });
+    queryClient.invalidateQueries({ queryKey: ["recordParent"] });
+    queryClient.invalidateQueries({ queryKey: ["dashbordReport"] });
+  }, [queryClient, refreshCurrentTable]);
+
+  const handleApproveSuccess = React.useCallback(() => {
+    setApproveTarget(null);
+    if (isSelf) {
+      refreshCurrentTable();
+    } else {
+      navigate("/record-management/userRecords");
+    }
+  }, [isSelf, navigate, refreshCurrentTable]);
+
+  const columns = React.useMemo(
+    () =>
+      UserRecordsColumns(
+        isSelf ? refetch : refetchParent ? refetchParent : () => {},
+        localizedName as (name?: { am?: string; en?: string }) => string,
+        isSecretary,
+        isSelf,
+        waitForAllCollaboratorsBeforeAction,
+        pageIndex + 1,
+        { onApproveClick: handleApproveClick },
+        openDropdownId,
+        setOpenDropdownId,
+      ),
+    [
+      isSelf,
+      refetch,
+      refetchParent,
+      localizedName,
+      isSecretary,
+      waitForAllCollaboratorsBeforeAction,
+      pageIndex,
+      handleApproveClick,
+      openDropdownId,
+      setOpenDropdownId,
+    ],
+  );
+
+  return isDelegated ? (
+    <DelegationView />
+  ) : (
+    <div className="flex flex-col gap-2 bg-background text-foreground">
+      {/* Header and Filter */}
+      {/* <div className="flex justify-end">
+        <Button
+          size="sm"
+          title={t("msg.recycleBin")}
+          className="bg-gray-600 text-sm px-1 py-1 w-[40px] hover:bg-gray-700"
+          onClick={() =>
+            navigate("/record-management/userRecords/softDelete")
+          }
+        >
+          <Trash2 className="h-4 w-4" />
+        </Button>
+      </div> */}
+
+      <div className="flex items-start justify-between flex-wrap gap-4 mb-4">
+        <h4 className="text-xl font-medium text-gray-900 dark:text-gray-100">
+          {t("userRecord.Letters")}
+        </h4>
+
+        <div className="flex flex-col items-end gap-2 w-full sm:w-auto">
+          <Button
+            variant="addRecordBtn"
+            onClick={() =>
+              navigate("/record-management/userRecords/addUserRecord")
+            }
+          >
+            <CirclePlus className="mr-3" />
+            {t("userRecord.Add Record")}
+          </Button>
+          <div className="flex flex-col gap-2 w-full sm:w-auto">
+            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2 w-full sm:w-auto">
+              <Select
+                value={selectedFilter?.key ?? ""}
+                onValueChange={(val) => {
+                  setSelectedFilterKey(val as FilterConfig["key"]);
+                  setFilterInputValue("");
+                  setLiveSearch(null); // ← add this
+                  setFromDate("");
+                  setToDate("");
+                  setFromDateDisplay("");
+                  setToDateDisplay("");
+                }}
+                disabled={availableFilterFields.length === 0}
+              >
+                <SelectTrigger className="w-full sm:w-[200px]">
+                  <SelectValue placeholder={t("userRecord.Filter by")} />
+                </SelectTrigger>
+                <SelectContent>
+                  {availableFilterFields.map((field) => (
+                    <SelectItem key={field.key} value={field.key}>
+                      {field.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+
+              {selectedFilter?.type === "dateRange" ? (
+                <div className="flex flex-col sm:flex-row gap-2">
+                  {lang.startsWith("en") ? (
+                    <>
+                      <label className="mt-2">From: </label>
+                      <Input
+                        type="date"
+                        value={fromDate}
+                        onChange={(e) => setFromDate(e.target.value)}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter") handleAddFilter();
+                        }}
+                        className="w-[150px]"
+                      />
+                      <label className="mt-2">To: </label>
+                      <Input
+                        type="date"
+                        value={toDate}
+                        onChange={(e) => setToDate(e.target.value)}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter") handleAddFilter();
+                        }}
+                        min={fromDate}
+                        className="w-[150px]"
+                      />
+                    </>
+                  ) : (
+                    <div className="flex flex-wrap items-center gap-3">
+                      <div className="relative">
+                        <label className="font-medium mr-2">ከ:</label>
+                        <input
+                          type="text"
+                          value={fromDateDisplay}
+                          readOnly
+                          onClick={() => setShowFromPicker((prev) => !prev)}
+                          className="border border-gray-300 dark:border-gray-700 rounded-md px-2 py-1.5 w-40 bg-white dark:bg-gray-800 cursor-pointer"
+                          placeholder="ቀን ይምረጡ"
+                        />
+                        {showFromPicker && (
+                          <div className="absolute z-50 mt-1 bg-white dark:bg-gray-800 shadow-lg rounded-md p-2">
+                            <EthiopianDatePickerModal
+                              value={fromDate}
+                              onChange={(ethiopianDate: string) => {
+                                const gregorianDate =
+                                  convertEthiopianToGregorian(ethiopianDate);
+                                const formatted = gregorianDate
+                                  .toISOString()
+                                  .split("T")[0];
+                                setFromDate(formatted);
+                                setFromDateDisplay(ethiopianDate);
+                                setShowFromPicker(false);
+                              }}
+                            />
+                          </div>
+                        )}
+                      </div>
+
+                      <div className="relative">
+                        <label className="font-medium mr-2">እስከ:</label>
+                        <input
+                          type="text"
+                          value={toDateDisplay}
+                          readOnly
+                          onClick={() => setShowToPicker((prev) => !prev)}
+                          className="border border-gray-300 dark:border-gray-700 rounded-md px-2 py-1.5 w-40 bg-white dark:bg-gray-800 cursor-pointer"
+                          placeholder="ቀን ይምረጡ"
+                        />
+                        {showToPicker && (
+                          <div className="absolute z-50 mt-1 bg-white dark:bg-gray-800 shadow-lg rounded-md p-2">
+                            <EthiopianDatePickerModal
+                              value={toDate}
+                              onChange={(ethiopianDate: string) => {
+                                const gregorianDate =
+                                  convertEthiopianToGregorian(ethiopianDate);
+                                const formatted = gregorianDate
+                                  .toISOString()
+                                  .split("T")[0];
+                                setToDate(formatted);
+                                setToDateDisplay(ethiopianDate);
+                                setShowToPicker(false);
+                              }}
+                            />
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ) : (
+                <div className="relative w-full sm:w-[200px]">
+                  <Input
+                    type="text"
+                    className="pl-8"
+                    placeholder={`${t(
+                      "userRecord.Search",
+                    )} ${selectedFilter?.label.toLowerCase() ?? ""}`}
+                    value={filterInputValue}
+                    onChange={(e) => setFilterInputValue(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") {
+                        const value = filterInputValue.trim();
+                        if (value.length < 3) return;
+                        if (selectedFilter)
+                          activeFilterStore.setFilter(
+                            selectedFilter.key,
+                            value,
+                          );
+                        setFilterInputValue("");
+                        setLiveSearch(null); // ← clear live search
+                        setPageIndex(0);
+                      }
+                    }}
+                    disabled={!selectedFilter}
+                  />
+                  <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500" />
+                </div>
+              )}
+
+              <Button
+                type="button"
+                variant="outline"
+                onClick={handleAddFilter}
+                disabled={
+                  !selectedFilter ||
+                  (selectedFilter.type === "dateRange"
+                    ? !fromDate && !toDate
+                    : !filterInputValue.trim())
+                }
+              >
+                {t("common.add", "Add Filter")}
+              </Button>
+            </div>
+
+            {activeFilterChips.length > 0 && (
+              <div className="flex flex-wrap items-center gap-2">
+                {activeFilterChips.map((filter) => (
+                  <Badge
+                    key={filter.key}
+                    variant="outline"
+                    className="flex items-center gap-1 rounded-md px-2 py-1 text-sm"
+                  >
+                    <span className="font-medium">{filter.label}:</span>
+                    <span>{filter.value}</span>
+                    <button
+                      type="button"
+                      onClick={() => handleRemoveFilter(filter.remove)}
+                      className="ml-1 rounded-sm p-0.5 hover:bg-gray-100 dark:hover:bg-gray-800"
+                      aria-label={`${t("common.remove", "Remove")} ${
+                        filter.label
+                      }`}
+                    >
+                      <X className="h-3.5 w-3.5" />
+                    </button>
+                  </Badge>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-wrap gap-2 sm:gap-3 md:gap-4">
+        {menu.map((item) => (
+          <button
+            key={item.value}
+            onClick={() => setMenuFilter(item.value)}
+            className={cn(
+              "flex items-center justify-center gap-1 sm:gap-2 text-base base:text-base border min-w-[90px] sm:min-w-[120px] md:min-w-[180px] rounded-md px-2 py-1.5 relative transition-colors cursor-pointer",
+              menuFilter === item.value
+                ? "text-primary-700 dark:text-primary-foreground border-primary dark:border-primary bg-primary-50 dark:bg-primary/30"
+                : "text-gray-600 dark:text-gray-300 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700",
+            )}
+          >
+            {item.label}
+          </button>
+        ))}
+      </div>
+
+      {secretaryList(isSecretary, secretaryView, setSecretaryView, "SEC")}
+
+      <div className="flex flex-wrap gap-2 mb-4">
+        {statusOptions.map((opt) => (
+          <Button
+            key={opt.value}
+            variant={statusFilter === opt.value ? "linkActive" : "link"}
+            onClick={() => {
+              setStatusFilter(opt.value);
+              setPageIndex(0);
+            }}
+            className="rounded-md text-base base:text-base"
+          >
+            {opt.label}
+          </Button>
+        ))}
+      </div>
+
+      {loading ? (
+        <Loader />
+      ) : Error ? (
+        <div className="flex flex-col items-center justify-center h-full p-6 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+          <h2 className="text-xl font-semibold text-red-700 dark:text-red-400">
+            {t("msg.error")}
+          </h2>
+        </div>
+      ) : (
+        <>
+          <AdvancedTable
+            columns={columns}
+            data={isSelf ? recordsResponse?.items || [] : recordParent || []}
+            tableName="User Records"
+            toolBarPosition="right"
+            hideToolbarFilter
+            itemCount={
+              isSelf ? recordsResponse?.count || 0 : recordParentCount || 0
+            }
+            pageIndex={pageIndex}
+            onPageChange={setPageIndex}
+            nextFunction={handlePageChange}
+            prevFunction={() => setPageIndex(Math.max(0, pageIndex - 1))}
+            refresh={isSelf ? refetch : refetchParent}
+          />
+          {approveTarget && (
+            <ApproveRecord
+              recordId={approveTarget.id}
+              recordData={{
+                unitId: approveTarget.unitId,
+                recordTypeKey: approveTarget.recordTypeKey,
+              }}
+              preferredLanguage={approveTarget.preferredLanguage}
+              onSuccess={handleApproveSuccess}
+              onClose={handleApproveClose}
+              open={true}
+            />
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default UserRecords;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/userRecordsActions.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/userRecordsActions.tsx
new file mode 100644
index 000000000..3297f9e39
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/userRecordsActions.tsx
@@ -0,0 +1,1083 @@
+import { Button, getActionButtonVariant } from "@/shared/common/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import { useState } from "react";
+import {
+  EllipsisVertical,
+  ForwardIcon,
+  Key,
+  Unlock,
+  Trash2,
+  SquareCheckBig,
+  SquarePen,
+  Download,
+  AlertTriangle,
+  Mail,
+  Send,
+  MessageSquareText,
+  Users,
+} from "lucide-react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+
+import ForwardRecord from "./forwardRecord";
+import DeleteRecord from "./deleteRecord";
+import ApproveRecord from "./approveRecord";
+import DownloadRecord from "./downloadRecords";
+import ShareViaEmail from "./shareViaEmail";
+import SendRecord from "./sendRecord";
+import CollaborationCommentsDialog from "@/record-management/components/collaborations/CollaborationCommentsDialog";
+import TeamRecordCollaborationDetailsDialog from "./TeamRecordCollaborationDetailsDialog";
+
+import { useUserDetail } from "../hooks/useUserDetail";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { useUserRecords } from "../hooks/useUserRecords";
+import { useUnitConfiguration } from "@/shared/hooks/useUnitConfiguration";
+import { useCollaborationByRecordId } from "../hooks/useMyCollaborations";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { MeDto } from "@/shared/dto/user/meDto";
+import { RecordDto } from "@/record-management/dto/userRecords/userRecordsDto";
+import IncomingInstanceDetail from "../userIncoming/IncomingInstanceDetail";
+
+interface UserRecordProps {
+  rowData: RecordDto;
+  refetchTable?: () => void;
+  isSecretary?: boolean;
+  isSelf?: boolean;
+  pageIndex?: number;
+  fromTable: boolean;
+  waitForAllCollaboratorsBeforeAction?: boolean;
+  onApproveClick?: (row: RecordDto) => void;
+  isDropdownOpen?: boolean;
+  onDropdownOpenChange?: (open: boolean) => void;
+  dropdownId?: string;
+}
+
+const UserRecordsActions: React.FC<UserRecordProps> = ({
+  rowData,
+  refetchTable,
+  isSecretary,
+  isSelf,
+  pageIndex,
+  fromTable,
+  onApproveClick,
+  waitForAllCollaboratorsBeforeAction,
+  isDropdownOpen = false,
+  onDropdownOpenChange,
+  dropdownId = "",
+}) => {
+  const { userDetails, unFilteredUserDetails, selectedPositionId } =
+    useAuthUser();
+  const { checkHaveParent } = useUserDetail(userDetails as MeDto);
+  const allPositions =
+    unFilteredUserDetails?.employee?.flatMap((emp) => emp.positions) || [];
+
+  const currentPosition = allPositions.find(
+    (pos) =>
+      pos.id === selectedPositionId ||
+      pos.employeePositionId === selectedPositionId,
+  );
+
+  const {
+    makeSecureRecord,
+    unMakeSecureRecord,
+    markUrgentRecord,
+    unMarkUrgentRecord,
+    forceDispatchCollaborator,
+    isForceDispatchingCollaborator,
+  } = useUserRecords(); // ✅ add urgent actions in hook
+
+  const { data: unitConfigData } = useUnitConfiguration(rowData.unitId, {
+    enabled: !!rowData.unitId,
+  });
+  const allowEditOnCollaboration =
+    unitConfigData?.data?.items?.[0]?.allowEditOnCollaboration ?? false;
+
+  // Fetch collaboration data if waitForAllCollaboratorsBeforeAction is enabled
+  const { data: collaborationData } = useCollaborationByRecordId(rowData.id, {
+    enabled:
+      waitForAllCollaboratorsBeforeAction && rowData.initiationType === "team",
+  });
+
+  // Check if all collaborators have completed their actions
+  const collaborationItems = collaborationData?.items ?? [];
+  const hasPendingCollaborators = collaborationItems.some((item: any) => {
+    const hasNoAction =
+      !item.signStatus || item.signStatus === "draft" || item.signStatus === "";
+    return hasNoAction;
+  });
+  const allCollaboratorsCompleted =
+    !waitForAllCollaboratorsBeforeAction ||
+    rowData.initiationType !== "team" ||
+    !hasPendingCollaborators;
+
+  const [isOpenSecure, setIsOpenSecure] = useState(false);
+  const [isOpenUrgent, setIsOpenUrgent] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [showDownloadDialog, setShowDownloadDialog] = useState(false);
+  const [showForward, setShowForward] = useState(false);
+  const [showApprove, setShowApprove] = useState(false);
+  const [showForceDispatchDialog, setShowForceDispatchDialog] = useState(false);
+  const [showShareEmail, setShowShareEmail] = useState(false);
+  const [showSend, setShowSend] = useState(false);
+  const [showCollaborationComments, setShowCollaborationComments] =
+    useState(false);
+  const [showCollaborationDetails, setShowCollaborationDetails] =
+    useState(false);
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const { t } = useTranslation();
+  const permissionKeys = currentPosition?.permissions?.map((p) => p.key) || [];
+
+  const getOutgoingListUrl = () => {
+    const params = new URLSearchParams();
+    const page =
+      searchParams.get("page") || (pageIndex ? String(pageIndex) : "");
+    const view = searchParams.get("view");
+
+    if (page) params.set("page", page);
+    if (view === "parent") params.set("view", view);
+
+    const queryString = params.toString();
+    return `/record-management/userRecords${
+      queryString ? `?${queryString}` : ""
+    }`;
+  };
+  const secretaryView = isSelf ? "" : "parent";
+  const employeePositionId =
+    userDetails?.employee?.flatMap(
+      (emp) => emp?.positions?.map((pos) => pos.employeePositionId) || [],
+    ) || [];
+  const employeePositionDelegatorId =
+    userDetails?.employee?.flatMap(
+      (emp) => emp?.positions?.map((pos) => pos.delegatorId) || [],
+    ) || [];
+  const initatorId = rowData?.initiator?.id;
+  const shouldShowAction: boolean =
+    employeePositionId.includes(initatorId) ||
+    employeePositionDelegatorId.includes(initatorId);
+  const handleEditClick = () => {
+    
+    navigate(`/record-management/userRecords/editUserRecord/${rowData?.id}`);
+  };
+  const handleViewDetails = () => {
+    
+    const baseUrl = `/record-management/userRecords/viewRecord/${rowData?.id}/?page=${pageIndex}`;
+    const url = secretaryView === "parent" ? `${baseUrl}&view=parent` : baseUrl;
+    navigate(url);
+  };
+
+  const handleForwardClick = () => {
+    
+    if (!allCollaboratorsCompleted && waitForAllCollaboratorsBeforeAction) {
+      toast.error(
+        t(
+          "userRecord.waitingForCollaborators",
+          "Cannot forward: Waiting for all collaborators to complete their actions",
+        ),
+      );
+      return;
+    }
+    setShowForward(true);
+  };
+
+  const handleDeleteClick = () => {
+    
+    setShowDeleteDialog(true);
+  };
+
+  const handleApproveClick = () => {
+    
+    if (!allCollaboratorsCompleted && waitForAllCollaboratorsBeforeAction) {
+      toast.error(
+        t(
+          "userRecord.waitingForCollaborators",
+          "Cannot approve: Waiting for all collaborators to complete their actions",
+        ),
+      );
+      return;
+    }
+    if (onApproveClick) {
+      onApproveClick(rowData);
+    } else {
+      setShowApprove(true);
+    }
+  };
+
+  const handleSendClick = () => {
+    
+    setShowSend(true);
+  };
+
+  const handleDownloadClick = () => {
+    
+    setShowDownloadDialog(true);
+  };
+
+  const handleForceDispatchClick = () => {
+    
+    setShowForceDispatchDialog(true);
+  };
+
+  const handleShareEmailClick = () => {
+    
+    setShowShareEmail(true);
+  };
+
+  const handleCollaborationCommentsClick = () => {
+    
+    setShowCollaborationComments(true);
+  };
+
+  const handleCollaborationDetailsClick = () => {
+    
+    setShowCollaborationDetails(true);
+  };
+
+  /** ✅ Secure/Unsecure confirm */
+  const handleSecureConfirm = () => {
+    if (isSecure) {
+      unMakeSecureRecord(
+        { id: rowData.id },
+        {
+          onSuccess: () =>
+            toast.success(t("userRecord.recordUnsecuredSuccess")),
+        },
+      );
+    } else {
+      makeSecureRecord(
+        { id: rowData.id },
+        {
+          onSuccess: () => toast.success(t("userRecord.recordSecuredSuccess")),
+        },
+      );
+    }
+    setIsOpenSecure(false);
+  };
+
+  /** ✅ Urgent/Unmark Urgent confirm */
+  const handleUrgentConfirm = () => {
+    if (isUrgent) {
+      unMarkUrgentRecord(
+        { id: rowData.id },
+        {
+          onSuccess: () =>
+            toast.success(t("userRecord.recordUrgencyClearedSuccess")),
+        },
+      );
+    } else {
+      markUrgentRecord(
+        { id: rowData.id },
+        {
+          onSuccess: () =>
+            toast.success(t("userRecord.recordMarkedUrgentSuccess")),
+        },
+      );
+    }
+    setIsOpenUrgent(false);
+  };
+
+  /**  Determine UI visibility */
+  const actionsVisible =
+    rowData.statusKey === "Draft" ||
+    rowData.statusKey === "Adjustment" ||
+    rowData.statusKey === "Returned" ||
+    rowData.statusKey === "Team Rejected" ||
+    rowData.statusKey === "Team Adjusted" ||
+    rowData.statusKey === "Team Signature";
+  // Once a collaboration letter is rejected (hard reject or team send-back),
+  // Approve must disappear so the creator can't re-submit a rejected draft.
+  const isCollabRejected =
+    rowData.initiationType === "team" &&
+    (rowData.statusKey === "Rejected" || rowData.statusKey === "Team Rejected");
+  const approveVisible =
+    permissionKeys.includes("can:sendExternalRecordToRo") &&
+    actionsVisible &&
+    !isCollabRejected;
+  const approveVisibleforInternal =
+    permissionKeys.includes("can:sendInternalRecordToRo") &&
+    actionsVisible &&
+    !isCollabRejected;
+  // Secure / urgent toggles: visible when the user has permission AND either
+  // the record is in an action-eligible status (so they can mark) OR the
+  // record is already secured / urgent (so they can undo it from any status).
+  const recordTypeKey = rowData?.recordTypeKey;
+  const isDirectRecord = rowData.recordTypeKey
+    ?.toLowerCase()
+    .includes("direct");
+  const isDirectOrInternalMemo =
+    isDirectRecord || recordTypeKey === "internal_memo";
+
+  const secureRecordVisible =
+    permissionKeys.includes("can:createSecureRecord") &&
+    (actionsVisible || rowData.isSecured) &&
+    !isDirectOrInternalMemo;
+  const urgentRecordVisible =
+    permissionKeys.includes("can:createUrgentRecord") &&
+    (actionsVisible || rowData.isUrgent);
+  const sendInternal =
+    permissionKeys.includes("can:sendInternalRecordToRo") &&
+    actionsVisible &&
+    !isCollabRejected;
+  const sendInternalMemo =
+    permissionKeys.includes("can:dispatchInternalMemo") &&
+    actionsVisible &&
+    !isCollabRejected;
+  const sendExternal =
+    permissionKeys.includes("can:sendExternalRecordToRo") &&
+    actionsVisible &&
+    !isCollabRejected;
+  const canApprove =
+    (sendExternal && recordTypeKey === "external") ||
+    (sendInternal && recordTypeKey === "internal") ||
+    (sendInternalMemo && recordTypeKey === "internal_memo");
+  const sendVisible =
+    isDirectRecord &&
+    actionsVisible &&
+    rowData.statusKey !== "Team Signature" &&
+    rowData.statusKey !== "Team Rejected";
+  const forceDispatchVisible =
+    isDirectRecord &&
+    (rowData.statusKey === "Team Signature" ||
+      rowData.statusKey === "Team Rejected");
+  const canBeDeleted = actionsVisible && rowData.statusKey === "Draft";
+
+  const isCollaborationRecord = rowData.initiationType === "team";
+  const activeContentId =
+    rowData.content?.find((content) => content.isCurrent)?.id ??
+    rowData.content?.[0]?.id;
+  const canManageTeamCollaboration =
+    isCollaborationRecord && isSelf && shouldShowAction;
+  const canOpenTeamComments =
+    canManageTeamCollaboration && Boolean(activeContentId);
+  const forwardVisible =
+    (checkHaveParent !== null || isCollaborationRecord) &&
+    actionsVisible &&
+    !isDirectRecord;
+  // Allow the menu to open even on blocked statuses if the record is
+  // currently secured or urgent — the creator still needs a way to undo
+  // those flags after the record has moved past Draft/Adjustment.
+  const canUndoSecureOrUrgent =
+    Boolean(rowData.isSecured) || Boolean(rowData.isUrgent);
+  const shouldShowMenu =
+    !["Submitted", "Rejected", "Team Signature"].includes(rowData?.statusKey) ||
+    canManageTeamCollaboration ||
+    canUndoSecureOrUrgent ||
+    forceDispatchVisible;
+  const canDownload =
+    rowData.statusKey === "Dispatched" || rowData.statusKey === "Approved";
+  const canShareViaEmail = rowData.statusKey === "Dispatched";
+  const hasInlineActions =
+    shouldShowMenu &&
+    isSelf &&
+    ((shouldShowAction && actionsVisible) ||
+      canDownload ||
+      canManageTeamCollaboration ||
+      (shouldShowAction && canUndoSecureOrUrgent) ||
+      forceDispatchVisible);
+  /** ✅ Secure and Urgent labels/icons */
+  const isSecure = rowData.isSecured;
+  const isUrgent = rowData.isUrgent;
+  const secureLabel = isSecure
+    ? t("userRecord.UnsecureRecord")
+    : t("userRecord.MakeRecordSecure");
+  const urgentLabel = isUrgent
+    ? t("userRecord.UnmarkUrgent")
+    : t("userRecord.MarkUrgent");
+  const SecureIcon = isSecure ? Unlock : Key;
+  const UrgentIcon = AlertTriangle;
+  // Edit is hidden for both "Rejected" and "Team Rejected" — the creator
+  // cannot revise a rejected record from the Outgoing tab.
+  const canEdit =
+    shouldShowAction &&
+    isSelf &&
+    (rowData.statusKey === "Draft" ||
+      rowData.statusKey === "Adjustment" ||
+      rowData.statusKey === "Team Adjusted" ||
+      rowData.statusKey === "Team Rejected" ||
+      rowData.statusKey === "Returned" ||
+      (isCollaborationRecord &&
+        allowEditOnCollaboration &&
+        rowData.statusKey === "Team Signature"));
+
+  return (
+    <>
+      {" "}
+      {fromTable ? (
+        <div className="flex">
+          <Button variant={"viewDetail"} onClick={handleViewDetails}>
+            {t("userRecord.View Detail")}
+          </Button>
+
+          {shouldShowMenu && isSelf && (
+            <DropdownMenu open={isDropdownOpen} onOpenChange={onDropdownOpenChange || (() => {})}>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  className="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
+                  aria-haspopup="menu"
+                  aria-expanded={isDropdownOpen}
+                >
+                  <EllipsisVertical className="h-4 w-4" />
+                  <span className="sr-only">
+                    {t("userRecord.Open actions menu")}
+                  </span>
+                </Button>
+              </DropdownMenuTrigger>
+
+              <DropdownMenuContent
+                align="end"
+                className="w-[200px]"
+                onCloseAutoFocus={(e) => e.preventDefault()}
+                onInteractOutside={(e) => {
+                  const target = e.target as HTMLElement;
+                  if (target.closest('[role="dialog"]')) e.preventDefault();
+                }}
+              >
+                {shouldShowAction && actionsVisible && (
+                  <>
+                    {canApprove && (
+                      <DropdownMenuItem
+                        onSelect={
+                          allCollaboratorsCompleted
+                            ? handleApproveClick
+                            : (e) => {
+                                e.preventDefault();
+                                toast.error(
+                                  t(
+                                    "userRecord.waitingForCollaborators",
+                                    "Cannot approve: Waiting for all collaborators to complete their actions",
+                                  ),
+                                );
+                              }
+                        }
+                        disabled={!allCollaboratorsCompleted}
+                        className={`cursor-pointer !bg-transparent ${
+                          !allCollaboratorsCompleted
+                            ? "opacity-50 cursor-not-allowed hover:!text-primary-700"
+                            : "hover:!text-primary-700"
+                        }`}
+                      >
+                        <SquareCheckBig className="mr-2 h-4 w-4" />
+                        {t("userRecord.Approve")}
+                        {!allCollaboratorsCompleted && (
+                          <span className="ml-2 text-xs text-orange-600">
+                            (Waiting)
+                          </span>
+                        )}
+                      </DropdownMenuItem>
+                    )}
+
+                    {forwardVisible && (
+                      <DropdownMenuItem
+                        onSelect={
+                          allCollaboratorsCompleted
+                            ? handleForwardClick
+                            : (e) => {
+                                e.preventDefault();
+                                toast.error(
+                                  t(
+                                    "userRecord.waitingForCollaborators",
+                                    "Cannot forward: Waiting for all collaborators to complete their actions",
+                                  ),
+                                );
+                              }
+                        }
+                        disabled={!allCollaboratorsCompleted}
+                        className={`cursor-pointer !bg-transparent ${
+                          !allCollaboratorsCompleted
+                            ? "opacity-50 cursor-not-allowed hover:!text-primary-700"
+                            : "hover:!text-primary-700"
+                        }`}
+                      >
+                        <ForwardIcon className="mr-2 h-4 w-4" />
+                        {t("userRecord.Forward")}
+                        {!allCollaboratorsCompleted && (
+                          <span className="ml-2 text-xs text-orange-600">
+                            (Waiting)
+                          </span>
+                        )}
+                      </DropdownMenuItem>
+                    )}
+
+                    {canEdit && (
+                      <DropdownMenuItem
+                        onSelect={handleEditClick}
+                        className="cursor-pointer hover:!text-primary-700 !bg-transparent"
+                      >
+                        <SquarePen className="mr-2 h-4 w-4" />
+                        {t("userRecord.Edit")}
+                      </DropdownMenuItem>
+                    )}
+
+                    {secureRecordVisible && (
+                      <DropdownMenuItem
+                        onSelect={(e) => {
+                          e.preventDefault();
+                          setIsOpenSecure(true);
+                        }}
+                        className={`cursor-pointer !bg-transparent ${
+                          isSecure
+                            ? "text-yellow-600 hover:!text-yellow-800"
+                            : "text-red-600 hover:!text-red-800"
+                        }`}
+                      >
+                        <SecureIcon className="mr-2 h-4 w-4" />
+                        {secureLabel}
+                      </DropdownMenuItem>
+                    )}
+
+                    {urgentRecordVisible && (
+                      <DropdownMenuItem
+                        onSelect={(e) => {
+                          e.preventDefault();
+                          setIsOpenUrgent(true);
+                        }}
+                        className={`cursor-pointer !bg-transparent ${
+                          isUrgent
+                            ? "text-orange-600 hover:!text-orange-800"
+                            : "text-primary-600 hover:!text-primary-800"
+                        }`}
+                      >
+                        <UrgentIcon className="mr-2 h-4 w-4" />
+                        {urgentLabel}
+                      </DropdownMenuItem>
+                    )}
+
+                    {sendVisible && (
+                      <DropdownMenuItem
+                        onSelect={(e) => {
+                          e.preventDefault();
+                          handleSendClick();
+                        }}
+                        className="cursor-pointer hover:!text-primary-700 !bg-transparent"
+                      >
+                        <Mail className="mr-2 h-4 w-4" />
+                        {t("userRecord.Send")}
+                      </DropdownMenuItem>
+                    )}
+
+                    {forceDispatchVisible && (
+                      <DropdownMenuItem
+                        onSelect={(e) => {
+                          e.preventDefault();
+                          handleForceDispatchClick();
+                        }}
+                        className="cursor-pointer hover:!text-primary !bg-transparent"
+                      >
+                        <Send className="mr-2 h-4 w-4" />
+                        {t("userRecord.SendDirectly", "Send Directly")}
+                      </DropdownMenuItem>
+                    )}
+
+                    {canBeDeleted && (
+                      <DropdownMenuItem
+                        onSelect={handleDeleteClick}
+                        className="text-red-600 cursor-pointer hover:!text-red-800 !bg-transparent"
+                      >
+                        <Trash2 className="mr-2 h-4 w-4 text-red-600" />
+                        {t("userRecord.Delete")}
+                      </DropdownMenuItem>
+                    )}
+                  </>
+                )}
+
+                {canDownload && (
+                  <DropdownMenuItem
+                    onSelect={handleDownloadClick}
+                    className="cursor-pointer hover:!text-primary-700 !bg-transparent"
+                  >
+                    <Download className="mr-2 h-4 w-4" />
+                    {t("userRecord.Download")}
+                  </DropdownMenuItem>
+                )}
+
+                {canOpenTeamComments && (
+                  <DropdownMenuItem
+                    onSelect={handleCollaborationCommentsClick}
+                    className="cursor-pointer hover:!text-primary-700 !bg-transparent"
+                  >
+                    <MessageSquareText className="mr-2 h-4 w-4" />
+                    {t("collaboration.comments", "Comments")}
+                  </DropdownMenuItem>
+                )}
+
+                {canManageTeamCollaboration && (
+                  <DropdownMenuItem
+                    onSelect={handleCollaborationDetailsClick}
+                    className="cursor-pointer hover:!text-primary-700 !bg-transparent"
+                  >
+                    <Users className="mr-2 h-4 w-4" />
+                    {t("header.navigation.collaboration")}
+                  </DropdownMenuItem>
+                )}
+
+                {/* {canShareViaEmail && (
+              <DropdownMenuItem
+                onSelect={handleShareEmailClick}
+                className="cursor-pointer hover:!text-primary-700 !bg-transparent"
+              >
+                <Mail className="mr-2 h-4 w-4" />
+                {t("userRecord.ShareViaEmail")}
+              </DropdownMenuItem>
+            )} */}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+          {(rowData?.statusKey === "Dispatched" ||
+            (rowData?.recordTypeKey === "internal_memo" &&
+              rowData?.statusKey === "Approved")) && (
+            <IncomingInstanceDetail
+              instanceId={rowData?.id as string}
+              instanceType={"outgoing"}
+              rowData={rowData}
+            />
+          )}
+        </div>
+      ) : (
+        <>
+          {hasInlineActions ? (
+            <div className="flex flex-wrap gap-2">
+              {shouldShowAction && actionsVisible && (
+                <>
+                  {(approveVisible ||
+                    approveVisibleforInternal ||
+                    (sendExternal && rowData?.recordTypeKey === "external") ||
+                    (sendInternal && rowData?.recordTypeKey === "internal") ||
+                    (sendInternalMemo &&
+                      rowData?.recordTypeKey === "internal_memo")) && (
+                    <Button
+                      variant={getActionButtonVariant("Approve")}
+                      onClick={
+                        allCollaboratorsCompleted
+                          ? handleApproveClick
+                          : (e) => {
+                              e.preventDefault();
+                              toast.error(
+                                t(
+                                  "userRecord.waitingForCollaborators",
+                                  "Cannot approve: Waiting for all collaborators to complete their actions",
+                                ),
+                              );
+                            }
+                      }
+                      disabled={!allCollaboratorsCompleted}
+                      className={`h-9 px-4 flex items-center gap-2 rounded-full shadow-sm hover:shadow-md transition-all duration-300 ${
+                        allCollaboratorsCompleted
+                          ? "bg-gradient-to-r from-emerald-50 to-green-50 border-emerald-200 hover:from-emerald-100 hover:to-green-100 hover:border-emerald-300 hover:text-emerald-700"
+                          : "opacity-50 cursor-not-allowed bg-gray-100 border-gray-200"
+                      }`}
+                    >
+                      <SquareCheckBig
+                        className={`h-4 w-4 ${
+                          allCollaboratorsCompleted
+                            ? "text-emerald-600"
+                            : "text-gray-400"
+                        }`}
+                      />
+                      <span
+                        className={`text-sm font-medium ${
+                          allCollaboratorsCompleted
+                            ? "text-emerald-700"
+                            : "text-gray-600"
+                        }`}
+                      >
+                        {t("userRecord.Approve")}
+                        {!allCollaboratorsCompleted && " (Waiting)"}
+                      </span>
+                    </Button>
+                  )}
+                  {forwardVisible && (
+                    <Button
+                      variant={getActionButtonVariant("Forward")}
+                      onClick={
+                        allCollaboratorsCompleted
+                          ? handleForwardClick
+                          : (e) => {
+                              e.preventDefault();
+                              toast.error(
+                                t(
+                                  "userRecord.waitingForCollaborators",
+                                  "Cannot forward: Waiting for all collaborators to complete their actions",
+                                ),
+                              );
+                            }
+                      }
+                      disabled={!allCollaboratorsCompleted}
+                    >
+                      <ForwardIcon className="h-4 w-4" />
+                      <span>{t("userRecord.Forward")}</span>
+                    </Button>
+                  )}
+
+                  {sendVisible && (
+                    <Button
+                      variant={getActionButtonVariant("Send")}
+                      onClick={handleSendClick}
+                    >
+                      <Mail className="h-4 w-4" />
+                      <span>{t("userRecord.Send")}</span>
+                    </Button>
+                  )}
+
+                  {forceDispatchVisible && (
+                    <Button
+                      variant={getActionButtonVariant("Send Directly")}
+                      onClick={handleForceDispatchClick}
+                    >
+                      <Send className="h-4 w-4" />
+                      <span>
+                        {t("userRecord.SendDirectly", "Send Directly")}
+                      </span>
+                    </Button>
+                  )}
+
+                  {canEdit && (
+                    <Button
+                      variant={getActionButtonVariant("Edit")}
+                      onClick={handleEditClick}
+                    >
+                      <SquarePen className="h-4 w-4" />
+                      <span>{t("userRecord.Edit")}</span>
+                    </Button>
+                  )}
+
+                  {secureRecordVisible && (
+                    <Button
+                      variant={getActionButtonVariant("Secure Letter")}
+                      onClick={(e) => {
+                        e.preventDefault();
+                        setIsOpenSecure(true);
+                      }}
+                    >
+                      <SecureIcon className="h-4 w-4" />
+                      <span>{secureLabel}</span>
+                    </Button>
+                  )}
+
+                  {urgentRecordVisible && (
+                    <Button
+                      variant={getActionButtonVariant("Make Urgent")}
+                      onClick={(e) => {
+                        e.preventDefault();
+                        setIsOpenUrgent(true);
+                      }}
+                    >
+                      <UrgentIcon className="h-4 w-4" />
+                      <span>{urgentLabel}</span>
+                    </Button>
+                  )}
+
+                  {canBeDeleted && (
+                    <Button
+                      variant={getActionButtonVariant("Delete")}
+                      onClick={handleDeleteClick}
+                    >
+                      <Trash2 className="h-4 w-4" />
+                      <span>{t("userRecord.Delete")}</span>
+                    </Button>
+                  )}
+                </>
+              )}
+
+              {/* Unsecure / Unmark Urgent — available on any status when the
+                  record is already flagged, so the creator can still undo it
+                  after the record has moved past Draft/Adjustment. */}
+              {shouldShowAction &&
+                !actionsVisible &&
+                isSecure &&
+                !isDirectOrInternalMemo &&
+                permissionKeys.includes("can:createSecureRecord") && (
+                  <Button
+                    variant={getActionButtonVariant("Secure Letter")}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      setIsOpenSecure(true);
+                    }}
+                  >
+                    <SecureIcon className="h-4 w-4" />
+                    <span>{secureLabel}</span>
+                  </Button>
+                )}
+
+              {shouldShowAction &&
+                !actionsVisible &&
+                isUrgent &&
+                permissionKeys.includes("can:createUrgentRecord") && (
+                  <Button
+                    variant={getActionButtonVariant("Make Urgent")}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      setIsOpenUrgent(true);
+                    }}
+                  >
+                    <UrgentIcon className="h-4 w-4" />
+                    <span>{urgentLabel}</span>
+                  </Button>
+                )}
+
+              {canDownload && (
+                <Button
+                  variant={getActionButtonVariant("Download")}
+                  onClick={handleDownloadClick}
+                >
+                  <Download className="h-4 w-4" />
+                  <span>{t("userRecord.Download")}</span>
+                </Button>
+              )}
+
+              {canOpenTeamComments && (
+                <Button
+                  variant={getActionButtonVariant("Comment")}
+                  onClick={handleCollaborationCommentsClick}
+                >
+                  <MessageSquareText className="h-4 w-4" />
+                  <span>{t("collaboration.comments", "Comments")}</span>
+                </Button>
+              )}
+
+              {canManageTeamCollaboration && (
+                <Button
+                  variant={getActionButtonVariant("Collaboration")}
+                  onClick={handleCollaborationDetailsClick}
+                >
+                  <Users className="h-4 w-4" />
+                  <span>{t("header.navigation.collaboration")}</span>
+                </Button>
+              )}
+              {(rowData?.statusKey === "Dispatched" ||
+                (rowData?.recordTypeKey === "internal_memo" &&
+                  rowData?.statusKey === "Approved")) && (
+                <IncomingInstanceDetail
+                  instanceId={rowData?.id as string}
+                  instanceType={"outgoing"}
+                  rowData={rowData}
+                  fromTable={false}
+                />
+              )}
+              {/* {canShareViaEmail && (
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={handleShareEmailClick}
+        className="h-9 px-4 flex items-center gap-2 rounded-full bg-gradient-to-r from-slate-50 to-gray-50 border-slate-200 hover:from-slate-100 hover:to-gray-100 hover:border-slate-300 hover:text-slate-700 transition-all duration-300 shadow-sm hover:shadow-md"
+      >
+        <Mail className="h-4 w-4 text-slate-600" />
+        <span className="text-sm font-medium text-slate-700">
+          {t("userRecord.ShareViaEmail")}
+        </span>
+      </Button>
+    )} */}
+            </div>
+          ) : (
+            <p className="text-sm text-gray-500 dark:text-gray-400 italic">
+              {t("userIncoming.noActionsAvailable", {
+                defaultValue: "No actions available for this record.",
+              })}
+            </p>
+          )}
+        </>
+      )}
+      {/* --- Modals --- */}
+      {showDeleteDialog && (
+        <DeleteRecord
+          recordId={rowData?.id || "0"}
+          onSuccess={() => {
+            setShowDeleteDialog(false);
+            if (fromTable) {
+              if (refetchTable) refetchTable();
+            } else {
+              navigate(getOutgoingListUrl(), { replace: true });
+            }
+          }}
+          onClose={() => setShowDeleteDialog(false)}
+        />
+      )}
+      {showDownloadDialog && (
+        <DownloadRecord
+          recordId={rowData?.id || "0"}
+          onSuccess={() => setShowDownloadDialog(false)}
+          onClose={() => {
+            setShowDownloadDialog(false);
+            if (refetchTable) refetchTable();
+          }}
+        />
+      )}
+      {showForward && (
+        <ForwardRecord
+          recordId={rowData?.id}
+          onSuccess={() => {
+            setShowForward(false);
+            if (refetchTable) refetchTable();
+          }}
+          onClose={() => setShowForward(false)}
+        />
+      )}
+      {showApprove && (
+        <ApproveRecord
+          recordId={rowData?.id}
+          recordData={{
+            unitId: rowData?.unitId,
+            recordTypeKey: rowData?.recordTypeKey,
+          }}
+          onSuccess={() => {
+            setShowApprove(false);
+            if (fromTable) {
+              if (refetchTable) refetchTable();
+            } else {
+              // On the detail page, send the user back to the outgoing
+              // records table after a successful approve.
+              navigate("/record-management/userRecords");
+            }
+          }}
+          onClose={() => setShowApprove(false)}
+          open={showApprove}
+          preferredLanguage={rowData?.preferredLanguage}
+        />
+      )}
+      {showShareEmail && (
+        <ShareViaEmail
+          recordId={rowData?.id || "0"}
+          open={showShareEmail}
+          onSuccess={() => {
+            setShowShareEmail(false);
+            if (refetchTable) refetchTable();
+          }}
+          onClose={() => setShowShareEmail(false)}
+        />
+      )}
+      {showCollaborationComments && activeContentId && (
+        <CollaborationCommentsDialog
+          open={showCollaborationComments}
+          onClose={() => setShowCollaborationComments(false)}
+          recordId={rowData.id}
+          contentId={activeContentId}
+          recordStatus={rowData.statusKey}
+        />
+      )}
+      {showCollaborationDetails && (
+        <TeamRecordCollaborationDetailsDialog
+          open={showCollaborationDetails}
+          onClose={() => setShowCollaborationDetails(false)}
+          recordId={rowData.id}
+        />
+      )}
+      {/* ✅ Secure / Unsecure Confirm Dialog */}
+      <AlertDialog
+        open={showForceDispatchDialog}
+        onOpenChange={setShowForceDispatchDialog}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t("userRecord.SendDirectly", "Send Directly")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t(
+                "userRecord.forceDispatchDescription",
+                "This will force dispatch the direct team record.",
+              )}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isForceDispatchingCollaborator}>
+              {t("common.Cancel")}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={async (event) => {
+                event.preventDefault();
+                try {
+                  await forceDispatchCollaborator({
+                    recordId: rowData.id,
+                    type: isDirectRecord ? "direct" : "other",
+                  });
+                  setShowForceDispatchDialog(false);
+                  if (refetchTable) refetchTable();
+                } catch (error) {
+                  console.error(error);
+                }
+              }}
+              disabled={isForceDispatchingCollaborator}
+            >
+              {isForceDispatchingCollaborator
+                ? t("userRecord.Sending", "Sending...")
+                : t("userRecord.SendDirectly", "Send Directly")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+      <AlertDialog open={isOpenSecure} onOpenChange={setIsOpenSecure}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {isSecure
+                ? t("userRecord.UnsecureDialogTitle")
+                : t("userRecord.SecureDialogTitle")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {isSecure
+                ? t("userRecord.UnsecureDialogDescription")
+                : t("userRecord.SecureDialogDescription")}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t("common.Cancel")}</AlertDialogCancel>
+            <AlertDialogAction onClick={handleSecureConfirm}>
+              {t("common.Confirm")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+      {/* ✅ Urgent / Unmark Urgent Confirm Dialog */}
+      <AlertDialog open={isOpenUrgent} onOpenChange={setIsOpenUrgent}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {isUrgent
+                ? t("userRecord.UnmarkUrgentDialogTitle")
+                : t("userRecord.MarkUrgentDialogTitle")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {isUrgent
+                ? t("userRecord.UnmarkUrgentDialogDescription")
+                : t("userRecord.MarkUrgentDialogDescription")}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t("common.Cancel")}</AlertDialogCancel>
+            <AlertDialogAction onClick={handleUrgentConfirm}>
+              {t("common.Confirm")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+      {/* ✅ Send Direct Record Confirm Dialog */}
+      {showSend && (
+        <SendRecord
+          recordId={rowData?.id || "0"}
+          onSuccess={() => {
+            setShowSend(false);
+            if (refetchTable) refetchTable();
+          }}
+          onClose={() => setShowSend(false)}
+        />
+      )}
+    </>
+  );
+};
+
+export default UserRecordsActions;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/userRecordsColumns.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/userRecordsColumns.tsx
new file mode 100644
index 000000000..d7ca775b0
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/userRecordsColumns.tsx
@@ -0,0 +1,361 @@
+import { renderStatus } from "@/record-management/utils/renderDetails";
+import { ColumnDef } from "@tanstack/react-table";
+import UserRecordsActions from "./userRecordsActions";
+import { DataTableColumnHeader } from "@/shared/common/ui/dataTableColumnHeader";
+import { t } from "i18next";
+import { RecordDto } from "@/record-management/dto/userRecords/userRecordsDto";
+import i18n from "i18next";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+
+interface RecordTags {
+  isReply?: boolean;
+  isSecured?: boolean;
+  isUrgent?: boolean;
+}
+
+interface UserRecordsColumnOptions {
+  onApproveClick?: (row: RecordDto) => void;
+}
+
+// Utility component to show tooltip on hover
+const OverflowTooltip = ({
+  children,
+  text,
+  maxWidth = 200,
+}: {
+  children: React.ReactNode;
+  text: string;
+  maxWidth?: number;
+}) => {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <div
+          className="overflow-hidden text-ellipsis whitespace-nowrap"
+          style={{ maxWidth: `${maxWidth}px` }}
+        >
+          {children}
+        </div>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p className="max-w-xs break-words">{text}</p>
+      </TooltipContent>
+    </Tooltip>
+  );
+};
+
+interface Badge {
+  text: string;
+  color: "red" | "yellow" | "green";
+}
+
+type NonSmartReceiverLike = {
+  name?: string;
+  value?: string;
+  isCc?: boolean;
+  isCC?: boolean;
+};
+
+const normalizeNonSmartName = (item: NonSmartReceiverLike | string) => {
+  if (typeof item === "string") return item;
+  return item?.name || item?.value || "";
+};
+
+const getNonSmartOfficeReceivers = (rowData: RecordDto): string[] => {
+  const contents = rowData.content || [];
+
+  const directNonSmartOffice = contents.flatMap((contentItem) => {
+    const list = contentItem?.nonSmartOfficeReceivers || [];
+    return list
+      .map((item) =>
+        normalizeNonSmartName(item as NonSmartReceiverLike | string),
+      )
+      .filter(Boolean);
+  });
+
+  const legacyNonSmartTo = contents.flatMap((contentItem) => {
+    const legacy =
+      (contentItem?.nonSmartReceivers as NonSmartReceiverLike[] | undefined) ||
+      [];
+    return legacy
+      .filter((item) => !Boolean(item?.isCc ?? item?.isCC))
+      .map((item) => normalizeNonSmartName(item))
+      .filter(Boolean);
+  });
+
+  const receivingUnitsNonSmart = (rowData.receivingUnits || [])
+    .map((unit) => unit?.nonSmartOfficeReceivers || "")
+    .filter(Boolean);
+
+  return Array.from(
+    new Set([
+      ...directNonSmartOffice,
+      ...legacyNonSmartTo,
+      ...receivingUnitsNonSmart,
+    ]),
+  );
+};
+
+const getSpecialBadges = (tags: RecordTags): Badge[] => {
+  const badges: Badge[] = [];
+
+  if (tags.isSecured) {
+    badges.push({ text: t("userIncoming.isSecured"), color: "red" });
+  }
+
+  if (tags.isUrgent) {
+    badges.push({ text: t("userIncoming.isUrgent"), color: "yellow" });
+  }
+
+  if (tags.isReply) {
+    badges.push({ text: t("userIncoming.replyRecord"), color: "green" });
+  }
+
+  return badges;
+};
+
+export const UserRecordsColumns = (
+  refetch: () => void,
+  localizedName: (name?: { am?: string; en?: string }) => string,
+  isSecretary: boolean,
+  isSelf: boolean,
+  waitForAllCollaboratorsBeforeAction: boolean,
+  pageNo: number,
+  options?: UserRecordsColumnOptions,
+  openDropdownId?: string | null,
+  onDropdownChange?: (id: string | null) => void,
+): ColumnDef<RecordDto>[] => {
+  return [
+    {
+      id: "letterName",
+      header: () => t("viewDetail.fileName"),
+      accessorKey: "letterName",
+      cell: ({ row }) => {
+        const rowData = row.original;
+        const letterName = rowData.letterName || "_";
+        return (
+          <div className="flex gap-1">
+            <span>{letterName}</span>
+          </div>
+        );
+      },
+
+      enableHiding: true,
+    },
+    {
+      id: "referenceNumber",
+      header: () => t("viewDetail.referenceNumber"),
+      accessorKey: "referenceNumber",
+      cell: ({ row }) => {
+        const rowData = row.original;
+        const referenceNo =
+          rowData.referenceNumber || t("msg.noReferenceNumber");
+
+        return (
+          <OverflowTooltip text={referenceNo} maxWidth={150}>
+            {referenceNo}
+          </OverflowTooltip>
+        );
+      },
+      enableHiding: true,
+    },
+    {
+      id: "Subject",
+      header: () => t("userRecord.Subject"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        const subject = rowData.content?.[0]?.subject || "-";
+
+        return (
+          <OverflowTooltip text={subject} maxWidth={200}>
+            <div className="overflow-hidden text-ellipsis whitespace-nowrap">
+              {subject}
+            </div>
+          </OverflowTooltip>
+        );
+      },
+      enableHiding: true,
+    },
+    {
+      id: "receiverInfo",
+      header: () => t("userRecord.Receiver Info"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        const recordTypeKey = rowData.recordTypeKey;
+        const isInternal =
+          recordTypeKey === "internal" ||
+          recordTypeKey === "internal_memo" ||
+          recordTypeKey === "direct";
+        const isExternal = recordTypeKey === "external";
+
+        // INTERNAL: receiver positions
+        const receiverPositions =
+          rowData.content?.flatMap(
+            (item) =>
+              item.receiverPositions?.map((rp) =>
+                localizedName(rp.position?.name),
+              ) || [],
+          ) || [];
+        // INTERNAL: receiver employees
+        const receiverEmployees =
+          rowData.content?.flatMap(
+            (item) =>
+              item.receiverEmployees?.map((re) => {
+                return localizedName(re.employeePosition?.employee?.name);
+              }) || [],
+          ) || [];
+        const internalReceivers = [
+          ...receiverPositions,
+          ...receiverEmployees,
+        ].filter(Boolean);
+
+        // EXTERNAL: receiving units
+        const receivingUnits =
+          rowData.receivingUnits?.map((unitItem) =>
+            localizedName(unitItem.unit?.name),
+          ) || [];
+
+        // NON-SMART OFFICES (supports both current and legacy payloads)
+        const nonSmartOffices = getNonSmartOfficeReceivers(rowData);
+
+        // EXTERNAL: combine receiving units + non-smart
+        const externalReceivers = [...receivingUnits].filter(Boolean);
+
+        // FINAL: receivers to show
+        const receiversToShow = [
+          ...(isInternal ? internalReceivers : []),
+          ...(isExternal ? externalReceivers : []),
+          ...nonSmartOffices, // always included
+        ].filter(Boolean);
+
+        return receiversToShow.length > 0 ? (
+          <div className="space-y-1">
+            {receiversToShow.map((receiver, i) => (
+              <div key={i}>{receiver}</div>
+            ))}
+          </div>
+        ) : (
+          <div className="text-gray-500">{t("userRecord.No receivers")}</div>
+        );
+      },
+      enableHiding: true,
+    },
+    {
+      id: "Date",
+      header: () => t("userRecord.Date"),
+      cell: ({ row }) => {
+        const record = row.original;
+
+        // Check current language
+        const isAmharic = i18n.language === "am";
+
+        // Use the Amharic date if language is Amharic and date is available
+        if (isAmharic && record.amharicCreatedAt) {
+          return <div>{record.amharicCreatedAt}</div>;
+        }
+
+        // Otherwise, use the default formatted English date
+        const safeLocale = ["am", "en"].includes(i18n.language)
+          ? i18n.language
+          : "en"; // fallback to English if invalid
+
+        const createdDate = record.createdAt
+          ? new Date(record.updatedAt).toLocaleDateString(safeLocale, {
+              year: "numeric",
+              month: "short",
+              day: "numeric",
+              hour: "numeric",
+              minute: "numeric",
+            })
+          : "-";
+
+        return <div>{createdDate}</div>;
+      },
+    },
+
+    {
+      id: "Status",
+      header: () => t("userRecord.Status"),
+      cell: ({ row }) => {
+        const status = row.original.statusKey;
+        const isReply = row.original.inReplyToIncomingInstanceId;
+        const isSecured = row.original.isSecured;
+        const isUrgent = row.original.isUrgent;
+        const isOnReview = row.original.outgoingInstances?.some(
+          (i) => i.onReview === true,
+        );
+        const badges = getSpecialBadges({
+          isReply,
+          isSecured,
+          isUrgent,
+        });
+
+        return (
+          <div className="flex flex-col gap-2">
+            <span>
+              {renderStatus(status, isOnReview ? "onReview" : status)}
+            </span>
+
+            {badges.length > 0 && (
+              <div className="flex flex-wrap gap-1.5">
+                {badges.map((badge) => (
+                  <span
+                    key={`${badge.color}-${badge.text}`}
+                    className={`
+        inline-flex items-center
+        px-2 py-0.5
+        text-[10px] font-medium
+        rounded-md border
+        whitespace-nowrap
+        ${
+          badge.color === "red"
+            ? "text-red-700 bg-red-50 border-red-200"
+            : badge.color === "yellow"
+              ? "text-yellow-700 bg-yellow-50 border-yellow-200"
+              : "text-green-700 bg-green-50 border-green-200"
+        }
+      `}
+                  >
+                    {badge.text}
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+        );
+      },
+      enableHiding: true,
+    },
+    {
+      id: "Actions",
+      header: () => t("userRecord.Actions"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        const dropdownId = rowData.id || "";
+        return (
+          <UserRecordsActions
+            rowData={rowData as unknown as RecordDto}
+            refetchTable={refetch}
+            isSecretary={isSecretary}
+            isSelf={isSelf}
+            pageIndex={pageNo}
+            fromTable={true}
+            waitForAllCollaboratorsBeforeAction={
+              waitForAllCollaboratorsBeforeAction
+            }
+            onApproveClick={options?.onApproveClick}
+            isDropdownOpen={openDropdownId === dropdownId}
+            onDropdownOpenChange={(open) => {
+              onDropdownChange?.(open ? dropdownId : null);
+            }}
+            dropdownId={dropdownId}
+          />
+        );
+      },
+    },
+  ];
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/userRecordsDetails.ts b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/userRecordsDetails.ts
new file mode 100644
index 000000000..7acce5ea5
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/userRecordsDetails.ts
@@ -0,0 +1,21 @@
+export const userRecordsFields: string[] = [
+  "Subject",
+  "Receiving_Depts",
+  "Receiver",
+  "Created",
+  "Status",
+  "Id",
+  "Last_Subtask_Id",
+  "Record_Type",
+  "ServerRelativeUrl",
+  "Organization_Name",
+  "Internal_CC",
+  "Receiving_UsersDetail",
+  "CC_Organization_Name",
+  "Organization_Name_CC",
+  "Title",
+  "Recipient_Organization_Name",
+  "Author/Title",
+];
+
+export const userRecordsExpandField: string[] = ["Author"];
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/userRecordsFilters.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/userRecordsFilters.tsx
new file mode 100644
index 000000000..c65b5fe4d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/userRecordsFilters.tsx
@@ -0,0 +1,77 @@
+import {
+  ArrowDown,
+  ArrowRight,
+  ArrowUp,
+  Bug,
+  CheckCircle2,
+  Circle,
+  HelpCircle,
+  PackagePlus,
+  ScrollText,
+  Timer,
+  XCircle,
+} from "lucide-react";
+
+export const status_options = [
+  {
+    value: "backlog",
+    label: "Backlog",
+    icon: HelpCircle,
+  },
+  {
+    value: "todo",
+    label: "Todo",
+    icon: Circle,
+  },
+  {
+    value: "in-progress",
+    label: "In Progress",
+    icon: Timer,
+  },
+  {
+    value: "done",
+    label: "Done",
+    icon: CheckCircle2,
+  },
+  {
+    value: "canceled",
+    label: "Canceled",
+    icon: XCircle,
+  },
+];
+
+export const label_options = [
+  {
+    value: "bug",
+    label: "Bug",
+    icon: Bug,
+  },
+  {
+    value: "feature",
+    label: "Feature",
+    icon: PackagePlus,
+  },
+  {
+    value: "documentation",
+    label: "Documentation",
+    icon: ScrollText,
+  },
+];
+
+export const priority_options = [
+  {
+    value: "low",
+    label: "Low",
+    icon: ArrowDown,
+  },
+  {
+    value: "medium",
+    label: "Medium",
+    icon: ArrowRight,
+  },
+  {
+    value: "high",
+    label: "High",
+    icon: ArrowUp,
+  },
+];
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/userRecordsLayout.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/userRecordsLayout.tsx
new file mode 100644
index 000000000..13bcf4b4f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/userRecordsLayout.tsx
@@ -0,0 +1,11 @@
+import { Label } from "@/shared/common/ui/label";
+import { Outlet } from "react-router-dom";
+
+const UserRecordsLayout = () => (
+  <>
+    <Label className="mb-4  text-xl"></Label>
+    <Outlet />
+  </>
+);
+
+export default UserRecordsLayout;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/viewLetterPage.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/viewLetterPage.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/viewRecord.tsx b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/viewRecord.tsx
new file mode 100644
index 000000000..647a42755
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/components/userRecords/viewRecord.tsx
@@ -0,0 +1,25 @@
+import { useSearchParams } from "react-router-dom";
+import LetterViewer from "../common/letterViewer";
+import { useLocation } from "react-router-dom";
+const ViewOutgoingRecord = () => {
+  const [searchParams] = useSearchParams();
+  const location = useLocation();
+  const view = searchParams.get("view") || "";
+  const page = searchParams.get("page") || ""; // default to 'self'
+  const { backurl: back, type } = location.state || {};
+  let backurl =
+    view === "parent"
+      ? `/record-management/userRecords/?page=${page}&view=parent`
+      : `/record-management/userRecords?page=${page}`;
+  backurl = back || backurl;
+  return (
+    <LetterViewer
+      backurl={backurl}
+      type={type || "userRecord"}
+      shouldFetchInstance={false}
+      actions="UserRecordsActions"
+    />
+  );
+};
+
+export default ViewOutgoingRecord;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/constants/recordStatusOptions.ts b/apps/edr-freight-web/backoffice/src/record-management/constants/recordStatusOptions.ts
new file mode 100644
index 000000000..a357f8bc9
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/constants/recordStatusOptions.ts
@@ -0,0 +1,8 @@
+// constants/statusOptions.ts
+export const recordStatusOptions = [
+  { value: "", label: "All" },
+  { value: "draft", label: "In Progress" },
+  { value: "accepted", label: "Accepted" },
+  { value: "re_assigned", label: "Reassigned" },
+  { value: "rejected", label: "Rejected" },
+];
diff --git a/apps/edr-freight-web/backoffice/src/record-management/data/amhraic.ts b/apps/edr-freight-web/backoffice/src/record-management/data/amhraic.ts
new file mode 100644
index 000000000..8470800f3
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/data/amhraic.ts
@@ -0,0 +1,460 @@
+import { LocalizationDto } from "@/record-management/types/translation";
+
+export const AMHARIC: LocalizationDto = {
+  menu: "ማውጫ",
+  language: "ቋንቋ",
+  english: "እንግሊዘኛ",
+  amharic: "አማርኛ",
+  createdAt: "የተፈጠረው በ",
+  dateFormat: "ቀን/ወር/አመት",
+  date: "ቀን",
+  filterWithStatus: "Filter using status",
+  // Record Management
+  responsibleDepartment: "ሀላፊ ዲፓርትመንት",
+  incoming: "ገቢ",
+  incomingStatus: "ገቢ ሁኔታ",
+  outgoing_external: "ውጫዊ",
+  outgoing: "ወጪ",
+  outgoingStatus: "ወጪ ሁኔታ",
+  assignPerson: "ስው መድብ",
+  bestRegards: "ከሰላምታ ጋር",
+  approvalStatus: "ማጽደቅ ሁኔታ",
+  addRecord: "አዲስ መዝግብ",
+  id: "መታወቂያ",
+  status: "ሁኔታ",
+  recordName: "የመዝገብ ስም",
+  recordNameError: "የስም መዝገብ ስህተት",
+  remarkError: "አስተያየት ስህተት",
+  recipientOrg: "ተቀባይ ተቋም",
+  referenceNumber: "የማጣቀሻ ቁጥር",
+  dateOfDispatch: "የተላከበት ቀን",
+  deleteSignature: "ፊርማ ሰርዝ",
+  changeSignature: "ፊርማ ቀይር",
+  deleteSignatureConfirmation: "ፊርማ ለማጥፋት እርግተኛ ኖት ?",
+  deleteTeeterConfirmation: "ቲተር ለማጥፋት እርግተኛ ኖት ?",
+  changeTeeter: "ቲተር ቀይር",
+  deleteTeeter: "ቲተር አጥፋ",
+  deliveryPersonnel: "ያደረሰው ሰራተኛ",
+  receivingPersonnel: "የተቀበለው ስራተኛ",
+  subject: "ርዕሰ ጉዳይ",
+  alert_message_display: "እባክዎ ሁሉንም አስፈላጊ መረጃዎች ያስገቡ",
+  actions: "ድርጊቶች",
+  uploadRecord: "ወጪ መዝገብ አስገባ",
+  uploadIncomingRecord: "ገቢ መዝገብ አስገባ",
+  cancel: "ሰርዝ",
+  submit: "አስገባ",
+  edit: "አስተካክል",
+  editRecord: "ወጪ አስተካክል",
+  editIncomingRecord: "ገቢ አስተካክል",
+  viewRecord: "ወጪ መዝገብ ተመልከት",
+  viewIncomingRecord: "ገቢ መዝገብ ተመልከት",
+  remarks: "አስተያየቶች",
+  internal: "ውስጣዊ",
+  internalMemo: "ውስጣዊ ሜሞ",
+  detail: "ዝርዝር",
+  addRemark: "ይዘት ጨምር",
+  title: "ርዕስ",
+  listRemarks: "ዝርዝር አስተያየቶች",
+  page: "ገጽ",
+  approvalInformation: "ማጽደቅ መረጃ",
+  prev: "የቀድሞ",
+  next: "ቀጥሎ",
+  search: "ፍለጋ",
+  print: "ማተም",
+  incomingRecordDate: "የገቢ መዝገብ የገባበት የቀን",
+  senderOrg: "የላኪ ድርጅት ስም",
+  location: "በስራ መደብ",
+  fillRecordInfo: "የመዝገብ መረጃን ሙላ",
+  uploadSuccess: "ተሳክቷል",
+  updateSuccess: "ተሳክቷል",
+  recordCreatedSuccessfully: "መዝገቡ በተሳካ መልኩ ተከፍቷል",
+  recordWithRefCreatedSuccessfully: (assignedReferenceNumber: string) => {
+    return `${assignedReferenceNumber} መዝገብ በተሳካ መልኩ ተከፍቷል`;
+  },
+  passed: "ተላልፏል",
+  assignedSuccessfully: "መዝገቡ ተላልፏል",
+  assign: "መድብ",
+  assignedTo: "የተመደበው ለ",
+  buildingCreatedSuccessfully: "ሕንፃው በተሳካ ሁኔታ ተፈጥሯል",
+  buildingEditedSuccessfully: "ሕንፃው በተሳካ ሁኔታ ተስተካክሏል",
+  roomCreatedSuccessfully: "ክፍሉ በተሳካ ሁኔታ ተፈጥሯል",
+  roomEditedSuccessfully: "ክፍሉ በተሳካ ሁኔታ ተስተካክሏል",
+  shelfCreatedSuccessfully: "መደርደሪያው በተሳካ ሁኔታ ተፈጥሯል",
+  shelfEditedSuccessfully: "መደርደሪያው በተሳካ ሁኔታ ተስተካክሏል",
+  boxFileCreatedSuccessfully: "የሳጥን ፋይል በተሳካ ሁኔታ ተፈጥሯል",
+  boxFileEditedSuccessfully: "የሳጥን ፋይል በተሳካ ሁኔታ ተስተካክሏል",
+  fileCreatedSuccessfully: "ፋይሉ በተሳካ ሁኔታ ተፈጥሯል",
+  fileEditedSuccessfully: "ፋይሉ በተሳካ ሁኔታ ተስተካክሏል",
+  inputsError: "እባክዎ አስፈላጊዎቹን ቅጾች ይሙሉ",
+  haveAccessToFile: "ፋይሉ አለዎት?",
+  remarkAddSuccess: "ይዘት በተሳካ ሁኔታ ታክሏል። ",
+  inputFileName: "የፋይል ስም",
+  refNumberError: "የማጣቀሻ ቁጥር አልተሞላም",
+  subjectError: "ርዕሰ ጉዳይ አልተሞላም",
+  contentError: "ይዘት አልተሞላም",
+  sendingOrgNameError: "የላኪ ድርጅት ስም አልተሞላም",
+  incomingDateError: "መዝገብ የገባበት የቀን አልተሞላም",
+  incomingDateValidationError: "ያለፈ ወይም ያሁን ጊዜ ብቻ ያስገቡ",
+  recipientOrgNameError: "የተቀባይ ድርጅት ስም አልተሞላም",
+  dispatchDateError: "መዝገብ የተላከበት ቀን አልተሞላም",
+  fileError: "ፋይል አልተሞላም",
+  noRemarks: "ምንም ይዘት የለም",
+  attachments: "አባሪዎች",
+  add: "ጨምር",
+  update: "አስተካክል",
+  attachSeal: "ማህተም ያያይዙ",
+  fileMovementSlip: "የፋይል እንቅስቃሴ",
+  attach: "አያይዝ",
+  delete: "አጥፋ",
+  deleteRecord: "መዝገብ አጥፋ",
+  deleteRecordConfirmationQuestion: (recordName: string) =>
+    `${recordName} ለመሰረዝ እርግተኛ ነህ/ነሽ?`,
+  remark: "አስገባ",
+  letterNumber: "የደብዳቤ ቁጥር",
+  goToRecord: "ወደ ቀረጻ ይሂዱ",
+  noAttachementsFound: "ምንም ዓባሪዎች አልተገኙም",
+  selectFileRequestOptions: "የፋይል ጥያቄ አማራጮችን ይምረጡ",
+  selectFileReturnStatusError: "የፋይል መመለሻ ሁኔታን መምረጥ አለብህ",
+  convert: "ቀይር",
+  convertConfirm: "ይህን መዝገብ መቀየር እንደምትፈልግ እርግጠኛ ነህ?",
+  download: "አውርድ",
+  sentSuccessfully: "በተሳካ ሁኔታ ተልኳል",
+  seal: "ማሀተም",
+  sealError: "ማኅተም ባዶ ሊሆን አይችልም",
+  department: "ዲፓርትመንት",
+  ccOrganization: "ተቀባይ ድርጅት (ግልባጭ)",
+  ccDepartment: "ተቀባይ ዲፓርትመንት (ግልባጭ)",
+  recipientDepartment: "ተቀባይ ዲፓርትመንት",
+  open: "ክፈት",
+  selectFileLocation: "የፋይል ቦታን ይምረጡ",
+  fileLocation: "የፋይል ቦታ",
+  select: "ምረጥ",
+  filterRecords: "መዝገቦች ማጣሪያ",
+  send: "ላክ",
+  upload: "ስቀል",
+  link: "አገናኝ",
+  linkCopiedToClipboard: "ማገናኛ ወደ ቅንጥብ ሰሌዳ ተቀድቷል",
+  copy: "ቅዳ",
+  copied: "ተገልብጧል",
+  flows: "ፍሰቶች",
+  attachements: "አባሪዎች",
+  recordDetails: "የመዝግቡ ዝርዝሮች",
+  sendingDepartment: "ላክ ዲፓርትመንት",
+  accept: "ተቀበል",
+  sentDate: "የተላከበት ቀን",
+  assignedBy: "የተመደበው በ",
+  teeter: "ቲተር",
+  external: "ውጫዊ",
+  accepted: "ተቀባይነት አግኝቷል",
+  acceptedStatus: "ተቀባይነት ያገኘ",
+  Accepted: "መዝገቡ በተሳካ ሁኔታ ተቀባይነት አግኝቷል",
+  reassigned: "በተሳካ ሁኔታ እንደገና ተመድቧል",
+  numberOfFiles: "የፋይሎች ብዛት",
+  totalOutgoing: "ጠቅላላ ወጪ",
+  totalInternal: "አጠቃላይ የውስጥ",
+  receivingOrgError: "ቢያንስ አንድ ተቀባይ ድርጅት ያስፈልጋል",
+  totalApproval: "ጠቅላላ ማጽደቅ",
+  totalIncomingVsOutgoingExternal: "ጠቅላላ ገቢ Vs ወጪ(ውጫዊ)",
+  totalInternalVsApproval: "ጠቅላላ የውስጥ Vs ማጽደቅ",
+  totalExternalIncoming: "ጠቅላላ የውጭ ገቢ",
+  totalOutgoingRecords: "ጠቅላላ የወጪ መዝገቦች",
+  monthlyOutgoingRecords: "ወርሃዊ ወጪ መዝገቦች",
+  totalIncomingRecords: "ጠቅላላ ገቢ መዝገቦች",
+  monthlyIncomingRecords: "ወርሃዊ ገቢ መዝገቦች",
+  totalIncomingVsOutgoing: "ጠቅላላ ገቢ Vs ወጪ",
+  monthlyIncomingVsOutgoing: "ወርሃዊ ገቢ Vs ወጪ",
+  weeklyIncomingVsOutgoing: "ሳምንታዊ ገቢ Vs ወጪ",
+  dailyIncomingVsOutgoing: "ዕለታዊ ገቢ Vs ወጪ",
+  externalIncoming: "ውጫዊ ገቢ",
+  internalIncoming: "የውስጥ ገቢ",
+  totalCC: "ጠቅላላ ግልባጭ",
+  approval: "ማጽደቅ",
+  contentConvertedSuccessfully: "ይዘቱ በተሳካ ሁኔታ ተቀይሮ ተቀድቷል",
+  acceptedTheRecord: "መዝገቡን ተቀብሏል",
+  returnedTheRecord: "መዝገቡን መልሷል",
+  approvedTheRecord: "መዝገቡን ጸድቋል",
+  rejectedTheRecord: "መዝገቡን ተከልኳል",
+  fileDetails: "የፋይል ዝርዝሮች",
+  recDashboard: "መዝገብ ዳሽቦርድ",
+  userDashboard: "የተጠቃሚ ዳሽቦርድ",
+  dashboard: "ዳሽቦርድ",
+  folders: "ማህደሮች",
+  userOutgoing: "የተጠቃሚ ወጪ",
+  userIncoming: "ተጠቃሚ ገቢ",
+  userOutgoingTab: "የፀሀፊ ወጪ",
+  all: "ሁሉም",
+  delegate: "ወክል",
+  delegation: "ወክልና",
+  recordFile: "መዝገብ ፋይል",
+  recordFileError: "መዝገብ ፋይል (ፒዲኤፍ) መምረጥ ያስፈልጋል",
+  updateDelegate: "ወክልና አስተካክል",
+  removeDelegate: "ወክልና ሰርዝ",
+  delegator: "ወካይ",
+  delegatedTo: "ተወካይ",
+  startDate: "መነሻ ቀን",
+  startDateError:
+    "You can't start delegating from the past, change you start date please",
+  endDate: "መድረሻ ቀን",
+  endDateError:
+    "EndDate must greater than the StartDate, Please correct that first!",
+  reason: "ምክንያት",
+  selectLocation: "ቦታ ምረጥ",
+  buildingName: " ህንጻ ስም",
+  buildingCode: "ህንጻ ቁጥር",
+  addBuilding: "ህንጻ ጨምር",
+  Cancel: "ሰርዝ",
+  selectBuilding: "ህንጻ ምረጥ",
+  roomName: "ክፍል ስም",
+  roomCode: "ክፍል ቁጥር",
+  addRoom: "ክፍል ጨምር",
+  selectRoom: "ክፍል ምረጥ",
+  shelfName: "መደርደሪያ ስም",
+  shelfCode: "መደርደሪያ ቁጥር",
+  addShelf: "መደርደሪያ ጨምር",
+  selectShelf: "መደርደሪያ ምረጥ",
+  boxFileName: "የፋይልሳጥን ስም",
+  boxFileCode: "የፋይልሳጥን ቁጥር",
+  addBoxFile: "የፋይልሳጥን ጨምር",
+  selectBoxFile: "የፋይልሳጥን ምረጥ",
+  BoxFile: "የፋይል ሳጥን",
+  fileName: "የፋይል ስም",
+  fileCode: "የፋይል ቁጥር",
+  addFile: "ፋይል ጨምር",
+  Building_Code: "ህንጻ ቁጥር",
+  Building_Name: " ህንጻ ስም",
+  EditBuilding: "ህንጻ አሥተካክል",
+  EditRoom: "ክፍል አሥተካክል",
+  EditShelf: " መደርደሪያ አሥተካክል",
+  EditBoxFile: "የፋይልሳጥን አሥተካክል",
+  EditFile: " ፋይል አሥተካክል",
+  File: " ፋይል ",
+  AddLocation: "አካባቢ ጨምር",
+  ViewLocation: "አካባቢ ተመልከት",
+  buildings: "ሕንፃዎች",
+  rooms: "ክፍሎች",
+  room: "ክፍል",
+  shelfs: "መደርደሪያዎች",
+  boxFiles: "ሳጥን ፋይሎች",
+  deleteBuildingConfirmationQuestion: (buildingName: string) =>
+    `${buildingName} ለመሰረዝ እርግተኛ ነህ/ነሽ?`,
+  deleteRoomConfirmationQuestion: (roomName: string) =>
+    `${roomName} ለመሰረዝ እርግተኛ ነህ/ነሽ?`,
+  deleteShelfConfirmationQuestion: (shelfName: string) =>
+    `${shelfName} ለመሰረዝ እርግተኛ ነህ/ነሽ?`,
+  deleteBoxFileConfirmationQuestion: (boxFileName: string) =>
+    `${boxFileName} ለመሰረዝ እርግተኛ ነህ/ነሽ?`,
+  deleteFileConfirmationQuestion: (fileName: string) =>
+    `${fileName} ለመሰረዝ እርግተኛ ነህ/ነሽ?`,
+  file: "ፋይሎች",
+  files: "ፋይሎች",
+  AddFileRequest: "ፋይል ጠይቅ",
+  View: "ይመልከቱ",
+  ViewFileRequest: "የፋይል ጥያቄን ይመልከቱ",
+  ViewAllRequests: "ሁሉንም የፋይል ጥያቄዎች ይመልከቱ",
+  successful: "ተሳክቷል",
+  errorMessage: "አልተሳካም",
+  error: "ስህተት",
+  BorrowedDate: "የተበድሩበት ቀን",
+  borrow: "መበደር",
+  return: "መመለስ",
+  Borrowed: "ተበድራል",
+  Status: "ሁኔታ",
+  RequestStatus: "የጥያቄ ሁኔታ",
+  FileStatus: "የፋይል ሁኔታ",
+  modal: "ሞዳል",
+  SentFileRequest: "የፋይል ጥያቄን ይመልከቱት",
+  PendingRequests: "በመጠባበቅ ላይ ያሉ ጥያቄዎች",
+  BorrowFile: "ፋይል ተበደሩ",
+  Filecode: "የፋይል ኮድ",
+  signature: "ፊርማ",
+  fileRequestInformation: "የፋይል ጥያቄ መረጃ",
+  BorrowerName: "የተበዳሪው ስም",
+  BorowedDate: " የተበደረበት ቀን",
+  RequesterName: "የጠያቂ ስም",
+  RequestedDate: "የተጠየቀበት ቀን",
+  selectfile: "ፋይል ምረጥ",
+  Select: "ምረጥ",
+  addNew: "አዲስ አስገባ",
+  create: "ፍጠር",
+  selectfileerror: "ፋይል አልተሞላም",
+  filecodeerror: " የፋይል ኮድ አልተሞላም",
+  borrowernameerror: " የተበዳሪው ስም አልተሞላም",
+  borroweddateerror: "የተበደረበት ቀን አልተሞላም",
+  requesternameerror: " የጠያቂ ስም አልተሞላም",
+  requesteddateerror: "የተጠየቀበት ቀን አልተሞላም",
+  returnDate: "የመመለሻ ቀን",
+  requestReason: "የጠየቁበት ምክንያት",
+  firstName: "የመጀመሪያ ስም",
+  middleName: "የአባት ስም",
+  LastName: "የአያት ስም",
+  Subcity: "ክፍለ ከተማ",
+  Woreda: "ወረዳ",
+  Email: "ኢሜል",
+  HouseNumber: "የቤት ቁጥር",
+  PhoneNumber: "ስልክ ቁጥር",
+  NumberOfDaysRequested: "የተጠየቁ ቀናት ብዛት",
+  FileRequestNumber: "የፋይል ጥያቄ ቁጥር",
+  isHardCopy: "ሃርድ ኮፒ ነው",
+  fileNotFound: "ሰነዱ አልተገኘም",
+  Returned: "ተመልሷል",
+  editRequest: "አርትዕ",
+  FileFouned: "ፋይል ተገኝቷል",
+  Reassigned: "የተላክ",
+  Reassign: "እንደገና መመደብ",
+  ApproveOrRejectTheRequest: "ጥያቄውን ያጽድቁ ወይም ውድቅ ያድርጉ",
+  save: "መዝግብ",
+  approved: "ጸድቋል",
+  approvedDate: "የጸደቀበት ቀን",
+  returnedDate: "የተመለሰበት ቀን",
+  ReturnDays: "የተጠየቀበት ቀን",
+  isfileborrowed: "ፋይሉ ተበድራል?",
+  ReturnStatus: "የተመለሰበት ሁኔታ ",
+  ReturnFile: "ፋይል መልስ ",
+  Reject: "አለመቀበል",
+  Approve: "መቀበል",
+  Selectafile: "ፋይል ምረጥ",
+  ApproveRequest: " ጥያቄንተቀበል",
+  Approver: "አጽዳቂ",
+  ApprovalStatus: "የማጽደቅ ሁኔታ",
+  close: "ዝጋ",
+  sureapprove: " ጥያቄዉን ለመቀበል እርግጠኛ ነህ?",
+  surereject: "ጥያቄዉን ላለመቀበል እርግጠኛ ነህ?",
+  surecancel: "ጥያቄዉን ለመሰረዝ እርግጠኛ ነህ?",
+  RejectRequest: "ጥያቄን አትቀበል",
+  CancelRequest: "ጥያቄን ሰርዝ",
+  buildingNameError: "የህንጻ ስም ያስፈልጋል",
+  buildingCodeError: "የህንጻ ቁጥር ያስፈልጋል",
+  roomNameError: "የክፍል ስም ያስፈልጋል",
+  roomCodeError: "የክፍል ኮድ ያስፈልጋል",
+  shelfNameError: "የመደርደሪያ ስም ያስፈልጋል",
+  shelfCodeError: "የመደርደሪያ ኮድ ያስፈልጋል",
+  selectedRoomError: "ክፍል ያስፈልጋል",
+  selectedBoxFileError: "ሳጥን ፋይል ያስፈልጋል",
+  selectedFile: "የተመረጠ ፋይል",
+  selectedShelfError: "መደርደሪያ ያስፈልጋል",
+  roomOrShelfError: "ክፍል/መደርደሪያ ያስፈልጋል",
+  boxFileNameError: "የሳጥን ፋይል ስም ያስፈልጋል",
+  boxFileCodeError: "የሳጥን ፋይል ኮድ ያስፈልጋል",
+  fileNameError: "የፋይል ስም ያስፈልጋል",
+  fileCodeError: "የፋይል ኮድ ያስፈልጋል",
+  RoomAddedSuccessful: "ክፍል በተሳካ ሁኔታ ተምዝግቡዋል",
+  BoxFileAddedSuccessful: "ሳጥን በተሳካ ሁኔታ ተምዝግቡዋል",
+  ShelfAddedSuccessful: "ሼልፍ በተሳካ ሁኔታ ተምዝግቡዋል",
+  FileAddedSuccessful: "ፋይል በተሳካ ሁኔታ ተምዝግቡዋል",
+  BuildingAddedSuccessful: "ህንጻ በተሳካ ሁኔታ ተምዝግቡዋል",
+  BoxFileFileValidationError: "ሳጥን ያስፈልጋል",
+  openSelectMenu: "ይምረጡ",
+  locations: "ቦታዎች",
+  noData: "ምንም መረጃ የለም",
+  building: "ህንጻ",
+  Shelf: "መደርደሪያ",
+  OK: "እሺ",
+  Changefile: "ፋይል አስተካክል",
+  numberOfDays: "የተጠየዉ ቀን ብዛት",
+  Yes: "አዎ",
+  created: "",
+  CustomerInformation: "",
+  MiddleName: "",
+  Rejected: "",
+  stnWentWrong: "",
+  viewRequest: "",
+  No: "አይ",
+  deleteError: "ስህተት",
+  deleteMessage: "ውሂቡ ግንኙነቶች ስላሉት መሰረዝ አይችሉም።",
+  deleteSuccess: "በተሳካ ሁኔታ ተሰርዟል።",
+  areuSure: "ውሂቡ ለመስረዝ እርግጠኛ ነህ?",
+  // approved: "ተቀበል",
+  Approved: "መዝገብ በተሳካ ሁኔታ ጸድቋል",
+  rejected: "ተቀባይነት አላገኘም",
+  pending: "በመጠባበቅ ላይ",
+  inProgress: "በሂደት ላይ",
+  rejectedStatus: "ውድቅ የተደረገ",
+  canceled: "ተሰርዟል",
+  createRecord: "ደብዳቤ አርቅቅ",
+  fileInformation: "የፋይል መረጃ",
+  FileDescription: "የፋይል መግለጫ",
+  onBehalfOf: "በማን ፋንታ",
+  fileDescription: "የፋይል መግለጫ",
+  fileDescriptionError: "የፋይል መግለጫ ያስፈልጋል",
+  hardOrSoftCopyQuestion: "ሃርድ ኮፒ ወይም ሶፍት ኮፒ ይፈልጋሉ?",
+  isRequestHardCopyRequest: "የሃርድ ቅጂ ጥያቄ ነው?",
+  hardOrSoftCopyQuestionError: "ሃርድ ኮፒ ወይም ሶፍት ኮፒ ምርጫ ያስፈልጋል",
+  hardCopy: "ሃርድ ኮፒ",
+  softCopy: "ሶፍት ኮፒ",
+  requestNumberConfirmationMessage: (fileRequestIdentifier: string) => {
+    return `የጥያቄህ ቁጥር ${fileRequestIdentifier} ነው።`;
+  },
+  fileBorrowedWithReturnDate: (day: number) => {
+    return `ፋይሉ ተበድሯል እና ${day} ከቀናት በኋላ ይገኛል`;
+  },
+  approverError: "አጽዳቂ ያስፈልጋል",
+  searchFile: "ፋይል ፈልግ",
+
+  // Create Record
+  recordType: "የመዝገብ አይነት",
+  letterTemplate: "የደብዳቤ አብነት",
+  content: "ይዘት",
+  receivingOrg: "ተቀባይ ድርጅት",
+  nonSmoreceivingOrg: "የኢትዮ ጅቡቲ ስማርት ኦፊስ ቢሮ ያልሆነ የቢሮ መቀበያ ድርጅት",
+  nonSmoreceivingCCOrg: "የኢትዮ ጅቡቲ ስማርት ኦፊስ ቢሮ ያልሆነ ተቅባይ (ግልባጭ) ድርጅት",
+  receivingDept: "ተቀባይ ክፍል",
+  receivingUser: "ተቀባይ ግለሰብ",
+  receivingDeptError: "ተቀባይ ክፍል ያስፈልጋል",
+  receivingDeptOrUserError: "ተቀባይ ክፍል/ግለሰብ ያስፈልጋል",
+  to: "ለ",
+  from: "ከ",
+  ccTo: "ተቅባይ (ግልባጭ) ለ",
+  internalCcTo: "የውስጥ ተቅባይ (ግልባጭ) ለ",
+  externalCcTo: "ውጫዊ  ተቅባይ (ግልባጭ) ለ",
+  externalCc: "ውጫዊ  ተቅባይ (ግልባጭ)",
+  recordCreatedSuccessful: "መዝገብ በተሳካ ሁኔታ ተመዝግቧል",
+  okText: "እሺ",
+  sent: "ተልኳል",
+  view: "ደብዳቤ ተመልከት",
+  draft: "ረቂቅ",
+  forwarded: "ወደፊት",
+  returnConfirm: "ይህን መዝገብ ወደፊት ማስተላለፍ እንደምትፈልግ/እንደምትፈልጊ እርግጠኛ ነህ/ሽ?",
+  assignConfirm: "ይህን መዝገብ መመደብ እንደምትፈልግ/እንደምትፈልጊ እርግጠኛ ነህ/ሽ?",
+  forwardConfirm: "ይህን መዝገብ መመለስ እንደምትፈልግ/እንደምትፈልጊ እርግጠኛ ነህ/ሽ?",
+  deleteConfirm: "ይህን መዝገብ ማጥፋት እንደምትፈልግ/እንደምትፈልጊ እርግጠኛ ነህ/ሽ?",
+  cc: "ግልባጭ",
+  header: "ራስጌ",
+  footer: "ግርጌ",
+  personal_remark: "የግል አስተያየት",
+  reassign_remark: "አስተያየት",
+  general_remark: "አስተያየት",
+  forward_to: "ማስተላለፍ",
+  forward_toError: "ማስተላለፍ ያስፈልጋል",
+  AttachementCreatedSuccessful: "አባሪ በተሳካ ሁኔታ ተመዝግቧል",
+  recordDraftedSuccessful: "መዝገቡ በተሳካ ሁኔታ ተዘጋጅቷል",
+  recordForwardedSuccessful: "መዝገቡ በተሳካ ሁኔታ ተላልፏል",
+  recordCouldnotBeForwarded: "መዝገቡ መተላለፍ አልቻለም",
+  skip: "ዝለል",
+  approve: "አጽድቅ",
+  deleteAttachementConfirmation: (attachementTitle: string) => {
+    return `እርግጠኛ ነህ ${attachementTitle} መሰረዝ ትፈልጋለህ?`;
+  },
+  fileAttachedSuccessful: "ፋይሉ በተሳካ ሁኔታ ተያይዟል",
+  recordApproved: "መዝገብ ጸድቋል",
+  Adjust: "አስተካክል",
+  adjusted: "መዝገብ በተሳካ ሁኔታ ለማስተካከል ተልኳል",
+  emptySignature: "እባክዎ ፊርማ ያክሉ",
+  emptyTeeter: "እባክዎ ቲተር ያክሉ",
+  adjustment: "ማስተካከል",
+  createdBy: "ላኪ",
+  adjust: "የተስተካከለ",
+  other: "ሌላ",
+  returnRemark: "የመስ አስተያየት",
+  skipUploadingAttachementQuestion: "አባሪ እንደማያይዙ እርግተኛ ኖት?",
+  Receive: "ተቀበል",
+  Confirm: "አረጋግጥ",
+  letterTemplateMissingError: "የደብዳቤ አብነት ይጎድላል ​​እባክዎን መዝገብ ለመፍጠር አንድ ያክሉ",
+  assignWithDepartment: "ከዲፓርትመንት ጋር መመደብ",
+  assignWithName: "በስም መድብ",
+  refrenceUrl: "የማጣቀሻ ዩ.አር.ኤል",
+  commonRemarks: "የተለመዱ ምላሾች",
+  prefix: "ቅድመ ቅጥያ",
+  suffix: "ድህረ ቅጥያ",
+  prefixCC: "ግልባጭ ቅድመ ቅጥያ",
+  suffixCC: "ግልባጭ ድህረ ቅጥያ",
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/data/english.ts b/apps/edr-freight-web/backoffice/src/record-management/data/english.ts
new file mode 100644
index 000000000..99a652e8d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/data/english.ts
@@ -0,0 +1,463 @@
+import { LocalizationDto } from "@/record-management/types/translation";
+
+export const ENGLISH: LocalizationDto = {
+  menu: "Menu",
+  language: "Language",
+  english: "English",
+  amharic: "Amharic",
+  dateFormat: "dd/mm/yyyy",
+  date: "Date",
+  filterWithStatus: "Filter using status",
+  createdAt: "Created At",
+  responsibleDepartment: "Responsible Department",
+  incoming: "Incoming",
+  incomingStatus: "Incoming Stats",
+  outgoing_external: "External",
+  bestRegards: "Best Regards",
+  outgoing: "Outgoing",
+  assignPerson: "Assign Person",
+  outgoingStatus: "Outgoing Stats",
+  approvalStatus: "Approval Stats",
+  addRecord: "Add Record",
+  addNew: "Add New",
+  internal: "Internal",
+  internalMemo: "Internal Memo",
+  status: "Status",
+  id: "Id",
+  recordName: "Record Name",
+  recordNameError: "Record Name is required",
+  remarkError: "Remark is required",
+  recipientOrg: "Recipient Organization",
+  referenceNumber: "Reference Number",
+  dateOfDispatch: "Date Of Dispatch",
+  deleteSignature: "Delete Signature",
+  deleteSignatureConfirmation:
+    "Are you sure you want to delete this signature ?",
+  deleteTeeterConfirmation: "Are you sure you want to delete this teeter ?",
+  changeSignature: "Change Signature",
+  changeTeeter: "Change Teeter",
+  deleteTeeter: "Delete Teeter",
+  deliveryPersonnel: "Delivery Personnel",
+  receivingPersonnel: "Receiving Personnel",
+  subject: "Subject",
+  actions: "Actions",
+  uploadRecord: "Add Outgoing Record",
+  uploadIncomingRecord: "Add Incoming Record",
+  cancel: "Cancel",
+  submit: "Save",
+  editRecord: "Edit Record",
+  editIncomingRecord: "Edit Incoming Record",
+  edit: "Edit",
+  viewRecord: "View Record",
+  View: "View",
+  viewIncomingRecord: "View Incoming Record",
+  remarks: "Remarks",
+  attachSeal: "Attach Seal",
+  detail: "Detail",
+  addRemark: "Add Remark",
+  title: "Title",
+  listRemarks: "Remarks List",
+  page: "Page",
+  prev: "Previous",
+  next: "Next",
+  print: "Print",
+  search: "Search",
+  editRequest: "Edit",
+  viewRequest: "View",
+  incomingRecordDate: "Record Received Date",
+  senderOrg: "Sender Organization",
+  location: "Location",
+  fillRecordInfo: "Fill Record Information",
+  file: "File",
+  files: "File",
+  alert_message_display: "Please provide all necessary information.",
+  signature: "Signature",
+  emptySignature: "Please add a Signature",
+  fileRequestInformation: "File Request Information",
+  uploadSuccess: "Uploaded Successfully",
+  updateSuccess: "Updated Successfully",
+  recordCreatedSuccessfully: "The record has been created successfully",
+  recordWithRefCreatedSuccessfully: (assignedReferenceNumber: string) => {
+    return `${assignedReferenceNumber} has been created successfully`;
+  },
+  passed: "Passed",
+  assignedSuccessfully: "The record is assigned successfully.",
+  assign: "Assign",
+  assignedTo: "Assigned To",
+  buildingCreatedSuccessfully: "The building has been created successfully",
+  buildingEditedSuccessfully: "The building has been edited successfully",
+  roomCreatedSuccessfully: "The room has been created successfully",
+  roomEditedSuccessfully: "The room has been edited successfully",
+  shelfCreatedSuccessfully: "The shelf has been created successfully",
+  shelfEditedSuccessfully: "The shelf has been edited successfully",
+  boxFileCreatedSuccessfully: "The boxFile has been created successfully",
+  boxFileEditedSuccessfully: "The boxFile has been edited successfully",
+  fileCreatedSuccessfully: "The file has been created successfully",
+  fileEditedSuccessfully: "The file has been edited successfully",
+  deleteSuccess: "Deleted Successfully",
+  inputsError: "Please fill the required fields",
+  remarkAddSuccess: "Remark Added Successfully",
+  haveAccessToFile: "Have access to file?",
+  stnWentWrong: "Something went wrong",
+  inputFileName: "File Name",
+  refNumberError: "Reference Number is required",
+  subjectError: "Subject is required",
+  contentError: "Content is required",
+  sendingOrgNameError: "Sending Organization Name is required",
+  incomingDateError: "Incoming Record date is required",
+  incomingDateValidationError: "Only Select Past Or Present Date",
+  recipientOrgNameError: "Recipient Organization is required",
+  dispatchDateError: "Date of dispatch is required",
+  fileError: "File is required",
+  noRemarks: "No remarks available",
+  attachments: "Attachments",
+  add: "Add",
+  update: "Update",
+  attach: "Attach",
+  delete: "Delete",
+  deleteRecord: "Delete Record",
+  deleteRecordConfirmationQuestion: (recordName: string) =>
+    `Are you sure you want to delete ${recordName}?`,
+  remark: "Remark",
+  letterNumber: "Letter Number",
+  goToRecord: "Go to record",
+  noAttachementsFound: "No Attachments Found",
+  convert: "Convert",
+  convertConfirm: "Are sure you want to convert this record?",
+  download: "Download",
+  sentSuccessfully: "Sent Successfully",
+  seal: "Seal",
+  sealError: "Seal can not be empty",
+  department: "Department",
+  ccOrganization: "CC Organization",
+  ccDepartment: "CC Department",
+  recipientDepartment: "Recipient Department",
+  open: "Open",
+  selectFileLocation: "Select File Location",
+  fileLocation: "File Location",
+  select: "Select",
+  filterRecords: "Filter Records",
+  send: "Send",
+  upload: "Upload",
+  link: "Link",
+  linkCopiedToClipboard: "Link copied to clipboard.",
+  copy: "Copy",
+  copied: "Copied",
+  flows: "Flows",
+  external: "External",
+  attachements: "Attachements",
+  recordDetails: "Record Details",
+  sendingDepartment: "Sending Department",
+  accept: "Accept",
+  cc: "CC",
+  sentDate: "Sent Date",
+  assignedBy: "Assigned By",
+  createdBy: "Created By",
+  created: "Created",
+  teeter: "Teeter",
+  emptyTeeter: "Please add a Teeter",
+  accepted: "Accepted",
+  acceptedStatus: "Accepted",
+  reassigned: "Reassigned successfully",
+  numberOfFiles: "Number of Files",
+  totalOutgoing: "Total Outgoing",
+  totalInternal: "Total Internal",
+  totalApproval: "Total Approval",
+  totalIncomingVsOutgoingExternal: "Total Incoming Vs Outgoing(External)",
+  totalInternalVsApproval: "Total Internal Vs Approval",
+  totalExternalIncoming: "Total External Incoming",
+  totalOutgoingRecords: "Total Outgoing records",
+  monthlyOutgoingRecords: "Monthly Outgoing records",
+  totalIncomingRecords: "Total Incoming records",
+  monthlyIncomingRecords: "Monthly Incoming records",
+  totalIncomingVsOutgoing: "Total Incoming Vs Outgoing",
+  monthlyIncomingVsOutgoing: "Monthly Incoming Vs Outgoing",
+  weeklyIncomingVsOutgoing: "Weekly Incoming Vs Outgoing",
+  dailyIncomingVsOutgoing: "Daily Incoming Vs Outgoing",
+  externalIncoming: "External Incoming",
+  internalIncoming: "Internal Incoming",
+  totalCC: "Total CC",
+  approval: "Approval",
+  contentConvertedSuccessfully: "Content converted and copied successfully",
+  acceptedTheRecord: "Accepted the record.",
+  returnedTheRecord: "Returned the record.",
+  approvedTheRecord: "Approved the record.",
+  rejectedTheRecord: "Rejected the record.",
+  fileDetails: "File Details",
+  recDashboard: "recDashboard",
+  userDashboard: "userDashboard",
+  dashboard: "Dashboard",
+  folders: "Folders",
+  userOutgoing: "userOutgoing",
+  userOutgoingTab: "User Outgoing",
+  userIncoming: "userIncoming",
+  all: "All",
+  delegate: "Delegate",
+  delegation: "Delegation",
+  recordFile: "Record File",
+  recordFileError: "Record File (pdf) should be selected",
+  updateDelegate: "Update Delegation",
+  removeDelegate: "Remove Delegation",
+  delegator: "Delegator",
+  delegatedTo: "Delegated To",
+  startDate: "Start Date",
+  reason: "Reason",
+  startDateError:
+    "You can't start delegating from the past, change you start date please",
+  endDate: "End Date",
+  endDateError:
+    "EndDate must greater than the StartDate, Please correct that first!",
+  // Physical Location
+  selectLocation: "Select Location",
+  buildingName: "Building Name",
+  buildingCode: "Building Code",
+  addBuilding: "Add Building",
+  Cancel: "Cancel",
+  selectBuilding: "Select Building",
+  roomName: "Room Name",
+  roomCode: "Room Code",
+  addRoom: "Add Room",
+  selectRoom: "Select Room",
+  room: "Room",
+  CustomerInformation: "Customer Information",
+  shelfName: "Shelf Name",
+  shelfCode: "Shelf Code",
+  addShelf: " Add shelf",
+  Approver: "Approver",
+  ApprovalStatus: "Approval Status",
+  selectShelf: "Select Shelf",
+  boxFileName: "BoxFile Name",
+  boxFileCode: "BoxFile code",
+  addBoxFile: "Add BoxFile",
+  selectBoxFile: "Select Boxfile",
+  BoxFile: "BoxFile",
+  fileName: "File Name",
+  fileCode: "File Code",
+  addFile: "Add File",
+  Building_Code: "Building Id",
+  Building_Name: "Building Name",
+  EditBuilding: "Edit Building",
+  EditRoom: "Edit Room",
+  EditShelf: "Edit Shelf",
+  EditBoxFile: "Edit BoxFile",
+  EditFile: "Edit File",
+  File: "File",
+  AddLocation: "Add Location",
+  ViewLocation: "View Locations",
+  buildings: "Building",
+  rooms: "Room",
+  shelfs: "Shelf",
+  boxFiles: "Box File",
+  deleteBuildingConfirmationQuestion: (buildingName: string) =>
+    `Are you sure you want to delete ${buildingName}?`,
+  deleteRoomConfirmationQuestion: (roomName: string) =>
+    `Are you sure you want to delete ${roomName}?`,
+  deleteShelfConfirmationQuestion: (shelfName: string) =>
+    `Are you sure you want to delete ${shelfName}?`,
+  deleteBoxFileConfirmationQuestion: (boxFileName: string) =>
+    `Are you sure you want to delete ${boxFileName}?`,
+  deleteFileConfirmationQuestion: (fileName: string) =>
+    `Are you sure you want to delete ${fileName}?`,
+  // File Request
+  AddFileRequest: "Create File Request",
+  ViewFileRequest: "View File Request",
+  ViewAllRequests: "View All File Requests",
+  successful: "Successful",
+  errorMessage: "Something Went Wrong!",
+  error: "Error",
+  borrow: "Borrow",
+  return: "Return",
+  BorrowedDate: "Borrowed Date",
+  Borrowed: "Borrowed",
+  Status: "Status",
+  RequestStatus: "Request Status",
+  ApproveOrRejectTheRequest: "Approve or Reject the Requsest",
+  FileStatus: "File Status",
+  modal: "Modal",
+  SentFileRequest: "My Request",
+  PendingRequests: "Pending Request",
+  BorrowFile: "Borrow File",
+  Filecode: "File Code",
+  CancelRequest: "Cancel",
+  BorrowerName: "Borrower Name",
+  BorowedDate: "Borrowed Date",
+  RequesterName: "Requester Name",
+  RequestedDate: "Requested Date",
+  selectfile: "Select File",
+  Select: " Select",
+  create: "Create",
+  selectfileerror: "File is required",
+  filecodeerror: " File code is required",
+  borrowernameerror: "Borrower name is required",
+  borroweddateerror: "Borrower Date is required",
+  requesternameerror: " requester name is required",
+  requesteddateerror: "requester Date is required",
+  Reassigned: "Reassigned",
+  firstName: "First Name",
+  middleName: "Middle Name",
+  LastName: "Last Name",
+  MiddleName: "Middle Name",
+  Subcity: "Subcity",
+  Woreda: "Woreda",
+  Email: "Email",
+  PhoneNumber: "Phone Number",
+  HouseNumber: "House Number",
+  NumberOfDaysRequested: "Number of Days Requested",
+  FileRequestNumber: "File Request Number",
+  FileDescription: "File Description",
+  isHardCopy: "Is Hard Copy",
+  fileNotFound: "File Not Found",
+  Returned: "Returned",
+  FileFouned: "File Found",
+  Reassign: "Reassign",
+  returnDate: "Return Date",
+  requestReason: "Request Reason",
+  save: "Save",
+  approvedDate: "Approved Date",
+  Approved: "Record has been approved successfully",
+  returnedDate: "Returned Date",
+  ReturnDays: "Return Days",
+  isfileborrowed: "File Borrowed?",
+  ReturnStatus: "Return Status",
+  ReturnFile: " Return File",
+  Reject: "Reject",
+  Approve: "Approve",
+  approvalInformation: "Approval Information",
+  Selectafile: "Select File",
+  ApproveRequest: "Approve Request",
+  close: "Close",
+  fileMovementSlip: "File Movement Slip",
+  sureapprove: " Are you sure to Approve the Request?",
+  surereject: "Are you sure to Reject the Request?",
+  surecancel: "Are you sure to Cancel the Request?",
+  RejectRequest: "Reject Request",
+  buildingNameError: "Building Name is required",
+  buildingCodeError: "Building Code is required",
+  roomNameError: "Room Name is required",
+  roomCodeError: "Room Code is required",
+  shelfNameError: "Shelf Name is required",
+  shelfCodeError: "Shelf Code is required",
+  selectedFile: "Selected File",
+  selectedRoomError: "Room is required",
+  selectedBoxFileError: "Box File is required",
+  selectedShelfError: "Shelf is required",
+  boxFileNameError: "Box File Name is required",
+  boxFileCodeError: "Box File Code is required",
+  fileNameError: "File Name is required",
+  fileCodeError: "File Code is required",
+  roomOrShelfError: "Room/Shelf is required",
+  RoomAddedSuccessful: "Room Added Succesfully",
+  BoxFileAddedSuccessful: "BoxFile Added Succesfully",
+  ShelfAddedSuccessful: "Shelf Added Succesfully",
+  FileAddedSuccessful: "File Added Succesfully",
+  BuildingAddedSuccessful: "Building Added Succesfully",
+  openSelectMenu: "Open Select Menu",
+  BoxFileFileValidationError: "BoxFile is required",
+  locations: "Locations",
+  noData: "No data available",
+  building: "Building",
+  Shelf: "Shelf",
+  OK: "OK",
+  Changefile: "Change File",
+  numberOfDays: "Number Of Days Requested",
+  Yes: "Yes",
+  No: "No",
+  deleteError: "Error",
+  deleteMessage: " You can not delete, since the item has relationships",
+  areuSure: "Are you sure you want to delete?",
+  approved: "Approved",
+  Rejected: "Record has been rejected successfully",
+  pending: "Pending",
+  inProgress: "In Progress",
+  rejectedStatus: "Rejected",
+  rejected: "Rejected",
+  canceled: "Canceled",
+  Accepted: "Record has been accepted successfully",
+  adjustment: "Adjustment",
+  createRecord: "Create Record",
+  fileInformation: "File Information",
+  onBehalfOf: "On Behalf Of",
+  fileDescription: "File Description",
+  fileDescriptionError: "You must fill file description",
+  hardOrSoftCopyQuestion: "Do You Want Hard Copy or Soft Copy?",
+  isRequestHardCopyRequest: "Is the request hard copy request?",
+  hardOrSoftCopyQuestionError: "You must select hardcopy or soft copy",
+  hardCopy: "Hard copy",
+  softCopy: "Soft Copy",
+  fileBorrowedWithReturnDate: (day: number) => {
+    return `The file is borrowed and it will be available after ${day} days`;
+  },
+  requestNumberConfirmationMessage: (fileRequestIdentifier: string) => {
+    return `Your request number is ${fileRequestIdentifier}`;
+  },
+  approverError: "You must fill approver",
+  selectFileRequestOptions: "Select File Request options",
+  selectFileReturnStatusError: "You must select file return status",
+  searchFile: "Search File",
+  // Create Record
+  recordType: "Record Type",
+  letterTemplate: "Letter Template",
+  content: "Content",
+  receivingOrg: "Receiving Organization",
+  nonSmoreceivingOrg: "Non Smart Office Receiving Organization",
+  nonSmoreceivingCCOrg: "Non Smart Office CC Organization",
+  receivingOrgError: "At least one recipient organization is mandatory.",
+  receivingDept: "Receiving Department",
+  receivingUser: "Receiving User",
+  receivingDeptError: "Receiving department is required",
+  receivingDeptOrUserError: "Receiving department is required",
+  to: "To",
+  from: "From",
+  ccTo: "CC To",
+  internalCcTo: "Internal CC To",
+  externalCcTo: "External CC To",
+  externalCc: "External CC",
+  recordCreatedSuccessful: "Record has been registered successfully",
+  recordDraftedSuccessful: "Record has been drafted successfully",
+  recordForwardedSuccessful: "Record has been forwarded successfully",
+  recordCouldnotBeForwarded: "The record couldn`t be forwarded",
+  okText: "Ok",
+  sent: "Sent",
+  view: "View",
+  draft: "Draft",
+  forwarded: "Forward",
+  returnConfirm: "Are sure you want to return this record?",
+  forwardConfirm: "Are sure you want to forward this record?",
+  assignConfirm: "Are sure you want to assign this record?",
+  deleteConfirm: "Are sure you want to delete this record?",
+  header: "Header",
+  footer: "Footer",
+  personal_remark: "Personal Remark",
+  reassign_remark: "Remark",
+  general_remark: "Remark",
+  forward_to: "Forward To",
+  forward_toError: "Forwarding is required",
+  AttachementCreatedSuccessful: "Attachement added Successfully",
+  skip: "Skip",
+  approve: "Approve",
+  deleteAttachementConfirmation: (attachementTitle: string) => {
+    return `Are you sure you want to delete ${attachementTitle}?`;
+  },
+  fileAttachedSuccessful: "File has been attached successfuly",
+  recordApproved: "Record has been approved",
+  Adjust: "Adjust",
+  adjusted: "Record has been sent for adjustment successfully",
+  adjust: "Adjusted",
+  other: "Other",
+  returnRemark: "Return Remark",
+  skipUploadingAttachementQuestion:
+    "Are you sure you do not want to upload an attachment?",
+  Receive: "Receive",
+  Confirm: "Confirm",
+  letterTemplateMissingError:
+    "Letter Template is missing please add one to create a record",
+  assignWithDepartment: "Assign With Department",
+  assignWithName: "Assign With a Name",
+  refrenceUrl: "Refrence URL",
+  commonRemarks: "Common Remarks",
+  prefix: "Prefix",
+  suffix: "Suffix",
+  prefixCC: "CC Prefix",
+  suffixCC: "CC Suffix",
+  // CC Assignment related translations
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/data/languageTypes.ts b/apps/edr-freight-web/backoffice/src/record-management/data/languageTypes.ts
new file mode 100644
index 000000000..3f110437b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/data/languageTypes.ts
@@ -0,0 +1,10 @@
+export const languageTypeOptions = [
+  {
+    Title: "English",
+    Value: "English",
+  },
+  {
+    Title: "Amharic",
+    Value: "Amharic",
+  },
+];
diff --git a/apps/edr-freight-web/backoffice/src/record-management/data/recordTypes.ts b/apps/edr-freight-web/backoffice/src/record-management/data/recordTypes.ts
new file mode 100644
index 000000000..6f20d7ad1
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/data/recordTypes.ts
@@ -0,0 +1,14 @@
+export const recordTypeOptions = [
+  {
+    Title: "External",
+    Value: "External",
+  },
+  {
+    Title: "Internal",
+    Value: "Internal",
+  },
+  {
+    Title: "Internal Memo",
+    Value: "InternalMemo",
+  },
+];
diff --git a/apps/edr-freight-web/backoffice/src/record-management/dto/AssignementStep.ts b/apps/edr-freight-web/backoffice/src/record-management/dto/AssignementStep.ts
new file mode 100644
index 000000000..efac6ede4
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/dto/AssignementStep.ts
@@ -0,0 +1,70 @@
+import { FileInfo } from "./userRecords/userRecordsDto";
+
+export interface LocalizedText {
+  am: string;
+  en: string;
+}
+
+export interface AssignmentEmployee {
+  id?: string;
+  name?: LocalizedText | string | null;
+}
+
+export interface AssignmentPosition {
+  id?: string;
+  name?: LocalizedText | string | null;
+  department?: string | null;
+  role?: string | null;
+}
+
+export interface AssignmentActor {
+  id?: string;
+  employee?: AssignmentEmployee | null;
+  position?: AssignmentPosition | null;
+}
+
+export interface AssignmentAssignee {
+  id?: string;
+  employee?: AssignmentEmployee | null;
+}
+
+export interface AssignmentMultipleUser {
+  id?: string;
+  name?: LocalizedText | string | null;
+  department?: string | null;
+  role?: string | null;
+  status?: string | null;
+  completedDate?: string | null;
+}
+
+export interface AssignmentApiResponse {
+  id: string;
+  createdAt: string;
+  status: string;
+  comment?: string | null;
+  assignerId?: string;
+  assigneePositionId?: string;
+  parentAssignmentId?: string | null;
+  parentId?: string | null;
+  previousStepId?: string | null;
+  respondedAt?: string | null;
+  repliedAt?: string | null;
+  reassignAt?: string | null;
+  amharicCreatedAt?: string | null;
+  amharicRespondedAt?: string | null;
+  amharicRepliedAt?: string | null;
+  amharicReassignedAt?: string | null;
+  assigneePosition?: AssignmentPosition | null;
+  assigner?: AssignmentActor | null;
+  assignee?: AssignmentAssignee | null;
+  assignedToUsers?: AssignmentMultipleUser[] | null;
+  children?: AssignmentApiResponse[];
+  teeter?: (FileInfo & { presigned?: string; url?: string | null }) | null;
+  signature?: (FileInfo & { presigned?: string; url?: string | null }) | null;
+}
+
+export interface AssignmentStep {
+  assignedDate: string;
+  completedDate?: string | null;
+  status: "Accepted" | "Pending" | "Reassigned";
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/dto/IncomingRecords/IncomingLetterDto.ts b/apps/edr-freight-web/backoffice/src/record-management/dto/IncomingRecords/IncomingLetterDto.ts
new file mode 100644
index 000000000..404781ffa
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/dto/IncomingRecords/IncomingLetterDto.ts
@@ -0,0 +1,20 @@
+export interface SendLetterDto {
+  fileInfo: {
+    fileName: string;
+    contentType: string;
+    size: number;
+    originalname: string;
+  };
+  subject: string;
+  receiverPositions: string[];
+  receiverEmployeePositions: string[];
+  letterNumber:string;
+  deliveredBy:string;
+  preferredLanguage:"am" | "en";
+  organizationName:{
+    am:string;
+    en:string;
+  };
+
+
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/dto/IncomingRecords/RecordOfficerIncoming.ts b/apps/edr-freight-web/backoffice/src/record-management/dto/IncomingRecords/RecordOfficerIncoming.ts
new file mode 100644
index 000000000..5e589a8ce
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/dto/IncomingRecords/RecordOfficerIncoming.ts
@@ -0,0 +1,126 @@
+export interface IncomingRecordContentDto {
+  id: string;
+  subject: string;
+}
+
+export interface FileInfoDto {
+  size: number;
+  fileName: string;
+  contentType: string;
+  originalname: string;
+}
+
+export interface ReceivingUnitDto {
+  id: string;
+  unit: UnitDto;
+}
+
+export interface UnitDto {
+  id: string;
+  name: NameDto;
+}
+
+export interface NameDto {
+  am: string;
+  en: string;
+}
+
+export interface ContentDto {
+  id: string;
+  subject: string;
+  recordAttachments: any[]; // Could be typed more specifically if structure is known
+}
+export interface IncomingRecordDto {
+  initiator: any;
+  metadata: any;
+  organizationName: any;
+  referenceNumber: string;
+  letterNumber: string;
+  id: string;
+  content: IncomingRecordContentDto[];
+}
+
+export interface DeliveredByDto {
+  am: string;
+  en: string;
+}
+
+export interface OrganizationNameDto {
+  am: string;
+  en: string;
+}
+
+export interface MetadataDto {
+  deliveredBy: DeliveredByDto;
+  organizationName: OrganizationNameDto;
+}
+
+export interface ContentDto {
+  id: string;
+  subject: string;
+  receiverEmployees: any[]; // Can replace `any` with proper Employee DTO if available
+  receiverPositions: any[]; // Can replace `any` with proper Position DTO if available
+}
+
+export interface RecordDto {
+  nonSmartOfficeRecordStatus: string;
+  createdAt: string;
+  updatedAt: string;
+  id: string;
+  isLocked?: boolean;
+  referenceNumber: string;
+  letterNumber: string;
+  metadata: MetadataDto;
+  dispatchedDate: string | null;
+  amharicDispatchedDate: string | null;
+  amharicCreatedAt: string | null;
+  statusKey: string;
+  recordTypeKey: string;
+  initiator: any | null; // Replace `any` if you have a specific type for initiator
+  content: ContentDto[];
+}
+
+export interface IncomingRecordWrapperDto {
+  createdAt: string;
+  updatedAt: string;
+  id: string;
+  isLocked?: boolean;
+  amharicCreatedAt: string | null;
+  status: string;
+  record: RecordDto;
+}
+
+
+
+export interface CorrespondenceDto {
+  nonSmartOfficeRecordStatus: any;
+  letterName: string;
+  id: string;
+  isLocked?: boolean;
+  createdAt: string;
+  fileInfo: FileInfoDto;
+  referenceNumber: string;
+  letterNumber: string;
+  dispatchedDate: string; // ISO date string
+  amharicDispatchedDate: string;
+  amharicCreatedAt: string;
+  statusKey: string;
+  initiationType: string;
+  receivingUnits: ReceivingUnitDto[];
+  content: ContentDto[];
+  recordBoxes: any[]; // Could be typed more specifically if structure is known
+  replies: any[];
+  metadata: MetadataDto;
+  status?: string;
+}
+
+export interface LocalizedField {
+  am: string;
+  en: string;
+}
+
+export interface MetadataDto {
+  uploadedBy: LocalizedField;
+  deliveredBy: LocalizedField;
+  organizationName: LocalizedField;
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/dto/IncomingRecords/incomingTasksDto.ts b/apps/edr-freight-web/backoffice/src/record-management/dto/IncomingRecords/incomingTasksDto.ts
new file mode 100644
index 000000000..00864adf1
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/dto/IncomingRecords/incomingTasksDto.ts
@@ -0,0 +1,214 @@
+// Base interfaces for reusable structures
+interface NameLocalized {
+  am: string;
+  en: string;
+}
+
+interface Metadata {
+  uploadedBy: NameLocalized;
+  deliveredBy: NameLocalized;
+  organizationName: NameLocalized;
+}
+
+interface Position {
+  id: string;
+  name: NameLocalized;
+}
+
+interface Employee {
+  id: string;
+  name: NameLocalized;
+}
+
+interface Assigner {
+  id: string;
+  employee: Employee;
+  delegator: string | null;
+}
+
+interface AssigneePosition {
+  id: string;
+  name: NameLocalized;
+}
+
+interface Assignee {
+  id: string;
+  employee?: Employee | null;
+}
+
+interface IncomingInstance {
+  createdAt: string;
+  id: string;
+  amharicCreatedAt: string;
+  reassignAt: string | null;
+  amharicReassignedAt: string | null;
+  respondedAt: string | null;
+  amharicRespondedAt: string | null;
+  repliedAt: string | null;
+  amharicRepliedAt: string | null;
+  status:
+    | "accepted"
+    | "re_assigned"
+    | "draft"
+    | "pending"
+    | "completed"
+    | string;
+  isRead: boolean;
+  comment: string | null;
+  latestRemarkAt?: string | null;
+  assigneeId?: string;
+  assignee?: Assignee | null;
+  assigneePositionId?: string;
+  assigneePosition: AssigneePosition;
+  assigner: Assigner;
+  childAssignments?: {
+    latestRemarkAt?: string | null;
+  }[];
+}
+
+interface Content {
+  id: string;
+  subject: string;
+}
+
+interface Organization {
+  id: string;
+  name: NameLocalized;
+}
+
+interface Unit {
+  id: string;
+  name: NameLocalized;
+  organization: Organization;
+}
+
+interface InitiatorPosition {
+  id: string;
+  name: NameLocalized;
+}
+
+interface Initiator {
+  id: string;
+  position: InitiatorPosition;
+  employee: Employee;
+  unit: Unit;
+}
+
+// Main Letter/Item DTO
+interface IncomingLetterItem {
+  id: string;
+  referenceNumber: string;
+  letterNumber: string | null;
+  metadata: Metadata | null;
+  dispatchedDate: string;
+  amharicDispatchedDate: string;
+  isUrgent: boolean;
+  isDelegation: boolean;
+  isLocked: boolean;
+  isSecured: boolean;
+  preferredLanguage?: string;
+  initiationType: "self" | "external";
+  recordTypeKey:
+    | "non_smart_user"
+    | "internal_memo"
+    | "internal"
+    | "external"
+    | string;
+  letterName: string;
+  incomingInstances: IncomingInstance[];
+  content: Content[];
+  initiator: Initiator;
+}
+
+// Main Response DTO
+interface IncomingRecordsResponse {
+  count: number;
+  items: IncomingLetterItem[];
+}
+
+// For component state management
+interface IncomingRecordsState {
+  letters: IncomingLetterItem[];
+  isLoading: boolean;
+  error: string | null;
+  totalCount: number;
+}
+
+// Filter parameters DTO
+interface IncomingRecordsFilters {
+  searchTerm?: string;
+  status?: IncomingInstance["status"];
+  isUrgent?: boolean;
+  startDate?: string;
+  endDate?: string;
+  recordType?: IncomingLetterItem["recordTypeKey"];
+  page?: number;
+  limit?: number;
+}
+
+// Form DTO for creating/updating letters
+interface CreateLetterDTO {
+  referenceNumber: string;
+  letterNumber?: string | null;
+  metadata?: Partial<Metadata>;
+  dispatchedDate: string;
+  isUrgent: boolean;
+  isDelegation: boolean;
+  initiationType: "self" | "external";
+  recordTypeKey: IncomingLetterItem["recordTypeKey"];
+  letterName: string;
+  content: Omit<Content, "id">[];
+  assigneePositionId: string;
+  comment?: string;
+}
+
+// Update Letter DTO
+interface UpdateLetterDTO extends Partial<CreateLetterDTO> {
+  id: string;
+}
+
+// Instance action DTOs
+interface AssignInstanceDTO {
+  letterId: string;
+  assigneePositionId: string;
+  comment?: string;
+}
+
+interface ReassignInstanceDTO extends AssignInstanceDTO {
+  instanceId: string;
+}
+
+interface RespondInstanceDTO {
+  instanceId: string;
+  response: string;
+  comment?: string;
+}
+
+// Export all DTOs
+export type {
+  NameLocalized,
+  Metadata,
+  Position,
+  Employee,
+  Assigner,
+  Assignee,
+  AssigneePosition,
+  IncomingInstance,
+  Content,
+  Organization,
+  Unit,
+  InitiatorPosition,
+  Initiator,
+  IncomingLetterItem,
+  IncomingRecordsResponse,
+  IncomingRecordsState,
+  IncomingRecordsFilters,
+  CreateLetterDTO,
+  UpdateLetterDTO,
+  AssignInstanceDTO,
+  ReassignInstanceDTO,
+  RespondInstanceDTO,
+};
+
+// Default export for convenience
+export default IncomingRecordsResponse;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/dto/IncomingRecords/nonSmartRecordPdfDto.ts b/apps/edr-freight-web/backoffice/src/record-management/dto/IncomingRecords/nonSmartRecordPdfDto.ts
new file mode 100644
index 000000000..b49ee7a12
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/dto/IncomingRecords/nonSmartRecordPdfDto.ts
@@ -0,0 +1,43 @@
+export interface UserNameDto {
+  am: string;
+  en: string;
+}
+
+export interface FileInfoDto {
+  fileName: string;
+  contentType: string;
+  size: number;
+  originalname: string;
+}
+
+export interface AttachmentFileDto {
+  fileInfo: FileInfoDto;
+  name: UserNameDto;
+}
+
+export interface UploadPdfDto {
+  fileInfo: FileInfoDto;
+  subject: string;
+  receiverPositions: string[];
+  receiverEmployeePositions: string[];
+  letterNumber: string;
+  organizationName: UserNameDto;
+  deliveredBy: string;
+  preferredLanguage: string;
+  letterName: string;
+  recordPrefixId?: string;
+  attachments?: AttachmentFileDto[];
+}
+
+export interface AssignPdfDto {
+  recordBoxId: string | null;
+  recordId: string | null;
+  employeePositionIds: string[];
+  positionIds?: string[];
+  comment: string;
+}
+
+export interface NonSmartRecordPdfAssignPayload {
+  uploadDto: UploadPdfDto;
+  assignDto: AssignPdfDto;
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/dto/IncomingRecords/taskDto.ts b/apps/edr-freight-web/backoffice/src/record-management/dto/IncomingRecords/taskDto.ts
new file mode 100644
index 000000000..cea8c1a87
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/dto/IncomingRecords/taskDto.ts
@@ -0,0 +1,80 @@
+export interface AssignedRecordDto {
+  content: any;
+  initiator: any;
+  CreatedAt: string;
+  createdAt: string;
+  refetch: () => void;
+  refetchTable: () => void;
+  id: string;
+  status: string;
+  latestRemarkAt?: string | null;
+  childAssignments?: {
+    latestRemarkAt?: string | null;
+  }[];
+  isRead: boolean;
+  amharicCreatedAt: string;
+  isLocked?: boolean;
+  isDelegation?: boolean;
+  record: {
+    letterName: string;
+    isUrgent: any;
+    referenceNumber: string;
+    id: string;
+    dispatchedDate: string | null;
+    amharicDispatchedDate: string;
+
+    initiationType: string;
+    initiator: {
+      position: any;
+      id: string;
+      name: {
+        am: string;
+        en: string;
+      };
+    };
+    recordTypeKey: string;
+    content: {
+      id: string;
+      subject: string;
+    }[];
+    isDelegation: boolean;
+  };
+  assigneePosition: {
+    id: string;
+    name: string;
+  };
+  referenceNumber: string;
+}
+
+export interface AssignRecordDto {
+  recordId?: string;
+  id: string;
+  createdAt: string;
+  status: string;
+  lastRemarkCreated?: string | null;
+  preferredLanguage?: string;
+  assigneeId?: string;
+  assignee?: {
+    id?: string;
+    employee?: {
+      id?: string;
+    };
+  } | null;
+  assigneePositionId?: string;
+  assigneePosition?: {
+    id?: string;
+  } | null;
+  incomingInstances?: Array<AssignRecordDto>;
+  children?: Array<AssignRecordDto>;
+  record: {
+    id: string;
+    dispatchedDate: string | null;
+    initiationType: string;
+    recordTypeKey: string;
+    content: {
+      id: string;
+      subject: string;
+    }[];
+  };
+  isRead?: boolean | undefined;
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/dto/approval/approvalRecordsDto.ts b/apps/edr-freight-web/backoffice/src/record-management/dto/approval/approvalRecordsDto.ts
new file mode 100644
index 000000000..12d84889d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/dto/approval/approvalRecordsDto.ts
@@ -0,0 +1,257 @@
+export interface PendingApprovalDto {
+  content: any;
+  id: string;
+  status: "active" | "inactive"; // You can adjust the union if other statuses exist
+  createdAt: string;
+  updatedAt: string;
+  record: PendingApprovalRecordDto;
+  onReview?: boolean;
+  letterName?: string; // Add letterName field for file name column
+}
+
+export interface PositionName {
+  am: string;
+  en: string;
+}
+
+export interface Unit {
+  id: string;
+  name: PositionName;
+}
+
+export interface Position {
+  id: string;
+  name: PositionName;
+}
+
+export interface ApproverName {
+  am: string;
+  en: string;
+}
+
+export interface ApproverEmployee {
+  id: string;
+  name: ApproverName;
+}
+
+export interface ApproverPosition {
+  id: string;
+  name: ApproverName;
+}
+
+export interface EmployeePosition {
+  id: string;
+  employee: ApproverEmployee;
+  position: ApproverPosition;
+}
+
+export interface Record {
+  recordTypeKey: string;
+  receivingUnits: any;
+  id: string;
+  referenceNumber: string | null;
+  letterName?: string; // Add letterName field
+  initiator?: {
+    id: string;
+    employee: {
+      id: string;
+      name: {
+        am: string;
+        en: string;
+      };
+    };
+    position: {
+      id: string;
+      name: {
+        am: string;
+        en: string;
+      };
+    };
+  };
+  statusKey: string;
+}
+
+export interface RecordContent {
+  nonSmartOfficeReceivers: any;
+  id: string;
+  subject: string;
+  recordId: string;
+  record: Record;
+  recordTypeKey: string;
+  receivingUnits: ReceivingUnitDto[];
+  receiverEmployees: ReceiverEmployeeDto[];
+  receiverPositions: ReceiverPositionDto[];
+}
+
+export interface ReceiverPositionDto {
+  id: string;
+  position: {
+    id: string;
+    name: {
+      am: string;
+      en: string;
+    };
+  };
+}
+
+export interface PendingApprovalRecordDto {
+  preferredLanguage: string;
+  id: string;
+  recordTypeKey: "internal" | "external" | "internal_memo"; // Extend this union if needed
+  referenceNumber: string | null;
+  content: PendingApprovalContentDto[];
+  receivingUnits: ReceivingUnitDto[];
+  amharicSubmittedDate: string;
+  submittedDate: string;
+  isSecured: boolean;
+  isUrgent: boolean;
+  letterName?: string;
+  isWithTeamSignature?: boolean;
+  initiator?: {
+    id: string;
+    employee: {
+      id: string;
+      name: {
+        am: string;
+        en: string;
+      };
+    };
+    position: {
+      id: string;
+      name: {
+        am: string;
+        en: string;
+      };
+    };
+  };
+
+  statusKey: string;
+}
+
+export interface PendingApprovalContentDto {
+  nonSmartOfficeReceivers: any;
+  id: string;
+  subject: string;
+  receiverPositions: ReceiverPositionDto[];
+  receiverEmployees: ReceiverEmployeeDto[];
+}
+
+export interface ReceiverEmployeeDto {
+  id: string;
+  employeePosition: {
+    id: string;
+    employee: {
+      id: string;
+      name: {
+        am: string;
+        en: string;
+      };
+    };
+    position?: {
+      id: string;
+      name: {
+        am: string;
+        en: string;
+      };
+    };
+  };
+}
+
+export interface ReceiverPositionDto {
+  id: string;
+  position: Position;
+}
+
+export interface ReceivingUnitDto {
+  id: string;
+  unit: Unit;
+}
+export interface MyApprovalRecordsDto {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  submittedDate: string;
+  amharicSubmittedDate: string;
+  amharicCreatedAt: string; // Add amharicCreatedAt at root level as per backend response
+  action: "approve" | "reject" | "send_back" | "active" | string;
+  version: number;
+  comment: string;
+  employeePosition: EmployeePosition;
+  recordContent: RecordContent;
+  pageNo?: number;
+
+  // ✅ Fix this line - record should include letterName and amharicCreatedAt
+  // ✅ Fix this line - record should include letterName and amharicCreatedAt
+  record: {
+    id: string;
+    submittedDate: string;
+    amharicSubmittedDate: string;
+    recordTypeKey: string;
+    referenceNumber: string;
+    statusKey: string;
+    letterName?: string; // Add letterName field here where it actually exists in the backend response
+    initiator?: {
+      id: string;
+      employee: {
+        id: string;
+        name: {
+          am: string;
+          en: string;
+        };
+      };
+      position: {
+        id: string;
+        name: {
+          am: string;
+          en: string;
+        };
+      };
+    };
+    // Add any other fields you need from `record`
+  };
+}
+
+export interface EmployeePosition {
+  id: string;
+  employee: {
+    id: string;
+    name: {
+      am: string;
+      en: string;
+    };
+  };
+  position: {
+    id: string;
+    name: {
+      am: string;
+      en: string;
+    };
+  };
+}
+
+export interface ReceiverEmployee {
+  id: string;
+  employeePosition: EmployeePosition;
+}
+
+export interface RecordContentAlt {
+  id: string;
+  subject: string;
+  recordId: string;
+  receiverEmployees: ReceiverEmployee[];
+  record: {
+    id: string;
+    referenceNumber: string | null;
+    recordTypeKey: string;
+    receivingUnits: Array<{
+      id: string;
+      unit: {
+        id: string;
+        name: {
+          am: string;
+          en: string;
+        };
+      };
+    }>;
+  };
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/dto/approval/fileInformationDto.ts b/apps/edr-freight-web/backoffice/src/record-management/dto/approval/fileInformationDto.ts
new file mode 100644
index 000000000..1d0192b4e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/dto/approval/fileInformationDto.ts
@@ -0,0 +1,4 @@
+export interface FileInformationDto {
+    FileLeafRef: string;
+    FileRef: string;
+  }
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/record-management/dto/approval/newApprovalRecordsDto.ts b/apps/edr-freight-web/backoffice/src/record-management/dto/approval/newApprovalRecordsDto.ts
new file mode 100644
index 000000000..4fc4e0d7e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/dto/approval/newApprovalRecordsDto.ts
@@ -0,0 +1,130 @@
+// Main DTO
+export interface ProcessedApprovalRecordsResponseDto {
+  count: number;
+  items: ProcessedApprovalRecords[];
+}
+
+// Individual Document Item
+export interface ProcessedApprovalRecords {
+  createdAt: string; // ISO date string
+  updatedAt: string; // ISO date string
+  id: string; // UUID]
+  referenceNumber: string | null;
+  letterNumber: string | null;
+  preferredLanguage: "am" | "en";
+  submittedDate: string; // ISO date string
+  amharicSubmittedDate: string;
+  approvedDate: string; // ISO date string
+  amharicApprovedDate: string;
+  dispatchedDate: string; // ISO date string
+  amharicDispatchedDate: string;
+  amharicCreatedAt: string;
+  isSecured: boolean;
+  isUrgent: boolean;
+  isDelegation: boolean;
+  isMigrated: boolean;
+  statusKey: "Dispatched" | "Approved" | string; // Add other statuses as needed
+  initiationType: "self" | string;
+  initiatorId: string; // UUID
+  inReplyToId: string | null;
+  inReplyToIncomingInstanceId: string | null;
+  recordTypeKey: "internal_memo" | "internal" | "external" | string;
+  letterName: string;
+  content: ContentItemDto[];
+  receivingUnits: ReceivingUnitDto[];
+  initiator: InitiatorDto;
+  outgoingHistories: OutgoingHistoryDto[];
+}
+
+// Content Item
+export interface ContentItemDto {
+  id: string; // UUID
+  subject: string;
+  receiverPositions: ReceiverPositionDto[];
+  receiverEmployees: ReceiverEmployeeDto[];
+  nonSmartReceivers: NonSmartReceiverDto[];
+}
+
+// Receiver Position
+export interface ReceiverPositionDto {
+  id: string; // UUID
+  position: PositionDto;
+}
+
+// Position
+export interface PositionDto {
+  id: string; // UUID
+  name: LocalizedNameDto;
+}
+
+// Localized Name
+export interface LocalizedNameDto {
+  am: string;
+  en: string;
+}
+
+// Receiver Employee
+export interface ReceiverEmployeeDto {
+  id: string; // UUID
+  employeePosition: EmployeePositionDto;
+}
+
+// Employee Position
+export interface EmployeePositionDto {
+  id: string; // UUID
+  employee: EmployeeDto;
+  position: PositionDto;
+}
+
+// Employee
+export interface EmployeeDto {
+  id: string; // UUID
+  name: LocalizedNameDto;
+}
+
+// Non-Smart Receiver
+export interface NonSmartReceiverDto {
+  id: string; // UUID
+  isCc: boolean;
+  name: string;
+}
+
+// Receiving Unit
+export interface ReceivingUnitDto {
+  id: string; // UUID
+  unit: UnitDto;
+}
+
+// Unit
+export interface UnitDto {
+  id: string; // UUID
+  name: LocalizedNameDto;
+  key: string;
+}
+
+// Initiator
+export interface InitiatorDto {
+  id: string; // UUID
+  employee: EmployeeDto;
+  position: PositionDto;
+}
+
+// Outgoing History
+export interface OutgoingHistoryDto {
+  createdAt: string; // ISO date string
+  updatedAt: string; // ISO date string
+  id: string; // UUID
+  amharicCreatedAt: string;
+  action: "send_to_ro" | "send_back" | "approve" | string;
+  version: number;
+  comment: string;
+  employeePosition: EmployeePositionDetailDto;
+  delegatedEmployeePosition: EmployeePositionDetailDto | null;
+}
+
+// Employee Position Detail (used in history)
+export interface EmployeePositionDetailDto {
+  id: string; // UUID
+  employee: EmployeeDto;
+  position: PositionDto;
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/dto/delegation/delegationDto.ts b/apps/edr-freight-web/backoffice/src/record-management/dto/delegation/delegationDto.ts
new file mode 100644
index 000000000..506ca0c32
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/dto/delegation/delegationDto.ts
@@ -0,0 +1,68 @@
+export interface PositionName {
+  am: string;
+  en: string;
+}
+
+export interface PositionDto {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  name: PositionName;
+  key: string;
+  parentPositionId: string;
+  unitId: string;
+  organizationId: string;
+  projectId: string | null;
+  positionTypeId: string;
+}
+
+export interface DelegationTerminationReason {
+  id: string;
+  terminatedAt: string;
+  comment: string;
+  terminatorEmployeePosition: {
+    id: string;
+    employee: {
+      id: string;
+      name: {
+        en: string;
+        am: string;
+      };
+    };
+  };
+}
+
+export interface DelegatePositionDto {
+  status: string;
+  delegationLetter: any;
+  delegator: any;
+  employee: any;
+  record: any;
+  id: string;
+  amharicStartDate: string;
+  amharicEndDate: string;
+  createdAt: string;
+  updatedAt: string;
+  isDelegate: boolean;
+  isCurrent: boolean;
+  startDate: string;
+  endDate: string;
+  unitId: string;
+  delegatorId: string;
+  employeeId: string;
+  positionId: string;
+  position: PositionDto;
+  delegateePosition: PositionDto;
+  name: { am: string; en: string };
+  delegationLetterId?: { id: string; referenceNumber: string };
+  employeePositionId?: string;
+  internalCC?: string[];
+  stampId?: string;
+  /** Present when the delegation was terminated early; carries the reason + when. */
+  terminationReason?: DelegationTerminationReason | null;
+}
+
+export interface DelegatePositionResponse {
+  data: DelegatePositionDto[];
+  count: number;
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/dto/delegation/newDelegationDto.ts b/apps/edr-freight-web/backoffice/src/record-management/dto/delegation/newDelegationDto.ts
new file mode 100644
index 000000000..abce3c98d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/dto/delegation/newDelegationDto.ts
@@ -0,0 +1,13 @@
+export interface NewDelegationDto {
+  Delegator: string;
+  Delegated_ToId: number;
+  Delegator_DeptId: number;
+  Delegator_Dept_Detail: string;
+  Delegator_MIDId: number | null;
+  StartDate: string;
+  EndDate: string;
+  Reason: string;
+  isActive: boolean;
+  GregorianDate: string;
+  EthiopianDate: string;
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/dto/fileDto.ts b/apps/edr-freight-web/backoffice/src/record-management/dto/fileDto.ts
new file mode 100644
index 000000000..0779a5d36
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/dto/fileDto.ts
@@ -0,0 +1,21 @@
+export interface BaseUploadDto {
+  fileInfo: {
+    fileName: string;
+    originalname: string;
+    contentType: string;
+    fileType: string;
+    size: number;
+  };
+  name: {
+    am: string;
+    en: string;
+  };
+}
+
+export interface UploadSignatureDto extends BaseUploadDto {
+  employeeId: string;
+}
+
+export interface UploadTeeterDto extends BaseUploadDto {
+  employeePositionId: string;
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/dto/organization/organizationDto.ts b/apps/edr-freight-web/backoffice/src/record-management/dto/organization/organizationDto.ts
new file mode 100644
index 000000000..afac13f1a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/dto/organization/organizationDto.ts
@@ -0,0 +1,6 @@
+export interface OrganizationDto {
+    id: string;
+    name: string;
+    description: string;
+    
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/record-management/dto/recordOfficer/recordOfficerRecordDto.ts b/apps/edr-freight-web/backoffice/src/record-management/dto/recordOfficer/recordOfficerRecordDto.ts
new file mode 100644
index 000000000..7e7e93646
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/dto/recordOfficer/recordOfficerRecordDto.ts
@@ -0,0 +1,89 @@
+import { RecordDto } from "../userRecords/userRecordsDto";
+
+export interface RecordOfficerRecordsListResponse {
+  count: number;
+  items: RecordOfficerRecordsDto[] ;
+}
+
+export interface RecordOfficerOutgoingRecordsListResponse {
+  count: number;
+  items: RecordDto[];
+}
+
+
+export interface RecordOfficerRecordsDto {
+  id: string;
+  isLocked?: boolean;
+  createdAt: string;
+  updatedAt: string;
+  referenceNumber: string | null;
+  submittedDate: string;
+  statusKey: string;
+  initiationType: "self" | "other";
+  recordTypeKey: "internal" | "external";
+  receivingUnits: ReceivingUnit[];
+  initiator: Initiator;
+  content: RecordContent[];
+}
+
+export interface ReceivingUnit {
+  id: string;
+  unit: {
+    id: string;
+    name: {
+      am: string;
+      en: string;
+    };
+  };
+}
+
+export interface Initiator {
+  id: string;
+  employee: {
+    id: string;
+    name: {
+      am: string;
+      en: string;
+    };
+  };
+  position: {
+    id: string;
+    name: {
+      am: string;
+      en: string;
+    };
+  };
+}
+
+export interface RecordContent {
+  id: string;
+  subject: string;
+  nonSmartOfficeReceivers: any | null;
+  receiverPositions: ReceiverPosition[];
+  receiverEmployees: ReceiverEmployee[];
+}
+
+export interface ReceiverPosition {
+  id: string;
+  position: {
+    id: string;
+    name: {
+      am: string;
+      en: string;
+    };
+  };
+}
+
+export interface ReceiverEmployee {
+  id: string;
+  employeePosition: {
+    id: string;
+    employee: {
+      id: string;
+      name: {
+        am: string;
+        en: string;
+      };
+    };
+  };
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/dto/sealDto.ts b/apps/edr-freight-web/backoffice/src/record-management/dto/sealDto.ts
new file mode 100644
index 000000000..577af061d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/dto/sealDto.ts
@@ -0,0 +1,29 @@
+export interface SealDto {
+  "@odata.type"?: string;
+  "@odata.id"?: string;
+  "@odata.etag"?: string;
+  "@odata.editLink"?: string;
+  FileSystemObjectType?: number;
+  Id: number;
+  ServerRedirectedEmbedUri?: string | null;
+  ServerRedirectedEmbedUrl?: string;
+  ContentTypeId?: string;
+  FileLeafRef: string; // The filename (e.g., "Seal.png")
+  ComplianceAssetId?: string | null;
+  Title?: string | null;
+  ConvertedContent?: string | null; // Fixed typo from "ConvertedContent"
+  OData__dlc_DocId?: string;
+  OData__dlc_DocIdUrl?: {
+    Description: string;
+    Url: string;
+  };
+  Created?: string; // ISO date string
+  AuthorId?: number;
+  Modified?: string; // ISO date string
+  EditorId?: number;
+  OData__CopySource?: string | null;
+  FileRef: string; // Server relative path (e.g., "/sites/fire/recordManagement/Seals/Seal.png")
+  CheckoutUserId?: number | null;
+  OData__UIVersionString?: string;
+  GUID?: string;
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/dto/userRecords/dashboardStstsDto.ts b/apps/edr-freight-web/backoffice/src/record-management/dto/userRecords/dashboardStstsDto.ts
new file mode 100644
index 000000000..d9fb7d85f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/dto/userRecords/dashboardStstsDto.ts
@@ -0,0 +1,16 @@
+// src/features/dashboard/types/dashboardStatsDto.ts
+
+export interface DashboardStatsDto {
+  totalUsers: number;
+  activeUsers: number;
+  totalRecords: number;
+  pendingRecords: number;
+  completedRecords: number;
+  revenueToday: number;
+  revenueThisMonth: number;
+  topDepartments: {
+    name: string;
+    recordsCount: number;
+  }[];
+  lastUpdated: string; // ISO date string
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/dto/userRecords/delegationDto.ts b/apps/edr-freight-web/backoffice/src/record-management/dto/userRecords/delegationDto.ts
new file mode 100644
index 000000000..0af91a744
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/dto/userRecords/delegationDto.ts
@@ -0,0 +1,54 @@
+export interface DelegationApprovalRecordResponse {
+  count: number;
+  items: DelegationApprovalRecordItem[];
+}
+
+export interface DelegationApprovalRecordItem {
+  createdAt: string;
+  updatedAt: string;
+  id: string;
+  status: string;
+  record: {
+    id: string;
+    recordTypeKey: string;
+    content: DelegationRecordContent[];
+    receivingUnits: DelegationReceivingUnit[];
+  };
+  currentStep: {
+    id: string;
+    name: {
+      am: string;
+      en: string;
+    };
+  };
+}
+
+export interface DelegationRecordContent {
+  id: string;
+  subject: string;
+  nonSmartOfficeReceivers: any; // or null
+  receiverPositions: DelegationReceiverPosition[];
+  receiverEmployees: any[]; // currently empty
+}
+
+export interface DelegationReceiverPosition {
+  id: string;
+  position: {
+    id: string;
+    name: {
+      am: string;
+      en: string;
+    };
+  };
+}
+
+export interface DelegationReceivingUnit {
+  id: string;
+  unit: {
+    id: string;
+    name: {
+      am: string;
+      en: string;
+    };
+  };
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/dto/userRecords/prefixAndSuffixDto.ts b/apps/edr-freight-web/backoffice/src/record-management/dto/userRecords/prefixAndSuffixDto.ts
new file mode 100644
index 000000000..c2061fa92
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/dto/userRecords/prefixAndSuffixDto.ts
@@ -0,0 +1,16 @@
+export interface PrefixSuffixName {
+  am: string;
+  en: string;
+}
+
+export interface PrefixSuffixItem {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  name: PrefixSuffixName;
+}
+
+export interface PrefixSuffixResponse {
+  count: number;
+  items: PrefixSuffixItem[];
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/dto/userRecords/recordVerificationDto.ts b/apps/edr-freight-web/backoffice/src/record-management/dto/userRecords/recordVerificationDto.ts
new file mode 100644
index 000000000..90d28cc53
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/dto/userRecords/recordVerificationDto.ts
@@ -0,0 +1,46 @@
+export interface RecordVerificationDto {
+  id: string;
+  dispatchedDate: Date | null;
+  referenceNumber: string;
+  preferredLanguage: string;
+  recordTypeKey: string;
+  content: {
+    id: string;
+    version: string;
+    subject: string;
+    receiverEmployees: {
+      id: string;
+      employeePosition: {
+        id: string;
+        position: {
+          id: string;
+          name: {
+            en: string;
+            am: string;
+          };
+        };
+      };
+    }[];
+    receiverPositions: {
+      id: string;
+      position: {
+        id: string;
+        name: {
+          en: string;
+          am: string;
+        };
+      };
+    }[];
+    nonSmartOfficeReceivers: string[];
+  }[];
+  initiator: {
+    id: string;
+    employee: {
+      id: string;
+      name: {
+        en: string;
+        am: string;
+      };
+    };
+  };
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/dto/userRecords/teetersAndSignatureDto.ts b/apps/edr-freight-web/backoffice/src/record-management/dto/userRecords/teetersAndSignatureDto.ts
new file mode 100644
index 000000000..63bd910b0
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/dto/userRecords/teetersAndSignatureDto.ts
@@ -0,0 +1,77 @@
+export interface TeeterFileInfo {
+  size: number;
+  fileName: string;
+  contentType: string;
+  originalname: string;
+}
+
+export interface TeeterItem {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  fileInfo: TeeterFileInfo;
+  uploadedSuccessfully: boolean;
+  name: {
+    am: string;
+    en: string;
+  };
+  isCurrent: boolean;
+  employeePositionId: string;
+}
+
+export interface TeeterListResponse {
+  count: number;
+  items: TeeterItem[];
+}
+
+export interface FileInfo {
+  size: number;
+  fileName: string;
+  contentType: string;
+  originalname: string;
+}
+
+export interface SignatureItem {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  fileInfo: FileInfo;
+  uploadedSuccessfully: boolean;
+  isCurrent: boolean;
+  employeeId: string;
+}
+
+export interface SignatureListResponse {
+  count: number;
+  items: SignatureItem[];
+}
+
+export interface StampFileInfoDTO {
+  size: number;
+  fileName: string;
+  contentType: string;
+  originalname: string;
+}
+
+export interface StampNameDTO {
+  am: string;
+  en: string;
+}
+
+export interface StampItemDTO {
+  createdAt: string; // ISO 8601 date string
+  updatedAt: string; // ISO 8601 date string
+  id: string;
+  fileInfo: StampFileInfoDTO;
+  uploadedSuccessfully: boolean;
+  name: StampNameDTO;
+  locale?: string;
+  isCurrent: boolean;
+  employeePositionId: string;
+  presigned: string;
+}
+
+export interface StampResponseDTO {
+  count: number;
+  items: StampItemDTO[];
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/dto/userRecords/userDto.ts b/apps/edr-freight-web/backoffice/src/record-management/dto/userRecords/userDto.ts
new file mode 100644
index 000000000..27fa5193e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/dto/userRecords/userDto.ts
@@ -0,0 +1,41 @@
+export interface UserDto {
+  id: string;
+  email: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  userType: string;
+  status: string;
+  username: string;
+  hasSetPassword: boolean;
+  roles: string[];
+  permissions: string[];
+  employee: EmployeeDto[];
+}
+
+export interface EmployeeDto {
+  id: string;
+  organizationId: string;
+  unitId: string;
+  positions: PositionDto[];
+}
+
+export interface PositionDto {
+  id: string;
+  employeePositionId: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  key: string;
+  isDelegate: boolean;
+  projectId: string | null;
+  parentPositionId: string;
+  permissions: PermissionDto[];
+}
+
+export interface PermissionDto {
+  id: string;
+  key: string;
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/dto/userRecords/userRecordsDto.ts b/apps/edr-freight-web/backoffice/src/record-management/dto/userRecords/userRecordsDto.ts
new file mode 100644
index 000000000..402200df8
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/dto/userRecords/userRecordsDto.ts
@@ -0,0 +1,483 @@
+import { NameDTO } from "@/record-management/components/hooks/useTemplate";
+
+export interface RecordListDto {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  fileInfo: any | null;
+  referenceNumber: string | null;
+  preferredLanguage: "English" | "Amharic" | string;
+  submittedDate: string | null;
+  dispatchedDate: string | null;
+  statusKey: "Draft" | "Submitted" | "Dispatched" | string;
+  initiationType: "self" | "delegated" | string;
+  isUploadCompleted: boolean | null;
+  initiatorId: string;
+  userId: string | null;
+  recordTypeKey: "internal" | "external" | string;
+  unitId: string;
+}
+
+export interface Name {
+  am: string;
+  en: string;
+}
+
+export interface FileInfo {
+  fileName: string;
+  contentType: string;
+  originalname: string;
+  size?: number;
+  bucket?: string;
+}
+
+export interface RecordAttachmentDto {
+  id: string;
+  recordContentId: string;
+  isCurrent: boolean;
+  uploadedSuccessfully: boolean;
+  fileInfo: FileInfo;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface PositionDto {
+  id: string;
+  name: Name;
+  key: string;
+  rank?: number;
+  parentPositionId: string | null;
+  unitId: string;
+  organizationId: string;
+  projectId: string | null;
+  positionTypeId: string | null;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt?: string | null;
+}
+
+export interface ReceiverPositionDto {
+  id: string;
+  recordContentId: string;
+  positionId: string;
+  order: number;
+  position: PositionDto;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface EmployeeDto {
+  createdAt: string;
+  updatedAt: string;
+  id: string;
+  isCurrent: boolean;
+  status: string;
+  name: Name;
+  organizationId: string;
+  unitId: string;
+  userId: string;
+}
+
+export interface EmployeePositionDto {
+  createdAt: string;
+  updatedAt: string;
+  id: string;
+  isDelegate: boolean;
+  isCurrent: boolean;
+  status: string;
+  startDate: string | null;
+  amharicStartDate: string | null;
+  endDate: string | null;
+  amharicEndDate: string | null;
+  unitId: string;
+  delegatorId: string | null;
+  employeeId: string;
+  positionId: string;
+  delegateePositionId: string | null;
+  delegationLetterId: string | null;
+  position: PositionDto;
+  employee: EmployeeDto;
+}
+
+export interface ReceiverEmployeeDto {
+  createdAt: string;
+  updatedAt: string;
+  id: string;
+  recordContentId: string;
+  employeePositionId: string;
+  order: number;
+  employeePosition: EmployeePositionDto;
+}
+
+export interface UnitDto {
+  id: string;
+  name: Name;
+  key: string;
+  organizationId: string;
+  parentUnitId: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface CCsDto {
+  positionId?: string; // Only for internal
+  unitId: string;
+  type: "internal" | "external";
+  isForYourReference?: boolean;
+  value?: string; // For MultiSelect
+  label?: string; // For display
+  position?: {
+    name: {
+      en: string;
+      am?: string;
+    };
+  };
+  unit?: {
+    name: {
+      en: string;
+      am?: string;
+    };
+  };
+  employeePositionId: string | null;
+  employeePosition: {
+    employee?: {
+      name: { am: string; en: string };
+    };
+  };
+}
+
+export interface RecordContentDto {
+  letterName: string;
+  nonSmartOfficeReceiverCCs: string[];
+  nonSmartOfficeReceivers: string[];
+  nonSmartReceivers?: {
+    id: string;
+    name: string;
+    isCc: boolean;
+    isForYourReference: boolean;
+    prefix?: string | null;
+    suffix?: string | null;
+    order?: number | null;
+    createdAt?: string;
+    updatedAt?: string;
+  }[];
+  id: string;
+  version: number;
+  isCurrent: boolean;
+  date: string | null;
+  subject: string;
+  prefix: string | null;
+  suffix: string | null;
+  prefixCC: string | null;
+  suffixCC: string | null;
+  body: string;
+  sealId: string | null;
+  sincerelyText: string;
+  recordTemplateId: string | null;
+  headerId: string | null;
+  footerId: string | null;
+  referenceNumber?: string;
+  recordId: string;
+  footer: any | null;
+  header: any | null;
+  skipOneLevel?: boolean | null;
+  receiverEmployees: ReceiverEmployeeDto[];
+  receiverPositions: ReceiverPositionDto[];
+  ccs: CCsDto[];
+  ccList?: RecordPayloadReceiverGroup[];
+  receiverList?: RecordPayloadReceiverGroup[];
+  recordAttachments: RecordAttachmentDto[];
+  createdAt: string;
+  updatedAt: string;
+  recordTagRecords: RecordTag[];
+}
+
+export interface RecordTag {
+  createdAt: string;
+  updatedAt: string;
+  id: string;
+  recordContentId: string;
+  recordTagId: string;
+  recordTag: {
+    createdAt: string;
+    updatedAt: string;
+    id: string;
+    name: {
+      am: string;
+      en: string;
+    };
+    key: string;
+    unitId: string;
+  };
+}
+
+export interface InitiatorDto {
+  employee: any;
+  unit: any;
+  position: any;
+  id: string;
+  isCurrent: boolean;
+  status: string;
+  name: Name;
+  organizationId: string;
+  unitId: string;
+  userId: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ReceivingUnitDto {
+  id: string;
+  recordId: string;
+  unitId: string;
+  createdAt: string;
+  updatedAt: string;
+  nonSmartOfficeReceivers: string;
+  unit: {
+    createdAt: string;
+    id: string;
+    recordId: string;
+    name: NameDTO;
+    organizationId: string;
+    updatedAt: string;
+    parentUnitId: string;
+  };
+}
+export interface repliesDto {
+  createdAt: string;
+  updatedAt: string;
+  amharicCreatedAt: string | null;
+  amharicUpdatedAt: string | null;
+  id: string;
+  recordId: string;
+  record?: RecordDto;
+  recordContentId: string;
+  comment: string;
+  employeePositionId: string;
+  delegatorEmployeePositionId: string | null;
+  positionId: string;
+  isWithDelegation: boolean;
+  attachment: AttachmentInfo | null;
+  uploadedSuccessfully: boolean;
+  employeePosition: EmployeePositionDto;
+  delegatedEmployeePosition: EmployeePositionDto | null;
+  position: PositionDto;
+}
+export interface RecordDto {
+  replies: repliesDto[];
+  inReplyToIncomingInstanceId: any;
+  incomingInstances: any;
+  incomingInstance: any;
+  initiatedAs: string;
+  letterName: string;
+  letterNumber: string | null | undefined;
+  metadata: any;
+  id: string;
+  fileInfo: any | null;
+  referenceNumber: string | null;
+  preferredLanguage: string;
+  submittedDate: string | null;
+  dispatchedDate: string | null;
+  statusKey: string;
+  initiationType: string;
+  isUploadCompleted: boolean | null;
+  initiatorId: string;
+  userId: string | null;
+  recordTypeKey: string;
+  unitId: string;
+  initiator: InitiatorDto;
+  delegateInitiator: InitiatorDto;
+  content: RecordContentDto[];
+  ccList?: RecordPayloadReceiverGroup[];
+  forYourReferenceList?: RecordPayloadReceiverGroup[];
+  receiverList?: RecordPayloadReceiverGroup[];
+  receivingUnits: ReceivingUnitDto[];
+  createdAt: string;
+  updatedAt: string;
+  collaborators: CollaboratorDto[];
+  isWithTeamSignature: boolean;
+  skipOneLevel?: boolean | null;
+  outgoingInstances: OutgoingInstance[];
+  amharicCreatedAt: string;
+  amharicSubmittedDate: string;
+  amharicDispatchedDate: string;
+  isSecured: boolean;
+  isUrgent: boolean;
+  pageNo?: number;
+  status?: string;
+  isFinalLookGenerated?: boolean;
+}
+export interface OutgoingInstance {
+  id: string;
+  onReview?: boolean;
+  dispatchedBy: {
+    id: string;
+    employee: {
+      id: string;
+      name: {
+        am: string;
+        en: string;
+      };
+    };
+  };
+}
+export interface IncomingRecordDto {
+  id: string;
+  fileInfo: any | null;
+  referenceNumber: string;
+  submittedDate: string;
+  subject: string;
+  deliveryPersonnel: string;
+  letterNumber: string;
+  assignePosition: any | null;
+  sendingOrganization: string;
+  status: string;
+  createdAt: string;
+}
+export interface RecordPayloadCC {
+  positionId?: string;
+  unitId?: string;
+  employeePositionId?: string;
+  type: "internal" | "external";
+  isForYourReference?: boolean;
+  prefix?: string;
+  suffix?: string;
+}
+
+export interface RecordPayloadReceiverItem {
+  id?: string;
+  unitId?: string;
+  positionId?: string;
+  name?: string | { am: string; en: string };
+  type: "unit" | "non_smart";
+}
+
+export interface RecordPayloadReceiverGroup {
+  prefix: string;
+  suffix: string;
+  receivers: RecordPayloadReceiverItem[];
+}
+
+export interface AttachmentInfo {
+  fileInfo: {
+    bucket: string;
+    fileName: string;
+    contentType: string;
+    size: number;
+    originalname: string;
+  };
+  name: {
+    am: string;
+    en: string;
+  };
+}
+
+export interface RecordPayload {
+  referenceNumber?: string;
+  useNewInternalMemoFormat?: boolean;
+  recordType: string;
+  initiationType: string;
+  subject: string;
+  preferredLanguage: "en" | "am";
+  body: string;
+  cc: RecordPayloadCC[];
+  receivingUnitIds: string[];
+  nonSmartOfficeReceivers: string[];
+  nonSmartOfficeReceiverCCs: string[];
+  toPositions: string[];
+  toEmployees: string[];
+  collaborators: string[];
+  headerId?: string | null;
+  footerId?: string | null;
+  sincerelyText: string;
+  isWithTeamSignature: boolean;
+  skipOneLevel?: boolean | null;
+  recordTemplateId?: string;
+  letterName?: string;
+  recordTagIds?: string[];
+  initiatedAs?: string;
+  inReplyToIncomingInstanceId?: string;
+  recordPrefixId?: string;
+  prefix?: string;
+  suffix?: string;
+  prefixCC?: string;
+  suffixCC?: string;
+  attachments?: AttachmentInfo[];
+  receiverList?: RecordPayloadReceiverGroup[];
+  ccList?: RecordPayloadReceiverGroup[];
+  forYourReferenceList?: RecordPayloadReceiverGroup[];
+}
+
+export interface SendBackDto {
+  instanceId: string;
+  action: "approve";
+  comment: string;
+}
+
+export interface AdjustmentDto {
+  instanceId: string;
+  action: "approve";
+  comment: string;
+  goBackTo?: string;
+}
+
+export interface CollaboratorDto {
+  amharicSignedAt: any;
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  isCurrent: boolean;
+  signStatus: "draft" | "signed" | "rejected"; // extend if needed
+  signedAt: string | null;
+  recordId: string;
+  comment: string | null;
+  employeePositionId: string;
+  userId: string;
+  employeePosition: CollaboratorEmployeePositionDto;
+}
+
+export interface CollaboratorEmployeePositionDto {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  isDelegate: boolean;
+  isCurrent: boolean;
+  startDate: string | null;
+  endDate: string | null;
+  unitId: string | null;
+  employeeId: string;
+  positionId: string;
+  employee: CollaboratorEmployeeDto;
+  position: CollaboratorPositionDto;
+}
+
+export interface CollaboratorEmployeeDto {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  isCurrent: boolean;
+  status: "active" | "inactive" | "pending"; // update as needed
+  name: {
+    am: string;
+    en: string;
+  };
+  organizationId: string;
+  unitId: string;
+  userId: string;
+}
+
+export interface CollaboratorPositionDto {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  key: string;
+  parentPositionId: string;
+  unitId: string;
+  organizationId: string;
+  projectId: string | null;
+  positionTypeId: string;
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/dto/userRecords/usersDto.ts b/apps/edr-freight-web/backoffice/src/record-management/dto/userRecords/usersDto.ts
new file mode 100644
index 000000000..b974d8aef
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/dto/userRecords/usersDto.ts
@@ -0,0 +1,103 @@
+import { RecordDto } from "./userRecordsDto";
+
+// RecordContentDto stays the same
+export interface RecordContentDto {
+  id: string;
+  subject: string;
+}
+
+// New: Name object
+export interface UserNameDto {
+  am: string;
+  en: string;
+}
+
+// New: UserDto
+export interface UserDto {
+  id: string;
+  name: UserNameDto;
+  username: string;
+  email: string;
+}
+
+// New: EmployeePositionDto
+export interface EmployeePositionDto {
+  id: string;
+  employeeId: string;
+  positionId: string;
+}
+
+// New: PositionHolderDto — represents the full response you showed
+export interface PositionHolderDto {
+  id: string;
+  name: string | null;
+  user: UserDto;
+  employeePositions: EmployeePositionDto[];
+}
+
+// Existing AssignRecordDto, no need to change unless you now need to relate it to these positions
+export interface AssignRecordDto {
+  recordBoxes: any;
+  recordBoxId: any;
+  createdAt: string;
+  id: string;
+  status: string;
+  isRead?: boolean;
+  record: RecordDto;
+  content: [id: string, subject: string];
+}
+
+export interface ReAssignPositionDto {
+  positionId?: string;
+  employeePositionId?: string;
+  employeeId?: string;
+}
+
+export interface ReAssignRecordPayload {
+  incomingInstanceId: string;
+  recordId: string;
+  comment?: string;
+  positions: ReAssignPositionDto[];
+}
+
+export interface AcceptIncomingRecordPayload {
+  incomingInstanceId: string;
+  status: string;
+  comment?: string;
+}
+
+export interface AssignCCPayload {
+  recordCCId: string;
+  recordId: string;
+  comment: string;
+  positions: {
+    positionId: string;
+    employeePositionId: string;
+  }[];
+}
+
+export interface AssignIncomingRecordPayload {
+  recordBoxId: string;
+  recordId: string;
+  employeePositionIds: string[];
+  positionIds?: string[] | null;
+  comment: string;
+}
+
+export interface PositionNameDto {
+  am: string;
+  en: string;
+}
+
+export interface PositionDto {
+  createdAt: string;
+  updatedAt: string;
+  id: string;
+  name: PositionNameDto;
+  key: string;
+  parentPositionId: string | null;
+  unitId: string;
+  organizationId: string;
+  projectId: string | null;
+  positionTypeId: string;
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/fonts/ARIAL.TTF b/apps/edr-freight-web/backoffice/src/record-management/fonts/ARIAL.TTF
new file mode 100644
index 000000000..8682d9462
Binary files /dev/null and b/apps/edr-freight-web/backoffice/src/record-management/fonts/ARIAL.TTF differ
diff --git a/apps/edr-freight-web/backoffice/src/record-management/fonts/NotoSansEthiopic-Regular.ttf b/apps/edr-freight-web/backoffice/src/record-management/fonts/NotoSansEthiopic-Regular.ttf
new file mode 100644
index 000000000..a86635f48
Binary files /dev/null and b/apps/edr-freight-web/backoffice/src/record-management/fonts/NotoSansEthiopic-Regular.ttf differ
diff --git a/apps/edr-freight-web/backoffice/src/record-management/hooks/use-media-query.ts b/apps/edr-freight-web/backoffice/src/record-management/hooks/use-media-query.ts
new file mode 100644
index 000000000..1e9c4588e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/hooks/use-media-query.ts
@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const listener = () => setMatches(media.matches);
+    media.addListener(listener);
+    return () => media.removeListener(listener);
+  }, [matches, query]);
+
+  return matches;
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/record-management/hooks/use-mobile copy.ts b/apps/edr-freight-web/backoffice/src/record-management/hooks/use-mobile copy.ts
new file mode 100644
index 000000000..1461fc059
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/hooks/use-mobile copy.ts	
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/hooks/use-mobile.ts b/apps/edr-freight-web/backoffice/src/record-management/hooks/use-mobile.ts
new file mode 100644
index 000000000..1461fc059
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/hooks/use-mobile.ts
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/hooks/useAuthUser.ts b/apps/edr-freight-web/backoffice/src/record-management/hooks/useAuthUser.ts
new file mode 100644
index 000000000..a1710d264
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/hooks/useAuthUser.ts
@@ -0,0 +1,204 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  EditTwoFA,
+  getProfile,
+  getTwoFactorStatus,
+  login,
+  logout,
+  setTwoFA,
+} from "@/record-management/services/api/authService";
+import Cookies from "js-cookie";
+// Update the path below to the correct relative path if needed
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { useNavigate } from "react-router-dom";
+import { useAuth } from "@/shared/context/AuthContext";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { Spinner } from "@/shared/common/ui/sppiner";
+import { createRoot } from "react-dom/client";
+import { createElement } from "react";
+import { User } from "lucide-react";
+import { clearRememberMePreference } from "@/shared/utils/authPersistence";
+import { disconnectSocket } from "@/record-management/components/common/socketInstance";
+interface LoginPayload {
+  email: string;
+  password: string;
+  tenantKey: string;
+  unitId?: any;
+}
+export interface SetTwoFAPayload {
+  isMFARequired: boolean;
+}
+
+export const useAuthUser = () => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+  const navigate = useNavigate();
+  const {
+    setUser,
+    user: contextUser,
+    selectedPositionId,
+    setSelectedPositionId,
+  } = useAuth();
+  const {
+    data: userDetails,
+    isLoading,
+    isError,
+    refetch,
+  } = useQuery<any>({
+    queryKey: ["authUser"],
+    queryFn: async () => {
+      const { data } = await getProfile({
+        tenantKey: Cookies.get("tenant-key")!,
+        unitId: Cookies.get("unit-id") || "",
+      });
+      return data as any;
+    },
+    staleTime: 5 * 60 * 1000,
+    retry: false,
+  });
+
+  const {
+    mutate: loginMutate,
+    isError: loginError,
+    isSuccess: loginSuccess,
+  } = useMutation({
+    mutationFn: async ({
+      email,
+      password,
+      tenantKey,
+      unitId,
+    }: LoginPayload) => {
+      const response = await login({ email, password }, { tenantKey, unitId });
+
+      return response.data;
+    },
+    onSuccess: (data, payload) => {
+      Cookies.set("auth-token", data.token, { expires: 1 }); // expires in 1 day
+      Cookies.set("tenant-key", payload.tenantKey, { expires: 1 });
+      Cookies.set("unit-id", payload.unitId || "", { expires: 1 });
+
+      toast.success(t("msg.loginSuccess"), {
+        description: t("msg.redirecting"),
+      });
+
+      queryClient.invalidateQueries({ queryKey: ["authUser"] });
+
+      navigate("/dashboard");
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+  const {
+    mutate: logoutMutate,
+    isError: logoutError,
+    isSuccess: logoutSuccess,
+  } = useMutation({
+    mutationFn: async () => {
+      // Call the logout API endpoint
+      await logout();
+    },
+    onSuccess: () => {
+      disconnectSocket();
+
+      // Clear user state
+      setUser(null);
+      setSelectedPositionId(null);
+
+      // Clear all cookies
+      Object.keys(Cookies.get()).forEach((cookieName) => {
+        Cookies.remove(cookieName);
+      });
+
+      // Clear only auth-related localStorage keys. Tenant/theme config,
+      // language, reminders, and other UI preferences should survive logout.
+      clearRememberMePreference();
+      localStorage.removeItem("token");
+
+      // Invalidate specific queries instead of clearing all
+      queryClient.invalidateQueries({ queryKey: ["authUser"] });
+
+      // Show success message
+      toast.success(t("msg.logoutSuccess") || "Logged out successfully");
+
+      // Redirect to login page
+      window.location.replace("/");
+    },
+    onError: (error) => {
+      disconnectSocket();
+
+      // Even if API call fails, still clear local data
+      setUser(null);
+      setSelectedPositionId(null);
+
+      Object.keys(Cookies.get()).forEach((cookieName) => {
+        Cookies.remove(cookieName);
+      });
+
+      clearRememberMePreference();
+      localStorage.removeItem("token");
+      queryClient.invalidateQueries({ queryKey: ["authUser"] });
+
+      handleError(error);
+
+      // Still redirect even if API fails
+      window.location.replace("/");
+    },
+  });
+
+  const { mutate: setTwoFactorAuth, isPending: isTwoFactorAuthLoading } =
+    useMutation({
+      mutationFn: async ({ isMFARequired }: SetTwoFAPayload) => {
+        // This function sends the update to your backend
+        await setTwoFA({ isMFARequired });
+      },
+      onSuccess: () => {
+        toast.success("Two-Factor Authentication setting updated");
+        queryClient.invalidateQueries({ queryKey: ["twoFAStatus"] });
+      },
+      onError: (error) => {
+        handleError(error);
+      },
+    });
+
+  const { data: twoFactorDatas, isLoading: isLoadingStatus } = useQuery({
+    queryKey: ["twoFAStatus", userDetails], // query key MUST be an array or string[]
+    queryFn: getTwoFactorStatus,
+    enabled: !!userDetails,
+  });
+  const { mutate: editTwoFA } = useMutation({
+    mutationFn: async ({
+      id,
+      isEnabled,
+    }: {
+      id: string;
+      isEnabled: boolean;
+    }) => {
+      await EditTwoFA({ isMFARequired: isEnabled }, id); // your PUT request
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["twoFAStatus"] });
+    },
+  });
+  const selectedPositionPermissionKeys =
+    userDetails?.selectedPositionPermissionKeys || [];
+  return {
+    userDetails,
+    selectedPositionPermissionKeys,
+    isLoading,
+    isError,
+    refetch,
+    login: loginMutate,
+    logout: logoutMutate,
+    loginSuccess,
+    loginError,
+    logoutSuccess,
+    logoutError,
+    setTwoFactorAuth: setTwoFactorAuth,
+    twoFactorData: twoFactorDatas?.data?.items,
+    isLoadingStatus,
+    editTwoFA,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/hooks/useLetterTemplates.ts b/apps/edr-freight-web/backoffice/src/record-management/hooks/useLetterTemplates.ts
new file mode 100644
index 000000000..772611da6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/hooks/useLetterTemplates.ts
@@ -0,0 +1,140 @@
+import {
+  keepPreviousData,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
+import {
+  getTemplatesByUnitId,
+  getTemplateById,
+  createTemplate,
+  updateTemplate,
+  deleteTemplate,
+  LetterTemplate,
+  LetterTemplatePayload,
+} from "@/user-management/services/api/letterTemplateService";
+
+export interface UseLetterTemplatesOptions {
+  skip?: number;
+  take?: number;
+  // BE expects "field:DIRECTION" form, e.g. "createdAt:DESC".
+  orderBy?: string;
+  order?: string;
+  enabled?: boolean;
+}
+
+export const useLetterTemplates = (
+  unitId: string,
+  options: UseLetterTemplatesOptions = {},
+) => {
+  const queryClient = useQueryClient();
+
+  const {
+    skip = 0,
+    take = 20,
+    // Default to newest-first so freshly-created templates appear at the top.
+    orderBy = "createdAt:DESC",
+    order,
+    enabled = true,
+  } = options;
+
+  const params = {
+    skip,
+    take,
+    orderBy,
+    ...(order ? { order } : {}),
+  };
+
+  // GET all templates by unitId
+  const {
+    data: letterTemplatesResponse,
+    isLoading,
+    isFetching,
+    isError,
+    refetch,
+  } = useQuery({
+    // Include all params in the key so different pages / sorts cache as
+    // separate entries instead of clobbering each other.
+    queryKey: ["letter-templates", unitId, params],
+    queryFn: async () => {
+      const { data } = await getTemplatesByUnitId(unitId, params);
+      return data;
+    },
+    enabled: !!unitId && enabled,
+    staleTime: 5 * 60 * 1000,
+    retry: false,
+    // Smoother pagination — keep previous page visible while next loads.
+    placeholderData: keepPreviousData,
+  });
+
+  // GET single template
+  const { mutate: getTemplateByDetails, isPending: isFetchingTemplate } =
+    useMutation({
+      mutationFn: async (id: string) => {
+        const { data } = await getTemplateById(id);
+        return data as LetterTemplate;
+      },
+    });
+
+  // CREATE
+  const { mutate: createLetterTemplate, isPending: isCreating } = useMutation({
+    mutationFn: async (data: LetterTemplatePayload) => {
+      const { data: created } = await createTemplate(data);
+      return created;
+    },
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ["letter-templates", variables.unitId],
+      });
+    },
+  });
+
+  // UPDATE
+  const { mutate: updateLetterTemplate, isPending: isUpdating } = useMutation({
+    mutationFn: async (payload: {
+      id: string;
+      data: LetterTemplatePayload;
+    }) => {
+      const { data: updated } = await updateTemplate(payload.id, payload.data);
+      return updated;
+    },
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ["letter-templates", variables.data.unitId],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["letter-template", variables.id],
+      });
+    },
+  });
+
+  // DELETE
+  const { mutate: deleteLetterTemplate, isPending: isDeleting } = useMutation({
+    mutationFn: async ({ id }: { id: string }) => {
+      await deleteTemplate(id);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["letter-templates", unitId],
+      });
+    },
+  });
+
+  return {
+    letterTemplatesResponse,
+    items: letterTemplatesResponse?.items ?? [],
+    count: letterTemplatesResponse?.count ?? 0,
+    isLoading,
+    isFetching,
+    isError,
+    refetch,
+    getTemplateByDetails,
+    isFetchingTemplate,
+    createLetterTemplate,
+    isCreating,
+    updateLetterTemplate,
+    isUpdating,
+    deleteLetterTemplate,
+    isDeleting,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/hooks/useOrganizationTypes.ts b/apps/edr-freight-web/backoffice/src/record-management/hooks/useOrganizationTypes.ts
new file mode 100644
index 000000000..415d1eba4
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/hooks/useOrganizationTypes.ts
@@ -0,0 +1,30 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  getOrganizationTypes,
+  OrgTypeResponse,
+} from "@/record-management/services/api/organizationTypesService";
+import Cookies from "js-cookie";
+
+export const useOrganizationTypes = () => {
+  const {
+    data: organizationTypesResponse,
+    isLoading,
+    isError,
+    refetch,
+  } = useQuery<OrgTypeResponse>({
+    queryKey: ["organizationTypes"],
+    queryFn: async () => {
+      const response = await getOrganizationTypes();
+      return response.data;
+    },
+    staleTime: 5 * 60 * 1000,
+    enabled: !!Cookies.get("tenant-key"), // Only run when tenantKey is present
+  });
+
+  return {
+    organizationTypesResponse,
+    isLoading,
+    isError,
+    refetch,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/hooks/useOrganizations.ts b/apps/edr-freight-web/backoffice/src/record-management/hooks/useOrganizations.ts
new file mode 100644
index 000000000..b4f40afeb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/hooks/useOrganizations.ts
@@ -0,0 +1,118 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  getOrganizations,
+  createOrganization,
+  OrgQueryParams,
+  OrganizationPayload,
+  getOrganizationById,
+  updateOrganization,
+} from "@/record-management/services/api/organizationsService";
+import { AxiosError } from "axios";
+import { OrganizationDto } from "@/record-management/dto/organization/organizationDto";
+
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+export const useOrganizations = (params?: OrgQueryParams) => {
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  const {
+    data: organizationsResponse,
+    isLoading,
+    isError,
+    refetch,
+  } = useQuery({
+    queryKey: ["organizations", params],
+    queryFn: async () => {
+      const { data } = await getOrganizations(params);
+      return {
+        count: data.count as number,
+        items: data.items as OrganizationDto[],
+      };
+    },
+    staleTime: 5 * 60 * 1000,
+    retry: false,
+  });
+
+  const {
+    mutate: createMutation,
+    isPending: isOrganizationCreating,
+    isError: organizationCreationError,
+  } = useMutation({
+    mutationFn: async (payload: OrganizationPayload) => {
+      const { data } = await createOrganization(payload);
+      return data;
+    },
+    onSuccess: () => {
+      toast.success("Organization created successfully!", {
+        description: "Redirecting...",
+      });
+
+      navigate("/organizations");
+      queryClient.invalidateQueries({ queryKey: ["organizations"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+  const {
+    mutate: editMutation,
+    isPending: isOrganizationEditing,
+    isError: organizationEditError,
+    status: organizationEditStatus,
+  } = useMutation({
+    mutationFn: async ({
+      id,
+      payload,
+    }: {
+      id: string;
+      payload: OrganizationPayload;
+    }) => {
+      const { data } = await updateOrganization(id, payload);
+      return data;
+    },
+    onSuccess: () => {
+      toast.success("Organization created successfully!", {
+        description: "Redirecting...",
+      });
+
+      navigate("/organizations");
+      queryClient.invalidateQueries({ queryKey: ["organizations"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const { mutate: getOrganization, isPending: isFetchingOrganization } =
+    useMutation({
+      mutationFn: async (id: string) => {
+        const { data } = await getOrganizationById(id);
+        return data;
+      },
+      onSuccess: (data) => {
+        return data;
+      },
+    });
+
+  return {
+    organizationsResponse,
+    isLoading,
+    isError,
+    refetch,
+    createOrganization: createMutation,
+    editOrganization: editMutation,
+    isCreating: isOrganizationCreating,
+    isEditing: isOrganizationEditing,
+    editStatus: organizationEditStatus,
+    organizationCreationError,
+    organizationEditError,
+    getOrganizationByDetails: getOrganization,
+    isFetchingOrganization,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/Approval/viewApprovalRecordPage.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/Approval/viewApprovalRecordPage.tsx
new file mode 100644
index 000000000..3a7de99d8
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/Approval/viewApprovalRecordPage.tsx
@@ -0,0 +1,25 @@
+import LetterViewer from "@/record-management/components/common/letterViewer";
+import { useLocation, useSearchParams } from "react-router-dom";
+
+const ViewApprovalDetail = () => {
+  const [searchParams] = useSearchParams();
+  const location = useLocation();
+  const pageIndex = searchParams.get("page") || "";
+  const backUrl = `/record-management/approval/?page=${pageIndex}`;
+  const approvalRow =
+    (location.state as { approvalRow?: any } | null)?.approvalRow ?? null;
+  return (
+    <>
+      <LetterViewer
+        backurl={backUrl}
+        type="approval"
+        shouldFetchInstance={false}
+        actions="ApproveRecordsActions"
+        actionRowData={approvalRow}
+      />
+      ;
+    </>
+  );
+};
+
+export default ViewApprovalDetail;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/Approval/viewProcessedApprovalDetailsPage.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/Approval/viewProcessedApprovalDetailsPage.tsx
new file mode 100644
index 000000000..6f806490f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/Approval/viewProcessedApprovalDetailsPage.tsx
@@ -0,0 +1,25 @@
+import LetterViewer from "@/record-management/components/common/letterViewer";
+import { useLocation, useSearchParams } from "react-router-dom";
+
+const ViewApprovalDetail = () => {
+  const [searchParams] = useSearchParams();
+  const location = useLocation();
+  const pageIndex = searchParams.get("page") || "";
+  const backUrl = `/record-management/approval/?page=${pageIndex}`;
+  const approvalRow =
+    (location.state as { approvalRow?: any } | null)?.approvalRow ?? null;
+  return (
+    <>
+      <LetterViewer
+        backurl={backUrl}
+        type="approval"
+        shouldFetchInstance={false}
+        actions="MyApprovaRecordsActions"
+        actionRowData={approvalRow}
+      />
+      ;
+    </>
+  );
+};
+
+export default ViewApprovalDetail;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/AuditLog/SmartOfficeAuditPage.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/AuditLog/SmartOfficeAuditPage.tsx
new file mode 100644
index 000000000..a297a9c8a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/AuditLog/SmartOfficeAuditPage.tsx
@@ -0,0 +1,25 @@
+import AuditLogPageShared from "@/shared/pages/audit-log/audit-log-page";
+import { useTranslation } from "react-i18next";
+
+type SmartOfficeAuditPageProps = {
+  unitId?: string;
+  organizationId?: string;
+};
+
+export default function SmartOfficeAuditPage({
+  unitId,
+  organizationId,
+}: SmartOfficeAuditPageProps) {
+  const { t } = useTranslation();
+
+  return (
+    <AuditLogPageShared
+      moduleKey="record"
+      unitId={unitId}
+      organizationId={organizationId}
+      title={t("auditLogShared.page.smartOfficeTitle")}
+      subtitle={t("auditLogShared.page.smartOfficeSubtitle")}
+      limit={10}
+    />
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/Incoming/viewIncomingLayout.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/Incoming/viewIncomingLayout.tsx
new file mode 100644
index 000000000..440bbd093
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/Incoming/viewIncomingLayout.tsx
@@ -0,0 +1,13 @@
+import { Label } from "@/shared/common/ui/label";
+import { Outlet } from "react-router-dom";
+
+const ViewIncomingLayout = () => {
+  return (
+    <>
+      <Label className="mb-4  text-xl">Incoming Record</Label>
+      <Outlet />
+    </>
+  );
+};
+
+export default ViewIncomingLayout;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/LetterTemplates/addLetterTemplatePage.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/LetterTemplates/addLetterTemplatePage.tsx
new file mode 100644
index 000000000..14c031bec
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/LetterTemplates/addLetterTemplatePage.tsx
@@ -0,0 +1,13 @@
+// import AddLetterTemplate from "@/components/Settings/letterTemplates/addLetterTemplate";
+
+const AddLetterTemplatePage = () => {
+  return( 
+  <div>
+    detail
+  </div>
+    // <AddLetterTemplate />;
+
+  )
+};
+
+export default AddLetterTemplatePage;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/LetterTemplates/editLetterTemplatePage.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/LetterTemplates/editLetterTemplatePage.tsx
new file mode 100644
index 000000000..543e352e7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/LetterTemplates/editLetterTemplatePage.tsx
@@ -0,0 +1,16 @@
+// import EditLetterTemplate from "@/components/Settings/letterTemplates/editLetterTemplate";
+import { useParams } from "react-router-dom";
+
+const EditLetterTemplatePage = () => {
+  const { id } = useParams<{ id: string }>();
+
+  return id && (
+  <div>
+    HHHH
+  </div>
+  // <EditLetterTemplate templateId={id} />
+
+  );
+};
+
+export default EditLetterTemplatePage;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/LetterTemplates/viewLetterTemplatePage.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/LetterTemplates/viewLetterTemplatePage.tsx
new file mode 100644
index 000000000..d70745fff
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/LetterTemplates/viewLetterTemplatePage.tsx
@@ -0,0 +1,13 @@
+// import ViewLetterTemplates from "@/components/Settings/letterTemplates/letterTemplates";
+import { useParams } from "react-router-dom";
+
+const ViewLetterTemplatesPage = () => {
+  const { id } = useParams<{ id: string }>();
+
+  return (
+    <div>He{id}</div>
+    // <ViewLetterTemplates  />;
+  );
+};
+
+export default ViewLetterTemplatesPage;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/LoginPage.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/LoginPage.tsx
new file mode 100644
index 000000000..1eb1d86ea
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/LoginPage.tsx
@@ -0,0 +1,5 @@
+import { Login } from "@/shared/components/login/Login";
+
+export const LoginPage = () => {
+  return <Login />;
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/ProfilePage/ChangePasswordPage.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/ProfilePage/ChangePasswordPage.tsx
new file mode 100644
index 000000000..11675d262
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/ProfilePage/ChangePasswordPage.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function ChangePasswordPage() {
+  return (
+    <div>ChangePasswordPage</div>
+  )
+}
+
+export default ChangePasswordPage
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/ProfilePage/ProfilePage.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/ProfilePage/ProfilePage.tsx
new file mode 100644
index 000000000..1114ecc2f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/ProfilePage/ProfilePage.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function ProfilePage() {
+  return (
+    <div>ProfilePage</div>
+  )
+}
+
+export default ProfilePage
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/AddIncomingRecord.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/AddIncomingRecord.tsx
new file mode 100644
index 000000000..872a45252
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/AddIncomingRecord.tsx
@@ -0,0 +1,45 @@
+import { useNavigate } from "react-router-dom";
+import { ChevronLeft } from "lucide-react";
+import AddIncomingRecordForm from "@/record-management/components/recordOfficer/incomingRecords/AddIncoming/AddIncomingRecordForm";
+import { t } from "i18next";
+import { Button } from "@/shared/common/ui/button";
+
+const AddIncomingRecordPage = () => {
+  const navigate = useNavigate();
+
+  const handleSuccess = () => {
+    navigate("/record-management/recordOfficer/incoming", {
+      state: { shouldRefetch: true },
+    });
+  };
+
+  const handleCancel = () => {
+    navigate("/record-management/recordOfficer/incoming", {
+      state: { shouldRefetch: true },
+    });
+  };
+  return (
+    <div className="container mx-auto space-y-6 py-6">
+      <div className="flex items-center">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={handleCancel}
+          className="flex items-center gap-2 border-primary-500 text-primary-600 hover:bg-primary-50 hover:text-primary-700 dark:border-primary-400 dark:text-primary-300 dark:hover:bg-primary-900/30 dark:hover:text-primary-200"
+        >
+          <ChevronLeft className="h-4 w-4" />
+          {t("common.back")}
+        </Button>
+      </div>
+
+      <div className="rounded-lg border border-gray-100 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900 dark:shadow-black/30">
+        <AddIncomingRecordForm
+          onSuccess={handleSuccess}
+          onCancel={handleCancel}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default AddIncomingRecordPage;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/EditIncomingRecord.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/EditIncomingRecord.tsx
new file mode 100644
index 000000000..d85ded909
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/EditIncomingRecord.tsx
@@ -0,0 +1,45 @@
+import { useNavigate } from "react-router-dom";
+import { ChevronLeft } from "lucide-react";
+import EditIncomingRecordForm from "@/record-management/components/recordOfficer/incomingRecords/editIncoming";
+import { t } from "i18next";
+import { Button } from "@/shared/common/ui/button";
+
+const EditIncomingRecordPage = () => {
+  const navigate = useNavigate();
+
+  const handleSuccess = () => {
+    navigate("/record-management/recordOfficer/incoming", {
+      state: { shouldRefetch: true },
+    });
+  };
+
+  const handleCancel = () => {
+    navigate("/record-management/recordOfficer/incoming", {
+      state: { shouldRefetch: true },
+    });
+  };
+
+  return (
+    <div className="container mx-auto space-y-6 py-6">
+      <div className="flex items-center">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={handleCancel}
+          className="flex items-center gap-2 border-primary-500 text-primary-600 hover:bg-primary-50 hover:text-primary-700 dark:border-primary-400 dark:text-primary-300 dark:hover:bg-primary-900/30 dark:hover:text-primary-200"
+        >
+          <ChevronLeft className="h-4 w-4" />
+          {t("common.back")}
+        </Button>
+      </div>
+      <div className="rounded-lg border border-gray-100 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900 dark:shadow-black/30">
+        <EditIncomingRecordForm
+          onSuccess={handleSuccess}
+          onCancel={handleCancel}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default EditIncomingRecordPage;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/RecordDetailPage.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/RecordDetailPage.tsx
new file mode 100644
index 000000000..a9e1f18ed
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/RecordDetailPage.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+
+import OutgoingViewRecord from "@/record-management/components/recordOfficer/outgoingRecords/outgoingview";
+
+const RecordDetailPage: React.FC = () => {
+  const { id: recordId } = useParams<{ id: string }>();
+  if (!recordId) {
+    return <div>Record ID not found.</div>;
+  }
+  return <OutgoingViewRecord recordId={recordId} />;
+};
+
+export default RecordDetailPage;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/convertRecordsPage.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/convertRecordsPage.tsx
new file mode 100644
index 000000000..0bbabbbf9
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/convertRecordsPage.tsx
@@ -0,0 +1,10 @@
+import ConvertRecord from "@/record-management/components/pendingRecords/convertRecords";
+import { useParams } from "react-router-dom";
+
+const ConvertRecordsPage = () => {
+  const { id } = useParams<{ id: string }>();
+
+  return <ConvertRecord recordId={id as string} />;
+};
+
+export default ConvertRecordsPage;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/dashboard.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/dashboard.tsx
new file mode 100644
index 000000000..fa9b2919c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/dashboard.tsx
@@ -0,0 +1,8 @@
+ import RecordOfficerDashboard from "@/record-management/components/dashboard/RecordOfficerDashboard";
+
+const RecordOfficerRecordsPage = () => {
+  return <RecordOfficerDashboard />;
+
+};
+
+export default RecordOfficerRecordsPage;
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/incomingRecords.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/incomingRecords.tsx
new file mode 100644
index 000000000..e9ff93cae
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/incomingRecords.tsx
@@ -0,0 +1,7 @@
+import IncomingRecordsDraft from "@/record-management/components/recordOfficer/incomingRecords/incomingRecordsDraft";
+
+const IncomingRecordsPage = () => {
+  return <IncomingRecordsDraft />;
+};
+
+export default IncomingRecordsPage;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/incomingRecordsHistory.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/incomingRecordsHistory.tsx
new file mode 100644
index 000000000..21f87ba91
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/incomingRecordsHistory.tsx
@@ -0,0 +1,7 @@
+import IncomingRecordshistory from "@/record-management/components/recordOfficer/incomingRecords/incomingRecordsHistory";
+
+const IncomingRecordsHistory = () => {
+  return <IncomingRecordshistory />;
+};
+
+export default IncomingRecordsHistory;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/nonSmartExternal.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/nonSmartExternal.tsx
new file mode 100644
index 000000000..7809b2f8e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/nonSmartExternal.tsx
@@ -0,0 +1,7 @@
+import IncomingRecordsExternal from "@/record-management/components/recordOfficer/incomingRecords/incomingExternalNonSmart";
+
+const IncomingnonSmartExternal = () => {
+  return <IncomingRecordsExternal />;
+};
+
+export default IncomingnonSmartExternal;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/outgoingRecords.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/outgoingRecords.tsx
new file mode 100644
index 000000000..771293ccb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/outgoingRecords.tsx
@@ -0,0 +1,7 @@
+import OutgoingRecords from "@/record-management/components/recordOfficer/outgoingRecords/outgoingRecords";
+
+const OutgoingRecordsPage = () => {
+  return <OutgoingRecords />;
+};
+
+export default OutgoingRecordsPage;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/pendingRecordsPage.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/pendingRecordsPage.tsx
new file mode 100644
index 000000000..1e7053c96
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/RecordOfficer/pendingRecordsPage.tsx
@@ -0,0 +1,7 @@
+import PendingRecords from "@/record-management/components/pendingRecords/pendingRecords";
+
+const PendingRecordsPage = () => {
+  return <PendingRecords />;
+};
+
+export default PendingRecordsPage;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/RecordPreviewPage.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/RecordPreviewPage.tsx
new file mode 100644
index 000000000..f3708a81f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/RecordPreviewPage.tsx
@@ -0,0 +1,905 @@
+import React, { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { Button } from "@/shared/common/ui/button";
+import { RotateCcw, FileText, Eye, Printer } from "lucide-react";
+import { toast } from "sonner";
+import { previewRecord } from "@/record-management/services/api/userRecordService";
+import { createLetterSchema } from "@/record-management/components/userRecords/common/formSchema";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import useSettings from "../components/hooks/useSettings";
+import PrintDialog from "../components/PrintDialog";
+
+interface PreviewPageState {
+  formData: any;
+  files: File[];
+  headers: any[];
+  footers: any[];
+  positionsData: any[];
+  employeesData: any[];
+}
+
+interface RecordPreviewModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  state?: PreviewPageState;
+  unitId: string;
+  embedded?: boolean;
+}
+
+const serializeReceiverGroup = (group: any) => ({
+  prefix: group.prefix ?? "",
+  suffix: group.suffix ?? "",
+  receivers:
+    group.receivers?.map((receiver: any) => ({
+      ...receiver,
+      name:
+        receiver.type === "non_smart"
+          ? typeof receiver.name === "string"
+            ? receiver.name
+            : receiver.name?.en || receiver.name?.am || ""
+          : receiver.name,
+    })) ?? [],
+});
+
+const RecordPreviewPage: React.FC<RecordPreviewModalProps> = ({
+  isOpen,
+  onClose,
+  state,
+  unitId,
+  embedded = false,
+}) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [pdfData, setPdfData] = useState<ArrayBuffer | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [pdfUrl, setPdfUrl] = useState<string | null>(null);
+  const [isPrintDialogOpen, setIsPrintDialogOpen] = useState(false);
+  const {
+    listAllDepartmentResponse,
+    currentEmployeesResponse,
+    allDepartmentUnits,
+  } = useSettings();
+  // Pull the unit's internal CC prefix/suffix from the unit configuration.
+  // These are the BE-configured defaults that should auto-apply to the
+  // trailing internal-CC group in the preview's ccList.
+
+  useEffect(() => {
+    if (!state) {
+      navigate(-1);
+      return;
+    }
+    generatePreview();
+  }, []);
+
+  useEffect(() => {
+    if (pdfData) {
+      const blob = new Blob([pdfData], { type: "application/pdf" });
+      const url = URL.createObjectURL(blob);
+      setPdfUrl(url);
+
+      return () => {
+        URL.revokeObjectURL(url);
+      };
+    }
+  }, [pdfData]);
+
+  const generatePreview = async () => {
+    if (!state) return;
+
+    try {
+      setIsLoading(true);
+      setError(null);
+      setPdfData(null);
+
+      const { formData } = state;
+      const selectedLanguage =
+        formData.preferredLanguage === "en" ? "en" : "am";
+      const getLocalizedValue = (
+        value?: string | { am?: string; en?: string } | null,
+        fallback = "",
+      ) => {
+        if (!value) return fallback;
+        if (typeof value === "string") return value || fallback;
+        if (selectedLanguage === "en") {
+          return value.en || value.am || fallback;
+        }
+        return value.am || value.en || fallback;
+      };
+
+      const getDisplayValue = (item: any) => {
+        if (!item) return "";
+        if (typeof item === "string") return item;
+        if (typeof item.name === "string") return item.name;
+        return (
+          getLocalizedValue(item.name as { am?: string; en?: string }) ||
+          item.label ||
+          item.id ||
+          ""
+        );
+      };
+
+      const dedupeStrings = (items: Array<string | null | undefined>) =>
+        Array.from(new Set(items.filter(Boolean) as string[]));
+
+      const receiversList =
+        formData.ReceiversList || formData.ReceiverList || [];
+      const ccList = formData.ccList || [];
+
+      // ============ FIX 1: Extract forYourReferenceList ============
+      const forYourReferenceList = formData.forYourReferenceList || [];
+
+      const groupedNonSmartReceivers: string[] =
+        formData.groupedItems?.flatMap((group: any) => group.values || []) ||
+        [];
+      const groupedNonSmartCCReceivers: string[] =
+        formData.groupedCCItems?.flatMap((group: any) => group.values || []) ||
+        [];
+      const groupedTreeReceivers: any[] =
+        formData.groupedTreeItems?.flatMap(
+          (group: any) => group.values || [],
+        ) || [];
+      const groupedCCTreeReceivers: any[] =
+        formData.groupedCCTreeItems?.flatMap(
+          (group: any) => group.values || [],
+        ) || [];
+
+      // ============ FIX 2: Extract FYR units and non-smart receivers ============
+      const fyrListUnits =
+        forYourReferenceList
+          ?.flatMap((group: any) => group.receivers || [])
+          ?.filter(
+            (receiver: any) => receiver.type === "unit" && receiver.unitId,
+          ) || [];
+      const fyrListNonSmart =
+        forYourReferenceList
+          ?.flatMap((group: any) => group.receivers || [])
+          ?.filter(
+            (receiver: any) => receiver.type === "non_smart" && receiver.name,
+          )
+          ?.map((receiver: any) =>
+            typeof receiver.name === "string"
+              ? receiver.name
+              : getLocalizedValue(receiver.name),
+          ) || [];
+
+      const receiversListUnits =
+        receiversList
+          ?.flatMap((group: any) => group.receivers || [])
+          ?.filter(
+            (receiver: any) => receiver.type === "unit" && receiver.unitId,
+          ) || [];
+      const receiversListNonSmart =
+        receiversList
+          ?.flatMap((group: any) => group.receivers || [])
+          ?.filter(
+            (receiver: any) => receiver.type === "non_smart" && receiver.name,
+          )
+          ?.map((receiver: any) =>
+            typeof receiver.name === "string"
+              ? receiver.name
+              : getLocalizedValue(receiver.name),
+          ) || [];
+      const ccListUnits =
+        ccList
+          ?.flatMap((group: any) => group.receivers || [])
+          ?.filter(
+            (receiver: any) => receiver.type === "unit" && receiver.unitId,
+          ) || [];
+      const ccListNonSmart =
+        ccList
+          ?.flatMap((group: any) => group.receivers || [])
+          ?.filter(
+            (receiver: any) => receiver.type === "non_smart" && receiver.name,
+          )
+          ?.map((receiver: any) =>
+            typeof receiver.name === "string"
+              ? receiver.name
+              : getLocalizedValue(receiver.name),
+          ) || [];
+
+      // Build internal CC units
+      const internalCCUnits =
+        (formData.internalCC ?? [])
+          .map((id: string) =>
+            allDepartmentUnits?.find((u: any) => u.id === id),
+          )
+          .filter((u: any) => u != null) ?? [];
+      const externalCCUnits = formData.externalCC ?? [];
+
+      const ccEmployeesResolved =
+        (formData.ccEmployees ?? [])
+          .map((employeePositionId: string) =>
+            currentEmployeesResponse?.items?.find(
+              (e: any) => e.employeePositions?.[0]?.id === employeePositionId,
+            ),
+          )
+          .filter((e: any) => e != null) ?? [];
+      const forYourReferenceUnits =
+        (formData.forYourReference ?? [])
+          .map((id: string) =>
+            allDepartmentUnits?.find((u: any) => u.id === id),
+          )
+          .filter((u: any) => u != null) ?? [];
+
+      // ============ FIX 3: Build ccTyped array including FYR ============
+      const ccTyped = [
+        ...internalCCUnits.map((c: any) => ({
+          unitId: c.unitId,
+          positionId: c.id,
+          type: "internal" as const,
+        })),
+        ...externalCCUnits.map((c: any) => ({
+          unitId: c.id,
+          type: "external" as const,
+        })),
+        ...ccEmployeesResolved.map((c: any) => ({
+          positionId: c.employeePositions?.[0]?.position?.id,
+          employeePositionId: c.employeePositions?.[0]?.id,
+          type: "internal" as const,
+        })),
+        ...forYourReferenceUnits.map((c: any) => ({
+          unitId: c.unitId,
+          positionId: c.id,
+          type: "internal" as const,
+          isForYourReference: true,
+        })),
+      ];
+
+      const forYourReferenceNames =
+        formData.forYourReference?.map((positionId: string) => {
+          const position = listAllDepartmentResponse?.find(
+            (pos: any) => pos.id === positionId || pos.key === positionId,
+          );
+          return getLocalizedValue(position?.name, positionId);
+        }) ?? [];
+
+      // ============ FIX 4: Build internal CC receivers including FYR from forYourReferenceList ============
+      const internalCCReceiversForList: Array<{
+        unitId?: string;
+        positionId?: string;
+        employeePositionId?: string;
+        name: string;
+        type: "internal";
+        isForYourReference?: boolean;
+      }> = [
+        ...internalCCUnits.map(
+          (c: {
+            id?: string;
+            unitId?: string;
+            name?: { am?: string; en?: string };
+          }) => ({
+            unitId: c.unitId,
+            positionId: c.id,
+            name: getLocalizedValue(c.name, c.id || ""),
+            type: "internal" as const,
+          }),
+        ),
+        ...ccEmployeesResolved.map(
+          (c: {
+            user?: { name?: { am?: string; en?: string } };
+            employeePositions?: Array<{
+              id?: string;
+              position?: {
+                id?: string;
+                name?: { am?: string; en?: string };
+              };
+            }>;
+          }) => ({
+            positionId: c.employeePositions?.[0]?.position?.id,
+            employeePositionId: c.employeePositions?.[0]?.id,
+            name:
+              getLocalizedValue(c.user?.name) ||
+              getLocalizedValue(c.employeePositions?.[0]?.position?.name) ||
+              "",
+            type: "internal" as const,
+          }),
+        ),
+        ...forYourReferenceUnits.map(
+          (c: {
+            id?: string;
+            unitId?: string;
+            name?: { am?: string; en?: string };
+          }) => ({
+            unitId: c.unitId,
+            positionId: c.id,
+            name: getLocalizedValue(c.name, c.id || ""),
+            type: "internal" as const,
+            isForYourReference: true,
+          }),
+        ),
+        // ============ FIX 5: Also include FYR from forYourReferenceList groups ============
+        ...fyrListUnits.map((c: any) => ({
+          unitId: c.unitId,
+          name: getLocalizedValue(c.name, c.unitId || ""),
+          type: "internal" as const,
+          isForYourReference: true,
+        })),
+      ];
+
+      type MirroredGroup = {
+        prefix: string;
+        suffix: string;
+        receivers: unknown[];
+      };
+
+      // ============ FIX 6: Mirror ccList including forYourReferenceList as separate groups ============
+      const baseCcListMirrored: MirroredGroup[] = (formData.ccList ?? []).map(
+        (group: {
+          prefix?: string;
+          suffix?: string;
+          receivers?: unknown[];
+        }) => ({
+          prefix: group.prefix ?? "",
+          suffix: group.suffix ?? "",
+          receivers:
+            group?.receivers?.map((r: any) => {
+              if (r.type === "non_smart") {
+                return { ...r };
+              }
+              return {
+                ...r,
+                name: getLocalizedValue(r.name),
+              };
+            }) ?? [],
+        }),
+      );
+
+      // ============ FIX 7: Add forYourReferenceList as mirrored groups ============
+      const fyrListMirrored: MirroredGroup[] = forYourReferenceList.map(
+        (group: { prefix?: string; suffix?: string; receivers?: any[] }) => ({
+          prefix: group.prefix ?? "",
+          suffix: group.suffix ?? "",
+          receivers:
+            group?.receivers?.map((r: any) => {
+              if (r.type === "non_smart") {
+                return {
+                  ...r,
+                  name:
+                    typeof r.name === "string"
+                      ? r.name
+                      : getLocalizedValue(r.name),
+                  isForYourReference: true,
+                };
+              }
+              return {
+                ...r,
+                name: getLocalizedValue(r.name),
+                isForYourReference: true,
+              };
+            }) ?? [],
+        }),
+      );
+      const internalCcGroupPrefix = "";
+      const internalCcGroupSuffix = "";
+
+      // ============ FIX 8: Combine all CC groups (existing CC list + FYR list + internal CC) ============
+      const ccListMirrored: MirroredGroup[] = [
+        ...baseCcListMirrored,
+        ...fyrListMirrored, // Add FYR groups
+        ...(internalCCReceiversForList.length > 0
+          ? [
+              {
+                prefix: internalCcGroupPrefix,
+                suffix: internalCcGroupSuffix,
+                receivers: internalCCReceiversForList,
+              },
+            ]
+          : []),
+      ];
+
+      // Coerce null values to undefined
+      const NULLABLE_STRING_FIELDS = [
+        "prefix",
+        "suffix",
+        "ccPrefix",
+        "ccSuffix",
+        "recordTemplateId",
+        "inReplyToIncomingInstanceId",
+        "personalRemark",
+        "positionPrefixId",
+        "letterName",
+        "subject",
+        "body",
+        "sincerelyText",
+        "headerId",
+        "footerId",
+        "initiatedAs",
+      ] as const;
+      const sanitizedFormData: Record<string, unknown> = { ...formData };
+      for (const key of NULLABLE_STRING_FIELDS) {
+        if (sanitizedFormData[key] === null) {
+          sanitizedFormData[key] = "";
+        }
+      }
+
+      type ReceiverLike = {
+        unitId?: string | null;
+        name?: string | { am?: string; en?: string } | null;
+        type?: string;
+        [k: string]: unknown;
+      };
+      type GroupLike = {
+        prefix?: string | null;
+        suffix?: string | null;
+        receivers?: ReceiverLike[] | null;
+        [k: string]: unknown;
+      };
+      const sanitizeReceiver = (r: ReceiverLike) => {
+        return {
+          ...r,
+          unitId: r.unitId ?? undefined,
+          name:
+            (typeof r.name === "string"
+              ? r.name
+              : getLocalizedValue(
+                  r.name as { am?: string; en?: string } | null,
+                )) || undefined,
+          type:
+            r.type === "unit" || r.type === "non_smart"
+              ? r.type
+              : r.unitId
+                ? "unit"
+                : "non_smart",
+        };
+      };
+      const sanitizeGroups = (groups: unknown): GroupLike[] => {
+        if (!Array.isArray(groups)) return [];
+        return groups.map((g: GroupLike) => ({
+          ...g,
+          prefix: g?.prefix ?? "",
+          suffix: g?.suffix ?? "",
+          receivers: Array.isArray(g?.receivers)
+            ? g.receivers.map(sanitizeReceiver)
+            : [],
+        }));
+      };
+      sanitizedFormData.ccList = sanitizeGroups(ccListMirrored);
+      sanitizedFormData.ReceiversList = sanitizeGroups(
+        sanitizedFormData.ReceiversList,
+      );
+      sanitizedFormData.ReceiverList = sanitizeGroups(
+        sanitizedFormData.ReceiverList,
+      );
+
+      // Validate form data
+      try {
+        createLetterSchema.parse(sanitizedFormData);
+      } catch (validationError: unknown) {
+        const zErr = validationError as {
+          errors?: Array<{ message?: string; path?: Array<string | number> }>;
+        };
+        const firstIssue = zErr.errors?.[0];
+        const path = firstIssue?.path?.join(".") || "(unknown field)";
+        const errorMessage = firstIssue?.message
+          ? `${path}: ${firstIssue.message}`
+          : t("preview.validationError");
+        console.error("[RecordPreview] schema validation failed", {
+          path,
+          message: firstIssue?.message,
+          allErrors: zErr.errors,
+        });
+        setError(errorMessage);
+        toast.error(errorMessage);
+        setIsLoading(false);
+        return;
+      }
+
+      // ============ FIX 9: Build payload including forYourReferenceList ============
+      const payload = {
+        unitId: unitId,
+        collaborators:
+          formData.collaborators?.map((employeeId: string) => {
+            const employee = currentEmployeesResponse?.items.find(
+              (emp: any) => emp.employeePositions?.[0]?.id === employeeId,
+            );
+            return {
+              name: getLocalizedValue(employee?.user?.name, employeeId),
+            };
+          }) || [],
+        referenceNumber: formData.referenceNumber || undefined,
+        preferredLanguage: formData.preferredLanguage || "am",
+        receiverList: receiversList.map(serializeReceiverGroup),
+        ccList: ccListMirrored,
+        // ============ FIX 10: Include forYourReferenceList in payload ============
+        forYourReferenceList: forYourReferenceList.map(serializeReceiverGroup),
+
+        content: {
+          isWithDelegateSignature: formData.isWithTeamSignature || false,
+          body: formData.body || "",
+          date: "",
+          internalCC: [
+            ...(formData.internalCC?.map((positionId: string) => {
+              const position = listAllDepartmentResponse?.find(
+                (pos: any) => pos.id === positionId || pos.key === positionId,
+              );
+              const positionName = getLocalizedValue(
+                position?.name,
+                positionId,
+              );
+              return positionName;
+            }) || []),
+            ...(formData.ccEmployees?.map((employeePositionId: string) => {
+              const employee = currentEmployeesResponse?.items.find(
+                (emp: any) =>
+                  emp.employeePositions?.[0]?.id === employeePositionId,
+              );
+              const employeeName = getLocalizedValue(
+                employee?.user?.name,
+                employeePositionId,
+              );
+              return employeeName;
+            }) || []),
+            ...forYourReferenceNames,
+            // ============ FIX 11: Include FYR from forYourReferenceList in internalCC ============
+            ...fyrListNonSmart,
+            ...fyrListUnits.map((c: any) =>
+              getLocalizedValue(c.name, c.unitId),
+            ),
+          ],
+          cc: ccTyped,
+          ccList: ccListMirrored,
+          nonSmartOfficeReceiverCCs: formData.nonSmartOfficeReceiverCCs ?? [],
+          // ============ FIX 12: Include FYR non-smart receivers ============
+          nonSmartOfficeReceiverFYRs: fyrListNonSmart,
+          externalCC: dedupeStrings([
+            ...(ccListUnits?.map(
+              (item: { name?: string; unitId?: string }) =>
+                getDisplayValue(item.name) || item.unitId || "Unknown Unit",
+            ) || []),
+            ...(formData.externalCC?.map((item: unknown) =>
+              getDisplayValue(item),
+            ) || []),
+            ...(groupedCCTreeReceivers?.map((item: unknown) =>
+              getDisplayValue(item),
+            ) || []),
+            ...(formData.nonSmartOfficeReceiverCCs || []),
+            ...ccListNonSmart,
+            ...groupedNonSmartCCReceivers,
+          ]),
+
+          prefixCC:
+            formData.ccPrefix ||
+            formData.ccList?.[0]?.prefix ||
+            formData.groupedCCTreeItems?.[0]?.prefix ||
+            formData.groupedCCItems?.[0]?.prefix ||
+            "",
+          suffixCC:
+            formData.ccSuffix ||
+            formData.ccList?.[0]?.suffix ||
+            formData.groupedCCTreeItems?.[0]?.suffix ||
+            formData.groupedCCItems?.[0]?.suffix ||
+            "",
+          from:
+            formData.collaborators?.map((employeeId: string) => {
+              const employee = currentEmployeesResponse?.items.find(
+                (emp: any) => emp.employeePositions?.[0]?.id === employeeId,
+              );
+              return getLocalizedValue(employee?.user?.name, employeeId);
+            }) || [],
+          subject: formData.subject || "",
+          sincerelyText: formData.sincerelyText || t("msg.sincerely"),
+          to:
+            formData.recordType === "external"
+              ? dedupeStrings([
+                  ...(receiversListUnits?.map((item: any) => {
+                    return (
+                      getLocalizedValue(item.name) ||
+                      item.unitId ||
+                      "Unknown Unit"
+                    );
+                  }) || []),
+                  ...(formData.receivingUnitIds?.map((item: any) => {
+                    if (typeof item === "string") {
+                      return item;
+                    }
+                    const unitName =
+                      getLocalizedValue(item.name) ||
+                      item.name ||
+                      item.label ||
+                      item.id ||
+                      "Unknown Unit";
+                    return unitName;
+                  }) || []),
+                  ...(groupedTreeReceivers?.map((item: any) => {
+                    if (typeof item === "string") {
+                      return item;
+                    }
+                    return (
+                      getLocalizedValue(item.name) ||
+                      item.name ||
+                      item.label ||
+                      item.id ||
+                      "Unknown Unit"
+                    );
+                  }) || []),
+                  ...(formData.nonSmartOfficeReceivers || []),
+                  ...receiversListNonSmart,
+                  ...groupedNonSmartReceivers,
+                ])
+              : [
+                  ...(formData.toPositions?.map((positionId: string) => {
+                    const position = listAllDepartmentResponse?.find(
+                      (pos: any) =>
+                        pos.id === positionId || pos.key === positionId,
+                    );
+                    const positionName = getLocalizedValue(
+                      position?.name,
+                      positionId,
+                    );
+                    return positionName;
+                  }) || []),
+                  ...(formData.toEmployees?.map((employeeId: string) => {
+                    const employee = currentEmployeesResponse?.items.find(
+                      (emp: any) =>
+                        emp.employeePositions?.[0]?.id === employeeId,
+                    );
+                    const employeeName = getLocalizedValue(
+                      employee?.user?.name,
+                      employeeId,
+                    );
+                    return employeeName;
+                  }) || []),
+                ],
+          prefix:
+            formData.prefix ||
+            formData.ReceiversList?.[0]?.prefix ||
+            formData.ReceiverList?.[0]?.prefix ||
+            formData.groupedTreeItems?.[0]?.prefix ||
+            formData.groupedItems?.[0]?.prefix ||
+            "",
+          suffix:
+            formData.suffix ||
+            formData.ReceiversList?.[0]?.suffix ||
+            formData.ReceiverList?.[0]?.suffix ||
+            formData.groupedTreeItems?.[0]?.suffix ||
+            formData.groupedItems?.[0]?.suffix ||
+            "",
+          signatures: [],
+          stamps: [],
+          attachments: [],
+        },
+        header: formData.headerId
+          ? (() => {
+              const selectedHeader = state.headers?.find(
+                (h: any) => h.id === formData.headerId,
+              );
+              return selectedHeader
+                ? {
+                    size: selectedHeader.fileInfo?.size || 28842,
+                    bucket: "headers/",
+                    fileName:
+                      selectedHeader.fileInfo?.fileName ||
+                      `headers/${formData.headerId}`,
+                    contentType:
+                      selectedHeader.fileInfo?.contentType || "image/jpeg",
+                    originalname:
+                      selectedHeader.fileInfo?.originalname || "header.jpg",
+                  }
+                : null;
+            })()
+          : null,
+        footer: formData.footerId
+          ? (() => {
+              const selectedFooter = state.footers?.find(
+                (f: any) => f.id === formData.footerId,
+              );
+              return selectedFooter
+                ? {
+                    size: selectedFooter.fileInfo?.size || 24634,
+                    bucket: "footers/",
+                    fileName:
+                      selectedFooter.fileInfo?.fileName ||
+                      `footers/${formData.footerId}`,
+                    contentType:
+                      selectedFooter.fileInfo?.contentType || "image/jpeg",
+                    originalname:
+                      selectedFooter.fileInfo?.originalname || "footer.jpg",
+                  }
+                : null;
+            })()
+          : null,
+        recordType: formData.recordType || "internal",
+        stamps: [],
+      };
+
+      const response = await previewRecord(payload);
+      setPdfData(response);
+    } catch (err: unknown) {
+      const errorMessage = t("preview.error");
+      setError(errorMessage);
+      toast.error(errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (!state) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-center">
+          <p className="text-muted-foreground">{t("preview.noData")}</p>
+          <Button onClick={() => navigate(-1)} className="mt-4">
+            {t("common.back")}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  const previewContent = (
+    <>
+      {/* Enhanced Header */}
+      <DialogHeader className="flex flex-col sm:flex-row items-start sm:items-center justify-between p-4 sm:p-6 border-b border-slate-200 bg-gradient-to-r from-primary-600 to-primary-700 text-white">
+        <div className="flex items-center gap-3 mb-3 sm:mb-0">
+          <div className="p-2 rounded-lg bg-white/10 backdrop-blur-sm">
+            <FileText className="w-5 h-5 sm:w-6 sm:h-6" />
+          </div>
+          <div className="min-w-0 flex-1">
+            {embedded ? (
+              <h2 className="text-lg sm:text-xl font-semibold">
+                {t("preview.title")}
+              </h2>
+            ) : (
+              <DialogTitle className="text-lg sm:text-xl font-semibold">
+                {t("preview.title")}
+              </DialogTitle>
+            )}
+            <p className="text-primary-100 text-xs sm:text-sm mt-1 truncate">
+              {state?.formData?.subject || "Document Preview"}
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 w-full sm:w-auto justify-end">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={generatePreview}
+            disabled={isLoading}
+            className="text-white hover:bg-white/10 border border-white/20 text-xs sm:text-sm px-2 sm:px-3"
+          >
+            <RotateCcw
+              className={`w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2 ${
+                isLoading ? "animate-spin" : ""
+              }`}
+            />
+            <span className="hidden sm:inline">Refresh</span>
+          </Button>
+        </div>
+      </DialogHeader>
+      {/* Enhanced Content Area */}
+      <div className="flex-1 overflow-hidden bg-slate-100 relative">
+        {error && (
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="bg-white rounded-xl shadow-lg p-8 max-w-md mx-4 border border-red-200">
+              <div className="text-center">
+                <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                  <RotateCcw className="w-8 h-8 text-red-600" />
+                </div>
+                <h3 className="text-lg font-semibold text-slate-800 mb-2">
+                  {t("preview.failed")}
+                </h3>
+                <p className="text-sm text-slate-600 mb-6">{error}</p>
+                <Button
+                  onClick={generatePreview}
+                  className="bg-primary-600 hover:bg-primary-700 text-white"
+                >
+                  <RotateCcw className="w-4 h-4 mr-2" />
+                  {t("preview.retry")}
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {pdfUrl && !isLoading && !error && (
+          <div className="w-full h-full p-4">
+            <div className="w-full h-full bg-white rounded-lg shadow-lg border border-slate-200 overflow-hidden">
+              <iframe
+                src={pdfUrl}
+                className="w-full h-full"
+                title={t("preview.title")}
+                style={{ border: "none" }}
+              />
+            </div>
+          </div>
+        )}
+
+        {isLoading && (
+          <div className="absolute inset-0 bg-white/80 backdrop-blur-sm flex items-center justify-center z-10">
+            <div className="bg-white rounded-xl shadow-lg p-8 flex flex-col items-center gap-4 border border-slate-200">
+              <div className="relative">
+                <div className="w-16 h-16 border-4 border-primary-200 border-t-primary-600 rounded-full animate-spin"></div>
+                <Eye className="w-6 h-6 text-primary-600 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" />
+              </div>
+              <div className="text-center">
+                <p className="text-lg font-semibold text-slate-800">
+                  {t("preview.generating")}
+                </p>
+                <p className="text-sm text-slate-600 mt-1">
+                  Please wait while we prepare your document...
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+      {/* Enhanced Footer */}
+      <div className="border-t border-slate-200 bg-white px-4 sm:px-6 py-3 sm:py-4">
+        <div className="flex flex-col sm:flex-row items-center justify-between gap-3 sm:gap-0">
+          <div className="flex items-center gap-2 text-xs sm:text-sm text-slate-600">
+            <div
+              className={`w-2 h-2 rounded-full ${
+                isLoading
+                  ? "bg-yellow-500 animate-pulse"
+                  : error
+                    ? "bg-red-500"
+                    : pdfUrl
+                      ? "bg-primary-500"
+                      : "bg-slate-400"
+              }`}
+            ></div>
+            <span>
+              {isLoading
+                ? "Generating preview..."
+                : error
+                  ? "Preview failed"
+                  : pdfUrl
+                    ? "Preview ready"
+                    : "Preparing preview..."}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              onClick={() => setIsPrintDialogOpen(true)}
+              disabled={!pdfUrl || isLoading}
+              className="border-slate-300 hover:bg-slate-50 text-xs sm:text-sm px-3 sm:px-4"
+            >
+              <Printer className="w-4 h-4 mr-2" />
+              {t("print.print") || "Print"}
+            </Button>
+            <Button
+              variant="outline"
+              onClick={onClose}
+              className="border-slate-300 hover:bg-slate-50 text-xs sm:text-sm px-3 sm:px-4"
+            >
+              Close Preview
+            </Button>
+          </div>
+        </div>
+      </div>
+      <PrintDialog
+        isOpen={isPrintDialogOpen}
+        onClose={() => setIsPrintDialogOpen(false)}
+        pdfUrl={pdfUrl || ""}
+        attachments={[]}
+      />
+    </>
+  );
+
+  if (embedded) {
+    return (
+      <div className="h-full w-full flex flex-col bg-gradient-to-br from-slate-50 to-white overflow-hidden">
+        {previewContent}
+      </div>
+    );
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-[96vw] w-[96vw] h-[96vh] sm:max-w-[92vw] sm:w-[92vw] sm:h-[92vh] flex flex-col p-0 bg-gradient-to-br from-slate-50 to-white shadow-2xl border-0 rounded-xl overflow-hidden">
+        {previewContent}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default RecordPreviewPage;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/Settings/recordOfficerSettingsPage.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/Settings/recordOfficerSettingsPage.tsx
new file mode 100644
index 000000000..14ff92d5d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/Settings/recordOfficerSettingsPage.tsx
@@ -0,0 +1,7 @@
+import RecordOfficerSettings from "@/record-management/components/Settings/recordOfficerSettings";
+
+const RecordOfficerSettingsPage = () => {
+  return <RecordOfficerSettings />;
+};
+
+export default RecordOfficerSettingsPage;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/User/Delegation/addDelegationPage.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/User/Delegation/addDelegationPage.tsx
new file mode 100644
index 000000000..b0fc18b51
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/User/Delegation/addDelegationPage.tsx
@@ -0,0 +1,92 @@
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+
+import DelegationForm from "@/record-management/components/delegation/delegationForm";
+import { delegationFormSchema } from "../../../components/delegation/delegationFormSchema";
+
+import { useLocation, useNavigate } from "react-router-dom";
+import { useDelegations } from "@/record-management/components/hooks/useDelegations";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import useSettings from "@/record-management/components/hooks/useSettings";
+
+type DelegationFormValues = z.infer<typeof delegationFormSchema>;
+
+const AddDelegationPage = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { delegatePosition } = useDelegations();
+  const { t } = useTranslation();
+  const routeState = (location.state as {
+    employeeId?: string;
+    positionId?: string;
+  } | null) ?? { employeeId: "", positionId: "" };
+  const form = useForm<DelegationFormValues>({
+    resolver: zodResolver(delegationFormSchema),
+    defaultValues: {
+      positionId: routeState.positionId || "",
+      employeeId: "",
+      startDate: new Date(),
+      endDate: new Date(),
+      internalCC: [],
+      signatureId: "",
+      stampId: "",
+      language: "am",
+      locale: "am",
+    },
+  });
+  const { allDepartmentUnits } = useSettings();
+  const handleCreateDelegation = (values: DelegationFormValues) => {
+    const departmentUnitByValue = new Map(
+      allDepartmentUnits.map((unit) => [
+        unit.id && unit.id.trim() !== "" ? unit.id : unit.key || "",
+        unit,
+      ]),
+    );
+    const internalCCValues =
+      values.internalCC
+        ?.map((selectedId) => departmentUnitByValue.get(selectedId))
+        .filter((unit): unit is (typeof allDepartmentUnits)[number] =>
+          Boolean(unit),
+        ) ?? [];
+    delegatePosition(
+      {
+        delegationDto: {
+          employeePositionId: values.employeeId as string,
+          from: new Date(values.startDate).toISOString() as unknown as Date,
+          to: new Date(values.endDate).toISOString() as unknown as Date,
+        },
+        stampId: values.stampId || "",
+        signatureId: values.signatureId || "",
+        locale: values.language ?? values.locale ?? "am",
+        // Reverse so the BE's render-time reversal lands back on selection
+        // order — mirrors the workaround applied in add/edit user records.
+        cc: [
+          ...(internalCCValues?.slice().map((c) => ({
+            unitId: c.unitId!,
+            positionId: c.id!,
+            type: "internal" as const,
+          })) ?? []),
+        ],
+      },
+      {
+        onSuccess: () => {
+          toast.success(t("delegation.createdSuccess"));
+          navigate("/record-management/delegation");
+        },
+      },
+    );
+  };
+  return (
+    <DelegationForm
+      formInstance={form}
+      onSubmit={handleCreateDelegation}
+      isEditing={false}
+      selectedPositionId={routeState.positionId || ""}
+      selectedEmployeeId={routeState.employeeId || ""}
+    />
+  );
+};
+
+export default AddDelegationPage;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/User/Delegation/delegationRecordsPage.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/User/Delegation/delegationRecordsPage.tsx
new file mode 100644
index 000000000..2d9b1e96a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/User/Delegation/delegationRecordsPage.tsx
@@ -0,0 +1,12 @@
+import Delegations from "@/record-management/components/delegation/delegations";
+import React from "react";
+
+const DelegationRecordsPage: React.FC = () => {
+  return (
+    <div className="container mx-auto py-6 space-y-6">
+      <Delegations />
+    </div>
+  );
+};
+
+export default DelegationRecordsPage;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/User/Delegation/editDelegationPage.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/User/Delegation/editDelegationPage.tsx
new file mode 100644
index 000000000..ab6127cef
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/User/Delegation/editDelegationPage.tsx
@@ -0,0 +1,7 @@
+import EditDelegation from "@/record-management/components/delegation/editDelegation";
+
+const EditDelegationPage = () => {
+  return <EditDelegation />;
+};
+
+export default EditDelegationPage;
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/User/ViewLetter.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/User/ViewLetter.tsx
new file mode 100644
index 000000000..7a1912c30
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/User/ViewLetter.tsx
@@ -0,0 +1,16 @@
+import { Label } from "@/shared/common/ui/label";
+
+import { useParams } from "react-router-dom";
+
+const ViewRecordDetailsPage = () => {
+  const { id } = useParams<{ id: string }>();
+
+  return (
+    <div>
+      <Label className="mb-4  text-xl">Records Letter</Label>
+      {/* <LetterViewer recordId={id || ""}  /> */}
+    </div>
+  );
+};
+
+export default ViewRecordDetailsPage;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/User/addUserRecordPage.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/User/addUserRecordPage.tsx
new file mode 100644
index 000000000..dfc2057aa
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/User/addUserRecordPage.tsx
@@ -0,0 +1,10 @@
+import { AddUserRecords } from "@/record-management/components/userRecords/addUserRecord/addUserRecord";
+import { useParams } from "react-router-dom";
+
+const AddUserRecordsPage = () => {
+  const { id } = useParams<{ id?: string }>();
+
+  return <AddUserRecords id={id} />;
+};
+
+export default AddUserRecordsPage;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/User/approveRecords.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/User/approveRecords.tsx
new file mode 100644
index 000000000..4b42b2d39
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/User/approveRecords.tsx
@@ -0,0 +1,7 @@
+import ApproveRecords from "@/record-management/components/Approval/ApproveRecords/approveRecords";
+
+const ApproveRecordsPage = () => {
+  return <ApproveRecords />;
+};
+
+export default ApproveRecordsPage;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/User/ccIncomingRecords.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/User/ccIncomingRecords.tsx
new file mode 100644
index 000000000..9673b0a74
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/User/ccIncomingRecords.tsx
@@ -0,0 +1,7 @@
+import CCIncomingRecords from "@/record-management/components/userIncoming/ccIncomingRecords/CCIncomingRecords";
+
+const CCIncomingRecordsPage = () => {
+  return <CCIncomingRecords />;
+};
+
+export default CCIncomingRecordsPage;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/User/dashboard.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/User/dashboard.tsx
new file mode 100644
index 000000000..5eb8dd7f9
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/User/dashboard.tsx
@@ -0,0 +1,11 @@
+import { UserDashboard } from "@/record-management/components/dashboard/userDashboard";
+const Dashboard = () => {
+  return (
+    // <div>
+    //   Dashboard
+    // </div>
+    <UserDashboard />
+  );
+};
+
+export default Dashboard;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/User/editUserRecordPage.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/User/editUserRecordPage.tsx
new file mode 100644
index 000000000..75e0d3f01
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/User/editUserRecordPage.tsx
@@ -0,0 +1,7 @@
+import { EditUserRecords } from "@/record-management/components/userRecords/editUserRecord/editUserRecord";
+
+const EditUserRecordsPage = () => {
+  return <EditUserRecords />;
+};
+
+export default EditUserRecordsPage;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/User/externalIncomingRecords.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/User/externalIncomingRecords.tsx
new file mode 100644
index 000000000..c680c2fed
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/User/externalIncomingRecords.tsx
@@ -0,0 +1,23 @@
+import ExternalIncomingRecords from "@/record-management/components/userIncoming/externalIncomingRecords/externalIncomingRecords";
+import ExternalIncomingRecordsV2 from "@/record-management/components/userIncoming/externalIncomingRecords/externalIncomingRecordsV2";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { useUnitConfiguration } from "@/shared/hooks/useUnitConfiguration";
+
+const ExternalIncomingRecordsPage = () => {
+  const { userDetails } = useAuthUser();
+
+  const unitId = userDetails?.employee?.[0]?.unitId ?? "";
+  const { data: unitConfigData } = useUnitConfiguration(unitId, {
+    enabled: !!unitId,
+  });
+  const canIncomingAssignmentsBeSeparated =
+    unitConfigData?.data?.items?.[0]?.canIncomingAssignmentsBeSeparated;
+
+  return canIncomingAssignmentsBeSeparated ? (
+    <ExternalIncomingRecords />
+  ) : (
+    <ExternalIncomingRecordsV2 />
+  );
+};
+
+export default ExternalIncomingRecordsPage;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/User/forYourReferenceIncomingRecords.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/User/forYourReferenceIncomingRecords.tsx
new file mode 100644
index 000000000..e3f7f9359
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/User/forYourReferenceIncomingRecords.tsx
@@ -0,0 +1,7 @@
+import ForYourReferenceIncomingRecords from "@/record-management/components/userIncoming/forYourReferenceIncomingRecords/ForYourReferenceIncomingRecords";
+
+const ForYourReferenceIncomingRecordsPage = () => {
+  return <ForYourReferenceIncomingRecords />;
+};
+
+export default ForYourReferenceIncomingRecordsPage;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/User/internalIncomingRecords.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/User/internalIncomingRecords.tsx
new file mode 100644
index 000000000..84891928f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/User/internalIncomingRecords.tsx
@@ -0,0 +1,22 @@
+import InternalIncomingRecords from "@/record-management/components/userIncoming/internalIncomingRecords/internalIncomingRecords";
+import InternalIncomingRecordsV2 from "@/record-management/components/userIncoming/internalIncomingRecords/internalIncomingRecordsV2";
+import { useAuthUser } from "@/record-management/hooks/useAuthUser";
+import { useUnitConfiguration } from "@/shared/hooks/useUnitConfiguration";
+
+const InternalIncomingRecordsPage = () => {
+  const { userDetails } = useAuthUser();
+
+  const unitId = userDetails?.employee?.[0]?.unitId ?? "";
+  const { data: unitConfigData } = useUnitConfiguration(unitId, {
+    enabled: !!unitId,
+  });
+  const canIncomingAssignmentsBeSeparated =
+    unitConfigData?.data?.items?.[0]?.canIncomingAssignmentsBeSeparated;
+  return canIncomingAssignmentsBeSeparated ? (
+    <InternalIncomingRecords />
+  ) : (
+    <InternalIncomingRecordsV2 />
+  );
+};
+
+export default InternalIncomingRecordsPage;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/User/sectorReports.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/User/sectorReports.tsx
new file mode 100644
index 000000000..45526a4ec
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/User/sectorReports.tsx
@@ -0,0 +1,318 @@
+import { useMemo, useState } from "react";
+import { Activity, AlertCircle, BarChart3, Info } from "lucide-react";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { Button } from "@/shared/common/ui/button";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import { Progress } from "@/shared/common/ui/progress";
+import {
+  ReportFilterOption,
+  SectorReportFilters,
+} from "@/record-management/components/sectorReports/SectorReportFilters";
+import { RecordSummarySection } from "@/record-management/components/sectorReports/RecordSummarySection";
+import { SectorOverviewTable } from "@/record-management/components/sectorReports/SectorOverviewTable";
+import { MonthlyActivitySection } from "@/record-management/components/sectorReports/MonthlyActivitySection";
+import {
+  useChildPositions,
+  usePositionsByRankAndUnit,
+  useSectorReport,
+} from "@/record-management/components/sectorReports/useSectorReport";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { useUnit } from "@/user-management/hooks/useUnit";
+import {
+  LocalizedText,
+  RecordPeriodTotals,
+} from "@/record-management/components/sectorReports/types";
+
+const emptyTotals: RecordPeriodTotals = {
+  today: 0,
+  thisWeek: 0,
+  thisMonth: 0,
+  allTime: 0,
+};
+
+const SECTOR_POSITION_RANK = 1;
+
+const sumTotals = (items: RecordPeriodTotals[]) =>
+  items.reduce<RecordPeriodTotals>(
+    (total, item) => ({
+      today: total.today + item.today,
+      thisWeek: total.thisWeek + item.thisWeek,
+      thisMonth: total.thisMonth + item.thisMonth,
+      allTime: total.allTime + item.allTime,
+    }),
+    { ...emptyTotals },
+  );
+
+export default function SectorReportsPage() {
+  const [unitId, setUnitId] = useState("");
+  const [sectorId, setSectorId] = useState("");
+  const [groupId, setGroupId] = useState("");
+  const [fromDate, setFromDate] = useState("");
+  const [toDate, setToDate] = useState("");
+  const localizedName = useLocalizedName();
+  const { userDetails } = useAuthUser();
+  const organizationId = userDetails?.employee?.[0]?.organizationId ?? "";
+  const { getList } = useUnit();
+
+  const { data: unitsResponse, isLoading: unitsLoading } = getList(
+    organizationId,
+    { take: 1000, skip: 0 },
+    Boolean(organizationId),
+  );
+
+  const { data: sectorPositions = [], isLoading: sectorsLoading } =
+    usePositionsByRankAndUnit(unitId, SECTOR_POSITION_RANK);
+  const { data, isLoading, isFetching, isError, refetch } = useSectorReport({
+    unitId: unitId || undefined,
+    positionId: groupId || sectorId || undefined,
+    from: fromDate || undefined,
+    to: toDate || undefined,
+  });
+
+  const nameOf = (name: LocalizedText) =>
+    typeof name === "string"
+      ? name
+      : localizedName({ am: name?.am ?? "", en: name?.en ?? "" }) || "—";
+
+  const positions = useMemo<ReportFilterOption[]>(
+    () =>
+      sectorPositions.map((position) => ({
+        id: String(position.id),
+        label: localizedName(position.name) || position.key || "Unnamed sector",
+        parentId: position.parentPositionId,
+        unitId: position.unitId ? String(position.unitId) : null,
+      })),
+    [sectorPositions, localizedName],
+  );
+
+  const units = useMemo<ReportFilterOption[]>(
+    () =>
+      (unitsResponse?.data?.items ?? []).map((unit: any) => ({
+        id: String(unit.id),
+        label: localizedName(unit.name) || unit.key || "Unnamed unit",
+      })),
+    [unitsResponse?.data?.items, localizedName],
+  );
+
+  const parentIds = useMemo(
+    () => new Set(positions.map((item) => item.parentId).filter(Boolean)),
+    [positions],
+  );
+  const sectors = useMemo(() => {
+    const topLevel = positions.filter(
+      (item) => !item.parentId || parentIds.has(item.id),
+    );
+    return topLevel.length ? topLevel : positions;
+  }, [positions, parentIds]);
+  const selectedSector = sectors.find((item) => item.id === sectorId);
+  const { data: childPositions = [], isLoading: groupsLoading } =
+    useChildPositions(selectedSector?.id ?? "");
+
+  const groups = useMemo<ReportFilterOption[]>(() => {
+    const byUnitId = new Map<string, ReportFilterOption>();
+    childPositions.forEach((position: any) => {
+      if (!position.unitId) return;
+      if (!byUnitId.has(position.id)) {
+        byUnitId.set(position.id, {
+          id: position.id,
+          label:
+            localizedName(position?.name) ||
+            position.unit?.key ||
+            "Unnamed group",
+        });
+      }
+    });
+    return Array.from(byUnitId.values());
+  }, [childPositions, localizedName, units]);
+
+  const reports = data?.items ?? [];
+  const incoming = sumTotals(reports.map((item) => item.incoming));
+  const outgoing = sumTotals(reports.map((item) => item.outgoing));
+  const monthlyTotal = incoming.thisMonth + outgoing.thisMonth;
+  const processingBalance = monthlyTotal
+    ? Math.round(
+        (Math.min(incoming.thisMonth, outgoing.thisMonth) /
+          Math.max(incoming.thisMonth, outgoing.thisMonth)) *
+          100,
+      )
+    : 0;
+  const outgoingShare = monthlyTotal
+    ? Math.round((outgoing.thisMonth / monthlyTotal) * 100)
+    : 0;
+
+  return (
+    <main className="mx-auto w-full max-w-[1440px] space-y-6 px-4 py-5 sm:px-6 lg:px-8">
+      <div className="flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between">
+        <div>
+          <div className="mb-1 flex items-center gap-2 text-primary">
+            <BarChart3 className="size-5" />
+            <span className="text-sm font-semibold">Record activity</span>
+          </div>
+          <h1 className="text-2xl font-bold tracking-tight">Sector reports</h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Monitor incoming and outgoing record activity across sectors
+          </p>
+          {selectedSector && (
+            <p className="mt-3 text-xs text-muted-foreground">
+              Viewing:{" "}
+              <span className="font-semibold text-foreground">
+                {groups.find((item) => item.id === groupId)?.label ??
+                  selectedSector.label}
+              </span>
+            </p>
+          )}
+        </div>
+        <SectorReportFilters
+          units={units}
+          sectors={sectors}
+          groups={groups}
+          unitId={unitId}
+          sectorId={sectorId}
+          groupId={groupId}
+          fromDate={fromDate}
+          toDate={toDate}
+          loading={sectorsLoading || unitsLoading || groupsLoading}
+          refreshing={isFetching}
+          onUnitChange={(value) => {
+            setUnitId(value);
+            setSectorId("");
+            setGroupId("");
+          }}
+          onSectorChange={(value) => {
+            setSectorId(value);
+            setGroupId("");
+          }}
+          onGroupChange={setGroupId}
+          onFromDateChange={(value) => {
+            setFromDate(value);
+            if (toDate && value > toDate) setToDate(value);
+          }}
+          onToDateChange={setToDate}
+          onReset={() => {
+            setUnitId("");
+            setSectorId("");
+            setGroupId("");
+            setFromDate("");
+            setToDate("");
+          }}
+          onRefresh={() => refetch()}
+        />
+      </div>
+
+      {!unitId ? (
+        <div className="rounded-xl border bg-card p-12 text-center">
+          <BarChart3 className="mx-auto mb-3 size-8 text-muted-foreground" />
+          <p className="font-semibold">Select a unit</p>
+          <p className="text-sm text-muted-foreground">
+            Choose a unit to view its sectors and record activity.
+          </p>
+        </div>
+      ) : isLoading ? (
+        <div className="space-y-4">
+          <Skeleton className="h-56 w-full rounded-xl" />
+          <Skeleton className="h-56 w-full rounded-xl" />
+        </div>
+      ) : isError ? (
+        <div className="flex min-h-48 flex-col items-center justify-center gap-3 rounded-xl border bg-card p-8 text-center">
+          <AlertCircle className="size-8 text-destructive" />
+          <div>
+            <p className="font-semibold">Unable to load sector activity</p>
+            <p className="text-sm text-muted-foreground">
+              Check the reporting service and try again.
+            </p>
+          </div>
+          <Button variant="outline" onClick={() => refetch()}>
+            Try again
+          </Button>
+        </div>
+      ) : reports.length === 0 ? (
+        <div className="rounded-xl border bg-card p-12 text-center">
+          <BarChart3 className="mx-auto mb-3 size-8 text-muted-foreground" />
+          <p className="font-semibold">No report data found</p>
+          <p className="text-sm text-muted-foreground">
+            There is no record activity for the selected scope.
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-6">
+          <div>
+            <p className="text-3xl font-semibold tracking-tight text-emerald-900 dark:text-emerald-400">
+              {monthlyTotal.toLocaleString()}
+            </p>
+            <p className="mt-1 text-[10px] font-semibold uppercase tracking-[0.2em] text-muted-foreground">
+              Total record volume — this month
+            </p>
+          </div>
+
+          <div className="grid gap-3 lg:grid-cols-[1fr_1fr_2fr]">
+            <RecordSummarySection
+              direction="incoming"
+              totals={incoming}
+              allTimeLabel={fromDate || toDate ? "Selected range" : undefined}
+            />
+            <RecordSummarySection
+              direction="outgoing"
+              totals={outgoing}
+              allTimeLabel={fromDate || toDate ? "Selected range" : undefined}
+            />
+            <section className="rounded-lg border bg-card p-5 shadow-sm">
+              <div className="flex items-center justify-between border-b pb-3">
+                <h2 className="text-sm font-semibold">Performance index</h2>
+                <Info className="size-4 text-muted-foreground" />
+              </div>
+              <div className="mt-5 grid gap-6 sm:grid-cols-[100px_1fr] sm:items-center">
+                <div
+                  className="relative mx-auto flex size-24 items-center justify-center rounded-full bg-[conic-gradient(hsl(var(--primary))_0_var(--score),hsl(var(--muted))_var(--score)_100%)] [--score:0%]"
+                  style={
+                    {
+                      "--score": `${processingBalance}%`,
+                    } as React.CSSProperties
+                  }
+                >
+                  <div className="flex size-16 items-center justify-center rounded-full bg-card text-lg font-semibold">
+                    {processingBalance}%
+                  </div>
+                </div>
+                <div className="space-y-5">
+                  <div>
+                    <div className="mb-2 flex justify-between text-xs">
+                      <span>Processing balance</span>
+                      <strong>{processingBalance}%</strong>
+                    </div>
+                    <Progress value={processingBalance} className="h-1.5" />
+                  </div>
+                  <div>
+                    <div className="mb-2 flex justify-between text-xs">
+                      <span>Outgoing share</span>
+                      <strong>{outgoingShare}%</strong>
+                    </div>
+                    <Progress value={outgoingShare} className="h-1.5" />
+                  </div>
+                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                    <Activity className="size-3.5 text-primary" />
+                    {reports.length} active reporting entries
+                  </div>
+                </div>
+              </div>
+            </section>
+          </div>
+          <MonthlyActivitySection reports={reports} getName={nameOf} />
+          <SectorOverviewTable
+            reports={reports}
+            getName={nameOf}
+            hasDateRange={Boolean(fromDate || toDate)}
+            onSelect={
+              sectorId
+                ? undefined
+                : (id) => {
+                    setSectorId(id);
+                    setGroupId("");
+                    window.scrollTo({ top: 0, behavior: "smooth" });
+                  }
+            }
+          />
+        </div>
+      )}
+    </main>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/User/userRecords.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/User/userRecords.tsx
new file mode 100644
index 000000000..2ca707db0
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/User/userRecords.tsx
@@ -0,0 +1,11 @@
+import UserRecords from "@/record-management/components/userRecords/userRecords";
+
+const UserRecordsPage = () => {
+  return (
+    <div>
+      <UserRecords />
+    </div>
+  );
+};
+
+export default UserRecordsPage;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/User/viewCollaborationRecordDetailPage.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/User/viewCollaborationRecordDetailPage.tsx
new file mode 100644
index 000000000..f7230a7a2
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/User/viewCollaborationRecordDetailPage.tsx
@@ -0,0 +1,13 @@
+import { Label } from "@/shared/common/ui/label";
+import ViewRecord from "@/record-management/components/userRecords/viewRecord";
+
+
+const ViewCollaborationRecordDetailPage = () => {
+  return (
+    <div>
+      <ViewRecord />
+    </div>
+  );
+};
+
+export default ViewCollaborationRecordDetailPage;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/User/viewRecordDetailsPage.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/User/viewRecordDetailsPage.tsx
new file mode 100644
index 000000000..de057609c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/User/viewRecordDetailsPage.tsx
@@ -0,0 +1,22 @@
+import { Label } from "@/shared/common/ui/label";
+import ViewRecord from "@/record-management/components/userRecords/viewRecord";
+import { Button } from "@/shared/common/ui/button";
+import { ChevronLeft } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { t } from "i18next";
+
+const ViewRecordDetailsPage = () => {
+  const navigate = useNavigate();
+
+  const handleBack = () => {
+    navigate(-1);
+  };
+
+  return (
+    <div className="space-y-4">
+      <ViewRecord />
+    </div>
+  );
+};
+
+export default ViewRecordDetailsPage;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/features/types/dashboardStatsDto.ts b/apps/edr-freight-web/backoffice/src/record-management/pages/features/types/dashboardStatsDto.ts
new file mode 100644
index 000000000..093ea1b23
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/features/types/dashboardStatsDto.ts
@@ -0,0 +1,10 @@
+export interface DashboardStatsDto {
+  totalOrgs: number;
+  pendingRequests: number;
+  orgAdmins: number;
+  percentChanges: {
+    orgs: number;
+    pending: number;
+    admins: number;
+  };
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/recordVerificationPage.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/recordVerificationPage.tsx
new file mode 100644
index 000000000..e3c823adc
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/recordVerificationPage.tsx
@@ -0,0 +1,12 @@
+import { useParams } from "react-router-dom";
+import RecordVerification from "../components/recordVerification";
+
+const RecordVerificationPage = () => {
+  const { id } = useParams();
+  return <RecordVerification recordId={id as string} />;
+};
+
+export default RecordVerificationPage;
+
+
+
diff --git a/apps/edr-freight-web/backoffice/src/record-management/pages/uploadTeeterAndSignature.tsx b/apps/edr-freight-web/backoffice/src/record-management/pages/uploadTeeterAndSignature.tsx
new file mode 100644
index 000000000..e2371ba35
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/pages/uploadTeeterAndSignature.tsx
@@ -0,0 +1,7 @@
+import UploadTeeterAndSignature from "../components/Settings/uploadTeeterandSingature";
+
+const UploadTeeterAndSignaturePage = () => {
+  return <UploadTeeterAndSignature />;
+};
+
+export default UploadTeeterAndSignaturePage;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/queries/approvalTasks.ts b/apps/edr-freight-web/backoffice/src/record-management/queries/approvalTasks.ts
new file mode 100644
index 000000000..76a2152db
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/queries/approvalTasks.ts
@@ -0,0 +1,27 @@
+// import { ApprovalRecordsDto } from "@/dto/approval/approvalRecordsDto";
+// import { UserRecordDto } from "@/dto/userRecords/userRecordsDto";
+// import { SharePointService } from "@/serivces/sharepoint/spService";
+
+// const approvalService = new SharePointService("User_Records_Associated_Task");
+// const userRecordsService = new SharePointService("User_Records");
+
+// export const fetchApprovalTasks = async (): Promise<ApprovalRecordsDto[]> => {
+//   try {
+//     return await approvalService.renderListData(
+//       "AssignedTo",
+//       "",
+//       "<FieldRef Name='ID' /> <FieldRef Name='Title' /> <FieldRef Name='AssignedTo' /> <FieldRef Name='Created' /> <FieldRef Name='TaskStatus' />"
+//     );
+//   } catch (error) {
+//     console.error("Error fetching approval records:", error);
+//     return [];
+//   }
+// };
+
+// export const fetchParentRecordDetails = async (id: number) => {
+//   const response: UserRecordDto[] = await userRecordsService.renderListData(
+//     null,
+//     `<And><Eq><FieldRef Name='Is_Deleted' /><Value Type='Integer'>0</Value></Eq><Eq><FieldRef Name='ID' /><Value Type='Integer'>${id}</Value></Eq></And>`
+//   );
+//   return response[0];
+// };
diff --git a/apps/edr-freight-web/backoffice/src/record-management/redux/approvalSlice.ts b/apps/edr-freight-web/backoffice/src/record-management/redux/approvalSlice.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/edr-freight-web/backoffice/src/record-management/redux/dashboardSlice.ts b/apps/edr-freight-web/backoffice/src/record-management/redux/dashboardSlice.ts
new file mode 100644
index 000000000..a2beda2de
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/redux/dashboardSlice.ts
@@ -0,0 +1,449 @@
+// import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+// import { RootState } from "./store";
+
+// // Common interface for status counts
+// interface StatusCounts {
+//   [key: string]: number;
+// }
+
+// // Record Officer Summary interface
+// interface RecordSummary {
+//   totalIncoming: number;
+//   totalOutgoing: number;
+//   monthlyIncoming: number;
+//   monthlyOutgoing: number;
+//   weeklyIncoming: number;
+//   weeklyOutgoing: number;
+//   dailyIncoming: number;
+//   dailyOutgoing: number;
+//   lastUpdated?: number;
+// }
+
+// // Combined Dashboard State
+// interface DashboardState {
+//   // User Dashboard state
+//   totalOutgoing: number;
+//   totalIncoming: number;
+//   internalIncoming: number;
+//   externalIncoming: number;
+//   totalCC: number;
+//   outgoingStats: StatusCounts;
+//   incomingStats: StatusCounts;
+//   approvalStats: StatusCounts;
+//   userDashboardStatus: "idle" | "loading" | "failed" | "succeeded";
+//   lastUpdated: number;
+
+//   // Record Officer Dashboard state
+//   recordSummary: RecordSummary | null;
+//   recordOfficerLoading: boolean;
+//   recordOfficerError: string | null;
+//   recordOfficerLastUpdated: number;
+// }
+
+// const initialState: DashboardState = {
+//   // User Dashboard initial state
+//   totalOutgoing: 0,
+//   totalIncoming: 0,
+//   internalIncoming: 0,
+//   externalIncoming: 0,
+//   totalCC: 0,
+//   outgoingStats: {
+//     Draft: 0,
+//     Forward: 0,
+//     Accepted: 0,
+//     Approved: 0,
+//     Rejected: 0,
+//     Adjusted: 0,
+//     Sent: 0,
+//   },
+//   incomingStats: {
+//     "In Progress": 0,
+//     Accepted: 0,
+//     Reassigned: 0,
+//   },
+//   approvalStats: {
+//     Pending: 0,
+//     Approved: 0,
+//     Rejected: 0,
+//   },
+//   userDashboardStatus: "idle",
+//   lastUpdated: 0,
+
+//   // Record Officer Dashboard initial state
+//   recordSummary: null,
+//   recordOfficerLoading: false,
+//   recordOfficerError: null,
+//   recordOfficerLastUpdated: 0,
+// };
+
+// // Get date ranges for filtering
+// const getDateRanges = () => {
+//   const today = new Date();
+//   const startOfDay = new Date(
+//     today.getFullYear(),
+//     today.getMonth(),
+//     today.getDate()
+//   ).toISOString();
+
+//   // Get start of week (Sunday)
+//   const startOfWeek = new Date(today);
+//   startOfWeek.setDate(today.getDate() - today.getDay());
+//   startOfWeek.setHours(0, 0, 0, 0);
+
+//   // Get start of month
+//   const startOfMonth = new Date(
+//     today.getFullYear(),
+//     today.getMonth(),
+//     1
+//   ).toISOString();
+
+//   return {
+//     startOfDay,
+//     startOfWeek: startOfWeek.toISOString(),
+//     startOfMonth,
+//   };
+// };
+
+// // User Dashboard async thunk with optimized performance
+// export const fetchDashboardStats = createAsyncThunk(
+//   "dashboard/fetchStats",
+//   async (userName: string, { getState }) => {
+//     try {
+//       const state = getState() as RootState;
+//       const lastUpdated = state.dashboard?.lastUpdated;
+//       const now = Date.now();
+
+//       // Cache for 2 minutes to reduce API calls while maintaining reasonable freshness
+//       if (lastUpdated && now - lastUpdated < 120000) {
+//        
+//         return null; // Return null to skip updating state
+//       }
+
+//     
+//       // Prepare base filter with username
+//       const baseFilter = `Author/Title eq '${userName}' and Is_Deleted eq 0`;
+
+//       try {
+//         // Parallel queries for different data needs
+//         const [
+//           // Total counts by record type - outgoing
+//           outgoingCount,
+//           // Total counts by record type - incoming
+//           incomingCount,
+//           // Get outgoing records with statuses
+//           outgoingRecords,
+//           // Get incoming records with statuses
+//           incomingRecords,
+//           // Get records with CC info
+//           ccRecords,
+//           // Get records that need approval
+//           approvalRecords,
+//         ] = await Promise.all([
+//           // Count queries
+//           userRecordsService?.getFilteredCount(
+//             `${baseFilter} and Record_Type eq 'Outgoing'`
+//           ),
+//           userRecordsService?.getFilteredCount(
+//             `${baseFilter} and Record_Type eq 'Incoming'`
+//           ),
+
+//           // Status detail queries - limited fields and counts
+//           userRecordsService?.getFilteredItems(
+//             `${baseFilter} and Record_Type eq 'Outgoing'`,
+//             ["Status"],
+//             [],
+//             100,
+//             "Created",
+//             "desc"
+//           ),
+//           userRecordsService.getFilteredItems(
+//             `${baseFilter} and Record_Type eq 'Incoming'`,
+//             ["Status", "Organization_Name"],
+//             [],
+//             100,
+//             "Created",
+//             "desc"
+//           ),
+
+//           // CC info query
+//           userRecordsService.getFilteredCount(
+//             `${baseFilter} and (Internal_CC eq 1 or CC_Organization_Name ne null)`
+//           ),
+
+//           // Approval query
+//           userRecordsService.getFilteredItems(
+//             `${baseFilter} and Needs_Approval eq 1`,
+//             ["Approval_Status"],
+//             [],
+//             100,
+//             "Created",
+//             "desc"
+//           ),
+//         ]);
+
+//         // Process status counts with less client-side computation
+//         const outgoingStats: StatusCounts = {
+//           Draft: 0,
+//           Forward: 0,
+//           Accepted: 0,
+//           Approved: 0,
+//           Rejected: 0,
+//           Adjusted: 0,
+//           Sent: 0,
+//         };
+//         outgoingRecords.forEach((record: any) => {
+//           const status = record.Status || "Unknown";
+//           outgoingStats[status] = (outgoingStats[status] || 0) + 1;
+//         });
+
+//         const incomingStats: StatusCounts = {
+//           "In Progress": 0,
+//           Accepted: 0,
+//           Reassigned: 0,
+//         };
+//         incomingRecords.forEach((record: any) => {
+//           const status = record.Status || "Unknown";
+//           incomingStats[status] = (incomingStats[status] || 0) + 1;
+//         });
+
+//         // Count internal vs external incoming
+//         const internalIncoming = incomingRecords.filter(
+//           (r: any) => !r.Organization_Name || r.Organization_Name === ""
+//         ).length;
+
+//         const externalIncoming = incomingRecords.filter(
+//           (r: any) => r.Organization_Name && r.Organization_Name !== ""
+//         ).length;
+
+//         // Process approval stats
+//         const approvalStats: StatusCounts = {
+//           Pending: 0,
+//           Approved: 0,
+//           Rejected: 0,
+//         };
+
+//         approvalRecords.forEach((record: any) => {
+//           const status = record.Approval_Status || "Pending";
+//           approvalStats[status] = (approvalStats[status] || 0) + 1;
+//         });
+
+//         return {
+//           totalOutgoing: outgoingCount,
+//           totalIncoming: incomingCount,
+//           internalIncoming,
+//           externalIncoming,
+//           totalCC: ccRecords,
+//           outgoingStats,
+//           incomingStats,
+//           approvalStats,
+//           lastUpdated: now,
+//         };
+//       } catch (error) {
+//         console.error("Error fetching dashboard data from SharePoint:", error);
+//         // Return mock data for charts to be visible
+//         return {
+//           totalOutgoing: 5,
+//           totalIncoming: 13,
+//           internalIncoming: 6,
+//           externalIncoming: 7,
+//           totalCC: 3,
+//           outgoingStats: {
+//             Draft: 2,
+//             Forward: 1,
+//             Accepted: 0,
+//             Approved: 0,
+//             Rejected: 0,
+//             Adjusted: 0,
+//             Sent: 2,
+//           },
+//           incomingStats: {
+//             "In Progress": 8,
+//             Accepted: 3,
+//             Reassigned: 2,
+//           },
+//           approvalStats: {
+//             Pending: 5,
+//             Approved: 8,
+//             Rejected: 2,
+//           },
+//           lastUpdated: now,
+//         };
+//       }
+//     } catch (error) {
+//       console.error("Error in fetchDashboardStats:", error);
+//       throw error;
+//     }
+//   }
+// );
+
+// // Record Officer Dashboard async thunk with optimized real-time fetching
+// export const fetchRecordOfficerStats = createAsyncThunk(
+//   "dashboard/fetchRecordOfficerStats",
+//   async (_, { getState }) => {
+//     try {
+//       const state = getState() as RootState;
+//       const lastUpdated = state.dashboard.recordOfficerLastUpdated;
+//       const now = Date.now();
+
+//       // Cache for 2 minutes to reduce API calls
+//       if (lastUpdated && now - lastUpdated < 120000) {
+//         return null; // Return null to skip updating state
+//       }
+
+
+//       // Get date ranges for filtering
+//       const { startOfDay, startOfWeek, startOfMonth } = getDateRanges();
+
+//       try {
+//         // Use server-side filtering and optimized queries
+//         const queries = [
+//           // Total counts with server-side filtering by Record_Type
+//           recordsService.getFilteredCount(
+//             "Is_Deleted eq 0 and Record_Type eq 'Incoming'"
+//           ),
+//           recordsService.getFilteredCount(
+//             "Is_Deleted eq 0 and Record_Type eq 'Outgoing'"
+//           ),
+
+//           // Monthly counts with server-side filtering
+//           recordsService.getFilteredCount(
+//             `Is_Deleted eq 0 and Record_Type eq 'Incoming' and Created ge datetime'${startOfMonth}'`
+//           ),
+//           recordsService.getFilteredCount(
+//             `Is_Deleted eq 0 and Record_Type eq 'Outgoing' and Created ge datetime'${startOfMonth}'`
+//           ),
+
+//           // Weekly counts with server-side filtering
+//           recordsService.getFilteredCount(
+//             `Is_Deleted eq 0 and Record_Type eq 'Incoming' and Created ge datetime'${startOfWeek}'`
+//           ),
+//           recordsService.getFilteredCount(
+//             `Is_Deleted eq 0 and Record_Type eq 'Outgoing' and Created ge datetime'${startOfWeek}'`
+//           ),
+
+//           // Daily counts with server-side filtering
+//           recordsService.getFilteredCount(
+//             `Is_Deleted eq 0 and Record_Type eq 'Incoming' and Created ge datetime'${startOfDay}'`
+//           ),
+//           recordsService.getFilteredCount(
+//             `Is_Deleted eq 0 and Record_Type eq 'Outgoing' and Created ge datetime'${startOfDay}'`
+//           ),
+//         ];
+
+//         // Execute all count queries in parallel for maximum performance
+//         const [
+//           totalIncoming,
+//           totalOutgoing,
+//           monthlyIncoming,
+//           monthlyOutgoing,
+//           weeklyIncoming,
+//           weeklyOutgoing,
+//           dailyIncoming,
+//           dailyOutgoing,
+//         ] = await Promise.all(queries);
+
+//         return {
+//           totalIncoming,
+//           totalOutgoing,
+//           monthlyIncoming,
+//           monthlyOutgoing,
+//           weeklyIncoming,
+//           weeklyOutgoing,
+//           dailyIncoming,
+//           dailyOutgoing,
+//           lastUpdated: now,
+//         };
+//       } catch (error) {
+//         console.error(
+//           "Error fetching record officer data from SharePoint:",
+//           error
+//         );
+//         // Return mock data to ensure charts are visible
+//         return {
+//           totalIncoming: 81,
+//           totalOutgoing: 1466,
+//           monthlyIncoming: 7,
+//           monthlyOutgoing: 15,
+//           weeklyIncoming: 3,
+//           weeklyOutgoing: 5,
+//           dailyIncoming: 2,
+//           dailyOutgoing: 1,
+//           lastUpdated: now,
+//         };
+//       }
+//     } catch (error) {
+//       console.error("Error in fetchRecordOfficerStats:", error);
+//       throw error;
+//     }
+//   }
+// );
+
+// const dashboardSlice = createSlice({
+//   name: "dashboard",
+//   initialState,
+//   reducers: {
+//     // Add a reducer to refresh data on demand
+//     refreshDashboards: (state) => {
+//       // Reset last updated times to force refresh
+//       state.lastUpdated = 0;
+//       state.recordOfficerLastUpdated = 0;
+//     },
+//   },
+//   extraReducers: (builder) => {
+//     builder
+//       // User Dashboard cases
+//       .addCase(fetchDashboardStats.pending, (state) => {
+//         state.userDashboardStatus = "loading";
+//       })
+//       .addCase(fetchDashboardStats.fulfilled, (state, action) => {
+//         // Skip updating if we're using cached data
+//         if (!action.payload) return;
+
+//         state.totalOutgoing = action.payload.totalOutgoing;
+//         state.totalIncoming = action.payload.totalIncoming;
+//         state.internalIncoming = action.payload.internalIncoming;
+//         state.externalIncoming = action.payload.externalIncoming;
+//         state.totalCC = action.payload.totalCC;
+//         state.outgoingStats = action.payload.outgoingStats;
+//         state.incomingStats = action.payload.incomingStats;
+//         state.approvalStats = action.payload.approvalStats;
+//         state.lastUpdated = action.payload.lastUpdated;
+//         state.userDashboardStatus = "succeeded";
+//       })
+//       .addCase(fetchDashboardStats.rejected, (state) => {
+//         state.userDashboardStatus = "failed";
+//       })
+
+//       // Record Officer Dashboard cases
+//       .addCase(fetchRecordOfficerStats.pending, (state) => {
+//         state.recordOfficerLoading = true;
+//         state.recordOfficerError = null;
+//       })
+//       .addCase(fetchRecordOfficerStats.fulfilled, (state, action) => {
+//         // Skip updating if we're using cached data
+//         if (!action.payload) return;
+
+//         state.recordOfficerLoading = false;
+//         state.recordSummary = action.payload;
+//         state.recordOfficerLastUpdated = action.payload.lastUpdated;
+//       })
+//       .addCase(fetchRecordOfficerStats.rejected, (state, action) => {
+//         state.recordOfficerLoading = false;
+//         state.recordOfficerError =
+//           action.error.message || "Failed to fetch stats";
+//       });
+//   },
+// });
+
+// // Export actions
+// export const { refreshDashboards } = dashboardSlice.actions;
+
+// // Export selectors
+// export const dashboardSelector = (state: RootState) => state.dashboard;
+// export const recordOfficerSelector = (state: RootState) => ({
+//   recordSummary: state.dashboard.recordSummary,
+//   loading: state.dashboard.recordOfficerLoading,
+//   error: state.dashboard.recordOfficerError,
+// });
+
+// export default dashboardSlice.reducer;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/redux/settingsSlice.ts b/apps/edr-freight-web/backoffice/src/record-management/redux/settingsSlice.ts
new file mode 100644
index 000000000..2b1be82b8
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/redux/settingsSlice.ts
@@ -0,0 +1,384 @@
+// import { createSlice, PayloadAction, createAsyncThunk } from "@reduxjs/toolkit";
+// import { RootState } from "./store";
+// import {
+//   Organization,
+//   OrganizationOption,
+// } from "@/dto/userRecords/organizationDto";
+// import { LetterTemplatesDto } from "@/dto/userRecords/letterTemplatesDto";
+// import { RecordsSettingsItem } from "@/dto/userRecords/recordsSettingDto";
+// import { MultiSelectOptions, SelectOptions } from "@/common/commonTypes";
+// import { recordTypeOptions } from "@/data/recordTypes";
+// import { languageTypeOptions } from "@/data/languageTypes";
+// import { TreeViewItem } from "@/common/treeSelect";
+// import {
+//   organizationOptions,
+//   organizations as Organizations,
+// } from "@/mock/organizations";
+// import { recordsSettingsData } from "@/mock/recordsSettings";
+// import { LetterTemplates } from "@/mock/letterTemplates";
+// import { nonSmartOfficeOrgs } from "@/mock/nonSmartOfficeOrganizations";
+// import { NonSmartDto } from "@/dto/userRecords/nonSmartOrgsDto";
+
+// import { MultiSelectTypes } from "@/types/multiSelectTypes";
+
+// import { UsersDto } from "@/dto/userRecords/usersDto";
+// import { DepartmentDto } from "@/dto/userRecords/departmentsDto";
+
+// import { fetchWithFallback } from "@/utils/utils";
+// import ADService from "@/serivces/adService";
+// import { users } from "@/mock/users";
+// import { departments } from "@/mock/departments";
+// import { SealDto } from "@/dto/sealDto";
+// import { FileInformationDto } from "@/dto/approval/fileInformationDto";
+// import { LibraryFilesDto } from "@/dto/userRecords/libraryFilesDto";
+
+// export interface UserRecordsSettings {
+//   signatureOptions: SelectOptions[];
+//   teeterOptions: SelectOptions[];
+//   prefixOptions: SelectOptions[];
+//   ccPrefixOptions: SelectOptions[];
+//   users: MultiSelectOptions[];
+//   departments: MultiSelectOptions[];
+//   hierarchyDepartments: MultiSelectOptions[];
+//   organizationOptions: TreeViewItem[];
+//   nonSmartOfficeReceivingOrganizations: MultiSelectOptions[];
+//   suffixOptions: SelectOptions[];
+//   ccSuffixOptions: SelectOptions[];
+//   externalLetterTemplateOptions: SelectOptions[];
+//   internalLetterTemplateOptions: SelectOptions[];
+//   internalMemoLetterTemplateOptions: SelectOptions[];
+//   count: number | null;
+//   prefix: string | null;
+//   prefixInternal: string | null;
+//   suffixInternal: string | null;
+//   recordTypes: SelectOptions[];
+//   languages: SelectOptions[];
+//   seals: SelectOptions[];
+//   originalLetterTemplates: LetterTemplatesDto[];
+//   settingsMap: Map<string, any>;
+//   settings: RecordsSettingsItem[];
+//   singleUsersOptions: SelectOptions[];
+//   singleDepartmentsOptions: SelectOptions[];
+// }
+
+// interface UserRecordsSettingsState {
+//   userRecordsSetting: UserRecordsSettings;
+//   status: "idle" | "loading" | "failed" | "succeeded";
+// }
+// const initialState: UserRecordsSettingsState = {
+//   userRecordsSetting: {
+//     ccPrefixOptions: [],
+//     ccSuffixOptions: [],
+//     count: null,
+//     externalLetterTemplateOptions: [],
+//     internalLetterTemplateOptions: [],
+//     internalMemoLetterTemplateOptions: [],
+//     nonSmartOfficeReceivingOrganizations: [],
+//     users: [],
+//     departments: [],
+//     hierarchyDepartments: [],
+//     prefix: null,
+//     prefixOptions: [],
+//     organizationOptions: [],
+//     suffixOptions: [],
+//     recordTypes: [],
+//     languages: [],
+//     originalLetterTemplates: [],
+//     seals: [],
+//     prefixInternal: "",
+//     suffixInternal: "",
+//     settingsMap: new Map(),
+//     settings: [],
+//     signatureOptions: [],
+//     teeterOptions: [],
+//     singleDepartmentsOptions: [],
+//     singleUsersOptions: [],
+//   },
+//   status: "idle",
+// };
+
+// const recordsSettingSharePointService = new SharePointService(
+//   "Records_Setting"
+// );
+// const organizationsSharePointService = new SharePointService(
+//   "Organizations",
+//   `${window.location.origin}/sites/setting/`
+// );
+
+// const orgOptionsSharePointService = new SharePointService(
+//   "Org Options",
+//   `${window.location.origin}/sites/setting/`
+// );
+// const letterTemplatesSharePointService = new SharePointService(
+//   "LetterTemplates"
+// );
+// const nonSmartOrgsSharePointService = new SharePointService(
+//   "NotSmartOfficeOrganizations"
+// );
+// const sealsSharepointService = new SharePointService("Seals");
+
+// const adService = new ADService();
+
+// const teeterService = new SharePointService("Teeter");
+
+// const signatureService = new SharePointService("Signature");
+// // Type guards for runtime validation
+// export function isRecordsSettings(
+//   data: unknown
+// ): data is RecordsSettingsItem[] {
+//   return (
+//     Array.isArray(data) && data.every((item) => "id" in item && "title" in item)
+//   );
+// }
+
+// export function isOrganizations(data: unknown): data is Organization[] {
+//   return (
+//     Array.isArray(data) &&
+//     data.every((item) => "orgId" in item && "orgName" in item)
+//   );
+// }
+
+// export function isOrgOptions(data: unknown): data is OrganizationOption[] {
+//   return (
+//     Array.isArray(data) &&
+//     data.every((item) => "optionId" in item && "optionValue" in item)
+//   );
+// }
+
+// export function isLetterTemplates(data: unknown): data is LetterTemplatesDto[] {
+//   return (
+//     Array.isArray(data) &&
+//     data.every((item) => "templateId" in item && "content" in item)
+//   );
+// }
+
+// export function isNonSmartOrgs(data: unknown): data is NonSmartDto[] {
+//   return (
+//     Array.isArray(data) &&
+//     data.every((item) => "orgCode" in item && "orgDescription" in item)
+//   );
+// }
+// export const fetchUserRecordsOptions = createAsyncThunk<UserRecordsSettings>(
+//   "/items/getUserRecordsSettings",
+//   async () => {
+//     const [
+//       settings,
+//       organizations,
+//       orgOptions,
+//       letterTemplates,
+//       nonSmartOfficeReceivingOrganizations,
+//       seals,
+//       fetchedUsers,
+//       fetchedDepartments,
+//       fetchedSignatures,
+//       fetchedTeeters,
+//     ] = await Promise.all([
+//       fetchWithFallback(
+//         recordsSettingSharePointService.getItems(),
+//         recordsSettingsData
+//       ),
+//       fetchWithFallback(
+//         organizationsSharePointService.getItems(),
+//         Organizations
+//       ),
+//       fetchWithFallback(
+//         orgOptionsSharePointService.getItems(),
+//         organizationOptions
+//       ),
+//       fetchWithFallback(
+//         letterTemplatesSharePointService.getItems(),
+//         LetterTemplates
+//       ),
+//       fetchWithFallback(
+//         nonSmartOrgsSharePointService.getItems(),
+//         nonSmartOfficeOrgs
+//       ),
+//       fetchWithFallback(
+//         sealsSharepointService.getFilteredItems(``, ["FileRef", "FileLeafRef"]),
+//         []
+//       ),
+//       fetchWithFallback(adService.getUsersUnderOrganization(), users),
+//       fetchWithFallback(adService.getDepartmentsFromAD(), departments),
+//       fetchWithFallback(
+//         signatureService.getFilteredItems<FileInformationDto>(
+//           `FileLeafRef eq '${adService.userDisplayName}.png'`,
+//           ["FileLeafRef", "FileRef"],
+//           [],
+//           1,
+//           "Id",
+//           "desc"
+//         ),
+//         []
+//       ),
+//       fetchWithFallback(
+//         teeterService.getFilteredItems<FileInformationDto>(
+//           `FileLeafRef eq '${adService.userDisplayName} - English.png' or FileLeafRef eq '${adService.userDisplayName} - Amharic.png'`,
+//           ["FileLeafRef", "FileRef"],
+//           [],
+//           2,
+//           "Id",
+//           "desc"
+//         ),
+//         []
+//       ),
+//     ]);
+
+//     return processSettings(
+//       settings as RecordsSettingsItem[],
+//       organizations as Organization[],
+//       orgOptions as OrganizationOption[],
+//       letterTemplates as LetterTemplatesDto[],
+//       seals as SealDto[],
+//       fetchedUsers,
+//       fetchedDepartments,
+//       nonSmartOfficeReceivingOrganizations as NonSmartDto[],
+//       fetchedSignatures as LibraryFilesDto[],
+//       fetchedTeeters as LibraryFilesDto[]
+//     );
+//   }
+// );
+
+// const processSettings = (
+//   settings: RecordsSettingsItem[],
+//   organizations: Organization[],
+//   orgOptions: OrganizationOption[],
+//   letterTemplates: LetterTemplatesDto[],
+//   seals: SealDto[],
+//   fetchedUsers: UsersDto[],
+//   fetchedDepartments: DepartmentDto[],
+//   fetchedNonSmartOfficeReceivingOrganizations: NonSmartDto[],
+//   fetchedSignatures: LibraryFilesDto[],
+//   fetchedTeeters: LibraryFilesDto[]
+// ): UserRecordsSettings => {
+//   const parsedSettings = settings.map((setting) => ({
+//     ...setting,
+//     Value: sanitizeAndParse(setting.Value),
+//     Id: setting.Id,
+//   }));
+//   const settingsMap = new Map(
+//     parsedSettings.map((setting) => [setting.Title, setting.Value])
+//   );
+
+//   const mappedOrgs = mapRawDataToOrgListDTO(organizations);
+//   const mappedOrgsOptions = mapRawDataToOrgOptionsListDTOGrouped(orgOptions);
+//   const flattenedOrgOptions = Object.values(mappedOrgsOptions).flat();
+//   const orgs = mapDataToTreeViewItems(mappedOrgs, flattenedOrgOptions);
+//   const templates = mapDtoToLetterTemplates(letterTemplates);
+//   const nonSmartOrg = mapDtoToString(
+//     fetchedNonSmartOfficeReceivingOrganizations
+//   );
+//   const users: MultiSelectTypes[] =
+//     mapUsersDtoToMultipleSelectOptions(fetchedUsers);
+//   const departments: MultiSelectTypes[] =
+//     mapDepartmentDtoToMultipleSelectOptions(fetchedDepartments);
+
+//   const processedSettings: UserRecordsSettings = {
+//     prefixOptions: mapStringsToSelectOptions(
+//       settingsMap.get("Prefixes") as string[]
+//     ),
+//     prefixInternal:
+//       settings.find((s: any) => s.Title === "PrefixInternalCC")?.Value || "",
+//     suffixInternal:
+//       settings.find((s: any) => s.Title === "SuffixInternalCC")?.Value || "",
+//     ccPrefixOptions: mapStringsToSelectOptions(
+//       settingsMap.get("Prefixes") as string[]
+//     ),
+//     suffixOptions: mapStringsToSelectOptions(
+//       settingsMap.get("Suffixes") as string[]
+//     ),
+//     ccSuffixOptions: mapStringsToSelectOptions(
+//       settingsMap.get("Suffixes") as string[]
+//     ),
+//     count: parseInt(settingsMap.get("Count") as string) || 0,
+//     prefix: settingsMap.get("Prefix") as string,
+//     organizationOptions: orgs,
+//     nonSmartOfficeReceivingOrganizations:
+//       mapStringsToMultiSelectOptions(nonSmartOrg),
+//     externalLetterTemplateOptions: mapLetterTemplatesToSelectOptions(
+//       templates.filter((letterTemplate) =>
+//         letterTemplate.record_Type.includes("External")
+//       )
+//     ),
+//     internalLetterTemplateOptions: mapLetterTemplatesToSelectOptions(
+//       templates.filter((letterTemplate) =>
+//         letterTemplate.record_Type.includes("Internal")
+//       )
+//     ),
+//     internalMemoLetterTemplateOptions: mapLetterTemplatesToSelectOptions(
+//       templates.filter((letterTemplate) =>
+//         letterTemplate.record_Type.includes("InternalMemo")
+//       )
+//     ),
+//     recordTypes: recordTypeOptions,
+//     languages: languageTypeOptions,
+//     originalLetterTemplates: letterTemplates,
+//     users: users,
+//     departments: departments,
+//     hierarchyDepartments: departments,
+//     seals: mapSealsToSelectOptions(seals),
+//     settingsMap: settingsMap,
+//     settings: settings,
+//     signatureOptions: mapLibraryFilesToSelectOptions(fetchedSignatures),
+//     teeterOptions: mapLibraryFilesToSelectOptions(fetchedTeeters),
+//     singleUsersOptions: mapUsersDtoToSelectOptions(fetchedUsers),
+//     singleDepartmentsOptions:
+//       mapDepartmentDtoToSelectOptions(fetchedDepartments),
+//   };
+
+//   return processedSettings;
+// };
+
+// const settingsSlice = createSlice({
+//   name: "settingsSlice",
+//   initialState,
+//   reducers: {},
+//   extraReducers: (builders) => {
+//     builders
+//       .addCase(
+//         fetchUserRecordsOptions.fulfilled,
+//         (state, action: PayloadAction<UserRecordsSettings>) => {
+//           state.userRecordsSetting = action.payload;
+//           state.status = "idle";
+//         }
+//       )
+//       .addCase(fetchUserRecordsOptions.pending, (state) => {
+//         state.status = "loading";
+//       })
+//       .addCase(fetchUserRecordsOptions.rejected, (state) => {
+//         state.userRecordsSetting = {
+//           ccPrefixOptions: [],
+//           ccSuffixOptions: [],
+//           count: null,
+//           externalLetterTemplateOptions: [],
+//           internalLetterTemplateOptions: [],
+//           internalMemoLetterTemplateOptions: [],
+//           nonSmartOfficeReceivingOrganizations: [],
+//           prefix: null,
+//           prefixOptions: [],
+//           organizationOptions: [],
+//           suffixOptions: [],
+//           recordTypes: recordTypeOptions,
+//           users: [],
+//           languages: languageTypeOptions,
+//           originalLetterTemplates: [],
+//           departments: [],
+//           hierarchyDepartments: [],
+//           prefixInternal: "",
+//           suffixInternal: "",
+//           seals: [],
+//           settingsMap: new Map(),
+//           settings: [],
+//           signatureOptions: [],
+//           teeterOptions: [],
+//           singleDepartmentsOptions: [],
+//           singleUsersOptions: [],
+//         };
+//         state.status = "succeeded";
+//       });
+//   },
+// });
+
+// export const userRecordsSettingsSelector = (state: RootState) =>
+//   state.recordsOptionsReducer;
+
+// export default settingsSlice.reducer;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/redux/store.ts b/apps/edr-freight-web/backoffice/src/record-management/redux/store.ts
new file mode 100644
index 000000000..9cca5a2ea
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/redux/store.ts
@@ -0,0 +1,19 @@
+import { configureStore } from "@reduxjs/toolkit";
+
+// import userReducer from "./userSlice";
+
+// import approvalReducer from "./approvalSlice";
+
+export const store = configureStore({
+  reducer: {
+    // userRecordsReducer: userRecordsReducer,
+    // user: userReducer,
+    // recordsOptionsReducer: userRecordsOptionsReducer,
+    // approval: approvalReducer,
+    // dashboard: dashboardReducer,
+  },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+export default store;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/redux/userRecordsSlice.ts b/apps/edr-freight-web/backoffice/src/record-management/redux/userRecordsSlice.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/edr-freight-web/backoffice/src/record-management/redux/userSlice.ts b/apps/edr-freight-web/backoffice/src/record-management/redux/userSlice.ts
new file mode 100644
index 000000000..8e4ce3645
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/redux/userSlice.ts
@@ -0,0 +1,92 @@
+// // redux/userSlice.ts
+// import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
+// import { RootState } from "./store";
+// import { fetchMe } from "@/record-management/services/Recordservice";
+
+// interface UserDetails {
+//   id: string;
+//   userName: string;
+//   userDisplayName: string;
+//   userPermissions: string[];
+//   avator: string | null;
+//   displayname: string;
+// }
+
+// const initialState: UserState = {
+//   userDetails: {
+//     id: "",
+//     userName: "",
+//     userDisplayName: "",
+//     userPermissions: [],
+//     avator: null,
+//     displayname: "",
+//   },
+//   status: "idle",
+// };
+
+// interface UserState {
+//   userDetails: UserDetails | null;
+//   status: "idle" | "loading" | "failed";
+// }
+
+// export const fetchUserDetails = createAsyncThunk<
+//   UserDetails,
+//   void,
+//   { rejectValue: string }
+// >("user/fetchUserDetails", async (_, thunkAPI) => {
+//   try {
+//     const me = await fetchMe();
+
+//     const permissions =
+//       me.employee?.flatMap((emp: any) =>
+//         emp.positions.flatMap((pos: any) =>
+//           pos.permissions.map((p: any) => p.key)
+//         )
+//       ) ?? [];
+
+//     return {
+//       id: me.id,
+//       userName: me.username,
+//       userDisplayName: me.name.en,
+//       userPermissions: permissions,
+//       avator: me.avator ?? null,
+//       displayname: me.name?.en ?? "",
+//     };
+//   } catch (error) {
+//     console.error(error);
+//     return thunkAPI.rejectWithValue("Failed to fetch user details");
+//   }
+// });
+
+// const userSlice = createSlice({
+//   name: "user",
+//   initialState,
+//   reducers: {
+//     clearUser(state) {
+//       state.userDetails = null;
+//       state.status = "idle";
+//     },
+//   },
+//   extraReducers: (builder) => {
+//     builder
+//       .addCase(fetchUserDetails.pending, (state) => {
+//         state.status = "loading";
+//       })
+//       .addCase(
+//         fetchUserDetails.fulfilled,
+//         (state, action: PayloadAction<UserDetails>) => {
+//           state.userDetails = action.payload;
+//           state.status = "idle";
+//         }
+//       )
+//       .addCase(fetchUserDetails.rejected, (state) => {
+//         state.status = "failed";
+//       });
+//   },
+// });
+
+// export const { clearUser } = userSlice.actions;
+
+// export const userSelector = (state: RootState) => state.user;
+
+// export default userSlice.reducer;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/routes/PrivateRoute.tsx b/apps/edr-freight-web/backoffice/src/record-management/routes/PrivateRoute.tsx
new file mode 100644
index 000000000..9e8bcd031
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/routes/PrivateRoute.tsx
@@ -0,0 +1,12 @@
+import Cookies from "js-cookie";
+import { Navigate, Outlet } from "react-router-dom";
+
+export const PrivateRoute = () => {
+  const token = Cookies.get("auth-token");
+
+  if (!token) {
+    return <Navigate to="/" replace />;
+  }
+
+  return <Outlet />;
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/routes/RouterContainer.tsx b/apps/edr-freight-web/backoffice/src/record-management/routes/RouterContainer.tsx
new file mode 100644
index 000000000..1935fd4f7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/routes/RouterContainer.tsx
@@ -0,0 +1,76 @@
+import { Suspense } from "react";
+import { Routes, Route } from "react-router-dom";
+import { RoutesDef, hasApprovalPermission } from "./routes";
+import { useUserDetail } from "../components/hooks/useUserDetail";
+import { useMemo } from "react";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import Loader from "../components/Loader/loader";
+import { ErrorBoundary } from "../components/common/ErrorBoundary";
+
+const RouteLoader = () => (
+  <div className="flex items-center justify-center h-64">
+    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900" />
+  </div>
+);
+
+const RouterContainer = () => {
+  const { userDetails, selectedPositionPermissionKeys } = useAuthUser();
+  const { permissionKeys, isLoading, error } = useUserDetail(userDetails);
+
+  const effectivePermissionKeys = useMemo(() => {
+    if (
+      hasApprovalPermission(permissionKeys || []) &&
+      !hasApprovalPermission(selectedPositionPermissionKeys)
+    ) {
+      return (permissionKeys || []).filter(
+        (permission) => !["can:sendToRO", "can:approveRecords"].includes(permission),
+      );
+    }
+
+    return permissionKeys || [];
+  }, [permissionKeys, selectedPositionPermissionKeys]);
+
+  // Memoize routes to prevent recreation on every render
+  const routes = useMemo(() => {
+    return RoutesDef(effectivePermissionKeys, selectedPositionPermissionKeys);
+  }, [effectivePermissionKeys, selectedPositionPermissionKeys]);
+
+  if (isLoading) {
+    return (
+      <Loader className="min-h-screen" label="Loading Record Management..." />
+    );
+  }
+  if (error) return <div>Error loading permissions</div>;
+
+  return (
+    <ErrorBoundary>
+    <Suspense fallback={<RouteLoader />}>
+      <Routes>
+        {routes.map((route, index) => {
+          const routeProps: any = { element: route.element };
+          if (route.index) {
+            routeProps.index = true;
+          } else {
+            routeProps.path = route.path;
+          }
+          return (
+            <Route {...routeProps} key={index}>
+              {route?.children?.map((child, index2) => {
+                const childProps: any = { element: child.element };
+                if (child.index) {
+                  childProps.index = true;
+                } else {
+                  childProps.path = child.path;
+                }
+                return <Route {...childProps} key={index2} />;
+              })}
+            </Route>
+          );
+        })}
+      </Routes>
+    </Suspense>
+    </ErrorBoundary>
+  );
+};
+
+export default RouterContainer;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/routes/routes.ts b/apps/edr-freight-web/backoffice/src/record-management/routes/routes.ts
new file mode 100644
index 000000000..41e42e2ed
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/routes/routes.ts
@@ -0,0 +1,416 @@
+import React, { lazy } from "react";
+import { IRouteDef } from "../types/routes";
+
+const UserRecordsLayout = lazy(
+  () => import("../components/userRecords/userRecordsLayout"),
+);
+const UserRecordsPage = lazy(
+  () => import("@/record-management/pages/User/userRecords"),
+);
+const Dashboard = lazy(
+  () => import("@/record-management/pages/User/dashboard"),
+);
+const DashboardRO = lazy(
+  () => import("@/record-management/pages/RecordOfficer/dashboard"),
+);
+const UploadTeeterAndSignaturePage = lazy(
+  () => import("@/record-management/pages/uploadTeeterAndSignature"),
+);
+const EditUserRecordsPage = lazy(
+  () => import("@/record-management/pages/User/editUserRecordPage"),
+);
+const AddUserRecordsPage = lazy(
+  () => import("@/record-management/pages/User/addUserRecordPage"),
+);
+
+const cc = lazy(
+  () => import("@/record-management/components/userIncoming/viewIncoming/cc"),
+);
+const IncomingViewer = lazy(
+  () =>
+    import("@/record-management/components/userIncoming/viewIncoming/incoming"),
+);
+const internal = lazy(
+  () =>
+    import("@/record-management/components/userIncoming/viewIncoming/internal"),
+);
+const forYourReference = lazy(
+  () =>
+    import("@/record-management/components/userIncoming/viewIncoming/forYourReference"),
+);
+
+const ExternalIncomingRecordsPage = lazy(
+  () => import("@/record-management/pages/User/externalIncomingRecords"),
+);
+const InternalIncomingRecordsPage = lazy(
+  () => import("@/record-management/pages/User/internalIncomingRecords"),
+);
+const CCIncomingRecordsPage = lazy(
+  () => import("@/record-management/pages/User/ccIncomingRecords"),
+);
+const ForYourReferenceIncomingRecordsPage = lazy(
+  () =>
+    import("@/record-management/pages/User/forYourReferenceIncomingRecords"),
+);
+const ApproveRecordsPage = lazy(
+  () => import("@/record-management/pages/User/approveRecords"),
+);
+const ApproveRecordPage = lazy(
+  () =>
+    import("@/record-management/components/Approval/approve/approveRecordPage"),
+);
+const UserIncomingRecordsLayout = lazy(
+  () =>
+    import("@/record-management/components/userIncoming/userIncomingLayout"),
+);
+
+const IncomingRecordsPage = lazy(
+  () => import("@/record-management/pages/RecordOfficer/incomingRecords"),
+);
+const IncomingRecordsHistory = lazy(
+  () =>
+    import("@/record-management/pages/RecordOfficer/incomingRecordsHistory"),
+);
+const IncomingnonSmartExternal = lazy(
+  () => import("@/record-management/pages/RecordOfficer/nonSmartExternal"),
+);
+const AddIncomingRecordPage = lazy(
+  () => import("@/record-management/pages/RecordOfficer/AddIncomingRecord"),
+);
+const SoftDeleteRO = lazy(
+  () =>
+    import("@/record-management/components/recordOfficer/incomingRecords/softDelete"),
+);
+const DelegationRecordsPage = lazy(
+  () =>
+    import("@/record-management/pages/User/Delegation/delegationRecordsPage"),
+);
+const EditDelegationPage = lazy(
+  () => import("@/record-management/components/delegation/editDelegation"),
+);
+const delegationLetterView = lazy(
+  () =>
+    import("@/record-management/components/delegation/viewDelegationLetter"),
+);
+
+const OutgoingRecordsPage = lazy(
+  () => import("@/record-management/pages/RecordOfficer/outgoingRecords"),
+);
+const PendingRecordsPage = lazy(
+  () => import("@/record-management/pages/RecordOfficer/pendingRecordsPage"),
+);
+const ConvertRecordsPage = lazy(
+  () => import("@/record-management/pages/RecordOfficer/convertRecordsPage"),
+);
+const ViewRecordDetailsPage = lazy(
+  () => import("@/record-management/pages/User/viewRecordDetailsPage"),
+);
+const ViewRecordDetailsCollaboration = lazy(
+  () =>
+    import("@/record-management/components/collaborations/viewCollaborationRecord"),
+);
+const ViewLetter = lazy(
+  () => import("@/record-management/pages/User/ViewLetter"),
+);
+
+const ViewOutgoingRecordOfficerDetailsPage = lazy(
+  () =>
+    import("@/record-management/components/recordOfficer/outgoingRecords/viewOutgoing"),
+);
+const ViewOutgoingRecordOfficerDetailsPage2 = lazy(
+  () =>
+    import("@/record-management/components/recordOfficer/outgoingRecords/outgoingview"),
+);
+const viewOutgoing = lazy(
+  () =>
+    import("@/record-management/components/recordOfficer/outgoingRecords/view"),
+);
+const viewPending = lazy(
+  () =>
+    import("@/record-management/components/pendingRecords/viewPendingRecords"),
+);
+const ViewApproveRecordDetailsPage = lazy(
+  () => import("@/record-management/pages/Approval/viewApprovalRecordPage"),
+);
+const ViewProcessedApprovalDetailsPage = lazy(
+  () =>
+    import("@/record-management/pages/Approval/viewProcessedApprovalDetailsPage"),
+);
+const RecordOfficerSettingsPage = lazy(
+  () => import("@/record-management/pages/Settings/recordOfficerSettingsPage"),
+);
+const RecordPreviewPage = lazy(
+  () => import("@/record-management/pages/RecordPreviewPage"),
+);
+const SoftDelete = lazy(
+  () => import("@/record-management/components/userRecords/softDelete"),
+);
+
+const ViewLetterTemplatePage = lazy(
+  () =>
+    import("@/record-management/pages/LetterTemplates/viewLetterTemplatePage"),
+);
+const AddLetterTemplatePage = lazy(
+  () =>
+    import("@/record-management/pages/LetterTemplates/addLetterTemplatePage"),
+);
+const EditLetterTemplatePage = lazy(
+  () =>
+    import("@/record-management/pages/LetterTemplates/editLetterTemplatePage"),
+);
+const AddDelegationPage = lazy(
+  () => import("@/record-management/pages/User/Delegation/addDelegationPage"),
+);
+const Collaborations = lazy(
+  () => import("../components/collaborations/collaboration"),
+);
+const RecordOfficerIncomingViewer = lazy(
+  () =>
+    import("@/record-management/components/recordOfficer/incomingRecords/viewIncoming"),
+);
+const RecordOfficerIncomingEdit = lazy(
+  () => import("@/record-management/pages/RecordOfficer/EditIncomingRecord"),
+);
+const AdvancedDashboardPage = lazy(
+  () => import("@/pages/AdvancedDashboardPage"),
+);
+
+const ReviewAllPendingUsers = lazy(
+  () => import("@/user-management/components/content/AllPendingUsers"),
+);
+
+export const approvalPermissionKeys = ["can:sendToRO", "can:approveRecords"];
+
+export const hasApprovalPermission = (permissions: string[]) =>
+  approvalPermissionKeys.some((key) => permissions.includes(key));
+
+const UserRoutesDef = (
+  permissions: string[],
+  selectedPositionPermissions: string[] = [],
+): IRouteDef[] => {
+  const routes: IRouteDef[] = [
+    { path: "/dashboard", element: React.createElement(Dashboard) },
+    {
+      path: "/advanced-dashboard",
+      element: React.createElement(AdvancedDashboardPage),
+    },
+
+    {
+      path: "/userRecords",
+      element: React.createElement(UserRecordsLayout),
+      children: [
+        { index: true, element: React.createElement(UserRecordsPage) },
+        {
+          path: "addUserRecord/:id?",
+          element: React.createElement(AddUserRecordsPage),
+        },
+        {
+          path: "editUserRecord/:id",
+          element: React.createElement(EditUserRecordsPage),
+        },
+
+        {
+          path: "viewRecord/:id",
+          element: React.createElement(ViewRecordDetailsPage),
+        },
+        {
+          path: "record-preview",
+          element: React.createElement(RecordPreviewPage),
+        },
+        {
+          path: "softDelete",
+          element: React.createElement(SoftDelete),
+        },
+      ],
+    },
+
+    { path: "/collaborations", element: React.createElement(Collaborations) },
+    {
+      path: "/collaborations/viewRecord/:id",
+      element: React.createElement(ViewRecordDetailsCollaboration),
+    },
+
+    { path: "/viewLetterPage/:id", element: React.createElement(ViewLetter) },
+
+    {
+      path: "/delegation",
+      element: React.createElement(DelegationRecordsPage),
+    },
+    {
+      path: "/delegation/new",
+      element: React.createElement(AddDelegationPage),
+    },
+    {
+      path: "/editDelegation/:id",
+      element: React.createElement(EditDelegationPage),
+    },
+    {
+      path: "/viewDelegationLetter/:id",
+      element: React.createElement(delegationLetterView),
+    },
+
+    {
+      path: "/userIncoming",
+      element: React.createElement(UserIncomingRecordsLayout),
+      children: [
+        {
+          index: true,
+          element: React.createElement(ExternalIncomingRecordsPage),
+        },
+        {
+          path: "internal",
+          element: React.createElement(InternalIncomingRecordsPage),
+        },
+        {
+          path: "cc",
+          element: React.createElement(CCIncomingRecordsPage),
+        },
+        {
+          path: "for-your-reference",
+          element: React.createElement(ForYourReferenceIncomingRecordsPage),
+        },
+      ],
+    },
+
+    {
+      path: "/viewIncoming/internal/:id",
+      element: React.createElement(internal),
+    },
+    {
+      path: "/viewIncoming/incoming/:id",
+      element: React.createElement(IncomingViewer),
+    },
+    {
+      path: "/uploadTeeterandSignature",
+      element: React.createElement(UploadTeeterAndSignaturePage),
+    },
+    { path: "/viewIncoming/cc/:id", element: React.createElement(cc) },
+    {
+      path: "/viewIncoming/for-your-reference/:id",
+      element: React.createElement(forYourReference),
+    },
+  ];
+
+  const hasPermissionToApproveUser = ["can:activateEmployee"];
+  if (hasPermissionToApproveUser.some((key) => permissions.includes(key))) {
+    routes.push({
+      path: "/employees/pending",
+      element: React.createElement(ReviewAllPendingUsers),
+    });
+  }
+  if (hasApprovalPermission(selectedPositionPermissions)) {
+    routes.push(
+      { path: "/approval", element: React.createElement(ApproveRecordsPage) },
+      {
+        path: "/approval/:recordId",
+        element: React.createElement(ApproveRecordPage),
+      },
+      // {
+      //   path: "/uploadTeeterandSignature",
+      //   element: React.createElement(UploadTeeterAndSignaturePage),
+      // },
+      {
+        path: "/viewApproval/:id",
+        element: React.createElement(ViewApproveRecordDetailsPage),
+      },
+      {
+        path: "/viewProcessedApproval/:id",
+        element: React.createElement(ViewProcessedApprovalDetailsPage),
+      },
+    );
+  }
+  if (permissions.includes("can:dispatchRecords")) {
+    return [
+      {
+        path: "/recordOfficer/outgoing",
+        element: React.createElement(OutgoingRecordsPage),
+      },
+      {
+        path: "/recordOfficer/incoming",
+        element: React.createElement(IncomingRecordsPage),
+      },
+      {
+        path: "/pending",
+        element: React.createElement(PendingRecordsPage),
+      },
+    ];
+  }
+  return routes;
+};
+
+const RecordOfficerRoutesDef: IRouteDef[] = [
+  {
+    path: "/dashboard",
+    element: React.createElement(DashboardRO),
+  },
+  {
+    path: "/recordOfficer/outgoing",
+    element: React.createElement(OutgoingRecordsPage),
+  },
+  {
+    path: "/recordOfficer/incoming",
+    element: React.createElement(IncomingRecordsPage),
+  },
+  {
+    path: "/recordOfficer/incomingHistory",
+    element: React.createElement(IncomingRecordsHistory),
+  },
+  {
+    path: "/recordOfficer/incomingNonSmartExternal",
+    element: React.createElement(IncomingnonSmartExternal),
+  },
+  {
+    path: "/recordOfficer/incoming/add",
+    element: React.createElement(AddIncomingRecordPage),
+  },
+  {
+    path: "/recordOfficer/incoming/softDelete",
+    element: React.createElement(SoftDeleteRO),
+  },
+  { path: "/pending", element: React.createElement(PendingRecordsPage) },
+  { path: "/convert/:id", element: React.createElement(ConvertRecordsPage) },
+  {
+    path: "/recordViewIncoming/outgoing/:id",
+    element: React.createElement(ViewOutgoingRecordOfficerDetailsPage),
+  },
+  {
+    path: "/outgoingview/:id",
+    element: React.createElement(ViewOutgoingRecordOfficerDetailsPage2),
+  },
+  {
+    path: "/viewIncoming/:id/:type",
+    element: React.createElement(RecordOfficerIncomingViewer),
+  },
+  {
+    path: "/editIncoming/:id",
+    element: React.createElement(RecordOfficerIncomingEdit),
+  },
+  { path: "/viewPending/:id", element: React.createElement(viewPending) },
+  { path: "/view/:id", element: React.createElement(viewOutgoing) },
+  {
+    path: "/officersettings",
+    element: React.createElement(RecordOfficerSettingsPage),
+  },
+  {
+    path: "/letterTemplates/add",
+    element: React.createElement(AddLetterTemplatePage),
+  },
+  {
+    path: "/letterTemplates/view/:id",
+    element: React.createElement(ViewLetterTemplatePage),
+  },
+  {
+    path: "/letterTemplates/edit/:id",
+    element: React.createElement(EditLetterTemplatePage),
+  },
+];
+
+export const RoutesDef = (
+  permissions: string[],
+  selectedPositionPermissions: string[] = [],
+): IRouteDef[] => {
+  if (permissions.includes("can:dispatchRecords")) {
+    return RecordOfficerRoutesDef;
+  }
+  return UserRoutesDef(permissions, selectedPositionPermissions);
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/Recordservice.ts b/apps/edr-freight-web/backoffice/src/record-management/services/Recordservice.ts
new file mode 100644
index 000000000..07b6b0ccb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/Recordservice.ts
@@ -0,0 +1,1036 @@
+// import {
+//   AcceptIncomingRecordDto,
+//   AssignIncomingRecordDto,
+//   ReAssignRecordDto,
+// } from "@/record-management/dto/userRecords/usersDto";
+// import { UserDto } from "@/record-management/dto/userRecords/userDto";
+// import {
+//   Seal,
+//   SealDetail,
+// } from "@/record-management/components/hooks/useSeals";
+// import Cookies from "js-cookie";
+// const API_URL = "http://iam-dev.smart.aaca.gov.et/";
+// const Record_API_URL = "http://record-dev.smart.aaca.gov.et/";
+
+// export const getOrganizationUnitId = (): string | null => {
+//   const userDataString = Cookies.get("auth-user");
+//   if (!userDataString) return null;
+
+//   try {
+//     const userData: UserDto = JSON.parse(userDataString);
+//     return userData.employee?.[0]?.unitId || "";
+//   } catch (e) {
+//     console.error("Invalid JSON in localStorage userData:", e);
+//     return null;
+//   }
+// };
+
+// // Utility function to get cookie by name
+// const getCookie = (name: string): string | null => {
+//   const value = `; ${document.cookie}`;
+//   const parts = value.split(`; ${name}=`);
+//   if (parts.length === 2) return parts.pop()?.split(";").shift() || null;
+//   return null;
+// };
+
+// // Get auth token from cookie
+// const getAuthToken = (): string => {
+//   const token = getCookie("auth-token");
+//   if (!token) {
+//     throw new Error("No auth token found in cookies");
+//   }
+//   return token;
+// };
+
+// const defaultHeaders = {
+//   "Content-Type": "application/json",
+//   get Authorization() {
+//     return `Bearer ${getAuthToken()}`;
+//   },
+// };
+
+// const fetchWithAuth = async (url: string, options: RequestInit = {}) => {
+//   options.headers = {
+//     ...defaultHeaders,
+//     ...(options.headers || {}),
+//   };
+//   const res = await fetch(url, options);
+//   if (!res.ok) {
+//     console.error(
+//       `Failed request: ${res.status} ${res.statusText}`,
+//       await res.text()
+//     );
+//     const errorData = await res.json().catch(() => null);
+//     const message = errorData?.message || res.statusText;
+//     throw new Error(message);
+//   }
+//   return res;
+// };
+
+// const createWithAuth = async (url: string, data: any): Promise<any> => {
+//   const res = await fetchWithAuth(url, {
+//     method: "POST",
+//     body: JSON.stringify(data),
+//   });
+//   return res.json();
+// };
+
+// export const fetchRecords = async (): Promise<any> => {
+//   const res = await fetchWithAuth(`${Record_API_URL}api/records`);
+//   return await res.json();
+// };
+
+// export const fetchValidOrganization = async (): Promise<any> => {
+//   const res = await fetchWithAuth(
+//     `${API_URL}api/organizations/record-receiving`
+//   );
+//   return await res.json();
+// };
+
+// export const fetchOrganizations = async (): Promise<any> => {
+//   try {
+//     const response = await fetch(`${API_URL}api/organizations`, {
+//       method: "GET",
+//       headers: {
+//         Accept: "*/*",
+//         "Content-Type": "application/json",
+//         Authorization: `Bearer ${getAuthToken()}`,
+//       },
+//     });
+
+//     if (!response.ok) {
+//       const errorText = await response.text();
+//       console.error("Server response body:", errorText);
+//       throw new Error(`HTTP error! status: ${response.status}`);
+//     }
+//     const data = await response.json();
+//     return data;
+//   } catch (error) {
+//     console.error("Error fetching organizations:", error);
+//     return null;
+//   }
+// };
+
+// export const fetchOrganizationById = async (
+//   organizationId: string
+// ): Promise<any> => {
+//   const res = await fetchWithAuth(
+//     `${API_URL}api/organizations/${organizationId}`
+//   );
+//   return await res.json();
+// };
+
+// export const fetchMyRecordById = async (recordId: string): Promise<any> => {
+//   const res = await fetchWithAuth(`${Record_API_URL}api/records/${recordId}`);
+//   return await res.json();
+// };
+
+// export const fetchListOfDepartments = async (
+//   organizationId: string
+// ): Promise<any> => {
+//   try {
+//     const response = await fetch(
+//       `${API_URL}api/organizations/${organizationId}/departments`,
+//       {
+//         method: "GET",
+//         headers: {
+//           "Content-Type": "application/json",
+//         },
+//       }
+//     );
+//     const data = await response.json();
+//     return data;
+//   } catch (error) {
+//     console.error("Error fetching departments:", error);
+//     return null;
+//   }
+// };
+
+// export const getMe = async (): Promise<any> => {
+//   try {
+//     const response = await fetch(`${API_URL}api/me`, {
+//       method: "GET",
+//       headers: {
+//         "Content-Type": "application/json",
+//       },
+//     });
+//     const data = await response.json();
+//     return data;
+//   } catch (error) {
+//     console.error("Error fetching user data:", error);
+//     return null;
+//   }
+// };
+
+// export const getIncoming = async (
+//   incomingtype?: string,
+//   status?: string,
+//   skip?: number,
+//   take?: number
+// ): Promise<{ items: any[]; count: number }> => {
+//   try {
+//     const skdip = skip || 0;
+//     const takde = take || 10;
+
+//     const url = new URL(`${Record_API_URL}api/incoming-instances/get-my`);
+//     if (incomingtype) {
+//       url.searchParams.append("recordType", incomingtype);
+//     }
+//     if (status) {
+//       url.searchParams.append("status", status);
+//     }
+//     url.searchParams.append("skip", skdip.toString());
+//     url.searchParams.append("take", takde.toString());
+
+//     const response = await fetchWithAuth(url.toString());
+
+//     if (!response.ok) throw new Error("Network response was not ok");
+
+//     const data = await response.json();
+
+//     return {
+//       items: data.items || [],
+//       count: data.count || 0,
+//     };
+//   } catch (error) {
+//     console.error("Error fetching incoming records:", error);
+//     return { items: [], count: 0 };
+//   }
+// };
+
+// export const getCCIncoming = async (
+//   skip?: number,
+//   take?: number
+// ): Promise<any> => {
+//   const res = await fetchWithAuth(
+//     `${Record_API_URL}api/incoming-instances/get-my-cc`,
+//     {
+//       method: "POST",
+//       body: JSON.stringify({
+//         skip: skip || 0,
+//         take: take || 10,
+//       }),
+//     }
+//   );
+//   const data = await res.json();
+//   return data;
+// };
+
+// export const fetchInternalDepartments = async (): Promise<any> => {
+//   try {
+//     const organizationUnitId = getOrganizationUnitId();
+//     const response = await fetch(
+//       `${API_URL}api/positions/list/${organizationUnitId}`,
+//       {
+//         method: "GET",
+//         headers: {
+//           "Content-Type": "application/json",
+//           Authorization: `Bearer ${getAuthToken()}`,
+//         },
+//       }
+//     );
+//     const data = await response.json();
+//     return data;
+//   } catch (error) {
+//     console.error("Error fetching internal departments:", error);
+//     return null;
+//   }
+// };
+
+// export const fetchRecordTypes = async (): Promise<any> => {
+//   try {
+//     const response = await fetch(`${Record_API_URL}api/record-types`, {
+//       method: "GET",
+//       headers: {
+//         "Content-Type": "application/json",
+//         Authorization: `Bearer ${getAuthToken()}`,
+//       },
+//     });
+//     if (!response.ok) {
+//       throw new Error(response.statusText);
+//     }
+//     const data = await response.json();
+//     return data;
+//   } catch (error) {
+//     console.error("Error fetching record types:", error);
+//     return null;
+//   }
+// };
+
+// // Utility function to validate UUID (v4)
+// function isValidUUID(uuid: string): boolean {
+//   return /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(
+//     uuid
+//   );
+// }
+
+// export const UploadAttachment = async (
+//   file: File,
+//   recordContentId: string
+// ): Promise<{
+//   presigned(file: File, presigned: any): unknown;
+//   id(id: any, recordContentId: string, arg2: boolean): unknown;
+//   uploadUrl: string;
+//   attachmentId: string;
+//   responseParentId?: string;
+// }> => {
+//   try {
+//     if (!isValidUUID(recordContentId)) {
+//       throw new Error("Invalid recordContentId format");
+//     }
+//     const requestBody = {
+//       fileInfo: {
+//         fileName: file.name,
+//         contentType: file.type || "application/octet-stream",
+//         originalname: file.name,
+//       },
+//       name: {
+//         am: file.name,
+//         en: file.name,
+//       },
+//       recordContentId,
+//     };
+
+//     const response = await fetch(`${Record_API_URL}api/record-attachments`, {
+//       method: "POST",
+//       headers: {
+//         "Content-Type": "application/json",
+//         Authorization: `Bearer ${getAuthToken()}`,
+//       },
+//       body: JSON.stringify(requestBody),
+//     });
+
+//     if (!response.ok) {
+//       throw new Error(`HTTP error! status: ${response.status}`);
+//     }
+
+//     const data = await response.json();
+
+//     return data;
+//   } catch (error) {
+//     console.error("Error adding attachment:", error);
+//     throw error;
+//   }
+// };
+
+// export const UploadFile = async (
+//   file: File,
+//   uploadUrl: string | undefined | any
+// ): Promise<void> => {
+//   if (!uploadUrl) {
+//     throw new Error("Upload URL is undefined.");
+//   }
+//   const uploadResponse = await fetch(uploadUrl, {
+//     method: "PUT",
+//     body: file,
+//     headers: {
+//       "Content-Type": file.type || "application/octet-stream",
+//     },
+//   });
+//   if (!uploadResponse.ok) {
+//     throw new Error(uploadResponse.statusText);
+//   }
+// };
+
+// export const fetchAttachment = async (recordId: string): Promise<any> => {
+//   try {
+//     const response = await fetch(
+//       `${Record_API_URL}api/records-attachments/${recordId}`,
+//       {
+//         method: "GET",
+//         headers: {
+//           "Content-Type": "application/json",
+//           Authorization: `Bearer ${getAuthToken()}`,
+//         },
+//       }
+//     );
+//     if (!response.ok) {
+//       throw new Error(response.statusText);
+//     }
+//     const data = await response.json();
+//     return data;
+//   } catch (error) {
+//     console.error("Error fetching attachments:", error);
+//     return null;
+//   }
+// };
+
+// export const deleteAttachment = async (attachmentId: string): Promise<any> => {
+//   try {
+//     const response = await fetch(
+//       `${Record_API_URL}api/records-attachments/${attachmentId}`,
+//       {
+//         method: "DELETE",
+//         headers: {
+//           "Content-Type": "application/json",
+//           Authorization: `Bearer ${getAuthToken()}`,
+//         },
+//       }
+//     );
+//     if (!response.ok) {
+//       throw new Error(response.statusText);
+//     }
+//     const data = await response.json();
+//     return data;
+//   } catch (error) {
+//     console.error("Error deleting attachment:", error);
+//     return null;
+//   }
+// };
+
+// export const EditAttachment = async (
+//   attachmentId: string,
+//   attachmentData: any
+// ): Promise<any> => {
+//   try {
+//     const response = await fetch(
+//       `${Record_API_URL}api/records-attachments/${attachmentId}`,
+//       {
+//         method: "PUT",
+//         headers: {
+//           "Content-Type": "application/json",
+//           Authorization: `Bearer ${getAuthToken()}`,
+//         },
+//         body: JSON.stringify(attachmentData),
+//       }
+//     );
+//     if (!response.ok) {
+//       throw new Error(response.statusText);
+//     }
+//     const data = await response.json();
+//     return data;
+//   } catch (error) {
+//     console.error("Error editing attachment:", error);
+//     return null;
+//   }
+// };
+
+// export const updateAttachmentStatus = async (
+//   attachmentId: string | undefined | any,
+//   parentId: string,
+//   isUploaded: boolean
+// ) => {
+//   const uuidRegex =
+//     /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+
+//   if (!uuidRegex.test(attachmentId)) {
+//     throw new Error(`Invalid attachmentId format: ${attachmentId}`);
+//   }
+
+//   if (!uuidRegex.test(parentId)) {
+//     throw new Error(`Invalid parentId format: ${parentId}`);
+//   }
+
+//   const response = await fetch(
+//     `${Record_API_URL}api/record-attachments/${attachmentId}/upload-status`,
+//     {
+//       method: "PATCH",
+//       headers: {
+//         "Content-Type": "application/json",
+//         Authorization: `Bearer ${getAuthToken()}`,
+//       },
+//       body: JSON.stringify({
+//         id: attachmentId,
+//         parentId,
+//         uploadedSuccessfully: isUploaded,
+//       }),
+//     }
+//   );
+
+//   if (!response.ok) {
+//     const error = await response.json();
+//     throw new Error(error.message || "Status update failed");
+//   }
+// };
+
+// export const updateIncomingAttachmentStatus = async (
+//   recordId: string,
+//   isUploaded: boolean
+// ) => {
+//   const response = await fetch(`${Record_API_URL}api/records/upload-status`, {
+//     method: "PATCH",
+//     headers: {
+//       "Content-Type": "application/json",
+//       Authorization: `Bearer ${getAuthToken()}`,
+//     },
+//     body: JSON.stringify({
+//       recordId,
+//       uploadedSuccessfully: isUploaded,
+//     }),
+//   });
+
+//   if (!response.ok) {
+//     const error = await response.json();
+//     throw new Error(error.message || "Status update failed");
+//   }
+// };
+
+// // export const fetchMe = async (): Promise<any> => {
+// //   const res = await fetchWithAuth(`${API_URL}api/auth/me`);
+// //   if (!res.ok) {
+// //     const errorData = await res.json().catch(() => null);
+// //     const message = errorData?.message || res.statusText;
+// //     throw new Error(message);
+// //   }
+// //   return await res.json();
+// // };
+
+// // In Recordservice.ts
+// export const fetchMe = async () => {
+//   try {
+//     // For cookie-based auth, you often don't need to manually set headers
+//     const response = await fetch(`${API_URL}api/auth/me`, {
+//       headers: {
+//         "Content-Type": "application/json",
+//         Authorization: `Bearer ${getAuthToken()}`,
+//       },
+//     });
+//     return await response.json();
+//   } catch (error) {
+//     console.error("Error fetching user data:", error);
+//     throw error;
+//   }
+// };
+// export const changePassword = async (data: {
+//   email: string;
+//   verificationCode: string;
+//   newPassword: string;
+//   confirmPassword: string;
+// }): Promise<any> => {
+//   const res = await fetchWithAuth(`${API_URL}api/auth/change-password`, {
+//     method: "PATCH",
+//     headers: {
+//       "Content-Type": "application/json",
+//     },
+//     body: JSON.stringify(data),
+//   });
+
+//   if (!res.ok) {
+//     const errorData = await res.json().catch(() => null);
+//     const message = errorData?.message || res.statusText;
+//     throw new Error(message);
+//   }
+
+//   return await res.json();
+// };
+
+// export const requestPasswordReset = async (email: string): Promise<any> => {
+//   const res = await fetchWithAuth(`${API_URL}api/auth/forgot-password`, {
+//     method: "POST",
+//     headers: {
+//       "Content-Type": "application/json",
+//     },
+//     body: JSON.stringify({ email }),
+//   });
+
+//   if (!res.ok) {
+//     const errorData = await res.json().catch(() => null);
+//     const message = errorData?.message || res.statusText;
+//     throw new Error(message);
+//   }
+
+//   return await res.json();
+// };
+
+// export const submitRecord = async (
+//   recordId: string,
+//   delegatorId?: string
+// ): Promise<void> => {
+//   try {
+//     const response = await fetch(
+//       `${Record_API_URL}api/records/submit/${recordId}`,
+//       {
+//         method: "PATCH",
+//         headers: {
+//           "Content-Type": "application/json",
+//           Authorization: `Bearer ${getAuthToken()}`,
+//           ...(delegatorId && { "x-delegator-id": delegatorId }),
+//         },
+//       }
+//     );
+
+//     if (!response.ok) {
+//       const errorText = await response.text();
+//       throw new Error(
+//         `Failed to submit record: ${response.status} ${errorText}`
+//       );
+//     }
+
+//     // No need to process the response body if it's a PDF
+//   } catch (error) {
+//     console.error("Error submitting record:", error);
+//     throw error;
+//   }
+// };
+
+// export const sendToRO = async (recordId: string): Promise<void> => {
+//   try {
+//     const response = await fetch(
+//       `${Record_API_URL}api/outgoing-instances/send-to-ro/${recordId}`,
+//       {
+//         method: "PATCH",
+//         headers: {
+//           "Content-Type": "application/json",
+//           Authorization: `Bearer ${getAuthToken()}`,
+//         },
+//       }
+//     );
+
+//     if (!response.ok) {
+//       const errorBody = await response.json();
+//       const errorMessage = errorBody.message || response.statusText;
+//       throw new Error(errorMessage);
+//     }
+
+//     // No need to process the PDF or response body
+//   } catch (error) {
+//     console.error("Error sending to RO:", error);
+//     throw error;
+//   }
+// };
+
+// export const fetchApprovalTasks = async (): Promise<any> => {
+//   try {
+//     const response = await fetch(
+//       `${Record_API_URL}api/outgoing-instances/my-workflows`,
+//       {
+//         method: "GET",
+//         headers: {
+//           "Content-Type": "application/json",
+//           Authorization: `Bearer ${getAuthToken()}`,
+//         },
+//       }
+//     );
+//     if (!response.ok) {
+//       throw new Error(response.statusText);
+//     }
+//     const data = await response.json();
+//     return data;
+//   } catch (error) {
+//     console.error("Error fetching approval tasks:", error);
+//     throw error;
+//   }
+// };
+
+// export const sendBack = async (body: any): Promise<any> => {
+//   try {
+//     const response = await fetch(
+//       `${Record_API_URL}api/outgoing-instances/send-back-to-initiator`,
+//       {
+//         method: "POST",
+//         headers: {
+//           "Content-Type": "application/json",
+//           Authorization: `Bearer ${getAuthToken()}`,
+//         },
+//         body: JSON.stringify(body),
+//       }
+//     );
+
+//     if (!response.ok) {
+//       throw new Error(response.statusText);
+//     }
+
+//     // Don't attempt JSON parsing if body is empty
+//     const contentLength = response.headers.get("Content-Length");
+//     if (contentLength === "0" || !contentLength) {
+//       return null;
+//     }
+
+//     const data = await response.json();
+//     return data;
+//   } catch (error) {
+//     console.error("Error sending back:", error);
+//     throw error;
+//   }
+// };
+
+// export const goToNext = async (body: any): Promise<void> => {
+//   try {
+//     const response = await fetch(
+//       `${Record_API_URL}api/outgoing-instances/go-to-next`,
+//       {
+//         method: "POST",
+//         headers: {
+//           "Content-Type": "application/json",
+//           Authorization: `Bearer ${getAuthToken()}`,
+//         },
+//         body: JSON.stringify(body),
+//       }
+//     );
+
+//     if (!response.ok) {
+//       const contentType = response.headers.get("content-type");
+//       let errorMessage = response.statusText;
+
+//       if (contentType?.includes("application/json")) {
+//         const errorBody = await response.json();
+//         errorMessage = errorBody.message || errorMessage;
+//       } else if (contentType?.includes("text/plain")) {
+//         const textBody = await response.text();
+//         errorMessage = textBody || errorMessage;
+//       }
+
+//       throw new Error(errorMessage);
+//     }
+
+//     // No need to handle response body (PDF or JSON) — treat success as enough
+//   } catch (error) {
+//     console.error("Error going to next:", error);
+//     throw error;
+//   }
+// };
+
+// export const fetchToBeDispatched = async (): Promise<any> => {
+//   const url = `${Record_API_URL}api/outgoing-instances/to-be-dispatched`;
+//   const res = await fetchWithAuth(url);
+//   return await res.json();
+// };
+
+// export const fetchSpecificToBeDispatched = async (
+//   dispatchId: string
+// ): Promise<any> => {
+//   try {
+//     const url = `${Record_API_URL}api/records/record-pdf/${dispatchId}`;
+//     const res = await fetchWithAuth(url);
+//     return await res.json();
+//   } catch (error) {
+//     console.error("Error going to next:", error);
+//     throw error; // Re-throw the error to be handled by the caller
+//   }
+// };
+
+// // Recordservice.ts
+// export const fetchSeal = async (id: string): Promise<{ items: Seal[] }> => {
+//   try {
+//     const url = `${API_URL}api/seals/list/${id}`;
+//     const res = await fetchWithAuth(url);
+
+//     if (!res.ok) {
+//       throw new Error(`HTTP error! status: ${res.status}`);
+//     }
+
+//     const data = await res.json();
+
+//     if (!data?.items) {
+//       throw new Error("Invalid response structure");
+//     }
+
+//     return data;
+//   } catch (error) {
+//     console.error("Error fetching seals:", error);
+//     throw error;
+//   }
+// };
+
+// export const fetchSealById = async (sealId: string): Promise<SealDetail> => {
+//   try {
+//     const url = `${API_URL}api/seals/${sealId}`;
+//     const res = await fetchWithAuth(url);
+
+//     if (!res.ok) {
+//       throw new Error(`HTTP error! status: ${res.status}`);
+//     }
+
+//     const data = await res.json();
+
+//     if (!data?.id) {
+//       throw new Error("Invalid seal detail response");
+//     }
+
+//     return data;
+//   } catch (error) {
+//     console.error("Error fetching seal details:", error);
+//     throw error;
+//   }
+// };
+
+// export const dispatchRecord = async (body: any): Promise<any> => {
+//   const url = `${Record_API_URL}api/outgoing-instances/dispatch`;
+
+//   try {
+//     const response = await fetchWithAuth(url, {
+//       method: "PATCH",
+//       headers: {
+//         "Content-Type": "application/json",
+//         Authorization: `Bearer ${getAuthToken()}`,
+//       },
+//       body: JSON.stringify(body),
+//     });
+
+//     const contentType = response.headers.get("Content-Type");
+
+//     if (contentType?.includes("application/pdf")) {
+//       const blob = await response.blob();
+//       const pdfUrl = window.URL.createObjectURL(blob);
+//       window.open(pdfUrl, "_blank");
+//       return;
+//     } else {
+//       const contentLength = response.headers.get("Content-Length");
+//       if (contentLength === "0" || response.status === 204) {
+//         return;
+//       }
+
+//       if (contentType?.includes("application/json")) {
+//         const data = await response.json();
+//         return data;
+//       }
+
+//       return;
+//     }
+//   } catch (error) {
+//     console.error("Error going to next:", error);
+//     throw error;
+//   }
+// };
+
+// export const submitAndSendToRo = async (recordId: string): Promise<any> => {
+//   try {
+//     const url = `${Record_API_URL}api/records/submit-and-send-to-ro/${recordId}`;
+//     const response = await fetchWithAuth(url, {
+//       method: "PATCH",
+//       headers: {
+//         "Content-Type": "application/json",
+//         Authorization: `Bearer ${getAuthToken()}`,
+//       },
+//     });
+
+//     if (!response.ok) {
+//       const errorBody = await response.json();
+//       throw new Error(errorBody.message || "Failed to submit and send to RO.");
+//     }
+
+//     const data = await response.json();
+//     return data;
+//   } catch (error) {
+//     console.error("Error submitting and sending to RO:", error);
+//     throw error;
+//   }
+// };
+
+// export const fetchCCIncomingRecord = async () => {
+//   try {
+//     const url = `${Record_API_URL}api/records/cc-incoming-record`;
+//     await fetchWithAuth(url, {
+//       method: "GET",
+//       headers: {
+//         "Content-Type": "application/json",
+//         Authorization: `Bearer ${getAuthToken()}`,
+//       },
+//     });
+//   } catch {
+//     return null;
+//   }
+// };
+
+// export const reassigneRecord = async (
+//   body: ReAssignRecordDto
+// ): Promise<any> => {
+//   try {
+//     const url = `${Record_API_URL}api/incoming-instances/re-assign`;
+//     const response = await fetchWithAuth(url, {
+//       method: "POST",
+//       headers: {
+//         "Content-Type": "application/json",
+//         Authorization: `Bearer ${getAuthToken()}`,
+//       },
+//       body: JSON.stringify(body),
+//     });
+//     if (!response.ok) {
+//       const errorBody = await response.json();
+//       throw new Error(errorBody.message || "Failed to reassign record");
+//     }
+//     const data = await response.json();
+//     return data;
+//   } catch {
+//     return null;
+//   }
+// };
+
+// export const acceptRecord = async (
+//   body: AcceptIncomingRecordDto
+// ): Promise<any> => {
+//   try {
+//     const url = `${Record_API_URL}api/incoming-instances/respond`;
+//     const response = await fetchWithAuth(url, {
+//       method: "PATCH",
+//       headers: {
+//         "Content-Type": "application/json",
+//         Authorization: `Bearer ${getAuthToken()}`,
+//       },
+//       body: JSON.stringify(body),
+//     });
+//     if (!response.ok) {
+//       const errorBody = await response.json();
+//       throw new Error(errorBody.message || "Failed to reassign record");
+//     }
+//     const data = await response.json();
+//     return data;
+//   } catch {
+//     return null;
+//   }
+// };
+
+// export const fetchCurrentDepartment = async (
+//   organizationUnitId: string
+// ): Promise<any> => {
+//   try {
+//     const url = `${API_URL}api/units/current/${organizationUnitId}/employees`;
+//     const response = await fetchWithAuth(url, {
+//       method: "GET",
+//       headers: {
+//         "Content-Type": "application/json",
+//         Authorization: `Bearer ${getAuthToken()}`,
+//       },
+//     });
+//     if (!response.ok) {
+//       const errorBody = await response.json();
+//       throw new Error(errorBody.message || "Failed to get current department");
+//     }
+//     const data = await response.json();
+//     return data;
+//   } catch {
+//     return null;
+//   }
+// };
+
+// export const getMovementSlip = async (recordId: string): Promise<any> => {
+//   try {
+//     const url = `${Record_API_URL}api/incoming-instances/movement-slip/${recordId}`;
+//     const res = await fetchWithAuth(url);
+//     if (!res.ok) {
+//       const errorBody = await res.json();
+//       throw new Error(errorBody.message || "Failed to get movement slip");
+//     }
+//     const data = await res.json();
+//     return data;
+//   } catch {
+//     return null;
+//   }
+// };
+
+// export const getRemarks = async (recordId: string): Promise<any> => {
+//   try {
+//     const url = `${Record_API_URL}api/outgoing-histories/record-outgoing-history/${recordId}`;
+//     const res = await fetchWithAuth(url);
+//     if (!res.ok) {
+//       const errorBody = await res.json();
+//       throw new Error(errorBody.message || "Failed to get remarks");
+//     }
+//     const data = await res.json();
+//     return data;
+//   } catch {
+//     return null;
+//   }
+// };
+
+// export const createIncoming = async (body: any): Promise<any> => {
+//   try {
+//     const url = `${Record_API_URL}api/records/non-smart-record-pdf`;
+//     const res = await fetchWithAuth(url, {
+//       method: "POST",
+//       headers: {
+//         "Content-Type": "application/json",
+//       },
+//       body: JSON.stringify(body),
+//     });
+//     if (!res.ok) {
+//       const errorBody = await res.json();
+//       throw new Error(errorBody.message || "Failed to create incoming");
+//     }
+//     const data = await res.json();
+//     return data;
+//   } catch {
+//     return null;
+//   }
+// };
+
+// export const getTemplate = async (unitId: string): Promise<any> => {
+//   try {
+//     const url = `${Record_API_URL}api/record-templates/list/${unitId}`;
+//     const res = await fetchWithAuth(url);
+//     if (!res.ok) {
+//       const errorBody = await res.json();
+//       throw new Error(errorBody.message || "Failed to get template");
+//     }
+//     const data = await res.json();
+//     return data;
+//   } catch {
+//     return null;
+//   }
+// };
+
+// export const getRecordIncoming = async (): Promise<any> => {
+//   try {
+//     const url = `${Record_API_URL}api/record-boxes/my-unit-box`;
+//     const res = await fetchWithAuth(url);
+//     if (!res.ok) {
+//       const errorBody = await res.json();
+//       throw new Error(errorBody.message || "Failed to get record incoming");
+//     }
+//     const data = await res.json();
+//     return data;
+//   } catch {
+//     return null;
+//   }
+// };
+// export const dispatchRecord2 = async (): Promise<any> => {
+//   try {
+//     const response = await fetch(
+//       `${Record_API_URL}api/outgoing-instances/dispatched`,
+//       {
+//         method: "GET",
+//         headers: {
+//           "Content-Type": "application/json",
+//           Authorization: `Bearer ${getAuthToken()}`, // Uncomment if you need to use the token
+//         },
+//       }
+//     );
+//     const data = await response.json();
+//     return data;
+//   } catch (error) {
+//     console.error("Error fetching records:", error);
+//     return null;
+//   }
+// };
+// export const incomingRecords = async (): Promise<any> => {
+//   try {
+//     const response = await fetch(
+//       `${Record_API_URL}api/record-boxes/my-unit-box`,
+//       {
+//         method: "GET",
+//         headers: {
+//           "Content-Type": "application/json",
+//           Authorization: `Bearer ${getAuthToken()}`, // Uncomment if you need to use the token
+//         },
+//       }
+//     );
+//     const data = await response.json();
+//     return data;
+//   } catch (error) {
+//     console.error("Error fetching records:", error);
+//     return null;
+//   }
+// };
+// export const assignIncomingRecord = async (
+//   body: AssignIncomingRecordDto
+// ): Promise<any> => {
+//   try {
+//     const url = `${Record_API_URL}api/record-boxes/assign`;
+//     const response = await fetchWithAuth(url, {
+//       method: "POST",
+//       headers: {
+//         "Content-Type": "application/json",
+//         Authorization: `Bearer ${getAuthToken()}`,
+//       },
+//       body: JSON.stringify(body),
+//     });
+//     if (!response.ok) {
+//       const errorBody = await response.json();
+//       throw new Error(errorBody.message || "Failed to reassign record");
+//     }
+//     const data = await response.json();
+//     return data;
+//   } catch {
+//     return null;
+//   }
+// };
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/advancedDashboardService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/advancedDashboardService.ts
new file mode 100644
index 000000000..719e513d2
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/advancedDashboardService.ts
@@ -0,0 +1,117 @@
+import axios from "axios";
+import { withHeaders } from "./withHeaders";
+import chronicleInstance from "@/shared/services/chronicleInstance";
+
+export enum DashaboardParam {
+  POSITION = "position",
+  EMPLOYEE = "employee",
+}
+
+interface dashboardParam {
+  params?: Record<string, any>;
+}
+interface PermittedDashbaordName {
+  am: string;
+  en: string;
+}
+interface Description {
+  am: string;
+  en: string;
+}
+export interface PermittedDashboardItem {
+  createdAt: string;
+  updatedAt: string;
+  tenantId: string;
+  id: string;
+  name: PermittedDashbaordName;
+  metabaseDashboardNumber: number;
+  description: Description;
+  permissionId: string;
+  params?: DashaboardParam;
+}
+
+export interface ParameterItem {
+  createdAt: string;
+  updatedAt: string;
+  tenantId: string;
+  id: string;
+  key: string;
+  parameterType: string;
+  dateFilterOperator: string;
+  stringFilterOperator: string;
+  numberFilterOperator: string;
+  timeGroupingOption: string;
+  isArray: boolean;
+  optionsApi: string;
+  optionsSelectedField: string;
+  optionsDisplayColumns: string[];
+  valueOptions: ValueOption[];
+  metabaseDashboardId: string;
+}
+
+export interface ValueOption {
+  am: string;
+  en: string;
+  value: string;
+}
+
+export interface ParameterResponse {
+  count: number;
+  items: ParameterItem[];
+}
+
+interface PermittedDashboardResponse {
+  count: number;
+  items: PermittedDashboardItem[];
+}
+export const fetchListOfPermittedDashboards =
+  async (): Promise<PermittedDashboardResponse> => {
+    try {
+      const response = await chronicleInstance.get(
+        `/metabase-dashboards/permitted`,
+        {
+          headers: withHeaders(),
+        }
+      );
+      return response.data;
+    } catch (error) {
+      console.error("Error fetching List of Permitted Dashboards.", error);
+      throw error;
+    }
+  };
+
+export const fetchDashboardUrl = async (
+  body: dashboardParam,
+  id: string
+): Promise<any> => {
+  try {
+    const response = await chronicleInstance.post(
+      `/metabase-dashboards/${id}/iframe-url`,
+      body,
+      {
+        headers: withHeaders(),
+      }
+    );
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching Dashboard.", error);
+    throw error;
+  }
+};
+
+export const fetchListOfParameters = async (
+  dashboardId: string
+): Promise<ParameterResponse> => {
+  try {
+    const response = await chronicleInstance.get(
+      `/metabase-dashboard_parameters/list/${dashboardId}`,
+      {
+        headers: withHeaders(),
+      }
+    );
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching List of Permitted Dashboards.", error);
+    throw error;
+  }
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/alertService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/alertService.ts
new file mode 100644
index 000000000..fc8682ae3
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/alertService.ts
@@ -0,0 +1,28 @@
+import axiosInstance from "@/shared/services/axiosInstance";
+import { AxiosResponse } from "axios";
+import { withHeaders } from "./withHeaders";
+
+type SetupRequirements = {
+  hasSeal: boolean;
+  hasHeader: boolean;
+  hasFooter: boolean;
+  internalPrefix: boolean;
+  externalPrefix: boolean;
+  internalSuffix: boolean;
+  externalSuffix: boolean;
+};
+
+export interface AdminSetupAlertResponse {
+  unitId: string;
+  requirements: SetupRequirements;
+  allSatisfied: boolean;
+}
+
+export const fetchRequirementSatisfied = async (
+  id: string | number
+): Promise<AdminSetupAlertResponse> => {
+  const res = await axiosInstance.get(`/units/${id}/requirement-satisfied`, {
+    headers: withHeaders(),
+  });
+  return res.data; // <--- THIS IS KEY
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/approvalService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/approvalService.ts
new file mode 100644
index 000000000..1b169dc3d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/approvalService.ts
@@ -0,0 +1,252 @@
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+import Cookies from "js-cookie";
+import { AxiosResponse } from "axios";
+import {
+  AdjustmentDto,
+  SendBackDto,
+} from "@/record-management/dto/userRecords/userRecordsDto";
+import { withHeaders } from "./withHeaders";
+import { ProcessedApprovalRecordsResponseDto } from "@/record-management/dto/approval/newApprovalRecordsDto";
+
+export interface ApprovalRecordQueryParams {
+  orderBy?: string;
+  take?: number;
+  skip?: number;
+  order?: string;
+  action?: string;
+  isUrgent?: boolean;
+  canApprove?: boolean;
+  onReview?: boolean;
+  receiverEmployee?: string;
+  receiverPosition?: string;
+  subject?: string;
+  letterName?: string;
+  sendingPosition?: string;
+  fromUpdatedAt?: string;
+  toUpdatedAt?: string;
+  fromCreatedAt?: string;
+  toCreatedAt?: string;
+}
+
+export const getApiErrorMessage = (
+  error: any,
+  fallback = "Something went wrong.",
+) => {
+  if (error.response) {
+    const data = error.response.data;
+    if (data.exception?.message) return data.exception.message;
+    if (data.message) return data.message;
+    return error.response.statusText;
+  } else if (error.request) {
+    return "No response received from server.";
+  } else {
+    return error.message || fallback;
+  }
+};
+
+export const handleAxiosError = (
+  error: any,
+  defaultMessage = "An unknown error occurred.",
+) => {
+  if (error.response) {
+    const contentType = error.response.headers["content-type"];
+    const data = error.response.data;
+
+    if (contentType?.includes("application/json")) {
+      // Prefer the most specific error message if available
+      if (data.exception?.message) return data.exception.message;
+      if (data.message) return data.message;
+      return error.response.statusText;
+    } else if (contentType?.includes("text/plain")) {
+      return data || error.response.statusText;
+    } else {
+      return error.response.statusText;
+    }
+  } else if (error.request) {
+    return "No response received from server.";
+  } else {
+    return error.message || defaultMessage;
+  }
+};
+
+export const fetchApprovalTasks = async (
+  params?: ApprovalRecordQueryParams,
+): Promise<any> => {
+  try {
+    const response = await recordAxiosInstance.get(
+      `/outgoing-instances/my-workflows`,
+      {
+        params: {
+          take: 10,
+          ...params,
+        },
+        headers: withHeaders(),
+      },
+    );
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching approval tasks:", error);
+    throw error;
+  }
+};
+
+export const sendBack = async (body: SendBackDto): Promise<AxiosResponse> => {
+  try {
+    const response = await recordAxiosInstance.post(
+      `/outgoing-instances/go-to-next`,
+      body, // this is the POST body
+      {
+        headers: withHeaders(), // this is the Axios config (3rd argument)
+      },
+    );
+    return response;
+  } catch (error) {
+    console.error("Error sending back:", error);
+    throw error;
+  }
+};
+
+export const goToNext = async (body: AdjustmentDto): Promise<void> => {
+  try {
+    const response = await recordAxiosInstance.post(
+      `/outgoing-instances/go-to-next`,
+      body, // send body as payload
+      {
+        headers: withHeaders(),
+      },
+    );
+    return response.data;
+  } catch (error) {
+    console.error("[approvalService.goToNext]", error);
+    throw error;
+  }
+};
+
+export const sendToRO = async (
+  recordId: string,
+  stampId?: string,
+  signatureId?: string,
+  note?: string,
+  recordPrefixId?: string,
+  isWithTeamSignature?: boolean,
+): Promise<void> => {
+  try {
+    const response = await recordAxiosInstance.patch(
+      `/outgoing-instances/send-to-ro/${recordId}`,
+      {
+        stampId,
+        signatureId,
+        comment: note,
+        recordPrefixId,
+        ...(isWithTeamSignature !== undefined && { isWithTeamSignature }),
+      },
+      {
+        headers: withHeaders(),
+      },
+    );
+    return response.data;
+  } catch (error: any) {
+    const errorMessage = handleAxiosError(error, "Error Approving record");
+    console.error(errorMessage);
+    throw new Error(errorMessage);
+  }
+};
+
+export const submitRecord = async (
+  recordId: string,
+  delegatorId?: string,
+): Promise<void> => {
+  try {
+    const response = await recordAxiosInstance.patch(
+      `/records/submit/${recordId}`,
+      {}, // no body
+      {
+        headers: withHeaders(),
+      },
+    );
+    return response.data; // Axios automatically resolves to response.data
+    // No need for response.ok — Axios throws automatically on non-2xx responses
+  } catch (error: any) {
+    const errorMessage = handleAxiosError(error, "Error submitting record");
+    console.error(errorMessage);
+    throw new Error(errorMessage);
+  }
+};
+
+export const submitAndSendToRo = async (
+  id: string,
+  stampId?: string,
+  signatureId?: string,
+  note?: string,
+  recordPrefixId?: string,
+): Promise<any> => {
+  const url = `/records/submit-and-send-to-ro/${id}`;
+  const response = await recordAxiosInstance.patch(
+    url,
+    {
+      stampId,
+      signatureId,
+      comment: note,
+      recordPrefixId,
+    },
+    {
+      headers: withHeaders(),
+    },
+  );
+  return response.data;
+};
+
+export const makeUnderReview = async (id: string): Promise<any> => {
+  const url = `/outgoing-instances/start-review/${id}`;
+  const response = await recordAxiosInstance.post(
+    url,
+    {},
+    {
+      headers: withHeaders(),
+    },
+  );
+  return response.data;
+};
+
+export const fetchMyRecordsApprovals = async (
+  params?: ApprovalRecordQueryParams,
+): Promise<any> => {
+  try {
+    const response = await recordAxiosInstance.get(
+      `/outgoing-histories/my-record-approvals`,
+      {
+        params: {
+          ...params,
+          isUrgent: false,
+          take: 10, // Set take to 10 records per page
+        },
+        headers: withHeaders(),
+      },
+    );
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching approval actions:", error);
+    throw error;
+  }
+};
+export const fetchMyProcessedRecordsApprovals = async (
+  params?: ApprovalRecordQueryParams,
+): Promise<ProcessedApprovalRecordsResponseDto> => {
+  try {
+    const response = await recordAxiosInstance.get(
+      `/outgoing-histories/my-record-approvals/v2`,
+      {
+        params: {
+          ...params,
+          isUrgent: false,
+          take: 10, // Set take to 10 records per page
+        },
+        headers: withHeaders(),
+      },
+    );
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching approval actions:", error);
+    throw error;
+  }
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/attachmentService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/attachmentService.ts
new file mode 100644
index 000000000..8c403a8fd
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/attachmentService.ts
@@ -0,0 +1,18 @@
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+import Cookies from "js-cookie";
+import { withHeaders } from "./withHeaders";
+
+export const fetchAttachment = async (recordId: string): Promise<any> => {
+  try {
+    const { data } = await recordAxiosInstance.get(
+      `records-attachments/${recordId}`,
+      {
+        headers: withHeaders(),
+      }
+    );
+
+    return data;
+  } catch (error) {
+    throw error;
+  }
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/authService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/authService.ts
new file mode 100644
index 000000000..7fd401f1c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/authService.ts
@@ -0,0 +1,71 @@
+import axiosInstance from "@/shared/services/axiosInstance";
+import { withHeaders } from "./withHeaders";
+import { SetTwoFAPayload } from "@/record-management/hooks/useAuthUser";
+
+export interface SignupPayload {
+  email: string;
+  username: string;
+  password: string;
+  userType: string;
+  name: {
+    am: string;
+    en: string;
+  };
+}
+export interface VerifyUserPayload {
+  otp: string;
+  email?: string;
+}
+
+export interface LoginPayload {
+  email: string;
+  password: string;
+}
+
+export interface AuthHeaders {
+  tenantKey: string;
+  unitId?: string;
+}
+
+export const signup = async (payload: SignupPayload, headers: AuthHeaders) => {
+  return axiosInstance.post("/auth/signup", payload, {
+    headers: {
+      "x-organization-tenant-key": headers.tenantKey,
+      ...(headers.unitId && { "x-organization-unit-id": headers.unitId }),
+    },
+  });
+};
+
+export const login = async (payload: LoginPayload, headers: AuthHeaders) => {
+  return axiosInstance.post("/auth/login", payload, {
+    headers: {
+      "x-organization-tenant-key": headers.tenantKey,
+      ...(headers.unitId && { "x-organization-unit-id": headers.unitId }),
+    },
+  });
+};
+
+export const getProfile = async (headers: AuthHeaders) => {
+  return axiosInstance.get("/auth/me", {
+    headers: {
+      "x-organization-tenant-key": headers.tenantKey,
+      ...(headers.unitId && { "x-organization-unit-id": headers.unitId }),
+    },
+  });
+};
+
+export const logout = async () => {
+  return axiosInstance.patch("/auth/logout");
+};
+
+export const EditTwoFA = async (payload: SetTwoFAPayload, id: string) => {
+  return axiosInstance.put(`/account-configurations/my-config/${id}`, payload, {
+    headers: withHeaders(),
+  });
+};
+export const setTwoFA = async (payload: SetTwoFAPayload) => {
+  return axiosInstance.post("/account-configurations/set-my-config", payload);
+};
+export const getTwoFactorStatus = async () => {
+  return axiosInstance.get("/account-configurations/my-config");
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/collaborationService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/collaborationService.ts
new file mode 100644
index 000000000..61a7a7bf1
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/collaborationService.ts
@@ -0,0 +1,149 @@
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+import Cookies from "js-cookie";
+import { withHeaders } from "./withHeaders";
+
+export interface MyCollaborationsQuery {
+  skip?: number;
+  take?: number;
+  orderBy?: string;
+  order?: string;
+  status?: string;
+  signStatus?: string;
+  receiverPosition?: string;
+  receiverEmployee?: string;
+  subject?: string;
+  fromCreatedAt?: string;
+  toCreatedAt?: string;
+  reference?: string;
+  letterName?: string;
+}
+
+export interface SignRecordCollaboratorPayload {
+  collabId: string;
+  signStatus:
+    | "draft"
+    | "signed"
+    | "rejected"
+    | "team_rejected"
+    | "adjustment_requested";
+  comment?: string;
+}
+
+export interface CollaborationDto {
+  amharicSignedAt?: string | null;
+  amharicCreatedAt: string;
+  id: string;
+  createdAt: string;
+  // "team_rejected" = collaborator commented (send-back, editable by creator)
+  // "rejected"      = collaborator hard-rejected (final)
+  signStatus:
+    | "draft"
+    | "rejected"
+    | "signed"
+    | "team_rejected"
+    | "adjustment_requested";
+  signedAt: string | null;
+  comment?: string | null;
+  employeePositionId: string;
+  userId: string;
+  employeePosition?: {
+    id: string;
+    employee?: {
+      id: string;
+      name?: {
+        am?: string;
+        en?: string;
+      };
+    };
+    position?: {
+      id: string;
+      name?: {
+        am?: string;
+        en?: string;
+      };
+    };
+  };
+  record: {
+    receivingUnits: any;
+    recordTypeKey: any;
+    letterName: any;
+    referenceNumber: string;
+    id: string;
+    userId?: string; // The user id of the record's creator/initiator
+    statusKey: "Draft" | "Team Rejected" | "Team Signature" | "Team Approved"; // Match backend enum
+    content: {
+      nonSmartOfficeReceivers: never[];
+      receiverEmployees: any;
+      receiverPositions: any;
+      id: string;
+      subject: string;
+    }[];
+  };
+}
+
+export interface CollaborationListResponse /* replace with real DTO later */ {
+  count: number;
+  items: CollaborationDto[]; // <-- swap with CollaborationDto[]
+}
+
+export const fetchCollaborations = async (
+  params: MyCollaborationsQuery,
+): Promise<CollaborationListResponse> => {
+  try {
+    const { data } = await recordAxiosInstance.get<CollaborationListResponse>(
+      "collaborations", // adjust path when you get the final endpoint
+      {
+        headers: withHeaders(),
+        params,
+      },
+    );
+    return data;
+  } catch (error) {
+    throw error;
+  }
+};
+export const fetchMyCollaborations = async (
+  params?: MyCollaborationsQuery,
+): Promise<CollaborationListResponse> => {
+  try {
+    const { data } = await recordAxiosInstance.get<CollaborationListResponse>(
+      "/record-collaborators/my-collaborations", // adjust path when you get the final endpoint
+      {
+        headers: withHeaders(),
+        params,
+      },
+    );
+    return data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export const getCollaborationByRecordId = async (
+  id: string,
+): Promise<CollaborationListResponse> => {
+  try {
+    const { data } = await recordAxiosInstance.get<CollaborationListResponse>(
+      `/record-collaborators/list/${id}`, // adjust path when you get the final endpoint
+      {
+        headers: withHeaders(),
+      },
+    );
+    return data;
+  } catch (error) {
+    throw error;
+  }
+};
+export const signRecordCollaborator = async (
+  payload: SignRecordCollaboratorPayload,
+): Promise<void> => {
+  try {
+    await recordAxiosInstance.patch("/record-collaborators/sign", payload, {
+      headers: {
+        ...withHeaders(),
+      },
+    });
+  } catch (error) {
+    throw error;
+  }
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/dashboardApi.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/dashboardApi.ts
new file mode 100644
index 000000000..7b693d596
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/dashboardApi.ts
@@ -0,0 +1,8 @@
+import axios from "@/shared/services/axiosInstance"
+import { DashboardStatsDto } from "@/record-management/dto/userRecords/dashboardStstsDto";
+
+// This is your DTO structure
+export const getDashboardStats = async (): Promise<DashboardStatsDto> => {
+  const { data } = await axios.get("/dashboard/stats");
+  return data;
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/departmentService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/departmentService.ts
new file mode 100644
index 000000000..0040b224b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/departmentService.ts
@@ -0,0 +1,219 @@
+import axiosInstance from "@/shared/services/axiosInstance";
+import Cookies from "js-cookie";
+import { withHeaders } from "./withHeaders";
+
+export interface OrganizationsPositionsName {
+  am: string;
+  en: string;
+}
+
+export interface OrganizationsPositions {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  name: OrganizationsPositionsName;
+  key: string;
+  parentPositionId: string | null;
+  unitId: string;
+  organizationId: string;
+  projectId: string | null;
+  positionTypeId: string;
+}
+
+export interface InternalCCItemDTO {
+  id: string; // unique ID of the position/unit
+  label: string; // display name
+  unitId: string; // unit to which this position belongs
+}
+export interface OrganizationsPositionsResponse {
+  count: number;
+  items: OrganizationsPositions[];
+}
+
+export const fetchCurrentDepartment = async (
+  organizationUnitId: string,
+): Promise<any> => {
+  try {
+    const { data } = await axiosInstance.get(
+      `units/current/${organizationUnitId}/employees`,
+      {
+        headers: withHeaders(),
+      },
+    );
+
+    return data;
+  } catch (error: any) {
+    const message =
+      error?.response?.data?.message || "Failed to fetch current department";
+    throw new Error(message);
+  }
+};
+
+export const fetchInternalDepartments =
+  async (): Promise<OrganizationsPositionsResponse> => {
+    try {
+      const { data } = await axiosInstance.get(
+        `positions/parallel-and-below/`,
+        {
+          headers: withHeaders(),
+        },
+      );
+
+      return data;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+export const fetchImmediateChildDepartments =
+  async (): Promise<OrganizationsPositionsResponse> => {
+    try {
+      const { data } = await axiosInstance.get(`positions/immediate-child`, {
+        headers: withHeaders(),
+      });
+
+      return data;
+    } catch (error: any) {
+      const message =
+        error?.response?.data?.message ||
+        "Failed to fetch immedaitely departments";
+      throw new Error(message);
+    }
+  };
+
+export const fetchScopedDepartments = async (
+  params: {
+    take?: number;
+    skip?: number;
+  } = {},
+): Promise<OrganizationsPositionsResponse> => {
+  try {
+    const { data } = await axiosInstance.get(`positions/scoped`, {
+      params: {
+        ...params,
+      },
+      headers: withHeaders(),
+    });
+
+    return data;
+  } catch (error: any) {
+    const message =
+      error?.response?.data?.message || "Failed to fetch scoped departments";
+    throw new Error(message);
+  }
+};
+
+export const fetchAssignedScopeDepartments = async (
+  params: {
+    take?: number;
+    skip?: number;
+  } = {},
+): Promise<OrganizationsPositionsResponse> => {
+  try {
+    const { data } = await axiosInstance.get(
+      `/positions/internal-record-assigning`,
+      {
+        params: {
+          ...params,
+        },
+        headers: withHeaders(),
+      },
+    );
+
+    return data;
+  } catch (error: any) {
+    const message =
+      error?.response?.data?.message ||
+      "Failed to fetch assigned scope departments";
+    throw new Error(message);
+  }
+};
+
+export const fetchScopedEmployees = async (
+  params: {
+    take?: number;
+    skip?: number;
+  } = {},
+): Promise<OrganizationsPositionsResponse> => {
+  try {
+    const { data } = await axiosInstance.get(`positions/scoped`, {
+      params: {
+        ...params,
+      },
+      headers: withHeaders(),
+    });
+
+    return data;
+  } catch (error: any) {
+    const message =
+      error?.response?.data?.message || "Failed to fetch scoped employees";
+    throw new Error(message);
+  }
+};
+
+export const fetchParallelAndBelowDepartments =
+  async (): Promise<OrganizationsPositionsResponse> => {
+    try {
+      const { data } = await axiosInstance.get(
+        `positions/parallel-and-below/`,
+        {
+          headers: withHeaders(),
+        },
+      );
+
+      return data;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+export const fetchAllInternalDepartments = async (
+  unitId: string | null = null,
+  params: {
+    take?: number;
+    skip?: number;
+  } = {},
+): Promise<OrganizationsPositionsResponse> => {
+  try {
+    const { data } = await axiosInstance.get(`positions/list/${unitId}`, {
+      params: {
+        ...params,
+      },
+      headers: withHeaders(),
+    });
+
+    return data;
+  } catch (error: any) {
+    const message =
+      error?.response?.data?.message ||
+      "Failed to fetch all internal departments";
+    throw new Error(message);
+  }
+};
+
+export const fetchInternalReceivingDepartments = async (
+  params: {
+    take?: number;
+    skip?: number;
+  } = {},
+): Promise<OrganizationsPositionsResponse> => {
+  try {
+    const { data } = await axiosInstance.get(
+      `positions/internal-record-receiving`,
+      {
+        params: {
+          ...params,
+          take: params.take || 3000,
+        },
+        headers: withHeaders(),
+      },
+    );
+
+    return data;
+  } catch (error: any) {
+    const message =
+      error?.response?.data?.message ||
+      "Failed to fetch internal receiving departments";
+    throw new Error(message);
+  }
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/employeePositionService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/employeePositionService.ts
new file mode 100644
index 000000000..c4c168b30
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/employeePositionService.ts
@@ -0,0 +1,128 @@
+import axiosInstance from "@/shared/services/axiosInstance";
+import Cookies from "js-cookie";
+import { withHeaders } from "./withHeaders";
+import { DelegatePositionResponse } from "@/record-management/dto/delegation/delegationDto";
+import { PaginationParams } from "./userRecordService";
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+
+export interface DelegatePositionPayload {
+  delegationDto: {
+    employeePositionId: string;
+    from: Date;
+    to: Date;
+  };
+  signatureId: string;
+  stampId: string;
+  locale?: "en" | "am";
+  cc: { unitId: string; positionId: string; type: "internal" | "external" }[];
+}
+
+export const delegatePosition = async (payload: DelegatePositionPayload) => {
+  const response = await recordAxiosInstance.post(
+    "/records/delegation-record",
+    payload,
+    {
+      headers: withHeaders(),
+    },
+  );
+
+  return response.data;
+};
+
+export interface CanDelegateResponse {
+  status: boolean;
+}
+
+export const canDelegate = async (): Promise<CanDelegateResponse> => {
+  const response = await axiosInstance.get("/employee-positions/can-delegate", {
+    headers: withHeaders(),
+  });
+
+  return response.data;
+};
+
+export const myDelegationDetails = async (
+  params?: PaginationParams,
+): Promise<DelegatePositionResponse> => {
+  const response = await axiosInstance.get(
+    "/employee-positions/my-delegated-positions",
+    {
+      params,
+      headers: withHeaders(),
+    },
+  );
+
+  return response.data;
+};
+export const myDelegations = async (
+  params?: PaginationParams,
+): Promise<DelegatePositionResponse> => {
+  const response = await axiosInstance.get("/employee-positions/my-delegates", {
+    params,
+    headers: withHeaders(),
+  });
+
+  return response.data;
+};
+
+export interface EndDelegationPayload {
+  /** Reason / remark recorded against the delegation termination. */
+  comment: string;
+}
+
+export const deleteDelegations = async (
+  delegateId: string,
+  payload: EndDelegationPayload,
+): Promise<void> => {
+  try {
+    await axiosInstance.patch(
+      `/employee-positions/end-delegation/${delegateId}`,
+      payload,
+      {
+        headers: withHeaders(),
+      },
+    );
+  } catch (error) {
+    throw error;
+  }
+};
+export const submitDelegations = async (delegateId: string): Promise<void> => {
+  try {
+    await axiosInstance.patch(
+      `/employee-positions/submit-delegation/${delegateId}`,
+      {},
+      {
+        headers: withHeaders(),
+      },
+    );
+  } catch (error) {
+    throw error;
+  }
+};
+
+export interface PreviewDelegationPayload {
+  delegationDto: {
+    employeePositionId: string;
+    from: Date;
+    to: Date;
+  };
+  signatureId?: string;
+  stampId?: string;
+  locale?: "en" | "am";
+  cc?: { unitId: string; positionId: string; type: "internal" | "external" }[];
+}
+
+export const previewDelegationPdf = async (
+  payload: PreviewDelegationPayload,
+): Promise<Blob> => {
+  const response = await recordAxiosInstance.post(
+    "/records/preview-delegation-pdf",
+    payload,
+    {
+      headers: withHeaders(),
+      responseType: "blob",
+    },
+  );
+
+  return response.data;
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/employeesService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/employeesService.ts
new file mode 100644
index 000000000..eb14a4f52
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/employeesService.ts
@@ -0,0 +1,100 @@
+import axiosInstance from "@/shared/services/axiosInstance";
+import {
+  EmployeeByPositionDto,
+  EmployeeWithUnitListResponse,
+} from "@/user-management/dto/employees/employees";
+import { withHeaders } from "./withHeaders";
+import { Params } from "./organizationService";
+
+// Re-export Params so it can be imported from this module
+export type { Params };
+
+// Fetch employees by unit (old behavior)
+export const fetchCurrentEmployees = async (
+  params: Params,
+  organizationUnitId: string
+): Promise<EmployeeWithUnitListResponse> => {
+  try {
+    const { data } = await axiosInstance.get(
+      `/employees/${organizationUnitId}/with-unit`,
+      {
+        params,
+        headers: withHeaders(),
+      }
+    );
+    return data;
+  } catch (error: any) {
+    throw new Error(
+      error?.response?.data?.message ||
+        "Failed to fetch current department employees"
+    );
+  }
+};
+
+// ✅ Fetch ALL employees
+export const fetchAllEmployees =
+  async (): Promise<EmployeeWithUnitListResponse> => {
+    try {
+      const { data } = await axiosInstance.get(`/employees`, {
+        headers: withHeaders(),
+      });
+      return data;
+    } catch (error: any) {
+      throw new Error(
+        error?.response?.data?.message || "Failed to fetch all employees"
+      );
+    }
+  };
+
+export const fetchEmployeesByPosition = async (
+  positionId: string
+): Promise<EmployeeByPositionDto[]> => {
+  try {
+    const { data } = await axiosInstance.get(
+      `/positions/current/${positionId}/employees`,
+      { headers: withHeaders() }
+    );
+    return data;
+  } catch (error: any) {
+    throw new Error(
+      error?.response?.data?.message || "Failed to fetch employees for position"
+    );
+  }
+};
+// approve employees
+export const approvePendingEmployees = async (id:string): Promise<any> =>{
+  try {
+    return await axiosInstance.patch(`/employees/${id}/accept`)
+  }catch(error:any){
+    throw new Error(error?.response?.data?.message || "Failed to accept employee")
+  }
+}
+// reject employee
+export const rejectPendingEmployees = async (id:string): Promise<any> =>{
+  try {
+    return await axiosInstance.patch(`/employees/${id}/reject`)
+  }catch(error:any){
+    throw new Error(error?.response?.data?.message || "Failed to reject employee")
+  }
+}
+//Fetch employees
+export const fetchRecordReceivingEmployees = async (
+  params: Params,
+  organizationUnitId: string
+): Promise<EmployeeWithUnitListResponse> => {
+  try {
+    const { data } = await axiosInstance.get(
+      `/employees/others/${organizationUnitId}/with-unit`,
+      {
+        params,
+        headers: withHeaders(),
+      }
+    );
+    return data;
+  } catch (error: any) {
+    throw new Error(
+      error?.response?.data?.message ||
+        "Failed to fetch current department employees"
+    );
+  }
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/headerFooterService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/headerFooterService.ts
new file mode 100644
index 000000000..98a1c8dbf
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/headerFooterService.ts
@@ -0,0 +1,149 @@
+import axiosInstance from "@/shared/services/axiosInstance";
+import { AxiosResponse } from "axios";
+import { withHeaders } from "./withHeaders";
+
+export interface HeaderFooterFileInfo {
+  fileName: string;
+  contentType: string;
+  size: number;
+  originalname: string;
+}
+
+export interface HeaderFooterName {
+  am: string;
+  en: string;
+}
+
+export interface CreateHeaderFooterPayload {
+  fileInfo: HeaderFooterFileInfo;
+  name: HeaderFooterName;
+  unitId: string;
+}
+
+export interface HeaderFooterDto {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  fileInfo: HeaderFooterFileInfo;
+  uploadedSuccessfully: boolean;
+  isCurrent: boolean;
+  name: HeaderFooterName;
+  unitId: string;
+  presigned?: string;
+}
+
+export interface HeaderFooterResponseDto extends HeaderFooterDto {
+  type: "header" | "footer";
+}
+
+export interface HeaderFooterListResponse {
+  items: HeaderFooterResponseDto[];
+  count: number;
+}
+
+export interface HeaderFooterHeaders {
+  tenantKey: string;
+  unitId?: string;
+}
+
+export interface HeaderFooterStatusUpdatePayload {
+  id: string;
+  parentId: string;
+  uploadedSuccessfully: true;
+}
+
+export const headerFooterService = {
+  // ======= HEADERS =======
+  createHeader: async (
+    payload: CreateHeaderFooterPayload
+  ): Promise<AxiosResponse<HeaderFooterResponseDto>> => {
+    return axiosInstance.post("/headers", payload, { headers: withHeaders() });
+  },
+
+  getHeaders: async (): Promise<AxiosResponse<HeaderFooterListResponse>> => {
+    return axiosInstance.get("/headers", { headers: withHeaders() });
+  },
+
+  getHeadersByUnitId: async (
+    unitId: string
+  ): Promise<AxiosResponse<HeaderFooterListResponse>> => {
+    return axiosInstance.get(`/headers/list/${unitId}`, {
+      headers: withHeaders(),
+    });
+  },
+
+  getHeaderById: async (
+    id: string
+  ): Promise<AxiosResponse<HeaderFooterResponseDto>> => {
+    return axiosInstance.get(`/headers/${id}`, { headers: withHeaders() });
+  },
+
+  updateHeader: async (
+    id: string,
+    payload: Partial<CreateHeaderFooterPayload>
+  ): Promise<AxiosResponse<HeaderFooterResponseDto>> => {
+    return axiosInstance.put(`/headers/${id}`, payload, {
+      headers: withHeaders(),
+    });
+  },
+
+  deleteHeader: async (id: string): Promise<AxiosResponse<void>> => {
+    return axiosInstance.delete(`/headers/${id}`, { headers: withHeaders() });
+  },
+
+  updateHeaderUploadStatus: async (
+    id: string,
+    payload: HeaderFooterStatusUpdatePayload
+  ): Promise<AxiosResponse<HeaderFooterResponseDto>> => {
+    return axiosInstance.patch(`/headers/${id}/upload-status`, payload, {
+      headers: withHeaders(),
+    });
+  },
+
+  // ======= FOOTERS =======
+  createFooter: async (
+    payload: CreateHeaderFooterPayload
+  ): Promise<AxiosResponse<HeaderFooterResponseDto>> => {
+    return axiosInstance.post("/footers", payload, { headers: withHeaders() });
+  },
+
+  getFooters: async (): Promise<AxiosResponse<HeaderFooterListResponse>> => {
+    return axiosInstance.get("/footers", { headers: withHeaders() });
+  },
+
+  getFootersByUnitId: async (
+    unitId: string
+  ): Promise<AxiosResponse<HeaderFooterListResponse>> => {
+    return axiosInstance.get(`/footers/list/${unitId}`, {
+      headers: withHeaders(),
+    });
+  },
+
+  getFooterById: async (
+    id: string
+  ): Promise<AxiosResponse<HeaderFooterResponseDto>> => {
+    return axiosInstance.get(`/footers/${id}`, { headers: withHeaders() });
+  },
+
+  updateFooter: async (
+    id: string,
+    payload: Partial<CreateHeaderFooterPayload>
+  ): Promise<AxiosResponse<HeaderFooterResponseDto>> => {
+    return axiosInstance.put(`/footers/${id}`, payload, {
+      headers: withHeaders(),
+    });
+  },
+
+  deleteFooter: async (id: string): Promise<AxiosResponse<void>> => {
+    return axiosInstance.delete(`/footers/${id}`, { headers: withHeaders() });
+  },
+
+  updateFooterUploadStatus: async (
+    id: string,
+    payload: HeaderFooterStatusUpdatePayload
+  ): Promise<AxiosResponse<HeaderFooterResponseDto>> => {
+    return axiosInstance.patch(`/footers/${id}/upload-status`, payload, {
+      headers: withHeaders(),
+    });
+  },
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/incomingInstanceService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/incomingInstanceService.ts
new file mode 100644
index 000000000..cab3cd2ca
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/incomingInstanceService.ts
@@ -0,0 +1,50 @@
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+import { withHeaders } from "./withHeaders";
+import { AssignmentHistoryDto } from "@/record-management/components/userIncoming/remarkCreationCard";
+
+export interface ChildIncomingInstanceDto {
+  id: string;
+  status?: string;
+  createdAt?: string;
+
+  assignedTo?: {
+    id?: string;
+    name?: {
+      am?: string;
+      en?: string;
+    };
+  };
+}
+
+export const getChildIncomingInstances = async (
+  incomingInstanceId: string,
+): Promise<AssignmentHistoryDto[]> => {
+  try {
+    const { data } = await recordAxiosInstance.get(
+      `/incoming-instances/child-instances/${incomingInstanceId}`,
+      {
+        headers: withHeaders(),
+      },
+    );
+
+    return data;
+  } catch (error) {
+    throw error;
+  }
+};
+export const getMainChildIncomingInstances = async (
+  recordId: string,
+): Promise<AssignmentHistoryDto[]> => {
+  try {
+    const { data } = await recordAxiosInstance.get(
+      `/incoming-instances/record-root/${recordId}`,
+      {
+        headers: withHeaders(),
+      },
+    );
+
+    return data;
+  } catch (error) {
+    throw error;
+  }
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/incomingRecordService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/incomingRecordService.ts
new file mode 100644
index 000000000..d11ebd288
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/incomingRecordService.ts
@@ -0,0 +1,302 @@
+import {
+  AcceptIncomingRecordPayload,
+  AssignIncomingRecordPayload,
+  ReAssignRecordPayload,
+  AssignCCPayload,
+} from "@/record-management/dto/userRecords/usersDto";
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+import qs from "qs";
+import { withHeaders } from "./withHeaders";
+import { OutgoingRecordQueryParams } from "./recordOfficerService";
+import { AssignIncomingRecordResponse } from "@/record-management/components/hooks/useCreateIncomingRecord";
+import IncomingRecordsResponse from "@/record-management/dto/IncomingRecords/incomingTasksDto";
+import { IncomingRemarkResponseDto } from "@/record-management/components/hooks/useGetRemarks";
+
+export interface PaginationParams {
+  recordType?: string | string[];
+  status?: string;
+  skip?: number;
+  take?: number;
+  orderBy?: string | string[];
+  hasSeen?: boolean;
+  fetchParent?: boolean;
+  isForYourReference?: boolean;
+}
+
+export interface AddRemarkPayload {
+  incomingInstanceId: string;
+  comment: string;
+}
+
+interface UseInternalIncomingRecordsParams {
+  pageIndex?: number;
+  pageSize?: number;
+  status?: string;
+  filterType?: string; // "Department" | "Subject" | "Date" | "Reference Number"
+  searchQuery?: string;
+  order?: string;
+  letterNumber?: string;
+  referenceNumber?: string;
+  subject?: string;
+  recordTypeKey?: string;
+  fromCreatedAt?: string;
+  toCreatedAt?: string;
+  fromSubmittedAt?: string;
+  toSubmittedAt?: string;
+  fromDispatchedDate?: string;
+  toDispatchedDate?: string;
+  receiverPosition?: string;
+  receiverEmployee?: string;
+  sendingPosition?: string;
+  sendingEmployee?: string;
+  receiverUnit?: string;
+  dispatchedBy?: string;
+  from?: string; // Sender information filter
+}
+
+export interface PaginatedResponse {
+  items: any[];
+  count: number;
+}
+
+export const getIncoming = async (
+  params?: UseInternalIncomingRecordsParams,
+): Promise<PaginatedResponse> => {
+  const { data } = await recordAxiosInstance.get<PaginatedResponse>(
+    "incoming-instances/get-my",
+    {
+      params,
+      paramsSerializer: (params) =>
+        qs.stringify(params, { arrayFormat: "repeat" }),
+      headers: withHeaders(),
+    },
+  );
+
+  return {
+    items: data.items || [],
+    count: data.count || 0,
+  };
+};
+
+export const getIncomingV2 = async (
+  params?: UseInternalIncomingRecordsParams,
+): Promise<IncomingRecordsResponse> => {
+  const { data } = await recordAxiosInstance.get<IncomingRecordsResponse>(
+    "incoming-instances/get-my/v2",
+    {
+      params,
+      paramsSerializer: (params) =>
+        qs.stringify(params, { arrayFormat: "repeat" }),
+      headers: withHeaders(),
+    },
+  );
+
+  return {
+    items: data.items || [],
+    count: data.count || 0,
+  };
+};
+
+export const getIncomingParent = async (
+  params?: UseInternalIncomingRecordsParams,
+): Promise<PaginatedResponse> => {
+  const { data } = await recordAxiosInstance.get<PaginatedResponse>(
+    "incoming-instances/get-my-parent",
+    {
+      params,
+      paramsSerializer: (params) =>
+        qs.stringify(params, { arrayFormat: "repeat" }),
+      headers: withHeaders(),
+    },
+  );
+
+  return {
+    items: data.items || [],
+    count: data.count || 0,
+  };
+};
+
+export const assignIncomingRecordApi = async (
+  body: AssignIncomingRecordPayload,
+): Promise<any> => {
+  const { data } = await recordAxiosInstance.post(
+    "record-boxes/assign",
+    body,
+    {
+      headers: withHeaders(),
+    },
+  );
+
+  return data;
+};
+
+export const assignDraftIncomingRecordApi = async (
+  id: string,
+): Promise<AssignIncomingRecordResponse> => {
+  const { data } = await recordAxiosInstance.patch(
+    `records/start-assignment/${id}`,
+    {},
+    {
+      headers: withHeaders(),
+    },
+  );
+
+  return data;
+};
+
+export const getRecordIncoming = async (
+  params?: OutgoingRecordQueryParams,
+): Promise<any> => {
+  const { data } = await recordAxiosInstance.get("record-boxes/my-unit-box", {
+    params: params,
+    headers: withHeaders(),
+  });
+
+  return data;
+};
+
+export const getExternalRecordIncoming = async (
+  params?: OutgoingRecordQueryParams,
+): Promise<any> => {
+  const { data } = await recordAxiosInstance.get(
+    "records/non-smart-records",
+    {
+      params: params,
+      headers: withHeaders(),
+    },
+  );
+
+  return data;
+};
+
+export const getCCIncoming = async (
+  params?: PaginationParams,
+): Promise<PaginatedResponse> => {
+  const { fetchParent, skip, take, orderBy, ...bodyParams } = params ?? {};
+  const requestBody = {
+    ...bodyParams,
+  };
+
+  const { data } = await recordAxiosInstance.post<PaginatedResponse>(
+    "incoming-instances/get-my-cc",
+    requestBody,
+    {
+      params: {
+        isForYourReference: params?.isForYourReference,
+        skip,
+        take,
+        orderBy: orderBy,
+      },
+      headers: withHeaders(),
+    },
+  );
+
+  return data;
+};
+
+export const getCCIncomingParent = async (
+  params?: PaginationParams,
+): Promise<PaginatedResponse> => {
+  const { fetchParent, skip, take, orderBy, ...bodyParams } = params ?? {};
+  const requestBody = {
+    ...bodyParams,
+  };
+
+  const { data } = await recordAxiosInstance.post<PaginatedResponse>(
+    "incoming-instances/get-my-parent-cc",
+    requestBody,
+    {
+      params: {
+        isForYourReference: params?.isForYourReference,
+        skip,
+        take,
+        orderBy: orderBy || "record.createdAt:DESC",
+      },
+      headers: withHeaders(),
+    },
+  );
+
+  return data;
+};
+
+export const reassignRecord = async (
+  body: ReAssignRecordPayload,
+): Promise<any> => {
+  const { data } = await recordAxiosInstance.post(
+    "incoming-instances/re-assign",
+    body,
+    {
+      headers: withHeaders(),
+    },
+  );
+
+  return data;
+};
+
+export const addRemarkService = async (
+  body: AddRemarkPayload,
+): Promise<any> => {
+  const { data } = await recordAxiosInstance.post(
+    "incoming-instance-comments",
+    body,
+    {
+      headers: withHeaders(),
+    },
+  );
+
+  return data;
+};
+
+export const getRemarksByIncomingInstanceId = async (
+  incomingInstanceId: string,
+): Promise<IncomingRemarkResponseDto> => {
+  const { data } = await recordAxiosInstance.get(
+    `incoming-instance-comments/list/${incomingInstanceId}`,
+    {
+      headers: withHeaders(),
+    },
+  );
+
+  return data;
+};
+
+export const acceptRecord = async (
+  body: AcceptIncomingRecordPayload,
+): Promise<any> => {
+  const { data } = await recordAxiosInstance.patch(
+    "incoming-instances/respond",
+    body,
+    {
+      headers: withHeaders(),
+    },
+  );
+
+  return data;
+};
+
+export const hasSeen = async (
+  id: string,
+  isForYourReference: boolean,
+): Promise<any> => {
+  const { data } = await recordAxiosInstance.patch(
+    `records/has-seen/${id}/${isForYourReference}`,
+    {},
+    {
+      headers: withHeaders(),
+    },
+  );
+
+  return data;
+};
+
+export const assignCCRecord = async (body: AssignCCPayload): Promise<any> => {
+  const { data } = await recordAxiosInstance.post(
+    "incoming-instances/assign-cc",
+    body,
+    {
+      headers: withHeaders(),
+    },
+  );
+
+  return data;
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/movementService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/movementService.ts
new file mode 100644
index 000000000..108d35e9d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/movementService.ts
@@ -0,0 +1,21 @@
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+import Cookies from "js-cookie";
+import { withHeaders } from "./withHeaders";
+import type { AssignmentApiResponse } from "@/record-management/dto/AssignementStep";
+
+export const getMovementSlip = async (
+  recordId: string
+): Promise<AssignmentApiResponse[]> => {
+  try {
+    const { data } = await recordAxiosInstance.get(
+      `incoming-instances/movement-slip/${recordId}`,
+      {
+        headers: withHeaders(),
+      }
+    );
+
+    return data;
+  } catch (error) {
+    throw error;
+  }
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/newFileService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/newFileService.ts
new file mode 100644
index 000000000..6db19e4a3
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/newFileService.ts
@@ -0,0 +1,241 @@
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+import { uploadFile } from "@/shared/services/fileService";
+import axiosInstance from "@/shared/services/axiosInstance";
+
+interface UploadKeyRequest {
+  fileName: string;
+  contentType: string;
+  size: number;
+  originalname: string;
+}
+
+export interface UploadKeyResponse {
+  fileInfo: {
+    bucket: string;
+    fileName: string;
+    contentType: string;
+    originalname: string;
+    size: number;
+  };
+  presigned: string;
+}
+
+export const STORAGE_UPLOAD_ERROR_CODE = "storage_upload_failed";
+export const STORAGE_UPLOAD_TOO_LARGE = "storage_upload_too_large";
+
+const isStorageUploadError = (error: any) =>
+  error instanceof Error &&
+  (error.message === STORAGE_UPLOAD_ERROR_CODE ||
+    error.message === STORAGE_UPLOAD_TOO_LARGE);
+
+const extractStatus = (error: unknown): number | undefined => {
+  if (!error || typeof error !== "object") return undefined;
+  const e = error as { status?: unknown; response?: { status?: unknown } };
+  if (typeof e.status === "number") return e.status;
+  if (typeof e.response?.status === "number") return e.response.status;
+  return undefined;
+};
+
+export const recordFileServiceV2 = {
+  // 🔹 Single file
+  async getUploadKey(file: File): Promise<UploadKeyResponse> {
+    const body = {
+      fileName: file.name,
+      contentType: file.type || "application/octet-stream",
+      size: file.size,
+      originalname: file.name,
+    };
+
+    const { data } = await recordAxiosInstance.post(
+      "/record-attachments/get-file-upload-key",
+      body,
+    );
+
+    return data;
+  },
+  async getUploadKeySiteSetting(file: File): Promise<UploadKeyResponse> {
+    const body = {
+      fileName: file.name,
+      contentType: file.type || "application/octet-stream",
+      size: file.size,
+      originalname: file.name,
+    };
+
+    const { data } = await axiosInstance.post(
+      "/site-settings/get-file-upload-key",
+      body,
+    );
+
+    return data;
+  },
+
+  // 🔹 Multiple files
+  async getMultipleUploadKeys(files: File[]): Promise<UploadKeyResponse[]> {
+    const body = files.map((file) => ({
+      fileName: file.name,
+      contentType: file.type || "application/octet-stream",
+      size: file.size,
+      originalname: file.name,
+    }));
+
+    const { data } = await recordAxiosInstance.post(
+      "/record-attachments/get-multiple-attachments-upload-key",
+      body,
+    );
+
+    return data;
+  },
+  async getReplyUploadKeys(files: File[]): Promise<UploadKeyResponse[]> {
+    // const body = files.map((file) => ({
+    //   fileName: file.name as string,
+    //   contentType: file.type || ("application/octet-stream" as string),
+    //   size: file.size,
+    //   originalname: file.name as string,
+    // }));
+    const body = {
+      fileName: files[0].name,
+      contentType: files[0].type || "application/octet-stream",
+      size: files[0].size,
+      originalname: files[0].name,
+    };
+
+    const { data } = await recordAxiosInstance.post(
+      "/record-replies/upload-keys",
+      body,
+    );
+
+    return [data];
+  },
+
+  // 🔹 Upload using presigned URL
+  async uploadToPresigned(file: File, presignedUrl: string) {
+    try {
+      return await uploadFile(file, presignedUrl);
+    } catch (error) {
+      console.error(`Presigned upload failed for ${file.name}:`, error);
+      // S3 returns 413 when the upload exceeds the bucket / policy size limit.
+      // Distinguish that from a generic transport failure so the UI can
+      // append a "file too large" hint.
+      if (extractStatus(error) === 413) {
+        throw new Error(STORAGE_UPLOAD_TOO_LARGE);
+      }
+      throw new Error(STORAGE_UPLOAD_ERROR_CODE);
+    }
+  },
+};
+
+export const uploadSingle = async (file: File) => {
+  try {
+    // 1. Get upload key
+    const { presigned, fileInfo } =
+      await recordFileServiceV2.getUploadKey(file);
+
+    // 2. Upload file
+    await recordFileServiceV2.uploadToPresigned(file, presigned);
+
+    // 3. Return fileInfo (IMPORTANT 🔥)
+    return fileInfo;
+  } catch (error: any) {
+    console.error("Single file upload failed:", error);
+    if (isStorageUploadError(error)) {
+      throw error;
+    }
+    // Extract meaningful error message from axios response
+    const errorMessage =
+      error?.response?.data?.message ||
+      error?.response?.data?.exception?.response?.message ||
+      error?.message ||
+      error;
+    throw new Error(`Failed to upload file ${file.name}: ${errorMessage}`);
+  }
+};
+export const uploadSingleBranding = async (file: File) => {
+  try {
+    // 1. Get upload key
+    const { presigned, fileInfo } =
+      await recordFileServiceV2.getUploadKeySiteSetting(file);
+
+    // 2. Upload file
+    await recordFileServiceV2.uploadToPresigned(file, presigned);
+
+    // 3. Return fileInfo (IMPORTANT 🔥)
+    return { presigned, fileInfo };
+  } catch (error: any) {
+    console.error("Single file upload failed:", error);
+    if (isStorageUploadError(error)) {
+      throw error;
+    }
+    // Extract meaningful error message from axios response
+    const errorMessage =
+      error?.response?.data?.message ||
+      error?.response?.data?.exception?.response?.message ||
+      error?.message ||
+      error;
+    throw new Error(`Failed to upload file ${file.name}: ${errorMessage}`);
+  }
+};
+
+export const uploadMultiple = async (files: File[]) => {
+  try {
+    const responses = await recordFileServiceV2.getMultipleUploadKeys(files);
+
+    // 1. Upload all files
+    await Promise.all(
+      responses.map((res, index) =>
+        recordFileServiceV2.uploadToPresigned(files[index], res.presigned),
+      ),
+    ); // 2. Return fileInfos for record creation
+    return responses.map((r) => r.fileInfo);
+  } catch (error: any) {
+    console.error("Multiple file upload failed:", error);
+    if (isStorageUploadError(error)) {
+      throw error;
+    }
+    // Extract meaningful error message from axios response
+    const errorMessage =
+      error?.response?.data?.message ||
+      error?.response?.data?.exception?.response?.message ||
+      error?.message ||
+      error;
+    throw new Error(`Failed to upload multiple files: ${errorMessage}`);
+  }
+};
+export const uploadReplies = async (files: File[]) => {
+  try {
+    const responses = await recordFileServiceV2.getReplyUploadKeys(files);
+    if (files.length !== responses.length) {
+      throw new Error("Mismatch between files and upload keys received");
+    }
+    if (files.length > 1) {
+      await Promise.all(
+        responses.map((res, index) =>
+          recordFileServiceV2.uploadToPresigned(files[index], res.presigned),
+        ),
+      );
+      return responses.map((r) => r.fileInfo);
+    } else if (files.length === 1) {
+      await recordFileServiceV2.uploadToPresigned(
+        files[0],
+        responses[0].presigned,
+      );
+      return responses[0].fileInfo;
+    }
+
+    const { presigned, fileInfo } = await recordFileServiceV2.getUploadKey(
+      files[0],
+    );
+
+    // 2. Upload file
+    await recordFileServiceV2.uploadToPresigned(files[0], presigned);
+
+    // 3. Return fileInfo (IMPORTANT 🔥)
+    return fileInfo;
+  } catch (error: any) {
+    const errorMessage =
+      error?.response?.data?.message ||
+      error?.response?.data?.exception?.response?.message ||
+      error?.message ||
+      error;
+    throw new Error(`Failed to upload multiple files: ${errorMessage}`);
+  }
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/nonSmartOfficeFileService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/nonSmartOfficeFileService.ts
new file mode 100644
index 000000000..43ac80131
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/nonSmartOfficeFileService.ts
@@ -0,0 +1,152 @@
+import { BaseUploadDto } from "@/record-management/dto/fileDto";
+import {
+  updateIncomingRecordStatus,
+  UploadContext,
+  uploadFile,
+  uploadMeta,
+} from "@/shared/services/fileService";
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+import { withHeaders } from "./withHeaders";
+
+const nonSmartOfficeFileContext: UploadContext<BaseUploadDto> = {
+  endpoint: "/records",
+  module: "external-portal",
+  uploadContext: "external-portal",
+  allowedMimeTypes: [
+    "image/png",
+    "image/jpeg",
+    "image/gif",
+    "application/pdf",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    "application/msword",
+    "application/vnd.ms-excel",
+    "application/acad",
+    "application/x-autocad",
+    "application/x-dwg",
+    "image/vnd.dwg",
+    "application/dxf",
+    "application/x-dxf",
+    "image/vnd.dxf",
+    "application/x-autocad-dwt",
+    "application/x-autocad-dws",
+    "application/x-esri-map",
+    "application/x-esri-arcgis-pro-project",
+    "application/x-rar-compressed",
+    "application/vnd.rar",
+    "application/zip",
+    "application/octet-stream",
+    "application/x-shapefile",
+    "application/x-dbf",
+    "application/x-cpg",
+    "application/x-shx",
+    "application/x-qmd",
+    "application/vnd.shp",
+    "application/vnd.dbf",
+    "application/vnd.cpg",
+    "application/vnd.shx",
+    "application/vnd.qmd",
+  ],
+  allowedExtensions: [
+    ".png",
+    ".jpg",
+    ".jpeg",
+    ".gif",
+    ".pdf",
+    ".doc",
+    ".docx",
+    ".xls",
+    ".xlsx",
+    ".dwg",
+    ".dxf",
+    ".dwt",
+    ".bak",
+    ".sv$",
+    ".dws",
+    ".mxd",
+    ".aprx",
+    ".rar",
+    ".zip",
+    ".cpg",
+    ".dbf",
+    ".qmd",
+    ".shp",
+    ".shx",
+  ],
+  maxSizeMB: 25,
+  buildBody: (file, fileName, recordContentId) => {
+    // Infer MIME type from file extension if file.type is empty
+    let contentType = file.type || "application/octet-stream";
+
+    if (!file.type && file.name) {
+      const ext = file.name.split(".").pop()?.toLowerCase();
+      const extensionMimeMap: Record<string, string> = {
+        shp: "application/vnd.shp",
+        dbf: "application/vnd.dbf",
+        cpg: "application/vnd.cpg",
+        shx: "application/vnd.shx",
+        qmd: "application/vnd.qmd",
+        dwg: "application/x-dwg",
+        dxf: "application/dxf",
+        txt: "text/plain",
+        pdf: "application/pdf",
+        zip: "application/zip",
+        rar: "application/x-rar-compressed",
+        jpg: "image/jpeg",
+        jpeg: "image/jpeg",
+        png: "image/png",
+        gif: "image/gif",
+        doc: "application/msword",
+        docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+        xls: "application/vnd.ms-excel",
+        xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        ppt: "application/vnd.ms-powerpoint",
+        pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+      };
+      contentType = ext ? extensionMimeMap[ext] : "application/octet-stream";
+    }
+
+    return {
+      fileInfo: {
+        fileName,
+        originalname: file.name,
+        contentType: contentType || "application/octet-stream",
+        fileType: contentType || "application/octet-stream",
+        size: file.size,
+      },
+      name: { am: file.name, en: file.name },
+      recordContentId,
+    };
+  },
+};
+
+export const nonSmartOfficeFileService = {
+  uploadMeta: (file: File, fileName: string, employeeId: string) =>
+    uploadMeta(
+      nonSmartOfficeFileContext,
+      file,
+      fileName,
+      employeeId,
+      recordAxiosInstance,
+    ),
+  updateStatus: (fileId: string, uploaded: boolean) =>
+    updateIncomingRecordStatus(
+      "/records",
+      fileId,
+      uploaded,
+      recordAxiosInstance,
+    ),
+  uploadFile,
+  getFileUploadUrl: (file: File[]) => {
+    try {
+      const result = recordAxiosInstance.post(
+        "/records/get-upload-url",
+        file,
+        withHeaders(),
+      );
+      return result;
+    } catch (error) {
+    throw error;
+  }
+  },
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/nonSmartOfficeService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/nonSmartOfficeService.ts
new file mode 100644
index 000000000..06f5677e7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/nonSmartOfficeService.ts
@@ -0,0 +1,98 @@
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+import { withHeaders } from "./withHeaders";
+import { NonSmartRecordPdfAssignPayload } from "@/record-management/dto/IncomingRecords/nonSmartRecordPdfDto";
+
+export const createIncoming = async (payload: any): Promise<any> => {
+  try {
+    const { data } = await recordAxiosInstance.post(
+      "records/non-smart-record-pdf",
+      payload,
+      {
+        headers: withHeaders(),
+      },
+    );
+
+    return data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export const updateIncoming = async (
+  payload: any,
+  id: string,
+): Promise<any> => {
+  try {
+    const { data } = await recordAxiosInstance.patch(
+      `records/non-smart-record-pdf/${id}`,
+      payload,
+      {
+        headers: withHeaders(),
+      },
+    );
+
+    return data;
+  } catch (error) {
+    throw error;
+  }
+};
+export const updateIncomingAttachmentStatus = async (
+  recordId: string,
+  isUploaded: boolean,
+): Promise<void> => {
+  try {
+    const { status } = await recordAxiosInstance.patch(
+      "records/upload-status",
+      {
+        recordId,
+        uploadedSuccessfully: isUploaded,
+      },
+      {
+        headers: withHeaders(),
+      },
+    );
+
+    if (status !== 200) {
+      throw new Error("Status update failed");
+    }
+  } catch (error) {
+    throw error;
+  }
+};
+
+export const createAndAssignNonSmartRecordPdf = async (
+  payload: NonSmartRecordPdfAssignPayload,
+): Promise<any> => {
+  try {
+    const { data } = await recordAxiosInstance.post(
+      "records/non-smart-record-pdf-and-assign",
+      payload,
+      {
+        headers: withHeaders(),
+      },
+    );
+
+    return data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export const updateAndAssignNonSmartRecordPdf = async (
+  id: string,
+  payload: NonSmartRecordPdfAssignPayload,
+): Promise<any> => {
+  try {
+    const { data } = await recordAxiosInstance.patch(
+      `records/non-smart-record-pdf-and-assign/${id}`,
+      payload,
+      {
+        headers: withHeaders(),
+      },
+    );
+
+    return data;
+  } catch (error) {
+    throw error;
+  }
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/organizationService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/organizationService.ts
new file mode 100644
index 000000000..c8f1cf683
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/organizationService.ts
@@ -0,0 +1,150 @@
+import axiosInstance from "@/shared/services/axiosInstance";
+import qs from "qs";
+import { withHeaders } from "./withHeaders";
+import { UnitDto } from "@/user-management/dto/unit/unitDto";
+import { TreeViewItem } from "@/shared/common/ui/treeSelect";
+import { EUserStatus } from "@/user-management/userManagement/hooks/usePendingUsersHook";
+
+export interface OrgName {
+  am: string;
+  en: string;
+}
+
+export interface OrgUnit {
+  createdAt: string;
+  updatedAt: string;
+  id: string;
+  name: OrgName;
+  key: string;
+  organizationId: string;
+  parentUnitId: string | null;
+}
+
+export interface ValidOrganizationDto {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  name: OrgName;
+  key: string;
+  status: "Active" | "Inactive";
+  parentId: string | null;
+  organizationTypeId: string;
+  unit: OrgUnit | null;
+  units: OrgUnit[];
+}
+
+export interface ValidOrganizationsDto {
+  count: number;
+  items: ValidOrganizationDto[];
+}
+
+export interface UpdatedValidOrganizationDto {
+  firstUnitId: string;
+  hasChildren: boolean;
+  name: OrgName;
+  id: string;
+  type: string;
+}
+
+export interface Params {
+  take?: number;
+  skip?: number;
+  orderBy?: string;
+  userStatus?:EUserStatus;
+
+}
+
+export const fetchValidOrganization = async ({
+  queryKey,
+}: {
+  queryKey: [string, Params?];
+}): Promise<ValidOrganizationsDto> => {
+  const [, params = { take: 300, skip: 0 }] = queryKey;
+
+  try {
+    const { data } = await axiosInstance.get("organizations/record-receiving", {
+      headers: withHeaders(),
+      params,
+      paramsSerializer: (params) => qs.stringify(params),
+    });
+
+    return data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export const fetchModifiedValidOrganization = async ({
+  queryKey,
+}: {
+  queryKey: [string, Params?];
+}): Promise<TreeViewItem[]> => {
+  const [, params = { take: 300, skip: 0 }] = queryKey;
+
+  try {
+    const { data } = await axiosInstance.get("organizations/children", {
+      headers: withHeaders(),
+      params,
+      paramsSerializer: (params) => qs.stringify(params),
+    });
+
+    return data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export const fetchChildrensById = async ({
+  queryKey,
+  id,
+}: {
+  queryKey: [string, Params?];
+  id: string;
+}): Promise<UpdatedValidOrganizationDto[]> => {
+  const [, params = { take: 300, skip: 0 }] = queryKey;
+
+  try {
+    const { data } = await axiosInstance.get(
+      `
+organizations/children/${id}`,
+      {
+        headers: withHeaders(),
+        params,
+        paramsSerializer: (params) => qs.stringify(params),
+      }
+    );
+
+    return data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export const fetchOrganizationById = async (
+  organizationId: string
+): Promise<any> => {
+  try {
+    const { data } = await axiosInstance.get(
+      `organizations/${organizationId}`,
+      {
+        headers: withHeaders(),
+      }
+    );
+
+    return data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export const fetchUnitById = async (unitId: string): Promise<UnitDto> => {
+  try {
+    const { data } = await axiosInstance.get(`units/${unitId}`, {
+      headers: withHeaders(),
+    });
+
+    return data;
+  } catch (error) {
+    throw error;
+  }
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/organizationTypesService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/organizationTypesService.ts
new file mode 100644
index 000000000..b23ba00fb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/organizationTypesService.ts
@@ -0,0 +1,30 @@
+import axiosInstance from "@/shared/services/axiosInstance";
+import { AxiosResponse } from "axios";
+import { withHeaders } from "./withHeaders";
+
+export interface OrgHeaders {
+  tenantKey: string;
+  unitId?: string;
+}
+
+export interface OrgType {
+  id: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  key: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface OrgTypeResponse {
+  count: number;
+  items: OrgType[];
+}
+
+export const getOrganizationTypes = async (): Promise<
+  AxiosResponse<OrgTypeResponse>
+> => {
+  return axiosInstance.get("/organization-types", { headers: withHeaders() });
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/organizationsService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/organizationsService.ts
new file mode 100644
index 000000000..adb36916f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/organizationsService.ts
@@ -0,0 +1,84 @@
+import axiosInstance from "@/shared/services/axiosInstance";
+import { AxiosResponse } from "axios";
+import { withHeaders } from "./withHeaders";
+
+export interface OrgHeaders {
+  tenantKey: string;
+  unitId?: string;
+}
+
+export interface OrganizationPayload {
+  name: {
+    am: string;
+    en: string;
+  };
+  key: string;
+  organizationTypeId: string;
+  parentId?: string;
+}
+
+export interface OrgQueryParams {
+  orderBy?: string;
+  take?: number;
+  skip?: number;
+}
+
+export const getOrganizations = async (
+  params?: OrgQueryParams
+): Promise<AxiosResponse> => {
+  return axiosInstance.get("/organizations", {
+    ...withHeaders(),
+    params,
+  });
+};
+
+export const getOrganizationById = async (
+  id: string | number
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/organizations/${id}`, { headers: withHeaders() });
+};
+
+export const getChildren = async (
+  id: string | number
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/organizations/${id}/children`, {
+    headers: withHeaders(),
+  });
+};
+
+export const getEmployeesUnderOrg = async (
+  id: string | number,
+  params?: OrgQueryParams
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/organizations/current/${id}/employees`, {
+    headers: withHeaders(),
+    params: {
+      take: 1000, // Get a large number of employees by default
+      skip: 0,
+      ...params,
+    },
+  });
+};
+
+export const createOrganization = async (
+  data: OrganizationPayload
+): Promise<AxiosResponse> => {
+  return axiosInstance.post("/organizations", data, { headers: withHeaders() });
+};
+
+export const updateOrganization = async (
+  id: string | number,
+  data: OrganizationPayload
+): Promise<AxiosResponse> => {
+  return axiosInstance.put(`/organizations/${id}`, data, {
+    headers: withHeaders(),
+  });
+};
+
+export const deleteOrganization = async (
+  id: string | number
+): Promise<AxiosResponse> => {
+  return axiosInstance.delete(`/organizations/${id}`, {
+    headers: withHeaders(),
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/prefixAndSuffixService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/prefixAndSuffixService.ts
new file mode 100644
index 000000000..c0111034e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/prefixAndSuffixService.ts
@@ -0,0 +1,44 @@
+import { PrefixSuffixResponse } from "@/record-management/dto/userRecords/prefixAndSuffixDto";
+import { prefixSuffixService } from "@/user-management/services/api/prefixSuffixService";
+
+/**
+ * @deprecated Use `prefixSuffixService` (user-management domain service) directly.
+ * This adapter is kept temporarily for backward compatibility.
+ */
+export const fetchPrefixes = async (
+  unitId: string,
+  recordTypeKey: string,
+  cc = false,
+  skip = 0,
+  take = 10
+): Promise<PrefixSuffixResponse> => {
+  try {
+    const { data } = cc
+      ? await prefixSuffixService.getPrefixCC(unitId, recordTypeKey, skip, take)
+      : await prefixSuffixService.getPrefix(unitId, recordTypeKey, skip, take);
+    return data as PrefixSuffixResponse;
+  } catch (error) {
+    throw error;
+  }
+};
+
+/**
+ * @deprecated Use `prefixSuffixService` (user-management domain service) directly.
+ * This adapter is kept temporarily for backward compatibility.
+ */
+export const fetchSuffixes = async (
+  unitId: string,
+  recordTypeKey: string,
+  cc = false,
+  skip = 0,
+  take = 10
+): Promise<PrefixSuffixResponse> => {
+  try {
+    const { data } = cc
+      ? await prefixSuffixService.getSuffixCC(unitId, recordTypeKey, skip, take)
+      : await prefixSuffixService.getSuffix(unitId, recordTypeKey, skip, take);
+    return data as PrefixSuffixResponse;
+  } catch (error) {
+    throw error;
+  }
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/recordCollaboratorCommentsService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/recordCollaboratorCommentsService.ts
new file mode 100644
index 000000000..8c8b16f3e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/recordCollaboratorCommentsService.ts
@@ -0,0 +1,135 @@
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+import { withHeaders } from "./withHeaders";
+
+export interface RecordCollaboratorCommentDto {
+  id: string;
+  recordId?: string;
+  comment: string;
+  recordCollaboratorId?: string;
+  recordContentId?: string;
+  createdAt: string;
+  updatedAt: string;
+  amharicCreatedAt: string | null;
+  amharicUpdatedAt: string | null;
+  recordCollaborator?: {
+    id: string;
+    employeePosition?: {
+      id: string;
+      employee?: {
+        id: string;
+        name: {
+          am: string;
+          en: string;
+        };
+      };
+    };
+  };
+}
+
+export interface RecordCollaboratorCommentsListResponse {
+  count: number;
+  items: RecordCollaboratorCommentDto[];
+}
+
+export interface CreateRecordCollaboratorCommentPayload {
+  recordId: string;
+  comment: string;
+}
+
+export interface UpdateRecordCollaboratorCommentPayload {
+  comment: string;
+}
+
+export interface RecordCollaboratorCommentsListParams {
+  skip?: number;
+  take?: number;
+  order?: string;
+}
+
+export interface DeleteRecordCollaboratorCommentResponse {
+  affected: number;
+}
+
+export const createRecordCollaboratorComment = async (
+  payload: CreateRecordCollaboratorCommentPayload,
+): Promise<RecordCollaboratorCommentDto> => {
+  const { data } = await recordAxiosInstance.post<RecordCollaboratorCommentDto>(
+    "/record-collaborator-comments",
+    payload,
+    {
+      headers: withHeaders(),
+    },
+  );
+
+  return data;
+};
+
+export const updateRecordCollaboratorComment = async (
+  id: string,
+  payload: UpdateRecordCollaboratorCommentPayload,
+): Promise<RecordCollaboratorCommentDto> => {
+  const { data } = await recordAxiosInstance.put<RecordCollaboratorCommentDto>(
+    `/record-collaborator-comments/${id}`,
+    payload,
+    {
+      headers: withHeaders(),
+    },
+  );
+
+  return data;
+};
+
+export const getMyRecordCollaboratorComments = async (
+  recordCollaboratorId: string,
+): Promise<RecordCollaboratorCommentDto[]> => {
+  const { data } = await recordAxiosInstance.get<
+    RecordCollaboratorCommentDto[]
+  >(`/record-collaborator-comments/my-comments/${recordCollaboratorId}`, {
+    headers: withHeaders(),
+  });
+
+  return data;
+};
+
+export const listRecordCollaboratorComments = async (
+  contentId: string,
+  params?: RecordCollaboratorCommentsListParams,
+): Promise<RecordCollaboratorCommentsListResponse> => {
+  const { data } =
+    await recordAxiosInstance.get<RecordCollaboratorCommentsListResponse>(
+      `/record-collaborator-comments/list/${contentId}`,
+      {
+        headers: withHeaders(),
+        params,
+      },
+    );
+
+  return data;
+};
+
+export const getRecordCollaboratorCommentById = async (
+  id: string,
+): Promise<RecordCollaboratorCommentDto> => {
+  const { data } = await recordAxiosInstance.get<RecordCollaboratorCommentDto>(
+    `/record-collaborator-comments/${id}`,
+    {
+      headers: withHeaders(),
+    },
+  );
+
+  return data;
+};
+
+export const deleteRecordCollaboratorComment = async (
+  id: string,
+): Promise<DeleteRecordCollaboratorCommentResponse> => {
+  const { data } =
+    await recordAxiosInstance.delete<DeleteRecordCollaboratorCommentResponse>(
+      `/record-collaborator-comments/${id}`,
+      {
+        headers: withHeaders(),
+      },
+    );
+
+  return data;
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/recordFileService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/recordFileService.ts
new file mode 100644
index 000000000..f25dbc90e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/recordFileService.ts
@@ -0,0 +1,191 @@
+import { BaseUploadDto } from '@/record-management/dto/fileDto'
+import {
+	updateStatus,
+	UploadContext,
+	uploadFile,
+	uploadMeta,
+} from '@/shared/services/fileService'
+import recordAxiosInstance from '@/shared/services/recordAxiosInstance'
+
+const mimeToExtension: Record<string, string> = {
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  "application/msword": "application/msword",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  "application/vnd.ms-excel": "application/vnd.ms-excel",
+  "application/pdf": "application/pdf",
+  "image/png": "image/png",
+  "image/jpeg": "image/jpeg",
+  "image/gif": "image/gif",
+  "text/plain": "text/plain",
+  "application/vnd.ms-powerpoint": "application/vnd.ms-powerpoint",
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation":
+    "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+  "application/acad": "application/acad",
+  "application/x-autocad": "application/x-autocad",
+  "application/x-dwg": "application/x-dwg",
+  "image/vnd.dwg": "image/vnd.dwg",
+  "application/dxf": "application/dxf",
+  "application/x-dxf": "application/x-dxf",
+  "image/vnd.dxf": "image/vnd.dxf",
+  "application/x-autocad-dwt": "application/x-autocad-dwt",
+  "application/x-autocad-dws": "application/x-autocad-dws",
+  "application/x-esri-map": "application/x-esri-map",
+  "application/x-esri-arcgis-pro-project":
+    "application/x-esri-arcgis-pro-project",
+  "application/x-rar-compressed": "application/x-rar-compressed",
+  "application/vnd.rar": "application/vnd.rar",
+  "application/zip": "application/zip",
+  "application/octet-stream": "application/octet-stream",
+  "application/x-shapefile": "application/x-shapefile",
+  "application/x-dbf": "application/x-dbf",
+  "application/x-cpg": "application/x-cpg",
+  "application/x-shx": "application/x-shx",
+  "application/x-qmd": "application/x-qmd",
+  "application/vnd.shp": "application/vnd.shp",
+  "application/vnd.dbf": "application/vnd.dbf",
+  "application/vnd.cpg": "application/vnd.cpg",
+  "application/vnd.shx": "application/vnd.shx",
+  "application/vnd.qmd": "application/vnd.qmd",
+};
+
+const recordFileContext: UploadContext<BaseUploadDto> = {
+  endpoint: "/record-attachments",
+  module: "record-management",
+  uploadContext: "record",
+  allowedMimeTypes: [
+    "image/png",
+    "image/jpeg",
+    "image/gif",
+    "application/pdf",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    "application/msword",
+    "application/vnd.ms-excel",
+    "application/vnd.ms-powerpoint",
+    "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+    "application/acad",
+    "application/x-autocad",
+    "application/x-dwg",
+    "image/vnd.dwg",
+    "application/dxf",
+    "application/x-dxf",
+    "image/vnd.dxf",
+    "application/x-autocad-dwt",
+    "application/x-autocad-dws",
+    "application/x-esri-map",
+    "application/x-esri-arcgis-pro-project",
+    "application/x-rar-compressed",
+    "application/vnd.rar",
+    "application/zip",
+    "application/octet-stream",
+    "application/x-shapefile",
+    "application/x-dbf",
+    "application/x-cpg",
+    "application/x-shx",
+    "application/x-qmd",
+    "application/vnd.shp",
+    "application/vnd.dbf",
+    "application/vnd.cpg",
+    "application/vnd.shx",
+    "application/vnd.qmd",
+  ],
+  allowedExtensions: [
+    ".png",
+    ".jpg",
+    ".jpeg",
+    ".gif",
+    ".pdf",
+    ".doc",
+    ".docx",
+    ".xls",
+    ".xlsx",
+    ".ppt",
+    ".pptx",
+    ".dwg",
+    ".dxf",
+    ".dwt",
+    ".bak",
+    ".sv$",
+    ".dws",
+    ".mxd",
+    ".aprx",
+    ".rar",
+    ".zip",
+    ".cpg",
+    ".dbf",
+    ".qmd",
+    ".shp",
+    ".shx",
+  ],
+  maxSizeMB: 500,
+  buildBody: (file, fileName, recordContentId) => {
+    // Infer MIME type from file extension if file.type is empty
+    let contentType = mimeToExtension[file.type] || file.type;
+
+    if (!contentType && file.name) {
+      const ext = file.name.split(".").pop()?.toLowerCase();
+      const extensionMimeMap: Record<string, string> = {
+        shp: "application/vnd.shp",
+        dbf: "application/vnd.dbf",
+        cpg: "application/vnd.cpg",
+        shx: "application/vnd.shx",
+        qmd: "application/vnd.qmd",
+        dwg: "application/x-dwg",
+        dxf: "application/dxf",
+        txt: "text/plain",
+        pdf: "application/pdf",
+        zip: "application/zip",
+        rar: "application/x-rar-compressed",
+        jpg: "image/jpeg",
+        jpeg: "image/jpeg",
+        png: "image/png",
+        gif: "image/gif",
+        doc: "application/msword",
+        docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+        xls: "application/vnd.ms-excel",
+        xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        ppt: "application/vnd.ms-powerpoint",
+        pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+      };
+      contentType = ext ? extensionMimeMap[ext] : "application/octet-stream";
+    }
+
+    return {
+      fileInfo: {
+        fileName,
+        originalname: file.name,
+        contentType: contentType || "application/octet-stream",
+        fileType: (
+          file.name.split(".").pop() ||
+          file.type.split("/").pop() ||
+          "bin"
+        ).toLowerCase(),
+        size: file.size,
+      },
+      name: { am: file.name, en: file.name },
+      recordContentId,
+    };
+  },
+};
+
+export const recordFileService = {
+  uploadMeta: (file: File, fileName: string, employeeId: string) =>
+    uploadMeta(
+      recordFileContext,
+      file,
+      fileName,
+      employeeId,
+      recordAxiosInstance,
+    ),
+  updateStatus: (fileId: string, parentId: string, uploaded: boolean) =>
+    updateStatus(
+      "/record-attachments",
+      fileId,
+      parentId,
+      uploaded,
+      recordAxiosInstance,
+    ),
+  uploadFile,
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/recordOfficerService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/recordOfficerService.ts
new file mode 100644
index 000000000..4a978c8c8
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/recordOfficerService.ts
@@ -0,0 +1,141 @@
+import {
+  RecordOfficerOutgoingRecordsListResponse,
+  RecordOfficerRecordsListResponse,
+} from "@/record-management/dto/recordOfficer/recordOfficerRecordDto";
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+import Cookies from "js-cookie";
+import { withHeaders } from "./withHeaders";
+
+export interface OutgoingRecordQueryParams {
+  orderBy?: string;
+  take?: number;
+  skip?: number;
+  order?: string;
+  referenceNumber?: string;
+  subject?: string;
+  receiverPosition?: string;
+  receiverEmployee?: string;
+  sendingPosition?: string;
+  fromDispatchedDate?: string;
+  toDispatchedDate?: string;
+  from?: string;
+  to?: string;
+  status?: string;
+  recordBoxStatus?: string;
+  isUrgent?: boolean;
+  isRO?: boolean;
+  nonSmartOfficeRecordStatus?: string;
+  recordTypeKey?: string;
+}
+
+export const dispatchedRecords = async (
+  params?: OutgoingRecordQueryParams,
+): Promise<RecordOfficerOutgoingRecordsListResponse> => {
+  try {
+    const response = await recordAxiosInstance.get(
+      `/outgoing-instances/dispatched`,
+      {
+        params,
+        headers: withHeaders(),
+      },
+    );
+
+    return response.data;
+  } catch (error) {
+    throw new Error("Failed to fetch dispatched records");
+  }
+};
+
+export const toBeDispatchedRecords = async (
+  params?: OutgoingRecordQueryParams,
+): // params?: OutgoingRecordQueryParams
+Promise<any> => {
+  try {
+    const response = await recordAxiosInstance.get(
+      `/outgoing-instances/to-be-dispatched`,
+      {
+        params,
+        headers: withHeaders(),
+      },
+    );
+
+    return response.data;
+  } catch (error) {
+    throw new Error("Failed to fetch to-be-dispatched records");
+  }
+};
+export const addReplies = async (body: any): Promise<any> => {
+  try {
+    const response = await recordAxiosInstance.post("/record-replies", body, {
+      headers: withHeaders(),
+    });
+    return response.data;
+  } catch (error) {
+    throw new Error("Failed to add replies");
+  }
+};
+export const deleteReplies = async (replyId: string): Promise<any> => {
+  try {
+    const response = await recordAxiosInstance.delete(
+      `/record-replies/${replyId}`,
+      {
+        headers: withHeaders(),
+      },
+    );
+    return response.data;
+  } catch (error) {
+    throw new Error("Failed to delete replies");
+  }
+};
+export const editReplies = async (replyId: string, body: any): Promise<any> => {
+  try {
+    const response = await recordAxiosInstance.put(
+      `/record-replies/${replyId}`,
+      body,
+      {
+        headers: withHeaders(),
+      },
+    );
+    return response.data;
+  } catch (error) {
+    throw new Error("Failed to edit replies");
+  }
+};
+export const dispatchRecord = async (body: any): Promise<any> => {
+  try {
+    const response = await recordAxiosInstance.patch(
+      "outgoing-instances/dispatch",
+      body,
+      {
+        headers: withHeaders(),
+        responseType: "blob", // to handle PDF blob if returned
+      },
+    );
+
+    const contentType = String(response.headers["content-type"] ?? "");
+    const contentLength = String(response.headers["content-length"] ?? "");
+
+    if (contentType.includes("application/pdf")) {
+      const pdfBlob = new Blob([response.data], { type: "application/pdf" });
+      const pdfUrl = window.URL.createObjectURL(pdfBlob);
+      window.open(pdfUrl, "_blank");
+      return;
+    }
+
+    if (contentLength === "0" || response.status === 204) {
+      return;
+    }
+
+    if (contentType.includes("application/json")) {
+      // Manually parse blob as JSON
+      const text = await response.data.text();
+      return JSON.parse(text);
+    }
+
+    return;
+  } catch (error: any) {
+    console.error("Error dispatching record:", error);
+    // ⛔️ don’t wrap → let useErrorHandler handle parsing
+    throw new Error("Failed to dispatch record");
+  }
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/recordTypesService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/recordTypesService.ts
new file mode 100644
index 000000000..d7768348b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/recordTypesService.ts
@@ -0,0 +1,15 @@
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+import Cookies from "js-cookie";
+import { withHeaders } from "./withHeaders";
+
+export const fetchRecordTypes = async (): Promise<any> => {
+  try {
+    const { data } = await recordAxiosInstance.get("record-types", {
+      headers: withHeaders(),
+    });
+
+    return data;
+  } catch (error) {
+    throw error;
+  }
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/remarkService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/remarkService.ts
new file mode 100644
index 000000000..b8e719c6d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/remarkService.ts
@@ -0,0 +1,18 @@
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+import Cookies from "js-cookie";
+import { withHeaders } from "./withHeaders";
+
+export const getRemarks = async (recordId: string): Promise<any> => {
+  try {
+    const { data } = await recordAxiosInstance.get(
+      `outgoing-histories/record-outgoing-history/${recordId}`,
+      {
+        headers: withHeaders(),
+      }
+    );
+
+    return data;
+  } catch (error) {
+    throw error;
+  }
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/reportService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/reportService.ts
new file mode 100644
index 000000000..bfc94ebdd
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/reportService.ts
@@ -0,0 +1,135 @@
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+import { withHeaders } from "./withHeaders";
+
+interface IncomingStatusCounts {
+  draft?: number;
+  accepted?: number;
+  rejected?: number;
+  replied?: number;
+  re_assigned?: number;
+  urgent?: {
+    draft?: number;
+    accepted?: number;
+    rejected?: number;
+    replied?: number;
+  };
+}
+
+interface IncomingStatusByRecordType {
+  internal?: IncomingStatusCounts;
+  internal_memo?: IncomingStatusCounts;
+  direct?: IncomingStatusCounts;
+  non_smart_user?: IncomingStatusCounts;
+  external_non_smart_user?: IncomingStatusCounts;
+  external?: IncomingStatusCounts;
+  for_your_reference?: IncomingStatusCounts;
+  cc?: IncomingStatusCounts;
+}
+
+export interface Report {
+  activeApprovalCount?: {
+    myNotUrgentWorkflowsCount?: number;
+    myUrgentWorkflowCount?: number;
+  };
+  outgoingRecordStatusCount?: {
+    Approved?: number;
+    "Team Signature"?: number;
+    Dispatched?: number;
+    "Team Rejected"?: number;
+    Submitted?: number;
+    Adjustment?: number;
+    Rejected?: number;
+    Draft?: number;
+  };
+  collaborationCount?: {
+    signed?: number;
+    draft?: number;
+    rejected?: number;
+  };
+  incomingStatusCountByEmployee?: IncomingStatusByRecordType;
+  incomingStatusCountByPosition?: IncomingStatusByRecordType;
+  incomingCCCounts?: {
+    Unseen?: number;
+    Seen?: number;
+  };
+  ccStatusCounts?: {
+    ccCount?: number;
+  };
+  forYourReferenceCCStatusCounts?: {
+    forYourReferenceCount?: number;
+  };
+}
+export interface ReportIncoming {
+  status: string;
+  count: number;
+}
+export interface ReportRO {
+  recordCount?: {
+    external?: {
+      assigned?: number;
+      not_assigned?: number;
+    };
+    internal?: {
+      assigned?: number;
+      not_assigned?: number;
+    };
+    internal_memo?: {
+      assigned?: number;
+      not_assigned?: number;
+    };
+    non_smart_user?: {
+      assigned?: number;
+      not_assigned?: number;
+    };
+    external_non_smart_user?: {
+      assigned?: number;
+      not_assigned?: number;
+    };
+  };
+  recordBoxCount?: {
+    assigned?: number;
+    not_assigned?: number;
+    draft?: number;
+  };
+  outgoingInstanceCount?: {
+    Adjustment?: number;
+    Approved?: number;
+    Dispatched?: number;
+    Draft?: number;
+    Submitted?: number;
+    "Team Rejected"?: number;
+    "Team Signature"?: number;
+    urgent?: {
+      Adjustment?: number;
+      Approved?: number;
+      Dispatched?: number;
+      Draft?: number;
+      Submitted?: number;
+      "Team Rejected"?: number;
+      "Team Signature"?: number;
+    };
+  };
+}
+export const getReport = async (): Promise<Report> => {
+  const response = await recordAxiosInstance.get("/report/dashboard", {
+    headers: withHeaders(),
+  });
+
+  return response.data;
+};
+export const getReportRO = async (params?: any): Promise<ReportRO> => {
+  const response = await recordAxiosInstance.get("/report/ro-dashboard", {
+    params,
+    headers: withHeaders(),
+  });
+
+  return response.data;
+};
+export const getIncomingReport = async (
+  id: string,
+): Promise<ReportIncoming[]> => {
+  const response = await recordAxiosInstance.get(
+    `/incoming-instances/record-status-report/${id}`,
+  );
+  return response.data;
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/returnService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/returnService.ts
new file mode 100644
index 000000000..b9dabad56
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/returnService.ts
@@ -0,0 +1,27 @@
+import { useMutation, UseMutationResult } from "@tanstack/react-query";
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+
+export interface SendBackPayload {
+  recordId: string;
+  action: string;
+  comment: string;
+}
+
+const sendBackToInitiator = async (payload: SendBackPayload) => {
+  const { data } = await recordAxiosInstance.post(
+    "outgoing-instances/send-back-to-initiator",
+    payload
+  );
+  return data;
+};
+
+export const useSendBackToInitiator = (): UseMutationResult<
+  any,
+  Error,
+  SendBackPayload,
+  unknown
+> => {
+  return useMutation({
+    mutationFn: sendBackToInitiator,
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/sealService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/sealService.ts
new file mode 100644
index 000000000..1587bc8b3
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/sealService.ts
@@ -0,0 +1,42 @@
+import {
+  Seal,
+  SealDetail,
+} from "@/record-management/components/hooks/useSeals";
+import axiosInstance from "@/shared/services/axiosInstance";
+
+import { withHeaders } from "./withHeaders";
+
+export const fetchSealById = async (sealId: string): Promise<SealDetail> => {
+  try {
+    const { data } = await axiosInstance.get<SealDetail>(`seals/${sealId}`, {
+      headers: withHeaders(),
+    });
+
+    if (!data?.id) {
+      throw new Error("Invalid seal detail response");
+    }
+
+    return data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export const fetchSeal = async (id: string): Promise<{ items: Seal[] }> => {
+  try {
+    const { data } = await axiosInstance.get<{ items: Seal[] }>(
+      `seals/list/${id}`,
+      {
+        headers: withHeaders(),
+      }
+    );
+
+    if (!data?.items) {
+      throw new Error("Invalid response structure");
+    }
+
+    return data;
+  } catch (error) {
+    throw error;
+  }
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/sectorReportService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/sectorReportService.ts
new file mode 100644
index 000000000..61f02e2ed
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/sectorReportService.ts
@@ -0,0 +1,52 @@
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+import { withHeaders } from "./withHeaders";
+import {
+  RecordPeriodTotals,
+  SectorRecordReport,
+  SectorReportFilters,
+  SectorReportResponse,
+} from "@/record-management/components/sectorReports/types";
+
+const numberValue = (value: unknown) => {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+};
+
+const normalizeTotals = (value: any): RecordPeriodTotals => ({
+  today: numberValue(value?.today),
+  thisWeek: numberValue(value?.thisWeek ?? value?.week),
+  thisMonth: numberValue(value?.thisMonth ?? value?.month),
+  allTime: numberValue(value?.allTime ?? value?.total),
+});
+
+const normalizeReport = (item: any): SectorRecordReport => ({
+  sectorId: String(item?.sectorId ?? item?.positionId ?? item?.id ?? ""),
+  sectorName: item?.sectorName ?? item?.positionName ?? item?.name ?? "—",
+  groupId: item?.groupId ?? null,
+  groupName: item?.groupName ?? null,
+  incoming: normalizeTotals(item?.incoming ?? item?.incomingRecords),
+  outgoing: normalizeTotals(item?.outgoing ?? item?.outgoingRecords),
+});
+
+/**
+ * Sector activity report contract.
+ *
+ * The normalizer accepts both `{ items: [...] }` and a bare array, and common
+ * period aliases, so minor backend response differences remain isolated here.
+ */
+export const fetchSectorRecordReport = async (
+  filters: SectorReportFilters = {},
+): Promise<SectorReportResponse> => {
+  const { unitId, ...remainingFilters } = filters;
+  const isAllSectors = Boolean(unitId && !remainingFilters.positionId);
+  const endpoint = isAllSectors
+    ? `/reports/sector-records/unit/${encodeURIComponent(unitId!)}`
+    : "/reports/sector-records";
+
+  const { data } = await recordAxiosInstance.get(endpoint, {
+    params: isAllSectors ? remainingFilters : filters,
+    headers: withHeaders(),
+  });
+  const items = Array.isArray(data) ? data : (data?.items ?? []);
+  return { items: items.map(normalizeReport) };
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/sessionService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/sessionService.ts
new file mode 100644
index 000000000..86941963f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/sessionService.ts
@@ -0,0 +1,50 @@
+import axiosInstance from "@/shared/services/axiosInstance";
+import { withHeaders } from "./withHeaders";
+
+export interface sessionParams {
+  skip?: number;
+  take?: number;
+  orderBy?: string;
+}
+interface revokeSessionPayload {
+  sessionIds: string[];
+}
+
+export const getMySessions = async (params: sessionParams): Promise<any> => {
+  try {
+    return await axiosInstance.get(
+      "sessions/my-sessions",
+
+      {
+        params: {
+          ...params,
+        },
+        headers: withHeaders(),
+      }
+    );
+  } catch (error) {
+    throw error;
+  }
+};
+
+export const deleteSession = async (id: string): Promise<any> => {
+  try {
+    return await axiosInstance.delete(`sessions/revoke/${id}`, {
+      headers: withHeaders(),
+    });
+  } catch (error) {
+    throw error;
+  }
+};
+
+export const deleteAllSession = async (
+  payload: revokeSessionPayload
+): Promise<any> => {
+  try {
+    return await axiosInstance.post(`sessions/bulk-revoke`, payload, {
+      headers: withHeaders(),
+    });
+  } catch (error) {
+    throw error;
+  }
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/signatureAndTeeterService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/signatureAndTeeterService.ts
new file mode 100644
index 000000000..bb9d8b274
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/signatureAndTeeterService.ts
@@ -0,0 +1,157 @@
+import {
+  UploadSignatureDto,
+  UploadTeeterDto,
+} from "@/record-management/dto/fileDto";
+import { uploadAndCreateResource } from "@/shared/services/unifiedUploadService";
+import axiosInstance from "@/shared/services/axiosInstance";
+
+import {
+  SignatureListResponse,
+  StampResponseDTO,
+  TeeterListResponse,
+} from "@/record-management/dto/userRecords/teetersAndSignatureDto";
+import Cookies from "js-cookie";
+
+export const withHeaders = (passPosId: boolean = false) => {
+  const unitId = Cookies.get("unit-id");
+  const positionId = Cookies.get("current-position-id");
+  const projectId = Cookies.get("current-project-id");
+  const delegatedPositionId = Cookies.get("delegatedPositionId");
+
+  const headers: Record<string, string> = {};
+
+  if (unitId) headers["unit-id"] = unitId;
+  if (projectId) headers["x-current-project-id"] = projectId;
+  if (passPosId && delegatedPositionId)
+    headers["x-delegated-position-id"] = delegatedPositionId;
+  if (passPosId && positionId) headers["x-current-position-id"] = positionId;
+  return headers;
+};
+
+export const SignatureAndTeeterService = {
+  signature: {
+    uploadAndCreate: (file: File, fileName: string, employeeId: string) =>
+      uploadAndCreateResource(
+        {
+          type: "signature",
+          file,
+          name: { am: fileName, en: fileName },
+          parentId: employeeId,
+        },
+        axiosInstance,
+      ),
+  },
+
+  teeter: {
+    uploadAndCreate: (
+      file: File,
+      fileName: string,
+      employeePositionId: string,
+      locale?: "am" | "en" | null,
+    ) =>
+      uploadAndCreateResource(
+        {
+          type: "stamp",
+          file,
+          name: { am: fileName, en: fileName },
+          parentId: employeePositionId,
+          locale,
+        },
+        axiosInstance,
+      ),
+  },
+};
+export const fetchSignatureList = async (
+  id: string,
+): Promise<SignatureListResponse> => {
+  try {
+    const { data } = await axiosInstance.get<SignatureListResponse>(
+      `/signatures/mine`,
+      {
+        headers: {
+          ...withHeaders(),
+        },
+      },
+    );
+
+    return data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export const fetchTeetersList = async (
+  id: string,
+): Promise<TeeterListResponse> => {
+  try {
+    const { data } = await axiosInstance.get<TeeterListResponse>(
+      `/employee-stamps/list/${id}`,
+      {
+        headers: {
+          ...withHeaders(true),
+        },
+      },
+    );
+
+    return data;
+  } catch (error) {
+    throw error;
+  }
+};
+export const fetchMyTeetersList = async (): Promise<StampResponseDTO> => {
+  const { data } = await axiosInstance.get<StampResponseDTO>(
+    `/employee-stamps/mine`,
+    { headers: { ...withHeaders(true) } },
+  );
+  return data;
+};
+
+export const fetchSignaturePresigned = async (
+  id: string,
+): Promise<{ presigned: string }> => {
+  try {
+    const { data } = await axiosInstance.get(`/signatures/${id}`, {
+      headers: withHeaders(),
+    });
+    return data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export const fetchTeeterPresigned = async (
+  id: string,
+): Promise<{ presigned: string }> => {
+  try {
+    const { data } = await axiosInstance.get(`/employee-stamps/${id}`, {
+      headers: withHeaders(),
+    });
+    return data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export const deactivateSignature = async (id: string) => {
+  await axiosInstance.put(
+    `/signatures/change-status/${id}`,
+    {
+      isCurrent: false,
+    },
+    {
+      headers: withHeaders(),
+    },
+  );
+};
+
+export const deactivateTeeter = async (id: string) => {
+  await axiosInstance.put(
+    `/employee-stamps/change-status/${id}`,
+    {
+      isCurrent: false,
+    },
+    {
+      headers: withHeaders(),
+    },
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/templateService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/templateService.ts
new file mode 100644
index 000000000..0ad2f755e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/templateService.ts
@@ -0,0 +1,18 @@
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+import { withHeaders } from "./withHeaders";
+import { externalParam } from "@/external-portal/services/portalOutgoingService";
+import { LetterTemplateListResponseDTO } from "@/record-management/components/hooks/useTemplate";
+
+export const getTemplate = async (
+  unitId: string,
+  params: externalParam,
+): Promise<LetterTemplateListResponseDTO> => {
+  const { data } = await recordAxiosInstance.get<LetterTemplateListResponseDTO>(
+    `record-templates/list/${unitId}`,
+    {
+      headers: withHeaders(),
+      params,
+    },
+  );
+  return data;
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/userRecordService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/userRecordService.ts
new file mode 100644
index 000000000..a305ac667
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/userRecordService.ts
@@ -0,0 +1,692 @@
+import {
+  RecordDto,
+  RecordPayload,
+} from "@/record-management/dto/userRecords/userRecordsDto";
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+
+import { withHeaders } from "./withHeaders";
+import { RecordVerificationDto } from "@/record-management/dto/userRecords/recordVerificationDto";
+
+export interface PaginationParams {
+  skip?: number;
+  take?: number;
+  status?: string;
+  subject?: string;
+  to?: string;
+  receiverPosition?: string;
+  referenceNumber?: string;
+  fromCreatedAt?: string;
+  toCreatedAt?: string;
+  orderBy?: string;
+}
+
+export interface PaginatedResponse {
+  items: RecordDto[];
+  count: number;
+}
+
+export interface RecordContentHistoryEmployeeName {
+  am?: string;
+  en?: string;
+}
+
+export interface RecordContentOutgoingHistory {
+  action?: string;
+  createdAt?: string;
+  comment?: string;
+  id: string;
+  version?: number;
+  employeePosition?: {
+    id: string;
+    employee?: {
+      id: string;
+      name?: RecordContentHistoryEmployeeName;
+    };
+  };
+}
+
+export interface RecordContentByRecordIdResponse {
+  id: string;
+  isCurrent?: boolean;
+  ccPositions?: {
+    position?: {
+      id?: string;
+    };
+  }[];
+  outgoingHistories?: RecordContentOutgoingHistory[];
+}
+
+/**
+ * GET /records/mine
+ * --------------------------------------------------
+ * Fetch records created by the current user.
+ */
+export const fetchMyRecords = async (
+  params?: PaginationParams,
+): Promise<PaginatedResponse> => {
+  const { data } = await recordAxiosInstance.get<PaginatedResponse>(
+    "/records/mine",
+    {
+      params,
+      headers: withHeaders(),
+    },
+  );
+
+  return data;
+};
+export const fetchMyRecordsParent = async (
+  params?: PaginationParams,
+): Promise<PaginatedResponse> => {
+  const { data } = await recordAxiosInstance.get<PaginatedResponse>(
+    "records/my-parent",
+    {
+      params,
+      headers: withHeaders(),
+    },
+  );
+
+  return data;
+};
+
+/**
+ * POST /records
+ * --------------------------------------------------
+ * Create a new record.
+ */
+export const createRecord = async <T = any>(payload: T): Promise<RecordDto> => {
+  const { data } = await recordAxiosInstance.post<T>("/records", payload, {
+    headers: withHeaders(),
+  });
+
+  return data as RecordDto;
+};
+
+export const makeSecureRecord = async <T = any>(
+  id: string,
+): Promise<RecordDto> => {
+  const { data } = await recordAxiosInstance.patch<T>(
+    `/records/make-secured/${id}`,
+    {
+      isSecured: true,
+    },
+    {
+      headers: withHeaders(),
+    },
+  );
+
+  return data as RecordDto;
+};
+
+export const unMakeSecureRecord = async <T = any>(
+  id: string,
+): Promise<RecordDto> => {
+  const { data } = await recordAxiosInstance.patch<T>(
+    `/records/make-secured/${id}`,
+    {
+      isSecured: false,
+    },
+    {
+      headers: withHeaders(),
+    },
+  );
+
+  return data as RecordDto;
+};
+
+export const makeUrgentRecord = async <T = any>(
+  id: string,
+): Promise<RecordDto> => {
+  const { data } = await recordAxiosInstance.patch<T>(
+    `/records/make-urgent/${id}`,
+    {
+      isUrgent: true,
+    },
+    {
+      headers: withHeaders(),
+    },
+  );
+
+  return data as RecordDto;
+};
+
+export const unMakeUrgentRecord = async <T = any>(
+  id: string,
+): Promise<RecordDto> => {
+  const { data } = await recordAxiosInstance.patch<T>(
+    `/records/make-urgent/${id}`,
+    {
+      isUrgent: false,
+    },
+    {
+      headers: withHeaders(),
+    },
+  );
+
+  return data as RecordDto;
+};
+
+/**
+ * PUT /records/:id
+ * --------------------------------------------------
+ * Update an existing record.
+ */
+export const updateRecord = async <T = any>(
+  recordId: string,
+  payload: T,
+): Promise<RecordDto> => {
+  const { data } = await recordAxiosInstance.put<T>(
+    `/records/${recordId}`,
+    payload,
+    {
+      headers: withHeaders(),
+    },
+  );
+
+  return data as RecordDto;
+};
+
+export interface ApprovalDispatchData {
+  stampId?: string;
+  signatureId?: string;
+  note?: string;
+  recordPrefixId?: string;
+}
+
+export interface UpdateDelegationRecordPayload {
+  id: string;
+  endDate: Date;
+  startDate: Date;
+  positionId?: string;
+  employeeId?: string;
+  internalCC?: {
+    unitId: string;
+    positionId: string;
+    type: "internal" | "external";
+  }[];
+  stampId?: string;
+  signatureId?: string;
+  language?: "en" | "am";
+}
+
+/**
+ * POST /records/create-and-submit
+ * --------------------------------------------------
+ * Create a record and forward (submit) it in a single call.
+ * Backend expects the record payload wrapped in `createDto`.
+ */
+export const createAndSubmitRecord = async <T = any>(
+  payload: T,
+): Promise<RecordDto> => {
+  try {
+    const { data } = await recordAxiosInstance.post(
+      "/records/create-and-submit",
+      { createDto: payload },
+      { headers: withHeaders() },
+    );
+    return data as RecordDto;
+  } catch (error: any) {
+    const message =
+      error?.response?.data?.message || "Failed to create and forward record";
+    throw new Error(message);
+  }
+};
+
+/**
+ * POST /records/create-submit-and-send-to-ro
+ * --------------------------------------------------
+ * Create + submit + send-to-RO (approve) in a single call.
+ * Backend expects: { createDto: <record>, submitDto: <approval> }
+ */
+export const createSubmitAndSendToRoRecord = async <T = any>(
+  payload: T,
+  approval: ApprovalDispatchData,
+): Promise<RecordDto> => {
+  try {
+    const { data } = await recordAxiosInstance.post(
+      "/records/create-submit-and-send-to-ro",
+      { createDto: payload, submitDto: approval },
+      { headers: withHeaders() },
+    );
+    return data as RecordDto;
+  } catch (error: any) {
+    const message =
+      error?.response?.data?.message || "Failed to create and approve record";
+    throw new Error(message);
+  }
+};
+
+/**
+ * PATCH /records/update-and-submit/{id}
+ * --------------------------------------------------
+ * Update a record and forward (submit) it in a single call.
+ * Backend expects the record payload wrapped in `updateDto`.
+ */
+export const updateAndSubmitRecord = async <T = any>(
+  recordId: string,
+  payload: T,
+): Promise<RecordDto> => {
+  try {
+    const { data } = await recordAxiosInstance.patch(
+      `/records/update-and-submit/${recordId}`,
+      { updateDto: payload },
+      { headers: withHeaders() },
+    );
+    return data as RecordDto;
+  } catch (error: any) {
+    const message =
+      error?.response?.data?.message || "Failed to update and forward record";
+    throw new Error(message);
+  }
+};
+
+export const updateDelegationRecord = async ({
+  id,
+  endDate,
+  startDate,
+  positionId,
+  employeeId,
+  internalCC,
+  stampId,
+  signatureId,
+  language,
+}: UpdateDelegationRecordPayload): Promise<void> => {
+  await recordAxiosInstance.patch(
+    `/records/delegation-record/${id}`,
+    {
+      to: endDate.toISOString(),
+      from: startDate.toISOString(),
+      positionId,
+      employeePositionId: employeeId,
+      cc: internalCC,
+      stampId: stampId || "",
+      signatureId: signatureId || "",
+      locale: language || "am",
+    },
+    {
+      headers: withHeaders(),
+    },
+  );
+};
+
+/**
+ * PATCH /records/update-submit-and-send-to-ro/{id}
+ * --------------------------------------------------
+ * Update + submit + send-to-RO (approve) in a single call.
+ * Backend expects: { updateDto: <record>, submitDto: <approval> }
+ */
+export const updateSubmitAndSendToRoRecord = async <T = any>(
+  recordId: string,
+  payload: T,
+  approval: ApprovalDispatchData,
+): Promise<RecordDto> => {
+  try {
+    const { data } = await recordAxiosInstance.patch(
+      `/records/update-submit-and-send-to-ro/${recordId}`,
+      { updateDto: payload, submitDto: approval },
+      { headers: withHeaders() },
+    );
+    return data as RecordDto;
+  } catch (error: any) {
+    const message =
+      error?.response?.data?.message || "Failed to update and approve record";
+    throw new Error(message);
+  }
+};
+
+/**
+ * DELETE /records/:id
+ * --------------------------------------------------
+ * Delete a record.
+ */
+export const deleteRecord = async (recordId: string): Promise<void> => {
+  await recordAxiosInstance.delete(`/records/${recordId}`, {
+    headers: withHeaders(),
+  });
+};
+
+export const directSubmitRecord = async ({
+  recordId,
+  signatureId,
+}: {
+  recordId: string;
+  signatureId: string;
+}): Promise<void> => {
+  await recordAxiosInstance.patch(
+    `/records/direct-submit/${recordId}`,
+    { signatureId },
+    {
+      headers: withHeaders(),
+    },
+  );
+};
+
+/**
+ * POST /records/create-and-submit-direct-record
+ * --------------------------------------------------
+ * Create and directly submit a direct record in a single call.
+ * Backend expects the record payload wrapped in `createDto`.
+ */
+export const createAndSubmitDirectRecord = async <T = any>({
+  payload,
+  signatureId,
+}: {
+  payload: T;
+  signatureId: string;
+}): Promise<RecordDto> => {
+  try {
+    const { data } = await recordAxiosInstance.post(
+      "/records/create-and-submit-direct-record",
+      { createDto: payload, signatureId },
+      { headers: withHeaders() },
+    );
+    return data as RecordDto;
+  } catch (error: any) {
+    const message =
+      error?.response?.data?.message ||
+      "Failed to create and send direct record";
+    throw new Error(message);
+  }
+};
+
+/**
+ * PATCH /records/update-and-submit-direct-record/{id}
+ * --------------------------------------------------
+ * Update and directly submit a direct record in a single call.
+ * Backend expects the record payload wrapped in `updateDto`.
+ */
+export const updateAndSubmitDirectRecord = async <T = any>(
+  recordId: string,
+  {
+    payload,
+    signatureId,
+  }: {
+    payload: T;
+    signatureId: string;
+  },
+): Promise<RecordDto> => {
+  try {
+    const { data } = await recordAxiosInstance.patch(
+      `/records/update-and-submit-direct-record/${recordId}`,
+      { updateDto: payload, signatureId },
+      { headers: withHeaders() },
+    );
+    return data as RecordDto;
+  } catch (error: any) {
+    const message =
+      error?.response?.data?.message ||
+      "Failed to update and send direct record";
+    throw new Error(message);
+  }
+};
+
+export const directDispatchRecord = async ({
+  recordId,
+  signatureId,
+}: {
+  recordId: string;
+  signatureId: string;
+}): Promise<void> => {
+  try {
+    await recordAxiosInstance.patch(
+      "/outgoing-instances/direct-dispatch",
+      { recordId, signatureId },
+      {
+        headers: withHeaders(),
+      },
+    );
+  } catch (error: any) {
+    const message =
+      error?.response?.data?.message || "Failed to dispatch direct record";
+    throw new Error(message);
+  }
+};
+
+export const lockRecord = async (
+  recordId: string,
+  isLocked: boolean,
+): Promise<void> => {
+  try {
+    await recordAxiosInstance.patch(
+      `/records/make-locked/${recordId}`,
+      { isLocked },
+      {
+        headers: withHeaders(),
+      },
+    );
+  } catch (error: any) {
+    const message =
+      error?.response?.data?.message || "Failed to force dispatch record";
+    throw new Error(message);
+  }
+};
+
+export const forceDispatchCollaboratorRecord = async (
+  recordId: string,
+): Promise<void> => {
+  try {
+    await recordAxiosInstance.patch(
+      "/record-collaborators/force-dispatch",
+      { recordId },
+      {
+        headers: withHeaders(),
+      },
+    );
+  } catch (error: any) {
+    const message =
+      error?.response?.data?.message || "Failed to force dispatch record";
+    throw new Error(message);
+  }
+};
+export const forceDispatchCollaboratorInternalMemoRecord = async (
+  recordId: string,
+): Promise<void> => {
+  try {
+    await recordAxiosInstance.patch(
+      "/record-collaborators/force-send-to-ro",
+      { recordId },
+      {
+        headers: withHeaders(),
+      },
+    );
+  } catch (error: any) {
+    const message =
+      error?.response?.data?.message || "Failed to force dispatch record";
+    throw new Error(message);
+  }
+};
+export const softDeleteRecord = async (recordId: string): Promise<void> => {
+  await recordAxiosInstance.delete(`/records/${recordId}`, {
+    headers: withHeaders(),
+  });
+};
+
+export const getAttachmentsById = async (id: any): Promise<any> => {
+  const response = await recordAxiosInstance.get(`record-attachments/${id}`, {
+    headers: withHeaders(),
+  });
+  return response.data;
+};
+export const getSealedAttachmentsById = async (id: any): Promise<any> => {
+  const response = await recordAxiosInstance.get(
+    `record-attachments/sealed/${id}`,
+    {
+      headers: withHeaders(),
+    },
+  );
+  return response.data;
+};
+
+export const deleteAttachmentsById = async (id: any): Promise<void> => {
+  await recordAxiosInstance.delete(`record-attachments/${id}`, {
+    headers: withHeaders(),
+  });
+};
+
+export const fetchRecordById = async (recordId: string): Promise<RecordDto> => {
+  const { data } = await recordAxiosInstance.get(`records/${recordId}`, {
+    headers: withHeaders(),
+  });
+
+  return data;
+};
+
+export const fetchRecordContentByRecordId = async (
+  recordId: string,
+): Promise<RecordContentByRecordIdResponse> => {
+  const { data } = await recordAxiosInstance.get(
+    `record-contents/by-record/${recordId}`,
+    {
+      headers: withHeaders(),
+    },
+  );
+
+  return data;
+};
+
+export const fetchRecordInstanceById = async (
+  recordId: string,
+): Promise<RecordDto> => {
+  const { data } = await recordAxiosInstance.get(
+    `/incoming-instances/${recordId}/record`,
+    {
+      headers: withHeaders(),
+    },
+  );
+
+  return data;
+};
+
+export const fetchDelegationRecordById = async (
+  recordId: string,
+): Promise<RecordDto> => {
+  const { data } = await recordAxiosInstance.get(
+    `/records/delegation-record/${recordId}`,
+    {
+      headers: withHeaders(),
+    },
+  );
+
+  return data;
+};
+
+export interface DelegationCcEntry {
+  unitId: string;
+  positionId: string;
+  type: "internal";
+}
+
+export interface UpdateDelegationDateRangePayload {
+  from: string;
+  to: string;
+  cc: DelegationCcEntry[];
+}
+
+export const updateDelegationRecordDateRange = async (
+  recordId: string,
+  payload: UpdateDelegationDateRangePayload,
+): Promise<void> => {
+  await recordAxiosInstance.patch(
+    `/records/delegation-record/${recordId}/date-range`,
+    payload,
+    {
+      headers: withHeaders(),
+    },
+  );
+};
+
+export const verifyRecordById = async (
+  recordId: string,
+): Promise<RecordVerificationDto> => {
+  const { data } = await recordAxiosInstance.get(
+    `records/verify-record/${recordId}`,
+    {
+      headers: withHeaders(),
+    },
+  );
+
+  return data;
+};
+
+export const fetchLetterById = async (recordId: string): Promise<any> => {
+  const res = await recordAxiosInstance.get(`records/record-pdf/${recordId}`);
+  return res.data;
+}; //
+export const fetchLetterPreview = async (recordId: string): Promise<any> => {
+  const res = await recordAxiosInstance.get(`records/review-pdf/${recordId}`, {
+    responseType: "arraybuffer",
+    headers: withHeaders(),
+  });
+  return res.data;
+}; // buffer draft adjustment stage
+
+export const regeneratePdf = async (recordId: string): Promise<any> => {
+  const res = await recordAxiosInstance.get(
+    `records/regenerate-pdf/${recordId}`,
+    {
+      headers: withHeaders(),
+    },
+  );
+  return res.data;
+};
+
+export const previewRecord = async (payload: any): Promise<ArrayBuffer> => {
+  const { data } = await recordAxiosInstance.post(
+    "records/preview-pdf",
+    payload,
+    {
+      responseType: "arraybuffer",
+      headers: withHeaders(),
+    },
+  );
+  return data;
+};
+
+export const previewRecordPdf = async (payload: any): Promise<Blob> => {
+  const arrayBuffer = await previewRecord(payload);
+  return new Blob([arrayBuffer], { type: "application/pdf" });
+};
+
+export interface CanSkipLevelUpResponse {
+  canSkipLevel: boolean;
+}
+
+export const canSkipLevelUp = async (): Promise<CanSkipLevelUpResponse> => {
+  try {
+    const { data } = await recordAxiosInstance.get(
+      "/outgoing-instances/can-skip-level",
+      {
+        headers: withHeaders(),
+      },
+    );
+    return {
+      canSkipLevel: data.canSkipLevel === true || data.canSkipLevel === "true",
+    };
+  } catch (error) {
+    console.error("Error checking canSkipLevelUp:", error);
+    return { canSkipLevel: false };
+  }
+};
+
+/**
+ * POST /records/share-via-email/:id
+ * --------------------------------------------------
+ * Share a record via email to specified email address.
+ */
+// export const shareRecordViaEmail = async (
+//   recordId: string,
+//   email: string
+// ): Promise<void> => {
+//   try {
+//     await recordAxiosInstance.post(
+//       `/records/share-via-email/${recordId}`,
+//       { email },
+//       {
+//         headers: withHeaders(),
+//       }
+//     );
+//   } catch (error: unknown) {
+//     const message =
+//       error?.response?.data?.message || "Failed to share record via email";
+//     throw new Error(message);
+//   }
+// };
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/userService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/api/userService.ts
new file mode 100644
index 000000000..cfca2fa68
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/userService.ts
@@ -0,0 +1,42 @@
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+import Cookies from "js-cookie";
+import { withHeaders } from "./withHeaders";
+
+interface ChangePasswordDto {
+  email: string;
+  verificationCode: string;
+  newPassword: string;
+  confirmPassword: string;
+}
+
+export const changePassword = async (data: ChangePasswordDto): Promise<any> => {
+  try {
+    const { data: responseData } = await recordAxiosInstance.patch(
+      "auth/change-password",
+      data,
+      {
+        headers: withHeaders(),
+      }
+    );
+
+    return responseData;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export const requestPasswordReset = async (email: string): Promise<any> => {
+  try {
+    const { data } = await recordAxiosInstance.post(
+      "auth/forgot-password",
+      { email },
+      {
+        headers: withHeaders(),
+      }
+    );
+
+    return data;
+  } catch (error) {
+    throw error;
+  }
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/api/withHeaders.tsx b/apps/edr-freight-web/backoffice/src/record-management/services/api/withHeaders.tsx
new file mode 100644
index 000000000..b735ce611
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/api/withHeaders.tsx
@@ -0,0 +1,18 @@
+import Cookies from "js-cookie";
+
+export const withHeaders = () => {
+  const tenantKey = Cookies.get("tenant-key");
+  const unitId = Cookies.get("unit-id");
+  const positionId = Cookies.get("current-position-id");
+  const projectId = Cookies.get("current-project-id");
+  const delegatedPositionId = Cookies.get("delegatedPositionId");
+  const headers: Record<string, string> = {};
+
+  if (tenantKey) headers["tenant-key"] = tenantKey;
+  if (unitId) headers["unit-id"] = unitId;
+  if (projectId) headers["x-current-project-id"] = projectId;
+  if (delegatedPositionId)
+    headers["x-delegated-position-id"] = delegatedPositionId;
+  if (positionId) headers["x-current-position-id"] = positionId;
+  return headers;
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/dateService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/dateService.ts
new file mode 100644
index 000000000..36112728e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/dateService.ts
@@ -0,0 +1,215 @@
+import { EthDateTime } from "ethiopian-calendar-date-converter"; // Ethiopian date library
+import { getEnvUrl } from "@/shared/config/env";
+
+const AMHARIC_MONTHS = [
+  "መስከረም",
+  "ጥቅምት",
+  "ኅዳር",
+  "ታኅሣሥ",
+  "ጥር",
+  "የካቲት",
+  "መጋቢት",
+  "ሚያዝያ",
+  "ግንቦት",
+  "ሰኔ",
+  "ሐምሌ",
+  "ነሃሴ",
+];
+
+/**
+ * Format a UTC ISO timestamp as an Amharic-locale Ethiopian-calendar string
+ * in the same shape the backend emits for `amharicCreatedAt` /
+ * `amharicStartDate` (e.g. `"ግንቦት 08/2018 - 11:24 ቀን"`).
+ *
+ * Returns an empty string for empty input and the original string for
+ * unparsable input so callers can use it as a safe fallback.
+ */
+export function formatAmharicDateTime(input?: string | Date | null): string {
+  if (!input) return "";
+  const date = input instanceof Date ? input : new Date(input);
+  if (Number.isNaN(date.getTime())) {
+    return typeof input === "string" ? input : "";
+  }
+
+  const eth = EthDateTime.fromEuropeanDate(date);
+
+  // Shift UTC into Ethiopian wall-clock time (UTC+3) so we can read the
+  // local hour without depending on the browser's time zone.
+  const eat = new Date(date.getTime() + 3 * 60 * 60 * 1000);
+  const eatHour = eat.getUTCHours();
+  const eatMin = eat.getUTCMinutes();
+
+  // 12-hour Ethiopian clock: starts at 6am = 0 (00) and counts up.
+  let ethHour = (eatHour + 6) % 12;
+  if (ethHour === 0) ethHour = 12;
+
+  // Period (ጠዋት / ቀን / ምሽት / ለሊት) by local hour bucket.
+  let period: string;
+  if (eatHour < 6) period = "ለሊት";
+  else if (eatHour < 12) period = "ጠዋት";
+  else if (eatHour < 18) period = "ቀን";
+  else period = "ምሽት";
+
+  const dayStr = String(eth.date).padStart(2, "0");
+  const hourStr = String(ethHour).padStart(2, "0");
+  const minStr = String(eatMin).padStart(2, "0");
+  const monthName = AMHARIC_MONTHS[eth.month - 1] ?? "";
+
+  return `${monthName} ${dayStr}/${eth.year} - ${hourStr}:${minStr} ${period}`;
+}
+
+class DateService {
+  static async fetchCurrentDate(): Promise<{
+    formattedGregorianDate: string;
+    formattedAmharicDate: string;
+  }> {
+    const primaryAPI = getEnvUrl("VITE_TIME_API_URL", false);
+    const fallbackAPI = getEnvUrl("VITE_TIME_FALLBACK_API_URL", false);
+
+    try {
+      if (!primaryAPI) {
+        throw new Error("Missing VITE_TIME_API_URL");
+      }
+      const data = await this.simpleFetch(primaryAPI, 5000); // 5s timeout
+      return this.processDate(data);
+    } catch (error: any) {
+      try {
+        if (!fallbackAPI) {
+          throw new Error("Missing VITE_TIME_FALLBACK_API_URL");
+        }
+        const fallbackData = await this.simpleFetch(fallbackAPI, 5000);
+        return this.processDate(fallbackData);
+      } catch (fallbackError) {
+        return this.processLocalDate();
+      }
+    }
+  }
+
+  static async simpleFetch(url: string, timeout: number): Promise<any> {
+    let isTimeout = false;
+
+    // Start a timeout
+    const timeoutId = setTimeout(() => {
+      isTimeout = true;
+    }, timeout);
+
+    try {
+      const response = await fetch(url);
+      clearTimeout(timeoutId); // Clear timeout if request succeeds
+
+      if (isTimeout) throw new Error("Request timeout");
+
+      if (!response.ok)
+        throw new Error(`Failed to fetch: ${response.statusText}`);
+
+      return await response.json();
+    } catch (error: any) {
+      throw new Error(isTimeout ? "Request timeout" : error.message);
+    }
+  }
+
+  static processDate(data: any): {
+    formattedGregorianDate: string;
+    formattedAmharicDate: string;
+  } {
+    let { day, month, year, hour, minute } = data;
+
+    // Handle fallback API response format
+    if (!day && data.datetime) {
+      const date = new Date(data.datetime);
+      day = date.getDate();
+      month = date.getMonth() + 1;
+      year = date.getFullYear();
+      hour = date.getHours();
+      minute = date.getMinutes();
+    }
+
+    const gregorianDate = new Date(year, month - 1, day, hour, minute);
+    const ethDateTime = EthDateTime.fromEuropeanDate(gregorianDate);
+
+    return {
+      formattedGregorianDate: this.formatGregorianDate(gregorianDate),
+      formattedAmharicDate: this.formatAmharicDate({
+        ethDateTime,
+        dayOfWeek: gregorianDate.getDay(),
+        ethiopianTime: this.convertToEthiopianTime(gregorianDate),
+      }),
+    };
+  }
+
+  static processLocalDate(): {
+    formattedGregorianDate: string;
+    formattedAmharicDate: string;
+  } {
+    const now = new Date();
+    const ethDateTime = EthDateTime.fromEuropeanDate(now);
+
+    return {
+      formattedGregorianDate: this.formatGregorianDate(now),
+      formattedAmharicDate: this.formatAmharicDate({
+        ethDateTime,
+        dayOfWeek: now.getDay(),
+        ethiopianTime: this.convertToEthiopianTime(now),
+      }),
+    };
+  }
+
+  static convertToEthiopianTime(gregorianDate: Date): string {
+    let hour = gregorianDate.getHours();
+    let minute = gregorianDate.getMinutes();
+
+    hour = (hour + 6) % 12 || 12; // Correctly convert to Ethiopian time
+
+    const ethHour = hour.toString().padStart(2, "0");
+    const ethMinute = minute.toString().padStart(2, "0");
+    const isMorning =
+      gregorianDate.getHours() >= 6 && gregorianDate.getHours() < 18;
+    const period = isMorning ? "AM" : "PM";
+
+    return `${ethHour}:${ethMinute} ${period}`;
+  }
+
+  static formatGregorianDate(gregorianDate: Date): string {
+    return new Intl.DateTimeFormat("en-US", {
+      weekday: "short",
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+      hour12: true,
+    }).format(gregorianDate);
+  }
+
+  static formatAmharicDate({
+    ethDateTime,
+    dayOfWeek,
+    ethiopianTime,
+  }: {
+    ethDateTime: { month: number; date: number; year: number };
+    dayOfWeek: number;
+    ethiopianTime: string;
+  }): string {
+    const dayOfWeekAmharic = ["እሁድ", "ሰኞ", "ማክሰኞ", "ረቡዕ", "ሐሙስ", "ዓርብ", "ቅዳሜ"];
+    const monthAmharic = [
+      "መስከረም",
+      "ጥቅምት",
+      "ኅዳር",
+      "ታኅሣሥ",
+      "ጥር",
+      "የካቲት",
+      "መጋቢት",
+      "ሚያዝያ",
+      "ግንቦት",
+      "ሰኔ",
+      "ሐምሌ",
+      "ነሃሴ",
+    ];
+
+    return `${dayOfWeekAmharic[dayOfWeek]} ${
+      monthAmharic[ethDateTime.month - 1]
+    } ${ethDateTime.date} ${ethDateTime.year} ${ethiopianTime} ቀን`;
+  }
+}
+
+export default DateService;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/pdfGenerationService.ts b/apps/edr-freight-web/backoffice/src/record-management/services/pdfGenerationService.ts
new file mode 100644
index 000000000..a244405ef
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/pdfGenerationService.ts
@@ -0,0 +1,631 @@
+import type { jsPDF } from "jspdf";
+export interface PDFGenerationBaseOptions {
+  margin?: [number, number, number, number];
+  filename: string;
+  pageFormat?: "A4" | "letter" | [number, number];
+  orientation?: "portrait" | "landscape";
+  footerHeight?: number;
+  headerHeight?: number;
+  headerAndFooterImageWidth?: number;
+  image?: {
+    type?: "jpeg" | "png";
+    quality?: number;
+  };
+  html2canvas?: {
+    scale?: number;
+    backgroundColor?: string | null;
+  };
+  jsPDF?: {
+    unit?: "pt" | "mm" | "cm" | "in";
+    format?: "A4" | "letter" | [number, number];
+    orientation?: "portrait" | "landscape";
+  };
+  pagebreak?: {
+    mode?: Array<"css" | "avoid-all" | "avoid" | "always">;
+  };
+}
+export interface PDFGenerationBaseOptions {
+  margin?: [number, number, number, number]; // [top, left, bottom, right]
+  filename: string;
+  pageFormat?: "A4" | "letter" | [number, number];
+  orientation?: "portrait" | "landscape";
+  footerHeight?: number;
+  headerHeight?: number;
+  image?: {
+    type?: "jpeg" | "png";
+    quality?: number;
+  };
+  html2canvas?: {
+    scale?: number;
+    backgroundColor?: string | null;
+  };
+  jsPDF?: {
+    unit?: "pt" | "mm" | "cm" | "in";
+    format?: "A4" | "letter" | [number, number];
+    orientation?: "portrait" | "landscape";
+  };
+  pagebreak?: {
+    mode?: Array<"css" | "avoid-all" | "avoid" | "always">;
+  };
+}
+
+export interface PDFContent {
+  mainContent: string;
+  header: string;
+  footer: string;
+  seal?: string; // ✅ mark as optional
+  additionalContent?: string;
+  receivingDetails?: string;
+  ccDetails?: string;
+  bestRegardsText?: string;
+}
+
+class PDFGenerationService {
+  async generatePDFBuffer(
+    content: PDFContent,
+    options: PDFGenerationBaseOptions
+  ): Promise<Blob> {
+    function mergeOptions(
+      options: PDFGenerationBaseOptions
+    ): Required<PDFGenerationBaseOptions> {
+      return {
+        ...defaultOptions,
+        ...options,
+        image: {
+          ...defaultOptions.image,
+          ...options.image,
+        },
+        html2canvas: {
+          ...defaultOptions.html2canvas,
+          ...options.html2canvas,
+        },
+        jsPDF: {
+          ...defaultOptions.jsPDF,
+          ...options.jsPDF,
+        },
+        pagebreak: {
+          ...defaultOptions.pagebreak,
+          ...options.pagebreak,
+        },
+      };
+    }
+    // Set default options
+    const defaultOptions: Required<PDFGenerationBaseOptions> = {
+      margin: [90, 30, 93, 30],
+      filename: "document.pdf",
+      pageFormat: "A4",
+      orientation: "portrait",
+      footerHeight: 80, // or your default calculation
+      headerHeight: 80,
+      headerAndFooterImageWidth: 900,
+      image: {
+        type: "jpeg",
+        quality: 0.98,
+      },
+      html2canvas: {
+        scale: 2,
+        backgroundColor: null,
+      },
+      jsPDF: {
+        unit: "pt",
+        format: "A4",
+        orientation: "portrait",
+      },
+      pagebreak: {
+        mode: ["css", "avoid-all"],
+      },
+    };
+    const mergedOptions = mergeOptions(options);
+
+    // Convert HTML elements to images
+    const headerImage = await this.convertHtmlToImage(content.header);
+    const footerImage = await this.convertHtmlToImage(content.footer);
+    const sealImage = content.seal
+      ? await this.convertHtmlToImage(content.seal)
+      : "";
+
+    const { signImageSrc, teeterImageSrc } = this.extractImageTags(
+      content.mainContent
+    ); // Prepare main content
+    const linespaceHandler = `<p></p>`;
+    const constructedContent = `
+      <div style="width: 715px">
+        ${content.additionalContent || ""}
+        ${content.receivingDetails || ""}
+        ${linespaceHandler}
+        ${this.removeImageTags(content.mainContent)}
+      </div>
+    `.replace(/<\/?html>|<\/?body>|<head>.*<\/head>/g, "");
+
+    // Prepare bottom content (signature section)
+    const bottomContents = `
+      <div id="seal-container" style="display: flex; align-items: center; justify-content: end; margin-left: 20px; background: transparent;">
+          ${content.seal}
+          <div style="display: flex; flex-direction: column;">
+            <p id="regards" style="margin-bottom: 15px; margin-left: auto; margin-right: auto;">
+              ${content.bestRegardsText ? content.bestRegardsText : ""}
+            </p>
+            ${
+              signImageSrc
+                ? `<img src="${signImageSrc}" alt="Sign Image" style="width: 96px; height: 48px; margin-bottom: 10px;">`
+                : ""
+            }
+            ${
+              teeterImageSrc
+                ? `<img src="${teeterImageSrc}" alt="Teeter Image" style="width: 144px; height: 48px;">`
+                : ""
+            }
+          </div>
+      </div>`;
+
+    // Create DOM elements for measurement
+    const contentElement = this.createContentElement(constructedContent);
+    const bottomContentElement = this.createContentElement(bottomContents);
+
+    // Calculate dimensions
+    const pageHeight = this.getPageHeight(
+      mergedOptions?.pageFormat || "A4",
+      mergedOptions.orientation || "Portrait"
+    );
+    const topBottomMargin = mergedOptions.margin[0] + mergedOptions.margin[2];
+    const availableContentHeight = pageHeight - topBottomMargin;
+
+    // Convert elements to images
+    const bottomContentImage = await this.elementToImage(bottomContentElement);
+    const bottomContentHeight = this.pixelsToPoints(
+      bottomContentElement.offsetHeight
+    );
+
+    this.safeRemoveElement(bottomContentElement);
+
+    let ccContentImage: string | null = null;
+    let ccContentHeight = 0;
+
+    if (content.ccDetails) {
+      const ccContentElement = this.createContentElement(
+        `<div>${content.ccDetails}</div>`
+      );
+      ccContentImage = await this.elementToImage(ccContentElement);
+      ccContentHeight = this.pixelsToPoints(ccContentElement.offsetHeight);
+      this.safeRemoveElement(ccContentElement);
+    }
+
+    // Generate PDF
+    const pdf = await this.generatePDF(
+      contentElement,
+      {
+        headerImage,
+        footerImage,
+        sealImage,
+        bottomContentImage,
+        bottomContentHeight,
+        ccContentImage,
+        ccContentHeight,
+      },
+      mergedOptions,
+      pageHeight,
+      availableContentHeight
+    );
+    this.safeRemoveElement(contentElement);
+
+    return pdf;
+  }
+
+  private safeRemoveElement(el: HTMLElement) {
+    if (el.parentNode === document.body) {
+      document.body.removeChild(el);
+    }
+  }
+
+  private async generatePDF(
+    contentElement: HTMLElement,
+    images: {
+      headerImage: string;
+      footerImage: string;
+      sealImage: string;
+      bottomContentImage: string;
+      bottomContentHeight: number;
+      ccContentImage: string | null;
+      ccContentHeight: number;
+    },
+    options: Required<PDFGenerationBaseOptions>,
+    pageHeight: number,
+    availableContentHeight: number
+  ): Promise<Blob> {
+    return new Promise(async (resolve, reject) => {
+      try {
+        const { default: html2pdf } = await import("html2pdf.js");
+        const pdf = await html2pdf()
+          .from(contentElement)
+          .set({
+            margin: options.margin,
+            filename: options.filename,
+            image: { type: "jpeg", quality: 0.98 },
+            html2canvas: { scale: 2, ignoreInvalidColors: true },
+            jsPDF: {
+              unit: "pt",
+              format: options.pageFormat,
+              orientation: options.orientation,
+            },
+            pagebreak: { mode: ["css", "avoid-all"] },
+          })
+          .toPdf()
+          .get("pdf")
+          .then((pdf: any) => {
+            const totalPages = pdf.internal.getNumberOfPages();
+            const contentHeight = this.pixelsToPoints(
+              contentElement.offsetHeight
+            );
+            const pageWidth = pdf.internal.pageSize.getWidth();
+            for (let i = 1; i <= totalPages; i++) {
+              pdf.setPage(i);
+
+              // Add header to every page
+              pdf.addImage(
+                images.headerImage,
+                "png",
+                options.margin[1],
+                options.margin[0],
+                pageWidth - (options.margin[1] + options.margin[3]),
+                options.headerHeight
+              );
+
+              // Add footer to every page
+              this.addFooterToPage(
+                pdf,
+                images.footerImage,
+                pageHeight,
+                options.margin[2],
+                options.margin[1],
+                options.footerHeight,
+                pageWidth - (options.margin[1] + options.margin[3])
+              );
+
+              // Handle last page specially
+              if (i === totalPages) {
+                this.handleLastPage(
+                  pdf,
+                  images,
+                  contentHeight,
+                  availableContentHeight,
+                  options,
+                  pageHeight,
+                  i
+                );
+              } else {
+                // Add seal to intermediate pages
+                if (images.sealImage) {
+                  pdf.addImage(
+                    images.sealImage,
+                    "png",
+                    350,
+                    pageHeight - options.footerHeight - 100,
+                    127.5,
+                    127.5
+                  );
+                }
+              }
+            }
+
+            return pdf;
+          })
+          .output("blob");
+
+        resolve(pdf);
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+
+  private handleLastPage(
+    pdf: jsPDF,
+    images: {
+      sealImage: string;
+      bottomContentImage: string;
+      bottomContentHeight: number;
+      ccContentImage: string | null;
+      ccContentHeight: number;
+      headerImage: string;
+      footerImage: string;
+    },
+    contentHeight: number,
+    availableContentHeight: number,
+    options: Required<PDFGenerationBaseOptions>,
+    pageHeight: number,
+    currentPage: number
+  ) {
+    const currentYPosition = contentHeight % availableContentHeight;
+    const remainingSpace = availableContentHeight - currentYPosition;
+
+    // Check if bottom content fits in remaining space
+    if (remainingSpace >= images.bottomContentHeight) {
+      this.addContentToPage(
+        pdf,
+        images.bottomContentImage,
+        options.margin[1],
+        options.margin[0] + currentYPosition + 5,
+        535,
+        images.bottomContentHeight
+      );
+
+      // Check if CC content fits after bottom content
+      const remainingAfterBottom = remainingSpace - images.bottomContentHeight;
+      if (
+        images.ccContentImage &&
+        remainingAfterBottom >= images.ccContentHeight + 5
+      ) {
+        this.addContentToPage(
+          pdf,
+          images.ccContentImage,
+          options.margin[1],
+          options.margin[0] +
+            currentYPosition +
+            20 +
+            images.bottomContentHeight +
+            10,
+          535,
+          images.ccContentHeight
+        );
+      } else if (images.ccContentImage) {
+        // Add new page for CC content if it doesn't fit
+        this.addNewPage(pdf, images, options, pageHeight, currentPage, true);
+      }
+    } else {
+      // Add new page for bottom content if it doesn't fit
+      this.addNewPage(pdf, images, options, pageHeight, currentPage, false);
+    }
+  }
+
+  private addNewPage(
+    pdf: jsPDF,
+    images: {
+      sealImage: string;
+      bottomContentImage: string;
+      bottomContentHeight: number;
+      ccContentImage: string | null;
+      ccContentHeight: number;
+      headerImage: string;
+      footerImage: string;
+    },
+    options: Required<PDFGenerationBaseOptions>,
+    pageHeight: number,
+    currentPage: number,
+    ccOnly: boolean
+  ) {
+    pdf.addPage();
+    pdf.setPage(currentPage + 1);
+    const pageWidth = pdf.internal.pageSize.getWidth();
+    // Add header to new page
+    pdf.addImage(
+      images.headerImage,
+      "png",
+      30,
+      10,
+      pageWidth - (options.margin[1] + options.margin[3]),
+      options.headerHeight
+    );
+
+    // Add footer to new page
+    this.addFooterToPage(
+      pdf,
+      images.footerImage,
+      pageHeight,
+      options.margin[2],
+      options.margin[1],
+      options.footerHeight,
+      pageWidth - (options.margin[1] + options.margin[3])
+    );
+
+    // Add seal to new page
+    if (images.sealImage) {
+      pdf.addImage(
+        images.sealImage,
+        "png",
+        350,
+        pageHeight - options.footerHeight - 100,
+        127.5,
+        127.5
+      );
+    }
+
+    if (!ccOnly) {
+      // Add bottom content to new page
+      this.addContentToPage(
+        pdf,
+        images.bottomContentImage,
+        options.margin[1],
+        options.margin[0] + 10,
+        535,
+        images.bottomContentHeight
+      );
+    }
+
+    if (images.ccContentImage) {
+      // Add CC content to new page
+      this.addContentToPage(
+        pdf,
+        images.ccContentImage,
+        options.margin[1],
+        options.margin[0] + (ccOnly ? 10 : images.bottomContentHeight + 20),
+        535,
+        images.ccContentHeight
+      );
+    }
+  }
+
+  private addContentToPage(
+    pdf: jsPDF,
+    image: string,
+    x: number,
+    y: number,
+    width: number,
+    height: number
+  ) {
+    pdf.addImage(image, "PNG", x, y, width, height);
+  }
+
+  private addFooterToPage(
+    pdf: jsPDF,
+    footerImage: string,
+    pageHeight: number,
+    bottomMargin: number,
+    leftMargin: number,
+    footerHeight: number,
+    width: number
+  ) {
+    const isSpecialFooter = this.isSpecialFooterRequired();
+    const yPosition = isSpecialFooter
+      ? pageHeight - footerHeight - 10
+      : pageHeight - (bottomMargin - 10);
+
+    pdf.addImage(
+      footerImage,
+      "png",
+      leftMargin,
+      yPosition,
+      width,
+      footerHeight - 5
+    );
+  }
+  private async convertHtmlToImage(html: string): Promise<string> {
+    const element = document.createElement("div");
+
+    if (html.indexOf("<img") !== -1) {
+      element.innerHTML = html;
+    } else {
+      element.innerHTML = `<img src="${html}" />`;
+    }
+    document.body.appendChild(element);
+
+    try {
+      const { default: html2canvas } = await import("html2canvas");
+      const canvas = await html2canvas(element, { backgroundColor: null });
+      return canvas.toDataURL("image/png");
+    } finally {
+      document.body.removeChild(element);
+    }
+  }
+
+  private createContentElement(html: string): HTMLElement {
+    const element = document.createElement("div");
+    element.style.width = "715px";
+    element.innerHTML = html;
+    document.body.appendChild(element);
+    return element;
+  }
+
+  private removeImageTags(html: string): string {
+    // Implement your image tag removal logic here
+    return html.replace(/<img[^>]*>/g, "");
+  }
+
+  private pixelsToPoints(pixels: number): number {
+    return (pixels * 72) / 96;
+  }
+
+  private getPageHeight(
+    format: "A4" | "letter" | [number, number] | string,
+    orientation: "portrait" | "landscape" | string
+  ): number {
+    if (format === "A4") {
+      return orientation === "portrait" ? 841.89 : 595.28;
+    } else if (format === "letter") {
+      return orientation === "portrait" ? 792 : 612;
+    } else {
+      return orientation === "portrait" ? 841.89 : 595.28;
+    }
+  }
+
+  private isSpecialFooterRequired(): boolean {
+    return (
+      window.location.href.toLowerCase().indexOf("itdb") !== -1 ||
+      window.location.href.toLowerCase().indexOf("publicservice") !== -1
+    );
+  }
+  private async elementToImage(element: HTMLElement): Promise<string> {
+    const originalStyles = {
+      visibility: element.style.visibility,
+      position: element.style.position,
+      left: element.style.left,
+      top: element.style.top,
+      width: element.style.width,
+    };
+
+    element.style.visibility = "visible";
+    element.style.position = "absolute";
+    element.style.left = "0";
+    element.style.top = "0";
+    element.style.width = "715px";
+
+    document.body.appendChild(element); // Add here if not already added
+
+    try {
+      const { default: html2canvas } = await import("html2canvas");
+      const canvas = await html2canvas(element, {
+        backgroundColor: null,
+        scale: 2,
+        logging: false,
+      });
+      return canvas.toDataURL("image/png");
+    } finally {
+      // Restore styles (if needed again)
+      element.style.visibility = originalStyles.visibility;
+      element.style.position = originalStyles.position;
+      element.style.left = originalStyles.left;
+      element.style.top = originalStyles.top;
+      element.style.width = originalStyles.width;
+
+      // ✅ Remove from DOM
+      if (element.parentNode) {
+        document.body.removeChild(element);
+      }
+    }
+  }
+
+  extractImageTags(content: string): {
+    length: number;
+    imageSrcs: string[];
+    signImageSrc: string;
+    teeterImageSrc: string;
+  } {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(content, "text/html");
+    const images = Array.from(doc.querySelectorAll("img"));
+
+    // Extract all image sources
+    const imageSrcs = images.map((img) => img.src);
+
+    // Try to identify sign and teeter images (last two images by default)
+    let signImageSrc = "";
+    let teeterImageSrc = "";
+
+    if (images.length >= 2) {
+      // Assuming sign is second last and teeter is last image
+      signImageSrc = images[images.length - 2].src;
+      teeterImageSrc = images[images.length - 1].src;
+    } else if (images.length === 1) {
+      // If only one image exists, assume it's the sign
+      signImageSrc = images[0].src;
+    }
+
+    // Alternative: Identify by image attributes if they have specific classes/ids/alt text
+    images.forEach((img) => {
+      if (img.alt.toLowerCase().includes("sign")) {
+        signImageSrc = img.src;
+      }
+      if (img.alt.toLowerCase().includes("teeter")) {
+        teeterImageSrc = img.src;
+      }
+    });
+
+    return {
+      length: images.length,
+      imageSrcs: imageSrcs,
+      signImageSrc: signImageSrc,
+      teeterImageSrc: teeterImageSrc,
+    };
+  }
+}
+
+export default PDFGenerationService;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/pdfGenerator.tsx b/apps/edr-freight-web/backoffice/src/record-management/services/pdfGenerator.tsx
new file mode 100644
index 000000000..679a84e53
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/pdfGenerator.tsx
@@ -0,0 +1,92 @@
+// import React from 'react';
+import pdfMake from "pdfmake/build/pdfmake";
+import pdfFonts from "pdfmake/build/vfs_fonts";
+
+// Properly assign the vfs property to avoid "undefined" errors
+pdfMake.vfs = pdfFonts?.pdfMake?.vfs;
+
+const PDFGenerator = () => {
+  const handleDownload = () => {
+    const dynamicContent = "This is the conditional content for the last page.";
+
+    const documentDefinition = {
+      pageSize: "A4",
+      pageMargins: [40, 80, 40, 60], // [left, top, right, bottom]
+
+      header: (currentPage: number, pageCount: number) => ({
+        columns: [
+          { text: "Header Text", alignment: "left", margin: [20, 10] },
+          {
+            text: `Page ${currentPage} of ${pageCount}`,
+            alignment: "right",
+            margin: [20, 10],
+          },
+        ],
+      }),
+
+      footer: () => ({
+        columns: [
+          // { text: "Footer Text", alignment: "center", margin: [0, 10] },
+          {
+            image: "footerImage",
+            width: 500,
+            alignment: "center",
+            margin: [0, 5],
+          },
+        ],
+      }),
+
+      background: () => ({
+        image: "sealImage",
+        width: 100,
+        absolutePosition: { x: 250, y: 400 },
+        opacity: 0.2,
+      }),
+
+      content: [
+        { text: "Larger Content", style: "header" },
+        "This is an example of a long content page in the PDF document. ",
+        {
+          text: "Repeated Content ".repeat(950), // Simulate large content
+        },
+        {
+          text: dynamicContent,
+          style: "subheader",
+          pageBreak: "auto",
+        },
+      ],
+
+      pageBreakBefore: (
+        // currentNode: any,
+        followingNodesOnPage: any[]
+        // nodesOnNextPage: any[],
+        // previousNodesOnPage: any[]
+      ) => {
+        const lastNodeOnPage =
+          followingNodesOnPage[followingNodesOnPage.length - 1];
+        if (lastNodeOnPage && lastNodeOnPage.id === "conditionalContent") {
+          return true; // Forces a page break if not enough space
+        }
+        return false;
+      },
+
+      images: {
+        footerImage:
+          "https://fastly.picsum.photos/id/841/536/354.jpg?hmac=9OJRC9APLWDSoNYQJSkqlspSeFdCCY8rjrnH3S5O41g",
+        sealImage:
+          "https://fastly.picsum.photos/id/841/536/354.jpg?hmac=9OJRC9APLWDSoNYQJSkqlspSeFdCCY8rjrnH3S5O41g",
+      },
+
+      styles: {
+        header: { fontSize: 18, bold: true, margin: [0, 20, 0, 10] },
+        subheader: { fontSize: 15, margin: [0, 15, 0, 5] },
+      },
+    };
+
+    (pdfMake as any).createPdf(documentDefinition).download("example.pdf");
+  };
+
+  return <button onClick={handleDownload}>Download PDF</button>;
+};
+
+export default PDFGenerator;
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/pdfmake.d.ts b/apps/edr-freight-web/backoffice/src/record-management/services/pdfmake.d.ts
new file mode 100644
index 000000000..356ba4f5c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/pdfmake.d.ts
@@ -0,0 +1,10 @@
+// File: src/types/pdfmake.d.ts
+declare module "pdfmake/build/pdfmake" {
+  const pdfMake: any;
+  export default pdfMake;
+}
+
+declare module "pdfmake/build/vfs_fonts" {
+  const pdfFonts: { pdfMake: { vfs: any } };
+  export default pdfFonts;
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/test.ps1 b/apps/edr-freight-web/backoffice/src/record-management/services/test.ps1
new file mode 100644
index 000000000..56b9b2210
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/test.ps1
@@ -0,0 +1,35 @@
+# Function to recursively walk through directory and generate VFS output
+function New-VFS {
+  # Initialize output string
+  $output = "this.pdfMake=this.pdfMake||{},this.pdfMake.vfs={"
+
+  # Get all files matching the extensions in the current directory
+  # Equivalent to maxDepth: 1 in the Deno script
+  $files = Get-ChildItem -Path "." -File |
+      Where-Object { $_.Extension -match '\.(otf|ttf|ttc|png|jpg|jpeg|gif)$' }
+
+  # Process each file
+  foreach ($file in $files) {
+      # Read file content as bytes
+      $content = [System.IO.File]::ReadAllBytes($file.FullName)
+
+      # Convert to Base64
+      $base64 = [Convert]::ToBase64String($content)
+
+      # Add to output string
+      # Using forward slashes for consistency with the Deno version
+      $relativePath = $file.Name -replace '\\', '/'
+      $output += "`"$relativePath`":`"$base64`","
+  }
+
+  # Remove last comma and close the object
+  $output = $output.TrimEnd(',') + "};"
+
+  # Write to file
+  $output | Out-File -FilePath "vfs_fonts.js" -Encoding UTF8
+
+  Write-Host "vfs_fonts.js created"
+}
+
+# Execute the function
+New-VFS
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/userRole/userRoles.ts b/apps/edr-freight-web/backoffice/src/record-management/services/userRole/userRoles.ts
new file mode 100644
index 000000000..601f45c6a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/userRole/userRoles.ts
@@ -0,0 +1,8 @@
+// import { GroupRole, Role } from "@/types/groupRole";
+
+// export const GroupRoles: GroupRole[] = [
+//   { groupName: "Record Officers", role: Role.RecordOfficers },
+//   { groupName: "Record Approvers", role: Role.RecordApprovers },
+//   { groupName: "Record Managers", role: Role.RecordManagers },
+//   { groupName: "External Record Managers", role: Role.ExternalRecordManagers },
+// ];
diff --git a/apps/edr-freight-web/backoffice/src/record-management/services/vfs_fonts.js b/apps/edr-freight-web/backoffice/src/record-management/services/vfs_fonts.js
new file mode 100644
index 000000000..6226e8ba0
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/services/vfs_fonts.js
@@ -0,0 +1 @@
+this.pdfMake=this.pdfMake||{},this.pdfMake.vfs={};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/types/ListName.ts b/apps/edr-freight-web/backoffice/src/record-management/types/ListName.ts
new file mode 100644
index 000000000..7d8d8e87c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/types/ListName.ts
@@ -0,0 +1,6 @@
+export enum ListName {
+  InternalRecords = "InternalRecords",
+  InternalAssociated = "Incoming_Record_Associated_Task",
+  IncomingRecords = "IncomingRecords",
+
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/record-management/types/groupRole.ts b/apps/edr-freight-web/backoffice/src/record-management/types/groupRole.ts
new file mode 100644
index 000000000..a95fcb346
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/types/groupRole.ts
@@ -0,0 +1,12 @@
+export interface GroupRole {
+  groupName: string;
+  role: Role;
+}
+
+export enum Role {
+  User = "User",
+  RecordOfficers = "Record Officers",
+  RecordApprovers = "Record Approvers",
+  RecordManagers = "Record Managers",
+  ExternalRecordManagers = "External Record Managers",
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/types/html2pdf.d.ts b/apps/edr-freight-web/backoffice/src/record-management/types/html2pdf.d.ts
new file mode 100644
index 000000000..b2d30daf4
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/types/html2pdf.d.ts
@@ -0,0 +1,5 @@
+// src/types/html2pdf.d.ts
+declare module "html2pdf.js" {
+  const html2pdf: any;
+  export = html2pdf;
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/types/multiSelectTypes.ts b/apps/edr-freight-web/backoffice/src/record-management/types/multiSelectTypes.ts
new file mode 100644
index 000000000..5640fe451
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/types/multiSelectTypes.ts
@@ -0,0 +1,5 @@
+export interface MultiSelectTypes {
+  label: string;
+  value: string;
+  icon?: React.ComponentType<{ className?: string }>;
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/types/recordSelectTypes.ts b/apps/edr-freight-web/backoffice/src/record-management/types/recordSelectTypes.ts
new file mode 100644
index 000000000..6c8e4bad6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/types/recordSelectTypes.ts
@@ -0,0 +1,16 @@
+export enum RecordType {
+  External = "External",
+  Internal = "Internal",
+  InternalMemo = "Internal Memo",
+}
+
+export enum InitiationType {
+  Self = "self",
+  Team = "team",
+}
+
+export interface KeyValue {
+  employeePositionId?: string;
+  label: string;
+  value: string;
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/types/routes.ts b/apps/edr-freight-web/backoffice/src/record-management/types/routes.ts
new file mode 100644
index 000000000..e9d6d3fb9
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/types/routes.ts
@@ -0,0 +1,6 @@
+export interface IRouteDef {
+  element?: React.ReactElement;
+  path?: string;
+  index?: boolean;
+  children?: IRouteDef[];
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/types/translation.ts b/apps/edr-freight-web/backoffice/src/record-management/types/translation.ts
new file mode 100644
index 000000000..5c267ae1a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/types/translation.ts
@@ -0,0 +1,438 @@
+export interface LocalizationDto {
+  menu: string;
+  language: string;
+  english: string;
+  amharic: string;
+  dateFormat: string;
+  date: string;
+  filterWithStatus: string;
+  createdAt: string;
+  responsibleDepartment: string;
+  incoming: string;
+  incomingStatus: string;
+  outgoing_external: string;
+  bestRegards: string;
+  outgoing: string;
+  assignPerson: string;
+  outgoingStatus: string;
+  approvalStatus: string;
+  addRecord: string;
+  addNew: string;
+  internal: string;
+  internalMemo: string;
+  status: string;
+  id: string;
+  recordName: string;
+  recordNameError: string;
+  remarkError: string;
+  recipientOrg: string;
+  referenceNumber: string;
+  dateOfDispatch: string;
+  deleteSignature: string;
+  deleteSignatureConfirmation: string;
+  deleteTeeterConfirmation: string;
+  changeSignature: string;
+  changeTeeter: string;
+  deleteTeeter: string;
+  deliveryPersonnel: string;
+  receivingPersonnel: string;
+  subject: string;
+  actions: string;
+  uploadRecord: string;
+  uploadIncomingRecord: string;
+  cancel: string;
+  submit: string;
+  editRecord: string;
+  editIncomingRecord: string;
+  edit: string;
+  viewRecord: string;
+  View: string;
+  viewIncomingRecord: string;
+  remarks: string;
+  attachSeal: string;
+  detail: string;
+  addRemark: string;
+  title: string;
+  listRemarks: string;
+  page: string;
+  prev: string;
+  next: string;
+  print: string;
+  search: string;
+  editRequest: string;
+  viewRequest: string;
+  incomingRecordDate: string;
+  senderOrg: string;
+  location: string;
+  fillRecordInfo: string;
+  file: string;
+  files: string;
+  alert_message_display: string;
+  signature: string;
+  emptySignature: string;
+  fileRequestInformation: string;
+  uploadSuccess: string;
+  updateSuccess: string;
+  recordCreatedSuccessfully: string;
+  recordWithRefCreatedSuccessfully: (assignedReferenceNumber: string) => string;
+  passed: string;
+  assignedSuccessfully: string;
+  assign: string;
+  assignedTo: string;
+  buildingCreatedSuccessfully: string;
+  buildingEditedSuccessfully: string;
+  roomCreatedSuccessfully: string;
+  roomEditedSuccessfully: string;
+  shelfCreatedSuccessfully: string;
+  shelfEditedSuccessfully: string;
+  boxFileCreatedSuccessfully: string;
+  boxFileEditedSuccessfully: string;
+  fileCreatedSuccessfully: string;
+  fileEditedSuccessfully: string;
+  deleteSuccess: string;
+  inputsError: string;
+  remarkAddSuccess: string;
+  haveAccessToFile: string;
+  stnWentWrong: string;
+  inputFileName: string;
+  refNumberError: string;
+  subjectError: string;
+  contentError: string;
+  sendingOrgNameError: string;
+  incomingDateError: string;
+  incomingDateValidationError: string;
+  recipientOrgNameError: string;
+  dispatchDateError: string;
+  fileError: string;
+  noRemarks: string;
+  attachments: string;
+  add: string;
+  update: string;
+  attach: string;
+  delete: string;
+  deleteRecord: string;
+  deleteRecordConfirmationQuestion: (recordName: string) => string;
+  remark: string;
+  letterNumber: string;
+  goToRecord: string;
+  noAttachementsFound: string;
+  convert: string;
+  convertConfirm: string;
+  download: string;
+  sentSuccessfully: string;
+  seal: string;
+  sealError: string;
+  department: string;
+  ccOrganization: string;
+  ccDepartment: string;
+  recipientDepartment: string;
+  open: string;
+  selectFileLocation: string;
+  fileLocation: string;
+  select: string;
+  filterRecords: string;
+  send: string;
+  upload: string;
+  link: string;
+  linkCopiedToClipboard: string;
+  copy: string;
+  copied: string;
+  flows: string;
+  external: string;
+  attachements: string;
+  recordDetails: string;
+  sendingDepartment: string;
+  accept: string;
+  cc: string;
+  sentDate: string;
+  assignedBy: string;
+  createdBy: string;
+  created: string;
+  teeter: string;
+  emptyTeeter: string;
+  accepted: string;
+  acceptedStatus: string;
+  reassigned: string;
+  numberOfFiles: string;
+  totalOutgoing: string;
+  totalInternal: string;
+  totalApproval: string;
+  totalIncomingVsOutgoingExternal: string;
+  totalInternalVsApproval: string;
+  totalExternalIncoming: string;
+  totalOutgoingRecords: string;
+  monthlyOutgoingRecords: string;
+  totalIncomingRecords: string;
+  monthlyIncomingRecords: string;
+  totalIncomingVsOutgoing: string;
+  monthlyIncomingVsOutgoing: string;
+  weeklyIncomingVsOutgoing: string;
+  dailyIncomingVsOutgoing: string;
+  externalIncoming: string;
+  internalIncoming: string;
+  totalCC: string;
+  approval: string;
+  contentConvertedSuccessfully: string;
+  acceptedTheRecord: string;
+  returnedTheRecord: string;
+  approvedTheRecord: string;
+  rejectedTheRecord: string;
+  fileDetails: string;
+  recDashboard: string;
+  userDashboard: string;
+  dashboard: string;
+  folders: string;
+  userOutgoing: string;
+  userOutgoingTab: string;
+  userIncoming: string;
+  all: string;
+  delegate: string;
+  delegation: string;
+  recordFile: string;
+  recordFileError: string;
+  updateDelegate: string;
+  removeDelegate: string;
+  delegator: string;
+  delegatedTo: string;
+  startDate: string;
+  reason: string;
+  startDateError: string;
+  endDate: string;
+  endDateError: string;
+  selectLocation: string;
+  buildingName: string;
+  buildingCode: string;
+  addBuilding: string;
+  Cancel: string;
+  selectBuilding: string;
+  roomName: string;
+  roomCode: string;
+  addRoom: string;
+  selectRoom: string;
+  room: string;
+  CustomerInformation: string;
+  shelfName: string;
+  shelfCode: string;
+  addShelf: string;
+  Approver: string;
+  ApprovalStatus: string;
+  selectShelf: string;
+  boxFileName: string;
+  boxFileCode: string;
+  addBoxFile: string;
+  selectBoxFile: string;
+  BoxFile: string;
+  fileName: string;
+  fileCode: string;
+  addFile: string;
+  Building_Code: string;
+  Building_Name: string;
+  EditBuilding: string;
+  EditRoom: string;
+  EditShelf: string;
+  EditBoxFile: string;
+  EditFile: string;
+  File: string;
+  AddLocation: string;
+  ViewLocation: string;
+  buildings: string;
+  rooms: string;
+  shelfs: string;
+  boxFiles: string;
+  deleteBuildingConfirmationQuestion: (buildingName: string) => string;
+  deleteRoomConfirmationQuestion: (roomName: string) => string;
+  deleteShelfConfirmationQuestion: (shelfName: string) => string;
+  deleteBoxFileConfirmationQuestion: (boxFileName: string) => string;
+  deleteFileConfirmationQuestion: (fileName: string) => string;
+  AddFileRequest: string;
+  ViewFileRequest: string;
+  ViewAllRequests: string;
+  successful: string;
+  errorMessage: string;
+  error: string;
+  borrow: string;
+  return: string;
+  BorrowedDate: string;
+  Borrowed: string;
+  Status: string;
+  RequestStatus: string;
+  ApproveOrRejectTheRequest: string;
+  FileStatus: string;
+  modal: string;
+  SentFileRequest: string;
+  PendingRequests: string;
+  BorrowFile: string;
+  Filecode: string;
+  CancelRequest: string;
+  BorrowerName: string;
+  BorowedDate: string;
+  RequesterName: string;
+  RequestedDate: string;
+  selectfile: string;
+  Select: string;
+  create: string;
+  selectfileerror: string;
+  filecodeerror: string;
+  borrowernameerror: string;
+  borroweddateerror: string;
+  requesternameerror: string;
+  requesteddateerror: string;
+  Reassigned: string;
+  firstName: string;
+  middleName: string;
+  LastName: string;
+  MiddleName: string;
+  Subcity: string;
+  Woreda: string;
+  Email: string;
+  PhoneNumber: string;
+  HouseNumber: string;
+  NumberOfDaysRequested: string;
+  FileRequestNumber: string;
+  FileDescription: string;
+  isHardCopy: string;
+  fileNotFound: string;
+  Returned: string;
+  FileFouned: string;
+  Reassign: string;
+  returnDate: string;
+  requestReason: string;
+  save: string;
+  approvedDate: string;
+  Approved: string;
+  returnedDate: string;
+  ReturnDays: string;
+  isfileborrowed: string;
+  ReturnStatus: string;
+  ReturnFile: string;
+  Reject: string;
+  Approve: string;
+  approvalInformation: string;
+  Selectafile: string;
+  ApproveRequest: string;
+  close: string;
+  fileMovementSlip: string;
+  sureapprove: string;
+  surereject: string;
+  surecancel: string;
+  RejectRequest: string;
+  buildingNameError: string;
+  buildingCodeError: string;
+  roomNameError: string;
+  roomCodeError: string;
+  shelfNameError: string;
+  shelfCodeError: string;
+  selectedFile: string;
+  selectedRoomError: string;
+  selectedBoxFileError: string;
+  selectedShelfError: string;
+  boxFileNameError: string;
+  boxFileCodeError: string;
+  fileNameError: string;
+  fileCodeError: string;
+  roomOrShelfError: string;
+  RoomAddedSuccessful: string;
+  BoxFileAddedSuccessful: string;
+  ShelfAddedSuccessful: string;
+  FileAddedSuccessful: string;
+  BuildingAddedSuccessful: string;
+  openSelectMenu: string;
+  BoxFileFileValidationError: string;
+  locations: string;
+  noData: string;
+  building: string;
+  Shelf: string;
+  OK: string;
+  Changefile: string;
+  numberOfDays: string;
+  Yes: string;
+  No: string;
+  deleteError: string;
+  deleteMessage: string;
+  areuSure: string;
+  approved: string;
+  Rejected: string;
+  pending: string;
+  inProgress: string;
+  rejectedStatus: string;
+  rejected: string;
+  canceled: string;
+  Accepted: string;
+  adjustment: string;
+  createRecord: string;
+  fileInformation: string;
+  onBehalfOf: string;
+  fileDescription: string;
+  fileDescriptionError: string;
+  hardOrSoftCopyQuestion: string;
+  isRequestHardCopyRequest: string;
+  hardOrSoftCopyQuestionError: string;
+  hardCopy: string;
+  softCopy: string;
+  fileBorrowedWithReturnDate: (day: number) => string;
+  requestNumberConfirmationMessage: (fileRequestIdentifier: string) => string;
+  approverError: string;
+  selectFileRequestOptions: string;
+  selectFileReturnStatusError: string;
+  searchFile: string;
+  recordType: string;
+  letterTemplate: string;
+  content: string;
+  receivingOrg: string;
+  nonSmoreceivingOrg: string;
+  nonSmoreceivingCCOrg: string;
+  receivingOrgError: string;
+  receivingDept: string;
+  receivingUser: string;
+  receivingDeptError: string;
+  receivingDeptOrUserError: string;
+  to: string;
+  from: string;
+  ccTo: string;
+  internalCcTo: string;
+  externalCcTo: string;
+  externalCc: string;
+  recordCreatedSuccessful: string;
+  recordDraftedSuccessful: string;
+  recordForwardedSuccessful: string;
+  recordCouldnotBeForwarded: string;
+  okText: string;
+  sent: string;
+  view: string;
+  draft: string;
+  forwarded: string;
+  returnConfirm: string;
+  forwardConfirm: string;
+  assignConfirm: string;
+  deleteConfirm: string;
+  header: string;
+  footer: string;
+  personal_remark: string;
+  reassign_remark: string;
+  general_remark: string;
+  forward_to: string;
+  forward_toError: string;
+  AttachementCreatedSuccessful: string;
+  skip: string;
+  approve: string;
+  deleteAttachementConfirmation: (attachementTitle: string) => string;
+  fileAttachedSuccessful: string;
+  recordApproved: string;
+  Adjust: string;
+  adjusted: string;
+  adjust: string;
+  other: string;
+  returnRemark: string;
+  skipUploadingAttachementQuestion: string;
+  Receive: string;
+  Confirm: string;
+  letterTemplateMissingError: string;
+  assignWithDepartment: string;
+  assignWithName: string;
+  refrenceUrl: string;
+  commonRemarks: string;
+  prefix: string;
+  suffix: string;
+  prefixCC: string;
+  suffixCC: string;
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/utils/cookies.ts b/apps/edr-freight-web/backoffice/src/record-management/utils/cookies.ts
new file mode 100644
index 000000000..368e3230e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/utils/cookies.ts
@@ -0,0 +1,26 @@
+/**
+ * Utility functions for working with cookies
+ */
+
+export function getCookie(name: string): string | null {
+  if (typeof window === 'undefined') {
+    // Handle server-side rendering case
+    return null;
+  }
+
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${name}=`);
+  if (parts.length === 2) return parts.pop()?.split(';').shift() || null;
+  return null;
+}
+
+export function setCookie(name: string, value: string, days = 1) {
+  const date = new Date();
+  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+  const expires = `expires=${date.toUTCString()}`;
+  document.cookie = `${name}=${value};${expires};path=/;SameSite=Lax${window.location.protocol === 'https:' ? ';Secure' : ''}`;
+}
+
+export function deleteCookie(name: string) {
+  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/record-management/utils/printService.ts b/apps/edr-freight-web/backoffice/src/record-management/utils/printService.ts
new file mode 100644
index 000000000..e1d79a769
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/utils/printService.ts
@@ -0,0 +1,223 @@
+/**
+ * Print Service for Records and Attachments
+ * Handles printing of record documents and their attachments with user options
+ * Merges PDFs into a single document before printing using pdf-lib
+ * Converts DOC/EXCEL files to PDF before merging
+ */
+
+import { PDFDocument } from 'pdf-lib';
+
+export interface PrintOptions {
+  includeRecord: boolean;
+  includeAttachments: boolean;
+  attachmentIndices?: number[];
+}
+
+export interface AttachmentFile {
+  id: string;
+  name: string;
+  url: string;
+  fileType: string;
+  size: number;
+}
+
+/**
+ * Checks if file type needs conversion to PDF
+ */
+const needsConversion = (fileType: string): boolean => {
+  const convertibleTypes = [
+    'application/msword', // .doc
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document', // .docx
+    'application/vnd.ms-excel', // .xls
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', // .xlsx
+    'application/vnd.ms-powerpoint', // .ppt
+    'application/vnd.openxmlformats-officedocument.presentationml.presentation', // .pptx
+  ];
+  return convertibleTypes.some(type => fileType.includes(type) || fileType.includes(type.split('/')[1]));
+};
+
+/**
+ * Converts DOC/EXCEL/PPT files to PDF using backend API
+ */
+const convertToPdf = async (blob: Blob, fileName: string): Promise<Blob> => {
+ 
+  
+  try {
+    const formData = new FormData();
+    formData.append('file', blob, fileName);
+
+    const response = await fetch('/api/convert-to-pdf', {
+      method: 'POST',
+      body: formData,
+    });
+
+    if (!response.ok) {
+      throw new Error(`Conversion failed with status: ${response.status}`);
+    }
+
+    const pdfBlob = await response.blob();
+    return pdfBlob;
+  } catch (error) {
+    console.error("[PrintService] Error converting file to PDF:", fileName, error);
+    // If conversion fails, return original blob and let merge handle it
+    return blob;
+  }
+};
+
+/**
+ * Fetches a file from URL and returns as blob
+ */
+const fetchFileAsBlob = async (url: string, fileName: string): Promise<Blob> => {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  const blob = await response.blob();
+  return blob;
+};
+
+/**
+ * Converts blob to ArrayBuffer
+ */
+const blobToArrayBuffer = (blob: Blob): Promise<ArrayBuffer> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result as ArrayBuffer);
+    reader.onerror = reject;
+    reader.readAsArrayBuffer(blob);
+  });
+};
+
+/**
+ * Merges multiple PDF blobs into a single PDF
+ */
+const mergePdfBlobs = async (
+  pdfBlobs: { blob: Blob; name: string }[]
+): Promise<Blob> => {
+  try {
+    const mergedPdf = await PDFDocument.create();
+
+    for (const { blob, name } of pdfBlobs) {
+      try {
+        const arrayBuffer = await blobToArrayBuffer(blob);
+        const pdf = await PDFDocument.load(arrayBuffer);
+        const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
+        copiedPages.forEach((page: any) => mergedPdf.addPage(page));
+      } catch (error) {
+        console.error("[PrintService] Error adding PDF:", name, error);
+      }
+    }
+
+    const mergedPdfBytes = await mergedPdf.save();
+    const mergedBlob = new Blob([new Uint8Array(mergedPdfBytes)], { type: 'application/pdf' });
+    
+    return mergedBlob;
+  } catch (error) {
+    console.error("[PrintService] Error merging PDFs:", error);
+    throw new Error("Failed to merge PDFs");
+  }
+};
+
+/**
+ * Opens a file blob in a print window
+ */
+const openPrintWindow = async (blob: Blob, fileName: string): Promise<void> => {
+  try {
+    const blobUrl = URL.createObjectURL(blob);
+    
+    const printWindow = window.open(blobUrl, "_blank");
+    
+    if (printWindow) {
+      printWindow.addEventListener("load", () => {
+        setTimeout(() => {
+          printWindow.print();
+        }, 500);
+      });
+      
+      // Fallback: if load event doesn't fire, print anyway after delay
+      setTimeout(() => {
+        if (printWindow && !printWindow.closed) {
+          printWindow.print();
+        }
+      }, 2000);
+    } else {
+      console.warn("[PrintService] Failed to open print window for:", fileName);
+    }
+  } catch (error) {
+    console.error("[PrintService] Error opening print window for:", fileName, error);
+    throw error;
+  }
+};
+
+/**
+ * Generates a combined print job for record and attachments
+ * Converts DOC/EXCEL files to PDF, then merges all PDFs into a single document before printing
+ */
+export const printRecordWithAttachments = async (
+  pdfUrl: string,
+  attachments: AttachmentFile[],
+  options: PrintOptions
+) => {
+  try {
+    const pdfBlobs: { blob: Blob; name: string }[] = [];
+
+    // Fetch record PDF if selected
+    if (options.includeRecord && pdfUrl) {
+      try {
+        const recordBlob = await fetchFileAsBlob(pdfUrl, "Record Document");
+        pdfBlobs.push({
+          blob: recordBlob,
+          name: "Record Document"
+        });
+      } catch (error) {
+        console.error("[PrintService] Error fetching record PDF:", error);
+      }
+    }
+
+    // Fetch selected attachments and convert if needed
+    if (options.includeAttachments && attachments.length > 0) {
+      const selectedAttachments = options.attachmentIndices
+        ? attachments.filter((_, idx) => options.attachmentIndices?.includes(idx))
+        : attachments;
+
+      for (const attachment of selectedAttachments) {
+        try {
+          let attachmentBlob = await fetchFileAsBlob(attachment.url, attachment.name);
+          
+          // Convert to PDF if needed
+          if (needsConversion(attachment.fileType)) {
+            attachmentBlob = await convertToPdf(attachmentBlob, attachment.name);
+          }
+          
+          pdfBlobs.push({
+            blob: attachmentBlob,
+            name: attachment.name
+          });
+        } catch (error) {
+          console.error("[PrintService] Error processing attachment:", attachment.name, error);
+        }
+      }
+    }
+
+    if (pdfBlobs.length === 0) {
+      throw new Error("No PDFs to print");
+    }
+
+    // Merge all PDFs
+    const mergedBlob = await mergePdfBlobs(pdfBlobs);
+    
+    // Open merged PDF in print window
+    await openPrintWindow(mergedBlob, "Merged Document");
+  } catch (error) {
+    console.error("[PrintService] Error in print operation:", error);
+    throw error;
+  }
+};
+
+/**
+ * Validates print options
+ */
+export const validatePrintOptions = (options: PrintOptions): boolean => {
+  const isValid = options.includeRecord || options.includeAttachments;
+  return isValid;
+};
diff --git a/apps/edr-freight-web/backoffice/src/record-management/utils/renderDetails.tsx b/apps/edr-freight-web/backoffice/src/record-management/utils/renderDetails.tsx
new file mode 100644
index 000000000..76a35696e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/utils/renderDetails.tsx
@@ -0,0 +1,148 @@
+import { Badge } from "@/shared/common/ui/badge";
+import { t } from "i18next";
+//badge and the status mapped
+export function renderStatus(param: string, type: string, onReview?: boolean) {
+  switch (type) {
+    case "Pending":
+      return <Badge variant="secondary">{t("statusBar.Pending")}</Badge>;
+    case "Draft":
+      return <Badge variant="secondary">{t("statusBar.Draft")}</Badge>;
+    case "not_assigned":
+      return <Badge variant="secondary">{t("statusBar.not_assigned")}</Badge>;
+    case "Team Signature":
+      return (
+        <Badge
+          variant="secondary"
+          style={{
+            background: "#CC66DA",
+            color: "white",
+          }}
+        >
+          {t("statusBar.Team Signature")}
+        </Badge>
+      );
+    case "draft":
+      return <Badge variant="secondary">{t("statusBar.InProgress")}</Badge>;
+    case "In Progress":
+      if (onReview) {
+        return (
+          <Badge
+            variant="secondary"
+            style={{ backgroundColor: "#FFD700", color: "yellow" }}
+          >
+            {t("statusBar.Under Review")}
+          </Badge>
+        );
+      }
+      return <Badge variant="purple">{t("statusBar.InProgress")}</Badge>;
+    case "active":
+      if (onReview) {
+        return <Badge variant="purple">{t("statusBar.Under Review")}</Badge>;
+      }
+      return <Badge variant="purple">{t("statusBar.InProgress")}</Badge>;
+    case "Reassigned":
+      return <Badge variant="danger2">{t("statusBar.Reassigned")}</Badge>;
+    case "Re Assigned":
+      return <Badge variant="danger2">{t("statusBar.Reassigned")}</Badge>;
+    case "signed":
+      return <Badge variant="success">{t("statusBar.signed")}</Badge>;
+    case "re_assigned":
+      return <Badge variant="danger2">{t("statusBar.Reassigned")}</Badge>;
+    case "Approved":
+      return <Badge variant="success">{t("statusBar.Approved")}</Badge>;
+    case "assigned":
+      return <Badge variant="success">{t("statusBar.assigned")}</Badge>;
+    case "send_to_ro":
+      return <Badge variant="success">{t("statusBar.Approved")}</Badge>;
+    case "approve":
+      return <Badge variant="success">{t("statusBar.Accepted")}</Badge>;
+    case "approved":
+      return <Badge variant="success">{t("statusBar.Accepted")}</Badge>;
+    case "forwarded":
+      return (
+        <Badge variant="forward">{t("statusBar.Forwarded", "Forwarded")}</Badge>
+      );
+    case "Forwarded":
+      return (
+        <Badge variant="forward">{t("statusBar.Forwarded", "Forwarded")}</Badge>
+      );
+    case "Accepted":
+      return <Badge variant="success">{t("statusBar.Accepted")}</Badge>;
+    case "accepted":
+      return <Badge variant="success">{t("statusBar.Accepted")}</Badge>;
+    case "accept":
+      return <Badge variant="success">{t("statusBar.Accepted")}</Badge>;
+    case "yes":
+      return <Badge variant="success">{t("statusBar.yes")}</Badge>;
+    case "replied":
+      return <Badge variant="success">{t("statusBar.replied")}</Badge>;
+    case "Replied":
+      return <Badge variant="success">{t("statusBar.replied")}</Badge>;
+    case "Dispatched":
+      return <Badge variant="success">{t("statusBar.Sent")}</Badge>;
+    case "dispatched":
+      return <Badge variant="success">{t("statusBar.Sent")}</Badge>;
+    case "Adjustment":
+      return <Badge variant="danger2">{t("statusBar.Adjustment")}</Badge>;
+    case "Skipped":
+      return <Badge variant="danger2">{t("statusBar.Skipped")}</Badge>;
+    case "skipped":
+      return <Badge variant="danger2">{t("statusBar.Skipped")}</Badge>;
+    case "onReview":
+      return <Badge variant="danger2">{t("statusBar.Under Review")}</Badge>;
+    case "send_back":
+      return <Badge variant="danger2">{t("statusBar.Returned")}</Badge>;
+    case "sent_back":
+      return <Badge variant="danger2">{t("statusBar.Returned")}</Badge>;
+    case "returned":
+      return <Badge variant="danger2">{t("statusBar.Returned")}</Badge>;
+    case "adjustment":
+      return <Badge variant="danger2">{t("statusBar.Adjustment")}</Badge>;
+    case "adjustment_requested":
+      return (
+        <Badge variant="danger2">
+          {t("statusBar.adjustment_requested", "Adjustment Requested")}
+        </Badge>
+      );
+    case "send_back_by_ro":
+      return <Badge variant="danger2">{t("statusBar.send_back_by_ro")}</Badge>;
+    case "Rejected":
+      return <Badge variant="danger">{t("statusBar.Rejected")}</Badge>;
+    case "expired":
+      return <Badge variant="danger">{t("statusBar.Expired")}</Badge>;
+    case "Team Rejected":
+      return <Badge variant="danger">{t("statusBar.Team Adjusted")}</Badge>;
+    case "reject":
+      return <Badge variant="danger">{t("statusBar.Rejected")}</Badge>;
+    case "terminated":
+      return <Badge variant="danger">{t("statusBar.terminated")}</Badge>;
+    case "no":
+      return <Badge variant="danger">{t("statusBar.no")}</Badge>;
+    case "rejected":
+      return <Badge variant="danger">{t("statusBar.Rejected")}</Badge>;
+    case "team_rejected":
+      return (
+        <Badge variant="danger2">
+          {t("statusBar.teamRejected", "Team Rejected")}
+        </Badge>
+      );
+    case "commented":
+      return (
+        <Badge variant="secondary">
+          {t("statusBar.commented", "Commented")}
+        </Badge>
+      );
+    case "Submitted":
+      return <Badge variant="purple">{t("statusBar.Submitted")}</Badge>;
+    case "activated":
+      return <Badge variant="success">{t("statusBar.activated")}</Badge>;
+    case "deactivated":
+      return <Badge variant="danger">{t("statusBar.deactivated")}</Badge>;
+    case "ended":
+      return <Badge variant="secondary">{t("statusBar.ended")}</Badge>;
+    case "level_skipped":
+      return <Badge variant="purple">{t("statusBar.Skipped")}</Badge>;
+    default:
+      return <Badge variant="secondary">{t(`statusBar.${param}`)}</Badge>;
+  }
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/utils/stampMessages.ts b/apps/edr-freight-web/backoffice/src/record-management/utils/stampMessages.ts
new file mode 100644
index 000000000..7b993a896
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/utils/stampMessages.ts
@@ -0,0 +1,19 @@
+import type { TFunction } from "i18next";
+
+export function resolveStampLocale(
+  preferredLanguage?: string | null,
+): "am" | "en" {
+  const normalized = (preferredLanguage ?? "").toLowerCase();
+  if (normalized === "am" || normalized.startsWith("am")) return "am";
+  if (normalized === "en" || normalized.startsWith("en")) return "en";
+  return "en";
+}
+
+export function getNoStampsForLanguageMessage(
+  locale: "am" | "en",
+  t: TFunction,
+): string {
+  const language =
+    locale === "am" ? t("header.amharic") : t("header.english");
+  return t("ApprovalPage.noStampsForLanguage", { language });
+}
diff --git a/apps/edr-freight-web/backoffice/src/record-management/utils/utils.ts b/apps/edr-freight-web/backoffice/src/record-management/utils/utils.ts
new file mode 100644
index 000000000..8dc6a8e0e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/record-management/utils/utils.ts
@@ -0,0 +1,17 @@
+export function splitStringByUnderscore(str: string) {
+  return str.split("_").join(" ");
+}
+
+// Enhanced fetch with logging
+export async function fetchWithFallback<T>(
+  promise: Promise<T>,
+  fallback: T
+): Promise<T> {
+  try {
+    const result = await promise;
+    return result;
+  } catch (error) {
+    // Add your error reporting here (Sentry, App Insights, etc.)
+    return fallback;
+  }
+}
diff --git a/apps/edr-freight-web/backoffice/src/routes/RootRedirect.tsx b/apps/edr-freight-web/backoffice/src/routes/RootRedirect.tsx
new file mode 100644
index 000000000..77ad29531
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/routes/RootRedirect.tsx
@@ -0,0 +1,20 @@
+import type { ReactElement } from "react";
+import { Navigate } from "react-router-dom";
+
+import { useAuth } from "@/auth/useAuth";
+
+/**
+ * Root landing redirect for the vendored IAM pages. Sends super admins to the
+ * user-management dashboard and everyone else to the freight overview. Minimal
+ * replacement for the source app's @/routes/RootRedirect (not copied over).
+ */
+export function RootRedirect(): ReactElement {
+  const { user } = useAuth();
+  const roles = (user?.roles ?? []).map((r) => r.key).filter(Boolean);
+  if (roles.includes("super_admin")) {
+    return <Navigate to="/user-management/dashboard" replace />;
+  }
+  return <Navigate to="/dashboard/overview" replace />;
+}
+
+export default RootRedirect;
diff --git a/apps/edr-freight-web/backoffice/src/services/ai.service.ts b/apps/edr-freight-web/backoffice/src/services/ai.service.ts
new file mode 100644
index 000000000..6a3cbf778
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/services/ai.service.ts
@@ -0,0 +1,48 @@
+import { api as client } from "../auth/http";
+
+export interface AiExtractedBooking {
+  customerName: string | null;
+  origin: string | null;
+  destination: string | null;
+  cargoType: string | null;
+  containerType: "20FT" | "40FT" | "BULK" | "RO_RO" | null;
+  quantity: number | null;
+  direction: "IMPORT" | "EXPORT" | null;
+  weightKg: number | null;
+  pickupRequired: boolean | null;
+  deliveryRequired: boolean | null;
+}
+
+export interface AiValidationResult {
+  valid: boolean;
+  errors: string[];
+}
+
+export interface AiRecommendation {
+  action: "CREATE_DRAFT_BOOKING" | "REQUEST_MISSING_INFORMATION";
+  message: string;
+  confidence: number;
+}
+
+export interface AiBookingExtractResult {
+  provider: "mock";
+  extracted: AiExtractedBooking;
+  validation: AiValidationResult;
+  recommendation: AiRecommendation;
+}
+
+interface AiBookingExtractResponse {
+  success: boolean;
+  data: AiBookingExtractResult;
+  timestamp: string;
+}
+
+export const extractBookingFromText = async (
+  text: string,
+): Promise<AiBookingExtractResult> => {
+  const response = await client.post<AiBookingExtractResponse>(
+    "/ai/booking/extract",
+    { text },
+  );
+  return response.data.data;
+};
diff --git a/apps/edr-freight-web/backoffice/src/services/api.ts b/apps/edr-freight-web/backoffice/src/services/api.ts
index 6126022b8..dd157ed02 100644
--- a/apps/edr-freight-web/backoffice/src/services/api.ts
+++ b/apps/edr-freight-web/backoffice/src/services/api.ts
@@ -44,7 +44,8 @@ import {
 } from "@/types/rule-engine";
 import type {
   AssignBookingsPayload,
-  BatchBoardSchedule,
+  BatchBoardFilters,
+  BatchBoardListResponse,
   BatchBoardScheduleDetail,
   BookableSchedule,
   BookingWindow,
@@ -100,7 +101,6 @@ import type {
   InitiateWarehouseInvoicePaymentPayload,
   LoadableWagon,
   LoadInventoryPayload,
-  LoadPassedExportResult,
   MoveInventoryPayload,
   StoreInventoryPayload,
   PayInvoicePayload,
@@ -223,11 +223,14 @@ export const api = {
       () => QUERY_KEYS.TRAIN_SCHEDULING.schedules(),
     ),
 
-    batchBoard: endpoint<void, BatchBoardSchedule[]>(
+    batchBoard: endpoint<
+      { filters?: BatchBoardFilters },
+      BatchBoardListResponse
+    >(
       "train-scheduling",
       "batch-board",
-      () => trainSchedulingService.getBatchBoard(),
-      () => QUERY_KEYS.TRAIN_SCHEDULING.batchBoard(),
+      ({ filters }) => trainSchedulingService.getBatchBoard(filters),
+      ({ filters }) => QUERY_KEYS.TRAIN_SCHEDULING.batchBoard(filters),
     ),
 
     allBookingWindows: endpoint<void, StaffBookingWindow[]>(
@@ -1154,14 +1157,6 @@ export const api = {
       () => INVENTORY_INVALIDATIONS,
     ),
 
-    loadPassedExport: endpoint<void, LoadPassedExportResult>(
-      "warehouse-inventory",
-      "load-passed-export",
-      () => warehouseService.loadPassedExport().then((r) => r.data),
-      undefined,
-      () => INVENTORY_INVALIDATIONS,
-    ),
-
     bulkMarkInspected: endpoint<BulkInspectPayload, BulkInspectResult>(
       "warehouse-inventory",
       "bulk-mark-inspected",
@@ -1596,6 +1591,30 @@ export const api = {
       undefined,
       () => [["wagons"]],
     ),
+
+    bulkTransfer: endpoint<
+      { wagonIds: string[]; toYardId: string },
+      { moved: number }
+    >(
+      "wagons",
+      "bulkTransfer",
+      ({ wagonIds, toYardId }) =>
+        wagonService.bulkTransfer(wagonIds, toYardId).then((r) => r.data),
+      undefined,
+      () => [["wagons"]],
+    ),
+
+    bulkSetStatus: endpoint<
+      { wagonIds: string[]; status: Wagon["status"] },
+      { updated: number }
+    >(
+      "wagons",
+      "bulkSetStatus",
+      ({ wagonIds, status }) =>
+        wagonService.bulkSetStatus(wagonIds, status).then((r) => r.data),
+      undefined,
+      () => [["wagons"]],
+    ),
   },
 
   trains: {
diff --git a/apps/edr-freight-web/backoffice/src/services/bookings.service.ts b/apps/edr-freight-web/backoffice/src/services/bookings.service.ts
index 6a4c0cb1c..b97ac2bc3 100644
--- a/apps/edr-freight-web/backoffice/src/services/bookings.service.ts
+++ b/apps/edr-freight-web/backoffice/src/services/bookings.service.ts
@@ -21,6 +21,19 @@ export interface BookingListFilter {
   bookingType?: string;
   tradeDirection?: string;
   paymentCurrency?: string;
+  paymentStatus?: string;
+  /** ISO date-time — bookings created on/after. */
+  createdFrom?: string;
+  /** ISO date-time — bookings created on/before (pass end-of-day for inclusive). */
+  createdTo?: string;
+  /** ISO date-time — bookings scheduled on/after. */
+  scheduledFrom?: string;
+  /** ISO date-time — bookings scheduled on/before (pass end-of-day for inclusive). */
+  scheduledTo?: string;
+  originYardId?: string;
+  destinationYardId?: string;
+  /** "true" = government bookings only, "false" = private only. */
+  isGovernment?: "true" | "false";
   page?: number;
   pageSize?: number;
   sortBy?: string;
@@ -130,6 +143,14 @@ export const bookingsService = {
       if (filter.bookingType) params.bookingType = filter.bookingType;
       if (filter.tradeDirection) params.tradeDirection = filter.tradeDirection;
       if (filter.paymentCurrency) params.paymentCurrency = filter.paymentCurrency;
+      if (filter.paymentStatus) params.paymentStatus = filter.paymentStatus;
+      if (filter.createdFrom) params.createdFrom = filter.createdFrom;
+      if (filter.createdTo) params.createdTo = filter.createdTo;
+      if (filter.scheduledFrom) params.scheduledFrom = filter.scheduledFrom;
+      if (filter.scheduledTo) params.scheduledTo = filter.scheduledTo;
+      if (filter.originYardId) params.originYardId = filter.originYardId;
+      if (filter.destinationYardId) params.destinationYardId = filter.destinationYardId;
+      if (filter.isGovernment) params.isGovernment = filter.isGovernment;
     }
     const response = await client.get<BookingListSummary>(B.LIST_SUMMARY, {
       params,
@@ -154,6 +175,14 @@ export const bookingsService = {
       if (filter.bookingType) params.bookingType = filter.bookingType;
       if (filter.tradeDirection) params.tradeDirection = filter.tradeDirection;
       if (filter.paymentCurrency) params.paymentCurrency = filter.paymentCurrency;
+      if (filter.paymentStatus) params.paymentStatus = filter.paymentStatus;
+      if (filter.createdFrom) params.createdFrom = filter.createdFrom;
+      if (filter.createdTo) params.createdTo = filter.createdTo;
+      if (filter.scheduledFrom) params.scheduledFrom = filter.scheduledFrom;
+      if (filter.scheduledTo) params.scheduledTo = filter.scheduledTo;
+      if (filter.originYardId) params.originYardId = filter.originYardId;
+      if (filter.destinationYardId) params.destinationYardId = filter.destinationYardId;
+      if (filter.isGovernment) params.isGovernment = filter.isGovernment;
     }
     const response = await client.get<PaginatedBookings>(B.BASE, {
       params,
diff --git a/apps/edr-freight-web/backoffice/src/services/contract-templates.service.ts b/apps/edr-freight-web/backoffice/src/services/contract-templates.service.ts
new file mode 100644
index 000000000..75202507b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/services/contract-templates.service.ts
@@ -0,0 +1,112 @@
+import { api as client } from "../auth/http";
+
+const BASE = "/contract-templates";
+
+export interface ContractTemplateArticle {
+  id: string;
+  title: string;
+  body: string;
+  order: number;
+}
+
+export interface ContractTemplate {
+  id: string;
+  code:
+    | "IMPORT_BULK"
+    | "EXPORT_BULK"
+    | "INTERCITY_BULK"
+    | "IMPORT_CONTAINER"
+    | "EXPORT_CONTAINER"
+    | "INTERCITY_CONTAINER";
+  name: string;
+  description?: string | null;
+  documentTitle: string;
+  whereasClauses: string[];
+  articles: ContractTemplateArticle[];
+  isActive: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface UpdateContractTemplatePayload {
+  name?: string;
+  description?: string;
+  documentTitle?: string;
+  whereasClauses?: string[];
+  isActive?: boolean;
+}
+
+export interface ArticlePayload {
+  title: string;
+  body: string;
+  position?: number;
+}
+
+export const contractTemplatesService = {
+  async list(): Promise<ContractTemplate[]> {
+    const { data } = await client.get<ContractTemplate[]>(BASE);
+    return data;
+  },
+
+  async getByCode(code: string): Promise<ContractTemplate> {
+    const { data } = await client.get<ContractTemplate>(`${BASE}/${code}`);
+    return data;
+  },
+
+  async update(
+    code: string,
+    payload: UpdateContractTemplatePayload,
+  ): Promise<ContractTemplate> {
+    const { data } = await client.patch<ContractTemplate>(
+      `${BASE}/${code}`,
+      payload,
+    );
+    return data;
+  },
+
+  async preview(code: string): Promise<{ html: string }> {
+    const { data } = await client.post<{ html: string }>(
+      `${BASE}/${code}/preview`,
+      {},
+    );
+    return data;
+  },
+
+  async addArticle(code: string, payload: ArticlePayload): Promise<ContractTemplate> {
+    const { data } = await client.post<ContractTemplate>(
+      `${BASE}/${code}/articles`,
+      payload,
+    );
+    return data;
+  },
+
+  async updateArticle(
+    code: string,
+    articleId: string,
+    payload: Partial<ArticlePayload>,
+  ): Promise<ContractTemplate> {
+    const { data } = await client.patch<ContractTemplate>(
+      `${BASE}/${code}/articles/${articleId}`,
+      payload,
+    );
+    return data;
+  },
+
+  async removeArticle(code: string, articleId: string): Promise<ContractTemplate> {
+    const { data } = await client.delete<ContractTemplate>(
+      `${BASE}/${code}/articles/${articleId}`,
+    );
+    return data;
+  },
+
+  async replaceArticles(
+    code: string,
+    articles: Array<{ id?: string; title: string; body: string }>,
+  ): Promise<ContractTemplate> {
+    const { data } = await client.put<ContractTemplate>(
+      `${BASE}/${code}/articles`,
+      { articles },
+    );
+    return data;
+  },
+};
diff --git a/apps/edr-freight-web/backoffice/src/services/contracts.service.ts b/apps/edr-freight-web/backoffice/src/services/contracts.service.ts
index de16d9c54..f08e4f9a0 100644
--- a/apps/edr-freight-web/backoffice/src/services/contracts.service.ts
+++ b/apps/edr-freight-web/backoffice/src/services/contracts.service.ts
@@ -502,6 +502,31 @@ export const contractsService = {
     };
   },
 
+  /**
+   * Complete a bare initiated booking instance once its per-booking clearance
+   * is CLEARANCE_READY — same payload as create; the API persists cargo,
+   * prices, invoices, checks the booking window and moves the booking to the
+   * operations queue.
+   */
+  completeBookingUnderContract: async (
+    id: string,
+    bookingId: string,
+    payload: Freight.CreateBookingUnderContractDto,
+  ): Promise<{ id: string; reference: string; warnings?: string[] }> => {
+    const result = await postContract<{
+      booking?: { id: string; reference: string };
+      id?: string;
+      reference?: string;
+      warnings?: string[];
+    }>(C.BOOKINGS_COMPLETE(id, bookingId), payload);
+    const booking = result.booking ?? result;
+    return {
+      id: booking.id ?? "",
+      reference: booking.reference ?? "",
+      warnings: result.warnings,
+    };
+  },
+
   /**
    * Pre-create validation + authoritative price preview: the same
    * BookingPricingService pass that prices the booking on create (rail +
diff --git a/apps/edr-freight-web/backoffice/src/services/customers.service.ts b/apps/edr-freight-web/backoffice/src/services/customers.service.ts
index 0476d41bb..c9a649946 100644
--- a/apps/edr-freight-web/backoffice/src/services/customers.service.ts
+++ b/apps/edr-freight-web/backoffice/src/services/customers.service.ts
@@ -33,6 +33,11 @@ function mapCompany(dto: Record<string, unknown>): Company {
     generalManagerName: (attrs.generalManagerName as string | null) ?? null,
     generalManagerEmail: (attrs.generalManagerEmail as string | null) ?? null,
     generalManagerPhone: (attrs.generalManagerPhone as string | null) ?? null,
+    poaName: (attrs.poaName as string | null) ?? null,
+    poaEmail: (attrs.poaEmail as string | null) ?? null,
+    poaPhone: (attrs.poaPhone as string | null) ?? null,
+    poaLocation: (attrs.poaLocation as string | null) ?? null,
+    poaAddress: (attrs.poaAddress as string | null) ?? null,
   };
 }
 
diff --git a/apps/edr-freight-web/backoffice/src/services/routes.service.ts b/apps/edr-freight-web/backoffice/src/services/routes.service.ts
index 9c59e31ad..2317c693d 100644
--- a/apps/edr-freight-web/backoffice/src/services/routes.service.ts
+++ b/apps/edr-freight-web/backoffice/src/services/routes.service.ts
@@ -43,8 +43,18 @@ export interface SaveRoutePayload {
  * Human-readable route label: yard names, not yard codes. Staff read
  * "Addis Ababa → Dire Dawa", not "ADDIS_ABABA → DIRE_DAWA". Falls back to the
  * code only when a yard has no label.
+ *
+ * When milestones are present they ARE the full ordered corridor (origin first,
+ * destination last), so the label shows every stop:
+ * "Addis Ababa → Adama → Dire Dawa".
  */
 export function formatRouteLabel(route: RouteRecord): string {
+  const stops = [...(route.milestones ?? [])]
+    .sort((a, b) => a.sequenceNo - b.sequenceNo)
+    .map((m) => m.yard?.label ?? m.yard?.code)
+    .filter((name): name is string => Boolean(name));
+  if (stops.length >= 2) return stops.join(' → ');
+
   const origin =
     route.originYard?.label ?? route.originYard?.code ?? 'Origin';
   const dest =
diff --git a/apps/edr-freight-web/backoffice/src/services/trainScheduling.service.ts b/apps/edr-freight-web/backoffice/src/services/trainScheduling.service.ts
index be05c6d8c..fb26b9605 100644
--- a/apps/edr-freight-web/backoffice/src/services/trainScheduling.service.ts
+++ b/apps/edr-freight-web/backoffice/src/services/trainScheduling.service.ts
@@ -3,7 +3,8 @@ import { api as client } from "../auth/http";
 import { unwrap } from "@/utils/endpoint";
 import { URL_CONSTANTS } from "@/constants/URLS";
 import type {
-  BatchBoardSchedule,
+  BatchBoardFilters,
+  BatchBoardListResponse,
   BatchBoardScheduleDetail,
   BookableSchedule,
   BookingWindow,
@@ -100,9 +101,25 @@ export const trainSchedulingService = {
     return unwrap(response.data);
   },
 
-  getBatchBoard: async (): Promise<BatchBoardSchedule[]> => {
-    const response = await client.get<BatchBoardSchedule[]>(
+  getBatchBoard: async (
+    filters: BatchBoardFilters = {},
+  ): Promise<BatchBoardListResponse> => {
+    const params: Record<string, string | number> = {};
+    if (filters.page) params.page = filters.page;
+    if (filters.pageSize) params.pageSize = filters.pageSize;
+    if (filters.statuses?.length) params.statuses = filters.statuses.join(",");
+    if (filters.bookingWindowStatus)
+      params.bookingWindowStatus = filters.bookingWindowStatus;
+    if (filters.search?.trim()) params.search = filters.search.trim();
+    if (filters.departureFrom) params.departureFrom = filters.departureFrom;
+    if (filters.departureTo) params.departureTo = filters.departureTo;
+    if (filters.createdFrom) params.createdFrom = filters.createdFrom;
+    if (filters.createdTo) params.createdTo = filters.createdTo;
+    if (filters.sortBy) params.sortBy = filters.sortBy;
+    if (filters.sortOrder) params.sortOrder = filters.sortOrder;
+    const response = await client.get<BatchBoardListResponse>(
       URL_CONSTANTS.TRAIN_SCHEDULING.BATCH_BOARD,
+      { params },
     );
     return unwrap(response.data);
   },
diff --git a/apps/edr-freight-web/backoffice/src/services/wagon.service.ts b/apps/edr-freight-web/backoffice/src/services/wagon.service.ts
index e30320988..e096a3126 100644
--- a/apps/edr-freight-web/backoffice/src/services/wagon.service.ts
+++ b/apps/edr-freight-web/backoffice/src/services/wagon.service.ts
@@ -83,4 +83,10 @@ export const wagonService = {
   create: (data: Partial<Wagon>) => apiClient.post('/wagons', data),
   update: (id: string, data: Partial<Wagon>) => apiClient.patch(`/wagons/${id}`, data),
   delete: (id: string) => apiClient.delete(`/wagons/${id}`),
+  /** Relocate many wagons to one yard in a single call (writes movement ledger). */
+  bulkTransfer: (wagonIds: string[], toYardId: string) =>
+    apiClient.post<{ moved: number }>('/wagons/bulk-transfer', { wagonIds, toYardId }),
+  /** Set the same status on many wagons in a single call. */
+  bulkSetStatus: (wagonIds: string[], status: Freight.WagonStatus) =>
+    apiClient.post<{ updated: number }>('/wagons/bulk-status', { wagonIds, status }),
 };
diff --git a/apps/edr-freight-web/backoffice/src/services/warehouse.service.ts b/apps/edr-freight-web/backoffice/src/services/warehouse.service.ts
index 366d8b9f3..6797f1743 100644
--- a/apps/edr-freight-web/backoffice/src/services/warehouse.service.ts
+++ b/apps/edr-freight-web/backoffice/src/services/warehouse.service.ts
@@ -37,7 +37,6 @@ import type {
   EligibleBooking,
   BulkReceivePayload,
   BulkReceiveResult,
-  LoadPassedExportResult,
   BulkInspectPayload,
   BulkInspectResult,
   ReadyToLoadRow,
@@ -300,8 +299,6 @@ export const warehouseService = {
     apiClient.get<EligibleBooking[]>(URL_CONSTANTS.WAREHOUSE_INVENTORY.ELIGIBLE_BOOKINGS(direction)),
   receiveBulk: (payload: BulkReceivePayload) =>
     apiClient.post<BulkReceiveResult>(URL_CONSTANTS.WAREHOUSE_INVENTORY.RECEIVE_BULK, payload),
-  loadPassedExport: () =>
-    apiClient.post<LoadPassedExportResult>(URL_CONSTANTS.WAREHOUSE_INVENTORY.LOAD_PASSED_EXPORT, {}),
   bulkMarkInspected: (payload: BulkInspectPayload) =>
     apiClient.post<BulkInspectResult>(URL_CONSTANTS.WAREHOUSE_INVENTORY.BULK_MARK_INSPECTED, payload),
   receivedExport: () =>
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/css/ethiopian-date-picker-overrides.css b/apps/edr-freight-web/backoffice/src/shared/common/css/ethiopian-date-picker-overrides.css
new file mode 100644
index 000000000..4d7adf523
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/css/ethiopian-date-picker-overrides.css
@@ -0,0 +1,279 @@
+.ethiopian-picker-surface .calendars {
+  width: 100% !important;
+  border: 0;
+  border-radius: 0.5rem;
+  color: rgb(31 41 55);
+  font-family: inherit;
+  font-size: 0.875rem;
+  box-shadow: none;
+}
+
+.ethiopian-picker-surface .calendars-nav,
+.ethiopian-picker-surface .calendars-ctrl {
+  background: transparent;
+  border-bottom: 1px solid rgb(229 231 235);
+  padding: 0.35rem 0.4rem;
+}
+
+.ethiopian-picker-surface .calendars-month {
+  width: 100%;
+  border: 0;
+}
+
+.ethiopian-picker-surface .calendars-month-header,
+.ethiopian-picker-surface .calendars-month-header select,
+.ethiopian-picker-surface .calendars-month-header input {
+  height: 2.1rem;
+  background: transparent;
+  color: rgb(17 24 39);
+  font-weight: 600;
+}
+
+.ethiopian-picker-surface .calendars-month th,
+.ethiopian-picker-surface .calendars-month td {
+  border: 0;
+  padding: 0.2rem;
+}
+
+.ethiopian-picker-surface .calendars-month th {
+  color: rgb(107 114 128);
+  font-weight: 500;
+  font-size: 0.75rem;
+}
+
+.ethiopian-picker-surface .calendars-month a,
+.ethiopian-picker-surface .calendars-month span {
+  border-radius: 0.35rem;
+  background: transparent;
+  color: rgb(17 24 39);
+  padding: 0.38rem 0;
+}
+
+.ethiopian-picker-surface .calendars-month a:hover {
+  background: rgb(220 252 231);
+  color: rgb(22 101 52);
+}
+
+.ethiopian-picker-surface .calendars-month td .calendars-today {
+  background: rgb(220 252 231);
+  color: rgb(22 101 52);
+}
+
+.ethiopian-picker-surface .calendars-month td .calendars-selected {
+  background: rgb(34 197 94);
+  color: rgb(255 255 255);
+}
+
+.ethiopian-picker-surface .calendars-month td .calendars-other-month {
+  color: rgb(156 163 175);
+}
+
+.ethiopian-picker-surface .calendars-nav .calendars-cmd-prev,
+.ethiopian-picker-surface .calendars-nav .calendars-cmd-next,
+.ethiopian-picker-surface .calendars-nav .calendars-cmd-prevJump,
+.ethiopian-picker-surface .calendars-nav .calendars-cmd-nextJump,
+.calendars-popup .calendars-nav .calendars-cmd-prev,
+.calendars-popup .calendars-nav .calendars-cmd-next,
+.calendars-popup .calendars-nav .calendars-cmd-prevJump,
+.calendars-popup .calendars-nav .calendars-cmd-nextJump {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  height: 2rem;
+  border: 1px solid rgb(187 247 208);
+  border-radius: 0.5rem;
+  background: rgb(240 253 244);
+  color: rgb(21 128 61);
+  line-height: 1;
+  transition: all 0.2s ease;
+}
+
+.ethiopian-picker-surface .calendars-nav .calendars-cmd-prev:hover,
+.ethiopian-picker-surface .calendars-nav .calendars-cmd-next:hover,
+.ethiopian-picker-surface .calendars-nav .calendars-cmd-prevJump:hover,
+.ethiopian-picker-surface .calendars-nav .calendars-cmd-nextJump:hover,
+.calendars-popup .calendars-nav .calendars-cmd-prev:hover,
+.calendars-popup .calendars-nav .calendars-cmd-next:hover,
+.calendars-popup .calendars-nav .calendars-cmd-prevJump:hover,
+.calendars-popup .calendars-nav .calendars-cmd-nextJump:hover {
+  background: rgb(34 197 94);
+  border-color: rgb(34 197 94);
+  color: rgb(255 255 255);
+}
+
+.ethiopian-picker-surface .calendars-nav,
+.calendars-popup .calendars-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.ethiopian-picker-surface .calendars-nav .calendars-cmd,
+.calendars-popup .calendars-nav .calendars-cmd {
+  float: none;
+  width: auto;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.ethiopian-picker-surface .calendars-nav .calendars-cmd-today,
+.calendars-popup .calendars-nav .calendars-cmd-today {
+  flex: 1;
+  border-radius: 0.5rem;
+  color: rgb(21 128 61);
+  font-weight: 600;
+  text-align: center;
+}
+
+.ethiopian-picker-surface .calendars-nav .calendars-cmd.calendars-disabled,
+.calendars-popup .calendars-nav .calendars-cmd.calendars-disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.dark .ethiopian-picker-surface .calendars,
+[data-theme="dark"] .ethiopian-picker-surface .calendars,
+.dark .calendars-popup .calendars,
+[data-theme="dark"] .calendars-popup .calendars {
+  background: rgb(17 24 39);
+  color: rgb(229 231 235);
+  border-color: rgb(55 65 81);
+}
+
+.dark .ethiopian-picker-surface .calendars-nav,
+.dark .ethiopian-picker-surface .calendars-ctrl,
+[data-theme="dark"] .ethiopian-picker-surface .calendars-nav,
+[data-theme="dark"] .ethiopian-picker-surface .calendars-ctrl,
+.dark .calendars-popup .calendars-nav,
+.dark .calendars-popup .calendars-ctrl,
+[data-theme="dark"] .calendars-popup .calendars-nav,
+[data-theme="dark"] .calendars-popup .calendars-ctrl {
+  background: rgb(17 24 39);
+  border-color: rgb(55 65 81);
+}
+
+.dark .ethiopian-picker-surface .calendars-month-header,
+.dark .ethiopian-picker-surface .calendars-month-header select,
+.dark .ethiopian-picker-surface .calendars-month-header input,
+.dark .ethiopian-picker-surface .calendars-month a,
+.dark .ethiopian-picker-surface .calendars-month span,
+[data-theme="dark"] .ethiopian-picker-surface .calendars-month-header,
+[data-theme="dark"] .ethiopian-picker-surface .calendars-month-header select,
+[data-theme="dark"] .ethiopian-picker-surface .calendars-month-header input,
+[data-theme="dark"] .ethiopian-picker-surface .calendars-month a,
+[data-theme="dark"] .ethiopian-picker-surface .calendars-month span,
+.dark .calendars-popup .calendars-month-header,
+.dark .calendars-popup .calendars-month-header select,
+.dark .calendars-popup .calendars-month-header input,
+.dark .calendars-popup .calendars-month a,
+.dark .calendars-popup .calendars-month span,
+[data-theme="dark"] .calendars-popup .calendars-month-header,
+[data-theme="dark"] .calendars-popup .calendars-month-header select,
+[data-theme="dark"] .calendars-popup .calendars-month-header input,
+[data-theme="dark"] .calendars-popup .calendars-month a,
+[data-theme="dark"] .calendars-popup .calendars-month span {
+  color: rgb(229 231 235);
+}
+
+.dark .ethiopian-picker-surface .calendars-month th,
+[data-theme="dark"] .ethiopian-picker-surface .calendars-month th,
+.dark .calendars-popup .calendars-month th,
+[data-theme="dark"] .calendars-popup .calendars-month th {
+  color: rgb(156 163 175);
+}
+
+.dark .ethiopian-picker-surface .calendars-month a:hover,
+[data-theme="dark"] .ethiopian-picker-surface .calendars-month a:hover,
+.dark .calendars-popup .calendars-month a:hover,
+[data-theme="dark"] .calendars-popup .calendars-month a:hover {
+  background: rgb(20 83 45);
+  color: rgb(187 247 208);
+}
+
+.dark .ethiopian-picker-surface .calendars-month td .calendars-today,
+[data-theme="dark"] .ethiopian-picker-surface .calendars-month td .calendars-today,
+.dark .calendars-popup .calendars-month td .calendars-today,
+[data-theme="dark"] .calendars-popup .calendars-month td .calendars-today {
+  background: rgb(20 83 45);
+  color: rgb(187 247 208);
+}
+
+.dark .ethiopian-picker-surface .calendars-month td .calendars-highlight,
+[data-theme="dark"] .ethiopian-picker-surface .calendars-month td .calendars-highlight,
+.dark .calendars-popup .calendars-month td .calendars-highlight,
+[data-theme="dark"] .calendars-popup .calendars-month td .calendars-highlight {
+  background: rgb(22 101 52);
+}
+
+.dark .ethiopian-picker-surface .calendars-month td .calendars-selected,
+[data-theme="dark"] .ethiopian-picker-surface .calendars-month td .calendars-selected,
+.dark .calendars-popup .calendars-month td .calendars-selected,
+[data-theme="dark"] .calendars-popup .calendars-month td .calendars-selected {
+  background: rgb(34 197 94);
+  color: rgb(5 46 22);
+}
+
+.dark .ethiopian-picker-surface .calendars-month td .calendars-other-month,
+[data-theme="dark"] .ethiopian-picker-surface .calendars-month td .calendars-other-month,
+.dark .calendars-popup .calendars-month td .calendars-other-month,
+[data-theme="dark"] .calendars-popup .calendars-month td .calendars-other-month {
+  color: rgb(107 114 128);
+}
+
+.dark .ethiopian-picker-surface .calendars a.calendars-disabled,
+[data-theme="dark"] .ethiopian-picker-surface .calendars a.calendars-disabled,
+.dark .calendars-popup .calendars a.calendars-disabled,
+[data-theme="dark"] .calendars-popup .calendars a.calendars-disabled {
+  color: rgb(75 85 99);
+}
+
+.dark .ethiopian-picker-surface .calendars-nav .calendars-cmd-prev,
+.dark .ethiopian-picker-surface .calendars-nav .calendars-cmd-next,
+.dark .ethiopian-picker-surface .calendars-nav .calendars-cmd-prevJump,
+.dark .ethiopian-picker-surface .calendars-nav .calendars-cmd-nextJump,
+[data-theme="dark"] .ethiopian-picker-surface .calendars-nav .calendars-cmd-prev,
+[data-theme="dark"] .ethiopian-picker-surface .calendars-nav .calendars-cmd-next,
+[data-theme="dark"] .ethiopian-picker-surface .calendars-nav .calendars-cmd-prevJump,
+[data-theme="dark"] .ethiopian-picker-surface .calendars-nav .calendars-cmd-nextJump,
+.dark .calendars-popup .calendars-nav .calendars-cmd-prev,
+.dark .calendars-popup .calendars-nav .calendars-cmd-next,
+.dark .calendars-popup .calendars-nav .calendars-cmd-prevJump,
+.dark .calendars-popup .calendars-nav .calendars-cmd-nextJump,
+[data-theme="dark"] .calendars-popup .calendars-nav .calendars-cmd-prev,
+[data-theme="dark"] .calendars-popup .calendars-nav .calendars-cmd-next,
+[data-theme="dark"] .calendars-popup .calendars-nav .calendars-cmd-prevJump,
+[data-theme="dark"] .calendars-popup .calendars-nav .calendars-cmd-nextJump {
+  background: rgb(21 128 61 / 0.22);
+  border-color: rgb(34 197 94 / 0.45);
+  color: rgb(187 247 208);
+}
+
+.dark .ethiopian-picker-surface .calendars-nav .calendars-cmd-prev:hover,
+.dark .ethiopian-picker-surface .calendars-nav .calendars-cmd-next:hover,
+.dark .ethiopian-picker-surface .calendars-nav .calendars-cmd-prevJump:hover,
+.dark .ethiopian-picker-surface .calendars-nav .calendars-cmd-nextJump:hover,
+[data-theme="dark"] .ethiopian-picker-surface .calendars-nav .calendars-cmd-prev:hover,
+[data-theme="dark"] .ethiopian-picker-surface .calendars-nav .calendars-cmd-next:hover,
+[data-theme="dark"] .ethiopian-picker-surface .calendars-nav .calendars-cmd-prevJump:hover,
+[data-theme="dark"] .ethiopian-picker-surface .calendars-nav .calendars-cmd-nextJump:hover,
+.dark .calendars-popup .calendars-nav .calendars-cmd-prev:hover,
+.dark .calendars-popup .calendars-nav .calendars-cmd-next:hover,
+.dark .calendars-popup .calendars-nav .calendars-cmd-prevJump:hover,
+.dark .calendars-popup .calendars-nav .calendars-cmd-nextJump:hover,
+[data-theme="dark"] .calendars-popup .calendars-nav .calendars-cmd-prev:hover,
+[data-theme="dark"] .calendars-popup .calendars-nav .calendars-cmd-next:hover,
+[data-theme="dark"] .calendars-popup .calendars-nav .calendars-cmd-prevJump:hover,
+[data-theme="dark"] .calendars-popup .calendars-nav .calendars-cmd-nextJump:hover {
+  background: rgb(34 197 94);
+  border-color: rgb(34 197 94);
+  color: rgb(5 46 22);
+}
+
+.dark .ethiopian-picker-surface .calendars-nav .calendars-cmd-today,
+[data-theme="dark"] .ethiopian-picker-surface .calendars-nav .calendars-cmd-today,
+.dark .calendars-popup .calendars-nav .calendars-cmd-today,
+[data-theme="dark"] .calendars-popup .calendars-nav .calendars-cmd-today {
+  color: rgb(187 247 208);
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/css/flora.calendars.picker.css b/apps/edr-freight-web/backoffice/src/shared/common/css/flora.calendars.picker.css
new file mode 100644
index 000000000..08f02b71f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/css/flora.calendars.picker.css
@@ -0,0 +1,208 @@
+/* Flora styling for jQuery Calendars Picker v2.0.0. */
+.calendars {
+	background-color: #e0f4d7;
+	color: #000;
+	border: 1px solid #f90;
+    -moz-border-radius: 0.25em;
+    -webkit-border-radius: 0.25em;
+    border-radius: 0.25em;
+	font-family: Arial,Helvetica,Sans-serif;
+	font-size: 90%;
+}
+.calendars-rtl {
+	direction: rtl;
+}
+.calendars-popup {
+	z-index: 1000;
+}
+.calendars-disable {
+	position: absolute;
+	z-index: 100;
+	background-color: white;
+	opacity: 0.5;
+	filter: alpha(opacity=50);
+}
+.calendars a {
+	color: #000;
+	text-decoration: none;
+}
+.calendars a.calendars-disabled {
+	color: #888;
+	cursor: auto;
+}
+.calendars button {
+    margin: 0.25em;
+    padding: 0.125em 0em;
+    background-color: #fc8;
+    border: none;
+    -moz-border-radius: 0.25em;
+    -webkit-border-radius: 0.25em;
+    border-radius: 0.25em;
+    font-weight: bold;
+}
+.calendars-nav, .calendars-ctrl {
+	float: left;
+	width: 100%;
+	background-color: #e0f4d7;
+	color: #fff;
+	font-size: 90%;
+	font-weight: bold;
+}
+.datepick-ctrl {
+	background-color: #f90;
+}
+.calendars-cmd {
+	width: 30%;
+}
+.calendars-cmd:hover {
+	background-color: #b1db87;
+}
+.calendars-ctrl .calendars-cmd:hover {
+	background-color: #fa4;
+}
+.calendars-cmd-prevJump, .calendars-cmd-nextJump {
+	width: 8%;
+}
+a.calendars-cmd {
+	height: 1.5em;
+}
+button.calendars-cmd {
+	text-align: center;
+}
+.calendars-cmd-prev, .calendars-cmd-prevJump, .calendars-cmd-clear {
+	float: left;
+	padding-left: 2%;
+}
+.calendars-cmd-current, .calendars-cmd-today {
+	float: left;
+	width: 35%;
+	text-align: center;
+}
+.calendars-cmd-next, .calendars-cmd-nextJump, .calendars-cmd-close {
+	float: right;
+	padding-right: 2%;
+	text-align: right;
+}
+.calendars-rtl .calendars-cmd-prev, .calendars-rtl .calendars-cmd-prevJump,
+.calendars-rtl .calendars-cmd-clear {
+	float: right;
+	padding-left: 0%;
+	padding-right: 2%;
+	text-align: right;
+}
+.calendars-rtl .calendars-cmd-current, .calendars-rtl .calendars-cmd-today {
+	float: right;
+}
+.calendars-rtl .calendars-cmd-next, .calendars-rtl .calendars-cmd-nextJump,
+.calendars-rtl .calendars-cmd-close {
+	float: left;
+	padding-left: 2%;
+	padding-right: 0%;
+	text-align: left;
+}
+.calendars-month-nav {
+	float: left;
+	background-color: #b1db87;
+	text-align: center;
+}
+.calendars-month-nav div {
+	float: left;
+	width: 12.5%;
+	margin: 1%;
+	padding: 1%;
+}
+.calendars-month-nav span {
+	color: #888;
+}
+.calendars-month-row {
+	clear: left;
+}
+.calendars-month {
+	float: left;
+	width: 15em;
+	border: 1px solid #83c948;
+	text-align: center;
+}
+.calendars-month-header, .calendars-month-header select, .calendars-month-header input {
+	height: 1.5em;
+	background-color: #83c948;
+	color: #fff;
+	font-weight: bold;
+}
+.calendars-month-header select, .calendars-month-header input {
+	height: 1.4em;
+	border: none;
+}
+.calendars-month-header input {
+	position: absolute;
+	display: none;
+}
+.calendars-month table {
+	width: 100%;
+	border-collapse: collapse;
+}
+.calendars-month thead {
+	border-bottom: 1px solid #aaa;
+}
+.calendars-month th, .calendars-month td {
+	margin: 0em;
+	padding: 0em;
+	font-weight: normal;
+	text-align: center;
+}
+.calendars-month th {
+	border: 1px solid #b1db87;
+}
+.calendars-month th, .calendars-month th a {
+	background-color: #b1db87;
+	color: #000;
+	border: 1px solid #b1db87;
+}
+.calendars-month td {
+	background-color: #fff;
+	color: #666;
+	border: 1px solid #b1db87;
+}
+.calendars-month td.calendars-week * {
+	background-color: #b1db87;
+	color: #666;
+	border: none;
+}
+.calendars-month a {
+	display: block;
+	width: 100%;
+	padding: 0.125em 0em;
+	text-decoration: none;
+}
+.calendars-month span {
+	display: block;
+	width: 100%;
+	padding: 0.125em 0em;
+}
+.calendars-month td span {
+	color: #888;
+}
+.calendars-month td .calendars-other-month {
+	background-color: #e0f4d7;
+}
+.calendars-month td .calendars-weekend {
+	background-color: #e0f4d7;
+}
+.calendars-month td .calendars-today {
+	background-color: #b1db87;
+}
+.calendars-month td .calendars-highlight {
+	background-color: #fc8;
+}
+.calendars-month td .calendars-selected {
+	background-color: #f90;
+	color: #fff;
+}
+.calendars-status {
+	clear: both;
+	background-color: #b1db87;
+	text-align: center;
+}
+.calendars-clear-fix {
+	clear: both;
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/css/humanity.calendars.picker.css b/apps/edr-freight-web/backoffice/src/shared/common/css/humanity.calendars.picker.css
new file mode 100644
index 000000000..e7e4db0fe
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/css/humanity.calendars.picker.css
@@ -0,0 +1,197 @@
+/* Humanity styling for jQuery Calendars Picker v2.0.0. */
+.calendars {
+	background-color: #f4f0ec;
+	color: #1e1b1c;
+	border: 1px solid #cb842e;
+    -moz-border-radius: 0.25em;
+    -webkit-border-radius: 0.25em;
+    border-radius: 0.25em;
+	font-family: Arial,Helvetica,Sans-serif;
+	font-size: 90%;
+}
+.calendars-rtl {
+	direction: rtl;
+}
+.calendars-popup {
+	z-index: 1000;
+}
+.calendars-disable {
+	position: absolute;
+	z-index: 100;
+	background-color: white;
+	opacity: 0.5;
+	filter: alpha(opacity=50);
+}
+.calendars a {
+	color: #1e1b1c;
+	text-decoration: none;
+}
+.calendars a.calendars-disabled {
+	color: #888;
+	cursor: auto;
+}
+.calendars button {
+    margin: 0.25em;
+    padding: 0.125em 0em;
+    background-color: #ede4d4;
+    border: none;
+    -moz-border-radius: 0.25em;
+    -webkit-border-radius: 0.25em;
+    border-radius: 0.25em;
+    font-weight: bold;
+}
+.calendars-nav, .calendars-ctrl {
+	float: left;
+	width: 100%;
+	background-color: #ede4d4;
+	font-size: 90%;
+	font-weight: bold;
+}
+.calendars-ctrl {
+	background-color: #cb842e;
+}
+.calendars-cmd {
+	width: 30%;
+}
+.calendars-cmd:hover {
+	background-color: #f4f0ec;
+}
+.calendars-cmd-prevJump, .calendars-cmd-nextJump {
+	width: 8%;
+}
+a.calendars-cmd {
+	height: 1.5em;
+}
+button.calendars-cmd {
+	text-align: center;
+}
+.calendars-cmd-prev, .calendars-cmd-prevJump, .calendars-cmd-clear {
+	float: left;
+	padding-left: 2%;
+}
+.calendars-cmd-current, .calendars-cmd-today {
+	float: left;
+	width: 35%;
+	text-align: center;
+}
+.calendars-cmd-next, .calendars-cmd-nextJump, .calendars-cmd-close {
+	float: right;
+	padding-right: 2%;
+	text-align: right;
+}
+.calendars-rtl .calendars-cmd-prev, .calendars-rtl .calendars-cmd-prevJump,
+.calendars-rtl .calendars-cmd-clear {
+	float: right;
+	padding-left: 0%;
+	padding-right: 2%;
+	text-align: right;
+}
+.calendars-rtl .calendars-cmd-current, .calendars-rtl .calendars-cmd-today {
+	float: right;
+}
+.calendars-rtl .calendars-cmd-next, .calendars-rtl .calendars-cmd-nextJump,
+.calendars-rtl .calendars-cmd-close {
+	float: left;
+	padding-left: 2%;
+	padding-right: 0%;
+	text-align: left;
+}
+.calendars-month-nav {
+	float: left;
+	text-align: center;
+}
+.calendars-month-nav div {
+	float: left;
+	width: 12.5%;
+	margin: 1%;
+	padding: 1%;
+}
+.calendars-month-nav span {
+	color: #888;
+}
+.calendars-month-row {
+	clear: left;
+}
+.calendars-month {
+	float: left;
+	width: 17em;
+	border: 1px solid #e0cfc2;
+	text-align: center;
+}
+.calendars-month-header, .calendars-month-header select, .calendars-month-header input {
+	height: 1.5em;
+	background-color: #cb842e;
+	color: #fff;
+	font-weight: bold;
+}
+.calendars-month-header select, .calendars-month-header input {
+	height: 1.4em;
+	border: none;
+}
+.calendars-month-header input {
+	position: absolute;
+	display: none;
+}
+.calendars-month table {
+	width: 100%;
+	border: 2px solid transparent;
+	border-collapse: collapse;
+}
+.calendars-month th, .calendars-month td {
+	margin: 0em;
+	padding: 0.125em;
+	font-weight: normal;
+	text-align: center;
+}
+.calendars-month td.calendars-week,
+.calendars-month td.calendars-week * {
+	background-color: #cb842e;
+	color: #fff;
+	border: 1px solid #cb842e;
+}
+.calendars-month a {
+	display: block;
+	width: 100%;
+	padding: 0.125em 0em;
+	background-color: #ede4d4;
+	color: #000;
+	border: 1px solid #cdc3b7;
+	text-decoration: none;
+}
+.calendars-month span {
+	display: block;
+	margin-top: 0.25em;
+}
+.calendars-month a {
+	background-color: #ede4d4;
+	color: #444;
+	border: 1px solid #cdc3b7;
+	text-decoration: none;
+}
+.calendars-month td span {
+	color: #888;
+}
+.calendars-month td .calendars-other-month {
+	background-color: #f4f0ec;
+}
+.calendars-month td .calendars-today {
+	background-color: #f5f5b5;
+	border: 1px solid #d9bb73;
+}
+.calendars-month td .calendars-highlight {
+	background-color: #f5f0e5;
+	color: #1e1b1c;
+	border: 1px solid #f5ad66;
+}
+.calendars-month td .calendars-selected {
+	background-color: #cb842e;
+	color: #fff;
+	border: 1px solid #cb842e;
+}
+.calendars-status {
+	clear: both;
+	text-align: center;
+}
+.calendars-clear-fix {
+	clear: both;
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/css/jquery.calendars.picker.css b/apps/edr-freight-web/backoffice/src/shared/common/css/jquery.calendars.picker.css
new file mode 100644
index 000000000..4ad3046bf
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/css/jquery.calendars.picker.css
@@ -0,0 +1,215 @@
+/* Default styling for jQuery Calendars Picker v2.0.0. */
+.calendars {
+	background-color: #fff;
+	color: #000;
+	border: 1px solid #444;
+    -moz-border-radius: 0.25em;
+    -webkit-border-radius: 0.25em;
+    border-radius: 0.25em;
+	font-family: Arial,Helvetica,Sans-serif;
+	font-size: 90%;
+}
+.calendars-rtl {
+	direction: rtl;
+}
+.calendars-popup {
+	z-index: 1000;
+}
+.calendars-disable {
+	position: absolute;
+	z-index: 100;
+	background-color: white;
+	opacity: 0.5;
+	filter: alpha(opacity=50);
+}
+.calendars a {
+	color: #fff;
+	text-decoration: none;
+}
+.calendars a.calendars-disabled {
+	color: #888;
+	cursor: auto;
+}
+.calendars button {
+    margin: 0.25em;
+    padding: 0.125em 0em;
+    background-color: #fcc;
+    border: none;
+    -moz-border-radius: 0.25em;
+    -webkit-border-radius: 0.25em;
+    border-radius: 0.25em;
+    font-weight: bold;
+}
+.calendars-nav, .calendars-ctrl {
+	float: left;
+	width: 100%;
+	background-color: #000;
+	color: #fff;
+	font-size: 90%;
+	font-weight: bold;
+}
+.calendars-ctrl {
+	background-color: #600;
+}
+.calendars-cmd {
+	width: 30%;
+}
+.calendars-cmd:hover {
+	background-color: #777;
+}
+.calendars-ctrl .calendars-cmd:hover {
+	background-color: #f08080;
+}
+.calendars-cmd-prevJump, .calendars-cmd-nextJump {
+	width: 8%;
+}
+a.calendars-cmd {
+	height: 1.5em;
+}
+button.calendars-cmd {
+	text-align: center;
+}
+.calendars-cmd-prev, .calendars-cmd-prevJump, .calendars-cmd-clear {
+	float: left;
+	padding-left: 2%;
+}
+.calendars-cmd-current, .calendars-cmd-today {
+	float: left;
+	width: 35%;
+	text-align: center;
+}
+.calendars-cmd-next, .calendars-cmd-nextJump, .calendars-cmd-close {
+	float: right;
+	padding-right: 2%;
+	text-align: right;
+}
+.calendars-rtl .calendars-cmd-prev, .calendars-rtl .calendars-cmd-prevJump,
+.calendars-rtl .calendars-cmd-clear {
+	float: right;
+	padding-left: 0%;
+	padding-right: 2%;
+	text-align: right;
+}
+.calendars-rtl .calendars-cmd-current, .calendars-rtl .calendars-cmd-today {
+	float: right;
+}
+.calendars-rtl .calendars-cmd-next, .calendars-rtl .calendars-cmd-nextJump,
+.calendars-rtl .calendars-cmd-close {
+	float: left;
+	padding-left: 2%;
+	padding-right: 0%;
+	text-align: left;
+}
+.calendars-month-nav {
+	float: left;
+	background-color: #777;
+	text-align: center;
+}
+.calendars-month-nav div {
+	float: left;
+	width: 12.5%;
+	margin: 1%;
+	padding: 1%;
+}
+.calendars-month-nav span {
+	color: #888;
+}
+.calendars-month-row {
+	clear: left;
+}
+.calendars-month {
+	float: left;
+	width: 15em;
+	border: 1px solid #444;
+	text-align: center;
+}
+.calendars-month-header, .calendars-month-header select, .calendars-month-header input {
+	height: 1.5em;
+	background-color: #444;
+	color: #fff;
+	font-weight: bold;
+}
+.calendars-month-header select, .calendars-month-header input {
+	height: 1.4em;
+	border: none;
+}
+.calendars-month-header input {
+	position: absolute;
+	display: none;
+}
+.calendars-month table {
+	width: 100%;
+	border-collapse: collapse;
+}
+.calendars-month thead {
+	border-bottom: 1px solid #aaa;
+}
+.calendars-month th, .calendars-month td {
+	margin: 0em;
+	padding: 0em;
+	font-weight: normal;
+	text-align: center;
+}
+.calendars-month th {
+	border: 1px solid #777;
+}
+.calendars-month th, .calendars-month th a {
+	background-color: #777;
+	color: #fff;
+}
+.calendars-month td {
+	background-color: #eee;
+	border: 1px solid #aaa;
+}
+.calendars-month td.calendars-week {
+	border: 1px solid #777;
+}
+.calendars-month td.calendars-week * {
+	background-color: #777;
+	color: #fff;
+	border: none;
+}
+.calendars-month a {
+	display: block;
+	width: 100%;
+	padding: 0.125em 0em;
+	background-color: #eee;
+	color: #000;
+	text-decoration: none;
+}
+.calendars-month span {
+	display: block;
+	width: 100%;
+	padding: 0.125em 0em;
+}
+.calendars-month td span {
+	color: #888;
+}
+.calendars-month td .calendars-other-month {
+	background-color: #fff;
+}
+.calendars-month td .calendars-weekend {
+	background-color: #ddd;
+}
+.calendars-month td .calendars-today {
+	background-color: #f0c0c0;
+}
+.calendars-month td .calendars-highlight {
+	background-color: #f08080;
+}
+.calendars-month td .calendars-selected {
+	background-color: #777;
+	color: #fff;
+}
+.calendars-month th.calendars-week {
+	background-color: #777;
+	color: #fff;
+}
+.calendars-status {
+	clear: both;
+	background-color: #ddd;
+	text-align: center;
+}
+.calendars-clear-fix {
+	clear: both;
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/css/redmond.calendars.picker.css b/apps/edr-freight-web/backoffice/src/shared/common/css/redmond.calendars.picker.css
new file mode 100644
index 000000000..ad1334fd7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/css/redmond.calendars.picker.css
@@ -0,0 +1,199 @@
+/* Redmond styling for jQuery Calendars Picker v2.0.0. */
+.calendars {
+	background-color: #fff;
+	color: #222;
+	border: 1px solid #4297d7;
+    -moz-border-radius: 0.25em;
+    -webkit-border-radius: 0.25em;
+    border-radius: 0.25em;
+	font-family: Arial,Helvetica,Sans-serif;
+	font-size: 90%;
+}
+.calendars-rtl {
+	direction: rtl;
+}
+.calendars-popup {
+	z-index: 1000;
+}
+.calendars-disable {
+	position: absolute;
+	z-index: 100;
+	background-color: white;
+	opacity: 0.5;
+	filter: alpha(opacity=50);
+}
+.calendars a {
+	color: #222;
+	text-decoration: none;
+}
+.calendars a.calendars-disabled {
+	color: #888;
+	cursor: auto;
+}
+.calendars button {
+    margin: 0.25em;
+    padding: 0.125em 0em;
+	background-color: #5c9ccc;
+	color: #fff;
+    border: none;
+    -moz-border-radius: 0.25em;
+    -webkit-border-radius: 0.25em;
+    border-radius: 0.25em;
+    font-weight: bold;
+}
+.calendars-nav, .calendars-ctrl {
+	float: left;
+	width: 100%;
+	background-color: #fff;
+	font-size: 90%;
+	font-weight: bold;
+}
+.calendars-ctrl {
+	background-color: #d0e5f5;
+}
+.calendars-cmd {
+	width: 30%;
+}
+.calendars-cmd:hover {
+	background-color: #dfeffc;
+}
+button.calendars-cmd:hover {
+	background-color: #79b7e7;
+}
+.calendars-cmd-prevJump, .calendars-cmd-nextJump {
+	width: 8%;
+}
+a.calendars-cmd {
+	height: 1.5em;
+}
+button.calendars-cmd {
+	text-align: center;
+}
+.calendars-cmd-prev, .calendars-cmd-prevJump, .calendars-cmd-clear {
+	float: left;
+	padding-left: 2%;
+}
+.calendars-cmd-current, .calendars-cmd-today {
+	float: left;
+	width: 35%;
+	text-align: center;
+}
+.calendars-cmd-next, .calendars-cmd-nextJump, .calendars-cmd-close {
+	float: right;
+	padding-right: 2%;
+	text-align: right;
+}
+.calendars-rtl .calendars-cmd-prev, .calendars-rtl .calendars-cmd-prevJump,
+.calendars-rtl .calendars-cmd-clear {
+	float: right;
+	padding-left: 0%;
+	padding-right: 2%;
+	text-align: right;
+}
+.calendars-rtl .calendars-cmd-current, .calendars-rtl .calendars-cmd-today {
+	float: right;
+}
+.calendars-rtl .calendars-cmd-next, .calendars-rtl .calendars-cmd-nextJump,
+.calendars-rtl .calendars-cmd-close {
+	float: left;
+	padding-left: 2%;
+	padding-right: 0%;
+	text-align: left;
+}
+.calendars-month-nav {
+	float: left;
+	text-align: center;
+}
+.calendars-month-nav div {
+	float: left;
+	width: 12.5%;
+	margin: 1%;
+	padding: 1%;
+}
+.calendars-month-nav span {
+	color: #888;
+}
+.calendars-month-row {
+	clear: left;
+}
+.calendars-month {
+	float: left;
+	width: 15em;
+	border: 1px solid #5c9ccc;
+	text-align: center;
+}
+.calendars-month-header, .calendars-month-header select, .calendars-month-header input {
+	height: 1.5em;
+	background-color: #5c9ccc;
+	color: #fff;
+	font-weight: bold;
+}
+.calendars-month-header select, .calendars-month-header input {
+	height: 1.4em;
+	border: none;
+}
+.calendars-month-header input {
+	position: absolute;
+	display: none;
+}
+.calendars-month table {
+	width: 100%;
+	border-collapse: collapse;
+}
+.calendars-month thead {
+	border-bottom: 1px solid #aaa;
+}
+.calendars-month th, .calendars-month td {
+	margin: 0em;
+	padding: 0em;
+	font-weight: normal;
+	text-align: center;
+}
+.calendars-month th {
+	border: 1px solid #fff;
+	border-bottom: 1px solid #c5dbec;
+}
+.calendars-month td {
+	border: 1px solid #c5dbec;
+}
+.calendars-month td.calendars-week * {
+	background-color: #d0e5f5;
+	color: #222;
+	border: none;
+}
+.calendars-month a {
+	display: block;
+	width: 100%;
+	padding: 0.125em 0em;
+	background-color: #dfeffc;
+	color: #000;
+	text-decoration: none;
+}
+.calendars-month span {
+	display: block;
+	width: 100%;
+	padding: 0.125em 0em;
+}
+.calendars-month td span {
+	color: #888;
+}
+.calendars-month td .calendars-other-month {
+	background-color: #fff;
+}
+.calendars-month td .calendars-today {
+	background-color: #fad42e;
+}
+.calendars-month td .calendars-highlight {
+	background-color: #79b7e7;
+}
+.calendars-month td .calendars-selected {
+	background-color: #4297d7;
+	color: #fff;
+}
+.calendars-status {
+	clear: both;
+	text-align: center;
+}
+.calendars-clear-fix {
+	clear: both;
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/css/smoothness.calendars.picker.css b/apps/edr-freight-web/backoffice/src/shared/common/css/smoothness.calendars.picker.css
new file mode 100644
index 000000000..3230f81cf
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/css/smoothness.calendars.picker.css
@@ -0,0 +1,200 @@
+/* Smoothness styling for jQuery Calendars Picker v2.0.0. */
+.calendars {
+	background-color: #fff;
+	color: #222;
+	border: 1px solid #aaa;
+    -moz-border-radius: 0.25em;
+    -webkit-border-radius: 0.25em;
+    border-radius: 0.25em;
+	font-family: Arial,Helvetica,Sans-serif;
+	font-size: 90%;
+}
+.calendars-rtl {
+	direction: rtl;
+}
+.calendars-popup {
+	z-index: 1000;
+}
+.calendars-disable {
+	position: absolute;
+	z-index: 100;
+	background-color: white;
+	opacity: 0.5;
+	filter: alpha(opacity=50);
+}
+.calendars a {
+	color: #222;
+	text-decoration: none;
+}
+.calendars a.calendars-disabled {
+	color: #888;
+	cursor: auto;
+}
+.calendars button {
+    margin: 0.25em;
+    padding: 0.125em 0em;
+    background-color: #fcc;
+    border: none;
+    -moz-border-radius: 0.25em;
+    -webkit-border-radius: 0.25em;
+    border-radius: 0.25em;
+    font-weight: bold;
+}
+.calendars-nav, .calendars-ctrl {
+	float: left;
+	width: 100%;
+	background-color: #fff;
+	font-size: 90%;
+	font-weight: bold;
+}
+.calendars-ctrl {
+	background-color: #fee6e3;
+}
+.calendars-cmd {
+	width: 30%;
+}
+.calendars-cmd:hover {
+	background-color: #e0e0e0;
+}
+.calendars-ctrl .calendars-cmd:hover {
+	background-color: #f08080;
+}
+.calendars-cmd-prevJump, .calendars-cmd-nextJump {
+	width: 8%;
+}
+a.calendars-cmd {
+	height: 1.5em;
+}
+button.calendars-cmd {
+	text-align: center;
+}
+.calendars-cmd-prev, .calendars-cmd-prevJump, .calendars-cmd-clear {
+	float: left;
+	padding-left: 2%;
+}
+.calendars-cmd-current, .calendars-cmd-today {
+	float: left;
+	width: 35%;
+	text-align: center;
+}
+.calendars-cmd-next, .calendars-cmd-nextJump, .calendars-cmd-close {
+	float: right;
+	padding-right: 2%;
+	text-align: right;
+}
+.calendars-rtl .calendars-cmd-prev, .calendars-rtl .calendars-cmd-prevJump,
+.calendars-rtl .calendars-cmd-clear {
+	float: right;
+	padding-left: 0%;
+	padding-right: 2%;
+	text-align: right;
+}
+.calendars-rtl .calendars-cmd-current, .calendars-rtl .calendars-cmd-today {
+	float: right;
+}
+.calendars-rtl .calendars-cmd-next, .calendars-rtl .calendars-cmd-nextJump,
+.calendars-rtl .calendars-cmd-close {
+	float: left;
+	padding-left: 2%;
+	padding-right: 0%;
+	text-align: left;
+}
+.calendars-month-nav {
+	float: left;
+	text-align: center;
+}
+.calendars-month-nav div {
+	float: left;
+	width: 12.5%;
+	margin: 1%;
+	padding: 1%;
+}
+.calendars-month-nav span {
+	color: #888;
+}
+.calendars-month-row {
+	clear: left;
+}
+.calendars-month {
+	float: left;
+	width: 15em;
+	border: 1px solid #aaa;
+	text-align: center;
+}
+.calendars-month-header, .calendars-month-header select, .calendars-month-header input {
+	height: 1.5em;
+	background-color: #e0e0e0;
+	color: #222;
+	font-weight: bold;
+}
+.calendars-month-header select, .calendars-month-header input {
+	height: 1.4em;
+	border: none;
+}
+.calendars-month-header input {
+	position: absolute;
+	display: none;
+}
+.calendars-month table {
+	width: 100%;
+	border-collapse: collapse;
+}
+.calendars-month thead {
+	border-bottom: 1px solid #aaa;
+}
+.calendars-month th, .calendars-month td {
+	margin: 0em;
+	padding: 0em;
+	font-weight: normal;
+	text-align: center;
+}
+.calendars-month thead tr {
+	border: 1px solid #aaa;
+}
+.calendars-month td {
+	background-color: #eee;
+	border: 1px solid #aaa;
+}
+.calendars-month td.calendars-week * {
+	background-color: #e0e0e0;
+	color: #222;
+	border: none;
+}
+.calendars-month a {
+	display: block;
+	width: 100%;
+	padding: 0.125em 0em;
+	background-color: #eee;
+	color: #000;
+	text-decoration: none;
+}
+.calendars-month span {
+	display: block;
+	width: 100%;
+	padding: 0.125em 0em;
+}
+.calendars-month td span {
+	color: #888;
+}
+.calendars-month td .calendars-other-month {
+	background-color: #fff;
+}
+.calendars-month td .calendars-weekend {
+	background-color: #ddd;
+}
+.calendars-month td .calendars-today {
+	background-color: #fbf9ee;
+}
+.calendars-month td .calendars-highlight {
+	background-color: #dadada;
+}
+.calendars-month td .calendars-selected {
+	background-color: #fcc;
+}
+.calendars-status {
+	clear: both;
+	text-align: center;
+}
+.calendars-clear-fix {
+	clear: both;
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/css/ui-black-tie.calendars.picker.css b/apps/edr-freight-web/backoffice/src/shared/common/css/ui-black-tie.calendars.picker.css
new file mode 100644
index 000000000..f23542f7b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/css/ui-black-tie.calendars.picker.css
@@ -0,0 +1,18 @@
+/* ThemeRoller Blacktie override style sheet for jQuery Calendars Picker v2.0.0. */
+@import "ui.calendars.picker.css";
+
+.ui-widget-header a,
+.ui-widget-header select {
+	color: #eeeeee; /* Set (.ui-widget-header a) colour from theme here */
+}
+.ui-widget-header a:hover {
+	background-color: #1c1c1c; /* Set (.ui-state-hover) colours from theme here */
+	color: #ffffff;
+}
+.ui-widget-header select,
+.ui-widget-header option {
+	background-color: #333333; /* Set (.ui-widget-header) background colour from theme here */
+}
+.ui-state-highlight a {
+	color: #363636; /* Set (.ui-state-highlight) colour from theme here */
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/css/ui-blitzer.calendars.picker.css b/apps/edr-freight-web/backoffice/src/shared/common/css/ui-blitzer.calendars.picker.css
new file mode 100644
index 000000000..bbfd01a6b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/css/ui-blitzer.calendars.picker.css
@@ -0,0 +1,18 @@
+/* ThemeRoller Blitzer override style sheet for jQuery Calendars Picker v2.0.0. */
+@import "ui.calendars.picker.css";
+
+.ui-widget-header a,
+.ui-widget-header select {
+	color: #ffffff; /* Set (.ui-widget-header a) colour from theme here */
+}
+.ui-widget-header a:hover {
+	background-color: #f6f6f6; /* Set (.ui-state-hover) colours from theme here */
+	color: #111111;
+}
+.ui-widget-header select,
+.ui-widget-header option {
+	background-color: #cc0000; /* Set (.ui-widget-header) background colour from theme here */
+}
+.ui-state-highlight a {
+	color: #555555; /* Set (.ui-state-highlight) colour from theme here */
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/css/ui-cupertino.calendars.picker.css b/apps/edr-freight-web/backoffice/src/shared/common/css/ui-cupertino.calendars.picker.css
new file mode 100644
index 000000000..0e1a94ba1
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/css/ui-cupertino.calendars.picker.css
@@ -0,0 +1,18 @@
+/* ThemeRoller Cupertino override style sheet for jQuery Calendars Picker v2.0.0. */
+@import "ui.calendars.picker.css";
+
+.ui-widget-header a,
+.ui-widget-header select {
+	color: #222222; /* Set (.ui-widget-header a) colour from theme here */
+}
+.ui-widget-header a:hover {
+	background-color: #f0f0f0; /* Set (.ui-state-hover) colours from theme here */
+	color: #0b5b98;
+}
+.ui-widget-header select,
+.ui-widget-header option {
+	background-color: #e7eef3; /* Set (.ui-widget-header) background colour from theme here */
+}
+.ui-state-highlight a {
+	color: #363636; /* Set (.ui-state-highlight) colour from theme here */
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/css/ui-dark-hive.calendars.picker.css b/apps/edr-freight-web/backoffice/src/shared/common/css/ui-dark-hive.calendars.picker.css
new file mode 100644
index 000000000..fab72c39c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/css/ui-dark-hive.calendars.picker.css
@@ -0,0 +1,18 @@
+/* ThemeRoller Dark Hive override style sheet for jQuery Calendars Picker v2.0.0. */
+@import "ui.calendars.picker.css";
+
+.ui-widget-header a,
+.ui-widget-header select {
+	color: #ffffff; /* Set (.ui-widget-header a) colour from theme here */
+}
+.ui-widget-header a:hover {
+	background-color: #003147; /* Set (.ui-state-hover) colours from theme here */
+	color: #ffffff;;
+}
+.ui-widget-header select,
+.ui-widget-header option {
+	background-color: #444444; /* Set (.ui-widget-header) background colour from theme here */
+}
+.ui-state-highlight a {
+	color: #eeeeee; /* Set (.ui-state-highlight) colour from theme here */
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/css/ui-dot-luv.calendars.picker.css b/apps/edr-freight-web/backoffice/src/shared/common/css/ui-dot-luv.calendars.picker.css
new file mode 100644
index 000000000..d82eaaa44
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/css/ui-dot-luv.calendars.picker.css
@@ -0,0 +1,18 @@
+/* ThemeRoller DotLuv override style sheet for jQuery Calendars Picker v2.0.0. */
+@import "ui.calendars.picker.css";
+
+.ui-widget-header a,
+.ui-widget-header select {
+	color: #f6f6f6; /* Set (.ui-widget-header a) colour from theme here */
+}
+.ui-widget-header a:hover {
+	background-color: #00498f; /* Set (.ui-state-hover) colours from theme here */
+	color: #ffffff;
+}
+.ui-widget-header select,
+.ui-widget-header option {
+	background-color: #0b3e6f; /* Set (.ui-widget-header) background colour from theme here */
+}
+.ui-state-highlight a {
+	color: #ffffff; /* Set (.ui-state-highlight) colour from theme here */
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/css/ui-eggplant.calendars.picker.css b/apps/edr-freight-web/backoffice/src/shared/common/css/ui-eggplant.calendars.picker.css
new file mode 100644
index 000000000..9318e386e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/css/ui-eggplant.calendars.picker.css
@@ -0,0 +1,18 @@
+/* ThemeRoller Eggplant override style sheet for jQuery Calendars Picker v2.0.0. */
+@import "ui.calendars.picker.css";
+
+.ui-widget-header a,
+.ui-widget-header select {
+	color: #ffffff; /* Set (.ui-widget-header a) colour from theme here */
+}
+.ui-widget-header a:hover {
+	background-color: #eae6ea; /* Set (.ui-state-hover) colours from theme here */
+	color: #734d99;
+}
+.ui-widget-header select,
+.ui-widget-header option {
+	background-color: #30273a; /* Set (.ui-widget-header) background colour from theme here */
+}
+.ui-state-highlight a {
+	color: #fafafa; /* Set (.ui-state-highlight) colour from theme here */
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/css/ui-excite-bike.calendars.picker.css b/apps/edr-freight-web/backoffice/src/shared/common/css/ui-excite-bike.calendars.picker.css
new file mode 100644
index 000000000..fe9129991
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/css/ui-excite-bike.calendars.picker.css
@@ -0,0 +1,18 @@
+/* ThemeRoller ExciteBike override style sheet for jQuery dCalendars Picker v2.0.0. */
+@import "ui.calendars.picker.css";
+
+.ui-widget-header a,
+.ui-widget-header select {
+	color: #e69700; /* Set (.ui-widget-header a) colour from theme here */
+}
+.ui-widget-header a:hover {
+	background-color: #2293f7; /* Set (.ui-state-hover) colours from theme here */
+	color: #ffffff;
+}
+.ui-widget-header select,
+.ui-widget-header option {
+	background-color: #f9f9f9; /* Set (.ui-widget-header) background colour from theme here */
+}
+.ui-state-highlight a {
+	color: #333333; /* Set (.ui-state-highlight) colour from theme here */
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/css/ui-flick.calendars.picker.css b/apps/edr-freight-web/backoffice/src/shared/common/css/ui-flick.calendars.picker.css
new file mode 100644
index 000000000..9f4ddeedc
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/css/ui-flick.calendars.picker.css
@@ -0,0 +1,18 @@
+/* ThemeRoller Flick override style sheet for jQuery Calendars Picker v2.0.0. */
+@import "ui.calendars.picker.css";
+
+.ui-widget-header a,
+.ui-widget-header select {
+	color: #444444; /* Set (.ui-widget-header a) colour from theme here */
+}
+.ui-widget-header a:hover {
+	background-color: #0073ea; /* Set (.ui-state-hover) colours from theme here */
+	color: #ffffff;
+}
+.ui-widget-header select,
+.ui-widget-header option {
+	background-color: #dddddd; /* Set (.ui-widget-header) background colour from theme here */
+}
+.ui-state-highlight a {
+	color: #444444; /* Set (.ui-state-highlight) colour from theme here */
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/css/ui-hot-sneaks.calendars.picker.css b/apps/edr-freight-web/backoffice/src/shared/common/css/ui-hot-sneaks.calendars.picker.css
new file mode 100644
index 000000000..d287e7d85
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/css/ui-hot-sneaks.calendars.picker.css
@@ -0,0 +1,18 @@
+/* ThemeRoller HotSneaks override style sheet for jQuery Calendars Picker v2.0.0. */
+@import "ui.calendars.picker.css";
+
+.ui-widget-header a,
+.ui-widget-header select {
+	color: #e1e463; /* Set (.ui-widget-header a) colour from theme here */
+}
+.ui-widget-header a:hover {
+	background-color: #ccd232; /* Set (.ui-state-hover) colours from theme here */
+	color: #212121;
+}
+.ui-widget-header select,
+.ui-widget-header option {
+	background-color: #35414f; /* Set (.ui-widget-header) background colour from theme here */
+}
+.ui-state-highlight a {
+	color: #363636; /* Set (.ui-state-highlight) colour from theme here */
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/css/ui.calendars.picker.css b/apps/edr-freight-web/backoffice/src/shared/common/css/ui.calendars.picker.css
new file mode 100644
index 000000000..b9d84ee3c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/css/ui.calendars.picker.css
@@ -0,0 +1,107 @@
+/* ThemeRoller override style sheet for jQuery Calendars Picker v2.0.0. */
+.ui-datepicker {
+	display: block;
+}
+#ui-datepicker-div,
+.ui-datepicker-inline {
+	width: 17em;
+	font-size: 75%;
+}
+#ui-datepicker-div {
+	z-index: 100;
+}
+.ui-datepicker-inline {
+	float: left;
+}
+.ui-datepicker-rtl {
+	direction: rtl;
+}
+#ui-datepicker-div a,
+.ui-datepicker-inline a {
+	text-decoration: none;
+}
+.ui-datepicker-prompt {
+	height: 1.5em;
+	padding-top: 0.25em;
+	text-align: center;
+}
+button.ui-datepicker-cmd {
+	height: 2em;
+}
+.ui-datepicker-cmd-clear {
+	float: left;
+	margin-left: 0.25em;
+}
+.ui-datepicker-cmd-close {
+	float: right;
+	margin-right: 0.25em;
+}
+.ui-datepicker-cmd-prev {
+	position: static;
+	float: left;
+	width: 30%;
+	height: auto;
+	margin-left: 1%;
+}
+.ui-datepicker-cmd-next {
+	position: static;
+	float: right;
+	width: 30%;
+	height: auto;
+	margin-right: 1%;
+	text-align: right;
+}
+.ui-datepicker-cmd-current,
+.ui-datepicker-cmd-today {
+	float: left;
+	width: 37%;
+	text-align: center;
+}
+.ui-datepicker-month-nav {
+	float: left;
+	text-align: center;
+}
+.ui-datepicker-month-nav div {
+	float: left;
+	width: 12.5%;
+	margin: 1%;
+	padding: 1%;
+}
+.ui-datepicker-month-nav span {
+	color: #888;
+}
+.ui-datepicker-row-break {
+	width: 100%;
+	font-size: 100%;
+}
+.ui-datepicker-group {
+	float: left;
+	width: 17em;
+}
+.ui-datepicker-group .ui-datepicker-header {
+	height: 1.5em;
+	text-align: center;
+}
+.ui-datepicker select,
+.ui-datepicker-inline select {
+	width: auto;
+	height: 1.66em;
+	border: none;
+	font-weight: bold;
+}
+.ui-datepicker th {
+	padding: 0.5em 0.3em;
+}
+.ui-datepicker td,
+.ui-datepicker td a,
+.ui-datepicker td span {
+	border: 1px solid transparent;
+	text-align: center;
+}
+.ui-datepicker-status {
+	padding: 0.25em 0em;
+	text-align: center;
+}
+.ui-datepicker .ui-helper-clearfix {
+	clear: both;
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/form/fields/AmharicDatePicker.tsx b/apps/edr-freight-web/backoffice/src/shared/common/form/fields/AmharicDatePicker.tsx
new file mode 100644
index 000000000..32a9aaaf2
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/form/fields/AmharicDatePicker.tsx
@@ -0,0 +1,457 @@
+import $ from "@/shared/common/jquery-global";
+import React, { useEffect, useRef, useState } from "react";
+import { cn } from "@/shared/lib/utils";
+
+// CSS and plugins
+import "@/shared/common/css/redmond.calendars.picker.css";
+import "@/shared/common/css/ethiopian-date-picker-overrides.css";
+import "@/shared/common/js/jquery.plugin.js";
+import "@/shared/common/js/jquery.calendars.js";
+import "@/shared/common/js/jquery.calendars.plus.js";
+import "@/shared/common/js/jquery.calendars.picker.js";
+import "@/shared/common/js/jquery.calendars.ethiopian.js";
+import "@/shared/common/js/jquery.calendars.ethiopian-am.js";
+
+interface CalendarsDate {
+  toString(): string;
+}
+
+interface CalendarsDateFactory {
+  toJSDate(): Date;
+}
+
+interface CalendarsInstance {
+  newDate: (year: number, month: number, day: number) => CalendarsDateFactory;
+  fromJSDate: (jsDate: Date) => unknown;
+  formatDate: (
+    format: string,
+    date: unknown,
+    settings?: { localNumbers?: boolean },
+  ) => string;
+}
+
+interface CalendarsApi {
+  instance: (calendarType: string, language: string) => CalendarsInstance;
+}
+
+interface CalendarsPickerOptions {
+  calendar: CalendarsInstance;
+  dateFormat: string;
+  onSelect: (dates: CalendarsDate[]) => void;
+}
+
+type CalendarsPickerElement = JQuery<HTMLElement> & {
+  calendarsPicker: (...args: unknown[]) => unknown;
+};
+
+declare global {
+  interface JQueryStatic {
+    calendars: CalendarsApi;
+  }
+}
+
+interface EthiopianDatePickerModalProps {
+  value?: string | Date;
+  onChange: (value: string) => void;
+}
+
+const ETHIOPIAN_UTC_OFFSET_HOURS = 3;
+
+const toEthiopianTimeInput = (date: Date): string => {
+  if (!(date instanceof Date) || isNaN(date.getTime())) {
+    return "00:00";
+  }
+
+  const totalMinutesUtc = date.getUTCHours() * 60 + date.getUTCMinutes();
+  const totalMinutesEthiopian =
+    (totalMinutesUtc + ETHIOPIAN_UTC_OFFSET_HOURS * 60 + 1440) % 1440;
+
+  const hh = Math.floor(totalMinutesEthiopian / 60)
+    .toString()
+    .padStart(2, "0");
+  const mm = (totalMinutesEthiopian % 60).toString().padStart(2, "0");
+
+  return `${hh}:${mm}`;
+};
+
+const getCurrentEthiopianTimeInput = (): string => {
+  return toEthiopianTimeInput(new Date());
+};
+
+/**
+ * Ethiopian 12-hour clock parts. The Ethiopian day starts at 6:00 EAT, so EAT
+ * 6:00 AM is clock 12 (day) and EAT 6:00 PM is clock 12 (night).
+ *
+ * `period` is purely a display concern — the stored value is always derived
+ * from the EAT 24-hour time, so the backend payload is unaffected.
+ */
+type EthiopianClockPeriod = "day" | "night";
+
+interface EthiopianClockParts {
+  hour: number; // 1-12
+  minute: number; // 0-59
+  period: EthiopianClockPeriod;
+}
+
+const ETHIOPIAN_HOUR_OPTIONS = Array.from({ length: 12 }, (_, i) => i + 1);
+
+// EAT 24h "HH:mm" -> Ethiopian 12h clock parts (day starts at 6:00 EAT).
+const eatTimeToEthiopianClock = (eatTime: string): EthiopianClockParts => {
+  const [hhRaw, mmRaw] = (eatTime || "").split(":");
+  const parsedHour = Number(hhRaw);
+  const parsedMinute = Number(mmRaw);
+  const eatHour = Number.isFinite(parsedHour)
+    ? ((parsedHour % 24) + 24) % 24
+    : 0;
+  const minute = Number.isFinite(parsedMinute)
+    ? ((parsedMinute % 60) + 60) % 60
+    : 0;
+
+  const hour = (eatHour + 6) % 12 || 12;
+  const period: EthiopianClockPeriod =
+    eatHour >= 6 && eatHour < 18 ? "day" : "night";
+
+  return { hour, minute, period };
+};
+
+// Ethiopian 12h clock parts -> EAT 24h "HH:mm".
+const ethiopianClockToEatTime = ({
+  hour,
+  minute,
+  period,
+}: EthiopianClockParts): string => {
+  const base = (hour % 12) + 6; // day window: 6..17
+  const eatHour = (period === "night" ? base + 12 : base) % 24;
+  const hh = eatHour.toString().padStart(2, "0");
+  const mm = (((minute % 60) + 60) % 60).toString().padStart(2, "0");
+  return `${hh}:${mm}`;
+};
+
+const normalizeDigits = (value: string): string =>
+  value
+    .replace(/[٠-٩]/g, (digit) => String(digit.charCodeAt(0) - 1632))
+    .replace(/[۰-۹]/g, (digit) => String(digit.charCodeAt(0) - 1776));
+
+const toEthiopianDateInput = (date: Date): string => {
+  if (
+    !(date instanceof Date) ||
+    Number.isNaN(date.getTime()) ||
+    !$ ||
+    !$.calendars
+  ) {
+    return "";
+  }
+
+  try {
+    const calendar = $.calendars.instance("ethiopian", "am");
+    const ethiopianDate = calendar.fromJSDate(
+      new Date(date.getTime() + ETHIOPIAN_UTC_OFFSET_HOURS * 60 * 60 * 1000),
+    );
+
+    return calendar.formatDate("yyyy-mm-dd", ethiopianDate, {
+      localNumbers: false,
+    });
+  } catch {
+    return "";
+  }
+};
+
+const EthiopianDatePickerModal: React.FC<EthiopianDatePickerModalProps> = ({
+  value,
+  onChange,
+}) => {
+  const datePickerRef = useRef<HTMLDivElement>(null);
+  const pickerElementRef = useRef<CalendarsPickerElement | null>(null);
+  const isSyncingRef = useRef(false);
+  const lastSyncedDateRef = useRef<string>("");
+  const onChangeRef = useRef(onChange);
+  const initialValueRef = useRef(value);
+  const [selectedDate, setSelectedDate] = useState<string>("");
+  const [selectedTime, setSelectedTime] = useState<string>(
+    getCurrentEthiopianTimeInput,
+  );
+  const selectedTimeRef = useRef(selectedTime);
+
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+
+  useEffect(() => {
+    selectedTimeRef.current = selectedTime;
+  }, [selectedTime]);
+
+  useEffect(() => {
+    if (!(value instanceof Date) || Number.isNaN(value.getTime())) {
+      return;
+    }
+
+    const nextDate = toEthiopianDateInput(value);
+    // selectedTime is stored as EAT 24h "HH:mm"; the Ethiopian clock shown in
+    // the picker is derived from it via eatTimeToEthiopianClock. Seed it with
+    // EAT 24h here so the picker (and the trigger placeholder) agree.
+    const nextTime = toEthiopianTimeInput(value);
+
+    setSelectedDate(nextDate);
+    setSelectedTime(nextTime);
+
+    if (
+      !pickerElementRef.current ||
+      !$ ||
+      !$.calendars ||
+      !nextDate ||
+      lastSyncedDateRef.current === nextDate
+    ) {
+      return;
+    }
+
+    try {
+      const calendar = $.calendars.instance("ethiopian", "am");
+      const [year, month, day] = nextDate.split("-").map(Number);
+      if (
+        Number.isFinite(year) &&
+        Number.isFinite(month) &&
+        Number.isFinite(day)
+      ) {
+        const ethDate = calendar.newDate(year, month, day);
+        isSyncingRef.current = true;
+        try {
+          pickerElementRef.current.calendarsPicker("setDate", ethDate);
+          lastSyncedDateRef.current = nextDate;
+        } finally {
+          isSyncingRef.current = false;
+        }
+      }
+    } catch {
+      // ignore third-party plugin errors when syncing selection
+    }
+  }, [value]);
+
+  useEffect(() => {
+    if (!$ || !$.calendars || !datePickerRef.current) {
+      return;
+    }
+
+    const pickerHost = datePickerRef.current;
+    const calendar = $.calendars.instance("ethiopian", "am");
+    const picker = $(pickerHost) as unknown as CalendarsPickerElement;
+    pickerElementRef.current = picker;
+
+    picker.calendarsPicker({
+      calendar,
+      dateFormat: "yyyy-mm-dd",
+      onSelect: (dates: CalendarsDate[]) => {
+        if (isSyncingRef.current) return;
+        if (!dates?.length) return;
+
+        const date = dates[0].toString();
+        lastSyncedDateRef.current = date;
+        setSelectedDate(date);
+        onChangeRef.current(`${date} ${selectedTimeRef.current}`);
+      },
+    } as CalendarsPickerOptions);
+
+    const initialValue = initialValueRef.current;
+    if (initialValue instanceof Date && !Number.isNaN(initialValue.getTime())) {
+      try {
+        const initialEth = toEthiopianDateInput(initialValue);
+        if (initialEth) {
+          const [y, m, d] = initialEth.split("-").map(Number);
+          if (Number.isFinite(y) && Number.isFinite(m) && Number.isFinite(d)) {
+            isSyncingRef.current = true;
+            try {
+              picker.calendarsPicker("setDate", calendar.newDate(y, m, d));
+              lastSyncedDateRef.current = initialEth;
+            } finally {
+              isSyncingRef.current = false;
+            }
+          }
+        }
+      } catch {
+        // ignore third-party plugin errors when seeding initial date
+      }
+    }
+
+    return () => {
+      try {
+        picker.calendarsPicker("destroy");
+      } catch {
+        // ignore cleanup errors from third-party plugin
+      }
+      pickerElementRef.current = null;
+      lastSyncedDateRef.current = "";
+    };
+  }, []);
+
+  // selectedTime is always EAT 24h "HH:mm"; the Ethiopian clock is a display-only
+  // projection so the stored value (and backend payload) stays unchanged.
+  const ethiopianClock = eatTimeToEthiopianClock(selectedTime);
+
+  const applyEthiopianClock = (next: EthiopianClockParts) => {
+    const eatTime = ethiopianClockToEatTime(next);
+    setSelectedTime(eatTime);
+
+    if (selectedDate) {
+      onChange(`${selectedDate} ${eatTime}`);
+    }
+  };
+
+  const handleHourChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const hour = Number(e.target.value);
+    applyEthiopianClock({
+      ...ethiopianClock,
+      hour: Number.isFinite(hour) ? hour : ethiopianClock.hour,
+    });
+  };
+
+  const handleMinuteChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const parsed = Number(e.target.value);
+    const minute = Number.isFinite(parsed)
+      ? Math.max(0, Math.min(59, Math.trunc(parsed)))
+      : 0;
+    applyEthiopianClock({ ...ethiopianClock, minute });
+  };
+
+  const handlePeriodChange = (period: EthiopianClockPeriod) => {
+    applyEthiopianClock({ ...ethiopianClock, period });
+  };
+
+  return (
+    <div className="ethiopian-picker-surface w-full space-y-3">
+      <div
+        ref={datePickerRef}
+        className="ethiopian-picker-calendar w-full overflow-hidden rounded-md border border-gray-200 dark:border-gray-700"
+      />
+      <div className="space-y-1">
+        <p className="text-xs font-medium text-gray-600 dark:text-gray-300">
+          ሰዓት
+        </p>
+        <div className="flex items-center gap-2">
+          <select
+            aria-label="ሰዓት"
+            className="h-10 flex-1 rounded-md border border-gray-300 bg-white px-2 text-sm text-gray-800 shadow-sm transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+            value={ethiopianClock.hour}
+            onChange={handleHourChange}>
+            {ETHIOPIAN_HOUR_OPTIONS.map((h) => (
+              <option key={h} value={h}>
+                {h}
+              </option>
+            ))}
+          </select>
+          <span className="text-sm font-medium text-gray-600 dark:text-gray-300">
+            :
+          </span>
+          <input
+            type="number"
+            min={0}
+            max={59}
+            aria-label="ደቂቃ"
+            className="h-10 w-16 rounded-md border border-gray-300 bg-white px-2 text-center text-sm text-gray-800 shadow-sm transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+            value={ethiopianClock.minute.toString().padStart(2, "0")}
+            onChange={handleMinuteChange}
+          />
+          <div className="flex overflow-hidden rounded-md border border-gray-300 dark:border-gray-600">
+            <button
+              type="button"
+              onClick={() => handlePeriodChange("day")}
+              className={cn(
+                "px-3 py-2 text-sm transition-colors",
+                ethiopianClock.period === "day"
+                  ? "bg-primary text-white"
+                  : "bg-white text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700",
+              )}>
+              ቀን
+            </button>
+            <button
+              type="button"
+              onClick={() => handlePeriodChange("night")}
+              className={cn(
+                "px-3 py-2 text-sm transition-colors",
+                ethiopianClock.period === "night"
+                  ? "bg-primary text-white"
+                  : "bg-white text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700",
+              )}>
+              ሌሊት
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export function convertEthiopianToGregorian(ethiopianDateTime: string): Date {
+  if (!ethiopianDateTime || typeof ethiopianDateTime !== "string") {
+    return new Date(NaN);
+  }
+
+  const normalizedDateTime = normalizeDigits(ethiopianDateTime.trim());
+  const [datePart, timePart = "00:00"] = normalizedDateTime.split(" ");
+
+  if (!datePart || !datePart.match(/^\d{4}-\d{2}-\d{2}$/)) {
+    return new Date(NaN);
+  }
+
+  const cal = $.calendars.instance("ethiopian", "am");
+  const [year, month, day] = datePart.split("-").map(Number);
+
+  if (isNaN(year) || isNaN(month) || isNaN(day)) {
+    return new Date(NaN);
+  }
+
+  try {
+    const ethDate = cal.newDate(year, month, day);
+    const gregDate = ethDate.toJSDate();
+
+    const [hours, minutes] = timePart.split(":").map(Number);
+
+    if (
+      isNaN(hours) ||
+      isNaN(minutes) ||
+      hours < 0 ||
+      hours > 23 ||
+      minutes < 0 ||
+      minutes > 59
+    ) {
+      return new Date(NaN);
+    }
+
+    const utcDate = new Date(
+      Date.UTC(
+        gregDate.getFullYear(),
+        gregDate.getMonth(),
+        gregDate.getDate(),
+        hours - ETHIOPIAN_UTC_OFFSET_HOURS,
+        minutes,
+        0,
+        0,
+      ),
+    );
+
+    return utcDate;
+  } catch (error) {
+    console.error(
+      "[convertEthiopianToGregorian] Error during conversion:",
+      error,
+    );
+    return new Date(NaN);
+  }
+}
+
+export function formatEthiopianDate(ethiopianDate: string | Date): string {
+  if (!ethiopianDate) return "";
+
+  if (ethiopianDate instanceof Date) {
+    const day = ethiopianDate.getDate().toString().padStart(2, "0");
+    const month = (ethiopianDate.getMonth() + 1).toString().padStart(2, "0");
+    const year = ethiopianDate.getFullYear();
+    return `${day}/${month}/${year}`;
+  }
+
+  const parts = ethiopianDate.split("-");
+  if (parts.length !== 3) return ethiopianDate;
+
+  const [year, month, day] = parts;
+  return `${day.padStart(2, "0")}/${month.padStart(2, "0")}/${year}`;
+}
+
+export default EthiopianDatePickerModal;
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/form/fields/DateField.tsx b/apps/edr-freight-web/backoffice/src/shared/common/form/fields/DateField.tsx
new file mode 100644
index 000000000..a88fe9996
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/form/fields/DateField.tsx
@@ -0,0 +1,233 @@
+import { useState } from "react";
+import { Control, FieldValues } from "react-hook-form";
+import $ from "@/shared/common/jquery-global";
+import { FormField, FormItem, FormLabel, FormMessage } from "../../ui/form";
+import EthiopianDatePickerModal, {
+  convertEthiopianToGregorian,
+} from "./AmharicDatePicker";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover";
+import { Button } from "../../ui/button";
+import { cn } from "@/shared/lib/utils";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { Calendar } from "../../ui/calendar";
+import { Input } from "../../ui/input";
+import { useTranslation } from "react-i18next";
+import {
+  formatEthiopianClockTime,
+  utcToEthiopian,
+} from "@/shared/common/utils/ethiopianTimeZone";
+
+interface DateFieldProps {
+  name: "startDate" | "endDate";
+  label: string;
+  control: Control<FieldValues>;
+  isEthiopian: boolean;
+  minDate?: Date | null;
+}
+
+interface EthiopianCalendarFormatter {
+  fromJSDate: (jsDate: Date) => unknown;
+  formatDate: (
+    format: string,
+    date: unknown,
+    settings?: { localNumbers?: boolean },
+  ) => string;
+}
+
+const DateField: React.FC<DateFieldProps> = ({
+  name,
+  label,
+  control,
+  isEthiopian,
+  minDate,
+}) => {
+  const [gregorianTimeFallback, setGregorianTimeFallback] = useState<string>(
+    () => format(new Date(), "HH:mm"),
+  );
+  const { t } = useTranslation();
+
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field }) => {
+        const getGregorianTimeValue = (): string => {
+          if (
+            field.value instanceof Date &&
+            !Number.isNaN(field.value.getTime())
+          ) {
+            return format(field.value, "HH:mm");
+          }
+          return gregorianTimeFallback;
+        };
+
+        const handleEthiopianChange = (ethiopianDate: string) => {
+          const gregorianDate = convertEthiopianToGregorian(ethiopianDate);
+          if (!Number.isNaN(gregorianDate.getTime())) {
+            field.onChange(gregorianDate);
+          }
+        };
+
+        const getDisplayText = (): string => {
+          if (isEthiopian) {
+            if (
+              field.value instanceof Date &&
+              !Number.isNaN(field.value.getTime())
+            ) {
+              const ethiopianTime = utcToEthiopian(field.value);
+              const timeStr = formatEthiopianClockTime(field.value);
+
+              try {
+                const ethiopianCalendar = $.calendars.instance(
+                  "ethiopian",
+                  "am",
+                ) as unknown as EthiopianCalendarFormatter;
+                const ethiopianDate =
+                  ethiopianCalendar.fromJSDate(ethiopianTime);
+                const dateStr = ethiopianCalendar.formatDate(
+                  "yyyy-mm-dd",
+                  ethiopianDate,
+                  { localNumbers: true },
+                );
+                return `${dateStr} ${timeStr}`;
+              } catch {
+                const fallbackDate = format(ethiopianTime, "yyyy-MM-dd");
+                return `${fallbackDate} ${timeStr}`;
+              }
+            }
+            return t("delegation.pickDate");
+          }
+          if (
+            field.value instanceof Date &&
+            !Number.isNaN(field.value.getTime())
+          ) {
+            const dateText = format(field.value, "PPP");
+            const timeText = format(field.value, "HH:mm");
+            return `${dateText} ${timeText}`;
+          }
+          return t("delegation.pickDate");
+        };
+
+        return (
+          <FormItem className="flex flex-col gap-2">
+            <FormLabel className="text-base font-medium text-gray-700 dark:text-gray-200">
+              {label}
+            </FormLabel>
+
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  className={cn(
+                    "group h-11 w-full justify-between rounded-md border border-gray-300 bg-white px-3 text-left text-base font-normal shadow-sm transition-colors hover:bg-gray-50 focus-visible:ring-2 focus-visible:ring-primary/30 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-100",
+                    !field.value && "text-gray-500 dark:text-gray-400",
+                  )}>
+                  <span className="truncate">{getDisplayText()}</span>
+                  <CalendarIcon className="ml-3 h-4 w-4 shrink-0 text-gray-500 transition-colors group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-200" />
+                </Button>
+              </PopoverTrigger>
+
+              <PopoverContent
+                className="w-auto max-w-[95vw] overflow-x-auto rounded-lg border border-gray-200 bg-white p-3 shadow-xl dark:border-gray-700 dark:bg-gray-900"
+                side="bottom"
+                align="start"
+                sideOffset={8}
+                avoidCollisions={false}>
+                {isEthiopian ? (
+                  <div className="flex min-w-[20rem] flex-col gap-2">
+                    <EthiopianDatePickerModal
+                      value={field.value}
+                      onChange={handleEthiopianChange}
+                    />
+                  </div>
+                ) : (
+                  <div className="min-w-[20rem] space-y-3">
+                    <Calendar
+                      mode="single"
+                      selected={
+                        field.value instanceof Date &&
+                        !Number.isNaN(field.value.getTime())
+                          ? field.value
+                          : undefined
+                      }
+                      defaultMonth={
+                        field.value instanceof Date &&
+                        !Number.isNaN(field.value.getTime())
+                          ? field.value
+                          : minDate instanceof Date &&
+                              !Number.isNaN(minDate.getTime())
+                            ? minDate
+                            : undefined
+                      }
+                      onSelect={(selectedDate) => {
+                        if (!selectedDate) {
+                          field.onChange(null);
+                          return;
+                        }
+
+                        const [hours, minutes] = getGregorianTimeValue()
+                          .split(":")
+                          .map(Number);
+                        const nextDate = new Date(selectedDate);
+                        nextDate.setHours(hours || 0, minutes || 0, 0, 0);
+                        field.onChange(nextDate);
+                      }}
+                      initialFocus
+                      className="w-full p-2"
+                      disabled={(date) => {
+                        const startOfToday = new Date(
+                          new Date().setHours(0, 0, 0, 0),
+                        );
+                        if (date < startOfToday) return true;
+                        if (
+                          minDate instanceof Date &&
+                          !Number.isNaN(minDate.getTime())
+                        ) {
+                          const startOfMin = new Date(minDate);
+                          startOfMin.setHours(0, 0, 0, 0);
+                          if (date < startOfMin) return true;
+                        }
+                        return false;
+                      }}
+                    />
+                    <div className="space-y-1 px-2 pb-1">
+                      <p className="text-xs font-medium text-gray-600 dark:text-gray-300">
+                        {t("common.Time", "Time")}
+                      </p>
+                      <Input
+                        type="time"
+                        value={getGregorianTimeValue()}
+                        onChange={(event) => {
+                          const newTime = event.target.value;
+                          setGregorianTimeFallback(newTime);
+
+                          if (
+                            field.value instanceof Date &&
+                            !Number.isNaN(field.value.getTime())
+                          ) {
+                            const [hours, minutes] = newTime
+                              .split(":")
+                              .map(Number);
+                            const nextDate = new Date(field.value);
+                            nextDate.setHours(hours || 0, minutes || 0, 0, 0);
+                            field.onChange(nextDate);
+                          }
+                        }}
+                        className="h-10"
+                      />
+                    </div>
+                  </div>
+                )}
+              </PopoverContent>
+            </Popover>
+
+            <FormMessage className="text-sm" />
+          </FormItem>
+        );
+      }}
+    />
+  );
+};
+
+export default DateField;
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/form/fields/DateTimeField.tsx b/apps/edr-freight-web/backoffice/src/shared/common/form/fields/DateTimeField.tsx
new file mode 100644
index 000000000..dc244cc10
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/form/fields/DateTimeField.tsx
@@ -0,0 +1,242 @@
+import { useState } from "react";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "../../ui/form";
+import EthiopianDatePickerModal, {
+  convertEthiopianToGregorian,
+} from "./AmharicDatePicker";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover";
+import { Button } from "../../ui/button";
+import { Input } from "../../ui/input";
+import { cn } from "@/shared/lib/utils";
+import { format } from "date-fns";
+import { CalendarIcon, Clock } from "lucide-react";
+import { Calendar } from "../../ui/calendar";
+import { useTranslation } from "react-i18next";
+import $ from "@/shared/common/jquery-global";
+import {
+  formatEthiopianClockTime,
+  utcToEthiopian,
+} from "@/shared/common/utils/ethiopianTimeZone";
+
+interface DateTimeFieldProps {
+  name: "startDate" | "endDate";
+  label: string;
+  control: any;
+  isEthiopian: boolean;
+  isEditing: boolean;
+  fieldValue?: Date | null;
+}
+
+interface EthiopianCalendarFormatter {
+  fromJSDate: (jsDate: Date) => unknown;
+  formatDate: (
+    format: string,
+    date: unknown,
+    settings?: { localNumbers?: boolean },
+  ) => string;
+}
+
+const DateTimeField: React.FC<DateTimeFieldProps> = ({
+  name,
+  label,
+  control,
+  isEthiopian,
+  isEditing,
+  fieldValue,
+}) => {
+  const [ethiopianDisplay, setEthiopianDisplay] = useState<string | null>("");
+  const [showTimeInput, setShowTimeInput] = useState(false);
+  const { t } = useTranslation();
+
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field }) => {
+        const handleEthiopianChange = (ethiopianDate: string) => {
+          setEthiopianDisplay(ethiopianDate);
+          const gregorianDate = convertEthiopianToGregorian(ethiopianDate);
+          field.onChange(gregorianDate);
+        };
+
+        const handleTimeChange = (hours: string, minutes: string) => {
+          if (field.value) {
+            const date = new Date(field.value);
+            date.setHours(parseInt(hours) || 0, parseInt(minutes) || 0, 0, 0);
+            field.onChange(date);
+          }
+        };
+
+        const getTimeString = () => {
+          if (!field.value) return "";
+          const date = new Date(field.value);
+          const hours = String(date.getHours()).padStart(2, "0");
+          const minutes = String(date.getMinutes()).padStart(2, "0");
+          return `${hours}:${minutes}`;
+        };
+
+        const getDateTimeDisplay = () => {
+          if (!field.value) return t("delegation.pickDate");
+          const date = new Date(field.value);
+          if (Number.isNaN(date.getTime())) return t("delegation.pickDate");
+          const timeStr = isEthiopian
+            ? formatEthiopianClockTime(date)
+            : getTimeString();
+
+          const dateStr = (() => {
+            if (!isEthiopian) return format(date, "PPP");
+            if (ethiopianDisplay) return ethiopianDisplay.split(" ")[0];
+
+            try {
+              const ethiopianCalendar = $.calendars.instance(
+                "ethiopian",
+                "am",
+              ) as unknown as EthiopianCalendarFormatter;
+              const ethiopianDate = ethiopianCalendar.fromJSDate(
+                utcToEthiopian(date),
+              );
+              return ethiopianCalendar.formatDate(
+                "yyyy-mm-dd",
+                ethiopianDate,
+                { localNumbers: true },
+              );
+            } catch {
+              return format(utcToEthiopian(date), "yyyy-MM-dd");
+            }
+          })();
+          return `${dateStr} ${timeStr}`;
+        };
+
+        return (
+          <FormItem className="flex flex-col gap-2">
+            <FormLabel className="text-base font-medium text-gray-700">
+              {label}
+            </FormLabel>
+
+            <Popover>
+              <PopoverTrigger asChild>
+                <FormControl>
+                  <Button
+                    variant="outline"
+                    className={cn(
+                      "w-full justify-between px-3 py-2 text-left font-normal text-base",
+                      !field.value && "text-muted-foreground",
+                    )}
+                  >
+                    {getDateTimeDisplay()}
+                    <CalendarIcon className="ml-2 h-4 w-4 text-gray-500" />
+                  </Button>
+                </FormControl>
+              </PopoverTrigger>
+
+              <PopoverContent
+                className="w-auto max-w-[95vw] overflow-x-auto p-4"
+                side="bottom"
+                align="start"
+                avoidCollisions={false}
+              >
+                <div className="min-w-[20rem] space-y-4">
+                  {/* Date Picker */}
+                  {isEthiopian ? (
+                    <div className="flex flex-col gap-2">
+                      <FormControl>
+                        <EthiopianDatePickerModal
+                          value={field.value}
+                          onChange={handleEthiopianChange}
+                        />
+                      </FormControl>
+                    </div>
+                  ) : (
+                    <Calendar
+                      mode="single"
+                      selected={field.value}
+                      onSelect={field.onChange}
+                      initialFocus
+                      disabled={(date) =>
+                        date < new Date(new Date().setHours(0, 0, 0, 0))
+                      }
+                    />
+                  )}
+
+                  {/* Time Picker — Ethiopian mode uses the Ethiopian-clock
+                      picker inside EthiopianDatePickerModal above, so this
+                      Gregorian-local time picker is only shown otherwise. */}
+                  {!isEthiopian && field.value && (
+                    <div className="border-t pt-4">
+                      <div className="flex items-center gap-2 mb-3">
+                        <Clock className="h-4 w-4 text-gray-500" />
+                        <label className="text-sm font-medium text-gray-700">
+                          {t("delegation.time") || "Time"}
+                        </label>
+                      </div>
+                      <div className="flex gap-2 items-center">
+                        <div className="flex-1">
+                          <label className="text-xs text-gray-600 block mb-1">
+                            {t("delegation.hours") || "Hours"}
+                          </label>
+                          <Input
+                            type="number"
+                            min="0"
+                            max="23"
+                            value={String(
+                              new Date(field.value).getHours(),
+                            ).padStart(2, "0")}
+                            onChange={(e) =>
+                              handleTimeChange(
+                                e.target.value,
+                                String(
+                                  new Date(field.value).getMinutes(),
+                                ).padStart(2, "0"),
+                              )
+                            }
+                            className="text-center text-sm"
+                            placeholder="00"
+                          />
+                        </div>
+                        <div className="flex items-center justify-center pt-6">
+                          :
+                        </div>
+                        <div className="flex-1">
+                          <label className="text-xs text-gray-600 block mb-1">
+                            {t("delegation.minutes") || "Minutes"}
+                          </label>
+                          <Input
+                            type="number"
+                            min="0"
+                            max="59"
+                            value={String(
+                              new Date(field.value).getMinutes(),
+                            ).padStart(2, "0")}
+                            onChange={(e) =>
+                              handleTimeChange(
+                                String(
+                                  new Date(field.value).getHours(),
+                                ).padStart(2, "0"),
+                                e.target.value,
+                              )
+                            }
+                            className="text-center text-sm"
+                            placeholder="00"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </PopoverContent>
+            </Popover>
+
+            <FormMessage />
+          </FormItem>
+        );
+      }}
+    />
+  );
+};
+
+export default DateTimeField;
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/form/fields/EthiopianDatePicker.tsx b/apps/edr-freight-web/backoffice/src/shared/common/form/fields/EthiopianDatePicker.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/form/fields/FormFields.tsx b/apps/edr-freight-web/backoffice/src/shared/common/form/fields/FormFields.tsx
new file mode 100644
index 000000000..55b5524a1
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/form/fields/FormFields.tsx
@@ -0,0 +1,806 @@
+import React, { JSX, useRef, useState } from "react";
+import { Trash2, X, ChevronDown, Search } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "../../ui/form";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../ui/select";
+import { MultiSelect } from "../../ui/multi-select";
+import { Input } from "../../ui/input";
+import { Button } from "../../ui/button";
+import TreeView, { TreeViewItem } from "@/shared/common/ui/treeSelect";
+
+import { Controller } from "react-hook-form";
+import { SingleSelect } from "../../ui/single-select";
+import { useLocalizedName } from "../../localizedName";
+import i18next from "i18next";
+import { getCheckedLeafNodes } from "@/record-management/components/userRecords/common/treeUtils";
+
+type BaseSelectOption = {
+  label: string;
+  value: string;
+  unitId?: string;
+};
+interface CustomSelectProps {
+  form: any; // your react-hook-form instance
+  name: string;
+  label: string;
+  placeholder: string;
+  options: { id: string; name: { en: string; am: string } }[];
+  localizedName: (name: { en: string; am: string }) => string;
+}
+
+// 1️⃣ Form Select Field
+export const FormSelectField = ({
+  control,
+  name,
+  label,
+  options,
+  placeholder,
+  className,
+  customLabel,
+  disabled,
+  onCustomChange,
+}: {
+  control: any;
+  name: string;
+  label: string;
+  options: BaseSelectOption[];
+  placeholder?: string;
+  className?: string;
+  customLabel?: React.ReactNode;
+  disabled?: boolean;
+  onCustomChange?: (value: string) => void;
+}) => (
+  <FormField
+    control={control}
+    name={name}
+    render={({ field }) => (
+      <FormItem className={className || "space-y-1"}>
+        {customLabel ? (
+          customLabel
+        ) : (
+          <FormLabel>
+            {name === "headerId" ||
+            name === "footerId" ||
+            name === "recordType" ||
+            name === "initiationType" ||
+            name === "initiatedAs" ? (
+              <span>
+                {label} <span className="text-red-500 text-xl">*</span>
+              </span>
+            ) : (
+              label
+            )}
+          </FormLabel>
+        )}
+        <FormControl>
+          <Select
+            value={field.value ?? ""}
+            disabled={disabled}
+            onValueChange={(value) => {
+              field.onChange(value);
+              onCustomChange?.(value);
+            }}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder={placeholder} />
+            </SelectTrigger>
+            <SelectContent className="w-full max-w-full sm:max-w-md z-[60] overflow-x-auto">
+              {options.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    )}
+  />
+);
+
+export const FormSingleSelectField = ({
+  control,
+  name,
+  label,
+  options,
+  placeholder = "Select option",
+  onCustomChange,
+}: {
+  control: any;
+  name: string;
+  label: string;
+  options: BaseSelectOption[];
+  placeholder?: string;
+  onCustomChange?: (selectedValue: string) => void;
+}) => (
+  <FormField
+    control={control}
+    name={name}
+    render={({ field }) => {
+      const handleChange = (value: string) => {
+        field.onChange(value);
+        if (onCustomChange) onCustomChange(value);
+      };
+
+      return (
+        <FormItem className="space-y-1">
+          <FormLabel>{label}</FormLabel>
+          <FormControl>
+            <SingleSelect
+              options={options}
+              value={field.value || ""}
+              onValueChange={handleChange}
+              placeholder={placeholder}
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      );
+    }}
+  />
+);
+// 2️⃣ Multi Select Field
+export const FormMultiSelectField = ({
+  control,
+  name,
+  label,
+  options,
+  placeholder = "Select options",
+  maxCount,
+  disabled,
+  onCustomChange,
+}: {
+  control: any;
+  name: string;
+  label: string;
+  options: BaseSelectOption[];
+  placeholder?: string;
+  maxCount?: number;
+  disabled?: boolean;
+  onCustomChange?: (selectedValues: string[]) => void;
+}) => (
+  <FormField
+    control={control}
+    name={name}
+    render={({ field }) => {
+      const handleChange = (values: string[]) => {
+        field.onChange(values);
+        if (onCustomChange) onCustomChange(values);
+      };
+
+      const fieldValue = Array.isArray(field.value)
+        ? field.value
+        : field.value
+          ? [field.value]
+          : [];
+
+      return (
+        <FormItem className="space-y-1">
+          <FormLabel>
+            {name === "toPositions" ||
+             name === "toEmployees" ||
+             name === "collaborators" ||
+             name === "receivingDepartments" ||
+             name === "assignedEmployees" ? (
+              <span>
+                {label} <span className="text-red-500 text-xl">*</span>
+              </span>
+            ) : (
+              label
+            )}
+          </FormLabel>
+          <FormControl>
+            <MultiSelect
+              options={options}
+              value={fieldValue} // controlled value
+              onValueChange={handleChange} // controlled onChange
+              placeholder={placeholder}
+              maxCount={maxCount || 5}
+              disabled={disabled}
+              className="w-full max-w-full sm:max-w-md overflow-x-auto"
+              animation={0}
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      );
+    }}
+  />
+);
+
+export const FormTreeSelectField = ({
+  control,
+  name,
+  label,
+  options,
+  handleCheckChange,
+  collapsible = false,
+  localizedName,
+  selectedCountResolver,
+}: {
+  control: any;
+  name: string;
+  label: string;
+  options: TreeViewItem[];
+  handleCheckChange?:
+    | ((item: TreeViewItem | TreeViewItem[], checked: boolean) => void)
+    | undefined;
+  collapsible?: boolean;
+  localizedName: (
+    name?:
+      | {
+          am: string;
+          en: string;
+        }
+      | undefined,
+  ) => string;
+  selectedCountResolver?: (value: unknown) => number;
+}) => {
+  const { t } = useTranslation();
+  const [isOpen, setIsOpen] = React.useState(!collapsible);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  // Close dropdown on outside click
+  React.useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  if (collapsible) {
+    return (
+      <FormField
+        control={control}
+        name={name}
+        rules={{ required: `${label} is required` }}
+        render={({ field }) => {
+          const selectedCount = selectedCountResolver
+            ? selectedCountResolver(field.value)
+            : getCheckedLeafNodes(Array.isArray(field.value) ? field.value : [])
+                .length;
+
+          return (
+            <FormItem
+              ref={containerRef}
+              className="sm:col-span-3 w-full min-w-0 max-w-full"
+            >
+              <FormLabel>
+                {name === "receivingUnitIds" ? (
+                  <span>
+                    {label} <span className="text-red-500 text-xl">*</span>
+                  </span>
+                ) : (
+                  label
+                )}
+              </FormLabel>
+              <div className="relative w-full min-w-0 max-w-full">
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => setIsOpen(!isOpen)}
+                  className="h-auto min-h-10 w-full max-w-full justify-between gap-2 py-2"
+                >
+                  <span className="block min-w-0 flex-1 truncate text-left">
+                    {selectedCount > 0
+                      ? `${selectedCount} unit(s) selected`
+                      : `${t("common.select")} ${label}`}
+                  </span>
+                  <ChevronDown
+                    className={`h-4 w-4 shrink-0 transition-transform ${
+                      isOpen ? "rotate-180" : ""
+                    }`}
+                  />
+                </Button>
+
+                {isOpen && (
+                  <div className="absolute left-0 right-0 z-50 mt-1 w-full min-w-0 max-w-full overflow-hidden rounded-md border bg-background p-2 shadow-md">
+                    <TreeView
+                      embedded
+                      className="max-h-[55vh] overflow-y-auto sm:max-h-[450px]"
+                      data={options}
+                      showExpandAll={false}
+                      showCheckboxes
+                      onCheckChange={handleCheckChange}
+                      localizedName={localizedName}
+                    />
+                  </div>
+                )}
+              </div>
+              <FormMessage />
+            </FormItem>
+          );
+        }}
+      />
+    );
+  }
+
+  return (
+    <FormField
+      control={control}
+      name={name}
+      rules={{ required: `${label} is required` }}
+      render={() => (
+        <FormItem className="sm:col-span-3 w-full min-w-0">
+          <FormLabel>{label}</FormLabel>
+          <TreeView
+            className="max-h-[55vh] overflow-y-auto sm:max-h-[450px]"
+            data={options}
+            showExpandAll={false}
+            showCheckboxes
+            onCheckChange={handleCheckChange}
+            localizedName={localizedName}
+          />
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};
+
+// 3️⃣ Addable List Field (string-based)
+export const FormAddableList = ({
+  form,
+  name,
+  label,
+  placeholder = "",
+  valueAdapter,
+}: {
+  form: any;
+  name: string;
+  label: string;
+  placeholder?: string;
+  valueAdapter?: {
+    getDisplayItems: (fieldValue: unknown) => string[];
+    onItemsChange: (items: string[], fieldValue: unknown) => unknown;
+  };
+}) => {
+  const { t } = useTranslation();
+  const [pendingValue, setPendingValue] = useState("");
+
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={({ field }) => {
+        const items = valueAdapter
+          ? valueAdapter.getDisplayItems(field.value)
+          : Array.isArray(field.value)
+            ? field.value
+            : [];
+
+        const handleAdd = () => {
+          const value = pendingValue.trim();
+          if (value && !items.includes(value)) {
+            const updatedItems = [...items, value];
+            field.onChange(
+              valueAdapter
+                ? valueAdapter.onItemsChange(updatedItems, field.value)
+                : updatedItems,
+            );
+            setPendingValue("");
+          }
+        };
+
+        const handleDelete = (index: number) => {
+          const updatedItems = items.filter(
+            (_: string, i: number) => i !== index,
+          );
+          field.onChange(
+            valueAdapter
+              ? valueAdapter.onItemsChange(updatedItems, field.value)
+              : updatedItems,
+          );
+        };
+
+        const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            handleAdd();
+          }
+        };
+
+        return (
+          <FormItem className="space-y-2">
+            <FormLabel>{label}</FormLabel>
+            <div className="flex flex-col sm:flex-row gap-2">
+              <FormControl className="flex-1">
+                <Input
+                  placeholder={placeholder}
+                  value={pendingValue}
+                  onChange={(e) => setPendingValue(e.target.value)}
+                  onKeyDown={handleKeyDown}
+                  onBlur={handleAdd}
+                />
+              </FormControl>
+              <Button
+                type="button"
+                onClick={handleAdd}
+                className="bg-primary-500 text-white hover:bg-primary-600"
+              >
+                {t("addRecord.Add")}
+              </Button>
+            </div>
+
+            {items.length > 0 && (
+              <div className="flex flex-wrap gap-1 mt-2">
+                {items.map((unit: string, index: number) => (
+                  <div
+                    key={`${unit}-${index}`}
+                    className="flex items-center gap-1 px-2 py-1 bg-blue-50 text-blue-700 border border-blue-100 rounded-md"
+                  >
+                    <span className="text-sm truncate max-w-[200px]">
+                      {unit}
+                    </span>
+                    <X
+                      size={14}
+                      className="cursor-pointer text-blue-700 hover:text-red-600 ml-1"
+                      onClick={() => handleDelete(index)}
+                    />
+                  </div>
+                ))}
+              </div>
+            )}
+
+            <FormMessage />
+          </FormItem>
+        );
+      }}
+    />
+  );
+};
+export const ClearableSelect = ({
+  form,
+  name,
+  label,
+  placeholder = "",
+  options,
+  localizedName,
+}: {
+  form: any;
+  name: string;
+  label: string;
+  placeholder?: string;
+  options: { id: string; name: any }[];
+  localizedName: (name: any) => string;
+}) => {
+  return (
+    <FormItem className="space-y-2">
+      <FormLabel>{label}</FormLabel>
+      <FormField
+        control={form.control}
+        name={name}
+        render={({ field }) => (
+          <>
+            {field.value ? (
+              // Selected value with X to clear
+              <div className="flex items-center justify-between border text-sm rounded-md px-3 py-2 bg-gray-50">
+                <span>
+                  {localizedName(
+                    options.find((o) => o.id === field.value)?.name,
+                  )}
+                </span>
+                <X
+                  size={17}
+                  className="cursor-pointer text-blue-700 hover:text-red-600 ml-1"
+                  onClick={() => field.onChange("")}
+                />
+              </div>
+            ) : (
+              // Select dropdown
+              <Select
+                value={field.value}
+                onValueChange={field.onChange}
+                defaultValue={field.value}
+              >
+                <FormControl>
+                  <SelectTrigger className="w-full">
+                    <SelectValue placeholder={placeholder} />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent className="w-full max-w-full sm:max-w-md z-[60] overflow-x-auto">
+                  {options?.map((item) => (
+                    <SelectItem key={item.id} value={item.id}>
+                      {localizedName(item.name)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+            <FormMessage />
+          </>
+        )}
+      />
+    </FormItem>
+  );
+};
+
+export const CustomSelect = ({
+  form,
+  name,
+  label,
+  placeholder,
+  options,
+  localizedName,
+}: CustomSelectProps) => {
+  const { t } = useTranslation();
+  return (
+    <div className="flex flex-col gap-1">
+      <label className="text-sm font-medium">{label}</label>
+      <Controller
+        control={form.control}
+        name={name}
+        render={({ field }) => {
+          const matchingOption = options.find((opt) => {
+            const english = opt.name?.en ?? "";
+            const amharic = opt.name?.am ?? "";
+            return (
+              field.value === opt.id ||
+              field.value === english ||
+              field.value === amharic
+            );
+          });
+
+          // Treat undefined, null, and empty string as no selection
+          const hasValue = field.value !== undefined && field.value !== null && field.value !== "";
+          const resolvedValue = matchingOption && hasValue
+            ? matchingOption.id
+            : "";
+
+          return (
+            <Select
+              value={resolvedValue}
+              onValueChange={(val) => {
+                if (val === "__clear__" || val === "") {
+                  field.onChange("");
+                } else {
+                  field.onChange(val);
+                }
+              }}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder={placeholder} />
+              </SelectTrigger>
+              <SelectContent>
+                {options.map((opt) => (
+                  <SelectItem key={opt.id} value={opt.id}>
+                    {localizedName(opt.name)}
+                  </SelectItem>
+                ))}
+                <SelectItem value="__clear__">{t("common.Cancel")}</SelectItem>
+              </SelectContent>
+            </Select>
+          );
+        }}
+      />
+    </div>
+  );
+};
+
+export interface TreeViewItemO {
+  id: string;
+  name: string | { en: string; am: string }; // allow localized or raw
+  value?: string;
+  children?: TreeViewItem[];
+}
+
+interface SimpleTreeSelectProps {
+  label: string;
+  options: TreeViewItemO[];
+  value: string | null;
+  onChange: (id: string | null) => void;
+  collapsible?: boolean;
+  localizedName?: (name?: { en?: string; am?: string } | undefined) => string;
+  className?: string;
+}
+
+export const SimpleTreeSelect = ({
+  label,
+  options,
+  value,
+  onChange,
+  collapsible = false,
+  localizedName,
+  className,
+}: SimpleTreeSelectProps) => {
+  const [isOpen, setIsOpen] = useState(!collapsible);
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+
+  const toggleExpand = (id: string) => {
+    const newSet = new Set(expandedItems);
+    if (newSet.has(id)) newSet.delete(id);
+    else newSet.add(id);
+    setExpandedItems(newSet);
+  };
+
+  const handleSelect = (id: string) => {
+    onChange(id);
+    // Optional: close dropdown after selection
+    // setIsOpen(false);
+  };
+
+  // Get full path for a selected item
+  const findSelectedPath = (
+    items: TreeViewItemO[],
+    parentPath: string[] = [],
+  ): string | null => {
+    for (const item of items) {
+      const name =
+        typeof item.name === "string"
+          ? item.name
+          : (localizedName?.(item.name) ?? item.name.en);
+
+      if (item.id === value) {
+        return [...parentPath, name].join(" / ");
+      }
+
+      if (item.children && item.children.length > 0) {
+        const childPath = findSelectedPath(item.children, [
+          ...parentPath,
+          name,
+        ]);
+        if (childPath) return childPath;
+      }
+    }
+    return null;
+  };
+
+  const renderTree = (items: TreeViewItemO[]): JSX.Element[] => {
+    return items.flatMap((item) => {
+      const hasChildren = item.children && item.children.length > 0;
+      const isExpanded = expandedItems.has(item.id);
+
+      // Determine if any child is selected to highlight parent
+      const isParentSelected = hasChildren
+        ? item.children!.some((child) => child.id === value)
+        : false;
+
+      // Skip single-unit org
+      if (hasChildren && item.children!.length === 1) {
+        return renderTree(item.children!);
+      }
+
+      const itemLabel =
+        typeof item.name === "string"
+          ? item.name
+          : (localizedName?.(item.name) ?? item.name.en);
+
+      return (
+        <div key={item.id} className="ml-4 mb-1">
+          <div className="flex items-center space-x-2">
+            {hasChildren && (
+              <button
+                type="button"
+                onClick={() => toggleExpand(item.id)}
+                className="w-4 h-4 flex items-center justify-center"
+              >
+                <ChevronDown
+                  className={`h-3 w-3 transition-transform ${
+                    isExpanded ? "rotate-180" : ""
+                  }`}
+                />
+              </button>
+            )}
+
+            <label className="flex items-center space-x-2">
+              <input
+                type="radio"
+                name="unit-select"
+                checked={value === item.id || isParentSelected}
+                onChange={() => handleSelect(item.id)}
+              />
+              <span className={isParentSelected ? "font-semibold" : ""}>
+                {itemLabel}
+              </span>
+            </label>
+          </div>
+
+          {hasChildren && isExpanded && (
+            <div className="ml-4">{renderTree(item.children!)}</div>
+          )}
+        </div>
+      );
+    });
+  };
+
+  const selectedPathLabel = findSelectedPath(options);
+
+  return (
+    <div className={className ?? "mb-4"}>
+      <label className="block font-semibold mb-1">{label}</label>
+
+      {collapsible && (
+        <Button
+          type="button"
+          variant="outline"
+          onClick={() => setIsOpen(!isOpen)}
+          className="w-full max-w-lg justify-between mb-2"
+        >
+          <span className="truncate">
+            {selectedPathLabel ?? label}
+          </span>
+          <ChevronDown
+            className={`h-4 w-4 transition-transform ${
+              isOpen ? "rotate-180" : ""
+            }`}
+          />
+        </Button>
+      )}
+
+      {isOpen && (
+        <div className="border rounded-md p-2 bg-background max-h-96 overflow-y-auto max-w-lg">
+          {renderTree(options)}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const SelectedItemsChips = ({
+  items,
+  onRemove,
+  label,
+  localizedName,
+}: {
+  items: TreeViewItem[];
+  onRemove: (value: string) => void;
+  label?: string;
+  localizedName: (
+    name?:
+      | {
+          am: string;
+          en: string;
+        }
+      | undefined,
+  ) => string;
+}) => {
+  if (!items?.length) return null;
+
+  return (
+    <div className="grid gap-2 sm:col-span-3">
+      {label && <p className="text-sm font-semibold mb-2">{label}</p>}
+      <div className="flex flex-wrap gap-2">
+        {items.map((item) => (
+          <div
+            key={item.id}
+            className="flex items-center bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm"
+          >
+            <span className="truncate max-w-[180px]">
+              {localizedName(item.name)}
+            </span>
+            <button
+              type="button"
+              className="ml-2 text-red-500 hover:text-red-700"
+              onClick={() => {
+                onRemove(item.id);
+              }}
+            >
+              ×
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/img/calendar-blue.gif b/apps/edr-freight-web/backoffice/src/shared/common/img/calendar-blue.gif
new file mode 100644
index 000000000..601cbd55d
Binary files /dev/null and b/apps/edr-freight-web/backoffice/src/shared/common/img/calendar-blue.gif differ
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/img/calendar-green.gif b/apps/edr-freight-web/backoffice/src/shared/common/img/calendar-green.gif
new file mode 100644
index 000000000..9dae1a3b2
Binary files /dev/null and b/apps/edr-freight-web/backoffice/src/shared/common/img/calendar-green.gif differ
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/img/calendar.gif b/apps/edr-freight-web/backoffice/src/shared/common/img/calendar.gif
new file mode 100644
index 000000000..d0abaa7c0
Binary files /dev/null and b/apps/edr-freight-web/backoffice/src/shared/common/img/calendar.gif differ
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/img/view.png b/apps/edr-freight-web/backoffice/src/shared/common/img/view.png
new file mode 100644
index 000000000..2660a2289
Binary files /dev/null and b/apps/edr-freight-web/backoffice/src/shared/common/img/view.png differ
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/img/view2.png b/apps/edr-freight-web/backoffice/src/shared/common/img/view2.png
new file mode 100644
index 000000000..cf415098e
Binary files /dev/null and b/apps/edr-freight-web/backoffice/src/shared/common/img/view2.png differ
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/img/view3.png b/apps/edr-freight-web/backoffice/src/shared/common/img/view3.png
new file mode 100644
index 000000000..b9d0e41e2
Binary files /dev/null and b/apps/edr-freight-web/backoffice/src/shared/common/img/view3.png differ
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/img/view4.png b/apps/edr-freight-web/backoffice/src/shared/common/img/view4.png
new file mode 100644
index 000000000..8cf2995c3
Binary files /dev/null and b/apps/edr-freight-web/backoffice/src/shared/common/img/view4.png differ
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/jquery-global.ts b/apps/edr-freight-web/backoffice/src/shared/common/jquery-global.ts
new file mode 100644
index 000000000..31dfa8831
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/jquery-global.ts
@@ -0,0 +1,7 @@
+import jQuery from "jquery";
+
+// Make jQuery global for legacy plugins
+(window as any).jQuery = jQuery;
+(window as any).$ = jQuery;
+
+export default jQuery;
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/js/jquery.calendars.ethiopian-am.ts b/apps/edr-freight-web/backoffice/src/shared/common/js/jquery.calendars.ethiopian-am.ts
new file mode 100644
index 000000000..4be989a5a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/js/jquery.calendars.ethiopian-am.ts
@@ -0,0 +1,46 @@
+import $ from "jquery";
+
+(function ($: any) {
+  "use strict";
+  $.calendars.calendars.ethiopian.prototype.regionalOptions.am = {
+    name: "የኢትዮጵያ ዘመን አቆጣጠር",
+    epochs: ["BEE", "EE"],
+    monthNames: [
+      "መስከረም",
+      "ጥቅምት",
+      "ኅዳር",
+      "ታህሣሥ",
+      "ጥር",
+      "የካቲት",
+      "መጋቢት",
+      "ሚያዝያ",
+      "ግንቦት",
+      "ሰኔ",
+      "ሐምሌ",
+      "ነሐሴ",
+      "ጳጉሜ",
+    ],
+    monthNamesShort: [
+      "መስከ",
+      "ጥቅም",
+      "ኅዳር",
+      "ታህሣ",
+      "ጥር",
+      "የካቲ",
+      "መጋቢ",
+      "ሚያዝ",
+      "ግንቦ",
+      "ሰኔ",
+      "ሐምሌ",
+      "ነሐሴ",
+      "ጳጉሜ",
+    ],
+    dayNames: ["እሑድ", "ሰኞ", "ማክሰኞ", "ረቡዕ", "ሓሙስ", "ዓርብ", "ቅዳሜ"],
+    dayNamesShort: ["እሑድ", "ሰኞ", "ማክሰ", "ረቡዕ", "ሓሙስ", "ዓርብ", "ቅዳሜ"],
+    dayNamesMin: ["እሑ", "ሰኞ", "ማክ", "ረቡ", "ሐሙ", "ዓር", "ቅዳ"],
+    digits: null,
+    dateFormat: "dd/mm/yyyy",
+    firstDay: 0,
+    isRTL: false,
+  };
+})(jQuery);
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/js/jquery.calendars.ethiopian.js b/apps/edr-freight-web/backoffice/src/shared/common/js/jquery.calendars.ethiopian.js
new file mode 100644
index 000000000..76a781f90
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/js/jquery.calendars.ethiopian.js
@@ -0,0 +1,171 @@
+/* http://keith-wood.name/calendars.html
+   Ethiopian calendar for jQuery v2.1.0.
+   Written by Keith Wood (wood.keith{at}optusnet.com.au) February 2010.
+   Available under the MIT (http://keith-wood.name/licence.html) license. 
+   Please attribute the author if you use it. */
+
+(function($) { // Hide scope, no $ conflict
+	'use strict';
+
+	/** Implementation of the Ethiopian calendar.
+		See <a href="http://en.wikipedia.org/wiki/Ethiopian_calendar">http://en.wikipedia.org/wiki/Ethiopian_calendar</a>.
+		See also Calendrical Calculations: The Millennium Edition
+		(<a href="http://emr.cs.iit.edu/home/reingold/calendar-book/index.shtml">http://emr.cs.iit.edu/home/reingold/calendar-book/index.shtml</a>).
+		@class EthiopianCalendar
+		@param {string} [language=''] The language code (default English) for localisation. */
+	function EthiopianCalendar(language) {
+		this.local = this.regionalOptions[language || ''] || this.regionalOptions[''];
+	}
+
+	EthiopianCalendar.prototype = new $.calendars.baseCalendar();
+
+	$.extend(EthiopianCalendar.prototype, {
+		/** The calendar name.
+			@memberof EthiopianCalendar */
+		name: 'Ethiopian',
+		/** Julian date of start of Ethiopian epoch: 27 August 8 CE (Gregorian).
+			@memberof EthiopianCalendar */
+		jdEpoch: 1724220.5,
+		/** Days per month in a common year.
+			@memberof EthiopianCalendar */
+		daysPerMonth: [30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 5],
+		/** <code>true</code> if has a year zero, <code>false</code> if not.
+			@memberof EthiopianCalendar */
+		hasYearZero: false,
+		/** The minimum month number.
+			@memberof EthiopianCalendar */
+		minMonth: 1,
+		/** The first month in the year.
+			@memberof EthiopianCalendar */
+		firstMonth: 1,
+		/** The minimum day number.
+			@memberof EthiopianCalendar */
+		minDay: 1,
+
+		/** Localisations for the plugin.
+			Entries are objects indexed by the language code ('' being the default US/English).
+			Each object has the following attributes.
+			@memberof EthiopianCalendar
+			@property {string} name The calendar name.
+			@property {string[]} epochs The epoch names (before/after year 0).
+			@property {string[]} monthNames The long names of the months of the year.
+			@property {string[]} monthNamesShort The short names of the months of the year.
+			@property {string[]} dayNames The long names of the days of the week.
+			@property {string[]} dayNamesShort The short names of the days of the week.
+			@property {string[]} dayNamesMin The minimal names of the days of the week.
+			@property {string} dateFormat The date format for this calendar.
+					See the options on <a href="BaseCalendar.html#formatDate"><code>formatDate</code></a> for details.
+			@property {number} firstDay The number of the first day of the week, starting at 0.
+			@property {boolean} isRTL <code>true</code> if this localisation reads right-to-left. */
+		regionalOptions: { // Localisations
+			'': {
+				name: 'Ethiopian',
+				epochs: ['BEE', 'EE'],
+				monthNames: ['Meskerem', 'Tikemet', 'Hidar', 'Tahesas', 'Tir', 'Yekatit',
+				'Megabit', 'Miazia', 'Genbot', 'Sene', 'Hamle', 'Nehase', 'Pagume'],
+				monthNamesShort: ['Mes', 'Tik', 'Hid', 'Tah', 'Tir', 'Yek',
+				'Meg', 'Mia', 'Gen', 'Sen', 'Ham', 'Neh', 'Pag'],
+				dayNames: ['Ehud', 'Segno', 'Maksegno', 'Irob', 'Hamus', 'Arb', 'Kidame'],
+				dayNamesShort: ['Ehu', 'Seg', 'Mak', 'Iro', 'Ham', 'Arb', 'Kid'],
+				dayNamesMin: ['Eh', 'Se', 'Ma', 'Ir', 'Ha', 'Ar', 'Ki'],
+				digits: null,
+				dateFormat: 'dd/mm/yyyy',
+				firstDay: 0,
+				isRTL: false
+			}
+		},
+
+		/** Determine whether this date is in a leap year.
+			@memberof EthiopianCalendar
+			@param {CDate|number} year The date to examine or the year to examine.
+			@return {boolean} <code>true</code> if this is a leap year, <code>false</code> if not.
+			@throws Error if an invalid year or a different calendar used. */
+		leapYear: function(year) {
+			var date = this._validate(year, this.minMonth, this.minDay, $.calendars.local.invalidYear);
+			year = date.year() + (date.year() < 0 ? 1 : 0); // No year zero
+			return year % 4 === 3 || year % 4 === -1;
+		},
+
+		/** Retrieve the number of months in a year.
+			@memberof EthiopianCalendar
+			@param {CDate|number} year The date to examine or the year to examine.
+			@return {number} The number of months.
+			@throws Error if an invalid year or a different calendar used. */
+		monthsInYear: function(year) {
+			this._validate(year, this.minMonth, this.minDay,
+				$.calendars.local.invalidYear || $.calendars.regionalOptions[''].invalidYear);
+			return 13;
+		},
+
+		/** Determine the week of the year for a date.
+			@memberof EthiopianCalendar
+			@param {CDate|number} year The date to examine or the year to examine.
+			@param {number} [month] The month to examine (if only <code>year</code> specified above).
+			@param {number} [day] The day to examine (if only <code>year</code> specified above).
+			@return {number} The week of the year.
+			@throws Error if an invalid date or a different calendar used. */
+		weekOfYear: function(year, month, day) {
+			// Find Sunday of this week starting on Sunday
+			var checkDate = this.newDate(year, month, day);
+			checkDate.add(-checkDate.dayOfWeek(), 'd');
+			return Math.floor((checkDate.dayOfYear() - 1) / 7) + 1;
+		},
+
+		/** Retrieve the number of days in a month.
+			@memberof EthiopianCalendar
+			@param {CDate|number} year The date to examine or the year of the month.
+			@param {number} [month] The month (if only <code>year</code> specified above).
+			@return {number} The number of days in this month.
+			@throws Error if an invalid month/year or a different calendar used. */
+		daysInMonth: function(year, month) {
+			var date = this._validate(year, month, this.minDay, $.calendars.local.invalidMonth);
+			return this.daysPerMonth[date.month() - 1] +
+				(date.month() === 13 && this.leapYear(date.year()) ? 1 : 0);
+		},
+
+		/** Determine whether this date is a week day.
+			@memberof EthiopianCalendar
+			@param {CDate|number} year The date to examine or the year to examine.
+			@param {number} [month] The month to examine (if only <code>year</code> specified above).
+			@param {number} [day] The day to examine (if only <code>year</code> specified above).
+			@return {boolean} <code>true</code> if a week day, <code>false</code> if not.
+			@throws Error if an invalid date or a different calendar used. */
+		weekDay: function(year, month, day) {
+			return (this.dayOfWeek(year, month, day) || 7) < 6;
+		},
+
+		/** Retrieve the Julian date equivalent for this date,
+			i.e. days since January 1, 4713 BCE Greenwich noon.
+			@memberof EthiopianCalendar
+			@param {CDate|number} year The date to convert or the year to convert.
+			@param {number} [month] The month to convert (if only <code>year</code> specified above).
+			@param {number} [day] The day to convert (if only <code>year</code> specified above).
+			@return {number} The equivalent Julian date.
+			@throws Error if an invalid date or a different calendar used. */
+		toJD: function(year, month, day) {
+			var date = this._validate(year, month, day, $.calendars.local.invalidDate);
+			year = date.year();
+			if (year < 0) { year++; } // No year zero
+			return date.day() + (date.month() - 1) * 30 +
+				(year - 1) * 365 + Math.floor(year / 4) + this.jdEpoch - 1;
+		},
+
+		/** Create a new date from a Julian date.
+			@memberof EthiopianCalendar
+			@param {number} jd the Julian date to convert.
+			@return {CDate} the equivalent date. */
+		fromJD: function(jd) {
+			var c = Math.floor(jd) + 0.5 - this.jdEpoch;
+			var year = Math.floor((c - Math.floor((c + 366) / 1461)) / 365) + 1;
+			if (year <= 0) { year--; } // No year zero
+			c = Math.floor(jd) + 0.5 - this.newDate(year, 1, 1).toJD();
+			var month = Math.floor(c / 30) + 1;
+			var day = c - (month - 1) * 30 + 1;
+			return this.newDate(year, month, day);
+		}
+	});
+
+	// Ethiopian calendar implementation
+	$.calendars.calendars.ethiopian = EthiopianCalendar;
+
+})(jQuery);
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/js/jquery.calendars.ethiopian.min.js b/apps/edr-freight-web/backoffice/src/shared/common/js/jquery.calendars.ethiopian.min.js
new file mode 100644
index 000000000..f57613797
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/js/jquery.calendars.ethiopian.min.js
@@ -0,0 +1,2 @@
+!function(a){"use strict";function b(a){this.local=this.regionalOptions[a||""]||this.regionalOptions[""]}b.prototype=new a.calendars.baseCalendar,a.extend(b.prototype,{name:"Ethiopian",jdEpoch:1724220.5,daysPerMonth:[30,30,30,30,30,30,30,30,30,30,30,30,5],hasYearZero:!1,minMonth:1,firstMonth:1,minDay:1,regionalOptions:{"":{name:"Ethiopian",epochs:["BEE","EE"],monthNames:["Meskerem","Tikemet","Hidar","Tahesas","Tir","Yekatit","Megabit","Miazia","Genbot","Sene","Hamle","Nehase","Pagume"],monthNamesShort:["Mes","Tik","Hid","Tah","Tir","Yek","Meg","Mia","Gen","Sen","Ham","Neh","Pag"],dayNames:["Ehud","Segno","Maksegno","Irob","Hamus","Arb","Kidame"],dayNamesShort:["Ehu","Seg","Mak","Iro","Ham","Arb","Kid"],dayNamesMin:["Eh","Se","Ma","Ir","Ha","Ar","Ki"],digits:null,dateFormat:"dd/mm/yyyy",firstDay:0,isRTL:!1}},leapYear:function(b){var c=this._validate(b,this.minMonth,this.minDay,a.calendars.local.invalidYear);return b=c.year()+(c.year()<0?1:0),b%4===3||b%4===-1},monthsInYear:function(b){return this._validate(b,this.minMonth,this.minDay,a.calendars.local.invalidYear||a.calendars.regionalOptions[""].invalidYear),13},weekOfYear:function(a,b,c){var d=this.newDate(a,b,c);return d.add(-d.dayOfWeek(),"d"),Math.floor((d.dayOfYear()-1)/7)+1},daysInMonth:function(b,c){var d=this._validate(b,c,this.minDay,a.calendars.local.invalidMonth);return this.daysPerMonth[d.month()-1]+(13===d.month()&&this.leapYear(d.year())?1:0)},weekDay:function(a,b,c){return(this.dayOfWeek(a,b,c)||7)<6},toJD:function(b,c,d){var e=this._validate(b,c,d,a.calendars.local.invalidDate);return b=e.year(),b<0&&b++,e.day()+30*(e.month()-1)+365*(b-1)+Math.floor(b/4)+this.jdEpoch-1},fromJD:function(a){var b=Math.floor(a)+.5-this.jdEpoch,c=Math.floor((b-Math.floor((b+366)/1461))/365)+1;c<=0&&c--,b=Math.floor(a)+.5-this.newDate(c,1,1).toJD();var d=Math.floor(b/30)+1,e=b-30*(d-1)+1;return this.newDate(c,d,e)}}),a.calendars.calendars.ethiopian=b}(jQuery);
+//# sourceMappingURL=jquery.calendars.ethiopian.min.map
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/js/jquery.calendars.ethiopian.min.map b/apps/edr-freight-web/backoffice/src/shared/common/js/jquery.calendars.ethiopian.min.map
new file mode 100644
index 000000000..c4be63f74
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/js/jquery.calendars.ethiopian.min.map
@@ -0,0 +1 @@
+{"version":3,"sources":["..\\..\\src\\js\\jquery.calendars.ethiopian.js"],"names":["$","EthiopianCalendar","language","this","local","regionalOptions","prototype","calendars","baseCalendar","extend","name","jdEpoch","daysPerMonth","hasYearZero","minMonth","firstMonth","minDay","","epochs","monthNames","monthNamesShort","dayNames","dayNamesShort","dayNamesMin","digits","dateFormat","firstDay","isRTL","leapYear","year","date","_validate","invalidYear","monthsInYear","weekOfYear","month","day","checkDate","newDate","add","dayOfWeek","Math","floor","dayOfYear","daysInMonth","invalidMonth","weekDay","toJD","invalidDate","fromJD","jd","c","ethiopian","jQuery"],"mappings":"CAMA,SAAUA,GACT,YAQA,SAASC,GAAkBC,GAC1BC,KAAKC,MAAQD,KAAKE,gBAAgBH,GAAY,KAAOC,KAAKE,gBAAgB,IAG3EJ,EAAkBK,UAAY,GAAIN,GAAEO,UAAUC,aAE9CR,EAAES,OAAOR,EAAkBK,WAG1BI,KAAM,YAGNC,QAAS,UAGTC,cAAe,GAAI,GAAI,GAAI,GAAI,GAAI,GAAI,GAAI,GAAI,GAAI,GAAI,GAAI,GAAI,GAG/DC,aAAa,EAGbC,SAAU,EAGVC,WAAY,EAGZC,OAAQ,EAiBRX,iBACCY,IACCP,KAAM,YACNQ,QAAS,MAAO,MAChBC,YAAa,WAAY,UAAW,QAAS,UAAW,MAAO,UAC/D,UAAW,SAAU,SAAU,OAAQ,QAAS,SAAU,UAC1DC,iBAAkB,MAAO,MAAO,MAAO,MAAO,MAAO,MACrD,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,OAC1CC,UAAW,OAAQ,QAAS,WAAY,OAAQ,QAAS,MAAO,UAChEC,eAAgB,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,OAC1DC,aAAc,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,MAClDC,OAAQ,KACRC,WAAY,aACZC,SAAU,EACVC,OAAO,IASTC,SAAU,SAASC,GAClB,GAAIC,GAAO3B,KAAK4B,UAAUF,EAAM1B,KAAKW,SAAUX,KAAKa,OAAQhB,EAAEO,UAAUH,MAAM4B,YAE9E,OADAH,GAAOC,EAAKD,QAAUC,EAAKD,OAAS,EAAI,EAAI,GACrCA,EAAO,IAAM,GAAKA,EAAO,KAAM,GAQvCI,aAAc,SAASJ,GAGtB,MAFA1B,MAAK4B,UAAUF,EAAM1B,KAAKW,SAAUX,KAAKa,OACxChB,EAAEO,UAAUH,MAAM4B,aAAehC,EAAEO,UAAUF,gBAAgB,IAAI2B,aAC3D,IAURE,WAAY,SAASL,EAAMM,EAAOC,GAEjC,GAAIC,GAAYlC,KAAKmC,QAAQT,EAAMM,EAAOC,EAE1C,OADAC,GAAUE,KAAKF,EAAUG,YAAa,KAC/BC,KAAKC,OAAOL,EAAUM,YAAc,GAAK,GAAK,GAStDC,YAAa,SAASf,EAAMM,GAC3B,GAAIL,GAAO3B,KAAK4B,UAAUF,EAAMM,EAAOhC,KAAKa,OAAQhB,EAAEO,UAAUH,MAAMyC,aACtE,OAAO1C,MAAKS,aAAakB,EAAKK,QAAU,IACrB,KAAjBL,EAAKK,SAAkBhC,KAAKyB,SAASE,EAAKD,QAAU,EAAI,IAU3DiB,QAAS,SAASjB,EAAMM,EAAOC,GAC9B,OAAQjC,KAAKqC,UAAUX,EAAMM,EAAOC,IAAQ,GAAK,GAWlDW,KAAM,SAASlB,EAAMM,EAAOC,GAC3B,GAAIN,GAAO3B,KAAK4B,UAAUF,EAAMM,EAAOC,EAAKpC,EAAEO,UAAUH,MAAM4C,YAG9D,OAFAnB,GAAOC,EAAKD,OACRA,EAAO,GAAKA,IACTC,EAAKM,MAA6B,IAApBN,EAAKK,QAAU,GACtB,KAAZN,EAAO,GAAWY,KAAKC,MAAMb,EAAO,GAAK1B,KAAKQ,QAAU,GAO3DsC,OAAQ,SAASC,GAChB,GAAIC,GAAIV,KAAKC,MAAMQ,GAAM,GAAM/C,KAAKQ,QAChCkB,EAAOY,KAAKC,OAAOS,EAAIV,KAAKC,OAAOS,EAAI,KAAO,OAAS,KAAO,CAC9DtB,IAAQ,GAAKA,IACjBsB,EAAIV,KAAKC,MAAMQ,GAAM,GAAM/C,KAAKmC,QAAQT,EAAM,EAAG,GAAGkB,MACpD,IAAIZ,GAAQM,KAAKC,MAAMS,EAAI,IAAM,EAC7Bf,EAAMe,EAAkB,IAAbhB,EAAQ,GAAU,CACjC,OAAOhC,MAAKmC,QAAQT,EAAMM,EAAOC,MAKnCpC,EAAEO,UAAUA,UAAU6C,UAAYnD,GAEhCoD","file":"jquery.calendars.ethiopian.min.js"}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/js/jquery.calendars.js b/apps/edr-freight-web/backoffice/src/shared/common/js/jquery.calendars.js
new file mode 100644
index 000000000..8dad9c4cc
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/js/jquery.calendars.js
@@ -0,0 +1,982 @@
+/* http://keith-wood.name/calendars.html
+   Calendars for jQuery v2.1.0.
+   Written by Keith Wood (wood.keith{at}optusnet.com.au) August 2009.
+   Available under the MIT (http://keith-wood.name/licence.html) license. 
+   Please attribute the author if you use it. */
+
+(function($) { // Hide scope, no $ conflict
+	'use strict';
+
+	function Calendars() {
+		this.regionalOptions = [];
+		/** Localised values.
+			@memberof Calendars
+			@property {string} [invalidCalendar='Calendar {0} not found']
+				Error message for an unknown calendar.
+			@property {string} [invalidDate='Invalid {0} date']
+				Error message for an invalid date for this calendar.
+			@property {string} [invalidMonth='Invalid {0} month']
+				Error message for an invalid month for this calendar.
+			@property {string} [invalidYear='Invalid {0} year']
+				Error message for an invalid year for this calendar.
+			@property {string} [differentCalendars='Cannot mix {0} and {1} dates']
+				Error message for mixing different calendars. */
+		this.regionalOptions[''] = {
+			invalidCalendar: 'Calendar {0} not found',
+			invalidDate: 'Invalid {0} date',
+			invalidMonth: 'Invalid {0} month',
+			invalidYear: 'Invalid {0} year',
+			differentCalendars: 'Cannot mix {0} and {1} dates'
+		};
+		this.local = this.regionalOptions[''];
+		this.calendars = {};
+		this._localCals = {};
+	}
+
+	/** Create the calendars plugin.
+		<p>Provides support for various world calendars in a consistent manner.</p>
+		<p>Use the global instance, <code>$.calendars</code>, to access the functionality.</p>
+		@class Calendars
+		@example $.calendars.instance('julian').newDate(2014, 12, 25) */
+	$.extend(Calendars.prototype, {
+
+		/** Obtain a calendar implementation and localisation.
+			@memberof Calendars
+			@param {string} [name='gregorian'] The name of the calendar, e.g. 'gregorian', 'persian', 'islamic'.
+			@param {string} [language=''] The language code to use for localisation (default is English).
+			@return {Calendar} The calendar and localisation.
+			@throws Error if calendar not found.
+			@example $.calendars.instance()
+$.calendars.instance('persian')
+$.calendars.instance('hebrew', 'he') */
+		instance: function(name, language) {
+			name = (name || 'gregorian').toLowerCase();
+			language = language || '';
+			var cal = this._localCals[name + '-' + language];
+			if (!cal && this.calendars[name]) {
+				cal = new this.calendars[name](language);
+				this._localCals[name + '-' + language] = cal;
+			}
+			if (!cal) {
+				throw (this.local.invalidCalendar || this.regionalOptions[''].invalidCalendar).
+					replace(/\{0\}/, name);
+			}
+			return cal;
+		},
+
+		/** Create a new date - for today if no other parameters given.
+			@memberof Calendars
+			@param {CDate|number} [year] The date to copy or the year for the date.
+			@param {number} [month] The month for the date (if numeric <code>year</code> specified above).
+			@param {number} [day] The day for the date (if numeric <code>year</code> specified above).
+			@param {BaseCalendar|string} [calendar='gregorian'] The underlying calendar or the name of the calendar.
+			@param {string} [language=''] The language to use for localisation (default English).
+			@return {CDate} The new date.
+			@throws Error if an invalid date.
+			@example $.calendars.newDate()
+$.calendars.newDate(otherDate)
+$.calendars.newDate(2001, 1, 1)
+$.calendars.newDate(1379, 10, 12, 'persian') */
+		newDate: function(year, month, day, calendar, language) {
+			calendar = ((typeof year !== 'undefined' && year !== null) && year.year ? year.calendar() :
+				(typeof calendar === 'string' ? this.instance(calendar, language) : calendar)) || this.instance();
+			return calendar.newDate(year, month, day);
+		},
+
+		/** A simple digit substitution function for localising numbers via the
+			{@linkcode GregorianCalendar.regionalOptions|Calendar digits} option.
+			@memberof Calendars
+			@param {string[]} digits The substitute digits, for 0 through 9.
+			@return {CalendarsDigits} The substitution function.
+			@example digits: $.calendars.substituteDigits(['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹']) */
+		substituteDigits: function(digits) {
+			return function(value) {
+				return (value + '').replace(/[0-9]/g, function(digit) {
+					return digits[digit];
+				});
+			};
+		},
+
+		/** Digit substitution function for localising Chinese style numbers via the
+			{@linkcode GregorianCalendar.regionalOptions|Calendar digits} option.
+			@memberof Calendars
+			@param {string[]} digits The substitute digits, for 0 through 9.
+			@param {string[]} powers The characters denoting powers of 10, i.e. 1, 10, 100, 1000.
+			@return {CalendarsDigits} The substitution function.
+			@example digits: $.calendars.substituteChineseDigits(
+  ['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九'], ['', '十', '百', '千']) */
+		substituteChineseDigits: function(digits, powers) {
+			return function(value) {
+				var localNumber = '';
+				var power = 0;
+				while (value > 0) {
+					var units = value % 10;
+					localNumber = (units === 0 ? '' : digits[units] + powers[power]) + localNumber;
+					power++;
+					value = Math.floor(value / 10);
+				}
+				if (localNumber.indexOf(digits[1] + powers[1]) === 0) {
+					localNumber = localNumber.substr(1);
+				}
+				return localNumber || digits[0];
+			};
+		}
+	});
+
+	/** Generic date, based on a particular calendar.
+		@class CDate
+		@param {BaseCalendar} calendar The underlying calendar implementation.
+		@param {number} year The year for this date.
+		@param {number} month The month for this date.
+		@param {number} day The day for this date.
+		@return {CDate} The date object.
+		@throws Error if an invalid date. */
+	function CDate(calendar, year, month, day) {
+		this._calendar = calendar;
+		this._year = year;
+		this._month = month;
+		this._day = day;
+		if (this._calendar._validateLevel === 0 &&
+				!this._calendar.isValid(this._year, this._month, this._day)) {
+			throw ($.calendars.local.invalidDate || $.calendars.regionalOptions[''].invalidDate).
+				replace(/\{0\}/, this._calendar.local.name);
+		}
+	}
+
+	/** Pad a numeric value with leading zeroes.
+		@private
+		@param {number} value The number to format.
+		@param {number} length The minimum length.
+		@return {string} The formatted number. */
+	function pad(value, length) {
+		value = '' + value;
+		return '000000'.substring(0, length - value.length) + value;
+	}
+
+	$.extend(CDate.prototype, {
+
+		/** Create a new date.
+			@memberof CDate
+			@param {CDate|number} [year] The date to copy or the year for the date (default to this date).
+			@param {number} [month] The month for the date (if numeric <code>year</code> specified above).
+			@param {number} [day] The day for the date (if numeric <code>year</code> specified above).
+			@return {CDate} The new date.
+			@throws Error if an invalid date.
+			@example date.newDate()
+date.newDate(otherDate)
+date.newDate(2001, 1, 1) */
+		newDate: function(year, month, day) {
+			return this._calendar.newDate((typeof year === 'undefined' || year === null ? this : year), month, day);
+		},
+
+		/** Set or retrieve the year for this date.
+			@memberof CDate
+			@param {number} [year] The year for the date.
+			@return {number|CDate} The date's year (if no parameter) or the updated date.
+			@throws Error if an invalid date.
+			@example date.year(2001)
+var year = date.year() */
+		year: function(year) {
+			return (arguments.length === 0 ? this._year : this.set(year, 'y'));
+		},
+
+		/** Set or retrieve the month for this date.
+			@memberof CDate
+			@param {number} [month] The month for the date.
+			@return {number|CDate} The date's month (if no parameter) or the updated date.
+			@throws Error if an invalid date.
+			@example date.month(1)
+var month = date.month() */
+		month: function(month) {
+			return (arguments.length === 0 ? this._month : this.set(month, 'm'));
+		},
+
+		/** Set or retrieve the day for this date.
+			@memberof CDate
+			@param {number} [day] The day for the date.
+			@return {number|CData} The date's day (if no parameter) or the updated date.
+			@throws Error if an invalid date.
+			@example date.day(1)
+var day = date.day() */
+		day: function(day) {
+			return (arguments.length === 0 ? this._day : this.set(day, 'd'));
+		},
+
+		/** Set new values for this date.
+			@memberof CDate
+			@param {number} year The year for the date.
+			@param {number} month The month for the date.
+			@param {number} day The day for the date.
+			@return {CDate} The updated date.
+			@throws Error if an invalid date.
+			@example date.date(2001, 1, 1) */
+		date: function(year, month, day) {
+			if (!this._calendar.isValid(year, month, day)) {
+				throw ($.calendars.local.invalidDate || $.calendars.regionalOptions[''].invalidDate).
+					replace(/\{0\}/, this._calendar.local.name);
+			}
+			this._year = year;
+			this._month = month;
+			this._day = day;
+			return this;
+		},
+
+		/** Determine whether this date is in a leap year.
+			@memberof CDate
+			@return {boolean} <code>true</code> if this is a leap year, <code>false</code> if not.
+			@example if (date.leapYear()) ...*/
+		leapYear: function() {
+			return this._calendar.leapYear(this);
+		},
+
+		/** Retrieve the epoch designator for this date, e.g. BCE or CE.
+			@memberof CDate
+			@return {string} The current epoch.
+			@example var epoch = date.epoch() */
+		epoch: function() {
+			return this._calendar.epoch(this);
+		},
+
+		/** Format the year, if not a simple sequential number.
+			@memberof CDate
+			@return {string} The formatted year.
+			@example var year = date.formatYear() */
+		formatYear: function() {
+			return this._calendar.formatYear(this);
+		},
+
+		/** Retrieve the month of the year for this date,
+			i.e. the month's position within a numbered year.
+			@memberof CDate
+			@return {number} The month of the year: <code>minMonth</code> to months per year.
+			@example var month = date.monthOfYear() */
+		monthOfYear: function() {
+			return this._calendar.monthOfYear(this);
+		},
+
+		/** Retrieve the week of the year for this date.
+			@memberof CDate
+			@return {number} The week of the year: 1 to weeks per year.
+			@example var week = date.weekOfYear() */
+		weekOfYear: function() {
+			return this._calendar.weekOfYear(this);
+		},
+
+		/** Retrieve the number of days in the year for this date.
+			@memberof CDate
+			@return {number} The number of days in this year.
+			@example var days = date.daysInYear() */
+		daysInYear: function() {
+			return this._calendar.daysInYear(this);
+		},
+
+		/** Retrieve the day of the year for this date.
+			@memberof CDate
+			@return {number} The day of the year: 1 to days per year.
+			@example var doy = date.dayOfYear() */
+		dayOfYear: function() {
+			return this._calendar.dayOfYear(this);
+		},
+
+		/** Retrieve the number of days in the month for this date.
+			@memberof CDate
+			@return {number} The number of days.
+			@example var days = date.daysInMonth() */
+		daysInMonth: function() {
+			return this._calendar.daysInMonth(this);
+		},
+
+		/** Retrieve the day of the week for this date.
+			@memberof CDate
+			@return {number} The day of the week: 0 to number of days - 1.
+			@example var dow = date.dayOfWeek() */
+		dayOfWeek: function() {
+			return this._calendar.dayOfWeek(this);
+		},
+
+		/** Determine whether this date is a week day.
+			@memberof CDate
+			@return {boolean} <code>true</code> if a week day, <code>false</code> if not.
+			@example if (date.weekDay()) ... */
+		weekDay: function() {
+			return this._calendar.weekDay(this);
+		},
+
+		/** Retrieve additional information about this date.
+			@memberof CDate
+			@return {object} Additional information - contents depends on calendar.
+			@example var info = date.extraInfo() */
+		extraInfo: function() {
+			return this._calendar.extraInfo(this);
+		},
+
+		/** Add period(s) to a date.
+			@memberof CDate
+			@param {number} offset The number of periods to adjust by.
+			@param {string} period One of 'y' for years, 'm' for months, 'w' for weeks, 'd' for days.
+			@return {CDate} The updated date.
+			@example date.add(10, 'd') */
+		add: function(offset, period) {
+			return this._calendar.add(this, offset, period);
+		},
+
+		/** Set a portion of the date.
+			@memberof CDate
+			@param {number} value The new value for the period.
+			@param {string} period One of 'y' for year, 'm' for month, 'd' for day.
+			@return {CDate} The updated date.
+			@throws Error if not a valid date.
+			@example date.set(10, 'd') */
+		set: function(value, period) {
+			return this._calendar.set(this, value, period);
+		},
+
+		/** Compare this date to another date.
+			@memberof CDate
+			@param {CDate} date The other date.
+			@return {number} -1 if this date is before the other date,
+					0 if they are equal, or +1 if this date is after the other date.
+			@example if (date1.compareTo(date2) < 0) ... */
+		compareTo: function(date) {
+			if (this._calendar.name !== date._calendar.name) {
+				throw ($.calendars.local.differentCalendars || $.calendars.regionalOptions[''].differentCalendars).
+					replace(/\{0\}/, this._calendar.local.name).replace(/\{1\}/, date._calendar.local.name);
+			}
+			var c = (this._year !== date._year ? this._year - date._year :
+				this._month !== date._month ? this.monthOfYear() - date.monthOfYear() :
+				this._day - date._day);
+			return (c === 0 ? 0 : (c < 0 ? -1 : +1));
+		},
+
+		/** Retrieve the calendar backing this date.
+			@memberof CDate
+			@return {BaseCalendar} The calendar implementation.
+			@example var cal = date.calendar() */
+		calendar: function() {
+			return this._calendar;
+		},
+
+		/** Retrieve the Julian date equivalent for this date,
+			i.e. days since January 1, 4713 BCE Greenwich noon.
+			@memberof CDate
+			@return {number} The equivalent Julian date.
+			@example var jd = date.toJD() */
+		toJD: function() {
+			return this._calendar.toJD(this);
+		},
+
+		/** Create a new date from a Julian date.
+			@memberof CDate
+			@param {number} jd The Julian date to convert.
+			@return {CDate} The equivalent date.
+			@example var date2 = date1.fromJD(jd) */
+		fromJD: function(jd) {
+			return this._calendar.fromJD(jd);
+		},
+
+		/** Convert this date to a standard (Gregorian) JavaScript Date.
+			@memberof CDate
+			@return {Date} The equivalent JavaScript date.
+			@example var jsd = date.toJSDate() */
+		toJSDate: function() {
+			return this._calendar.toJSDate(this);
+		},
+
+		/** Create a new date from a standard (Gregorian) JavaScript Date.
+			@memberof CDate
+			@param {Date} jsd The JavaScript date to convert.
+			@return {CDate} The equivalent date.
+			@example var date2 = date1.fromJSDate(jsd) */
+		fromJSDate: function(jsd) {
+			return this._calendar.fromJSDate(jsd);
+		},
+
+		/** Convert to a string for display.
+			@memberof CDate
+			@return {string} This date as a string. */
+		toString: function() {
+			return (this.year() < 0 ? '-' : '') + pad(Math.abs(this.year()), 4) +
+				'-' + pad(this.month(), 2) + '-' + pad(this.day(), 2);
+		}
+	});
+
+	/** Basic functionality for all calendars.
+		Other calendars should extend this:
+		<pre>OtherCalendar.prototype = new BaseCalendar();</pre>
+		@class BaseCalendar */
+	function BaseCalendar() {
+		this.shortYearCutoff = '+10';
+	}
+
+	$.extend(BaseCalendar.prototype, {
+		_validateLevel: 0, // "Stack" to turn validation on/off
+
+		/** Create a new date within this calendar - today if no parameters given.
+			@memberof BaseCalendar
+			@param {CDate|number} year The date to duplicate or the year for the date.
+			@param {number} [month] The month for the date (if numeric <code>year</code> specified above).
+			@param {number} [day] The day for the date (if numeric <code>year</code> specified above).
+			@return {CDate} The new date.
+			@throws Error if not a valid date or a different calendar is used.
+			@example var date = calendar.newDate(2014, 1, 26)
+var date2 = calendar.newDate(date1)
+var today = calendar.newDate() */
+		newDate: function(year, month, day) {
+			if (typeof year === 'undefined' || year === null) {
+				return this.today();
+			}
+			if (year.year) {
+				this._validate(year, month, day,
+					$.calendars.local.invalidDate || $.calendars.regionalOptions[''].invalidDate);
+				day = year.day();
+				month = year.month();
+				year = year.year();
+			}
+			return new CDate(this, year, month, day);
+		},
+
+		/** Create a new date for today.
+			@memberof BaseCalendar
+			@return {CDate} Today's date.
+			@example var today = calendar.today() */
+		today: function() {
+			return this.fromJSDate(new Date());
+		},
+
+		/** Retrieve the epoch designator for this date.
+			@memberof BaseCalendar
+			@param {CDate|number} year The date to examine or the year to examine.
+			@return {string} The current epoch.
+			@throws Error if an invalid year or a different calendar is used.
+			@example var epoch = calendar.epoch(date) 
+var epoch = calendar.epoch(2014) */
+		epoch: function(year) {
+			var date = this._validate(year, this.minMonth, this.minDay,
+				$.calendars.local.invalidYear || $.calendars.regionalOptions[''].invalidYear);
+			return (date.year() < 0 ? this.local.epochs[0] : this.local.epochs[1]);
+		},
+
+		/** Format the year, if not a simple sequential number
+			@memberof BaseCalendar
+			@param {CDate|number} year The date to format or the year to format.
+			@return {string} The formatted year.
+			@throws Error if an invalid year or a different calendar is used.
+			@example var year = calendar.formatYear(date)
+var year = calendar.formatYear(2014) */
+		formatYear: function(year) {
+			var date = this._validate(year, this.minMonth, this.minDay,
+				$.calendars.local.invalidYear || $.calendars.regionalOptions[''].invalidYear);
+			return (date.year() < 0 ? '-' : '') + pad(Math.abs(date.year()), 4);
+		},
+
+		/** Retrieve the number of months in a year.
+			@memberof BaseCalendar
+			@param {CDate|number} year The date to examine or the year to examine.
+			@return {number} The number of months.
+			@throws Error if an invalid year or a different calendar is used.
+			@example var months = calendar.monthsInYear(date)
+var months = calendar.monthsInYear(2014) */
+		monthsInYear: function(year) {
+			this._validate(year, this.minMonth, this.minDay,
+				$.calendars.local.invalidYear || $.calendars.regionalOptions[''].invalidYear);
+			return 12;
+		},
+
+		/** Calculate the month's ordinal position within the year -
+			for those calendars that don't start at month 1!
+			@memberof BaseCalendar
+			@param {CDate|number} year The date to examine or the year to examine.
+			@param {number} [month] The month to examine (if numeric <code>year</code> specified above).
+			@return {number} The ordinal position, starting from <code>minMonth</code>.
+			@throws Error if an invalid year/month or a different calendar is used.
+			@example var pos = calendar.monthOfYear(date)
+var pos = calendar.monthOfYear(2014, 7) */
+		monthOfYear: function(year, month) {
+			var date = this._validate(year, month, this.minDay,
+				$.calendars.local.invalidMonth || $.calendars.regionalOptions[''].invalidMonth);
+			return (date.month() + this.monthsInYear(date) - this.firstMonth) %
+				this.monthsInYear(date) + this.minMonth;
+		},
+
+		/** Calculate actual month from ordinal position, starting from <code>minMonth</code>.
+			@memberof BaseCalendar
+			@param {number} year The year to examine.
+			@param {number} ord The month's ordinal position.
+			@return {number} The month's number.
+			@throws Error if an invalid year/month.
+			@example var month = calendar.fromMonthOfYear(2014, 7) */
+		fromMonthOfYear: function(year, ord) {
+			var m = (ord + this.firstMonth - 2 * this.minMonth) %
+				this.monthsInYear(year) + this.minMonth;
+			this._validate(year, m, this.minDay,
+				$.calendars.local.invalidMonth || $.calendars.regionalOptions[''].invalidMonth);
+			return m;
+		},
+
+		/** Retrieve the number of days in a year.
+			@memberof BaseCalendar
+			@param {CDate|number} year The date to examine or the year to examine.
+			@return {number} The number of days.
+			@throws Error if an invalid year or a different calendar is used.
+			@example var days = calendar.daysInYear(date)
+var days = calendar.daysInYear(2014) */
+		daysInYear: function(year) {
+			var date = this._validate(year, this.minMonth, this.minDay,
+				$.calendars.local.invalidYear || $.calendars.regionalOptions[''].invalidYear);
+			return (this.leapYear(date) ? 366 : 365);
+		},
+
+		/** Retrieve the day of the year for a date.
+			@memberof BaseCalendar
+			@param {CDate|number} year The date to convert or the year to convert.
+			@param {number} [month] The month to convert (if numeric <code>year</code> specified above).
+			@param {number} [day] The day to convert (if numeric <code>year</code> specified above).
+			@return {number} The day of the year: 1 to days per year.
+			@throws Error if an invalid date or a different calendar is used.
+			@example var doy = calendar.dayOfYear(date)
+var doy = calendar.dayOfYear(2014, 7, 1) */
+		dayOfYear: function(year, month, day) {
+			var date = this._validate(year, month, day,
+				$.calendars.local.invalidDate || $.calendars.regionalOptions[''].invalidDate);
+			return date.toJD() - this.newDate(date.year(),
+				this.fromMonthOfYear(date.year(), this.minMonth), this.minDay).toJD() + 1;
+		},
+
+		/** Retrieve the number of days in a week.
+			@memberof BaseCalendar
+			@return {number} The number of days.
+			@example var days = calendar.daysInWeek() */
+		daysInWeek: function() {
+			return 7;
+		},
+
+		/** Retrieve the day of the week for a date.
+			@memberof BaseCalendar
+			@param {CDate|number} year The date to examine or the year to examine.
+			@param {number} [month] The month to examine (if numeric <code>year</code> specified above).
+			@param {number} [day] The day to examine (if numeric <code>year</code> specified above).
+			@return {number} The day of the week: 0 to number of days - 1.
+			@throws Error if an invalid date or a different calendar is used.
+			@example var dow = calendar.dayOfWeek(date)
+var dow = calendar.dayOfWeek(2014, 1, 26) */
+		dayOfWeek: function(year, month, day) {
+			var date = this._validate(year, month, day,
+				$.calendars.local.invalidDate || $.calendars.regionalOptions[''].invalidDate);
+			return (Math.floor(this.toJD(date)) + 2) % this.daysInWeek();
+		},
+
+		/** Retrieve additional information about a date.
+			@memberof BaseCalendar
+			@param {CDate|number} year The date to examine or the year to examine.
+			@param {number} [month] The month to examine (if numeric <code>year</code> specified above).
+			@param {number} [day] The day to examine (if numeric <code>year</code> specified above).
+			@return {object} Additional information - content depends on calendar.
+			@throws Error if an invalid date or a different calendar is used.
+			@example var info = calendar.extraInfo(date)
+var info = calendar.extraInfo(2014, 1, 26) */
+		extraInfo: function(year, month, day) {
+			this._validate(year, month, day,
+				$.calendars.local.invalidDate || $.calendars.regionalOptions[''].invalidDate);
+			return {};
+		},
+
+		/** Add period(s) to a date.
+			Cater for no year zero.
+			@memberof BaseCalendar
+			@param {CDate} date The starting date.
+			@param {number} offset The number of periods to adjust by.
+			@param {string} period One of 'y' for years, 'm' for months, 'w' for weeks, 'd' for days.
+			@return {CDate} The updated date.
+			@throws Error if a different calendar is used.
+			@example calendar.add(date, 10, 'd') */
+		add: function(date, offset, period) {
+			this._validate(date, this.minMonth, this.minDay,
+				$.calendars.local.invalidDate || $.calendars.regionalOptions[''].invalidDate);
+			return this._correctAdd(date, this._add(date, offset, period), offset, period);
+		},
+
+		/** Add period(s) to a date.
+			@memberof BaseCalendar
+			@private
+			@param {CDate} date The starting date.
+			@param {number} offset The number of periods to adjust by.
+			@param {string} period One of 'y' for years, 'm' for months, 'w' for weeks, 'd' for days.
+			@return {number[]} The updated date as year, month, and day. */
+		_add: function(date, offset, period) {
+			this._validateLevel++;
+			var d;
+			if (period === 'd' || period === 'w') {
+				var jd = date.toJD() + offset * (period === 'w' ? this.daysInWeek() : 1);
+				d = date.calendar().fromJD(jd);
+				this._validateLevel--;
+				return [d.year(), d.month(), d.day()];
+			}
+			try {
+				var y = date.year() + (period === 'y' ? offset : 0);
+				var m = date.monthOfYear() + (period === 'm' ? offset : 0);
+				d = date.day();
+				var resyncYearMonth = function(calendar) {
+					while (m < calendar.minMonth) {
+						y--;
+						m += calendar.monthsInYear(y);
+					}
+					var yearMonths = calendar.monthsInYear(y);
+					while (m > yearMonths - 1 + calendar.minMonth) {
+						y++;
+						m -= yearMonths;
+						yearMonths = calendar.monthsInYear(y);
+					}
+				};
+				if (period === 'y') {
+					if (date.month() !== this.fromMonthOfYear(y, m)) { // Hebrew
+						m = this.newDate(y, date.month(), this.minDay).monthOfYear();
+					}
+					m = Math.min(m, this.monthsInYear(y));
+					d = Math.min(d, this.daysInMonth(y, this.fromMonthOfYear(y, m)));
+				}
+				else if (period === 'm') {
+					resyncYearMonth(this);
+					d = Math.min(d, this.daysInMonth(y, this.fromMonthOfYear(y, m)));
+				}
+				var ymd = [y, this.fromMonthOfYear(y, m), d];
+				this._validateLevel--;
+				return ymd;
+			}
+			catch (e) {
+				this._validateLevel--;
+				throw e;
+			}
+		},
+
+		/** Correct a candidate date after adding period(s) to a date.
+			Handle no year zero if necessary.
+			@memberof BaseCalendar
+			@private
+			@param {CDate} date The starting date.
+			@param {number[]} ymd The added date.
+			@param {number} offset The number of periods to adjust by.
+			@param {string} period One of 'y' for years, 'm' for months, 'w' for weeks, 'd' for days.
+			@return {CDate} The updated date. */
+		_correctAdd: function(date, ymd, offset, period) {
+			if (!this.hasYearZero && (period === 'y' || period === 'm')) {
+				if (ymd[0] === 0 || // In year zero
+						(date.year() > 0) !== (ymd[0] > 0)) { // Crossed year zero
+					var adj = {y: [1, 1, 'y'], m: [1, this.monthsInYear(-1), 'm'],
+						w: [this.daysInWeek(), this.daysInYear(-1), 'd'],
+						d: [1, this.daysInYear(-1), 'd']}[period];
+					var dir = (offset < 0 ? -1 : +1);
+					ymd = this._add(date, offset * adj[0] + dir * adj[1], adj[2]);
+				}
+			}
+			return date.date(ymd[0], ymd[1], ymd[2]);
+		},
+
+		/** Set a portion of the date.
+			@memberof BaseCalendar
+			@param {CDate} date The starting date.
+			@param {number} value The new value for the period.
+			@param {string} period One of 'y' for year, 'm' for month, 'd' for day.
+			@return {CDate} The updated date.
+			@throws Error if an invalid date or a different calendar is used.
+			@example calendar.set(date, 10, 'd') */
+		set: function(date, value, period) {
+			this._validate(date, this.minMonth, this.minDay,
+				$.calendars.local.invalidDate || $.calendars.regionalOptions[''].invalidDate);
+			var y = (period === 'y' ? value : date.year());
+			var m = (period === 'm' ? value : date.month());
+			var d = (period === 'd' ? value : date.day());
+			if (period === 'y' || period === 'm') {
+				d = Math.min(d, this.daysInMonth(y, m));
+			}
+			return date.date(y, m, d);
+		},
+
+		/** Determine whether a date is valid for this calendar.
+			@memberof BaseCalendar
+			@param {number} year The year to examine.
+			@param {number} month The month to examine.
+			@param {number} day The day to examine.
+			@return {boolean} <code>true</code> if a valid date, <code>false</code> if not.
+			@example if (calendar.isValid(2014, 2, 31)) ... */
+		isValid: function(year, month, day) {
+			this._validateLevel++;
+			var valid = (this.hasYearZero || year !== 0);
+			if (valid) {
+				var date = this.newDate(year, month, this.minDay);
+				valid = (month >= this.minMonth && month - this.minMonth < this.monthsInYear(date)) &&
+					(day >= this.minDay && day - this.minDay < this.daysInMonth(date));
+			}
+			this._validateLevel--;
+			return valid;
+		},
+
+		/** Convert the date to a standard (Gregorian) JavaScript Date.
+			@memberof BaseCalendar
+			@param {CDate|number} year The date to convert or the year to convert.
+			@param {number} [month] The month to convert (if numeric <code>year</code> specified above).
+			@param {number} [day] The day to convert (if numeric <code>year</code> specified above).
+			@return {Date} The equivalent JavaScript date.
+			@throws Error if an invalid date or a different calendar is used.
+			@example var jsd = calendar.toJSDate(date)
+var jsd = calendar.toJSDate(2014, 1, 26) */
+		toJSDate: function(year, month, day) {
+			var date = this._validate(year, month, day,
+				$.calendars.local.invalidDate || $.calendars.regionalOptions[''].invalidDate);
+			return $.calendars.instance().fromJD(this.toJD(date)).toJSDate();
+		},
+
+		/** Convert the date from a standard (Gregorian) JavaScript Date.
+			@memberof BaseCalendar
+			@param {Date} jsd The JavaScript date.
+			@return {CDate} The equivalent calendar date.
+			@example var date = calendar.fromJSDate(jsd) */
+		fromJSDate: function(jsd) {
+			return this.fromJD($.calendars.instance().fromJSDate(jsd).toJD());
+		},
+
+		/** Check that a candidate date is from the same calendar and is valid.
+			@memberof BaseCalendar
+			@private
+			@param {CDate|number} year The date to validate or the year to validate.
+			@param {number} [month] The month to validate (if numeric <code>year</code> specified above).
+			@param {number} [day] The day to validate (if numeric <code>year</code> specified above).
+			@param {string} error Error message if invalid.
+			@throws Error if an invalid date or a different calendar is used. */
+		_validate: function(year, month, day, error) {
+			if (year.year) {
+				if (this._validateLevel === 0 && this.name !== year.calendar().name) {
+					throw ($.calendars.local.differentCalendars || $.calendars.regionalOptions[''].differentCalendars).
+						replace(/\{0\}/, this.local.name).replace(/\{1\}/, year.calendar().local.name);
+				}
+				return year;
+			}
+			try {
+				this._validateLevel++;
+				if (this._validateLevel === 1 && !this.isValid(year, month, day)) {
+					throw error.replace(/\{0\}/, this.local.name);
+				}
+				var date = this.newDate(year, month, day);
+				this._validateLevel--;
+				return date;
+			}
+			catch (e) {
+				this._validateLevel--;
+				throw e;
+			}
+		}
+	});
+
+	/** Implementation of the Proleptic Gregorian Calendar.
+		See <a href=":http://en.wikipedia.org/wiki/Gregorian_calendar">http://en.wikipedia.org/wiki/Gregorian_calendar</a>
+		and <a href="http://en.wikipedia.org/wiki/Proleptic_Gregorian_calendar">http://en.wikipedia.org/wiki/Proleptic_Gregorian_calendar</a>.
+		@class GregorianCalendar
+		@augments BaseCalendar
+		@param {string} [language=''] The language code (default English) for localisation. */
+	function GregorianCalendar(language) {
+		this.local = this.regionalOptions[language] || this.regionalOptions[''];
+	}
+
+	GregorianCalendar.prototype = new BaseCalendar();
+
+	$.extend(GregorianCalendar.prototype, {
+		/** The calendar name.
+			@memberof GregorianCalendar */
+		name: 'Gregorian',
+		/** Julian date of start of Gregorian epoch: 1 January 0001 CE.
+			@memberof GregorianCalendar */
+		jdEpoch: 1721425.5,
+		/** Days per month in a common year.
+			@memberof GregorianCalendar */
+		daysPerMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
+		/** <code>true</code> if has a year zero, <code>false</code> if not.
+			@memberof GregorianCalendar */
+		hasYearZero: false,
+		/** The minimum month number.
+			@memberof GregorianCalendar */
+		minMonth: 1,
+		/** The first month in the year.
+			@memberof GregorianCalendar */
+		firstMonth: 1,
+		/** The minimum day number.
+			@memberof GregorianCalendar */
+		minDay: 1,
+
+		/** Convert a number into a localised form.
+			@callback CalendarsDigits
+			@param {number} value The number to convert.
+			@return {string} The localised number.
+			@example digits: $.calendars.substituteDigits(['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹']) */
+
+		/** Localisations for the plugin.
+			Entries are objects indexed by the language code ('' being the default US/English).
+			Each object has the following attributes.
+			@memberof GregorianCalendar
+			@property {string} [name='Gregorian'] The calendar name.
+			@property {string[]} [epochs=['BCE','CE']] The epoch names.
+			@property {string[]} [monthNames=[...]] The long names of the months of the year.
+			@property {string[]} [monthNamesShort=[...]] The short names of the months of the year.
+			@property {string[]} [dayNames=[...]] The long names of the days of the week.
+			@property {string[]} [dayNamesShort=[...]] The short names of the days of the week.
+			@property {string[]} [dayNamesMin=[...]] The minimal names of the days of the week.
+			@property {CalendarsDigits} [digits=null] Convert numbers to localised versions.
+			@property {string} [dateFormat='mm/dd/yyyy'] The date format for this calendar.
+					See the options on {@linkcode BaseCalendar.formatDate|formatDate} for details.
+			@property {number} [firstDay=0] The number of the first day of the week, starting at 0.
+			@property {boolean} [isRTL=false] <code>true</code> if this localisation reads right-to-left. */
+		regionalOptions: { // Localisations
+			'': {
+				name: 'Gregorian',
+				epochs: ['BCE', 'CE'],
+				monthNames: ['January', 'February', 'March', 'April', 'May', 'June',
+				'July', 'August', 'September', 'October', 'November', 'December'],
+				monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+				dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+				dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+				dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+				digits: null,
+				dateFormat: 'mm/dd/yyyy',
+				firstDay: 0,
+				isRTL: false
+			}
+		},
+
+		/** Determine whether this date is in a leap year.
+			@memberof GregorianCalendar
+			@param {CDate|number} year The date to examine or the year to examine.
+			@return {boolean} <code>true</code> if this is a leap year, <code>false</code> if not.
+			@throws Error if an invalid year or a different calendar is used. */
+		leapYear: function(year) {
+			var date = this._validate(year, this.minMonth, this.minDay,
+				$.calendars.local.invalidYear || $.calendars.regionalOptions[''].invalidYear);
+			year = date.year() + (date.year() < 0 ? 1 : 0); // No year zero
+			return year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
+		},
+
+		/** Determine the week of the year for a date - ISO 8601.
+			@memberof GregorianCalendar
+			@param {CDate|number} year The date to examine or the year to examine.
+			@param {number} [month] The month to examine (if numeric <code>year</code> specified above).
+			@param {number} [day] The day to examine (if numeric <code>year</code> specified above).
+			@return {number} The week of the year, starting from 1.
+			@throws Error if an invalid date or a different calendar is used. */
+		weekOfYear: function(year, month, day) {
+			// Find Thursday of this week starting on Monday
+			var checkDate = this.newDate(year, month, day);
+			checkDate.add(4 - (checkDate.dayOfWeek() || 7), 'd');
+			return Math.floor((checkDate.dayOfYear() - 1) / 7) + 1;
+		},
+
+		/** Retrieve the number of days in a month.
+			@memberof GregorianCalendar
+			@param {CDate|number} year The date to examine or the year of the month.
+			@param {number} [month] The month (if numeric <code>year</code> specified above).
+			@return {number} The number of days in this month.
+			@throws Error if an invalid month/year or a different calendar is used. */
+		daysInMonth: function(year, month) {
+			var date = this._validate(year, month, this.minDay,
+				$.calendars.local.invalidMonth || $.calendars.regionalOptions[''].invalidMonth);
+			return this.daysPerMonth[date.month() - 1] +
+				(date.month() === 2 && this.leapYear(date.year()) ? 1 : 0);
+		},
+
+		/** Determine whether this date is a week day.
+			@memberof GregorianCalendar
+			@param {CDate|number} year The date to examine or the year to examine.
+			@param {number} [month] The month to examine (if numeric <code>year</code> specified above).
+			@param {number} [day] The day to examine (if numeric <code>year</code> specified above).
+			@return {boolean} <code>true</code> if a week day, <code>false</code> if not.
+			@throws Error if an invalid date or a different calendar is used. */
+		weekDay: function(year, month, day) {
+			return (this.dayOfWeek(year, month, day) || 7) < 6;
+		},
+
+		/** Retrieve the Julian date equivalent for this date,
+			i.e. days since January 1, 4713 BCE Greenwich noon.
+			@memberof GregorianCalendar
+			@param {CDate|number} year The date to convert or the year to convert.
+			@param {number} [month] The month to convert (if numeric <code>year</code> specified above).
+			@param {number} [day] The day to convert (if numeric <code>year</code> specified above).
+			@return {number} The equivalent Julian date.
+			@throws Error if an invalid date or a different calendar is used. */
+		toJD: function(year, month, day) {
+			var date = this._validate(year, month, day,
+				$.calendars.local.invalidDate || $.calendars.regionalOptions[''].invalidDate);
+			year = date.year();
+			month = date.month();
+			day = date.day();
+			if (year < 0) { year++; } // No year zero
+			// Jean Meeus algorithm, "Astronomical Algorithms", 1991
+			if (month < 3) {
+				month += 12;
+				year--;
+			}
+			var a = Math.floor(year / 100);
+			var b = 2 - a + Math.floor(a / 4);
+			return Math.floor(365.25 * (year + 4716)) +
+				Math.floor(30.6001 * (month + 1)) + day + b - 1524.5;
+		},
+
+		/** Create a new date from a Julian date.
+			@memberof GregorianCalendar
+			@param {number} jd The Julian date to convert.
+			@return {CDate} The equivalent date. */
+		fromJD: function(jd) {
+			// Jean Meeus algorithm, "Astronomical Algorithms", 1991
+			var z = Math.floor(jd + 0.5);
+			var a = Math.floor((z - 1867216.25) / 36524.25);
+			a = z + 1 + a - Math.floor(a / 4);
+			var b = a + 1524;
+			var c = Math.floor((b - 122.1) / 365.25);
+			var d = Math.floor(365.25 * c);
+			var e = Math.floor((b - d) / 30.6001);
+			var day = b - d - Math.floor(e * 30.6001);
+			var month = e - (e > 13.5 ? 13 : 1);
+			var year = c - (month > 2.5 ? 4716 : 4715);
+			if (year <= 0) { year--; } // No year zero
+			return this.newDate(year, month, day);
+		},
+
+		/** Convert this date to a standard (Gregorian) JavaScript Date.
+			@memberof GregorianCalendar
+			@param {CDate|number} year The date to convert or the year to convert.
+			@param {number} [month] The month to convert (if numeric <code>year</code> specified above).
+			@param {number} [day] The day to convert (if numeric <code>year</code> specified above).
+			@return {Date} The equivalent JavaScript date.
+			@throws Error if an invalid date or a different calendar is used. */
+		toJSDate: function(year, month, day) {
+			var date = this._validate(year, month, day,
+				$.calendars.local.invalidDate || $.calendars.regionalOptions[''].invalidDate);
+			var jsd = new Date(date.year(), date.month() - 1, date.day());
+			jsd.setHours(0);
+			jsd.setMinutes(0);
+			jsd.setSeconds(0);
+			jsd.setMilliseconds(0);
+			// Hours may be non-zero on daylight saving cut-over:
+			// > 12 when midnight changeover, but then cannot generate
+			// midnight datetime, so jump to 1AM, otherwise reset.
+			jsd.setHours(jsd.getHours() > 12 ? jsd.getHours() + 2 : 0);
+			return jsd;
+		},
+
+		/** Create a new date from a standard (Gregorian) JavaScript Date.
+			@memberof GregorianCalendar
+			@param {Date} jsd The JavaScript date to convert.
+			@return {CDate} The equivalent date. */
+		fromJSDate: function(jsd) {
+			return this.newDate(jsd.getFullYear(), jsd.getMonth() + 1, jsd.getDate());
+		}
+	});
+
+	// Singleton manager
+	$.calendars = new Calendars();
+
+	// Date template
+	$.calendars.cdate = CDate;
+
+	// Base calendar template
+	$.calendars.baseCalendar = BaseCalendar;
+
+	// Gregorian calendar implementation
+	$.calendars.calendars.gregorian = GregorianCalendar;
+
+})(jQuery);
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/js/jquery.calendars.picker.js b/apps/edr-freight-web/backoffice/src/shared/common/js/jquery.calendars.picker.js
new file mode 100644
index 000000000..2635550c3
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/js/jquery.calendars.picker.js
@@ -0,0 +1,1946 @@
+/* http://keith-wood.name/calendars.html
+   Calendars date picker for jQuery v2.1.0.
+   Written by Keith Wood (wood.keith{at}optusnet.com.au) August 2009.
+   Available under the MIT (http://keith-wood.name/licence.html) license. 
+   Please attribute the author if you use it. */
+
+(function($) { // Hide scope, no $ conflict
+	'use strict';
+
+	var pluginName = 'calendarsPicker';
+
+	/** Create the calendars datepicker plugin.
+		<p>Sets an <code>input</code> field to popup a calendar for date entry,
+			or a <code>div</code> or <code>span</code> to show an inline calendar.</p>
+		<p>Expects HTML like:</p>
+		<pre>&lt;input type="text"> or &lt;div>&lt;/div></pre>
+		<p>Provide inline configuration like:</p>
+		<pre>&lt;input type="text" data-calendarsPicker="name: 'value'"/></pre>
+		@class CalendarsPicker
+		@augments JQPlugin
+		@example $(selector).calendarsPicker()
+$(selector).calendarsPicker({minDate: 0, maxDate: '+1m +1w'}) */
+	$.JQPlugin.createPlugin({
+
+		/** The name of the plugin.
+			@memberof CalendarsPicker
+			@default 'calendarsPicker' */
+		name: pluginName,
+
+		/** Default template for generating a datepicker.
+			Insert anywhere:
+			<ul>
+			<li>'{l10n:<em>name</em>}' to insert localised value for <em>name</em>,</li>
+			<li>'{link:<em>name</em>}' to insert a link trigger for command <em>name</em>,</li>
+			<li>'{button:<em>name</em>}' to insert a button trigger for command <em>name</em>,</li>
+			<li>'{popup:start}...{popup:end}' to mark a section for inclusion in a popup datepicker only,</li>
+			<li>'{inline:start}...{inline:end}' to mark a section for inclusion in an inline datepicker only.</li>
+			</ul>
+			@memberof CalendarsPicker
+			@property {string} picker Overall structure: '{months}' to insert calendar months.
+			@property {string} monthRow One row of months: '{months}' to insert calendar months.
+			@property {string} month A single month: '{monthHeader<em>:dateFormat</em>}' to insert the month header -
+				<em>dateFormat</em> is optional and defaults to 'MM yyyy',
+				'{weekHeader}' to insert a week header, '{weeks}' to insert the month's weeks.
+			@property {string} weekHeader A week header: '{days}' to insert individual day names.
+			@property {string} dayHeader Individual day header: '{day}' to insert day name.
+			@property {string} week One week of the month: '{days}' to insert the week's days,
+				'{weekOfYear}' to insert week of year.
+			@property {string} day An individual day: '{day}' to insert day value.
+			@property {string} monthSelector jQuery selector, relative to picker, for a single month.
+			@property {string} daySelector jQuery selector, relative to picker, for individual days.
+			@property {string} rtlClass Class for right-to-left (RTL) languages.
+			@property {string} multiClass Class for multi-month datepickers.
+			@property {string} defaultClass Class for selectable dates.
+			@property {string} selectedClass Class for currently selected dates.
+			@property {string} highlightedClass Class for highlighted dates.
+			@property {string} todayClass Class for today.
+			@property {string} otherMonthClass Class for days from other months.
+			@property {string} weekendClass Class for days on weekends.
+			@property {string} commandClass Class prefix for commands.
+			@property {string} commandButtonClass Extra class(es) for commands that are buttons.
+			@property {string} commandLinkClass Extra class(es) for commands that are links.
+			@property {string} disabledClass Class for disabled commands. */
+		defaultRenderer: {
+			picker: '<div class="calendars">' +
+			'<div class="calendars-nav">{link:prev}{link:today}{link:next}</div>{months}' +
+			'{popup:start}<div class="calendars-ctrl">{link:clear}{link:close}</div>{popup:end}' +
+			'<div class="calendars-clear-fix"></div></div>',
+			monthRow: '<div class="calendars-month-row">{months}</div>',
+			month: '<div class="calendars-month"><div class="calendars-month-header">{monthHeader}</div>' +
+			'<table><thead>{weekHeader}</thead><tbody>{weeks}</tbody></table></div>',
+			weekHeader: '<tr>{days}</tr>',
+			dayHeader: '<th>{day}</th>',
+			week: '<tr>{days}</tr>',
+			day: '<td>{day}</td>',
+			monthSelector: '.calendars-month',
+			daySelector: 'td',
+			rtlClass: 'calendars-rtl',
+			multiClass: 'calendars-multi',
+			defaultClass: '',
+			selectedClass: 'calendars-selected',
+			highlightedClass: 'calendars-highlight',
+			todayClass: 'calendars-today',
+			otherMonthClass: 'calendars-other-month',
+			weekendClass: 'calendars-weekend',
+			commandClass: 'calendars-cmd',
+			commandButtonClass: '',
+			commandLinkClass: '',
+			disabledClass: 'calendars-disabled'
+		},
+
+		/** Command actions that may be added to a layout by name.
+			<ul>
+			<li>prev - Show the previous month (based on <code>monthsToStep</code> option) - <em>PageUp</em></li>
+			<li>prevJump - Show the previous year (based on <code>monthsToJump</code> option) - <em>Ctrl+PageUp</em></li>
+			<li>next - Show the next month (based on <code>monthsToStep</code> option) - <em>PageDown</em></li>
+			<li>nextJump - Show the next year (based on <code>monthsToJump</code> option) - <em>Ctrl+PageDown</em></li>
+			<li>current - Show the currently selected month or today's if none selected - <em>Ctrl+Home</em></li>
+			<li>today - Show today's month - <em>Ctrl+Home</em></li>
+			<li>clear - Erase the date and close the datepicker popup - <em>Ctrl+End</em></li>
+			<li>close - Close the datepicker popup - <em>Esc</em></li>
+			<li>prevWeek - Move the cursor to the previous week - <em>Ctrl+Up</em></li>
+			<li>prevDay - Move the cursor to the previous day - <em>Ctrl+Left</em></li>
+			<li>nextDay - Move the cursor to the next day - <em>Ctrl+Right</em></li>
+			<li>nextWeek - Move the cursor to the next week - <em>Ctrl+Down</em></li>
+			</ul>
+			The command name is the key name and is used to add the command to a layout
+			with '{button:<em>name</em>}' or '{link:<em>name</em>}'. Each has the following attributes.
+			@memberof CalendarsPicker
+			@property {string} text The field in the regional settings for the displayed text.
+			@property {string} status The field in the regional settings for the status text.
+			@property {object} keystroke The keystroke to trigger the action, with attributes:
+			@property {number} keystroke.keyCode the code for the keystroke,
+			@property {boolean} [keystroke.ctrlKey] <code>true</code> if <em>Ctrl</em> is required,
+			@property {boolean} [keystroke.altKey] <code>true</code> if <em>Alt</em> is required,
+			@property {boolean} [keystroke.shiftKey] <code>true</code> if <em>Shift</em> is required.
+			@property {CalendarsPickerCommandEnabled} enabled The function that indicates the command is enabled.
+			@property {CalendarsPickerCommandDate} date The function to get the date associated with this action.
+			@property {CalendarsPickerCommandAction} action The function that implements the action. */
+		commands: {
+			prev: {
+				text: 'prevText',
+				status: 'prevStatus', // Previous month
+				keystroke: {keyCode: 33}, // Page up
+				enabled: function(inst) {
+					var minDate = inst.curMinDate();
+					return (!minDate || inst.drawDate.newDate().
+						add(1 - inst.options.monthsToStep - inst.options.monthsOffset, 'm').
+						day(inst.options.calendar.minDay).add(-1, 'd').compareTo(minDate) !== -1);
+				},
+				date: function(inst) {
+					return inst.drawDate.newDate().
+						add(-inst.options.monthsToStep - inst.options.monthsOffset, 'm').
+						day(inst.options.calendar.minDay);
+				},
+				action: function(inst) {
+					plugin.changeMonth(this, -inst.options.monthsToStep);
+				}
+			},
+			prevJump: {
+				text: 'prevJumpText',
+				status: 'prevJumpStatus', // Previous year
+				keystroke: {keyCode: 33, ctrlKey: true}, // Ctrl + Page up
+				enabled: function(inst) {
+					var minDate = inst.curMinDate();
+					return (!minDate || inst.drawDate.newDate().
+						add(1 - inst.options.monthsToJump - inst.options.monthsOffset, 'm').
+						day(inst.options.calendar.minDay).add(-1, 'd').compareTo(minDate) !== -1);
+				},
+				date: function(inst) {
+					return inst.drawDate.newDate().
+						add(-inst.options.monthsToJump - inst.options.monthsOffset, 'm').
+						day(inst.options.calendar.minDay);
+				},
+				action: function(inst) {
+					plugin.changeMonth(this, -inst.options.monthsToJump);
+				}
+			},
+			next: {
+				text: 'nextText',
+				status: 'nextStatus', // Next month
+				keystroke: {keyCode: 34}, // Page down
+				enabled: function(inst) {
+					var maxDate = inst.get('maxDate');
+					return (!maxDate || inst.drawDate.newDate().
+						add(inst.options.monthsToStep - inst.options.monthsOffset, 'm').
+						day(inst.options.calendar.minDay).compareTo(maxDate) !== +1);
+				},
+				date: function(inst) {
+					return inst.drawDate.newDate().
+						add(inst.options.monthsToStep - inst.options.monthsOffset, 'm').
+						day(inst.options.calendar.minDay);
+				},
+				action: function(inst) {
+					plugin.changeMonth(this, inst.options.monthsToStep);
+				}
+			},
+			nextJump: {
+				text: 'nextJumpText',
+				status: 'nextJumpStatus', // Next year
+				keystroke: {keyCode: 34, ctrlKey: true}, // Ctrl + Page down
+				enabled: function(inst) {
+					var maxDate = inst.get('maxDate');
+					return (!maxDate || inst.drawDate.newDate().
+						add(inst.options.monthsToJump - inst.options.monthsOffset, 'm').
+						day(inst.options.calendar.minDay).compareTo(maxDate) !== +1);
+				},
+				date: function(inst) {
+					return inst.drawDate.newDate().
+						add(inst.options.monthsToJump - inst.options.monthsOffset, 'm').
+						day(inst.options.calendar.minDay);
+				},
+				action: function(inst) {
+					plugin.changeMonth(this, inst.options.monthsToJump);
+				}
+			},
+			current: {
+				text: 'currentText',
+				status: 'currentStatus', // Current month
+				keystroke: {keyCode: 36, ctrlKey: true}, // Ctrl + Home
+				enabled: function(inst) {
+					var minDate = inst.curMinDate();
+					var maxDate = inst.get('maxDate');
+					var curDate = inst.selectedDates[0] || inst.options.calendar.today();
+					return (!minDate || curDate.compareTo(minDate) !== -1) &&
+						(!maxDate || curDate.compareTo(maxDate) !== +1);
+				},
+				date: function(inst) {
+					return inst.selectedDates[0] || inst.options.calendar.today();
+				},
+				action: function(inst) {
+					var curDate = inst.selectedDates[0] || inst.options.calendar.today();
+					plugin.showMonth(this, curDate.year(), curDate.month());
+				}
+			},
+			today: {
+				text: 'todayText',
+				status: 'todayStatus', // Today's month
+				keystroke: {keyCode: 36, ctrlKey: true}, // Ctrl + Home
+				enabled: function(inst) {
+					var minDate = inst.curMinDate();
+					var maxDate = inst.get('maxDate');
+					return (!minDate || inst.options.calendar.today().compareTo(minDate) !== -1) &&
+						(!maxDate || inst.options.calendar.today().compareTo(maxDate) !== +1);
+				},
+				date: function(inst) {
+					return inst.options.calendar.today();
+				},
+				action: function() {
+					plugin.showMonth(this);
+				}
+			},
+			clear: {
+				text: 'clearText',
+				status: 'clearStatus', // Clear the datepicker
+				keystroke: {keyCode: 35, ctrlKey: true}, // Ctrl + End
+				enabled: function() { return true; },
+				date: function() { return null; },
+				action: function() { plugin.clear(this); }
+			},
+			close: {
+				text: 'closeText',
+				status: 'closeStatus', // Close the datepicker
+				keystroke: {keyCode: 27}, // Escape
+				enabled: function() { return true; },
+				date: function() { return null; },
+				action: function() { plugin.hide(this); }
+			},
+			prevWeek: {
+				text: 'prevWeekText',
+				status: 'prevWeekStatus', // Previous week
+				keystroke: {keyCode: 38, ctrlKey: true}, // Ctrl + Up
+				enabled: function(inst) {
+					var minDate = inst.curMinDate();
+					return (!minDate || inst.drawDate.newDate().
+						add(-inst.options.calendar.daysInWeek(), 'd').compareTo(minDate) !== -1);
+				},
+				date: function(inst) {
+					return inst.drawDate.newDate().add(-inst.options.calendar.daysInWeek(), 'd');
+				},
+				action: function(inst) {
+					plugin.changeDay(this, -inst.options.calendar.daysInWeek());
+				}
+			},
+			prevDay: {
+				text: 'prevDayText',
+				status: 'prevDayStatus', // Previous day
+				keystroke: {keyCode: 37, ctrlKey: true}, // Ctrl + Left
+				enabled: function(inst) {
+					var minDate = inst.curMinDate();
+					return (!minDate || inst.drawDate.newDate().add(-1, 'd').compareTo(minDate) !== -1);
+				},
+				date: function(inst) {
+					return inst.drawDate.newDate().add(-1, 'd');
+				},
+				action: function() {
+					plugin.changeDay(this, -1);
+				}
+			},
+			nextDay: {
+				text: 'nextDayText',
+				status: 'nextDayStatus', // Next day
+				keystroke: {keyCode: 39, ctrlKey: true}, // Ctrl + Right
+				enabled: function(inst) {
+					var maxDate = inst.get('maxDate');
+					return (!maxDate || inst.drawDate.newDate().add(1, 'd').compareTo(maxDate) !== +1);
+				},
+				date: function(inst) {
+					return inst.drawDate.newDate().add(1, 'd');
+				},
+				action: function() {
+					plugin.changeDay(this, 1);
+				}
+			},
+			nextWeek: {
+				text: 'nextWeekText',
+				status: 'nextWeekStatus', // Next week
+				keystroke: {keyCode: 40, ctrlKey: true}, // Ctrl + Down
+				enabled: function(inst) {
+					var maxDate = inst.get('maxDate');
+					return (!maxDate || inst.drawDate.newDate().
+						add(inst.options.calendar.daysInWeek(), 'd').compareTo(maxDate) !== +1);
+				},
+				date: function(inst) {
+					return inst.drawDate.newDate().add(inst.options.calendar.daysInWeek(), 'd');
+				},
+				action: function(inst) {
+					plugin.changeDay(this, inst.options.calendar.daysInWeek());
+				}
+			}
+		},
+
+		/** Determine whether a command is enabled.
+			@callback CalendarsPickerCommandEnabled
+			@param {object} inst The current instance settings.
+			@return {boolean} <code>true</code> if this command is enabled, <code>false</code> if not.
+			@example enabled: function(inst) {
+  return !!inst.curMinDate();
+} */
+
+		/** Calculate the representative date for a command.
+			@callback CalendarsPickerCommandDate
+			@param {object} inst The current instance settings.
+			@return {CDate} A date appropriate for this command.
+			@example date: function(inst) {
+  return inst.curMinDate();
+} */
+
+		/** Perform the action for a command.
+			@callback CalendarsPickerCommandAction
+			@param {object} inst The current instance settings.
+			@example date: function(inst) {
+  $.datepick.setDate(inst.elem, inst.curMinDate());
+} */
+
+		/** Calculate the week of the year for a date.
+			@callback CalendarsPickerCalculateWeek
+			@param {CDate} date The date to evaluate.
+			@return {number} The week of the year.
+			@example calculateWeek: function(date) {
+  var startYear = date.newDate(date.year(), 1, 1);
+  return Math.floor((date.dayOfYear() - startYear.dayOfYear()) / 7) + 1;
+} */
+
+		/** Provide information about an individual date shown in the calendar.
+			@callback CalendarsPickerOnDate
+			@param {CDate} date The date to evaluate.
+			@return {object} Information about that date, with the properties above.
+			@property {boolean} selectable <code>true</code> if this date can be selected.
+			@property {string} dateClass Class(es) to be applied to the date.
+			@property {string} content The date cell content.
+			@property {string} tooltip A popup tooltip for the date.
+			@example onDate: function(date) {
+  return {selectable: date.day() > 0 && date.day() < 5,
+    dateClass: date.day() === 4 ? 'last-day' : ''};
+} */
+
+		/** Update the datepicker display.
+			@callback CalendarsPickerOnShow
+			@param {jQuery} picker The datepicker <code>div</code> to be shown.
+			@param {object} inst The current instance settings.
+			@example onShow: function(picker, inst) {
+  picker.append('<button type="button">Hi</button>').
+    find('button:last').click(function() {
+      alert('Hi!');
+    });
+} */
+
+		/** React to navigating through the months/years.
+			@callback CalendarsPickerOnChangeMonthYear
+			@param {number} year The new year.
+			@param {number} month The new month (calendar minimum month to maximum month).
+			@example onChangeMonthYear: function(year, month) {
+  alert('Now in ' + month + '/' + year);
+} */
+
+		/** Datepicker on select callback.
+			Triggered when a date is selected.
+			@callback CalendarsPickerOnSelect
+			@param {CDate[]} dates The selected date(s).
+			@example onSelect: function(dates) {
+  alert('Selected ' + dates);
+} */
+
+		/** Datepicker on close callback.
+			Triggered when a popup calendar is closed.
+			@callback CalendarsPickerOnClose
+			@param {CDate[]} dates The selected date(s).
+			@example onClose: function(dates) {
+  alert('Selected ' + dates);
+} */
+
+		/** Default settings for the plugin.
+			@memberof CalendarsPicker
+			@property {Calendar} [calendar=$.calendars.instance()] The calendar for this datepicker.
+			@property {string} [pickerClass=''] CSS class to add to this instance of the datepicker.
+			@property {boolean} [showOnFocus=true] <code>true</code> for popup on focus, <code>false</code> for not.
+			@property {string|Element|jQuery} [showTrigger=null] Element to be cloned for a trigger,
+				<code>null</code> for none.
+			@property {string} [showAnim='show'] Name of jQuery animation for popup, '' for no animation.
+			@property {object} [showOptions=null] Options for enhanced animations.
+			@property {string|number} [showSpeed='normal'] Duration of display/closure, named or in milliseconds.
+			@property {string|Element|jQuery} [popupContainer=null] The element to which a popup calendar is added,
+				<code>null</code> for body.
+			@property {string} [alignment='bottom'] Alignment of popup - with nominated corner of input:
+				'top' or 'bottom' aligns depending on language direction,
+				'topLeft', 'topRight', 'bottomLeft', 'bottomRight'.
+			@property {boolean} [fixedWeeks=false] <code>true</code> to always show 6 weeks,
+				<code>false</code> to only show as many as are needed.
+			@property {number} [firstDay=null] First day of the week, 0 = Sunday, 1 = Monday, etc.,
+				<code>null</code> for <code>calendar</code> default.
+			@property {CalendarsPickerCalculateWeek} [calculateWeek=null] Calculate week of the year from a date,
+				<code>null</code> for <code>calendar</code> default.
+			@property {boolean} [localNumbers=false] <code>true</code> to localise numbers (if available),
+				<code>false</code> to use normal Arabic numerals.
+			@property {number|number[]} [monthsToShow=1] How many months to show, cols or [rows, cols].
+			@property {number} [monthsOffset=0] How many months to offset the primary month by;
+				may be a function that takes the date and returns the offset.
+			@property {number} [monthsToStep=1] How many months to move when prev/next clicked.
+			@property {number} [monthsToJump=12] How many months to move when large prev/next clicked.
+			@property {boolean} [useMouseWheel=true] <code>true</code> to use mousewheel if available,
+				<code>false</code> to never use it.
+			@property {boolean} [changeMonth=true] <code>true</code> to change month/year via drop-down,
+				<code>false</code> for navigation only.
+			@property {string} [yearRange='c-10:c+10'] Range of years to show in drop-down: 'any' for direct text entry
+				or 'start:end', where start/end are '+-nn' for relative to today
+				or 'c+-nn' for relative to the currently selected date
+				or 'nnnn' for an absolute year.
+			@property {boolean} [showOtherMonths=false] <code>true</code> to show dates from other months,
+				<code>false</code> to not show them.
+			@property {boolean} [selectOtherMonths=false] <code>true</code> to allow selection of dates
+				from other months too.
+			@property {string|number|CDate} [defaultDate=null] Date to show if no other selected.
+			@property {boolean} [selectDefaultDate=false] <code>true</code> to pre-select the default date
+				if no other is chosen.
+			@property {string|number|CDate} [minDate=null] The minimum selectable date.
+			@property {string|number|CDate} [maxDate=null] The maximum selectable date.
+			@property {string} [dateFormat='mm/dd/yyyy'] Format for dates.
+			@property {boolean} [autoSize=false] <code>true</code> to size the input field according to the date format.
+			@property {boolean} [rangeSelect=false] Allows for selecting a date range on one date picker.
+			@property {string} [rangeSeparator=' - '] Text between two dates in a range.
+			@property {number} [multiSelect=0] Maximum number of selectable dates, zero for single select.
+			@property {string} [multiSeparator=','] Text between multiple dates.
+			@property {CalendarsPickerOnDate} [onDate=null] Callback as a date is added to the datepicker.
+			@property {CalendarsPickerOnShow} [onShow=null] Callback just before a datepicker is shown.
+			@property {CalendarsPickerOnChangeMonthYear} [onChangeMonthYear=null] Callback when a new month/year
+				is selected.
+			@property {CalendarsPickerOnSelect} [onSelect=null] Callback when a date is selected.
+			@property {CalendarsPickerOnClose} [onClose=null] Callback when a datepicker is closed.
+			@property {string|Element|jQuery} [altField=null] Alternate field to update in synch with the datepicker.
+			@property {string} [altFormat=null] Date format for alternate field, defaults to <code>dateFormat</code>.
+			@property {boolean} [constrainInput=true] <code>true</code> to constrain typed input to
+				<code>dateFormat</code> allowed characters.
+			@property {boolean} [commandsAsDateFormat=false] <code>true</code> to apply
+				<code><a href="#formatDate">formatDate</a></code> to the command texts.
+			@property {object} [commands=this.commands] Command actions that may be added to a layout by name.
+			@example $(selector).calendarsPicker({calendar: $.calendars.instance('persian')})
+$(selector).calendarsPicker({monthsToShow: [2, 3], monthsToStep: 6})
+$(selector).calendarsPicker({minDate: $.calendars.newDate(2001, 1, 1),
+  maxDate: $.calendars.newDate(2010, 12, 31)}) */
+		defaultOptions: {
+			calendar: $.calendars.instance(),
+			pickerClass: '',
+			showOnFocus: true,
+			showTrigger: null,
+			showAnim: 'show',
+			showOptions: {},
+			showSpeed: 'normal',
+			popupContainer: null,
+			alignment: 'bottom',
+			fixedWeeks: false,
+			firstDay: null,
+			calculateWeek: null,
+			localNumbers: false,
+			monthsToShow: 1,
+			monthsOffset: 0,
+			monthsToStep: 1,
+			monthsToJump: 12,
+			useMouseWheel: true,
+			changeMonth: true,
+			yearRange: 'c-10:c+10',
+			showOtherMonths: false,
+			selectOtherMonths: false,
+			defaultDate: null,
+			selectDefaultDate: false,
+			minDate: null,
+			maxDate: null,
+			dateFormat: null,
+			autoSize: false,
+			rangeSelect: false,
+			rangeSeparator: ' - ',
+			multiSelect: 0,
+			multiSeparator: ',',
+			onDate: null,
+			onShow: null,
+			onChangeMonthYear: null,
+			onSelect: null,
+			onClose: null,
+			altField: null,
+			altFormat: null,
+			constrainInput: true,
+			commandsAsDateFormat: false,
+			commands: {} // this.commands
+		},
+
+		/** Localisations for the plugin.
+			Entries are objects indexed by the language code ('' being the default US/English).
+			Each object has the following attributes.
+			@memberof CalendarsPicker
+			@property {string} [renderer=this.defaultRenderer] The rendering templates.
+			@property {string} [prevText='&lt;Prev'] Text for the previous month command.
+			@property {string} [prevStatus='Show the previous month'] Status text for the
+						previous month command.
+			@property {string} [prevJumpText='&lt;&lt;']  Text for the previous year command.
+			@property {string} [prevJumpStatus='Show the previous year'] Status text for the
+						previous year command.
+			@property {string} [nextText='Next&gt;'] Text for the next month command.
+			@property {string} [nextStatus='Show the next month'] Status text for the next month command.
+			@property {string} [nextJumpText='&gt;&gt;'] Text for the next year command.
+			@property {string} [nextJumpStatus='Show the next year'] Status text for the
+						next year command.
+			@property {string} [currentText='Current'] Text for the current month command.
+			@property {string} [currentStatus='Show the current month']  Status text for the
+						current month command.
+			@property {string} [todayText='Today'] Text for the today's month command.
+			@property {string} [todayStatus='Show today\'s month']  Status text for the today's month command.
+			@property {string} [clearText='Clear'] Text for the clear command.
+			@property {string} [clearStatus='Clear all the dates'] Status text for the clear command.
+			@property {string} [closeText='Close'] Text for the close command.
+			@property {string} [closeStatus='Close the datepicker']  Status text for the close command.
+			@property {string} [yearStatus='Change the year'] Status text for year selection.
+			@property {string} [earlierText='&#160;&#160;▲'] Text for earlier years.
+			@property {string} [laterText='&#160;&#160;▼'] Text for later years.
+			@property {string} [monthStatus='Change the month'] Status text for month selection.
+			@property {string} [weekText='Wk'] Text for week of the year column header.
+			@property {string} [weekStatus='Week of the year'] Status text for week of the year
+						column header.
+			@property {string} [dayStatus='Select DD, M d, yyyy'] Status text for selectable days.
+			@property {string} [defaultStatus='Select a date'] Status text shown by default.
+			@property {boolean} [isRTL=false] <code>true</code> if language is right-to-left. */
+		regionalOptions: { // Available regional settings, indexed by language/country code
+			'': { // Default regional settings - English/US
+				renderer: {}, // this.defaultRenderer
+				prevText: '&lt;Prev',
+				prevStatus: 'Show the previous month',
+				prevJumpText: '&lt;&lt;',
+				prevJumpStatus: 'Show the previous year',
+				nextText: 'Next&gt;',
+				nextStatus: 'Show the next month',
+				nextJumpText: '&gt;&gt;',
+				nextJumpStatus: 'Show the next year',
+				currentText: 'Current',
+				currentStatus: 'Show the current month',
+				todayText: 'Today',
+				todayStatus: 'Show today\'s month',
+				clearText: 'Clear',
+				clearStatus: 'Clear all the dates',
+				closeText: 'Close',
+				closeStatus: 'Close the datepicker',
+				yearStatus: 'Change the year',
+				earlierText: '&#160;&#160;▲',
+				laterText: '&#160;&#160;▼',
+				monthStatus: 'Change the month',
+				weekText: 'Wk',
+				weekStatus: 'Week of the year',
+				dayStatus: 'Select DD, M d, yyyy',
+				defaultStatus: 'Select a date',
+				isRTL: false
+			}
+		},
+
+		_disabled: [],
+
+		_popupClass: 'calendars-popup', // Marker for popup division
+		_triggerClass: 'calendars-trigger', // Marker for trigger element
+		_disableClass: 'calendars-disable', // Marker for disabled element
+		_monthYearClass: 'calendars-month-year', // Marker for month/year inputs
+		_curMonthClass: 'calendars-month-', // Marker for current month/year
+		_anyYearClass: 'calendars-any-year', // Marker for year direct input
+		_curDoWClass: 'calendars-dow-', // Marker for day of week
+
+		_init: function() {
+			this.defaultOptions.commands = this.commands;
+			this.regionalOptions[''].renderer = this.defaultRenderer;
+			this._super();
+		},
+
+		_instSettings: function(elem, options) { // jshint unused:false
+			return {selectedDates: [], drawDate: null, pickingRange: false,
+				inline: ($.inArray(elem[0].nodeName.toLowerCase(), ['div', 'span']) > -1),
+				get: function(name) { // Get a setting value, computing if necessary
+					if ($.inArray(name, ['defaultDate', 'minDate', 'maxDate']) > -1) { // Decode date settings
+						return this.options.calendar.determineDate(this.options[name], null,
+							this.selectedDates[0], this.get('dateFormat'), this.getConfig());
+					}
+					if (name === 'dateFormat') {
+						return this.options.dateFormat || this.options.calendar.local.dateFormat;
+					}
+					return this.options[name];
+				},
+				curMinDate: function() {
+					return (this.pickingRange ? this.selectedDates[0] : this.get('minDate'));
+				},
+				getConfig: function() {
+					return {dayNamesShort: this.options.dayNamesShort, dayNames: this.options.dayNames,
+						monthNamesShort: this.options.monthNamesShort, monthNames: this.options.monthNames,
+						calculateWeek: this.options.calculateWeek, shortYearCutoff: this.options.shortYearCutoff};
+				}
+			};
+		},
+
+		_postAttach: function(elem, inst) {
+			if (inst.inline) {
+				inst.drawDate = plugin._checkMinMax((inst.selectedDates[0] ||
+					inst.get('defaultDate') || inst.options.calendar.today()).newDate(), inst);
+				inst.prevDate = inst.drawDate.newDate();
+				this._update(elem[0]);
+				if ($.fn.mousewheel) {
+					elem.mousewheel(this._doMouseWheel);
+				}
+			}
+			else {
+				this._attachments(elem, inst);
+				elem.on('keydown.' + inst.name, this._keyDown).on('keypress.' + inst.name, this._keyPress).
+					on('keyup.' + inst.name, this._keyUp);
+				if (elem.attr('disabled')) {
+					this.disable(elem[0]);
+				}
+			}
+		},
+
+		_optionsChanged: function(elem, inst, options) {
+			if (options.calendar && options.calendar !== inst.options.calendar) {
+				var discardDate = function(name) {
+					return (typeof inst.options[name] === 'object' ? null : inst.options[name]);
+				};
+				options = $.extend({defaultDate: discardDate('defaultDate'),
+					minDate: discardDate('minDate'), maxDate: discardDate('maxDate')}, options);
+				inst.selectedDates = [];
+				inst.drawDate = null;
+			}
+			var dates = inst.selectedDates;
+			$.extend(inst.options, options);
+			this.setDate(elem[0], dates, null, false, true);
+			inst.pickingRange = false;
+			var calendar = inst.options.calendar;
+			var defaultDate = inst.get('defaultDate');
+			inst.drawDate = this._checkMinMax((defaultDate ? defaultDate : inst.drawDate) ||
+				defaultDate || calendar.today(), inst).newDate();
+			if (!inst.inline) {
+				this._attachments(elem, inst);
+			}
+			if (inst.inline || inst.div) {
+				this._update(elem[0]);
+			}
+		},
+
+		/** Attach events and trigger, if necessary.
+			@memberof CalendarsPicker
+			@private
+			@param {jQuery} elem The control to affect.
+			@param {object} inst The current instance settings. */
+		_attachments: function(elem, inst) {
+			elem.off('focus.' + inst.name);
+			if (inst.options.showOnFocus) {
+				elem.on('focus.' + inst.name, this.show);
+			}
+			if (inst.trigger) {
+				inst.trigger.remove();
+			}
+			var trigger = inst.options.showTrigger;
+			inst.trigger = (!trigger ? $([]) :
+				$(trigger).clone().removeAttr('id').addClass(this._triggerClass)
+					[inst.options.isRTL ? 'insertBefore' : 'insertAfter'](elem).
+					click(function() {
+						if (!plugin.isDisabled(elem[0])) {
+							plugin[plugin.curInst === inst ? 'hide' : 'show'](elem[0]);
+						}
+					}));
+			this._autoSize(elem, inst);
+			var dates = this._extractDates(inst, elem.val());
+			if (dates) {
+				this.setDate(elem[0], dates, null, true);
+			}
+			var defaultDate = inst.get('defaultDate');
+			if (inst.options.selectDefaultDate && defaultDate && inst.selectedDates.length === 0) {
+				this.setDate(elem[0], (defaultDate || inst.options.calendar.today()).newDate());
+			}
+		},
+
+		/** Apply the maximum length for the date format.
+			@memberof CalendarsPicker
+			@private
+			@param {jQuery} elem The control to affect.
+			@param {object} inst The current instance settings. */
+		_autoSize: function(elem, inst) {
+			if (inst.options.autoSize && !inst.inline) {
+				var calendar = inst.options.calendar;
+				var date = calendar.newDate(2009, 10, 20); // Ensure double digits
+				var dateFormat = inst.get('dateFormat');
+				if (dateFormat.match(/[DM]/)) {
+					var findMax = function(names) {
+						var max = 0;
+						var maxI = 0;
+						for (var i = 0; i < names.length; i++) {
+							if (names[i].length > max) {
+								max = names[i].length;
+								maxI = i;
+							}
+						}
+						return maxI;
+					};
+					date.month(findMax(calendar.local[dateFormat.match(/MM/) ? // Longest month
+						'monthNames' : 'monthNamesShort']) + 1);
+					date.day(findMax(calendar.local[dateFormat.match(/DD/) ? // Longest day
+						'dayNames' : 'dayNamesShort']) + 20 - date.dayOfWeek());
+				}
+				inst.elem.attr('size', date.formatDate(dateFormat,
+					{localNumbers: inst.options.localnumbers}).length);
+			}
+		},
+
+		_preDestroy: function(elem, inst) {
+			if (inst.trigger) {
+				inst.trigger.remove();
+			}
+			elem.empty().off('.' + inst.name);
+			if (inst.inline && $.fn.mousewheel) {
+				elem.unmousewheel();
+			}
+			if (!inst.inline && inst.options.autoSize) {
+				elem.removeAttr('size');
+			}
+		},
+
+		/** Apply multiple event functions.
+			@memberof CalendarsPicker
+			@param {function} fns The functions to apply.
+			@example onShow: multipleEvents(fn1, fn2, ...) */
+		multipleEvents: function(fns) { // jshint unused:false
+			var funcs = arguments;
+			return function() {
+				for (var i = 0; i < funcs.length; i++) {
+					funcs[i].apply(this, arguments);
+				}
+			};
+		},
+
+		/** Enable the control.
+			@memberof CalendarsPicker
+			@param {Element} elem The control to affect.
+			@example $(selector).datepick('enable') */
+		enable: function(elem) {
+			elem = $(elem);
+			if (!elem.hasClass(this._getMarker())) {
+				return;
+			}
+			var inst = this._getInst(elem);
+			if (inst.inline) {
+				elem.children('.' + this._disableClass).remove().end().
+					find('button,select').prop('disabled', false).end().
+					find('a').attr('href', '#');
+			}
+			else {
+				elem.prop('disabled', false);
+				inst.trigger.filter('button.' + this._triggerClass).prop('disabled', false).end().
+					filter('img.' + this._triggerClass).css({opacity: '1.0', cursor: ''});
+			}
+			this._disabled = $.map(this._disabled,
+				function(value) { return (value === elem[0] ? null : value); }); // Delete entry
+		},
+
+		/** Disable the control.
+			@memberof CalendarsPicker
+			@param {Element} elem The control to affect.
+			@example $(selector).datepick('disable') */
+		disable: function(elem) {
+			elem = $(elem);
+			if (!elem.hasClass(this._getMarker())) {
+				return;
+			}
+			var inst = this._getInst(elem);
+			if (inst.inline) {
+				var inline = elem.children(':last');
+				var offset = inline.offset();
+				var relOffset = {left: 0, top: 0};
+				inline.parents().each(function() {
+					if ($(this).css('position') === 'relative') {
+						relOffset = $(this).offset();
+						return false;
+					}
+				});
+				var zIndex = elem.css('zIndex');
+				zIndex = (zIndex === 'auto' ? 0 : parseInt(zIndex, 10)) + 1;
+				elem.prepend('<div class="' + this._disableClass + '" style="' +
+					'width: ' + inline.outerWidth() + 'px; height: ' + inline.outerHeight() +
+					'px; left: ' + (offset.left - relOffset.left) + 'px; top: ' +
+					(offset.top - relOffset.top) + 'px; z-index: ' + zIndex + '"></div>').
+					find('button,select').prop('disabled', true).end().
+					find('a').removeAttr('href');
+			}
+			else {
+				elem.prop('disabled', true);
+				inst.trigger.filter('button.' + this._triggerClass).prop('disabled', true).end().
+					filter('img.' + this._triggerClass).css({opacity: '0.5', cursor: 'default'});
+			}
+			this._disabled = $.map(this._disabled,
+				function(value) { return (value === elem[0] ? null : value); }); // Delete entry
+			this._disabled.push(elem[0]);
+		},
+
+		/** Is the first field in a jQuery collection disabled as a datepicker?
+			@memberof CalendarsPicker
+			@param {Element} elem The control to examine.
+			@return {boolean} <code>true</code> if disabled, <code>false</code> if enabled.
+			@example if ($(selector).datepick('isDisabled')) {...} */
+		isDisabled: function(elem) {
+			return (elem && $.inArray(elem, this._disabled) > -1);
+		},
+
+		/** Show a popup datepicker.
+			@memberof CalendarsPicker
+			@param {Event|Element} elem a focus event or the control to use.
+			@example $(selector).datepick('show') */
+		show: function(elem) {
+			elem = $(elem.target || elem);
+			var inst = plugin._getInst(elem);
+			if (plugin.curInst === inst) {
+				return;
+			}
+			if (plugin.curInst) {
+				plugin.hide(plugin.curInst, true);
+			}
+			if (!$.isEmptyObject(inst)) {
+				// Retrieve existing date(s)
+				inst.lastVal = null;
+				inst.selectedDates = plugin._extractDates(inst, elem.val());
+				inst.pickingRange = false;
+				inst.drawDate = plugin._checkMinMax((inst.selectedDates[0] ||
+					inst.get('defaultDate') || inst.options.calendar.today()).newDate(), inst);
+				inst.prevDate = inst.drawDate.newDate();
+				plugin.curInst = inst;
+				// Generate content
+				plugin._update(elem[0], true);
+				// Adjust position before showing
+				var offset = plugin._checkOffset(inst);
+				inst.div.css({left: offset.left, top: offset.top});
+				// And display
+				var showAnim = inst.options.showAnim;
+				var showSpeed = inst.options.showSpeed;
+				showSpeed = (showSpeed === 'normal' && $.ui &&
+					parseInt($.ui.version.substring(2)) >= 8 ? '_default' : showSpeed);
+				if ($.effects && ($.effects[showAnim] || ($.effects.effect && $.effects.effect[showAnim]))) {
+					var data = inst.div.data(); // Update old effects data
+					for (var key in data) {
+						if (key.match(/^ec\.storage\./)) {
+							data[key] = inst._mainDiv.css(key.replace(/ec\.storage\./, ''));
+						}
+					}
+					inst.div.data(data).show(showAnim, inst.options.showOptions, showSpeed);
+				}
+				else {
+					inst.div[showAnim || 'show'](showAnim ? showSpeed : 0);
+				}
+			}
+		},
+
+		/** Extract possible dates from a string.
+			@memberof CalendarsPicker
+			@private
+			@param {object} inst The current instance settings.
+			@param {string} text The text to extract from.
+			@return {CDate[]} The extracted dates. */
+		_extractDates: function(inst, datesText) {
+			if (datesText === inst.lastVal) {
+				return;
+			}
+			inst.lastVal = datesText;
+			datesText = datesText.split(inst.options.multiSelect ? inst.options.multiSeparator :
+				(inst.options.rangeSelect ? inst.options.rangeSeparator : '\x00'));
+			var dates = [];
+			for (var i = 0; i < datesText.length; i++) {
+				try {
+					var date = inst.options.calendar.parseDate(inst.get('dateFormat'), datesText[i]);
+					if (date) {
+						var found = false;
+						for (var j = 0; j < dates.length; j++) {
+							if (dates[j].compareTo(date) === 0) {
+								found = true;
+								break;
+							}
+						}
+						if (!found) {
+							dates.push(date);
+						}
+					}
+				}
+				catch (e) {
+					// Ignore
+				}
+			}
+			dates.splice(inst.options.multiSelect || (inst.options.rangeSelect ? 2 : 1), dates.length);
+			if (inst.options.rangeSelect && dates.length === 1) {
+				dates[1] = dates[0];
+			}
+			return dates;
+		},
+
+		/** Update the datepicker display.
+			@memberof CalendarsPicker
+			@private
+			@param {Event|Element} elem A focus event or the control to use.
+			@param {boolean} hidden <code>true</code> to initially hide the datepicker. */
+		_update: function(elem, hidden) {
+			elem = $(elem.target || elem);
+			var inst = plugin._getInst(elem);
+			if (!$.isEmptyObject(inst)) {
+				if (inst.inline || plugin.curInst === inst) {
+					if ($.isFunction(inst.options.onChangeMonthYear) && (!inst.prevDate ||
+							inst.prevDate.year() !== inst.drawDate.year() ||
+							inst.prevDate.month() !== inst.drawDate.month())) {
+						inst.options.onChangeMonthYear.apply(elem[0],
+							[inst.drawDate.year(), inst.drawDate.month()]);
+					}
+				}
+				if (inst.inline) {
+					var index = $('a, :input', elem).index($(':focus', elem));
+					elem.html(this._generateContent(elem[0], inst));
+					var focus = elem.find('a, :input');
+					focus.eq(Math.max(Math.min(index, focus.length - 1), 0)).focus();
+				}
+				else if (plugin.curInst === inst) {
+					if (!inst.div) {
+						inst.div = $('<div></div>').addClass(this._popupClass).
+							css({display: (hidden ? 'none' : 'static'), position: 'absolute',
+								left: elem.offset().left, top: elem.offset().top + elem.outerHeight()}).
+							appendTo($(inst.options.popupContainer || 'body'));
+						if ($.fn.mousewheel) {
+							inst.div.mousewheel(this._doMouseWheel);
+						}
+					}
+					inst.div.html(this._generateContent(elem[0], inst));
+					elem.focus();
+				}
+			}
+		},
+
+		/** Update the input field and any alternate field with the current dates.
+			@memberof CalendarsPicker
+			@private
+			@param {Element} elem The control to use.
+			@param {boolean} keyUp <code>true</code> if coming from <code>keyUp</code> processing (internal). */
+		_updateInput: function(elem, keyUp) {
+			var inst = this._getInst(elem);
+			if (!$.isEmptyObject(inst)) {
+				var value = '';
+				var altValue = '';
+				var sep = (inst.options.multiSelect ? inst.options.multiSeparator :
+					inst.options.rangeSeparator);
+				var calendar = inst.options.calendar;
+				var dateFormat = inst.get('dateFormat');
+				var altFormat = inst.options.altFormat || dateFormat;
+				var settings = {localNumbers: inst.options.localNumbers};
+				for (var i = 0; i < inst.selectedDates.length; i++) {
+					value += (keyUp ? '' : (i > 0 ? sep : '') +
+						calendar.formatDate(dateFormat, inst.selectedDates[i], settings));
+					altValue += (i > 0 ? sep : '') +
+						calendar.formatDate(altFormat, inst.selectedDates[i], settings);
+				}
+				if (!inst.inline && !keyUp) {
+					$(elem).val(value);
+				}
+				$(inst.options.altField).val(altValue);
+				if ($.isFunction(inst.options.onSelect) && !keyUp && !inst.inSelect) {
+					inst.inSelect = true; // Prevent endless loops
+					inst.options.onSelect.apply(elem, [inst.selectedDates]);
+					inst.inSelect = false;
+				}
+				$(elem).change();
+			}
+		},
+
+		/** Retrieve the size of left and top borders for an element.
+			@memberof CalendarsPicker
+			@private
+			@param {jQuery} elem The element of interest.
+			@return {number[]} The left and top borders. */
+		_getBorders: function(elem) {
+			var convert = function(value) {
+				return {thin: 1, medium: 3, thick: 5}[value] || value;
+			};
+			return [parseFloat(convert(elem.css('border-left-width'))),
+				parseFloat(convert(elem.css('border-top-width')))];
+		},
+
+		/** Check positioning to remain on the screen.
+			@memberof CalendarsPicker
+			@private
+			@param {object} inst The current instance settings.
+			@return {object} The updated offset for the datepicker. */
+		_checkOffset: function(inst) {
+			var base = (inst.elem.is(':hidden') && inst.trigger ? inst.trigger : inst.elem);
+			var offset = base.offset();
+			var browserWidth = $(window).width();
+			var browserHeight = $(window).height();
+			if (browserWidth === 0) {
+				return offset;
+			}
+			var isFixed = false;
+			$(inst.elem).parents().each(function() {
+				isFixed = isFixed || $(this).css('position') === 'fixed';
+				return !isFixed;
+			});
+			var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
+			var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
+			var above = offset.top - (isFixed ? scrollY : 0) - inst.div.outerHeight();
+			var below = offset.top - (isFixed ? scrollY : 0) + base.outerHeight();
+			var alignL = offset.left - (isFixed ? scrollX : 0);
+			var alignR = offset.left - (isFixed ? scrollX : 0) + base.outerWidth() - inst.div.outerWidth();
+			var tooWide = (offset.left - scrollX + inst.div.outerWidth()) > browserWidth;
+			var tooHigh = (offset.top - scrollY + inst.elem.outerHeight() +
+				inst.div.outerHeight()) > browserHeight;
+			inst.div.css('position', isFixed ? 'fixed' : 'absolute');
+			var alignment = inst.options.alignment;
+			if (alignment === 'topLeft') {
+				offset = {left: alignL, top: above};
+			}
+			else if (alignment === 'topRight') {
+				offset = {left: alignR, top: above};
+			}
+			else if (alignment === 'bottomLeft') {
+				offset = {left: alignL, top: below};
+			}
+			else if (alignment === 'bottomRight') {
+				offset = {left: alignR, top: below};
+			}
+			else if (alignment === 'top') {
+				offset = {left: (inst.options.isRTL || tooWide ? alignR : alignL), top: above};
+			}
+			else { // bottom
+				offset = {left: (inst.options.isRTL || tooWide ? alignR : alignL),
+					top: (tooHigh ? above : below)};
+			}
+			offset.left = Math.max((isFixed ? 0 : scrollX), offset.left);
+			offset.top = Math.max((isFixed ? 0 : scrollY), offset.top);
+			return offset;
+		},
+
+		/** Close date picker if clicked elsewhere.
+			@memberof CalendarsPicker
+			@private
+			@param {MouseEvent} event The mouse click to check. */
+		_checkExternalClick: function(event) {
+			if (!plugin.curInst) {
+				return;
+			}
+			var elem = $(event.target);
+			if (elem.closest('.' + plugin._popupClass + ',.' + plugin._triggerClass).length === 0 &&
+					!elem.hasClass(plugin._getMarker())) {
+				plugin.hide(plugin.curInst);
+			}
+		},
+
+		/** Hide a popup datepicker.
+			@memberof CalendarsPicker
+			@param {Element|object} elem The control to use or the current instance settings.
+			@param {boolean} immediate <code>true</code> to close immediately without animation (internal).
+			@example $(selector).datepick('hide') */
+		hide: function(elem, immediate) {
+			if (!elem) {
+				return;
+			}
+			var inst = this._getInst(elem);
+			if ($.isEmptyObject(inst)) {
+				inst = elem;
+			}
+			if (inst && inst === plugin.curInst) {
+				var showAnim = (immediate ? '' : inst.options.showAnim);
+				var showSpeed = inst.options.showSpeed;
+				showSpeed = (showSpeed === 'normal' && $.ui &&
+					parseInt($.ui.version.substring(2)) >= 8 ? '_default' : showSpeed);
+				var postProcess = function() {
+					if (!inst.div) {
+						return;
+					}
+					inst.div.remove();
+					inst.div = null;
+					plugin.curInst = null;
+					if ($.isFunction(inst.options.onClose)) {
+						inst.options.onClose.apply(elem, [inst.selectedDates]);
+					}
+				};
+				inst.div.stop();
+				if ($.effects && ($.effects[showAnim] || ($.effects.effect && $.effects.effect[showAnim]))) {
+					inst.div.hide(showAnim, inst.options.showOptions, showSpeed, postProcess);
+				}
+				else {
+					var hideAnim = (showAnim === 'slideDown' ? 'slideUp' :
+						(showAnim === 'fadeIn' ? 'fadeOut' : 'hide'));
+					inst.div[hideAnim]((showAnim ? showSpeed : ''), postProcess);
+				}
+				if (!showAnim) {
+					postProcess();
+				}
+			}
+		},
+
+		/** Handle keystrokes in the datepicker.
+			@memberof CalendarsPicker
+			@private
+			@param {KeyEvent} event The keystroke.
+			@return {boolean} <code>true</code> if not handled, <code>false</code> if handled. */
+		_keyDown: function(event) {
+			var elem = (event.data && event.data.elem) || event.target;
+			var inst = plugin._getInst(elem);
+			var handled = false;
+			var command;
+			if (inst.inline || inst.div) {
+				if (event.keyCode === 9) { // Tab - close
+					plugin.hide(elem);
+				}
+				else if (event.keyCode === 13) { // Enter - select
+					plugin.selectDate(elem,
+						$('a.' + inst.options.renderer.highlightedClass, inst.div)[0]);
+					handled = true;
+				}
+				else { // Command keystrokes
+					var commands = inst.options.commands;
+					for (var name in commands) {
+						if (inst.options.commands.hasOwnProperty(name)) {
+							command = commands[name];
+							/* jshint -W018 */ // Dislikes !!
+							if (command.keystroke.keyCode === event.keyCode &&
+									!!command.keystroke.ctrlKey === !!(event.ctrlKey || event.metaKey) &&
+									!!command.keystroke.altKey === event.altKey &&
+									!!command.keystroke.shiftKey === event.shiftKey) {
+							/* jshint +W018 */
+								plugin.performAction(elem, name);
+								handled = true;
+								break;
+							}
+						}
+					}
+				}
+			}
+			else { // Show on 'current' keystroke
+				command = inst.options.commands.current;
+				/* jshint -W018 */ // Dislikes !!
+				if (command.keystroke.keyCode === event.keyCode &&
+						!!command.keystroke.ctrlKey === !!(event.ctrlKey || event.metaKey) &&
+						!!command.keystroke.altKey === event.altKey &&
+						!!command.keystroke.shiftKey === event.shiftKey) {
+				/* jshint +W018 */
+					plugin.show(elem);
+					handled = true;
+				}
+			}
+			inst.ctrlKey = ((event.keyCode < 48 && event.keyCode !== 32) || event.ctrlKey || event.metaKey);
+			if (handled) {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+			return !handled;
+		},
+
+		/** Filter keystrokes in the datepicker.
+			@memberof CalendarsPicker
+			@private
+			@param {KeyEvent} event The keystroke.
+			@return {boolean} <code>true</code> if allowed, <code>false</code> if not allowed. */
+		_keyPress: function(event) {
+			var inst = plugin._getInst((event.data && event.data.elem) || event.target);
+			if (!$.isEmptyObject(inst) && inst.options.constrainInput) {
+				var ch = String.fromCharCode(event.keyCode || event.charCode);
+				var allowedChars = plugin._allowedChars(inst);
+				return (event.metaKey || inst.ctrlKey || ch < ' ' ||
+					!allowedChars || allowedChars.indexOf(ch) > -1);
+			}
+			return true;
+		},
+
+		/** Determine the set of characters allowed by the date format.
+			@memberof CalendarsPicker
+			@private
+			@param {object} inst The current instance settings.
+			@return {string} The set of allowed characters, or <code>null</code> if anything allowed. */
+		_allowedChars: function(inst) {
+			var allowedChars = (inst.options.multiSelect ? inst.options.multiSeparator :
+				(inst.options.rangeSelect ? inst.options.rangeSeparator : ''));
+			var literal = false;
+			var hasNum = false;
+			var dateFormat = inst.get('dateFormat');
+			for (var i = 0; i < dateFormat.length; i++) {
+				var ch = dateFormat.charAt(i);
+				if (literal) {
+					if (ch === '\'' && dateFormat.charAt(i + 1) !== '\'') {
+						literal = false;
+					}
+					else {
+						allowedChars += ch;
+					}
+				}
+				else {
+					switch (ch) {
+						case 'd':
+						case 'm':
+						case 'o':
+						case 'w':
+							allowedChars += (hasNum ? '' : '0123456789');
+							hasNum = true;
+							break;
+						case 'y':
+						case '@':
+						case '!':
+							allowedChars += (hasNum ? '' : '0123456789') + '-';
+							hasNum = true;
+							break;
+						case 'J':
+							allowedChars += (hasNum ? '' : '0123456789') + '-.';
+							hasNum = true;
+							break;
+						case 'D':
+						case 'M':
+						case 'Y':
+							return null; // Accept anything
+						case '\'':
+							if (dateFormat.charAt(i + 1) === '\'') {
+								allowedChars += '\'';
+							}
+							else {
+								literal = true;
+							}
+							break;
+						default:
+							allowedChars += ch;
+					}
+				}
+			}
+			return allowedChars;
+		},
+
+		/** Synchronise datepicker with the field.
+			@memberof CalendarsPicker
+			@private
+			@param {KeyEvent} event The keystroke.
+			@return {boolean} <code>true</code> if allowed, <code>false</code> if not allowed. */
+		_keyUp: function(event) {
+			var elem = (event.data && event.data.elem) || event.target;
+			var inst = plugin._getInst(elem);
+			if (!$.isEmptyObject(inst) && !inst.ctrlKey && inst.lastVal !== inst.elem.val()) {
+				try {
+					var dates = plugin._extractDates(inst, inst.elem.val());
+					if (dates.length > 0) {
+						plugin.setDate(elem, dates, null, true);
+					}
+				}
+				catch (e) {
+					// Ignore
+				}
+			}
+			return true;
+		},
+
+		/** Increment/decrement month/year on mouse wheel activity.
+			@memberof CalendarsPicker
+			@private
+			@param {event} event The mouse wheel event.
+			@param {number} delta The amount of change. */
+		_doMouseWheel: function(event, delta) {
+			var elem = (plugin.curInst && plugin.curInst.elem[0]) ||
+				$(event.target).closest('.' + plugin._getMarker())[0];
+			if (plugin.isDisabled(elem)) {
+				return;
+			}
+			var inst = plugin._getInst(elem);
+			if (inst.options.useMouseWheel) {
+				delta = (delta < 0 ? -1 : +1);
+				plugin.changeMonth(elem, -inst.options[event.ctrlKey ? 'monthsToJump' : 'monthsToStep'] * delta);
+			}
+			event.preventDefault();
+		},
+
+		/** Clear an input and close a popup datepicker.
+			@memberof CalendarsPicker
+			@param {Element} elem The control to use.
+			@example $(selector).datepick('clear') */
+		clear: function(elem) {
+			var inst = this._getInst(elem);
+			if (!$.isEmptyObject(inst)) {
+				inst.selectedDates = [];
+				this.hide(elem);
+				var defaultDate = inst.get('defaultDate');
+				if (inst.options.selectDefaultDate && defaultDate) {
+					this.setDate(elem, (defaultDate || inst.options.calendar.today()).newDate());
+				}
+				else {
+					this._updateInput(elem);
+				}
+			}
+		},
+
+		/** Retrieve the selected date(s) for a datepicker.
+			@memberof CalendarsPicker
+			@param {Element} elem The control to examine.
+			@return {CDate[]} The selected date(s).
+			@example var dates = $(selector).datepick('getDate') */
+		getDate: function(elem) {
+			var inst = this._getInst(elem);
+			return (!$.isEmptyObject(inst) ? inst.selectedDates : []);
+		},
+
+		/** Set the selected date(s) for a datepicker.
+			@memberof CalendarsPicker
+			@param {Element} elem The control to examine.
+			@param {CDate|number|string|array} dates The selected date(s).
+			@param {CDate|number|string} [endDate] The ending date for a range.
+			@param {boolean} [keyUp] <code>true</code> if coming from <code>keyUp</code> processing (internal).
+			@param {boolean} [setOpt] <code>true</code> if coming from option processing (internal).
+			@example $(selector).datepick('setDate', new Date(2014, 12-1, 25))
+$(selector).datepick('setDate', '12/25/2014', '01/01/2015')
+$(selector).datepick('setDate', [date1, date2, date3]) */
+		setDate: function(elem, dates, endDate, keyUp, setOpt) {
+			var inst = this._getInst(elem);
+			if (!$.isEmptyObject(inst)) {
+				if (!$.isArray(dates)) {
+					dates = [dates];
+					if (endDate) {
+						dates.push(endDate);
+					}
+				}
+				var minDate = inst.get('minDate');
+				var maxDate = inst.get('maxDate');
+				var curDate = inst.selectedDates[0];
+				inst.selectedDates = [];
+				for (var i = 0; i < dates.length; i++) {
+					var date = inst.options.calendar.determineDate(
+						dates[i], null, curDate, inst.get('dateFormat'), inst.getConfig());
+					if (date) {
+						if ((!minDate || date.compareTo(minDate) !== -1) &&
+								(!maxDate || date.compareTo(maxDate) !== +1)) {
+							var found = false;
+							for (var j = 0; j < inst.selectedDates.length; j++) {
+								if (inst.selectedDates[j].compareTo(date) === 0) {
+									found = true;
+									break;
+								}
+							}
+							if (!found) {
+								inst.selectedDates.push(date);
+							}
+						}
+					}
+				}
+				inst.selectedDates.splice(inst.options.multiSelect ||
+					(inst.options.rangeSelect ? 2 : 1), inst.selectedDates.length);
+				if (inst.options.rangeSelect) {
+					switch (inst.selectedDates.length) {
+						case 1:
+							inst.selectedDates[1] = inst.selectedDates[0];
+							break;
+						case 2:
+							inst.selectedDates[1] = (inst.selectedDates[0].compareTo(inst.selectedDates[1]) === +1 ?
+								inst.selectedDates[0] : inst.selectedDates[1]);
+							break;
+					}
+					inst.pickingRange = false;
+				}
+				inst.prevDate = (inst.drawDate ? inst.drawDate.newDate() : null);
+				inst.drawDate = this._checkMinMax((inst.selectedDates[0] ||
+					inst.get('defaultDate') || inst.options.calendar.today()).newDate(), inst);
+				if (!setOpt) {
+					this._update(elem);
+					this._updateInput(elem, keyUp);
+				}
+			}
+		},
+
+		/** Determine whether a date is selectable for this datepicker.
+			@memberof CalendarsPicker
+			@private
+			@param {Element} elem The control to check.
+			@param {CDate|string|number} date The date to check.
+			@return {boolean} <code>true</code> if selectable, <code>false</code> if not.
+			@example var selectable = $(selector).datepick('isSelectable', date) */
+		isSelectable: function(elem, date) {
+			var inst = this._getInst(elem);
+			if ($.isEmptyObject(inst)) {
+				return false;
+			}
+			date = inst.options.calendar.determineDate(date,
+				inst.selectedDates[0] || inst.options.calendar.today(), null,
+				inst.options.dateFormat, inst.getConfig());
+			return this._isSelectable(elem, date, inst.options.onDate,
+				inst.get('minDate'), inst.get('maxDate'));
+		},
+
+		/** Internally determine whether a date is selectable for this datepicker.
+			@memberof CalendarsPicker
+			@private
+			@param {Element} elem The control to check.
+			@param {CDate} date The date to check.
+			@param {function|boolean} onDate Any <code>onDate</code> callback or <code>callback.selectable</code>.
+			@param {CDate} minDate The minimum allowed date.
+			@param {CDate} maxDate The maximum allowed date.
+			@return {boolean} <code>true</code> if selectable, <code>false</code> if not. */
+		_isSelectable: function(elem, date, onDate, minDate, maxDate) {
+			var dateInfo = (typeof onDate === 'boolean' ? {selectable: onDate} :
+				(!$.isFunction(onDate) ? {} : onDate.apply(elem, [date, true])));
+			return (dateInfo.selectable !== false) &&
+				(!minDate || date.toJD() >= minDate.toJD()) && (!maxDate || date.toJD() <= maxDate.toJD());
+		},
+
+		/** Perform a named action for a datepicker.
+			@memberof CalendarsPicker
+			@param {element} elem The control to affect.
+			@param {string} action The name of the {@link CalendarsPicker.commands|action}.
+			@example $(selector).calendarsPicker('performAction', 'next') */
+		performAction: function(elem, action) {
+			var inst = this._getInst(elem);
+			if (!$.isEmptyObject(inst) && !this.isDisabled(elem)) {
+				var commands = inst.options.commands;
+				if (commands[action] && commands[action].enabled.apply(elem, [inst])) {
+					commands[action].action.apply(elem, [inst]);
+				}
+			}
+		},
+
+		/** Set the currently shown month, defaulting to today's.
+			@memberof CalendarsPicker
+			@param {Element} elem The control to affect.
+			@param {number} [year] The year to show.
+			@param {number} [month] The month to show (calendar minimum month to maximum month).
+			@param {number} [day] The day to show.
+			@example $(selector).datepick('showMonth', 2014, 12, 25) */
+		showMonth: function(elem, year, month, day) {
+			var inst = this._getInst(elem);
+			if (!$.isEmptyObject(inst) && ((typeof day !== 'undefined' && day !== null) ||
+					inst.drawDate.year() !== year || inst.drawDate.month() !== month)) {
+				inst.prevDate = inst.drawDate.newDate();
+				var calendar = inst.options.calendar;
+				var show = this._checkMinMax(typeof year !== 'undefined' && year !== null ?
+					calendar.newDate(year, month, 1) : calendar.today(), inst);
+				inst.drawDate.date(show.year(), show.month(), 
+					typeof day !== 'undefined' && day !== null ? day : Math.min(inst.drawDate.day(),
+					calendar.daysInMonth(show.year(), show.month())));
+				this._update(elem);
+			}
+		},
+
+		/** Adjust the currently shown month.
+			@memberof CalendarsPicker
+			@param {Element} elem The control to affect.
+			@param {number} offset The number of months to change by.
+			@example $(selector).datepick('changeMonth', 2)*/
+		changeMonth: function(elem, offset) {
+			var inst = this._getInst(elem);
+			if (!$.isEmptyObject(inst)) {
+				var date = inst.drawDate.newDate().add(offset, 'm');
+				this.showMonth(elem, date.year(), date.month());
+			}
+		},
+
+		/** Adjust the currently shown day.
+			@memberof CalendarsPicker
+			@param {Element} elem The control to affect.
+			@param {number} offset The number of days to change by.
+			@example $(selector).datepick('changeDay', 7)*/
+		changeDay: function(elem, offset) {
+			var inst = this._getInst(elem);
+			if (!$.isEmptyObject(inst)) {
+				var date = inst.drawDate.newDate().add(offset, 'd');
+				this.showMonth(elem, date.year(), date.month(), date.day());
+			}
+		},
+
+		/** Restrict a date to the minimum/maximum specified.
+			@memberof CalendarsPicker
+			@private
+			@param {CDate} date The date to check.
+			@param {object} inst The current instance settings. */
+		_checkMinMax: function(date, inst) {
+			var minDate = inst.get('minDate');
+			var maxDate = inst.get('maxDate');
+			date = (minDate && date.compareTo(minDate) === -1 ? minDate.newDate() : date);
+			date = (maxDate && date.compareTo(maxDate) === +1 ? maxDate.newDate() : date);
+			return date;
+		},
+
+		/** Retrieve the date associated with an entry in the datepicker.
+			@memberof CalendarsPicker
+			@param {Element} elem The control to examine.
+			@param {Element} target The selected datepicker element.
+			@return {CDate} The corresponding date, or <code>null</code>.
+			@example var date = $(selector).datepick('retrieveDate',
+  $('div.datepick-popup a:contains(10)')[0]) */
+		retrieveDate: function(elem, target) {
+			var inst = this._getInst(elem);
+			return ($.isEmptyObject(inst) ? null : inst.options.calendar.fromJD(
+				parseFloat(target.className.replace(/^.*jd(\d+\.5).*$/, '$1'))));
+		},
+
+		/** Select a date for this datepicker.
+			@memberof CalendarsPicker
+			@param {Element} elem The control to examine.
+			@param {Element} target The selected datepicker element.
+			@example $(selector).datepick('selectDate', $('div.datepick-popup a:contains(10)')[0]) */
+		selectDate: function(elem, target) {
+			var inst = this._getInst(elem);
+			if (!$.isEmptyObject(inst) && !this.isDisabled(elem)) {
+				var date = this.retrieveDate(elem, target);
+				if (inst.options.multiSelect) {
+					var found = false;
+					for (var i = 0; i < inst.selectedDates.length; i++) {
+						if (date.compareTo(inst.selectedDates[i]) === 0) {
+							inst.selectedDates.splice(i, 1);
+							found = true;
+							break;
+						}
+					}
+					if (!found && inst.selectedDates.length < inst.options.multiSelect) {
+						inst.selectedDates.push(date);
+					}
+				}
+				else if (inst.options.rangeSelect) {
+					if (inst.pickingRange) {
+						inst.selectedDates[1] = date;
+					}
+					else {
+						inst.selectedDates = [date, date];
+					}
+					inst.pickingRange = !inst.pickingRange;
+				}
+				else {
+					inst.selectedDates = [date];
+				}
+				inst.prevDate = inst.drawDate = date.newDate();
+				this._updateInput(elem);
+				if (inst.inline || inst.pickingRange || inst.selectedDates.length <
+						(inst.options.multiSelect || (inst.options.rangeSelect ? 2 : 1))) {
+					this._update(elem);
+				}
+				else {
+					this.hide(elem);
+				}
+			}
+		},
+
+		/** Generate the datepicker content for this control.
+			@memberof CalendarsPicker
+			@private
+			@param {Element} elem The control to affect.
+			@param {object} inst The current instance settings.
+			@return {jQuery} The datepicker content */
+		_generateContent: function(elem, inst) {
+			var monthsToShow = inst.options.monthsToShow;
+			monthsToShow = ($.isArray(monthsToShow) ? monthsToShow : [1, monthsToShow]);
+			inst.drawDate = this._checkMinMax(
+				inst.drawDate || inst.get('defaultDate') || inst.options.calendar.today(), inst);
+			var drawDate = inst.drawDate.newDate().add(-inst.options.monthsOffset, 'm');
+			// Generate months
+			var monthRows = '';
+			for (var row = 0; row < monthsToShow[0]; row++) {
+				var months = '';
+				for (var col = 0; col < monthsToShow[1]; col++) {
+					months += this._generateMonth(elem, inst, drawDate.year(),
+						drawDate.month(), inst.options.calendar, inst.options.renderer, (row === 0 && col === 0));
+					drawDate.add(1, 'm');
+				}
+				monthRows += this._prepare(inst.options.renderer.monthRow, inst).replace(/\{months\}/, months);
+			}
+			var picker = this._prepare(inst.options.renderer.picker, inst).replace(/\{months\}/, monthRows).
+				replace(/\{weekHeader\}/g, this._generateDayHeaders(inst, inst.options.calendar, inst.options.renderer));
+			// Add commands
+			var addCommand = function(type, open, close, name, classes) {
+				if (picker.indexOf('{' + type + ':' + name + '}') === -1) {
+					return;
+				}
+				var command = inst.options.commands[name];
+				var date = (inst.options.commandsAsDateFormat ? command.date.apply(elem, [inst]) : null);
+				picker = picker.replace(new RegExp('\\{' + type + ':' + name + '\\}', 'g'),
+					'<' + open + (command.status ? ' title="' + inst.options[command.status] + '"' : '') +
+					' class="' + inst.options.renderer.commandClass + ' ' +
+					inst.options.renderer.commandClass + '-' + name + ' ' + classes +
+					(command.enabled(inst) ? '' : ' ' + inst.options.renderer.disabledClass) + '">' +
+					(date ? date.formatDate(inst.options[command.text], {localNumbers: inst.options.localNumbers}) :
+					inst.options[command.text]) + '</' + close + '>');
+			};
+			for (var name in inst.options.commands) {
+				if (inst.options.commands.hasOwnProperty(name)) {
+					addCommand('button', 'button type="button"', 'button', name,
+						inst.options.renderer.commandButtonClass);
+					addCommand('link', 'a href="javascript:void(0)"', 'a', name,
+						inst.options.renderer.commandLinkClass);
+				}
+			}
+			picker = $(picker);
+			if (monthsToShow[1] > 1) {
+				var count = 0;
+				$(inst.options.renderer.monthSelector, picker).each(function() {
+					var nth = ++count % monthsToShow[1];
+					$(this).addClass(nth === 1 ? 'first' : (nth === 0 ? 'last' : ''));
+				});
+			}
+			// Add datepicker behaviour
+			var self = this;
+			function removeHighlight(elem) {
+				(inst.inline ? $(elem).closest('.' + self._getMarker()) : inst.div).
+					find(inst.options.renderer.daySelector + ' a').
+					removeClass(inst.options.renderer.highlightedClass);
+			}
+			picker.find(inst.options.renderer.daySelector + ' a').hover(
+					function() {
+						removeHighlight(this);
+						$(this).addClass(inst.options.renderer.highlightedClass);
+					},
+					function() {
+						removeHighlight(this);
+					}).
+				click(function() {
+					self.selectDate(elem, this);
+				}).end().
+				find('select.' + this._monthYearClass + ':not(.' + this._anyYearClass + ')').
+				change(function() {
+					var monthYear = $(this).val().split('/');
+					self.showMonth(elem, parseInt(monthYear[1], 10), parseInt(monthYear[0], 10));
+				}).end().
+				find('select.' + this._anyYearClass).click(function() {
+					$(this).css('visibility', 'hidden').
+						next('input').css({left: this.offsetLeft, top: this.offsetTop,
+						width: this.offsetWidth, height: this.offsetHeight}).show().focus();
+				}).end().
+				find('input.' + self._monthYearClass).change(function() {
+					try {
+						var year = parseInt($(this).val(), 10);
+						year = (isNaN(year) ? inst.drawDate.year() : year);
+						self.showMonth(elem, year, inst.drawDate.month(), inst.drawDate.day());
+					}
+					catch (e) {
+						// Ignore
+					}
+				}).keydown(function(event) {
+					if (event.keyCode === 13) { // Enter
+						$(event.elem).change();
+					}
+					else if (event.keyCode === 27) { // Escape
+						$(event.elem).hide().prev('select').css('visibility', 'visible');
+						inst.elem.focus();
+					}
+				});
+			// Add keyboard handling
+			var data = {elem: inst.elem[0]};
+			picker.keydown(data, this._keyDown).keypress(data, this._keyPress).keyup(data, this._keyUp);
+			// Add command behaviour
+			picker.find('.' + inst.options.renderer.commandClass).click(function() {
+					if (!$(this).hasClass(inst.options.renderer.disabledClass)) {
+						var action = this.className.replace(
+							new RegExp('^.*' + inst.options.renderer.commandClass + '-([^ ]+).*$'), '$1');
+						plugin.performAction(elem, action);
+					}
+				});
+			// Add classes
+			if (inst.options.isRTL) {
+				picker.addClass(inst.options.renderer.rtlClass);
+			}
+			if (monthsToShow[0] * monthsToShow[1] > 1) {
+				picker.addClass(inst.options.renderer.multiClass);
+			}
+			if (inst.options.pickerClass) {
+				picker.addClass(inst.options.pickerClass);
+			}
+			// Resize
+			$('body').append(picker);
+			var width = 0;
+			picker.find(inst.options.renderer.monthSelector).each(function() {
+				width += $(this).outerWidth();
+			});
+			picker.width(width / monthsToShow[0]);
+			// Pre-show customisation
+			if ($.isFunction(inst.options.onShow)) {
+				inst.options.onShow.apply(elem, [picker, inst.options.calendar, inst]);
+			}
+			return picker;
+		},
+
+		/** Generate the content for a single month.
+			@memberof CalendarsPicker
+			@private
+			@param {Element} elem The control to affect.
+			@param {object} inst The current instance settings.
+			@param {number} year The year to generate.
+			@param {number} month The month to generate.
+			@param {BaseCalendar} calendar The current calendar.
+			@param {object} renderer The rendering templates.
+			@param {boolean} first <code>true</code> if first of multiple months.
+			@return {string} The month content. */
+		_generateMonth: function(elem, inst, year, month, calendar, renderer, first) {
+			var daysInMonth = calendar.daysInMonth(year, month);
+			var monthsToShow = inst.options.monthsToShow;
+			monthsToShow = ($.isArray(monthsToShow) ? monthsToShow : [1, monthsToShow]);
+			var fixedWeeks = inst.options.fixedWeeks || (monthsToShow[0] * monthsToShow[1] > 1);
+			var firstDay = inst.options.firstDay;
+			firstDay = (typeof firstDay === 'undefined' || firstDay === null ? calendar.local.firstDay : firstDay);
+			var leadDays = (calendar.dayOfWeek(year, month, calendar.minDay) -
+				firstDay + calendar.daysInWeek()) % calendar.daysInWeek();
+			var numWeeks = (fixedWeeks ? 6 : Math.ceil((leadDays + daysInMonth) / calendar.daysInWeek()));
+			var selectOtherMonths = inst.options.selectOtherMonths && inst.options.showOtherMonths;
+			var minDate = (inst.pickingRange ? inst.selectedDates[0] : inst.get('minDate'));
+			var maxDate = inst.get('maxDate');
+			var showWeeks = renderer.week.indexOf('{weekOfYear}') > -1;
+			var today = calendar.today();
+			var drawDate = calendar.newDate(year, month, calendar.minDay);
+			drawDate.add(-leadDays - (fixedWeeks &&
+				(drawDate.dayOfWeek() === firstDay || drawDate.daysInMonth() < calendar.daysInWeek())?
+				calendar.daysInWeek() : 0), 'd');
+			var jd = drawDate.toJD();
+			// Localise numbers if requested and available
+			var localiseNumbers = function(value) {
+				return (inst.options.localNumbers && calendar.local.digits ? calendar.local.digits(value) : value);
+			};
+			// Generate weeks
+			var weeks = '';
+			for (var week = 0; week < numWeeks; week++) {
+				var weekOfYear = (!showWeeks ? '' : '<span class="jd' + jd + '">' +
+					($.isFunction(inst.options.calculateWeek) ?
+					inst.options.calculateWeek(drawDate) : drawDate.weekOfYear()) + '</span>');
+				var days = '';
+				for (var day = 0; day < calendar.daysInWeek(); day++) {
+					var selected = false;
+					if (inst.options.rangeSelect && inst.selectedDates.length > 0) {
+						selected = drawDate.compareTo(inst.selectedDates[0]) !== -1 &&
+							drawDate.compareTo(inst.selectedDates[1]) !== +1;
+					}
+					else {
+						for (var i = 0; i < inst.selectedDates.length; i++) {
+							if (inst.selectedDates[i].compareTo(drawDate) === 0) {
+								selected = true;
+								break;
+							}
+						}
+					}
+					var dateInfo = (!$.isFunction(inst.options.onDate) ? {} :
+						inst.options.onDate.apply(elem, [drawDate, drawDate.month() === month]));
+					var selectable = (selectOtherMonths || drawDate.month() === month) &&
+						this._isSelectable(elem, drawDate, dateInfo.selectable, minDate, maxDate);
+					days += this._prepare(renderer.day, inst).replace(/\{day\}/g,
+						(selectable ? '<a href="javascript:void(0)"' : '<span') +
+						' class="jd' + jd + ' ' + (dateInfo.dateClass || '') +
+						(selected && (selectOtherMonths || drawDate.month() === month) ?
+						' ' + renderer.selectedClass : '') +
+						(selectable ? ' ' + renderer.defaultClass : '') +
+						(drawDate.weekDay() ? '' : ' ' + renderer.weekendClass) +
+						(drawDate.month() === month ? '' : ' ' + renderer.otherMonthClass) +
+						(drawDate.compareTo(today) === 0 && drawDate.month() === month ?
+						' ' + renderer.todayClass : '') +
+						(drawDate.compareTo(inst.drawDate) === 0 && drawDate.month() === month ?
+						' ' + renderer.highlightedClass : '') + '"' +
+						(dateInfo.title || (inst.options.dayStatus && selectable) ? ' title="' +
+						(dateInfo.title || drawDate.formatDate(inst.options.dayStatus,
+						{localNumbers: inst.options.localNumbers})) + '"' : '') + '>' +
+						(inst.options.showOtherMonths || drawDate.month() === month ?
+						dateInfo.content || localiseNumbers(drawDate.day()) : '&#160;') +
+						(selectable ? '</a>' : '</span>'));
+					drawDate.add(1, 'd');
+					jd++;
+				}
+				weeks += this._prepare(renderer.week, inst).replace(/\{days\}/g, days).
+					replace(/\{weekOfYear\}/g, weekOfYear);
+			}
+			var monthHeader = this._prepare(renderer.month, inst).match(/\{monthHeader(:[^\}]+)?\}/);
+			monthHeader = (monthHeader[0].length <= 13 ? 'MM yyyy' :
+				monthHeader[0].substring(13, monthHeader[0].length - 1));
+			monthHeader = (first ? this._generateMonthSelection(
+				inst, year, month, minDate, maxDate, monthHeader, calendar, renderer) :
+				calendar.formatDate(monthHeader, calendar.newDate(year, month, calendar.minDay),
+					{localNumbers: inst.options.localNumbers}));
+			var weekHeader = this._prepare(renderer.weekHeader, inst).
+				replace(/\{days\}/g, this._generateDayHeaders(inst, calendar, renderer));
+			return this._prepare(renderer.month, inst).replace(/\{monthHeader(:[^\}]+)?\}/g, monthHeader).
+				replace(/\{weekHeader\}/g, weekHeader).replace(/\{weeks\}/g, weeks);
+		},
+
+		/** Generate the HTML for the day headers.
+			@memberof CalendarsPicker
+			@private
+			@param {object} inst The current instance settings.
+			@param {BaseCalendar} calendar The current calendar.
+			@param {object} renderer The rendering templates.
+			@return {string} A week's worth of day headers. */
+		_generateDayHeaders: function(inst, calendar, renderer) {
+			var firstDay = inst.options.firstDay;
+			firstDay = (typeof firstDay === 'undefined' || firstDay === null ? calendar.local.firstDay : firstDay);
+			var header = '';
+			for (var day = 0; day < calendar.daysInWeek(); day++) {
+				var dow = (day + firstDay) % calendar.daysInWeek();
+				header += this._prepare(renderer.dayHeader, inst).replace(/\{day\}/g,
+					'<span class="' + this._curDoWClass + dow + '" title="' +
+					calendar.local.dayNames[dow] + '">' + calendar.local.dayNamesMin[dow] + '</span>');
+			}
+			return header;
+		},
+
+		/** Generate the selection controls for a month.
+			@memberof CalendarsPicker
+			@private
+			@param {object} inst The current instance settings.
+			@param {number} year The year to generate.
+			@param {number} month The month to generate.
+			@param {CDate} minDate The minimum date allowed.
+			@param {CDate} maxDate The maximum date allowed.
+			@param {string} monthHeader The month/year format.
+			@param {BaseCalendar} calendar The current calendar.
+			@return {string} The month selection content. */
+		_generateMonthSelection: function(inst, year, month, minDate, maxDate, monthHeader, calendar) {
+			if (!inst.options.changeMonth) {
+				return calendar.formatDate(monthHeader, calendar.newDate(year, month, 1),
+					{localNumbers: inst.options.localNumbers});
+			}
+			// Months
+			var monthNames = calendar.local[
+				'monthNames' + (monthHeader.match(/mm/i) ? '' : 'Short')];
+			var html = monthHeader.replace(/m+/i, '\\x2E').replace(/y+/i, '\\x2F');
+			var selector = '<select class="' + this._monthYearClass +
+				'" title="' + inst.options.monthStatus + '">';
+			var maxMonth = calendar.monthsInYear(year) + calendar.minMonth;
+			for (var m = calendar.minMonth; m < maxMonth; m++) {
+				if ((!minDate || calendar.newDate(year, m,
+						calendar.daysInMonth(year, m) - 1 + calendar.minDay).
+						compareTo(minDate) !== -1) &&
+						(!maxDate || calendar.newDate(year, m, calendar.minDay).
+						compareTo(maxDate) !== +1)) {
+					selector += '<option value="' + m + '/' + year + '"' +
+						(month === m ? ' selected="selected"' : '') + '>' +
+						monthNames[m - calendar.minMonth] + '</option>';
+				}
+			}
+			selector += '</select>';
+			html = html.replace(/\\x2E/, selector);
+			// Years
+			var localiseNumbers = function(value) {
+				return (inst.options.localNumbers && calendar.local.digits ? calendar.local.digits(value) : value);
+			};
+			var yearRange = inst.options.yearRange;
+			if (yearRange === 'any') {
+				selector = '<select class="' + this._monthYearClass + ' ' + this._anyYearClass +
+					'" title="' + inst.options.yearStatus + '">' +
+					'<option value="' + year + '">' + localiseNumbers(year) + '</option></select>' +
+					'<input class="' + this._monthYearClass + ' ' + this._curMonthClass +
+					month + '" value="' + year + '">';
+			}
+			else {
+				yearRange = yearRange.split(':');
+				var todayYear = calendar.today().year();
+				var start = (yearRange[0].match('c[+-].*') ? year + parseInt(yearRange[0].substring(1), 10) :
+					((yearRange[0].match('[+-].*') ? todayYear : 0) + parseInt(yearRange[0], 10)));
+				var end = (yearRange[1].match('c[+-].*') ? year + parseInt(yearRange[1].substring(1), 10) :
+					((yearRange[1].match('[+-].*') ? todayYear : 0) + parseInt(yearRange[1], 10)));
+				selector = '<select class="' + this._monthYearClass +
+					'" title="' + inst.options.yearStatus + '">';
+				start = calendar.newDate(start + 1, calendar.firstMonth, calendar.minDay).add(-1, 'd');
+				end = calendar.newDate(end, calendar.firstMonth, calendar.minDay);
+				var addYear = function(y, yDisplay) {
+					if (y !== 0 || calendar.hasYearZero) {
+						selector += '<option value="' +
+							Math.min(month, calendar.monthsInYear(y) - 1 + calendar.minMonth) +
+							'/' + y + '"' + (year === y ? ' selected="selected"' : '') + '>' +
+							(yDisplay || localiseNumbers(y)) + '</option>';
+					}
+				};
+				var earlierLater, y;
+				if (start.toJD() < end.toJD()) {
+					start = (minDate && minDate.compareTo(start) === +1 ? minDate : start).year();
+					end = (maxDate && maxDate.compareTo(end) === -1 ? maxDate : end).year();
+					earlierLater = Math.floor((end - start) / 2);
+					if (!minDate || minDate.year() < start) {
+						addYear(start - earlierLater, inst.options.earlierText);
+					}
+					for (y = start; y <= end; y++) {
+						addYear(y);
+					}
+					if (!maxDate || maxDate.year() > end) {
+						addYear(end + earlierLater, inst.options.laterText);
+					}
+				}
+				else {
+					start = (maxDate && maxDate.compareTo(start) === -1 ? maxDate : start).year();
+					end = (minDate && minDate.compareTo(end) === +1 ? minDate : end).year();
+					earlierLater = Math.floor((start - end) / 2);
+					if (!maxDate || maxDate.year() > start) {
+						addYear(start + earlierLater, inst.options.earlierText);
+					}
+					for (y = start; y >= end; y--) {
+						addYear(y);
+					}
+					if (!minDate || minDate.year() < end) {
+						addYear(end - earlierLater, inst.options.laterText);
+					}
+				}
+				selector += '</select>';
+			}
+			html = html.replace(/\\x2F/, selector);
+			return html;
+		},
+
+		/** Prepare a render template for use.
+			Exclude popup/inline sections that are not applicable.
+			Localise text of the form: {l10n:<em>name</em>}.
+			@memberof CalendarsPicker
+			@private
+			@param {string} text The text to localise.
+			@param {object} inst The current instance settings.
+			@return {string} The localised text. */
+		_prepare: function(text, inst) {
+			var replaceSection = function(type, retain) {
+				while (true) {
+					var start = text.indexOf('{' + type + ':start}');
+					if (start === -1) {
+						return;
+					}
+					var end = text.substring(start).indexOf('{' + type + ':end}');
+					if (end > -1) {
+						text = text.substring(0, start) +
+							(retain ? text.substr(start + type.length + 8, end - type.length - 8) : '') +
+							text.substring(start + end + type.length + 6);
+					}
+				}
+			};
+			replaceSection('inline', inst.inline);
+			replaceSection('popup', !inst.inline);
+			var pattern = /\{l10n:([^\}]+)\}/;
+			var matches = pattern.exec(text);
+			while (matches) {
+				text = text.replace(matches[0], inst.options[matches[1]]);
+				matches = pattern.exec(text);
+			}
+			return text;
+		}
+	});
+
+	var plugin = $.calendarsPicker; // Singleton instance
+
+	$(function() {
+		$(document).on('mousedown.' + pluginName, plugin._checkExternalClick).
+			on('resize.' + pluginName, function() { plugin.hide(plugin.curInst); });
+	});
+
+})(jQuery);
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/js/jquery.calendars.plus.js b/apps/edr-freight-web/backoffice/src/shared/common/js/jquery.calendars.plus.js
new file mode 100644
index 000000000..410f7929b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/js/jquery.calendars.plus.js
@@ -0,0 +1,463 @@
+/* http://keith-wood.name/calendars.html
+   Calendars extras for jQuery v2.1.0.
+   Written by Keith Wood (wood.keith{at}optusnet.com.au) August 2009.
+   Available under the MIT (http://keith-wood.name/licence.html) license. 
+   Please attribute the author if you use it. */
+
+(function($) { // Hide scope, no $ conflict
+	'use strict';
+
+	$.extend($.calendars.regionalOptions[''], {
+		invalidArguments: 'Invalid arguments',
+		invalidFormat: 'Cannot format a date from another calendar',
+		missingNumberAt: 'Missing number at position {0}',
+		unknownNameAt: 'Unknown name at position {0}',
+		unexpectedLiteralAt: 'Unexpected literal at position {0}',
+		unexpectedText: 'Additional text found at end'
+	});
+	$.calendars.local = $.calendars.regionalOptions[''];
+
+	$.extend($.calendars.cdate.prototype, {
+
+		/** Format this date.
+			Found in the <code>jquery.calendars.plus.js</code> module.
+			@memberof CDate
+			@param {string} [format] The date format to use (see {@linkcode BaseCalendar.formatDate|formatDate}).
+			@param {object} [settings] Options for the <code>formatDate</code> function.
+			@return {string} The formatted date. */
+		formatDate: function(format, settings) {
+			if (typeof format !== 'string') {
+				settings = format;
+				format = '';
+			}
+			return this._calendar.formatDate(format || '', this, settings);
+		}
+	});
+
+	$.extend($.calendars.baseCalendar.prototype, {
+
+		UNIX_EPOCH: $.calendars.instance().newDate(1970, 1, 1).toJD(),
+		SECS_PER_DAY: 24 * 60 * 60,
+		TICKS_EPOCH: $.calendars.instance().jdEpoch, // 1 January 0001 CE
+		TICKS_PER_DAY: 24 * 60 * 60 * 10000000,
+
+		/** Date format for ATOM (RFC 3339/ISO 8601) - 'yyyy-mm-dd'.
+			@memberof BaseCalendar */
+		ATOM: 'yyyy-mm-dd',
+		/** Date format for cookies - 'D, dd M yyyy'.
+			@memberof BaseCalendar */
+		COOKIE: 'D, dd M yyyy',
+		/** Date format for the full date - 'DD, MM d, yyyy'.
+			@memberof BaseCalendar */
+		FULL: 'DD, MM d, yyyy',
+		/** Date format for ISO 8601 - 'yyyy-mm-dd'.
+			@memberof BaseCalendar */
+		ISO_8601: 'yyyy-mm-dd',
+		/** Date format for Julian date - days since January 1, 4713 BCE Greenwich noon.
+			@memberof BaseCalendar */
+		JULIAN: 'J',
+		/** Date format for RFC 822 - 'D, d M yy'.
+			@memberof BaseCalendar */
+		RFC_822: 'D, d M yy',
+		/** Date format for RFC 850 - 'DD, dd-M-yy'.
+			@memberof BaseCalendar */
+		RFC_850: 'DD, dd-M-yy',
+		/** Date format for RFC 1036 - 'D, d M yy'.
+			@memberof BaseCalendar */
+		RFC_1036: 'D, d M yy',
+		/** Date format for RFC 1123 - 'D, d M yyyy'.
+			@memberof BaseCalendar */
+		RFC_1123: 'D, d M yyyy',
+		/** Date format for RFC 2822 - 'D, d M yyyy'.
+			@memberof BaseCalendar */
+		RFC_2822: 'D, d M yyyy',
+		/** Date format for RSS (RFC 822) - 'D, d M yy'.
+			@memberof BaseCalendar */
+		RSS: 'D, d M yy',
+		/** Date format for Windows ticks - number of 100-nanosecond ticks since 1 January 0001 00:00:00 UTC.
+			@memberof BaseCalendar */
+		TICKS: '!',
+		/** Date format for Unix timestamp - number of seconds elapsed since the
+			start of the Unix epoch at 1 January 1970 00:00:00 UTC.
+			@memberof BaseCalendar */
+		TIMESTAMP: '@',
+		/** Date format for W3C (ISO 8601) - 'yyyy-mm-dd'.
+			@memberof BaseCalendar */
+		W3C: 'yyyy-mm-dd',
+
+		/** Format a date object into a string value.
+			The format can be combinations of the following:
+			<ul>
+			<li>d  - day of month (no leading zero)</li>
+			<li>dd - day of month (two digit)</li>
+			<li>o  - day of year (no leading zeros)</li>
+			<li>oo - day of year (three digit)</li>
+			<li>D  - day name short</li>
+			<li>DD - day name long</li>
+			<li>w  - week of year (no leading zero)</li>
+			<li>ww - week of year (two digit)</li>
+			<li>m  - month of year (no leading zero)</li>
+			<li>mm - month of year (two digit)</li>
+			<li>M  - month name short</li>
+			<li>MM - month name long</li>
+			<li>yy - year (two digit)</li>
+			<li>yyyy - year (four digit)</li>
+			<li>YYYY - formatted year</li>
+			<li>J  - Julian date (days since January 1, 4713 BCE Greenwich noon)</li>
+			<li>@  - Unix timestamp (s since 01/01/1970)</li>
+			<li>!  - Windows ticks (100ns since 01/01/0001)</li>
+			<li>'...' - literal text</li>
+			<li>'' - single quote</li>
+			</ul>
+			Found in the <code>jquery.calendars.plus.js</code> module.
+			@memberof BaseCalendar
+			@param {string} [format] The desired format of the date (defaults to calendar format).
+			@param {CDate} date The date value to format.
+			@param {object} [settings] Addition options, whose attributes include:
+			@param {string[]} [settings.dayNamesShort] Abbreviated names of the days from day 0 (Sunday).
+			@param {string[]} [settings.dayNames] Names of the days from day 0 (Sunday).
+			@param {string[]} [settings.monthNamesShort] Abbreviated names of the months.
+			@param {string[]} [settings.monthNames] Names of the months.
+			@param {boolean} [settings.localNumbers=false] <code>true</code> to localise numbers (if available),
+				<code>false</code> to use normal Arabic numerals.
+			@return {string} The date in the above format.
+			@throws Errors if the date is from a different calendar. */
+		formatDate: function(format, date, settings) {
+			if (typeof format !== 'string') {
+				settings = date;
+				date = format;
+				format = '';
+			}
+			if (!date) {
+				return '';
+			}
+			if (date.calendar() !== this) {
+				throw $.calendars.local.invalidFormat || $.calendars.regionalOptions[''].invalidFormat;
+			}
+			format = format || this.local.dateFormat;
+			settings = settings || {};
+			var dayNamesShort = settings.dayNamesShort || this.local.dayNamesShort;
+			var dayNames = settings.dayNames || this.local.dayNames;
+			var monthNamesShort = settings.monthNamesShort || this.local.monthNamesShort;
+			var monthNames = settings.monthNames || this.local.monthNames;
+			var localNumbers = settings.localNumbers || this.local.localNumbers;
+			// Check whether a format character is doubled
+			var doubled = function(match, step) {
+				var matches = 1;
+				while (iFormat + matches < format.length && format.charAt(iFormat + matches) === match) {
+					matches++;
+				}
+				iFormat += matches - 1;
+				return Math.floor(matches / (step || 1)) > 1;
+			};
+			// Format a number, with leading zeroes if necessary
+			var formatNumber = function(match, value, len, step) {
+				var num = '' + value;
+				if (doubled(match, step)) {
+					while (num.length < len) {
+						num = '0' + num;
+					}
+				}
+				return num;
+			};
+			// Format a name, short or long as requested
+			var formatName = function(match, value, shortNames, longNames) {
+				return (doubled(match) ? longNames[value] : shortNames[value]);
+			};
+			// Localise numbers if requested and available
+			var localiseNumbers = localNumbers && this.local.digits ?
+				this.local.digits : function(value) { return value; };
+			var output = '';
+			var literal = false;
+			for (var iFormat = 0; iFormat < format.length; iFormat++) {
+				if (literal) {
+					if (format.charAt(iFormat) === '\'' && !doubled('\'')) {
+						literal = false;
+					}
+					else {
+						output += format.charAt(iFormat);
+					}
+				}
+				else {
+					switch (format.charAt(iFormat)) {
+						case 'd':
+							output += localiseNumbers(formatNumber('d', date.day(), 2));
+							break;
+						case 'D':
+							output += formatName('D', date.dayOfWeek(), dayNamesShort, dayNames);
+							break;
+						case 'o':
+							output += formatNumber('o', date.dayOfYear(), 3);
+							break;
+						case 'w':
+							output += formatNumber('w', date.weekOfYear(), 2);
+							break;
+						case 'm':
+							output += localiseNumbers(formatNumber('m', date.month(), 2));
+							break;
+						case 'M':
+							output += formatName('M', date.month() - this.minMonth, monthNamesShort, monthNames);
+							break;
+						case 'y':
+							output += localiseNumbers(doubled('y', 2) ? date.year() :
+								(date.year() % 100 < 10 ? '0' : '') + date.year() % 100);
+							break;
+						case 'Y':
+							doubled('Y', 2);
+							output += date.formatYear();
+							break;
+						case 'J':
+							output += date.toJD();
+							break;
+						case '@':
+							output += (date.toJD() - this.UNIX_EPOCH) * this.SECS_PER_DAY;
+							break;
+						case '!':
+							output += (date.toJD() - this.TICKS_EPOCH) * this.TICKS_PER_DAY;
+							break;
+						case '\'':
+							if (doubled('\'')) {
+								output += '\'';
+							}
+							else {
+								literal = true;
+							}
+							break;
+						default:
+							output += format.charAt(iFormat);
+					}
+				}
+			}
+			return output;
+		},
+
+		/** Parse a string value into a date object.
+			See {@linkcode BaseCalendar.formatDate|formatDate} for the possible formats, plus:
+			<ul>
+			<li>* - ignore rest of string</li>
+			</ul>
+			Found in the <code>jquery.calendars.plus.js</code> module.
+			@memberof BaseCalendar
+			@param {string} format The expected format of the date ('' for default calendar format).
+			@param {string} value The date in the above format.
+			@param {object} [settings] Additional options whose attributes include:
+			@param {number} [settings.shortYearCutoff] The cutoff year for determining the century.
+			@param {string[]} [settings.dayNamesShort] Abbreviated names of the days from day 0 (Sunday).
+			@param {string[]} [settings.dayNames] Names of the days from day 0 (Sunday).
+			@param {string[]} [settings.monthNamesShort] Abbreviated names of the months.
+			@param {string[]} [settings.monthNames] Names of the months.
+			@return {CDate} The extracted date value or <code>null</code> if value is blank.
+			@throws Errors if the format and/or value are missing,
+					if the value doesn't match the format, or if the date is invalid. */
+		parseDate: function(format, value, settings) {
+			if (typeof value === 'undefined' || value === null) {
+				throw $.calendars.local.invalidArguments || $.calendars.regionalOptions[''].invalidArguments;
+			}
+			value = (typeof value === 'object' ? value.toString() : value + '');
+			if (value === '') {
+				return null;
+			}
+			format = format || this.local.dateFormat;
+			settings = settings || {};
+			var shortYearCutoff = settings.shortYearCutoff || this.shortYearCutoff;
+			shortYearCutoff = (typeof shortYearCutoff !== 'string' ? shortYearCutoff :
+				this.today().year() % 100 + parseInt(shortYearCutoff, 10));
+			var dayNamesShort = settings.dayNamesShort || this.local.dayNamesShort;
+			var dayNames = settings.dayNames || this.local.dayNames;
+			var monthNamesShort = settings.monthNamesShort || this.local.monthNamesShort;
+			var monthNames = settings.monthNames || this.local.monthNames;
+			var jd = -1;
+			var year = -1;
+			var month = -1;
+			var day = -1;
+			var doy = -1;
+			var shortYear = false;
+			var literal = false;
+			// Check whether a format character is doubled
+			var doubled = function(match, step) {
+				var matches = 1;
+				while (iFormat + matches < format.length && format.charAt(iFormat + matches) === match) {
+					matches++;
+				}
+				iFormat += matches - 1;
+				return Math.floor(matches / (step || 1)) > 1;
+			};
+			// Extract a number from the string value
+			var getNumber = function(match, step) {
+				var isDoubled = doubled(match, step);
+				var size = [2, 3, isDoubled ? 4 : 2, isDoubled ? 4 : 2, 10, 11, 20]['oyYJ@!'.indexOf(match) + 1];
+				var digits = new RegExp('^-?\\d{1,' + size + '}');
+				var num = value.substring(iValue).match(digits);
+				if (!num) {
+					throw ($.calendars.local.missingNumberAt || $.calendars.regionalOptions[''].missingNumberAt).
+						replace(/\{0\}/, iValue);
+				}
+				iValue += num[0].length;
+				return parseInt(num[0], 10);
+			};
+			// Extract a name from the string value and convert to an index
+			var calendar = this;
+			var getName = function(match, shortNames, longNames, step) {
+				var names = (doubled(match, step) ? longNames : shortNames);
+				for (var i = 0; i < names.length; i++) {
+					if (value.substr(iValue, names[i].length).toLowerCase() === names[i].toLowerCase()) {
+						iValue += names[i].length;
+						return i + calendar.minMonth;
+					}
+				}
+				throw ($.calendars.local.unknownNameAt || $.calendars.regionalOptions[''].unknownNameAt).
+					replace(/\{0\}/, iValue);
+			};
+			// Confirm that a literal character matches the string value
+			var checkLiteral = function() {
+				if (value.charAt(iValue) !== format.charAt(iFormat)) {
+					throw ($.calendars.local.unexpectedLiteralAt ||
+						$.calendars.regionalOptions[''].unexpectedLiteralAt).replace(/\{0\}/, iValue);
+				}
+				iValue++;
+			};
+			var iValue = 0;
+			for (var iFormat = 0; iFormat < format.length; iFormat++) {
+				if (literal) {
+					if (format.charAt(iFormat) === '\'' && !doubled('\'')) {
+						literal = false;
+					}
+					else {
+						checkLiteral();
+					}
+				}
+				else {
+					switch (format.charAt(iFormat)) {
+						case 'd':
+							day = getNumber('d');
+							break;
+						case 'D':
+							getName('D', dayNamesShort, dayNames);
+							break;
+						case 'o':
+							doy = getNumber('o');
+							break;
+						case 'w':
+							getNumber('w');
+							break;
+						case 'm':
+							month = getNumber('m');
+							break;
+						case 'M':
+							month = getName('M', monthNamesShort, monthNames);
+							break;
+						case 'y':
+							var iSave = iFormat;
+							shortYear = !doubled('y', 2);
+							iFormat = iSave;
+							year = getNumber('y', 2);
+							break;
+						case 'Y':
+							year = getNumber('Y', 2);
+							break;
+						case 'J':
+							jd = getNumber('J') + 0.5;
+							if (value.charAt(iValue) === '.') {
+								iValue++;
+								getNumber('J');
+							}
+							break;
+						case '@':
+							jd = getNumber('@') / this.SECS_PER_DAY + this.UNIX_EPOCH;
+							break;
+						case '!':
+							jd = getNumber('!') / this.TICKS_PER_DAY + this.TICKS_EPOCH;
+							break;
+						case '*':
+							iValue = value.length;
+							break;
+						case '\'':
+							if (doubled('\'')) {
+								checkLiteral();
+							}
+							else {
+								literal = true;
+							}
+							break;
+						default:
+							checkLiteral();
+					}
+				}
+			}
+			if (iValue < value.length) {
+				throw $.calendars.local.unexpectedText || $.calendars.regionalOptions[''].unexpectedText;
+			}
+			if (year === -1) {
+				year = this.today().year();
+			}
+			else if (year < 100 && shortYear) {
+				year += (shortYearCutoff === -1 ? 1900 : this.today().year() -
+					this.today().year() % 100 - (year <= shortYearCutoff ? 0 : 100));
+			}
+			if (doy > -1) {
+				month = 1;
+				day = doy;
+				for (var dim = this.daysInMonth(year, month); day > dim; dim = this.daysInMonth(year, month)) {
+					month++;
+					day -= dim;
+				}
+			}
+			return (jd > -1 ? this.fromJD(jd) : this.newDate(year, month, day));
+		},
+
+		/** A date may be specified as an exact value or a relative one.
+			Found in the <code>jquery.calendars.plus.js</code> module.
+			@memberof BaseCalendar
+			@param {CDate|number|string} dateSpec The date as an object or string in the given format or
+					an offset - numeric days from today, or string amounts and periods, e.g. '+1m +2w'.
+			@param {CDate} defaultDate The date to use if no other supplied, may be <code>null</code>.
+			@param {CDate} [currentDate=null] The current date as a possible basis for relative dates,
+					if <code>null</code> today is used.
+			@param {string} [dateFormat] The expected date format -
+					see {@linkcode BaseCalendar.formatDate|formatDate}. Use '' for the calendar default format.
+			@param {object} [settings] Additional options whose attributes include:
+			@param {number} [settings.shortYearCutoff] The cutoff year for determining the century.
+			@param {string[]} [settings.dayNamesShort] Abbreviated names of the days from day 0 (Sunday).
+			@param {string[]} [settings.dayNames] Names of the days from day 0 (Sunday).
+			@param {string[]} [settings.monthNamesShort] Abbreviated names of the months.
+			@param {string[]} [settings.monthNames] Names of the months.
+			@return {CDate} The decoded date. */
+		determineDate: function(dateSpec, defaultDate, currentDate, dateFormat, settings) {
+			if (currentDate && typeof currentDate !== 'object') {
+				settings = dateFormat;
+				dateFormat = currentDate;
+				currentDate = null;
+			}
+			if (typeof dateFormat !== 'string') {
+				settings = dateFormat;
+				dateFormat = '';
+			}
+			var calendar = this;
+			var offsetString = function(offset) {
+				try {
+					return calendar.parseDate(dateFormat, offset, settings);
+				}
+				catch (e) {
+					// Ignore
+				}
+				offset = offset.toLowerCase();
+				var date = (offset.match(/^c/) && currentDate ?
+					currentDate.newDate() : null) || calendar.today();
+				var pattern = /([+-]?[0-9]+)\s*(d|w|m|y)?/g;
+				var matches = pattern.exec(offset);
+				while (matches) {
+					date.add(parseInt(matches[1], 10), matches[2] || 'd');
+					matches = pattern.exec(offset);
+				}
+				return date;
+			};
+			defaultDate = (defaultDate ? defaultDate.newDate() : null);
+			dateSpec = (typeof dateSpec === 'undefined' || dateSpec === null ? defaultDate :
+				(typeof dateSpec === 'string' ? offsetString(dateSpec) : (typeof dateSpec === 'number' ?
+				(isNaN(dateSpec) || dateSpec === Infinity || dateSpec === -Infinity ? defaultDate :
+				calendar.today().add(dateSpec, 'd')) : calendar.newDate(dateSpec))));
+			return dateSpec;
+		}
+	});
+
+})(jQuery);
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/js/jquery.plugin.js b/apps/edr-freight-web/backoffice/src/shared/common/js/jquery.plugin.js
new file mode 100644
index 000000000..d47bc1a37
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/js/jquery.plugin.js
@@ -0,0 +1,389 @@
+/* globals JQClass */
+/*! Simple JavaScript Inheritance
+ * By John Resig http://ejohn.org/
+ * MIT Licensed.
+ */
+// Inspired by base2 and Prototype
+import $ from "@/shared/common/jquery-global";
+(function(){
+	'use strict';
+	var initializing = false;
+
+	// The base JQClass implementation (does nothing)
+	window.JQClass = function(){};
+
+	// Collection of derived classes
+	JQClass.classes = {};
+ 
+	// Create a new JQClass that inherits from this class
+	JQClass.extend = function extender(prop) {
+		var base = this.prototype;
+
+		// Instantiate a base class (but only create the instance, don't run the init constructor)
+		initializing = true;
+		var prototype = new this();
+		initializing = false;
+
+		// Copy the properties over onto the new prototype
+		for (var name in prop) { // jshint loopfunc:true
+			// Check if we're overwriting an existing function
+			if (typeof prop[name] === 'function' && typeof base[name] === 'function') {
+				prototype[name] = (function (name, fn) {
+					return function () {
+						var __super = this._super;
+						// Add a new ._super() method that is the same method but on the super-class
+						this._super = function (args) {
+							return base[name].apply(this, args || []);
+						};
+						var ret = fn.apply(this, arguments);
+						// The method only needs to be bound temporarily, so we remove it when we're done executing
+						this._super = __super;
+						return ret;
+					};
+				})(name, prop[name]);
+			// Check if we're overwriting existing default options.
+			} else if (typeof prop[name] === 'object' && typeof base[name] === 'object' && name === 'defaultOptions') {
+				var obj1 = base[name];
+				var obj2 = prop[name];
+				var obj3 = {};
+				var key;
+				for (key in obj1) { // jshint forin:false
+					obj3[key] = obj1[key];
+				}
+				for (key in obj2) { // jshint forin:false
+					obj3[key] = obj2[key];
+				}
+				prototype[name] = obj3;
+			} else {
+				prototype[name] = prop[name];
+			}
+		}
+
+		// The dummy class constructor
+		function JQClass() {
+			// All construction is actually done in the init method
+			if (!initializing && this._init) {
+				this._init.apply(this, arguments);
+			}
+		}
+
+		// Populate our constructed prototype object
+		JQClass.prototype = prototype;
+
+		// Enforce the constructor to be what we expect
+		JQClass.prototype.constructor = JQClass;
+
+		// And make this class extendable
+		JQClass.extend = extender;
+
+		return JQClass;
+	};
+})();
+/*! Abstract base class for collection plugins v1.0.2.
+	Written by Keith Wood (wood.keith{at}optusnet.com.au) December 2013.
+	Licensed under the MIT license (http://keith-wood.name/licence.html). */
+(function($) { // Ensure $, encapsulate
+	'use strict';
+
+	/** <p>Abstract base class for collection plugins v1.0.2.</p>
+		<p>Written by Keith Wood (wood.keith{at}optusnet.com.au) December 2013.</p>
+		<p>Licensed under the MIT license (http://keith-wood.name/licence.html).</p>
+		<p>Use {@link $.JQPlugin.createPlugin} to create new plugins using this framework.</p>
+		<p>This base class provides common functionality such as:</p>
+		<ul>
+			<li>Creates jQuery bridge - allowing you to invoke your plugin on a collection of elements.</li>
+			<li>Handles initialisation including reading settings from metadata -
+				an instance object is attached to the affected element(s) containing all the necessary data.</li>
+			<li>Handles option retrieval and update - options can be set through default values,
+				through inline metadata, or through instantiation settings.<br>
+				Metadata is specified as an attribute on the element:
+				<code>data-&lt;pluginName>="&lt;option name>: '&lt;value>', ..."</code>.
+				Dates should be specified as strings in this format: <code>'new Date(y, m-1, d)'</code>.</li>
+			<li>Handles method calling - inner functions starting with '_'are inaccessible,
+				whereas others can be called via <code>$(selector).pluginName('functionName')</code>.</li>
+			<li>Handles plugin destruction - removing all trace of the plugin.</li>
+		</ul>
+		@module JQPlugin
+		@abstract */
+	JQClass.classes.JQPlugin = JQClass.extend({
+
+		/** Name to identify this plugin.
+			@example name: 'tabs' */
+		name: 'plugin',
+
+		/** Default options for instances of this plugin (default: {}).
+			@example defaultOptions: {
+  selectedClass: 'selected',
+  triggers: 'click'
+} */
+		defaultOptions: {},
+
+		/** Options dependent on the locale.
+			Indexed by language and (optional) country code, with '' denoting the default language (English/US).
+			Normally additional languages would be provided as separate files to all them to be included as needed.
+			@example regionalOptions: {
+  '': {
+    greeting: 'Hi'
+  }
+} */
+		regionalOptions: {},
+
+		/** Whether or not a deep merge should be performed when accumulating options.
+			The default is <code>true</code> but can be overridden in a sub-class. */
+		deepMerge: true,
+
+		/** Retrieve a marker class for affected elements.
+			In the format: <code>is-&lt;pluginName&gt;</code>.
+			@protected
+			@return {string} The marker class. */
+		_getMarker: function() {
+			return 'is-' + this.name;
+		},
+
+		/** Initialise the plugin.
+			Create the jQuery bridge - plugin name <code>xyz</code>
+			produces singleton <code>$.xyz</code> and collection function <code>$.fn.xyz</code>.
+			@protected */
+		_init: function() {
+			// Apply default localisations
+			$.extend(this.defaultOptions, (this.regionalOptions && this.regionalOptions['']) || {});
+			// Camel-case the name
+			var jqName = camelCase(this.name);
+			// Expose jQuery singleton manager
+			$[jqName] = this;
+			// Expose jQuery collection plugin
+			$.fn[jqName] = function(options) {
+				var otherArgs = Array.prototype.slice.call(arguments, 1);
+				var inst = this;
+				var returnValue = this;
+				this.each(function () {
+					if (typeof options === 'string') {
+						if (options[0] === '_' || !$[jqName][options]) {
+							throw 'Unknown method: ' + options;
+						}
+						var methodValue = $[jqName][options].apply($[jqName], [this].concat(otherArgs));
+						if (methodValue !== inst && methodValue !== undefined) {
+							returnValue = methodValue;
+							return false;
+						}
+					} else {
+						$[jqName]._attach(this, options);
+					}
+				});
+				return returnValue;
+			};
+		},
+
+		/** Set default options for all subsequent instances.
+			@param {object} options The new default options.
+			@example $.pluginName.setDefaults({name: value, ...}) */
+		setDefaults: function(options) {
+			$.extend(this.defaultOptions, options || {});
+		},
+
+		/** Initialise an element. Called internally only.
+			Adds an instance object as data named for the plugin.
+			Override {@linkcode module:JQPlugin~_postAttach|_postAttach} for plugin-specific processing.
+			@private
+			@param {Element} elem The element to enhance.
+			@param {object} options Overriding settings. */
+		_attach: function(elem, options) {
+			elem = $(elem);
+			if (elem.hasClass(this._getMarker())) {
+				return;
+			}
+			elem.addClass(this._getMarker());
+			options = $.extend(this.deepMerge, {}, this.defaultOptions, this._getMetadata(elem), options || {});
+			var inst = $.extend({name: this.name, elem: elem, options: options}, this._instSettings(elem, options));
+			elem.data(this.name, inst); // Save instance against element
+			this._postAttach(elem, inst);
+			this.option(elem, options);
+		},
+
+		/** Retrieve additional instance settings.
+			Override this in a sub-class to provide extra settings.
+			These are added directly to the instance object.
+			Default attributes of an instance object are shown as properties below:
+			@protected
+			@param {jQuery} elem The current jQuery element.
+			@param {object} options The instance options.
+			@return {object} Any extra instance values.
+			@property {Element} elem The element to which this instance applies.
+			@property {string} name The name of this plugin.
+			@property {object} options The accumulated options for this instance.
+			@example _instSettings: function(elem, options) {
+  return {nav: elem.find(options.navSelector)};
+} */
+		_instSettings: function(elem, options) { // jshint unused:false
+			return {};
+		},
+
+		/** Plugin specific post initialisation.
+			Override this in a sub-class to perform extra activities.
+			This is where you would implement your plugin's main functionality.
+			@protected
+			@param {jQuery} elem The current jQuery element.
+			@param {object} inst The instance settings.
+			@example _postAttach: function(elem, inst) {
+  elem.on('click.' + this.name, function() {
+    ...
+  });
+} */
+		_postAttach: function(elem, inst) { // jshint unused:false
+		},
+		
+		/** Retrieve metadata configuration from the element.
+			Metadata is specified as an attribute:
+			<code>data-&lt;pluginName>="&lt;option name>: '&lt;value>', ..."</code>.
+			Dates should be specified as strings in this format: <code>'new Date(y, m-1, d)'</code>.
+			@private
+			@param {jQuery} elem The source element.
+			@return {object} The inline configuration or {}. */
+		_getMetadata: function(elem) {
+			try {
+				var data = elem.data(this.name.toLowerCase()) || '';
+				data = data.replace(/(\\?)'/g, function(e, t) {
+					return t ? '\'' : '"';
+				}).replace(/([a-zA-Z0-9]+):/g, function(match, group, i) {
+					var count = data.substring(0, i).match(/"/g); // Handle embedded ':'
+					return (!count || count.length % 2 === 0 ? '"' + group + '":' : group + ':');
+				}).replace(/\\:/g, ':');
+				data = $.parseJSON('{' + data + '}');
+				for (var key in data) {
+					if (data.hasOwnProperty(key)) {
+						var value = data[key];
+						if (typeof value === 'string' && value.match(/^new Date\(([-0-9,\s]*)\)$/)) { // Convert dates
+							data[key] = eval(value); // jshint ignore:line
+						}
+					}
+				}
+				return data;
+			}
+			catch (e) {
+				return {};
+			}
+		},
+
+		/** Retrieve the instance data for element.
+			@protected
+			@param {Element} elem The source element.
+			@return {object} The instance data or <code>{}</code> if none. */
+		_getInst: function(elem) {
+			return $(elem).data(this.name) || {};
+		},
+
+		/** Retrieve or reconfigure the settings for a plugin.
+			If new settings are provided they are applied to the instance options.
+			If an option name only is provided the value of that option is returned.
+			If no name or value is provided, all options are returned.
+			Override {@linkcode module:JQPlugin~_optionsChanged|_optionsChanged}
+			for plugin-specific processing when option values change.
+			@param {Element} elem The source element.
+			@param {object|string} [name] The collection of new option values or the name of a single option.
+			@param {any} [value] The value for a single named option.
+			@return {any|object} If retrieving a single value or all options.
+			@example $(selector).plugin('option', 'name', value) // Set one option
+$(selector).plugin('option', {name: value, ...}) // Set multiple options
+var value = $(selector).plugin('option', 'name') // Get one option
+var options = $(selector).plugin('option') // Get all options */
+		option: function(elem, name, value) {
+			elem = $(elem);
+			var inst = elem.data(this.name);
+			var options = name || {};
+			if  (!name || (typeof name === 'string' && typeof value === 'undefined')) {
+				options = (inst || {}).options;
+				return (options && name ? options[name] : options);
+			}
+			if (!elem.hasClass(this._getMarker())) {
+				return;
+			}
+			if (typeof name === 'string') {
+				options = {};
+				options[name] = value;
+			}
+			this._optionsChanged(elem, inst, options);
+			$.extend(inst.options, options);
+		},
+
+		/** Plugin specific options processing.
+			Old value available in <code>inst.options[name]</code>, new value in <code>options[name]</code>.
+			Override this in a sub-class to perform extra activities.
+			@protected
+			@param {jQuery} elem The current jQuery element.
+			@param {object} inst The instance settings.
+			@param {object} options The new options.
+			@example _optionsChanged: function(elem, inst, options) {
+  if (options.name != inst.options.name) {
+    elem.removeClass(inst.options.name).addClass(options.name);
+  }
+} */
+		_optionsChanged: function(elem, inst, options) { // jshint unused:false
+		},
+
+		/** Remove all trace of the plugin.
+			Override {@linkcode module:JQPlugin~_preDestroy|_preDestroy} for plugin-specific processing.
+			@param {Element} elem The source element.
+			@example $(selector).plugin('destroy') */
+		destroy: function(elem) {
+			elem = $(elem);
+			if (!elem.hasClass(this._getMarker())) {
+				return;
+			}
+			this._preDestroy(elem, this._getInst(elem));
+			elem.removeData(this.name).removeClass(this._getMarker());
+		},
+
+		/** Plugin specific pre destruction.
+			It is invoked as part of the {@linkcode module:JQPlugin~destroy|destroy} processing.
+			Override this in a sub-class to perform extra activities and undo everything that was
+			done in the {@linkcode module:JQPlugin~_postAttach|_postAttach} or
+			{@linkcode module:JQPlugin~_optionsChanged|_optionsChanged} functions.
+			@protected
+			@param {jQuery} elem The current jQuery element.
+			@param {object} inst The instance settings.
+			@example _preDestroy: function(elem, inst) {
+  elem.off('.' + this.name);
+} */
+		_preDestroy: function(elem, inst) { // jshint unused:false
+		}
+	});
+
+	/** Convert names from hyphenated to camel-case.
+		@private
+		@param {string} value The original hyphenated name.
+		@return {string} The camel-case version. */
+	function camelCase(name) {
+		return name.replace(/-([a-z])/g, function(match, group) {
+			return group.toUpperCase();
+		});
+	}
+
+	/** Expose the plugin base.
+		@namespace $.JQPlugin */
+	$.JQPlugin = {
+
+		/** Create a new collection plugin.
+			@memberof $.JQPlugin
+			@param {string} [superClass='JQPlugin'] The name of the parent class to inherit from.
+			@param {object} overrides The property/function overrides for the new class.
+				See {@link module:JQPlugin|JQPlugin} for the base functionality.
+			@example $.JQPlugin.createPlugin({ // Define the plugin
+  name: 'tabs',
+  defaultOptions: {selectedClass: 'selected'},
+  _initSettings: function(elem, options) { return {...}; },
+  _postAttach: function(elem, inst) { ... }
+});
+$('selector').tabs(); // And instantiate it */
+		createPlugin: function(superClass, overrides) {
+			if (typeof superClass === 'object') {
+				overrides = superClass;
+				superClass = 'JQPlugin';
+			}
+			superClass = camelCase(superClass);
+			var className = camelCase(overrides.name);
+			JQClass.classes[className] = JQClass.classes[superClass].extend(overrides);
+			new JQClass.classes[className](); // jshint ignore:line
+		}
+	};
+
+})(jQuery);
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/localizedName.ts b/apps/edr-freight-web/backoffice/src/shared/common/localizedName.ts
new file mode 100644
index 000000000..072b7c794
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/localizedName.ts
@@ -0,0 +1,21 @@
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+
+export type LocalizedText = {
+  am?: string;
+  en?: string;
+};
+
+export const useLocalizedName = (language?: string) => {
+  const { i18n } = useTranslation();
+  const currentLanguage = language || i18n.language;
+  return useCallback(
+    (name?: LocalizedText): string => {
+      if (!name) return "";
+      const am = name.am?.trim() ?? "";
+      const en = name.en?.trim() ?? "";
+      return (currentLanguage.startsWith("am") ? am || en : en || am) || "";
+    },
+    [currentLanguage],
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/FayidaInput.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/FayidaInput.tsx
new file mode 100644
index 000000000..c5011e104
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/FayidaInput.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import { Input } from "@/shared/common/ui/input"; // your Input component
+
+interface FaydaInputProps {
+  faydaValue: string;
+  setFaydaValue: (value: string) => void; // make sure it's not optional
+}
+
+export const FaydaInput: React.FC<FaydaInputProps> = ({
+  faydaValue,
+  setFaydaValue,
+}) => {
+  return (
+    <div className="space-y-3">
+      <label className="block">
+        <span className="font-medium">Fayda ID</span>
+        <Input
+          type="text"
+          value={faydaValue}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setFaydaValue(e.target.value)
+          }
+          placeholder="Enter Fayda ID"
+          className="mt-1 block w-full rounded-md border px-3 py-2"
+        />
+      </label>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/LoadingOverlay.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/LoadingOverlay.tsx
new file mode 100644
index 000000000..4fbd8d280
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/LoadingOverlay.tsx
@@ -0,0 +1,20 @@
+import { Progress } from "@/shared/common/ui/progress";
+
+interface LoadingOverlayProps {
+  progress?: number;
+  text?: string;
+}
+
+export function LoadingOverlay({
+  progress = 50,
+  text = "Processing...",
+}: LoadingOverlayProps) {
+  return (
+    <div className="fixed inset-0 bg-primary-300 bg-opacity-50 z-50 flex flex-col items-center justify-center space-y-4">
+      <div className="text-white text-lg font-semibold animate-pulse">
+        {text}
+      </div>
+      <Progress value={progress} className="w-3/4 md:w-1/3 h-3 rounded-full" />
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/SliderUI.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/SliderUI.tsx
new file mode 100644
index 000000000..7278cf97b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/SliderUI.tsx
@@ -0,0 +1,53 @@
+import { FC } from "react";
+// @ts-ignore - Module types not available
+import * as SliderPrimitive from "@radix-ui/react-slider";
+
+interface SliderUIProps {
+  id?: string;
+  label: string;
+  description?: string;
+  value: number[];
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  required?: boolean;
+  disabled?: boolean;
+}
+
+export const SliderUI: FC<SliderUIProps> = ({
+  id,
+  label,
+  description,
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  required = false,
+  disabled = false,
+}) => {
+  return (
+    <div className="space-y-2">
+      <label htmlFor={id} className="block text-sm font-medium">
+        {label} {required && <span className="text-red-500">*</span>}
+      </label>
+      {description && <p className="text-xs text-gray-500">{description}</p>}
+      <SliderPrimitive.Root
+        id={id}
+        value={value}
+        onValueChange={(val: number[]) => onChange(val[0])}
+        min={min}
+        max={max}
+        step={step}
+        disabled={disabled}
+        className="relative flex w-full touch-none select-none items-center h-5">
+        <SliderPrimitive.Track className="relative bg-gray-200 flex-1 h-1 rounded-full">
+          <SliderPrimitive.Range className="absolute bg-blue-500 h-full rounded-full" />
+        </SliderPrimitive.Track>
+        <SliderPrimitive.Thumb className="block w-5 h-5 bg-white border border-gray-300 rounded-full shadow" />
+      </SliderPrimitive.Root>
+      <div className="text-sm text-gray-600 text-center">{value}</div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/Text.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/Text.tsx
new file mode 100644
index 000000000..90c870124
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/Text.tsx
@@ -0,0 +1,25 @@
+// src/shared/common/ui/text.tsx
+import React from "react";
+
+type TextProps = React.HTMLAttributes<HTMLSpanElement> & {
+  fw?: number | string;
+  color?: string;
+  size?: string | number;
+};
+
+export const Text: React.FC<TextProps> = ({
+  fw,
+  color,
+  size,
+  style,
+  children,
+  ...props
+}) => {
+  return (
+    <span
+      style={{ fontWeight: fw, color, fontSize: size, ...style }}
+      {...props}>
+      {children}
+    </span>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/accordion.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/accordion.tsx
new file mode 100644
index 000000000..a87b14322
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/accordion.tsx
@@ -0,0 +1,64 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+
+import { cn } from "@/shared/lib/utils";
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/alert-dialog.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/alert-dialog.tsx
new file mode 100644
index 000000000..7eece3a62
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/alert-dialog.tsx
@@ -0,0 +1,155 @@
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { cn } from "@/shared/lib/utils";
+import { buttonVariants } from "@/shared/common/ui/button";
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  );
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/alert.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/alert.tsx
new file mode 100644
index 000000000..67a6e9751
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/alert.tsx
@@ -0,0 +1,58 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/super-admin/lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/avatar.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/avatar.tsx
new file mode 100644
index 000000000..201cd8f01
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/avatar.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "@/super-admin/lib/utils";
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarImage, AvatarFallback };
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/badge.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/badge.tsx
new file mode 100644
index 000000000..36a25ce4e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/badge.tsx
@@ -0,0 +1,62 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/shared/lib/utils";
+//the status edit
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        //draft and forward
+        default:
+          "bg-blue-100 text-blue-800 text-sm font-medium me-2 px-3 py-0.5 rounded-full dark:bg-blue-900 dark:text-blue-300",
+        secondary:
+          "bg-indigo-100 text-indigo-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-indigo-900 dark:text-indigo-300",
+        destructive:
+          "bg-gray-100 text-gray-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-gray-700 dark:text-gray-300",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        info: "border-transparent bg-info text-info-foreground [a&]:hover:bg-info/90",
+        purple:
+          "bg-purple-100 text-purple-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-purple-900 dark:text-purple-300",
+        warning:
+          "bg-pink-100 text-pink-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-pink-900 dark:text-pink-300",
+        //approved
+        success:
+          "bg-green-100 text-green-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-green-900 dark:text-green-300",
+        danger:
+          "bg-red-100 text-red-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-red-900 dark:text-red-300",
+        danger2:
+          "bg-yellow-100 text-yellow-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-yellow-900 dark:text-yellow-300",
+        forward:
+          "bg-orange-100 text-orange-800 text-sm font-medium me-2 px-3 py-0.5 rounded-full dark:bg-orange-900 dark:text-orange-300",
+        dispatched:
+          "bg-green-100 text-green-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-green-900 dark:text-green-300",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/breadcrumb.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/breadcrumb.tsx
new file mode 100644
index 000000000..98abec946
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/breadcrumb.tsx
@@ -0,0 +1,109 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "@/shared/lib/utils";
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/button.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/button.tsx
new file mode 100644
index 000000000..f6920a95b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/button.tsx
@@ -0,0 +1,161 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/shared/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+        outline:
+          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-muted-foreground underline-offset-13 hover:underline hover:text-primary",
+        linkActive: "text-primary-700 underline-offset-13 underline -mt-2",
+        addRecordBtn:
+          "bg-primary text-white size-35 shadow-xs hover:bg-primary-700 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+        viewDetail:
+          "bg-transparent border border-primary text-primary text-base font-normal me-2 !px-2.5 py-0.5 rounded-full scale-90 origin-center hover:bg-primary/10 transition-colors dark:bg-primary/20 dark:border-primary dark:text-primary-foreground leading-tight whitespace-nowrap",
+        incomingmenu:
+          "bg-transparent border border-primary text-primary text-md font-normal me-2 !px-4 py-0.5 rounded-md w-[170px] scale-90 origin-center hover:bg-primary/10 transition-colors dark:bg-primary/20 dark:border-primary dark:text-primary-foreground leading-tight whitespace-nowrap",
+        incomingmenu1:
+          "bg-transparent border border-gray-500 text-gray-500 text-md font-normal me-2 !px-4 py-0.5 rounded-md w-[170px] scale-90 origin-center hover:bg-gray-500/10 transition-colors dark:border-gray-300 dark:text-gray-300 leading-tight whitespace-nowrap",
+        actionGreen:
+          "bg-emerald-50/90 dark:bg-emerald-950/20 border border-emerald-200 dark:border-emerald-900/40 text-emerald-700 dark:text-emerald-300 hover:bg-emerald-100 dark:hover:bg-emerald-950/40 hover:text-emerald-800 dark:hover:text-emerald-200 hover:border-emerald-300 dark:hover:border-emerald-800/60 focus-visible:ring-emerald-500 rounded-full h-9 px-4 flex items-center gap-2 font-medium shadow-xs hover:shadow-md transition-all duration-300",
+        actionLightGreen:
+          "bg-green-50/50 dark:bg-green-950/10 border border-green-100 dark:border-green-900/20 text-green-600 dark:text-green-400 hover:bg-green-100/50 dark:hover:bg-green-950/30 hover:text-green-700 dark:hover:text-green-300 hover:border-green-200 dark:hover:border-green-800/40 focus-visible:ring-green-500 rounded-full h-9 px-4 flex items-center gap-2 font-medium shadow-xs hover:shadow-md transition-all duration-300",
+        actionRed:
+          "bg-rose-50/90 dark:bg-rose-950/20 border border-rose-200 dark:border-rose-900/40 text-rose-700 dark:text-rose-300 hover:bg-rose-100 dark:hover:bg-rose-950/40 hover:text-rose-800 dark:hover:text-rose-200 hover:border-rose-300 dark:hover:border-rose-800/60 focus-visible:ring-rose-500 rounded-full h-9 px-4 flex items-center gap-2 font-medium shadow-xs hover:shadow-md transition-all duration-300",
+        actionYellow:
+          "bg-amber-50/90 dark:bg-amber-950/20 border border-amber-200 dark:border-amber-900/40 text-amber-700 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-950/40 hover:text-amber-800 dark:hover:text-amber-200 hover:border-amber-300 dark:hover:border-amber-800/60 focus-visible:ring-amber-500 rounded-full h-9 px-4 flex items-center gap-2 font-medium shadow-xs hover:shadow-md transition-all duration-300",
+        actionBlue:
+          "bg-blue-50/90 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-900/40 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-950/40 hover:text-blue-800 dark:hover:text-blue-200 hover:border-blue-300 dark:hover:border-blue-800/60 focus-visible:ring-blue-500 rounded-full h-9 px-4 flex items-center gap-2 font-medium shadow-xs hover:shadow-md transition-all duration-300",
+        actionPurple:
+          "bg-purple-50/90 dark:bg-purple-950/20 border border-purple-200 dark:border-purple-900/40 text-purple-700 dark:text-purple-300 hover:bg-purple-100 dark:hover:bg-purple-950/40 hover:text-purple-800 dark:hover:text-purple-200 hover:border-purple-300 dark:hover:border-purple-800/60 focus-visible:ring-purple-500 rounded-full h-9 px-4 flex items-center gap-2 font-medium shadow-xs hover:shadow-md transition-all duration-300",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+type ButtonProps = React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  };
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, type, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+
+    return (
+      <Comp
+        data-slot="button"
+        // When `asChild` is used, Radix will attach the ref to the child via Slot.
+        ref={ref as any}
+        className={cn(
+          buttonVariants({ variant, size, className }),
+          "cursor-pointer",
+        )}
+        {...(asChild ? {} : { type: type ?? "button" })}
+        {...props}
+      />
+    );
+  },
+);
+
+Button.displayName = "Button";
+
+export function getActionButtonVariant(actionName: string): any {
+  const normalized = actionName.trim().toLowerCase();
+
+  if (
+    normalized.includes("approve") ||
+    normalized.includes("sign") ||
+    normalized.includes("reply") ||
+    normalized === "accept"
+  ) {
+    return "actionGreen";
+  }
+  if (
+    normalized.includes("accept and forward") ||
+    normalized.includes("accept & forward")
+  ) {
+    return "actionLightGreen";
+  }
+  if (normalized.includes("delete") || normalized.includes("reject")) {
+    return "actionRed";
+  }
+  if (normalized.includes("forward")) {
+    return "actionPurple";
+  }
+  if (
+    normalized.includes("adjustment") ||
+    normalized.includes("adjust") ||
+    normalized.includes("secure letter") ||
+    normalized.includes("make urgent") ||
+    normalized.includes("urgent") ||
+    normalized.includes("assign") ||
+    normalized.includes("reassign") ||
+    normalized.includes("under review") ||
+    normalized.includes("return")
+  ) {
+    return "actionYellow";
+  }
+  if (normalized.includes("edit") || normalized.includes("comment")) {
+    return "actionBlue";
+  }
+  if (
+    normalized.includes("send") ||
+    normalized.includes("dispatch") ||
+    normalized.includes("share")
+  ) {
+    return "actionPurple";
+  }
+
+  // Custom keyword heuristics
+  if (
+    normalized.includes("remove") ||
+    normalized.includes("cancel") ||
+    normalized.includes("fail") ||
+    normalized.includes("discard")
+  ) {
+    return "actionRed";
+  }
+  if (
+    normalized.includes("warn") ||
+    normalized.includes("caution") ||
+    normalized.includes("alert") ||
+    normalized.includes("pending")
+  ) {
+    return "actionYellow";
+  }
+  if (
+    normalized.includes("success") ||
+    normalized.includes("complete") ||
+    normalized.includes("done") ||
+    normalized.includes("save")
+  ) {
+    return "actionGreen";
+  }
+
+  return "actionBlue"; // Informational fallback
+}
+
+export { Button, buttonVariants };
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/calendar.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/calendar.tsx
new file mode 100644
index 000000000..4e4eb6418
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/calendar.tsx
@@ -0,0 +1,74 @@
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
+import "react-day-picker/style.css";
+
+import { cn } from "@/shared/lib/utils";
+import { buttonVariants } from "@/shared/common/ui/button";
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: React.ComponentProps<typeof DayPicker>) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      {...props}
+      className={cn(
+        "rdp w-full rounded-xl border border-slate-200 bg-white p-3 shadow-[0_10px_30px_-20px_rgba(15,23,42,0.5)] dark:border-slate-700 dark:bg-slate-900",
+        className,
+      )}
+      classNames={{
+        months: "rdp-months flex flex-col gap-4 sm:flex-row sm:gap-6",
+        month: "rdp-month space-y-4",
+        caption: "rdp-caption relative flex items-center justify-center pt-1",
+        caption_label:
+          "rdp-caption_label text-sm font-semibold tracking-wide text-slate-800 dark:text-slate-100",
+        nav: "rdp-nav flex items-center gap-1",
+        nav_button: cn(
+          "rdp-nav_button",
+          buttonVariants({ variant: "ghost", size: "icon" }),
+          "h-8 w-8 rounded-lg text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-slate-100",
+        ),
+        nav_button_previous: "rdp-nav_button_previous absolute left-0",
+        nav_button_next: "rdp-nav_button_next absolute right-0",
+        table: "rdp-table w-full border-collapse space-y-1",
+        head_row: "rdp-head_row flex w-full justify-between",
+        head_cell:
+          "rdp-head_cell text-slate-500 rounded-md w-9 font-normal text-[0.8rem] dark:text-slate-400 uppercase tracking-wide text-center pt-1 mb-2 whitespace-nowrap",
+        row: "rdp-row flex w-full justify-between mt-1",
+        cell: cn(
+          "rdp-cell relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-10",
+          props.mode === "range"
+            ? "[&:has([aria-selected].day-range-end)]:rounded-r-lg [&:has([aria-selected].day-range-start)]:rounded-l-lg [&:has([aria-selected].day-range-middle)]:bg-primary-50 dark:[&:has([aria-selected].day-range-middle)]:bg-primary-900/30"
+            : "",
+        ),
+        day: cn(
+          "rdp-day",
+          buttonVariants({ variant: "ghost" }),
+          "h-9 w-9 rounded-lg p-0 font-medium text-slate-700 hover:bg-slate-100 hover:text-slate-900 focus-visible:ring-2 focus-visible:ring-primary-500/30 aria-selected:opacity-100 dark:text-slate-200 dark:hover:bg-slate-800 dark:hover:text-white",
+        ),
+        day_selected:
+          "rdp-day_selected bg-primary-600 text-white hover:bg-primary-600 hover:text-white focus:bg-primary-600 focus:text-white dark:bg-primary-500 dark:hover:bg-primary-500",
+        day_today:
+          "rdp-day_today border border-primary-300 bg-primary-50 text-primary-700 dark:border-primary-500/50 dark:bg-primary-900/30 dark:text-primary-300",
+        day_outside:
+          "rdp-day_outside text-slate-400 opacity-60 aria-selected:bg-primary-100 aria-selected:text-primary-700 dark:text-slate-600 dark:aria-selected:bg-primary-900/40 dark:aria-selected:text-primary-300",
+        day_disabled: "rdp-day_disabled text-slate-300 opacity-50 dark:text-slate-600",
+        day_range_middle:
+          "rdp-day_range_middle aria-selected:bg-primary-100 aria-selected:text-primary-800 dark:aria-selected:bg-primary-900/40 dark:aria-selected:text-primary-200",
+        day_range_start:
+          "rdp-day_range_start day-range-start aria-selected:bg-primary-600 aria-selected:text-white",
+        day_range_end:
+          "rdp-day_range_end day-range-end aria-selected:bg-primary-600 aria-selected:text-white",
+        day_hidden: "rdp-day_hidden invisible",
+        ...classNames,
+      }}
+      // Removed unsupported 'Chevron' component override
+    />
+  );
+}
+
+export { Calendar };
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/card.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/card.tsx
new file mode 100644
index 000000000..e898e8ea7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/card.tsx
@@ -0,0 +1,75 @@
+import * as React from "react";
+
+import { cn } from "@/shared/lib/utils";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn("flex flex-col gap-1.5 px-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/chart.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/chart.tsx
new file mode 100644
index 000000000..d6c58b58b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/chart.tsx
@@ -0,0 +1,355 @@
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "@/shared/lib/utils";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  );
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+
+  return context;
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: React.ComponentProps<"div"> & {
+  config: ChartConfig;
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >["children"];
+}) {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color
+  );
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: Omit<React.ComponentProps<typeof RechartsPrimitive.Tooltip>, "payload"> &
+  React.ComponentProps<"div"> & {
+    payload?: Array<any>;
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+    label?: React.ReactNode;
+  }) {
+  const { config } = useChart();
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null;
+    }
+
+    const [item] = payload;
+    const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    const value =
+      !labelKey && typeof label === "string"
+        ? config[label as keyof typeof config]?.label || label
+        : itemConfig?.label;
+
+    if (labelFormatter) {
+      return (
+        <div className={cn("font-medium", labelClassName)}>
+          {labelFormatter(value, payload as any)}
+        </div>
+      );
+    }
+
+    if (!value) {
+      return null;
+    }
+
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ]);
+
+  if (!active || !payload?.length) {
+    return null;
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== "dot";
+
+  return (
+    <div
+      className={cn(
+        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        className
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload.map((item, index) => {
+          const key = `${nameKey || item.name || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const indicatorColor = color || item.payload.fill || item.color;
+
+          return (
+            <div
+              key={item.dataKey}
+              className={cn(
+                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                indicator === "dot" && "items-center"
+              )}
+            >
+              {formatter && item?.value !== undefined && item.name ? (
+                formatter(item.value, item.name, item as any, index, item.payload as any)
+              ) : (
+                <>
+                  {itemConfig?.icon ? (
+                    <itemConfig.icon />
+                  ) : (
+                    !hideIndicator && (
+                      <div
+                        className={cn(
+                          "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                          {
+                            "h-2.5 w-2.5": indicator === "dot",
+                            "w-1": indicator === "line",
+                            "w-0 border-[1.5px] border-dashed bg-transparent":
+                              indicator === "dashed",
+                            "my-0.5": nestLabel && indicator === "dashed",
+                          }
+                        )}
+                        style={
+                          {
+                            "--color-bg": indicatorColor,
+                            "--color-border": indicatorColor,
+                          } as React.CSSProperties
+                        }
+                      />
+                    )
+                  )}
+                  <div
+                    className={cn(
+                      "flex flex-1 justify-between leading-none",
+                      nestLabel ? "items-end" : "items-center"
+                    )}
+                  >
+                    <div className="grid gap-1.5">
+                      {nestLabel ? tooltipLabel : null}
+                      <span className="text-muted-foreground">
+                        {itemConfig?.label || (typeof item.name === "string" ? item.name : (item.name as any)?.en || (item.name as any)?.am || "Item")}
+                      </span>
+                    </div>
+                    {item.value && (
+                      <span className="text-foreground font-mono font-medium tabular-nums">
+                        {item.value.toLocaleString()}
+                      </span>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey,
+}: React.ComponentProps<"div"> &
+  {
+    payload?: { dataKey?: string; value?: string; color?: string }[];
+    verticalAlign?: "top" | "bottom" | "middle";
+    hideIcon?: boolean;
+    nameKey?: string;
+  }) {
+  const { config } = useChart();
+
+  if (!payload?.length) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      )}
+    >
+      {payload.map((item) => {
+        const key = `${nameKey || item.dataKey || "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+        return (
+          <div
+            key={item.value}
+            className={cn(
+              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+            )}
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className={cn(
+                  "h-2 w-2 shrink-0 rounded-[2px]",
+                  item.color ? `chart-legend-color--${item.color.replace("#", "")}` : ""
+                )}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string;
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config];
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/checkbox.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/checkbox.tsx
new file mode 100644
index 000000000..763fe5e8a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/checkbox.tsx
@@ -0,0 +1,60 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+
+import { cn } from "@/shared/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+
+// Define variants using CVA
+const checkboxVariants = cva(
+  "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "",
+        //soft: "rounded-full bg-primary/10 border-primary text-primary data-[state=checked]:bg-primary data-[state=checked]:text-white data-[state=checked]:border-primary",
+        subtle: "border-muted bg-muted/20",
+        soft: `
+  size-5 rounded-full border-2 border-primary bg-transparent
+  data-[state=checked]:bg-primary
+  data-[state=checked]:border-primary
+  transition-colors
+`,
+      },
+      size: {
+        sm: "size-3",
+        md: "size-4",
+        lg: "size-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+    },
+  }
+);
+
+function Checkbox({
+  className,
+  variant = "default",
+  size = "md",
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root> &
+  VariantProps<typeof checkboxVariants>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(checkboxVariants({ variant, size }), className)}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox, checkboxVariants };
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/collapsible.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/collapsible.tsx
new file mode 100644
index 000000000..afa3f08de
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/collapsible.tsx
@@ -0,0 +1,31 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/command.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/command.tsx
new file mode 100644
index 000000000..c54fc07ec
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/command.tsx
@@ -0,0 +1,206 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
+
+import { cn } from "@/shared/lib/utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string;
+  description?: string;
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3 dark:border-gray-600"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50 dark:text-gray-400" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  const listRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    const listElement = listRef.current;
+    if (!listElement) return;
+
+    const handleWheel = (e: WheelEvent) => {
+      // Allow scrolling within the list
+      const { scrollTop, scrollHeight, clientHeight } = listElement;
+      const isScrollingUp = e.deltaY < 0;
+      const isScrollingDown = e.deltaY > 0;
+      const isAtTop = scrollTop === 0;
+      const isAtBottom = scrollTop + clientHeight >= scrollHeight;
+
+      // Only prevent default if we're not at the boundaries
+      if ((isScrollingUp && !isAtTop) || (isScrollingDown && !isAtBottom)) {
+        e.stopPropagation();
+      }
+    };
+
+    listElement.addEventListener("wheel", handleWheel, { passive: false });
+
+    return () => {
+      listElement.removeEventListener("wheel", handleWheel);
+    };
+  }, []);
+
+  return (
+    <CommandPrimitive.List
+      ref={listRef}
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto overscroll-contain custom-scrollbar",
+        className
+      )}
+      style={{
+        scrollbarWidth: "thin",
+      }}
+      {...props}
+    />
+  );
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  );
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/context-menu.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/context-menu.tsx
new file mode 100644
index 000000000..d0d3f1b0f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/context-menu.tsx
@@ -0,0 +1,250 @@
+import * as React from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+
+import { cn } from "@/shared/lib/utils";
+
+function ContextMenu({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+}
+
+function ContextMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return (
+    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+  );
+}
+
+function ContextMenuGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  );
+}
+
+function ContextMenuPortal({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  );
+}
+
+function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  );
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/dataTableColumnHeader.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/dataTableColumnHeader.tsx
new file mode 100644
index 000000000..65dc4a282
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/dataTableColumnHeader.tsx
@@ -0,0 +1,66 @@
+import { Column } from "@tanstack/react-table";
+import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff } from "lucide-react";
+
+import { cn } from "@/shared/lib/utils";
+import { Button } from "@/shared/common/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+
+interface DataTableColumnHeaderProps<TData, TValue>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>;
+  title: string;
+}
+
+export function DataTableColumnHeader<TData, TValue>({
+  column,
+  title,
+  className,
+}: DataTableColumnHeaderProps<TData, TValue>) {
+  if (!column.getCanSort()) {
+    return <div className="bg-gray-50 dark:bg-gray-800 text-base text-gray-500 dark:text-gray-400">{title}</div>;
+  }
+
+  return (
+    <div className={cn("flex items-center space-x-2", className)}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="-ml-3 h-8 data-[state=open]:bg-accent dark:data-[state=open]:bg-gray-700"
+          >
+            <span className="bg-gray-50 dark:bg-gray-800 text-base text-gray-500 dark:text-gray-400">{title}</span>
+            {column.getIsSorted() === "desc" ? (
+              <ArrowDown className="h-4 w-4 dark:text-gray-400" />
+            ) : column.getIsSorted() === "asc" ? (
+              <ArrowUp className="h-4 w-4 dark:text-gray-400" />
+            ) : (
+              <ChevronsUpDown className="h-4 w-4 dark:text-gray-400" />
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="dark:bg-gray-800 dark:border-gray-700">
+          <DropdownMenuItem onClick={() => column.toggleSorting(false)} className="dark:text-gray-200 dark:hover:bg-gray-700">
+            <ArrowUp className="h-3.5 w-3.5 text-muted-foreground/70 dark:text-gray-400" />
+            Asc
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => column.toggleSorting(true)} className="dark:text-gray-200 dark:hover:bg-gray-700">
+            <ArrowDown className="h-3.5 w-3.5 text-muted-foreground/70 dark:text-gray-400" />
+            Desc
+          </DropdownMenuItem>
+          <DropdownMenuSeparator className="dark:bg-gray-700" />
+          <DropdownMenuItem onClick={() => column.toggleVisibility(false)} className="dark:text-gray-200 dark:hover:bg-gray-700">
+            <EyeOff className="h-3.5 w-3.5 text-muted-foreground/70 dark:text-gray-400" />
+            Hide
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/dataTablePagination.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/dataTablePagination.tsx
new file mode 100644
index 000000000..a2b7c8cda
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/dataTablePagination.tsx
@@ -0,0 +1,108 @@
+import { Table } from "@tanstack/react-table";
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react";
+
+import { Button } from "@/shared/common/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import React from "react";
+interface DataTablePaginationProps<TData> {
+  table: Table<TData>;
+  pageCount: number;
+}
+
+export function DataTablePagination<TData>({
+  table,
+  pageCount
+
+}: DataTablePaginationProps<TData>) {
+  const handlePageSizeChange = React.useCallback(
+    (value: string) => {
+      table.setPageSize(Number(value));
+    },
+    [table]
+  );
+
+
+  return (
+    <div className="flex items-center justify-end px-2 my-4">
+      <div className="flex items-center space-x-6 lg:space-x-8">
+        <div className="flex items-center space-x-2">
+          <p className="text-sm font-medium">Rows per page</p>
+          <Select
+            value={`${table.getState().pagination.pageSize}`}
+            onValueChange={(value) => {
+              table.setPageSize(Number(value));
+            }}>
+            <SelectTrigger className="h-8 w-[70px]">
+              <SelectValue placeholder={table.getState().pagination.pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {[10, 20, 30, 40, 50].map((pageSize) => (
+                <SelectItem key={pageSize} value={`${pageSize}`}>
+                  {pageSize}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex w-[100px] items-center justify-center text-sm font-medium">
+          Page {table.getState().pagination.pageIndex + 1} of{" "}
+          {table.getPageCount()}
+        </div>
+        <div className="flex items-center space-x-2">
+          <Button
+            variant="outline"
+            className="hidden h-8 w-8 p-0 lg:flex"
+            onClick={() => {
+              table.setPageIndex(0);
+            }}
+            disabled={!table.getCanPreviousPage()}>
+            <span className="sr-only">Go to first page</span>
+            <ChevronsLeft />
+          </Button>
+          <Button
+            variant="outline"
+            className="h-8 w-8 p-0"
+            onClick={() => {
+              table.previousPage();
+            }}
+            disabled={!table.getCanPreviousPage()}>
+            <span className="sr-only">Go to previous page</span>
+            <ChevronLeft />
+          </Button>
+          <Button
+            variant="outline"
+            className="h-8 w-8 p-0"
+            onClick={() => {
+              table.nextPage();
+            }}
+            disabled={!table.getCanNextPage()}>
+            <span className="sr-only">Go to next page</span>
+            <ChevronRight />
+          </Button>
+          <Button
+            variant="outline"
+            className="hidden h-8 w-8 p-0 lg:flex"
+            onClick={() => {
+              const lastPageIndex = table.getPageCount() - 1;
+              table.setPageIndex(lastPageIndex);
+            }}
+            disabled={!table.getCanNextPage()}>
+            <span className="sr-only">Go to last page</span>
+            <ChevronsRight />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/dataTablePagination2.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/dataTablePagination2.tsx
new file mode 100644
index 000000000..4de7c97be
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/dataTablePagination2.tsx
@@ -0,0 +1,133 @@
+import { Table } from "@tanstack/react-table";
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react";
+
+import { Button } from "@/shared/common/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import React from "react";
+
+interface DataTablePaginationProps<TData> {
+  table: Table<TData>;
+  pageCount: number;
+}
+
+export function DataTablePagination<TData>({
+  table,
+}: DataTablePaginationProps<TData>) {
+  return (
+    <div className="flex flex-col sm:flex-row items-center justify-between gap-4 py-2">
+      <div className="flex items-center space-x-2">
+        <p className="text-xs sm:text-sm font-medium whitespace-nowrap">
+          Rows per page
+        </p>
+        <Select
+          value={`${table.getState().pagination?.pageSize ?? 10}`}
+          onValueChange={(value) => {
+            table.setPageSize(Number(value));
+          }}
+        >
+          <SelectTrigger className="h-9 sm:h-8 w-[70px] min-w-[70px] text-sm">
+            <SelectValue
+              placeholder={table.getState().pagination?.pageSize ?? 10}
+            />
+          </SelectTrigger>
+          <SelectContent side="top">
+            {[10, 20, 30, 40, 50].map((pageSize) => (
+              <SelectItem key={pageSize} value={`${pageSize}`}>
+                {pageSize}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="flex w-full sm:w-auto items-center justify-between sm:justify-end gap-2 sm:gap-4">
+        <div className="flex items-center justify-center text-xs sm:text-sm font-medium whitespace-nowrap">
+          Page {table.getState().pagination.pageIndex + 1} of{" "}
+          {table.getPageCount()}
+        </div>
+
+        <div className="flex items-center space-x-1 sm:space-x-2">
+          <Button
+            variant="outline"
+            className="h-9 w-9 p-0 sm:hidden"
+            onClick={() => {
+              table.setPageIndex(0);
+            }}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Go to first page</span>
+            <ChevronsLeft className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            className="hidden h-9 sm:h-8 w-9 sm:w-8 p-0 sm:flex"
+            onClick={() => {
+              table.setPageIndex(0);
+            }}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Go to first page</span>
+            <ChevronsLeft className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            className="h-9 sm:h-8 w-9 sm:w-8 p-0"
+            onClick={() => {
+              table.previousPage();
+            }}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Go to previous page</span>
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            className="h-9 sm:h-8 w-9 sm:w-8 p-0"
+            onClick={() => {
+              table.nextPage();
+            }}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Go to next page</span>
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            className="h-9 w-9 p-0 sm:hidden"
+            onClick={() => {
+              const lastPageIndex = table.getPageCount() - 1;
+              table.setPageIndex(lastPageIndex);
+            }}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Go to last page</span>
+            <ChevronsRight className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            className="hidden h-9 sm:h-8 w-9 sm:w-8 p-0 sm:flex"
+            onClick={() => {
+              const lastPageIndex = table.getPageCount() - 1;
+              table.setPageIndex(lastPageIndex);
+            }}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Go to last page</span>
+            <ChevronsRight className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/dialog.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/dialog.tsx
new file mode 100644
index 000000000..a231d298b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/dialog.tsx
@@ -0,0 +1,134 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+
+import { cn } from "@/shared/lib/utils";
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className,
+        )}
+        {...props}>
+        {children}
+        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+          <XIcon />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/drawer.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/drawer.tsx
new file mode 100644
index 000000000..af169a1ec
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/drawer.tsx
@@ -0,0 +1,48 @@
+import * as React from "react";
+import * as Dialog from "@radix-ui/react-dialog";
+import { cn } from "@/shared/lib/utils";
+
+export const Drawer = Dialog.Root;
+export const DrawerTrigger = Dialog.Trigger;
+export const DrawerContent = ({
+  children,
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <Dialog.Portal>
+    <Dialog.Overlay className="fixed inset-0 bg-black/50" />
+    <Dialog.Content
+      className={cn(
+        "fixed right-0 top-0 h-full w-[400px] bg-white p-6 shadow-lg",
+        className
+      )}
+      {...props}>
+      {children}
+    </Dialog.Content>
+  </Dialog.Portal>
+);
+
+export const DrawerHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  className,
+  children,
+  ...props
+}) => (
+  <div className={cn("mb-4", className)} {...props}>
+    {children}
+  </div>
+);
+
+export const DrawerTitle = Dialog.Title;
+export const DrawerDescription = Dialog.Description;
+
+export const DrawerFooter: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  className,
+  children,
+  ...props
+}) => (
+  <div className={cn("mt-4 flex justify-end gap-2", className)} {...props}>
+    {children}
+  </div>
+);
+
+export const DrawerClose = Dialog.Close;
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/dropdown-menu.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/dropdown-menu.tsx
new file mode 100644
index 000000000..09cb9f6b1
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/dropdown-menu.tsx
@@ -0,0 +1,255 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+
+import { cn } from "@/shared/lib/utils";
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  );
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  );
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/fileUploader/empty-card.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/fileUploader/empty-card.tsx
new file mode 100644
index 000000000..9047b0375
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/fileUploader/empty-card.tsx
@@ -0,0 +1,39 @@
+import { ImageIcon } from "lucide-react";
+
+import { cn } from "@/shared/lib/utils";
+import { Card, CardDescription, CardTitle } from "@/shared/common/ui/card";
+
+interface EmptyCardProps extends React.ComponentPropsWithoutRef<typeof Card> {
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+  icon?: React.ComponentType<{ className?: string }>;
+}
+
+export function EmptyCard({
+  title,
+  description,
+  icon: Icon = ImageIcon,
+  action,
+  className,
+  ...props
+}: EmptyCardProps) {
+  return (
+    <Card
+      className={cn(
+        "flex w-full flex-col items-center justify-center space-y-6 bg-transparent p-16",
+        className
+      )}
+      {...props}
+    >
+      <div className="mr-4 shrink-0 rounded-full border border-dashed p-4">
+        <Icon className="size-8 text-muted-foreground" aria-hidden="true" />
+      </div>
+      <div className="flex flex-col items-center gap-1.5 text-center">
+        <CardTitle>{title}</CardTitle>
+        {description ? <CardDescription>{description}</CardDescription> : null}
+      </div>
+      {action ? action : null}
+    </Card>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/fileUploader/fileUpload.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/fileUploader/fileUpload.tsx
new file mode 100644
index 000000000..c94274065
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/fileUploader/fileUpload.tsx
@@ -0,0 +1,430 @@
+"use client";
+
+import * as React from "react";
+import { FileText, Upload, X } from "lucide-react";
+import Dropzone, {
+  type DropzoneProps,
+  type FileRejection,
+} from "react-dropzone";
+import { toast } from "sonner";
+
+import { Button } from "@/shared/common/ui/button";
+import { Progress } from "@/shared/common/ui/progress";
+import { ScrollArea } from "@/shared/common/ui/scroll-area";
+import { useControllableState } from "./hooks/use-controllable-state";
+import { cn } from "@/shared/lib/utils";
+import { formatBytes } from "./utils";
+import { useTranslation } from "react-i18next";
+import { t } from "i18next";
+import { ClientSideValidator } from "@/shared/services/validation/ClientSideValidator";
+import { FileUploadValidator } from "@/shared/services/validation/FileUploadValidator";
+
+interface FileUploaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Value of the uploader.
+   * @type File[]
+   * @default undefined
+   * @example value={files}
+   */
+  value?: File[];
+
+  /**
+   * Function to be called when the value changes.
+   * @type (files: File[]) => void
+   * @default undefined
+   * @example onValueChange={(files) => setFiles(files)}
+   */
+  onValueChange: (files: File[]) => void | null;
+
+  /**
+   * Function to be called when files are uploaded.
+   * @type (files: File[]) => Promise<void>
+   * @default undefined
+   * @example onUpload={(files) => uploadFiles(files)}
+   */
+  onUpload?: (files: File[]) => Promise<void>;
+
+  /**
+   * Progress of the uploaded files.
+   * @type Record<string, number> | undefined
+   * @default undefined
+   * @example progresses={{ "file1.png": 50 }}
+   */
+  progresses?: Record<string, number>;
+
+  /**
+   * Accepted file types for the uploader.
+   * @type { [key: string]: string[]}
+   * @default
+   * ```ts
+   * { "image/*": [] }
+   * ```
+   * @example accept={["image/png", "image/jpeg"]}
+   */
+  accept?: DropzoneProps["accept"];
+
+  /**
+   * Maximum file size for the uploader.
+   * @type number | undefined
+   * @default 1024 * 1024 * 2 // 2MB
+   * @example maxSize={1024 * 1024 * 2} // 2MB
+   */
+  maxSize?: DropzoneProps["maxSize"];
+
+  /**
+   * Maximum number of files for the uploader.
+   * @type number | undefined
+   * @default 1
+   * @example maxFileCount={4}
+   */
+  maxFileCount?: DropzoneProps["maxFiles"];
+
+  /**
+   * Whether the uploader should accept multiple files.
+   * @type boolean
+   * @default false
+   * @example multiple
+   */
+  multiple?: boolean;
+  canUploadIndividual?: boolean;
+  uploadIndividualFun?: () => void;
+
+  /**
+   * Whether the uploader is disabled.
+   * @type boolean
+   * @default false
+   * @example disabled
+   */
+  disabled?: boolean;
+}
+
+export function FileUploader(props: FileUploaderProps) {
+  const {
+    value: valueProp,
+    onValueChange,
+    onUpload,
+    progresses,
+    accept = {
+      "/": [],
+    },
+    maxSize = 1024 * 1024 * 200,
+    maxFileCount = 4,
+    multiple = false,
+    disabled = false,
+    className,
+    canUploadIndividual = false,
+    uploadIndividualFun,
+    ...dropzoneProps
+  } = props;
+  const { t } = useTranslation();
+  const [files, setFiles] = useControllableState({
+    prop: valueProp,
+    onChange: onValueChange,
+  });
+  const validatorRef = React.useRef(new ClientSideValidator());
+
+  const onDrop = React.useCallback(
+    async (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {
+      if ((files?.length ?? 0) + acceptedFiles.length > maxFileCount) {
+        toast.error(
+          `${t("PDF.cannotUploadMoreThan")} ${maxFileCount} ${t("PDF.files")}`
+        );
+        return;
+      }
+
+      // Validate files using comprehensive validator
+      const validatedFiles: File[] = [];
+      const invalidFiles: string[] = [];
+
+      for (const file of acceptedFiles) {
+        const allowedMimeTypes = accept
+          ? Object.keys(accept)
+              .map((mime) => mime.trim().toLowerCase())
+              .filter(
+                (mime) =>
+                  mime.includes("/") &&
+                  mime !== "/" &&
+                  mime !== "*" &&
+                  mime !== "*/*"
+              )
+          : undefined;
+        const allowedExtensions = accept
+          ? Object.values(accept).flatMap((extensions) =>
+              (extensions || []).map((ext) =>
+                ext.startsWith(".") ? ext.toLowerCase() : `.${ext.toLowerCase()}`
+              )
+            )
+          : undefined;
+
+        // Basic validation (size, extension, filename, MIME type)
+        const basicValidation = FileUploadValidator.validateFile(file, {
+          maxSizeMB: maxSize ? maxSize / (1024 * 1024) : undefined,
+          allowedMimeTypes:
+            file.type && allowedMimeTypes?.length ? allowedMimeTypes : undefined,
+          allowedExtensions:
+            allowedExtensions && allowedExtensions.length > 0
+              ? allowedExtensions
+              : undefined,
+        });
+
+        if (!basicValidation.isValid) {
+          invalidFiles.push(`${file.name}: ${basicValidation.error}`);
+          continue;
+        }
+
+        // Client-side magic byte validation
+        const clientValidation = await validatorRef.current.validateUpload(
+          file,
+          file.type,
+          allowedMimeTypes || []
+        );
+
+        if (!clientValidation.isValid) {
+          invalidFiles.push(`${file.name}: ${clientValidation.error}`);
+          continue;
+        }
+
+        validatedFiles.push(file);
+      }
+
+      // Show errors for invalid files
+      if (invalidFiles.length > 0) {
+        invalidFiles.forEach((error) => {
+          toast.error(error);
+        });
+      }
+
+      const newFiles = validatedFiles.map((file) =>
+        Object.assign(file, {
+          preview: URL.createObjectURL(file),
+        })
+      );
+
+      const updatedFiles = files ? [...files, ...newFiles] : newFiles;
+
+      setFiles(updatedFiles);
+
+      if (rejectedFiles.length > 0) {
+        rejectedFiles.forEach(({ file }) => {
+          toast.error(`${t("PDF.file")} ${file.name} ${t("PDF.wasRejected")}`);
+        });
+      }
+
+      if (
+        onUpload &&
+        updatedFiles.length > 0 &&
+        updatedFiles.length <= maxFileCount
+      ) {
+        const target =
+          updatedFiles.length > 0 ? `${updatedFiles.length} files` : `file`;
+
+        toast.promise(onUpload(updatedFiles), {
+          loading: `${t("PDF.uploading")} ${target}...`,
+          success: () => {
+            setFiles([]);
+            return `${target} ${t("PDF.uploaded")}`;
+          },
+          error: `${t("PDF.failedToUpload")} ${target}`,
+        });
+      }
+    },
+
+    [files, maxFileCount, multiple, onUpload, setFiles, t, maxSize, accept]
+  );
+
+  function onRemove(index: number) {
+    if (!files) return;
+    const newFiles = files.filter((_, i) => i !== index);
+    setFiles(newFiles);
+    onValueChange?.(newFiles);
+  }
+
+  // Revoke preview url when component unmounts
+  React.useEffect(() => {
+    return () => {
+      if (!files) return;
+      files.forEach((file) => {
+        if (isFileWithPreview(file)) {
+          URL.revokeObjectURL(file.preview);
+        }
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const isDisabled = disabled || (files?.length ?? 0) >= maxFileCount;
+
+  return (
+    <div className="relative flex flex-col gap-6 overflow-hidden">
+      {onValueChange !== null && (
+        <Dropzone
+          onDrop={onDrop}
+          accept={accept}
+          maxSize={maxSize}
+          maxFiles={maxFileCount}
+          multiple={maxFileCount > 1 || multiple}
+          disabled={isDisabled}
+        >
+          {({ getRootProps, getInputProps, isDragActive }) => (
+            <div
+              {...getRootProps()}
+              className={cn(
+                "group relative grid h-52 w-full cursor-pointer place-items-center rounded-lg border-2 border-dashed border-muted-foreground/25 px-5 py-2.5 text-center transition hover:bg-muted/25",
+                "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                "dark:bg-gray-900/50 dark:border-gray-600 dark:hover:bg-gray-800/60",
+                isDragActive && "border-muted-foreground/50 dark:border-gray-500",
+                isDisabled && "pointer-events-none opacity-60",
+                className
+              )}
+              {...dropzoneProps}
+            >
+              <input {...getInputProps()} />
+              {isDragActive ? (
+                <div className="flex flex-col items-center justify-center gap-4 sm:px-5">
+                  <div className="rounded-full border border-dashed border-muted-foreground/50 p-3 dark:border-gray-500">
+                    <Upload
+                      className="size-7 text-muted-foreground"
+                      aria-hidden="true"
+                    />
+                  </div>
+                  <p className="font-medium text-muted-foreground">
+                    {t("PDF.dropFilesHere")}
+                  </p>
+                </div>
+              ) : (
+                <div className="flex flex-col items-center justify-center gap-4 sm:px-5">
+                  <div className="rounded-full border border-dashed border-muted-foreground/50 p-3 dark:border-gray-500">
+                    <Upload
+                      className="size-7 text-muted-foreground"
+                      aria-hidden="true"
+                    />
+                  </div>
+                  <div className="flex flex-col gap-px">
+                    <p className="font-medium text-muted-foreground">
+                      {t("PDF.dragDropInstruction")}
+                    </p>
+                    <p className="text-sm text-muted-foreground/70">
+                      {t("PDF.youCanUpload")}
+                      {maxFileCount > 1
+                        ? ` ${
+                            maxFileCount === Infinity
+                              ? "multiple"
+                              : maxFileCount
+                          }
+                      ${t("PDF.filesUpTo")} ${formatBytes(maxSize)} )`
+                        : ` ${t("PDF.aFileWith")} ${formatBytes(maxSize)}`}
+                    </p>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </Dropzone>
+      )}
+      {files?.length ? (
+        <ScrollArea className="h-fit w-full px-3">
+          <div className="flex max-h-48 flex-col gap-4">
+            {files?.map((file, index) => (
+              <FileCard
+                key={index}
+                file={file}
+                onRemove={() => onRemove(index)}
+                progress={progresses?.[file.name]}
+                canUploadIndividual={canUploadIndividual}
+                uploadIndividualFun={uploadIndividualFun ||  (() => {})}
+              />
+            ))}
+          </div>
+        </ScrollArea>
+      ) : null}
+    </div>
+  );
+}
+
+interface FileCardProps {
+  file: File;
+  onRemove: () => void;
+  progress?: number;
+  canUploadIndividual?: boolean;
+  uploadIndividualFun: () => void;
+}
+
+function FileCard({
+  file,
+  progress,
+  onRemove,
+  canUploadIndividual = false,
+  uploadIndividualFun,
+}: FileCardProps) {
+  return (
+    <div className="relative flex items-center gap-2.5 rounded-md border border-transparent p-2 dark:border-gray-700 dark:bg-gray-800/50">
+      <div className="flex flex-1 gap-2.5">
+        {isFileWithPreview(file) ? <FilePreview file={file} /> : null}
+        <div className="flex w-full flex-col gap-2">
+          <div className="flex flex-col gap-px">
+            <p className="line-clamp-1 text-sm font-medium text-foreground/80">
+              {file.name}
+            </p>
+            <p className="text-xs text-muted-foreground">
+              {formatBytes(file.size)}
+            </p>
+          </div>
+          {progress ? <Progress value={progress} /> : null}
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          className="size-7 dark:border-gray-600 dark:hover:bg-gray-700"
+          onClick={onRemove}
+        >
+          <X className="size-4" aria-hidden="true" />
+          <span className="sr-only">{t("PDF.removeFile")}</span>
+        </Button>
+        {canUploadIndividual && (
+          <Button type="button" variant="outline" className="dark:border-gray-600 dark:hover:bg-gray-700" onClick={uploadIndividualFun}>
+            upload
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function isFileWithPreview(file: File): file is File & { preview: string } {
+  return "preview" in file && typeof file.preview === "string";
+}
+
+interface FilePreviewProps {
+  file: File & { preview: string };
+}
+
+function FilePreview({ file }: FilePreviewProps) {
+  if (file.type.startsWith("image/")) {
+    return (
+      <img
+        className="h-auto max-w-full"
+        src={file.preview}
+        alt={file.name}
+        width={48}
+        height={48}
+        loading="lazy"
+      />
+    );
+  }
+  {
+    /* <Image
+        src={file.preview}
+        alt={file.name}
+        width={48}
+        height={48}
+        loading="lazy"
+        className="aspect-square shrink-0 rounded-md object-cover"
+      /> */
+  }
+  return (
+    <FileText className="size-10 text-muted-foreground" aria-hidden="true" />
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/fileUploader/hooks/use-callback-ref.ts b/apps/edr-freight-web/backoffice/src/shared/common/ui/fileUploader/hooks/use-callback-ref.ts
new file mode 100644
index 000000000..fa481fa58
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/fileUploader/hooks/use-callback-ref.ts
@@ -0,0 +1,22 @@
+import * as React from "react";
+
+/**
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop or avoid re-executing effects when passed as a dependency
+ */
+function useCallbackRef<T extends (...args: never[]) => unknown>(
+  callback: T | undefined
+): T {
+  const callbackRef = React.useRef(callback);
+
+  React.useEffect(() => {
+    callbackRef.current = callback;
+  });
+
+  return React.useMemo(
+    () => ((...args) => callbackRef.current?.(...args)) as T,
+    []
+  );
+}
+
+export { useCallbackRef };
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/fileUploader/hooks/use-controllable-state.ts b/apps/edr-freight-web/backoffice/src/shared/common/ui/fileUploader/hooks/use-controllable-state.ts
new file mode 100644
index 000000000..ac563635c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/fileUploader/hooks/use-controllable-state.ts
@@ -0,0 +1,66 @@
+import * as React from "react";
+import { useCallbackRef } from "./use-callback-ref";
+
+/**
+ * @see https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/useControllableState.tsx
+ */
+
+type UseControllableStateParams<T> = {
+  prop?: T | undefined;
+  defaultProp?: T | undefined;
+  onChange?: (state: T) => void;
+};
+
+type SetStateFn<T> = (prevState?: T) => T;
+
+function useControllableState<T>({
+  prop,
+  defaultProp,
+  onChange = () => {},
+}: UseControllableStateParams<T>) {
+  const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({
+    defaultProp,
+    onChange,
+  });
+  const isControlled = prop !== undefined;
+  const value = isControlled ? prop : uncontrolledProp;
+  const handleChange = useCallbackRef(onChange);
+
+  const setValue: React.Dispatch<React.SetStateAction<T | undefined>> =
+    React.useCallback(
+      (nextValue) => {
+        if (isControlled) {
+          const setter = nextValue as SetStateFn<T>;
+          const value =
+            typeof nextValue === "function" ? setter(prop) : nextValue;
+          if (value !== prop) handleChange(value as T);
+        } else {
+          setUncontrolledProp(nextValue);
+        }
+      },
+      [isControlled, prop, setUncontrolledProp, handleChange]
+    );
+
+  return [value, setValue] as const;
+}
+
+function useUncontrolledState<T>({
+  defaultProp,
+  onChange,
+}: Omit<UseControllableStateParams<T>, "prop">) {
+  const uncontrolledState = React.useState<T | undefined>(defaultProp);
+  const [value] = uncontrolledState;
+  const prevValueRef = React.useRef(value);
+  const handleChange = useCallbackRef(onChange);
+
+  React.useEffect(() => {
+    if (prevValueRef.current !== value) {
+      handleChange(value as T);
+      prevValueRef.current = value;
+    }
+  }, [value, prevValueRef, handleChange]);
+
+  return uncontrolledState;
+}
+
+export { useControllableState };
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/fileUploader/hooks/use-file-upload.ts b/apps/edr-freight-web/backoffice/src/shared/common/ui/fileUploader/hooks/use-file-upload.ts
new file mode 100644
index 000000000..0b6e2bfe0
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/fileUploader/hooks/use-file-upload.ts
@@ -0,0 +1,77 @@
+"use client";
+
+import { useState } from "react";
+
+// Define the structure of an uploaded file
+export interface UploadedFile {
+  name: string;
+  size: number;
+  type: string;
+  buffer: ArrayBuffer;
+  preview: string;
+}
+
+export interface UploadProgress {
+  [key: string]: number; // ✅ Use string index for compatibility
+}
+
+export function useUploadFile() {
+  const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
+  const [progresses, setProgresses] = useState<UploadProgress>({});
+  const [isUploading, setIsUploading] = useState<boolean>(false);
+
+  // Accepts File[] instead of FileList
+  const onUpload = async (files: File[]) => {
+    setIsUploading(true);
+
+    const filePromises: Promise<UploadedFile>[] = files.map((file, index) => {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        const previewReader = new FileReader();
+        reader.onload = (event) => {
+          if (event.target?.result instanceof ArrayBuffer) {
+            previewReader.readAsDataURL(file); // Convert for preview
+
+            previewReader.onload = () => {
+              resolve({
+                name: file.name,
+                size: file.size,
+                type: file.type,
+                buffer: event.target!.result as ArrayBuffer,
+                preview: previewReader.result as string, // Store preview
+              });
+            };
+          } else {
+            reject(new Error("Failed to read file as ArrayBuffer."));
+          }
+        };
+
+        reader.onerror = () => reject(new Error("File reading error"));
+        reader.readAsArrayBuffer(file);
+
+        // Convert index to string for progresses
+        const fileIndex = index.toString();
+        setProgresses((prev) => ({ ...prev, [fileIndex]: 0 }));
+
+        setTimeout(() => {
+          setProgresses((prev) => ({ ...prev, [fileIndex]: 100 }));
+        }, 1000);
+      });
+    });
+
+    try {
+      const fileBuffers = await Promise.all(filePromises);
+      setUploadedFiles((prev) => [...prev, ...fileBuffers]);
+    } catch (error) {
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  return {
+    onUpload,
+    progresses,
+    uploadedFiles,
+    isUploading,
+  };
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/fileUploader/reusableFileUploader.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/fileUploader/reusableFileUploader.tsx
new file mode 100644
index 000000000..a17de6903
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/fileUploader/reusableFileUploader.tsx
@@ -0,0 +1,75 @@
+"use client";
+import { FileUploader } from "./fileUpload";
+import { useState, useEffect, useRef } from "react"; // Added useRef import
+import { toast } from "sonner";
+
+export interface FileInfo {
+  fileName: string;
+  contentType: string;
+  originalname: string;
+}
+
+export interface Name {
+  am: string;
+  en: string;
+}
+
+export interface UploadRequestBody {
+  fileInfo: FileInfo;
+  name: Name;
+  recordContentId: string;
+}
+
+export interface UploadResponse {
+  uploadUrl: string;
+  attachmentId: string;
+}
+
+export function ReusableFileUploader({
+  setFiles,
+  files,
+  canUploadIndividual = false,
+  isLoading,
+  uploadIndividualFun,
+}: {
+  setFiles?: (files: File[]) => void;
+  files: File[];
+  isLoading: boolean;
+  canUploadIndividual?: boolean;
+  uploadIndividualFun?: () => void;
+}) {
+  const [error, setError] = useState<string | null>(null);
+  const lastFiles = useRef<File[]>([]); // Now properly defined
+  useEffect(() => {
+    lastFiles.current = files;
+  }, [files]);
+
+  const handleFileChange = (newFiles: File[]) => {
+    if (setFiles) {
+      // Only update if files actually changed
+      if (
+        newFiles.length !== lastFiles.current.length ||
+        newFiles.some((f, i) => f !== lastFiles.current[i])
+      ) {
+        setFiles(newFiles);
+        setError(null);
+      }
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-6">
+      <FileUploader
+        maxFileCount={30}
+        maxSize={200 * 1024 * 1024}
+        value={files}
+        onValueChange={handleFileChange}
+        disabled={isLoading}
+        canUploadIndividual={canUploadIndividual}
+        uploadIndividualFun={uploadIndividualFun}
+      />
+      {isLoading && <p className="text-muted-foreground">Uploading...</p>}
+      {error && <p className="text-red-500 dark:text-red-400">{error}</p>}
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/fileUploader/types/index.ts b/apps/edr-freight-web/backoffice/src/shared/common/ui/fileUploader/types/index.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/fileUploader/upload-files-card.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/fileUploader/upload-files-card.tsx
new file mode 100644
index 000000000..8cff20a4d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/fileUploader/upload-files-card.tsx
@@ -0,0 +1,58 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import { ScrollArea, ScrollBar } from "@/shared/common/ui/scroll-area";
+
+import { EmptyCard } from "./empty-card";
+import { UploadedFile } from "./hooks/use-file-upload";
+
+interface UploadedFilesCardProps {
+  uploadedFiles: UploadedFile[];
+}
+
+export function UploadedFilesCard({ uploadedFiles }: UploadedFilesCardProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Uploaded files</CardTitle>
+        <CardDescription>View the uploaded files here</CardDescription>
+      </CardHeader>
+      <CardContent>
+        {uploadedFiles.length > 0 ? (
+          <ScrollArea className="pb-4">
+            <div className="flex w-max space-x-2.5">
+              {uploadedFiles.map((file, index) => (
+                <div key={index} className="relative aspect-video w-64">
+                  <img
+                    src={file.preview}
+                    alt={file.name}
+                    className="rounded-md object-cover w-full h-full"
+                  />
+                  {/* <Image
+                    src={file.preview}
+                    alt={file.name}
+                    fill
+                    sizes="(min-width: 640px) 640px, 100vw"
+                    loading="lazy"
+                    className="rounded-md object-cover"
+                  /> */}
+                </div>
+              ))}
+            </div>
+            <ScrollBar orientation="horizontal" />
+          </ScrollArea>
+        ) : (
+          <EmptyCard
+            title="No files uploaded"
+            description="Upload some files to see them here"
+            className="w-full"
+          />
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/fileUploader/utils.ts b/apps/edr-freight-web/backoffice/src/shared/common/ui/fileUploader/utils.ts
new file mode 100644
index 000000000..f17d857e7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/fileUploader/utils.ts
@@ -0,0 +1,45 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function formatBytes(
+  bytes: number,
+  opts: {
+    decimals?: number;
+    sizeType?: "accurate" | "normal";
+  } = {}
+) {
+  const { decimals = 0, sizeType = "normal" } = opts;
+
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+  const accurateSizes = ["Bytes", "KiB", "MiB", "GiB", "TiB"];
+  if (bytes === 0) return "0 Byte";
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return `${(bytes / Math.pow(1024, i)).toFixed(decimals)} ${
+    sizeType === "accurate" ? accurateSizes[i] ?? "Bytes" : sizes[i] ?? "Bytes"
+  }`;
+}
+
+/**
+ * Stole this from the @radix-ui/primitive
+ * @see https://github.com/radix-ui/primitives/blob/main/packages/core/primitive/src/primitive.tsx
+ */
+export function composeEventHandlers<E>(
+  originalEventHandler?: (event: E) => void,
+  ourEventHandler?: (event: E) => void,
+  { checkForDefaultPrevented = true } = {}
+) {
+  return function handleEvent(event: E) {
+    originalEventHandler?.(event);
+
+    if (
+      checkForDefaultPrevented === false ||
+      !(event as unknown as Event).defaultPrevented
+    ) {
+      return ourEventHandler?.(event);
+    }
+  };
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/form.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/form.tsx
new file mode 100644
index 000000000..855d84876
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/form.tsx
@@ -0,0 +1,166 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form";
+
+import { cn } from "@/shared/lib/utils";
+import { Label } from "@/shared/common/ui/label";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+);
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  );
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive-foreground", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : props.children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive-foreground text-sm", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/habesha-date-picker.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/habesha-date-picker.tsx
new file mode 100644
index 000000000..170d1a1c8
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/habesha-date-picker.tsx
@@ -0,0 +1,239 @@
+import React, { useState, useEffect } from "react";
+import { Button } from "@/shared/common/ui/button";
+import { Label } from "@/shared/common/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/shared/common/ui/popover";
+import { CalendarIcon } from "lucide-react";
+import { cn } from "@/shared/lib/utils";
+import HabeshaCalendarUtils, {
+  HabeshaDate,
+} from "@/shared/utils/habeshaCalendar";
+
+export interface HabeshaDatePickerProps {
+  value?: Date;
+  onChange?: (date: Date) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  language?: "am" | "en";
+}
+
+export const HabeshaDatePicker: React.FC<HabeshaDatePickerProps> = ({
+  value,
+  onChange,
+  placeholder = "Select date",
+  disabled = false,
+  className,
+  language = "am",
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedYear, setSelectedYear] = useState<string>("");
+  const [selectedMonth, setSelectedMonth] = useState<string>("");
+  const [selectedDay, setSelectedDay] = useState<string>("");
+  const [displayText, setDisplayText] = useState<string>("");
+
+  // Initialize with current date or provided value
+  useEffect(() => {
+    if (value && value instanceof Date && !isNaN(value.getTime())) {
+      const habeshaDate = HabeshaCalendarUtils.gregorianToHabesha(value);
+      setSelectedYear(habeshaDate.year.toString());
+      setSelectedMonth(habeshaDate.month.toString());
+      setSelectedDay(habeshaDate.day.toString());
+    } else {
+      const current = HabeshaCalendarUtils.getCurrentHabeshaDate();
+      setSelectedYear(current.year.toString());
+      setSelectedMonth(current.month.toString());
+      setSelectedDay("");
+    }
+  }, [value]);
+
+  // Update display text when language or value changes
+  useEffect(() => {
+    if (value && value instanceof Date && !isNaN(value.getTime())) {
+      setDisplayText(HabeshaCalendarUtils.formatForDisplay(value, language));
+    } else {
+      setDisplayText("");
+    }
+  }, [value, language]);
+
+  const yearOptions = HabeshaCalendarUtils.generateHabeshaYearOptions(10, 5);
+  const monthOptions = React.useMemo(
+    () => HabeshaCalendarUtils.getMonthOptions(language),
+    [language]
+  );
+
+  // Generate day options based on selected month and year
+  const getDayOptions = () => {
+    if (!selectedYear || !selectedMonth) return [];
+
+    const year = parseInt(selectedYear);
+    const month = parseInt(selectedMonth);
+    const daysInMonth = HabeshaCalendarUtils.getDaysInHabeshaMonth(year, month);
+
+    return Array.from({ length: daysInMonth }, (_, i) => ({
+      label: (i + 1).toString(),
+      value: (i + 1).toString(),
+    }));
+  };
+
+  const handleDateSelect = () => {
+    if (selectedYear && selectedMonth && selectedDay) {
+      const year = parseInt(selectedYear);
+      const month = parseInt(selectedMonth);
+      const day = parseInt(selectedDay);
+
+      try {
+        const gregorianDate = HabeshaCalendarUtils.habeshaToGregorian(
+          year,
+          month,
+          day
+        );
+        onChange?.(gregorianDate);
+        setIsOpen(false);
+      } catch (error) {
+        console.error("Invalid Habesha date:", error);
+      }
+    }
+  };
+
+  const handleClear = () => {
+    setSelectedYear("");
+    setSelectedMonth("");
+    setSelectedDay("");
+    onChange?.(new Date()); // Reset to current date
+  };
+
+  const displayValue = displayText;
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          className={cn(
+            "w-full justify-start text-left font-normal",
+            !value && "text-muted-foreground",
+            className
+          )}
+          disabled={disabled}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {displayValue || placeholder}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-4" align="start">
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <h4 className="font-medium">
+              {language === "am" ? "ቀን ይምረጡ" : "Select Date"}
+            </h4>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleClear}
+              className="text-xs"
+            >
+              {language === "am" ? "አጽዳ" : "Clear"}
+            </Button>
+          </div>
+
+          <div className="grid grid-cols-3 gap-2">
+            {/* Year Selection */}
+            <div className="space-y-2">
+              <Label className="text-xs">
+                {language === "am" ? "ዓመት" : "Year"}
+              </Label>
+              <Select value={selectedYear} onValueChange={setSelectedYear}>
+                <SelectTrigger className="h-8">
+                  <SelectValue
+                    placeholder={language === "am" ? "ዓመት" : "Year"}
+                  />
+                </SelectTrigger>
+                <SelectContent>
+                  {yearOptions.map((year) => (
+                    <SelectItem key={year.value} value={year.value}>
+                      {year.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Month Selection */}
+            <div className="space-y-2">
+              <Label className="text-xs">
+                {language === "am" ? "ወር" : "Month"}
+              </Label>
+              <Select value={selectedMonth} onValueChange={setSelectedMonth}>
+                <SelectTrigger className="h-8">
+                  <SelectValue
+                    placeholder={language === "am" ? "ወር" : "Month"}
+                  />
+                </SelectTrigger>
+                <SelectContent>
+                  {monthOptions.map((month) => (
+                    <SelectItem key={month.value} value={month.value}>
+                      {month.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Day Selection */}
+            <div className="space-y-2">
+              <Label className="text-xs">
+                {language === "am" ? "ቀን" : "Day"}
+              </Label>
+              <Select
+                value={selectedDay}
+                onValueChange={setSelectedDay}
+                disabled={!selectedYear || !selectedMonth}
+              >
+                <SelectTrigger className="h-8">
+                  <SelectValue placeholder={language === "am" ? "ቀን" : "Day"} />
+                </SelectTrigger>
+                <SelectContent>
+                  {getDayOptions().map((day) => (
+                    <SelectItem key={day.value} value={day.value}>
+                      {day.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <div className="flex justify-end gap-2 pt-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setIsOpen(false)}
+            >
+              {language === "am" ? "ሰርዝ" : "Cancel"}
+            </Button>
+            <Button
+              size="sm"
+              onClick={handleDateSelect}
+              disabled={!selectedYear || !selectedMonth || !selectedDay}
+            >
+              {language === "am" ? "ምረጥ" : "Select"}
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default HabeshaDatePicker;
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/hover-card.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/hover-card.tsx
new file mode 100644
index 000000000..20e5de9d0
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/hover-card.tsx
@@ -0,0 +1,40 @@
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+
+import { cn } from "@/shared/lib/utils";
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  );
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Content
+      data-slot="hover-card-content"
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/input.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/input.tsx
new file mode 100644
index 000000000..4a42f933f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { cn } from "@/shared/lib/utils";
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        data-slot="input"
+        className={cn(
+          "border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md border bg-background px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input dark:text-white dark:placeholder:text-muted-foreground/70",
+          "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+          "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/label.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/label.tsx
new file mode 100644
index 000000000..7d442e8ab
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+
+import { cn } from "@/shared/lib/utils";
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/multi-select.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/multi-select.tsx
new file mode 100644
index 000000000..d451e4804
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/multi-select.tsx
@@ -0,0 +1,427 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { CheckIcon, ChevronDown, XIcon, WandSparkles } from "lucide-react";
+
+import { cn } from "@/shared/lib/utils";
+import { Separator } from "@/shared/common/ui/separator";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/shared/common/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/shared/common/ui/command";
+import { t } from "i18next";
+
+const normalizeSearchText = (value: string) =>
+  value.normalize("NFKC").toLocaleLowerCase().replace(/\s+/g, " ").trim();
+
+/**
+ * Variants for the multi-select component to handle different styles.
+ * Uses class-variance-authority (cva) to define different styles based on "variant" prop.
+ */
+const multiSelectVariants = cva(
+  "m-1 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-foreground/10 text-foreground bg-card hover:bg-card/80",
+        secondary:
+          "border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        inverted: "inverted",
+        dropDown:
+          "w-full border border-foreground/10 text-foreground bg-card hover:bg-card/80 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 transition duration-200",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+/**
+ * Props for MultiSelect component
+ */
+interface MultiSelectProps
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof multiSelectVariants> {
+  /**
+   * An array of option objects to be displayed in the multi-select component.
+   * Each option object has a label, value, and an optional icon.
+   */
+  options: {
+    /** The text to display for the option. */
+    label: string;
+    /** The unique value associated with the option. */
+    value: string;
+    /** Optional icon component to display alongside the option. */
+    icon?: React.ComponentType<{ className?: string }>;
+  }[];
+
+  /**
+   * Callback function triggered when the selected values change.
+   * Receives an array of the new selected values.
+   */
+  onValueChange: (value: string[]) => void;
+
+  /** The default selected values when the component mounts. */
+  defaultValue?: string[];
+
+  /**
+   * Placeholder text to be displayed when no values are selected.
+   * Optional, defaults to "Select options".
+   */
+  placeholder?: string;
+
+  /**
+   * Animation duration in seconds for the visual effects (e.g., bouncing badges).
+   * Optional, defaults to 0 (no animation).
+   */
+  animation?: number;
+
+  /**
+   * Maximum number of items to display. Extra selected items will be summarized.
+   * Optional, defaults to 3.
+   */
+  maxCount?: number;
+
+  /**
+   * The modality of the popover. When set to true, interaction with outside elements
+   * will be disabled and only popover content will be visible to screen readers.
+   * Optional, defaults to false.
+   */
+  modalPopover?: boolean;
+
+  /**
+   * If true, renders the multi-select component as a child of another component.
+   * Optional, defaults to false.
+   */
+  asChild?: boolean;
+
+  /**
+   * Additional class names to apply custom styles to the multi-select component.
+   * Optional, can be used to add custom styles.
+   */
+  className?: string;
+
+  /**
+   * Current selected values
+   */
+  value?: string[];
+}
+
+export const MultiSelect = React.forwardRef<
+  HTMLButtonElement,
+  MultiSelectProps
+>(
+  (
+    {
+      options = [],
+      onValueChange,
+      variant,
+      defaultValue = [],
+      placeholder = "Select options",
+      animation = 0,
+      maxCount = 3,
+      modalPopover = false,
+      asChild = false,
+      className,
+      value,
+      ...props
+    },
+    ref,
+  ) => {
+    const [selectedValues, setSelectedValues] = React.useState<string[]>(
+      value || defaultValue,
+    );
+    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+    const [isAnimating, setIsAnimating] = React.useState(false);
+    const [isExtraOpen, setIsExtraOpen] = React.useState(false);
+
+    React.useEffect(() => {
+      if (value !== undefined) {
+        setSelectedValues(value);
+      }
+    }, [value]);
+
+    const handleInputKeyDown = (
+      event: React.KeyboardEvent<HTMLInputElement>,
+    ) => {
+      if (event.key === "Enter") {
+        setIsPopoverOpen(true);
+      } else if (event.key === "Backspace" && !event.currentTarget.value) {
+        const newSelectedValues = [...selectedValues];
+        newSelectedValues.pop();
+        setSelectedValues(newSelectedValues);
+        onValueChange(newSelectedValues);
+      }
+    };
+
+    const toggleOption = (option: string) => {
+      const newSelectedValues = selectedValues.includes(option)
+        ? selectedValues.filter((value) => value !== option)
+        : [...selectedValues, option];
+      setSelectedValues(newSelectedValues);
+      onValueChange(newSelectedValues);
+    };
+
+    // Function to remove a specific item without opening the dropdown
+    const removeItem = (valueToRemove: string, event: React.MouseEvent) => {
+      event.stopPropagation(); // Prevent dropdown from opening
+      const newSelectedValues = selectedValues.filter(
+        (value) => value !== valueToRemove,
+      );
+      setSelectedValues(newSelectedValues);
+      onValueChange(newSelectedValues);
+    };
+
+    const handleClear = (event: React.MouseEvent) => {
+      event.stopPropagation(); // Prevent dropdown from opening
+      setSelectedValues([]);
+      onValueChange([]);
+    };
+
+    const toggleAll = () => {
+      if (selectedValues.length === options.length) {
+        handleClear(new MouseEvent("click") as unknown as React.MouseEvent);
+      } else {
+        const allValues = options.map((option) => option.value);
+        setSelectedValues(allValues);
+        onValueChange(allValues);
+      }
+    };
+
+    return (
+      <Popover
+        open={isPopoverOpen}
+        onOpenChange={setIsPopoverOpen}
+        modal={modalPopover}>
+        <PopoverTrigger asChild>
+          <Button
+            ref={ref}
+            {...props}
+            className={cn(
+              "flex w-full p-2 rounded-md border min-h-10 h-auto items-center justify-between bg-background hover:bg-background/90 [&_svg]:pointer-events-auto",
+              className,
+            )}>
+            {selectedValues.length > 0 ? (
+              <div className="flex justify-between items-center w-full">
+                <div className="flex flex-wrap gap-1 items-center">
+{selectedValues.slice(0, maxCount).map((value) => {
+                    const option = options.find((o) => o.value === value);
+                    const IconComponent = option?.icon;
+                    return (
+                      <div
+                        key={value}
+                        className="flex items-center gap-1 px-2 py-1 bg-primary/10 text-primary border border-primary/20 dark:bg-primary/20 dark:text-primary-foreground dark:border-primary/40 rounded-md">
+                        {IconComponent && (
+                          <IconComponent className="h-3 w-3 mr-1" />
+                        )}
+                        <span className="max-w-[150px] truncate text-sm">
+                          {option?.label}
+                        </span>
+                        <XIcon
+                          className="h-3.5 w-3.5 cursor-pointer text-primary dark:text-primary-foreground hover:text-red-600 ml-1"
+                          onClick={(e) => removeItem(value, e)}
+                        />
+                      </div>
+                    );
+                  })}
+                  {selectedValues.length > maxCount && (
+                    <Popover
+                      open={isExtraOpen}
+                      onOpenChange={setIsExtraOpen}
+                      modal={true}>
+                      <PopoverTrigger asChild>
+                        <div
+                          role="button"
+                          tabIndex={0}
+                          onPointerDown={(e) => e.stopPropagation()}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setIsExtraOpen((prev) => !prev);
+                          }}
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter" || e.key === " ") {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              setIsExtraOpen((prev) => !prev);
+                            }
+                          }}
+                          className="flex items-center gap-1 px-2 py-1 bg-gray-100 text-gray-700 border border-gray-200 rounded-md cursor-pointer hover:bg-gray-200 transition-colors dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600"
+                          title={t("msg.selectAll") /* tooltip fallback */}>
+                          <span className="text-sm">{`+ ${
+                            selectedValues.length - maxCount
+                          } more`}</span>
+                        </div>
+                      </PopoverTrigger>
+                      <PopoverContent
+                        align="start"
+                        className="w-72 p-0"
+                        onPointerDown={(e) => e.stopPropagation()}
+                        onClick={(e) => e.stopPropagation()}>
+                        <div className="flex items-center justify-between border-b px-3 py-2">
+                          <span className="text-xs font-semibold text-slate-700 dark:text-slate-200">
+                            {t("ApprovalPage.Selected", "Selected")}
+                          </span>
+<span className="rounded-full bg-primary/15 px-2 py-0.5 text-xs font-medium text-primary dark:bg-primary/30 dark:text-primary-foreground">
+                             {selectedValues.length}
+                           </span>
+                        </div>
+                        <div className="max-h-64 overflow-y-auto py-1">
+                          {selectedValues.slice(maxCount).map((val) => {
+                            const option = options.find((o) => o.value === val);
+                            if (!option) return null;
+                            const IconComponent = option.icon;
+                            return (
+                              <div
+                                key={val}
+                                className="flex items-center justify-between gap-2 px-3 py-1.5 hover:bg-slate-50 dark:hover:bg-slate-800">
+                                <span className="flex items-center gap-2 min-w-0">
+                                  {IconComponent && (
+                                    <IconComponent className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                                  )}
+<span className="text-sm truncate">
+                                     {option.label}
+                                   </span>
+                                 </span>
+                                 <XIcon
+                                   className="h-3.5 w-3.5 cursor-pointer text-slate-500 dark:text-slate-400 hover:text-red-600 shrink-0"
+                                   onClick={(e) => removeItem(val, e)}
+                                 />
+                               </div>
+                            );
+                          })}
+                        </div>
+                      </PopoverContent>
+                    </Popover>
+                  )}
+                </div>
+                <div className="flex items-center justify-between">
+                  <ChevronDown className="h-4 mx-2 cursor-pointer text-muted-foreground" />
+                </div>
+              </div>
+            ) : (
+              <div className="flex items-center justify-between w-full mx-auto">
+                <span className="text-sm text-muted-foreground mx-3">
+                  {placeholder}
+                </span>
+                <ChevronDown className="h-4 cursor-pointer text-muted-foreground mx-2" />
+              </div>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="w-auto p-0 max-w-[400px] dark:bg-gray-800 dark:border-gray-700"
+          align="start"
+          onEscapeKeyDown={() => setIsPopoverOpen(false)}
+          onWheel={(e) => {
+            // Prevent the wheel event from bubbling up to parent elements
+            e.stopPropagation();
+          }}>
+          <Command
+            filter={(value, search, keywords = []) => {
+              const normalizedSearch = normalizeSearchText(search);
+              if (!normalizedSearch) return 1;
+
+              const haystacks = [value, ...keywords]
+                .map((item) => normalizeSearchText(item))
+                .filter(Boolean);
+
+              return haystacks.some((item) => item.includes(normalizedSearch))
+                ? 1
+                : 0;
+            }}>
+            <CommandInput
+              placeholder={t("ApprovalPage.Search")}
+              onKeyDown={handleInputKeyDown}
+            />
+            <CommandList className="max-h-[200px] overflow-y-auto custom-scrollbar scroll-container">
+              <CommandEmpty>{t("common.noResult")}</CommandEmpty>
+              <CommandGroup>
+                <CommandItem
+                  key="all"
+                  onSelect={toggleAll}
+                  className="cursor-pointer">
+                  <div
+                    className={cn(
+                      "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                      selectedValues.length === options.length
+                        ? "bg-primary text-primary-foreground"
+                        : "opacity-50 [&_svg]:invisible",
+                    )}>
+                    <CheckIcon className="h-4 w-4" />
+                  </div>
+                  <span>({t("msg.selectAll")})</span>
+                </CommandItem>
+                {options.map((option) => {
+                  const isSelected = selectedValues.includes(option.value);
+
+                  return (
+                    <CommandItem
+                      key={option.value}
+                      value={option.label}
+                      keywords={[option.value, option.label]}
+                      onSelect={() => toggleOption(option.value)}
+                      className="cursor-pointer">
+                      <div
+                        className={cn(
+                          "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                          isSelected
+                            ? "bg-primary text-primary-foreground"
+                            : "opacity-50 [&_svg]:invisible",
+                        )}>
+                        <CheckIcon className="h-4 w-4" />
+                      </div>
+                      {option.icon && (
+                        <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+                      )}
+                      <span>{option.label}</span>
+                    </CommandItem>
+                  );
+                })}
+              </CommandGroup>
+              <CommandSeparator />
+              <CommandGroup>
+                <div className="flex items-center justify-between">
+                  {selectedValues.length > 0 && (
+                    <>
+                      <CommandItem
+                        onClick={handleClear}
+                        className="flex-1 justify-center cursor-pointer">
+                        {t("userIncoming.Clear")}
+                      </CommandItem>
+                      <Separator
+                        orientation="vertical"
+                        className="flex min-h-6 h-full"
+                      />
+                    </>
+                  )}
+                  <CommandItem
+                    onSelect={() => setIsPopoverOpen(false)}
+                    className="flex-1 justify-center cursor-pointer max-w-full">
+                    {t("complaint.close")}
+                  </CommandItem>
+                </div>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    );
+  },
+);
+
+MultiSelect.displayName = "MultiSelect";
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/navigation-menu.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/navigation-menu.tsx
new file mode 100644
index 000000000..006a7c4f2
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/navigation-menu.tsx
@@ -0,0 +1,168 @@
+import * as React from "react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDownIcon } from "lucide-react";
+
+import { cn } from "@/shared/lib/utils";
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean;
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  );
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center gap-1",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  );
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1"
+);
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon
+        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  );
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
+        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div
+      className={cn(
+        "absolute top-full left-0 isolate z-50 flex justify-center"
+      )}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+        className
+      )}
+      {...props}
+    >
+      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  );
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/pagination.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/pagination.tsx
new file mode 100644
index 000000000..73a6fa4a7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/pagination.tsx
@@ -0,0 +1,127 @@
+import * as React from "react";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from "lucide-react";
+
+import { cn } from "@/shared/lib/utils";
+import { Button, buttonVariants } from "@/shared/common/ui/button";
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  );
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex flex-row items-center gap-1", className)}
+      {...props}
+    />
+  );
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />;
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">;
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <a
+      aria-current={isActive ? "page" : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? "outline" : "ghost",
+          size,
+        }),
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
+      {...props}
+    >
+      <ChevronLeftIcon />
+      <span className="hidden sm:block">Previous</span>
+    </PaginationLink>
+  );
+}
+
+function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
+      {...props}
+    >
+      <span className="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </PaginationLink>
+  );
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  );
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/popover.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/popover.tsx
new file mode 100644
index 000000000..2a0c3d018
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/popover.tsx
@@ -0,0 +1,46 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "@/shared/lib/utils";
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/progress.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/progress.tsx
new file mode 100644
index 000000000..4ae3819c3
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/progress.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+
+import { cn } from "@/shared/lib/utils";
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="bg-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  );
+}
+
+export { Progress };
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/radio-group.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/radio-group.tsx
new file mode 100644
index 000000000..8330f4094
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/radio-group.tsx
@@ -0,0 +1,43 @@
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { CircleIcon } from "lucide-react";
+
+import { cn } from "@/shared/lib/utils";
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-3", className)}
+      {...props}
+    />
+  );
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+}
+
+export { RadioGroup, RadioGroupItem };
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/resizable.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/resizable.tsx
new file mode 100644
index 000000000..dc2cda9c3
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/resizable.tsx
@@ -0,0 +1,54 @@
+import * as React from "react";
+import { GripVerticalIcon } from "lucide-react";
+import * as ResizablePrimitive from "react-resizable-panels";
+
+import { cn } from "@/shared/lib/utils";
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+  return (
+    <ResizablePrimitive.PanelGroup
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function ResizablePanel({
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean;
+}) {
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      data-slot="resizable-handle"
+      className={cn(
+        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        className
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      )}
+    </ResizablePrimitive.PanelResizeHandle>
+  );
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/scroll-area.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/scroll-area.tsx
new file mode 100644
index 000000000..e5e412e44
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/scroll-area.tsx
@@ -0,0 +1,56 @@
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+
+import { cn } from "@/shared/lib/utils";
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  );
+}
+
+export { ScrollArea, ScrollBar };
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/select.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/select.tsx
new file mode 100644
index 000000000..f4e66852b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/select.tsx
@@ -0,0 +1,183 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+
+import { cn } from "@/shared/lib/utils";
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger>) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex h-9 w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  onScroll,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content> & {
+  onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
+}) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+          onScroll={onScroll}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("px-2 py-1.5 text-sm font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/separator.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/separator.tsx
new file mode 100644
index 000000000..5297ddace
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/separator.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "@/shared/lib/utils";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator-root"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/sheet.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/sheet.tsx
new file mode 100644
index 000000000..742c4fbaa
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/sheet.tsx
@@ -0,0 +1,137 @@
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+
+import { cn } from "@/shared/lib/utils";
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left";
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/sidebar.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/sidebar.tsx
new file mode 100644
index 000000000..f7d76bc22
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/sidebar.tsx
@@ -0,0 +1,727 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { VariantProps, cva } from "class-variance-authority";
+import { PanelLeftIcon } from "lucide-react";
+
+import { useIsMobile } from "@/record-management/hooks/use-mobile";
+import { cn } from "@/shared/lib/utils";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import { Separator } from "@/shared/common/ui/separator";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/shared/common/ui/sheet";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "80vw"; // Changed from fixed size to viewport-relative
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContext = {
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContext | null>(null);
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+
+  return context;
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}) {
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React.useState(false);
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(openState);
+      } else {
+        _setOpen(openState);
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    },
+    [setOpenProp, open]
+  );
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+  }, [isMobile, setOpen, setOpenMobile]);
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleSidebar]);
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed";
+
+  const contextValue = React.useMemo<SidebarContext>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  );
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  );
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right";
+  variant?: "sidebar" | "floating" | "inset";
+  collapsible?: "offcanvas" | "icon" | "none";
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:top-4 [&>button]:right-4 max-w-full"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  return (
+    <div
+      className="group peer text-sidebar-foreground hidden md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+          side === "left"
+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("h-7 w-7", className)}
+      onClick={(event) => {
+        onClick?.(event);
+        toggleSidebar();
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  );
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "bg-background relative flex w-full flex-1 flex-col",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("bg-background h-8 w-full shadow-none", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  );
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean;
+  isActive?: boolean;
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const { isMobile } = useSidebar();
+  const Comp = asChild ? Slot : "button";
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        sidebarMenuButtonVariants({ variant, size }),
+        isActive && "text-accent-foreground [&_svg]:text-accent-foreground",
+        isMobile && "min-h-[44px]",
+        className
+      )}
+      {...props}
+    />
+  );
+
+  // On mobile, we don't show tooltips
+  if (isMobile || !tooltip) {
+    return button;
+  }
+
+  // Desktop experience with tooltips
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    };
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        {...(typeof tooltip === "object" ? tooltip : {})}
+      />
+    </Tooltip>
+  );
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean;
+  showOnHover?: boolean;
+}) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean;
+}) {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean;
+  size?: "sm" | "md";
+  isActive?: boolean;
+}) {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/single-select.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/single-select.tsx
new file mode 100644
index 000000000..08be5f11a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/single-select.tsx
@@ -0,0 +1,154 @@
+import * as React from "react";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "@/shared/common/ui/popover";
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandItem,
+  CommandEmpty,
+  CommandGroup,
+} from "@/shared/common/ui/command";
+import { CheckIcon, ChevronDown } from "lucide-react";
+import { cn } from "@/shared/lib/utils";
+
+const normalizeSearchText = (value: string) =>
+  value.normalize("NFKC").toLocaleLowerCase().replace(/\s+/g, " ").trim();
+
+interface SingleSelectProps {
+  options: { label: string; value: string }[];
+  value?: string;
+  placeholder?: string;
+  onValueChange: (value: string) => void;
+  className?: string;
+}
+
+export const SingleSelect = React.forwardRef<
+  HTMLButtonElement,
+  SingleSelectProps
+>(
+  (
+    {
+      options = [],
+      value,
+      placeholder = "Select an option",
+      onValueChange,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [searchQuery, setSearchQuery] = React.useState("");
+
+    const normalizedQuery = normalizeSearchText(searchQuery);
+    const filteredOptions = options.filter((opt) =>
+      normalizeSearchText(opt.label).includes(normalizedQuery),
+    );
+
+    const selectedOption = options.find((o) => o.value === value);
+
+    const handleSelect = (val: string) => {
+      onValueChange(val);
+      setIsOpen(false);
+    };
+
+    return (
+      <Popover open={isOpen} onOpenChange={setIsOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            ref={ref}
+            {...props}
+            className={cn(
+              "flex h-10 w-full min-w-0 max-w-full shrink items-center justify-between overflow-hidden rounded-md border border-gray-300 bg-white text-gray-900",
+              "px-3 py-2 text-sm font-normal shadow-sm transition-all duration-150",
+              "hover:bg-gray-50 hover:border-gray-400 focus:ring-2 focus:ring-primary-200 focus:border-primary-500",
+              "dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200",
+              "dark:hover:bg-gray-600 dark:hover:border-gray-500",
+              isOpen &&
+                "border-primary-500 ring-2 ring-primary-100 dark:ring-primary-900/40",
+              className,
+            )}
+          >
+            <span
+              className={cn(
+                "block min-w-0 flex-1 truncate text-left",
+                selectedOption
+                  ? "font-medium text-gray-900 dark:text-gray-100"
+                  : "font-normal text-gray-500 dark:text-gray-400",
+              )}
+              title={selectedOption ? selectedOption.label : undefined}
+            >
+              {selectedOption ? selectedOption.label : placeholder}
+            </span>
+            <ChevronDown
+              className={cn(
+                "ml-2 h-4 w-4 shrink-0 text-gray-500 transition-transform duration-200",
+                "dark:text-gray-400",
+                isOpen && "rotate-180",
+              )}
+            />
+          </Button>
+        </PopoverTrigger>
+
+        <PopoverContent
+          className="w-[var(--radix-popover-trigger-width)] max-w-full p-0 border border-gray-200 rounded-lg shadow-lg bg-white dark:border-gray-600 dark:bg-gray-800"
+          align="start"
+        >
+          <Command shouldFilter={false}>
+            <CommandInput
+              placeholder="Search..."
+              value={searchQuery}
+              onValueChange={setSearchQuery}
+              className="text-sm dark:text-gray-200 dark:placeholder:text-gray-500"
+            />
+            <CommandList
+              className="max-h-60 overflow-y-auto"
+              onWheel={(event) => event.stopPropagation()}
+            >
+              <CommandEmpty className="py-3 text-gray-500 text-sm text-center dark:text-gray-400">
+                No results found.
+              </CommandEmpty>
+
+              <CommandGroup>
+                {filteredOptions.map((opt) => (
+                  <CommandItem
+                    key={opt.value}
+                    value={opt.label}
+                    onSelect={() => handleSelect(opt.value)}
+                    className={cn(
+                      "cursor-pointer flex items-center justify-between px-3 py-2 rounded-md text-sm transition-colors duration-100",
+
+                      "hover:bg-primary-50 hover:text-primary-700",
+                      "focus:bg-primary-50",
+
+                      "dark:hover:bg-primary-700 dark:focus:bg-primary-700 dark:text-gray-200",
+
+                      // Remove cmdk's default active styling
+                      "data-[selected=true]:text-inherit",
+                      "data-[selected=true]:bg-transparent",
+
+                      value === opt.value &&
+                        "bg-primary-100 text-primary-700 font-medium dark:bg-primary-900/50 dark:text-primary-300",
+                    )}
+                  >
+                    <span className="min-w-0 flex-1 truncate">{opt.label}</span>
+                    {value === opt.value && (
+                      <CheckIcon className="h-4 w-4 shrink-0 text-primary-600" />
+                    )}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    );
+  },
+);
+
+SingleSelect.displayName = "SingleSelect";
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/skeleton.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/skeleton.tsx
new file mode 100644
index 000000000..89ca6e7a2
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@/shared/lib/utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-primary/10 animate-pulse rounded-md", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/sonner.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/sonner.tsx
new file mode 100644
index 000000000..beb81624d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/sonner.tsx
@@ -0,0 +1,27 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground font-medium",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground font-medium",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/sppiner.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/sppiner.tsx
new file mode 100644
index 000000000..397781331
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/sppiner.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import { cn } from "@/shared/lib/utils";
+import { VariantProps, cva } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
+import Loader from "@/record-management/common/loader";
+
+const spinnerVariants = cva("flex-col items-center justify-center", {
+  variants: {
+    show: {
+      true: "flex",
+      false: "hidden",
+    },
+  },
+  defaultVariants: {
+    show: true,
+  },
+});
+
+const loaderVariants = cva("animate-spin text-primary", {
+  variants: {
+    size: {
+      small: "size-6",
+      medium: "size-8",
+      large: "size-12",
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+  },
+});
+
+interface SpinnerContentProps
+  extends VariantProps<typeof spinnerVariants>,
+    VariantProps<typeof loaderVariants> {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function Spinner({
+  show,
+  children,
+}: SpinnerContentProps) {
+  return (
+    <span className={spinnerVariants({ show })}>
+      <Loader />
+      {children}
+    </span>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/star-rating.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/star-rating.tsx
new file mode 100644
index 000000000..26eb1618c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/star-rating.tsx
@@ -0,0 +1,152 @@
+import React, { useState, useCallback } from "react";
+import { Star } from "lucide-react";
+import { cn } from "@/shared/lib/utils";
+
+export interface StarRatingProps {
+  value?: number;
+  onChange?: (rating: number) => void;
+  maxRating?: number;
+  size?: "sm" | "md" | "lg";
+  disabled?: boolean;
+  showLabels?: boolean;
+  className?: string;
+  labels?: string[];
+  language?: "am" | "en";
+}
+
+const defaultLabelsEn = ["Very Poor", "Poor", "Normal", "Good", "Excellent"];
+const defaultLabelsAm = ["በጣም መጥፎ", "መጥፎ", "መካከለኛ", "ጥሩ", "በጣም ጥሩ"];
+
+export const StarRating: React.FC<StarRatingProps> = ({
+  value = 0,
+  onChange,
+  maxRating = 5,
+  size = "md",
+  disabled = false,
+  showLabels = true,
+  className,
+  labels,
+  language = "en",
+}) => {
+  // Use provided labels or default based on language
+  const ratingLabels =
+    labels || (language === "am" ? defaultLabelsAm : defaultLabelsEn);
+  const [hoverRating, setHoverRating] = useState(0);
+  const [isHovering, setIsHovering] = useState(false);
+
+  const sizeClasses = {
+    sm: "w-4 h-4",
+    md: "w-6 h-6",
+    lg: "w-8 h-8",
+  };
+
+  const handleStarClick = useCallback(
+    (rating: number) => {
+      if (!disabled && onChange) {
+        // Use requestAnimationFrame to prevent vibration
+        requestAnimationFrame(() => {
+          onChange(rating);
+        });
+      }
+    },
+    [disabled, onChange]
+  );
+
+  const handleStarHover = useCallback(
+    (rating: number) => {
+      if (!disabled) {
+        if (!isHovering || rating !== hoverRating) {
+          setHoverRating(rating);
+          setIsHovering(true);
+        }
+      }
+    },
+    [disabled, isHovering, hoverRating]
+  );
+
+  const handleMouseLeave = useCallback(() => {
+    if (isHovering) {
+      setIsHovering(false);
+      setHoverRating(0);
+    }
+  }, [isHovering]);
+
+  const displayRating = isHovering ? hoverRating : value;
+  const currentLabel = ratingLabels[displayRating - 1] || "";
+
+  return (
+    <div
+      className={cn("flex flex-col items-center gap-4", className)}
+      style={{
+        backfaceVisibility: "hidden",
+        transform: "translateZ(0)",
+        willChange: "auto",
+      }}
+    >
+      <div
+        className="flex items-center justify-center gap-2"
+        onMouseLeave={handleMouseLeave}
+        style={{
+          backfaceVisibility: "hidden",
+          transform: "translateZ(0)",
+        }}
+      >
+        {Array.from({ length: maxRating }, (_, index) => {
+          const starRating = index + 1;
+          const isFilled = starRating <= displayRating;
+
+          return (
+            <button
+              key={index}
+              type="button"
+              className={cn(
+                "relative flex items-center justify-center transition-colors duration-150 ease-out focus:outline-none focus:ring-2 focus:ring-primary/20 rounded-lg p-2",
+                disabled
+                  ? "cursor-not-allowed opacity-50"
+                  : "cursor-pointer hover:bg-yellow-50/30"
+              )}
+              onClick={() => handleStarClick(starRating)}
+              onMouseEnter={() => handleStarHover(starRating)}
+              disabled={disabled}
+              style={{
+                touchAction: "manipulation",
+                backfaceVisibility: "hidden",
+                transform: "translate3d(0, 0, 0)",
+                WebkitFontSmoothing: "antialiased",
+                minWidth: "3rem",
+                minHeight: "3rem",
+              }}
+            >
+              <Star
+                className={cn(
+                  sizeClasses[size],
+                  "transition-colors duration-150 ease-out",
+                  isFilled
+                    ? "fill-yellow-400 text-yellow-400"
+                    : "fill-transparent text-gray-300"
+                )}
+                style={{
+                  backfaceVisibility: "hidden",
+                  transform: "translate3d(0, 0, 0)",
+                  WebkitFontSmoothing: "antialiased",
+                }}
+              />
+            </button>
+          );
+        })}
+      </div>
+
+      {showLabels && (
+        <div className="text-center min-h-[2.5rem] flex items-center justify-center">
+          {displayRating > 0 && (
+            <div className="text-lg font-semibold text-gray-800 bg-yellow-50 px-4 py-2 rounded-full border border-yellow-200 transition-opacity duration-150">
+              {currentLabel}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default StarRating;
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/switch.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/switch.tsx
new file mode 100644
index 000000000..cf60d348e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/switch.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { cn } from "@/super-admin/lib/utils";
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/table.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/table.tsx
new file mode 100644
index 000000000..d08d6d449
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/table.tsx
@@ -0,0 +1,114 @@
+import * as React from "react";
+
+import { cn } from "@/shared/lib/utils";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/table/AdvancedTable.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/table/AdvancedTable.tsx
new file mode 100644
index 000000000..d15c838ab
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/table/AdvancedTable.tsx
@@ -0,0 +1,232 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/common/ui/table";
+
+import { DataTablePaginationFinal } from "./DataTablePaginationFinal";
+import { DataTableToolbar } from "./DataTableToolbar";
+import { useTranslation } from "react-i18next";
+import { usePersistedColumnVisibility } from "@/shared/hooks/usePersistedColumnVisibility";
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  tableName: string;
+  initialColumnVisibility?: VisibilityState;
+  extraToolbar?: React.ReactNode;
+  toolBarPosition?: "right" | "left" | "center";
+  isLoading?: boolean;
+  itemCount: number;
+  pageIndex: number; // <-- new
+  pageSize?: number; // <-- new
+  onPageChange: (pageIndex: number) => void; // <-- required
+  onPageSizeChange?: (size: number) => void; // <-- new
+  nextFunction: () => void;
+  prevFunction: () => void;
+  refresh?: () => void;
+  onGlobalFilterChange?: (value: string) => void;
+  /** Hide the toolbar's "Filter <tableName>..." text input. Use when the page
+   * already provides its own search/filter UI above the table. */
+  hideToolbarFilter?: boolean;
+  /** Disable client-side filtering when using server-side filtering */
+  disableClientFiltering?: boolean;
+}
+interface incomingHistory {
+  status: string;
+  record: { recordTypeKey: string };
+  id: string;
+  isUrgent?: boolean;
+}
+
+export function AdvancedTable<TData, TValue>({
+  columns,
+  data,
+  tableName,
+  initialColumnVisibility,
+  extraToolbar,
+  toolBarPosition = "right",
+  isLoading = false,
+  itemCount,
+  onPageChange,
+  onPageSizeChange,
+  nextFunction,
+  prevFunction,
+  pageIndex,
+  pageSize = 10,
+  refresh,
+  onGlobalFilterChange,
+  hideToolbarFilter = false,
+  disableClientFiltering = false,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    [],
+  );
+  const [columnVisibility, setColumnVisibility] = usePersistedColumnVisibility(
+    tableName,
+    {
+      letterName: false,
+      fileName: false,
+      ...(initialColumnVisibility ?? {}),
+    },
+  );
+  const [rowSelection, setRowSelection] = React.useState({});
+  const { t } = useTranslation();
+
+  const table = useReactTable({
+    data,
+    columns,
+    pageCount: pageSize > 0 ? Math.ceil(itemCount / pageSize) : 1,
+    state: {
+      sorting,
+      columnVisibility,
+      rowSelection,
+      columnFilters,
+      pagination: {
+        pageIndex, // now controlled from props
+        pageSize,
+      },
+    },
+    manualPagination: true,
+    enableRowSelection: true,
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    getCoreRowModel: getCoreRowModel(),
+    ...(disableClientFiltering
+      ? {}
+      : { getFilteredRowModel: getFilteredRowModel() }),
+    getSortedRowModel: getSortedRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+  });
+
+  return (
+    <div className="space-y-4">
+      <DataTableToolbar
+        table={table}
+        tableName={tableName}
+        extraToolbar={extraToolbar}
+        toolBarPosition={toolBarPosition}
+        refreshTable={refresh}
+        onGlobalFilterChange={onGlobalFilterChange}
+        hideToolbarFilter={hideToolbarFilter}
+        disableClientFiltering={disableClientFiltering}
+      />
+
+      <div className="rounded-md border dark:border-gray-700 bg-white dark:bg-gray-900 overflow-x-auto font-urbanist custom-scrollbar">
+        <Table className="w-full text-base text-gray-700 dark:text-gray-300 font-urbanist">
+          <TableHeader className="bg-gray-50 dark:bg-gray-800">
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id} className="dark:border-gray-700">
+                {headerGroup.headers.map((header) => (
+                  <TableHead
+                    key={header.id}
+                    className="text-base text-gray-500 dark:text-gray-400 dark:bg-gray-800"
+                  >
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+
+          <TableBody>
+            {isLoading ? (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="text-center py-6"
+                >
+                  Loading...
+                </TableCell>
+              </TableRow>
+            ) : table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                  className={`
+                      transition-colors duration-150
+                      ${
+                        ((row.original as incomingHistory).isUrgent === true &&
+                          tableName === "Pending Records") ||
+                        ((row.original as any).action === "inprogress" &&
+                          tableName === "My Approval Records")
+                          ? "bg-yellow-200 dark:bg-yellow-900/30 hover:bg-yellow-300 dark:hover:bg-yellow-900/50"
+                          : "hover:bg-gray-100 dark:hover:bg-gray-800"
+                      }
+                          ${
+                            (((row.original as any).signStatus === "draft" &&
+                              tableName === "Collaborations") ||
+                              tableName === "Pending Approval Tasks") &&
+                            "bg-primary-50 dark:bg-primary-900/20 hover:bg-primary-100 dark:hover:bg-primary-900/30 font-semibold border-l-4 border-l-primary-500 dark:border-l-primary-400"
+                          }
+                  `}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id} className="py-4">
+                      <div className="max-h-[110px] max-w-[460px] overflow-y-auto overflow-x-auto scrollbar-hidden hover:cursor-pointer custom-scrollbar">
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext(),
+                        )}
+                      </div>
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="text-center py-6"
+                >
+                  {t("common.noResult")}
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      {itemCount > pageSize && (
+        <DataTablePaginationFinal
+          pageIndex={pageIndex}
+          pageSize={pageSize}
+          itemCount={itemCount}
+          onPageChange={onPageChange}
+          onPageSizeChange={onPageSizeChange}
+          nextFunction={nextFunction}
+          prevFunction={prevFunction}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/table/DataTableFacetedFilter.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/table/DataTableFacetedFilter.tsx
new file mode 100644
index 000000000..8387c97a9
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/table/DataTableFacetedFilter.tsx
@@ -0,0 +1,149 @@
+import * as React from "react";
+import { Column } from "@tanstack/react-table";
+
+import { cn } from "@/super-admin/lib/utils";
+import { Badge } from "@/shared/common/ui/badge";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/shared/common/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/shared/common/ui/popover";
+import { Separator } from "@/shared/common/ui/separator";
+import { CheckIcon, PlusCircle } from "lucide-react";
+
+export type FilterOption = {
+  label: string;
+  value: string;
+  icon?: React.ComponentType<{ className?: string }>;
+};
+
+interface DataTableFacetedFilter<TData, TValue> {
+  column?: Column<TData, TValue>;
+  title?: string;
+  options: FilterOption[];
+}
+
+export function DataTableFacetedFilter<TData, TValue>({
+  column,
+  title,
+  options,
+}: DataTableFacetedFilter<TData, TValue>) {
+  const facets = column?.getFacetedUniqueValues();
+  const selectedValues = new Set(column?.getFilterValue() as string[]);
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline" size="sm" className="h-8 border-dashed">
+          <PlusCircle className="mr-2 h-4 w-4" />
+          {title}
+          {selectedValues?.size > 0 && (
+            <>
+              <Separator orientation="vertical" className="mx-2 h-4" />
+              <Badge
+                variant="secondary"
+                className="rounded-sm px-1 font-normal lg:hidden"
+              >
+                {selectedValues.size}
+              </Badge>
+              <div className="hidden space-x-1 lg:flex">
+                {selectedValues.size > 2 ? (
+                  <Badge
+                    variant="secondary"
+                    className="rounded-sm px-1 font-normal"
+                  >
+                    {selectedValues.size} selected
+                  </Badge>
+                ) : (
+                  options
+                    .filter((option) => selectedValues.has(option.value))
+                    .map((option) => (
+                      <Badge
+                        variant="secondary"
+                        key={option.value}
+                        className="rounded-sm px-1 font-normal"
+                      >
+                        {option.label}
+                      </Badge>
+                    ))
+                )}
+              </div>
+            </>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder={title} />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => {
+                const isSelected = selectedValues.has(option.value);
+                return (
+                  <CommandItem
+                    key={option.value}
+                    onSelect={() => {
+                      if (isSelected) {
+                        selectedValues.delete(option.value);
+                      } else {
+                        selectedValues.add(option.value);
+                      }
+                      const filterValues = Array.from(selectedValues);
+                      column?.setFilterValue(
+                        filterValues.length ? filterValues : undefined
+                      );
+                    }}
+                  >
+                    <div
+                      className={cn(
+                        "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                        isSelected
+                          ? "bg-primary text-primary-foreground"
+                          : "opacity-50 [&_svg]:invisible"
+                      )}
+                    >
+                      <CheckIcon className={cn("h-4 w-4")} />
+                    </div>
+                    {option.icon && (
+                      <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+                    )}
+                    <span>{option.label}</span>
+                    {facets?.get(option.value) && (
+                      <span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
+                        {facets.get(option.value)}
+                      </span>
+                    )}
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+            {selectedValues.size > 0 && (
+              <>
+                <CommandSeparator />
+                <CommandGroup>
+                  <CommandItem
+                    onSelect={() => column?.setFilterValue(undefined)}
+                    className="justify-center text-center"
+                  >
+                    Clear filters
+                  </CommandItem>
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/table/DataTablePagination.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/table/DataTablePagination.tsx
new file mode 100644
index 000000000..1b3ab7dfc
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/table/DataTablePagination.tsx
@@ -0,0 +1,178 @@
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "@/shared/common/ui/button";
+import { cn } from "@/shared/lib/utils";
+import { useMemo } from "react";
+
+interface DataTablePaginationProps {
+  pageIndex: number; // current page index (0-based)
+  pageSize?: number; // items per page
+  itemCount: number; // total number of items
+  onPageChange: (page: number) => void;
+  nextFunction: () => void;
+  prevFunction: () => void;
+  /** Maximum number of numeric page buttons rendered before truncating with ellipsis. */
+  siblingCount?: number;
+}
+
+const ELLIPSIS = "…" as const;
+
+type PageItem = number | typeof ELLIPSIS;
+
+function buildPageItems(
+  currentPage: number,
+  totalPages: number,
+  siblingCount: number,
+): PageItem[] {
+  // Always show first, last, current, and `siblingCount` pages around current.
+  // Insert ellipsis where there are gaps.
+  const totalNumbers = siblingCount * 2 + 5; // first + last + current + 2*siblings + 2 ellipses
+
+  if (totalPages <= totalNumbers) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+
+  const leftSibling = Math.max(currentPage - siblingCount, 2);
+  const rightSibling = Math.min(currentPage + siblingCount, totalPages - 1);
+  const showLeftEllipsis = leftSibling > 2;
+  const showRightEllipsis = rightSibling < totalPages - 1;
+
+  const items: PageItem[] = [1];
+  if (showLeftEllipsis) items.push(ELLIPSIS);
+  for (let i = leftSibling; i <= rightSibling; i++) items.push(i);
+  if (showRightEllipsis) items.push(ELLIPSIS);
+  items.push(totalPages);
+  return items;
+}
+
+export function DataTablePagination({
+  pageIndex,
+  pageSize = 10,
+  itemCount,
+  onPageChange,
+  nextFunction,
+  prevFunction,
+  siblingCount = 1,
+}: DataTablePaginationProps) {
+  const totalPages = Math.max(1, Math.ceil(itemCount / pageSize));
+  const currentPage = pageIndex + 1; // 1-based for display
+
+  const canGoNext = pageIndex < totalPages - 1;
+  const canGoPrev = pageIndex > 0;
+
+  const pageItems = useMemo(
+    () => buildPageItems(currentPage, totalPages, siblingCount),
+    [currentPage, totalPages, siblingCount],
+  );
+
+  // Edge case: hide entirely when there's nothing to paginate.
+  if (totalPages <= 1 || itemCount === 0) return null;
+
+  const handleNext = () => {
+    if (canGoNext) {
+      onPageChange(pageIndex + 1);
+      nextFunction();
+    }
+  };
+
+  const handlePrev = () => {
+    if (canGoPrev) {
+      onPageChange(pageIndex - 1);
+      prevFunction();
+    }
+  };
+
+  const goToPage = (page: number) => {
+    const clamped = Math.min(Math.max(page, 1), totalPages);
+    if (clamped - 1 === pageIndex) return;
+    onPageChange(clamped - 1);
+  };
+
+  const rangeStart = pageIndex * pageSize + 1;
+  const rangeEnd = Math.min(rangeStart + pageSize - 1, itemCount);
+
+  return (
+    <nav
+      role="navigation"
+      aria-label="Pagination"
+      className="flex flex-col gap-3 px-2 py-3 text-sm sm:flex-row sm:items-center sm:justify-between"
+    >
+      <p className="text-muted-foreground dark:text-gray-400">
+        Showing{" "}
+        <span className="font-medium text-gray-700 dark:text-gray-200">
+          {rangeStart}
+        </span>
+        {"–"}
+        <span className="font-medium text-gray-700 dark:text-gray-200">
+          {rangeEnd}
+        </span>{" "}
+        of{" "}
+        <span className="font-medium text-gray-700 dark:text-gray-200">
+          {itemCount}
+        </span>
+      </p>
+
+      <div className="flex flex-wrap items-center justify-end gap-1">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handlePrev}
+          disabled={!canGoPrev}
+          aria-label="Previous page"
+          className="h-8 gap-1 px-3 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
+        >
+          <ChevronLeft className="h-4 w-4" />
+          <span className="hidden sm:inline">Previous</span>
+        </Button>
+
+        <ul className="flex items-center gap-1">
+          {pageItems.map((item, idx) => {
+            if (item === ELLIPSIS) {
+              return (
+                <li
+                  key={`ellipsis-${idx}`}
+                  aria-hidden="true"
+                  className="flex h-8 w-8 items-center justify-center text-gray-400 dark:text-gray-500"
+                >
+                  {ELLIPSIS}
+                </li>
+              );
+            }
+            const isActive = item === currentPage;
+            return (
+              <li key={item}>
+                <Button
+                  type="button"
+                  variant={isActive ? "default" : "ghost"}
+                  size="sm"
+                  onClick={() => goToPage(item)}
+                  aria-current={isActive ? "page" : undefined}
+                  aria-label={`Go to page ${item}`}
+                  className={cn(
+                    "h-8 min-w-8 px-2 text-sm transition-colors",
+                    isActive
+                      ? "bg-primary-100 text-primary-800 font-bold hover:bg-primary-200 dark:bg-primary-900 dark:text-primary-300 dark:hover:bg-primary-800"
+                      : "font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700",
+                  )}
+                >
+                  {item}
+                </Button>
+              </li>
+            );
+          })}
+        </ul>
+
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleNext}
+          disabled={!canGoNext}
+          aria-label="Next page"
+          className="h-8 gap-1 px-3 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
+        >
+          <span className="hidden sm:inline">Next</span>
+          <ChevronRight className="h-4 w-4" />
+        </Button>
+      </div>
+    </nav>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/table/DataTablePaginationFinal.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/table/DataTablePaginationFinal.tsx
new file mode 100644
index 000000000..f93b89f75
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/table/DataTablePaginationFinal.tsx
@@ -0,0 +1,260 @@
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "@/shared/common/ui/button";
+import { cn } from "@/shared/lib/utils";
+import { useMemo } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { Table } from "@tanstack/react-table";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+interface DataTablePaginationProps<TData = any> {
+  table?: Table<TData>;
+  pageIndex?: number;
+  pageSize?: number;
+  itemCount?: number;
+  onPageChange?: (page: number) => void;
+  onPageSizeChange?: (size: number) => void;
+  pageCount?: number;
+  nextFunction?: () => void;
+  prevFunction?: () => void;
+  /** Maximum number of numeric page buttons rendered before truncating with ellipsis. */
+  siblingCount?: number;
+}
+
+const ELLIPSIS = "…" as const;
+
+type PageItem = number | typeof ELLIPSIS;
+
+function buildPageItems(
+  currentPage: number,
+  totalPages: number,
+  siblingCount: number,
+): PageItem[] {
+  const totalNumbers = siblingCount * 2 + 5;
+
+  if (totalPages <= totalNumbers) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+
+  const leftSibling = Math.max(currentPage - siblingCount, 2);
+  const rightSibling = Math.min(currentPage + siblingCount, totalPages - 1);
+  const showLeftEllipsis = leftSibling > 2;
+  const showRightEllipsis = rightSibling < totalPages - 1;
+
+  const items: PageItem[] = [1];
+  if (showLeftEllipsis) items.push(ELLIPSIS);
+  for (let i = leftSibling; i <= rightSibling; i++) items.push(i);
+  if (showRightEllipsis) items.push(ELLIPSIS);
+  items.push(totalPages);
+  return items;
+}
+
+export function DataTablePaginationFinal<TData>({
+  table,
+  pageIndex: pageIndexProp,
+  pageSize: pageSizeProp,
+  itemCount: itemCountProp,
+  onPageChange,
+  onPageSizeChange,
+  nextFunction,
+  prevFunction,
+  pageCount: pageCountProp,
+  siblingCount = 1,
+}: DataTablePaginationProps<TData>) {
+  // Derive page size
+  const pageSize = table
+    ? (table.getState().pagination?.pageSize ?? 10)
+    : (pageSizeProp ?? 10);
+
+  // Derive page index (0-based)
+  const pageIndex = table
+    ? (table.getState().pagination?.pageIndex ?? 0)
+    : (pageIndexProp ?? 0);
+
+  // Derive total pages
+  const totalPages = table
+    ? table.getPageCount()
+    : (pageCountProp ?? Math.max(1, Math.ceil((itemCountProp ?? 0) / pageSize)));
+
+
+
+  const currentPage = pageIndex + 1;
+
+  const canGoNext = table ? table.getCanNextPage() : pageIndex < totalPages - 1;
+  const canGoPrev = table ? table.getCanPreviousPage() : pageIndex > 0;
+
+  const pageItems = useMemo(
+    () => buildPageItems(currentPage, totalPages, siblingCount),
+    [currentPage, totalPages, siblingCount],
+  );
+
+  // Safely determine if the table is completely empty
+  const isEmpty = table
+    ? table.getCoreRowModel().rows.length === 0 && (!itemCountProp || itemCountProp === 0)
+    : (itemCountProp !== undefined && itemCountProp === 0);
+
+  if (isEmpty) return null;
+
+  // Hide pagination if there is at most 1 page and no way to change page size
+  const hasPageSizeSelector = !!table || !!onPageSizeChange;
+  if (totalPages <= 1 && !hasPageSizeSelector) return null;
+
+  const handleNext = () => {
+    if (canGoNext) {
+      if (table) {
+        table.nextPage();
+      } else {
+        onPageChange?.(pageIndex + 1);
+      }
+      nextFunction?.();
+    }
+  };
+
+  const handlePrev = () => {
+    if (canGoPrev) {
+      if (table) {
+        table.previousPage();
+      } else {
+        onPageChange?.(pageIndex - 1);
+      }
+      prevFunction?.();
+    }
+  };
+
+  const goToPage = (page: number) => {
+    const clamped = Math.min(Math.max(page, 1), totalPages);
+    if (clamped - 1 === pageIndex) return;
+    if (table) {
+      table.setPageIndex(clamped - 1);
+    } else {
+      onPageChange?.(clamped - 1);
+    }
+  };
+
+  const handlePageSizeChange = (size: number) => {
+    if (table) {
+      table.setPageSize(size);
+    } else {
+      onPageSizeChange?.(size);
+    }
+  };
+
+  const rangeStart = pageIndex * pageSize + 1;
+  const rangeEnd = Math.min(rangeStart + pageSize - 1, itemCountProp ?? 0);
+
+  return (
+    <nav
+      role="navigation"
+      aria-label="Pagination"
+      className="flex flex-col gap-3 px-2 py-3 text-sm sm:flex-row sm:items-center sm:justify-between"
+    >
+      {hasPageSizeSelector ? (
+        <div className="flex items-center space-x-2">
+          <p className="text-xs sm:text-sm font-medium whitespace-nowrap">
+            Rows per page
+          </p>
+          <Select
+            value={`${pageSize}`}
+            onValueChange={(value) => {
+              handlePageSizeChange(Number(value));
+            }}
+          >
+            <SelectTrigger className="h-9 sm:h-8 w-[70px] min-w-[70px] text-sm">
+              <SelectValue placeholder={pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {[10, 20, 30, 40, 50].map((size) => (
+                <SelectItem key={size} value={`${size}`}>
+                  {size}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      ) : (
+        <p className="text-xs sm:text-sm text-muted-foreground dark:text-gray-400">
+          Showing{" "}
+          <span className="font-medium text-gray-700 dark:text-gray-200">
+            {rangeStart}
+          </span>
+          {"–"}
+          <span className="font-medium text-gray-700 dark:text-gray-200">
+            {rangeEnd}
+          </span>{" "}
+          of{" "}
+          <span className="font-medium text-gray-700 dark:text-gray-200">
+            {itemCountProp}
+          </span>
+        </p>
+      )}
+
+      <div className="flex flex-wrap items-center justify-end gap-1">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handlePrev}
+          disabled={!canGoPrev}
+          aria-label="Previous page"
+          className="h-8 gap-1 px-3 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
+        >
+          <ChevronLeft className="h-4 w-4" />
+          <span className="hidden sm:inline">Previous</span>
+        </Button>
+
+        <ul className="flex items-center gap-1">
+          {pageItems.map((item, idx) => {
+            if (item === ELLIPSIS) {
+              return (
+                <li
+                  key={`ellipsis-${idx}`}
+                  aria-hidden="true"
+                  className="flex h-8 w-8 items-center justify-center text-gray-400 dark:text-gray-500"
+                >
+                  {ELLIPSIS}
+                </li>
+              );
+            }
+            const isActive = item === currentPage;
+            return (
+              <li key={item}>
+                <Button
+                  type="button"
+                  variant={isActive ? "default" : "ghost"}
+                  size="sm"
+                  onClick={() => goToPage(item)}
+                  aria-current={isActive ? "page" : undefined}
+                  aria-label={`Go to page ${item}`}
+                  className={cn(
+                    "h-8 min-w-8 px-2 text-sm transition-colors",
+                    isActive
+                      ? "bg-primary text-primary-foreground font-bold hover:bg-primary/90 dark:bg-primary dark:text-primary-foreground"
+                      : "font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700",
+                  )}
+                >
+                  {item}
+                </Button>
+              </li>
+            );
+          })}
+        </ul>
+
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleNext}
+          disabled={!canGoNext}
+          aria-label="Next page"
+          className="h-8 gap-1 px-3 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
+        >
+          <span className="hidden sm:inline">Next</span>
+          <ChevronRight className="h-4 w-4" />
+        </Button>
+      </div>
+    </nav>
+  );
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/table/DataTableToolbar.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/table/DataTableToolbar.tsx
new file mode 100644
index 000000000..aa0624715
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/table/DataTableToolbar.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import type { Table } from "@tanstack/react-table";
+
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import { useTranslation } from "react-i18next";
+
+import { RotateCcw, X } from "lucide-react";
+
+import { ReactNode } from "react";
+import { DataTableFacetedFilter } from "./DataTableFacetedFilter";
+import { DataTableViewOptions } from "./DataTableViewOptions";
+import { useState } from "react";
+
+export interface FilterConfig {
+  columnKey: string;
+  title: string;
+  options: { label: string; value: string }[];
+  isVisible?: boolean;
+}
+
+export interface DataTableToolbarProps<TData> {
+  table: Table<TData>;
+  tableName: string;
+  toolBarPosition?: "right" | "left" | "center";
+  extraToolbar?: ReactNode;
+  filters?: FilterConfig[];
+  refreshTable?: () => void;
+  onGlobalFilterChange?: (value: string) => void;
+  /** Hide the built-in "Filter <tableName>..." text input. Pages that own
+   * their own search/filter UI (e.g. outgoing/incoming/pending/userRecords)
+   * pass true so the toolbar doesn't show a redundant filter input. */
+  hideToolbarFilter?: boolean;
+  /** Disable client-side filtering when using server-side filtering */
+  disableClientFiltering?: boolean;
+}
+
+export function DataTableToolbar<TData>({
+  table,
+  tableName,
+  toolBarPosition = "left",
+  extraToolbar,
+  filters = [],
+  refreshTable,
+  onGlobalFilterChange,
+  hideToolbarFilter = false,
+  disableClientFiltering = false,
+}: DataTableToolbarProps<TData>) {
+  const isFiltered = table.getState().columnFilters.length > 0;
+  return (
+    <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+      {/* Filters Section */}
+      <div className="flex flex-wrap items-center gap-2">
+        {!hideToolbarFilter && (
+          <Input
+            placeholder={`Filter ${tableName}...`}
+            onChange={(event) => {
+              const value = event.target.value;
+              if (!disableClientFiltering) {
+                table.setGlobalFilter(value);
+              }
+              onGlobalFilterChange?.(value);
+            }}
+            className="h-8 w-full sm:w-[150px] lg:w-[250px]"
+          />
+        )}
+
+        {filters.map(
+          ({ columnKey, title, options, isVisible = true }) =>
+            isVisible &&
+            table.getColumn(columnKey) && (
+              <DataTableFacetedFilter
+                key={columnKey}
+                column={table.getColumn(columnKey)}
+                title={title}
+                options={options}
+              />
+            )
+        )}
+
+        {isFiltered && (
+          <Button
+            variant="ghost"
+            onClick={() => table.resetColumnFilters()}
+            className="h-8 px-2 lg:px-3"
+          >
+            Reset
+            <X className="ml-2 h-4 w-4" />
+          </Button>
+        )}
+      </div>
+
+      {/* Extra Toolbar & View Options Section */}
+      <div
+        className={`flex flex-wrap items-center gap-2 ${
+          toolBarPosition === "center"
+            ? "justify-center"
+            : toolBarPosition === "left"
+            ? "justify-start"
+            : "justify-end"
+        }`}
+      >
+        {extraToolbar}
+        <DataTableViewOptions table={table} refreshTable={refreshTable} />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/table/DataTableViewOptions.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/table/DataTableViewOptions.tsx
new file mode 100644
index 000000000..1ad0cffa5
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/table/DataTableViewOptions.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
+import { Table } from "@tanstack/react-table";
+import { RefreshCw, RotateCcw, Settings2 } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@/shared/common/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from "@/shared/common/ui/dropdown-menu";
+import { useState } from "react";
+import { getColumnToggleLabel } from "./getColumnToggleLabel";
+
+interface DataTableViewOptionsProps<TData> {
+  table: Table<TData>;
+  refreshTable?: () => void;
+}
+export function DataTableViewOptions<TData>({
+  table,
+  refreshTable,
+}: DataTableViewOptionsProps<TData>) {
+  const [refreshing, setRefreshing] = useState(false);
+  const handleRefresh = async () => {
+    if (refreshTable) {
+      try {
+        setRefreshing(true);
+        await refreshTable(); // your actual refresh logic
+      } finally {
+        setRefreshing(false);
+      }
+    }
+  };
+  const { t } = useTranslation();
+  return (
+    <div className="flex flex-wrap justify-end gap-2 sm:gap-3 mt-2">
+      {/* Refresh Button */}
+      <Button
+        variant="outline"
+        size="sm"
+        className="h-8"
+        onClick={handleRefresh}
+      >
+        <RefreshCw
+          className={`mr-2 transition-transform duration-500 ${
+            refreshing ? "animate-spin" : ""
+          }`}
+        />
+        {t("dashboard.refresh")}
+      </Button>
+
+      {/* Column Visibility Dropdown */}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" size="sm" className="h-8">
+            <Settings2 className="mr-2" />
+            {t("viewDetail.view")}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="min-w-[200px]">
+          <DropdownMenuLabel>{t("viewDetail.toogleColumns")}</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          {table
+            .getAllColumns()
+            .filter(
+              (column) =>
+                typeof column.accessorFn !== "undefined" && column.getCanHide()
+            )
+            .map((column) => (
+              <DropdownMenuCheckboxItem
+                key={column.id}
+                checked={column.getIsVisible()}
+                onCheckedChange={(value) => column.toggleVisibility(!!value)}
+              >
+                {getColumnToggleLabel(column.id, t)}
+              </DropdownMenuCheckboxItem>
+            ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/table/getColumnToggleLabel.ts b/apps/edr-freight-web/backoffice/src/shared/common/ui/table/getColumnToggleLabel.ts
new file mode 100644
index 000000000..1cab1d982
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/table/getColumnToggleLabel.ts
@@ -0,0 +1,26 @@
+import type { TFunction } from "i18next";
+
+const LABEL_NAMESPACES = [
+  "migration.columns",
+  "toogle",
+  "common",
+  "contentManagement",
+  "organization",
+] as const;
+
+export function getColumnToggleLabel(columnId: string, t: TFunction): string {
+  const normalizedId = columnId.includes(".")
+    ? (columnId.split(".").pop() ?? columnId)
+    : columnId;
+
+  for (const namespace of LABEL_NAMESPACES) {
+    const key = `${namespace}.${normalizedId}`;
+    const label = t(key);
+    if (label !== key) return label;
+  }
+
+  return normalizedId
+    .replace(/([a-z])([A-Z])/g, "$1 $2")
+    .replace(/[_-]/g, " ")
+    .replace(/^\w/, (char) => char.toUpperCase());
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/tabs.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/tabs.tsx
new file mode 100644
index 000000000..14ec8ae65
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/tabs.tsx
@@ -0,0 +1,64 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "@/shared/lib/utils";
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-1",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background data-[state=active]:text-primary data-[state=active]:shadow-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring inline-flex flex-1 items-center justify-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 hover:text-primary/80 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/textarea.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/textarea.tsx
new file mode 100644
index 000000000..ad8bec684
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/textarea.tsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+
+import { cn } from "@/shared/lib/utils";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm whitespace-pre-wrap break-words",
+        className
+      )}
+      style={{ wordBreak: 'break-word', overflowWrap: 'break-word', ...props.style }}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/toast.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/toast.tsx
new file mode 100644
index 000000000..c3b833065
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/toast.tsx
@@ -0,0 +1,127 @@
+import * as React from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+import { cn } from "@/super-admin/lib/utils";
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border border-slate-200 p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-white text-slate-950",
+        destructive:
+          "destructive group border-red-500 bg-red-500 text-slate-50",
+        success: "success group border-primary-500 bg-primary-500 text-slate-50",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-slate-200 bg-transparent px-3 text-sm font-medium ring-offset-white transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-slate-100/40 group-[.destructive]:hover:border-red-500/30 group-[.destructive]:hover:bg-red-500 group-[.destructive]:hover:text-slate-50 group-[.destructive]:focus:ring-red-500",
+      className
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-slate-500 opacity-0 transition-opacity hover:text-slate-900 focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/toaster.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/toaster.tsx
new file mode 100644
index 000000000..0be436171
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/toaster.tsx
@@ -0,0 +1,33 @@
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/shared/common/ui/toast";
+import { useToast } from "@/shared/common/ui/use-toast";
+
+export function Toaster() {
+  const { toasts } = useToast();
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        );
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/toggle-group.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/toggle-group.tsx
new file mode 100644
index 000000000..7f5000429
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/toggle-group.tsx
@@ -0,0 +1,37 @@
+import * as React from "react";
+// @ts-ignore - Module types not available
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+
+function ToggleGroup({
+  className = "",
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root>) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      className={`inline-flex items-center gap-1 rounded-md bg-muted p-1 ${className}`}
+      {...props}
+    />
+  );
+}
+
+function ToggleGroupItem({
+  className = "",
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item>) {
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      className={`inline-flex items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium
+        text-muted-foreground transition-all outline-none
+        hover:bg-background/60
+        focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+        data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-sm
+        disabled:pointer-events-none disabled:opacity-50
+        ${className}`}
+      {...props}
+    />
+  );
+}
+
+export { ToggleGroup, ToggleGroupItem };
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/tooltip.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/tooltip.tsx
new file mode 100644
index 000000000..1fd230c8d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/tooltip.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@/shared/lib/utils";
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/treeSelect.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/treeSelect.tsx
new file mode 100644
index 000000000..74590ac23
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/treeSelect.tsx
@@ -0,0 +1,1093 @@
+"use client";
+
+import {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  useMemo,
+  ReactNode,
+} from "react";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from "@/shared/common/ui/collapsible";
+import { ChevronRight, ChevronDown, Search } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/shared/common/ui/context-menu";
+import { X } from "lucide-react";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/shared/common/ui/hover-card";
+import { Info } from "lucide-react";
+import { Badge } from "@/shared/common/ui/badge";
+import { cn } from "@/shared/lib/utils";
+
+import { Input } from "@/shared/common/ui/input";
+
+export interface TreeViewItem {
+  id: string;
+  name: { am: string; en: string };
+  hierarchyType: string;
+  // value: string;
+  children?: TreeViewItem[];
+  checked?: boolean | "indeterminate";
+}
+
+export interface TreeViewIconMap {
+  [key: string]: React.ReactNode | undefined;
+}
+
+export interface TreeViewMenuItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  action: (items: TreeViewItem[]) => void;
+}
+
+export interface TreeViewProps {
+  className?: string;
+  data: TreeViewItem[];
+  localizedName: (
+    name?:
+      | {
+          am: string;
+          en: string;
+        }
+      | undefined
+  ) => string;
+  title?: string;
+  showExpandAll?: boolean;
+  showCheckboxes?: boolean;
+  checkboxPosition?: "left" | "right";
+  searchPlaceholder?: string;
+  selectionText?: string;
+  checkboxLabels?: {
+    check: string;
+    uncheck: string;
+  };
+  getIcon?: (item: TreeViewItem, depth: number) => React.ReactNode;
+  onSelectionChange?: (selectedItems: TreeViewItem[]) => void;
+  onAction?: (action: string, items: TreeViewItem[]) => void;
+  onCheckChange?: (item: TreeViewItem, checked: boolean) => void;
+  iconMap?: TreeViewIconMap;
+  menuItems?: TreeViewMenuItem[];
+  allowSelection?: boolean;
+  /** Compact layout for use inside dropdowns — no outer card/shadow */
+  embedded?: boolean;
+}
+
+interface TreeItemProps {
+  item: TreeViewItem;
+  depth?: number;
+  selectedIds: Set<string>;
+  lastSelectedId: React.MutableRefObject<string | null>;
+  onSelect: (ids: Set<string>) => void;
+  expandedIds: Set<string>;
+  onToggleExpand: (id: string, isOpen: boolean) => void;
+  getIcon?: (item: TreeViewItem, depth: number) => React.ReactNode;
+  onAction?: (action: string, items: TreeViewItem[]) => void;
+  onAccessChange?: (item: TreeViewItem, hasAccess: boolean) => void;
+  allItems: TreeViewItem[];
+  showAccessRights?: boolean;
+  itemMap: Map<string, TreeViewItem>;
+  iconMap?: TreeViewIconMap;
+  menuItems?: TreeViewMenuItem[];
+  getSelectedItems: () => TreeViewItem[];
+  allowSelection?: boolean;
+  localizedName: (
+    name?:
+      | {
+          am: string;
+          en: string;
+        }
+      | undefined
+  ) => string;
+}
+
+// Helper function to build a map of all items by ID
+const buildItemMap = (items: TreeViewItem[]): Map<string, TreeViewItem> => {
+  const map = new Map<string, TreeViewItem>();
+  const processItem = (item: TreeViewItem) => {
+    map.set(item.id, item);
+    item.children?.forEach(processItem);
+  };
+  if (Array.isArray(items)) {
+    items.forEach(processItem);
+  } else {
+    console.warn("buildItemMap received invalid items:", items);
+  }
+  return map;
+};
+
+// Update the getCheckState function to work bottom-up
+const getCheckState = (
+  item: TreeViewItem,
+  itemMap: Map<string, TreeViewItem>
+): "checked" | "unchecked" | "indeterminate" => {
+  // Get the original item from the map
+  const originalItem = itemMap.get(item.id);
+  if (!originalItem) return "unchecked";
+
+  // If it's a leaf node (no children), return its check state
+  if (!originalItem.children || originalItem.children.length === 0) {
+    return originalItem.checked ? "checked" : "unchecked";
+  }
+
+  // Count the check states of immediate children
+  let checkedCount = 0;
+  let indeterminateCount = 0;
+
+  originalItem.children.forEach((child) => {
+    const childState = getCheckState(child, itemMap);
+    if (childState === "checked") checkedCount++;
+    if (childState === "indeterminate") indeterminateCount++;
+  });
+
+  // Calculate parent state based on children states
+  const totalChildren = originalItem.children.length;
+
+  // If all children are checked
+  if (checkedCount === totalChildren) {
+    return "checked";
+  }
+  // If any child is checked or indeterminate
+  if (checkedCount > 0 || indeterminateCount > 0) {
+    return "indeterminate";
+  }
+  // If no children are checked or indeterminate
+  return "unchecked";
+};
+
+// Add this default icon map
+const defaultIconMap: TreeViewIconMap = {
+  file: "",
+  folder: "",
+};
+
+function TreeItem({
+  item,
+  depth = 0,
+  selectedIds,
+  lastSelectedId,
+  onSelect,
+  expandedIds,
+  onToggleExpand,
+  getIcon,
+  onAction,
+  onAccessChange,
+  allItems,
+  showAccessRights,
+  itemMap,
+  iconMap = defaultIconMap,
+  menuItems,
+  getSelectedItems,
+  allowSelection,
+  localizedName,
+}: TreeItemProps): ReactNode {
+  const isOpen = expandedIds.has(item.id);
+  const isSelected = selectedIds.has(item.id);
+  const itemRef = useRef<HTMLDivElement>(null);
+  const [selectionStyle, setSelectionStyle] = useState("");
+
+  // Get all visible items in order
+  const getVisibleItems = useCallback(
+    (items: TreeViewItem[]): TreeViewItem[] => {
+      let visibleItems: TreeViewItem[] = [];
+
+      items.forEach((item) => {
+        visibleItems.push(item);
+        if (item.children && expandedIds.has(item.id)) {
+          visibleItems = [...visibleItems, ...getVisibleItems(item.children)];
+        }
+      });
+
+      return visibleItems;
+    },
+    [expandedIds]
+  );
+
+  useEffect(() => {
+    if (!isSelected) {
+      setSelectionStyle("");
+      return;
+    }
+
+    // Get all visible items from the entire tree
+    const visibleItems = getVisibleItems(allItems);
+    const currentIndex = visibleItems.findIndex((i) => i.id === item.id);
+
+    const prevItem = visibleItems[currentIndex - 1];
+    const nextItem = visibleItems[currentIndex + 1];
+
+    const isPrevSelected = prevItem && selectedIds.has(prevItem.id);
+    const isNextSelected = nextItem && selectedIds.has(nextItem.id);
+
+    const roundTop = !isPrevSelected;
+    const roundBottom = !isNextSelected;
+
+    setSelectionStyle(
+      `${roundTop ? "rounded-t-md" : ""} ${roundBottom ? "rounded-b-md" : ""}`
+    );
+  }, [
+    isSelected,
+    selectedIds,
+    expandedIds,
+    item.id,
+    getVisibleItems,
+    allItems,
+  ]);
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (allowSelection) {
+      let newSelection = new Set(selectedIds);
+
+      if (!itemRef.current) return;
+
+      if (e.shiftKey && lastSelectedId.current !== null) {
+        const items = Array.from(
+          document.querySelectorAll("[data-tree-item]")
+        ) as HTMLElement[];
+        const lastIndex = items.findIndex(
+          (el) => el.getAttribute("data-id") === lastSelectedId.current
+        );
+        const currentIndex = items.findIndex((el) => el === itemRef.current);
+        const [start, end] = [
+          Math.min(lastIndex, currentIndex),
+          Math.max(lastIndex, currentIndex),
+        ];
+
+        items.slice(start, end + 1).forEach((el) => {
+          const id = el.getAttribute("data-id");
+          const parentFolderClosed = el.closest('[data-folder-closed="true"]');
+          const isClosedFolder =
+            el.getAttribute("data-folder-closed") === "true";
+
+          if (id && (isClosedFolder || !parentFolderClosed)) {
+            newSelection.add(id);
+          }
+        });
+      } else if (e.ctrlKey || e.metaKey) {
+        if (newSelection.has(item.id)) {
+          newSelection.delete(item.id);
+        } else {
+          newSelection.add(item.id);
+        }
+      } else {
+        newSelection = new Set([item.id]);
+        // Open folder on single click if it's a folder
+        if (item.children && isSelected) {
+          onToggleExpand(item.id, !isOpen);
+        }
+      }
+
+      lastSelectedId.current = item.id;
+      onSelect(newSelection);
+    }
+  };
+
+  // const handleAction = (action: string) => {
+  //   if (onAction) {
+  //     // Get all selected items, or just this item if none selected
+  //     const selectedItems =
+  //       selectedIds.size > 0
+  //         ? allItems
+  //             .flatMap((item) => getAllDescendants(item))
+  //             .filter((item) => selectedIds.has(item.id))
+  //         : [item];
+  //     onAction(action, selectedItems);
+  //   }
+  // };
+
+  // Helper function to get all descendants of an item (including the item itself)
+  const getAllDescendants = (item: TreeViewItem): TreeViewItem[] => {
+    const descendants = [item];
+    if (item.children) {
+      item.children.forEach((child) => {
+        descendants.push(...getAllDescendants(child));
+      });
+    }
+    return descendants;
+  };
+
+  const handleAccessClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (onAccessChange) {
+      const currentState = getCheckState(item, itemMap);
+      // Toggle between checked and unchecked, treating indeterminate as unchecked
+      const newChecked = currentState === "checked" ? false : true;
+      onAccessChange(item, newChecked);
+    }
+  };
+
+  const renderIcon = () => {
+    if (getIcon) {
+      return getIcon(item, depth);
+    }
+
+    // Use the provided iconMap or fall back to default
+    return (
+      iconMap[item.hierarchyType] || iconMap.folder || defaultIconMap.folder
+    );
+  };
+
+  const getItemPath = (item: TreeViewItem, items: TreeViewItem[]): string => {
+    const path: string[] = [localizedName(item.name)];
+
+    const findParent = (
+      currentItem: TreeViewItem,
+      allItems: TreeViewItem[]
+    ) => {
+      for (const potentialParent of allItems) {
+        if (
+          potentialParent.children?.some((child) => child.id === currentItem.id)
+        ) {
+          path.unshift(localizedName(potentialParent.name));
+          findParent(potentialParent, allItems);
+          break;
+        }
+        if (potentialParent.children) {
+          findParent(currentItem, potentialParent.children);
+        }
+      }
+    };
+
+    findParent(item, items);
+    return path.join(" → ");
+  };
+
+  // Add function to count selected items in a folder
+  const getSelectedChildrenCount = (item: TreeViewItem): number => {
+    let count = 0;
+
+    if (!item.children) return 0;
+
+    item.children.forEach((child) => {
+      if (selectedIds.has(child.id)) {
+        count++;
+      }
+      if (child.children) {
+        count += getSelectedChildrenCount(child);
+      }
+    });
+
+    return count;
+  };
+
+  // Get selected count only if item has children and is collapsed
+  const selectedCount =
+    (item.children && !isOpen && getSelectedChildrenCount(item)) || null;
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger>
+        <div>
+          <div
+            ref={itemRef}
+            data-tree-item
+            data-id={item.id}
+            data-depth={depth}
+            data-folder-closed={item.children && !isOpen}
+            className={`select-none cursor-pointer ${
+              isSelected ? `bg-orange-100 ${selectionStyle}` : "text-foreground"
+            } px-1 w-full`}
+            style={{ paddingLeft: `${depth * 20}px` }}
+            onClick={handleClick}>
+            <div className="flex items-center py-2 sm:py-3 md:py-4 min-h-[2rem] w-full">
+              {item.children && item.children.length > 1 ? (
+                <div className="flex items-center gap-2 flex-1 group overflow-hidden">
+                  <Collapsible
+                    open={isOpen}
+                    onOpenChange={(open) => onToggleExpand(item.id, open)}>
+                    <CollapsibleTrigger
+                      asChild
+                      onClick={(e) => e.stopPropagation()}>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-6 w-6 flex-shrink-0">
+                        <motion.div
+                          initial={false}
+                          animate={{ rotate: isOpen ? 90 : 0 }}
+                          transition={{ duration: 0.1 }}>
+                          <ChevronRight className="h-4 w-4" />
+                        </motion.div>
+                      </Button>
+                    </CollapsibleTrigger>
+                  </Collapsible>
+
+                  {showAccessRights && (
+                    <div
+                      className="relative flex items-center justify-center w-4 h-4 flex-shrink-0 cursor-pointer hover:opacity-80"
+                      onClick={handleAccessClick}>
+                      {getCheckState(item, itemMap) === "checked" && (
+                        <div className="w-4 h-4 border rounded bg-primary border-primary flex items-center justify-center">
+                          <svg
+                            className="h-3 w-3 text-primary-foreground"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M5 13l4 4L19 7"
+                            />
+                          </svg>
+                        </div>
+                      )}
+                      {getCheckState(item, itemMap) === "unchecked" && (
+                        <div className="w-4 h-4 border rounded border-input" />
+                      )}
+                      {getCheckState(item, itemMap) === "indeterminate" && (
+                        <div className="w-4 h-4 border rounded bg-primary border-primary flex items-center justify-center">
+                          <div className="h-0.5 w-2 bg-primary-foreground" />
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                  {renderIcon()}
+                  <span className="flex-1 truncate">
+                    {localizedName(item.name)}
+                  </span>
+
+                  {selectedCount !== null && selectedCount > 0 && (
+                    <Badge
+                      variant="secondary"
+                      className="mr-2 bg-blue-100 hover:bg-blue-100 flex-shrink-0">
+                      {selectedCount} selected
+                    </Badge>
+                  )}
+
+                  <HoverCard>
+                    <HoverCardTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-6 w-6 p-0 group-hover:opacity-100 opacity-0 flex-shrink-0"
+                        onClick={(e) => e.stopPropagation()}>
+                        <Info className="h-4 w-4 text-muted-foreground" />
+                      </Button>
+                    </HoverCardTrigger>
+                    <HoverCardContent className="w-72 sm:w-80 max-w-xs sm:max-w-sm break-words">
+                      <div className="space-y-2">
+                        <h4 className="text-sm font-semibold truncate">
+                          {localizedName(item.name)}
+                        </h4>
+                        <div className="text-sm text-muted-foreground space-y-1 break-words">
+                          <div>
+                            <span className="font-medium">Type:</span>{" "}
+                            {item.hierarchyType.charAt(0).toUpperCase() +
+                              item.hierarchyType.slice(1).replace("_", " ")}
+                          </div>
+                          <div>
+                            <span className="font-medium">ID:</span> {item.id}
+                          </div>
+                          <div className="truncate">
+                            <span className="font-medium">Location:</span>{" "}
+                            {getItemPath(item, allItems)}
+                          </div>
+                          <div>
+                            <span className="font-medium">Items:</span>{" "}
+                            {item.children?.length || 0} direct items
+                          </div>
+                        </div>
+                      </div>
+                    </HoverCardContent>
+                  </HoverCard>
+                </div>
+              ) : (
+                <div className="flex items-center gap-2 flex-1 pl-8 group overflow-hidden">
+                  {showAccessRights && (
+                    <div
+                      className="relative flex items-center justify-center w-4 h-4 flex-shrink-0 cursor-pointer hover:opacity-80"
+                      onClick={handleAccessClick}>
+                      {item.checked ? (
+                        <div className="w-4 h-4 border rounded bg-primary border-primary flex items-center justify-center">
+                          <svg
+                            className="h-3 w-3 text-primary-foreground"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M5 13l4 4L19 7"
+                            />
+                          </svg>
+                        </div>
+                      ) : (
+                        <div className="w-4 h-4 border rounded border-input" />
+                      )}
+                    </div>
+                  )}
+
+                  {renderIcon()}
+                  <span className="flex-1 truncate">
+                    {localizedName(item.name)}
+                  </span>
+
+                  <HoverCard>
+                    <HoverCardTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-6 w-6 p-0 group-hover:opacity-100 opacity-0 flex-shrink-0"
+                        onClick={(e) => e.stopPropagation()}>
+                        <Info className="h-4 w-4 text-muted-foreground" />
+                      </Button>
+                    </HoverCardTrigger>
+                    <HoverCardContent className="w-72 sm:w-80 max-w-xs sm:max-w-sm break-words">
+                      <div className="space-y-2">
+                        <h4 className="text-sm font-semibold truncate">
+                          {localizedName(item.name)}
+                        </h4>
+                        <div className="text-sm text-muted-foreground space-y-1 break-words">
+                          <div>
+                            <span className="font-medium">Type:</span>{" "}
+                            {item.hierarchyType.charAt(0).toUpperCase() +
+                              item.hierarchyType.slice(1).replace("_", " ")}
+                          </div>
+                          <div>
+                            <span className="font-medium">ID:</span> {item.id}
+                          </div>
+                          <div className="truncate">
+                            <span className="font-medium">Location:</span>{" "}
+                            {getItemPath(item, allItems)}
+                          </div>
+                        </div>
+                      </div>
+                    </HoverCardContent>
+                  </HoverCard>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* child tree stays same */}
+          {item.children && (
+            <Collapsible
+              open={isOpen}
+              onOpenChange={(open) => onToggleExpand(item.id, open)}>
+              <AnimatePresence initial={false}>
+                {isOpen && (
+                  <CollapsibleContent forceMount asChild>
+                    <motion.div
+                      initial={{ height: 0, opacity: 0 }}
+                      animate={{ height: "auto", opacity: 1 }}
+                      exit={{ height: 0, opacity: 0 }}
+                      transition={{ duration: 0.05 }}
+                      className="overflow-hidden">
+                      {item.children?.map((child) => (
+                        <TreeItem
+                          key={child.id}
+                          item={child}
+                          depth={depth + 1}
+                          selectedIds={selectedIds}
+                          lastSelectedId={lastSelectedId}
+                          onSelect={onSelect}
+                          expandedIds={expandedIds}
+                          onToggleExpand={onToggleExpand}
+                          getIcon={getIcon}
+                          onAction={onAction}
+                          onAccessChange={onAccessChange}
+                          allItems={allItems}
+                          showAccessRights={showAccessRights}
+                          itemMap={itemMap}
+                          iconMap={iconMap}
+                          menuItems={menuItems}
+                          getSelectedItems={getSelectedItems}
+                          allowSelection={allowSelection}
+                          localizedName={localizedName}
+                        />
+                      ))}
+                    </motion.div>
+                  </CollapsibleContent>
+                )}
+              </AnimatePresence>
+            </Collapsible>
+          )}
+        </div>
+      </ContextMenuTrigger>
+
+      <ContextMenuContent className="w-56 sm:w-64 max-w-xs">
+        {menuItems?.map((menuItem) => (
+          <ContextMenuItem
+            key={menuItem.id}
+            onClick={() => {
+              const items = selectedIds.has(item.id)
+                ? getSelectedItems()
+                : [item];
+              menuItem.action(items);
+            }}>
+            {menuItem.icon && (
+              <span className="mr-2 h-4 w-4 flex-shrink-0">
+                {menuItem.icon}
+              </span>
+            )}
+            <span className="truncate">{menuItem.label}</span>
+          </ContextMenuItem>
+        ))}
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}
+
+export default function TreeView({
+  className,
+  checkboxLabels = {
+    check: "Check",
+    uncheck: "Uncheck",
+  },
+  data,
+  iconMap,
+  searchPlaceholder = "Search...",
+  selectionText = "selected",
+  showExpandAll = true,
+  showCheckboxes = false,
+  getIcon,
+  onSelectionChange,
+  onAction,
+  onCheckChange,
+  menuItems,
+  localizedName,
+  embedded = false,
+}: TreeViewProps) {
+  const [currentMousePos, setCurrentMousePos] = useState<number>(0);
+  const [dragStart, setDragStart] = useState<number | null>(null);
+  const [dragStartPosition, setDragStartPosition] = useState<{
+    x: number;
+    y: number;
+  } | null>(null);
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+  const [isDragging, setIsDragging] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const dragRef = useRef<HTMLDivElement>(null);
+  const lastSelectedId = useRef<string | null>(null);
+  const treeRef = useRef<HTMLDivElement>(null);
+
+  const DRAG_THRESHOLD = 10; // pixels
+
+  // Create a map of all items by ID
+  const itemMap = useMemo(() => buildItemMap(data), [data]);
+
+  // Memoize the search results and expanded IDs
+  const { filteredData, searchExpandedIds } = useMemo(() => {
+    if (!searchQuery.trim()) {
+      return { filteredData: data, searchExpandedIds: new Set<string>() };
+    }
+
+    const searchLower = searchQuery.toLowerCase();
+    const newExpandedIds = new Set<string>();
+
+    // Helper function to check if an item or its descendants match the search
+    const itemMatches = (item: TreeViewItem): boolean => {
+      const nameMatches = localizedName(item.name)
+        .toLowerCase()
+        .includes(searchLower);
+      if (nameMatches) return true;
+
+      if (item.children) {
+        return item.children.some((child) => itemMatches(child));
+      }
+
+      return false;
+    };
+
+    // Helper function to filter tree while keeping parent structure
+    const filterTree = (items: TreeViewItem[]): TreeViewItem[] => {
+      return items
+        .map((item) => {
+          if (!item.children) {
+            return itemMatches(item) ? item : null;
+          }
+
+          const filteredChildren = filterTree(item.children);
+          if (filteredChildren.length > 0 || itemMatches(item)) {
+            if (item.children) {
+              newExpandedIds.add(item.id);
+            }
+            return {
+              ...item,
+              children: filteredChildren,
+            };
+          }
+          return null;
+        })
+        .filter((item): item is TreeViewItem => item !== null);
+    };
+
+    return {
+      filteredData: filterTree(data),
+      searchExpandedIds: newExpandedIds,
+    };
+  }, [data, searchQuery]);
+
+  // Update expanded IDs when search changes
+  useEffect(() => {
+    if (searchQuery.trim()) {
+      setExpandedIds((prev) => new Set([...prev, ...searchExpandedIds]));
+    }
+  }, [searchExpandedIds, searchQuery]);
+
+  useEffect(() => {
+    const handleClickAway = (e: MouseEvent) => {
+      const target = e.target as Element;
+
+      const clickedInside =
+        (treeRef.current && treeRef.current.contains(target)) ||
+        (dragRef.current && dragRef.current.contains(target)) ||
+        // Ignore clicks on context menus
+        target.closest('[role="menu"]') ||
+        target.closest("[data-radix-popper-content-wrapper]");
+
+      if (!clickedInside) {
+        setSelectedIds(new Set());
+        lastSelectedId.current = null;
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickAway);
+    return () => document.removeEventListener("mousedown", handleClickAway);
+  }, []);
+
+  // Function to collect all folder IDs
+  const getAllFolderIds = (items: TreeViewItem[]): string[] => {
+    let ids: string[] = [];
+    items.forEach((item) => {
+      if (item.children) {
+        ids.push(item.id);
+        ids = [...ids, ...getAllFolderIds(item.children)];
+      }
+    });
+    return ids;
+  };
+
+  const handleExpandAll = () => {
+    setExpandedIds(new Set(getAllFolderIds(data)));
+  };
+
+  const handleCollapseAll = () => {
+    setExpandedIds(new Set());
+  };
+
+  const handleToggleExpand = (id: string, isOpen: boolean) => {
+    const newExpandedIds = new Set(expandedIds);
+    if (isOpen) {
+      newExpandedIds.add(id);
+    } else {
+      newExpandedIds.delete(id);
+    }
+    setExpandedIds(newExpandedIds);
+  };
+
+  // Get selected items
+  const getSelectedItems = useCallback((): TreeViewItem[] => {
+    const items: TreeViewItem[] = [];
+    const processItem = (item: TreeViewItem) => {
+      if (selectedIds.has(item.id)) {
+        items.push(item);
+      }
+      item.children?.forEach(processItem);
+    };
+    data.forEach(processItem);
+    return items;
+  }, [selectedIds, data]);
+
+  // Get selected items, filtering out parents if their children are selected
+  const getEffectiveSelectedItems = useCallback((): TreeViewItem[] => {
+    const selectedItems = getSelectedItems();
+
+    // Build a set of all selected IDs for quick lookup
+    const selectedIdsSet = new Set(selectedItems.map((item) => item.id));
+
+    // Filter out parents whose children are also selected
+    return selectedItems.filter((item) => {
+      // If this item has no children, always include it
+      if (!item.children) return true;
+
+      // Check if any children of this item are selected
+      const hasSelectedChildren = item.children.some((child) =>
+        selectedIdsSet.has(child.id)
+      );
+
+      // Only include this item if none of its children are selected
+      return !hasSelectedChildren;
+    });
+  }, [getSelectedItems]);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    // Only track on left click and not on buttons
+    if (e.button !== 0 || (e.target as HTMLElement).closest("button")) return;
+
+    setDragStartPosition({ x: e.clientX, y: e.clientY });
+  }, []);
+
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      // Check if primary button is still held down
+      if (!(e.buttons & 1)) {
+        setIsDragging(false);
+        setDragStart(null);
+        setDragStartPosition(null);
+        return;
+      }
+
+      // If we haven't registered a potential drag start position, ignore
+      if (!dragStartPosition) return;
+
+      // Calculate distance moved
+      const deltaX = e.clientX - dragStartPosition.x;
+      const deltaY = e.clientY - dragStartPosition.y;
+      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+      // If we haven't started dragging yet, check if we should start
+      if (!isDragging) {
+        if (distance > DRAG_THRESHOLD) {
+          setIsDragging(true);
+          setDragStart(dragStartPosition.y);
+
+          // Clear selection if not holding shift/ctrl
+          if (!e.shiftKey && !e.ctrlKey) {
+            setSelectedIds(new Set());
+            lastSelectedId.current = null;
+          }
+        }
+        return;
+      }
+
+      // Rest of the existing drag logic
+      if (!dragRef.current) return;
+
+      const items = Array.from(
+        dragRef.current.querySelectorAll("[data-tree-item]")
+      ) as HTMLElement[];
+
+      const startY = dragStart;
+      const currentY = e.clientY;
+      const [selectionStart, selectionEnd] = [
+        Math.min(startY || 0, currentY),
+        Math.max(startY || 0, currentY),
+      ];
+
+      const newSelection = new Set(
+        e.shiftKey || e.ctrlKey ? Array.from(selectedIds) : []
+      );
+
+      items.forEach((item) => {
+        const rect = item.getBoundingClientRect();
+        const itemTop = rect.top;
+        const itemBottom = rect.top + rect.height;
+
+        if (itemBottom >= selectionStart && itemTop <= selectionEnd) {
+          const id = item.getAttribute("data-id");
+          const isClosedFolder =
+            item.getAttribute("data-folder-closed") === "true";
+          const parentFolderClosed = item.closest(
+            '[data-folder-closed="true"]'
+          );
+
+          if (id && (isClosedFolder || !parentFolderClosed)) {
+            newSelection.add(id);
+          }
+        }
+      });
+
+      setSelectedIds(newSelection);
+      setCurrentMousePos(e.clientY);
+    },
+    [isDragging, dragStart, selectedIds, dragStartPosition]
+  );
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+    setDragStart(null);
+    setDragStartPosition(null);
+  }, []);
+
+  // Add cleanup for mouse events
+  useEffect(() => {
+    if (isDragging) {
+      document.addEventListener("mouseup", handleMouseUp);
+      document.addEventListener("mouseleave", handleMouseUp);
+    }
+    return () => {
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("mouseleave", handleMouseUp);
+    };
+  }, [isDragging, handleMouseUp]);
+
+  // Call onSelectionChange when selection changes
+  useEffect(() => {
+    if (onSelectionChange) {
+      onSelectionChange(getSelectedItems());
+    }
+  }, [selectedIds, onSelectionChange, getSelectedItems]);
+
+  return (
+    <div className="w-full min-w-0 max-w-full">
+      <div
+        ref={treeRef}
+        className={cn(
+          "relative w-full min-w-0 max-w-full",
+          embedded
+            ? "space-y-2"
+            : "space-y-3 rounded-xl border bg-background p-3 shadow-lg sm:space-y-4 sm:p-4 md:p-6",
+        )}>
+        <AnimatePresence mode="wait">
+          {selectedIds.size > 0 ? (
+            <motion.div
+              key="selection"
+              initial={{ opacity: 0, y: -20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              className="min-h-10 rounded-lg border bg-background px-3 py-2 sm:px-4">
+              <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+                <div
+                  className="cursor-pointer text-sm font-medium sm:text-base flex items-center"
+                  title="Clear selection"
+                  onClick={() => {
+                    setSelectedIds(new Set());
+                    lastSelectedId.current = null;
+                  }}>
+                  <X className="h-4 w-4 mr-2" />
+                  {selectedIds.size} {selectionText}
+                </div>
+
+                {showCheckboxes && (
+                  <div className="flex w-full items-center gap-2 sm:w-auto">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => {
+                        const effectiveItems = getEffectiveSelectedItems();
+                        const processItem = (item: TreeViewItem) => {
+                          onCheckChange?.(item, true);
+                          item.children?.forEach(processItem);
+                        };
+                        effectiveItems.forEach(processItem);
+                      }}
+                      className="flex-1 text-primary-600 hover:text-primary-700 hover:bg-primary-50 sm:flex-none">
+                      {checkboxLabels.check}
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => {
+                        const effectiveItems = getEffectiveSelectedItems();
+                        const processItem = (item: TreeViewItem) => {
+                          onCheckChange?.(item, false);
+                          item.children?.forEach(processItem);
+                        };
+                        effectiveItems.forEach(processItem);
+                      }}
+                      className="flex-1 text-red-600 hover:text-red-700 hover:bg-red-50 sm:flex-none">
+                      {checkboxLabels.uncheck}
+                    </Button>
+                  </div>
+                )}
+              </div>
+            </motion.div>
+          ) : (
+            <motion.div
+              key="search"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 20 }}
+              className="flex min-h-10 flex-col gap-2 sm:flex-row sm:items-center">
+              <div className="relative flex-1">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder={searchPlaceholder}
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="h-10 w-full min-w-0 pl-9"
+                />
+              </div>
+              {showExpandAll && (
+                <div className="flex w-full shrink-0 gap-2 sm:w-auto">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-10 flex-1 px-2 sm:flex-none"
+                    onClick={handleExpandAll}>
+                    <ChevronDown className="h-4 w-4 mr-1" />
+                    Expand All
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-10 flex-1 px-2 sm:flex-none"
+                    onClick={handleCollapseAll}>
+                    <ChevronRight className="h-4 w-4 mr-1" />
+                    Collapse All
+                  </Button>
+                </div>
+              )}
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        <div
+          ref={dragRef}
+          className={cn(
+            "relative w-full min-w-0 max-w-full select-none overflow-x-hidden rounded-lg bg-card",
+            className,
+          )}
+          onMouseDown={handleMouseDown}
+          onMouseMove={handleMouseMove}>
+          {isDragging && (
+            <div
+              className="absolute inset-0 bg-blue-500/0 pointer-events-none"
+              style={{
+                top: Math.min(
+                  dragStart || 0,
+                  dragStart === null ? 0 : currentMousePos
+                ),
+                height: Math.abs(
+                  (dragStart || 0) - (dragStart === null ? 0 : currentMousePos)
+                ),
+              }}
+            />
+          )}
+          {filteredData?.map((item) => (
+            <TreeItem
+              key={item.id}
+              item={item}
+              selectedIds={selectedIds}
+              lastSelectedId={lastSelectedId}
+              onSelect={setSelectedIds}
+              expandedIds={expandedIds}
+              onToggleExpand={handleToggleExpand}
+              getIcon={getIcon}
+              onAction={onAction}
+              onAccessChange={onCheckChange}
+              allItems={data}
+              showAccessRights={showCheckboxes}
+              itemMap={itemMap}
+              iconMap={iconMap}
+              menuItems={menuItems}
+              getSelectedItems={getSelectedItems}
+              localizedName={localizedName}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/use-toast.ts b/apps/edr-freight-web/backoffice/src/shared/common/ui/use-toast.ts
new file mode 100644
index 000000000..10551e332
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/use-toast.ts
@@ -0,0 +1,189 @@
+// Inspired by react-hot-toast library
+import * as React from "react";
+
+import type { ToastActionElement, ToastProps } from "@/shared/common/ui/toast";
+
+const TOAST_LIMIT = 5;
+const TOAST_REMOVE_DELAY = 5000;
+
+type ToasterToast = ToastProps & {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+};
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const;
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_VALUE;
+  return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"];
+      toast: ToasterToast;
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"];
+      toast: Partial<ToasterToast>;
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"];
+      toastId?: string;
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"];
+      toastId?: string;
+    };
+
+interface State {
+  toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      };
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action;
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      };
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+
+type Toast = Omit<ToasterToast, "id">;
+
+function toast({ ...props }: Toast) {
+  const id = genId();
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open: any) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  };
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState);
+
+  React.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  };
+}
+
+export { useToast, toast };
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/year-picker.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/year-picker.tsx
new file mode 100644
index 000000000..74cf57ae2
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/year-picker.tsx
@@ -0,0 +1,198 @@
+import React, { useState } from "react";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/shared/common/ui/popover";
+import { ChevronLeft, ChevronRight, Calendar } from "lucide-react";
+import { cn } from "@/shared/lib/utils";
+import HabeshaCalendarUtils from "@/shared/utils/habeshaCalendar";
+
+export interface YearPickerProps {
+  value?: number;
+  onChange?: (year: number) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  calendarType?: "gregorian" | "habesha";
+  language?: "am" | "en";
+  minYear?: number;
+  maxYear?: number;
+}
+
+export const YearPicker: React.FC<YearPickerProps> = ({
+  value,
+  onChange,
+  placeholder = "Select year",
+  disabled = false,
+  className,
+  calendarType = "habesha",
+  language = "am",
+  minYear,
+  maxYear,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [viewYear, setViewYear] = useState(() => {
+    if (value) return value;
+    return calendarType === "habesha"
+      ? HabeshaCalendarUtils.getCurrentHabeshaDate().year
+      : new Date().getFullYear();
+  });
+
+  // Calculate year range
+  const currentYear =
+    calendarType === "habesha"
+      ? HabeshaCalendarUtils.getCurrentHabeshaDate().year
+      : new Date().getFullYear();
+
+  const defaultMinYear = currentYear - 50;
+  const defaultMaxYear = currentYear + 10;
+
+  const yearMin = minYear ?? defaultMinYear;
+  const yearMax = maxYear ?? defaultMaxYear;
+
+  // Generate years for the current view (show 12 years at a time)
+  const generateYearGrid = (centerYear: number) => {
+    const startYear = Math.floor(centerYear / 12) * 12;
+    return Array.from({ length: 12 }, (_, i) => startYear + i);
+  };
+
+  const yearGrid = generateYearGrid(viewYear);
+  const gridStartYear = yearGrid[0];
+  const gridEndYear = yearGrid[yearGrid.length - 1];
+
+  const handleYearSelect = (year: number) => {
+    if (year >= yearMin && year <= yearMax) {
+      onChange?.(year);
+      setIsOpen(false);
+    }
+  };
+
+  const handlePrevious = () => {
+    setViewYear((prev) => Math.max(prev - 12, yearMin));
+  };
+
+  const handleNext = () => {
+    setViewYear((prev) => Math.min(prev + 12, yearMax));
+  };
+
+  const displayValue = value ? value.toString() : "";
+  const calendarLabel =
+    calendarType === "habesha"
+      ? language === "am"
+        ? "የሀበሻ ዘመን አቆጣጠር"
+        : "Habesha Calendar"
+      : language === "am"
+      ? "የግሪጎሪያን ዘመን አቆጣጠር"
+      : "Gregorian Calendar";
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          className={cn(
+            "w-full justify-start text-left font-normal",
+            !value && "text-muted-foreground",
+            className
+          )}
+          disabled={disabled}
+        >
+          <Calendar className="mr-2 h-4 w-4" />
+          {displayValue || placeholder}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80 p-4" align="start">
+        <div className="space-y-4">
+          {/* Header */}
+          <div className="flex items-center justify-between">
+            <div>
+              <h4 className="font-medium">
+                {language === "am" ? "ዓመት ይምረጡ" : "Select Year"}
+              </h4>
+              <p className="text-xs text-muted-foreground">{calendarLabel}</p>
+            </div>
+          </div>
+
+          {/* Navigation */}
+          <div className="flex items-center justify-between">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handlePrevious}
+              disabled={gridStartYear <= yearMin}
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+
+            <span className="text-sm font-medium">
+              {gridStartYear} - {gridEndYear}
+            </span>
+
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleNext}
+              disabled={gridEndYear >= yearMax}
+            >
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+
+          {/* Year Grid */}
+          <div className="grid grid-cols-3 gap-2">
+            {yearGrid.map((year) => {
+              const isSelected = year === value;
+              const isDisabled = year < yearMin || year > yearMax;
+              const isCurrent = year === currentYear;
+
+              return (
+                <Button
+                  key={year}
+                  variant={isSelected ? "default" : "outline"}
+                  size="sm"
+                  className={cn(
+                    "h-10 text-sm",
+                    isSelected && "bg-primary text-primary-foreground",
+                    isCurrent && !isSelected && "border-primary text-primary",
+                    isDisabled && "opacity-50 cursor-not-allowed"
+                  )}
+                  onClick={() => handleYearSelect(year)}
+                  disabled={isDisabled}
+                >
+                  {year}
+                </Button>
+              );
+            })}
+          </div>
+
+          {/* Quick Navigation */}
+          <div className="flex gap-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => {
+                setViewYear(currentYear);
+                handleYearSelect(currentYear);
+              }}
+              className="flex-1 text-xs"
+            >
+              {language === "am" ? "የአሁኑ ዓመት" : "Current Year"}
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setIsOpen(false)}
+              className="flex-1 text-xs"
+            >
+              {language === "am" ? "ሰርዝ" : "Cancel"}
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default YearPicker;
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/utils/ethiopianTimeZone.ts b/apps/edr-freight-web/backoffice/src/shared/common/utils/ethiopianTimeZone.ts
new file mode 100644
index 000000000..59a2b6e89
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/common/utils/ethiopianTimeZone.ts
@@ -0,0 +1,164 @@
+/**
+ * Ethiopian Time Zone Utility Functions
+ * 
+ * Ethiopian Time (EAT) is UTC+3 with no daylight saving time.
+ * This module provides functions to convert between Ethiopian time and UTC.
+ */
+
+const ETHIOPIAN_TIMEZONE_OFFSET = 3; // UTC+3
+
+/**
+ * Convert Ethiopian time to UTC
+ * 
+ * Takes a Date object representing Ethiopian time and returns the equivalent UTC time.
+ * For example: 08:00 EAT becomes 05:00 UTC
+ * 
+ * @param ethiopianDate - Date object in Ethiopian time zone
+ * @returns Date object in UTC
+ */
+export function ethiopianToUTC(ethiopianDate: Date): Date {
+  if (!ethiopianDate || !(ethiopianDate instanceof Date)) {
+    return new Date(NaN);
+  }
+
+  // Create a new date and subtract the Ethiopian offset
+  const utcDate = new Date(ethiopianDate);
+  utcDate.setHours(utcDate.getHours() - ETHIOPIAN_TIMEZONE_OFFSET);
+  return utcDate;
+}
+
+/**
+ * Convert UTC time to Ethiopian time
+ * 
+ * Takes a Date object representing UTC time and returns the equivalent Ethiopian time.
+ * For example: 05:00 UTC becomes 08:00 EAT
+ * 
+ * @param utcDate - Date object in UTC
+ * @returns Date object in Ethiopian time zone
+ */
+export function utcToEthiopian(utcDate: Date): Date {
+  if (!utcDate || !(utcDate instanceof Date)) {
+    return new Date(NaN);
+  }
+
+  // Create a new date and add the Ethiopian offset
+  const ethiopianDate = new Date(utcDate);
+  ethiopianDate.setHours(ethiopianDate.getHours() + ETHIOPIAN_TIMEZONE_OFFSET);
+  return ethiopianDate;
+}
+
+/**
+ * Get current time in Ethiopian time zone
+ * 
+ * @returns Current time as a Date object in Ethiopian time zone
+ */
+export function getCurrentEthiopianTime(): Date {
+  return utcToEthiopian(new Date());
+}
+
+/**
+ * Format time for display in Ethiopian time zone
+ * 
+ * Converts a UTC Date to Ethiopian time and formats it as HH:mm
+ * 
+ * @param date - Date object in UTC
+ * @param format - Optional format string (currently only supports 'HH:mm')
+ * @returns Formatted time string in Ethiopian time zone
+ */
+export function formatEthiopianTime(date: Date, format: string = 'HH:mm'): string {
+  if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
+    return '';
+  }
+
+  const ethiopianDate = utcToEthiopian(date);
+  const hours = ethiopianDate.getHours().toString().padStart(2, '0');
+  const minutes = ethiopianDate.getMinutes().toString().padStart(2, '0');
+  const result = `${hours}:${minutes}`;
+
+  if (format === 'HH:mm') {
+    return result;
+  }
+
+  return result;
+}
+
+/**
+ * Format a UTC Date as the traditional Ethiopian 12-hour clock time.
+ *
+ * The Ethiopian clock starts the day at 6:00 EAT, so e.g. 20:43 EAT (08:43 PM)
+ * is "2:43" on the Ethiopian clock. This matches what the Amharic date picker's
+ * native <input type="time"> renders for the am-ET locale, so the read-only
+ * field display stays consistent with the picker dropdown.
+ *
+ * The EAT wall-clock is derived from the instant via getUTCHours()+3 — the same
+ * basis the picker's time input uses (see toEthiopianTimeInput in
+ * AmharicDatePicker) — so the two agree in any browser timezone.
+ *
+ * @param date - Date object (its UTC instant)
+ * @returns Ethiopian clock time as "H:mm" (e.g. "2:43"), or '' when invalid
+ */
+export function formatEthiopianClockTime(date: Date): string {
+  if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
+    return '';
+  }
+
+  // EAT (UTC+3) wall-clock minutes since midnight.
+  const totalMinutesUtc = date.getUTCHours() * 60 + date.getUTCMinutes();
+  const eatMinutes =
+    (totalMinutesUtc + ETHIOPIAN_TIMEZONE_OFFSET * 60 + 1440) % 1440;
+
+  const eatHour = Math.floor(eatMinutes / 60);
+  const minutes = eatMinutes % 60;
+
+  // EAT 24h clock -> Ethiopian 12h clock (day starts at 6:00 EAT).
+  const ethiopianHour = ((eatHour + 6) % 12) || 12;
+
+  return `${ethiopianHour}:${minutes.toString().padStart(2, '0')}`;
+}
+
+/**
+ * Parse time string in Ethiopian time zone
+ * 
+ * Takes a time string in HH:mm format and returns a Date object representing
+ * that time in Ethiopian time zone (converted to UTC internally).
+ * 
+ * @param timeString - Time string in HH:mm format
+ * @returns Date object representing the time in UTC
+ */
+export function parseEthiopianTime(timeString: string): Date {
+  if (!timeString || typeof timeString !== 'string') {
+    return new Date(NaN);
+  }
+
+  const [hours, minutes] = timeString.split(':').map(Number);
+
+  if (isNaN(hours) || isNaN(minutes) || hours < 0 || hours > 23 || minutes < 0 || minutes > 59) {
+    return new Date(NaN);
+  }
+
+  // Create a date in Ethiopian time
+  const ethiopianDate = new Date();
+  ethiopianDate.setHours(hours, minutes, 0, 0);
+
+  // Convert to UTC
+  return ethiopianToUTC(ethiopianDate);
+}
+
+/**
+ * Get the Ethiopian time zone offset in hours
+ * 
+ * @returns The offset in hours (3 for UTC+3)
+ */
+export function getEthiopianTimeZoneOffset(): number {
+  return ETHIOPIAN_TIMEZONE_OFFSET;
+}
+
+/**
+ * Check if a date is valid
+ * 
+ * @param date - Date object to validate
+ * @returns true if the date is valid, false otherwise
+ */
+export function isValidDate(date: Date): boolean {
+  return date instanceof Date && !isNaN(date.getTime());
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/components/FaydaCallbackDispatcher.tsx b/apps/edr-freight-web/backoffice/src/shared/components/FaydaCallbackDispatcher.tsx
new file mode 100644
index 000000000..8f41a4b98
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/components/FaydaCallbackDispatcher.tsx
@@ -0,0 +1,20 @@
+import { useSearchParams } from "react-router-dom";
+import { isComplaintFaydaState } from "@/shared/utils/faydaOidc";
+import ComplaintCallbackPage from "@/complaints/pages/ComplaintCallbackPage";
+import ExternalPortalCallback from "@/external-portal/components/Registration/ExternalPortalCallBack";
+
+/**
+ * Single FAYDA OIDC callback entry point.
+ * Fayda only allows whitelisted redirect URIs (e.g. /callback) — route
+ * internally based on the `state` param sent during authorization.
+ */
+export default function FaydaCallbackDispatcher() {
+  const [searchParams] = useSearchParams();
+  const state = searchParams.get("state");
+
+  if (isComplaintFaydaState(state)) {
+    return <ComplaintCallbackPage />;
+  }
+
+  return <ExternalPortalCallback />;
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/components/SetPassword.tsx b/apps/edr-freight-web/backoffice/src/shared/components/SetPassword.tsx
new file mode 100644
index 000000000..948ca5750
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/components/SetPassword.tsx
@@ -0,0 +1,344 @@
+import { useState, useEffect, useMemo } from "react";
+import { useSearchParams } from "react-router-dom";
+import { Input } from "@/shared/common/ui/input";
+import { Button } from "@/shared/common/ui/button";
+import { toast } from "sonner";
+import { useAuthUser } from "../hooks/useAuthUser";
+import { useErrorHandler } from "../hooks/useErrorHandler";
+import { Lock, Mail, Eye, EyeOff, RefreshCw, ArrowLeft } from "lucide-react";
+import { motion } from "framer-motion";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+const SetPasswordPage = () => {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+  const [searchParams] = useSearchParams();
+  const {
+    setPassword,
+    isSettingPassword,
+    setPasswordError,
+    setPasswordSuccess,
+    resendVerificationCode,
+    isResendingCode,
+    resendError,
+    resendSuccess,
+  } = useAuthUser();
+
+  const email = searchParams.get("email");
+  const verificationCode = searchParams.get("verificationCode") || "";
+  const phoneNumber = searchParams.get("phoneNumber");
+  const userId = searchParams.get("userId");
+
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [resendAttempted, setResendAttempted] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitAttempted, setSubmitAttempted] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [error, setError] = useState("");
+
+  // Password validation rules
+  const getPasswordValidation = (password: string) => {
+    return {
+      minLength: password.length >= 8,
+      hasLowercase: /[a-z]/.test(password),
+      hasUppercase: /[A-Z]/.test(password),
+      hasNumber: /\d/.test(password),
+      hasSymbol: /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password),
+    };
+  };
+
+  const passwordValidation = useMemo(
+    () => getPasswordValidation(newPassword),
+    [newPassword]
+  );
+  const isPasswordStrong = Object.values(passwordValidation).every(Boolean);
+  const isPasswordMatch = confirmPassword.length > 0 && newPassword === confirmPassword;
+  const canSubmit = Boolean(newPassword && confirmPassword && isPasswordStrong && isPasswordMatch);
+
+  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const password = e.target.value;
+    setNewPassword(password);
+    if (error) setError("");
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSubmitAttempted(true);
+    setError("");
+
+    if (!newPassword || !confirmPassword) {
+      setError("Please fill in both fields");
+      return;
+    }
+
+    // Validate password strength
+    if (!isPasswordStrong) {
+      const missingRequirements = [];
+      if (!passwordValidation.minLength) missingRequirements.push("at least 8 characters");
+      if (!passwordValidation.hasLowercase) missingRequirements.push("one lowercase letter");
+      if (!passwordValidation.hasUppercase) missingRequirements.push("one uppercase letter");
+      if (!passwordValidation.hasNumber) missingRequirements.push("one number");
+      if (!passwordValidation.hasSymbol) missingRequirements.push("one symbol (!@#$%^&*...)");
+      
+      setError(`Password must contain: ${missingRequirements.join(", ")}`);
+      return;
+    }
+
+    if (!isPasswordMatch) {
+      setError("Passwords don't match");
+      return;
+    }
+
+    // Prepare payload - include userId and email when available
+    const payload: any = {
+      verificationCode,
+      newPassword,
+      confirmPassword,
+    };
+
+    if (userId) {
+      payload.userId = userId;
+    }
+    
+    if (email) {
+      payload.email = email;
+    } else if (phoneNumber) {
+      // Apply the same phone number formatting logic
+      let processedPhoneNumber = phoneNumber;
+      if (processedPhoneNumber.startsWith("0")) {
+        processedPhoneNumber = "+251" + processedPhoneNumber.slice(1);
+      }
+      payload.phoneNumber = processedPhoneNumber;
+    }
+
+    setIsSubmitting(true);
+    setPassword(payload);
+  };
+
+  const handleResendCode = () => {
+    if (!phoneNumber && !email) {
+      toast.error("User ID is missing. Cannot resend verification code.");
+      return;
+    }
+    setResendAttempted(true);
+    resendVerificationCode({ phoneNumber: phoneNumber || "", email: email || undefined });
+  };
+
+  useEffect(() => {
+    if (setPasswordSuccess) {
+      toast.success("Password updated successfully! You can now login");
+      setIsSubmitting(false);
+      navigate("/login");
+    }
+  }, [setPasswordSuccess, navigate]);
+
+  useEffect(() => {
+    if (!submitAttempted) return;
+    if (setPasswordError?.message) {
+      setIsSubmitting(false);
+      // Use handleError hook to process backend errors
+      handleError(setPasswordError);
+    }
+  }, [setPasswordError?.message, handleError, submitAttempted]);
+
+  useEffect(() => {
+    if (resendSuccess && resendAttempted) {
+      toast.success("Verification code resent successfully!");
+      setResendAttempted(false);
+    }
+    if (resendError && resendAttempted) {
+      // Use handleError hook to process backend errors
+      handleError(resendError);
+      setResendAttempted(false);
+    }
+  }, [resendSuccess, resendError, resendAttempted, handleError]);
+
+  return (
+    <div
+      className="flex items-center justify-center bg-gray-100 p-4"
+      style={{ height: "100vh" }}
+    >
+      <div className="w-full max-w-md bg-white rounded-xl shadow-lg p-8">
+        <div className="mb-8 text-center">
+          <img
+            src="/assets/smart-office-logo.svg"
+            alt="Smart Office Logo"
+            className="h-10 mb-6 mx-auto"
+          />
+          <h1 className="text-2xl font-bold text-gray-900 mb-2">
+            Set Password
+          </h1>
+          <p className="text-sm text-gray-500">
+            Set a new password for your account
+          </p>
+          {email && (
+            <p className="text-xs text-gray-400 mt-1">Email: {email}</p>
+          )}
+          {phoneNumber && (
+            <p className="text-xs text-gray-400 mt-1">Phone: {phoneNumber}</p>
+          )}
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div className="space-y-4">
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <Lock className="h-5 w-5 text-gray-400" />
+              </div>
+              <Input
+                type={showPassword ? "text" : "password"}
+                placeholder="New Password"
+                className="h-10 rounded-md border px-4 text-sm ps-10 text-black placeholder:text-gray-500"
+                value={newPassword}
+                onChange={handlePasswordChange}
+                required
+              />
+              <div
+                className="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer"
+                onClick={() => setShowPassword(!showPassword)}
+              >
+                {showPassword ? (
+                  <EyeOff className="h-4 w-4 text-gray-400" />
+                ) : (
+                  <Eye className="h-4 w-4 text-gray-400" />
+                )}
+              </div>
+            </div>
+
+            {/* Password strength indicator */}
+            {newPassword && (
+              <div className="space-y-2 p-3 bg-gray-50 rounded-md border border-gray-200">
+                <p className="text-xs font-medium text-gray-700">Password Requirements:</p>
+                <div className="space-y-1">
+                  <div className="flex items-center gap-2">
+                    <div className={`w-4 h-4 rounded-full flex items-center justify-center text-xs ${passwordValidation.minLength ? 'bg-primary-500' : 'bg-gray-300'}`}>
+                      {passwordValidation.minLength && <span className="text-white">✓</span>}
+                    </div>
+                    <span className={`text-xs ${passwordValidation.minLength ? 'text-primary-700' : 'text-gray-600'}`}>
+                      At least 8 characters
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className={`w-4 h-4 rounded-full flex items-center justify-center text-xs ${passwordValidation.hasUppercase ? 'bg-primary-500' : 'bg-gray-300'}`}>
+                      {passwordValidation.hasUppercase && <span className="text-white">✓</span>}
+                    </div>
+                    <span className={`text-xs ${passwordValidation.hasUppercase ? 'text-primary-700' : 'text-gray-600'}`}>
+                      One uppercase letter (A-Z)
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className={`w-4 h-4 rounded-full flex items-center justify-center text-xs ${passwordValidation.hasLowercase ? 'bg-primary-500' : 'bg-gray-300'}`}>
+                      {passwordValidation.hasLowercase && <span className="text-white">✓</span>}
+                    </div>
+                    <span className={`text-xs ${passwordValidation.hasLowercase ? 'text-primary-700' : 'text-gray-600'}`}>
+                      One lowercase letter (a-z)
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className={`w-4 h-4 rounded-full flex items-center justify-center text-xs ${passwordValidation.hasNumber ? 'bg-primary-500' : 'bg-gray-300'}`}>
+                      {passwordValidation.hasNumber && <span className="text-white">✓</span>}
+                    </div>
+                    <span className={`text-xs ${passwordValidation.hasNumber ? 'text-primary-700' : 'text-gray-600'}`}>
+                      One number (0-9)
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className={`w-4 h-4 rounded-full flex items-center justify-center text-xs ${passwordValidation.hasSymbol ? 'bg-primary-500' : 'bg-gray-300'}`}>
+                      {passwordValidation.hasSymbol && <span className="text-white">✓</span>}
+                    </div>
+                    <span className={`text-xs ${passwordValidation.hasSymbol ? 'text-primary-700' : 'text-gray-600'}`}>
+                      One symbol (!@#$%^&*...)
+                    </span>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <Lock className="h-5 w-5 text-gray-400" />
+              </div>
+              <Input
+                type={showConfirmPassword ? "text" : "password"}
+                placeholder="Confirm Password"
+                className="h-10 rounded-md border px-4 text-sm ps-10 text-black placeholder:text-gray-500"
+                value={confirmPassword}
+                onChange={(e) => {
+                  setConfirmPassword(e.target.value);
+                  if (error) setError("");
+                }}
+                required
+              />
+              <div
+                className="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer"
+                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+              >
+                {showConfirmPassword ? (
+                  <EyeOff className="h-4 w-4 text-gray-400" />
+                ) : (
+                  <Eye className="h-4 w-4 text-gray-400" />
+                )}
+              </div>
+            </div>
+
+            {error && <p className="text-sm text-red-500 mt-1">{error}</p>}
+          </div>
+
+          <div className="flex flex-col gap-4">
+            <Button
+              type="submit"
+              className="w-full h-10 bg-primary hover:bg-primary-300 text-white text-sm"
+              disabled={isSettingPassword || isSubmitting || !canSubmit}
+            >
+              {isSettingPassword ? (
+                <span className="flex items-center justify-center">
+                  <RefreshCw className="animate-spin h-5 w-5 mr-2" />
+                  Setting Password...
+                </span>
+              ) : (
+                "Set Password"
+              )}
+            </Button>
+
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full h-10 text-sm"
+              onClick={() => navigate("/")}
+            >
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Back to Login
+            </Button>
+          </div>
+        </form>
+
+        <div className="mt-6 text-center">
+          <button
+            type="button"
+            onClick={handleResendCode}
+            disabled={isResendingCode || !email || !phoneNumber || isSubmitting}
+            className="text-sm text-indigo-600 hover:text-indigo-800 font-medium flex items-center justify-center space-x-1 mx-auto"
+          >
+            {isResendingCode ? (
+              <>
+                <RefreshCw className="animate-spin h-4 w-4 text-indigo-600 mr-2" />
+                <span>Sending...</span>
+              </>
+            ) : (
+              <>
+                <Mail className="h-4 w-4 mr-2" />
+                <span>Resend Verification Code</span>
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SetPasswordPage;
diff --git a/apps/edr-freight-web/backoffice/src/shared/components/SmartOfficeLoader.tsx b/apps/edr-freight-web/backoffice/src/shared/components/SmartOfficeLoader.tsx
new file mode 100644
index 000000000..3df2d5f5d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/components/SmartOfficeLoader.tsx
@@ -0,0 +1,37 @@
+import { cn } from "@/shared/lib/utils";
+
+interface SmartOfficeLoaderProps {
+  label?: string;
+  className?: string;
+}
+
+export default function SmartOfficeLoader({
+  label = "Loading",
+  className,
+}: SmartOfficeLoaderProps) {
+  return (
+    <div
+      className={cn(
+        "min-h-screen flex flex-col items-center justify-center gap-5 bg-gradient-to-br from-primary-50 via-white to-primary-50 dark:from-slate-950 dark:via-slate-900 dark:to-primary-950/40",
+        className
+      )}
+      role="status"
+      aria-live="polite"
+      aria-label={label}
+    >
+      <div className="relative h-20 w-20">
+        <span className="absolute inset-0 rounded-full border-4 border-primary-100 dark:border-primary-950/80" />
+        <span className="absolute inset-0 rounded-full border-4 border-transparent border-t-primary-600 border-r-primary-500 dark:border-t-primary-400 dark:border-r-primary-500 animate-spin" />
+        <span
+          className="absolute inset-3 rounded-full border-4 border-transparent border-b-primary-500 border-l-primary-400 dark:border-b-primary-300 dark:border-l-primary-400 animate-spin"
+          style={{ animationDirection: "reverse", animationDuration: "1.2s" }}
+        />
+        <span className="absolute inset-[1.65rem] rounded-full bg-primary-500/85 dark:bg-primary-400/90 shadow-[0_0_24px_rgba(34,197,94,0.45)] dark:shadow-[0_0_30px_rgba(16,185,129,0.7)] animate-pulse" />
+      </div>
+
+      <p className="text-sm font-semibold tracking-wide text-primary-700 dark:text-primary-300">
+        {label}
+      </p>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/components/User/ChangePassword.tsx b/apps/edr-freight-web/backoffice/src/shared/components/User/ChangePassword.tsx
new file mode 100644
index 000000000..84d803e3a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/components/User/ChangePassword.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function ChangePassword() {
+  return (
+    <div>ChangePassword</div>
+  )
+}
+
+export default ChangePassword
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/shared/components/User/Profile.tsx b/apps/edr-freight-web/backoffice/src/shared/components/User/Profile.tsx
new file mode 100644
index 000000000..3807afabb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/components/User/Profile.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Profile() {
+  return (
+    <div>Profile</div>
+  )
+}
+
+export default Profile
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/shared/components/activity-log/activity-card.tsx b/apps/edr-freight-web/backoffice/src/shared/components/activity-log/activity-card.tsx
new file mode 100644
index 000000000..92d4b624a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/components/activity-log/activity-card.tsx
@@ -0,0 +1,282 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Card, CardContent } from "@/shared/common/ui/card";
+import { Badge } from "@/shared/common/ui/badge";
+import { Avatar, AvatarFallback, AvatarImage } from "@/shared/common/ui/avatar";
+import { format } from "date-fns";
+import {
+  Clock,
+  User,
+  FileText,
+  Settings,
+  Shield,
+  Lock,
+  Upload,
+  Download,
+  Edit,
+  Trash2,
+  Eye,
+} from "lucide-react";
+import { cn } from "@/shared/lib/utils";
+
+interface ActivityCardProps {
+  id: string;
+  action: string;
+  description: string;
+  performedBy: {
+    name: string;
+    email: string;
+    avatar?: string;
+  };
+  timestamp: string;
+  module: string;
+  resourceId?: string;
+  resourceName?: string;
+  status: "success" | "failure" | "pending" | "warning";
+  details?: string;
+  ipAddress?: string;
+  location?: string;
+}
+
+const getModuleIcon = (module: string) => {
+  switch ((module || "").toLowerCase()) {
+    case "authentication":
+      return <Shield className="h-4 w-4" />;
+    case "documents":
+    case "files":
+      return <FileText className="h-4 w-4" />;
+    case "settings":
+      return <Settings className="h-4 w-4" />;
+    case "users":
+      return <User className="h-4 w-4" />;
+    default:
+      return <FileText className="h-4 w-4" />;
+  }
+};
+
+const getActionIcon = (action: string) => {
+  switch ((action || "").toLowerCase()) {
+    case "upload":
+      return <Upload className="h-4 w-4" />;
+    case "download":
+      return <Download className="h-4 w-4" />;
+    case "edit":
+    case "update":
+      return <Edit className="h-4 w-4" />;
+    case "delete":
+      return <Trash2 className="h-4 w-4" />;
+    case "view":
+      return <Eye className="h-4 w-4" />;
+    case "login":
+      return <Lock className="h-4 w-4" />;
+    default:
+      return <FileText className="h-4 w-4" />;
+  }
+};
+
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case "success":
+      return "bg-primary-100 dark:bg-primary-900/40 text-primary-800 dark:text-primary-300 hover:bg-primary-100 dark:hover:bg-primary-900/40 border-primary-300 dark:border-primary-700";
+    case "failure":
+      return "bg-red-100 dark:bg-red-900/40 text-red-800 dark:text-red-300 hover:bg-red-100 dark:hover:bg-red-900/40 border-red-300 dark:border-red-700";
+    case "warning":
+      return "bg-yellow-100 dark:bg-yellow-900/40 text-yellow-800 dark:text-yellow-300 hover:bg-yellow-100 dark:hover:bg-yellow-900/40 border-yellow-300 dark:border-yellow-700";
+    case "pending":
+      return "bg-primary/15 dark:bg-primary/25 text-primary-800 dark:text-primary-300 hover:bg-primary/15 dark:hover:bg-primary/25 border-primary/40 dark:border-primary/60";
+    default:
+      return "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 border-gray-300 dark:border-gray-600";
+  }
+};
+
+export function ActivityCard({ activity }: { activity: ActivityCardProps }) {
+  const { t } = useTranslation();
+  const surface = "bg-white dark:bg-gray-900";
+  const border = "border-gray-200 dark:border-gray-800";
+  const borderLight = "border-gray-100 dark:border-gray-800";
+  const textStrong = "text-gray-900 dark:text-gray-100";
+  const textMuted = "text-gray-600 dark:text-gray-300";
+  const textSubtle = "text-gray-500 dark:text-gray-400";
+  const textSubtler = "text-gray-400 dark:text-gray-500";
+  const iconBg = "bg-gray-100 dark:bg-gray-800";
+  const whiteBg = "bg-white dark:bg-gray-900";
+
+  const formattedDate = format(new Date(activity.timestamp), "MMM d, yyyy");
+  const formattedTime = format(new Date(activity.timestamp), "HH:mm:ss");
+
+  return (
+    <Card
+      className={cn(
+        "border transition-shadow duration-200 hover:shadow-md",
+        border,
+        surface,
+      )}>
+      <CardContent className="p-4 sm:p-5">
+        <div className="flex items-start gap-3 sm:gap-4">
+          <div className="relative shrink-0">
+            <div
+              className={cn(
+                "h-10 w-10 sm:h-11 sm:w-11 rounded-full flex items-center justify-center",
+                iconBg,
+              )}>
+              {getModuleIcon(activity.module)}
+            </div>
+            <div
+              className={cn(
+                "absolute -bottom-1 -right-1 h-6 w-6 rounded-full border flex items-center justify-center",
+                whiteBg,
+                border,
+              )}>
+              {getActionIcon(activity.action)}
+            </div>
+          </div>
+
+          <div className="min-w-0 flex-1">
+            <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
+              <div className="min-w-0">
+                <div className="flex flex-wrap items-center gap-2">
+                  <h4
+                    className={cn("min-w-0 font-medium truncate", textStrong)}>
+                    {activity.description}
+                  </h4>
+
+                  <Badge
+                    variant="outline"
+                    className={cn(
+                      "text-xs font-medium",
+                      getStatusColor(activity.status),
+                    )}>
+                    {t(`auditLog.status.${activity.status}`)}
+                  </Badge>
+                </div>
+
+                <div
+                  className={cn(
+                    "mt-1 flex items-center gap-2 text-xs sm:hidden",
+                    textSubtle,
+                  )}>
+                  <Clock className="h-3.5 w-3.5" />
+                  <span className="whitespace-nowrap">{formattedDate}</span>
+                  <span className={cn(textSubtler)}>•</span>
+                  <span className="whitespace-nowrap">{formattedTime}</span>
+                </div>
+              </div>
+
+              <div
+                className={cn(
+                  "hidden sm:flex items-center gap-2 text-xs whitespace-nowrap",
+                  textSubtle,
+                )}>
+                <Clock className="h-3.5 w-3.5" />
+                <span>{formattedDate}</span>
+                <span className={cn(textSubtler)}>•</span>
+                <span>{formattedTime}</span>
+              </div>
+            </div>
+
+            <div
+              className={cn(
+                "mt-2 flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center text-sm",
+                textMuted,
+              )}>
+              <div className="flex items-center gap-2 min-w-0">
+                <Avatar className="h-6 w-6 sm:h-5 sm:w-5 shrink-0">
+                  {activity.performedBy.avatar ? (
+                    <AvatarImage src={activity.performedBy.avatar} />
+                  ) : null}
+                  <AvatarFallback className="text-[10px] sm:text-xs">
+                    {activity.performedBy.name?.charAt(0)?.toUpperCase() || "U"}
+                  </AvatarFallback>
+                </Avatar>
+
+                <span
+                  className={cn(
+                    "font-medium truncate max-w-[180px] sm:max-w-[220px]",
+                    textStrong,
+                  )}>
+                  {activity.performedBy.name === "System"
+                    ? t("auditLog.page.systemUser")
+                    : activity.performedBy.name}
+                </span>
+
+                <span className={cn("hidden sm:inline", textSubtler)}>•</span>
+
+                <span
+                  className={cn(
+                    "truncate max-w-[220px] sm:max-w-[280px]",
+                    textSubtle,
+                  )}>
+                  {activity.performedBy.email}
+                </span>
+              </div>
+
+              {activity.resourceName ? (
+                <div className="flex items-center gap-2 min-w-0">
+                  <span className={cn("hidden sm:inline", textSubtler)}>•</span>
+                  <span className={cn("sm:hidden", textSubtle)}>
+                    {t("auditLog.card.resource")}:
+                  </span>
+                  <span
+                    className={cn(
+                      "truncate max-w-[260px] sm:max-w-[320px]",
+                      textMuted,
+                    )}>
+                    {activity.resourceName}
+                  </span>
+                </div>
+              ) : null}
+            </div>
+
+            {activity.details || activity.ipAddress || activity.location ? (
+              <div className={cn("mt-3 pt-3 border-t", borderLight)}>
+                <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 text-xs">
+                  {activity.details ? (
+                    <div
+                      className="sm:col-span-2 min-w-0"
+                      title={activity.details}>
+                      <div className={cn("mb-0.5", textSubtler)}>
+                        {t("auditLog.card.details")}
+                      </div>
+                      <div className={cn("truncate", textSubtle)}>
+                        {activity.details}
+                      </div>
+                    </div>
+                  ) : null}
+
+                  <div className="flex flex-wrap gap-3 sm:justify-end sm:items-start">
+                    {activity.ipAddress ? (
+                      <div className="min-w-0">
+                        <div className={cn("mb-0.5", textSubtler)}>
+                          {t("auditLog.card.ip")}
+                        </div>
+                        <div
+                          className={cn(
+                            "font-mono truncate max-w-[180px]",
+                            textSubtle,
+                          )}>
+                          {activity.ipAddress}
+                        </div>
+                      </div>
+                    ) : null}
+
+                    {activity.location ? (
+                      <div className="min-w-0">
+                        <div className={cn("mb-0.5", textSubtler)}>
+                          {t("auditLog.card.location")}
+                        </div>
+                        <div
+                          className={cn("truncate max-w-[180px]", textSubtle)}>
+                          {activity.location}
+                        </div>
+                      </div>
+                    ) : null}
+                  </div>
+                </div>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/components/activity-log/activity-filters.tsx b/apps/edr-freight-web/backoffice/src/shared/components/activity-log/activity-filters.tsx
new file mode 100644
index 000000000..f1dc6a849
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/components/activity-log/activity-filters.tsx
@@ -0,0 +1,260 @@
+'use client'
+
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Input } from '@/shared/common/ui/input'
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from '@/shared/common/ui/select'
+import { Button } from '@/shared/common/ui/button'
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from '@/shared/common/ui/popover'
+import { Calendar } from '@/shared/common/ui/calendar'
+import { Search, Filter, CalendarIcon, X } from 'lucide-react'
+import { format } from 'date-fns'
+import { cn } from '@/shared/lib/utils'
+
+interface ActivityFiltersProps {
+	searchQuery: string
+	onSearchChange: (value: string) => void
+	moduleFilter: string
+	onModuleChange: (value: string) => void
+	actionFilter: string
+	onActionChange: (value: string) => void
+	statusFilter: string
+	onStatusChange: (value: string) => void
+	dateRange: { from?: Date; to?: Date }
+	onDateRangeChange: (range: { from?: Date; to?: Date }) => void
+	modules: string[]
+	actions: string[]
+	onClearFilters: () => void
+}
+
+export function ActivityFilters({
+	searchQuery,
+	onSearchChange,
+	moduleFilter,
+	onModuleChange,
+	actionFilter,
+	onActionChange,
+	statusFilter,
+	onStatusChange,
+	dateRange,
+	onDateRangeChange,
+	modules,
+	actions,
+	onClearFilters,
+}: ActivityFiltersProps) {
+	const { t } = useTranslation()
+	const [datePickerOpen, setDatePickerOpen] = useState(false)
+
+	const textStrong = 'text-gray-900 dark:text-gray-100'
+	const textMuted = 'text-gray-500 dark:text-gray-400'
+	const textSubtle = 'text-gray-400 dark:text-gray-500'
+	const hoverText = 'hover:text-gray-700 dark:hover:text-gray-300'
+	const border = 'border-gray-200 dark:border-gray-800'
+	const surface = 'bg-white dark:bg-gray-900'
+	const placeholder =
+		'placeholder:text-gray-400 dark:placeholder:text-gray-500'
+
+	const hasFilters =
+		searchQuery ||
+		moduleFilter !== 'all' ||
+		actionFilter !== 'all' ||
+		statusFilter !== 'all' ||
+		dateRange.from ||
+		dateRange.to
+
+	return (
+		<div className="space-y-4">
+			<div className="flex items-center justify-between">
+				<h3 className={cn('text-lg font-semibold', textStrong)}>
+					{t('auditLog.filters.title')}
+				</h3>
+				{hasFilters && (
+					<Button
+						variant="ghost"
+						size="sm"
+						onClick={onClearFilters}
+						className={cn(textMuted, hoverText)}
+					>
+						<X className="h-4 w-4 mr-1" />
+						{t('auditLog.filters.clear')}
+					</Button>
+				)}
+			</div>
+
+			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+				<div className="relative">
+					<Search
+						className={cn(
+							'absolute left-3 top-3 h-4 w-4',
+							textSubtle,
+						)}
+					/>
+					<Input
+						placeholder={t('auditLog.filters.searchPlaceholder')}
+						value={searchQuery}
+						onChange={(e) => onSearchChange(e.target.value)}
+						className={cn('pl-10', placeholder)}
+					/>
+				</div>
+
+				<Select value={moduleFilter} onValueChange={onModuleChange}>
+					<SelectTrigger className={cn(border, surface)}>
+						<SelectValue placeholder={t('auditLog.filters.module')} />
+					</SelectTrigger>
+					<SelectContent>
+						<SelectItem value="all">
+							{t('auditLog.filters.allModules')}
+						</SelectItem>
+						{modules.map((module) => (
+							<SelectItem key={module} value={module}>
+								{t(`activityLogPage.modules.${module}`, {
+									defaultValue: module,
+								})}
+							</SelectItem>
+						))}
+					</SelectContent>
+				</Select>
+
+				<Select value={actionFilter} onValueChange={onActionChange}>
+					<SelectTrigger className={cn(border, surface)}>
+						<SelectValue placeholder={t('auditLog.filters.action')} />
+					</SelectTrigger>
+					<SelectContent>
+						<SelectItem value="all">
+							{t('auditLog.filters.allActions')}
+						</SelectItem>
+						{actions.map((action) => (
+							<SelectItem key={action} value={action}>
+								{t(`activityLogPage.actions.${action}`, {
+									defaultValue: action,
+								})}
+							</SelectItem>
+						))}
+					</SelectContent>
+				</Select>
+
+				<Select value={statusFilter} onValueChange={onStatusChange}>
+					<SelectTrigger className={cn(border, surface)}>
+						<SelectValue placeholder={t('auditLog.filters.status')} />
+					</SelectTrigger>
+					<SelectContent>
+						<SelectItem value="all">
+							{t('auditLog.filters.allStatuses')}
+						</SelectItem>
+						<SelectItem value="success">
+							{t('auditLog.status.success')}
+						</SelectItem>
+						<SelectItem value="failure">
+							{t('auditLog.status.failure')}
+						</SelectItem>
+						<SelectItem value="warning">
+							{t('auditLog.status.warning')}
+						</SelectItem>
+						<SelectItem value="pending">
+							{t('auditLog.status.pending')}
+						</SelectItem>
+					</SelectContent>
+				</Select>
+			</div>
+
+			<div className="flex items-center gap-4">
+				<Popover open={datePickerOpen} onOpenChange={setDatePickerOpen}>
+					<PopoverTrigger asChild>
+						<Button
+							variant="outline"
+							className={cn(
+								'w-full md:w-auto justify-start text-left font-normal',
+								border,
+								surface,
+								textStrong,
+							)}
+						>
+							<CalendarIcon
+								className={cn('mr-2 h-4 w-4', textMuted)}
+							/>
+							{dateRange.from ? (
+								dateRange.to ? (
+									<>
+										{format(dateRange.from, 'LLL dd, y')} -{' '}
+										{format(dateRange.to, 'LLL dd, y')}
+									</>
+								) : (
+									format(dateRange.from, 'LLL dd, y')
+								)
+							) : (
+								<span className={textMuted}>
+									{t('auditLog.filters.dateRange')}
+								</span>
+							)}
+						</Button>
+					</PopoverTrigger>
+					<PopoverContent
+						className={cn('w-auto p-0', border, surface)}
+						align="start"
+					>
+						<Calendar
+							initialFocus
+							mode="range"
+							defaultMonth={dateRange.from}
+							selected={{
+								from: dateRange.from,
+								to: dateRange.to,
+							}}
+							onSelect={(range) => {
+								onDateRangeChange({
+									from: range?.from,
+									to: range?.to,
+								})
+							}}
+							numberOfMonths={2}
+						/>
+					</PopoverContent>
+				</Popover>
+
+				<Button
+					variant="outline"
+					onClick={() => {
+						const today = new Date()
+						const last7Days = new Date(today)
+						last7Days.setDate(last7Days.getDate() - 7)
+
+						onDateRangeChange({
+							from: last7Days,
+							to: today,
+						})
+					}}
+					className={cn(border, surface, textStrong, hoverText)}
+				>
+					{t('auditLog.filters.last7Days')}
+				</Button>
+
+				<Button
+					variant="outline"
+					onClick={() => {
+						const today = new Date()
+						const last30Days = new Date(today)
+						last30Days.setDate(last30Days.getDate() - 30)
+
+						onDateRangeChange({
+							from: last30Days,
+							to: today,
+						})
+					}}
+					className={cn(border, surface, textStrong, hoverText)}
+				>
+					{t('auditLog.filters.last30Days')}
+				</Button>
+			</div>
+		</div>
+	)
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/components/activity-log/activity-stats.tsx b/apps/edr-freight-web/backoffice/src/shared/components/activity-log/activity-stats.tsx
new file mode 100644
index 000000000..87db50965
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/components/activity-log/activity-stats.tsx
@@ -0,0 +1,125 @@
+import { Card, CardContent } from "@/shared/common/ui/card";
+import {
+  Activity,
+  CheckCircle,
+  XCircle,
+  Clock,
+  TrendingUp,
+} from "lucide-react";
+import { cn } from "@/shared/lib/utils";
+import { useTranslation } from "react-i18next";
+
+interface ActivityStatsProps {
+  totalActivities: number;
+  successRate: number;
+  avgDailyActivities: number;
+  uniqueUsers: number;
+  topActions: { action: string; count: number }[];
+}
+
+export function ActivityStats({
+  totalActivities,
+  successRate,
+  avgDailyActivities,
+  uniqueUsers,
+  topActions,
+}: ActivityStatsProps) {
+  const border = "border-gray-200 dark:border-gray-800";
+  const surface = "bg-white dark:bg-gray-900";
+  const textStrong = "text-gray-900 dark:text-gray-100";
+  const textMuted = "text-gray-600 dark:text-gray-300";
+  const textSubtle = "text-gray-500 dark:text-gray-400";
+  const textSubtler = "text-gray-400 dark:text-gray-500";
+  const iconBgLight = "bg-gray-100 dark:bg-gray-800";
+  const { t } = useTranslation();
+
+  const stats = [
+    {
+      label: t("auditLog.stats.totalActivities"),
+      value: totalActivities.toLocaleString(),
+      icon: Activity,
+      color: "text-blue-600 dark:text-blue-400",
+      bgColor: "bg-blue-50 dark:bg-blue-950",
+    },
+    {
+      label: t("auditLog.stats.successRate"),
+      value: `${successRate}%`,
+      icon: CheckCircle,
+      color: "text-green-600 dark:text-green-400",
+      bgColor: "bg-green-50 dark:bg-green-950",
+    },
+    {
+      label: t("auditLog.stats.dailyAverage"),
+      value: avgDailyActivities.toLocaleString(),
+      icon: TrendingUp,
+      color: "text-purple-600 dark:text-purple-400",
+      bgColor: "bg-purple-50 dark:bg-purple-950",
+    },
+    {
+      label: t("auditLog.stats.uniqueUsers"),
+      value: uniqueUsers.toLocaleString(),
+      icon: Clock,
+      color: "text-orange-600 dark:text-orange-400",
+      bgColor: "bg-orange-50 dark:bg-orange-950",
+    },
+  ];
+
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        {stats.map((stat, index) => (
+          <Card key={index} className={cn(border, surface)}>
+            <CardContent className="p-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className={cn("text-sm font-medium", textMuted)}>
+                    {stat.label}
+                  </p>
+                  <p className={cn("text-2xl font-bold mt-1", textStrong)}>
+                    {stat.value}
+                  </p>
+                </div>
+                <div className={cn("p-3 rounded-full", stat.bgColor)}>
+                  <stat.icon className={cn("h-6 w-6", stat.color)} />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <Card className={cn(border, surface)}>
+        <CardContent className="p-6">
+          <h3 className={cn("text-lg font-semibold mb-4", textStrong)}>
+            {t("auditLog.stats.topActions")}
+          </h3>
+          <div className="space-y-3">
+            {topActions.map((action, index) => (
+              <div key={index} className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <div
+                    className={cn(
+                      "w-8 h-8 rounded-md flex items-center justify-center",
+                      iconBgLight,
+                    )}>
+                    <span className={cn("text-sm font-medium", textSubtle)}>
+                      {action.action.charAt(0)}
+                    </span>
+                  </div>
+                  <span className={cn("text-sm font-medium", textStrong)}>
+                    {t(`activityLogPage.actions.${action.action}`, {
+                      defaultValue: action.action,
+                    })}
+                  </span>
+                </div>
+                <span className={cn("text-sm font-semibold", textMuted)}>
+                  {action.count} {t("auditLog.stats.times")}
+                </span>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/components/activity-log/export-modal.tsx b/apps/edr-freight-web/backoffice/src/shared/components/activity-log/export-modal.tsx
new file mode 100644
index 000000000..f3657c727
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/components/activity-log/export-modal.tsx
@@ -0,0 +1,219 @@
+'use client'
+
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from '@/shared/common/ui/dialog'
+import { Button } from '@/shared/common/ui/button'
+import { Input } from '@/shared/common/ui/input'
+import { Label } from '@/shared/common/ui/label'
+import { RadioGroup, RadioGroupItem } from '@/shared/common/ui/radio-group'
+import { Checkbox } from '@/shared/common/ui/checkbox'
+import { Download, FileText, FileSpreadsheet } from 'lucide-react'
+import { cn } from '@/shared/lib/utils'
+
+interface ExportModalProps {
+	open: boolean
+	onOpenChange: (open: boolean) => void
+	onExport: (options: ExportOptions) => void
+}
+
+export interface ExportOptions {
+	format: 'csv' | 'json' | 'xlsx'
+	includeDetails: boolean
+	dateRange: boolean
+	fileName: string
+}
+
+export function ExportModal({
+	open,
+	onOpenChange,
+	onExport,
+}: ExportModalProps) {
+	const { t } = useTranslation()
+	const [options, setOptions] = useState<ExportOptions>({
+		format: 'csv',
+		includeDetails: true,
+		dateRange: true,
+		fileName: `activity-logs-${new Date().toISOString().split('T')[0]}`,
+	})
+
+	const surface = 'bg-white dark:bg-gray-900'
+	const border = 'border-gray-200 dark:border-gray-800'
+	const borderMuted = 'border-muted dark:border-gray-700'
+	const textStrong = 'text-gray-900 dark:text-gray-100'
+	const textMuted = 'text-gray-600 dark:text-gray-300'
+	const textSubtle = 'text-gray-500 dark:text-gray-400'
+	const primaryBorder = 'border-primary dark:border-sky-600'
+	const hoverBg = 'hover:bg-accent dark:hover:bg-gray-800'
+	const hoverText = 'hover:text-accent-foreground dark:hover:text-gray-100'
+	const primaryBtn =
+		'bg-primary dark:bg-sky-600 hover:bg-primary/90 dark:hover:bg-sky-500 text-white'
+
+	const handleExport = () => {
+		onExport(options)
+		onOpenChange(false)
+	}
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent
+				className={cn('sm:max-w-[500px]', surface, border, textStrong)}
+			>
+				<DialogHeader>
+					<DialogTitle className={textStrong}>
+						{t('auditLog.export.title')}
+					</DialogTitle>
+					<DialogDescription className={textMuted}>
+						{t('auditLog.export.description')}
+					</DialogDescription>
+				</DialogHeader>
+
+				<div className="space-y-6 py-4">
+					<div className="space-y-2">
+						<Label className={textStrong}>
+							{t('auditLog.export.fileName')}
+						</Label>
+						<Input
+							value={options.fileName}
+							onChange={(e) =>
+								setOptions({
+									...options,
+									fileName: e.target.value,
+								})
+							}
+							placeholder={t('auditLog.export.fileNamePlaceholder')}
+							className={cn(
+								border,
+								surface,
+								textStrong,
+								'placeholder:text-gray-400 dark:placeholder:text-gray-500',
+							)}
+						/>
+					</div>
+
+					<div className="space-y-4">
+						<Label className={textStrong}>
+							{t('auditLog.export.format')}
+						</Label>
+						<RadioGroup
+							value={options.format}
+							onValueChange={(value: 'csv' | 'json' | 'xlsx') =>
+								setOptions({ ...options, format: value })
+							}
+							className="grid grid-cols-3 gap-4"
+						>
+							{[
+								{
+									value: 'csv',
+									icon: FileText,
+									label: t('auditLog.export.csv'),
+								},
+								{
+									value: 'json',
+									icon: FileText,
+									label: t('auditLog.export.json'),
+								},
+								{
+									value: 'xlsx',
+									icon: FileSpreadsheet,
+									label: t('auditLog.export.excel'),
+								},
+							].map(({ value, icon: Icon, label }) => (
+								<div key={value}>
+									<RadioGroupItem
+										value={value}
+										id={value}
+										className="peer sr-only"
+									/>
+									<Label
+										htmlFor={value}
+										className={cn(
+											'flex flex-col items-center justify-between rounded-md border-2 p-4 cursor-pointer transition-all',
+											borderMuted,
+											surface,
+											hoverBg,
+											hoverText,
+											'peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary',
+											options.format === value &&
+											primaryBorder,
+										)}
+									>
+										<Icon
+											className={cn(
+												'mb-3 h-6 w-6',
+												textMuted,
+											)}
+										/>
+										<span className={textStrong}>
+											{label}
+										</span>
+									</Label>
+								</div>
+							))}
+						</RadioGroup>
+					</div>
+
+					<div className="space-y-4">
+						<div className="flex items-center space-x-2">
+							<Checkbox
+								id="includeDetails"
+								checked={options.includeDetails}
+								onCheckedChange={(checked) =>
+									setOptions({
+										...options,
+										includeDetails: checked as boolean,
+									})
+								}
+							/>
+							<Label
+								htmlFor="includeDetails"
+								className={cn('cursor-pointer', textStrong)}
+							>
+								{t('auditLog.export.includeDetails')}
+							</Label>
+						</div>
+						<div className="flex items-center space-x-2">
+							<Checkbox
+								id="dateRange"
+								checked={options.dateRange}
+								onCheckedChange={(checked) =>
+									setOptions({
+										...options,
+										dateRange: checked as boolean,
+									})
+								}
+							/>
+							<Label
+								htmlFor="dateRange"
+								className={cn('cursor-pointer', textStrong)}
+							>
+								{t('auditLog.export.includeDateRange')}
+							</Label>
+						</div>
+					</div>
+				</div>
+
+				<DialogFooter>
+					<Button
+						variant="outline"
+						onClick={() => onOpenChange(false)}
+						className={cn(border, surface, textStrong, hoverBg)}
+					>
+						{t('auditLog.export.cancel')}
+					</Button>
+					<Button onClick={handleExport} className={cn(primaryBtn)}>
+						<Download className="mr-2 h-4 w-4" />
+						{t('auditLog.export.export')}
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	)
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/components/audit-log/AuditLogDetailPanel.tsx b/apps/edr-freight-web/backoffice/src/shared/components/audit-log/AuditLogDetailPanel.tsx
new file mode 100644
index 000000000..6acb61239
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/components/audit-log/AuditLogDetailPanel.tsx
@@ -0,0 +1,177 @@
+import { useTranslation } from "react-i18next";
+import { format } from "date-fns";
+import { cn } from "@/shared/lib/utils";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import { Badge } from "@/shared/common/ui/badge";
+import { Avatar, AvatarFallback } from "@/shared/common/ui/avatar";
+import { Button } from "@/shared/common/ui/button";
+import { X } from "lucide-react";
+import { AuditLogItem } from "./AuditLogDisplay";
+
+type AuditLogDetailPanelProps = {
+  log: AuditLogItem;
+  onClose?: () => void;
+  localizedName?: (name: { en: string; am: string }) => string;
+};
+
+const getActionColor = (
+  action: string,
+): "default" | "secondary" | "destructive" | "outline" => {
+  const upper = action.toUpperCase();
+  if (upper === "INSERT") return "default";
+  if (upper === "UPDATE") return "secondary";
+  if (upper === "DELETE") return "destructive";
+  return "outline";
+};
+
+const getEntityLabel = (entityName: string): string => {
+  return entityName
+    .split("_")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+};
+
+const getInitials = (name: string): string => {
+  return name
+    .split(" ")
+    .map((n) => n.charAt(0))
+    .join("")
+    .toUpperCase()
+    .slice(0, 2);
+};
+
+/**
+ * Detailed view of a single audit log entry
+ * Shows full information including changes made
+ */
+export const AuditLogDetailPanel = ({
+  log,
+  onClose,
+  localizedName,
+}: AuditLogDetailPanelProps) => {
+  const { t, i18n } = useTranslation();
+  const isAmharic = i18n.language === "am";
+
+  const userName = isAmharic ? log.user.name.am : log.user.name.en;
+  const displayName = localizedName
+    ? localizedName(log.user.name)
+    : userName;
+
+  const timestamp = new Date(log.createdAt).toLocaleString(i18n.language, {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <div className="flex items-start justify-between">
+          <div className="flex-1">
+            <CardTitle>{t("auditLog.detail.title", "Audit Log Details")}</CardTitle>
+            <CardDescription>
+              {t("auditLog.detail.description", "View details of this audit entry")}
+            </CardDescription>
+          </div>
+          {onClose && (
+            <Button variant="ghost" size="sm" onClick={onClose}>
+              <X className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        {/* Header with user and action */}
+        <div className="flex items-start gap-4 pb-4 border-b">
+          <Avatar className="h-10 w-10 mt-1">
+            <AvatarFallback>{getInitials(displayName)}</AvatarFallback>
+          </Avatar>
+          <div className="flex-1">
+            <h3 className="text-lg font-semibold">{displayName}</h3>
+            <p className="text-sm text-gray-600">{log.user.email}</p>
+          </div>
+        </div>
+
+        {/* Action and Entity info */}
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <p className="text-sm font-medium text-gray-700">
+              {t("auditLog.detail.action", "Action")}
+            </p>
+            <div className="mt-2">
+              <Badge variant={getActionColor(log.queryMethod)}>
+                {log.queryMethod.toUpperCase()}
+              </Badge>
+            </div>
+          </div>
+          <div>
+            <p className="text-sm font-medium text-gray-700">
+              {t("auditLog.detail.entity", "Entity")}
+            </p>
+            <p className="mt-2 text-sm">{getEntityLabel(log.entityName)}</p>
+          </div>
+        </div>
+
+        {/* Timestamp */}
+        <div>
+          <p className="text-sm font-medium text-gray-700">
+            {t("auditLog.detail.timestamp", "Timestamp")}
+          </p>
+          <p className="mt-2 text-sm text-gray-600">{timestamp}</p>
+        </div>
+
+        {/* Changes if available */}
+        {log.changes && log.changes.length > 0 && (
+          <div>
+            <p className="text-sm font-medium text-gray-700 mb-3">
+              {t("auditLog.detail.changes", "Changes Made")}
+            </p>
+            <div className="space-y-3 bg-gray-50 rounded-lg p-4">
+              {log.changes.map((change, idx) => (
+                <div key={idx} className="text-sm">
+                  <p className="font-medium text-gray-900 mb-1">
+                    {change.field ? String(change.field) : `Change ${idx + 1}`}
+                  </p>
+                  {change.from !== undefined && (
+                    <p className="text-gray-600">
+                      <span className="text-xs font-semibold">From:</span>{" "}
+                      <code className="bg-gray-100 px-2 py-1 rounded text-xs">
+                        {JSON.stringify(change.from)}
+                      </code>
+                    </p>
+                  )}
+                  {change.to !== undefined && (
+                    <p className="text-gray-600 mt-1">
+                      <span className="text-xs font-semibold">To:</span>{" "}
+                      <code className="bg-blue-50 px-2 py-1 rounded text-xs text-blue-900">
+                        {JSON.stringify(change.to)}
+                      </code>
+                    </p>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Additional info */}
+        {log.user.username && (
+          <div className="text-xs text-gray-500 pt-4 border-t">
+            <p>
+              <span className="font-semibold">Username:</span> {log.user.username}
+            </p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/components/audit-log/AuditLogDisplay.tsx b/apps/edr-freight-web/backoffice/src/shared/components/audit-log/AuditLogDisplay.tsx
new file mode 100644
index 000000000..90dd7f177
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/components/audit-log/AuditLogDisplay.tsx
@@ -0,0 +1,224 @@
+import { format } from "date-fns";
+import { useTranslation } from "react-i18next";
+import { cn } from "@/shared/lib/utils";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/common/ui/table";
+import { Badge } from "@/shared/common/ui/badge";
+import { Avatar, AvatarFallback } from "@/shared/common/ui/avatar";
+
+export type AuditLogItem = {
+  id?: string;
+  createdAt: string;
+  entityName: string;
+  queryMethod: "INSERT" | "UPDATE" | "DELETE" | string;
+  user: {
+    id: string;
+    name: {
+      am: string;
+      en: string;
+    };
+    email: string;
+    username?: string;
+  };
+  changes?: Array<{
+    field?: string;
+    from?: unknown;
+    to?: unknown;
+  }>;
+};
+
+type AuditLogDisplayProps = {
+  logs: AuditLogItem[];
+  loading?: boolean;
+  localizedName?: (name: { en: string; am: string }) => string;
+  onRowClick?: (log: AuditLogItem) => void;
+  compact?: boolean;
+  className?: string;
+};
+
+const getActionColor = (
+  action: string,
+): "default" | "secondary" | "destructive" | "outline" => {
+  const upper = action.toUpperCase();
+  if (upper === "INSERT") return "default";
+  if (upper === "UPDATE") return "secondary";
+  if (upper === "DELETE") return "destructive";
+  return "outline";
+};
+
+const getEntityLabel = (entityName: string): string => {
+  // Convert snake_case to Title Case
+  return entityName
+    .split("_")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+};
+
+const getInitials = (name: string): string => {
+  return name
+    .split(" ")
+    .map((n) => n.charAt(0))
+    .join("")
+    .toUpperCase()
+    .slice(0, 2);
+};
+
+/**
+ * Displays audit logs in a table or compact format
+ * Shows: WHO (user name) -> WHAT (action on entity) -> WHEN (timestamp)
+ */
+export const AuditLogDisplay = ({
+  logs,
+  loading = false,
+  localizedName,
+  onRowClick,
+  compact = false,
+  className,
+}: AuditLogDisplayProps) => {
+  const { t, i18n } = useTranslation();
+  const isAmharic = i18n.language === "am";
+
+  if (loading) {
+    return (
+      <div className={cn("flex items-center justify-center py-8", className)}>
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900" />
+      </div>
+    );
+  }
+
+  if (!logs || logs.length === 0) {
+    return (
+      <div className={cn("text-center py-8 text-gray-500", className)}>
+        <p>{t("auditLog.noRecords", "No audit records found")}</p>
+      </div>
+    );
+  }
+
+  if (compact) {
+    return (
+      <div className={cn("space-y-2", className)}>
+        {logs.map((log, idx) => {
+          const userName = isAmharic ? log.user.name.am : log.user.name.en;
+          const displayName = localizedName
+            ? localizedName(log.user.name)
+            : userName;
+          const timestamp = new Date(log.createdAt).toLocaleString(
+            i18n.language,
+            {
+              year: "numeric",
+              month: "short",
+              day: "numeric",
+              hour: "2-digit",
+              minute: "2-digit",
+            },
+          );
+
+          return (
+            <div
+              key={log.id || idx}
+              className="flex items-start gap-3 p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors cursor-pointer"
+              onClick={() => onRowClick?.(log)}
+            >
+              <Avatar className="h-8 w-8 mt-0.5">
+                <AvatarFallback className="text-xs">
+                  {getInitials(displayName)}
+                </AvatarFallback>
+              </Avatar>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2 flex-wrap">
+                  <span className="font-semibold text-sm">{displayName}</span>
+                  <Badge variant={getActionColor(log.queryMethod)} className="text-xs">
+                    {log.queryMethod.toUpperCase()}
+                  </Badge>
+                </div>
+                <p className="text-xs text-gray-600 mt-1">
+                  {getEntityLabel(log.entityName)}
+                </p>
+                <p className="text-xs text-gray-500 mt-0.5">{timestamp}</p>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("rounded-lg border border-gray-200 overflow-hidden", className)}>
+      <Table>
+        <TableHeader>
+          <TableRow className="bg-gray-50">
+            <TableHead className="w-[100px]">
+              {t("auditLog.table.user", "User")}
+            </TableHead>
+            <TableHead className="w-[150px]">
+              {t("auditLog.table.action", "Action")}
+            </TableHead>
+            <TableHead className="w-[200px]">
+              {t("auditLog.table.entity", "Entity")}
+            </TableHead>
+            <TableHead className="w-[180px]">
+              {t("auditLog.table.time", "Timestamp")}
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {logs.map((log, idx) => {
+            const userName = isAmharic ? log.user.name.am : log.user.name.en;
+            const displayName = localizedName
+              ? localizedName(log.user.name)
+              : userName;
+            const timestamp = new Date(log.createdAt).toLocaleString(
+              i18n.language,
+              {
+                year: "numeric",
+                month: "short",
+                day: "numeric",
+                hour: "2-digit",
+                minute: "2-digit",
+              },
+            );
+
+            return (
+              <TableRow
+                key={log.id || idx}
+                className="hover:bg-gray-50 transition-colors cursor-pointer"
+                onClick={() => onRowClick?.(log)}
+              >
+                <TableCell>
+                  <div className="flex items-center gap-2">
+                    <Avatar className="h-7 w-7">
+                      <AvatarFallback className="text-xs">
+                        {getInitials(displayName)}
+                      </AvatarFallback>
+                    </Avatar>
+                    <span className="text-sm font-medium truncate">
+                      {displayName}
+                    </span>
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <Badge variant={getActionColor(log.queryMethod)}>
+                    {log.queryMethod.toUpperCase()}
+                  </Badge>
+                </TableCell>
+                <TableCell className="text-sm">
+                  {getEntityLabel(log.entityName)}
+                </TableCell>
+                <TableCell className="text-sm text-gray-600">
+                  {timestamp}
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/components/etrade/EtradeLicensePicker.tsx b/apps/edr-freight-web/backoffice/src/shared/components/etrade/EtradeLicensePicker.tsx
new file mode 100644
index 000000000..3976c829e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/components/etrade/EtradeLicensePicker.tsx
@@ -0,0 +1,72 @@
+import { useTranslation } from "react-i18next";
+import { Card } from "@/shared/common/ui/card";
+import type { EtradeBusinessLicenseOption } from "@/complaints/services/etradeTinService";
+
+interface EtradeLicensePickerProps {
+  organizationName?: string;
+  options: EtradeBusinessLicenseOption[];
+  selectedLicenseNumber: string;
+  onSelect: (licenseNumber: string) => void;
+}
+
+export function EtradeLicensePicker({
+  organizationName,
+  options,
+  selectedLicenseNumber,
+  onSelect,
+}: EtradeLicensePickerProps) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="space-y-4">
+      <div className="text-center">
+        <h2 className="text-lg font-semibold text-gray-900">
+          {t("registration.etrade.selectLicenseTitle")}
+        </h2>
+        <p className="mt-1 text-sm text-gray-600">
+          {t("registration.etrade.selectLicenseDescription")}
+        </p>
+        {organizationName ? (
+          <p className="mt-2 text-sm font-medium text-gray-900">
+            {organizationName}
+          </p>
+        ) : null}
+      </div>
+
+      <div className="max-h-[24rem] space-y-3 overflow-y-auto pr-1">
+        {options.map((option) => {
+          const isSelected = selectedLicenseNumber === option.licenseNumber;
+
+          return (
+            <Card
+              key={option.mainGuid}
+              className={`cursor-pointer border-2 p-4 transition-all ${
+                isSelected
+                  ? "border-primary bg-primary/5 ring-2 ring-primary/20"
+                  : "border-gray-200 hover:border-primary/40 bg-white"
+              }`}
+              onClick={() => onSelect(option.licenseNumber)}>
+              <div className="space-y-2 text-left">
+                <p className="font-semibold text-gray-900">{option.tradeName}</p>
+                <p className="text-sm text-gray-700">
+                  <span className="font-medium">
+                    {t("registration.etrade.licenseNumber")}:
+                  </span>{" "}
+                  <span className="font-mono">{option.licenseNumber}</span>
+                </p>
+                {option.activities.length > 0 ? (
+                  <p className="text-sm text-gray-600">
+                    <span className="font-medium">
+                      {t("registration.etrade.activity")}:
+                    </span>{" "}
+                    {option.activities.join("; ")}
+                  </p>
+                ) : null}
+              </div>
+            </Card>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/components/filters/CombinedFilterBar.tsx b/apps/edr-freight-web/backoffice/src/shared/components/filters/CombinedFilterBar.tsx
new file mode 100644
index 000000000..1ec063e4e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/components/filters/CombinedFilterBar.tsx
@@ -0,0 +1,369 @@
+import * as React from "react";
+import { Search, X } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import EthiopianDatePickerModal, {
+  convertEthiopianToGregorian,
+} from "@/shared/common/form/fields/AmharicDatePicker";
+import { Badge } from "@/shared/common/ui/badge";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { FilterParams, FilterValue } from "@/shared/utils/filterParams";
+import i18n from "@/i18n";
+
+export type CombinedFilterField =
+  | {
+      key: string;
+      label: string;
+      type: "text";
+    }
+  | {
+      key: string;
+      label: string;
+      type: "dateRange";
+      fromKey: string;
+      toKey: string;
+    };
+
+type CombinedFilterBarProps = {
+  fields: CombinedFilterField[];
+  filters: Partial<FilterParams>;
+  setFilter: (key: string, value: FilterValue) => void;
+  setFilters: (filters: Partial<FilterParams>) => void;
+  removeFilter: (key: string) => void;
+  removeFilters: (keys: string[]) => void;
+  onFilterChange?: () => void;
+  className?: string;
+  onLiveSearch?: (key: string, value: string) => void;
+};
+
+type ActiveFilterChip = {
+  key: string;
+  label: string;
+  value: string;
+  remove: () => void;
+};
+
+export function CombinedFilterBar({
+  fields,
+  filters,
+  setFilter,
+  setFilters,
+  removeFilter,
+  removeFilters,
+  onFilterChange,
+  className,
+  onLiveSearch,
+}: CombinedFilterBarProps) {
+  const { t } = useTranslation();
+  const [selectedFilterKey, setSelectedFilterKey] = React.useState(
+    fields[0]?.key ?? "",
+  );
+  const [inputValue, setInputValue] = React.useState("");
+  const [fromDate, setFromDate] = React.useState("");
+  const [toDate, setToDate] = React.useState("");
+  const [fromDateDisplay, setFromDateDisplay] = React.useState("");
+  const [toDateDisplay, setToDateDisplay] = React.useState("");
+  const [showFromPicker, setShowFromPicker] = React.useState(false);
+  const [showToPicker, setShowToPicker] = React.useState(false);
+  const lang = i18n.language;
+
+  const isFilterActive = React.useCallback(
+    (field: CombinedFilterField) => {
+      if (field.type === "dateRange") {
+        return Boolean(filters[field.fromKey] || filters[field.toKey]);
+      }
+
+      return Boolean(filters[field.key]);
+    },
+    [filters],
+  );
+
+  const availableFields = React.useMemo(
+    () => fields.filter((field) => !isFilterActive(field)),
+    [fields, isFilterActive],
+  );
+
+  const selectedFilter = React.useMemo(
+    () => availableFields.find((field) => field.key === selectedFilterKey),
+    [availableFields, selectedFilterKey],
+  );
+
+  React.useEffect(() => {
+    if (selectedFilter || availableFields.length === 0) return;
+
+    setSelectedFilterKey(availableFields[0].key);
+    clearDraftValues();
+  }, [availableFields, selectedFilter]);
+
+  React.useEffect(() => {
+    if (!selectedFilter || selectedFilter.type === "dateRange") return;
+
+    const value = inputValue.trim();
+
+    if (value.length < 2) {
+      onLiveSearch?.(selectedFilter.key, ""); // clear when too short
+      return;
+    }
+
+    const handler = setTimeout(() => {
+      onLiveSearch?.(selectedFilter.key, value);
+    }, 500);
+
+    return () => clearTimeout(handler);
+  }, [inputValue, selectedFilter]);
+  const clearDraftValues = () => {
+    setInputValue("");
+    setFromDate("");
+    setToDate("");
+    setFromDateDisplay("");
+    setToDateDisplay("");
+    onLiveSearch?.("", "");
+  };
+
+  const addFilter = React.useCallback(() => {
+    if (!selectedFilter) return;
+
+    if (selectedFilter.type === "dateRange") {
+      if (!fromDate && !toDate) return;
+
+      setFilters({
+        [selectedFilter.fromKey]: fromDate,
+        [selectedFilter.toKey]: toDate,
+      });
+      clearDraftValues();
+      onFilterChange?.();
+      return;
+    }
+
+    const value = inputValue.trim();
+    if (!value) return;
+
+    setFilter(selectedFilter.key, value);
+    clearDraftValues();
+    onFilterChange?.();
+  }, [
+    fromDate,
+    inputValue,
+    onFilterChange,
+    selectedFilter,
+    setFilter,
+    setFilters,
+    toDate,
+  ]);
+
+  const chips = React.useMemo<ActiveFilterChip[]>(
+    () =>
+      fields.reduce<ActiveFilterChip[]>((items, field) => {
+        if (field.type === "dateRange") {
+          const from = filters[field.fromKey];
+          const to = filters[field.toKey];
+          if (!from && !to) return items;
+
+          items.push({
+            key: field.key,
+            label: field.label,
+            value: [
+              from ? `${t("common.from", "From")}: ${from}` : "",
+              to ? `${t("common.to", "To")}: ${to}` : "",
+            ]
+              .filter(Boolean)
+              .join(" - "),
+            remove: () => removeFilters([field.fromKey, field.toKey]),
+          });
+          return items;
+        }
+
+        const value = filters[field.key];
+        if (!value) return items;
+
+        items.push({
+          key: field.key,
+          label: field.label,
+          value: String(value),
+          remove: () => removeFilter(field.key),
+        });
+        return items;
+      }, []),
+    [fields, filters, removeFilter, removeFilters, t],
+  );
+
+  const handleRemove = (remove: () => void) => {
+    remove();
+    onFilterChange?.();
+  };
+
+  return (
+    <div className={className ?? "flex w-full min-w-0 flex-col gap-2"}>
+      <div className="flex w-full min-w-0 flex-col flex-wrap items-stretch gap-2 sm:flex-row sm:items-center">
+        <Select
+          value={selectedFilter?.key ?? ""}
+          onValueChange={(value) => {
+            setSelectedFilterKey(value);
+            clearDraftValues();
+          }}
+          disabled={availableFields.length === 0}>
+          <SelectTrigger className="w-full sm:w-[200px]">
+            <SelectValue placeholder={t("userRecord.Filter by")} />
+          </SelectTrigger>
+          <SelectContent>
+            {availableFields.map((field) => (
+              <SelectItem key={field.key} value={field.key}>
+                {field.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        {selectedFilter?.type === "dateRange" ? (
+          <div className="flex flex-col sm:flex-row gap-2">
+            {lang.startsWith("en") ? (
+              <>
+                <label className="mt-2">From: </label>
+                <Input
+                  type="date"
+                  value={fromDate}
+                  onChange={(event) => setFromDate(event.target.value)}
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter") addFilter();
+                  }}
+                  className="w-[150px]"
+                />
+                <label className="mt-2">To: </label>
+                <Input
+                  type="date"
+                  value={toDate}
+                  onChange={(event) => setToDate(event.target.value)}
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter") addFilter();
+                  }}
+                  min={fromDate}
+                  className="w-[150px]"
+                />
+              </>
+            ) : (
+              <div className="flex flex-wrap items-center gap-3">
+                <div className="relative">
+                  <label className="font-medium mr-2">ከ:</label>
+                  <input
+                    type="text"
+                    value={fromDateDisplay}
+                    readOnly
+                    onClick={() => setShowFromPicker((prev) => !prev)}
+                    className="border border-gray-300 dark:border-gray-700 rounded-md px-2 py-1.5 w-40 bg-white dark:bg-gray-800 cursor-pointer"
+                    placeholder="ቀን ይምረጡ"
+                  />
+                  {showFromPicker && (
+                    <div className="absolute z-50 mt-1 bg-white dark:bg-gray-800 shadow-lg rounded-md p-2">
+                      <EthiopianDatePickerModal
+                        value={fromDate}
+                        onChange={(ethiopianDate: string) => {
+                          const gregorianDate =
+                            convertEthiopianToGregorian(ethiopianDate);
+                          const formatted = gregorianDate
+                            .toISOString()
+                            .split("T")[0];
+                          setFromDate(formatted);
+                          setFromDateDisplay(ethiopianDate);
+                          setShowFromPicker(false);
+                        }}
+                      />
+                    </div>
+                  )}
+                </div>
+
+                <div className="relative">
+                  <label className="font-medium mr-2">እስከ:</label>
+                  <input
+                    type="text"
+                    value={toDateDisplay}
+                    readOnly
+                    onClick={() => setShowToPicker((prev) => !prev)}
+                    className="border border-gray-300 dark:border-gray-700 rounded-md px-2 py-1.5 w-40 bg-white dark:bg-gray-800 cursor-pointer"
+                    placeholder="ቀን ይምረጡ"
+                  />
+                  {showToPicker && (
+                    <div className="absolute z-50 mt-1 bg-white dark:bg-gray-800 shadow-lg rounded-md p-2">
+                      <EthiopianDatePickerModal
+                        value={toDate}
+                        onChange={(ethiopianDate: string) => {
+                          const gregorianDate =
+                            convertEthiopianToGregorian(ethiopianDate);
+                          const formatted = gregorianDate
+                            .toISOString()
+                            .split("T")[0];
+                          setToDate(formatted);
+                          setToDateDisplay(ethiopianDate);
+                          setShowToPicker(false);
+                        }}
+                      />
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="relative w-full sm:w-[200px]">
+            <Input
+              type="text"
+              className="pl-8"
+              placeholder={`${t("userRecord.Search")} ${
+                selectedFilter?.label.toLowerCase() ?? ""
+              }`}
+              value={inputValue}
+              onChange={(event) => setInputValue(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") addFilter();
+              }}
+              disabled={!selectedFilter}
+            />
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500" />
+          </div>
+        )}
+
+        <Button
+          type="button"
+          variant="outline"
+          className="w-full shrink-0 sm:w-auto"
+          onClick={addFilter}
+          disabled={
+            !selectedFilter ||
+            (selectedFilter.type === "dateRange"
+              ? !fromDate && !toDate
+              : !inputValue.trim())
+          }>
+          {t("common.add", "Add Filter")}
+        </Button>
+      </div>
+
+      {chips.length > 0 && (
+        <div className="flex flex-wrap items-center gap-2">
+          {chips.map((filter) => (
+            <Badge
+              key={filter.key}
+              variant="outline"
+              className="flex items-center gap-1 rounded-md px-2 py-1 text-sm">
+              <span className="font-medium">{filter.label}:</span>
+              <span>{filter.value}</span>
+              <button
+                type="button"
+                onClick={() => handleRemove(filter.remove)}
+                className="ml-1 rounded-sm p-0.5 hover:bg-gray-100 dark:hover:bg-gray-800"
+                aria-label={`${t("common.remove", "Remove")} ${filter.label}`}>
+                <X className="h-3.5 w-3.5" />
+              </button>
+            </Badge>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/components/login/ChangePassword.tsx b/apps/edr-freight-web/backoffice/src/shared/components/login/ChangePassword.tsx
new file mode 100644
index 000000000..14b393cfd
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/components/login/ChangePassword.tsx
@@ -0,0 +1,240 @@
+import { useState } from "react";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import { Lock, ArrowLeft, RefreshCw, Eye, EyeOff } from "lucide-react";
+import { toast } from "sonner";
+import { useNavigate } from "react-router-dom";
+import { changePassword } from "@/shared/services/authService";
+import Cookies from "js-cookie";
+import { useAuthUser } from "@/record-management/hooks/useAuthUser";
+import { t } from "i18next";
+
+export const ResetPassword = () => {
+  const navigate = useNavigate();
+  const [newPassword, setNewPassword] = useState("");
+  const [oldPassword, setOldPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const { logout } = useAuthUser();
+  const handleLogout = () => {
+    logout();
+  };
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+
+    // Validate old password
+    if (!oldPassword) {
+      setError(t("msg.currentPasswordRequired"));
+      return;
+    }
+
+    // Validate new password
+    if (!newPassword) {
+      setError(t("msg.newPasswordRequired"));
+      return;
+    }
+
+    if (newPassword.length < 8) {
+      setError(t("msg.passwordMinLength"));
+      return;
+    }
+
+    // Check if new password is same as old password
+    if (newPassword === oldPassword) {
+      setError(t("msg.passwordMustBeDifferent"));
+      return;
+    }
+
+    // Validate confirm password
+    if (!confirmPassword) {
+      setError(t("msg.confirmPasswordRequired"));
+      return;
+    }
+
+    if (newPassword !== confirmPassword) {
+      setError(t("msg.passwordMismatch"));
+      return;
+    }
+
+    // Check for password complexity
+    const hasUpperCase = /[A-Z]/.test(newPassword);
+    const hasLowerCase = /[a-z]/.test(newPassword);
+    const hasNumbers = /\d/.test(newPassword);
+    const hasSpecialChar = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(newPassword);
+
+    const complexityErrors = [];
+    if (!hasUpperCase) complexityErrors.push(t("msg.uppercaseLetter"));
+    if (!hasLowerCase) complexityErrors.push(t("msg.lowercaseLetter"));
+    if (!hasNumbers) complexityErrors.push(t("msg.number"));
+    if (!hasSpecialChar) complexityErrors.push(t("msg.specialCharacter"));
+
+    if (complexityErrors.length > 0) {
+      setError(t("msg.passwordComplexity") + " " + complexityErrors.join(", "));
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      await changePassword({
+        oldPassword,
+        newPassword,
+        confirmPassword,
+      });
+
+      toast.success(t("msg.successChange"), {
+        description: "Your password has been changed successfully",
+      });
+
+      // Redirect to login page after successful reset
+      setTimeout(handleLogout, 1200);
+    } catch (error: any) {
+      const message = error?.message || t("msg.failedChange");
+      setError(message);
+      toast.error(t("msg.failedChange"), {
+        description: message,
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div
+      className="flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4"
+      style={{ height: "100vh" }}
+    >
+      <div className="w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8">
+        <div className="mb-8 text-center">
+          <img
+            src="/assets/smart-office-logo.svg"
+            alt="Smart Office Logo"
+            className="h-10 mb-6 mx-auto"
+          />
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">
+            {t("change_password")}
+          </h1>
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            {t("msg.changePasswordMsg")}
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div className="space-y-4">
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <Lock className="h-5 w-5 text-gray-400 dark:text-gray-500" />
+              </div>
+              <Input
+                type={showPassword ? "text" : "password"}
+                placeholder={t("msg.oldPassword")}
+                className="h-10 rounded-md border dark:border-gray-600 px-4 text-sm ps-10 dark:bg-gray-700 dark:text-gray-100"
+                value={oldPassword}
+                onChange={(e) => setOldPassword(e.target.value)}
+                required
+              />
+              <div
+                className="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer"
+                onClick={() => setShowPassword(!showPassword)}
+              >
+                {showPassword ? (
+                  <EyeOff className="h-4 w-4 text-gray-400 dark:text-gray-500" />
+                ) : (
+                  <Eye className="h-4 w-4 text-gray-400 dark:text-gray-500" />
+                )}
+              </div>
+            </div>
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <Lock className="h-5 w-5 text-gray-400 dark:text-gray-500" />
+              </div>
+              <Input
+                type={showPassword ? "text" : "password"}
+                placeholder={t("msg.newPassword")}
+                className="h-10 rounded-md border dark:border-gray-600 px-4 text-sm ps-10 dark:bg-gray-700 dark:text-gray-100"
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                required
+              />
+              <div
+                className="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer"
+                onClick={() => setShowPassword(!showPassword)}
+              >
+                {showPassword ? (
+                  <EyeOff className="h-4 w-4 text-gray-400 dark:text-gray-500" />
+                ) : (
+                  <Eye className="h-4 w-4 text-gray-400 dark:text-gray-500" />
+                )}
+              </div>
+            </div>
+
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <Lock className="h-5 w-5 text-gray-400 dark:text-gray-500" />
+              </div>
+              <Input
+                type={showConfirmPassword ? "text" : "password"}
+                placeholder={t("msg.confirmNewPassword")}
+                className="h-10 rounded-md border dark:border-gray-600 px-4 text-sm ps-10 dark:bg-gray-700 dark:text-gray-100"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                required
+              />
+              <div
+                className="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer"
+                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+              >
+                {showConfirmPassword ? (
+                  <EyeOff className="h-4 w-4 text-gray-400 dark:text-gray-500" />
+                ) : (
+                  <Eye className="h-4 w-4 text-gray-400 dark:text-gray-500" />
+                )}
+              </div>
+            </div>
+
+            {error && (
+              <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md p-3 md:p-4">
+                <p className="text-sm text-red-700 dark:text-red-400 font-medium">
+                  {error}
+                </p>
+              </div>
+            )}
+          </div>
+
+          <div className="flex flex-col gap-4">
+            <Button
+              type="submit"
+              className="w-full h-10 bg-primary hover:bg-primary-300 text-white text-sm"
+              disabled={loading}
+            >
+              {loading ? (
+                <span className="flex items-center justify-center">
+                  <RefreshCw className="animate-spin h-5 w-5 mr-2" />
+                  changing...
+                </span>
+              ) : (
+                t("change_password")
+              )}
+            </Button>
+
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full h-10 text-sm"
+              onClick={() => navigate(-1)}
+            >
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              {t("userRecord.Back")}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default ResetPassword;
diff --git a/apps/edr-freight-web/backoffice/src/shared/components/login/ForgotPassword.tsx b/apps/edr-freight-web/backoffice/src/shared/components/login/ForgotPassword.tsx
new file mode 100644
index 000000000..81d85be20
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/components/login/ForgotPassword.tsx
@@ -0,0 +1,174 @@
+"use client";
+
+import type React from "react";
+import { useState } from "react";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import { Phone, ArrowLeft, RefreshCw, Mail, Lock, Home } from "lucide-react";
+import { toast } from "sonner";
+import { useNavigate } from "react-router-dom";
+import { isValidEthiopianPhone } from "@/record-management/common/editor/Utils";
+import { requestForgotPassword } from "@/shared/services/authService";
+import { useTranslation } from "react-i18next";
+
+export const ForgotPassword = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [identifier, setIdentifier] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+
+    let processedIdentifier = identifier;
+
+    if (!isValidEthiopianPhone(processedIdentifier)) {
+      setError(t("forgotpassword.invalidphone"));
+      return;
+    }
+
+    if (processedIdentifier.startsWith("0")) {
+      processedIdentifier = "+251" + processedIdentifier.slice(1);
+    }
+
+    setLoading(true);
+
+    try {
+      await requestForgotPassword(processedIdentifier);
+      toast.success(t("forgotpassword.success"), {
+        description: t("forgotpassword.successdesc"),
+      });
+      setTimeout(() => navigate("/"), 3000);
+    } catch (error: any) {
+      const message = error?.message || t("forgotpassword.fail");
+      setError(message);
+      toast.error(t("forgotpassword.fail"), { description: message });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-cyan-50 via-white to-primary-50 relative overflow-hidden">
+      <div className="absolute top-0 right-0 w-96 h-96 bg-cyan-100/30 rounded-full blur-3xl" />
+      <div className="absolute bottom-0 left-0 w-96 h-96 bg-primary-100/30 rounded-full blur-3xl" />
+
+      <button
+        onClick={() => navigate("/")}
+        className="absolute top-6 left-6 z-10 flex items-center gap-2 px-4 py-2 bg-white/80 backdrop-blur-sm hover:bg-white rounded-full shadow-md hover:shadow-lg transition-all duration-300 group"
+      >
+        <Home className="w-4 h-4 text-primary group-hover:scale-110 transition-transform" />
+        <span className="text-sm font-medium text-gray-700">
+          {t("forgotpassword.home")}
+        </span>
+      </button>
+
+      <div className="relative min-h-screen flex items-center justify-center p-4">
+        <div className="w-full max-w-md">
+          <div className="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
+            <div className="bg-gradient-to-r from-primary to-primary-500 p-8 text-center relative">
+              <div className="absolute inset-0 bg-white/5" />
+              <div className="relative">
+                <div className="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center mx-auto mb-4">
+                  <Lock className="w-8 h-8 text-white" />
+                </div>
+                <h1 className="text-2xl font-bold text-white mb-2">
+                  {t("forgotpassword.title")}
+                </h1>
+                <p className="text-cyan-50 text-sm">
+                  {t("forgotpassword.subtitle")}
+                </p>
+              </div>
+            </div>
+
+            <div className="p-8">
+              <form onSubmit={handleSubmit} className="space-y-6">
+                <div className="space-y-2">
+                  <label className="text-sm font-medium text-gray-700 flex items-center gap-2">
+                    <Phone className="w-4 h-4 text-primary" />
+                    {t("forgotpassword.phone")}
+                  </label>
+                  <div className="relative">
+                    <Input
+                      type="tel"
+                      placeholder={t("forgotpassword.phoneplaceholder")}
+                      className="h-12 rounded-lg border-gray-200 px-4 text-sm focus:border-primary focus:ring-primary transition-all"
+                      value={identifier}
+                      onChange={(e) => {
+                        setIdentifier(e.target.value);
+                        setError("");
+                      }}
+                      required
+                    />
+                  </div>
+                  {error && (
+                    <div className="flex items-start gap-2 p-3 bg-red-50 border border-red-100 rounded-lg">
+                      <div className="w-1 h-1 bg-red-500 rounded-full mt-1.5" />
+                      <p className="text-sm text-red-600 flex-1">{error}</p>
+                    </div>
+                  )}
+                </div>
+
+                <div className="flex items-start gap-3 p-4 bg-cyan-50 border border-cyan-100 rounded-lg">
+                  <Mail className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
+                  <div className="flex-1">
+                    <p className="text-sm text-gray-700 font-medium mb-1">
+                      {t("forgotpassword.checkphone")}
+                    </p>
+                    <p className="text-xs text-gray-600">
+                      {t("forgotpassword.checkdesc")}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="space-y-3">
+                  <Button
+                    type="submit"
+                    className="w-full h-12 bg-primary hover:bg-primary-500 text-white text-sm font-medium rounded-lg shadow-md hover:shadow-lg transition-all duration-300"
+                    disabled={loading}
+                  >
+                    {loading ? (
+                      <span className="flex items-center justify-center gap-2">
+                        <RefreshCw className="animate-spin h-5 w-5" />
+                        {t("forgotpassword.sending")}
+                      </span>
+                    ) : (
+                      <span className="flex items-center justify-center gap-2">
+                        <Mail className="h-5 w-5" />
+                        {t("forgotpassword.sendresetlink")}
+                      </span>
+                    )}
+                  </Button>
+
+                  <Button
+                    type="button"
+                    variant="outline"
+                    className="w-full h-12 text-sm font-medium border-gray-200 hover:bg-gray-50 rounded-lg transition-all duration-300 bg-transparent"
+                    onClick={() => navigate("/login")}
+                  >
+                    <ArrowLeft className="h-4 w-4 mr-2" />
+                    {t("forgotpassword.backtologin")}
+                  </Button>
+                </div>
+              </form>
+            </div>
+          </div>
+
+          <p className="text-center text-sm text-gray-500 mt-6">
+            {t("forgotpassword.remember")}{" "}
+            <button
+              onClick={() => navigate("/login")}
+              className="text-primary hover:text-primary-500 font-medium transition-colors"
+            >
+              {t("forgotpassword.signin")}
+            </button>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ForgotPassword;
diff --git a/apps/edr-freight-web/backoffice/src/shared/components/login/Login.tsx b/apps/edr-freight-web/backoffice/src/shared/components/login/Login.tsx
new file mode 100644
index 000000000..459b669d1
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/components/login/Login.tsx
@@ -0,0 +1,349 @@
+"use client";
+
+import type React from "react";
+
+import { useEffect, useState } from "react";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import {
+  ArrowLeft,
+  Eye,
+  EyeOff,
+  Lock,
+  Mail,
+  Phone,
+  User,
+  Moon,
+  Sun,
+} from "lucide-react";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { useTenantConfig } from "@/layout/components/TenantConfig";
+import {
+  isValidEmail,
+  isValidEthiopianPhoneNum,
+} from "@/record-management/common/editor/Utils";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { useAuth } from "@/shared/context/AuthContext";
+import OTPModal from "./OTPModal";
+import { useDarkMode } from "@/shared/hooks/useDarkMode";
+import { getRememberMePreference } from "@/shared/utils/authPersistence";
+
+export const Login = () => {
+  const { login: authLogin, isLoggingIn } = useAuthUser();
+  const { config } = useTenantConfig();
+  const { isDarkMode, toggleDarkMode } = useDarkMode();
+  const detectLoginMethod = (value: string): "email" | "phone" | "username" => {
+    if (value.includes("@") && value.includes(".com")) return "email";
+    if (/^\+?\d+$/.test(value)) return "phone";
+    return "username";
+  };
+  const [otpVerify, setOtpVerify] = useState("");
+  const { showOtpModal, setShowOtpModal, setRememberMePreference } = useAuth();
+
+  const [identifier, setIdentifier] = useState("");
+  const [password, setPassword] = useState("");
+  const [passwordType, setPasswordType] = useState("password");
+  const [phoneError, setPhoneError] = useState("");
+  const [rememberMe, setRememberMe] = useState(false);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    const savedRememberMe = getRememberMePreference();
+    setRememberMe(savedRememberMe);
+    setRememberMePreference(savedRememberMe);
+  }, [setRememberMePreference]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setPhoneError("");
+    try {
+      let processedIdentifier = identifier;
+      const loginMethod = detectLoginMethod(identifier);
+      if (loginMethod === "phone") {
+        if (!isValidEthiopianPhoneNum(processedIdentifier)) {
+          setPhoneError(t("auth.err"));
+          return;
+        }
+
+        if (processedIdentifier.startsWith("0")) {
+          processedIdentifier = "+251" + processedIdentifier.slice(1);
+        }
+      } else if (loginMethod === "email") {
+        if (!isValidEmail(processedIdentifier)) {
+          setPhoneError(t("auth.invalidEmail"));
+          return;
+        }
+      }
+      // The backend identifies users via the email field regardless of login method
+      const payload: { email: string; password: string } = {
+        email: processedIdentifier,
+        password,
+      };
+      setOtpVerify(processedIdentifier);
+      setRememberMePreference(rememberMe);
+      authLogin({ payload, rememberMeValue: rememberMe });
+    } catch (error) {
+      console.error("Login failed:", error);
+    }
+  };
+
+  const getInputIcon = () => {
+    const method = detectLoginMethod(identifier);
+    switch (method) {
+      case "email":
+        return (
+          <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-500" />
+        );
+      case "phone":
+        return (
+          <Phone className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-500" />
+        );
+      case "username":
+        return (
+          <User className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-500" />
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <>
+      <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 p-4 md:p-6 lg:p-8 flex items-center justify-center">
+        <Link
+          to="/"
+          className="fixed top-4 left-4 md:top-6 md:left-6 z-50 flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-800 rounded-full shadow-md hover:shadow-lg transition-all duration-300 hover:scale-105 text-gray-700 dark:text-gray-200 hover:text-primary group"
+        >
+          <ArrowLeft className="w-5 h-5 text-gray-600 dark:text-gray-400 transition-transform group-hover:-translate-x-1" />
+          <span className="text-sm font-medium hidden sm:inline">
+            {t("Back to Home")}
+          </span>
+        </Link>
+
+        {/* Dark Mode Toggle */}
+        <button
+          onClick={toggleDarkMode}
+          className="fixed top-4 right-4 md:top-6 md:right-6 z-50 p-2 rounded-full bg-white dark:bg-gray-800 shadow-md hover:shadow-lg transition-all duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700"
+          title={isDarkMode ? "Switch to light mode" : "Switch to dark mode"}
+        >
+          {isDarkMode ? (
+            <Sun className="w-5 h-5 text-yellow-500" />
+          ) : (
+            <Moon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
+          )}
+        </button>
+
+        <div className="w-full max-w-6xl bg-white dark:bg-gray-800 rounded-2xl shadow-2xl overflow-hidden flex flex-col lg:flex-row">
+          {/* Left Panel - Login Form */}
+          <div className="lg:w-1/2 w-full p-6 sm:p-8 md:p-10 lg:p-12 xl:p-16 flex flex-col justify-center">
+            <div className="mb-8">
+              <img
+                src={config.logo || "/assets/smart-office-logo.svg"}
+                alt="Smart Office Logo"
+                className="h-10 md:h-12 mb-8"
+              />
+              <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-3">
+                {t("auth.welcomeBack")}
+              </h1>
+              <p className="text-base text-gray-500 dark:text-gray-400">
+                {t("auth.enterCredentials")}
+              </p>
+            </div>
+
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div className="space-y-4">
+                {/* Identifier Input */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    {t("auth.email") +
+                      " / " +
+                      t("auth.phoneNumber") +
+                      " / " +
+                      t("auth.username")}
+                  </label>
+                  <div className="relative">
+                    {getInputIcon()}
+                    <Input
+                      type="text"
+                      placeholder={
+                        t("auth.email") +
+                        " / " +
+                        t("auth.phoneNumber") +
+                        " / " +
+                        t("auth.username")
+                      }
+                      className="h-12 rounded-lg border-2 border-gray-200 dark:border-gray-600 px-4 text-sm pl-11 pr-4 focus:border-primary transition-colors text-gray-900 dark:text-white bg-white dark:bg-gray-700 placeholder-gray-500 dark:placeholder-gray-400"
+                      value={identifier}
+                      onChange={(e) => {
+                        setIdentifier(e.target.value.trim());
+                        if (phoneError) setPhoneError("");
+                      }}
+                      required
+                    />
+                  </div>
+                  {phoneError && (
+                    <p className="text-red-500 dark:text-red-400 text-sm mt-2 flex items-center gap-1">
+                      <span className="w-1 h-1 bg-red-500 dark:bg-red-400 rounded-full"></span>
+                      {phoneError}
+                    </p>
+                  )}
+                </div>
+
+                {/* Password Input */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    {t("auth.password")}
+                  </label>
+                  <div className="relative">
+                    <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-500" />
+                    <Input
+                      type={passwordType}
+                      placeholder={t("auth.password")}
+                      className="h-12 rounded-lg border-2 border-gray-200 dark:border-gray-600 px-4 text-sm pl-11 pr-4 focus:border-primary transition-colors text-gray-900 dark:text-white bg-white dark:bg-gray-700 placeholder-gray-500 dark:placeholder-gray-400"
+                      value={password}
+                      onChange={(e) => setPassword(e.target.value)}
+                      required
+                    />
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      onClick={() =>
+                        setPasswordType(
+                          passwordType === "password" ? "text" : "password",
+                        )
+                      }
+                      className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
+                    >
+                      {passwordType === "password" ? (
+                        <Eye className="w-5 h-5" />
+                      ) : (
+                        <EyeOff className="w-5 h-5" />
+                      )}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+
+              {/* Remember Me & Forgot Password */}
+              <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
+                <label className="flex items-center gap-2 cursor-pointer group">
+                  <input
+                    type="checkbox"
+                    className="w-4 h-4 accent-primary cursor-pointer bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-500"
+                    checked={rememberMe}
+                    onChange={(e) => setRememberMe(e.target.checked)}
+                  />
+                  <span className="text-sm text-gray-600 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-200 transition-colors">
+                    {t("auth.rememberMe")}
+                  </span>
+                </label>
+                <Link
+                  to="/forgot-password"
+                  className="text-sm text-primary hover:text-primary-700 font-medium transition-colors"
+                >
+                  {t("auth.forgotPassword")}
+                </Link>
+              </div>
+
+              {/* Submit Button */}
+              <Button
+                type="submit"
+                className="w-full h-12 bg-primary hover:bg-primary-700 text-white text-base font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
+                disabled={isLoggingIn}
+              >
+                {isLoggingIn ? (
+                  <span className="flex items-center gap-2">
+                    <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
+                      <circle
+                        className="opacity-25"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        strokeWidth="4"
+                        fill="none"
+                      />
+                      <path
+                        className="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                      />
+                    </svg>
+                    {t("auth.loggingIn")}
+                  </span>
+                ) : (
+                  t("auth.login")
+                )}
+              </Button>
+
+              {/* Sign Up Link */}
+              <div className="text-center pt-2 space-y-2">
+                <div>
+                  <span className="text-sm text-gray-600 dark:text-gray-400">
+                    {t("registration.auth.externalUserPrompt")}{" "}
+                  </span>
+                  <Link
+                    to="/external-portal/signin"
+                    className="text-sm text-primary hover:text-primary-700 font-medium transition-colors"
+                  >
+                    {t("registration.auth.signInWithProvider")}
+                  </Link>
+                </div>
+                <div>
+                  <span className="text-sm text-gray-600 dark:text-gray-400">
+                    {t("Don't have an account?")}{" "}
+                  </span>
+                  <Link
+                    to="/external-portal/signup"
+                    className="text-sm text-primary hover:text-primary-700 font-medium transition-colors"
+                  >
+                    {t("Sign Up")}
+                  </Link>
+                </div>
+              </div>
+            </form>
+          </div>
+
+          {/* Right Panel - Marketing Content */}
+          <div className="hidden lg:flex lg:w-1/2 bg-gradient-to-br from-primary to-primary-700 text-white flex-col justify-center p-10 xl:p-16 relative overflow-hidden">
+            <div className="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full blur-3xl"></div>
+            <div className="absolute bottom-0 left-0 w-96 h-96 bg-white/5 rounded-full blur-3xl"></div>
+
+            <div className="relative z-10">
+              <h2 className="text-3xl xl:text-4xl font-bold mb-4 leading-tight">
+                {t("auth.welcomeHeadline")} <br /> {t("auth.paperlessOffice")}
+              </h2>
+              <p className="text-base xl:text-lg mb-8 text-white/90 leading-relaxed">
+                {t("auth.welcomeSubtext")}
+              </p>
+
+              {/* Dashboard Preview */}
+              <div className="relative w-full max-w-lg mx-auto mt-12">
+                <div className="relative rounded-2xl overflow-hidden shadow-2xl border-4 border-white/20">
+                  <img
+                    src={
+                      config.dashboardPreviewImage ||
+                      "/assets/MainDashboard.png"
+                    }
+                    alt="Main Dashboard"
+                    className="w-full"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {showOtpModal && (
+        <OTPModal
+          isOpen={true}
+          onClose={() => setShowOtpModal(false)}
+          identifier={otpVerify}
+          identifierType={detectLoginMethod(otpVerify)}
+        />
+      )}
+    </>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/components/login/OTPModal.tsx b/apps/edr-freight-web/backoffice/src/shared/components/login/OTPModal.tsx
new file mode 100644
index 000000000..fdc32c2bb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/components/login/OTPModal.tsx
@@ -0,0 +1,286 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import {
+  isValidEmail,
+  isValidEthiopianPhoneNum,
+} from "@/record-management/common/editor/Utils";
+
+interface OTPModalProps {
+  isOpen: boolean;
+  identifier: string; // previously email
+  identifierType: "email" | "phone" | "username"; // new
+  onClose: () => void;
+  isLoading?: boolean;
+  title?: string;
+  description?: string;
+  length?: number;
+}
+
+const OTPModal = ({
+  isOpen,
+  onClose,
+  isLoading = false,
+  title,
+  description,
+  length = 6,
+  identifier,
+  identifierType,
+}: OTPModalProps) => {
+  const { t } = useTranslation();
+  const [otp, setOtp] = useState<string[]>(Array(length).fill(""));
+
+  const inputRefs = useRef<Array<HTMLInputElement | null>>([]);
+
+  const { verifyMFA } = useAuthUser();
+  // Default translations
+  const modalTitle = title || t("otp.verifyIdentity") || "Verify Your Identity";
+  const modalDescription =
+    description ||
+    t("otp.enterCodeSent") ||
+    "Enter the verification code sent to your email";
+  const verifyText = t("common.verify") || "Verify";
+  const cancelText = t("common.cancel") || "Cancel";
+
+  const [phoneError, setPhoneError] = useState("");
+
+  useEffect(() => {
+    inputRefs.current[0]?.focus();
+  }, []);
+
+  useEffect(() => {
+    if (isOpen) {
+      // Reset OTP when modal opens
+      setOtp(Array(length).fill(""));
+      // Focus first input
+      setTimeout(() => {
+        inputRefs.current[0]?.focus();
+      }, 100);
+    }
+  }, [isOpen, length]);
+
+  const handleChange = (index: number, value: string) => {
+    if (!/^[a-zA-Z0-9]?$/.test(value)) return; // Only allow numbers
+
+    const newOtp = [...otp];
+    newOtp[index] = value;
+    setOtp(newOtp);
+
+    // Auto-focus next input
+    if (value && index < length - 1) {
+      inputRefs.current[index + 1]?.focus();
+    }
+
+    // Auto-submit if all fields are filled
+    if (newOtp.every((digit) => digit !== "") && index === length - 1) {
+      handleVerify(newOtp.join(""));
+    }
+  };
+
+  const handleKeyDown = (
+    index: number,
+    e: React.KeyboardEvent<HTMLInputElement>
+  ) => {
+    if (e.key === "Backspace" && !otp[index] && index > 0) {
+      // Move to previous input on backspace
+      inputRefs.current[index - 1]?.focus();
+    }
+  };
+
+  const handlePaste = (e: React.ClipboardEvent) => {
+    e.preventDefault();
+    const pastedData = e.clipboardData.getData("text").slice(0, length);
+    const pastedArray = pastedData
+      .split("")
+      .filter((char) => /^\d?$/.test(char));
+
+    if (pastedArray.length > 0) {
+      const newOtp = [...otp];
+      pastedArray.forEach((char, index) => {
+        if (index < length) {
+          newOtp[index] = char;
+        }
+      });
+      setOtp(newOtp);
+
+      // Focus next empty input or last input
+      const nextEmptyIndex = newOtp.findIndex((digit) => digit === "");
+      const focusIndex =
+        nextEmptyIndex === -1
+          ? length - 1
+          : Math.min(nextEmptyIndex, length - 1);
+      inputRefs.current[focusIndex]?.focus();
+    }
+  };
+
+  const handleVerify = (verificationCode: string) => {
+    // Make sure identifier is defined and valid based on login method
+    let processedIdentifier = identifier;
+    if (identifierType === "phone") {
+      if (!isValidEthiopianPhoneNum(processedIdentifier)) {
+        setPhoneError(t("auth.err"));
+        return;
+      }
+      // Convert to international format if starts with 0
+      if (processedIdentifier.startsWith("0")) {
+        processedIdentifier = "+251" + processedIdentifier.slice(1);
+      }
+    } else if (identifierType === "email") {
+      if (!isValidEmail(processedIdentifier)) {
+        setPhoneError("Please enter a valid email address");
+        return;
+      }
+    }
+
+    // Payload always uses 'email' key
+    const payload = {
+      email: processedIdentifier,
+      otp: verificationCode,
+    };
+
+    verifyMFA(payload);
+  };
+
+  const clearOtp = () => {
+    setOtp(Array(length).fill(""));
+    inputRefs.current[0]?.focus();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm dark:bg-black/80">
+      <Card className="w-96 shadow-2xl border-0 animate-in fade-in-90 zoom-in-90 bg-white dark:bg-gray-800">
+        <CardHeader className="pb-4">
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded-lg bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400">
+              <svg
+                className="w-5 h-5"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
+                />
+              </svg>
+            </div>
+            <div>
+              <CardTitle className="text-xl dark:text-white">{modalTitle}</CardTitle>
+              <CardDescription className="dark:text-gray-400">{modalDescription}</CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+
+        <CardContent className="space-y-6">
+          {/* OTP Input Fields */}
+          <div className="flex justify-center gap-2">
+            {otp.map((digit, index) => (
+              <Input
+                key={index}
+                ref={(el: HTMLInputElement | null) => {
+                  if (el) inputRefs.current[index] = el; // assign only if not null
+                }}
+                type="text"
+                inputMode="numeric"
+                pattern="[0-9]*"
+                maxLength={1}
+                value={digit}
+                onChange={(e) => handleChange(index, e.target.value)}
+                onKeyDown={(e) => handleKeyDown(index, e)}
+                onPaste={handlePaste}
+                className="w-12 h-12 text-center text-lg font-semibold focus:ring-2 focus:ring-primary-500 border-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white border-gray-200 dark:border-gray-600 dark:focus:border-primary-500"
+                disabled={isLoading}
+              />
+            ))}
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex gap-3 pt-2">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={onClose}
+              disabled={isLoading}
+              className="flex-1 hover:bg-primary-100 dark:hover:bg-primary-900/30 transition-all duration-200 border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300">
+              {cancelText}
+            </Button>
+            <Button
+              type="button"
+              onClick={() => handleVerify(otp.join(""))}
+              disabled={isLoading || otp.join("").length !== length}
+              className="flex-1 bg-gradient-to-r from-primary-600 to-primary-700 hover:from-primary-700 hover:to-primary-800 text-white shadow-lg hover:shadow-xl transition-all duration-200 disabled:opacity-50">
+              {isLoading ? (
+                <div className="flex items-center gap-2">
+                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                  {t("common.verifying") || "Verifying..."}
+                </div>
+              ) : (
+                verifyText
+              )}
+            </Button>
+          </div>
+
+          {/* Helper Actions */}
+          <div className="flex justify-between items-center text-sm">
+            <button
+              type="button"
+              onClick={clearOtp}
+              className="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-medium transition-colors disabled:opacity-50"
+              disabled={isLoading}>
+              {t("otp.clearCode") || "Clear Code"}
+            </button>
+
+            <button
+              type="button"
+              className="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-medium transition-colors disabled:opacity-50"
+              disabled={isLoading}>
+              {t("otp.resendCode") || "Resend Code"}
+            </button>
+          </div>
+          {phoneError && (
+            <p className="text-red-500 dark:text-red-400 text-sm mt-2 flex items-center gap-1">
+              <span className="w-1 h-1 bg-red-500 dark:bg-red-400 rounded-full"></span>
+              {phoneError}
+            </p>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Loading Overlay */}
+      {isLoading && (
+        <div className="absolute inset-0 bg-background/50 backdrop-blur-sm rounded-lg flex items-center justify-center">
+          <Card className="w-80 shadow-2xl border-0 bg-white dark:bg-gray-800">
+            <CardContent className="p-6 flex flex-col items-center gap-4">
+              <div className="flex items-center gap-3">
+                <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary-600"></div>
+                <span className="text-lg font-semibold text-primary-800 dark:text-primary-300">
+                  {t("common.verifying") || "Verifying..."}
+                </span>
+              </div>
+              <p className="text-muted-foreground dark:text-gray-400 text-center text-sm">
+                {t("otp.verifyingCode") ||
+                  "Please wait while we verify your code"}
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default OTPModal;
diff --git a/apps/edr-freight-web/backoffice/src/shared/components/login/ResetPassword.tsx b/apps/edr-freight-web/backoffice/src/shared/components/login/ResetPassword.tsx
new file mode 100644
index 000000000..2650b16ca
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/components/login/ResetPassword.tsx
@@ -0,0 +1,250 @@
+import { useState, useEffect } from "react";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import { Lock, ArrowLeft, RefreshCw, Eye, EyeOff } from "lucide-react";
+import { toast } from "sonner";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { setPassword } from "@/shared/services/authService";
+import { useTranslation } from "react-i18next";
+
+export const ResetPassword = () => {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const { t } = useTranslation();
+
+  // Get params from URL
+  const email = searchParams.get("email") || "";
+  const verificationCode = searchParams.get("verificationCode") || "";
+  const userId = searchParams.get("userId") || "";
+
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+
+  // Check if we have all required parameters from the URL
+  useEffect(() => {
+    if (!userId && !email) {
+      setError(
+        "Missing required parameters in the reset link. Please request a new password reset link.",
+      );
+    } else if (!verificationCode) {
+      setError(
+        "Missing verification code in the reset link. Please request a new password reset link.",
+      );
+    } else {
+      setError("");
+    }
+  }, []);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+
+    // Validate passwords with specific error messages
+    if (!newPassword) {
+      setError(t("msg.newPasswordRequired"));
+      return;
+    }
+
+    if (newPassword.length < 8) {
+      setError(t("msg.passwordMinLength"));
+      return;
+    }
+
+    if (!confirmPassword) {
+      setError(t("msg.confirmPasswordRequired"));
+      return;
+    }
+
+    if (newPassword !== confirmPassword) {
+      setError(t("msg.passwordMismatch"));
+      return;
+    }
+
+    // Check for password complexity (optional but recommended)
+    const hasUpperCase = /[A-Z]/.test(newPassword);
+    const hasLowerCase = /[a-z]/.test(newPassword);
+    const hasNumbers = /\d/.test(newPassword);
+    const hasSpecialChar = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(newPassword);
+
+    const complexityErrors = [];
+    if (!hasUpperCase) complexityErrors.push(t("msg.uppercaseLetter"));
+    if (!hasLowerCase) complexityErrors.push(t("msg.lowercaseLetter"));
+    if (!hasNumbers) complexityErrors.push(t("msg.number"));
+    if (!hasSpecialChar) complexityErrors.push(t("msg.specialCharacter"));
+
+    if (complexityErrors.length > 0) {
+      setError(t("msg.passwordComplexity") + " " + complexityErrors.join(", "));
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const payload: {
+        userId?: string;
+        email?: string;
+        verificationCode: string;
+        newPassword: string;
+        confirmPassword: string;
+      } = {
+        verificationCode,
+        newPassword,
+        confirmPassword,
+      };
+
+      // Include both userId and email if available (API expects both)
+      if (userId) {
+        payload.userId = userId;
+      }
+      if (email) {
+        payload.email = email;
+      }
+
+      await setPassword(payload);
+
+      toast.success(t("msg.successChange"), {
+        description: t("msg.passwordResetSuccess"),
+      });
+
+      // Redirect to login page after successful reset
+      setTimeout(() => navigate("/"), 2000);
+    } catch (error: unknown) {
+      const message = (error as any)?.message || t("msg.failedChange");
+      setError(message);
+      toast.error(t("msg.failedChange"), {
+        description: message,
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-100 p-4 flex items-center justify-center">
+      <div className="w-full max-w-md bg-white rounded-xl shadow-lg p-6 md:p-8">
+        <div className="mb-6 md:mb-8 text-center">
+          <img
+            src="/assets/smart-office-logo.svg"
+            alt="Smart Office Logo"
+            className="h-8 md:h-10 mb-4 md:mb-6 mx-auto"
+          />
+          <h1 className="text-xl md:text-2xl font-bold text-gray-900 mb-2">
+            Reset Password
+          </h1>
+          <p className="text-xs md:text-sm text-gray-500">
+            Set a new password for your account
+          </p>
+          {email && (
+            <p className="text-xs text-gray-400 mt-1 truncate max-w-full px-2">
+              Email: {email}
+            </p>
+          )}
+          {userId && (
+            <p className="text-xs text-gray-400 mt-1 truncate max-w-full px-2">
+              User ID: {userId}
+            </p>
+          )}
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4 md:space-y-6">
+          <div className="space-y-3">
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <Lock className="h-4 w-4 md:h-5 md:w-5 text-gray-400" />
+              </div>
+              <Input
+                type={showPassword ? "text" : "password"}
+                placeholder="New Password"
+                className="h-10 rounded-md border px-4 text-sm ps-10 pr-10 text-black placeholder:text-gray-500"
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                required
+              />
+              <button
+                type="button"
+                className="absolute inset-y-0 right-0 pr-3 flex items-center"
+                onClick={() => setShowPassword(!showPassword)}
+                aria-label={showPassword ? "Hide password" : "Show password"}
+              >
+                {showPassword ? (
+                  <EyeOff className="h-4 w-4 text-gray-400" />
+                ) : (
+                  <Eye className="h-4 w-4 text-gray-400" />
+                )}
+              </button>
+            </div>
+
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <Lock className="h-4 w-4 md:h-5 md:w-5 text-gray-400" />
+              </div>
+              <Input
+                type={showConfirmPassword ? "text" : "password"}
+                placeholder="Confirm New Password"
+                className="h-10 rounded-md border px-4 text-sm ps-10 pr-10 text-black placeholder:text-gray-500"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                required
+              />
+              <button
+                type="button"
+                className="absolute inset-y-0 right-0 pr-3 flex items-center"
+                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                aria-label={
+                  showConfirmPassword ? "Hide password" : "Show password"
+                }
+              >
+                {showConfirmPassword ? (
+                  <EyeOff className="h-4 w-4 text-gray-400" />
+                ) : (
+                  <Eye className="h-4 w-4 text-gray-400" />
+                )}
+              </button>
+            </div>
+
+            {error && (
+              <div className="bg-red-50 border border-red-200 rounded-md p-3 md:p-4">
+                <p className="text-xs md:text-sm text-red-700 font-medium">
+                  {error}
+                </p>
+              </div>
+            )}
+          </div>
+
+          <div className="flex flex-col gap-3">
+            <Button
+              type="submit"
+              className="w-full h-10 bg-primary hover:bg-primary-300 text-white text-sm"
+              disabled={loading || (!userId && !email) || !verificationCode}
+            >
+              {loading ? (
+                <span className="flex items-center justify-center">
+                  <RefreshCw className="animate-spin h-4 w-4 md:h-5 md:w-5 mr-2" />
+                  Resetting...
+                </span>
+              ) : (
+                "Reset Password"
+              )}
+            </Button>
+
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full h-10 text-sm"
+              onClick={() => navigate("/")}
+            >
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Back to Login
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default ResetPassword;
diff --git a/apps/edr-freight-web/backoffice/src/shared/components/ui/DashboardDropdown.tsx b/apps/edr-freight-web/backoffice/src/shared/components/ui/DashboardDropdown.tsx
new file mode 100644
index 000000000..0c0e870f5
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/components/ui/DashboardDropdown.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+
+import { ChevronDown } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import { Button } from "@/shared/common/ui/button";
+import { getFormattedDashboardLabel } from "@/performance-management/utils/dashboardUtils";
+
+interface DashboardDropdownProps {
+  dashboards?: any[];
+  selectedDashboard?: any;
+  onSelect: (dashboard: any) => void;
+  isLoading?: boolean;
+}
+
+export const DashboardDropdown: React.FC<DashboardDropdownProps> = ({
+  dashboards = [],
+  selectedDashboard,
+  onSelect,
+  isLoading = false,
+}) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          className="flex items-center justify-between w-60"
+          disabled={isLoading}
+        >
+          {isLoading
+            ? "Loading dashboards..."
+            : getFormattedDashboardLabel(selectedDashboard?.name) ||
+              "Select Dashboard"}
+          <ChevronDown className="ml-2 h-4 w-4 opacity-70" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-60">
+        <DropdownMenuLabel>Available Dashboards</DropdownMenuLabel>
+        {dashboards?.length > 0 ? (
+          dashboards.map((dashboard: any) => (
+            <DropdownMenuItem
+              key={dashboard.id}
+              onClick={() => onSelect(dashboard)}>
+              {getFormattedDashboardLabel(dashboard.name)}
+            </DropdownMenuItem>
+          ))
+        ) : (
+          <DropdownMenuItem disabled>No dashboards found</DropdownMenuItem>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/components/ui/DynamicBreadcrumb.tsx b/apps/edr-freight-web/backoffice/src/shared/components/ui/DynamicBreadcrumb.tsx
new file mode 100644
index 000000000..19a59a139
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/components/ui/DynamicBreadcrumb.tsx
@@ -0,0 +1,163 @@
+import { useMemo } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { Breadcrumb, BreadcrumbList } from "@/shared/common/ui/breadcrumb";
+import { ChevronRight, Home } from "lucide-react";
+import { capitalize } from "@/shared/lib/utils";
+
+interface BreadcrumbNode {
+  label: string;
+  path: string;
+  isActive: boolean;
+  isEllipsis?: boolean;
+}
+
+const MODULE_LANDING_PATHS = new Set([
+  "/record-management/dashboard",
+  "/objective-management/plan-years",
+  "/performance-management/plan-years",
+  "/dms/dashboard",
+]);
+
+// Module roots and plan-year list pages are reachable from the sidebar/module
+// switcher — omit them from breadcrumbs to avoid redundant navigation.
+const HIDDEN_BREADCRUMB_SEGMENTS = new Set([
+  "plan-years",
+  "record-management",
+  "objective-management",
+  "performance-management",
+  "dms",
+  "user-management",
+]);
+
+const isDynamicId = (segment: string) =>
+  /^[0-9a-f]{8,}$/i.test(segment) || /^[0-9]+$/.test(segment);
+
+const makeReadableLabel = (segment: string) => {
+  const withSpaces = segment
+    .replace(/([a-z])([A-Z])/g, "$1 $2")
+    .replace(/[_-]/g, " ");
+  return capitalize(withSpaces);
+};
+
+export function DynamicBreadcrumb() {
+  const location = useLocation();
+  const { t } = useTranslation();
+
+  const breadcrumbs = useMemo(() => {
+    if (MODULE_LANDING_PATHS.has(location.pathname)) {
+      return [] as BreadcrumbNode[];
+    }
+
+    const pathSegments = location.pathname.split("/").filter(Boolean);
+    if (pathSegments.length === 0) return [] as BreadcrumbNode[];
+
+    const labelMap: Record<string, string> = {
+      dashboard: t("header.navigation.dashboard"),
+      userRecords: t("header.navigation.outgoing"),
+      userIncoming: t("header.navigation.incoming"),
+      delegation: t("header.navigation.delegation"),
+      approval: t("header.navigation.approval"),
+      pending: t("header.navigation.pending"),
+      collaborations: t("header.navigation.collaborations"),
+      recordOfficer: "Record Officer",
+      incoming: t("header.navigation.incoming"),
+      outgoing: t("header.navigation.outgoing"),
+      add: t("common.create"),
+      new: t("common.create"),
+      edit: t("common.Edit"),
+      profile: t("profile.profile"),
+      "update-profile": t("profile.updateProfile"),
+      "change-password": t("header.changePassword"),
+      uploadTeeterandSignature: t("header.addTeeter"),
+      viewDelegationLetter: t("delegation.viewLetter"),
+      editDelegation: t("delegation.editDelegation"),
+      incomingHistory: "Incoming History",
+      incomingNonSmartExternal: "External Incoming",
+      viewIncoming: "View Incoming",
+      goals: t("organization.Goals", "Goals"),
+      "detail-task": t("organization.detail_task", "Detail Task"),
+      "Major-Task": t("organization.Major Task", "Major Task"),
+      expectations: t("organization.expectations", "Expectations"),
+      "employee-expectations": t(
+        "organization.employeeExpectations",
+        "Employee Expectations",
+      ),
+      achievements: t("organization.achievements", "Achievements"),
+      "additional-tasks": t("organization.additionalTasks", "Additional Tasks"),
+      "signature-settings": t(
+        "organization.Signature Settings",
+        "Signature Settings",
+      ),
+    };
+
+    let currentPath = "";
+    const items: BreadcrumbNode[] = [];
+
+    for (const segment of pathSegments) {
+      currentPath += `/${segment}`;
+
+      if (HIDDEN_BREADCRUMB_SEGMENTS.has(segment) || isDynamicId(segment)) {
+        continue;
+      }
+
+      const baseLabel =
+        labelMap[segment] || makeReadableLabel(segment);
+
+      items.push({
+        label: baseLabel,
+        path: currentPath,
+        isActive: false,
+      });
+    }
+
+    if (items.length > 0) {
+      items[items.length - 1].isActive = true;
+    }
+
+    return items;
+  }, [location.pathname, t]);
+
+  if (!breadcrumbs.length) {
+    return null;
+  }
+
+  const compactBreadcrumbs = breadcrumbs;
+
+  return (
+    <div className="max-w-full overflow-hidden rounded-xl bg-white/80 px-2.5 py-1.5 shadow-sm ring-1 ring-black/5 backdrop-blur dark:bg-gray-800/70 dark:ring-white/10">
+      <Breadcrumb>
+        <BreadcrumbList className="flex-nowrap gap-0.5 overflow-x-auto whitespace-nowrap pb-0.5 text-xs">
+          {compactBreadcrumbs.map((breadcrumb, index) => (
+            <div key={`${breadcrumb.path}-${index}`} className="flex items-center">
+              {index > 0 && (
+                <span className="mx-1 text-gray-400 dark:text-gray-500">
+                  <ChevronRight className="h-3.5 w-3.5" />
+                </span>
+              )}
+
+              {breadcrumb.isEllipsis ? (
+                <span className="px-2 py-1 text-xs font-semibold text-gray-400 dark:text-gray-500">
+                  ...
+                </span>
+              ) : breadcrumb.isActive ? (
+                <span className="inline-flex max-w-[320px] items-center truncate rounded-full bg-primary-50 px-2 py-1 text-xs font-semibold text-primary-700 ring-1 ring-inset ring-primary-200/70 dark:bg-primary-900/40 dark:text-white dark:ring-primary-700/50" title={breadcrumb.label}>
+                  {breadcrumb.label}
+                </span>
+              ) : (
+                <Link
+                  to={breadcrumb.path}
+                  className="inline-flex max-w-[240px] items-center gap-1 truncate rounded-full px-2 py-1 text-xs font-medium text-gray-500 transition-colors hover:bg-primary-50 hover:text-primary-700 dark:text-gray-300 dark:hover:bg-primary/10 dark:hover:text-primary-foreground"
+                  title={breadcrumb.label}
+                >
+                  {index === 0 && <Home className="h-3.5 w-3.5" />}
+                  <span className="truncate">{breadcrumb.label}</span>
+                </Link>
+              )}
+            </div>
+          ))}
+        </BreadcrumbList>
+      </Breadcrumb>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/config/app.config.ts b/apps/edr-freight-web/backoffice/src/shared/config/app.config.ts
new file mode 100644
index 000000000..335eb4539
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/config/app.config.ts
@@ -0,0 +1,13 @@
+import { getEnvUrl } from "@/shared/config/env";
+
+function normalizeBaseUrl(url: string) {
+  const u = (url || "").trim();
+  if (!u) return "";
+  return u.replace(/\/+$/, "").replace(/\/docs$/, "");
+}
+
+export const AUDITLOG_API_URL: string = normalizeBaseUrl(
+  getEnvUrl("VITE_AUDITLOG_API_URL", false),
+);
+
+if (!AUDITLOG_API_URL) console.warn("Missing VITE_AUDITLOG_API_URL");
diff --git a/apps/edr-freight-web/backoffice/src/shared/config/env.ts b/apps/edr-freight-web/backoffice/src/shared/config/env.ts
new file mode 100644
index 000000000..65a41a07b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/config/env.ts
@@ -0,0 +1,124 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+type EnvOptions = {
+  required?: boolean;
+  secure?: boolean;
+  trimTrailingSlash?: boolean;
+  stripDocsSuffix?: boolean;
+};
+
+const URL_FALLBACKS: Record<string, string> = {
+  // Only public/third-party service URLs with reasonable defaults
+  // All internal infrastructure URLs MUST come from .env file
+};
+
+function readEnvValue(name: string): string {
+  // Static references to help Vite's static replacement engine during production builds.
+  // Vite replaces these with literal strings at build time.
+  const staticMap: Record<string, string | undefined> = {
+    VITE_API_URL: import.meta.env.VITE_API_URL,
+    VITE_RECORD_API_URL: import.meta.env.VITE_RECORD_API_URL,
+    VITE_PERFORMANCE_API_URL: import.meta.env.VITE_PERFORMANCE_API_URL,
+    VITE_OBJECTIVE_API_URL: import.meta.env.VITE_OBJECTIVE_API_URL,
+    VITE_DMS_API_URL: import.meta.env.VITE_DMS_API_URL,
+    VITE_API_BASE_URL: import.meta.env.VITE_API_BASE_URL,
+    VITE_TIME_API_URL: import.meta.env.VITE_TIME_API_URL,
+    VITE_TIME_FALLBACK_API_URL: import.meta.env.VITE_TIME_FALLBACK_API_URL,
+    VITE_CHRONICLE_URL: import.meta.env.VITE_CHRONICLE_URL,
+    VITE_AUDITLOG_API_URL: import.meta.env.VITE_AUDITLOG_API_URL,
+  };
+
+  const value = staticMap[name] || (import.meta as any)?.env?.[name];
+  return typeof value === "string" ? value.trim() : "";
+}
+
+function ensureSecureProtocol(value: string): string {
+  if (
+    !value ||
+    typeof window === "undefined" ||
+    window.location.protocol !== "https:"
+  ) {
+    return value;
+  }
+
+  if (value.startsWith("http://")) {
+    return `https://${value.slice("http://".length)}`;
+  }
+
+  if (value.startsWith("ws://")) {
+    return `wss://${value.slice("ws://".length)}`;
+  }
+
+  return value;
+}
+
+export function normalizeSecureUrl(value: string): string {
+  return ensureSecureProtocol((value || "").trim());
+}
+
+export function getEnv(name: string, options: EnvOptions = {}): string {
+  const {
+    required = false,
+    secure = false,
+    trimTrailingSlash = false,
+    stripDocsSuffix = false,
+  } = options;
+
+  let value = readEnvValue(name);
+
+  if (!value && Object.prototype.hasOwnProperty.call(URL_FALLBACKS, name)) {
+    value = URL_FALLBACKS[name];
+  }
+
+  if (!value) {
+    if (required) {
+      console.warn(`Missing ${name}`);
+    }
+    return "";
+  }
+
+  if (secure) {
+    value = normalizeSecureUrl(value);
+  }
+
+  if (trimTrailingSlash) {
+    value = value.replace(/\/+$/, "");
+  }
+
+  if (stripDocsSuffix) {
+    value = value.replace(/\/docs$/, "");
+  }
+
+  return value;
+}
+
+export function getEnvUrl(name: string, required = true): string {
+  return getEnv(name, {
+    required,
+    secure: true,
+    trimTrailingSlash: true,
+    stripDocsSuffix: true,
+  });
+}
+
+/**
+ * Read a URL from env WITHOUT using hardcoded fallbacks.
+ * This enforces that the value MUST be provided in .env file.
+ * Throws an error if the env var is not set.
+ */
+export function getEnvUrlStrict(name: string): string {
+  const value = readEnvValue(name);
+
+  if (!value) {
+    throw new Error(
+      `Missing required env variable: ${name}. Must be defined in .env file (no fallback allowed).`,
+    );
+  }
+
+  // Apply standard URL transformations
+  const normalized = normalizeSecureUrl(value);
+  const trimmed = normalized.replace(/\/+$/, "");
+  const cleaned = trimmed.replace(/\/docs$/, "");
+
+  return cleaned;
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/context/AuthContext.tsx b/apps/edr-freight-web/backoffice/src/shared/context/AuthContext.tsx
new file mode 100644
index 000000000..bc422613c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/context/AuthContext.tsx
@@ -0,0 +1,130 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  ReactNode,
+} from "react";
+import Cookies from "js-cookie";
+import { MeDto } from "@/shared/dto/user/meDto";
+import { useAuth as useFreightAuth } from "@/auth/useAuth";
+
+// ----- TYPES -----
+export interface Role {
+  id: string;
+  key: string;
+}
+
+interface AuthContextType {
+  user: MeDto | null;
+  loading: boolean;
+  setUser: (user: MeDto | null) => void;
+  selectedPositionId: string | null;
+  setSelectedPositionId: (id: string | null) => void;
+  showOtpModal: boolean;
+  setShowOtpModal: (show: boolean) => void;
+  rememberMePreference: boolean;
+  setRememberMePreference: (rememberMe: boolean) => void;
+}
+
+// ----- CONTEXT -----
+const AuthContext = createContext<AuthContextType>({
+  user: null,
+  loading: true,
+  setUser: () => {},
+  selectedPositionId: null,
+  setSelectedPositionId: () => {},
+  showOtpModal: false,
+  setShowOtpModal: () => {},
+  rememberMePreference: false,
+  setRememberMePreference: () => {},
+});
+
+// ----- PROVIDER -----
+export const AuthProvider = ({ children }: { children: ReactNode }) => {
+  const [user, setUser] = useState<MeDto | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [selectedPositionId, setSelectedPositionId] = useState<string | null>(
+    null
+  );
+  const [showOtpModal, setShowOtpModal] = useState(false);
+  const [rememberMePreference, setRememberMePreference] = useState(false);
+
+  // Bridge to the freight session: this provider renders inside the freight
+  // AuthProvider, so the real signed-in user is available here. The vendored IAM
+  // code (AppMenuTabs, pages) reads `user` from this context — feed it the
+  // freight user so it isn't null. Falls back to the legacy auth-user cookie.
+  const { user: freightUser } = useFreightAuth();
+
+  useEffect(() => {
+    const positionId = Cookies.get("selected-position-id");
+    if (positionId) setSelectedPositionId(positionId);
+
+    if (freightUser) {
+      setUser(freightUser as unknown as MeDto);
+      setLoading(false);
+      return;
+    }
+
+    const cookieUser = Cookies.get("auth-user");
+    if (cookieUser) {
+      try {
+        setUser(JSON.parse(cookieUser));
+      } catch (e) {
+        console.error("Invalid user cookie");
+      }
+    }
+    setLoading(false);
+  }, [freightUser]);
+  // useEffect(() => {
+  //   sessionStorage.setItem("tabActive", "true");
+
+  //   const handleTabClose = (event: BeforeUnloadEvent) => {
+  //     const [nav] = performance.getEntriesByType(
+  //       "navigation"
+  //     ) as PerformanceNavigationTiming[];
+
+  //     // If page was reloaded, don't remove tokens
+  //     if (nav && nav.type === "reload") return;
+
+  //     const rememberMe = JSON.parse(
+  //       localStorage.getItem("rememberMe") || "false"
+  //     );
+  //     if (!rememberMe) {
+  //       Cookies.remove("auth-token");
+  //       Cookies.remove("refresh-token");
+  //       sessionStorage.removeItem("auth-token");
+  //       setUser(null);
+  //     }
+  //   };
+
+  //   window.addEventListener("beforeunload", handleTabClose);
+  //   return () => window.removeEventListener("beforeunload", handleTabClose);
+  // }, []);
+
+  useEffect(() => {
+    if (selectedPositionId) {
+      Cookies.set("selected-position-id", selectedPositionId);
+    }
+  }, [selectedPositionId]);
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        loading,
+        setUser,
+        selectedPositionId,
+        setSelectedPositionId,
+        showOtpModal,
+        setShowOtpModal,
+        rememberMePreference,
+        setRememberMePreference,
+      }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+// ----- HOOK -----
+export const useAuth = () => useContext(AuthContext);
diff --git a/apps/edr-freight-web/backoffice/src/shared/context/BreadcrumbContext.tsx b/apps/edr-freight-web/backoffice/src/shared/context/BreadcrumbContext.tsx
new file mode 100644
index 000000000..6162ff8eb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/context/BreadcrumbContext.tsx
@@ -0,0 +1,91 @@
+import React, { createContext, useContext, useState, useCallback } from "react";
+
+/**
+ * Context for managing breadcrumb labels
+ * Allows components to register human-readable labels for IDs
+ */
+
+interface BreadcrumbLabel {
+  id: string;
+  label: string;
+  type: "year" | "plan" | "position" | "employee" | "service" | "other";
+}
+
+interface BreadcrumbContextType {
+  labels: Map<string, BreadcrumbLabel>;
+  registerLabel: (id: string, label: string, type: BreadcrumbLabel["type"]) => void;
+  getLabel: (id: string) => string | null;
+  clearLabels: () => void;
+}
+
+const BreadcrumbContext = createContext<BreadcrumbContextType | undefined>(
+  undefined
+);
+
+export const BreadcrumbProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [labels, setLabels] = useState<Map<string, BreadcrumbLabel>>(
+    new Map()
+  );
+
+  const registerLabel = useCallback(
+    (id: string, label: string, type: BreadcrumbLabel["type"]) => {
+      setLabels((prev) => {
+        const newMap = new Map(prev);
+        newMap.set(id, { id, label, type });
+        return newMap;
+      });
+    },
+    []
+  );
+
+  const getLabel = useCallback(
+    (id: string): string | null => {
+      return labels.get(id)?.label || null;
+    },
+    [labels]
+  );
+
+  const clearLabels = useCallback(() => {
+    setLabels(new Map());
+  }, []);
+
+  return (
+    <BreadcrumbContext.Provider
+      value={{ labels, registerLabel, getLabel, clearLabels }}>
+      {children}
+    </BreadcrumbContext.Provider>
+  );
+};
+
+export const useBreadcrumbContext = () => {
+  const context = useContext(BreadcrumbContext);
+  if (!context) {
+    throw new Error(
+      "useBreadcrumbContext must be used within BreadcrumbProvider"
+    );
+  }
+  return context;
+};
+
+/**
+ * Hook to register a breadcrumb label when a component mounts
+ * Usage in components:
+ * 
+ * const { data: planData } = usePlan(planId);
+ * useBreadcrumbLabel(planId, localizedName(planData?.name), "plan");
+ */
+export const useBreadcrumbLabel = (
+  id: string | undefined,
+  label: string | undefined,
+  type: BreadcrumbLabel["type"]
+) => {
+  const { registerLabel } = useBreadcrumbContext();
+
+  React.useEffect(() => {
+    if (id && label) {
+      registerLabel(id, label, type);
+    }
+  }, [id, label, type, registerLabel]);
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/context/PermissionContext.tsx b/apps/edr-freight-web/backoffice/src/shared/context/PermissionContext.tsx
new file mode 100644
index 000000000..339d8e80b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/context/PermissionContext.tsx
@@ -0,0 +1,34 @@
+import { Permission } from "@/shared/dto/user/meDto";
+import React, {
+  createContext,
+  FC,
+  ReactNode,
+  useContext,
+  useMemo,
+} from "react";
+
+type PermContext = { permissions: string[]; permissionObjects?: Permission[] };
+const PermissionContext = createContext<PermContext>({ permissions: [] });
+
+interface PermissionProviderProps {
+  permissions?: Permission[];
+  children: ReactNode;
+}
+
+export const PermissionProvider: FC<PermissionProviderProps> = ({
+  permissions,
+  children,
+}) => {
+  const permissionKeys = useMemo(
+    () => permissions?.map((p) => p.key),
+    [permissions]
+  );
+
+  return (
+    <PermissionContext.Provider value={{ permissions: permissionKeys || [],permissionObjects:permissions }}>
+      {children}
+    </PermissionContext.Provider>
+  );
+};
+
+export const usePermissions = () => useContext(PermissionContext);
diff --git a/apps/edr-freight-web/backoffice/src/shared/context/UnitContext.tsx b/apps/edr-freight-web/backoffice/src/shared/context/UnitContext.tsx
new file mode 100644
index 000000000..8aa417097
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/context/UnitContext.tsx
@@ -0,0 +1,28 @@
+import React, { createContext, useContext, ReactNode } from 'react';
+import { useUnit } from '@/user-management/hooks/useUnit';
+
+// Define the context type to match the return type of useUnit hook
+type UnitContextType = ReturnType<typeof useUnit> | undefined;
+
+// Create context with undefined as default
+const UnitContext = createContext<UnitContextType>(undefined);
+
+// Provider component
+export const UnitProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const unitQuery = useUnit(); // or whatever hook/query you're using to get units
+  
+  return (
+    <UnitContext.Provider value={unitQuery}>
+      {children}
+    </UnitContext.Provider>
+  );
+};
+
+// Custom hook to use the context
+export const useUnitContext = () => {
+  const context = useContext(UnitContext);
+  if (context === undefined) {
+    throw new Error('useUnitContext must be used within a UnitProvider');
+  }
+  return context;
+};
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/shared/context/UserContext.tsx b/apps/edr-freight-web/backoffice/src/shared/context/UserContext.tsx
new file mode 100644
index 000000000..e1a874858
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/context/UserContext.tsx
@@ -0,0 +1,15 @@
+// src/context/UserContext.tsx
+import { createContext, useContext } from "react";
+import { useAuthUser } from "../hooks/useAuthUser";
+
+const UserContext = createContext<any>(null);
+
+export const UserProvider = ({ children }: { children: React.ReactNode }) => {
+  const { userDetails, isLoading } = useAuthUser();
+  //   if (isLoading) return <div>Loading...</div>;
+  return (
+    <UserContext.Provider value={userDetails}>{children}</UserContext.Provider>
+  );
+};
+
+export const useUser = () => useContext(UserContext);
diff --git a/apps/edr-freight-web/backoffice/src/shared/dto/External-Portal/External-PortalDto.ts b/apps/edr-freight-web/backoffice/src/shared/dto/External-Portal/External-PortalDto.ts
new file mode 100644
index 000000000..5197123a6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/dto/External-Portal/External-PortalDto.ts
@@ -0,0 +1,149 @@
+import { FilterEnum } from "@/shared/services/organizationsService";
+
+// create-user.dto.ts
+export interface MultilingualText {
+  am: string;
+  en: string;
+}
+export interface CreateUserDto {
+  email: string;
+  username: string;
+  phoneNumber: string;
+  userType: string;
+  name: {
+    am: string;
+    en: string;
+  };
+}
+export interface FayidaUserDto {
+  code: string;
+  redirectUri?: string;
+}
+
+// create-letter.interface.ts
+
+export interface FileInfo {
+  fileName: string;
+  contentType: string;
+  size: number;
+  originalname: string;
+}
+
+export interface CreateLetterDto {
+  fileInfo: FileInfo;
+  subject: string;
+  unitIds: string[];
+  letterNumber: string;
+  preferredLanguage: "am" | "en";
+}
+
+export interface FileInfoDto {
+  size: number;
+  bucket: string;
+  fileName: string;
+  contentType: string;
+  originalname: string;
+}
+
+export interface LetterRecordDto {
+  amharicCreatedAt: any;
+  createdAt: any;
+  id: string;
+  fileInfo: FileInfoDto;
+  referenceNumber: string | null;
+  letterNumber: string; // ✅ newly added
+  dispatchedDate: string; // ISO string
+  amharicDispatchedDate: string;
+  statusKey: "Dispatched" | "Submitted" | "Draft" | "Rejected" | string;
+  initiationType: "self" | "external" | string;
+  //
+  receivingUnits: {
+    id: string;
+    unit: {
+      id: string;
+      name: {
+        am: string;
+        en: string;
+      };
+    };
+  }[];
+
+  content: {
+    id: string;
+    subject: string;
+  }[];
+}
+
+export interface DocumentPayloadDto {
+  fileInfo: FileInfo;
+  documentId: string;
+  type: FilterEnum;
+}
+
+export type DocumentStatus = "pending" | "approved" | "rejected";
+
+export interface DocumentResponseDto {
+  id: string;
+  userId: string;
+  documentId: string;
+  createdAt: string; // ISO datetime string
+  updatedAt: string; // ISO datetime string
+  uploadedSuccessfully: boolean;
+  isCurrent: boolean;
+  status: "pending" | "approved" | "rejected";
+  fileInfo: {
+    size: number;
+    bucket: string;
+    fileName: string;
+    bucketName?: string; // optional if not always present
+    contentType: string;
+    originalname: string;
+  };
+  presigned: string; // Pre-signed URL for download/view
+}
+
+export interface DocumentRequirementDto {
+  title: {
+    am: string;
+    en: string;
+  };
+  description: {
+    am: string;
+    en: string;
+  };
+  isOptional: boolean;
+  order: number;
+  key: string;
+  type: string;
+}
+
+export interface FilesInfoDto {
+  size: number;
+  bucket: string;
+  fileName: string;
+  bucketName: string;
+  contentType: string;
+  originalname: string;
+}
+
+export interface DocumentRequirementResponseDto {
+  id: string;
+  title: MultilingualText;
+  description: MultilingualText;
+  key: string;
+  order: number;
+  isActive: boolean;
+  isOptional: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface DocumentRequirementsResponse {
+  count: number;
+  items: DocumentRequirementResponseDto[];
+}
+
+export interface ResponseActionDto {
+  status: string;
+  remark?: string;
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/dto/organization/orgAdminsDto.ts b/apps/edr-freight-web/backoffice/src/shared/dto/organization/orgAdminsDto.ts
new file mode 100644
index 000000000..50c289c96
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/dto/organization/orgAdminsDto.ts
@@ -0,0 +1,41 @@
+// UserName interface for multilingual support
+interface UserName {
+  am: string;
+  en: string;
+}
+
+// User DTO
+export interface UserDto {
+  createdAt: string; // ISO Date string
+  updatedAt: string;
+  id: string;
+  name: UserName;
+  username: string;
+  email: string;
+  userType: "employee" | string;
+  sharepointId: string | null;
+  status: "pending" | "active" | string;
+  isActive: boolean;
+  hasSetPassword: boolean;
+  phoneNumber: string;
+}
+
+export interface AssignedAdminsDto {
+  createdAt: string;
+  updatedAt: string;
+  id: string;
+  name: UserName;
+  username: string;
+  phoneNumber: string;
+  email: string;
+  userType: "employee" | string;
+  sharepointId: string | null;
+  status: "accepted" | "pending" | "active" | string;
+  isActive: boolean;
+  hasSetPassword: boolean;
+  approvedById: string | null;
+  approvedAt: string | null;
+  localeApprovedAt: string | null;
+  isPhoneNumberVerified: boolean;
+  verifiedBy: string;
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/dto/organization/organizationDto.ts b/apps/edr-freight-web/backoffice/src/shared/dto/organization/organizationDto.ts
new file mode 100644
index 000000000..1603661f7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/dto/organization/organizationDto.ts
@@ -0,0 +1,48 @@
+export interface OrganizationName {
+  am: string;
+  en: string;
+}
+
+export interface OrganizationDto {
+  id: string;
+  name: OrganizationName;
+  key: string;
+  parentId: string | null;
+  organizationTypeId: string;
+  createdAt: string;
+  updatedAt: string;
+  isAssigned: boolean;
+  status: "Active" | "Deactive" | "Inactive";
+  activeEmployeeCount?: number;
+  adminsCount?: number;
+  isGovernmentOrganization: boolean;
+}
+export interface OrganizationAdminsDto {
+  id: string;
+  name: OrganizationName;
+  key: string;
+  parentId: string | null;
+  organizationTypeId: string;
+  createdAt: string;
+  updatedAt: string;
+  isAssigned: boolean;
+  status: "Active" | "Deactive" | "Inactive";
+  adminsCount: number;
+  org_admin_count: number;
+  activeEmployeeCount?: number;
+}
+
+export interface OrganizationDetailDTO {
+  createdAt: string; // ISO date string
+  updatedAt: string; // ISO date string
+  id: string; // UUID
+  name: {
+    am: string; // Amharic name
+    en: string; // English name
+  };
+  key: string; // Unique key
+  isGovernmentOrganization: boolean;
+  status: "Active" | "Inactive";
+  parentId: string | null; // Parent organization ID if applicable
+  organizationTypeId: string; // UUID for organization type
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/dto/user/meDto.ts b/apps/edr-freight-web/backoffice/src/shared/dto/user/meDto.ts
new file mode 100644
index 000000000..39edde602
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/dto/user/meDto.ts
@@ -0,0 +1,211 @@
+export interface UserName {
+  am: string;
+  en: string;
+}
+
+export interface Role {
+  id: string;
+  key: string;
+}
+
+export interface Permission {
+  id: string;
+  key: string;
+}
+export interface PositionTypePermissionDto {
+  id: string;
+  permissionId: string;
+  positionTypeId: string;
+  createdAt: string;
+  updatedAt: string;
+  permission: {
+    id: string;
+    key: string;
+    name: {
+      am: string;
+      en: string;
+    };
+    createdAt: string;
+    updatedAt: string;
+  };
+}
+
+export interface PositionTypeDto {
+  id: string;
+  key: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  unitId: string;
+  isSystem: boolean;
+  createdAt: string;
+  updatedAt: string;
+  positionTypePermissions: PositionTypePermissionDto[];
+}
+
+export interface EmployeeAssociation {
+  id: string;
+  name: UserName;
+  employeePositionId?: string;
+  organizationId: string;
+  unitId: string | null;
+  positions: {
+    id: string;
+    employeePositionId: string;
+    name: {
+      am: string;
+      en: string;
+    };
+    key: string;
+    rank: number;
+    projectId?: string | null;
+    isDelegate: boolean;
+    delegatorId: string | null;
+    parentPositionId: string | null;
+    permissions: Permission[];
+    hasDelegated: boolean;
+    hasPendingDelegation: boolean;
+    positionType?: {
+      id: string;
+      key: string;
+      name: { am: string; en: string };
+      canReceiveRecord: boolean;
+      canCreateBankRecord?: boolean;
+      canAssignRecord: boolean;
+    } | null;
+    delegationDeadline: string | null;
+    delegationStartDate: string | null;
+  }[];
+}
+export enum EPositionTypeKey {
+  EMPLOYEE = "employee",
+  TEAM_LEADER = "team-leader",
+  DIRECTOR = "director",
+  DEPUTY = "deputy",
+  OFFICE_HEAD = "office-head",
+  RECORD_OFFICER = "record-officer",
+  BUDGET_PLAN = "budget-and-plan",
+}
+
+// Aliases for position-type keys returned by the backend in different
+// casings/separators. Used by the matcher in positionTypeUtils so the FE
+// stays correct whether the backend returns "team-leader", "teamLeader",
+// or "team_leader". Also covers org-specific role labels (e.g. "expert",
+// "fetami-balmuya") that semantically map to one of the canonical types.
+export const POSITION_TYPE_ALIASES: Record<EPositionTypeKey, string[]> = {
+  [EPositionTypeKey.EMPLOYEE]: [
+    "employee",
+    "expert",
+    "performance_expert",
+    "performanceExpert",
+    "fetami-balmuya",
+    "fetamiBalmuya",
+    "fetami_balmuya",
+    "adwa_victory_vemorial_museum/fetami-balmuya",
+    "adwa_victory_vemorial_museum/performance_expert",
+  ],
+  [EPositionTypeKey.TEAM_LEADER]: [
+    "team-leader",
+    "teamleader",
+    "teamLeader",
+    "team_leader",
+    "performance_team_leader",
+    "performance_team-leader",
+    "performance_teamleader",
+    "performanceTeamLeader",
+    "Performance_teamleader",
+  ],
+  [EPositionTypeKey.DIRECTOR]: [
+    "director",
+    "performance_director",
+    "performance-director",
+    "performanceDirector",
+    "Performance_Director",
+    "adwa_victory_vemorial_museum/director",
+  ],
+  [EPositionTypeKey.DEPUTY]: ["deputy"],
+  [EPositionTypeKey.OFFICE_HEAD]: ["office-head", "officeHead", "office_head"],
+  [EPositionTypeKey.RECORD_OFFICER]: [
+    "record-officer",
+    "recordOfficer",
+    "record_officer",
+  ],
+  [EPositionTypeKey.BUDGET_PLAN]: [
+    "budget-and-plan",
+    "budgetAndPlan",
+    "budget_and_plan",
+  ],
+};
+
+export interface MeDto {
+  id: string;
+  email: string;
+  name: UserName;
+  userType: "employee" | string;
+  sharepointId: string | null;
+  status: string;
+  username: string;
+  roles: Role[];
+  permissions: Permission[];
+  employee: EmployeeAssociation[];
+  phoneNumber: string;
+  hasSetPassword: boolean;
+  hasFinishedRegistration: boolean;
+  hasFinishedDMSOnboarding: boolean;
+  mfaRequired?: boolean;
+}
+
+// Name interface
+export interface Name {
+  am: string;
+  en: string;
+}
+
+// Permission interface
+export interface Permission {
+  id: string;
+  key: string;
+}
+
+// Position interface
+export interface Position {
+  id: string;
+  employeePositionId: string;
+  name: Name;
+  key: string;
+  rank: number;
+  isDelegate: boolean;
+  projectId: string | null;
+  delegatorId: string | null;
+  parentPositionId: string | null;
+  permissions: Permission[];
+  hasDelegated: boolean;
+  positionType: string | null;
+  delegationDeadline: string | null;
+  delegationStartDate: string | null;
+}
+
+// Employee interface
+export interface Employee {
+  id: string;
+  organizationId: string;
+  unitId: string;
+  name: Name;
+  positions: Position[];
+}
+
+// User interface (main DTO)
+export interface UserDto {
+  id: string;
+  email: string;
+  name: Name;
+  userType: string;
+  sharepointId: string | null;
+  status: string;
+  username: string;
+  hasSetPassword: boolean;
+  roles: string[];
+  permissions: Permission[];
+  employees: Employee[];
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/dto/user/usersDto.ts b/apps/edr-freight-web/backoffice/src/shared/dto/user/usersDto.ts
new file mode 100644
index 000000000..89a82756d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/dto/user/usersDto.ts
@@ -0,0 +1,56 @@
+export interface UserName {
+  am: string;
+  en: string;
+}
+
+export interface User {
+  id: string;
+  name: UserName;
+  username: string;
+  email: string;
+  phoneNumber:string
+  userType: "employee" | string;
+  sharepointId: string | null;
+  status: "accepted" | "pending" | "rejected" | string;
+  createdAt:string
+}
+
+export interface OrganizationUserDto {
+  organizationId: string;
+  user: User;
+}
+
+
+
+export interface EmployeeDTO {
+  id: string;
+  isCurrent: boolean;
+  status: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  userId:string;
+}
+
+export interface ItemDTO {
+  id: string;
+  isDelegate: boolean;
+  isCurrent: boolean;
+  startDate: string;
+  amharicStartDate: string;
+  endDate: string;
+  amharicEndDate: string;
+  unitId: string;
+  status: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  userId: string;
+}
+
+export interface RootDTO {
+  count: number;
+  items: ItemDTO[];
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/hooks/useAdvancedDashboardHook.ts b/apps/edr-freight-web/backoffice/src/shared/hooks/useAdvancedDashboardHook.ts
new file mode 100644
index 000000000..e675c0d24
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/hooks/useAdvancedDashboardHook.ts
@@ -0,0 +1,41 @@
+import {
+  fetchDashboardUrl,
+  fetchListOfParameters,
+  fetchListOfPermittedDashboards,
+} from "@/record-management/services/api/advancedDashboardService";
+import { useQuery } from "@tanstack/react-query";
+
+export const useAdvancedDashboardHook = (
+  id?: string,
+  body?: Record<string, any>
+) => {
+  // 1️⃣ Fetch list of permitted dashboards
+  const permittedDashboardsQuery = useQuery({
+    queryKey: ["permittedDashboards"],
+    queryFn: fetchListOfPermittedDashboards,
+    staleTime: 5 * 60 * 1000, // 5 minutes cache
+  });
+
+  // 2️⃣ Fetch specific dashboard iframe URL (only runs if id exists)
+  const dashboardUrlQuery = useQuery({
+    queryKey: ["dashboardUrl", id],
+    queryFn: () => fetchDashboardUrl({ params: body }, id!),
+    enabled: !!id, // only run when `id` is defined
+  });
+  const dashboardParameter = useQuery({
+    queryKey: ["dashboardParameter", id],
+    queryFn: () => fetchListOfParameters(id as string),
+    enabled: !!id,
+  });
+
+  return {
+    permittedDashboards: permittedDashboardsQuery.data,
+    isLoadingPermitted: permittedDashboardsQuery.isLoading,
+    isErrorPermitted: permittedDashboardsQuery.isError,
+
+    dashboardUrl: dashboardUrlQuery.data,
+    isLoadingUrl: dashboardUrlQuery.isLoading,
+    isErrorUrl: dashboardUrlQuery.isError,
+    dashboardParameter: dashboardParameter.data,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/hooks/useAlertSetup.ts b/apps/edr-freight-web/backoffice/src/shared/hooks/useAlertSetup.ts
new file mode 100644
index 000000000..ec4ba9b2d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/hooks/useAlertSetup.ts
@@ -0,0 +1,14 @@
+// useAdminSetupRequirements.ts
+import { useQuery } from "@tanstack/react-query";
+import {
+  fetchRequirementSatisfied,
+  AdminSetupAlertResponse,
+} from "@/record-management/services/api/alertService";
+
+export function useAdminSetupRequirements(unitId?: string) {
+  return useQuery<AdminSetupAlertResponse>({
+    queryKey: ["admin-setup-requirements", unitId],
+    queryFn: () => fetchRequirementSatisfied(unitId!),
+    enabled: !!unitId,
+  });
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/hooks/useAuditLogs.ts b/apps/edr-freight-web/backoffice/src/shared/hooks/useAuditLogs.ts
new file mode 100644
index 000000000..0ea9b7e42
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/hooks/useAuditLogs.ts
@@ -0,0 +1,82 @@
+import { useState, useCallback, useEffect } from "react";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { AuditLogItem } from "@/shared/components/audit-log/AuditLogDisplay";
+
+type AuditLogsResponse = {
+  count: number;
+  items: AuditLogItem[];
+};
+
+type UseAuditLogsOptions = {
+  resourceId?: string;
+  entityName?: string;
+  userId?: string;
+  autoFetch?: boolean;
+};
+
+/**
+ * Hook to fetch and manage audit logs
+ * Supports fetching logs by various filters
+ */
+export const useAuditLogs = (
+  endpoint: string,
+  options: UseAuditLogsOptions = {},
+) => {
+  const { autoFetch = true, resourceId, entityName, userId } = options;
+  const { t } = useTranslation();
+
+  const [logs, setLogs] = useState<AuditLogItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [total, setTotal] = useState(0);
+
+  const fetchLogs = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const url = new URL(endpoint, window.location.origin);
+
+      if (resourceId) url.searchParams.append("resourceId", resourceId);
+      if (entityName) url.searchParams.append("entityName", entityName);
+      if (userId) url.searchParams.append("userId", userId);
+
+      const response = await fetch(url.toString(), {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${localStorage.getItem("token")}`,
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+
+      const data: AuditLogsResponse = await response.json();
+      setLogs(data.items || []);
+      setTotal(data.count || 0);
+    } catch (err: any) {
+      const errorMessage = err.message || t("auditLog.fetchError", "Failed to fetch audit logs");
+      setError(errorMessage);
+      toast.error(errorMessage);
+    } finally {
+      setLoading(false);
+    }
+  }, [endpoint, resourceId, entityName, userId, t]);
+
+  useEffect(() => {
+    if (autoFetch) {
+      fetchLogs();
+    }
+  }, [fetchLogs, autoFetch]);
+
+  return {
+    logs,
+    loading,
+    error,
+    total,
+    refetch: fetchLogs,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/hooks/useAuthUser.ts b/apps/edr-freight-web/backoffice/src/shared/hooks/useAuthUser.ts
new file mode 100644
index 000000000..af41dc2b7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/hooks/useAuthUser.ts
@@ -0,0 +1,548 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  EOtpType,
+  getProfile,
+  login,
+  logout,
+  OtpVerificationPayload,
+  refreshAuthToken,
+  resendOtpCode,
+  resendVerificationCode,
+  setFayidaPass,
+  SetFayidaPasswordPayload,
+  setPassword,
+  SetPasswordPayload,
+  verifyMFAUser,
+  verifyOTPCode,
+} from "@/shared/services/authService";
+import Cookies from "js-cookie";
+import { MeDto } from "@/shared/dto/user/meDto";
+import { toast } from "sonner";
+import { useNavigate } from "react-router-dom";
+import { useAuth } from "@/shared/context/AuthContext";
+import { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { VerifyUserPayload } from "@/record-management/services/api/authService";
+import {
+  clearRememberMePreference,
+  getAuthCookieOptions,
+  persistRememberMePreference,
+  setAuthCookies,
+} from "@/shared/utils/authPersistence";
+import { clearComplaintVerification } from "@/complaints/utils/complaintVerificationStorage";
+
+interface LoginPayload {
+  email?: string;
+  phoneNumber?: string;
+  userName?: string;
+  password: string;
+}
+type LoginResponse = { mfaRequired: true } | MeDto; // full user details
+
+export const useAuthUser = () => {
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+  const delegatedPositionId = Cookies.get("delegatedPositionId");
+  const currentPositionId = Cookies.get("current-position-id");
+
+  const {
+    setUser,
+    user: contextUser,
+    selectedPositionId,
+    setSelectedPositionId,
+    showOtpModal,
+    setShowOtpModal,
+    rememberMePreference,
+    setRememberMePreference,
+  } = useAuth();
+
+  const finalizeAuthenticatedSession = async ({
+    token,
+    refreshToken,
+    rememberMe,
+  }: {
+    token: string;
+    refreshToken: string;
+    rememberMe: boolean;
+  }) => {
+    const cookieOptions = getAuthCookieOptions(rememberMe);
+
+    persistRememberMePreference(rememberMe);
+    setAuthCookies({ token, refreshToken, rememberMe });
+    Cookies.set("i18nextLng", "am", cookieOptions);
+
+    const { data } = await getProfile();
+    const userDetails = data as MeDto;
+
+    Cookies.set(
+      "auth-user",
+      JSON.stringify({
+        ...userDetails,
+        id: userDetails.id,
+        name: userDetails.name,
+        permissions: userDetails.permissions,
+        roles: userDetails.roles,
+      }),
+      cookieOptions,
+    );
+
+    setUser(userDetails);
+
+    if ((userDetails.employee ?? []).length > 0) {
+      const firstPositionId =
+        userDetails.employee?.[0]?.positions?.[0]?.employeePositionId;
+      if (firstPositionId) {
+        setSelectedPositionId(firstPositionId);
+        Cookies.set("current-position-id", firstPositionId, cookieOptions);
+      }
+    }
+
+    queryClient.invalidateQueries({ queryKey: ["authUser"] });
+
+    return userDetails;
+  };
+
+  const {
+    data: userDetails,
+    isLoading,
+    isFetching,
+    isError,
+    refetch,
+  } = useQuery<MeDto>({
+    queryKey: [
+      "authUser",
+      selectedPositionId,
+      delegatedPositionId,
+      currentPositionId,
+    ],
+    queryFn: async () => {
+      const { data } = await getProfile();
+      return data as MeDto;
+    },
+    placeholderData: (previousData) => previousData,
+    staleTime: 5 * 60 * 1000,
+    retry: false,
+    enabled: true,
+  });
+
+  useEffect(() => {
+    if (userDetails) {
+      setUser(userDetails);
+
+      const allPositions = (userDetails.employee ?? []).flatMap(
+        (emp) => emp.positions ?? [],
+      );
+
+      if (!selectedPositionId && allPositions.length > 0) {
+        const fallbackId = allPositions[0]?.employeePositionId;
+
+        if (fallbackId) {
+          setSelectedPositionId(fallbackId);
+          Cookies.set("current-position-id", fallbackId);
+        }
+      } else if (selectedPositionId) {
+        // Self-heal stale cookies that were set to position.id instead of
+        // employeePositionId before this distinction was fixed.
+        const matchesEmployeePositionId = allPositions.some(
+          (pos) => pos.employeePositionId === selectedPositionId,
+        );
+
+        if (!matchesEmployeePositionId) {
+          const matchingPosition = allPositions.find(
+            (pos) => pos.id === selectedPositionId,
+          );
+
+          if (matchingPosition?.employeePositionId) {
+            setSelectedPositionId(matchingPosition.employeePositionId);
+            Cookies.set(
+              "current-position-id",
+              matchingPosition.employeePositionId,
+            );
+          }
+        }
+      }
+    }
+  }, [selectedPositionId, setSelectedPositionId, setUser, userDetails]);
+
+  const activePositionLookupId = delegatedPositionId
+    ? currentPositionId || selectedPositionId
+    : selectedPositionId;
+
+  const filteredUserDetailsCandidate: MeDto | undefined = useMemo(
+    () =>
+      userDetails
+        ? {
+            ...userDetails,
+            employee: (userDetails.employee ?? []).map((emp) => ({
+              ...emp,
+              positions: emp.positions.filter(
+                (p) =>
+                  p.employeePositionId === activePositionLookupId ||
+                  p.id === activePositionLookupId,
+              ),
+            })),
+          }
+        : undefined,
+    [activePositionLookupId, userDetails],
+  );
+
+  const hasResolvedActivePosition = useMemo(
+    () =>
+      !!filteredUserDetailsCandidate?.employee?.some(
+        (employee) => employee.positions.length > 0,
+      ),
+    [filteredUserDetailsCandidate],
+  );
+
+  const [lastResolvedUserDetails, setLastResolvedUserDetails] =
+    useState<MeDto>();
+
+  useEffect(() => {
+    if (filteredUserDetailsCandidate && hasResolvedActivePosition) {
+      setLastResolvedUserDetails(filteredUserDetailsCandidate);
+    }
+  }, [filteredUserDetailsCandidate, hasResolvedActivePosition]);
+
+  const filteredUserDetails =
+    hasResolvedActivePosition || !isFetching
+      ? filteredUserDetailsCandidate
+      : (lastResolvedUserDetails ?? filteredUserDetailsCandidate);
+
+  const selectedPosition = useMemo(
+    () =>
+      (filteredUserDetails?.employee ?? userDetails?.employee ?? [])
+        .flatMap((employee) => employee.positions)
+        .find(
+          (position) =>
+            position.employeePositionId === activePositionLookupId ||
+            position.id === activePositionLookupId ||
+            position.employeePositionId === selectedPositionId ||
+            position.id === selectedPositionId,
+        ),
+    [
+      activePositionLookupId,
+      filteredUserDetails?.employee,
+      selectedPositionId,
+      userDetails?.employee,
+    ],
+  );
+
+  const selectedPositionPermissionKeys = useMemo(
+    () =>
+      (filteredUserDetails?.employee ?? [])
+        .flatMap((employee) => employee.positions)
+        .flatMap((position) =>
+          position.permissions.map((permission) => permission.key),
+        ),
+    [filteredUserDetails],
+  );
+
+  const {
+    mutate: logoutMutate,
+    isError: logoutError,
+    isSuccess: logoutSuccess,
+  } = useMutation({
+    mutationFn: async (redirectPath?: string) => {
+      await logout();
+      return redirectPath;
+    },
+    onSuccess: (redirectPath) => {
+      // Clear user state
+      setUser(null);
+      setSelectedPositionId(null);
+
+      // Clear all cookies
+      Object.keys(Cookies.get()).forEach((cookieName) => {
+        Cookies.remove(cookieName);
+      });
+
+      // Clear only auth-related localStorage keys
+      clearRememberMePreference();
+      setRememberMePreference(false);
+      clearComplaintVerification();
+
+      // Clear all React Query cache to prevent stale data from leaking between users
+      queryClient.clear();
+
+      // Show success message
+      toast.success("Logged out successfully");
+
+      window.location.replace(redirectPath || "/");
+    },
+    onError: (error, redirectPath) => {
+      // Even if API call fails, still clear local data
+      setUser(null);
+      setSelectedPositionId(null);
+
+      Object.keys(Cookies.get()).forEach((cookieName) => {
+        Cookies.remove(cookieName);
+      });
+
+      clearRememberMePreference();
+      setRememberMePreference(false);
+      clearComplaintVerification();
+      queryClient.clear();
+
+      handleError(error);
+
+      window.location.replace(redirectPath || "/");
+    },
+  });
+
+  const {
+    mutate: loginMutate,
+    isPending: isLoggingInMutating,
+    isError: loginError,
+    isSuccess: loginSuccess,
+  } = useMutation({
+    mutationFn: async ({
+      payload,
+      rememberMeValue,
+    }: {
+      payload: LoginPayload;
+      rememberMeValue: boolean;
+    }) => {
+      const response = await login(payload);
+      if (response.data.mfaRequired) {
+        return { mfaRequired: true, rememberMeValue }; // no "data" at all
+      }
+      return { data: response.data, rememberMeValue };
+    },
+    onSuccess: async (response) => {
+      if ("mfaRequired" in response && response.mfaRequired) {
+        setRememberMePreference(response.rememberMeValue);
+        setShowOtpModal(true);
+        return;
+      }
+
+      setRememberMePreference(response.rememberMeValue);
+
+      await finalizeAuthenticatedSession({
+        token: response.data.token,
+        refreshToken: response.data.refreshToken,
+        rememberMe: response.rememberMeValue,
+      });
+
+      toast.success("Login Successful", {
+        description: "Redirecting...",
+      });
+
+      navigate("/homepage");
+    },
+
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const {
+    mutate: setPasswordMutate,
+    isPending: isSettingPassword,
+    isError: setPasswordError,
+    isSuccess: setPasswordSuccess,
+    error: setPassError,
+  } = useMutation({
+    mutationFn: async (payload: SetPasswordPayload) => {
+      const response = await setPassword(payload);
+      return response.data;
+    },
+    onSuccess: () => {
+      toast.success("Password updated successfully", {
+        description: "You can now log in with your new password.",
+      });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const {
+    mutate: setFayidaPasswordMutate,
+    isPending: isSettingFayidaPassword,
+    isError: setFayidaPasswordError,
+    isSuccess: setFayidaPasswordSuccess,
+    error: setFayidaPassError,
+  } = useMutation({
+    mutationFn: async (payload: SetFayidaPasswordPayload) => {
+      const response = await setFayidaPass(payload);
+      return response.data;
+    },
+    onSuccess: () => {
+      toast.success("Password updated successfully", {
+        description: "You can now log in with your new password.",
+      });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const {
+    mutateAsync: verifyOtpMutate,
+    isPending: isVerifyingOtp,
+    isError: isVerifyOtpError,
+    isSuccess: isVerifyOtpSuccess,
+    error: setVerifyOtpError,
+  } = useMutation({
+    mutationFn: async (payload: OtpVerificationPayload) => {
+      const response = await verifyOTPCode(payload);
+      return response; // return full response (including status, headers, data, etc)
+    },
+    onSuccess: () => {
+      toast.success("Phone Number Verified successfully");
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const {
+    mutate: resendVerificationMutate,
+    isPending: isResendingCode,
+    isError: resendError,
+    isSuccess: resendSuccess,
+    data: resendData,
+    error: resendErrorData,
+  } = useMutation({
+    mutationFn: async ({
+      phoneNumber,
+      email,
+    }: {
+      phoneNumber: string;
+      email?: string;
+    }) => {
+      const response = await resendVerificationCode({ phoneNumber, email });
+      return response;
+    },
+    onSuccess: () => {
+      toast.success("Verification code resent successfully!");
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const {
+    mutate: resendVerificationCode,
+    isPending: isResendingOtpCode,
+    isError: resendOtpError,
+    isSuccess: resendOtpSuccess,
+    data: resendOtpData,
+    error: resendOtpErrorData,
+  } = useMutation({
+    mutationFn: async ({
+      email,
+      phoneNumber,
+    }: {
+      phoneNumber: string;
+      email?: string;
+    }) => {
+      const response = await resendOtpCode({ phoneNumber, email });
+      return response;
+    },
+    onSuccess: () => {
+      toast.success("OTP code resent successfully!");
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const { mutateAsync: refreshTokenMutate } = useMutation({
+    mutationFn: async (refreshToken: string) => {
+      const response = await refreshAuthToken({ refreshToken });
+      const { token, refreshToken: newRefreshToken } = response.data;
+      setAuthCookies({
+        token,
+        refreshToken: newRefreshToken,
+        rememberMe: rememberMePreference,
+      });
+
+      return token;
+    },
+  });
+
+  const {
+    mutate: verifyMFAMutate,
+    isPending: isMFAPending,
+    isError: mfaError,
+    isSuccess: mfaSuccess,
+  } = useMutation({
+    mutationFn: async (payload: VerifyUserPayload) => {
+      const response = await verifyMFAUser(payload);
+      return response.data;
+    },
+    onSuccess: async (response) => {
+      await finalizeAuthenticatedSession({
+        token: response.token,
+        refreshToken: response.refreshToken,
+        rememberMe: rememberMePreference,
+      });
+
+      toast.success("Two Factor Authentication Successful", {
+        description: "Redirecting...",
+      });
+
+      navigate("/homepage");
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+  return {
+    userDetails: filteredUserDetails,
+    unFilteredUserDetails: userDetails,
+    selectedPosition,
+    selectedPositionPermissionKeys,
+    activePositionLookupId,
+    selectedPositionId,
+    setSelectedPositionId,
+    isLoading,
+    isFetching,
+    isError,
+    refetch,
+    login: loginMutate,
+    isLoggingIn: isLoggingInMutating,
+    logout: logoutMutate,
+    logoutError,
+    logoutSuccess,
+    loginSuccess,
+    loginError,
+    setPassword: setPasswordMutate,
+    verifyOtpMutate,
+    isVerifyingOtp,
+    isVerifyOtpError,
+    isVerifyOtpSuccess,
+    setVerifyOtpError,
+    isSettingPassword,
+    setPasswordError: {
+      message: setPassError?.message,
+    },
+    setPasswordSuccess,
+    resendVerificationCode: resendVerificationMutate,
+    isResendingCode,
+    resendError: resendErrorData ? { message: resendErrorData?.message } : null,
+    resendSuccess,
+    refreshToken: refreshTokenMutate,
+    resendOtpCode: resendVerificationCode,
+    isResendingOtpCode,
+    resendOtpError: resendOtpErrorData
+      ? { message: resendOtpErrorData?.message }
+      : null,
+    resendOtpSuccess,
+    resendOtpData,
+    resendData,
+    setFayidaPassword: setFayidaPasswordMutate,
+    setFayidaPassError,
+    setFayidaPasswordSuccess,
+    setFayidaPasswordError,
+    isSettingFayidaPassword,
+    verifyMFA: verifyMFAMutate,
+    isMFAPending,
+    mfaError,
+    mfaSuccess,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/hooks/useCombinedFilters.ts b/apps/edr-freight-web/backoffice/src/shared/hooks/useCombinedFilters.ts
new file mode 100644
index 000000000..d9222a947
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/hooks/useCombinedFilters.ts
@@ -0,0 +1,63 @@
+import * as React from "react";
+import {
+  cleanFilterParams,
+  FilterValue,
+} from "@/shared/utils/filterParams";
+
+export const useCombinedFilters = <TFilters extends object = Record<string, FilterValue>>(
+  initialFilters = {} as TFilters,
+) => {
+  const [filters, setFilters] = React.useState<Partial<TFilters>>(
+    cleanFilterParams(initialFilters),
+  );
+
+  const setFilter = React.useCallback(
+    (key: keyof TFilters, value: FilterValue) => {
+      setFilters((prev) =>
+        cleanFilterParams({
+          ...prev,
+          [key]: value,
+        } as TFilters),
+      );
+    },
+    [],
+  );
+
+  const setManyFilters = React.useCallback((nextFilters: Partial<TFilters>) => {
+    setFilters((prev) =>
+      cleanFilterParams({
+        ...prev,
+        ...nextFilters,
+      } as TFilters),
+    );
+  }, []);
+
+  const removeFilter = React.useCallback((key: keyof TFilters) => {
+    setFilters((prev) => {
+      const next = { ...prev };
+      delete next[key];
+      return cleanFilterParams(next as TFilters);
+    });
+  }, []);
+
+  const removeManyFilters = React.useCallback((keys: Array<keyof TFilters>) => {
+    setFilters((prev) => {
+      const next = { ...prev };
+      keys.forEach((key) => delete next[key]);
+      return cleanFilterParams(next as TFilters);
+    });
+  }, []);
+
+  const clearFilters = React.useCallback(() => {
+    setFilters({});
+  }, []);
+
+  return {
+    filters,
+    setFilter,
+    setFilters: setManyFilters,
+    removeFilter,
+    removeFilters: removeManyFilters,
+    clearFilters,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/hooks/useDarkMode.ts b/apps/edr-freight-web/backoffice/src/shared/hooks/useDarkMode.ts
new file mode 100644
index 000000000..8cbc4470a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/hooks/useDarkMode.ts
@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+
+export const useDarkMode = () => {
+  const [isDarkMode, setIsDarkMode] = useState(() => {
+    // Initialize from localStorage or system preference
+    const savedTheme = localStorage.getItem("darkMode");
+    if (savedTheme) {
+      return savedTheme === "true";
+    }
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  });
+
+  useEffect(() => {
+    // Apply dark mode class on mount and when isDarkMode changes
+    if (isDarkMode) {
+      document.documentElement.classList.add("dark");
+      localStorage.setItem("darkMode", "true");
+    } else {
+      document.documentElement.classList.remove("dark");
+      localStorage.setItem("darkMode", "false");
+    }
+  }, [isDarkMode]);
+
+  const toggleDarkMode = () => {
+    setIsDarkMode((prev) => !prev);
+  };
+
+  return { isDarkMode, toggleDarkMode };
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/hooks/useDelegationMonitor.ts b/apps/edr-freight-web/backoffice/src/shared/hooks/useDelegationMonitor.ts
new file mode 100644
index 000000000..0ed656b4c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/hooks/useDelegationMonitor.ts
@@ -0,0 +1,133 @@
+import { useEffect, useRef } from "react";
+import { useAuth } from "@/shared/context/AuthContext";
+import { useAuthUser } from "./useAuthUser";
+import Cookies from "js-cookie";
+import { toast } from "sonner";
+
+/**
+ * Hook to monitor delegation period and auto-logout when delegation is active
+ * - Delegatee: logged out when delegation ends
+ * - Delegator: logged out during the entire delegation period (cannot access while delegating)
+ */
+export const useDelegationMonitor = () => {
+  const { user, setUser } = useAuth();
+  const { logout } = useAuthUser();
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  const hasShownWarningRef = useRef(false);
+
+  useEffect(() => {
+    // Check if user has delegation info in their data
+    const checkDelegationStatus = () => {
+      try {
+        const authUserCookie = Cookies.get("auth-user");
+        if (!authUserCookie) return;
+
+        const userData = JSON.parse(authUserCookie);
+
+        // Check if user is a delegatee (has delegationEndDate)
+        const delegationEndDate = userData?.delegationEndDate;
+
+        // Check if user is a delegator (has delegationStartDate and delegationEndDate)
+        const delegationStartDate = userData?.delegationStartDate;
+
+        // If no delegation info, clear interval
+        if (!delegationEndDate && !delegationStartDate) {
+          if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+            intervalRef.current = null;
+          }
+          hasShownWarningRef.current = false;
+          return;
+        }
+
+        const currentTime = new Date().getTime();
+        let shouldLogout = false;
+        let logoutReason = "";
+
+        // Check delegatee status (delegation end date)
+        if (delegationEndDate) {
+          const endTime = new Date(delegationEndDate).getTime();
+          const timeRemaining = endTime - currentTime;
+
+          if (timeRemaining <= 0) {
+            shouldLogout = true;
+            logoutReason =
+              "Your delegation period has ended. You have been logged out.";
+          } else {
+            // Show warning 5 minutes before delegation ends
+            const warningThreshold = 5 * 60 * 1000; // 5 minutes in milliseconds
+            if (
+              timeRemaining <= warningThreshold &&
+              !hasShownWarningRef.current
+            ) {
+              hasShownWarningRef.current = true;
+              const minutesRemaining = Math.floor(timeRemaining / 60000);
+
+              toast.warning("Delegation Ending Soon", {
+                description: `Your delegation will end in ${minutesRemaining} minute(s). You will be logged out automatically.`,
+                duration: 10000,
+              });
+            }
+          }
+        }
+
+        // Check delegator status (delegation start date - delegator cannot access during delegation)
+        if (delegationStartDate && !shouldLogout) {
+          const startTime = new Date(delegationStartDate).getTime();
+          const endTime = delegationEndDate
+            ? new Date(delegationEndDate).getTime()
+            : startTime;
+
+          // If current time is between start and end, delegator should be logged out
+          if (currentTime >= startTime && currentTime <= endTime) {
+            shouldLogout = true;
+            logoutReason =
+              "Your delegation is currently active. You cannot access the system during this period.";
+          }
+        }
+
+        // If delegation has ended or delegator is in delegation period, logout immediately
+        if (shouldLogout) {
+          if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+            intervalRef.current = null;
+          }
+
+          toast.error("Delegation Period Active", {
+            description: logoutReason,
+          });
+
+          // Perform logout
+          logout();
+          return;
+        }
+      } catch (error) {
+        console.error("Error checking delegation status:", error);
+      }
+    };
+
+    // Check immediately on mount
+    checkDelegationStatus();
+
+    // Set up interval to check every 10 seconds for more responsive monitoring
+    intervalRef.current = setInterval(checkDelegationStatus, 10000);
+
+    // Handle page visibility - check when user returns to tab
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "visible") {
+        checkDelegationStatus();
+      }
+    };
+
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+
+    // Cleanup on unmount
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [user, logout, setUser]);
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/hooks/useErrorHandler.ts b/apps/edr-freight-web/backoffice/src/shared/hooks/useErrorHandler.ts
new file mode 100644
index 000000000..f5d37d18d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/hooks/useErrorHandler.ts
@@ -0,0 +1,252 @@
+import { useCallback } from "react";
+import { toast } from "sonner";
+import axios from "axios";
+
+// Logs an error with a flat one-liner header (method/url/status) when it's an axios error,
+// then the full error object on the next line for DevTools expansion.
+const logError = (err: unknown): void => {
+  if (axios.isAxiosError(err)) {
+    const method = err.config?.method?.toUpperCase() ?? "?";
+    const url = err.config?.url ?? "?";
+    const status = err.response?.status ?? "no-response";
+    console.error(
+      `[API ERROR] ${method} ${url} → ${status}`,
+      err.response?.data,
+    );
+    return;
+  }
+  console.error("Error caught:", err);
+};
+
+// Returns the first non-empty string found in value (string, array, or nested object with message/error/detail). Never throws.
+const extractMessage = (value: unknown): string | null => {
+  try {
+    if (value == null) return null;
+
+    if (typeof value === "string") {
+      const trimmed = value.trim();
+      return trimmed.length > 0 ? trimmed : null;
+    }
+
+    if (Array.isArray(value)) {
+      const parts: string[] = [];
+      for (const item of value) {
+        const part = extractMessage(item);
+        if (part) parts.push(part);
+      }
+      return parts.length > 0 ? parts.join(", ") : null;
+    }
+
+    if (typeof value === "object") {
+      const obj = value as Record<string, unknown>;
+      return (
+        extractMessage(obj.message) ??
+        extractMessage(obj.error) ??
+        extractMessage(obj.detail) ??
+        null
+      );
+    }
+
+    return null;
+  } catch (extractError) {
+    console.warn("extractMessage: unexpected failure", extractError);
+    return null;
+  }
+};
+
+// Maps an HTTP status code to the i18n key used when no backend message is available.
+const statusKeyFor = (status: number | undefined): string => {
+  if (status === 400 || status === 422) return "msg.validationError";
+  if (status === 401) return "msg.authError";
+  if (status === 403) return "msg.permissionError";
+  if (status === 404) return "msg.notFoundError";
+  if (status === 413) return "msg.fileTooLarge";
+  if (status !== undefined && status >= 500 && status < 600) return "msg.serverError";
+  return "msg.genericError";
+};
+
+// Detects the bulk-upload structured error shape returned by the backend:
+//   { message: "duplicate_values_found", errors: { fieldName: "code: value" } }
+// Returns { title, description } when matched, null otherwise. Description is
+// one "field: value" pair per line, suitable for a Sonner toast `description`.
+const extractBulkUploadInfo = (
+  data: unknown,
+  t: (key: string) => string,
+): { title: string; description: string } | null => {
+  if (!data || typeof data !== "object") return null;
+  const d = data as { message?: unknown; errors?: unknown };
+  if (d.message !== "duplicate_values_found") return null;
+  if (!d.errors || typeof d.errors !== "object") return null;
+
+  const lines: string[] = [];
+  for (const [field, value] of Object.entries(
+    d.errors as Record<string, unknown>,
+  )) {
+    if (typeof value === "string" && value.length > 0) {
+      lines.push(`${field}: ${value}`);
+    }
+  }
+  if (lines.length === 0) return null;
+
+  // If `msg.duplicateValuesFound` isn't in translation files yet, t() returns
+  // the raw key. Detect that and fall back to a readable English string.
+  const translatedTitle = t("msg.duplicateValuesFound");
+  const title =
+    translatedTitle === "msg.duplicateValuesFound"
+      ? "Duplicate values found"
+      : translatedTitle;
+
+  return { title, description: lines.join("\n") };
+};
+
+// Reads a Blob as JSON. Returns null on any failure.
+const parseBlobBody = async (blob: Blob): Promise<unknown> => {
+  try {
+    const text = await blob.text();
+    return JSON.parse(text);
+  } catch (parseError) {
+    console.warn("useErrorHandler: failed to parse Blob error body", parseError);
+    return null;
+  }
+};
+
+export const useErrorHandler = (
+  t: (key: string) => string,
+) => {
+  const getErrorMessage = useCallback(
+    async (err: unknown): Promise<string> => {
+      try {
+        let status: number | undefined;
+
+        if (typeof err === "object" && err !== null && "response" in err) {
+          const response = (err as any).response;
+          status = response?.status;
+          let data: unknown = response?.data;
+
+          if (data instanceof Blob) {
+            data = await parseBlobBody(data);
+          }
+
+          // Bulk-upload structured error short-circuit (highest priority).
+          const bulk = extractBulkUploadInfo(data, t);
+          if (bulk) return bulk.title;
+
+          const fromException =
+            extractMessage((data as any)?.exception?.response) ??
+            extractMessage((data as any)?.exception);
+          if (fromException) return fromException;
+
+          const fromData = extractMessage(data);
+          if (fromData) return fromData;
+        }
+
+        if (err instanceof Error) {
+          const fromError = extractMessage(err.message);
+          if (fromError) return fromError;
+        }
+
+        return t(statusKeyFor(status));
+      } catch (handlerError) {
+        console.error(
+          "useErrorHandler: unexpected error while extracting message",
+          handlerError
+        );
+        return t("msg.genericError");
+      }
+    },
+    [t]
+  );
+
+  const handleError = useCallback(
+    async (err: unknown): Promise<string> => {
+      logError(err);
+
+      // Bulk-upload short-circuit: emit one toast with title + description,
+      // skipping the normal extraction path.
+      if (typeof err === "object" && err !== null && "response" in err) {
+        let data: unknown = (err as any).response?.data;
+        if (data instanceof Blob) {
+          data = await parseBlobBody(data);
+        }
+        const bulk = extractBulkUploadInfo(data, t);
+        if (bulk) {
+          toast.error(bulk.title, { description: bulk.description });
+          return bulk.title;
+        }
+      }
+
+      const message = await getErrorMessage(err);
+      toast.error(message);
+      return message;
+    },
+    [getErrorMessage, t]
+  );
+
+  return { getErrorMessage, handleError };
+};
+
+export const useClientErrorHandler = (
+  t: (key: string) => string,
+) => {
+  const getErrorMessage = useCallback(
+    (err: unknown): string => {
+      try {
+        let status: number | undefined;
+
+        if (typeof err === "object" && err !== null) {
+          const response = (err as any).response;
+          status = response?.status;
+          const data = response?.data;
+
+          // Bulk-upload structured error short-circuit (highest priority).
+          const bulk = extractBulkUploadInfo(data, t);
+          if (bulk) return bulk.title;
+
+          const fromException =
+            extractMessage(data?.exception?.response) ??
+            extractMessage(data?.exception);
+          if (fromException) return fromException;
+
+          const fromData = extractMessage(data);
+          if (fromData) return fromData;
+
+          const fromError = extractMessage((err as any).message);
+          if (fromError) return fromError;
+        }
+
+        return t(statusKeyFor(status));
+      } catch (handlerError) {
+        console.error(
+          "useClientErrorHandler: unexpected error while extracting message",
+          handlerError
+        );
+        return t("msg.genericError");
+      }
+    },
+    [t]
+  );
+
+  const handleError = useCallback(
+    (err: unknown): string => {
+      logError(err);
+
+      // Bulk-upload short-circuit: emit one toast with title + description,
+      // skipping the normal extraction path.
+      if (typeof err === "object" && err !== null) {
+        const data = (err as any).response?.data;
+        const bulk = extractBulkUploadInfo(data, t);
+        if (bulk) {
+          toast.error(bulk.title, { description: bulk.description });
+          return bulk.title;
+        }
+      }
+
+      const message = getErrorMessage(err);
+      toast.error(message);
+      return message;
+    },
+    [getErrorMessage, t]
+  );
+
+  return { getErrorMessage, handleError };
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/hooks/useExportUserData.ts b/apps/edr-freight-web/backoffice/src/shared/hooks/useExportUserData.ts
new file mode 100644
index 000000000..f4a384730
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/hooks/useExportUserData.ts
@@ -0,0 +1,85 @@
+import { useState } from "react";
+import {
+  exportService,
+  ExportUserDataResponse,
+} from "../services/exportService";
+import { toast } from "sonner";
+
+export const useExportUserData = () => {
+  const [isExporting, setIsExporting] = useState(false);
+  const [isLoadingUnits, setIsLoadingUnits] = useState(false);
+  const [units, setUnits] = useState<unknown[]>([]);
+
+  const getUnits = async (organizationId: string) => {
+    if (!organizationId) {
+      toast.error("Organization ID is required");
+      return;
+    }
+
+    setIsLoadingUnits(true);
+    try {
+      const result = await exportService.getUnitsList(organizationId);
+      if (result.success) {
+        setUnits(result.data?.items || []);
+        return result.data?.items || [];
+      } else {
+        toast.error(result.message);
+        return [];
+      }
+    } catch (error: unknown) {
+      toast.error("Failed to fetch units");
+      return [];
+    } finally {
+      setIsLoadingUnits(false);
+    }
+  };
+
+  const exportUserData = async (
+    unitId: string,
+    format: "xlsx" | "csv" = "xlsx"
+  ): Promise<ExportUserDataResponse> => {
+    if (!unitId) {
+      const error = {
+        success: false,
+        message: "Unit ID is required",
+        data: null,
+      };
+      toast.error(error.message);
+      return error;
+    }
+
+    setIsExporting(true);
+
+    try {
+      const result = await exportService.exportUserData(unitId, format);
+
+      if (result.success) {
+        toast.success(
+          `User data exported successfully as ${format.toUpperCase()}!`
+        );
+      } else {
+        toast.error(result.message);
+      }
+
+      return result;
+    } catch (error: unknown) {
+      const errorResult = {
+        success: false,
+        message: (error as any)?.message || "Export failed. Please try again.",
+        data: null,
+      };
+      toast.error(errorResult.message);
+      return errorResult;
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  return {
+    exportUserData,
+    getUnits,
+    isExporting,
+    isLoadingUnits,
+    units,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/hooks/useExternalPortalSession.ts b/apps/edr-freight-web/backoffice/src/shared/hooks/useExternalPortalSession.ts
new file mode 100644
index 000000000..aacd0ec57
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/hooks/useExternalPortalSession.ts
@@ -0,0 +1,31 @@
+import Cookies from "js-cookie";
+import { useLocation } from "react-router-dom";
+import { useAuth } from "@/shared/context/AuthContext";
+import { useUser } from "@/shared/context/UserContext";
+
+export function useExternalPortalSession() {
+  const { user: authUser } = useAuth();
+  const userDetails = useUser();
+  const location = useLocation();
+
+  const hasAuthToken = Boolean(Cookies.get("auth-token"));
+  const resolvedUser = userDetails ?? authUser;
+  const userType = resolvedUser?.userType;
+  const isExternalPortalUser =
+    userType === "external_organization" || userType === "individual";
+  const isAuthenticated = Boolean(resolvedUser || hasAuthToken);
+  const isOnExternalPortalRoute = location.pathname.startsWith(
+    "/external-portal",
+  );
+
+  const showExternalPortalChrome =
+    isAuthenticated && (isExternalPortalUser || isOnExternalPortalRoute);
+
+  return {
+    isAuthenticated,
+    isExternalPortalUser,
+    showExternalPortalChrome,
+    resolvedUser,
+    hasAuthToken,
+  };
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/hooks/useHas.ts b/apps/edr-freight-web/backoffice/src/shared/hooks/useHas.ts
new file mode 100644
index 000000000..29d8fa221
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/hooks/useHas.ts
@@ -0,0 +1,22 @@
+import { usePermissions } from "@/shared/context/PermissionContext";
+import { Permission } from "@/permissions";
+import { ReactNode } from "react";
+
+interface WithPermissionProps {
+  perms: Permission[];
+  fallback?: ReactNode;
+  children: ReactNode;
+}
+
+export const useHas = (reqPerms: Permission[]) => {
+  const { permissions } = usePermissions();
+  return reqPerms.some((p) => permissions.includes(p));
+};
+
+export const WithPermission = ({
+  perms,
+  fallback = null,
+  children,
+}: WithPermissionProps) => {
+  return useHas(perms) ? children : fallback;
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/hooks/useNotification.ts b/apps/edr-freight-web/backoffice/src/shared/hooks/useNotification.ts
new file mode 100644
index 000000000..aadf3f879
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/hooks/useNotification.ts
@@ -0,0 +1,218 @@
+import { useState, useEffect, useCallback } from "react";
+import {
+  getAllNotification,
+  getUnSeenNotification,
+  readNotification,
+} from "@/shared/services/notificationService";
+
+export interface Notification {
+  id: string;
+  createdAt: string;
+  message: string;
+  isSeen: boolean;
+  subject: { en: string };
+  itemId: string;
+  updatedAt: string;
+  metadata: {
+    route: string;
+    recordType: string;
+  };
+}
+
+interface Params {
+  take: number;
+  skip: number;
+  orderBy: string;
+}
+
+const SOCKET_NOTIFICATION_EVENT = "record-management:notification-received";
+
+const mergeUniqueById = (items: Notification[]): Notification[] => {
+  const seen = new Set<string>();
+  return items.filter((item) => {
+    if (!item?.id || seen.has(item.id)) return false;
+    seen.add(item.id);
+    return true;
+  });
+};
+
+const normalizeNotification = (raw: any): Notification | null => {
+  if (!raw || !raw.message) return null;
+  const now = new Date().toISOString();
+  const subject =
+    typeof raw.subject === "object" && raw.subject !== null
+      ? raw.subject
+      : { en: String(raw.subject || "Notification") };
+  const metadata =
+    typeof raw.metadata === "object" && raw.metadata !== null
+      ? {
+          route: String(raw.metadata.route || ""),
+          recordType: String(raw.metadata.recordType || ""),
+        }
+      : { route: "", recordType: "" };
+
+  return {
+    id: String(raw.id || raw.itemId || `rt-${Date.now()}`),
+    createdAt: String(raw.createdAt || raw.timestamp || now),
+    updatedAt: String(raw.updatedAt || raw.createdAt || raw.timestamp || now),
+    message: String(raw.message),
+    isSeen: Boolean(raw.isSeen),
+    subject: { en: String(subject.en || "Notification") },
+    itemId: String(raw.itemId || raw.id || ""),
+    metadata,
+  };
+};
+
+export const useNotifications = (
+  initialParams: Params,
+  externalSetUnseenCount?: (count: number) => void,
+) => {
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+  const [unseenCount, setUnseenCount] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [hasMore, setHasMore] = useState(true);
+  const [params, setParams] = useState<Params>(initialParams);
+
+  useEffect(() => {
+    const newUnseenCount = notifications.filter((n) => !n.isSeen).length;
+    setUnseenCount(newUnseenCount);
+    if (externalSetUnseenCount) externalSetUnseenCount(newUnseenCount);
+  }, [notifications, externalSetUnseenCount]);
+
+  const fetchNotifications = useCallback(
+    async (newParams: Params, reset = false) => {
+      if (!reset && !hasMore) return;
+
+      setLoading(true);
+      setError(null);
+      try {
+        const response = await getAllNotification({
+          ...newParams,
+          orderBy: "createdAt:DESC",
+        });
+
+        // ✅ Normalize items safely
+        const items: Notification[] = Array.isArray(response.data?.items)
+          ? response.data.items
+          : Array.isArray(response.data)
+            ? response.data
+            : [];
+
+        setNotifications((prev) =>
+          reset ? mergeUniqueById(items) : mergeUniqueById([...prev, ...items]),
+        );
+
+        setHasMore(items.length === newParams.take);
+      } catch (err: any) {
+        setError(err.message || "Failed to fetch notifications");
+      } finally {
+        setLoading(false);
+      }
+    },
+    [hasMore],
+  );
+
+  const fetchUnseenCount = useCallback(async () => {
+    try {
+      const response = await getUnSeenNotification({
+        take: 1,
+        skip: 0,
+        orderBy: "createdAt:DESC",
+      });
+
+      // Use the total count from the paginated response directly
+      const count =
+        response.data?.count ??
+        response.data?.total ??
+        (Array.isArray(response.data?.items)
+          ? response.data.items.length
+          : Array.isArray(response.data)
+            ? response.data.length
+            : 0);
+
+      setUnseenCount(count);
+      if (externalSetUnseenCount) {
+        externalSetUnseenCount(count);
+      }
+    } catch (err) {
+      console.error("Error fetching unseen count", err);
+    }
+  }, [externalSetUnseenCount]);
+
+  const markAsRead = useCallback(
+    async (id: string) => {
+      try {
+        await readNotification(id);
+        setNotifications((prev) =>
+          prev.map((n) => (n.id === id ? { ...n, isSeen: true } : n)),
+        );
+        setUnseenCount((prev) => (prev > 0 ? prev - 1 : 0));
+        fetchUnseenCount();
+      } catch (err) {
+        console.error("Error marking as read", err);
+      }
+    },
+    [fetchUnseenCount],
+  );
+
+  const refresh = useCallback(() => {
+    setParams(initialParams);
+    fetchNotifications(initialParams, true);
+    fetchUnseenCount();
+  }, [initialParams, fetchNotifications, fetchUnseenCount]);
+
+  useEffect(() => {
+    fetchNotifications(params);
+  }, [params, fetchNotifications]);
+
+  useEffect(() => {
+    fetchNotifications(initialParams, true);
+    fetchUnseenCount();
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Poll unseen count every 30 s so the badge stays fresh without a full refresh
+  useEffect(() => {
+    const id = setInterval(fetchUnseenCount, 30_000);
+    return () => clearInterval(id);
+  }, [fetchUnseenCount]);
+
+  useEffect(() => {
+    const handleSocketNotification = (event: Event) => {
+      const payload = (event as CustomEvent).detail;
+      const normalized = normalizeNotification(payload);
+      if (!normalized) return;
+      setNotifications((prev) => mergeUniqueById([normalized, ...prev]));
+      // New real-time notification is always unseen — bump the badge immediately
+      if (!normalized.isSeen) {
+        setUnseenCount((prev) => {
+          const next = prev + 1;
+          if (externalSetUnseenCount) externalSetUnseenCount(next);
+          return next;
+        });
+      }
+    };
+
+    window.addEventListener(
+      SOCKET_NOTIFICATION_EVENT,
+      handleSocketNotification as EventListener,
+    );
+    return () => {
+      window.removeEventListener(
+        SOCKET_NOTIFICATION_EVENT,
+        handleSocketNotification as EventListener,
+      );
+    };
+  }, []);
+
+  return {
+    notifications,
+    unseenCount,
+    loading,
+    error,
+    hasMore,
+    markAsRead,
+    refresh,
+    setParams,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/hooks/useOrganizationReport.ts b/apps/edr-freight-web/backoffice/src/shared/hooks/useOrganizationReport.ts
new file mode 100644
index 000000000..3b6d53249
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/hooks/useOrganizationReport.ts
@@ -0,0 +1,229 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import {
+  getOrganizationReport,
+  OrganizationReport,
+  getOrganizationEmployees,
+  getOrganizationDepartments,
+  getOrganizationUnits,
+} from "@/super-admin/services/api/dashboardApi";
+import { useAuth } from "@/shared/context/AuthContext";
+import { useState } from "react";
+import { FilterEnum, getDocumentRequirements, getDocumentRequirementsByFilter, giveResponse, postDocumentRequirements } from "../services/organizationsService";
+import { toast } from "sonner";
+import { DocumentRequirementDto, ResponseActionDto } from "../dto/External-Portal/External-PortalDto";
+import { AxiosResponse } from "axios";
+
+type GiveResponseVariables = {
+  id: string;
+  data: ResponseActionDto;
+};
+
+export type RequirementDoc = {
+  items: any[]; // replace `any` with your Document type
+  count: number;
+};
+
+
+export const useOrganizationReport = (
+  organizationId?: string,
+  options?: { enabled?: boolean },
+) => {
+  const { user } = useAuth();
+  const [fallbackMode, setFallbackMode] = useState(false);
+  const enabled = options?.enabled ?? true;
+
+  // Use the first employee's organizationId as the organization ID if not provided
+  const orgId = organizationId || user?.employee?.[0]?.organizationId;
+
+  // Main query to get the complete organization report
+  const {
+    data,
+    isLoading: isMainLoading,
+    isError: isMainError,
+    error: mainError,
+    refetch,
+  } = useQuery<OrganizationReport>({
+    queryKey: ["organizationReport", orgId],
+    queryFn: async () => {
+      if (!orgId) {
+        throw new Error("Organization ID is required");
+      }
+      try {
+        const response = await getOrganizationReport(orgId);
+        return response.data;
+      } catch (error) {
+        // If the main endpoint fails, switch to fallback mode
+        setFallbackMode(true);
+        throw error;
+      }
+    },
+    enabled: enabled && !!orgId && !fallbackMode, // Only run if we have an organization ID and not in fallback mode
+    staleTime: 5 * 60 * 1000, // 5 minutes
+  });
+
+  // Fallback queries for individual data points
+  const { data: employeesData, isLoading: isEmployeesLoading } = useQuery({
+    queryKey: ["organizationEmployees", orgId],
+    queryFn: async () => {
+      if (!orgId) throw new Error("Organization ID is required");
+      const { data } = await getOrganizationEmployees(orgId);
+      return data.total;
+    },
+    enabled: enabled && !!orgId && fallbackMode,
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const { data: departmentsData, isLoading: isDepartmentsLoading } = useQuery({
+    queryKey: ["organizationDepartments", orgId],
+    queryFn: async () => {
+      if (!orgId) throw new Error("Organization ID is required");
+      const { data } = await getOrganizationDepartments(orgId);
+      return data.total;
+    },
+    enabled: enabled && !!orgId && fallbackMode,
+    staleTime: 5 * 60 * 1000,
+  });
+
+const {
+  data: documentRequirementData,
+  isLoading: isDocumentRequirementLoading,
+} = useQuery({
+  queryKey: ["documentRequirement"],
+  queryFn: async () => {
+    const response = await getDocumentRequirements();
+    return {
+      count: response.data.count,
+      items: response.data.items,
+    };
+  },
+  staleTime: 5 * 60 * 1000,
+});
+
+
+
+  const { data: unitsData, isLoading: isUnitsLoading } = useQuery({
+    queryKey: ["organizationUnits", orgId],
+    queryFn: async () => {
+      if (!orgId) throw new Error("Organization ID is required");
+      const { data } = await getOrganizationUnits(orgId);
+      return data.total;
+    },
+    enabled: enabled && !!orgId && fallbackMode,
+    staleTime: 5 * 60 * 1000,
+  });
+
+  // Combine data from individual queries if in fallback mode
+  const fallbackData: OrganizationReport | undefined = fallbackMode
+    ? {
+        employeesCount: employeesData || 0,
+        positionsCount: 0, // Default value since we don't have a separate endpoint
+        unitsCount: unitsData || 0,
+        totalDocuments: 0, // Default value since we don't have a separate endpoint
+        recentActivities: [], // Default empty array since we don't have a separate endpoint
+      }
+    : undefined;
+
+  // Determine if we're still loading data
+  const isLoading = fallbackMode
+    ? isEmployeesLoading || isDepartmentsLoading || isUnitsLoading
+    : isMainLoading;
+
+  // Use fallback data if in fallback mode, otherwise use main data
+  const reportData = fallbackMode ? fallbackData : data;
+
+
+  const createDocumentRequirements = async(values:DocumentRequirementDto)=>{
+    try{
+      const response = await postDocumentRequirements(values);
+      return response.data;
+      }catch(error){
+        console.error(error);
+        toast.error("Error in Creating Document Requirements")
+    }
+  }
+
+  return {
+    report: reportData,
+    isLoading,
+    isError: isMainError && fallbackMode,
+    error: mainError,
+    refetch,
+    isDocumentRequirementLoading,
+    documentRequirementData,
+    createDocumentRequirements
+  };
+};
+
+
+export const useGiveResponse = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [data, setData] = useState<any>(null);
+
+
+  const mutate = async ({ id, data }: GiveResponseVariables) => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const response = await giveResponse(id, data);
+      setData(response.data);
+      return response;
+    } catch (err: any) {
+      const errorMessage =
+        err.response?.data?.message || "An unexpected error occurred";
+      setError(errorMessage);
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+    const mutateDocumetary = async (values: DocumentRequirementDto) => {
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        const response = await postDocumentRequirements(values);
+        setData(response.data);
+        return response;
+      } catch (err: any) {
+        const errorMessage =
+          err.response?.data?.message || "An unexpected error occurred";
+        setError(errorMessage);
+        throw err;
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+  return {
+    mutate,
+    isLoading,
+    error,
+    data,
+    mutateDocumetary,
+    
+  };
+};
+
+
+
+export const useDocumentRequirement = (filterData?: FilterEnum) => {
+  const { data, isLoading: isRequirementLoading } = useQuery<RequirementDoc>({
+    queryKey: ["organizationUnits", filterData],
+    queryFn: async () => {
+      if (!filterData) throw new Error("User Type is required");
+      const { data } = await getDocumentRequirementsByFilter(filterData);
+      return {
+        items: data.items as DocumentRequirementDto[],
+        count: data.count,
+      };
+    },
+    enabled: !!filterData,
+    staleTime: 5 * 60 * 1000,
+  });
+
+  // always return a defined shape
+  const requirementDoc: RequirementDoc = data ?? { items: [], count: 0 };
+  return { requirementDoc, isRequirementLoading };
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/hooks/usePersistedColumnVisibility.ts b/apps/edr-freight-web/backoffice/src/shared/hooks/usePersistedColumnVisibility.ts
new file mode 100644
index 000000000..f0595b51c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/hooks/usePersistedColumnVisibility.ts
@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+import { VisibilityState } from "@tanstack/react-table";
+import {
+  getColumnVisibility,
+  setColumnVisibility,
+} from "@/shared/utils/columnVisibilityStorage";
+
+/**
+ * Column visibility state that persists per table (keyed by `tableName`)
+ * across refreshes and navigation. Falls back to `defaultVisibility` when
+ * nothing has been saved yet.
+ */
+export const usePersistedColumnVisibility = (
+  tableName: string,
+  defaultVisibility: VisibilityState,
+): [VisibilityState, React.Dispatch<React.SetStateAction<VisibilityState>>] => {
+  const [columnVisibility, setColumnVisibilityState] =
+    useState<VisibilityState>(
+      () => getColumnVisibility(tableName) ?? defaultVisibility,
+    );
+
+  useEffect(() => {
+    setColumnVisibility(tableName, columnVisibility);
+  }, [tableName, columnVisibility]);
+
+  return [columnVisibility, setColumnVisibilityState];
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/hooks/usePositionConfigurations.ts b/apps/edr-freight-web/backoffice/src/shared/hooks/usePositionConfigurations.ts
new file mode 100644
index 000000000..0ba57a140
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/hooks/usePositionConfigurations.ts
@@ -0,0 +1,107 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import {
+  PositionConfiguration,
+  PositionConfigurationPayload,
+  fetchPositionConfigurationByPositionId,
+  savePositionConfiguration,
+} from "../services/positionConfigurationService";
+
+export const usePositionConfigurationByPositionId = (positionId: string) => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  const {
+    data: configuration,
+    isLoading,
+    isError,
+    error,
+    refetch,
+    isFetching,
+  } = useQuery({
+    queryKey: ["position-configuration", positionId],
+    queryFn: () => fetchPositionConfigurationByPositionId(positionId),
+    enabled: !!positionId,
+  });
+
+  const saveMutation = useMutation({
+    mutationFn: (payload: PositionConfigurationPayload) =>
+      savePositionConfiguration(payload, configuration?.id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["position-configuration", positionId],
+      });
+      toast.success(
+        t(
+          "setting.configSaved",
+          "Position configuration saved successfully",
+        ),
+      );
+    },
+    onError: (saveError) => {
+      handleError(saveError);
+    },
+  });
+
+  return {
+    configuration: configuration ?? null,
+    isLoading: isLoading || isFetching,
+    isError,
+    error,
+    refetch,
+    saveConfiguration: saveMutation.mutate,
+    saveConfigurationAsync: saveMutation.mutateAsync,
+    isSaving: saveMutation.isPending,
+  };
+};
+
+/** @deprecated Use usePositionConfigurationByPositionId instead */
+export const usePositionConfigurations = (positionId: string) => {
+  const result = usePositionConfigurationByPositionId(positionId);
+
+  return {
+    configurations: result.configuration ? [result.configuration] : [],
+    isLoading: result.isLoading,
+    isError: result.isError,
+    error: result.error,
+    refetch: result.refetch,
+    createConfiguration: (
+      payload: PositionConfigurationPayload,
+      options?: { onSuccess?: () => void },
+    ) => {
+      result.saveConfiguration(payload, {
+        onSuccess: () => options?.onSuccess?.(),
+      });
+    },
+    updateConfiguration: (
+      {
+        payload,
+      }: {
+        id?: string;
+        payload: PositionConfigurationPayload;
+      },
+      options?: { onSuccess?: () => void },
+    ) => {
+      result.saveConfiguration(payload, {
+        onSuccess: () => options?.onSuccess?.(),
+      });
+    },
+    deleteConfiguration: () => undefined,
+    isCreating: result.isSaving,
+    isUpdating: result.isSaving,
+    isDeleting: false,
+  };
+};
+
+export const usePositionConfiguration = (positionId: string) => {
+  return useQuery({
+    queryKey: ["position-configuration", positionId],
+    queryFn: () => fetchPositionConfigurationByPositionId(positionId),
+    enabled: !!positionId,
+  });
+};
+
+export type { PositionConfiguration };
diff --git a/apps/edr-freight-web/backoffice/src/shared/hooks/usePrefixSuffix.ts b/apps/edr-freight-web/backoffice/src/shared/hooks/usePrefixSuffix.ts
new file mode 100644
index 000000000..e156afee9
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/hooks/usePrefixSuffix.ts
@@ -0,0 +1,308 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  PrefixSuffixName,
+  PrefixSuffixDto,
+  prefixSuffixService,
+} from "@/user-management/services/api/prefixSuffixService";
+
+export type ExtendedPrefixSuffixDto = PrefixSuffixDto & {
+  type:
+    | "prefix"
+    | "suffix"
+    | "reference"
+    | "externalReference"
+    | "internalMemoReference";
+  isForCC: boolean;
+  configId?: string;
+  name: PrefixSuffixName | string;
+  internalPrefix: PrefixSuffixName | null;
+  internalSuffix: PrefixSuffixName | null;
+  internalPrefixCC: PrefixSuffixName | null;
+  internalSuffixCC: PrefixSuffixName | null;
+  referenceNumberPrefix: string | null;
+  externalReferenceNumberPrefix: string | null;
+  internalMemoReferenceNumberPrefix: string | null;
+};
+
+const shouldFetch = (type: string | undefined, expected: string[]) =>
+  !type || type === "all" || expected.includes(type);
+
+export const usePrefixSuffix = (
+  unitId: string,
+  selectedRecordTypeFilter?: string,
+  isCCFilter?: boolean,
+  skip: number = 0,
+  take: number = 10
+) => {
+  return useQuery({
+    queryKey: ["prefixSuffix", unitId, selectedRecordTypeFilter, isCCFilter, skip, take],
+    enabled: !!unitId,
+    staleTime: 10 * 60 * 1000,
+    queryFn: async () => {
+      const isRef = selectedRecordTypeFilter === "reference" || selectedRecordTypeFilter === "externalReference";
+      const shouldFetchReg = !isCCFilter || isRef;
+      const types = [
+        "external",
+        "internal_memo",
+        "branch",
+        "non_smart_user",
+        "internal",
+      ];
+      const validType = types.includes(selectedRecordTypeFilter ?? "");
+      const typeKey = validType ? selectedRecordTypeFilter ?? "" : "";
+
+      const [
+        prefixRes,
+        suffixRes,
+        ccPrefixRes,
+        ccSuffixRes,
+        internalConfigRes,
+      ] = await Promise.all([
+        shouldFetchReg &&
+        shouldFetch(selectedRecordTypeFilter, ["prefix", ...types])
+          ? prefixSuffixService.getPrefix(unitId, typeKey, skip, take)
+          : { data: { items: [], count: 0 } },
+
+        shouldFetchReg &&
+        shouldFetch(selectedRecordTypeFilter, ["suffix", ...types])
+          ? prefixSuffixService.getSuffix(unitId, typeKey, skip, take)
+          : { data: { items: [], count: 0 } },
+
+        isCCFilter &&
+        shouldFetch(selectedRecordTypeFilter, ["prefix", ...types])
+          ? prefixSuffixService.getPrefixCC(unitId, typeKey, skip, take)
+          : { data: { items: [], count: 0 } },
+
+        isCCFilter &&
+        shouldFetch(selectedRecordTypeFilter, ["suffix", ...types])
+          ? prefixSuffixService.getSuffixCC(unitId, typeKey, skip, take)
+          : { data: { items: [], count: 0 } },
+
+        // ✅ also fetch config for "reference"
+        [
+          "internal_memo",
+          "internal",
+          "reference",
+          "externalReference",
+          "internalMemoReference",
+        ].includes(selectedRecordTypeFilter ?? "")
+          ? prefixSuffixService.getInternalConfig(unitId)
+          : { data: {} },
+      ]);
+
+      const mapItems = (
+        items: PrefixSuffixDto[] = [],
+        type: "prefix" | "suffix",
+        isForCC = false
+      ): ExtendedPrefixSuffixDto[] =>
+        items.map((item) => ({
+          ...item,
+          type,
+          isForCC,
+          internalPrefix: null,
+          internalSuffix: null,
+          internalPrefixCC: null,
+          internalSuffixCC: null,
+          referenceNumberPrefix: null,
+          externalReferenceNumberPrefix: null,
+          internalMemoReferenceNumberPrefix: null,
+          
+        }));
+
+      const result: ExtendedPrefixSuffixDto[] = [
+        ...mapItems(prefixRes.data.items, "prefix"),
+        ...mapItems(suffixRes.data.items, "suffix"),
+        ...mapItems(ccPrefixRes.data.items, "prefix", true),
+        ...mapItems(ccSuffixRes.data.items, "suffix", true),
+      ];
+
+      // ✅ Add internalConfig-based values
+      const internalData =
+        "items" in internalConfigRes.data
+          ? internalConfigRes.data.items?.[0]
+          : undefined;
+      if (internalData) {
+        const internalPrefix = internalData.internalPrefix ?? null;
+        const internalSuffix = internalData.internalSuffix ?? null;
+        const internalPrefixCC = internalData.internalPrefixCC ?? null;
+        const internalSuffixCC = internalData.internalSuffixCC ?? null;
+        const referenceNumberPrefix = internalData.referenceNumberPrefix ?? null;
+        const externalReferenceNumberPrefix =
+          internalData.externalReferenceNumberPrefix ?? null;
+        const internalMemoReferenceNumberPrefix =
+          internalData.internalMemoReferenceNumberPrefix ?? null;
+
+        if (
+          ["internal", "internal_memo"].includes(selectedRecordTypeFilter ?? "")
+        ) {
+          result.push(
+            {
+              id: "internalPrefix",
+              type: "prefix",
+              isForCC: false,
+              recordTypeKey: selectedRecordTypeFilter ?? "internal",
+              configId: internalData.id,
+               name: internalPrefix ?? { am: "", en: "" },
+               internalPrefix,
+               internalSuffix,
+               internalPrefixCC,
+               internalSuffixCC,
+               referenceNumberPrefix,
+               createdAt: "",
+               updatedAt: "",
+               externalReferenceNumberPrefix,
+               internalMemoReferenceNumberPrefix,
+             },
+             {
+               id: "internalSuffix",
+               type: "suffix",
+               isForCC: false,
+               recordTypeKey: selectedRecordTypeFilter ?? "internal",
+               configId: internalData.id,
+               name: internalSuffix ?? { am: "", en: "" },
+               internalPrefix,
+               internalSuffix,
+               internalPrefixCC,
+               internalSuffixCC,
+               referenceNumberPrefix,
+               createdAt: "",
+               updatedAt: "",
+               externalReferenceNumberPrefix,
+               internalMemoReferenceNumberPrefix,
+             },
+             {
+               id: "internalPrefixCC",
+               type: "prefix",
+               isForCC: true,
+               recordTypeKey: selectedRecordTypeFilter ?? "internal",
+               configId: internalData.id,
+               name: internalPrefixCC ?? { am: "", en: "" },
+               internalPrefix,
+               internalSuffix,
+               internalPrefixCC,
+               internalSuffixCC,
+               referenceNumberPrefix,
+               createdAt: "",
+               updatedAt: "",
+               externalReferenceNumberPrefix,
+               internalMemoReferenceNumberPrefix,
+             },
+             {
+               id: "internalSuffixCC",
+               type: "suffix",
+               isForCC: true,
+               recordTypeKey: selectedRecordTypeFilter ?? "internal",
+               configId: internalData.id,
+               name: internalSuffixCC ?? { am: "", en: "" },
+               internalPrefix,
+               internalSuffix,
+               internalPrefixCC,
+               internalSuffixCC,
+               referenceNumberPrefix,
+               createdAt: "",
+               updatedAt: "",
+               externalReferenceNumberPrefix,
+               internalMemoReferenceNumberPrefix,
+             }
+           );
+         }
+
+        // ✅ Always handle "reference" from internal config
+        if (selectedRecordTypeFilter === "reference") {
+          result.push({
+            id: "internalReference",
+            type: "reference",
+            isForCC: false,
+            recordTypeKey: "reference",
+            configId: internalData.id,
+            name: {
+              am: referenceNumberPrefix ?? "",
+              en: referenceNumberPrefix ?? "",
+            },
+            internalPrefix,
+            internalSuffix,
+            internalPrefixCC,
+            internalSuffixCC,
+            referenceNumberPrefix,
+            createdAt: "",
+            updatedAt: "",
+            externalReferenceNumberPrefix,
+            internalMemoReferenceNumberPrefix,
+          });
+        }
+        // ✅ Always handle "reference" from internal config
+        if (selectedRecordTypeFilter === "externalReference") {
+          result.push({
+            id: "internalReference",
+            type: "externalReference",
+            isForCC: false,
+            recordTypeKey: "reference",
+            configId: internalData.id,
+            name: {
+              am: externalReferenceNumberPrefix ?? "",
+              en: externalReferenceNumberPrefix ?? "",
+            },
+            internalPrefix,
+            internalSuffix,
+            internalPrefixCC,
+            internalSuffixCC,
+            referenceNumberPrefix,
+            createdAt: "",
+            updatedAt: "",
+            externalReferenceNumberPrefix,
+            internalMemoReferenceNumberPrefix,
+          });
+        }
+         if (selectedRecordTypeFilter === "internalMemoReference") {
+           result.push({
+             id: "internalReference",
+             type: "internalMemoReference",
+             isForCC: false,
+             recordTypeKey: "reference",
+             configId: internalData.id,
+             name: {
+               am: internalMemoReferenceNumberPrefix ?? "",
+               en: internalMemoReferenceNumberPrefix ?? "",
+              },
+              internalPrefix,
+              internalSuffix,
+              internalPrefixCC,
+              internalSuffixCC,
+              referenceNumberPrefix,
+              createdAt: "",
+              updatedAt: "",
+              externalReferenceNumberPrefix,
+              internalMemoReferenceNumberPrefix,
+            });
+          }
+      }
+
+      // ✅ Filter logic
+      let filtered = isCCFilter
+        ? result.filter((item) => item.isForCC)
+        : result;
+
+      if (
+        ["prefix", "suffix", "reference"].includes(
+          selectedRecordTypeFilter ?? ""
+        )
+      ) {
+        filtered = filtered.filter(
+          (item) => item.type === selectedRecordTypeFilter
+        );
+      } else if (validType) {
+        filtered = filtered.filter(
+          (item) => item.recordTypeKey === selectedRecordTypeFilter
+        );
+      }
+
+      // Get total count from the first response that has data
+      const totalCount = prefixRes.data.count || suffixRes.data.count || ccPrefixRes.data.count || ccSuffixRes.data.count || 0;
+
+      return {
+        items: filtered,
+        count: totalCount
+      };
+    },
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/hooks/useReferenceNumberPrefixes.ts b/apps/edr-freight-web/backoffice/src/shared/hooks/useReferenceNumberPrefixes.ts
new file mode 100644
index 000000000..ea88642c9
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/hooks/useReferenceNumberPrefixes.ts
@@ -0,0 +1,121 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  AddReferenceNumberPayload,
+  DeleteReferenceNumberPayload,
+  unitConfigurationService,
+  UpdateExternalReferencePrefixPayload,
+  UpdateInternalMemoPrefixPayload,
+} from "@/shared/services/unitConfigurationService";
+
+export const useGetReferenceNumbers = (unitId: string) =>
+  useQuery({
+    queryKey: ["unit-reference-numbers", unitId],
+    queryFn: () => unitConfigurationService.getReferenceNumbers(unitId),
+    enabled: !!unitId,
+  });
+
+export const useGetTagBasedReferences = (unitId: string, tagId?: string) =>
+  useQuery({
+    queryKey: ["tag-based-reference-numbers", unitId, tagId],
+    queryFn: () =>
+      unitConfigurationService.getTagBasedReferences(unitId, tagId),
+    enabled: !!unitId,
+  });
+
+export const useGetUnitConfiguration = (unitId: string) =>
+  useQuery({
+    queryKey: ["unit-configuration", unitId],
+    queryFn: () => unitConfigurationService.getUnitConfiguration(unitId),
+    enabled: !!unitId,
+  });
+
+export const useAddReferenceNumber = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      unitId,
+      payload,
+    }: {
+      unitId: string;
+      payload: AddReferenceNumberPayload;
+    }) => unitConfigurationService.addReferenceNumber(unitId, payload),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ["unit-reference-numbers", variables.unitId],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["unit-configuration", variables.unitId],
+      });
+    },
+  });
+};
+
+export const useUpdateInternalMemoReferencePrefix = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      unitId,
+      payload,
+    }: {
+      unitId: string;
+      payload: UpdateInternalMemoPrefixPayload;
+    }) =>
+      unitConfigurationService.updateInternalMemoReferencePrefix(
+        unitId,
+        payload,
+      ),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ["unit-reference-numbers", variables.unitId],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["unit-configuration", variables.unitId],
+      });
+    },
+  });
+};
+
+export const useUpdateExternalReferencePrefix = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      unitId,
+      payload,
+    }: {
+      unitId: string;
+      payload: UpdateExternalReferencePrefixPayload;
+    }) =>
+      unitConfigurationService.updateExternalReferencePrefix(unitId, payload),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ["unit-reference-numbers", variables.unitId],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["unit-configuration", variables.unitId],
+      });
+    },
+  });
+};
+
+export const useDeleteReferenceNumber = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      unitId,
+      id,
+      payload,
+    }: {
+      unitId: string;
+      id: string;
+      payload: DeleteReferenceNumberPayload;
+    }) => unitConfigurationService.deleteReferenceNumber(id, payload),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ["unit-reference-numbers", variables.unitId],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["unit-configuration", variables.unitId],
+      });
+    },
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/hooks/useReminder.ts b/apps/edr-freight-web/backoffice/src/shared/hooks/useReminder.ts
new file mode 100644
index 000000000..02c44fb9b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/hooks/useReminder.ts
@@ -0,0 +1,200 @@
+import { useState, useEffect, useCallback } from "react";
+import { toast } from "sonner";
+
+export interface Reminder {
+  id: string;
+  notificationId: string;
+  message: string;
+  subject: { en: string; am?: string };
+  remindAt: string; // ISO timestamp
+  itemId: string;
+  metadata?: {
+    route?: string;
+    recordType?: string;
+  };
+  createdAt: string;
+  status: "pending" | "triggered" | "dismissed";
+}
+
+const STORAGE_KEY = "smartoffice_reminders";
+
+// Helper to get reminders from localStorage
+const getStoredReminders = (): Reminder[] => {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    return stored ? JSON.parse(stored) : [];
+  } catch (error) {
+    console.error("Error reading reminders from localStorage:", error);
+    return [];
+  }
+};
+
+// Helper to save reminders to localStorage
+const saveReminders = (reminders: Reminder[]) => {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(reminders));
+  } catch (error) {
+    console.error("Error saving reminders to localStorage:", error);
+  }
+};
+
+export const useReminder = () => {
+  const [reminders, setReminders] = useState<Reminder[]>([]);
+  const [activeTimeouts, setActiveTimeouts] = useState<Map<string, NodeJS.Timeout>>(new Map());
+
+  // Load reminders from localStorage on mount
+  useEffect(() => {
+    const stored = getStoredReminders();
+    setReminders(stored);
+  }, []);
+
+  // Schedule a reminder
+  const scheduleReminder = useCallback((reminder: Omit<Reminder, "createdAt" | "status">) => {
+    const newReminder: Reminder = {
+      ...reminder,
+      createdAt: new Date().toISOString(),
+      status: "pending",
+    };
+
+    setReminders((prev) => {
+      const updated = [...prev, newReminder];
+      saveReminders(updated);
+      return updated;
+    });
+
+    return newReminder;
+  }, []);
+
+  // Trigger a reminder (show notification)
+  const triggerReminder = useCallback((reminder: Reminder, onNavigate?: (reminder: Reminder) => void) => {
+    // Show toast with action buttons
+    toast(reminder.message, {
+      description: reminder.subject.en,
+      duration: 10000, // 10 seconds
+      action: onNavigate ? {
+        label: "View",
+        onClick: () => onNavigate(reminder),
+      } : undefined,
+    });
+
+    // Show browser notification if permission granted
+    if ("Notification" in window && Notification.permission === "granted") {
+      const notification = new Notification(reminder.subject.en, {
+        body: reminder.message,
+        icon: "/favicon.ico",
+        tag: reminder.id,
+      });
+
+      notification.onclick = () => {
+        if (onNavigate) onNavigate(reminder);
+        notification.close();
+      };
+    }
+
+    // Mark as triggered
+    setReminders((prev) => {
+      const updated = prev.map((r) =>
+        r.id === reminder.id ? { ...r, status: "triggered" as const } : r
+      );
+      saveReminders(updated);
+      return updated;
+    });
+  }, []);
+
+  // Setup timers for pending reminders
+  useEffect(() => {
+    const now = Date.now();
+    const newTimeouts = new Map<string, NodeJS.Timeout>();
+
+    reminders.forEach((reminder) => {
+      if (reminder.status !== "pending") return;
+
+      const remindTime = new Date(reminder.remindAt).getTime();
+      const delay = remindTime - now;
+
+      if (delay <= 0) {
+        // Missed reminder - trigger immediately
+        triggerReminder(reminder);
+      } else if (delay < 2147483647) {
+        // Max setTimeout delay is ~24.8 days
+        const timeout = setTimeout(() => {
+          triggerReminder(reminder);
+        }, delay);
+        newTimeouts.set(reminder.id, timeout);
+      }
+    });
+
+    // Clear old timeouts
+    activeTimeouts.forEach((timeout, id) => {
+      if (!newTimeouts.has(id)) {
+        clearTimeout(timeout);
+      }
+    });
+
+    setActiveTimeouts(newTimeouts);
+
+    // Cleanup on unmount
+    return () => {
+      newTimeouts.forEach((timeout) => clearTimeout(timeout));
+    };
+  }, [reminders, triggerReminder]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Snooze a reminder (add X minutes)
+  const snoozeReminder = useCallback((reminderId: string, minutes: number) => {
+    setReminders((prev) => {
+      const updated = prev.map((r) => {
+        if (r.id === reminderId) {
+          const newRemindAt = new Date(Date.now() + minutes * 60 * 1000).toISOString();
+          return { ...r, remindAt: newRemindAt, status: "pending" as const };
+        }
+        return r;
+      });
+      saveReminders(updated);
+      return updated;
+    });
+
+    toast.success(`Reminder snoozed for ${minutes} minutes`);
+  }, []);
+
+  // Dismiss a reminder
+  const dismissReminder = useCallback((reminderId: string) => {
+    setReminders((prev) => {
+      const updated = prev.map((r) =>
+        r.id === reminderId ? { ...r, status: "dismissed" as const } : r
+      );
+      saveReminders(updated);
+      return updated;
+    });
+  }, []);
+
+  // Delete a reminder
+  const deleteReminder = useCallback((reminderId: string) => {
+    setReminders((prev) => {
+      const updated = prev.filter((r) => r.id !== reminderId);
+      saveReminders(updated);
+      return updated;
+    });
+  }, []);
+
+  // Get pending reminders count
+  const pendingCount = reminders.filter((r) => r.status === "pending").length;
+
+  // Clear all reminders
+  const clearAllReminders = useCallback(() => {
+    setReminders([]);
+    saveReminders([]);
+    activeTimeouts.forEach((timeout) => clearTimeout(timeout));
+    setActiveTimeouts(new Map());
+  }, [activeTimeouts]);
+
+  return {
+    reminders,
+    pendingReminders: reminders.filter((r) => r.status === "pending"),
+    pendingCount,
+    scheduleReminder,
+    snoozeReminder,
+    dismissReminder,
+    deleteReminder,
+    clearAllReminders,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/hooks/useSession.ts b/apps/edr-freight-web/backoffice/src/shared/hooks/useSession.ts
new file mode 100644
index 000000000..20d7f29aa
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/hooks/useSession.ts
@@ -0,0 +1,77 @@
+import {
+  deleteAllSession,
+  deleteSession,
+  getMySessions,
+  sessionParams,
+} from "@/record-management/services/api/sessionService";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { useErrorHandler } from "./useErrorHandler";
+import { useTranslation } from "react-i18next";
+
+// --- Session Types ---
+interface Session {
+  id: string;
+  email: string;
+  device: string;
+  createdAt: string;
+}
+
+interface SessionsResponse {
+  sessions: Session[];
+  total: number;
+}
+
+
+export const useSessions = (params: sessionParams) => {
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+  const queryClient = useQueryClient();
+
+  // --- Fetch Sessions ---
+ const { data, isLoading, isError } = useQuery<SessionsResponse>({
+   queryKey: ["my-sessions", params],
+   queryFn: async () => {
+     const res = await getMySessions(params);
+     const [sessions, total] = res.data;
+     return { sessions, total };
+   },
+ });
+
+
+
+  
+
+  // --- Delete Single Session ---
+  const deleteSessionMutation = useMutation({
+    mutationFn: (id: string) => deleteSession(id),
+    onSuccess: () => {
+      toast.success("Session revoked successfully");
+      queryClient.invalidateQueries({ queryKey: ["my-sessions"] });
+    },
+    onError: (error: any) => {
+      handleError(error);
+    },
+  });
+
+  // --- Delete All Selected Sessions ---
+  const deleteAllSessionsMutation = useMutation({
+    mutationFn: (payload: { sessionIds: string[] }) =>
+      deleteAllSession(payload),
+    onSuccess: () => {
+      toast.success("Selected sessions revoked successfully");
+      queryClient.invalidateQueries({ queryKey: ["my-sessions"] });
+    },
+    onError: (error: any) => {
+      handleError(error);
+    },
+  });
+
+  return {
+    data,
+    isLoading,
+    isError,
+    deleteSession:deleteSessionMutation.mutate,
+    deleteAllSessions: deleteAllSessionsMutation.mutate,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/hooks/useUnitConfiguration.ts b/apps/edr-freight-web/backoffice/src/shared/hooks/useUnitConfiguration.ts
new file mode 100644
index 000000000..d5f71556f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/hooks/useUnitConfiguration.ts
@@ -0,0 +1,13 @@
+import { prefixSuffixService } from "@/user-management/services/api/prefixSuffixService";
+import { useQuery } from "@tanstack/react-query";
+
+export const useUnitConfiguration = (unitId: string, options?: { enabled?: boolean }) => {
+  return useQuery({
+    queryKey: ["unitConfig", unitId],
+    queryFn: () => prefixSuffixService.getInternalConfig(unitId!),
+    enabled: options?.enabled ?? !!unitId,
+    staleTime: 0,
+    gcTime: 0,
+    refetchOnWindowFocus: true,
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/hooks/useUnitReport.ts b/apps/edr-freight-web/backoffice/src/shared/hooks/useUnitReport.ts
new file mode 100644
index 000000000..bf1600242
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/hooks/useUnitReport.ts
@@ -0,0 +1,21 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  getUnitReport,
+  type UnitReport,
+} from "@/super-admin/services/api/dashboardApi";
+
+export const useUnitReport = (
+  organizationId: string,
+  unitId: string,
+  options?: { enabled?: boolean },
+) =>
+  useQuery<UnitReport>({
+    queryKey: ["unitReport", organizationId, unitId],
+    queryFn: async () => {
+      const { data } = await getUnitReport(organizationId, unitId);
+      return data;
+    },
+    enabled:
+      (options?.enabled ?? true) && !!organizationId && !!unitId,
+    staleTime: 5 * 60 * 1000,
+  });
diff --git a/apps/edr-freight-web/backoffice/src/shared/hooks/withRoles.tsx b/apps/edr-freight-web/backoffice/src/shared/hooks/withRoles.tsx
new file mode 100644
index 000000000..e2416a68d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/hooks/withRoles.tsx
@@ -0,0 +1,43 @@
+import { ReactNode } from "react";
+import { useAuth } from "../context/AuthContext";
+
+interface WithRolesProps {
+  roles: string[]; // e.g., ["admin", "super_admin"]
+  fallback?: ReactNode;
+  children: ReactNode;
+}
+
+interface WithUserTypeProps {
+  required: string; // e.g., ["admin", "super_admin"]
+  fallback?: ReactNode;
+  children: ReactNode;
+}
+export const useHasRole = (requiredRoles: string[]) => {
+  const { user } = useAuth();
+  const currentRoles = user?.roles?.map((r) => r.key) || [];
+
+  return requiredRoles.some((role) => currentRoles.includes(role));
+};
+
+export const WithRoles = ({
+  roles,
+  fallback = null,
+  children,
+}: WithRolesProps) => {
+  return useHasRole(roles) ? children : fallback;
+};
+
+
+export const useIsExternal = (required:string)=>{
+  const { user } = useAuth();
+  const currentUserType  = user?.userType || ""
+  return required === currentUserType
+}
+
+export const WithExternalUserType = ({
+  required,
+  fallback = null,
+  children,
+}:WithUserTypeProps)=>{
+  return useIsExternal(required) ? children : fallback
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/shared/i18n/uiLanguages.ts b/apps/edr-freight-web/backoffice/src/shared/i18n/uiLanguages.ts
new file mode 100644
index 000000000..880bf6a4d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/i18n/uiLanguages.ts
@@ -0,0 +1,42 @@
+export const UI_LANGUAGE_OPTIONS = [
+  { value: "en", label: "English", nativeName: "English" },
+  { value: "am", label: "አማርኛ", nativeName: "Amharic" },
+  { value: "fr", label: "Français", nativeName: "French" },
+] as const;
+
+export type UiLanguageCode = (typeof UI_LANGUAGE_OPTIONS)[number]["value"];
+
+export function resolveUiLanguage(language?: string | null): UiLanguageCode {
+  if (!language) return "en";
+  if (language.startsWith("am")) return "am";
+  if (language.startsWith("fr")) return "fr";
+  return "en";
+}
+
+export function getUiLanguageLabel(
+  language: UiLanguageCode,
+  t: (key: string) => string,
+): string {
+  switch (language) {
+    case "am":
+      return t("header.amharic");
+    case "fr":
+      return t("header.french");
+    default:
+      return t("header.english");
+  }
+}
+
+export function getUiLanguageShortLabel(
+  language: UiLanguageCode,
+  t: (key: string) => string,
+): string {
+  switch (language) {
+    case "am":
+      return t("header.amharicShort");
+    case "fr":
+      return t("header.frenchShort");
+    default:
+      return t("header.englishShort");
+  }
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/lib/api.ts b/apps/edr-freight-web/backoffice/src/shared/lib/api.ts
new file mode 100644
index 000000000..f20546c8d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/lib/api.ts
@@ -0,0 +1,23 @@
+import axios from "axios";
+import { getEnvUrl } from "@/shared/config/env";
+
+const api = axios.create({
+  baseURL: getEnvUrl("VITE_API_BASE_URL", false),
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+// Single response interceptor: pass success through, redirect on 401, reject everything else.
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      localStorage.removeItem("token");
+      window.location.href = "/";
+    }
+    return Promise.reject(error);
+  },
+);
+
+export { api };
diff --git a/apps/edr-freight-web/backoffice/src/shared/lib/sanitize.ts b/apps/edr-freight-web/backoffice/src/shared/lib/sanitize.ts
new file mode 100644
index 000000000..3a8bef67e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/lib/sanitize.ts
@@ -0,0 +1,15 @@
+import DOMPurify from "dompurify";
+
+/**
+ * Sanitize an HTML string before rendering with dangerouslySetInnerHTML.
+ * Strips all executable content (scripts, event handlers, etc.) while
+ * preserving safe formatting markup.
+ */
+export function sanitizeHtml(html: string): string {
+  if (!html) return "";
+  return DOMPurify.sanitize(html, {
+    USE_PROFILES: { html: true },
+    FORBID_TAGS: ["script", "style", "iframe", "object", "embed", "form"],
+    FORBID_ATTR: ["onerror", "onload", "onclick", "onmouseover"],
+  });
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/lib/tinyMceConfig.ts b/apps/edr-freight-web/backoffice/src/shared/lib/tinyMceConfig.ts
new file mode 100644
index 000000000..959000d8a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/lib/tinyMceConfig.ts
@@ -0,0 +1,7 @@
+export const editorInitConfig = {
+  height: 300,
+  menubar: false,
+  plugins: "link image code lists table",
+  toolbar:
+    "undo redo | formatselect | bold italic underline | alignleft aligncenter alignright | bullist numlist | link image | code",
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/lib/utils.ts b/apps/edr-freight-web/backoffice/src/shared/lib/utils.ts
new file mode 100644
index 000000000..accf0f29f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/lib/utils.ts
@@ -0,0 +1,57 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+// Removed duplicate declaration of the `cn` function
+
+interface FormatDateOptions {
+  includeDay?: boolean;
+  format?: "short" | "long";
+  includeTime?: boolean;
+}
+
+export function formatDate(
+  date: string | Date | null,
+  options?: FormatDateOptions
+): string {
+  if (!date) return "";
+
+  const dateObj = typeof date === "string" ? new Date(date) : date;
+  const {
+    includeDay = true,
+    format = "long",
+    includeTime = true,
+  } = options || {};
+
+  // Default format options
+  const formatOptions: Intl.DateTimeFormatOptions = {
+    year: "numeric",
+    month: format === "short" ? "short" : "long",
+    day: "numeric",
+  };
+
+  // Add weekday if requested
+  if (includeDay) {
+    formatOptions.weekday = format === "short" ? "short" : "long";
+  }
+
+  // Add time if requested
+  if (includeTime) {
+    formatOptions.hour = "numeric";
+    formatOptions.minute = "numeric";
+    formatOptions.hour12 = true;
+  }
+
+  return new Intl.DateTimeFormat("en-US", formatOptions).format(dateObj);
+}
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function capitalize(str: string): string {
+  if (!str) return "";
+  return str
+    .split(" ")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/navigation/footerItems.ts b/apps/edr-freight-web/backoffice/src/shared/navigation/footerItems.ts
new file mode 100644
index 000000000..e616687b0
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/navigation/footerItems.ts
@@ -0,0 +1,48 @@
+import { FooterDropdownMenu } from "./navigationtabs";
+import { ChevronUp, User2 } from "lucide-react";
+
+const recordOfficerFooters: FooterDropdownMenu | null = {
+  label: "Settings",
+  triggerIcon: ChevronUp,
+  items: [
+    {
+      label: "Settings",
+      href: "#/officersettings",
+    },
+    {
+      label: "Letter Templates",
+      href: "#/letterTemplates",
+    },
+  ],
+};
+const userFooters = (permissions: string[]): FooterDropdownMenu => {
+  const dropDown: FooterDropdownMenu = {
+    icon: User2,
+    label: "Settings",
+    triggerIcon: ChevronUp,
+    items: [
+      {
+        label: "Sign out",
+        action: () => {},
+      },
+      { label: "Delegation", href: "#/delegation" },
+    ],
+  };
+  if (permissions.includes("")) {
+    dropDown.items.push({
+      label: "Upload Teeter and Signature",
+      href: "#/uploadTeeterandSignature",
+    });
+  }
+
+  return dropDown;
+};
+export const footerItems = (
+  permissions: string[]
+): FooterDropdownMenu | null => {
+  if (permissions.includes("can:dispatchRecords")) {
+    return recordOfficerFooters;
+  } else {
+    return userFooters(permissions);
+  }
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/navigation/navigationItems.ts b/apps/edr-freight-web/backoffice/src/shared/navigation/navigationItems.ts
new file mode 100644
index 000000000..21da449a1
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/navigation/navigationItems.ts
@@ -0,0 +1,121 @@
+import {
+  Download,
+  //Calendar,
+  FileText,
+  //Home,
+  //Inbox,
+  LayoutGrid,
+  //Search,
+  SquareCheck,
+  Upload,
+  //Settings,
+  Users,
+} from "lucide-react";
+import { NavOptions } from "./navigationtabs";
+import { useTranslation } from "react-i18next";
+import { t } from "i18next";
+
+// Management section items
+export const managementItems: NavOptions[] = [
+  {
+    title: t("Record Management") || "Record Management",
+    url: "/record-management/userRecords",
+    icon: FileText,
+    isActive: true,
+  },
+  {
+    title: t("User Management") || "User Management",
+    url: "/user-management",
+    icon: Users,
+    perms: ["view:user-management", "manage:users"],
+    roles: ["super_admin", "admin", "unit_admin"],
+  },
+  // {
+  //   title: t("Workflow Management"),
+  //   url: "workflowManagement",
+  //   icon: GitBranch,
+  // },
+  // {
+  //   title: t("Project Management"),
+  //   url: "projectManagement",
+  //   icon: Briefcase,
+  // },
+  // {
+  //   title: t("Document Management"),
+  //   url: "documentManagement",
+  //   icon: FileArchive,
+  // },
+  // {
+  //   title: t("Knowledge & Asset Management"),
+  //   url: "knowledgeManagement",
+  //   icon: BookOpen,
+  // },
+  // {
+  //   title: t("Report Management"),
+  //   url: "reportManagement",
+  //   icon: BarChart3,
+  // },
+];
+
+export const useNavItems = (permissions: string[]): NavOptions[] => {
+  const { t } = useTranslation();
+
+  // Main navigation items based on the image
+  const mainNavItems: NavOptions[] = [
+    {
+      title: t("nav.dashboard"),
+      url: "dashboard",
+      isActive: true,
+      icon: LayoutGrid,
+    },
+  ];
+
+  const userNavs: NavOptions[] = [
+    {
+      title: t("nav.dashboard"),
+      url: "dashboard",
+      isActive: true,
+      icon: LayoutGrid,
+    },
+    {
+      title: t("nav.outgoing"),
+      url: "userRecords",
+      icon: Upload,
+    },
+    {
+      title: t("nav.incoming"),
+      url: "userIncoming",
+      icon: Download,
+      count: true,
+      items: [
+        {
+          title: t("nav.external"),
+          url: "userIncoming",
+          count: true,
+        },
+        {
+          title: t("nav.internal"),
+          url: "userIncoming/internal",
+          count: true,
+        },
+        {
+          title: t("nav.cc"),
+          url: "userIncoming/cc",
+          count: true,
+        },
+      ],
+    },
+  ];
+  const approvalPermissionKeys = ["can:sendToRO", "can:approveRecords"];
+  if (approvalPermissionKeys.some((key) => permissions.includes(key))) {
+    userNavs.push({
+      title: t("nav.approval"),
+      url: "approval",
+      icon: SquareCheck,
+      count: true,
+      items: [],
+    });
+  }
+
+  return [...mainNavItems, ...managementItems];
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/navigation/navigationtabs.tsx b/apps/edr-freight-web/backoffice/src/shared/navigation/navigationtabs.tsx
new file mode 100644
index 000000000..8242bd4ac
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/navigation/navigationtabs.tsx
@@ -0,0 +1,262 @@
+import { ChevronRight, LucideIcon, LucideProps, Menu } from "lucide-react";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarFooter,
+  SidebarMenuBadge,
+  SidebarHeader,
+  useSidebar,
+} from "@/shared/common/ui/sidebar";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/shared/common/ui/collapsible";
+import { managementItems } from "./navigationItems";
+import { NavLink, useLocation } from "react-router-dom";
+import { useAuth } from "@/shared/context/AuthContext";
+import { hasAccess } from "../utils/permissionHelper";
+import { Button } from "@/shared/common/ui/button";
+import { useTenantConfig } from "@/layout/components/TenantConfig";
+
+// Routes nested under /userRecords/ (like editUserRecord/:id) trigger
+// NavLink's auto-highlight on the Outgoing item even when the user arrived
+// from Approval or Collaborations. `?from=...` is set by those entry points
+// so the sidebar can ignore the auto-match and keep Outgoing inactive.
+const isOutgoingNavSuppressedFor = (
+  pathname: string,
+  search: string,
+): boolean => {
+  if (!pathname.includes("/userRecords/editUserRecord/")) return false;
+  const from = new URLSearchParams(search).get("from");
+  return from === "approval" || from === "collaborations";
+};
+
+export interface NavOptions {
+  title: string;
+  url: string;
+  isActive?: boolean;
+  icon?: React.ForwardRefExoticComponent<
+    Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>
+  >;
+
+  items?: NavOptions[];
+  count?: any;
+  perms?: string[];
+  roles?: string[];
+}
+
+export interface FooterDropdownItem {
+  label: string;
+  href?: string;
+  action?: () => void;
+}
+
+export interface FooterDropdownMenu {
+  icon?: LucideIcon;
+  label: string;
+  triggerIcon?: LucideIcon;
+  items: FooterDropdownItem[];
+}
+
+export function NavigationTabs() {
+  const { user } = useAuth();
+  const userPermissions = user?.permissions.map((r) => r.key) || [];
+  const userRoles = user?.roles?.map((r) => r.key) || [];
+  const { toggleSidebar } = useSidebar();
+  const location = useLocation();
+  const { config: tenantConfig } = useTenantConfig();
+  const suppressOutgoingHighlight = isOutgoingNavSuppressedFor(
+    location.pathname,
+    location.search,
+  );
+
+  return (
+    <Sidebar collapsible="icon" className="border-r bg-white">
+      <SidebarHeader className="p-4 border-b">
+        <div className="flex items-center gap-3">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={toggleSidebar}
+            className="p-1"
+          >
+            <Menu className="h-5 w-5" />
+          </Button>
+          <div className="w-8 h-8 bg-primary-500 rounded-md flex items-center justify-center">
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 48 48"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 36H36"
+                stroke="#F8FAFC"
+                strokeWidth="1.8"
+                strokeLinecap="round"
+              />
+              <path
+                d="M31.2 20.4H26.4C23.4216 20.4 22.8 21.0216 22.8 24V36H34.8V24C34.8 21.0216 34.1784 20.4 31.2 20.4Z"
+                stroke="#F8FAFC"
+                strokeWidth="1.8"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M27.6002 36H13.2002V15.6C13.2002 12.6216 13.8218 12 16.8002 12H24.0002C26.9786 12 27.6002 12.6216 27.6002 15.6V20.4"
+                stroke="#F8FAFC"
+                strokeWidth="1.8"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M13.2002 16.8H16.8002M13.2002 21.6H16.8002M13.2002 26.4H16.8002"
+                stroke="#F8FAFC"
+                strokeWidth="1.8"
+                strokeLinecap="round"
+              />
+              <path
+                d="M27.6001 25.2H30.0001M27.6001 28.8H30.0001"
+                stroke="#F8FAFC"
+                strokeWidth="1.8"
+                strokeLinecap="round"
+              />
+              <path
+                d="M28.8 36V32.4"
+                stroke="#F8FAFC"
+                strokeWidth="1.8"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </div>
+          <div>
+            <h3 className="font-semibold text-gray-800">{tenantConfig.appName}</h3>
+            <p className="text-xs text-gray-500">system</p>
+          </div>
+        </div>
+      </SidebarHeader>
+      <SidebarContent className="p-2">
+        <SidebarGroup>
+          <SidebarMenu>
+            {managementItems
+              .filter((item) => hasAccess(item, userPermissions, userRoles))
+              .map((item) => (
+                <Collapsible
+                  key={item.title}
+                  asChild
+                  defaultOpen={
+                    item.isActive && item.items ? item.items.length > 0 : false
+                  }
+                  className="group/collapsible"
+                >
+                  <SidebarMenuItem>
+                    <CollapsibleTrigger asChild>
+                      <SidebarMenuButton
+                        tooltip={item.title}
+                        className={
+                          item.title?.includes("Management")
+                            ? "text-gray-600 hover:bg-gray-100 rounded-md my-1"
+                            : "text-gray-800 hover:bg-gray-100 rounded-md my-1 font-medium"
+                        }
+                      >
+                        {item.icon && (
+                          <item.icon
+                            className={
+                              item.title?.includes("Management")
+                                ? "h-5 w-5 text-gray-500"
+                                : "h-5 w-5 text-gray-700"
+                            }
+                          />
+                        )}
+
+                        <SidebarMenuSubButton asChild>
+                          <NavLink
+                            to={item.url}
+                            className={({ isActive }) => {
+                              const effectiveActive =
+                                isActive &&
+                                !(
+                                  suppressOutgoingHighlight &&
+                                  item.url.endsWith("/userRecords")
+                                );
+                              return `flex items-center px-3 py-2 rounded-md text-sm transition-colors ${
+                                effectiveActive
+                                  ? item.url.startsWith("/user-management")
+                                    ? "bg-primary-100 text-primary-900"
+                                    : "bg-primary text-primary-foreground"
+                                  : "text-gray-700 hover:bg-gray-100"
+                              }`;
+                            }}
+                          >
+                            <span>{item.title}</span>
+                          </NavLink>
+                        </SidebarMenuSubButton>
+
+                        {item.count && (
+                          <SidebarMenuBadge>{item.count}</SidebarMenuBadge>
+                        )}
+                        {item.items && item.items.length > 0 && (
+                          <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                        )}
+                      </SidebarMenuButton>
+                    </CollapsibleTrigger>
+
+                    <CollapsibleContent>
+                      {item.items && item.items.length > 0 && (
+                        <SidebarMenuSub>
+                          {item.items
+                            .filter((sItem) =>
+                              hasAccess(sItem, userPermissions, userRoles)
+                            )
+                            .map((subItem: NavOptions) => (
+                              <SidebarMenuSubItem key={subItem.title}>
+                                <SidebarMenuSubButton asChild>
+                                  <NavLink
+                                    to={subItem.url}
+                                    className={({ isActive }) => {
+                                      const effectiveActive =
+                                        isActive &&
+                                        !(
+                                          suppressOutgoingHighlight &&
+                                          (subItem.url === "userRecords" ||
+                                            subItem.url.endsWith("/userRecords"))
+                                        );
+                                      return `flex items-center px-3 py-2 rounded-md text-sm transition-colors ${
+                                        effectiveActive
+                                          ? subItem.url.startsWith("/user-management")
+                                            ? "bg-primary-100 text-primary-900"
+                                            : "bg-primary text-primary-foreground"
+                                          : "text-gray-700 hover:bg-gray-100"
+                                      }`;
+                                    }}
+                                  >
+                                    <span>{subItem.title}</span>
+                                  </NavLink>
+                                </SidebarMenuSubButton>
+                              </SidebarMenuSubItem>
+                            ))}
+                        </SidebarMenuSub>
+                      )}
+                    </CollapsibleContent>
+                  </SidebarMenuItem>
+                </Collapsible>
+              ))}
+          </SidebarMenu>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarFooter className="p-4 border-t mt-auto">
+        <div className="text-xs text-gray-500 text-center">
+          Powered by <span className="font-semibold">TRIA</span>
+        </div>
+      </SidebarFooter>
+    </Sidebar>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/navigation/sidebarToggle.tsx b/apps/edr-freight-web/backoffice/src/shared/navigation/sidebarToggle.tsx
new file mode 100644
index 000000000..72f3b94a4
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/navigation/sidebarToggle.tsx
@@ -0,0 +1,29 @@
+import { ChevronLeft } from "lucide-react";
+
+import { cn } from "@/shared/lib/utils";
+import { Button } from "@/shared/common/ui/button";
+
+interface SidebarToggleProps {
+  isOpen: boolean | undefined;
+  setIsOpen?: () => void;
+}
+
+export function SidebarToggle({ isOpen, setIsOpen }: SidebarToggleProps) {
+  return (
+    <div className="invisible lg:visible absolute top-[12px] -right-[16px] z-20">
+      <Button
+        onClick={() => setIsOpen?.()}
+        className="rounded-md w-8 h-8"
+        variant="outline"
+        size="icon"
+      >
+        <ChevronLeft
+          className={cn(
+            "h-4 w-4 transition-transform ease-in-out duration-700",
+            isOpen === false ? "rotate-180" : "rotate-0"
+          )}
+        />
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/pages/audit-log/audit-log-page.tsx b/apps/edr-freight-web/backoffice/src/shared/pages/audit-log/audit-log-page.tsx
new file mode 100644
index 000000000..0023f243b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/pages/audit-log/audit-log-page.tsx
@@ -0,0 +1,994 @@
+"use client";
+
+import { useState, useEffect, useMemo, useCallback } from "react";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/shared/common/ui/card";
+import {
+  Table,
+  TableHeader,
+  TableRow,
+  TableHead,
+  TableBody,
+  TableCell,
+} from "@/shared/common/ui/table";
+import { Button } from "@/shared/common/ui/button";
+import { Badge } from "@/shared/common/ui/badge";
+import { Avatar, AvatarFallback, AvatarImage } from "@/shared/common/ui/avatar";
+import { Download, RefreshCw, Filter, X, Search } from "lucide-react";
+import { format } from "date-fns";
+import { toast } from "sonner";
+
+import { ActivityCard } from "@/shared/components/activity-log/activity-card";
+import { ActivityFilters } from "@/shared/components/activity-log/activity-filters";
+import { ActivityStats } from "@/shared/components/activity-log/activity-stats";
+import {
+  ExportModal,
+  ExportOptions,
+} from "@/shared/components/activity-log/export-modal";
+
+import { listAuditLogCommandsByModule } from "@/shared/services/audit/audit.api";
+import { cn } from "@/shared/lib/utils";
+import { useTranslation } from "react-i18next";
+export interface ActivityLog {
+  id: string;
+  action: string;
+  description: string;
+  performedBy: {
+    name: string;
+    email: string;
+    avatar?: string;
+    department?: string;
+  };
+  timestamp: string;
+  module: string;
+  resourceId?: string;
+  resourceName?: string;
+  status: "success" | "failure" | "pending" | "warning";
+  details?: string;
+  ipAddress?: string;
+  location?: string;
+  severity: "low" | "medium" | "high" | "critical";
+}
+
+type AuditLogPageProps = {
+  moduleKey: string;
+  title?: string;
+  subtitle?: string;
+  initialPage?: number;
+  limit?: number;
+  unitId?: string;
+  organizationId?: string;
+};
+
+function safeString(v: unknown) {
+  if (v === null || v === undefined) return "";
+  if (typeof v === "string") return v;
+  try {
+    return JSON.stringify(v);
+  } catch {
+    return String(v);
+  }
+}
+
+function pickFileInfoFromChanges(
+  changes?: Array<{ field?: string; to?: any; from?: any }>,
+) {
+  if (!changes?.length) return undefined;
+  const fileInfoChange = changes.find((c) => c?.field === "fileInfo");
+  return fileInfoChange?.to || fileInfoChange?.from;
+}
+
+function pickResourceNameFromChanges(
+  changes?: Array<{ field?: string; to?: any; from?: any }>,
+) {
+  const fileInfo = pickFileInfoFromChanges(changes);
+  const fileName =
+    fileInfo?.originalname || fileInfo?.fileName || fileInfo?.contentType;
+  return fileName ? String(fileName) : undefined;
+}
+
+function pickPerformedByFromChanges(
+  changes?: Array<{ field?: string; to?: any; from?: any }> | null,
+  auditLog?: any,
+): ActivityLog["performedBy"] {
+  const SYSTEM: ActivityLog["performedBy"] = {
+    name: "System",
+    email: "system@audit",
+  };
+
+  const au = auditLog?.user;
+  if (au) {
+    const email = typeof au.email === "string" ? au.email : undefined;
+    const name =
+      typeof au.name === "string"
+        ? au.name
+        : typeof au.name?.en === "string"
+          ? au.name.en
+          : typeof au.name?.am === "string"
+            ? au.name.am
+            : undefined;
+
+    if (email || name) {
+      return {
+        name: name || (email ? email.split("@")[0] : SYSTEM.name),
+        email: email || SYSTEM.email,
+      };
+    }
+  }
+
+  if (!changes?.length) return SYSTEM;
+
+  const userInfoChange = changes.find((c) => c?.field === "userInfo");
+  const u = userInfoChange?.to || userInfoChange?.from;
+
+  const email = typeof u?.email === "string" ? u.email : undefined;
+  const name =
+    typeof u?.name === "string"
+      ? u.name
+      : typeof u?.name?.en === "string"
+        ? u.name.en
+        : typeof u?.name?.am === "string"
+          ? u.name.am
+          : undefined;
+
+  return {
+    name: name || (email ? email.split("@")[0] : SYSTEM.name),
+    email: email || SYSTEM.email,
+  };
+}
+function mapQueryMethodToStatus(_method?: string): ActivityLog["status"] {
+  return "success";
+}
+
+function mapQueryMethodToSeverity(method?: string): ActivityLog["severity"] {
+  switch ((method || "").toUpperCase()) {
+    case "DELETE":
+      return "high";
+    case "INSERT":
+      return "medium";
+    case "UPDATE":
+      return "low";
+    default:
+      return "low";
+  }
+}
+
+function buildDescription(entityName?: string, queryMethod?: string) {
+  const e = entityName || "entity";
+  const m = (queryMethod || "ACTION").toUpperCase();
+  if (m === "UPDATE") return `Updated ${e}`;
+  if (m === "INSERT") return `Created ${e}`;
+  if (m === "DELETE") return `Deleted ${e}`;
+  return `${m} on ${e}`;
+}
+
+function buildDetails(
+  changes?: Array<{ field?: string; from?: any; to?: any }>,
+) {
+  if (!changes?.length) return undefined;
+
+  const lines = changes.slice(0, 8).map((c) => {
+    const field = c?.field || "field";
+
+    if (field === "userInfo") {
+      const fromEmail = c?.from?.email ? String(c.from.email) : "—";
+      const toEmail = c?.to?.email ? String(c.to.email) : "—";
+      const fromName =
+        c?.from?.name?.en || c?.from?.name?.am || c?.from?.name || "—";
+      const toName = c?.to?.name?.en || c?.to?.name?.am || c?.to?.name || "—";
+      return `userInfo: ${fromName} (${fromEmail}) → ${toName} (${toEmail})`;
+    }
+
+    const from = c?.from === null ? "null" : safeString(c?.from);
+    const to = c?.to === null ? "null" : safeString(c?.to);
+    return `${field}: ${from} → ${to}`;
+  });
+
+  const more = changes.length > 8 ? `\n... +${changes.length - 8} more` : "";
+  return lines.join("\n") + more;
+}
+
+export default function AuditLogPageShared({
+  moduleKey,
+  title = "Activity Log",
+  subtitle = "Monitor and track audit events across the platform",
+  initialPage = 1,
+  limit = 10,
+  unitId,
+  organizationId,
+}: AuditLogPageProps) {
+  const pageBg = "bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-gray-100";
+  const surface = "bg-white dark:bg-gray-900";
+  const surfaceSoft = "bg-gray-50 dark:bg-gray-950";
+  const border = "border-gray-200 dark:border-gray-800";
+  const borderDashed = "border-gray-200 dark:border-gray-800";
+  const textMuted = "text-gray-600 dark:text-gray-300";
+  const textSubtle = "text-gray-500 dark:text-gray-400";
+  const textStrong = "text-gray-900 dark:text-gray-100";
+  const hoverSoft = "hover:bg-gray-100 dark:hover:bg-gray-800";
+  const primaryBtn =
+    "bg-gray-900 hover:bg-gray-800 dark:bg-gray-100 dark:hover:bg-gray-200 text-white dark:text-gray-900";
+  const primaryIcon = "text-gray-900 dark:text-gray-100";
+
+  const getSeverityColor = (severity: string) => {
+    switch (severity) {
+      case "critical":
+        return "bg-red-100 text-red-800 border-red-300 dark:bg-red-950 dark:text-red-300 dark:border-red-800";
+      case "high":
+        return "bg-orange-100 text-orange-800 border-orange-300 dark:bg-orange-950 dark:text-orange-300 dark:border-orange-800";
+      case "medium":
+        return "bg-yellow-100 text-yellow-800 border-yellow-300 dark:bg-yellow-950 dark:text-yellow-300 dark:border-yellow-800";
+      case "low":
+        return "bg-green-100 text-green-800 border-green-300 dark:bg-green-950 dark:text-green-300 dark:border-green-800";
+      default:
+        return "bg-gray-100 text-gray-800 border-gray-300 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700";
+    }
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case "success":
+        return "bg-green-100 text-green-800 dark:bg-green-950 dark:text-green-300";
+      case "failure":
+        return "bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-300";
+      case "warning":
+        return "bg-yellow-100 text-yellow-800 dark:bg-yellow-950 dark:text-yellow-300";
+      case "pending":
+        return "bg-blue-100 text-blue-800 dark:bg-blue-950 dark:text-blue-300";
+      default:
+        return "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300";
+    }
+  };
+
+  const { t } = useTranslation();
+
+  const [searchQuery, setSearchQuery] = useState("");
+  const [moduleFilter, setModuleFilter] = useState("all");
+  const [actionFilter, setActionFilter] = useState("all");
+  const [statusFilter, setStatusFilter] = useState("all");
+  const [severityFilter, setSeverityFilter] = useState("all");
+  const [dateRange, setDateRange] = useState<{ from?: Date; to?: Date }>({});
+  const [viewMode, setViewMode] = useState<"card" | "table">("card");
+  const [exportModalOpen, setExportModalOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [filtersOpenMobile, setFiltersOpenMobile] = useState(false);
+
+  const [allLogs, setAllLogs] = useState<ActivityLog[]>([]);
+  const [filteredLogs, setFilteredLogs] = useState<ActivityLog[]>([]);
+  const [totalCount, setTotalCount] = useState(0);
+  const [currentPage, setCurrentPage] = useState(initialPage);
+
+  const fetchAuditLogs = useCallback(async () => {
+    if (!moduleKey) {
+      toast.error(t("auditLog.page.fetchKeyError"));
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const res = await listAuditLogCommandsByModule(
+        moduleKey,
+        {
+          skip: (currentPage - 1) * limit,
+          take: limit,
+        },
+        {
+          unitId,
+          organizationId,
+        },
+      );
+
+      const items = res?.items || [];
+
+      const mapped: ActivityLog[] = items.map((it: any) => {
+        const entityName = it?.entityName ? String(it.entityName) : moduleKey;
+        const queryMethod = it?.queryMethod ? String(it.queryMethod) : "UPDATE";
+        const changes = Array.isArray(it?.changes) ? it.changes : [];
+
+        return {
+          id: it?.id ? String(it.id) : crypto.randomUUID(),
+          action: queryMethod.toUpperCase(),
+          description: buildDescription(entityName, queryMethod),
+          performedBy: pickPerformedByFromChanges(changes, it?.auditLog),
+          timestamp: it?.createdAt
+            ? String(it.createdAt)
+            : new Date().toISOString(),
+          module: entityName,
+          resourceName: pickResourceNameFromChanges(changes),
+          status: mapQueryMethodToStatus(queryMethod),
+          details: buildDetails(changes),
+          severity: mapQueryMethodToSeverity(queryMethod),
+        };
+      });
+
+      mapped.sort(
+        (a, b) =>
+          new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime(),
+      );
+
+      setAllLogs(mapped);
+      setTotalCount(res?.count || 0);
+      toast.success(t("auditLog.page.fetchSuccess"));
+    } catch (e: any) {
+      console.error(e);
+      toast.error(t("auditLog.page.fetchError"), {
+        description: e?.message || t("auditLog.page.fetchError"),
+        duration: 5000,
+      });
+      setAllLogs([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [moduleKey, currentPage, limit, unitId, organizationId, t]);
+
+  useEffect(() => {
+    fetchAuditLogs();
+  }, [fetchAuditLogs]);
+
+  const modules = useMemo(
+    () => Array.from(new Set(allLogs.map((log) => log.module))).sort(),
+    [allLogs],
+  );
+
+  const actions = useMemo(
+    () => Array.from(new Set(allLogs.map((log) => log.action))).sort(),
+    [allLogs],
+  );
+
+  const stats = useMemo(() => {
+    const totalActivities = filteredLogs.length;
+    const successCount = filteredLogs.filter(
+      (log) => log.status === "success",
+    ).length;
+    const successRate =
+      totalActivities > 0
+        ? Math.round((successCount / totalActivities) * 100)
+        : 0;
+    const uniqueUsers = new Set(
+      filteredLogs.map((log) => log.performedBy.email),
+    ).size;
+    const avgDailyActivities = Math.round(totalActivities / 30);
+
+    const actionCounts: Record<string, number> = {};
+    filteredLogs.forEach((log) => {
+      actionCounts[log.action] = (actionCounts[log.action] || 0) + 1;
+    });
+    const topActions = Object.entries(actionCounts)
+      .map(([action, count]) => ({ action, count }))
+      .sort((a, b) => b.count - a.count)
+      .slice(0, 5);
+
+    return {
+      totalActivities,
+      successRate,
+      avgDailyActivities,
+      uniqueUsers,
+      topActions,
+    };
+  }, [filteredLogs]);
+
+  const activeFiltersCount = useMemo(() => {
+    let n = 0;
+    if (searchQuery.trim()) n++;
+    if (moduleFilter !== "all") n++;
+    if (actionFilter !== "all") n++;
+    if (statusFilter !== "all") n++;
+    if (severityFilter !== "all") n++;
+    if (dateRange.from || dateRange.to) n++;
+    return n;
+  }, [
+    searchQuery,
+    moduleFilter,
+    actionFilter,
+    statusFilter,
+    severityFilter,
+    dateRange,
+  ]);
+
+  useEffect(() => {
+    setFilteredLogs(allLogs);
+  }, [allLogs]);
+
+  const clearFilters = useCallback(() => {
+    setSearchQuery("");
+    setModuleFilter("all");
+    setActionFilter("all");
+    setStatusFilter("all");
+    setSeverityFilter("all");
+    setDateRange({});
+  }, []);
+
+  const handleExport = (options: ExportOptions) => {
+    toast.success(
+      t("auditLog.export.success", {
+        count: filteredLogs.length,
+        format: options.format.toUpperCase(),
+      }),
+    );
+
+    const data = {
+      logs: filteredLogs,
+      exportOptions: options,
+      exportedAt: new Date().toISOString(),
+    };
+
+    const blob = new Blob([JSON.stringify(data, null, 2)], {
+      type: `application/${options.format === "json" ? "json" : "octet-stream"}`,
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${options.fileName}.${options.format}`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const MobileRow = ({ log }: { log: ActivityLog }) => {
+    return (
+      <div className={cn("rounded-lg border p-4 shadow-sm", border, surface)}>
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0">
+            <div className="flex items-center gap-2">
+              <Badge variant="outline" className="font-medium">
+                {log.action}
+              </Badge>
+              <Badge
+                variant="outline"
+                className={cn(
+                  "text-xs font-medium",
+                  getSeverityColor(log.severity),
+                )}>
+                {t(`auditLog.severity.${log.severity}`)}
+              </Badge>
+              <Badge
+                className={cn(
+                  "text-xs font-medium",
+                  getStatusColor(log.status),
+                )}>
+                {t(`auditLog.status.${log.status}`)}
+              </Badge>
+            </div>
+
+            <div className={cn("mt-2 font-medium truncate", textStrong)}>
+              {log.description}
+            </div>
+
+            {log.resourceName ? (
+              <div className={cn("mt-1 text-sm truncate", textMuted)}>
+                {log.resourceName}
+              </div>
+            ) : null}
+
+            <div
+              className={cn(
+                "mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs",
+                textSubtle,
+              )}>
+              <span className="whitespace-nowrap">
+                {format(new Date(log.timestamp), "MMM d, yyyy")}
+              </span>
+              <span className="whitespace-nowrap">
+                {format(new Date(log.timestamp), "HH:mm:ss")}
+              </span>
+              <span className="inline-flex items-center gap-2 min-w-0">
+                <span className={cn(textSubtle)}>•</span>
+                <Badge variant="secondary" className="truncate max-w-[160px]">
+                  {log.module}
+                </Badge>
+              </span>
+            </div>
+
+            <div className="mt-3 flex items-center gap-3 min-w-0">
+              <Avatar className="h-8 w-8 shrink-0">
+                {log.performedBy.avatar ? (
+                  <AvatarImage src={log.performedBy.avatar} />
+                ) : null}
+                <AvatarFallback>
+                  {log.performedBy.name.charAt(0).toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+              <div className="min-w-0">
+                <div className={cn("text-sm font-medium truncate", textStrong)}>
+                  {log.performedBy.name === "System"
+                    ? t("auditLog.page.systemUser")
+                    : log.performedBy.name}
+                </div>
+                <div className={cn("text-xs truncate", textSubtle)}>
+                  {log.performedBy.email}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-9 w-9 p-0 shrink-0"
+            onClick={() => {
+              toast.message(`Audit ID: ${log.id}`, {
+                description: log.details || log.description,
+              });
+            }}
+            aria-label={t("auditLog.page.viewDetails")}
+            title={t("auditLog.page.viewDetails")}>
+            •••
+          </Button>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className={cn("min-h-screen px-3 py-4 sm:p-4 md:p-6", pageBg)}>
+      <div className="max-w-7xl mx-auto space-y-6">
+        <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
+          <div className="min-w-0">
+            <h1
+              className={cn(
+                "text-2xl sm:text-3xl font-bold truncate",
+                textStrong,
+              )}>
+              {title}
+            </h1>
+            <p className={cn("mt-1 text-sm sm:text-base", textMuted)}>
+              {subtitle}
+            </p>
+          </div>
+
+          <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3">
+            <Button
+              variant="outline"
+              onClick={fetchAuditLogs}
+              disabled={loading}
+              className="flex items-center justify-center gap-2 w-full sm:w-auto">
+              <RefreshCw
+                className={cn("h-4 w-4", loading ? "animate-spin" : "")}
+              />
+              {t("auditLog.page.refresh")}
+            </Button>
+
+            <Button
+              onClick={() => setExportModalOpen(true)}
+              className="flex items-center justify-center gap-2 w-full sm:w-auto"
+              disabled={filteredLogs.length === 0}>
+              <Download className="h-4 w-4" />
+              {t("auditLog.page.export")}
+            </Button>
+          </div>
+        </div>
+
+        <ActivityStats {...stats} />
+
+        <Card className={cn("border shadow-sm", border, surface)}>
+          <CardHeader className="pb-4">
+            <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+              <div className="min-w-0">
+                <CardTitle className={cn("text-lg font-semibold", textStrong)}>
+                  {t("auditLog.page.activeLogs")}
+                </CardTitle>
+
+                <CardDescription className={cn("text-sm", textMuted)}>
+                  {t("auditLog.page.activitiesFound", {
+                    count: filteredLogs.length,
+                  })}
+                  {dateRange.from && (
+                    <span className="ml-2">
+                      • {format(dateRange.from, "MMM d, yyyy")}
+                      {dateRange.to &&
+                        ` - ${format(dateRange.to, "MMM d, yyyy")}`}
+                    </span>
+                  )}
+                </CardDescription>
+              </div>
+
+              <div className="flex w-full flex-col gap-2 sm:flex-row sm:items-center sm:justify-end lg:w-auto">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setFiltersOpenMobile((v) => !v)}
+                  className="flex w-full items-center justify-center gap-2 sm:w-auto lg:hidden">
+                  <Filter className="h-4 w-4" />
+                  {t("auditLog.filters.title")}
+                  {activeFiltersCount ? (
+                    <span className="ml-1 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-gray-900 px-1.5 text-[11px] font-semibold text-white dark:bg-gray-100 dark:text-gray-900">
+                      {activeFiltersCount}
+                    </span>
+                  ) : null}
+                </Button>
+
+                <div className="grid w-full grid-cols-2 gap-2 sm:flex sm:w-auto sm:items-center">
+                  <Button
+                    variant={viewMode === "card" ? "default" : "outline"}
+                    size="sm"
+                    onClick={() => setViewMode("card")}
+                    className={cn(
+                      "flex w-full items-center justify-center gap-2 sm:w-auto",
+                      viewMode === "card" && primaryBtn,
+                    )}>
+                    <span className="hidden sm:inline">
+                      {t("auditLog.page.cardView")}
+                    </span>
+                    <span className="sm:hidden">
+                      {t("auditLog.page.cards")}
+                    </span>
+                  </Button>
+
+                  <Button
+                    variant={viewMode === "table" ? "default" : "outline"}
+                    size="sm"
+                    onClick={() => setViewMode("table")}
+                    className={cn(
+                      "flex w-full items-center justify-center gap-2 sm:w-auto",
+                      viewMode === "table" && primaryBtn,
+                    )}>
+                    <span className="hidden sm:inline">
+                      {t("auditLog.page.tableView")}
+                    </span>
+                    <span className="sm:hidden">
+                      {t("auditLog.page.table")}
+                    </span>
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </CardHeader>
+
+          <CardContent>
+            <div className="hidden lg:block">
+              <ActivityFilters
+                searchQuery={searchQuery}
+                onSearchChange={setSearchQuery}
+                moduleFilter={moduleFilter}
+                onModuleChange={setModuleFilter}
+                actionFilter={actionFilter}
+                onActionChange={setActionFilter}
+                statusFilter={statusFilter}
+                onStatusChange={setStatusFilter}
+                dateRange={dateRange}
+                onDateRangeChange={setDateRange}
+                modules={modules}
+                actions={actions}
+                onClearFilters={clearFilters}
+              />
+            </div>
+
+            <div className="lg:hidden">
+              <div className="mb-3">
+                <div className="relative">
+                  <Search
+                    className={cn(
+                      "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2",
+                      textSubtle,
+                    )}
+                  />
+                  <input
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    placeholder={t("auditLog.page.searchActivity")}
+                    className={cn(
+                      "w-full h-10 rounded-md border pl-9 pr-10 text-sm outline-none",
+                      border,
+                      surface,
+                      textStrong,
+                      "placeholder:text-gray-400 dark:placeholder:text-gray-500",
+                      "focus:ring-2 focus:ring-gray-900/10 dark:focus:ring-gray-100/10 focus:border-gray-300 dark:focus:border-gray-700",
+                    )}
+                  />
+                  {searchQuery ? (
+                    <button
+                      type="button"
+                      onClick={() => setSearchQuery("")}
+                      className={cn(
+                        "absolute right-2 top-1/2 -translate-y-1/2 rounded p-1",
+                        textSubtle,
+                        hoverSoft,
+                      )}
+                      aria-label={t("auditLog.filters.clear")}>
+                      <X className="h-4 w-4" />
+                    </button>
+                  ) : null}
+                </div>
+              </div>
+
+              {filtersOpenMobile ? (
+                <div
+                  className={cn("mb-4 rounded-lg border p-3", border, surface)}>
+                  <ActivityFilters
+                    searchQuery={searchQuery}
+                    onSearchChange={setSearchQuery}
+                    moduleFilter={moduleFilter}
+                    onModuleChange={setModuleFilter}
+                    actionFilter={actionFilter}
+                    onActionChange={setActionFilter}
+                    statusFilter={statusFilter}
+                    onStatusChange={setStatusFilter}
+                    dateRange={dateRange}
+                    onDateRangeChange={setDateRange}
+                    modules={modules}
+                    actions={actions}
+                    onClearFilters={clearFilters}
+                  />
+                </div>
+              ) : null}
+
+              {activeFiltersCount ? (
+                <div
+                  className={cn(
+                    "mb-3 flex flex-col gap-2 text-sm sm:flex-row sm:items-center sm:justify-between",
+                    textMuted,
+                  )}>
+                  <div className="truncate">
+                    <span className="font-semibold">{activeFiltersCount}</span>{" "}
+                    {t("auditLog.page.activeFilter", {
+                      count: activeFiltersCount,
+                    })}
+                  </div>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={clearFilters}
+                    className="h-8 w-full sm:w-auto">
+                    {t("auditLog.page.clear")}
+                  </Button>
+                </div>
+              ) : null}
+            </div>
+
+            {loading ? (
+              <div className="flex items-center justify-center py-12">
+                <div className="text-center">
+                  <RefreshCw
+                    className={cn("h-8 w-8 animate-spin mx-auto", textSubtle)}
+                  />
+                  <p className={cn("mt-2", textMuted)}>
+                    {t("auditLog.page.loadingAc")}
+                  </p>
+                </div>
+              </div>
+            ) : filteredLogs.length === 0 ? (
+              <div
+                className={cn(
+                  "text-center py-12 border-2 border-dashed rounded-lg",
+                  borderDashed,
+                  surface,
+                )}>
+                <h3 className={cn("text-lg font-semibold mb-2", textStrong)}>
+                  {t("auditLog.page.noActivities")}
+                </h3>
+                <p className={cn("max-w-md mx-auto", textMuted)}>
+                  {t("auditLog.page.tryAdjusting")}
+                </p>
+                <Button
+                  variant="outline"
+                  onClick={clearFilters}
+                  className="mt-4">
+                  {t("auditLog.filters.clear")}
+                </Button>
+              </div>
+            ) : viewMode === "card" ? (
+              <div className="mt-6 space-y-4">
+                {filteredLogs.map((log) => (
+                  <ActivityCard key={log.id} activity={log} />
+                ))}
+              </div>
+            ) : (
+              <div className="mt-6">
+                <div className="space-y-3 md:hidden">
+                  {filteredLogs.map((log) => (
+                    <MobileRow key={log.id} log={log} />
+                  ))}
+                </div>
+
+                <div
+                  className={cn(
+                    "hidden md:block rounded-lg border overflow-hidden",
+                    border,
+                    surface,
+                  )}>
+                  <div className="w-full overflow-x-auto">
+                    <Table className="min-w-[900px] lg:min-w-[1100px]">
+                      <TableHeader className={surfaceSoft}>
+                        <TableRow>
+                          <TableHead className="w-[180px]">
+                            {t("auditLog.table.time")}
+                          </TableHead>
+                          <TableHead>{t("auditLog.table.user")}</TableHead>
+                          <TableHead>{t("auditLog.table.action")}</TableHead>
+                          <TableHead className="w-[300px]">
+                            {t("auditLog.table.description")}
+                          </TableHead>
+                          <TableHead>{t("auditLog.table.module")}</TableHead>
+                          <TableHead>{t("auditLog.table.severity")}</TableHead>
+                          <TableHead>{t("auditLog.table.status")}</TableHead>
+                          <TableHead className="w-[72px]" />
+                        </TableRow>
+                      </TableHeader>
+
+                      <TableBody>
+                        {filteredLogs.map((log) => (
+                          <TableRow key={log.id} className={hoverSoft}>
+                            <TableCell className="font-medium">
+                              <div className="flex flex-col">
+                                <span className={cn("text-sm", textStrong)}>
+                                  {format(
+                                    new Date(log.timestamp),
+                                    "MMM d, yyyy",
+                                  )}
+                                </span>
+                                <span className={cn("text-xs", textSubtle)}>
+                                  {format(new Date(log.timestamp), "HH:mm:ss")}
+                                </span>
+                              </div>
+                            </TableCell>
+
+                            <TableCell>
+                              <div className="flex items-center gap-3 min-w-0">
+                                <Avatar className="h-8 w-8 shrink-0">
+                                  {log.performedBy.avatar ? (
+                                    <AvatarImage src={log.performedBy.avatar} />
+                                  ) : null}
+                                  <AvatarFallback>
+                                    {log.performedBy.name
+                                      .charAt(0)
+                                      .toUpperCase()}
+                                  </AvatarFallback>
+                                </Avatar>
+
+                                <div className="min-w-0">
+                                  <div
+                                    className={cn(
+                                      "font-medium truncate max-w-[260px] xl:max-w-[320px]",
+                                      textStrong,
+                                    )}>
+                                    {log.performedBy.name === "System"
+                                      ? t("auditLog.page.systemUser")
+                                      : log.performedBy.name}
+                                  </div>
+                                  <div
+                                    className={cn(
+                                      "text-xs truncate max-w-[260px] xl:max-w-[320px]",
+                                      textSubtle,
+                                    )}>
+                                    {log.performedBy.email}
+                                  </div>
+                                </div>
+                              </div>
+                            </TableCell>
+
+                            <TableCell>
+                              <Badge variant="outline" className="font-medium">
+                                {log.action}
+                              </Badge>
+                            </TableCell>
+
+                            <TableCell className="hidden lg:table-cell">
+                              <div className="min-w-0">
+                                <div
+                                  className={cn(
+                                    "font-medium truncate",
+                                    textStrong,
+                                  )}>
+                                  {log.description}
+                                </div>
+                                {log.resourceName ? (
+                                  <div
+                                    className={cn(
+                                      "text-sm mt-1 truncate",
+                                      textMuted,
+                                    )}>
+                                    {log.resourceName}
+                                  </div>
+                                ) : null}
+                              </div>
+                            </TableCell>
+
+                            <TableCell className="hidden lg:table-cell">
+                              <Badge
+                                variant="secondary"
+                                className="truncate max-w-[180px]"
+                                title={log.module}>
+                                {log.module}
+                              </Badge>
+                            </TableCell>
+
+                            <TableCell>
+                              <Badge
+                                variant="outline"
+                                className={cn(
+                                  "text-xs font-medium",
+                                  getSeverityColor(log.severity),
+                                )}>
+                                {t(`auditLog.severity.${log.severity}`)}
+                              </Badge>
+                            </TableCell>
+
+                            <TableCell>
+                              <Badge
+                                className={cn(
+                                  "text-xs font-medium",
+                                  getStatusColor(log.status),
+                                )}>
+                                {t(`auditLog.status.${log.status}`)}
+                              </Badge>
+                            </TableCell>
+
+                            <TableCell>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                className="h-8 w-8 p-0"
+                                onClick={() => {
+                                  toast.message(`Audit ID: ${log.id}`, {
+                                    description: log.details || log.description,
+                                  });
+                                }}
+                                aria-label={t("auditLog.page.viewDetails")}
+                                title={t("auditLog.page.viewDetails")}>
+                                •••
+                              </Button>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {filteredLogs.length > 0 ? (
+              <div
+                className={cn(
+                  "mt-6 flex flex-col gap-3 text-sm sm:flex-row sm:items-center sm:justify-between",
+                  textMuted,
+                )}>
+                <div>
+                  {t("auditLog.page.showing")}{" "}
+                  <span className="font-semibold">{filteredLogs.length}</span>{" "}
+                  {t("auditLog.page.of")}{" "}
+                  <span className="font-semibold">{totalCount}</span>{" "}
+                  {t("auditLog.page.totalActivities")}
+                </div>
+
+                <div className="grid grid-cols-2 gap-2 sm:flex sm:items-center sm:gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    disabled={currentPage === 1}
+                    onClick={() => setCurrentPage(currentPage - 1)}
+                    className="w-full sm:w-auto">
+                    {t("auditLog.page.prev")}
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    disabled={filteredLogs.length < limit}
+                    onClick={() => setCurrentPage(currentPage + 1)}
+                    className="w-full sm:w-auto">
+                    {t("auditLog.page.next")}
+                  </Button>
+                </div>
+                <div className={cn("text-sm", textMuted)}>
+                  Page {currentPage}
+                </div>
+              </div>
+            ) : null}
+          </CardContent>
+        </Card>
+
+        <ExportModal
+          open={exportModalOpen}
+          onOpenChange={setExportModalOpen}
+          onExport={handleExport}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/pages/audit-log/audit-log.types.ts b/apps/edr-freight-web/backoffice/src/shared/pages/audit-log/audit-log.types.ts
new file mode 100644
index 000000000..41ab5b3ba
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/pages/audit-log/audit-log.types.ts
@@ -0,0 +1,53 @@
+export interface ActivityLog {
+  id: string;
+  action: string;
+  description: string;
+  performedBy: {
+    name: string;
+    email: string;
+    avatar?: string;
+    department?: string;
+  };
+  timestamp: string;
+  module: string;
+  resourceId?: string;
+  resourceName?: string;
+  status: "success" | "failure" | "pending" | "warning";
+  details?: string;
+  ipAddress?: string;
+  location?: string;
+  severity: "low" | "medium" | "high" | "critical";
+  raw?: unknown;
+}
+
+export type UserSummary = {
+  name: string;
+  email: string;
+  phone: string;
+  status: string;
+  userType: string;
+  roles: string[];
+  employeeInfo: Array<{
+    unit: string;
+    positions: Array<{
+      name: string;
+      rank: number | string;
+      permissions: string[];
+    }>;
+  }>;
+  registrationComplete: boolean;
+  passwordSet: boolean;
+};
+
+export type AuditLogPageProps = {
+  /** required: determines which backend module route you call */
+  moduleKey: string;
+
+  /** optional UI */
+  title?: string;
+  subtitle?: string;
+
+  /** optional pagination defaults */
+  initialPage?: number;
+  limit?: number;
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/pages/audit-log/audit-log.utils.ts b/apps/edr-freight-web/backoffice/src/shared/pages/audit-log/audit-log.utils.ts
new file mode 100644
index 000000000..edd2b5b4f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/pages/audit-log/audit-log.utils.ts
@@ -0,0 +1,331 @@
+import i18n from "@/i18n";
+import type { ActivityLog, UserSummary } from "./audit-log.types";
+
+export function safeString(v: unknown): string {
+  if (v === null || v === undefined) return "";
+  if (typeof v === "string") return v;
+  try {
+    return JSON.stringify(v);
+  } catch {
+    return String(v);
+  }
+}
+
+export function toTitleCase(input: string): string {
+  return input
+    .split(" ")
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
+}
+
+export function humanizeKey(raw: string): string {
+  if (!raw) return "";
+  const normalized = raw
+    .replace(/([a-z])([A-Z])/g, "$1 $2")
+    .replace(/[:_.-]+/g, " ")
+    .trim()
+    .toLowerCase();
+  return toTitleCase(normalized);
+}
+
+export function asName(value: unknown): string {
+  if (!value) return "-";
+  if (typeof value === "string") return value;
+  const obj = value as Record<string, unknown>;
+  if (typeof obj?.en === "string" && (obj.en as string).trim()) return obj.en as string;
+  if (typeof obj?.am === "string" && (obj.am as string).trim()) return obj.am as string;
+  return "-";
+}
+
+export function unique(values: string[]): string[] {
+  return Array.from(new Set(values.filter(Boolean)));
+}
+
+export function mapRoleLabel(roleKey?: string): string {
+  if (!roleKey) return "Role";
+  return humanizeKey(roleKey);
+}
+
+export function mapPermissionLabel(permission: unknown): string {
+  const p = permission as Record<string, unknown>;
+  const key = typeof p?.key === "string" ? p.key : "";
+  const named = asName(p?.name);
+  if (named !== "-") return named;
+  if (!key) return "Permission";
+  return humanizeKey(key);
+}
+
+export function buildUserSummary(user: unknown): UserSummary {
+  const u = user as Record<string, unknown>;
+  const employees = Array.isArray(u?.employee) ? u.employee : [];
+
+  return {
+    name: asName(u?.name),
+    email: typeof u?.email === "string" ? u.email : "-",
+    phone: typeof u?.phoneNumber === "string" ? u.phoneNumber : "-",
+    status: humanizeKey(typeof u?.status === "string" ? u.status : ""),
+    userType: humanizeKey(typeof u?.userType === "string" ? u.userType : ""),
+    roles: unique(
+      (Array.isArray(u?.roles) ? u.roles : []).map((r: unknown) => {
+        const role = r as Record<string, unknown>;
+        return mapRoleLabel(typeof role?.key === "string" ? role.key : "");
+      }),
+    ),
+    employeeInfo: employees.map((emp: unknown, empIndex: number) => {
+      const e = emp as Record<string, unknown>;
+      const positions = Array.isArray(e?.positions) ? e.positions : [];
+      return {
+        unit:
+          asName((e?.unit as Record<string, unknown>)?.name) !== "-"
+            ? asName((e?.unit as Record<string, unknown>)?.name)
+            : `Unit ${empIndex + 1}`,
+        positions: positions.map((pos: unknown) => {
+          const p = pos as Record<string, unknown>;
+          return {
+            name: asName(p?.name),
+            rank: typeof p?.rank === "number" ? p.rank : "-",
+            permissions: unique(
+              (Array.isArray(p?.permissions) ? p.permissions : []).map(
+                (perm: unknown) => mapPermissionLabel(perm),
+              ),
+            ),
+          };
+        }),
+      };
+    }),
+    registrationComplete: Boolean(u?.hasFinishedRegistration),
+    passwordSet: Boolean(u?.hasSetPassword),
+  };
+}
+
+export function summarizeValue(value: unknown): string {
+  if (value === null || value === undefined) return i18n.t("common.None");
+  if (
+    typeof value === "string" ||
+    typeof value === "number" ||
+    typeof value === "boolean"
+  ) {
+    return String(value);
+  }
+  if (Array.isArray(value)) {
+    return i18n.t("auditLogShared.modal.itemsCount", { count: value.length });
+  }
+  return i18n.t("auditLogShared.modal.updatedDetails");
+}
+
+export function getValueType(v: unknown): string {
+  if (Array.isArray(v)) return "array";
+  if (v === null) return "null";
+  return typeof v;
+}
+
+export function collectDiffPaths(
+  from: unknown,
+  to: unknown,
+  prefix = "",
+  out: string[] = [],
+  depth = 0,
+): string[] {
+  if (out.length >= 40 || depth > 8) return out;
+
+  const fromType = getValueType(from);
+  const toType = getValueType(to);
+
+  if (fromType !== toType) {
+    out.push(prefix || "(root)");
+    return out;
+  }
+
+  if (
+    fromType === "string" ||
+    fromType === "number" ||
+    fromType === "boolean" ||
+    fromType === "undefined" ||
+    fromType === "null"
+  ) {
+    if (from !== to) out.push(prefix || "(root)");
+    return out;
+  }
+
+  if (fromType === "array") {
+    const fromArr = Array.isArray(from) ? from : [];
+    const toArr = Array.isArray(to) ? to : [];
+
+    if (fromArr.length !== toArr.length)
+      out.push(`${prefix || "(root)"}.length`);
+
+    const maxLen = Math.min(Math.max(fromArr.length, toArr.length), 20);
+    for (let i = 0; i < maxLen; i++) {
+      collectDiffPaths(fromArr[i], toArr[i], `${prefix}[${i}]`, out, depth + 1);
+      if (out.length >= 40) break;
+    }
+    return out;
+  }
+
+  const fromObj =
+    from && typeof from === "object" ? (from as Record<string, unknown>) : {};
+  const toObj =
+    to && typeof to === "object" ? (to as Record<string, unknown>) : {};
+  const keys = Array.from(
+    new Set([...Object.keys(fromObj), ...Object.keys(toObj)]),
+  );
+
+  for (const key of keys) {
+    const next = prefix ? `${prefix}.${key}` : key;
+    collectDiffPaths(fromObj[key], toObj[key], next, out, depth + 1);
+    if (out.length >= 40) break;
+  }
+
+  return out;
+}
+
+type ChangeItem = { field?: string; to?: unknown; from?: unknown };
+
+export function pickFileInfoFromChanges(
+  changes?: ChangeItem[],
+): unknown {
+  if (!changes?.length) return undefined;
+  const fileInfoChange = changes.find((c) => c?.field === "fileInfo");
+  return fileInfoChange?.to || fileInfoChange?.from;
+}
+
+export function pickResourceNameFromChanges(
+  changes?: ChangeItem[],
+): string | undefined {
+  const fileInfo = pickFileInfoFromChanges(changes) as Record<string, unknown> | undefined;
+  const fileName =
+    fileInfo?.originalname || fileInfo?.fileName || fileInfo?.contentType;
+  return fileName ? String(fileName) : undefined;
+}
+
+export function pickResourceName(
+  item: unknown,
+  changes?: ChangeItem[],
+): string | undefined {
+  const fromChanges = pickResourceNameFromChanges(changes);
+  if (fromChanges) return fromChanges;
+
+  const it = item as Record<string, unknown>;
+  const payload = it?.payload;
+  if (payload && typeof payload === "object") {
+    const p = payload as Record<string, unknown>;
+    if (typeof p?.entity === "string" && p.entity.trim()) return p.entity;
+    if (typeof p?.id === "string" && p.id.trim()) return p.id;
+  }
+
+  return undefined;
+}
+
+export function extractActor(u: unknown): ActivityLog["performedBy"] | null {
+  if (!u || typeof u !== "object") return null;
+  const user = u as Record<string, unknown>;
+
+  const email = typeof user?.email === "string" ? user.email : undefined;
+  const name =
+    typeof user?.name === "string"
+      ? user.name
+      : typeof (user?.name as Record<string, unknown>)?.en === "string"
+        ? (user.name as Record<string, unknown>).en as string
+        : typeof (user?.name as Record<string, unknown>)?.am === "string"
+          ? (user.name as Record<string, unknown>).am as string
+          : typeof user?.username === "string"
+            ? user.username
+            : undefined;
+
+  if (!name && !email) return null;
+
+  return {
+    name: name || (email ? email.split("@")[0] : "System"),
+    email: email || "system@audit",
+  };
+}
+
+export function pickPerformedBy(
+  item: unknown,
+  changes?: ChangeItem[],
+): ActivityLog["performedBy"] {
+  if (changes?.length) {
+    const userInfoChange = changes.find((c) => c?.field === "userInfo");
+    const fromChanges = extractActor(userInfoChange?.to || userInfoChange?.from);
+    if (fromChanges) return fromChanges;
+  }
+
+  const it = item as Record<string, unknown>;
+  const fromAuditLog = extractActor((it?.auditLog as Record<string, unknown>)?.user);
+  if (fromAuditLog) return fromAuditLog;
+
+  return { name: "System", email: "system@audit" };
+}
+
+export function mapQueryMethodToStatus(_method?: string): ActivityLog["status"] {
+  return "success";
+}
+
+export function mapQueryMethodToSeverity(method?: string): ActivityLog["severity"] {
+  switch ((method || "").toUpperCase()) {
+    case "DELETE":
+      return "high";
+    case "INSERT":
+    case "INSERT_CHILD":
+      return "medium";
+    case "UPDATE":
+      return "low";
+    default:
+      return "low";
+  }
+}
+
+export function buildDescription(entityName?: string, queryMethod?: string): string {
+  const e = entityName || "entity";
+  const m = (queryMethod || "ACTION").toUpperCase();
+  if (m === "UPDATE") return `Updated ${e}`;
+  if (m === "INSERT") return `Created ${e}`;
+  if (m === "INSERT_CHILD") return `Created related ${e}`;
+  if (m === "DELETE") return `Deleted ${e}`;
+  return `${m} on ${e}`;
+}
+
+export function buildDetails(
+  changes?: ChangeItem[],
+  payload?: unknown,
+  queryMethod?: string,
+  entityName?: string,
+): string | undefined {
+  if (!changes?.length) {
+    if (payload && typeof payload === "object") {
+      const p = payload as Record<string, unknown>;
+      const payloadEntity = typeof p?.entity === "string" ? p.entity : entityName;
+      const payloadId = typeof p?.id === "string" ? p.id : undefined;
+
+      if (payloadEntity || payloadId) {
+        return `${(queryMethod || "ACTION").toUpperCase()} ${
+          payloadEntity || "entity"
+        }${payloadId ? ` (id: ${payloadId})` : ""}`;
+      }
+    }
+
+    return undefined;
+  }
+
+  const lines = changes.slice(0, 8).map((c) => {
+    const field = c?.field || "field";
+
+    if (field === "userInfo") {
+      const from = c?.from as Record<string, unknown> | undefined;
+      const to = c?.to as Record<string, unknown> | undefined;
+      const fromEmail = from?.email ? String(from.email) : "-";
+      const toEmail = to?.email ? String(to.email) : "-";
+      const fromName = asName((from?.name as Record<string, unknown>)?.en ?? from?.name);
+      const toName = asName((to?.name as Record<string, unknown>)?.en ?? to?.name);
+      return `userInfo: ${fromName} (${fromEmail}) -> ${toName} (${toEmail})`;
+    }
+
+    const fromStr = c?.from === null ? "null" : safeString(c?.from);
+    const toStr = c?.to === null ? "null" : safeString(c?.to);
+    return `${field}: ${fromStr} -> ${toStr}`;
+  });
+
+  const more = changes.length > 8 ? `\n... +${changes.length - 8} more` : "";
+  return lines.join("\n") + more;
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/routes/routeConfig.ts b/apps/edr-freight-web/backoffice/src/shared/routes/routeConfig.ts
new file mode 100644
index 000000000..7fa60c406
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/routes/routeConfig.ts
@@ -0,0 +1,23 @@
+import { t } from "i18next";
+
+export type ModuleKey = "objective" | "performance";
+
+export const ROUTE_CONFIG: Record<
+  ModuleKey,
+  {
+    basePath: string;
+    planYearsPath: string;
+    navLabelKey: string;
+  }
+> = {
+  performance: {
+    basePath: "/performance-management",
+    planYearsPath: "/performance-management/plan-years",
+    navLabelKey: "nav.performanceManagement",
+  },
+  objective: {
+    basePath: "/objective-management",
+    planYearsPath: "/objective-management/plan-years",
+    navLabelKey: "nav.objectiveManagement",
+  },
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/routes/useActiveModule.ts b/apps/edr-freight-web/backoffice/src/shared/routes/useActiveModule.ts
new file mode 100644
index 000000000..df5fc6010
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/routes/useActiveModule.ts
@@ -0,0 +1,12 @@
+import { useLocation } from "react-router-dom";
+import { ModuleKey } from "./routeConfig";
+
+export function useActiveModule(): ModuleKey {
+  const { pathname } = useLocation();
+
+  if (pathname.startsWith("/objective-management")) {
+    return "objective";
+  }
+
+  return "performance";
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/Recordservice.ts b/apps/edr-freight-web/backoffice/src/shared/services/Recordservice.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/audit/audit.api.ts b/apps/edr-freight-web/backoffice/src/shared/services/audit/audit.api.ts
new file mode 100644
index 000000000..30bd3f7f1
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/audit/audit.api.ts
@@ -0,0 +1,107 @@
+import { auditHttp } from './audit.http'
+
+export type AuditChange = {
+	field: string
+	from: unknown
+	to: unknown
+}
+
+export type AuditLogCommandItem = {
+	id: string
+	createdAt: string
+	deletedAt: string | null
+	entityName: string
+	payload: unknown | null
+	changes: AuditChange[]
+	queryMethod: 'INSERT' | 'UPDATE' | 'DELETE' | string
+	auditLog: unknown | null
+}
+
+export type AuditLogExtensionItem = {
+	id?: string
+	createdAt: string
+	entityName: string
+	queryMethod: 'INSERT' | 'UPDATE' | 'DELETE' | string
+	user: {
+		id: string
+		name: {
+			am: string
+			en: string
+		}
+		email: string
+		userId?: string
+		username?: string
+		sessionId?: string
+		employeeId?: string
+		positionId?: string
+		employeePositionId?: string
+	}
+	changes?: AuditChange[]
+}
+
+export type Paginated<T> = {
+	count: number
+	items: T[]
+}
+
+export type AuditListQuery = {
+	skip?: number
+	take?: number
+	orderBy?: string
+}
+
+export type AuditContext = {
+	unitId?: string
+	organizationId?: string
+}
+
+type ParamValue = string | number | boolean | null | undefined
+
+function toParams<T extends Record<string, ParamValue>>(q?: T) {
+	if (!q) return undefined
+
+	const params = new URLSearchParams()
+
+	Object.entries(q).forEach(([k, v]) => {
+		if (v === undefined || v === null) return
+		if (typeof v === 'string' && v.trim() === '') return
+		params.set(k, String(v))
+	})
+
+	return params
+}
+
+export async function listAuditLogCommandsByModule(
+	moduleKey: string,
+	query?: AuditListQuery,
+	context?: AuditContext,
+) {
+	const { data } = await auditHttp.get<Paginated<AuditLogCommandItem>>(
+		`/audit-log-commands/all/${encodeURIComponent(moduleKey)}`,
+		{
+			params: toParams(query),
+			headers: {
+				...(context?.unitId
+					? { 'x-current-unit-id': context.unitId }
+					: {}),
+				...(context?.organizationId
+					? { 'x-current-organization-id': context.organizationId }
+					: {}),
+			},
+		},
+	)
+	return data
+}
+
+export async function listAuditLogExtensions(
+	endpoint: string = '/audit-log-extensions/audit/unitAdmin',
+	query?: AuditListQuery,
+) {
+	const { data } = await auditHttp.get<Paginated<AuditLogExtensionItem>>(
+		endpoint,
+		{
+			params: toParams(query),
+		},
+	)
+	return data
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/audit/audit.http.ts b/apps/edr-freight-web/backoffice/src/shared/services/audit/audit.http.ts
new file mode 100644
index 000000000..45f87c126
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/audit/audit.http.ts
@@ -0,0 +1,33 @@
+import { toast } from 'sonner'
+import { AUDITLOG_API_URL } from '@/shared/config/app.config'
+import { createHttpClient, type TokenPair } from '../http/http-client-factory'
+import { getRefreshToken } from '@/shared/utils/refreshTokenHandler'
+
+async function refreshFn(refreshToken: string): Promise<TokenPair> {
+	const res = await getRefreshToken(refreshToken)
+	return {
+		accessToken: res.data.token,
+		refreshToken: res.data.refreshToken,
+	}
+}
+
+export const auditHttp = createHttpClient({
+	baseURL: AUDITLOG_API_URL,
+	cookieKeys: {
+		access: 'auth-token',
+		refresh: 'refresh-token',
+		user: 'auth-user',
+	},
+	refreshFn,
+	skipRefreshPaths: ['/auth/login', '/auth/refresh', '/auth/me'],
+	onAuthFailure: () => {
+		toast.error('Session expired', {
+			description: 'Please log in again.',
+			duration: 4000,
+		})
+
+		setTimeout(() => {
+			window.location.href = '/'
+		}, 1200)
+	},
+})
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/authService.ts b/apps/edr-freight-web/backoffice/src/shared/services/authService.ts
new file mode 100644
index 000000000..4bbf5eace
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/authService.ts
@@ -0,0 +1,346 @@
+// src/services/api/authService.ts
+import { VerifyUserPayload } from "@/record-management/services/api/authService";
+import axiosInstance from "./axiosInstance";
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import axios from "axios";
+
+export interface SignupPayload {
+  email: string;
+  username: string;
+  password: string;
+  userType: string;
+  name: {
+    am: string;
+    en: string;
+  };
+}
+
+export interface LoginPayload {
+  email?: string;
+  phoneNumber?: string;
+  userName?: string;
+  password: string;
+}
+
+export interface AuthHeaders {
+  tenantKey: string;
+  unitId?: string;
+}
+
+export interface SetPasswordPayload {
+  userId?: string;
+  email?: string;
+  phoneNumber?: string;
+  verificationCode: string;
+  newPassword: string;
+  confirmPassword: string;
+}
+export interface SetFayidaPasswordPayload {
+  userId: string;
+  newPassword: string;
+  confirmPassword: string;
+}
+export interface ChangePasswordPayload {
+  oldPassword: string;
+  newPassword: string;
+  confirmPassword: string;
+}
+export interface UpdateProfilePayload {
+  email: string;
+  username: string;
+  phoneNumber: string;
+  name: {
+    am: string;
+    en: string;
+  };
+}
+export interface OtpVerificationPayload {
+  email: string;
+  phoneNumber: string;
+  verificationCode: string;
+}
+
+export interface GenerateVerifcationCodePayload {
+  phoneNumber: string;
+  email?: string;
+  verificationCode?: string;
+}
+
+export enum EOtpType {
+  SET_PASSWORD = "set-password",
+  RESET_PASSWORD = "reset-password",
+  VERIFY_PHONE_NUMBER = "verify-phone-number",
+}
+
+export const signup = async (payload: SignupPayload, headers: AuthHeaders) => {
+  return axiosInstance.post("/auth/signup", payload, {
+    headers: {
+      "x-organization-tenant-key": headers.tenantKey,
+      ...(headers.unitId && { "x-organization-unit-id": headers.unitId }),
+    },
+  });
+};
+
+export const login = async (payload: LoginPayload) => {
+  // Validate that at least one identifier is provided
+  if (!payload.email && !payload.phoneNumber && !payload.userName) {
+    throw new Error(
+      "At least one login identifier (email, phoneNumber, or userName) is required",
+    );
+  }
+
+  return axiosInstance.post("/auth/login", payload);
+};
+
+export const getProfile = async (
+  config?: Parameters<typeof axiosInstance.get>[1],
+) => {
+  return axiosInstance.get("/auth/me", {
+    ...config,
+    headers: {
+      ...withHeaders(),
+      ...(config?.headers ?? {}),
+    },
+  });
+};
+export const updateProfile = async (payload: UpdateProfilePayload) => {
+  return axiosInstance.patch("/auth/update-profile", payload);
+};
+
+export const setPassword = async (payload: SetPasswordPayload) => {
+  return axiosInstance.patch("/auth/set-password", payload);
+};
+export const setFayidaPass = async (payload: SetFayidaPasswordPayload) => {
+  return axiosInstance.patch("/auth/set-fayda-password", payload);
+};
+export const changePassword = async (payload: ChangePasswordPayload) => {
+  return axiosInstance.patch("/auth/change-password", payload);
+};
+export const resendVerificationCode = async (
+  payload: GenerateVerifcationCodePayload,
+) => {
+  const payloadObj = {
+    ...payload,
+    type: EOtpType.SET_PASSWORD,
+  };
+  return axiosInstance.patch("/auth/generate-verification-code", payloadObj);
+};
+export const verifyOTPCode = async (
+  payload: GenerateVerifcationCodePayload,
+) => {
+  return axiosInstance.patch("/auth/verify-phone-number", payload);
+};
+export const resendOtpCode = async (
+  payload: GenerateVerifcationCodePayload,
+) => {
+  const payloadObj = {
+    ...payload,
+    type: EOtpType.VERIFY_PHONE_NUMBER,
+  };
+  return axiosInstance.patch("/auth/generate-verification-code", payloadObj);
+};
+
+export const refreshAuthToken = async (payload: { refreshToken: string }) => {
+  return axiosInstance.post("/auth/refresh-token", payload);
+};
+
+export const requestForgotPassword = async (identifier: string) => {
+  try {
+    // The API expects the identifier in the email field regardless of whether it's an email or phone
+    const payload = { email: identifier };
+
+    const response = await axiosInstance.post("/auth/forgot-password", payload);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export const logout = async () => {
+  return axiosInstance.patch("/auth/logout");
+};
+
+export const verifyMFAUser = async (payload: VerifyUserPayload) => {
+  return axiosInstance.post("/auth/mfa-verify", payload, {
+    headers: withHeaders(),
+  });
+};
+
+export interface RegisterWithFaydaPayload {
+  code: string;
+}
+
+export interface RegisterWithFaydaResponse {
+  userId?: string;
+  token?: string;
+  refreshToken?: string;
+  fullName?: string;
+  faydaId?: string;
+  user?: {
+    id?: string;
+    userId?: string;
+    fullName?: string;
+    faydaId?: string;
+    name?: string | { am?: string; en?: string };
+    [key: string]: unknown;
+  };
+  citizen?: {
+    fullName?: string;
+    faydaId?: string;
+  };
+  [key: string]: unknown;
+}
+
+export const signinWithFayda = async (payload: RegisterWithFaydaPayload) => {
+  return axiosInstance.post<RegisterWithFaydaResponse>(
+    "/auth/signin-with-fayda",
+    payload,
+    { headers: withHeaders() },
+  );
+};
+
+export const signupWithFayda = async (payload: RegisterWithFaydaPayload) => {
+  return axiosInstance.post<RegisterWithFaydaResponse>(
+    "/auth/signup-with-fayda",
+    payload,
+    { headers: withHeaders() },
+  );
+};
+
+export const signinWithEtrade = async (payload: EtradeSigninPayload) => {
+  return axiosInstance.post<RegisterWithEtradeResponse>(
+    "/auth/signin-with-etrade",
+    payload,
+    { headers: withHeaders() },
+  );
+};
+
+export const signupWithEtrade = async (payload: EtradeSignupPayload) => {
+  return axiosInstance.post<RegisterWithEtradeResponse>(
+    "/auth/signup-with-etrade",
+    payload,
+    { headers: withHeaders() },
+  );
+};
+
+export const verifyEtradeOtp = async (payload: VerifyEtradeOtpPayload) => {
+  return axiosInstance.post("/auth/verify-etrade-otp", payload, {
+    headers: withHeaders(),
+  });
+};
+
+export const registerWithFayda = async (payload: RegisterWithFaydaPayload) => {
+  const trySignin = () => signinWithFayda(payload);
+
+  const trySignup = () => signupWithFayda(payload);
+
+  const isUserNotFound = (err: unknown) => {
+    if (!axios.isAxiosError(err)) return false;
+    const status = err.response?.status;
+    const data = err.response?.data as any;
+    const code =
+      typeof data?.code === "string"
+        ? data.code
+        : typeof data?.errorCode === "string"
+          ? data.errorCode
+          : typeof data?.message === "string"
+            ? data.message
+            : "";
+    const codeLower = code.toLowerCase();
+    return (
+      status === 404 ||
+      codeLower.includes("not_found") ||
+      codeLower.includes("user_not_found") ||
+      codeLower.includes("does_not_exist") ||
+      codeLower.includes("not exist")
+    );
+  };
+
+  try {
+    return await trySignin();
+  } catch (err) {
+    if (!isUserNotFound(err)) throw err;
+    return await trySignup();
+  }
+};
+
+export interface EtradeSignupPayload {
+  tin: string;
+  licenseNumber: string;
+}
+
+export interface EtradeSigninPayload {
+  licenseNumber: string;
+}
+
+/** @deprecated Use EtradeSigninPayload */
+export interface RegisterWithEtradePayload {
+  licenseNumber: string;
+}
+
+export type RegisterWithEtradeResponse = RegisterWithFaydaResponse;
+
+export interface VerifyEtradeOtpPayload {
+  licenseNo: string;
+  otp: string;
+}
+
+export const registerWithEtrade = async (
+  payload:
+    | EtradeSigninPayload
+    | EtradeSignupPayload
+    | RegisterWithEtradePayload
+    | { tin: string; licenseNo: string }
+    | { licenseNo: string },
+) => {
+  const resolveLicenseNumber = () => {
+    if ("licenseNumber" in payload) return payload.licenseNumber;
+    if ("licenseNo" in payload) return payload.licenseNo;
+    return payload.licenseNumber;
+  };
+
+  const trySignin = () =>
+    signinWithEtrade({ licenseNumber: resolveLicenseNumber() });
+
+  const trySignup = () => {
+    if ("tin" in payload && ("licenseNumber" in payload || "licenseNo" in payload)) {
+      return signupWithEtrade({
+        tin: payload.tin,
+        licenseNumber: resolveLicenseNumber(),
+      });
+    }
+    return signupWithEtrade({
+      tin: "",
+      licenseNumber: resolveLicenseNumber(),
+    });
+  };
+
+  const isUserNotFound = (err: unknown) => {
+    if (!axios.isAxiosError(err)) return false;
+    const status = err.response?.status;
+    const data = err.response?.data as any;
+    const code =
+      typeof data?.code === "string"
+        ? data.code
+        : typeof data?.errorCode === "string"
+          ? data.errorCode
+          : typeof data?.message === "string"
+            ? data.message
+            : "";
+    const codeLower = code.toLowerCase();
+    return (
+      status === 404 ||
+      codeLower.includes("not_found") ||
+      codeLower.includes("user_not_found") ||
+      codeLower.includes("does_not_exist") ||
+      codeLower.includes("not exist")
+    );
+  };
+
+  try {
+    return await trySignin();
+  } catch (err) {
+    if (!isUserNotFound(err)) throw err;
+    return await trySignup();
+  }
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/axiosInstance.ts b/apps/edr-freight-web/backoffice/src/shared/services/axiosInstance.ts
new file mode 100644
index 000000000..d0e7f5866
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/axiosInstance.ts
@@ -0,0 +1,108 @@
+// src/services/api/axiosInstance.ts
+import axios from "axios";
+import Cookies from "js-cookie";
+import { getEnvUrl } from "@/shared/config/env";
+import { getRefreshToken } from "../utils/refreshTokenHandler";
+import {
+  getRememberMePreference,
+  setAuthCookies,
+} from "../utils/authPersistence";
+import { handleSessionExpiry } from "./sessionExpiry";
+
+if (!import.meta.env.VITE_API_URL) {
+  console.warn("Missing VITE_API_URL — IAM axios instance has no base URL");
+}
+
+const axiosInstance = axios.create({
+  baseURL: getEnvUrl("VITE_API_URL"),
+});
+
+// Attach auth token and CSRF defence header to every request
+axiosInstance.interceptors.request.use((config) => {
+  const token = Cookies.get("auth-token");
+  if (token) {
+    config.headers["Authorization"] = `Bearer ${token}`;
+  }
+  // X-Requested-With prevents CSRF via browser-native form/fetch without custom headers
+  config.headers["X-Requested-With"] = "XMLHttpRequest";
+  return config;
+});
+
+let isRefreshing = false;
+let failedQueue: any[] = [];
+
+const processQueue = (error: any, token: string | null = null) => {
+  failedQueue.forEach((prom) => {
+    if (error) prom.reject(error);
+    else prom.resolve(token);
+  });
+  failedQueue = [];
+};
+
+const skipRefreshUrls = [
+  "/auth/login",
+  "/auth/refresh",
+  "/auth/refresh-token",
+  "auth/me",
+];
+
+axiosInstance.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const originalRequest = error.config;
+
+    // 🔒 Skip refresh logic for specific URLs
+    const shouldSkip = skipRefreshUrls.some((url) =>
+      originalRequest.url?.includes(url),
+    );
+
+    if (shouldSkip) {
+      return Promise.reject(error);
+    }
+    const rememberMe = getRememberMePreference();
+
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      if (isRefreshing) {
+        return new Promise(function (resolve, reject) {
+          failedQueue.push({ resolve, reject });
+        })
+          .then((token) => {
+            originalRequest.headers["Authorization"] = "Bearer " + token;
+            return axiosInstance(originalRequest);
+          })
+          .catch((err) => Promise.reject(err));
+      }
+
+      originalRequest._retry = true;
+      isRefreshing = true;
+      try {
+        const refreshToken = Cookies.get("refresh-token");
+        if (!refreshToken) {
+          throw new Error("missing-refresh-token");
+        }
+
+        const newToken = await getRefreshToken(refreshToken);
+        const updatedToken = newToken.data.token;
+        const updatedRefreshToken = newToken.data.refreshToken;
+        processQueue(null, newToken.data.token);
+        setAuthCookies({
+          token: updatedToken,
+          refreshToken: updatedRefreshToken,
+          rememberMe,
+        });
+        originalRequest.headers["Authorization"] = `Bearer ${updatedToken}`;
+        return axiosInstance(originalRequest);
+      } catch (err) {
+        processQueue(err, null);
+        handleSessionExpiry();
+        return Promise.reject(err);
+      } finally {
+        isRefreshing = false;
+      }
+    }
+
+    return Promise.reject(error);
+  },
+);
+
+export default axiosInstance;
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/chronicleInstance.ts b/apps/edr-freight-web/backoffice/src/shared/services/chronicleInstance.ts
new file mode 100644
index 000000000..740b95990
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/chronicleInstance.ts
@@ -0,0 +1,110 @@
+// src/services/api/axiosInstance.ts
+import axios from "axios";
+import Cookies from "js-cookie";
+import { getEnvUrl } from "@/shared/config/env";
+import { getRefreshToken } from "../utils/refreshTokenHandler";
+import {
+  getRememberMePreference,
+  setAuthCookies,
+} from "../utils/authPersistence";
+import { handleSessionExpiry } from "./sessionExpiry";
+
+if (!import.meta.env.VITE_CHRONICLE_URL) {
+  console.warn("Missing VITE_CHRONICLE_URL — chronicle axios instance has no base URL");
+}
+
+const chronicleBaseUrl =
+  getEnvUrl("VITE_CHRONICLE_URL", false) ||
+  getEnvUrl("VITE_AUDITLOG_API_URL", false);
+
+if (!chronicleBaseUrl) {
+  console.warn("Missing VITE_CHRONICLE_URL and VITE_AUDITLOG_API_URL");
+}
+
+const chronicleInstance = axios.create({
+  baseURL: chronicleBaseUrl,
+});
+
+// Attach auth token and CSRF defence header to every request
+chronicleInstance.interceptors.request.use((config) => {
+  const token = Cookies.get("auth-token");
+  if (token) {
+    config.headers["Authorization"] = `Bearer ${token}`;
+  }
+  config.headers["X-Requested-With"] = "XMLHttpRequest";
+  return config;
+});
+
+let isRefreshing = false;
+let failedQueue: any[] = [];
+
+const processQueue = (error: any, token: string | null = null) => {
+  failedQueue.forEach((prom) => {
+    if (error) prom.reject(error);
+    else prom.resolve(token);
+  });
+  failedQueue = [];
+};
+
+const skipRefreshUrls = ["/auth/login", "/auth/refresh", "/auth/me"]; // Add all URLs to skip
+
+chronicleInstance.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const originalRequest = error.config;
+
+    // 🔒 Skip refresh logic for specific URLs
+    const shouldSkip = skipRefreshUrls.some((url) =>
+      originalRequest.url?.includes(url),
+    );
+
+    if (shouldSkip) {
+      return Promise.reject(error);
+    }
+
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      if (isRefreshing) {
+        return new Promise(function (resolve, reject) {
+          failedQueue.push({ resolve, reject });
+        })
+          .then((token) => {
+            originalRequest.headers["Authorization"] = "Bearer " + token;
+            return chronicleInstance(originalRequest);
+          })
+          .catch((err) => Promise.reject(err));
+      }
+
+      originalRequest._retry = true;
+      isRefreshing = true;
+      try {
+        const refreshToken = Cookies.get("refresh-token");
+        if (!refreshToken) {
+          throw new Error("missing-refresh-token");
+        }
+        const rememberMe = getRememberMePreference();
+
+        const newToken = await getRefreshToken(refreshToken);
+        const updatedToken = newToken.data.token;
+        const updatedRefreshToken = newToken.data.refreshToken;
+        processQueue(null, newToken.data.token);
+        setAuthCookies({
+          token: updatedToken,
+          refreshToken: updatedRefreshToken,
+          rememberMe,
+        });
+        originalRequest.headers["Authorization"] = `Bearer ${updatedToken}`;
+        return chronicleInstance(originalRequest);
+      } catch (err) {
+        processQueue(err, null);
+        handleSessionExpiry();
+        return Promise.reject(err);
+      } finally {
+        isRefreshing = false;
+      }
+    }
+
+    return Promise.reject(error);
+  },
+);
+
+export default chronicleInstance;
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/complaintService.ts b/apps/edr-freight-web/backoffice/src/shared/services/complaintService.ts
new file mode 100644
index 000000000..8dfd9553c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/complaintService.ts
@@ -0,0 +1,44 @@
+import recordAxiosInstance from "./recordAxiosInstance";
+import { AxiosResponse } from "axios";
+
+export interface FileInfo {
+  fileName: string;
+  contentType: string;
+  size: number;
+  originalname: string;
+}
+
+export interface ComplaintPayload {
+  fullName: string;
+  phoneNumber: string;
+  subCity: string;
+  woreda: string;
+  houseNumber: string;
+  institution: string;
+  complaintPlace: string;
+  complaintDetail: string;
+  desiredResolution: string;
+  fileInfo?: FileInfo;
+}
+
+export interface ComplaintResponse {
+  id: string;
+  complaintNumber: string;
+  status: string;
+  createdAt: string;
+  message?: string;
+}
+
+// Submit customer complaint
+export const submitComplaint = async (
+  payload: ComplaintPayload
+): Promise<AxiosResponse<ComplaintResponse>> => {
+  return recordAxiosInstance.post("/customer-complaints", payload);
+};
+
+// Get complaint by ID (for tracking)
+export const getComplaintById = async (
+  id: string
+): Promise<AxiosResponse<ComplaintResponse>> => {
+  return recordAxiosInstance.get(`/customer-complaints/${id}`);
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/exportService.ts b/apps/edr-freight-web/backoffice/src/shared/services/exportService.ts
new file mode 100644
index 000000000..5d05b8405
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/exportService.ts
@@ -0,0 +1,245 @@
+import axiosInstance from "./axiosInstance";
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import * as XLSX from "xlsx";
+
+export interface ExportUserDataResponse {
+  success: boolean;
+  message: string;
+  data?: unknown;
+}
+
+export const exportService = {
+  /**
+   * Get units list for a specific organization, including child units
+     * @param organizationId - The organization ID to get units for
+      * @returns Promise with units list (flattened, including all children)
+   */
+  getUnitsList: async (organizationId: string) => {
+    try {
+      // Recursive function to flatten unit hierarchy
+      const flattenUnits = async (units: any[]): Promise<any[]> => {
+        const result: any[] = [];
+        
+        for (const unit of units) {
+          result.push(unit);
+          
+          // Try to fetch child units for this unit
+          try {
+            const childResponse = await axiosInstance.get(
+              `/units/child-units/${unit.id}`,
+              {
+                headers: withHeaders(),
+                params: {
+                  take: 1000,
+                  skip: 0,
+                },
+              },
+            );
+            
+            if (childResponse.data?.items && childResponse.data.items.length > 0) {
+              const flattenedChildren = await flattenUnits(childResponse.data.items);
+              result.push(...flattenedChildren);
+            }
+          } catch (error) {
+            // If child units fail to load, continue with next unit
+            console.warn(`Failed to fetch child units for ${unit.id}:`, error);
+          }
+        }
+        
+        return result;
+      };
+
+      // First, get the top-level units for the organization
+      const response = await axiosInstance.get(
+        `/units/list/${organizationId}`,
+        {
+          headers: withHeaders(),
+          params: {
+            take: 1000,
+            skip: 0,
+          },
+        },
+      );
+
+      // Then flatten the hierarchy to include all child units
+      const allUnits = await flattenUnits(response.data?.items || []);
+
+      return {
+        success: true,
+        data: {
+          ...response.data,
+          items: allUnits,
+        },
+      };
+    } catch (error: unknown) {
+      console.error("Failed to fetch units:", error);
+      return {
+        success: false,
+        message:
+          (error as { response?: { data?: { message?: string } } })?.response
+            ?.data?.message || "Failed to fetch units",
+        data: null,
+      };
+    }
+  },
+
+  /**
+   * Export user data for a specific unit
+   * @param unitId - The unit ID to export data for
+   * @param format - Export format ('xlsx' or 'csv')
+   * @returns Promise with export response
+   */
+  exportUserData: async (
+    unitId: string,
+    format: "xlsx" | "csv" = "xlsx",
+  ): Promise<ExportUserDataResponse> => {
+    try {
+      const response = await axiosInstance.get(
+        `/employees/export-user-data/${unitId}`,
+        {
+          headers: withHeaders(),
+          responseType: "json", // Changed from blob to json
+        },
+      );
+
+      // Convert JSON data to XLSX
+      const jsonData = response.data;
+
+      // Create a new workbook
+      const workbook = XLSX.utils.book_new();
+
+      // Handle different data structures
+      if (Array.isArray(jsonData)) {
+        // If it's an array, convert it to a worksheet
+        const worksheet = XLSX.utils.json_to_sheet(jsonData);
+        XLSX.utils.book_append_sheet(workbook, worksheet, "Data");
+      } else if (jsonData && typeof jsonData === "object") {
+        // If it's an object, check for positions and users arrays
+        if (jsonData.positions && Array.isArray(jsonData.positions)) {
+          const positionsWorksheet = XLSX.utils.json_to_sheet(
+            jsonData.positions,
+          );
+          XLSX.utils.book_append_sheet(
+            workbook,
+            positionsWorksheet,
+            "Positions",
+          );
+        }
+
+        if (jsonData.users && Array.isArray(jsonData.users)) {
+          const usersWorksheet = XLSX.utils.json_to_sheet(jsonData.users);
+          XLSX.utils.book_append_sheet(workbook, usersWorksheet, "Users");
+        }
+
+        // If no positions or users found, try to find any array property
+        if (!jsonData.positions && !jsonData.users) {
+          const dataArray = Object.values(jsonData).find((value) =>
+            Array.isArray(value),
+          );
+          if (dataArray) {
+            const worksheet = XLSX.utils.json_to_sheet(dataArray);
+            XLSX.utils.book_append_sheet(workbook, worksheet, "Data");
+          } else {
+            // If no array found, convert the object itself
+            const worksheet = XLSX.utils.json_to_sheet([jsonData]);
+            XLSX.utils.book_append_sheet(workbook, worksheet, "Data");
+          }
+        }
+      } else {
+        // If it's not an array or object, create a simple worksheet
+        const worksheet = XLSX.utils.json_to_sheet([{ data: jsonData }]);
+        XLSX.utils.book_append_sheet(workbook, worksheet, "Data");
+      }
+
+      // Generate file as buffer based on format
+      let fileBuffer: ArrayBuffer;
+      let mimeType: string;
+      let fileExtension: string;
+
+      if (format === "csv") {
+        // For CSV, we need to combine all data into a single sheet
+        let csvString = "";
+
+        if (
+          jsonData &&
+          typeof jsonData === "object" &&
+          (jsonData.positions || jsonData.users)
+        ) {
+          // Combine positions and users data for CSV
+          const allData: Array<Record<string, unknown> & { dataType: string }> =
+            [];
+
+          if (jsonData.positions && Array.isArray(jsonData.positions)) {
+            jsonData.positions.forEach((item: Record<string, unknown>) => {
+              allData.push({ ...item, dataType: "Position" });
+            });
+          }
+
+          if (jsonData.users && Array.isArray(jsonData.users)) {
+            jsonData.users.forEach((item: Record<string, unknown>) => {
+              allData.push({ ...item, dataType: "User" });
+            });
+          }
+
+          if (allData.length > 0) {
+            const combinedWorksheet = XLSX.utils.json_to_sheet(allData);
+            csvString = XLSX.utils.sheet_to_csv(combinedWorksheet);
+          }
+        } else {
+          // Fallback to first worksheet
+          const firstSheetName = workbook.SheetNames[0];
+          const worksheet = workbook.Sheets[firstSheetName];
+          csvString = XLSX.utils.sheet_to_csv(worksheet);
+        }
+
+        fileBuffer = new TextEncoder().encode(csvString);
+        mimeType = "text/csv";
+        fileExtension = "csv";
+      } else {
+        // For XLSX
+        fileBuffer = XLSX.write(workbook, {
+          bookType: "xlsx",
+          type: "array",
+        });
+        mimeType =
+          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+        fileExtension = "xlsx";
+      }
+
+      // Create a blob from the file buffer
+      const blob = new Blob([fileBuffer], {
+        type: mimeType,
+      });
+
+      // Create a download link
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+
+      // Set filename with timestamp
+      const timestamp = new Date().toISOString().split("T")[0];
+      const filename = `user-data-export-${timestamp}.${fileExtension}`;
+
+      link.download = filename;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(url);
+
+      return {
+        success: true,
+        message: "Export completed successfully",
+        data: jsonData,
+      };
+    } catch (error: unknown) {
+      console.error("Export failed:", error);
+      return {
+        success: false,
+        message:
+          (error as { response?: { data?: { message?: string } } })?.response
+            ?.data?.message || "Export failed. Please try again.",
+        data: null,
+      };
+    }
+  },
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/fileService.ts b/apps/edr-freight-web/backoffice/src/shared/services/fileService.ts
new file mode 100644
index 000000000..9b7b2fe9c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/fileService.ts
@@ -0,0 +1,190 @@
+import { AxiosInstance } from "axios";
+import { presignedAxios } from "./presignedAxios";
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import { XSSUploadValidator, XSSUploadValidationContext } from "./validation";
+
+/**
+ * NOTE: File validation happens on the server-side.
+ * The browser uses XSSUploadValidator for early feedback to users.
+ * The server uses BufferContentValidator with file-type library for actual validation.
+ */
+
+export const UUID_RE =
+  /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+
+const isValidUUID = (id: string): boolean => UUID_RE.test(id);
+type UUID = string;
+
+// ---- UploadContext ----
+export interface UploadContext<TBody> {
+  endpoint: string;
+  buildBody: (file: File, fileName: string, parentId: UUID) => TBody;
+  allowedMimeTypes?: string[];
+  allowedExtensions?: string[];
+  maxSizeMB?: number;
+  uploadContext?:
+    | "record"
+    | "external-portal"
+    | "incoming"
+    | "outgoing"
+    | "signature";
+  module?: "record-management" | "user-management" | "external-portal";
+}
+
+/**
+ * Upload file metadata and get presigned URL
+ * Runs client-side XSS validation before requesting presigned URL
+ * Server-side validation happens after file is uploaded
+ */
+export async function uploadMeta<TBody>(
+  ctx: UploadContext<TBody>,
+  file: File,
+  fileName: string,
+  parentId: UUID,
+  axiosInstance: AxiosInstance,
+) {
+  if (!isValidUUID(parentId)) throw new Error("Invalid UUID provided");
+
+  // Run client-side XSS validation before requesting presigned URL
+  const validationContext: XSSUploadValidationContext = {
+    allowedMimeTypes: ctx.allowedMimeTypes,
+    allowedExtensions: ctx.allowedExtensions,
+    maxSizeMB: ctx.maxSizeMB,
+    uploadContext: ctx.uploadContext || "record",
+  };
+
+  const validationResult = await XSSUploadValidator.validateFileForUpload(
+    file,
+    validationContext,
+  );
+
+  if (!validationResult.isValid) {
+    throw new Error(
+      validationResult.clientValidation.fileName?.error ||
+        validationResult.clientValidation.extension?.error ||
+        validationResult.clientValidation.mimeType?.error ||
+        validationResult.clientValidation.size?.error ||
+        "File validation failed",
+    );
+  }
+
+  const body = ctx.buildBody(file, fileName, parentId);
+  const { data } = await axiosInstance.post(ctx.endpoint, body, {
+    headers: withHeaders(),
+  });
+  return data;
+}
+
+export const getFile = async (
+  endpoint: string,
+  id: string,
+  axiosInstance: AxiosInstance,
+) => {
+  try {
+    const response = await axiosInstance.get(`${endpoint}/${id}`, {
+      headers: withHeaders(),
+    });
+    return response.data;
+  } catch (error) {
+    console.error("Failed to fetch file:", error);
+    throw error;
+  }
+};
+
+/**
+ * Upload file to presigned URL
+ * Server-side validation happens after upload
+ */
+export const uploadFile = async (file: File, uploadUrl: string) => {
+  if (!uploadUrl) throw new Error("Upload URL is undefined.");
+
+  const uploadRes = await presignedAxios.put(uploadUrl, file, {
+    headers: {
+      "Content-Type": file.type,
+    },
+  });
+
+  // Validate response status for presigned uploads
+  if (uploadRes.status < 200 || uploadRes.status >= 300) {
+    throw new Error(
+      `Upload failed with status ${uploadRes.status}: ${uploadRes.statusText}`,
+    );
+  }
+
+  return uploadRes;
+};
+
+export async function updateStatus(
+  endpoint: string,
+  fileId: UUID,
+  parentId: UUID,
+  uploadedSuccessfully: boolean,
+  axiosInstance: AxiosInstance,
+  validationContext?: XSSUploadValidationContext,
+) {
+  if (!isValidUUID(fileId) || !isValidUUID(parentId))
+    throw new Error("Invalid UUID provided");
+
+  // Prepare status update payload
+  const statusPayload: any = {
+    id: fileId,
+    parentId,
+    uploadedSuccessfully,
+  };
+
+  // Include validation context if provided (for server-side validation)
+  if (validationContext) {
+    statusPayload.validationContext = validationContext;
+  }
+
+  // Temporarily disabled upload-status request.
+  // Re-enable when backend upload-status sync is needed again.
+  // const { data } = await axiosInstance.patch(
+  //   `${endpoint}/${fileId}/upload-status`,
+  //   statusPayload,
+  //   { headers: withHeaders() }
+  // );
+  // return data;
+  return statusPayload;
+}
+
+export async function updateIncomingRecordStatus(
+  endpoint: string,
+  fileId: UUID,
+  uploadedSuccessfully: boolean,
+  axiosInstance: AxiosInstance,
+) {
+  if (!isValidUUID(fileId)) throw new Error("Invalid UUID provided");
+
+  // Temporarily disabled upload-status request.
+  // Re-enable when backend upload-status sync is needed again.
+  // const { data } = await axiosInstance.patch(
+  //   `${endpoint}/upload-status`,
+  //   { recordId: fileId, uploadedSuccessfully },
+  //   { headers: withHeaders() }
+  // );
+  // return data;
+  return { recordId: fileId, uploadedSuccessfully };
+}
+
+export async function deleteFile(
+  endpoint: string,
+  fileId: UUID,
+  axiosInstance: AxiosInstance,
+  parentId?: UUID, // optional, in case backend needs it
+) {
+  if (!isValidUUID(fileId)) throw new Error("Invalid fileId provided");
+  if (parentId && !isValidUUID(parentId))
+    throw new Error("Invalid parentId provided");
+
+  // Construct URL (add parentId query if needed)
+  const url =
+    parentId !== undefined
+      ? `${endpoint}/${fileId}?parentId=${parentId}`
+      : `${endpoint}/${fileId}`;
+
+  const { data } = await axiosInstance.delete(url, {
+    headers: withHeaders(),
+  });
+  return data;
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/http/http-client-factory.ts b/apps/edr-freight-web/backoffice/src/shared/services/http/http-client-factory.ts
new file mode 100644
index 000000000..f3f7a75c8
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/http/http-client-factory.ts
@@ -0,0 +1,101 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import axios, {
+	AxiosError,
+	AxiosInstance,
+	AxiosRequestConfig,
+	InternalAxiosRequestConfig,
+} from 'axios'
+import Cookies from 'js-cookie'
+
+export type TokenPair = { accessToken: string; refreshToken?: string }
+
+export type RefreshFn = (refreshToken: string) => Promise<TokenPair>
+
+export type CreateHttpClientOptions = {
+	baseURL: string
+	cookieKeys: any
+	refreshFn: RefreshFn
+
+	skipRefreshPaths?: string[]
+
+	onAuthFailure?: (reason: unknown) => void
+}
+
+type RetryableRequestConfig = InternalAxiosRequestConfig & { _retry?: boolean }
+
+function isAxiosError(e: unknown): e is AxiosError {
+	return axios.isAxiosError(e)
+}
+
+export function createHttpClient(opts: CreateHttpClientOptions): AxiosInstance {
+	const client = axios.create({ baseURL: opts.baseURL })
+
+	client.interceptors.request.use((config: InternalAxiosRequestConfig) => {
+		const token = Cookies.get(opts.cookieKeys.access)
+		if (token) {
+			config.headers = config.headers ?? {}
+			config.headers.Authorization = `Bearer ${token}`
+		}
+		return config
+	})
+
+	let refreshing: Promise<string> | null = null
+
+	const shouldSkipRefresh = (url?: string) => {
+		if (!url) return false
+		const list = opts.skipRefreshPaths ?? []
+		return list.some((p) => url.includes(p))
+	}
+
+	client.interceptors.response.use(
+		(res) => res,
+		async (err: unknown) => {
+			if (!isAxiosError(err)) return Promise.reject(err)
+
+			const status = err.response?.status
+			const original = err.config as RetryableRequestConfig | undefined
+
+			if (!original) return Promise.reject(err)
+
+			if (shouldSkipRefresh(original.url)) return Promise.reject(err)
+
+			if (status !== 401 || original._retry) return Promise.reject(err)
+
+			original._retry = true
+
+			const refreshToken = Cookies.get(opts.cookieKeys.refresh)
+			if (!refreshToken) {
+				opts.onAuthFailure?.(err)
+				return Promise.reject(err)
+			}
+
+			if (!refreshing) {
+				refreshing = (async () => {
+					const pair = await opts.refreshFn(refreshToken)
+					Cookies.set(opts.cookieKeys.access, pair.accessToken)
+					if (pair.refreshToken)
+						Cookies.set(opts.cookieKeys.refresh, pair.refreshToken)
+					return pair.accessToken
+				})().finally(() => {
+					refreshing = null
+				})
+			}
+
+			try {
+				const newAccess = await refreshing
+				original.headers = original.headers ?? {}
+				original.headers.Authorization = `Bearer ${newAccess}`
+				return client(original as AxiosRequestConfig)
+			} catch (refreshErr) {
+				Cookies.remove(opts.cookieKeys.access)
+				Cookies.remove(opts.cookieKeys.refresh)
+				if (opts.cookieKeys.user) Cookies.remove(opts.cookieKeys.user)
+
+				opts.onAuthFailure?.(refreshErr)
+				return Promise.reject(refreshErr)
+			}
+		},
+	)
+
+	return client
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/notificationService.ts b/apps/edr-freight-web/backoffice/src/shared/services/notificationService.ts
new file mode 100644
index 000000000..26ad845ac
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/notificationService.ts
@@ -0,0 +1,38 @@
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import { AxiosResponse } from "axios";
+import recordAxiosInstance from "./recordAxiosInstance";
+
+interface params {
+    take: number;
+    skip: number;
+    orderBy?:string;
+}
+
+export const getAllNotification =async(
+    params: params
+):Promise<AxiosResponse>=>{
+    return recordAxiosInstance.get("/notifications", {
+      params: params,
+      headers: withHeaders(),
+    });
+
+}
+
+export const getUnSeenNotification = async(
+    params: params
+):Promise<AxiosResponse>=>{
+    return recordAxiosInstance.get("/notifications/unseen", {
+      params: params,
+      headers: withHeaders(),
+    });
+}
+
+export const readNotification = (
+    id:string
+):Promise<AxiosResponse>=>{
+    return recordAxiosInstance.post(
+      `/notifications/${id}/read`,
+      {},
+      { headers: withHeaders() }
+    );
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/objectiveInstance.ts b/apps/edr-freight-web/backoffice/src/shared/services/objectiveInstance.ts
new file mode 100644
index 000000000..50474ebee
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/objectiveInstance.ts
@@ -0,0 +1,114 @@
+// src/services/api/.ts
+import axios from "axios";
+import Cookies from "js-cookie";
+import { toast } from "sonner";
+import { getEnvUrl } from "@/shared/config/env";
+import { getRefreshToken } from "../utils/refreshTokenHandler";
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+
+const objectiveInstance = axios.create({
+  baseURL: getEnvUrl("VITE_OBJECTIVE_API_URL"),
+});
+
+// Add auth token and acting-as position context to every OKR request
+objectiveInstance.interceptors.request.use((config) => {
+  const token = Cookies.get("auth-token");
+  if (token) {
+    config.headers["Authorization"] = `Bearer ${token}`;
+  }
+
+  const contextHeaders = withHeaders();
+  Object.entries(contextHeaders).forEach(([key, value]) => {
+    config.headers[key] = value;
+  });
+
+  return config;
+});
+
+let isRefreshing = false;
+let failedQueue: any[] = [];
+
+const processQueue = (error: any, token: string | null = null) => {
+  failedQueue.forEach((prom) => {
+    if (error) prom.reject(error);
+    else prom.resolve(token);
+  });
+  failedQueue = [];
+};
+
+const skipRefreshUrls = ["/auth/login", "/auth/refresh", "auth/me"]; // Add all URLs to skip
+
+objectiveInstance.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const originalRequest = error.config;
+
+    // 🔒 Skip refresh logic for specific URLs
+    const shouldSkip = skipRefreshUrls.some((url) =>
+      originalRequest.url?.includes(url),
+    );
+
+    if (shouldSkip) {
+      return Promise.reject(error);
+    }
+    const rememberMe = JSON.parse(
+      localStorage.getItem("rememberMe") || "false",
+    );
+
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      if (isRefreshing) {
+        return new Promise(function (resolve, reject) {
+          failedQueue.push({ resolve, reject });
+        })
+          .then((token) => {
+            originalRequest.headers["Authorization"] = "Bearer " + token;
+            return objectiveInstance(originalRequest);
+          })
+          .catch((err) => Promise.reject(err));
+      }
+
+      originalRequest._retry = true;
+      isRefreshing = true;
+      try {
+        const refreshToken = Cookies.get("refresh-token") as string;
+
+        const newToken = await getRefreshToken(refreshToken);
+        const updatedToken = newToken.data.token;
+        const updatedRefreshToken = newToken.data.refreshToken;
+        processQueue(null, newToken.data.token);
+        Cookies.set("auth-token", updatedToken);
+        Cookies.set("refresh-token", updatedRefreshToken);
+        originalRequest.headers["Authorization"] = `Bearer ${newToken}`;
+        return objectiveInstance(originalRequest);
+      } catch (err) {
+        processQueue(err, null);
+        if (rememberMe) {
+          toast.error("Session expired", {
+            description: "Please log in again.",
+            duration: 4000,
+          });
+        }
+        Cookies.remove("auth-token");
+        Cookies.remove("refresh-token");
+        Cookies.remove("auth-user");
+
+        toast.error("Session expired", {
+          description: "Please log in again.",
+          duration: 4000,
+        });
+
+        setTimeout(() => {
+          window.location.href = "/";
+        }, 3000);
+
+        return Promise.reject(err);
+      } finally {
+        isRefreshing = false;
+      }
+    }
+
+    return Promise.reject(error);
+  },
+);
+
+export default objectiveInstance;
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/organizationConfigService.ts b/apps/edr-freight-web/backoffice/src/shared/services/organizationConfigService.ts
new file mode 100644
index 000000000..5a1ccb7c1
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/organizationConfigService.ts
@@ -0,0 +1,160 @@
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import axiosInstance from "./axiosInstance";
+import { AxiosResponse } from "axios";
+
+export interface OrganizationConfig {
+  id: string;
+  canStartReceivingRecord: boolean;
+  canCreateBranchByItself?: boolean;
+  maximumNumberOfUnits?: number;
+  organizationId: string;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export interface OrganizationConfigPayload {
+  canStartReceivingRecord?: boolean;
+  canCreateBranchByItself?: boolean;
+  maximumNumberOfUnits?: number;
+  organizationId: string;
+}
+
+export interface OrganizationConfigListResponse {
+  count: number;
+  items: OrganizationConfig[];
+}
+
+export interface GlobalOrgConfig {
+  numberOfSubOrganizations: number;
+  numberOfEmployeesPerOrganization: number;
+  organizationId: string;
+}
+
+export interface GlobalUnitConfig {
+  numberOfSubUnits: number;
+  numberOfEmployeesPerUnit: number;
+  unitId: string;
+}
+
+// Create organization configuration
+export const createOrganizationConfig = async (
+  data: OrganizationConfigPayload,
+): Promise<AxiosResponse<OrganizationConfig>> => {
+  return axiosInstance.post("/organization-configurations", data, {
+    headers: withHeaders(),
+  });
+};
+
+// Update organization configuration
+export const updateOrganizationConfig = async (
+  id: string,
+  data: OrganizationConfigPayload,
+): Promise<AxiosResponse<OrganizationConfig>> => {
+  return axiosInstance.put(`/organization-configurations/${id}`, data, {
+    headers: withHeaders(),
+  });
+};
+
+// Get organization configuration by ID
+export const getOrganizationConfigById = async (
+  id: string,
+): Promise<AxiosResponse<OrganizationConfig>> => {
+  return axiosInstance.get(`/organization-configurations/${id}`, {
+    headers: withHeaders(),
+  });
+};
+
+// Get organization configuration by organization ID
+export const getOrganizationConfig = async (
+  organizationId: string,
+): Promise<AxiosResponse<OrganizationConfigListResponse>> => {
+  return axiosInstance.get(
+    `/organization-configurations/list/${organizationId}`,
+    {
+      headers: withHeaders(),
+    },
+  );
+};
+
+// Delete organization configuration
+export const deleteOrganizationConfig = async (
+  id: string,
+): Promise<AxiosResponse> => {
+  return axiosInstance.delete(`/organization-configurations/${id}`, {
+    headers: withHeaders(),
+  });
+};
+
+export const createGlobalOrgConfig = async (
+  data: GlobalOrgConfig,
+): Promise<AxiosResponse> => {
+  return axiosInstance.post(`/organization-global-configurations`, data, {
+    headers: withHeaders(),
+  });
+};
+
+export const updateGlobalOrgConfig = async (
+  id: string,
+  data: GlobalOrgConfig,
+): Promise<AxiosResponse> => {
+  return axiosInstance.put(`/organization-global-configurations/${id}`, data, {
+    headers: withHeaders(),
+  });
+};
+
+export const getGlobalOrgConfig = async (
+  id: string,
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/organization-global-configurations/${id}`, {
+    headers: withHeaders(),
+  });
+};
+
+export const getListOfGlobalOrgConfig = async (
+  id: string,
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/organization-global-configurations/list/${id}`, {
+    headers: withHeaders(),
+  });
+};
+
+export const createGlobalUnitConfig = async (
+  data: GlobalUnitConfig,
+): Promise<AxiosResponse> => {
+  return axiosInstance.post(`/global-unit-configurations`, data, {
+    headers: withHeaders(),
+  });
+};
+
+export const updateGlobalUnitConfig = async (
+  id: string,
+  data: GlobalUnitConfig,
+): Promise<AxiosResponse> => {
+  return axiosInstance.put(`/global-unit-configurations/${id}`, data, {
+    headers: withHeaders(),
+  });
+};
+
+export const getGlobalUnitConfig = async (
+  id: string,
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/global-unit-configurations/${id}`, {
+    headers: withHeaders(),
+  });
+};
+
+export const getListOfGlobalUnitConfig = async (
+  id: string,
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/global-unit-configurations/list/${id}`, {
+    headers: withHeaders(),
+  });
+};
+
+export const deleteGlobalUnitConfig = async (
+  id: string,
+): Promise<AxiosResponse> => {
+  return axiosInstance.delete(`/global-unit-configurations/${id}`, {
+    headers: withHeaders(),
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/organizationsService.ts b/apps/edr-freight-web/backoffice/src/shared/services/organizationsService.ts
new file mode 100644
index 000000000..3a560a08d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/organizationsService.ts
@@ -0,0 +1,211 @@
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import axiosInstance from "./axiosInstance";
+import { AxiosResponse } from "axios";
+import {
+  DocumentRequirementDto,
+  ResponseActionDto,
+} from "../dto/External-Portal/External-PortalDto";
+
+export interface OrgHeaders {
+  tenantKey: string;
+  unitId?: string;
+}
+
+export interface OrganizationPayload {
+  name: {
+    am: string;
+    en: string;
+  };
+  key: string;
+  organizationTypeId: string;
+  parentId?: string;
+  isGovernmentOrganization: boolean;
+}
+
+export interface OrgQueryParams {
+  orderBy?: string;
+  take?: number;
+  skip?: number;
+  order?: string;
+  organizationTypeKey?: string;
+  name?: string;
+}
+
+export enum FilterEnum {
+  EXTERNAL = "organization",
+  INDIVIDUAL = "individual",
+}
+
+export const getOrganizations = async (
+  params?: OrgQueryParams
+): Promise<AxiosResponse> => {
+  return axiosInstance.get("/organizations/filter", {
+    ...{ headers: withHeaders() },
+    params,
+  });
+};
+
+export const getMyAdminOrganizations = async (): Promise<AxiosResponse> => {
+  //my-admin-organizations
+  return axiosInstance.get("/organizations/with-admin-flag", {
+    headers: withHeaders(),
+  });
+};
+export const getOrganizationsWithAdminFlag = async (
+  params?: OrgQueryParams
+): Promise<AxiosResponse> => {
+  return axiosInstance.get("/organizations/with-admin-flag", {
+    ...{ headers: withHeaders() },
+    params,
+  });
+};
+
+export const getOrganizationById = async (
+  id: string | number
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/organizations/${id}`, { headers: withHeaders() });
+};
+
+export const getChildren = async (
+  id: string | number
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/organizations/${id}/children`, {
+    headers: withHeaders(),
+  });
+};
+
+export const getEmployeesUnderOrg = async (
+  id: string | number,
+  params?: OrgQueryParams
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/organizations/current/${id}/employees`, {
+    headers: withHeaders(),
+    params: {
+      take: 1000, // Get a large number of employees by default
+      skip: 0,
+      ...params,
+    },
+  });
+};
+
+export const getEmployeeCountByOrgId = async (
+  id: string | number
+): Promise<AxiosResponse> => {
+  // Try the endpoint from your curl example
+  return axiosInstance.get(`/organizations/${id}/employees/count`, {
+    headers: withHeaders(),
+  });
+};
+
+export const createOrganization = async (
+  data: OrganizationPayload
+): Promise<AxiosResponse> => {
+  return axiosInstance.post("/organizations", data, { headers: withHeaders() });
+};
+
+export const activateOrganization = async (
+  id: string | number
+): Promise<AxiosResponse> => {
+  return axiosInstance.patch(`/organizations/${id}/activate`, null, {
+    headers: withHeaders(),
+  });
+};
+
+export const deActivateOrganization = async (
+  id: string | number
+): Promise<AxiosResponse> => {
+  return axiosInstance.patch(`/organizations/${id}/debar`, null, {
+    headers: withHeaders(),
+  });
+};
+
+export const updateOrganization = async (
+  id: string | number,
+  data: OrganizationPayload
+): Promise<AxiosResponse> => {
+  return axiosInstance.put(`/organizations/${id}`, data, {
+    headers: withHeaders(),
+  });
+};
+
+export const deleteOrganization = async (
+  id: string | number
+): Promise<AxiosResponse> => {
+  return axiosInstance.delete(`/organizations/${id}`, {
+    headers: withHeaders(),
+  });
+};
+
+export const softDeleteOrganization = async (
+  id: string | number
+): Promise<AxiosResponse> => {
+  return axiosInstance.delete(`/organizations/${id}/soft`, {
+    headers: withHeaders(),
+  });
+};
+
+// NOTE: Speculative endpoints — backend not yet implemented. Will 404 until
+// the API team adds:
+//   GET   /organizations/archived
+//   PATCH /organizations/{id}/restore
+export const getArchivedOrganizations = async (
+  params?: OrgQueryParams
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/organizations/archived`, {
+    headers: withHeaders(),
+    params,
+  });
+};
+
+export const restoreOrganization = async (
+  id: string | number
+): Promise<AxiosResponse> => {
+  return axiosInstance.patch(`/organizations/${id}/restore`, null, {
+    headers: withHeaders(),
+  });
+};
+
+export const getDocumentRequirements = async (): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/documentary-requirements`, {
+    headers: withHeaders(),
+  });
+};
+export const getDocumentRequirementsById = async (
+  id: string
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/documentary-requirements/${id}`, {
+    headers: withHeaders(),
+  });
+};
+export const getDocumentRequirementsByFilter = async (
+  filter: FilterEnum
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/documentary-requirements/${filter}/type`);
+};
+
+export const postDocumentRequirements = async (
+  data: DocumentRequirementDto
+): Promise<AxiosResponse> => {
+  return axiosInstance.post(`/documentary-requirements`, data, {
+    headers: withHeaders(),
+  });
+};
+
+export const giveResponse = async (
+  id: string,
+  data: ResponseActionDto
+): Promise<AxiosResponse> => {
+  return axiosInstance.post(`user-documents/${id}/response`, data, {
+    headers: withHeaders(),
+  });
+};
+
+export const getArchivedUserId = async (
+  unitId: string,
+  params?: OrgQueryParams
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/employees/archived/${unitId}/with-unit`, {
+    headers: withHeaders(),
+    params,
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/performanceInstance.ts b/apps/edr-freight-web/backoffice/src/shared/services/performanceInstance.ts
new file mode 100644
index 000000000..3c7e8a51d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/performanceInstance.ts
@@ -0,0 +1,101 @@
+// src/services/api/performanceInstance.ts
+import axios from "axios";
+import Cookies from "js-cookie";
+import { toast } from "sonner";
+import { getEnvUrl } from "@/shared/config/env";
+import { getRefreshToken } from "../utils/refreshTokenHandler";
+
+const performanceInstance = axios.create({
+  baseURL: getEnvUrl("VITE_PERFORMANCE_API_URL"),
+});
+
+// Add auth token from localStorage (or context later)
+performanceInstance.interceptors.request.use((config) => {
+  const token = Cookies.get("auth-token");
+  if (token) {
+    config.headers["Authorization"] = `Bearer ${token}`;
+  }
+  return config;
+});
+
+let isRefreshing = false;
+let failedQueue: any[] = [];
+
+const processQueue = (error: any, token: string | null = null) => {
+  failedQueue.forEach((prom) => {
+    if (error) prom.reject(error);
+    else prom.resolve(token);
+  });
+  failedQueue = [];
+};
+
+const skipRefreshUrls = ["/auth/login", "/auth/refresh", "/auth/me"]; // Add all URLs to skip
+
+performanceInstance.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const originalRequest = error.config;
+
+    // 🔒 Skip refresh logic for specific URLs
+    const shouldSkip = skipRefreshUrls.some((url) =>
+      originalRequest.url?.includes(url),
+    );
+
+    if (shouldSkip) {
+      return Promise.reject(error);
+    }
+    const rememberMe = JSON.parse(
+      localStorage.getItem("rememberMe") || "false",
+    );
+
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      if (isRefreshing) {
+        return new Promise(function (resolve, reject) {
+          failedQueue.push({ resolve, reject });
+        })
+          .then((token) => {
+            originalRequest.headers["Authorization"] = "Bearer " + token;
+            return performanceInstance(originalRequest);
+          })
+          .catch((err) => Promise.reject(err));
+      }
+
+      originalRequest._retry = true;
+      isRefreshing = true;
+      try {
+        const refreshToken = Cookies.get("refresh-token") as string;
+
+        const newToken = await getRefreshToken(refreshToken);
+        const updatedToken = newToken.data.token;
+        const updatedRefreshToken = newToken.data.refreshToken;
+        processQueue(null, newToken.data.token);
+        Cookies.set("auth-token", updatedToken);
+        Cookies.set("refresh-token", updatedRefreshToken);
+        originalRequest.headers["Authorization"] = `Bearer ${newToken}`;
+        return performanceInstance(originalRequest);
+      } catch (err) {
+        processQueue(err, null);
+        Cookies.remove("auth-token");
+        Cookies.remove("refresh-token");
+        Cookies.remove("auth-user");
+
+        toast.error("Session expired", {
+          description: "Please log in again.",
+          duration: 4000,
+        });
+
+        setTimeout(() => {
+          window.location.href = "/";
+        }, 3000);
+
+        return Promise.reject(err);
+      } finally {
+        isRefreshing = false;
+      }
+    }
+
+    return Promise.reject(error);
+  },
+);
+
+export default performanceInstance;
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/positionConfigurationService.ts b/apps/edr-freight-web/backoffice/src/shared/services/positionConfigurationService.ts
new file mode 100644
index 000000000..0bb2cc8b6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/positionConfigurationService.ts
@@ -0,0 +1,209 @@
+import axiosInstance from "./axiosInstance";
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import { AxiosResponse } from "axios";
+
+export interface PositionConfiguration {
+  id?: string;
+  positionId: string;
+  smsNotificationWhenRecordSubmitted: boolean;
+  emailNotificationWhenRecordSubmitted: boolean;
+  inboxNotificationWhenRecordSubmitted: boolean;
+  skipWorkflowIfNotAssigned: boolean;
+  positionScopeToFetch?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  /** Legacy read-only shape; new saves use top-level positionScopeToFetch. */
+  items?: {
+    data: string;
+  };
+}
+
+export interface PositionConfigurationPayload {
+  positionId: string;
+  smsNotificationWhenRecordSubmitted: boolean;
+  emailNotificationWhenRecordSubmitted: boolean;
+  inboxNotificationWhenRecordSubmitted: boolean;
+  skipWorkflowIfNotAssigned: boolean;
+  positionScopeToFetch: string;
+}
+
+export type CreatePositionConfigurationPayload = PositionConfigurationPayload;
+export type UpdatePositionConfigurationPayload = PositionConfigurationPayload;
+
+export const normalizePositionConfigurationResponse = (
+  response: AxiosResponse<unknown>,
+): PositionConfiguration | null => {
+  const data = response?.data;
+
+  if (!data) return null;
+
+  if (Array.isArray(data)) {
+    return (data[0] as PositionConfiguration | undefined) ?? null;
+  }
+
+  if (typeof data === "object" && data !== null) {
+    if ("items" in data && Array.isArray((data as { items: unknown }).items)) {
+      const items = (data as { items: PositionConfiguration[] }).items;
+      const match =
+        items.find((item) => item.positionId) ?? items[0];
+      return (match as PositionConfiguration | undefined) ?? null;
+    }
+
+    if ("data" in data && (data as { data: unknown }).data) {
+      const nested = (data as { data: unknown }).data;
+      if (Array.isArray(nested)) {
+        return (nested[0] as PositionConfiguration | undefined) ?? null;
+      }
+      if (typeof nested === "object" && nested !== null && "positionId" in nested) {
+        return nested as PositionConfiguration;
+      }
+    }
+
+    if ("positionId" in data) {
+      return data as PositionConfiguration;
+    }
+  }
+
+  return null;
+};
+
+const isNotFoundError = (error: unknown) => {
+  const err = error as {
+    response?: { status?: number; data?: { message?: string } };
+    message?: string;
+  };
+  const message = err?.response?.data?.message || err?.message || "";
+  return (
+    err?.response?.status === 404 ||
+    (err?.response?.status === 400 && /could not be found|not found/i.test(message))
+  );
+};
+
+const extractConfigurationId = (
+  configuration: PositionConfiguration | null,
+): string | undefined => configuration?.id;
+
+const extractConfigurationFromList = (
+  response: AxiosResponse<unknown>,
+  positionId: string,
+): PositionConfiguration | null => {
+  const data = response?.data;
+
+  if (!data || typeof data !== "object") {
+    return null;
+  }
+
+  const candidates: PositionConfiguration[] = [];
+
+  if (Array.isArray(data)) {
+    candidates.push(...(data as PositionConfiguration[]));
+  } else if ("items" in data && Array.isArray((data as { items: unknown }).items)) {
+    candidates.push(...((data as { items: PositionConfiguration[] }).items ?? []));
+  } else if ("data" in data) {
+    const nested = (data as { data: unknown }).data;
+    if (Array.isArray(nested)) {
+      candidates.push(...(nested as PositionConfiguration[]));
+    } else if (nested && typeof nested === "object" && "positionId" in nested) {
+      candidates.push(nested as PositionConfiguration);
+    }
+  } else if ("positionId" in data) {
+    candidates.push(data as PositionConfiguration);
+  }
+
+  return (
+    candidates.find((item) => item.positionId === positionId) ??
+    candidates[0] ??
+    null
+  );
+};
+
+// List configurations for a position.
+export const getPositionConfigurationList = async (
+  positionId: string,
+): Promise<AxiosResponse<unknown>> => {
+  return axiosInstance.get(`/position-configurations/list/${positionId}`, {
+    headers: withHeaders(),
+  });
+};
+
+// Get a single configuration by its configuration record id.
+export const getPositionConfigurationById = async (
+  configurationId: string,
+): Promise<AxiosResponse<PositionConfiguration>> => {
+  return axiosInstance.get(`/position-configurations/${configurationId}`, {
+    headers: withHeaders(),
+  });
+};
+
+// Load configuration for a position: list first, then fetch the full record by id.
+export const fetchPositionConfigurationByPositionId = async (
+  positionId: string,
+): Promise<PositionConfiguration | null> => {
+  try {
+    const listResponse = await getPositionConfigurationList(positionId);
+    const listedConfiguration = extractConfigurationFromList(
+      listResponse,
+      positionId,
+    );
+
+    const configurationId = extractConfigurationId(listedConfiguration);
+    if (!configurationId) {
+      return listedConfiguration;
+    }
+
+    const detailResponse = await getPositionConfigurationById(configurationId);
+    return (
+      normalizePositionConfigurationResponse(detailResponse) ??
+      listedConfiguration
+    );
+  } catch (error) {
+    if (isNotFoundError(error)) {
+      return null;
+    }
+
+    throw error;
+  }
+};
+
+export const createPositionConfiguration = async (
+  payload: CreatePositionConfigurationPayload,
+): Promise<AxiosResponse<PositionConfiguration>> => {
+  return axiosInstance.post("/position-configurations", payload, {
+    headers: withHeaders(),
+  });
+};
+
+export const updatePositionConfiguration = async (
+  configurationId: string,
+  payload: UpdatePositionConfigurationPayload,
+): Promise<AxiosResponse<PositionConfiguration>> => {
+  return axiosInstance.put(
+    `/position-configurations/${configurationId}`,
+    payload,
+    {
+      headers: withHeaders(),
+    },
+  );
+};
+
+// Create when no record exists; update by configuration id when it does.
+export const savePositionConfiguration = async (
+  payload: PositionConfigurationPayload,
+  existingConfigurationId?: string,
+): Promise<AxiosResponse<PositionConfiguration>> => {
+  if (existingConfigurationId) {
+    return updatePositionConfiguration(existingConfigurationId, payload);
+  }
+
+  return createPositionConfiguration(payload);
+};
+
+export const getPositionConfigurationsList = getPositionConfigurationList;
+
+export const deletePositionConfiguration = async (
+  configurationId: string,
+): Promise<AxiosResponse<void>> => {
+  return axiosInstance.delete(`/position-configurations/${configurationId}`, {
+    headers: withHeaders(),
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/presignedAxios.ts b/apps/edr-freight-web/backoffice/src/shared/services/presignedAxios.ts
new file mode 100644
index 000000000..cbac61bb6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/presignedAxios.ts
@@ -0,0 +1,16 @@
+import axios from "axios";
+import Cookies from "js-cookie";
+
+export const presignedAxios = axios.create({
+  headers: {},
+  transformRequest: [(data) => data],
+  validateStatus: (s) => s < 400,
+});
+
+presignedAxios.interceptors.request.use((config) => {
+  const token = Cookies.get("auth-token");
+  if (token) {
+    config.headers["Authorization"] = `Bearer ${token}`;
+  }
+  return config;
+});
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/recordAxiosInstance.ts b/apps/edr-freight-web/backoffice/src/shared/services/recordAxiosInstance.ts
new file mode 100644
index 000000000..d1f476c0c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/recordAxiosInstance.ts
@@ -0,0 +1,108 @@
+import axios from "axios";
+import Cookies from "js-cookie";
+import { getEnvUrl } from "@/shared/config/env";
+import { getRefreshToken } from "../utils/refreshTokenHandler";
+import {
+  getRememberMePreference,
+  setAuthCookies,
+} from "../utils/authPersistence";
+import { handleSessionExpiry } from "./sessionExpiry";
+
+if (!import.meta.env.VITE_RECORD_API_URL) {
+  console.warn(
+    "Missing VITE_RECORD_API_URL — record axios instance has no base URL",
+  );
+}
+
+const recordAxiosInstance = axios.create({
+  baseURL: getEnvUrl("VITE_RECORD_API_URL"),
+});
+
+// Attach auth token and CSRF defence header to every request
+recordAxiosInstance.interceptors.request.use((config) => {
+  const token = Cookies.get("auth-token");
+  if (token) {
+    config.headers["Authorization"] = `Bearer ${token}`;
+  }
+  config.headers["X-Requested-With"] = "XMLHttpRequest";
+  return config;
+});
+
+let isRefreshing = false;
+let failedQueue: any[] = [];
+
+const processQueue = (error: any, token: string | null = null) => {
+  failedQueue.forEach((prom) => {
+    if (error) prom.reject(error);
+    else prom.resolve(token);
+  });
+  failedQueue = [];
+};
+
+const skipRefreshUrls = [
+  "/auth/login",
+  "/auth/refresh",
+  "/auth/refresh-token",
+  "auth/me",
+];
+
+recordAxiosInstance.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const originalRequest = error.config;
+
+    // 🔒 Skip refresh logic for specific URLs
+    const shouldSkip = skipRefreshUrls.some((url) =>
+      originalRequest.url?.includes(url),
+    );
+    if (shouldSkip) {
+      return Promise.reject(error);
+    }
+
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      if (isRefreshing) {
+        return new Promise(function (resolve, reject) {
+          failedQueue.push({ resolve, reject });
+        })
+          .then((token) => {
+            originalRequest.headers["Authorization"] = "Bearer " + token;
+            return recordAxiosInstance(originalRequest);
+          })
+          .catch((err) => Promise.reject(err));
+      }
+
+      originalRequest._retry = true;
+      isRefreshing = true;
+
+      try {
+        const refreshToken = Cookies.get("refresh-token");
+        if (!refreshToken) {
+          throw new Error("missing-refresh-token");
+        }
+        const rememberMe = getRememberMePreference();
+
+        const newToken = await getRefreshToken(refreshToken);
+        const updatedToken = newToken.data.token;
+        const updatedRefreshToken = newToken.data.refreshToken;
+        processQueue(null, newToken.data.token);
+        setAuthCookies({
+          token: updatedToken,
+          refreshToken: updatedRefreshToken,
+          rememberMe,
+        });
+        originalRequest.headers["Authorization"] = `Bearer ${updatedToken}`;
+        return recordAxiosInstance(originalRequest);
+      } catch (err) {
+        processQueue(err, null);
+        handleSessionExpiry();
+        return Promise.reject(err);
+      } finally {
+        isRefreshing = false;
+      }
+    }
+
+    return Promise.reject(error);
+  },
+);
+
+export default recordAxiosInstance;
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/sessionExpiry.ts b/apps/edr-freight-web/backoffice/src/shared/services/sessionExpiry.ts
new file mode 100644
index 000000000..e3da80b9c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/sessionExpiry.ts
@@ -0,0 +1,50 @@
+import Cookies from "js-cookie";
+import { toast } from "sonner";
+import i18n from "@/i18n";
+import { clearRememberMePreference } from "../utils/authPersistence";
+
+const PUBLIC_PATHS = [
+  "/login",
+  "/sign-up",
+  "/forgot-password",
+  "/reset-password",
+  "/set-password",
+  "/verify-otp",
+  "/verification_page",
+  "/callback",
+  "/complaints",
+  "/complaint-form",
+  "/follow-complaint",
+];
+
+let isHandlingExpiry = false;
+
+const isOnPublicPath = (pathname: string): boolean => {
+  if (pathname === "/") return true;
+  return PUBLIC_PATHS.some(
+    (p) => pathname === p || pathname.startsWith(`${p}/`),
+  );
+};
+
+export function handleSessionExpiry(): void {
+  if (typeof window === "undefined") return;
+  if (isHandlingExpiry) return;
+  isHandlingExpiry = true;
+
+  Object.keys(Cookies.get()).forEach((name) => Cookies.remove(name));
+  clearRememberMePreference();
+
+  toast.error(i18n.t("msg.authError"), {
+    description: i18n.t("msg.authErrorDescription"),
+    duration: 4000,
+  });
+
+  const { pathname, search } = window.location;
+  if (isOnPublicPath(pathname)) {
+    window.location.replace("/login");
+    return;
+  }
+
+  const from = `${pathname}${search}`;
+  window.location.replace(`/login?from=${encodeURIComponent(from)}`);
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/unifiedUploadService.ts b/apps/edr-freight-web/backoffice/src/shared/services/unifiedUploadService.ts
new file mode 100644
index 000000000..70b373e29
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/unifiedUploadService.ts
@@ -0,0 +1,167 @@
+import { AxiosInstance } from "axios";
+import { presignedAxios } from "./presignedAxios";
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+
+export interface UploadKeyResponse {
+  uploadKey: string;
+  presignedUrl?: string;
+  presigned?: string;
+  fileInfo: {
+    fileName: string;
+    originalname: string;
+    contentType: string;
+    fileType: string;
+    size: number;
+  };
+}
+
+export interface UploadAndCreateResourceParams {
+  type: "signature" | "stamp" | "header" | "footer";
+  file: File;
+  name: { am: string; en: string };
+  parentId: string;
+  locale?: "am" | "en" | null;
+}
+
+const config = {
+  signature: {
+    uploadKey: "/signatures/get-file-upload-key",
+    create: "/signatures",
+    parentField: "employeeId",
+  },
+  stamp: {
+    uploadKey: "/employee-stamps/get-file-upload-key",
+    create: "/employee-stamps",
+    parentField: "employeePositionId",
+  },
+  header: {
+    uploadKey: "/headers/get-file-upload-key",
+    create: "/headers",
+    parentField: "unitId",
+  },
+  footer: {
+    uploadKey: "/footers/get-file-upload-key",
+    create: "/footers",
+    parentField: "unitId",
+  },
+} as const;
+
+/**
+ * Get upload key and presigned URL for file upload
+ */
+export async function getUploadKey(
+  endpoint: string,
+  file: File,
+  axiosInstance: AxiosInstance,
+  positionId?: string[],
+  recordTypeKey?: string | null,
+): Promise<UploadKeyResponse> {
+  const payload = {
+    fileName: file.name,
+    originalname: file.name,
+    contentType: file.type || "application/octet-stream",
+    size: file.size,
+    ...(positionId?.length ? { positionId } : {}),
+    recordTypeKey: recordTypeKey,
+  };
+
+  const { data } = await axiosInstance.post<UploadKeyResponse>(
+    endpoint,
+    payload,
+    {
+      headers: withHeaders(),
+    },
+  );
+
+  return data;
+}
+
+/**
+ * Upload file to presigned URL
+ */
+export async function uploadToPresigned(
+  file: File,
+  presignedUrl: string,
+): Promise<void> {
+  if (!presignedUrl) {
+    throw new Error("Presigned URL is required");
+  }
+
+  const uploadRes = await presignedAxios.put(presignedUrl, file, {
+    headers: {
+      "Content-Type": file.type,
+    },
+  });
+
+  if (uploadRes.status < 200 || uploadRes.status >= 300) {
+    throw new Error(
+      `Upload failed with status ${uploadRes.status}: ${uploadRes.statusText}`,
+    );
+  }
+}
+
+/**
+ * Unified upload and create resource function
+ */
+export async function uploadAndCreateResource(
+  params: UploadAndCreateResourceParams,
+  axiosInstance: AxiosInstance,
+  positionId?: string[],
+  recordTypeKey?: string | null,
+) {
+  const { type, file, name, parentId, locale } = params;
+  const typeConfig = config[type];
+
+  // 1. Get upload key and presigned URL
+  const uploadKeyResponse = await getUploadKey(
+    typeConfig.uploadKey,
+    file,
+    axiosInstance,
+    positionId,
+    recordTypeKey,
+  );
+
+  const presignedUrl =
+    uploadKeyResponse.presignedUrl || uploadKeyResponse.presigned;
+
+  // 2. Upload file to presigned URL
+  await uploadToPresigned(file, presignedUrl || "");
+
+  // 3. For header/footer: done — no separate create POST needed
+  if (type === "header" || type === "footer") {
+    // 4. For signature/stamp: create resource
+    const createPayload = {
+      fileInfo: uploadKeyResponse.fileInfo,
+      name,
+      [typeConfig.parentField]: parentId,
+      positionIds: positionId,
+      isCurrent: true,
+      recordTypeKey: recordTypeKey,
+    };
+
+    const { data } = await axiosInstance.post(
+      typeConfig.create,
+      createPayload,
+      {
+        headers: withHeaders(),
+      },
+    );
+
+    return data;
+  }
+
+  // 4. For signature/stamp: create resource
+  const createPayload = {
+    fileInfo: uploadKeyResponse.fileInfo,
+    name,
+    [typeConfig.parentField]: parentId,
+    ...(type === "signature" ? { isCurrent: true } : {}),
+    ...(type === "stamp" && locale !== undefined ? { locale } : {}),
+  };
+
+  const { data } = await axiosInstance.post(typeConfig.create, createPayload, {
+    headers: withHeaders(),
+  });
+
+  return data;
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/unitConfigurationService.ts b/apps/edr-freight-web/backoffice/src/shared/services/unitConfigurationService.ts
new file mode 100644
index 000000000..9f21d368e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/unitConfigurationService.ts
@@ -0,0 +1,215 @@
+import { AxiosResponse } from "axios";
+import axiosInstance from "./axiosInstance";
+
+export type AddReferenceNumberPayload = {
+  referenceNumberPrefix?: { am: string; en: string };
+  externalReferenceNumberPrefix?: { am: string; en: string };
+  internalMemoReferenceNumberPrefix?: { am: string; en: string };
+};
+
+export type UpdateInternalMemoPrefixPayload = {
+  referenceNumberPrefix?: { am: string; en: string };
+  externalReferenceNumberPrefix?: { am: string; en: string };
+  internalMemoReferenceNumberPrefix?: { am: string; en: string };
+};
+
+export type UpdateExternalReferencePrefixPayload = {
+  referenceNumberPrefix?: { am: string; en: string };
+  externalReferenceNumberPrefix?: { am: string; en: string };
+  internalMemoReferenceNumberPrefix?: { am: string; en: string };
+};
+
+export type DeleteReferenceNumberPayload = {
+  recordSequenceTypes: string[];
+};
+
+// sequence-count.dto.ts
+
+export enum SequenceType {
+  EXTERNAL_REFERENCE_NUMBER = "externalReferenceNumberPrefix",
+  INTERNAL_MEMO_REFERENCE_NUMBER = "internalMemoReferenceNumberPrefix",
+  REFERENCE_NUMBER = "referenceNumberPrefix",
+}
+
+export interface ReferenceNumbersResponse {
+  id?: string;
+  name: SequenceType;
+  number: {
+    am: string | { am: string };
+    en?: string | { am: string };
+  };
+  sequenceId: string;
+  count: number;
+}
+
+export interface UnitConfigurationResponse extends ReferenceNumbersResponse {
+  id?: string;
+  unitId?: string;
+  [key: string]: unknown;
+}
+
+export interface CanReceiveComplaintResponse {
+  canReceiveComplaint: boolean;
+  unitId?: string;
+  unitName?: string;
+}
+
+const errorMessage = (error: unknown, fallback: string) => {
+  const err = error as {
+    response?: { data?: { message?: string } };
+    message?: string;
+  };
+  return err?.response?.data?.message || err?.message || fallback;
+};
+
+const isUnitNotFoundError = (error: unknown) => {
+  const err = error as {
+    response?: { status?: number; data?: { message?: string } };
+    message?: string;
+  };
+  const message = err?.response?.data?.message || err?.message || "";
+  return err?.response?.status === 400 && /unit not found/i.test(message);
+};
+
+const createAxiosResponse = <T>(data: T): AxiosResponse<T> => ({
+  data,
+  status: 200,
+  statusText: "OK",
+  headers: {},
+  config: {} as any,
+});
+
+export const unitConfigurationService = {
+  getReferenceNumbers: async (
+    unitId: string,
+  ): Promise<AxiosResponse<ReferenceNumbersResponse[]>> => {
+    try {
+      return await axiosInstance.get(
+        `/unit-configurations/${unitId}/reference-number`,
+      );
+    } catch (error) {
+      if (isUnitNotFoundError(error)) {
+        return createAxiosResponse<ReferenceNumbersResponse[]>([]);
+      }
+      throw new Error(errorMessage(error, "Failed to fetch reference numbers"));
+    }
+  },
+  getTagBasedReferences: async (
+    unitId: string,
+    tagId?: string,
+  ): Promise<AxiosResponse<ReferenceNumbersResponse[]>> => {
+    try {
+      return await axiosInstance.get(`/record-prefixes/list/${unitId}/`);
+    } catch (error) {
+      if (isUnitNotFoundError(error)) {
+        return createAxiosResponse<ReferenceNumbersResponse[]>([]);
+      }
+      throw new Error(errorMessage(error, "Failed to fetch reference numbers"));
+    }
+  },
+
+  getUnitConfiguration: async (
+    unitId: string,
+  ): Promise<AxiosResponse<UnitConfigurationResponse>> => {
+    try {
+      return await axiosInstance.get(`/unit-configurations/${unitId}`);
+    } catch (error) {
+      throw new Error(
+        errorMessage(error, "Failed to fetch unit configuration"),
+      );
+    }
+  },
+
+  addReferenceNumber: async (
+    unitId: string,
+    payload: AddReferenceNumberPayload,
+  ): Promise<AxiosResponse<ReferenceNumbersResponse>> => {
+    try {
+      return await axiosInstance.post(
+        `/unit-configurations/${unitId}/reference-number`,
+        payload,
+      );
+    } catch (error) {
+      if (isUnitNotFoundError(error)) {
+        await axiosInstance.post(`/unit-configurations`, { unitId });
+        return await axiosInstance.post(
+          `/unit-configurations/${unitId}/reference-number`,
+          payload,
+        );
+      }
+      throw new Error(errorMessage(error, "Failed to add reference numbers"));
+    }
+  },
+
+  deleteReferenceNumber: async (
+    id: string,
+    payload: DeleteReferenceNumberPayload,
+  ): Promise<AxiosResponse<void>> => {
+    try {
+      return await axiosInstance.delete(`/unit-configurations/${id}/reference-number`, {
+        data: payload,
+      });
+    } catch (error) {
+      throw new Error(errorMessage(error, "Failed to delete reference number"));
+    }
+  },
+
+  updateInternalMemoReferencePrefix: async (
+    unitId: string,
+    payload: UpdateInternalMemoPrefixPayload,
+  ): Promise<AxiosResponse<ReferenceNumbersResponse>> => {
+    try {
+      return await axiosInstance.patch(
+        `/unit-configurations/add-internal-memo-reference-number-prefix/${unitId}`,
+        payload,
+      );
+    } catch (error) {
+      if (isUnitNotFoundError(error)) {
+        await axiosInstance.post(`/unit-configurations`, { unitId });
+        return await axiosInstance.patch(
+          `/unit-configurations/add-internal-memo-reference-number-prefix/${unitId}`,
+          payload,
+        );
+      }
+      throw new Error(
+        errorMessage(error, "Failed to update internal memo reference prefix"),
+      );
+    }
+  },
+
+  updateExternalReferencePrefix: async (
+    unitId: string,
+    payload: UpdateExternalReferencePrefixPayload,
+  ): Promise<AxiosResponse<ReferenceNumbersResponse>> => {
+    try {
+      return await axiosInstance.patch(
+        `/unit-configurations/add-external-reference-number-prefix/${unitId}`,
+        payload,
+      );
+    } catch (error) {
+      if (isUnitNotFoundError(error)) {
+        await axiosInstance.post(`/unit-configurations`, { unitId });
+        return await axiosInstance.patch(
+          `/unit-configurations/add-external-reference-number-prefix/${unitId}`,
+          payload,
+        );
+      }
+      throw new Error(
+        errorMessage(error, "Failed to update external reference prefix"),
+      );
+    }
+  },
+
+  // Whether the given unit can receive complaints.
+  getCanReceiveComplaint: async (
+    unitId: string,
+  ): Promise<AxiosResponse<CanReceiveComplaintResponse>> => {
+    if (!unitId?.trim()) {
+      throw new Error("Unit ID is required to check complaint receiving.");
+    }
+
+    return axiosInstance.get(`/unit-configurations/can-receive-complaint`, {
+      params: { unitId },
+    });
+  },
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/validation/BufferContentValidator.ts b/apps/edr-freight-web/backoffice/src/shared/services/validation/BufferContentValidator.ts
new file mode 100644
index 000000000..b01f0cb8b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/validation/BufferContentValidator.ts
@@ -0,0 +1,260 @@
+import {
+  FileTypeDetectionResult,
+  ValidationResult,
+  UploadValidationOptions,
+} from './types';
+import { SVGContentValidator } from './SVGContentValidator';
+import { EmbeddedContentValidator } from './EmbeddedContentValidator';
+
+/**
+ * Central utility for validating file buffers against declared MIME types
+ * Uses magic byte detection to prevent XSS attacks via file type spoofing
+ * 
+ * NOTE: This validator is designed to run on the server/backend ONLY.
+ * It requires the 'file-type' package which is Node.js-only.
+ * 
+ * For browser usage, use ClientSideValidator instead.
+ */
+export class BufferContentValidator {
+  /**
+   * Detect file type from buffer using magic bytes
+   * For text-based files (SVG, HTML, XML), falls back to content analysis
+   * NOTE: This method requires the 'file-type' package and only works on Node.js
+   * @param buffer - File buffer to analyze
+   * @returns Detection result with MIME type and extension, or null if unrecognized
+   */
+  async detectFileType(
+    buffer: Buffer
+  ): Promise<FileTypeDetectionResult | null> {
+    try {
+      if (!buffer || buffer.length === 0) {
+        return null;
+      }
+
+      // Dynamically import file-type only on server-side
+      // This prevents it from being bundled for the browser
+      const { fileTypeFromBuffer } = await import('file-type');
+      
+      const detected = await fileTypeFromBuffer(buffer);
+      if (detected) {
+        return {
+          mime: detected.mime,
+          ext: detected.ext,
+        };
+      }
+
+      // Fallback for text-based files without magic bytes (SVG, HTML, XML)
+      const contentStr = buffer.toString('utf-8');
+      
+      // Check for SVG
+      if (contentStr.includes('<svg') || contentStr.includes('<?xml') && contentStr.includes('<svg')) {
+        return {
+          mime: 'image/svg+xml',
+          ext: 'svg',
+        };
+      }
+
+      // Check for HTML
+      if (contentStr.includes('<!DOCTYPE html') || contentStr.includes('<html')) {
+        return {
+          mime: 'text/html',
+          ext: 'html',
+        };
+      }
+
+      // Check for XML
+      if (contentStr.includes('<?xml')) {
+        return {
+          mime: 'application/xml',
+          ext: 'xml',
+        };
+      }
+
+      return null;
+    } catch (error) {
+      console.error('Error detecting file type:', error);
+      return null;
+    }
+  }
+
+  /**
+   * Validate declared MIME type against buffer content
+   * @param buffer - File buffer to validate
+   * @param declaredMime - MIME type declared by client
+   * @returns Validation result with success status and details
+   */
+  async validateMimeType(
+    buffer: Buffer,
+    declaredMime: string
+  ): Promise<ValidationResult> {
+    try {
+      if (!buffer || buffer.length === 0) {
+        return {
+          isValid: false,
+          detectedMime: '',
+          declaredMime,
+          error: 'File buffer is empty or corrupted',
+        };
+      }
+
+      const detected = await this.detectFileType(buffer);
+
+      if (!detected) {
+        return {
+          isValid: false,
+          detectedMime: '',
+          declaredMime,
+          error: 'Unable to detect real file type from buffer',
+        };
+      }
+
+      const isValid = detected.mime === declaredMime;
+
+      return {
+        isValid,
+        detectedMime: detected.mime,
+        declaredMime,
+        error: isValid
+          ? undefined
+          : `MIME mismatch. Declared: ${declaredMime}, Real: ${detected.mime}`,
+      };
+    } catch (error) {
+      return {
+        isValid: false,
+        detectedMime: '',
+        declaredMime,
+        error: `Validation error: ${error instanceof Error ? error.message : 'Unknown error'}`,
+      };
+    }
+  }
+
+  /**
+   * Check if MIME type is in allowed list
+   * @param mimeType - MIME type to check
+   * @param allowedTypes - List of allowed MIME types
+   * @returns True if MIME type is allowed
+   */
+  isAllowedMimeType(mimeType: string, allowedTypes: string[]): boolean {
+    if (!allowedTypes || allowedTypes.length === 0) {
+      return true;
+    }
+    return allowedTypes.includes(mimeType);
+  }
+
+  /**
+   * Comprehensive validation: detect type, validate against declared, check whitelist, scan content
+   * @param buffer - File buffer to validate
+   * @param declaredMime - MIME type declared by client
+   * @param options - Validation options including allowed types
+   * @returns Validation result
+   */
+  async validateUpload(
+    buffer: Buffer,
+    declaredMime: string,
+    options: UploadValidationOptions
+  ): Promise<ValidationResult> {
+    // First validate MIME type match
+    const mimeValidation = await this.validateMimeType(buffer, declaredMime);
+
+    if (!mimeValidation.isValid) {
+      return mimeValidation;
+    }
+
+    // Then check if MIME type is allowed
+    if (!this.isAllowedMimeType(declaredMime, options.allowedMimeTypes)) {
+      return {
+        isValid: false,
+        detectedMime: mimeValidation.detectedMime,
+        declaredMime,
+        error: `File type ${declaredMime} is not allowed for this endpoint`,
+      };
+    }
+
+    // Finally, scan file content for embedded XSS attacks
+    const contentScan = this.scanContentForXSS(buffer, declaredMime);
+    if (!contentScan.isValid) {
+      return contentScan;
+    }
+
+    return mimeValidation;
+  }
+
+  /**
+   * Validate SVG file content for XSS threats
+   * @param buffer - SVG file buffer
+   * @param fileName - File name for context
+   * @returns Validation result
+   */
+  validateSVGContent(
+    buffer: Buffer,
+    fileName: string
+  ): ValidationResult {
+    const svgValidation = SVGContentValidator.validateSVGContent(buffer, fileName);
+
+    if (!svgValidation.isValid) {
+      return {
+        isValid: false,
+        detectedMime: 'image/svg+xml',
+        declaredMime: 'image/svg+xml',
+        error: svgValidation.error,
+      };
+    }
+
+    return {
+      isValid: true,
+      detectedMime: 'image/svg+xml',
+      declaredMime: 'image/svg+xml',
+    };
+  }
+
+  /**
+   * Scan file content for embedded XSS attacks
+   * Checks actual file content regardless of file type
+   * @param buffer - File buffer to scan
+   * @param declaredMime - Declared MIME type
+   * @returns Validation result
+   */
+  scanContentForXSS(
+    buffer: Buffer,
+    declaredMime: string
+  ): ValidationResult {
+    try {
+      if (!buffer || buffer.length === 0) {
+        return {
+          isValid: true,
+          detectedMime: declaredMime,
+          declaredMime,
+        };
+      }
+
+      // Check for embedded XSS patterns in file content
+      const hasXSSPatterns = EmbeddedContentValidator.containsXSSPatterns(buffer, declaredMime);
+
+      if (hasXSSPatterns) {
+        const threatLevel = EmbeddedContentValidator.getThreatLevel(buffer, declaredMime);
+        return {
+          isValid: false,
+          detectedMime: declaredMime,
+          declaredMime,
+          error: `File content contains potentially malicious code (threat level: ${threatLevel}). This file may contain embedded scripts or dangerous patterns.`,
+        };
+      }
+
+      return {
+        isValid: true,
+        detectedMime: declaredMime,
+        declaredMime,
+      };
+    } catch (error) {
+      return {
+        isValid: false,
+        detectedMime: declaredMime,
+        declaredMime,
+        error: `Error scanning file content: ${error instanceof Error ? error.message : 'Unknown error'}`,
+      };
+    }
+  }
+}
+
+// Export singleton instance
+export const bufferContentValidator = new BufferContentValidator();
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/validation/ClientSideValidator.ts b/apps/edr-freight-web/backoffice/src/shared/services/validation/ClientSideValidator.ts
new file mode 100644
index 000000000..613b639ef
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/validation/ClientSideValidator.ts
@@ -0,0 +1,270 @@
+/**
+ * Client-side file validation using magic byte detection
+ * Works in the browser without external dependencies
+ * Provides quick validation before sending to server
+ */
+
+export interface MagicByteSignature {
+  mime: string;
+  ext: string;
+  bytes: number[];
+  offset?: number;
+}
+
+/**
+ * Magic byte signatures for common file types
+ * These are the first few bytes that identify file types
+ */
+const MAGIC_BYTES: MagicByteSignature[] = [
+  // Images
+  { mime: 'image/png', ext: 'png', bytes: [0x89, 0x50, 0x4e, 0x47] },
+  { mime: 'image/jpeg', ext: 'jpg', bytes: [0xff, 0xd8, 0xff] },
+  { mime: 'image/gif', ext: 'gif', bytes: [0x47, 0x49, 0x46] },
+  { mime: 'image/webp', ext: 'webp', bytes: [0x52, 0x49, 0x46, 0x46], offset: 8 }, // RIFF...WEBP
+  
+  // Documents
+  { mime: 'application/pdf', ext: 'pdf', bytes: [0x25, 0x50, 0x44, 0x46] }, // %PDF
+  
+  // Office Documents
+  { mime: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', ext: 'docx', bytes: [0x50, 0x4b, 0x03, 0x04] }, // PK (ZIP)
+  { mime: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', ext: 'xlsx', bytes: [0x50, 0x4b, 0x03, 0x04] }, // PK (ZIP)
+  { mime: 'application/vnd.openxmlformats-officedocument.presentationml.presentation', ext: 'pptx', bytes: [0x50, 0x4b, 0x03, 0x04] }, // PK (ZIP)
+  
+  // Legacy Office
+  { mime: 'application/msword', ext: 'doc', bytes: [0xd0, 0xcf, 0x11, 0xe0] }, // OLE2
+  { mime: 'application/vnd.ms-excel', ext: 'xls', bytes: [0xd0, 0xcf, 0x11, 0xe0] }, // OLE2
+  { mime: 'application/vnd.ms-powerpoint', ext: 'ppt', bytes: [0xd0, 0xcf, 0x11, 0xe0] }, // OLE2
+  
+  // Archives
+  { mime: 'application/zip', ext: 'zip', bytes: [0x50, 0x4b, 0x03, 0x04] }, // PK
+  { mime: 'application/x-rar-compressed', ext: 'rar', bytes: [0x52, 0x61, 0x72, 0x21] }, // Rar!
+  
+  // Text
+  { mime: 'text/plain', ext: 'txt', bytes: [0xef, 0xbb, 0xbf] }, // UTF-8 BOM
+];
+
+/**
+ * Client-side validator for file uploads
+ * Uses magic byte detection to identify file types
+ */
+export class ClientSideValidator {
+  /**
+   * Detect file type from buffer using magic bytes
+   * @param buffer - File buffer to analyze
+   * @returns Detected MIME type or null if not recognized
+   */
+  async detectFileType(buffer: ArrayBuffer): Promise<string | null> {
+    try {
+      if (!buffer || buffer.byteLength === 0) {
+        return null;
+      }
+
+      const bytes = new Uint8Array(buffer.slice(0, 512)); // Check first 512 bytes
+
+      for (const signature of MAGIC_BYTES) {
+        const offset = signature.offset || 0;
+        let matches = true;
+
+        for (let i = 0; i < signature.bytes.length; i++) {
+          if (bytes[offset + i] !== signature.bytes[i]) {
+            matches = false;
+            break;
+          }
+        }
+
+        if (matches) {
+          return signature.mime;
+        }
+      }
+
+      return null;
+    } catch (error) {
+      console.error('Error detecting file type:', error);
+      return null;
+    }
+  }
+
+  /**
+   * Validate file against declared MIME type
+   * @param file - File to validate
+   * @param declaredMime - MIME type declared by the file
+   * @returns Validation result
+   * @deprecated Use validateUpload() instead for better Office document handling
+   */
+  async validateFile(
+    file: File,
+    declaredMime: string
+  ): Promise<{ isValid: boolean; detectedMime: string | null; error?: string }> {
+    try {
+      if (!file) {
+        return {
+          isValid: false,
+          detectedMime: null,
+          error: 'No file provided',
+        };
+      }
+
+      // Read first 512 bytes
+      const buffer = await file.slice(0, 512).arrayBuffer();
+      const detectedMime = await this.detectFileType(buffer);
+
+      if (!detectedMime) {
+        return {
+          isValid: false,
+          detectedMime: null,
+          error: 'Unable to detect file type from content',
+        };
+      }
+
+      // For Office documents, check if detected type is in a related family
+      // Both .xlsx and .docx are ZIP containers, so we need flexible matching
+      const officeDocTypes = [
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+        'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+      ];
+      
+      const isOfficeDoc = officeDocTypes.includes(declaredMime);
+      const detectedIsOfficeDoc = officeDocTypes.includes(detectedMime);
+      
+      // If both are Office documents, allow the match (they're all ZIP containers)
+      if (isOfficeDoc && detectedIsOfficeDoc) {
+        return {
+          isValid: true,
+          detectedMime,
+        };
+      }
+
+      const isValid = detectedMime === declaredMime;
+
+      return {
+        isValid,
+        detectedMime,
+        error: isValid
+          ? undefined
+          : `File type mismatch. Expected: ${declaredMime}, Detected: ${detectedMime}`,
+      };
+    } catch (error) {
+      return {
+        isValid: false,
+        detectedMime: null,
+        error: `Validation error: ${error instanceof Error ? error.message : 'Unknown error'}`,
+      };
+    }
+  }
+
+  /**
+   * Check if MIME type is in allowed list
+   * @param mimeType - MIME type to check
+   * @param allowedTypes - List of allowed MIME types
+   * @returns True if MIME type is allowed
+   */
+  isAllowedMimeType(mimeType: string, allowedTypes: string[]): boolean {
+    if (!allowedTypes || allowedTypes.length === 0) {
+      return true;
+    }
+    return allowedTypes.includes(mimeType);
+  }
+
+  /**
+   * Comprehensive validation: detect type, validate against declared, check whitelist
+   * @param file - File to validate
+   * @param declaredMime - MIME type declared by the file
+   * @param allowedTypes - List of allowed MIME types
+   * @returns Validation result
+   */
+  async validateUpload(
+    file: File,
+    declaredMime: string,
+    allowedTypes: string[]
+  ): Promise<{ isValid: boolean; detectedMime: string | null; error?: string }> {
+    // First detect the actual file type
+    const buffer = await file.slice(0, 512).arrayBuffer();
+    const detectedMime = await this.detectFileType(buffer);
+
+    // If we can detect the MIME type, validate it
+    if (detectedMime) {
+      // Check if detected MIME type is in the allowed list
+      // This is more flexible than strict matching, especially for Office documents
+      if (!this.isAllowedMimeType(detectedMime, allowedTypes)) {
+        return {
+          isValid: false,
+          detectedMime,
+          error: `File type ${detectedMime} is not allowed for this upload. Allowed types: ${allowedTypes.join(', ')}`,
+        };
+      }
+
+      return {
+        isValid: true,
+        detectedMime,
+      };
+    }
+
+    // Magic byte detection failed. Only allow extension-based fallback for types
+    // that legitimately lack magic byte signatures (GIS files, plain text, etc).
+    // Reject anything that should have detectable magic bytes (PDF, images, Office docs).
+    const requiresMagicBytes = [
+      "application/pdf",
+      "image/jpeg", "image/png", "image/gif", "image/webp",
+      "application/msword",
+      "application/vnd.ms-excel",
+      "application/vnd.ms-powerpoint",
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+    ];
+
+    if (declaredMime && requiresMagicBytes.includes(declaredMime)) {
+      return {
+        isValid: false,
+        detectedMime: null,
+        error: `Could not verify file content for ${declaredMime}. The file may be corrupt or misnamed.`,
+      };
+    }
+
+    if (declaredMime && this.isAllowedMimeType(declaredMime, allowedTypes)) {
+      return {
+        isValid: true,
+        detectedMime: declaredMime,
+      };
+    }
+
+    // If declared MIME type is empty, try to infer from file extension
+    if (!declaredMime && file.name) {
+      const ext = file.name.split('.').pop()?.toLowerCase();
+      
+      // Map common GIS and other file extensions to MIME types
+      const extensionMimeMap: Record<string, string> = {
+        'shp': 'application/vnd.shp',
+        'dbf': 'application/vnd.dbf',
+        'cpg': 'application/vnd.cpg',
+        'shx': 'application/vnd.shx',
+        'qmd': 'application/vnd.qmd',
+        'dwg': 'application/x-dwg',
+        'dxf': 'application/dxf',
+        'txt': 'text/plain',
+        'pdf': 'application/pdf',
+        'zip': 'application/zip',
+        'rar': 'application/x-rar-compressed',
+      };
+      
+      const inferredMime = ext ? extensionMimeMap[ext] : null;
+      
+      if (inferredMime && this.isAllowedMimeType(inferredMime, allowedTypes)) {
+        return {
+          isValid: true,
+          detectedMime: inferredMime,
+        };
+      }
+    }
+
+    return {
+      isValid: false,
+      detectedMime: null,
+      error: `File type verification failed. Declared type: ${declaredMime}. Allowed types: ${allowedTypes.join(', ')}`,
+    };
+  }
+}
+
+// Export singleton instance
+export const clientSideValidator = new ClientSideValidator();
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/validation/EmbeddedContentValidator.ts b/apps/edr-freight-web/backoffice/src/shared/services/validation/EmbeddedContentValidator.ts
new file mode 100644
index 000000000..be23e7c20
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/validation/EmbeddedContentValidator.ts
@@ -0,0 +1,288 @@
+/**
+ * Validator for detecting XSS attacks embedded in various file types
+ * Covers HTML, XML, PDF, Office documents, and other formats that can contain scripts
+ */
+
+export class EmbeddedContentValidator {
+  /**
+   * Check if content contains XSS attack patterns
+   * @param content - File content as string, Buffer, or Uint8Array
+   * @param mimeType - MIME type of the file
+   * @returns True if malicious content is detected
+   */
+  static containsXSSPatterns(content: string | Buffer | Uint8Array, mimeType: string): boolean {
+    let contentStr: string;
+    if (typeof content === 'string') {
+      contentStr = content;
+    } else if (content instanceof Uint8Array) {
+      contentStr = new TextDecoder().decode(content);
+    } else {
+      contentStr = (content as Buffer).toString('utf-8');
+    }
+
+    // Universal XSS patterns that apply to most file types
+    const xssPatterns = [
+      /<script[\s>]/i, // Script tags
+      /on\w+\s*=\s*["'][^"']*["']/i, // Event handlers with quotes
+      /on\w+\s*=\s*[^\s>]*/i, // Event handlers without quotes
+      /javascript:/i, // JavaScript protocol
+      /data:text\/html/i, // Data URI with HTML
+      /vbscript:/i, // VBScript protocol
+      /<iframe[\s>]/i, // iFrame tags
+      /<object[\s>]/i, // Object tags
+      /<embed[\s>]/i, // Embed tags
+      /<applet[\s>]/i, // Applet tags
+      /<meta[\s>]/i, // Meta tags (can redirect)
+      /<link[\s>]/i, // Link tags (can load malicious resources)
+      /<style[\s>][\s\S]*?expression\s*\(/i, // CSS expressions
+      /eval\s*\(/i, // Eval function
+      /expression\s*\(/i, // CSS expression
+      /import\s+/i, // Import statements
+      /<!--[\s\S]*?-->/i, // HTML comments (can hide code)
+    ];
+
+    for (const pattern of xssPatterns) {
+      if (pattern.test(contentStr)) {
+        return true;
+      }
+    }
+
+    // MIME-type specific checks
+    if (mimeType.includes('html') || mimeType.includes('xml')) {
+      return this.checkHTMLXMLContent(contentStr);
+    }
+
+    if (mimeType.includes('pdf')) {
+      return this.checkPDFContent(contentStr);
+    }
+
+    if (mimeType.includes('word') || mimeType.includes('document')) {
+      return this.checkOfficeDocumentContent(contentStr);
+    }
+
+    if (mimeType.includes('sheet') || mimeType.includes('excel')) {
+      return this.checkSpreadsheetContent(contentStr);
+    }
+
+    if (mimeType.includes('svg')) {
+      return this.checkSVGContent(contentStr);
+    }
+
+    return false;
+  }
+
+  /**
+   * Check HTML/XML content for XSS
+   */
+  private static checkHTMLXMLContent(content: string): boolean {
+    // Check for script tags
+    if (/<script[\s\S]*?<\/script>/i.test(content)) {
+      return true;
+    }
+
+    // Check for event handlers
+    if (/\s+on\w+\s*=/i.test(content)) {
+      return true;
+    }
+
+    // Check for dangerous tags
+    if (/<(iframe|object|embed|applet|meta|link|form|input|button)[\s>]/i.test(content)) {
+      return true;
+    }
+
+    // Check for protocol handlers
+    if (/(javascript|data|vbscript):/i.test(content)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Check PDF content for embedded XSS
+   * PDFs can contain JavaScript and embedded files
+   */
+  private static checkPDFContent(content: string): boolean {
+    // Check for JavaScript in PDF
+    if (/\/JavaScript|\/JS|\/OpenAction|\/AA/i.test(content)) {
+      return true;
+    }
+
+    // Check for embedded files
+    if (/\/EmbeddedFile|\/ObjStm/i.test(content)) {
+      return true;
+    }
+
+    // Check for launch actions
+    if (/\/Launch|\/SubmitForm|\/ImportData/i.test(content)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Check Office document content for XSS
+   * Office documents (DOCX, XLSX) are ZIP files containing XML
+   */
+  private static checkOfficeDocumentContent(content: string): boolean {
+    // Check for VBA macros
+    if (/vbaProject|VBA|Macro/i.test(content)) {
+      return true;
+    }
+
+    // Check for embedded scripts
+    if (/<script[\s\S]*?<\/script>/i.test(content)) {
+      return true;
+    }
+
+    // Check for event handlers
+    if (/\s+on\w+\s*=/i.test(content)) {
+      return true;
+    }
+
+    // Check for external data connections
+    if (/<externalData|<connection/i.test(content)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Check spreadsheet content for XSS
+   */
+  private static checkSpreadsheetContent(content: string): boolean {
+    // Check for formulas that could execute code
+    if (/=cmd\(|=powershell|=system|=exec/i.test(content)) {
+      return true;
+    }
+
+    // Check for VBA macros
+    if (/vbaProject|VBA|Macro/i.test(content)) {
+      return true;
+    }
+
+    // Check for embedded scripts
+    if (/<script[\s\S]*?<\/script>/i.test(content)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Check SVG content for XSS
+   */
+  private static checkSVGContent(content: string): boolean {
+    // Check for script tags
+    if (/<script[\s\S]*?<\/script>/i.test(content)) {
+      return true;
+    }
+
+    // Check for event handlers
+    if (/\s+on\w+\s*=/i.test(content)) {
+      return true;
+    }
+
+    // Check for dangerous tags
+    if (/<(iframe|object|embed|applet)[\s>]/i.test(content)) {
+      return true;
+    }
+
+    // Check for protocol handlers
+    if (/(javascript|data|vbscript):/i.test(content)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Get XSS threat level for content
+   * @param content - File content as string, Buffer, or Uint8Array
+   * @param mimeType - MIME type
+   * @returns Threat level: 'none', 'low', 'medium', 'high', 'critical'
+   */
+  static getThreatLevel(content: string | Buffer | Uint8Array, mimeType: string): 'none' | 'low' | 'medium' | 'high' | 'critical' {
+    let contentStr: string;
+    if (typeof content === 'string') {
+      contentStr = content;
+    } else if (content instanceof Uint8Array) {
+      contentStr = new TextDecoder().decode(content);
+    } else {
+      contentStr = (content as Buffer).toString('utf-8');
+    }
+
+    // Critical threats
+    if (/<script[\s\S]*?<\/script>/i.test(contentStr)) {
+      return 'critical';
+    }
+
+    if (/eval\s*\(/i.test(contentStr)) {
+      return 'critical';
+    }
+
+    if (/\/JavaScript|\/JS|\/OpenAction/i.test(contentStr)) {
+      return 'critical';
+    }
+
+    // High threats
+    if (/on\w+\s*=\s*["'][^"']*["']/i.test(contentStr)) {
+      return 'high';
+    }
+
+    if (/(javascript|vbscript):/i.test(contentStr)) {
+      return 'high';
+    }
+
+    if (/<(iframe|object|embed|applet)[\s>]/i.test(contentStr)) {
+      return 'high';
+    }
+
+    // Medium threats
+    if (/data:text\/html/i.test(contentStr)) {
+      return 'medium';
+    }
+
+    if (/vbaProject|VBA|Macro/i.test(contentStr)) {
+      return 'medium';
+    }
+
+    // Low threats
+    if (/<!--[\s\S]*?-->/i.test(contentStr)) {
+      return 'low';
+    }
+
+    return 'none';
+  }
+
+  /**
+   * Sanitize content by removing XSS patterns
+   * WARNING: This is a basic sanitization and may not catch all attacks
+   * For production, use a dedicated sanitization library
+   * @param content - File content
+   * @param mimeType - MIME type
+   * @returns Sanitized content
+   */
+  static sanitizeContent(content: Buffer, mimeType: string): Buffer {
+    let contentStr = content.toString('utf-8');
+
+    // Remove script tags
+    contentStr = contentStr.replace(/<script[\s\S]*?<\/script>/gi, '');
+
+    // Remove event handlers
+    contentStr = contentStr.replace(/\s+on\w+\s*=\s*["'][^"']*["']/gi, '');
+    contentStr = contentStr.replace(/\s+on\w+\s*=\s*[^\s>]*/gi, '');
+
+    // Remove dangerous protocols
+    contentStr = contentStr.replace(/javascript:/gi, '');
+    contentStr = contentStr.replace(/vbscript:/gi, '');
+    contentStr = contentStr.replace(/data:text\/html/gi, '');
+
+    // Remove dangerous tags
+    contentStr = contentStr.replace(/<(iframe|object|embed|applet)[\s\S]*?<\/\1>/gi, '');
+
+    return Buffer.from(contentStr, 'utf-8');
+  }
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/validation/FileUploadValidator.ts b/apps/edr-freight-web/backoffice/src/shared/services/validation/FileUploadValidator.ts
new file mode 100644
index 000000000..1d00542a4
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/validation/FileUploadValidator.ts
@@ -0,0 +1,287 @@
+/**
+ * Comprehensive client-side file upload validation
+ * Prevents XSS attacks through file uploads
+ */
+
+export interface FileValidationOptions {
+  maxSizeMB?: number;
+  allowedMimeTypes?: string[];
+  allowedExtensions?: string[];
+}
+
+export interface FileValidationResult {
+  isValid: boolean;
+  error?: string;
+  warnings?: string[];
+}
+
+export class FileUploadValidator {
+  private static readonly DEFAULT_MAX_SIZE_MB = 500;
+  private static readonly DANGEROUS_EXTENSIONS = [
+    ".exe",
+    ".bat",
+    ".cmd",
+    ".com",
+    ".pif",
+    ".scr",
+    ".vbs",
+    ".js",
+    ".jar",
+    ".sh",
+    ".bash",
+    ".py",
+    ".pl",
+    ".php",
+    ".asp",
+    ".aspx",
+    ".jsp",
+    ".cfm",
+    ".cgi",
+    ".dll",
+    ".so",
+  ];
+
+  /**
+   * Validate file size
+   */
+  static validateFileSize(
+    file: File,
+    maxSizeMB?: number,
+  ): FileValidationResult {
+    const max = maxSizeMB || this.DEFAULT_MAX_SIZE_MB;
+    const fileSizeMB = file.size / (1024 * 1024);
+
+    if (fileSizeMB > max) {
+      return {
+        isValid: false,
+        error: `File size (${fileSizeMB.toFixed(2)}MB) exceeds maximum allowed size (${max}MB)`,
+      };
+    }
+
+    return { isValid: true };
+  }
+
+  /**
+   * Validate file extension
+   */
+  static validateFileExtension(
+    file: File,
+    allowedExtensions?: string[],
+  ): FileValidationResult {
+    const fileName = file.name.toLowerCase();
+    const fileExtension = fileName.substring(fileName.lastIndexOf("."));
+
+    // Check for dangerous extensions
+    if (this.DANGEROUS_EXTENSIONS.includes(fileExtension)) {
+      return {
+        isValid: false,
+        error: `File extension ${fileExtension} is not allowed for security reasons`,
+      };
+    }
+
+    // Check against allowed extensions if specified
+    if (allowedExtensions && allowedExtensions.length > 0) {
+      const normalizedAllowed = allowedExtensions.map((ext) =>
+        ext.startsWith(".") ? ext.toLowerCase() : `.${ext.toLowerCase()}`,
+      );
+
+      if (!normalizedAllowed.includes(fileExtension)) {
+        return {
+          isValid: false,
+          error: `File extension ${fileExtension} is not allowed. Allowed: ${normalizedAllowed.join(", ")}`,
+        };
+      }
+    }
+
+    return { isValid: true };
+  }
+
+  /**
+   * Validate MIME type
+   */
+  static validateMimeType(
+    file: File,
+    allowedMimeTypes?: string[],
+  ): FileValidationResult {
+    if (!allowedMimeTypes || allowedMimeTypes.length === 0) {
+      return { isValid: true };
+    }
+
+    // Check exact match
+    if (allowedMimeTypes.includes(file.type)) {
+      return { isValid: true };
+    }
+
+    // Check wildcard match (e.g., image/*)
+    const wildcardMatch = allowedMimeTypes.some((allowed) => {
+      if (allowed.endsWith("/*")) {
+        const prefix = allowed.substring(0, allowed.length - 2);
+        return file.type.startsWith(prefix);
+      }
+      return false;
+    });
+
+    if (wildcardMatch) {
+      return { isValid: true };
+    }
+
+    return {
+      isValid: false,
+      error: `File type ${file.type} is not allowed. Allowed types: ${allowedMimeTypes.join(", ")}`,
+    };
+  }
+
+  /**
+   * Validate file name for XSS
+   */
+  static validateFileName(file: File): FileValidationResult {
+    const fileName = file.name;
+
+    // Check for suspicious patterns
+    const suspiciousPatterns = [
+      /[<>:"\/\\|?*]/g, // Invalid filename characters
+      /javascript:/i, // JavaScript protocol
+      /data:/i, // Data URI
+      /vbscript:/i, // VBScript protocol
+      /on\w+\s*=/i, // Event handlers
+      /<script/i, // Script tags (with < to avoid false positives)
+    ];
+
+    for (const pattern of suspiciousPatterns) {
+      if (pattern.test(fileName)) {
+        return {
+          isValid: false,
+          error: `File name contains suspicious characters or patterns: ${fileName}`,
+        };
+      }
+    }
+
+    // Check for null bytes
+    if (fileName.includes("\0")) {
+      return {
+        isValid: false,
+        error: "File name contains null bytes",
+      };
+    }
+
+    // Check for excessive length
+    if (fileName.length > 255) {
+      return {
+        isValid: false,
+        error: `File name is too long (${fileName.length} > 255 characters)`,
+      };
+    }
+
+    return { isValid: true };
+  }
+
+  /**
+   * Comprehensive file validation
+   */
+  static validateFile(
+    file: File,
+    options: FileValidationOptions = {},
+  ): FileValidationResult {
+    // Validate file exists
+    if (!file) {
+      return {
+        isValid: false,
+        error: "No file provided",
+      };
+    }
+
+    // Validate file name
+    const nameValidation = this.validateFileName(file);
+    if (!nameValidation.isValid) {
+      return nameValidation;
+    }
+
+    // Validate file size
+    const sizeValidation = this.validateFileSize(file, options.maxSizeMB);
+    if (!sizeValidation.isValid) {
+      return sizeValidation;
+    }
+
+    // Validate file extension
+    const extensionValidation = this.validateFileExtension(
+      file,
+      options.allowedExtensions,
+    );
+    if (!extensionValidation.isValid) {
+      return extensionValidation;
+    }
+
+    // Validate MIME type
+    const mimeValidation = this.validateMimeType(
+      file,
+      options.allowedMimeTypes,
+    );
+    if (!mimeValidation.isValid) {
+      return mimeValidation;
+    }
+
+    return { isValid: true };
+  }
+
+  /**
+   * Validate multiple files
+   */
+  static validateFiles(
+    files: File[],
+    options: FileValidationOptions = {},
+  ): { valid: File[]; invalid: Array<{ file: File; error: string }> } {
+    const valid: File[] = [];
+    const invalid: Array<{ file: File; error: string }> = [];
+
+    for (const file of files) {
+      const result = this.validateFile(file, options);
+      if (result.isValid) {
+        valid.push(file);
+      } else {
+        invalid.push({
+          file,
+          error: result.error || "Validation failed",
+        });
+      }
+    }
+
+    return { valid, invalid };
+  }
+
+  /**
+   * Get file type category
+   */
+  static getFileCategory(
+    file: File,
+  ): "image" | "document" | "archive" | "other" {
+    const mimeType = file.type.toLowerCase();
+
+    if (mimeType.startsWith("image/")) return "image";
+    if (
+      mimeType.includes("pdf") ||
+      mimeType.includes("word") ||
+      mimeType.includes("sheet")
+    ) {
+      return "document";
+    }
+    if (
+      mimeType.includes("zip") ||
+      mimeType.includes("rar") ||
+      mimeType.includes("7z")
+    ) {
+      return "archive";
+    }
+
+    return "other";
+  }
+
+  /**
+   * Sanitize file name for safe display
+   */
+  static sanitizeFileName(fileName: string): string {
+    return fileName
+      .replace(/[<>:"\/\\|?*]/g, "_")
+      .replace(/\0/g, "")
+      .substring(0, 255);
+  }
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/validation/MagicByteDetector.ts b/apps/edr-freight-web/backoffice/src/shared/services/validation/MagicByteDetector.ts
new file mode 100644
index 000000000..521eebdcc
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/validation/MagicByteDetector.ts
@@ -0,0 +1,153 @@
+/**
+ * Magic byte detector for identifying actual file types from content
+ * Prevents file type spoofing attacks
+ */
+
+export interface MagicByteSignature {
+  mime: string;
+  ext: string;
+  bytes: number[];
+  offset?: number;
+}
+
+export class MagicByteDetector {
+  // Common file signatures (magic bytes)
+  private static readonly SIGNATURES: MagicByteSignature[] = [
+    // PNG: 89 50 4E 47 8D 0A 1A 0A
+    { mime: 'image/png', ext: '.png', bytes: [0x89, 0x50, 0x4e, 0x47, 0x8d, 0x0a, 0x1a, 0x0a] },
+    
+    // JPEG: FF D8 FF
+    { mime: 'image/jpeg', ext: '.jpg', bytes: [0xff, 0xd8, 0xff], offset: 0 },
+    
+    // GIF87a: 47 49 46 38 37 61
+    { mime: 'image/gif', ext: '.gif', bytes: [0x47, 0x49, 0x46, 0x38, 0x37, 0x61] },
+    
+    // GIF89a: 47 49 46 38 39 61
+    { mime: 'image/gif', ext: '.gif', bytes: [0x47, 0x49, 0x46, 0x38, 0x39, 0x61] },
+    
+    // SVG: 3C 3F 78 6D 6C (<?xml) or 3C 73 76 67 (<svg)
+    { mime: 'image/svg+xml', ext: '.svg', bytes: [0x3c, 0x3f, 0x78, 0x6d, 0x6c] },
+    { mime: 'image/svg+xml', ext: '.svg', bytes: [0x3c, 0x73, 0x76, 0x67] },
+    
+    // PDF: 25 50 44 46 (%PDF)
+    { mime: 'application/pdf', ext: '.pdf', bytes: [0x25, 0x50, 0x44, 0x46] },
+    
+    // ZIP: 50 4B 03 04 (PK..)
+    { mime: 'application/zip', ext: '.zip', bytes: [0x50, 0x4b, 0x03, 0x04] },
+    
+    // DOCX/XLSX (ZIP-based): 50 4B 03 04
+    { mime: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', ext: '.docx', bytes: [0x50, 0x4b, 0x03, 0x04] },
+    { mime: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', ext: '.xlsx', bytes: [0x50, 0x4b, 0x03, 0x04] },
+  ];
+
+  /**
+   * Detect file type from magic bytes
+   * @param buffer - File content as Uint8Array
+   * @returns Detected MIME type and extension, or null if not recognized
+   */
+  static detectFileType(buffer: Uint8Array): { mime: string; ext: string } | null {
+    if (!buffer || buffer.length === 0) {
+      return null;
+    }
+
+    // Check each signature
+    for (const sig of this.SIGNATURES) {
+      const offset = sig.offset || 0;
+      
+      // Check if buffer has enough bytes
+      if (buffer.length < offset + sig.bytes.length) {
+        continue;
+      }
+
+      // Check if bytes match
+      let match = true;
+      for (let i = 0; i < sig.bytes.length; i++) {
+        if (buffer[offset + i] !== sig.bytes[i]) {
+          match = false;
+          break;
+        }
+      }
+
+      if (match) {
+        return { mime: sig.mime, ext: sig.ext };
+      }
+    }
+
+    // Additional check: look for text content that looks like XML/SVG/HTML
+    // This catches files that might not have standard magic bytes
+    try {
+      const textContent = new TextDecoder().decode(buffer.slice(0, 1000));
+      
+      // Check for SVG content
+      if (/<svg[\s>]/i.test(textContent) || /<\?xml[\s>]/i.test(textContent)) {
+        return { mime: 'image/svg+xml', ext: '.svg' };
+      }
+      
+      // Check for HTML content
+      if (/<html[\s>]/i.test(textContent) || /<!DOCTYPE\s+html/i.test(textContent)) {
+        return { mime: 'text/html', ext: '.html' };
+      }
+    } catch (e) {
+      // If text decoding fails, continue
+    }
+
+    return null;
+  }
+
+  /**
+   * Validate that declared MIME type matches actual file content
+   * @param buffer - File content
+   * @param declaredMime - MIME type declared by browser/user
+   * @returns true if types match, false if mismatch or cannot be determined
+   */
+  static validateMimeTypeMatch(buffer: Uint8Array, declaredMime: string): boolean {
+    const detected = this.detectFileType(buffer);
+    
+    // If we can't detect the type from magic bytes, reject it for image files
+    // (images should always have recognizable magic bytes)
+    if (!detected) {
+      // For image files, if we can't detect magic bytes, it's suspicious
+      if (declaredMime.startsWith('image/')) {
+        return false;
+      }
+      // For other types, allow it (might be a valid file we don't recognize)
+      return true;
+    }
+
+    // Check for exact match
+    if (detected.mime === declaredMime) {
+      return true;
+    }
+
+    // Check for wildcard match (e.g., image/*)
+    const [declaredType] = declaredMime.split('/');
+    const [detectedType] = detected.mime.split('/');
+    
+    if (declaredType === detectedType && declaredType !== '*') {
+      return true;
+    }
+
+    // Mismatch detected
+    return false;
+  }
+
+  /**
+   * Get human-readable file type description
+   * @param mime - MIME type
+   * @returns Description of file type
+   */
+  static getFileTypeDescription(mime: string): string {
+    const descriptions: Record<string, string> = {
+      'image/png': 'PNG Image',
+      'image/jpeg': 'JPEG Image',
+      'image/gif': 'GIF Image',
+      'image/svg+xml': 'SVG Image',
+      'application/pdf': 'PDF Document',
+      'application/zip': 'ZIP Archive',
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'Word Document',
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'Excel Spreadsheet',
+    };
+
+    return descriptions[mime] || mime;
+  }
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/validation/README.md b/apps/edr-freight-web/backoffice/src/shared/services/validation/README.md
new file mode 100644
index 000000000..e0c5a7a3f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/validation/README.md
@@ -0,0 +1,114 @@
+# File Upload Validation System
+
+## Architecture
+
+This validation system is designed to work with a **server-side backend** that handles the actual file type detection using the `file-type` library.
+
+### Why Server-Side Only?
+
+1. **`file-type` is ESM-only** - Cannot be bundled for browser use
+2. **Security** - Validation should happen on the server, not client
+3. **Reliability** - Server-side validation cannot be bypassed
+4. **Performance** - Reduces client-side bundle size
+
+## How It Works
+
+### Client-Side (Browser)
+1. User selects file
+2. File is sent to server via presigned URL or direct upload
+3. Server validates the file buffer
+
+### Server-Side (Backend)
+1. Receive file buffer
+2. Use `BufferContentValidator` to detect actual MIME type
+3. Compare with declared MIME type
+4. Return validation result
+5. Log validation event via `SecurityLogger`
+
+## Implementation
+
+### For Backend Developers
+
+The `BufferContentValidator` class is designed to be used on your backend:
+
+```typescript
+import { BufferContentValidator } from '@/shared/services/validation';
+
+const validator = new BufferContentValidator();
+
+// Detect file type from buffer
+const detected = await validator.detectFileType(buffer);
+
+// Validate MIME type
+const result = await validator.validateMimeType(buffer, declaredMime);
+
+// Check whitelist
+const isAllowed = validator.isAllowedMimeType(mimeType, allowedTypes);
+```
+
+### For Frontend Developers
+
+The frontend code in `fileService.ts` calls the backend validation:
+
+```typescript
+// This happens on the server/backend
+const validationResult = await bufferContentValidator.validateMimeType(
+  buffer,
+  declaredMime
+);
+
+// Log the event
+await securityLogger.logValidationEvent({
+  // ... event details
+});
+```
+
+## Files
+
+- **`BufferContentValidator.ts`** - Core validation logic (server-side)
+- **`SecurityLogger.ts`** - Audit logging (server-side)
+- **`types.ts`** - Shared TypeScript interfaces
+- **`index.ts`** - Clean exports
+
+## Testing
+
+Tests use mocked `file-type` to avoid ESM issues:
+
+```typescript
+jest.mock('file-type', () => ({
+  fileTypeFromBuffer: jest.fn(async (buffer: Buffer) => {
+    // Mock implementation
+  }),
+}));
+```
+
+## Next Steps
+
+1. **Backend Integration**: Implement validation endpoint on your backend
+2. **API Contract**: Define request/response format for validation
+3. **Error Handling**: Handle validation errors gracefully
+4. **Logging**: Integrate with your logging service
+
+## Example Backend Implementation
+
+```typescript
+// backend/routes/validate-upload.ts
+import { BufferContentValidator } from '@/shared/services/validation';
+
+app.post('/api/validate-upload', async (req, res) => {
+  const { buffer, declaredMime } = req.body;
+  const validator = new BufferContentValidator();
+  
+  const result = await validator.validateMimeType(buffer, declaredMime);
+  
+  if (!result.isValid) {
+    return res.status(400).json({ error: result.error });
+  }
+  
+  res.json({ success: true });
+});
+```
+
+---
+
+**Note**: The `file-type` package is only needed on the backend. The frontend uses the validation results from the backend API.
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/validation/SVGContentValidator.ts b/apps/edr-freight-web/backoffice/src/shared/services/validation/SVGContentValidator.ts
new file mode 100644
index 000000000..4d5523cfd
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/validation/SVGContentValidator.ts
@@ -0,0 +1,152 @@
+/**
+ * SVG content validator to detect XSS attacks in SVG files
+ * SVG files are XML-based and can contain embedded JavaScript
+ */
+
+export class SVGContentValidator {
+  /**
+   * Check if content contains SVG with embedded scripts
+   * @param content - File content as string or buffer
+   * @returns True if malicious scripts are detected
+   */
+  static containsMaliciousScripts(content: string | Buffer): boolean {
+    const contentStr = typeof content === 'string' ? content : content.toString('utf-8');
+
+    // Check for script tags
+    if (/<script[\s>]/i.test(contentStr)) {
+      return true;
+    }
+
+    // Check for event handlers (onclick, onload, etc.)
+    if (/on\w+\s*=/i.test(contentStr)) {
+      return true;
+    }
+
+    // Check for javascript: protocol
+    if (/javascript:/i.test(contentStr)) {
+      return true;
+    }
+
+    // Check for data: protocol (can be used for XSS)
+    if (/data:text\/html/i.test(contentStr)) {
+      return true;
+    }
+
+    // Check for vbscript: protocol
+    if (/vbscript:/i.test(contentStr)) {
+      return true;
+    }
+
+    // Check for iframe tags
+    if (/<iframe[\s>]/i.test(contentStr)) {
+      return true;
+    }
+
+    // Check for object/embed tags
+    if (/<(object|embed)[\s>]/i.test(contentStr)) {
+      return true;
+    }
+
+    // Check for style tags with expressions
+    if (/<style[\s>][\s\S]*?expression\s*\(/i.test(contentStr)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Validate SVG file for XSS threats
+   * @param buffer - File buffer (Buffer or Uint8Array)
+   * @param fileName - File name for context
+   * @returns Validation result
+   */
+  static validateSVGContent(
+    buffer: Buffer | Uint8Array,
+    fileName: string
+  ): { isValid: boolean; error?: string } {
+    try {
+      // Check if it's valid UTF-8 (SVG should be text-based)
+      let content: string;
+      if (buffer instanceof Uint8Array) {
+        content = new TextDecoder().decode(buffer);
+      } else {
+        content = (buffer as Buffer).toString('utf-8');
+      }
+
+      // Check for malicious scripts
+      if (this.containsMaliciousScripts(content)) {
+        return {
+          isValid: false,
+          error: `SVG file contains potentially malicious scripts or event handlers`,
+        };
+      }
+
+      // Check if it's valid XML
+      if (!this.isValidXML(content)) {
+        return {
+          isValid: false,
+          error: `SVG file is not valid XML`,
+        };
+      }
+
+      return { isValid: true };
+    } catch (error) {
+      return {
+        isValid: false,
+        error: `Failed to validate SVG content: ${error instanceof Error ? error.message : 'Unknown error'}`,
+      };
+    }
+  }
+
+  /**
+   * Check if content is valid XML
+   * @param content - XML content as string
+   * @returns True if valid XML
+   */
+  private static isValidXML(content: string): boolean {
+    try {
+      // Basic XML validation - check for matching tags
+      const openTags = (content.match(/<[^/][^>]*>/g) || []).length;
+      const closeTags = (content.match(/<\/[^>]*>/g) || []).length;
+
+      // Should have at least one root element
+      return openTags > 0 && closeTags > 0;
+    } catch {
+      return false;
+    }
+  }
+
+  /**
+   * Sanitize SVG by removing potentially dangerous elements
+   * @param buffer - SVG file buffer
+   * @returns Sanitized SVG content
+   */
+  static sanitizeSVG(buffer: Buffer): Buffer {
+    let content = buffer.toString('utf-8');
+
+    // Remove script tags and content
+    content = content.replace(/<script[\s\S]*?<\/script>/gi, '');
+
+    // Remove event handlers
+    content = content.replace(/\s+on\w+\s*=\s*["'][^"']*["']/gi, '');
+    content = content.replace(/\s+on\w+\s*=\s*[^\s>]*/gi, '');
+
+    // Remove javascript: protocol
+    content = content.replace(/javascript:/gi, '');
+
+    // Remove data:text/html protocol
+    content = content.replace(/data:text\/html/gi, '');
+
+    // Remove vbscript: protocol
+    content = content.replace(/vbscript:/gi, '');
+
+    // Remove iframe tags
+    content = content.replace(/<iframe[\s\S]*?<\/iframe>/gi, '');
+
+    // Remove object/embed tags
+    content = content.replace(/<(object|embed)[^>]*>/gi, '');
+
+    return Buffer.from(content, 'utf-8');
+  }
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/validation/SecurityLogger.ts b/apps/edr-freight-web/backoffice/src/shared/services/validation/SecurityLogger.ts
new file mode 100644
index 000000000..2aa95aeca
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/validation/SecurityLogger.ts
@@ -0,0 +1,165 @@
+import { ValidationLogEntry, XSSValidationLogEntry } from './types';
+
+/**
+ * Central security logging service for file validation events
+ * Records all validation attempts for audit and investigation
+ */
+export class SecurityLogger {
+  private logs: ValidationLogEntry[] = [];
+  private xssLogs: XSSValidationLogEntry[] = [];
+
+  /**
+   * Log a validation event
+   * @param entry - Validation log entry with all required metadata
+   */
+  async logValidationEvent(entry: ValidationLogEntry): Promise<void> {
+    try {
+      // Ensure timestamp is set
+      if (!entry.timestamp) {
+        entry.timestamp = new Date();
+      }
+
+      // Store log entry
+      this.logs.push(entry);
+
+      // In production, this would write to a secure logging service
+      // For now, we log to console in development
+      if (process.env.NODE_ENV === 'development') {
+        console.log('[SECURITY LOG]', {
+          timestamp: entry.timestamp.toISOString(),
+          module: entry.module,
+          endpoint: entry.endpoint,
+          result: entry.validationResult,
+          declaredMime: entry.declaredMime,
+          detectedMime: entry.detectedMime,
+          error: entry.errorDetails,
+        });
+      }
+
+      // TODO: In production, integrate with your logging service
+      // Examples:
+      // - Send to CloudWatch, DataDog, Splunk, etc.
+      // - Write to database audit table
+      // - Send to centralized logging system
+    } catch (error) {
+      console.error('Failed to log validation event:', error);
+      // Don't throw - logging failures shouldn't break uploads
+    }
+  }
+
+  /**
+   * Log an XSS validation event
+   * @param entry - XSS validation log entry
+   */
+  async logXSSValidationEvent(entry: XSSValidationLogEntry): Promise<void> {
+    try {
+      // Ensure timestamp is set
+      if (!entry.timestamp) {
+        entry.timestamp = new Date();
+      }
+
+      // Store log entry
+      this.xssLogs.push(entry);
+
+      // Log to console in development
+      if (process.env.NODE_ENV === 'development') {
+        console.log('[XSS VALIDATION LOG]', {
+          timestamp: entry.timestamp.toISOString(),
+          module: entry.module,
+          uploadContext: entry.uploadContext,
+          result: entry.validationResult,
+          fileName: entry.sanitizedFileName, // Use sanitized name for logging
+          declaredMime: entry.declaredMimeType,
+          detectedMime: entry.detectedMimeType,
+          failureReason: entry.failureReason,
+        });
+      }
+
+      // TODO: In production, integrate with your logging service
+      // Ensure sensitive file content is NOT logged
+    } catch (error) {
+      console.error('Failed to log XSS validation event:', error);
+      // Don't throw - logging failures shouldn't break uploads
+    }
+  }
+
+  /**
+   * Query validation logs for investigation
+   * @param filters - Filter criteria for logs
+   * @returns Matching log entries
+   */
+  async queryValidationLogs(filters: {
+    module?: string;
+    validationResult?: string;
+    startDate?: Date;
+    endDate?: Date;
+    userId?: string;
+  }): Promise<ValidationLogEntry[]> {
+    return this.logs.filter((log) => {
+      if (filters.module && log.module !== filters.module) return false;
+      if (
+        filters.validationResult &&
+        log.validationResult !== filters.validationResult
+      )
+        return false;
+      if (filters.startDate && log.timestamp < filters.startDate) return false;
+      if (filters.endDate && log.timestamp > filters.endDate) return false;
+      if (filters.userId && log.userId !== filters.userId) return false;
+      return true;
+    });
+  }
+
+  /**
+   * Query XSS validation logs for investigation
+   * @param filters - Filter criteria for logs
+   * @returns Matching XSS validation log entries
+   */
+  async queryXSSValidationLogs(filters: {
+    module?: string;
+    uploadContext?: string;
+    validationResult?: string;
+    startDate?: Date;
+    endDate?: Date;
+    userId?: string;
+  }): Promise<XSSValidationLogEntry[]> {
+    return this.xssLogs.filter((log) => {
+      if (filters.module && log.module !== filters.module) return false;
+      if (filters.uploadContext && log.uploadContext !== filters.uploadContext)
+        return false;
+      if (
+        filters.validationResult &&
+        log.validationResult !== filters.validationResult
+      )
+        return false;
+      if (filters.startDate && log.timestamp < filters.startDate) return false;
+      if (filters.endDate && log.timestamp > filters.endDate) return false;
+      if (filters.userId && log.userId !== filters.userId) return false;
+      return true;
+    });
+  }
+
+  /**
+   * Get all logs (for testing/debugging)
+   */
+  getAllLogs(): ValidationLogEntry[] {
+    return [...this.logs];
+  }
+
+  /**
+   * Get all XSS validation logs (for testing/debugging)
+   */
+  getAllXSSLogs(): XSSValidationLogEntry[] {
+    return [...this.xssLogs];
+  }
+
+  /**
+   * Clear logs (for testing)
+   */
+  clearLogs(): void {
+    this.logs = [];
+    this.xssLogs = [];
+  }
+}
+
+// Export singleton instance
+export const securityLogger = new SecurityLogger();
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/validation/XSSUploadValidator.ts b/apps/edr-freight-web/backoffice/src/shared/services/validation/XSSUploadValidator.ts
new file mode 100644
index 000000000..ae152806c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/validation/XSSUploadValidator.ts
@@ -0,0 +1,149 @@
+import { FileUploadValidator } from './FileUploadValidator';
+import { ClientSideValidator, clientSideValidator } from './ClientSideValidator';
+import {
+  XSSUploadValidationContext,
+  XSSUploadValidationResult,
+  ClientValidationDetails,
+} from './types';
+
+/**
+ * Orchestrates client-side and server-side XSS validation for file uploads
+ * Provides unified validation experience across all upload entry points
+ */
+export class XSSUploadValidator {
+  /**
+   * Validate file for upload with client-side checks
+   * Runs immediately when user selects file
+   * @param file - File to validate
+   * @param context - Validation context with allowed types and constraints
+   * @returns Validation result with specific error details
+   */
+  static async validateFileForUpload(
+    file: File,
+    context: XSSUploadValidationContext
+  ): Promise<XSSUploadValidationResult> {
+    const clientValidation: ClientValidationDetails = {
+      passed: true,
+    };
+
+    // Validate file name for XSS patterns
+    const fileNameValidation = FileUploadValidator.validateFileName(file);
+    if (!fileNameValidation.isValid) {
+      clientValidation.passed = false;
+      clientValidation.fileName = {
+        passed: false,
+        error: fileNameValidation.error,
+      };
+      return {
+        isValid: false,
+        clientValidation,
+        sanitizedFileName: this.getSanitizedFileName(file.name),
+      };
+    }
+    clientValidation.fileName = { passed: true };
+
+    // Validate file extension
+    const extensionValidation = FileUploadValidator.validateFileExtension(
+      file,
+      context.allowedExtensions
+    );
+    if (!extensionValidation.isValid) {
+      clientValidation.passed = false;
+      clientValidation.extension = {
+        passed: false,
+        error: extensionValidation.error,
+      };
+      return {
+        isValid: false,
+        clientValidation,
+        sanitizedFileName: this.getSanitizedFileName(file.name),
+      };
+    }
+    clientValidation.extension = { passed: true };
+
+    // Validate file size
+    const sizeValidation = FileUploadValidator.validateFileSize(
+      file,
+      context.maxSizeMB
+    );
+    if (!sizeValidation.isValid) {
+      clientValidation.passed = false;
+      clientValidation.size = {
+        passed: false,
+        error: sizeValidation.error,
+      };
+      return {
+        isValid: false,
+        clientValidation,
+        sanitizedFileName: this.getSanitizedFileName(file.name),
+      };
+    }
+    clientValidation.size = { passed: true };
+
+    // Validate MIME type using magic byte detection
+    // This is more reliable than browser's file.type for Office documents
+    const mimeValidation = await clientSideValidator.validateUpload(
+      file,
+      file.type,
+      context.allowedMimeTypes || []
+    );
+    if (!mimeValidation.isValid) {
+      clientValidation.passed = false;
+      clientValidation.mimeType = {
+        passed: false,
+        error: mimeValidation.error,
+      };
+      return {
+        isValid: false,
+        clientValidation,
+        sanitizedFileName: this.getSanitizedFileName(file.name),
+      };
+    }
+    clientValidation.mimeType = { passed: true };
+
+    // All validations passed
+    return {
+      isValid: true,
+      clientValidation,
+      sanitizedFileName: this.getSanitizedFileName(file.name),
+    };
+  }
+
+  /**
+   * Get sanitized file name for safe display in UI
+   * Removes or replaces suspicious characters, removes null bytes, truncates to 255 chars
+   * @param fileName - Original file name
+   * @returns Sanitized file name safe for display
+   */
+  static getSanitizedFileName(fileName: string): string {
+    return FileUploadValidator.sanitizeFileName(fileName);
+  }
+
+  /**
+   * Validate multiple files for upload
+   * @param files - Files to validate
+   * @param context - Validation context
+   * @returns Object with valid and invalid files
+   */
+  static async validateFilesForUpload(
+    files: File[],
+    context: XSSUploadValidationContext
+  ): Promise<{
+    valid: Array<{ file: File; result: XSSUploadValidationResult }>;
+    invalid: Array<{ file: File; result: XSSUploadValidationResult }>;
+  }> {
+    const valid: Array<{ file: File; result: XSSUploadValidationResult }> = [];
+    const invalid: Array<{ file: File; result: XSSUploadValidationResult }> = [];
+
+    for (const file of files) {
+      const result = await this.validateFileForUpload(file, context);
+      if (result.isValid) {
+        valid.push({ file, result });
+      } else {
+        invalid.push({ file, result });
+      }
+    }
+
+    return { valid, invalid };
+  }
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/validation/__tests__/BufferContentValidator.test.ts b/apps/edr-freight-web/backoffice/src/shared/services/validation/__tests__/BufferContentValidator.test.ts
new file mode 100644
index 000000000..d94cab1d3
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/validation/__tests__/BufferContentValidator.test.ts
@@ -0,0 +1,178 @@
+import { BufferContentValidator } from '../BufferContentValidator';
+
+// Mock file-type module
+jest.mock('file-type', () => ({
+  fileTypeFromBuffer: jest.fn(async (buffer: Buffer) => {
+    // PNG magic bytes: 89 50 4E 47 0D 0A 1A 0A
+    if (buffer[0] === 0x89 && buffer[1] === 0x50 && buffer[2] === 0x4e && buffer[3] === 0x47) {
+      return { mime: 'image/png', ext: 'png' };
+    }
+    // JPEG magic bytes: FF D8 FF
+    if (buffer[0] === 0xff && buffer[1] === 0xd8 && buffer[2] === 0xff) {
+      return { mime: 'image/jpeg', ext: 'jpg' };
+    }
+    // PDF magic bytes: 25 50 44 46 (% P D F)
+    if (buffer[0] === 0x25 && buffer[1] === 0x50 && buffer[2] === 0x44 && buffer[3] === 0x46) {
+      return { mime: 'application/pdf', ext: 'pdf' };
+    }
+    return null;
+  }),
+}));
+
+describe('BufferContentValidator', () => {
+  let validator: BufferContentValidator;
+
+  beforeEach(() => {
+    validator = new BufferContentValidator();
+  });
+
+  describe('detectFileType', () => {
+    it('should return null for empty buffer', async () => {
+      const result = await validator.detectFileType(Buffer.alloc(0));
+      expect(result).toBeNull();
+    });
+
+    it('should return null for undefined buffer', async () => {
+      const result = await validator.detectFileType(undefined as any);
+      expect(result).toBeNull();
+    });
+
+    it('should detect PNG file type from magic bytes', async () => {
+      // PNG magic bytes: 89 50 4E 47 0D 0A 1A 0A
+      const pngBuffer = Buffer.from([
+        0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0x00, 0x00,
+        0x0d,
+      ]);
+      const result = await validator.detectFileType(pngBuffer);
+      expect(result).not.toBeNull();
+      expect(result?.mime).toBe('image/png');
+    });
+
+    it('should detect JPEG file type from magic bytes', async () => {
+      // JPEG magic bytes: FF D8 FF
+      const jpegBuffer = Buffer.from([0xff, 0xd8, 0xff, 0xe0, 0x00, 0x10]);
+      const result = await validator.detectFileType(jpegBuffer);
+      expect(result).not.toBeNull();
+      expect(result?.mime).toBe('image/jpeg');
+    });
+
+    it('should detect PDF file type from magic bytes', async () => {
+      // PDF magic bytes: 25 50 44 46 (% P D F)
+      const pdfBuffer = Buffer.from([0x25, 0x50, 0x44, 0x46, 0x2d, 0x31]);
+      const result = await validator.detectFileType(pdfBuffer);
+      expect(result).not.toBeNull();
+      expect(result?.mime).toBe('application/pdf');
+    });
+
+    it('should return null for unrecognized file type', async () => {
+      const unknownBuffer = Buffer.from([0x00, 0x01, 0x02, 0x03]);
+      const result = await validator.detectFileType(unknownBuffer);
+      expect(result).toBeNull();
+    });
+  });
+
+  describe('validateMimeType', () => {
+    it('should return error for empty buffer', async () => {
+      const result = await validator.validateMimeType(
+        Buffer.alloc(0),
+        'image/png'
+      );
+      expect(result.isValid).toBe(false);
+      expect(result.error).toContain('empty or corrupted');
+    });
+
+    it('should return error for unrecognized file type', async () => {
+      const unknownBuffer = Buffer.from([0x00, 0x01, 0x02, 0x03]);
+      const result = await validator.validateMimeType(
+        unknownBuffer,
+        'image/png'
+      );
+      expect(result.isValid).toBe(false);
+      expect(result.error).toContain('Unable to detect');
+    });
+
+    it('should validate matching MIME types', async () => {
+      const pngBuffer = Buffer.from([
+        0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0x00, 0x00,
+        0x0d,
+      ]);
+      const result = await validator.validateMimeType(pngBuffer, 'image/png');
+      expect(result.isValid).toBe(true);
+      expect(result.detectedMime).toBe('image/png');
+      expect(result.error).toBeUndefined();
+    });
+
+    it('should reject mismatched MIME types', async () => {
+      const pngBuffer = Buffer.from([
+        0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0x00, 0x00,
+        0x0d,
+      ]);
+      const result = await validator.validateMimeType(pngBuffer, 'image/jpeg');
+      expect(result.isValid).toBe(false);
+      expect(result.detectedMime).toBe('image/png');
+      expect(result.error).toContain('MIME mismatch');
+      expect(result.error).toContain('image/jpeg');
+      expect(result.error).toContain('image/png');
+    });
+  });
+
+  describe('isAllowedMimeType', () => {
+    it('should return true for empty allowed list', () => {
+      const result = validator.isAllowedMimeType('image/png', []);
+      expect(result).toBe(true);
+    });
+
+    it('should return true for allowed MIME type', () => {
+      const result = validator.isAllowedMimeType('image/png', [
+        'image/png',
+        'image/jpeg',
+      ]);
+      expect(result).toBe(true);
+    });
+
+    it('should return false for disallowed MIME type', () => {
+      const result = validator.isAllowedMimeType('application/exe', [
+        'image/png',
+        'image/jpeg',
+      ]);
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('validateUpload', () => {
+    it('should validate matching MIME type and allowed list', async () => {
+      const pngBuffer = Buffer.from([
+        0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0x00, 0x00,
+        0x0d,
+      ]);
+      const result = await validator.validateUpload(pngBuffer, 'image/png', {
+        allowedMimeTypes: ['image/png', 'image/jpeg'],
+      });
+      expect(result.isValid).toBe(true);
+    });
+
+    it('should reject MIME type mismatch', async () => {
+      const pngBuffer = Buffer.from([
+        0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0x00, 0x00,
+        0x0d,
+      ]);
+      const result = await validator.validateUpload(pngBuffer, 'image/jpeg', {
+        allowedMimeTypes: ['image/png', 'image/jpeg'],
+      });
+      expect(result.isValid).toBe(false);
+      expect(result.error).toContain('MIME mismatch');
+    });
+
+    it('should reject MIME type not in allowed list', async () => {
+      const pngBuffer = Buffer.from([
+        0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0x00, 0x00,
+        0x0d,
+      ]);
+      const result = await validator.validateUpload(pngBuffer, 'image/png', {
+        allowedMimeTypes: ['image/jpeg', 'application/pdf'],
+      });
+      expect(result.isValid).toBe(false);
+      expect(result.error).toContain('not allowed');
+    });
+  });
+});
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/validation/__tests__/ClientSideValidator.test.ts b/apps/edr-freight-web/backoffice/src/shared/services/validation/__tests__/ClientSideValidator.test.ts
new file mode 100644
index 000000000..6235cf6ce
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/validation/__tests__/ClientSideValidator.test.ts
@@ -0,0 +1,183 @@
+import { ClientSideValidator } from '../ClientSideValidator';
+
+describe('ClientSideValidator', () => {
+  let validator: ClientSideValidator;
+
+  beforeEach(() => {
+    validator = new ClientSideValidator();
+  });
+
+  describe('detectFileType', () => {
+    it('should detect PNG file type from magic bytes', async () => {
+      // PNG magic bytes: 89 50 4E 47 0D 0A 1A 0A
+      const pngBuffer = new ArrayBuffer(12);
+      const view = new Uint8Array(pngBuffer);
+      view.set([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0x00, 0x00, 0x0d]);
+
+      const result = await validator.detectFileType(pngBuffer);
+      expect(result).toBe('image/png');
+    });
+
+    it('should detect JPEG file type from magic bytes', async () => {
+      // JPEG magic bytes: FF D8 FF
+      const jpegBuffer = new ArrayBuffer(6);
+      const view = new Uint8Array(jpegBuffer);
+      view.set([0xff, 0xd8, 0xff, 0xe0, 0x00, 0x10]);
+
+      const result = await validator.detectFileType(jpegBuffer);
+      expect(result).toBe('image/jpeg');
+    });
+
+    it('should detect PDF file type from magic bytes', async () => {
+      // PDF magic bytes: 25 50 44 46 (% P D F)
+      const pdfBuffer = new ArrayBuffer(6);
+      const view = new Uint8Array(pdfBuffer);
+      view.set([0x25, 0x50, 0x44, 0x46, 0x2d, 0x31]);
+
+      const result = await validator.detectFileType(pdfBuffer);
+      expect(result).toBe('application/pdf');
+    });
+
+    it('should detect GIF file type from magic bytes', async () => {
+      // GIF magic bytes: 47 49 46 (GIF)
+      const gifBuffer = new ArrayBuffer(6);
+      const view = new Uint8Array(gifBuffer);
+      view.set([0x47, 0x49, 0x46, 0x38, 0x39, 0x61]);
+
+      const result = await validator.detectFileType(gifBuffer);
+      expect(result).toBe('image/gif');
+    });
+
+    it('should return null for empty buffer', async () => {
+      const emptyBuffer = new ArrayBuffer(0);
+      const result = await validator.detectFileType(emptyBuffer);
+      expect(result).toBeNull();
+    });
+
+    it('should return null for unrecognized file type', async () => {
+      const unknownBuffer = new ArrayBuffer(4);
+      const view = new Uint8Array(unknownBuffer);
+      view.set([0x00, 0x01, 0x02, 0x03]);
+
+      const result = await validator.detectFileType(unknownBuffer);
+      expect(result).toBeNull();
+    });
+  });
+
+  describe('validateFile', () => {
+    it('should validate matching MIME types', async () => {
+      const pngBuffer = new ArrayBuffer(12);
+      const view = new Uint8Array(pngBuffer);
+      view.set([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0x00, 0x00, 0x0d]);
+
+      const file = new File([pngBuffer], 'test.png', { type: 'image/png' });
+      const result = await validator.validateFile(file, 'image/png');
+
+      expect(result.isValid).toBe(true);
+      expect(result.detectedMime).toBe('image/png');
+      expect(result.error).toBeUndefined();
+    });
+
+    it('should reject mismatched MIME types', async () => {
+      const pngBuffer = new ArrayBuffer(12);
+      const view = new Uint8Array(pngBuffer);
+      view.set([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0x00, 0x00, 0x0d]);
+
+      const file = new File([pngBuffer], 'test.png', { type: 'image/jpeg' });
+      const result = await validator.validateFile(file, 'image/jpeg');
+
+      expect(result.isValid).toBe(false);
+      expect(result.detectedMime).toBe('image/png');
+      expect(result.error).toContain('File type mismatch');
+    });
+
+    it('should handle unrecognized file types', async () => {
+      const unknownBuffer = new ArrayBuffer(4);
+      const view = new Uint8Array(unknownBuffer);
+      view.set([0x00, 0x01, 0x02, 0x03]);
+
+      const file = new File([unknownBuffer], 'test.bin', { type: 'application/octet-stream' });
+      const result = await validator.validateFile(file, 'application/octet-stream');
+
+      expect(result.isValid).toBe(false);
+      expect(result.detectedMime).toBeNull();
+      expect(result.error).toContain('Unable to detect file type');
+    });
+
+    it('should handle missing file', async () => {
+      const result = await validator.validateFile(null as any, 'image/png');
+
+      expect(result.isValid).toBe(false);
+      expect(result.error).toContain('No file provided');
+    });
+  });
+
+  describe('isAllowedMimeType', () => {
+    it('should return true for empty allowed list', () => {
+      const result = validator.isAllowedMimeType('image/png', []);
+      expect(result).toBe(true);
+    });
+
+    it('should return true for allowed MIME type', () => {
+      const result = validator.isAllowedMimeType('image/png', [
+        'image/png',
+        'image/jpeg',
+      ]);
+      expect(result).toBe(true);
+    });
+
+    it('should return false for disallowed MIME type', () => {
+      const result = validator.isAllowedMimeType('application/exe', [
+        'image/png',
+        'image/jpeg',
+      ]);
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('validateUpload', () => {
+    it('should validate matching MIME type and allowed list', async () => {
+      const pngBuffer = new ArrayBuffer(12);
+      const view = new Uint8Array(pngBuffer);
+      view.set([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0x00, 0x00, 0x0d]);
+
+      const file = new File([pngBuffer], 'test.png', { type: 'image/png' });
+      const result = await validator.validateUpload(file, 'image/png', [
+        'image/png',
+        'image/jpeg',
+      ]);
+
+      expect(result.isValid).toBe(true);
+    });
+
+    it('should reject MIME type mismatch', async () => {
+      const pngBuffer = new ArrayBuffer(12);
+      const view = new Uint8Array(pngBuffer);
+      view.set([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0x00, 0x00, 0x0d]);
+
+      const file = new File([pngBuffer], 'test.png', { type: 'image/jpeg' });
+      const result = await validator.validateUpload(file, 'image/jpeg', [
+        'image/png',
+        'image/jpeg',
+      ]);
+
+      expect(result.isValid).toBe(false);
+      expect(result.error).toContain('File type mismatch');
+    });
+
+    it('should reject MIME type not in allowed list', async () => {
+      const pngBuffer = new ArrayBuffer(12);
+      const view = new Uint8Array(pngBuffer);
+      view.set([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0x00, 0x00, 0x0d]);
+
+      const file = new File([pngBuffer], 'test.png', { type: 'image/png' });
+      const result = await validator.validateUpload(file, 'image/png', [
+        'image/jpeg',
+        'application/pdf',
+      ]);
+
+      expect(result.isValid).toBe(false);
+      expect(result.error).toContain('not allowed');
+    });
+  });
+});
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/validation/__tests__/FileUploadValidator.test.ts b/apps/edr-freight-web/backoffice/src/shared/services/validation/__tests__/FileUploadValidator.test.ts
new file mode 100644
index 000000000..f03948d65
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/validation/__tests__/FileUploadValidator.test.ts
@@ -0,0 +1,249 @@
+import { FileUploadValidator } from '../FileUploadValidator';
+
+describe('FileUploadValidator', () => {
+  describe('validateFileSize', () => {
+    it('should accept files within size limit', () => {
+      const file = new File(['content'], 'test.txt', { type: 'text/plain' });
+      Object.defineProperty(file, 'size', { value: 1024 * 1024 }); // 1MB
+
+      const result = FileUploadValidator.validateFileSize(file, 50);
+      expect(result.isValid).toBe(true);
+    });
+
+    it('should reject files exceeding size limit', () => {
+      const file = new File(['content'], 'test.txt', { type: 'text/plain' });
+      Object.defineProperty(file, 'size', { value: 100 * 1024 * 1024 }); // 100MB
+
+      const result = FileUploadValidator.validateFileSize(file, 50);
+      expect(result.isValid).toBe(false);
+      expect(result.error).toContain('exceeds maximum allowed size');
+    });
+  });
+
+  describe('validateFileExtension', () => {
+    it('should reject dangerous extensions', () => {
+      const file = new File(['content'], 'malware.exe', { type: 'application/octet-stream' });
+
+      const result = FileUploadValidator.validateFileExtension(file);
+      expect(result.isValid).toBe(false);
+      expect(result.error).toContain('not allowed for security reasons');
+    });
+
+    it('should accept allowed extensions', () => {
+      const file = new File(['content'], 'image.jpg', { type: 'image/jpeg' });
+
+      const result = FileUploadValidator.validateFileExtension(file, ['jpg', 'png']);
+      expect(result.isValid).toBe(true);
+    });
+
+    it('should reject disallowed extensions', () => {
+      const file = new File(['content'], 'document.exe', { type: 'application/octet-stream' });
+
+      const result = FileUploadValidator.validateFileExtension(file, ['jpg', 'png']);
+      expect(result.isValid).toBe(false);
+      expect(result.error).toContain('not allowed');
+    });
+
+    it('should handle extensions with or without dot', () => {
+      const file = new File(['content'], 'image.jpg', { type: 'image/jpeg' });
+
+      const result1 = FileUploadValidator.validateFileExtension(file, ['.jpg', '.png']);
+      const result2 = FileUploadValidator.validateFileExtension(file, ['jpg', 'png']);
+
+      expect(result1.isValid).toBe(true);
+      expect(result2.isValid).toBe(true);
+    });
+  });
+
+  describe('validateMimeType', () => {
+    it('should accept allowed MIME types', () => {
+      const file = new File(['content'], 'image.jpg', { type: 'image/jpeg' });
+
+      const result = FileUploadValidator.validateMimeType(file, ['image/jpeg', 'image/png']);
+      expect(result.isValid).toBe(true);
+    });
+
+    it('should reject disallowed MIME types', () => {
+      const file = new File(['content'], 'script.js', { type: 'application/javascript' });
+
+      const result = FileUploadValidator.validateMimeType(file, ['image/jpeg', 'image/png']);
+      expect(result.isValid).toBe(false);
+      expect(result.error).toContain('not allowed');
+    });
+
+    it('should support wildcard MIME types', () => {
+      const file = new File(['content'], 'image.jpg', { type: 'image/jpeg' });
+
+      const result = FileUploadValidator.validateMimeType(file, ['image/*']);
+      expect(result.isValid).toBe(true);
+    });
+
+    it('should accept any MIME type if list is empty', () => {
+      const file = new File(['content'], 'anything.bin', { type: 'application/octet-stream' });
+
+      const result = FileUploadValidator.validateMimeType(file, []);
+      expect(result.isValid).toBe(true);
+    });
+  });
+
+  describe('validateFileName', () => {
+    it('should reject file names with invalid characters', () => {
+      const file = new File(['content'], 'file<script>.txt', { type: 'text/plain' });
+
+      const result = FileUploadValidator.validateFileName(file);
+      expect(result.isValid).toBe(false);
+      expect(result.error).toContain('suspicious characters');
+    });
+
+    it('should reject file names with javascript protocol', () => {
+      const file = new File(['content'], 'javascript:alert(1).txt', { type: 'text/plain' });
+
+      const result = FileUploadValidator.validateFileName(file);
+      expect(result.isValid).toBe(false);
+      expect(result.error).toContain('suspicious');
+    });
+
+    it('should reject file names with event handlers', () => {
+      const file = new File(['content'], 'onerror=alert(1).txt', { type: 'text/plain' });
+
+      const result = FileUploadValidator.validateFileName(file);
+      expect(result.isValid).toBe(false);
+      expect(result.error).toContain('suspicious');
+    });
+
+    it('should reject file names with null bytes', () => {
+      const file = new File(['content'], 'file\0.txt', { type: 'text/plain' });
+
+      const result = FileUploadValidator.validateFileName(file);
+      expect(result.isValid).toBe(false);
+      expect(result.error).toContain('null bytes');
+    });
+
+    it('should reject excessively long file names', () => {
+      const longName = 'a'.repeat(300) + '.txt';
+      const file = new File(['content'], longName, { type: 'text/plain' });
+
+      const result = FileUploadValidator.validateFileName(file);
+      expect(result.isValid).toBe(false);
+      expect(result.error).toContain('too long');
+    });
+
+    it('should accept valid file names', () => {
+      const file = new File(['content'], 'valid-file_name.txt', { type: 'text/plain' });
+
+      const result = FileUploadValidator.validateFileName(file);
+      expect(result.isValid).toBe(true);
+    });
+  });
+
+  describe('validateFile', () => {
+    it('should perform comprehensive validation', () => {
+      const file = new File(['content'], 'image.jpg', { type: 'image/jpeg' });
+      Object.defineProperty(file, 'size', { value: 1024 * 1024 }); // 1MB
+
+      const result = FileUploadValidator.validateFile(file, {
+        maxSizeMB: 50,
+        allowedMimeTypes: ['image/jpeg', 'image/png'],
+        allowedExtensions: ['jpg', 'png']
+      });
+
+      expect(result.isValid).toBe(true);
+    });
+
+    it('should reject file if any validation fails', () => {
+      const file = new File(['content'], 'image.exe', { type: 'image/jpeg' });
+      Object.defineProperty(file, 'size', { value: 1024 * 1024 }); // 1MB
+
+      const result = FileUploadValidator.validateFile(file, {
+        maxSizeMB: 50,
+        allowedMimeTypes: ['image/jpeg'],
+        allowedExtensions: ['jpg', 'png']
+      });
+
+      expect(result.isValid).toBe(false);
+      expect(result.error).toContain('not allowed for security reasons');
+    });
+
+    it('should reject null file', () => {
+      const result = FileUploadValidator.validateFile(null as any);
+      expect(result.isValid).toBe(false);
+      expect(result.error).toContain('No file provided');
+    });
+  });
+
+  describe('validateFiles', () => {
+    it('should validate multiple files', () => {
+      const files = [
+        new File(['content'], 'image1.jpg', { type: 'image/jpeg' }),
+        new File(['content'], 'image2.png', { type: 'image/png' }),
+      ];
+
+      const result = FileUploadValidator.validateFiles(files, {
+        allowedMimeTypes: ['image/jpeg', 'image/png']
+      });
+
+      expect(result.valid.length).toBe(2);
+      expect(result.invalid.length).toBe(0);
+    });
+
+    it('should separate valid and invalid files', () => {
+      const files = [
+        new File(['content'], 'image.jpg', { type: 'image/jpeg' }),
+        new File(['content'], 'script.js', { type: 'application/javascript' }),
+      ];
+
+      const result = FileUploadValidator.validateFiles(files, {
+        allowedMimeTypes: ['image/jpeg', 'image/png']
+      });
+
+      expect(result.valid.length).toBe(1);
+      expect(result.invalid.length).toBe(1);
+      expect(result.invalid[0].file.name).toBe('script.js');
+    });
+  });
+
+  describe('getFileCategory', () => {
+    it('should categorize image files', () => {
+      const file = new File(['content'], 'image.jpg', { type: 'image/jpeg' });
+      expect(FileUploadValidator.getFileCategory(file)).toBe('image');
+    });
+
+    it('should categorize document files', () => {
+      const file = new File(['content'], 'doc.pdf', { type: 'application/pdf' });
+      expect(FileUploadValidator.getFileCategory(file)).toBe('document');
+    });
+
+    it('should categorize archive files', () => {
+      const file = new File(['content'], 'archive.zip', { type: 'application/zip' });
+      expect(FileUploadValidator.getFileCategory(file)).toBe('archive');
+    });
+
+    it('should categorize unknown files as other', () => {
+      const file = new File(['content'], 'unknown.bin', { type: 'application/octet-stream' });
+      expect(FileUploadValidator.getFileCategory(file)).toBe('other');
+    });
+  });
+
+  describe('sanitizeFileName', () => {
+    it('should remove invalid characters', () => {
+      const result = FileUploadValidator.sanitizeFileName('file<script>.txt');
+      expect(result).toBe('file_script_.txt');
+    });
+
+    it('should remove null bytes', () => {
+      const result = FileUploadValidator.sanitizeFileName('file\0.txt');
+      expect(result).toBe('file.txt');
+    });
+
+    it('should truncate long names', () => {
+      const longName = 'a'.repeat(300) + '.txt';
+      const result = FileUploadValidator.sanitizeFileName(longName);
+      expect(result.length).toBe(255);
+    });
+
+    it('should preserve valid names', () => {
+      const result = FileUploadValidator.sanitizeFileName('valid-file_name.txt');
+      expect(result).toBe('valid-file_name.txt');
+    });
+  });
+});
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/validation/__tests__/SecurityLogger.test.ts b/apps/edr-freight-web/backoffice/src/shared/services/validation/__tests__/SecurityLogger.test.ts
new file mode 100644
index 000000000..7a8debdeb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/validation/__tests__/SecurityLogger.test.ts
@@ -0,0 +1,185 @@
+import { SecurityLogger } from '../SecurityLogger';
+import { ValidationLogEntry } from '../types';
+
+describe('SecurityLogger', () => {
+  let logger: SecurityLogger;
+
+  beforeEach(() => {
+    logger = new SecurityLogger();
+  });
+
+  describe('logValidationEvent', () => {
+    it('should log validation success event', async () => {
+      const entry: ValidationLogEntry = {
+        timestamp: new Date(),
+        fileSize: 1024,
+        declaredMime: 'image/png',
+        detectedMime: 'image/png',
+        validationResult: 'success',
+        module: 'record-management',
+        endpoint: '/record-attachments',
+      };
+
+      await logger.logValidationEvent(entry);
+      const logs = logger.getAllLogs();
+
+      expect(logs).toHaveLength(1);
+      expect(logs[0].validationResult).toBe('success');
+      expect(logs[0].declaredMime).toBe('image/png');
+    });
+
+    it('should log validation mismatch event', async () => {
+      const entry: ValidationLogEntry = {
+        timestamp: new Date(),
+        fileSize: 1024,
+        declaredMime: 'image/jpeg',
+        detectedMime: 'image/png',
+        validationResult: 'mismatch',
+        errorDetails: 'MIME type mismatch',
+        module: 'user-management',
+        endpoint: '/theme/upload',
+      };
+
+      await logger.logValidationEvent(entry);
+      const logs = logger.getAllLogs();
+
+      expect(logs).toHaveLength(1);
+      expect(logs[0].validationResult).toBe('mismatch');
+      expect(logs[0].errorDetails).toBe('MIME type mismatch');
+    });
+
+    it('should log validation error event', async () => {
+      const entry: ValidationLogEntry = {
+        timestamp: new Date(),
+        fileSize: 0,
+        declaredMime: 'image/png',
+        validationResult: 'error',
+        errorDetails: 'File buffer is empty',
+        module: 'external-portal',
+        endpoint: '/user-documents',
+      };
+
+      await logger.logValidationEvent(entry);
+      const logs = logger.getAllLogs();
+
+      expect(logs).toHaveLength(1);
+      expect(logs[0].validationResult).toBe('error');
+    });
+
+    it('should set timestamp if not provided', async () => {
+      const entry: ValidationLogEntry = {
+        fileSize: 1024,
+        declaredMime: 'image/png',
+        detectedMime: 'image/png',
+        validationResult: 'success',
+        module: 'record-management',
+        endpoint: '/record-attachments',
+      } as any;
+
+      await logger.logValidationEvent(entry);
+      const logs = logger.getAllLogs();
+
+      expect(logs[0].timestamp).toBeDefined();
+      expect(logs[0].timestamp instanceof Date).toBe(true);
+    });
+  });
+
+  describe('queryValidationLogs', () => {
+    beforeEach(async () => {
+      const now = new Date();
+      const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
+
+      await logger.logValidationEvent({
+        timestamp: now,
+        userId: 'user1',
+        fileSize: 1024,
+        declaredMime: 'image/png',
+        detectedMime: 'image/png',
+        validationResult: 'success',
+        module: 'record-management',
+        endpoint: '/record-attachments',
+      });
+
+      await logger.logValidationEvent({
+        timestamp: now,
+        userId: 'user2',
+        fileSize: 2048,
+        declaredMime: 'image/jpeg',
+        detectedMime: 'image/png',
+        validationResult: 'mismatch',
+        errorDetails: 'MIME mismatch',
+        module: 'user-management',
+        endpoint: '/theme/upload',
+      });
+
+      await logger.logValidationEvent({
+        timestamp: yesterday,
+        userId: 'user1',
+        fileSize: 512,
+        declaredMime: 'application/pdf',
+        validationResult: 'error',
+        errorDetails: 'File buffer is empty',
+        module: 'external-portal',
+        endpoint: '/user-documents',
+      });
+    });
+
+    it('should query logs by module', async () => {
+      const logs = await logger.queryValidationLogs({
+        module: 'record-management',
+      });
+      expect(logs).toHaveLength(1);
+      expect(logs[0].module).toBe('record-management');
+    });
+
+    it('should query logs by validation result', async () => {
+      const logs = await logger.queryValidationLogs({
+        validationResult: 'mismatch',
+      });
+      expect(logs).toHaveLength(1);
+      expect(logs[0].validationResult).toBe('mismatch');
+    });
+
+    it('should query logs by user ID', async () => {
+      const logs = await logger.queryValidationLogs({ userId: 'user1' });
+      expect(logs).toHaveLength(2);
+      expect(logs.every((log) => log.userId === 'user1')).toBe(true);
+    });
+
+    it('should query logs by date range', async () => {
+      const now = new Date();
+      const today = new Date(now.getTime() - 12 * 60 * 60 * 1000);
+
+      const logs = await logger.queryValidationLogs({
+        startDate: today,
+        endDate: now,
+      });
+      expect(logs).toHaveLength(2);
+    });
+
+    it('should return all logs with no filters', async () => {
+      const logs = await logger.queryValidationLogs({});
+      expect(logs).toHaveLength(3);
+    });
+  });
+
+  describe('clearLogs', () => {
+    it('should clear all logs', async () => {
+      await logger.logValidationEvent({
+        timestamp: new Date(),
+        fileSize: 1024,
+        declaredMime: 'image/png',
+        detectedMime: 'image/png',
+        validationResult: 'success',
+        module: 'record-management',
+        endpoint: '/record-attachments',
+      });
+
+      expect(logger.getAllLogs()).toHaveLength(1);
+
+      logger.clearLogs();
+
+      expect(logger.getAllLogs()).toHaveLength(0);
+    });
+  });
+});
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/validation/errorMessages.ts b/apps/edr-freight-web/backoffice/src/shared/services/validation/errorMessages.ts
new file mode 100644
index 000000000..56ec3e087
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/validation/errorMessages.ts
@@ -0,0 +1,107 @@
+/**
+ * Error message templates for XSS validation failures
+ * Provides clear, actionable error messages to users
+ */
+
+export const ValidationErrorMessages = {
+  // File name validation errors
+  fileName: {
+    suspicious: (fileName: string) =>
+      `File name contains suspicious characters or patterns: "${fileName}". Please rename the file to remove special characters like <, >, :, ", /, \\, |, ?, *.`,
+    nullBytes: 'File name contains null bytes. Please rename the file.',
+    tooLong: (length: number) =>
+      `File name is too long (${length} characters). Maximum allowed is 255 characters. Please rename the file.`,
+  },
+
+  // File extension validation errors
+  extension: {
+    dangerous: (ext: string) =>
+      `File extension ${ext} is not allowed for security reasons. This file type could pose a security risk.`,
+    notAllowed: (ext: string, allowed: string[]) =>
+      `File extension ${ext} is not allowed. Allowed types: ${allowed.join(', ')}. Please select a file with one of the allowed extensions.`,
+  },
+
+  // MIME type validation errors
+  mimeType: {
+    notAllowed: (mimeType: string, allowed: string[]) =>
+      `File type ${mimeType} is not allowed. Allowed types: ${allowed.join(', ')}. Please select a file with one of the allowed types.`,
+    mismatch: (declared: string, detected: string) =>
+      `File type verification failed. The file content does not match its declared type (declared: ${declared}, detected: ${detected}). Please ensure the file matches its extension.`,
+    undetectable: 'Unable to detect file type from buffer. The file may be corrupted. Please try uploading a different file.',
+  },
+
+  // File size validation errors
+  size: {
+    tooLarge: (sizeMB: number, maxMB: number) =>
+      `File size (${sizeMB.toFixed(2)}MB) exceeds maximum allowed size (${maxMB}MB). Please select a smaller file.`,
+  },
+
+  // Server-side validation errors
+  server: {
+    mimeTypeMismatch: (declared: string, detected: string) =>
+      `File type verification failed. The file content does not match its declared type. Please ensure the file matches its extension.`,
+    disallowedType: (mimeType: string) =>
+      `File type ${mimeType} is not allowed for this upload context. Please select a file with an allowed type.`,
+    detectionFailed: 'Unable to verify file type. Please try again or contact support.',
+    uploadFailed: 'File upload failed validation. Please try uploading a different file.',
+  },
+
+  // Generic errors
+  generic: {
+    noFile: 'No file provided. Please select a file to upload.',
+    validationFailed: 'File validation failed. Please check the file and try again.',
+    unknown: 'An unexpected error occurred during file validation. Please try again.',
+  },
+};
+
+/**
+ * Get user-friendly error message from validation error
+ * @param error - Error message or validation result
+ * @returns User-friendly error message
+ */
+export function getUserFriendlyErrorMessage(error: string | undefined): string {
+  if (!error) {
+    return ValidationErrorMessages.generic.validationFailed;
+  }
+
+  // Return the error as-is if it's already a user-friendly message
+  // (it will be one of the messages from ValidationErrorMessages)
+  return error;
+}
+
+/**
+ * Get corrective action suggestion based on error type
+ * @param error - Error message
+ * @returns Suggested corrective action
+ */
+export function getCorrectiveAction(error: string | undefined): string {
+  if (!error) {
+    return 'Please check the file and try again.';
+  }
+
+  if (error.includes('suspicious characters')) {
+    return 'Rename the file to remove special characters.';
+  }
+
+  if (error.includes('not allowed')) {
+    return 'Select a file with an allowed type.';
+  }
+
+  if (error.includes('too long')) {
+    return 'Rename the file to make it shorter.';
+  }
+
+  if (error.includes('exceeds maximum')) {
+    return 'Select a smaller file.';
+  }
+
+  if (error.includes('type verification failed')) {
+    return 'Ensure the file matches its extension.';
+  }
+
+  if (error.includes('corrupted')) {
+    return 'Try uploading a different file.';
+  }
+
+  return 'Please try again or contact support.';
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/validation/index.ts b/apps/edr-freight-web/backoffice/src/shared/services/validation/index.ts
new file mode 100644
index 000000000..d6c1fa50c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/validation/index.ts
@@ -0,0 +1,39 @@
+/**
+ * Central validation module for file uploads
+ * Provides centralized buffer content validation and security logging
+ */
+
+export { BufferContentValidator, bufferContentValidator } from './BufferContentValidator';
+export { SecurityLogger, securityLogger } from './SecurityLogger';
+export { ClientSideValidator } from './ClientSideValidator';
+export { FileUploadValidator } from './FileUploadValidator';
+export { XSSUploadValidator } from './XSSUploadValidator';
+export { SVGContentValidator } from './SVGContentValidator';
+export { EmbeddedContentValidator } from './EmbeddedContentValidator';
+export { MagicByteDetector } from './MagicByteDetector';
+export {
+  recordManagementContext,
+  externalPortalContext,
+  incomingRecordContext,
+  outgoingRecordContext,
+  signatureContext,
+  getUploadContext,
+  secureDefaultContext,
+} from './uploadContexts';
+export {
+  ValidationErrorMessages,
+  getUserFriendlyErrorMessage,
+  getCorrectiveAction,
+} from './errorMessages';
+export type {
+  FileTypeDetectionResult,
+  ValidationResult,
+  ValidationLogEntry,
+  UploadValidationOptions,
+  FileValidationState,
+  XSSUploadValidationContext,
+  XSSUploadValidationResult,
+  ClientValidationDetails,
+  ServerValidationDetails,
+  XSSValidationLogEntry,
+} from './types';
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/validation/types.ts b/apps/edr-freight-web/backoffice/src/shared/services/validation/types.ts
new file mode 100644
index 000000000..3fb8983a3
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/validation/types.ts
@@ -0,0 +1,129 @@
+/**
+ * File type detection result from magic byte analysis
+ */
+export interface FileTypeDetectionResult {
+  mime: string;
+  ext: string;
+}
+
+/**
+ * Result of MIME type validation
+ */
+export interface ValidationResult {
+  isValid: boolean;
+  detectedMime: string;
+  declaredMime: string;
+  error?: string;
+}
+
+/**
+ * Validation log entry for security auditing
+ */
+export interface ValidationLogEntry {
+  timestamp: Date;
+  userId?: string;
+  fileSize: number;
+  fileName?: string;
+  declaredMime: string;
+  detectedMime?: string;
+  validationResult: 'success' | 'mismatch' | 'error';
+  errorDetails?: string;
+  module: 'record-management' | 'user-management' | 'external-portal';
+  endpoint: string;
+}
+
+/**
+ * Options for file upload validation
+ */
+export interface UploadValidationOptions {
+  allowedMimeTypes: string[];
+  maxFileSize?: number;
+  logValidationEvents?: boolean;
+}
+
+/**
+ * File validation state for tracking uploads
+ */
+export interface FileValidationState {
+  fileId: string;
+  uploadedAt: Date;
+  declaredMimeType: string;
+  detectedMimeType?: string;
+  validationStatus: 'pending' | 'valid' | 'invalid' | 'error';
+  validationError?: string;
+  userId?: string;
+  module: string;
+}
+
+/**
+ * Context for XSS upload validation
+ */
+export interface XSSUploadValidationContext {
+  allowedMimeTypes?: string[];
+  allowedExtensions?: string[];
+  maxSizeMB?: number;
+  uploadContext: 'record' | 'external-portal' | 'incoming' | 'outgoing' | 'signature';
+}
+
+/**
+ * Client-side validation details
+ */
+export interface ClientValidationDetails {
+  passed: boolean;
+  error?: string;
+  fileName?: {
+    passed: boolean;
+    error?: string;
+  };
+  extension?: {
+    passed: boolean;
+    error?: string;
+  };
+  mimeType?: {
+    passed: boolean;
+    error?: string;
+  };
+  size?: {
+    passed: boolean;
+    error?: string;
+  };
+}
+
+/**
+ * Server-side validation details
+ */
+export interface ServerValidationDetails {
+  passed: boolean;
+  detectedMime: string;
+  declaredMime: string;
+  mimeMatch: boolean;
+  allowedTypeMatch: boolean;
+  error?: string;
+}
+
+/**
+ * Result of XSS upload validation
+ */
+export interface XSSUploadValidationResult {
+  isValid: boolean;
+  clientValidation: ClientValidationDetails;
+  serverValidation?: ServerValidationDetails;
+  sanitizedFileName: string;
+}
+
+/**
+ * XSS validation log entry for security auditing
+ */
+export interface XSSValidationLogEntry {
+  timestamp: Date;
+  userId?: string;
+  fileName: string;
+  sanitizedFileName: string;
+  fileSize: number;
+  declaredMimeType: string;
+  detectedMimeType?: string;
+  validationResult: 'success' | 'client-failed' | 'server-failed' | 'error';
+  failureReason?: string;
+  uploadContext: 'record' | 'external-portal' | 'incoming' | 'outgoing' | 'signature';
+  module: 'record-management' | 'user-management' | 'external-portal';
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/services/validation/uploadContexts.ts b/apps/edr-freight-web/backoffice/src/shared/services/validation/uploadContexts.ts
new file mode 100644
index 000000000..87fad4f6c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/services/validation/uploadContexts.ts
@@ -0,0 +1,272 @@
+import { XSSUploadValidationContext } from "./types";
+
+/**
+ * Upload context definitions for all entry points
+ * Defines allowed MIME types, extensions, and size limits per context
+ */
+
+/**
+ * Record management upload context
+ * For user records and document uploads
+ */
+export const recordManagementContext: XSSUploadValidationContext = {
+  uploadContext: "record",
+  allowedMimeTypes: [
+    "application/pdf",
+    "application/msword",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    "application/vnd.ms-excel",
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    "image/jpeg",
+    "image/jpeg",
+    "image/png",
+    "image/gif",
+    "text/plain",
+    "application/acad",
+    "application/x-autocad",
+    "application/x-dwg",
+    "image/vnd.dwg",
+    "application/dxf",
+    "application/x-dxf",
+    "image/vnd.dxf",
+    "application/x-autocad-dwt",
+    "application/x-autocad-dws",
+    "application/x-esri-map",
+    "application/x-esri-arcgis-pro-project",
+    "application/x-rar-compressed",
+    "application/vnd.rar",
+    "application/zip",
+    "application/octet-stream",
+    "application/x-shapefile",
+    "application/x-dbf",
+    "application/x-cpg",
+    "application/x-shx",
+    "application/x-qmd",
+    "application/vnd.shp",
+    "application/vnd.dbf",
+    "application/vnd.cpg",
+    "application/vnd.shx",
+    "application/vnd.qmd",
+  ],
+  allowedExtensions: [
+    ".pdf",
+    ".doc",
+    ".docx",
+    ".xls",
+    ".xlsx",
+    ".jpg",
+    ".jpeg",
+    ".png",
+    ".gif",
+    ".txt",
+    ".cpg",
+    ".dbf",
+    ".qmd",
+    ".shp",
+    ".shx",
+  ],
+  maxSizeMB: 50,
+};
+
+/**
+ * External portal upload context
+ * For external user document uploads
+ */
+export const externalPortalContext: XSSUploadValidationContext = {
+  uploadContext: "external-portal",
+  allowedMimeTypes: [
+    "application/pdf",
+    "application/msword",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    "image/jpeg",
+    "image/png",
+    "application/acad",
+    "application/x-autocad",
+    "application/x-dwg",
+    "image/vnd.dwg",
+    "application/dxf",
+    "application/x-dxf",
+    "image/vnd.dxf",
+    "application/x-autocad-dwt",
+    "application/x-autocad-dws",
+    "application/x-esri-map",
+    "application/x-esri-arcgis-pro-project",
+    "application/x-rar-compressed",
+    "application/vnd.rar",
+    "application/zip",
+    "application/octet-stream",
+    "application/x-shapefile",
+    "application/x-dbf",
+    "application/x-cpg",
+    "application/x-shx",
+    "application/x-qmd",
+    "application/vnd.shp",
+    "application/vnd.dbf",
+    "application/vnd.cpg",
+    "application/vnd.shx",
+    "application/vnd.qmd",
+  ],
+  allowedExtensions: [
+    ".pdf",
+    ".doc",
+    ".docx",
+    ".jpg",
+    ".jpeg",
+    ".png",
+    ".dwg",
+    ".dxf",
+    ".dwt",
+    ".bak",
+    ".sv$",
+    ".dws",
+    ".mxd",
+    ".aprx",
+    ".rar",
+    ".zip",
+    ".cpg",
+    ".dbf",
+    ".qmd",
+    ".shp",
+    ".shx",
+  ],
+  maxSizeMB: 25,
+};
+
+/**
+ * Incoming record upload context
+ * For incoming record attachments
+ */
+export const incomingRecordContext: XSSUploadValidationContext = {
+  uploadContext: "incoming",
+  allowedMimeTypes: [
+    "application/pdf",
+    "application/msword",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    "image/jpeg",
+    "image/png",
+    "text/plain",
+    "application/acad",
+    "application/x-autocad",
+    "application/x-dwg",
+    "image/vnd.dwg",
+    "application/dxf",
+    "application/x-dxf",
+    "image/vnd.dxf",
+    "application/x-autocad-dwt",
+    "application/x-autocad-dws",
+    "application/x-esri-map",
+    "application/x-esri-arcgis-pro-project",
+    "application/x-rar-compressed",
+    "application/vnd.rar",
+    "application/zip",
+    "application/octet-stream",
+    "application/x-shapefile",
+    "application/x-dbf",
+    "application/x-cpg",
+    "application/x-shx",
+    "application/x-qmd",
+    "application/vnd.shp",
+    "application/vnd.dbf",
+    "application/vnd.cpg",
+    "application/vnd.shx",
+    "application/vnd.qmd",
+  ],
+  allowedExtensions: [".pdf", ".doc", ".docx", ".jpg", ".jpeg", ".png", ".txt", ".cpg", ".dbf", ".qmd", ".shp", ".shx"],
+  maxSizeMB: 50,
+};
+
+/**
+ * Outgoing record upload context
+ * For outgoing record attachments
+ */
+export const outgoingRecordContext: XSSUploadValidationContext = {
+  uploadContext: "outgoing",
+  allowedMimeTypes: [
+    "application/pdf",
+    "application/msword",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    "image/jpeg",
+    "image/png",
+    "text/plain",
+    "application/acad",
+    "application/x-autocad",
+    "application/x-dwg",
+    "image/vnd.dwg",
+    "application/dxf",
+    "application/x-dxf",
+    "image/vnd.dxf",
+    "application/x-autocad-dwt",
+    "application/x-autocad-dws",
+    "application/x-esri-map",
+    "application/x-esri-arcgis-pro-project",
+    "application/x-rar-compressed",
+    "application/vnd.rar",
+    "application/zip",
+    "application/octet-stream",
+    "application/x-shapefile",
+    "application/x-dbf",
+    "application/x-cpg",
+    "application/x-shx",
+    "application/x-qmd",
+    "application/vnd.shp",
+    "application/vnd.dbf",
+    "application/vnd.cpg",
+    "application/vnd.shx",
+    "application/vnd.qmd",
+  ],
+  allowedExtensions: [".pdf", ".doc", ".docx", ".jpg", ".jpeg", ".png", ".txt", ".cpg", ".dbf", ".qmd", ".shp", ".shx"],
+  maxSizeMB: 50,
+};
+
+/**
+ * Signature and seal upload context
+ * For digital signatures and official seals
+ */
+export const signatureContext: XSSUploadValidationContext = {
+  uploadContext: "signature",
+  allowedMimeTypes: ["image/jpeg", "image/png", "image/gif"],
+  allowedExtensions: [".jpg", ".jpeg", ".png", ".gif"],
+  maxSizeMB: 10,
+};
+
+/**
+ * Get upload context by name
+ * @param contextName - Name of the upload context
+ * @returns Upload context configuration
+ */
+export function getUploadContext(
+  contextName:
+    | "record"
+    | "external-portal"
+    | "incoming"
+    | "outgoing"
+    | "signature",
+): XSSUploadValidationContext {
+  const contexts: Record<string, XSSUploadValidationContext> = {
+    record: recordManagementContext,
+    "external-portal": externalPortalContext,
+    incoming: incomingRecordContext,
+    outgoing: outgoingRecordContext,
+    signature: signatureContext,
+  };
+
+  return contexts[contextName] || recordManagementContext;
+}
+
+/**
+ * Get secure default context
+ * Used when no specific context is provided
+ * Blocks dangerous file types by default
+ */
+export const secureDefaultContext: XSSUploadValidationContext = {
+  uploadContext: "record",
+  allowedMimeTypes: [
+    "application/pdf",
+    "image/jpeg",
+    "image/png",
+    "text/plain",
+  ],
+  allowedExtensions: [".pdf", ".jpg", ".jpeg", ".png", ".txt"],
+  maxSizeMB: 500,
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/utils/authPersistence.ts b/apps/edr-freight-web/backoffice/src/shared/utils/authPersistence.ts
new file mode 100644
index 000000000..ff869dc9e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/utils/authPersistence.ts
@@ -0,0 +1,49 @@
+import Cookies from "js-cookie";
+
+type CookieOptions = NonNullable<Parameters<typeof Cookies.set>[2]>;
+
+const REMEMBER_ME_STORAGE_KEY = "rememberMe";
+
+const parseRememberMe = (value: string | null) => {
+  if (!value) return false;
+
+  try {
+    return JSON.parse(value) === true;
+  } catch {
+    return false;
+  }
+};
+
+export const getRememberMePreference = () =>
+  parseRememberMe(localStorage.getItem(REMEMBER_ME_STORAGE_KEY));
+
+export const persistRememberMePreference = (rememberMe: boolean) => {
+  localStorage.setItem(REMEMBER_ME_STORAGE_KEY, JSON.stringify(rememberMe));
+};
+
+export const clearRememberMePreference = () => {
+  localStorage.removeItem(REMEMBER_ME_STORAGE_KEY);
+};
+
+export const getAuthCookieOptions = (
+  rememberMe: boolean,
+): CookieOptions => ({
+  ...(rememberMe ? { expires: 7 } : {}),
+  secure: window.location.protocol === "https:",
+  sameSite: "Strict",
+});
+
+export const setAuthCookies = ({
+  token,
+  refreshToken,
+  rememberMe,
+}: {
+  token: string;
+  refreshToken: string;
+  rememberMe: boolean;
+}) => {
+  const cookieOptions = getAuthCookieOptions(rememberMe);
+
+  Cookies.set("auth-token", token, cookieOptions);
+  Cookies.set("refresh-token", refreshToken, cookieOptions);
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/utils/chartExportUtils.ts b/apps/edr-freight-web/backoffice/src/shared/utils/chartExportUtils.ts
new file mode 100644
index 000000000..6e586b481
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/utils/chartExportUtils.ts
@@ -0,0 +1,172 @@
+/**
+ * Shared utilities for exporting dashboard/report charts via html2canvas.
+ *
+ * Problem: html2canvas serializes SVG elements to a data URL before drawing
+ * them on canvas. Inside that data URL the parent document's CSS is not
+ * available, so `fill="var(--primary)"` renders as nothing / black.
+ * Additionally, html2canvas's internal CSS parser cannot handle oklch() color
+ * values used by Tailwind v4.
+ *
+ * Solution:
+ * 1. Patch oklch() in <style> tags and inject :root overrides so html2canvas's
+ *    CSS parser sees rgb() values everywhere.
+ * 2. Resolve CSS variable references in SVG presentation attributes
+ *    (fill, stroke, stop-color) to their computed rgb() values before capture,
+ *    then restore them afterward.
+ */
+
+// ── Oklch → RGB conversion ────────────────────────────────────────────────────
+
+export function oklchToRgb(l: number, c: number, h: number): [number, number, number] {
+  const hr = (h * Math.PI) / 180;
+  const a = c * Math.cos(hr);
+  const b = c * Math.sin(hr);
+  const l_ = l + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = l - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = l - 0.0894841775 * a - 1.2914855480 * b;
+  const lc = l_ ** 3, mc = m_ ** 3, sc = s_ ** 3;
+  const gam = (x: number) =>
+    x <= 0.0031308 ? 12.92 * x : 1.055 * x ** (1 / 2.4) - 0.055;
+  const clamp = (x: number) => Math.max(0, Math.min(255, Math.round(x * 255)));
+  return [
+    clamp(gam(+4.0767416621 * lc - 3.3077115913 * mc + 0.2309699292 * sc)),
+    clamp(gam(-1.2684380046 * lc + 2.6097574011 * mc - 0.3413193965 * sc)),
+    clamp(gam(-0.0041960863 * lc - 0.7034186147 * mc + 1.7076147010 * sc)),
+  ];
+}
+
+export const OKLCH_RE = /oklch\(\s*([\d.]+%?)\s+([\d.]+)\s+([\d.]+)[^)]*\)/g;
+
+export function oklchMatchToRgb(_: string, l: string, c: string, h: string): string {
+  const lv = l.endsWith("%") ? parseFloat(l) / 100 : parseFloat(l);
+  const [r, g, b] = oklchToRgb(lv, parseFloat(c), parseFloat(h));
+  return `rgb(${r},${g},${b})`;
+}
+
+// ── CSS oklch patching ────────────────────────────────────────────────────────
+
+function collectOklchOverrides(
+  rules: CSSRuleList,
+  overrides: Map<string, string>,
+): void {
+  for (const rule of Array.from(rules)) {
+    if (rule instanceof CSSStyleRule) {
+      for (let i = 0; i < rule.style.length; i++) {
+        const prop = rule.style[i];
+        const val = rule.style.getPropertyValue(prop).trim();
+        if (!val.includes("oklch") || overrides.has(prop)) continue;
+        const m = val.match(/oklch\(\s*([\d.]+%?)\s+([\d.]+)\s+([\d.]+)/);
+        if (m) {
+          const lv = m[1].endsWith("%") ? parseFloat(m[1]) / 100 : parseFloat(m[1]);
+          const [r, g, b] = oklchToRgb(lv, parseFloat(m[2]), parseFloat(m[3]));
+          overrides.set(prop, `rgb(${r},${g},${b})`);
+        }
+      }
+    }
+    if ("cssRules" in rule && (rule as CSSGroupingRule).cssRules) {
+      collectOklchOverrides((rule as CSSGroupingRule).cssRules, overrides);
+    }
+  }
+}
+
+/**
+ * Patches oklch() values in inline <style> tags and injects a :root override
+ * block for external stylesheets so html2canvas's CSS parser sees only rgb().
+ * Returns a `restore()` function that undoes all patches.
+ */
+export function patchDocumentOklch(): { restore: () => void } {
+  const patched = new Map<HTMLStyleElement, string>();
+  for (const el of Array.from(document.querySelectorAll("style"))) {
+    const s = el as HTMLStyleElement;
+    if (s.textContent?.includes("oklch")) {
+      patched.set(s, s.textContent);
+      s.textContent = s.textContent.replace(OKLCH_RE, oklchMatchToRgb);
+    }
+  }
+
+  const overrideVars = new Map<string, string>();
+  for (const sheet of Array.from(document.styleSheets)) {
+    try { collectOklchOverrides(sheet.cssRules, overrideVars); } catch {}
+  }
+
+  let varOverride: HTMLStyleElement | null = null;
+  if (overrideVars.size > 0) {
+    varOverride = document.createElement("style");
+    varOverride.textContent = `:root { ${
+      Array.from(overrideVars.entries())
+        .map(([p, v]) => `${p}: ${v}`)
+        .join("; ")
+    } }`;
+    document.head.appendChild(varOverride);
+  }
+
+  return {
+    restore() {
+      for (const [s, orig] of patched.entries()) s.textContent = orig;
+      varOverride?.remove();
+    },
+  };
+}
+
+// ── SVG presentation attribute inlining ──────────────────────────────────────
+
+const SVG_PRES_ATTRS = ["fill", "stroke", "stop-color"] as const;
+
+/**
+ * Walks every SVG descendant of `root` and replaces any presentation attribute
+ * that contains a CSS variable (`var(…)`) with its computed rgb() value.
+ *
+ * This must be called AFTER patchDocumentOklch() so that getComputedStyle
+ * already returns rgb values rather than oklch.
+ *
+ * Returns a `restore()` function that reverts all attribute changes.
+ * For off-screen clones that are discarded after capture, calling restore()
+ * is optional.
+ */
+export function inlineSvgPresentationAttrs(
+  root: Element,
+): { restore: () => void } {
+  const patches: Array<{ el: SVGElement; attr: string; orig: string }> = [];
+
+  for (const node of Array.from(root.querySelectorAll("*"))) {
+    if (!(node instanceof SVGElement)) continue;
+    const cs = window.getComputedStyle(node);
+    for (const attr of SVG_PRES_ATTRS) {
+      const val = node.getAttribute(attr);
+      if (!val || !val.includes("var(")) continue;
+      const resolved = cs.getPropertyValue(attr).trim().replace(OKLCH_RE, oklchMatchToRgb);
+      if (!resolved || resolved === val) continue;
+      patches.push({ el: node, attr, orig: val });
+      node.setAttribute(attr, resolved);
+    }
+  }
+
+  return {
+    restore() {
+      for (const { el, attr, orig } of patches) el.setAttribute(attr, orig);
+    },
+  };
+}
+
+/**
+ * Convenience wrapper that runs the full pre-capture patch sequence on a DOM
+ * element:
+ *   1. patchDocumentOklch  – fixes oklch in <style>/<link> CSS
+ *   2. inlineSvgPresentationAttrs – resolves var() in SVG fill/stroke attrs
+ *
+ * Returns a single `restore()` that undoes both steps in reverse order.
+ *
+ * Usage:
+ *   const patch = prepareForHtml2Canvas(element);
+ *   try { await html2canvas(element, …); } finally { patch.restore(); }
+ */
+export function prepareForHtml2Canvas(root: Element): { restore: () => void } {
+  const oklch = patchDocumentOklch();
+  const svg = inlineSvgPresentationAttrs(root);
+  return {
+    restore() {
+      svg.restore();
+      oklch.restore();
+    },
+  };
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/utils/columnVisibilityStorage.ts b/apps/edr-freight-web/backoffice/src/shared/utils/columnVisibilityStorage.ts
new file mode 100644
index 000000000..4d0d0a5b5
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/utils/columnVisibilityStorage.ts
@@ -0,0 +1,32 @@
+import { VisibilityState } from "@tanstack/react-table";
+
+const STORAGE_KEY_PREFIX = "table-column-visibility:";
+
+const getStorageKey = (tableName: string) =>
+  `${STORAGE_KEY_PREFIX}${tableName}`;
+
+/**
+ * Reads/writes column visibility per table. Backed by localStorage for now;
+ * swap the implementations here for backend calls later without touching callers.
+ */
+export const getColumnVisibility = (
+  tableName: string,
+): VisibilityState | null => {
+  try {
+    const raw = localStorage.getItem(getStorageKey(tableName));
+    return raw ? (JSON.parse(raw) as VisibilityState) : null;
+  } catch {
+    return null;
+  }
+};
+
+export const setColumnVisibility = (
+  tableName: string,
+  visibility: VisibilityState,
+): void => {
+  try {
+    localStorage.setItem(getStorageKey(tableName), JSON.stringify(visibility));
+  } catch {
+    // ignore write errors (e.g. storage unavailable)
+  }
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/utils/faydaAuthSession.ts b/apps/edr-freight-web/backoffice/src/shared/utils/faydaAuthSession.ts
new file mode 100644
index 000000000..8200f6aba
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/utils/faydaAuthSession.ts
@@ -0,0 +1,148 @@
+import Cookies from "js-cookie";
+import { MeDto } from "@/shared/dto/user/meDto";
+import {
+  getProfile,
+  RegisterWithFaydaResponse,
+} from "@/shared/services/authService";
+import {
+  getAuthCookieOptions,
+  setAuthCookies,
+} from "@/shared/utils/authPersistence";
+import type { VerifiedCitizen } from "@/complaints/types/complaint.types";
+
+function unwrapApiData<T>(payload: T | { data?: T }): T {
+  if (
+    payload &&
+    typeof payload === "object" &&
+    "data" in payload &&
+    payload.data &&
+    typeof payload.data === "object"
+  ) {
+    return payload.data;
+  }
+
+  return payload as T;
+}
+
+function resolveLocalizedName(
+  name: string | { am?: string; en?: string } | undefined,
+  preferredLanguage = "en",
+): string {
+  if (!name) return "";
+  if (typeof name === "string") return name.trim();
+  if (preferredLanguage === "am") {
+    return (name.am || name.en || "").trim();
+  }
+  return (name.en || name.am || "").trim();
+}
+
+function resolveProfileDisplayName(
+  profile: MeDto | null | undefined,
+  preferredLanguage = "en",
+): string {
+  if (!profile) return "";
+
+  const extendedProfile = profile as MeDto & {
+    fullName?: string;
+    firstName?: string;
+    lastName?: string;
+    faydaId?: string;
+  };
+
+  const localizedName = resolveLocalizedName(profile.name, preferredLanguage);
+  if (localizedName) return localizedName;
+
+  const combinedName = [extendedProfile.firstName, extendedProfile.lastName]
+    .filter(Boolean)
+    .join(" ")
+    .trim();
+  if (combinedName) return combinedName;
+
+  if (extendedProfile.fullName?.trim()) {
+    return extendedProfile.fullName.trim();
+  }
+
+  if (profile.username?.trim()) return profile.username.trim();
+  if (profile.email?.trim()) return profile.email.trim();
+  if (profile.phoneNumber?.trim()) return profile.phoneNumber.trim();
+
+  return "";
+}
+
+export function mapRegisterWithFaydaCitizen(
+  data: RegisterWithFaydaResponse,
+  preferredLanguage = "en",
+  profile?: MeDto | null,
+): VerifiedCitizen {
+  const fullName =
+    String(
+      data.citizen?.fullName ??
+        data.fullName ??
+        data.user?.fullName ??
+        resolveLocalizedName(data.user?.name, preferredLanguage) ??
+        resolveProfileDisplayName(profile, preferredLanguage) ??
+        "",
+    ).trim();
+
+  const faydaId = String(
+    data.citizen?.faydaId ??
+      data.faydaId ??
+      data.user?.faydaId ??
+      (profile as { faydaId?: string } | undefined)?.faydaId ??
+      profile?.username ??
+      "",
+  )
+    .trim()
+    .replace(/\s+/g, "");
+
+  return { fullName, faydaId };
+}
+
+export async function persistFaydaRegistrationAuth(
+  data: RegisterWithFaydaResponse,
+): Promise<MeDto | null> {
+  const token = data.token?.trim();
+  const refreshToken = data.refreshToken?.trim();
+
+  if (!token) {
+    return null;
+  }
+
+  const cookieOptions = getAuthCookieOptions(false);
+  setAuthCookies({
+    token,
+    refreshToken: refreshToken ?? "",
+    rememberMe: false,
+  });
+
+  try {
+    const { data: profile } = await getProfile({
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+    const userDetails = unwrapApiData(profile as MeDto | { data?: MeDto });
+
+    Cookies.set(
+      "auth-user",
+      JSON.stringify({
+        ...userDetails,
+        id: userDetails.id,
+        name: userDetails.name,
+        permissions: userDetails.permissions,
+        roles: userDetails.roles,
+      }),
+      cookieOptions,
+    );
+
+    const firstPositionId =
+      userDetails.employee?.[0]?.positions?.[0]?.employeePositionId;
+    if (firstPositionId) {
+      Cookies.set("current-position-id", firstPositionId, cookieOptions);
+    }
+
+    return userDetails;
+  } catch {
+    return null;
+  }
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/utils/faydaOidc.ts b/apps/edr-freight-web/backoffice/src/shared/utils/faydaOidc.ts
new file mode 100644
index 000000000..3f4693b2b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/utils/faydaOidc.ts
@@ -0,0 +1,125 @@
+export interface FaydaOidcOptions {
+  redirectUri?: string;
+  state?: string;
+  nonce?: string;
+}
+
+/** PKCE code_verifier matching DEFAULT_CODE_CHALLENGE (S256). */
+export const FAYDA_CODE_VERIFIER =
+  "dBjftJeZ4CVP-mB92K27uhbUJU1p1r_wW1gFWFOEjXk";
+
+const DEFAULT_CODE_CHALLENGE = "E9Melhoa2OwvFrEMTJguCHaoeK1t8URWbuGJSstw-cM";
+const DEFAULT_NONCE = "g4DEuje5Fx57Vb64dO4oqLHXGT8L8G7g";
+const DEFAULT_STATE = "ptOO76SD";
+
+/** OIDC state value that routes the shared /callback to the complaint flow (legacy sign-in). */
+export const COMPLAINT_FLOW_STATE = "complaint_flow";
+
+/** Complaint flow OIDC states — distinguish sign-in vs sign-up endpoints. */
+export const COMPLAINT_SIGNIN_STATE = "complaint_signin";
+export const COMPLAINT_SIGNUP_STATE = "complaint_signup";
+
+export function isComplaintFaydaState(state: string | null): boolean {
+  return (
+    state === COMPLAINT_FLOW_STATE ||
+    state === COMPLAINT_SIGNIN_STATE ||
+    state === COMPLAINT_SIGNUP_STATE
+  );
+}
+
+export function resolveComplaintAuthMode(
+  state: string | null,
+): "signin" | "signup" {
+  if (state === COMPLAINT_SIGNUP_STATE) {
+    return "signup";
+  }
+  return "signin";
+}
+
+/** OIDC state for unified external-portal Fayda auth (sign-in or sign-up). */
+export const EXTERNAL_PORTAL_CONTINUE_STATE = "external_continue";
+
+/** @deprecated Legacy sign-in state — still accepted on callback. */
+export const EXTERNAL_PORTAL_SIGNIN_STATE = "external_signin";
+/** @deprecated Legacy sign-up state — still accepted on callback. */
+export const EXTERNAL_PORTAL_SIGNUP_STATE = "external_signup";
+
+export function isExternalPortalFaydaState(state: string | null): boolean {
+  return (
+    state === EXTERNAL_PORTAL_CONTINUE_STATE ||
+    state === EXTERNAL_PORTAL_SIGNIN_STATE ||
+    state === EXTERNAL_PORTAL_SIGNUP_STATE
+  );
+}
+
+export function startExternalPortalFaydaAuth(): void {
+  const authUrl = generateFaydaAuthorizationUrl({
+    state: EXTERNAL_PORTAL_CONTINUE_STATE,
+  });
+  window.location.href = authUrl;
+}
+
+/**
+ * Builds the FAYDA/MOSIP OIDC authorization URL.
+ * Shared by external-portal registration and anonymous complaint flows.
+ */
+export function generateFaydaAuthorizationUrl(
+  options: FaydaOidcOptions = {},
+): string {
+  const redirectUri =
+    options.redirectUri ||
+    getDefaultFaydaRedirectUri();
+
+  const params = new URLSearchParams({
+    client_id: import.meta.env.VITE_CLIENT_ID || "",
+    redirect_uri: redirectUri,
+    response_type: "code",
+    scope: "openid profile email",
+    acr_values:
+      "mosip:idp:acr:generated-code mosip:idp:acr:linked-wallet mosip:idp:acr:biometrics",
+    claims:
+      '{"userinfo":{"individual_id":{"essential":true},"name":{"essential":true},"phone_number":{"essential":true},"email":{"essential":true},"picture":{"essential":true},"gender":{"essential":true},"birthdate":{"essential":true},"address":{"essential":true}},"id_token":{}}',
+    claims_locales: "en am",
+    code_challenge: DEFAULT_CODE_CHALLENGE,
+    code_challenge_method: "S256",
+    display: "page",
+    nonce: options.nonce || DEFAULT_NONCE,
+    state: options.state || DEFAULT_STATE,
+    ui_locales: "en am",
+  });
+
+  const endpoint = import.meta.env.VITE_AUTHORIZATION_ENDPOINT || "";
+  return `${endpoint}?${params.toString()}`;
+}
+
+/**
+ * Returns the default redirect URI registered with FAYDA (external portal flow).
+ */
+export function getDefaultFaydaRedirectUri(): string {
+  return (
+    import.meta.env.VITE_REDIRECT_URI ||
+    `${window.location.origin}/callback`
+  );
+}
+
+/**
+ * Returns the redirect URI registered with FAYDA for the complaint flow.
+ *
+ * Must exactly match a URI whitelisted in the FAYDA OIDC client — we reuse
+ * the same /callback path as external-portal registration and distinguish
+ * flows via the `state` parameter (see COMPLAINT_FLOW_STATE).
+ */
+export function getComplaintFaydaRedirectUri(): string {
+  return (
+    import.meta.env.VITE_COMPLAINT_REDIRECT_URI ||
+    getDefaultFaydaRedirectUri()
+  );
+}
+
+export function startComplaintFaydaAuth(): void {
+  const authUrl = generateFaydaAuthorizationUrl({
+    redirectUri: getComplaintFaydaRedirectUri(),
+    state: COMPLAINT_FLOW_STATE,
+  });
+  window.location.href = authUrl;
+}
diff --git a/apps/edr-freight-web/backoffice/src/shared/utils/filterParams.ts b/apps/edr-freight-web/backoffice/src/shared/utils/filterParams.ts
new file mode 100644
index 000000000..b7a6bf7d5
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/utils/filterParams.ts
@@ -0,0 +1,11 @@
+export type FilterValue = string | number | boolean | string[] | undefined | null;
+export type FilterParams = Record<string, FilterValue>;
+
+export const cleanFilterParams = <T extends object>(params: T): Partial<T> =>
+  Object.fromEntries(
+    Object.entries(params).filter(([, value]) => {
+      if (value === null || value === undefined || value === "") return false;
+      if (Array.isArray(value) && value.length === 0) return false;
+      return true;
+    }),
+  ) as Partial<T>;
diff --git a/apps/edr-freight-web/backoffice/src/shared/utils/get-final-allowed-file-types.ts b/apps/edr-freight-web/backoffice/src/shared/utils/get-final-allowed-file-types.ts
new file mode 100644
index 000000000..249abc156
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/utils/get-final-allowed-file-types.ts
@@ -0,0 +1,86 @@
+// src/shared/utils/get-final-allowed-file-types.ts
+const extensionToMimeTypes: Record<string, string[]> = {
+  png: ["image/png"],
+  jpg: ["image/jpeg"],
+  jpeg: ["image/jpeg"],
+  gif: ["image/gif"],
+  pdf: ["application/pdf"],
+  dwg: ["application/acad", "application/x-autocad", "application/x-dwg", "image/vnd.dwg"],
+  dxf: ["application/dxf", "application/x-dxf", "image/vnd.dxf"],
+  dwt: ["application/x-autocad-dwt", "application/x-autocad"],
+  bak: ["application/octet-stream"],
+  "sv$": ["application/octet-stream"],
+  dws: ["application/x-autocad-dws", "application/x-autocad"],
+  mxd: ["application/x-esri-map", "application/octet-stream"],
+  aprx: ["application/x-esri-arcgis-pro-project", "application/octet-stream"],
+  rar: ["application/x-rar-compressed", "application/vnd.rar"],
+  zip: ["application/zip"],
+};
+
+const mimeToExtensions: Record<string, string[]> = Object.entries(
+  extensionToMimeTypes
+).reduce((acc, [ext, mimes]) => {
+  for (const mime of mimes) {
+    if (!acc[mime]) acc[mime] = [];
+    acc[mime].push(`.${ext}`);
+  }
+  return acc;
+}, {} as Record<string, string[]>);
+
+const normalizeToken = (token: string) => token.trim().toLowerCase();
+
+export const getAllowedMimeTypesFromAccept = (
+  accept: string[] | null | undefined
+): string[] => {
+  if (!accept || accept.length === 0) return [];
+
+  const mimeSet = new Set<string>();
+
+  for (const rawToken of accept) {
+    const token = normalizeToken(rawToken);
+    if (!token) continue;
+
+    if (token.includes("/")) {
+      mimeSet.add(token);
+      continue;
+    }
+
+    const extension = token.startsWith(".") ? token.slice(1) : token;
+    (extensionToMimeTypes[extension] || []).forEach((mime) => mimeSet.add(mime));
+  }
+
+  return Array.from(mimeSet);
+};
+
+export const getAllowedExtensionsFromAccept = (
+  accept: string[] | null | undefined
+): string[] => {
+  if (!accept || accept.length === 0) return [];
+
+  const extensionSet = new Set<string>();
+
+  for (const rawToken of accept) {
+    const token = normalizeToken(rawToken);
+    if (!token) continue;
+
+    if (token.includes("/")) {
+      (mimeToExtensions[token] || []).forEach((ext) => extensionSet.add(ext));
+      continue;
+    }
+
+    const normalizedExtension = token.startsWith(".") ? token : `.${token}`;
+    extensionSet.add(normalizedExtension);
+  }
+
+  return Array.from(extensionSet);
+};
+
+export const getFinalAllowedFileTypes = (
+  accept: string[] | null | undefined
+): string => {
+  if (!accept || accept.length === 0) return "";
+
+  const result = accept.map((token) => normalizeToken(token)).join(",");
+
+  return result;
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/utils/habeshaCalendar.ts b/apps/edr-freight-web/backoffice/src/shared/utils/habeshaCalendar.ts
new file mode 100644
index 000000000..7a5f57ac0
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/utils/habeshaCalendar.ts
@@ -0,0 +1,263 @@
+import { EthDateTime } from "ethiopian-calendar-date-converter";
+
+export interface HabeshaDate {
+  year: number;
+  month: number;
+  day: number;
+  monthName: string;
+  dayName: string;
+  formatted: string;
+}
+
+export class HabeshaCalendarUtils {
+  // Ethiopian month names in Amharic
+  static readonly MONTH_NAMES_AM = [
+    "መስከረም",
+    "ጥቅምት",
+    "ኅዳር",
+    "ታኅሣሥ",
+    "ጥር",
+    "የካቲት",
+    "መጋቢት",
+    "ሚያዝያ",
+    "ግንቦት",
+    "ሰኔ",
+    "ሐምሌ",
+    "ነሃሴ",
+    "ጳጉሜ",
+  ];
+
+  // Ethiopian month names in English
+  static readonly MONTH_NAMES_EN = [
+    "Meskerem",
+    "Tikimt",
+    "Hidar",
+    "Tahsas",
+    "Tir",
+    "Yekatit",
+    "Megabit",
+    "Miazia",
+    "Ginbot",
+    "Sene",
+    "Hamle",
+    "Nehase",
+    "Pagume",
+  ];
+
+  // Day names in Amharic
+  static readonly DAY_NAMES_AM = [
+    "እሁድ",
+    "ሰኞ",
+    "ማክሰኞ",
+    "ረቡዕ",
+    "ሐሙስ",
+    "ዓርብ",
+    "ቅዳሜ",
+  ];
+
+  // Day names in English
+  static readonly DAY_NAMES_EN = [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ];
+
+  /**
+   * Convert Gregorian date to Habesha date
+   */
+  static gregorianToHabesha(
+    gregorianDate: Date | string | null | undefined
+  ): HabeshaDate {
+    // Handle null/undefined cases
+    if (!gregorianDate) {
+      gregorianDate = new Date();
+    }
+
+    // Convert string to Date if needed
+    if (typeof gregorianDate === "string") {
+      gregorianDate = new Date(gregorianDate);
+    }
+
+    // Validate that we have a valid Date object
+    if (!(gregorianDate instanceof Date) || isNaN(gregorianDate.getTime())) {
+      gregorianDate = new Date();
+    }
+
+    const ethDateTime = EthDateTime.fromEuropeanDate(gregorianDate);
+    const dayOfWeek = gregorianDate.getDay();
+
+    return {
+      year: ethDateTime.year,
+      month: ethDateTime.month,
+      day: ethDateTime.date,
+      monthName: this.MONTH_NAMES_AM[ethDateTime.month - 1],
+      dayName: this.DAY_NAMES_AM[dayOfWeek],
+      formatted: this.formatHabeshaDate(ethDateTime, dayOfWeek),
+    };
+  }
+
+  /**
+   * Convert Habesha date to Gregorian date
+   */
+  static habeshaToGregorian(year: number, month: number, day: number): Date {
+    const ethDateTime = new EthDateTime(year, month, day);
+    return ethDateTime.toEuropeanDate();
+  }
+
+  /**
+   * Format Habesha date as string
+   */
+  static formatHabeshaDate(
+    ethDateTime: { year: number; month: number; date: number },
+    dayOfWeek: number,
+    includeDay: boolean = true
+  ): string {
+    const dayName = includeDay ? `${this.DAY_NAMES_AM[dayOfWeek]} ` : "";
+    const monthName = this.MONTH_NAMES_AM[ethDateTime.month - 1];
+
+    return `${dayName}${monthName} ${ethDateTime.date}, ${ethDateTime.year}`;
+  }
+
+  /**
+   * Get current Habesha date
+   */
+  static getCurrentHabeshaDate(): HabeshaDate {
+    return this.gregorianToHabesha(new Date());
+  }
+
+  /**
+   * Generate year options for dropdowns (Habesha years)
+   */
+  static generateHabeshaYearOptions(
+    yearsBack: number = 5,
+    yearsAhead: number = 5
+  ): Array<{ label: string; value: string }> {
+    const currentHabesha = this.getCurrentHabeshaDate();
+    const startYear = currentHabesha.year - yearsBack;
+    const endYear = currentHabesha.year + yearsAhead;
+
+    const years = [];
+    for (let year = startYear; year <= endYear; year++) {
+      years.push({
+        label: year.toString(),
+        value: year.toString(),
+      });
+    }
+
+    return years.reverse(); // Most recent first
+  }
+
+  /**
+   * Generate month options for dropdowns
+   */
+  static getMonthOptions(
+    language: "am" | "en" = "am"
+  ): Array<{ label: string; value: string }> {
+    const monthNames =
+      language === "am" ? this.MONTH_NAMES_AM : this.MONTH_NAMES_EN;
+
+    return monthNames.map((name, index) => ({
+      label: name,
+      value: (index + 1).toString(),
+    }));
+  }
+
+  /**
+   * Get days in a Habesha month
+   */
+  static getDaysInHabeshaMonth(year: number, month: number): number {
+    // Most months have 30 days, Pagume (13th month) has 5 or 6 days
+    if (month === 13) {
+      // Leap year calculation for Ethiopian calendar
+      return this.isHabeshaLeapYear(year) ? 6 : 5;
+    }
+    return 30;
+  }
+
+  /**
+   * Check if a Habesha year is a leap year
+   */
+  static isHabeshaLeapYear(year: number): boolean {
+    // Ethiopian leap year calculation
+    return year % 4 === 3;
+  }
+
+  /**
+   * Parse date string in various formats to Habesha date
+   */
+  static parseHabeshaDate(dateString: string): HabeshaDate | null {
+    try {
+      // Try to parse as ISO string first, then convert
+      const gregorianDate = new Date(dateString);
+      if (!isNaN(gregorianDate.getTime())) {
+        return this.gregorianToHabesha(gregorianDate);
+      }
+      return null;
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * Format date for display in forms
+   */
+  static formatForDisplay(
+    date: Date | string | null | undefined,
+    language: "am" | "en" = "am"
+  ): string {
+    // Handle null/undefined cases
+    if (!date) {
+      date = new Date();
+    }
+
+    // Convert string to Date if needed
+    let gregorianDate: Date;
+    if (typeof date === "string") {
+      gregorianDate = new Date(date);
+    } else {
+      gregorianDate = date;
+    }
+
+    // Validate that we have a valid Date object
+    if (!(gregorianDate instanceof Date) || isNaN(gregorianDate.getTime())) {
+      gregorianDate = new Date();
+    }
+
+    const habeshaDate = this.gregorianToHabesha(gregorianDate);
+
+    if (language === "en") {
+      const monthName = this.MONTH_NAMES_EN[habeshaDate.month - 1];
+      const dayName = this.DAY_NAMES_EN[gregorianDate.getDay()];
+      return `${dayName} ${monthName} ${habeshaDate.day}, ${habeshaDate.year}`;
+    }
+
+    return habeshaDate.formatted;
+  }
+
+  /**
+   * Get date range in Habesha calendar
+   */
+  static getHabeshaDateRange(
+    startDate: Date,
+    endDate: Date
+  ): {
+    start: HabeshaDate;
+    end: HabeshaDate;
+    formatted: string;
+  } {
+    const start = this.gregorianToHabesha(startDate);
+    const end = this.gregorianToHabesha(endDate);
+
+    return {
+      start,
+      end,
+      formatted: `${start.formatted} - ${end.formatted}`,
+    };
+  }
+}
+
+export default HabeshaCalendarUtils;
diff --git a/apps/edr-freight-web/backoffice/src/shared/utils/max-file-size.ts b/apps/edr-freight-web/backoffice/src/shared/utils/max-file-size.ts
new file mode 100644
index 000000000..f98f30248
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/utils/max-file-size.ts
@@ -0,0 +1,4 @@
+// src/shared/constants/max-file-size.ts
+
+// Default max file size in MB if not specified elsewhere
+export const MAX_FILE_SIZE_MB = 500; // 10 MB
diff --git a/apps/edr-freight-web/backoffice/src/shared/utils/permissionHelper.ts b/apps/edr-freight-web/backoffice/src/shared/utils/permissionHelper.ts
new file mode 100644
index 000000000..775791bdf
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/utils/permissionHelper.ts
@@ -0,0 +1,15 @@
+import { NavOptions } from "../navigation/navigationtabs";
+
+export const hasAccess = (
+  item: NavOptions,
+  userPermissions: string[],
+  userRoles: string[]
+): boolean => {
+  const permsCheck =
+    item.perms?.some((perm) => userPermissions.includes(perm)) ?? true;
+
+  const rolesCheck =
+    item.roles?.some((role) => userRoles.includes(role)) ?? true;
+
+  return permsCheck || rolesCheck;
+};
diff --git a/apps/edr-freight-web/backoffice/src/shared/utils/refreshTokenHandler.ts b/apps/edr-freight-web/backoffice/src/shared/utils/refreshTokenHandler.ts
new file mode 100644
index 000000000..4c1c38159
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/shared/utils/refreshTokenHandler.ts
@@ -0,0 +1,7 @@
+import { refreshAuthToken } from "../services/authService";
+
+export const getRefreshToken = async (refreshToken: string) => {
+  return await refreshAuthToken({
+    refreshToken: refreshToken,
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/app/store.ts b/apps/edr-freight-web/backoffice/src/super-admin/app/store.ts
new file mode 100644
index 000000000..e368ab126
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/app/store.ts
@@ -0,0 +1,11 @@
+import { configureStore } from "@reduxjs/toolkit";
+import dashboardReducer from "../components/dashboard/dashboardSlice";
+
+export const store = configureStore({
+  reducer: {
+    dashboard: dashboardReducer,
+  },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/assets/react.svg b/apps/edr-freight-web/backoffice/src/super-admin/assets/react.svg
new file mode 100644
index 000000000..6c87de9bb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/components/ActivityTimeline.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/components/ActivityTimeline.tsx
new file mode 100644
index 000000000..d080049c9
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/components/ActivityTimeline.tsx
@@ -0,0 +1,44 @@
+import { Activity } from "@/super-admin/hooks/useDashboardData";
+import { formatDistanceToNow } from "date-fns";
+import { t } from "i18next";
+
+interface ActivityTimelineProps {
+  activities: Activity[];
+}
+
+export const ActivityTimeline = ({ activities }: ActivityTimelineProps) => {
+  if (!activities || activities.length === 0) {
+    return (
+      <div className="text-sm text-muted-foreground text-center py-4">
+        {t("organization.noRecentActivities")}
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative pl-6">
+      <div className="absolute left-2 top-2 bottom-2 w-0.5 bg-purple-500" />
+      <ul className="space-y-6">
+        {activities.map((activity) => (
+          <li key={activity.id} className="relative pl-4">
+            <div className="absolute left-0 top-1 w-3 h-3 bg-purple-500 rounded-full" />
+            <div className="text-xs text-muted-foreground">
+              {formatDistanceToNow(new Date(activity.timestamp), {
+                addSuffix: true,
+              })}
+            </div>
+            <div className="text-sm font-medium text-gray-900 dark:text-gray-100">
+              {activity.description}
+            </div>
+            <div className="text-xs">
+              By{" "}
+              <span className="font-medium text-purple-600">
+                {activity.user}
+              </span>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/components/HeaderBar.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/components/HeaderBar.tsx
new file mode 100644
index 000000000..a46d80c36
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/components/HeaderBar.tsx
@@ -0,0 +1,15 @@
+import { useTenantConfig } from "@/layout/components/TenantConfig";
+
+export const HeaderBar = () => {
+  const { config: tenantConfig } = useTenantConfig();
+  return (
+    <div className="flex justify-between items-center mb-6">
+      <h1 className="text-2xl font-bold text-gray-800 dark:text-gray-100">
+        {tenantConfig.appName} Dashboard
+      </h1>
+      <button className="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm">
+        + Add Organization
+      </button>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/components/OrgTable.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/components/OrgTable.tsx
new file mode 100644
index 000000000..663b63a23
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/components/OrgTable.tsx
@@ -0,0 +1,72 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/common/ui/table";
+import { Badge } from "@/shared/common/ui/badge";
+import { formatDistanceToNow } from "date-fns";
+import { OrganizationDto } from "@/shared/dto/organization/organizationDto";
+import { t } from "i18next";
+interface OrgTableProps {
+  organizations: OrganizationDto[];
+}
+
+export const OrgTable = ({ organizations }: OrgTableProps) => {
+  if (!organizations || organizations.length === 0) {
+    return (
+      <div className="text-sm text-muted-foreground text-center py-4 border dark:border-gray-700 rounded-xl p-6 dark:bg-gray-800">
+        No organizations found
+      </div>
+    );
+  }
+ 
+  return (
+    <div className="rounded-xl overflow-hidden shadow-sm border bg-white dark:bg-gray-800 dark:border-gray-700">
+      <Table>
+        <TableHeader className="bg-white dark:bg-gray-800 text-muted-foreground">
+          <TableRow>
+            <TableHead className="px-6 py-3">{t("organization.organizationName")}</TableHead>
+            {/* <TableHead className="px-6 py-3">{t("organization.key")}</TableHead> */}
+            <TableHead className="px-6 py-3">{t("organization.createdOn")}</TableHead>
+            <TableHead className="px-6 py-3">{t("dashboard.Status")}</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {organizations.map((org, index) => (
+            <TableRow
+              key={org.id}
+              className={index % 2 ? "bg-purple-50/20 dark:bg-gray-700/40" : "bg-white dark:bg-gray-800"}
+            >
+              <TableCell className="px-6 py-3 font-medium">
+                {org.name?.en || "N/A"}
+              </TableCell>
+              {/* <TableCell className="px-6 py-3">{org.key || "N/A"}</TableCell> */}
+              <TableCell className="px-6 py-3">
+                {org.createdAt
+                  ? formatDistanceToNow(new Date(org.createdAt), {
+                      addSuffix: true,
+                    })
+                  : "N/A"}
+              </TableCell>
+              <TableCell className="px-6 py-3">
+                <Badge
+                  variant={org.status === "Active" ? "default" : "outline"}
+                  className={
+                    org.status === "Active"
+                      ? "bg-primary-100 text-primary-800 hover:bg-primary-100 dark:bg-primary-900/50 dark:text-primary-300"
+                      : "bg-gray-100 text-gray-800 hover:bg-gray-100 dark:bg-gray-700 dark:text-gray-300"
+                  }
+                >
+                  {org.status === "Active" ? t("statusBar.activate") : t("statusBar.deactivate")}
+                </Badge>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/components/StatCard.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/components/StatCard.tsx
new file mode 100644
index 000000000..4431a8b3e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/components/StatCard.tsx
@@ -0,0 +1,53 @@
+import { Card, CardContent } from "@/shared/common/ui/card";
+import { cn } from "@/super-admin/lib/utils";
+import { LucideIcon, Building2, Clock, User } from "lucide-react";
+
+interface StatCardProps {
+  title: string;
+  value: number;
+  indicator?: string;
+  color: string;
+  icon: "building" | "clock" | "user";
+  variant?: "primary" | "default";
+  onClick?: () => void;
+}
+
+const iconMap: Record<string, LucideIcon> = {
+  building: Building2,
+  clock: Clock,
+  user: User,
+};
+
+export const StatCard: React.FC<StatCardProps> = ({
+  title,
+  value,
+  indicator,
+  color,
+  icon,
+  variant = "default",
+  onClick,
+}) => {
+  const Icon = iconMap[icon];
+
+  return (
+    <Card
+      onClick={onClick}
+      className={cn(
+        "p-4 rounded-xl shadow-sm transition-colors",
+        variant === "primary" ? "bg-purple-600 text-white" : "bg-white dark:bg-gray-800 dark:border-gray-700",
+        onClick && "cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700"
+      )}
+    >
+      <CardContent className="p-0">
+        <div className="flex justify-between items-center mb-4">
+          <div className="text-sm font-medium opacity-80">{title}</div>
+          <Icon className="w-5 h-5 opacity-60" />
+        </div>
+        <div className="text-3xl font-bold leading-snug">{value}</div>
+        {indicator && (
+          <div className={cn("text-xs mt-1", color)}>{indicator}</div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/dashboardSlice.ts b/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/dashboardSlice.ts
new file mode 100644
index 000000000..815e9527c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/dashboardSlice.ts
@@ -0,0 +1,26 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+interface DashboardState {
+  totalOrgs: number;
+  pendingRequests: number;
+  orgAdmins: number;
+}
+
+const initialState: DashboardState = {
+  totalOrgs: 0,
+  pendingRequests: 0,
+  orgAdmins: 0,
+};
+
+const dashboardSlice = createSlice({
+  name: "dashboard",
+  initialState,
+  reducers: {
+    setStats(state, action: PayloadAction<DashboardState>) {
+      return { ...state, ...action.payload };
+    },
+  },
+});
+
+export const { setStats } = dashboardSlice.actions;
+export default dashboardSlice.reducer;
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/services/useDashboardStats.ts b/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/services/useDashboardStats.ts
new file mode 100644
index 000000000..f0339cabe
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/services/useDashboardStats.ts
@@ -0,0 +1,34 @@
+import { useQuery } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { getDashboardStats } from "@/super-admin/services/api/dashboardApi";
+import { DashboardStatsDto } from "../types/dashboardStatsDto";
+
+export const useDashboardStats = () => {
+  const {
+    data: stats,
+    isLoading,
+    isError,
+    refetch,
+  } = useQuery({
+    queryKey: ["dashboardStats"],
+    queryFn: async (): Promise<DashboardStatsDto> => {
+      try {
+        return await getDashboardStats();
+      } catch (err) {
+        toast("Failed to fetch dashboard stats. Using mock data.");
+        return err instanceof Error
+          ? Promise.reject(new Error(err.message))
+          : Promise.reject(new Error("Failed to fetch dashboard stats."));
+        // Fallback to mock data if API call fails
+      }
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  return {
+    stats,
+    isLoading,
+    isError,
+    refetch,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/types/dashboardStatsDto.ts b/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/types/dashboardStatsDto.ts
new file mode 100644
index 000000000..093ea1b23
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/dashboard/types/dashboardStatsDto.ts
@@ -0,0 +1,10 @@
+export interface DashboardStatsDto {
+  totalOrgs: number;
+  pendingRequests: number;
+  orgAdmins: number;
+  percentChanges: {
+    orgs: number;
+    pending: number;
+    admins: number;
+  };
+}
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/externalUsers/ExternalUsersColumnDefn.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/externalUsers/ExternalUsersColumnDefn.tsx
new file mode 100644
index 000000000..6dcd6392b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/externalUsers/ExternalUsersColumnDefn.tsx
@@ -0,0 +1,129 @@
+import { ExternalUserDto } from "@/super-admin/dto/ExternalUsersDto";
+import { format } from "date-fns";
+import { ColumnDef } from "@tanstack/react-table";
+import { Badge } from "@/shared/common/ui/badge";
+import { UserStatusToggleConfirm } from "./UserStatusToggleConfirm";
+import { t } from "i18next";
+import { useNavigate } from "react-router-dom";
+
+export const ExternalUsersColumnDefn = (
+  localizedName: (name?: { am: string; en: string }) => string,
+  navigate: ReturnType<typeof useNavigate>
+): ColumnDef<ExternalUserDto>[] => {
+  return [
+    {
+      accessorKey: "name.en",
+      header: () => t("organization.username"),
+      cell: ({ row }) => (
+        <div className="font-medium">{localizedName(row.original.name)}</div>
+      ),
+    },
+    {
+      accessorKey: "updatedAt",
+      header: () => t("organization.updatedOn"),
+      cell: ({ row }) => (
+        <div className="font-medium">
+          {format(new Date(row.original.updatedAt), "MMM dd, yyyy")}
+        </div>
+      ),
+    },
+    {
+      accessorKey: "userType",
+      header: () => "User Type",
+      cell: ({ row }) => {
+        const userType = row.original.userType;
+        const displayText =
+          userType === "external_organization"
+            ? "External Organization"
+            : "Employee";
+
+        return (
+          <div className="font-medium">
+            <span
+              className={`px-2 py-1 rounded-full text-xs font-medium ${
+                userType === "external_organization"
+                  ? "bg-purple-100 text-purple-800 dark:bg-purple-900/40 dark:text-purple-300"
+                  : "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300"
+              }`}
+            >
+              {displayText}
+            </span>
+          </div>
+        );
+      },
+    },
+    {
+      id: "status",
+      header: () => t("dashboard.Status"),
+      cell: ({ row }) => {
+        const { status } = row.original;
+        const getStatusColor = (status: string) => {
+          switch (status) {
+            case "accepted":
+              return "bg-primary-100 text-primary-600 hover:bg-primary-100 dark:bg-primary-900/40 dark:text-primary-300 dark:hover:bg-primary-900/50";
+            case "rejected":
+              return "bg-red-100 text-red-600 hover:bg-red-100 dark:bg-red-900/40 dark:text-red-300 dark:hover:bg-red-900/50";
+            case "pending":
+            default:
+              return "bg-blue-100 text-blue-600 hover:bg-blue-100 dark:bg-blue-900/40 dark:text-blue-300 dark:hover:bg-blue-900/50";
+          }
+        };
+
+        const getStatusText = (status: string) => {
+          switch (status) {
+            case "accepted":
+              return "Accepted";
+            case "rejected":
+              return "Rejected";
+            case "pending":
+            default:
+              return t("statusBar.Pending");
+          }
+        };
+
+        return (
+          <div>
+            <Badge
+              className={`${getStatusColor(
+                status
+              )} rounded-full px-6 py-1 font-medium`}
+            >
+              {getStatusText(status)}
+            </Badge>
+          </div>
+        );
+      },
+    },
+    {
+      id: "actions",
+      header: () => t("userRecord.Actions"),
+      cell: ({ row }) => {
+        const { id, status } = row.original;
+        const handleViewUploads = () => {
+          navigate(`/user-management/external_users/view/${id}`);
+        };
+        // const handleEdit = () => {
+        //   navigate(`/user-management/external_users/edit/${id}`);
+        // };
+
+        return (
+          <div className="flex items-center gap-2">
+            <UserStatusToggleConfirm userId={id} userStatus={status} />
+            <button
+              onClick={handleViewUploads}
+              className="px-2 py-1 bg-gray-100 dark:bg-gray-800 rounded hover:bg-gray-200 dark:hover:bg-gray-700 text-sm font-medium text-gray-800 dark:text-gray-200"
+            >
+              {t("View")}
+            </button>
+            {/* <button
+              onClick={handleEdit}
+              className="px-2 py-1 bg-blue-100 rounded hover:bg-blue-200 text-sm font-medium"
+            >
+              {t("Edit")}
+            </button> */}
+          </div>
+        );
+      },
+    },
+  ];
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/externalUsers/PendingExternalUsers.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/externalUsers/PendingExternalUsers.tsx
new file mode 100644
index 000000000..c80d276c6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/externalUsers/PendingExternalUsers.tsx
@@ -0,0 +1,142 @@
+import { useMemo, useState } from "react";
+import { AdvancedTable } from "../../../shared/common/ui/table/AdvancedTable";
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "../../../shared/common/ui/card";
+import {
+  useAllExternalUsers,
+  userTypeEnum,
+} from "@/super-admin/hooks/useExternalUsers";
+import { ExternalUsersColumnDefn } from "./ExternalUsersColumnDefn";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { Loader2 } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { RadioGroup, RadioGroupItem } from "@/shared/common/ui/radio-group";
+import { Label } from "@/shared/common/ui/label";
+import { useNavigate } from "react-router-dom";
+import {
+  CombinedFilterBar,
+  CombinedFilterField,
+} from "@/shared/components/filters/CombinedFilterBar";
+import { useCombinedFilters } from "@/shared/hooks/useCombinedFilters";
+import { FilterParams } from "@/shared/utils/filterParams";
+
+export default function PendingExternalUsers() {
+  const localizedName = useLocalizedName();
+  const [pageIndex, setPageIndex] = useState(0);
+  const pageSize = 10;
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const filterStore = useCombinedFilters<FilterParams>();
+  const [selectedUserType, setSelectedUserType] = useState<userTypeEnum>(
+    userTypeEnum.externalUsers,
+  );
+
+  const filterFields = useMemo<CombinedFilterField[]>(
+    () => [
+      { key: "name", label: t("profile.name", "Name"), type: "text" },
+      { key: "email", label: t("profile.emailmsg", "Email"), type: "text" },
+      {
+        key: "username",
+        label: t("profile.username", "Username"),
+        type: "text",
+      },
+      {
+        key: "phoneNumber",
+        label: t("profile.phoneNumber", "Phone Number"),
+        type: "text",
+      },
+    ],
+    [t],
+  );
+
+  const { data, isLoading } = useAllExternalUsers({
+    take: pageSize,
+    skip: pageIndex * pageSize,
+    orderBy: "updatedAt:Desc",
+    userType: selectedUserType,
+    ...filterStore.filters,
+  });
+
+  const handlePageChange = (newPage: number) => {
+    setPageIndex(newPage);
+  };
+
+  const handleFilterChange = () => {
+    setPageIndex(0);
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center p-6">
+        <Loader2 className="animate-spin w-6 h-6 text-gray-500 dark:text-gray-400" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 space-y-6">
+      <Card className="col-span-2 shadow-none border-none bg-transparent px-0">
+        <CardHeader className="flex flex-col gap-4 px-0 sm:flex-row sm:items-center sm:justify-between">
+          <CardTitle className="text-xl font-semibold">All Users</CardTitle>
+
+          <RadioGroup
+            value={selectedUserType}
+            onValueChange={(val: userTypeEnum) => {
+              setSelectedUserType(val);
+              setPageIndex(0);
+            }}
+            className="flex flex-wrap gap-4"
+          >
+            <div className="flex items-center space-x-2">
+              <RadioGroupItem
+                value={userTypeEnum.externalUsers}
+                id="allExternal"
+              />
+              <Label htmlFor="allExternal">All External Users</Label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <RadioGroupItem value={userTypeEnum.external} id="external" />
+              <Label htmlFor="external">External Organization</Label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <RadioGroupItem value={userTypeEnum.individual} id="individual" />
+              <Label htmlFor="individual">Individual</Label>
+            </div>
+          </RadioGroup>
+        </CardHeader>
+
+        <CardContent className="space-y-4 px-0">
+          <CombinedFilterBar
+            fields={filterFields}
+            filters={filterStore.filters}
+            setFilter={filterStore.setFilter}
+            setFilters={filterStore.setFilters}
+            removeFilter={filterStore.removeFilter}
+            removeFilters={filterStore.removeFilters}
+            onFilterChange={handleFilterChange}
+            className="w-full min-w-0"
+          />
+
+          <AdvancedTable
+            columns={ExternalUsersColumnDefn(localizedName, navigate)}
+            data={data?.items || []}
+            tableName="ExternalUsers"
+            toolBarPosition="right"
+            itemCount={data?.count || 0}
+            pageIndex={pageIndex}
+            onPageChange={handlePageChange}
+            nextFunction={() => handlePageChange(pageIndex + 1)}
+            prevFunction={() => handlePageChange(Math.max(pageIndex - 1, 0))}
+            hideToolbarFilter
+            disableClientFiltering
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/externalUsers/ResponseActions.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/externalUsers/ResponseActions.tsx
new file mode 100644
index 000000000..278e0febd
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/externalUsers/ResponseActions.tsx
@@ -0,0 +1,137 @@
+import { useState } from "react";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogTrigger,
+} from "@/shared/common/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { Textarea } from "@/shared/common/ui/textarea";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+
+type Status = "pending" | "submitted" | "approved" | "adjusted" | "rejected";
+
+interface ActionModalProps {
+  documentId: string;
+  onActionSubmit: (documentId: string, status: Status, remark: string) => void;
+}
+
+const ActionModal = ({ documentId, onActionSubmit }: ActionModalProps) => {
+  const [open, setOpen] = useState(false);
+  const [status, setStatus] = useState<Status>("approved");
+  const [remark, setRemark] = useState("");
+  const { t } = useTranslation();
+
+  const handleSubmit = () => {
+    onActionSubmit(documentId, status, remark);
+
+    // Translate status for toast message
+    const getTranslatedStatus = (status: Status): string => {
+      switch (status) {
+        case "approved":
+          return t("actionModal.actions.approve");
+        case "adjusted":
+          return t("actionModal.actions.adjustment");
+        case "rejected":
+          return t("actionModal.actions.reject");
+        case "pending":
+          return t("actionModal.actions.pending");
+        case "submitted":
+          return t("actionModal.actions.submitted");
+        default:
+          return status;
+      }
+    };
+
+    toast.success(
+      t("actionModal.toast.success", {
+        status: getTranslatedStatus(status),
+      })
+    );
+    setOpen(false);
+    setRemark("");
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button size="sm" variant="outline">
+          {t("actionModal.trigger")}
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t("actionModal.title")}</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4 mt-2">
+          <div>
+            <label className="block text-sm font-medium mb-2">
+              {t("actionModal.labels.selectAction")}
+            </label>
+            <Select
+              value={status}
+              onValueChange={(val) => setStatus(val as Status)}>
+              <SelectTrigger className="w-full">
+                <SelectValue
+                  placeholder={t("actionModal.actions.selectPlaceholder")}
+                />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="approved">
+                  {t("actionModal.actions.approve")}
+                </SelectItem>
+                <SelectItem value="adjusted">
+                  {t("actionModal.actions.adjustment")}
+                </SelectItem>
+                <SelectItem value="rejected">
+                  {t("actionModal.actions.reject")}
+                </SelectItem>
+                <SelectItem value="pending">
+                  {t("actionModal.actions.pending")}
+                </SelectItem>
+                <SelectItem value="submitted">
+                  {t("actionModal.actions.submitted")}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium mb-2">
+              {t("actionModal.labels.remark")}
+            </label>
+            <Textarea
+              value={remark}
+              onChange={(e) => setRemark(e.target.value)}
+              placeholder={t("actionModal.labels.remarkPlaceholder")}
+              className="w-full"
+            />
+          </div>
+        </div>
+
+        <DialogFooter className="mt-4 flex justify-end gap-2">
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            {t("actionModal.buttons.cancel")}
+          </Button>
+          <Button onClick={handleSubmit}>
+            {t("actionModal.buttons.submit")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default ActionModal;
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/externalUsers/UpdateProfile.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/externalUsers/UpdateProfile.tsx
new file mode 100644
index 000000000..d4931fd03
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/externalUsers/UpdateProfile.tsx
@@ -0,0 +1,332 @@
+import React, { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { motion } from "framer-motion";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+
+import { CardContent } from "@/shared/common/ui/card";
+import { Input } from "@/shared/common/ui/input";
+import { Button } from "@/shared/common/ui/button";
+import { Badge } from "@/shared/common/ui/badge";
+import {
+  ChevronLeft,
+  CircleUser,
+  Mail,
+  Phone,
+  UserPen,
+  RefreshCw,
+  Save,
+} from "lucide-react";
+import { useUsersByID } from "@/super-admin/hooks/useUsers";
+import { updateUserProfile } from "@/user-management/services/api/employeePositionsService";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+const UpdateProfile = () => {
+  const { id } = useParams<{ id: string }>();
+
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
+  const { data: userData, refetch, isLoading } = useUsersByID(id!);
+  const [userName, setUserName] = useState("");
+  const [email, setEmail] = useState("");
+  const [englishName, setEnglishName] = useState("");
+  const [amharicName, setAmharicName] = useState("");
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [errors, setErrors] = useState<{ [key: string]: string }>({});
+  const [error, setError] = useState("");
+  const { handleError } = useErrorHandler(t);
+  // Populate form fields when user data is fetched
+  useEffect(() => {
+    if (userData) {
+      const user = userData;
+      setUserName(user.username ?? "");
+      setEmail(user.email ?? "");
+      setEnglishName(user.name?.en ?? "");
+      setAmharicName(user.name?.am ?? "");
+      setPhoneNumber(user.phoneNumber ?? "");
+    }
+  }, [userData]);
+
+  const container = {
+    hidden: { opacity: 0 },
+    show: { opacity: 1, transition: { staggerChildren: 0.1 } },
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const newErrors: { [key: string]: string } = {};
+
+    if (!email.trim()) newErrors.email = t("profile.emailRequired");
+    if (!userName.trim()) newErrors.userName = t("profile.usernameRequired");
+    if (!phoneNumber.trim()) newErrors.phoneNumber = t("profile.phoneRequired");
+    if (!englishName.trim())
+      newErrors.englishName = t("profile.englishNameRequired");
+    if (!amharicName.trim())
+      newErrors.amharicName = t("profile.amharicNameRequired");
+
+    setErrors(newErrors);
+    if (Object.keys(newErrors).length > 0) return;
+
+    // Phone number validation
+    const phoneRegex = /^(\+2519\d{8}|09\d{8})$/;
+    if (!phoneRegex.test(phoneNumber)) {
+      setError(t("profile.invalidPhoneFormat"));
+      toast.error(t("profile.invalidPhoneFormat"), {
+        description: t("profile.validPhoneFormat"),
+      });
+      return;
+    }
+
+    // Email validation
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(email)) {
+      setError(t("profile.invalidEmailFormat"));
+      toast.error(t("profile.invalidEmailFormat"), {
+        description: t("profile.validEmailFormat"),
+      });
+      return;
+    }
+
+    setLoading(true);
+    try {
+      await updateUserProfile(
+        {
+          username: userName,
+          email,
+          phoneNumber,
+          name: { en: englishName, am: amharicName },
+        },
+        id as string,
+      );
+
+      toast.success(t("profile.profileUpdateSuccess"), {
+        description: t("profile.profileUpdated"),
+      });
+
+      refetch(); // refresh data after update
+    } catch (err: any) {
+      const message = err?.message || t("profile.profileUpdateFailed");
+      setError(message);
+      handleError(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (isLoading) return <div>Loading...</div>;
+
+  const user = userData;
+  if (!user) return <div>User not found</div>;
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-primary-50 to-primary-100/40 dark:from-gray-900 dark:to-gray-800">
+      <div className="container mx-auto px-4 py-6">
+        {/* Header */}
+        <motion.div
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="mb-6">
+          <Button
+            onClick={() => navigate(-1)}
+            variant="ghost"
+            className="flex items-center gap-2 text-primary hover:text-primary-700 hover:bg-primary-300/20 dark:text-primary-300 dark:hover:text-primary-300 px-4 py-2 rounded-full transition-colors">
+            <ChevronLeft className="w-5 h-5" />
+            <span className="font-medium">{t("common.back")}</span>
+          </Button>
+        </motion.div>
+
+        {/* Profile Content */}
+        <div className="flex justify-center">
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.3 }}
+            className="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden border border-gray-100 dark:border-gray-700">
+            {/* Profile Header */}
+            <div className="relative bg-gradient-to-r from-primary to-primary-300 dark:from-primary-700 dark:to-primary-300 h-32">
+              <div className="absolute -bottom-12 left-1/2 transform -translate-x-1/2">
+                <motion.div
+                  whileHover={{ scale: 1.05 }}
+                  className="relative h-24 w-24 rounded-full border-4 border-white dark:border-gray-800 bg-white dark:bg-gray-800 shadow-lg">
+                  <div className="absolute inset-0 bg-gradient-to-br from-primary-300 to-primary dark:from-primary-300 dark:to-primary-700 rounded-full flex items-center justify-center">
+                    <CircleUser className="w-12 h-12 text-white" />
+                  </div>
+                </motion.div>
+              </div>
+            </div>
+
+            {/* Profile Info */}
+            <div className="pt-14 pb-6 px-6 text-center">
+              <h2 className="text-2xl font-bold text-gray-800 dark:text-gray-100">
+                {user.name.en || "___"}
+              </h2>
+              <p className="text-gray-600 dark:text-gray-400 text-sm mt-1">
+                {t("profile.updateProfile")}
+              </p>
+
+              <div className="mt-3">
+                <Badge
+                  variant="outline"
+                  className={`rounded-full px-3 py-1 text-xs font-medium ${
+                    user.status === "accepted"
+                      ? "bg-primary-300/20 text-primary border-primary/30"
+                      : "bg-gray-100 text-gray-600 border-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600"
+                  }`}>
+                  {t(`statusBar.${user.status || "___"}`)}
+                </Badge>
+              </div>
+            </div>
+
+            {/* Update Form */}
+            <div className="px-6 pb-8">
+              <motion.form
+                variants={container}
+                initial="hidden"
+                animate="show"
+                className="space-y-4"
+                onSubmit={handleSubmit}>
+                {/* Username */}
+                <div className="space-y-1">
+                  <label className="text-sm font-medium text-gray-700 dark:text-gray-300 pl-1">
+                    {t("profile.username")}
+                  </label>
+                  <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                      <UserPen className="h-4 w-4 text-gray-400 dark:text-gray-500" />
+                    </div>
+                    <Input
+                      className="pl-9 rounded-lg border-gray-300 dark:border-gray-600 focus:border-primary focus:ring-primary dark:bg-gray-700 dark:text-gray-100"
+                      value={userName}
+                      onChange={(e) => setUserName(e.target.value)}
+                    />
+                  </div>
+                  {errors.userName && (
+                    <p className="text-sm text-red-600 dark:text-red-400 pl-1">
+                      {errors.userName}
+                    </p>
+                  )}
+                </div>
+
+                {/* English Name */}
+                <div className="space-y-1">
+                  <label className="text-sm font-medium text-gray-700 dark:text-gray-300 pl-1">
+                    {t("profile.englishName")}
+                  </label>
+                  <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                      <UserPen className="h-4 w-4 text-gray-400 dark:text-gray-500" />
+                    </div>
+                    <Input
+                      className="pl-9 rounded-lg border-gray-300 dark:border-gray-600 focus:border-primary focus:ring-primary dark:bg-gray-700 dark:text-gray-100"
+                      value={englishName}
+                      onChange={(e) => setEnglishName(e.target.value)}
+                    />
+                  </div>
+                  {errors.englishName && (
+                    <p className="text-sm text-red-600 dark:text-red-400 pl-1">
+                      {errors.englishName}
+                    </p>
+                  )}
+                </div>
+
+                {/* Amharic Name */}
+                <div className="space-y-1">
+                  <label className="text-sm font-medium text-gray-700 dark:text-gray-300 pl-1">
+                    {t("profile.amharicName")}
+                  </label>
+                  <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                      <UserPen className="h-4 w-4 text-gray-400 dark:text-gray-500" />
+                    </div>
+                    <Input
+                      className="pl-9 rounded-lg border-gray-300 dark:border-gray-600 focus:border-primary focus:ring-primary dark:bg-gray-700 dark:text-gray-100"
+                      value={amharicName}
+                      onChange={(e) => setAmharicName(e.target.value)}
+                    />
+                  </div>
+                  {errors.amharicName && (
+                    <p className="text-sm text-red-600 dark:text-red-400 pl-1">
+                      {errors.amharicName}
+                    </p>
+                  )}
+                </div>
+
+                {/* Email */}
+                <div className="space-y-1">
+                  <label className="text-sm font-medium text-gray-700 dark:text-gray-300 pl-1">
+                    {t("profile.emailmsg")}
+                  </label>
+                  <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                      <Mail className="h-4 w-4 text-gray-400 dark:text-gray-500" />
+                    </div>
+                    <Input
+                      type="email"
+                      className="pl-9 rounded-lg border-gray-300 dark:border-gray-600 focus:border-primary focus:ring-primary dark:bg-gray-700 dark:text-gray-100"
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                    />
+                  </div>
+                  {errors.email && (
+                    <p className="text-sm text-red-600 dark:text-red-400 pl-1">
+                      {errors.email}
+                    </p>
+                  )}
+                </div>
+
+                {/* Phone Number */}
+                <div className="space-y-1">
+                  <label className="text-sm font-medium text-gray-700 dark:text-gray-300 pl-1">
+                    {t("profile.phoneNumber")}
+                  </label>
+                  <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                      <Phone className="h-4 w-4 text-gray-400 dark:text-gray-500" />
+                    </div>
+                    <Input
+                      type="tel"
+                      className="pl-9 rounded-lg border-gray-300 dark:border-gray-600 focus:border-primary focus:ring-primary dark:bg-gray-700 dark:text-gray-100"
+                      value={phoneNumber}
+                      onChange={(e) => setPhoneNumber(e.target.value)}
+                    />
+                  </div>
+                  {errors.phoneNumber && (
+                    <p className="text-sm text-red-600 dark:text-red-400 pl-1">
+                      {errors.phoneNumber}
+                    </p>
+                  )}
+                </div>
+
+                {/* Submit Button */}
+                <motion.div
+                  whileHover={{ scale: 1.01 }}
+                  whileTap={{ scale: 0.99 }}
+                  className="pt-4">
+                  <Button
+                    type="submit"
+                    className="w-full h-12 bg-gradient-to-r from-primary to-primary-300 hover:from-primary-700 hover:to-primary-300 text-white font-medium rounded-lg shadow-md transition-all duration-200"
+                    disabled={loading}>
+                    {loading ? (
+                      <span className="flex items-center justify-center">
+                        <RefreshCw className="animate-spin h-5 w-5 mr-2" />
+                        {t("profile.updating")}...
+                      </span>
+                    ) : (
+                      <span className="flex items-center justify-center">
+                        <Save className="w-4 h-4 mr-2" />
+                        {t("profile.updateProfile")}
+                      </span>
+                    )}
+                  </Button>
+                </motion.div>
+              </motion.form>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UpdateProfile;
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/externalUsers/UserStatusToggleConfirm.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/externalUsers/UserStatusToggleConfirm.tsx
new file mode 100644
index 000000000..734fdae06
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/externalUsers/UserStatusToggleConfirm.tsx
@@ -0,0 +1,124 @@
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from "@/shared/common/ui/alert-dialog";
+import { Button } from "@/shared/common/ui/button";
+import { useApproveExternalUser } from "@/super-admin/hooks/useExternalUsers";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { UserStatus } from "@/super-admin/dto/ExternalUsersDto";
+
+interface Props {
+  userId: string;
+  userStatus: UserStatus;
+}
+
+export const UserStatusToggleConfirm = ({ userId, userStatus }: Props) => {
+  const approve = useApproveExternalUser();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  const isLoading = approve.isPending;
+
+  const onConfirm = (nextStatus: UserStatus) => {
+    approve.mutate(
+      { id: userId, status: nextStatus },
+      {
+        onSuccess: () => {
+          toast.success(
+            nextStatus === "accepted"
+              ? "User successfully approved"
+              : "User successfully rejected"
+          );
+        },
+        onError: (error) => {
+          handleError(error);
+        },
+      }
+    );
+  };
+
+  return (
+    <div className="flex gap-2">
+      {/* Approve Dialog - Only show for pending users */}
+      {userStatus === "pending" && (
+        <AlertDialog>
+          <AlertDialogTrigger asChild>
+            <Button
+              className="bg-primary-600 text-white hover:bg-primary-700"
+              size="sm"
+              disabled={isLoading}>
+              {t("statusBar.Approve")}
+            </Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>
+                {t("organization.approveUserPrompt")}
+              </AlertDialogTitle>
+              <AlertDialogDescription>
+                {t("organization.approveUserDescription")}
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel disabled={isLoading}>
+                {t("common.Cancel")}
+              </AlertDialogCancel>
+              <AlertDialogAction
+                onClick={() => onConfirm("accepted")}
+                disabled={isLoading}>
+                {isLoading
+                  ? t("organization.approving")
+                  : t("organization.yesApprove")}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      )}
+
+      {/* Reject Dialog - Only show for pending users */}
+      {userStatus === "pending" && (
+        <AlertDialog>
+          <AlertDialogTrigger asChild>
+            <Button
+              className="bg-red-600 text-white hover:bg-red-700"
+              size="sm"
+              disabled={isLoading}>
+              {t("statusBar.Reject")}
+            </Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>
+                {t("organization.rejectUserPrompt")}
+              </AlertDialogTitle>
+              <AlertDialogDescription>
+                {t("organization.rejectUserDescription")}
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel disabled={isLoading}>
+                {t("common.Cancel")}
+              </AlertDialogCancel>
+              <AlertDialogAction
+                onClick={() => onConfirm("rejected")}
+                disabled={isLoading}>
+                {isLoading
+                  ? t("organization.rejecting")
+                  : t("organization.yesReject")}
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      )}
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/externalUsers/ViewDocuments.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/externalUsers/ViewDocuments.tsx
new file mode 100644
index 000000000..6ee92f7ca
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/externalUsers/ViewDocuments.tsx
@@ -0,0 +1,378 @@
+import { useQuery, useQueries } from "@tanstack/react-query";
+import { getMyUploadedFiles } from "@/external-portal/services/portalOutgoingService";
+import { getDocumentRequirementsById } from "@/shared/services/organizationsService";
+import { getUserById } from "@/super-admin/services/api/userService";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+} from "@/shared/common/ui/card";
+import { Button } from "@/shared/common/ui/button";
+import { ScrollArea } from "@/shared/common/ui/scroll-area";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import { Alert, AlertDescription } from "@/shared/common/ui/alert";
+import { FileText, RefreshCw, User, Mail, Phone, Building } from "lucide-react";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import {
+  DocumentRequirementResponseDto,
+  DocumentResponseDto,
+} from "@/shared/dto/External-Portal/External-PortalDto";
+import ActionModal from "./ResponseActions";
+import { toast } from "sonner";
+import { useGiveResponse } from "@/shared/hooks/useOrganizationReport";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+
+type ViewDocumentProps = {
+  userId: string;
+};
+
+interface UploadsResponse {
+  items: DocumentResponseDto[];
+  counts: number;
+}
+
+interface UserInfo {
+  id: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  email: string;
+  phoneNumber: string;
+  username: string;
+  userType: string;
+  status: string;
+}
+
+const ViewDocument: React.FC<ViewDocumentProps> = ({ userId }) => {
+  const localizedName = useLocalizedName();
+  const { t } = useTranslation();
+  const [status, setStatus] = useState<"APPROVED" | "REJECTED" | "PENDING">(
+    "APPROVED"
+  );
+
+  // Utility function to truncate email if too long
+  const truncateEmail = (email: string, maxLength: number = 25) => {
+    if (email.length <= maxLength) return email;
+    const [localPart, domain] = email.split("@");
+    if (localPart.length > maxLength - 10) {
+      return `${localPart.substring(0, maxLength - 10)}...@${domain}`;
+    }
+    return email;
+  };
+
+  const { mutate, isLoading: isGiveResponseLoading } = useGiveResponse();
+
+  // 1️⃣ Fetch user information
+  const {
+    data: userInfo,
+    isLoading: isUserLoading,
+    isError: isUserError,
+  } = useQuery<UserInfo, Error>({
+    queryKey: ["user-info", userId],
+    queryFn: async () => {
+      const res = await getUserById(userId);
+      return res.data;
+    },
+  });
+
+  // 2️⃣ Fetch uploaded documents
+  const {
+    data: uploadedDocuments,
+    isLoading,
+    isError,
+    refetch,
+    isRefetching,
+  } = useQuery<UploadsResponse, Error>({
+    queryKey: ["external-letters", userId],
+    queryFn: async () => {
+      const res = await getMyUploadedFiles(userId);
+      return {
+        items: res.data.items,
+        counts: res.data.counts,
+      };
+    },
+  });
+
+  // 3️⃣ Fetch requirements for each uploaded document
+  const documentRequirementsQueries = useQueries({
+    queries:
+      uploadedDocuments?.items.map((doc) => ({
+        queryKey: ["document-requirements", doc.documentId],
+        queryFn: async (): Promise<DocumentRequirementResponseDto> => {
+          const res = await getDocumentRequirementsById(doc.documentId);
+          return res.data;
+        },
+        enabled: !!uploadedDocuments && uploadedDocuments.items.length > 0,
+      })) ?? [],
+  });
+
+  // 4️⃣ Action submit handler
+  const handleActionSubmit = async (
+    documentId: string,
+    actionStatus:
+      | "pending"
+      | "submitted"
+      | "approved"
+      | "adjusted"
+      | "rejected",
+    remark?: string
+  ) => {
+    try {
+      await mutate({ id: documentId, data: { status: actionStatus, remark } });
+      toast.success(
+        t("viewDocument.actions.success", { action: actionStatus })
+      );
+    } catch (err: any) {
+      toast.error(
+        t("viewDocument.actions.error", {
+          error: err.message || t("viewDocument.loading.failedToLoad"),
+        })
+      );
+    }
+  };
+
+  return (
+    <Card className="w-full max-w-4xl mx-auto mt-8 shadow-lg border-gray-200 dark:border-gray-700">
+      <CardHeader className="border-b border-gray-200 dark:border-gray-700">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-2xl font-bold flex items-center gap-2">
+            <FileText className="w-6 h-6 text-primary-600" />
+            {t("viewDocument.title")}
+          </CardTitle>
+          <Button
+            onClick={() => refetch()}
+            variant="default"
+            className="bg-primary-600 hover:bg-primary-700 text-white"
+            disabled={isRefetching}
+          >
+            <RefreshCw
+              className={`mr-2 h-4 w-4 ${isRefetching ? "animate-spin" : ""}`}
+            />
+            {t("viewDocument.refreshButton")}
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="p-6">
+        {/* User Information Section */}
+        {isUserLoading ? (
+          <div className="mb-6 space-y-4">
+            <Skeleton className="h-6 w-48" />
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <Skeleton className="h-16 w-full rounded-lg" />
+              <Skeleton className="h-16 w-full rounded-lg" />
+              <Skeleton className="h-16 w-full rounded-lg" />
+            </div>
+          </div>
+        ) : isUserError ? (
+          <Alert variant="destructive" className="mb-6">
+            <AlertDescription>
+              {t("viewDocument.failedToLoadUserInfo")}
+            </AlertDescription>
+          </Alert>
+        ) : userInfo ? (
+          <div className="mb-6 p-4 bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-gray-700">
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
+              <User className="w-5 h-5 text-primary-600" />
+              {t("viewDocument.userInformation")}
+            </h3>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="flex items-center gap-3 p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+                <Building className="w-5 h-5 text-blue-600" />
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                    {t("viewDocument.organizationName")}
+                  </p>
+                  <p className="text-base font-semibold text-gray-900 dark:text-gray-100 truncate">
+                    {localizedName(userInfo.name)}
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-center gap-3 p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+                <Mail className="w-5 h-5 text-primary-600" />
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                    {t("viewDocument.email")}
+                  </p>
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <p className="text-base font-semibold text-gray-900 dark:text-gray-100 truncate cursor-help">
+                          {truncateEmail(userInfo.email)}
+                        </p>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p className="max-w-xs break-all">{userInfo.email}</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </div>
+              </div>
+              <div className="flex items-center gap-3 p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+                <Phone className="w-5 h-5 text-purple-600" />
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                    {t("viewDocument.phoneNumber")}
+                  </p>
+                  <p className="text-base font-semibold text-gray-900 dark:text-gray-100 truncate">
+                    {userInfo.phoneNumber}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : null}
+
+        {/* Documents Section */}
+        {isLoading ? (
+          <div className="space-y-4">
+            {[...Array(3)].map((_, i) => (
+              <Skeleton key={i} className="h-24 w-full rounded-lg" />
+            ))}
+          </div>
+        ) : isError ? (
+          <Alert variant="destructive">
+            <AlertDescription>
+              {t("viewDocument.loading.failedToLoad")}
+            </AlertDescription>
+          </Alert>
+        ) : (
+          <>
+            <p className="mb-6 text-lg font-medium text-gray-700 dark:text-gray-300">
+              {t("viewDocument.totalDocuments")}{" "}
+              <span className="font-semibold text-primary-600">
+                {uploadedDocuments?.counts ?? 0}
+              </span>
+            </p>
+
+            <ScrollArea className="h-[500px] border border-gray-200 dark:border-gray-700 rounded-lg">
+              <ul className="space-y-4 p-2">
+                {uploadedDocuments?.items.map((doc, index) => {
+                  const eachDocument = documentRequirementsQueries[index]?.data;
+                  const isEachLoading =
+                    documentRequirementsQueries[index]?.isLoading;
+                  const isEachError =
+                    documentRequirementsQueries[index]?.isError;
+                  const requirements = eachDocument ? [eachDocument] : [];
+
+                  // Translate status
+                  const getTranslatedStatus = (status: string) => {
+                    switch (status) {
+                      case "approved":
+                        return t("viewDocument.document.status.approved");
+                      case "rejected":
+                        return t("viewDocument.document.status.rejected");
+                      case "pending":
+                      default:
+                        return t("viewDocument.document.status.pending");
+                    }
+                  };
+
+                  return (
+                    <li
+                      key={doc.id}
+                      className="flex flex-col p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50/50 dark:hover:bg-gray-800/60 transition-colors shadow-sm"
+                    >
+                      <div className="flex justify-between items-center mb-3">
+                        <div className="space-y-1">
+                          <p className="font-semibold text-gray-900 dark:text-gray-100">
+                            {doc.fileInfo.originalname}
+                          </p>
+                          <span
+                            className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                              doc.status === "approved"
+                                ? "bg-primary-100 text-primary-800"
+                                : doc.status === "rejected"
+                                ? "bg-red-100 text-red-800"
+                                : "bg-yellow-100 text-yellow-800"
+                            }`}
+                          >
+                            {getTranslatedStatus(doc.status)}
+                          </span>
+                        </div>
+                        <Button
+                          size="sm"
+                          className="bg-primary-600 hover:bg-primary-700 text-white"
+                          asChild
+                        >
+                          <a
+                            href={doc.presigned}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            {t("viewDocument.document.viewDocument")}
+                          </a>
+                        </Button>
+                        {doc.status !== "approved" && (
+                          <ActionModal
+                            documentId={doc.id}
+                            onActionSubmit={handleActionSubmit}
+                          />
+                        )}
+                      </div>
+
+                      {/* Document Requirements Section */}
+                      <div className="mt-2 border-t border-gray-200 dark:border-gray-700 pt-3">
+                        <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                          {t("viewDocument.document.requirements")}
+                        </h4>
+                        {isEachLoading ? (
+                          <div className="space-y-2">
+                            <Skeleton className="h-4 w-full" />
+                            <Skeleton className="h-4 w-3/4" />
+                          </div>
+                        ) : isEachError ? (
+                          <p className="text-sm text-red-500 dark:text-red-400">
+                            {t("viewDocument.loading.failedToLoadRequirements")}
+                          </p>
+                        ) : requirements.length ? (
+                          <ul className="space-y-2 text-sm">
+                            {requirements.map((req) => (
+                              <li key={req.id} className="flex items-start">
+                                <span
+                                  className={`inline-block w-2 h-2 rounded-full mt-1.5 mr-2 ${
+                                    req.isOptional
+                                      ? "bg-blue-400"
+                                      : "bg-primary-400"
+                                  }`}
+                                />
+                                <div>
+                                  <span className="font-medium text-gray-800 dark:text-gray-200">
+                                    {localizedName(req.title)}
+                                  </span>
+                                  <span className="text-gray-500 dark:text-gray-400 ml-1">
+                                    {req.isOptional
+                                      ? t("viewDocument.document.optional")
+                                      : t("viewDocument.document.required")}
+                                  </span>
+                                </div>
+                              </li>
+                            ))}
+                          </ul>
+                        ) : (
+                          <p className="text-sm text-gray-500 dark:text-gray-400 italic">
+                            {t("viewDocument.document.noRequirements")}
+                          </p>
+                        )}
+                      </div>
+                    </li>
+                  );
+                })}
+              </ul>
+            </ScrollArea>
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default ViewDocument;
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/organizationAdmins/AssignAdminDialog.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/organizationAdmins/AssignAdminDialog.tsx
new file mode 100644
index 000000000..319af7dec
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/organizationAdmins/AssignAdminDialog.tsx
@@ -0,0 +1,481 @@
+import { useEffect, useMemo, useState } from "react";
+import { Button } from "@/shared/common/ui/button";
+import { Label } from "@/shared/common/ui/label";
+import { ScrollArea } from "@/shared/common/ui/scroll-area";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { Check, Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import { useOrganizations } from "@/super-admin/hooks/useOrganizations";
+
+import { useEmployees } from "@/user-management/hooks/useEmployees";
+import { cn } from "@/super-admin/lib/utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../../../shared/common/ui/dialog";
+import { useTranslation } from "react-i18next";
+import {
+  RemoveOrAssignUnitAdminPayload,
+  assignUnitAdminRole,
+} from "@/super-admin/services/api/userRoleService";
+import { useQueryClient } from "@tanstack/react-query";
+import { Input } from "@/shared/common/ui/input";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useUnit } from "@/user-management/hooks/useUnit";
+
+export function AssignAdminDialog({
+  onSuccess,
+  onClose,
+  isOpen,
+  organizationId,
+  unitId,
+}: {
+  onSuccess: () => void;
+  isOpen: boolean;
+  onClose: () => void;
+  organizationId?: string;
+  unitId?: string;
+}) {
+  const queryClient = useQueryClient();
+  const [selectedOrg, setSelectedOrg] = useState<string>(organizationId ?? "");
+  const [selectedUnit, setSelectedUnit] = useState<string>(unitId ?? "");
+  const [selectedAssignmentUnit, setSelectedAssignmentUnit] =
+    useState<string>("");
+  const [selectedUser, setSelectedUser] = useState<string>("");
+  const [isAssigning, setIsAssigning] = useState<boolean>(false);
+  const [search, setSearch] = useState("");
+  const { t } = useTranslation();
+  const [page, setPage] = useState(0);
+  const take = 3000; // items per page
+  const localizedName = useLocalizedName();
+  const hasPreselectedUnit = !!organizationId && !!unitId;
+  const organizationIdForAssignment = organizationId || selectedOrg;
+  const unitIdForAssignment =
+    unitId || selectedUnit || selectedAssignmentUnit;
+  const { organizationsResponse, isLoading: isLoadingOrgs } = useOrganizations(
+    "Org",
+    {
+      take: 300,
+    }
+  );
+  const { data: unitsResponse, isLoading: isLoadingUnits } = useUnit().getList(
+    organizationIdForAssignment,
+    { take: 300, skip: 0 },
+    !hasPreselectedUnit
+  );
+  const {
+    employeesResponseByOrg,
+    isLoadingEmployeesByOrg: isLoadingEmployees,
+    refetchEmployeesByOrg,
+  } = useEmployees({
+    organizationId: organizationIdForAssignment || undefined,
+    unitId: unitIdForAssignment || undefined,
+    params: {
+      take,
+      skip: page * take,
+    },
+  });
+
+  // Refetch when unit selection changes
+  useEffect(() => {
+    if (unitIdForAssignment) {
+      refetchEmployeesByOrg();
+    }
+  }, [unitIdForAssignment, refetchEmployeesByOrg]);
+
+  useEffect(() => {
+    if (selectedOrg && !hasPreselectedUnit) {
+      setSelectedUnit("");
+      setSelectedAssignmentUnit("");
+      setSelectedUser("");
+      setPage(0);
+    }
+  }, [hasPreselectedUnit, selectedOrg]);
+
+  useEffect(() => {
+    if (selectedUnit && !hasPreselectedUnit) {
+      setSelectedAssignmentUnit("");
+      setSelectedUser("");
+      setPage(0);
+    }
+  }, [hasPreselectedUnit, selectedUnit]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    setSelectedOrg(organizationId ?? "");
+    setSelectedUnit(unitId ?? "");
+    setSelectedAssignmentUnit("");
+    setSelectedUser("");
+    setPage(0);
+    setSearch("");
+  }, [isOpen, organizationId, unitId]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (
+      !selectedUser ||
+      !organizationIdForAssignment ||
+      !unitIdForAssignment
+    ) {
+      toast.error("All fields are required");
+      return;
+    }
+
+    const user = employeesResponseByOrg?.items.find(
+      (e) => e.user.id === selectedUser
+    );
+    if (!user) return toast.error("User not found");
+
+    setIsAssigning(true);
+
+    const payload: RemoveOrAssignUnitAdminPayload = {
+      unitId: unitIdForAssignment,
+      userId: user.user.id,
+    };
+
+    assignUnitAdminRole(payload)
+      .then(() => {
+        queryClient.invalidateQueries({
+          queryKey: ["organizationAdmins"],
+        });
+        queryClient.invalidateQueries({
+          queryKey: ["unitAdmins", unitIdForAssignment],
+        });
+        toast.success(t("organization.userAssignedSuccess"));
+        setIsAssigning(false);
+        onClose();
+        onSuccess();
+      })
+      .catch((error) => {
+        toast.error(t("organization.userAssignFailed"), {
+          description: error?.response?.data?.message,
+        });
+        setIsAssigning(false);
+      });
+  };
+
+  const resetForm = () => {
+    setSelectedOrg(organizationId ?? "");
+    setSelectedUnit(unitId ?? "");
+    setSelectedAssignmentUnit("");
+    setSelectedUser("");
+    setPage(0);
+    setSearch("");
+  };
+
+  const filteredEmployees = useMemo(() => {
+    if (!employeesResponseByOrg?.items) return [];
+
+    return employeesResponseByOrg.items.filter((emp) => {
+      const name = emp.user.name?.en?.toLowerCase() || "";
+      const email = emp.user.email?.toLowerCase() || "";
+      const query = search.toLowerCase();
+
+      return name.includes(query) || email.includes(query);
+    });
+  }, [employeesResponseByOrg, search]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent
+        className={hasPreselectedUnit ? "sm:max-w-[550px]" : "sm:max-w-[900px]"}
+      >
+        <DialogHeader>
+          <DialogTitle>
+            {hasPreselectedUnit
+              ? t("contentManagement.manageUnitAdmin", "Manage Unit Admin")
+              : t("organization.assignAdminToOrganization")}
+          </DialogTitle>
+          <DialogDescription>
+            {hasPreselectedUnit
+              ? t(
+                  "organization.assignUnitAdminInstructions",
+                  "Select a user to assign as an administrator for this unit."
+                )
+              : t("organization.assignAdminInstructions")}
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div
+            className={
+              hasPreselectedUnit
+                ? "grid grid-cols-1 gap-4"
+                : "grid grid-cols-3 gap-4"
+            }
+          >
+            {/* Step 1: Organizations */}
+            {!hasPreselectedUnit && <div className="space-y-2">
+              <Label className="font-semibold text-sm">
+                {t("organization.organizations")} <span className="text-red-500">*</span>
+              </Label>
+              {isLoadingOrgs ? (
+                <div className="flex items-center justify-center h-64">
+                  <Loader2 className="h-6 w-6 animate-spin text-primary" />
+                </div>
+              ) : (
+                <ScrollArea className="h-[300px] border border-gray-200 dark:border-gray-700 rounded-md p-2">
+                  <div className="space-y-1">
+                    {organizationsResponse?.items?.map((org) => (
+                      <button
+                        key={`org-${org.id}`}
+                        onClick={() => setSelectedOrg(org.id)}
+                        type="button"
+                        className={cn(
+                          "w-full flex items-center justify-between px-3 py-2 rounded-md text-left text-sm transition-colors",
+                          selectedOrg === org.id
+                            ? "bg-green-200 text-green-800 dark:bg-green-900/40 dark:text-green-300"
+                            : "hover:bg-green-100 dark:hover:bg-green-900/30 text-gray-700 dark:text-gray-300"
+                        )}
+                      >
+                        <span>{localizedName(org.name)}</span>
+                        {selectedOrg === org.id && (
+                          <Check className="h-4 w-4" />
+                        )}
+                      </button>
+                    ))}
+                  </div>
+                </ScrollArea>
+              )}
+            </div>}
+
+            {/* Step 2: Units */}
+            {!hasPreselectedUnit && <div className="space-y-2">
+              <Label className="font-semibold text-sm">
+                {t("organization.units")} <span className="text-red-500">*</span>
+              </Label>
+              {!selectedOrg ? (
+                <div className="h-[300px] border border-gray-200 dark:border-gray-700 rounded-md p-4 flex items-center justify-center text-gray-500 dark:text-gray-400">
+                  <p className="text-sm text-center">{t("organization.selectOrganizationFirst")}</p>
+                </div>
+              ) : isLoadingUnits ? (
+                <div className="flex items-center justify-center h-64">
+                  <Loader2 className="h-6 w-6 animate-spin text-primary" />
+                </div>
+              ) : (
+                <ScrollArea className="h-[300px] border border-gray-200 dark:border-gray-700 rounded-md p-2">
+                  <div className="space-y-1">
+                    <button
+                      onClick={() => setSelectedUnit("")}
+                      type="button"
+                      className={cn(
+                        "w-full flex items-center justify-between px-3 py-2 rounded-md text-left text-sm transition-colors",
+                        !selectedUnit
+                          ? "bg-blue-200 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300"
+                          : "hover:bg-blue-100 dark:hover:bg-blue-900/30 text-gray-700 dark:text-gray-300"
+                      )}
+                    >
+                      <span>
+                        {t(
+                          "organization.allOrganizationUsers",
+                          "All organization users"
+                        )}
+                      </span>
+                      {!selectedUnit && <Check className="h-4 w-4" />}
+                    </button>
+                    {unitsResponse?.data?.items?.map((unit: any) => (
+                      <button
+                        key={`unit-${unit.id}`}
+                        onClick={() => setSelectedUnit(unit.id)}
+                        type="button"
+                        className={cn(
+                          "w-full flex items-center justify-between px-3 py-2 rounded-md text-left text-sm transition-colors",
+                          selectedUnit === unit.id
+                            ? "bg-blue-200 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300"
+                            : "hover:bg-blue-100 dark:hover:bg-blue-900/30 text-gray-700 dark:text-gray-300"
+                        )}
+                      >
+                        <span>{localizedName(unit.name)}</span>
+                        {selectedUnit === unit.id && (
+                          <Check className="h-4 w-4" />
+                        )}
+                      </button>
+                    ))}
+                    {unitsResponse?.data?.items?.length === 0 && (
+                      <p className="text-sm text-gray-500 dark:text-gray-400 text-center mt-2">
+                        {t("organization.noUnitsFound")}
+                      </p>
+                    )}
+                  </div>
+                </ScrollArea>
+              )}
+            </div>}
+
+            {/* Step 3: Users */}
+            <div className="space-y-2">
+              <Label className="font-semibold text-sm">
+                {t("organization.users")} <span className="text-red-500">*</span>
+              </Label>
+              {!organizationIdForAssignment ? (
+                <div className="h-[300px] border border-gray-200 dark:border-gray-700 rounded-md p-4 flex items-center justify-center text-gray-500 dark:text-gray-400">
+                  <p className="text-sm text-center">{t("organization.selectOrganizationFirst")}</p>
+                </div>
+              ) : isLoadingEmployees ? (
+                <div className="flex items-center justify-center h-64">
+                  <Loader2 className="h-6 w-6 animate-spin text-primary" />
+                </div>
+              ) : (
+                <div className="space-y-2">
+                  {!unitIdForAssignment && (
+                    <div className="space-y-2">
+                      <Label className="text-xs font-medium text-gray-600 dark:text-gray-300">
+                        {t(
+                          "organization.unitForAdminRole",
+                          "Unit for admin role"
+                        )}{" "}
+                        <span className="text-red-500">*</span>
+                      </Label>
+                      <Select
+                        value={selectedAssignmentUnit}
+                        onValueChange={setSelectedAssignmentUnit}
+                        disabled={isLoadingUnits}
+                      >
+                        <SelectTrigger className="h-9 border border-gray-200 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-gray-100 text-sm [&>span]:truncate w-full">
+                          <SelectValue
+                            placeholder={t("organization.selectUnit")}
+                          />
+                        </SelectTrigger>
+                        <SelectContent className="w-full min-w-[200px]">
+                          {unitsResponse?.data?.items?.map((unit: any) => (
+                            <SelectItem key={unit.id} value={unit.id}>
+                              <span className="truncate">{localizedName(unit.name)}</span>
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  )}
+                  <Input
+                    placeholder={
+                      unitIdForAssignment
+                        ? t("organization.searchUsers")
+                        : t(
+                            "organization.searchOrganizationUsers",
+                            "Search organization users"
+                          )
+                    }
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                    className="border border-gray-200 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-gray-100 text-sm"
+                  />
+                  {!unitIdForAssignment && (
+                    <p className="text-xs text-gray-500 dark:text-gray-400">
+                      {t(
+                        "organization.selectUnitToFilterUsers",
+                        "Select a unit to filter this organization user list."
+                      )}
+                    </p>
+                  )}
+                  <ScrollArea className="h-[250px] border border-gray-200 dark:border-gray-700 rounded-md p-2">
+                    <div className="space-y-1">
+                      {filteredEmployees.map((emp) => (
+                        <button
+                          key={`emp-${emp.id || emp.user.id}`}
+                          onClick={() => setSelectedUser(emp.user.id)}
+                          type="button"
+                          className={cn(
+                            "w-full flex items-center justify-between px-3 py-2 rounded-md text-left text-sm transition-colors",
+                            selectedUser === emp.user.id
+                              ? "bg-purple-200 text-purple-800 dark:bg-purple-900/40 dark:text-purple-300"
+                              : "hover:bg-purple-100 dark:hover:bg-purple-900/30 text-gray-700 dark:text-gray-300"
+                          )}
+                        >
+                          <div className="flex-1">
+                            <p className="font-medium">{emp.user.name?.en || emp.user.email}</p>
+                            <p className="text-xs text-gray-500 dark:text-gray-400">{emp.user.email}</p>
+                          </div>
+                          {selectedUser === emp.user.id && (
+                            <Check className="h-4 w-4 ml-2" />
+                          )}
+                        </button>
+                      ))}
+                      {filteredEmployees.length === 0 && (
+                        <p className="text-sm text-gray-500 dark:text-gray-400 text-center mt-2">
+                          {t("organization.noUsersFound")}
+                        </p>
+                      )}
+                    </div>
+                  </ScrollArea>
+                  {/* Pagination */}
+                  <div className="flex items-center justify-between mt-2 px-2">
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={() => setPage((prev) => Math.max(prev - 1, 0))}
+                      disabled={page === 0}
+                    >
+                      {"<"}
+                    </Button>
+
+                    <span className="text-xs text-gray-500 dark:text-gray-400">
+                      {t("common.page")} {page + 1}
+                    </span>
+
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={() => {
+                        const total = employeesResponseByOrg?.count ?? 0;
+                        const maxPage = Math.ceil(total / take) - 1;
+                        setPage((prev) => Math.min(prev + 1, maxPage));
+                      }}
+                      disabled={
+                        !employeesResponseByOrg?.count ||
+                        (page + 1) * take >= employeesResponseByOrg.count
+                      }
+                    >
+                      {">"}
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <DialogFooter>
+            <div className="flex justify-end gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => {
+                  resetForm();
+                  onClose();
+                }}
+                disabled={isAssigning}
+              >
+                {t("common.Cancel")}
+              </Button>
+              <Button 
+                type="submit" 
+                disabled={
+                  isAssigning ||
+                  !organizationIdForAssignment ||
+                  !unitIdForAssignment ||
+                  !selectedUser
+                }
+                className="bg-green-600 hover:bg-green-700"
+              >
+                {isAssigning
+                  ? t("organization.assigning")
+                  : t("organization.assignUser")}
+              </Button>
+            </div>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/organizationAdmins/AssignOrgAdminDialog.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/organizationAdmins/AssignOrgAdminDialog.tsx
new file mode 100644
index 000000000..2ac9ef71d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/organizationAdmins/AssignOrgAdminDialog.tsx
@@ -0,0 +1,277 @@
+import { FormEvent, useMemo, useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { Check, Loader2 } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+
+import { Button } from "@/shared/common/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { Input } from "@/shared/common/ui/input";
+import { Label } from "@/shared/common/ui/label";
+import { ScrollArea } from "@/shared/common/ui/scroll-area";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { cn } from "@/super-admin/lib/utils";
+import { useOrganizations } from "@/super-admin/hooks/useOrganizations";
+import {
+  assignOrgAdminRole,
+  RemoveOrAssignOrgAdminPayload,
+} from "@/super-admin/services/api/userRoleService";
+import { useEmployees } from "@/user-management/hooks/useEmployees";
+
+interface AssignOrgAdminDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+export function AssignOrgAdminDialog({
+  isOpen,
+  onClose,
+  onSuccess,
+}: AssignOrgAdminDialogProps) {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const localizedName = useLocalizedName();
+  const [selectedOrg, setSelectedOrg] = useState("");
+  const [selectedUser, setSelectedUser] = useState("");
+  const [search, setSearch] = useState("");
+  const [isAssigning, setIsAssigning] = useState(false);
+
+  const { organizationsResponse, isLoading: isLoadingOrgs } = useOrganizations(
+    "Org",
+    { take: 300 }
+  );
+
+  const {
+    employeesResponseByOrg,
+    isLoadingEmployeesByOrg: isLoadingEmployees,
+  } = useEmployees({
+    organizationId: selectedOrg || undefined,
+    params: { take: 3000, skip: 0 },
+  });
+
+  const filteredEmployees = useMemo(() => {
+    const query = search.trim().toLowerCase();
+    const employees = employeesResponseByOrg?.items ?? [];
+
+    if (!query) return employees;
+
+    return employees.filter((employee) => {
+      const name = localizedName(employee.user.name).toLowerCase();
+      const email = employee.user.email?.toLowerCase() ?? "";
+
+      return name.includes(query) || email.includes(query);
+    });
+  }, [employeesResponseByOrg, localizedName, search]);
+
+  const resetForm = () => {
+    setSelectedOrg("");
+    setSelectedUser("");
+    setSearch("");
+  };
+
+  const handleClose = () => {
+    if (isAssigning) return;
+    resetForm();
+    onClose();
+  };
+
+  const handleOrganizationChange = (organizationId: string) => {
+    setSelectedOrg(organizationId);
+    setSelectedUser("");
+    setSearch("");
+  };
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!selectedOrg || !selectedUser) {
+      toast.error(t("organization.allFieldsRequired", "All fields are required"));
+      return;
+    }
+
+    const payload: RemoveOrAssignOrgAdminPayload = {
+      organizationId: selectedOrg,
+      userId: selectedUser,
+    };
+
+    setIsAssigning(true);
+
+    try {
+      await assignOrgAdminRole(payload);
+      await queryClient.invalidateQueries({
+        queryKey: ["organizationAdmins"],
+      });
+      resetForm();
+      onClose();
+      onSuccess();
+    } catch (error: any) {
+      toast.error(t("organization.userAssignFailed"), {
+        description: error?.response?.data?.message,
+      });
+    } finally {
+      setIsAssigning(false);
+    }
+  };
+
+  return (
+    <Dialog
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) handleClose();
+      }}
+    >
+      <DialogContent className="sm:max-w-[750px]">
+        <DialogHeader>
+          <DialogTitle>
+            {t(
+              "organization.assignAdminToOrganization",
+              "Assign admin to organization"
+            )}
+          </DialogTitle>
+          <DialogDescription>
+            {t(
+              "organization.assignOrgAdminInstructions",
+              "Select an organization and a user to assign as its administrator."
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <div className="space-y-2">
+              <Label className="text-sm font-semibold">
+                {t("organization.organizations")}{" "}
+                <span className="text-red-500">*</span>
+              </Label>
+              {isLoadingOrgs ? (
+                <div className="flex h-[350px] items-center justify-center">
+                  <Loader2 className="h-6 w-6 animate-spin text-primary" />
+                </div>
+              ) : (
+                <ScrollArea className="h-[350px] rounded-md border border-gray-200 p-2 dark:border-gray-700">
+                  <div className="space-y-1">
+                    {organizationsResponse?.items?.map((organization) => (
+                      <button
+                        key={organization.id}
+                        type="button"
+                        onClick={() =>
+                          handleOrganizationChange(organization.id)
+                        }
+                        className={cn(
+                          "flex w-full items-center justify-between rounded-md px-3 py-2 text-left text-sm transition-colors",
+                          selectedOrg === organization.id
+                            ? "bg-green-200 text-green-800 dark:bg-green-900/40 dark:text-green-300"
+                            : "text-gray-700 hover:bg-green-100 dark:text-gray-300 dark:hover:bg-green-900/30"
+                        )}
+                      >
+                        <span>{localizedName(organization.name)}</span>
+                        {selectedOrg === organization.id && (
+                          <Check className="h-4 w-4" />
+                        )}
+                      </button>
+                    ))}
+                  </div>
+                </ScrollArea>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <Label className="text-sm font-semibold">
+                {t("organization.users")}{" "}
+                <span className="text-red-500">*</span>
+              </Label>
+              {!selectedOrg ? (
+                <div className="flex h-[350px] items-center justify-center rounded-md border border-gray-200 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+                  <p className="text-center text-sm">
+                    {t("organization.selectOrganizationFirst")}
+                  </p>
+                </div>
+              ) : isLoadingEmployees ? (
+                <div className="flex h-[350px] items-center justify-center">
+                  <Loader2 className="h-6 w-6 animate-spin text-primary" />
+                </div>
+              ) : (
+                <div className="space-y-2">
+                  <Input
+                    value={search}
+                    onChange={(event) => setSearch(event.target.value)}
+                    placeholder={t(
+                      "organization.searchOrganizationUsers",
+                      "Search organization users"
+                    )}
+                  />
+                  <ScrollArea className="h-[308px] rounded-md border border-gray-200 p-2 dark:border-gray-700">
+                    <div className="space-y-1">
+                      {filteredEmployees.map((employee) => (
+                        <button
+                          key={employee.user.id}
+                          type="button"
+                          onClick={() => setSelectedUser(employee.user.id)}
+                          className={cn(
+                            "flex w-full items-center justify-between rounded-md px-3 py-2 text-left text-sm transition-colors",
+                            selectedUser === employee.user.id
+                              ? "bg-purple-200 text-purple-800 dark:bg-purple-900/40 dark:text-purple-300"
+                              : "text-gray-700 hover:bg-purple-100 dark:text-gray-300 dark:hover:bg-purple-900/30"
+                          )}
+                        >
+                          <div className="min-w-0 flex-1">
+                            <p className="truncate font-medium">
+                              {localizedName(employee.user.name) ||
+                                employee.user.email}
+                            </p>
+                            <p className="truncate text-xs text-gray-500 dark:text-gray-400">
+                              {employee.user.email}
+                            </p>
+                          </div>
+                          {selectedUser === employee.user.id && (
+                            <Check className="ml-2 h-4 w-4 shrink-0" />
+                          )}
+                        </button>
+                      ))}
+                      {filteredEmployees.length === 0 && (
+                        <p className="mt-2 text-center text-sm text-gray-500 dark:text-gray-400">
+                          {t("organization.noUsersFound")}
+                        </p>
+                      )}
+                    </div>
+                  </ScrollArea>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleClose}
+              disabled={isAssigning}
+            >
+              {t("common.Cancel")}
+            </Button>
+            <Button
+              type="submit"
+              disabled={isAssigning || !selectedOrg || !selectedUser}
+              className="bg-green-600 hover:bg-green-700"
+            >
+              {isAssigning && (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              )}
+              {isAssigning
+                ? t("organization.assigning")
+                : t("organization.assignUser")}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/organizationAdmins/OrganizationAdminList.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/organizationAdmins/OrganizationAdminList.tsx
new file mode 100644
index 000000000..d2329a493
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/organizationAdmins/OrganizationAdminList.tsx
@@ -0,0 +1,243 @@
+import { useEffect, useRef, useState } from "react";
+import { useOrganizationAdmins } from "@/super-admin/hooks/useOrganizationAdmins";
+import { AssignedAdminsDto } from "@/shared/dto/organization/orgAdminsDto";
+import { toast } from "@/shared/common/ui/use-toast";
+import { useUserRoles } from "@/super-admin/hooks/useUserRoles";
+import { AdminRemoveConfirm } from "./RemoveAdminConfirm";
+import { Button } from "@/shared/common/ui/button";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { Phone, ChevronLeft, ChevronRight } from "lucide-react";
+
+export const OrganizationAdminList = ({
+  organizationId,
+}: {
+  organizationId: string;
+}) => {
+  const { resendInvitation, getAllAdminById } = useOrganizationAdmins();
+  const { removeUnitAdmin } = useUserRoles();
+  const localizedName = useLocalizedName();
+
+  const [admins, setAdmins] = useState<AssignedAdminsDto[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [isResending, setIsResending] = useState<boolean>(true);
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+  const [resendingEmail, setResendingEmail] = useState<string | null>(null);
+  const [take, setTake] = useState(10);
+  const [skip, setSkip] = useState(0);
+  const [totalCount, setTotalCount] = useState(0);
+  const pageSize = 10;
+  const hasFetched = useRef(false);
+
+  useEffect(() => {
+    const fetchAdmins = async () => {
+      try {
+        setIsLoading(true);
+        const res = await getAllAdminById(organizationId || "", { take, skip });
+        setAdmins(res?.data?.items || []);
+
+        // Set total count only on first load
+        if (!hasFetched.current && res?.data?.count) {
+          setTotalCount(res.data.count);
+          hasFetched.current = true;
+        }
+      } catch (err) {
+        toast({
+          title: "Error",
+          description: "Failed to fetch admins.",
+          variant: "destructive",
+        });
+        console.error("Fetch admins error:", err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    if (organizationId) {
+      fetchAdmins();
+    }
+  }, [take, skip, organizationId]);
+
+  const handleNextPage = () => {
+    const newSkip = skip + pageSize;
+    if (newSkip < totalCount) {
+      setSkip(newSkip);
+      setTake((prev) => prev + pageSize);
+    }
+  };
+
+  const handlePrevPage = () => {
+    if (skip > 0) {
+      const newSkip = Math.max(0, skip - pageSize);
+      setSkip(newSkip);
+      setTake((prev) => Math.max(pageSize, prev - pageSize));
+    }
+  };
+
+  const currentPage = Math.floor(skip / pageSize) + 1;
+  const totalPages = Math.ceil(totalCount / pageSize);
+  const hasNextPage = skip + pageSize < totalCount;
+  const hasPrevPage = skip > 0;
+
+  const refetchAdmins = () => {
+    // Reset to first page and refetch
+    setTake(10);
+    setSkip(0);
+    hasFetched.current = false;
+  };
+
+  const handleRemove = async (adminId: string) => {
+    try {
+      setDeletingId(adminId);
+      await removeUnitAdmin({
+        organizationId,
+        userId: adminId,
+      });
+      refetchAdmins();
+      toast({
+        title: "Admin removed successfully.",
+        variant: "success",
+        style: {
+          padding: "8px 16px",
+          minHeight: "36px",
+          color: "var(--primary-800)",
+          backgroundColor: "var(--primary-100)",
+          fontWeight: "600",
+          fontSize: "14px",
+        },
+      });
+    } catch (err) {
+      toast({
+        title: "Error",
+        description: "Failed to remove admin.",
+        variant: "destructive",
+      });
+      console.error("Remove admin error:", err);
+    } finally {
+      setDeletingId(null);
+    }
+  };
+
+  const handleResend = async (admin: AssignedAdminsDto) => {
+    try {
+      setIsResending(true);
+      setResendingEmail(admin.email || null);
+      await resendInvitation({
+        email: admin.email || "",
+        phoneNumber: admin.phoneNumber || "",
+      });
+
+      toast({
+        title: "Success",
+        description: "Invitation sent successfully.",
+        variant: "success",
+        style: {
+          padding: "8px 16px",
+          minHeight: "36px",
+          color: "var(--primary-800)",
+          backgroundColor: "var(--primary-100)",
+          fontWeight: "600",
+          fontSize: "14px",
+        },
+      });
+    } catch (err) {
+      toast({
+        title: "Error",
+        description: "Failed to resend invitation.",
+        variant: "destructive",
+      });
+      console.error("Resend invitation error:", err);
+    } finally {
+      setIsResending(false);
+      setResendingEmail(null);
+    }
+  };
+
+  if (isLoading) {
+    return <p className="text-sm text-muted-foreground">Loading admins...</p>;
+  }
+
+  if (admins.length === 0) {
+    return <p className="text-sm text-muted-foreground">No admins assigned.</p>;
+  }
+  return (
+    <div className="space-y-4">
+      <div className="space-y-3">
+        {admins.map((admin) => (
+          <div
+            key={admin.id}
+            className="rounded-xl p-4 bg-white dark:bg-gray-800 shadow flex justify-between items-center border border-gray-200 dark:border-gray-700 transition hover:bg-primary-50 dark:hover:bg-primary-900/20"
+          >
+            <div>
+              <p className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                {localizedName(admin?.name) || "Unnamed"}
+              </p>
+              <p className="text-xs text-gray-600 dark:text-gray-300">
+                {admin?.email}
+              </p>
+
+              <p className="text-xs text-gray-500 dark:text-gray-400">
+                Username: {admin?.username}
+              </p>
+
+              {/* ✅ Fixed phone number UI */}
+              <div className="flex items-center gap-1 text-sm text-gray-900 dark:text-gray-100">
+                <Phone className="w-4 h-4 text-gray-500 dark:text-gray-400" />
+                <span>{admin?.phoneNumber || "No phone number"}</span>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2">
+              {!admin.hasSetPassword && (
+                <Button
+                  className="bg-white dark:bg-gray-900 text-primary-600 dark:text-primary-400 border border-primary-600 dark:border-primary-500 hover:bg-primary-600 dark:hover:bg-primary-700 hover:text-white"
+                  onClick={() => handleResend(admin)}
+                  disabled={isResending && resendingEmail === admin.email}
+                >
+                  {isResending && resendingEmail === admin.email
+                    ? "Sending..."
+                    : "Resend"}
+                </Button>
+              )}
+
+              <AdminRemoveConfirm
+                onConfirm={() => handleRemove(admin.id)}
+                loading={deletingId === admin.id}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Pagination Controls */}
+      {totalCount > pageSize && (
+        <div className="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handlePrevPage}
+            disabled={!hasPrevPage}
+            className="flex items-center gap-2"
+          >
+            <ChevronLeft className="w-4 h-4" />
+            Previous
+          </Button>
+
+          <span className="text-sm text-gray-600 dark:text-gray-300">
+            Page {currentPage} of {totalPages} ({totalCount} total)
+          </span>
+
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleNextPage}
+            disabled={!hasNextPage}
+            className="flex items-center gap-2"
+          >
+            Next
+            <ChevronRight className="w-4 h-4" />
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/organizationAdmins/OrganizationAdmins.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/organizationAdmins/OrganizationAdmins.tsx
new file mode 100644
index 000000000..81fcaff80
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/organizationAdmins/OrganizationAdmins.tsx
@@ -0,0 +1,134 @@
+import { useState } from "react";
+import { Button } from "@/shared/common/ui/button";
+import { Link } from "react-router-dom";
+import { Plus, Loader2, UserPlus } from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "../../../shared/common/ui/card";
+import { toast } from "sonner";
+import { AdvancedTable } from "../../../shared/common/ui/table/AdvancedTable";
+import { OrganizationAdminsColumnDefn } from "./OrganizationAdminsColumnDefn";
+import { useOrganizations } from "@/super-admin/hooks/useOrganizations";
+import { AssignOrgAdminDialog } from "./AssignOrgAdminDialog";
+import { useTranslation } from "react-i18next";
+import { useLocalizedName } from "@/shared/common/localizedName";
+
+export default function OrganizationAdmins() {
+  const [pageIndex, setPageIndex] = useState(0); // starts at 0
+  const pageSize = 10;
+  const { t } = useTranslation();
+  const localizedName = useLocalizedName();
+  const [isAssignDialogOpen, setIsAssignDialogOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const { organizationsAdminsResponse, isLoading, isError, refetch } =
+    useOrganizations("Admin", {
+      take: pageSize,
+      skip: pageIndex * pageSize,
+      orderBy: "createdAt",
+      order: "createdAt:Desc",
+      name: searchTerm || undefined,
+    });
+
+  const handlePageChange = (newPage: number) => {
+    setPageIndex(newPage);
+  };
+
+  const handleSearchChange = (term: string) => {
+    setSearchTerm(term);
+    setPageIndex(0); // Reset to first page when search term changes
+  };
+
+  const handleRefresh = () => {
+    refetch();
+  };
+
+  if (isLoading) {
+    return (
+      <div className="p-6 flex items-center justify-center h-64">
+        <div className="flex flex-col items-center gap-2">
+          <Loader2 className="h-8 w-8 animate-spin text-primary" />
+          <div className="text-sm text-muted-foreground">
+            {t("organization.loadingAdmins")}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <div className="p-6 flex items-center justify-center h-64">
+        <div className="flex flex-col items-center gap-4">
+          <div className="text-red-500 font-medium">
+            {t("organization.errorLoadingAdmins")}
+          </div>
+          <Button variant="outline" onClick={() => refetch()}>
+            {t("organization.retry")}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="p-6 space-y-6 dark:bg-gray-900">
+        <Card className="col-span-2 shadow-none border-none bg-transparent dark:bg-transparent px-0">
+          <CardHeader className="flex flex-row justify-between items-center px-0">
+            <CardTitle className="text-xl font-semibold dark:text-white">
+              {t("organization.organizationAdmins")}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="px-0 dark:bg-transparent">
+            <AdvancedTable
+              columns={OrganizationAdminsColumnDefn(
+                localizedName as (name?: { am?: string; en?: string }) => string
+              )}
+              data={organizationsAdminsResponse?.items || []}
+              tableName="Organization Admins"
+              toolBarPosition="right"
+              refresh={handleRefresh}
+              onGlobalFilterChange={handleSearchChange}
+              disableClientFiltering={true}
+              extraToolbar={
+                <div className="flex gap-2">
+                  <Button
+                    onClick={() => setIsAssignDialogOpen(true)}
+                    className="bg-[#4A6CF7] hover:bg-[#3a5ad4] text-white px-5 py-2 rounded-md text-sm font-medium shadow-md"
+                  >
+                    <UserPlus className="w-4 h-4 mr-2" />
+                    {t("organization.assignAdmin")}
+                  </Button>
+                  <Link to="/user-management/add_admin">
+                    <Button className="px-5 py-2 rounded-md text-sm font-medium shadow-md">
+                      <Plus className="w-4 h-4 mr-2" />
+                      {t("organization.addAdmin")}
+                    </Button>
+                  </Link>
+                </div>
+              }
+              itemCount={organizationsAdminsResponse?.count || 0}
+              pageIndex={pageIndex}
+              onPageChange={handlePageChange}
+              nextFunction={() => handlePageChange(pageIndex + 1)}
+              prevFunction={() => handlePageChange(Math.max(pageIndex - 1, 0))}
+            />
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Assign Admin Dialog */}
+      <AssignOrgAdminDialog
+        isOpen={isAssignDialogOpen}
+        onClose={() => setIsAssignDialogOpen(false)}
+        onSuccess={() => {
+          refetch();
+          toast.success(t("organization.adminAssignedSuccess"));
+        }}
+      />
+    </>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/organizationAdmins/OrganizationAdminsActions.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/organizationAdmins/OrganizationAdminsActions.tsx
new file mode 100644
index 000000000..812b0cb29
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/organizationAdmins/OrganizationAdminsActions.tsx
@@ -0,0 +1,80 @@
+import React from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../../shared/common/ui/dropdown-menu";
+import { Edit, MoreHorizontal, Trash, UserCheck, UserX } from "lucide-react";
+import { Button } from "../../../shared/common/ui/button";
+import { Link } from "react-router-dom";
+import { OrganizationAdmin } from "@/super-admin/services/api/organizationAdminService";
+import { toast } from "sonner";
+
+interface OrganizationAdminsActionsProps {
+  rowData: OrganizationAdmin;
+}
+const OrganizationAdminsActions: React.FC<OrganizationAdminsActionsProps> = ({
+  rowData,
+}) => {
+  const handleDeleteClick = () => {
+    toast.warning("Delete functionality not implemented yet");
+  };
+
+  const handleStatusChange = (status: string) => {
+    toast.info(`Admin status change to ${status} not implemented yet`);
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="h-8 w-8 p-0">
+          <span className="sr-only">Open menu</span>
+          <MoreHorizontal className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuLabel>Actions</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Link
+            to={`/add_admin?id=${rowData.id}`}
+            className="flex items-center w-full"
+          >
+            <Edit className="mr-2 h-4 w-4" />
+            Edit
+          </Link>
+        </DropdownMenuItem>
+        {rowData.status !== "active" && (
+          <DropdownMenuItem
+            onClick={() => handleStatusChange("active")}
+            className="flex items-center"
+          >
+            <UserCheck className="mr-2 h-4 w-4" />
+            Activate
+          </DropdownMenuItem>
+        )}
+        {rowData.status === "active" && (
+          <DropdownMenuItem
+            onClick={() => handleStatusChange("inactive")}
+            className="flex items-center"
+          >
+            <UserX className="mr-2 h-4 w-4" />
+            Deactivate
+          </DropdownMenuItem>
+        )}
+        <DropdownMenuItem
+          onClick={() => handleDeleteClick()}
+          className="flex items-center"
+        >
+          <Trash className="mr-2 h-4 w-4" />
+          Delete
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export default OrganizationAdminsActions;
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/organizationAdmins/OrganizationAdminsColumnDefn.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/organizationAdmins/OrganizationAdminsColumnDefn.tsx
new file mode 100644
index 000000000..4a1e4d33f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/organizationAdmins/OrganizationAdminsColumnDefn.tsx
@@ -0,0 +1,77 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { Button } from "../../../shared/common/ui/button";
+import { ArrowUpDown, Eye } from "lucide-react";
+import { OrganizationAdminsDto } from "@/shared/dto/organization/organizationDto";
+import { StatusCell } from "./StatusCell";
+import { t } from "i18next";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { Link } from "react-router-dom";
+import OrganizationAdminsActions from "./OrganizationAdminsActions";
+
+export const OrganizationAdminsColumnDefn = (
+  localizedName: (name?: { am?: string; en?: string }) => string,
+): ColumnDef<OrganizationAdminsDto>[] => {
+  return [
+    {
+      accessorKey: "name",
+      header: ({ column }) => {
+        return (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+            className="p-0 hover:bg-transparent text-gray-700 dark:text-gray-300"
+            style={{
+              padding: 0,
+            }}
+          >
+            {t("organization.name")}
+            <ArrowUpDown className="p-0 h-4 w-4" />
+          </Button>
+        );
+      },
+      cell: ({ row }) => (
+        <div className="font-medium">{localizedName(row.original.name)}</div>
+      ),
+    },
+    {
+      accessorKey: "status",
+      header: ({ column }) => (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+          className="p-0 hover:bg-transparent text-gray-700 dark:text-gray-300"
+          style={{
+            padding: 0,
+          }}
+        >
+          {t("dashboard.Status")}
+          <ArrowUpDown className="h-4 w-4" />
+        </Button>
+      ),
+      cell: ({ row }) => {
+        const id = row.original.id;
+        return (
+          <StatusCell
+            id={id}
+            // isAssigned={row.original.isAssigned}
+            adminsCount={row.original.adminsCount}
+          />
+        );
+      },
+    },
+    {
+      accessorKey: "actions",
+      header: t("organization.actions") || "Actions",
+      cell: ({ row }) => (
+        <div className="flex gap-2">
+          <Link to={`/super-admin/organizations/${row.original.id}`}>
+            <Button variant="ghost" size="sm">
+              <Eye className="h-4 w-4" />
+            </Button>
+          </Link>
+          <OrganizationAdminsActions rowData={row.original as any} />
+        </div>
+      ),
+    },
+  ];
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/organizationAdmins/RemoveAdminConfirm.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/organizationAdmins/RemoveAdminConfirm.tsx
new file mode 100644
index 000000000..1b5439a3c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/organizationAdmins/RemoveAdminConfirm.tsx
@@ -0,0 +1,59 @@
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from "@/shared/common/ui/alert-dialog";
+import { Button } from "@/shared/common/ui/button";
+import { useTranslation } from "react-i18next";
+
+interface AdminRemoveConfirmProps {
+  onConfirm: () => void;
+  loading?: boolean;
+}
+
+export const AdminRemoveConfirm = ({
+  onConfirm,
+  loading,
+}: AdminRemoveConfirmProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="destructive" size="sm" disabled={loading}>
+          {t("common.remove")}
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            {t("organization.removeAdminTitle")}
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            {t("organization.removeAdminDescription")}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={loading}>
+            {t("common.cancel")}
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={onConfirm}
+            disabled={loading}
+            className="bg-red-600 hover:bg-red-700"
+          >
+            {loading
+              ? t("organization.removingAdmin")
+              : t("organization.confirmRemoveAdmin")}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/organizationAdmins/StatusCell.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/organizationAdmins/StatusCell.tsx
new file mode 100644
index 000000000..45469458f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/organizationAdmins/StatusCell.tsx
@@ -0,0 +1,50 @@
+import { useState } from "react";
+import { Eye } from "lucide-react";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/shared/common/ui/dialog";
+import { OrganizationAdminList } from "./OrganizationAdminList";
+
+export const StatusCell = ({
+  id,
+  adminsCount,
+}: {
+  id: string;
+  adminsCount: number;
+}) => {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  return (
+    <div className="flex items-center gap-2">
+      <div className="font-medium">
+        {adminsCount > 0 
+          ? 
+          `${adminsCount} Admin${adminsCount !== 1 ? "s" : ""}`
+          : "No Admin"}
+      </div>
+
+      {adminsCount > 0 && (
+        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+          <DialogTrigger asChild>
+            <Button variant="ghost" className="p-1 h-auto w-auto">
+              <Eye className="h-4 w-4 text-gray-500 dark:text-gray-400 hover:text-primary" />
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="max-w-md max-h-[80vh] overflow-y-auto">
+            <DialogHeader>
+              <DialogTitle>Assigned Admins</DialogTitle>
+            </DialogHeader>
+            <div className="max-h-[60vh] overflow-y-auto pr-2">
+              <OrganizationAdminList organizationId={id} />
+            </div>
+          </DialogContent>
+        </Dialog>
+      )}
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/AdminRegistrationForm.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/AdminRegistrationForm.tsx
new file mode 100644
index 000000000..05ae4bbca
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/AdminRegistrationForm.tsx
@@ -0,0 +1,272 @@
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useOrganizations } from "@/super-admin/hooks/useOrganizations";
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/shared/common/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { Input } from "@/shared/common/ui/input";
+import { Button } from "@/shared/common/ui/button";
+import { Label } from "@/shared/common/ui/label";
+import { useOrganizationAdmins } from "@/super-admin/hooks/useOrganizationAdmins";
+import { OrganizationAdminPayload, UnitAdminPayload } from "@/super-admin/services/api/organizationAdminService";
+import { useNavigate } from "react-router-dom";
+import { t } from "i18next";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useEffect, useState } from "react";
+import { useAuth } from "@/shared/context/AuthContext";
+import { useUnit } from "@/user-management/hooks/useUnit";
+
+const simplifiedSchema = z.object({
+  name: z.object({
+    am: z.string().min(1, t("organization.amharicNameRequired")),
+    en: z.string().min(1, t("organization.englishNameRequired")),
+  }),
+  email: z.string().email(t("organization.invalidEmail")),
+  username: z.string().min(3, t("organization.usernameMinLength")),
+  unitId: z.string().min(1, t("organization.organizationRequired")),
+  phone: z
+    .string()
+    .regex(/^(\+251|0)?9\d{8}$/, t("organization.invalidPhoneNumber")),
+});
+
+type SimplifiedFormValues = z.infer<typeof simplifiedSchema>;
+
+export const AdminRegistrationForm = () => {
+  const navigate = useNavigate();
+  const localizedName = useLocalizedName();
+
+  const { organizationsResponse } = useOrganizations("Org", {
+    take: 3000,
+  });
+  const {  createUnitAdmin, isCreating } = useOrganizationAdmins();
+  const { user } = useAuth();
+
+
+const [selectedOrgId, setSelectedOrgId] = useState<string>("");
+ const { data: unitsResponse, isLoading: isLoadingUnits } = useUnit().getList(
+   selectedOrgId || "",
+   { take: 300, skip: 0 }
+ );
+
+  // Add state for selected unitId
+  // Default: if super_admin => "All", otherwise wait for units
+  const [selectedUnitId, setSelectedUnitId] = useState<string>("All");
+
+  useEffect(() => {
+    // If there’s no selectedUnitId yet, default to first unit (if any), otherwise keep "All"
+    if (!selectedUnitId) {
+      if (unitsResponse?.data?.items?.length) {
+        setSelectedUnitId(unitsResponse.data.items[0].id);
+      } else {
+        setSelectedUnitId("All");
+      }
+    }
+  }, [unitsResponse, selectedUnitId]);
+
+  const form = useForm<SimplifiedFormValues>({
+    resolver: zodResolver(simplifiedSchema),
+    defaultValues: {
+      name: { am: "", en: "" },
+      email: "",
+      username: "",
+      unitId: "",
+      phone: "",
+    },
+  });
+
+  const onSubmit = async (values: SimplifiedFormValues) => {
+    const payload: UnitAdminPayload = {
+      email: values.email,
+      name: values.name,
+      unitId: values.unitId,
+      username: values.username,
+      phoneNumber: values.phone,
+    };
+    createUnitAdmin({
+      payload,
+      successCallback: () => {
+        navigate("/user-management/organization_admins");
+      },
+    });
+  };
+
+  return (
+    <Card className="max-w-2xl mx-auto shadow-md border-gray-200 dark:border-gray-700">
+      <CardHeader>
+        <CardTitle className="text-xl font-semibold text-gray-800 dark:text-gray-100">
+          {t("organization.registerAdminTitle")}
+        </CardTitle>
+        <CardDescription className="text-gray-500 dark:text-gray-400">
+          {t("organization.registerAdminDescription")}
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+          <div className="grid grid-cols-2 gap-6">
+            <div className="space-y-2">
+              <Label htmlFor="name.en">
+                {t("organization.nameEnglish")}{" "}
+                <span className="text-red-500">*</span>
+              </Label>
+              <Input
+                id="name.en"
+                {...form.register("name.en")}
+                placeholder={t("organization.enterEnglishName")}
+              />
+              {form.formState.errors.name?.en && (
+                <p className="text-red-500 text-xs">
+                  {form.formState.errors.name.en.message}
+                </p>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="name.am">
+                {t("organization.nameAmharic")}{" "}
+                <span className="text-red-500">*</span>
+              </Label>
+              <Input
+                id="name.am"
+                {...form.register("name.am")}
+                placeholder={t("organization.enterAmharicName")}
+              />
+              {form.formState.errors.name?.am && (
+                <p className="text-red-500 text-xs">
+                  {form.formState.errors.name.am.message}
+                </p>
+              )}
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="email">
+              {t("organization.email")} <span className="text-red-500">*</span>
+            </Label>
+            <Input
+              id="email"
+              type="email"
+              {...form.register("email")}
+              placeholder={t("organization.emailExample")}
+            />
+            {form.formState.errors.email && (
+              <p className="text-red-500 text-xs">
+                {form.formState.errors.email.message}
+              </p>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="username">
+              {t("organization.username")}{" "}
+              <span className="text-red-500">*</span>
+            </Label>
+            <Input
+              id="username"
+              {...form.register("username")}
+              placeholder={t("organization.enterUsername")}
+            />
+            {form.formState.errors.username && (
+              <p className="text-red-500 text-xs">
+                {form.formState.errors.username.message}
+              </p>
+            )}
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="phone">
+              {t("organization.phoneNumber")}{" "}
+              <span className="text-red-500">*</span>
+            </Label>
+            <Input
+              id="phone"
+              type="tel"
+              {...form.register("phone")}
+              placeholder={t("organization.phoneNumberExample")}
+            />
+            {form.formState.errors.phone && (
+              <p className="text-red-500 text-xs">
+                {form.formState.errors.phone.message}
+              </p>
+            )}
+          </div>
+
+          <div className="space-y-2 ">
+            <Label htmlFor="organizationId">
+              {t("organization.organization")}{" "}
+              <span className="text-red-500">*</span>
+            </Label>
+            <Select
+              value={selectedOrgId}
+              onValueChange={(val: string) => {
+                setSelectedOrgId(val);
+                form.setValue("unitId", ""); // reset unit when org changes
+              }}>
+              <SelectTrigger>
+                <SelectValue
+                  placeholder={t("organization.selectOrganization")}
+                />
+              </SelectTrigger>
+              <SelectContent>
+                {organizationsResponse?.items
+                  .filter((org) => org.status === "Active")
+                  .map((org) => (
+                    <SelectItem key={org.id} value={org.id}>
+                      {localizedName(org.name)}
+                    </SelectItem>
+                  ))}
+              </SelectContent>
+            </Select>
+            {form.formState.errors.unitId && (
+              <p className="text-red-500 text-xs">
+                {form.formState.errors.unitId.message}
+              </p>
+            )}
+          </div>
+          <Select
+            value={form.watch("unitId")}
+            onValueChange={(val: string) => form.setValue("unitId", val)}
+            disabled={!selectedOrgId || isLoadingUnits}>
+            <SelectTrigger>
+              <SelectValue placeholder={t("organization.selectUnit")} />
+            </SelectTrigger>
+            <SelectContent>
+              {unitsResponse?.data?.items?.map((unit:any) => (
+                <SelectItem key={unit.id} value={unit.id}>
+                  {localizedName(unit.name)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          {form.formState.errors.unitId && (
+            <p className="text-red-500 text-xs">
+              {form.formState.errors.unitId.message}
+            </p>
+          )}
+
+          <div className="pt-4">
+            <Button
+              type="submit"
+              disabled={isCreating}
+              className="bg-primary hover:bg-primary/90 text-primary-foreground">
+              {isCreating
+                ? t("organization.registering")
+                : t("organization.registerAdmin")}
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/DeleteOrganizationPopup.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/DeleteOrganizationPopup.tsx
new file mode 100644
index 000000000..dd7dc2d2e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/DeleteOrganizationPopup.tsx
@@ -0,0 +1,62 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/shared/common/ui/alert-dialog";
+import { Button } from "@/shared/common/ui/button";
+import { t } from "i18next";
+import { Trash2 } from "lucide-react";
+import { ReactNode } from "react";
+
+interface DeleteOrganizationPopupProps {
+  organizationName: string;
+  onDelete: () => void;
+  onCancel: () => void;
+  isLoading: boolean;
+  trigger: ReactNode;
+}
+
+export const DeleteOrganizationPopup = ({
+  organizationName,
+  onDelete,
+  onCancel,
+  isLoading,
+  trigger,
+}: DeleteOrganizationPopupProps) => {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>{trigger}</AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{t("organization.deleteOrganization")}</AlertDialogTitle>
+          <AlertDialogDescription>
+            {t("organization.confirmDelete")}{" "}
+            <strong>{organizationName}</strong>? {t("organization.cannotUndo")}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel
+            onClick={onCancel}
+            disabled={isLoading}
+            className="cursor-pointer"
+          >
+            {t("common.Cancel")}
+          </AlertDialogCancel>
+          <AlertDialogAction
+            className="bg-red-600 hover:bg-red-700 text-white cursor-pointer"
+            disabled={isLoading}
+            onClick={onDelete}
+          >
+            {isLoading ? t("organization.deleting") : t("organization.delete")}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/EditOrganizationForm.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/EditOrganizationForm.tsx
new file mode 100644
index 000000000..5a1808974
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/EditOrganizationForm.tsx
@@ -0,0 +1,53 @@
+import { useOrganizations } from "@/super-admin/hooks/useOrganizations";
+import { OrganizationPayload } from "@/shared/services/organizationsService";
+
+import { useEffect, useState } from "react";
+import { OrganizationDto } from "@/shared/dto/organization/organizationDto";
+import OrganizationForm, { FormValues } from "./common/OrganizationForm";
+
+interface EditOrganizationFormProps {
+  id: string;
+}
+
+export const EditOrganizationForm: React.FC<EditOrganizationFormProps> = ({
+  id,
+}) => {
+  const [organizationDetails, setOrganizationDetails] =
+    useState<OrganizationDto>();
+  const { editOrganization, isEditing, getOrganizationByDetails } =
+    useOrganizations("Org");
+
+  const fetchOrganizationDetails = () => {
+    getOrganizationByDetails(id, {
+      onSuccess: (organization: OrganizationDto) => {
+        setOrganizationDetails(organization);
+      },
+    });
+  };
+
+  useEffect(() => {
+    fetchOrganizationDetails();
+  }, []);
+
+  const onSubmit = (values: FormValues) => {
+    const requestData: OrganizationPayload = {
+      key: values.key,
+      name: values.name,
+      organizationTypeId: values.organizationTypeId,
+      isGovernmentOrganization: values.isGovernmentOrganization,
+    };
+    if (values.parentId && values.parentId !== "") {
+      requestData["parentId"] = values.parentId;
+    }
+    editOrganization({ id, payload: requestData });
+  };
+
+  return (
+    <OrganizationForm
+      isLoading={isEditing}
+      onSubmit={(values: FormValues) => onSubmit(values)}
+      type="Edit"
+      organizationDetails={organizationDetails}
+    />
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/ManageOrganizationDrawer.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/ManageOrganizationDrawer.tsx
new file mode 100644
index 000000000..f40e92f56
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/ManageOrganizationDrawer.tsx
@@ -0,0 +1,597 @@
+import { useEffect, useState } from "react";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerClose,
+} from "@/shared/common/ui/drawer";
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "@/shared/common/ui/select";
+import { toast } from "sonner";
+import {
+  useCreateGlobalUnitConfig,
+  useGetListOfGlobalUnitConfig,
+  useUpdateGlobalUnitConfig,
+  useDeleteGlobalUnitConfig,
+  useGetOrganizationConfig,
+  useCreateOrganizationConfig,
+  useUpdateOrganizationConfig,
+  useDeleteOrganizationConfig,
+} from "@/super-admin/hooks/useConfig";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import { Loader2, Trash2 } from "lucide-react";
+import { useUnit } from "@/user-management/hooks/useUnit";
+import { UnitDto } from "@/user-management/dto/unit/unitDto";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { RadioGroup, RadioGroupItem } from "@/shared/common/ui/radio-group";
+import { Switch } from "@/shared/common/ui/switch";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { prefixSuffixService } from "@/user-management/services/api/prefixSuffixService";
+import { useMutation, useQuery } from "@tanstack/react-query";
+export default function ManageOrganizationDrawer({
+  manageOrgConfigOpen,
+  setManageOrgConfigOpen,
+  organizationId,
+}: any) {
+  const { getList } = useUnit();
+  const [unit, setUnit] = useState("");
+  const [maxUnits, setMaxUnits] = useState("");
+  const [employees, setEmployees] = useState("");
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [canReceiveComplaint, setCanReceiveComplaint] = useState(false);
+  const [unitConfigurationId, setUnitConfigurationId] = useState<string | null>(
+    null,
+  );
+
+  const { data: unitsResponse } = organizationId
+    ? getList(organizationId, {
+        take: 300,
+        skip: 0,
+      })
+    : { data: undefined };
+  const localizedName = useLocalizedName();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  const unitConfigQuery = useGetListOfGlobalUnitConfig(organizationId);
+  const orgConfigQuery = useGetOrganizationConfig(organizationId);
+  const [isUnitConfig, setIsUnitConfig] = useState(false);
+
+  const listData = isUnitConfig ? unitConfigQuery.data : orgConfigQuery.data;
+  const isLoading = isUnitConfig
+    ? unitConfigQuery.isLoading
+    : orgConfigQuery.isLoading;
+  const refetch = isUnitConfig
+    ? unitConfigQuery.refetch
+    : orgConfigQuery.refetch;
+
+  const createUnitMutation = useCreateGlobalUnitConfig();
+  const updateUnitMutation = useUpdateGlobalUnitConfig();
+  const deleteUnitMutation = useDeleteGlobalUnitConfig();
+  const createOrgMutation = useCreateOrganizationConfig();
+  const updateOrgMutation = useUpdateOrganizationConfig();
+  const deleteOrgMutation = useDeleteOrganizationConfig();
+
+  const isSubmitting = isUnitConfig
+    ? createUnitMutation.isPending || updateUnitMutation.isPending
+    : createOrgMutation.isPending || updateOrgMutation.isPending;
+  const deleteMutation = isUnitConfig ? deleteUnitMutation : deleteOrgMutation;
+
+  // Org config is 1-per-organization. Auto-load the existing record into edit
+  // mode so submit becomes PUT instead of POST.
+  const existingOrgConfig = (() => {
+    const items = orgConfigQuery.data?.data?.items ?? [];
+    if (!Array.isArray(items)) return null;
+    return (
+      items.find(
+        (it: any) =>
+          (it?.organizationId ?? it?.organization_id) === organizationId,
+      ) ??
+      items[0] ??
+      null
+    );
+  })();
+
+  // Unit config is 1-per-unit. Look up by the selected unit.
+  const existingUnitConfig = (() => {
+    if (!unit) return null;
+    const items = unitConfigQuery.data?.data?.items ?? [];
+    if (!Array.isArray(items)) return null;
+    return (
+      items.find((it: any) => (it?.unitId ?? it?.unit_id) === unit) ?? null
+    );
+  })();
+
+  const singleUnitId =
+    isUnitConfig &&
+    unitsResponse?.data?.items &&
+    Array.isArray(unitsResponse.data.items) &&
+    unitsResponse.data.items.length === 1
+      ? unitsResponse.data.items[0].id
+      : null;
+
+  useEffect(() => {
+    if (!singleUnitId) return;
+    if (unit) return; // keep user selection if already set
+    setUnit(singleUnitId);
+  }, [isUnitConfig, singleUnitId, unit]);
+
+  useEffect(() => {
+    if (isUnitConfig) return;
+    if (existingOrgConfig?.id && editingId !== existingOrgConfig.id) {
+      setEditingId(existingOrgConfig.id);
+      setMaxUnits((existingOrgConfig.maximumNumberOfUnits ?? 0).toString());
+    }
+  }, [isUnitConfig, existingOrgConfig, editingId]);
+
+  useEffect(() => {
+    if (!isUnitConfig) return;
+    if (existingUnitConfig?.id && editingId !== existingUnitConfig.id) {
+      setEditingId(existingUnitConfig.id);
+      setMaxUnits((existingUnitConfig.numberOfSubUnits ?? 0).toString());
+      setEmployees(
+        (existingUnitConfig.numberOfEmployeesPerUnit ?? 0).toString(),
+      );
+    }
+  }, [isUnitConfig, existingUnitConfig, editingId]);
+
+  const handleAddOrUpdate = () => {
+    if (isUnitConfig && !unit) {
+      toast.warning(t("superAdmin.messages.selectUnitWarning"));
+      return;
+    }
+    if (isUnitConfig ? !maxUnits || !employees : !maxUnits) {
+      toast.warning(t("superAdmin.messages.fillAllFields"));
+      return;
+    }
+
+    if (isUnitConfig) {
+      const payload = {
+        unitId: unit,
+        numberOfSubUnits: Number(maxUnits),
+        numberOfEmployeesPerUnit: Number(employees),
+      };
+      const id = editingId || existingUnitConfig?.id || null;
+      if (id) {
+        updateUnitMutation.mutate(
+          { id, data: payload },
+          {
+            onSuccess: () => {
+              toast.success(t("superAdmin.messages.configUpdated"));
+              resetForm();
+              refetch();
+            },
+            onError: handleError,
+          },
+        );
+      } else {
+        createUnitMutation.mutate(payload, {
+          onSuccess: () => {
+            toast.success(t("superAdmin.messages.configAdded"));
+            resetForm();
+            refetch();
+          },
+          onError: (error: any) => handleDuplicateOrError(error),
+        });
+      }
+      return;
+    }
+
+    // Org config — preserve other fields (e.g. canStartReceivingRecord) from
+    // the existing record so we don't clobber the visibility toggle.
+    const payload = {
+      organizationId,
+      maximumNumberOfUnits: Number(maxUnits),
+      ...(existingOrgConfig?.canStartReceivingRecord !== undefined && {
+        canStartReceivingRecord: existingOrgConfig.canStartReceivingRecord,
+      }),
+      ...(existingOrgConfig?.canCreateBranchByItself !== undefined && {
+        canCreateBranchByItself: existingOrgConfig.canCreateBranchByItself,
+      }),
+    };
+    const id = editingId || existingOrgConfig?.id || null;
+    if (id) {
+      updateOrgMutation.mutate(
+        { id, data: payload },
+        {
+          onSuccess: () => {
+            toast.success(t("superAdmin.messages.configUpdated"));
+            resetForm();
+            refetch();
+          },
+          onError: handleError,
+        },
+      );
+    } else {
+      createOrgMutation.mutate(payload, {
+        onSuccess: () => {
+          toast.success(t("superAdmin.messages.configAdded"));
+          resetForm();
+          refetch();
+        },
+        onError: (error: any) => handleDuplicateOrError(error),
+      });
+    }
+  };
+
+  const handleDuplicateOrError = (error: any) => {
+    const status = error?.response?.status;
+    const message: string =
+      error?.response?.data?.message ?? error?.message ?? "";
+    if (status === 400 && /duplicate/i.test(message)) {
+      toast.warning(t("superAdmin.messages.configAlreadyExists"));
+      refetch();
+      return;
+    }
+    handleError(error);
+  };
+
+  const resetForm = () => {
+    setUnit("");
+    setMaxUnits("");
+    setEmployees("");
+    setEditingId(null);
+    setCanReceiveComplaint(false);
+    setUnitConfigurationId(null);
+  };
+
+  const handleEdit = (config: any) => {
+    if (isUnitConfig) {
+      setEditingId(config.id);
+      setUnit(config.unitId ?? "");
+      setMaxUnits((config.numberOfSubUnits ?? 0).toString());
+      setEmployees((config.numberOfEmployeesPerUnit ?? 0).toString());
+    } else {
+      setEditingId(config.id);
+      setMaxUnits((config.maximumNumberOfUnits ?? 0).toString());
+    }
+  };
+
+  const handleDelete = (config: any) => {
+    if (!config?.id) return;
+    deleteMutation.mutate(config.id, {
+      onSuccess: () => {
+        toast.success(t("superAdmin.messages.configDeleted"));
+        if (editingId === config.id) resetForm();
+        refetch();
+      },
+      onError: handleError,
+    });
+  };
+
+  const configType = isUnitConfig
+    ? t("superAdmin.manageConfig.unit")
+    : t("superAdmin.manageConfig.organization");
+
+  const configLevel = isUnitConfig
+    ? t("superAdmin.manageConfig.unitBased")
+    : t("superAdmin.manageConfig.organizationLevel");
+
+  const internalUnitConfigQuery = useQuery({
+    queryKey: ["internal-unit-config", unit],
+    queryFn: () => prefixSuffixService.getInternalConfig(unit),
+    enabled: isUnitConfig && Boolean(unit),
+    staleTime: Infinity,
+    gcTime: Infinity,
+  });
+
+  useEffect(() => {
+    if (!isUnitConfig || !unit) {
+      setUnitConfigurationId(null);
+      setCanReceiveComplaint(false);
+      return;
+    }
+    const internalConfig = internalUnitConfigQuery.data?.data?.items?.[0];
+    if (!internalConfig?.id) {
+      setUnitConfigurationId(null);
+      setCanReceiveComplaint(false);
+      return;
+    }
+    setUnitConfigurationId(internalConfig.id);
+    setCanReceiveComplaint(Boolean(internalConfig.canReceiveComplaint));
+  }, [internalUnitConfigQuery.data, isUnitConfig, unit]);
+
+  const { mutate: updateCanReceiveComplaint, isPending: isUpdatingComplaint } =
+    useMutation({
+      mutationFn: async (checked: boolean) => {
+        if (!unit) throw new Error("Missing unit id");
+
+        // If no internal unit config exists yet, create it first.
+        if (!unitConfigurationId) {
+          await prefixSuffixService.createInternalPrefixSuffix({
+            unitId: unit,
+          });
+        }
+
+        const current = await prefixSuffixService.getInternalConfig(unit);
+        const internalConfig = current.data?.items?.[0];
+        if (!internalConfig?.id) {
+          throw new Error("Failed to resolve unit configuration id");
+        }
+
+        return prefixSuffixService.updateInternalPrefixSuffix(
+          {
+            canReceiveComplaint: checked,
+            unitId: unit,
+          },
+          internalConfig.id,
+        );
+      },
+      onSuccess: (_data, checked) => {
+        setCanReceiveComplaint(checked);
+        internalUnitConfigQuery.refetch();
+      },
+      onError: (err) => {
+        console.error(err);
+        handleError(err);
+      },
+    });
+
+  return (
+    <Drawer open={manageOrgConfigOpen} onOpenChange={setManageOrgConfigOpen}>
+      <DrawerContent className="max-h-[85vh] overflow-hidden flex flex-col top-1/6 bg-white dark:bg-gray-900">
+        <div className="overflow-y-auto flex-1">
+          <DrawerHeader className="pb-4">
+            <DrawerTitle className="text-lg text-primary-700 dark:text-primary-400">
+              {t("superAdmin.manageConfig.title", { type: configType })}
+            </DrawerTitle>
+            <DrawerDescription className="text-primary-600/80 dark:text-primary-300/80 space-y-3">
+              <div>
+                {t("superAdmin.manageConfig.description", {
+                  level: configLevel,
+                })}
+              </div>
+
+              {/* Radio Group for Organization/Unit selection */}
+              <RadioGroup
+                value={isUnitConfig ? "unit" : "org"}
+                onValueChange={(value) => {
+                  setIsUnitConfig(value === "unit");
+                  resetForm();
+                }}
+                className="inline-flex rounded-md bg-gray-100 dark:bg-gray-800 p-1">
+                <RadioGroupItem value="org" id="org-radio" className="hidden" />
+                <label
+                  htmlFor="org-radio"
+                  className={`cursor-pointer px-4 py-1 rounded-md text-sm font-medium transition-all
+      ${
+        !isUnitConfig
+          ? "bg-primary-600 text-white"
+          : "text-primary-700 dark:text-primary-300 hover:bg-primary-200 dark:hover:bg-primary-900/30"
+      }`}>
+                  {t("superAdmin.manageConfig.organization")}
+                </label>
+
+                <RadioGroupItem
+                  value="unit"
+                  id="unit-radio"
+                  className="hidden"
+                />
+                <label
+                  htmlFor="unit-radio"
+                  className={`cursor-pointer px-4 py-1 rounded-md text-sm font-medium transition-all
+      ${
+        isUnitConfig
+          ? "bg-primary-600 text-white"
+          : "text-primary-700 dark:text-primary-300 hover:bg-primary-200 dark:hover:bg-primary-900/30"
+      }`}>
+                  {t("superAdmin.manageConfig.unit")}
+                </label>
+              </RadioGroup>
+
+              {/* Unit Selector */}
+              {isUnitConfig && unitsResponse?.data?.items?.length > 0 && (
+                <div className="pt-2">
+                  <label className="block text-sm font-medium text-primary-700 dark:text-primary-300">
+                    {t("superAdmin.manageConfig.selectUnit")}
+                  </label>
+                  <Select
+                    value={unit}
+                    onValueChange={(value) => setUnit(value)}>
+                    <SelectTrigger className="mt-1 border-primary-400 dark:border-primary-700 dark:bg-gray-800 dark:text-gray-100 focus:ring-primary-500">
+                      <SelectValue
+                        placeholder={t(
+                          "superAdmin.manageConfig.selectUnitPlaceholder",
+                        )}
+                      />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {unitsResponse?.data.items.map((u: UnitDto) => (
+                        <SelectItem key={u.id} value={u.id}>
+                          {localizedName(u.name)}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
+            </DrawerDescription>
+          </DrawerHeader>
+
+          <div className="px-6 space-y-4 pb-4">
+            {/* Input Fields */}
+            <div
+              className={`grid gap-4 ${
+                isUnitConfig ? "grid-cols-2" : "grid-cols-1"
+              }`}>
+              <div>
+                <label className="text-sm font-medium text-primary-700 dark:text-primary-300">
+                  {isUnitConfig
+                    ? t("superAdmin.manageConfig.subOrganizations")
+                    : t(
+                        "superAdmin.manageConfig.maxUnits",
+                        "Maximum Number of Units",
+                      )}
+                </label>
+                <Input
+                  type="number"
+                  min="0"
+                  value={maxUnits}
+                  onChange={(e) => setMaxUnits(e.target.value)}
+                  placeholder={t("superAdmin.manageConfig.subOrgsPlaceholder")}
+                  className="border-primary-400 dark:border-primary-700 dark:bg-gray-800 dark:text-gray-100 focus:ring-primary-500"
+                />
+              </div>
+
+              {isUnitConfig && (
+                <div>
+                  <label className="text-sm font-medium text-primary-700 dark:text-primary-300">
+                    {t("superAdmin.manageConfig.employeesPerOrg")}
+                  </label>
+                  <Input
+                    type="number"
+                    min="0"
+                    value={employees}
+                    onChange={(e) => setEmployees(e.target.value)}
+                    placeholder={t(
+                      "superAdmin.manageConfig.employeesPlaceholder",
+                    )}
+                    className="border-primary-400 dark:border-primary-700 dark:bg-gray-800 dark:text-gray-100 focus:ring-primary-500"
+                  />
+                </div>
+              )}
+
+              {isUnitConfig && (
+                <div className="col-span-2 mt-1">
+                  <div className="flex items-center justify-between rounded-lg border border-primary-200 bg-primary-50/40 px-4 py-3">
+                    <div>
+                      <div className="text-sm font-semibold text-primary-700 dark:text-primary-300">
+                        {t(
+                          "superAdmin.manageConfig.canReceiveComplaint",
+                          "Can Receive Complaint",
+                        )}
+                      </div>
+                      <div className="text-xs text-primary-600/70">
+                        {t(
+                          "superAdmin.manageConfig.canReceiveComplaintDescription",
+                          "Controls whether this unit can accept complaints.",
+                        )}
+                      </div>
+                    </div>
+                    <Switch
+                      checked={canReceiveComplaint}
+                      onCheckedChange={(checked) =>
+                        updateCanReceiveComplaint(checked)
+                      }
+                      disabled={!unit || isUpdatingComplaint}
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Add / Update Button */}
+            <Button
+              onClick={handleAddOrUpdate}
+              className="w-full flex items-center gap-2 bg-primary-600 hover:bg-primary-700 text-white"
+              disabled={isSubmitting}>
+              {isSubmitting && <Loader2 className="h-4 w-4 animate-spin" />}
+              {editingId ||
+              (!isUnitConfig && existingOrgConfig?.id) ||
+              (isUnitConfig && existingUnitConfig?.id)
+                ? t("superAdmin.manageConfig.updateConfiguration")
+                : t("superAdmin.manageConfig.addConfiguration")}
+            </Button>
+
+            {/* Configurations List */}
+            <div className="border border-primary-300 dark:border-primary-800 rounded-lg p-3 space-y-3 mt-4">
+              {isLoading ? (
+                <p className="text-sm text-primary-600/70 text-center py-4">
+                  {t("superAdmin.manageConfig.loading")}
+                </p>
+              ) : listData?.data?.items?.length ? (
+                <div className="max-h-48 overflow-y-auto">
+                  {listData.data.items.map((c: any) => (
+                    <div
+                      key={c.id}
+                      className="flex items-center justify-between border-b border-primary-100 pb-2 last:border-none py-2">
+                      <div>
+                        {isUnitConfig && (
+                          <p className="font-semibold capitalize text-primary-700 text-sm">
+                            {localizedName(
+                              unitsResponse?.data?.items?.find(
+                                (u: UnitDto) => u.id === c.unitId,
+                              )?.name,
+                            ) || c.unitId}
+                          </p>
+                        )}
+                        <p className="text-xs text-primary-600/80">
+                          {isUnitConfig ? (
+                            <>
+                              {c.numberOfSubUnits}{" "}
+                              {t("superAdmin.manageConfig.subOrganizations")} •{" "}
+                              {c.numberOfEmployeesPerUnit}{" "}
+                              {t("superAdmin.manageConfig.employeesPerOrg")}
+                            </>
+                          ) : (
+                            <>
+                              {t(
+                                "superAdmin.manageConfig.maxUnits",
+                                "Maximum Number of Units",
+                              )}
+                              : {c.maximumNumberOfUnits ?? 0}
+                            </>
+                          )}
+                        </p>
+                      </div>
+                      <div className="flex gap-2">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => handleEdit(c)}
+                          className="h-8 px-2 text-xs text-primary-700 dark:text-primary-300 hover:bg-primary-100 dark:hover:bg-primary-900/30">
+                          {t("superAdmin.manageConfig.edit")}
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => handleDelete(c)}
+                          disabled={
+                            deleteMutation.isPending &&
+                            deleteMutation.variables === c.id
+                          }
+                          className="h-8 w-8 p-0 text-primary-700 dark:text-primary-300 hover:bg-primary-100 dark:hover:bg-primary-900/30">
+                          {deleteMutation.isPending &&
+                          deleteMutation.variables === c.id ? (
+                            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                          ) : (
+                            <Trash2 size={14} />
+                          )}
+                        </Button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-sm text-primary-600/70 text-center py-4">
+                  {t("superAdmin.manageConfig.noConfigurations")}
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <DrawerFooter className="pt-4 border-t border-primary-200 dark:border-primary-800 bg-primary-50/40 dark:bg-primary-900/10">
+          <DrawerClose asChild>
+            <Button
+              variant="outline"
+              onClick={resetForm}
+              className="w-full border-primary-500 dark:border-primary-700 text-primary-700 dark:text-primary-300 hover:bg-primary-100 dark:hover:bg-primary-900/30">
+              {t("superAdmin.manageConfig.close")}
+            </Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/NewOrganizationForm.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/NewOrganizationForm.tsx
new file mode 100644
index 000000000..af50d2543
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/NewOrganizationForm.tsx
@@ -0,0 +1,29 @@
+import { useOrganizations } from "@/super-admin/hooks/useOrganizations";
+import { OrganizationPayload } from "@/shared/services/organizationsService";
+
+import OrganizationForm, { FormValues } from "./common/OrganizationForm";
+
+export const NewOrganizationForm = () => {
+  const { createOrganization, isCreating } = useOrganizations("Org");
+
+  const onSubmit = (values: FormValues) => {
+    const requestData: OrganizationPayload = {
+      key: values.key,
+      name: values.name,
+      organizationTypeId: values.organizationTypeId,
+      isGovernmentOrganization: values.isGovernmentOrganization,
+    };
+    if (values.parentId && values.parentId !== "") {
+      requestData["parentId"] = values.parentId;
+    }
+    createOrganization(requestData);
+  };
+
+  return (
+    <OrganizationForm
+      isLoading={isCreating}
+      onSubmit={(values: FormValues) => onSubmit(values)}
+      type="Create"
+    />
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/OrganizationDetail.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/OrganizationDetail.tsx
new file mode 100644
index 000000000..c3d55a010
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/OrganizationDetail.tsx
@@ -0,0 +1,153 @@
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { Badge } from "@/shared/common/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import { SelectItem } from "@/shared/common/ui/select";
+import { Separator } from "@/shared/common/ui/separator";
+import { useOrganizationDetail } from "@/super-admin/hooks/useOrganizations";
+import { useOrganizationTypes } from "@/super-admin/hooks/useOrganizationTypes";
+import { Building, Building2, Home, MapPin, ShieldCheck } from "lucide-react";
+
+interface OrganizationCardProps {
+  id: string;
+}
+
+export const OrganizationCard: React.FC<OrganizationCardProps> = ({ id }) => {
+  const localized = useLocalizedName();
+  const { organizationsDetailResponse, isDetailLoading, isDetailError } =
+    useOrganizationDetail("Org", id);
+  const {
+    organizationTypesResponse,
+    isLoading: isLoadingOrgTypes,
+    isError: orgTypesError,
+  } = useOrganizationTypes();
+
+  if (isDetailLoading) return <div>Loading...</div>;
+  if (isDetailError || !organizationsDetailResponse)
+    return <div>Error loading organization.</div>;
+
+  const org = organizationsDetailResponse.items;
+  const orgType = org.organizationTypeId;
+
+  const formatDate = (dateStr: string) =>
+    new Date(dateStr).toLocaleString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+
+  return (
+    <Card className="w-full max-w-3xl mx-auto shadow-xl rounded-2xl border border-gray-200 bg-white dark:bg-zinc-900 transition hover:shadow-2xl">
+      <CardHeader className="flex items-center gap-3 pb-2 border-b border-gray-200 dark:border-gray-700">
+        <Building2 className="w-7 h-7 text-primary" />
+        <CardTitle className="text-2xl font-bold">
+          {localized(org.name)}
+        </CardTitle>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        {/* Status & Type Badges */}
+        <div className="flex flex-wrap gap-2">
+          {/* Government / Private */}
+          <Badge
+            variant={org.isGovernmentOrganization ? "default" : "outline"}
+            className={`px-3 py-1 rounded-xl ${
+              org.isGovernmentOrganization
+                ? "bg-primary-100 text-primary-800 dark:bg-primary-800 dark:text-primary-100"
+                : "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100"
+            }`}>
+            {org.isGovernmentOrganization ? "Government" : "Private"}
+          </Badge>
+
+          {/* Status: Active / Debarred */}
+          <Badge
+            variant="default"
+            className={`px-3 py-1 rounded-xl ${
+              org.status === "Active"
+                ? "bg-primary-100 text-primary-800 dark:bg-primary-800 dark:text-primary-100"
+                : "bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100"
+            }`}>
+            {org.status}
+          </Badge>
+        </div>
+
+        <Separator className="my-2" />
+
+        {/* Key Details */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm text-gray-700 dark:text-gray-300">
+          {/* Created At */}
+          <div className="order-1">
+            <p className="font-semibold">Created At:</p>
+            <p>{formatDate(org.createdAt)}</p>
+          </div>
+
+          {/* Updated At */}
+          <div className="order-2">
+            <p className="font-semibold">Updated At:</p>
+            <p>{formatDate(org.updatedAt)}</p>
+          </div>
+
+          {/* Key spans full width and comes last */}
+          <div className="sm:col-span-2 order-3">
+            <p className="font-semibold">Key:</p>
+            <p className="break-words">{org.key}</p>
+          </div>
+        </div>
+
+        <Separator className="my-2" />
+        <div className="flex flex-wrap gap-2 items-center">
+          {orgType &&
+            organizationTypesResponse?.items
+              ?.filter((type) => type.id === orgType)
+              .map((type) => {
+                let Icon;
+                let bgColor;
+                let textColor;
+
+                switch (type.key) {
+                  case "super_admin":
+                    Icon = ShieldCheck;
+                    bgColor = "bg-purple-100 dark:bg-purple-800";
+                    textColor = "text-purple-800 dark:text-purple-100";
+                    break;
+                  case "woreda":
+                    Icon = MapPin;
+                    bgColor = "bg-blue-100 dark:bg-blue-800";
+                    textColor = "text-blue-800 dark:text-blue-100";
+                    break;
+                  case "subcity":
+                    Icon = Home;
+                    bgColor = "bg-primary-100 dark:bg-primary-800";
+                    textColor = "text-primary-800 dark:text-primary-100";
+                    break;
+                  case "office":
+                    Icon = Building;
+                    bgColor = "bg-yellow-100 dark:bg-yellow-800";
+                    textColor = "text-yellow-800 dark:text-yellow-100";
+                    break;
+                  default:
+                    Icon = Building;
+                    bgColor = "bg-gray-100 dark:bg-gray-800";
+                    textColor = "text-gray-800 dark:text-gray-100";
+                }
+
+                return (
+                  <span
+                    key={type.id}
+                    className={`flex items-center gap-1 px-3 py-1 rounded-xl font-medium ${bgColor} ${textColor}`}>
+                    <Icon className="w-4 h-4" />
+                    {localized(type.name)}
+                  </span>
+                );
+              })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/Organizations.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/Organizations.tsx
new file mode 100644
index 000000000..87995bb48
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/Organizations.tsx
@@ -0,0 +1,263 @@
+import { useState, useMemo, useEffect } from "react";
+import { useOrganizations } from "@/super-admin/hooks/useOrganizations";
+import { Button } from "@/shared/common/ui/button";
+import { AdvancedTable } from "../../../shared/common/ui/table/AdvancedTable";
+import { OrganizationsColumnDefn } from "./OrganizationsColumnDefn";
+import { Link } from "react-router-dom";
+import { Loader, Plus, ChevronDown, ChevronRight } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "../../../shared/common/ui/card";
+import { WithPermission } from "@/shared/hooks/useHas";
+import { OrganizationDto } from "@/shared/dto/organization/organizationDto";
+import { useLocalizedName } from "@/shared/common/localizedName";
+
+export default function Organizations() {
+  const [pageIndex, setPageIndex] = useState(0); // starts at 0
+  const [expandedParents, setExpandedParents] = useState<Set<string>>(
+    new Set()
+  );
+  const [searchTerm, setSearchTerm] = useState("");
+  const pageSize = 10; // 10 organizations per page
+
+  // Reset to first page whenever the search term changes so users land on
+  // the first page of matches instead of an empty later page.
+  useEffect(() => {
+    setPageIndex(0);
+  }, [searchTerm]);
+  const { t } = useTranslation();
+  const localizedName = useLocalizedName();
+  const { organizationsResponse, isLoading, refetch } = useOrganizations(
+    "Org",
+    {
+      take: 1000, // Get all organizations to build hierarchy
+      skip: 0,
+      orderBy: "createdAt",
+      order: "createdAt:Desc",
+    }
+  );
+
+  const handlePageChange = (newPage: number) => {
+    setPageIndex(newPage);
+  };
+
+  const toggleExpanded = (parentId: string) => {
+    setExpandedParents((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(parentId)) {
+        newSet.delete(parentId);
+      } else {
+        newSet.add(parentId);
+      }
+      return newSet;
+    });
+  };
+
+  // Create a map of organizations for quick parent lookup
+  const organizationMap = useMemo(() => {
+    const map = new Map<string, OrganizationDto>();
+    (organizationsResponse?.items || []).forEach((org) => {
+      map.set(org.id, org);
+    });
+    return map;
+  }, [organizationsResponse?.items]);
+
+  // Build hierarchical structure for dropdown display
+  const buildHierarchy = (orgs: OrganizationDto[]) => {
+    const root: OrganizationDto[] = [];
+    const children = new Map<string, OrganizationDto[]>();
+
+    // Separate root and children
+    orgs.forEach((org) => {
+      if (org.parentId) {
+        if (!children.has(org.parentId)) {
+          children.set(org.parentId, []);
+        }
+        children.get(org.parentId)!.push(org);
+      } else {
+        root.push(org);
+      }
+    });
+
+    return { root, children };
+  };
+
+  const allOrganizations = useMemo(
+    () => organizationsResponse?.items || [],
+    [organizationsResponse?.items],
+  );
+  const { root, children } = buildHierarchy(allOrganizations);
+
+  // When searching, match across ALL orgs (including children) by name in
+  // either language and display the results as a flat list. When not
+  // searching, fall back to the normal hierarchical view of root orgs.
+  const trimmedSearch = searchTerm.trim().toLowerCase();
+  const isSearching = trimmedSearch.length > 0;
+
+  const searchMatches = useMemo(() => {
+    if (!isSearching) return [] as OrganizationDto[];
+    return allOrganizations.filter(
+      (org) =>
+        (org.name?.en || "").toLowerCase().includes(trimmedSearch) ||
+        (org.name?.am || "").toLowerCase().includes(trimmedSearch),
+    );
+  }, [allOrganizations, isSearching, trimmedSearch]);
+
+  // The base list to paginate over — full root in normal mode, the flat set
+  // of matched orgs in search mode.
+  const baseList = isSearching ? searchMatches : root;
+
+  // Paginate
+  const startIndex = pageIndex * pageSize;
+  const endIndex = startIndex + pageSize;
+  const paginatedBase = baseList.slice(startIndex, endIndex);
+
+  // Build the final organizations list
+  const organizations = useMemo(() => {
+    const result: (OrganizationDto & {
+      isChild?: boolean;
+      parentName?: string;
+    })[] = [];
+
+    if (isSearching) {
+      // Flat search results — annotate with parent name if it's a child
+      paginatedBase.forEach((org) => {
+        const parent = org.parentId ? organizationMap.get(org.parentId) : null;
+        result.push({
+          ...org,
+          isChild: !!org.parentId,
+          parentName: parent ? parent.name.en : undefined,
+        });
+      });
+      return result;
+    }
+
+    paginatedBase.forEach((parent) => {
+      // Add parent organization
+      result.push(parent);
+
+      // Add children if parent is expanded
+      if (expandedParents.has(parent.id)) {
+        const parentChildren = children.get(parent.id) || [];
+        parentChildren.forEach((child) => {
+          result.push({
+            ...child,
+            isChild: true,
+            parentName: parent.name.en,
+          });
+        });
+      }
+    });
+
+    return result;
+  }, [paginatedBase, children, expandedParents, isSearching, organizationMap]);
+
+  // Create custom column definition with expandable functionality
+  const customColumns = useMemo(() => {
+    return OrganizationsColumnDefn.map((column) => {
+      if ("accessorKey" in column && column.accessorKey === "name.en") {
+        return {
+          ...column,
+          cell: ({ row }: any) => {
+            const org = row.original;
+            const isChild = org.isChild || false;
+            const parentName = org.parentName;
+            const hasChildren = children.has(org.id);
+            const isExpanded = expandedParents.has(org.id);
+
+            return (
+              <div className="flex items-center gap-2 min-w-0">
+                {hasChildren && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-6 w-6 p-0 flex-shrink-0"
+                    onClick={() => toggleExpanded(org.id)}
+                  >
+                    {isExpanded ? (
+                      <ChevronDown className="h-4 w-4" />
+                    ) : (
+                      <ChevronRight className="h-4 w-4" />
+                    )}
+                  </Button>
+                )}
+
+                <div className="font-medium flex items-center gap-2 min-w-0 flex-1 overflow-hidden">
+                  {isChild && (
+                    <span className="text-gray-400 dark:text-gray-500 flex-shrink-0">└─</span>
+                  )}
+                  <div className="min-w-0 flex-1">
+                    <div className="truncate" title={org.name.en}>
+                      {localizedName(org.name)}
+                    </div>
+                    {parentName && (
+                      <div
+                        className="text-sm text-gray-500 dark:text-gray-400 font-normal truncate"
+                        title={`under ${parentName}`}
+                      >
+                        (under {parentName})
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            );
+          },
+        };
+      }
+      return column;
+    });
+  }, [children, expandedParents, localizedName]);
+
+  if (isLoading) {
+    return (
+      <div>
+        <Loader />
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 space-y-6">
+      <Card className="col-span-2 shadow-none border-none bg-transparent px-0">
+        <CardHeader className="flex flex-row justify-between items-center px-0">
+          <CardTitle className="text-xl font-semibold ">
+            {t("organization.organizations")}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="px-0">
+          <AdvancedTable
+            columns={customColumns}
+            data={organizations}
+            tableName="Organizations"
+            toolBarPosition="right"
+            itemCount={baseList.length}
+            pageSize={pageSize}
+            onGlobalFilterChange={setSearchTerm}
+            extraToolbar={
+              <WithPermission
+                perms={["create:organization", "activate:organization"]}
+              >
+                <Link to="/user-management/organizations/new">
+                  <Button className="px-5 py-2 rounded-md text-sm font-medium shadow-md">
+                    <Plus className="w-4 h-4 mr-2" />
+                    {t("organization.newOrganization")}
+                  </Button>
+                </Link>
+              </WithPermission>
+            }
+            pageIndex={pageIndex}
+            onPageChange={handlePageChange}
+            nextFunction={() => handlePageChange(pageIndex + 1)}
+            prevFunction={() => handlePageChange(Math.max(pageIndex - 1, 0))}
+            refresh={refetch}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/OrganizationsActions.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/OrganizationsActions.tsx
new file mode 100644
index 000000000..66fea9adc
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/OrganizationsActions.tsx
@@ -0,0 +1,169 @@
+import { OrganizationDto } from "@/shared/dto/organization/organizationDto";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import { Button } from "../../../shared/common/ui/button";
+import {
+  Archive,
+  Delete,
+  Edit,
+  Eye,
+  MoreHorizontal,
+  Settings,
+} from "lucide-react";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { OrganizationActivateOrDeactivationPopup } from "./common/OrganizationActivateOrDeactivationPopup";
+import { useOrganizations } from "@/super-admin/hooks/useOrganizations";
+
+import { useTranslation } from "react-i18next";
+import ManageOrganizationDrawer from "./ManageOrganizationDrawer";
+import { useArchiveActions } from "@/user-management/hooks/useArchived";
+interface OrganizationsActionsProps {
+  rowData: OrganizationDto;
+}
+
+const OrganizationsActions: React.FC<OrganizationsActionsProps> = ({
+  rowData,
+}) => {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [mangeOrgConfigOpen, setManageOrgConfigOpen] = useState(false);
+
+  const {
+    activateOrganization,
+    deactivateOrganization,
+    isOrganizationActivating,
+    isOrganizationDeactivating,
+    deleteOrganization,
+    isOrganizationDeleting,
+  } = useOrganizations("Org");
+  const { softDeleteOrganization, isArchivingOrganization } =
+    useArchiveActions();
+  const handleEditDetails = () => {
+    setDropdownOpen(false);
+    navigate(`/user-management/organizations/edit/${rowData?.id}`);
+  };
+  const handleViewDetails = () => {
+    setDropdownOpen(false);
+    navigate(`/user-management/organizations/detail/${rowData?.id}`);
+  };
+  const handleManageOrganization = () => {
+    setDropdownOpen(false);
+    setManageOrgConfigOpen(true);
+  };
+
+  const isActive = rowData.status === "Active";
+  return (
+    <div className="flex gap-3 align-center">
+      <OrganizationActivateOrDeactivationPopup
+        organizationName={rowData.name.en}
+        isActive={isActive}
+        onConfirm={() => {
+          isActive
+            ? deactivateOrganization({
+                id: rowData.id,
+              })
+            : activateOrganization({
+                id: rowData.id,
+              });
+        }}
+        isLoading={isOrganizationActivating || isOrganizationDeactivating}
+        trigger={
+          isActive ? (
+            <Button
+              variant="outline"
+              className={
+                isActive
+                  ? "text-red-600 dark:text-red-400 border-red-600 dark:border-red-500 hover:bg-red-50 dark:hover:bg-red-900/30"
+                  : "text-primary-600 dark:text-primary-400 border-primary-600 dark:border-primary-500 hover:bg-primary-50 dark:hover:bg-primary-900/30"
+              }
+            >
+              {t("statusBar.deactivate")}
+            </Button>
+          ) : (
+            <Button
+              variant="outline"
+              size="sm"
+              className={
+                isActive
+                  ? "text-red-600 dark:text-red-400 border-red-600 dark:border-red-500 hover:bg-red-50 dark:hover:bg-red-900/30"
+                  : "text-primary-600 dark:text-primary-400 border-primary-600 dark:border-primary-500 hover:bg-primary-50 dark:hover:bg-primary-900/30"
+              }
+            >
+              {t("statusBar.activate")}
+            </Button>
+          )
+        }
+      />
+      <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            className="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
+            aria-haspopup="menu"
+            aria-expanded={dropdownOpen}
+          >
+            <MoreHorizontal className="h-4 w-4" />
+            <span className="sr-only">Open menu</span>
+          </Button>
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent
+          align="end"
+          className="w-[200px]"
+          onInteractOutside={(e) => {
+            // Prevent closing when interacting with dialogs
+            const target = e.target as HTMLElement;
+            if (!target.closest('[role="dialog"]')) {
+              setDropdownOpen(false);
+            }
+          }}
+        >
+          <DropdownMenuLabel>Actions</DropdownMenuLabel>
+
+          {/* Always show these */}
+          <DropdownMenuItem onSelect={handleViewDetails}>
+            <Eye className="mr-2 h-4 w-4" />
+            {t("organization.viewOrganization")}
+          </DropdownMenuItem>
+          <DropdownMenuItem onSelect={handleManageOrganization}>
+            <Settings className="mr-2 h-4 w-4" />
+            {t("organization.manageOrganization", "Manage Organization")}
+          </DropdownMenuItem>
+          <DropdownMenuItem onSelect={handleEditDetails}>
+            <Edit className="mr-2 h-4 w-4" />
+            {t("organization.editOrganization")}
+          </DropdownMenuItem>
+
+          <DropdownMenuItem
+            onSelect={() => {
+              setDropdownOpen(false);
+              softDeleteOrganization(rowData.id);
+            }}
+            disabled={isArchivingOrganization}
+            className="text-amber-700 focus:text-amber-700"
+          >
+            <Archive className="mr-2 h-4 w-4" />
+            {t("archive.archiveOrganization", "Archive Organization")}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+        {mangeOrgConfigOpen && (
+          <ManageOrganizationDrawer
+            manageOrgConfigOpen={mangeOrgConfigOpen}
+            setManageOrgConfigOpen={setManageOrgConfigOpen}
+            organizationId={rowData.id}
+            isUnitConfig={false}
+          />
+        )}
+      </DropdownMenu>
+    </div>
+  );
+};
+
+export default OrganizationsActions;
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/OrganizationsColumnDefn.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/OrganizationsColumnDefn.tsx
new file mode 100644
index 000000000..86e3b47a1
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/OrganizationsColumnDefn.tsx
@@ -0,0 +1,122 @@
+import { OrganizationDto } from "@/shared/dto/organization/organizationDto";
+import { ColumnDef } from "@tanstack/react-table";
+import OrganizationsActions from "@/super-admin/components/organizations/OrganizationsActions";
+import { Badge } from "../../../shared/common/ui/badge";
+import { Users } from "lucide-react";
+import { StatusCell } from "../organizationAdmins/StatusCell";
+import { VisibilityCell } from "./VisibilityCell";
+import { format } from "date-fns";
+import { t } from "i18next";
+import i18n from "@/i18n";
+
+export const OrganizationsColumnDefn: ColumnDef<OrganizationDto>[] = [
+  {
+    accessorKey: "name.en",
+    header: () => t("organization.organizationName"),
+    size: 300,
+    minSize: 200,
+    maxSize: 400,
+    cell: ({ row }) => {
+      const org = row.original;
+      const lang = i18n.language;
+      // This will be overridden in the Organizations component with proper data
+      return (
+        <div className="font-medium">
+          {org.parentId && <span className="text-gray-400 dark:text-gray-500 mr-2">└─</span>}
+          {org.name.am}
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: "createdAt",
+    header: () => t("organization.createdOn"),
+    cell: ({ row }) => (
+      <div className="font-medium">
+        {format(new Date(row.original.createdAt), "MMM dd, yyyy")}
+      </div>
+    ),
+  },
+  {
+    accessorKey: "activeEmployeeCount",
+    header: () => t("organization.numberOfUsers"),
+    cell: ({ row }) => (
+      <div className="font-medium flex items-center">
+        <Users className="h-4 w-4 mr-2 text-gray-500 dark:text-gray-400" />
+        {row.original.activeEmployeeCount !== undefined
+          ? row.original.activeEmployeeCount
+          : "-"}
+      </div>
+    ),
+  },
+  {
+    accessorKey: "adminsCount",
+    header: () => t("organization.assignedAdmin"),
+    cell: ({ row }) => (
+      <StatusCell
+        id={row.original.id}
+        adminsCount={row.original.adminsCount || 0}
+      />
+    ),
+  },
+  {
+    id: "status",
+    header: () => t("userRecord.Status"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      return (
+        <div>
+          <Badge
+            className={`${
+              rowData.status === "Active"
+                ? "bg-primary-100 text-primary-600 hover:bg-primary-100 dark:bg-primary-900/40 dark:text-primary-300 dark:hover:bg-primary-900/50"
+                : "bg-red-100 text-red-600 hover:bg-red-100 dark:bg-red-900/40 dark:text-red-300 dark:hover:bg-red-900/50"
+            } rounded-full px-6 py-1 font-medium`}
+          >
+            {rowData.status === "Active"
+              ? t("statusBar.activate")
+              : t("statusBar.deactivate")}
+          </Badge>
+        </div>
+      );
+    },
+  },
+  {
+    id: "isGovernmentOrganization",
+    header: () => t("organization.isGovernmentOrganization"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      return (
+        <div>
+          <Badge
+            className={`${
+              rowData.isGovernmentOrganization
+                ? "bg-blue-600 text-white hover:bg-blue-400"
+                : "bg-red-600 text-white hover:bg-red-400"
+            } rounded-full px-6 py-1 font-medium`}
+          >
+            {rowData.isGovernmentOrganization === true
+              ? t("common.yes")
+              : t("common.no")}
+          </Badge>
+        </div>
+      );
+    },
+  },
+  {
+    id: "visibility",
+    header: () => t("organization.visibilityToOthers"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      return <VisibilityCell organizationId={rowData.id} />;
+    },
+  },
+  {
+    id: "Actions",
+    header: () => t("userRecord.Actions"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      return <OrganizationsActions rowData={rowData as OrganizationDto} />;
+    },
+  },
+];
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/VisibilityCell.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/VisibilityCell.tsx
new file mode 100644
index 000000000..b82376b90
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/VisibilityCell.tsx
@@ -0,0 +1,126 @@
+import { useState, useEffect } from "react";
+import {
+  createOrganizationConfig,
+  updateOrganizationConfig,
+  getOrganizationConfig,
+  OrganizationConfig,
+  OrganizationConfigListResponse,
+} from "@/shared/services/organizationConfigService";
+import { toast } from "sonner";
+import { Switch } from "@/shared/common/ui/switch";
+import { useTranslation } from "react-i18next";
+
+interface VisibilityCellProps {
+  organizationId: string;
+}
+
+export const VisibilityCell = ({ organizationId }: VisibilityCellProps) => {
+  const { t } = useTranslation();
+  const [config, setConfig] = useState<OrganizationConfig | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isInitialLoading, setIsInitialLoading] = useState(true);
+
+  // Load organization configuration
+  useEffect(() => {
+    const loadConfig = async () => {
+      try {
+        setIsInitialLoading(true);
+        const response = await getOrganizationConfig(organizationId);
+
+        // Handle the new response format with count and items
+        const responseData = response.data as OrganizationConfigListResponse;
+
+        if (
+          responseData.count > 0 &&
+          responseData.items &&
+          responseData.items.length > 0
+        ) {
+          // Take the first configuration item
+          const configData = responseData.items[0];
+          setConfig(configData);
+        } else {
+          // No config found - organization is visible by default
+          setConfig(null);
+        }
+      } catch (error) {
+        // If API call fails, assume no config exists (visible by default)
+        console.warn(
+          `Failed to load config for organization ${organizationId}:`,
+          error
+        );
+        setConfig(null);
+      } finally {
+        setIsInitialLoading(false);
+      }
+    };
+
+    loadConfig();
+  }, [organizationId]);
+
+  // Handle visibility toggle
+  const handleVisibilityToggle = async (canReceive: boolean) => {
+    try {
+      setIsLoading(true);
+
+      const payload = {
+        canStartReceivingRecord: canReceive,
+        organizationId: organizationId,
+      };
+
+      // Simple logic: if we have both ID and organization ID, use PUT; if only organization ID, use POST
+      if (config && config.id) {
+        // We have both ID and organization ID - use PUT request
+        await updateOrganizationConfig(config.id, payload);
+        setConfig((prev: OrganizationConfig | null) =>
+          prev ? { ...prev, canStartReceivingRecord: canReceive } : null
+        );
+      } else {
+        // We only have organization ID - use POST request
+        const response = await createOrganizationConfig(payload);
+        setConfig(response.data);
+      }
+
+      toast.success(
+        canReceive
+          ? t("organization.visibilityEnabled")
+          : t("organization.visibilityDisabled")
+      );
+    } catch (error) {
+      console.error("Error updating organization visibility:", error);
+      toast.error(t("organization.visibilityUpdateFailed"));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Don't render until we have real data from API
+  if (isInitialLoading) {
+    return (
+      <div className="flex items-center justify-center">
+        <div className="w-4 h-4 border-2 border-gray-300 dark:border-gray-600 border-t-primary-600 rounded-full animate-spin"></div>
+      </div>
+    );
+  }
+
+  // Show real API result: if config exists, use its value; if no config, organization is visible by default
+  const isVisible = config ? config.canStartReceivingRecord : true;
+
+  return (
+    <div className="flex items-center gap-3">
+      <div className="flex items-center gap-2">
+        <span className="text-sm text-gray-600 dark:text-gray-300">
+          {isVisible ? t("organization.visible") : t("organization.hidden")}
+        </span>
+        <Switch
+          checked={isVisible}
+          onCheckedChange={handleVisibilityToggle}
+          disabled={isLoading}
+          className="data-[state=checked]:bg-primary-600"
+        />
+      </div>
+      {isLoading && (
+        <div className="w-4 h-4 border-2 border-gray-300 dark:border-gray-600 border-t-primary-600 rounded-full animate-spin"></div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/common/OrganizationActivateOrDeactivationPopup.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/common/OrganizationActivateOrDeactivationPopup.tsx
new file mode 100644
index 000000000..73e8b6449
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/common/OrganizationActivateOrDeactivationPopup.tsx
@@ -0,0 +1,69 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/shared/common/ui/alert-dialog";
+import { Loader2 } from "lucide-react";
+
+import { ReactNode } from "react";
+
+interface OrganizationActivateOrDeactivationPopupProps {
+  organizationName: string;
+  isActive: boolean;
+  onConfirm: () => void;
+  isLoading: boolean;
+  trigger: ReactNode;
+}
+
+export const OrganizationActivateOrDeactivationPopup = ({
+  organizationName,
+  isActive,
+  onConfirm,
+  isLoading,
+  trigger,
+}: OrganizationActivateOrDeactivationPopupProps) => {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>{trigger}</AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            {isActive ? "Deactivate" : "Activate"} Organization
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            Are you sure you want to {isActive ? "deactivate" : "activate"}{" "}
+            <span className="font-medium">{organizationName}</span>? This action
+            can be reversed later.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isLoading} className="cursor-pointer">
+            Cancel
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={onConfirm}
+            disabled={isLoading}
+            className={
+              isActive ? "bg-red-600 hover:bg-red-700 cursor-pointer" : ""
+            }
+          >
+            {isLoading && <Loader2 className="h-4 w-4 animate-spin" />}
+            {isLoading
+              ? isActive
+                ? "Deactivating..."
+                : "Activating..."
+              : isActive
+              ? "Deactivate"
+              : "Activate"}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/common/OrganizationForm.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/common/OrganizationForm.tsx
new file mode 100644
index 000000000..c7694a8fb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/common/OrganizationForm.tsx
@@ -0,0 +1,324 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/shared/common/ui/card";
+import { Input } from "@/shared/common/ui/input";
+import { Button } from "@/shared/common/ui/button";
+import { Label } from "@/shared/common/ui/label";
+import { z } from "zod";
+import { useOrganizationTypes } from "@/super-admin/hooks/useOrganizationTypes";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect } from "react";
+import { OrganizationDto } from "@/shared/dto/organization/organizationDto";
+import { useNavigate } from "react-router-dom";
+import { useOrganizations } from "@/super-admin/hooks/useOrganizations";
+import { Switch } from "@/shared/common/ui/switch";
+import { t } from "i18next";
+import { useLocalizedName } from "@/shared/common/localizedName";
+
+const orgSchema = z.object({
+  name: z.object({
+    am: z.string().min(1, "Amharic name is required"),
+    en: z.string().min(1, "English name is required"),
+  }),
+  key: z.string().min(1, "Key is required"),
+  organizationTypeId: z.string().min(1, "Organization Type is required"),
+  parentId: z.string().optional(),
+  isGovernmentOrganization: z.boolean(),
+});
+
+export type FormValues = z.infer<typeof orgSchema>;
+
+interface OrganizationFormProps {
+  onSubmit: (values: FormValues) => void;
+  type: "Create" | "Edit";
+  isLoading: boolean;
+  organizationDetails?: OrganizationDto;
+}
+
+const OrganizationForm: React.FC<OrganizationFormProps> = ({
+  onSubmit,
+  isLoading,
+  type,
+  organizationDetails,
+}) => {
+  const fieldClassName =
+    "h-10 rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary";
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(orgSchema),
+    defaultValues: {
+      name: { am: "", en: "" },
+      key: "",
+      organizationTypeId: "",
+      parentId: undefined,
+      isGovernmentOrganization: true,
+    },
+  });
+  const navigate = useNavigate();
+  const localizedName = useLocalizedName();
+  const {
+    organizationTypesResponse,
+    isLoading: isLoadingOrgTypes,
+    isError: orgTypesError,
+  } = useOrganizationTypes();
+
+  const {
+    organizationsResponse,
+    isLoading: isLoadingOrgs,
+    isError: orgsError,
+  } = useOrganizations("Org", {
+    take: 1000,
+  });
+
+  useEffect(() => {
+    const en = form.watch("name.en");
+
+    if (en) {
+      const commonNumber = "001"; // Example number
+      const generatedKey = `${en || ""}_${commonNumber}`
+        .replace(/\s+/g, "_") // Replace spaces with underscores
+        .toUpperCase();
+
+      form.setValue("key", generatedKey);
+    }
+  }, [form.watch("name.en")]);
+
+  useEffect(() => {
+    if (organizationDetails) {
+      form.reset({
+        name: organizationDetails.name,
+        key: organizationDetails.key,
+        organizationTypeId: organizationDetails.organizationTypeId,
+        parentId: organizationDetails.parentId ?? undefined,
+        isGovernmentOrganization:
+          organizationDetails.isGovernmentOrganization ?? true,
+      });
+    }
+  }, [organizationDetails]);
+
+  return (
+    <div className="px-2 md:px-4">
+      <Card className="max-w-5xl mx-auto shadow-md border-gray-200 dark:border-gray-700 overflow-hidden">
+        <CardHeader className="border-b border-gray-200 dark:border-gray-700 bg-gray-50/70 dark:bg-gray-900/40">
+          <CardTitle className="text-xl md:text-2xl font-semibold text-gray-800 dark:text-gray-100">
+            {type === "Create"
+              ? t("organization.createNew")
+              : t("organization.edit")}{" "}
+            {t("organization.organizations")}
+          </CardTitle>
+          <CardDescription className="text-gray-500 dark:text-gray-400">
+            {t("organization.enterDetails")}
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent className="p-4 md:p-8">
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900/30 p-4 md:p-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
+                <div className="space-y-2">
+                  <Label htmlFor="name.am">
+                    {t("organization.nameAmharic")}{" "}
+                    <span className="text-red-500">*</span>
+                  </Label>
+                  <Input {...form.register("name.am")} className={fieldClassName} />
+                  {form.formState.errors.name?.am && (
+                    <p className="text-red-500 text-xs mt-1">
+                      {form.formState.errors.name.am.message}
+                    </p>
+                  )}
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="name.en">
+                    {t("organization.nameEnglish")}{" "}
+                    <span className="text-red-500">*</span>
+                  </Label>
+                  <Input {...form.register("name.en")} className={fieldClassName} />
+                  {form.formState.errors.name?.en && (
+                    <p className="text-red-500 text-xs mt-1">
+                      {form.formState.errors.name.en.message}
+                    </p>
+                  )}
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="code">
+                    {t("organization.key")}
+                    <span className="text-red-500">*</span>
+                  </Label>
+                  <Input
+                    {...form.register("key")}
+                    disabled={type === "Edit"}
+                    readOnly={type === "Edit"}
+                    className={fieldClassName}
+                  />
+                  {form.formState.errors.key && (
+                    <p className="text-red-500 text-xs mt-1">
+                      {form.formState.errors.key.message}
+                    </p>
+                  )}
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="organizationType">
+                    {t("organization.organizationType")}{" "}
+                    <span className="text-red-500">*</span>
+                  </Label>
+                  <Select
+                    value={form.watch("organizationTypeId")}
+                    onValueChange={(val: string) =>
+                      form.setValue("organizationTypeId", val)
+                    }
+                    disabled={isLoadingOrgTypes}
+                  >
+                    <SelectTrigger className={fieldClassName}>
+                      <SelectValue
+                        placeholder={
+                          isLoadingOrgTypes
+                            ? t("organization.loading")
+                            : t("organization.selectOrganizationType")
+                        }
+                      />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {isLoadingOrgTypes ? (
+                        <SelectItem value="loading" disabled>
+                          {t("organization.loadingOrganizationTypes")}
+                        </SelectItem>
+                      ) : orgTypesError ? (
+                        <SelectItem value="error" disabled>
+                          {t("organization.errorLoadingOrganizationTypes")}
+                        </SelectItem>
+                      ) : organizationTypesResponse?.items?.length ? (
+                        organizationTypesResponse.items.map((type) => (
+                          <SelectItem key={type.id} value={type.id}>
+                            {localizedName(type.name)}
+                          </SelectItem>
+                        ))
+                      ) : (
+                        <SelectItem value="none" disabled>
+                          {t("organization.noOrganizationTypesAvailable")}
+                        </SelectItem>
+                      )}
+                    </SelectContent>
+                  </Select>
+                  {form.formState.errors.organizationTypeId && (
+                    <p className="text-red-500 text-xs mt-1">
+                      {form.formState.errors.organizationTypeId.message}
+                    </p>
+                  )}
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="organizationType">
+                    {t("organization.parentOrganization")}
+                  </Label>
+                  <Select
+                    value={form.watch("parentId")}
+                    onValueChange={(val: string) => form.setValue("parentId", val)}
+                    disabled={isLoadingOrgs}
+                  >
+                    <SelectTrigger className={fieldClassName}>
+                      <SelectValue
+                        placeholder={
+                          isLoadingOrgs
+                            ? t("organization.loading")
+                            : t("organization.selectOrganization")
+                        }
+                      />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {isLoadingOrgs ? (
+                        <SelectItem value="loading" disabled>
+                          Loading organization types...
+                        </SelectItem>
+                      ) : orgsError ? (
+                        <SelectItem value="error" disabled>
+                          Error loading organization types
+                        </SelectItem>
+                      ) : organizationsResponse?.items?.length ? (
+                        organizationsResponse.items.map((type) => (
+                          <SelectItem key={type.id} value={type.id}>
+                            {localizedName(type.name)}
+                          </SelectItem>
+                        ))
+                      ) : (
+                        <SelectItem value="none" disabled>
+                          {t("organization.noOrganization")}
+                        </SelectItem>
+                      )}
+                    </SelectContent>
+                  </Select>
+                  {form.formState.errors.organizationTypeId && (
+                    <p className="text-red-500 text-xs mt-1">
+                      {form.formState.errors.organizationTypeId.message}
+                    </p>
+                  )}
+                </div>
+
+                <div className="space-y-2 md:col-span-2 xl:col-span-1">
+                  <Label htmlFor="isPublic">
+                    {t("organization.isOrganizationPublic")}
+                  </Label>
+                  <div className="h-10 px-3 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 flex items-center justify-end">
+                    <Switch
+                      id="isPublic"
+                      checked={form.watch("isGovernmentOrganization")}
+                      onCheckedChange={(value) =>
+                        form.setValue("isGovernmentOrganization", value)
+                      }
+                    />
+                  </div>
+                  {form.formState.errors.isGovernmentOrganization && (
+                    <p className="text-red-500 text-xs mt-1">
+                      {form.formState.errors.isGovernmentOrganization.message}
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            <div className="flex flex-col-reverse sm:flex-row sm:justify-end gap-3 pt-2">
+              <Button
+                variant="outline"
+                type="button"
+                onClick={() => {
+                  navigate(-1);
+                }}
+                className="w-full sm:w-auto"
+              >
+                {t("common.Cancel")}
+              </Button>
+              <Button
+                type="submit"
+                disabled={isLoading}
+                className="w-full sm:w-auto bg-primary hover:bg-primary/90 text-primary-foreground"
+              >
+                {isLoading
+                  ? `${type === "Create" ? "Creating" : "Editing"}...`
+                  : `${
+                      type === "Create" ? t("common.create") : t("common.Edit")
+                    } `}
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default OrganizationForm;
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/settings/PasswordSettingsForm.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/settings/PasswordSettingsForm.tsx
new file mode 100644
index 000000000..8aafc7779
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/settings/PasswordSettingsForm.tsx
@@ -0,0 +1,441 @@
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Loader2, Lock } from "lucide-react";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormDescription,
+} from "@/shared/common/ui/form";
+import { Input } from "@/shared/common/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import { Switch } from "@/shared/common/ui/switch";
+import { toast } from "sonner";
+import {
+  usePasswordSettingsQuery,
+  usePasswordSettingsMutations,
+} from "../../hooks/usePasswordSettings";
+import { PasswordSettings } from "../../services/api/passwordSettingsService";
+import Loader from "@/record-management/components/Loader/loader";
+
+interface PasswordSettingsFormValues {
+  minimumPasswordLength: number;
+  maximumPasswordLength: number;
+  passwordExpiry: number;
+  sessionTimeout: number;
+  isDefaultPasswordEnabled: boolean;
+  defaultPassword: string;
+}
+
+interface PasswordSettingsFormProps {
+  onSuccessCallback?: () => void;
+  isDialogForm?: boolean;
+}
+
+export default function PasswordSettingsForm({
+  onSuccessCallback,
+  isDialogForm = false,
+}: PasswordSettingsFormProps) {
+  const { t } = useTranslation();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { data: settings, isLoading, error } = usePasswordSettingsQuery();
+  const mutations = usePasswordSettingsMutations();
+
+  const form = useForm<PasswordSettingsFormValues>({
+    defaultValues: {
+      minimumPasswordLength: 8,
+      maximumPasswordLength: 64,
+      passwordExpiry: 90,
+      sessionTimeout: 30,
+      isDefaultPasswordEnabled: false,
+      defaultPassword: "Welcome@123",
+    },
+  });
+
+  useEffect(() => {
+    if (settings) {
+      form.reset({
+        minimumPasswordLength: settings.minimumPasswordLength || 8,
+        maximumPasswordLength: settings.maximumPasswordLength || 64,
+        passwordExpiry: settings.passwordExpiry || 90,
+        sessionTimeout: settings.sessionTimeout || 30,
+        isDefaultPasswordEnabled: settings.isDefaultPasswordEnabled || false,
+        defaultPassword: settings.defaultPassword || "Welcome@123",
+      });
+    }
+  }, [settings, form]);
+
+  const onSubmit = async (values: PasswordSettingsFormValues) => {
+    if (values.minimumPasswordLength > values.maximumPasswordLength) {
+      toast.error(
+        t(
+          "passwordSettings.minMaxError",
+          "Minimum password length cannot be greater than maximum"
+        )
+      );
+      return;
+    }
+
+    if (
+      values.isDefaultPasswordEnabled &&
+      !values.defaultPassword?.trim()
+    ) {
+      toast.error(
+        t(
+          "passwordSettings.defaultPasswordRequired",
+          "Default password is required when enabled"
+        )
+      );
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      const payload: PasswordSettings = {
+        ...values,
+        id: settings?.id,
+      };
+
+      if (settings?.id) {
+        await mutations.update.mutateAsync(payload);
+      } else {
+        await mutations.create.mutateAsync(payload);
+      }
+      
+      // Call success callback if provided (for dialog form)
+      if (onSuccessCallback) {
+        onSuccessCallback();
+      }
+      
+      // Reset form after successful submission
+      form.reset();
+    } catch (error) {
+      // Error is handled by the hook
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  if (error) {
+    return (
+      <Card className="border-red-200">
+        <CardHeader>
+          <CardTitle className="text-red-600">
+            {t("passwordSettings.error", "Error Loading Settings")}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-gray-600">
+            {t(
+              "passwordSettings.errorMessage",
+              "Failed to load password settings. Please try again."
+            )}
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className={isDialogForm ? "w-full border-0 shadow-none" : "w-full"}>
+      {!isDialogForm && (
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Lock className="w-5 h-5 text-primary" />
+            <div>
+              <CardTitle>
+                {t("passwordSettings.title", "Password Settings")}
+              </CardTitle>
+              <CardDescription>
+                {t(
+                  "passwordSettings.description",
+                  "Configure password policies and security settings for your organization"
+                )}
+              </CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+      )}
+
+      <CardContent>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            {/* Password Length Section */}
+            <div className="space-y-4 p-4 bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-900 dark:border-gray-800">
+              <h3 className="font-semibold text-gray-900 dark:text-white flex items-center gap-2">
+                <Lock className="w-4 h-4" />
+                {t("passwordSettings.passwordLength", "Password Length Requirements")}
+              </h3>
+
+              <div className="grid grid-cols-2 gap-4">
+                <FormField
+                  control={form.control}
+                  name="minimumPasswordLength"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        {t(
+                          "passwordSettings.minimumLength",
+                          "Minimum Password Length"
+                        )}
+                      </FormLabel>
+                      <FormControl>
+                        <Input
+                          type="number"
+                          min="1"
+                          max="100"
+                          {...field}
+                          onChange={(e) =>
+                            field.onChange(parseInt(e.target.value))
+                          }
+                          disabled={isSubmitting}
+                        />
+                      </FormControl>
+                      <FormDescription className="text-xs">
+                        {t("passwordSettings.minimumLengthDesc", "Minimum: 1, Recommended: 8")}
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="maximumPasswordLength"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        {t(
+                          "passwordSettings.maximumLength",
+                          "Maximum Password Length"
+                        )}
+                      </FormLabel>
+                      <FormControl>
+                        <Input
+                          type="number"
+                          min="1"
+                          max="256"
+                          {...field}
+                          onChange={(e) =>
+                            field.onChange(parseInt(e.target.value))
+                          }
+                          disabled={isSubmitting}
+                        />
+                      </FormControl>
+                      <FormDescription className="text-xs">
+                        {t("passwordSettings.maximumLengthDesc", "Maximum: 256, Recommended: 64")}
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </div>
+
+            {/* Password Expiry Section */}
+            <div className="space-y-4 p-4 bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-900 dark:border-gray-800">
+              <h3 className="font-semibold text-gray-900 dark:text-white flex items-center gap-2">
+                <Lock className="w-4 h-4" />
+                {t("passwordSettings.passwordExpiry", "Password Expiry Policy")}
+              </h3>
+
+              <FormField
+                control={form.control}
+                name="passwordExpiry"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      {t(
+                        "passwordSettings.passwordExpiryDays",
+                        "Password Expiry (Days)"
+                      )}
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        type="number"
+                        min="0"
+                        max="365"
+                        {...field}
+                        onChange={(e) =>
+                          field.onChange(parseInt(e.target.value))
+                        }
+                        disabled={isSubmitting}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      {t(
+                        "passwordSettings.passwordExpiryDesc",
+                        "Number of days before passwords expire (0 = never expires)"
+                      )}
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            {/* Session Timeout Section */}
+            <div className="space-y-4 p-4 bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-900 dark:border-gray-800">
+              <h3 className="font-semibold text-gray-900 dark:text-white flex items-center gap-2">
+                <Lock className="w-4 h-4" />
+                {t("passwordSettings.sessionManagement", "Session Management")}
+              </h3>
+
+              <FormField
+                control={form.control}
+                name="sessionTimeout"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      {t(
+                        "passwordSettings.sessionTimeout",
+                        "Session Timeout (Minutes)"
+                      )}
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        type="number"
+                        min="1"
+                        max="1440"
+                        {...field}
+                        onChange={(e) =>
+                          field.onChange(parseInt(e.target.value))
+                        }
+                        disabled={isSubmitting}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      {t(
+                        "passwordSettings.sessionTimeoutDesc",
+                        "Idle session timeout in minutes (1 minute to 24 hours)"
+                      )}
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            {/* Default Password Section */}
+            <div className="space-y-4 p-4 bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-900 dark:border-gray-800">
+              <h3 className="font-semibold text-gray-900 dark:text-white flex items-center gap-2">
+                <Lock className="w-4 h-4" />
+                {t("passwordSettings.defaultPassword", "Default Password")}
+              </h3>
+
+              <FormField
+                control={form.control}
+                name="isDefaultPasswordEnabled"
+                render={({ field }) => (
+                  <FormItem className="flex items-center justify-between rounded-lg border border-gray-200 p-3 dark:border-gray-800">
+                    <div className="space-y-0.5">
+                      <FormLabel>
+                        {t(
+                          "passwordSettings.enableDefaultPassword",
+                          "Enable Default Password"
+                        )}
+                      </FormLabel>
+                      <FormDescription>
+                        {t(
+                          "passwordSettings.enableDefaultPasswordDesc",
+                          "Use a default password for new users"
+                        )}
+                      </FormDescription>
+                    </div>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                        disabled={isSubmitting}
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+
+              {form.watch("isDefaultPasswordEnabled") && (
+                <FormField
+                  control={form.control}
+                  name="defaultPassword"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>
+                        {t(
+                          "passwordSettings.defaultPasswordValue",
+                          "Default Password"
+                        )}
+                      </FormLabel>
+                      <FormControl>
+                        <Input
+                          type="password"
+                          placeholder="Enter default password"
+                          {...field}
+                          disabled={isSubmitting}
+                        />
+                      </FormControl>
+                      <FormDescription className="text-xs">
+                        {t(
+                          "passwordSettings.defaultPasswordValueDesc",
+                          "This password will be used for newly created user accounts"
+                        )}
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+            </div>
+
+            {/* Buttons */}
+            <div className="flex justify-end gap-3 pt-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => form.reset()}
+                disabled={isSubmitting}
+              >
+                {t("common.reset", "Reset")}
+              </Button>
+              <Button
+                type="submit"
+                disabled={isSubmitting}
+                className="bg-primary hover:bg-primary-700"
+              >
+                {isSubmitting ? (
+                  <>
+                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                    {t("common.saving", "Saving")}
+                  </>
+                ) : (
+                  t("common.save", "Save Changes")
+                )}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/sites/SiteFormModal.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/sites/SiteFormModal.tsx
new file mode 100644
index 000000000..73d645672
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/sites/SiteFormModal.tsx
@@ -0,0 +1,213 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/shared/common/ui/dialog";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import { Label } from "@/shared/common/ui/label";
+import { SiteDto, SitePayloadDto } from "@/super-admin/dto/SitesDto";
+import { toSnakeCase } from "@/super-admin/hooks/useSites";
+
+interface SiteFormModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (payload: SitePayloadDto) => void;
+  site?: SiteDto | null; // If provided, we are in Edit mode
+  isSubmitting: boolean;
+  existingKeys: string[]; // for frontend uniqueness check
+}
+
+export default function SiteFormModal({
+  isOpen,
+  onClose,
+  onSubmit,
+  site = null,
+  isSubmitting,
+  existingKeys,
+}: SiteFormModalProps) {
+  const { t } = useTranslation();
+  const isEdit = !!site;
+  
+  const [nameAm, setNameAm] = useState("");
+  const [nameEn, setNameEn] = useState("");
+  const [key, setKey] = useState("");
+  const [domain, setDomain] = useState("");
+  
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  useEffect(() => {
+    if (isOpen) {
+      if (site) {
+        setNameAm(site.name?.am || "");
+        setNameEn(site.name?.en || "");
+        setKey(site.key || "");
+        setDomain(site.domain || "");
+      } else {
+        setNameAm("");
+        setNameEn("");
+        setKey("");
+        setDomain("");
+      }
+      setErrors({});
+    }
+  }, [isOpen, site]);
+
+  const validate = (): boolean => {
+    const newErrors: Record<string, string> = {};
+
+    if (!nameAm.trim()) {
+      newErrors.nameAm = t("sites.form.nameAmRequired");
+    }
+    if (!nameEn.trim()) {
+      newErrors.nameEn = t("sites.form.nameEnRequired");
+    }
+    
+    if (!key.trim()) {
+      newErrors.key = t("sites.form.keyRequired");
+    } else if (!/^[a-zA-Z0-9_-]+$/.test(key)) {
+      newErrors.key = t("sites.form.keyFormat");
+    } else if (!isEdit && existingKeys.includes(key.trim())) {
+      newErrors.key = t("sites.form.keyUnique");
+    }
+
+    if (!domain.trim()) {
+      newErrors.domain = t("sites.form.domainRequired");
+    } else if (/\s/.test(domain)) {
+      newErrors.domain = t("sites.form.domainNoSpaces");
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!validate()) return;
+
+    onSubmit({
+      name: {
+        am: nameAm.trim(),
+        en: nameEn.trim(), // transformed to snake_case in the hook/mutation
+      },
+      key: key.trim(),
+      domain: domain.trim(),
+    });
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle className="text-xl font-bold text-slate-800 dark:text-slate-100">
+            {isEdit ? t("sites.form.titleEdit") : t("sites.form.titleAdd")}
+          </DialogTitle>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-5 py-2">
+          {/* Site Name (Amharic) */}
+          <div className="space-y-1">
+            <Label htmlFor="nameAm" className="text-sm font-semibold">
+              {t("sites.form.nameAmLabel")} <span className="text-red-500">*</span>
+            </Label>
+            <Input
+              id="nameAm"
+              value={nameAm}
+              onChange={(e) => setNameAm(e.target.value)}
+               placeholder={t("sites.form.nameAmPlaceholder")}
+              className={errors.nameAm ? "border-red-500 focus-visible:ring-red-500" : ""}
+            />
+            {errors.nameAm && (
+              <span className="text-xs text-red-500 font-medium">{errors.nameAm}</span>
+            )}
+          </div>
+
+          {/* Site Name (English) */}
+          <div className="space-y-1">
+            <Label htmlFor="nameEn" className="text-sm font-semibold">
+              {t("sites.form.nameEnLabel")} <span className="text-red-500">*</span>
+            </Label>
+            <Input
+              id="nameEn"
+              value={nameEn}
+              onChange={(e) => setNameEn(e.target.value)}
+              placeholder={t("sites.form.nameEnPlaceholder")}
+              className={errors.nameEn ? "border-red-500 focus-visible:ring-red-500" : ""}
+            />
+            {nameEn.trim() && (
+              <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">
+                {t("sites.form.previewLabel")} <span className="font-mono text-primary font-semibold">{toSnakeCase(nameEn)}</span>
+              </p>
+            )}
+            {errors.nameEn && (
+              <span className="text-xs text-red-500 font-medium">{errors.nameEn}</span>
+            )}
+          </div>
+
+          {/* Site Key */}
+          <div className="space-y-1">
+            <Label htmlFor="key" className="text-sm font-semibold">
+              {t("sites.form.keyLabel")} <span className="text-red-500">*</span>
+            </Label>
+            <Input
+              id="key"
+              value={key}
+              onChange={(e) => setKey(e.target.value)}
+               placeholder={t("sites.form.keyPlaceholder")}
+              disabled={isEdit}
+              className={errors.key ? "border-red-500 focus-visible:ring-red-500" : ""}
+            />
+            {!isEdit && (
+              <p className="text-xs text-slate-400">
+                {t("sites.form.keyHint")}
+              </p>
+            )}
+            {errors.key && (
+              <span className="text-xs text-red-500 font-medium">{errors.key}</span>
+            )}
+          </div>
+
+          {/* Site Domain */}
+          <div className="space-y-1">
+            <Label htmlFor="domain" className="text-sm font-semibold">
+              {t("sites.form.domainLabel")} <span className="text-red-500">*</span>
+            </Label>
+            <Input
+              id="domain"
+              value={domain}
+              onChange={(e) => setDomain(e.target.value)}
+               placeholder={t("sites.form.domainPlaceholder")}
+              className={errors.domain ? "border-red-500 focus-visible:ring-red-500" : ""}
+            />
+            {errors.domain && (
+              <span className="text-xs text-red-500 font-medium">{errors.domain}</span>
+            )}
+          </div>
+
+          <DialogFooter className="pt-4 border-t gap-2 sm:gap-0">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={onClose}
+              disabled={isSubmitting}
+              className="w-full sm:w-auto"
+            >
+              {t("common.cancel")}
+            </Button>
+            <Button
+              type="submit"
+              disabled={isSubmitting}
+              className="w-full sm:w-auto"
+            >
+              {isSubmitting ? t("sites.form.saving") : isEdit ? t("sites.form.saveChanges") : t("sites.form.createSite")}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/sites/SiteViewModal.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/sites/SiteViewModal.tsx
new file mode 100644
index 000000000..1e4434602
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/sites/SiteViewModal.tsx
@@ -0,0 +1,104 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/shared/common/ui/dialog";
+import { Button } from "@/shared/common/ui/button";
+import { Badge } from "@/shared/common/ui/badge";
+import { useTranslation } from "react-i18next";
+import { SiteDto } from "@/super-admin/dto/SitesDto";
+
+interface SiteViewModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  site?: SiteDto | null;
+}
+
+export default function SiteViewModal({
+  isOpen,
+  onClose,
+  site,
+}: SiteViewModalProps) {
+  const { t } = useTranslation();
+  if (!site) return null;
+
+  const isActive = site.status === "Active" || site.status !== "Archived";
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle className="text-xl font-bold text-slate-800 dark:text-slate-100">
+            {t("sites.view.title")}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="py-2 space-y-4">
+          {/* Detail cards */}
+          <div className="grid grid-cols-2 gap-4">
+            <div className="col-span-2 p-3 bg-slate-50 dark:bg-slate-900 rounded-lg space-y-1">
+              <span className="text-xs font-semibold text-slate-400 uppercase tracking-wider">
+                 {t("sites.view.nameEn")}
+              </span>
+              <p className="text-base font-semibold text-slate-800 dark:text-slate-100">
+                {site.name?.en || "-"}
+              </p>
+            </div>
+
+            <div className="col-span-2 p-3 bg-slate-50 dark:bg-slate-900 rounded-lg space-y-1">
+              <span className="text-xs font-semibold text-slate-400 uppercase tracking-wider">
+                 {t("sites.view.nameAm")}
+              </span>
+              <p className="text-base font-semibold text-slate-800 dark:text-slate-100">
+                {site.name?.am || "-"}
+              </p>
+            </div>
+
+            <div className="p-3 bg-slate-50 dark:bg-slate-900 rounded-lg space-y-1">
+              <span className="text-xs font-semibold text-slate-400 uppercase tracking-wider">
+                 {t("sites.view.siteKey")}
+              </span>
+              <p className="text-base font-mono text-slate-800 dark:text-slate-100 truncate" title={site.key}>
+                {site.key || "-"}
+              </p>
+            </div>
+
+            <div className="p-3 bg-slate-50 dark:bg-slate-900 rounded-lg space-y-1">
+              <span className="text-xs font-semibold text-slate-400 uppercase tracking-wider">
+                 {t("sites.view.status")}
+              </span>
+              <div>
+                <Badge
+                  className={`${
+                    isActive
+                      ? "bg-emerald-100 text-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-300 hover:bg-emerald-100 dark:hover:bg-emerald-950/40"
+                      : "bg-amber-100 text-amber-800 dark:bg-amber-950/40 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-950/40"
+                  } rounded-full px-3 py-0.5 font-medium border-none`}
+                >
+                  {site.status || "Active"}
+                </Badge>
+              </div>
+            </div>
+
+            <div className="col-span-2 p-3 bg-slate-50 dark:bg-slate-900 rounded-lg space-y-1">
+              <span className="text-xs font-semibold text-slate-400 uppercase tracking-wider">
+                 {t("sites.view.domain")}
+              </span>
+              <p className="text-base font-semibold text-slate-800 dark:text-slate-100 truncate" title={site.domain}>
+                {site.domain || "-"}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter className="border-t pt-4">
+            <Button onClick={onClose} className="w-full sm:w-auto">
+              {t("sites.view.close")}
+            </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/sites/SitesColumnDefn.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/sites/SitesColumnDefn.tsx
new file mode 100644
index 000000000..22caed8da
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/sites/SitesColumnDefn.tsx
@@ -0,0 +1,143 @@
+import { SiteDto } from "@/super-admin/dto/SitesDto";
+import { ColumnDef } from "@tanstack/react-table";
+import { Button } from "@/shared/common/ui/button";
+import { Badge } from "@/shared/common/ui/badge";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import { Archive, Trash2, Edit, Eye, MoreHorizontal, RefreshCw, Palette } from "lucide-react";
+import { t } from "i18next";
+
+interface ColumnsProps {
+  onView: (site: SiteDto) => void;
+  onEdit: (site: SiteDto) => void;
+  onArchive: (site: SiteDto) => void;
+  onRestore: (site: SiteDto) => void;
+  onDelete: (site: SiteDto) => void;
+  onBranding: (site: SiteDto) => void;
+}
+
+export const getSitesColumnDefn = ({
+  onView,
+  onEdit,
+  onArchive,
+  onRestore,
+  onDelete,
+  onBranding,
+}: ColumnsProps): ColumnDef<SiteDto>[] => [
+  {
+    id: "name",
+    header: () => t("sites.columns.siteName"),
+    cell: ({ row }) => {
+      const site = row.original;
+      return (
+        <div>
+          <div className="font-semibold text-slate-800 dark:text-slate-200">
+            {site.name?.en || "-"}
+          </div>
+          <div className="text-xs text-slate-500 dark:text-slate-400">
+            {site.name?.am || "-"}
+          </div>
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: "key",
+    header: () => t("sites.columns.key"),
+    cell: ({ row }) => (
+      <span className="font-mono text-slate-700 dark:text-slate-300">
+        {row.original.key}
+      </span>
+    ),
+  },
+  {
+    accessorKey: "domain",
+    header: () => t("sites.columns.domain"),
+    cell: ({ row }) => (
+      <span className="text-slate-700 dark:text-slate-300">
+        {row.original.domain}
+      </span>
+    ),
+  },
+  {
+    accessorKey: "status",
+    header: () => t("sites.columns.status"),
+    cell: ({ row }) => {
+      const status = row.original.status || "Active";
+      const isActive = status === "Active";
+      return (
+        <Badge
+          className={`${
+            isActive
+              ? "bg-emerald-100 text-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-300 hover:bg-emerald-100 dark:hover:bg-emerald-950/40"
+              : "bg-amber-100 text-amber-800 dark:bg-amber-950/40 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-950/40"
+          } rounded-full px-3 py-0.5 font-medium border-none`}
+        >
+          {status}
+        </Badge>
+      );
+    },
+  },
+  {
+    id: "actions",
+    header: () => t("sites.columns.actions"),
+    cell: ({ row }) => {
+      const site = row.original;
+      const isArchived = site.status === "Archived";
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="h-8 w-8 p-0">
+              <MoreHorizontal className="h-4 w-4" />
+              <span className="sr-only">Open Menu</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-[160px]">
+            <DropdownMenuLabel>{t("sites.columns.actions")}</DropdownMenuLabel>
+            <DropdownMenuItem onClick={() => onView(site)}>
+              <Eye className="mr-2 h-4 w-4 text-slate-500" />
+              {t("sites.actions.view")}
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => onEdit(site)}>
+              <Edit className="mr-2 h-4 w-4 text-blue-500" />
+              {t("sites.actions.edit")}
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => onBranding(site)}>
+              <Palette className="mr-2 h-4 w-4 text-purple-500" />
+              {t("sites.actions.branding")}
+            </DropdownMenuItem>
+            {!isArchived ? (
+              <DropdownMenuItem
+                onClick={() => onArchive(site)}
+                className="text-amber-600 focus:text-amber-600 cursor-pointer"
+              >
+                <Archive className="mr-2 h-4 w-4 text-amber-500" />
+                {t("sites.actions.archive")}
+              </DropdownMenuItem>
+            ) : (
+              <DropdownMenuItem
+                onClick={() => onRestore(site)}
+                className="text-emerald-600 focus:text-emerald-600 cursor-pointer"
+              >
+                <RefreshCw className="mr-2 h-4 w-4 text-emerald-500" />
+                {t("sites.actions.restore")}
+              </DropdownMenuItem>
+            )}
+            <DropdownMenuItem
+              onClick={() => onDelete(site)}
+              className="text-rose-600 focus:text-rose-600 cursor-pointer"
+            >
+              <Trash2 className="mr-2 h-4 w-4 text-rose-500" />
+              {t("sites.actions.delete")}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/sites/SitesPage.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/sites/SitesPage.tsx
new file mode 100644
index 000000000..ad5b9eee2
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/sites/SitesPage.tsx
@@ -0,0 +1,363 @@
+import { useState, useMemo, useEffect } from "react";
+import { useSites } from "@/super-admin/hooks/useSites";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { Button } from "@/shared/common/ui/button";
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import { getSitesColumnDefn } from "./SitesColumnDefn";
+import { Loader, Plus } from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import { SiteDto, SitePayloadDto } from "@/super-admin/dto/SitesDto";
+import SiteFormModal from "./SiteFormModal";
+import SiteViewModal from "./SiteViewModal";
+
+export default function SitesPage() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [pageIndex, setPageIndex] = useState(0);
+  const [pageSize, setPageSize] = useState(10);
+  const [searchTerm, setSearchTerm] = useState("");
+
+  // Modals state
+  const [formOpen, setFormOpen] = useState(false);
+  const [viewOpen, setViewOpen] = useState(false);
+  const [selectedSite, setSelectedSite] = useState<SiteDto | null>(null);
+
+  // Dialogs state for archive/delete/restore
+  const [archiveDialogOpen, setArchiveDialogOpen] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [restoreDialogOpen, setRestoreDialogOpen] = useState(false);
+
+  // Query & mutation hook
+  const {
+    sitesResponse,
+    isLoading,
+    refetch,
+    createSite,
+    isCreating,
+    updateSite,
+    isUpdating,
+    archiveSite,
+    isArchiving,
+    deleteSite,
+    isDeleting,
+    restoreSite,
+    isRestoring,
+  } = useSites({
+    take: pageSize,
+    skip: pageIndex * pageSize,
+    orderBy: "createdAt:DESC",
+  });
+
+  useEffect(() => {
+    setPageIndex(0);
+  }, [searchTerm, pageSize]);
+
+  const handlePageChange = (newPage: number) => {
+    setPageIndex(newPage);
+  };
+
+  const handleAddNewClick = () => {
+    setSelectedSite(null);
+    setFormOpen(true);
+  };
+
+  const handleFormSubmit = (payload: SitePayloadDto) => {
+    if (selectedSite) {
+      updateSite(
+        { id: selectedSite.id, payload },
+        {
+          onSuccess: () => {
+            setFormOpen(false);
+            setSelectedSite(null);
+          },
+        },
+      );
+    } else {
+      createSite(payload, {
+        onSuccess: () => {
+          setFormOpen(false);
+        },
+      });
+    }
+  };
+
+  const handleArchiveConfirm = () => {
+    if (selectedSite) {
+      archiveSite(
+        { id: selectedSite.id },
+        {
+          onSuccess: () => {
+            setArchiveDialogOpen(false);
+            setSelectedSite(null);
+          },
+        },
+      );
+    }
+  };
+
+  const handleDeleteConfirm = () => {
+    if (selectedSite) {
+      deleteSite(
+        { id: selectedSite.id },
+        {
+          onSuccess: () => {
+            setDeleteDialogOpen(false);
+            setSelectedSite(null);
+          },
+        },
+      );
+    }
+  };
+
+  const handleRestoreConfirm = () => {
+    if (selectedSite) {
+      restoreSite(
+        { id: selectedSite.id },
+        {
+          onSuccess: () => {
+            setRestoreDialogOpen(false);
+            setSelectedSite(null);
+          },
+        },
+      );
+    }
+  };
+
+  // Extract all sites from response
+  const allSites = useMemo(() => sitesResponse?.items || [], [sitesResponse]);
+  // Existing keys list (for create uniqueness validation)
+  const existingKeys = useMemo(() => allSites.map((s) => s.key), [allSites]);
+
+  // Get table column definitions
+  const columns = useMemo(
+    () =>
+      getSitesColumnDefn({
+        onView: (site) => {
+          setSelectedSite(site);
+          setViewOpen(true);
+        },
+        onEdit: (site) => {
+          setSelectedSite(site);
+          setFormOpen(true);
+        },
+        onArchive: (site) => {
+          setSelectedSite(site);
+          setArchiveDialogOpen(true);
+        },
+        onRestore: (site) => {
+          setSelectedSite(site);
+          setRestoreDialogOpen(true);
+        },
+        onDelete: (site) => {
+          setSelectedSite(site);
+          setDeleteDialogOpen(true);
+        },
+        onBranding: (site) => {
+          navigate(`/user-management/web-management/Branding/Branding/${site.id}`);
+        },
+      }),
+    [],
+  );
+
+  return (
+    <div className="p-6 space-y-6">
+      <Card className="col-span-2 shadow-none border-none bg-transparent px-0">
+        <CardHeader className="flex flex-row justify-between items-center px-0">
+          <CardTitle className="text-2xl font-bold text-slate-800 dark:text-slate-100">
+            {t("sites.title")}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="px-0">
+          <AdvancedTable
+            columns={columns}
+            data={sitesResponse?.items || []}
+            tableName={t("sites.tableName")}
+            toolBarPosition="right"
+            itemCount={sitesResponse?.count || 0}
+            pageSize={pageSize}
+            onGlobalFilterChange={setSearchTerm}
+            extraToolbar={
+              <Button
+                onClick={handleAddNewClick}
+                className="px-5 py-2 rounded-md text-sm font-medium shadow-md cursor-pointer"
+              >
+                <Plus className="w-4 h-4 mr-2" />
+                {t("sites.addNew")}
+              </Button>
+            }
+            pageIndex={pageIndex}
+            onPageChange={handlePageChange}
+            onPageSizeChange={setPageSize}
+            nextFunction={() => handlePageChange(pageIndex + 1)}
+            prevFunction={() => handlePageChange(Math.max(pageIndex - 1, 0))}
+            refresh={refetch}
+            isLoading={isLoading}
+          />
+        </CardContent>
+      </Card>
+
+      {/* Create / Edit Form Modal */}
+      <SiteFormModal
+        isOpen={formOpen}
+        onClose={() => {
+          setFormOpen(false);
+          setSelectedSite(null);
+        }}
+        onSubmit={handleFormSubmit}
+        site={selectedSite}
+        isSubmitting={isCreating || isUpdating}
+        existingKeys={existingKeys}
+      />
+
+      {/* Read-Only View Modal */}
+      <SiteViewModal
+        isOpen={viewOpen}
+        onClose={() => {
+          setViewOpen(false);
+          setSelectedSite(null);
+        }}
+        site={selectedSite}
+      />
+
+      {/* Archive Confirmation (Soft Delete) */}
+      <AlertDialog
+        open={archiveDialogOpen}
+        onOpenChange={(open) => !open && setArchiveDialogOpen(false)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle className="text-lg font-bold">
+              {t("sites.dialogs.archiveTitle")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t("sites.dialogs.archiveDescription", {
+                name: selectedSite?.name?.en,
+              })}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel
+              disabled={isArchiving}
+              onClick={() => {
+                setArchiveDialogOpen(false);
+                setSelectedSite(null);
+              }}
+              className="cursor-pointer"
+            >
+              {t("common.cancel")}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              disabled={isArchiving}
+              onClick={handleArchiveConfirm}
+              className="bg-amber-600 hover:bg-amber-700 text-white cursor-pointer"
+            >
+              {isArchiving
+                ? t("sites.dialogs.archiving")
+                : t("sites.dialogs.archiveConfirm")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Permanent Delete Confirmation (Hard Delete) */}
+      <AlertDialog
+        open={deleteDialogOpen}
+        onOpenChange={(open) => !open && setDeleteDialogOpen(false)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle className="text-lg font-bold text-red-600">
+              {t("sites.dialogs.deleteTitle")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              <span
+                dangerouslySetInnerHTML={{
+                  __html: t("sites.dialogs.deleteDescription", {
+                    name: selectedSite?.name?.en,
+                  }),
+                }}
+              />
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel
+              disabled={isDeleting}
+              onClick={() => {
+                setDeleteDialogOpen(false);
+                setSelectedSite(null);
+              }}
+              className="cursor-pointer"
+            >
+              {t("common.cancel")}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              disabled={isDeleting}
+              onClick={handleDeleteConfirm}
+              className="bg-red-600 hover:bg-red-700 text-white cursor-pointer"
+            >
+              {isDeleting
+                ? t("sites.dialogs.deleting")
+                : t("sites.dialogs.deleteConfirm")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Restore Confirmation */}
+      <AlertDialog
+        open={restoreDialogOpen}
+        onOpenChange={(open) => !open && setRestoreDialogOpen(false)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle className="text-lg font-bold">
+              {t("sites.dialogs.restoreTitle")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t("sites.dialogs.restoreDescription", {
+                name: selectedSite?.name?.en,
+              })}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel
+              disabled={isRestoring}
+              onClick={() => {
+                setRestoreDialogOpen(false);
+                setSelectedSite(null);
+              }}
+              className="cursor-pointer"
+            >
+              {t("common.cancel")}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              disabled={isRestoring}
+              onClick={handleRestoreConfirm}
+              className="bg-emerald-600 hover:bg-emerald-700 text-white cursor-pointer"
+            >
+              {isRestoring
+                ? t("sites.dialogs.restoring")
+                : t("sites.dialogs.restoreConfirm")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/templates/components/TemplateCard.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/templates/components/TemplateCard.tsx
new file mode 100644
index 000000000..79e212636
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/templates/components/TemplateCard.tsx
@@ -0,0 +1,151 @@
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "@/shared/common/ui/card";
+import { FileText, Plus } from "lucide-react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { useState } from "react";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import { useTemplate } from "../service/useTemplate";
+import { TemplateForm } from "./TemplateForm";
+import { toast } from "sonner";
+import { Button } from "@/shared/common/ui/button";
+import { t } from "i18next";
+import i18n from "@/i18n";
+import { CreateTemplateTypes } from "../types/templateTypes";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+const TemplateCard = () => {
+  const { handleError } = useErrorHandler(t);
+  const {
+    templates,
+    isLoading,
+    isError,
+    refetch,
+    createTemplate,
+    updateTemplate,
+    isCreatingTemplate,
+    isUpdatingTemplate,
+  } = useTemplate();
+
+  const lang = i18n.language;
+  const [selectedTemplateId, setSelectedTemplateId] = useState<string | null>(
+    null
+  );
+  const [showCreateForm, setShowCreateForm] = useState(false);
+
+  const templateList: CreateTemplateTypes[] = Array.isArray(templates) ? templates : templates?.items || [];
+  const selectedTemplate =
+    templateList.find((t) => t.id === selectedTemplateId) ?? null;
+
+  return (
+    <Card className="bg-gradient-to-br from-blue-50 to-indigo-50">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="flex items-center">
+              <FileText className="h-5 w-5 mr-2" />
+              {t("contentManagement.letterTemplate")}
+            </CardTitle>
+            <CardDescription>
+              {t("contentManagement.createMsg")}
+            </CardDescription>
+          </div>
+          <Button onClick={() => setShowCreateForm(true)} size="sm">
+            <Plus className="h-4 w-4 mr-1" />
+            {t("contentManagement.addTemplate")}
+          </Button>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-6">
+        {isLoading ? (
+          <>
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-20 w-full" />
+          </>
+        ) : isError ? (
+          <p className="text-sm text-red-600">
+            {t("contentManagement.failedToLoadTemplates")}
+          </p>
+        ) : (
+          <>
+            {templateList.length > 0 && (
+              <Select
+                onValueChange={(value) => {
+                  setSelectedTemplateId(value);
+                  setShowCreateForm(false);
+                }}
+                value={selectedTemplateId ?? undefined}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder={t("contentManagement.selectTemplate")} />
+                </SelectTrigger>
+                <SelectContent>
+                  {templateList.map((template) => (
+                    <SelectItem key={template.id!} value={template.id!}>
+                      {lang === "en" ? template.name.en : template.name.am}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+
+            {(selectedTemplate || showCreateForm) && (
+              <TemplateForm
+                isSubmitting={isCreatingTemplate || isUpdatingTemplate}
+                template={selectedTemplate}
+                onCancel={() => {
+                  setShowCreateForm(false);
+                  setSelectedTemplateId(null);
+                }}
+                onSubmitCreate={(values) => {
+                  if (selectedTemplate?.id) {
+                    updateTemplate(
+                      { id: selectedTemplate.id, template: values },
+                      {
+                        onSuccess: () => {
+                          toast.success(t("contentManagement.updateTemplate"));
+                          refetch();
+                          setShowCreateForm(false);
+                        },
+                        onError: (error) => {
+                          handleError(error);
+                        },
+                      }
+                    );
+                  } else {
+                    createTemplate(values, {
+                      onSuccess: (newTemplate: any) => {
+                        toast.success(
+                          `${values.name.en} ${t("contentManagement.templateSuccessMsg")}`
+                        );
+                        refetch();
+                        setShowCreateForm(false);
+                        // setSelectedTemplateId(newTemplate.id);
+                      },
+                      onError: (error) => {
+                        handleError(error);
+                      },
+                    });
+                  }
+                }}
+              />
+            )}
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default TemplateCard;
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/templates/components/TemplateEditor.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/templates/components/TemplateEditor.tsx
new file mode 100644
index 000000000..9b87f432c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/templates/components/TemplateEditor.tsx
@@ -0,0 +1,132 @@
+import React, { useMemo, useState, useEffect } from "react";
+import { Editor as TinyMCEEditor } from "@/record-management/common/editor/rte";
+import type { Editor as TinyMCEEditorType } from "tinymce";
+
+export interface Placeholder {
+  key: string;
+  label: string;
+}
+
+interface TemplateEditorProps {
+  value: string;
+  onEditorChange: (value: string, editor: TinyMCEEditorType) => void;
+  apiKey?: string;
+  placeholders?: Placeholder[];
+}
+
+export const TemplateEditor: React.FC<TemplateEditorProps> = ({
+  value,
+  onEditorChange,
+  apiKey,
+  placeholders,
+}) => {
+  const hasPlaceholders = placeholders && placeholders.length > 0;
+  const [isDarkMode, setIsDarkMode] = useState(() => 
+    typeof window !== "undefined" && document.documentElement.classList.contains("dark")
+  );
+  
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      setIsDarkMode(document.documentElement.classList.contains("dark"));
+    });
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
+  
+  const init = useMemo(() => {
+    return {
+      height: 600,
+      menubar: true,
+      skin: isDarkMode ? "oxide-dark" : "oxide",
+      skin_url: isDarkMode ? "/tinymce/skins/ui/oxide-dark" : "/tinymce/skins/ui/oxide",
+      content_css: isDarkMode ? "dark" : "default",
+      content_style: `
+        body { 
+          font-family:Helvetica,Arial,sans-serif; 
+          font-size:14px;
+          ${isDarkMode ? `
+            background-color: #1f2937;
+            color: #e5e7eb;
+          ` : `
+            background-color: #ffffff;
+            color: #1f2937;
+          `}
+        }
+        ${hasPlaceholders ? `
+          .placeholder {
+            ${isDarkMode ? `
+              background-color: #1e3a5f;
+              border: 1px dashed #60a5fa;
+              color: #93c5fd;
+            ` : `
+              background-color: #e0f2fe;
+              border: 1px dashed #38bdf8;
+            `}
+            padding: 2px 4px;
+            border-radius: 4px;
+            cursor: pointer;
+            display: inline-block;
+            margin: 0 2px;
+          }
+        ` : ""}
+      `,
+      plugins: [
+        "autolink", "link", "lists", "code", "table", "image", "preview", "searchreplace", "wordcount",
+        ...(hasPlaceholders ? ["noneditable"] : [])
+      ].join(" "),
+      toolbar: [
+        "undo redo | bold italic underline |",
+        "alignleft aligncenter alignright alignjustify |",
+        "bullist numlist outdent indent | link image table | code preview",
+        hasPlaceholders ? "| placeholders" : ""
+      ].join(" "),
+      noneditable_class: "mceNonEditable",
+      setup: (editor: TinyMCEEditorType) => {
+        if (hasPlaceholders) {
+          editor.ui.registry.addMenuButton("placeholders", {
+            text: "Placeholders",
+            fetch: (callback) => {
+              const items = placeholders.map((p) => ({
+                type: "menuitem" as const,
+                text: p.label,
+                onAction: () => {
+                  const html = `<span class="mceNonEditable placeholder" data-key="${p.key}">{{${p.key}}}</span>&#8203;`;
+                  editor.insertContent(html);
+                },
+              }));
+              callback(items);
+            },
+          });
+
+          editor.on("click", (e) => {
+            const target = e.target as HTMLElement;
+            if (target.classList.contains("placeholder")) {
+              editor.selection.select(target);
+            }
+          });
+
+          editor.on("keydown", (e) => {
+            if (e.key === "Backspace" || e.key === "Delete") {
+              const node = editor.selection.getNode();
+              if (node && node.classList.contains("placeholder")) {
+                e.preventDefault();
+                node.remove();
+              }
+            }
+          });
+        }
+      },
+    };
+  }, [placeholders, hasPlaceholders, isDarkMode]);
+
+  return (
+    <TinyMCEEditor
+      key={isDarkMode ? "dark" : "light"}
+      tinymceScriptSrc="/tinymce/tinymce.min.js"
+      apiKey={apiKey}
+      value={value}
+      onEditorChange={onEditorChange}
+      init={init}
+    />
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/templates/components/TemplateForm.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/templates/components/TemplateForm.tsx
new file mode 100644
index 000000000..bac21270d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/templates/components/TemplateForm.tsx
@@ -0,0 +1,195 @@
+import { Controller, useForm } from "react-hook-form";
+import { Input } from "@/shared/common/ui/input";
+import { Button } from "@/shared/common/ui/button";
+import { CreateTemplateTypes } from "../types/templateTypes";
+import { Editor } from "@/record-management/common/editor/rte";
+import { TemplateEditor } from "./TemplateEditor";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+interface Props {
+  template?: CreateTemplateTypes | null;
+  isSubmitting: boolean;
+  onCancel: () => void;
+  onSubmitCreate: (data: CreateTemplateTypes) => void;
+}
+
+const editorApiKey = import.meta.env.VITE_EDITOR_API_KEY || "";
+
+export const TemplateForm = ({
+  template,
+  isSubmitting,
+  onCancel,
+  onSubmitCreate,
+}: Props) => {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    control,
+    formState: { errors },
+  } = useForm<CreateTemplateTypes>({
+    defaultValues: {
+      name: {
+        en: template?.name?.en ?? "",
+        am: template?.name?.am ?? "",
+      },
+      key: template?.key ?? "",
+      subject: template?.subject ?? "",
+      body: template?.body ?? "",
+      sincerelyText: template?.sincerelyText ?? "",
+      locale: template?.locale ?? "en",
+    },
+  });
+
+  const onSubmit = (values: CreateTemplateTypes) => {
+    onSubmitCreate(values);
+    if (!template) {
+      reset();
+    }
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-8 shadow-sm dark:shadow-gray-900/50 space-y-8"
+    >
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+            Template Key
+          </label>
+          <Input
+            placeholder="Template Key"
+            {...register("key", { required: "Template key is required" })}
+          />
+          {errors.key && (
+            <p className="text-red-500 text-sm mt-1">{errors.key.message}</p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+            Subject
+          </label>
+          <Input
+            placeholder="Subject"
+            {...register("subject", { required: "Subject is required" })}
+          />
+          {errors.subject && (
+            <p className="text-red-500 text-sm mt-1">
+              {errors.subject.message}
+            </p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+            English Name
+          </label>
+          <Input
+            placeholder="English Name"
+            {...register("name.en", { required: "English name is required" })}
+          />
+          {errors.name?.en && (
+            <p className="text-red-500 text-sm mt-1">
+              {errors.name.en.message}
+            </p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+            Amharic Name
+          </label>
+          <Input
+            placeholder="Amharic Name"
+            {...register("name.am", { required: "Amharic name is required" })}
+          />
+          {errors.name?.am && (
+            <p className="text-red-500 text-sm mt-1">
+              {errors.name.am.message}
+            </p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+            Language
+          </label>
+          <Controller
+            name="locale"
+            control={control}
+            rules={{ required: "Language is required" }}
+            render={({ field }) => (
+              <Select value={field.value} onValueChange={field.onChange}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select Language" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="en">English</SelectItem>
+                  <SelectItem value="am">Amharic</SelectItem>
+                </SelectContent>
+              </Select>
+            )}
+          />
+          {errors.locale && (
+            <p className="text-red-500 text-sm mt-1">{errors.locale.message}</p>
+          )}
+        </div>
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+          Body
+        </label>
+        <Controller
+          name="body"
+          control={control}
+          rules={{ required: true }}
+          render={({ field, fieldState }) => (
+            <>
+              <TemplateEditor
+                value={field.value}
+                onEditorChange={field.onChange}
+                apiKey={editorApiKey}
+                placeholders={[
+                  { key: "delegatorName", label: "Delegator Name" },
+                  { key: "delegatorDepartment", label: "Delegator Department" },
+                  { key: "delegateeName", label: "Delegatee Name" },
+                  { key: "delegateeDepartment", label: "Delegatee Department" },
+                  { key: "startDate", label: "Start Date" },
+                  { key: "endDate", label: "End Date" },
+                  { key: "startDateTime", label: "Start Date & Time" },
+                  { key: "endDateTime", label: "End Date & Time" },
+                ]}
+              />
+              {fieldState.invalid && (
+                <p className="text-red-500 text-sm mt-1">Body is required</p>
+              )}
+            </>
+          )}
+        />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+          Sincerely Text
+        </label>
+        <Input placeholder="Sincerely Text" {...register("sincerelyText")} />
+      </div>
+
+      <div className="flex gap-2 pt-4 justify-end">
+        <Button type="submit" disabled={isSubmitting}>
+          {isSubmitting ? "Saving..." : template ? "Update" : "Save"}
+        </Button>
+        <Button type="button" variant="outline" onClick={onCancel}>
+          Cancel
+        </Button>
+      </div>
+    </form>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/templates/components/TemplateTable.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/templates/components/TemplateTable.tsx
new file mode 100644
index 000000000..feb87bac2
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/templates/components/TemplateTable.tsx
@@ -0,0 +1,402 @@
+import React, { useState } from "react";
+import { sanitizeHtml } from "@/shared/lib/sanitize";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+} from "@/shared/common/ui/card";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/common/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { FileText, Plus, Edit, Trash2, Eye } from "lucide-react";
+import { TemplateForm } from "./TemplateForm";
+import { CreateTemplateTypes } from "../types/templateTypes";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { toast } from "sonner";
+import { t } from "i18next";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import { useTemplate } from "../service/useTemplate";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+const TemplateTable = () => {
+  const { handleError } = useErrorHandler(t);
+  const {
+    templates,
+    isLoading,
+    isError,
+    refetch,
+    createTemplate,
+    updateTemplate,
+    deleteTemplate,
+    isCreatingTemplate,
+    isUpdatingTemplate,
+    isDeletingTemplate,
+  } = useTemplate();
+
+  const templateList: CreateTemplateTypes[] = Array.isArray(templates) ? templates : templates?.items || [];
+
+  const localizedName = useLocalizedName();
+
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+  const [isViewDialogOpen, setIsViewDialogOpen] = useState(false);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [selectedTemplate, setSelectedTemplate] =
+    useState<CreateTemplateTypes | null>(null);
+
+  const preventDialogCloseFromTinyMce = (event: Event) => {
+    const target = event.target as HTMLElement | null;
+
+    if (
+      target?.closest(
+        ".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root"
+      )
+    ) {
+      event.preventDefault();
+    }
+  };
+
+  const handleCreate = (values: CreateTemplateTypes) => {
+    createTemplate(values, {
+      onSuccess: (newTemplate: any) => {
+        // Assume API returns the created config or just general success
+        toast.success(t("contentManagement.templateSuccessMsg"));
+        refetch();
+        setIsCreateDialogOpen(false);
+      },
+      onError: (error) => {
+        handleError(error);
+      },
+    });
+  };
+
+  const handleUpdate = (values: CreateTemplateTypes) => {
+    if (!selectedTemplate?.id) return;
+
+    updateTemplate({ id: selectedTemplate.id, template: values }, {
+      onSuccess: () => {
+        toast.success(t("contentManagement.updateTemplate"));
+        refetch();
+        setIsEditDialogOpen(false);
+        setSelectedTemplate(null);
+      },
+      onError: (error) => {
+        handleError(error);
+      },
+    });
+  };
+
+  const handleDelete = () => {
+    if (!selectedTemplate?.id) return;
+
+    deleteTemplate(selectedTemplate.id, {
+      onSuccess: () => {
+        toast.success(t("contentManagement.deleteTemplate"));
+        refetch();
+        setIsDeleteDialogOpen(false);
+        setSelectedTemplate(null);
+      },
+      onError: (error) => {
+        handleError(error);
+      },
+    });
+  };
+
+  const openEditDialog = (template: CreateTemplateTypes) => {
+    setSelectedTemplate(template);
+    setIsEditDialogOpen(true);
+  };
+
+  const openViewDialog = (template: CreateTemplateTypes) => {
+    setSelectedTemplate(template);
+    setIsViewDialogOpen(true);
+  };
+
+  const openDeleteDialog = (template: CreateTemplateTypes) => {
+    setSelectedTemplate(template);
+    setIsDeleteDialogOpen(true);
+  };
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center">
+            <FileText className="h-5 w-5 mr-2" />
+            {t("contentManagement.letterTemplate")}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            {Array(3)
+              .fill(0)
+              .map((_, index) => (
+                <Skeleton key={index} className="h-12 w-full" />
+              ))}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (isError) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center">
+            <FileText className="h-5 w-5 mr-2" />
+            {t("contentManagement.letterTemplate")}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-red-600">
+            {t("contentManagement.failedToLoadTemplates")}
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <>
+      <Card>
+        <CardHeader>
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+            <div>
+              <CardTitle className="flex items-center">
+                <FileText className="h-5 w-5 mr-2" />
+                {t("contentManagement.letterTemplate")}
+              </CardTitle>
+              <p className="text-sm text-muted-foreground mt-1">
+                {t("contentManagement.createMsg")}
+              </p>
+            </div>
+            <Button
+              onClick={() => setIsCreateDialogOpen(true)}
+              size="sm"
+              className="shrink-0"
+            >
+              <Plus className="h-4 w-4 mr-1" />
+              {t("contentManagement.addTemplate")}
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent>
+          {templateList.length === 0 ? (
+            <div className="text-center py-8">
+              <FileText className="h-12 w-12 text-gray-400 dark:text-gray-500 mx-auto mb-4" />
+              <p className="text-gray-500 dark:text-gray-400">
+                {t("contentManagement.noTemplates")}
+              </p>
+            </div>
+          ) : (
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="min-w-[150px]">
+                      {t("common.name")}
+                    </TableHead>
+                    <TableHead className="min-w-[200px] hidden md:table-cell">
+                      {t("contentManagement.sincerelyText")}
+                    </TableHead>
+                    <TableHead className="text-right min-w-[120px]">
+                      {t("common.actions")}
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {templateList.map((template) => (
+                    <TableRow key={template.id}>
+                      <TableCell className="font-medium">
+                        <div className="flex flex-col">
+                          <span>{localizedName(template.name)}</span>
+                          <span className="text-xs text-gray-500 dark:text-gray-400 md:hidden">
+                            {template.sincerelyText &&
+                              template.sincerelyText.length > 30
+                              ? `${template.sincerelyText.substring(0, 30)}...`
+                              : template.sincerelyText ||
+                              t("common.notAvailable")}
+                          </span>
+                        </div>
+                      </TableCell>
+                      <TableCell className="max-w-xs truncate hidden md:table-cell">
+                        {template.sincerelyText || t("common.notAvailable")}
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <div className="flex items-center justify-end gap-1">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => openViewDialog(template)}
+                            title={t("contentManagement.viewTemplate")}
+                          >
+                            <Eye className="h-4 w-4" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => openEditDialog(template)}
+                            title={t("contentManagement.editTemplate")}
+                          >
+                            <Edit className="h-4 w-4" />
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => openDeleteDialog(template)}
+                            className="text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300"
+                            title={t("contentManagement.deleteTemplate")}
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Create Dialog */}
+      <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
+        <DialogContent
+          className="max-w-[95vw] lg:max-w-[1200px] max-h-[90vh] overflow-y-auto w-full"
+          onInteractOutside={preventDialogCloseFromTinyMce}
+        >
+          <DialogHeader>
+            <DialogTitle>{t("contentManagement.createTemplate")}</DialogTitle>
+          </DialogHeader>
+          <TemplateForm
+            isSubmitting={isCreatingTemplate}
+            onCancel={() => setIsCreateDialogOpen(false)}
+            onSubmitCreate={handleCreate}
+          />
+        </DialogContent>
+      </Dialog>
+
+      {/* Edit Dialog */}
+      <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+        <DialogContent
+          className="max-w-[95vw] lg:max-w-[1200px] max-h-[90vh] overflow-y-auto w-full"
+          onInteractOutside={preventDialogCloseFromTinyMce}
+        >
+          <DialogHeader>
+            <DialogTitle>{t("contentManagement.editTemplate")}</DialogTitle>
+          </DialogHeader>
+          <TemplateForm
+            template={selectedTemplate}
+            isSubmitting={isUpdatingTemplate}
+            onCancel={() => {
+              setIsEditDialogOpen(false);
+              setSelectedTemplate(null);
+            }}
+            onSubmitCreate={handleUpdate}
+          />
+        </DialogContent>
+      </Dialog>
+
+      {/* View Dialog */}
+      <Dialog open={isViewDialogOpen} onOpenChange={setIsViewDialogOpen}>
+        <DialogContent className="max-w-[95vw] lg:max-w-[1200px] max-h-[90vh] overflow-y-auto w-full">
+          <DialogHeader>
+            <DialogTitle>{t("contentManagement.viewTemplate")}</DialogTitle>
+          </DialogHeader>
+          {selectedTemplate && (
+            <div className="space-y-4">
+              <div>
+                <label className="text-sm font-medium text-gray-600 dark:text-gray-300">
+                  {t("common.name")}
+                </label>
+                <p className="text-sm text-gray-900 dark:text-gray-100 mt-1">
+                  {localizedName(selectedTemplate.name)}
+                </p>
+              </div>
+              <div>
+                <label className="text-sm font-medium text-gray-600 dark:text-gray-300">
+                  {t("contentManagement.sincerelyText")}
+                </label>
+                <p className="text-sm text-gray-900 dark:text-gray-100 mt-1">
+                  {selectedTemplate.sincerelyText || t("common.notAvailable")}
+                </p>
+              </div>
+              <div>
+                <label className="text-sm font-medium text-gray-600 dark:text-gray-300">
+                  {t("contentManagement.body")}
+                </label>
+                <div
+                  className="text-sm text-gray-900 dark:text-gray-100 mt-1 p-3 border border-gray-200 dark:border-gray-700 rounded-md bg-gray-50 dark:bg-gray-700 max-h-60 overflow-y-auto"
+                  dangerouslySetInnerHTML={{ __html: sanitizeHtml(selectedTemplate.body) }}
+                />
+              </div>
+              <div className="flex justify-end">
+                <Button onClick={() => setIsViewDialogOpen(false)}>
+                  {t("common.close")}
+                </Button>
+              </div>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog
+        open={isDeleteDialogOpen}
+        onOpenChange={setIsDeleteDialogOpen}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t("contentManagement.deleteTemplate")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t("contentManagement.deleteTemplateConfirm", {
+                name: selectedTemplate
+                  ? localizedName(selectedTemplate.name)
+                  : "",
+              })}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              disabled={isDeletingTemplate}
+              className="bg-red-600 hover:bg-red-700"
+            >
+              {isDeletingTemplate ? t("common.deleting") : t("common.delete")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+};
+
+export default TemplateTable;
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/templates/components/templates.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/templates/components/templates.tsx
new file mode 100644
index 000000000..0ef0d1497
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/templates/components/templates.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import TemplateTable from "./TemplateTable";
+
+const TemplatePage = () => {
+    return (
+        <div className="p-6">
+            <div className="mb-6">
+                <h1 className="text-2xl font-bold bg-gradient-to-r from-primary to-primary-400 bg-clip-text text-transparent">
+                    Manage Delegation Templates
+                </h1>
+                <p className="text-gray-500 dark:text-gray-400 mt-1">
+                    Create, edit, and view delegation global templates.
+                </p>
+            </div>
+
+            <div className="space-y-6">
+                <TemplateTable />
+            </div>
+        </div>
+    );
+};
+
+export default TemplatePage;
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/templates/service/useTemplate.ts b/apps/edr-freight-web/backoffice/src/super-admin/components/templates/service/useTemplate.ts
new file mode 100644
index 000000000..5e32c53d6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/templates/service/useTemplate.ts
@@ -0,0 +1,105 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import {
+  adoptDelegationTemplate,
+  createDelegationTemplate,
+  deleteDelegationTemplate,
+  getDelegationTemplateById,
+  getDelegationTemplates,
+  updateDelegationTemplate,
+} from "@/super-admin/services/api/delegationTemplate";
+import { CreateTemplateTypes } from "../types/templateTypes";
+import { AdoptTemplateTypes } from "../template";
+
+export const useTemplate = (id?: string) => {
+  const {
+    data: templates,
+    isLoading,
+    isError,
+    refetch,
+  } = useQuery({
+    queryKey: ["templates"],
+    queryFn: async () => {
+      return await getDelegationTemplates();
+    },
+  });
+
+  const {
+    data: template,
+    isLoading: isLoadingTemplate,
+    isError: isErrorTemplate,
+    refetch: refetchTemplate,
+  } = useQuery({
+    queryKey: ["template", id],
+    queryFn: async () => {
+      return await getDelegationTemplateById(id!, { take: 300 });
+    },
+  });
+
+  const {
+    mutate: createTemplate,
+    isPending: isCreatingTemplate,
+    isError: isErrorCreateTemplate,
+  } = useMutation({
+    mutationFn: async (template: CreateTemplateTypes) => {
+      return await createDelegationTemplate(template);
+    },
+  });
+
+  const {
+    mutate: updateTemplate,
+    isPending: isUpdatingTemplate,
+    isError: isErrorUpdateTemplate,
+  } = useMutation({
+    mutationFn: async ({
+      id,
+      template,
+    }: {
+      id: string;
+      template: CreateTemplateTypes;
+    }) => {
+      return await updateDelegationTemplate(id, template);
+    },
+  });
+
+  const {
+    mutate: deleteTemplate,
+    isPending: isDeletingTemplate,
+    isError: isErrorDeleteTemplate,
+  } = useMutation({
+    mutationFn: async (id: string) => {
+      return await deleteDelegationTemplate(id);
+    },
+  });
+
+  const {
+    mutate: adoptTemplate,
+    isPending: isAdoptingTemplate,
+    isError: isErrorAdoptingTemplate,
+  } = useMutation({
+    mutationFn: async (item: AdoptTemplateTypes) => {
+      return await adoptDelegationTemplate(item);
+    },
+  });
+  return {
+    templates,
+    isLoading,
+    isError,
+    refetch,
+    template,
+    isLoadingTemplate,
+    isErrorTemplate,
+    refetchTemplate,
+    createTemplate,
+    isCreatingTemplate,
+    isErrorCreateTemplate,
+    updateTemplate,
+    isUpdatingTemplate,
+    isErrorUpdateTemplate,
+    deleteTemplate,
+    isDeletingTemplate,
+    isErrorDeleteTemplate,
+    adoptTemplate,
+    isAdoptingTemplate,
+    isErrorAdoptingTemplate,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/templates/template.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/templates/template.tsx
new file mode 100644
index 000000000..7dc76bcfe
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/templates/template.tsx
@@ -0,0 +1,17 @@
+export interface CreateTemplateTypes {
+  sincerelyText: string,
+  body: string,
+  subject: string,
+  key: string,
+  name: {
+    am: string,
+    en: string
+
+  }
+}
+
+export interface AdoptTemplateTypes {
+  templateId: string,
+  headerId: string,
+  footerId: string,
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/templates/types/templateTypes.ts b/apps/edr-freight-web/backoffice/src/super-admin/components/templates/types/templateTypes.ts
new file mode 100644
index 000000000..f28b20184
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/templates/types/templateTypes.ts
@@ -0,0 +1,12 @@
+export interface CreateTemplateTypes {
+  id?: string;
+  sincerelyText: string;
+  body: string;
+  subject: string;
+  key: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  locale: "am" | "en";
+}
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/dto/ExternalUsersDto.ts b/apps/edr-freight-web/backoffice/src/super-admin/dto/ExternalUsersDto.ts
new file mode 100644
index 000000000..8c0e9f092
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/dto/ExternalUsersDto.ts
@@ -0,0 +1,37 @@
+export type UserStatus = "pending" | "accepted" | "rejected" | "submitted"; // Based on backend API response
+
+export interface LocalizedName {
+  am: string;
+  en: string;
+}
+
+export interface ExternalUserDto {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  name: LocalizedName;
+  username: string;
+  phoneNumber: string;
+  email: string;
+  userType: "external_organization" | "employee" | "individual";
+  sharepointId: string | null;
+  status: UserStatus;
+  isActive: boolean;
+  hasSetPassword: boolean;
+  isPhoneNumberVerified: boolean;
+}
+
+export interface ExternalUsersResponseDto {
+  count: number;
+  items: ExternalUserDto[];
+}
+
+export enum UserType {
+  NON_SMART_USER = "non_smart_user",
+  INTERNAL = "internal",
+}
+
+export interface UserTypeDto {
+  type: UserType;
+  count: number;
+}
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/dto/SitesDto.ts b/apps/edr-freight-web/backoffice/src/super-admin/dto/SitesDto.ts
new file mode 100644
index 000000000..324336676
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/dto/SitesDto.ts
@@ -0,0 +1,33 @@
+export interface SiteNameDto {
+  am: string;
+  en: string;
+}
+
+export interface SiteDto {
+  id: string;
+  name: SiteNameDto;
+  key: string;
+  domain: string;
+  status: "Active" | "Archived" | string;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export interface SitePayloadDto {
+  name: SiteNameDto;
+  key: string;
+  domain: string;
+}
+
+export interface SitesResponseDto {
+  items: SiteDto[];
+  count: number;
+}
+
+export interface SiteQueryParams {
+  orderBy?: string;
+  take?: number;
+  skip?: number;
+  order?: string;
+  search?: string;
+}
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/dto/SuperAdminDto.ts b/apps/edr-freight-web/backoffice/src/super-admin/dto/SuperAdminDto.ts
new file mode 100644
index 000000000..a25a2f76c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/dto/SuperAdminDto.ts
@@ -0,0 +1,51 @@
+export interface MetadataDTO {
+  uploadedBy: {
+    am: string;
+    en: string;
+  };
+  deliveredBy: {
+    am: string;
+    en: string;
+  };
+  organizationName: {
+    am: string;
+    en: string;
+  };
+}
+
+export interface ContentDTO {
+  id: string;
+  subject: string;
+  receiverEmployees: any[]; // replace `any` with proper type if known
+  receiverPositions: any[]; // replace `any` with proper type if known
+}
+
+export interface RecordDTO {
+  createdAt: string;
+  updatedAt: string;
+  id: string;
+  referenceNumber: string;
+  letterNumber: string;
+  metadata: MetadataDTO;
+  dispatchedDate: string;
+  amharicDispatchedDate: string;
+  amharicCreatedAt: string;
+  statusKey: string;
+  recordTypeKey: string;
+  initiator: string | null;
+  content: ContentDTO[];
+}
+
+export interface MainDTO {
+  createdAt: string;
+  updatedAt: string;
+  id: string;
+  amharicCreatedAt: string;
+  status: string;
+  record: RecordDTO;
+}
+
+export interface MainDtoResponse {
+    items:MainDTO[];
+    count:number;
+}
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/hooks/use-mobile.ts b/apps/edr-freight-web/backoffice/src/super-admin/hooks/use-mobile.ts
new file mode 100644
index 000000000..1461fc059
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/hooks/use-mobile.ts
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/hooks/useArchivedUsers.ts b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useArchivedUsers.ts
new file mode 100644
index 000000000..622a602cb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useArchivedUsers.ts
@@ -0,0 +1,15 @@
+import { ItemDTO, User } from "@/shared/dto/user/usersDto";
+import { getArchivedUserId, OrgQueryParams } from "@/shared/services/organizationsService";
+import { useQuery } from "@tanstack/react-query";
+
+export const useArchivedUsers = (UnitId: string,params?:OrgQueryParams) => {
+  return useQuery({
+    queryKey: ["archived-users", UnitId,params],
+    queryFn: async () => {
+      if (!UnitId) return { items: [], count: 0 };
+      const { data } = await getArchivedUserId(UnitId,params);
+      return data as { items: ItemDTO[]; count: number };
+    },
+    enabled: !!UnitId,
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/hooks/useConfig.ts b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useConfig.ts
new file mode 100644
index 000000000..1750126d6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useConfig.ts
@@ -0,0 +1,167 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import type { AxiosResponse } from "axios";
+import {
+  createGlobalOrgConfig,
+  updateGlobalOrgConfig,
+  getGlobalOrgConfig,
+  getListOfGlobalOrgConfig,
+  createGlobalUnitConfig,
+  updateGlobalUnitConfig,
+  deleteGlobalUnitConfig,
+  getGlobalUnitConfig,
+  getListOfGlobalUnitConfig,
+  GlobalOrgConfig,
+  GlobalUnitConfig,
+  createOrganizationConfig,
+  updateOrganizationConfig,
+  deleteOrganizationConfig,
+  getOrganizationConfig,
+  OrganizationConfigPayload,
+} from "@/shared/services/organizationConfigService";
+
+// 🔹 Global Org Config Hooks
+export const useGetGlobalOrgConfig = (id: string) => {
+  return useQuery<AxiosResponse>({
+    queryKey: ["globalOrgConfig", id],
+    queryFn: () => getGlobalOrgConfig(id),
+    enabled: !!id,
+  });
+};
+
+export const useGetListOfGlobalOrgConfig = (id: string) => {
+  return useQuery<AxiosResponse>({
+    queryKey: ["listGlobalOrgConfig", id],
+    queryFn: () => getListOfGlobalOrgConfig(id),
+    enabled: !!id,
+  });
+};
+
+export const useCreateGlobalOrgConfig = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (data: GlobalOrgConfig) => createGlobalOrgConfig(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["listGlobalOrgConfig"] });
+    },
+  });
+};
+
+export const useUpdateGlobalOrgConfig = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, data }: { id: string; data: GlobalOrgConfig }) =>
+      updateGlobalOrgConfig(id, data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ["globalOrgConfig", variables.id],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["listGlobalOrgConfig"],
+      });
+    },
+  });
+};
+
+// 🔹 Global Unit Config Hooks
+export const useGetGlobalUnitConfig = (id: string) => {
+  return useQuery<AxiosResponse>({
+    queryKey: ["globalUnitConfig", id],
+    queryFn: () => getGlobalUnitConfig(id),
+    enabled: !!id,
+  });
+};
+
+export const useGetListOfGlobalUnitConfig = (id: string) => {
+  return useQuery<AxiosResponse>({
+    queryKey: ["listGlobalUnitConfig", id],
+    queryFn: () => getListOfGlobalUnitConfig(id),
+    enabled: !!id,
+  });
+};
+
+export const useCreateGlobalUnitConfig = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (data: any) => createGlobalUnitConfig(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["listGlobalUnitConfig"] });
+    },
+  });
+};
+
+export const useUpdateGlobalUnitConfig = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, data }: { id: string; data: any }) =>
+      updateGlobalUnitConfig(id, data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ["globalUnitConfig", variables.id],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["listGlobalUnitConfig"],
+      });
+    },
+  });
+};
+
+export const useDeleteGlobalUnitConfig = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => deleteGlobalUnitConfig(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["listGlobalUnitConfig"] });
+      queryClient.invalidateQueries({ queryKey: ["globalUnitConfig"] });
+    },
+  });
+};
+
+// 🔹 Organization Configuration Hooks (/organization-configurations)
+export const useGetOrganizationConfig = (organizationId: string) => {
+  return useQuery<AxiosResponse>({
+    queryKey: ["organizationConfig", organizationId],
+    queryFn: () => getOrganizationConfig(organizationId),
+    enabled: !!organizationId,
+  });
+};
+
+export const useCreateOrganizationConfig = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (data: OrganizationConfigPayload) =>
+      createOrganizationConfig(data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ["organizationConfig", variables.organizationId],
+      });
+    },
+  });
+};
+
+export const useUpdateOrganizationConfig = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      id,
+      data,
+    }: {
+      id: string;
+      data: OrganizationConfigPayload;
+    }) => updateOrganizationConfig(id, data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ["organizationConfig", variables.data.organizationId],
+      });
+    },
+  });
+};
+
+export const useDeleteOrganizationConfig = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => deleteOrganizationConfig(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["organizationConfig"] });
+    },
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/hooks/useDashboardData.ts b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useDashboardData.ts
new file mode 100644
index 000000000..73d716539
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useDashboardData.ts
@@ -0,0 +1,194 @@
+import { OrganizationDto } from "@/shared/dto/organization/organizationDto";
+import { getOrganizations } from "@/shared/services/organizationsService";
+import { useQuery } from "@tanstack/react-query";
+import Cookies from "js-cookie";
+import { toast } from "sonner";
+import { useOrganizations } from "./useOrganizations";
+
+// Types for dashboard data
+export interface DashboardStats {
+  totalOrganizations: number;
+  activeOrganizations: number;
+  inactiveOrganizations: number;
+  pendingRequests: number;
+  orgAdmins: number;
+  recentActivities: Activity[];
+  percentChanges: {
+    orgs: number;
+    active: number;
+    inactive: number;
+    pending: number;
+    admins: number;
+  };
+}
+
+export interface Activity {
+  id: string;
+  type: string;
+  description: string;
+  user: string;
+  timestamp: string;
+  entity: string;
+  entityId: string;
+}
+
+// Mock data
+const mockDashboardData: DashboardStats = {
+  totalOrganizations: 48,
+  activeOrganizations: 35,
+  inactiveOrganizations: 13,
+  pendingRequests: 7,
+  orgAdmins: 21,
+  recentActivities: [
+    {
+      id: "1",
+      type: "CREATE",
+      description: "Created new organization",
+      user: "John Doe",
+      timestamp: "2023-07-15T10:30:00Z",
+      entity: "Woreda 01",
+      entityId: "org-1",
+    },
+    {
+      id: "2",
+      type: "UPDATE",
+      description: "Updated organization status",
+      user: "Jane Smith",
+      timestamp: "2023-07-14T14:45:00Z",
+      entity: "Woreda 02",
+      entityId: "org-2",
+    },
+    {
+      id: "3",
+      type: "DELETE",
+      description: "Deleted organization",
+      user: "Admin User",
+      timestamp: "2023-07-13T09:15:00Z",
+      entity: "Test Org",
+      entityId: "org-3",
+    },
+    {
+      id: "4",
+      type: "CREATE",
+      description: "Added admin user",
+      user: "System",
+      timestamp: "2023-07-12T16:20:00Z",
+      entity: "Samuel Bekele",
+      entityId: "user-1",
+    },
+    {
+      id: "5",
+      type: "UPDATE",
+      description: "Changed organization settings",
+      user: "Jane Smith",
+      timestamp: "2023-07-11T11:05:00Z",
+      entity: "Yeka Subcity",
+      entityId: "org-4",
+    },
+  ],
+  percentChanges: {
+    orgs: 12.5,
+    active: 8.2,
+    inactive: -3.7,
+    pending: -15.4,
+    admins: 5.6,
+  },
+};
+
+const fetchDashboardStats = async (
+  totalOrganizations: number
+): Promise<DashboardStats> => {
+  // Use mock data for now, but replace totalOrganizations with the actual count
+  const dashboardData = { ...mockDashboardData };
+  dashboardData.totalOrganizations =
+    totalOrganizations || dashboardData.totalOrganizations;
+  return dashboardData;
+};
+
+const fetchRecentOrganizations = async (): Promise<OrganizationDto[]> => {
+  try {
+    const tenantKey = Cookies.get("tenant-key");
+    if (!tenantKey) {
+      console.error("No tenant key found");
+      return [];
+    }
+
+    const headers = {
+      tenantKey,
+      unitId: Cookies.get("unit-id") || undefined,
+    };
+
+    const { data } = await getOrganizations({
+      orderBy: "createdAt",
+      take: 5,
+    });
+
+    return data.items;
+  } catch (error) {
+    console.error("Error fetching recent organizations:", error);
+    return [];
+  }
+};
+
+export const useDashboardData = () => {
+  const { organizationsResponse } = useOrganizations("Org");
+
+  const {
+    data: stats,
+    isLoading: isStatsLoading,
+    isError: isStatsError,
+    refetch: refetchStats,
+  } = useQuery({
+    queryKey: ["dashboardStats"],
+    queryFn: async () => {
+      try {
+        const totalOrganizations = organizationsResponse?.count || 0;
+        return await fetchDashboardStats(totalOrganizations);
+      } catch (error) {
+        console.error("Failed to fetch dashboard statistics:", error);
+        toast.error("Failed to fetch dashboard statistics");
+        return mockDashboardData;
+      }
+    },
+    staleTime: 5 * 60 * 1000, // 5 minutes
+    retry: 1,
+  });
+
+  const {
+    data: recentOrgs,
+    isLoading: isOrgsLoading,
+    isError: isOrgsError,
+    refetch: refetchOrgs,
+  } = useQuery({
+    queryKey: ["recentOrganizations"],
+    queryFn: async () => {
+      try {
+        return await fetchRecentOrganizations();
+      } catch (error) {
+        console.error("Failed to fetch recent organizations:", error);
+        toast.error("Failed to fetch recent organizations");
+        return [];
+      }
+    },
+    staleTime: 2 * 60 * 1000, // 2 minutes
+    retry: 1,
+  });
+
+  const isLoading = isStatsLoading || isOrgsLoading;
+  const isError = isStatsError || isOrgsError;
+
+  const refetch = () => {
+    refetchStats();
+    refetchOrgs();
+  };
+
+  const orgCount = organizationsResponse?.count;
+
+  return {
+    stats: stats || orgCount,
+    recentOrgs: recentOrgs || [],
+    isLoading,
+    isError,
+    refetch,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/hooks/useDepartments.ts b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useDepartments.ts
new file mode 100644
index 000000000..e9f8da75f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useDepartments.ts
@@ -0,0 +1,253 @@
+import { useState, useEffect } from "react";
+import axios from "axios";
+import { Position } from "./usePositions";
+
+interface ApiResponse<T> {
+  success: boolean;
+  data: T;
+  message?: string;
+}
+
+export interface Department {
+  id: string;
+  name: string;
+  positions: Position[];
+  isExpanded?: boolean;
+  parentDepartmentId?: string;
+}
+
+export const useDepartments = (unitId: string) => {
+  const [departments, setDepartments] = useState<Department[]>([]);
+  const [selectedDepartmentId, setSelectedDepartmentId] = useState<string>("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  // Fetch departments for a unit
+  const fetchDepartments = async () => {
+    if (!unitId) {
+      setDepartments([]);
+      setSelectedDepartmentId("");
+      return;
+    }
+
+    setLoading(true);
+    try {
+      // In a real app, this would be an API call
+
+      setTimeout(() => {
+        // Mock departments for this unit
+        const mockDepartments: Department[] = [
+          {
+            id: "dept1",
+            name: "Directorate",
+            positions: [],
+            isExpanded: true,
+          },
+          {
+            id: "dept2",
+            name: "Development",
+            positions: [],
+            isExpanded: false,
+          },
+          {
+            id: "dept3",
+            name: "Operations",
+            positions: [],
+            isExpanded: false,
+          },
+        ];
+
+        setDepartments(mockDepartments);
+        if (mockDepartments.length > 0) {
+          setSelectedDepartmentId(mockDepartments[0].id);
+        } else {
+          setSelectedDepartmentId("");
+        }
+        setLoading(false);
+      }, 500);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Failed to fetch departments")
+      );
+      setLoading(false);
+    }
+  };
+
+  // Create a new department
+  const createDepartment = async (
+    departmentData: Partial<Department>
+  ): Promise<Department> => {
+    if (!unitId) {
+      throw new Error("No unit selected");
+    }
+
+    setLoading(true);
+    try {
+      // In a real app, this would be an API call
+      // const response = await axios.post<ApiResponse<Department>>(
+      //   `/api/units/${unitId}/departments`,
+      //   departmentData
+      // );
+      // const newDepartment = response.data.data;
+
+      // For now, simulate API response
+      const newDepartment: Department = {
+        id: `dept-${Date.now()}`,
+        name: departmentData.name || "New Department",
+        positions: [],
+        isExpanded: false,
+        parentDepartmentId: departmentData.parentDepartmentId,
+      };
+
+      setDepartments((prev) => [...prev, newDepartment]);
+      setLoading(false);
+      return newDepartment;
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Failed to create department")
+      );
+      setLoading(false);
+      throw err;
+    }
+  };
+
+  // Update an existing department
+  const updateDepartment = async (
+    departmentId: string,
+    updates: Partial<Department>
+  ): Promise<Department> => {
+    setLoading(true);
+    try {
+      // In a real app, this would be an API call
+      // const response = await axios.put<ApiResponse<Department>>(
+      //   `/api/departments/${departmentId}`,
+      //   updates
+      // );
+      // const updatedDepartment = response.data.data;
+
+      // For now, simulate API response
+      const updatedDepartments = departments.map((department) =>
+        department.id === departmentId
+          ? { ...department, ...updates }
+          : department
+      );
+
+      setDepartments(updatedDepartments);
+      setLoading(false);
+
+      const updatedDepartment = updatedDepartments.find(
+        (d) => d.id === departmentId
+      );
+      if (!updatedDepartment) {
+        throw new Error("Department not found after update");
+      }
+
+      return updatedDepartment;
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Failed to update department")
+      );
+      setLoading(false);
+      throw err;
+    }
+  };
+
+  // Delete a department
+  const deleteDepartment = async (departmentId: string): Promise<void> => {
+    setLoading(true);
+    try {
+      // In a real app, this would be an API call
+      // await axios.delete<ApiResponse<void>>(`/api/departments/${departmentId}`);
+
+      // For now, simulate API response
+      setDepartments((prev) =>
+        prev.filter((department) => department.id !== departmentId)
+      );
+
+      // If the deleted department was selected, select another department
+      if (selectedDepartmentId === departmentId) {
+        const remaining = departments.filter(
+          (department) => department.id !== departmentId
+        );
+        if (remaining.length > 0) {
+          setSelectedDepartmentId(remaining[0].id);
+        } else {
+          setSelectedDepartmentId("");
+        }
+      }
+
+      setLoading(false);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Failed to delete department")
+      );
+      setLoading(false);
+      throw err;
+    }
+  };
+
+  // Add a sub-department
+  const addSubDepartment = async (
+    parentDepartmentId: string,
+    name: string
+  ): Promise<Department> => {
+    const subdepartment: Partial<Department> = {
+      name,
+      parentDepartmentId,
+    };
+
+    return createDepartment(subdepartment);
+  };
+
+  // Toggle expand/collapse for a department
+  const toggleDepartmentExpand = (departmentId: string) => {
+    setDepartments((prev) =>
+      prev.map((department) =>
+        department.id === departmentId
+          ? { ...department, isExpanded: !department.isExpanded }
+          : department
+      )
+    );
+  };
+
+  // Get root-level departments (no parent)
+  const getRootDepartments = () => {
+    return departments.filter((department) => !department.parentDepartmentId);
+  };
+
+  // Get sub-departments of a department
+  const getSubDepartments = (parentDepartmentId: string) => {
+    return departments.filter(
+      (department) => department.parentDepartmentId === parentDepartmentId
+    );
+  };
+
+  // Select a department
+  const selectDepartment = (departmentId: string) => {
+    setSelectedDepartmentId(departmentId);
+  };
+
+  // Load departments when unitId changes
+  useEffect(() => {
+    fetchDepartments();
+  }, [unitId]);
+
+  return {
+    departments,
+    selectedDepartmentId,
+    selectedDepartment: departments.find(
+      (department) => department.id === selectedDepartmentId
+    ),
+    loading,
+    error,
+    fetchDepartments,
+    createDepartment,
+    updateDepartment,
+    deleteDepartment,
+    addSubDepartment,
+    toggleDepartmentExpand,
+    getRootDepartments,
+    getSubDepartments,
+    selectDepartment,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/hooks/useEmployees.ts b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useEmployees.ts
new file mode 100644
index 000000000..3764950f4
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useEmployees.ts
@@ -0,0 +1,341 @@
+import { useState, useEffect } from "react";
+import axios from "axios";
+
+export type InviteStatus = "Pending" | "Accepted" | "Not Invited";
+export type EmployeeRole =
+  | "TeamLeader"
+  | "TeamMember"
+  | "Director"
+  | "Manager"
+  | "Regular";
+
+interface ApiResponse<T> {
+  success: boolean;
+  data: T;
+  message?: string;
+}
+
+export interface Employee {
+  id: string;
+  name: string;
+  email?: string;
+  role?: EmployeeRole;
+  inviteStatus?: InviteStatus;
+  title?: string;
+  phone?: string;
+  dateAdded?: string;
+}
+
+export const useEmployees = (positionId: string, departmentId?: string) => {
+  const [employees, setEmployees] = useState<Employee[]>([]);
+  const [selectedEmployeeId, setSelectedEmployeeId] = useState<string>("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  // Fetch employees for a position or department
+  const fetchEmployees = async () => {
+    if (!positionId && !departmentId) {
+      setEmployees([]);
+      setSelectedEmployeeId("");
+      return;
+    }
+
+    setLoading(true);
+    try {
+      // In a real app, this would be an API call
+      // if (positionId) {
+      //   const response = await axios.get<ApiResponse<Employee[]>>(`/api/positions/${positionId}/employees`);
+      //   setEmployees(response.data.data);
+      // } else if (departmentId) {
+      //   const response = await axios.get<ApiResponse<Employee[]>>(`/api/departments/${departmentId}/employees`);
+      //   setEmployees(response.data.data);
+      // }
+
+      // For now, simulate API response with mock data
+      setTimeout(() => {
+        const mockEmployees: Employee[] = [
+          {
+            id: "emp1",
+            name: "Abebe Kebede",
+            email: "abebe@example.com",
+            role: "Director",
+            title: "Department Director",
+            phone: "+251911123456",
+            dateAdded: "2023-05-15",
+            inviteStatus: "Accepted",
+          },
+          {
+            id: "emp2",
+            name: "Kebede Abebe",
+            email: "kebede@example.com",
+            role: "TeamLeader",
+            title: "Team Lead - Development",
+            phone: "+251922123456",
+            dateAdded: "2023-06-20",
+            inviteStatus: "Pending",
+          },
+          {
+            id: "emp3",
+            name: "Chala Demeke",
+            email: "chala@example.com",
+            role: "TeamMember",
+            title: "Senior Developer",
+            phone: "+251933123456",
+            dateAdded: "2023-07-10",
+            inviteStatus: "Not Invited",
+          },
+          {
+            id: "emp4",
+            name: "Tigist Alemu",
+            email: "tigist@example.com",
+            role: "Manager",
+            title: "Project Manager",
+            phone: "+251944123456",
+            dateAdded: "2023-08-05",
+            inviteStatus: "Accepted",
+          },
+        ];
+
+        setEmployees(mockEmployees);
+        if (mockEmployees.length > 0) {
+          setSelectedEmployeeId(mockEmployees[0].id);
+        } else {
+          setSelectedEmployeeId("");
+        }
+        setLoading(false);
+      }, 500);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Failed to fetch employees")
+      );
+      setLoading(false);
+    }
+  };
+
+  // Create a new employee
+  const createEmployee = async (
+    employeeData: Partial<Employee>
+  ): Promise<Employee> => {
+    if (!positionId && !departmentId) {
+      throw new Error("No position or department selected");
+    }
+
+    setLoading(true);
+    try {
+      // In a real app, this would be an API call
+      // let response;
+      // if (positionId) {
+      //   response = await axios.post<ApiResponse<Employee>>(
+      //     `/api/positions/${positionId}/employees`,
+      //     employeeData
+      //   );
+      // } else if (departmentId) {
+      //   response = await axios.post<ApiResponse<Employee>>(
+      //     `/api/departments/${departmentId}/employees`,
+      //     employeeData
+      //   );
+      // } else {
+      //   throw new Error('No position or department ID provided');
+      // }
+      // const newEmployee = response.data.data;
+
+      // For now, simulate API response
+      const newEmployee: Employee = {
+        id: `emp-${Date.now()}`,
+        name: employeeData.name || "New Employee",
+        email: employeeData.email,
+        role: employeeData.role || "Regular",
+        title: employeeData.title,
+        phone: employeeData.phone,
+        dateAdded: new Date().toISOString().split("T")[0],
+        inviteStatus: employeeData.inviteStatus || "Not Invited",
+      };
+
+      setEmployees((prev) => [...prev, newEmployee]);
+      setLoading(false);
+      return newEmployee;
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Failed to create employee")
+      );
+      setLoading(false);
+      throw err;
+    }
+  };
+
+  // Update an existing employee
+  const updateEmployee = async (
+    employeeId: string,
+    updates: Partial<Employee>
+  ): Promise<Employee> => {
+    setLoading(true);
+    try {
+      // In a real app, this would be an API call
+      // const response = await axios.put<ApiResponse<Employee>>(
+      //   `/api/employees/${employeeId}`,
+      //   updates
+      // );
+      // const updatedEmployee = response.data.data;
+
+      // For now, simulate API response
+      const updatedEmployees = employees.map((employee) =>
+        employee.id === employeeId ? { ...employee, ...updates } : employee
+      );
+
+      setEmployees(updatedEmployees);
+      setLoading(false);
+
+      const updatedEmployee = updatedEmployees.find((e) => e.id === employeeId);
+      if (!updatedEmployee) {
+        throw new Error("Employee not found after update");
+      }
+
+      return updatedEmployee;
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Failed to update employee")
+      );
+      setLoading(false);
+      throw err;
+    }
+  };
+
+  // Delete an employee
+  const deleteEmployee = async (employeeId: string): Promise<void> => {
+    setLoading(true);
+    try {
+      // In a real app, this would be an API call
+      // await axios.delete<ApiResponse<void>>(`/api/employees/${employeeId}`);
+
+      // For now, simulate API response
+      setEmployees((prev) =>
+        prev.filter((employee) => employee.id !== employeeId)
+      );
+
+      // If the deleted employee was selected, select another employee
+      if (selectedEmployeeId === employeeId) {
+        const remaining = employees.filter(
+          (employee) => employee.id !== employeeId
+        );
+        if (remaining.length > 0) {
+          setSelectedEmployeeId(remaining[0].id);
+        } else {
+          setSelectedEmployeeId("");
+        }
+      }
+
+      setLoading(false);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Failed to delete employee")
+      );
+      setLoading(false);
+      throw err;
+    }
+  };
+
+  // Send invitation to an employee
+  const inviteEmployee = async (employeeId: string): Promise<string> => {
+    setLoading(true);
+    try {
+      // In a real app, this would be an API call
+      // const response = await axios.post<ApiResponse<{ inviteLink: string }>>(
+      //   `/api/employees/${employeeId}/invite`
+      // );
+      // return response.data.data.inviteLink;
+
+      // For now, simulate API response
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          const inviteLink = `https://example.com/invite/${employeeId}-${Date.now()}`;
+
+          // Update employee status in state
+          setEmployees((prev) =>
+            prev.map((employee) =>
+              employee.id === employeeId
+                ? { ...employee, inviteStatus: "Pending" as InviteStatus }
+                : employee
+            )
+          );
+
+          setLoading(false);
+          resolve(inviteLink);
+        }, 1000);
+      });
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Failed to send invitation")
+      );
+      setLoading(false);
+      throw err;
+    }
+  };
+
+  // Get invite status for an employee
+  const getInviteStatus = async (employeeId: string): Promise<InviteStatus> => {
+    setLoading(true);
+    try {
+      // In a real app, this would be an API call
+      // const response = await axios.get<ApiResponse<{ status: InviteStatus }>>(
+      //   `/api/employees/${employeeId}/invite-status`
+      // );
+      // return response.data.data.status;
+
+      // For now, simulate API response
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          const employee = employees.find((e) => e.id === employeeId);
+          setLoading(false);
+          resolve(employee?.inviteStatus || "Not Invited");
+        }, 500);
+      });
+    } catch (err) {
+      setError(
+        err instanceof Error
+          ? err
+          : new Error("Failed to get invitation status")
+      );
+      setLoading(false);
+      throw err;
+    }
+  };
+
+  // Select an employee
+  const selectEmployee = (employeeId: string) => {
+    setSelectedEmployeeId(employeeId);
+  };
+
+  // Filter employees by role
+  const getEmployeesByRole = (role: EmployeeRole) => {
+    return employees.filter((employee) => employee.role === role);
+  };
+
+  // Filter employees by invite status
+  const getEmployeesByInviteStatus = (status: InviteStatus) => {
+    return employees.filter((employee) => employee.inviteStatus === status);
+  };
+
+  // Load employees when positionId or departmentId changes
+  useEffect(() => {
+    fetchEmployees();
+  }, [positionId, departmentId]);
+
+  return {
+    employees,
+    selectedEmployeeId,
+    selectedEmployee: employees.find(
+      (employee) => employee.id === selectedEmployeeId
+    ),
+    loading,
+    error,
+    fetchEmployees,
+    createEmployee,
+    updateEmployee,
+    deleteEmployee,
+    inviteEmployee,
+    getInviteStatus,
+    selectEmployee,
+    getEmployeesByRole,
+    getEmployeesByInviteStatus,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/hooks/useExternalUsers.ts b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useExternalUsers.ts
new file mode 100644
index 000000000..8f120b037
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useExternalUsers.ts
@@ -0,0 +1,106 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+
+import {
+  activateUser,
+  approveUser,
+  deactivateUser,
+  deleteUser,
+  getAllExternalUsers,
+  getPendingUsers,
+} from "../services/api/userService";
+
+// 📦 Query Key
+const queryKeys = {
+  pendingUsers: ["external-users", "pending"],
+  allExternalUsers: ["external-users", "all"],
+};
+
+export enum userTypeEnum {
+  external = "external_organization",
+  individual = "individual",
+  externalUsers = "external_organization,individual",
+}
+
+export interface ExternalQueryParams {
+  orderBy?: string;
+  take?: number;
+  skip?: number;
+  order?: string;
+  userType?: userTypeEnum;
+  name?: string;
+  email?: string;
+  username?: string;
+  phoneNumber?: string;
+}
+
+// ✅ Hook: Get pending external users
+export const usePendingExternalUsers = (params?: ExternalQueryParams) => {
+  return useQuery({
+    queryKey: queryKeys.pendingUsers,
+    queryFn: async () => {
+      const users = await getPendingUsers(params);
+      return users.data;
+    },
+  });
+};
+
+// ✅ Hook: Get all external users
+export const useAllExternalUsers = (params?: ExternalQueryParams) => {
+  return useQuery({
+    queryKey: [...queryKeys.allExternalUsers, params],
+    queryFn: async () => {
+      const users = await getAllExternalUsers(params);
+      return users.data;
+    },
+  });
+};
+
+// ✅ Mutation: Activate user
+export const useActivateExternalUser = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => activateUser(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.pendingUsers });
+      queryClient.invalidateQueries({ queryKey: queryKeys.allExternalUsers });
+    },
+  });
+};
+
+// Mutatae Approve user
+export const useApproveExternalUser = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, status }: { id: string; status: string }) =>
+      approveUser(id, status),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.pendingUsers });
+      queryClient.invalidateQueries({ queryKey: queryKeys.allExternalUsers });
+    },
+  });
+};
+
+
+// ✅ Mutation: Deactivate user
+export const useDeactivateExternalUser = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => deactivateUser(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.pendingUsers });
+      queryClient.invalidateQueries({ queryKey: queryKeys.allExternalUsers });
+    },
+  });
+};
+
+// ✅ Mutation: Delete user
+export const useDeleteExternalUser = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => deleteUser(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.pendingUsers });
+      queryClient.invalidateQueries({ queryKey: queryKeys.allExternalUsers });
+    },
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/hooks/useMigratedData.ts b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useMigratedData.ts
new file mode 100644
index 000000000..9021ed387
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useMigratedData.ts
@@ -0,0 +1,14 @@
+import { useQuery } from "@tanstack/react-query";
+import { MainDtoResponse } from "../dto/SuperAdminDto";
+import { getAllRecords } from "../services/api/userService";
+import { ExternalQueryParams } from "./useExternalUsers";
+
+export const useMigratedData = (unitId: string,params?:ExternalQueryParams) => {
+  return useQuery({
+    queryKey: ["migratedData",unitId,params],
+    queryFn: async () => {
+      const { data } = await getAllRecords(unitId,params);
+      return data as MainDtoResponse;
+    },
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/hooks/useOrganizationAdmins.ts b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useOrganizationAdmins.ts
new file mode 100644
index 000000000..31ac1032c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useOrganizationAdmins.ts
@@ -0,0 +1,186 @@
+import { resendVerificationCode } from "@/shared/services/authService";
+import {
+  assignOrganizationAdmin,
+  assignUnitAdmin,
+  fetchAllUnitAdminById,
+  fetchUnitAdminById,
+  getOrganizationAdminById,
+  getOrganizationAdmins,
+  OrgAdminQueryParams,
+  OrganizationAdminPayload,
+  UnitAdminPayload,
+  updateOrganizationAdmin,
+} from "@/super-admin/services/api/organizationAdminService";
+
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+// Resend verification code API call
+const resendVerificationCodeToAdmin = async ({
+  organizationId,
+  email,
+  phoneNumber,
+}: {
+  organizationId: string;
+  email: string;
+  phoneNumber: string;
+}) => {
+  const response = await fetch("/api/resend-verification-code", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ organizationId, email, phoneNumber }),
+  });
+
+  if (!response.ok) {
+    throw new Error("Failed to resend verification code");
+  }
+
+  return response.json();
+};
+
+export const useOrganizationAdmins = (params?: OrgAdminQueryParams) => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  // Get all admins
+  const {
+    data: adminsResponse,
+    isLoading,
+    isError,
+    refetch,
+  } = useQuery({
+    queryKey: ["organizationAdmins", params],
+    queryFn: async () => {
+      const { data } = await getOrganizationAdmins(params);
+      return {
+        count: data,
+        items: data,
+      };
+    },
+    staleTime: 5 * 60 * 1000,
+    retry: false,
+    enabled: false,
+  });
+
+  // Create admin
+  const { mutate: createAdminMutation, isPending: isCreating } = useMutation({
+    mutationFn: async ({
+      payload,
+      successCallback,
+    }: {
+      payload: OrganizationAdminPayload;
+      successCallback: () => void;
+    }) => assignOrganizationAdmin(payload),
+    onSuccess: (_data, variables) => {
+      toast.success("Admin assigned successfully");
+      queryClient.invalidateQueries({ queryKey: ["organizationAdmins"] });
+      variables.successCallback();
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+  const { mutate: createUnitAdminMutation, isPending: isUnitCreating } = useMutation({
+    mutationFn: async ({
+      payload,
+      successCallback,
+    }: {
+      payload: UnitAdminPayload;
+      successCallback: () => void;
+    }) => assignUnitAdmin(payload),
+    onSuccess: (_data, variables) => {
+      toast.success("Admin assigned successfully");
+      queryClient.invalidateQueries({ queryKey: ["organizationAdmins"] });
+      variables.successCallback();
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  // Update admin
+  const { mutate: updateAdminMutation, isPending: isUpdating } = useMutation({
+    mutationFn: ({
+      id,
+      data,
+    }: {
+      id: string;
+      data: OrganizationAdminPayload;
+    }) => updateOrganizationAdmin(id, data),
+    onSuccess: () => {
+      toast.success("Admin updated successfully");
+      queryClient.invalidateQueries({ queryKey: ["organizationAdmins"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  // Get admin by ID
+  const getAdminById = async (id: string) => {
+    try {
+      return await getOrganizationAdminById(id);
+    } catch (error) {
+      toast.error("Failed to fetch admin details");
+      return undefined;
+    }
+  };
+   const getUnitAdminById = async (id: string) => {
+     try {
+       return await fetchUnitAdminById(id);
+     } catch (error) {
+       toast.error("Failed to fetch unit admin details");
+       return undefined;
+     }
+   };
+
+   const getAllAdminById = async (id: string, params?: OrgAdminQueryParams) => {
+     try {
+       return await fetchAllUnitAdminById(id, params);
+     } catch (error) {
+       toast.error("Failed to fetch all admin details");
+       return undefined;
+     }
+   };
+
+  // Resend invitation (verification code)
+  const resendInvitation = async ({
+    email,
+    phoneNumber,
+  }: {
+    email: string;
+    phoneNumber: string;
+  }) => {
+    try {
+      await resendVerificationCode({
+        email,
+        phoneNumber,
+      });
+    } catch (error) {
+      console.error("Failed to resend verification code:", error);
+      throw error;
+    }
+  };
+
+  return {
+    adminsResponse,
+    createAdmin: createAdminMutation,
+    createUnitAdmin:createUnitAdminMutation,
+    updateAdmin: updateAdminMutation,
+    getAdminById,
+    getUnitAdminById,
+    resendInvitation, 
+    getAllAdminById,// 👈 important to expose this
+    isCreating,
+    isUpdating,
+    isLoading,
+    isError,
+    refetch,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/hooks/useOrganizationTypes.ts b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useOrganizationTypes.ts
new file mode 100644
index 000000000..7dedb4cd4
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useOrganizationTypes.ts
@@ -0,0 +1,83 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  getOrganizationTypes,
+  OrgTypeResponse,
+  OrgType,
+} from "@/super-admin/services/api/organizationTypesService";
+import Cookies from "js-cookie";
+
+// Mock data to use when the API fails
+const MOCK_ORGANIZATION_TYPES: OrgType[] = [
+  {
+    id: "1",
+    name: {
+      en: "Government",
+      am: "መንግስታዊ",
+    },
+    key: "government",
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+  },
+  {
+    id: "2",
+    name: {
+      en: "Private",
+      am: "የግል",
+    },
+    key: "private",
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+  },
+  {
+    id: "3",
+    name: {
+      en: "Non-Governmental",
+      am: "መንግስታዊ ያልሆነ",
+    },
+    key: "ngo",
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+  },
+];
+
+export const useOrganizationTypes = () => {
+  const {
+    data: organizationTypesResponse,
+    isLoading,
+    isError,
+    refetch,
+  } = useQuery<OrgTypeResponse>({
+    queryKey: ["organizationTypes"],
+    queryFn: async () => {
+      try {
+        // Use a default tenant key if none is found
+        const tenantKey = Cookies.get("tenant-key") || "default-tenant-key";
+        const unitId = Cookies.get("unit-id");
+
+        const response = await getOrganizationTypes();
+        return response.data;
+      } catch (error) {
+        console.error("Error fetching organization types:", error);
+        // Return mock data so the UI doesn't break
+        return {
+          count: MOCK_ORGANIZATION_TYPES.length,
+          items: MOCK_ORGANIZATION_TYPES,
+        };
+      }
+    },
+    staleTime: 5 * 60 * 1000,
+    // Always enable the query, regardless of tenant key
+    enabled: true,
+  });
+
+  return {
+    // Ensure we always return at least the mock data if nothing is returned
+    organizationTypesResponse: organizationTypesResponse || {
+      count: MOCK_ORGANIZATION_TYPES.length,
+      items: MOCK_ORGANIZATION_TYPES,
+    },
+    isLoading,
+    isError,
+    refetch,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/hooks/useOrganizations.ts b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useOrganizations.ts
new file mode 100644
index 000000000..fd9fff233
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useOrganizations.ts
@@ -0,0 +1,251 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  createOrganization,
+  OrgQueryParams,
+  OrganizationPayload,
+  getOrganizationById,
+  updateOrganization,
+  activateOrganization,
+  deActivateOrganization,
+  getOrganizationsWithAdminFlag,
+  softDeleteOrganization,
+} from "@/shared/services/organizationsService";
+import {
+  OrganizationAdminsDto,
+  OrganizationDetailDTO,
+  OrganizationDto,
+} from "@/shared/dto/organization/organizationDto";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+interface ApiResponse<T> {
+  success: boolean;
+  data: T;
+  message?: string;
+}
+
+interface Unit {
+  id: string;
+  name: string;
+  departments: any[];
+  isExpanded?: boolean;
+}
+
+export interface Organization {
+  id: string;
+  name: string;
+  units: Unit[];
+  isExpanded?: boolean;
+}
+
+export const useOrganizations = (
+  type: "Admin" | "Org",
+  params?: OrgQueryParams,
+) => {
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  const {
+    data: organizationsResponse,
+    isLoading,
+    isError,
+    refetch,
+  } = useQuery({
+    queryKey: ["organizations", params],
+    queryFn: async () => {
+      const { data } = await getOrganizationsWithAdminFlag(params);
+
+      return {
+        count: data.count as number,
+        items: data.items as OrganizationDto[],
+      };
+    },
+    staleTime: 5 * 60 * 1000,
+    retry: false,
+    enabled: !!(type === "Org"),
+  });
+
+  const {
+    data: organizationsAdminsResponse,
+    isLoading: isLoadingAdmins,
+    isError: isErrorAdmins,
+    refetch: refetchAdmins,
+  } = useQuery({
+    queryKey: ["organizationAdmins", params?.skip, params?.take, params?.name, params?.orderBy],
+    queryFn: async () => {
+      const { data } = await getOrganizationsWithAdminFlag(params);
+      return {
+        count: data.count as number,
+        items: data.items as OrganizationAdminsDto[],
+      };
+    },
+    staleTime: 5 * 60 * 1000,
+    retry: false,
+    enabled: !!(type === "Admin"),
+  });
+
+  const {
+    mutate: createMutation,
+    isPending: isOrganizationCreating,
+    isError: organizationCreationError,
+    status: organizationCreationStatus,
+  } = useMutation({
+    mutationFn: async (payload: OrganizationPayload) => {
+      const { data } = await createOrganization(payload);
+      return data;
+    },
+    onSuccess: () => {
+      toast.success("Organization created successfully!", {
+        description: "Redirecting...",
+      });
+
+      navigate("/user-management/organizations");
+      queryClient.invalidateQueries({ queryKey: ["organizations"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+  const {
+    mutate: editMutation,
+    isPending: isOrganizationEditing,
+    isError: organizationEditError,
+    status: organizationEditStatus,
+  } = useMutation({
+    mutationFn: async ({
+      id,
+      payload,
+    }: {
+      id: string;
+      payload: OrganizationPayload;
+    }) => {
+      const { data } = await updateOrganization(id, payload);
+      return data;
+    },
+    onSuccess: () => {
+      toast.success("Organization created successfully!", {
+        description: "Redirecting...",
+      });
+
+      navigate("/user-management/organizations");
+      queryClient.invalidateQueries({ queryKey: ["organizations"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+  const { mutate: activateMutation, isPending: isOrganizationActivating } =
+    useMutation({
+      mutationFn: async ({ id }: { id: string }) => {
+        const { data } = await activateOrganization(id);
+        return data;
+      },
+      onSuccess: () => {
+        toast.success("Organization Activated successfully!", {
+          description: "Redirecting...",
+        });
+
+        navigate("/user-management/organizations");
+        queryClient.invalidateQueries({ queryKey: ["organizations"] });
+      },
+      onError: (error) => {
+        handleError(error);
+      },
+    });
+  const { mutate: deActivateMutation, isPending: isOrganizationDeactivating } =
+    useMutation({
+      mutationFn: async ({ id }: { id: string }) => {
+        const { data } = await deActivateOrganization(id);
+        return data;
+      },
+      onSuccess: () => {
+        toast.success("Organization De-Activated successfully!", {
+          description: "Redirecting...",
+        });
+
+        navigate("/user-management/organizations");
+        queryClient.invalidateQueries({ queryKey: ["organizations"] });
+      },
+      onError: (error) => {
+        handleError(error);
+      },
+    });
+  const { mutate: deleteMutation, isPending: isOrganizationDeleting } =
+    useMutation({
+      mutationFn: async ({ id }: { id: string }) => {
+        const { data } = await softDeleteOrganization(id);
+        return data;
+      },
+      onSuccess: () => {
+        toast.success("Organization Deleted successfully!", {
+          description: "Redirecting...",
+        });
+
+        navigate("/user-management/organizations");
+        queryClient.invalidateQueries({ queryKey: ["organizations"] });
+      },
+      onError: (error) => {
+        handleError(error);
+      },
+    });
+
+  const { mutate: getOrganization, isPending: isFetchingOrganization } =
+    useMutation({
+      mutationFn: async (id: string) => {
+        const { data } = await getOrganizationById(id);
+        return data;
+      },
+      onSuccess: (data) => {
+        return data;
+      },
+    });
+
+  return {
+    organizationsResponse,
+    isLoading,
+    isError,
+    refetch,
+    createOrganization: createMutation,
+    editOrganization: editMutation,
+    isCreating: isOrganizationCreating,
+    isEditing: isOrganizationEditing,
+    editStatus: organizationEditStatus,
+    organizationCreationError,
+    organizationEditError,
+    getOrganizationByDetails: getOrganization,
+    isFetchingOrganization,
+    activateOrganization: activateMutation,
+    isOrganizationActivating,
+    deactivateOrganization: deActivateMutation,
+    isOrganizationDeactivating,
+    deleteOrganization: deleteMutation,
+    isOrganizationDeleting,
+    organizationsAdminsResponse,
+    isLoadingAdmins,
+    isErrorAdmins,
+    refetchAdmins,
+  };
+};
+
+export function useOrganizationDetail(type: string, id: string) {
+  const query = useQuery<{ items: OrganizationDetailDTO }, Error>({
+    queryKey: ["organization-detail", id],
+    queryFn: async () => {
+      const { data } = await getOrganizationById(id);
+      return { items: data };
+    },
+    staleTime: 5 * 60 * 1000,
+    retry: false,
+    enabled: type === "Org" && !!id,
+  });
+
+  return {
+    organizationsDetailResponse: query.data,
+    isDetailLoading: query.isLoading,
+    isDetailError: query.isError,
+  };
+}
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/hooks/usePasswordSettings.ts b/apps/edr-freight-web/backoffice/src/super-admin/hooks/usePasswordSettings.ts
new file mode 100644
index 000000000..6f24fe6cf
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/hooks/usePasswordSettings.ts
@@ -0,0 +1,68 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import {
+  createPasswordSettings,
+  getPasswordSettings,
+  updatePasswordSettings,
+  deletePasswordSettings,
+  PasswordSettings,
+} from "../services/api/passwordSettingsService";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+export const usePasswordSettingsQuery = () =>
+  useQuery({
+    queryKey: ["passwordSettings"],
+    queryFn: () => getPasswordSettings(),
+    staleTime: 30_000,
+    refetchOnWindowFocus: false,
+    retry: 1,
+  });
+
+export const usePasswordSettingsMutations = () => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  const update = useMutation({
+    mutationFn: (payload: PasswordSettings) => updatePasswordSettings(payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["passwordSettings"] });
+      toast.success(
+        t("passwordSettings.updated", "Password settings updated successfully")
+      );
+    },
+    onError: (error: any) => {
+      handleError(error);
+    },
+  });
+
+  const create = useMutation({
+    mutationFn: (payload: PasswordSettings) => createPasswordSettings(payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["passwordSettings"] });
+      toast.success(
+        t("passwordSettings.created", "Password settings created successfully")
+      );
+    },
+    onError: (error: any) => {
+      handleError(error);
+    },
+  });
+
+  const delete_mutation = useMutation({
+    mutationFn: (id: string) => deletePasswordSettings(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["passwordSettings"] });
+      toast.success(
+        t("passwordSettings.deleted", "Password settings deleted successfully")
+      );
+    },
+    onError: (error: any) => {
+      console.error("Delete mutation error:", error);
+      handleError(error);
+    },
+  });
+
+  return { update, create, delete: delete_mutation };
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/hooks/usePositions.ts b/apps/edr-freight-web/backoffice/src/super-admin/hooks/usePositions.ts
new file mode 100644
index 000000000..559ef4c0b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/hooks/usePositions.ts
@@ -0,0 +1,284 @@
+import { useState, useEffect } from "react";
+import axios from "axios";
+
+interface ApiResponse<T> {
+  success: boolean;
+  data: T;
+  message?: string;
+}
+
+export type PositionType = "TeamLeader" | "TeamMember" | "Director" | "Other";
+
+export interface Position {
+  id: string;
+  title: string;
+  type?: PositionType;
+  employeeCount: number;
+  employees: any[];
+  isExpanded?: boolean;
+}
+
+export const usePositions = (departmentId: string, unitId: string) => {
+  const [positions, setPositions] = useState<Position[]>([]);
+  const [selectedPositionId, setSelectedPositionId] = useState<string>("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  // Fetch positions for a department
+  const fetchPositions = async () => {
+    if (!departmentId) {
+      setPositions([]);
+      setSelectedPositionId("");
+      return;
+    }
+
+    setLoading(true);
+    try {
+      // In a real app, this would be an API call
+      // const response = await axios.get<ApiResponse<Position[]>>(`/api/departments/${departmentId}/positions`);
+      // const fetchedPositions = response.data.data;
+
+      // For now, simulate API response with mock data
+      setTimeout(() => {
+        // Mock positions for this department
+        const mockPositions: Position[] = [
+          {
+            id: "pos1",
+            title: "Team Leader",
+            type: "TeamLeader",
+            employeeCount: 1,
+            employees: [
+              {
+                id: "emp1",
+                name: "Abebe Kebede",
+                email: "abebe@example.com",
+                role: "Manager",
+                inviteStatus: "Accepted",
+              },
+            ],
+            isExpanded: true,
+          },
+          {
+            id: "pos2",
+            title: "Team Member",
+            type: "TeamMember",
+            employeeCount: 3,
+            employees: [
+              {
+                id: "emp2",
+                name: "Kebede Abebe",
+                email: "kebede@example.com",
+                inviteStatus: "Pending",
+              },
+              {
+                id: "emp3",
+                name: "Chala Demeke",
+                email: "chala@example.com",
+                inviteStatus: "Not Invited",
+              },
+            ],
+          },
+          {
+            id: "pos3",
+            title: "Director",
+            type: "Director",
+            employeeCount: 1,
+            employees: [
+              {
+                id: "emp4",
+                name: "Tigist Alemu",
+                email: "tigist@example.com",
+                role: "Director",
+                inviteStatus: "Accepted",
+              },
+            ],
+          },
+        ];
+
+        setPositions(mockPositions);
+        if (mockPositions.length > 0) {
+          setSelectedPositionId(mockPositions[0].id);
+        } else {
+          setSelectedPositionId("");
+        }
+        setLoading(false);
+      }, 500);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Failed to fetch positions")
+      );
+      setLoading(false);
+    }
+  };
+
+  // Create a new position
+  const createPosition = async (
+    positionData: Partial<Position>
+  ): Promise<Position> => {
+    if (!departmentId) {
+      throw new Error("No department selected");
+    }
+
+    setLoading(true);
+    try {
+      // In a real app, this would be an API call
+      // const response = await axios.post<ApiResponse<Position>>(
+      //   `/api/departments/${departmentId}/positions`,
+      //   positionData
+      // );
+      // const newPosition = response.data.data;
+
+      // For now, simulate API response
+      const newPosition: Position = {
+        id: `pos-${Date.now()}`,
+        title: positionData.title || "New Position",
+        type: positionData.type || "Other",
+        employeeCount: 0,
+        employees: [],
+        isExpanded: false,
+      };
+
+      setPositions((prev) => [...prev, newPosition]);
+      setLoading(false);
+      return newPosition;
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Failed to create position")
+      );
+      setLoading(false);
+      throw err;
+    }
+  };
+
+  // Update an existing position
+  const updatePosition = async (
+    positionId: string,
+    updates: Partial<Position>
+  ): Promise<Position> => {
+    setLoading(true);
+    try {
+      // In a real app, this would be an API call
+      // const response = await axios.put<ApiResponse<Position>>(
+      //   `/api/positions/${positionId}`,
+      //   updates
+      // );
+      // const updatedPosition = response.data.data;
+
+      // For now, simulate API response
+      const updatedPositions = positions.map((position) =>
+        position.id === positionId ? { ...position, ...updates } : position
+      );
+
+      setPositions(updatedPositions);
+      setLoading(false);
+
+      const updatedPosition = updatedPositions.find((p) => p.id === positionId);
+      if (!updatedPosition) {
+        throw new Error("Position not found after update");
+      }
+
+      return updatedPosition;
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Only a super admin can update this position type")
+      );
+      setLoading(false);
+      throw err;
+    }
+  };
+
+  // Delete a position
+  const deletePosition = async (positionId: string): Promise<void> => {
+    setLoading(true);
+    try {
+      // In a real app, this would be an API call
+      // await axios.delete<ApiResponse<void>>(`/api/positions/${positionId}`);
+
+      // For now, simulate API response
+      setPositions((prev) =>
+        prev.filter((position) => position.id !== positionId)
+      );
+
+      // If the deleted position was selected, select another position
+      if (selectedPositionId === positionId) {
+        const remaining = positions.filter(
+          (position) => position.id !== positionId
+        );
+        if (remaining.length > 0) {
+          setSelectedPositionId(remaining[0].id);
+        } else {
+          setSelectedPositionId("");
+        }
+      }
+
+      setLoading(false);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Failed to delete position")
+      );
+      setLoading(false);
+      throw err;
+    }
+  };
+
+  // Toggle expand/collapse for a position
+  const togglePositionExpand = (positionId: string) => {
+    setPositions((prev) =>
+      prev.map((position) =>
+        position.id === positionId
+          ? { ...position, isExpanded: !position.isExpanded }
+          : position
+      )
+    );
+  };
+
+  // Select a position
+  const selectPosition = (positionId: string) => {
+    setSelectedPositionId(positionId);
+  };
+
+  // Filter positions by type
+  const getPositionsByType = (type: PositionType) => {
+    return positions.filter((position) => position.type === type);
+  };
+
+  // Get team leaders
+  const getTeamLeaders = () => {
+    return positions.filter((position) => position.type === "TeamLeader");
+  };
+
+  // Get team members
+  const getTeamMembers = () => {
+    return positions.filter((position) => position.type === "TeamMember");
+  };
+
+  // Get directors
+  const getDirectors = () => {
+    return positions.filter((position) => position.type === "Director");
+  };
+
+  // Load positions when departmentId changes
+  useEffect(() => {
+    fetchPositions();
+  }, [departmentId, unitId]);
+
+  return {
+    positions,
+    selectedPositionId,
+    selectedPosition: positions.find(
+      (position) => position.id === selectedPositionId
+    ),
+    loading,
+    error,
+    fetchPositions,
+    createPosition,
+    updatePosition,
+    deletePosition,
+    togglePositionExpand,
+    selectPosition,
+    getPositionsByType,
+    getTeamLeaders,
+    getTeamMembers,
+    getDirectors,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/hooks/useRemark.ts b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useRemark.ts
new file mode 100644
index 000000000..74751c067
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useRemark.ts
@@ -0,0 +1,19 @@
+import { prefixSuffixService } from "@/user-management/services/api/prefixSuffixService";
+import { useQuery } from "@tanstack/react-query";
+
+export interface RemarkParams{
+skip:number,
+take:number,
+orderBy?:string;
+}
+
+
+export const useRemarkByUnitId = (unitId: string, params:RemarkParams) => {
+  return useQuery({
+    queryKey: ["remark", unitId,params],
+    queryFn: async () => {
+      const response = await prefixSuffixService.getRemarkList(unitId,params);
+      return response.data ;
+    },
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/hooks/useSites.ts b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useSites.ts
new file mode 100644
index 000000000..559a40c48
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useSites.ts
@@ -0,0 +1,185 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  getSites,
+  getSiteById,
+  createSite,
+  updateSite,
+  softDeleteSite,
+  deleteSite,
+  restoreSite,
+} from "@/super-admin/services/api/sitesService";
+import { SiteDto, SitePayloadDto, SiteQueryParams } from "@/super-admin/dto/SitesDto";
+import { toast } from "sonner";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { useTranslation } from "react-i18next";
+
+// Helper function to transform English name into snake_case format
+export function toSnakeCase(str: string): string {
+  if (!str) return "";
+  return str
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9\s-_]/g, "") // remove special characters
+    .replace(/[\s-]+/g, "_");      // replace spaces or hyphens with underscores
+}
+
+export const useSites = (params?: SiteQueryParams) => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  // 🔵 Query: Fetch sites list
+  const {
+    data: sitesResponse,
+    isLoading,
+    isError,
+    refetch,
+  } = useQuery({
+    queryKey: ["sites", params],
+    queryFn: async () => {
+      const { data } = await getSites(params);
+      
+      // Defensively support both [{...}] and { items: [...], count: X } formats
+      const items = Array.isArray(data) ? data : (data?.items || []);
+      const count = Array.isArray(data) ? data.length : (data?.count || items.length || 0);
+      
+      return {
+        items: items as SiteDto[],
+        count: count as number,
+      };
+    },
+    staleTime: 5 * 60 * 1000,
+    retry: false,
+  });
+
+  // 🟢 Mutation: Create Site
+  const { mutate: createMutation, isPending: isCreating } = useMutation({
+    mutationFn: async (payload: SitePayloadDto) => {
+      const transformedPayload: SitePayloadDto = {
+        ...payload,
+        name: {
+          ...payload.name,
+          en: toSnakeCase(payload.name.en),
+        },
+      };
+      const { data } = await createSite(transformedPayload);
+      return data;
+    },
+    onSuccess: () => {
+      toast.success("Site created successfully!");
+      queryClient.invalidateQueries({ queryKey: ["sites"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  // 🟠 Mutation: Update Site
+  const { mutate: updateMutation, isPending: isUpdating } = useMutation({
+    mutationFn: async ({ id, payload }: { id: string; payload: SitePayloadDto }) => {
+      const transformedPayload: SitePayloadDto = {
+        ...payload,
+        name: {
+          ...payload.name,
+          en: toSnakeCase(payload.name.en),
+        },
+      };
+      const { data } = await updateSite(id, transformedPayload);
+      return data;
+    },
+    onSuccess: () => {
+      toast.success("Site updated successfully!");
+      queryClient.invalidateQueries({ queryKey: ["sites"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  // 🟡 Mutation: Archive Site (Soft Delete)
+  const { mutate: archiveMutation, isPending: isArchiving } = useMutation({
+    mutationFn: async ({ id }: { id: string }) => {
+      const { data } = await softDeleteSite(id);
+      return data;
+    },
+    onSuccess: () => {
+      toast.success("Site archived successfully!");
+      queryClient.invalidateQueries({ queryKey: ["sites"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  // 🔴 Mutation: Permanent Delete Site
+  const { mutate: deleteMutation, isPending: isDeleting } = useMutation({
+    mutationFn: async ({ id }: { id: string }) => {
+      const { data } = await deleteSite(id);
+      return data;
+    },
+    onSuccess: () => {
+      toast.success("Site permanently deleted!");
+      queryClient.invalidateQueries({ queryKey: ["sites"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  // 🟣 Mutation: Restore Archived Site
+  const { mutate: restoreMutation, isPending: isRestoring } = useMutation({
+    mutationFn: async ({ id }: { id: string }) => {
+      const { data } = await restoreSite(id);
+      return data;
+    },
+    onSuccess: () => {
+      toast.success("Site restored successfully!");
+      queryClient.invalidateQueries({ queryKey: ["sites"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  return {
+    sitesResponse,
+    isLoading,
+    isError,
+    refetch,
+    createSite: createMutation,
+    isCreating,
+    updateSite: updateMutation,
+    isUpdating,
+    archiveSite: archiveMutation,
+    isArchiving,
+    deleteSite: deleteMutation,
+    isDeleting,
+    restoreSite: restoreMutation,
+    isRestoring,
+  };
+};
+
+export const useSiteDetail = (id: string, enabled: boolean = true) => {
+  const {
+    data: site,
+    isLoading,
+    isError,
+    refetch,
+  } = useQuery({
+    queryKey: ["site", id],
+    queryFn: async () => {
+      const { data } = await getSiteById(id);
+      return data;
+    },
+    enabled: enabled && !!id,
+    staleTime: 5 * 60 * 1000,
+    retry: false,
+  });
+
+  return {
+    site,
+    isLoading,
+    isError,
+    refetch,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/hooks/useUnitInformation.ts b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useUnitInformation.ts
new file mode 100644
index 000000000..34c9b229b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useUnitInformation.ts
@@ -0,0 +1,23 @@
+import { useQuery } from "@tanstack/react-query";
+import { getUnitInfo, getUnitInfoByUnitID } from "../services/api/userService";
+
+export const useUnitInfo = () => {
+  return useQuery({
+    queryKey: ["unitInfo"],
+    queryFn: async () => {
+      const { data } = await getUnitInfo();
+      return data ;
+    },
+  });
+};
+
+
+export const useUnitInfoByUnitID = (unitID:string) => {
+  return useQuery({
+    queryKey: ["unitInfobyID"],
+    queryFn: async () => {
+      const { data } = await getUnitInfoByUnitID(unitID);
+      return data;
+    },
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/hooks/useUnits.ts b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useUnits.ts
new file mode 100644
index 000000000..d6c075e7c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useUnits.ts
@@ -0,0 +1,230 @@
+import { useState, useEffect } from "react";
+import axios from "axios";
+
+interface ApiResponse<T> {
+  success: boolean;
+  data: T;
+  message?: string;
+}
+
+export interface Department {
+  id: string;
+  name: string;
+  positions: any[];
+  isExpanded?: boolean;
+}
+
+export interface Unit {
+  id: string;
+  name: string;
+  departments: Department[];
+  isExpanded?: boolean;
+}
+
+export const useUnits = (organizationId: string) => {
+  const [units, setUnits] = useState<Unit[]>([]);
+  const [selectedUnitId, setSelectedUnitId] = useState<string>("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  // Fetch units for an organization
+  const fetchUnits = async () => {
+    if (!organizationId) {
+      setUnits([]);
+      setSelectedUnitId("");
+      return;
+    }
+
+    setLoading(true);
+  };
+
+  // Create a new unit
+  const createUnit = async (unitData: Partial<Unit>): Promise<Unit> => {
+    if (!organizationId) {
+      throw new Error("No organization selected");
+    }
+
+    setLoading(true);
+    try {
+      // In a real app, this would be an API call
+      // const response = await axios.post<ApiResponse<Unit>>(
+      //   `/api/organizations/${organizationId}/units`,
+      //   unitData
+      // );
+      // const newUnit = response.data.data;
+
+      // For now, simulate API response
+      const newUnit: Unit = {
+        id: `unit-${Date.now()}`,
+        name: unitData.name || "New Unit",
+        departments: [],
+        isExpanded: false,
+      };
+
+      setUnits((prev) => [...prev, newUnit]);
+      setLoading(false);
+      return newUnit;
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to create unit"));
+      setLoading(false);
+      throw err;
+    }
+  };
+
+  // Update an existing unit
+  const updateUnit = async (
+    unitId: string,
+    updates: Partial<Unit>
+  ): Promise<Unit> => {
+    setLoading(true);
+    try {
+      // In a real app, this would be an API call
+      // const response = await axios.put<ApiResponse<Unit>>(
+      //   `/api/units/${unitId}`,
+      //   updates
+      // );
+      // const updatedUnit = response.data.data;
+
+      // For now, simulate API response
+      const updatedUnits = units.map((unit) =>
+        unit.id === unitId ? { ...unit, ...updates } : unit
+      );
+
+      setUnits(updatedUnits);
+      setLoading(false);
+
+      const updatedUnit = updatedUnits.find((u) => u.id === unitId);
+      if (!updatedUnit) {
+        throw new Error("Unit not found after update");
+      }
+
+      return updatedUnit;
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to update unit"));
+      setLoading(false);
+      throw err;
+    }
+  };
+
+  // Delete a unit
+  const deleteUnit = async (unitId: string): Promise<void> => {
+    setLoading(true);
+    try {
+      // In a real app, this would be an API call
+      // await axios.delete<ApiResponse<void>>(`/api/units/${unitId}`);
+
+      // For now, simulate API response
+      setUnits((prev) => prev.filter((unit) => unit.id !== unitId));
+
+      // If the deleted unit was selected, select another unit
+      if (selectedUnitId === unitId) {
+        const remaining = units.filter((unit) => unit.id !== unitId);
+        if (remaining.length > 0) {
+          setSelectedUnitId(remaining[0].id);
+        } else {
+          setSelectedUnitId("");
+        }
+      }
+
+      setLoading(false);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to delete unit"));
+      setLoading(false);
+      throw err;
+    }
+  };
+
+  // Add department to a unit
+  const addDepartment = async (
+    unitId: string,
+    departmentName: string
+  ): Promise<Department> => {
+    setLoading(true);
+    try {
+      // In a real app, this would be an API call
+      // const response = await axios.post<ApiResponse<Department>>(
+      //   `/api/units/${unitId}/departments`,
+      //   { name: departmentName }
+      // );
+      // const newDepartment = response.data.data;
+
+      // For now, simulate API response
+      const newDepartment: Department = {
+        id: `dept-${Date.now()}`,
+        name: departmentName,
+        positions: [],
+        isExpanded: false,
+      };
+
+      setUnits((prev) =>
+        prev.map((unit) =>
+          unit.id === unitId
+            ? { ...unit, departments: [...unit.departments, newDepartment] }
+            : unit
+        )
+      );
+
+      setLoading(false);
+      return newDepartment;
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Failed to add department")
+      );
+      setLoading(false);
+      throw err;
+    }
+  };
+
+  // Toggle expand/collapse for a unit
+  const toggleUnitExpand = (unitId: string) => {
+    setUnits((prev) =>
+      prev.map((unit) =>
+        unit.id === unitId ? { ...unit, isExpanded: !unit.isExpanded } : unit
+      )
+    );
+  };
+
+  // Toggle expand/collapse for a department
+  const toggleDepartmentExpand = (unitId: string, deptId: string) => {
+    setUnits((prev) =>
+      prev.map((unit) => {
+        if (unit.id !== unitId) return unit;
+
+        return {
+          ...unit,
+          departments: unit.departments.map((dept) =>
+            dept.id === deptId
+              ? { ...dept, isExpanded: !dept.isExpanded }
+              : dept
+          ),
+        };
+      })
+    );
+  };
+
+  // Select a unit
+  const selectUnit = (unitId: string) => {
+    setSelectedUnitId(unitId);
+  };
+
+  // Load units when organizationId changes
+  useEffect(() => {
+    fetchUnits();
+  }, [organizationId]);
+
+  return {
+    units,
+    selectedUnitId,
+    selectedUnit: units.find((unit) => unit.id === selectedUnitId),
+    loading,
+    error,
+    fetchUnits,
+    createUnit,
+    updateUnit,
+    deleteUnit,
+    addDepartment,
+    toggleUnitExpand,
+    toggleDepartmentExpand,
+    selectUnit,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/hooks/useUserRoles.ts b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useUserRoles.ts
new file mode 100644
index 000000000..50974ddc2
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useUserRoles.ts
@@ -0,0 +1,121 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import {
+  removeUnitAdminRole,
+  assignFirstsForSecond,
+  assignSecondsForFirst,
+  deleteUserRole,
+  removeFirstsForSecond,
+  removeSecondsForFirst,
+  RemoveOrAssignUnitAdminPayload,
+  removeOrgAdminRole,
+  RemoveOrAssignOrgAdminPayload,
+} from "@/super-admin/services/api/userRoleService";
+
+export const useUserRoles = () => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+  // Remove Unit Admin Role
+  const { mutateAsync: removeAdminRole, isPending: isRemoving } = useMutation({
+    mutationFn: (payload: RemoveOrAssignUnitAdminPayload) =>
+      removeUnitAdminRole(payload),
+    onSuccess: () => {
+      toast.success("Unit admin role removed successfully");
+      queryClient.invalidateQueries({ queryKey: ["organizationAdmins"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+  const { mutateAsync: removeUnitAdmin, isPending: isRemovingUnitAdmin } =
+    useMutation({
+      mutationFn: (payload: RemoveOrAssignOrgAdminPayload) =>
+        removeOrgAdminRole(payload),
+      onSuccess: () => {
+        toast.success("Unit admin role removed successfully");
+        queryClient.invalidateQueries({ queryKey: ["organizationAdmins"] });
+      },
+      onError: (error) => {
+        handleError(error);
+      },
+    });
+
+  // Assign Firsts for Second
+  const { mutate: assignFirsts, isPending: isAssigningFirsts } = useMutation({
+    mutationFn: (payload: { secondId: string; firstIds: string[] }) =>
+      assignFirstsForSecond(payload),
+    onSuccess: () => {
+      toast.success("Firsts assigned successfully");
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  // Assign Seconds for First
+  const { mutate: assignSeconds, isPending: isAssigningSeconds } = useMutation({
+    mutationFn: (payload: { firstId: string; secondIds: string[] }) =>
+      assignSecondsForFirst(payload),
+    onSuccess: () => {
+      toast.success("Seconds assigned successfully");
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  // Remove Firsts for Second
+  const { mutate: removeFirsts, isPending: isRemovingFirsts } = useMutation({
+    mutationFn: (payload: { secondId: string; firstIds: string[] }) =>
+      removeFirstsForSecond(payload),
+    onSuccess: () => {
+      toast.success("Firsts removed successfully");
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  // Remove Seconds for First
+  const { mutate: removeSeconds, isPending: isRemovingSeconds } = useMutation({
+    mutationFn: (payload: { firstId: string; secondIds: string[] }) =>
+      removeSecondsForFirst(payload),
+    onSuccess: () => {
+      toast.success("Seconds removed successfully");
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  // Delete User Role by ID
+  const { mutate: deleteRole, isPending: isDeleting } = useMutation({
+    mutationFn: (id: string) => deleteUserRole(id),
+    onSuccess: () => {
+      toast.success("Role deleted successfully");
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  return {
+    removeAdminRole,
+    removeUnitAdmin,
+    assignFirsts,
+    assignSeconds,
+    removeFirsts,
+    removeSeconds,
+    deleteRole,
+    isRemoving,
+    isRemovingUnitAdmin,
+    isAssigningFirsts,
+    isAssigningSeconds,
+    isRemovingFirsts,
+    isRemovingSeconds,
+    isDeleting,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/hooks/useUsers.ts b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useUsers.ts
new file mode 100644
index 000000000..9cbaf9d7e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/hooks/useUsers.ts
@@ -0,0 +1,25 @@
+import { OrganizationUserDto, User } from "@/shared/dto/user/usersDto";
+import { getEmployeesUnderOrg } from "@/shared/services/organizationsService";
+import { useQuery } from "@tanstack/react-query";
+import { getUserById } from "../services/api/userService";
+
+export const useUsers = (organizationId: string) => {
+  return useQuery({
+    queryKey: ["users"],
+    queryFn: async () => {
+      const { data } = await getEmployeesUnderOrg(organizationId);
+      return data as { items: OrganizationUserDto[]; count: number };
+    },
+  });
+};
+
+
+export const useUsersByID = (id: string) => {
+  return useQuery({
+    queryKey: ["user",id],
+    queryFn: async () => {
+      const response = await getUserById(id);
+      return response.data as  User;
+    },
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/lib/dateFormatter.ts b/apps/edr-freight-web/backoffice/src/super-admin/lib/dateFormatter.ts
new file mode 100644
index 000000000..aebf73003
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/lib/dateFormatter.ts
@@ -0,0 +1,5 @@
+import { formatDistanceToNow, parseISO } from "date-fns";
+
+export const getRelativeTime = (isoDate: string): string => {
+  return formatDistanceToNow(parseISO(isoDate), { addSuffix: true });
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/lib/utils.ts b/apps/edr-freight-web/backoffice/src/super-admin/lib/utils.ts
new file mode 100644
index 000000000..5d4c46738
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/lib/utils.ts
@@ -0,0 +1,28 @@
+import { ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function formatDate(input: string | number | Date): string {
+  const date = new Date(input);
+  return date.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+export function formatDateTime(input: string | number | Date): string {
+  const date = new Date(input);
+  return date.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+  });
+}
+
+// Add any other utility functions here that might be needed
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/services/api/dashboardApi.ts b/apps/edr-freight-web/backoffice/src/super-admin/services/api/dashboardApi.ts
new file mode 100644
index 000000000..9bafef54a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/services/api/dashboardApi.ts
@@ -0,0 +1,90 @@
+import axios from "@/shared/services/axiosInstance";
+import { DashboardStatsDto } from "@/super-admin/components/dashboard/types/dashboardStatsDto";
+import axiosInstance from "../../../shared/services/axiosInstance";
+import { AxiosResponse, AxiosError } from "axios";
+
+// This is your DTO structure
+export const getDashboardStats = async (): Promise<DashboardStatsDto> => {
+  const { data } = await axios.get("/dashboard/stats");
+  return data;
+};
+
+// Types for organization report data
+export interface OrganizationReport {
+  unitsCount: number;
+  employeesCount: number;
+  positionsCount: number;
+  totalDocuments?: number;
+  recentActivities?: {
+    id: string;
+    type: string;
+    description: string;
+    timestamp: string;
+  }[];
+}
+
+export type UnitReport = Omit<OrganizationReport, "unitsCount"> & {
+  unitsCount?: number;
+};
+
+/**
+ * Fetches organization report data for the dashboard
+ * @param organizationId - The ID of the organization
+ * @returns Promise with the organization report data
+ */
+export const getOrganizationReport = async (
+  organizationId: string
+): Promise<AxiosResponse<OrganizationReport>> => {
+  try {
+    return await axiosInstance.get(`/organizations/${organizationId}/report`);
+  } catch (error: unknown) {
+    if (error instanceof AxiosError && error.response) {
+      // Handle specific error cases if needed
+    }
+    throw error;
+  }
+};
+
+export const getUnitReport = async (
+  organizationId: string,
+  unitId: string,
+): Promise<AxiosResponse<UnitReport>> => {
+  return axiosInstance.get(
+    `/organizations/${organizationId}/report/${unitId}/unit`,
+  );
+};
+
+/**
+ * Fetches total employees count for an organization
+ * @param organizationId - The ID of the organization
+ * @returns Promise with the total employees count
+ */
+export const getOrganizationEmployees = async (
+  organizationId: string
+): Promise<AxiosResponse<{ total: number }>> => {
+  return axiosInstance.get(`/organizations/${organizationId}/employees/count`);
+};
+
+/**
+ * Fetches total departments count for an organization
+ * @param organizationId - The ID of the organization
+ * @returns Promise with the total departments count
+ */
+export const getOrganizationDepartments = async (
+  organizationId: string
+): Promise<AxiosResponse<{ total: number }>> => {
+  return axiosInstance.get(
+    `/organizations/${organizationId}/departments/count`
+  );
+};
+
+/**
+ * Fetches total units count for an organization
+ * @param organizationId - The ID of the organization
+ * @returns Promise with the total units count
+ */
+export const getOrganizationUnits = async (
+  organizationId: string
+): Promise<AxiosResponse<{ total: number }>> => {
+  return axiosInstance.get(`/organizations/${organizationId}/units/count`);
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/services/api/delegationTemplate.ts b/apps/edr-freight-web/backoffice/src/super-admin/services/api/delegationTemplate.ts
new file mode 100644
index 000000000..2d0af7796
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/services/api/delegationTemplate.ts
@@ -0,0 +1,68 @@
+import { externalParam } from "@/external-portal/services/portalOutgoingService";
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+import { AdoptTemplateTypes } from "@/super-admin/components/templates/template";
+import { CreateTemplateTypes } from "@/super-admin/components/templates/types/templateTypes";
+
+export const getDelegationTemplates = async () => {
+  const { data } = await recordAxiosInstance.get("/record-templates/global", {
+    headers: withHeaders(),
+  });
+  return data;
+};
+
+export const getDelegationTemplateById = async (
+  id: string,
+  params: externalParam,
+) => {
+  const { data } = await recordAxiosInstance.get(`/record-templates/${id}`, {
+    headers: withHeaders(),
+    ...params,
+  });
+  return data;
+};
+
+export const createDelegationTemplate = async (
+  template: CreateTemplateTypes,
+) => {
+  const { data } = await recordAxiosInstance.post(
+    `/record-templates/global/delegation`,
+    template,
+    {
+      headers: withHeaders(),
+    },
+  );
+  return data;
+};
+
+export const updateDelegationTemplate = async (
+  id: string,
+  template: CreateTemplateTypes,
+) => {
+  const { data } = await recordAxiosInstance.patch(
+    `/record-templates/global/${id}`,
+    template,
+    {
+      headers: withHeaders(),
+    },
+  );
+  return data;
+};
+
+export const deleteDelegationTemplate = async (id: string) => {
+  const { data } = await recordAxiosInstance.delete(`/record-templates/${id}`, {
+    headers: withHeaders(),
+  });
+  return data;
+};
+
+export const adoptDelegationTemplate = async (item: AdoptTemplateTypes) => {
+  const { data } = await recordAxiosInstance.post(
+    `/record-templates/adopt-to-unit`,
+    item,
+    {
+      headers: withHeaders(),
+    },
+  );
+  return data;
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/services/api/organizationAdminService.ts b/apps/edr-freight-web/backoffice/src/super-admin/services/api/organizationAdminService.ts
new file mode 100644
index 000000000..979cb1957
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/services/api/organizationAdminService.ts
@@ -0,0 +1,112 @@
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import axiosInstance from "../../../shared/services/axiosInstance";
+import { AxiosResponse } from "axios";
+
+export interface OrgHeaders {
+  tenantKey: string;
+  unitId?: string;
+}
+
+export interface OrganizationAdminPayload {
+  organizationId: string;
+  username: string;
+  email: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  phoneNumber: string;
+}
+
+export interface UnitAdminPayload {
+  unitId: string;
+  username: string;
+  email: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  phoneNumber: string;
+}
+
+export interface OrganizationAdmin {
+  id: string;
+  organizationId: string;
+  username: string;
+  email: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  status: string;
+}
+
+export interface OrgAdminQueryParams {
+  orderBy?: string;
+  take?: number;
+  skip?: number;
+  order?: string;
+}
+
+export const getOrganizationAdmins = async (
+  params?: OrgAdminQueryParams
+): Promise<AxiosResponse> => {
+  return axiosInstance.get("/organizations/org-admins", {
+    ...{ headers: withHeaders() },
+    params,
+  });
+};
+
+export const getOrganizationAdminById = async (
+  id: string,
+  params?: OrgAdminQueryParams
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/organizations/org-admins/${id}`, {
+    ...{ headers: withHeaders() },
+    params,
+  });
+};
+export const fetchUnitAdminById = async (
+  id: string,
+  params?: OrgAdminQueryParams
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/units/unit-admins/${id}`, {
+    ...{ headers: withHeaders() },
+    params,
+  });
+};
+
+export const fetchAllUnitAdminById = async (
+  id: string,
+  params?: OrgAdminQueryParams
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/organizations/all-admins/${id}`, {
+    ...{ headers: withHeaders() },
+    params,
+  });
+};
+
+export const assignOrganizationAdmin = async (
+  data: OrganizationAdminPayload
+): Promise<AxiosResponse> => {
+  return axiosInstance.post("/organizations/org-admin", data, {
+    headers: withHeaders(),
+  });
+};
+
+export const assignUnitAdmin = async (
+  data: UnitAdminPayload
+): Promise<AxiosResponse> => {
+  return axiosInstance.post("/units/unit-admin", data, {
+    headers: withHeaders(),
+  });
+};
+
+export const updateOrganizationAdmin = async (
+  id: string | number,
+  data: OrganizationAdminPayload
+): Promise<AxiosResponse> => {
+  return axiosInstance.put(`/organizations/org-admin/${id}`, data, {
+    headers: withHeaders(),
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/services/api/organizationTypesService.ts b/apps/edr-freight-web/backoffice/src/super-admin/services/api/organizationTypesService.ts
new file mode 100644
index 000000000..22ae33826
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/services/api/organizationTypesService.ts
@@ -0,0 +1,30 @@
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import axiosInstance from "../../../shared/services/axiosInstance";
+import { AxiosResponse } from "axios";
+
+export interface OrgHeaders {
+  tenantKey: string;
+  unitId?: string;
+}
+
+export interface OrgType {
+  id: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  key: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface OrgTypeResponse {
+  count: number;
+  items: OrgType[];
+}
+
+export const getOrganizationTypes = async (): Promise<
+  AxiosResponse<OrgTypeResponse>
+> => {
+  return axiosInstance.get("/organization-types", { headers: withHeaders() });
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/services/api/passwordSettingsService.ts b/apps/edr-freight-web/backoffice/src/super-admin/services/api/passwordSettingsService.ts
new file mode 100644
index 000000000..bb6bd8421
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/services/api/passwordSettingsService.ts
@@ -0,0 +1,72 @@
+import axiosInstance from "@/shared/services/axiosInstance";
+
+export interface PasswordSettings {
+  id?: string;
+  minimumPasswordLength: number;
+  maximumPasswordLength: number;
+  passwordExpiry: number;
+  sessionTimeout: number;
+  isDefaultPasswordEnabled: boolean;
+  defaultPassword?: string;
+}
+
+/**
+ * Get system password settings
+ */
+export const getPasswordSettings = async (): Promise<PasswordSettings | null> => {
+  const { data } = await axiosInstance.get("/system-configurations");
+  console.log("Password settings API response:", data);
+  
+  // API returns an array with {count, items}
+  if (data && data.items && Array.isArray(data.items)) {
+    console.log("Found items array, returning first item:", data.items[0]);
+    // Return the first (latest) item if it exists
+    return data.items[0] || null;
+  }
+  
+  // Fallback for direct object response
+  console.log("No items array, returning data as is:", data);
+  return data || null;
+};
+
+/**
+ * Update system password settings
+ */
+export const updatePasswordSettings = async (
+  payload: PasswordSettings
+): Promise<PasswordSettings> => {
+  const { data } = await axiosInstance.put(
+    `/system-configurations/${payload.id}`,
+    payload
+  );
+  return data;
+};
+
+/**
+ * Create system password settings
+ */
+export const createPasswordSettings = async (
+  payload: PasswordSettings
+): Promise<PasswordSettings> => {
+  const { data } = await axiosInstance.post(
+    "/system-configurations",
+    payload
+  );
+  return data;
+};
+
+/**
+ * Delete system password settings
+ */
+export const deletePasswordSettings = async (
+  id: string
+): Promise<void> => {
+  console.log("Calling DELETE /system-configurations/" + id);
+  try {
+    const response = await axiosInstance.delete(`/system-configurations/${id}`);
+    console.log("Delete response:", response);
+  } catch (error) {
+    console.error("Delete API error:", error);
+    throw error;
+  }
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/services/api/sitesService.ts b/apps/edr-freight-web/backoffice/src/super-admin/services/api/sitesService.ts
new file mode 100644
index 000000000..b5dcb3592
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/services/api/sitesService.ts
@@ -0,0 +1,69 @@
+import axiosInstance from "@/shared/services/axiosInstance";
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import { AxiosResponse } from "axios";
+import { SiteDto, SitePayloadDto, SiteQueryParams } from "@/super-admin/dto/SitesDto";
+
+// Fetch all sites (supports pagination/filter params)
+export const getSites = async (
+  params?: SiteQueryParams
+): Promise<AxiosResponse<any>> => {
+  return axiosInstance.get("/sites", {
+    headers: withHeaders(),
+    params,
+  });
+};
+
+// Fetch site by ID
+export const getSiteById = async (
+  id: string
+): Promise<AxiosResponse<SiteDto>> => {
+  return axiosInstance.get(`/sites/${id}`, {
+    headers: withHeaders(),
+  });
+};
+
+// Create a new site
+export const createSite = async (
+  data: SitePayloadDto
+): Promise<AxiosResponse<SiteDto>> => {
+  return axiosInstance.post("/sites", data, {
+    headers: withHeaders(),
+  });
+};
+
+// Update an existing site
+export const updateSite = async (
+  id: string,
+  data: SitePayloadDto
+): Promise<AxiosResponse<SiteDto>> => {
+  return axiosInstance.put(`/sites/${id}`, data, {
+    headers: withHeaders(),
+  });
+};
+
+// Soft delete (archive) a site
+export const softDeleteSite = async (
+  id: string
+): Promise<AxiosResponse<void>> => {
+  return axiosInstance.delete(`/sites/${id}/soft`, {
+    headers: withHeaders(),
+  });
+};
+
+// Permanently delete a site
+export const deleteSite = async (
+  id: string
+): Promise<AxiosResponse<void>> => {
+  return axiosInstance.delete(`/sites/${id}`, {
+    headers: withHeaders(),
+  });
+};
+
+// Restore an archived site
+export const restoreSite = async (
+  id: string
+): Promise<AxiosResponse<SiteDto>> => {
+  return axiosInstance.patch(`/sites/${id}/restore`, null, {
+    headers: withHeaders(),
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/services/api/userRoleService.ts b/apps/edr-freight-web/backoffice/src/super-admin/services/api/userRoleService.ts
new file mode 100644
index 000000000..3281e4298
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/services/api/userRoleService.ts
@@ -0,0 +1,103 @@
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import axiosInstance from "@/shared/services/axiosInstance";
+import { AxiosResponse } from "axios";
+
+export interface UserRoleHeaders {
+  delegatorPositionId: string;
+  currentProjectId?: string;
+}
+
+
+export interface RemoveOrAssignUnitAdminPayload {
+  unitId: string;
+  userId: string;
+}
+
+export interface RemoveOrAssignOrgAdminPayload {
+  organizationId: string;
+  userId: string;
+}
+
+// Assign Org Admin Role
+export const assignOrgAdminRole = async (
+  payload: RemoveOrAssignOrgAdminPayload
+): Promise<AxiosResponse> =>
+  axiosInstance.post("/user-roles/assign-org-admin-role", payload, {
+    headers: withHeaders(),
+  });
+
+// Remove Org Admin Role
+export const removeOrgAdminRole = async (
+  payload: RemoveOrAssignOrgAdminPayload
+): Promise<AxiosResponse> =>
+  axiosInstance.post("/user-roles/remove-org-admin-role", payload, {
+    headers: withHeaders(),
+  });
+
+//Assign unit Admin Role
+export const assignUnitAdminRole = async (
+  payload: RemoveOrAssignUnitAdminPayload
+): Promise<AxiosResponse> =>
+  axiosInstance.post("/user-roles/assign-unit-admin-role", payload, {
+    headers: withHeaders(),
+  });
+
+// Remove Unit Admin Role
+export const removeUnitAdminRole = async (
+  payload: RemoveOrAssignUnitAdminPayload
+): Promise<AxiosResponse> =>
+  axiosInstance.post("/user-roles/remove-unit-admin-role", payload, {
+    headers: withHeaders(),
+  });
+
+// Get roles given first (e.g., user has been assigned roles)
+export const getRolesGivenFirst = async (id: string): Promise<AxiosResponse> =>
+  axiosInstance.get(`/user-roles/given-first/${id}`, {
+    headers: withHeaders(),
+  });
+
+// Get roles given second (e.g., entities assigned to a user)
+export const getRolesGivenSecond = async (id: string): Promise<AxiosResponse> =>
+  axiosInstance.get(`/user-roles/given-second/${id}`, {
+    headers: withHeaders(),
+  });
+
+// Assign firsts for second
+export const assignFirstsForSecond = async (payload: {
+  secondId: string;
+  firstIds: string[];
+}): Promise<AxiosResponse> =>
+  axiosInstance.post(`/user-roles/assign-firsts-for-second`, payload, {
+    headers: withHeaders(),
+  });
+
+// Assign seconds for first
+export const assignSecondsForFirst = async (payload: {
+  firstId: string;
+  secondIds: string[];
+}): Promise<AxiosResponse> =>
+  axiosInstance.post(`/user-roles/assign-seconds-for-first`, payload, {
+    headers: withHeaders(),
+  });
+
+// Delete user role by id
+export const deleteUserRole = async (id: string): Promise<AxiosResponse> =>
+  axiosInstance.delete(`/user-roles/${id}`, { headers: withHeaders() });
+
+// Remove firsts for second
+export const removeFirstsForSecond = async (payload: {
+  secondId: string;
+  firstIds: string[];
+}): Promise<AxiosResponse> =>
+  axiosInstance.post(`/user-roles/remove-firsts-for-second`, payload, {
+    headers: withHeaders(),
+  });
+
+// Remove seconds for first
+export const removeSecondsForFirst = async (payload: {
+  firstId: string;
+  secondIds: string[];
+}): Promise<AxiosResponse> =>
+  axiosInstance.post(`/user-roles/remove-seconds-for-first`, payload, {
+    headers: withHeaders(),
+  });
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/services/api/userService.ts b/apps/edr-freight-web/backoffice/src/super-admin/services/api/userService.ts
new file mode 100644
index 000000000..8146791ad
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/super-admin/services/api/userService.ts
@@ -0,0 +1,103 @@
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import axiosInstance from "@/shared/services/axiosInstance";
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+import {
+  ExternalUsersResponseDto,
+  UserTypeDto,
+} from "@/super-admin/dto/ExternalUsersDto";
+import { MainDtoResponse } from "@/super-admin/dto/SuperAdminDto";
+import { ExternalQueryParams } from "@/super-admin/hooks/useExternalUsers";
+import { AxiosResponse } from "axios";
+
+// 🔵 Get pending users
+export const getPendingUsers = async (
+  params?: ExternalQueryParams
+): Promise<AxiosResponse<ExternalUsersResponseDto>> =>
+  axiosInstance.get("/users/pending", { headers: withHeaders(), params });
+
+// Dashboard Information
+export const getUnitInfo = async (
+  params?: ExternalQueryParams
+): Promise<AxiosResponse<UserTypeDto>> =>
+  recordAxiosInstance.get("/record-boxes/my-units-dashboard", {
+    headers: withHeaders(),
+    params,
+  });
+
+// unit infromation from super admin side
+export const getUnitInfoByUnitID = async (
+  UnitId: string,
+  params?: ExternalQueryParams
+): Promise<AxiosResponse<UserTypeDto>> =>
+  recordAxiosInstance.get(`/record-boxes/summary/${UnitId}`, {
+    headers: withHeaders(),
+    params,
+  });
+
+// 🔵 Get all users (both external_organization and employee)
+export const getAllExternalUsers = async (
+  params?: ExternalQueryParams
+): Promise<AxiosResponse<ExternalUsersResponseDto>> => {
+  const queryParams = {
+    ...params,
+    // No userType filter - fetch both external_organization and employee users
+  };
+  return axiosInstance.get("/users/filter", {
+    headers: withHeaders(),
+    params: queryParams,
+  });
+};
+export const getExternalUsersNeesApproval = async (
+  params?: ExternalQueryParams
+): Promise<AxiosResponse<ExternalUsersResponseDto>> => {
+  const queryParams = {
+    ...params,
+    // No userType filter - fetch both external_organization and employee users
+  };
+  return axiosInstance.get("/users/filter", {
+    headers: withHeaders(),
+    params: queryParams,
+  });
+};
+
+// 🔴 Delete user
+export const deleteUser = async (id: string): Promise<AxiosResponse<void>> =>
+  axiosInstance.delete(`/users/${id}`, { headers: withHeaders() });
+
+export const getUserById = async (id: string): Promise<AxiosResponse<any>> =>
+  axiosInstance.get(`/users/${id}`, { headers: withHeaders() });
+
+// 🟢 Activate user
+export const activateUser = async (id: string): Promise<AxiosResponse<void>> =>
+  axiosInstance.patch(`/users/activate-user/${id}`, null, {
+    headers: withHeaders(),
+  });
+
+export const approveUser = async (
+  id: string,
+  status: string
+): Promise<AxiosResponse<void>> =>
+  axiosInstance.patch(
+    `/users/approve/${id}`,
+    { status },
+    {
+      headers: withHeaders(),
+    }
+  );
+
+// 🟠 Deactivate user
+export const deactivateUser = async (
+  id: string
+): Promise<AxiosResponse<void>> =>
+  axiosInstance.patch(`/users/deactivate-user/${id}`, null, {
+    headers: withHeaders(),
+  });
+
+export const getAllRecords = async (
+  UnitId: string,
+  params?: ExternalQueryParams
+): Promise<AxiosResponse<MainDtoResponse>> =>
+  recordAxiosInstance.get(`/record-boxes/unit-box/${UnitId}`, {
+    headers: withHeaders(),
+    params,
+  });
diff --git a/apps/edr-freight-web/backoffice/src/types/booking.ts b/apps/edr-freight-web/backoffice/src/types/booking.ts
index dc9a29db8..c31118cc7 100644
--- a/apps/edr-freight-web/backoffice/src/types/booking.ts
+++ b/apps/edr-freight-web/backoffice/src/types/booking.ts
@@ -201,6 +201,11 @@ export interface BookingDetail {
   latestChangeRequestNote?: string | null;
   nextStep?: BookingNextStep | null;
   paymentReceipt?: InAppPaymentReceipt;
+  /** Phased-clearance fields the ET/DJ queue rows surface (GENERAL customs bookings). */
+  clearanceCurrentPhase?: string | null;
+  roHoldReason?: string | null;
+  roAmendmentRequestedAt?: string | null;
+  preClearanceFinalizedAt?: string | null;
   createdAt: string;
   updatedAt: string;
   // customer?: BookingNamedRef & { companyName?: string };
diff --git a/apps/edr-freight-web/backoffice/src/types/customer.ts b/apps/edr-freight-web/backoffice/src/types/customer.ts
index 7328decf0..8fb03cf86 100644
--- a/apps/edr-freight-web/backoffice/src/types/customer.ts
+++ b/apps/edr-freight-web/backoffice/src/types/customer.ts
@@ -79,6 +79,15 @@ export interface LicenseChangeIntent {
   fileName?: string;
 }
 
+/** A staged company-level document add/remove (e.g. the PoA delegation letter). */
+export interface DocumentChangeIntent {
+  op: "add" | "remove";
+  fileId: string;
+  /** The live FileRecord code this op targets (the upload setting's fileKey). */
+  code: string;
+  fileName?: string;
+}
+
 /**
  * A staged profile-edit change request. The customer's settings edits land here
  * (pending) until a reviewer approves (applies them) or rejects (with a note).
@@ -92,6 +101,8 @@ export interface CompanyChangeRequest {
   documentFileIds: string[];
   /** Staged business-license add/remove intents attached to this request. */
   licenseChanges: LicenseChangeIntent[];
+  /** Staged company-document add/remove intents (e.g. the PoA letter). */
+  documentChanges: DocumentChangeIntent[];
   note: string | null;
   submittedAt: string | null;
   reviewedAt: string | null;
@@ -127,6 +138,11 @@ export interface Company {
   generalManagerName?: string | null;
   generalManagerEmail?: string | null;
   generalManagerPhone?: string | null;
+  poaName?: string | null;
+  poaEmail?: string | null;
+  poaPhone?: string | null;
+  poaLocation?: string | null;
+  poaAddress?: string | null;
   website?: string | null;
   attributes?: Record<string, unknown> | null;
   companyProfiles: CompanyProfile[];
diff --git a/apps/edr-freight-web/backoffice/src/types/trainScheduling.ts b/apps/edr-freight-web/backoffice/src/types/trainScheduling.ts
index c09c067d8..129171b7f 100644
--- a/apps/edr-freight-web/backoffice/src/types/trainScheduling.ts
+++ b/apps/edr-freight-web/backoffice/src/types/trainScheduling.ts
@@ -257,11 +257,14 @@ export interface StaffBookingWindow {
 
 export interface BatchBoardSchedule {
   scheduleId: string;
+  /** Human-facing schedule reference (S-YYYY-NNNNN). */
+  scheduleReference: string | null;
   trainNumber: string | null;
   routeName: string | null;
   origin: string | null;
   destination: string | null;
   scheduleDate: string | null;
+  createdAt: string | null;
   status: string;
   bookingWindowStatus: string;
   direction: string | null;
@@ -300,6 +303,37 @@ export interface BatchBoardSchedule {
   bookings: BatchBoardBooking[];
 }
 
+export type BatchBoardSortField =
+  | "createdAt"
+  | "scheduledDepartureDate"
+  | "trainNumber"
+  | "status";
+
+/** Server-side filters for the paginated batch board list. */
+export interface BatchBoardFilters {
+  page?: number;
+  pageSize?: number;
+  /** Subset of schedule statuses; omit for all (incl. arrived/cancelled). */
+  statuses?: TrainScheduleStatus[];
+  bookingWindowStatus?: "OPEN" | "FULL" | "CLOSED";
+  /** Matches train number, route yards, stations, locomotive code. */
+  search?: string;
+  departureFrom?: string;
+  departureTo?: string;
+  createdFrom?: string;
+  createdTo?: string;
+  sortBy?: BatchBoardSortField;
+  sortOrder?: "ASC" | "DESC";
+}
+
+export interface BatchBoardListResponse {
+  items: BatchBoardSchedule[];
+  total: number;
+  page: number;
+  pageSize: number;
+  totalPages: number;
+}
+
 export type BookingAllocationStatus =
   | "NOT_ATTEMPTED"
   | "ASSIGNED"
@@ -337,6 +371,8 @@ export interface BatchWindowGroup {
 
 export interface BatchBoardScheduleDetail {
   scheduleId: string;
+  /** Human-facing schedule reference (S-YYYY-NNNNN). */
+  scheduleReference: string | null;
   trainNumber: string | null;
   routeName: string | null;
   origin: string | null;
@@ -506,6 +542,8 @@ export interface TrainScheduleDetail {
       capacityTons: number;
       lengthMeters: number;
       assignedWeightTons: number;
+      /** Empty-wagon weight from the wagon type — gross = tare + cargo. */
+      tareWeightTons?: number | null;
       status?: string;
       physicalWagonId?: string | null;
       physicalWagonNumber?: string | null;
diff --git a/apps/edr-freight-web/backoffice/src/types/warehouse.ts b/apps/edr-freight-web/backoffice/src/types/warehouse.ts
index e16271880..2802a0355 100644
--- a/apps/edr-freight-web/backoffice/src/types/warehouse.ts
+++ b/apps/edr-freight-web/backoffice/src/types/warehouse.ts
@@ -86,8 +86,9 @@ export function getNextInventoryAction(item: WarehouseInventoryItem): InventoryA
       return 'store';
     case 'STORED':
       // Reserve is retired: a stored export item goes straight to loading prep
-      // once inspection passes. Import STORED is handled via the import queue.
-      if (isImport) return null;
+      // once inspection passes. An import item parked back into storage returns
+      // to pickup — otherwise Store would strand it with no action.
+      if (isImport) return inspected ? 'ready-for-pickup' : null;
       return inspected ? 'ready-for-loading' : null;
     case 'RESERVED':
       // Export loading is gated on a passed inspection.
@@ -367,6 +368,8 @@ export interface ReleaseOrderPayload {
   grossWeight?: number;
   netWeight?: number;
   gateOutTime?: string;
+  /** Container bookings only: operator chose not to weigh — tare/gross omitted, match skipped. */
+  weighingSkipped?: boolean;
 }
 
 /** Import branch: proof of delivery captured on customer pickup. */
@@ -385,6 +388,8 @@ export interface EligibleBooking {
   customerTin: string | null;
   customerPhone: string | null;
   containerNumber: string | null;
+  /** Distinct seal numbers from the booking's container units, comma-joined. */
+  sealNumbers: string | null;
   containerQuantity: number | null;
   containerPackagingType: string | null;
   cargoDescription: string | null;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/AppMenuTabs.tsx b/apps/edr-freight-web/backoffice/src/user-management/AppMenuTabs.tsx
new file mode 100644
index 000000000..24d6c41b6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/AppMenuTabs.tsx
@@ -0,0 +1,312 @@
+import { NavLink } from "react-router-dom";
+import {
+  Archive,
+  BarChart,
+  Building2,
+  ChartAreaIcon,
+  ClipboardList,
+  FileText,
+  Globe,
+  Settings,
+  ShieldAlert,
+  Users2,
+  UsersRound,
+} from "lucide-react";
+import { useAuth } from "@/shared/context/AuthContext";
+import { usePermissions } from "@/shared/context/PermissionContext";
+
+import { useTranslation } from "react-i18next";
+
+export interface MenuItem {
+  label: string;
+  href: string;
+  icon: React.ReactNode;
+  roles?: string[];
+  permissions?: string[];
+  isPrimary?: boolean;
+  displayLabel?: string;
+  children?: MenuItem[];
+}
+
+export const AppMenuTabs = () => {
+  const { user } = useAuth();
+  const userRoles = user?.roles.map((role) => role.key) || [];
+
+  const menuItems: MenuItem[] = [
+    {
+      label: "dashboard",
+      href: "/user-management/dashboard",
+      icon: <BarChart className="h-4 w-4" />,
+      roles: ["super_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "organizations",
+      href: "/user-management/organizations",
+      icon: <Building2 className="h-4 w-4" />,
+      roles: ["super_admin"],
+      isPrimary: true,
+    },
+
+    {
+      label: "organizationAdmins", // Shortened for mobile
+      displayLabel: "organizationAdmins", // Full label for desktop
+      href: "/user-management/organization_admins",
+      icon: <Users2 className="h-4 w-4" />,
+      roles: ["super_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "externalUsers", // Shortened for mobile
+      displayLabel: "externalUsers", // Full label for desktop
+      href: "/user-management/external_users",
+      icon: <Users2 className="h-4 w-4" />,
+      roles: ["super_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "dashboard",
+      href: "/user-management/user_management-dashboard",
+      icon: <BarChart className="h-4 w-4" />,
+      roles: ["admin", "organization_admin", "unit_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "userManagement",
+      href: "/user-management/user_management",
+      icon: <UsersRound className="h-4 w-4" />,
+      roles: ["admin", "organization_admin", "unit_admin"],
+      isPrimary: true,
+    },
+    // {
+    //   label: "userPositionApproval",
+    //   href: "/user-management/user-position-approval",
+    //   icon: <UsersRound className="h-4 w-4" />,
+    //   roles: ["admin", "organization_admin", "unit_admin"],
+    //   permissions: ["can:activateEmployee"],
+    //   isPrimary: true,
+    // },
+    // {
+    //   label: "All Records",
+    //   displayLabel: "All Records",
+    //   href: "/user-management/all-records",
+    //   icon: <FileText className="h-4 w-4" />,
+    //   roles: ["admin", "organization_admin", "unit_admin"],
+    //   permissions: ["can:canViewAllRecords"],
+    //   isPrimary: true,
+    // },
+    {
+      label: "contentManagement", // Shortened for mobile
+      displayLabel: "contentManagement", // Full label for desktop
+      href: "/user-management/content-management",
+      icon: <FileText className="h-4 w-4" />,
+      roles: ["admin", "organization_admin", "unit_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "webManagement",
+      displayLabel: "webManagement",
+      href: "/user-management/web-management",
+      icon: <Globe className="h-4 w-4" />,
+      roles: ["admin", "organization_admin", "unit_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "Position",
+      displayLabel: "positionTypes",
+      href: "/user-management/position-management",
+      icon: <FileText className="h-4 w-4" />,
+      roles: ["admin", "organization_admin", "unit_admin", "super_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "migratedRecords",
+      displayLabel: "migratedRecords",
+      href: "/user-management/migrated-records-management",
+      icon: <FileText className="h-4 w-4" />,
+      roles: ["super_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "settings",
+      displayLabel: "settings",
+      href: "/user-management/organization-settings",
+      icon: <Settings className="h-4 w-4" />,
+      roles: ["admin", "organization_admin", "unit_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "Bulk",
+      displayLabel: "bulkUpload",
+      href: "/user-management/bulk-upload",
+      icon: <FileText className="h-4 w-4" />,
+      roles: ["admin", "organization_admin", "unit_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "Archive Users",
+      displayLabel: "Archive Users",
+      href: "/user-management/archive-users",
+      icon: <Archive className="h-4 w-4" />,
+      roles: ["super_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "Archived Organizations",
+      displayLabel: "Archived Organizations",
+      href: "/user-management/archived-organizations",
+      icon: <Archive className="h-4 w-4" />,
+      roles: ["super_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "Archive Users",
+      displayLabel: "Archive Users",
+      href: "/user-management/archives",
+      icon: <Archive className="h-4 w-4" />,
+      roles: ["admin", "organization_admin", "unit_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "Archived Units & Positions",
+      displayLabel: "Archived Units & Positions",
+      href: "/user-management/archived",
+      icon: <Archive className="h-4 w-4" />,
+      roles: ["admin", "organization_admin", "unit_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "Sector Reports",
+      displayLabel: "Sector Reports",
+      href: "/user-management/sector-reports",
+      icon: <ChartAreaIcon className="h-5 w-5" />,
+      roles: ["unit_admin", "admin", "organization_admin"],
+      isPrimary: true,
+    },
+    {
+      label: "activityLog",
+      href: "/user-management/activity_log",
+      icon: <ClipboardList className="h-4 w-4" />,
+      roles: ["super_admin"],
+      isPrimary: false,
+    },
+    {
+      label: "setting",
+      href: "/user-management/settings",
+      icon: <Settings className="h-4 w-4" />,
+      roles: ["super_admin"],
+      isPrimary: false,
+    },
+    {
+      label: "Letter Template",
+      href: "/user-management/templates",
+      icon: <FileText className="h-4 w-4" />,
+      roles: ["super_admin"],
+      isPrimary: false,
+    },
+    {
+      label: "Add Site",
+      href: "/user-management/add-site",
+      icon: <Globe className="h-4 w-4" />,
+      roles: ["super_admin"],
+      isPrimary: true,
+    },
+
+    // {
+    //   label: "branding.title",
+    //   href: "/user-management/web-management/Branding/Branding",
+    //   icon: <ShieldAlert className="h-4 w-4" />,
+    //   roles: ["super_admin"],
+    //   isPrimary: true,
+    // },
+  ];
+
+  const { permissions } = usePermissions();
+  const { t } = useTranslation();
+  const filteredMenu = menuItems.filter((item) =>
+    item?.roles?.some((r) => userRoles.includes(r)),
+  );
+  const primaryMenuItems = filteredMenu.filter(
+    (item) => item.isPrimary !== false,
+  );
+  const secondaryMenuItems = filteredMenu.filter(
+    (item) => item.isPrimary === false,
+  );
+
+  return (
+    <div className="fixed top-16 left-0 right-0 z-30 bg-white dark:bg-gray-900 border-b dark:border-gray-800 overflow-hidden flex flex-col">
+      {/* Mobile View - Two separate rows */}
+      <div className="md:hidden flex flex-col pt-5 pb-3 px-4 space-y-3 mt-2">
+        {/* Primary items row */}
+        <div className="flex items-center overflow-x-auto scrollbar-none">
+          {primaryMenuItems.map((item) => (
+            <NavLink
+              key={item.href}
+              to={item.href}
+              className={({ isActive }) =>
+                `flex items-center gap-1 px-3 py-2.5 mr-2 text-xs font-medium transition-colors whitespace-nowrap ${
+                  isActive
+                    ? "text-primary dark:text-primary-400 border-b-2 border-primary dark:border-primary-400"
+                    : "text-slate-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary-400"
+                }`
+              }
+            >
+              {item.icon}
+              <span className="max-w-[80px] truncate">
+                {t(`organization.${item.label}`, item.label)}
+              </span>
+            </NavLink>
+          ))}
+        </div>
+
+        {/* Secondary items row (if any) */}
+        {secondaryMenuItems.length > 0 && (
+          <div className="flex items-center overflow-x-auto scrollbar-none border-t dark:border-gray-800 pt-3">
+            {secondaryMenuItems.map((item) => (
+              <NavLink
+                key={item.href}
+                to={item.href}
+                className={({ isActive }) =>
+                  `flex items-center gap-1 px-3 py-2.5 mr-2 text-xs font-medium transition-colors whitespace-nowrap ${
+                    isActive
+                      ? "text-primary dark:text-primary-400 border-b-2 border-primary dark:border-primary-400"
+                      : "text-slate-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary-400"
+                  }`
+                }
+              >
+                {item.icon}
+                <span className="max-w-[80px] truncate">
+                  {t(`organization.${item.label}`, item.label)}
+                </span>
+              </NavLink>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Desktop View - Single row with all items */}
+      <div className="hidden md:flex pt-5 pb-3 px-8 mt-1">
+        <div className="flex items-center gap-2 overflow-x-auto scrollbar-none">
+          {filteredMenu.map((item) => (
+            <NavLink
+              key={item.href}
+              to={item.href}
+              className={({ isActive }) =>
+                `flex items-center gap-2 px-4 py-3 text-sm font-medium transition-colors whitespace-nowrap ${
+                  isActive
+                    ? "text-primary dark:text-primary-400 border-b-2 border-primary dark:border-primary-400"
+                    : "text-slate-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary-400"
+                }`
+              }
+            >
+              {item.icon}
+              <span className="max-w-full truncate">
+                {t(`organization.${item.label}`, item.label)}
+              </span>
+            </NavLink>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/Applayout.tsx b/apps/edr-freight-web/backoffice/src/user-management/Applayout.tsx
new file mode 100644
index 000000000..0362232e2
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/Applayout.tsx
@@ -0,0 +1,36 @@
+import { useLocation } from "react-router-dom";
+import { Outlet } from "react-router-dom";
+import { AppMenuTabs } from "./AppMenuTabs";
+import { useSidebar } from "@/shared/common/ui/sidebar";
+import Top from "@/record-management/components/common/Top";
+import { useAuth } from "@/shared/context/AuthContext";
+
+export const AppLayout = () => {
+  const { pathname } = useLocation();
+  const isAuthPage = pathname === "/";
+  const { toggleSidebar } = useSidebar();
+  const { user } = useAuth();
+  
+  const userRoles = user?.roles?.map((role) => role.key) || [];
+  const isSuperAdmin = userRoles.includes("super_admin");
+  
+  if (isAuthPage) {
+    return (
+      <div className="min-h-screen w-full bg-gray-50">
+        <Outlet />
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full flex flex-col min-h-screen bg-background text-foreground">
+      <Top onToggleSidebar={toggleSidebar} showRecordManagementShortcut={!isSuperAdmin} />
+      <AppMenuTabs />
+      <div className="px-2 pb-2 pt-8 sm:px-4 sm:pb-4 sm:pt-10 flex-1">
+        <div className="w-full overflow-x-auto">
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/CollapsibleSection.tsx b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/CollapsibleSection.tsx
new file mode 100644
index 000000000..c87cbafab
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/CollapsibleSection.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+
+interface CollapsibleSectionProps {
+  title: string;
+  isExpanded: boolean;
+  onToggle: () => void;
+  children: React.ReactNode;
+}
+
+const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
+  title,
+  isExpanded,
+  onToggle,
+  children,
+}) => (
+  <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden">
+    <button
+      onClick={onToggle}
+      className="w-full px-6 py-4 flex items-center justify-between text-left hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors rounded-t-lg focus:outline-none">
+      <h2 className="text-lg font-semibold text-gray-900 dark:text-white">{title}</h2>
+      {isExpanded ? (
+        <ChevronDown className="h-5 w-5 text-gray-500 dark:text-gray-400" />
+      ) : (
+        <ChevronRight className="h-5 w-5 text-gray-500 dark:text-gray-400" />
+      )}
+    </button>
+    {isExpanded && (
+      <div className="p-6 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">{children}</div>
+    )}
+  </div>
+);
+
+export default CollapsibleSection;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/StyleSettingsPage.tsx b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/StyleSettingsPage.tsx
new file mode 100644
index 000000000..4df0597cf
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/StyleSettingsPage.tsx
@@ -0,0 +1,2239 @@
+import { useState, useEffect, useCallback, useRef, useMemo } from "react";
+import { useSearchParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import {
+  AlertCircle,
+  ArrowLeft,
+  CheckCircle2,
+  ExternalLink,
+  Eye,
+  EyeOff,
+  FileText,
+  History,
+  Image,
+  LayoutTemplate,
+  List,
+  Loader,
+  Maximize2,
+  Menu,
+  PanelLeft,
+  PanelLeftClose,
+  Palette,
+  RefreshCw,
+  RotateCcw,
+  Save,
+  Search,
+  Sparkles,
+  Type,
+  X,
+} from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import { toast } from "sonner";
+import { TemplateService } from "@/user-management/services/api/templateService";
+import {
+  TemplateResource,
+  TemplateSampleSetting,
+  TemplateSettingTypeGroup,
+  TemplateSampleFileInfo,
+} from "@/user-management/services/TemplateConfiguration/types/templateTypes";
+import { useHeaderFooterPresigned } from "@/record-management/components/hooks/useHeaderFooterPresigned";
+import { SettingHistoryModal } from "./components/SettingHistoryModal";
+import { StyleSettingsEditor } from "./components/StyleSettingsEditor";
+import { isFontSetting } from "./components/FontSettingsEditor";
+import {
+  HeaderFooterFileInfo,
+  HeaderFooterResponseDto,
+} from "@/user-management/services/api/headerFooterService";
+import { getDefaultSampleData } from "./utils/styleSettingsConstants";
+import { cssStringToObject } from "./utils/cssConversion";
+import {
+  buildSampleResources,
+} from "./utils/templateSamplePayloadUtils";
+import {
+  buildBulkSavePayload,
+  buildSettingBaselines,
+  buildSettingsPayloadItems,
+  filterChangedSettingOverrides,
+  finalizePreviewOverrides,
+  type SettingBaseline,
+} from "./utils/templateSettingsPayload";
+import { useListBulletResources } from "./hooks/useListBulletResources";
+import { cn } from "@/shared/lib/utils";
+import { useDebounce } from "../components/content/useDebounce";
+import { UnsavedChangesModal } from "./components/UnsavedChangesModal";
+import { ResetAllDefaultsModal } from "./components/ResetAllDefaultsModal";
+import { LetterLabelFieldEditor } from "./components/LetterLabelFieldEditor";
+import {
+  getLetterLabelKeysForCategory,
+  isLetterLabelsSetting,
+  LETTER_LABEL_DISPLAY_NAMES,
+  normalizeLetterLabelsValue,
+  type LetterLabelEntry,
+  type LetterLabelKey,
+  type LetterLabelsText,
+} from "./utils/letterLabelsConstants";
+import {
+  PageMarginEditor,
+  isPageMarginSetting,
+  normalizePageMarginValue,
+  type PageMarginValue,
+} from "./components/PageMarginEditor";
+import {
+  LayoutConfigEditor,
+  isLayoutConfigSetting,
+  normalizeLayoutConfigValue,
+  type LetterLayoutConfigValue,
+} from "./components/LayoutConfigEditor";
+import { LETTER_ASSET_PLACEMENT_ELEMENT_ID } from "./components/LetterAssetsPlacementCanvas";
+import {
+  StyleSettingPanel,
+  StyleSettingSelect,
+  StyleSettingsSidebar,
+  StyleSettingsSidebarItem,
+  STYLE_INPUT_CLASS,
+} from "./components/styleSettingsUi";
+
+const EMPTY_SELECT_VALUE = "__none__";
+
+const toTemplateSampleFileInfo = (
+  fileInfo: HeaderFooterFileInfo,
+): TemplateSampleFileInfo => ({
+  bucket: "",
+  originalname: fileInfo.originalname,
+  contentType: fileInfo.contentType,
+  fileName: fileInfo.fileName,
+  size: fileInfo.size,
+});
+
+const disclosureListStyleImage = (): string => {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M4 2v12l10-6z"/></svg>`;
+  return `url('data:image/svg+xml;base64,${btoa(svg)}')`;
+};
+
+function cssValueToPreviewObject(cssString: string): Record<string, string> {
+  const valueObj = cssStringToObject(cssString);
+  if (valueObj["list-style"] === "disclosure-closed") {
+    valueObj["list-style-image"] = disclosureListStyleImage();
+  }
+  return valueObj;
+}
+
+function resolveGlobalDefaultSettingValue(
+  setting: TemplateSampleSetting,
+): TemplateSampleSetting["value"] {
+  const defaultRow = setting.templateSettingValues?.find(
+    (row) => row.unitId == null,
+  );
+  const defaultValue = defaultRow?.value ?? {};
+
+  if (isLetterLabelsSetting(setting.code)) {
+    return normalizeLetterLabelsValue(defaultValue) as TemplateSampleSetting["value"];
+  }
+  if (isPageMarginSetting(setting.code)) {
+    return normalizePageMarginValue(defaultValue) as TemplateSampleSetting["value"];
+  }
+  if (isLayoutConfigSetting(setting.code)) {
+    return normalizeLayoutConfigValue(defaultValue) as TemplateSampleSetting["value"];
+  }
+  if (typeof defaultValue === "object" && defaultValue !== null) {
+    return Object.entries(defaultValue)
+      .filter(([, value]) => value !== null && value !== undefined && value !== "null")
+      .map(([key, value]) => `${key}: ${value};`)
+      .join(" ");
+  }
+  if (typeof defaultValue === "string") {
+    return defaultValue;
+  }
+  return "";
+}
+
+function resolveGlobalDefaultResourceId(
+  setting: TemplateSampleSetting,
+): string | null {
+  const defaultRow = setting.templateSettingValues?.find(
+    (row) => row.unitId == null,
+  );
+  return defaultRow?.resourceId ?? null;
+}
+
+// ---------------------------------------------------------------------------
+// Unsaved Changes Indicator Component
+// ---------------------------------------------------------------------------
+const UnsavedChangesIndicator: React.FC<{ visible: boolean }> = ({
+  visible,
+}) => {
+  if (!visible) return null;
+
+  return (
+    <div className="flex items-center gap-2 text-amber-600">
+      <div className="w-2 h-2 rounded-full bg-amber-600 animate-pulse" />
+      <span className="text-sm font-medium">Unsaved changes</span>
+    </div>
+  );
+};
+
+const formatSettingLabel = (code: string) =>
+  code
+    .replace(/^letter-/, "")
+    .replace(/-/g, " ")
+    .replace(/\b\w/g, (char) => char.toUpperCase());
+
+const CATEGORY_ICONS: Record<string, LucideIcon> = {
+  header: Image,
+  footer: Image,
+  subject: FileText,
+  body: Type,
+  receiver: FileText,
+  "prefix-suffix": Sparkles,
+  cc: List,
+  list: List,
+  fonts: Type,
+  "page-margin": Maximize2,
+  layout: LayoutTemplate,
+  "reference-number": FileText,
+  other: Palette,
+};
+
+// ---------------------------------------------------------------------------
+// PDF Preview Panel Component
+// ---------------------------------------------------------------------------
+interface PDFPreviewPanelProps {
+  pdfUrl: string | null;
+  loading: boolean;
+  error: string | null;
+  onApply: () => void;
+  livePreviewEnabled: boolean;
+}
+
+const PDFPreviewPanel: React.FC<PDFPreviewPanelProps> = ({
+  pdfUrl,
+  loading,
+  error,
+  onApply,
+  livePreviewEnabled,
+}) => {
+  const { t } = useTranslation();
+  const [iframeLoading, setIframeLoading] = useState(true);
+  const [iframeError, setIframeError] = useState(false);
+
+  useEffect(() => {
+    if (pdfUrl) {
+      setIframeLoading(true);
+      setIframeError(false);
+    }
+  }, [pdfUrl]);
+
+  const handleIframeLoad = () => setIframeLoading(false);
+  const handleIframeError = () => {
+    setIframeLoading(false);
+    setIframeError(true);
+  };
+
+  return (
+    <div className="flex h-full min-h-0 flex-col bg-white dark:bg-gray-900">
+      <div className="shrink-0 border-b border-gray-200 p-4 dark:border-gray-700">
+        <div className="mb-3 flex items-center justify-between">
+          <div>
+            <h2 className="text-sm font-semibold text-gray-900 dark:text-white">
+              {t("template.pdfPreview", "PDF Preview")}
+            </h2>
+            <p className="text-xs text-gray-500 dark:text-gray-400">
+              {livePreviewEnabled
+                ? t("template.autoRefreshEnabled", "Auto refresh is enabled")
+                : t("template.manualRefreshEnabled", "Manual refresh")}
+            </p>
+          </div>
+          {pdfUrl && (
+            <a
+              href={pdfUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-gray-200 text-gray-600 transition-colors hover:bg-gray-50 hover:text-purple-700 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
+              title={t("template.openInNewTab", "Open in new tab")}
+            >
+              <ExternalLink className="h-4 w-4" />
+            </a>
+          )}
+        </div>
+        <button
+          onClick={onApply}
+          disabled={loading}
+          className="flex w-full items-center justify-center gap-2 rounded-lg bg-purple-600 px-4 py-2 text-white transition-colors hover:bg-purple-700 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-purple-500"
+        >
+          {loading ? (
+            <Loader className="h-4 w-4 animate-spin" />
+          ) : (
+            <RefreshCw className="h-4 w-4" />
+          )}
+          {loading
+            ? t("template.generatingPreview", "Generating...")
+            : t("template.applyChanges", "Apply Changes")}
+        </button>
+      </div>
+
+      {error && (
+        <div className="mx-4 mt-4 shrink-0 rounded-lg border border-red-200 bg-red-50 p-3">
+          <p className="text-sm text-red-800">{error}</p>
+          <button
+            onClick={onApply}
+            className="mt-2 text-sm text-red-600 hover:text-red-800 font-medium underline"
+          >
+            {t("common.retry", "Retry")}
+          </button>
+        </div>
+      )}
+
+      <div className="relative min-h-0 flex-1 overflow-hidden">
+        {pdfUrl ? (
+          <>
+            {iframeLoading && (
+              <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/75 dark:bg-gray-900/75">
+                <div className="flex flex-col items-center gap-2">
+                  <Loader className="h-8 w-8 animate-spin text-purple-600" />
+                  <span className="text-sm text-gray-600 dark:text-gray-300">
+                    {t("template.loadingPdf", "Loading PDF...")}
+                  </span>
+                </div>
+              </div>
+            )}
+
+            {iframeError && (
+              <div className="absolute inset-0 flex items-center justify-center bg-gray-50 dark:bg-gray-900">
+                <div className="p-6 text-center">
+                  <AlertCircle className="mx-auto mb-3 h-8 w-8 text-red-500" />
+                  <p className="mb-2 font-medium text-red-600 dark:text-red-400">
+                    {t("template.pdfLoadError", "Failed to load PDF preview")}
+                  </p>
+                  <a
+                    href={pdfUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-sm text-purple-600 underline hover:text-purple-700"
+                  >
+                    {t("template.openInNewTab", "Open in new tab")}
+                  </a>
+                </div>
+              </div>
+            )}
+
+            <iframe
+              src={pdfUrl}
+              className="absolute inset-0 h-full w-full border-0 bg-white"
+              title="PDF Preview"
+              onLoad={handleIframeLoad}
+              onError={handleIframeError}
+            />
+          </>
+        ) : (
+          <div className="absolute inset-0 flex items-center justify-center bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-400">
+            <div className="max-w-sm px-6 text-center">
+              <FileText className="mx-auto mb-4 h-12 w-12 text-gray-300 dark:text-gray-600" />
+              <p className="font-medium text-gray-700 dark:text-gray-200">
+                {t("template.previewNotGenerated", "Preview not generated yet")}
+              </p>
+              <p className="mt-1 text-sm">
+                {t(
+                  "template.clickApplyToPreview",
+                  'Click "Apply Changes" to generate preview',
+                )}
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Main Component Props
+// ---------------------------------------------------------------------------
+export interface StyleSettingsPageProps {
+  templateId: string;
+  unitId: string;
+  onBack: () => void;
+}
+
+// ---------------------------------------------------------------------------
+// Main Component
+// ---------------------------------------------------------------------------
+export const StyleSettingsPage: React.FC<StyleSettingsPageProps> = ({
+  templateId,
+  unitId,
+  onBack,
+}) => {
+  const { t, i18n } = useTranslation();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [showUnsavedModal, setShowUnsavedModal] = useState(false);
+  const [showResetModal, setShowResetModal] = useState(false);
+  const [resetInProgress, setResetInProgress] = useState(false);
+  const pendingNavigation = useRef<(() => void) | null>(null);
+  const { data: headerFooterData, isLoading: isHeaderFooterLoading } =
+    useHeaderFooterPresigned(unitId);
+
+  // --- State ------------------------------------------------------------
+  const [template, setTemplate] = useState<TemplateResource | null>(null);
+  const [settings, setSettings] = useState<TemplateSampleSetting[]>([]);
+  const [settingGroups, setSettingGroups] = useState<
+    TemplateSettingTypeGroup[]
+  >([]);
+  const [settingsLoading, setSettingsLoading] = useState(false);
+  const [pdfUrl, setPdfUrl] = useState<string | null>(null);
+  const [previewLoading, setPreviewLoading] = useState(false);
+  const [selectedHeaderId, setSelectedHeaderId] = useState<string>("");
+  const [selectedFooterId, setSelectedFooterId] = useState<string>("");
+  const [headers, setHeaders] = useState<HeaderFooterResponseDto[]>([]);
+  const [footers, setFooters] = useState<HeaderFooterResponseDto[]>([]);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+  const [mobileNavOpen, setMobileNavOpen] = useState(false);
+  const [layoutPlacementFocusNonce, setLayoutPlacementFocusNonce] = useState(0);
+  const [categoryNavCollapsed, setCategoryNavCollapsed] = useState(false);
+  const [livePreviewEnabled, setLivePreviewEnabled] = useState(true);
+  const [isFirstLoad, setIsFirstLoad] = useState(true);
+  const [searchTerm, setSearchTerm] = useState("");
+  const lastPreviewedKey = useRef<string | null>(null);
+  const [useDefaultSettings, setUseDefaultSettings] = useState<
+    Record<string, boolean>
+  >({});
+  const [previewLanguage, setPreviewLanguage] = useState<"am" | "en">("am");
+  const baselineRef = useRef<Record<string, SettingBaseline>>({});
+  const settingsLoadedRef = useRef(false);
+  const [historySetting, setHistorySetting] =
+    useState<TemplateSampleSetting | null>(null);
+  const [resourceIds, setResourceIds] = useState<Record<string, string | null>>(
+    {},
+  );
+  const { resources: bulletResources } = useListBulletResources();
+
+  const settingRefs = useRef<Record<string, HTMLDivElement | null>>({});
+
+  const buildSettingsPayload = useCallback(() => {
+    return buildSettingsPayloadItems(
+      settings,
+      resourceIds,
+      bulletResources,
+      cssValueToPreviewObject,
+    );
+  }, [settings, resourceIds, bulletResources]);
+
+  const buildPreviewSettingsPayload = useCallback(() => {
+    const allItems = buildSettingsPayload();
+    const changed = filterChangedSettingOverrides(
+      allItems,
+      baselineRef.current,
+      useDefaultSettings,
+    );
+    return finalizePreviewOverrides(
+      changed,
+      useDefaultSettings,
+      baselineRef.current,
+    );
+  }, [buildSettingsPayload, useDefaultSettings]);
+
+  const buildResourcesPayload = useCallback(() => {
+    const previewItems = buildPreviewSettingsPayload();
+    return buildSampleResources(
+      previewItems.map((item) => item.resourceId),
+      bulletResources,
+    );
+  }, [buildPreviewSettingsPayload, bulletResources]);
+
+  // --- Helper: Determine category from setting code --------------------
+  const getCategoryForSetting = useCallback((code: string): string => {
+    const lower = code.trim().toLowerCase();
+    if (isLetterLabelsSetting(lower)) return "";
+    if (lower === "letter-layout-config") return "layout";
+    if (lower.includes("header")) return "header";
+    if (lower.includes("footer")) return "footer";
+    if (lower.includes("subject")) return "subject";
+    if (lower.includes("body") || lower.includes("content")) return "body";
+    if (lower.includes("receiver")) return "receiver";
+    if (lower.includes("prefix") || lower.includes("suffix"))
+      return "prefix-suffix";
+    if (lower.includes("cc")) return "cc";
+    if (lower.includes("list")) return "list";
+    if (lower === "letter-fonts") return "fonts";
+    if (lower === "letter-page-margin") return "page-margin";
+    if (lower.includes("reference-number")) return "reference-number";
+    return "other";
+  }, []);
+
+  // Manual mapping for settings that should appear in additional categories
+  const multiCategorySettings: Record<string, string[]> = {
+    "letter-list-style": ["receiver"],
+    "letter-cc-list-style": ["cc"],
+    "letter-for-your-reference-list-style": ["cc"],
+    "letter-prefix-style": ["prefix-suffix"],
+    "letter-cc-prefix-style": ["cc", "prefix-suffix"],
+  };
+
+  // Helper to get all categories a setting belongs to
+  const getSettingCategories = useCallback((settingCode: string): string[] => {
+    if (isLetterLabelsSetting(settingCode)) return [];
+    if (multiCategorySettings[settingCode]) {
+      return multiCategorySettings[settingCode];
+    }
+    const category = getCategoryForSetting(settingCode);
+    return category ? [category] : [];
+  }, [getCategoryForSetting]);
+
+  // --- Build categories from settings ----------------------------------
+  const resolvedPageMargin = useMemo((): PageMarginValue => {
+    const marginSetting = settings.find((s) => isPageMarginSetting(s.code));
+    if (!marginSetting) {
+      return normalizePageMarginValue(null);
+    }
+    const usesDefault = useDefaultSettings[marginSetting.id] ?? true;
+    if (usesDefault) {
+      const defaultRow = marginSetting.templateSettingValues?.find(
+        (row) => row.unitId == null,
+      );
+      return normalizePageMarginValue(defaultRow?.value ?? marginSetting.value);
+    }
+    return normalizePageMarginValue(marginSetting.value);
+  }, [settings, useDefaultSettings]);
+
+  const categories = useMemo(() => {
+    const locale = i18n.language?.startsWith("am") ? "am" : "en";
+    const apiSections = settingGroups.flatMap((group) => group.sections || []);
+    if (apiSections.length > 0) {
+      const apiCategories = apiSections.map((section) => ({
+        code: section.code,
+        label: section.name?.[locale] || section.name?.en || section.code,
+        settingIds: section.settings.map((setting) => setting.id),
+      }));
+      const groupedSettingIds = new Set(
+        apiCategories.flatMap((category) => category.settingIds),
+      );
+
+      // JSON configuration settings may not belong to the backend's CSS
+      // sections. Keep them discoverable even when grouped navigation exists.
+      settings
+        .filter((setting) => !groupedSettingIds.has(setting.id))
+        .forEach((setting) => {
+          getSettingCategories(setting.code).forEach((code) => {
+            const existing = apiCategories.find(
+              (category) => category.code === code,
+            );
+            if (existing) {
+              existing.settingIds.push(setting.id);
+            } else {
+              apiCategories.push({
+                code,
+                label:
+                  code === "layout"
+                    ? t("template.letterLayout", "Letter Layout")
+                    : formatSettingLabel(code),
+                settingIds: [setting.id],
+              });
+            }
+          });
+        });
+
+      return apiCategories.filter((category) => category.code !== "labels");
+    }
+
+    const categoryMap = new Map<
+      string,
+      { code: string; label: string; settingIds: string[] }
+    >();
+
+    settings.forEach((setting) => {
+      const catCodes = getSettingCategories(setting.code);
+      catCodes.forEach((catCode) => {
+        if (!categoryMap.has(catCode)) {
+          const labelMap: Record<string, string> = {
+            header: t("template.headerStyle", "Header Style"),
+            footer: t("template.footerStyle", "Footer Style"),
+            subject: t("template.subjectStyle", "Subject Style"),
+            body: t("template.bodyStyle", "Body Style"),
+            receiver: t("template.receiverStyle", "Receiver Style"),
+            "prefix-suffix": t("template.prefixSuffix", "Prefix / Suffix"),
+            cc: t("template.ccStyles", "CC Styles"),
+            list: t("template.listStyle", "List Style"),
+            fonts: t("template.fonts", "Fonts"),
+            "page-margin": t("template.pageMargin", "Page Margins"),
+            layout: t("template.letterLayout", "Letter Layout"),
+            "reference-number": t(
+              "template.referenceNumberStyles",
+              "Reference Number Styles",
+            ),
+            other: t("template.other", "Other"),
+          };
+          categoryMap.set(catCode, {
+            code: catCode,
+            label: labelMap[catCode] || catCode,
+            settingIds: [],
+          });
+        }
+        categoryMap.get(catCode)!.settingIds.push(setting.id);
+      });
+    });
+
+    return Array.from(categoryMap.values());
+  }, [settings, t, getSettingCategories, settingGroups, i18n.language]);
+
+  const sidebarCategories = useMemo(
+    () =>
+      categories.filter(
+        (category) =>
+          category.code !== "fonts" && category.code !== "labels",
+      ),
+    [categories],
+  );
+
+  const letterLabelsSetting = useMemo(
+    () => settings.find((setting) => isLetterLabelsSetting(setting.code)),
+    [settings],
+  );
+
+  const normalizedLetterLabels = useMemo(
+    () => normalizeLetterLabelsValue(letterLabelsSetting?.value),
+    [letterLabelsSetting?.value],
+  );
+
+  const categoryMatchesSearch = useCallback(
+    (
+      categoryCode: string,
+      categoryLabel: string,
+      settingIds: string[],
+      query: string,
+    ): boolean => {
+      if (!query) return true;
+      if (
+        categoryCode.toLowerCase().includes(query) ||
+        categoryLabel.toLowerCase().includes(query)
+      ) {
+        return true;
+      }
+
+      const settingCodes = settingIds
+        .map((id) => settings.find((setting) => setting.id === id)?.code)
+        .filter((code): code is string => Boolean(code));
+
+      for (const id of settingIds) {
+        const setting = settings.find((item) => item.id === id);
+        if (!setting || isLetterLabelsSetting(setting.code)) continue;
+        const value = typeof setting.value === "string" ? setting.value : "";
+        if (
+          setting.code.toLowerCase().includes(query) ||
+          formatSettingLabel(setting.code).toLowerCase().includes(query) ||
+          value.toLowerCase().includes(query)
+        ) {
+          return true;
+        }
+      }
+
+      for (const labelKey of getLetterLabelKeysForCategory(
+        categoryCode,
+        settingCodes,
+      )) {
+        const names = LETTER_LABEL_DISPLAY_NAMES[labelKey];
+        const entry = normalizedLetterLabels[labelKey];
+        if (
+          labelKey.toLowerCase().includes(query) ||
+          names.en.toLowerCase().includes(query) ||
+          names.am.toLowerCase().includes(query) ||
+          entry.en.toLowerCase().includes(query) ||
+          entry.am.toLowerCase().includes(query)
+        ) {
+          return true;
+        }
+      }
+
+      return false;
+    },
+    [settings, normalizedLetterLabels],
+  );
+
+  const filteredSidebarCategories = useMemo(() => {
+    const query = searchTerm.trim().toLowerCase();
+    if (!query) return sidebarCategories;
+    return sidebarCategories.filter((category) =>
+      categoryMatchesSearch(
+        category.code,
+        category.label,
+        category.settingIds,
+        query,
+      ),
+    );
+  }, [sidebarCategories, searchTerm, categoryMatchesSearch]);
+
+  const effectiveSelectedCategory = useMemo(() => {
+    if (!selectedCategory) return null;
+    const query = searchTerm.trim().toLowerCase();
+    if (!query || filteredSidebarCategories.length === 0) {
+      return selectedCategory;
+    }
+    if (
+      filteredSidebarCategories.some(
+        (category) => category.code === selectedCategory,
+      )
+    ) {
+      return selectedCategory;
+    }
+    return filteredSidebarCategories[0]?.code ?? selectedCategory;
+  }, [searchTerm, filteredSidebarCategories, selectedCategory]);
+
+  const showHeaderFooterSection = useMemo(() => {
+    const query = searchTerm.trim().toLowerCase();
+    if (!query) return true;
+    return effectiveSelectedCategory === "layout";
+  }, [searchTerm, effectiveSelectedCategory]);
+
+  const editableSettings = useMemo(
+    () => settings.filter((setting) => !isFontSetting(setting.code)),
+    [settings],
+  );
+
+  const totalCustomSettings = useMemo(
+    () =>
+      Object.values(useDefaultSettings).filter((isDefault) => !isDefault)
+        .length,
+    [useDefaultSettings],
+  );
+
+  const categoryCustomCounts = useMemo(() => {
+    const counts = new Map<string, number>();
+    const labelsCustomized =
+      letterLabelsSetting &&
+      useDefaultSettings[letterLabelsSetting.id] === false;
+
+    categories.forEach((category) => {
+      let customCount = category.settingIds.filter(
+        (id) => useDefaultSettings[id] === false,
+      ).length;
+      if (
+        labelsCustomized &&
+        getLetterLabelKeysForCategory(
+          category.code,
+          category.settingIds
+            .map((id) => settings.find((setting) => setting.id === id)?.code)
+            .filter((code): code is string => Boolean(code)),
+        ).length > 0
+      ) {
+        customCount += 1;
+      }
+      counts.set(category.code, customCount);
+    });
+    return counts;
+  }, [categories, useDefaultSettings, letterLabelsSetting, settings]);
+
+  const customizationProgress = useMemo(() => {
+    if (editableSettings.length === 0) return 0;
+    return Math.round((totalCustomSettings / editableSettings.length) * 100);
+  }, [editableSettings.length, totalCustomSettings]);
+
+  const hasSettingsToReset = useMemo(() => {
+    if (settings.length === 0) return false;
+    if (hasUnsavedChanges) return true;
+    return settings.some(
+      (setting) =>
+        setting.isUnitOverride || useDefaultSettings[setting.id] === false,
+    );
+  }, [settings, hasUnsavedChanges, useDefaultSettings]);
+
+  const selectedCategorySettingCodes = useMemo(() => {
+    if (!effectiveSelectedCategory) return [] as string[];
+    const category = sidebarCategories.find(
+      (item) => item.code === effectiveSelectedCategory,
+    );
+    if (!category) return [];
+    return category.settingIds
+      .map((id) => settings.find((setting) => setting.id === id)?.code)
+      .filter((code): code is string => Boolean(code));
+  }, [sidebarCategories, effectiveSelectedCategory, settings]);
+
+  const selectedCategoryLabelKeys = useMemo(() => {
+    if (!effectiveSelectedCategory) return [] as LetterLabelKey[];
+    const keys = getLetterLabelKeysForCategory(
+      effectiveSelectedCategory,
+      selectedCategorySettingCodes,
+    );
+    const query = searchTerm.trim().toLowerCase();
+    if (!query) return keys;
+
+    return keys.filter((key) => {
+      const names = LETTER_LABEL_DISPLAY_NAMES[key];
+      const entry = normalizedLetterLabels[key];
+      return (
+        key.toLowerCase().includes(query) ||
+        names.en.toLowerCase().includes(query) ||
+        names.am.toLowerCase().includes(query) ||
+        entry.en.toLowerCase().includes(query) ||
+        entry.am.toLowerCase().includes(query)
+      );
+    });
+  }, [effectiveSelectedCategory, searchTerm, normalizedLetterLabels, selectedCategorySettingCodes]);
+
+  const letterLabelsIsDefault = letterLabelsSetting
+    ? (useDefaultSettings[letterLabelsSetting.id] ?? true)
+    : true;
+
+  const selectedCategorySettings = useMemo(() => {
+    if (!effectiveSelectedCategory || effectiveSelectedCategory === "fonts") return [];
+    const query = searchTerm.trim().toLowerCase();
+    const categorySettingIds = new Set(
+      sidebarCategories.find((category) => category.code === effectiveSelectedCategory)
+        ?.settingIds || [],
+    );
+    return editableSettings.filter((setting) => {
+      if (isLetterLabelsSetting(setting.code)) return false;
+      const isInCategory = categorySettingIds.has(setting.id);
+      if (!isInCategory) return false;
+      if (!query) return true;
+      const value = typeof setting.value === "string" ? setting.value : "";
+      return (
+        setting.code.toLowerCase().includes(query) ||
+        formatSettingLabel(setting.code).toLowerCase().includes(query) ||
+        value.toLowerCase().includes(query)
+      );
+    });
+  }, [editableSettings, sidebarCategories, effectiveSelectedCategory, searchTerm]);
+
+  const selectedCategoryVisibleCount =
+    selectedCategorySettings.length + selectedCategoryLabelKeys.length;
+
+  const getCategoryVisibleItemCount = useCallback(
+    (categoryCode: string) => {
+      const category = categories.find((item) => item.code === categoryCode);
+      const settingsCount =
+        category?.settingIds.filter((id) => {
+          const setting = settings.find((item) => item.id === id);
+          return setting && !isLetterLabelsSetting(setting.code);
+        }).length ?? 0;
+      return settingsCount + getLetterLabelKeysForCategory(
+        categoryCode,
+        category?.settingIds
+          .map((id) => settings.find((setting) => setting.id === id)?.code)
+          .filter((code): code is string => Boolean(code)) ?? [],
+      ).length;
+    },
+    [categories, settings],
+  );
+
+  // --- Load template metadata -------------------------------------------
+  const loadTemplate = useCallback(async () => {
+    try {
+      const data = await TemplateService.getTemplate(templateId);
+      setTemplate(data);
+    } catch (err) {
+      console.error("Error loading template:", err);
+      setError(t("error.loadingTemplate", "Error loading template"));
+    }
+  }, [templateId, t]);
+
+  // --- Load style settings ----------------------------------------------
+  const loadSettings = useCallback(async () => {
+    try {
+      setSettingsLoading(true);
+      setError(null);
+
+      const response =
+        await TemplateService.getTemplateSettingsByUnit(templateId, unitId);
+      const responseGroups = Array.isArray(response?.groups)
+        ? response.groups
+        : [];
+      setSettingGroups(responseGroups);
+
+      // Non-CSS JSON settings may be returned as unsectioned group settings
+      // instead of in the legacy top-level items collection.
+      const fetchedSettings = Array.from(
+        new Map(
+          [
+            ...(Array.isArray(response?.items) ? response.items : []),
+            ...responseGroups.flatMap((group) => group.settings || []),
+            ...responseGroups.flatMap((group) =>
+              (group.sections || []).flatMap(
+                (section) => section.settings || [],
+              ),
+            ),
+          ].map((setting) => [setting.id, setting]),
+        ).values(),
+      );
+
+      const processedSettings = fetchedSettings
+        .map((setting: any) => {
+          if (!setting.id || !setting.code) return null;
+
+          let defaultValue: any = undefined;
+          if (setting.value !== null && setting.value !== undefined) {
+            defaultValue = setting.value;
+          } else if (setting.templateSettingValues?.length > 0) {
+            const valueWithUnitId = setting.templateSettingValues.find(
+              (tv: any) => tv.unitId !== null && tv.unitId !== undefined,
+            );
+            if (valueWithUnitId?.value != null) {
+              defaultValue = valueWithUnitId.value;
+            } else {
+              const fallback = setting.templateSettingValues.find(
+                (tv: any) => tv.value !== null && tv.value !== undefined,
+              );
+              defaultValue = fallback?.value;
+            }
+          }
+
+          // Typed (non-CSS) settings keep their object value intact.
+          if (isLetterLabelsSetting(setting.code)) {
+            return {
+              ...setting,
+              value: normalizeLetterLabelsValue(defaultValue),
+            };
+          }
+          if (isPageMarginSetting(setting.code)) {
+            return {
+              ...setting,
+              value: normalizePageMarginValue(defaultValue),
+            };
+          }
+          if (isLayoutConfigSetting(setting.code)) {
+            return {
+              ...setting,
+              value: normalizeLayoutConfigValue(defaultValue),
+            };
+          }
+
+          let cssString = "";
+          if (
+            typeof defaultValue === "object" &&
+            defaultValue !== null &&
+            Object.keys(defaultValue).length > 0
+          ) {
+            cssString = Object.entries(defaultValue)
+              .filter(([, v]) => v !== null && v !== undefined && v !== "null")
+              .map(([key, value]) => `${key}: ${value};`)
+              .join(" ");
+          } else if (typeof defaultValue === "string" && defaultValue.trim()) {
+            cssString = defaultValue;
+          }
+
+          return { ...setting, value: cssString };
+        })
+        .filter((s: any) => s !== null);
+
+      setSettings(processedSettings);
+      const loadedResourceIds: Record<string, string | null> = {};
+      processedSettings.forEach((setting) => {
+        if (!setting) return;
+        const unitValue = setting.templateSettingValues?.find(
+          (value: NonNullable<TemplateSampleSetting["templateSettingValues"]>[number]) =>
+            value.unitId != null,
+        );
+        const defaultValue = setting.templateSettingValues?.find(
+          (value: NonNullable<TemplateSampleSetting["templateSettingValues"]>[number]) =>
+            value.unitId == null,
+        );
+        loadedResourceIds[setting.id] =
+          setting.resourceId ??
+          unitValue?.resourceId ??
+          defaultValue?.resourceId ??
+          null;
+      });
+      setResourceIds(loadedResourceIds);
+      setHasUnsavedChanges(false);
+      setPdfUrl(null);
+      lastPreviewedKey.current = null;
+      setIsFirstLoad(true);
+
+      const defaultMap: Record<string, boolean> = {};
+      processedSettings.forEach((s) => {
+        if (s) defaultMap[s.id] = !s.isUnitOverride;
+      });
+      setUseDefaultSettings(defaultMap);
+
+      const initialPayload = buildSettingsPayloadItems(
+        processedSettings,
+        loadedResourceIds,
+        bulletResources,
+        cssValueToPreviewObject,
+      );
+      baselineRef.current = buildSettingBaselines(
+        initialPayload,
+        processedSettings,
+      );
+      settingsLoadedRef.current = false;
+    } catch (err) {
+      console.error("Error loading settings:", err);
+      setError(t("error.loadingSettings", "Error loading style settings"));
+    } finally {
+      setSettingsLoading(false);
+    }
+  }, [templateId, unitId, t, bulletResources]);
+
+  // --- Setting change handler --------------------------------------------
+  const handleSettingChange = useCallback(
+    (index: number, cssString: string) => {
+      setSettings((prev) => {
+        const newSettings = [...prev];
+        newSettings[index] = { ...newSettings[index], value: cssString };
+        return newSettings;
+      });
+      const settingId = settings[index]?.id;
+      if (settingId) {
+        setUseDefaultSettings((prev) => ({ ...prev, [settingId]: false }));
+      }
+      setHasUnsavedChanges(true);
+    },
+    [settings],
+  );
+
+  // --- Typed setting change handlers (labels / margins / layout) --------
+  const handleTypedSettingChange = useCallback(
+    (
+      index: number,
+      value: LetterLabelsText | PageMarginValue | LetterLayoutConfigValue,
+    ) => {
+      setSettings((prev) => {
+        const newSettings = [...prev];
+        newSettings[index] = { ...newSettings[index], value: value as any };
+        return newSettings;
+      });
+      const settingId = settings[index]?.id;
+      if (settingId) {
+        setUseDefaultSettings((prev) => ({ ...prev, [settingId]: false }));
+      }
+      setHasUnsavedChanges(true);
+    },
+    [settings],
+  );
+
+  const handleLetterLabelsChange = useCallback(
+    (index: number, labels: LetterLabelsText) =>
+      handleTypedSettingChange(index, labels),
+    [handleTypedSettingChange],
+  );
+
+  const handleSingleLetterLabelChange = useCallback(
+    (labelKey: LetterLabelKey, entry: LetterLabelEntry) => {
+      const index = settings.findIndex((setting) =>
+        isLetterLabelsSetting(setting.code),
+      );
+      if (index < 0) return;
+      const labels = normalizeLetterLabelsValue(settings[index].value);
+      handleLetterLabelsChange(index, { ...labels, [labelKey]: entry });
+    },
+    [settings, handleLetterLabelsChange],
+  );
+
+  const handlePageMarginChange = useCallback(
+    (index: number, margins: PageMarginValue) =>
+      handleTypedSettingChange(index, margins),
+    [handleTypedSettingChange],
+  );
+
+  const handleLayoutConfigChange = useCallback(
+    (index: number, layout: LetterLayoutConfigValue) =>
+      handleTypedSettingChange(index, layout),
+    [handleTypedSettingChange],
+  );
+
+  const handleResourceIdChange = useCallback(
+    (settingId: string, resourceId: string | null) => {
+      setResourceIds((previous) => ({ ...previous, [settingId]: resourceId }));
+      setUseDefaultSettings((previous) => ({
+        ...previous,
+        [settingId]: false,
+      }));
+      setHasUnsavedChanges(true);
+    },
+    [],
+  );
+
+  // --- Toggle default ---------------------------------------------------
+  const handleToggleDefault = useCallback(
+    (settingId: string) => {
+      const willUseDefault = !(useDefaultSettings[settingId] ?? true);
+
+      setUseDefaultSettings((prev) => {
+        const newValue = !prev[settingId];
+        if (newValue) {
+          const settingIndex = settings.findIndex((s) => s.id === settingId);
+          if (settingIndex >= 0) {
+            const setting = settings[settingIndex];
+            const revertValue = resolveGlobalDefaultSettingValue(setting);
+            setSettings((prevSettings) => {
+              const newSettings = [...prevSettings];
+              newSettings[settingIndex] = {
+                ...newSettings[settingIndex],
+                value: revertValue as TemplateSampleSetting["value"],
+              };
+              return newSettings;
+            });
+          }
+        }
+        setHasUnsavedChanges(true);
+        return { ...prev, [settingId]: newValue };
+      });
+
+      if (willUseDefault) {
+        setResourceIds((prev) => {
+          const next = { ...prev };
+          delete next[settingId];
+          return next;
+        });
+      }
+    },
+    [settings, useDefaultSettings],
+  );
+
+  // --- Apply (generate preview) -----------------------------------------
+  const handleApply = useCallback(
+    async (options?: { dbOnly?: boolean }) => {
+      if (!templateId || !unitId) {
+        console.error("Missing templateId or unitId");
+        return;
+      }
+
+      try {
+        setPreviewLoading(true);
+        setError(null);
+
+        let headerFileInfo: HeaderFooterResponseDto["fileInfo"] | undefined;
+        if (selectedHeaderId) {
+          const selectedHeader = headers.find((h) => h.id === selectedHeaderId);
+          if (selectedHeader?.fileInfo) headerFileInfo = selectedHeader.fileInfo;
+        } else if (headers.length > 0) {
+          headerFileInfo = headers[0].fileInfo;
+        }
+
+        let footerFileInfo: HeaderFooterResponseDto["fileInfo"] | undefined;
+        if (selectedFooterId) {
+          const selectedFooter = footers.find((f) => f.id === selectedFooterId);
+          if (selectedFooter?.fileInfo) footerFileInfo = selectedFooter.fileInfo;
+        } else if (footers.length > 0) {
+          footerFileInfo = footers[0].fileInfo;
+        }
+
+        const dataPayload = {
+          ...getDefaultSampleData(previewLanguage),
+          unitId,
+          ...(headerFileInfo && {
+            header: toTemplateSampleFileInfo(headerFileInfo),
+          }),
+          ...(footerFileInfo && {
+            footer: toTemplateSampleFileInfo(footerFileInfo),
+          }),
+        };
+
+        if (options?.dbOnly) {
+          const payload = {
+            data: dataPayload,
+          };
+          const response = await TemplateService.generateSampleTemplate(
+            templateId,
+            payload,
+            unitId,
+          );
+          if (response.pdf) {
+            setPdfUrl(response.pdf);
+          } else {
+            throw new Error(t("error.noPdfInResponse", "No PDF in response"));
+          }
+          return;
+        }
+
+        const previewItems = buildPreviewSettingsPayload();
+        const payload = {
+          data: dataPayload,
+          ...(previewItems.length > 0
+            ? {
+                settings: previewItems.map((item) => ({
+                  id: item.id,
+                  code: item.code,
+                  value: item.value,
+                  resourceId: item.resourceId,
+                })),
+              }
+            : {}),
+          resources: buildResourcesPayload(),
+        };
+
+        const response = await TemplateService.generateSampleTemplate(
+          templateId,
+          payload,
+          unitId,
+        );
+
+        if (response.pdf) {
+          setPdfUrl(response.pdf);
+        } else {
+          throw new Error(t("error.noPdfInResponse", "No PDF in response"));
+        }
+      } catch (err: unknown) {
+        const errorMessage =
+          err instanceof Error
+            ? err.message
+            : t("error.generatingPreview", "Error generating preview");
+        console.error("Error generating preview:", err);
+        setError(errorMessage);
+        toast.error(errorMessage);
+      } finally {
+        setPreviewLoading(false);
+      }
+    },
+    [
+      templateId,
+      unitId,
+      selectedHeaderId,
+      selectedFooterId,
+      headers,
+      footers,
+      previewLanguage,
+      buildPreviewSettingsPayload,
+      buildResourcesPayload,
+      t,
+    ],
+  );
+
+  // --- Save (persist to DB) ---------------------------------------------
+  const handleSave = useCallback(async () => {
+    if (!templateId) {
+      console.error("Missing templateId");
+      return;
+    }
+
+    try {
+      setSettingsLoading(true);
+      const payloadItems = buildSettingsPayload();
+      const valuesToSave = buildBulkSavePayload({
+        settings,
+        payloadItems,
+        useDefaultSettings,
+        scope: "unit",
+        baselines: baselineRef.current,
+      }).filter((item) => {
+        if (item.revertToDefault) return true;
+        const setting = settings.find((s) => s.id === item.templateSettingId);
+        if (!setting || !isFontSetting(setting.code)) return true;
+        return Boolean(item.resourceId);
+      });
+
+      if (valuesToSave.length === 0) {
+        toast.info(
+          t("template.noChangesToSave", "No setting changes to save"),
+        );
+        return;
+      }
+
+      await TemplateService.saveBulkTemplateSettingValues(valuesToSave, unitId);
+      await loadSettings();
+      setHasUnsavedChanges(false);
+      void handleApply({ dbOnly: true });
+      toast.success(
+        t("template.saveSuccess", "Style settings saved successfully"),
+      );
+    } catch (err: unknown) {
+      const errorMessage =
+        err instanceof Error
+          ? err.message
+          : t("error.savingSettings", "Error saving style settings");
+      console.error("Error saving settings:", err);
+      toast.error(errorMessage);
+    } finally {
+      setSettingsLoading(false);
+    }
+  }, [
+    templateId,
+    buildSettingsPayload,
+    settings,
+    useDefaultSettings,
+    unitId,
+    loadSettings,
+    handleApply,
+    t,
+  ]);
+
+  const handleResetAllToDefault = useCallback(async () => {
+    if (!templateId || !unitId || settings.length === 0) return;
+
+    const overridesToRevert = settings.filter((setting) => setting.isUnitOverride);
+
+    try {
+      setResetInProgress(true);
+      setSettingsLoading(true);
+      setShowResetModal(false);
+
+      const nextUseDefault: Record<string, boolean> = {};
+      const nextResourceIds: Record<string, string | null> = {};
+      const nextSettings = settings.map((setting) => {
+        nextUseDefault[setting.id] = true;
+        const defaultResourceId = resolveGlobalDefaultResourceId(setting);
+        if (defaultResourceId) {
+          nextResourceIds[setting.id] = defaultResourceId;
+        }
+        return {
+          ...setting,
+          value: resolveGlobalDefaultSettingValue(setting),
+          isUnitOverride: false,
+        };
+      });
+
+      setSettings(nextSettings);
+      setUseDefaultSettings(nextUseDefault);
+      setResourceIds(nextResourceIds);
+      setHasUnsavedChanges(false);
+      setPdfUrl(null);
+      lastPreviewedKey.current = null;
+      setIsFirstLoad(false);
+
+      if (overridesToRevert.length > 0) {
+        await TemplateService.saveBulkTemplateSettingValues(
+          overridesToRevert.map((setting) => ({
+            templateSettingId: setting.id,
+            revertToDefault: true,
+          })),
+          unitId,
+        );
+        await loadSettings();
+      }
+
+      void handleApply({ dbOnly: true });
+      toast.success(
+        t(
+          "template.resetAllSuccess",
+          "All style settings were reset to global defaults",
+        ),
+      );
+    } catch (err: unknown) {
+      const errorMessage =
+        err instanceof Error
+          ? err.message
+          : t("template.resetAllError", "Failed to reset style settings");
+      console.error("Error resetting style settings:", err);
+      toast.error(errorMessage);
+      try {
+        await loadSettings();
+      } catch {
+        // loadSettings already surfaces errors via page state
+      }
+    } finally {
+      setResetInProgress(false);
+      setSettingsLoading(false);
+    }
+  }, [templateId, unitId, settings, loadSettings, handleApply, t]);
+
+  // --- Back navigation with warning -------------------------------------
+  const handleBack = useCallback(() => {
+    if (hasUnsavedChanges) {
+      setShowUnsavedModal(true);
+      pendingNavigation.current = onBack;
+    } else {
+      onBack();
+    }
+  }, [hasUnsavedChanges, onBack]);
+
+  const handleConfirmLeave = useCallback(() => {
+    setShowUnsavedModal(false);
+    if (pendingNavigation.current) {
+      pendingNavigation.current();
+      pendingNavigation.current = null;
+    }
+  }, []);
+
+  const handleCancelLeave = useCallback(() => {
+    setShowUnsavedModal(false);
+    pendingNavigation.current = null;
+  }, []);
+  // --- Header/Footer selection handlers ---------------------------------
+  const handleHeaderChange = useCallback((headerId: string) => {
+    setSelectedHeaderId(headerId);
+    setHasUnsavedChanges(true);
+  }, []);
+
+  const handleFooterChange = useCallback((footerId: string) => {
+    setSelectedFooterId(footerId);
+    setHasUnsavedChanges(true);
+  }, []);
+
+  // --- Category selection handler ---------------------------------------
+  const scrollToLayoutAssetPlacement = useCallback(() => {
+    setLayoutPlacementFocusNonce((nonce) => nonce + 1);
+    window.requestAnimationFrame(() => {
+      document
+        .getElementById(LETTER_ASSET_PLACEMENT_ELEMENT_ID)
+        ?.scrollIntoView({ behavior: "smooth", block: "start" });
+    });
+  }, []);
+
+  const handleSelectCategory = useCallback(
+    (categoryCode: string) => {
+      setSelectedCategory(categoryCode);
+      setMobileNavOpen(false);
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          next.set("category", categoryCode);
+          return next;
+        },
+        { replace: true },
+      );
+      if (categoryCode === "layout") {
+        window.setTimeout(scrollToLayoutAssetPlacement, 150);
+        return;
+      }
+      const category = sidebarCategories.find((item) => item.code === categoryCode);
+      const categorySettingIds =
+        category?.settingIds.filter((id) => {
+          const setting = settings.find((item) => item.id === id);
+          return setting && !isLetterLabelsSetting(setting.code);
+        }) ?? [];
+      const firstSetting = settings.find((setting) =>
+        categorySettingIds.includes(setting.id),
+      );
+      if (firstSetting && settingRefs.current[firstSetting.id]) {
+        settingRefs.current[firstSetting.id]?.scrollIntoView({
+          behavior: "smooth",
+          block: "start",
+        });
+        return;
+      }
+      const firstLabelKey = getLetterLabelKeysForCategory(
+        categoryCode,
+        category?.settingIds
+          .map((id) => settings.find((setting) => setting.id === id)?.code)
+          .filter((code): code is string => Boolean(code)) ?? [],
+      )[0];
+      if (
+        firstLabelKey &&
+        settingRefs.current[`letter-label-${firstLabelKey}`]
+      ) {
+        settingRefs.current[`letter-label-${firstLabelKey}`]?.scrollIntoView({
+          behavior: "smooth",
+          block: "start",
+        });
+        return;
+      }
+    },
+    [settings, sidebarCategories, setSearchParams, scrollToLayoutAssetPlacement],
+  );
+
+  useEffect(() => {
+    if (effectiveSelectedCategory !== "layout" || settings.length === 0) return;
+    const timer = window.setTimeout(scrollToLayoutAssetPlacement, 200);
+    return () => window.clearTimeout(timer);
+  }, [effectiveSelectedCategory, settings.length, scrollToLayoutAssetPlacement]);
+
+  // --- Effects ---------------------------------------------------------
+  // Load headers/footers
+  useEffect(() => {
+    if (headerFooterData) {
+      setHeaders(headerFooterData.headers || []);
+      setFooters(headerFooterData.footers || []);
+      if (!selectedHeaderId && headerFooterData.headers?.length > 0) {
+        setSelectedHeaderId(headerFooterData.headers[0].id);
+      }
+      if (!selectedFooterId && headerFooterData.footers?.length > 0) {
+        setSelectedFooterId(headerFooterData.footers[0].id);
+      }
+    }
+  }, [headerFooterData, selectedHeaderId, selectedFooterId]);
+
+  // Initial load
+  useEffect(() => {
+    if (templateId && unitId) {
+      loadTemplate();
+      loadSettings();
+    }
+  }, [templateId, unitId, loadTemplate, loadSettings]);
+
+  // Set initial category from URL or first available
+  useEffect(() => {
+    if (sidebarCategories.length === 0) return;
+
+    const categoryFromUrl = searchParams.get("category");
+    const matchedCategory = sidebarCategories.find(
+      (category) => category.code === categoryFromUrl,
+    );
+
+    if (categoryFromUrl === "labels") {
+      const fallbackCategory =
+        sidebarCategories.find(
+          (category) =>
+            getLetterLabelKeysForCategory(
+              category.code,
+              category.settingIds
+                .map((id) => settings.find((setting) => setting.id === id)?.code)
+                .filter((code): code is string => Boolean(code)),
+            ).length > 0,
+        ) ?? sidebarCategories[0];
+      if (fallbackCategory) {
+        setSelectedCategory(fallbackCategory.code);
+        setSearchParams(
+          (prev) => {
+            const next = new URLSearchParams(prev);
+            next.set("category", fallbackCategory.code);
+            return next;
+          },
+          { replace: true },
+        );
+      }
+      return;
+    }
+
+    if (matchedCategory) {
+      if (selectedCategory !== matchedCategory.code) {
+        setSelectedCategory(matchedCategory.code);
+      }
+      return;
+    }
+
+    if (!selectedCategory || selectedCategory === "fonts") {
+      const firstCategory = sidebarCategories[0].code;
+      setSelectedCategory(firstCategory);
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          next.set("category", firstCategory);
+          return next;
+        },
+        { replace: true },
+      );
+    }
+  }, [sidebarCategories, searchParams, selectedCategory, setSearchParams, settings]);
+
+  // Keyboard shortcut: Ctrl/Cmd+S to save
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === "s") {
+        event.preventDefault();
+        if (hasUnsavedChanges && !settingsLoading) {
+          handleSave();
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [hasUnsavedChanges, settingsLoading, handleSave]);
+
+  // Warn on page/tab close
+  useEffect(() => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (hasUnsavedChanges) {
+        e.preventDefault();
+        e.returnValue = "";
+      }
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+  }, [hasUnsavedChanges]);
+
+  // Live preview debouncing
+  const settingsKey = useMemo(
+    () =>
+      JSON.stringify({
+        settings: settings.map((s) => ({ id: s.id, value: s.value })),
+        selectedHeaderId,
+        selectedFooterId,
+        previewLanguage,
+        unitId,
+      }),
+    [settings, selectedHeaderId, selectedFooterId, previewLanguage, unitId],
+  );
+  const debouncedSettingsKey = useDebounce(settingsKey, 500);
+
+  useEffect(() => {
+    if (settings.length > 0 && !settingsLoadedRef.current && unitId) {
+      settingsLoadedRef.current = true;
+      void handleApply({ dbOnly: true });
+    }
+  }, [settings.length, unitId, handleApply]);
+
+  useEffect(() => {
+    if (!livePreviewEnabled) return;
+    if (!templateId || !unitId || settings.length === 0) return;
+    if (isFirstLoad) {
+      setIsFirstLoad(false);
+      return;
+    }
+    if (debouncedSettingsKey !== lastPreviewedKey.current) {
+      lastPreviewedKey.current = debouncedSettingsKey;
+      void handleApply();
+    }
+  }, [debouncedSettingsKey, livePreviewEnabled, handleApply, isFirstLoad, templateId, unitId, settings.length]);
+
+  // --- Loading state check (must be after all hooks) -------------------
+  if (settingsLoading && settings.length === 0) {
+    return (
+      <div className="flex h-96 items-center justify-center">
+        <Loader className="h-8 w-8 animate-spin text-purple-600" />
+      </div>
+    );
+  }
+
+  // --- Render -----------------------------------------------------------
+  return (
+    <div className="flex min-h-[720px] flex-col overflow-hidden rounded-xl bg-gray-50 dark:bg-gray-900">
+      {/* Header */}
+      <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-6 py-4">
+        <div className="flex flex-wrap items-center justify-between gap-4">
+          <div className="flex items-center gap-4">
+            <button
+              onClick={handleBack}
+              className="flex items-center gap-2 rounded-lg px-2 py-1.5 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+            >
+              <ArrowLeft className="h-5 w-5" />
+              <span className="font-medium">{t("common.back", "Back")}</span>
+            </button>
+            <div className="h-6 w-px bg-gray-300 dark:bg-gray-600" />
+            <h1 className="text-xl font-semibold text-gray-900 dark:text-white">
+              {template?.name?.en ||
+                t("template.styleSettings", "Style Settings")}
+            </h1>
+          </div>
+          <div className="flex flex-wrap items-center gap-3">
+            <div className="hidden items-center gap-3 rounded-lg bg-gray-100 px-3 py-2 text-sm text-gray-600 dark:bg-gray-700 dark:text-gray-300 md:flex">
+              <CheckCircle2 className="h-4 w-4 text-emerald-600" />
+              <span>
+                {settings.length} {t("template.settings", "settings")}
+              </span>
+              {totalCustomSettings > 0 && (
+                <span className="text-purple-600 dark:text-purple-400">
+                  · {totalCustomSettings} custom
+                </span>
+              )}
+              <div className="flex items-center gap-2 border-l border-gray-300 pl-3 dark:border-gray-600">
+                <div className="h-1.5 w-20 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-600">
+                  <div
+                    className="h-full rounded-full bg-purple-500 transition-all duration-500"
+                    style={{ width: `${customizationProgress}%` }}
+                  />
+                </div>
+                <span className="text-xs text-gray-500">{customizationProgress}%</span>
+              </div>
+            </div>
+            <button
+              type="button"
+              onClick={() => setShowResetModal(true)}
+              disabled={
+                settingsLoading ||
+                resetInProgress ||
+                !hasSettingsToReset ||
+                !unitId
+              }
+              title={
+                hasSettingsToReset
+                  ? t(
+                      "template.resetAllHint",
+                      "Restore all unit style settings to global template defaults",
+                    )
+                  : t(
+                      "template.resetAllAlreadyDefault",
+                      "All settings already match global defaults",
+                    )
+              }
+              className={cn(
+                "inline-flex items-center gap-2 rounded-lg border px-3 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+                hasSettingsToReset
+                  ? "border-amber-200 bg-amber-50 text-amber-800 hover:bg-amber-100 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-200 dark:hover:bg-amber-950/60"
+                  : "border-gray-200 bg-gray-50 text-gray-400 dark:border-gray-700 dark:bg-gray-800/60 dark:text-gray-500",
+              )}
+            >
+              {resetInProgress ? (
+                <Loader className="h-4 w-4 animate-spin" />
+              ) : (
+                <RotateCcw className="h-4 w-4" />
+              )}
+              {t("template.resetAllToDefault", "Reset to Default")}
+            </button>
+            <button
+              type="button"
+              onClick={() => setLivePreviewEnabled((current) => !current)}
+              className={cn(
+                "inline-flex items-center gap-2 rounded-lg border px-3 py-2 text-sm font-medium transition-colors",
+                livePreviewEnabled
+                  ? "border-purple-200 bg-purple-50 text-purple-700 dark:border-purple-800 dark:bg-purple-900/30 dark:text-purple-300"
+                  : "border-gray-200 bg-white text-gray-600 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700",
+              )}
+            >
+              {livePreviewEnabled ? (
+                <Eye className="h-4 w-4" />
+              ) : (
+                <EyeOff className="h-4 w-4" />
+              )}
+              {t("template.livePreview", "Live Preview")}
+            </button>
+            <div className="flex flex-wrap items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
+              <span>{t("template.previewLanguage", "Preview language")}</span>
+              <select
+                value={previewLanguage}
+                onChange={(e) =>
+                  setPreviewLanguage(e.target.value as "am" | "en")
+                }
+                className="rounded-lg border border-gray-300 bg-white px-2 py-1.5 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+              >
+                <option value="am">{t("template.amharic", "Amharic")}</option>
+                <option value="en">{t("template.english", "English")}</option>
+              </select>
+            </div>
+            <UnsavedChangesIndicator visible={hasUnsavedChanges} />
+          </div>
+        </div>
+      </div>
+
+      {/* Error Display */}
+      {error && (
+        <div className="mx-6 mt-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+          <p className="text-sm text-red-800 dark:text-red-400">{error}</p>
+          <button
+            onClick={loadSettings}
+            className="mt-2 text-sm text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 font-medium"
+          >
+            {t("common.retry", "Retry")}
+          </button>
+        </div>
+      )}
+
+      {/* Main Content - 2 Panel Layout */}
+      <div className="relative flex min-h-0 flex-1 flex-col overflow-hidden">
+        {/* Scoped mobile category drawer — contained within Style Settings */}
+        {mobileNavOpen ? (
+          <>
+            <button
+              type="button"
+              className="absolute inset-0 z-30 bg-black/40 xl:hidden"
+              onClick={() => setMobileNavOpen(false)}
+              aria-label={t("common.close", "Close")}
+            />
+            <aside
+              className="absolute left-0 top-0 z-40 flex h-full w-[min(20rem,calc(100%-1rem))] flex-col overflow-hidden border-r border-gray-200 bg-white shadow-2xl xl:hidden dark:border-gray-700 dark:bg-gray-800"
+              role="dialog"
+              aria-modal="true"
+              aria-label={t("template.styleCategories", "Style Categories")}
+            >
+              <div className="flex items-center justify-between border-b border-gray-200 px-4 py-3 dark:border-gray-700">
+                <h2 className="text-sm font-semibold text-gray-900 dark:text-white">
+                  {t("template.styleCategories", "Style Categories")}
+                </h2>
+                <button
+                  type="button"
+                  onClick={() => setMobileNavOpen(false)}
+                  className="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+                  aria-label={t("common.close", "Close")}
+                >
+                  <X className="h-4 w-4" />
+                </button>
+              </div>
+              <nav className="flex-1 space-y-1 overflow-y-auto p-4">
+                {filteredSidebarCategories.length === 0 ? (
+                  <p className="px-2 py-4 text-center text-sm text-gray-500 dark:text-gray-400">
+                    {t("common.noResults", "No settings found")}
+                  </p>
+                ) : (
+                  filteredSidebarCategories.map((category) => {
+                    const Icon = CATEGORY_ICONS[category.code] ?? Palette;
+                    const customCount =
+                      categoryCustomCounts.get(category.code) ?? 0;
+                    const isActive = effectiveSelectedCategory === category.code;
+
+                    return (
+                      <StyleSettingsSidebarItem
+                        key={category.code}
+                        icon={Icon}
+                        label={category.label}
+                        isActive={isActive}
+                        compact
+                        onClick={() => handleSelectCategory(category.code)}
+                        meta={
+                          <span>
+                            {getCategoryVisibleItemCount(category.code)}{" "}
+                            {t("template.settings", "settings")}
+                          </span>
+                        }
+                        badge={
+                          customCount > 0 ? (
+                            <span className="rounded-full bg-amber-100 px-1.5 py-0.5 font-medium text-amber-700 dark:bg-amber-900/40 dark:text-amber-300">
+                              {customCount} custom
+                            </span>
+                          ) : undefined
+                        }
+                      />
+                    );
+                  })
+                )}
+              </nav>
+            </aside>
+          </>
+        ) : null}
+
+        <div className="flex min-h-0 flex-1 flex-col gap-10 overflow-auto p-4 sm:p-6 2xl:flex-row 2xl:gap-0 2xl:overflow-hidden 2xl:p-0">
+        {/* Left Panel - split into sidebar + editor area */}
+        <div className="flex min-h-0 w-full min-w-0 flex-1 flex-col overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800/50 lg:min-h-[640px] xl:flex-row 2xl:w-1/2 2xl:rounded-none 2xl:border-0 2xl:border-r 2xl:bg-transparent 2xl:dark:bg-transparent">
+          {/* Vertical Category Sidebar — xl+ desktop */}
+          <StyleSettingsSidebar
+            title={t("template.styleCategories", "Style Categories")}
+            hint={t("template.categoryHint", "Pick a section to edit")}
+            collapsed={categoryNavCollapsed}
+            className="hidden xl:flex"
+          >
+            {filteredSidebarCategories.length === 0 ? (
+              <p className="px-2 py-4 text-center text-sm text-gray-500 dark:text-gray-400">
+                {t("common.noResults", "No settings found")}
+              </p>
+            ) : (
+              filteredSidebarCategories.map((category) => {
+                const Icon = CATEGORY_ICONS[category.code] ?? Palette;
+                const customCount =
+                  categoryCustomCounts.get(category.code) ?? 0;
+                const isActive = effectiveSelectedCategory === category.code;
+
+                return (
+                  <StyleSettingsSidebarItem
+                    key={category.code}
+                    icon={Icon}
+                    label={category.label}
+                    isActive={isActive}
+                    iconOnly={categoryNavCollapsed}
+                    onClick={() => handleSelectCategory(category.code)}
+                    meta={
+                      categoryNavCollapsed ? undefined : (
+                        <span>
+                          {getCategoryVisibleItemCount(category.code)}{" "}
+                          {t("template.settings", "settings")}
+                        </span>
+                      )
+                    }
+                    badge={
+                      !categoryNavCollapsed && customCount > 0 ? (
+                        <span className="rounded-full bg-amber-100 px-1.5 py-0.5 font-medium text-amber-700 dark:bg-amber-900/40 dark:text-amber-300">
+                          {customCount} custom
+                        </span>
+                      ) : undefined
+                    }
+                  />
+                );
+              })
+            )}
+          </StyleSettingsSidebar>
+
+          {/* Editor Area */}
+          <div className="min-w-0 flex-1 overflow-y-auto overflow-x-hidden p-4 sm:p-6">
+            <div className="space-y-4">
+              <div className="flex min-w-0 flex-wrap items-center justify-between gap-3">
+                <div className="flex min-w-0 items-start gap-2 sm:gap-3">
+                  <button
+                    type="button"
+                    onClick={() => setMobileNavOpen(true)}
+                    className="inline-flex shrink-0 items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 xl:hidden dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
+                    aria-label={t("template.styleCategories", "Style Categories")}
+                  >
+                    <Menu className="h-4 w-4" />
+                    <span className="hidden sm:inline">
+                      {t("template.styleCategories", "Categories")}
+                    </span>
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setCategoryNavCollapsed((prev) => !prev)}
+                    className="hidden shrink-0 items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 xl:inline-flex dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
+                    aria-label={
+                      categoryNavCollapsed
+                        ? t("template.expandSidebar", "Expand sidebar")
+                        : t("template.collapseSidebar", "Collapse sidebar")
+                    }
+                    title={
+                      categoryNavCollapsed
+                        ? t("template.expandSidebar", "Expand sidebar")
+                        : t("template.collapseSidebar", "Collapse sidebar")
+                    }
+                  >
+                    {categoryNavCollapsed ? (
+                      <PanelLeft className="h-4 w-4" />
+                    ) : (
+                      <PanelLeftClose className="h-4 w-4" />
+                    )}
+                  </button>
+                  <div className="min-w-0">
+                    <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+                      {t("template.styleEditor", "Style Editor")}
+                    </h2>
+                    <p className="text-sm text-gray-500 dark:text-gray-400">
+                      {t(
+                        "template.styleEditorHint",
+                        "Tune settings, then preview the generated PDF.",
+                      )}
+                    </p>
+                  </div>
+                </div>
+                <div className="relative w-full sm:w-64">
+                  <Search className="pointer-events-none absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+                  <input
+                    type="search"
+                    value={searchTerm}
+                    onChange={(event) => setSearchTerm(event.target.value)}
+                    placeholder={t("common.search", "Search settings...")}
+                    className={cn(STYLE_INPUT_CLASS, "py-2 pl-9 pr-9")}
+                  />
+                  {searchTerm ? (
+                    <button
+                      type="button"
+                      onClick={() => setSearchTerm("")}
+                      className="absolute right-2.5 top-2.5 rounded p-0.5 text-gray-400 transition-colors hover:text-gray-600 dark:hover:text-gray-200"
+                      aria-label={t("common.clear", "Clear")}
+                    >
+                      <X className="h-4 w-4" />
+                    </button>
+                  ) : null}
+                </div>
+              </div>
+
+              {/* Header and Footer Selection */}
+              {showHeaderFooterSection ? (
+              <StyleSettingPanel
+                title={t("template.headerFooterSelection", "Header & Footer")}
+                className="space-y-4"
+              >
+                <div className="flex items-center justify-end">
+                  {isHeaderFooterLoading && (
+                    <span className="inline-flex items-center gap-2 text-xs text-gray-500">
+                      <Loader className="h-3.5 w-3.5 animate-spin" />
+                      {t("common.loading", "Loading")}
+                    </span>
+                  )}
+                </div>
+
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                  <StyleSettingSelect
+                    label={t("addRecord.Header", "Header")}
+                    value={selectedHeaderId || EMPTY_SELECT_VALUE}
+                    onValueChange={(value) =>
+                      handleHeaderChange(
+                        value === EMPTY_SELECT_VALUE ? "" : value,
+                      )
+                    }
+                    placeholder={
+                      headers?.length
+                        ? t("addRecord.Select Header", "Select Header")
+                        : t("addRecord.Loading Headers...", "Loading Headers...")
+                    }
+                    options={[
+                      {
+                        value: EMPTY_SELECT_VALUE,
+                        label: headers?.length
+                          ? t("addRecord.Select Header", "Select Header")
+                          : t(
+                              "addRecord.Loading Headers...",
+                              "Loading Headers...",
+                            ),
+                      },
+                      ...headers.map((header) => ({
+                        value: header.id,
+                        label: header.name?.en || header.name?.am || header.id,
+                      })),
+                    ]}
+                  />
+
+                  <StyleSettingSelect
+                    label={t("addRecord.Footer", "Footer")}
+                    value={selectedFooterId || EMPTY_SELECT_VALUE}
+                    onValueChange={(value) =>
+                      handleFooterChange(
+                        value === EMPTY_SELECT_VALUE ? "" : value,
+                      )
+                    }
+                    placeholder={
+                      footers?.length
+                        ? t("addRecord.Select Footer", "Select Footer")
+                        : t("addRecord.Loading Footers...", "Loading Footers...")
+                    }
+                    options={[
+                      {
+                        value: EMPTY_SELECT_VALUE,
+                        label: footers?.length
+                          ? t("addRecord.Select Footer", "Select Footer")
+                          : t(
+                              "addRecord.Loading Footers...",
+                              "Loading Footers...",
+                            ),
+                      },
+                      ...footers.map((footer) => ({
+                        value: footer.id,
+                        label: footer.name?.en || footer.name?.am || footer.id,
+                      })),
+                    ]}
+                  />
+                </div>
+
+                {/* Header Preview */}
+                {selectedHeaderId &&
+                  headers.length > 0 &&
+                  (() => {
+                    const selectedHeader = headers.find(
+                      (h) => h.id === selectedHeaderId,
+                    );
+                    return selectedHeader?.presigned ? (
+                      <div className="rounded-lg border border-dashed border-gray-300 bg-gray-50 p-4 dark:border-gray-600 dark:bg-gray-900/40">
+                        <p className="text-sm font-medium text-gray-600 mb-2">
+                          {t("addRecord.Header Preview", "Header Preview")}
+                        </p>
+                        <img
+                          src={selectedHeader.presigned}
+                          alt={
+                            selectedHeader.name?.en ||
+                            selectedHeader.name?.am ||
+                            "Header"
+                          }
+                          className="h-auto max-w-full rounded border border-gray-200 bg-white dark:border-gray-700"
+                        />
+                      </div>
+                    ) : null;
+                  })()}
+
+                {/* Footer Preview */}
+                {selectedFooterId &&
+                  footers.length > 0 &&
+                  (() => {
+                    const selectedFooter = footers.find(
+                      (f) => f.id === selectedFooterId,
+                    );
+                    return selectedFooter?.presigned ? (
+                      <div className="rounded-lg border border-dashed border-gray-300 bg-gray-50 p-4 dark:border-gray-600 dark:bg-gray-900/40">
+                        <p className="text-sm font-medium text-gray-600 mb-2">
+                          {t("addRecord.Footer Preview", "Footer Preview")}
+                        </p>
+                        <img
+                          src={selectedFooter.presigned}
+                          alt={
+                            selectedFooter.name?.en ||
+                            selectedFooter.name?.am ||
+                            "Footer"
+                          }
+                          className="h-auto max-w-full rounded border border-gray-200 bg-white dark:border-gray-700"
+                        />
+                      </div>
+                    ) : null;
+                  })()}
+              </StyleSettingPanel>
+              ) : null}
+
+              {/* Settings for selected category */}
+              {settings.length === 0 && !settingsLoading ? (
+                <div className="text-center py-8 text-gray-500">
+                  {t("template.noSettings", "No style settings available")}
+                </div>
+              ) : (
+                selectedCategory && (
+                  <div className="mt-4">
+                    <div className="mb-4 flex items-center justify-between">
+                      <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                        {sidebarCategories.find(
+                          (c) => c.code === effectiveSelectedCategory,
+                        )?.label || effectiveSelectedCategory}
+                      </h3>
+                      <span className="text-sm text-gray-500 dark:text-gray-400">
+                        {selectedCategoryVisibleCount}{" "}
+                        {t("template.visible", "visible")}
+                      </span>
+                    </div>
+                    {selectedCategorySettings.map((setting) => {
+                      const originalIndex = settings.findIndex(
+                        (s) => s.id === setting.id,
+                      );
+                      return (
+                        <div
+                          key={setting.id}
+                          ref={(el) => {
+                            settingRefs.current[setting.id] = el;
+                          }}
+                        >
+                          <div className="mb-2 flex justify-end">
+                            <button
+                              type="button"
+                              onClick={() => setHistorySetting(setting)}
+                              className="inline-flex items-center gap-1 rounded-md border border-gray-200 px-2.5 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
+                            >
+                              <History className="h-3.5 w-3.5" />
+                              {t("template.viewHistory", "History")}
+                            </button>
+                          </div>
+                          {isPageMarginSetting(setting.code) ? (
+                            <PageMarginEditor
+                              value={setting.value}
+                              isDefault={useDefaultSettings[setting.id] ?? true}
+                              onToggleDefault={() =>
+                                handleToggleDefault(setting.id)
+                              }
+                              onChange={(margins) =>
+                                handlePageMarginChange(originalIndex, margins)
+                              }
+                            />
+                          ) : isLayoutConfigSetting(setting.code) ? (
+                            <LayoutConfigEditor
+                              setting={setting}
+                              value={normalizeLayoutConfigValue(setting.value)}
+                              isDefault={useDefaultSettings[setting.id] ?? true}
+                              onToggleDefault={handleToggleDefault}
+                              appliesTo={setting.appliesTo}
+                              pageMargin={resolvedPageMargin}
+                              placementLanguage={previewLanguage}
+                              placementFocusNonce={layoutPlacementFocusNonce}
+                              onChange={(layout) =>
+                                handleLayoutConfigChange(originalIndex, layout)
+                              }
+                            />
+                          ) : (
+                            <StyleSettingsEditor
+                              setting={setting}
+                              index={originalIndex}
+                              onChange={handleSettingChange}
+                              isDefault={useDefaultSettings[setting.id] ?? true}
+                              onToggleDefault={handleToggleDefault}
+                              storedResourceId={resourceIds[setting.id] ?? null}
+                              previewLanguage={previewLanguage}
+                              onListStyleResourceChange={(resourceId) =>
+                                handleResourceIdChange(setting.id, resourceId)
+                              }
+                            />
+                          )}
+                        </div>
+                      );
+                    })}
+                    {selectedCategoryLabelKeys.length > 0 ? (
+                      <div className="mt-6 space-y-3 border-t border-gray-200 pt-5 dark:border-gray-700">
+                        <div>
+                          <h4 className="text-sm font-semibold text-gray-900 dark:text-white">
+                            {t("template.letterLabelFields", "Label text")}
+                          </h4>
+                          <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                            {t(
+                              "template.letterLabelsSectionHint",
+                              "Customize the printed labels for this section.",
+                            )}
+                          </p>
+                        </div>
+                        {selectedCategoryLabelKeys.map((labelKey, labelIndex) => (
+                          <div
+                            key={labelKey}
+                            ref={(el) => {
+                              settingRefs.current[`letter-label-${labelKey}`] = el;
+                            }}
+                          >
+                            {labelIndex === 0 && letterLabelsSetting ? (
+                              <div className="mb-2 flex justify-end">
+                                <button
+                                  type="button"
+                                  onClick={() =>
+                                    setHistorySetting(letterLabelsSetting)
+                                  }
+                                  className="inline-flex items-center gap-1 rounded-md border border-gray-200 px-2.5 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
+                                >
+                                  <History className="h-3.5 w-3.5" />
+                                  {t("template.viewHistory", "History")}
+                                </button>
+                              </div>
+                            ) : null}
+                            <LetterLabelFieldEditor
+                              labelKey={labelKey}
+                              entry={normalizedLetterLabels[labelKey]}
+                              isDefault={letterLabelsIsDefault}
+                              showDefaultToggle={labelIndex === 0}
+                              onToggleDefault={
+                                letterLabelsSetting
+                                  ? () =>
+                                      handleToggleDefault(letterLabelsSetting.id)
+                                  : undefined
+                              }
+                              onChange={(entry) =>
+                                handleSingleLetterLabelChange(labelKey, entry)
+                              }
+                            />
+                          </div>
+                        ))}
+                      </div>
+                    ) : null}
+                    {selectedCategoryVisibleCount === 0 && (
+                      <p className="text-gray-500 text-sm">
+                        {t(
+                          "template.noSettingsForCategory",
+                          "No settings in this category",
+                        )}
+                      </p>
+                    )}
+                  </div>
+                )
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Right Panel - PDF Preview */}
+        <div className="flex h-[min(78dvh,52rem)] w-full min-w-0 shrink-0 flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 sm:h-[min(82dvh,56rem)] 2xl:h-auto 2xl:min-h-[640px] 2xl:w-1/2 2xl:flex-1 2xl:rounded-none 2xl:border-0 2xl:shadow-none">
+          <PDFPreviewPanel
+            pdfUrl={pdfUrl}
+            loading={previewLoading}
+            error={error}
+            onApply={() => {
+              void handleApply();
+            }}
+            livePreviewEnabled={livePreviewEnabled}
+          />
+        </div>
+        </div>
+      </div>
+
+      {/* Footer - Save Button */}
+      <div className="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-6 py-4">
+        <div className="flex flex-wrap items-center justify-between gap-4">
+          <div className="flex flex-col gap-1">
+            <p className="text-sm text-gray-500 dark:text-gray-400">
+              {hasUnsavedChanges
+                ? t("template.unsavedChanges", "Unsaved changes")
+                : t("template.allChangesSaved", "All changes saved")}
+              <span className="ml-2 hidden text-xs text-gray-400 sm:inline">
+                ({t("template.saveShortcut", "Ctrl+S to save")})
+              </span>
+            </p>
+            <p className="max-w-xl text-xs text-gray-500 dark:text-gray-400">
+              {t(
+                "template.saveUnitHint",
+                "Changes are saved for the selected unit. Use the default toggle on a setting to remove your unit override.",
+              )}
+            </p>
+          </div>
+          <button
+            onClick={handleSave}
+            disabled={settingsLoading || !hasUnsavedChanges || !unitId}
+            className="inline-flex items-center gap-2 rounded-lg bg-purple-600 px-6 py-2 font-medium text-white transition-colors hover:bg-purple-700 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-purple-500"
+          >
+            {settingsLoading ? (
+              <Loader className="h-4 w-4 animate-spin" />
+            ) : (
+              <Save className="h-4 w-4" />
+            )}
+            {settingsLoading
+              ? t("template.saving", "Saving...")
+              : t("common.save", "Save")}
+          </button>
+        </div>
+      </div>
+      <SettingHistoryModal
+        open={historySetting !== null}
+        onOpenChange={(open) => {
+          if (!open) setHistorySetting(null);
+        }}
+        setting={historySetting}
+        unitId={unitId}
+        onRestored={async () => {
+          await loadSettings();
+          void handleApply({ dbOnly: true });
+        }}
+      />
+      <UnsavedChangesModal
+        isOpen={showUnsavedModal}
+        onConfirm={handleConfirmLeave}
+        onCancel={handleCancelLeave}
+      />
+      <ResetAllDefaultsModal
+        isOpen={showResetModal}
+        busy={resetInProgress}
+        onConfirm={() => {
+          void handleResetAllToDefault();
+        }}
+        onCancel={() => {
+          if (!resetInProgress) setShowResetModal(false);
+        }}
+      />
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/TemplateLivePreview.tsx b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/TemplateLivePreview.tsx
new file mode 100644
index 000000000..4a650c5ef
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/TemplateLivePreview.tsx
@@ -0,0 +1,520 @@
+import React from "react";
+import { sanitizeHtml } from "@/shared/lib/sanitize";
+import {
+  TemplateSampleData,
+  TemplateSampleSetting,
+} from "@/user-management/services/TemplateConfiguration/types/templateTypes";
+import { normalizeLetterLabelsValue } from "./utils/letterLabelsConstants";
+import { normalizePageMarginValue } from "./components/PageMarginEditor";
+
+interface TemplateLivePreviewProps {
+  formData: TemplateSampleData;
+  settings: TemplateSampleSetting[];
+  selectedHeader: string; // HTML string with <img>
+  selectedFooter: string; // HTML string with <img>
+  templateName?: string;
+}
+
+export const TemplateLivePreview: React.FC<TemplateLivePreviewProps> = ({
+  formData,
+  settings,
+  selectedHeader,
+  selectedFooter,
+  templateName,
+}) => {
+  const { content, preferredLanguage, recordType } = formData;
+
+  // Debug: Log when component renders and show render count
+  const renderCount = React.useRef(0);
+  renderCount.current += 1;
+
+  // CSS parser that correctly handles data URIs (colons/semicolons inside url(...))
+  const parseCSSString = (cssString: string): React.CSSProperties => {
+    if (!cssString) return {};
+
+    const styles: React.CSSProperties = {};
+    // Walk char-by-char, splitting on ';' only when outside parentheses
+    let depth = 0;
+    let current = "";
+
+    const processDeclaration = (decl: string) => {
+      decl = decl.trim();
+      if (!decl) return;
+      // Split on first ':' only
+      const colonIdx = decl.indexOf(":");
+      if (colonIdx <= 0) return;
+      const property = decl.slice(0, colonIdx).trim();
+      const value = decl.slice(colonIdx + 1).trim();
+      if (!property || !value) return;
+      // Convert CSS property names to camelCase for React
+      const camelCaseProperty = property
+        .split("-")
+        .map((part, index) =>
+          index === 0 ? part : part.charAt(0).toUpperCase() + part.slice(1),
+        )
+        .join("");
+      (styles as any)[camelCaseProperty] = value;
+    };
+
+    for (let i = 0; i < cssString.length; i++) {
+      const ch = cssString[i];
+      if (ch === "(") depth++;
+      else if (ch === ")") depth--;
+      if (ch === ";" && depth === 0) {
+        processDeclaration(current);
+        current = "";
+      } else {
+        current += ch;
+      }
+    }
+    processDeclaration(current); // last declaration (no trailing semicolon)
+
+    return styles;
+  };
+
+  // Helper to extract style object from settings by code
+  const getStyleFor = (code: string): React.CSSProperties => {
+    const setting = settings.find((s) => s.code.includes(code));
+    if (!setting) return {};
+
+    const { value } = setting;
+
+    // If value is a string (CSS), parse it
+    if (typeof value === "string") {
+      return parseCSSString(value);
+    }
+
+    // Fallback for object format
+    return {
+      fontSize: (value as any)["font-size"],
+      fontWeight: (value as any)["font-weight"] as any,
+      textDecoration: (value as any)["text-decoration"] as any,
+    };
+  };
+
+  const getStyleForAliases = (aliases: string[]): React.CSSProperties => {
+    const normalized = aliases.map((alias) => alias.toLowerCase());
+    const setting = settings.find((s) => {
+      const code = s.code.toLowerCase();
+      return normalized.some((alias) => code.includes(alias));
+    });
+    if (!setting) return {};
+
+    const { value } = setting;
+    if (typeof value === "string") {
+      return parseCSSString(value);
+    }
+
+    return parseCSSString(
+      Object.entries(value as Record<string, string>)
+        .map(([key, val]) => `${key}: ${val};`)
+        .join(" "),
+    );
+  };
+
+  const subjectStyle = getStyleFor("subject");
+  const bodyStyle = getStyleFor("body");
+  const headerStyle = getStyleFor("header");
+  const footerStyle = getStyleFor("footer");
+
+  const receiverStyle = getStyleForAliases([
+    "receiver",
+    "recipient",
+    "letter-receiver",
+    "to",
+  ]);
+  const fromStyle = getStyleForAliases([
+    "collaborator",
+    "from",
+    "letter-from",
+    "sender",
+  ]);
+  const prefixStyle = getStyleForAliases([
+    "letter-prefix-style",
+    "prefix-style",
+    "letter-prefix",
+    "prefix",
+  ]);
+  const suffixStyle = getStyleForAliases([
+    "letter-suffix-style",
+    "suffix-style",
+    "letter-suffix",
+    "suffix",
+  ]);
+  const ccInternalStyle = getStyleForAliases([
+    "cc-internal",
+    "ccinternal",
+    "internal-cc",
+    "internalcc",
+    "cc-receiver",
+  ]);
+  const ccExternalStyle = getStyleForAliases([
+    "cc-external",
+    "ccexternal",
+    "external-cc",
+    "externalcc",
+    "cc-receiver",
+  ]);
+  const ccPrefixStyle = getStyleForAliases(["cc-prefix"]);
+  const ccSuffixStyle = getStyleForAliases(["cc-suffix"]);
+
+  // Customizable bilingual labels & page margins
+  const labels = normalizeLetterLabelsValue(
+    settings.find((s) => s.code === "letter-labels-text")?.value,
+  );
+  const margins = normalizePageMarginValue(
+    settings.find((s) => s.code === "letter-page-margin")?.value,
+  );
+  const displayLang: "en" | "am" = preferredLanguage === "am" ? "am" : "en";
+  const labelStyle = (
+    style?: Record<string, string>,
+  ): React.CSSProperties =>
+    style
+      ? parseCSSString(
+          Object.entries(style)
+            .map(([k, v]) => `${k}: ${v};`)
+            .join(" "),
+        )
+      : {};
+
+  const renderBodyContent = () => {
+    const bodyText = content.body || "";
+    const lines = bodyText
+      .split("\n")
+      .map((line) => line.trim())
+      .filter(Boolean);
+    const bulletItems = lines
+      .filter((line) => /^[-*•]\s+/.test(line))
+      .map((line) => line.replace(/^[-*•]\s+/, ""));
+
+    // Split list-specific style from text style so bullets can render on real <ul>/<li>.
+    const { listStyle, listStyleType, listStyleImage, ...textStyle } =
+      bodyStyle as Record<string, unknown>;
+    const resolvedListStyle =
+      (listStyle as string) || (listStyleType as string) || "disc";
+    const resolvedListStyleImage =
+      typeof listStyleImage === "string" ? listStyleImage : undefined;
+
+    if (bulletItems.length > 0) {
+      const isDisclosureTriangle =
+        resolvedListStyle === "disclosure-closed" ||
+        resolvedListStyle === "disclosure-open";
+
+      if (
+        resolvedListStyleImage &&
+        !isDisclosureTriangle
+      ) {
+        return (
+          <div style={textStyle as React.CSSProperties}>
+            <ul
+              style={{
+                listStyle: "none",
+                listStyleImage: resolvedListStyleImage,
+                listStylePosition: "outside",
+                paddingLeft: "1.5rem",
+              }}
+            >
+              {bulletItems.map((item, idx) => (
+                <li key={`${item}-${idx}`}>{item}</li>
+              ))}
+            </ul>
+          </div>
+        );
+      }
+
+      if (isDisclosureTriangle) {
+        // Use inline styles with triangle for disclosure
+        // Using Unicode escape sequence \25B6 for better backend compatibility
+        return (
+          <div style={textStyle}>
+            <ul style={{ listStyle: "none", paddingLeft: 0 }}>
+              {bulletItems.map((item, idx) => (
+                <li
+                  key={`${item}-${idx}`}
+                  style={{
+                    position: "relative",
+                    paddingLeft: "1.2rem",
+                  }}
+                >
+                  <span style={{ position: "absolute", left: 0 }}>
+                    {String.fromCharCode(0x25b6)}
+                  </span>
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+        );
+      }
+
+      // Regular list-style rendering
+      return (
+        <div style={textStyle}>
+          <ul
+            style={{ listStyleType: resolvedListStyle, paddingLeft: "1.5rem" }}
+          >
+            {bulletItems.map((item, idx) => (
+              <li key={`${item}-${idx}`}>{item}</li>
+            ))}
+          </ul>
+        </div>
+      );
+    }
+
+    return (
+      <div style={textStyle}>
+        {bodyText || "(Letter body will appear here)"}
+      </div>
+    );
+  };
+
+  // Helper to display a list of names based on preferred language
+  const toList = content.to?.filter(Boolean) || [];
+  const fromList = content.from?.filter(Boolean) || [];
+  const internalCcList = content.internalCC?.filter(Boolean) || [];
+  const externalCcList = content.externalCC?.filter(Boolean) || [];
+
+  const renderStyledList = (
+    items: string[],
+    style: React.CSSProperties,
+    emptyText: string,
+  ) => {
+    const { listStyle, listStyleType, listStylePosition, listStyleImage, ...textStyle } =
+      style as Record<string, unknown>;
+    const specialListStyles = ["disclosure-closed", "disclosure-open"];
+    const resolvedListStyle =
+      typeof listStyle === "string" && specialListStyles.includes(listStyle)
+        ? listStyle
+        : (listStyleType as string) || (listStyle as string) || "disc";
+    const resolvedListPosition = ((listStylePosition as string) ||
+      "outside") as React.CSSProperties["listStylePosition"];
+    const resolvedListStyleImage =
+      typeof listStyleImage === "string" ? listStyleImage : undefined;
+
+    if (items.length === 0) {
+      return <span>{emptyText}</span>;
+    }
+
+    if (
+      resolvedListStyleImage &&
+      resolvedListStyle !== "disclosure-closed" &&
+      resolvedListStyle !== "disclosure-open"
+    ) {
+      return (
+        <ul
+          style={{
+            listStyle: "none",
+            listStyleImage: resolvedListStyleImage,
+            listStylePosition: resolvedListPosition,
+            paddingLeft: "1.5rem",
+            margin: 0,
+          }}
+        >
+          {items.map((item, idx) => (
+            <li key={`${item}-${idx}`} style={textStyle as React.CSSProperties}>
+              {item}
+            </li>
+          ))}
+        </ul>
+      );
+    }
+
+    // Check if using disclosure triangle
+    const isDisclosureTriangle =
+      resolvedListStyle === "disclosure-closed" ||
+      resolvedListStyle === "disclosure-open";
+
+    if (isDisclosureTriangle) {
+      // Use inline styles with triangle for disclosure
+      // Using Unicode escape sequence \25B6 for better backend compatibility
+      return (
+        <ul
+          style={{
+            listStyle: "none",
+            paddingLeft: 0,
+            margin: 0,
+          }}
+        >
+          {items.map((item, idx) => (
+            <li
+              key={`${item}-${idx}`}
+              style={{
+                position: "relative",
+                paddingLeft: "1.2rem",
+                ...textStyle,
+              }}
+            >
+              <span
+                style={{
+                  content: '"\\25B6"',
+                  position: "absolute",
+                  left: 0,
+                  display: "inline-block",
+                  width: "1rem",
+                }}
+              >
+                {String.fromCharCode(0x25b6)}
+              </span>
+              {item}
+            </li>
+          ))}
+        </ul>
+      );
+    }
+
+    // Regular list-style rendering
+    return (
+      <ul
+        style={{
+          listStyleType: resolvedListStyle,
+          listStylePosition: resolvedListPosition,
+          paddingLeft: "1.5rem",
+          margin: 0,
+        }}
+      >
+        {items.map((item, idx) => (
+          <li key={`${item}-${idx}`} style={textStyle}>
+            {item}
+          </li>
+        ))}
+      </ul>
+    );
+  };
+
+  return (
+    <div
+      className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm font-serif text-gray-900 dark:text-gray-100 min-h-96"
+      style={{
+        paddingTop: `${margins.top}px`,
+        paddingRight: `${margins.right}px`,
+        paddingBottom: `${margins.bottom}px`,
+        paddingLeft: `${margins.left}px`,
+      }}
+    >
+      {/* Header with its own style */}
+      {selectedHeader && (
+        <div
+          className="mb-6 border-b border-gray-200 dark:border-gray-600 pb-4"
+          style={headerStyle}
+          dangerouslySetInnerHTML={{ __html: sanitizeHtml(selectedHeader) }}
+        />
+      )}
+
+      {/* Subject */}
+      <div className="mb-4 text-lg font-semibold" style={subjectStyle}>
+        <span style={labelStyle(labels.subject.style)}>
+          {labels.subject[displayLang]}
+        </span>{" "}
+        {content.subject || "(Subject)"}
+      </div>
+
+      {/* Date (right aligned) */}
+      <div className="text-right text-gray-600 dark:text-gray-400 mb-4 text-sm">
+        <span style={labelStyle(labels.date.style)}>
+          {labels.date[displayLang]}:
+        </span>{" "}
+        {content.date || new Date().toISOString().split("T")[0]}
+      </div>
+
+      {/* To: */}
+      <div className="mb-2 text-sm">
+        <span
+          className="font-semibold text-gray-900 dark:text-white"
+          style={labelStyle(labels.to.style)}
+        >
+          {labels.to[displayLang]}:
+        </span>{" "}
+        {renderStyledList(toList, receiverStyle, "(recipients)")}
+      </div>
+
+      {/* From: */}
+      <div className="mb-4 text-sm" style={fromStyle}>
+        <span
+          className="font-semibold text-gray-900 dark:text-white"
+          style={labelStyle(labels.from.style)}
+        >
+          {labels.from[displayLang]}:
+        </span>{" "}
+        {fromList.length > 0 ? fromList.join(", ") : "(collaborators)"}
+      </div>
+
+      {/* Body */}
+      <div className="mb-4 whitespace-pre-wrap text-sm leading-relaxed text-gray-700 dark:text-gray-300">
+        {renderBodyContent()}
+      </div>
+
+      {/* Sincerely / Closing */}
+      <div className="mb-2 text-sm">{content.sincerelyText || "Sincerely"}</div>
+
+      {/* Delegate signature */}
+      {content.isWithDelegateSignature && content.delegatorName && (
+        <div className="mb-2 text-gray-700 dark:text-gray-300 italic text-sm">
+          <span style={labelStyle(labels.delegate.style)}>
+            {labels.delegate[displayLang]}
+          </span>{" "}
+          {content.delegatorName}
+        </div>
+      )}
+
+      {/* Prefix / Suffix */}
+      {(content.prefix || content.suffix) && (
+        <div className="mb-2 text-xs text-gray-600 dark:text-gray-400">
+          {content.prefix && <span style={prefixStyle}>{content.prefix}</span>}
+          {content.prefix && content.suffix && " "}
+          {content.suffix && <span style={suffixStyle}>{content.suffix}</span>}
+        </div>
+      )}
+
+      {/* CC lists */}
+      {(internalCcList.length > 0 || externalCcList.length > 0) && (
+        <div className="mt-4 pt-2 border-t border-gray-200 dark:border-gray-600 text-xs text-gray-600 dark:text-gray-400">
+          {internalCcList.length > 0 && (
+            <div>
+              <span
+                className="font-semibold text-gray-900 dark:text-white"
+                style={labelStyle(labels.cc.style)}
+              >
+                {labels.cc[displayLang]}
+              </span>{" "}
+              {renderStyledList(internalCcList, ccInternalStyle, "(none)")}
+            </div>
+          )}
+          {externalCcList.length > 0 && (
+            <div>
+              <span
+                className="font-semibold text-gray-900 dark:text-white"
+                style={labelStyle(labels.cc.style)}
+              >
+                {labels.cc[displayLang]}
+              </span>{" "}
+              {renderStyledList(externalCcList, ccExternalStyle, "(none)")}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Prefix CC / Suffix CC (optional) */}
+      {(content.prefixCC || content.suffixCC) && (
+        <div className="text-xs text-gray-400 dark:text-gray-500 mt-1">
+          <span style={ccPrefixStyle}>{content.prefixCC}</span>{" "}
+          <span style={ccSuffixStyle}>{content.suffixCC}</span>
+        </div>
+      )}
+
+      {/* Footer with its own style */}
+      {selectedFooter && (
+        <div
+          className="mt-6 border-t border-gray-200 dark:border-gray-600 pt-4"
+          style={footerStyle}
+          dangerouslySetInnerHTML={{ __html: sanitizeHtml(selectedFooter) }}
+        />
+      )}
+
+      {/* Small indicator of template name / record type */}
+      <div className="text-xs text-gray-400 dark:text-gray-500 mt-4 text-right">
+        {templateName && `${templateName} • `}
+        {recordType === "external" ? "External" : "Internal"}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/TemplateSampleForm.tsx b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/TemplateSampleForm.tsx
new file mode 100644
index 000000000..f5ba36792
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/TemplateSampleForm.tsx
@@ -0,0 +1,1758 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { sanitizeHtml } from "@/shared/lib/sanitize";
+import { useTranslation } from "react-i18next";
+import { ArrowLeft, Loader, X, Plus } from "lucide-react";
+import { TemplateService } from "@/user-management/services/api/templateService";
+import {
+  TemplateSampleRequest,
+  TemplateResource,
+  TemplateSampleData,
+  TemplateSampleSetting,
+} from "@/user-management/services/TemplateConfiguration/types/templateTypes";
+import { useTemplateFormData } from "./hooks/useTemplateFormData";
+import { useHeaderFooterPresigned } from "@/record-management/components/hooks/useHeaderFooterPresigned";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import { toast } from "sonner";
+import { TemplateLivePreview } from "./TemplateLivePreview";
+import {
+  isLetterLabelsSetting,
+  normalizeLetterLabelsValue,
+} from "./utils/letterLabelsConstants";
+import {
+  isPageMarginSetting,
+  normalizePageMarginValue,
+} from "./components/PageMarginEditor";
+import { StyleSettingsEditor } from "./components/StyleSettingsEditor";
+import CollapsibleSection from "./CollapsibleSection";
+import {
+  normalizeListStyleProps,
+  styleObjectToCss,
+  parseCSSDeclarations,
+  cssStringToObject,
+  parseCSSStringToObject,
+} from "./TemplateSampleForm.utils";
+import { useListBulletResources } from "./hooks/useListBulletResources";
+import { buildTemplateSamplePayload } from "./utils/templateSamplePayloadUtils";
+
+interface TemplateSampleFormProps {
+  templateId: string;
+  onBack: () => void;
+  onGeneratePreview: (
+    pdfUrl: string,
+    valuesToSave: Array<{
+      templateSettingId: string;
+      resourceId: string | null;
+      value: Record<string, string>;
+    }>,
+  ) => void;
+  initialPayload?: {
+    data: TemplateSampleData;
+    settings: TemplateSampleSetting[];
+  };
+}
+
+export const TemplateSampleForm = ({
+  templateId,
+  onBack,
+  onGeneratePreview,
+  initialPayload,
+}: TemplateSampleFormProps) => {
+  const { t } = useTranslation();
+  const { defaultFormData, departments, employees } = useTemplateFormData();
+  const { userDetails } = useAuthUser();
+  const unitId = userDetails?.employee?.[0]?.unitId;
+  const [loading, setLoading] = useState(false);
+  const [template, setTemplate] = useState<TemplateResource | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedCollaborators, setSelectedCollaborators] = useState<string[]>(
+    [],
+  );
+  const [selectedInternalCC, setSelectedInternalCC] = useState<string[]>([]);
+  const [selectedExternalCC, setSelectedExternalCC] = useState<string[]>([]);
+  const [selectedRecipients, setSelectedRecipients] = useState<string[]>([]);
+
+  const [formData, setFormData] = useState<TemplateSampleData>({
+    collaborators: [
+      { am: "ዮሃንስ ዶ", en: "John Doe" },
+      { am: "ማርያም ስሚዝ", en: "Mary Smith" },
+    ],
+    preferredLanguage: "am",
+    content: {
+      isWithDelegateSignature: false,
+      delegatorName: "",
+      body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n\n- First item\n- Second item\n- Third item",
+      date: new Date().toISOString().split("T")[0],
+      internalCC: ["Finance Department", "HR Department"],
+      externalCC: ["External Unit 1", "External Unit 2"],
+      prefixCC: "CC:",
+      suffixCC: "---",
+      from: ["John Doe", "Mary Smith"],
+      subject: "Sample Letter Subject - Important Notice",
+      sincerelyText: "Sincerely",
+      to: ["Jane Smith", "Robert Johnson"],
+      prefix: "RE:",
+      suffix: "---",
+    },
+    recordType: "external",
+  });
+
+  const [selectedHeaderId, setSelectedHeaderId] = useState<string>("");
+  const [selectedFooterId, setSelectedFooterId] = useState<string>("");
+  const [selectedHeader, setSelectedHeader] = useState<string>("");
+  const [selectedFooter, setSelectedFooter] = useState<string>("");
+
+  // Use the same hook as record form for headers/footers
+  const { data: headerFooterData, isLoading: isHeaderFooterLoading } =
+    useHeaderFooterPresigned(unitId!);
+
+  const headers = headerFooterData?.headers || [];
+  const footers = headerFooterData?.footers || [];
+
+  // Settings state with default/custom tracking
+  const [settings, setSettings] = useState<TemplateSampleSetting[]>([]);
+  const [settingsLoading, setSettingsLoading] = useState(false);
+  const [useDefaultSettings, setUseDefaultSettings] = useState<
+    Record<string, boolean>
+  >({});
+  const [customSettings, setCustomSettings] = useState<Record<string, string>>(
+    {},
+  );
+  const [resourceIds, setResourceIds] = useState<Record<string, string | null>>(
+    {},
+  );
+  const { resources: bulletResources } = useListBulletResources();
+  const [payloadSample, setPayloadSample] = useState<TemplateSampleRequest>();
+  // State for collapsible sections
+  const [expandedSections, setExpandedSections] = useState({
+    basicInfo: true,
+    headerFooter: false,
+    content: false,
+    collaborators: false,
+    recipients: false,
+  });
+
+  const toggleSection = (section: keyof typeof expandedSections) => {
+    setExpandedSections((prev) => ({ ...prev, [section]: !prev[section] }));
+  };
+
+  useEffect(() => {
+    if (templateId) {
+      loadTemplate();
+      // Only load settings if they haven't been loaded yet
+      if (settings.length === 0) {
+        loadSettings();
+      }
+    }
+
+    // Cleanup timer on unmount
+    return () => {
+      if (settingsDebounceTimer.current) {
+        clearTimeout(settingsDebounceTimer.current);
+      }
+    };
+  }, [templateId]);
+
+  // Load initial payload if provided
+  useEffect(() => {
+    if (initialPayload) {
+      // Set form data from payload
+      if (initialPayload.data) {
+        setFormData(initialPayload.data);
+      }
+
+      // Set settings from payload - use the outer 'value' property
+      if (initialPayload.settings && initialPayload.settings.length > 0) {
+        const processedSettings = initialPayload.settings.map((setting) => {
+          let cssString = "";
+
+          // Use the outer 'value' property, not templateSettingValues
+          const valueToUse = setting.value;
+
+          // Typed (non-CSS) settings keep their object value intact.
+          if (isLetterLabelsSetting(setting.code)) {
+            return { ...setting, value: normalizeLetterLabelsValue(valueToUse) };
+          }
+          if (isPageMarginSetting(setting.code)) {
+            return { ...setting, value: normalizePageMarginValue(valueToUse) };
+          }
+
+          // Convert object to CSS string if needed
+          if (typeof valueToUse === "object" && valueToUse !== null) {
+            cssString = Object.entries(valueToUse)
+              .map(([key, value]) => {
+                // Skip null values but keep SVG data URIs
+                if (value === null || value === "null") return null;
+                return `${key}: ${value};`;
+              })
+              .filter(Boolean)
+              .join(" ");
+          } else if (typeof valueToUse === "string") {
+            cssString = valueToUse;
+          }
+
+          return {
+            ...setting,
+            value: cssString,
+          };
+        });
+
+        setSettings(processedSettings);
+
+        // Mark all as using defaults initially
+        const defaultMap: Record<string, boolean> = {};
+        processedSettings.forEach((setting) => {
+          defaultMap[setting.id] = true;
+        });
+        setUseDefaultSettings(defaultMap);
+      }
+    }
+  }, [initialPayload]);
+
+  useEffect(() => {
+    if (!defaultFormData) return;
+
+    // Only update with defaultFormData if it has meaningful values
+    // Otherwise keep the initialized defaults from component state
+    setFormData((prev) => ({
+      ...prev,
+      recordType: defaultFormData.recordType || prev.recordType,
+      preferredLanguage:
+        defaultFormData.preferredLanguage || prev.preferredLanguage,
+      collaborators:
+        defaultFormData.collaborators?.length > 0
+          ? defaultFormData.collaborators
+          : prev.collaborators,
+      content: {
+        ...prev.content,
+        isWithDelegateSignature:
+          defaultFormData.content.isWithDelegateSignature ??
+          prev.content.isWithDelegateSignature,
+        delegatorName:
+          defaultFormData.content.delegatorName || prev.content.delegatorName,
+        // Keep initialized defaults for body, subject, etc. if defaultFormData doesn't have them
+        body: defaultFormData.content.body || prev.content.body,
+        date: defaultFormData.content.date || prev.content.date,
+        subject: defaultFormData.content.subject?.trim()
+          ? defaultFormData.content.subject
+          : prev.content.subject,
+        sincerelyText:
+          defaultFormData.content.sincerelyText || prev.content.sincerelyText,
+        prefix: defaultFormData.content.prefix || prev.content.prefix,
+        suffix: defaultFormData.content.suffix || prev.content.suffix,
+        // Keep initialized defaults for CC and recipients if defaultFormData doesn't have them
+        internalCC:
+          defaultFormData.content.internalCC?.length > 0
+            ? defaultFormData.content.internalCC
+            : prev.content.internalCC,
+        externalCC:
+          defaultFormData.content.externalCC?.length > 0
+            ? defaultFormData.content.externalCC
+            : prev.content.externalCC,
+        prefixCC: defaultFormData.content.prefixCC || prev.content.prefixCC,
+        suffixCC: defaultFormData.content.suffixCC || prev.content.suffixCC,
+        from:
+          defaultFormData.content.from?.length > 0
+            ? defaultFormData.content.from
+            : prev.content.from,
+        to:
+          defaultFormData.content.to?.length > 0
+            ? defaultFormData.content.to
+            : prev.content.to,
+      },
+    }));
+  }, [defaultFormData]);
+
+  // Keep UI selection state in sync when form data/defaults are loaded.
+  useEffect(() => {
+    if (!departments.length && !employees.length) return;
+
+    const recipientIds = (formData.content.to || [])
+      .map((name) => {
+        const dept = departments.find(
+          (d: any) => (d?.name?.en || d?.name?.am) === name,
+        );
+        if (dept?.id) return dept.id;
+        const emp = employees.find(
+          (e: any) => (e?.user?.name?.en || e?.user?.name?.am) === name,
+        );
+        return emp?.employeePositions?.[0]?.id || "";
+      })
+      .filter(Boolean);
+
+    const internalCcIds = (formData.content.internalCC || [])
+      .map((name) => {
+        const dept = departments.find(
+          (d: any) => (d?.name?.en || d?.name?.am) === name,
+        );
+        return dept?.id || "";
+      })
+      .filter(Boolean);
+
+    const collaboratorIds = (formData.collaborators || [])
+      .map((collab) => {
+        const fullName = collab.en || collab.am;
+        const emp = employees.find(
+          (e: any) => (e?.user?.name?.en || e?.user?.name?.am) === fullName,
+        );
+        return emp?.employeePositions?.[0]?.id || "";
+      })
+      .filter(Boolean);
+
+    setSelectedRecipients(recipientIds);
+    setSelectedInternalCC(internalCcIds);
+    setSelectedExternalCC(formData.content.externalCC || []);
+    setSelectedCollaborators(collaboratorIds);
+  }, [
+    formData.content.to,
+    formData.content.internalCC,
+    formData.content.externalCC,
+    formData.collaborators,
+    departments,
+    employees,
+  ]);
+
+  // Update header/footer previews when selected or when headers/footers load
+  useEffect(() => {
+    if (headers.length) {
+      if (selectedHeaderId) {
+        const h = headers.find((x) => x.id === selectedHeaderId);
+        if (h)
+          setSelectedHeader(
+            `<div class="letter-header"><img src="${h.presigned}" alt="Header" style="width: 100%; max-height: 200px;" /></div>`,
+          );
+      } else {
+        // Show first header by default
+        setSelectedHeader(
+          `<div class="letter-header"><img src="${headers[0].presigned}" alt="Header" style="width: 100%; max-height: 200px;" /></div>`,
+        );
+      }
+    }
+
+    if (footers.length) {
+      if (selectedFooterId) {
+        const f = footers.find((x) => x.id === selectedFooterId);
+        if (f)
+          setSelectedFooter(
+            `<div class="letter-footer"><img src="${f.presigned}" alt="Footer" style="width: 100%; max-height: 200px;" /></div>`,
+          );
+      } else {
+        // Show first footer by default
+        setSelectedFooter(
+          `<div class="letter-footer"><img src="${footers[0].presigned}" alt="Footer" style="width: 100%; max-height: 200px;" /></div>`,
+        );
+      }
+    }
+  }, [headers, footers, selectedHeaderId, selectedFooterId]);
+
+  const loadTemplate = async () => {
+    try {
+      setLoading(true);
+      const data = await TemplateService.getTemplate(templateId);
+      setTemplate(data);
+    } catch (err) {
+      setError(t("error.loadingTemplate", "Error loading template"));
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const loadSettings = async () => {
+    try {
+      setSettingsLoading(true);
+      setError(null);
+      const response =
+        await TemplateService.getTemplateSettingsByUnit(templateId);
+      const fetchedSettings = Array.isArray(response?.items)
+        ? response.items
+        : [];
+      // ─── RAW API RESPONSE ────────────────────────────────────────────────
+      console.groupCollapsed(
+        `%c[TemplateSettings] Raw fetch — ${fetchedSettings.length} settings`,
+        "color:#6366f1; font-weight:bold;",
+      );
+      console.table(
+        fetchedSettings.map((s: any) => ({
+          code: s.code,
+          id: s.id,
+          rank: s.rank,
+          outerValue: JSON.stringify(s.value),
+          settingValuesCount: s.templateSettingValues?.length ?? 0,
+        })),
+      );
+      console.groupEnd();
+      // ─────────────────────────────────────────────────────────────────────
+
+      if (fetchedSettings.length === 0) {
+        console.warn("No template settings found for template:", templateId);
+      }
+
+      // Initialize settings with default values from API
+      const initializedSettings = fetchedSettings
+        .map((setting: any) => {
+          // Ensure setting has required fields
+          if (!setting.id || !setting.code) {
+            console.warn("Setting missing required fields:", setting);
+            return null;
+          }
+
+          let defaultValue: any = undefined;
+          let chosenFrom = "none";
+
+          // ── 1. Prefer the outer `value` – this is the API's resolved current value
+          //       (e.g. what was saved last time the user clicked Generate Sample)
+          if (setting.value !== null && setting.value !== undefined) {
+            defaultValue = setting.value;
+            chosenFrom = "outer setting.value (API resolved)";
+          }
+          // ── 2. Fall back to templateSettingValues – prioritise entry with a unitId
+          else if (setting.templateSettingValues?.length > 0) {
+            const valueWithUnitId = setting.templateSettingValues.find(
+              (tv: any) => tv.unitId !== null && tv.unitId !== undefined,
+            );
+            if (valueWithUnitId?.value != null) {
+              defaultValue = valueWithUnitId.value;
+              chosenFrom = `templateSettingValues (unitId: ${valueWithUnitId.unitId})`;
+            } else {
+              const fallback = setting.templateSettingValues.find(
+                (tv: any) => tv.value !== null && tv.value !== undefined,
+              );
+              defaultValue = fallback?.value;
+              chosenFrom = fallback
+                ? "templateSettingValues (no unitId)"
+                : "none";
+            }
+          }
+
+          // Typed (non-CSS) settings keep their object value intact.
+          if (isLetterLabelsSetting(setting.code)) {
+            return { ...setting, value: normalizeLetterLabelsValue(defaultValue) };
+          }
+          if (isPageMarginSetting(setting.code)) {
+            return { ...setting, value: normalizePageMarginValue(defaultValue) };
+          }
+
+          // Convert the resolved value object → CSS string
+          let cssString = "";
+          if (
+            typeof defaultValue === "object" &&
+            defaultValue !== null &&
+            Object.keys(defaultValue).length > 0
+          ) {
+            cssString = Object.entries(defaultValue)
+              .filter(([, v]) => v !== null && v !== undefined && v !== "null")
+              .map(([key, value]) => `${key}: ${value};`)
+              .join(" ");
+          } else if (typeof defaultValue === "string" && defaultValue.trim()) {
+            cssString = defaultValue;
+          }
+
+          // ─── PER-SETTING DEBUG ─────────────────────────────────────────────
+          console.groupCollapsed(
+            `%c[TemplateSettings] ${setting.code}`,
+            "color:#0ea5e9; font-weight:bold;",
+          );
+          console.log("  Full setting object:    ", setting);
+          console.log("  Outer value (API):      ", setting.value);
+          console.log(
+            "  templateSettingValues:  ",
+            setting.templateSettingValues,
+          );
+          console.log("  ✅ Chosen from:          ", chosenFrom);
+          console.log("  Raw defaultValue used:  ", defaultValue);
+          console.log(
+            "  Final CSS string:       ",
+            cssString || "(empty — no value)",
+          );
+          console.groupEnd();
+          // ──────────────────────────────────────────────────────────────────
+
+          return {
+            ...setting,
+            value: cssString,
+          };
+        })
+        .filter((s: any) => s !== null);
+
+      setSettings(initializedSettings);
+
+      const loadedResourceIds: Record<string, string | null> = {};
+      initializedSettings.forEach((setting) => {
+        if (!setting) return;
+        const unitValue = setting.templateSettingValues?.find(
+          (value: NonNullable<TemplateSampleSetting["templateSettingValues"]>[number]) =>
+            value.unitId != null,
+        );
+        const defaultValue = setting.templateSettingValues?.find(
+          (value: NonNullable<TemplateSampleSetting["templateSettingValues"]>[number]) =>
+            value.unitId == null,
+        );
+        loadedResourceIds[setting.id] =
+          setting.resourceId ??
+          unitValue?.resourceId ??
+          defaultValue?.resourceId ??
+          null;
+      });
+      setResourceIds(loadedResourceIds);
+
+      // Initialize all settings as using defaults
+      const defaultMap: Record<string, boolean> = {};
+      initializedSettings.forEach((setting) => {
+        if (setting) {
+          defaultMap[setting.id] = true;
+        }
+      });
+      setUseDefaultSettings(defaultMap);
+      setCustomSettings({});
+    } catch (err) {
+      console.error("Error loading settings:", err);
+      setError(t("error.loadingSettings", "Error loading style settings"));
+      toast.error(t("error.loadingSettings", "Error loading style settings"));
+    } finally {
+      setSettingsLoading(false);
+    }
+  };
+
+  const handleResourceIdChange = useCallback(
+    (settingId: string, resourceId: string | null) => {
+      setResourceIds((previous) => ({ ...previous, [settingId]: resourceId }));
+    },
+    [],
+  );
+
+  const handleGenerateSample = async () => {
+    if (!templateId) return;
+
+    try {
+      setLoading(true);
+      setError(null);
+
+      // Build header object - use first header if available
+      let headerObj: any = undefined;
+      if (selectedHeaderId) {
+        const selectedHeaderData = headers.find(
+          (h) => h.id === selectedHeaderId,
+        );
+        if (selectedHeaderData?.fileInfo) {
+          headerObj = selectedHeaderData.fileInfo;
+        }
+      } else if (headers.length > 0) {
+        // Use first header as default
+        headerObj = headers[0].fileInfo;
+      }
+
+      // Build footer object - use first footer if available
+      let footerObj: any = undefined;
+      if (selectedFooterId) {
+        const selectedFooterData = footers.find(
+          (f) => f.id === selectedFooterId,
+        );
+        if (selectedFooterData?.fileInfo) {
+          footerObj = selectedFooterData.fileInfo;
+        }
+      } else if (footers.length > 0) {
+        // Use first footer as default
+        footerObj = footers[0].fileInfo;
+      }
+
+      // Add unitId and header/footer to formData
+      const dataWithUnitIdAndHeaderFooter = {
+        ...formData,
+        unitId: unitId || "",
+        ...(headerObj && { header: headerObj }),
+        ...(footerObj && { footer: footerObj }),
+      };
+
+      const resolveSettingValue = (
+        setting: TemplateSampleSetting,
+      ): Record<string, unknown> => {
+        if (isLetterLabelsSetting(setting.code)) {
+          return normalizeLetterLabelsValue(setting.value);
+        }
+        if (isPageMarginSetting(setting.code)) {
+          return normalizePageMarginValue(setting.value);
+        }
+
+        const cssString =
+          typeof setting.value === "string" ? setting.value : "";
+        const valueObj = cssStringToObject(cssString);
+
+        if (valueObj["list-style"] === "disclosure-closed") {
+          const svgTriangle = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M4 2v12l10-6z"/></svg>`;
+          valueObj["list-style-image"] =
+            `url('data:image/svg+xml;base64,${btoa(svgTriangle)}')`;
+        }
+
+        if (
+          valueObj["list-style-image"] === "null" &&
+          valueObj["list-style"] === "disclosure-closed"
+        ) {
+          const svgTriangle = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M4 2v12l10-6z"/></svg>`;
+          valueObj["list-style-image"] =
+            `url('data:image/svg+xml;base64,${btoa(svgTriangle)}')`;
+        }
+
+        return valueObj;
+      };
+
+      const payload = buildTemplateSamplePayload({
+        data: dataWithUnitIdAndHeaderFooter,
+        settings,
+        resourceIds,
+        bulletResources,
+        resolveSettingValue,
+      });
+
+      const settingsForAPI = payload.settings ?? [];
+
+      const valuesToSave = settingsForAPI
+        .map((setting) => {
+          const valueObj = setting.value as Record<string, string>;
+
+          if (!valueObj || Object.keys(valueObj).length === 0) return null;
+
+          const resourceId = setting.resourceId ?? null;
+
+          return {
+            templateSettingId: setting.id!,
+            resourceId,
+            value: valueObj,
+          };
+        })
+        .filter((item) => item !== null) as Array<{
+        templateSettingId: string;
+        resourceId: string | null;
+        value: Record<string, string>;
+      }>;
+      console.log("Values to save:", valuesToSave);
+      const response = await TemplateService.generateSampleTemplate(
+        templateId,
+        payload,
+      );
+
+      if (response.pdf) {
+        console.log("PDF URL set:", response.pdf);
+        onGeneratePreview(response.pdf, valuesToSave);
+      } else {
+        setError(t("error.noPdfInResponse", "No PDF in response"));
+      }
+    } catch (err: any) {
+      const errorMessage =
+        err?.response?.data?.message ||
+        err?.message ||
+        t("error.generatingSample", "Error generating sample");
+      console.error("Error generating sample:", err);
+      setError(errorMessage);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleContentChange = useCallback((field: string, value: any) => {
+    setFormData((prev) => ({
+      ...prev,
+      content: {
+        ...prev.content,
+        [field]: value,
+      },
+    }));
+  }, []);
+
+  // Debounce timer for settings changes
+  const settingsDebounceTimer = useRef<NodeJS.Timeout | null>(null);
+
+  const handleSettingChange = useCallback(
+    (index: number, cssString: string) => {
+      console.log("handleSettingChange called", { index, cssString });
+
+      // ✅ Update settings immediately using functional update
+      setSettings((prevSettings) => {
+        const settingId = prevSettings[index]?.id;
+        if (!settingId) {
+          console.log("No settingId found at index", index);
+          return prevSettings;
+        }
+
+        // Create a new array with a new object for the changed item (avoid mutation)
+        const newSettings = prevSettings.map((s, i) =>
+          i === index ? { ...s, value: cssString } : s,
+        );
+
+        // Update related state immediately
+        setUseDefaultSettings((prev) => ({
+          ...prev,
+          [settingId]: false,
+        }));
+
+        setCustomSettings((prev) => ({
+          ...prev,
+          [settingId]: cssString,
+        }));
+
+        return newSettings;
+      });
+    },
+    [], // ✅ No dependencies - uses functional updates to avoid stale closures
+  );
+
+  const handleToggleDefault = useCallback(
+    (settingId: string) => {
+      setUseDefaultSettings((prev) => {
+        const newValue = !prev[settingId];
+
+        if (newValue) {
+          // Switching back to default - remove from custom
+          setCustomSettings((prevCustom) => {
+            const newCustom = { ...prevCustom };
+            delete newCustom[settingId];
+            return newCustom;
+          });
+
+          // Reset the setting value to default
+          const settingIndex = settings.findIndex((s) => s.id === settingId);
+          if (settingIndex >= 0) {
+            const defaultValue =
+              (settings[settingIndex] as any).templateSettingValues?.[0]
+                ?.value || {};
+            let cssString = "";
+            if (typeof defaultValue === "object" && defaultValue !== null) {
+              cssString = Object.entries(defaultValue)
+                .map(([key, value]) => `${key}: ${value};`)
+                .join(" ");
+            }
+            setSettings((prev) => {
+              const newSettings = [...prev];
+              newSettings[settingIndex].value = cssString;
+              return newSettings;
+            });
+          }
+        }
+
+        return { ...prev, [settingId]: newValue };
+      });
+    },
+    [settings],
+  );
+
+  const handleAddCollaborator = () => {
+    setFormData((prev) => ({
+      ...prev,
+      collaborators: [...prev.collaborators, { am: "", en: "" }],
+    }));
+  };
+
+  const handleCollaboratorChange = (
+    index: number,
+    lang: "am" | "en",
+    value: string,
+  ) => {
+    const newCollaborators = [...formData.collaborators];
+    newCollaborators[index][lang] = value;
+    setFormData((prev) => ({
+      ...prev,
+      collaborators: newCollaborators,
+    }));
+  };
+
+  const handleSelectCollaborator = (employeeId: string) => {
+    const employee = employees.find(
+      (emp: any) => emp.employeePositions?.[0]?.id === employeeId,
+    );
+    if (employee && !selectedCollaborators.includes(employeeId)) {
+      const newCollaborators = [
+        ...formData.collaborators,
+        {
+          am: employee.user?.name?.am || "",
+          en: employee.user?.name?.en || "",
+        },
+      ];
+      setFormData((prev) => ({
+        ...prev,
+        collaborators: newCollaborators,
+        content: {
+          ...prev.content,
+          from: newCollaborators.map((c) => c.en || c.am),
+        },
+      }));
+      setSelectedCollaborators([...selectedCollaborators, employeeId]);
+    }
+  };
+
+  const handleRemoveCollaborator = (index: number) => {
+    const newCollaborators = formData.collaborators.filter(
+      (_, i) => i !== index,
+    );
+    setFormData((prev) => ({
+      ...prev,
+      collaborators: newCollaborators,
+      content: {
+        ...prev.content,
+        from: newCollaborators.map((c) => c.en || c.am),
+      },
+    }));
+  };
+
+  const handleSelectInternalCC = (departmentId: string) => {
+    const dept = departments.find((d: any) => d.id === departmentId);
+    if (dept && !selectedInternalCC.includes(departmentId)) {
+      const newInternalCC = [...selectedInternalCC, departmentId];
+      setSelectedInternalCC(newInternalCC);
+      setFormData((prev) => ({
+        ...prev,
+        content: {
+          ...prev.content,
+          internalCC: newInternalCC.map((id) => {
+            const d = departments.find((d: any) => d.id === id);
+            return d?.name?.en || d?.name?.am || id;
+          }),
+        },
+      }));
+    }
+  };
+
+  const handleRemoveInternalCC = (departmentId: string) => {
+    const newInternalCC = selectedInternalCC.filter(
+      (id) => id !== departmentId,
+    );
+    setSelectedInternalCC(newInternalCC);
+    setFormData((prev) => ({
+      ...prev,
+      content: {
+        ...prev.content,
+        internalCC: newInternalCC.map((id) => {
+          const d = departments.find((d: any) => d.id === id);
+          return d?.name?.en || d?.name?.am || id;
+        }),
+      },
+    }));
+  };
+
+  const handleSelectExternalCC = (unitName: string) => {
+    if (!selectedExternalCC.includes(unitName)) {
+      const newExternalCC = [...selectedExternalCC, unitName];
+      setSelectedExternalCC(newExternalCC);
+      setFormData((prev) => ({
+        ...prev,
+        content: {
+          ...prev.content,
+          externalCC: newExternalCC,
+        },
+      }));
+    }
+  };
+
+  const handleRemoveExternalCC = (unitName: string) => {
+    const newExternalCC = selectedExternalCC.filter((u) => u !== unitName);
+    setSelectedExternalCC(newExternalCC);
+    setFormData((prev) => ({
+      ...prev,
+      content: {
+        ...prev.content,
+        externalCC: newExternalCC,
+      },
+    }));
+  };
+
+  const handleSelectRecipient = (recipientId: string) => {
+    if (!selectedRecipients.includes(recipientId)) {
+      const newRecipients = [...selectedRecipients, recipientId];
+      setSelectedRecipients(newRecipients);
+      setFormData((prev) => ({
+        ...prev,
+        content: {
+          ...prev.content,
+          to: newRecipients.map((id) => {
+            const dept = departments.find((d: any) => d.id === id);
+            const emp = employees.find(
+              (e: any) => e.employeePositions?.[0]?.id === id,
+            );
+            return (
+              dept?.name?.en ||
+              dept?.name?.am ||
+              emp?.user?.name?.en ||
+              emp?.user?.name?.am ||
+              id
+            );
+          }),
+        },
+      }));
+    }
+  };
+
+  const handleRemoveRecipient = (recipientId: string) => {
+    const newRecipients = selectedRecipients.filter((id) => id !== recipientId);
+    setSelectedRecipients(newRecipients);
+    setFormData((prev) => ({
+      ...prev,
+      content: {
+        ...prev.content,
+        to: newRecipients.map((id) => {
+          const dept = departments.find((d: any) => d.id === id);
+          const emp = employees.find(
+            (e: any) => e.employeePositions?.[0]?.id === id,
+          );
+          return (
+            dept?.name?.en ||
+            dept?.name?.am ||
+            emp?.user?.name?.en ||
+            emp?.user?.name?.am ||
+            id
+          );
+        }),
+      },
+    }));
+  };
+
+  if (loading && !template) {
+    return (
+      <div className="flex items-center justify-center h-96">
+        <Loader className="h-8 w-8 animate-spin text-purple-600" />
+      </div>
+    );
+  }
+
+  // Helper to get settings for a specific section
+  const getSettingsBySection = (sectionCode: string) => {
+    return settings.filter((s) => s.code.includes(sectionCode));
+  };
+
+  // Match any of the provided aliases so API code variations can still show in UI.
+  const getSettingsByAliases = (aliases: string[]) => {
+    const normalizedAliases = aliases.map((alias) => alias.toLowerCase());
+    return settings.filter((setting) => {
+      const code = setting.code.toLowerCase();
+      return normalizedAliases.some((alias) => code.includes(alias));
+    });
+  };
+
+  const renderSettingsEditors = (matchedSettings: TemplateSampleSetting[]) => {
+    if (matchedSettings.length === 0) return null;
+
+    return matchedSettings.map((setting) => {
+      const originalIndex = settings.findIndex((s) => s.code === setting.code);
+      return (
+        <StyleSettingsEditor
+          key={setting.code}
+          setting={setting}
+          index={originalIndex}
+          onChange={handleSettingChange}
+          isDefault={useDefaultSettings[setting.id] ?? true}
+          onToggleDefault={handleToggleDefault}
+          onListStyleResourceChange={(resourceId) =>
+            handleResourceIdChange(setting.id, resourceId)
+          }
+        />
+      );
+    });
+  };
+  console.log("form data", formData);
+  console.log("settings", settings);
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center gap-4">
+        <button
+          onClick={onBack}
+          className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
+          <ArrowLeft className="h-5 w-5 text-gray-600 dark:text-gray-400" />
+        </button>
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+            {t("template.sample", "Template Sample")}
+          </h1>
+          {template && (
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+              {template.name?.en || template.name?.am}
+            </p>
+          )}
+        </div>
+      </div>
+
+      {error && (
+        <div className="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-red-700 dark:text-red-400">
+          {error}
+        </div>
+      )}
+
+      {/* Two-column layout - grid with proper alignment */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Left column: collapsible sections (2 columns wide) */}
+        <div className="lg:col-span-2 space-y-4">
+          {/* Basic Information (unchanged) */}
+          <CollapsibleSection
+            title={t("template.basicInfo", "Basic Information")}
+            isExpanded={expandedSections.basicInfo}
+            onToggle={() => toggleSection("basicInfo")}>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  {t("template.recordType", "Record Type")}
+                </label>
+                <select
+                  value={formData.recordType}
+                  onChange={(e) =>
+                    setFormData((prev) => ({
+                      ...prev,
+                      recordType: e.target.value as "external" | "internal",
+                    }))
+                  }
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
+                  <option value="external">
+                    {t("template.external", "External")}
+                  </option>
+                  <option value="internal">
+                    {t("template.internal", "Internal")}
+                  </option>
+                </select>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  {t("template.preferredLanguage", "Preferred Language")}
+                </label>
+                <select
+                  value={formData.preferredLanguage}
+                  onChange={(e) =>
+                    setFormData((prev) => ({
+                      ...prev,
+                      preferredLanguage: e.target.value as "am" | "en",
+                    }))
+                  }
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
+                  <option value="am">{t("language.amharic", "Amharic")}</option>
+                  <option value="en">{t("language.english", "English")}</option>
+                </select>
+              </div>
+            </div>
+          </CollapsibleSection>
+
+          {/* Header & Footer Section */}
+          <CollapsibleSection
+            title={t("template.headerFooter", "Header & Footer")}
+            isExpanded={expandedSections.headerFooter}
+            onToggle={() => toggleSection("headerFooter")}>
+            <div className="space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    {t("addRecord.Header", "Header")}
+                  </label>
+                  <select
+                    value={selectedHeaderId}
+                    onChange={(e) => setSelectedHeaderId(e.target.value)}
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
+                    <option value="">
+                      {headers?.length
+                        ? t("addRecord.Select Header", "Select Header")
+                        : t(
+                            "addRecord.Loading Headers...",
+                            "Loading Headers...",
+                          )}
+                    </option>
+                    {headers?.map((header) => (
+                      <option key={header.id} value={header.id}>
+                        {header.name?.en || header.name?.am}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    {t("addRecord.Footer", "Footer")}
+                  </label>
+                  <select
+                    value={selectedFooterId}
+                    onChange={(e) => setSelectedFooterId(e.target.value)}
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
+                    <option value="">
+                      {footers?.length
+                        ? t("addRecord.Select Footer", "Select Footer")
+                        : t(
+                            "addRecord.Loading Footers...",
+                            "Loading Footers...",
+                          )}
+                    </option>
+                    {footers?.map((footer) => (
+                      <option key={footer.id} value={footer.id}>
+                        {footer.name?.en || footer.name?.am}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+
+              {selectedHeader && (
+                <div className="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 border-2 border-dashed border-gray-300 dark:border-gray-600">
+                  <p className="text-sm font-medium text-gray-600 dark:text-gray-300 mb-2">
+                    {t("addRecord.Header Preview", "Header Preview")}
+                  </p>
+                  <div
+                    dangerouslySetInnerHTML={{
+                      __html: sanitizeHtml(selectedHeader),
+                    }}
+                  />
+                </div>
+              )}
+
+              {/* Header Style Settings */}
+              {getSettingsBySection("header").length > 0 && (
+                <div className="mt-4">
+                  <h3 className="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-3">
+                    {t("template.headerStyleSettings", "Header Style Settings")}
+                  </h3>
+                  {getSettingsBySection("header").map((setting) => {
+                    const originalIndex = settings.findIndex(
+                      (s) => s.code === setting.code,
+                    );
+                    return (
+                      <StyleSettingsEditor
+                        key={setting.code}
+                        setting={setting}
+                        index={originalIndex}
+                        onChange={handleSettingChange}
+                        isDefault={useDefaultSettings[setting.id] ?? true}
+                        onToggleDefault={handleToggleDefault}
+                      />
+                    );
+                  })}
+                </div>
+              )}
+
+              {selectedFooter && (
+                <div className="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 border-2 border-dashed border-gray-300 dark:border-gray-600">
+                  <p className="text-sm font-medium text-gray-600 dark:text-gray-300 mb-2">
+                    {t("addRecord.Footer Preview", "Footer Preview")}
+                  </p>
+                  <div
+                    dangerouslySetInnerHTML={{
+                      __html: sanitizeHtml(selectedFooter),
+                    }}
+                  />
+                </div>
+              )}
+
+              {/* Footer Style Settings */}
+              {getSettingsBySection("footer").length > 0 && (
+                <div className="mt-4">
+                  <h3 className="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-3">
+                    {t("template.footerStyleSettings", "Footer Style Settings")}
+                  </h3>
+                  {getSettingsBySection("footer").map((setting) => {
+                    const originalIndex = settings.findIndex(
+                      (s) => s.code === setting.code,
+                    );
+                    return (
+                      <StyleSettingsEditor
+                        key={setting.code}
+                        setting={setting}
+                        index={originalIndex}
+                        onChange={handleSettingChange}
+                        isDefault={useDefaultSettings[setting.id] ?? true}
+                        onToggleDefault={handleToggleDefault}
+                      />
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          </CollapsibleSection>
+
+          {/* Content Section */}
+          <CollapsibleSection
+            title={t("template.content", "Content")}
+            isExpanded={expandedSections.content}
+            onToggle={() => toggleSection("content")}>
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  {t("template.subject", "Subject")}
+                </label>
+                <input
+                  type="text"
+                  value={formData.content.subject}
+                  onChange={(e) =>
+                    handleContentChange("subject", e.target.value)
+                  }
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
+                />
+
+                {/* Subject Style Settings */}
+                {getSettingsBySection("subject").length > 0 && (
+                  <div className="mt-4">
+                    <h4 className="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-3">
+                      {t(
+                        "template.subjectStyleSettings",
+                        "Subject Style Settings",
+                      )}
+                    </h4>
+                    {getSettingsBySection("subject").map((setting) => {
+                      const originalIndex = settings.findIndex(
+                        (s) => s.code === setting.code,
+                      );
+                      return (
+                        <StyleSettingsEditor
+                          key={setting.code}
+                          setting={setting}
+                          index={originalIndex}
+                          onChange={handleSettingChange}
+                          isDefault={useDefaultSettings[setting.id] ?? true}
+                          onToggleDefault={handleToggleDefault}
+                        />
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  {t("template.date", "Date")}
+                </label>
+                <input
+                  type="date"
+                  value={formData.content.date}
+                  onChange={(e) => handleContentChange("date", e.target.value)}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  {t("template.body", "Body")}
+                </label>
+                <textarea
+                  value={formData.content.body}
+                  onChange={(e) => handleContentChange("body", e.target.value)}
+                  rows={6}
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
+                />
+
+                {/* Body Style Settings */}
+                {getSettingsBySection("body").length > 0 && (
+                  <div className="mt-4">
+                    <h4 className="text-sm font-semibold text-gray-800 dark:text-gray-200 mb-3">
+                      {t("template.bodyStyleSettings", "Body Style Settings")}
+                    </h4>
+                    {getSettingsBySection("body").map((setting) => {
+                      const originalIndex = settings.findIndex(
+                        (s) => s.code === setting.code,
+                      );
+                      return (
+                        <StyleSettingsEditor
+                          key={setting.code}
+                          setting={setting}
+                          index={originalIndex}
+                          onChange={handleSettingChange}
+                          isDefault={useDefaultSettings[setting.id] ?? true}
+                          onToggleDefault={handleToggleDefault}
+                        />
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  {t("template.sincerelyText", "Sincerely Text")}
+                </label>
+                <input
+                  type="text"
+                  value={formData.content.sincerelyText}
+                  onChange={(e) =>
+                    handleContentChange("sincerelyText", e.target.value)
+                  }
+                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    {t("template.prefix", "Prefix")}
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.content.prefix}
+                    onChange={(e) =>
+                      handleContentChange("prefix", e.target.value)
+                    }
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
+                  />
+
+                  {/* Prefix Style Settings */}
+                  {getSettingsBySection("prefix").length > 0 && (
+                    <div className="mt-3">
+                      <h5 className="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-2">
+                        {t("template.prefixStyleSettings", "Prefix Style")}
+                      </h5>
+                      {getSettingsBySection("prefix").map((setting) => {
+                        const originalIndex = settings.findIndex(
+                          (s) => s.code === setting.code,
+                        );
+                        return (
+                          <StyleSettingsEditor
+                            key={setting.code}
+                            setting={setting}
+                            index={originalIndex}
+                            onChange={handleSettingChange}
+                            isDefault={useDefaultSettings[setting.id] ?? true}
+                            onToggleDefault={handleToggleDefault}
+                          />
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    {t("template.suffix", "Suffix")}
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.content.suffix}
+                    onChange={(e) =>
+                      handleContentChange("suffix", e.target.value)
+                    }
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
+                  />
+
+                  {/* Suffix Style Settings */}
+                  {getSettingsBySection("suffix").length > 0 && (
+                    <div className="mt-3">
+                      <h5 className="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-2">
+                        {t("template.suffixStyleSettings", "Suffix Style")}
+                      </h5>
+                      {getSettingsBySection("suffix").map((setting) => {
+                        const originalIndex = settings.findIndex(
+                          (s) => s.code === setting.code,
+                        );
+                        return (
+                          <StyleSettingsEditor
+                            key={setting.code}
+                            setting={setting}
+                            index={originalIndex}
+                            onChange={handleSettingChange}
+                            isDefault={useDefaultSettings[setting.id] ?? true}
+                            onToggleDefault={handleToggleDefault}
+                          />
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    {t("template.prefixCC", "Prefix CC")}
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.content.prefixCC}
+                    onChange={(e) =>
+                      handleContentChange("prefixCC", e.target.value)
+                    }
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
+                  />
+
+                  {/* CC Prefix Style Settings */}
+                  {getSettingsBySection("cc-prefix").length > 0 && (
+                    <div className="mt-3">
+                      <h5 className="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-2">
+                        {t("template.ccPrefixStyleSettings", "CC Prefix Style")}
+                      </h5>
+                      {getSettingsBySection("cc-prefix").map((setting) => {
+                        const originalIndex = settings.findIndex(
+                          (s) => s.code === setting.code,
+                        );
+                        return (
+                          <StyleSettingsEditor
+                            key={setting.code}
+                            setting={setting}
+                            index={originalIndex}
+                            onChange={handleSettingChange}
+                            isDefault={useDefaultSettings[setting.id] ?? true}
+                            onToggleDefault={handleToggleDefault}
+                          />
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    {t("template.suffixCC", "Suffix CC")}
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.content.suffixCC}
+                    onChange={(e) =>
+                      handleContentChange("suffixCC", e.target.value)
+                    }
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
+                  />
+
+                  {/* CC Suffix Style Settings */}
+                  {getSettingsBySection("cc-suffix").length > 0 && (
+                    <div className="mt-3">
+                      <h5 className="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-2">
+                        {t("template.ccSuffixStyleSettings", "CC Suffix Style")}
+                      </h5>
+                      {getSettingsBySection("cc-suffix").map((setting) => {
+                        const originalIndex = settings.findIndex(
+                          (s) => s.code === setting.code,
+                        );
+                        return (
+                          <StyleSettingsEditor
+                            key={setting.code}
+                            setting={setting}
+                            index={originalIndex}
+                            onChange={handleSettingChange}
+                            isDefault={useDefaultSettings[setting.id] ?? true}
+                            onToggleDefault={handleToggleDefault}
+                          />
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              <div>
+                <label className="flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={formData.content.isWithDelegateSignature}
+                    onChange={(e) =>
+                      handleContentChange(
+                        "isWithDelegateSignature",
+                        e.target.checked,
+                      )
+                    }
+                    className="w-4 h-4 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-800"
+                  />
+                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                    {t(
+                      "template.withDelegateSignature",
+                      "With Delegate Signature",
+                    )}
+                  </span>
+                </label>
+              </div>
+
+              {formData.content.isWithDelegateSignature && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    {t("template.delegatorName", "Delegator Name")}
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.content.delegatorName}
+                    onChange={(e) =>
+                      handleContentChange("delegatorName", e.target.value)
+                    }
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
+                  />
+                </div>
+              )}
+            </div>
+          </CollapsibleSection>
+
+          {/* Collaborators (unchanged) */}
+          <CollapsibleSection
+            title={t("template.collaborators", "Collaborators")}
+            isExpanded={expandedSections.collaborators}
+            onToggle={() => toggleSection("collaborators")}>
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <div className="flex gap-2">
+                  <select
+                    onChange={(e) => {
+                      if (e.target.value) {
+                        handleSelectCollaborator(e.target.value);
+                        e.target.value = "";
+                      }
+                    }}
+                    className="px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
+                    <option value="">
+                      {t("common.selectEmployee", "Select Employee")}
+                    </option>
+                    {employees.map((emp: any) => (
+                      <option
+                        key={emp.employeePositions?.[0]?.id}
+                        value={emp.employeePositions?.[0]?.id}>
+                        {emp.user?.name?.en || emp.user?.name?.am}
+                      </option>
+                    ))}
+                  </select>
+                  <button
+                    onClick={handleAddCollaborator}
+                    className="px-3 py-1 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors flex items-center gap-1">
+                    <Plus className="h-4 w-4" />
+                    {t("common.add", "Add")}
+                  </button>
+                </div>
+              </div>
+
+              {formData.collaborators.map((collab, idx) => (
+                <div
+                  key={idx}
+                  className="grid grid-cols-2 gap-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg relative">
+                  <button
+                    onClick={() => handleRemoveCollaborator(idx)}
+                    className="absolute top-2 right-2 p-1 hover:bg-red-100 dark:hover:bg-red-900 rounded transition-colors">
+                    <X className="h-4 w-4 text-red-600 dark:text-red-400" />
+                  </button>
+                  <div>
+                    <label className="block text-xs font-medium text-gray-600 dark:text-gray-300 mb-1">
+                      {t("language.amharic", "Amharic")}
+                    </label>
+                    <input
+                      type="text"
+                      value={collab.am}
+                      onChange={(e) =>
+                        handleCollaboratorChange(idx, "am", e.target.value)
+                      }
+                      className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-sm dark:bg-gray-600 dark:text-gray-200"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-xs font-medium text-gray-600 dark:text-gray-300 mb-1">
+                      {t("language.english", "English")}
+                    </label>
+                    <input
+                      type="text"
+                      value={collab.en}
+                      onChange={(e) =>
+                        handleCollaboratorChange(idx, "en", e.target.value)
+                      }
+                      className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-sm dark:bg-gray-600 dark:text-gray-200"
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CollapsibleSection>
+
+          {/* Recipients & CC (unchanged) */}
+          <CollapsibleSection
+            title={t("template.recipientsAndCC", "Recipients & CC")}
+            isExpanded={expandedSections.recipients}
+            onToggle={() => toggleSection("recipients")}>
+            <div className="space-y-6">
+              {/* Internal CC */}
+              <div>
+                <h3 className="text-md font-medium text-gray-800 dark:text-gray-200 mb-2">
+                  {t("template.internalCC", "Internal CC")}
+                </h3>
+                <div className="flex items-center justify-between mb-2">
+                  <select
+                    onChange={(e) => {
+                      if (e.target.value) {
+                        handleSelectInternalCC(e.target.value);
+                        e.target.value = "";
+                      }
+                    }}
+                    className="px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
+                    <option value="">
+                      {t("common.selectDepartment", "Select Department")}
+                    </option>
+                    {departments.map((dept: any) => (
+                      <option key={dept.id} value={dept.id}>
+                        {dept.name?.en || dept.name?.am}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  {selectedInternalCC.map((deptId) => {
+                    const dept = departments.find((d: any) => d.id === deptId);
+                    return (
+                      <div
+                        key={deptId}
+                        className="flex items-center gap-2 px-3 py-1 bg-purple-100 dark:bg-purple-900/40 text-purple-700 dark:text-purple-300 rounded-full text-sm">
+                        <span>{dept?.name?.en || dept?.name?.am}</span>
+                        <button
+                          onClick={() => handleRemoveInternalCC(deptId)}
+                          className="hover:text-purple-900 dark:hover:text-purple-100">
+                          <X className="h-4 w-4" />
+                        </button>
+                      </div>
+                    );
+                  })}
+                </div>
+
+                {renderSettingsEditors(
+                  getSettingsByAliases([
+                    "internal-cc",
+                    "internalcc",
+                    "cc-internal",
+                    "ccinternal",
+                  ]),
+                )}
+              </div>
+
+              {/* External CC */}
+              <div>
+                <h3 className="text-md font-medium text-gray-800 dark:text-gray-200 mb-2">
+                  {t("template.externalCC", "External CC")}
+                </h3>
+                <div className="flex items-center justify-between mb-2">
+                  <input
+                    type="text"
+                    placeholder={t("common.enterName", "Enter name")}
+                    onKeyPress={(e) => {
+                      if (e.key === "Enter" && e.currentTarget.value) {
+                        handleSelectExternalCC(e.currentTarget.value);
+                        e.currentTarget.value = "";
+                      }
+                    }}
+                    className="px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
+                  />
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  {selectedExternalCC.map((unitName, idx) => (
+                    <div
+                      key={idx}
+                      className="flex items-center gap-2 px-3 py-1 bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300 rounded-full text-sm">
+                      <span>{unitName}</span>
+                      <button
+                        onClick={() => handleRemoveExternalCC(unitName)}
+                        className="hover:text-blue-900 dark:hover:text-blue-100">
+                        <X className="h-4 w-4" />
+                      </button>
+                    </div>
+                  ))}
+                </div>
+
+                {renderSettingsEditors(
+                  getSettingsByAliases([
+                    "external-cc",
+                    "externalcc",
+                    "cc-external",
+                    "ccexternal",
+                  ]),
+                )}
+              </div>
+
+              {/* Shared CC Receiver Style */}
+              <div>
+                {renderSettingsEditors(getSettingsByAliases(["cc-receiver"]))}
+              </div>
+
+              {/* Recipients */}
+              <div>
+                <h3 className="text-md font-medium text-gray-800 dark:text-gray-200 mb-2">
+                  {t("template.recipients", "Recipients")}
+                </h3>
+                <div className="flex items-center justify-between mb-2">
+                  <select
+                    onChange={(e) => {
+                      if (e.target.value) {
+                        handleSelectRecipient(e.target.value);
+                        e.target.value = "";
+                      }
+                    }}
+                    className="px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
+                    <option value="">
+                      {t("common.selectRecipient", "Select Recipient")}
+                    </option>
+                    {departments.map((dept: any) => (
+                      <option key={dept.id} value={dept.id}>
+                        {dept.name?.en || dept.name?.am}
+                      </option>
+                    ))}
+                    {employees.map((emp: any) => (
+                      <option
+                        key={emp.employeePositions?.[0]?.id}
+                        value={emp.employeePositions?.[0]?.id}>
+                        {emp.user?.name?.en || emp.user?.name?.am}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  {selectedRecipients.map((recipientId) => {
+                    const dept = departments.find(
+                      (d: any) => d.id === recipientId,
+                    );
+                    const emp = employees.find(
+                      (e: any) => e.employeePositions?.[0]?.id === recipientId,
+                    );
+                    const name =
+                      dept?.name?.en ||
+                      dept?.name?.am ||
+                      emp?.user?.name?.en ||
+                      emp?.user?.name?.am;
+                    return (
+                      <div
+                        key={recipientId}
+                        className="flex items-center gap-2 px-3 py-1 bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300 rounded-full text-sm">
+                        <span>{name}</span>
+                        <button
+                          onClick={() => handleRemoveRecipient(recipientId)}
+                          className="hover:text-blue-900 dark:hover:text-blue-100">
+                          <X className="h-4 w-4" />
+                        </button>
+                      </div>
+                    );
+                  })}
+                </div>
+
+                {renderSettingsEditors(
+                  getSettingsByAliases([
+                    "recipient",
+                    "recipients",
+                    "to",
+                    "receiver",
+                  ]),
+                )}
+              </div>
+            </div>
+          </CollapsibleSection>
+
+          {/* Generate Button */}
+          <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
+            <button
+              onClick={handleGenerateSample}
+              disabled={loading || settingsLoading}
+              className="w-full px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:bg-gray-400 dark:disabled:bg-gray-600 transition-colors font-medium flex items-center justify-center gap-2">
+              {loading || settingsLoading ? (
+                <>
+                  <Loader className="h-4 w-4 animate-spin" />
+                  {t("common.generating", "Generating...")}
+                </>
+              ) : (
+                t("template.generateSample", "Generate Sample")
+              )}
+            </button>
+          </div>
+        </div>
+
+        {/* Right column: live preview - scrolls with form */}
+        <div className="lg:col-span-1">
+          <div>
+            {settingsLoading ? (
+              <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 flex items-center justify-center min-h-96">
+                <Loader className="h-8 w-8 animate-spin text-purple-600" />
+              </div>
+            ) : (
+              <TemplateLivePreview
+                formData={formData}
+                settings={settings}
+                selectedHeader={selectedHeader}
+                selectedFooter={selectedFooter}
+                templateName={template?.name?.en || template?.name?.am}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/TemplateSampleForm.utils.ts b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/TemplateSampleForm.utils.ts
new file mode 100644
index 000000000..1e65e0d9c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/TemplateSampleForm.utils.ts
@@ -0,0 +1,105 @@
+/**
+ * Pure CSS utility functions for TemplateSampleForm.
+ * Extracted here to keep the main form component under 300 lines.
+ */
+
+/** Normalize list-style CSS properties — preserves special values like disclosure-closed */
+export function normalizeListStyleProps(
+  obj: Record<string, string>,
+): Record<string, string> {
+  const normalized = { ...obj };
+  const specialListStyles = ["disclosure-closed", "disclosure-open", "none"];
+
+  if (normalized["list-style"]) {
+    const listStyleValue = normalized["list-style"].split(" ")[0];
+    if (specialListStyles.includes(listStyleValue)) {
+      delete normalized["list-style-type"];
+      return normalized;
+    }
+    if (!normalized["list-style-type"]) {
+      normalized["list-style-type"] = listStyleValue;
+    }
+  }
+
+  if (normalized["list-style-type"] && !normalized["list-style"]) {
+    normalized["list-style"] = normalized["list-style-type"];
+  }
+
+  return normalized;
+}
+
+/** Serialize a style object to a CSS declaration string */
+export function styleObjectToCss(style: Record<string, unknown>): string {
+  return Object.entries(style)
+    .filter(([, v]) => v !== null && v !== undefined && v !== "null" && v !== "")
+    .map(([k, v]) => `${k}: ${String(v)};`)
+    .join(" ");
+}
+
+/**
+ * Parse CSS declarations from a string, correctly handling data URIs
+ * (colons and semicolons inside url(...) are not treated as delimiters).
+ */
+export function parseCSSDeclarations(cssString: string): Array<[string, string]> {
+  const results: Array<[string, string]> = [];
+  let depth = 0;
+  let current = "";
+
+  for (let i = 0; i < cssString.length; i++) {
+    const ch = cssString[i];
+    if (ch === "(") depth++;
+    else if (ch === ")") depth--;
+
+    if (ch === ";" && depth === 0) {
+      current = current.trim();
+      if (current) {
+        const colonIdx = current.indexOf(":");
+        if (colonIdx > 0) {
+          const prop = current.slice(0, colonIdx).trim();
+          const val = current.slice(colonIdx + 1).trim();
+          if (prop && val) results.push([prop, val]);
+        }
+      }
+      current = "";
+    } else {
+      current += ch;
+    }
+  }
+
+  // Handle last declaration with no trailing semicolon
+  current = current.trim();
+  if (current) {
+    const colonIdx = current.indexOf(":");
+    if (colonIdx > 0) {
+      const prop = current.slice(0, colonIdx).trim();
+      const val = current.slice(colonIdx + 1).trim();
+      if (prop && val) results.push([prop, val]);
+    }
+  }
+
+  return results;
+}
+
+/** Convert a CSS string to a normalized style object (data-URI safe) */
+export function cssStringToObject(cssString: string): Record<string, string> {
+  const obj: Record<string, string> = {};
+  parseCSSDeclarations(cssString).forEach(([prop, val]) => {
+    obj[prop] = val;
+  });
+  return normalizeListStyleProps(obj);
+}
+
+/** Convert a simple CSS string to a style object (no data-URI support) */
+export function parseCSSStringToObject(cssString: string): Record<string, string> {
+  const obj: Record<string, string> = {};
+  cssString
+    .split(";")
+    .filter((d) => d.trim())
+    .forEach((declaration) => {
+      const [property, value] = declaration.split(":").map((s) => s.trim());
+      if (property && value) {
+        obj[property] = value;
+      }
+    });
+  return normalizeListStyleProps(obj);
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/TemplateSampleList.tsx b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/TemplateSampleList.tsx
new file mode 100644
index 000000000..9bbe6fc0a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/TemplateSampleList.tsx
@@ -0,0 +1,90 @@
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Loader, Settings } from "lucide-react"; // Changed icon to Settings
+import { TemplateService } from "@/user-management/services/api/templateService";
+import { TemplateResource } from "@/user-management/services/TemplateConfiguration/types/templateTypes";
+
+interface TemplateSampleListProps {
+  onSelectTemplate: (templateId: string) => void;
+}
+
+export const TemplateSampleList = ({ onSelectTemplate }: TemplateSampleListProps) => {
+  const { t } = useTranslation();
+  const [templates, setTemplates] = useState<TemplateResource[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    loadTemplates();
+  }, []);
+
+  const loadTemplates = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const response = await TemplateService.getAllTemplates();
+      setTemplates(response.items || []);
+    } catch (err) {
+      setError(t("error.loadingTemplates", "Error loading templates"));
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-96">
+        <Loader className="h-8 w-8 animate-spin text-purple-600" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {error && (
+        <div className="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-red-700 dark:text-red-400">
+          {error}
+        </div>
+      )}
+
+      {templates.length === 0 ? (
+        <div className="text-center py-12">
+          <p className="text-gray-500 dark:text-gray-400">
+            {t("template.noTemplates", "No templates available")}
+          </p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {templates.map((template) => (
+            <div
+              key={template.id}
+              className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 hover:shadow-lg transition-shadow"
+            >
+              <div className="space-y-3">
+                <h3 className="font-semibold text-gray-900 dark:text-white">
+                  {template.name?.en || template.name?.am}
+                </h3>
+                <p className="text-sm text-gray-600 dark:text-gray-300">
+                  {template.description?.en || template.description?.am}
+                </p>
+                {template.fileInfo && (
+                  <p className="text-xs text-gray-500 dark:text-gray-400">
+                    {template.fileInfo.fileName}
+                  </p>
+                )}
+              </div>
+                <button
+                  onClick={() => onSelectTemplate(template.id)}
+                  className="mt-4 w-full px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 dark:hover:bg-purple-500 transition-colors font-medium flex items-center justify-center gap-2"
+                >
+                <Settings className="h-4 w-4" />
+                {t("template.configureStyles", "Configure Styles")}
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/TemplateSamplePage.tsx b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/TemplateSamplePage.tsx
new file mode 100644
index 000000000..e61d16343
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/TemplateSamplePage.tsx
@@ -0,0 +1,146 @@
+import { useState, useEffect, useCallback } from "react";
+import { useSearchParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { Loader } from "lucide-react";
+import { TemplateService } from "@/user-management/services/api/templateService";
+import { TemplateResource } from "@/user-management/services/TemplateConfiguration/types/templateTypes";
+import { StyleSettingsPage } from "./StyleSettingsPage";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+
+export const TemplateSamplePage = ({ unitId }: { unitId?: string }) => {
+  const { t } = useTranslation();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [templates, setTemplates] = useState<TemplateResource[]>([]);
+  const [selectedTemplateId, setSelectedTemplateId] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    loadTemplates();
+  }, []);
+
+  const loadTemplates = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const response = await TemplateService.getAllTemplates();
+      setTemplates(response.items || []);
+      const templateFromUrl = searchParams.get("template");
+      const matchedTemplate = response.items?.find(
+        (item) => item.id === templateFromUrl,
+      );
+      if (matchedTemplate) {
+        setSelectedTemplateId(matchedTemplate.id);
+      } else if (response.items?.length > 0) {
+        const firstId = response.items[0].id;
+        setSelectedTemplateId(firstId);
+        setSearchParams(
+          (prev) => {
+            const next = new URLSearchParams(prev);
+            next.set("template", firstId);
+            return next;
+          },
+          { replace: true },
+        );
+      }
+    } catch (err) {
+      setError(t("error.loadingTemplates", "Error loading templates"));
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleTemplateChange = (templateId: string) => {
+    setSelectedTemplateId(templateId);
+    setSearchParams(
+      (prev) => {
+        const next = new URLSearchParams(prev);
+        next.set("template", templateId);
+        return next;
+      },
+      { replace: true },
+    );
+  };
+
+  const handleBack = () => {
+      setSelectedTemplateId(null);
+    // If you want to go back to content management, you might need to pass a callback.
+    // For now, we just reset selection (or you could navigate back).
+    // Since this is directly rendered in ContentManagement, we can keep as is.
+    // Alternatively, you could clear the selection to show a "select template" message.
+    // We'll just keep the dropdown so user can choose another template.
+    // If you need a back button to exit the whole page, add one above.
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-96">
+        <Loader className="h-8 w-8 animate-spin text-purple-600" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700">
+        {error}
+      </div>
+    );
+  }
+
+  if (templates.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-gray-500 dark:text-gray-400">
+          {t("template.noTemplates", "No templates available")}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Template Selector */}
+      <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+        <div className="flex items-center gap-4">
+          <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
+            {t("template.selectTemplate", "Select Template")}
+          </label>
+          <Select value={selectedTemplateId || ""} onValueChange={handleTemplateChange}>
+            <SelectTrigger className="w-64">
+              <SelectValue placeholder={t("template.selectTemplate")} />
+            </SelectTrigger>
+            <SelectContent>
+              {templates.map((template) => (
+                <SelectItem key={template.id} value={template.id}>
+                  {template.name?.en || template.name?.am}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {/* Style Editor */}
+      {selectedTemplateId && unitId ? (
+        <StyleSettingsPage
+          key={`${unitId}-${selectedTemplateId}`}
+          templateId={selectedTemplateId}
+          unitId={unitId}
+          onBack={handleBack}
+        />
+      ) : selectedTemplateId && !unitId ? (
+        <div className="rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-200">
+          {t("organization.selectUnit", "Please select a unit to edit style settings.")}
+        </div>
+      ) : null}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/TemplateSamplePreviewPage.tsx b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/TemplateSamplePreviewPage.tsx
new file mode 100644
index 000000000..dd0479d5e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/TemplateSamplePreviewPage.tsx
@@ -0,0 +1,108 @@
+import { useTranslation } from "react-i18next";
+import { ArrowLeft, Download, Loader, X } from "lucide-react";
+
+interface TemplateSamplePreviewPageProps {
+  pdfUrl: string;
+  onBack: () => void;
+  onSaveSettings: () => void;
+  isSavingSettings: boolean;
+  canSaveSettings: boolean;
+}
+
+export const TemplateSamplePreviewPage = ({
+  pdfUrl,
+  onBack,
+  onSaveSettings,
+  isSavingSettings,
+  canSaveSettings,
+}: TemplateSamplePreviewPageProps) => {
+  const { t } = useTranslation();
+
+  const handleDownloadPDF = () => {
+    if (!pdfUrl) return;
+
+    const link = document.createElement("a");
+    link.href = pdfUrl;
+    link.download = `template-sample-${Date.now()}.pdf`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  if (!pdfUrl) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 text-center">
+          <p className="text-gray-600 dark:text-gray-300 mb-4">
+            {t("template.noPdfAvailable", "No PDF available")}
+          </p>
+          <button
+            onClick={onBack}
+            className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
+          >
+            {t("common.back", "Back")}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={onBack}
+            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
+          >
+            <ArrowLeft className="h-5 w-5 text-gray-600 dark:text-gray-400" />
+          </button>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+            {t("template.pdfPreview", "PDF Preview")}
+          </h1>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={onSaveSettings}
+            disabled={isSavingSettings || !canSaveSettings}
+            className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:bg-gray-400 dark:disabled:bg-gray-600 transition-colors font-medium flex items-center gap-2"
+          >
+            {isSavingSettings ? (
+              <>
+                <Loader className="h-4 w-4 animate-spin" />
+                {t("common.saving", "Saving...")}
+              </>
+            ) : (
+              t("template.saveSettings", "Save Settings")
+            )}
+          </button>
+          <button
+            onClick={handleDownloadPDF}
+            className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium flex items-center gap-2"
+          >
+            <Download className="h-4 w-4" />
+            {t("common.download", "Download")}
+          </button>
+          <button
+            onClick={onBack}
+            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
+          >
+            <X className="h-5 w-5 text-gray-600 dark:text-gray-400" />
+          </button>
+        </div>
+      </div>
+
+      {/* PDF Viewer */}
+      <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden shadow-lg">
+        <div className="w-full h-[calc(100vh-200px)] bg-gray-50 dark:bg-gray-700">
+          <iframe
+            src={pdfUrl}
+            className="w-full h-full border-0"
+            title={t("template.pdfPreview", "PDF Preview")}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/FontSettingsEditor.tsx b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/FontSettingsEditor.tsx
new file mode 100644
index 000000000..e67297027
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/FontSettingsEditor.tsx
@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { TemplateService } from "@/user-management/services/api/templateService";
+import { TemplateSampleSetting } from "@/user-management/services/TemplateConfiguration/types/templateTypes";
+import { FONT_RESOURCE_TYPE_ID } from "../utils/templateResourceConstants";
+import {
+  StyleSettingCard,
+  StyleSettingSelect,
+} from "./styleSettingsUi";
+
+const EMPTY_FONT_VALUE = "__none__";
+
+export const isFontSetting = (code: string): boolean =>
+  code.trim().toLowerCase() === "letter-fonts";
+
+type Props = {
+  setting: TemplateSampleSetting;
+  isDefault: boolean;
+  resourceId: string | null;
+  onToggleDefault: (settingId: string) => void;
+  onResourceIdChange: (resourceId: string | null) => void;
+};
+
+export const FontSettingsEditor: React.FC<Props> = ({
+  setting,
+  isDefault,
+  resourceId,
+  onToggleDefault,
+  onResourceIdChange,
+}) => {
+  const { t, i18n } = useTranslation();
+  const [fonts, setFonts] = useState<
+    Array<{ id: string; name?: { en?: string; am?: string } }>
+  >([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    const loadFonts = async () => {
+      setLoading(true);
+      try {
+        const response = await TemplateService.getTemplates({
+          resourceTypeId: FONT_RESOURCE_TYPE_ID,
+        });
+        if (!cancelled) setFonts(response.items);
+      } catch (error) {
+        console.error("Failed to load font resources", error);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    };
+    void loadFonts();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const locale = i18n.language?.startsWith("am") ? "am" : "en";
+
+  return (
+    <StyleSettingCard
+      title={t("template.fonts", "Fonts")}
+      subtitle={t("template.fontsHint", "Select an optional font resource.")}
+      code={setting.code}
+      isDefault={isDefault}
+      onToggleDefault={() => onToggleDefault(setting.id)}
+    >
+      <fieldset disabled={isDefault}>
+        <StyleSettingSelect
+          label={t("template.fontResource", "Font file")}
+          value={resourceId ?? EMPTY_FONT_VALUE}
+          disabled={loading || isDefault}
+          onValueChange={(value) =>
+            onResourceIdChange(value === EMPTY_FONT_VALUE ? null : value)
+          }
+          placeholder={t("template.selectFont", "Select a font")}
+          options={[
+            {
+              value: EMPTY_FONT_VALUE,
+              label: t("template.selectFont", "Select a font"),
+            },
+            ...fonts.map((font) => ({
+              value: font.id,
+              label: font.name?.[locale] || font.name?.en || font.id,
+            })),
+          ]}
+        />
+      </fieldset>
+    </StyleSettingCard>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/LayoutConfigEditor.tsx b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/LayoutConfigEditor.tsx
new file mode 100644
index 000000000..db7a6a7f2
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/LayoutConfigEditor.tsx
@@ -0,0 +1,789 @@
+import React, { useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { TemplateSampleSetting } from "@/user-management/services/TemplateConfiguration/types/templateTypes";
+import type { PageMarginValue } from "./PageMarginEditor";
+import {
+	LetterAssetsPlacementCanvas,
+	normalizeAbsoluteAssetOrder,
+	type LetterAbsoluteAssetKey,
+} from "./LetterAssetsPlacementCanvas";
+import {
+	normalizeLayoutPositionValue,
+	toAbsolutePayloadPosition,
+	buildDefaultPositionsByLanguage,
+	type LayoutPositionValue,
+	type LetterLanguage,
+} from "./layout-position";
+
+export const LAYOUT_CONFIG_SETTING_CODE = "letter-layout-config";
+
+export type LetterLayoutSectionKey =
+	| "reference"
+	| "receivers"
+	| "sender"
+	| "subject"
+	| "body"
+	| "closing"
+	| "cc"
+	| "forYourReference";
+
+export type LetterLayoutHorizontalAlign = "auto" | "start" | "center" | "end";
+export type LetterClosingAssetKey = "signatures" | "seal";
+export type LetterSenderAssetKey = "signature" | "stamp";
+export type LetterStampPlacement = "below-last-signature" | "beside-signatures";
+
+export type LetterClosingLanguagePositions = {
+	signatures: LayoutPositionValue;
+	seal: LayoutPositionValue;
+	stamp: LayoutPositionValue;
+};
+
+export type LetterLayoutPositionsByLanguage = {
+	am: LetterClosingLanguagePositions;
+	en: LetterClosingLanguagePositions;
+};
+
+export type LetterLayoutConfigValue = {
+	sectionOrder: LetterLayoutSectionKey[];
+	signatures: {
+		widthPt: number;
+		heightPx: number;
+		gapPx: number;
+		align: LetterLayoutHorizontalAlign;
+		position: LayoutPositionValue;
+	};
+	seal: { widthPx: number; heightPx: number; position: LayoutPositionValue };
+	stamp: {
+		widthPt: number;
+		heightPx: number;
+		placement: LetterStampPlacement;
+		position: LayoutPositionValue;
+	};
+	sender: {
+		align: LetterLayoutHorizontalAlign;
+		assetOrder: LetterSenderAssetKey[];
+		signature: LayoutPositionValue;
+		stamp: LayoutPositionValue;
+	};
+	closingAssetOrder: LetterClosingAssetKey[];
+	absoluteAssetOrder: LetterAbsoluteAssetKey[];
+	positionsByLanguage: LetterLayoutPositionsByLanguage;
+};
+
+const ALL_SECTION_KEYS: LetterLayoutSectionKey[] = [
+	"reference",
+	"receivers",
+	"sender",
+	"subject",
+	"body",
+	"closing",
+	"cc",
+	"forYourReference",
+];
+
+const DEFAULT_POSITIONS_BY_LANGUAGE = buildDefaultPositionsByLanguage();
+
+const DEFAULT_LAYOUT_CONFIG: LetterLayoutConfigValue = {
+	sectionOrder: [...ALL_SECTION_KEYS],
+	signatures: {
+		widthPt: 96,
+		heightPx: 50,
+		gapPx: 20,
+		align: "auto",
+		position: { ...DEFAULT_POSITIONS_BY_LANGUAGE.am.signatures },
+	},
+	seal: {
+		widthPx: 140,
+		heightPx: 140,
+		position: { ...DEFAULT_POSITIONS_BY_LANGUAGE.am.seal },
+	},
+	stamp: {
+		widthPt: 96,
+		heightPx: 50,
+		placement: "below-last-signature",
+		position: { ...DEFAULT_POSITIONS_BY_LANGUAGE.am.stamp },
+	},
+	sender: {
+		align: "auto",
+		assetOrder: ["signature", "stamp"],
+		signature: normalizeLayoutPositionValue(null, "senderSignature"),
+		stamp: normalizeLayoutPositionValue(null, "senderStamp"),
+	},
+	closingAssetOrder: ["signatures", "seal"],
+	absoluteAssetOrder: [
+		"signatures",
+		"seal",
+		"stamp",
+		"senderSignature",
+		"senderStamp",
+	],
+	positionsByLanguage: DEFAULT_POSITIONS_BY_LANGUAGE,
+};
+
+const HORIZONTAL_ALIGNS: LetterLayoutHorizontalAlign[] = [
+	"auto",
+	"start",
+	"center",
+	"end",
+];
+const STAMP_PLACEMENTS: LetterStampPlacement[] = [
+	"below-last-signature",
+	"beside-signatures",
+];
+const CLOSING_ASSET_KEYS: LetterClosingAssetKey[] = ["signatures", "seal"];
+const SENDER_ASSET_KEYS: LetterSenderAssetKey[] = ["signature", "stamp"];
+
+function parsePositiveNumber(value: unknown, fallback: number): number {
+	if (typeof value === "number" && Number.isFinite(value) && value > 0) {
+		return value;
+	}
+	if (typeof value === "string") {
+		const parsed = Number.parseFloat(value.trim());
+		if (Number.isFinite(parsed) && parsed > 0) return parsed;
+	}
+	return fallback;
+}
+
+function isSectionKey(value: unknown): value is LetterLayoutSectionKey {
+	return (
+		typeof value === "string" &&
+		ALL_SECTION_KEYS.includes(value as LetterLayoutSectionKey)
+	);
+}
+
+function parseAlign(value: unknown, fallback: LetterLayoutHorizontalAlign): LetterLayoutHorizontalAlign {
+	return typeof value === "string" &&
+		HORIZONTAL_ALIGNS.includes(value as LetterLayoutHorizontalAlign)
+		? (value as LetterLayoutHorizontalAlign)
+		: fallback;
+}
+
+function parseStampPlacement(value: unknown): LetterStampPlacement {
+	return typeof value === "string" &&
+		STAMP_PLACEMENTS.includes(value as LetterStampPlacement)
+		? (value as LetterStampPlacement)
+		: DEFAULT_LAYOUT_CONFIG.stamp.placement;
+}
+
+function parseClosingAssetOrder(value: unknown): LetterClosingAssetKey[] {
+	if (!Array.isArray(value)) return [...DEFAULT_LAYOUT_CONFIG.closingAssetOrder];
+	const seen = new Set<LetterClosingAssetKey>();
+	const order: LetterClosingAssetKey[] = [];
+	for (const item of value) {
+		if (
+			(item === "signatures" || item === "seal") &&
+			!seen.has(item as LetterClosingAssetKey)
+		) {
+			seen.add(item as LetterClosingAssetKey);
+			order.push(item as LetterClosingAssetKey);
+		}
+	}
+	for (const key of CLOSING_ASSET_KEYS) {
+		if (!seen.has(key)) order.push(key);
+	}
+	return order;
+}
+
+function parseSenderAssetOrder(value: unknown): LetterSenderAssetKey[] {
+	if (!Array.isArray(value)) return [...DEFAULT_LAYOUT_CONFIG.sender.assetOrder];
+	const seen = new Set<LetterSenderAssetKey>();
+	const order: LetterSenderAssetKey[] = [];
+	for (const item of value) {
+		if (
+			(item === "signature" || item === "stamp") &&
+			!seen.has(item as LetterSenderAssetKey)
+		) {
+			seen.add(item as LetterSenderAssetKey);
+			order.push(item as LetterSenderAssetKey);
+		}
+	}
+	for (const key of SENDER_ASSET_KEYS) {
+		if (!seen.has(key)) order.push(key);
+	}
+	return order;
+}
+
+function parseClosingLanguagePositions(
+	raw: unknown,
+	language: LetterLanguage,
+	fallback: LetterClosingLanguagePositions,
+	flatFallback?: Partial<LetterClosingLanguagePositions>,
+): LetterClosingLanguagePositions {
+	const record =
+		raw != null && typeof raw === "object" && !Array.isArray(raw)
+			? (raw as Record<string, unknown>)
+			: {};
+	return {
+		signatures: toAbsolutePayloadPosition(
+			normalizeLayoutPositionValue(
+				record.signatures ??
+					flatFallback?.signatures ??
+					fallback.signatures,
+				"signatures",
+				undefined,
+				language,
+			),
+		) as unknown as LayoutPositionValue,
+		seal: toAbsolutePayloadPosition(
+			normalizeLayoutPositionValue(
+				record.seal ?? flatFallback?.seal ?? fallback.seal,
+				"seal",
+				undefined,
+				language,
+			),
+		) as unknown as LayoutPositionValue,
+		stamp: toAbsolutePayloadPosition(
+			normalizeLayoutPositionValue(
+				record.stamp ?? flatFallback?.stamp ?? fallback.stamp,
+				"stamp",
+				undefined,
+				language,
+			),
+		) as unknown as LayoutPositionValue,
+	};
+}
+
+function parsePositionsByLanguage(
+	record: Record<string, unknown>,
+	flat: LetterClosingLanguagePositions,
+): LetterLayoutPositionsByLanguage {
+	const defaults = buildDefaultPositionsByLanguage();
+	const raw = record.positionsByLanguage;
+	if (raw != null && typeof raw === "object" && !Array.isArray(raw)) {
+		const byLang = raw as Record<string, unknown>;
+		return {
+			am: parseClosingLanguagePositions(byLang.am, "am", defaults.am),
+			en: parseClosingLanguagePositions(byLang.en, "en", defaults.en),
+		};
+	}
+	return {
+		am: parseClosingLanguagePositions(undefined, "am", defaults.am, flat),
+		en: parseClosingLanguagePositions(undefined, "en", defaults.en),
+	};
+}
+
+export function normalizeLayoutConfigValue(
+	value: unknown,
+): LetterLayoutConfigValue {
+	if (value == null || typeof value !== "object" || Array.isArray(value)) {
+		return {
+			sectionOrder: [...DEFAULT_LAYOUT_CONFIG.sectionOrder],
+			signatures: { ...DEFAULT_LAYOUT_CONFIG.signatures },
+			seal: { ...DEFAULT_LAYOUT_CONFIG.seal },
+			stamp: { ...DEFAULT_LAYOUT_CONFIG.stamp },
+			sender: {
+				...DEFAULT_LAYOUT_CONFIG.sender,
+				signature: { ...DEFAULT_LAYOUT_CONFIG.sender.signature },
+				stamp: { ...DEFAULT_LAYOUT_CONFIG.sender.stamp },
+			},
+			closingAssetOrder: [...DEFAULT_LAYOUT_CONFIG.closingAssetOrder],
+			absoluteAssetOrder: [...DEFAULT_LAYOUT_CONFIG.absoluteAssetOrder],
+			positionsByLanguage: buildDefaultPositionsByLanguage(),
+		};
+	}
+
+	const record = value as Record<string, unknown>;
+	const seen = new Set<LetterLayoutSectionKey>();
+	const order: LetterLayoutSectionKey[] = [];
+
+	if (Array.isArray(record.sectionOrder)) {
+		for (const item of record.sectionOrder) {
+			if (!isSectionKey(item) || seen.has(item)) continue;
+			seen.add(item);
+			order.push(item);
+		}
+	}
+
+	for (const key of ALL_SECTION_KEYS) {
+		if (!seen.has(key)) order.push(key);
+	}
+
+	const signatures =
+		record.signatures != null &&
+		typeof record.signatures === "object" &&
+		!Array.isArray(record.signatures)
+			? (record.signatures as Record<string, unknown>)
+			: {};
+	const seal =
+		record.seal != null &&
+		typeof record.seal === "object" &&
+		!Array.isArray(record.seal)
+			? (record.seal as Record<string, unknown>)
+			: {};
+	const stamp =
+		record.stamp != null &&
+		typeof record.stamp === "object" &&
+		!Array.isArray(record.stamp)
+			? (record.stamp as Record<string, unknown>)
+			: {};
+	const sender =
+		record.sender != null &&
+		typeof record.sender === "object" &&
+		!Array.isArray(record.sender)
+			? (record.sender as Record<string, unknown>)
+			: {};
+
+	const flatFromRecord: LetterClosingLanguagePositions = {
+		signatures: toAbsolutePayloadPosition(
+			normalizeLayoutPositionValue(signatures.position, "signatures"),
+		) as unknown as LayoutPositionValue,
+		seal: toAbsolutePayloadPosition(
+			normalizeLayoutPositionValue(seal.position, "seal"),
+		) as unknown as LayoutPositionValue,
+		stamp: toAbsolutePayloadPosition(
+			normalizeLayoutPositionValue(stamp.position, "stamp"),
+		) as unknown as LayoutPositionValue,
+	};
+	const positionsByLanguage = parsePositionsByLanguage(record, flatFromRecord);
+
+	return {
+		sectionOrder: order,
+		signatures: {
+			widthPt: parsePositiveNumber(
+				signatures.widthPt,
+				DEFAULT_LAYOUT_CONFIG.signatures.widthPt,
+			),
+			heightPx: parsePositiveNumber(
+				signatures.heightPx,
+				DEFAULT_LAYOUT_CONFIG.signatures.heightPx,
+			),
+			gapPx: parsePositiveNumber(
+				signatures.gapPx,
+				DEFAULT_LAYOUT_CONFIG.signatures.gapPx,
+			),
+			align: parseAlign(
+				signatures.align,
+				DEFAULT_LAYOUT_CONFIG.signatures.align,
+			),
+			position: { ...positionsByLanguage.am.signatures },
+		},
+		seal: {
+			widthPx: parsePositiveNumber(
+				seal.widthPx,
+				DEFAULT_LAYOUT_CONFIG.seal.widthPx,
+			),
+			heightPx: parsePositiveNumber(
+				seal.heightPx,
+				DEFAULT_LAYOUT_CONFIG.seal.heightPx,
+			),
+			position: { ...positionsByLanguage.am.seal },
+		},
+		stamp: {
+			widthPt: parsePositiveNumber(
+				stamp.widthPt,
+				DEFAULT_LAYOUT_CONFIG.stamp.widthPt,
+			),
+			heightPx: parsePositiveNumber(
+				stamp.heightPx,
+				DEFAULT_LAYOUT_CONFIG.stamp.heightPx,
+			),
+			placement: parseStampPlacement(stamp.placement),
+			position: { ...positionsByLanguage.am.stamp },
+		},
+		sender: {
+			align: parseAlign(sender.align, DEFAULT_LAYOUT_CONFIG.sender.align),
+			assetOrder: parseSenderAssetOrder(sender.assetOrder),
+			signature: toAbsolutePayloadPosition(
+				normalizeLayoutPositionValue(sender.signature, "senderSignature"),
+			) as unknown as LayoutPositionValue,
+			stamp: toAbsolutePayloadPosition(
+				normalizeLayoutPositionValue(sender.stamp, "senderStamp"),
+			) as unknown as LayoutPositionValue,
+		},
+		closingAssetOrder: parseClosingAssetOrder(record.closingAssetOrder),
+		absoluteAssetOrder: normalizeAbsoluteAssetOrder(record.absoluteAssetOrder),
+		positionsByLanguage,
+	};
+}
+
+export function isLayoutConfigSetting(code: string): boolean {
+	return code.trim().toLowerCase() === LAYOUT_CONFIG_SETTING_CODE;
+}
+
+interface LayoutConfigEditorProps {
+	setting: TemplateSampleSetting;
+	isDefault: boolean;
+	onToggleDefault: (settingId: string) => void;
+	value: LetterLayoutConfigValue;
+	onChange: (value: LetterLayoutConfigValue) => void;
+	appliesTo?: { en: string; am: string };
+	pageMargin?: PageMarginValue;
+	placementLanguage?: LetterLanguage;
+	placementFocusNonce?: number;
+	/** Record override panel: inherit unit values but keep controls enabled. */
+	editorMode?: "template" | "record";
+	/** Larger canvas when embedded in record preview dialog. */
+	canvasLayoutMode?: "default" | "preview";
+}
+
+export const LayoutConfigEditor: React.FC<LayoutConfigEditorProps> = ({
+	setting,
+	isDefault,
+	onToggleDefault,
+	value,
+	onChange,
+	appliesTo,
+	pageMargin,
+	placementLanguage = "am",
+	placementFocusNonce = 0,
+	editorMode = "template",
+	canvasLayoutMode = "default",
+}) => {
+	const { t, i18n } = useTranslation();
+	const displayLang = i18n.language?.startsWith("am") ? "am" : "en";
+	const isRecordMode = editorMode === "record";
+	const controlsDisabled = isDefault && !isRecordMode;
+
+	const sectionLabels = useMemo(
+		(): Record<LetterLayoutSectionKey, string> => ({
+			reference: t("template.sectionReference", "Reference & date"),
+			receivers: t("template.sectionReceivers", "Receivers"),
+			sender: t("template.sectionSender", "Sender"),
+			subject: t("template.sectionSubject", "Subject"),
+			body: t("template.sectionBody", "Body"),
+			closing: t("template.sectionClosing", "Closing & signatures"),
+			cc: t("template.sectionCc", "CC"),
+			forYourReference: t(
+				"template.sectionForYourReference",
+				"For your reference",
+			),
+		}),
+		[t],
+	);
+
+	const moveSection = useCallback(
+		(index: number, direction: -1 | 1) => {
+			const nextIndex = index + direction;
+			if (nextIndex < 0 || nextIndex >= value.sectionOrder.length) return;
+			const order = [...value.sectionOrder];
+			const [item] = order.splice(index, 1);
+			order.splice(nextIndex, 0, item);
+			onChange({ ...value, sectionOrder: order });
+		},
+		[value, onChange],
+	);
+
+	const alignLabels = useMemo(
+		(): Record<LetterLayoutHorizontalAlign, string> => ({
+			auto: t("template.alignAuto", "Auto (language default)"),
+			start: t("template.alignStart", "Start (left)"),
+			center: t("template.alignCenter", "Center"),
+			end: t("template.alignEnd", "End (right)"),
+		}),
+		[t],
+	);
+
+	const updateNumber = useCallback(
+		(
+			group: "signatures" | "seal" | "stamp",
+			field: string,
+			raw: string,
+		) => {
+			const parsed = Number.parseFloat(raw);
+			const num = Number.isNaN(parsed) ? 1 : Math.max(1, parsed);
+			onChange({
+				...value,
+				[group]: {
+					...value[group],
+					[field]: num,
+				},
+			});
+		},
+		[value, onChange],
+	);
+
+	return (
+		<div
+			className={
+				isRecordMode
+					? "min-w-0 flex flex-col flex-1 min-h-0"
+					: "mt-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600 space-y-6"
+			}
+		>
+			{!isRecordMode && (
+			<div className="flex items-center justify-between gap-4">
+				<div>
+					<h4 className="text-sm font-medium text-gray-700 dark:text-gray-200">
+						{t("template.letterLayout", "Letter Layout")}
+					</h4>
+					{appliesTo && (
+						<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+							{t("template.appliesTo", "Applies to")}: {appliesTo[displayLang]}
+						</p>
+					)}
+					<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+						{t(
+							"template.letterLayoutHint",
+							"Place signatures, seal, and stamp on the page canvas first, then adjust sizes and section order below.",
+						)}
+					</p>
+				</div>
+				<label className="flex items-center gap-2 cursor-pointer shrink-0">
+					<input
+						type="checkbox"
+						checked={isDefault}
+						onChange={() => onToggleDefault(setting.id)}
+						className="w-4 h-4 rounded border-gray-300 dark:border-gray-500"
+					/>
+					<span className="text-xs font-medium text-gray-600 dark:text-gray-300">
+						{isDefault
+							? t("template.useGlobalDefault", "Use template default")
+							: t("template.unitOverride", "Unit override")}
+					</span>
+				</label>
+			</div>
+			)}
+
+			<fieldset
+				disabled={controlsDisabled}
+				className={`border-0 p-0 m-0 min-w-0 ${controlsDisabled ? "opacity-60" : ""} ${
+					isRecordMode
+						? "flex flex-col flex-1 min-h-0 space-y-3"
+						: "space-y-6"
+				}`}
+			>
+				{!isRecordMode && (
+					<div className="flex flex-wrap items-center gap-2">
+						<span className="text-xs text-gray-600 dark:text-gray-300">
+							{t("template.placementLanguage", "Placement language")}:{" "}
+							<strong>
+								{placementLanguage === "am"
+									? t("template.languageAm", "Amharic")
+									: t("template.languageEn", "English")}
+							</strong>
+						</span>
+						<button
+							type="button"
+							disabled={controlsDisabled}
+							onClick={() =>
+								onChange({
+									...value,
+									positionsByLanguage: {
+										...value.positionsByLanguage,
+										en: { ...value.positionsByLanguage.am },
+									},
+								})
+							}
+							className="px-2 py-1 text-xs rounded border border-gray-300 dark:border-gray-500 disabled:opacity-40"
+						>
+							{t("template.copyAmToEnPositions", "Copy Amharic → English")}
+						</button>
+					</div>
+				)}
+
+				<LetterAssetsPlacementCanvas
+					value={value}
+					onChange={onChange}
+					disabled={controlsDisabled}
+					pageMargin={pageMargin}
+					placementLanguage={placementLanguage}
+					placementFocusNonce={placementFocusNonce}
+					layoutMode={
+						canvasLayoutMode !== "default"
+							? canvasLayoutMode
+							: isRecordMode
+								? "preview"
+								: "default"
+					}
+				/>
+
+				{!isRecordMode && (
+				<>
+				<div className="border-t border-gray-200 pt-6 dark:border-gray-600">
+					<h5 className="mb-1 text-xs font-semibold uppercase tracking-wide text-gray-600 dark:text-gray-300">
+						{t("template.layoutOptions", "Layout options")}
+					</h5>
+					<p className="mb-4 text-xs text-gray-500 dark:text-gray-400">
+						{t(
+							"template.layoutOptionsHint",
+							"Optional: reorder letter sections and fine-tune asset dimensions.",
+						)}
+					</p>
+				</div>
+				<div>
+					<h5 className="text-xs font-semibold text-gray-600 dark:text-gray-300 mb-2 uppercase tracking-wide">
+						{t("template.sectionOrder", "Section order")}
+					</h5>
+					<ul className="space-y-2">
+						{value.sectionOrder.map((key, index) => (
+							<li
+								key={key}
+								className="flex items-center justify-between gap-2 px-3 py-2 bg-white dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-600"
+							>
+								<span className="text-sm text-gray-700 dark:text-gray-200">
+									{index + 1}. {sectionLabels[key]}
+								</span>
+								<div className="flex gap-1 shrink-0">
+									<button
+										type="button"
+										onClick={() => moveSection(index, -1)}
+										disabled={index === 0}
+										className="px-2 py-1 text-xs rounded border border-gray-300 dark:border-gray-500 disabled:opacity-40"
+										aria-label={t("template.moveUp", "Move up")}
+									>
+										↑
+									</button>
+									<button
+										type="button"
+										onClick={() => moveSection(index, 1)}
+										disabled={index === value.sectionOrder.length - 1}
+										className="px-2 py-1 text-xs rounded border border-gray-300 dark:border-gray-500 disabled:opacity-40"
+										aria-label={t("template.moveDown", "Move down")}
+									>
+										↓
+									</button>
+								</div>
+							</li>
+						))}
+					</ul>
+				</div>
+
+				<div className="grid grid-cols-2 gap-4">
+					<div className="col-span-2">
+						<h5 className="text-xs font-semibold text-gray-600 dark:text-gray-300 mb-2 uppercase tracking-wide">
+							{t("template.signatures", "Signatures")}
+						</h5>
+					</div>
+					<div>
+						<label className="block text-xs font-medium text-gray-600 dark:text-gray-300 mb-1">
+							{t("template.signatureWidth", "Width (pt)")}
+						</label>
+						<input
+							type="number"
+							min={1}
+							value={value.signatures.widthPt}
+							onChange={(e) =>
+								updateNumber("signatures", "widthPt", e.target.value)
+							}
+							className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm"
+						/>
+					</div>
+					<div>
+						<label className="block text-xs font-medium text-gray-600 dark:text-gray-300 mb-1">
+							{t("template.signatureHeight", "Height (px)")}
+						</label>
+						<input
+							type="number"
+							min={1}
+							value={value.signatures.heightPx}
+							onChange={(e) =>
+								updateNumber("signatures", "heightPx", e.target.value)
+							}
+							className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm"
+						/>
+					</div>
+					<div>
+						<label className="block text-xs font-medium text-gray-600 dark:text-gray-300 mb-1">
+							{t("template.signatureGap", "Gap (px)")}
+						</label>
+						<input
+							type="number"
+							min={1}
+							value={value.signatures.gapPx}
+							onChange={(e) =>
+								updateNumber("signatures", "gapPx", e.target.value)
+							}
+							className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm"
+						/>
+					</div>
+					<div className="col-span-2">
+						<label className="block text-xs font-medium text-gray-600 dark:text-gray-300 mb-1">
+							{t("template.closingAlign", "Closing block horizontal position")}
+						</label>
+						<select
+							value={value.signatures.align}
+							onChange={(e) =>
+								onChange({
+									...value,
+									signatures: {
+										...value.signatures,
+										align: e.target.value as LetterLayoutHorizontalAlign,
+									},
+								})
+							}
+							className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm"
+						>
+							{HORIZONTAL_ALIGNS.map((align) => (
+								<option key={align} value={align}>
+									{alignLabels[align]}
+								</option>
+							))}
+						</select>
+					</div>
+				</div>
+
+				<div className="grid grid-cols-2 gap-4">
+					<div className="col-span-2">
+						<h5 className="text-xs font-semibold text-gray-600 dark:text-gray-300 mb-2 uppercase tracking-wide">
+							{t("template.seal", "Seal")}
+						</h5>
+					</div>
+					<div>
+						<label className="block text-xs font-medium text-gray-600 dark:text-gray-300 mb-1">
+							{t("template.sealWidth", "Width (px)")}
+						</label>
+						<input
+							type="number"
+							min={1}
+							value={value.seal.widthPx}
+							onChange={(e) => updateNumber("seal", "widthPx", e.target.value)}
+							className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm"
+						/>
+					</div>
+					<div>
+						<label className="block text-xs font-medium text-gray-600 dark:text-gray-300 mb-1">
+							{t("template.sealHeight", "Height (px)")}
+						</label>
+						<input
+							type="number"
+							min={1}
+							value={value.seal.heightPx}
+							onChange={(e) =>
+								updateNumber("seal", "heightPx", e.target.value)
+							}
+							className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm"
+						/>
+					</div>
+				</div>
+
+				<div className="grid grid-cols-2 gap-4">
+					<div className="col-span-2">
+						<h5 className="text-xs font-semibold text-gray-600 dark:text-gray-300 mb-2 uppercase tracking-wide">
+							{t("template.stamp", "Stamp (teeter)")}
+						</h5>
+					</div>
+					<div>
+						<label className="block text-xs font-medium text-gray-600 dark:text-gray-300 mb-1">
+							{t("template.stampWidth", "Width (pt)")}
+						</label>
+						<input
+							type="number"
+							min={1}
+							value={value.stamp.widthPt}
+							onChange={(e) =>
+								updateNumber("stamp", "widthPt", e.target.value)
+							}
+							className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm"
+						/>
+					</div>
+					<div>
+						<label className="block text-xs font-medium text-gray-600 dark:text-gray-300 mb-1">
+							{t("template.stampHeight", "Height (px)")}
+						</label>
+						<input
+							type="number"
+							min={1}
+							value={value.stamp.heightPx}
+							onChange={(e) =>
+								updateNumber("stamp", "heightPx", e.target.value)
+							}
+							className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded-lg text-sm"
+						/>
+					</div>
+				</div>
+				</>
+				)}
+			</fieldset>
+		</div>
+	);
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/LetterAssetsPlacementCanvas.tsx b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/LetterAssetsPlacementCanvas.tsx
new file mode 100644
index 000000000..6a6cfd459
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/LetterAssetsPlacementCanvas.tsx
@@ -0,0 +1,647 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import type { LetterLayoutConfigValue } from "./LayoutConfigEditor";
+import {
+	fromCanvasDisplayPosition,
+	getLetterCanvasSize,
+	type LayoutPositionValue,
+	normalizeLayoutPositionValue,
+	toCanvasDisplayPosition,
+	type LetterLanguage,
+} from "./layout-position";
+import type { PageMarginValue } from "./PageMarginEditor";
+import { normalizePageMarginValue } from "./PageMarginEditor";
+import {
+	estimateClosingBlockTopPx,
+} from "../utils/letter-page-dimensions";
+
+export type LetterAbsoluteAssetKey =
+	| "signatures"
+	| "seal"
+	| "stamp"
+	| "senderSignature"
+	| "senderStamp";
+
+export const LETTER_ABSOLUTE_ASSET_KEYS: LetterAbsoluteAssetKey[] = [
+	"signatures",
+	"seal",
+	"stamp",
+	"senderSignature",
+	"senderStamp",
+];
+
+export const LETTER_ASSET_PLACEMENT_ELEMENT_ID = "letter-asset-placement";
+
+/** Closing assets shown in style-settings placement UI (sender header assets hidden). */
+export const LETTER_PLACEMENT_CANVAS_ASSET_KEYS: LetterAbsoluteAssetKey[] = [
+	"signatures",
+	"seal",
+	"stamp",
+];
+
+const ASSET_COLORS: Record<LetterAbsoluteAssetKey, string> = {
+	signatures: "border-blue-500 bg-blue-500/20",
+	seal: "border-emerald-500 bg-emerald-500/20",
+	stamp: "border-amber-500 bg-amber-500/20",
+	senderSignature: "border-violet-500 bg-violet-500/20",
+	senderStamp: "border-rose-500 bg-rose-500/20",
+};
+
+function canvasRectToReference(
+	rect: DOMRect,
+	clientX: number,
+	clientY: number,
+	canvasWidth: number,
+	canvasHeight: number,
+): { x: number; y: number } {
+	const scaleX = canvasWidth / rect.width;
+	const scaleY = canvasHeight / rect.height;
+	return {
+		x: (clientX - rect.left) * scaleX,
+		y: (clientY - rect.top) * scaleY,
+	};
+}
+
+function ptToPx(pt: number): number {
+	return Math.round((pt * 96) / 72);
+}
+
+type LetterAssetsPlacementCanvasProps = {
+	value: LetterLayoutConfigValue;
+	onChange: (value: LetterLayoutConfigValue) => void;
+	disabled?: boolean;
+	pageMargin?: PageMarginValue;
+	placementLanguage?: LetterLanguage;
+	placementFocusNonce?: number;
+	/** Preview dialog: larger canvas area, controls below. */
+	layoutMode?: "default" | "preview";
+};
+
+function isClosingAssetKey(
+	key: LetterAbsoluteAssetKey,
+): key is "signatures" | "seal" | "stamp" {
+	return key === "signatures" || key === "seal" || key === "stamp";
+}
+
+function getAssetPosition(
+	config: LetterLayoutConfigValue,
+	key: LetterAbsoluteAssetKey,
+	language: LetterLanguage,
+): LayoutPositionValue {
+	if (isClosingAssetKey(key)) {
+		return config.positionsByLanguage[language][key];
+	}
+	switch (key) {
+		case "senderSignature":
+			return config.sender.signature;
+		case "senderStamp":
+			return config.sender.stamp;
+		default: {
+			const unreachable: never = key;
+			return unreachable;
+		}
+	}
+}
+
+function setAssetPosition(
+	config: LetterLayoutConfigValue,
+	key: LetterAbsoluteAssetKey,
+	position: LayoutPositionValue,
+	language: LetterLanguage,
+): LetterLayoutConfigValue {
+	if (isClosingAssetKey(key)) {
+		const positionsByLanguage = {
+			...config.positionsByLanguage,
+			[language]: {
+				...config.positionsByLanguage[language],
+				[key]: position,
+			},
+		};
+		const next: LetterLayoutConfigValue = {
+			...config,
+			positionsByLanguage,
+		};
+		if (language === "am") {
+			if (key === "signatures") {
+				next.signatures = { ...config.signatures, position };
+			} else if (key === "seal") {
+				next.seal = { ...config.seal, position };
+			} else if (key === "stamp") {
+				next.stamp = { ...config.stamp, position };
+			}
+		}
+		return next;
+	}
+	switch (key) {
+		case "senderSignature":
+			return {
+				...config,
+				sender: { ...config.sender, signature: position },
+			};
+		case "senderStamp":
+			return {
+				...config,
+				sender: { ...config.sender, stamp: position },
+			};
+		default: {
+			const unreachable: never = key;
+			return unreachable;
+		}
+	}
+}
+
+function getAssetSize(
+	config: LetterLayoutConfigValue,
+	key: LetterAbsoluteAssetKey,
+): { widthPx: number; heightPx: number } {
+	switch (key) {
+		case "signatures":
+			return {
+				widthPx: ptToPx(config.signatures.widthPt) * 2 + config.signatures.gapPx,
+				heightPx: config.signatures.heightPx + 24,
+			};
+		case "seal":
+			return {
+				widthPx: config.seal.widthPx,
+				heightPx: config.seal.heightPx,
+			};
+		case "stamp":
+			return {
+				widthPx: ptToPx(config.stamp.widthPt),
+				heightPx: config.stamp.heightPx,
+			};
+		case "senderSignature":
+			return {
+				widthPx: ptToPx(config.signatures.widthPt),
+				heightPx: config.signatures.heightPx,
+			};
+		case "senderStamp":
+			return {
+				widthPx: ptToPx(config.stamp.widthPt),
+				heightPx: config.stamp.heightPx,
+			};
+	}
+}
+
+export function normalizeAbsoluteAssetOrder(
+	value: unknown,
+): LetterAbsoluteAssetKey[] {
+	if (!Array.isArray(value)) return [...LETTER_ABSOLUTE_ASSET_KEYS];
+	const seen = new Set<LetterAbsoluteAssetKey>();
+	const order: LetterAbsoluteAssetKey[] = [];
+	for (const item of value) {
+		if (
+			typeof item === "string" &&
+			LETTER_ABSOLUTE_ASSET_KEYS.includes(item as LetterAbsoluteAssetKey) &&
+			!seen.has(item as LetterAbsoluteAssetKey)
+		) {
+			seen.add(item as LetterAbsoluteAssetKey);
+			order.push(item as LetterAbsoluteAssetKey);
+		}
+	}
+	for (const key of LETTER_ABSOLUTE_ASSET_KEYS) {
+		if (!seen.has(key)) order.push(key);
+	}
+	return order;
+}
+
+export const LetterAssetsPlacementCanvas: React.FC<
+	LetterAssetsPlacementCanvasProps
+> = ({
+	value,
+	onChange,
+	disabled = false,
+	pageMargin,
+	placementLanguage = "am",
+	placementFocusNonce = 0,
+	layoutMode = "default",
+}) => {
+	const { t } = useTranslation();
+	const isPreviewLayout = layoutMode === "preview";
+	const canvasRef = useRef<HTMLDivElement>(null);
+	const scrollContainerRef = useRef<HTMLDivElement>(null);
+	const dragRef = useRef<{ pointerId: number; assetKey: LetterAbsoluteAssetKey } | null>(
+		null,
+	);
+	const [selectedKey, setSelectedKey] =
+		useState<LetterAbsoluteAssetKey>("signatures");
+
+	const margins = useMemo(
+		() => normalizePageMarginValue(pageMargin),
+		[pageMargin],
+	);
+	const { width: canvasWidth, height: canvasHeight } = useMemo(
+		() => getLetterCanvasSize(margins),
+		[margins],
+	);
+
+	const layerOrder = useMemo(
+		() =>
+			normalizeAbsoluteAssetOrder(value.absoluteAssetOrder).filter((key) =>
+				LETTER_PLACEMENT_CANVAS_ASSET_KEYS.includes(key),
+			),
+		[value.absoluteAssetOrder],
+	);
+
+	const assetLabels = useMemo(
+		(): Record<LetterAbsoluteAssetKey, string> => ({
+			signatures: t("template.closingAssetSignatures", "Signature block"),
+			seal: t("template.closingAssetSeal", "Seal"),
+			stamp: t("template.stamp", "Stamp (teeter)"),
+			senderSignature: t("template.senderAssetSignature", "Sender signature"),
+			senderStamp: t("template.senderAssetStamp", "Sender stamp"),
+		}),
+		[t],
+	);
+
+	const selectedPosition = getAssetPosition(
+		value,
+		selectedKey,
+		placementLanguage,
+	);
+	const selectedCanvasPosition = toCanvasDisplayPosition(
+		selectedKey,
+		selectedPosition,
+		margins,
+	);
+	const selectedTop =
+		typeof selectedCanvasPosition.top === "number"
+			? selectedCanvasPosition.top
+			: 0;
+	const selectedLeft =
+		typeof selectedCanvasPosition.left === "number"
+			? selectedCanvasPosition.left
+			: 0;
+
+	const closingBlockTop = useMemo(
+		() => estimateClosingBlockTopPx(margins),
+		[margins],
+	);
+
+	const scrollCanvasToAssets = useCallback(() => {
+		const container = scrollContainerRef.current;
+		if (!container || layerOrder.length === 0) return;
+
+		let minLeft = Infinity;
+		let minTop = Infinity;
+		let maxRight = -Infinity;
+		let maxBottom = -Infinity;
+
+		for (const assetKey of layerOrder) {
+			const storedPosition = getAssetPosition(
+				value,
+				assetKey,
+				placementLanguage,
+			);
+			const position = toCanvasDisplayPosition(
+				assetKey,
+				storedPosition,
+				margins,
+			);
+			const { widthPx, heightPx } = getAssetSize(value, assetKey);
+			const top = typeof position.top === "number" ? position.top : 0;
+			const left = typeof position.left === "number" ? position.left : 0;
+			minLeft = Math.min(minLeft, left);
+			minTop = Math.min(minTop, top);
+			maxRight = Math.max(maxRight, left + widthPx);
+			maxBottom = Math.max(maxBottom, top + heightPx);
+		}
+
+		if (!Number.isFinite(minLeft)) return;
+
+		const boxCenterX = (minLeft + maxRight) / 2;
+		const boxCenterY = (minTop + maxBottom) / 2;
+
+		container.scrollLeft = Math.max(
+			0,
+			boxCenterX - container.clientWidth / 2,
+		);
+		container.scrollTop = Math.max(
+			0,
+			boxCenterY - container.clientHeight / 2,
+		);
+	}, [layerOrder, margins, placementLanguage, value]);
+
+	useEffect(() => {
+		const frame = requestAnimationFrame(() => {
+			scrollCanvasToAssets();
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [scrollCanvasToAssets, placementLanguage, placementFocusNonce]);
+
+	const placeAsset = useCallback(
+		(
+			assetKey: LetterAbsoluteAssetKey,
+			clientX: number,
+			clientY: number,
+		) => {
+			const canvas = canvasRef.current;
+			if (!canvas) return;
+			const rect = canvas.getBoundingClientRect();
+			const ref = canvasRectToReference(
+				rect,
+				clientX,
+				clientY,
+				canvasWidth,
+				canvasHeight,
+			);
+			const { widthPx, heightPx } = getAssetSize(value, assetKey);
+			const canvasPosition = normalizeLayoutPositionValue({
+				top: Math.round(ref.y - heightPx / 2),
+				left: Math.round(ref.x - widthPx / 2),
+			});
+			const storedPosition = fromCanvasDisplayPosition(
+				assetKey,
+				canvasPosition,
+				margins,
+			);
+			onChange(setAssetPosition(value, assetKey, storedPosition, placementLanguage));
+		},
+		[canvasHeight, canvasWidth, margins, onChange, placementLanguage, value],
+	);
+
+	const handleAssetPointerDown = (
+		event: React.PointerEvent<HTMLDivElement>,
+		assetKey: LetterAbsoluteAssetKey,
+	) => {
+		if (disabled) return;
+		event.preventDefault();
+		event.stopPropagation();
+		setSelectedKey(assetKey);
+		dragRef.current = { pointerId: event.pointerId, assetKey };
+		event.currentTarget.setPointerCapture(event.pointerId);
+		placeAsset(assetKey, event.clientX, event.clientY);
+	};
+
+	const handleCanvasPointerDown = (
+		event: React.PointerEvent<HTMLDivElement>,
+	) => {
+		if (disabled) return;
+		placeAsset(selectedKey, event.clientX, event.clientY);
+	};
+
+	const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
+		if (disabled || dragRef.current?.pointerId !== event.pointerId) return;
+		placeAsset(dragRef.current.assetKey, event.clientX, event.clientY);
+	};
+
+	const handlePointerUp = (event: React.PointerEvent<HTMLDivElement>) => {
+		if (dragRef.current?.pointerId !== event.pointerId) return;
+		dragRef.current = null;
+		event.currentTarget.releasePointerCapture(event.pointerId);
+	};
+
+	const updateSelectedCoord = (key: "top" | "left", raw: string) => {
+		const trimmed = raw.trim();
+		if (trimmed === "" || trimmed === "-") return;
+		const parsed = Number.parseFloat(trimmed);
+		if (!Number.isFinite(parsed)) return;
+		const nextCanvas = {
+			top: key === "top" ? Math.round(parsed) : selectedTop,
+			left: key === "left" ? Math.round(parsed) : selectedLeft,
+		};
+		const position = fromCanvasDisplayPosition(
+			selectedKey,
+			{ ...selectedPosition, ...nextCanvas },
+			margins,
+		);
+		onChange(setAssetPosition(value, selectedKey, position, placementLanguage));
+	};
+
+	const moveLayer = (index: number, direction: -1 | 1) => {
+		const nextIndex = index + direction;
+		if (nextIndex < 0 || nextIndex >= layerOrder.length) return;
+		const order = [...layerOrder];
+		const [item] = order.splice(index, 1);
+		order.splice(nextIndex, 0, item);
+		const hiddenOrder = normalizeAbsoluteAssetOrder(
+			value.absoluteAssetOrder,
+		).filter((key) => !LETTER_PLACEMENT_CANVAS_ASSET_KEYS.includes(key));
+		onChange({
+			...value,
+			absoluteAssetOrder: [...order, ...hiddenOrder],
+		});
+	};
+
+	return (
+		<div
+			id={LETTER_ASSET_PLACEMENT_ELEMENT_ID}
+			className={`space-y-3 rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 p-3 ${
+				isPreviewLayout ? "h-full flex flex-col min-h-0" : ""
+			}`}
+		>
+			<div className={isPreviewLayout ? "shrink-0" : undefined}>
+				<h5 className="text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wide">
+					{t("template.assetPlacementCanvas", "Asset placement")}
+				</h5>
+				<p className="text-[10px] text-gray-500 dark:text-gray-400 mt-1">
+					{t(
+						"template.assetPlacementCanvasHint",
+						"Drag each asset on the page. Editing positions for {{language}}. Canvas matches PDF content area ({{width}}×{{height}} px).",
+						{
+							language:
+								placementLanguage === "am"
+									? t("template.languageAm", "Amharic")
+									: t("template.languageEn", "English"),
+							width: canvasWidth,
+							height: canvasHeight,
+						},
+					)}
+				</p>
+			</div>
+
+			<div
+				className={
+					isPreviewLayout
+						? "flex flex-col gap-3 flex-1 min-h-0"
+						: "grid grid-cols-1 lg:grid-cols-[1fr_220px] gap-3"
+				}
+			>
+				<div
+					ref={scrollContainerRef}
+					className={
+						isPreviewLayout
+							? "flex-1 min-h-0 overflow-auto rounded-md border border-gray-200 dark:border-gray-600 bg-gray-100 dark:bg-gray-900/50 p-3 flex items-start justify-center"
+							: "overflow-auto max-h-[560px] rounded-md border border-gray-200 dark:border-gray-600 bg-gray-100 dark:bg-gray-900/50 p-2"
+					}
+				>
+					<div
+						ref={canvasRef}
+						className={`relative touch-none select-none bg-white dark:bg-gray-900/60 ${
+							disabled ? "cursor-not-allowed opacity-60" : "cursor-crosshair"
+						}`}
+						style={{
+							width: canvasWidth,
+							height: canvasHeight,
+							minWidth: canvasWidth,
+							minHeight: canvasHeight,
+							overflow: "visible",
+						}}
+						onPointerDown={handleCanvasPointerDown}
+						onPointerMove={handlePointerMove}
+						onPointerUp={handlePointerUp}
+						onPointerCancel={handlePointerUp}
+					>
+						<div className="absolute inset-0 border border-dashed border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900/40 pointer-events-none" />
+						<div
+							className="absolute left-0 right-0 border-t border-dashed border-purple-300 dark:border-purple-600 pointer-events-none"
+							style={{
+								top: `${(closingBlockTop / canvasHeight) * 100}%`,
+							}}
+							title={t("template.closingBlockGuide", "Sincerely section (approx.)")}
+						/>
+						{layerOrder.map((assetKey, layerIndex) => {
+							const storedPosition = getAssetPosition(
+								value,
+								assetKey,
+								placementLanguage,
+							);
+							const position = toCanvasDisplayPosition(
+								assetKey,
+								storedPosition,
+								margins,
+							);
+							const { widthPx, heightPx } = getAssetSize(value, assetKey);
+							const top =
+								typeof position.top === "number" ? position.top : 0;
+							const left =
+								typeof position.left === "number" ? position.left : 0;
+							const isSelected = selectedKey === assetKey;
+							return (
+								<div
+									key={assetKey}
+									className={`absolute rounded border-2 touch-none ${
+										ASSET_COLORS[assetKey]
+									} ${isSelected ? "ring-2 ring-purple-500 ring-offset-1" : ""} ${
+										disabled
+											? "cursor-not-allowed"
+											: "cursor-grab active:cursor-grabbing"
+									}`}
+									style={{
+										left: `${(left / canvasWidth) * 100}%`,
+										top: `${(top / canvasHeight) * 100}%`,
+										width: `${(widthPx / canvasWidth) * 100}%`,
+										height: `${(heightPx / canvasHeight) * 100}%`,
+										zIndex: layerIndex + 1,
+										pointerEvents: disabled ? "none" : "auto",
+									}}
+									onPointerDown={(event) =>
+										handleAssetPointerDown(event, assetKey)
+									}
+								>
+									<span className="absolute left-0.5 top-0.5 text-[8px] font-medium text-gray-700 dark:text-gray-200 bg-white/80 dark:bg-gray-900/80 px-1 rounded pointer-events-none">
+										{assetLabels[assetKey]}
+									</span>
+								</div>
+							);
+						})}
+					</div>
+				</div>
+
+				<div
+					className={
+						isPreviewLayout
+							? "shrink-0 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3"
+							: "space-y-3"
+					}
+				>
+					<div>
+						<p className="text-[10px] uppercase tracking-wide text-gray-500 dark:text-gray-400 mb-1">
+							{t("template.selectedAsset", "Selected asset")}
+						</p>
+						<select
+							disabled={disabled}
+							value={selectedKey}
+							onChange={(e) =>
+								setSelectedKey(e.target.value as LetterAbsoluteAssetKey)
+							}
+							className="w-full px-2 py-1.5 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded text-sm"
+						>
+							{LETTER_PLACEMENT_CANVAS_ASSET_KEYS.map((key) => (
+								<option key={key} value={key}>
+									{assetLabels[key]}
+								</option>
+							))}
+						</select>
+					</div>
+
+					<div className="grid grid-cols-2 gap-2">
+						<div>
+							<label className="block text-[10px] uppercase tracking-wide text-gray-500 dark:text-gray-400 mb-1">
+								{t("template.positionTop", "Top (px)")}
+							</label>
+							<input
+								type="number"
+								step={1}
+								disabled={disabled}
+								value={selectedTop}
+								onChange={(e) => updateSelectedCoord("top", e.target.value)}
+								className="w-full px-2 py-1.5 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded text-sm"
+							/>
+						</div>
+						<div>
+							<label className="block text-[10px] uppercase tracking-wide text-gray-500 dark:text-gray-400 mb-1">
+								{t("template.positionLeft", "Left (px)")}
+							</label>
+							<input
+								type="number"
+								step={1}
+								disabled={disabled}
+								value={selectedLeft}
+								onChange={(e) => updateSelectedCoord("left", e.target.value)}
+								className="w-full px-2 py-1.5 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded text-sm"
+							/>
+						</div>
+					</div>
+
+					<div>
+						<p className="text-[10px] uppercase tracking-wide text-gray-500 dark:text-gray-400 mb-1">
+							{t("template.layerOrder", "Layer order (back → front)")}
+						</p>
+						<ul className="space-y-1">
+							{layerOrder.map((key, index) => (
+								<li
+									key={key}
+									className={`flex items-center justify-between gap-1 px-2 py-1 rounded border text-xs ${
+										selectedKey === key
+											? "border-purple-400 bg-purple-50 dark:bg-purple-900/20"
+											: "border-gray-200 dark:border-gray-600"
+									}`}
+								>
+									<button
+										type="button"
+										disabled={disabled}
+										onClick={() => setSelectedKey(key)}
+										className="text-left flex-1 truncate text-gray-700 dark:text-gray-200"
+									>
+										{assetLabels[key]}
+									</button>
+									<div className="flex gap-0.5 shrink-0">
+										<button
+											type="button"
+											disabled={disabled || index === 0}
+											onClick={() => moveLayer(index, -1)}
+											className="px-1.5 py-0.5 rounded border border-gray-300 dark:border-gray-500 disabled:opacity-40"
+											title={t("template.sendBackward", "Send backward")}
+										>
+											↓
+										</button>
+										<button
+											type="button"
+											disabled={disabled || index === layerOrder.length - 1}
+											onClick={() => moveLayer(index, 1)}
+											className="px-1.5 py-0.5 rounded border border-gray-300 dark:border-gray-500 disabled:opacity-40"
+											title={t("template.bringForward", "Bring forward")}
+										>
+											↑
+										</button>
+									</div>
+								</li>
+							))}
+						</ul>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/LetterLabelFieldEditor.tsx b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/LetterLabelFieldEditor.tsx
new file mode 100644
index 000000000..637525a42
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/LetterLabelFieldEditor.tsx
@@ -0,0 +1,127 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import {
+  LETTER_LABEL_DISPLAY_NAMES,
+  type LetterLabelEntry,
+  type LetterLabelKey,
+  type LetterLabelStyle,
+  normalizeLabelStyle,
+} from "../utils/letterLabelsConstants";
+import {
+  StyleSettingCard,
+  STYLE_INPUT_CLASS,
+} from "./styleSettingsUi";
+import { cn } from "@/shared/lib/utils";
+
+interface LetterLabelFieldEditorProps {
+  labelKey: LetterLabelKey;
+  entry: LetterLabelEntry;
+  isDefault: boolean;
+  showDefaultToggle?: boolean;
+  onToggleDefault?: () => void;
+  onChange: (entry: LetterLabelEntry) => void;
+}
+
+const isUnderlined = (style?: LetterLabelStyle) =>
+  !!style && (style["text-decoration"] || "").includes("underline");
+
+const isBold = (style?: LetterLabelStyle) =>
+  !!style &&
+  ["bold", "600", "700", "800", "900"].includes(style["font-weight"] || "");
+
+export const LetterLabelFieldEditor: React.FC<LetterLabelFieldEditorProps> = ({
+  labelKey,
+  entry,
+  isDefault,
+  showDefaultToggle = false,
+  onToggleDefault,
+  onChange,
+}) => {
+  const { t, i18n } = useTranslation();
+  const displayLang = i18n.language?.startsWith("am") ? "am" : "en";
+  const fieldTitle = LETTER_LABEL_DISPLAY_NAMES[labelKey][displayLang];
+
+  const handleTextChange = (lang: "en" | "am", text: string) => {
+    onChange({ ...entry, [lang]: text });
+  };
+
+  const handleStyleChange = (
+    patch: LetterLabelStyle,
+    removals: string[] = [],
+  ) => {
+    const merged: LetterLabelStyle = { ...(entry.style ?? {}), ...patch };
+    for (const prop of removals) delete merged[prop];
+    const cleaned = normalizeLabelStyle(merged);
+    const nextEntry = { ...entry };
+    if (cleaned) nextEntry.style = cleaned;
+    else delete nextEntry.style;
+    onChange(nextEntry);
+  };
+
+  return (
+    <StyleSettingCard
+      title={fieldTitle}
+      subtitle={t("template.letterLabelHint", "Label text shown on the letter")}
+      isDefault={isDefault}
+      showCustomBadge={!showDefaultToggle}
+      onToggleDefault={showDefaultToggle ? onToggleDefault : undefined}
+      className="mt-3"
+    >
+      <fieldset disabled={isDefault} className="space-y-3">
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+          <div>
+            <label className="mb-1 block text-xs font-medium text-gray-600 dark:text-gray-300">
+              {t("common.english", "English")}
+            </label>
+            <input
+              type="text"
+              value={entry.en}
+              onChange={(e) => handleTextChange("en", e.target.value)}
+              className={cn(STYLE_INPUT_CLASS, "px-2 py-1")}
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-xs font-medium text-gray-600 dark:text-gray-300">
+              {t("common.amharic", "Amharic")}
+            </label>
+            <input
+              type="text"
+              dir="auto"
+              value={entry.am}
+              onChange={(e) => handleTextChange("am", e.target.value)}
+              className={cn(STYLE_INPUT_CLASS, "px-2 py-1")}
+            />
+          </div>
+        </div>
+        <div className="flex flex-wrap items-center gap-4">
+          <label className="flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-300">
+            <input
+              type="checkbox"
+              checked={isUnderlined(entry.style)}
+              onChange={(e) =>
+                handleStyleChange(
+                  e.target.checked ? { "text-decoration": "underline" } : {},
+                  e.target.checked ? [] : ["text-decoration"],
+                )
+              }
+            />
+            {t("template.underline", "Underline")}
+          </label>
+          <label className="flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-300">
+            <input
+              type="checkbox"
+              checked={isBold(entry.style)}
+              onChange={(e) =>
+                handleStyleChange(
+                  e.target.checked ? { "font-weight": "bold" } : {},
+                  e.target.checked ? [] : ["font-weight"],
+                )
+              }
+            />
+            {t("template.bold", "Bold")}
+          </label>
+        </div>
+      </fieldset>
+    </StyleSettingCard>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/ListStyleImageField.tsx b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/ListStyleImageField.tsx
new file mode 100644
index 000000000..14ab0e553
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/ListStyleImageField.tsx
@@ -0,0 +1,240 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ImageIcon, Trash2 } from "lucide-react";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { Button } from "@/shared/common/ui/button";
+import {
+  extractUrlFromListStyleImage,
+  isCustomListStyleImage,
+  isDisclosureListStyleImage,
+  ListBulletResource,
+  toResourceListStyleValue,
+} from "../utils/templateResourceConstants";
+import {
+  STYLE_SELECT_CONTENT_CLASS,
+  STYLE_SELECT_TRIGGER_CLASS,
+} from "./styleSettingsUi";
+
+interface ListStyleImageFieldProps {
+  listStyleImage?: string;
+  listStyle?: string;
+  resourceId?: string | null;
+  bulletResources: ListBulletResource[];
+  bulletResourcesLoading: boolean;
+  locale: "am" | "en";
+  onReplace: (resourceId: string) => void;
+  onRemove: () => void;
+  onRefreshResources: () => Promise<unknown>;
+}
+
+const getResourceLabel = (
+  resource: ListBulletResource,
+  locale: "am" | "en",
+) => resource.name?.[locale] || resource.name?.en || resource.id;
+
+const DisclosurePreview = () => (
+  <div className="flex h-full w-full items-center justify-center text-gray-700 dark:text-gray-200">
+    <span className="text-lg leading-none" aria-hidden>
+      ▶
+    </span>
+  </div>
+);
+
+export const ListStyleImageField: React.FC<ListStyleImageFieldProps> = ({
+  listStyleImage,
+  listStyle,
+  resourceId,
+  bulletResources,
+  bulletResourcesLoading,
+  locale,
+  onReplace,
+  onRemove,
+  onRefreshResources,
+}) => {
+  const { t } = useTranslation();
+  const [imageError, setImageError] = useState(false);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const matchedResource = useMemo(() => {
+    if (resourceId) {
+      return bulletResources.find((resource) => resource.id === resourceId) ?? null;
+    }
+
+    if (!isCustomListStyleImage(listStyleImage)) return null;
+
+    return (
+      bulletResources.find(
+        (resource) =>
+          listStyleImage?.includes(resource.id) ||
+          listStyleImage?.includes(resource.presigned) ||
+          Boolean(
+            resource.fileInfo?.fileName &&
+              listStyleImage?.includes(resource.fileInfo.fileName),
+          ),
+      ) ?? null
+    );
+  }, [bulletResources, listStyleImage, resourceId]);
+
+  const previewSrc = useMemo(() => {
+    if (matchedResource?.presigned) {
+      return matchedResource.presigned;
+    }
+
+    if (isDisclosureListStyleImage(listStyleImage)) {
+      return extractUrlFromListStyleImage(listStyleImage);
+    }
+
+    if (listStyle?.split(" ")[0] === "disclosure-closed") {
+      return extractUrlFromListStyleImage(listStyleImage) ?? null;
+    }
+
+    if (isCustomListStyleImage(listStyleImage)) {
+      return extractUrlFromListStyleImage(listStyleImage);
+    }
+
+    return null;
+  }, [listStyle, listStyleImage, matchedResource]);
+
+  const hasImage = Boolean(
+    matchedResource ||
+      isCustomListStyleImage(listStyleImage) ||
+      isDisclosureListStyleImage(listStyleImage) ||
+      listStyle?.split(" ")[0] === "disclosure-closed",
+  );
+
+  useEffect(() => {
+    setImageError(false);
+  }, [previewSrc, matchedResource?.presigned]);
+
+  const handleImageError = useCallback(async () => {
+    if (isRefreshing || bulletResourcesLoading) return;
+
+    setImageError(true);
+    setIsRefreshing(true);
+    try {
+      await onRefreshResources();
+    } finally {
+      setIsRefreshing(false);
+    }
+  }, [bulletResourcesLoading, isRefreshing, onRefreshResources]);
+
+  const selectedResourceValue = matchedResource
+    ? toResourceListStyleValue(matchedResource.id)
+    : undefined;
+
+  return (
+    <div className="space-y-2 rounded-lg border border-gray-200 bg-gray-50/80 p-3 dark:border-gray-600 dark:bg-gray-900/30">
+      <label className="block text-xs font-medium text-gray-600 dark:text-gray-300">
+        {t("template.listStyleImage", "List Style Image")}
+      </label>
+
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start">
+        <div
+          className="flex h-20 w-20 shrink-0 items-center justify-center overflow-hidden rounded-md border border-gray-200 bg-white dark:border-gray-600 dark:bg-gray-800"
+          aria-label={t("template.listStyleImagePreview", "List style image preview")}
+        >
+          {previewSrc && !imageError ? (
+            isDisclosureListStyleImage(listStyleImage) ||
+            listStyle?.split(" ")[0] === "disclosure-closed" ? (
+              <DisclosurePreview />
+            ) : (
+              <img
+                src={previewSrc}
+                alt=""
+                className="h-full w-full object-contain p-1"
+                onError={handleImageError}
+              />
+            )
+          ) : imageError ? (
+            <div className="px-2 text-center text-[10px] text-gray-500 dark:text-gray-400">
+              {isRefreshing
+                ? t("template.refreshingImage", "Refreshing...")
+                : t("template.imageUnavailable", "Image unavailable")}
+            </div>
+          ) : (
+            <div className="flex flex-col items-center gap-1 px-2 text-gray-400 dark:text-gray-500">
+              <ImageIcon className="h-5 w-5" aria-hidden />
+              <span className="text-[10px] text-center">
+                {t("template.noListStyleImage", "No image")}
+              </span>
+            </div>
+          )}
+        </div>
+
+        <div className="min-w-0 flex-1 space-y-2">
+          {matchedResource && (
+            <p className="text-xs text-gray-600 dark:text-gray-300">
+              {getResourceLabel(matchedResource, locale)}
+            </p>
+          )}
+
+          <Select
+            value={selectedResourceValue}
+            onValueChange={(value) => {
+              const nextResourceId = value.slice("resource:".length);
+              onReplace(nextResourceId);
+            }}
+            disabled={bulletResourcesLoading || bulletResources.length === 0}
+          >
+            <SelectTrigger className={STYLE_SELECT_TRIGGER_CLASS}>
+              <SelectValue
+                placeholder={t(
+                  "template.replaceListStyleImage",
+                  "Replace image",
+                )}
+              />
+            </SelectTrigger>
+            <SelectContent className={STYLE_SELECT_CONTENT_CLASS}>
+              <SelectGroup>
+                <SelectLabel>
+                  {t(
+                    "template.customListBullets",
+                    "Custom bullets (Resource Configuration)",
+                  )}
+                </SelectLabel>
+                {bulletResources.map((resource) => (
+                  <SelectItem
+                    key={resource.id}
+                    value={toResourceListStyleValue(resource.id)}
+                  >
+                    <span className="flex min-w-0 items-center gap-2">
+                      <img
+                        src={resource.presigned}
+                        alt=""
+                        className="h-4 w-4 shrink-0 object-contain"
+                      />
+                      <span className="truncate">
+                        {getResourceLabel(resource, locale)}
+                      </span>
+                    </span>
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+
+          {hasImage && (
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="h-8 gap-1.5 text-xs"
+              onClick={onRemove}
+            >
+              <Trash2 className="h-3.5 w-3.5" aria-hidden />
+              {t("template.removeListStyleImage", "Remove image")}
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/PageMarginEditor.tsx b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/PageMarginEditor.tsx
new file mode 100644
index 000000000..1eacd446f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/PageMarginEditor.tsx
@@ -0,0 +1,111 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import {
+  StyleSettingCard,
+  STYLE_INPUT_CLASS,
+} from "./styleSettingsUi";
+
+export type PageMarginValue = {
+  top: number;
+  left: number;
+  right: number;
+  bottom: number;
+};
+
+export const PAGE_MARGIN_SETTING_CODE = "letter-page-margin";
+
+export const DEFAULT_PAGE_MARGIN: PageMarginValue = {
+  top: 90,
+  left: 30,
+  right: 93,
+  bottom: 30,
+};
+
+export const isPageMarginSetting = (code: string): boolean =>
+  code === PAGE_MARGIN_SETTING_CODE;
+
+const isPlainObject = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null && !Array.isArray(value);
+
+const toMargin = (value: unknown, fallback: number): number => {
+  const n =
+    typeof value === "number"
+      ? value
+      : typeof value === "string"
+        ? parseFloat(value)
+        : NaN;
+  return Number.isFinite(n) && n >= 0 ? n : fallback;
+};
+
+/** Coerces any input to a valid PageMarginValue, falling back to defaults. */
+export const normalizePageMarginValue = (value: unknown): PageMarginValue => {
+  const input = isPlainObject(value) ? value : {};
+  return {
+    top: toMargin(input.top, DEFAULT_PAGE_MARGIN.top),
+    left: toMargin(input.left, DEFAULT_PAGE_MARGIN.left),
+    right: toMargin(input.right, DEFAULT_PAGE_MARGIN.right),
+    bottom: toMargin(input.bottom, DEFAULT_PAGE_MARGIN.bottom),
+  };
+};
+
+interface PageMarginEditorProps {
+  value: unknown;
+  isDefault: boolean;
+  onChange: (margins: PageMarginValue) => void;
+  onToggleDefault: () => void;
+}
+
+const MARGIN_FIELDS: Array<{ key: keyof PageMarginValue; label: string }> = [
+  { key: "top", label: "Top" },
+  { key: "right", label: "Right" },
+  { key: "bottom", label: "Bottom" },
+  { key: "left", label: "Left" },
+];
+
+export const PageMarginEditor: React.FC<PageMarginEditorProps> = ({
+  value,
+  isDefault,
+  onChange,
+  onToggleDefault,
+}) => {
+  const { t } = useTranslation();
+  const margins = normalizePageMarginValue(value);
+
+  const handleMarginChange = (key: keyof PageMarginValue, raw: string) => {
+    const next = raw === "" ? 0 : Math.max(0, Number(raw));
+    if (!Number.isFinite(next)) return;
+    onChange({ ...margins, [key]: next });
+  };
+
+  return (
+    <StyleSettingCard
+      title={t("template.pageMargin", "Page Margins")}
+      subtitle={t(
+        "template.pageMarginHint",
+        "Set top, right, bottom, and left margins in pixels.",
+      )}
+      code={PAGE_MARGIN_SETTING_CODE}
+      isDefault={isDefault}
+      onToggleDefault={onToggleDefault}
+    >
+      <fieldset disabled={isDefault}>
+        <div className="grid grid-cols-2 gap-3">
+          {MARGIN_FIELDS.map(({ key, label }) => (
+            <div key={key}>
+              <label className="mb-1.5 block text-xs font-medium text-gray-600 dark:text-gray-300">
+                {t(`template.margin${label}`, label)} (px)
+              </label>
+              <input
+                type="number"
+                min={0}
+                value={margins[key]}
+                onChange={(e) => handleMarginChange(key, e.target.value)}
+                className={STYLE_INPUT_CLASS}
+              />
+            </div>
+          ))}
+        </div>
+      </fieldset>
+    </StyleSettingCard>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/ResetAllDefaultsModal.tsx b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/ResetAllDefaultsModal.tsx
new file mode 100644
index 000000000..ddb4944ee
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/ResetAllDefaultsModal.tsx
@@ -0,0 +1,74 @@
+import { useTranslation } from "react-i18next";
+import { AlertTriangle, Loader2, RotateCcw, X } from "lucide-react";
+
+interface ResetAllDefaultsModalProps {
+  isOpen: boolean;
+  busy?: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export const ResetAllDefaultsModal: React.FC<ResetAllDefaultsModalProps> = ({
+  isOpen,
+  busy = false,
+  onConfirm,
+  onCancel,
+}) => {
+  const { t } = useTranslation();
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+      <div className="mx-4 w-full max-w-md overflow-hidden rounded-xl bg-white shadow-xl dark:bg-gray-800">
+        <div className="flex items-center justify-between border-b border-gray-200 p-4 dark:border-gray-700">
+          <div className="flex items-center gap-2 text-amber-600 dark:text-amber-400">
+            <AlertTriangle className="h-5 w-5" />
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+              {t("template.resetAllTitle", "Reset all settings?")}
+            </h3>
+          </div>
+          <button
+            type="button"
+            onClick={onCancel}
+            disabled={busy}
+            className="rounded-lg p-1 transition-colors hover:bg-gray-100 disabled:opacity-50 dark:hover:bg-gray-700"
+          >
+            <X className="h-5 w-5 text-gray-500" />
+          </button>
+        </div>
+        <div className="p-6">
+          <p className="text-sm text-gray-700 dark:text-gray-300">
+            {t(
+              "template.resetAllDescription",
+              "This will restore every configurable style setting for this unit to the global template defaults. Unit overrides will be removed and saved immediately. Preview preferences (such as language) are not affected.",
+            )}
+          </p>
+        </div>
+        <div className="flex justify-end gap-3 border-t border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/40">
+          <button
+            type="button"
+            onClick={onCancel}
+            disabled={busy}
+            className="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
+          >
+            {t("common.cancel", "Cancel")}
+          </button>
+          <button
+            type="button"
+            onClick={onConfirm}
+            disabled={busy}
+            className="inline-flex items-center gap-2 rounded-lg bg-amber-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-amber-700 disabled:opacity-50 dark:hover:bg-amber-500"
+          >
+            {busy ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <RotateCcw className="h-4 w-4" />
+            )}
+            {t("template.resetAllConfirm", "Reset to defaults")}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/SettingHistoryModal.tsx b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/SettingHistoryModal.tsx
new file mode 100644
index 000000000..784866595
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/SettingHistoryModal.tsx
@@ -0,0 +1,167 @@
+import { useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { History, Loader, RotateCcw } from "lucide-react";
+import { toast } from "sonner";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { TemplateService } from "@/user-management/services/api/templateService";
+import {
+  TemplateSampleSetting,
+  TemplateSettingValueHistoryEntry,
+} from "@/user-management/services/TemplateConfiguration/types/templateTypes";
+
+type SettingHistoryModalProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  setting: TemplateSampleSetting | null;
+  unitId?: string;
+  onRestored: () => void | Promise<void>;
+};
+
+const formatTimestamp = (value?: string) => {
+  if (!value) return "—";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleString();
+};
+
+export const SettingHistoryModal: React.FC<SettingHistoryModalProps> = ({
+  open,
+  onOpenChange,
+  setting,
+  unitId,
+  onRestored,
+}) => {
+  const { t } = useTranslation();
+  const [items, setItems] = useState<TemplateSettingValueHistoryEntry[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [restoringId, setRestoringId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadHistory = useCallback(async () => {
+    if (!setting?.id || !unitId) return;
+
+    try {
+      setLoading(true);
+      setError(null);
+      const response = await TemplateService.getTemplateSettingValueHistory(
+        setting.id,
+        unitId,
+      );
+      setItems(response.items ?? []);
+    } catch (err) {
+      const message =
+        err instanceof Error
+          ? err.message
+          : t("template.historyLoadFailed", "Failed to load setting history");
+      setError(message);
+      setItems([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [setting?.id, unitId, t]);
+
+  useEffect(() => {
+    if (open) {
+      void loadHistory();
+    } else {
+      setItems([]);
+      setError(null);
+      setRestoringId(null);
+    }
+  }, [open, loadHistory]);
+
+  const handleRestore = async (historyId: string) => {
+    if (!setting?.id || !unitId) return;
+
+    try {
+      setRestoringId(historyId);
+      await TemplateService.restoreTemplateSettingFromHistory(
+        setting.id,
+        historyId,
+        unitId,
+      );
+      toast.success(
+        t("template.historyRestored", "Setting restored from history"),
+      );
+      await onRestored();
+      onOpenChange(false);
+    } catch (err) {
+      const message =
+        err instanceof Error
+          ? err.message
+          : t("template.historyRestoreFailed", "Failed to restore setting");
+      toast.error(message);
+    } finally {
+      setRestoringId(null);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[80vh] max-w-2xl overflow-hidden">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <History className="h-5 w-5 text-purple-600" />
+            {t("template.settingHistory", "Setting History")}
+          </DialogTitle>
+        </DialogHeader>
+
+        {setting ? (
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            {setting.code}
+          </p>
+        ) : null}
+
+        {loading ? (
+          <div className="flex items-center justify-center py-10">
+            <Loader className="h-6 w-6 animate-spin text-purple-600" />
+          </div>
+        ) : error ? (
+          <div className="rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700 dark:border-red-800 dark:bg-red-900/20 dark:text-red-300">
+            {error}
+          </div>
+        ) : items.length === 0 ? (
+          <p className="py-8 text-center text-sm text-gray-500 dark:text-gray-400">
+            {t("template.noHistory", "No history entries for this setting.")}
+          </p>
+        ) : (
+          <div className="max-h-[50vh] space-y-3 overflow-y-auto pr-1">
+            {items.map((entry) => (
+              <div
+                key={entry.id}
+                className="rounded-lg border border-gray-200 p-4 dark:border-gray-700"
+              >
+                <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
+                  <div className="text-sm text-gray-600 dark:text-gray-300">
+                    {formatTimestamp(entry.createdAt || entry.updatedAt)}
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => void handleRestore(entry.id)}
+                    disabled={restoringId === entry.id}
+                    className="inline-flex items-center gap-1 rounded-md border border-purple-200 px-2.5 py-1 text-xs font-medium text-purple-700 transition-colors hover:bg-purple-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-purple-800 dark:text-purple-300 dark:hover:bg-purple-900/30"
+                  >
+                    {restoringId === entry.id ? (
+                      <Loader className="h-3.5 w-3.5 animate-spin" />
+                    ) : (
+                      <RotateCcw className="h-3.5 w-3.5" />
+                    )}
+                    {t("template.restoreVersion", "Restore")}
+                  </button>
+                </div>
+                <pre className="overflow-x-auto rounded-md bg-gray-50 p-3 text-xs text-gray-700 dark:bg-gray-900 dark:text-gray-200">
+                  {JSON.stringify(entry.value ?? {}, null, 2)}
+                </pre>
+              </div>
+            ))}
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/SettingsPanel.tsx b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/SettingsPanel.tsx
new file mode 100644
index 000000000..9dd1b8cd7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/SettingsPanel.tsx
@@ -0,0 +1,252 @@
+import React, { useState, useMemo } from "react";
+import { Search, ChevronDown, Loader } from "lucide-react";
+import { TemplateSampleSetting } from "@/user-management/services/TemplateConfiguration/types/templateTypes";
+import { useTranslation } from "react-i18next";
+
+interface SectionSettings {
+  items: TemplateSampleSetting[];
+  page: number;
+  hasMore: boolean;
+  loading: boolean;
+}
+
+
+interface SettingsPanelProps {
+  settings: TemplateSampleSetting[];
+  onSettingChange: (index: number, field: string, value: string) => void;
+  onLoadMore?: (sectionKey: string, nextPage: number) => void;
+}
+
+interface StyleInputsProps {
+  setting: TemplateSampleSetting;
+  index: number;
+  onChange: (index: number, field: string, value: string) => void;
+}
+
+const StyleInputs: React.FC<StyleInputsProps> = ({
+  setting,
+  index,
+  onChange,
+}) => {
+  return (
+    <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600 space-y-3">
+      <h4 className="font-medium text-sm text-gray-900 dark:text-gray-100 capitalize">
+        {setting.code.replace("-", " ")}
+      </h4>
+      <div className="grid grid-cols-3 gap-3">
+        {Object.entries(setting.value).map(([key, value]) => (
+          <div key={key}>
+            <label className="block text-xs font-medium text-gray-600 dark:text-gray-300 mb-1 capitalize">
+              {key.replace("-", " ")}
+            </label>
+            <input
+              type="text"
+              value={typeof value === "string" ? value : String(value ?? "")}
+              onChange={(e) => onChange(index, key, e.target.value)}
+              className="w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-purple-500 dark:bg-gray-600 dark:text-gray-200"
+              placeholder={key}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+interface CollapsibleSectionProps {
+  title: string;
+  sectionKey: string;
+  sectionData: SectionSettings;
+  settings: TemplateSampleSetting[];
+  onSettingChange: (index: number, field: string, value: string) => void;
+  onLoadMore: (sectionKey: string, nextPage: number) => void;
+}
+
+const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
+  title,
+  sectionKey,
+  sectionData,
+  settings,
+  onSettingChange,
+  onLoadMore,
+}) => {
+  const [isOpen, setIsOpen] = useState(true);
+
+  return (
+    <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 flex items-center justify-between transition-colors"
+      >
+        <h3 className="font-semibold text-gray-900 dark:text-gray-100">{title}</h3>
+        <ChevronDown
+          className={`h-5 w-5 text-gray-600 dark:text-gray-300 transition-transform ${
+            isOpen ? "rotate-180" : ""
+          }`}
+        />
+      </button>
+
+      {isOpen && (
+        <div className="p-4 space-y-4">
+          {sectionData.items.length === 0 ? (
+            <p className="text-sm text-gray-500 dark:text-gray-400">No settings available</p>
+          ) : (
+            <>
+              {sectionData.items.map((setting) => {
+                const originalIndex = settings.findIndex(
+                  (s) => s.code === setting.code,
+                );
+                return (
+                  <StyleInputs
+                    key={setting.code}
+                    setting={setting}
+                    index={originalIndex}
+                    onChange={onSettingChange}
+                  />
+                );
+              })}
+
+              {sectionData.hasMore && (
+                <button
+                  onClick={() =>
+                    onLoadMore(sectionKey, sectionData.page + 1)
+                  }
+                  disabled={sectionData.loading}
+                  className="w-full px-3 py-2 text-sm text-purple-600 hover:text-purple-800 hover:bg-purple-50 rounded transition-colors flex items-center justify-center gap-2 disabled:opacity-50"
+                >
+                  {sectionData.loading ? (
+                    <>
+                      <Loader className="h-4 w-4 animate-spin" />
+                      Loading...
+                    </>
+                  ) : (
+                    "Load more"
+                  )}
+                </button>
+              )}
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const SettingsPanel: React.FC<SettingsPanelProps> = ({
+  settings,
+  onSettingChange,
+  onLoadMore = () => {},
+}) => {
+  const { t } = useTranslation();
+  const [searchTerm, setSearchTerm] = useState("");
+
+  // Flatten all settings for search
+  const allSettings = useMemo(() => settings, [settings]);
+
+  // Filter settings based on search term
+  const filteredSettings = useMemo(() => {
+    if (!searchTerm.trim()) return null;
+
+    return allSettings.filter(
+      (s) =>
+        s.code.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        Object.values(s.value).some((v) =>
+          String(v).toLowerCase().includes(searchTerm.toLowerCase()),
+        ),
+    );
+  }, [searchTerm, allSettings]);
+
+  // Group settings by section (for non-search view)
+  const sectionSettings: Record<string, SectionSettings> = useMemo(() => {
+    return {
+      subject: {
+        items: allSettings.filter((s) => s.code.includes("subject")),
+        page: 0,
+        hasMore: false,
+        loading: false,
+      },
+      body: {
+        items: allSettings.filter((s) => s.code.includes("body")),
+        page: 0,
+        hasMore: false,
+        loading: false,
+      },
+      header: {
+        items: allSettings.filter((s) => s.code.includes("header")),
+        page: 0,
+        hasMore: false,
+        loading: false,
+      },
+      footer: {
+        items: allSettings.filter((s) => s.code.includes("footer")),
+        page: 0,
+        hasMore: false,
+        loading: false,
+      },
+    };
+  }, [allSettings]);
+
+  return (
+    <div className="space-y-4">
+      {/* Search Input */}
+      <div className="relative">
+        <Search className="absolute left-3 top-3 h-5 w-5 text-gray-400" />
+        <input
+          type="text"
+          placeholder={t("common.search", "Search settings...")}
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
+        />
+      </div>
+
+      {/* Filtered Results View */}
+      {filteredSettings !== null ? (
+        <div className="space-y-4">
+          <p className="text-sm text-gray-600">
+            Found {filteredSettings.length} setting
+            {filteredSettings.length !== 1 ? "s" : ""}
+          </p>
+          {filteredSettings.length === 0 ? (
+            <div className="text-center py-8">
+              <p className="text-gray-500">
+                {t("common.noResults", "No settings found")}
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-4">
+              {filteredSettings.map((setting) => {
+                const originalIndex = allSettings.findIndex(
+                  (s) => s.code === setting.code,
+                );
+                return (
+                  <StyleInputs
+                    key={setting.code}
+                    setting={setting}
+                    index={originalIndex}
+                    onChange={onSettingChange}
+                  />
+                );
+              })}
+            </div>
+          )}
+        </div>
+      ) : (
+        /* Collapsible Sections View */
+        <div className="space-y-4">
+          {Object.entries(sectionSettings).map(([key, section]) => (
+            <CollapsibleSection
+              key={key}
+              title={key.charAt(0).toUpperCase() + key.slice(1)}
+              sectionKey={key}
+              sectionData={section}
+              settings={allSettings}
+              onSettingChange={onSettingChange}
+              onLoadMore={onLoadMore}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/StyleNavigationMenu.tsx b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/StyleNavigationMenu.tsx
new file mode 100644
index 000000000..07d02770d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/StyleNavigationMenu.tsx
@@ -0,0 +1,72 @@
+import { useTranslation } from "react-i18next";
+import { ChevronDown } from "lucide-react";
+import { useState } from "react";
+
+interface StyleNavigationMenuProps {
+  categories: Array<{
+    code: string;
+    label: string;
+    settingIds: string[];
+  }>;
+  selectedCode: string | null;
+  onSelectCategory: (code: string) => void;
+}
+
+export const StyleNavigationMenu: React.FC<StyleNavigationMenuProps> = ({
+  categories,
+  selectedCode,
+  onSelectCategory,
+}) => {
+  const { t } = useTranslation();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const selectedCategory = categories.find((cat) => cat.code === selectedCode);
+
+  return (
+    <div className="relative mb-4">
+      {/* Dropdown Button */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full flex items-center justify-between px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+      >
+        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+          {selectedCategory
+            ? selectedCategory.label
+            : t("template.selectStyleCategory", "Select Style Category")}
+        </span>
+        <ChevronDown
+          className={`h-4 w-4 text-gray-500 dark:text-gray-400 transition-transform ${
+            isOpen ? "rotate-180" : ""
+          }`}
+        />
+      </button>
+
+      {/* Dropdown Menu */}
+      {isOpen && (
+        <div className="absolute z-10 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-64 overflow-y-auto">
+          {categories.map((category) => (
+            <button
+              key={category.code}
+              onClick={() => {
+                onSelectCategory(category.code);
+                setIsOpen(false);
+              }}
+              className={`w-full text-left px-4 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors ${
+                selectedCode === category.code
+                  ? "bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 font-medium"
+                  : "text-gray-700 dark:text-gray-300"
+              }`}
+            >
+              <div className="flex items-center justify-between">
+                <span>{category.label}</span>
+                <span className="text-xs text-gray-500">
+                  {category.settingIds.length} {category.settingIds.length === 1 ? "setting" : "settings"}
+                </span>
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/StyleSettingsEditor.tsx b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/StyleSettingsEditor.tsx
new file mode 100644
index 000000000..2bea9d950
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/StyleSettingsEditor.tsx
@@ -0,0 +1,864 @@
+import React, { useMemo, useCallback, useState, useEffect, useRef } from "react";
+import { CSSBuilder } from "react-css-nocode-editor";
+import { TemplateSampleSetting } from "@/user-management/services/TemplateConfiguration/types/templateTypes";
+import { useTranslation } from "react-i18next";
+import { ChevronDown } from "lucide-react";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { useListBulletResources } from "../hooks/useListBulletResources";
+import {
+  isCustomListStyleImage,
+  isResourceListStyle,
+  ListBulletResource,
+  toResourceListStyleValue,
+} from "../utils/templateResourceConstants";
+import { extractListStyleResourceId } from "../utils/templateSamplePayloadUtils";
+import {
+  mergeCssProperties,
+  omitCssProperties,
+} from "../utils/cssConversion";
+import {
+  getDefaultLetterFontFamily,
+  getDefaultLetterFontSize,
+  settingSupportsListFormatting,
+} from "../utils/templateSettingConstants";
+import { ListStyleImageField } from "./ListStyleImageField";
+import { cn } from "@/shared/lib/utils";
+import {
+  StyleSettingSelect,
+  StyleSettingToggle,
+  STYLE_INPUT_CLASS,
+  STYLE_SELECT_CONTENT_CLASS,
+  STYLE_SELECT_TRIGGER_CLASS,
+} from "./styleSettingsUi";
+
+const FONT_WEIGHT_OPTIONS = [
+  { value: "normal", label: "Normal (400)" },
+  { value: "500", label: "Medium (500)" },
+  { value: "600", label: "Semi-bold (600)" },
+  { value: "bold", label: "Bold (700)" },
+  { value: "800", label: "Extra Bold (800)" },
+  { value: "900", label: "Black (900)" },
+];
+
+const FONT_FAMILY_OPTIONS = [
+  { value: "serif", label: "Serif" },
+  { value: "sans-serif", label: "Sans-serif" },
+  { value: "monospace", label: "Monospace" },
+  { value: "cursive", label: "Cursive" },
+  { value: "fantasy", label: "Fantasy" },
+  { value: "Georgia, serif", label: "Georgia" },
+  {
+    value: "'Visual Geez Unicode', 'Visual Geez', serif",
+    label: "Visual Geez",
+  },
+  {
+    value: "'Times New Roman', Times, serif",
+    label: "Times New Roman",
+  },
+  { value: "Arial, sans-serif", label: "Arial" },
+  { value: "Verdana, sans-serif", label: "Verdana" },
+  { value: "'Courier New', monospace", label: "Courier New" },
+];
+
+const TEXT_DECORATION_OPTIONS = [
+  { value: "none", label: "None" },
+  { value: "underline", label: "Underline" },
+  { value: "overline", label: "Overline" },
+  { value: "line-through", label: "Line Through" },
+  { value: "underline overline", label: "Underline & Overline" },
+];
+
+const TEXT_ALIGN_OPTIONS = [
+  { value: "Empty", label: "Empty" },
+  { value: "left", label: "Left" },
+  { value: "center", label: "Center" },
+  { value: "right", label: "Right" },
+  { value: "justify", label: "Justify" },
+];
+
+interface StyleSettingsEditorProps {
+  setting: TemplateSampleSetting;
+  index: number;
+  onChange: (index: number, cssString: string) => void;
+  isDefault: boolean;
+  onToggleDefault: (settingId: string) => void;
+  storedResourceId?: string | null;
+  onListStyleResourceChange?: (resourceId: string | null) => void;
+  previewLanguage?: "am" | "en";
+}
+
+const parseFontSizeParts = (
+  value: string | undefined,
+  fallback: string,
+): { amount: string; unit: "px" | "pt" } => {
+  const resolved = value || fallback;
+  const match = resolved.match(/^([\d.]+)(px|pt)$/);
+  return {
+    amount: match?.[1] ?? "12",
+    unit: match?.[2] === "px" ? "px" : "pt",
+  };
+};
+
+const formatSettingTitle = (code: string) =>
+  code
+    .replace(/^letter-/, "")
+    .replace(/-style$/, "")
+    .replace(/-/g, " ")
+    .replace(/\b\w/g, (char) => char.toUpperCase());
+
+// Generate SVG data URI for disclosure-closed
+const getDisclosureSVG = () => {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><polygon points="6,4 12,8 6,12" fill="currentColor"/></svg>`;
+  return `url('data:image/svg+xml;base64,${btoa(svg)}')`;
+};
+
+// CSS parser (handles data URIs)
+const parseCSSString = (cssString: string): Record<string, string> => {
+  const styles: Record<string, string> = {};
+  let depth = 0;
+  let current = '';
+
+  const processDeclaration = (decl: string) => {
+    decl = decl.trim();
+    if (!decl) return;
+    const colonIdx = decl.indexOf(':');
+    if (colonIdx <= 0) return;
+    const property = decl.slice(0, colonIdx).trim();
+    const value = decl.slice(colonIdx + 1).trim();
+    if (property && value) styles[property] = value;
+  };
+
+  for (let i = 0; i < cssString.length; i++) {
+    const ch = cssString[i];
+    if (ch === '(') depth++;
+    else if (ch === ')') depth--;
+    if (ch === ';' && depth === 0) {
+      processDeclaration(current);
+      current = '';
+    } else {
+      current += ch;
+    }
+  }
+  processDeclaration(current);
+  return styles;
+};
+
+// Build CSS string from object
+const buildCSSString = (styles: Record<string, string>): string => {
+  return Object.entries(styles)
+    .map(([key, value]) => `${key}: ${value};`)
+    .join(' ');
+};
+
+const normalizeStyles = (
+  styles: Record<string, string>,
+  bulletResources: ListBulletResource[] = [],
+): Record<string, string> => {
+  const normalized = { ...styles };
+  const listStyle = normalized["list-style"]?.split(" ")[0];
+
+  if (listStyle === "disclosure-closed") {
+    normalized["list-style-image"] = getDisclosureSVG();
+    delete normalized["list-style-type"];
+    return normalized;
+  }
+
+  if (listStyle && isResourceListStyle(listStyle)) {
+    const resourceId = listStyle.slice("resource:".length);
+    const resource = bulletResources.find((item) => item.id === resourceId);
+    normalized["list-style"] = "none";
+    delete normalized["list-style-type"];
+    if (resource) {
+      normalized["list-style-image"] = `url('${resource.presigned}')`;
+    }
+    return normalized;
+  }
+
+  if (isCustomListStyleImage(normalized["list-style-image"])) {
+    normalized["list-style"] = normalized["list-style"] || "none";
+    delete normalized["list-style-type"];
+    return normalized;
+  }
+
+  delete normalized["list-style-image"];
+  return normalized;
+};
+
+const resolveListStyleSelectValue = (
+  styles: Record<string, string>,
+  bulletResources: ListBulletResource[],
+): string => {
+  const listStyle = styles["list-style"]?.split(" ")[0];
+  if (listStyle && isResourceListStyle(listStyle)) {
+    return listStyle;
+  }
+
+  const imageValue = styles["list-style-image"];
+  if (imageValue) {
+    const matchedResource = bulletResources.find(
+      (resource) =>
+        imageValue.includes(resource.presigned) ||
+        imageValue.includes(resource.id),
+    );
+    if (matchedResource) {
+      return toResourceListStyleValue(matchedResource.id);
+    }
+  }
+
+  return listStyle || styles["list-style-type"] || "disc";
+};
+
+const STANDARD_LIST_STYLE_OPTIONS = [
+  { value: "disc", label: "Bullet" },
+  { value: "circle", label: "Circle" },
+  { value: "square", label: "Square" },
+  { value: "disclosure-closed", label: "Black Right Triangle (▶)" },
+  { value: "decimal", label: "Numbers (1, 2, 3)" },
+  { value: "lower-alpha", label: "Lowercase Letters (a, b, c)" },
+  { value: "upper-alpha", label: "Uppercase Letters (A, B, C)" },
+  { value: "lower-roman", label: "Lowercase Roman (i, ii, iii)" },
+  { value: "upper-roman", label: "Uppercase Roman (I, II, III)" },
+  { value: "none", label: "None" },
+] as const;
+
+const getResourceLabel = (
+  resource: ListBulletResource,
+  locale: "am" | "en",
+) => resource.name?.[locale] || resource.name?.en || resource.id;
+
+const ListStyleResourcePreview = ({
+  resource,
+  locale,
+}: {
+  resource: ListBulletResource;
+  locale: "am" | "en";
+}) => (
+  <span className="flex min-w-0 items-center gap-2">
+    <img
+      src={resource.presigned}
+      alt=""
+      className="h-4 w-4 shrink-0 object-contain"
+    />
+    <span className="truncate">{getResourceLabel(resource, locale)}</span>
+  </span>
+);
+
+export const StyleSettingsEditor: React.FC<StyleSettingsEditorProps> = ({
+  setting,
+  index,
+  onChange,
+  isDefault,
+  onToggleDefault,
+  storedResourceId,
+  onListStyleResourceChange,
+  previewLanguage = "am",
+}) => {
+  const { t, i18n } = useTranslation();
+  const defaultFontFamily = getDefaultLetterFontFamily(previewLanguage);
+  const defaultFontSize = getDefaultLetterFontSize();
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(() => !isDefault);
+  const { resources: bulletResources, loading: bulletResourcesLoading, refetch: refetchBulletResources } =
+    useListBulletResources();
+  const locale = i18n.language?.startsWith("am") ? "am" : "en";
+  const syncedResourceIdRef = useRef<string | null | undefined>(undefined);
+  const hasInitialNormalizedRef = useRef(false);
+  const hydratedResourceRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (!isDefault) {
+      setIsExpanded(true);
+    }
+  }, [isDefault]);
+
+  // Get the CSS string
+  const cssString = useMemo(() => {
+    return typeof setting.value === "string" ? setting.value : "";
+  }, [setting.value]);
+
+  // Parse CSS string to object
+  const parsedStyles = useMemo(() => {
+    return parseCSSString(cssString);
+  }, [cssString]);
+
+  const fontSizeParts = useMemo(
+    () => parseFontSizeParts(parsedStyles["font-size"], defaultFontSize),
+    [parsedStyles, defaultFontSize],
+  );
+
+  const supportsListFormatting = useMemo(
+    () => settingSupportsListFormatting(setting),
+    [setting],
+  );
+
+  const advancedCssString = useMemo(
+    () => omitCssProperties(cssString, ["list-style-image"]),
+    [cssString],
+  );
+
+  // Detect if this is a header/footer style
+  const isHeaderFooterStyle = useMemo(() => {
+    const code = setting.code.toLowerCase();
+    return code.includes("header") || code.includes("footer");
+  }, [setting.code]);
+
+  // Normalization helper
+  const listStyleSelectValue = useMemo(
+    () => resolveListStyleSelectValue(parsedStyles, bulletResources),
+    [parsedStyles, bulletResources],
+  );
+
+  const selectedBulletResource = useMemo(() => {
+    if (!isResourceListStyle(listStyleSelectValue)) return null;
+    const resourceId = listStyleSelectValue.slice("resource:".length);
+    return bulletResources.find((resource) => resource.id === resourceId) ?? null;
+  }, [listStyleSelectValue, bulletResources]);
+
+  const selectedStandardListStyle = useMemo(
+    () =>
+      STANDARD_LIST_STYLE_OPTIONS.find(
+        (option) => option.value === listStyleSelectValue,
+      ) ?? null,
+    [listStyleSelectValue],
+  );
+
+  // Handle property change with special list-style-image logic
+  const handlePropertyChange = useCallback(
+    (property: string, value: string) => {
+      let updated = { ...parsedStyles, [property]: value };
+
+      if (property === "list-style") {
+        const specialListStyles = [
+          "disclosure-closed",
+          "disclosure-open",
+          "none",
+        ];
+
+        if (isResourceListStyle(value)) {
+          const resourceId = value.slice("resource:".length);
+          const resource = bulletResources.find((item) => item.id === resourceId);
+          updated["list-style"] = "none";
+          delete updated["list-style-type"];
+          if (resource) {
+            updated["list-style-image"] = `url('${resource.presigned}')`;
+          }
+          if (syncedResourceIdRef.current !== resourceId) {
+            syncedResourceIdRef.current = resourceId;
+            onListStyleResourceChange?.(resourceId);
+          }
+        } else if (specialListStyles.includes(value)) {
+          delete updated["list-style-type"];
+          if (value !== "disclosure-closed") {
+            delete updated["list-style-image"];
+          }
+          if (syncedResourceIdRef.current !== null) {
+            syncedResourceIdRef.current = null;
+            onListStyleResourceChange?.(null);
+          }
+        } else {
+          delete updated["list-style-image"];
+          if (syncedResourceIdRef.current !== null) {
+            syncedResourceIdRef.current = null;
+            onListStyleResourceChange?.(null);
+          }
+        }
+      }
+
+      updated = normalizeStyles(updated, bulletResources);
+      const newCssString = buildCSSString(updated);
+      onChange(index, newCssString);
+    },
+    [parsedStyles, index, onChange, bulletResources, onListStyleResourceChange],
+  );
+
+  // Sync resourceId from existing CSS once bullet resources are available.
+  // Do not call onChange here — that caused infinite update loops when presigned URLs changed.
+  useEffect(() => {
+    if (bulletResourcesLoading) return;
+
+    const resourceId = extractListStyleResourceId(
+      normalizeStyles(parseCSSString(cssString), bulletResources),
+      bulletResources,
+    );
+
+    if (syncedResourceIdRef.current === resourceId) return;
+    syncedResourceIdRef.current = resourceId;
+    onListStyleResourceChange?.(resourceId);
+  }, [
+    bulletResourcesLoading,
+    bulletResources,
+    cssString,
+    onListStyleResourceChange,
+  ]);
+
+  // Hydrate custom-image from stored resourceId when API returns type only.
+  useEffect(() => {
+    if (bulletResourcesLoading || !storedResourceId) return;
+    if (hydratedResourceRef.current === storedResourceId) return;
+
+    const current = parseCSSString(cssString);
+    if (isCustomListStyleImage(current["list-style-image"])) {
+      hydratedResourceRef.current = storedResourceId;
+      return;
+    }
+
+    const resource = bulletResources.find(
+      (item) => item.id === storedResourceId,
+    );
+    if (!resource) return;
+
+    hydratedResourceRef.current = storedResourceId;
+    const hydrated = normalizeStyles(
+      {
+        ...current,
+        "list-style": "none",
+        "list-style-image": `url('${resource.presigned}')`,
+      },
+      bulletResources,
+    );
+    const hydratedCss = buildCSSString(hydrated);
+    if (hydratedCss !== cssString) {
+      onChange(index, hydratedCss);
+    }
+  }, [
+    bulletResourcesLoading,
+    storedResourceId,
+    bulletResources,
+    cssString,
+    index,
+    onChange,
+  ]);
+
+  // One-time normalization on mount (e.g. disclosure-closed SVG).
+  useEffect(() => {
+    if (hasInitialNormalizedRef.current) return;
+    hasInitialNormalizedRef.current = true;
+
+    const current = parseCSSString(cssString);
+    const normalized = normalizeStyles(current, bulletResources);
+    const normalizedCss = buildCSSString(normalized);
+
+    if (normalizedCss !== cssString) {
+      onChange(index, normalizedCss);
+    }
+  }, []);
+
+  const handleAdvancedChange = useCallback(
+    (newCssString: string) => {
+      const preservedListStyleImage = parsedStyles["list-style-image"];
+      const mergedCssString = preservedListStyleImage
+        ? mergeCssProperties(newCssString, {
+            "list-style-image": preservedListStyleImage,
+          })
+        : newCssString;
+
+      const normalized = normalizeStyles(
+        parseCSSString(mergedCssString),
+        bulletResources,
+      );
+      const normalizedCss = buildCSSString(normalized);
+
+      if (normalizedCss === cssString) return;
+
+      const resourceId = extractListStyleResourceId(normalized, bulletResources);
+      if (syncedResourceIdRef.current !== resourceId) {
+        syncedResourceIdRef.current = resourceId;
+        onListStyleResourceChange?.(resourceId);
+      }
+
+      onChange(index, normalizedCss);
+    },
+    [
+      index,
+      onChange,
+      cssString,
+      parsedStyles,
+      bulletResources,
+      onListStyleResourceChange,
+    ],
+  );
+
+  const handleReplaceListStyleImage = useCallback(
+    (resourceId: string) => {
+      handlePropertyChange("list-style", toResourceListStyleValue(resourceId));
+    },
+    [handlePropertyChange],
+  );
+
+  const handleRemoveListStyleImage = useCallback(() => {
+    const updated = { ...parsedStyles };
+    delete updated["list-style-image"];
+
+    const currentListStyle = updated["list-style"]?.split(" ")[0];
+    if (!currentListStyle || currentListStyle === "none") {
+      updated["list-style"] = "disc";
+    }
+
+    if (syncedResourceIdRef.current !== null) {
+      syncedResourceIdRef.current = null;
+      onListStyleResourceChange?.(null);
+    }
+
+    const normalized = normalizeStyles(updated, bulletResources);
+    onChange(index, buildCSSString(normalized));
+  }, [
+    parsedStyles,
+    bulletResources,
+    index,
+    onChange,
+    onListStyleResourceChange,
+  ]);
+
+  if (!setting || !setting.code || !setting.id) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        "mt-4 overflow-hidden rounded-xl border bg-white shadow-sm transition-shadow dark:bg-gray-800",
+        isDefault
+          ? "border-gray-200 dark:border-gray-700"
+          : "border-purple-200 ring-1 ring-purple-100 dark:border-purple-800 dark:ring-purple-900/40",
+      )}
+    >
+      <button
+        type="button"
+        onClick={() => setIsExpanded((current) => !current)}
+        className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-gray-750"
+      >
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-2">
+            <h4 className="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">
+              {formatSettingTitle(setting.code)}
+            </h4>
+            <span className="rounded-md bg-gray-100 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-gray-500 dark:bg-gray-700 dark:text-gray-400">
+              {setting.code}
+            </span>
+            {!isDefault && (
+              <span className="rounded-full bg-purple-100 px-2 py-0.5 text-[10px] font-semibold uppercase text-purple-700 dark:bg-purple-900/50 dark:text-purple-300">
+                {t("template.customized", "Customized")}
+              </span>
+            )}
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          <span
+            onClick={(event) => event.stopPropagation()}
+            onKeyDown={(event) => event.stopPropagation()}
+            role="presentation"
+          >
+            <StyleSettingToggle
+              isDefault={isDefault}
+              onToggle={() => onToggleDefault(setting.id)}
+            />
+          </span>
+          <ChevronDown
+            className={cn(
+              "h-4 w-4 shrink-0 text-gray-400 transition-transform",
+              isExpanded && "rotate-180",
+            )}
+          />
+        </div>
+      </button>
+
+      {isExpanded && (
+        <div className="space-y-4 border-t border-gray-100 px-4 py-4 dark:border-gray-700">
+          {/* Common Properties */}
+          <div className="space-y-3">
+            <p className="text-xs font-medium text-gray-600 dark:text-gray-300">
+              {t("template.commonProperties", "Common Properties")}
+            </p>
+
+        {isHeaderFooterStyle ? (
+          <>
+            {/* Header/Footer Style Properties */}
+            <div>
+              <label className="block text-xs font-medium text-gray-600 dark:text-gray-300 mb-1">
+                {t("template.width", "Width")}
+              </label>
+              <input
+                type="text"
+                value={parsedStyles["width"] || "100%"}
+                onChange={(e) => handlePropertyChange("width", e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-sm"
+              />
+            </div>
+
+            <div>
+              <label className="block text-xs font-medium text-gray-600 dark:text-gray-300 mb-1">
+                {t("template.height", "Height")}
+              </label>
+              <input
+                type="text"
+                value={parsedStyles["height"] || "auto"}
+                onChange={(e) => handlePropertyChange("height", e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-sm"
+              />
+            </div>
+
+            {/* Margin */}
+            <div>
+              <label className="block text-xs font-medium text-gray-600 dark:text-gray-300 mb-1">
+                {t("template.margin", "Margin")}
+              </label>
+              <div className="grid grid-cols-2 gap-2">
+                <div>
+                  <label className="text-xs text-gray-500 dark:text-gray-400">Top</label>
+                  <input
+                    type="text"
+                    value={parsedStyles["margin-top"] || "0"}
+                    onChange={(e) => handlePropertyChange("margin-top", e.target.value)}
+                    className="w-full px-2 py-1 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded text-sm"
+                  />
+                </div>
+                <div>
+                  <label className="text-xs text-gray-500 dark:text-gray-400">Right</label>
+                  <input
+                    type="text"
+                    value={parsedStyles["margin-right"] || "0"}
+                    onChange={(e) => handlePropertyChange("margin-right", e.target.value)}
+                    className="w-full px-2 py-1 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded text-sm"
+                  />
+                </div>
+                <div>
+                  <label className="text-xs text-gray-500 dark:text-gray-400">Bottom</label>
+                  <input
+                    type="text"
+                    value={parsedStyles["margin-bottom"] || "0"}
+                    onChange={(e) => handlePropertyChange("margin-bottom", e.target.value)}
+                    className="w-full px-2 py-1 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded text-sm"
+                  />
+                </div>
+                <div>
+                  <label className="text-xs text-gray-500 dark:text-gray-400">Left</label>
+                  <input
+                    type="text"
+                    value={parsedStyles["margin-left"] || "0"}
+                    onChange={(e) => handlePropertyChange("margin-left", e.target.value)}
+                    className="w-full px-2 py-1 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded text-sm"
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Padding */}
+            <div>
+              <label className="block text-xs font-medium text-gray-600 dark:text-gray-300 mb-1">
+                {t("template.padding", "Padding")}
+              </label>
+              <div className="grid grid-cols-2 gap-2">
+                <div>
+                  <label className="text-xs text-gray-500 dark:text-gray-400">Top</label>
+                  <input
+                    type="text"
+                    value={parsedStyles["padding-top"] || "0"}
+                    onChange={(e) => handlePropertyChange("padding-top", e.target.value)}
+                    className="w-full px-2 py-1 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded text-sm"
+                  />
+                </div>
+                <div>
+                  <label className="text-xs text-gray-500 dark:text-gray-400">Right</label>
+                  <input
+                    type="text"
+                    value={parsedStyles["padding-right"] || "0"}
+                    onChange={(e) => handlePropertyChange("padding-right", e.target.value)}
+                    className="w-full px-2 py-1 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded text-sm"
+                  />
+                </div>
+                <div>
+                  <label className="text-xs text-gray-500 dark:text-gray-400">Bottom</label>
+                  <input
+                    type="text"
+                    value={parsedStyles["padding-bottom"] || "0"}
+                    onChange={(e) => handlePropertyChange("padding-bottom", e.target.value)}
+                    className="w-full px-2 py-1 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded text-sm"
+                  />
+                </div>
+                <div>
+                  <label className="text-xs text-gray-500 dark:text-gray-400">Left</label>
+                  <input
+                    type="text"
+                    value={parsedStyles["padding-left"] || "0"}
+                    onChange={(e) => handlePropertyChange("padding-left", e.target.value)}
+                    className="w-full px-2 py-1 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded text-sm"
+                  />
+                </div>
+              </div>
+            </div>
+          </>
+        ) : (
+          <>
+            {/* Text Style Properties (with text-align) */}
+            
+            {/* Font Size */}
+            <div>
+              <label className="block text-xs font-medium text-gray-600 dark:text-gray-300 mb-1">
+                {t("template.fontSize", "Font Size")}
+              </label>
+              <div className="flex gap-2">
+                <input
+                  type="number"
+                  value={fontSizeParts.amount}
+                  onChange={(e) =>
+                    handlePropertyChange(
+                      "font-size",
+                      `${e.target.value}${fontSizeParts.unit}`,
+                    )
+                  }
+                  placeholder="12"
+                  className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 text-sm"
+                />
+                <span className="flex items-center text-gray-600 dark:text-gray-400 text-sm">
+                  {fontSizeParts.unit}
+                </span>
+              </div>
+            </div>
+
+            {/* Font Weight */}
+            <StyleSettingSelect
+              label={t("template.fontWeight", "Font Weight")}
+              value={parsedStyles["font-weight"] || "normal"}
+              onValueChange={(value) => handlePropertyChange("font-weight", value)}
+              options={FONT_WEIGHT_OPTIONS}
+            />
+
+            {/* Font Family */}
+            <StyleSettingSelect
+              label={t("template.fontFamily", "Font Family")}
+              value={parsedStyles["font-family"] || defaultFontFamily}
+              onValueChange={(value) => handlePropertyChange("font-family", value)}
+              options={FONT_FAMILY_OPTIONS}
+            />
+
+            {/* Text Decoration */}
+            <StyleSettingSelect
+              label={t("template.textDecoration", "Text Decoration")}
+              value={parsedStyles["text-decoration"] || "none"}
+              onValueChange={(value) =>
+                handlePropertyChange("text-decoration", value)
+              }
+              options={TEXT_DECORATION_OPTIONS}
+            />
+
+            {/* Text Align */}
+            <StyleSettingSelect
+              label={t("template.textAlign", "Text Align")}
+              value={parsedStyles["text-align"] || "left"}
+              onValueChange={(value) => handlePropertyChange("text-align", value)}
+              options={TEXT_ALIGN_OPTIONS}
+            />
+
+            {/* List Style */}
+            {supportsListFormatting && (
+            <div>
+              <label className="block text-xs font-medium text-gray-600 dark:text-gray-300 mb-1">
+                {t("template.listStyle", "List Style")}
+              </label>
+              <Select
+                value={listStyleSelectValue}
+                onValueChange={(value) => handlePropertyChange("list-style", value)}
+              >
+                <SelectTrigger className={STYLE_SELECT_TRIGGER_CLASS}>
+                  <SelectValue
+                    placeholder={t("template.listStyle", "List Style")}
+                  >
+                    {selectedBulletResource ? (
+                      <ListStyleResourcePreview
+                        resource={selectedBulletResource}
+                        locale={locale}
+                      />
+                    ) : (
+                      selectedStandardListStyle?.label ?? listStyleSelectValue
+                    )}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent className={STYLE_SELECT_CONTENT_CLASS}>
+                  {STANDARD_LIST_STYLE_OPTIONS.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                  {bulletResources.length > 0 && (
+                    <SelectGroup>
+                      <SelectLabel>
+                        {t(
+                          "template.customListBullets",
+                          "Custom bullets (Resource Configuration)",
+                        )}
+                      </SelectLabel>
+                      {bulletResources.map((resource) => (
+                        <SelectItem
+                          key={resource.id}
+                          value={toResourceListStyleValue(resource.id)}
+                        >
+                          <ListStyleResourcePreview
+                            resource={resource}
+                            locale={locale}
+                          />
+                        </SelectItem>
+                      ))}
+                    </SelectGroup>
+                  )}
+                </SelectContent>
+              </Select>
+            </div>
+            )}
+          </>
+        )}
+      </div>
+
+      {/* Advanced CSS Editor Toggle */}
+      <button
+        type="button"
+        onClick={() => setShowAdvanced(!showAdvanced)}
+        className="flex w-full items-center justify-between rounded-lg border border-gray-200 px-3 py-2 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700/60"
+      >
+        <span>{t("template.advancedCSS", "Advanced CSS Editor")}</span>
+        <ChevronDown
+          className={cn(
+            "h-4 w-4 transition-transform",
+            showAdvanced && "rotate-180",
+          )}
+        />
+      </button>
+
+      {showAdvanced && (
+        <div className="space-y-2 border-t border-gray-100 pt-3 dark:border-gray-700">
+          {supportsListFormatting && (
+            <ListStyleImageField
+              listStyleImage={parsedStyles["list-style-image"]}
+              listStyle={parsedStyles["list-style"]}
+              resourceId={storedResourceId}
+              bulletResources={bulletResources}
+              bulletResourcesLoading={bulletResourcesLoading}
+              locale={locale}
+              onReplace={handleReplaceListStyleImage}
+              onRemove={handleRemoveListStyleImage}
+              onRefreshResources={refetchBulletResources}
+            />
+          )}
+          <p className="text-xs font-medium text-gray-600 dark:text-gray-300">
+            {t("template.customCSS", "Custom CSS")}
+          </p>
+          <CSSBuilder
+            key={`${setting.id}-${showAdvanced ? "open" : "closed"}`}
+            style={advancedCssString}
+            onChange={handleAdvancedChange}
+            reactive
+          />
+        </div>
+      )}
+        </div>
+      )}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/UnsavedChangesModal.tsx b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/UnsavedChangesModal.tsx
new file mode 100644
index 000000000..474a927b2
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/UnsavedChangesModal.tsx
@@ -0,0 +1,60 @@
+// components/UnsavedChangesModal.tsx
+import { useTranslation } from "react-i18next";
+import { AlertTriangle, X } from "lucide-react";
+
+interface UnsavedChangesModalProps {
+  isOpen: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export const UnsavedChangesModal: React.FC<UnsavedChangesModalProps> = ({
+  isOpen,
+  onConfirm,
+  onCancel,
+}) => {
+  const { t } = useTranslation();
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm">
+      <div className="bg-white rounded-xl shadow-xl max-w-md w-full mx-4 overflow-hidden">
+        <div className="flex items-center justify-between p-4 border-b border-gray-200">
+          <div className="flex items-center gap-2 text-amber-600">
+            <AlertTriangle className="h-5 w-5" />
+            <h3 className="text-lg font-semibold">{t("common.warning", "Warning")}</h3>
+          </div>
+          <button
+            onClick={onCancel}
+            className="p-1 hover:bg-gray-100 rounded-lg transition-colors"
+          >
+            <X className="h-5 w-5 text-gray-500" />
+          </button>
+        </div>
+        <div className="p-6">
+          <p className="text-gray-700">
+            {t(
+              "template.unsavedChangesWarning",
+              "You have unsaved changes. Are you sure you want to leave?"
+            )}
+          </p>
+        </div>
+        <div className="flex justify-end gap-3 p-4 border-t border-gray-200 bg-gray-50">
+          <button
+            onClick={onCancel}
+            className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+          >
+            {t("common.cancel", "Cancel")}
+          </button>
+          <button
+            onClick={onConfirm}
+            className="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors"
+          >
+            {t("common.leave", "Leave")}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/layout-position.ts b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/layout-position.ts
new file mode 100644
index 000000000..5aec48e9e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/layout-position.ts
@@ -0,0 +1,179 @@
+import {
+	buildDefaultAbsoluteAnchors,
+	closingAssetFromCanvasTop,
+	closingAssetToCanvasTop,
+	computeLetterContentAreaPx,
+	DEFAULT_LETTER_PAGE_MARGINS_PX,
+	isClosingLayoutAnchor,
+	migrateClosingAssetTopFromPageAbsolute,
+	type LetterLanguage,
+	type LetterPageMarginsPx,
+} from "../utils/letter-page-dimensions";
+
+export type LayoutPositionValue = {
+	top?: number;
+	left?: number;
+	mode?: string;
+	offsetX?: number;
+	offsetY?: number;
+};
+
+export {
+	buildDefaultAbsoluteAnchors,
+	buildDefaultClosingAssetAnchors,
+	closingAssetFromCanvasTop,
+	closingAssetToCanvasTop,
+	computeLetterContentAreaPx,
+	DEFAULT_LETTER_PAGE_MARGINS_PX,
+	PDF_PAGE_HEIGHT_PX,
+	PDF_PAGE_WIDTH_PX,
+	type LetterLanguage,
+} from "../utils/letter-page-dimensions";
+
+export type LayoutPositionAnchor =
+	| "signatures"
+	| "seal"
+	| "stamp"
+	| "senderSignature"
+	| "senderStamp";
+
+const DEFAULT_POSITION: LayoutPositionValue = {
+	top: 0,
+	left: 0,
+};
+
+function buildDefaultAnchors(
+	margins: LetterPageMarginsPx = DEFAULT_LETTER_PAGE_MARGINS_PX,
+	language: LetterLanguage = "am",
+) {
+	return buildDefaultAbsoluteAnchors(margins, language);
+}
+
+function parseCoord(value: unknown, fallback = 0): number {
+	if (typeof value === "number" && Number.isFinite(value)) {
+		return Math.round(value);
+	}
+	if (typeof value === "string" && value.trim() !== "") {
+		const parsed = Number.parseFloat(value);
+		if (Number.isFinite(parsed)) return Math.round(parsed);
+	}
+	return fallback;
+}
+
+export function normalizeLayoutPositionValue(
+	value: unknown,
+	anchor?: LayoutPositionAnchor,
+	margins: LetterPageMarginsPx = DEFAULT_LETTER_PAGE_MARGINS_PX,
+	language: LetterLanguage = "am",
+): LayoutPositionValue {
+	const anchors = buildDefaultAnchors(margins, language);
+	const anchorPos = anchor ? anchors[anchor] : DEFAULT_POSITION;
+
+	if (value == null || typeof value !== "object" || Array.isArray(value)) {
+		return { ...anchorPos };
+	}
+
+	const record = value as Record<string, unknown>;
+	const hadAbsoluteCoords =
+		record.top != null ||
+		record.left != null ||
+		record.mode === "absolute";
+
+	let top: number;
+	let left: number;
+
+	if (hadAbsoluteCoords) {
+		top =
+			parseCoord(record.top, anchorPos.top ?? 0) +
+			parseCoord(record.offsetY, 0);
+		left =
+			parseCoord(record.left, anchorPos.left ?? 0) +
+			parseCoord(record.offsetX, 0);
+	} else {
+		top = (anchorPos.top ?? 0) + parseCoord(record.offsetY, 0);
+		left = (anchorPos.left ?? 0) + parseCoord(record.offsetX, 0);
+	}
+
+	if (anchor && isClosingLayoutAnchor(anchor)) {
+		top = migrateClosingAssetTopFromPageAbsolute(top, margins);
+	}
+
+	return { top, left };
+}
+
+export function toCanvasDisplayPosition(
+	anchor: LayoutPositionAnchor,
+	position: LayoutPositionValue,
+	margins: LetterPageMarginsPx = DEFAULT_LETTER_PAGE_MARGINS_PX,
+): LayoutPositionValue {
+	const top = position.top ?? 0;
+	const left = position.left ?? 0;
+	if (isClosingLayoutAnchor(anchor)) {
+		return {
+			...position,
+			top: closingAssetToCanvasTop(top, margins),
+			left,
+		};
+	}
+	return { ...position, top, left };
+}
+
+export function fromCanvasDisplayPosition(
+	anchor: LayoutPositionAnchor,
+	position: LayoutPositionValue,
+	margins: LetterPageMarginsPx = DEFAULT_LETTER_PAGE_MARGINS_PX,
+): LayoutPositionValue {
+	const top = position.top ?? 0;
+	const left = position.left ?? 0;
+	if (isClosingLayoutAnchor(anchor)) {
+		return {
+			...position,
+			top: closingAssetFromCanvasTop(top, margins),
+			left,
+		};
+	}
+	return { ...position, top, left };
+}
+
+export function toAbsolutePayloadPosition(
+	position: LayoutPositionValue,
+): Record<string, unknown> {
+	return {
+		mode: "absolute",
+		top: position.top ?? 0,
+		left: position.left ?? 0,
+		offsetX: 0,
+		offsetY: 0,
+	};
+}
+
+export function getLetterCanvasSize(
+	margins: LetterPageMarginsPx = DEFAULT_LETTER_PAGE_MARGINS_PX,
+) {
+	return computeLetterContentAreaPx(margins);
+}
+
+export function buildDefaultClosingLanguagePositions(
+	language: LetterLanguage,
+	margins: LetterPageMarginsPx = DEFAULT_LETTER_PAGE_MARGINS_PX,
+) {
+	return {
+		signatures: normalizeLayoutPositionValue(
+			null,
+			"signatures",
+			margins,
+			language,
+		),
+		seal: normalizeLayoutPositionValue(null, "seal", margins, language),
+		stamp: normalizeLayoutPositionValue(null, "stamp", margins, language),
+	};
+}
+
+export function buildDefaultPositionsByLanguage(
+	margins: LetterPageMarginsPx = DEFAULT_LETTER_PAGE_MARGINS_PX,
+) {
+	return {
+		am: buildDefaultClosingLanguagePositions("am", margins),
+		en: buildDefaultClosingLanguagePositions("en", margins),
+	};
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/styleSettingsUi.tsx b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/styleSettingsUi.tsx
new file mode 100644
index 000000000..f600d20fa
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/styleSettingsUi.tsx
@@ -0,0 +1,353 @@
+import React from "react";
+import type { LucideIcon } from "lucide-react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { cn } from "@/shared/lib/utils";
+
+export const STYLE_SELECT_TRIGGER_CLASS =
+  "h-10 w-full rounded-lg border border-gray-300 bg-white px-3 text-sm text-gray-900 shadow-sm transition-colors hover:bg-gray-50 focus:ring-2 focus:ring-purple-500 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 dark:hover:bg-gray-800";
+
+export const STYLE_SELECT_CONTENT_CLASS =
+  "rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900";
+
+export const STYLE_INPUT_CLASS =
+  "w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-purple-500 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100";
+
+export type StyleSelectOption = {
+  value: string;
+  label: React.ReactNode;
+  disabled?: boolean;
+};
+
+type StyleSettingToggleProps = {
+  isDefault: boolean;
+  onToggle: () => void;
+  defaultLabel?: string;
+  customLabel?: string;
+  className?: string;
+};
+
+export const StyleSettingToggle: React.FC<StyleSettingToggleProps> = ({
+  isDefault,
+  onToggle,
+  defaultLabel = "Default",
+  customLabel = "Custom",
+  className,
+}) => (
+  <button
+    type="button"
+    onClick={onToggle}
+    className={cn(
+      "relative h-6 w-11 shrink-0 rounded-full transition-colors",
+      isDefault ? "bg-gray-200 dark:bg-gray-600" : "bg-purple-600",
+      className,
+    )}
+    aria-label={isDefault ? defaultLabel : customLabel}
+    title={isDefault ? defaultLabel : customLabel}
+  >
+    <span
+      className={cn(
+        "absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform",
+        isDefault ? "left-0.5" : "left-5",
+      )}
+    />
+  </button>
+);
+
+type StyleSettingFieldLabelProps = {
+  children: React.ReactNode;
+  className?: string;
+  htmlFor?: string;
+};
+
+export const StyleSettingFieldLabel: React.FC<StyleSettingFieldLabelProps> = ({
+  children,
+  className,
+  htmlFor,
+}) => (
+  <label
+    htmlFor={htmlFor}
+    className={cn(
+      "mb-1.5 block text-xs font-medium text-gray-600 dark:text-gray-300",
+      className,
+    )}
+  >
+    {children}
+  </label>
+);
+
+type StyleSettingSelectProps = {
+  label?: React.ReactNode;
+  value: string;
+  onValueChange: (value: string) => void;
+  options: StyleSelectOption[];
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  id?: string;
+};
+
+export const StyleSettingSelect: React.FC<StyleSettingSelectProps> = ({
+  label,
+  value,
+  onValueChange,
+  options,
+  placeholder,
+  disabled,
+  className,
+  id,
+}) => (
+  <div className={className}>
+    {label ? <StyleSettingFieldLabel htmlFor={id}>{label}</StyleSettingFieldLabel> : null}
+    <Select value={value} onValueChange={onValueChange} disabled={disabled}>
+      <SelectTrigger id={id} className={STYLE_SELECT_TRIGGER_CLASS}>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent className={STYLE_SELECT_CONTENT_CLASS}>
+        {options.map((option) => (
+          <SelectItem
+            key={option.value}
+            value={option.value}
+            disabled={option.disabled}
+            className="rounded-md text-sm focus:bg-purple-50 dark:focus:bg-purple-900/30"
+          >
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  </div>
+);
+
+type StyleSettingsSidebarProps = {
+  title: string;
+  hint?: string;
+  children: React.ReactNode;
+  className?: string;
+  compact?: boolean;
+  collapsed?: boolean;
+};
+
+export const StyleSettingsSidebar: React.FC<StyleSettingsSidebarProps> = ({
+  title,
+  hint,
+  children,
+  className,
+  compact = false,
+  collapsed = false,
+}) => (
+  <aside
+    className={cn(
+      "shrink-0 overflow-y-auto border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800",
+      collapsed
+        ? "w-16 border-b md:w-16 md:border-b-0 md:border-r"
+        : compact
+          ? "w-full border-b md:w-52 md:border-b-0 md:border-r"
+          : "max-h-56 w-full border-b md:max-h-none md:w-56 md:border-b-0 md:border-r lg:w-64",
+      className,
+    )}
+  >
+    <div className={cn(collapsed ? "p-2" : compact ? "p-3" : "p-4")}>
+      {!collapsed ? (
+        <>
+          <h3 className="mb-1 text-sm font-semibold text-gray-700 dark:text-gray-300">
+            {title}
+          </h3>
+          {hint ? (
+            <p className="mb-3 text-xs text-gray-500 dark:text-gray-400">{hint}</p>
+          ) : null}
+        </>
+      ) : (
+        <p className="sr-only">{title}</p>
+      )}
+      <nav className={cn("space-y-1", collapsed && "space-y-2")}>{children}</nav>
+    </div>
+  </aside>
+);
+
+export type StyleSettingsSidebarItemProps = {
+  icon?: LucideIcon;
+  label: React.ReactNode;
+  meta?: React.ReactNode;
+  badge?: React.ReactNode;
+  isActive?: boolean;
+  disabled?: boolean;
+  onClick?: () => void;
+  compact?: boolean;
+  iconOnly?: boolean;
+};
+
+export const StyleSettingsSidebarItem: React.FC<StyleSettingsSidebarItemProps> = ({
+  icon: Icon,
+  label,
+  meta,
+  badge,
+  isActive = false,
+  disabled = false,
+  onClick,
+  compact = false,
+  iconOnly = false,
+}) => {
+  const labelText = typeof label === "string" ? label : undefined;
+
+  if (iconOnly && Icon) {
+    return (
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={onClick}
+        title={labelText}
+        aria-label={labelText}
+        className={cn(
+          "flex w-full items-center justify-center rounded-xl transition-all disabled:cursor-not-allowed disabled:opacity-50",
+          compact ? "h-9 w-9" : "h-10 w-10",
+          isActive
+            ? "bg-purple-100 text-purple-700 shadow-sm ring-1 ring-purple-200 dark:bg-purple-900/40 dark:text-purple-200 dark:ring-purple-800"
+            : "text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700/80",
+        )}
+      >
+        <Icon className={compact ? "h-3.5 w-3.5" : "h-4 w-4"} />
+      </button>
+    );
+  }
+
+  return (
+  <button
+    type="button"
+    disabled={disabled}
+    onClick={onClick}
+    className={cn(
+      "group w-full rounded-xl text-left text-sm transition-all disabled:cursor-not-allowed disabled:opacity-50",
+      compact ? "px-2.5 py-2" : "px-3 py-2.5",
+      isActive
+        ? "bg-purple-100 shadow-sm ring-1 ring-purple-200 dark:bg-purple-900/40 dark:ring-purple-800"
+        : "text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700/80",
+    )}
+  >
+    <div className="flex items-center gap-3">
+      {Icon ? (
+        <span
+          className={cn(
+            "flex shrink-0 items-center justify-center rounded-lg transition-colors",
+            compact ? "h-7 w-7" : "h-8 w-8",
+            isActive
+              ? "bg-purple-600 text-white"
+              : "bg-gray-100 text-gray-500 group-hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-400",
+          )}
+        >
+          <Icon className={compact ? "h-3.5 w-3.5" : "h-4 w-4"} />
+        </span>
+      ) : null}
+      <div className="min-w-0 flex-1">
+        <div
+          className={cn(
+            "truncate font-medium",
+            isActive
+              ? "text-purple-800 dark:text-purple-200"
+              : "text-gray-700 dark:text-gray-300",
+          )}
+        >
+          {label}
+        </div>
+        {meta || badge ? (
+          <div className="mt-0.5 flex flex-wrap items-center gap-2 text-xs text-gray-400">
+            {meta}
+            {badge}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  </button>
+  );
+};
+
+type StyleSettingCardProps = {
+  title: React.ReactNode;
+  subtitle?: React.ReactNode;
+  code?: string;
+  isDefault: boolean;
+  onToggleDefault?: () => void;
+  showCustomBadge?: boolean;
+  children: React.ReactNode;
+  className?: string;
+  headerExtra?: React.ReactNode;
+};
+
+export const StyleSettingCard: React.FC<StyleSettingCardProps> = ({
+  title,
+  subtitle,
+  code,
+  isDefault,
+  onToggleDefault,
+  showCustomBadge = true,
+  children,
+  className,
+  headerExtra,
+}) => (
+  <div
+    className={cn(
+      "mt-4 overflow-hidden rounded-xl border bg-white shadow-sm dark:bg-gray-800",
+      isDefault
+        ? "border-gray-200 dark:border-gray-700"
+        : "border-purple-200 ring-1 ring-purple-100 dark:border-purple-800 dark:ring-purple-900/40",
+      className,
+    )}
+  >
+    <div className="flex items-center justify-between gap-4 border-b border-gray-100 px-4 py-3 dark:border-gray-700">
+      <div className="min-w-0">
+        <div className="flex flex-wrap items-center gap-2">
+          <h4 className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+            {title}
+          </h4>
+          {code ? (
+            <span className="rounded-md bg-gray-100 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-gray-500 dark:bg-gray-700 dark:text-gray-400">
+              {code}
+            </span>
+          ) : null}
+          {showCustomBadge && !isDefault ? (
+            <span className="rounded-full bg-purple-100 px-2 py-0.5 text-[10px] font-semibold uppercase text-purple-700 dark:bg-purple-900/50 dark:text-purple-300">
+              Customized
+            </span>
+          ) : null}
+        </div>
+        {subtitle ? (
+          <p className="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
+            {subtitle}
+          </p>
+        ) : null}
+      </div>
+      <div className="flex items-center gap-2">
+        {headerExtra}
+        {onToggleDefault ? (
+          <StyleSettingToggle isDefault={isDefault} onToggle={onToggleDefault} />
+        ) : null}
+      </div>
+    </div>
+    <div className={cn("p-4", isDefault && "opacity-60")}>{children}</div>
+  </div>
+);
+
+export const StyleSettingPanel: React.FC<{
+  title?: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+}> = ({ title, children, className }) => (
+  <div
+    className={cn(
+      "rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800/80",
+      className,
+    )}
+  >
+    {title ? (
+      <h5 className="mb-3 text-xs font-semibold uppercase tracking-wide text-gray-600 dark:text-gray-300">
+        {title}
+      </h5>
+    ) : null}
+    {children}
+  </div>
+);
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/hooks/useListBulletResources.ts b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/hooks/useListBulletResources.ts
new file mode 100644
index 000000000..9779cd82e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/hooks/useListBulletResources.ts
@@ -0,0 +1,20 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  fetchListBulletResources,
+  LIST_BULLET_RESOURCES_QUERY_KEY,
+} from "@/user-management/services/api/listBulletResources";
+
+export { LIST_BULLET_RESOURCES_QUERY_KEY };
+
+export function useListBulletResources() {
+  const { data, isLoading, isFetching, refetch } = useQuery({
+    queryKey: LIST_BULLET_RESOURCES_QUERY_KEY,
+    queryFn: fetchListBulletResources,
+  });
+
+  return {
+    resources: data ?? [],
+    loading: isLoading || isFetching,
+    refetch,
+  };
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/hooks/useTemplateFormData.ts b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/hooks/useTemplateFormData.ts
new file mode 100644
index 000000000..9b1db7a1a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/hooks/useTemplateFormData.ts
@@ -0,0 +1,68 @@
+import { useEffect, useState } from "react";
+import useSettings from "@/record-management/components/hooks/useSettings";
+import { useAuth } from "@/shared/context/AuthContext";
+import { TemplateSampleData } from "@/user-management/services/TemplateConfiguration/types/templateTypes";
+
+export const useTemplateFormData = () => {
+  const { listAllDepartmentResponse, currentEmployeesResponse } = useSettings();
+  const { user } = useAuth();
+  const [defaultFormData, setDefaultFormData] =
+    useState<TemplateSampleData | null>(null);
+
+  useEffect(() => {
+    if (user && currentEmployeesResponse && listAllDepartmentResponse) {
+      const currentEmployee = currentEmployeesResponse?.items?.find(
+        (emp: any) => emp.user?.id === user.id,
+      );
+
+      const userPosition = currentEmployee?.employeePositions?.[0];
+      const userUnit = listAllDepartmentResponse?.find(
+        (dept: any) => dept.id === userPosition?.position?.id || dept.unitId === userPosition?.id,
+      );
+
+      const formData: TemplateSampleData = {
+        collaborators: currentEmployee
+          ? [
+              {
+                am: currentEmployee.user?.name?.am || "",
+                en: currentEmployee.user?.name?.en || "",
+              },
+            ]
+          : [{ am: "", en: "" }],
+        preferredLanguage: "am",
+        content: {
+          isWithDelegateSignature: false,
+          delegatorName: currentEmployee?.user?.name?.en || "",
+          body: "",
+          date: new Date().toISOString().split("T")[0],
+          internalCC: [],
+          externalCC: [],
+          prefixCC: "",
+          suffixCC: "",
+          from: currentEmployee
+            ? [
+                currentEmployee.user?.name?.am ||
+                  currentEmployee.user?.name?.en ||
+                  "",
+              ]
+            : [],
+          subject: "",
+          sincerelyText: "Sincerely",
+          to: [],
+          prefix: "",
+          suffix: "",
+        },
+        recordType: "external",
+        unitId: userUnit?.id || userUnit?.unitId || "",
+      };
+
+      setDefaultFormData(formData);
+    }
+  }, [user, currentEmployeesResponse, listAllDepartmentResponse]);
+
+  return {
+    defaultFormData,
+    departments: listAllDepartmentResponse || [],
+    employees: currentEmployeesResponse?.items || [],
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/hooks/useTemplateSettings.ts b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/hooks/useTemplateSettings.ts
new file mode 100644
index 000000000..c1f7398b3
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/hooks/useTemplateSettings.ts
@@ -0,0 +1,75 @@
+import { useEffect, useState } from "react";
+import { TemplateService } from "@/user-management/services/api/templateService";
+import { TemplateSampleSetting, TemplateResource } from "@/user-management/services/TemplateConfiguration/types/templateTypes";
+
+export const useTemplateSettings = (templateId: string, unitId?: string) => {
+  const [settings, setSettings] = useState<TemplateSampleSetting[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!templateId) return;
+
+    const fetchSettings = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        // First, get all templates to find the one with matching ID
+        const allTemplatesResponse = await TemplateService.getAllTemplates();
+        const template = allTemplatesResponse.items?.find(
+          (t: TemplateResource) => t.id === templateId,
+        );
+
+        if (!template) {
+          throw new Error("Template not found");
+        }
+
+        // Then fetch settings using the template ID
+        const fetchedSettings = await TemplateService.getTemplateSettingsByUnit(
+          template.id,
+          unitId,
+        );
+        setSettings(fetchedSettings.items && fetchedSettings.items.length > 0 ? fetchedSettings.items : getDefaultSettings());
+      } catch (err) {
+        console.error("Error loading template settings:", err);
+        setError("Failed to load template settings");
+        // Fall back to default settings
+        setSettings(getDefaultSettings());
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchSettings();
+  }, [templateId, unitId]);
+
+  return {
+    settings,
+    loading,
+    error,
+    setSettings,
+  };
+};
+
+// Default settings fallback
+export const getDefaultSettings = (): TemplateSampleSetting[] => [
+  {
+    id: "default-subject-style",
+    code: "subject-style",
+    value: {
+      "font-size": "60px",
+      "font-weight": "bold",
+      "text-decoration": "",
+    },
+  },
+  {
+    id: "default-body-style",
+    code: "body-style",
+    value: {
+      "font-size": "14px",
+      "font-weight": "normal",
+      "text-decoration": "",
+    },
+  },
+];
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/utils/cssConversion.ts b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/utils/cssConversion.ts
new file mode 100644
index 000000000..60a2bfdfc
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/utils/cssConversion.ts
@@ -0,0 +1,153 @@
+/**
+ * CSS Conversion Utilities
+ *
+ * Provides functions for converting between CSS string and object formats,
+ * with special handling for data URIs containing colons and semicolons, and SVG
+ * generation for disclosure triangle list styles.
+ */
+
+import { isCustomListStyleImage } from "./templateResourceConstants";
+
+/**
+ * Generates a base64-encoded SVG data URI for a right-pointing disclosure triangle.
+ */
+export const generateDisclosureTriangleSVG = (): string => {
+  // Right-pointing triangle SVG (16x16px)
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <polygon points="6,4 12,8 6,12" fill="currentColor"/>
+</svg>`;
+
+  const base64 = btoa(svg);
+  return `url('data:image/svg+xml;base64,${base64}')`;
+};
+
+/**
+ * Parses CSS declarations from a CSS string, correctly handling data URIs
+ * with colons and semicolons inside url() values.
+ */
+export const parseCSSDeclarations = (
+  cssString: string,
+): Array<[string, string]> => {
+  const results: Array<[string, string]> = [];
+  let depth = 0;
+  let current = "";
+
+  for (let i = 0; i < cssString.length; i++) {
+    const ch = cssString[i];
+    if (ch === '(') depth++;
+    else if (ch === ')') depth--;
+    if (ch === ';' && depth === 0) {
+      const decl = current.trim();
+      if (decl) {
+        const colonIdx = decl.indexOf(':');
+        if (colonIdx > 0) {
+          const prop = decl.slice(0, colonIdx).trim();
+          const val = decl.slice(colonIdx + 1).trim();
+          if (prop && val) results.push([prop, val]);
+        }
+      }
+      current = '';
+    } else {
+      current += ch;
+    }
+  }
+  // Handle last declaration if no trailing semicolon
+  const lastDecl = current.trim();
+  if (lastDecl) {
+    const colonIdx = lastDecl.indexOf(':');
+    if (colonIdx > 0) {
+      const prop = lastDecl.slice(0, colonIdx).trim();
+      const val = lastDecl.slice(colonIdx + 1).trim();
+      if (prop && val) results.push([prop, val]);
+    }
+  }
+  return results;
+};
+
+/**
+ * Normalizes list-style properties to handle special values like disclosure-closed.
+ */
+export const normalizeListStyleProps = (
+  obj: Record<string, string>,
+): Record<string, string> => {
+  const normalized = { ...obj };
+  const specialListStyles = ["disclosure-closed", "disclosure-open", "none"];
+
+  if (normalized["list-style"]) {
+    const listStyleValue = normalized["list-style"].split(" ")[0];
+    if (specialListStyles.includes(listStyleValue)) {
+      delete normalized["list-style-type"];
+      return normalized;
+    }
+    if (!normalized["list-style-type"]) {
+      normalized["list-style-type"] = listStyleValue;
+    }
+  }
+
+  if (normalized["list-style-type"] && !normalized["list-style"]) {
+    normalized["list-style"] = normalized["list-style-type"];
+  }
+
+  return normalized;
+};
+
+/**
+ * Converts a CSS string to a CSS object, correctly parsing data URIs
+ * and adding SVG data URI for disclosure-closed.
+ */
+export const cssStringToObject = (cssString: string): Record<string, string> => {
+  const obj: Record<string, string> = {};
+  parseCSSDeclarations(cssString).forEach(([prop, val]) => {
+    obj[prop] = val;
+  });
+  const normalized = normalizeListStyleProps(obj);
+  if (normalized["list-style"] === "disclosure-closed") {
+    normalized["list-style-image"] = generateDisclosureTriangleSVG();
+  } else if (isCustomListStyleImage(normalized["list-style-image"])) {
+    normalized["list-style"] = normalized["list-style"] || "none";
+    delete normalized["list-style-type"];
+  }
+  return normalized;
+};
+
+/**
+ * Converts a CSS object to a CSS string, formatting as "key: value;" pairs.
+ */
+export const cssObjectToString = (cssObject: Record<string, string>): string => {
+  return Object.entries(cssObject)
+    .filter(([_, value]) => value !== null && value !== undefined)
+    .map(([key, value]) => `${key}: ${value};`)
+    .join(' ');
+};
+
+export function omitCssProperties(
+  cssString: string,
+  properties: string[],
+): string {
+  const omitted = new Set(properties);
+  const styles: Record<string, string> = {};
+  parseCSSDeclarations(cssString).forEach(([prop, val]) => {
+    if (!omitted.has(prop)) {
+      styles[prop] = val;
+    }
+  });
+  return cssObjectToString(styles);
+}
+
+export function mergeCssProperties(
+  cssString: string,
+  properties: Record<string, string | undefined>,
+): string {
+  const styles: Record<string, string> = {};
+  parseCSSDeclarations(cssString).forEach(([prop, val]) => {
+    styles[prop] = val;
+  });
+  Object.entries(properties).forEach(([key, value]) => {
+    if (value === undefined || value === "") {
+      delete styles[key];
+    } else {
+      styles[key] = value;
+    }
+  });
+  return cssObjectToString(styles);
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/utils/letter-page-dimensions.ts b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/utils/letter-page-dimensions.ts
new file mode 100644
index 000000000..6c495ac6b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/utils/letter-page-dimensions.ts
@@ -0,0 +1,132 @@
+/** Matches backend pdf-generator A4 dimensions at 96 CSS px. */
+export const PDF_PAGE_WIDTH_PX = 794;
+export const PDF_PAGE_HEIGHT_PX = 1123;
+
+export type LetterPageMarginsPx = {
+	top: number;
+	left: number;
+	right: number;
+	bottom: number;
+};
+
+export type LetterLanguage = "am" | "en";
+
+export const DEFAULT_LETTER_PAGE_MARGINS_PX: LetterPageMarginsPx = {
+	top: 120,
+	left: 30,
+	right: 20,
+	bottom: 120,
+};
+
+export const CLOSING_ASSET_GAP_AFTER_SINCERELY_PX = 8;
+export const ESTIMATED_SINCERELY_BLOCK_HEIGHT_PX = 28;
+
+export type ClosingLayoutAnchor = "signatures" | "seal" | "stamp";
+
+export type AbsoluteLayoutAnchor =
+	| ClosingLayoutAnchor
+	| "senderSignature"
+	| "senderStamp";
+
+export function computeLetterContentAreaPx(
+	margins: LetterPageMarginsPx = DEFAULT_LETTER_PAGE_MARGINS_PX,
+): { width: number; height: number } {
+	return {
+		width: Math.max(
+			1,
+			PDF_PAGE_WIDTH_PX - margins.left - margins.right,
+		),
+		height: Math.max(
+			1,
+			PDF_PAGE_HEIGHT_PX - margins.top - margins.bottom,
+		),
+	};
+}
+
+function ptToPx(pt: number): number {
+	return Math.round((pt * 96) / 72);
+}
+
+export function isClosingLayoutAnchor(
+	anchor: AbsoluteLayoutAnchor,
+): anchor is ClosingLayoutAnchor {
+	return anchor === "signatures" || anchor === "seal" || anchor === "stamp";
+}
+
+export function estimateClosingBlockTopPx(
+	_margins: LetterPageMarginsPx = DEFAULT_LETTER_PAGE_MARGINS_PX,
+): number {
+	return 480;
+}
+
+export function buildDefaultClosingAssetAnchors(
+	contentWidth: number,
+	language: LetterLanguage = "am",
+): Record<ClosingLayoutAnchor, { top: number; left: number }> {
+	const sigWidth = ptToPx(96);
+	const sealWidth = 140;
+	const sigHeight = 50;
+	const gap = CLOSING_ASSET_GAP_AFTER_SINCERELY_PX;
+	const baseTop = ESTIMATED_SINCERELY_BLOCK_HEIGHT_PX + gap;
+
+	if (language === "en") {
+		const columnLeft = 0;
+		const sealLeft = columnLeft + sigWidth + gap;
+		return {
+			signatures: { top: baseTop, left: columnLeft },
+			seal: { top: baseTop - 12, left: sealLeft },
+			stamp: { top: baseTop + sigHeight + gap, left: columnLeft },
+		};
+	}
+
+	const sealLeft = contentWidth - sealWidth;
+	const columnLeft = sealLeft - gap - sigWidth;
+	return {
+		signatures: { top: baseTop, left: columnLeft },
+		seal: { top: baseTop - 12, left: sealLeft },
+		stamp: { top: baseTop + sigHeight + gap, left: columnLeft },
+	};
+}
+
+export function buildDefaultAbsoluteAnchors(
+	margins: LetterPageMarginsPx = DEFAULT_LETTER_PAGE_MARGINS_PX,
+	language: LetterLanguage = "am",
+): Record<AbsoluteLayoutAnchor, { top: number; left: number }> {
+	const { width, height } = computeLetterContentAreaPx(margins);
+	const closing = buildDefaultClosingAssetAnchors(width, language);
+
+	return {
+		...closing,
+		senderSignature: {
+			top: Math.round(height * 0.12),
+			left: Math.round(width * 0.48),
+		},
+		senderStamp: {
+			top: Math.round(height * 0.12),
+			left: Math.round(width * 0.64),
+		},
+	};
+}
+
+export function migrateClosingAssetTopFromPageAbsolute(
+	top: number,
+	margins: LetterPageMarginsPx = DEFAULT_LETTER_PAGE_MARGINS_PX,
+): number {
+	const { height } = computeLetterContentAreaPx(margins);
+	if (top <= height * 0.45) return top;
+	return top - estimateClosingBlockTopPx(margins);
+}
+
+export function closingAssetToCanvasTop(
+	top: number,
+	margins: LetterPageMarginsPx = DEFAULT_LETTER_PAGE_MARGINS_PX,
+): number {
+	return top + estimateClosingBlockTopPx(margins);
+}
+
+export function closingAssetFromCanvasTop(
+	top: number,
+	margins: LetterPageMarginsPx = DEFAULT_LETTER_PAGE_MARGINS_PX,
+): number {
+	return top - estimateClosingBlockTopPx(margins);
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/utils/letterLabelsConstants.ts b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/utils/letterLabelsConstants.ts
new file mode 100644
index 000000000..f77b89390
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/utils/letterLabelsConstants.ts
@@ -0,0 +1,243 @@
+/**
+ * Letter Labels constants & helpers
+ *
+ * Customizable, bilingual (English / Amharic) labels used by letter templates
+ * (To, From, Subject, CC, ...). Each label may carry an optional CSS style
+ * object (e.g. underline, bold). Stored under the setting code
+ * `letter-labels-text` as a JSON object.
+ */
+
+export type LetterLabelKey =
+  | "to"
+  | "from"
+  | "subject"
+  | "urgent"
+  | "cc"
+  | "date"
+  | "record"
+  | "ref_no"
+  | "delegate"
+  | "for_your_reference";
+
+/** CSS style map for a single label (kebab-case CSS properties). */
+export type LetterLabelStyle = Record<string, string>;
+
+export interface LetterLabelEntry {
+  en: string;
+  am: string;
+  style?: LetterLabelStyle;
+}
+
+export type LetterLabelsText = Record<LetterLabelKey, LetterLabelEntry>;
+
+export const LETTER_LABELS_SETTING_CODE = "letter-labels-text";
+
+export const LETTER_LABEL_KEYS: LetterLabelKey[] = [
+  "to",
+  "from",
+  "subject",
+  "urgent",
+  "cc",
+  "date",
+  "record",
+  "ref_no",
+  "delegate",
+  "for_your_reference",
+];
+
+/**
+ * Default labels for every key in English & Amharic. Some stored values include
+ * trailing punctuation (Subject:, CC:, Ref No:), others don't (To, From).
+ */
+export const DEFAULT_LETTER_LABELS: LetterLabelsText = {
+  to: { en: "To", am: "ለ" },
+  from: { en: "From", am: "ከ" },
+  subject: { en: "Subject:", am: "ጉዳዩ:" },
+  urgent: { en: "Urgent", am: "አስቸኳይ" },
+  cc: { en: "CC:", am: "ግልባጭ:", style: { "text-decoration": "underline" } },
+  date: { en: "Date", am: "ቀን" },
+  record: { en: "Record", am: "መዝገብ" },
+  ref_no: { en: "Ref No:", am: "ቁጥር:" },
+  delegate: { en: "Delegate", am: "ተወካይ" },
+  for_your_reference: { en: "For your reference", am: "ለመረጃ ያህል" },
+};
+
+/** Human-friendly field names for the editor (not the printed label text). */
+export const LETTER_LABEL_DISPLAY_NAMES: Record<
+  LetterLabelKey,
+  { en: string; am: string }
+> = {
+  to: { en: "To", am: "ለ" },
+  from: { en: "From", am: "ከ" },
+  subject: { en: "Subject label", am: "የጉዳይ መለያ" },
+  urgent: { en: "Urgent", am: "አስቸኳይ" },
+  cc: { en: "CC", am: "ግልባጭ" },
+  date: { en: "Date", am: "ቀን" },
+  record: { en: "Record title", am: "የደብዳቤ ርዕስ" },
+  ref_no: { en: "Reference number", am: "የማጣቀሻ ቁጥር" },
+  delegate: { en: "Delegate / Regarding", am: "ስለ" },
+  for_your_reference: { en: "For your reference", am: "እንዲያውቁት" },
+};
+
+export const isLetterLabelsSetting = (code: string): boolean =>
+  code === LETTER_LABELS_SETTING_CODE;
+
+/** Sidebar section code each label field belongs to. */
+export const LETTER_LABEL_CATEGORY_MAP: Record<LetterLabelKey, string> = {
+  record: "reference-number",
+  ref_no: "reference-number",
+  date: "reference-number",
+  subject: "subject",
+  urgent: "subject",
+  to: "receiver",
+  from: "receiver",
+  delegate: "body",
+  cc: "cc",
+  for_your_reference: "cc",
+};
+
+export type LetterLabelSectionCode =
+  | "reference-number"
+  | "subject"
+  | "receiver"
+  | "body"
+  | "cc";
+
+/** Normalize API / sidebar section codes to the canonical label section. */
+export function normalizeLabelSectionCode(
+  sectionCode: string,
+): LetterLabelSectionCode | null {
+  const lower = sectionCode.trim().toLowerCase();
+  if (!lower) return null;
+
+  if (
+    lower.includes("reference-number") ||
+    lower.includes("reference_number") ||
+    lower.includes("referencenumber") ||
+    lower === "reference" ||
+    (lower.includes("reference") && lower.includes("number")) ||
+    lower.includes("record-number") ||
+    lower.includes("record_number")
+  ) {
+    return "reference-number";
+  }
+  if (lower.includes("subject")) return "subject";
+  if (
+    lower.includes("receiver") ||
+    lower.includes("recipient") ||
+    lower === "receivers"
+  ) {
+    return "receiver";
+  }
+  if (lower.includes("body") || lower.includes("content")) return "body";
+  if (lower.includes("cc")) return "cc";
+
+  return null;
+}
+
+const labelMatchesSettingCode = (
+  labelKey: LetterLabelKey,
+  settingCode: string,
+): boolean => {
+  const lower = settingCode.trim().toLowerCase();
+  if (!lower) return false;
+
+  switch (labelKey) {
+    case "to":
+      return (
+        (/receiver|recipient|^letter-to\b/i.test(lower) ||
+          lower.includes("receiver-list")) &&
+        !/from|collaborator|sender|cc/i.test(lower)
+      );
+    case "from":
+      return /from|collaborator|sender/i.test(lower);
+    case "subject":
+      return /subject/i.test(lower) && !/urgent/i.test(lower);
+    case "urgent":
+      return /urgent/i.test(lower);
+    case "record":
+      return /record/i.test(lower) && !/ref/i.test(lower);
+    case "ref_no":
+      return /ref/i.test(lower) && /no|number/i.test(lower);
+    case "date":
+      return /date/i.test(lower);
+    case "delegate":
+      return /delegate|regarding/i.test(lower) || lower.includes("body");
+    case "cc":
+      return (
+        /letter-cc/i.test(lower) &&
+        !/list|prefix|suffix|receiver|for-your-reference|foryourreference/i.test(
+          lower,
+        )
+      );
+    case "for_your_reference":
+      return /for-your-reference|foryourreference/i.test(lower);
+    default:
+      return false;
+  }
+};
+
+export function getLetterLabelKeysForCategory(
+  categoryCode: string,
+  settingCodes: string[] = [],
+): LetterLabelKey[] {
+  const canonical = normalizeLabelSectionCode(categoryCode);
+  const matched = new Set<LetterLabelKey>();
+
+  if (canonical) {
+    for (const key of LETTER_LABEL_KEYS) {
+      if (LETTER_LABEL_CATEGORY_MAP[key] === canonical) {
+        matched.add(key);
+      }
+    }
+  }
+
+  for (const settingCode of settingCodes) {
+    for (const key of LETTER_LABEL_KEYS) {
+      if (labelMatchesSettingCode(key, settingCode)) {
+        matched.add(key);
+      }
+    }
+  }
+
+  return LETTER_LABEL_KEYS.filter((key) => matched.has(key));
+}
+
+const isPlainObject = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null && !Array.isArray(value);
+
+/**
+ * Validates a CSS style object, keeping only non-empty string values.
+ * Returns undefined when nothing valid remains.
+ */
+export const normalizeLabelStyle = (
+  value: unknown,
+): LetterLabelStyle | undefined => {
+  if (!isPlainObject(value)) return undefined;
+  const out: LetterLabelStyle = {};
+  for (const [key, raw] of Object.entries(value)) {
+    if (key === "font-size") continue;
+    if (typeof raw === "string" && raw.trim() !== "") out[key] = raw;
+  }
+  return Object.keys(out).length > 0 ? out : undefined;
+};
+
+/**
+ * Merges an incoming (possibly partial / invalid) value with the defaults so the
+ * result always has all keys with valid en/am strings. Preserves style objects.
+ */
+export const normalizeLetterLabelsValue = (value: unknown): LetterLabelsText => {
+  const input = isPlainObject(value) ? value : {};
+  const result = {} as LetterLabelsText;
+
+  for (const key of LETTER_LABEL_KEYS) {
+    const def = DEFAULT_LETTER_LABELS[key];
+    const raw = isPlainObject(input[key]) ? (input[key] as Record<string, unknown>) : {};
+    const en = typeof raw.en === "string" ? raw.en : def.en;
+    const am = typeof raw.am === "string" ? raw.am : def.am;
+    const style = normalizeLabelStyle(raw.style) ?? def.style;
+    result[key] = style ? { en, am, style } : { en, am };
+  }
+
+  return result;
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/utils/styleSettingsConstants.ts b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/utils/styleSettingsConstants.ts
new file mode 100644
index 000000000..e7f02369b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/utils/styleSettingsConstants.ts
@@ -0,0 +1,196 @@
+import {
+  TemplateReceiverGroup,
+  TemplateSampleData,
+} from "@/user-management/services/TemplateConfiguration/types/templateTypes";
+
+const toNonSmartReceivers = (names: string[]) =>
+  names.map((name) => ({ type: "non_smart" as const, name }));
+
+const buildReceiverGroup = (
+  prefix: string,
+  suffix: string,
+  names: string[],
+): TemplateReceiverGroup => ({
+  prefix,
+  suffix,
+  receivers: toNonSmartReceivers(names),
+});
+
+const SAMPLE_CONTENT_EN = {
+  groupedReceivers: [
+    {
+      prefix: "RE:",
+      items: ["Department Head", "Project Manager", "Team Lead"],
+      suffix: "---",
+    },
+  ],
+  receiverList: [
+    buildReceiverGroup(
+      "RE:",
+      "---",
+      ["Department Head", "Project Manager", "Team Lead"],
+    ),
+  ],
+  groupedCCReceivers: [
+    {
+      items: ["Finance Department", "HR Department"],
+      suffix: "---",
+    },
+  ],
+  groupedForYourReferenceReceivers: [
+    {
+      prefix: "For your information:",
+      items: ["Archive Office"],
+      suffix: "---",
+    },
+  ],
+  forYourReferenceList: [
+    buildReceiverGroup("For your information:", "---", ["Archive Office"]),
+  ],
+  content: {
+    isWithDelegateSignature: false,
+    delegatorName: "",
+    body: `This is a sample letter body demonstrating the template styling.
+
+The body can contain multiple paragraphs and formatting.
+
+- First bullet point item
+- Second bullet point item
+- Third bullet point item
+
+This allows you to see how list styles are applied.`,
+    date: new Date().toISOString().split("T")[0],
+    internalCC: ["Finance Department", "HR Department", "Legal Department"],
+    externalCC: ["External Partner A", "External Partner B"],
+    prefixCC: "CC:",
+    suffixCC: "---",
+    from: ["John Doe", "Mary Smith"],
+    subject: "Sample Template Subject – Style Preview",
+    sincerelyText: "Sincerely",
+    to: ["Department Head", "Project Manager", "Team Lead"],
+    prefix: "RE:",
+    suffix: "---",
+    forYourReferenceCC: ["Archive Office"],
+  },
+} as const;
+
+const RECEIVER_NAMES_AM = ["ክፍል ኃላፊ", "የፕሮጀክት ሥራ አስኪያጅ", "የቡድን መሪ"];
+const SAMPLE_SUFFIX_AM = "አዲስ አበባ";
+const SAMPLE_FYR_PREFIX_AM = "እንዲያውቁት:";
+
+const SAMPLE_CONTENT_AM = {
+  groupedReceivers: [
+    {
+      prefix: "RE:",
+      items: RECEIVER_NAMES_AM,
+      suffix: SAMPLE_SUFFIX_AM,
+    },
+  ],
+  receiverList: [
+    buildReceiverGroup(
+      "የኢትዮጵያ ፌዴራላዊ ዲሞክራሲያዊ ሪፐብሊክ",
+      SAMPLE_SUFFIX_AM,
+      RECEIVER_NAMES_AM,
+    ),
+  ],
+  groupedCCReceivers: [
+    {
+      items: ["የፋይናንስ ክፍል", "የሰው ሀብት ክፍል"],
+      suffix: SAMPLE_SUFFIX_AM,
+    },
+  ],
+  groupedForYourReferenceReceivers: [
+    {
+      prefix: SAMPLE_FYR_PREFIX_AM,
+      items: ["የመዝገብ ቤት"],
+      suffix: SAMPLE_SUFFIX_AM,
+    },
+  ],
+  forYourReferenceList: [
+    buildReceiverGroup(SAMPLE_FYR_PREFIX_AM, SAMPLE_SUFFIX_AM, ["የመዝገብ ቤት"]),
+  ],
+  content: {
+    isWithDelegateSignature: false,
+    delegatorName: "",
+    body: `ይህ የአብነት ደብዳቤ ይዘት የቅጥ ማቀናበሪያውን ለማሳየት የተዘጋጀ ነው።
+
+ይህ ደብዳቤ በብዙ አንቀጽ እና ቅርጸት ሊቀርጽ ይችላል።
+
+- የመጀመሪያው የነጥብ ዝርዝር
+- የሁለተኛው የነጥብ ዝርዝር
+- የሦስተኛው የነጥብ ዝርዝር
+
+ይህም የዝርዝር ቅጦች እንዴት እንደሚታዩ ያሳያል።`,
+    date: new Date().toISOString().split("T")[0],
+    internalCC: ["የፋይናንስ ክፍል", "የሰው ሀብት ክፍል", "የህጋዊ ጉዳዮች ክፍል"],
+    externalCC: ["የውጭ አጋር ድርጅት አ", "የውጭ አጋር ድርጅት ቢ"],
+    prefixCC: "CC:",
+    suffixCC: SAMPLE_SUFFIX_AM,
+    from: ["ዮሃንስ ዶ", "ማርያም ስሚዝ"],
+    subject: "የአብነት ደብዳቤ ጉዳይ - የቅጥ ቅድመ እይታ",
+    sincerelyText: "በአክብሮት",
+    to: RECEIVER_NAMES_AM,
+    prefix: "የኢትዮጵያ ፌዴራላዊ ዲሞክራሲያዊ ሪፐብሊክ",
+    suffix: SAMPLE_SUFFIX_AM,
+    forYourReferenceCC: ["የመዝገብ ቤት"],
+  },
+} as const;
+
+const SHARED_SAMPLE_DATA = {
+  collaborators: [
+    { am: "ዮሃንስ ዶ", en: "John Doe" },
+    { am: "ማርያም ስሚዝ", en: "Mary Smith" },
+  ],
+  referenceNumber: "REF-2026/001",
+  recordType: "external" as const,
+};
+
+const cloneGroupedItems = <T extends { items: readonly string[] }>(group: T) => ({
+  ...group,
+  items: [...group.items],
+});
+
+/**
+ * Sample payload for style-settings PDF preview, localized by preview language.
+ */
+export function getDefaultSampleData(
+  preferredLanguage: "am" | "en" = "am",
+): Omit<TemplateSampleData, "unitId"> {
+  const localized =
+    preferredLanguage === "en" ? SAMPLE_CONTENT_EN : SAMPLE_CONTENT_AM;
+
+  return {
+    ...SHARED_SAMPLE_DATA,
+    preferredLanguage,
+    ...localized,
+    content: {
+      ...localized.content,
+      internalCC: [...localized.content.internalCC],
+      externalCC: [...localized.content.externalCC],
+      from: [...localized.content.from],
+      to: [...localized.content.to],
+      forYourReferenceCC: localized.content.forYourReferenceCC
+        ? [...localized.content.forYourReferenceCC]
+        : undefined,
+    },
+    groupedReceivers: localized.groupedReceivers.map(cloneGroupedItems),
+    groupedCCReceivers: localized.groupedCCReceivers.map(cloneGroupedItems),
+    groupedForYourReferenceReceivers:
+      localized.groupedForYourReferenceReceivers.map(cloneGroupedItems),
+    receiverList: localized.receiverList.map((group) => ({
+      ...group,
+      receivers: group.receivers.map((receiver) => ({ ...receiver })),
+    })),
+    forYourReferenceList: localized.forYourReferenceList.map((group) => ({
+      ...group,
+      receivers: group.receivers.map((receiver) => ({ ...receiver })),
+    })),
+  };
+}
+
+/**
+ * Default sample data (Amharic). Prefer `getDefaultSampleData(previewLanguage)`
+ * when generating previews so English content is included.
+ */
+export const DEFAULT_SAMPLE_DATA: Omit<TemplateSampleData, "unitId"> =
+  getDefaultSampleData("am");
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/utils/templateResourceConstants.ts b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/utils/templateResourceConstants.ts
new file mode 100644
index 000000000..6d0d40dc9
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/utils/templateResourceConstants.ts
@@ -0,0 +1,88 @@
+export const FONT_RESOURCE_TYPE_ID = "019c4794-c53d-711d-8e2a-aec308a644b2";
+
+export const RESOURCE_LIST_STYLE_PREFIX = "resource:";
+
+export interface ListBulletResource {
+  id: string;
+  name: { en?: string; am?: string };
+  presigned: string;
+  resourceTypeId: string;
+  fileInfo?: {
+    bucket?: string;
+    fileName?: string;
+    contentType?: string;
+    size?: number;
+    originalname?: string;
+  };
+}
+
+const LIST_BULLET_CODE_PATTERNS = [
+  /^bullet/i,
+  /^bullets/i,
+  /^list[-_]?bullet/i,
+  /^list[-_]?style/i,
+  /^list[-_]?icon/i,
+  /^icon/i,
+  /^image/i,
+];
+
+export function isFontResourceType(type: {
+  id: string;
+  code?: string;
+}): boolean {
+  return (
+    type.id === FONT_RESOURCE_TYPE_ID || /font/i.test(type.code || "")
+  );
+}
+
+export function isListBulletResourceType(type: {
+  id: string;
+  code?: string;
+  name?: string | { en?: string; am?: string };
+}): boolean {
+  if (isFontResourceType(type)) return false;
+
+  const code = (type.code || "").toLowerCase();
+  if (LIST_BULLET_CODE_PATTERNS.some((pattern) => pattern.test(code))) {
+    return true;
+  }
+
+  const rawName = type.name;
+  const nameEn =
+    typeof rawName === "string"
+      ? rawName.toLowerCase()
+      : (rawName?.en || "").toLowerCase();
+  const nameAm =
+    typeof rawName === "string"
+      ? rawName.toLowerCase()
+      : (rawName?.am || "").toLowerCase();
+  return (
+    nameEn.includes("bullet") ||
+    nameAm.includes("bullet") ||
+    nameEn.includes("list style") ||
+    nameEn.includes("list-style")
+  );
+}
+
+export function isResourceListStyle(value: string): boolean {
+  return value.startsWith(RESOURCE_LIST_STYLE_PREFIX);
+}
+
+export function toResourceListStyleValue(resourceId: string): string {
+  return `${RESOURCE_LIST_STYLE_PREFIX}${resourceId}`;
+}
+
+export function isCustomListStyleImage(value?: string): boolean {
+  if (!value || !value.startsWith("url(")) return false;
+  return !value.includes("data:image/svg+xml");
+}
+
+export function extractUrlFromListStyleImage(value?: string): string | null {
+  if (!value?.startsWith("url(")) return null;
+  const match = value.match(/^url\(\s*['"]?([^'")]+)['"]?\s*\)$/i);
+  return match?.[1] ?? null;
+}
+
+export function isDisclosureListStyleImage(value?: string): boolean {
+  return Boolean(value?.includes("data:image/svg+xml"));
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/utils/templateSamplePayloadUtils.ts b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/utils/templateSamplePayloadUtils.ts
new file mode 100644
index 000000000..f90570871
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/utils/templateSamplePayloadUtils.ts
@@ -0,0 +1,183 @@
+import {
+  TemplateSampleFileInfo,
+  TemplateSampleRequest,
+  TemplateSampleRequestSetting,
+  TemplateSampleResource,
+  TemplateSampleSetting,
+} from "@/user-management/services/TemplateConfiguration/types/templateTypes";
+import { isFontSetting } from "../components/FontSettingsEditor";
+import {
+  isCustomListStyleImage,
+  ListBulletResource,
+} from "./templateResourceConstants";
+
+export function isListStyleSettingCode(code: string): boolean {
+  return code.trim().toLowerCase().includes("list-style");
+}
+
+export function extractListStyleResourceId(
+  value: Record<string, string>,
+  bulletResources: ListBulletResource[],
+): string | null {
+  const imageValue = value["list-style-image"];
+  if (isCustomListStyleImage(imageValue)) {
+    const match = bulletResources.find(
+      (resource) =>
+        imageValue.includes(resource.presigned) ||
+        imageValue.includes(resource.id) ||
+        Boolean(
+          resource.fileInfo?.fileName &&
+            imageValue.includes(resource.fileInfo.fileName),
+        ),
+    );
+
+    return match?.id ?? null;
+  }
+
+  if (value["list-style-type"] === "custom-image") {
+    return null;
+  }
+
+  return null;
+}
+
+export function resolveSettingResourceId(
+  setting: Pick<TemplateSampleSetting, "id" | "code">,
+  value: Record<string, unknown>,
+  resourceIds: Record<string, string | null>,
+  bulletResources: ListBulletResource[],
+): string | null {
+  if (isFontSetting(setting.code)) {
+    return resourceIds[setting.id] ?? null;
+  }
+
+  const cssValue = value as Record<string, string>;
+  if (cssValue["list-style-type"] === "custom-image") {
+    return resourceIds[setting.id] ?? null;
+  }
+
+  return (
+    resourceIds[setting.id] ??
+    extractListStyleResourceId(cssValue, bulletResources)
+  );
+}
+
+export function formatSettingValueForApi(
+  value: Record<string, unknown>,
+  resourceId: string | null,
+  settingCode: string,
+): Record<string, unknown> {
+  const formatted: Record<string, unknown> = { ...value };
+
+  if (!isListStyleSettingCode(settingCode)) {
+    return formatted;
+  }
+
+  if (resourceId) {
+    delete formatted["list-style-image"];
+    delete formatted["list-style"];
+    formatted["list-style-type"] = "custom-image";
+    return formatted;
+  }
+
+  delete formatted["list-style-image"];
+
+  const listStyle =
+    (formatted["list-style"] as string | undefined)?.split(" ")[0] ||
+    (formatted["list-style-type"] as string | undefined);
+
+  if (
+    listStyle &&
+    listStyle !== "custom-image" &&
+    listStyle !== "none"
+  ) {
+    formatted["list-style-type"] = listStyle;
+    formatted["list-style"] = listStyle;
+  }
+
+  return formatted;
+}
+
+function toSampleFileInfo(
+  fileInfo?: ListBulletResource["fileInfo"],
+): TemplateSampleFileInfo | undefined {
+  if (!fileInfo) return undefined;
+
+  return {
+    bucket: fileInfo.bucket || "",
+    originalname: fileInfo.originalname || "",
+    contentType: fileInfo.contentType || "application/octet-stream",
+    fileName: fileInfo.fileName,
+    size: fileInfo.size,
+  };
+}
+
+export function buildSampleResources(
+  resourceIds: Array<string | null | undefined>,
+  bulletResources: ListBulletResource[],
+): TemplateSampleResource[] {
+  const uniqueIds = [
+    ...new Set(resourceIds.filter((id): id is string => Boolean(id))),
+  ];
+
+  return uniqueIds.map((resourceId) => {
+    const resource = bulletResources.find((item) => item.id === resourceId);
+
+    return {
+      resourceId,
+      presigned: resource?.presigned,
+      fileInfo: toSampleFileInfo(resource?.fileInfo),
+    };
+  });
+}
+
+export function buildSampleSettingPayload(
+  setting: TemplateSampleSetting,
+  value: Record<string, unknown>,
+  resourceIds: Record<string, string | null>,
+  bulletResources: ListBulletResource[],
+): TemplateSampleRequestSetting {
+  const resourceId = resolveSettingResourceId(
+    setting,
+    value,
+    resourceIds,
+    bulletResources,
+  );
+
+  return {
+    id: setting.id,
+    code: setting.code,
+    value: formatSettingValueForApi(value, resourceId, setting.code),
+    resourceId: resourceId ?? null,
+  };
+}
+
+export function buildTemplateSamplePayload(input: {
+  data: TemplateSampleRequest["data"];
+  settings: TemplateSampleSetting[];
+  resourceIds: Record<string, string | null>;
+  bulletResources: ListBulletResource[];
+  resolveSettingValue: (
+    setting: TemplateSampleSetting,
+  ) => Record<string, unknown>;
+}): TemplateSampleRequest {
+  const settingsForAPI = input.settings.map((setting) =>
+    buildSampleSettingPayload(
+      setting,
+      input.resolveSettingValue(setting),
+      input.resourceIds,
+      input.bulletResources,
+    ),
+  );
+
+  const resources = buildSampleResources(
+    settingsForAPI.map((setting) => setting.resourceId),
+    input.bulletResources,
+  );
+
+  return {
+    data: input.data,
+    settings: settingsForAPI,
+    resources,
+  };
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/utils/templateSettingConstants.ts b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/utils/templateSettingConstants.ts
new file mode 100644
index 000000000..aa0ec26a6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/utils/templateSettingConstants.ts
@@ -0,0 +1,64 @@
+import { TemplateSampleSetting } from "@/user-management/services/TemplateConfiguration/types/templateTypes";
+import { parseCSSDeclarations } from "./cssConversion";
+
+export const DEFAULT_LETTER_FONT_FAMILY_AM =
+  "'Visual Geez Unicode', 'Visual Geez', serif";
+export const DEFAULT_LETTER_FONT_FAMILY_EN =
+  "'Times New Roman', Times, serif";
+export const DEFAULT_LETTER_FONT_SIZE = "12pt";
+
+const LIST_FORMATTING_PROPERTY_KEYS = new Set([
+  "list-style",
+  "list-style-type",
+  "list-style-image",
+  "list-style-position",
+]);
+
+export function getDefaultLetterFontFamily(language: "am" | "en"): string {
+  return language === "am"
+    ? DEFAULT_LETTER_FONT_FAMILY_AM
+    : DEFAULT_LETTER_FONT_FAMILY_EN;
+}
+
+export function getDefaultLetterFontSize(): string {
+  return DEFAULT_LETTER_FONT_SIZE;
+}
+
+function collectSettingPropertyKeys(
+  setting: Pick<TemplateSampleSetting, "value" | "templateSettingValues">,
+): Set<string> {
+  const keys = new Set<string>();
+
+  setting.templateSettingValues?.forEach((entry) => {
+    if (entry.value && typeof entry.value === "object") {
+      Object.keys(entry.value).forEach((key) => keys.add(key));
+    }
+  });
+
+  if (
+    typeof setting.value === "object" &&
+    setting.value !== null &&
+    !Array.isArray(setting.value)
+  ) {
+    Object.keys(setting.value).forEach((key) => keys.add(key));
+  } else if (typeof setting.value === "string" && setting.value.trim()) {
+    parseCSSDeclarations(setting.value).forEach(([key]) => keys.add(key));
+  }
+
+  return keys;
+}
+
+/** True when the setting schema includes list-related CSS properties. */
+export function settingSupportsListFormatting(
+  setting: Pick<TemplateSampleSetting, "value" | "templateSettingValues">,
+): boolean {
+  const keys = collectSettingPropertyKeys(setting);
+  for (const key of LIST_FORMATTING_PROPERTY_KEYS) {
+    if (keys.has(key)) return true;
+  }
+  return false;
+}
+
+export function isFontSetting(code: string): boolean {
+  return code.trim().toLowerCase() === "letter-fonts";
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/utils/templateSettingsPayload.ts b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/utils/templateSettingsPayload.ts
new file mode 100644
index 000000000..cff86f94b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/utils/templateSettingsPayload.ts
@@ -0,0 +1,214 @@
+import {
+  TemplateSampleSetting,
+  TemplateSettingValueBulkItem,
+  TemplateSettingValueScope,
+} from "@/user-management/services/TemplateConfiguration/types/templateTypes";
+import {
+  isLetterLabelsSetting,
+  normalizeLetterLabelsValue,
+} from "./letterLabelsConstants";
+import {
+  isPageMarginSetting,
+  normalizePageMarginValue,
+} from "../components/PageMarginEditor";
+import {
+  isLayoutConfigSetting,
+  normalizeLayoutConfigValue,
+} from "../components/LayoutConfigEditor";
+import { ListBulletResource } from "./templateResourceConstants";
+import {
+  formatSettingValueForApi,
+  resolveSettingResourceId,
+} from "./templateSamplePayloadUtils";
+
+export type BuiltSettingPayloadItem = {
+  id: string;
+  code: string;
+  value: Record<string, unknown>;
+  resourceId: string | null;
+};
+
+export type SettingBaseline = {
+  value: Record<string, unknown>;
+  resourceId: string | null;
+  usesGlobalDefault: boolean;
+};
+
+function stableSerialize(value: unknown): string {
+  return JSON.stringify(value ?? null);
+}
+
+export function buildSettingBaselines(
+  payloadItems: BuiltSettingPayloadItem[],
+  settings: TemplateSampleSetting[],
+): Record<string, SettingBaseline> {
+  const overrideById = new Map(settings.map((setting) => [setting.id, setting]));
+  const baselines: Record<string, SettingBaseline> = {};
+
+  for (const item of payloadItems) {
+    const setting = overrideById.get(item.id);
+    baselines[item.id] = {
+      value: item.value,
+      resourceId: item.resourceId,
+      usesGlobalDefault: !setting?.isUnitOverride,
+    };
+  }
+
+  return baselines;
+}
+
+export function buildSettingsPayloadItems(
+  settings: TemplateSampleSetting[],
+  resourceIds: Record<string, string | null>,
+  bulletResources: ListBulletResource[],
+  cssValueToPreviewObject: (cssString: string) => Record<string, string>,
+): BuiltSettingPayloadItem[] {
+  return settings.map((setting) => {
+    if (isLetterLabelsSetting(setting.code)) {
+      return {
+        id: setting.id,
+        code: setting.code,
+        value: normalizeLetterLabelsValue(setting.value),
+        resourceId: null,
+      };
+    }
+
+    if (isPageMarginSetting(setting.code)) {
+      return {
+        id: setting.id,
+        code: setting.code,
+        value: normalizePageMarginValue(setting.value) as unknown as Record<
+          string,
+          unknown
+        >,
+        resourceId: null,
+      };
+    }
+
+    if (isLayoutConfigSetting(setting.code)) {
+      return {
+        id: setting.id,
+        code: setting.code,
+        value: normalizeLayoutConfigValue(setting.value) as unknown as Record<
+          string,
+          unknown
+        >,
+        resourceId: null,
+      };
+    }
+
+    const cssString = typeof setting.value === "string" ? setting.value : "";
+    const valueObj = cssValueToPreviewObject(cssString);
+    const resourceId = resolveSettingResourceId(
+      setting,
+      valueObj,
+      resourceIds,
+      bulletResources,
+    );
+    const formattedValue = formatSettingValueForApi(
+      valueObj,
+      resourceId,
+      setting.code,
+    );
+
+    return {
+      id: setting.id,
+      code: setting.code,
+      value: formattedValue,
+      resourceId,
+    };
+  });
+}
+
+export function filterChangedSettingOverrides(
+  items: BuiltSettingPayloadItem[],
+  baselines: Record<string, SettingBaseline>,
+  useDefaultSettings: Record<string, boolean>,
+): BuiltSettingPayloadItem[] {
+  return items.filter((item) => {
+    const baseline = baselines[item.id];
+    if (!baseline) return true;
+
+    const usesGlobalDefault = useDefaultSettings[item.id] ?? true;
+    const valueChanged =
+      stableSerialize(item.value) !== stableSerialize(baseline.value);
+    const resourceChanged = (item.resourceId ?? null) !== baseline.resourceId;
+    const defaultStateChanged = usesGlobalDefault !== baseline.usesGlobalDefault;
+
+    return valueChanged || resourceChanged || defaultStateChanged;
+  });
+}
+
+/** Preview overrides must not carry unit resource ids when reverting to template default. */
+export function finalizePreviewOverrides(
+  items: BuiltSettingPayloadItem[],
+  useDefaultSettings: Record<string, boolean>,
+  baselines: Record<string, SettingBaseline>,
+): BuiltSettingPayloadItem[] {
+  return items.map((item) => {
+    const usesGlobalDefault = useDefaultSettings[item.id] ?? true;
+    const baseline = baselines[item.id];
+    const revertedToDefault =
+      usesGlobalDefault && baseline && !baseline.usesGlobalDefault;
+
+    if (!revertedToDefault) {
+      return item;
+    }
+
+    return {
+      ...item,
+      resourceId: null,
+    };
+  });
+}
+
+export function buildBulkSavePayload(options: {
+  settings: TemplateSampleSetting[];
+  payloadItems: BuiltSettingPayloadItem[];
+  useDefaultSettings: Record<string, boolean>;
+  scope: TemplateSettingValueScope;
+  baselines?: Record<string, SettingBaseline>;
+}): TemplateSettingValueBulkItem[] {
+  const { settings, payloadItems, useDefaultSettings, scope, baselines } =
+    options;
+  const payloadById = new Map(payloadItems.map((item) => [item.id, item]));
+  const bulk: TemplateSettingValueBulkItem[] = [];
+
+  for (const setting of settings) {
+    const usesGlobalDefault = useDefaultSettings[setting.id] ?? true;
+    const baseline = baselines?.[setting.id];
+
+    if (usesGlobalDefault) {
+      if (scope === "unit" && setting.isUnitOverride) {
+        bulk.push({
+          templateSettingId: setting.id,
+          revertToDefault: true,
+        });
+      }
+      continue;
+    }
+
+    const item = payloadById.get(setting.id);
+    if (!item) continue;
+
+    if (baseline) {
+      const valueChanged =
+        stableSerialize(item.value) !== stableSerialize(baseline.value);
+      const resourceChanged = (item.resourceId ?? null) !== baseline.resourceId;
+      const defaultStateChanged =
+        usesGlobalDefault !== baseline.usesGlobalDefault;
+      if (!valueChanged && !resourceChanged && !defaultStateChanged) {
+        continue;
+      }
+    }
+
+    bulk.push({
+      templateSettingId: setting.id,
+      resourceId: item.resourceId,
+      value: item.value,
+      scope,
+    });
+  }
+
+  return bulk;
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/all-records/components/AllRecordsTable.tsx b/apps/edr-freight-web/backoffice/src/user-management/all-records/components/AllRecordsTable.tsx
new file mode 100644
index 000000000..26d4a41d7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/all-records/components/AllRecordsTable.tsx
@@ -0,0 +1,62 @@
+import { Eye } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { Button } from "@/shared/common/ui/button";
+import type { AllRecord } from "@/user-management/all-records/types";
+
+const displayValue = (value?: string | { en?: string; am?: string }) =>
+  typeof value === "string" ? value : value?.en || value?.am || "—";
+
+const AllRecordsTable = ({ records }: { records: AllRecord[] }) => {
+  const navigate = useNavigate();
+  return (
+    <div className="overflow-x-auto rounded-lg border dark:border-slate-700">
+      <table className="w-full text-left text-sm">
+        <thead className="bg-slate-50 text-xs uppercase text-slate-500 dark:bg-slate-800">
+          <tr>
+            <th className="px-5 py-3">Reference</th>
+            <th className="px-5 py-3">Subject</th>
+            <th className="px-5 py-3">Record type</th>
+            <th className="px-5 py-3">Sender</th>
+            <th className="px-5 py-3">Status</th>
+            <th className="px-5 py-3">Created</th>
+            <th className="px-5 py-3">Action</th>
+          </tr>
+        </thead>
+        <tbody className="divide-y bg-white dark:divide-slate-700 dark:bg-slate-900">
+          {records.map((record) => (
+            <tr key={record.id}>
+              <td className="px-5 py-4 font-medium">
+                {record.referenceNumber || "—"}
+              </td>
+              <td className="max-w-xs truncate px-5 py-4">
+                {displayValue(record.subject)}
+              </td>
+              <td className="px-5 py-4">{displayValue(record.recordType)}</td>
+              <td className="px-5 py-4">{displayValue(record.sender)}</td>
+              <td className="px-5 py-4 capitalize">{record.status || "—"}</td>
+              <td className="px-5 py-4">
+                {record.createdAt
+                  ? new Date(record.createdAt).toLocaleDateString()
+                  : "—"}
+              </td>
+              <td className="px-5 py-4">
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="gap-2"
+                  onClick={() =>
+                    navigate(`/user-management/all-records/${record.id}`)
+                  }
+                >
+                  <Eye className="h-4 w-4" /> View Details
+                </Button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default AllRecordsTable;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/all-records/hooks/useAllRecords.ts b/apps/edr-freight-web/backoffice/src/user-management/all-records/hooks/useAllRecords.ts
new file mode 100644
index 000000000..6900ff121
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/all-records/hooks/useAllRecords.ts
@@ -0,0 +1,19 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import {
+  fetchAllRecords,
+  fetchRecordDetails,
+} from "@/user-management/all-records/services/allRecordsService";
+import type { AllRecordsParams } from "@/user-management/all-records/types";
+
+export const useAllRecords = () =>
+  useMutation({
+    mutationKey: ["all-records"],
+    mutationFn: (params: AllRecordsParams) => fetchAllRecords(params),
+  });
+
+export const useRecordDetails = (id?: string) =>
+  useQuery({
+    queryKey: ["all-records", "details", id],
+    queryFn: () => fetchRecordDetails(id!),
+    enabled: Boolean(id),
+  });
diff --git a/apps/edr-freight-web/backoffice/src/user-management/all-records/pages/AllRecordDetailsPage.tsx b/apps/edr-freight-web/backoffice/src/user-management/all-records/pages/AllRecordDetailsPage.tsx
new file mode 100644
index 000000000..b951ca53a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/all-records/pages/AllRecordDetailsPage.tsx
@@ -0,0 +1,73 @@
+import { ArrowLeft, CalendarDays, FileText } from "lucide-react";
+import { useNavigate, useParams } from "react-router-dom";
+import { Button } from "@/shared/common/ui/button";
+import { useRecordDetails } from "@/user-management/all-records/hooks/useAllRecords";
+
+const displayValue = (value?: string | { en?: string; am?: string }) =>
+  typeof value === "string" ? value : value?.en || value?.am || "—";
+
+const AllRecordDetailsPage = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const recordQuery = useRecordDetails(id);
+
+  if (recordQuery.isLoading) {
+    return <div className="m-6 h-64 animate-pulse rounded-xl bg-slate-200 dark:bg-slate-800" />;
+  }
+  if (recordQuery.isError || !recordQuery.data) {
+    return (
+      <div className="m-6 rounded-lg border border-red-200 bg-red-50 p-8 text-center">
+        <p className="text-red-700">Unable to load this record.</p>
+        <Button variant="outline" className="mt-4" onClick={() => navigate(-1)}>
+          Go back
+        </Button>
+      </div>
+    );
+  }
+
+  const record = recordQuery.data;
+  const fields = [
+    ["Reference", record.referenceNumber || "—"],
+    ["Subject", displayValue(record.subject)],
+    ["Record type", displayValue(record.recordType)],
+    ["Sender", displayValue(record.sender)],
+    ["Status", record.status || "—"],
+    ["Description", record.description || "—"],
+  ];
+
+  return (
+    <div className="w-full space-y-6 p-4 sm:p-6">
+      <Button variant="ghost" className="gap-2" onClick={() => navigate(-1)}>
+        <ArrowLeft className="h-4 w-4" /> Back to all records
+      </Button>
+      <article className="rounded-xl border bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-900">
+        <header className="mb-6 border-b pb-5 dark:border-slate-700">
+          <h1 className="flex items-center gap-2 text-2xl font-bold">
+            <FileText className="h-6 w-6 text-primary" /> Record Details
+          </h1>
+          <p className="mt-1 text-sm text-slate-500">Record ID: {record.id}</p>
+        </header>
+        <dl className="grid gap-5 sm:grid-cols-2">
+          {fields.map(([label, value]) => (
+            <div key={label}>
+              <dt className="text-sm text-slate-500">{label}</dt>
+              <dd className="mt-1 font-medium">{value}</dd>
+            </div>
+          ))}
+          <div>
+            <dt className="flex items-center gap-1 text-sm text-slate-500">
+              <CalendarDays className="h-4 w-4" /> Created
+            </dt>
+            <dd className="mt-1 font-medium">
+              {record.createdAt
+                ? new Date(record.createdAt).toLocaleString()
+                : "—"}
+            </dd>
+          </div>
+        </dl>
+      </article>
+    </div>
+  );
+};
+
+export default AllRecordDetailsPage;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/all-records/pages/AllRecordsPage.tsx b/apps/edr-freight-web/backoffice/src/user-management/all-records/pages/AllRecordsPage.tsx
new file mode 100644
index 000000000..0514f32cf
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/all-records/pages/AllRecordsPage.tsx
@@ -0,0 +1,79 @@
+import { useEffect, useMemo, useState } from "react";
+import { Files, RefreshCw, Search } from "lucide-react";
+import { Button } from "@/shared/common/ui/button";
+import AllRecordsTable from "@/user-management/all-records/components/AllRecordsTable";
+import { useAllRecords } from "@/user-management/all-records/hooks/useAllRecords";
+
+const AllRecordsPage = () => {
+  const [search, setSearch] = useState("");
+  const allRecordsMutation = useAllRecords();
+
+  useEffect(() => {
+    allRecordsMutation.mutate({ take: 50, skip: 0 });
+  }, []);
+
+  const records = useMemo(() => {
+    const items = allRecordsMutation.data?.items ?? [];
+    const term = search.trim().toLowerCase();
+    if (!term) return items;
+    return items.filter((record) =>
+      [
+        record.referenceNumber,
+        typeof record.subject === "string"
+          ? record.subject
+          : record.subject?.en || record.subject?.am,
+        record.status,
+      ].some((value) => value?.toLowerCase().includes(term)),
+    );
+  }, [allRecordsMutation.data?.items, search]);
+
+  return (
+    <div className="w-full space-y-6 p-4 sm:p-6">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="flex items-center gap-2 text-2xl font-bold">
+            <Files className="h-6 w-6 text-primary" /> All Records
+          </h1>
+          <p className="mt-1 text-sm text-slate-500">
+            Browse and inspect all records.
+          </p>
+        </div>
+        <span className="w-fit rounded-full bg-slate-100 px-3 py-1 text-sm font-medium dark:bg-slate-800">
+          {allRecordsMutation.data?.count ?? 0} records
+        </span>
+      </div>
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
+        <input
+          value={search}
+          onChange={(event) => setSearch(event.target.value)}
+          placeholder="Search by reference, subject, or status"
+          className="h-10 w-full rounded-md border bg-white pl-9 pr-3 text-sm outline-none focus:ring-2 focus:ring-primary/30 dark:border-slate-700 dark:bg-slate-900"
+        />
+      </div>
+      {allRecordsMutation.isPending ? (
+        <div className="h-64 animate-pulse rounded-lg bg-slate-200 dark:bg-slate-800" />
+      ) : allRecordsMutation.isError ? (
+        <div className="rounded-lg border border-red-200 bg-red-50 p-8 text-center">
+          <p className="text-sm text-red-700">The all-records API is not available yet.</p>
+          <Button
+            variant="outline"
+            className="mt-4 gap-2"
+            onClick={() => allRecordsMutation.mutate({ take: 50, skip: 0 })}
+          >
+            <RefreshCw className="h-4 w-4" /> Retry
+          </Button>
+        </div>
+      ) : records.length === 0 ? (
+        <div className="rounded-lg border border-dashed p-12 text-center text-slate-500">
+          <Files className="mx-auto mb-3 h-9 w-9" />
+          <p className="font-medium">No records found</p>
+        </div>
+      ) : (
+        <AllRecordsTable records={records} />
+      )}
+    </div>
+  );
+};
+
+export default AllRecordsPage;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/all-records/services/allRecordsService.ts b/apps/edr-freight-web/backoffice/src/user-management/all-records/services/allRecordsService.ts
new file mode 100644
index 000000000..fcc3814b9
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/all-records/services/allRecordsService.ts
@@ -0,0 +1,27 @@
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import type {
+  AllRecord,
+  AllRecordsParams,
+  AllRecordsResponse,
+} from "@/user-management/all-records/types";
+
+// Provisional paths: update here when the backend contract is finalized.
+const ALL_RECORDS_PATH = "/records/all";
+
+export const fetchAllRecords = async (
+  params: AllRecordsParams,
+): Promise<AllRecordsResponse> => {
+  const { data } = await recordAxiosInstance.get<AllRecordsResponse>(
+    ALL_RECORDS_PATH,
+    { params, headers: withHeaders() },
+  );
+  return data;
+};
+
+export const fetchRecordDetails = async (id: string): Promise<AllRecord> => {
+  const { data } = await recordAxiosInstance.get<AllRecord>(`/records/${id}`, {
+    headers: withHeaders(),
+  });
+  return data;
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/all-records/types.ts b/apps/edr-freight-web/backoffice/src/user-management/all-records/types.ts
new file mode 100644
index 000000000..cc51c5c41
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/all-records/types.ts
@@ -0,0 +1,27 @@
+export interface LocalizedValue {
+  en?: string;
+  am?: string;
+}
+
+export interface AllRecord {
+  id: string;
+  referenceNumber?: string;
+  subject?: string | LocalizedValue;
+  recordType?: string | LocalizedValue;
+  status?: string;
+  sender?: string | LocalizedValue;
+  createdAt?: string;
+  updatedAt?: string;
+  description?: string;
+}
+
+export interface AllRecordsResponse {
+  count: number;
+  items: AllRecord[];
+}
+
+export interface AllRecordsParams {
+  take?: number;
+  skip?: number;
+  search?: string;
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/bulkUpload/bulkUpload.tsx b/apps/edr-freight-web/backoffice/src/user-management/bulkUpload/bulkUpload.tsx
new file mode 100644
index 000000000..b999ec609
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/bulkUpload/bulkUpload.tsx
@@ -0,0 +1,1226 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import * as XLSX from "xlsx";
+import { useQueries } from "@tanstack/react-query";
+import { Button } from "@/shared/common/ui/button";
+import { Alert, AlertDescription, AlertTitle } from "@/shared/common/ui/alert";
+import { toast } from "sonner";
+import {
+  BulkUploadPositionDto,
+  BulkUploadUserDto,
+  uploadBulkUsers,
+  updateBulkUsers,
+  UploadUserPayload,
+  UploadUpdate,
+} from "../services/api/uploadBulkService";
+import { useUnit } from "../hooks/useUnit";
+import { useAuth } from "@/shared/context/AuthContext";
+
+import { AlertCircle, Loader2, X } from "lucide-react";
+import { UnitDto } from "../dto/unit/unitDto";
+import { t } from "i18next";
+import i18n from "@/i18n";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { getChildUnits } from "../services/api/unitService";
+import { SingleSelect } from "@/shared/common/ui/single-select";
+import {
+  logBulkUploadParseAbort,
+  logBulkUploadParseError,
+  logBulkUploadDuplicateCheck,
+  collectBulkUploadDuplicateErrors,
+  logBulkUploadParseStart,
+  logBulkUploadParseSuccess,
+  logBulkUploadSheetParse,
+  logBulkUploadValidation,
+  logBulkUploadWorkbook,
+} from "./bulkUploadParserLog";
+
+export const BulkUserUpload = () => {
+  type UploadErrorState = {
+    title: string;
+    message: string;
+    errors?: string[];
+  };
+
+  const [activeTab, setActiveTab] = useState<"new" | "update">("new");
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const updateInputRef = useRef<HTMLInputElement | null>(null);
+  const [fileName, setFileName] = useState<string | null>(null);
+  const [updateFileName, setUpdateFileName] = useState<string | null>(null);
+  const [unitId, setUnitId] = useState("");
+  const [parsedUsers, setParsedUsers] = useState<UploadUserPayload | null>(
+    null,
+  );
+  const [parsedUpdatePositions, setParsedUpdatePositions] = useState<UploadUpdate | null>(null);
+  const [isUploading, setIsUploading] = useState(false);
+  const [isUpdateUploading, setIsUpdateUploading] = useState(false);
+  const [isParsing, setIsParsing] = useState(false);
+  const [isUpdateParsing, setIsUpdateParsing] = useState(false);
+  const [showPreview, setShowPreview] = useState(false);
+  const [showUpdatePreview, setShowUpdatePreview] = useState(false);
+  const [uploadError, setUploadError] = useState<UploadErrorState | null>(null);
+  const [updateUploadError, setUpdateUploadError] = useState<UploadErrorState | null>(null);
+  const [submitError, setSubmitError] = useState<UploadErrorState | null>(null);
+  const [updateSubmitError, setUpdateSubmitError] = useState<UploadErrorState | null>(null);
+  const { user } = useAuth();
+  const lang = i18n.language;
+  const { getErrorMessage } = useErrorHandler(t);
+  const organizationId =
+    user?.employee && user.employee.length > 0
+      ? user.employee[0].organizationId
+      : undefined;
+  const { getAccessibleList } = useUnit();
+
+  const { data: unitsResponse, isLoading } = getAccessibleList(
+    organizationId ?? "",
+    { take: 3000, skip: 0 },
+  );
+
+  const topLevelUnits: UnitDto[] = unitsResponse?.data?.items ?? [];
+
+  // Fetch related children for each top-level unit so they appear in the
+  // selector and can be the import target.
+  const childQueries = useQueries({
+    queries: topLevelUnits.map((u) => ({
+      queryKey: ["unitChildren", u.id],
+      queryFn: () => getChildUnits(u.id),
+      enabled: !!u.id,
+      staleTime: 0,
+    })),
+  });
+
+  const unitOptions = useMemo(() => {
+    type Option = { id: string; name: UnitDto["name"]; depth: number };
+    const out: Option[] = [];
+    topLevelUnits.forEach((parent, idx) => {
+      out.push({ id: parent.id, name: parent.name, depth: 0 });
+      const childResp = childQueries[idx]?.data?.data;
+      const items: any[] = Array.isArray(childResp)
+        ? childResp
+        : (childResp?.items ?? []);
+      items.forEach((child: any) => {
+        if (!child?.id) return;
+        out.push({ id: child.id, name: child.name, depth: 1 });
+      });
+    });
+    const seen = new Set<string>();
+    return out.filter((o) => {
+      if (seen.has(o.id)) return false;
+      seen.add(o.id);
+      return true;
+    });
+  }, [unitsResponse, childQueries.map((q) => q.data).join("|")]);
+  console.log("Unit options for bulk upload:", unitOptions);
+  useEffect(() => {
+    if (unitOptions.length === 1) {
+      setUnitId(unitOptions[0].id);
+    }
+  }, [unitOptions]);
+
+  const clearUploadState = () => {
+    setParsedUsers(null);
+    setShowPreview(false);
+  };
+
+  const clearUpdateUploadState = () => {
+    setParsedUpdatePositions(null);
+    setShowUpdatePreview(false);
+  };
+
+  const formatDuplicateErrors = (errorsPayload: unknown): string[] => {
+    // Backend ships duplicates as an array of single-key objects:
+    //   [{ "row 2": { "username": "username_already_exists: habtamu" } }, …]
+    // Each inner field value is "<reason_key>: <conflicting_value>". Older
+    // shapes also send a flat { field: "<reason>: <value>" } — handle both.
+    const titleCase = (s: string) =>
+      s.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+    const parsePair = (raw: string): { reason: string; value: string } => {
+      const i = raw.indexOf(":");
+      return i >= 0
+        ? { reason: raw.slice(0, i).trim(), value: raw.slice(i + 1).trim() }
+        : { reason: raw.trim(), value: "" };
+    };
+    const phrase = (field: string, raw: string) => {
+      const { reason, value } = parsePair(raw);
+      const fieldLabel = titleCase(field);
+      if (reason.endsWith("_already_exists")) {
+        return value
+          ? `${fieldLabel} "${value}" already exists`
+          : `${fieldLabel} already exists`;
+      }
+      const reasonLabel = titleCase(reason);
+      return value
+        ? `${fieldLabel}: ${reasonLabel} (${value})`
+        : `${fieldLabel}: ${reasonLabel}`;
+    };
+
+    const out: { row: number; text: string }[] = [];
+    const pushRow = (rowKey: string, fields: Record<string, unknown>) => {
+      const rowMatch = /(\d+)/.exec(rowKey);
+      const rowNum = rowMatch ? Number(rowMatch[1]) : Number.MAX_SAFE_INTEGER;
+      const rowLabel = rowMatch ? `Row ${rowMatch[1]}` : rowKey;
+      for (const [field, raw] of Object.entries(fields)) {
+        if (typeof raw !== "string" || !raw.trim()) continue;
+        out.push({ row: rowNum, text: `${rowLabel} — ${phrase(field, raw)}` });
+      }
+    };
+
+    if (Array.isArray(errorsPayload)) {
+      for (const entry of errorsPayload) {
+        if (!entry || typeof entry !== "object") continue;
+        for (const [k, v] of Object.entries(entry as Record<string, unknown>)) {
+          if (v && typeof v === "object") {
+            pushRow(k, v as Record<string, unknown>);
+          }
+        }
+      }
+    } else if (errorsPayload && typeof errorsPayload === "object") {
+      // Flat object fallback: { "row 2": {...} } or { username: "msg" }
+      const obj = errorsPayload as Record<string, unknown>;
+      for (const [k, v] of Object.entries(obj)) {
+        if (v && typeof v === "object") {
+          pushRow(k, v as Record<string, unknown>);
+        } else if (typeof v === "string" && v.trim()) {
+          out.push({ row: Number.MAX_SAFE_INTEGER, text: phrase(k, v) });
+        }
+      }
+    }
+
+    return out.sort((a, b) => a.row - b.row).map((item) => item.text);
+  };
+
+  const extractSubmitErrorState = async (
+    error: unknown,
+  ): Promise<UploadErrorState> => {
+    const fallbackMessage = await getErrorMessage(error);
+    const fallbackErrors = fallbackMessage
+      .split(",")
+      .map((item) => item.trim())
+      .filter(Boolean);
+
+    if (typeof error === "object" && error !== null && "response" in error) {
+      let data: unknown = (error as any).response?.data;
+
+      if (data instanceof Blob) {
+        try {
+          data = JSON.parse(await data.text());
+        } catch {
+          data = null;
+        }
+      }
+
+      const message =
+        (data as any)?.message ?? (data as any)?.exception?.response?.message;
+      const errorsPayload =
+        (data as any)?.errors ?? (data as any)?.exception?.response?.errors;
+
+      if (
+        data &&
+        typeof data === "object" &&
+        message === "duplicate_values_found"
+      ) {
+        const duplicateErrors = formatDuplicateErrors(errorsPayload);
+        return {
+          title: "Duplicate values found",
+          message:
+            duplicateErrors.length > 0
+              ? `Found ${duplicateErrors.length} duplicate value${duplicateErrors.length > 1 ? "s" : ""}. Fix the rows below in your Excel file and try again.`
+              : "Some values already exist in the system. Review the conflicts and update the file before trying again.",
+          errors: duplicateErrors.length > 0 ? duplicateErrors : undefined,
+        };
+      }
+    }
+
+    if (fallbackErrors.length > 1) {
+      return {
+        title: "We could not submit these users",
+        message:
+          "Some records could not be submitted. Review the issues below, update the file, and try again.",
+        errors: fallbackErrors,
+      };
+    }
+
+    return {
+      title: "We could not submit these users",
+      message: fallbackMessage,
+    };
+  };
+
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    const inputElement = e.target;
+    if (!file) return;
+
+    try {
+      setIsParsing(true);
+      clearUploadState();
+      setUploadError(null);
+      setSubmitError(null);
+      setFileName(file.name);
+      logBulkUploadParseStart("new", file.name);
+      const data = await file.arrayBuffer();
+
+      const workbook = XLSX.read(data, { type: "array" });
+      logBulkUploadWorkbook("new", workbook.SheetNames);
+
+      const positionsSheet = workbook.Sheets["Positions"];
+      const orgStructureSheet = workbook.Sheets["OrgStructure"];
+
+      if (!positionsSheet && !orgStructureSheet) {
+        logBulkUploadParseAbort("new", "missing_required_sheets", {
+          expectedSheets: ["Positions", "OrgStructure"],
+          foundSheets: workbook.SheetNames,
+        });
+        toast.error(t("contentManagement.posMissing"));
+        setUploadError({
+          title: "Missing template sheets",
+          message:
+            "The file must include the 'Positions' and 'OrgStructure' sheets before it can be imported.",
+        });
+        clearUploadState();
+        return;
+      }
+
+      const getCellValue = (row: Record<string, unknown>, key: string) => {
+        if (row[key] !== undefined) return row[key];
+        const matchedKey = Object.keys(row).find(
+          (k) => k.trim().toLowerCase() === key.toLowerCase(),
+        );
+        return matchedKey ? row[matchedKey] : "";
+      };
+
+      const safeTrim = (value: unknown) => String(value ?? "").trim();
+      const getExcelRowNumber = (
+        row: Record<string, unknown>,
+        fallbackIndex: number,
+      ) => {
+        const rawRowNum = row.__rowNum__;
+        return typeof rawRowNum === "number"
+          ? rawRowNum + 1
+          : fallbackIndex + 2;
+      };
+      const hasAnyMappedValue = (row: object) =>
+        Object.values(row).some((val) => safeTrim(val) !== "");
+      const hasAnyRequiredUserValue = (row: BulkUploadUserDto) =>
+        [
+          row.EnglishFirstName,
+          row.EnglishLastName,
+          row.Email,
+          row.PhoneNumber,
+          row.Username,
+          row.Position,
+        ].some((val) => safeTrim(val) !== "");
+      // Parse both sheets
+      const rawPositions = positionsSheet
+        ? XLSX.utils.sheet_to_json(positionsSheet, {
+            defval: "",
+          })
+        : [];
+      const positions = rawPositions
+        .map((i: unknown) => {
+          const rowData = i as Record<string, unknown>;
+          const row: BulkUploadPositionDto = {
+            Position: safeTrim(getCellValue(rowData, "EnglishPosition")),
+            AmharicPosition: safeTrim(
+              getCellValue(rowData, "AmharicPosition"),
+            ),
+            ReportsTo: safeTrim(getCellValue(rowData, "ReportsTo")),
+            PositionType: safeTrim(getCellValue(rowData, "PositionType")),
+          };
+          return row;
+        })
+        .filter((row) => hasAnyMappedValue(row));
+
+      logBulkUploadSheetParse("new", "Positions", {
+        rawRowCount: rawPositions.length,
+        parsedRowCount: positions.length,
+        sampleRow: positions[0] ?? null,
+      });
+
+      const rawOrgStructure = orgStructureSheet
+        ? XLSX.utils.sheet_to_json(orgStructureSheet, {
+            defval: "",
+          })
+        : [];
+      const orgStructure: Array<BulkUploadUserDto & { __rowNumber: number }> =
+        rawOrgStructure
+          .map((r: unknown, index) => {
+            const rowData = r as Record<string, unknown>;
+            const row: BulkUploadUserDto & { __rowNumber: number } = {
+              AmharicFirstName: safeTrim(
+                getCellValue(rowData, "AmharicFirstName"),
+              ),
+              AmharicLastName: safeTrim(
+                getCellValue(rowData, "AmharicLastName"),
+              ),
+              EnglishFirstName: safeTrim(
+                getCellValue(rowData, "EnglishFirstName"),
+              ),
+              EnglishLastName: safeTrim(
+                getCellValue(rowData, "EnglishLastName"),
+              ),
+              Email: safeTrim(getCellValue(rowData, "Email")),
+              PhoneNumber: safeTrim(getCellValue(rowData, "PhoneNumber")),
+              Position: safeTrim(getCellValue(rowData, "Position")),
+              Username: safeTrim(getCellValue(rowData, "Username")),
+              __rowNumber: getExcelRowNumber(rowData, index),
+            };
+            return row;
+          })
+          .filter((row) => hasAnyRequiredUserValue(row));
+
+      logBulkUploadSheetParse("new", "OrgStructure", {
+        rawRowCount: rawOrgStructure.length,
+        parsedRowCount: orgStructure.length,
+        sampleRow: orgStructure[0]
+          ? {
+              ...orgStructure[0],
+              Email: orgStructure[0].Email ? "[redacted]" : "",
+              PhoneNumber: orgStructure[0].PhoneNumber ? "[redacted]" : "",
+            }
+          : null,
+      });
+
+      // Validate presence
+      if (!positions.length && !orgStructure.length) {
+        logBulkUploadParseAbort("new", "no_importable_rows", {
+          positionsCount: positions.length,
+          usersCount: orgStructure.length,
+        });
+        toast.error(t("contentManagement.invalidFile"));
+        setUploadError({
+          title: "No importable rows found",
+          message:
+            "We could not find any valid rows in the uploaded file. Check that the template columns are filled and try again.",
+        });
+        clearUploadState();
+        return;
+      }
+
+      // Validate user data
+      const validationErrors: string[] = [];
+      orgStructure.forEach((user) => {
+        const rowNumber = user.__rowNumber;
+        if (!user.EnglishFirstName?.trim()) {
+          validationErrors.push(
+            `Row ${rowNumber}: English First Name is required`,
+          );
+        }
+        if (!user.EnglishLastName?.trim()) {
+          validationErrors.push(
+            `Row ${rowNumber}: English Last Name is required`,
+          );
+        }
+        if (!user.Email?.trim()) {
+          validationErrors.push(`Row ${rowNumber}: Email is required`);
+        }
+        if (!user.PhoneNumber?.trim()) {
+          validationErrors.push(`Row ${rowNumber}: Phone Number is required`);
+        }
+        if (!user.Username?.trim()) {
+          validationErrors.push(`Row ${rowNumber}: Username is required`);
+        }
+        if (!user.Position?.trim()) {
+          validationErrors.push(`Row ${rowNumber}: Position is required`);
+        }
+        // Additional validation for email format
+        if (
+          user.Email?.trim() &&
+          !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(user.Email.trim())
+        ) {
+          validationErrors.push(`Row ${rowNumber}: Invalid email format`);
+        }
+        // Additional validation for phone number (basic check for digits)
+        if (
+          user.PhoneNumber?.trim() &&
+          !/^\+?[\d\s\-\(\)]+$/.test(user.PhoneNumber.trim())
+        ) {
+          validationErrors.push(
+            `Row ${rowNumber}: Invalid phone number format`,
+          );
+        }
+      });
+
+      if (validationErrors.length > 0) {
+        logBulkUploadValidation("new", {
+          errorCount: validationErrors.length,
+          errors: validationErrors,
+        });
+        toast.error(`Found ${validationErrors.length} validation errors.`);
+        setUploadError({
+          title: "Please fix the highlighted rows",
+          message:
+            "Some rows are missing required values or contain invalid formats. Update the file and upload it again.",
+          errors: validationErrors,
+        });
+        clearUploadState();
+        return;
+      }
+
+      const duplicateErrors = collectBulkUploadDuplicateErrors(orgStructure);
+
+      logBulkUploadDuplicateCheck(
+        "new",
+        positions,
+        orgStructure,
+      );
+
+      if (duplicateErrors.length > 0) {
+        logBulkUploadParseAbort("new", "duplicate_values_in_file", {
+          errorCount: duplicateErrors.length,
+          errors: duplicateErrors,
+        });
+        logBulkUploadValidation("new", {
+          errorCount: duplicateErrors.length,
+          errors: duplicateErrors,
+          type: "duplicate",
+        });
+        toast.error(
+          `Found ${duplicateErrors.length} duplicate value${duplicateErrors.length > 1 ? "s" : ""} in the file.`,
+        );
+        setUploadError({
+          title: "Duplicate values found in file",
+          message:
+            "The Excel file contains duplicate usernames, emails, or phone numbers. Fix the rows below and upload again.",
+          errors: duplicateErrors,
+        });
+        clearUploadState();
+        return;
+      }
+
+      // You can pass this to backend or store in state
+      const parsedDto: UploadUserPayload = {
+        unitId: unitId,
+        positions: positions as BulkUploadPositionDto[],
+        users: orgStructure.map(({ __rowNumber, ...user }) => user),
+      };
+
+      setParsedUsers(parsedDto);
+      setUploadError(null);
+      setSubmitError(null);
+      logBulkUploadParseSuccess("new", {
+        unitId,
+        positionsCount: parsedDto.positions.length,
+        usersCount: parsedDto.users.length,
+        payload: parsedDto,
+      });
+      toast.success(t("contentManagement.parseSuccess"));
+    } catch (error) {
+      logBulkUploadParseError("new", error, { fileName: file.name });
+      toast.error(t("contentManagement.parseError"));
+      setUploadError({
+        title: "We could not read this file",
+        message:
+          error instanceof Error
+            ? error.message
+            : "The uploaded file could not be parsed. Please verify the Excel format and try again.",
+      });
+      clearUploadState();
+    } finally {
+      setIsParsing(false);
+      inputElement.value = "";
+    }
+  };
+
+  const handleSubmit = async () => {
+    if (!parsedUsers) {
+      toast.error(t("contentManagement.noData"));
+      return;
+    }
+    if (!unitId) {
+      toast.warning(t("organization.selectUnit"));
+      return;
+    }
+
+    try {
+      setIsUploading(true);
+      setSubmitError(null);
+      await uploadBulkUsers({ ...parsedUsers, unitId });
+      toast.success(t("organization.uploadSuccess"));
+      setParsedUsers(null);
+      setFileName(null);
+      setShowPreview(false);
+    } catch (error) {
+      setSubmitError(await extractSubmitErrorState(error));
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  // ── Update-existing tab: parse only the Positions sheet ──
+  const handleUpdateFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    const inputElement = e.target;
+    if (!file) return;
+
+    try {
+      setIsUpdateParsing(true);
+      clearUpdateUploadState();
+      setUpdateUploadError(null);
+      setUpdateSubmitError(null);
+      setUpdateFileName(file.name);
+      logBulkUploadParseStart("update", file.name);
+      const data = await file.arrayBuffer();
+
+      const workbook = XLSX.read(data, { type: "array" });
+      logBulkUploadWorkbook("update", workbook.SheetNames);
+      const positionsSheet = workbook.Sheets["Positions"];
+
+      if (!positionsSheet) {
+        logBulkUploadParseAbort("update", "missing_positions_sheet", {
+          expectedSheets: ["Positions"],
+          foundSheets: workbook.SheetNames,
+        });
+        toast.error(t("contentManagement.posMissing"));
+        setUpdateUploadError({
+          title: "Missing Positions sheet",
+          message:
+            "The file must include the 'Positions' sheet before it can be imported.",
+        });
+        clearUpdateUploadState();
+        return;
+      }
+
+      const getCellValue = (row: Record<string, unknown>, key: string) => {
+        if (row[key] !== undefined) return row[key];
+        const matchedKey = Object.keys(row).find(
+          (k) => k.trim().toLowerCase() === key.toLowerCase(),
+        );
+        return matchedKey ? row[matchedKey] : "";
+      };
+
+      const safeTrim = (value: unknown) => String(value ?? "").trim();
+      const hasAnyMappedValue = (row: object) =>
+        Object.values(row).some((val) => safeTrim(val) !== "");
+
+      const rawPositions = XLSX.utils.sheet_to_json(positionsSheet, {
+        defval: "",
+      });
+      const positions: BulkUploadPositionDto[] = rawPositions
+        .map((i: unknown) => {
+          const rowData = i as Record<string, unknown>;
+          const row: BulkUploadPositionDto = {
+            Position: safeTrim(getCellValue(rowData, "EnglishPosition")),
+            AmharicPosition: safeTrim(getCellValue(rowData, "AmharicPosition")),
+            ReportsTo: safeTrim(getCellValue(rowData, "ReportsTo")),
+            PositionType: safeTrim(getCellValue(rowData, "PositionType")),
+          };
+          return row;
+        })
+        .filter((row) => hasAnyMappedValue(row));
+
+      logBulkUploadSheetParse("update", "Positions", {
+        rawRowCount: rawPositions.length,
+        parsedRowCount: positions.length,
+        sampleRow: positions[0] ?? null,
+      });
+
+      if (!positions.length) {
+        logBulkUploadParseAbort("update", "no_importable_rows", {
+          positionsCount: positions.length,
+        });
+        toast.error(t("contentManagement.invalidFile"));
+        setUpdateUploadError({
+          title: "No importable rows found",
+          message:
+            "We could not find any valid rows in the Positions sheet. Check that the template columns are filled and try again.",
+        });
+        clearUpdateUploadState();
+        return;
+      }
+
+      const parsedDto: UploadUpdate = {
+        unitId: unitId,
+        positions,
+      };
+
+      setParsedUpdatePositions(parsedDto);
+      setUpdateUploadError(null);
+      setUpdateSubmitError(null);
+      logBulkUploadParseSuccess("update", {
+        unitId,
+        positionsCount: parsedDto.positions.length,
+        payload: parsedDto,
+      });
+      toast.success(t("contentManagement.parseSuccess"));
+    } catch (error) {
+      logBulkUploadParseError("update", error, { fileName: file.name });
+      toast.error(t("contentManagement.parseError"));
+      setUpdateUploadError({
+        title: "We could not read this file",
+        message:
+          error instanceof Error
+            ? error.message
+            : "The uploaded file could not be parsed. Please verify the Excel format and try again.",
+      });
+      clearUpdateUploadState();
+    } finally {
+      setIsUpdateParsing(false);
+      inputElement.value = "";
+    }
+  };
+
+  const handleUpdateSubmit = async () => {
+    if (!parsedUpdatePositions) {
+      toast.error(t("contentManagement.noData"));
+      return;
+    }
+    if (!unitId) {
+      toast.warning(t("organization.selectUnit"));
+      return;
+    }
+
+    try {
+      setIsUpdateUploading(true);
+      setUpdateSubmitError(null);
+      await updateBulkUsers({ ...parsedUpdatePositions, unitId });
+      toast.success(t("organization.uploadSuccess"));
+      setParsedUpdatePositions(null);
+      setUpdateFileName(null);
+      setShowUpdatePreview(false);
+    } catch (error) {
+      setUpdateSubmitError(await extractSubmitErrorState(error));
+    } finally {
+      setIsUpdateUploading(false);
+    }
+  };
+
+  return (
+    <div className="p-4 border rounded-xl bg-white shadow-sm dark:bg-gray-900 mt-10">
+      <div className="mb-4 flex gap-2 border-b border-gray-200 dark:border-gray-700 pb-2">
+        <button
+          className={`px-4 py-2 text-sm font-medium rounded-t transition-colors ${
+            activeTab === "new"
+              ? "bg-primary-100 text-primary-700 dark:bg-primary-900/30 dark:text-primary-300"
+              : "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+          }`}
+          onClick={() => setActiveTab("new")}
+        >
+          {t("contentManagement.uploadNew")}
+        </button>
+        <button
+          className={`px-4 py-2 text-sm font-medium rounded-t transition-colors ${
+            activeTab === "update"
+              ? "bg-primary-100 text-primary-700 dark:bg-primary-900/30 dark:text-primary-300"
+              : "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+          }`}
+          onClick={() => setActiveTab("update")}
+        >
+          {t("contentManagement.updateExisting")}
+        </button>
+      </div>
+      {activeTab === "new" && (
+        <>
+          <div>
+            {unitOptions.length > 0 && (
+              <div className="mb-4 w-1/2">
+                <label className="block text-sm font-medium text-gray-700">
+                  {t("organization.selectUnit")}
+                </label>
+                <SingleSelect
+                  value={unitId}
+                  onValueChange={(value) => setUnitId(value)}
+                  placeholder={
+                    isLoading
+                      ? t("organization.loading")
+                      : t("organization.selectUnit")
+                  }
+                  options={unitOptions.map((u) => {
+                    const prefix = u.depth > 0 ? "└─ " : "";
+                    const indent = "\u00A0".repeat(u.depth * 4);
+                    return {
+                      label: `${indent}${prefix}${lang === "en" ? u.name?.en : u.name?.am}`,
+                      value: u.id,
+                    };
+                  })}
+                  className="mt-1"
+                />
+              </div>
+            )}
+          </div>
+          <p className="text-sm mb-2 text-gray-700 dark:text-gray-300 font-medium">
+            {t("contentManagement.bulkMsg")}
+          </p>
+          <div className="flex items-center gap-3 mb-3">
+            <Button
+              variant="outline"
+              onClick={() => {
+                if (!unitId) {
+                  toast.warning(t("organization.selectUnit"));
+                  return;
+                }
+                inputRef.current?.click();
+              }}
+              disabled={isUploading || isParsing || !unitId}
+            >
+              {isParsing ? (
+                <span className="inline-flex items-center gap-2">
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                  Parsing file...
+                </span>
+              ) : isUploading ? (
+                t("userIncoming.Processing...")
+              ) : (
+                t("contentManagement.selectFile")
+              )}
+            </Button>
+            {fileName && (
+              <span className="text-sm text-gray-500 dark:text-gray-400 truncate">
+                {fileName}
+              </span>
+            )}
+          </div>
+
+          <input
+            ref={inputRef}
+            type="file"
+            accept=".xlsx, .xls"
+            onChange={handleFileChange}
+            className="hidden"
+          />
+
+          {isParsing && (
+            <div className="mb-4 flex items-center gap-3 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 shadow-sm dark:border-slate-800 dark:bg-slate-900/60 dark:text-slate-200">
+              <Loader2 className="h-4 w-4 animate-spin text-slate-600 dark:text-slate-300" />
+              <div className="min-w-0">
+                <p className="font-medium">
+                  Reading and validating your Excel file
+                </p>
+                <p className="text-xs text-slate-500 dark:text-slate-400">
+                  Please wait while we parse the sheets and check for errors.
+                </p>
+              </div>
+            </div>
+          )}
+
+          {uploadError && (
+            <Alert className="mb-4 border-red-200 bg-red-50/80 text-red-950 shadow-sm dark:border-red-900/60 dark:bg-red-950/30 dark:text-red-100">
+              <AlertCircle className="h-4 w-4" />
+              <div className="w-full space-y-3">
+                <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                  <div className="space-y-1">
+                    <AlertTitle className="text-sm font-semibold">
+                      {uploadError.title}
+                    </AlertTitle>
+                    <AlertDescription className="text-sm text-red-800 dark:text-red-200">
+                      {uploadError.message}
+                    </AlertDescription>
+                  </div>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 self-start px-2 text-red-700 hover:bg-red-100 hover:text-red-900 dark:text-red-200 dark:hover:bg-red-900/40 dark:hover:text-red-50"
+                    onClick={() => setUploadError(null)}
+                  >
+                    <X className="mr-1 h-4 w-4" />
+                    {t("common.close")}
+                  </Button>
+                </div>
+
+                {uploadError.errors?.length ? (
+                  <div className="rounded-lg border border-red-200/80 bg-white/80 p-3 dark:border-red-900/60 dark:bg-red-950/20">
+                    <div className="mb-2 flex flex-wrap items-center gap-2">
+                      <span className="text-sm font-medium text-red-900 dark:text-red-100">
+                        Validation details
+                      </span>
+                      <span className="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700 dark:bg-red-900/50 dark:text-red-100">
+                        {uploadError.errors.length} issue
+                        {uploadError.errors.length > 1 ? "s" : ""}
+                      </span>
+                    </div>
+                    <div className="max-h-56 overflow-y-auto pr-1">
+                      <ul className="grid gap-2 text-sm text-red-800 dark:text-red-200 sm:grid-cols-2">
+                        {uploadError.errors.map((errorMessage) => (
+                          <li
+                            key={errorMessage}
+                            className="rounded-md border border-red-100 bg-red-50 px-3 py-2 leading-relaxed dark:border-red-900/50 dark:bg-red-950/30"
+                          >
+                            {errorMessage}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  </div>
+                ) : null}
+              </div>
+            </Alert>
+          )}
+
+          {parsedUsers && (
+            <div className="mt-4 space-y-4">
+              <div className="flex flex-wrap gap-2">
+                <Button
+                  variant="outline"
+                  onClick={() => setShowPreview(!showPreview)}
+                  disabled={isUploading}
+                >
+                  {showPreview
+                    ? t("common.Cancel")
+                    : t("contentManagement.preview")}
+                </Button>
+                <Button
+                  onClick={handleSubmit}
+                  disabled={isUploading || isParsing}
+                >
+                  {isUploading ? (
+                    <span className="inline-flex items-center gap-2">
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                      Uploading users...
+                    </span>
+                  ) : (
+                    t("contentManagement.submitUsers")
+                  )}
+                </Button>
+              </div>
+
+              {isUploading && (
+                <div className="flex items-center gap-3 rounded-lg border border-primary-200 bg-primary-50 px-4 py-3 text-sm text-primary-900 shadow-sm dark:border-primary-900/60 dark:bg-primary-950/30 dark:text-primary-100">
+                  <Loader2 className="h-4 w-4 animate-spin text-primary-700 dark:text-primary-200" />
+                  <div className="min-w-0">
+                    <p className="font-medium">
+                      Submitting users to the server
+                    </p>
+                    <p className="text-xs text-primary-700/80 dark:text-primary-200/80">
+                      Please wait while we create the uploaded users and
+                      positions.
+                    </p>
+                  </div>
+                </div>
+              )}
+
+              {submitError && (
+                <Alert className="border-amber-200 bg-amber-50/80 text-amber-950 shadow-sm dark:border-amber-900/60 dark:bg-amber-950/30 dark:text-amber-100">
+                  <AlertCircle className="h-4 w-4" />
+                  <div className="w-full space-y-3">
+                    <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                      <div className="space-y-1">
+                        <AlertTitle className="text-sm font-semibold">
+                          {submitError.title}
+                        </AlertTitle>
+                        <AlertDescription className="text-sm text-amber-800 dark:text-amber-200">
+                          {submitError.message}
+                        </AlertDescription>
+                      </div>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-8 self-start px-2 text-amber-700 hover:bg-amber-100 hover:text-amber-900 dark:text-amber-200 dark:hover:bg-amber-900/40 dark:hover:text-amber-50"
+                        onClick={() => setSubmitError(null)}
+                      >
+                        <X className="mr-1 h-4 w-4" />
+                        {t("common.close")}
+                      </Button>
+                    </div>
+
+                    {submitError.errors?.length ? (
+                      <div className="rounded-lg border border-amber-200/80 bg-white/80 p-3 dark:border-amber-900/60 dark:bg-amber-950/20">
+                        <div className="mb-2 flex flex-wrap items-center gap-2">
+                          <span className="text-sm font-medium text-amber-900 dark:text-amber-100">
+                            Submission details
+                          </span>
+                          <span className="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-900/50 dark:text-amber-100">
+                            {submitError.errors.length} issue
+                            {submitError.errors.length > 1 ? "s" : ""}
+                          </span>
+                        </div>
+                        <div className="max-h-56 overflow-y-auto pr-1">
+                          <ul className="grid gap-2 text-sm text-amber-800 dark:text-amber-200 sm:grid-cols-2">
+                            {submitError.errors.map((errorMessage) => (
+                              <li
+                                key={errorMessage}
+                                className="rounded-md border border-amber-100 bg-amber-50 px-3 py-2 leading-relaxed dark:border-amber-900/50 dark:bg-amber-950/30"
+                              >
+                                {errorMessage}
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                      </div>
+                    ) : null}
+                  </div>
+                </Alert>
+              )}
+            </div>
+          )}
+
+          {showPreview && parsedUsers && (
+            <div className="mt-4 p-4 border rounded-lg bg-gray-50 dark:bg-gray-800 max-h-96 overflow-auto">
+              <div className="flex justify-between items-center mb-2">
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+                  {t("contentManagement.preview")}
+                </h3>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setShowPreview(false)}
+                >
+                  ✕
+                </Button>
+              </div>
+              <pre className="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap">
+                {JSON.stringify(parsedUsers, null, 2)}
+              </pre>
+            </div>
+          )}
+        </>
+      )}
+      {activeTab === "update" && (
+        <>
+          <div>
+            {unitOptions.length > 0 && (
+              <div className="mb-4 w-1/2">
+                <label className="block text-sm font-medium text-gray-700">
+                  {t("organization.selectUnit")}
+                </label>
+                <SingleSelect
+                  value={unitId}
+                  onValueChange={(value) => setUnitId(value)}
+                  placeholder={
+                    isLoading
+                      ? t("organization.loading")
+                      : t("organization.selectUnit")
+                  }
+                  options={unitOptions.map((u) => {
+                    const prefix = u.depth > 0 ? "└─ " : "";
+                    const indent = "\u00A0".repeat(u.depth * 4);
+                    return {
+                      label: `${indent}${prefix}${lang === "en" ? u.name?.en : u.name?.am}`,
+                      value: u.id,
+                    };
+                  })}
+                  className="mt-1"
+                />
+              </div>
+            )}
+          </div>
+          <p className="text-sm mb-2 text-gray-700 dark:text-gray-300 font-medium">
+            {t("contentManagement.bulkMsg2")}
+          </p>
+          <div className="flex items-center gap-3 mb-3">
+            <Button
+              variant="outline"
+              onClick={() => {
+                if (!unitId) {
+                  toast.warning(t("organization.selectUnit"));
+                  return;
+                }
+                updateInputRef.current?.click();
+              }}
+              disabled={isUpdateUploading || isUpdateParsing || !unitId}
+            >
+              {isUpdateParsing ? (
+                <span className="inline-flex items-center gap-2">
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                  Parsing file...
+                </span>
+              ) : isUpdateUploading ? (
+                t("userIncoming.Processing...")
+              ) : (
+                t("contentManagement.selectFile")
+              )}
+            </Button>
+            {updateFileName && (
+              <span className="text-sm text-gray-500 dark:text-gray-400 truncate">
+                {updateFileName}
+              </span>
+            )}
+          </div>
+
+          <input
+            ref={updateInputRef}
+            type="file"
+            accept=".xlsx, .xls"
+            onChange={handleUpdateFileChange}
+            className="hidden"
+          />
+
+          {isUpdateParsing && (
+            <div className="mb-4 flex items-center gap-3 rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 shadow-sm dark:border-slate-800 dark:bg-slate-900/60 dark:text-slate-200">
+              <Loader2 className="h-4 w-4 animate-spin text-slate-600 dark:text-slate-300" />
+              <div className="min-w-0">
+                <p className="font-medium">
+                  Reading and validating your Excel file
+                </p>
+                <p className="text-xs text-slate-500 dark:text-slate-400">
+                  Please wait while we parse the Positions sheet and check for errors.
+                </p>
+              </div>
+            </div>
+          )}
+
+          {updateUploadError && (
+            <Alert className="mb-4 border-red-200 bg-red-50/80 text-red-950 shadow-sm dark:border-red-900/60 dark:bg-red-950/30 dark:text-red-100">
+              <AlertCircle className="h-4 w-4" />
+              <div className="w-full space-y-3">
+                <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                  <div className="space-y-1">
+                    <AlertTitle className="text-sm font-semibold">
+                      {updateUploadError.title}
+                    </AlertTitle>
+                    <AlertDescription className="text-sm text-red-800 dark:text-red-200">
+                      {updateUploadError.message}
+                    </AlertDescription>
+                  </div>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 self-start px-2 text-red-700 hover:bg-red-100 hover:text-red-900 dark:text-red-200 dark:hover:bg-red-900/40 dark:hover:text-red-50"
+                    onClick={() => setUpdateUploadError(null)}
+                  >
+                    <X className="mr-1 h-4 w-4" />
+                    {t("common.close")}
+                  </Button>
+                </div>
+
+                {updateUploadError.errors?.length ? (
+                  <div className="rounded-lg border border-red-200/80 bg-white/80 p-3 dark:border-red-900/60 dark:bg-red-950/20">
+                    <div className="mb-2 flex flex-wrap items-center gap-2">
+                      <span className="text-sm font-medium text-red-900 dark:text-red-100">
+                        Validation details
+                      </span>
+                      <span className="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700 dark:bg-red-900/50 dark:text-red-100">
+                        {updateUploadError.errors.length} issue
+                        {updateUploadError.errors.length > 1 ? "s" : ""}
+                      </span>
+                    </div>
+                    <div className="max-h-56 overflow-y-auto pr-1">
+                      <ul className="grid gap-2 text-sm text-red-800 dark:text-red-200 sm:grid-cols-2">
+                        {updateUploadError.errors.map((errorMessage) => (
+                          <li
+                            key={errorMessage}
+                            className="rounded-md border border-red-100 bg-red-50 px-3 py-2 leading-relaxed dark:border-red-900/50 dark:bg-red-950/30"
+                          >
+                            {errorMessage}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  </div>
+                ) : null}
+              </div>
+            </Alert>
+          )}
+
+          {parsedUpdatePositions && (
+            <div className="mt-4 space-y-4">
+              <div className="flex flex-wrap gap-2">
+                <Button
+                  variant="outline"
+                  onClick={() => setShowUpdatePreview(!showUpdatePreview)}
+                  disabled={isUpdateUploading}
+                >
+                  {showUpdatePreview
+                    ? t("common.Cancel")
+                    : t("contentManagement.preview")}
+                </Button>
+                <Button
+                  onClick={handleUpdateSubmit}
+                  disabled={isUpdateUploading || isUpdateParsing}
+                >
+                  {isUpdateUploading ? (
+                    <span className="inline-flex items-center gap-2">
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                      Updating positions...
+                    </span>
+                  ) : (
+                    t("contentManagement.submitUsers")
+                  )}
+                </Button>
+              </div>
+
+              {isUpdateUploading && (
+                <div className="flex items-center gap-3 rounded-lg border border-primary-200 bg-primary-50 px-4 py-3 text-sm text-primary-900 shadow-sm dark:border-primary-900/60 dark:bg-primary-950/30 dark:text-primary-100">
+                  <Loader2 className="h-4 w-4 animate-spin text-primary-700 dark:text-primary-200" />
+                  <div className="min-w-0">
+                    <p className="font-medium">
+                      Submitting positions to the server
+                    </p>
+                    <p className="text-xs text-primary-700/80 dark:text-primary-200/80">
+                      Please wait while we update the positions.
+                    </p>
+                  </div>
+                </div>
+              )}
+
+              {updateSubmitError && (
+                <Alert className="border-amber-200 bg-amber-50/80 text-amber-950 shadow-sm dark:border-amber-900/60 dark:bg-amber-950/30 dark:text-amber-100">
+                  <AlertCircle className="h-4 w-4" />
+                  <div className="w-full space-y-3">
+                    <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                      <div className="space-y-1">
+                        <AlertTitle className="text-sm font-semibold">
+                          {updateSubmitError.title}
+                        </AlertTitle>
+                        <AlertDescription className="text-sm text-amber-800 dark:text-amber-200">
+                          {updateSubmitError.message}
+                        </AlertDescription>
+                      </div>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-8 self-start px-2 text-amber-700 hover:bg-amber-100 hover:text-amber-900 dark:text-amber-200 dark:hover:bg-amber-900/40 dark:hover:text-amber-50"
+                        onClick={() => setUpdateSubmitError(null)}
+                      >
+                        <X className="mr-1 h-4 w-4" />
+                        {t("common.close")}
+                      </Button>
+                    </div>
+
+                    {updateSubmitError.errors?.length ? (
+                      <div className="rounded-lg border border-amber-200/80 bg-white/80 p-3 dark:border-amber-900/60 dark:bg-amber-950/20">
+                        <div className="mb-2 flex flex-wrap items-center gap-2">
+                          <span className="text-sm font-medium text-amber-900 dark:text-amber-100">
+                            Submission details
+                          </span>
+                          <span className="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-900/50 dark:text-amber-100">
+                            {updateSubmitError.errors.length} issue
+                            {updateSubmitError.errors.length > 1 ? "s" : ""}
+                          </span>
+                        </div>
+                        <div className="max-h-56 overflow-y-auto pr-1">
+                          <ul className="grid gap-2 text-sm text-amber-800 dark:text-amber-200 sm:grid-cols-2">
+                            {updateSubmitError.errors.map((errorMessage) => (
+                              <li
+                                key={errorMessage}
+                                className="rounded-md border border-amber-100 bg-amber-50 px-3 py-2 leading-relaxed dark:border-amber-900/50 dark:bg-amber-950/30"
+                              >
+                                {errorMessage}
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                      </div>
+                    ) : null}
+                  </div>
+                </Alert>
+              )}
+            </div>
+          )}
+
+          {showUpdatePreview && parsedUpdatePositions && (
+            <div className="mt-4 p-4 border rounded-lg bg-gray-50 dark:bg-gray-800 max-h-96 overflow-auto">
+              <div className="flex justify-between items-center mb-2">
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+                  {t("contentManagement.preview")}
+                </h3>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setShowUpdatePreview(false)}
+                >
+                  ✕
+                </Button>
+              </div>
+              <pre className="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap">
+                {JSON.stringify(parsedUpdatePositions, null, 2)}
+              </pre>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/bulkUpload/bulkUploadParserLog.ts b/apps/edr-freight-web/backoffice/src/user-management/bulkUpload/bulkUploadParserLog.ts
new file mode 100644
index 000000000..ebd04e8c9
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/bulkUpload/bulkUploadParserLog.ts
@@ -0,0 +1,203 @@
+const LOG_PREFIX = "[BulkUpload:Parser]";
+
+type ParseLogPayload = Record<string, unknown>;
+
+function log(stage: string, payload?: ParseLogPayload) {
+  if (payload) {
+    console.log(LOG_PREFIX, stage, payload);
+    return;
+  }
+  console.log(LOG_PREFIX, stage);
+}
+
+export function logBulkUploadParseStart(
+  mode: "new" | "update",
+  fileName: string,
+) {
+  log("start", { mode, fileName });
+}
+
+export function logBulkUploadWorkbook(
+  mode: "new" | "update",
+  sheetNames: string[],
+) {
+  log("workbook", { mode, sheetNames, sheetCount: sheetNames.length });
+}
+
+export function logBulkUploadSheetParse(
+  mode: "new" | "update",
+  sheetName: string,
+  details: ParseLogPayload,
+) {
+  log(`sheet:${sheetName}`, { mode, ...details });
+}
+
+export function logBulkUploadValidation(
+  mode: "new" | "update",
+  details: ParseLogPayload,
+) {
+  log("validation", { mode, ...details });
+}
+
+export function logBulkUploadParseSuccess(
+  mode: "new" | "update",
+  details: ParseLogPayload,
+) {
+  log("success", { mode, ...details });
+}
+
+export function logBulkUploadParseError(
+  mode: "new" | "update",
+  error: unknown,
+  details?: ParseLogPayload,
+) {
+  log("error", {
+    mode,
+    message: error instanceof Error ? error.message : String(error),
+    ...details,
+  });
+  if (error instanceof Error && error.stack) {
+    console.error(LOG_PREFIX, "stack", error.stack);
+  }
+}
+
+export function logBulkUploadParseAbort(
+  mode: "new" | "update",
+  reason: string,
+  details?: ParseLogPayload,
+) {
+  log("abort", { mode, reason, ...details });
+}
+
+export type DuplicateRow = {
+  Username?: string;
+  Email?: string;
+  PhoneNumber?: string;
+  Position?: string;
+  ReportsTo?: string;
+  __rowNumber?: number;
+};
+
+function normalizeDuplicateKey(
+  value: string,
+  field: keyof DuplicateRow,
+): string {
+  const trimmed = value.trim();
+  if (field === "PhoneNumber") {
+    return trimmed.replace(/\D/g, "");
+  }
+  if (field === "Email" || field === "Username") {
+    return trimmed.toLowerCase();
+  }
+  return trimmed.toLowerCase();
+}
+
+function findDuplicateValues<T extends DuplicateRow>(
+  rows: T[],
+  field: keyof T,
+): Array<{ value: string; count: number; rows: T[] }> {
+  const map = new Map<string, T[]>();
+  for (const row of rows) {
+    const raw = row[field];
+    const value = typeof raw === "string" ? raw.trim() : "";
+    if (!value) continue;
+    const key = normalizeDuplicateKey(value, field as keyof DuplicateRow);
+    if (!key) continue;
+    if (!map.has(key)) map.set(key, []);
+    map.get(key)!.push(row);
+  }
+  return [...map.entries()]
+    .filter(([, matches]) => matches.length > 1)
+    .map(([, matches]) => ({
+      value: String(matches[0][field] ?? "").trim(),
+      count: matches.length,
+      rows: matches,
+    }));
+}
+
+export function collectBulkUploadDuplicateErrors(
+  users: DuplicateRow[],
+): string[] {
+  const errors: string[] = [];
+  const checks: Array<{ field: keyof DuplicateRow; label: string }> = [
+    { field: "Username", label: "Username" },
+    { field: "Email", label: "Email" },
+    { field: "PhoneNumber", label: "Phone number" },
+  ];
+
+  for (const { field, label } of checks) {
+    const duplicates = findDuplicateValues(users, field);
+    for (const duplicate of duplicates) {
+      const rows = duplicate.rows
+        .map((row) =>
+          typeof row.__rowNumber === "number"
+            ? `row ${row.__rowNumber}`
+            : String(row.Username ?? "unknown"),
+        )
+        .join(", ");
+      errors.push(
+        `Duplicate ${label} "${duplicate.value}" found in ${rows}`,
+      );
+    }
+  }
+
+  return errors;
+}
+
+export function logBulkUploadDuplicateCheck(
+  mode: "new" | "update",
+  positions: DuplicateRow[],
+  users: DuplicateRow[],
+) {
+  const positionNameDups = findDuplicateValues(positions, "Position");
+  const usernameDups = findDuplicateValues(users, "Username");
+  const emailDups = findDuplicateValues(users, "Email");
+  const phoneDups = findDuplicateValues(users, "PhoneNumber");
+  const duplicateErrors = collectBulkUploadDuplicateErrors(users);
+
+  const invalidReportsTo = positions.filter((row) => {
+    const position = String(row.Position ?? "").trim();
+    const reportsTo = String(row.ReportsTo ?? "").trim();
+    return reportsTo && reportsTo === position;
+  });
+
+  const userPositions = new Set(
+    positions
+      .map((row) => String(row.Position ?? "").trim())
+      .filter(Boolean),
+  );
+  const missingPositionRefs = users.filter(
+    (row) =>
+      row.Position &&
+      !userPositions.has(String(row.Position).trim()),
+  );
+
+  log("duplicate-check", {
+    mode,
+    duplicateErrors,
+    positionNameDuplicates: positionNameDups.map((item) => ({
+      value: item.value,
+      count: item.count,
+    })),
+    usernameDuplicates: usernameDups.map((item) => ({
+      value: item.value,
+      count: item.count,
+      usernames: item.rows.map((row) => row.Username),
+    })),
+    emailDuplicates: emailDups.map((item) => ({
+      value: item.value,
+      count: item.count,
+      usernames: item.rows.map((row) => row.Username),
+    })),
+    phoneDuplicates: phoneDups.map((item) => ({
+      value: item.value,
+      count: item.count,
+      usernames: item.rows.map((row) => row.Username),
+    })),
+    selfReferencingReportsTo: invalidReportsTo.map((row) => row.Position),
+    usersWithUnknownPosition: missingPositionRefs.map((row) => ({
+      username: row.Username,
+      position: row.Position,
+    })),
+  });
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/MigratedRecords/MigratedDataColumnDefn.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/MigratedRecords/MigratedDataColumnDefn.tsx
new file mode 100644
index 000000000..4e691e42d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/MigratedRecords/MigratedDataColumnDefn.tsx
@@ -0,0 +1,98 @@
+import { Button } from "@/shared/common/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import { MainDTO } from "@/super-admin/dto/SuperAdminDto";
+import { ColumnDef } from "@tanstack/react-table";
+import { Eye, MoreHorizontal } from "lucide-react";
+import { TFunction } from "i18next";
+import { NavigateFunction } from "react-router-dom";
+
+export const MigratedDataColumnDefn = (
+  localizedName: (name?: { am?: string; en?: string }) => string,
+  t: TFunction,
+  navigate: NavigateFunction,
+): ColumnDef<MainDTO>[] => {
+  const handleViewRecord = (recordId: string) => {
+    navigate(`/user-management/migrated-records-management/view/${recordId}`);
+  };
+
+  return [
+    {
+      id: "referenceNumber",
+      accessorKey: "record.referenceNumber",
+      header: t("migration.columns.referenceNumber"),
+      cell: ({ row }) => row.original?.record?.referenceNumber,
+    },
+    {
+      id: "letterNumber",
+      accessorKey: "record.letterNumber",
+      header: t("migration.columns.letterNumber"),
+      cell: ({ row }) => row.original?.record?.letterNumber,
+    },
+    {
+      id: "uploadedBy",
+      accessorKey: "record.metadata.uploadedBy.en",
+      header: t("migration.columns.uploadedBy"),
+      cell: ({ row }) =>
+        localizedName(
+          row.original?.record?.metadata?.uploadedBy ?? { en: "-", am: "-" },
+        ),
+    },
+    {
+      id: "organization",
+      accessorKey: "record.metadata.organizationName.en",
+      header: t("migration.columns.organization"),
+      cell: ({ row }) =>
+        localizedName(
+          row.original?.record?.metadata?.organizationName ?? {
+            en: "-",
+            am: "-",
+          },
+        ),
+    },
+    {
+      id: "dispatchedDate",
+      accessorKey: "record.dispatchedDate",
+      header: t("migration.columns.dispatchedDate"),
+      cell: ({ row }) =>
+        new Date(row.original?.record?.dispatchedDate).toLocaleString(),
+    },
+    {
+      id: "status",
+      accessorKey: "status",
+      header: t("migration.columns.status"),
+      cell: ({ row }) => row.original?.status,
+    },
+    {
+      id: "subject",
+      accessorKey: "record.content",
+      header: t("migration.columns.subject"),
+      cell: ({ row }) => row.original?.record?.content[0]?.subject || "-",
+    },
+    {
+      id: "actions",
+      cell: ({ row }) => {
+        const record = row.original.record;
+        return (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="sm">
+                <MoreHorizontal className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={() => handleViewRecord(record.id)}>
+                <Eye className="h-4 w-4 mr-2" />
+                {t("migration.viewRecord")}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        );
+      },
+    },
+  ];
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/MigratedRecords/MigratedRecordList.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/MigratedRecords/MigratedRecordList.tsx
new file mode 100644
index 000000000..8a25aa6be
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/MigratedRecords/MigratedRecordList.tsx
@@ -0,0 +1,137 @@
+import { useEffect, useMemo, useState } from "react";
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import { useMigratedData } from "@/super-admin/hooks/useMigratedData";
+import { MigratedDataColumnDefn } from "./MigratedDataColumnDefn";
+import {
+  fetchValidOrganization,
+  ValidOrganizationDto,
+} from "@/record-management/services/api/organizationService";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import {
+  SimpleTreeSelect,
+  TreeViewItemO,
+} from "@/shared/common/form/fields/FormFields";
+import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+
+export default function MigratedDataManagement() {
+  const [pageIndex, setPageIndex] = useState(0);
+  const pageSize = 10;
+  const localizedName = useLocalizedName();
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const { data: exteranlOrgsResponse, isLoading: loadingExternalOrgs } =
+    useQuery({
+      queryKey: ["organizations"],
+      queryFn: fetchValidOrganization,
+      staleTime: 5 * 60 * 1000,
+    });
+
+  const [selectedUnitId, setSelectedUnitId] = useState<string | null>(null);
+
+  const treeOrganizationsOptions: TreeViewItemO[] = useMemo(() => {
+    return (
+      exteranlOrgsResponse?.items.map((org: ValidOrganizationDto) => ({
+        id: org.id,
+        name: org.name,
+        hierarchyType: "organization",
+        value: org.units.length === 1 ? org.units[0].id : "",
+        children:
+          Array.isArray(org.units) && org.units.length > 0
+            ? org.units.map((unit) => ({
+                id: unit.id,
+                name: unit.name,
+                hierarchyType: "unit",
+                value: unit.id,
+                children: [],
+              }))
+            : [],
+      })) || []
+    );
+  }, [exteranlOrgsResponse, localizedName]);
+
+  useEffect(() => {
+    if (!selectedUnitId) {
+      const firstValidUnit = exteranlOrgsResponse?.items
+        ?.flatMap((org) => org.units)
+        .find((u) => u.id);
+
+      if (firstValidUnit) setSelectedUnitId(firstValidUnit.id);
+    }
+  }, [exteranlOrgsResponse, selectedUnitId]);
+
+  useEffect(() => {
+    if (selectedUnitId)
+      sessionStorage.setItem("selectedUnitId", selectedUnitId);
+  }, [selectedUnitId]);
+
+  useEffect(() => {
+    const saved = sessionStorage.getItem("selectedUnitId");
+    if (saved) setSelectedUnitId(saved);
+  }, []);
+
+  const { data: migratedResponse, isLoading: loadingMigratedData } =
+    useMigratedData(selectedUnitId ?? "", {
+      skip: pageIndex * pageSize,
+      take: pageSize,
+      orderBy: "migratedAt:DESC",
+    });
+
+  const handlePageChange = (newPage: number) => {
+    setPageIndex(newPage);
+  };
+
+  if (loadingExternalOrgs || loadingMigratedData) {
+    return <div>{t("common.loading")}</div>;
+  }
+
+  return (
+    <div className="p-6 space-y-6">
+      <Card className="col-span-2 shadow-none border-none bg-transparent px-0">
+        <CardHeader className="px-0">
+          <CardTitle className="text-xl font-semibold">
+            {t("migration.migratedData")}
+          </CardTitle>
+          {/* Export button hidden until export API is available
+          <Button onClick={exportMigrated}>
+            {isExporting ? t("migration.exporting") : t("migration.exportData")}
+          </Button>
+          */}
+        </CardHeader>
+
+        <div className="mb-4 max-w-lg">
+          <SimpleTreeSelect
+            label={t("migration.selectUnit")}
+            options={treeOrganizationsOptions}
+            value={selectedUnitId}
+            onChange={setSelectedUnitId}
+            collapsible
+            localizedName={localizedName}
+          />
+        </div>
+
+        <CardContent className="px-0">
+          <AdvancedTable
+            columns={MigratedDataColumnDefn(localizedName, t, navigate)}
+            data={migratedResponse?.items || []}
+            tableName={t("migration.migratedData")}
+            toolBarPosition="right"
+            itemCount={migratedResponse?.count || 0}
+            pageIndex={pageIndex}
+            onPageChange={handlePageChange}
+            nextFunction={() => handlePageChange(pageIndex + 1)}
+            prevFunction={() => handlePageChange(Math.max(pageIndex - 1, 0))}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/MigratedRecords/ViewMigratedDataPage.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/MigratedRecords/ViewMigratedDataPage.tsx
new file mode 100644
index 000000000..1bdcf174b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/MigratedRecords/ViewMigratedDataPage.tsx
@@ -0,0 +1,41 @@
+import { useNavigate, useParams } from "react-router-dom";
+import { attachmentResponse } from "@/external-portal/hooks/useCreateExternalLetterRecord";
+import ViewExternalRecord from "@/external-portal/components/ViewExternalRecord";
+import { useTranslation } from "react-i18next";
+
+const ViewMigratedDataPage: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
+  if (!id) {
+    return (
+      <div className="p-4 text-red-500">{t("migration.invalidRecordId")}</div>
+    );
+  }
+
+  const { isLoading, error } = attachmentResponse(id);
+
+  if (isLoading) {
+    return (
+      <div className="p-4 text-center">{t("migration.loadingRecord")}</div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-4 text-center text-red-500">
+        {t("migration.errorLoadingRecord", { message: error.message })}
+      </div>
+    );
+  }
+
+  return (
+    <ViewExternalRecord
+      itemId={id}
+      onBack={() => navigate("/user-management/migrated-records-management")}
+    />
+  );
+};
+
+export default ViewMigratedDataPage;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/AllPendingUsers.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/content/AllPendingUsers.tsx
new file mode 100644
index 000000000..643f2748c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/content/AllPendingUsers.tsx
@@ -0,0 +1,221 @@
+import React, { useState } from "react";
+import { usePendingUsers } from "@/user-management/userManagement/hooks/usePendingUsersHook";
+import { toast } from "sonner";
+import { Check, X, Users, Search, RefreshCw } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+const ReviewAllPendingUsers = () => {
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const { pendingUsers, loadingPendingUsers, approveMutation, rejectMutation } =
+    usePendingUsers({ take: 50, skip: 0 });
+
+  const handleApprove = (id: string) => {
+    approveMutation.mutate(id, {
+      onSuccess: () => toast.success(t("pendingUsers.employeeApprovedSuccess")),
+      onError: (error) => handleError(error),
+    });
+  };
+
+  const handleReject = (id: string) => {
+    rejectMutation.mutate(id, {
+      onSuccess: () => toast.success(t("pendingUsers.employeeRejectedSuccess")),
+      onError: (error) => handleError(error),
+    });
+  };
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Integrate search with your API if needed
+  };
+
+  // Loading skeleton (full width)
+  if (loadingPendingUsers) {
+    return (
+      <div className="p-6 w-full">
+        {/* Header skeleton */}
+        <div className="flex justify-between items-center mb-6">
+          <div className="h-8 w-48 bg-gray-200 rounded animate-pulse"></div>
+          <div className="h-6 w-24 bg-gray-200 rounded animate-pulse"></div>
+        </div>
+        {/* Search bar skeleton */}
+        <div className="flex gap-2 mb-6">
+          <div className="flex-1 h-10 bg-gray-200 rounded animate-pulse"></div>
+          <div className="w-20 h-10 bg-gray-200 rounded animate-pulse"></div>
+        </div>
+        {/* Table skeleton */}
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
+          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+            <thead className="bg-gray-50 dark:bg-gray-700">
+              <tr>
+                {[
+                  t("pendingUsers.name"),
+                  t("pendingUsers.email"),
+                  t("pendingUsers.positions"),
+                  t("pendingUsers.actions"),
+                ].map((h) => (
+                  <th
+                    key={h}
+                    className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+              {[...Array(5)].map((_, i) => (
+                <tr
+                  key={i}
+                  className="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
+                  <td className="px-6 py-4">
+                    <div className="h-4 w-32 bg-gray-200 dark:bg-gray-600 rounded"></div>
+                  </td>
+                  <td className="px-6 py-4">
+                    <div className="h-4 w-40 bg-gray-200 dark:bg-gray-600 rounded"></div>
+                  </td>
+                  <td className="px-6 py-4">
+                    <div className="h-4 w-48 bg-gray-200 dark:bg-gray-600 rounded"></div>
+                  </td>
+                  <td className="px-6 py-4">
+                    <div className="flex gap-2">
+                      <div className="h-8 w-20 bg-gray-200 dark:bg-gray-600 rounded"></div>
+                      <div className="h-8 w-20 bg-gray-200 dark:bg-gray-600 rounded"></div>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    );
+  }
+
+  // Empty state
+  if (!pendingUsers?.items?.length) {
+    return (
+      <div className="p-6 w-full">
+        <div className="flex justify-between items-center mb-6">
+          <h1 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
+            <Users className="h-6 w-6 text-blue-600" />
+            {t("pendingUsers.title")}
+          </h1>
+        </div>
+
+        <div className="bg-white rounded-lg shadow-sm border border-gray-100 p-12 text-center mt-6">
+          <div className="flex justify-center mb-4">
+            <div className="bg-primary-100 p-3 rounded-full">
+              <Users className="h-8 w-8 text-primary-600" />
+            </div>
+          </div>
+          <h3 className="text-lg font-medium text-gray-900 mb-2">
+            {t("pendingUsers.noPendingApprovals")}
+          </h3>
+          <p className="text-gray-500 mb-6">
+            {t("pendingUsers.allRequestsReviewed")}
+          </p>
+          <button
+            onClick={() => window.location.reload()}
+            className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
+            <RefreshCw className="h-4 w-4 mr-2" />
+            {t("pendingUsers.refresh")}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 w-full">
+      {/* Header with count */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
+        <h1 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
+          <Users className="h-6 w-6 text-blue-600" />
+          {t("pendingUsers.title")}
+        </h1>
+        <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
+          {pendingUsers.count} {t("pendingUsers.pending")}
+        </span>
+      </div>
+
+      {/* Table - full width */}
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden mt-6">
+        <div className="overflow-x-auto">
+          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+            <thead className="bg-gray-50 dark:bg-gray-700">
+              <tr>
+                <th
+                  scope="col"
+                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                  {t("pendingUsers.name")}
+                </th>
+                <th
+                  scope="col"
+                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                  {t("pendingUsers.email")}
+                </th>
+                <th
+                  scope="col"
+                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                  {t("pendingUsers.positions")}
+                </th>
+                <th
+                  scope="col"
+                  className="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                  {t("pendingUsers.actions")}
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+              {pendingUsers.items.map((emp: any) => (
+                <tr
+                  key={emp.id}
+                  className="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
+                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
+                    {emp.name?.en}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
+                    {emp.user?.email}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
+                    {emp.employeePositions
+                      ?.map((pos: any) => pos.position?.name?.en)
+                      .join(", ") || "—"}
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-center">
+                    <div className="flex justify-center gap-2">
+                      <button
+                        className="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                        disabled={approveMutation.isPending}
+                        onClick={() => handleApprove(emp.id)}>
+                        <Check className="h-3.5 w-3.5 mr-1" />
+                        {t("pendingUsers.approve")}
+                      </button>
+                      <button
+                        className="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                        disabled={rejectMutation.isPending}
+                        onClick={() => handleReject(emp.id)}>
+                        <X className="h-3.5 w-3.5 mr-1" />
+                        {t("pendingUsers.reject")}
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Footer note */}
+      <p className="text-xs text-gray-400 mt-4 text-center">
+        {t("pendingUsers.showingUpTo")}
+      </p>
+    </div>
+  );
+};
+
+export default ReviewAllPendingUsers;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/ArchivedUserColumnDefn.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/content/ArchivedUserColumnDefn.tsx
new file mode 100644
index 000000000..f805e0f13
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/content/ArchivedUserColumnDefn.tsx
@@ -0,0 +1,85 @@
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { ItemDTO, OrganizationUserDto, User } from "@/shared/dto/user/usersDto";
+import { ColumnDef } from "@tanstack/react-table";
+import ArchivedUserActionsCell from "./ArchivedUsers/ArchivedUserActions";
+import { format } from "date-fns/format";
+import { t } from "i18next";
+import { Badge } from "@/shared/common/ui/badge";
+
+
+export const ArchivedUserColumnDefn: ColumnDef<ItemDTO>[] = [
+  {
+    accessorKey: "name",
+    header: () => t("setting.Name"),
+    cell: ({ row }) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const localizedName = useLocalizedName();
+      const name = row.original?.name;
+      return <span>{localizedName(name)}</span>;
+    },
+  },
+  // {
+  //   accessorKey: "username",
+  //   header: "Username",
+  //   cell: ({ row }) => {
+  //     const username = row.original.username;
+  //     return <span>{username}</span>;
+  //   },
+  // },
+  // {
+  //   accessorKey: "createdAt",
+  //   header: "Created At",
+  //   cell: ({ row }) => {
+  //     const date = row.original.createdAt;
+  //     return <span>{format(new Date(date), "MMM d, yyyy HH:mm")}</span>;
+  //   },
+  // },
+  {
+    accessorKey: "status",
+    header: () => t("userRecord.Status"),
+    cell: ({ row }) => {
+      const status = row.original?.status;
+      
+      const getStatusColor = (status: string) => {
+        switch (status.toLowerCase()) {
+          case "inactive":
+            return "bg-red-100 text-red-600 hover:bg-red-100"; // red for inactive
+          case "active":
+            return "bg-primary-100 text-primary-600 hover:bg-primary-100"; // green for active
+          default:
+            return "bg-gray-100 text-gray-600 hover:bg-gray-100";
+        }
+      };
+
+
+      const getStatusText = (status: string) => {
+        switch (status.toLowerCase()) {
+          case "inactive":
+            return "InActive";
+          case "active":
+            return "Active";
+
+          default:
+            return "Not Available";
+        }
+      };
+
+
+      return (
+        <div>
+          <Badge
+            className={`${getStatusColor(
+              status
+            )} rounded-full px-6 py-1 font-medium`}>
+            {getStatusText(status)}
+          </Badge>
+        </div>
+      );
+    },
+  },
+  {
+    id: "actions",
+    header: () => t("userRecord.Actions"),
+    cell: ({ row }) => <ArchivedUserActionsCell row={row.original} />,
+  },
+];
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/ArchivedUsers/ActivateArchivedUser.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/content/ArchivedUsers/ActivateArchivedUser.tsx
new file mode 100644
index 000000000..74ebc446f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/content/ArchivedUsers/ActivateArchivedUser.tsx
@@ -0,0 +1,78 @@
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import { Button } from "@/shared/common/ui/button";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { useEmployeePositions } from "@/user-management/hooks/useEmployeePostions";
+import { Loader2 } from "lucide-react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+interface ActivateArchivedUserProps {
+    isOpen: boolean;
+    onClose: () => void;
+    userId: string;
+}
+
+
+const ActivateArchivedUser: React.FC<ActivateArchivedUserProps> = ({
+    isOpen,
+    onClose,
+    userId,
+}) => {
+    const { activateUser, isActivatingUser } = useEmployeePositions();
+    const [isActivatedUser, setIsActivatedUser] = useState(false);
+    const {t} = useTranslation()
+    const {handleError } = useErrorHandler(t)
+    const onActviate = async () => {
+        try {
+            await activateUser({
+                payload: userId,
+                successCallback: () => {
+                    onClose();
+                },
+            });
+            setIsActivatedUser(true);
+        }
+        catch (error) {
+            console.error("Error activating user:", error);
+            handleError(error);
+        }
+    }
+  return (
+    <AlertDialog open={isOpen} onOpenChange={onClose}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            Activate Archived User?
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+           Are you sure you want to activate this archived user? This action will restore the user's access and data within the organization.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isActivatedUser}>
+            Cancel
+          </AlertDialogCancel>
+          <Button
+            variant="default"
+            onClick={onActviate}
+            disabled={isActivatedUser}>
+            {isActivatingUser && (
+              <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+            )}
+            Activate
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
+
+export default ActivateArchivedUser;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/ArchivedUsers/ArchivedUserActions.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/content/ArchivedUsers/ArchivedUserActions.tsx
new file mode 100644
index 000000000..cfe790520
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/content/ArchivedUsers/ArchivedUserActions.tsx
@@ -0,0 +1,104 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+} from "@/shared/common/ui/dropdown-menu"; // Adjust if needed
+
+import { Button } from "@/shared/common/ui/button";
+import { MoreVertical, Edit, Trash, UserPlus } from "lucide-react"; // Adjust icons as needed
+import { ItemDTO, User } from "@/shared/dto/user/usersDto";
+import { t } from "i18next";
+import ActivateArchivedUser from "./ActivateArchivedUser";
+
+type ActionsCellProps = {
+  row: ItemDTO;
+};
+
+const ArchivedUserActionsCell: React.FC<ActionsCellProps> = ({ row }) => {
+  const navigate = useNavigate();
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
+  const handleEdit = () => {
+    navigate(`/user-management/archive/edit/${row?.userId}`);
+  };
+
+  const handleDelete = (e: Event) => {
+    e.preventDefault();
+    setDropdownOpen(false);
+    setShowDeleteDialog(true);
+  };
+
+  const handleActivateModal = () => {
+    setModalOpen(true);
+  };
+ 
+
+  return (
+    <>
+      <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="h-8 w-8 p-0">
+            <MoreVertical className="h-4 w-4" />
+            <span className="sr-only">Open actions menu</span>
+          </Button>
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent
+          align="end"
+          onInteractOutside={(e) => {
+            const target = e.target as HTMLElement;
+            if (!target.closest('[role="dialog"]')) {
+              setDropdownOpen(false);
+            }
+          }}>
+          <DropdownMenuLabel>{t("userRecord.Actions")}</DropdownMenuLabel>
+
+          <DropdownMenuItem
+            onSelect={handleEdit}
+            className="cursor-pointer hover:!text-primary-700 !bg-transparent !transition-colors duration-200">
+            <Edit className="mr-2 h-4 w-4 group-hover:text-white transition-colors duration-200" />
+            <span> {t("userRecord.Edit")}</span>
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onSelect={handleActivateModal}
+            className="cursor-pointer hover:!text-primary-700 !bg-transparent !transition-colors duration-200">
+            <UserPlus className="mr-2 h-4 w-4 group-hover:text-white transition-colors duration-200" />
+            <span> {t("userRecord.Activate")}</span>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+
+          <DropdownMenuItem
+            onSelect={handleDelete}
+            className="text-red-600 cursor-pointer hover:!text-red-800 !bg-transparent !transition-colors duration-200">
+            <Trash className="mr-2 h-4 w-4 text-red-600 group-hover:text-white transition-colors duration-200" />
+            <span> {t("userRecord.Delete")}</span>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {modalOpen && (
+        <ActivateArchivedUser
+          isOpen={modalOpen}
+          onClose={() => setModalOpen(false)}
+          userId={row.id}
+        />
+      )}
+
+      {/* {showDeleteDialog && (
+        <DeletePositionTypes
+          id={row.id}
+          onSuccess={() => setShowDeleteDialog(false)}
+          onClose={() => setShowDeleteDialog(false)}
+        />
+      )} */}
+    </>
+  );
+};
+
+export default ArchivedUserActionsCell;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/CommonRemarks.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/content/CommonRemarks.tsx
new file mode 100644
index 000000000..25f7d7b5c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/content/CommonRemarks.tsx
@@ -0,0 +1,268 @@
+import React, { useState } from "react";
+import { Button } from "@/shared/common/ui/button";
+import { Card } from "@/shared/common/ui/card";
+import { Input } from "@/shared/common/ui/input";
+import { Label } from "@radix-ui/react-label";
+import { Plus, Trash2, Pencil } from "lucide-react";
+import {
+  prefixSuffixService,
+  RemarkPayload,
+} from "@/user-management/services/api/prefixSuffixService";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/shared/common/ui/dialog";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useRemarkByUnitId } from "@/super-admin/hooks/useRemark";
+import { t } from "i18next";
+
+interface Props {
+  unitId: string;
+}
+
+interface RemarkDto {
+  id: string;
+  remark: string;
+  description?: string;
+}
+
+export const CommonRemarks = ({ unitId }: Props) => {
+  const [remark, setRemark] = useState("");
+  const [description, setDescription] = useState("");
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [deleteRemarkId, setDeleteRemarkId] = useState<string | null>(null);
+  const [error, setError] = useState("");
+
+  const queryClient = useQueryClient();
+  const { data: remarksData, isLoading: isRemarkLoading } =
+    useRemarkByUnitId(unitId,{
+      skip: 0,
+      take: 300,
+    });
+
+  // Save/Edit Remark
+  const saveRemarkMutation = useMutation({
+    mutationFn: async () => {
+      if (!remark) throw new Error(t("contentManagement.remarkRequired"));
+
+      const payload: RemarkPayload = { unitId, remark, description };
+
+      if (editingId) {
+        return prefixSuffixService.editRemark(editingId, payload);
+      }
+      return prefixSuffixService.createRemark(payload);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["remark", unitId] });
+      resetForm();
+      setIsDialogOpen(false);
+    },
+    onError: (err: any) =>
+      setError(err.message || t("contentManagement.failed")),
+  });
+
+  // Delete Remark
+  const deleteRemarkMutation = useMutation({
+    mutationFn: (id: string) => prefixSuffixService.deleteRemarks(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["remark", unitId] });
+      setIsDeleteDialogOpen(false);
+      setDeleteRemarkId(null);
+    },
+    onError: () => setError(t("contentManagement.failedToDelete")),
+  });
+
+  const resetForm = () => {
+    setRemark("");
+    setDescription("");
+    setEditingId(null);
+    setError("");
+  };
+
+  const handleEdit = (item: RemarkDto) => {
+    setEditingId(item.id);
+    setRemark(item.remark);
+    setDescription(item.description || "");
+    setIsDialogOpen(true);
+  };
+
+  const handleSubmit = () => saveRemarkMutation.mutate();
+
+  return (
+    <Card className="p-4 border shadow-sm space-y-4 dark:border-gray-700 dark:bg-gray-800">
+      {/* Add/Edit Dialog */}
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogTrigger asChild>
+          <Button className="w-[180px] bg-primary hover:bg-primary/90 text-primary-foreground flex items-center">
+            <Plus className="h-4 w-4 mr-2" />
+            {t("contentManagement.addRemark")}
+          </Button>
+        </DialogTrigger>
+
+        <DialogContent className="sm:max-w-xl w-full dark:bg-gray-800">
+          <DialogHeader>
+            <DialogTitle className="dark:text-white">
+              {editingId
+                ? t("contentManagement.editRemark")
+                : t("contentManagement.addRemark")}
+            </DialogTitle>
+          </DialogHeader>
+
+          <div className="grid gap-4 py-4">
+            <div className="flex flex-col">
+              <Label htmlFor="remark" className="mb-1 dark:text-gray-200">
+                {t("header.Remark")}
+              </Label>
+              <Input
+                id="remark"
+                value={remark}
+                onChange={(e) => setRemark(e.target.value)}
+                placeholder={t("header.Remark")}
+                disabled={isRemarkLoading}
+                className="w-full dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+              />
+              <Label htmlFor="description" className="mb-1 dark:text-gray-200">
+                {t("header.Description")}
+              </Label>
+              <Input
+                id="description"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder={t("header.Description")}
+                disabled={isRemarkLoading}
+                className="w-full mb-2 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+              />
+            </div>
+            {error && <p className="text-sm text-red-500">{error}</p>}
+          </div>
+
+          <div className="flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
+            <Button
+              variant="outline"
+              onClick={() => {
+                resetForm();
+                setIsDialogOpen(false);
+              }}>
+              {t("common.Cancel")}
+            </Button>
+            <Button
+              onClick={handleSubmit}
+              disabled={isRemarkLoading} // ✅ access via mutation object
+              className="bg-primary hover:bg-primary/90 text-primary-foreground">
+              {isRemarkLoading
+                ? t("contentManagement.saving")
+                : editingId
+                ? t("delegation.update")
+                : t("delegation.save")}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* Remarks Table */}
+      <h3 className="font-semibold text-md dark:text-white">
+        {t("contentManagement.commonRemarks")}
+      </h3>
+      {isRemarkLoading ? (
+        <div className="text-center py-4 dark:text-gray-400">{t("contentManagement.loading")}</div>
+      ) : (
+        <div className="overflow-x-auto max-h-[380px] overflow-y-auto border rounded dark:border-gray-600">
+          <table className="min-w-full text-sm text-left">
+            <thead>
+              <tr className="border-b bg-gray-100 dark:bg-gray-700">
+                <th className="px-3 py-2 dark:text-white">#</th>
+                <th className="px-3 py-2 dark:text-white">{t("header.Remark")}</th>
+                <th className="px-3 py-2 dark:text-white">{t("header.Description")}</th>
+                <th className="px-3 py-2 dark:text-white">{t("userRecord.Actions")}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {remarksData?.items.length ? (
+                remarksData.items.map((item: any, idx: any) => (
+                  <tr key={item.id} className="border-b hover:bg-gray-50 dark:hover:bg-gray-700 dark:border-gray-600">
+                    <td className="px-3 py-2 dark:text-gray-300">{idx + 1}</td>
+                    <td className="px-3 py-2 dark:text-gray-300">{item.remark}</td>
+                    <td className="px-3 py-2 dark:text-gray-300">{item.description}</td>
+                  <td className="px-3 py-2 flex gap-2">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleEdit(item)}>
+                        <Pencil className="h-4 w-4" />
+                      </Button>
+                      <Button
+                        variant="destructive"
+                        size="sm"
+                        onClick={() => {
+                          setDeleteRemarkId(item.id);
+                          setIsDeleteDialogOpen(true);
+                        }}>
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </td>
+                  </tr>
+                ))
+              ) : (
+                <tr>
+                  <td colSpan={4} className="text-center py-4 text-gray-500 dark:text-gray-400">
+                    {t("contentManagement.noRec")}
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      <AlertDialog
+        open={isDeleteDialogOpen}
+        onOpenChange={(open) => {
+          if (deleteRemarkMutation.isPending) return;
+          setIsDeleteDialogOpen(open);
+          if (!open) setDeleteRemarkId(null);
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t("common.delete")}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t("contentManagement.deleteMsg")}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={deleteRemarkMutation.isPending}>
+              {t("common.cancel")}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-red-600 hover:bg-red-700"
+              disabled={deleteRemarkMutation.isPending || !deleteRemarkId}
+              onClick={() => {
+                if (!deleteRemarkId) return;
+                deleteRemarkMutation.mutate(deleteRemarkId);
+              }}
+            >
+              {deleteRemarkMutation.isPending
+                ? t("common.deleting", "Deleting...")
+                : t("common.delete")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Card>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/ContentManagement.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/content/ContentManagement.tsx
new file mode 100644
index 000000000..aadef6133
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/content/ContentManagement.tsx
@@ -0,0 +1,508 @@
+import SealCard from "./SealCard";
+import LetterTemplatesTable from "./LetterTemplates/LetterTemplatesTable";
+import RecentActivitiesCard from "./RecentActivitiesCard";
+import { CommonRemarks } from "./CommonRemarks";
+import { useAuth } from "@/shared/context/AuthContext";
+import { useUnit } from "@/user-management/hooks/useUnit";
+import HeaderAndFooter from "./HeaderAndFooter";
+import { useState, useEffect, useCallback, useMemo } from "react";
+import { useSearchParams } from "react-router-dom";
+import { UnitDto } from "@/user-management/dto/unit/unitDto";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { PrefixAndSuffix } from "./PrefixAndSuffixCard";
+import { t } from "i18next";
+import i18n from "@/i18n";
+import AdminSetupAlert from "@/layout/components/AlertShow";
+import RecordTagsManagement from "./record-tags/RecordTags";
+import { TemplateSamplePage } from "@/user-management/TemplateSample/TemplateSamplePage";
+import {
+  BookImage,
+  ClipboardType,
+  ChevronRight,
+  Menu,
+  PencilRuler,
+  SquareActivity,
+  Stamp,
+  Tag,
+  X,
+  Building,
+  ClipboardList,
+  FileText,
+} from "lucide-react";
+import { cn } from "@/shared/lib/utils";
+import { useDebounce } from "../content/useDebounce";
+import { SingleSelect } from "@/shared/common/ui/single-select";
+
+export interface FilePreview {
+  type: "header" | "footer" | "seal";
+  url: string;
+  file: File;
+  uploadedAt: Date;
+  id: string | null;
+}
+
+export interface Activity {
+  id: string;
+  type: string;
+  description: string;
+  timestamp: Date;
+}
+
+interface MenuItem {
+  label: string;
+  icon: React.ReactNode;
+  element?: React.ReactNode;
+}
+
+const ContentManagement = () => {
+  const { user } = useAuth();
+  const lang = i18n.language;
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+  const [selectedUnitId, setSelectedUnitId] = useState<string>("");
+  const debouncedUnitId = useDebounce(selectedUnitId, 300);
+
+  const organizationId =
+    user?.employee && user.employee.length > 0
+      ? user.employee[0].organizationId
+      : undefined;
+
+  const { getAccessibleList } = useUnit();
+  const { data: unitsResponse, isLoading: unitsLoading } = organizationId
+    ? getAccessibleList(organizationId, { take: 300, skip: 0 })
+    : { data: undefined, isLoading: false };
+
+  // Notify listeners (e.g. AdminSetupAlert) after the unit selection debounces.
+  useEffect(() => {
+    if (!debouncedUnitId) return;
+
+    window.dispatchEvent(
+      new CustomEvent("unitChanged", { detail: debouncedUnitId }),
+    );
+  }, [debouncedUnitId]);
+
+  const handleUnitChange = useCallback(
+    (value: string) => {
+      setSelectedUnitId(value);
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          next.set("unit", value);
+          return next;
+        },
+        { replace: true },
+      );
+    },
+    [setSearchParams],
+  );
+
+  const selectMenuItem = useCallback(
+    (index: number, label: string) => {
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          next.set("tab", label);
+          if (selectedUnitId) {
+            next.set("unit", selectedUnitId);
+          }
+          return next;
+        },
+        { replace: true },
+      );
+      setIsMobileMenuOpen(false);
+    },
+    [selectedUnitId, setSearchParams],
+  );
+
+  // Close mobile menu when resizing to desktop
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth >= 768) {
+        setIsMobileMenuOpen(false);
+      }
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  useEffect(() => {
+    const unitFromUrl = searchParams.get("unit");
+    const items = unitsResponse?.data?.items;
+    if (
+      unitFromUrl &&
+      items?.some((unit: UnitDto) => unit.id === unitFromUrl) &&
+      unitFromUrl !== selectedUnitId
+    ) {
+      setSelectedUnitId(unitFromUrl);
+      return;
+    }
+
+    if (
+      !unitsLoading &&
+      items?.length &&
+      !selectedUnitId &&
+      !unitFromUrl
+    ) {
+      const firstUnitId = items[0].id;
+      setSelectedUnitId(firstUnitId);
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          next.set("unit", firstUnitId);
+          if (!next.get("tab")) {
+            next.set("tab", "contentManagement.seal");
+          }
+          return next;
+        },
+        { replace: true },
+      );
+    }
+  }, [
+    unitsLoading,
+    unitsResponse,
+    selectedUnitId,
+    searchParams,
+    setSearchParams,
+  ]);
+
+  // Sidebar menu items with dynamic loading states
+  const menuItems: MenuItem[] = [
+    {
+      label: "contentManagement.seal",
+      icon: <Stamp className="h-5 w-5 flex-shrink-0" />,
+      element: <SealCard unitId={selectedUnitId} />,
+    },
+    {
+      label: "contentManagement.letterTemplate",
+      icon: <ClipboardList className="h-5 w-5 flex-shrink-0" />,
+      element: <LetterTemplatesTable unitId={selectedUnitId} />,
+    },
+    {
+      label: "recordTag.title",
+      icon: <Tag className="h-5 w-5 flex-shrink-0" />,
+      element: <RecordTagsManagement unitId={selectedUnitId} />,
+    },
+    {
+      label: "contentManagement.prefix",
+      icon: <PencilRuler className="h-5 w-5 flex-shrink-0" />,
+      element: (
+        <PrefixAndSuffix unitId={selectedUnitId} initialTab="internal" />
+      ),
+    },
+    {
+      label: "contentManagement.commonRemarks",
+      icon: <ClipboardType className="h-5 w-5 flex-shrink-0" />,
+      element: <CommonRemarks unitId={selectedUnitId} />,
+    },
+    {
+      label: "contentManagement.headerAndFooter",
+      icon: <BookImage className="h-5 w-5 flex-shrink-0" />,
+      element: <HeaderAndFooter unitId={selectedUnitId} />,
+    },
+    {
+      label: "template.sample",
+      icon: <FileText className="h-5 w-5 flex-shrink-0" />,
+      element: <TemplateSamplePage unitId={selectedUnitId} />,
+    },
+    {
+      label: "dashboard.recentActivities",
+      icon: <SquareActivity className="h-5 w-5 flex-shrink-0" />,
+      element: <RecentActivitiesCard />,
+    },
+  ];
+
+  const activeMenuIndex = useMemo(() => {
+    const tab = searchParams.get("tab");
+    if (!tab) return 0;
+    const index = menuItems.findIndex((item) => item.label === tab);
+    return index >= 0 ? index : 0;
+  }, [menuItems, searchParams]);
+
+  const activeMenuItem = menuItems[activeMenuIndex];
+  const isTemplateSampleActive = activeMenuItem?.label === "template.sample";
+
+  useEffect(() => {
+    if (!searchParams.get("tab") && menuItems.length > 0) {
+      setSearchParams(
+        (prev) => {
+          const next = new URLSearchParams(prev);
+          next.set("tab", menuItems[0].label);
+          return next;
+        },
+        { replace: true },
+      );
+    }
+  }, [menuItems, searchParams, setSearchParams]);
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100/30 dark:from-gray-900 dark:to-gray-800">
+      <div className="w-full h-full p-4 lg:p-6 space-y-6">
+        {/* Header Section */}
+        <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
+          <div className="flex-1 min-w-0">
+            <h1 className="text-2xl lg:text-3xl font-bold text-gray-900 dark:text-white tracking-tight">
+              {t("organization.contentManagement")}
+            </h1>
+            <p className="text-gray-600 dark:text-gray-400 mt-2 text-sm lg:text-base">
+              {t("organization.contentMsg")}
+            </p>
+          </div>
+
+          {/* Admin Alert */}
+          <div className="w-full lg:w-auto">
+            <AdminSetupAlert />
+          </div>
+        </div>
+
+        {/* Unit Selection Card */}
+        {unitsResponse?.data?.items?.length > 0 && (
+          <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-200 dark:border-gray-700 p-4 lg:p-6 transition-all duration-200 hover:shadow-md">
+            <div className="flex flex-col sm:flex-row sm:items-center gap-4">
+              <div className="flex items-center gap-3 flex-shrink-0">
+                <div className="p-2 bg-purple-50 dark:bg-purple-900/30 rounded-lg">
+                  <Building className="h-5 w-5 text-purple-600 dark:text-purple-400" />
+                </div>
+                <div>
+                  <label className="block text-sm font-semibold text-gray-900 dark:text-white">
+                    {t("organization.selectUnit")}
+                  </label>
+                </div>
+              </div>
+
+              <div className="flex-1 min-w-0">
+                <SingleSelect
+                  options={unitsResponse?.data.items.map((u: any) => ({
+                    value: u.id,
+                    label: lang === "en" ? u.name.en : u.name.am,
+                  }))}
+                  onValueChange={handleUnitChange}
+                  value={selectedUnitId ?? ""}
+                  placeholder={t("delegation.selectDelegatedPosition")}
+                />
+
+                {/* <Select
+                  value={selectedUnitId}
+                  onValueChange={handleUnitChange}
+                  disabled={unitsLoading}
+                >
+                  <SelectTrigger
+                    className={cn(
+                      "w-full border-gray-300 dark:border-gray-600 rounded-xl shadow-sm transition-all duration-200 dark:bg-gray-700 dark:text-white",
+                      "focus:ring-2 focus:ring-purple-500 focus:border-purple-500",
+                      "hover:border-gray-400 dark:hover:border-gray-500",
+                      unitsLoading && "opacity-50 cursor-not-allowed",
+                    )}
+                  >
+                    <SelectValue
+                      placeholder={
+                        unitsLoading
+                          ? t("common.loading")
+                          : t("organization.selectUnit")
+                      }
+                    />
+                  </SelectTrigger>
+                  <SelectContent className="rounded-xl border border-gray-200 dark:border-gray-600 shadow-lg dark:bg-gray-800">
+                    {unitsResponse?.data.items.map((unit: UnitDto) => (
+                      <SelectItem
+                        key={unit.id}
+                        value={unit.id}
+                        className="rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors dark:text-gray-200"
+                      >
+                        <div className="flex items-center gap-2">
+                          <span className="flex-1 truncate">
+                            {lang === "en" ? unit.name.en : unit.name.am}
+                          </span>
+                          {unit.id === selectedUnitId && (
+                            <div className="w-2 h-2 bg-purple-600 dark:bg-purple-400 rounded-full" />
+                          )}
+                        </div>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select> */}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Main Content Grid */}
+        <div
+          className={cn(
+            "flex w-full min-h-[calc(100vh-12rem)] bg-transparent rounded-2xl",
+            isTemplateSampleActive ? "overflow-visible" : "overflow-hidden",
+          )}
+        >
+          {/* Mobile Overlay */}
+          {isMobileMenuOpen && (
+            <div
+              className="fixed inset-0 bg-black/50 dark:bg-black/70 z-40 md:hidden backdrop-blur-sm transition-opacity duration-300"
+              onClick={() => setIsMobileMenuOpen(false)}
+            />
+          )}
+
+          {/* Sidebar */}
+          <div
+            className={cn(
+              // Remove `fixed` and use `sticky` instead for proper scroll behavior
+              "md:sticky top-0 flex flex-col bg-white dark:bg-gray-800 border-r border-gray-200/60 dark:border-gray-700 transition-all duration-300 ease-in-out",
+              "backdrop-blur-sm bg-white/95 md:bg-white dark:bg-gray-800/95",
+              isMobileMenuOpen
+                ? "absolute left-0 top-0 z-40 w-72 lg:w-80"
+                : "hidden md:flex",
+              isSidebarCollapsed ? "md:w-16 lg:w-20" : "md:w-72 lg:w-80",
+              "h-[calc(100vh-2rem)] md:h-screen rounded-2xl md:rounded-none shadow-xl md:shadow-none",
+            )}
+          >
+            {/* Sidebar Header */}
+            <div
+              className={cn(
+                "flex items-center p-4 border-b border-gray-200/60 dark:border-gray-700 transition-all duration-300",
+                isSidebarCollapsed ? "justify-center" : "justify-between",
+              )}
+            >
+              {!isSidebarCollapsed && (
+                <div className="flex items-center gap-3 min-w-0">
+                  <h2 className="text-lg font-bold text-gray-900 dark:text-white truncate">
+                    {t("organization.contentManagement")}
+                  </h2>
+                </div>
+              )}
+              <div className="flex items-center gap-1">
+                {/* Collapse Toggle - Desktop */}
+                <button
+                  onClick={() => setIsSidebarCollapsed(!isSidebarCollapsed)}
+                  className={cn(
+                    "hidden md:flex p-2 rounded-xl hover:bg-purple-200 dark:hover:bg-purple-900/50 transition-all duration-200",
+                    "hover:shadow-sm border border-transparent hover:border-purple-200 dark:hover:border-purple-800",
+                  )}
+                  title={
+                    isSidebarCollapsed
+                      ? t("expandSidebar")
+                      : t("collapseSidebar")
+                  }
+                >
+                  {isSidebarCollapsed ? (
+                    <Menu className="h-4 w-4 text-gray-600 dark:text-gray-300" />
+                  ) : (
+                    <Menu className="h-4 w-4 text-gray-600 dark:text-gray-300" />
+                  )}
+                </button>
+
+                {/* Close Button - Mobile */}
+                <button
+                  onClick={() => setIsMobileMenuOpen(false)}
+                  className="md:hidden p-2 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                >
+                  <X className="h-4 w-4 text-gray-600 dark:text-gray-300" />
+                </button>
+              </div>
+            </div>
+
+            {/* Navigation Menu */}
+            <nav className="flex-1 p-3 space-y-1 overflow-y-auto">
+              {menuItems.map((item, index) => (
+                <button
+                  key={index}
+                  onClick={() => selectMenuItem(index, item.label)}
+                  className={cn(
+                    "w-full flex items-center gap-3 p-3 rounded-xl text-sm font-medium cursor-pointer transition-all duration-200",
+                    "border border-transparent hover:border-gray-200 dark:hover:border-gray-600 hover:shadow-sm",
+                    isSidebarCollapsed ? "justify-center" : "",
+                    activeMenuIndex === index
+                      ? "bg-gradient-to-r from-purple-50 to-purple-50 dark:from-purple-900/30 dark:to-purple-900/20 text-purple-700 dark:text-purple-300 border-purple-200 dark:border-purple-700 shadow-sm"
+                      : "text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white",
+                  )}
+                >
+                  <span
+                    className={cn(
+                      "transition-transform duration-200",
+                      activeMenuIndex === index && "scale-110",
+                    )}
+                  >
+                    {item.icon}
+                  </span>
+                  {!isSidebarCollapsed && (
+                    <span className="flex-1 text-left truncate font-semibold">
+                      {t(item.label)}
+                    </span>
+                  )}
+                </button>
+              ))}
+            </nav>
+          </div>
+
+          {/* Main Content Area */}
+          <div
+            className={cn(
+              "flex-1 flex flex-col min-w-0 transition-all duration-300",
+              isSidebarCollapsed ? "md:ml-0" : "md:ml-0",
+            )}
+          >
+            {/* Mobile Header */}
+            <div className="md:hidden flex items-center justify-between p-4 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm border-b border-gray-200/60 dark:border-gray-700 rounded-t-2xl">
+              <button
+                onClick={() => setIsMobileMenuOpen(true)}
+                className="p-2 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors shadow-sm border border-gray-200 dark:border-gray-600"
+              >
+                <Menu className="h-5 w-5 text-gray-600 dark:text-gray-300" />
+              </button>
+              <div className="flex-1 text-center">
+                <h1 className="text-lg font-semibold text-gray-900 dark:text-white truncate">
+                  {t(activeMenuItem?.label || "contentmanagement")}
+                </h1>
+              </div>
+              <div className="w-9"></div>
+            </div>
+
+            {/* Page Content */}
+            <div
+              className={cn(
+                "flex-1 p-4 md:p-6",
+                isTemplateSampleActive ? "overflow-visible" : "overflow-auto",
+              )}
+            >
+              {/* Breadcrumb Navigation */}
+              <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 mb-6 flex-wrap">
+                <span className="text-gray-400 dark:text-gray-500">
+                  {t("content")}
+                </span>
+                {activeMenuItem && (
+                  <>
+                    <ChevronRight className="h-4 w-4 text-gray-400 dark:text-gray-500" />
+                    <span className="text-gray-900 dark:text-white font-semibold bg-gray-100 dark:bg-gray-700 px-3 py-1 rounded-full text-sm">
+                      {t(activeMenuItem.label)}
+                    </span>
+                  </>
+                )}
+              </div>
+
+              {/* Render the active element with loading state */}
+              <div className={cn("w-full transition-opacity duration-300")}>
+                <div
+                  className={cn(
+                    "rounded-2xl shadow-sm border border-gray-200/60 dark:border-gray-700",
+                    isTemplateSampleActive
+                      ? "overflow-visible"
+                      : "overflow-hidden",
+                  )}
+                >
+                  {activeMenuItem?.element}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ContentManagement;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/HeaderAndFooter.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/content/HeaderAndFooter.tsx
new file mode 100644
index 000000000..ee001c5b3
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/content/HeaderAndFooter.tsx
@@ -0,0 +1,468 @@
+import { useEffect, useState, useRef, useCallback } from "react";
+import {
+  HeaderFooterResponseDto,
+  headerFooterService,
+  CreateHeaderFooterPayload,
+  HeaderFooterChangeStatusPayload,
+} from "@/user-management/services/api/headerFooterService";
+import { Card } from "@/shared/common/ui/card";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import { Label } from "@/shared/common/ui/label";
+import { Input } from "@/shared/common/ui/input";
+import { Button } from "@/shared/common/ui/button";
+import { Plus } from "lucide-react";
+import { toast } from "sonner";
+import i18n from "@/i18n";
+import { t } from "i18next";
+import { useQueryClient } from "@tanstack/react-query";
+import { presignedAxios } from "@/shared/services/presignedAxios";
+import useSettings from "@/record-management/components/hooks/useSettings";
+import { OrganizationsPositions } from "@/record-management/services/api/departmentService";
+import { MultiSelect } from "@/shared/common/ui/multi-select";
+import { useUnitConfiguration } from "@/shared/hooks/useUnitConfiguration";
+import { KeyValue } from "@/record-management/types/recordSelectTypes";
+import { FormSelectField } from "@/shared/common/form/fields/FormFields";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { useLocalizedName } from "@/shared/common/localizedName";
+
+interface Props {
+  unitId: string;
+}
+
+const HeaderAndFooter = ({ unitId }: Props) => {
+  const [headers, setHeaders] = useState<HeaderFooterResponseDto[]>([]);
+  const [footers, setFooters] = useState<HeaderFooterResponseDto[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [newName, setNewName] = useState("");
+  const [newFile, setNewFile] = useState<File | null>(null);
+  const [newType, setNewType] = useState<"header" | "footer">("header");
+  const [newPreview, setNewPreview] = useState<string | null>(null);
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const queryClient = useQueryClient();
+  const lang = i18n.language;
+  const [selectedPositions, setSelectedPositions] = useState<string[]>([]);
+
+  const { data: unitConfigData } = useUnitConfiguration(unitId ?? "", {
+    enabled: !!unitId,
+  });
+  const unitConfig = unitConfigData?.data?.items?.[0];
+  const canCreateDirectRecord = unitConfig?.canCreateDirectRecord ?? false;
+  const localizedName = useLocalizedName();
+  const [selectedRecordType, setSelectedRecordType] = useState<string | null>(
+    null,
+  );
+  const isDirectRecordType = (item: {
+    name?: { en?: string; am?: string };
+    key?: string;
+  }) => {
+    const key = String(item.key || "").toLowerCase();
+    const rawName = [item.name?.en, item.name?.am]
+      .filter(Boolean)
+      .join(" ")
+      .toLowerCase();
+    return key.includes("direct") || rawName.includes("direct");
+  };
+
+  const { recordTypes } = useSettings();
+  const { allDepratments } = useSettings();
+  const localizedFormName = useCallback(
+    (name?: { am: string; en: string }) => {
+      if (!name) return "";
+      return lang === "am" ? name.am || name.en : name.en || name.am;
+    },
+    [lang],
+  );
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [headerListRes, footerListRes] = await Promise.all([
+        headerFooterService.getHeadersByUnitId(unitId),
+        headerFooterService.getFootersByUnitId(unitId),
+      ]);
+
+      const activeUploadedHeaders = headerListRes.data.items.filter(
+        (item) => item.isCurrent && item.uploadedSuccessfully,
+      );
+      const activeUploadedFooters = footerListRes.data.items.filter(
+        (item) => item.isCurrent && item.uploadedSuccessfully,
+      );
+
+      const withPresigned = async (
+        items: HeaderFooterResponseDto[],
+        type: "header" | "footer",
+      ) =>
+        Promise.all(
+          items.map(async (item) => {
+            try {
+              const detail =
+                type === "header"
+                  ? await headerFooterService.getHeaderById(item.id)
+                  : await headerFooterService.getFooterById(item.id);
+              return { ...item, presigned: detail.data.presigned };
+            } catch {
+              return item;
+            }
+          }),
+        );
+
+      const [activeHeaders, activeFooters] = await Promise.all([
+        withPresigned(activeUploadedHeaders, "header"),
+        withPresigned(activeUploadedFooters, "footer"),
+      ]);
+
+      setHeaders(activeHeaders);
+      setFooters(activeFooters);
+    } catch {
+      toast.error(t("contentManagement.failedToLoadHeaderFooter"));
+    } finally {
+      setLoading(false);
+    }
+  }, [unitId]);
+
+  const handleStatusChange = async (
+    id: string,
+    type: "header" | "footer",
+    isCurrent: boolean,
+  ) => {
+    try {
+      const payload: HeaderFooterChangeStatusPayload = { isCurrent };
+
+      if (type === "header") {
+        await headerFooterService.changeHeaderStatus(id, payload);
+      } else {
+        await headerFooterService.changeFooterStatus(id, payload);
+      }
+
+      // Invalidate the query cache so record forms immediately reflect the changes
+      queryClient.invalidateQueries({
+        queryKey: ["headers-footers", unitId],
+      });
+
+      toast.success(t("contentManagement.statusChanged"));
+      fetchData();
+    } catch {
+      toast.error(t("contentManagement.statusChangeFailed"));
+    }
+  };
+
+  const handleUpload = async () => {
+    if (!newName || !newFile) {
+      setError(t("contentManagement.provideMsg"));
+      return;
+    }
+
+    setUploading(true);
+    setError(null);
+
+    try {
+      const created = await (newType === "header"
+        ? headerFooterService.uploadAndCreateHeader(
+            newFile,
+            newName,
+            unitId,
+            selectedPositions,
+            selectedRecordType,
+          )
+        : headerFooterService.uploadAndCreateFooter(
+            newFile,
+            newName,
+            unitId,
+            selectedPositions,
+            selectedRecordType,
+          ));
+
+      // Make the newly uploaded resource active immediately.
+      if (created?.id) {
+        if (newType === "header") {
+          await headerFooterService.changeHeaderStatus(created.id, {
+            isCurrent: true,
+          });
+        } else {
+          await headerFooterService.changeFooterStatus(created.id, {
+            isCurrent: true,
+          });
+        }
+      }
+
+      toast.success(`${newType} ${t("contentManagement.uploadSuccess")}`);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+      setNewFile(null);
+      setNewName("");
+      setNewPreview(null);
+      setError(null);
+      setSelectedPositions([]);
+      setSelectedRecordType(null);
+      fetchData();
+    } catch (err) {
+      console.error(err);
+      setError(t("contentManagement.uploadFailed"));
+      toast.error(t("contentManagement.uploadFailed"));
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const recordTypeOptions: KeyValue[] =
+    recordTypes
+      ?.filter((item: { name?: { en?: string; am?: string }; key?: string }) =>
+        canCreateDirectRecord ? true : !isDirectRecordType(item),
+      )
+      .map((item: { name: { en: string; am: string }; key: string }) => ({
+        label:
+          item.key == "direct"
+            ? localizedName({ en: "Direct Letter", am: "ቀጥታ ደብዳቤ" })
+            : localizedName(item.name),
+        value: item.key,
+      })) || [];
+
+  const renderList = (
+    title: string,
+    items: HeaderFooterResponseDto[],
+    type: "header" | "footer",
+  ) => (
+    <Card className="p-6 border shadow-sm dark:border-gray-700 dark:bg-gray-800">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="font-semibold text-xl dark:text-white">{title}</h2>
+        <span className="text-sm text-muted-foreground dark:text-gray-400">
+          {items.length} {items.length === 1 ? "item" : "items"}
+        </span>
+      </div>
+      {loading ? (
+        <Skeleton className="h-40" />
+      ) : items.length === 0 ? (
+        <div className="text-center py-8">
+          <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center">
+            <span className="text-2xl text-gray-400 dark:text-gray-500">
+              {type === "header" ? "📄" : "📋"}
+            </span>
+          </div>
+          <p className="text-sm text-muted-foreground dark:text-gray-400 mb-2">
+            No {title.toLowerCase()} found
+          </p>
+          <p className="text-xs text-muted-foreground dark:text-gray-500">
+            Upload your first {type} using the form below
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {items.map((item) => (
+            <div
+              key={item.id}
+              className={`border rounded-lg p-4 ${
+                item.isCurrent
+                  ? "bg-primary-50 dark:bg-primary-900/30 border-primary-200 dark:border-primary-800 shadow-sm"
+                  : "bg-white dark:bg-gray-700"
+              }`}>
+              {/* Header with name and status */}
+              <div className="flex items-start justify-between mb-3">
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-1">
+                    <h3 className="font-semibold text-lg truncate dark:text-white">
+                      {lang === "en" ? item.name.en : item.name.am}
+                    </h3>
+                    {item.isCurrent && (
+                      <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 dark:bg-primary-900/50 text-primary-800 dark:text-primary-300 flex-shrink-0">
+                        {t("contentManagement.currentlyActive")}
+                      </span>
+                    )}
+                  </div>
+                  <p className="text-sm text-muted-foreground dark:text-gray-400 truncate">
+                    {item.fileInfo.fileName}
+                  </p>
+                </div>
+              </div>
+
+              {/* Preview and Actions */}
+              <div className="flex items-center justify-between gap-4">
+                {/* Preview Image */}
+                {item.presigned && (
+                  <div className="flex-shrink-0">
+                    <div className="w-24 h-16 border rounded-md overflow-hidden bg-gray-50 dark:bg-gray-600">
+                      <img
+                        src={item.presigned}
+                        alt={`${type} Preview`}
+                        className="w-full h-full object-contain"
+                      />
+                    </div>
+                  </div>
+                )}
+
+                {/* Actions */}
+                <div className="flex items-center gap-2 ml-auto">
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    onClick={() => handleStatusChange(item.id, type, false)}
+                    className="text-red-600 dark:text-red-400 border-red-300 dark:border-red-700 hover:bg-red-50 dark:hover:bg-red-900/30 whitespace-nowrap">
+                    {t("contentManagement.delete")}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </Card>
+  );
+
+  return (
+    <div className="space-y-8">
+      <div className="grid lg:grid-cols-2 gap-8">
+        {renderList("Headers", headers, "header")}
+        {renderList("Footers", footers, "footer")}
+      </div>
+
+      <Card className="p-4 border shadow-sm space-y-4 dark:border-gray-700 dark:bg-gray-800">
+        <h2 className="font-semibold text-lg flex items-center gap-2 dark:text-white">
+          <Plus className="h-5 w-5" /> {t("contentManagement.addHeaderFooter")}
+        </h2>
+        <div className="grid md:grid-cols-3 gap-4">
+          <div>
+            <Label className="dark:text-gray-200">
+              {t("contentManagement.name")}
+            </Label>
+            <Input
+              value={newName}
+              onChange={(e) => {
+                setNewName(e.target.value);
+                setError(null);
+              }}
+              placeholder={t("contentManagement.name")}
+              disabled={uploading}
+              className="dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+            />
+          </div>
+
+          <div>
+            <Label className="dark:text-gray-200">
+              {t("contentManagement.type")}
+            </Label>
+            <select
+              value={newType}
+              onChange={(e) =>
+                setNewType(e.target.value as "header" | "footer")
+              }
+              className="w-full rounded border px-3 py-2 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+              disabled={uploading}>
+              <option value="header">{t("contentManagement.header")}</option>
+              <option value="footer">{t("contentManagement.footer")}</option>
+            </select>
+          </div>
+
+          <div>
+            <Label className="dark:text-gray-200">
+              {t("contentManagement.uploadFile")}
+            </Label>
+            <Input
+              type="file"
+              accept="image/*"
+              ref={fileInputRef}
+              onChange={(e) => {
+                const file = e.target.files?.[0] || null;
+                if (file) {
+                  const maxSizeMB = 5; // for example, 2 MB
+                  if (file.size > maxSizeMB * 1024 * 1024) {
+                    setError(`File size must be less than ${maxSizeMB} MB`);
+                    if (fileInputRef.current) fileInputRef.current.value = "";
+                    setNewFile(null);
+                    setNewPreview(null);
+                    return;
+                  }
+                  setNewFile(file);
+                  setNewPreview(URL.createObjectURL(file));
+                } else {
+                  setNewFile(null);
+                  setNewPreview(null);
+                }
+                setError(null);
+              }}
+              disabled={uploading}
+            />
+          </div>
+          <div>
+            <Label className="dark:text-gray-200">
+              {t("contentManagement.positions")}
+            </Label>
+            <MultiSelect
+              options={
+                (allDepratments as OrganizationsPositions[] | undefined)?.map(
+                  (dept) => ({
+                    label: localizedFormName(dept.name),
+                    value: dept.id,
+                  }),
+                ) ?? []
+              }
+              value={selectedPositions}
+              onValueChange={setSelectedPositions}
+              placeholder={t("contentManagement.selectPositions")}
+              maxCount={5}
+              className="w-full max-w-full sm:max-w-md overflow-x-auto"
+              animation={0}
+            />
+          </div>
+          <div>
+            <Label className="dark:text-gray-200">
+              {t("addRecord.Record Type")}
+            </Label>
+            <Select
+              value={selectedRecordType ?? ""}
+              onValueChange={(val) => setSelectedRecordType(val || null)}>
+              <SelectTrigger>
+                <SelectValue placeholder={t("addRecord.Select Record Type")} />
+              </SelectTrigger>
+              <SelectContent>
+                {recordTypeOptions.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        {newPreview && (
+          <div className="mt-2">
+            <Label className="dark:text-gray-200">
+              {t("contentManagement.preview")}
+            </Label>
+            <div className="border rounded p-2 inline-block mt-1 dark:border-gray-600">
+              <img
+                src={newPreview}
+                alt="Preview"
+                className="h-24 object-contain rounded"
+              />
+            </div>
+          </div>
+        )}
+
+        {error && <p className="text-sm text-red-500">{error}</p>}
+
+        <Button
+          onClick={handleUpload}
+          disabled={uploading}
+          className="bg-primary hover:bg-primary/90 text-primary-foreground w-full">
+          {uploading
+            ? t("PDF.uploading")
+            : `${t("signatureUpload.upload")} ${newType}`}
+        </Button>
+      </Card>
+    </div>
+  );
+};
+
+export default HeaderAndFooter;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/LetterTemplates/LetterTemplateForm.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/content/LetterTemplates/LetterTemplateForm.tsx
new file mode 100644
index 000000000..5aac89c77
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/content/LetterTemplates/LetterTemplateForm.tsx
@@ -0,0 +1,377 @@
+import { Controller, useForm } from "react-hook-form";
+import { Input } from "@/shared/common/ui/input";
+import { Button } from "@/shared/common/ui/button";
+import {
+  LetterTemplate,
+  LetterTemplatePayload,
+} from "@/user-management/services/api/letterTemplateService";
+import { TemplateEditor } from "@/super-admin/components/templates/components/TemplateEditor";
+import { useHeaderFooterPresigned } from "@/record-management/components/hooks/useHeaderFooterPresigned";
+import { useMemo, useState, useEffect } from "react";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/shared/common/ui/form";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { Card, CardContent } from "@/shared/common/ui/card";
+import { useTranslation } from "react-i18next";
+import { useLocalizedName } from "@/shared/common/localizedName";
+
+interface Props {
+  unitId: string;
+  template?: LetterTemplate | null;
+  isSubmitting: boolean;
+  onCancel: () => void;
+  onSubmitCreate: (data: LetterTemplatePayload) => void;
+}
+
+export const LetterTemplateForm = ({
+  unitId,
+  template,
+  isSubmitting,
+  onCancel,
+  onSubmitCreate,
+}: Props) => {
+  const { t } = useTranslation();
+  const localizedName = useLocalizedName();
+  const [selectedHeader, setSelectedHeader] = useState<string>("");
+  const [selectedFooter, setSelectedFooter] = useState<string>("");
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    control,
+    setValue,
+    watch,
+    formState: { errors },
+  } = useForm<LetterTemplatePayload>({
+    defaultValues: {
+      name: {
+        en: template?.name?.en ?? "",
+        am: template?.name?.am ?? "",
+      },
+      key: template?.key ?? "",
+      subject: template?.subject ?? "",
+      body: template?.body ?? "",
+      sincerelyText: template?.sincerelyText ?? "",
+      headerId: template?.headerId ?? "",
+      footerId: template?.footerId ?? "",
+      unitId,
+    },
+  });
+
+  const { data: headerFooterData } = useHeaderFooterPresigned(unitId);
+  const headers = useMemo(
+    () => headerFooterData?.headers || [],
+    [headerFooterData?.headers],
+  );
+  const footers = useMemo(
+    () => headerFooterData?.footers || [],
+    [headerFooterData?.footers],
+  );
+
+  const selectedHeaderId = watch("headerId");
+  const selectedFooterId = watch("footerId");
+
+  // Update header preview when selection changes
+  useEffect(() => {
+    if (headers.length && selectedHeaderId) {
+      const header = headers.find((h) => h.id === selectedHeaderId);
+      if (header) {
+        setSelectedHeader(
+          `<div class="letter-header"><img src="${header.presigned}" alt="Header" style="width: 100%; max-height: 150px;" /></div>`,
+        );
+      }
+    } else {
+      setSelectedHeader("");
+    }
+  }, [headers, selectedHeaderId]);
+
+  // Update footer preview when selection changes
+  useEffect(() => {
+    if (footers.length && selectedFooterId) {
+      const footer = footers.find((f) => f.id === selectedFooterId);
+      if (footer) {
+        setSelectedFooter(
+          `<div class="letter-footer"><img src="${footer.presigned}" alt="Footer" style="width: 100%; max-height: 150px;" /></div>`,
+        );
+      }
+    } else {
+      setSelectedFooter("");
+    }
+  }, [footers, selectedFooterId]);
+
+  const onSubmit = (values: LetterTemplatePayload) => {
+    onSubmitCreate(values);
+    if (!template) {
+      reset();
+    }
+  };
+
+  // Header options for select
+  const headerOptions = headers.map((header) => ({
+    label: localizedName(header.name),
+    value: header.id,
+  }));
+
+  // Footer options for select
+  const footerOptions = footers.map((footer) => ({
+    label: localizedName(footer.name),
+    value: footer.id,
+  }));
+
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg p-8 shadow-sm space-y-8"
+    >
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+            {t("template.key", "Template Key")}
+          </label>
+          <Input
+            placeholder={t("template.keyPlaceholder", "Template Key")}
+            {...register("key", {
+              required: t("template.keyRequired", "Template key is required"),
+            })}
+          />
+          {errors.key && (
+            <p className="text-red-500 text-sm mt-1">{errors.key.message}</p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+            {t("template.subject", "Subject")}
+          </label>
+          <Input
+            placeholder={t("template.subjectPlaceholder", "Subject")}
+            {...register("subject", {
+              required: t("template.subjectRequired", "Subject is required"),
+            })}
+          />
+          {errors.subject && (
+            <p className="text-red-500 text-sm mt-1">
+              {errors.subject.message}
+            </p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+            {t("template.englishName", "English Name")}
+          </label>
+          <Input
+            placeholder={t("template.englishNamePlaceholder", "English Name")}
+            {...register("name.en", {
+              required: t(
+                "template.englishNameRequired",
+                "English name is required",
+              ),
+            })}
+          />
+          {errors.name?.en && (
+            <p className="text-red-500 text-sm mt-1">
+              {errors.name.en.message}
+            </p>
+          )}
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+            {t("template.amharicName", "Amharic Name")}
+          </label>
+          <Input
+            placeholder={t("template.amharicNamePlaceholder", "Amharic Name")}
+            {...register("name.am", {
+              required: t(
+                "template.amharicNameRequired",
+                "Amharic name is required",
+              ),
+            })}
+          />
+          {errors.name?.am && (
+            <p className="text-red-500 text-sm mt-1">
+              {errors.name.am.message}
+            </p>
+          )}
+        </div>
+
+        {/* Header Selection */}
+        {headerOptions.length > 0 && (
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              {t("template.header", "Header")}
+            </label>
+            <select
+              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+              value={selectedHeaderId || ""}
+              onChange={(e) => setValue("headerId", e.target.value)}
+            >
+              <option value="">{t("template.noHeader", "No Header")}</option>
+              {headerOptions.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+
+        {/* Footer Selection */}
+        {footerOptions.length > 0 && (
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              {t("template.footer", "Footer")}
+            </label>
+            <select
+              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+              value={selectedFooterId || ""}
+              onChange={(e) => setValue("footerId", e.target.value)}
+            >
+              <option value="">{t("template.noFooter", "No Footer")}</option>
+              {footerOptions.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+      </div>
+
+      {/* Header Preview */}
+      {selectedHeader && (
+        <Card className="border-0 shadow-sm">
+          <CardContent className="p-4">
+            <p className="text-sm font-medium text-muted-foreground mb-2">
+              {t("template.headerPreview", "Header Preview")}
+            </p>
+            <div
+              className="bg-muted rounded-lg p-4 border-2 border-dashed border-muted-foreground/20"
+              dangerouslySetInnerHTML={{ __html: selectedHeader }}
+            />
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Body Section */}
+      <div>
+        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+          {t("template.body", "Body")}
+          <span className="text-destructive ml-1">*</span>
+        </label>
+        <Controller
+          name="body"
+          control={control}
+          rules={{ required: t("template.bodyRequired", "Body is required") }}
+          render={({ field, fieldState }) => (
+            <>
+              <TemplateEditor
+                value={field.value}
+                onEditorChange={field.onChange}
+                placeholders={[
+                  {
+                    key: "delegatorName",
+                    label: t("placeholder.delegatorName", "Delegator Name"),
+                  },
+                  {
+                    key: "delegatorDepartment",
+                    label: t(
+                      "placeholder.delegatorDepartment",
+                      "Delegator Department",
+                    ),
+                  },
+                  {
+                    key: "delegateeName",
+                    label: t("placeholder.delegateeName", "Delegatee Name"),
+                  },
+                  {
+                    key: "delegateeDepartment",
+                    label: t(
+                      "placeholder.delegateeDepartment",
+                      "Delegatee Department",
+                    ),
+                  },
+                  {
+                    key: "startDate",
+                    label: t("placeholder.startDate", "Start Date"),
+                  },
+                  {
+                    key: "endDate",
+                    label: t("placeholder.endDate", "End Date"),
+                  },
+                  {
+                    key: "startDateTime",
+                    label: t("placeholder.startDateTime", "Start Date & Time"),
+                  },
+                  {
+                    key: "endDateTime",
+                    label: t("placeholder.endDateTime", "End Date & Time"),
+                  },
+                ]}
+              />
+              {fieldState.invalid && (
+                <p className="text-red-500 text-sm mt-1">
+                  {fieldState.error?.message}
+                </p>
+              )}
+            </>
+          )}
+        />
+      </div>
+
+      {/* Footer Preview */}
+      {selectedFooter && (
+        <Card className="border-0 shadow-sm">
+          <CardContent className="p-4">
+            <p className="text-sm font-medium text-muted-foreground mb-2">
+              {t("template.footerPreview", "Footer Preview")}
+            </p>
+            <div
+              className="bg-muted rounded-lg p-4 border-2 border-dashed border-muted-foreground/20"
+              dangerouslySetInnerHTML={{ __html: selectedFooter }}
+            />
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Sincerely Text */}
+      <div>
+        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+          {t("template.sincerelyText", "Sincerely Text")}
+        </label>
+        <Input
+          placeholder={t("template.sincerelyTextPlaceholder", "Sincerely Text")}
+          {...register("sincerelyText")}
+        />
+      </div>
+
+      {/* Action Buttons */}
+      <div className="flex gap-2 pt-4 justify-end">
+        <Button type="submit" disabled={isSubmitting}>
+          {isSubmitting
+            ? t("common.saving", "Saving...")
+            : template
+              ? t("common.update", "Update")
+              : t("common.save", "Save")}
+        </Button>
+        <Button type="button" variant="outline" onClick={onCancel}>
+          {t("common.cancel", "Cancel")}
+        </Button>
+      </div>
+    </form>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/LetterTemplates/LetterTemplatesCard.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/content/LetterTemplates/LetterTemplatesCard.tsx
new file mode 100644
index 000000000..dd411121e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/content/LetterTemplates/LetterTemplatesCard.tsx
@@ -0,0 +1,154 @@
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "@/shared/common/ui/card";
+import { FileText, Plus } from "lucide-react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { useState } from "react";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import { useLetterTemplates } from "@/user-management/hooks/useLetterTemplates";
+import { LetterTemplateForm } from "./LetterTemplateForm";
+import { toast } from "sonner";
+
+import { Button } from "@/shared/common/ui/button";
+import { t } from "i18next";
+import i18n from "@/i18n";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+interface Props {
+  unitId: string;
+}
+
+const LetterTemplatesCard = ({ unitId }: Props) => {
+  const { handleError } = useErrorHandler(t);
+  const {
+    letterTemplatesResponse,
+    isLoading,
+    isError,
+    refetch,
+    createLetterTemplate,
+    updateLetterTemplate,
+    isCreating,
+  } = useLetterTemplates(unitId);
+  const lang = i18n.language;
+  const [selectedTemplateId, setSelectedTemplateId] = useState<string | null>(
+    null
+  );
+  const [showCreateForm, setShowCreateForm] = useState(false);
+
+  const selectedTemplate =
+    letterTemplatesResponse?.items?.find((t) => t.id === selectedTemplateId) ??
+    null;
+
+  return (
+    <Card className="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-gray-800 dark:to-gray-900 dark:border-gray-700">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="flex items-center">
+              <FileText className="h-5 w-5 mr-2" />
+              {t("contentManagement.letterTemplate")}
+            </CardTitle>
+            <CardDescription className="dark:text-gray-400">
+              {t("contentManagement.createMsg")}
+            </CardDescription>
+          </div>
+          <Button onClick={() => setShowCreateForm(true)} size="sm">
+            <Plus className="h-4 w-4 mr-1" />
+            {t("contentManagement.addTemplate")}
+          </Button>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-6">
+        {isLoading ? (
+          <>
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-20 w-full" />
+          </>
+        ) : isError ? (
+          <p className="text-sm text-red-600">
+            {t("contentManagement.failedToLoadTemplates")}
+          </p>
+        ) : (
+          <>
+            {letterTemplatesResponse && letterTemplatesResponse?.count > 0 && (
+              <Select
+                onValueChange={(value) => {
+                  setSelectedTemplateId(value);
+                  setShowCreateForm(false);
+                }}
+                value={selectedTemplateId ?? undefined}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder={t("contentManagement.selectTemplate")} />
+                </SelectTrigger>
+                <SelectContent>
+                  {letterTemplatesResponse.items.map((template) => (
+                    <SelectItem key={template.id} value={template.id}>
+                      {lang === "en" ? template.name.en : template.name.am}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+
+            {(selectedTemplate || showCreateForm) && (
+              <LetterTemplateForm
+                unitId={unitId}
+                isSubmitting={isCreating}
+                template={selectedTemplate}
+                onCancel={() => {
+                  setShowCreateForm(false);
+                  setSelectedTemplateId(null);
+                }}
+                onSubmitCreate={(values) => {
+                  if (selectedTemplate) {
+                    updateLetterTemplate(
+                      { id: selectedTemplate.id, data: values },
+                      {
+                        onSuccess: () => {
+                          toast.success(t("contentManagement.updateTemplate"));
+                          refetch();
+                          setShowCreateForm(false);
+                        },
+                        onError: (error) => {
+                          handleError(error);
+                        },
+                      }
+                    );
+                  } else {
+                    createLetterTemplate(values, {
+                      onSuccess: (newTemplate) => {
+                        toast.success(
+                          `${newTemplate.name.en} ${t("contentManagement.templateSuccessMsg")}`
+                        );
+                        refetch();
+                        setShowCreateForm(false);
+                        setSelectedTemplateId(newTemplate.id);
+                      },
+                      onError: (error) => {
+                        handleError(error);
+                      },
+                    });
+                  }
+                }}
+              />
+            )}
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default LetterTemplatesCard;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/LetterTemplates/LetterTemplatesTable.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/content/LetterTemplates/LetterTemplatesTable.tsx
new file mode 100644
index 000000000..027703070
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/content/LetterTemplates/LetterTemplatesTable.tsx
@@ -0,0 +1,701 @@
+import React, { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+} from "@/shared/common/ui/card";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/common/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import {
+  FileText,
+  Plus,
+  Edit,
+  Trash2,
+  Eye,
+  ChevronLeft,
+  ChevronRight,
+} from "lucide-react";
+import { useLetterTemplates } from "@/user-management/hooks/useLetterTemplates";
+import { LetterTemplateForm } from "./LetterTemplateForm";
+import { LetterTemplate } from "@/user-management/services/api/letterTemplateService";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { toast } from "sonner";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import { useTemplate } from "@/super-admin/components/templates/service/useTemplate";
+import { headerFooterService } from "@/user-management/services/api/headerFooterService";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+interface Props {
+  unitId: string;
+}
+
+const LetterTemplatesTable = ({ unitId }: Props) => {
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  // Pagination is server-side: skip/take are passed to the BE so we only
+  // pull one page at a time instead of every template at once.
+  const [pageIndex, setPageIndex] = useState(0);
+  const [pageSize, setPageSize] = useState(10);
+
+  const {
+    letterTemplatesResponse,
+    count: localCount,
+    isLoading: isLocalLoading,
+    isFetching: isLocalFetching,
+    isError: isLocalError,
+    refetch,
+    createLetterTemplate,
+    updateLetterTemplate,
+    deleteLetterTemplate,
+    isCreating,
+    isUpdating,
+    isDeleting,
+  } = useLetterTemplates(unitId, {
+    skip: pageIndex * pageSize,
+    take: pageSize,
+  });
+
+  const totalPages = Math.max(1, Math.ceil(localCount / pageSize));
+
+  const {
+    templates: globalTemplatesResponse,
+    isLoading: isGlobalLoading,
+    adoptTemplate,
+    isAdoptingTemplate,
+  } = useTemplate();
+
+  const { data: headersResponse } = useQuery({
+    queryKey: ["headers", unitId],
+    queryFn: () => headerFooterService.getHeadersByUnitId(unitId),
+  });
+
+  const { data: footersResponse } = useQuery({
+    queryKey: ["footers", unitId],
+    queryFn: () => headerFooterService.getFootersByUnitId(unitId),
+  });
+
+  const localizedName = useLocalizedName();
+
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+  const [isViewDialogOpen, setIsViewDialogOpen] = useState(false);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [isAdoptDialogOpen, setIsAdoptDialogOpen] = useState(false);
+
+  const [selectedTemplate, setSelectedTemplate] = useState<any | null>(null);
+  const [selectedHeaderId, setSelectedHeaderId] = useState<string>("");
+  const [selectedFooterId, setSelectedFooterId] = useState<string>("");
+
+  const deleteTemplateName = selectedTemplate
+    ? localizedName(selectedTemplate.name)
+    : "";
+
+  const isLoading = isLocalLoading || isGlobalLoading;
+  const isError = isLocalError;
+
+  const globalTemplates = Array.isArray(globalTemplatesResponse)
+    ? globalTemplatesResponse
+    : globalTemplatesResponse?.items || [];
+  const localTemplates = letterTemplatesResponse?.items || [];
+
+  const combinedTemplates = [
+    ...globalTemplates.map((t: any) => ({ ...t, isGlobal: true })),
+    ...localTemplates.map((t: any) => ({ ...t, isGlobal: false })),
+  ];
+  const preventDialogCloseFromTinyMce = (event: Event) => {
+    const target = event.target as HTMLElement | null;
+
+    if (
+      target?.closest(
+        ".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root",
+      )
+    ) {
+      event.preventDefault();
+    }
+  };
+
+  const handleCreate = (values: any) => {
+    createLetterTemplate(values, {
+      onSuccess: (newTemplate) => {
+        toast.success(
+          `${localizedName(newTemplate.name)} ${t(
+            "contentManagement.templateSuccessMsg",
+          )}`,
+        );
+        refetch();
+        setIsCreateDialogOpen(false);
+      },
+      onError: (error) => {
+        handleError(error);
+      },
+    });
+  };
+
+  const handleUpdate = (values: any) => {
+    if (!selectedTemplate) return;
+
+    updateLetterTemplate(
+      { id: selectedTemplate.id, data: values },
+      {
+        onSuccess: () => {
+          toast.success(t("contentManagement.updateTemplate"));
+          refetch();
+          setIsEditDialogOpen(false);
+          setSelectedTemplate(null);
+        },
+        onError: (error) => {
+          handleError(error);
+        },
+      },
+    );
+  };
+
+  const handleDelete = () => {
+    if (!selectedTemplate) return;
+
+    deleteLetterTemplate(
+      { id: selectedTemplate.id },
+      {
+        onSuccess: () => {
+          toast.success(t("contentManagement.deleteTemplate"));
+          refetch();
+          setIsDeleteDialogOpen(false);
+          setSelectedTemplate(null);
+        },
+        onError: (error) => {
+          handleError(error);
+        },
+      },
+    );
+  };
+
+  const handleAdopt = () => {
+    if (!selectedTemplate || !selectedHeaderId || !selectedFooterId) {
+      toast.error(
+        t(
+          "contentManagement.pleaseSelectHeaderAndFooter",
+          "Please select header and footer",
+        ),
+      );
+      return;
+    }
+
+    adoptTemplate(
+      {
+        templateId: selectedTemplate.id,
+        headerId: selectedHeaderId,
+        footerId: selectedFooterId,
+      },
+      {
+        onSuccess: () => {
+          toast.success(
+            t(
+              "contentManagement.adoptSuccess",
+              "Successfully adopted global template",
+            ),
+          );
+          refetch();
+          setIsAdoptDialogOpen(false);
+          setSelectedTemplate(null);
+          setSelectedHeaderId("");
+          setSelectedFooterId("");
+        },
+        onError: (error) => {
+          handleError(error);
+        },
+      },
+    );
+  };
+
+  const openEditDialog = (template: any) => {
+    setSelectedTemplate(template);
+    setIsEditDialogOpen(true);
+  };
+
+  const openViewDialog = (template: any) => {
+    setSelectedTemplate(template);
+    setIsViewDialogOpen(true);
+  };
+
+  const openDeleteDialog = (template: any) => {
+    setSelectedTemplate(template);
+    setIsDeleteDialogOpen(true);
+  };
+
+  const openAdoptDialog = (template: any) => {
+    setSelectedTemplate(template);
+    setIsAdoptDialogOpen(true);
+  };
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center">
+            <FileText className="h-5 w-5 mr-2" />
+            {t("contentManagement.letterTemplate")}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            {Array(3)
+              .fill(0)
+              .map((_, index) => (
+                <Skeleton key={index} className="h-12 w-full" />
+              ))}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (isError) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center">
+            <FileText className="h-5 w-5 mr-2" />
+            {t("contentManagement.letterTemplate")}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-red-600 dark:text-red-400">
+            {t("contentManagement.failedToLoadTemplates")}
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <>
+      <Card>
+        <CardHeader>
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+            <div>
+              <CardTitle className="flex items-center">
+                <FileText className="h-5 w-5 mr-2" />
+                {t("contentManagement.letterTemplate")}
+              </CardTitle>
+              <p className="text-sm text-muted-foreground mt-1">
+                {t("contentManagement.createMsg")}
+              </p>
+            </div>
+            <Button
+              onClick={() => setIsCreateDialogOpen(true)}
+              size="sm"
+              className="shrink-0"
+            >
+              <Plus className="h-4 w-4 mr-1" />
+              {t("contentManagement.addTemplate")}
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent>
+          {combinedTemplates.length === 0 ? (
+            <div className="text-center py-8">
+              <FileText className="mx-auto mb-4 h-12 w-12 text-gray-400 dark:text-gray-500" />
+              <p className="text-gray-500 dark:text-gray-400">
+                {t("contentManagement.noTemplates")}
+              </p>
+            </div>
+          ) : (
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="min-w-[150px]">
+                      {t("common.name")}
+                    </TableHead>
+                    <TableHead className="min-w-[200px] hidden md:table-cell">
+                      {t("contentManagement.sincerelyText")}
+                    </TableHead>
+                    <TableHead className="min-w-[120px] hidden sm:table-cell">
+                      {t("common.createdDate")}
+                    </TableHead>
+                    <TableHead className="text-right min-w-[120px]">
+                      {t("common.actions")}
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {combinedTemplates.map((template) => (
+                    <TableRow
+                      key={template.id}
+                      className={
+                        template.isGlobal
+                          ? "bg-blue-50/50 hover:bg-blue-50 dark:bg-blue-950/30 dark:hover:bg-blue-900/40"
+                          : ""
+                      }
+                    >
+                      <TableCell className="font-medium">
+                        <div className="flex flex-col">
+                          <span className="flex items-center gap-2">
+                            {localizedName(template.name)}
+                            {template.isGlobal && (
+                              <span className="rounded bg-blue-100 px-2 py-0.5 text-[10px] font-semibold text-blue-700 dark:bg-blue-900/50 dark:text-blue-200">
+                                Global
+                              </span>
+                            )}
+                          </span>
+                          <span className="text-xs text-gray-500 dark:text-gray-400 md:hidden">
+                            {template.sincerelyText &&
+                            template.sincerelyText.length > 30
+                              ? `${template.sincerelyText.substring(0, 30)}...`
+                              : template.sincerelyText ||
+                                t("common.notAvailable")}
+                          </span>
+                        </div>
+                      </TableCell>
+                      <TableCell className="max-w-xs truncate hidden md:table-cell">
+                        {template.sincerelyText || t("common.notAvailable")}
+                      </TableCell>
+                      <TableCell className="hidden sm:table-cell">
+                        {template.createdAt
+                          ? new Date(template.createdAt).toLocaleDateString()
+                          : t("common.notAvailable")}
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <div className="flex items-center justify-end gap-1">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => openViewDialog(template)}
+                            title={t("contentManagement.viewTemplate")}
+                          >
+                            <Eye className="h-4 w-4" />
+                          </Button>
+
+                          {template.isGlobal ? (
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              onClick={() => openAdoptDialog(template)}
+                              title={t(
+                                "contentManagement.adoptTemplate",
+                                "Adopt Template",
+                              )}
+                              className="h-8 border-blue-200 px-3 text-blue-700 hover:bg-blue-100 hover:text-blue-800 dark:border-blue-700/60 dark:text-blue-300 dark:hover:bg-blue-900/40 dark:hover:text-blue-200"
+                            >
+                              {t("common.adopt", "Adopt")}
+                            </Button>
+                          ) : (
+                            <>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => openEditDialog(template)}
+                                title={t("contentManagement.editTemplate")}
+                              >
+                                <Edit className="h-4 w-4" />
+                              </Button>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => openDeleteDialog(template)}
+                                className="text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
+                                title={t("contentManagement.deleteTemplate")}
+                              >
+                                <Trash2 className="h-4 w-4" />
+                              </Button>
+                            </>
+                          )}
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+
+              {/* Pagination controls — apply to local templates only.
+                  Globals are typically a small fixed list and are shown
+                  in the same table on every page. */}
+              <div className="mt-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                <div className="text-sm text-muted-foreground">
+                  {t("common.page", "Page")} {pageIndex + 1} / {totalPages}
+                  {localCount > 0 && (
+                    <>
+                      {" "}
+                      • {localCount}{" "}
+                      {t("contentManagement.letterTemplate", "templates")}
+                    </>
+                  )}
+                </div>
+                <div className="flex items-center gap-2">
+                  <Select
+                    value={String(pageSize)}
+                    onValueChange={(v) => {
+                      setPageSize(Number(v));
+                      setPageIndex(0);
+                    }}
+                  >
+                    <SelectTrigger className="h-8 w-[80px]">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {[10, 20, 50, 100].map((size) => (
+                        <SelectItem key={size} value={String(size)}>
+                          {size}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    disabled={pageIndex === 0 || isLocalFetching}
+                    onClick={() => setPageIndex((p) => Math.max(0, p - 1))}
+                  >
+                    <ChevronLeft className="h-4 w-4" />
+                    {t("common.previous", "Previous")}
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    disabled={pageIndex + 1 >= totalPages || isLocalFetching}
+                    onClick={() => setPageIndex((p) => p + 1)}
+                  >
+                    {t("common.next", "Next")}
+                    <ChevronRight className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Create Dialog */}
+      <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
+        <DialogContent
+          className="max-h-[90vh] w-full max-w-[95vw] overflow-y-auto lg:max-w-[1200px] dark:border-gray-700 dark:bg-gray-900"
+          onInteractOutside={preventDialogCloseFromTinyMce}
+        >
+          <DialogHeader>
+            <DialogTitle>{t("contentManagement.createTemplate")}</DialogTitle>
+          </DialogHeader>
+          <LetterTemplateForm
+            unitId={unitId}
+            isSubmitting={isCreating}
+            onCancel={() => setIsCreateDialogOpen(false)}
+            onSubmitCreate={handleCreate}
+          />
+        </DialogContent>
+      </Dialog>
+
+      {/* Edit Dialog */}
+      <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+        <DialogContent
+          className="max-h-[90vh] w-full max-w-[95vw] overflow-y-auto lg:max-w-[1200px] dark:border-gray-700 dark:bg-gray-900"
+          onInteractOutside={preventDialogCloseFromTinyMce}
+        >
+          <DialogHeader>
+            <DialogTitle>{t("contentManagement.editTemplate")}</DialogTitle>
+          </DialogHeader>
+          <LetterTemplateForm
+            unitId={unitId}
+            template={selectedTemplate}
+            isSubmitting={isUpdating}
+            onCancel={() => {
+              setIsEditDialogOpen(false);
+              setSelectedTemplate(null);
+            }}
+            onSubmitCreate={handleUpdate}
+          />
+        </DialogContent>
+      </Dialog>
+
+      {/* View Dialog */}
+      <Dialog open={isViewDialogOpen} onOpenChange={setIsViewDialogOpen}>
+        <DialogContent className="max-h-[90vh] w-full max-w-[95vw] overflow-y-auto lg:max-w-[1200px] dark:border-gray-700 dark:bg-gray-900">
+          <DialogHeader>
+            <DialogTitle>{t("contentManagement.viewTemplate")}</DialogTitle>
+          </DialogHeader>
+          {selectedTemplate && (
+            <div className="space-y-4">
+              <div>
+                <label className="text-sm font-medium text-gray-600 dark:text-gray-300">
+                  {t("common.name")}
+                </label>
+                <p className="mt-1 text-sm text-gray-900 dark:text-gray-100">
+                  {localizedName(selectedTemplate.name)}
+                </p>
+              </div>
+              <div>
+                <label className="text-sm font-medium text-gray-600 dark:text-gray-300">
+                  {t("contentManagement.sincerelyText")}
+                </label>
+                <p className="mt-1 text-sm text-gray-900 dark:text-gray-100">
+                  {selectedTemplate.sincerelyText || t("common.notAvailable")}
+                </p>
+              </div>
+              <div>
+                <label className="text-sm font-medium text-gray-600 dark:text-gray-300">
+                  {t("contentManagement.body")}
+                </label>
+                <div
+                  className="mt-1 max-h-60 overflow-y-auto rounded-md border bg-gray-50 p-3 text-sm text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
+                  dangerouslySetInnerHTML={{ __html: selectedTemplate.body }}
+                />
+              </div>
+              <div className="flex justify-end">
+                <Button onClick={() => setIsViewDialogOpen(false)}>
+                  {t("common.close")}
+                </Button>
+              </div>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      {/* Adopt Dialog */}
+      <Dialog open={isAdoptDialogOpen} onOpenChange={setIsAdoptDialogOpen}>
+        <DialogContent className="max-w-md dark:border-gray-700 dark:bg-gray-900">
+          <DialogHeader>
+            <DialogTitle>
+              {t("contentManagement.adoptTemplate", "Adopt Template")}
+            </DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div>
+              <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                {t("contentManagement.selectHeader", "Select Header")}
+              </label>
+              <Select
+                value={selectedHeaderId}
+                onValueChange={setSelectedHeaderId}
+              >
+                <SelectTrigger>
+                  <SelectValue
+                    placeholder={t(
+                      "contentManagement.selectHeader",
+                      "Select Header",
+                    )}
+                  />
+                </SelectTrigger>
+                <SelectContent>
+                  {headersResponse?.data?.items?.map((header: any) => (
+                    <SelectItem key={header.id} value={header.id}>
+                      {localizedName(header.name)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                {t("contentManagement.selectFooter", "Select Footer")}
+              </label>
+              <Select
+                value={selectedFooterId}
+                onValueChange={setSelectedFooterId}
+              >
+                <SelectTrigger>
+                  <SelectValue
+                    placeholder={t(
+                      "contentManagement.selectFooter",
+                      "Select Footer",
+                    )}
+                  />
+                </SelectTrigger>
+                <SelectContent>
+                  {footersResponse?.data?.items?.map((footer: any) => (
+                    <SelectItem key={footer.id} value={footer.id}>
+                      {localizedName(footer.name)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <div className="flex justify-end gap-2">
+            <Button
+              variant="outline"
+              onClick={() => setIsAdoptDialogOpen(false)}
+            >
+              {t("common.cancel")}
+            </Button>
+            <Button
+              onClick={handleAdopt}
+              disabled={
+                isAdoptingTemplate || !selectedHeaderId || !selectedFooterId
+              }
+            >
+              {isAdoptingTemplate
+                ? t("common.adopting", "Adopting...")
+                : t("common.adopt", "Adopt")}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog
+        open={isDeleteDialogOpen}
+        onOpenChange={setIsDeleteDialogOpen}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t("contentManagement.deleteTemplate")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t("contentManagement.deleteTemplateConfirm", {
+                name: deleteTemplateName,
+              })
+                // Fallback if resources still use the legacy `{name}` placeholder.
+                .replace("{{name}}", deleteTemplateName)
+                .replace("{name}", deleteTemplateName)}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              disabled={isDeleting}
+              className="bg-red-600 hover:bg-red-700"
+            >
+              {isDeleting ? t("common.deleting") : t("common.delete")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+};
+
+export default LetterTemplatesTable;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/PrefixAndSuffixCard.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/content/PrefixAndSuffixCard.tsx
new file mode 100644
index 000000000..47cd28687
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/content/PrefixAndSuffixCard.tsx
@@ -0,0 +1,653 @@
+// PrefixManagement.tsx
+import React, { useState, useEffect, useMemo, useRef } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { Card, CardHeader, CardTitle } from "@/shared/common/ui/card";
+import { Button } from "@/shared/common/ui/button";
+import { Plus } from "lucide-react";
+import { usePositions } from "@/user-management/hooks/usePosition";
+import { t } from "i18next";
+import { PrefixSuffixTable } from "./PrefixSuffixTable";
+import { PrefixModal } from "./PrefixModal";
+import {
+  useCCPrefixesList,
+  useCCSuffixesList,
+  useDeletePrefix,
+  useDeleteSuffix,
+  usePositionPrefixesList,
+  usePrefixesList,
+  useSuffixesList,
+} from "@/user-management/hooks/usePrefixSuffixes";
+import {
+  useGetReferenceNumbers,
+} from "@/shared/hooks/useReferenceNumberPrefixes";
+import { useDeleteReferenceNumber } from "@/shared/hooks/useReferenceNumberPrefixes";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { toast } from "sonner";
+import { TagBasedReferenceNumbers } from "./TagBasedReferenceNumbers";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+
+export type PrefixTabType =
+  | "internal"
+  | "external"
+  | "internal_memo"
+  | "branch"
+  | "tag-based-reference"
+  | "referenceNumber"
+  | "positionPrefix";
+
+const tabs: { id: PrefixTabType; label: string }[] = [
+  { id: "internal", label: "nav.internal" },
+  { id: "external", label: "nav.external" },
+  { id: "internal_memo", label: "nav.internal_memo" },
+  { id: "branch", label: "nav.branch" },
+  { id: "tag-based-reference", label: "nav.tagBasedReference" },
+  { id: "referenceNumber", label: "userRecord.Reference" },
+  { id: "positionPrefix", label: "contentManagement.positionPrefixes" },
+];
+
+interface PrefixManagementProps {
+  unitId: string;
+  initialTab?: PrefixTabType;
+}
+
+const getDefaultCardForTab = (tab: PrefixTabType): string => {
+  if (tab === "positionPrefix") return "internalPrefix";
+  if (tab === "referenceNumber") return "reference";
+  return "prefix";
+};
+
+export const PrefixAndSuffix = ({
+  unitId,
+  initialTab = "internal",
+}: PrefixManagementProps) => {
+  const { handleError } = useErrorHandler(t);
+  const [activeTab, setActiveTab] = useState<PrefixTabType>(initialTab);
+  const [activeCard, setActiveCard] = useState<string>(
+    getDefaultCardForTab(initialTab),
+  );
+  const [modalOpen, setModalOpen] = useState(false);
+  const [modalConfig, setModalConfig] = useState<{
+    cardType: string;
+    recordType: PrefixTabType;
+    editingItem?: any;
+  } | null>(null);
+
+  const queryClient = useQueryClient();
+  const { mutateAsync: deletePrefix } = useDeletePrefix();
+  const { mutateAsync: deleteSuffix } = useDeleteSuffix();
+  const { mutateAsync: deleteReferenceNumber, isPending: isDeletingReference } =
+    useDeleteReferenceNumber();
+  const [pendingReferenceDelete, setPendingReferenceDelete] = useState<{
+    id: string;
+    type: string;
+  } | null>(null);
+
+  // Fetch positions for the position prefix tab
+  const { usePositionListByUnitId } = usePositions();
+  const { data: positionsResponse } = usePositionListByUnitId(unitId, {
+    take: 1000,
+    skip: 0,
+  });
+  const positions = positionsResponse?.items || [];
+
+  // Update active tab when the sidebar sub‑menu changes
+  useEffect(() => {
+    setActiveTab(initialTab);
+    setActiveCard(getDefaultCardForTab(initialTab));
+  }, [initialTab]);
+
+  useEffect(() => {
+    setActiveCard(getDefaultCardForTab(activeTab));
+  }, [activeTab]);
+
+  const handleAddClick = (cardType: string) => {
+    setModalConfig({ cardType, recordType: activeTab });
+    setModalOpen(true);
+  };
+
+  const handleEdit = (item: any) => {
+    setModalConfig({
+      cardType: item.type, // e.g., "prefix", "suffix", "reference"
+      recordType: activeTab,
+      editingItem: item,
+    });
+    setModalOpen(true);
+  };
+
+  const handleDelete = async (id: string, type: string, recordType: string) => {
+    console.log("Delete requested for:", { id, type, recordType });
+    const isReferenceType =
+      type === "reference" ||
+      type === "externalReference" ||
+      type === "internalMemoReference";
+
+    if (isReferenceType) {
+      setPendingReferenceDelete({ id, type });
+      return;
+    }
+
+    const isPrefixType =
+      type === "prefix" ||
+      type === "prefixCC" ||
+      type === "internalPrefix" ||
+      type === "externalPrefix" ||
+      type === "internalMemoPrefix";
+    const isForCC = type === "prefixCC" || type === "suffixCC";
+    const resolvedRecordTypeKey =
+      recordType ||
+      (type === "internalPrefix"
+        ? "internal"
+        : type === "externalPrefix"
+          ? "external"
+          : type === "internalMemoPrefix"
+            ? "internal_memo"
+            : activeTab);
+
+    try {
+      if (isPrefixType) {
+        await deletePrefix({
+          id,
+          unitId,
+          recordTypeKey: resolvedRecordTypeKey,
+          isForCC,
+        });
+
+        if (activeTab === "positionPrefix") {
+          queryClient.invalidateQueries({
+            queryKey: ["prefixes-by-position", unitId, resolvedRecordTypeKey],
+          });
+        }
+      } else {
+        await deleteSuffix({
+          id,
+          unitId,
+          recordTypeKey: resolvedRecordTypeKey,
+          isForCC,
+        });
+      }
+
+      queryClient.invalidateQueries({ queryKey: ["prefixSuffix"] });
+      toast.success(t("contentManagement.deleted"));
+    } catch (error) {
+      void handleError(error);
+    }
+  };
+
+  const confirmReferenceDelete = async () => {
+    if (!pendingReferenceDelete) return;
+    if (!pendingReferenceDelete.id) {
+      toast.error(
+        t(
+          "prefixes.deleteMissingId",
+          "Unable to delete: missing configuration id.",
+        ),
+      );
+      return;
+    }
+    const sequenceType =
+      pendingReferenceDelete.type === "externalReference"
+        ? "external"
+        : pendingReferenceDelete.type === "internalMemoReference"
+          ? "internal_memo"
+          : "internal";
+    try {
+      await deleteReferenceNumber({
+        unitId,
+        id: pendingReferenceDelete.id,
+        payload: { recordSequenceTypes: [sequenceType] },
+      });
+      setPendingReferenceDelete(null);
+      toast.success(t("contentManagement.deleted"));
+    } catch (error) {
+      void handleError(error);
+    }
+  };
+
+  const handleModalClose = () => {
+    setModalOpen(false);
+    setModalConfig(null);
+  };
+
+  const handleModalSuccess = () => {
+    const targetCardType = modalConfig?.cardType ?? activeCard;
+    const targetTab = modalConfig?.recordType ?? activeTab;
+
+    const targetIsCC =
+      targetCardType === "prefixCC" || targetCardType === "suffixCC";
+    const targetIsPrefix =
+      targetCardType === "prefix" ||
+      targetCardType === "prefixCC" ||
+      targetCardType === "internalPrefix" ||
+      targetCardType === "externalPrefix" ||
+      targetCardType === "internalMemoPrefix" ||
+      targetTab === "referenceNumber";
+
+    const targetRecordTypeKey =
+      targetTab === "referenceNumber"
+        ? targetCardType
+        : targetTab === "positionPrefix"
+          ? targetCardType === "internalPrefix"
+            ? "internal"
+            : targetCardType === "internalMemoPrefix"
+              ? "internal_memo"
+              : "external"
+          : targetTab;
+
+    if (targetIsPrefix) {
+      if (targetTab === "positionPrefix") {
+        queryClient.invalidateQueries({
+          queryKey: ["prefixes-by-position", unitId, targetRecordTypeKey],
+        });
+      }
+      queryClient.invalidateQueries({
+        queryKey: ["prefixes", unitId, targetRecordTypeKey, { cc: targetIsCC }],
+      });
+    } else {
+      queryClient.invalidateQueries({
+        queryKey: ["suffixes", unitId, targetRecordTypeKey, { cc: targetIsCC }],
+      });
+    }
+
+    // Keep old key invalidation for legacy consumers.
+    queryClient.invalidateQueries({ queryKey: ["prefixSuffix"] });
+    handleModalClose();
+  };
+
+  // Define cards for the active tab
+  const getCards = () => {
+    if (activeTab === "positionPrefix") {
+      return [
+        { id: "internalPrefix", label: "contentManagement.internalPrefix" },
+        { id: "externalPrefix", label: "contentManagement.externalPrefix" },
+        {
+          id: "internalMemoPrefix",
+          label: "contentManagement.internalMemoPrefix",
+        },
+      ];
+    }
+    if (activeTab === "referenceNumber") {
+      return [
+        { id: "reference", label: "contentManagement.reference" },
+        {
+          id: "externalReference",
+          label: "contentManagement.externalReference",
+        },
+        {
+          id: "internalMemoReference",
+          label: "contentManagement.internalMemoReference",
+        },
+      ];
+    }
+    // internal, external, internal_memo
+    return [
+      { id: "prefix", label: "contentManagement.prefix" },
+      { id: "suffix", label: "contentManagement.suffix" },
+      { id: "prefixCC", label: "contentManagement.prefixCC" },
+      { id: "suffixCC", label: "contentManagement.suffixCC" },
+    ];
+  };
+
+  const cards = getCards();
+  useEffect(() => {
+    if (!cards.some((card) => card.id === activeCard)) {
+      setActiveCard(cards[0]?.id || getDefaultCardForTab(activeTab));
+    }
+  }, [cards, activeCard, activeTab]);
+
+  const isCC = activeCard === "prefixCC" || activeCard === "suffixCC";
+  const isReferenceTab = activeTab === "referenceNumber";
+  const isPositionPrefixTab = activeTab === "positionPrefix";
+  const isTagBasedTab = activeTab === "tag-based-reference";
+  const isPrefix =
+    activeCard === "prefix" ||
+    activeCard === "prefixCC" ||
+    activeCard === "internalPrefix" ||
+    activeCard === "externalPrefix" ||
+    activeCard === "internalMemoPrefix" ||
+    isReferenceTab;
+
+  const positionRecordTypeKey =
+    activeCard === "internalPrefix"
+      ? "internal"
+      : activeCard === "externalPrefix"
+        ? "external"
+        : activeCard === "internalMemoPrefix"
+          ? "internal_memo"
+          : "";
+  const recordTypeKey =
+    activeTab === "positionPrefix" ? positionRecordTypeKey : activeTab;
+
+  const {
+    data: referenceNumbersData,
+    isLoading: isLoadingReferenceNumbers,
+    error: referenceNumbersError,
+  } = useGetReferenceNumbers(isReferenceTab ? unitId : "");
+
+  const {
+    data: prefixesData,
+    isLoading: isLoadingPrefixes,
+    error: prefixesError,
+  } = usePrefixesList(
+    unitId,
+    isPrefix &&
+      !isCC &&
+      !isReferenceTab &&
+      !isPositionPrefixTab &&
+      !isTagBasedTab
+      ? recordTypeKey
+      : "",
+    0,
+    1000,
+  );
+  const {
+    data: positionPrefixesData,
+    isLoading: isLoadingPositionPrefixes,
+    error: positionPrefixesError,
+  } = usePositionPrefixesList(
+    unitId,
+    isPositionPrefixTab ? positionRecordTypeKey : "",
+    0,
+    1000,
+  );
+  const {
+    data: ccPrefixesData,
+    isLoading: isLoadingCCPrefixes,
+    error: ccPrefixesError,
+  } = useCCPrefixesList(
+    unitId,
+    isPrefix && isCC && !isReferenceTab ? recordTypeKey : "",
+    0,
+    1000,
+  );
+  const {
+    data: suffixesData,
+    isLoading: isLoadingSuffixes,
+    error: suffixesError,
+  } = useSuffixesList(
+    unitId,
+    !isPrefix && !isCC && !isReferenceTab ? recordTypeKey : "",
+    0,
+    1000,
+  );
+  const {
+    data: ccSuffixesData,
+    isLoading: isLoadingCCSuffixes,
+    error: ccSuffixesError,
+  } = useCCSuffixesList(
+    unitId,
+    !isPrefix && isCC && !isReferenceTab ? recordTypeKey : "",
+    0,
+    1000,
+  );
+
+  const firstQueryError = useMemo(
+    () =>
+      [
+        referenceNumbersError,
+        positionPrefixesError,
+        prefixesError,
+        ccPrefixesError,
+        suffixesError,
+        ccSuffixesError,
+      ].find(Boolean),
+    [
+      referenceNumbersError,
+      positionPrefixesError,
+      prefixesError,
+      ccPrefixesError,
+      suffixesError,
+      ccSuffixesError,
+    ],
+  );
+
+  const lastHandledErrorRef = useRef<unknown>(null);
+  useEffect(() => {
+    if (!firstQueryError || firstQueryError === lastHandledErrorRef.current) {
+      return;
+    }
+    lastHandledErrorRef.current = firstQueryError;
+    void handleError(firstQueryError);
+  }, [firstQueryError, handleError]);
+  const referenceNumbers = referenceNumbersData?.data || [];
+  const referenceNumberPrefix = referenceNumbers?.find(
+    (rn: any) => rn.name === "referenceNumberPrefix",
+  );
+
+  const externalReferenceNumberPrefix = referenceNumbers?.find(
+    (rn: any) => rn.name === "externalReferenceNumberPrefix",
+  );
+
+  const internalMemoReferenceNumberPrefix = referenceNumbers?.find(
+    (rn: any) => rn.name === "internalMemoReferenceNumberPrefix",
+  );
+
+  const getAmValue = (value: any): string => {
+    if (!value) return "";
+
+    if (typeof value === "string") {
+      try {
+        const parsed = JSON.parse(value);
+        return parsed?.am ?? value;
+      } catch {
+        return value;
+      }
+    }
+
+    if (typeof value === "object") {
+      return value?.am ?? "";
+    }
+
+    return "";
+  };
+  const branchItems = [
+    {
+      id: unitId,
+      type: "reference",
+      recordTypeKey: "reference",
+      isForCC: false,
+      name: {
+        am: getAmValue(referenceNumberPrefix?.number),
+        en: getAmValue(referenceNumberPrefix?.number?.en),
+      },
+      count: referenceNumberPrefix?.count ?? 0,
+      sequenceId: referenceNumberPrefix?.sequenceId,
+    },
+    {
+      id: unitId,
+      type: "externalReference",
+      recordTypeKey: "externalReference",
+      isForCC: false,
+      name: {
+        am: getAmValue(externalReferenceNumberPrefix?.number?.am),
+        en: getAmValue(externalReferenceNumberPrefix?.number?.en),
+      },
+      count: externalReferenceNumberPrefix?.count ?? 0,
+      sequenceId: externalReferenceNumberPrefix?.sequenceId,
+    },
+    {
+      id: unitId,
+      type: "internalMemoReference",
+      recordTypeKey: "internalMemoReference",
+      isForCC: false,
+      name: {
+        am: getAmValue(internalMemoReferenceNumberPrefix?.number?.am),
+        en: getAmValue(internalMemoReferenceNumberPrefix?.number?.en),
+      },
+      count: internalMemoReferenceNumberPrefix?.count ?? 0,
+      sequenceId: internalMemoReferenceNumberPrefix?.sequenceId,
+    },
+  ].filter((item) => item.type === activeCard);
+
+  const activeResponse = isPositionPrefixTab
+    ? positionPrefixesData
+    : isPrefix
+      ? isCC
+        ? ccPrefixesData
+        : prefixesData
+      : isCC
+        ? ccSuffixesData
+        : suffixesData;
+
+  const items = isReferenceTab
+    ? branchItems
+    : activeResponse?.data?.items?.map((item: any) => ({
+        ...item,
+        type:
+          activeTab === "positionPrefix"
+            ? item.recordTypeKey === "internal"
+              ? "internalPrefix"
+              : item.recordTypeKey === "internal_memo"
+                ? "internalMemoPrefix"
+                : "externalPrefix"
+            : isPrefix
+              ? isCC
+                ? "prefixCC"
+                : "prefix"
+              : isCC
+                ? "suffixCC"
+                : "suffix",
+        isForCC: isCC || item.isForCC,
+      })) || [];
+
+  const isLoading =
+    isLoadingReferenceNumbers ||
+    isLoadingPositionPrefixes ||
+    isLoadingPrefixes ||
+    isLoadingCCPrefixes ||
+    isLoadingSuffixes ||
+    isLoadingCCSuffixes;
+
+  return (
+    <div className="space-y-6 p-4">
+      {/* Tabs */}
+      <div className="flex border-b border-gray-200 dark:border-gray-700">
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => {
+              setActiveTab(tab.id);
+              setActiveCard(getDefaultCardForTab(tab.id));
+            }}
+            className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+              activeTab === tab.id
+                ? "border-purple-600 text-purple-600 dark:text-purple-400"
+                : "border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600"
+            }`}
+          >
+            {t(tab.label)}
+          </button>
+        ))}
+      </div>
+
+      {/* Cards */}
+      {activeTab === "tag-based-reference" ? (
+        <TagBasedReferenceNumbers unitId={unitId} className="w-full" />
+      ) : (
+        <>
+          <div className="flex flex-wrap gap-4">
+            {cards.map((card) => (
+              <Card
+                key={card.id}
+                onClick={() => setActiveCard(card.id)}
+                className={`inline-flex w-fit min-w-[260px] max-w-full shadow-sm hover:shadow-md transition-shadow cursor-pointer dark:bg-gray-800 dark:border-gray-700 ${
+                  activeCard === card.id
+                    ? "ring-2 ring-purple-600 dark:ring-purple-400"
+                    : ""
+                }`}
+              >
+                <CardHeader className="pb-2 items-center">
+                  <CardTitle className="text-sm font-medium text-gray-700 dark:text-gray-200 text-center whitespace-nowrap">
+                    {t(card.label)}
+                  </CardTitle>
+                </CardHeader>
+              </Card>
+            ))}
+          </div>
+
+          <div className="flex justify-end mb-4">
+            <Button onClick={() => handleAddClick(activeCard)}>
+              <Plus className="h-4 w-4 mr-2" />
+              {t("contentManagement.add")}
+            </Button>
+          </div>
+
+          {/* Table */}
+          <PrefixSuffixTable
+            items={items}
+            isLoading={isLoading}
+            onEdit={handleEdit}
+            onDelete={handleDelete}
+            showPositionColumn={activeTab === "positionPrefix"}
+            showCountColumn={
+              activeTab === "positionPrefix" || activeTab === "referenceNumber"
+            }
+            positions={positions}
+          />
+
+          {/* Modal */}
+          {modalOpen && modalConfig && (
+            <PrefixModal
+              open={modalOpen}
+              onClose={handleModalClose}
+              onSuccess={handleModalSuccess}
+              unitId={unitId}
+              cardType={modalConfig.cardType}
+              recordType={modalConfig.recordType}
+              editingItem={modalConfig.editingItem}
+              positions={positions}
+            />
+          )}
+
+          <AlertDialog
+            open={!!pendingReferenceDelete}
+            onOpenChange={(open) => {
+              if (!open && !isDeletingReference) {
+                setPendingReferenceDelete(null);
+              }
+            }}
+          >
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>
+                  {t(
+                    "prefixes.deleteConfirmTitle",
+                    "Delete reference number prefix?",
+                  )}
+                </AlertDialogTitle>
+                <AlertDialogDescription>
+                  {t(
+                    "prefixes.deleteConfirmDescription",
+                    "Are you sure you want to delete this prefix? This action cannot be undone.",
+                  )}
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel disabled={isDeletingReference}>
+                  {t("common.cancel") || "Cancel"}
+                </AlertDialogCancel>
+                <AlertDialogAction
+                  onClick={confirmReferenceDelete}
+                  disabled={isDeletingReference}
+                  className="bg-destructive text-white hover:bg-destructive/90"
+                >
+                  {isDeletingReference
+                    ? t("contentManagement.loading", "Loading...")
+                    : t("common.delete", "Delete") || "Delete"}
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        </>
+      )}
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/PrefixModal.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/content/PrefixModal.tsx
new file mode 100644
index 000000000..5fb47f067
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/content/PrefixModal.tsx
@@ -0,0 +1,409 @@
+// PrefixModal.tsx
+import React, { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import { Label } from "@radix-ui/react-label";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  CreatePrefixPayload,
+  CreateSuffixPayload,
+  prefixSuffixService,
+} from "@/user-management/services/api/prefixSuffixService";
+import { t } from "i18next";
+import { PrefixTabType } from "./PrefixAndSuffixCard";
+import { toast } from "sonner";
+import {
+  useAddReferenceNumber,
+  useGetReferenceNumbers,
+  useUpdateExternalReferencePrefix,
+  useUpdateInternalMemoReferencePrefix,
+} from "@/shared/hooks/useReferenceNumberPrefixes";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { SingleSelect } from "@/shared/common/ui/single-select";
+
+interface PrefixModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  unitId: string;
+  cardType: string; // e.g., "prefix", "suffix", "prefixCC", "reference", "internalPrefix", etc.
+  recordType: PrefixTabType;
+  editingItem?: any;
+  positions?: any[];
+}
+
+export const PrefixModal = ({
+  open,
+  onClose,
+  onSuccess,
+  unitId,
+  cardType,
+  recordType,
+  editingItem,
+  positions = [],
+}: PrefixModalProps) => {
+  const queryClient = useQueryClient();
+  const isEditing = !!editingItem;
+
+  // Form state
+  const [nameAm, setNameAm] = useState("");
+  const [nameEn, setNameEn] = useState("");
+  const [positionId, setPositionId] = useState("");
+
+  // Determine if this is a reference type
+  const isReference = [
+    "reference",
+    "externalReference",
+    "internalMemoReference",
+  ].includes(cardType);
+  const isPositionPrefix = recordType === "positionPrefix";
+  const isCC = cardType.includes("CC");
+  const isReferenceCard = cardType === "reference";
+  const isExternalReferenceCard = cardType === "externalReference";
+  const isInternalMemoReferenceCard = cardType === "internalMemoReference";
+  const positionOptions = positions
+    .filter((pos) => Boolean(pos?.id))
+    .map((pos) => ({
+      value: pos.id,
+      label: pos.name?.en || pos.name?.am || pos.id,
+    }));
+  const positionRecordTypeKey =
+    cardType === "internalPrefix"
+      ? "internal"
+      : cardType === "externalPrefix"
+        ? "external"
+        : cardType === "internalMemoPrefix"
+          ? "internal_memo"
+          : editingItem?.recordTypeKey;
+
+  const { data: referenceNumbersData } = useGetReferenceNumbers(
+    isReference ? unitId : "",
+  );
+  const addReferenceNumberMutation = useAddReferenceNumber();
+  const updateInternalMemoReferenceMutation =
+    useUpdateInternalMemoReferencePrefix();
+  const updateExternalReferenceMutation = useUpdateExternalReferencePrefix();
+  const { handleError } = useErrorHandler(t);
+
+  const referenceNumbers =
+    ((referenceNumbersData?.data as any)?.items?.[0] as any) ||
+    referenceNumbersData?.data ||
+    {};
+
+  const isArray = Array.isArray(referenceNumbers);
+  const referenceNumberPrefix =
+    isArray &&
+    referenceNumbers?.find((rn: any) => rn.name === "referenceNumberPrefix");
+
+  const externalReferenceNumberPrefix =
+    isArray &&
+    referenceNumbers?.find(
+      (rn: any) => rn.name === "externalReferenceNumberPrefix",
+    );
+
+  const internalMemoReferenceNumberPrefix =
+    isArray &&
+    referenceNumbers?.find(
+      (rn: any) => rn.name === "internalMemoReferenceNumberPrefix",
+    );
+
+  // Populate form when editing
+  useEffect(() => {
+    if (editingItem) {
+      if (isReference) {
+        setNameAm(editingItem.name?.am || "");
+        setNameEn(editingItem.name?.en || "");
+      } else {
+        setNameAm(editingItem.name?.am || "");
+        setNameEn(editingItem.name?.en || "");
+      }
+      setPositionId(editingItem.positionId || "");
+    } else {
+      // Reset
+      setNameAm("");
+      setNameEn("");
+      setPositionId("");
+    }
+  }, [editingItem, isReference]);
+
+  useEffect(() => {
+    if (!isReference || editingItem) return;
+
+    if (isReferenceCard) {
+      setNameAm(referenceNumbers.referenceNumberPrefix || "");
+      setNameEn(referenceNumbers.referenceNumberPrefix || "");
+      return;
+    }
+    if (isExternalReferenceCard) {
+      setNameAm(referenceNumbers.externalReferenceNumberPrefix || "");
+      setNameEn(referenceNumbers.externalReferenceNumberPrefix || "");
+
+      return;
+    }
+    if (isInternalMemoReferenceCard) {
+      setNameAm(referenceNumbers.internalMemoReferenceNumberPrefix || "");
+      setNameEn(referenceNumbers.internalMemoReferenceNumberPrefix || "");
+    }
+  }, [
+    editingItem,
+    isReference,
+    isReferenceCard,
+    isExternalReferenceCard,
+    isInternalMemoReferenceCard,
+    referenceNumbers.referenceNumberPrefix,
+    referenceNumbers.externalReferenceNumberPrefix,
+    referenceNumbers.internalMemoReferenceNumberPrefix,
+  ]);
+
+  // Mutation for saving
+  const { mutate: save, isPending } = useMutation({
+    mutationFn: async () => {
+      const baseRecordTypeKey = recordType;
+      const isPrefixOperation =
+        isReference ||
+        isPositionPrefix ||
+        cardType === "prefix" ||
+        cardType === "prefixCC" ||
+        cardType === "internalPrefix" ||
+        cardType === "externalPrefix" ||
+        cardType === "internalMemoPrefix";
+
+      let prefixPayload: CreatePrefixPayload | undefined;
+      let suffixPayload: CreateSuffixPayload | undefined;
+
+      if (isReference) {
+        if (isReferenceCard) {
+          await addReferenceNumberMutation.mutateAsync({
+            unitId,
+            payload: {
+              referenceNumberPrefix: {
+                am: nameAm,
+                en: nameEn,
+              },
+            },
+          });
+          return;
+        }
+
+        if (isExternalReferenceCard) {
+          await updateExternalReferenceMutation.mutateAsync({
+            unitId,
+            payload: {
+              externalReferenceNumberPrefix: {
+                am: nameAm,
+                en: nameEn,
+              },
+            },
+          });
+          return;
+        }
+
+        if (isInternalMemoReferenceCard) {
+          await updateInternalMemoReferenceMutation.mutateAsync({
+            unitId,
+            payload: {
+              internalMemoReferenceNumberPrefix: {
+                am: nameAm,
+                en: nameEn,
+              },
+            },
+          });
+          return;
+        }
+      } else if (isPositionPrefix) {
+        if (
+          positionRecordTypeKey !== "internal" &&
+          positionRecordTypeKey !== "external" &&
+          positionRecordTypeKey !== "internal_memo"
+        ) {
+          throw new Error(
+            "Position prefix requires internal, external, or internal_memo recordTypeKey",
+          );
+        }
+
+        prefixPayload = {
+          unitId,
+          recordTypeKey: positionRecordTypeKey,
+          isForCC: false,
+          positionId,
+          name: { am: nameAm, en: nameEn },
+        };
+      } else {
+        const commonPayload = {
+          unitId,
+          recordTypeKey: baseRecordTypeKey,
+          isForCC: isCC,
+          name: { am: nameAm, en: nameEn },
+        };
+
+        if (cardType === "suffix" || cardType === "suffixCC") {
+          suffixPayload = commonPayload;
+        } else {
+          prefixPayload = commonPayload;
+        }
+      }
+
+      if (isEditing) {
+        if (isPrefixOperation && prefixPayload) {
+          return prefixSuffixService.editPrefix(editingItem.id, prefixPayload);
+        }
+        if (suffixPayload) {
+          return prefixSuffixService.editSuffix(editingItem.id, suffixPayload);
+        }
+        throw new Error("Invalid prefix/suffix payload for update");
+      }
+
+      if (isPrefixOperation && prefixPayload) {
+        return prefixSuffixService.createPrefix(prefixPayload);
+      }
+      if (suffixPayload) {
+        return prefixSuffixService.createSuffix(suffixPayload);
+      }
+      throw new Error("Invalid prefix/suffix payload for create");
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["prefixSuffix"] });
+      toast.success(t("msg.successfullyCompleted"));
+      onSuccess();
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    save();
+  };
+
+  const isValid = () => {
+    if (isReference) return nameAm.trim() !== "" && nameEn.trim() !== "";
+
+    if (isPositionPrefix)
+      return nameAm.trim() !== "" && nameEn.trim() !== "" && positionId;
+    return nameAm.trim() !== "" && nameEn.trim() !== "";
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[500px] dark:bg-gray-800">
+        <DialogHeader>
+          <DialogTitle className="dark:text-white">
+            {isEditing
+              ? t("contentManagement.edit")
+              : t("contentManagement.add")}{" "}
+            {t(`contentManagement.${cardType}`)}
+          </DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {isReference ? (
+            <div className="space-y-2">
+              <div className="space-y-2">
+                <Label htmlFor="nameAm" className="dark:text-gray-200">
+                  {t("contentManagement.amharicName")} *
+                </Label>
+                <Input
+                  id="nameAm"
+                  value={nameAm}
+                  onChange={(e) => setNameAm(e.target.value)}
+                  placeholder={t("contentManagement.amharicName")}
+                  disabled={isPending}
+                  className="dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="nameEn" className="dark:text-gray-200">
+                  {t("contentManagement.englishName")} *
+                </Label>
+                <Input
+                  id="nameEn"
+                  value={nameEn}
+                  onChange={(e) => setNameEn(e.target.value)}
+                  placeholder={t("contentManagement.englishName")}
+                  disabled={isPending}
+                  className="dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+                />
+              </div>
+            </div>
+          ) : (
+            <>
+              <div className="space-y-2">
+                <Label htmlFor="nameAm" className="dark:text-gray-200">
+                  {t("contentManagement.amharicName")} *
+                </Label>
+                <Input
+                  id="nameAm"
+                  value={nameAm}
+                  onChange={(e) => setNameAm(e.target.value)}
+                  placeholder={t("contentManagement.amharicName")}
+                  disabled={isPending}
+                  className="dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="nameEn" className="dark:text-gray-200">
+                  {t("contentManagement.englishName")} *
+                </Label>
+                <Input
+                  id="nameEn"
+                  value={nameEn}
+                  onChange={(e) => setNameEn(e.target.value)}
+                  placeholder={t("contentManagement.englishName")}
+                  disabled={isPending}
+                  className="dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+                />
+              </div>
+            </>
+          )}
+
+          {isPositionPrefix && (
+            <div className="space-y-2">
+              <Label htmlFor="position" className="dark:text-gray-200">
+                {t("contentManagement.position")} *
+              </Label>
+              <SingleSelect
+                options={positionOptions}
+                value={positionId}
+                onValueChange={setPositionId}
+                placeholder={t("contentManagement.selectPosition")}
+                className={isPending ? "pointer-events-none opacity-60" : ""}
+              />
+            </div>
+          )}
+
+          <div className="flex justify-end gap-2 pt-4">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={onClose}
+              disabled={isPending}
+            >
+              {t("common.Cancel")}
+            </Button>
+            <Button
+              type="submit"
+              disabled={!isValid() || isPending}
+              className="bg-purple-600 hover:bg-purple-700"
+            >
+              {isPending
+                ? t("contentManagement.saving")
+                : (isReferenceCard &&
+                      (referenceNumbers.referenceNumberPrefix ||
+                        referenceNumbers.externalReferenceNumberPrefix ||
+                        referenceNumbers.internalMemoReferenceNumberPrefix)) ||
+                    isEditing
+                  ? t("common.update")
+                  : t("common.save")}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/PrefixSuffix/PrefixAndSuffix.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/content/PrefixSuffix/PrefixAndSuffix.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/PrefixSuffix/PrefixSuffixForm.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/content/PrefixSuffix/PrefixSuffixForm.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/PrefixSuffix/PrefixSuffixTable.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/content/PrefixSuffix/PrefixSuffixTable.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/PrefixSuffix/hooks/usePrefixSuffixMutations.ts b/apps/edr-freight-web/backoffice/src/user-management/components/content/PrefixSuffix/hooks/usePrefixSuffixMutations.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/PrefixSuffixTable.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/content/PrefixSuffixTable.tsx
new file mode 100644
index 000000000..b3e12907c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/content/PrefixSuffixTable.tsx
@@ -0,0 +1,246 @@
+// PrefixSuffixTable.tsx
+import React, { useState } from "react";
+import { Button } from "@/shared/common/ui/button";
+import { Pencil, Trash2, X } from "lucide-react";
+import { t } from "i18next";
+import { Input } from "@/shared/common/ui/input";
+import { Label } from "@/shared/common/ui/label";
+import { prefixSuffixService } from "@/user-management/services/api/prefixSuffixService";
+import { useQueryClient } from "@tanstack/react-query";
+
+interface PrefixSuffixTableProps {
+  items: any[];
+  isLoading: boolean;
+  onEdit: (item: any) => void;
+  onDelete: (id: string, type: string, recordType: string) => void;
+  showPositionColumn?: boolean;
+  showCountColumn?: boolean;
+  positions?: any[];
+}
+
+export const PrefixSuffixTable = ({
+  items,
+  isLoading,
+  onEdit,
+  onDelete,
+  showPositionColumn = false,
+  showCountColumn = false,
+  positions = [],
+}: PrefixSuffixTableProps) => {
+  const queryClient = useQueryClient();
+  const getPositionName = (positionId: string) => {
+    const pos = positions.find((p) => p.id === positionId);
+    return pos?.name?.en || pos?.name?.am || positionId;
+  };
+  const [countPopup, setCountPopup] = useState<{
+    itemId: string;
+    currentCount: number;
+  } | null>(null);
+  const [countValue, setCountValue] = useState("");
+
+  // 1. Helper to get count from either source
+  const getCount = (item: any): number | undefined => {
+    return item.recordSequences?.[0]?.count ?? item.count ?? undefined;
+  };
+
+  // 2. Helper to get sequence ID from either source
+  const getSequenceId = (item: any): string | undefined => {
+    return item.recordSequences?.[0]?.id ?? item.sequenceId ?? undefined;
+  };
+
+  // 3. Updated openCountPopup
+  const openCountPopup = (item: any) => {
+    const currentCount = getCount(item) ?? 0;
+    const sequenceId = getSequenceId(item);
+
+    if (!sequenceId) {
+      console.error("No sequence ID found for item:", item);
+      return;
+    }
+
+    setCountPopup({ itemId: sequenceId, currentCount });
+    setCountValue(String(currentCount));
+  };
+  const closeCountPopup = () => {
+    setCountPopup(null);
+    setCountValue("");
+    queryClient.invalidateQueries({
+      queryKey: ["prefixes-by-position"],
+    });
+    queryClient.invalidateQueries({
+      queryKey: ["unit-reference-numbers"],
+    });
+  };
+
+  const handleCountSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!countPopup) return;
+    const newCount = parseInt(countValue, 10);
+    if (isNaN(newCount) || newCount < 0) return;
+    prefixSuffixService.updateCount(countPopup.itemId, newCount).then(() => {
+      closeCountPopup();
+    });
+  };
+  return (
+    <div className="overflow-x-auto border rounded-lg dark:border-gray-600">
+      <table className="min-w-full text-sm text-left">
+        <thead className="bg-gray-50 dark:bg-gray-700 border-b dark:border-gray-600">
+          <tr>
+            <th className="px-4 py-3 dark:text-white">#</th>
+            <th className="px-4 py-3 dark:text-white">{t("header.amharic")}</th>
+            <th className="px-4 py-3 dark:text-white">{t("header.english")}</th>
+            <th className="px-4 py-3 dark:text-white">
+              {t("contentManagement.type")}
+            </th>
+            {showPositionColumn && (
+              <th className="px-4 py-3 dark:text-white">
+                {t("contentManagement.position")}
+              </th>
+            )}
+            {showCountColumn && (
+              <th className="px-4 py-3 dark:text-white">
+                {t("contentManagement.count")}
+              </th>
+            )}
+            <th className="px-4 py-3 dark:text-white">
+              {t("userRecord.Actions")}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {isLoading ? (
+            <tr>
+              <td
+                colSpan={showPositionColumn ? 6 : 5}
+                className="text-center py-8 text-gray-500 dark:text-gray-400">
+                {t("contentManagement.loading")}
+              </td>
+            </tr>
+          ) : items.length === 0 ? (
+            <tr>
+              <td
+                colSpan={showPositionColumn ? 6 : 5}
+                className="text-center py-8 text-gray-500 dark:text-gray-400">
+                {t("contentManagement.noRec")}
+              </td>
+            </tr>
+          ) : (
+            items.map((item, idx) => {
+              return (
+                <tr
+                  key={item.id}
+                  className="border-b hover:bg-gray-50 dark:hover:bg-gray-700 dark:border-gray-600">
+                  <td className="px-4 py-3 dark:text-gray-300">{idx + 1}</td>
+                  <td className="px-4 py-3 dark:text-gray-300">
+                    {item.name?.am || "-"}
+                  </td>
+                  <td className="px-4 py-3 dark:text-gray-300">
+                    {item.name?.en || "-"}
+                  </td>
+                  <td className="px-4 py-3 capitalize dark:text-gray-300">
+                    {item.type}
+                    {item.isForCC && (
+                      <span className="ml-1 text-xs text-purple-600 dark:text-purple-400">
+                        (CC)
+                      </span>
+                    )}
+                  </td>
+
+                  {showPositionColumn && (
+                    <td className="px-4 py-3 dark:text-gray-300">
+                      {item.positionId ? getPositionName(item.positionId) : "-"}
+                    </td>
+                  )}
+                  {showCountColumn && (
+                    <td className="px-4 py-3 dark:text-gray-300">
+                      {(() => {
+                        const count = getCount(item);
+                        if (count === undefined) return "-";
+
+                        return (
+                          <button
+                            onClick={() => openCountPopup(item)}
+                            className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 underline cursor-pointer">
+                            {count}
+                          </button>
+                        );
+                      })()}
+                    </td>
+                  )}
+
+                  <td className="px-4 py-3">
+                    <div className="flex gap-2">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => onEdit(item)}>
+                        <Pencil className="h-4 w-4" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
+                        onClick={() =>
+                          onDelete(item.id, item.type, item.recordTypeKey)
+                        }>
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </td>
+                </tr>
+              );
+            })
+          )}
+        </tbody>
+      </table>
+      {/* Count Update Popup */}
+      {countPopup && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 w-80">
+            <div className="flex justify-between items-center mb-4">
+              <h3 className="text-lg font-semibold dark:text-white">
+                {t("contentManagement.updateCount")}
+              </h3>
+              <button
+                onClick={closeCountPopup}
+                className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+
+            <form onSubmit={handleCountSubmit}>
+              <div className="space-y-2 mb-4">
+                <Label htmlFor="countValue" className="dark:text-gray-200">
+                  {t("contentManagement.value")} *
+                </Label>
+                <Input
+                  id="countValue"
+                  type="number"
+                  min="0"
+                  value={countValue}
+                  onChange={(e) => setCountValue(e.target.value)}
+                  placeholder={t("contentManagement.enterValue")}
+                  className="dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+                />
+                <p className="text-xs text-gray-500 dark:text-gray-400">
+                  {t("contentManagement.currentCount")}:{" "}
+                  {countPopup.currentCount}
+                </p>
+              </div>
+
+              <div className="flex gap-2 justify-end">
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={closeCountPopup}>
+                  {t("common.cancel")}
+                </Button>
+                <Button type="submit">{t("common.submit")}</Button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/RecentActivitiesCard.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/content/RecentActivitiesCard.tsx
new file mode 100644
index 000000000..af7801882
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/content/RecentActivitiesCard.tsx
@@ -0,0 +1,223 @@
+import { useState, useEffect, useCallback } from "react";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "@/shared/common/ui/card";
+import { FileText, RefreshCw, ChevronLeft, ChevronRight } from "lucide-react";
+import { Activity } from "./ContentManagement";
+import { useTranslation } from "react-i18next";
+import i18n from "i18next";
+import { Button } from "@/shared/common/ui/button";
+import { listAuditLogExtensions, AuditLogExtensionItem } from "@/shared/services/audit/audit.api";
+
+interface Props {
+  activities?: Activity[];
+  pageSize?: number;
+}
+
+const RecentActivitiesCard = ({ activities = [], pageSize = 10 }: Props) => {
+  const { t } = useTranslation();
+  const [auditLogs, setAuditLogs] = useState<AuditLogExtensionItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalCount, setTotalCount] = useState(0);
+
+  const [allLogs, setAllLogs] = useState<AuditLogExtensionItem[]>([]);
+
+  const fetchAuditLogs = useCallback(async () => {
+    setLoading(true);
+    try {
+      // Fetch all 1000 records at once
+      const data = await listAuditLogExtensions(
+        "/audit-log-extensions/audit/unitAdmin",
+        {
+          skip: 0,
+          take: 1000,
+          orderBy: "createdAt:DESC",
+        }
+      );
+
+      const logs = data.items || [];
+      setAllLogs(logs);
+      setTotalCount(logs.length);
+      setCurrentPage(1); // Reset to first page
+    } catch (error: any) {
+      console.error("Error fetching audit logs:", error);
+      // Silently fail for now - don't show error toast on load
+      // as this is a supplementary feature
+      setAllLogs([]);
+      setTotalCount(0);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchAuditLogs();
+    // Refresh every 30 seconds
+    const interval = setInterval(fetchAuditLogs, 30000);
+    return () => clearInterval(interval);
+  }, [fetchAuditLogs]);
+
+  // Paginate the allLogs whenever currentPage changes
+  useEffect(() => {
+    const startIndex = (currentPage - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    setAuditLogs(allLogs.slice(startIndex, endIndex));
+  }, [currentPage, pageSize, allLogs]);
+
+  const formatDate = (date: Date) =>
+    new Intl.DateTimeFormat("en-US", {
+      hour: "numeric",
+      minute: "numeric",
+      hour12: true,
+      month: "short",
+      day: "numeric",
+    }).format(date);
+
+  const totalPages = Math.ceil(totalCount / pageSize);
+  const hasNextPage = currentPage < totalPages;
+  const hasPrevPage = currentPage > 1;
+
+  return (
+    <Card className="bg-gradient-to-br from-gray-50 to-slate-50 dark:from-gray-800 dark:to-gray-900 dark:border-gray-700">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div className="flex-1">
+            <CardTitle className="flex items-center dark:text-white">
+              <FileText className="h-5 w-5 mr-2" />
+              {t("dashboard.recentActivities", "Recent Activities")}
+            </CardTitle>
+            <CardDescription className="dark:text-gray-400">
+              {t("organization.recentContentActivities", "Recent content management activities")}
+            </CardDescription>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => fetchAuditLogs()}
+            disabled={loading}
+            className="ml-2"
+          >
+            <RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {/* Display audit logs if available */}
+        {auditLogs.length > 0 ? (
+          <div className="space-y-3">
+            {auditLogs.map((log, idx) => {
+              const userName = i18n.language === "am" ? log.user.name.am : log.user.name.en;
+              const entityLabel = log.entityName.replace(/_/g, " ");
+              const timestamp = new Date(log.createdAt).toLocaleString(
+                i18n.language,
+                {
+                  year: "numeric",
+                  month: "short",
+                  day: "numeric",
+                  hour: "2-digit",
+                  minute: "2-digit",
+                }
+              );
+
+              return (
+                <div
+                  key={log.id || idx}
+                  className="p-3 rounded-lg bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 hover:shadow-sm transition-shadow"
+                >
+                  <p className="text-sm text-gray-900 dark:text-gray-100">
+                    <span className="font-semibold">{userName}</span>
+                    {" "}
+                    <span className="text-gray-600 dark:text-gray-300">
+                      {log.queryMethod.toLowerCase() === "insert"
+                        ? "created"
+                        : log.queryMethod.toLowerCase() === "update"
+                        ? "updated"
+                        : log.queryMethod.toLowerCase() === "delete"
+                        ? "deleted"
+                        : log.queryMethod.toLowerCase()}
+                    </span>
+                    {" "}
+                    <span className="text-gray-900 dark:text-gray-100 font-medium">
+                      {entityLabel}
+                    </span>
+                    {" "}
+                    <span className="text-gray-500 dark:text-gray-400">at {timestamp}</span>
+                  </p>
+                </div>
+              );
+            })}
+          </div>
+        ) : activities.length > 0 ? (
+          <div className="space-y-4">
+            {activities.map(({ id, type, description, timestamp }) => (
+              <div key={id} className="flex justify-between items-center">
+                <span className="text-sm font-medium capitalize dark:text-white">{type}</span>
+                <span className="text-sm dark:text-gray-300">{description}</span>
+                <span className="text-xs text-muted-foreground dark:text-gray-400">
+                  {formatDate(timestamp)}
+                </span>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p className="text-sm text-muted-foreground dark:text-gray-400 text-center py-8">
+            {loading ? (
+              <div className="flex items-center justify-center gap-2">
+                <RefreshCw className="h-4 w-4 animate-spin" />
+                <span>{t("common.loading", "Loading...")}</span>
+              </div>
+            ) : (
+              t("auditLog.noRecords", "No recent activities.")
+            )}
+          </p>
+        )}
+      </CardContent>
+      
+      {/* Pagination Footer */}
+      {auditLogs.length > 0 && (
+        <CardFooter className="flex items-center justify-between border-t border-gray-200 dark:border-gray-600 pt-4">
+          <div className="text-xs text-gray-600 dark:text-gray-400">
+            {t("common.showing", "Showing")} {(currentPage - 1) * pageSize + 1}-
+            {Math.min(currentPage * pageSize, totalCount)} {t("common.of", "of")} {totalCount}
+          </div>
+          
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setCurrentPage(currentPage - 1)}
+              disabled={!hasPrevPage || loading}
+              className="h-8 w-8 p-0"
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            
+            <div className="flex items-center gap-1">
+              <span className="text-xs font-medium text-gray-700 dark:text-gray-300 px-2">
+                {currentPage} / {totalPages || 1}
+              </span>
+            </div>
+            
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setCurrentPage(currentPage + 1)}
+              disabled={!hasNextPage || loading}
+              className="h-8 w-8 p-0"
+            >
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+        </CardFooter>
+      )}
+    </Card>
+  );
+};
+
+export default RecentActivitiesCard;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/RecordTagSelector.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/content/RecordTagSelector.tsx
new file mode 100644
index 000000000..74581a6db
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/content/RecordTagSelector.tsx
@@ -0,0 +1,351 @@
+// components/record-tag-selector.tsx
+"use client";
+
+import * as React from "react";
+import { X, Check, ChevronsUpDown, Tag, Loader2 } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { useRecordTags } from "@/user-management/hooks/useRecordTags";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/shared/common/ui/popover";
+import { cn } from "@/shared/lib/utils";
+import { Button } from "@/shared/common/ui/button";
+import { Badge } from "@/shared/common/ui/badge";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/shared/common/ui/command";
+
+// ─── Types ─────────────────────────────────────────────
+
+export interface TagSelectorProps {
+  /** Unit ID to fetch tags from */
+  unitId: string;
+  /** Currently selected tag IDs */
+  selectedTagIds: string[];
+  /** Callback when selection changes */
+  onChange: (tagIds: string[]) => void;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Allow multiple selection */
+  multiple?: boolean;
+  /** Disable the selector */
+  disabled?: boolean;
+  /** Custom className */
+  className?: string;
+  /** Maximum number of tags to show before collapsing */
+  maxDisplayTags?: number;
+  /** Optional error state */
+  error?: string;
+}
+
+// ─── Component ─────────────────────────────────────────
+
+export function RecordTagSelector({
+  unitId,
+  selectedTagIds,
+  onChange,
+  placeholder = "Select tags...",
+  multiple = true,
+  disabled = false,
+  className,
+  maxDisplayTags = 3,
+  error,
+}: TagSelectorProps) {
+  const { t } = useTranslation();
+  const [open, setOpen] = React.useState(false);
+  const localizedName = useLocalizedName();
+  const { recordTagsList, isLoadingRecordTagsList, isErrorRecordTagsList } =
+    useRecordTags({ unitId });
+
+  const tags = recordTagsList?.items ?? [];
+  const selectedTags = tags.filter((tag) => selectedTagIds.includes(tag.id));
+
+  // Toggle tag selection
+  const toggleTag = React.useCallback(
+    (tagId: string) => {
+      if (multiple) {
+        onChange(
+          selectedTagIds.includes(tagId)
+            ? selectedTagIds.filter((id) => id !== tagId)
+            : [...selectedTagIds, tagId],
+        );
+      } else {
+        onChange(selectedTagIds.includes(tagId) ? [] : [tagId]);
+        setOpen(false);
+      }
+    },
+    [multiple, onChange, selectedTagIds],
+  );
+
+  // Remove a specific tag
+  const removeTag = React.useCallback(
+    (e: React.MouseEvent, tagId: string) => {
+      e.stopPropagation();
+      onChange(selectedTagIds.filter((id) => id !== tagId));
+    },
+    [onChange, selectedTagIds],
+  );
+
+  // Clear all selections
+  const clearAll = React.useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onChange([]);
+    },
+    [onChange],
+  );
+
+  return (
+    <div className={cn("flex flex-col gap-1.5", className)}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            disabled={disabled || isLoadingRecordTagsList}
+            className={cn(
+              "w-full justify-between min-h-[40px] h-auto px-3 py-2",
+              !multiple && selectedTags.length > 0 && "justify-start gap-2",
+              error && "border-destructive ring-destructive",
+              "hover:bg-accent",
+            )}
+          >
+            {isLoadingRecordTagsList ? (
+              <div className="flex items-center gap-2 text-muted-foreground">
+                <Loader2 className="h-4 w-4 animate-spin" />
+                <span className="text-sm">{t("common.loading")}</span>
+              </div>
+            ) : selectedTags.length === 0 ? (
+              <span className="text-muted-foreground text-sm">
+                {placeholder}
+              </span>
+            ) : multiple ? (
+              <div className="flex flex-wrap items-center gap-1.5 flex-1">
+                {selectedTags.slice(0, maxDisplayTags).map((tag: any) => (
+                  <Badge
+                    key={tag.id}
+                    variant="secondary"
+                    className="gap-1 px-2 py-0.5 text-xs font-medium cursor-default"
+                    style={{
+                      backgroundColor: tag.color ? `${tag.color}20` : undefined,
+                      color: tag.color,
+                      borderColor: tag.color,
+                    }}
+                  >
+                    {tag.name}
+                    <X
+                      className="h-3 w-3 cursor-pointer hover:text-destructive"
+                      onClick={(e) => removeTag(e, tag.id)}
+                    />
+                  </Badge>
+                ))}
+                {selectedTags.length > maxDisplayTags && (
+                  <Badge variant="secondary" className="text-xs">
+                    +{selectedTags.length - maxDisplayTags}
+                  </Badge>
+                )}
+              </div>
+            ) : (
+              <div className="flex items-center gap-2 flex-1">
+                <span className="text-sm">
+                  {localizedName(selectedTags[0].name)}
+                </span>
+              </div>
+            )}
+
+            <div className="flex items-center gap-1 shrink-0 ml-2">
+              {selectedTags.length > 0 && !disabled && (
+                <X
+                  className="h-4 w-4 text-muted-foreground hover:text-foreground cursor-pointer"
+                  onClick={clearAll}
+                />
+              )}
+              <ChevronsUpDown className="h-4 w-4 text-muted-foreground shrink-0" />
+            </div>
+          </Button>
+        </PopoverTrigger>
+
+        <PopoverContent
+          className="w-[--radix-popover-trigger-width] p-0"
+          align="start"
+        >
+          <Command>
+            <CommandInput
+              placeholder={t("common.search") || "Search tags..."}
+            />
+            <CommandList>
+              <CommandEmpty>
+                {isErrorRecordTagsList ? (
+                  <div className="py-6 text-center text-sm text-destructive">
+                    {t("common.errorLoading")}
+                  </div>
+                ) : (
+                  t("common.noResults") || "No tags found."
+                )}
+              </CommandEmpty>
+
+              <CommandGroup>
+                {tags.map((tag) => {
+                  const isSelected = selectedTagIds.includes(tag.id);
+                  return (
+                    <CommandItem
+                      key={tag.id}
+                      value={tag.id}
+                      onSelect={() => toggleTag(tag.id)}
+                      className="cursor-pointer"
+                    >
+                      <div className="flex items-center gap-3 flex-1">
+                        <div
+                          className={cn(
+                            "flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                            isSelected
+                              ? "bg-primary text-primary-foreground"
+                              : "opacity-50",
+                          )}
+                        >
+                          {isSelected && <Check className="h-3 w-3" />}
+                        </div>
+
+                        <span className="flex-1 text-sm">
+                          {localizedName(tag.name)}
+                        </span>
+                      </div>
+                    </CommandItem>
+                  );
+                })}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+
+      {error && <p className="text-xs text-destructive">{error}</p>}
+    </div>
+  );
+}
+
+// ─── Single Select Variant ─────────────────────────────
+
+export function RecordTagSelectorSingle(
+  props: Omit<TagSelectorProps, "multiple" | "maxDisplayTags">,
+) {
+  return <RecordTagSelector {...props} multiple={false} />;
+}
+
+// ─── Display Only (Read) Component ─────────────────────
+
+export interface TagListProps {
+  tagIds: string[];
+  unitId: string;
+  className?: string;
+  size?: "sm" | "md" | "lg";
+}
+
+export function RecordTagList({
+  tagIds,
+  unitId,
+  className,
+  size = "md",
+}: TagListProps) {
+  const localizedName = useLocalizedName();
+  const { recordTagsList, isLoadingRecordTagsList } = useRecordTags({ unitId });
+  const tags = recordTagsList?.items ?? [];
+  const selectedTags = tags.filter((tag) => tagIds.includes(tag.id));
+
+  const sizeClasses = {
+    sm: "text-[10px] px-1.5 py-0",
+    md: "text-xs px-2 py-0.5",
+    lg: "text-sm px-2.5 py-1",
+  };
+
+  if (isLoadingRecordTagsList) {
+    return <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />;
+  }
+
+  if (selectedTags.length === 0) {
+    return <span className="text-xs text-muted-foreground">—</span>;
+  }
+
+  return (
+    <div className={cn("flex flex-wrap gap-1.5", className)}>
+      {selectedTags.map((tag) => (
+        <Badge
+          key={tag.id}
+          variant="outline"
+          className={cn("font-medium gap-1.5", sizeClasses[size])}
+        >
+          <span className="h-1.5 w-1.5 rounded-full" />
+          {localizedName(tag.name)}
+        </Badge>
+      ))}
+    </div>
+  );
+}
+
+// ─── Create Tag Dialog Integration ─────────────────────
+
+export interface TagSelectorWithCreateProps extends TagSelectorProps {
+  onCreateTag?: (name: string) => void;
+  isCreatingTag?: boolean;
+}
+
+export function RecordTagSelectorWithCreate({
+  onCreateTag,
+  isCreatingTag,
+  ...props
+}: TagSelectorWithCreateProps) {
+  const { t } = useTranslation();
+  const [newTagName, setNewTagName] = React.useState("");
+
+  const handleCreate = React.useCallback(() => {
+    if (newTagName.trim() && onCreateTag) {
+      onCreateTag(newTagName.trim());
+      setNewTagName("");
+    }
+  }, [newTagName, onCreateTag]);
+
+  return (
+    <div className="space-y-2">
+      <RecordTagSelector {...props} />
+
+      {onCreateTag && (
+        <div className="flex items-center gap-2">
+          <div className="relative flex-1">
+            <Tag className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+            <input
+              type="text"
+              value={newTagName}
+              onChange={(e) => setNewTagName(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleCreate()}
+              placeholder={t("tags.createPlaceholder") || "Create new tag..."}
+              className="w-full h-8 pl-8 pr-3 text-xs rounded-md border border-input bg-background 
+                         focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1"
+            />
+          </div>
+          <Button
+            size="sm"
+            variant="secondary"
+            className="h-8 px-3 text-xs"
+            onClick={handleCreate}
+            disabled={!newTagName.trim() || isCreatingTag}
+          >
+            {isCreatingTag ? (
+              <Loader2 className="h-3 w-3 animate-spin" />
+            ) : (
+              t("common.create") || "Create"
+            )}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/SealCard.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/content/SealCard.tsx
new file mode 100644
index 000000000..12fe0890a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/content/SealCard.tsx
@@ -0,0 +1,375 @@
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "@/shared/common/ui/card";
+import { Stamp, X, Plus } from "lucide-react";
+import { Input } from "@/shared/common/ui/input";
+import { Label } from "@/shared/common/ui/label";
+import { Button } from "@/shared/common/ui/button";
+import { useEffect, useState, useRef } from "react";
+import { useSeal } from "@/user-management/hooks/useSeal";
+import {
+  CreateSealPayload,
+  sealService,
+} from "@/user-management/services/api/sealService";
+import { toast } from "sonner";
+import { FilePreview } from "./ContentManagement";
+import { presignedAxios } from "@/shared/services/presignedAxios";
+import { t } from "i18next";
+import { useQueryClient } from "@tanstack/react-query";
+
+interface Props {
+  unitId: string;
+}
+
+const SealCard = ({ unitId }: Props) => {
+  const {
+    createSeal,
+    isCreatingSeal,
+    isLoadingSeals,
+    deleteSeal,
+    getSealsByUnitId,
+  } = useSeal();
+
+  const [file, setFile] = useState<File>();
+  const [previews, setPreviews] = useState<FilePreview[]>([]);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+    const queryClient = useQueryClient();
+
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [isUploading, setIsUploading] = useState(false);
+
+  const [sealName, setSealName] = useState("");
+  const [sealNameError, setSealNameError] = useState("");
+
+  const MAX_SIZE = 1 * 1024 * 1024;
+
+  const { data: seals } = getSealsByUnitId(unitId);
+
+  // -------------------------------
+  // Fetch existing seals
+  // -------------------------------
+  useEffect(() => {
+    let isMounted = true;
+
+    const fetchPresigned = async () => {
+      if (!seals?.items) return;
+
+      const filtered = seals.items.filter(
+        (s) => s.uploadedSuccessfully && s.isCurrent
+      );
+
+      const resolved = await Promise.all(
+        filtered.map(async (seal): Promise<FilePreview | null> => {
+          try {
+            const sealDetail = await sealService.getSeal(seal.id);
+            const presigned = sealDetail.data.presigned;
+
+            if (!presigned) return null;
+
+            return {
+              type: "seal",
+              file: new File([], seal.fileInfo.fileName),
+              url: presigned,
+              uploadedAt: new Date(seal.createdAt),
+              id: seal.id,
+            };
+          } catch {
+            return null;
+          }
+        })
+      );
+
+      const filteredPreviews: FilePreview[] = resolved.filter(
+        (p): p is FilePreview => p !== null
+      );
+
+      if (isMounted) {
+        setPreviews(filteredPreviews);
+      }
+    };
+
+    fetchPresigned();
+
+    return () => {
+      isMounted = false;
+
+      previews.forEach((p) => {
+        if (!p.id && p.url.startsWith("blob:")) {
+          URL.revokeObjectURL(p.url);
+        }
+      });
+    };
+  }, [seals?.items]);
+
+  // -------------------------------
+  // File validation + preview
+  // -------------------------------
+  const handleFileUpload = (selectedFile: File) => {
+    if (selectedFile.type !== "image/png") {
+      toast.error(t("contentManagement.onlyPngAllowed"));
+      return;
+    }
+
+    if (selectedFile.size > MAX_SIZE) {
+      toast.error("Image size should be less than 1 MB");
+      return;
+    }
+
+    const tempUrl = URL.createObjectURL(selectedFile);
+    const img = new Image();
+
+    img.onload = () => {
+      if (img.width !== img.height) {
+        toast.error(t("contentManagement.onlySquareAllowed"));
+        URL.revokeObjectURL(tempUrl);
+        return;
+      }
+
+      setFile(selectedFile);
+      setSealName("");
+      setSealNameError("");
+
+      setPreviews([
+        {
+          type: "seal",
+          url: tempUrl,
+          file: selectedFile,
+          uploadedAt: new Date(),
+          id: null,
+        },
+      ]);
+    };
+
+    img.onerror = () => {
+      toast.error(t("contentManagement.invalidImage"));
+      URL.revokeObjectURL(tempUrl);
+    };
+
+    img.src = tempUrl;
+  };
+
+  // -------------------------------
+  // Upload flow (CREATE + PUT)
+  // -------------------------------
+  const uploadSeal = async () => {
+    if (!file) {
+      toast.error(t("contentManagement.noFileSelected"));
+      return;
+    }
+
+    if (!sealName.trim()) {
+      setSealNameError(t("contentManagement.sealNameMsg"));
+      return;
+    }
+
+    try {
+      // Step 1: Create seal (get presigned URL)
+      const payload: CreateSealPayload = {
+        fileInfo: {
+          fileName: file.name,
+          contentType: file.type,
+          size: file.size,
+          originalname: file.name,
+        },
+        name: {
+          am: sealName,
+          en: sealName,
+        },
+        unitId,
+      };
+
+      const data = await createSeal(payload);
+
+      // Step 2: Upload file
+      setIsUploading(true);
+      setUploadProgress(0);
+
+      await presignedAxios.put(data.presigned, file, {
+        headers: {
+          "Content-Type": file.type,
+        },
+      });
+
+      // await updateSealStatus({
+      //   id: data.id,
+      //   updateSealStatusPayload: {
+      //     id: data.id,
+      //     parentId: data.id,
+      //     uploadedSuccessfully: true,
+      //   },
+      // });
+
+      setIsUploading(false);
+      setUploadProgress(100);
+
+      // Reset UI
+      setFile(undefined);
+      setSealName("");
+      setSealNameError("");
+
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+      
+      queryClient.invalidateQueries({ queryKey: ["seal"] });
+
+      toast.success(t("contentManagement.sealSuccessMsg"));
+    } catch (error) {
+      console.error(error);
+      toast.error(t("contentManagement.sealErrorMsg"));
+
+      setIsUploading(false);
+      setUploadProgress(0);
+      setFile(undefined);
+    }
+  };
+
+  // -------------------------------
+  // Delete seal
+  // -------------------------------
+  const handleRemove = async (id: string | null) => {
+    if (!id) return;
+
+    try {
+      await deleteSeal(id);
+      setPreviews((prev) => prev.filter((p) => p.id !== id));
+      toast.success(t("contentManagement.sealRemove"));
+    } catch (error) {
+      console.error(error);
+      toast.error(t("contentManagement.sealRemove"));
+    }
+  };
+
+  const formatDate = (date: Date) =>
+    new Intl.DateTimeFormat("en-US", {
+      hour: "numeric",
+      minute: "numeric",
+      hour12: true,
+      month: "short",
+      day: "numeric",
+    }).format(date);
+
+  const isProcessing = isCreatingSeal || isUploading;
+
+  return (
+    <Card className="dark:border-gray-700 dark:bg-gray-800">
+      <CardHeader>
+        <CardTitle className="flex items-center dark:text-white">
+          <Stamp className="h-5 w-5 mr-2" />
+          {t("contentManagement.seal")}
+        </CardTitle>
+        <CardDescription className="dark:text-gray-400">
+          {t("contentManagement.uploadSealMsg")} (PNG, max 1MB)
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        <div className="flex justify-between items-center">
+          <Label htmlFor="seal" className="dark:text-gray-200">{t("contentManagement.sealImage")}</Label>
+          <Button
+            variant="outline"
+            className="bg-primary hover:bg-primary/90 text-primary-foreground"
+            onClick={() => fileInputRef.current?.click()}
+            disabled={isProcessing}
+          >
+            <Plus className="h-4 w-4 mr-2" />
+            {t("contentManagement.addSeal")}
+          </Button>
+        </div>
+
+        <Input
+          ref={fileInputRef}
+          type="file"
+          accept=".png,image/png"
+          className="hidden"
+          onChange={(e) =>
+            e.target.files?.[0] && handleFileUpload(e.target.files[0])
+          }
+          disabled={isProcessing}
+        />
+
+        {/* PREVIEWS */}
+        {previews.length > 0 ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            {previews.map((preview) => (
+              <div
+                key={preview?.id || preview?.url}
+                className="border rounded-lg p-3 bg-gray-50 dark:bg-gray-700 dark:border-gray-600"
+              >
+                <div className="flex justify-between items-center mb-2">
+                  <span className="text-sm text-muted-foreground dark:text-gray-400">
+                    {formatDate(preview?.uploadedAt)}
+                  </span>
+
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleRemove(preview?.id || null)}
+                    className="text-red-500 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/30"
+                    disabled={isLoadingSeals}
+                  >
+                    <X className="h-4 w-4 text-red-500" />
+                  </Button>
+                </div>
+
+                <img
+                  src={preview.url}
+                  alt="Seal"
+                  className="max-h-32 mx-auto object-contain"
+                />
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="text-center p-4 border border-dashed rounded-lg dark:border-gray-600 dark:bg-gray-700/30">
+            <p className="text-muted-foreground dark:text-gray-400">
+              {t("contentManagement.noSealMsg")}
+            </p>
+            <p className="text-sm text-muted-foreground dark:text-gray-500 mt-1">
+              {t("contentManagement.addSealInstruction")}
+            </p>
+          </div>
+        )}
+
+        {/* NAME INPUT */}
+        {file && (
+          <div className="space-y-2">
+            <Label htmlFor="sealName" className="dark:text-gray-200">{t("contentManagement.sealName")}</Label>
+            <Input
+              value={sealName}
+              onChange={(e) => {
+                setSealName(e.target.value);
+                setSealNameError("");
+              }}
+              placeholder="Enter seal name"
+              className="dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+            />
+
+            {sealNameError && (
+              <p className="text-sm text-red-500">{sealNameError}</p>
+            )}
+          </div>
+        )}
+
+        {/* UPLOAD BUTTON (MAIN UX CONTROL) */}
+        {file && (
+          <Button
+            className="w-full bg-primary hover:bg-primary/90"
+            onClick={uploadSeal}
+            disabled={isProcessing || !file}
+          >
+            {isCreatingSeal && "Creating seal..."}
+            {isUploading && `Uploading ${uploadProgress}%`}
+            {!isProcessing && t("contentManagement.saveSeal")}
+          </Button>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default SealCard;
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/TagBasedReferenceNumbers.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/content/TagBasedReferenceNumbers.tsx
new file mode 100644
index 000000000..b4054e2db
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/content/TagBasedReferenceNumbers.tsx
@@ -0,0 +1,578 @@
+// components/tag-based-reference-numbers.tsx
+"use client";
+
+import * as React from "react";
+import { Plus, Trash2, Loader2, AlertCircle, X } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { useRecordTagPrefixes } from "@/user-management/hooks/useRecordTagPrefixes";
+import { useRecordTags } from "@/user-management/hooks/useRecordTags";
+import { Label } from "@/shared/common/ui/label";
+import { useQueryClient } from "@tanstack/react-query";
+import { prefixSuffixService } from "@/user-management/services/api/prefixSuffixService";
+import { cn } from "@/shared/lib/utils";
+import { RecordTagSelector } from "./RecordTagSelector";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/shared/common/ui/dialog";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import { Badge } from "@/shared/common/ui/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/common/ui/table";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/shared/common/ui/pagination";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { CreatePrefixPayload } from "@/user-management/services/api/prefixSuffixService";
+
+// ─── Types ─────────────────────────────────────────────
+
+export interface TagBasedReferenceNumbersProps {
+  unitId: string;
+  className?: string;
+}
+
+export interface PrefixItem {
+  id: string;
+  prefix: string;
+  suffix?: string;
+  description?: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+// ─── Component ─────────────────────────────────────────
+
+export function TagBasedReferenceNumbers({
+  unitId,
+  className,
+}: TagBasedReferenceNumbersProps) {
+  const { t } = useTranslation();
+  const localizedName = useLocalizedName();
+  const queryClient = useQueryClient();
+  const [selectedTagId, setSelectedTagId] = React.useState<string>("");
+  const [isAddDialogOpen, setIsAddDialogOpen] = React.useState(false);
+  const [deleteTargetId, setDeleteTargetId] = React.useState<string | null>(
+    null,
+  );
+  const [countPopup, setCountPopup] = React.useState<{
+    itemId: string | null;
+    currentCount: number;
+  } | null>(null);
+  const [countValue, setCountValue] = React.useState("");
+  const [currentPage, setCurrentPage] = React.useState(1);
+  const pageSize = 10;
+
+  const skip = (currentPage - 1) * pageSize;
+
+  const { recordTagsList, isLoadingRecordTagsList } = useRecordTags({ unitId });
+
+  const {
+    prefixes,
+    total,
+    isLoadingPrefixes,
+    isErrorPrefixes,
+    createPrefix,
+    isCreatingPrefix,
+    deletePrefix,
+    isDeletingPrefix,
+  } = useRecordTagPrefixes({
+    unitId,
+    recordTagId: selectedTagId || undefined,
+    skip,
+    take: pageSize,
+  });
+
+  const totalPages = Math.ceil(total / pageSize);
+
+  // Reset page when tag changes
+  React.useEffect(() => {
+    setCurrentPage(1);
+  }, [selectedTagId]);
+
+  // Get selected tag details for display
+  const selectedTag = React.useMemo(() => {
+    return recordTagsList?.items?.find((tag) => tag.id === selectedTagId);
+  }, [recordTagsList, selectedTagId]);
+
+  // Handle add prefix
+  const handleAddPrefix = React.useCallback(
+    (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      const formData = new FormData(e.currentTarget);
+      const nameAm = (formData.get("nameAm") as string)?.trim();
+      const nameEn = (formData.get("nameEn") as string)?.trim();
+
+      if (!nameAm || !nameEn) return;
+
+      const payload: CreatePrefixPayload = {
+        name: { am: nameAm, en: nameEn },
+        unitId,
+        isForCC: false,
+        recordTagId: selectedTagId || undefined,
+      };
+
+      createPrefix(payload, {
+        onSuccess: () => {
+          setIsAddDialogOpen(false);
+        },
+      });
+    },
+    [createPrefix, selectedTagId, unitId],
+  );
+
+  // Handle delete
+  const handleDelete = React.useCallback(() => {
+    if (deleteTargetId) {
+      deletePrefix(deleteTargetId, {
+        onSuccess: () => setDeleteTargetId(null),
+      });
+    }
+  }, [deletePrefix, deleteTargetId]);
+
+  const getCount = (item: any): number =>
+    item.recordSequences?.[0]?.count ?? item.count ?? 0;
+
+  const getSequenceId = (item: any): string | null =>
+    item.recordSequences?.[0]?.id ?? item.sequenceId ?? null;
+
+  const openCountPopup = (item: any) => {
+    console.log("[TagBasedRef] prefix item:", item);
+    const currentCount = getCount(item);
+    const sequenceId = getSequenceId(item);
+    setCountPopup({ itemId: sequenceId, currentCount });
+    setCountValue(String(currentCount));
+  };
+
+  const closeCountPopup = () => {
+    setCountPopup(null);
+    setCountValue("");
+    queryClient.invalidateQueries({ queryKey: ["recordTagPrefixes", unitId, selectedTagId] });
+  };
+
+  const handleCountSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!countPopup || !countPopup.itemId) return;
+    const newCount = parseInt(countValue, 10);
+    if (isNaN(newCount) || newCount < 0) return;
+    prefixSuffixService.updateCount(countPopup.itemId, newCount).then(() => {
+      closeCountPopup();
+    });
+  };
+
+  return (
+    <div className={cn("space-y-6", className)}>
+      {/* ─── Header Section: Tag Selector + Add Button ─── */}
+      <div className="flex flex-col sm:flex-row items-start sm:items-end gap-4">
+        <div className="flex-1 w-full sm:w-auto space-y-2">
+          <Label className="text-sm font-medium">
+            {t("nav.selectTag") || "Select Record Tag"}
+          </Label>
+          <RecordTagSelector
+            unitId={unitId}
+            selectedTagIds={selectedTagId ? [selectedTagId] : []}
+            onChange={(ids) => setSelectedTagId(ids[0] || "")}
+            placeholder={
+              t("nav.selectTag") || "Choose a tag to view prefixes..."
+            }
+            multiple={false}
+            disabled={isLoadingRecordTagsList}
+          />
+        </div>
+
+        <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
+          <DialogTrigger asChild>
+            <Button
+              className="shrink-0"
+              disabled={!selectedTagId || isLoadingPrefixes}
+            >
+              <Plus className="h-4 w-4 mr-2" />
+              {t("contentManagement.addPrefix") || "Add Prefix"}
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="sm:max-w-[500px]">
+            <DialogHeader>
+              <DialogTitle>
+                {t("contentManagement.addPrefix") || "Add New Prefix"}
+              </DialogTitle>
+            </DialogHeader>
+
+            <form
+              id="add-prefix-form"
+              onSubmit={handleAddPrefix}
+              className="space-y-4"
+            >
+              <div className="space-y-2">
+                <Label htmlFor="nameAm" className="dark:text-gray-200">
+                  {t("contentManagement.amharicName")} *
+                </Label>
+                <Input
+                  id="nameAm"
+                  name="nameAm"
+                  placeholder={t("contentManagement.amharicName")}
+                  required
+                  autoFocus
+                  className="dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="nameEn" className="dark:text-gray-200">
+                  {t("contentManagement.englishName")} *
+                </Label>
+                <Input
+                  id="nameEn"
+                  name="nameEn"
+                  placeholder={t("contentManagement.englishName")}
+                  required
+                  className="dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+                />
+              </div>
+            </form>
+
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setIsAddDialogOpen(false)}
+              >
+                {t("common.cancel") || "Cancel"}
+              </Button>
+              <Button
+                type="submit"
+                form="add-prefix-form"
+                disabled={isCreatingPrefix}
+              >
+                {isCreatingPrefix && (
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                )}
+                {t("common.save") || "Save"}
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      {/* ─── Selected Tag Info ─── */}
+      {selectedTag && (
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <span>Showing prefixes for:</span>
+          <Badge variant="outline">{localizedName(selectedTag.name)}</Badge>
+          <span className="text-xs">({total} items)</span>
+        </div>
+      )}
+
+      {/* ─── Table Section ─── */}
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[80px]">
+                {t("common.no") || "#"}
+              </TableHead>
+              <TableHead>{t("contentManagement.amharicName")}</TableHead>
+              <TableHead>{t("contentManagement.englishName")}</TableHead>
+              <TableHead>
+                {t("contentManagement.createdAt") || "Created"}
+              </TableHead>
+              <TableHead className="w-[100px]">
+                {t("contentManagement.count") || "Count"}
+              </TableHead>
+              <TableHead className="w-[100px] text-right">
+                {t("common.actions") || "Actions"}
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+
+          <TableBody>
+            {/* Loading State */}
+            {isLoadingPrefixes && (
+              <>
+                {Array.from({ length: 5 }).map((_, i) => (
+                  <TableRow key={`skeleton-${i}`}>
+                    <TableCell>
+                      <Skeleton className="h-4 w-8" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-4 w-24" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-4 w-20" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-4 w-32" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-4 w-24" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-8 w-8 ml-auto" />
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </>
+            )}
+
+            {/* Error State */}
+            {isErrorPrefixes && !isLoadingPrefixes && (
+              <TableRow>
+                <TableCell colSpan={6} className="h-32 text-center">
+                  <div className="flex flex-col items-center gap-2 text-destructive">
+                    <AlertCircle className="h-8 w-8" />
+                    <p className="text-sm">
+                      {t("common.errorLoading") || "Failed to load prefixes"}
+                    </p>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => window.location.reload()}
+                    >
+                      {t("common.retry") || "Retry"}
+                    </Button>
+                  </div>
+                </TableCell>
+              </TableRow>
+            )}
+
+            {/* Empty States */}
+            {!isLoadingPrefixes && !isErrorPrefixes && (
+              <>
+                {!selectedTagId && (
+                  <TableRow>
+                    <TableCell colSpan={6} className="h-32 text-center">
+                      <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                        <span className="text-2xl">🏷️</span>
+                        <p className="text-sm">
+                          {t("nav.selectTag") ||
+                            "Select a tag above to view its prefixes"}
+                        </p>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                )}
+
+                {selectedTagId && prefixes.length === 0 && (
+                  <TableRow>
+                    <TableCell colSpan={6} className="h-32 text-center">
+                      <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                        <Plus className="h-8 w-8 opacity-50" />
+                        <p className="text-sm">
+                          {t("nav.emptyState") ||
+                            "No prefixes found for this tag"}
+                        </p>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => setIsAddDialogOpen(true)}
+                        >
+                          {t("nav.addNew") || "Add your first prefix"}
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                )}
+
+                {/* Data Rows */}
+                {prefixes.map((prefix, index: number) => {
+                  const count = getCount(prefix);
+                  return (
+                    <TableRow key={prefix.id} className="group">
+                      <TableCell className="text-muted-foreground text-sm">
+                        {skip + index + 1}
+                      </TableCell>
+                      <TableCell className="font-medium">
+                        {prefix.name?.am || (
+                          <span className="text-muted-foreground text-sm">—</span>
+                        )}
+                      </TableCell>
+                      <TableCell>
+                        {prefix.name?.en || (
+                          <span className="text-muted-foreground text-sm">—</span>
+                        )}
+                      </TableCell>
+                      <TableCell className="text-muted-foreground text-sm">
+                        {new Date(prefix.createdAt).toLocaleDateString()}
+                      </TableCell>
+                      <TableCell>
+                        <button
+                          onClick={() => openCountPopup(prefix)}
+                          className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 underline cursor-pointer text-sm"
+                        >
+                          {count}
+                        </button>
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
+                          onClick={() => setDeleteTargetId(prefix.id)}
+                          disabled={isDeletingPrefix}
+                          title="Delete this prefix"
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* ─── Pagination ─── */}
+      {totalPages > 1 && (
+        <Pagination>
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious
+                onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                className={cn(
+                  currentPage === 1 && "pointer-events-none opacity-50",
+                )}
+              />
+            </PaginationItem>
+
+            {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+              <PaginationItem key={page}>
+                <PaginationLink
+                  isActive={currentPage === page}
+                  onClick={() => setCurrentPage(page)}
+                >
+                  {page}
+                </PaginationLink>
+              </PaginationItem>
+            ))}
+
+            <PaginationItem>
+              <PaginationNext
+                onClick={() =>
+                  setCurrentPage((p) => Math.min(totalPages, p + 1))
+                }
+                className={cn(
+                  currentPage === totalPages &&
+                    "pointer-events-none opacity-50",
+                )}
+              />
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      )}
+
+      {/* ─── Count Update Popup ─── */}
+      {countPopup && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 w-80">
+            <div className="flex justify-between items-center mb-4">
+              <h3 className="text-lg font-semibold dark:text-white">
+                {t("contentManagement.updateCount")}
+              </h3>
+              <button
+                onClick={closeCountPopup}
+                className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+              >
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+            <form onSubmit={handleCountSubmit}>
+              <div className="space-y-2 mb-4">
+                <Label htmlFor="countValue" className="dark:text-gray-200">
+                  {t("contentManagement.value")} *
+                </Label>
+                <Input
+                  id="countValue"
+                  type="number"
+                  min="0"
+                  value={countValue}
+                  onChange={(e) => setCountValue(e.target.value)}
+                  placeholder={t("contentManagement.enterValue")}
+                  className="dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+                />
+                <p className="text-xs text-gray-500 dark:text-gray-400">
+                  {t("contentManagement.currentCount")}: {countPopup.currentCount}
+                </p>
+                {!countPopup.itemId && (
+                  <p className="text-xs text-red-500">
+                    No sequence found for this prefix. Use it in a record first.
+                  </p>
+                )}
+              </div>
+              <div className="flex gap-2 justify-end">
+                <Button type="button" variant="outline" onClick={closeCountPopup}>
+                  {t("common.cancel")}
+                </Button>
+                <Button type="submit" disabled={!countPopup.itemId}>
+                  {t("common.submit")}
+                </Button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* ─── Delete Confirmation ─── */}
+      <AlertDialog
+        open={!!deleteTargetId}
+        onOpenChange={(open) => !open && setDeleteTargetId(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t("prefixes.deleteConfirmTitle") || "Delete Tag-Based Reference Prefix?"}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t("prefixes.deleteConfirmDescription") ||
+                "Are you sure you want to delete this prefix? This action cannot be undone and will permanently remove this prefix from the system."}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeletingPrefix}>
+              {t("common.cancel") || "Cancel"}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              disabled={isDeletingPrefix}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {isDeletingPrefix && (
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+              )}
+              {t("common.delete") || "Delete"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/record-tags/RecordTagActionsCell.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/content/record-tags/RecordTagActionsCell.tsx
new file mode 100644
index 000000000..2a145ec2c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/content/record-tags/RecordTagActionsCell.tsx
@@ -0,0 +1,126 @@
+import { useState } from "react";
+import { Pencil, Trash2 } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+} from "@/shared/common/ui/alert-dialog";
+import { Button } from "@/shared/common/ui/button";
+import { useRecordTags } from "@/user-management/hooks/useRecordTags";
+import { RecordTag } from "@/user-management/dto/recordTags/recordTags.type";
+import { RecordTagForm } from "./RecordTagForm";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+interface Props {
+  row: RecordTag;
+  unitId: string;
+}
+
+export default function RecordTagActionsCell({ row, unitId }: Props) {
+  const [isEditOpen, setIsEditOpen] = useState(false);
+  const [isDeleteOpen, setIsDeleteOpen] = useState(false); // confirmation dialog
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const { deleteRecordTag, refetchRecordTagsList } = useRecordTags({ unitId });
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  // --- Handle Delete ---
+  const confirmDelete = () => {
+    setIsDeleteLoading(true);
+    deleteRecordTag(row.id, {
+      onSuccess: () => {
+        refetchRecordTagsList();
+        setIsDeleteOpen(false);
+      },
+      onError: (error) => {
+        handleError(error);
+      },
+      onSettled: () => {
+        setIsDeleteLoading(false);
+      },
+    });
+  };
+
+  return (
+    <>
+      <div className="flex items-center gap-2">
+        {/* Edit Button */}
+        <Button variant="outline" size="sm" onClick={() => setIsEditOpen(true)}>
+          <Pencil className="h-4 w-4" />
+        </Button>
+
+        {/* Delete Button (opens confirm) */}
+        <Button
+          variant="destructive"
+          size="sm"
+          onClick={() => setIsDeleteOpen(true)}>
+          <Trash2 className="h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* Edit Dialog */}
+      <Dialog open={isEditOpen} onOpenChange={setIsEditOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Edit Record Tag</DialogTitle>
+          </DialogHeader>
+          <RecordTagForm
+            unitId={unitId}
+            mode="edit"
+            id={row.id}
+            defaultValues={{
+              nameAm: row.name?.am ?? "",
+              nameEn: row.name?.en ?? "",
+              key: row.key,
+              unitId: row.unitId,
+            }}
+            onSuccess={() => {
+              setIsEditOpen(false);
+              refetchRecordTagsList();
+            }}
+          />
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Confirmation */}
+      <AlertDialog open={isDeleteOpen} onOpenChange={setIsDeleteOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              Are you sure you want to delete this record tag?
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. The record tag <b>{row.name?.en}</b>{" "}
+              will be permanently removed.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeleteLoading}>
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={confirmDelete}
+              disabled={isDeleteLoading}
+              className="bg-red-600 hover:bg-red-700">
+              {isDeleteLoading ? "Deleting..." : "Delete"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/record-tags/RecordTagForm.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/content/record-tags/RecordTagForm.tsx
new file mode 100644
index 000000000..e30af6467
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/content/record-tags/RecordTagForm.tsx
@@ -0,0 +1,153 @@
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormControl,
+} from "@/shared/common/ui/form";
+import { Input } from "@/shared/common/ui/input";
+
+import {
+  CreateRecordTagPayload,
+  UpdateRecordTagPayload,
+} from "@/user-management/dto/recordTags/recordTags.type";
+import { useRecordTags } from "@/user-management/hooks/useRecordTags";
+
+const recordTagSchema = z.object({
+  nameAm: z.string().min(1, "Amharic name is required"),
+  nameEn: z.string().min(1, "English name is required"),
+  key: z.string().min(1, "Key is required"),
+  unitId: z.string().min(1, "Unit is required"),
+});
+
+export type RecordTagFormValues = z.infer<typeof recordTagSchema>;
+
+interface RecordTagFormProps {
+  defaultValues?: Partial<RecordTagFormValues>;
+  unitId: string;
+  mode: "create" | "edit";
+  id?: string; // required if edit
+  onSuccess?: () => void;
+}
+
+export function RecordTagForm({
+  defaultValues,
+  unitId,
+  mode,
+  id,
+  onSuccess,
+}: RecordTagFormProps) {
+  const form = useForm<RecordTagFormValues>({
+    resolver: zodResolver(recordTagSchema),
+    defaultValues: {
+      nameAm: defaultValues?.nameAm ?? "",
+      nameEn: defaultValues?.nameEn ?? "",
+      key: defaultValues?.key ?? "",
+      unitId: defaultValues?.unitId ?? unitId,
+    },
+  });
+
+  const {
+    createRecordTag,
+    updateRecordTag,
+    isCreatingRecordTag,
+    isUpdatingRecordTag,
+  } = useRecordTags({ unitId });
+
+  const handleSubmit = (values: RecordTagFormValues) => {
+    if (mode === "create") {
+      const payload: CreateRecordTagPayload = {
+        name: { am: values.nameAm, en: values.nameEn },
+        key: values.key,
+        unitId: values.unitId,
+      };
+      createRecordTag(payload, {
+        onSuccess: () => {
+          form.reset();
+          onSuccess?.();
+        },
+      });
+    } else if (mode === "edit" && id) {
+      const payload: UpdateRecordTagPayload = {
+        name: { am: values.nameAm, en: values.nameEn },
+        key: values.key,
+        unitId: values.unitId,
+      };
+      updateRecordTag(
+        { id, payload },
+        {
+          onSuccess: () => {
+            onSuccess?.();
+          },
+        }
+      );
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
+        <FormField
+          control={form.control}
+          name="nameAm"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Amharic Name</FormLabel>
+              <FormControl>
+                <Input placeholder="Enter Amharic name" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="nameEn"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>English Name</FormLabel>
+              <FormControl>
+                <Input placeholder="Enter English name" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="key"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Key</FormLabel>
+              <FormControl>
+                <Input placeholder="Unique key" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <Button
+          type="submit"
+          disabled={isCreatingRecordTag || isUpdatingRecordTag}
+        >
+          {mode === "create"
+            ? isCreatingRecordTag
+              ? "Creating..."
+              : "Create"
+            : isUpdatingRecordTag
+            ? "Updating..."
+            : "Update"}
+        </Button>
+      </form>
+    </Form>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/record-tags/RecordTags.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/content/record-tags/RecordTags.tsx
new file mode 100644
index 000000000..7f72f307f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/content/record-tags/RecordTags.tsx
@@ -0,0 +1,89 @@
+import { useState } from "react";
+import { Button } from "@/shared/common/ui/button";
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/shared/common/ui/dialog";
+import { useTranslation } from "react-i18next";
+import { useRecordTags } from "@/user-management/hooks/useRecordTags";
+import { RecordTagColumnDefn } from "./RecordTagsColumn";
+import { RecordTagForm } from "./RecordTagForm";
+
+export default function RecordTagsManagement({ unitId }: { unitId: string }) {
+  const [pageIndex, setPageIndex] = useState(0);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { t } = useTranslation();
+
+  // --- Record Tags Query ---
+  const { recordTagsList, isLoadingRecordTagsList, refetchRecordTagsList } =
+    useRecordTags({
+      unitId: unitId ?? "",
+    });
+
+  const handlePageChange = (newPage: number) => {
+    setPageIndex(newPage);
+  };
+
+  if (isLoadingRecordTagsList) {
+    return <div>{t("loading")}</div>;
+  }
+
+  return (
+    <div className="p-6 space-y-6">
+      <Card className="col-span-2 shadow-none border-none bg-transparent px-0">
+        <CardHeader className="flex flex-row justify-between items-center px-0">
+          <CardTitle className="text-xl font-semibold">
+            {t("recordTag.title")}
+          </CardTitle>
+
+          {/* Create Button (opens modal) */}
+          <Dialog open={isOpen} onOpenChange={setIsOpen}>
+            <DialogTrigger asChild>
+              <Button>{t("recordTag.createNew")}</Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>{t("recordTag.createTitle")}</DialogTitle>
+              </DialogHeader>
+
+              <RecordTagForm
+                unitId={unitId}
+                mode="create"
+                onSuccess={() => {
+                  setIsOpen(false);
+                  refetchRecordTagsList();
+                }}
+              />
+            </DialogContent>
+          </Dialog>
+        </CardHeader>
+
+        {/* Record Tags Table */}
+        <CardContent className="px-0">
+          <AdvancedTable
+            columns={RecordTagColumnDefn(unitId)}
+            data={recordTagsList?.items || []}
+            tableName={t("recordTag.tableName")}
+            toolBarPosition="right"
+            itemCount={recordTagsList?.count || 0}
+            pageIndex={pageIndex}
+            onPageChange={handlePageChange}
+            nextFunction={() => handlePageChange(pageIndex + 1)}
+            prevFunction={() => handlePageChange(Math.max(pageIndex - 1, 0))}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/record-tags/RecordTagsColumn.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/content/record-tags/RecordTagsColumn.tsx
new file mode 100644
index 000000000..6684a2ebf
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/content/record-tags/RecordTagsColumn.tsx
@@ -0,0 +1,48 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { RecordTag } from "@/user-management/dto/recordTags/recordTags.type";
+import { format } from "date-fns";
+import { t } from "i18next";
+import RecordTagActionsCell from "./RecordTagActionsCell";
+
+import { useLocalizedName } from "@/shared/common/localizedName";
+
+export const RecordTagColumnDefn = (unitId: string): ColumnDef<RecordTag>[] => {
+  return [
+    {
+      accessorKey: "name",
+      header: () => t("recordTag.name"),
+      cell: ({ row }) => {
+        const localizedName = useLocalizedName();
+        const name = row.original?.name;
+        return <span>{localizedName(name)}</span>;
+      },
+    },
+    {
+      accessorKey: "key",
+      header: () => t("recordTag.key"),
+      cell: ({ row }) => {
+        const key = row.original?.key;
+        return <span>{key || "--"}</span>;
+      },
+    },
+    {
+      accessorKey: "createdAt",
+      header: () => t("recordTag.CreatedAt"),
+      cell: ({ row }) => {
+        const date = row.original?.createdAt;
+        return (
+          <span>
+            {date ? format(new Date(date), "MMM d, yyyy HH:mm") : "--"}
+          </span>
+        );
+      },
+    },
+    {
+      id: "actions",
+      header: () => t("recordTag.Actions"),
+      cell: ({ row }) => (
+        <RecordTagActionsCell row={row.original} unitId={unitId} />
+      ),
+    },
+  ];
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/useDebounce.ts b/apps/edr-freight-web/backoffice/src/user-management/components/content/useDebounce.ts
new file mode 100644
index 000000000..a55e0268a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/content/useDebounce.ts
@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react';
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+export function useDebounceCallback<T extends (...args: any[]) => any>(
+  callback: T,
+  delay: number
+): T {
+  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null);
+
+  return ((...args: Parameters<T>) => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+
+    const newTimeoutId = setTimeout(() => {
+      callback(...args);
+    }, delay);
+
+    setTimeoutId(newTimeoutId);
+  }) as T;
+}
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/position-management/ActionsColumn.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/position-management/ActionsColumn.tsx
new file mode 100644
index 000000000..e7613d2e3
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/position-management/ActionsColumn.tsx
@@ -0,0 +1,94 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Button } from "@/shared/common/ui/button";
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from "@/shared/common/ui/alert-dialog";
+import { usePositionTypes } from "@/user-management/hooks/usePositionTypes";
+import { PositionTypeDto } from "@/user-management/dto/positions/positionType";
+import { t } from "i18next";
+
+type ActionsColumnProps = {
+  row: PositionTypeDto;
+};
+
+const ActionsColumn: React.FC<ActionsColumnProps> = ({ row }) => {
+  const navigate = useNavigate();
+  const [openDialog, setOpenDialog] = useState(false);
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+
+  const { deletePositionType } = usePositionTypes({ id: "" });
+
+  const handleDeleteClick = (id: string) => {
+    setDeletingId(id);
+    setOpenDialog(true);
+  };
+
+  const handleDeleteConfirm = async () => {
+    if (!deletingId) return;
+    await deletePositionType.mutateAsync(deletingId);
+    setOpenDialog(false);
+    setDeletingId(null);
+  };
+
+  return (
+    <div className="flex items-center gap-2">
+      <Button
+        variant="outline"
+        onClick={() =>
+          navigate(`/user-management/position-management/edit/${row.id}`)
+        }
+      >
+        {t("common.Edit")}
+      </Button>
+
+      <AlertDialog open={openDialog} onOpenChange={setOpenDialog}>
+        <AlertDialogTrigger asChild>
+          <Button
+            variant="destructive"
+            onClick={() => handleDeleteClick(row.id)}
+          >
+            {t("userRecord.Delete")}
+          </Button>
+        </AlertDialogTrigger>
+
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t("contentManagement.delMsg")}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t("contentManagement.delMsg2")}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel
+              onClick={() => {
+                setOpenDialog(false);
+                setDeletingId(null);
+              }}
+            >
+              {t("common.Cancel")}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDeleteConfirm}
+              disabled={deletePositionType.isPending}
+            >
+              {deletePositionType.isPending
+                ? t("organization.deleting")
+                : t("organization.delete")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+};
+
+export default ActionsColumn;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/position-management/CreatePositionForm.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/position-management/CreatePositionForm.tsx
new file mode 100644
index 000000000..8c06bf50e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/position-management/CreatePositionForm.tsx
@@ -0,0 +1,455 @@
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Input } from "@/shared/common/ui/input";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from "@/shared/common/ui/form";
+import { toast } from "sonner";
+import { usePositionTypes } from "@/user-management/hooks/usePositionTypes";
+import { positionTypePermissionService } from "@/user-management/services/api/positionTypePermissionService";
+import { useNavigate } from "react-router-dom";
+import { t } from "i18next";
+import { useAuth } from "@/shared/context/AuthContext";
+import { useUnit } from "@/user-management/hooks/useUnit";
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { SingleSelect } from "@/shared/common/ui/single-select";
+import { UnitDto } from "@/user-management/dto/unit/unitDto";
+import { PositionTypeDto } from "@/user-management/dto/positions/positionType";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useOrganizations } from "@/super-admin/hooks/useOrganizations";
+import { OrganizationDto } from "@/shared/dto/organization/organizationDto";
+import i18n from "@/i18n";
+import { PermissionSearch } from "./PermissionSearch";
+import { useApplications } from "@/user-management/hooks/useApplications";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+
+const formSchema = z.object({
+  nameAm: z.string().min(2),
+  nameEn: z.string().min(2),
+  permissions: z.array(z.string()),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+export interface CreatePositionFormProps {
+  mode?: "create" | "edit";
+  positionTypeId?: string;
+  initialValues?: {
+    nameAm: string;
+    nameEn: string;
+    unitId: string;
+    key?: string;
+  };
+  onSuccess?: () => void;
+  onCancel?: () => void;
+}
+
+export const CreatePositionForm = ({
+  mode = "create",
+  positionTypeId,
+  initialValues,
+  onSuccess,
+  onCancel,
+}: CreatePositionFormProps = {}) => {
+  const navigate = useNavigate();
+  const {
+    createPositionType,
+    updatePositionType,
+    positionTypes,
+    isLoading: isLoadingPositionTypes,
+  } = usePositionTypes();
+  const { user } = useAuth();
+  const { getList, getById } = useUnit();
+  const localizedName = useLocalizedName();
+  const userOrganizationId =
+    user?.employee && user.employee.length > 0
+      ? user.employee[0].organizationId
+      : undefined;
+  const [selectedOrganizationId, setSelectedOrganizationId] = useState<string>(
+    userOrganizationId ?? "",
+  );
+  const [selectedUnitId, setSelectedUnitId] = useState<string>(
+    initialValues?.unitId ?? "",
+  );
+  const [selectedApplicationId, setSelectedApplicationId] =
+    useState<string>("");
+  const [copyFromPositionId, setCopyFromPositionId] = useState<string>("");
+  const [isCopying, setIsCopying] = useState(false);
+  const [isLoadingEditData, setIsLoadingEditData] = useState(mode === "edit");
+  const hasLoadedEditData = useRef(false);
+  const lang = i18n.language;
+  const { applications, isLoading: isLoadingApplications } = useApplications();
+  const queryClient = useQueryClient();
+
+  const { organizationsResponse, isLoading: isLoadingOrgs } = useOrganizations(
+    "Org",
+    { take: 3000 },
+  );
+
+  const { data: unitsResponse, isLoading: isLoadingUnits } = getList(
+    selectedOrganizationId,
+    { take: 3000, skip: 0 },
+  );
+
+  const organizationOptions = useMemo(
+    () =>
+      (organizationsResponse?.items ?? []).map((org: OrganizationDto) => ({
+        value: org.id,
+        label: localizedName(org.name) || org.id,
+      })),
+    [organizationsResponse, localizedName],
+  );
+
+  const unitOptions = useMemo(
+    () =>
+      (unitsResponse?.data?.items ?? []).map((unit: UnitDto) => ({
+        value: unit.id,
+        label: localizedName(unit.name) || unit.id,
+      })),
+    [unitsResponse, localizedName],
+  );
+
+  const {
+    data: editUnitResponse,
+    isSuccess: isUnitSuccess,
+    isError: isUnitError,
+  } = getById(initialValues?.unitId ?? "");
+
+  const {
+    data: permissionsResponse,
+    isSuccess: isPermissionsSuccess,
+    isError: isPermissionsError,
+  } = useQuery({
+    queryKey: ["position-type-permissions", positionTypeId],
+    queryFn: () =>
+      positionTypePermissionService.getPermissionsByPositionTypeId(
+        positionTypeId!,
+      ),
+    enabled: mode === "edit" && !!positionTypeId,
+  });
+  // Reset the selected unit when the organization changes so a unit from a
+  // different org can't be submitted by mistake.
+  useEffect(() => {
+    if (mode === "edit") return;
+    setSelectedUnitId("");
+  }, [selectedOrganizationId, mode]);
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      nameAm: initialValues?.nameAm ?? "",
+      nameEn: initialValues?.nameEn ?? "",
+      permissions: [],
+    },
+  });
+
+  useEffect(() => {
+    if (mode !== "edit" || !initialValues || !positionTypeId) return;
+    if (hasLoadedEditData.current) return;
+
+    const isUnitDone = !initialValues.unitId || isUnitSuccess || isUnitError;
+    const isPermissionsDone = isPermissionsSuccess || isPermissionsError;
+
+    if (isUnitDone && isPermissionsDone) {
+      hasLoadedEditData.current = true;
+
+      const unit = editUnitResponse?.data;
+      if (unit) {
+        setSelectedOrganizationId(unit.organizationId);
+        setSelectedUnitId(unit.id);
+      } else if (initialValues.unitId) {
+        setSelectedUnitId(initialValues.unitId);
+      }
+
+      const ids = permissionsResponse?.data?.items?.map((p) => p.id) ?? [];
+      form.reset({
+        nameAm: initialValues.nameAm,
+        nameEn: initialValues.nameEn,
+        permissions: ids,
+      });
+
+      setIsLoadingEditData(false);
+    }
+  }, [
+    mode,
+    initialValues,
+    positionTypeId,
+    isUnitSuccess,
+    isUnitError,
+    isPermissionsSuccess,
+    isPermissionsError,
+    editUnitResponse,
+    permissionsResponse,
+    form,
+  ]);
+
+  const handlePermissionChange = (permissionId: string, checked: boolean) => {
+    const currentPermissions = form.getValues("permissions");
+    if (checked) {
+      form.setValue("permissions", [...currentPermissions, permissionId]);
+    } else {
+      form.setValue(
+        "permissions",
+        currentPermissions.filter((id) => id !== permissionId),
+      );
+    }
+  };
+
+  const handleCopyFrom = async (positionTypeId: string) => {
+    setCopyFromPositionId(positionTypeId);
+    if (!positionTypeId) {
+      form.setValue("permissions", []);
+      return;
+    }
+    setIsCopying(true);
+    try {
+      const response =
+        await positionTypePermissionService.getPermissionsByPositionTypeId(
+          positionTypeId,
+        );
+      const ids = response.data.items?.map((p) => p.id) ?? [];
+      form.setValue("permissions", ids);
+    } catch {
+      toast.error(t("contentManagement.copyPermissionsFailed"));
+    } finally {
+      setIsCopying(false);
+    }
+  };
+
+  const onSubmit = async (values: FormValues) => {
+    try {
+      if (!selectedUnitId) {
+        toast.error(t("organization.selectUnit"));
+        return;
+      }
+
+      const payload = {
+        name: {
+          am: values.nameAm,
+          en: values.nameEn,
+        },
+        key: values.nameEn.toLowerCase().replace(/\s+/g, "-"),
+        unitId: selectedUnitId,
+      };
+
+      let targetId = positionTypeId;
+
+      if (mode === "edit" && positionTypeId) {
+        await updatePositionType.mutateAsync({
+          id: positionTypeId,
+          data: payload,
+        });
+      } else {
+        const response = await createPositionType.mutateAsync(payload);
+        targetId = response.data.id;
+      }
+
+      if (targetId && values.permissions.length > 0) {
+        await positionTypePermissionService.assignPermissionsToPositionType({
+          firstId: targetId,
+          secondIds: values.permissions,
+        });
+      }
+
+      queryClient.invalidateQueries({
+        queryKey: ["position-type"],
+      });
+      queryClient.invalidateQueries({ queryKey: ["position-types"] });
+      queryClient.invalidateQueries({
+        queryKey: ["position-type-permissions"],
+      });
+      toast.success(t("contentManagement.permissionSuccess"));
+
+      if (onSuccess) {
+        onSuccess();
+      } else {
+        navigate("/user-management/position-management");
+      }
+    } catch {
+      toast.error(t("contentManagement.permissionSuccess"));
+    }
+  };
+
+  if (isLoadingEditData) {
+    return (
+      <div className="py-8 text-center text-muted-foreground">
+        {t("common.loading")}
+      </div>
+    );
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <FormField
+          control={form.control}
+          name="nameEn"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t("contentManagement.englishName")}</FormLabel>
+              <FormControl>
+                <Input {...field} placeholder="e.g. HR Coordinator" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="nameAm"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t("contentManagement.amharicName")}</FormLabel>
+              <FormControl>
+                <Input {...field} placeholder="e.g. ሰብል አያት" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {/* ✅ Organization (searchable, all orgs) */}
+        <div className="mb-4 w-full">
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            {t("organization.organization") || "Organization"}
+          </label>
+          <SingleSelect
+            options={organizationOptions}
+            value={selectedOrganizationId}
+            onValueChange={setSelectedOrganizationId}
+            placeholder={
+              isLoadingOrgs
+                ? t("common.loading")
+                : t("organization.selectOrganization") ||
+                  "Select an organization"
+            }
+          />
+        </div>
+
+        {/* ✅ Unit Selector — searchable, scoped to picked org */}
+        <div className="mb-4 w-full">
+          <label className="block text-sm font-medium text-gray-700 mb-1">
+            {t("organization.selectUnit")}
+          </label>
+          <SingleSelect
+            options={unitOptions}
+            value={selectedUnitId}
+            onValueChange={setSelectedUnitId}
+            placeholder={
+              !selectedOrganizationId
+                ? t("organization.selectOrganizationFirst") ||
+                  "Select an organization first"
+                : isLoadingUnits
+                  ? t("common.loading")
+                  : t("organization.selectUnit")
+            }
+          />
+        </div>
+
+        <div className="mb-4 w-1/2">
+          <label className="block text-sm font-medium text-gray-700">
+            {t("contentManagement.selectApplication")}
+          </label>
+          <Select
+            value={selectedApplicationId}
+            onValueChange={(value) => setSelectedApplicationId(value)}
+            disabled={isLoadingApplications}>
+            <SelectTrigger className="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
+              <SelectValue placeholder="Select an Application" />
+            </SelectTrigger>
+            <SelectContent className="max-h-60 overflow-y-auto">
+              {applications?.map((app) => (
+                <SelectItem key={app.id} value={app.id}>
+                  {lang === "en" ? app.name.en : app.name.am}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-2">
+          <label className="block text-sm font-medium text-gray-700">
+            {t("contentManagement.copyPermissionsFrom")}
+          </label>
+          <Select
+            value={copyFromPositionId}
+            onValueChange={handleCopyFrom}
+            disabled={isLoadingPositionTypes || isCopying}>
+            <SelectTrigger className="w-full">
+              <SelectValue
+                placeholder={
+                  isCopying
+                    ? t("common.loading")
+                    : t("contentManagement.selectPositionToCopy")
+                }
+              />
+            </SelectTrigger>
+            <SelectContent className="max-h-60 overflow-y-auto">
+              {positionTypes.map((p: PositionTypeDto) => (
+                <SelectItem key={p.id} value={p.id}>
+                  {localizedName(p.name)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <p className="text-xs text-muted-foreground">
+            {t("contentManagement.copyPermissionsHint")}
+          </p>
+        </div>
+
+        <FormField
+          control={form.control}
+          name="permissions"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t("contentManagement.permission")}</FormLabel>
+              <PermissionSearch
+                selectedPermissions={field.value}
+                onPermissionChange={handlePermissionChange}
+                applicationId={selectedApplicationId}
+              />
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <div className="flex justify-end gap-4">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => {
+              if (onCancel) {
+                onCancel();
+              } else {
+                window.history.back();
+              }
+            }}>
+            {t("common.Cancel")}
+          </Button>
+          <Button
+            type="submit"
+            disabled={
+              createPositionType.isPending || updatePositionType.isPending
+            }>
+            {mode === "edit" ? t("delegation.update") : t("delegation.save")}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/position-management/DeletePositionTypes.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/position-management/DeletePositionTypes.tsx
new file mode 100644
index 000000000..afaa11f9b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/position-management/DeletePositionTypes.tsx
@@ -0,0 +1,71 @@
+import EnhancedDynamicModal from '@/record-management/common/EnhancedDynamicModal';
+import { usePositionTypes } from '@/user-management/hooks/usePositionTypes';
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
+
+interface DeletePositionTypesProps {
+  id: string;
+  onSuccess: () => void;
+  onClose: () => void;
+}
+
+
+const DeletePositionTypes = (
+    {
+    id,
+    onSuccess,
+    onClose
+}: DeletePositionTypesProps
+
+) => {
+    const { t } = useTranslation();
+  const { deletePositionType, refetch } = usePositionTypes({ id });
+
+    const handleDelete = useCallback(async()=>{
+        try{
+        await deletePositionType.mutateAsync(id);
+        await refetch();
+        onSuccess();
+        toast.success("Position type deleted successfully");
+
+        }catch(error) {
+            if (
+              typeof error === "object" &&
+              error !== null &&
+              "statusCode" in error &&
+              (error as any).statusCode === 400 &&
+              "response" in error &&
+              (error as any).response &&
+              "data" in (error as any).response &&
+              (error as any).response.data &&
+              "code" in (error as any).response.data &&
+              (error as any).response.data.code === "23503"
+            ) {
+              toast.error(
+                "This Position Type is still in use and cannot be deleted."
+              );
+            } else {
+              toast.error("An unexpected error occurred.");
+            }
+            console.error("Error deleting position type:", error);
+            toast.error("Error deleting position type");
+        }
+    },[ deletePositionType, id ]);
+
+  return (
+    <EnhancedDynamicModal
+      open={true}
+      onClose={onClose}
+      title={t("userRecord.Delete Record")}
+      actionConfig={{
+        type: "delete",
+        onAction: handleDelete,
+        confirmText: t("userRecord.Confirm Delete"),
+        confirmVariant: "default",
+      }}
+    />
+  );
+};
+
+export default DeletePositionTypes;
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/position-management/EditPositionForm.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/position-management/EditPositionForm.tsx
new file mode 100644
index 000000000..e69a6eedb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/position-management/EditPositionForm.tsx
@@ -0,0 +1,160 @@
+import { useEffect, useState } from "react";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import { Label } from "@/shared/common/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { useNavigate } from "react-router-dom";
+
+import { useUnit } from "@/user-management/hooks/useUnit";
+import { useAuth } from "@/shared/context/AuthContext";
+import { positionTypePermissionService } from "@/user-management/services/api/positionTypePermissionService";
+import { usePositionTypes } from "@/user-management/hooks/usePositionTypes";
+import { useApplications } from "@/user-management/hooks/useApplications";
+import { PermissionSearch } from "./PermissionSearch";
+import { PermissionDto } from "@/user-management/dto/permissions/permissonDto";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { UnitDto } from "@/user-management/dto/unit/unitDto";
+import { t } from "i18next";
+
+export const EditPositionForm = ({ id }: { id: string }) => {
+  const navigate = useNavigate();
+  const { user } = useAuth();
+  const { getList } = useUnit();
+  const localizedName = useLocalizedName();
+
+  const { positionType, isLoadingSingle } = usePositionTypes({ id });
+
+  const organizationId =
+    user?.employee && user.employee.length > 0
+      ? user.employee[0].organizationId
+      : undefined;
+
+  const { applications, isLoading: isLoadingApplications } = useApplications();
+
+  const { data: unitsResponse } = getList(organizationId || "", {
+    take: 300,
+    skip: 0,
+  });
+
+  const [selectedApplicationId, setSelectedApplicationId] =
+    useState<string>("");
+  const [assignedPermissions, setAssignedPermissions] = useState<
+    PermissionDto[]
+  >([]);
+  const [isLoadingPermissions, setIsLoadingPermissions] = useState(false);
+
+  useEffect(() => {
+    const load = async () => {
+      if (!positionType) return;
+      setIsLoadingPermissions(true);
+      try {
+        const assigned =
+          await positionTypePermissionService.getPermissionsByPositionTypeId(
+            positionType.id,
+          );
+        setAssignedPermissions(assigned.data.items ?? []);
+      } finally {
+        setIsLoadingPermissions(false);
+      }
+    };
+    load();
+  }, [positionType]);
+
+  if (isLoadingSingle) return <p>Loading...</p>;
+  if (!positionType) return null;
+
+  const unit = unitsResponse?.data?.items?.find(
+    (u: UnitDto) => u.id === positionType.unitId,
+  );
+  const unitName = unit ? unit.name.en || unit.name.am : positionType.unitId;
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <Label>{t("contentManagement.englishName")}</Label>
+        <Input value={positionType.name.en} disabled readOnly />
+      </div>
+
+      <div className="space-y-2">
+        <Label>{t("contentManagement.amharicName")}</Label>
+        <Input value={positionType.name.am} disabled readOnly />
+      </div>
+
+      <div className="space-y-2">
+        <Label>Key</Label>
+        <Input value={positionType.key} disabled readOnly />
+      </div>
+
+      <div className="space-y-2">
+        <Label>{t("contentManagement.selectApplication")}</Label>
+        <Select
+          value={selectedApplicationId}
+          onValueChange={(value) => setSelectedApplicationId(value)}
+          disabled={isLoadingApplications}
+        >
+          <SelectTrigger className="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
+            <SelectValue placeholder="Select an Application" />
+          </SelectTrigger>
+          <SelectContent className="max-h-60 overflow-y-auto">
+            {applications?.map((app: any) => (
+              <SelectItem key={app.id} value={app.id}>
+                {localizedName(app.name)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="space-y-2">
+        <Label>{t("contentManagement.permission")}</Label>
+        {selectedApplicationId ? (
+          <PermissionSearch
+            selectedPermissions={assignedPermissions.map((perm) => perm.id)}
+            onPermissionChange={() => {
+              // view-only mode in edit form
+            }}
+            applicationId={selectedApplicationId}
+            disabled
+          />
+        ) : (
+          <div className="border rounded-md p-4 bg-background max-h-96 overflow-y-auto">
+            {isLoadingPermissions ? (
+              <div className="text-center py-4 text-gray-500">Loading...</div>
+            ) : assignedPermissions.length === 0 ? (
+              <div className="text-center py-4 text-gray-500">
+                {t("contentManagement.noPermissionsAvailable")}
+              </div>
+            ) : (
+              <ul className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                {assignedPermissions.map((perm) => (
+                  <li
+                    key={perm.id}
+                    className="capitalize text-sm py-1 px-2 rounded bg-muted/40"
+                  >
+                    {localizedName(perm.name)}
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        )}
+      </div>
+
+      <div className="flex justify-end">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={() => navigate("/user-management/position-management")}
+        >
+          {t("common.Back")}
+        </Button>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/position-management/NotificationBell.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/position-management/NotificationBell.tsx
new file mode 100644
index 000000000..fd9ee8db7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/position-management/NotificationBell.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { Bell } from "lucide-react";
+import { useNotifications } from "@/shared/hooks/useNotification";
+
+export const NotificationBell = () => {
+  const { unseenCount } = useNotifications({ take: 1, skip: 0, orderBy: "createdAt:DESC" });
+
+  return (
+    <div className="relative cursor-pointer">
+      <Bell className="w-6 h-6" />
+      {unseenCount > 0 && (
+        <span className="absolute -top-1 -right-1 bg-red-500 text-white rounded-full text-xs px-1">
+          {unseenCount > 99 ? "99+" : unseenCount}
+        </span>
+      )}
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/position-management/PermissionSearch.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/position-management/PermissionSearch.tsx
new file mode 100644
index 000000000..bfc645fc7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/position-management/PermissionSearch.tsx
@@ -0,0 +1,152 @@
+import React, { useState, useEffect, useMemo, useRef } from "react";
+import { Input } from "@/shared/common/ui/input";
+import { Checkbox } from "@/shared/common/ui/checkbox";
+import { usePermissionManager } from "@/user-management/hooks/usePermissionManager";
+import { PermissionDto } from "@/user-management/dto/permissions/permissonDto";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { t } from "i18next";
+import { Search, Loader2 } from "lucide-react";
+
+interface PermissionSearchProps {
+  selectedPermissions: string[];
+  onPermissionChange: (permissionId: string, checked: boolean) => void;
+  applicationId?: string;
+  disabled?: boolean;
+}
+
+const INITIAL_TAKE = 50; // Initial number of items to fetch
+
+export const PermissionSearch: React.FC<PermissionSearchProps> = ({
+  selectedPermissions,
+  onPermissionChange,
+  applicationId,
+  disabled = false,
+}) => {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+  const [take, setTake] = useState(INITIAL_TAKE); // Start with 50
+  const hasSetTotalCount = useRef(false); // Track if we've set the total count
+
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  const localizedName = useLocalizedName();
+
+  /** ------------------ 1. Debounce Search ------------------ */
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm);
+      setTake(INITIAL_TAKE); // Reset to 50
+      hasSetTotalCount.current = false; // Reset the flag
+    }, 300);
+
+    return () => clearTimeout(timer);
+  }, [searchTerm]);
+
+  /** ------------------ 2. Fetch Permissions ------------------ */
+  const { permissions, isPermissionsLoading } = usePermissionManager({
+    params: applicationId
+      ? {
+          take,
+          skip: 0, // Always skip 0, we fetch everything at once
+          search: debouncedSearchTerm || undefined,
+          applicationId,
+        }
+      : undefined,
+  });
+
+  /** ------------------ 3. Update take to total count after first fetch ------------------ */
+  useEffect(() => {
+    if (
+      permissions?.count &&
+      !hasSetTotalCount.current &&
+      take !== permissions.count
+    ) {
+      hasSetTotalCount.current = true;
+      setTake(permissions.count); // Fetch all items
+    }
+  }, [permissions?.count, take]);
+
+  /** ------------------ 4. Client-side Filtering (Optional) ------------------ */
+  const filteredPermissions = useMemo(() => {
+    if (!permissions?.items?.length) return [];
+    if (!searchTerm.trim()) return permissions.items;
+
+    return permissions.items.filter((perm: PermissionDto) => {
+      const name = localizedName(perm.name).toLowerCase();
+      const key = perm.key.toLowerCase();
+      const search = searchTerm.toLowerCase();
+      return name.includes(search) || key.includes(search);
+    });
+  }, [permissions?.items, searchTerm, localizedName]);
+
+  /** ------------------ Render ------------------ */
+  return (
+    <div className="space-y-4">
+      {/* Search Input */}
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
+        <Input
+          placeholder={t("contentManagement.searchPermissions")}
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          className="pl-10"
+        />
+      </div>
+
+      {/* Permission List Container */}
+      {!applicationId ? (
+        <div className="max-h-96 overflow-y-auto border rounded-md p-4 bg-background text-center text-gray-500">
+          {t("contentManagement.selectApplicationToLoadPermissions") ||
+            "Select an application to load permissions."}
+        </div>
+      ) : isPermissionsLoading ? (
+        <div className="flex justify-center py-10">
+          <Loader2 className="h-8 w-8 animate-spin text-gray-400" />
+        </div>
+      ) : (
+        <div
+          ref={scrollContainerRef}
+          className="max-h-96 overflow-y-auto border rounded-md p-4 bg-background"
+        >
+          {filteredPermissions.length === 0 ? (
+            <div className="text-center py-4 text-gray-500">
+              {searchTerm
+                ? t("contentManagement.noPermissionsFound")
+                : t("contentManagement.noPermissionsAvailable")}
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {filteredPermissions.map((perm: PermissionDto) => (
+                <div
+                  key={perm.id}
+                  className="flex flex-row items-start space-x-3 space-y-0"
+                >
+                  <Checkbox
+                    checked={selectedPermissions.includes(perm.id)}
+                    disabled={disabled}
+                    onCheckedChange={(checked) => {
+                      if (!disabled) onPermissionChange(perm.id, !!checked);
+                    }}
+                  />
+                  <label className="capitalize cursor-pointer font-normal text-sm">
+                    {localizedName(perm.name)}
+                  </label>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Footer Info */}
+      {filteredPermissions.length > 0 && (
+        <div className="text-xs text-muted-foreground px-1">
+          {t("contentManagement.showingPermissions", {
+            count: filteredPermissions.length,
+            total: permissions?.count || 0,
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/position-management/PositionLists.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/position-management/PositionLists.tsx
new file mode 100644
index 000000000..44f298ef0
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/position-management/PositionLists.tsx
@@ -0,0 +1,276 @@
+import { useEffect, useState, useMemo } from "react";
+import { Button } from "@/shared/common/ui/button";
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+
+import { Link } from "react-router-dom";
+import { Plus } from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import { usePositionTypes } from "@/user-management/hooks/usePositionTypes";
+import { createPositionTypeColumns } from "./PositionTypeColumnDefn";
+import { positionTypeService } from "@/user-management/services/api/positionTypesService";
+import { t } from "i18next";
+import { useUnit } from "@/user-management/hooks/useUnit";
+import { useAuth } from "@/shared/context/AuthContext";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { UnitDto } from "@/user-management/dto/unit/unitDto";
+import { usePositionTypeConfiguration } from "@/user-management/hooks/usePostionType";
+
+export default function PositionManagement() {
+  const [pageIndex, setPageIndex] = useState(0);
+  const pageSize = 10;
+  const [isExporting, setIsExporting] = useState<boolean>(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const { createConfiguration } = usePositionTypeConfiguration();
+
+  const { user } = useAuth();
+
+  const { getAccessibleList } = useUnit();
+
+  const organizationId = user?.employee?.[0]?.organizationId;
+
+  const { data: unitsResponse } = getAccessibleList(organizationId ?? "", {
+    take: 300,
+    skip: 0,
+  });
+
+  // Add state for selected unitId
+  // Default: if super_admin => "All", otherwise wait for units
+  const [selectedUnitId, setSelectedUnitId] = useState<string>("All");
+
+  useEffect(() => {
+    // If there’s no selectedUnitId yet, default to first unit (if any), otherwise keep "All"
+    if (!selectedUnitId) {
+      if (unitsResponse?.data?.items?.length) {
+        setSelectedUnitId(unitsResponse.data.items[0].id);
+      } else {
+        setSelectedUnitId("All");
+      }
+    }
+  }, [unitsResponse, selectedUnitId]);
+
+  // Reset to first page whenever the search term or unit changes so users
+  // land on the first page of matches instead of an empty later page.
+  useEffect(() => {
+    setPageIndex(0);
+  }, [searchTerm, selectedUnitId]);
+
+  const handlePageChange = (newPage: number) => {
+    setPageIndex(newPage);
+  };
+  const {
+    positionTypeResponse,
+    isLoading,
+    positionTypeByUnitId,
+    refetch,
+    refetchPosition,
+  } = usePositionTypes({
+    params: {
+      take: 1000,
+      skip: 0,
+      orderBy: "updatedAt:DESC",
+    },
+    unitId: selectedUnitId === "All" ? undefined : selectedUnitId,
+  });
+
+  // Fetch position types without unitId for migration options
+  const {
+    positionTypeResponse: globalPositionTypes,
+    refetch: refetchGlobalPositionTypes,
+  } = usePositionTypes({
+    params: {
+      take: 1000, // Get all global position types
+      skip: 0,
+      orderBy: "updatedAt:DESC",
+    },
+    unitId: undefined, // Explicitly fetch position types without unitId
+  });
+
+  // Create a combined refetch function for the onDelete callback
+  const handlePositionTypeDeleted = async () => {
+    await Promise.all([
+      selectedUnitId === "All" ? refetch() : refetchPosition(),
+      refetchGlobalPositionTypes(),
+    ]);
+  };
+  const handleToggle = async (
+    positionTypeId: string,
+    checked: boolean,
+    field: "canReceiveRecord" | "canAssignRecord" | "canCreateBankRecord",
+  ) => {
+    if (!selectedUnitId || selectedUnitId === "All") return;
+
+    await createConfiguration({
+      positionTypeId,
+      timeframe: "yearly",
+      organizationId: organizationId!,
+      canReceiveRecord: field === "canReceiveRecord" ? checked : false,
+      canAssignRecord: field === "canAssignRecord" ? checked : false,
+      canCreateBankRecord: field === "canCreateBankRecord" ? checked : false,
+    });
+
+    await handlePositionTypeDeleted();
+  };
+
+  // Create columns with positionTypeResponse
+  const columns = useMemo(
+    () =>
+      createPositionTypeColumns(
+        selectedUnitId === "All" ? positionTypeResponse : positionTypeByUnitId,
+        globalPositionTypes,
+        handlePositionTypeDeleted,
+        handlePositionTypeDeleted,
+        handleToggle, // ← pass toggle handler
+        selectedUnitId === "All", // ← isGlobal: hide toggle when "All"
+      ),
+    [
+      selectedUnitId,
+      positionTypeResponse,
+      positionTypeByUnitId,
+      globalPositionTypes,
+    ],
+  );
+  const allItems = useMemo(
+    () =>
+      (selectedUnitId === "All"
+        ? positionTypeResponse?.items
+        : positionTypeByUnitId?.items) || [],
+    [selectedUnitId, positionTypeResponse?.items, positionTypeByUnitId?.items],
+  );
+
+  const filteredItems = useMemo(() => {
+    const trimmed = searchTerm.trim().toLowerCase();
+    if (!trimmed) return allItems;
+    return allItems.filter((item: any) => {
+      const en = (item?.name?.en || "").toLowerCase();
+      const am = (item?.name?.am || "").toLowerCase();
+      const key = (item?.key || "").toLowerCase();
+      return (
+        en.includes(trimmed) || am.includes(trimmed) || key.includes(trimmed)
+      );
+    });
+  }, [allItems, searchTerm]);
+
+  const paginatedItems = useMemo(() => {
+    const start = pageIndex * pageSize;
+    return filteredItems.slice(start, start + pageSize);
+  }, [filteredItems, pageIndex, pageSize]);
+
+  if (isLoading) {
+    return <div>{t("contentManagement.addUser")}</div>;
+  }
+
+  const exportTypes = () => {
+    setIsExporting(true);
+    positionTypeService
+      .getAll({
+        take: 3000,
+      })
+      .then((allPositionKeys) => {
+        // Get the position type keys
+        const positionTypeKeys = allPositionKeys.data?.items?.map((p) => p.key);
+
+        if (positionTypeKeys && positionTypeKeys.length > 0) {
+          // Convert the array of keys into a string, with each key on a new line
+          const fileContent = positionTypeKeys.join("\n");
+
+          // Create a Blob from the string content
+          const blob = new Blob([fileContent], { type: "text/plain" });
+
+          // Create a link element to trigger the download
+          const link = document.createElement("a");
+
+          // Create an object URL for the Blob
+          link.href = URL.createObjectURL(blob);
+
+          // Set the download attribute with a file name
+          link.download = "position_keys.txt";
+
+          // Programmatically trigger a click on the link to start the download
+          link.click();
+
+          // Clean up by revoking the object URL
+          URL.revokeObjectURL(link.href);
+        } else {
+          console.error("No position type keys found.");
+        }
+        setIsExporting(false);
+      });
+  };
+
+  return (
+    <div className="p-6 space-y-6">
+      <Card className="col-span-2 shadow-none border-none bg-transparent px-0">
+        <CardHeader className="flex flex-row justify-between items-center px-0">
+          <CardTitle className="text-xl font-semibold ">
+            {t("contentManagement.permissionType")}
+          </CardTitle>
+          <Button onClick={exportTypes}>
+            {isExporting
+              ? t("contentManagement.exporting")
+              : t("contentManagement.exportTypes")}
+          </Button>
+        </CardHeader>
+        {unitsResponse?.data?.items?.length > 0 && (
+          <div className="mb-4 w-1/2">
+            <label className="block text-sm font-medium text-gray-700">
+              Select Unit
+            </label>
+            <Select
+              value={selectedUnitId}
+              onValueChange={(value) => setSelectedUnitId(value)}
+            >
+              <SelectTrigger className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm [&>span]:truncate">
+                <SelectValue placeholder="Select a Unit" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem key="all" value="All">
+                  All
+                </SelectItem>
+                {unitsResponse?.data.items.map((unit: UnitDto) => (
+                  <SelectItem key={unit.id} value={unit.id}>
+                    <span className="block truncate max-w-70">
+                      {unit.name.en || unit.name.am}
+                    </span>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+        <CardContent className="px-0">
+          <AdvancedTable
+            columns={columns}
+            data={paginatedItems}
+            tableName="Positions"
+            toolBarPosition="right"
+            itemCount={filteredItems.length}
+            onGlobalFilterChange={setSearchTerm}
+            extraToolbar={
+              <Link to="/user-management/position-management/new">
+                <Button className="px-5 py-2 rounded-md text-sm font-medium shadow-md">
+                  <Plus className="w-4 h-4 mr-2" />
+                  {t("contentManagement.newPermission")}
+                </Button>
+              </Link>
+            }
+            pageIndex={pageIndex}
+            onPageChange={handlePageChange}
+            nextFunction={() => handlePageChange(pageIndex + 1)}
+            prevFunction={() => handlePageChange(Math.max(pageIndex - 1, 0))}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/position-management/PositionTypeActions.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/position-management/PositionTypeActions.tsx
new file mode 100644
index 000000000..32613a0ea
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/position-management/PositionTypeActions.tsx
@@ -0,0 +1,393 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { PositionTypeDto } from "@/user-management/dto/positions/positionType";
+
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+} from "@/shared/common/ui/dropdown-menu";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+
+import { Button } from "@/shared/common/ui/button";
+import { MoreVertical, Edit, Eye, Trash2, Pencil } from "lucide-react";
+import { t } from "i18next";
+import PositionTypeMigrationModal from "./PostionTypeMigration";
+import { CreatePositionForm } from "./CreatePositionForm";
+import { toast } from "sonner";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { positionTypeService } from "@/user-management/services/api/positionTypesService";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { usePositionTypeConfiguration } from "@/user-management/hooks/usePostionType";
+import { Switch } from "@/shared/common/ui/switch";
+import { PositionTypeConfigurationDto } from "@/user-management/services/api/positionTypeConfigurationService";
+import { useQueryClient } from "@tanstack/react-query";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+
+interface PositionTypeResponse {
+  items: PositionTypeDto[];
+  count: number;
+}
+
+type ActionsCellProps = {
+  row: PositionTypeDto | PositionTypeConfigurationDto;
+  globalPositionTypes?: PositionTypeResponse;
+  onDelete?: () => void | Promise<void>;
+  onEdit?: () => void | Promise<void>;
+  onToggle?: (
+    positionTypeId: string,
+    checked: boolean,
+    field: "canReceiveRecord" | "canAssignRecord" | "canCreateBankRecord",
+  ) => void | Promise<void>;
+  isGlobal?: boolean; // true when viewing "All" units — hide toggle
+};
+
+const PositionTypeActionsCell: React.FC<ActionsCellProps> = ({
+  row,
+  globalPositionTypes,
+  onDelete,
+  onEdit,
+  onToggle,
+  isGlobal = false,
+}) => {
+  const navigate = useNavigate();
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [showMigrateDialog, setShowMigrateDialog] = useState(false);
+  const [showEditDialog, setShowEditDialog] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const localizedName = useLocalizedName();
+  const { handleError } = useErrorHandler(t);
+  const queryClient = useQueryClient();
+  // Use row.id as the positionTypeId for the configuration lookup
+
+  const {
+    configurations,
+    isLoadingConfigurations,
+    updateConfiguration,
+    isUpdatingConfiguration,
+  } = usePositionTypeConfiguration(
+    row?.id ?? null, // 👈 pass row.id as unitId
+  );
+
+  const configItem = configurations[0];
+  const isCanReceiveRecord = configItem?.canReceiveRecord ?? false;
+  const isCanAssignRecord = configItem?.canAssignRecord ?? false;
+  const isCanCreateBankRecord = configItem?.canCreateBankRecord ?? false;
+
+  const invalidateConfig = () => {
+    queryClient.invalidateQueries({
+      queryKey: ["positionTypeConfigurations", row.id],
+    });
+    queryClient.invalidateQueries({
+      queryKey: ["positionTypeConfiguration", row.id],
+    });
+  };
+
+  // Create position type options from globalPositionTypes - only those WITHOUT unitId
+  const positionTypeOptions =
+    globalPositionTypes?.items
+      .filter((item) => !item.unitId)
+      .map((item) => ({
+        label: localizedName(item.name),
+        value: item.id,
+      })) || [];
+
+  // Only show migrate/delete actions if current row has a unitId
+  const canBeModified = !!row.unitId;
+
+  const handleView = () => {
+    navigate(`/user-management/position-management/edit/${row.id}`);
+  };
+
+  const handleMigrate = (e: Event) => {
+    e.preventDefault();
+    setDropdownOpen(false);
+    setShowMigrateDialog(true);
+  };
+
+  const handleEdit = (e: Event) => {
+    e.preventDefault();
+    setDropdownOpen(false);
+    setShowEditDialog(true);
+  };
+
+  const handleDelete = async () => {
+    try {
+      setIsDeleting(true);
+      await positionTypeService.delete(row.id);
+      toast.success(t("common.DeletedSuccessfully"));
+      setShowDeleteDialog(false);
+      if (onDelete) {
+        await onDelete();
+      }
+    } catch (error) {
+      handleError(error);
+      toast.error(t("common.FailedToDelete"));
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const handleToggleChange = async (checked: boolean) => {
+    if (isGlobal) return;
+    try {
+      if (configItem?.id) {
+        await updateConfiguration({
+          id: configItem.id,
+          payload: {
+            organizationId: configItem.organizationId,
+            positionTypeId: configItem.positionTypeId,
+            timeframe: configItem.timeframe,
+            canReceiveRecord: checked,
+          },
+        });
+      } else {
+        await onToggle?.(row.id, checked, "canReceiveRecord");
+      }
+      toast.success(t("incomingRecord.UpdatedSuccessfully"));
+      invalidateConfig();
+    } catch (error) {
+      handleError(error);
+      toast.error(t("incomingRecord.FailedToUpdate"));
+    }
+  };
+
+  const handleAssignToggleChange = async (checked: boolean) => {
+    if (isGlobal) return;
+    try {
+      if (configItem?.id) {
+        await updateConfiguration({
+          id: configItem.id,
+          payload: {
+            organizationId: configItem.organizationId,
+            positionTypeId: configItem.positionTypeId,
+            timeframe: configItem.timeframe,
+            canAssignRecord: checked,
+          },
+        });
+      } else {
+        await onToggle?.(row.id, checked, "canAssignRecord");
+      }
+      toast.success(t("incomingRecord.UpdatedSuccessfully"));
+      invalidateConfig();
+    } catch (error) {
+      handleError(error);
+      toast.error(t("incomingRecord.FailedToUpdate"));
+    }
+  };
+
+  const handleCreateBankRecordToggleChange = async (checked: boolean) => {
+    if (isGlobal) return;
+    try {
+      if (configItem?.id) {
+        await updateConfiguration({
+          id: configItem.id,
+          payload: {
+            organizationId: configItem.organizationId,
+            positionTypeId: configItem.positionTypeId,
+            timeframe: configItem.timeframe,
+            canCreateBankRecord: checked,
+          },
+        });
+      } else {
+        await onToggle?.(row.id, checked, "canCreateBankRecord");
+      }
+      toast.success(t("incomingRecord.UpdatedSuccessfully"));
+      invalidateConfig();
+    } catch (error) {
+      handleError(error);
+      toast.error(t("incomingRecord.FailedToUpdate"));
+    }
+  };
+  const rowName = "name" in row ? row.name : { am: "", en: "" };
+  const isPositionType = "name" in row && "key" in row;
+
+  return (
+    <>
+      <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="h-8 w-8 p-0">
+            <MoreVertical className="h-4 w-4" />
+            <span className="sr-only">Open actions menu</span>
+          </Button>
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent
+          align="end"
+          onInteractOutside={(e) => {
+            const target = e.target as HTMLElement;
+            if (!target.closest('[role="dialog"]')) {
+              setDropdownOpen(false);
+            }
+          }}>
+          <DropdownMenuLabel>Actions</DropdownMenuLabel>
+
+          {canBeModified && (
+            <DropdownMenuItem
+              onSelect={handleMigrate}
+              className="cursor-pointer hover:!text-primary-700 !bg-transparent !transition-colors duration-200">
+              <Edit className="mr-2 h-4 w-4 group-hover:text-white transition-colors duration-200" />
+              <span> {t("common.Migrate")}</span>
+            </DropdownMenuItem>
+          )}
+
+          {canBeModified && isPositionType && (
+            <DropdownMenuItem
+              onSelect={handleEdit}
+              className="cursor-pointer hover:!text-primary-700 !bg-transparent !transition-colors duration-200">
+              <Pencil className="mr-2 h-4 w-4 group-hover:text-white transition-colors duration-200" />
+              <span>{t("common.Edit")}</span>
+            </DropdownMenuItem>
+          )}
+
+          <DropdownMenuItem
+            onSelect={handleView}
+            className="cursor-pointer hover:!text-primary-700 !bg-transparent !transition-colors duration-200">
+            <Eye className="mr-2 h-4 w-4 group-hover:text-white transition-colors duration-200" />
+            <span>{t("common.View")}</span>
+          </DropdownMenuItem>
+
+          {canBeModified && (
+            <DropdownMenuItem
+              onSelect={() => {
+                setDropdownOpen(false);
+                setShowDeleteDialog(true);
+              }}
+              className="cursor-pointer hover:!text-red-500 !bg-transparent !transition-colors duration-200">
+              <Trash2 className="mr-2 h-4 w-4 group-hover:text-white transition-colors duration-200" />
+              <span>{t("common.Delete")}</span>
+            </DropdownMenuItem>
+          )}
+
+          {/* Toggle moved here from ToggleCell */}
+          {!isGlobal && (
+            <div className="px-2 py-2 border-t mt-1">
+              <div className="flex items-center justify-between">
+                <span className="text-sm">
+                  {t("contentManagement.CanReceiveRecord")}
+                </span>
+                <Switch
+                  checked={isCanReceiveRecord}
+                  disabled={isLoadingConfigurations || isUpdatingConfiguration}
+                  onCheckedChange={handleToggleChange}
+                />
+              </div>
+            </div>
+          )}
+          {!isGlobal && (
+            <div className="px-2 py-2 border-t mt-1">
+              <div className="flex items-center justify-between">
+                <span className="text-sm">
+                  {t("contentManagement.CanAssignRecord")}
+                </span>
+                <Switch
+                  checked={isCanAssignRecord}
+                  disabled={isLoadingConfigurations || isUpdatingConfiguration}
+                  onCheckedChange={handleAssignToggleChange}
+                />
+              </div>
+            </div>
+          )}
+          {!isGlobal && (
+            <div className="px-2 py-2 border-t mt-1">
+              <div className="flex items-center justify-between gap-4">
+                <span className="text-sm">
+                  {t("contentManagement.CanCreateBankRecord")}
+                </span>
+                <Switch
+                  checked={isCanCreateBankRecord}
+                  disabled={isLoadingConfigurations || isUpdatingConfiguration}
+                  onCheckedChange={handleCreateBankRecordToggleChange}
+                />
+              </div>
+            </div>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {showMigrateDialog && (
+        <PositionTypeMigrationModal
+          isOpen={showMigrateDialog}
+          onClose={() => {
+            setShowMigrateDialog(false);
+          }}
+          toId={row.id}
+          toName={localizedName(rowName)}
+          positionTypeOptions={positionTypeOptions}
+        />
+      )}
+
+      <Dialog open={showEditDialog} onOpenChange={setShowEditDialog}>
+        <DialogContent className="sm:max-w-3xl max-h-[90vh] flex flex-col p-6">
+          <DialogHeader className="pb-4">
+            <DialogTitle>{t("common.Edit")}</DialogTitle>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto pr-2 min-h-0">
+            {isPositionType && showEditDialog && (
+              <CreatePositionForm
+                key={row.id + "-edit"}
+                mode="edit"
+                positionTypeId={row.id}
+                initialValues={{
+                  nameAm: row.name.am,
+                  nameEn: row.name.en,
+                  unitId: row.unitId,
+                  key: row.key,
+                }}
+                onSuccess={async () => {
+                  setShowEditDialog(false);
+                  if (onEdit) {
+                    await onEdit();
+                  }
+                }}
+                onCancel={() => setShowEditDialog(false)}
+              />
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t("common.ConfirmDelete")}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t("common.DeleteConfirmationMessage", {
+                defaultValue: `Are you sure you want to delete "${localizedName(rowName)}"? This action cannot be undone.`,
+              })}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t("common.Cancel")}</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              disabled={isDeleting}
+              className="bg-red-500 hover:bg-red-600">
+              {isDeleting ? t("common.Deleting") : t("common.Delete")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+};
+
+export default PositionTypeActionsCell;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/position-management/PositionTypeColumnDefn.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/position-management/PositionTypeColumnDefn.tsx
new file mode 100644
index 000000000..d5fcb509e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/position-management/PositionTypeColumnDefn.tsx
@@ -0,0 +1,74 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { format } from "date-fns";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { PositionTypeDto } from "@/user-management/dto/positions/positionType";
+import PositionTypeActionsCell from "./PositionTypeActions";
+import { t } from "i18next";
+
+interface PositionTypeResponse {
+  items: PositionTypeDto[];
+  count: number;
+}
+
+const NameCell = ({ name }: { name: PositionTypeDto["name"] }) => {
+  const localizedName = useLocalizedName();
+  return <span>{localizedName(name)}</span>;
+};
+
+export const createPositionTypeColumns = (
+  _positionTypeResponse?: PositionTypeResponse,
+  globalPositionTypes?: PositionTypeResponse,
+  onDelete?: () => void | Promise<void>,
+  onEdit?: () => void | Promise<void>,
+  onToggle?: (
+    positionTypeId: string,
+    checked: boolean,
+    field: "canReceiveRecord" | "canAssignRecord" | "canCreateBankRecord",
+  ) => void | Promise<void>,
+  isGlobal?: boolean,
+): ColumnDef<PositionTypeDto>[] => [
+  {
+    accessorKey: "name",
+    header: () => t("common.name"),
+    cell: ({ row }) => <NameCell name={row.original.name} />,
+  },
+  {
+    accessorKey: "key",
+    header: () => t("contentManagement.key"),
+    cell: ({ row }) => <span>{row.original.key}</span>,
+  },
+  {
+    accessorKey: "createdAt",
+    header: () => t("contentManagement.createdAt"),
+    cell: ({ row }) => (
+      <span>
+        {format(new Date(row.original.createdAt), "MMM d, yyyy HH:mm")}
+      </span>
+    ),
+  },
+  {
+    accessorKey: "updatedAt",
+    header: () => t("contentManagement.updatedAt"),
+    cell: ({ row }) => (
+      <span>
+        {format(new Date(row.original.updatedAt), "MMM d, yyyy HH:mm")}
+      </span>
+    ),
+  },
+  {
+    id: "actions",
+    header: () => t("userRecord.Actions"),
+    cell: ({ row }) => (
+      <PositionTypeActionsCell
+        row={row.original}
+        globalPositionTypes={globalPositionTypes}
+        onDelete={onDelete}
+        onEdit={onEdit}
+        onToggle={onToggle}
+        isGlobal={isGlobal}
+      />
+    ),
+  },
+];
+
+export const PositionTypeColumnDefn = createPositionTypeColumns();
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/position-management/PostionTypeMigration.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/position-management/PostionTypeMigration.tsx
new file mode 100644
index 000000000..dfb418d8f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/position-management/PostionTypeMigration.tsx
@@ -0,0 +1,422 @@
+import React, { useState, useMemo } from "react";
+import { toast } from "sonner";
+import { usePositionTypes } from "@/user-management/hooks/usePositionTypes";
+import useSettings from "@/record-management/components/hooks/useSettings";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { t } from "i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogTrigger,
+} from "@/shared/common/ui/alert-dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { Input } from "@/shared/common/ui/input";
+import { Label } from "@/shared/common/ui/label";
+import { Search, X, ArrowLeftRight } from "lucide-react";
+import { Badge } from "@/shared/common/ui/badge";
+interface PositionTypeMigrationModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  fromId?: string; // Optional - can be selected if not provided
+  fromName?: string;
+  toId?: string; // Optional - can be selected if not provided
+  toName?: string;
+  unitId?: string;
+  positionTypeOptions?: { label: string; value: string }[]; // For dropdown selection
+}
+
+const PositionTypeMigrationModal: React.FC<PositionTypeMigrationModalProps> = ({
+  isOpen,
+  onClose,
+  fromId: initialFromId,
+  fromName: initialFromName,
+  toId: initialToId,
+  toName: initialToName,
+  unitId,
+  positionTypeOptions = [],
+}) => {
+  const [selectedPositions, setSelectedPositions] = useState<string[]>([]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [page, setPage] = useState(1);
+  const pageSize = 20;
+  
+  // State for from/to selection
+  const [fromId, setFromId] = useState<string>(initialFromId || "");
+  const [toId, setToId] = useState<string>(initialToId || "");
+
+  const { updatePositionTypeFromTo, migratePositionsByPositions } =
+    usePositionTypes();
+  const { allScopedDepartments } = useSettings();
+  const localizedName = useLocalizedName();
+  const { handleError } = useErrorHandler(t);
+
+  // Combined options so the preset (initial) from/to are also selectable on either side.
+  const combinedOptions = useMemo(() => {
+    const merged = [...positionTypeOptions];
+    const ensure = (value?: string, label?: string) => {
+      if (!value) return;
+      if (!merged.some((opt) => opt.value === value)) {
+        merged.push({ value, label: label || value });
+      }
+    };
+    ensure(initialFromId, initialFromName);
+    ensure(initialToId, initialToName);
+    return merged;
+  }, [positionTypeOptions, initialFromId, initialFromName, initialToId, initialToName]);
+
+  // Get names from combined options if not provided
+  const fromName =
+    combinedOptions.find((opt) => opt.value === fromId)?.label ||
+    initialFromName ||
+    fromId;
+  const toName =
+    combinedOptions.find((opt) => opt.value === toId)?.label ||
+    initialToName ||
+    toId;
+
+  const handleSwap = () => {
+    setFromId(toId);
+    setToId(fromId);
+  };
+
+  // Map positions from allScopedDepartments
+  const positions = useMemo(() => {
+    return Array.isArray(allScopedDepartments)
+      ? allScopedDepartments.map((pos) => ({
+          id: pos.id,
+          name: localizedName(pos.name) || "N/A",
+        }))
+      : [];
+  }, [allScopedDepartments, localizedName]);
+
+
+  // Filter positions based on search query
+  const filteredPositions = useMemo(() => {
+    if (!searchQuery.trim()) return positions;
+
+    return positions.filter((pos) =>
+      pos.name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+  }, [positions, searchQuery]);
+
+  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+    if (scrollTop + clientHeight >= scrollHeight - 5) {
+      if (page * pageSize < filteredPositions.length) {
+        setPage((prev) => prev + 1);
+      }
+    }
+  };
+
+  const handleSelectPosition = (positionId: string) => {
+    if (!selectedPositions.includes(positionId)) {
+      setSelectedPositions((prev) => [...prev, positionId]);
+      setSearchQuery(""); // Clear search after selection
+      setPage(1); // Reset page
+    }
+  };
+
+  const handleRemovePosition = (positionId: string) => {
+    setSelectedPositions((prev) => prev.filter((id) => id !== positionId));
+  };
+
+  const handleMigrateAll = () => {
+    if (!fromId || !toId) {
+      toast.error(t("migration.selectBothPositionTypes"));
+      return;
+    }
+
+    updatePositionTypeFromTo.mutate(
+      { toId, fromId },
+      {
+        onSuccess: () => {
+          toast.success(t("migration.allPositionsMigratedSuccess"));
+          onClose();
+        },
+        onError: (error) => {
+          handleError(error);
+        },
+      }
+    );
+  };
+
+  const handleMigrateSelected = () => {
+    if (!fromId || !toId) {
+      toast.error(t("migration.selectBothPositionTypes"));
+      return;
+    }
+
+    if (selectedPositions.length === 0) {
+      toast.error(t("migration.selectAtLeastOnePosition"));
+      return;
+    }
+
+    migratePositionsByPositions.mutate(
+      {
+        id: toId,
+        data: { positionIds: selectedPositions },
+      },
+      {
+        onSuccess: () => {
+          toast.success(
+            t("migration.selectedPositionsMigratedSuccess", { count: selectedPositions.length })
+          );
+          onClose();
+        },
+        onError: (error) => {
+          handleError(error);
+        },
+      }
+    );
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+      <div className="bg-white dark:bg-gray-800 dark:border dark:border-gray-700 rounded-lg shadow-lg w-[700px] max-h-[80vh] overflow-y-auto p-6">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">{t("migration.title")}</h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="flex h-8 w-8 items-center justify-center rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* From / To Selection with Swap */}
+        {combinedOptions.length > 0 && (
+          <div className="mb-4 flex items-end gap-2">
+            <div className="flex-1">
+              <Label className="text-sm font-medium text-gray-700 dark:text-gray-300">{t("migration.fromPositionType")}</Label>
+              <Select value={fromId} onValueChange={setFromId}>
+                <SelectTrigger className="w-full mt-1">
+                  <SelectValue placeholder={t("migration.selectSourcePositionType")} />
+                </SelectTrigger>
+                <SelectContent>
+                  {combinedOptions
+                    .filter((opt) => opt.value !== toId)
+                    .map((opt) => (
+                      <SelectItem key={opt.value} value={opt.value}>
+                        {opt.label}
+                      </SelectItem>
+                    ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <button
+              type="button"
+              onClick={handleSwap}
+              disabled={!fromId && !toId}
+              title={t("migration.swap") || "Swap"}
+              aria-label={t("migration.swap") || "Swap from and to"}
+              className="mb-0.5 p-2 rounded border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <ArrowLeftRight className="h-4 w-4 text-gray-600 dark:text-gray-300" />
+            </button>
+
+            <div className="flex-1">
+              <Label className="text-sm font-medium text-gray-700 dark:text-gray-300">{t("migration.toPositionType")}</Label>
+              <Select value={toId} onValueChange={setToId}>
+                <SelectTrigger className="w-full mt-1">
+                  <SelectValue placeholder={t("migration.selectTargetPositionType")} />
+                </SelectTrigger>
+                <SelectContent>
+                  {combinedOptions
+                    .filter((opt) => opt.value !== fromId)
+                    .map((opt) => (
+                      <SelectItem key={opt.value} value={opt.value}>
+                        {opt.label}
+                      </SelectItem>
+                    ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        )}
+
+        {/* Display selected from/to */}
+        {fromId && toId && (
+          <p className="mb-4 p-3 bg-blue-50 dark:bg-blue-950/30 rounded border border-blue-200 dark:border-blue-800">
+            <span className="text-sm text-gray-600 dark:text-gray-300">{t("migration.migrationPath")}:</span>
+            <br />
+            <strong className="text-blue-700 dark:text-blue-400">{fromName}</strong>
+            <span className="mx-2">→</span>
+            <strong className="text-primary-700 dark:text-primary-400">{toName}</strong>
+          </p>
+        )}
+
+        {/* Option 1: Migrate all */}
+        <div className="mb-4">
+          <AlertDialog>
+            <AlertDialogTrigger asChild>
+              <button
+                className="w-full bg-primary-600 text-white px-4 py-2 rounded hover:bg-primary-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
+                disabled={updatePositionTypeFromTo.isPending || !fromId || !toId}
+              >
+                {t("migration.migrateAllPositions")}
+              </button>
+            </AlertDialogTrigger>
+
+            <AlertDialogContent className="bg-white dark:bg-gray-800 dark:border-gray-700">
+              <AlertDialogHeader>
+                <AlertDialogTitle className="text-gray-900 dark:text-white">{t("migration.confirmMigration")}</AlertDialogTitle>
+                <AlertDialogDescription className="text-gray-600 dark:text-gray-300">
+                  {t("migration.migrateAllDescription", { fromName, toName })}
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+
+              <AlertDialogFooter>
+                <AlertDialogCancel className="bg-white dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">{t("common.Cancel")}</AlertDialogCancel>
+                <AlertDialogAction
+                  onClick={handleMigrateAll}
+                  className="bg-primary-600 hover:bg-primary-700 text-white"
+                >
+                  {t("migration.yesMigrateAll")}
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        </div>
+
+        {/* Option 2: Migrate selected */}
+        <div>
+          <Label className="mb-2 font-medium text-gray-700 dark:text-gray-300">{t("migration.migrateSelectedPositions")}</Label>
+          
+          {/* Selected Positions Display */}
+          {selectedPositions.length > 0 && (
+            <div className="flex flex-wrap gap-2 mb-3 p-2 border rounded bg-gray-50 dark:bg-gray-900 dark:border-gray-700">
+              {selectedPositions.map((posId) => {
+                const position = positions.find((p) => p.id === posId);
+                return (
+                  <Badge
+                    key={posId}
+                    variant="secondary"
+                    className="flex items-center gap-1 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600"
+                  >
+                    {position?.name || posId}
+                    <X
+                      className="h-3 w-3 cursor-pointer hover:text-red-600"
+                      onClick={() => handleRemovePosition(posId)}
+                    />
+                  </Badge>
+                );
+              })}
+            </div>
+          )}
+
+          {/* Position Select Dropdown with Search */}
+          <Select onValueChange={handleSelectPosition}>
+            <SelectTrigger>
+              <SelectValue placeholder={t("migration.selectPositionsToMigrate")} />
+            </SelectTrigger>
+            <SelectContent
+              style={{ maxHeight: "300px", overflowY: "auto" }}
+              onScroll={handleScroll}
+            >
+              {/* Search Input inside Dropdown */}
+              <div className="sticky top-0 z-10 bg-background p-2 border-b">
+                <div className="relative">
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
+                  <Input
+                    type="text"
+                    placeholder={t("migration.searchPositions")}
+                    value={searchQuery}
+                    onChange={(e) => {
+                      e.stopPropagation();
+                      setSearchQuery(e.target.value);
+                      setPage(1);
+                    }}
+                    onClick={(e) => e.stopPropagation()}
+                    className="pl-10 h-9 text-sm"
+                  />
+                </div>
+              </div>
+
+              {/* Position List */}
+              {filteredPositions.length > 0 ? (
+                filteredPositions.slice(0, page * pageSize).map((pos) => (
+                  <SelectItem
+                    key={pos.id}
+                    value={pos.id}
+                    disabled={selectedPositions.includes(pos.id)}
+                  >
+                    <div className="flex items-center justify-between w-full">
+                      <span>{pos.name}</span>
+                      {selectedPositions.includes(pos.id) && (
+                        <span className="text-xs text-primary-600 ml-2">
+                          ✓ {t("migration.selected")}
+                        </span>
+                      )}
+                    </div>
+                  </SelectItem>
+                ))
+              ) : (
+                <div className="text-center py-4 text-sm text-muted-foreground">
+                  {searchQuery
+                    ? t("migration.noPositionsFound")
+                    : t("migration.noPositionsAvailable")}
+                </div>
+              )}
+            </SelectContent>
+          </Select>
+
+          <AlertDialog>
+            <AlertDialogTrigger asChild>
+              <button
+                className="w-full mt-3 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
+                disabled={
+                  migratePositionsByPositions.isPending ||
+                  selectedPositions.length === 0 ||
+                  !fromId ||
+                  !toId
+                }
+              >
+                {t("migration.migrateSelectedButton", { count: selectedPositions.length })}
+              </button>
+            </AlertDialogTrigger>
+
+            <AlertDialogContent className="bg-white dark:bg-gray-800 dark:border-gray-700">
+              <AlertDialogHeader>
+                <AlertDialogTitle className="text-gray-900 dark:text-white">{t("migration.confirmSelectedMigration")}</AlertDialogTitle>
+                <AlertDialogDescription className="text-gray-600 dark:text-gray-300">
+                  {t("migration.migrateSelectedDescription", { count: selectedPositions.length, fromName, toName })}
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+
+              <AlertDialogFooter>
+                <AlertDialogCancel className="bg-white dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">{t("common.Cancel")}</AlertDialogCancel>
+                <AlertDialogAction
+                  onClick={handleMigrateSelected}
+                  className="bg-blue-600 hover:bg-blue-700 text-white"
+                >
+                  {t("common.Confirm")}
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        </div>
+
+
+      </div>
+    </div>
+  );
+};
+
+export default PositionTypeMigrationModal;
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/user-position-approvals/UserPositionApprovalActions.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/user-position-approvals/UserPositionApprovalActions.tsx
new file mode 100644
index 000000000..5abd34669
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/user-position-approvals/UserPositionApprovalActions.tsx
@@ -0,0 +1,40 @@
+import { Check, X } from "lucide-react";
+import { Button } from "@/shared/common/ui/button";
+import type { EmployeePositionChangeRequest } from "@/user-management/services/api/employeePositionChangeRequestService";
+
+export type UserPositionApprovalDecision = "approve" | "reject";
+
+interface UserPositionApprovalActionsProps {
+  item: EmployeePositionChangeRequest;
+  onDecision: (
+    type: UserPositionApprovalDecision,
+    item: EmployeePositionChangeRequest,
+  ) => void;
+}
+
+export default function UserPositionApprovalActions({
+  item,
+  onDecision,
+}: UserPositionApprovalActionsProps) {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Button
+        size="sm"
+        onClick={() => onDecision("approve", item)}
+        className="gap-1.5"
+      >
+        <Check className="h-4 w-4" />
+        Approve
+      </Button>
+      <Button
+        size="sm"
+        variant="destructive"
+        onClick={() => onDecision("reject", item)}
+        className="gap-1.5"
+      >
+        <X className="h-4 w-4" />
+        Reject
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/user-position-approvals/UserPositionApprovalCards.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/user-position-approvals/UserPositionApprovalCards.tsx
new file mode 100644
index 000000000..e0f77301e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/user-position-approvals/UserPositionApprovalCards.tsx
@@ -0,0 +1,45 @@
+import type { EmployeePositionChangeRequest } from "@/user-management/services/api/employeePositionChangeRequestService";
+import UserPositionApprovalActions, {
+  type UserPositionApprovalDecision,
+} from "./UserPositionApprovalActions";
+import { getDisplayName } from "./userPositionApprovalUtils";
+
+interface UserPositionApprovalCardsProps {
+  items: EmployeePositionChangeRequest[];
+  onDecision: (
+    type: UserPositionApprovalDecision,
+    item: EmployeePositionChangeRequest,
+  ) => void;
+}
+
+export default function UserPositionApprovalCards({
+  items,
+  onDecision,
+}: UserPositionApprovalCardsProps) {
+  return (
+    <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+      {items.map((item) => (
+        <article
+          key={item.id}
+          className="rounded-lg border bg-white p-5 shadow-sm dark:border-slate-700 dark:bg-slate-900"
+        >
+          <h2 className="font-semibold text-slate-900 dark:text-slate-100">
+            {getDisplayName(item.employee?.name)}
+          </h2>
+          <p className="text-sm text-slate-500">
+            {item.employee?.user?.email || "-"}
+          </p>
+          <dl className="my-4 grid grid-cols-[auto_1fr] gap-x-3 gap-y-2 text-sm">
+            <dt className="text-slate-500">From</dt>
+            <dd>{getDisplayName(item.fromPosition?.name)}</dd>
+            <dt className="text-slate-500">To</dt>
+            <dd>{getDisplayName(item.toPosition?.name)}</dd>
+            <dt className="text-slate-500">Status</dt>
+            <dd>{item.status || "PENDING"}</dd>
+          </dl>
+          <UserPositionApprovalActions item={item} onDecision={onDecision} />
+        </article>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/user-position-approvals/UserPositionApprovalColumns.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/user-position-approvals/UserPositionApprovalColumns.tsx
new file mode 100644
index 000000000..68f934d43
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/user-position-approvals/UserPositionApprovalColumns.tsx
@@ -0,0 +1,69 @@
+import { ColumnDef } from "@tanstack/react-table";
+import type { EmployeePositionChangeRequest } from "@/user-management/services/api/employeePositionChangeRequestService";
+import UserPositionApprovalActions, {
+  type UserPositionApprovalDecision,
+} from "./UserPositionApprovalActions";
+import { getDisplayName } from "./userPositionApprovalUtils";
+import { renderStatus } from "@/record-management/utils/renderDetails";
+
+export const createUserPositionApprovalColumns = (
+  onDecision: (
+    type: UserPositionApprovalDecision,
+    item: EmployeePositionChangeRequest,
+  ) => void,
+): ColumnDef<EmployeePositionChangeRequest>[] => [
+  {
+    accessorKey: "employee",
+    header: () => "User",
+    cell: ({ row }) => (
+      <span className="font-medium">
+        {getDisplayName(row.original.employee?.name)}
+      </span>
+    ),
+  },
+  {
+    id: "email",
+    header: () => "Email",
+    cell: ({ row }) => (
+      <span className="text-slate-500">
+        {row.original.employee?.user?.email || "-"}
+      </span>
+    ),
+  },
+  {
+    id: "fromPosition",
+    header: () => "From Position",
+    cell: ({ row }) => (
+      <span>{getDisplayName(row.original.fromPosition?.name)}</span>
+    ),
+  },
+  {
+    id: "toPosition",
+    header: () => "To Position",
+    cell: ({ row }) => (
+      <span>{getDisplayName(row.original.toPosition?.name)}</span>
+    ),
+  },
+  {
+    accessorKey: "status",
+    header: () => "Status",
+    cell: ({ row }) => (
+      <span>
+        {renderStatus(
+          row.original.status || "pending",
+          row.original.status || "pending",
+        )}
+      </span>
+    ),
+  },
+  {
+    id: "actions",
+    header: () => "Actions",
+    cell: ({ row }) => (
+      <UserPositionApprovalActions
+        item={row.original}
+        onDecision={onDecision}
+      />
+    ),
+  },
+];
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/user-position-approvals/UserPositionApprovalDecisionDialog.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/user-position-approvals/UserPositionApprovalDecisionDialog.tsx
new file mode 100644
index 000000000..aef209054
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/user-position-approvals/UserPositionApprovalDecisionDialog.tsx
@@ -0,0 +1,82 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { Button } from "@/shared/common/ui/button";
+import { Textarea } from "@/shared/common/ui/textarea";
+import type { EmployeePositionChangeRequest } from "@/user-management/services/api/employeePositionChangeRequestService";
+import type { UserPositionApprovalDecision } from "./UserPositionApprovalActions";
+
+interface UserPositionApprovalDecisionDialogProps {
+  decision: {
+    type: UserPositionApprovalDecision;
+    item: EmployeePositionChangeRequest;
+  } | null;
+  comment: string;
+  isSubmitting: boolean;
+  onCommentChange: (value: string) => void;
+  onClose: () => void;
+  onSubmit: () => void;
+}
+
+export default function UserPositionApprovalDecisionDialog({
+  decision,
+  comment,
+  isSubmitting,
+  onCommentChange,
+  onClose,
+  onSubmit,
+}: UserPositionApprovalDecisionDialogProps) {
+  return (
+    <Dialog
+      open={Boolean(decision)}
+      onOpenChange={(open) => !open && !isSubmitting && onClose()}
+    >
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            {decision?.type === "approve" ? "Approve" : "Reject"} position
+            change request
+          </DialogTitle>
+          <DialogDescription>
+            {decision?.type === "approve"
+              ? "Confirm this employee position change request."
+              : "Confirm that this employee position change request should be rejected."}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-2">
+          <label htmlFor="decision-comment" className="text-sm font-medium">
+            Comment
+          </label>
+          <Textarea
+            id="decision-comment"
+            value={comment}
+            onChange={(event) => onCommentChange(event.target.value)}
+            placeholder="Add a comment for this decision"
+            rows={4}
+          />
+        </div>
+        <DialogFooter>
+          <Button variant="outline" disabled={isSubmitting} onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            variant={decision?.type === "reject" ? "destructive" : "default"}
+            disabled={isSubmitting}
+            onClick={onSubmit}
+          >
+            {isSubmitting
+              ? "Submitting..."
+              : decision?.type === "approve"
+                ? "Approve"
+                : "Reject"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/user-position-approvals/UserPositionApprovalList.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/user-position-approvals/UserPositionApprovalList.tsx
new file mode 100644
index 000000000..4588f59f8
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/user-position-approvals/UserPositionApprovalList.tsx
@@ -0,0 +1,191 @@
+import { useMemo, useState } from "react";
+import { Grid2X2, List, RefreshCw, Search, UserRoundCheck } from "lucide-react";
+import { Button } from "@/shared/common/ui/button";
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import { useEmployeePositionChangeRequests } from "@/user-management/hooks/useEmployeePositionChangeRequests";
+import type { EmployeePositionChangeRequest } from "@/user-management/services/api/employeePositionChangeRequestService";
+import UserPositionApprovalCards from "./UserPositionApprovalCards";
+import { createUserPositionApprovalColumns } from "./UserPositionApprovalColumns";
+import UserPositionApprovalDecisionDialog from "./UserPositionApprovalDecisionDialog";
+import type { UserPositionApprovalDecision } from "./UserPositionApprovalActions";
+import { getDisplayName } from "./userPositionApprovalUtils";
+
+type ViewMode = "table" | "card";
+const PAGE_SIZE = 10;
+
+export default function UserPositionApprovalList() {
+  const [viewMode, setViewMode] = useState<ViewMode>("table");
+  const [search, setSearch] = useState("");
+  const [pageIndex, setPageIndex] = useState(0);
+  const [decision, setDecision] = useState<{
+    type: UserPositionApprovalDecision;
+    item: EmployeePositionChangeRequest;
+  } | null>(null);
+  const [comment, setComment] = useState("");
+
+  const { requestsQuery, approve, reject, isApproving, isRejecting } =
+    useEmployeePositionChangeRequests({ take: 50, skip: 0, status: "pending" });
+
+  const items = useMemo(() => {
+    const term = search.trim().toLowerCase();
+    const source = requestsQuery.data?.items ?? [];
+    if (!term) return source;
+    return source.filter((item) =>
+      [
+        getDisplayName(item.employee?.name),
+        item.employee?.user?.email,
+        getDisplayName(item.fromPosition?.name),
+        getDisplayName(item.toPosition?.name),
+        item.status,
+      ].some((value) => value?.toLowerCase().includes(term)),
+    );
+  }, [requestsQuery.data?.items, search]);
+
+  const isSubmitting = isApproving || isRejecting;
+  const paginatedItems = useMemo(() => {
+    const start = pageIndex * PAGE_SIZE;
+    return items.slice(start, start + PAGE_SIZE);
+  }, [items, pageIndex]);
+
+  const openDecision = (
+    type: UserPositionApprovalDecision,
+    item: EmployeePositionChangeRequest,
+  ) => {
+    setComment("");
+    setDecision({ type, item });
+  };
+
+  const closeDecision = () => {
+    setDecision(null);
+    setComment("");
+  };
+
+  const submitDecision = async () => {
+    if (!decision) return;
+    const payload = { id: decision.item.id, comment: comment.trim() };
+    if (decision.type === "approve") {
+      await approve(payload);
+    } else {
+      await reject(payload);
+    }
+    closeDecision();
+  };
+
+  const columns = useMemo(
+    () => createUserPositionApprovalColumns(openDecision),
+    [],
+  );
+
+  const handlePageChange = (newPage: number) => {
+    setPageIndex(newPage);
+  };
+
+  return (
+    <div className="w-full space-y-6 p-4 sm:p-6">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="flex items-center gap-2 text-2xl font-bold text-slate-900 dark:text-slate-100">
+            <UserRoundCheck className="h-6 w-6 text-primary" />
+            User Position Approvals
+          </h1>
+          <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
+            Review pending employee position change requests.
+          </p>
+        </div>
+        <span className="w-fit rounded-full bg-amber-100 px-3 py-1 text-sm font-medium text-amber-800 dark:bg-amber-950 dark:text-amber-200">
+          {requestsQuery.data?.count ?? 0} pending
+        </span>
+      </div>
+
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
+          <input
+            value={search}
+            onChange={(event) => {
+              setSearch(event.target.value);
+              setPageIndex(0);
+            }}
+            placeholder="Search by user, email, position, or status"
+            className="h-10 w-full rounded-md border border-slate-200 bg-white pl-9 pr-3 text-sm outline-none focus:ring-2 focus:ring-primary/30 dark:border-slate-700 dark:bg-slate-900"
+          />
+        </div>
+        <div className="flex rounded-md border border-slate-200 p-1 dark:border-slate-700">
+          <Button
+            size="sm"
+            variant={viewMode === "table" ? "default" : "ghost"}
+            onClick={() => setViewMode("table")}
+            aria-label="Table view"
+          >
+            <List className="h-4 w-4" />
+          </Button>
+          <Button
+            size="sm"
+            variant={viewMode === "card" ? "default" : "ghost"}
+            onClick={() => setViewMode("card")}
+            aria-label="Card view"
+          >
+            <Grid2X2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {requestsQuery.isError ? (
+        <div className="rounded-lg border border-red-200 bg-red-50 p-8 text-center dark:border-red-900 dark:bg-red-950/30">
+          <p className="text-sm text-red-700 dark:text-red-300">
+            The employee position change request API is not available.
+          </p>
+          <Button
+            variant="outline"
+            className="mt-4 gap-2"
+            onClick={() => requestsQuery.refetch()}
+          >
+            <RefreshCw className="h-4 w-4" /> Retry
+          </Button>
+        </div>
+      ) : viewMode === "card" ? (
+        requestsQuery.isLoading ? (
+          <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+            {[1, 2, 3, 4, 5, 6].map((item) => (
+              <div
+                key={item}
+                className="h-44 animate-pulse rounded-lg bg-slate-200 dark:bg-slate-800"
+              />
+            ))}
+          </div>
+        ) : items.length === 0 ? (
+          <div className="rounded-lg border border-dashed p-12 text-center text-slate-500 dark:border-slate-700">
+            <UserRoundCheck className="mx-auto mb-3 h-9 w-9" />
+            <p className="font-medium">No pending user position approvals</p>
+          </div>
+        ) : (
+          <UserPositionApprovalCards items={items} onDecision={openDecision} />
+        )
+      ) : (
+        <AdvancedTable
+          columns={columns}
+          data={paginatedItems}
+          tableName="User Position Approvals"
+          itemCount={items.length}
+          pageIndex={pageIndex}
+          pageSize={PAGE_SIZE}
+          onPageChange={handlePageChange}
+          nextFunction={() => handlePageChange(pageIndex + 1)}
+          prevFunction={() => handlePageChange(Math.max(pageIndex - 1, 0))}
+          refresh={() => requestsQuery.refetch()}
+          isLoading={requestsQuery.isLoading}
+          hideToolbarFilter
+        />
+      )}
+
+      <UserPositionApprovalDecisionDialog
+        decision={decision}
+        comment={comment}
+        isSubmitting={isSubmitting}
+        onCommentChange={setComment}
+        onClose={closeDecision}
+        onSubmit={submitDecision}
+      />
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/user-position-approvals/userPositionApprovalUtils.ts b/apps/edr-freight-web/backoffice/src/user-management/components/user-position-approvals/userPositionApprovalUtils.ts
new file mode 100644
index 000000000..fb9572f72
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/user-position-approvals/userPositionApprovalUtils.ts
@@ -0,0 +1,6 @@
+export const getDisplayName = (
+  value?: string | { en?: string; am?: string },
+): string => {
+  if (!value) return "-";
+  return typeof value === "string" ? value : value.en || value.am || "-";
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/dto/applications/applicationDto.ts b/apps/edr-freight-web/backoffice/src/user-management/dto/applications/applicationDto.ts
new file mode 100644
index 000000000..74e73e974
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/dto/applications/applicationDto.ts
@@ -0,0 +1,17 @@
+export interface ApplicationName {
+  am: string;
+  en: string;
+}
+
+export interface ApplicationDto {
+  id: string;
+  key: string;
+  name: ApplicationName;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ApplicationListResponse {
+  count: number;
+  items: ApplicationDto[];
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/dto/employees/employees.ts b/apps/edr-freight-web/backoffice/src/user-management/dto/employees/employees.ts
new file mode 100644
index 000000000..ec285a9dc
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/dto/employees/employees.ts
@@ -0,0 +1,105 @@
+export interface EmployeeWithUnitDto {
+  avatar: string | undefined;
+  id: string;
+  name: {
+    charAt(
+      arg0: number
+    ): import("react").ReactNode | Iterable<import("react").ReactNode>;
+    am: string;
+    en: string;
+  };
+  user: {
+    id: string;
+    name: {
+      am: string;
+      en: string;
+    };
+    email: string;
+    phoneNumber?: string;
+  };
+  employeePositions: {
+    id: string;
+    employeeId: string;
+    position: {
+      id: string;
+      name: {
+        am: string;
+        en: string;
+      };
+    };
+  }[];
+}
+
+export interface EmployeeWithUnitListResponse {
+  count: number;
+  items: EmployeeWithUnitDto[];
+}
+
+export interface EmployeeByPositionDto {
+  employeePositions: any;
+  id: string;
+  isCurrent: boolean;
+  status: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  organizationId: string;
+  user: {
+    id: string;
+    name: {
+      am: string;
+      en: string;
+    };
+    username: string;
+    email: string;
+    userType: string;
+    sharepointId: string | null;
+    status: string;
+  };
+}
+
+export interface EmployeePosition {
+  id: string;
+  position: {
+    id: string;
+    name: {
+      am: string;
+      en: string;
+    };
+  };
+}
+
+export interface Employee {
+  id: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  employeePositions: EmployeePosition[];
+}
+
+export interface User {
+  id: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  email: string;
+  employee: Employee[];
+}
+
+export interface UserDTO {
+  id: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  email: string;
+  employee: Employee[];
+}
+
+export interface UserWithUnitListResponse {
+  count: number;
+  items: UserDTO[];
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/dto/permissions/permissonDto.ts b/apps/edr-freight-web/backoffice/src/user-management/dto/permissions/permissonDto.ts
new file mode 100644
index 000000000..36d6adc0a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/dto/permissions/permissonDto.ts
@@ -0,0 +1,17 @@
+export interface PermissionName {
+  am: string;
+  en: string;
+}
+
+export interface PermissionDto {
+  id: string;
+  key: string;
+  name: PermissionName;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface PermissionListResponse {
+  count: number;
+  items: PermissionDto[];
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/dto/positions/positionDto.ts b/apps/edr-freight-web/backoffice/src/user-management/dto/positions/positionDto.ts
new file mode 100644
index 000000000..d8c0b8b2e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/dto/positions/positionDto.ts
@@ -0,0 +1,16 @@
+export interface PositionDto {
+  createdAt: string;
+  updatedAt: string;
+  id: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  key: string;
+  parentPositionId: string | null;
+  unitId: string;
+  organizationId: string;
+  projectId: string | null;
+  subPositions: PositionDto[];
+  positionTypeId: string;
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/dto/positions/positionType.ts b/apps/edr-freight-web/backoffice/src/user-management/dto/positions/positionType.ts
new file mode 100644
index 000000000..3f76be9f7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/dto/positions/positionType.ts
@@ -0,0 +1,19 @@
+export interface PositionTypeDto {
+  id: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  key: string;
+  unitId: string;
+  canReceiveRecord: boolean;
+  canCreateBankRecord?: boolean;
+  canAssignRecord: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface PositionTypesListResponse {
+  count: number;
+  items: PositionTypeDto[];
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/dto/recordTags/recordTags.type.ts b/apps/edr-freight-web/backoffice/src/user-management/dto/recordTags/recordTags.type.ts
new file mode 100644
index 000000000..c77937b22
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/dto/recordTags/recordTags.type.ts
@@ -0,0 +1,27 @@
+export interface CreateRecordTagPayload {
+  name: {
+    am: string;
+    en: string;
+  };
+  key: string;
+  unitId: string;
+}
+export interface UpdateRecordTagPayload
+  extends Partial<CreateRecordTagPayload> {}
+
+export interface RecordTag {
+  createdAt: string;
+  updatedAt: string;
+  id: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  key: string;
+  unitId: string;
+}
+
+export interface RecordTagResponse {
+  items: RecordTag[];
+  count: number;
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/dto/teamMember/teamMember.ts b/apps/edr-freight-web/backoffice/src/user-management/dto/teamMember/teamMember.ts
new file mode 100644
index 000000000..0bb783cf2
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/dto/teamMember/teamMember.ts
@@ -0,0 +1,32 @@
+export interface TeamMemberDto {
+  status: string;
+  organizationId: string;
+  id: string;
+  isCurrent: boolean;
+  name: string | null;
+  employeePositions?: Array<{
+    id: string;
+    employeeId: string;
+    position: {
+      id: string;
+      name: {
+        am: string;
+        en: string;
+      };
+    };
+  }>;
+  user: {
+    id: string;
+    name: {
+      am: string;
+      en: string;
+    };
+    username: string;
+    email: string;
+    userType: "employee" | string;
+    sharepointId: string | null;
+    status: "accepted" | string;
+    phoneNumber: string;
+    hasSetPassword: boolean
+  };
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/dto/unit/unitDto.ts b/apps/edr-freight-web/backoffice/src/user-management/dto/unit/unitDto.ts
new file mode 100644
index 000000000..fc01017aa
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/dto/unit/unitDto.ts
@@ -0,0 +1,14 @@
+export interface UnitDto {
+  id: string;
+  name: UnitName;
+  key: string;
+  organizationId: string;
+  parentUnitId: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface UnitName {
+  am: string;
+  en: string;
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/hooks/useApplications.ts b/apps/edr-freight-web/backoffice/src/user-management/hooks/useApplications.ts
new file mode 100644
index 000000000..deee6847c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/hooks/useApplications.ts
@@ -0,0 +1,72 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import {
+  applicationService,
+  CreateApplicationDto,
+  UpdateApplicationDto,
+} from "@/user-management/services/api/applicationService";
+import {
+  ApplicationDto,
+  ApplicationListResponse,
+} from "@/user-management/dto/applications/applicationDto";
+
+export const useApplications = () => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  const { data, isLoading, isError, refetch } =
+    useQuery<ApplicationListResponse>({
+      queryKey: ["applications"],
+      queryFn: () => applicationService.getAll().then((res) => res.data),
+      staleTime: 1000 * 60 * 5,
+    });
+
+  const createApplication = useMutation({
+    mutationFn: (payload: CreateApplicationDto) =>
+      applicationService.create(payload),
+    onSuccess: () => {
+      toast.success("Application created");
+      queryClient.invalidateQueries({ queryKey: ["applications"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const updateApplication = useMutation({
+    mutationFn: ({ id, data }: { id: string; data: UpdateApplicationDto }) =>
+      applicationService.update(id, data),
+    onSuccess: () => {
+      toast.success("Application updated");
+      queryClient.invalidateQueries({ queryKey: ["applications"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const deleteApplication = useMutation({
+    mutationFn: (id: string) => applicationService.delete(id),
+    onSuccess: () => {
+      toast.success("Application deleted");
+      queryClient.invalidateQueries({ queryKey: ["applications"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  return {
+    applications: data?.items ?? [],
+    applicationsResponse: data,
+    isLoading,
+    isError,
+    refetch,
+    createApplication,
+    updateApplication,
+    deleteApplication,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/hooks/useArchived.ts b/apps/edr-freight-web/backoffice/src/user-management/hooks/useArchived.ts
new file mode 100644
index 000000000..a2192db1b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/hooks/useArchived.ts
@@ -0,0 +1,155 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import {
+  getArchivedUnits,
+  restoreUnit,
+  softDeleteUnit,
+} from "@/user-management/services/api/unitService";
+import {
+  getArchivedPositions,
+  restorePosition,
+  softDeletePosition,
+} from "@/user-management/services/api/positionService";
+import {
+  getArchivedOrganizations,
+  restoreOrganization,
+  softDeleteOrganization,
+} from "@/shared/services/organizationsService";
+
+export const useArchivedUnits = (parentId: string | undefined) => {
+  return useQuery({
+    queryKey: ["archived-units", parentId],
+    queryFn: async () => {
+      if (!parentId) return null;
+      const { data } = await getArchivedUnits(parentId);
+      return data;
+    },
+    staleTime: 0,
+    refetchOnMount: "always",
+    refetchOnWindowFocus: false,
+  });
+};
+
+export const useArchivedOrganizations = () => {
+  return useQuery({
+    queryKey: ["archived-organizations"],
+    queryFn: async () => {
+      const { data } = await getArchivedOrganizations();
+      return data;
+    },
+    staleTime: 0,
+    refetchOnMount: "always",
+    refetchOnWindowFocus: false,
+  });
+};
+
+export const useArchivedPositions = (parentId: string | undefined) => {
+  return useQuery({
+    queryKey: ["archived-positions", parentId],
+    queryFn: async () => {
+      if (!parentId) return null;
+      const { data } = await getArchivedPositions(parentId);
+      return data;
+    },
+    staleTime: 0,
+    refetchOnMount: "always",
+    refetchOnWindowFocus: false,
+  });
+};
+
+export const useArchiveActions = () => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  const invalidateArchivedUnits = () => {
+    queryClient.invalidateQueries({ queryKey: ["archived-units"] });
+    queryClient.invalidateQueries({ queryKey: ["unitList"] });
+    queryClient.invalidateQueries({ queryKey: ["unitChildren"] });
+  };
+
+  const invalidateArchivedPositions = () => {
+    queryClient.invalidateQueries({ queryKey: ["archived-positions"] });
+    queryClient.invalidateQueries({ queryKey: ["positions"] });
+  };
+
+  const invalidateArchivedOrganizations = () => {
+    queryClient.invalidateQueries({ queryKey: ["archived-organizations"] });
+    queryClient.invalidateQueries({ queryKey: ["organizations"] });
+    queryClient.invalidateQueries({ queryKey: ["organizationsResponse"] });
+  };
+
+  const softDeleteUnitMutation = useMutation({
+    mutationFn: (id: string) => softDeleteUnit(id),
+    onSuccess: () => {
+      toast.success(t("archive.unitArchived", "Unit archived"));
+      invalidateArchivedUnits();
+    },
+    onError: handleError,
+  });
+
+  const restoreUnitMutation = useMutation({
+    mutationFn: (id: string) => restoreUnit(id),
+    onSuccess: () => {
+      toast.success(t("archive.unitRestored", "Unit restored"));
+      invalidateArchivedUnits();
+    },
+    onError: handleError,
+  });
+
+  const softDeletePositionMutation = useMutation({
+    mutationFn: (id: string) => softDeletePosition(id),
+    onSuccess: () => {
+      toast.success(t("archive.positionArchived", "Position archived"));
+      invalidateArchivedPositions();
+    },
+    onError: handleError,
+  });
+
+  const restorePositionMutation = useMutation({
+    mutationFn: (id: string) => restorePosition(id),
+    onSuccess: () => {
+      toast.success(t("archive.positionRestored", "Position restored"));
+      invalidateArchivedPositions();
+    },
+    onError: handleError,
+  });
+
+  const softDeleteOrganizationMutation = useMutation({
+    mutationFn: (id: string) => softDeleteOrganization(id),
+    onSuccess: () => {
+      toast.success(t("archive.organizationArchived", "Organization archived"));
+      invalidateArchivedOrganizations();
+    },
+    onError: handleError,
+  });
+
+  const restoreOrganizationMutation = useMutation({
+    mutationFn: (id: string) => restoreOrganization(id),
+    onSuccess: () => {
+      toast.success(
+        t("archive.organizationRestored", "Organization restored"),
+      );
+      invalidateArchivedOrganizations();
+    },
+    onError: handleError,
+  });
+
+  return {
+    softDeleteUnit: softDeleteUnitMutation.mutate,
+    isArchivingUnit: softDeleteUnitMutation.isPending,
+    restoreUnit: restoreUnitMutation.mutate,
+    isRestoringUnit: restoreUnitMutation.isPending,
+    softDeletePosition: softDeletePositionMutation.mutate,
+    isArchivingPosition: softDeletePositionMutation.isPending,
+    restorePosition: restorePositionMutation.mutate,
+    isRestoringPosition: restorePositionMutation.isPending,
+    softDeleteOrganization: softDeleteOrganizationMutation.mutate,
+    isArchivingOrganization: softDeleteOrganizationMutation.isPending,
+    restoreOrganization: restoreOrganizationMutation.mutate,
+    isRestoringOrganization: restoreOrganizationMutation.isPending,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/hooks/useEmployeePositionChangeRequests.ts b/apps/edr-freight-web/backoffice/src/user-management/hooks/useEmployeePositionChangeRequests.ts
new file mode 100644
index 000000000..d2011ad1b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/hooks/useEmployeePositionChangeRequests.ts
@@ -0,0 +1,103 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import {
+  employeePositionChangeRequestService,
+  type BulkApproveEmployeePositionChangePayload,
+  type EmployeePositionChangeDecisionPayload,
+  type EmployeePositionChangeRequestParams,
+  type TransferEmployeePositionPayload,
+} from "@/user-management/services/api/employeePositionChangeRequestService";
+
+export const EMPLOYEE_POSITION_CHANGE_REQUESTS_QUERY_KEY =
+  "employee-position-change-requests";
+
+interface DecisionVariables extends EmployeePositionChangeDecisionPayload {
+  id: string;
+}
+
+export const useEmployeePositionChangeRequests = (
+  params: EmployeePositionChangeRequestParams = {},
+) => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  const requestsQuery = useQuery({
+    queryKey: [EMPLOYEE_POSITION_CHANGE_REQUESTS_QUERY_KEY, params],
+    queryFn: () => employeePositionChangeRequestService.list(params),
+  });
+
+  const getRequestByIdQuery = (id?: string | null) =>
+    useQuery({
+      queryKey: [EMPLOYEE_POSITION_CHANGE_REQUESTS_QUERY_KEY, id],
+      queryFn: () => employeePositionChangeRequestService.getById(id!),
+      enabled: !!id,
+    });
+
+  const invalidateRequests = () =>
+    queryClient.invalidateQueries({
+      queryKey: [EMPLOYEE_POSITION_CHANGE_REQUESTS_QUERY_KEY],
+    });
+
+  const transferMutation = useMutation({
+    mutationFn: (payload: TransferEmployeePositionPayload) =>
+      employeePositionChangeRequestService.transfer(payload),
+    onSuccess: () => {
+      invalidateRequests();
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const bulkApproveMutation = useMutation({
+    mutationFn: (payload: BulkApproveEmployeePositionChangePayload) =>
+      employeePositionChangeRequestService.bulkApprove(payload),
+    onSuccess: () => {
+      toast.success("Employee position change requests approved successfully");
+      invalidateRequests();
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const approveMutation = useMutation({
+    mutationFn: ({ id, comment }: DecisionVariables) =>
+      employeePositionChangeRequestService.approve(id, { comment }),
+    onSuccess: () => {
+      toast.success("Employee position change request approved successfully");
+      invalidateRequests();
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const rejectMutation = useMutation({
+    mutationFn: ({ id, comment }: DecisionVariables) =>
+      employeePositionChangeRequestService.reject(id, { comment }),
+    onSuccess: () => {
+      toast.success("Employee position change request rejected successfully");
+      invalidateRequests();
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  return {
+    requestsQuery,
+    getRequestByIdQuery,
+    transfer: transferMutation.mutateAsync,
+    isTransferring: transferMutation.isPending,
+    bulkApprove: bulkApproveMutation.mutateAsync,
+    isBulkApproving: bulkApproveMutation.isPending,
+    approve: approveMutation.mutateAsync,
+    isApproving: approveMutation.isPending,
+    reject: rejectMutation.mutateAsync,
+    isRejecting: rejectMutation.isPending,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/hooks/useEmployeePostions.ts b/apps/edr-freight-web/backoffice/src/user-management/hooks/useEmployeePostions.ts
new file mode 100644
index 000000000..c31aabd8c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/hooks/useEmployeePostions.ts
@@ -0,0 +1,185 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  activateUser,
+  AssignEmployeePayload,
+  assignEmployees,
+  assignFirstsForSecond,
+  assignSecondsForFirst,
+  deactivateUser,
+  deleteEmployeePosition,
+  EmployeePositionQueryParams,
+  getGivenFirst,
+  getGivenSecond,
+  InactiveEPPayload,
+  inviteEmployeePosition,
+  removeFirstsForSecond,
+  removeSecondsForFirst,
+  setInactive,
+} from "../services/api/employeePositionsService";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+export const useEmployeePositions = (params?: EmployeePositionQueryParams) => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  // --- Queries ---
+  const getGivenFirstQuery = (id: string) =>
+    useQuery({
+      queryKey: ["positionEmployees", "given-first", id],
+      queryFn: () => getGivenFirst(id, params).then((res) => res.data),
+      enabled: !!id,
+    });
+
+  const getGivenSecondQuery = (id: string) =>
+    useQuery({
+      queryKey: ["positionEmployees", "given-second", id],
+      queryFn: () => getGivenSecond(id, params).then((res: any) => res.data),
+      enabled: !!id,
+    });
+
+  // --- Mutations ---
+  const invite = useMutation({
+    mutationFn: ({
+      payload,
+      successCallback,
+    }: {
+      payload: any;
+      successCallback: () => void;
+    }) => inviteEmployeePosition(payload),
+
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["positionEmployees"] });
+      variables.successCallback();
+    },
+
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+    const deactivate = useMutation({
+      mutationFn: ({
+        payload,
+        successCallback,
+      }: {
+        payload: string;
+        successCallback: () => void;
+      }) => deactivateUser(payload),
+
+      onSuccess: (_data, variables) => {
+        queryClient.invalidateQueries({ queryKey: ["deleteEmployees"] });
+        queryClient.invalidateQueries({ queryKey: ["positionEmployees"] });
+      queryClient.invalidateQueries({ queryKey: ["employees"] });
+
+
+        variables.successCallback();
+      },
+
+      onError: (error) => {
+        handleError(error);
+      },
+    });
+        const activate = useMutation({
+          mutationFn: ({
+            payload,
+            successCallback,
+          }: {
+            payload: string;
+            successCallback: () => void;
+          }) => activateUser(payload),
+
+          onSuccess: (_data, variables) => {
+            queryClient.invalidateQueries({ queryKey: ["archived-users"] });
+      queryClient.invalidateQueries({ queryKey: ["employees"] });
+
+            variables.successCallback();
+          },
+
+          onError: (error) => {
+            handleError(error);
+          },
+        });
+
+  const setInactiveMutation = useMutation({
+    mutationFn: ({
+      payload,
+      successCallback,
+    }: {
+      payload: InactiveEPPayload;
+      successCallback: () => void;
+    }) => setInactive(payload),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["positionEmployees"] });
+      toast.success("Team member removed successfully.");
+      variables.successCallback();
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const assignFirstsForSecondMutation = useMutation({
+    mutationFn: (payload: any) => assignFirstsForSecond(payload),
+    onSuccess: () =>
+      queryClient.invalidateQueries({ queryKey: ["positionEmployees"] }),
+  });
+
+  const assignSecondsForFirstMutation = useMutation({
+    mutationFn: (payload: any) => assignSecondsForFirst(payload),
+    onSuccess: () =>
+      queryClient.invalidateQueries({ queryKey: ["positionEmployees"] }),
+  });
+
+  const assignEmployeeForPosition = useMutation({
+    mutationFn: (payload: AssignEmployeePayload) => assignEmployees(payload),
+    onSuccess: () =>{
+      queryClient.invalidateQueries({ queryKey: ["positionEmployees"] });
+      queryClient.invalidateQueries({ queryKey: ["employees"] });
+},
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const removeFirstsForSecondMutation = useMutation({
+    mutationFn: (payload: any) => removeFirstsForSecond(payload),
+    onSuccess: () =>
+      queryClient.invalidateQueries({ queryKey: ["positionEmployees"] }),
+  });
+
+  const removeSecondsForFirstMutation = useMutation({
+    mutationFn: (payload: any) => removeSecondsForFirst(payload),
+    onSuccess: () =>
+      queryClient.invalidateQueries({ queryKey: ["positionEmployees"] }),
+  });
+
+  const remove = useMutation({
+    mutationFn: (id: string) => deleteEmployeePosition(id),
+    onSuccess: () =>
+      queryClient.invalidateQueries({ queryKey: ["positionEmployees"] }),
+  });
+
+  // --- Return exposed mutateAsync and query helpers ---
+  return {
+    getGivenFirstQuery,
+    getGivenSecondQuery,
+    invite: invite.mutateAsync,
+    isInviting: invite.isPending,
+    setInactive: setInactiveMutation.mutateAsync,
+    isDeActivatingUser: setInactiveMutation.isPending,
+    assignFirstsForSecond: assignFirstsForSecondMutation.mutateAsync,
+    assignSecondsForFirst: assignSecondsForFirstMutation.mutateAsync,
+    removeFirstsForSecond: removeFirstsForSecondMutation.mutateAsync,
+    assignEmployee: assignEmployeeForPosition.mutateAsync,
+    isAssigning: assignEmployeeForPosition.isPending,
+    removeSecondsForFirst: removeSecondsForFirstMutation.mutateAsync,
+    remove: remove.mutateAsync,
+    deactivateUser: deactivate.mutateAsync,
+    isDeactivating: deactivate.isPending,
+    activateUser: activate.mutateAsync,
+    isActivatingUser: activate.isPending,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/hooks/useEmployees.ts b/apps/edr-freight-web/backoffice/src/user-management/hooks/useEmployees.ts
new file mode 100644
index 000000000..c880419e7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/hooks/useEmployees.ts
@@ -0,0 +1,98 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+
+import { EmployeeWithUnitListResponse, UserWithUnitListResponse } from "../dto/employees/employees";
+import { EmployeeQueryParams, employeeService } from "../services/api/employeesService";
+import { getEmployeesUnderOrg } from "@/shared/services/organizationsService";
+
+export const useEmployees = ({
+  unitId,
+  organizationId,
+  params,
+}: {
+  unitId?: string;
+  organizationId?: string;
+  params?:EmployeeQueryParams;
+}) => {
+  const {
+    data: employeesResponse,
+    isLoading,
+    isError,
+    refetch,
+  } = useQuery<UserWithUnitListResponse>({
+    queryKey: ["employees", unitId],
+    queryFn: async () => {
+      const { data } = await employeeService.getUsersWithUnitById(unitId!, {
+        take: 3000,
+      });
+      return data;
+    },
+    enabled: !!unitId,
+    staleTime: 5 * 60 * 1000,
+    retry: false,
+  });
+
+  const {
+    data: employeesResponseByOrg,
+    isLoading: isLoadingEmployeesByOrg,
+    isError: isErrorEmployeesByOrg,
+    refetch: refetchEmployeesByOrg,
+  } = useQuery<EmployeeWithUnitListResponse | UserWithUnitListResponse>({
+    queryKey: ["employees", organizationId, unitId, params],
+    queryFn: async () => {
+      // If unitId is selected, use the active-with-unit endpoint
+      if (unitId) {
+        const { data } = await employeeService.getUsersWithUnitById(unitId, params || {});
+        return data;
+      }
+      // Otherwise use the by-organization endpoint
+      const { data } = await getEmployeesUnderOrg(
+        organizationId!,
+        params
+      );
+      return data;
+    },
+    enabled: !!(organizationId || unitId),
+    staleTime: 5 * 60 * 1000,
+    retry: false,
+  });
+
+  const { mutate: getEmployeeDetails, isPending: isFetchingEmployee } =
+    useMutation({
+      mutationFn: async (id: string) => {
+        const { data } = await employeeService.getEmployee(id);
+        return data;
+      },
+    });
+
+  // Normalize the response to always have a consistent structure
+  const normalizedEmployeesResponseByOrg = employeesResponseByOrg
+    ? {
+        count: employeesResponseByOrg.count,
+        items: employeesResponseByOrg.items.map((item: any) => {
+          // If the item already has a user property, it's EmployeeWithUnitDto
+          if ('user' in item && item.user) {
+            return item;
+          }
+          // If not, wrap it as UserDTO in the user property for consistency
+          return {
+            id: item.id,
+            user: item,
+            employeePositions: item.employeePositions || [],
+          };
+        }),
+      }
+    : undefined;
+
+  return {
+    employeesResponse,
+    isLoading,
+    isError,
+    refetch,
+    getEmployeeByDetails: getEmployeeDetails,
+    isFetchingEmployee,
+    refetchEmployeesByOrg,
+    isErrorEmployeesByOrg,
+    isLoadingEmployeesByOrg,
+    employeesResponseByOrg: normalizedEmployeesResponseByOrg,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/hooks/useLetterTemplates.ts b/apps/edr-freight-web/backoffice/src/user-management/hooks/useLetterTemplates.ts
new file mode 100644
index 000000000..10c40946c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/hooks/useLetterTemplates.ts
@@ -0,0 +1,138 @@
+import {
+  keepPreviousData,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
+
+import {
+  getTemplatesByUnitId,
+  getTemplateById,
+  createTemplate,
+  updateTemplate,
+  deleteTemplate,
+  LetterTemplatePayload,
+  LetterTemplate,
+} from "@/user-management/services/api/letterTemplateService";
+
+export interface UseLetterTemplatesOptions {
+  skip?: number;
+  take?: number;
+  // BE expects "field:DIRECTION" form, e.g. "createdAt:DESC".
+  orderBy?: string;
+  order?: string;
+  enabled?: boolean;
+}
+
+export const useLetterTemplates = (
+  unitId: string,
+  options: UseLetterTemplatesOptions = {},
+) => {
+  const queryClient = useQueryClient();
+
+  const {
+    skip = 0,
+    take = 20,
+    // Default to newest-first so freshly-created templates appear at the top.
+    orderBy = "createdAt:DESC",
+    order,
+    enabled = true,
+  } = options;
+
+  const params = {
+    skip,
+    take,
+    orderBy,
+    ...(order ? { order } : {}),
+  };
+
+  // GET all templates by unitId
+  const {
+    data: letterTemplatesResponse,
+    isLoading,
+    isFetching,
+    isError,
+    refetch,
+  } = useQuery({
+    queryKey: ["letter-templates", unitId, params],
+    queryFn: async () => {
+      const { data } = await getTemplatesByUnitId(unitId, params);
+      return data;
+    },
+    enabled: !!unitId && enabled,
+    staleTime: 5 * 60 * 1000,
+    retry: false,
+    placeholderData: keepPreviousData,
+  });
+
+  // GET single template
+  const { mutate: getTemplateByDetails, isPending: isFetchingTemplate } =
+    useMutation({
+      mutationFn: async (id: string) => {
+        const { data } = await getTemplateById(id);
+        return data as LetterTemplate;
+      },
+    });
+
+  // CREATE
+  const { mutate: createLetterTemplate, isPending: isCreating } = useMutation({
+    mutationFn: async (data: LetterTemplatePayload) => {
+      const { data: created } = await createTemplate(data);
+      return created;
+    },
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ["letter-templates", variables.unitId],
+      });
+    },
+  });
+
+  // UPDATE
+  const { mutate: updateLetterTemplate, isPending: isUpdating } = useMutation({
+    mutationFn: async (payload: {
+      id: string;
+      data: LetterTemplatePayload;
+    }) => {
+      const { data: updated } = await updateTemplate(payload.id, payload.data);
+      return updated;
+    },
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ["letter-templates", variables.data.unitId],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["letter-template", variables.id],
+      });
+    },
+  });
+
+  // DELETE
+  const { mutate: deleteLetterTemplate, isPending: isDeleting } = useMutation({
+    mutationFn: async ({ id }: { id: string }) => {
+      await deleteTemplate(id);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["letter-templates", unitId],
+      });
+    },
+  });
+
+  return {
+    letterTemplatesResponse,
+    items: letterTemplatesResponse?.items ?? [],
+    count: letterTemplatesResponse?.count ?? 0,
+    isLoading,
+    isFetching,
+    isError,
+    refetch,
+    getTemplateByDetails,
+    isFetchingTemplate,
+    createLetterTemplate,
+    isCreating,
+    updateLetterTemplate,
+    isUpdating,
+    deleteLetterTemplate,
+    isDeleting,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/hooks/useOrgAdminOrganizations.ts b/apps/edr-freight-web/backoffice/src/user-management/hooks/useOrgAdminOrganizations.ts
new file mode 100644
index 000000000..94a0f669f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/hooks/useOrgAdminOrganizations.ts
@@ -0,0 +1,84 @@
+import { useQuery } from "@tanstack/react-query";
+import { getMyAdminOrganizations } from "@/shared/services/organizationsService";
+import { getMyAdminUnits } from "@/user-management/services/api/unitService";
+import { Name } from "../userManagement/types";
+
+export interface OrgAdminOrganization {
+  id: string;
+  name: Name;
+  [key: string]: any;
+}
+
+export interface OrgAdminUnit {
+  id: string;
+  name: Name;
+  [key: string]: any;
+}
+
+// Stable empty arrays — reusing the same reference prevents useEffect dependency loops
+const EMPTY_ORGS: OrgAdminOrganization[] = [];
+const EMPTY_UNITS: OrgAdminUnit[] = [];
+
+/**
+ * Fetches the list of organizations this org-admin administers.
+ * Calls GET /organizations/my-admin-organizations
+ */
+export const useMyAdminOrganizations = () => {
+  const { data, isLoading, isError, refetch } = useQuery({
+    queryKey: ["my-admin-organizations"],
+    queryFn: async () => {
+      const { data } = await getMyAdminOrganizations();
+      if (Array.isArray(data)) {
+        return { count: data.length, items: data as OrgAdminOrganization[] };
+      }
+      return {
+        count: (data.count ?? data.items?.length ?? 0) as number,
+        items: (data.items ?? data) as OrgAdminOrganization[],
+      };
+    },
+    staleTime: 5 * 60 * 1000,
+    retry: false,
+  });
+
+  return {
+    organizations: data?.items ?? EMPTY_ORGS,
+    count: data?.count ?? 0,
+    isLoading,
+    isError,
+    refetch,
+  };
+};
+
+/**
+ * Fetches the units this org-admin administers inside a given organization.
+ * Calls GET /units/my-admin-units/organization/{organizationId}
+ */
+export const useMyAdminUnits = (
+  organizationId: string,
+  enabled: boolean = true,
+) => {
+  const { data, isLoading, isError, refetch } = useQuery({
+    queryKey: ["my-admin-units", organizationId],
+    queryFn: async () => {
+      const { data } = await getMyAdminUnits(organizationId);
+      if (Array.isArray(data)) {
+        return { count: data.length, items: data as OrgAdminUnit[] };
+      }
+      return {
+        count: (data.count ?? data.items?.length ?? 0) as number,
+        items: (data.items ?? data) as OrgAdminUnit[],
+      };
+    },
+    enabled: enabled && !!organizationId,
+    staleTime: 5 * 60 * 1000,
+    retry: false,
+  });
+
+  return {
+    units: data?.items ?? EMPTY_UNITS,
+    count: data?.count ?? 0,
+    isLoading,
+    isError,
+    refetch,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/hooks/useOrgUnitTotalCount.ts b/apps/edr-freight-web/backoffice/src/user-management/hooks/useOrgUnitTotalCount.ts
new file mode 100644
index 000000000..e6e75a6b5
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/hooks/useOrgUnitTotalCount.ts
@@ -0,0 +1,68 @@
+import { useQuery, useQueries } from "@tanstack/react-query";
+import {
+  getUnitList,
+  getChildUnits,
+} from "@/user-management/services/api/unitService";
+
+const extractItems = (data: any): any[] => {
+  if (!data) return [];
+  if (Array.isArray(data)) return data;
+  if (Array.isArray(data.items)) return data.items;
+  return [];
+};
+
+/**
+ * Total count of every unit in an organization's hierarchy:
+ * top-level units from `/units/list/{orgId}` plus every descendant
+ * reachable via `/units/child-units/{parentId}`.
+ *
+ * Both create-unit and relate-from-sub-city flows count against this
+ * same total so the configured cap is enforced consistently.
+ */
+export const useOrgUnitTotalCount = (organizationId: string) => {
+  const topLevelQuery = useQuery({
+    queryKey: ["unitList", organizationId, "capacity-total"],
+    queryFn: () => getUnitList(organizationId, { take: 1000, skip: 0 }),
+    enabled: !!organizationId,
+    staleTime: 0,
+  });
+
+  const topLevelItems = extractItems(topLevelQuery.data?.data);
+  const topLevelIds: string[] = topLevelItems
+    .map((u: any) => u?.id)
+    .filter(Boolean);
+
+  const childQueries = useQueries({
+    queries: topLevelIds.map((id) => ({
+      queryKey: ["unitChildren", id, "capacity-total"],
+      queryFn: () => getChildUnits(id),
+      enabled: !!id,
+      staleTime: 0,
+    })),
+  });
+
+  // De-dupe units by `id` because some backends include the parent in
+  // `/units/child-units/{parentId}` responses, and some `/units/list/{orgId}`
+  // implementations already include non-top-level units.
+  const uniqueIds = new Set<string>();
+  for (const unit of topLevelItems) {
+    const id = unit?.id;
+    if (id) uniqueIds.add(String(id));
+  }
+  for (const q of childQueries) {
+    if (!q.data) continue;
+    const items = extractItems((q.data as any).data);
+    for (const unit of items) {
+      const id = unit?.id;
+      if (id) uniqueIds.add(String(id));
+    }
+  }
+
+  const total = uniqueIds.size;
+  const isLoading =
+    topLevelQuery.isLoading ||
+    topLevelQuery.isFetching ||
+    childQueries.some((q) => q.isLoading || q.isFetching);
+
+  return { total, isLoading };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/hooks/useOrganizationEmployeeSearch.ts b/apps/edr-freight-web/backoffice/src/user-management/hooks/useOrganizationEmployeeSearch.ts
new file mode 100644
index 000000000..e7a0389db
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/hooks/useOrganizationEmployeeSearch.ts
@@ -0,0 +1,141 @@
+import { useState, useEffect, useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import {
+  EmployeeQueryParams,
+  employeeService,
+} from "../services/api/employeesService";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import {
+  EmployeeWithUnitDto,
+  EmployeeWithUnitListResponse,
+} from "../dto/employees/employees";
+
+// Use the existing EmployeeWithUnitDto interface
+export type OrganizationEmployee = EmployeeWithUnitDto;
+
+export const useOrganizationEmployeeSearch = (
+  organizationId?: string,
+  params?: EmployeeQueryParams,
+) => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [dynamicParams, setDynamicParams] = useState<
+    EmployeeQueryParams | undefined
+  >({
+    ...params,
+    take: params?.take || 3000, // Initial take value of 3000
+  });
+  const [hasSetCount, setHasSetCount] = useState(false);
+  const localizedName = useLocalizedName();
+
+  const {
+    data: employeesData,
+    isLoading,
+    error,
+    refetch,
+  } = useQuery<EmployeeWithUnitListResponse>({
+    queryKey: ["organizationEmployees", organizationId, dynamicParams],
+    queryFn: async () => {
+      if (!organizationId) throw new Error("Organization ID is required");
+      const response = await employeeService.getEmployeesWithOrganizationById(
+        organizationId,
+        dynamicParams,
+      );
+      return response.data;
+    },
+    enabled: !!organizationId,
+  });
+
+  // Update params with count from response using useEffect
+  useEffect(() => {
+    if (employeesData?.count && !hasSetCount) {
+      setDynamicParams((prev) => ({
+        ...prev,
+        take: employeesData.count,
+      }));
+      setHasSetCount(true);
+    }
+  }, [employeesData?.count, hasSetCount]);
+
+  // Deduplicate employees by ID and filter based on search query
+  const filteredEmployees = useMemo(() => {
+    if (!employeesData?.items) {
+      return [];
+    }
+
+    // First, deduplicate employees by their ID
+    const uniqueEmployees = employeesData.items.reduce((acc, employee) => {
+      if (!acc.find((e) => e.id === employee.id)) {
+        acc.push(employee);
+      }
+      return acc;
+    }, [] as EmployeeWithUnitDto[]);
+
+    // Then filter based on search query
+    if (!searchQuery.trim()) {
+      return uniqueEmployees;
+    }
+
+    const query = searchQuery.toLowerCase().trim();
+
+    return uniqueEmployees.filter((employee) => {
+      // Search by user name (both am and en)
+      const userNameAm = employee.user.name.am?.toLowerCase() || "";
+      const userNameEn = employee.user.name.en?.toLowerCase() || "";
+      const localizedUserName =
+        localizedName(employee.user.name)?.toLowerCase() || "";
+
+      // Search by employee name (both am and en)
+      const empNameAm = employee.name.am?.toLowerCase() || "";
+      const empNameEn = employee.name.en?.toLowerCase() || "";
+      const localizedEmpName =
+        localizedName(employee.name)?.toLowerCase() || "";
+
+      // Search by email
+      const email = employee.user.email?.toLowerCase() || "";
+
+      // Search by phone number
+      const phoneNumber = employee.user.phoneNumber?.toLowerCase() || "";
+
+      // Search by position name
+      const positionNames = (employee.employeePositions ?? [])
+        .filter((ep) => ep?.position?.name)
+        .map((ep) => localizedName(ep.position.name)?.toLowerCase() || "")
+        .join(" ");
+
+      return (
+        userNameAm.includes(query) ||
+        userNameEn.includes(query) ||
+        localizedUserName.includes(query) ||
+        empNameAm.includes(query) ||
+        empNameEn.includes(query) ||
+        localizedEmpName.includes(query) ||
+        email.includes(query) ||
+        phoneNumber.includes(query) ||
+        positionNames.includes(query)
+      );
+    });
+  }, [employeesData?.items, searchQuery, localizedName]);
+
+  // Get unique employees for total count
+  const uniqueEmployees = useMemo(() => {
+    if (!employeesData?.items) return [];
+    return employeesData.items.reduce((acc, employee) => {
+      if (!acc.find((e) => e.id === employee.id)) {
+        acc.push(employee);
+      }
+      return acc;
+    }, [] as EmployeeWithUnitDto[]);
+  }, [employeesData?.items]);
+
+  return {
+    employees: uniqueEmployees,
+    filteredEmployees,
+    totalCount: uniqueEmployees.length,
+    filteredCount: filteredEmployees.length,
+    searchQuery,
+    setSearchQuery,
+    isLoading,
+    error,
+    refetch,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/hooks/useOrganizations.ts b/apps/edr-freight-web/backoffice/src/user-management/hooks/useOrganizations.ts
new file mode 100644
index 000000000..915275d8e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/hooks/useOrganizations.ts
@@ -0,0 +1,61 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import {
+  getOrganizations,
+  OrgQueryParams,
+  getOrganizationById,
+} from "@/shared/services/organizationsService";
+
+import { OrganizationDto } from "@/shared/dto/organization/organizationDto";
+
+interface Unit {
+  id: string;
+  name: string;
+  departments: any[];
+  isExpanded?: boolean;
+}
+
+export interface Organization {
+  id: string;
+  name: string;
+  units: Unit[];
+  isExpanded?: boolean;
+}
+
+export const useOrganizations = (params?: OrgQueryParams) => {
+  const {
+    data: organizationsResponse,
+    isLoading,
+    isError,
+    refetch,
+  } = useQuery({
+    queryKey: ["organizations", params],
+    queryFn: async () => {
+      const { data } = await getOrganizations(params);
+      return {
+        count: data.count as number,
+        items: data.items as OrganizationDto[],
+      };
+    },
+    staleTime: 5 * 60 * 1000,
+    retry: false,
+  });
+
+  const { mutate: getOrganization, isPending: isFetchingOrganization } =
+    useMutation({
+      mutationFn: async (id: string) => {
+        const { data } = await getOrganizationById(id);
+        return data;
+      },
+      onSuccess: (data) => {
+        return data;
+      },
+    });
+
+  return {
+    organizationsResponse,
+    isLoading,
+    isError,
+    refetch,
+    getOrganizationByDetails: getOrganization,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/hooks/usePermissionManager.ts b/apps/edr-freight-web/backoffice/src/user-management/hooks/usePermissionManager.ts
new file mode 100644
index 000000000..e0ce62bc7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/hooks/usePermissionManager.ts
@@ -0,0 +1,101 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  permissionService,
+  CreatePermissionDto,
+  PermissionQueryParams,
+} from "../services/api/permissionService";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import {
+  PermissionDto,
+  PermissionListResponse,
+} from "../dto/permissions/permissonDto";
+
+interface UsePermissionManagerProps {
+  params?: PermissionQueryParams;
+  permissionId?: string;
+}
+
+export const usePermissionManager = ({
+  params,
+  permissionId,
+}: UsePermissionManagerProps = {}) => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  // Fetch all permissions
+  const {
+    data: permissions,
+    isLoading: isPermissionsLoading,
+    refetch: refetchPermissions,
+  } = useQuery<PermissionListResponse>({
+    queryKey: ["permissions", params],
+    queryFn: () => permissionService.getAll(params).then((res) => res.data),
+    enabled: !!params,
+    staleTime: 1000 * 60 * 5,
+  });
+
+  // Fetch single permission (for edit)
+  const {
+    data: selectedPermission,
+    isLoading: isPermissionLoading,
+    refetch: refetchPermission,
+  } = useQuery<PermissionDto>({
+    queryKey: ["permission", permissionId],
+    queryFn: () =>
+      permissionService.getById(permissionId!).then((res) => res.data),
+    enabled: !!permissionId,
+  });
+
+  // Create
+  const createPermission = useMutation({
+    mutationFn: (payload: CreatePermissionDto) =>
+      permissionService.create(payload),
+    onSuccess: () => {
+      toast.success("Permission created");
+      queryClient.invalidateQueries({ queryKey: ["permissions"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  // Update
+  const updatePermission = useMutation({
+    mutationFn: ({ id, data }: { id: string; data: CreatePermissionDto }) =>
+      permissionService.update(id, data),
+    onSuccess: () => {
+      toast.success("Permission updated");
+      queryClient.invalidateQueries({ queryKey: ["permissions"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  // Delete
+  const deletePermission = useMutation({
+    mutationFn: (id: string) => permissionService.delete(id),
+    onSuccess: () => {
+      toast.success("Permission deleted");
+      queryClient.invalidateQueries({ queryKey: ["permissions"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  return {
+    permissions,
+    selectedPermission,
+    isPermissionsLoading,
+    isPermissionLoading,
+    refetchPermissions,
+    refetchPermission,
+    createPermission,
+    updatePermission,
+    deletePermission,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/hooks/usePosition.ts b/apps/edr-freight-web/backoffice/src/user-management/hooks/usePosition.ts
new file mode 100644
index 000000000..faa9fe009
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/hooks/usePosition.ts
@@ -0,0 +1,199 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  getPositions,
+  PositionQueryParams,
+  getPositionById,
+  getPositionHierarchy,
+  getPositionList,
+  getEmployeesUnderPosition,
+  PositionPayload,
+  createPosition,
+  updatePosition,
+  deletePosition,
+  MovePostionPayload,
+  movePosition,
+} from "@/user-management/services/api/positionService";
+
+import { PositionDto } from "../dto/positions/positionDto";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+export interface Position {
+  id: string;
+  name: string;
+  code?: string;
+  parentId?: string;
+  organizationId?: string;
+  isExpanded?: boolean;
+  children?: PositionDto[];
+}
+
+export interface PositionWithEmployees extends Position {
+  employees?: any[];
+}
+
+export const usePositions = (params?: PositionQueryParams) => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  // Main positions query
+  const usePositionsQuery = () => {
+    return useQuery({
+      queryKey: ["positions", params],
+      queryFn: () => getPositions(params),
+      select: (data) => ({
+        count: data.data.count as number,
+        items: data.data.items as PositionDto[],
+      }),
+      staleTime: 5 * 60 * 1000,
+      enabled: params ? true : false,
+    });
+  };
+
+  // Single position by ID
+  const usePositionById = (id: string) => {
+    return useQuery({
+      queryKey: ["position", id],
+      queryFn: () => getPositionById(id),
+      enabled: !!id,
+      select: (data) => data.data,
+    });
+  };
+
+  // Position hierarchy
+  const usePositionHierarchy = (id: string = "root") => {
+    return useQuery({
+      queryKey: ["positionHierarchy", id],
+      queryFn: () => getPositionHierarchy(id),
+      enabled: !!id,
+      select: (data) => data.data,
+    });
+  };
+
+  // Employees under position
+  const useEmployeesUnderPosition = (positionId: string) => {
+    return useQuery({
+      queryKey: ["positionEmployees", positionId],
+      queryFn: () => getEmployeesUnderPosition(positionId),
+      enabled: !!positionId || params ? true : false,
+    });
+  };
+
+  // Position list by unit/organization
+  const usePositionListByUnitId = (
+    organizationId: string,
+    params: PositionQueryParams
+  ) => {
+    return useQuery({
+      queryKey: ["positionList", organizationId, params],
+      queryFn: () => getPositionList(organizationId, params),
+      enabled: !!organizationId,
+      select: (data) => data.data,
+    });
+  };
+  const createPositionMutation = useMutation({
+    mutationFn: ({
+      payload,
+      successCallback,
+    }: {
+      payload: PositionPayload;
+      successCallback: () => void;
+    }) => createPosition(payload),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["positionHierarchy"] });
+      variables.successCallback();
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const updatePositionMutation = useMutation({
+    mutationFn: ({
+      id,
+      payload,
+      successCallback,
+    }: {
+      id: string;
+      payload: PositionPayload;
+      successCallback: () => void;
+    }) => updatePosition(id, payload),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["positionHierarchy"] });
+      variables.successCallback();
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const deletePositionMutation = useMutation({
+    mutationFn: ({
+      id,
+      successCallback,
+    }: {
+      id: string;
+      successCallback: () => void;
+    }) => deletePosition(id),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["positionHierarchy"] });
+      toast.success("Department removed successfully.");
+
+      variables.successCallback();
+    },
+    onError: (error: any) => {
+      // Check if it's a "Referenced Entity" error (meaning department has related employees)
+      if (error?.response?.status === 400 && error?.response?.data?.message) {
+        const errorMessage = error?.response?.data?.message;
+        
+        if (errorMessage.includes("Referenced Entity") || errorMessage.includes("referenced")) {
+          toast.error(
+            t("department.cannotDeleteWithEmployees", "Cannot delete department with assigned employees"),
+            {
+              description: t("department.reassignEmployeesFirst", "Please reassign or remove all employees from this department first."),
+              duration: 5000
+            }
+          );
+        } else {
+          handleError(error);
+        }
+      } else {
+        handleError(error);
+      }
+    },
+  });
+
+  return {
+    usePositionsQuery,
+    usePositionById,
+    usePositionHierarchy,
+    useEmployeesUnderPosition,
+    usePositionListByUnitId,
+    createPosition: createPositionMutation.mutateAsync,
+    isCreating: createPositionMutation.isPending,
+    updatePosition: updatePositionMutation.mutateAsync,
+    isUpdating: updatePositionMutation.isPending,
+    deletePosition: deletePositionMutation.mutateAsync,
+    isDeleting: deletePositionMutation.isPending,
+  };
+};
+
+export const useMovePosition = () => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  return useMutation({
+    mutationFn: (data: MovePostionPayload) => movePosition(data),
+    onSuccess: (_data, variables) => {
+      // ✅ Invalidate anything related to positions so UI updates
+      queryClient.invalidateQueries({ queryKey: ["positions"] });
+      queryClient.invalidateQueries({ queryKey: ["positionHierarchy"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/hooks/usePositionTypes.ts b/apps/edr-freight-web/backoffice/src/user-management/hooks/usePositionTypes.ts
new file mode 100644
index 000000000..a62ef26d6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/hooks/usePositionTypes.ts
@@ -0,0 +1,224 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  CreatePositionTypePayload,
+  PositionRequest,
+  positionTypeService,
+  UpdatePositionTypePayload,
+} from "../services/api/positionTypesService";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import {
+  PositionTypeDto,
+  PositionTypesListResponse,
+} from "../dto/positions/positionType";
+
+interface positionParams {
+  take: number;
+  skip: number;
+  orderBy: string;
+  order?: string;
+}
+
+interface UsePositionTypeManagerProps {
+  id?: string;
+  unitId?: string;
+  organizationId?: string;
+  params?: positionParams; // 👈 we expected query params to be passed like this
+}
+
+export const usePositionTypes = ({
+  id,
+  params = {
+    take: 1000,
+    skip: 0,
+    orderBy: "createdAt:Desc",
+  },
+  unitId,
+  organizationId,
+}: UsePositionTypeManagerProps = {}) => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+  const { data, isLoading, isError, refetch } = useQuery({
+    queryKey: ["position-types", params],
+    queryFn: () => positionTypeService.getAll(params).then((res) => res.data),
+  });
+  // Single Position Type (for edit)
+  const {
+    data: positionType,
+    isLoading: isLoadingSingle,
+    isError: isErrorSingle,
+    refetch: refetchSingle,
+  } = useQuery<PositionTypeDto>({
+    queryKey: ["position-type", id],
+    queryFn: () => positionTypeService.getById(id!).then((res) => res.data),
+    enabled: !!id,
+  });
+  const {
+    data: positionTypeByUnitId,
+    isLoading: isLoadingPosition,
+    isError: isErrorPosition,
+    refetch: refetchPosition,
+  } = useQuery<PositionTypesListResponse | undefined>({
+    queryKey: ["position-type", unitId, params],
+    queryFn: async () => {
+      if (!unitId) return undefined;
+      const res = await positionTypeService.getByUnitId(unitId, params);
+      return res.data as PositionTypesListResponse | undefined;
+    },
+    enabled: !!unitId,
+  });
+
+  // Position types by organization ID
+  const {
+    data: positionTypeByOrgId,
+    isLoading: isLoadingOrgPosition,
+    isError: isErrorOrgPosition,
+    refetch: refetchOrgPosition,
+  } = useQuery<PositionTypesListResponse | undefined>({
+    queryKey: ["position-type-org", organizationId, params],
+    queryFn: async () => {
+      if (!organizationId) return undefined;
+      const res = await positionTypeService.getByOrganizationId(organizationId, params);
+      return res.data as PositionTypesListResponse | undefined;
+    },
+    enabled: !!organizationId,
+  });
+
+  // Common types with organization ID (includes both org-specific and common types)
+  const {
+    data: commonPositionTypesByOrgId,
+    isLoading: isLoadingCommonOrgTypes,
+    isError: isErrorCommonOrgTypes,
+    refetch: refetchCommonOrgTypes,
+  } = useQuery<PositionTypesListResponse | undefined>({
+    queryKey: ["position-types-common-org", organizationId, params],
+    queryFn: async () => {
+      if (!organizationId) return undefined;
+      const res = await positionTypeService.getCommonTypesByOrganizationId(organizationId, params);
+      return res.data as PositionTypesListResponse | undefined;
+    },
+    enabled: !!organizationId,
+  });
+
+  // Common types with unit ID (includes both unit-specific and common types)
+  const {
+    data: commonPositionTypes,
+    isLoading: isLoadingCommonTypes,
+    isError: isErrorCommonTypes,
+    refetch: refetchCommonTypes,
+  } = useQuery<PositionTypesListResponse | undefined>({
+    queryKey: ["position-types-common", unitId, params],
+    queryFn: async () => {
+      if (!unitId) return undefined;
+      const res = await positionTypeService.getCommonTypesById(unitId, params);
+      return res.data as PositionTypesListResponse | undefined;
+    },
+    enabled: !!unitId,
+  });
+
+  // Create
+  const createPositionType = useMutation({
+    mutationFn: (payload: CreatePositionTypePayload) =>
+      positionTypeService.create(payload),
+    onSuccess: () => {
+      toast.success("Position type created");
+      queryClient.invalidateQueries({ queryKey: ["position-types"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  // Update
+  const updatePositionType = useMutation({
+    mutationFn: ({
+      id,
+      data,
+    }: {
+      id: string;
+      data: UpdatePositionTypePayload;
+    }) => positionTypeService.update(id, data),
+    onSuccess: () => {
+      toast.success("Position type updated");
+      queryClient.invalidateQueries({ queryKey: ["position-types"] });
+      queryClient.invalidateQueries({ queryKey: ["position-type", id] });
+    },
+    onError: () => {},
+  });
+
+  //update positon from to
+  const updatePositionTypeFromTo = useMutation({
+    mutationFn: ({ toId, fromId }: { toId: string; fromId: string }) =>
+      positionTypeService.updateFromto(toId, fromId),
+    onSuccess: () => {
+      toast.success("Position type migration updated");
+      queryClient.invalidateQueries({ queryKey: ["position-types-to"] });
+      queryClient.invalidateQueries({ queryKey: ["position-type", id] });
+    },
+    onError: () => {},
+  });
+  //update all postions
+  const migratePositionsByPositions = useMutation({
+    mutationFn: ({ id, data }: { id: string; data: PositionRequest }) =>
+      positionTypeService.updateByPostion(id, data),
+    onSuccess: () => {
+      toast.success("Position type migration updated");
+      queryClient.invalidateQueries({ queryKey: ["position-types-migration"] });
+      queryClient.invalidateQueries({ queryKey: ["position-type", id] });
+    },
+    onError: () => {},
+  });
+
+  // Delete
+  const deletePositionType = useMutation({
+    mutationFn: (id: string) => positionTypeService.delete(id),
+    onSuccess: () => {
+      toast.success("Position type deleted");
+      queryClient.invalidateQueries({ queryKey: ["position-types"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  return {
+    positionTypes: data?.items ?? [],
+    positionTypeResponse: data,
+    isLoading,
+    isError,
+    refetch,
+    // single
+    positionType,
+    isLoadingSingle,
+    isErrorSingle,
+    refetchSingle,
+
+    // mutations
+    createPositionType,
+    updatePositionType,
+    deletePositionType,
+    positionTypeByUnitId,
+    migratePositionsByPositions,
+    updatePositionTypeFromTo,
+    refetchPosition,
+    isErrorPosition,
+    isLoadingPosition,
+    // organization-based position types
+    positionTypeByOrgId,
+    refetchOrgPosition,
+    isErrorOrgPosition,
+    isLoadingOrgPosition,
+    // common types with organization ID
+    commonPositionTypesByOrgId,
+    refetchCommonOrgTypes,
+    isErrorCommonOrgTypes,
+    isLoadingCommonOrgTypes,
+    // common types with unit ID
+    commonPositionTypes: commonPositionTypes?.items ?? [],
+    isLoadingCommonTypes,
+    isErrorCommonTypes,
+    refetchCommonTypes,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/hooks/usePostionType.ts b/apps/edr-freight-web/backoffice/src/user-management/hooks/usePostionType.ts
new file mode 100644
index 000000000..4a4fcaf8c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/hooks/usePostionType.ts
@@ -0,0 +1,99 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import {
+  getPositionTypeConfigurationsByUnitId,
+  getPositionTypeConfigurationById,
+  createPositionTypeConfiguration,
+  updatePositionTypeConfiguration,
+  CreatePositionTypeConfigurationPayload,
+  UpdatePositionTypeConfigurationPayload,
+} from "../services/api/positionTypeConfigurationService";
+
+export const usePositionTypeConfiguration = (unitId?: string | null) => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  // GET: List by unitId
+  const {
+    data: configurationsData,
+    isLoading: isLoadingConfigurations,
+    isError: isConfigurationsError,
+    refetch: refetchConfigurations,
+  } = useQuery({
+    queryKey: ["positionTypeConfigurations", unitId],
+    queryFn: async () => {
+      const response = await getPositionTypeConfigurationsByUnitId(unitId!);
+      return response.data;
+    },
+    enabled: !!unitId,
+  });
+
+  // GET: Single by id
+  const getConfigurationById = (id: string | null) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useQuery({
+      queryKey: ["positionTypeConfiguration", id],
+      queryFn: async () => {
+        const response = await getPositionTypeConfigurationById(id!);
+        return response.data;
+      },
+      enabled: !!id,
+    });
+  };
+
+  // POST: Create
+  const createConfigurationMutation = useMutation({
+    mutationFn: async (payload: CreatePositionTypeConfigurationPayload) => {
+      const response = await createPositionTypeConfiguration(payload);
+      return response.data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["positionTypeConfigurations", unitId],
+      });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  // PUT: Update
+  const updateConfigurationMutation = useMutation({
+    mutationFn: async ({
+      id,
+      payload,
+    }: {
+      id: string;
+      payload: UpdatePositionTypeConfigurationPayload;
+    }) => {
+      const response = await updatePositionTypeConfiguration(id, payload);
+      return response.data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["positionTypeConfigurations", unitId],
+      });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  return {
+    // Queries
+    configurations: configurationsData?.items || [],
+    totalConfigurations: configurationsData?.count || 0,
+    isLoadingConfigurations,
+    isConfigurationsError,
+    refetchConfigurations,
+    getConfigurationById,
+
+    // Mutations
+    createConfiguration: createConfigurationMutation.mutateAsync,
+    isCreatingConfiguration: createConfigurationMutation.isPending,
+    updateConfiguration: updateConfigurationMutation.mutateAsync,
+    isUpdatingConfiguration: updateConfigurationMutation.isPending,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/hooks/usePrefixSuffixes.ts b/apps/edr-freight-web/backoffice/src/user-management/hooks/usePrefixSuffixes.ts
new file mode 100644
index 000000000..609940c45
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/hooks/usePrefixSuffixes.ts
@@ -0,0 +1,207 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  CreatePrefixPayload,
+  CreateSuffixPayload,
+  prefixSuffixService,
+} from "@/user-management/services/api/prefixSuffixService";
+
+export const usePrefixesList = (
+  unitId: string,
+  recordTypeKey: string,
+  skip = 0,
+  take = 10
+) =>
+  useQuery({
+    queryKey: ["prefixes", unitId, recordTypeKey, { cc: false }],
+    queryFn: () => prefixSuffixService.getPrefix(unitId, recordTypeKey, skip, take),
+    enabled: !!unitId && !!recordTypeKey,
+  });
+
+export const useCCPrefixesList = (
+  unitId: string,
+  recordTypeKey: string,
+  skip = 0,
+  take = 10
+) =>
+  useQuery({
+    queryKey: ["prefixes", unitId, recordTypeKey, { cc: true }],
+    queryFn: () =>
+      prefixSuffixService.getPrefixCC(unitId, recordTypeKey, skip, take),
+    enabled: !!unitId && !!recordTypeKey,
+  });
+
+export const usePositionPrefixesList = (
+  unitId: string,
+  recordTypeKey: string,
+  skip = 0,
+  take = 10
+) =>
+  useQuery({
+    queryKey: ["prefixes-by-position", unitId, recordTypeKey],
+    queryFn: () =>
+      prefixSuffixService.getPrefixByPosition(unitId, recordTypeKey, skip, take),
+    enabled: !!unitId && !!recordTypeKey,
+  });
+
+export const usePrefixDetail = (id: string) =>
+  useQuery({
+    queryKey: ["prefix", id],
+    queryFn: () => prefixSuffixService.getPrefixById(id),
+    enabled: !!id,
+  });
+
+export const useCreatePrefix = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (payload: CreatePrefixPayload) =>
+      prefixSuffixService.createPrefix(payload),
+    onSuccess: (_, payload) => {
+      queryClient.invalidateQueries({
+        queryKey: [
+          "prefixes",
+          payload.unitId,
+          payload.recordTypeKey,
+          { cc: payload.isForCC },
+        ],
+      });
+    },
+  });
+};
+
+export const useUpdatePrefix = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, payload }: { id: string; payload: CreatePrefixPayload }) =>
+      prefixSuffixService.editPrefix(id, payload),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: [
+          "prefixes",
+          variables.payload.unitId,
+          variables.payload.recordTypeKey,
+          { cc: variables.payload.isForCC },
+        ],
+      });
+      queryClient.invalidateQueries({ queryKey: ["prefix", variables.id] });
+    },
+  });
+};
+
+export const useDeletePrefix = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      id,
+    }: {
+      id: string;
+      unitId: string;
+      recordTypeKey: string;
+      isForCC: boolean;
+    }) => prefixSuffixService.deletePrefix(id),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: [
+          "prefixes",
+          variables.unitId,
+          variables.recordTypeKey,
+          { cc: variables.isForCC },
+        ],
+      });
+      queryClient.invalidateQueries({ queryKey: ["prefix", variables.id] });
+    },
+  });
+};
+
+export const useSuffixesList = (
+  unitId: string,
+  recordTypeKey: string,
+  skip = 0,
+  take = 10
+) =>
+  useQuery({
+    queryKey: ["suffixes", unitId, recordTypeKey, { cc: false }],
+    queryFn: () => prefixSuffixService.getSuffix(unitId, recordTypeKey, skip, take),
+    enabled: !!unitId && !!recordTypeKey,
+  });
+
+export const useCCSuffixesList = (
+  unitId: string,
+  recordTypeKey: string,
+  skip = 0,
+  take = 10
+) =>
+  useQuery({
+    queryKey: ["suffixes", unitId, recordTypeKey, { cc: true }],
+    queryFn: () =>
+      prefixSuffixService.getSuffixCC(unitId, recordTypeKey, skip, take),
+    enabled: !!unitId && !!recordTypeKey,
+  });
+
+export const useSuffixDetail = (id: string) =>
+  useQuery({
+    queryKey: ["suffix", id],
+    queryFn: () => prefixSuffixService.getSuffixById(id),
+    enabled: !!id,
+  });
+
+export const useCreateSuffix = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (payload: CreateSuffixPayload) =>
+      prefixSuffixService.createSuffix(payload),
+    onSuccess: (_, payload) => {
+      queryClient.invalidateQueries({
+        queryKey: [
+          "suffixes",
+          payload.unitId,
+          payload.recordTypeKey,
+          { cc: payload.isForCC },
+        ],
+      });
+    },
+  });
+};
+
+export const useUpdateSuffix = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, payload }: { id: string; payload: CreateSuffixPayload }) =>
+      prefixSuffixService.editSuffix(id, payload),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: [
+          "suffixes",
+          variables.payload.unitId,
+          variables.payload.recordTypeKey,
+          { cc: variables.payload.isForCC },
+        ],
+      });
+      queryClient.invalidateQueries({ queryKey: ["suffix", variables.id] });
+    },
+  });
+};
+
+export const useDeleteSuffix = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      id,
+    }: {
+      id: string;
+      unitId: string;
+      recordTypeKey: string;
+      isForCC: boolean;
+    }) => prefixSuffixService.deleteSuffix(id),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: [
+          "suffixes",
+          variables.unitId,
+          variables.recordTypeKey,
+          { cc: variables.isForCC },
+        ],
+      });
+      queryClient.invalidateQueries({ queryKey: ["suffix", variables.id] });
+    },
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/hooks/useRecordTagPrefixes.ts b/apps/edr-freight-web/backoffice/src/user-management/hooks/useRecordTagPrefixes.ts
new file mode 100644
index 000000000..eb2651660
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/hooks/useRecordTagPrefixes.ts
@@ -0,0 +1,106 @@
+// hooks/useRecordTagPrefixes.ts
+"use client";
+
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+import {
+  CreatePrefixPayload,
+  PrefixSuffixListResponseDto,
+  prefixSuffixService,
+} from "../services/api/prefixSuffixService";
+
+export interface UseRecordTagPrefixesParams {
+  unitId: string;
+  recordTagId?: string;
+  skip?: number;
+  take?: number;
+}
+
+export const useRecordTagPrefixes = ({
+  unitId,
+  recordTagId,
+  skip = 0,
+  take = 10,
+}: UseRecordTagPrefixesParams) => {
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+  const queryClient = useQueryClient();
+
+  // --- Get Prefixes by Record Tag ---
+  const {
+    data: prefixesResponse,
+    isLoading: isLoadingPrefixes,
+    isError: isErrorPrefixes,
+    refetch: refetchPrefixes,
+  } = useQuery<PrefixSuffixListResponseDto>({
+    queryKey: ["recordTagPrefixes", unitId, recordTagId, skip, take],
+    queryFn: async () => {
+      const { data } = await prefixSuffixService.getPrefixByRecordTagId(
+        unitId,
+        recordTagId!,
+        skip,
+        take,
+      );
+      return data;
+    },
+    enabled: !!unitId && !!recordTagId,
+    staleTime: 5 * 60 * 1000,
+    retry: false,
+  });
+
+  // --- Create Prefix for Tag ---
+  const { mutate: createPrefix, isPending: isCreatingPrefix } = useMutation({
+    mutationFn: async (payload: CreatePrefixPayload) => {
+      const { data } = await prefixSuffixService.createPrefix(payload);
+      return data;
+    },
+    onSuccess: () => {
+      toast.success(
+        t("prefixes.createdSuccess") || "Prefix created successfully ✅",
+      );
+      queryClient.invalidateQueries({
+        queryKey: ["recordTagPrefixes", unitId, recordTagId],
+      });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  // --- Delete Prefix ---
+  const { mutate: deletePrefix, isPending: isDeletingPrefix } = useMutation({
+    mutationFn: async (prefixId: string) => {
+      const { data } = await prefixSuffixService.deletePrefix(prefixId);
+      return data;
+    },
+    onSuccess: () => {
+      toast.success(
+        t("prefixes.deletedSuccess") || "Prefix deleted successfully 🗑️",
+      );
+      queryClient.invalidateQueries({
+        queryKey: ["recordTagPrefixes", unitId, recordTagId],
+      });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  return {
+    // queries
+    prefixes: prefixesResponse?.items ?? [],
+    total: prefixesResponse?.count ?? 0,
+    isLoadingPrefixes,
+    isErrorPrefixes,
+    refetchPrefixes,
+
+    // mutations
+    createPrefix,
+    isCreatingPrefix,
+    deletePrefix,
+    isDeletingPrefix,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/hooks/useRecordTags.ts b/apps/edr-freight-web/backoffice/src/user-management/hooks/useRecordTags.ts
new file mode 100644
index 000000000..ac978c942
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/hooks/useRecordTags.ts
@@ -0,0 +1,134 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { toast } from "sonner"; // ✅ shadcn sonner toast
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+import {
+  CreateRecordTagPayload,
+  RecordTag,
+  RecordTagResponse,
+  UpdateRecordTagPayload,
+} from "@/user-management/dto/recordTags/recordTags.type";
+import { recordTagService } from "../services/api/recordTagsService";
+
+export const useRecordTags = ({
+  unitId,
+  recordTagId,
+}: {
+  unitId?: string | null;
+  recordTagId?: string;
+}) => {
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+  // --- Get Record Tags List by Unit ---
+  const {
+    data: recordTagsList,
+    isLoading: isLoadingRecordTagsList,
+    isError: isErrorRecordTagsList,
+    refetch: refetchRecordTagsList,
+  } = useQuery<RecordTagResponse>({
+    queryKey: ["recordTagsList", unitId],
+    queryFn: async () => {
+      const { data } = await recordTagService.getRecordTagsListWithUnitById(
+        unitId!
+      );
+      return data;
+    },
+    enabled: !!unitId,
+    staleTime: 5 * 60 * 1000,
+    retry: false,
+  });
+
+  // --- Get Record Tag by Id ---
+  const {
+    data: recordTag,
+    isLoading: isLoadingRecordTag,
+    isError: isErrorRecordTag,
+    refetch: refetchRecordTag,
+  } = useQuery<RecordTag>({
+    queryKey: ["recordTag", recordTagId],
+    queryFn: async () => {
+      const { data } = await recordTagService.getRecordTags(recordTagId!);
+      return data;
+    },
+    enabled: !!recordTagId,
+    staleTime: 5 * 60 * 1000,
+    retry: false,
+  });
+
+  // --- Create Record Tag ---
+  const { mutate: createRecordTag, isPending: isCreatingRecordTag } =
+    useMutation({
+      mutationFn: async (payload: CreateRecordTagPayload) => {
+        const { data } = await recordTagService.createRecordTags(payload);
+        return data;
+      },
+      onSuccess: () => {
+        toast.success("Record Tag created successfully ✅");
+        refetchRecordTagsList();
+      },
+      onError: (error) => {
+        handleError(error);
+      },
+    });
+
+  // --- Update Record Tag ---
+  const { mutate: updateRecordTag, isPending: isUpdatingRecordTag } =
+    useMutation({
+      mutationFn: async ({
+        id,
+        payload,
+      }: {
+        id: string;
+        payload: UpdateRecordTagPayload;
+      }) => {
+        const { data } = await recordTagService.updateEmployee(id, payload);
+        return data;
+      },
+      onSuccess: () => {
+        toast.success("Record Tag updated successfully ✨");
+        refetchRecordTagsList();
+      },
+      onError: (error) => {
+        handleError(error);
+      },
+    });
+
+  // --- Delete Record Tag ---
+  const { mutate: deleteRecordTag, isPending: isDeletingRecordTag } =
+    useMutation({
+      mutationFn: async (id: string) => {
+        const { data } = await recordTagService.deleteEmployee(id);
+        return data;
+      },
+      onSuccess: () => {
+        toast.success("Record Tag deleted successfully 🗑️");
+        refetchRecordTagsList();
+      },
+      onError: (error) => {
+        handleError(error);
+      },
+    });
+
+  return {
+    // list
+    recordTagsList,
+    isLoadingRecordTagsList,
+    isErrorRecordTagsList,
+    refetchRecordTagsList,
+
+    // single
+    recordTag,
+    isLoadingRecordTag,
+    isErrorRecordTag,
+    refetchRecordTag,
+
+    // mutations
+    createRecordTag,
+    isCreatingRecordTag,
+    updateRecordTag,
+    isUpdatingRecordTag,
+    deleteRecordTag,
+    isDeletingRecordTag,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/hooks/useSeal.ts b/apps/edr-freight-web/backoffice/src/user-management/hooks/useSeal.ts
new file mode 100644
index 000000000..a1485a7fc
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/hooks/useSeal.ts
@@ -0,0 +1,153 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import {
+  sealService,
+  CreateSealPayload,
+  SealListResponse,
+  SealResponseDto,
+  SealStatusUpdatePayload,
+} from "../services/api/sealService";
+
+export const useSeal = () => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  // Query for fetching all seals
+  const {
+    data: sealsData,
+    isLoading: isLoadingSeals,
+    isError: isSealsError,
+    refetch: refetchSeals,
+  } = useQuery<SealListResponse>({
+    queryKey: ["seals"],
+    queryFn: async () => {
+      const response = await sealService.getSeals();
+      return response.data;
+    },
+    enabled: false,
+  });
+
+  // Query for fetching a single seal
+  const getSealsByUnitId = (id: string | null) => {
+    return useQuery({
+      queryKey: ["seal", id],
+      queryFn: async () => {
+        if (id) {
+          const response = await sealService.getSealListsByUnitId(id);
+          return response.data;
+        }
+      },
+      enabled: !!id,
+    });
+  };
+  // Query for fetching a single seal
+  const getSealsById = (id: string | null) => {
+    return useQuery({
+      queryKey: ["seal", id],
+      queryFn: async () => {
+        if (id) {
+          const response = await sealService.getSeal(id);
+          return response.data;
+        }
+      },
+      enabled: !!id,
+    });
+  };
+
+  // Mutation for creating a seal
+  const createSealMutation = useMutation<
+    SealResponseDto,
+    Error,
+    CreateSealPayload
+  >({
+    mutationFn: async (payload) => {
+      const response = await sealService.createSeal(payload);
+      return response.data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["seals"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  // Mutation for updating a seal
+  const updateSealMutation = useMutation({
+    mutationFn: async ({
+      id,
+      payload,
+    }: {
+      id: string;
+      payload: Partial<CreateSealPayload>;
+    }) => {
+      const response = await sealService.updateSeal(id, payload);
+      return response.data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["seal"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  // Mutation for deleting a seal (actually deactivates via change-status)
+  const deleteSealMutation = useMutation({
+    mutationFn: async (id: string) => {
+      await sealService.changeSealStatus(id, { isCurrent: false });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["seals"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  // Mutation for updating seal upload status
+  const updateSealStatusMutation = useMutation({
+    mutationFn: async ({
+      id,
+      updateSealStatusPayload,
+    }: {
+      id: string;
+      updateSealStatusPayload: SealStatusUpdatePayload;
+    }) => {
+      const response = await sealService.updateSealUploadStatus(
+        id,
+        updateSealStatusPayload
+      );
+      return response.data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["seals"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  return {
+    // Queries
+    seals: sealsData?.items || [],
+    totalSeals: sealsData?.count || 0,
+    isLoadingSeals,
+    isSealsError,
+    refetchSeals,
+    getSealsByUnitId,
+    getSealsById,
+
+    // Mutations
+    createSeal: createSealMutation.mutateAsync,
+    isCreatingSeal: createSealMutation.isPending,
+    updateSeal: updateSealMutation.mutate,
+    isUpdatingSeal: updateSealMutation.isPending,
+    deleteSeal: deleteSealMutation.mutate,
+    isDeletingSeal: deleteSealMutation.isPending,
+    updateSealStatus: updateSealStatusMutation.mutateAsync,
+    isUpdatingStatus: updateSealStatusMutation.isPending,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/hooks/useUnit.ts b/apps/edr-freight-web/backoffice/src/user-management/hooks/useUnit.ts
new file mode 100644
index 000000000..29b5b92cc
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/hooks/useUnit.ts
@@ -0,0 +1,198 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { useAuth } from "@/shared/context/AuthContext";
+
+import {
+  getUnitList,
+  getMyAdminUnits,
+  getUnitById,
+  getUnitHierarchy,
+  getCurrentUnitEmployees,
+  createUnit,
+  updateUnit,
+  softDeleteUnit,
+  relateUnitToUnit,
+  getChildUnits,
+  RelateUnitToUnitPayload,
+  UnitPayload,
+  UnitQueryParams,
+} from "@/user-management/services/api/unitService";
+
+export const useUnit = () => {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+  const { user } = useAuth();
+  const isOrganizationAdmin =
+    user?.roles?.some((role) => role.key === "organization_admin") ?? false;
+
+  const getList = (
+    organizationId: string,
+    params?: UnitQueryParams,
+    enabled: boolean = true,
+  ) => {
+    return useQuery({
+      queryKey: ["unitList", organizationId, params ?? {}],
+      queryFn: () => getUnitList(organizationId, params ?? {}),
+      enabled: enabled && !!organizationId,
+      staleTime: 0,
+      refetchOnMount: "always",
+      refetchOnWindowFocus: false,
+    });
+  };
+
+  const getAccessibleList = (
+    organizationId: string,
+    params?: UnitQueryParams,
+    enabled: boolean = true,
+  ) => {
+    return useQuery({
+      queryKey: [
+        "accessibleUnitList",
+        organizationId,
+        params ?? {},
+        isOrganizationAdmin ? "all" : "my-admin-units",
+      ],
+      queryFn: async () => {
+        const response = isOrganizationAdmin
+          ? await getUnitList(organizationId, params ?? {})
+          : await getMyAdminUnits(organizationId);
+        const responseData = response.data;
+        const items = Array.isArray(responseData)
+          ? responseData
+          : (responseData?.items ?? []);
+
+        return {
+          ...response,
+          data: {
+            ...(Array.isArray(responseData) ? {} : responseData),
+            count: responseData?.count ?? items.length,
+            items,
+          },
+        };
+      },
+      enabled: enabled && !!organizationId,
+      staleTime: 0,
+      refetchOnMount: "always",
+      refetchOnWindowFocus: false,
+    });
+  };
+
+  const getById = (id: string) => {
+    return useQuery({
+      queryKey: ["unit", id],
+      queryFn: () => getUnitById(id),
+      enabled: !!id,
+    });
+  };
+
+  const getHierarchy = (id: string) => {
+    return useQuery({
+      queryKey: ["unitHierarchy", id],
+      queryFn: () => getUnitHierarchy(id),
+      enabled: !!id,
+    });
+  };
+
+  const getEmployees = (id: string) => {
+    return useQuery({
+      queryKey: ["unitEmployees", id],
+      queryFn: () => getCurrentUnitEmployees(id),
+      enabled: !!id,
+    });
+  };
+
+  const getChildren = (parentUnitId: string) => {
+    return useQuery({
+      queryKey: ["unitChildren", parentUnitId],
+      queryFn: () => getChildUnits(parentUnitId),
+      enabled: !!parentUnitId,
+      staleTime: 0,
+      refetchOnMount: "always",
+      refetchOnWindowFocus: false,
+    });
+  };
+
+  const create = useMutation({
+    mutationFn: ({
+      payload,
+      successCallback,
+    }: {
+      payload: UnitPayload;
+      successCallback: () => void;
+    }) => createUnit(payload),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["unitList"] });
+      queryClient.invalidateQueries({ queryKey: ["unitChildren"] });
+      variables.successCallback();
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const update = useMutation({
+    mutationFn: ({
+      id,
+      payload,
+      successCallback,
+    }: {
+      id: string;
+      payload: UnitPayload;
+      successCallback: () => void;
+    }) => updateUnit(id, payload),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["unitList"] });
+      queryClient.invalidateQueries({ queryKey: ["unitChildren"] });
+      variables.successCallback();
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const remove = useMutation({
+    mutationFn: (id: string) => softDeleteUnit(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["unitList"] });
+      queryClient.invalidateQueries({ queryKey: ["unitChildren"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  const relate = useMutation({
+    mutationFn: ({
+      payload,
+    }: {
+      payload: RelateUnitToUnitPayload;
+      successCallback?: () => void;
+    }) => relateUnitToUnit(payload),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["unitList"] });
+      queryClient.invalidateQueries({ queryKey: ["unitChildren"] });
+      variables.successCallback?.();
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+  return {
+    getList,
+    getAccessibleList,
+    getById,
+    getHierarchy,
+    getEmployees,
+    getChildren,
+    createUnit: create.mutateAsync,
+    isCreating: create.isPending,
+    updateUnit: update.mutateAsync,
+    isUpdating: update.isPending,
+    removeUnit: remove.mutateAsync,
+    isDeleting: remove.isPending,
+    relateUnit: relate.mutateAsync,
+    isRelating: relate.isPending,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/hooks/useUserPositionApprovals.ts b/apps/edr-freight-web/backoffice/src/user-management/hooks/useUserPositionApprovals.ts
new file mode 100644
index 000000000..ebc2c9639
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/hooks/useUserPositionApprovals.ts
@@ -0,0 +1,51 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import {
+  approveUserPosition,
+  fetchUserPositionApprovals,
+  rejectUserPosition,
+  type UserPositionApprovalParams,
+  type UserPositionDecisionPayload,
+} from "@/user-management/services/api/userPositionApprovalService";
+
+interface DecisionVariables extends UserPositionDecisionPayload {
+  id: string;
+}
+
+const QUERY_KEY = "user-position-approvals";
+
+export const useUserPositionApprovals = (
+  params: UserPositionApprovalParams = {},
+) => {
+  const queryClient = useQueryClient();
+
+  const approvalsQuery = useQuery({
+    queryKey: [QUERY_KEY, params],
+    queryFn: () => fetchUserPositionApprovals(params),
+  });
+
+  const invalidateList = () =>
+    queryClient.invalidateQueries({ queryKey: [QUERY_KEY] });
+
+  const approveMutation = useMutation({
+    mutationFn: ({ id, comment }: DecisionVariables) =>
+      approveUserPosition(id, { comment }),
+    onSuccess: () => {
+      toast.success("User position approved successfully");
+      invalidateList();
+    },
+    onError: () => toast.error("Failed to approve user position"),
+  });
+
+  const rejectMutation = useMutation({
+    mutationFn: ({ id, comment }: DecisionVariables) =>
+      rejectUserPosition(id, { comment }),
+    onSuccess: () => {
+      toast.success("User position rejected successfully");
+      invalidateList();
+    },
+    onError: () => toast.error("Failed to reject user position"),
+  });
+
+  return { approvalsQuery, approveMutation, rejectMutation };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/pages/UserPositionApprovalPage.tsx b/apps/edr-freight-web/backoffice/src/user-management/pages/UserPositionApprovalPage.tsx
new file mode 100644
index 000000000..c2e884551
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/pages/UserPositionApprovalPage.tsx
@@ -0,0 +1,7 @@
+import UserPositionApprovalList from "@/user-management/components/user-position-approvals/UserPositionApprovalList";
+
+const UserPositionApprovalPage = () => {
+  return <UserPositionApprovalList />;
+};
+
+export default UserPositionApprovalPage;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/pages/position-management/MigratedDataManagementPage.tsx b/apps/edr-freight-web/backoffice/src/user-management/pages/position-management/MigratedDataManagementPage.tsx
new file mode 100644
index 000000000..844452042
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/pages/position-management/MigratedDataManagementPage.tsx
@@ -0,0 +1,6 @@
+import MigratedDataManagement from '@/user-management/components/MigratedRecords/MigratedRecordList'
+import React from 'react'
+
+export default function MigratedDataManagementPage() {
+  return <MigratedDataManagement/>
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/pages/position-management/create.tsx b/apps/edr-freight-web/backoffice/src/user-management/pages/position-management/create.tsx
new file mode 100644
index 000000000..7591c2a2b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/pages/position-management/create.tsx
@@ -0,0 +1,25 @@
+import { CreatePositionForm } from "@/user-management/components/position-management/CreatePositionForm";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/shared/common/ui/card";
+import { t } from "i18next";
+
+const CreatePositionPage = () => {
+  return (
+    <div className="p-6 max-w-3xl mx-auto">
+      <Card>
+        <CardHeader>
+          <CardTitle>{t("contentManagement.createPermission")}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <CreatePositionForm />
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default CreatePositionPage;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/pages/position-management/edit.tsx b/apps/edr-freight-web/backoffice/src/user-management/pages/position-management/edit.tsx
new file mode 100644
index 000000000..1f6f5f1cb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/pages/position-management/edit.tsx
@@ -0,0 +1,27 @@
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+} from "@/shared/common/ui/card";
+import { EditPositionForm } from "@/user-management/components/position-management/EditPositionForm";
+import { useParams } from "react-router-dom";
+
+const EditPositionPage = () => {
+  const { id } = useParams();
+
+  return (
+    <div className="p-6 max-w-3xl mx-auto">
+      <Card>
+        <CardHeader>
+          <CardTitle>View Permission Type</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <EditPositionForm id={id as string} />
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default EditPositionPage;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/pages/position-management/index.tsx b/apps/edr-freight-web/backoffice/src/user-management/pages/position-management/index.tsx
new file mode 100644
index 000000000..57d7a1898
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/pages/position-management/index.tsx
@@ -0,0 +1,13 @@
+import PositionManagement from "@/user-management/components/position-management/PositionLists";
+import { t } from "i18next";
+
+const PositionManagementPage = () => {
+  return (
+    <div className="p-6">
+      <h2 className="text-2xl font-bold mb-4">{t("contentManagement.permissionManagement")}</h2>
+      <PositionManagement />
+    </div>
+  );
+};
+
+export default PositionManagementPage;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/route.tsx b/apps/edr-freight-web/backoffice/src/user-management/route.tsx
new file mode 100644
index 000000000..76d3182ad
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/route.tsx
@@ -0,0 +1,318 @@
+import type { ReactElement } from "react";
+import { Navigate, Outlet, Route } from "react-router-dom";
+
+import { useAuth } from "@/auth/useAuth";
+import { isSuperAdmin } from "@/lib/permissions";
+import { WithPermission } from "@/shared/hooks/useHas";
+import PendingExternalUsers from "@/super-admin/components/externalUsers/PendingExternalUsers";
+import TemplatePage from "@/super-admin/components/templates/components/templates";
+import CreatePositionPage from "./pages/position-management/create";
+import EditPositionPage from "./pages/position-management/edit";
+import PositionManagementPage from "./pages/position-management";
+import MigratedDataManagementPage from "./pages/position-management/MigratedDataManagementPage";
+import UserPositionApprovalPage from "./pages/UserPositionApprovalPage";
+import ViewMigratedDataPage from "./components/MigratedRecords/ViewMigratedDataPage";
+import AllRecordsPage from "./all-records/pages/AllRecordsPage";
+import AllRecordDetailsPage from "./all-records/pages/AllRecordDetailsPage";
+import Branding from "./web-Management/Branding/Branding";
+import { AppLayout } from "./Applayout";
+import ActivityLogPage from "@/pages/ActivityLogPage";
+import AdminRegistrationPage from "@/pages/Organizations/AdminRegistrationPage";
+import OrganizationAdminsPage from "@/pages/OrganizationAdminsPage";
+import UserProfileEditPage from "@/pages/UserProfileEditPage";
+import UploadedDocumentViewPage from "@/pages/UploadedDocumentViewPage";
+import EditOrganizationPage from "@/pages/Organizations/EditOrganizationPage";
+import NewOrganizationPage from "@/pages/Organizations/NewOrganizationPage";
+import OrganizationDetailPage from "@/pages/Organizations/OrganizationDetailPage";
+import OrganizationsPage from "@/pages/Organizations/OrganizationsPage";
+import DashboardPage from "@/pages/DashboardPage";
+import AddSitePage from "@/pages/AddSitePage";
+import SuperAdminArchivedPage from "@/pages/SuperAdminArchivedPage";
+import SuperAdminArchiveUsersPage from "@/pages/SuperAdminArchiveUsersPage";
+import SettingsPage from "@/pages/SettingsPage";
+import OrgAdminDashboard from "@/pages/OrgAdminDashboard";
+import ContentManagementPage from "@/pages/ContentManagementPage";
+import BulkUploadPage from "@/pages/BulkUploadPage";
+import WebManagement from "@/pages/WebManagementPage";
+import ArchiveUsersPage from "@/pages/ArchiveUsersPage";
+import SectorReportsPage from "@/record-management/pages/User/sectorReports";
+import ArchivedUnitsPositionsPage from "@/pages/ArchivedUnitsPositionsPage";
+import ConfigurationPage from "@/pages/ConfigurationPage";
+import { SidebarProvider } from "@/shared/common/ui/sidebar";
+import { AuthProvider as UmAuthProvider } from "@/shared/context/AuthContext";
+import { PermissionProvider } from "@/shared/context/PermissionContext";
+import UserManagementPage from "@/pages/UserManagementPage";
+
+/**
+ * Provider shell for the vendored IAM UI. Feeds its Auth + Permission contexts
+ * from the real freight session so AppMenuTabs / pages see the signed-in user
+ * and their permission keys (otherwise both are null/empty). Wraps AppLayout in
+ * SidebarProvider (its useSidebar dependency).
+ */
+function UmShell(): ReactElement {
+  const { user } = useAuth();
+  return (
+    <UmAuthProvider>
+      <PermissionProvider
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        permissions={(user?.permissions as any) ?? []}
+      >
+        <SidebarProvider>
+          <AppLayout />
+        </SidebarProvider>
+      </PermissionProvider>
+    </UmAuthProvider>
+  );
+}
+
+/**
+ * Layout wrapper for the user-management route subtree. Self-contained (the
+ * original vendored AppLayout was removed when the folder was re-copied and it
+ * pulled the un-migrated @/record-management chrome). Just renders the matched
+ * child route; swap in the real IAM shell later if desired.
+ */
+
+/**
+ * Role gate for the nested super-admin / org-admin route groups. Renders child
+ * routes via <Outlet /> only when the user holds an allowed role (super admins
+ * always pass); otherwise bounces to the overview.
+ */
+function PrivateRoute({ allowedRoles }: { allowedRoles: string[] }): ReactElement {
+  const { user } = useAuth();
+  const roleKeys = (user?.roles ?? [])
+    .map((r) => r.key)
+    .filter((k): k is string => Boolean(k));
+  const allowed =
+    isSuperAdmin(user) || allowedRoles.some((r) => roleKeys.includes(r));
+  return allowed ? <Outlet /> : <Navigate to="/dashboard/overview" replace />;
+}
+
+export const UserManagementRedirect = () => {
+  const { user } = useAuth();
+  const roles = user?.roles?.map((r) => r.key) || [];
+
+  if (roles.includes("super_admin")) {
+    return <Navigate to="/user-management/dashboard" replace />;
+  }
+
+  if (roles.includes("admin") || roles.includes("unit_admin")) {
+    return <Navigate to="/user-management/user_management-dashboard" replace />;
+  }
+
+  return <Navigate to="/" replace />; // fallback
+};
+
+/**
+ * Placeholder for user-management pages present in the source IAM app's route
+ * map but not yet migrated into this backoffice. Keeps the route live and
+ * honest instead of failing the build. See the `TODO(um-migration)` markers.
+ */
+/**
+ * User-management route subtree. Mount inside the app's <Routes>:
+ *   <Routes>{UserManagementRoutes()}</Routes>
+ * Child paths are relative (RRv6 forbids absolute paths on nested routes), so
+ * they serve at /user-management/* under the app root.
+ */
+export function UserManagementRoutes(): ReactElement {
+  return (
+    <Route
+          element={<UmShell />}
+        >
+                        <Route
+                          path="user-management"
+                          element={
+                            <div className="w-full flex flex-col p-4">
+                              <UserManagementRedirect />
+                            </div>
+                          }
+                        />
+                        <Route
+                          path="/user-management/archive/edit/:id"
+                          element={<UserProfileEditPage />}
+                        />
+                        <Route
+                          path="user-management/position-management"
+                          element={<PositionManagementPage />}
+                        />
+                        <Route
+                          path="user-management/migrated-records-management"
+                          element={<MigratedDataManagementPage />}
+                        />
+                        <Route
+                          path="user-management/position-management/edit/:id"
+                          element={<EditPositionPage />}
+                        />
+                        <Route
+                          path="user-management/position-management/new"
+                          element={<CreatePositionPage />}
+                        />
+
+                        {/* Super Admin */}
+                        <Route
+                          element={
+                            <PrivateRoute allowedRoles={["super_admin"]} />
+                          }
+                        >
+                          <Route
+                            path="user-management/dashboard"
+                            element={<DashboardPage />}
+                          />
+                          <Route
+                            path="user-management/organizations"
+                            element={<OrganizationsPage />}
+                          />
+                          <Route
+                            path="user-management/organizations/detail/:id"
+                            element={<OrganizationDetailPage />}
+                          />
+                          <Route
+                            path="super-admin/organizations/:id"
+                            element={<OrganizationDetailPage />}
+                          />
+                          <Route
+                            path="user-management/organizations/new"
+                            element={<NewOrganizationPage />}
+                          />
+                          <Route
+                            path="user-management/organizations/edit/:id"
+                            element={<EditOrganizationPage />}
+                          />
+                          <Route
+                            path="user-management/external_users"
+                            element={<PendingExternalUsers />}
+                          />
+                          <Route
+                            path="user-management/migrated-records-management/view/:id"
+                            element={<ViewMigratedDataPage />}
+                          />
+                          <Route
+                            path="user-management/external_users/view/:id"
+                            element={<UploadedDocumentViewPage />}
+                          />
+                          <Route
+                            path="user-management/external_users/edit/:id"
+                            element={<UserProfileEditPage />}
+                          />
+                          <Route
+                            path="user-management/organization_admins"
+                            element={<OrganizationAdminsPage />}
+                          />
+                          <Route
+                            path="user-management/add_admin"
+                            element={<AdminRegistrationPage />}
+                          />
+                          <Route
+                            path="user-management/activity_log"
+                            element={<ActivityLogPage />}
+                          />
+                          <Route
+                            path="user-management/settings"
+                            element={<SettingsPage />}
+                          />
+                          <Route
+                            path="user-management/archive-users"
+                            element={<SuperAdminArchiveUsersPage />}
+                          />
+                          <Route
+                            path="user-management/archived-organizations"
+                            element={<SuperAdminArchivedPage />}
+                          />
+                          <Route
+                            path="user-management/templates"
+                            element={<TemplatePage />}
+                          />
+                          <Route
+                            path="user-management/add-site"
+                            element={<AddSitePage />}
+                          />
+                          <Route
+                            path="/user-management/web-management/Branding/Branding/:siteId"
+                            element={<Branding />}
+                          />
+                        </Route>
+
+                        {/* Org Admin */}
+                        <Route
+                          element={
+                            <PrivateRoute
+                              allowedRoles={[
+                                "admin",
+                                "organization_admin",
+                                "unit_admin",
+                              ]}
+                            />
+                          }
+                        >
+                          <Route
+                            path="user-management/user_management-dashboard"
+                            element={<OrgAdminDashboard />}
+                          />
+                          <Route
+                            path="user-management/user_management"
+                            element={<UserManagementPage />}
+                          />
+                          <Route
+                            path="user-management/user-position-approval"
+                            element={
+                              // <WithPermission
+                              //   perms={["can:activateEmployee"]}
+                              //   fallback={<Navigate to="/" replace />}
+                              // >
+                              <UserPositionApprovalPage />
+                              // </WithPermission>
+                            }
+                          />
+                          <Route
+                            path="user-management/all-records"
+                            element={
+                              <WithPermission
+                                perms={["can:viewAllRecords"]}
+                                fallback={<Navigate to="/" replace />}
+                              >
+                                <AllRecordsPage />
+                              </WithPermission>
+                            }
+                          />
+                          <Route
+                            path="user-management/all-records/:id"
+                            element={
+                              <WithPermission
+                                perms={["can:viewAllRecords"]}
+                                fallback={<Navigate to="/" replace />}
+                              >
+                                <AllRecordDetailsPage />
+                              </WithPermission>
+                            }
+                          />
+                          <Route
+                            path="user-management/content-management"
+                            element={<ContentManagementPage />}
+                          />
+                          <Route
+                            path="user-management/bulk-upload"
+                            element={<BulkUploadPage />}
+                          />
+                          <Route
+                            path="user-management/web-management/*"
+                            element={<WebManagement />}
+                          />
+                          <Route
+                            path="user-management/archives"
+                            element={<ArchiveUsersPage />}
+                          />
+                          <Route
+                            path="user-management/sector-reports"
+                            element={<SectorReportsPage />}
+                          />
+                          <Route
+                            path="user-management/archived"
+                            element={<ArchivedUnitsPositionsPage />}
+                          />
+                          <Route
+                            path="user-management/organization-settings"
+                            element={<ConfigurationPage />}
+                          />
+                        </Route>
+                      </Route>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/services/TemplateConfiguration/types/templateTypes.ts b/apps/edr-freight-web/backoffice/src/user-management/services/TemplateConfiguration/types/templateTypes.ts
new file mode 100644
index 000000000..abb13fa10
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/services/TemplateConfiguration/types/templateTypes.ts
@@ -0,0 +1,231 @@
+export interface TemplateResource {
+  id: string;
+  name: {
+    en: string;
+    am: string;
+  };
+  description?: {
+    en: string;
+    am: string;
+  };
+  presigned?: string;
+  fileInfo?: {
+    fileName: string;
+    fileSize?: number;
+    uploadedAt?: string;
+  };
+  resourceTypeId?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  isCurrent?: boolean;
+}
+
+export interface TemplateResponse {
+  count: number;
+  items: TemplateResource[];
+}
+
+export interface ResourceTypeResponse {
+  count: number;
+  items: Array<{
+    id: string;
+    name: string | { en?: string; am?: string };
+    code?: string;
+    description?: string;
+  }>;
+}
+
+export interface CreateTemplatePayload {
+  name: {
+    en: string;
+    am: string;
+  };
+  description?: {
+    en: string;
+    am: string;
+  };
+  resourceTypeId: string;
+  fileInfo?: {
+    fileName: string;
+    fileSize?: number;
+  };
+}
+
+export interface HeaderFooterFileInfo {
+  fileName: string;
+  contentType: string;
+  size: number;
+  originalname: string;
+}
+
+export interface TemplateSampleRequest {
+  data: TemplateSampleData;
+  settings?: TemplateSampleRequestSetting[];
+  resources?: TemplateSampleResource[];
+}
+
+export interface TemplateSampleResponse {
+  pdf: string;
+  contentType: string;
+}
+
+export interface TemplateSampleData {
+  collaborators: Array<{ am: string; en: string }>;
+  preferredLanguage: "am" | "en";
+  referenceNumber?: string;
+  groupedReceivers?: Array<{
+    prefix?: string;
+    suffix?: string;
+    items: string[];
+  }>;
+  groupedCCReceivers?: Array<{
+    prefix?: string;
+    suffix?: string;
+    items: string[];
+  }>;
+  groupedForYourReferenceReceivers?: Array<{
+    prefix?: string;
+    suffix?: string;
+    items: string[];
+  }>;
+  receiverList?: TemplateReceiverGroup[];
+  forYourReferenceList?: TemplateReceiverGroup[];
+  content: {
+    isWithDelegateSignature: boolean;
+    delegatorName?: string;
+    body: string;
+    date: string;
+    internalCC: string[];
+    externalCC: string[];
+    recordTags?: unknown[];
+    ccList?: TemplateReceiverGroup[];
+    prefixCC?: string;
+    suffixCC?: string;
+    from: string[];
+    subject: string;
+    sincerelyText: string;
+    to: string[];
+    prefix: string;
+    suffix: string;
+    forYourReferenceCC?: string[];
+  };
+  recordType: "external" | "internal";
+  unitId?: string;
+  header?: TemplateSampleFileInfo;
+  footer?: TemplateSampleFileInfo;
+  seal?: TemplateSampleFileInfo;
+  stamps?: TemplateSampleFileInfo[];
+}
+
+export type TemplateReceiver = {
+  type: "unit" | "non_smart";
+  name: string;
+  unitId?: string;
+  [key: string]: unknown;
+};
+
+export interface TemplateReceiverGroup {
+  prefix: string;
+  suffix: string;
+  receivers: TemplateReceiver[];
+}
+
+export interface TemplateSampleFileInfo {
+  bucket: string;
+  originalname: string;
+  contentType: string;
+  fileName?: string;
+  size?: number;
+  [key: string]: unknown;
+}
+
+export type TemplateSettingValueScope = "unit" | "global";
+
+export interface TemplateSettingValueBulkItem {
+  templateSettingId: string;
+  resourceId?: string | null;
+  value?: Record<string, unknown> | null;
+  scope?: TemplateSettingValueScope;
+  revertToDefault?: boolean;
+}
+
+export interface TemplateSampleRequestSetting {
+  id?: string;
+  code: string;
+  value: Record<string, unknown>;
+  resourceId?: string | null;
+}
+
+export interface TemplateSampleResource {
+  resourceId: string;
+  fileInfo?: TemplateSampleFileInfo;
+  presigned?: string;
+}
+
+export interface TemplateSampleSetting {
+  id: string;
+  code: string;
+  // CSS string, a CSS prop map, or a typed (non-CSS) object value such as
+  // letter labels / page margins.
+  value: Record<string, unknown> | string;
+  name?: {
+    am: string;
+    en: string;
+  };
+  description?: {
+    am: string;
+    en: string;
+  };
+  templateSettingValues?: Array<{
+    value: Record<string, string>;
+    unitId?: string | null;
+    resourceId?: string | null;
+  }>;
+  resourceId?: string | null;
+  appliesTo?: { en: string; am: string };
+  isUnitOverride?: boolean;
+}
+
+export interface TemplateSettingSectionGroup {
+  code: string;
+  rank?: string;
+  name: { am: string; en: string };
+  settings: TemplateSampleSetting[];
+}
+
+export interface TemplateSettingTypeGroup {
+  type?: {
+    id: string;
+    code: string;
+    name: { am: string; en: string };
+    description?: { am: string; en: string } | null;
+  };
+  sections: TemplateSettingSectionGroup[];
+  settings?: TemplateSampleSetting[];
+}
+
+export interface TemplateSettingsByUnitResponse {
+  count: number;
+  items: TemplateSampleSetting[];
+  groups: TemplateSettingTypeGroup[];
+}
+
+export interface TemplateSettingValueHistoryEntry {
+  id: string;
+  createdAt?: string;
+  updatedAt?: string;
+  value?: Record<string, unknown>;
+  resourceId?: string | null;
+  unitId?: string | null;
+  scope?: TemplateSettingValueScope;
+  changedBy?: {
+    name?: string;
+    email?: string;
+  };
+  [key: string]: unknown;
+}
+
+export interface TemplateSettingValueHistoryResponse {
+  count: number;
+  items: TemplateSettingValueHistoryEntry[];
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/services/api/applicationService.ts b/apps/edr-freight-web/backoffice/src/user-management/services/api/applicationService.ts
new file mode 100644
index 000000000..de12e1c07
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/services/api/applicationService.ts
@@ -0,0 +1,47 @@
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import axiosInstance from "@/shared/services/axiosInstance";
+import {
+  ApplicationDto,
+  ApplicationListResponse,
+} from "@/user-management/dto/applications/applicationDto";
+import { AxiosResponse } from "axios";
+
+export interface CreateApplicationDto {
+  key: string;
+  name: {
+    am: string;
+    en: string;
+  };
+}
+
+export interface UpdateApplicationDto {
+  key?: string;
+  name?: {
+    am: string;
+    en: string;
+  };
+}
+
+export const applicationService = {
+  getAll: (): Promise<AxiosResponse<ApplicationListResponse>> =>
+    axiosInstance.get("/applications", { headers: withHeaders() }),
+
+  getById: (id: string): Promise<AxiosResponse<ApplicationDto>> =>
+    axiosInstance.get(`/applications/${id}`, { headers: withHeaders() }),
+
+  create: (
+    data: CreateApplicationDto,
+  ): Promise<AxiosResponse<ApplicationDto>> =>
+    axiosInstance.post("/applications", data, { headers: withHeaders() }),
+
+  update: (
+    id: string,
+    data: UpdateApplicationDto,
+  ): Promise<AxiosResponse<ApplicationDto>> =>
+    axiosInstance.put(`/applications/${id}`, data, {
+      headers: withHeaders(),
+    }),
+
+  delete: (id: string): Promise<AxiosResponse<void>> =>
+    axiosInstance.delete(`/applications/${id}`, { headers: withHeaders() }),
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/services/api/auditService.ts b/apps/edr-freight-web/backoffice/src/user-management/services/api/auditService.ts
new file mode 100644
index 000000000..b71b837cf
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/services/api/auditService.ts
@@ -0,0 +1,76 @@
+// import { withHeaders } from "@/record-management/services/api/withHeaders";
+import axios from "axios";
+import { getEnvUrl } from "@/shared/config/env";
+
+// types/collection-query.dto.ts
+export interface CollectionQueryDTO {
+  /** Columns to select */
+  s?: string; // Example: "id,name,email"
+
+  /** Where conditions */
+  w?: string; // Example: "status:=:active|age:>:18"
+
+  /** Limit (take) */
+  t?: number;
+
+  /** Offset (skip) */
+  sk?: number;
+
+  /** Order by */
+  o?: string; // Example: "created_at:DESC,name:ASC"
+
+  /** Include related entities */
+  i?: string; // Example: "roles,profile"
+
+  /** Group by */
+  g?: string; // Example: "status,department"
+
+  /** Having conditions (used with group by) */
+  h?: string; // Example: "count:>:5"
+
+  /** Return count only */
+  c?: boolean;
+}
+
+export interface AuditLog {
+  id: string;
+  user: string;
+  action: string;
+  message: string;
+  timestamp: string;
+}
+
+export interface CollectionResponse {
+  items: AuditLog[];
+  total?: number;
+}
+
+
+
+export const fetchAuditLogs = async (
+  query: CollectionQueryDTO
+): Promise<CollectionResponse> => {
+  // Filter out empty or undefined fields
+  const filteredEntries = Object.entries(query).filter(
+    ([, value]) => value !== undefined && value !== null && value !== ""
+  );
+
+  // Convert to URLSearchParams
+  const params = new URLSearchParams();
+  for (const [key, value] of filteredEntries) {
+    params.append(key, String(value));
+  }
+  const baseUrl = getEnvUrl("VITE_AUDIT_API_URL");
+  const url = `${baseUrl}/audits/get-audits?${params.toString()}`;
+
+  const response = await axios.get(url);
+  const data = response.data;
+
+  // Normalize response shape
+  const items = Array.isArray(data) ? data : data.items || data.data || [];
+
+  return {
+    items,
+    total: data.total || items.length,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/services/api/employeePositionChangeRequestService.ts b/apps/edr-freight-web/backoffice/src/user-management/services/api/employeePositionChangeRequestService.ts
new file mode 100644
index 000000000..4133f42fb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/services/api/employeePositionChangeRequestService.ts
@@ -0,0 +1,160 @@
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import axiosInstance from "@/shared/services/axiosInstance";
+
+export type EmployeePositionChangeRequestStatus =
+  | "PENDING"
+  | "APPROVED"
+  | "REJECTED"
+  | string;
+
+export interface LocalizedName {
+  am?: string;
+  en?: string;
+}
+
+export interface EmployeePositionChangeRequest {
+  id: string;
+  employeeId?: string;
+  fromPositionId?: string;
+  toPositionId?: string;
+  status?: EmployeePositionChangeRequestStatus;
+  reason?: string;
+  comment?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  employee?: {
+    id?: string;
+    name?: LocalizedName | string;
+    user?: {
+      email?: string;
+      username?: string;
+    };
+  };
+  fromPosition?: {
+    id?: string;
+    name?: LocalizedName | string;
+  };
+  toPosition?: {
+    id?: string;
+    name?: LocalizedName | string;
+  };
+  requestedBy?: {
+    id?: string;
+    name?: LocalizedName | string;
+  };
+}
+
+export interface EmployeePositionChangeRequestListResponse {
+  count: number;
+  items: EmployeePositionChangeRequest[];
+}
+
+export interface EmployeePositionChangeRequestParams {
+  take?: number;
+  skip?: number;
+  search?: string;
+  status?: EmployeePositionChangeRequestStatus;
+  employeeId?: string;
+  fromPositionId?: string;
+  toPositionId?: string;
+  orderBy?: string;
+}
+
+export interface TransferEmployeePositionPayload {
+  employeeId: string;
+  fromPositionId?: string;
+  toPositionId: string;
+  reason?: string;
+  comment?: string;
+}
+
+export interface EmployeePositionChangeDecisionPayload {
+  comment?: string;
+}
+
+export interface BulkApproveEmployeePositionChangePayload {
+  ids: string[];
+  comment?: string;
+}
+
+const BASE_PATH = "/employee-position-change-requests";
+
+export const employeePositionChangeRequestService = {
+  list: async (
+    params?: EmployeePositionChangeRequestParams,
+  ): Promise<EmployeePositionChangeRequestListResponse> => {
+    const { data } =
+      await axiosInstance.get<EmployeePositionChangeRequestListResponse>(
+        BASE_PATH,
+        {
+          params,
+          headers: withHeaders(),
+        },
+      );
+    return data;
+  },
+
+  getById: async (id: string): Promise<EmployeePositionChangeRequest> => {
+    const { data } = await axiosInstance.get<EmployeePositionChangeRequest>(
+      `${BASE_PATH}/${id}`,
+      {
+        headers: withHeaders(),
+      },
+    );
+    return data;
+  },
+
+  transfer: async (
+    payload: TransferEmployeePositionPayload,
+  ): Promise<EmployeePositionChangeRequest> => {
+    const { data } = await axiosInstance.post<EmployeePositionChangeRequest>(
+      `${BASE_PATH}/transfer`,
+      payload,
+      {
+        headers: withHeaders(),
+      },
+    );
+    return data;
+  },
+
+  bulkApprove: async (
+    payload: BulkApproveEmployeePositionChangePayload,
+  ): Promise<EmployeePositionChangeRequest[]> => {
+    const { data } = await axiosInstance.patch<EmployeePositionChangeRequest[]>(
+      `${BASE_PATH}/bulk/approve`,
+      payload,
+      {
+        headers: withHeaders(),
+      },
+    );
+    return data;
+  },
+
+  approve: async (
+    id: string,
+    payload?: EmployeePositionChangeDecisionPayload,
+  ): Promise<EmployeePositionChangeRequest> => {
+    const { data } = await axiosInstance.patch<EmployeePositionChangeRequest>(
+      `${BASE_PATH}/${id}/approve`,
+      payload ?? {},
+      {
+        headers: withHeaders(),
+      },
+    );
+    return data;
+  },
+
+  reject: async (
+    id: string,
+    payload?: EmployeePositionChangeDecisionPayload,
+  ): Promise<EmployeePositionChangeRequest> => {
+    const { data } = await axiosInstance.patch<EmployeePositionChangeRequest>(
+      `${BASE_PATH}/${id}/reject`,
+      payload ?? {},
+      {
+        headers: withHeaders(),
+      },
+    );
+    return data;
+  },
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/services/api/employeePositionsService.ts b/apps/edr-freight-web/backoffice/src/user-management/services/api/employeePositionsService.ts
new file mode 100644
index 000000000..4947fdcc3
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/services/api/employeePositionsService.ts
@@ -0,0 +1,151 @@
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import axiosInstance from "@/shared/services/axiosInstance";
+import { AxiosResponse } from "axios";
+
+export interface EPHeaders {
+  tenantKey: string;
+  unitId?: string;
+}
+
+export interface InviteEPPayload {
+  positionId: string;
+  username: string;
+  email: string;
+  name: {
+    am: string;
+    en: string;
+  };
+}
+export interface InactiveEPPayload {
+  employeeId: string;
+  positionId: string;
+}
+export interface RemoveOrAssignFirstsForSecondPayload {
+  secondId: string;
+  firstIds: [string];
+}
+export interface RemoveOrAssignSecondsForFirstPayload {
+  firstId: string;
+  secondIds: [string];
+}
+
+export interface AssignEmployeePayload {
+  positionId: string;
+  employeeId: string;
+}
+
+export interface EmployeePositionQueryParams {
+  orderBy?: string;
+  take?: number;
+  skip?: number;
+  order?: string;
+}
+export interface UpdateProfilePayload {
+  email?: string;
+  username?: string;
+  phoneNumber?: string;
+  name: {
+    am?: string;
+    en?: string;
+  };
+}
+
+// API endpoints
+
+export const inviteEmployeePosition = async (
+  payload: InviteEPPayload
+): Promise<AxiosResponse> =>
+  axiosInstance.post("/employee-positions/invite", payload, {
+    headers: withHeaders(),
+  });
+
+export const setInactive = async (
+  payload: InactiveEPPayload
+): Promise<AxiosResponse> =>
+  axiosInstance.post("/employee-positions/inactive", payload, {
+    headers: withHeaders(),
+  });
+
+export const getGivenFirst = async (
+  id: string,
+  params?: EmployeePositionQueryParams
+): Promise<AxiosResponse> =>
+  axiosInstance.get(`/employee-positions/given-first/${id}`, {
+    ...{ headers: withHeaders() },
+    params,
+  });
+
+export const getGivenSecond = async (
+  id: string,
+  params?: EmployeePositionQueryParams
+): Promise<AxiosResponse> =>
+  axiosInstance.get(`/employee-positions/given-second/${id}`, {
+    ...{ headers: withHeaders() },
+    params,
+  });
+export const updateProfile = async (payload: UpdateProfilePayload,id:string) => {
+  return axiosInstance.patch(`/users/update-users-profile/${id}`, payload);
+};
+export const updateUserProfile = async (
+  payload: UpdateProfilePayload,
+  id: string
+) => {
+  return axiosInstance.patch(`/users/update-users-profile/${id}`, payload);
+};
+export const assignEmployees = async (
+  payload: AssignEmployeePayload
+): Promise<AxiosResponse> =>
+  axiosInstance.post("/employee-positions/assign", payload, {
+    headers: withHeaders(),
+  });
+
+export const assignFirstsForSecond = async (
+  payload: RemoveOrAssignFirstsForSecondPayload
+): Promise<AxiosResponse> =>
+  axiosInstance.post("/employee-positions/assign-firsts-for-second", payload, {
+    headers: withHeaders(),
+  });
+
+export const assignSecondsForFirst = async (
+  payload: RemoveOrAssignSecondsForFirstPayload
+): Promise<AxiosResponse> =>
+  axiosInstance.post("/employee-positions/assign-seconds-for-first", payload, {
+    headers: withHeaders(),
+  });
+
+export const deleteEmployeePosition = async (
+  id: string
+): Promise<AxiosResponse> =>
+  axiosInstance.delete(`/employee-positions/${id}`, { headers: withHeaders() });
+
+export const removeFirstsForSecond = async (
+  payload: RemoveOrAssignFirstsForSecondPayload
+): Promise<AxiosResponse> =>
+  axiosInstance.post("/employee-positions/remove-firsts-for-second", payload, {
+    headers: withHeaders(),
+  });
+
+export const removeSecondsForFirst = async (
+  payload: RemoveOrAssignSecondsForFirstPayload
+): Promise<AxiosResponse> =>
+  axiosInstance.post("/employee-positions/remove-seconds-for-first", payload, {
+    headers: withHeaders(),
+  });
+
+  export const deactivateUser = async (
+    userId: string
+  ): Promise<AxiosResponse> => {
+    return axiosInstance.patch(`/employees/${userId}/deactivate`, {
+      headers: withHeaders(),
+    });
+  };
+
+    export const activateUser = async (
+      userId: string
+    ): Promise<AxiosResponse> => {
+      return axiosInstance.patch(`/employees/${userId}/activate`, {
+        headers: withHeaders(),
+      });
+    };
+
+    
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/user-management/services/api/employeesService.ts b/apps/edr-freight-web/backoffice/src/user-management/services/api/employeesService.ts
new file mode 100644
index 000000000..f30b068b2
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/services/api/employeesService.ts
@@ -0,0 +1,96 @@
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import axiosInstance from "@/shared/services/axiosInstance";
+import { EmployeeWithUnitListResponse, UserWithUnitListResponse } from "@/user-management/dto/employees/employees";
+import { AxiosResponse } from "axios";
+
+export interface EmployeeDto {
+  id: string;
+  name: string;
+  email: string;
+  phone: string;
+  // Add other fields as needed
+}
+
+export interface CreateEmployeePayload {
+  name: string;
+  email: string;
+  phone: string;
+  // Add other fields as required for creation
+}
+
+export interface EmployeeQueryParams {
+  orderBy?: string;
+  take?: number;
+  skip?: number;
+  order?: string;
+}
+
+export interface UpdateEmployeePayload extends Partial<CreateEmployeePayload> {}
+
+export interface EmployeesHeaders {
+  delegatorPositionId: string;
+  currentProjectId: string;
+}
+
+export const employeeService = {
+  getEmployee: (id: string): Promise<AxiosResponse<EmployeeDto>> =>
+    axiosInstance.get(`/employees/${id}`, {
+      headers: withHeaders(),
+    }),
+
+  getEmployeesListById: (id: string): Promise<AxiosResponse<EmployeeDto[]>> =>
+    axiosInstance.get(`/employees/list/${id}`, {
+      headers: withHeaders(),
+    }),
+  getEmployeesWithUnitById: (
+    id: string,
+    params: EmployeeQueryParams
+  ): Promise<AxiosResponse<EmployeeWithUnitListResponse>> => {
+    return axiosInstance.get(`/employees/${id}/with-unit`, {
+      headers: withHeaders(),
+      params,
+    });
+  },
+  getUsersWithUnitById: (
+    id: string,
+    params: EmployeeQueryParams
+  ): Promise<AxiosResponse<UserWithUnitListResponse>> => {
+    return axiosInstance.get(`/employees/${id}/active-with-unit`, {
+      headers: withHeaders(),
+      params,
+    });
+  },
+  getEmployeesWithOrganizationById: (
+    id: string,
+    params?: EmployeeQueryParams
+  ): Promise<AxiosResponse<EmployeeWithUnitListResponse>> => {
+    const mergedParams: EmployeeQueryParams = {
+      ...params,
+      take: 1000,
+    };
+    return axiosInstance.get(`/employees/${id}/by-organization`, {
+      headers: withHeaders(),
+      params: mergedParams,
+    });
+  },
+
+  createEmployee: (
+    payload: CreateEmployeePayload
+  ): Promise<AxiosResponse<EmployeeDto>> =>
+    axiosInstance.post(`/employees`, payload, {
+      headers: withHeaders(),
+    }),
+
+  updateEmployee: (
+    id: string,
+    payload: UpdateEmployeePayload
+  ): Promise<AxiosResponse<EmployeeDto>> =>
+    axiosInstance.put(`/employees/${id}`, payload, {
+      headers: withHeaders(),
+    }),
+
+  deleteEmployee: (id: string): Promise<AxiosResponse<void>> =>
+    axiosInstance.delete(`/employees/${id}`, {
+      headers: withHeaders(),
+    }),
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/services/api/headerFooterService.ts b/apps/edr-freight-web/backoffice/src/user-management/services/api/headerFooterService.ts
new file mode 100644
index 000000000..7b1b69556
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/services/api/headerFooterService.ts
@@ -0,0 +1,223 @@
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import axiosInstance from "@/shared/services/axiosInstance";
+import { AxiosResponse } from "axios";
+import { uploadAndCreateResource } from "@/shared/services/unifiedUploadService";
+import { position } from "html2canvas/dist/types/css/property-descriptors/position";
+
+export interface HeaderFooterFileInfo {
+  fileName: string;
+  contentType: string;
+  size: number;
+  originalname: string;
+}
+
+export interface HeaderFooterName {
+  am: string;
+  en: string;
+}
+
+export interface CreateHeaderFooterPayload {
+  fileInfo: HeaderFooterFileInfo;
+  name: HeaderFooterName;
+  unitId: string;
+}
+
+export interface HeaderFooterDto {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  fileInfo: HeaderFooterFileInfo;
+  uploadedSuccessfully: boolean;
+  isCurrent: boolean;
+  name: HeaderFooterName;
+  unitId: string;
+  presigned?: string;
+}
+
+export interface HeaderFooterResponseDto extends HeaderFooterDto {
+  type: "header" | "footer";
+  id: string;
+}
+
+export interface HeaderFooterListResponse {
+  items: HeaderFooterResponseDto[];
+  count: number;
+}
+
+export interface HeaderFooterHeaders {
+  tenantKey: string;
+  unitId?: string;
+}
+
+export interface HeaderFooterStatusUpdatePayload {
+  id: string;
+  parentId: string;
+  uploadedSuccessfully: true;
+}
+
+export interface HeaderFooterChangeStatusPayload {
+  isCurrent: boolean;
+}
+
+export const headerFooterService = {
+  // ======= UPLOAD METHODS =======
+  uploadAndCreateHeader: (
+    file: File,
+    fileName: string,
+    unitId: string,
+    positionId?: string[],
+    recordTypeKey?: string | null,
+  ) =>
+    uploadAndCreateResource(
+      {
+        type: "header",
+        file,
+        name: { am: fileName, en: fileName },
+        parentId: unitId,
+      },
+      axiosInstance,
+      positionId,
+      recordTypeKey,
+    ),
+
+  uploadAndCreateFooter: (
+    file: File,
+    fileName: string,
+    unitId: string,
+    positionId?: string[],
+    recordTypeKey?: string | null,
+  ) =>
+    uploadAndCreateResource(
+      {
+        type: "footer",
+        file,
+        name: { am: fileName, en: fileName },
+        parentId: unitId,
+      },
+      axiosInstance,
+      positionId,
+      recordTypeKey,
+    ),
+
+  // ======= HEADERS =======
+  createHeader: async (
+    payload: CreateHeaderFooterPayload,
+  ): Promise<AxiosResponse<HeaderFooterResponseDto>> => {
+    return axiosInstance.post("/headers", payload, { headers: withHeaders() });
+  },
+
+  getHeaders: async (): Promise<AxiosResponse<HeaderFooterListResponse>> => {
+    return axiosInstance.get("/headers", { headers: withHeaders() });
+  },
+
+  getHeadersByUnitId: async (
+    unitId: string,
+    positionId?: string,
+    recordTypeKey?: string,
+  ): Promise<AxiosResponse<HeaderFooterListResponse>> => {
+    return axiosInstance.get(
+      `/headers/list/${unitId}?take=100${positionId ? `&positionId=${positionId}` : ""}${recordTypeKey ? `&recordTypeKey=${recordTypeKey}` : ""}`,
+      {
+        headers: withHeaders(),
+      },
+    );
+  },
+
+  getHeaderById: async (
+    id: string,
+  ): Promise<AxiosResponse<HeaderFooterResponseDto>> => {
+    return axiosInstance.get(`/headers/${id}`, { headers: withHeaders() });
+  },
+
+  updateHeader: async (
+    id: string,
+    payload: Partial<CreateHeaderFooterPayload>,
+  ): Promise<AxiosResponse<HeaderFooterResponseDto>> => {
+    return axiosInstance.put(`/headers/${id}`, payload, {
+      headers: withHeaders(),
+    });
+  },
+
+  deleteHeader: async (id: string): Promise<AxiosResponse<void>> => {
+    return axiosInstance.delete(`/headers/${id}`, { headers: withHeaders() });
+  },
+
+  updateHeaderUploadStatus: async (
+    id: string,
+    payload: HeaderFooterStatusUpdatePayload,
+  ): Promise<AxiosResponse<HeaderFooterResponseDto>> => {
+    return axiosInstance.patch(`/headers/${id}/upload-status`, payload, {
+      headers: withHeaders(),
+    });
+  },
+
+  changeHeaderStatus: async (
+    id: string,
+    payload: HeaderFooterChangeStatusPayload,
+  ): Promise<AxiosResponse<HeaderFooterResponseDto>> => {
+    return axiosInstance.put(`/headers/change-status/${id}`, payload, {
+      headers: withHeaders(),
+    });
+  },
+
+  // ======= FOOTERS =======
+  createFooter: async (
+    payload: CreateHeaderFooterPayload,
+  ): Promise<AxiosResponse<HeaderFooterResponseDto>> => {
+    return axiosInstance.post("/footers", payload, { headers: withHeaders() });
+  },
+
+  getFooters: async (): Promise<AxiosResponse<HeaderFooterListResponse>> => {
+    return axiosInstance.get("/footers", { headers: withHeaders() });
+  },
+
+  getFootersByUnitId: async (
+    unitId: string,
+    positionId?: string,
+    recordTypeKey?: string,
+  ): Promise<AxiosResponse<HeaderFooterListResponse>> => {
+    return axiosInstance.get(
+      `/footers/list/${unitId}?take=300${positionId ? `&positionId=${positionId}` : ""}${recordTypeKey ? `&recordTypeKey=${recordTypeKey}` : ""}`,
+      {
+        headers: withHeaders(),
+      },
+    );
+  },
+
+  getFooterById: async (
+    id: string,
+  ): Promise<AxiosResponse<HeaderFooterResponseDto>> => {
+    return axiosInstance.get(`/footers/${id}`, { headers: withHeaders() });
+  },
+
+  updateFooter: async (
+    id: string,
+    payload: Partial<CreateHeaderFooterPayload>,
+  ): Promise<AxiosResponse<HeaderFooterResponseDto>> => {
+    return axiosInstance.put(`/footers/${id}`, payload, {
+      headers: withHeaders(),
+    });
+  },
+
+  deleteFooter: async (id: string): Promise<AxiosResponse<void>> => {
+    return axiosInstance.delete(`/footers/${id}`, { headers: withHeaders() });
+  },
+
+  updateFooterUploadStatus: async (
+    id: string,
+    payload: HeaderFooterStatusUpdatePayload,
+  ): Promise<AxiosResponse<HeaderFooterResponseDto>> => {
+    return axiosInstance.patch(`/footers/${id}/upload-status`, payload, {
+      headers: withHeaders(),
+    });
+  },
+
+  changeFooterStatus: async (
+    id: string,
+    payload: HeaderFooterChangeStatusPayload,
+  ): Promise<AxiosResponse<HeaderFooterResponseDto>> => {
+    return axiosInstance.put(`/footers/change-status/${id}`, payload, {
+      headers: withHeaders(),
+    });
+  },
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/services/api/letterTemplateService.ts b/apps/edr-freight-web/backoffice/src/user-management/services/api/letterTemplateService.ts
new file mode 100644
index 000000000..de3c7c461
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/services/api/letterTemplateService.ts
@@ -0,0 +1,85 @@
+import { AxiosResponse } from "axios";
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import { take } from "lodash";
+import { externalParam } from "@/external-portal/services/portalOutgoingService";
+
+// --- Payloads ---
+export interface LetterTemplatePayload {
+  sincerelyText: string;
+  body: string;
+  subject: string;
+  key: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  unitId: string;
+  headerId?: string;
+  footerId?: string;
+}
+
+export interface LetterTemplate extends LetterTemplatePayload {
+  id: string;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+// --- Headers ---
+export interface LetterTemplateHeaders {
+  delegatorPositionId: string;
+  currentProjectId: string;
+}
+
+export interface LetterTemplatesResponse {
+  count: number;
+  items: LetterTemplate[];
+}
+
+// --- GET: All templates under a unit ---
+export const getTemplatesByUnitId = async (
+  unitId: string,
+  params: externalParam,
+): Promise<AxiosResponse<LetterTemplatesResponse>> => {
+  return recordAxiosInstance.get(`/record-templates/list/${unitId}`, {
+    headers: withHeaders(),
+    params,
+  });
+};
+
+// --- GET: Template by ID ---
+export const getTemplateById = async (
+  id: string,
+): Promise<AxiosResponse<LetterTemplate>> => {
+  return recordAxiosInstance.get(`/record-templates/${id}`, {
+    headers: withHeaders(),
+  });
+};
+
+// --- POST: Create new template ---
+export const createTemplate = async (
+  data: LetterTemplatePayload,
+): Promise<AxiosResponse<LetterTemplate>> => {
+  return recordAxiosInstance.post(`/record-templates`, data, {
+    headers: withHeaders(),
+  });
+};
+
+// --- PUT: Update template ---
+export const updateTemplate = async (
+  id: string,
+  data: LetterTemplatePayload,
+): Promise<AxiosResponse<LetterTemplate>> => {
+  return recordAxiosInstance.put(`/record-templates/${id}`, data, {
+    headers: withHeaders(),
+  });
+};
+
+// --- DELETE: Template by ID ---
+export const deleteTemplate = async (
+  id: string,
+): Promise<AxiosResponse<void>> => {
+  return recordAxiosInstance.delete(`/record-templates/${id}`, {
+    headers: withHeaders(),
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/services/api/listBulletResources.ts b/apps/edr-freight-web/backoffice/src/user-management/services/api/listBulletResources.ts
new file mode 100644
index 000000000..8ccf0cd58
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/services/api/listBulletResources.ts
@@ -0,0 +1,39 @@
+import { TemplateService } from "./templateService";
+import {
+  isFontResourceType,
+  isListBulletResourceType,
+  ListBulletResource,
+} from "@/user-management/TemplateSample/utils/templateResourceConstants";
+
+export const LIST_BULLET_RESOURCES_QUERY_KEY = [
+  "listBulletResources",
+] as const;
+
+export async function fetchListBulletResources(): Promise<ListBulletResource[]> {
+  const typesResponse = await TemplateService.getResourceTypes();
+  const types = typesResponse.items || [];
+
+  let bulletTypes = types.filter((type) => isListBulletResourceType(type));
+  if (bulletTypes.length === 0) {
+    bulletTypes = types.filter((type) => !isFontResourceType(type));
+  }
+
+  const grouped = await Promise.all(
+    bulletTypes.map(async (type) => {
+      const response = await TemplateService.getTemplates({
+        resourceTypeId: type.id,
+      });
+      return (response.items || [])
+        .filter((item) => item.id && Boolean(item.presigned))
+        .map((item) => ({
+          id: item.id,
+          name: item.name,
+          presigned: item.presigned as string,
+          resourceTypeId: type.id,
+          fileInfo: item.fileInfo as ListBulletResource["fileInfo"],
+        }));
+    }),
+  );
+
+  return grouped.flat();
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/services/api/permissionService.ts b/apps/edr-freight-web/backoffice/src/user-management/services/api/permissionService.ts
new file mode 100644
index 000000000..5a2f66e14
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/services/api/permissionService.ts
@@ -0,0 +1,46 @@
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import axiosInstance from "@/shared/services/axiosInstance";
+import {
+  PermissionDto,
+  PermissionListResponse,
+} from "@/user-management/dto/permissions/permissonDto";
+
+import { AxiosResponse } from "axios";
+import { PositionQueryParams } from "./positionService";
+
+export interface CreatePermissionDto {
+  key: string;
+  name: string;
+  description?: string;
+}
+
+export interface PermissionQueryParams extends PositionQueryParams {
+  search?: string;
+  name?: string;
+  key?: string;
+  applicationId?: string;
+}
+
+export const permissionService = {
+  getAll: (
+    params?: PermissionQueryParams,
+  ): Promise<AxiosResponse<PermissionListResponse>> =>
+    axiosInstance.get("/permissions", { headers: withHeaders(), params }),
+
+  getById: (id: string): Promise<AxiosResponse<PermissionDto>> =>
+    axiosInstance.get(`/permissions/${id}`, { headers: withHeaders() }),
+
+  create: (data: CreatePermissionDto): Promise<AxiosResponse<PermissionDto>> =>
+    axiosInstance.post("/permissions", data, { headers: withHeaders() }),
+
+  update: (
+    id: string,
+    data: CreatePermissionDto,
+  ): Promise<AxiosResponse<PermissionDto>> =>
+    axiosInstance.put(`/permissions/${id}`, data, {
+      headers: withHeaders(),
+    }),
+
+  delete: (id: string): Promise<AxiosResponse<void>> =>
+    axiosInstance.delete(`/permissions/${id}`, { headers: withHeaders() }),
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/services/api/positionService.ts b/apps/edr-freight-web/backoffice/src/user-management/services/api/positionService.ts
new file mode 100644
index 000000000..9e7e4c1d4
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/services/api/positionService.ts
@@ -0,0 +1,165 @@
+import { OrganizationsPositions } from "@/record-management/services/api/departmentService";
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import axiosInstance from "@/shared/services/axiosInstance";
+import { AxiosResponse } from "axios";
+
+export interface PositionHeaders {
+  tenantKey: string;
+  unitId?: string;
+}
+export interface MovePostionPayload {
+  positionId: string;
+  newParentId: string;
+}
+export interface PositionPayload {
+  name: {
+    am: string;
+    en: string;
+  };
+  key: string;
+  unitId: string;
+  organizationId: string;
+  parentPositionId?: string;
+  projectId?: string;
+  positionTypeId: string;
+}
+export interface PositionQueryParams {
+  orderBy?: string;
+  take?: number;
+  skip?: number;
+  order?: string;
+}
+
+export const getPositions = async (
+  params?: PositionQueryParams,
+): Promise<AxiosResponse> => {
+  return axiosInstance.get("/positions", {
+    ...{ headers: withHeaders() },
+    params,
+  });
+};
+
+export const getPositionById = async (
+  id: string | number,
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/positions/${id}`, { headers: withHeaders() });
+};
+
+export const getPositionHierarchy = async (
+  id: string | number,
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/positions/hierarchy/${id}`, {
+    headers: withHeaders(),
+  });
+};
+
+// Returns the direct children of a position: { count, items: PositionDto[] }
+// where each item has parentPositionId === id.
+export const getChildPositions = async (
+  id: string | number,
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/positions/children/${id}`, {
+    headers: withHeaders(),
+  });
+};
+
+export const getPositionList = async (
+  id: string | number,
+  params: PositionQueryParams,
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/positions/list/${id}`, {
+    headers: withHeaders(),
+    params,
+  });
+};
+export const fetchPositionsByTypeAndUnit = async (
+  positionTypeKey: string,
+  unitId: string,
+): Promise<OrganizationsPositions[]> => {
+  const { data } = await axiosInstance.get(
+    `/positions/list/position-type/${positionTypeKey}/unitId/${unitId}`,
+    { headers: withHeaders() },
+  );
+
+  return Array.isArray(data) ? data : (data?.items ?? []);
+};
+
+export const fetchPositionsByRankAndUnit = async (
+  unitId: string,
+  rank: number,
+): Promise<OrganizationsPositions[]> => {
+  const { data } = await axiosInstance.get(
+    `/positions/list/${unitId}/rank/${rank}`,
+    {
+      headers: withHeaders(),
+    },
+  );
+
+  if (Array.isArray(data)) return data;
+  if (Array.isArray(data?.items)) return data.items;
+  if (Array.isArray(data?.data)) return data.data;
+  return data?.data?.items ?? [];
+};
+
+export const getEmployeesUnderPosition = async (
+  positionId: string | number,
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/positions/current/${positionId}/employees`, {
+    headers: withHeaders(),
+  });
+};
+
+export const createPosition = async (
+  data: PositionPayload,
+): Promise<AxiosResponse> => {
+  return axiosInstance.post("/positions", data, { headers: withHeaders() });
+};
+
+export const updatePosition = async (
+  id: string | number,
+  data: PositionPayload,
+): Promise<AxiosResponse> => {
+  return axiosInstance.put(`/positions/${id}`, data, {
+    headers: withHeaders(),
+  });
+};
+
+export const movePosition = async (
+  data: MovePostionPayload,
+): Promise<AxiosResponse> => {
+  return axiosInstance.patch(`/positions/change-parent`, data, {
+    headers: withHeaders(),
+  });
+};
+
+export const deletePosition = async (
+  id: string | number,
+): Promise<AxiosResponse> => {
+  return axiosInstance.delete(`/positions/${id}`, { headers: withHeaders() });
+};
+
+export const softDeletePosition = async (
+  id: string | number,
+): Promise<AxiosResponse> => {
+  return axiosInstance.delete(`/positions/${id}/soft`, {
+    headers: withHeaders(),
+  });
+};
+
+export const getArchivedPositions = async (
+  parentId: string | number,
+  params?: PositionQueryParams,
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/positions/archived/${parentId}`, {
+    headers: withHeaders(),
+    params,
+  });
+};
+
+export const restorePosition = async (
+  id: string | number,
+): Promise<AxiosResponse> => {
+  return axiosInstance.patch(`/positions/${id}/restore`, null, {
+    headers: withHeaders(),
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/services/api/positionTypeConfigurationService.ts b/apps/edr-freight-web/backoffice/src/user-management/services/api/positionTypeConfigurationService.ts
new file mode 100644
index 000000000..4da8ea0b5
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/services/api/positionTypeConfigurationService.ts
@@ -0,0 +1,88 @@
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import axiosInstance from "@/shared/services/axiosInstance";
+import { AxiosResponse } from "axios";
+export interface positiontypeItems {
+  id: string;
+  unitId: string;
+  positionTypeId: string;
+  canReceiveRecord: boolean;
+  canCreateBankRecord?: boolean;
+  timeframe: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface PositionTypeConfigurationDto {
+  id: string;
+  unitId: string;
+  positionTypeId: string;
+  canReceiveRecord: boolean;
+  canCreateBankRecord?: boolean;
+  timeframe: string;
+  createdAt: string;
+  updatedAt: string;
+  organizationId?: string;
+  canAssignRecord?: boolean;
+}
+
+export interface PositionTypeConfigurationListResponse {
+  count: number;
+  items: PositionTypeConfigurationDto[];
+}
+
+export interface CreatePositionTypeConfigurationPayload {
+  positionTypeId: string;
+  timeframe: string;
+  organizationId: string;
+  unitId?: string;
+  canReceiveRecord?: boolean;
+  canCreateBankRecord?: boolean;
+  canAssignRecord?: boolean;
+}
+
+export interface UpdatePositionTypeConfigurationPayload {
+  unitId?: string;
+  positionTypeId?: string;
+  timeframe?: string;
+  organizationId?: string;
+  canReceiveRecord?: boolean;
+  canCreateBankRecord?: boolean;
+  canAssignRecord?: boolean;
+}
+
+// GET: List by unitId
+export const getPositionTypeConfigurationsByUnitId = async (
+  unitId: string,
+): Promise<AxiosResponse<PositionTypeConfigurationListResponse>> => {
+  return axiosInstance.get(`/position-type-configurations/list/${unitId}`, {
+    headers: withHeaders(),
+  });
+};
+
+// GET: Single by id
+export const getPositionTypeConfigurationById = async (
+  id: string,
+): Promise<AxiosResponse<PositionTypeConfigurationDto>> => {
+  return axiosInstance.get(`/position-type-configurations/${id}`, {
+    headers: withHeaders(),
+  });
+};
+
+// POST: Create
+export const createPositionTypeConfiguration = async (
+  payload: CreatePositionTypeConfigurationPayload,
+): Promise<AxiosResponse<PositionTypeConfigurationDto>> => {
+  return axiosInstance.post(`/position-type-configurations`, payload, {
+    headers: withHeaders(),
+  });
+};
+
+// PUT: Update by id
+export const updatePositionTypeConfiguration = async (
+  id: string,
+  payload: UpdatePositionTypeConfigurationPayload,
+): Promise<AxiosResponse<PositionTypeConfigurationDto>> => {
+  return axiosInstance.put(`/position-type-configurations/${id}`, payload, {
+    headers: withHeaders(),
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/services/api/positionTypePermissionService.ts b/apps/edr-freight-web/backoffice/src/user-management/services/api/positionTypePermissionService.ts
new file mode 100644
index 000000000..5dda7d3b3
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/services/api/positionTypePermissionService.ts
@@ -0,0 +1,42 @@
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import axiosInstance from "@/shared/services/axiosInstance";
+import { PermissionListResponse } from "@/user-management/dto/permissions/permissonDto";
+import { AxiosResponse } from "axios";
+
+interface AssignPayload {
+  firstId: string;
+  secondIds: string[];
+}
+
+export const positionTypePermissionService = {
+  // POST /assign-seconds-for-first
+  assignPermissionsToPositionType: (
+    payload: AssignPayload
+  ): Promise<AxiosResponse<void>> =>
+    axiosInstance.post(
+      "/position-type-permissions/assign-seconds-for-first",
+      payload,
+      {
+        headers: withHeaders(),
+      }
+    ),
+
+  // GET /given-first/{id}
+  getPermissionsByPositionTypeId: (
+    positionTypeId: string
+  ): Promise<AxiosResponse<PermissionListResponse>> =>
+    axiosInstance.get(
+      `/position-type-permissions/given-first/${positionTypeId}`,
+      {
+        headers: withHeaders(),
+      }
+    ),
+
+  // DELETE /position-type-permissions/{id}
+  deletePermissionRelation: (
+    relationId: string
+  ): Promise<AxiosResponse<void>> =>
+    axiosInstance.delete(`/position-type-permissions/${relationId}`, {
+      headers: withHeaders(),
+    }),
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/services/api/positionTypesService.ts b/apps/edr-freight-web/backoffice/src/user-management/services/api/positionTypesService.ts
new file mode 100644
index 000000000..b3ac43ecd
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/services/api/positionTypesService.ts
@@ -0,0 +1,105 @@
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import axiosInstance from "@/shared/services/axiosInstance";
+import {
+  PositionTypeDto,
+  PositionTypesListResponse,
+} from "@/user-management/dto/positions/positionType";
+import { AxiosResponse } from "axios";
+
+export interface PositionTypesHeaders {
+  delegatorPositionId: string;
+  currentProjectId: string;
+}
+export interface PositionRequest {
+  positionIds: string[];
+}
+
+export interface CreatePositionTypePayload {
+  name: {
+    am: string;
+    en: string;
+  };
+  key: string;
+  unitId: string;
+}
+export interface Params {
+  take?: number;
+  skip?: number;
+  orderBy?: string;
+  order?: string;
+}
+
+export interface UpdatePositionTypePayload extends Partial<CreatePositionTypePayload> {}
+
+export const positionTypeService = {
+  getAll: (
+    params?: Record<string, any>,
+  ): Promise<AxiosResponse<PositionTypesListResponse>> =>
+    axiosInstance.get(`/position-types`, { headers: withHeaders(), params }),
+
+  getById: (id: string): Promise<AxiosResponse<PositionTypeDto>> =>
+    axiosInstance.get(`/position-types/${id}`, { headers: withHeaders() }),
+
+  getByUnitId: (
+    id: string,
+    params?: Params,
+  ): Promise<AxiosResponse<PositionTypesListResponse>> =>
+    axiosInstance.get(`/position-types/list/${id}`, {
+      headers: withHeaders(),
+      params,
+    }),
+
+  getByOrganizationId: (
+    id: string,
+    params?: Params,
+  ): Promise<AxiosResponse<PositionTypesListResponse>> =>
+    axiosInstance.get(`/position-types/list/${id}`, {
+      headers: withHeaders(),
+      params,
+    }),
+
+  getCommonTypesByOrganizationId: (
+    id: string,
+    params?: Params,
+  ): Promise<AxiosResponse<PositionTypesListResponse>> =>
+    axiosInstance.get(`/position-types/list-with-commons/${id}`, {
+      headers: withHeaders(),
+      params,
+    }),
+
+  getCommonTypesById: (
+    id: string,
+    params: Params,
+  ): Promise<AxiosResponse<PositionTypesListResponse>> =>
+    axiosInstance.get(`/position-types/list-with-commons/${id}`, {
+      headers: withHeaders(),
+      params,
+    }),
+
+  create: (
+    payload: CreatePositionTypePayload,
+  ): Promise<AxiosResponse<PositionTypeDto>> =>
+    axiosInstance.post(`/position-types`, payload, { headers: withHeaders() }),
+
+  update: (
+    id: string,
+    payload: UpdatePositionTypePayload,
+  ): Promise<AxiosResponse<PositionTypeDto>> =>
+    axiosInstance.put(`/position-types/${id}`, payload, {
+      headers: withHeaders(),
+    }),
+  updateFromto: (toId: string, fromId: string): Promise<AxiosResponse> =>
+    axiosInstance.patch(
+      `/position-types/${toId}/migrate-position-from/${fromId}`,
+    ),
+  updateByPostion: (
+    id: string,
+    data: PositionRequest,
+  ): Promise<AxiosResponse> =>
+    axiosInstance.patch(
+      `/position-types/${id}/migrate-position-by-position`,
+      data,
+    ),
+  delete: (id: string): Promise<AxiosResponse<void>> =>
+    axiosInstance.delete(`/position-types/${id}`, { headers: withHeaders() }),
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/services/api/prefixSuffixService.ts b/apps/edr-freight-web/backoffice/src/user-management/services/api/prefixSuffixService.ts
new file mode 100644
index 000000000..c35625b95
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/services/api/prefixSuffixService.ts
@@ -0,0 +1,393 @@
+import axiosInstance from "@/shared/services/axiosInstance";
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+import { RemarkParams } from "@/super-admin/hooks/useRemark";
+import { AxiosResponse } from "axios";
+export interface PrefixSuffixName {
+  am: string;
+  en: string;
+}
+
+export interface CreatePrefixPayload {
+  name: PrefixSuffixName;
+  unitId: string;
+  positionId?: string;
+  isForCC: boolean;
+  recordTypeKey?: string | null;
+  recordTagId?: string;
+  count?: number; // Only used for prefixes, ignored for suffixes
+}
+
+export interface CreateSuffixPayload {
+  name: PrefixSuffixName;
+  unitId: string;
+  isForCC: boolean;
+  recordTypeKey: string;
+}
+export interface InternalPrefixSuffixName {
+  am: string;
+  en: string;
+}
+
+export enum EEscalationNotificationType {
+  JUMP = "JUMP",
+  NOTIFY_STEP = "NOTIFY_STEP",
+  NOTIFY_PARENT_STEP = "NOTIFY_PARENT_STEP",
+}
+
+export enum EEscalationNotificationChannel {
+  ALL = "ALL",
+  EMAIL = "EMAIL",
+  IN_APP = "IN_APP",
+  SMS = "SMS",
+}
+
+export enum ERecordSenderInformationScope {
+  NAME = "NAME",
+  NAME_AND_SIGNATURE = "NAME_AND_SIGNATURE",
+  NAME_AND_STAMP = "NAME_AND_STAMP",
+  SIGNATURE_AND_STAMP = "SIGNATURE_AND_STAMP",
+  SIGNATURE = "SIGNATURE",
+  STAMP = "STAMP",
+  ALL = "ALL",
+}
+
+export interface UnitConfigurationPayload {
+  isMultipleDelegationAllowed?: boolean;
+  waitAllCollaboratorsBeforeAction?: boolean;
+  forwardWithTeeterSignature?: boolean;
+  shouldCollaboratorAlwaysSign?: boolean;
+  shouldIncludeForYourReferenceInCC?: boolean;
+  canCollaborationBeCreatedForAll?: boolean;
+  canCreateDirectRecord?: boolean;
+  canCreateBankRelatedRecords?: boolean;
+  isApprovalRequiredForPositionChange?: boolean;
+  canPositionBasedRecordsBeCreated?: boolean;
+  canPositionBasedReferenceBeUsedForAllTypes?: boolean;
+  shouldDirectRecordHaveHeaderAndFooter?: boolean;
+  canAssignCustomReferenceNumber?: boolean;
+  canInternalMemosHaveSenderInformation?: boolean;
+  // Complaint receiving eligibility for the unit.
+  canReceiveComplaint?: boolean;
+  recordSenderInformationScope: ERecordSenderInformationScope;
+  canRecordDateLabelHasLocalization?: boolean;
+  canRecordDateHaveTime?: boolean;
+  canInternalMemoRequirePositionBasedReferenceNumber?: boolean;
+  internalSuffix?: InternalPrefixSuffixName;
+  internalPrefix?: InternalPrefixSuffixName;
+  internalSuffixCC?: InternalPrefixSuffixName;
+  internalPrefixCC?: InternalPrefixSuffixName;
+  referenceNumberPrefix?: string;
+  externalReferenceNumberPrefix?: string;
+  internalMemoReferenceNumberPrefix?: string;
+  positionScopeToFetch?: string;
+  escalationHour?: number;
+  urgentLetterEscalationHour?: number;
+  onReviewLetterEscalationHour?: number;
+  urgentOnReviewLetterEscalationHour?: number;
+  escalationNotificationType?: EEscalationNotificationType;
+  escalationNotificationChannel?: EEscalationNotificationChannel;
+  unitId: string;
+  attachSignatureOnAttachment?: boolean;
+  canHaveTagBasedReferenceNumber?: boolean;
+  referenceNumberCountFirst?: boolean;
+  canUserSkipLevel?: boolean;
+  canROReturn?: boolean;
+  canRecordBeEditedByCollaborators?: boolean;
+  canRecordHaveCollaboratorsName?: boolean;
+  allowEditOnCollaboration?: boolean;
+  canRecordBeEditedOnWorkflow?: boolean;
+  canIncomingAssignmentsBeSeparated?: boolean;
+  internalMemoHasReferenceNumber?: boolean;
+  canSendToBranch?: boolean;
+}
+
+export interface UnitConfigurationItem extends UnitConfigurationPayload {
+  canSendToBranch: boolean;
+  id: string;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export interface UnitConfigurationListResponse {
+  items: UnitConfigurationItem[];
+  count?: number;
+}
+
+export interface RemarkPayload {
+  unitId: string;
+  remark: string;
+  description?: string;
+}
+
+export interface ExternalReferenceNumberPrefixDTO {
+  externalReferenceNumberPrefix: string;
+}
+export interface InternalMemoReferenceNumberPrefixDTO {
+  internalMemoReferenceNumberPrefix: string;
+}
+
+export interface PrefixSuffixDto {
+  id: string;
+  name: PrefixSuffixName;
+  createdAt: string;
+  updatedAt: string;
+  recordTypeKey: string;
+  isForCC?: boolean;
+  positionId?: string;
+  recordSequences?: {
+    createdAt: string;
+    updatedAt: string;
+    id: string;
+    count: number;
+    year: number;
+    unitId: string;
+    recordPrefixId: string;
+    recordSequenceType: string;
+  }[];
+}
+
+export interface PrefixSuffixListResponseDto {
+  items: PrefixSuffixDto[];
+  count: number;
+}
+
+export interface PrefixRefPayloadDto {
+  referenceNumberPrefix: string;
+}
+export interface UnitDto {
+  createdAt: string; // ISO date string
+  updatedAt: string; // ISO date string
+  id: string; // UUID
+  name: {
+    am: string; // Amharic name
+    en: string; // English name
+  };
+  key: string; // Unique identifier/key
+  referenceNumberPrefix: string; // Prefix for reference numbers
+  organizationId: string; // UUID of the parent organization
+  parentUnitId: string | null; // UUID of parent unit or null if root unit
+}
+
+export const prefixSuffixService = {
+  createPrefix: async (
+    payload: CreatePrefixPayload,
+  ): Promise<AxiosResponse> => {
+    return recordAxiosInstance.post("/record-prefixes", payload);
+  },
+
+  updateCount: async (
+    sequenceId: string,
+    count: number,
+  ): Promise<AxiosResponse<PrefixSuffixListResponseDto>> => {
+    return recordAxiosInstance.put(`/record-sequences/${sequenceId}`, {
+      count,
+    });
+  },
+  getPrefix: async (
+    unitId: string,
+    recordTypeKey: string,
+    skip: number = 0,
+    take: number = 10,
+  ): Promise<AxiosResponse<PrefixSuffixListResponseDto>> => {
+    return recordAxiosInstance.get(
+      `/record-prefixes/list/${unitId}/${recordTypeKey}`,
+      {
+        params: {
+          skip,
+          take,
+          orderBy: "createdAt:DESC",
+        },
+      },
+    );
+  },
+  getPrefixByRecordTagId: async (
+    unitId: string,
+    recordTagId: string,
+    skip: number = 0,
+    take: number = 10,
+  ): Promise<AxiosResponse<PrefixSuffixListResponseDto>> => {
+    return recordAxiosInstance.get(
+      `/record-prefixes/list/${unitId}/by-tag/${recordTagId}`,
+      {
+        params: {
+          skip,
+          take,
+          orderBy: "createdAt:DESC",
+        },
+      },
+    );
+  },
+  getPrefixById: async (
+    id: string,
+  ): Promise<AxiosResponse<PrefixSuffixDto>> => {
+    return recordAxiosInstance.get(`/record-prefixes/list/${id}`);
+  },
+  getPrefixCC: async (
+    unitId: string,
+    recordTypeKey: string,
+    skip: number = 0,
+    take: number = 10,
+  ): Promise<AxiosResponse<PrefixSuffixListResponseDto>> => {
+    return recordAxiosInstance.get(
+      `/record-prefixes/list/cc/${unitId}/${recordTypeKey}`,
+      {
+        params: {
+          skip,
+          take,
+          orderBy: "createdAt:DESC",
+        },
+      },
+    );
+  },
+  deletePrefix: async (Id: string): Promise<AxiosResponse> => {
+    return recordAxiosInstance.delete(`/record-prefixes/${Id}`);
+  },
+  editPrefix: async (
+    id: string,
+    payload: CreatePrefixPayload,
+  ): Promise<AxiosResponse> => {
+    return recordAxiosInstance.put(`/record-prefixes/${id}`, payload);
+  },
+  createSuffix: async (
+    payload: CreateSuffixPayload,
+  ): Promise<AxiosResponse> => {
+    return recordAxiosInstance.post("/record-suffixes", payload);
+  },
+  getSuffix: async (
+    unitId: string,
+    recordTypeKey: string,
+    skip: number = 0,
+    take: number = 10,
+  ): Promise<AxiosResponse<PrefixSuffixListResponseDto>> => {
+    return recordAxiosInstance.get(
+      `/record-suffixes/list/${unitId}/${recordTypeKey}`,
+      {
+        params: {
+          skip,
+          take,
+          orderBy: "createdAt:DESC",
+        },
+      },
+    );
+  },
+  getPrefixByPosition: async (
+    unitId: string,
+    recordTypeKey: string,
+    skip: number = 0,
+    take: number = 10,
+  ): Promise<AxiosResponse<PrefixSuffixListResponseDto>> => {
+    return recordAxiosInstance.get(
+      `/record-prefixes/list/by-position/${unitId}/${recordTypeKey}`,
+      {
+        params: {
+          skip,
+          take,
+          orderBy: "createdAt:DESC",
+        },
+      },
+    );
+  },
+  getSuffixById: async (
+    id: string,
+  ): Promise<AxiosResponse<PrefixSuffixDto>> => {
+    return recordAxiosInstance.get(`/record-suffixes/list/${id}`);
+  },
+  getSuffixCC: async (
+    unitId: string,
+    recordTypeKey: string,
+    skip: number = 0,
+    take: number = 10,
+  ): Promise<AxiosResponse<PrefixSuffixListResponseDto>> => {
+    return recordAxiosInstance.get(
+      `/record-suffixes/list/cc/${unitId}/${recordTypeKey}`,
+      {
+        params: {
+          skip,
+          take,
+          orderBy: "createdAt:DESC",
+        },
+      },
+    );
+  },
+  deleteSuffix: async (Id: string): Promise<AxiosResponse> => {
+    return recordAxiosInstance.delete(`/record-suffixes/${Id}`);
+  },
+  editSuffix: async (
+    id: string,
+    payload: CreateSuffixPayload,
+  ): Promise<AxiosResponse> => {
+    return recordAxiosInstance.put(`/record-suffixes/${id}`, payload);
+  },
+  createRef: async (
+    payload: PrefixRefPayloadDto,
+    unitId: string,
+  ): Promise<AxiosResponse> => {
+    return axiosInstance.patch(
+      `/units/add-reference-number-prefix/${unitId}`,
+      payload,
+    );
+  },
+  deleteRef: async (Id: string): Promise<AxiosResponse> => {
+    return recordAxiosInstance.delete(`/record-suffixes/${Id}`);
+  },
+  getRef: async (Id: string): Promise<AxiosResponse> => {
+    return axiosInstance.get(`/units/${Id}`);
+  },
+  createInternalPrefixSuffix: async (
+    payload: Partial<UnitConfigurationPayload>,
+  ): Promise<AxiosResponse> => {
+    return axiosInstance.post(`/unit-configurations`, payload);
+  },
+  getInternalConfig: async (
+    unitId: string,
+  ): Promise<AxiosResponse<UnitConfigurationListResponse>> => {
+    return axiosInstance.get(`/unit-configurations/list/${unitId}`);
+  },
+  updateInternalPrefixSuffix: async (
+    payload: Partial<UnitConfigurationPayload>,
+    id: string,
+  ): Promise<AxiosResponse> => {
+    return axiosInstance.put(`/unit-configurations/${id}`, payload);
+  },
+  deleteInternalPrefixSuffix: async (id: string): Promise<AxiosResponse> => {
+    return axiosInstance.delete(`/unit-configurations/${id}`);
+  },
+  createRemark: async (payload: RemarkPayload): Promise<AxiosResponse> => {
+    return recordAxiosInstance.post(`/record-common-remarks`, payload);
+  },
+  getRemarkList: async (
+    unitId: string,
+    params: RemarkParams,
+  ): Promise<AxiosResponse> => {
+    return recordAxiosInstance.get(`/record-common-remarks/list/${unitId}/`, {
+      params,
+    });
+  },
+  editRemark: async (
+    id: string,
+    payload: RemarkPayload,
+  ): Promise<AxiosResponse> => {
+    return recordAxiosInstance.put(`/record-common-remarks/${id}`, payload);
+  },
+  deleteRemarks: async (id: string): Promise<AxiosResponse> => {
+    return recordAxiosInstance.delete(`/record-common-remarks/${id}`);
+  },
+  editExternalReferencePrefix: async (
+    id: string,
+    payload: ExternalReferenceNumberPrefixDTO,
+  ): Promise<AxiosResponse> => {
+    return axiosInstance.patch(
+      `/unit-configurations/add-external-reference-number-prefix/${id}`,
+      payload,
+    );
+  },
+  editInternalMemoReferencePrefix: async (
+    id: string,
+    payload: InternalMemoReferenceNumberPrefixDTO,
+  ): Promise<AxiosResponse> => {
+    return axiosInstance.patch(
+      `/unit-configurations/add-internal-memo-reference-number-prefix/${id}`,
+      payload,
+    );
+  },
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/services/api/recordTagsService.ts b/apps/edr-freight-web/backoffice/src/user-management/services/api/recordTagsService.ts
new file mode 100644
index 000000000..e166c4349
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/services/api/recordTagsService.ts
@@ -0,0 +1,47 @@
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+import {
+  CreateRecordTagPayload,
+  RecordTag,
+  RecordTagResponse,
+  UpdateRecordTagPayload,
+} from "@/user-management/dto/recordTags/recordTags.type";
+import { AxiosResponse } from "axios";
+
+export const recordTagService = {
+  getRecordTags: (id: string): Promise<AxiosResponse<RecordTag>> =>
+    recordAxiosInstance.get(`/record-tags/${id}`, {
+      headers: withHeaders(),
+    }),
+
+  getRecordTagsListWithUnitById: (
+    id: string,
+  ): Promise<AxiosResponse<RecordTagResponse>> =>
+    recordAxiosInstance.get(`/record-tags/list/${id}?take=1000`, {
+      headers: withHeaders(),
+    }),
+
+  createRecordTags: (
+    payload: CreateRecordTagPayload,
+  ): Promise<AxiosResponse<RecordTag>> =>
+    recordAxiosInstance.post(
+      `/record-tags`,
+      { ...payload, recordTypeKey: "external" },
+      {
+        headers: withHeaders(),
+      },
+    ),
+
+  updateEmployee: (
+    id: string,
+    payload: UpdateRecordTagPayload,
+  ): Promise<AxiosResponse<RecordTag>> =>
+    recordAxiosInstance.put(`/record-tags/${id}`, payload, {
+      headers: withHeaders(),
+    }),
+
+  deleteEmployee: (id: string): Promise<AxiosResponse<void>> =>
+    recordAxiosInstance.delete(`/record-tags/${id}`, {
+      headers: withHeaders(),
+    }),
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/services/api/sealService.ts b/apps/edr-freight-web/backoffice/src/user-management/services/api/sealService.ts
new file mode 100644
index 000000000..69fe90549
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/services/api/sealService.ts
@@ -0,0 +1,122 @@
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import axiosInstance from "@/shared/services/axiosInstance";
+import { AxiosResponse } from "axios";
+
+export interface SealFileInfo {
+  fileName: string;
+  contentType: string;
+  size: number;
+  originalname: string;
+}
+
+export interface SealName {
+  am: string;
+  en: string;
+}
+
+export interface CreateSealPayload {
+  fileInfo: SealFileInfo;
+  name: SealName;
+  unitId: string;
+}
+
+export interface SealDto {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  fileInfo: SealFileInfo;
+  uploadedSuccessfully: boolean;
+  isCurrent: boolean;
+  name: SealName;
+  unitId: string;
+  presigned?: string;
+}
+
+export interface SealResponseDto {
+  id: string;
+  unitId: string;
+  isCurrent: boolean;
+  uploadedSuccessfully: boolean;
+  createdAt: string;
+  updatedAt: string;
+  name: SealName;
+  fileInfo: SealFileInfo;
+  presigned: string;
+}
+
+export interface SealListResponse {
+  items: SealResponseDto[];
+  count: number;
+}
+
+export interface SealHeaders {
+  tenantKey: string;
+  unitId?: string;
+}
+
+export interface SealStatusUpdatePayload {
+  id: string;
+  parentId: string;
+  uploadedSuccessfully: true;
+}
+
+export interface SealChangeStatusPayload {
+  isCurrent: boolean;
+}
+
+export const sealService = {
+  createSeal: async (
+    payload: CreateSealPayload
+  ): Promise<AxiosResponse<SealResponseDto>> => {
+    return axiosInstance.post("/seals", payload, { headers: withHeaders() });
+  },
+
+  getSeals: async (): Promise<AxiosResponse<SealListResponse>> => {
+    return axiosInstance.get("/seals", { headers: withHeaders() });
+  },
+
+  getSeal: async (id: string): Promise<AxiosResponse<SealResponseDto>> => {
+    return axiosInstance.get(`/seals/${id}`, { headers: withHeaders() });
+  },
+
+  getSealListsByUnitId: async (
+    unitId: string
+  ): Promise<AxiosResponse<SealListResponse>> => {
+    return axiosInstance.get(`/seals/list/${unitId}`, {
+      headers: withHeaders(),
+    });
+  },
+
+  updateSeal: async (
+    id: string,
+    payload: Partial<CreateSealPayload>
+  ): Promise<AxiosResponse<SealResponseDto>> => {
+    return axiosInstance.put(`/seals/${id}`, payload, {
+      headers: withHeaders(),
+    });
+  },
+
+  deleteSeal: async (id: string): Promise<AxiosResponse<void>> => {
+    return axiosInstance.delete(`/seals/${id}`, { headers: withHeaders() });
+  },
+
+  changeSealStatus: async (
+    id: string,
+    payload: SealChangeStatusPayload
+  ): Promise<AxiosResponse<void>> => {
+    return axiosInstance.put(`/seals/change-status/${id}`, payload, {
+      headers: withHeaders(),
+    });
+  },
+
+  updateSealUploadStatus: async (
+    id: string,
+    updateStatusPayload: SealStatusUpdatePayload
+  ): Promise<AxiosResponse<SealResponseDto>> => {
+    return axiosInstance.patch(
+      `/seals/${id}/upload-status`,
+      updateStatusPayload,
+      { headers: withHeaders() }
+    );
+  },
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/services/api/templateApiUtils.ts b/apps/edr-freight-web/backoffice/src/user-management/services/api/templateApiUtils.ts
new file mode 100644
index 000000000..f7c61d429
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/services/api/templateApiUtils.ts
@@ -0,0 +1,62 @@
+import { AxiosError } from "axios";
+
+const TEMPLATE_TENANT_ID = "adf98293-41ba-4bda-bdb4-70e30a70c1b7";
+
+export function buildTemplateRequestHeaders(
+  unitId?: string,
+  extra?: Record<string, string>,
+): Record<string, string> {
+  const headers: Record<string, string> = {
+    "x-tenant-id": TEMPLATE_TENANT_ID,
+    ...extra,
+  };
+
+  if (unitId) {
+    headers["x-current-unit-id"] = unitId;
+  }
+
+  return headers;
+}
+
+export function parseRecordApiError(
+  error: unknown,
+  options?: { arrayBufferResponse?: boolean },
+): string {
+  const err = error as AxiosError;
+  if (!err?.response) {
+    return err instanceof Error ? err.message : "Request failed";
+  }
+
+  const data = err.response.data;
+
+  if (options?.arrayBufferResponse) {
+    if (data instanceof ArrayBuffer) {
+      try {
+        const text = new TextDecoder().decode(data);
+        const json = JSON.parse(text) as { message?: string | string[] };
+        if (Array.isArray(json.message)) return json.message.join(", ");
+        if (typeof json.message === "string") return json.message;
+        return text || "Request failed";
+      } catch {
+        return "Request failed";
+      }
+    }
+    if (typeof data === "string") {
+      try {
+        const json = JSON.parse(data) as { message?: string | string[] };
+        if (typeof json.message === "string") return json.message;
+        if (Array.isArray(json.message)) return json.message.join(", ");
+      } catch {
+        return data;
+      }
+    }
+  }
+
+  if (typeof data === "object" && data !== null && "message" in data) {
+    const message = (data as { message?: string | string[] }).message;
+    if (Array.isArray(message)) return message.join(", ");
+    if (typeof message === "string") return message;
+  }
+
+  return err.message || "Request failed";
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/services/api/templateService.ts b/apps/edr-freight-web/backoffice/src/user-management/services/api/templateService.ts
new file mode 100644
index 000000000..9a3152436
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/services/api/templateService.ts
@@ -0,0 +1,382 @@
+import recordAxiosInstance from "@/shared/services/recordAxiosInstance";
+import {
+  TemplateResource,
+  TemplateResponse,
+  ResourceTypeResponse,
+  CreateTemplatePayload,
+  TemplateSampleRequest,
+  TemplateSampleResponse,
+  TemplateSampleSetting,
+  TemplateSettingsByUnitResponse,
+  TemplateSettingValueBulkItem,
+  TemplateSettingValueHistoryResponse,
+} from "../TemplateConfiguration/types/templateTypes";
+import { XSSUploadValidator } from "@/shared/services/validation";
+import {
+  buildTemplateRequestHeaders,
+  parseRecordApiError,
+} from "./templateApiUtils";
+
+const tenantHeaders = buildTemplateRequestHeaders();
+
+const apiInstance = recordAxiosInstance;
+
+const normalizeTemplateItem = (
+  item: Record<string, unknown>,
+): TemplateResource => {
+  return {
+    ...item,
+    name: (item.name as Record<string, string>) || { am: "", en: "" },
+    description: (item.description as Record<string, string>) || {
+      am: "",
+      en: "",
+    },
+  } as TemplateResource;
+};
+
+export const TemplateService = {
+  async getResourceTypes(): Promise<ResourceTypeResponse> {
+    const response = await apiInstance.get("/resource_types", {
+      headers: tenantHeaders,
+    });
+    return response.data;
+  },
+
+  async getAllTemplates(
+    params?: Record<string, unknown>,
+  ): Promise<TemplateResponse> {
+    try {
+      const response = await apiInstance.get("/templates", {
+        params,
+        headers: tenantHeaders,
+      });
+      let items = (response.data.items || response.data || []).map(
+        normalizeTemplateItem,
+      );
+
+      // Client-side filtering by search
+      if (params?.search && typeof params.search === "string") {
+        const searchLower = params.search.toLowerCase();
+        items = items.filter(
+          (item: TemplateResource) =>
+            item.name?.en?.toLowerCase().includes(searchLower) ||
+            item.name?.am?.toLowerCase().includes(searchLower) ||
+            item.description?.en?.toLowerCase().includes(searchLower) ||
+            item.description?.am?.toLowerCase().includes(searchLower),
+        );
+      }
+
+      return {
+        count: items.length,
+        items,
+      };
+    } catch (error) {
+      console.error("Error fetching templates:", error);
+      return {
+        count: 0,
+        items: [],
+      };
+    }
+  },
+
+  async getTemplates(
+    params?: Record<string, unknown>,
+  ): Promise<TemplateResponse> {
+    const { resourceTypeId, search, ...otherParams } = params || {};
+
+    // resourceTypeId is required for the API endpoint
+    if (!resourceTypeId) {
+      return {
+        count: 0,
+        items: [],
+      };
+    }
+
+    const response = await apiInstance.get(
+      `/resources/list-with-presigned/${resourceTypeId}`,
+      { params: otherParams, headers: tenantHeaders },
+    );
+
+    let items = (response.data.items || []).map(normalizeTemplateItem);
+
+    // Client-side filtering by search
+    if (search && typeof search === "string") {
+      const searchLower = search.toLowerCase();
+      items = items.filter(
+        (item: TemplateResource) =>
+          item.name?.en?.toLowerCase().includes(searchLower) ||
+          item.name?.am?.toLowerCase().includes(searchLower) ||
+          item.description?.en?.toLowerCase().includes(searchLower) ||
+          item.description?.am?.toLowerCase().includes(searchLower),
+      );
+    }
+
+    return {
+      count: items.length,
+      items,
+    };
+  },
+
+  async getTemplate(id: string): Promise<TemplateResource> {
+    const response = await apiInstance.get(
+      `/resources/with-presigned?id=${id}`,
+      { headers: tenantHeaders },
+    );
+    return normalizeTemplateItem(response.data);
+  },
+
+  async getTemplateWithPresigned(
+    resourceTypeId: string,
+    templateId: string,
+  ): Promise<TemplateResource> {
+    try {
+      const response = await apiInstance.get(
+        `/resources/list-with-presigned/${resourceTypeId}`,
+        { headers: tenantHeaders },
+      );
+      const items = (response.data.items || []).map(normalizeTemplateItem);
+      const template = items.find(
+        (item: TemplateResource) => item.id === templateId,
+      );
+      if (!template) {
+        throw new Error("Template not found");
+      }
+      return template;
+    } catch (error: unknown) {
+      const axiosError = error as Record<string, unknown>;
+      // If the file hasn't been uploaded successfully, try to get basic template info
+      if ((axiosError.response as Record<string, unknown>)?.status === 400) {
+        try {
+          const response = await apiInstance.get(
+            `/resources/with-presigned?id=${templateId}`,
+            { headers: tenantHeaders },
+          );
+          return normalizeTemplateItem(response.data);
+        } catch {
+          throw error;
+        }
+      }
+      throw error;
+    }
+  },
+
+  async createTemplate(data: CreateTemplatePayload): Promise<TemplateResource> {
+    const response = await apiInstance.post("/resources", data, {
+      headers: tenantHeaders,
+    });
+    return normalizeTemplateItem(response.data);
+  },
+
+  async updateTemplate(
+    id: string,
+    data: Partial<CreateTemplatePayload>,
+  ): Promise<TemplateResource> {
+    const response = await apiInstance.put(`/resources/${id}`, data, {
+      headers: tenantHeaders,
+    });
+    return normalizeTemplateItem(response.data);
+  },
+
+  async deleteTemplate(id: string): Promise<void> {
+    await apiInstance.delete(`/resources/${id}`, { headers: tenantHeaders });
+  },
+
+  async uploadFile(file: File, uploadUrl?: string) {
+    if (!uploadUrl) {
+      console.warn("No upload URL provided, skipping file upload");
+      return null;
+    }
+
+    const validationResult = await XSSUploadValidator.validateFileForUpload(
+      file,
+      {
+        allowedMimeTypes: [
+          "image/png",
+          "image/jpeg",
+          "image/gif",
+          "image/webp",
+          "application/pdf",
+        ],
+        allowedExtensions: [".png", ".jpg", ".jpeg", ".gif", ".webp", ".pdf"],
+        maxSizeMB: 50,
+        uploadContext: "signature",
+      },
+    );
+
+    if (!validationResult.isValid) {
+      throw new Error(
+        validationResult.clientValidation.fileName?.error ||
+          validationResult.clientValidation.extension?.error ||
+          validationResult.clientValidation.mimeType?.error ||
+          validationResult.clientValidation.size?.error ||
+          "File validation failed",
+      );
+    }
+
+    const response = await fetch(uploadUrl, {
+      method: "PUT",
+      headers: {
+        "Content-Type": file.type,
+      },
+      body: file,
+    });
+
+    if (!response.ok) {
+      const text = await response.text();
+      throw new Error(
+        `Upload failed: ${response.status} ${response.statusText}\n${text}`,
+      );
+    }
+
+    return response;
+  },
+
+  async updateUploadStatus(
+    id: string,
+    uploadedSuccessfully: boolean,
+  ): Promise<void> {
+    await apiInstance.put(
+      `/resources/change-status/${id}`,
+      { isCurrent: uploadedSuccessfully },
+      { headers: tenantHeaders },
+    );
+  },
+
+  async generateSampleTemplate(
+    templateId: string,
+    payload: TemplateSampleRequest,
+    unitId?: string,
+  ): Promise<TemplateSampleResponse> {
+    try {
+      const response = await apiInstance.post(
+        `/templates/${templateId}/sample`,
+        payload,
+        {
+          responseType: "arraybuffer",
+          headers: buildTemplateRequestHeaders(unitId),
+        },
+      );
+
+      // Convert ArrayBuffer to base64 data URL
+      const blob = new Blob([response.data], { type: "application/pdf" });
+      const url = URL.createObjectURL(blob);
+
+      return {
+        pdf: url,
+        contentType: "application/pdf",
+      };
+    } catch (error) {
+      console.error("Error generating sample template:", error);
+      throw new Error(
+        parseRecordApiError(error, { arrayBufferResponse: true }),
+      );
+    }
+  },
+
+  async getTemplateSettingsByUnit(
+    templateId: string,
+    unitId?: string,
+  ): Promise<TemplateSettingsByUnitResponse> {
+    try {
+      const response = await apiInstance.get(
+        `/template-settings/by-unit/${templateId}`,
+        { headers: buildTemplateRequestHeaders(unitId) },
+      );
+      const responseData = response.data || {};
+      return {
+        count: responseData.count || 0,
+        items: responseData.items || [],
+        groups: responseData.groups || [],
+      };
+    } catch (error) {
+      console.error("Error fetching template settings by unit:", error);
+      return { count: 0, items: [], groups: [] };
+    }
+  },
+
+  async saveTemplateSettingValues(
+    values: Array<{
+      templateSettingId: string;
+      resourceId: string | null;
+      value: Record<string, string>;
+    }>,
+  ): Promise<void> {
+    try {
+      await Promise.all(
+        values.map((value) =>
+          apiInstance.post(`/template-setting-values`, value, {
+            headers: tenantHeaders,
+          }),
+        ),
+      );
+    } catch (error) {
+      console.error("Error saving template setting values:", error);
+      throw error;
+    }
+  },
+  async saveBulkTemplateSettingValues(
+    values: TemplateSettingValueBulkItem[],
+    unitId?: string,
+  ): Promise<void> {
+    try {
+      await apiInstance.post(`/template-setting-values/bulk`, values, {
+        headers: buildTemplateRequestHeaders(unitId),
+      });
+    } catch (error) {
+      console.error("Error saving template setting values:", error);
+      throw new Error(parseRecordApiError(error));
+    }
+  },
+
+  async revertUnitOverride(
+    templateSettingId: string,
+    unitId?: string,
+  ): Promise<void> {
+    try {
+      await apiInstance.delete(
+        `/template-setting-values/unit-override/${templateSettingId}`,
+        { headers: buildTemplateRequestHeaders(unitId) },
+      );
+    } catch (error) {
+      console.error("Error reverting template setting override:", error);
+      throw new Error(parseRecordApiError(error));
+    }
+  },
+
+  async getTemplateSettingValueHistory(
+    templateSettingId: string,
+    unitId?: string,
+  ): Promise<TemplateSettingValueHistoryResponse> {
+    try {
+      const response = await apiInstance.get(
+        `/template-setting-values/${templateSettingId}/history`,
+        { headers: buildTemplateRequestHeaders(unitId) },
+      );
+      const data = response.data ?? {};
+      return {
+        count: data.count ?? (Array.isArray(data.items) ? data.items.length : 0),
+        items: Array.isArray(data.items) ? data.items : [],
+      };
+    } catch (error) {
+      console.error("Error fetching template setting history:", error);
+      throw new Error(parseRecordApiError(error));
+    }
+  },
+
+  async restoreTemplateSettingFromHistory(
+    templateSettingId: string,
+    historyId: string,
+    unitId?: string,
+  ): Promise<void> {
+    try {
+      await apiInstance.post(
+        `/template-setting-values/${templateSettingId}/restore/${historyId}`,
+        {},
+        { headers: buildTemplateRequestHeaders(unitId) },
+      );
+    } catch (error) {
+      console.error("Error restoring template setting from history:", error);
+      throw new Error(parseRecordApiError(error));
+    }
+  },
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/services/api/unitService.ts b/apps/edr-freight-web/backoffice/src/user-management/services/api/unitService.ts
new file mode 100644
index 000000000..cd926076b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/services/api/unitService.ts
@@ -0,0 +1,137 @@
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import axiosInstance from "@/shared/services/axiosInstance";
+import { AxiosResponse } from "axios";
+
+// --- Types ---
+export interface UnitHeaders {
+  delegatorPositionId: string;
+  currentProjectId?: string;
+}
+
+export interface UnitPayload {
+  name: {
+    am: string;
+    en: string;
+  };
+  key: string;
+  organizationId?: string;
+  parentUnitId?: string;
+}
+
+export interface UnitQueryParams {
+  orderBy?: string;
+  take?: number;
+  skip?: number;
+  order?: string;
+}
+
+// --- API Methods ---
+
+export const getUnitById = async (
+  id: string | number,
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/units/${id}`, { headers: withHeaders() });
+};
+
+export const getUnitHierarchy = async (
+  id: string | number,
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/units/${id}/hierarchy`, {
+    headers: withHeaders(),
+  });
+};
+
+export const getCurrentUnitEmployees = async (
+  id: string | number,
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/units/current/${id}/employees`, {
+    headers: withHeaders(),
+  });
+};
+
+export const getUnitList = async (
+  id: string | number,
+  queryParams: UnitQueryParams,
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/units/list/${id}`, {
+    params: queryParams,
+    headers: withHeaders(),
+  });
+};
+
+export const getMyAdminUnits = async (
+  organizationId: string,
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/units/my-admin-units/organization/${organizationId}`, {
+    headers: withHeaders(),
+  });
+};
+
+export const createUnit = async (data: UnitPayload): Promise<AxiosResponse> => {
+  return axiosInstance.post(`/units`, data, { headers: withHeaders() });
+};
+
+export const updateUnit = async (
+  id: string | number,
+  data: UnitPayload,
+): Promise<AxiosResponse> => {
+  return axiosInstance.put(`/units/${id}`, data, { headers: withHeaders() });
+};
+
+export const deleteUnit = async (
+  id: string | number,
+): Promise<AxiosResponse> => {
+  return axiosInstance.delete(`/units/${id}`, { headers: withHeaders() });
+};
+
+export const softDeleteUnit = async (
+  id: string | number,
+): Promise<AxiosResponse> => {
+  return axiosInstance.delete(`/units/${id}/soft`, { headers: withHeaders() });
+};
+
+export const getArchivedUnits = async (
+  parentId: string | number,
+  params?: UnitQueryParams,
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/units/archived/${parentId}`, {
+    params,
+    headers: withHeaders(),
+  });
+};
+
+export const restoreUnit = async (
+  id: string | number,
+): Promise<AxiosResponse> => {
+  return axiosInstance.patch(`/units/${id}/restore`, null, {
+    headers: withHeaders(),
+  });
+};
+
+export interface RelateUnitToUnitPayload {
+  unitId: string;
+  newParentUnitId: string;
+}
+
+export const relateUnitToUnit = async (
+  payload: RelateUnitToUnitPayload
+): Promise<AxiosResponse> => {
+  return axiosInstance.patch(`/units/relate-unit-to-unit`, payload, {
+    headers: withHeaders(),
+  });
+};
+
+export const getChildUnits = async (
+  parentUnitId: string,
+  params?: UnitQueryParams
+): Promise<AxiosResponse> => {
+  return axiosInstance.get(`/units/child-units/${parentUnitId}`, {
+    params: {
+      take: params?.take ?? 50,
+      skip: params?.skip ?? 0,
+      ...(params?.orderBy && { orderBy: params.orderBy }),
+      ...(params?.order && { order: params.order }),
+    },
+    headers: withHeaders(),
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/services/api/uploadBulkService.ts b/apps/edr-freight-web/backoffice/src/user-management/services/api/uploadBulkService.ts
new file mode 100644
index 000000000..76427654b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/services/api/uploadBulkService.ts
@@ -0,0 +1,40 @@
+import axiosInstance from "@/shared/services/axiosInstance";
+export interface UploadUserPayload {
+  unitId: string;
+  positions: BulkUploadPositionDto[];
+  users: BulkUploadUserDto[];
+}
+
+export interface BulkUploadPositionDto {
+  Position: string;
+  AmharicPosition: string;
+  ReportsTo: string;
+  PositionType: string;
+}
+
+export interface UploadUpdate {
+  unitId: string;
+  positions: BulkUploadPositionDto[];
+}
+
+export interface BulkUploadUserGroupDto {
+  users: BulkUploadUserDto[];
+}
+
+export interface BulkUploadUserDto {
+  AmharicFirstName: string;
+  AmharicLastName: string;
+  EnglishFirstName: string;
+  EnglishLastName: string;
+  Position: string;
+  Username: string;
+  Email: string;
+  PhoneNumber: string;
+}
+
+export const uploadBulkUsers = async (payload: UploadUserPayload) => {
+  return axiosInstance.post("/employees/upload-user-csv-2", payload, {});
+};
+export const updateBulkUsers = async (payload: UploadUpdate) => {
+  return axiosInstance.post("/employees/upload-position-csv-2", payload, {});
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/services/api/userPositionApprovalService.ts b/apps/edr-freight-web/backoffice/src/user-management/services/api/userPositionApprovalService.ts
new file mode 100644
index 000000000..643438c8c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/services/api/userPositionApprovalService.ts
@@ -0,0 +1,74 @@
+import axiosInstance from "@/shared/services/axiosInstance";
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+
+export interface LocalizedName {
+  en?: string;
+  am?: string;
+}
+
+export interface UserPositionApproval {
+  id: string;
+  createdAt?: string;
+  employee?: {
+    id?: string;
+    name?: LocalizedName | string;
+    user?: { email?: string };
+  };
+  position?: {
+    id?: string;
+    name?: LocalizedName | string;
+  };
+  unit?: {
+    id?: string;
+    name?: LocalizedName | string;
+  };
+}
+
+export interface UserPositionApprovalList {
+  count: number;
+  items: UserPositionApproval[];
+}
+
+export interface UserPositionApprovalParams {
+  take?: number;
+  skip?: number;
+  search?: string;
+}
+
+export interface UserPositionDecisionPayload {
+  comment: string;
+}
+
+/*
+ * Provisional API paths. Keep them here so they can be replaced without
+ * touching the hook or page once the backend contract is implemented.
+ */
+const BASE_PATH = "/employee-positions/approvals";
+
+export const fetchUserPositionApprovals = async (
+  params: UserPositionApprovalParams,
+): Promise<UserPositionApprovalList> => {
+  const { data } = await axiosInstance.get<UserPositionApprovalList>(
+    `${BASE_PATH}/pending`,
+    { params, headers: withHeaders() },
+  );
+  return data;
+};
+
+export const approveUserPosition = async (
+  id: string,
+  payload: UserPositionDecisionPayload,
+): Promise<void> => {
+  await axiosInstance.patch(`${BASE_PATH}/${id}/approve`, payload, {
+    headers: withHeaders(),
+  });
+};
+
+export const rejectUserPosition = async (
+  id: string,
+  payload: UserPositionDecisionPayload,
+): Promise<void> => {
+  await axiosInstance.patch(`${BASE_PATH}/${id}/reject`, payload, {
+    headers: withHeaders(),
+  });
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/TeamMembers.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/TeamMembers.tsx
new file mode 100644
index 000000000..25d79b230
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/TeamMembers.tsx
@@ -0,0 +1,745 @@
+import { cn } from "@/super-admin/lib/utils";
+import {
+  UserCircle,
+  Mail,
+  Check,
+  Clock,
+  AlertCircle,
+  UserPen,
+  RefreshCw,
+  MoreVertical,
+  Phone,
+  Eye,
+  PhoneCall,
+  UserMinus,
+  Briefcase,
+} from "lucide-react";
+import { Badge } from "@/shared/common/ui/badge";
+import { Button } from "@/shared/common/ui/button";
+import { TeamMemberDto } from "../dto/teamMember/teamMember";
+import { useEffect, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { Avatar, AvatarFallback } from "@/shared/common/ui/avatar";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/common/ui/tooltip";
+import { motion } from "framer-motion";
+import { Input } from "@/shared/common/ui/input";
+import { t } from "i18next";
+import { toast } from "sonner";
+import { updateProfile } from "../services/api/employeePositionsService";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { EmployeePositionsDialog } from "./dialogs/EmployeePositionsDialog";
+
+interface TeamMembersProps {
+  departmentId: string;
+  departmentName: string;
+  employees: TeamMemberDto[];
+  isLoading: boolean;
+  searchQuery?: string;
+  onEditEmployee?: (employee: TeamMemberDto) => void;
+  onInviteEmployee?: (employee: TeamMemberDto) => void;
+  onDeleteEmployee?: (
+    departmentId: string,
+    departmentName: string,
+    teamMemberId: string,
+    teamMemberName: string,
+  ) => void;
+  onDeactivateTeamMember?: (userId: string, teamMemberName: string) => void;
+  employeePositions?: Array<{
+    [key: string]: Array<{
+      id: string;
+      employeeId: string;
+      position: {
+        id: string;
+        name: {
+          am: string;
+          en: string;
+        };
+      };
+    }>;
+  }>;
+}
+
+type UserStatus = "accepted" | "pending" | "Not Invited";
+
+const statusStyles: Record<
+  UserStatus,
+  { bg: string; text: string; icon: React.ReactNode }
+> = {
+  accepted: {
+    bg: "bg-primary-100 dark:bg-primary-900/40",
+    text: "text-primary-800 dark:text-primary-300",
+    icon: <Check className="h-3 w-3 mr-1" />,
+  },
+  pending: {
+    bg: "bg-yellow-100 dark:bg-yellow-900/40",
+    text: "text-yellow-800 dark:text-yellow-300",
+    icon: <Clock className="h-3 w-3 mr-1" />,
+  },
+  "Not Invited": {
+    bg: "bg-gray-100 dark:bg-gray-700",
+    text: "text-gray-800 dark:text-gray-300",
+    icon: <AlertCircle className="h-3 w-3 mr-1" />,
+  },
+};
+
+export const TeamMembers = ({
+  departmentId,
+  departmentName,
+  employees = [],
+  isLoading = false,
+  searchQuery = "",
+  onEditEmployee,
+  onInviteEmployee,
+  onDeleteEmployee,
+  onDeactivateTeamMember,
+  employeePositions,
+}: TeamMembersProps) => {
+  const [selectedEmployee, setSelectedEmployee] =
+    useState<TeamMemberDto | null>(null);
+  const [showUserDetails, setShowUserDetails] = useState(false);
+  const [showEditPage, setEditPage] = useState(false);
+  const [showPositionsDialog, setShowPositionsDialog] = useState(false);
+  const [userName, setUserName] = useState<string>("");
+  const [email, setEmail] = useState<string>("");
+  const [englishName, setEnglishName] = useState<string>("");
+  const [amharicName, setAmharicName] = useState<string>("");
+  const [phoneNumber, setPhoneNumber] = useState<string>("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [emploeeId, setEmployeeId] = useState("");
+  const [errors, setErrors] = useState<{ [key: string]: string }>({});
+  const localizedName = useLocalizedName();
+
+  // Filter employees based on search query
+  const filteredEmployees = employees.filter((employee) => {
+    if (!searchQuery) return true;
+    const name = localizedName(employee.user.name);
+    const email = employee.user.email || "";
+    const username = employee.user.username || "";
+    const phoneNumber = employee.user.phoneNumber || "";
+
+    const query = searchQuery.toLowerCase();
+    return (
+      name.toLowerCase().includes(query) ||
+      email.toLowerCase().includes(query) ||
+      username.toLowerCase().includes(query) ||
+      phoneNumber.toLowerCase().includes(query)
+    );
+  });
+
+  const renderStatusBadge = (status: string) => {
+    const fallback = {
+      bg: "bg-gray-100",
+      text: "text-gray-700",
+      icon: null,
+    };
+    const style =
+      (statusStyles as Record<string, typeof fallback>)[status] ?? fallback;
+
+    return (
+      <Badge
+        className={cn(
+          "text-xs flex items-center px-2 py-1",
+          style.bg,
+          style.text,
+        )}>
+        {style.icon}
+        <span>{status}</span>
+      </Badge>
+    );
+  };
+
+  const getUserStatus = (employee: TeamMemberDto): UserStatus => {
+    if (employee.user.hasSetPassword) {
+      return "accepted";
+    }
+    return "pending";
+  };
+
+  const handleResendClick = (employee: TeamMemberDto) => {
+    if (onInviteEmployee) {
+      onInviteEmployee(employee);
+    }
+  };
+  const handleViewUserDetail = (employee: TeamMemberDto) => {
+    setSelectedEmployee(employee);
+    setShowUserDetails(true);
+  };
+  const handleShowUserDetails = (employee: TeamMemberDto) => {
+    setSelectedEmployee(employee);
+    setShowUserDetails(true);
+  };
+
+  const handleEditPage = (employee: TeamMemberDto) => {
+    setSelectedEmployee(employee);
+    setEditPage(true);
+    setEmployeeId(employee?.user?.id);
+  };
+
+  const handleShowPositions = (employee: TeamMemberDto) => {
+    setSelectedEmployee(employee);
+    setShowPositionsDialog(true);
+  };
+
+  const getInitials = (name: string) => {
+    const splittedName = name.trim().split(" ");
+    return splittedName.length === 1
+      ? splittedName[0][0]
+      : `${splittedName[0][0]}${splittedName[1][0]}`;
+  };
+
+  useEffect(() => {
+    if (showEditPage && selectedEmployee) {
+      setUserName(selectedEmployee?.user.username ?? "");
+      setEmail(selectedEmployee?.user.email ?? "");
+      setEnglishName(selectedEmployee?.user.name.en ?? "");
+      setAmharicName(selectedEmployee?.user.name.am ?? "");
+      setPhoneNumber(selectedEmployee?.user.phoneNumber ?? "");
+      setErrors({});
+      setError("");
+    }
+  }, [showEditPage, selectedEmployee]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const newErrors: { [key: string]: string } = {};
+    if (!email?.trim()) newErrors.email = t("profile.emailRequired");
+    if (!userName?.trim()) newErrors.userName = t("profile.usernameRequired");
+    if (!phoneNumber?.trim())
+      newErrors.phoneNumber = t("profile.phoneRequired");
+    if (!englishName?.trim())
+      newErrors.englishName = t("profile.englishNameRequired");
+    if (!amharicName?.trim())
+      newErrors.amharicName = t("profile.amharicNameRequired");
+
+    setErrors(newErrors);
+
+    if (Object.keys(newErrors).length > 0) return;
+
+    const phoneRegex = /^(\+2519\d{8}|09\d{8})$/;
+    if (!phoneRegex.test(phoneNumber ?? "")) {
+      setError(t("profile.invalidPhoneFormat"));
+      toast.error(t("profile.invalidPhoneFormat"), {
+        description: t("profile.validPhoneFormat"),
+      });
+      return;
+    }
+
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(email ?? "")) {
+      setError(t("profile.invalidEmailFormat"));
+      toast.error(t("profile.invalidEmailFormat"), {
+        description: t("profile.validEmailFormat"),
+      });
+      return;
+    }
+
+    setLoading(true);
+    try {
+      await updateProfile(
+        {
+          email,
+          username: userName,
+          phoneNumber,
+          name: {
+            am: amharicName,
+            en: englishName,
+          },
+        },
+        emploeeId,
+      );
+
+      toast.success(t("profile.profileUpdateSuccess"), {
+        description: t("profile.profileUpdated"),
+      });
+    } catch (error: any) {
+      const message = error?.message || t("profile.profileUpdateFailed");
+      setError(message);
+      toast.error(t("profile.profileUpdateFailed"), {
+        description: message,
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const ActionDropdown = ({ employee }: { employee: TeamMemberDto }) => {
+    const status = getUserStatus(employee);
+    const isPending = status === "pending";
+    const isNotInvited = status === "Not Invited";
+
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8 hover:bg-gray-100 dark:hover:bg-gray-700"
+            onClick={(e) => e.stopPropagation()}>
+            <MoreVertical className="h-4 w-4 dark:text-gray-400" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-48 dark:bg-gray-700 dark:border-gray-600">
+          {/* Edit Option */}
+          <DropdownMenuItem
+            onClick={(e) => {
+              e.stopPropagation();
+              handleShowUserDetails(employee);
+            }}
+            className="cursor-pointer dark:text-gray-200 dark:hover:bg-gray-600">
+            <Eye className="h-4 w-4 mr-2" />
+            {t("viewDetail.viewDetail")}
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={(e) => {
+              e.stopPropagation();
+              handleEditPage(employee);
+            }}
+            className="cursor-pointer dark:text-gray-200 dark:hover:bg-gray-600">
+            <UserPen className="h-4 w-4 mr-2" />
+            {t("common.Edit")}
+          </DropdownMenuItem>
+
+          {/* Show Positions Option */}
+          <DropdownMenuItem
+            onClick={(e) => {
+              e.stopPropagation();
+              handleShowPositions(employee);
+            }}
+            className="cursor-pointer dark:text-gray-200 dark:hover:bg-gray-600">
+            <Briefcase className="h-4 w-4 mr-2" />
+            {t("positions.viewPositions")}
+          </DropdownMenuItem>
+
+          {/* Resend/Invite Option */}
+          {onInviteEmployee && (isPending || isNotInvited) && (
+            <DropdownMenuItem
+              onClick={(e) => {
+                e.stopPropagation();
+                handleResendClick(employee);
+              }}
+              className="cursor-pointer dark:text-gray-200 dark:hover:bg-gray-600">
+              <RefreshCw className="h-4 w-4 mr-2" />
+              {isPending ? t("Resend Invite") : t("Send Invite")}
+            </DropdownMenuItem>
+          )}
+
+          {/* Remove Option */}
+          {onDeleteEmployee && (
+            <DropdownMenuItem
+              onClick={(e) => {
+                e.stopPropagation();
+                const memberName =
+                  typeof employee.user.name === "string"
+                    ? employee.user.name
+                    : (employee.user.name as any)?.en ||
+                      (employee.user.name as any)?.am ||
+                      "User";
+                onDeleteEmployee(
+                  departmentId,
+                  departmentName,
+                  employee.id,
+                  memberName,
+                );
+              }}
+              className="cursor-pointer text-red-600 focus:text-red-600 dark:focus:text-red-400">
+              <AlertCircle className="h-4 w-4 mr-2" />
+              {t("signatureUpload.remove")}
+            </DropdownMenuItem>
+          )}
+          {onDeactivateTeamMember && (
+            <DropdownMenuItem
+              onClick={(e) => {
+                e.stopPropagation();
+                const memberName =
+                  typeof employee.user.name === "string"
+                    ? employee.user.name
+                    : (employee.user.name as any)?.en ||
+                      (employee.user.name as any)?.am ||
+                      "User";
+                onDeactivateTeamMember(employee.id, memberName);
+              }}
+              className="cursor-pointer text-red-600 focus:text-red-600 dark:focus:text-red-400">
+              <UserMinus className="h-4 w-4 mr-2" />
+              {t("common.DeactivateUser")}
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  };
+
+  const renderEmployeeItem = (employee: TeamMemberDto) => {
+    const status = getUserStatus(employee);
+
+    return (
+      <div
+        key={employee.user.id}
+        className="flex items-center justify-between p-4 border-b border-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors rounded-md gap-3 group">
+        {/* Left side - Employee info */}
+        <div
+          className="flex items-center gap-3 cursor-pointer flex-1 min-w-0"
+          onClick={() => handleShowUserDetails(employee)}>
+          <Avatar className="h-10 w-10 border border-gray-200 dark:border-gray-600 shrink-0">
+            <AvatarFallback className="bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
+              {getInitials(localizedName(employee.user.name)).toUpperCase()}
+            </AvatarFallback>
+          </Avatar>
+          <div className="flex flex-col min-w-0 flex-1">
+            <span className="text-sm font-medium text-gray-800 dark:text-gray-200 truncate">
+              {localizedName(employee.user.name)}
+            </span>
+            <div className="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400 truncate">
+              <span className="flex items-center gap-1 shrink-0">
+                <UserCircle className="h-3 w-3" />
+                {employee.user.userType || "Employee"}
+              </span>
+              <span className="flex items-center gap-1 shrink-0">
+                <Phone className="h-3 w-3" />
+                {employee.user.phoneNumber || "Employee"}
+              </span>
+            </div>
+            <div className="mt-1">{renderStatusBadge(status)}</div>
+          </div>
+        </div>
+
+        {/* Right side - Action dropdown */}
+        <div className="flex items-center gap-2">
+          {/* Status-specific  (optional - you can remove this if you want all actions in dropdown) */}
+
+          {/* Three dots dropdown menu */}
+          <ActionDropdown employee={employee} />
+        </div>
+      </div>
+    );
+  };
+
+  const renderContent = () => {
+    if (isLoading) {
+      return (
+        <div className="flex justify-center py-10">
+          <div className="flex flex-col items-center">
+            <div className="w-8 h-8 border-4 border-t-blue-500 border-blue-200 rounded-full animate-spin mb-2"></div>
+            <p className="text-sm text-gray-500 dark:text-gray-400">Loading team members...</p>
+          </div>
+        </div>
+      );
+    }
+
+    if (filteredEmployees.length > 0) {
+      return (
+        <div className="space-y-2">
+          {filteredEmployees.map(renderEmployeeItem)}
+        </div>
+      );
+    }
+
+    if (employees.length > 0 && filteredEmployees.length === 0) {
+      return (
+        <div className="text-center py-10 text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 rounded-md">
+          <UserCircle className="h-12 w-12 mx-auto mb-2 text-gray-300 dark:text-gray-600" />
+          <p className="text-sm font-medium">{t("search.noResults")}</p>
+          <p className="text-xs mt-1 text-gray-400 dark:text-gray-500">
+            {t("search.tryDifferentKeywords")}
+          </p>
+        </div>
+      );
+    }
+
+    return (
+      <div className="text-center py-10 text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 rounded-md">
+        <UserCircle className="h-12 w-12 mx-auto mb-2 text-gray-300 dark:text-gray-600" />
+        <p className="text-sm font-medium">
+          {departmentId
+            ? t("contentManagement.msg1")
+            : t("contentManagement.msg2")}
+        </p>
+        <p className="text-xs mt-1 text-gray-400 dark:text-gray-500">
+          {departmentId
+            ? t("contentManagement.msg3")
+            : t("contentManagement.msg4")}
+        </p>
+      </div>
+    );
+  };
+
+  return (
+    <div className="w-full">
+      {renderContent()}
+
+      {/* User Details Modal */}
+      <Dialog
+        open={showUserDetails}
+        onOpenChange={(open) => setShowUserDetails(open)}>
+        <DialogContent className="sm:max-w-md dark:bg-gray-800">
+          <DialogHeader>
+            <DialogTitle className="text-center dark:text-white">
+              {t("contentManagement.userDetail")}
+            </DialogTitle>
+          </DialogHeader>
+          {selectedEmployee && (
+            <div className="flex flex-col items-center space-y-4 py-4">
+              <Avatar className="w-20 h-20 border-2 border-gray-200 dark:border-gray-600">
+                <AvatarFallback className="text-xl bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300">
+                  {getInitials(
+                    localizedName(selectedEmployee.user.name),
+                  ).toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+              <div className="text-center">
+                <h2 className="text-xl font-semibold text-gray-800 dark:text-white">
+                  {localizedName(selectedEmployee.user.name)}
+                </h2>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  {selectedEmployee.user.userType || "Employee"}
+                </p>
+                {getUserStatus(selectedEmployee) && (
+                  <div className="mt-2 flex justify-center">
+                    {renderStatusBadge(getUserStatus(selectedEmployee))}
+                  </div>
+                )}
+              </div>
+              <div className="w-full space-y-3 mt-4">
+                <div className="flex items-center gap-3 p-4 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600">
+                  <div className="p-2 rounded-lg bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-400">
+                    <UserCircle className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <p className="text-xs text-gray-500 dark:text-gray-400">
+                      {t("organization.username")}
+                    </p>
+                    <p className="font-medium text-gray-800 dark:text-gray-200">
+                      {selectedEmployee.user.username || "Not provided"}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-3 p-4 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600">
+                  <div className="p-2 rounded-lg bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-400">
+                    <Mail className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <p className="text-xs text-gray-500 dark:text-gray-400">
+                      {t("organization.email")}
+                    </p>
+                    <p className="font-medium text-gray-800 dark:text-gray-200">
+                      {selectedEmployee.user.email || "Not provided"}
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-3 p-4 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600">
+                  <div className="p-2 rounded-lg bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-400">
+                    <PhoneCall className="w-5 h-5" />
+                  </div>
+                  <div>
+                    <p className="text-xs text-gray-500 dark:text-gray-400">
+                      {t("organization.phoneNumber")}
+                    </p>
+                    <p className="font-medium text-gray-800 dark:text-gray-200">
+                      {selectedEmployee.user.phoneNumber}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      {/* Edit Modal */}
+      <Dialog open={showEditPage} onOpenChange={(open) => setEditPage(open)}>
+        <DialogContent className="sm:max-w-lg max-h-[80vh] overflow-y-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden dark:bg-gray-800">
+          <DialogHeader>
+            <DialogTitle className="text-center dark:text-white">
+              {t("contentManagement.editEmployee")}
+            </DialogTitle>
+          </DialogHeader>
+          {selectedEmployee && (
+            <div className="flex flex-col items-center space-y-4 py-4">
+              <Avatar className="w-20 h-20 border-2 border-gray-200 dark:border-gray-600">
+                <AvatarFallback className="text-xl bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300">
+                  {getInitials(
+                    localizedName(selectedEmployee.user.name),
+                  ).toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+              <div className="text-center">
+                <h2 className="text-xl font-semibold text-gray-800 dark:text-white">
+                  {localizedName(selectedEmployee.user.name)}
+                </h2>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  {selectedEmployee.user.userType || "Employee"}
+                </p>
+                {getUserStatus(selectedEmployee) && (
+                  <div className="mt-2 flex justify-center">
+                    {renderStatusBadge(getUserStatus(selectedEmployee))}
+                  </div>
+                )}
+              </div>
+              <motion.form
+                initial="hidden"
+                animate="show"
+                className="space-y-5 mt-6 w-full"
+                onSubmit={handleSubmit}>
+                <div className="relative flex items-center gap-3 p-4 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600">
+                  <div className="p-2 rounded-lg bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-400 shrink-0">
+                    <UserCircle className="w-5 h-5" />
+                  </div>
+                  <div className="flex-1">
+                    <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">
+                      {t("organization.username")}
+                    </p>
+                    <Input
+                      placeholder={t("profile.username")}
+                      value={userName}
+                      onChange={(e) => setUserName(e.target.value)}
+                      className="w-full dark:bg-gray-600 dark:text-gray-200 dark:border-gray-500"
+                    />
+                    {errors.userName && (
+                      <p className="text-sm text-red-600 mt-1">
+                        {errors.userName}
+                      </p>
+                    )}
+                  </div>
+                </div>
+
+                <div className="relative flex items-center gap-3 p-4 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600">
+                  <div className="p-2 rounded-lg bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-400 shrink-0">
+                    <UserCircle className="w-5 h-5" />
+                  </div>
+                  <div className="flex-1">
+                    <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">
+                      {t("profile.englishName")}
+                    </p>
+                    <Input
+                      placeholder={t("profile.englishName")}
+                      value={englishName}
+                      onChange={(e) => setEnglishName(e.target.value)}
+                      className="w-full dark:bg-gray-600 dark:text-gray-200 dark:border-gray-500"
+                    />
+                    {errors.englishName && (
+                      <p className="text-sm text-red-600 mt-1">
+                        {errors.englishName}
+                      </p>
+                    )}
+                  </div>
+                </div>
+
+                <div className="relative flex items-center gap-3 p-4 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600">
+                  <div className="p-2 rounded-lg bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-400 shrink-0">
+                    <UserCircle className="w-5 h-5" />
+                  </div>
+                  <div className="flex-1">
+                    <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">
+                      {t("profile.amharicName")}
+                    </p>
+                    <Input
+                      placeholder={t("profile.amharicName")}
+                      value={amharicName}
+                      onChange={(e) => setAmharicName(e.target.value)}
+                      className="w-full dark:bg-gray-600 dark:text-gray-200 dark:border-gray-500"
+                    />
+                    {errors.amharicName && (
+                      <p className="text-sm text-red-600 mt-1">
+                        {errors.amharicName}
+                      </p>
+                    )}
+                  </div>
+                </div>
+
+                <div className="relative flex items-center gap-3 p-4 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600">
+                  <div className="p-2 rounded-lg bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-400 shrink-0">
+                    <UserCircle className="w-5 h-5" />
+                  </div>
+                  <div className="flex-1">
+                    <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">
+                      {t("organization.email")}
+                    </p>
+                    <Input
+                      placeholder={t("profile.email")}
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                      className="w-full dark:bg-gray-600 dark:text-gray-200 dark:border-gray-500"
+                    />
+                    {errors.email && (
+                      <p className="text-sm text-red-600 mt-1">
+                        {errors.email}
+                      </p>
+                    )}
+                  </div>
+                </div>
+
+                <div className="relative flex items-center gap-3 p-4 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600">
+                  <div className="p-2 rounded-lg bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-400 shrink-0">
+                    <UserCircle className="w-5 h-5" />
+                  </div>
+                  <div className="flex-1">
+                    <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">
+                      {t("organization.phoneNumber")}
+                    </p>
+                    <Input
+                      placeholder={t("profile.phoneNumber")}
+                      value={phoneNumber}
+                      onChange={(e) => setPhoneNumber(e.target.value)}
+                      className="w-full dark:bg-gray-600 dark:text-gray-200 dark:border-gray-500"
+                    />
+                    {errors.phoneNumber && (
+                      <p className="text-sm text-red-600 mt-1">
+                        {errors.phoneNumber}
+                      </p>
+                    )}
+                  </div>
+                </div>
+
+                <Button
+                  type="submit"
+                  className="w-full h-11 bg-primary hover:bg-primary-700 text-white font-medium text-sm shadow-md rounded-lg"
+                  disabled={loading}>
+                  {loading ? (
+                    <span className="flex items-center justify-center">
+                      <RefreshCw className="animate-spin h-5 w-5 mr-2" />
+                      {t("profile.updating")}...
+                    </span>
+                  ) : (
+                    t("profile.updateProfile")
+                  )}
+                </Button>
+              </motion.form>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      {/* Employee Positions Dialog */}
+      {selectedEmployee && (
+        <EmployeePositionsDialog
+          isOpen={showPositionsDialog}
+          onClose={() => setShowPositionsDialog(false)}
+          employeeName={localizedName(selectedEmployee.user.name)}
+          positions={selectedEmployee.employeePositions || []}
+          onPositionRemoved={() => {
+            // Optionally refresh the positions if needed
+            setShowPositionsDialog(false);
+          }}
+        />
+      )}
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/UserManagementTree.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/UserManagementTree.tsx
new file mode 100644
index 000000000..0ed835cee
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/UserManagementTree.tsx
@@ -0,0 +1,1170 @@
+import { useEffect, useState } from "react";
+import { Input } from "@/shared/common/ui/input";
+import {
+  Search,
+  ChevronLeft,
+  ChevronRight,
+  Download,
+  RefreshCw,
+  Mail,
+  X,
+} from "lucide-react";
+import { useToast } from "@/shared/common/ui/use-toast";
+import axiosInstance from "@/shared/services/axiosInstance";
+import { toast } from "sonner";
+import { Button } from "@/shared/common/ui/button";
+import { MultiSelect } from "@/shared/common/ui/multi-select";
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { SingleSelect } from "@/shared/common/ui/single-select";
+
+import { OrganizationList } from "./lists/OrganizationList";
+import { UnitList } from "./lists/UnitList";
+import { DepartmentList } from "./lists/DepartmentList";
+import { TeamMembers } from "./TeamMembers";
+
+import { AddDepartmentDialog } from "./dialogs/AddDepartmentDialog";
+import { AddUserDialog } from "./dialogs/AddUserDialog";
+import { ViewUsersDialog } from "./dialogs/ViewUsersDialog";
+import { AddSubDepartmentDialog } from "./dialogs/AddSubDepartmentDialog";
+import { AddAssignUserDialog } from "./dialogs/AddAssignUserDialog";
+
+import { useOrganizationsData } from "./hooks/useOrganizationsData";
+import { useUnitsData } from "./hooks/useUnitsData";
+import { useDepartmentsData } from "./hooks/useDepartmentsData";
+import { useEmployeesData } from "./hooks/useEmployeesData";
+
+import { useSelectionHandlers } from "./handlers/useSelectionHandlers";
+import { useActionHandlers } from "./handlers/useActionHandlers";
+import { Breadcrumb } from "./components/Breadcrumb";
+import { AddUserUnderDepartmentDialog } from "./dialogs/AddUserUnderDepartmentDialog";
+import { useAuth } from "@/shared/context/AuthContext";
+import { EditDepartmentDialog } from "./dialogs/EditDepartmentDialog";
+import { EditUnitDialog } from "./dialogs/EditUnitDialog";
+import { DeleteUnitDialog } from "./dialogs/DeleteUnitDialog";
+import { PermanentDeleteUnitDialog } from "./dialogs/PermanentDeleteUnitDialog";
+import { AddFromSubCityDialog } from "./dialogs/AddFromSubCityDialog";
+import { UnitSelectionModal } from "./components/UnitSelectionModal";
+import { AddUnitDialog } from "./dialogs/AddUnitDialog";
+import { Plus } from "lucide-react";
+import { DeleteDepartmentDialog } from "./dialogs/DeleteDepartmentDialog";
+import { DeleteTeamMemberDialog } from "./dialogs/DeleteTeamMemberDialog";
+import { TeamMemberDto } from "../dto/teamMember/teamMember";
+import { useRef } from "react";
+import { UserCircle } from "lucide-react";
+import { resendVerificationCode } from "@/shared/services/authService";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { MoveDepartmentDialog } from "./dialogs/MoveDepartmentDialog";
+import i18n from "@/i18n";
+import { t } from "i18next";
+import { useExportUserData } from "@/shared/hooks/useExportUserData";
+import { DeactivateTeamMemberDialog } from "./dialogs/DeactivateTeamMemberDialog";
+import { OrganizationEmployeeSearch } from "./components/OrganizationEmployeeSearch";
+import { useGetOrganizationConfig } from "@/super-admin/hooks/useConfig";
+import { useUnit } from "@/user-management/hooks/useUnit";
+import { useArchiveActions } from "@/user-management/hooks/useArchived";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { ManageUnitAdminDialog } from "./dialogs/ManageUnitAdminDialog";
+
+const UserManagementTree = () => {
+  const { toast: uiToast } = useToast();
+  const { softDeletePosition } = useArchiveActions();
+  const handleArchiveDepartment = (departmentId: string) => {
+    softDeletePosition(departmentId);
+  };
+  const [searchQuery, setSearchQuery] = useState("");
+  const [unitSearchQuery, setUnitSearchQuery] = useState("");
+  const [departmentSearchQuery, setDepartmentSearchQuery] = useState("");
+  const [employeeSearchQuery, setEmployeeSearchQuery] = useState("");
+  const { user } = useAuth();
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const localizedName = useLocalizedName();
+  const lang = i18n.language;
+
+  // Resend invitation states
+  const [showResendModal, setShowResendModal] = useState(false);
+  const [showConfirmAllModal, setShowConfirmAllModal] = useState(false);
+  const [pendingUsers, setPendingUsers] = useState<any[]>([]);
+  const [selectedUserIds, setSelectedUserIds] = useState<string[]>([]);
+  const [isSendingInvitations, setIsSendingInvitations] = useState(false);
+  const [isLoadingPending, setIsLoadingPending] = useState(false);
+  const isOrganizationAdmin =
+    user?.roles?.some((role) => role.key === "organization_admin") ?? false;
+  // Export functionality
+  const {
+    exportUserData,
+    getUnits,
+    isExporting,
+    isLoadingUnits,
+    units: exportUnits,
+  } = useExportUserData();
+  const [selectedExportUnitId, setSelectedExportUnitId] = useState<string>("");
+  const [showUnitSelection, setShowUnitSelection] = useState(false);
+  const [exportFormat, setExportFormat] = useState<"xlsx" | "csv">("xlsx");
+  const [showEmployeeSearch, setShowEmployeeSearch] = useState(false);
+  const [showSendToUnitModal, setShowSendToUnitModal] = useState(false);
+  const [selectedSendUnitId, setSelectedSendUnitId] = useState<string>("");
+  const { handleError } = useErrorHandler(t);
+  // Hooks for data loading
+  const organizationId =
+    user?.employee && user.employee.length > 0
+      ? user.employee[0].organizationId
+      : undefined;
+  const { organizations, isLoading: orgsLoading } = useOrganizationsData({
+    currentOrgId: organizationId,
+  });
+  const {
+    selectedOrgId,
+    selectedUnitId,
+    selectedDepartmentId,
+    selectedDepartmentName,
+    breadcrumb,
+    handleSelectOrganization,
+    handleSelectUnit,
+    handleSelectDepartment,
+  } = useSelectionHandlers(organizations, localizedName);
+  const [take] = useState(100);
+  const [skip, setSkip] = useState(0);
+
+  const {
+    units,
+    isLoading: unitsLoading,
+    setUnits,
+    fetchedUnits,
+  } = useUnitsData(selectedOrgId, { take, skip });
+
+  const { data: orgConfigResp } = useGetOrganizationConfig(selectedOrgId || "");
+  const unitCapacity: number | null = (() => {
+    const items = orgConfigResp?.data?.items ?? [];
+    if (!Array.isArray(items) || items.length === 0) return null;
+    const match =
+      items.find((it: any) => it?.organizationId === selectedOrgId) ?? items[0];
+    const value = Number(match?.maximumNumberOfUnits);
+    return Number.isFinite(value) ? value : null;
+  })();
+
+  // Pull child units (units related under one of this org's units) so they
+  // show up alongside the top-level units in the column. Track the expanded
+  // parent separately so clicking on a child (or its action menu) doesn't
+  // collapse the sibling list.
+  const { getChildren } = useUnit();
+  const [expandedParentId, setExpandedParentId] = useState<string>("");
+  useEffect(() => {
+    if (!selectedUnitId) return;
+    const isTopLevel = units.some((u) => u.id === selectedUnitId);
+    if (isTopLevel) setExpandedParentId(selectedUnitId);
+  }, [selectedUnitId, units]);
+  useEffect(() => {
+    setExpandedParentId("");
+  }, [selectedOrgId]);
+  const { data: childUnitsResp } = getChildren(expandedParentId || "");
+  const childUnits = (() => {
+    const data = childUnitsResp?.data;
+    if (!data) return [] as Array<{ id: string; name: any }>;
+    const items = Array.isArray(data) ? data : (data.items ?? []);
+    return Array.isArray(items)
+      ? items.map((u: any) => ({ id: u.id, name: u.name }))
+      : [];
+  })();
+  const childUnitIds = new Set(childUnits.map((u) => u.id));
+  console.log(units, childUnitIds);
+  const mergedUnits = (() => {
+    const seen = new Set<string>();
+    const out: Array<{ id: string; name: any; isRelated: boolean }> = [];
+    [...units, ...childUnits].forEach((u) => {
+      if (u?.id && !seen.has(u.id)) {
+        seen.add(u.id);
+        out.push({ ...u, isRelated: childUnitIds.has(u.id) });
+      }
+    });
+    return out;
+  })();
+
+  const [addUnitDialogOpen, setAddUnitDialogOpen] = useState(false);
+  const canCreateUnit =
+    unitCapacity !== null && units.length < unitCapacity && !!selectedOrgId;
+
+  const {
+    departments,
+    isLoading: deptsLoading,
+    setDepartments,
+    positions,
+  } = useDepartmentsData(selectedUnitId);
+
+  const {
+    employees,
+    isLoading: employeesLoading,
+    setEmployees,
+    refetch: refetchEmployees,
+  } = useEmployeesData(selectedDepartmentId);
+
+  // All dialog states & handlers bundled
+  const actionHandlers = useActionHandlers({
+    selectedOrgId,
+    selectedUnitId,
+    toast: uiToast,
+  });
+  // Handle inviting or resending invitation to employees
+  const handleInviteEmployee = async (employee: TeamMemberDto) => {
+    try {
+      // Show immediate feedback that action is being processed
+      if (employee.status === "pending") {
+        toast.loading("Resending verification code...");
+      } else {
+        toast.loading("Sending invitation...");
+      }
+      await resendVerificationCode({
+        email: employee.user.email,
+        phoneNumber: employee.user.phoneNumber,
+      });
+      // Show success notification with more specific message for resend
+      const userName =
+        typeof employee.user.name === "string"
+          ? localizedName(employee.user.name)
+          : localizedName(employee.user.name) || "User";
+
+      if (employee.user.status === "pending") {
+        toast.success("Verification Code Resent", {
+          description: `A new verification code has been sent to ${userName}`,
+          duration: 4000,
+        });
+      } else {
+        toast.success("Invitation Sent", {
+          description: `Invitation sent to ${userName}`,
+          duration: 4000,
+        });
+      }
+
+      // Refresh the employee list to update statuses
+      if (refetchEmployees) {
+        await refetchEmployees();
+      }
+    } catch (error: unknown) {
+      // Show error notification
+      const errorMessage =
+        error instanceof Error ? error.message : "Unknown error";
+      toast.error("Error", {
+        description: `Failed to ${
+          employee.status === "pending"
+            ? "resend verification code"
+            : "send invitation"
+        }: ${errorMessage}`,
+        duration: 4000,
+      });
+    }
+    setTimeout(() => {
+      toast.dismiss();
+    }, 4000);
+  };
+
+  const fetchPendingUsers = async () => {
+    try {
+      setIsLoadingPending(true);
+      // First fetch to get the total count
+      const countResponse = await axiosInstance.get(
+        "/employees/my-unit/pending",
+        {
+          params: { take: 10 },
+          headers: withHeaders(),
+        },
+      );
+      const totalCount = countResponse.data?.count ?? 0;
+
+      // Fetch all pending users using the total count
+      const response = await axiosInstance.get("/employees/my-unit/pending", {
+        params: { take: totalCount || 3000 },
+        headers: withHeaders(),
+      });
+      const data = response.data;
+      const usersList = Array.isArray(data)
+        ? data
+        : Array.isArray(data?.items)
+          ? data.items
+          : [];
+      setPendingUsers(usersList);
+    } catch (err: any) {
+      handleError(err);
+    } finally {
+      setIsLoadingPending(false);
+    }
+  };
+
+  useEffect(() => {
+    if (showResendModal) {
+      fetchPendingUsers();
+    }
+  }, [showResendModal]);
+
+  const handleResendToAll = async () => {
+    try {
+      setIsSendingInvitations(true);
+      toast.loading("Resending verification to all pending users...");
+
+      await axiosInstance.post(
+        "/employees/my-unit/send-verification-to-all-pending",
+        {},
+        { headers: withHeaders() },
+      );
+
+      toast.dismiss();
+      toast.success("Successfully resent verification to all pending users.");
+
+      if (refetchEmployees) {
+        await refetchEmployees();
+      }
+    } catch (err: any) {
+      toast.dismiss();
+      handleError(err);
+    } finally {
+      setIsSendingInvitations(false);
+      setShowConfirmAllModal(false);
+    }
+  };
+
+  const handleSendSelectedInvitations = async () => {
+    if (selectedUserIds.length === 0) return;
+
+    try {
+      setIsSendingInvitations(true);
+      toast.loading(
+        `Sending verification to ${selectedUserIds.length} user(s)...`,
+      );
+
+      await axiosInstance.post(
+        "/employees/my-unit/generate-verification-codes",
+        { employeeIds: selectedUserIds },
+        { headers: withHeaders() },
+      );
+
+      toast.dismiss();
+      toast.success("Successfully sent verification codes.");
+
+      setShowResendModal(false);
+      setSelectedUserIds([]);
+
+      if (refetchEmployees) {
+        await refetchEmployees();
+      }
+    } catch (err: any) {
+      toast.dismiss();
+      handleError(err);
+    } finally {
+      setIsSendingInvitations(false);
+    }
+  };
+
+  const handleSendToSelectedUnits = async () => {
+    if (!selectedSendUnitId) return;
+
+    try {
+      toast.loading("Sending verification to unit...");
+
+      await axiosInstance.post(
+        `/employees/unit/${selectedSendUnitId}/send-verification-to-all-pending`,
+        {},
+        { headers: withHeaders() },
+      );
+
+      toast.dismiss();
+      toast.success("Successfully sent verification to selected unit.");
+
+      setShowSendToUnitModal(false);
+      setSelectedSendUnitId("");
+
+      if (refetchEmployees) {
+        await refetchEmployees();
+      }
+    } catch (err: any) {
+      toast.dismiss();
+      handleError(err);
+    }
+  };
+
+  const scrollLeft = () => {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollBy({ left: -200, behavior: "smooth" });
+    }
+  };
+
+  const scrollRight = () => {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollBy({ left: 200, behavior: "smooth" });
+    }
+  };
+
+  // Export handlers
+  const handleExportUserData = async () => {
+    if (!organizationId) {
+      toast.error(t("organizationIdRequired"));
+      return;
+    }
+
+    try {
+      const unitsList = await getUnits(organizationId);
+      if (unitsList && unitsList.length > 0) {
+        setShowUnitSelection(true);
+      } else {
+        toast.error(t("noUnitsFound"));
+      }
+    } catch (error) {
+      console.error("Failed to load units:", error);
+      toast.error(t("exportError"));
+    }
+  };
+
+  const handleUnitSelect = async (unitId: string) => {
+    setSelectedExportUnitId(unitId);
+    setShowUnitSelection(false);
+
+    // Export data for selected unit
+    const result = await exportUserData(unitId, exportFormat);
+
+    // Reset selectedExportUnitId after export (successful or failed)
+    setSelectedExportUnitId("");
+  };
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="p-4 border-b dark:border-gray-700">
+        <div className="flex justify-between items-center mb-4">
+          <h1 className="text-xl font-semibold text-gray-800 dark:text-gray-200">
+            {t("organization.userManagement")}
+          </h1>
+
+          <div className="flex gap-2">
+            {/* Format selection */}
+            <Select
+              value={exportFormat}
+              onValueChange={(value: "xlsx" | "csv") => setExportFormat(value)}
+            >
+              <SelectTrigger className="w-32 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent className="dark:bg-gray-700 dark:border-gray-600">
+                <SelectItem
+                  value="xlsx"
+                  className="dark:text-gray-200 dark:hover:bg-gray-600"
+                >
+                  XLSX
+                </SelectItem>
+                <SelectItem
+                  value="csv"
+                  className="dark:text-gray-200 dark:hover:bg-gray-600"
+                >
+                  CSV
+                </SelectItem>
+              </SelectContent>
+            </Select>
+
+            {/* Export button */}
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleExportUserData}
+              disabled={isExporting || !organizationId}
+              className="bg-primary-50 text-primary-700 border-primary-200 hover:bg-primary-100 dark:bg-primary-900/50 dark:text-primary-300 dark:border-primary-700 dark:hover:bg-primary-900/70"
+            >
+              <Download
+                className={`h-4 w-4 mr-2 ${isExporting ? "animate-pulse" : ""}`}
+              />
+              {isExporting ? t("exporting") : t("exportUserData")}
+            </Button>
+          </div>
+        </div>
+
+        <div className="flex gap-2">
+          <div className="relative flex-1">
+            <Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-500 dark:text-gray-400" />
+            <Input
+              placeholder="Search organizations, units, departments..."
+              className="pl-8 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setShowEmployeeSearch(true)}
+            disabled={!organizationId}
+            className="bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100 whitespace-nowrap dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800 dark:hover:bg-blue-900/50"
+          >
+            <UserCircle className="h-4 w-4 mr-2" />
+            {t("search.searchAllEmployees")}
+          </Button>
+        </div>
+
+        <div className="mt-4">
+          <Breadcrumb
+            breadcrumb={breadcrumb}
+            hasTeamMembers={selectedDepartmentId != "" && employees.length > 0}
+          />
+        </div>
+
+        {selectedOrgId && (
+          <div className="mt-3 flex gap-2 flex-wrap">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setShowConfirmAllModal(true)}
+              disabled={isSendingInvitations}
+              className="bg-orange-50 text-orange-700 border-orange-200 hover:bg-orange-100 dark:bg-orange-900/30 dark:text-orange-400 dark:border-orange-800 dark:hover:bg-orange-900/50"
+            >
+              <RefreshCw
+                className={`h-4 w-4 mr-2 ${isSendingInvitations ? "animate-spin" : ""}`}
+              />
+              {t("userManagement.resendToAll", "Resend Invitation to All")}
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setShowResendModal(true)}
+              disabled={isSendingInvitations}
+              className="border border-blue-200 bg-blue-50 text-blue-700 hover:border-blue-300 hover:bg-blue-100 dark:border-blue-900 dark:bg-blue-950 dark:text-blue-200 dark:hover:border-blue-700 dark:hover:bg-blue-900 dark:hover:text-white"
+            >
+              <Mail className="h-4 w-4 mr-2" />
+              {t("userManagement.resendInvitation", "Resend Invitation")}
+            </Button>
+            {isOrganizationAdmin && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setShowSendToUnitModal(true)}
+                disabled={isSendingInvitations}
+                className="border border-green-200 bg-green-50 text-green-700 hover:border-green-300 hover:bg-green-100 dark:border-green-900 dark:bg-green-950 dark:text-green-200 dark:hover:border-green-700 dark:hover:bg-green-900 dark:hover:text-white"
+              >
+                <Mail className="h-4 w-4 mr-2" />
+                {t(
+                  "userManagement.sendToSelectedUnit",
+                  "Send to Selected Unit",
+                )}
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Mobile view - horizontal scrollable cards */}
+      <div className="flex-1 p-2 md:hidden">
+        <div className="relative h-[calc(100vh-180px)]">
+          <button
+            onClick={scrollLeft}
+            className="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-white dark:bg-gray-800 rounded-full shadow-md p-1"
+            aria-label="Scroll left"
+          >
+            <ChevronLeft className="h-5 w-5 dark:text-gray-300" />
+          </button>
+
+          <div
+            ref={scrollContainerRef}
+            className="flex overflow-x-auto gap-3 pb-4 snap-x snap-mandatory h-full scrollbar-hide"
+            style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
+          >
+            <div className="border rounded-md p-3 bg-white dark:bg-gray-800 shadow-sm min-w-[90%] max-w-[90%] flex-shrink-0 snap-center h-full flex flex-col dark:border-gray-700">
+              <h3 className="font-medium text-gray-700 dark:text-gray-200 mb-3 border-b pb-2 dark:border-gray-700">
+                {t("organization.organizations")}
+              </h3>
+              <div className="overflow-y-auto flex-1">
+                <OrganizationList
+                  selectedOrgId={selectedOrgId}
+                  organizations={organizations}
+                  isLoading={orgsLoading}
+                  searchQuery={searchQuery}
+                  onSelectOrganization={(id: string) => {
+                    setUnits([]);
+                    setDepartments([]);
+                    setEmployees([]);
+                    handleSelectOrganization(id);
+                  }}
+                  canCreateUnitForOrg={(id) =>
+                    id === selectedOrgId && canCreateUnit
+                  }
+                  onCreateUnit={() => setAddUnitDialogOpen(true)}
+                />
+              </div>
+            </div>
+            <div className="border rounded-md p-3 bg-white dark:bg-gray-800 shadow-sm min-w-[90%] max-w-[90%] flex-shrink-0 snap-center h-full flex flex-col dark:border-gray-700">
+              <h3 className="font-medium text-gray-700 dark:text-gray-200 mb-3 border-b pb-2 dark:border-gray-700 flex items-center justify-between gap-2">
+                <span>{t("contentManagement.Units")}</span>
+                <div className="flex items-center gap-2">
+                  {unitCapacity !== null && (
+                    <span className="text-xs font-normal px-2 py-0.5 rounded-full bg-primary-50 text-primary-700 dark:bg-primary-900/30 dark:text-primary-300 border border-primary-200 dark:border-primary-800">
+                      {mergedUnits.length}/{unitCapacity}
+                    </span>
+                  )}
+                  {canCreateUnit && (
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => setAddUnitDialogOpen(true)}
+                      className="h-7 px-2 text-xs border-primary-500 text-primary-700 hover:bg-primary-50 dark:border-primary-700 dark:text-primary-300 dark:hover:bg-primary-900/30"
+                    >
+                      <Plus className="h-3.5 w-3.5 mr-1" />
+                      {t("contentManagement.createUnit", "Create Unit")}
+                    </Button>
+                  )}
+                </div>
+              </h3>
+              <div className="mb-3">
+                <div className="relative">
+                  <Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-500 dark:text-gray-400" />
+                  <Input
+                    placeholder={t("search.searchUnits", "Search units...")}
+                    className="pl-8 text-sm dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600"
+                    value={unitSearchQuery}
+                    onChange={(e) => setUnitSearchQuery(e.target.value)}
+                  />
+                </div>
+              </div>
+              <div className="overflow-y-auto flex-1">
+                <UnitList
+                  organizationId={selectedOrgId}
+                  selectedUnitId={selectedUnitId}
+                  onSelectUnit={(id: string) => {
+                    setDepartments([]);
+                    setEmployees([]);
+                    handleSelectUnit(id, mergedUnits);
+                  }}
+                  units={mergedUnits}
+                  isLoading={unitsLoading}
+                  searchQuery={unitSearchQuery}
+                  onAddDepartment={actionHandlers.unit.onAddDepartment}
+                  onManageUnitAdmin={actionHandlers.unit.onManageUnitAdmin}
+                  onEditUnit={actionHandlers.unit.onEditUnit}
+                  onArchiveUnit={actionHandlers.unit.onArchiveUnit}
+                  onDeleteUnit={actionHandlers.unit.onDeleteUnit}
+                  onAddFromSubCity={actionHandlers.unit.onAddFromSubCity}
+                />
+              </div>
+            </div>
+            <div className="border rounded-md p-3 bg-white dark:bg-gray-800 shadow-sm min-w-[90%] max-w-[90%] flex-shrink-0 snap-center h-full flex flex-col dark:border-gray-700">
+              <h3 className="font-medium text-gray-700 dark:text-gray-200 mb-3 border-b pb-2 dark:border-gray-700">
+                {t("userIncoming.Departments")}
+              </h3>
+              <div className="mb-3">
+                <div className="relative">
+                  <Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-500 dark:text-gray-400" />
+                  <Input
+                    placeholder={t(
+                      "search.searchDepartments",
+                      "Search departments...",
+                    )}
+                    className="pl-8 text-sm dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600"
+                    value={departmentSearchQuery}
+                    onChange={(e) => setDepartmentSearchQuery(e.target.value)}
+                  />
+                </div>
+              </div>
+              <div className="overflow-y-auto flex-1">
+                <DepartmentList
+                  unitId={selectedUnitId}
+                  selectedDepartmentId={selectedDepartmentId}
+                  onSelectDepartment={(id: string) => {
+                    if (id !== selectedDepartmentId) {
+                      setEmployees([]);
+                      handleSelectDepartment(id, departments);
+                    }
+                  }}
+                  departments={departments}
+                  positions={positions}
+                  isLoading={deptsLoading}
+                  searchQuery={departmentSearchQuery}
+                  onAddUser={actionHandlers.department.onAddUserUnderDepartment}
+                  onViewUsers={actionHandlers.department.onViewUsers}
+                  onAddSubDepartment={
+                    actionHandlers.department.onAddSubDepartment
+                  }
+                  onEditDepartment={actionHandlers.department.onEditDepartment}
+                  onDeleteDepartment={
+                    actionHandlers.department.onDeleteDepartment
+                  }
+                  onArchiveDepartment={handleArchiveDepartment}
+                  onDelegate={actionHandlers.department.onDelegate}
+                  onAssignUser={actionHandlers.department.onAssignUser}
+                  onMoveDepartment={actionHandlers.department.onMoveDepartment}
+                />
+              </div>
+            </div>
+            <div className="border rounded-md p-3 bg-white dark:bg-gray-800 shadow-sm min-w-[90%] max-w-[90%] flex-shrink-0 snap-center h-full flex flex-col dark:border-gray-700">
+              <h3 className="font-medium text-gray-700 dark:text-gray-200 mb-3 border-b pb-2 dark:border-gray-700">
+                {t("contentManagement.teamMember")}
+              </h3>
+              <div className="mb-3">
+                <div className="relative">
+                  <Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-500 dark:text-gray-400" />
+                  <Input
+                    placeholder={t(
+                      "search.searchEmployees",
+                      "Search employees...",
+                    )}
+                    className="pl-8 text-sm dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600"
+                    value={employeeSearchQuery}
+                    onChange={(e) => setEmployeeSearchQuery(e.target.value)}
+                  />
+                </div>
+              </div>
+              <div className="overflow-y-auto flex-1">
+                <TeamMembers
+                  departmentId={selectedDepartmentId}
+                  departmentName={selectedDepartmentName}
+                  employees={employees}
+                  isLoading={employeesLoading}
+                  searchQuery={employeeSearchQuery}
+                  onDeleteEmployee={
+                    actionHandlers.teamMember.onDeleteTeamMember
+                  }
+                  onInviteEmployee={handleInviteEmployee}
+                  onDeactivateTeamMember={
+                    actionHandlers.teamMember.onDeactivateTeamMember
+                  }
+                />
+              </div>
+            </div>
+          </div>
+
+          <button
+            onClick={scrollRight}
+            className="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-white dark:bg-gray-800 rounded-full shadow-md p-1"
+            aria-label="Scroll right"
+          >
+            <ChevronRight className="h-5 w-5 dark:text-gray-300" />
+          </button>
+        </div>
+      </div>
+
+      {/* Desktop view - grid layout */}
+      <div className="hidden md:flex flex-1 p-4 flex-col lg:grid lg:grid-cols-4 lg:gap-4">
+        <div className="lg:col-span-3 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div className="border rounded-md p-3 bg-white dark:bg-gray-800 shadow-sm dark:border-gray-700">
+            <h3 className="font-medium text-gray-700 dark:text-gray-200 mb-3 border-b pb-2 dark:border-gray-700">
+              {t("organization.organizations")}
+            </h3>
+            <OrganizationList
+              selectedOrgId={selectedOrgId}
+              organizations={organizations}
+              isLoading={orgsLoading}
+              searchQuery={searchQuery}
+              onSelectOrganization={(id: string) => {
+                setUnits([]);
+                setDepartments([]);
+                setEmployees([]);
+                handleSelectOrganization(id);
+              }}
+              canCreateUnitForOrg={(id) =>
+                id === selectedOrgId && canCreateUnit
+              }
+              onCreateUnit={() => setAddUnitDialogOpen(true)}
+            />
+          </div>
+          <div className="border rounded-md p-3 bg-white dark:bg-gray-800 shadow-sm dark:border-gray-700">
+            <h3 className="font-medium text-gray-700 dark:text-gray-200 mb-3 border-b pb-2 dark:border-gray-700 flex items-center justify-between gap-2">
+              <span>{t("contentManagement.Units")}</span>
+              {unitCapacity !== null && (
+                <span className="text-xs font-normal px-2 py-0.5 rounded-full bg-primary-50 text-primary-700 dark:bg-primary-900/30 dark:text-primary-300 border border-primary-200 dark:border-primary-800">
+                  {mergedUnits.length}/{unitCapacity}
+                </span>
+              )}
+            </h3>
+            <div className="mb-3">
+              <div className="relative">
+                <Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-500 dark:text-gray-400" />
+                <Input
+                  placeholder={t("search.searchUnits", "Search units...")}
+                  className="pl-8 text-sm dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600"
+                  value={unitSearchQuery}
+                  onChange={(e) => setUnitSearchQuery(e.target.value)}
+                />
+              </div>
+            </div>
+            <UnitList
+              organizationId={selectedOrgId}
+              selectedUnitId={selectedUnitId}
+              onSelectUnit={(id: string) => {
+                setDepartments([]);
+                setEmployees([]);
+                handleSelectUnit(id, mergedUnits);
+              }}
+              units={mergedUnits}
+              isLoading={unitsLoading}
+              searchQuery={unitSearchQuery}
+              onAddDepartment={actionHandlers.unit.onAddDepartment}
+              onManageUnitAdmin={actionHandlers.unit.onManageUnitAdmin}
+              onEditUnit={actionHandlers.unit.onEditUnit}
+              onArchiveUnit={actionHandlers.unit.onArchiveUnit}
+              onDeleteUnit={actionHandlers.unit.onDeleteUnit}
+              onAddFromSubCity={actionHandlers.unit.onAddFromSubCity}
+            />
+          </div>
+          <div className="border rounded-md p-3 bg-white dark:bg-gray-800 shadow-sm dark:border-gray-700">
+            <h3 className="font-medium text-gray-700 dark:text-gray-200 mb-3 border-b pb-2 dark:border-gray-700">
+              {t("userIncoming.Departments")}
+            </h3>
+            <div className="mb-3">
+              <div className="relative">
+                <Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-500 dark:text-gray-400" />
+                <Input
+                  placeholder={t(
+                    "search.searchDepartments",
+                    "Search departments...",
+                  )}
+                  className="pl-8 text-sm dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600"
+                  value={departmentSearchQuery}
+                  onChange={(e) => setDepartmentSearchQuery(e.target.value)}
+                />
+              </div>
+            </div>
+            <DepartmentList
+              unitId={selectedUnitId}
+              selectedDepartmentId={selectedDepartmentId}
+              onSelectDepartment={(id: string) => {
+                if (id !== selectedDepartmentId) {
+                  setEmployees([]);
+                  handleSelectDepartment(id, departments);
+                }
+              }}
+              departments={departments}
+              positions={positions}
+              isLoading={deptsLoading}
+              searchQuery={departmentSearchQuery}
+              onAddUser={actionHandlers.department.onAddUserUnderDepartment}
+              onViewUsers={actionHandlers.department.onViewUsers}
+              onAddSubDepartment={actionHandlers.department.onAddSubDepartment}
+              onEditDepartment={actionHandlers.department.onEditDepartment}
+              onDeleteDepartment={actionHandlers.department.onDeleteDepartment}
+              onArchiveDepartment={handleArchiveDepartment}
+              onDelegate={actionHandlers.department.onDelegate}
+              onAssignUser={actionHandlers.department.onAssignUser}
+              onMoveDepartment={actionHandlers.department.onMoveDepartment}
+            />
+          </div>
+        </div>
+
+        <div className="mt-4 lg:mt-0 border rounded-md p-4 bg-white dark:bg-gray-800 shadow-sm dark:border-gray-700">
+          <h3 className="font-medium text-gray-700 dark:text-gray-200 mb-4 border-b pb-2 flex items-center dark:border-gray-700">
+            <UserCircle className="mr-2 h-4 w-4 text-gray-500 dark:text-gray-400" />
+            {t("contentManagement.teamMember")}
+          </h3>
+          <div className="mb-4">
+            <div className="relative">
+              <Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-500 dark:text-gray-400" />
+              <Input
+                placeholder={t("search.searchEmployees", "Search employees...")}
+                className="pl-8 text-sm dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600"
+                value={employeeSearchQuery}
+                onChange={(e) => setEmployeeSearchQuery(e.target.value)}
+              />
+            </div>
+          </div>
+          <TeamMembers
+            departmentId={selectedDepartmentId}
+            departmentName={selectedDepartmentName}
+            employees={employees}
+            isLoading={employeesLoading}
+            searchQuery={employeeSearchQuery}
+            onDeleteEmployee={actionHandlers.teamMember.onDeleteTeamMember}
+            onInviteEmployee={handleInviteEmployee}
+            onDeactivateTeamMember={
+              actionHandlers.teamMember.onDeactivateTeamMember
+            }
+          />
+        </div>
+      </div>
+
+      {/* Dialogs */}
+      {actionHandlers.dialogs.manageUnitAdmin.isOpen && (
+        <ManageUnitAdminDialog {...actionHandlers.dialogs.manageUnitAdmin} />
+      )}
+      {actionHandlers.dialogs.userUnderDepartment.isOpen && (
+        <AddUserUnderDepartmentDialog
+          {...actionHandlers.dialogs.userUnderDepartment}
+        />
+      )}
+      {actionHandlers.dialogs.editUnit.isOpen && (
+        <EditUnitDialog
+          {...actionHandlers.dialogs.editUnit}
+          units={fetchedUnits}
+        />
+      )}
+      {actionHandlers.dialogs.deleteUnit.isOpen && (
+        <DeleteUnitDialog {...actionHandlers.dialogs.deleteUnit} />
+      )}
+      {actionHandlers.dialogs.permanentDeleteUnit.isOpen && (
+        <PermanentDeleteUnitDialog
+          {...actionHandlers.dialogs.permanentDeleteUnit}
+        />
+      )}
+      {actionHandlers.dialogs.addFromSubCity.isOpen && (
+        <AddFromSubCityDialog {...actionHandlers.dialogs.addFromSubCity} />
+      )}
+      {addUnitDialogOpen && (
+        <AddUnitDialog
+          isOpen={addUnitDialogOpen}
+          onClose={() => setAddUnitDialogOpen(false)}
+          organizationId={selectedOrgId}
+        />
+      )}
+      {actionHandlers.dialogs.department.isOpen && (
+        <AddDepartmentDialog
+          {...actionHandlers.dialogs.department}
+          organizationId={selectedOrgId}
+        />
+      )}
+      {actionHandlers.dialogs.editDepartment.isOpen && (
+        <EditDepartmentDialog
+          {...actionHandlers.dialogs.editDepartment}
+          postions={positions}
+        />
+      )}
+      {actionHandlers.dialogs.deleteDepartment.isOpen && (
+        <DeleteDepartmentDialog {...actionHandlers.dialogs.deleteDepartment} />
+      )}
+      {actionHandlers.dialogs.subDepartment.isOpen && (
+        <AddSubDepartmentDialog {...actionHandlers.dialogs.subDepartment} />
+      )}
+      {actionHandlers.dialogs.moveDepartment.isOpen && (
+        <MoveDepartmentDialog
+          isOpen={actionHandlers.dialogs.moveDepartment.isOpen}
+          onClose={actionHandlers.dialogs.moveDepartment.onClose}
+          departmentId={actionHandlers.dialogs.moveDepartment.departmentId}
+          organizationId={selectedOrgId}
+          unitId={selectedUnitId}
+        />
+      )}
+
+      {actionHandlers.dialogs.user.isOpen && (
+        <AddUserDialog {...actionHandlers.dialogs.user} />
+      )}
+      {actionHandlers.dialogs.viewUsers.isOpen && (
+        <ViewUsersDialog {...actionHandlers.dialogs.viewUsers} />
+      )}
+      {actionHandlers.dialogs.assignUser.isOpen && (
+        <AddAssignUserDialog {...actionHandlers.dialogs.assignUser} />
+      )}
+      {actionHandlers.dialogs.deleteTeamMember.isOpen && (
+        <DeleteTeamMemberDialog {...actionHandlers.dialogs.deleteTeamMember} />
+      )}
+      {actionHandlers.dialogs.deactivateTeamMember.isOpen && (
+        <DeactivateTeamMemberDialog
+          isOpen={actionHandlers.dialogs.deactivateTeamMember.isOpen}
+          onClose={actionHandlers.dialogs.deactivateTeamMember.onClose}
+          userId={actionHandlers.dialogs.deactivateTeamMember.userId}
+          teamMemberName={
+            actionHandlers.dialogs.deactivateTeamMember.teamMemberName
+          }
+        />
+      )}
+
+      {/* Unit Selection Modal */}
+      {showUnitSelection && (
+        <div className="fixed inset-0 bg-black/40 dark:bg-black/60 flex items-center justify-center z-50">
+          <UnitSelectionModal
+            units={exportUnits}
+            isLoading={isLoadingUnits}
+            onSelectUnit={handleUnitSelect}
+            onClose={() => setShowUnitSelection(false)}
+          />
+        </div>
+      )}
+
+      {/* Confirm Resend to All Modal */}
+      {showConfirmAllModal && (
+        <div className="fixed inset-0 bg-black/40 dark:bg-black/60 flex items-center justify-center z-50">
+          <div className="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4 shadow-xl border dark:border-gray-700 animate-in fade-in zoom-in-95 duration-150">
+            <h3 className="text-lg font-semibold mb-2 dark:text-white">
+              {t(
+                "userManagement.confirmResendTitle",
+                "Resend Verification Code",
+              )}
+            </h3>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
+              {t(
+                "userManagement.confirmResendDescription",
+                "Are you sure you want to resend verification to all pending users?",
+              )}
+            </p>
+            <div className="flex justify-end gap-2">
+              <Button
+                variant="outline"
+                onClick={() => setShowConfirmAllModal(false)}
+                disabled={isSendingInvitations}
+                className="dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700"
+              >
+                {t("common.cancel")}
+              </Button>
+              <Button
+                onClick={handleResendToAll}
+                disabled={isSendingInvitations}
+                className="bg-primary hover:bg-primary-700 text-white font-medium shadow-md"
+              >
+                {isSendingInvitations ? (
+                  <span className="flex items-center">
+                    <RefreshCw className="animate-spin h-4 w-4 mr-2" />
+                    {t("common.sending", "Sending...")}
+                  </span>
+                ) : (
+                  t("common.send", "Send")
+                )}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Resend Invitation (MultiSelect) Modal */}
+      {showResendModal && (
+        <div className="fixed inset-0 bg-black/40 dark:bg-black/60 flex items-center justify-center z-50">
+          <div className="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4 flex flex-col max-h-[85vh] shadow-xl border dark:border-gray-700 animate-in fade-in zoom-in-95 duration-150">
+            <h3 className="text-lg font-semibold mb-2 dark:text-white">
+              {t("userManagement.resendInvitation", "Resend Invitation")}
+            </h3>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
+              {t(
+                "userManagement.selectUsersDescription",
+                "Select the users you want to resend invitations to:",
+              )}
+            </p>
+
+            {/* Scrollable container for the dropdown selection and items */}
+            <div className="flex-1 overflow-y-auto my-2 pr-1 space-y-4 min-h-[200px]">
+              {isLoadingPending ? (
+                <div className="flex justify-center items-center py-12">
+                  <RefreshCw className="animate-spin h-8 w-8 text-primary" />
+                </div>
+              ) : pendingUsers.length === 0 ? (
+                <div className="text-center py-12 text-gray-500 dark:text-gray-400">
+                  {t(
+                    "userManagement.noPendingUsers",
+                    "No pending users found in your unit.",
+                  )}
+                </div>
+              ) : (
+                <div className="w-full">
+                  <MultiSelect
+                    options={pendingUsers.map((emp) => {
+                      const empName =
+                        typeof emp.name === "string"
+                          ? emp.name
+                          : localizedName(emp.name) ||
+                            (emp.user?.name
+                              ? localizedName(emp.user.name)
+                              : "Unnamed");
+                      return {
+                        label: empName,
+                        value: emp.id,
+                      };
+                    })}
+                    value={selectedUserIds}
+                    onValueChange={setSelectedUserIds}
+                    placeholder={t(
+                      "userManagement.selectUsersPlaceholder",
+                      "Select employees...",
+                    )}
+                    maxCount={5}
+                  />
+                </div>
+              )}
+            </div>
+
+            <div className="flex justify-end gap-2 mt-6 border-t pt-4 dark:border-gray-700">
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setShowResendModal(false);
+                  setSelectedUserIds([]);
+                }}
+                disabled={isSendingInvitations}
+                className="dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700"
+              >
+                {t("common.cancel")}
+              </Button>
+              <Button
+                onClick={handleSendSelectedInvitations}
+                disabled={selectedUserIds.length === 0 || isSendingInvitations}
+                className="bg-primary hover:bg-primary-700 text-white font-medium shadow-md"
+              >
+                {isSendingInvitations ? (
+                  <span className="flex items-center">
+                    <RefreshCw className="animate-spin h-4 w-4 mr-2" />
+                    {t("common.sending", "Sending...")}
+                  </span>
+                ) : (
+                  t("common.send", "Send")
+                )}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Organization Employee Search Modal */}
+      <OrganizationEmployeeSearch
+        organizationId={organizationId}
+        isOpen={showEmployeeSearch}
+        onClose={() => setShowEmployeeSearch(false)}
+      />
+
+      {showSendToUnitModal && (
+        <div className="fixed inset-0 bg-black/40 dark:bg-black/60 flex items-center justify-center z-50">
+          <div className="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4 flex flex-col max-h-[85vh] shadow-xl border dark:border-gray-700 animate-in fade-in zoom-in-95 duration-150">
+            <h3 className="text-lg font-semibold mb-2 dark:text-white">
+              {t("userManagement.sendToSelectedUnit", "Send to Selected Unit")}
+            </h3>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
+              Select the unit you want to send verification to:
+            </p>
+            <div className="flex-1 overflow-y-auto my-2 pr-1 space-y-4 min-h-[200px]">
+              <SingleSelect
+                options={mergedUnits.map((unit) => {
+                  const unitName =
+                    typeof unit.name === "string"
+                      ? unit.name
+                      : localizedName(unit.name) ||
+                        (typeof unit.name === "object" && unit.name?.en) ||
+                        unit.id ||
+                        "Unnamed Unit";
+                  return {
+                    label: unitName,
+                    value: unit.id,
+                  };
+                })}
+                value={selectedSendUnitId}
+                onValueChange={setSelectedSendUnitId}
+                placeholder={t(
+                  "search.selectUnitPlaceholder",
+                  "Select unit...",
+                )}
+              />
+            </div>
+            <div className="flex justify-end gap-2 mt-6 border-t pt-4 dark:border-gray-700">
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setShowSendToUnitModal(false);
+                  setSelectedSendUnitId("");
+                }}
+                className="dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700"
+              >
+                {t("common.cancel")}
+              </Button>
+              <Button
+                onClick={handleSendToSelectedUnits}
+                disabled={!selectedSendUnitId}
+                className="bg-primary hover:bg-primary-700 text-white font-medium shadow-md"
+              >
+                {t("common.send", "Send")}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default UserManagementTree;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/ViewUsers.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/ViewUsers.tsx
new file mode 100644
index 000000000..395c3a330
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/ViewUsers.tsx
@@ -0,0 +1,164 @@
+import { useState, useEffect } from "react";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import { Search } from "lucide-react";
+import { Badge } from "@/shared/common/ui/badge";
+
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  department?: string;
+}
+
+interface ViewUsersProps {
+  unitId: string;
+  onClose: () => void;
+}
+
+export function ViewUsers({ unitId, onClose }: ViewUsersProps) {
+  const [users, setUsers] = useState<User[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState("");
+
+  useEffect(() => {
+    const fetchUsers = async () => {
+      setIsLoading(true);
+
+      try {
+        // In a real application, this would be an API call
+        // For now, simulate API call with a timeout
+        await new Promise((resolve) => setTimeout(resolve, 800));
+
+        // Mock data
+        setUsers([
+          {
+            id: "1",
+            name: "Abebe Kebede",
+            email: "abebe@example.com",
+            role: "Admin",
+            department: "Management",
+          },
+          {
+            id: "2",
+            name: "Tigist Haile",
+            email: "tigist@example.com",
+            role: "Manager",
+            department: "Finance",
+          },
+          {
+            id: "3",
+            name: "Dawit Mekonnen",
+            email: "dawit@example.com",
+            role: "Member",
+            department: "Operations",
+          },
+          {
+            id: "4",
+            name: "Hanna Girma",
+            email: "hanna@example.com",
+            role: "Member",
+            department: "HR",
+          },
+        ]);
+      } catch (error) {
+        console.error("Failed to fetch users:", error);
+        setUsers([]);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchUsers();
+  }, [unitId]);
+
+  const filteredUsers = users.filter((user) => {
+    if (!searchQuery) return true;
+    const query = searchQuery.toLowerCase();
+    return (
+      user.name.toLowerCase().includes(query) ||
+      user.email.toLowerCase().includes(query) ||
+      user.role.toLowerCase().includes(query) ||
+      (user.department && user.department.toLowerCase().includes(query))
+    );
+  });
+
+  const getRoleBadgeColor = (role: string) => {
+    switch (role.toLowerCase()) {
+      case "admin":
+        return "bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300";
+      case "manager":
+        return "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300";
+      default:
+        return "bg-primary-100 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300";
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="relative">
+        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500 dark:text-gray-400" />
+        <Input
+          placeholder="Search users..."
+          className="pl-8 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+        />
+      </div>
+
+      <div className="border rounded-md overflow-hidden dark:border-gray-700">
+        {isLoading ? (
+          <div className="flex justify-center items-center p-8">
+            <p className="text-gray-500 dark:text-gray-400">Loading users...</p>
+          </div>
+        ) : filteredUsers.length > 0 ? (
+          <table className="w-full">
+            <thead className="bg-gray-50 dark:bg-gray-700">
+              <tr>
+                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                  Name
+                </th>
+                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                  Email
+                </th>
+                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                  Role
+                </th>
+                <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                  Department
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+              {filteredUsers.map((user) => (
+                <tr key={user.id} className="hover:bg-gray-50 dark:hover:bg-gray-700/50">
+                  <td className="px-4 py-2 whitespace-nowrap text-gray-900 dark:text-gray-100">{user.name}</td>
+                  <td className="px-4 py-2 whitespace-nowrap text-gray-500 dark:text-gray-400">{user.email}</td>
+                  <td className="px-4 py-2 whitespace-nowrap">
+                    <Badge className={getRoleBadgeColor(user.role)}>
+                      {user.role}
+                    </Badge>
+                  </td>
+                  <td className="px-4 py-2 whitespace-nowrap text-gray-500 dark:text-gray-400">
+                    {user.department || "-"}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        ) : (
+          <div className="flex justify-center items-center p-8 text-gray-500 dark:text-gray-400">
+            No users found
+          </div>
+        )}
+      </div>
+
+      <div className="flex justify-end">
+        <Button onClick={onClose} className="dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
+          Close
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/actions/DepartmentActions.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/actions/DepartmentActions.tsx
new file mode 100644
index 000000000..82873944c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/actions/DepartmentActions.tsx
@@ -0,0 +1,127 @@
+import { useState } from "react";
+import {
+  Archive,
+  MoreHorizontal,
+  Move,
+  Pencil,
+  Plus,
+  Trash,
+  UserCog,
+  UserPlus,
+} from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import { Button } from "@/shared/common/ui/button";
+import { PositionDto } from "@/user-management/dto/positions/positionDto";
+import { Name } from "../types";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { t } from "i18next";
+
+interface Department {
+  id: string;
+  name: Name;
+}
+
+interface DepartmentActionsProps {
+  department: Department;
+  positions: PositionDto[];
+  onAddUser?: (departmentId: string, departmentName: string) => void;
+  onViewUsers?: (departmentId: string) => void;
+  onAddPosition?: (departmentId: string, positionType: string) => void;
+  onAddSubDepartment?: (departmentId: string, departmentName: string) => void;
+  onDelegate?: (departmentId: string) => void;
+  onAssignUser?: (departmentId: string, departmentName: string) => void;
+  onEditDepartment?: (departmentId: string, departmentName: string) => void;
+  onDeleteDepartment?: (departmentId: string, departmentName: string) => void;
+  onArchiveDepartment?: (departmentId: string, departmentName: string) => void;
+  onMoveDepartment?: (departmentId: string, departmentName: string) => void;
+  showAlways?: boolean;
+}
+
+export const DepartmentActions: React.FC<DepartmentActionsProps> = ({
+  department,
+  positions,
+  onAddUser,
+  onAddPosition,
+  onAddSubDepartment,
+  onAssignUser,
+  onEditDepartment,
+  onDeleteDepartment,
+  onArchiveDepartment,
+  onMoveDepartment,
+  showAlways = false,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const localizedName = useLocalizedName();
+  const handleAction = (
+    action?: (departmentId: string, departmentName: string) => void
+  ) => {
+    if (action) {
+      action(department.id, localizedName(department.name));
+    }
+    setIsOpen(false);
+  };
+
+  return (
+    <div
+      className={
+        showAlways ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+      }>
+      <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="h-8 w-8 p-0 dark:hover:bg-gray-700">
+            <MoreHorizontal className="h-4 w-4 dark:text-gray-400" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="dark:bg-gray-700 dark:border-gray-600">
+          <DropdownMenuLabel className="dark:text-gray-200">Actions</DropdownMenuLabel>
+
+          <DropdownMenuItem onClick={() => handleAction(onAddUser)} className="dark:text-gray-200 dark:hover:bg-gray-600">
+            <UserPlus className="mr-2 h-4 w-4" />
+            {t("contentManagement.addUser")}
+          </DropdownMenuItem>
+
+          <DropdownMenuItem onClick={() => handleAction(onAssignUser)} className="dark:text-gray-200 dark:hover:bg-gray-600">
+            <UserCog className="mr-2 h-4 w-4" />
+            {t("organization.assignUser")}
+          </DropdownMenuItem>
+
+          <DropdownMenuItem onClick={() => handleAction(onAddSubDepartment)} className="dark:text-gray-200 dark:hover:bg-gray-600">
+            <Plus className="mr-2 h-4 w-4" />
+            {t("contentManagement.addSubdepartement")}
+          </DropdownMenuItem>
+
+          <DropdownMenuItem onClick={() => handleAction(onEditDepartment)} className="dark:text-gray-200 dark:hover:bg-gray-600">
+            <Pencil className="mr-2 h-4 w-4" />
+            {t("contentManagement.editDepartment")}
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={() => handleAction(onMoveDepartment)}
+            className="text-gray-800 dark:text-gray-300 focus:text-gray-900 dark:focus:text-gray-200">
+            <Move className="mr-2 h-4 w-4" />
+            {t("contentManagement.moveDepartment")}
+          </DropdownMenuItem>
+          {onArchiveDepartment && (
+            <DropdownMenuItem
+              onClick={() => handleAction(onArchiveDepartment)}
+              className="text-amber-700 focus:text-amber-800 dark:text-amber-400 dark:focus:text-amber-300">
+              <Archive className="mr-2 h-4 w-4" />
+              {t("contentManagement.archiveDepartment", "Archive Department")}
+            </DropdownMenuItem>
+          )}
+          <DropdownMenuItem
+            onClick={() => handleAction(onDeleteDepartment)}
+            className="text-red-600 focus:text-red-700 dark:focus:text-red-400">
+            <Trash className="mr-2 h-4 w-4" />
+            {t("contentManagement.deleteDepartment")}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/actions/OrganizationActions.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/actions/OrganizationActions.tsx
new file mode 100644
index 000000000..9aa7fb319
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/actions/OrganizationActions.tsx
@@ -0,0 +1,73 @@
+import { useState } from "react";
+import { MoreHorizontal, Plus } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import { Button } from "@/shared/common/ui/button";
+import { t } from "i18next";
+
+interface Organization {
+  id: string;
+  name: { am: string; en: string };
+  units?: any[];
+  isExpanded?: boolean;
+}
+
+interface OrganizationActionsProps {
+  organization: Organization;
+  onAddUnit?: (organizationId: string) => void;
+  showAlways?: boolean;
+}
+
+export const OrganizationActions: React.FC<OrganizationActionsProps> = ({
+  organization,
+  onAddUnit,
+  showAlways = false,
+}) => {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleAction = (callback?: (organizationId: string) => void) => {
+    setDropdownOpen(false);
+    if (callback) {
+      callback(organization.id);
+    }
+  };
+
+  return (
+    <div
+      className="action-button"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            className={`h-8 w-8 p-0 data-[state=open]:bg-muted ${
+              !showAlways && !isHovered && !dropdownOpen
+                ? "opacity-0"
+                : "opacity-100"
+            } transition-opacity`}
+            aria-haspopup="menu"
+            aria-expanded={dropdownOpen}
+          >
+            <MoreHorizontal className="h-4 w-4" />
+            <span className="sr-only">Open menu</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-[160px]">
+          <DropdownMenuLabel>Actions</DropdownMenuLabel>
+          <DropdownMenuItem onClick={() => handleAction(onAddUnit)}>
+            <Plus className="mr-2 h-4 w-4" />
+            {t("contentManagement.addUnit")}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/actions/UnitActions.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/actions/UnitActions.tsx
new file mode 100644
index 000000000..d85465edc
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/actions/UnitActions.tsx
@@ -0,0 +1,131 @@
+import { useState } from "react";
+import {
+  Building2,
+  MoreHorizontal,
+  Plus,
+  ShieldCheck,
+  Trash,
+  Trash2,
+} from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+import { Button } from "@/shared/common/ui/button";
+import { Name } from "../types";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { t } from "i18next";
+import { useAuth } from "@/shared/context/AuthContext";
+
+interface Unit {
+  id: string;
+  name: Name;
+}
+
+interface UnitActionsProps {
+  unit: Unit;
+  onAddDepartment?: (unitId: string) => void;
+  onManageUnitAdmin?: (unitId: string) => void;
+  onEditUnit?: (unitId: string) => void;
+  onArchiveUnit?: (unitId: string, unitName: string) => void;
+  onDeleteUnit?: (unitId: string, unitName: string) => void;
+  onAddFromSubCity?: (unitId: string) => void;
+  showAlways?: boolean;
+}
+
+export const UnitActions: React.FC<UnitActionsProps> = ({
+  unit,
+  onAddDepartment,
+  onManageUnitAdmin,
+  onEditUnit,
+  onArchiveUnit,
+  onDeleteUnit,
+  onAddFromSubCity,
+  showAlways = false,
+}) => {
+  const { user } = useAuth();
+  const isUnitAdmin = user?.roles?.some((role) => role.key === "unit_admin");
+  const isOrganizationAdmin = user?.roles?.some(
+    (role) => role.key === "organization_admin",
+  );
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const localizedName = useLocalizedName();
+  const handleAction = (callback?: (unitId: string) => void) => {
+    setDropdownOpen(false);
+    if (callback) {
+      callback(unit.id);
+    }
+  };
+  const handleDeleteAction = (
+    callback?: (unitId: string, unit: string) => void
+  ) => {
+    setDropdownOpen(false);
+    if (callback) {
+      const name = localizedName(unit.name);
+      callback(unit.id, name);
+    }
+  };
+
+  return (
+    <div
+      className={
+        showAlways ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+      }
+    >
+      <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="h-8 w-8 p-0 dark:hover:bg-gray-700">
+            <MoreHorizontal className="h-4 w-4 dark:text-gray-400" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-[160px] dark:bg-gray-700 dark:border-gray-600">
+          <DropdownMenuLabel className="dark:text-gray-200">Actions</DropdownMenuLabel>
+          <DropdownMenuItem onClick={() => handleAction(onAddDepartment)} className="dark:text-gray-200 dark:hover:bg-gray-600">
+            <Plus className="mr-2 h-4 w-4" />
+            {t("contentManagement.addDepartment")}
+          </DropdownMenuItem>
+          {isOrganizationAdmin && onManageUnitAdmin && (
+            <DropdownMenuItem
+              onClick={() => handleAction(onManageUnitAdmin)}
+              className="dark:text-gray-200 dark:hover:bg-gray-600"
+            >
+              <ShieldCheck className="mr-2 h-4 w-4" />
+              {t("contentManagement.manageUnitAdmin", "Manage Unit Admin")}
+            </DropdownMenuItem>
+          )}
+          <DropdownMenuItem onClick={() => handleAction(onEditUnit)} className="dark:text-gray-200 dark:hover:bg-gray-600">
+            <Plus className="mr-2 h-4 w-4" />
+            {t("contentManagement.editUnit")}
+          </DropdownMenuItem>
+          {isUnitAdmin && onAddFromSubCity && (
+            <DropdownMenuItem onClick={() => handleAction(onAddFromSubCity)} className="dark:text-gray-200 dark:hover:bg-gray-600">
+              <Building2 className="mr-2 h-4 w-4" />
+              {t("contentManagement.addFromSubCity", "Add From Sub City")}
+            </DropdownMenuItem>
+          )}
+          {onDeleteUnit && (
+            <DropdownMenuItem
+              onClick={() => handleDeleteAction(onArchiveUnit)}
+              className="text-amber-700 focus:text-amber-800 dark:text-amber-400 dark:focus:text-amber-300"
+            >
+              <Trash className="mr-2 h-4 w-4" />
+              {t("contentManagement.archiveUnit", "Archive Unit")}
+            </DropdownMenuItem>
+          )}
+          {onDeleteUnit && (
+            <DropdownMenuItem
+              onClick={() => handleDeleteAction(onDeleteUnit)}
+              className="text-red-700 focus:text-red-800 dark:text-red-400 dark:focus:text-red-300"
+            >
+              <Trash2 className="mr-2 h-4 w-4" />
+              {t("contentManagement.deleteUnit", "Delete Unit")}
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/components/Breadcrumb.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/components/Breadcrumb.tsx
new file mode 100644
index 000000000..bd0a72405
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/components/Breadcrumb.tsx
@@ -0,0 +1,45 @@
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { ChevronRight } from "lucide-react";
+import type { FC } from "react";
+
+interface BreadcrumbItem {
+  id: string;
+  name: { am: string; en: string };
+}
+
+interface BreadcrumbProps {
+  breadcrumb: BreadcrumbItem[];
+  hasTeamMembers: boolean;
+}
+
+export const Breadcrumb: FC<BreadcrumbProps> = ({
+  breadcrumb,
+  hasTeamMembers,
+}) => {
+  const localizedName = useLocalizedName();
+  return (
+    <div className="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4 overflow-x-auto">
+      <span className="font-medium text-gray-700 dark:text-gray-300">User Management</span>
+
+      {breadcrumb.map((item, index) => (
+        <div key={item.id} className="flex items-center">
+          <ChevronRight className="h-4 w-4 mx-2 flex-shrink-0 text-gray-400 dark:text-gray-500" />
+          <span
+            className={
+               index === breadcrumb.length - 1 ? "font-medium text-gray-800 dark:text-gray-200" : ""
+            }
+          >
+            {localizedName(item.name)}
+          </span>
+        </div>
+      ))}
+
+      {hasTeamMembers && (
+        <div className="flex items-center">
+          <ChevronRight className="h-4 w-4 mx-2 flex-shrink-0 text-gray-400 dark:text-gray-500" />
+          <span className="font-medium text-gray-800 dark:text-gray-200">Team Members</span>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/components/OrganizationEmployeeSearch.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/components/OrganizationEmployeeSearch.tsx
new file mode 100644
index 000000000..9f097cdc2
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/components/OrganizationEmployeeSearch.tsx
@@ -0,0 +1,255 @@
+import React, { useMemo } from "react";
+import { Input } from "@/shared/common/ui/input";
+import { Button } from "@/shared/common/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { Search, UserCircle, AlertCircle, X } from "lucide-react";
+import {
+  useOrganizationEmployeeSearch,
+  OrganizationEmployee,
+} from "../../hooks/useOrganizationEmployeeSearch";
+import { t } from "i18next";
+import i18n from "@/i18n";
+import { toast } from "sonner";
+import { TeamMembers } from "../TeamMembers";
+import { TeamMemberDto } from "../../dto/teamMember/teamMember";
+import { resendVerificationCode } from "@/shared/services/authService";
+
+interface OrganizationEmployeeSearchProps {
+  organizationId?: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+// Convert EmployeeWithUnitDto to TeamMemberDto format
+const convertToTeamMember = (
+  employee: OrganizationEmployee,
+  organizationId: string
+): TeamMemberDto => {
+  const primaryPosition = employee.employeePositions?.[0];
+  const userName = employee.user?.name ?? { en: "", am: "" };
+  const positionName = primaryPosition?.position?.name ?? { en: "", am: "" };
+
+  return {
+    organizationId,
+    status: "Active",
+    id: employee.id,
+    isCurrent: true,
+    name: primaryPosition
+      ? `${userName.en || userName.am} - ${positionName.en || positionName.am}`
+      : (userName.en || userName.am || null),
+    employeePositions: employee.employeePositions || [],
+    user: {
+      id: employee.user.id,
+      name: userName,
+      username: employee.user.email.split("@")[0],
+      email: employee.user.email,
+      userType: "employee",
+      sharepointId: null,
+      status: "pending",
+      phoneNumber: "",
+      hasSetPassword: false,
+    },
+  };
+};
+
+export const OrganizationEmployeeSearch: React.FC<
+  OrganizationEmployeeSearchProps
+> = ({ organizationId, isOpen, onClose }) => {
+  const {
+    filteredEmployees,
+    totalCount,
+    filteredCount,
+    searchQuery,
+    setSearchQuery,
+    isLoading,
+    error,
+  } = useOrganizationEmployeeSearch(organizationId);
+  // Convert filtered employees to TeamMemberDto format
+  const convertedEmployees = useMemo(() => {
+    if (!organizationId) return [];
+    return filteredEmployees.map((employee) =>
+      convertToTeamMember(employee, organizationId)
+    );
+  }, [filteredEmployees, organizationId]);
+
+  // Action handlers for TeamMembers
+  const handleInviteEmployee = async (employee: TeamMemberDto) => {
+    const lang = i18n.language;
+    try {
+      // Show immediate feedback that action is being processed
+      if (employee.user.status === "pending") {
+        toast.loading(t("search.resendingVerification"));
+      } else {
+        toast.loading(t("search.sendingInvitation"));
+      }
+
+      await resendVerificationCode({
+        email: employee.user.email,
+        phoneNumber: employee.user.phoneNumber,
+      });
+
+      // Show success notification with more specific message for resend
+      const userName =
+        lang === "en" ? employee.user.name.en : employee.user.name.am;
+
+      if (employee.user.status === "pending") {
+        toast.success(t("search.verificationCodeResent"), {
+          description: t("search.verificationCodeSentTo", { name: userName }),
+          duration: 4000,
+        });
+      } else {
+        toast.success(t("search.invitationSent"), {
+          description: t("search.invitationSentTo", { name: userName }),
+          duration: 4000,
+        });
+      }
+
+      // Refresh the employee list to update statuses
+      // Note: We could add a refetch function here if needed
+    } catch (error: unknown) {
+      // Show error notification
+      const errorMessage =
+        error instanceof Error ? error.message : "Unknown error";
+      const failureMessage =
+        employee.user.status === "pending"
+          ? t("search.failedToResend")
+          : t("search.failedToSendInvitation");
+
+      toast.error("Error", {
+        description: `${failureMessage}: ${errorMessage}`,
+        duration: 4000,
+      });
+    }
+  };
+
+  const handleDeleteEmployee = (
+    departmentId: string,
+    departmentName: string,
+    teamMemberId: string,
+    teamMemberName: string
+  ) => {
+    // Simple confirmation for remove action
+    const confirmed = window.confirm(
+      t("search.confirmRemoveEmployee", { name: teamMemberName })
+    );
+
+    if (confirmed) {
+
+      toast.info(t("search.removeFunctionalityNotImplemented"));
+    }
+  };
+
+  const renderContent = () => {
+    if (isLoading) {
+      return (
+        <div className="flex justify-center py-12">
+          <div className="flex flex-col items-center">
+            <div className="w-8 h-8 border-4 border-t-blue-500 border-blue-200 rounded-full animate-spin mb-2"></div>
+            <p className="text-sm text-gray-500 dark:text-gray-400">
+              {t("search.searchingEmployees")}
+            </p>
+          </div>
+        </div>
+      );
+    }
+
+    if (error) {
+      return (
+        <div className="text-center py-12 text-red-500 dark:text-red-400">
+          <AlertCircle className="h-12 w-12 mx-auto mb-2" />
+          <p className="text-sm font-medium">
+            {t("search.errorLoadingEmployees")}
+          </p>
+          <p className="text-xs mt-1 dark:text-gray-400">
+            {error instanceof Error ? error.message : "Unknown error"}
+          </p>
+        </div>
+      );
+    }
+
+    if (filteredEmployees.length === 0 && searchQuery.trim()) {
+      return (
+        <div className="text-center py-12 text-gray-500 dark:text-gray-400">
+          <Search className="h-12 w-12 mx-auto mb-2 text-gray-300 dark:text-gray-600" />
+          <p className="text-sm font-medium">{t("search.noEmployeesFound")}</p>
+          <p className="text-xs mt-1 text-gray-400 dark:text-gray-500">
+            {t("search.tryDifferentKeywords")}
+          </p>
+        </div>
+      );
+    }
+
+    if (filteredEmployees.length === 0) {
+      return (
+        <div className="text-center py-12 text-gray-500 dark:text-gray-400">
+          <UserCircle className="h-12 w-12 mx-auto mb-2 text-gray-300 dark:text-gray-600" />
+          <p className="text-sm font-medium">
+            {t("search.startTypingToSearch")}
+          </p>
+          <p className="text-xs mt-1 text-gray-400 dark:text-gray-500">
+            {t("search.searchByNameEmailPhone")}
+          </p>
+        </div>
+      );
+    }
+
+    // Use TeamMembers component for consistent UI and actions
+    return (
+      <TeamMembers
+        departmentId="" // Not applicable for organization-wide search
+        departmentName={t("search.allEmployees")}
+        employees={convertedEmployees}
+        isLoading={false}
+        searchQuery="" // We handle search at this level
+        onInviteEmployee={handleInviteEmployee}
+        onDeleteEmployee={handleDeleteEmployee}
+      />
+    );
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-4xl max-h-[80vh] overflow-hidden dark:bg-gray-800">
+        <DialogHeader className="flex flex-row items-center justify-between">
+          <DialogTitle className="flex items-center gap-2 dark:text-white">
+            <Search className="h-5 w-5 dark:text-gray-400" />
+            {t("search.searchAllEmployees")}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* Search Input */}
+          <div className="relative">
+            <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400 dark:text-gray-500" />
+            <Input
+              placeholder={t("search.searchByNameEmailPhonePosition")}
+              className="pl-10 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              autoFocus
+            />
+          </div>
+
+          {/* Results Count */}
+          {searchQuery.trim() && (
+            <div className="text-sm text-gray-600 dark:text-gray-400">
+              {t("search.showingResults", {
+                count: filteredCount,
+                total: totalCount,
+                query: searchQuery,
+              })}
+            </div>
+          )}
+
+          {/* Results */}
+          <div className="max-h-96 overflow-y-auto">{renderContent()}</div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/components/UnitSelectionModal.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/components/UnitSelectionModal.tsx
new file mode 100644
index 000000000..30a5ad4f0
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/components/UnitSelectionModal.tsx
@@ -0,0 +1,146 @@
+import React, { useState } from "react";
+import { Button } from "@/shared/common/ui/button";
+import { X, ChevronLeft, ChevronRight } from "lucide-react";
+import { t } from "i18next";
+
+interface UnitSelectionModalProps {
+  units: unknown[];
+  isLoading: boolean;
+  onSelectUnit: (unitId: string) => void;
+  onClose: () => void;
+}
+
+const UNITS_PER_PAGE = 10;
+
+export const UnitSelectionModal: React.FC<UnitSelectionModalProps> = ({
+  units,
+  isLoading,
+  onSelectUnit,
+  onClose,
+}) => {
+  const [currentPage, setCurrentPage] = useState(0);
+
+  const typedUnits = units
+    .filter(
+      (unit): unit is { id: string; name: any; description?: string } =>
+        typeof unit === "object" &&
+        unit !== null &&
+        "id" in unit &&
+        "name" in unit
+    );
+
+  const totalPages = Math.ceil(typedUnits.length / UNITS_PER_PAGE);
+  const startIndex = currentPage * UNITS_PER_PAGE;
+  const endIndex = startIndex + UNITS_PER_PAGE;
+  const currentUnits = typedUnits.slice(startIndex, endIndex);
+
+  const handleNext = () => {
+    if (currentPage < totalPages - 1) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
+
+  const handlePrevious = () => {
+    if (currentPage > 0) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-2xl w-full mx-4 shadow-xl">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-lg font-semibold dark:text-white">
+          {t("selectUnit")}
+        </h3>
+        <button
+          onClick={onClose}
+          className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none dark:hover:bg-gray-700 rounded"
+          aria-label="Close"
+        >
+          <X className="h-5 w-5" />
+        </button>
+      </div>
+
+      {/* Content */}
+      {isLoading ? (
+        <div className="text-center py-12">
+          <div className="flex flex-col items-center">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
+            <p className="mt-2 dark:text-gray-400">{t("loadingUnits")}</p>
+          </div>
+        </div>
+      ) : (
+        <>
+          {/* Units List */}
+          <div className="space-y-2 mb-4">
+            {currentUnits.length > 0 ? (
+              currentUnits.map((unit) => (
+                <button
+                  key={unit.id}
+                  onClick={() => onSelectUnit(unit.id)}
+                  className="w-full text-left p-4 rounded border border-gray-200 hover:bg-gray-100 hover:shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer dark:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-blue-400"
+                >
+                  <div className="font-medium dark:text-gray-200 truncate">
+                    {unit.name?.en || unit.name}
+                  </div>
+                  {unit.description && (
+                    <div className="text-sm text-gray-500 dark:text-gray-400 truncate mt-1">
+                      {unit.description}
+                    </div>
+                  )}
+                </button>
+              ))
+            ) : (
+              <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+                <p>{t("noUnitsFound")}</p>
+              </div>
+            )}
+          </div>
+
+          {/* Pagination Info */}
+          {totalPages > 1 && (
+            <div className="text-center text-sm text-gray-600 dark:text-gray-400 mb-4">
+              {t("page", {
+                current: currentPage + 1,
+                total: totalPages,
+                defaultValue: `Page ${currentPage + 1} of ${totalPages}`,
+              })}
+            </div>
+          )}
+
+          {/* Footer with Pagination */}
+          <div className="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handlePrevious}
+              disabled={currentPage === 0}
+              className="dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700"
+            >
+              <ChevronLeft className="h-4 w-4 mr-1" />
+              {t("previous")}
+            </Button>
+
+            <span className="text-sm text-gray-600 dark:text-gray-400">
+              {typedUnits.length > 0
+                ? `${startIndex + 1} - ${Math.min(endIndex, typedUnits.length)} of ${typedUnits.length}`
+                : "0"}
+            </span>
+
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleNext}
+              disabled={currentPage >= totalPages - 1}
+              className="dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700"
+            >
+              {t("next")}
+              <ChevronRight className="h-4 w-4 ml-1" />
+            </Button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/AddAssignUserDialog.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/AddAssignUserDialog.tsx
new file mode 100644
index 000000000..5a5f3875d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/AddAssignUserDialog.tsx
@@ -0,0 +1,46 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { AssignUserForm } from "../forms/AssignUserForm";
+
+interface AssignUserDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  departmentId: string;
+  departmentName: string;
+  unitId: string;
+}
+
+export function AddAssignUserDialog({
+  isOpen,
+  onClose,
+  departmentId,
+  departmentName,
+  unitId,
+}: AssignUserDialogProps) {
+  const handleSuccess = () => {
+    onClose();
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="sm:max-w-[600px] max-h-[80vh] overflow-hidden flex flex-col">
+        <DialogHeader>
+          <DialogTitle>Assign User to {departmentName}</DialogTitle>
+        </DialogHeader>
+        <div className="mt-4 overflow-y-auto flex-1">
+          <AssignUserForm
+            positionId={departmentId}
+            unitId={unitId}
+            positionName={departmentName}
+            onSuccess={handleSuccess}
+            onCancel={onClose}
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/AddDepartmentDialog.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/AddDepartmentDialog.tsx
new file mode 100644
index 000000000..6b83341e9
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/AddDepartmentDialog.tsx
@@ -0,0 +1,41 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { AddDepartmentForm } from "../forms/AddDepartmentForm";
+import { t } from "i18next";
+
+interface DepartmentDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  organizationId: string;
+  unitId: string;
+}
+
+export function AddDepartmentDialog({
+  isOpen,
+  onClose,
+  organizationId,
+  unitId,
+}: DepartmentDialogProps) {
+  const handleSuccess = (departmentName: string) => {
+    onClose();
+  };
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>{t("contentManagement.addDepartment")}</DialogTitle>
+        </DialogHeader>
+        <AddDepartmentForm
+          unitId={unitId}
+          organizationId={organizationId}
+          onSuccess={handleSuccess}
+          onCancel={onClose}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/AddFromSubCityDialog.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/AddFromSubCityDialog.tsx
new file mode 100644
index 000000000..e9d8f9324
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/AddFromSubCityDialog.tsx
@@ -0,0 +1,39 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { t } from "i18next";
+import { AddFromSubCityForm } from "../forms/AddFromSubCityForm";
+
+interface AddFromSubCityDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  parentUnitId: string;
+}
+
+export function AddFromSubCityDialog({
+  isOpen,
+  onClose,
+  parentUnitId,
+}: AddFromSubCityDialogProps) {
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="sm:max-w-[480px] max-w-[calc(100vw-2rem)] overflow-hidden">
+        <DialogHeader>
+          <DialogTitle className="truncate">
+            {t("contentManagement.addFromSubCity", "Add From Sub City")}
+          </DialogTitle>
+        </DialogHeader>
+        <div className="min-w-0">
+          <AddFromSubCityForm
+            parentUnitId={parentUnitId}
+            onSuccess={onClose}
+            onCancel={onClose}
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/AddSubDepartmentDialog.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/AddSubDepartmentDialog.tsx
new file mode 100644
index 000000000..f6aed4dc6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/AddSubDepartmentDialog.tsx
@@ -0,0 +1,47 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { AddSubDepartmentForm } from "../forms/AddSubDepartmentForm";
+
+interface SubDepartmentDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  departmentId: string;
+  departmentName: string;
+  organizationId: string;
+  unitId: string;
+}
+
+export function AddSubDepartmentDialog({
+  isOpen,
+  onClose,
+  departmentId,
+  organizationId,
+  unitId,
+  departmentName,
+}: SubDepartmentDialogProps) {
+  const handleSuccess = (subDepartmentName: string) => {
+    onClose();
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Add New Sub-Department</DialogTitle>
+        </DialogHeader>
+        <AddSubDepartmentForm
+          departmentId={departmentId}
+          departmentName={departmentName}
+          organizationId={organizationId}
+          unitId={unitId}
+          onSuccess={handleSuccess}
+          onCancel={onClose}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/AddUnitDialog.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/AddUnitDialog.tsx
new file mode 100644
index 000000000..3e860b8e6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/AddUnitDialog.tsx
@@ -0,0 +1,39 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { t } from "i18next";
+import { AddUnitForm } from "../forms/AddUnitForm";
+
+interface UnitDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  organizationId: string;
+}
+
+export function AddUnitDialog({
+  isOpen,
+  onClose,
+  organizationId,
+}: UnitDialogProps) {
+  const handleSuccess = (unitName: string) => {
+    onClose();
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>{t("contentManagement.addNewUnit")}</DialogTitle>
+        </DialogHeader>
+        <AddUnitForm
+          organizationId={organizationId}
+          onSuccess={handleSuccess}
+          onCancel={onClose}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/AddUserDialog.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/AddUserDialog.tsx
new file mode 100644
index 000000000..23b526358
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/AddUserDialog.tsx
@@ -0,0 +1,34 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { AddUserForm } from "../forms/AddUserForm";
+
+interface UserDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  unitId: string;
+}
+
+export function AddUserDialog({ isOpen, onClose, unitId }: UserDialogProps) {
+  const handleSuccess = () => {
+    onClose();
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>Add New User</DialogTitle>
+        </DialogHeader>
+        <AddUserForm
+          unitId={unitId}
+          onSuccess={handleSuccess}
+          onCancel={onClose}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/AddUserUnderDepartmentDialog.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/AddUserUnderDepartmentDialog.tsx
new file mode 100644
index 000000000..9bdd97e04
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/AddUserUnderDepartmentDialog.tsx
@@ -0,0 +1,46 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { AddUserUnderDepartmentForm } from "../forms/AddUserUnderDepartmentForm";
+import { useTranslation } from "react-i18next";
+
+interface AddUserUnderDepartmentDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  unitId: string;
+  departmentId: string;
+  departmentName: string;
+}
+
+export function AddUserUnderDepartmentDialog({
+  isOpen,
+  onClose,
+  unitId,
+  departmentId,
+  departmentName,
+}: AddUserUnderDepartmentDialogProps) {
+  const { t } = useTranslation();
+  const handleSuccess = () => {
+    onClose();
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="sm:max-w-[525px]">
+        <DialogHeader>
+          <DialogTitle>{t("userRecord.Add User Under Department")}</DialogTitle>
+        </DialogHeader>
+        <AddUserUnderDepartmentForm
+          unitId={unitId}
+          departmentId={departmentId}
+          departmentName={departmentName}
+          onSuccess={handleSuccess}
+          onCancel={onClose}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/DeactivateTeamMemberDialog.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/DeactivateTeamMemberDialog.tsx
new file mode 100644
index 000000000..b27f28d9d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/DeactivateTeamMemberDialog.tsx
@@ -0,0 +1,76 @@
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import { Button } from "@/shared/common/ui/button";
+import { useEmployeePositions } from "@/user-management/hooks/useEmployeePostions";
+import { useQueryClient } from "@tanstack/react-query";
+import { Loader2 } from "lucide-react";
+
+interface DeactivateTeamMemberDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  userId: string;
+  teamMemberName: string;
+}
+
+export const DeactivateTeamMemberDialog: React.FC<
+  DeactivateTeamMemberDialogProps
+> = ({ isOpen, onClose, userId, teamMemberName }) => {
+  const { deactivateUser, isDeActivatingUser } = useEmployeePositions();
+ 
+  const queryClient = useQueryClient();
+
+
+  const onDelete = async () => {
+    try {
+      await deactivateUser({
+        payload: userId,
+        successCallback: () => {
+          queryClient.invalidateQueries({
+            queryKey: ["positionEmployees"],
+            exact: true,
+          });
+          onClose();
+        },
+      });
+    } catch (error) {
+      console.error("Error deactivating user:", error);
+    }
+  };
+  return (
+    <AlertDialog open={isOpen} onOpenChange={onClose}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            Deactivate team member from organization?
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            Are you sure you want to deactivate <strong>{teamMemberName}</strong>? This will remove their access from the organization. This action can be reversed only by activating them again through the Archived Users section by contacting the administrator.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isDeActivatingUser}>
+            Cancel
+          </AlertDialogCancel>
+          <Button
+            variant="destructive"
+            onClick={onDelete}
+            disabled={isDeActivatingUser}>
+            {isDeActivatingUser && (
+              <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+            )}
+            Deactivate
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
+
+export default DeactivateTeamMemberDialog;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/DeleteDepartmentDialog.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/DeleteDepartmentDialog.tsx
new file mode 100644
index 000000000..c17d672c8
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/DeleteDepartmentDialog.tsx
@@ -0,0 +1,95 @@
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import { Button } from "@/shared/common/ui/button";
+import { usePositions } from "@/user-management/hooks/usePosition";
+import { Loader2, AlertTriangle } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+import { toast } from "sonner";
+
+interface DeleteDepartmentDialogProps {
+  departmentName: string;
+  departmentId: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const DeleteDepartmentDialog: React.FC<DeleteDepartmentDialogProps> = ({
+  departmentName,
+  departmentId,
+  isOpen,
+  onClose,
+}) => {
+  const { t } = useTranslation();
+  const [isDeleting, setIsDeleting] = useState(false);
+  const { deletePosition: deletePositionMutation, isDeleting: isMutationDeleting } = usePositions();
+
+  const handleDelete = async () => {
+    setIsDeleting(true);
+    try {
+      await deletePositionMutation({
+        id: departmentId,
+        successCallback: () => {
+          toast.success(t("department.deletedSuccessfully", "Department removed successfully"));
+          onClose();
+        },
+      });
+    } catch (error: any) {
+      // Handle error - the mutation will already show toast via hook
+      // Just close loading state
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <AlertDialog open={isOpen} onOpenChange={onClose}>
+      <AlertDialogContent className="max-w-md">
+        <AlertDialogHeader>
+          <div className="flex items-start gap-3">
+            <div className="flex-shrink-0 mt-0.5">
+              <AlertTriangle className="h-5 w-5 text-red-600 dark:text-red-400" />
+            </div>
+            <div className="flex-1">
+              <AlertDialogTitle className="text-lg font-semibold text-red-900 dark:text-red-100">
+                {t("department.deleteConfirm", "Delete Department?")}
+              </AlertDialogTitle>
+              <AlertDialogDescription className="mt-2 text-sm text-gray-700 dark:text-gray-300">
+                This will permanently delete <strong className="font-semibold text-gray-900 dark:text-gray-100">{departmentName}</strong> and
+                all its sub-items. This action cannot be undone.
+              </AlertDialogDescription>
+            </div>
+          </div>
+        </AlertDialogHeader>
+
+        <div className="bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800/50 rounded-lg p-3 my-2">
+          <p className="text-sm text-red-800 dark:text-red-200">
+            {t("department.deleteWarning", "Make sure all employees have been reassigned before deleting.")}
+          </p>
+        </div>
+
+        <AlertDialogFooter className="gap-2">
+          <AlertDialogCancel disabled={isDeleting || isMutationDeleting}>
+            {t("common.Cancel", "Cancel")}
+          </AlertDialogCancel>
+          <Button
+            variant="destructive"
+            onClick={handleDelete}
+            disabled={isDeleting || isMutationDeleting}
+            className="gap-2"
+          >
+            {(isDeleting || isMutationDeleting) && <Loader2 className="h-4 w-4 animate-spin" />}
+            {isDeleting || isMutationDeleting ? t("common.deleting", "Deleting...") : t("department.delete", "Delete")}
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/DeleteTeamMemberDialog.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/DeleteTeamMemberDialog.tsx
new file mode 100644
index 000000000..9460b73be
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/DeleteTeamMemberDialog.tsx
@@ -0,0 +1,74 @@
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import { Button } from "@/shared/common/ui/button";
+import { TeamMemberDto } from "@/user-management/dto/teamMember/teamMember";
+import { useEmployeePositions } from "@/user-management/hooks/useEmployeePostions";
+import { Loader2 } from "lucide-react";
+
+interface DeleteTeamMemberDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  departmentId: string;
+  departmentName: string;
+  teamMemberId: string;
+  teamMemberName: string;
+}
+
+export const DeleteTeamMemberDialog = ({
+  departmentId,
+  departmentName,
+  isOpen,
+  onClose,
+  teamMemberId,
+  teamMemberName,
+}: DeleteTeamMemberDialogProps) => {
+  if (!teamMemberId) return null;
+  const { setInactive, isDeActivatingUser } = useEmployeePositions();
+
+  const payload = {
+    employeeId: teamMemberId,
+    positionId: departmentId,
+  };
+  const onDelete = () => {
+    setInactive({
+      payload,
+      successCallback: onClose,
+    });
+  };
+  return (
+    <AlertDialog open={isOpen} onOpenChange={onClose}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            Remove team member from this position?
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            Are you sure you want to remove <strong>{teamMemberName}</strong> from this position? They will be marked as inactive for this position. This action can be reversed by reassigning them to the position later.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isDeActivatingUser}>
+            Cancel
+          </AlertDialogCancel>
+          <Button
+            variant="destructive"
+            onClick={onDelete}
+            disabled={isDeActivatingUser}
+          >
+            {isDeActivatingUser && (
+              <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+            )}
+            Remove
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/DeleteUnitDialog.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/DeleteUnitDialog.tsx
new file mode 100644
index 000000000..424689638
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/DeleteUnitDialog.tsx
@@ -0,0 +1,68 @@
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import { Button } from "@/shared/common/ui/button";
+import { Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import { useUnit } from "@/user-management/hooks/useUnit";
+import { useTranslation } from "react-i18next";
+
+interface DeleteUnitDialogProps {
+  unitName: string;
+  unitId: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const DeleteUnitDialog: React.FC<DeleteUnitDialogProps> = ({
+  unitName,
+  unitId,
+  isOpen,
+  onClose,
+}) => {
+  const { removeUnit, isDeleting } = useUnit();
+  const { t } = useTranslation();
+
+  const handleDelete = async () => {
+    try {
+      await removeUnit(unitId);
+      toast.success(t("archive.unitArchivedSuccess", "Unit archived successfully."));
+      onClose();
+    } catch {
+      // Hook's onError already routed through handleError; nothing to do here.
+    }
+  };
+
+  return (
+    <AlertDialog open={isOpen} onOpenChange={onClose}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            {t("archive.archiveUnitConfirm", "Are you sure you want to archive this unit?")}
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            {t("archive.archiveUnitDescription", "This action will archive the unit")} {" "}
+            <strong>{unitName}</strong>. {t("archive.archiveUnitCanBeRestored", "It can be restored later from the Archived Units section.")}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isDeleting}>{t("common.Cancel")}</AlertDialogCancel>
+          <Button
+            variant="destructive"
+            onClick={handleDelete}
+            disabled={isDeleting}
+          >
+            {isDeleting && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
+            {t("archive.archiveUnit", "Archive Unit")}
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/EditDepartmentDialog.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/EditDepartmentDialog.tsx
new file mode 100644
index 000000000..d4158bd2c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/EditDepartmentDialog.tsx
@@ -0,0 +1,42 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { EditDepartmentForm } from "../forms/EditDepartmentForm";
+import { PositionDto } from "@/user-management/dto/positions/positionDto";
+
+interface DepartmentDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  postions: PositionDto[];
+  departmentId: string;
+  departmentName: string;
+}
+
+export function EditDepartmentDialog({
+  isOpen,
+  onClose,
+  postions,
+  departmentId,
+  departmentName,
+}: DepartmentDialogProps) {
+  const handleSuccess = (departmentName: string) => {
+    onClose();
+  };
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Edit Department {departmentName}</DialogTitle>
+        </DialogHeader>
+        <EditDepartmentForm
+          departmentId={departmentId}
+          onSuccess={handleSuccess}
+          onCancel={onClose}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/EditUnitDialog.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/EditUnitDialog.tsx
new file mode 100644
index 000000000..4c6915de7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/EditUnitDialog.tsx
@@ -0,0 +1,62 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { Loader2 } from "lucide-react";
+import { EditUnitForm } from "../forms/EditUnitForm";
+import { UnitDto } from "@/user-management/dto/unit/unitDto";
+import { useUnit } from "@/user-management/hooks/useUnit";
+
+interface UnitDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  units: UnitDto[];
+  unitId: string;
+}
+
+export function EditUnitDialog({
+  isOpen,
+  onClose,
+  units,
+  unitId,
+}: UnitDialogProps) {
+  const handleSuccess = () => {
+    onClose();
+  };
+  const fromList = units?.find((p) => p.id === unitId);
+  // Related units (from /units/child-units/...) aren't in the top-level list,
+  // so fetch by id when we don't already have the full record.
+  const { getById } = useUnit();
+  const { data: byIdResp, isLoading } = getById(fromList ? "" : unitId);
+  const fetched = (byIdResp?.data ?? null) as UnitDto | null;
+  const currentUnit = fromList ?? fetched;
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="min-w-0 overflow-hidden sm:max-w-[425px]">
+        <DialogHeader className="min-w-0">
+          <DialogTitle className="max-w-full break-words pr-6 [overflow-wrap:anywhere]">
+            Edit Unit {currentUnit?.name?.en}
+          </DialogTitle>
+        </DialogHeader>
+        {!currentUnit ? (
+          <div className="flex justify-center py-6">
+            {isLoading ? (
+              <Loader2 className="h-5 w-5 animate-spin text-gray-500" />
+            ) : (
+              <span className="text-sm text-gray-500">Unit not found.</span>
+            )}
+          </div>
+        ) : (
+          <EditUnitForm
+            unit={currentUnit}
+            onSuccess={handleSuccess}
+            onCancel={onClose}
+          />
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/EmployeePositionsDialog.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/EmployeePositionsDialog.tsx
new file mode 100644
index 000000000..83bec6074
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/EmployeePositionsDialog.tsx
@@ -0,0 +1,216 @@
+import React, { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { Button } from "@/shared/common/ui/button";
+import { Badge } from "@/shared/common/ui/badge";
+import { AlertCircle, Trash2, Briefcase } from "lucide-react";
+import { t } from "i18next";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { deleteEmployeePosition } from "../../services/api/employeePositionsService";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+
+export interface EmployeePosition {
+  id: string;
+  employeeId: string;
+  position: {
+    id: string;
+    name: {
+      am: string;
+      en: string;
+    };
+  };
+}
+
+interface EmployeePositionsDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  employeeName: string;
+  positions: EmployeePosition[];
+  onPositionRemoved?: () => void;
+}
+
+export const EmployeePositionsDialog: React.FC<
+  EmployeePositionsDialogProps
+> = ({ isOpen, onClose, employeeName, positions, onPositionRemoved }) => {
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
+  const [positionToDelete, setPositionToDelete] = useState<EmployeePosition | null>(null);
+  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+  const localizedName = useLocalizedName();
+
+  const handleRemovePosition = async (position: EmployeePosition) => {
+    setLoading(true);
+    try {
+      await deleteEmployeePosition(position.id);
+      toast.success(t("positions.positionRemoved"), {
+        description: t("positions.employeeRemovedFromPosition", {
+          position: localizedName(position.position.name),
+        }),
+        duration: 4000,
+      });
+      setShowConfirmDialog(false);
+      setPositionToDelete(null);
+      
+      // Call callback to refresh positions list
+      if (onPositionRemoved) {
+        onPositionRemoved();
+      }
+    } catch (error: unknown) {
+      const errorMessage =
+        error instanceof Error ? error.message : "Unknown error";
+      
+      // Check if it's a "Referenced Entity does not exist" error
+      if (errorMessage.includes("Referenced Entity")) {
+        toast.error(t("positions.positionAlreadyRemoved"), {
+          description: t("positions.positionMayHaveBeenRemovedAlready"),
+          duration: 4000,
+        });
+        // Still close the dialog and refresh
+        setShowConfirmDialog(false);
+        setPositionToDelete(null);
+        if (onPositionRemoved) {
+          onPositionRemoved();
+        }
+      } else {
+        toast.error(t("positions.failedToRemovePosition"), {
+          description: errorMessage,
+          duration: 4000,
+        });
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleOpenConfirm = (position: EmployeePosition) => {
+    setPositionToDelete(position);
+    setShowConfirmDialog(true);
+  };
+
+  return (
+    <>
+      <Dialog open={isOpen} onOpenChange={onClose}>
+        <DialogContent className="sm:max-w-lg dark:bg-gray-800">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2 dark:text-white">
+              <Briefcase className="h-5 w-5 text-blue-600 dark:text-blue-400" />
+              {t("positions.employeePositions")}
+            </DialogTitle>
+          </DialogHeader>
+
+          <div className="py-4 space-y-4">
+            {/* Employee Name */}
+            <div className="px-4 py-3 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
+              <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">
+                {t("positions.employee")}
+              </p>
+              <p className="text-sm font-medium text-gray-800 dark:text-gray-200">
+                {employeeName}
+              </p>
+            </div>
+
+            {/* Positions List */}
+            {positions && positions.length > 0 ? (
+              <div className="space-y-3 max-h-96 overflow-y-auto">
+                {positions
+              .filter((position) => position && position.position && position.position.name)
+              .map((position) => (
+                  <div
+                    key={position.id}
+                    className="flex items-center justify-between p-4 rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700/50 hover:border-gray-300 dark:hover:border-gray-500 transition-colors">
+                    <div className="flex items-center gap-3 flex-1">
+                      <div className="p-2 rounded-lg bg-blue-100 dark:bg-blue-900/40 text-blue-600 dark:text-blue-400">
+                        <Briefcase className="h-4 w-4" />
+                      </div>
+                      <div className="min-w-0 flex-1">
+                        <p className="text-sm font-medium text-gray-800 dark:text-gray-200 truncate">
+                          {localizedName(position.position.name)}
+                        </p>
+                        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                          {t("positions.positionId")}: {position.id.slice(0, 8)}...
+                        </p>
+                      </div>
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleOpenConfirm(position)}
+                      className="ml-2 text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/20 dark:text-red-400 dark:hover:text-red-300"
+                      disabled={loading}>
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="flex flex-col items-center justify-center py-8 text-gray-500 dark:text-gray-400">
+                <AlertCircle className="h-12 w-12 mb-2 text-gray-300 dark:text-gray-600" />
+                <p className="text-sm font-medium">
+                  {t("positions.noPositions")}
+                </p>
+                <p className="text-xs mt-1 text-gray-400 dark:text-gray-500">
+                  {t("positions.employeeHasNoPositions")}
+                </p>
+              </div>
+            )}
+          </div>
+
+          <div className="flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-600">
+            <Button
+              variant="outline"
+              onClick={onClose}
+              className="dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700">
+              {t("common.close")}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* Confirmation Dialog for Deletion */}
+      <AlertDialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
+        <AlertDialogContent className="dark:bg-gray-800">
+          <AlertDialogHeader>
+            <AlertDialogTitle className="dark:text-white">
+              {t("positions.removeFromPosition")}
+            </AlertDialogTitle>
+            <AlertDialogDescription className="dark:text-gray-400">
+              {t("positions.confirmRemoveFromPosition", {
+                employee: employeeName,
+                position: positionToDelete
+                  ? localizedName(positionToDelete.position.name)
+                  : "",
+              })}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <div className="flex justify-end gap-3 pt-4">
+            <AlertDialogCancel className="dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:border-gray-600">
+              {t("common.cancel")}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() =>
+                positionToDelete && handleRemovePosition(positionToDelete)
+              }
+              disabled={loading}
+              className="bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-600">
+              {loading ? t("common.removing") : t("positions.remove")}
+            </AlertDialogAction>
+          </div>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/ManageUnitAdminDialog.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/ManageUnitAdminDialog.tsx
new file mode 100644
index 000000000..836a3b51d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/ManageUnitAdminDialog.tsx
@@ -0,0 +1,251 @@
+import { useState } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Loader2, Plus, ShieldCheck } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+
+import { Button } from "@/shared/common/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/common/ui/table";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { AssignedAdminsDto } from "@/shared/dto/organization/orgAdminsDto";
+import { AssignAdminDialog } from "@/super-admin/components/organizationAdmins/AssignAdminDialog";
+import { AdminRemoveConfirm } from "@/super-admin/components/organizationAdmins/RemoveAdminConfirm";
+import { fetchUnitAdminById } from "@/super-admin/services/api/organizationAdminService";
+import { removeUnitAdminRole } from "@/super-admin/services/api/userRoleService";
+
+interface ManageUnitAdminDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  organizationId: string;
+  unitId: string;
+}
+
+const normalizeAdmins = (data: unknown): AssignedAdminsDto[] => {
+  if (Array.isArray(data)) return data as AssignedAdminsDto[];
+
+  if (
+    data &&
+    typeof data === "object" &&
+    "items" in data &&
+    Array.isArray((data as { items?: unknown[] }).items)
+  ) {
+    return (data as { items: AssignedAdminsDto[] }).items;
+  }
+
+  return [];
+};
+
+export function ManageUnitAdminDialog({
+  isOpen,
+  onClose,
+  organizationId,
+  unitId,
+}: ManageUnitAdminDialogProps) {
+  const { t } = useTranslation();
+  const localizedName = useLocalizedName();
+  const queryClient = useQueryClient();
+  const [isAssignDialogOpen, setIsAssignDialogOpen] = useState(false);
+  const [removingUserId, setRemovingUserId] = useState<string | null>(null);
+
+  const {
+    data: admins = [],
+    isLoading,
+    isError,
+    refetch,
+  } = useQuery({
+    queryKey: ["unitAdmins", unitId],
+    queryFn: async () => {
+      const response = await fetchUnitAdminById(unitId, {
+        take: 300,
+        skip: 0,
+      });
+      return normalizeAdmins(response.data);
+    },
+    enabled: isOpen && !!unitId,
+    staleTime: 0,
+  });
+
+  const handleRemove = async (userId: string) => {
+    setRemovingUserId(userId);
+
+    try {
+      await removeUnitAdminRole({ unitId, userId });
+      await queryClient.invalidateQueries({
+        queryKey: ["unitAdmins", unitId],
+      });
+      toast.success(
+        t(
+          "organization.unitAdminRemovedSuccess",
+          "Unit admin removed successfully",
+        ),
+      );
+    } catch (error: any) {
+      toast.error(
+        t("organization.unitAdminRemoveFailed", "Failed to remove unit admin"),
+        {
+          description: error?.response?.data?.message,
+        },
+      );
+    } finally {
+      setRemovingUserId(null);
+    }
+  };
+
+  const handleAssigned = async () => {
+    setIsAssignDialogOpen(false);
+    await queryClient.invalidateQueries({
+      queryKey: ["unitAdmins", unitId],
+    });
+  };
+
+  return (
+    <>
+      <Dialog
+        open={isOpen}
+        onOpenChange={(open) => {
+          if (!open && !isAssignDialogOpen) onClose();
+        }}
+      >
+        <DialogContent className="sm:max-w-[850px]">
+          <DialogHeader>
+            <DialogTitle>
+              {t("contentManagement.manageUnitAdmin", "Manage Unit Admin")}
+            </DialogTitle>
+            <DialogDescription>
+              {t(
+                "organization.manageUnitAdminInstructions",
+                "View, add, or remove administrators assigned to this unit.",
+              )}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <h3 className="font-medium">
+                  {t("organization.currentUnitAdmins", "Current unit admins")}
+                </h3>
+                <p className="text-sm text-muted-foreground">
+                  {t(
+                    "organization.currentUnitAdminsDescription",
+                    "Users who can administer this unit.",
+                  )}
+                </p>
+              </div>
+              <Button onClick={() => setIsAssignDialogOpen(true)}>
+                <Plus className="mr-2 h-4 w-4" />
+                {t("organization.addAdmin", "Add admin")}
+              </Button>
+            </div>
+
+            <div className="rounded-md border">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t("organization.name", "Name")}</TableHead>
+                    <TableHead>{t("common.email", "Email")}</TableHead>
+                    <TableHead>{t("common.status", "Status")}</TableHead>
+                    <TableHead className="text-right">
+                      {t("common.actions", "Actions")}
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {isLoading ? (
+                    <TableRow>
+                      <TableCell colSpan={4} className="h-32 text-center">
+                        <Loader2 className="mx-auto h-6 w-6 animate-spin text-primary" />
+                      </TableCell>
+                    </TableRow>
+                  ) : isError ? (
+                    <TableRow>
+                      <TableCell colSpan={4} className="h-32 text-center">
+                        <div className="space-y-3">
+                          <p className="text-sm text-destructive">
+                            {t(
+                              "organization.errorLoadingAdmins",
+                              "Failed to load admins.",
+                            )}
+                          </p>
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            onClick={() => refetch()}
+                          >
+                            {t("organization.retry", "Retry")}
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ) : admins.length === 0 ? (
+                    <TableRow>
+                      <TableCell colSpan={4} className="h-32 text-center">
+                        <ShieldCheck className="mx-auto mb-2 h-7 w-7 text-muted-foreground" />
+                        <p className="text-sm text-muted-foreground">
+                          {t(
+                            "organization.noUnitAdminsAssigned",
+                            "No admins are assigned to this unit.",
+                          )}
+                        </p>
+                      </TableCell>
+                    </TableRow>
+                  ) : (
+                    admins.map((admin) => (
+                      <TableRow key={admin.id}>
+                        <TableCell className="font-medium">
+                          {localizedName(admin.name) || admin.username}
+                        </TableCell>
+                        <TableCell>{admin.email || "—"}</TableCell>
+                        <TableCell className="capitalize">
+                          {admin.status || "—"}
+                        </TableCell>
+                        <TableCell className="text-right">
+                          <AdminRemoveConfirm
+                            onConfirm={() => handleRemove(admin.id)}
+                            loading={removingUserId === admin.id}
+                          />
+                        </TableCell>
+                      </TableRow>
+                    ))
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={onClose}>
+              {t("common.close", "Close")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {isAssignDialogOpen && (
+        <AssignAdminDialog
+          isOpen={isAssignDialogOpen}
+          onClose={() => setIsAssignDialogOpen(false)}
+          onSuccess={handleAssigned}
+          organizationId={organizationId}
+          unitId={unitId}
+        />
+      )}
+    </>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/MoveDepartmentDialog.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/MoveDepartmentDialog.tsx
new file mode 100644
index 000000000..410715344
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/MoveDepartmentDialog.tsx
@@ -0,0 +1,43 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { MoveDepartmentForm } from "../forms/MoveDepartmentForm";
+
+interface DepartmentDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  organizationId: string;
+  unitId: string;
+  departmentId:string;
+}
+
+export function MoveDepartmentDialog({
+  isOpen,
+  onClose,
+  departmentId,
+  organizationId,
+  unitId,
+}: DepartmentDialogProps) {
+  const handleSuccess = (departmentName: string) => {
+    onClose();
+  };
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Move Department</DialogTitle>
+        </DialogHeader>
+        <MoveDepartmentForm
+          unitId={unitId}
+          organizationId={organizationId}
+          onSuccess={handleSuccess}
+          onCancel={onClose}
+          departmentId={departmentId}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/PendingUsersCard.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/PendingUsersCard.tsx
new file mode 100644
index 000000000..e616ac6e6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/PendingUsersCard.tsx
@@ -0,0 +1,82 @@
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { Check, X, ClipboardCheck } from "lucide-react";
+
+interface LocaleValidationDto {
+  am?: string;
+  en: string;
+}
+
+interface ApprovalCardProps {
+  id: string;
+  name: LocaleValidationDto;
+  unit?: LocaleValidationDto;
+  time: string;
+  onApprove: (id: string) => void;
+  onReject: (id: string) => void;
+  onClick: (id: string) => void;
+  isLoading?: boolean;
+}
+
+const ApprovalCard = ({
+  id,
+  name,
+  unit,
+  time,
+  onApprove,
+  onReject,
+  onClick,
+  isLoading,
+}: ApprovalCardProps) => {
+  const localizedName = useLocalizedName();
+
+  return (
+    <div
+      className="flex items-start gap-3 p-3 rounded-md border bg-yellow-50 border-yellow-300 hover:shadow-sm transition-all cursor-pointer"
+      onClick={() => onClick(id)}
+    >
+      {/* Icon */}
+      <div className="mt-1">
+        <ClipboardCheck className="w-5 h-5 text-yellow-600" />
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 min-w-0">
+        <h4 className="font-medium text-sm text-gray-900 break-all">
+          {localizedName(name as { am: string; en: string })}
+        </h4>
+
+        {unit && (
+          <p className="text-xs text-gray-600">
+            {localizedName(unit as { am: string; en: string })}
+          </p>
+        )}
+
+        <p className="text-[11px] text-gray-400 mt-1">{time}</p>
+      </div>
+
+      {/* Actions */}
+      <div
+        className="flex items-center gap-2"
+        onClick={(e) => e.stopPropagation()} // prevent card click
+      >
+        <button
+          onClick={() => onApprove(id)}
+          disabled={isLoading}
+          className="p-1.5 rounded-md bg-primary-100 hover:bg-primary-200 transition"
+        >
+          <Check className="w-4 h-4 text-primary-600" />
+        </button>
+
+        <button
+          onClick={() => onReject(id)}
+          disabled={isLoading}
+          className="p-1.5 rounded-md bg-red-100 hover:bg-red-200 transition"
+        >
+          <X className="w-4 h-4 text-red-600" />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ApprovalCard;
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/PermanentDeleteUnitDialog.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/PermanentDeleteUnitDialog.tsx
new file mode 100644
index 000000000..134b8e095
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/PermanentDeleteUnitDialog.tsx
@@ -0,0 +1,122 @@
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import { Button } from "@/shared/common/ui/button";
+import { Loader2, AlertTriangle } from "lucide-react";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { deleteUnit } from "@/user-management/services/api/unitService";
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+
+interface PermanentDeleteUnitDialogProps {
+  unitName: string;
+  unitId: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const PermanentDeleteUnitDialog: React.FC<PermanentDeleteUnitDialogProps> = ({
+  unitName,
+  unitId,
+  isOpen,
+  onClose,
+}) => {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const handleDelete = async () => {
+    setIsDeleting(true);
+    try {
+      await deleteUnit(unitId);
+      toast.success(t("archive.unitDeletedPermanently", "Unit permanently deleted"));
+      queryClient.invalidateQueries({ queryKey: ["unitList"] });
+      queryClient.invalidateQueries({ queryKey: ["unitChildren"] });
+      queryClient.invalidateQueries({ queryKey: ["archived-units"] });
+      onClose();
+    } catch (error: any) {
+      // Check if error is due to related entities (units or positions)
+      if (error?.response?.status === 400 && error?.response?.data?.message) {
+        const errorMessage = error?.response?.data?.message;
+        
+        // Check if it's a position-related error
+        if (errorMessage.includes("Referenced Entity") || errorMessage.includes("referenced")) {
+          toast.error(
+            t("archive.cannotDeleteUnitWithEntities", "Cannot delete unit with related positions. Please delete or reassign all positions first."),
+            {
+              description: t("archive.deleteRelatedEntitiesFirst", "Remove all related entities before attempting deletion.")
+            }
+          );
+        } else if (errorMessage.includes("position")) {
+          toast.error(
+            t("archive.cannotDeleteUnitWithPositions", "Cannot delete unit that has related positions. Please delete or reassign all positions first."),
+            {
+              description: t("archive.deleteRelatedEntitiesFirst", "Remove all related entities before attempting deletion.")
+            }
+          );
+        } else {
+          toast.error(
+            t("archive.cannotDeleteUnit", "Cannot delete unit"),
+            {
+              description: t("archive.deleteRelatedEntitiesFirst", "Remove all related entities before attempting deletion.")
+            }
+          );
+        }
+      } else {
+        toast.error(t("archive.deleteUnitFailed", "Failed to delete unit"));
+      }
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <AlertDialog open={isOpen} onOpenChange={onClose}>
+      <AlertDialogContent className="max-w-md">
+        <AlertDialogHeader>
+          <div className="flex items-start gap-3">
+            <div className="flex-shrink-0 mt-0.5">
+              <AlertTriangle className="h-5 w-5 text-red-600 dark:text-red-400" />
+            </div>
+            <div className="flex-1">
+              <AlertDialogTitle className="text-lg font-semibold text-red-900 dark:text-red-100">
+                {t("archive.permanentDeleteWarning", "Permanent Deletion")}
+              </AlertDialogTitle>
+              <AlertDialogDescription className="mt-2 text-sm text-gray-700 dark:text-gray-300">
+                {t("archive.deletePermanentlyDescription", "This will permanently delete the unit")} <strong className="font-semibold">{unitName}</strong>. {t("archive.cannotBeUndone", "This action cannot be undone.")}
+              </AlertDialogDescription>
+            </div>
+          </div>
+        </AlertDialogHeader>
+
+        <div className="bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800/50 rounded-md p-3 my-2">
+          <p className="text-sm text-red-800 dark:text-red-200">
+            {t("archive.permanentDeleteExplanation", "Once deleted, this unit cannot be recovered. Make sure all related positions have been removed first.")}
+          </p>
+        </div>
+
+        <AlertDialogFooter className="gap-2">
+          <AlertDialogCancel disabled={isDeleting} className="sm:w-auto">
+            {t("common.Cancel", "Cancel")}
+          </AlertDialogCancel>
+          <Button
+            variant="destructive"
+            onClick={handleDelete}
+            disabled={isDeleting}
+            className="gap-2"
+          >
+            {isDeleting && <Loader2 className="w-4 h-4 animate-spin" />}
+            {t("archive.deletePermanently", "Delete Permanently")}
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/ViewUsersDialog.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/ViewUsersDialog.tsx
new file mode 100644
index 000000000..dfbb5996d
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/ViewUsersDialog.tsx
@@ -0,0 +1,34 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/common/ui/dialog";
+import { ViewUsers } from "../ViewUsers";
+
+interface ViewUsersDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  unitId: string;
+  unitName?: string;
+}
+
+export function ViewUsersDialog({
+  isOpen,
+  onClose,
+  unitId,
+  unitName,
+}: ViewUsersDialogProps) {
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="sm:max-w-[800px] max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>
+            {unitName ? `Users in ${unitName}` : "Team Members"}
+          </DialogTitle>
+        </DialogHeader>
+        <ViewUsers unitId={unitId} onClose={onClose} />
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/AddDepartmentForm.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/AddDepartmentForm.tsx
new file mode 100644
index 000000000..d16745327
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/AddDepartmentForm.tsx
@@ -0,0 +1,181 @@
+import { useState } from "react";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import { Label } from "@/shared/common/ui/label";
+import { usePositions } from "@/user-management/hooks/usePosition";
+import { PositionPayload } from "@/user-management/services/api/positionService";
+import { toast } from "sonner";
+import { usePositionTypes } from "@/user-management/hooks/usePositionTypes";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { t } from "i18next";
+import i18n from "@/i18n";
+
+interface AddDepartmentFormProps {
+  unitId: string;
+  organizationId: string;
+  onSuccess: (departmentName: string) => void;
+  onCancel: () => void;
+}
+
+export function AddDepartmentForm({
+  unitId,
+  organizationId,
+  onSuccess,
+  onCancel,
+}: AddDepartmentFormProps) {
+  const { createPosition, isCreating } = usePositions();
+  const { commonPositionTypes, isLoading: isLoadingTypes } = usePositionTypes({
+    unitId,
+  });
+  const [nameEn, setNameEn] = useState("");
+  const [nameAm, setNameAm] = useState("");
+  const [key, setKey] = useState("");
+  const [positionTypeId, setPositionTypeId] = useState("");
+  const lang = i18n.language;
+  const [errors, setErrors] = useState<Partial<Record<string, string>>>({});
+
+  const validateForm = () => {
+    const newErrors: Record<string, string> = {};
+
+    if (!nameEn.trim())
+      newErrors.nameEn = t("organization.englishNameRequired");
+    if (!nameAm.trim())
+      newErrors.nameAm = t("organization.amharicNameRequired");
+    if (!key.trim()) newErrors.key = t("contentManagement.keyRequired");
+    if (!positionTypeId)
+      newErrors.positionTypeId = t("contentManagement.selectPosType");
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!validateForm()) {
+      toast.error(t("contentManagement.invalidMsg"));
+      return;
+    }
+
+    const payload: PositionPayload = {
+      name: {
+        en: nameEn.trim(),
+        am: nameAm.trim(),
+      },
+      key: key.trim().toLowerCase().replace(/\s+/g, "-"),
+      unitId,
+      organizationId,
+      positionTypeId,
+    };
+
+    createPosition({
+      payload,
+      successCallback: () => {
+        toast.success(t("contentManagement.success"), {
+          description: `${t("userIncoming.Department")} "${
+            lang === "en" ? nameEn : nameAm
+          }" ${t("contentManagement.msg")}`,
+        });
+        onSuccess(lang === "en" ? nameEn.trim() : nameAm.trim());
+      },
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="positionType">{t("organization.positionTypes")}</Label>
+        <Select
+          onValueChange={(value) => {
+            setPositionTypeId(value);
+            setErrors((prev) => ({ ...prev, positionTypeId: "" }));
+          }}
+          value={positionTypeId}
+          disabled={isLoadingTypes}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder={t("contentManagement.selectPosType")} />
+          </SelectTrigger>
+          <SelectContent className="max-h-60 overflow-y-auto">
+            {commonPositionTypes.map((type) => (
+              <SelectItem key={type.id} value={type.id}>
+                {lang === "en" ? type.name.en : type.name.am}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        {errors.positionTypeId && (
+          <p className="text-red-500 text-sm">{errors.positionTypeId}</p>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="nameEn">{t("organization.enterEnglishName")}</Label>
+        <Input
+          id="nameEn"
+          placeholder={t("organization.enterEnglishName")}
+          value={nameEn}
+          onChange={(e) => {
+            setNameEn(e.target.value);
+            setErrors((prev) => ({ ...prev, nameEn: "" }));
+          }}
+        />
+        {errors.nameEn && (
+          <p className="text-red-500 text-sm">{errors.nameEn}</p>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="nameAm">{t("organization.enterAmharicName")}</Label>
+        <Input
+          id="nameAm"
+          placeholder={t("organization.enterAmharicName")}
+          value={nameAm}
+          onChange={(e) => {
+            setNameAm(e.target.value);
+            setErrors((prev) => ({ ...prev, nameAm: "" }));
+          }}
+        />
+        {errors.nameAm && (
+          <p className="text-red-500 text-sm">{errors.nameAm}</p>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="key">{t("contentManagement.key")}</Label>
+        <Input
+          id="key"
+          placeholder="e.g. finance-department"
+          value={key}
+          onChange={(e) => {
+            setKey(e.target.value);
+            setErrors((prev) => ({ ...prev, key: "" }));
+          }}
+        />
+        {errors.key && <p className="text-red-500 text-sm">{errors.key}</p>}
+      </div>
+
+      <div className="flex justify-end gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={onCancel}
+          disabled={isCreating}
+        >
+          {t("common.Cancel")}
+        </Button>
+        <Button type="submit" disabled={isCreating}>
+          {isCreating
+            ? t("organization.adding")
+            : t("contentManagement.addDepartment")}
+        </Button>
+      </div>
+    </form>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/AddFromSubCityForm.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/AddFromSubCityForm.tsx
new file mode 100644
index 000000000..fe0c3a590
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/AddFromSubCityForm.tsx
@@ -0,0 +1,373 @@
+import { useEffect, useMemo, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Button } from "@/shared/common/ui/button";
+import { Label } from "@/shared/common/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { toast } from "sonner";
+import { AlertCircle, Loader2 } from "lucide-react";
+import { t } from "i18next";
+import { useUnit } from "@/user-management/hooks/useUnit";
+import { getOrganizations } from "@/shared/services/organizationsService";
+import {
+  getUnitList,
+  RelateUnitToUnitPayload,
+} from "@/user-management/services/api/unitService";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useAuth } from "@/shared/context/AuthContext";
+import { useGetOrganizationConfig } from "@/super-admin/hooks/useConfig";
+import { useOrgUnitTotalCount } from "@/user-management/hooks/useOrgUnitTotalCount";
+import { Name } from "../types";
+
+interface SubCityOrg {
+  id: string;
+  name: Name;
+}
+
+interface SubCityUnit {
+  id: string;
+  name: Name;
+}
+
+interface AddFromSubCityFormProps {
+  parentUnitId: string;
+  onSuccess: () => void;
+  onCancel: () => void;
+}
+
+export function AddFromSubCityForm({
+  parentUnitId,
+  onSuccess,
+  onCancel,
+}: AddFromSubCityFormProps) {
+  const localizedName = useLocalizedName();
+  const { user } = useAuth();
+  const organizationId =
+    user?.employee && user.employee.length > 0
+      ? user.employee[0].organizationId
+      : "";
+
+  const [selectedSubCityId, setSelectedSubCityId] = useState("");
+  const [selectedUnitId, setSelectedUnitId] = useState("");
+  const [error, setError] = useState("");
+
+  const { relateUnit, isRelating } = useUnit();
+
+  const { data: subCitiesResp, isLoading: isLoadingSubCities } = useQuery({
+    queryKey: ["organizationsFilter", "subcity"],
+    queryFn: () =>
+      getOrganizations({
+        organizationTypeKey: "subcity",
+        take: 1000,
+        skip: 0,
+      }),
+    staleTime: 60_000,
+  });
+
+  const subCities: SubCityOrg[] = useMemo(() => {
+    const items = subCitiesResp?.data?.items ?? subCitiesResp?.data ?? [];
+    return Array.isArray(items) ? items : [];
+  }, [subCitiesResp]);
+
+  const { data: unitsResp, isLoading: isLoadingUnits } = useQuery({
+    queryKey: ["unitList", selectedSubCityId],
+    queryFn: () => getUnitList(selectedSubCityId, { take: 1000, skip: 0 }),
+    enabled: !!selectedSubCityId,
+    staleTime: 0,
+  });
+
+  const subCityUnits: SubCityUnit[] = useMemo(() => {
+    const items = unitsResp?.data?.items ?? [];
+    return Array.isArray(items) ? items : [];
+  }, [unitsResp]);
+
+  // --- Capacity check (Manage Organization Configuration) ---
+  const { data: orgConfigResp, isLoading: isLoadingConfig } =
+    useGetOrganizationConfig(organizationId);
+
+  const capacity = useMemo<number | null>(() => {
+    const items = orgConfigResp?.data?.items ?? [];
+    if (!Array.isArray(items) || items.length === 0) return null;
+    const match =
+      items.find((it: any) => it?.organizationId === organizationId) ??
+      items[0];
+    const value = Number(match?.maximumNumberOfUnits);
+    return Number.isFinite(value) ? value : null;
+  }, [orgConfigResp, organizationId]);
+
+  const { total: currentCount, isLoading: isLoadingCurrentCount } =
+    useOrgUnitTotalCount(organizationId);
+
+  const isAtCapacity =
+    capacity !== null && capacity >= 0 && currentCount >= capacity;
+  const remainingSlots =
+    capacity !== null ? Math.max(capacity - currentCount, 0) : null;
+
+  useEffect(() => {
+    setSelectedUnitId("");
+  }, [selectedSubCityId]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!selectedSubCityId) {
+      setError(
+        t("contentManagement.subCityRequired", "Please select a sub city")
+      );
+      return;
+    }
+    if (!selectedUnitId) {
+      setError(t("contentManagement.unitRequired", "Please select a unit"));
+      return;
+    }
+    if (!parentUnitId) {
+      setError(
+        t("contentManagement.parentUnitMissing", "Parent unit is missing")
+      );
+      return;
+    }
+    if (capacity === null) {
+      setError(
+        t(
+          "contentManagement.noCapacityConfigured",
+          "No unit capacity configured for this organization. Ask the super admin to configure it in Manage Organization Configuration."
+        )
+      );
+      return;
+    }
+    if (isAtCapacity) {
+      setError(
+        t(
+          "contentManagement.capacityReached",
+          "Capacity limit reached. Configured maximum is {{max}}.",
+          { max: capacity ?? 0 }
+        )
+      );
+      return;
+    }
+
+    const payload: RelateUnitToUnitPayload = {
+      unitId: selectedUnitId,
+      newParentUnitId: parentUnitId,
+    };
+
+    try {
+      await relateUnit({
+        payload,
+        successCallback: () => {
+          toast.success(
+            t(
+              "contentManagement.unitRelatedSuccess",
+              "Unit related successfully"
+            )
+          );
+          onSuccess();
+        },
+      });
+    } catch {
+      // error handled by useUnit hook
+    }
+  };
+
+  const isCheckingCapacity = isLoadingConfig || isLoadingCurrentCount;
+  const isCapacityMissing = !isCheckingCapacity && capacity === null;
+  const formLocked = isCheckingCapacity || isCapacityMissing || isAtCapacity;
+  const submitDisabled =
+    !selectedSubCityId ||
+    !selectedUnitId ||
+    isRelating ||
+    formLocked;
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="flex flex-col gap-4 w-full min-w-0"
+    >
+      {/* Capacity status (configured by super admin) */}
+      <div
+        className={`rounded-md border px-3 py-2 text-sm ${
+          isCheckingCapacity
+            ? "border-gray-200 bg-gray-50 text-gray-600 dark:border-gray-700 dark:bg-gray-800/50 dark:text-gray-300"
+            : capacity === null
+            ? "border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-900/50 dark:bg-amber-950/30 dark:text-amber-300"
+            : isAtCapacity
+            ? "border-red-200 bg-red-50 text-red-700 dark:border-red-900/50 dark:bg-red-950/30 dark:text-red-300"
+            : "border-primary-200 bg-primary-50 text-primary-700 dark:border-primary-900/50 dark:bg-primary-950/30 dark:text-primary-300"
+        }`}
+      >
+        <div className="flex items-start gap-2">
+          {isCheckingCapacity ? (
+            <Loader2 className="h-4 w-4 mt-0.5 shrink-0 animate-spin" />
+          ) : (
+            <AlertCircle className="h-4 w-4 mt-0.5 shrink-0" />
+          )}
+          <div className="min-w-0 break-words flex-1">
+            {isCheckingCapacity ? (
+              <span>
+                {t(
+                  "contentManagement.checkingCapacity",
+                  "Checking configured capacity…"
+                )}
+              </span>
+            ) : capacity === null ? (
+              <span>
+                {t(
+                  "contentManagement.noCapacityConfigured",
+                  "No unit capacity configured for this organization. Ask the super admin to configure it in Manage Organization Configuration."
+                )}
+              </span>
+            ) : (
+              <div className="space-y-1">
+                <div className="font-medium">
+                  {t(
+                    "contentManagement.configuredUnitLimit",
+                    "Configured unit limit: {{max}}",
+                    { max: capacity }
+                  )}
+                </div>
+                <div className="flex flex-wrap gap-x-3 gap-y-0.5 text-xs opacity-90">
+                  <span>
+                    {t("contentManagement.linkedUnits", "Linked")}: {currentCount}
+                  </span>
+                  <span>
+                    {t("contentManagement.remainingSlots", "Remaining")}:{" "}
+                    {remainingSlots ?? 0}
+                  </span>
+                </div>
+                {isAtCapacity && (
+                  <div className="text-xs font-medium">
+                    {t(
+                      "contentManagement.capacityReachedShort",
+                      "Limit reached — cannot relate more units."
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-2 min-w-0">
+        <Label htmlFor="subCity" className="text-sm">
+          {t("contentManagement.selectSubCity", "Select Sub City")}
+        </Label>
+        <Select
+          value={selectedSubCityId}
+          onValueChange={(value) => {
+            setSelectedSubCityId(value);
+            setError("");
+          }}
+          disabled={isLoadingSubCities || formLocked}
+        >
+          <SelectTrigger id="subCity" className="w-full max-w-full">
+            <SelectValue
+              placeholder={
+                isLoadingSubCities
+                  ? t("organization.loading")
+                  : t("contentManagement.selectSubCity", "Select Sub City")
+              }
+            />
+          </SelectTrigger>
+          <SelectContent className="max-w-[var(--radix-select-trigger-width)]">
+            {isLoadingSubCities ? (
+              <div className="flex items-center justify-center px-2 py-3 text-sm text-gray-500">
+                <Loader2 className="w-4 h-4 animate-spin mr-2" />
+                {t("organization.loading")}
+              </div>
+            ) : subCities.length === 0 ? (
+              <div className="px-2 py-3 text-sm text-gray-500">
+                {t("contentManagement.noSubCities", "No sub cities found")}
+              </div>
+            ) : (
+              subCities.map((sc) => (
+                <SelectItem key={sc.id} value={sc.id}>
+                  <span className="block truncate">
+                    {localizedName(sc.name)}
+                  </span>
+                </SelectItem>
+              ))
+            )}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="flex flex-col gap-2 min-w-0">
+        <Label htmlFor="subCityUnit" className="text-sm">
+          {t("contentManagement.selectUnit", "Select Unit")}
+        </Label>
+        <Select
+          value={selectedUnitId}
+          onValueChange={(value) => {
+            setSelectedUnitId(value);
+            setError("");
+          }}
+          disabled={!selectedSubCityId || isLoadingUnits || formLocked}
+        >
+          <SelectTrigger id="subCityUnit" className="w-full max-w-full">
+            <SelectValue
+              placeholder={
+                !selectedSubCityId
+                  ? t(
+                      "contentManagement.selectSubCityFirst",
+                      "Select a sub city first"
+                    )
+                  : isLoadingUnits
+                  ? t("organization.loading")
+                  : t("contentManagement.selectUnit", "Select Unit")
+              }
+            />
+          </SelectTrigger>
+          <SelectContent className="max-w-[var(--radix-select-trigger-width)]">
+            {isLoadingUnits ? (
+              <div className="flex items-center justify-center px-2 py-3 text-sm text-gray-500">
+                <Loader2 className="w-4 h-4 animate-spin mr-2" />
+                {t("organization.loading")}
+              </div>
+            ) : subCityUnits.length === 0 ? (
+              <div className="px-2 py-3 text-sm text-gray-500">
+                {t("contentManagement.noUnit")}
+              </div>
+            ) : (
+              subCityUnits.map((u) => (
+                <SelectItem key={u.id} value={u.id}>
+                  <span className="block truncate">{localizedName(u.name)}</span>
+                </SelectItem>
+              ))
+            )}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {error && (
+        <p className="text-red-500 text-sm break-words">{error}</p>
+      )}
+
+      <div className="flex justify-end gap-2 pt-2">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={onCancel}
+          disabled={isRelating}
+        >
+          {t("common.Cancel")}
+        </Button>
+        <Button type="submit" disabled={submitDisabled}>
+          {isRelating ? (
+            <span className="flex items-center gap-2">
+              <Loader2 className="h-4 w-4 animate-spin" />
+              {t("organization.adding")}
+            </span>
+          ) : (
+            t("contentManagement.addFromSubCity", "Add From Sub City")
+          )}
+        </Button>
+      </div>
+    </form>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/AddSubDepartmentForm.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/AddSubDepartmentForm.tsx
new file mode 100644
index 000000000..044811125
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/AddSubDepartmentForm.tsx
@@ -0,0 +1,202 @@
+import { useState } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import { Label } from "@/shared/common/ui/label";
+import { usePositions } from "@/user-management/hooks/usePosition";
+import { PositionPayload } from "@/user-management/services/api/positionService";
+import { toast } from "sonner";
+import { usePositionTypes } from "@/user-management/hooks/usePositionTypes";
+import i18n from "@/i18n";
+import { t } from "i18next";
+import { useLocalizedName } from "@/shared/common/localizedName";
+
+interface AddSubDepartmentFormProps {
+  departmentId: string;
+  unitId: string;
+  organizationId: string;
+  departmentName: string;
+  onSuccess: (subDepartmentName: string) => void;
+  onCancel: () => void;
+}
+
+export function AddSubDepartmentForm({
+  departmentId,
+  departmentName,
+  organizationId,
+  unitId,
+  onSuccess,
+  onCancel,
+}: AddSubDepartmentFormProps) {
+  const { createPosition, isCreating } = usePositions();
+  const { commonPositionTypes, isLoading: isLoadingTypes } = usePositionTypes({
+    unitId,
+    params: {
+      take: 1000, // Fetch all position types
+      skip: 0,
+      orderBy: "createdAt:Desc",
+    },
+  });
+
+  const [nameEn, setNameEn] = useState("");
+  const [nameAm, setNameAm] = useState("");
+  const [key, setKey] = useState("");
+  const [positionTypeId, setPositionTypeId] = useState("");
+  const lang = i18n.language;
+  const [errors, setErrors] = useState<Partial<Record<string, string>>>({});
+
+  const validateForm = () => {
+    const newErrors: Record<string, string> = {};
+
+    if (!nameEn.trim())
+      newErrors.nameEn = t("organization.englishNameRequired");
+    if (!nameAm.trim())
+      newErrors.nameAm = t("organization.amharicNameRequired");
+    if (!key.trim()) newErrors.key = t("contentManagement.keyRequired");
+    if (!positionTypeId)
+      newErrors.positionTypeId = t("contentManagement.selectPosType");
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!validateForm()) {
+      toast.error(t("contentManagement.invalidMsg"));
+      return;
+    }
+
+    const payload: PositionPayload = {
+      name: {
+        en: nameEn.trim(),
+        am: nameAm.trim(),
+      },
+      key: key.trim().toLowerCase().replace(/\s+/g, "-"),
+      unitId: unitId,
+      organizationId: organizationId,
+      parentPositionId: departmentId,
+      positionTypeId,
+    };
+
+    createPosition({
+      payload,
+      successCallback: () => {
+        onSuccess(nameEn.trim());
+        toast.success(t("contentManagement.success"), {
+          description: `${t("contentManagement.subDep")} "${
+            lang === "en" ? nameEn : nameAm
+          }${t("contentManagement.msg")}`,
+        });
+      },
+    });
+  };
+const localizedName = useLocalizedName()
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="parentDepartment">
+          {t("contentManagement.parentDep")}
+        </Label>
+        <Input
+          id="parentDepartment"
+          value={departmentName}
+          disabled
+          className="bg-gray-50"
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="positionType">{t("organization.positionTypes")}</Label>
+        <Select
+          onValueChange={(value) => {
+            setPositionTypeId(value);
+            setErrors((prev) => ({ ...prev, positionTypeId: "" }));
+          }}
+          value={positionTypeId}
+          disabled={isLoadingTypes}>
+          <SelectTrigger>
+            <SelectValue placeholder={t("contentManagement.selectPosType")} />
+          </SelectTrigger>
+          <SelectContent className="max-h-60 overflow-y-auto">
+            {commonPositionTypes.map((type) => (
+              <SelectItem key={type.id} value={type.id}>
+                { localizedName(type.name)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        {errors.positionTypeId && (
+          <p className="text-red-500 text-sm">{errors.positionTypeId}</p>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="nameEn">{t("organization.enterEnglishName")}</Label>
+        <Input
+          id="nameEn"
+          placeholder={t("organization.enterEnglishName")}
+          value={nameEn}
+          onChange={(e) => {
+            setNameEn(e.target.value);
+            setErrors((prev) => ({ ...prev, nameEn: "" }));
+          }}
+        />
+        {errors.nameEn && (
+          <p className="text-red-500 text-sm">{errors.nameEn}</p>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="nameAm">{t("organization.enterAmharicName")}</Label>
+        <Input
+          id="nameAm"
+          placeholder={t("organization.enterAmharicName")}
+          value={nameAm}
+          onChange={(e) => {
+            setNameAm(e.target.value);
+            setErrors((prev) => ({ ...prev, nameAm: "" }));
+          }}
+        />
+        {errors.nameAm && (
+          <p className="text-red-500 text-sm">{errors.nameAm}</p>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="key">{t("contentManagement.key")}</Label>
+        <Input
+          id="key"
+          placeholder={t("contentManagement.key")}
+          value={key}
+          onChange={(e) => {
+            setKey(e.target.value);
+            setErrors((prev) => ({ ...prev, key: "" }));
+          }}
+        />
+        {errors.key && <p className="text-red-500 text-sm">{errors.key}</p>}
+      </div>
+
+      <div className="flex justify-end gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={onCancel}
+          disabled={isCreating}>
+          {t("common.Cancel")}
+        </Button>
+        <Button type="submit" disabled={isCreating}>
+          {isCreating
+            ? t("organization.adding")
+            : t("contentManagement.addSubdepartement")}
+        </Button>
+      </div>
+    </form>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/AddUnitForm.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/AddUnitForm.tsx
new file mode 100644
index 000000000..17bc267d7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/AddUnitForm.tsx
@@ -0,0 +1,251 @@
+import { useMemo, useState } from "react";
+import { AlertCircle, Loader2 } from "lucide-react";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import { Label } from "@/shared/common/ui/label";
+import { useUnit } from "@/user-management/hooks/useUnit";
+import { useGetOrganizationConfig } from "@/super-admin/hooks/useConfig";
+import { useOrgUnitTotalCount } from "@/user-management/hooks/useOrgUnitTotalCount";
+import { toast } from "sonner";
+import i18n from "@/i18n";
+import { t } from "i18next";
+
+interface AddUnitFormProps {
+  organizationId: string;
+  onSuccess: (unitName: string) => void;
+  onCancel: () => void;
+}
+
+export function AddUnitForm({
+  organizationId,
+  onSuccess,
+  onCancel,
+}: AddUnitFormProps) {
+  const [nameEn, setNameEn] = useState("");
+  const [nameAm, setNameAm] = useState("");
+  const [key, setKey] = useState("");
+  const [errors, setErrors] = useState<Partial<Record<string, string>>>({});
+  const lang = i18n.language;
+  const { createUnit, isCreating } = useUnit();
+
+  // --- Capacity check (Manage Organization Configuration) ---
+  const { data: orgConfigResp, isLoading: isLoadingConfig } =
+    useGetOrganizationConfig(organizationId || "");
+
+  const capacity = useMemo<number | null>(() => {
+    const items = orgConfigResp?.data?.items ?? [];
+    if (!Array.isArray(items) || items.length === 0) return null;
+    const match =
+      items.find((it: any) => it?.organizationId === organizationId) ??
+      items[0];
+    const value = Number(match?.maximumNumberOfUnits);
+    return Number.isFinite(value) ? value : null;
+  }, [orgConfigResp, organizationId]);
+
+  const { total: currentCount, isLoading: isLoadingCurrentCount } =
+    useOrgUnitTotalCount(organizationId);
+
+  const isCheckingCapacity = isLoadingConfig || isLoadingCurrentCount;
+  const isAtCapacity =
+    capacity !== null && capacity >= 0 && currentCount >= capacity;
+  const isCapacityMissing = !isCheckingCapacity && capacity === null;
+  const remainingSlots =
+    capacity !== null ? Math.max(capacity - currentCount, 0) : null;
+  const formLocked = isCheckingCapacity || isCapacityMissing || isAtCapacity;
+
+  const validateForm = () => {
+    const newErrors: Record<string, string> = {};
+    if (!nameEn.trim())
+      newErrors.nameEn = t("organization.englishNameRequired");
+    if (!nameAm.trim())
+      newErrors.nameAm = t("organization.amharicNameRequired");
+    if (!key.trim()) newErrors.key = t("contentManagement.keyRequired");
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (isCheckingCapacity) return;
+    if (isCapacityMissing) {
+      toast.error(
+        t(
+          "contentManagement.noCapacityConfigured",
+          "No unit capacity configured for this organization. Ask the super admin to configure it in Manage Organization Configuration."
+        )
+      );
+      return;
+    }
+    if (isAtCapacity) {
+      toast.error(
+        t(
+          "contentManagement.capacityReached",
+          "Capacity limit reached. Configured maximum is {{max}}.",
+          { max: capacity ?? 0 }
+        )
+      );
+      return;
+    }
+    if (!validateForm()) {
+      toast.error(t("contentManagement.invalidMsg"));
+      return;
+    }
+
+    const payload = {
+      organizationId,
+      key: key.trim().toLowerCase().replace(/\s+/g, "-"),
+      name: {
+        en: nameEn.trim(),
+        am: nameAm.trim(),
+      },
+    };
+
+    createUnit({
+      payload,
+      successCallback: () => {
+        toast.success(t("contentManagement.success"), {
+          description: `${t("contentManagement.unit")} "${
+            lang === "en" ? nameEn : nameAm
+          }" ${t("contentManagement.msg")}`,
+        });
+        onSuccess(nameEn.trim());
+      },
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      {/* Capacity status (configured by super admin) */}
+      <div
+        className={`rounded-md border px-3 py-2 text-sm ${
+          isCheckingCapacity
+            ? "border-gray-200 bg-gray-50 text-gray-600 dark:border-gray-700 dark:bg-gray-800/50 dark:text-gray-300"
+            : isCapacityMissing
+            ? "border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-900/50 dark:bg-amber-950/30 dark:text-amber-300"
+            : isAtCapacity
+            ? "border-red-200 bg-red-50 text-red-700 dark:border-red-900/50 dark:bg-red-950/30 dark:text-red-300"
+            : "border-primary-200 bg-primary-50 text-primary-700 dark:border-primary-900/50 dark:bg-primary-950/30 dark:text-primary-300"
+        }`}
+      >
+        <div className="flex items-start gap-2">
+          {isCheckingCapacity ? (
+            <Loader2 className="h-4 w-4 mt-0.5 shrink-0 animate-spin" />
+          ) : (
+            <AlertCircle className="h-4 w-4 mt-0.5 shrink-0" />
+          )}
+          <div className="min-w-0 break-words flex-1">
+            {isCheckingCapacity ? (
+              <span>
+                {t(
+                  "contentManagement.checkingCapacity",
+                  "Checking configured capacity…"
+                )}
+              </span>
+            ) : isCapacityMissing ? (
+              <span>
+                {t(
+                  "contentManagement.noCapacityConfigured",
+                  "No unit capacity configured for this organization. Ask the super admin to configure it in Manage Organization Configuration."
+                )}
+              </span>
+            ) : (
+              <div className="space-y-1">
+                <div className="font-medium">
+                  {t(
+                    "contentManagement.configuredUnitLimit",
+                    "Configured unit limit: {{max}}",
+                    { max: capacity }
+                  )}
+                </div>
+                <div className="flex flex-wrap gap-x-3 gap-y-0.5 text-xs opacity-90">
+                  <span>
+                    {t("contentManagement.linkedUnits", "Used")}: {currentCount}
+                  </span>
+                  <span>
+                    {t("contentManagement.remainingSlots", "Remaining")}:{" "}
+                    {remainingSlots ?? 0}
+                  </span>
+                </div>
+                {isAtCapacity && (
+                  <div className="text-xs font-medium">
+                    {t(
+                      "contentManagement.capacityReachedShort",
+                      "Limit reached — cannot create more units."
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="nameEn">{t("organization.enterEnglishName")}</Label>
+        <Input
+          id="nameEn"
+          placeholder={t("organization.enterEnglishName")}
+          value={nameEn}
+          disabled={formLocked}
+          onChange={(e) => {
+            setNameEn(e.target.value);
+            setErrors((prev) => ({ ...prev, nameEn: "" }));
+          }}
+        />
+        {errors.nameEn && (
+          <p className="text-red-500 text-sm">{errors.nameEn}</p>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="nameAm">{t("organization.enterAmharicName")}</Label>
+        <Input
+          id="nameAm"
+          placeholder={t("organization.enterAmharicName")}
+          value={nameAm}
+          disabled={formLocked}
+          onChange={(e) => {
+            setNameAm(e.target.value);
+            setErrors((prev) => ({ ...prev, nameAm: "" }));
+          }}
+        />
+        {errors.nameAm && (
+          <p className="text-red-500 text-sm">{errors.nameAm}</p>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="key">{t("contentManagement.key")}</Label>
+        <Input
+          id="key"
+          placeholder="e.g. finance-unit"
+          value={key}
+          disabled={formLocked}
+          onChange={(e) => {
+            setKey(e.target.value);
+            setErrors((prev) => ({ ...prev, key: "" }));
+          }}
+        />
+        {errors.key && <p className="text-red-500 text-sm">{errors.key}</p>}
+      </div>
+
+      <div className="flex justify-end gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={onCancel}
+          disabled={isCreating}
+        >
+          {t("common.Cancel")}
+        </Button>
+        <Button type="submit" disabled={isCreating || formLocked}>
+          {isCreating
+            ? t("organization.adding")
+            : t("contentManagement.addUnit")}
+        </Button>
+      </div>
+    </form>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/AddUserForm.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/AddUserForm.tsx
new file mode 100644
index 000000000..01793e7dd
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/AddUserForm.tsx
@@ -0,0 +1,152 @@
+import { useState } from "react";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import { Label } from "@/shared/common/ui/label";
+import { useToast } from "@/shared/common/ui/use-toast";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import i18n from "@/i18n";
+import { t } from "i18next";
+
+interface AddUserFormProps {
+  unitId: string;
+  onSuccess: () => void;
+  onCancel: () => void;
+}
+
+export function AddUserForm({ unitId, onSuccess, onCancel }: AddUserFormProps) {
+  const [formData, setFormData] = useState({
+    firstName: "",
+    lastName: "",
+    email: "",
+    role: "member",
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { toast } = useToast();
+  const lang = i18n.language;
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleRoleChange = (value: string) => {
+    setFormData((prev) => ({ ...prev, role: value }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (
+      !formData.firstName.trim() ||
+      !formData.lastName.trim() ||
+      !formData.email.trim()
+    ) {
+      toast({
+        title: "Error",
+        description: "All fields are required",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      // In a real application, this would be an API call
+      // For now, simulate API call with a timeout
+      await new Promise((resolve) => setTimeout(resolve, 500));
+
+      toast({
+        title: t("contentManagement.success"),
+        description: `${t("contentManagement.user")} ${formData.firstName} ${
+          formData.lastName
+        }${t("contentManagement.msg")}`,
+      });
+
+      onSuccess();
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "Failed to add user. Please try again.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="firstName">{t("contentManagement.firstName")}</Label>
+          <Input
+            id="firstName"
+            name="firstName"
+            placeholder={t("contentManagement.firstName")}
+            value={formData.firstName}
+            onChange={handleChange}
+            required
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="lastName">{t("contentManagement.lastName")}</Label>
+          <Input
+            id="lastName"
+            name="lastName"
+            placeholder={t("contentManagement.lastName")}
+            value={formData.lastName}
+            onChange={handleChange}
+            required
+          />
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="email">{t("organization.email")}</Label>
+        <Input
+          id="email"
+          name="email"
+          type="email"
+          placeholder={t("organization.email")}
+          value={formData.email}
+          onChange={handleChange}
+          required
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="role">Role</Label>
+        <Select value={formData.role} onValueChange={handleRoleChange}>
+          <SelectTrigger>
+            <SelectValue placeholder="Select a role" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="Director">Director</SelectItem>
+            <SelectItem value="Teamleader">Teamleader</SelectItem>
+            <SelectItem value="deputy">deputy</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="flex justify-end gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={onCancel}
+          disabled={isSubmitting}
+        >
+          {t("common.Cancel")}
+        </Button>
+        <Button type="submit" disabled={isSubmitting}>
+          {isSubmitting ? t("organization.adding") : t("organization.addUser")}
+        </Button>
+      </div>
+    </form>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/AddUserUnderDepartmentForm.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/AddUserUnderDepartmentForm.tsx
new file mode 100644
index 000000000..bd53aa501
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/AddUserUnderDepartmentForm.tsx
@@ -0,0 +1,230 @@
+import i18n from "@/i18n";
+import { isValidEthiopianPhone } from "@/record-management/common/editor/Utils";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import { Label } from "@/shared/common/ui/label";
+import { useEmployeePositions } from "@/user-management/hooks/useEmployeePostions";
+import { t } from "i18next";
+import { useState } from "react";
+import { toast } from "sonner";
+import { useUnitConfiguration } from "@/shared/hooks/useUnitConfiguration";
+
+interface AddUserUnderDepartmentFormProps {
+  unitId: string;
+  departmentId: string;
+  departmentName: string;
+  onSuccess: () => void;
+  onCancel: () => void;
+}
+
+export function AddUserUnderDepartmentForm({
+  unitId,
+  departmentId,
+  departmentName,
+  onSuccess,
+  onCancel,
+}: AddUserUnderDepartmentFormProps) {
+  const { invite, isInviting } = useEmployeePositions();
+  const { data: unitConfigData } = useUnitConfiguration(unitId, {
+    enabled: !!unitId,
+  });
+  const isApprovalRequiredForPositionChange =
+    unitConfigData?.data?.items?.[0]?.isApprovalRequiredForPositionChange ??
+    false;
+  const lang = i18n.language;
+  const [formData, setFormData] = useState({
+    positionId: departmentId,
+    username: "",
+    email: "",
+    phoneNumber: "",
+    name: {
+      am: "",
+      en: "",
+    },
+  });
+
+  const [errors, setErrors] = useState({
+    username: "",
+    email: "",
+    phoneNumber: "",
+    nameAm: "",
+    nameEn: "",
+  });
+
+  const handleChange = (field: string, value: string, lang?: "am" | "en") => {
+    if (field === "name" && lang) {
+      setFormData((prev) => ({
+        ...prev,
+        name: {
+          ...prev.name,
+          [lang]: value,
+        },
+      }));
+      setErrors((prev) => ({
+        ...prev,
+        [`name${lang.toUpperCase()}`]: "",
+      }));
+    } else {
+      setFormData((prev) => ({ ...prev, [field]: value }));
+      setErrors((prev) => ({ ...prev, [field]: "" }));
+    }
+  };
+
+  const validate = () => {
+    const newErrors = {
+      username: "",
+      email: "",
+      phoneNumber: "",
+      nameAm: "",
+      nameEn: "",
+    };
+
+    let valid = true;
+
+    if (!formData.username.trim()) {
+      newErrors.username =t("profile.usernameRequired");
+      valid = false;
+    }
+
+    if (!formData.email.trim()) {
+      newErrors.email = t("profile.emailRequired");
+      valid = false;
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+      newErrors.email = t("profile.validEmailFormat");
+      valid = false;
+    }
+
+    if (!formData.phoneNumber.trim()) {
+      newErrors.phoneNumber = t("profile.phoneRequired");
+      valid = false;
+    } else if (!isValidEthiopianPhone(formData.phoneNumber)) {
+      newErrors.phoneNumber =
+        t("profile.validPhoneFormat");
+      valid = false;
+    }
+
+    if (!formData.name.am.trim()) {
+      newErrors.nameAm = t("profile.amharicNameRequired");
+      valid = false;
+    }
+
+    if (!formData.name.en.trim()) {
+      newErrors.nameEn = t("profile.englishNameRequired");
+      valid = false;
+    }
+
+    setErrors(newErrors);
+    return valid;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!validate()) return;
+
+    invite({
+      payload: formData,
+      successCallback: () => {
+        const displayName = lang === "en" ? formData.name.en : formData.name.am;
+        if (isApprovalRequiredForPositionChange) {
+          toast.success(
+            t(
+              "contentManagement.positionChangeApprovalRequiredSuccess",
+              "Action completed successfully. Approval is required for position changes.",
+            ),
+            {
+              description: t(
+                "contentManagement.userInvitePendingApproval",
+                `User "${displayName}" has been invited and is pending approval for this department.`,
+              ),
+            },
+          );
+        } else {
+          toast.success("User invited", {
+            description: `User "${displayName}" has been added to the department.`,
+          });
+        }
+        onSuccess();
+      },
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div>
+        <Label>{t("organization.Position")}</Label>
+        <Input value={departmentName} disabled />
+      </div>
+
+      <div>
+        <Label>{t("organization.username")} *</Label>
+        <Input
+          value={formData.username}
+          onChange={(e) => handleChange("username", e.target.value)}
+        />
+        {errors.username && (
+          <p className="text-red-500 text-sm">{errors.username}</p>
+        )}
+      </div>
+
+      <div>
+        <Label>{t("organization.email")} *</Label>
+        <Input
+          type="email"
+          value={formData.email}
+          onChange={(e) => handleChange("email", e.target.value)}
+        />
+        {errors.email && <p className="text-red-500 text-sm">{errors.email}</p>}
+      </div>
+
+      <div>
+        <Label>{t("auth.phoneNumber")}</Label>
+        <Input
+          type="tel"
+          placeholder="0912345678 or +251912345678"
+          value={formData.phoneNumber}
+          onChange={(e) => handleChange("phoneNumber", e.target.value)}
+        />
+        {errors.phoneNumber && (
+          <p className="text-red-500 text-sm">{errors.phoneNumber}</p>
+        )}
+      </div>
+
+      <div>
+        <Label>{t("organization.enterAmharicName")}*</Label>
+        <Input
+          value={formData.name.am}
+          onChange={(e) => handleChange("name", e.target.value, "am")}
+        />
+        {errors.nameAm && (
+          <p className="text-red-500 text-sm">{errors.nameAm}</p>
+        )}
+      </div>
+
+      <div>
+        <Label>{t("organization.enterEnglishName")}*</Label>
+        <Input
+          value={formData.name.en}
+          onChange={(e) => handleChange("name", e.target.value, "en")}
+        />
+        {errors.nameEn && (
+          <p className="text-red-500 text-sm">{errors.nameEn}</p>
+        )}
+      </div>
+
+      <div className="flex justify-end gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={onCancel}
+          disabled={isInviting}
+        >
+          {t("common.Cancel")}
+        </Button>
+        <Button type="submit" disabled={isInviting}>
+          {isInviting ? t("organization.adding") : t("organization.addUser")}
+        </Button>
+      </div>
+    </form>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/AssignUserForm.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/AssignUserForm.tsx
new file mode 100644
index 000000000..69d39950f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/AssignUserForm.tsx
@@ -0,0 +1,362 @@
+import { useEffect, useMemo, useState } from "react";
+import { Button } from "@/shared/common/ui/button";
+import { Label } from "@/shared/common/ui/label";
+import { Input } from "@/shared/common/ui/input";
+import { Switch } from "@/shared/common/ui/switch";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { Search } from "lucide-react";
+import { useEmployees } from "@/user-management/hooks/useEmployees";
+import { useEmployeePositions } from "@/user-management/hooks/useEmployeePostions";
+import { useOrganizations } from "@/super-admin/hooks/useOrganizations";
+import { useUnit } from "@/user-management/hooks/useUnit";
+import { toast } from "sonner";
+import { AssignEmployeePayload } from "@/user-management/services/api/employeePositionsService";
+import { t } from "i18next";
+import i18n from "@/i18n";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useUnitConfiguration } from "@/shared/hooks/useUnitConfiguration";
+
+interface AssignUserFormProps {
+  unitId: string;
+  positionId: string;
+  positionName: string;
+  onSuccess: () => void;
+  onCancel: () => void;
+}
+
+export function AssignUserForm({
+  unitId,
+  positionId,
+  positionName,
+  onSuccess,
+  onCancel,
+}: AssignUserFormProps) {
+  const { assignEmployee, isAssigning } = useEmployeePositions();
+  const { handleError } = useErrorHandler(t);
+  const localizedName = useLocalizedName();
+
+  const [isAdvanced, setIsAdvanced] = useState(false);
+  const [selectedOrg, setSelectedOrg] = useState<string>("");
+  const [selectedUnit, setSelectedUnit] = useState<string>("");
+  const [selectedUser, setSelectedUser] = useState<string>("");
+  const [errors, setErrors] = useState<Partial<Record<string, string>>>({});
+  const [page, setPage] = useState(1);
+  const [searchQuery, setSearchQuery] = useState("");
+  const pageSize = 20;
+  const activeUnitId = isAdvanced ? selectedUnit : unitId;
+  const { data: unitConfigData } = useUnitConfiguration(unitId, {
+    enabled: !!unitId,
+  });
+  const isApprovalRequiredForPositionChange =
+    unitConfigData?.data?.items?.[0]?.isApprovalRequiredForPositionChange ??
+    false;
+
+  const { organizationsResponse, isLoading: isLoadingOrgs } = useOrganizations(
+    "Org",
+    {
+      take: 300,
+    },
+  );
+  const { data: unitsResponse, isLoading: isLoadingUnits } = useUnit().getList(
+    selectedOrg,
+    { take: 300, skip: 0 },
+  );
+  const { employeesResponse, isLoading } = useEmployees({
+    unitId: activeUnitId,
+  });
+
+  const allUsers = employeesResponse?.items || [];
+  const lang = i18n.language;
+
+  useEffect(() => {
+    setSelectedUser("");
+    setSearchQuery("");
+    setPage(1);
+    setErrors({});
+  }, [activeUnitId]);
+
+  useEffect(() => {
+    setSelectedUnit("");
+  }, [selectedOrg]);
+
+  useEffect(() => {
+    if (!isAdvanced) {
+      setSelectedOrg("");
+      setSelectedUnit("");
+    }
+  }, [isAdvanced]);
+
+  // Filter users based on search query
+  const filteredUsers = useMemo(() => {
+    if (!searchQuery.trim()) return allUsers;
+
+    return allUsers.filter((emp) => {
+      const name = lang === "en" ? emp.name?.en : emp.name?.am;
+      const email = emp.email || "";
+
+      return (
+        name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        email.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+    });
+  }, [allUsers, searchQuery, lang]);
+
+  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+    if (scrollTop + clientHeight >= scrollHeight - 5) {
+      if (page * pageSize < filteredUsers.length) {
+        setPage((prev) => prev + 1);
+      }
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (isAdvanced && (!selectedOrg || !selectedUnit)) {
+      toast.error(t("contentManagement.requiredFields"));
+      return;
+    }
+
+    if (!selectedUser) {
+      setErrors({ selectedUser: t("contentManagement.userRequired") });
+      toast.error(t("contentManagement.userRequiredMsg"));
+      return;
+    }
+
+    const user = selectedUser;
+    if (!user) {
+      toast.error(t("contentManagement.userError"));
+      return;
+    }
+
+    const payload: AssignEmployeePayload = {
+      positionId,
+      employeeId: user,
+    };
+
+    try {
+      await assignEmployee(payload);
+      toast.success(
+        isApprovalRequiredForPositionChange
+          ? t(
+              "contentManagement.positionChangeApprovalRequiredSuccess",
+              "User assigned successfully. Approval is required for position changes.",
+            )
+          : t("contentManagement.userSuccess"),
+      );
+      onSuccess();
+    } catch (error) {
+      handleError(error);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="flex items-center justify-between rounded-md border px-3 py-2">
+        <div className="space-y-0.5">
+          <Label htmlFor="advanced-assign">
+            {t("organization.advancedAssign", "Advanced")}
+          </Label>
+          <p className="text-xs text-muted-foreground">
+            {t(
+              "organization.selectOrganizationAndUnit",
+              "Select organization and unit before choosing a user",
+            )}
+          </p>
+        </div>
+        <Switch
+          id="advanced-assign"
+          checked={isAdvanced}
+          onCheckedChange={setIsAdvanced}
+          disabled={isAssigning}
+        />
+      </div>
+
+      {isAdvanced && (
+        <div className="space-y-4 border rounded-lg p-4 bg-muted/50">
+          <div className="space-y-2">
+            <Label htmlFor="organization">
+              {t("organization.organizations")}
+            </Label>
+            <Select
+              value={selectedOrg}
+              onValueChange={(value) => setSelectedOrg(value)}
+              disabled={isLoadingOrgs}
+            >
+              <SelectTrigger id="organization" className="w-full">
+                <SelectValue
+                  placeholder={t("organization.selectOrganization")}
+                />
+              </SelectTrigger>
+              <SelectContent
+                side="bottom"
+                sideOffset={4}
+                className="w-[var(--radix-select-trigger-width)]"
+              >
+                {organizationsResponse?.items?.map((org) => (
+                  <SelectItem key={org.id} value={org.id}>
+                    <span className="truncate">{localizedName(org.name)}</span>
+                  </SelectItem>
+                ))}
+                {!isLoadingOrgs &&
+                  organizationsResponse?.items?.length === 0 && (
+                    <SelectItem value="no-organizations" disabled>
+                      {t(
+                        "organization.noOrganizationsFound",
+                        "No organizations found",
+                      )}
+                    </SelectItem>
+                  )}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="unit">{t("organization.units")}</Label>
+            <Select
+              value={selectedUnit}
+              onValueChange={(value) => setSelectedUnit(value)}
+              disabled={!selectedOrg || isLoadingUnits}
+            >
+              <SelectTrigger id="unit" className="w-full">
+                <SelectValue
+                  placeholder={
+                    selectedOrg
+                      ? t("organization.selectUnit")
+                      : t("organization.selectOrganizationFirst")
+                  }
+                />
+              </SelectTrigger>
+              <SelectContent
+                side="bottom"
+                sideOffset={4}
+                className="w-[var(--radix-select-trigger-width)]"
+              >
+                {unitsResponse?.data?.items
+                  ?.filter((unit: any) => unit.id !== unitId)
+                  ?.map((unit: any) => (
+                    <SelectItem key={unit.id} value={unit.id}>
+                      <span className="truncate">
+                        {localizedName(unit.name)}
+                      </span>
+                    </SelectItem>
+                  ))}
+                {!isLoadingUnits &&
+                  unitsResponse?.data?.items?.filter(
+                    (unit: any) => unit.id !== unitId,
+                  )?.length === 0 && (
+                    <SelectItem value="no-units" disabled>
+                      {t("organization.noUnitsFound")}
+                    </SelectItem>
+                  )}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      )}
+
+      {/* User Select with Integrated Search */}
+      <div className="space-y-2">
+        <Label htmlFor="user">{t("contentManagement.selectUser")}</Label>
+        <Select
+          value={selectedUser}
+          onValueChange={(value) => {
+            setSelectedUser(value);
+            setErrors((prev) => ({ ...prev, selectedUser: "" }));
+          }}
+          disabled={isLoading || (isAdvanced && !selectedUnit)}
+        >
+          <SelectTrigger id="user">
+            <SelectValue placeholder={t("contentManagement.selectUser")} />
+          </SelectTrigger>
+          <SelectContent
+            style={{ maxHeight: "300px", overflowY: "auto" }}
+            onScroll={handleScroll}
+          >
+            {/* Search Input inside Dropdown */}
+            <div className="sticky top-0 z-10 bg-background p-2 border-b">
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
+                <Input
+                  type="text"
+                  placeholder={t("organization.searchUsers")}
+                  value={searchQuery}
+                  onChange={(e) => {
+                    e.stopPropagation();
+                    setSearchQuery(e.target.value);
+                    setPage(1); // Reset to first page when searching
+                  }}
+                  onClick={(e) => e.stopPropagation()}
+                  className="pl-10 h-9 text-sm"
+                />
+              </div>
+            </div>
+
+            {/* User List */}
+            {filteredUsers.length > 0 ? (
+              filteredUsers.slice(0, page * pageSize).map((emp) => (
+                <SelectItem key={emp.id} value={emp?.id}>
+                  <div className="flex flex-col">
+                    <span>
+                      {lang === "en"
+                        ? emp.name?.en
+                        : emp.name?.am || emp.email || "Unnamed User"}
+                    </span>
+                    {emp.email && (
+                      <span className="text-xs text-gray-500">{emp.email}</span>
+                    )}
+                  </div>
+                </SelectItem>
+              ))
+            ) : (
+              <div className="text-center py-4 text-sm text-muted-foreground">
+                {searchQuery
+                  ? t("organization.noUsersFound")
+                  : t("organization.noUsersAvailable")}
+              </div>
+            )}
+            {isLoading && (
+              <div className="text-center py-2 text-sm text-muted-foreground">
+                {t("contentManagement.loading")}
+              </div>
+            )}
+          </SelectContent>
+        </Select>
+        {errors.selectedUser && (
+          <p className="text-red-500 text-sm">{errors.selectedUser}</p>
+        )}
+      </div>
+
+      {/* Position Name */}
+      <div className="space-y-2">
+        <Label>{t("organization.Position")}</Label>
+        <div className="px-3 py-2 border rounded text-sm text-muted-foreground bg-muted">
+          {positionName || "Unknown"}
+        </div>
+      </div>
+
+      {/* Buttons */}
+      <div className="flex justify-end gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={onCancel}
+          disabled={isAssigning}
+        >
+          {t("common.Cancel")}
+        </Button>
+        <Button type="submit" disabled={isAssigning || isLoading}>
+          {isAssigning ? "Assigning..." : "Assign User"}
+        </Button>
+      </div>
+    </form>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/EditDepartmentForm.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/EditDepartmentForm.tsx
new file mode 100644
index 000000000..96a38f6c9
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/EditDepartmentForm.tsx
@@ -0,0 +1,232 @@
+import { useEffect, useState } from "react";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import { Label } from "@/shared/common/ui/label";
+import { usePositions } from "@/user-management/hooks/usePosition";
+import {
+  getPositionById,
+  PositionPayload,
+} from "@/user-management/services/api/positionService";
+import { toast } from "sonner";
+import { usePositionTypes } from "@/user-management/hooks/usePositionTypes";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { PositionDto } from "@/user-management/dto/positions/positionDto";
+import i18n from "@/i18n";
+import { t } from "i18next";
+import { useLocalizedName } from "@/shared/common/localizedName";
+
+interface EditDepartmentFormProps {
+  departmentId: string;
+  onSuccess: (departmentName: string) => void;
+  onCancel: () => void;
+}
+
+export function EditDepartmentForm({
+  departmentId,
+  onSuccess,
+  onCancel,
+}: EditDepartmentFormProps) {
+  const { updatePosition, isUpdating } = usePositions();
+
+  const [nameEn, setNameEn] = useState("");
+  const [nameAm, setNameAm] = useState("");
+  const [key, setKey] = useState("");
+  const [unitId, setUnitId] = useState("");
+  const [organizationId, setOrganizationId] = useState("");
+  const [positionTypeId, setPositionTypeId] = useState("");
+
+  const { commonPositionTypes, isLoadingCommonTypes } = usePositionTypes({
+    unitId,
+    params: {
+      take: 1000, // Fetch all position types
+      skip: 0,
+      orderBy: "createdAt:Desc",
+    },
+  });
+
+  const [errors, setErrors] = useState<Partial<Record<string, string>>>({});
+  const [isLoading, setIsLoading] = useState(true);
+  const lang = i18n.language;
+  const localizedName = useLocalizedName();
+
+  useEffect(() => {
+    const fetchDepartment = async () => {
+      try {
+        const data = await getPositionById(departmentId);
+        const res = data.data as PositionDto;
+        setNameEn(res.name.en);
+        setNameAm(res.name.am);
+        setKey(res.key);
+        setUnitId(res.unitId);
+        setOrganizationId(res.organizationId);
+        setPositionTypeId(res.positionTypeId);
+      } catch {
+        toast.error("Failed to fetch department");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchDepartment();
+  }, [departmentId]);
+
+  // Reset position type selection when unit changes
+  useEffect(() => {
+    if (unitId && commonPositionTypes.length > 0) {
+      // Find the current position type in the new list
+      const currentType = commonPositionTypes.find(
+        (type) => type.id === positionTypeId
+      );
+      if (!currentType) {
+        // If current position type is not in the new list, reset selection
+        setPositionTypeId("");
+      }
+    }
+  }, [unitId, commonPositionTypes, positionTypeId]);
+
+  const validateForm = () => {
+    const newErrors: Record<string, string> = {};
+    if (!nameEn.trim())
+      newErrors.nameEn = t("organization.englishNameRequired");
+    if (!nameAm.trim())
+      newErrors.nameAm = t("organization.amharicNameRequired");
+    if (!positionTypeId)
+      newErrors.positionTypeId = t("contentManagement.selectPosType");
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!validateForm()) {
+      toast.error(t("contentManagement.invalidMsg"));
+      return;
+    }
+
+    const payload: PositionPayload = {
+      name: {
+        en: nameEn.trim(),
+        am: nameAm.trim(),
+      },
+      key: key.trim().toLowerCase().replace(/\s+/g, "-"),
+      unitId,
+      organizationId,
+      positionTypeId,
+    };
+
+    updatePosition({
+      id: departmentId,
+      payload,
+      successCallback: () => {
+        toast.success(t("contentManagement.success"), {
+          description: `${t("contentManagement.department")} "${
+            lang === "en" ? nameEn : nameAm
+          }" ${t("contentManagement.updated")}`,
+        });
+        onSuccess(nameEn.trim());
+      },
+    });
+  };
+
+  if (isLoading) {
+    return (
+      <div className="text-sm text-muted-foreground">
+        {" "}
+        {t("contentManagement.loading")}
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="positionType">{t("organization.positionTypes")}</Label>
+        <Select
+          onValueChange={(value) => {
+            setPositionTypeId(value);
+            setErrors((prev) => ({ ...prev, positionTypeId: "" }));
+          }}
+          value={positionTypeId}
+          disabled={isLoadingCommonTypes}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder={t("contentManagement.selectPosType")} />
+          </SelectTrigger>
+          <SelectContent className="max-h-60 overflow-y-auto">
+            {commonPositionTypes.map((type) => (
+              <SelectItem key={type.id} value={type.id}>
+                {localizedName(type.name)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        {errors.positionTypeId && (
+          <p className="text-red-500 text-sm">{errors.positionTypeId}</p>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="nameEn">{t("organization.enterEnglishName")}</Label>
+        <Input
+          id="nameEn"
+          placeholder={t("organization.enterEnglishName")}
+          value={nameEn}
+          onChange={(e) => {
+            setNameEn(e.target.value);
+            setErrors((prev) => ({ ...prev, nameEn: "" }));
+          }}
+        />
+        {errors.nameEn && (
+          <p className="text-red-500 text-sm">{errors.nameEn}</p>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="nameAm">{t("organization.enterAmharicName")}</Label>
+        <Input
+          id="nameAm"
+          placeholder={t("organization.enterAmharicName")}
+          value={nameAm}
+          onChange={(e) => {
+            setNameAm(e.target.value);
+            setErrors((prev) => ({ ...prev, nameAm: "" }));
+          }}
+        />
+        {errors.nameAm && (
+          <p className="text-red-500 text-sm">{errors.nameAm}</p>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="key">{t("contentManagement.key")}</Label>
+        <Input
+          id="key"
+          placeholder="e.g. finance-department"
+          value={key}
+          disabled
+        />
+      </div>
+
+      <div className="flex justify-end gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={onCancel}
+          disabled={isUpdating}
+        >
+          {t("common.Cancel")}
+        </Button>
+        <Button type="submit" disabled={isUpdating}>
+          {isUpdating ? t("profile.updating") : t("delegation.update")}
+        </Button>
+      </div>
+    </form>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/EditUnitForm.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/EditUnitForm.tsx
new file mode 100644
index 000000000..d92feb7b7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/EditUnitForm.tsx
@@ -0,0 +1,124 @@
+import { useState } from "react";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import { Label } from "@/shared/common/ui/label";
+import { useUnit } from "@/user-management/hooks/useUnit";
+import { toast } from "sonner";
+import { UnitDto } from "@/user-management/dto/unit/unitDto";
+import { t } from "i18next";
+import i18n from "@/i18n";
+
+interface EditUnitFormProps {
+  unit: UnitDto;
+  onSuccess: (unitName: string) => void;
+  onCancel: () => void;
+}
+
+export function EditUnitForm({ unit, onSuccess, onCancel }: EditUnitFormProps) {
+  const [nameEn, setNameEn] = useState(unit.name.en);
+  const [nameAm, setNameAm] = useState(unit.name.am);
+  const [errors, setErrors] = useState<Partial<Record<string, string>>>({});
+  const lang = i18n.language;
+  const { updateUnit, isUpdating } = useUnit();
+
+  const validateForm = () => {
+    const newErrors: Record<string, string> = {};
+    if (!nameEn.trim())
+      newErrors.nameEn = t("organization.englishNameRequired");
+    if (!nameAm.trim())
+      newErrors.nameAm = t("organization.amharicNameRequired");
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const { id, key, organizationId, parentUnitId } = unit;
+
+    if (!validateForm()) {
+      toast.error(t("contentManagement.invalidMsg"));
+      return;
+    }
+
+    // PUT /api/units/{id} expects { name, key, organizationId, parentUnitId }.
+    const payload = {
+      name: {
+        en: nameEn.trim(),
+        am: nameAm.trim(),
+      },
+      key: key.trim().toLowerCase().replace(/\s+/g, "-"),
+      organizationId,
+      parentUnitId: parentUnitId ?? undefined,
+    };
+
+    updateUnit({
+      id,
+      payload,
+      successCallback: () => {
+        toast.success("Success", {
+          description: `${t("contentManagement.unit")} "${
+            lang === "en" ? nameEn : nameAm
+          }" ${t("contentManagement.updated")}`,
+        });
+        onSuccess(nameEn.trim());
+      },
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="min-w-0 max-w-full space-y-4 overflow-hidden">
+      <div className="min-w-0 max-w-full space-y-2">
+        <Label htmlFor="nameEn">{t("organization.enterEnglishName")}</Label>
+        <Input
+          id="nameEn"
+          placeholder={t("organization.enterEnglishName")}
+          value={nameEn}
+          className="max-w-full"
+          onChange={(e) => {
+            setNameEn(e.target.value);
+            setErrors((prev) => ({ ...prev, nameEn: "" }));
+          }}
+        />
+        {errors.nameEn && (
+          <p className="text-red-500 text-sm">{errors.nameEn}</p>
+        )}
+      </div>
+
+      <div className="min-w-0 max-w-full space-y-2">
+        <Label htmlFor="nameAm">{t("organization.enterEnglishName")}</Label>
+        <Input
+          id="nameAm"
+          placeholder={t("organization.enterEnglishName")}
+          value={nameAm}
+          className="max-w-full"
+          onChange={(e) => {
+            setNameAm(e.target.value);
+            setErrors((prev) => ({ ...prev, nameAm: "" }));
+          }}
+        />
+        {errors.nameAm && (
+          <p className="text-red-500 text-sm">{errors.nameAm}</p>
+        )}
+      </div>
+
+      <div className="min-w-0 max-w-full space-y-2">
+        <Label htmlFor="key">{t("contentManagement.key")}</Label>
+        <Input id="key" value={unit.key} className="max-w-full" />
+      </div>
+
+      <div className="flex justify-end gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={onCancel}
+          disabled={isUpdating}
+        >
+          {t("common.Cancel")}
+        </Button>
+        <Button type="submit" disabled={isUpdating}>
+          {isUpdating ? t("profile.updating") : t("delegation.update")}
+        </Button>
+      </div>
+    </form>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/MoveDepartmentForm.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/MoveDepartmentForm.tsx
new file mode 100644
index 000000000..e82bd3147
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/forms/MoveDepartmentForm.tsx
@@ -0,0 +1,213 @@
+import { useState, useMemo } from "react";
+import { Button } from "@/shared/common/ui/button";
+import { Label } from "@/shared/common/ui/label";
+import { Input } from "@/shared/common/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { toast } from "sonner";
+import {
+  useMovePosition,
+  usePositions,
+} from "@/user-management/hooks/usePosition";
+import { t } from "i18next";
+import i18n from "@/i18n";
+import { Search, X } from "lucide-react";
+import { useUnitConfiguration } from "@/shared/hooks/useUnitConfiguration";
+
+interface MoveDepartmentFormProps {
+  unitId: string;
+  organizationId: string;
+  departmentId: string;
+  onSuccess: (departmentId: string) => void;
+  onCancel: () => void;
+}
+
+export function MoveDepartmentForm({
+  unitId,
+  departmentId,
+  organizationId,
+  onSuccess,
+  onCancel,
+}: MoveDepartmentFormProps) {
+  const { usePositionListByUnitId } = usePositions({
+    take: 1000, // Increased to get more departments for search
+    skip: 0,
+  });
+  const [selectedDepartmentId, setSelectedDepartmentId] = useState("");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [error, setError] = useState("");
+  const {
+    data: departments,
+    isError,
+    isLoading,
+  } = usePositionListByUnitId(unitId, {
+    take: 1000,
+    skip: 0,
+  });
+  const lang = i18n.language;
+  const { mutate: moveDept, isPending } = useMovePosition();
+  const { data: unitConfigData } = useUnitConfiguration(unitId, {
+    enabled: !!unitId,
+  });
+  const isApprovalRequiredForPositionChange =
+    unitConfigData?.data?.items?.[0]?.isApprovalRequiredForPositionChange ??
+    false;
+
+  // Filter departments based on search query
+  const filteredDepartments = useMemo(() => {
+    if (!departments?.items) return [];
+
+    if (!searchQuery.trim()) return departments.items;
+
+    const query = searchQuery.toLowerCase();
+    return departments.items.filter((dept: any) => {
+      const nameEn = dept.name?.en?.toLowerCase() || "";
+      const nameAm = dept.name?.am?.toLowerCase() || "";
+      const description = dept.description?.toLowerCase() || "";
+
+      return (
+        nameEn.includes(query) ||
+        nameAm.includes(query) ||
+        description.includes(query)
+      );
+    });
+  }, [departments?.items, searchQuery]);
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!selectedDepartmentId) {
+      setError(t("addRecord.Select Department"));
+      toast.error(t("contentManagement.departmentRequired"));
+      return;
+    }
+    moveDept(
+      {
+        positionId: departmentId,
+        newParentId: selectedDepartmentId,
+      },
+      {
+        onSuccess: () => {
+          toast.success(
+            isApprovalRequiredForPositionChange
+              ? t(
+                  "contentManagement.positionChangeApprovalRequiredSuccess",
+                  "Department moved successfully. Approval is required for position changes.",
+                )
+              : t("contentManagement.departmentSuccess"),
+          );
+          onSuccess(selectedDepartmentId);
+        },
+      }
+    );
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="department"> {t("addRecord.Select Department")}</Label>
+        <Select
+          onValueChange={(value) => {
+            setSelectedDepartmentId(value);
+            setError("");
+          }}
+          value={selectedDepartmentId}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder={t("addRecord.Select Department")} />
+          </SelectTrigger>
+          <SelectContent className="p-0">
+            <div className="flex flex-col h-60">
+              {/* Fixed search header */}
+              <div className="flex-shrink-0 bg-white border-b p-2 z-10">
+                <div className="relative">
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+                  <Input
+                    placeholder="Search departments..."
+                    value={searchQuery}
+                    onChange={(e) => {
+                      setSearchQuery(e.target.value);
+                      setSelectedDepartmentId(""); // Clear selection when searching
+                    }}
+                    className="pl-10 pr-10 h-8"
+                  />
+                  {searchQuery && (
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      className="absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0"
+                      onClick={() => {
+                        setSearchQuery("");
+                        setSelectedDepartmentId("");
+                      }}
+                    >
+                      <X className="h-3 w-3" />
+                    </Button>
+                  )}
+                </div>
+              </div>
+
+              {/* Scrollable content area */}
+              <div className="flex-1 overflow-y-auto">
+                {isLoading ? (
+                  <div className="px-2 py-2">
+                    <p className="text-gray-500">
+                      {t("contentManagement.loading")}
+                    </p>
+                  </div>
+                ) : filteredDepartments.length === 0 ? (
+                  <div className="px-2 py-2">
+                    <p className="text-gray-500">
+                      {searchQuery
+                        ? "No departments found matching your search."
+                        : "No departments available."}
+                    </p>
+                  </div>
+                ) : (
+                  filteredDepartments.map((dept: any) => (
+                    <SelectItem key={dept.id} value={dept.id}>
+                      <div className="flex flex-col">
+                        <span className="font-medium">
+                          {lang === "en" ? dept.name.en : dept.name.am}
+                        </span>
+                        {dept.description && (
+                          <span className="text-xs text-gray-500">
+                            {dept.description}
+                          </span>
+                        )}
+                      </div>
+                    </SelectItem>
+                  ))
+                )}
+              </div>
+
+              {/* Fixed footer with results count */}
+              {searchQuery && filteredDepartments.length > 0 && (
+                <div className="flex-shrink-0 bg-gray-50 border-t px-2 py-1">
+                  <p className="text-xs text-gray-500">
+                    Found {filteredDepartments.length} department(s)
+                  </p>
+                </div>
+              )}
+            </div>
+          </SelectContent>
+        </Select>
+        {error && <p className="text-red-500 text-sm">{error}</p>}
+      </div>
+
+      <div className="flex justify-end gap-2">
+        <Button type="button" variant="outline" onClick={onCancel}>
+          {t("common.Cancel")}
+        </Button>
+        <Button type="submit" disabled={!selectedDepartmentId || isPending}>
+          {isPending ? "Moving..." : t("contentManagement.moveDepartement")}
+        </Button>
+      </div>
+    </form>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/handlers/useActionHandlers.ts b/apps/edr-freight-web/backoffice/src/user-management/userManagement/handlers/useActionHandlers.ts
new file mode 100644
index 000000000..c68edd9b1
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/handlers/useActionHandlers.ts
@@ -0,0 +1,265 @@
+import { useState } from "react";
+
+interface Entity {
+  id: string;
+  name: string;
+}
+
+interface Employee {
+  id: string;
+  name: string;
+  email?: string;
+  role?: string;
+  title?: string;
+  phone?: string;
+  inviteStatus?: "Pending" | "Accepted" | "Not Invited";
+}
+
+interface UseActionHandlersProps {
+  selectedOrgId: string;
+  selectedUnitId: string;
+  toast: (data: { title: string; description?: string }) => void;
+}
+
+export const useActionHandlers = ({
+  selectedOrgId,
+  selectedUnitId,
+  toast: externalToast,
+}: UseActionHandlersProps) => {
+  const [editUnitDialogOpen, setEditUnitDialogOpen] = useState(false);
+  const [manageUnitAdminDialogOpen, setManageUnitAdminDialogOpen] =
+    useState(false);
+  const [deleteUnitDialogOpen, setDeleteUnitDialogOpen] = useState(false);
+  const [permanentDeleteUnitDialogOpen, setPermanentDeleteUnitDialogOpen] = useState(false);
+  const [addFromSubCityDialogOpen, setAddFromSubCityDialogOpen] = useState(false);
+  const [addDepartmentDialogOpen, setAddDepartmentDialogOpen] = useState(false);
+  const [editDepartmentDialogOpen, setEditDepartmentDialogOpen] =
+    useState(false);
+  const [deleteDepartmentDialogOpen, setDeleteDepartmentDialogOpen] =
+    useState(false);
+    const [moveDepartmentDialogOpen, setMoveDepartmentDialogOpen] =
+      useState(false);
+  const [addSubDepartmentDialogOpen, setAddSubDepartmentDialogOpen] =
+    useState(false);
+  const [addUserUnderDepartmentOpen, setAddUserUnderDepartmentOpen] =
+    useState(false);
+  const [addUserDialogOpen, setAddUserDialogOpen] = useState(false);
+  const [viewUsersDialogOpen, setViewUsersDialogOpen] = useState(false);
+  const [assignUserDialogOpen, setAssignUserDialogOpen] = useState(false);
+  const [deleteTeamMemberDialog, setDeleteTeamMemberDialog] = useState(false);
+  const [currentDepartmentId, setCurrentDepartmentId] = useState("");
+  const [currentDepartmentName, setCurrentDepartmentName] = useState("");
+  const [currentTeamMemberId, setCurrentTeamMemberId] = useState("");
+  const [currentTeamMemberName, setCurrentTeamMemberName] = useState("");
+  const[deactivateTeamMemberDialog,setDeactivateTeamMemberDialog] = useState(false)
+  const [currentOrganizationId, setCurrentOrganizationId] = useState("");
+  const [currentUnitId, setCurrentUnitId] = useState("");
+  const [currentUnitName, setCurrentUnitName] = useState("");
+  const[currentUserId, setCurrentUserId] = useState("")
+
+  const toast = (data: { title: string; description?: string }) => {
+    externalToast(data);
+  };
+  return {
+    handleSelectOrganization: (id: string) => {
+      setCurrentOrganizationId(id);
+    },
+    unit: {
+      onAddDepartment: () => {
+        setCurrentOrganizationId(currentOrganizationId);
+        setCurrentUnitId(selectedUnitId);
+        setAddDepartmentDialogOpen(true);
+      },
+      onManageUnitAdmin: (unitId: string) => {
+        setCurrentOrganizationId(selectedOrgId);
+        setCurrentUnitId(unitId || selectedUnitId);
+        setManageUnitAdminDialogOpen(true);
+      },
+      onEditUnit: (unitId: string) => {
+        setCurrentUnitId(unitId || selectedUnitId);
+        setEditUnitDialogOpen(true);
+      },
+      onArchiveUnit: (departmentId: string, departmentName: string) => {
+        setCurrentUnitId(departmentId);
+        setCurrentUnitName(departmentName);
+        setDeleteUnitDialogOpen(true);
+      },
+      onDeleteUnit: (departmentId: string, departmentName: string) => {
+        setCurrentUnitId(departmentId);
+        setCurrentUnitName(departmentName);
+        setPermanentDeleteUnitDialogOpen(true);
+      },
+      onAddFromSubCity: (unitId: string) => {
+        setCurrentUnitId(unitId);
+        setAddFromSubCityDialogOpen(true);
+      },
+    },
+    department: {
+      onAddUserUnderDepartment: (
+        departmentId: string,
+        departmentName: string
+      ) => {
+        setCurrentDepartmentId(departmentId);
+        setCurrentDepartmentName(departmentName);
+        setAddUserUnderDepartmentOpen(true);
+      },
+      onEditDepartment: (departmentId: string, departmentName: string) => {
+        setCurrentDepartmentId(departmentId);
+        setCurrentDepartmentName(departmentName);
+        setEditDepartmentDialogOpen(true);
+      },
+      onDeleteDepartment: (departmentId: string, departmentName: string) => {
+        setCurrentDepartmentId(departmentId);
+        setCurrentDepartmentName(departmentName);
+        setDeleteDepartmentDialogOpen(true);
+      },
+      onMoveDepartment: (departmentId: string, departmentName: string) => {
+     
+        setCurrentDepartmentId(departmentId);
+        setCurrentDepartmentName(departmentName);
+        setMoveDepartmentDialogOpen(true);
+
+      },
+      onViewUsers: () => toast({ title: "View Users" }),
+      onAddSubDepartment: (departmentId: string, departmentName: string) => {
+        setCurrentDepartmentId(departmentId);
+        setCurrentOrganizationId(selectedOrgId);
+        setCurrentUnitId(selectedUnitId);
+        setCurrentDepartmentName(departmentName);
+        setAddSubDepartmentDialogOpen(true);
+      },
+      onAssignUser: (departmentId: string, departmentName: string) => {
+        setCurrentDepartmentId(departmentId);
+        setCurrentDepartmentName(departmentName);
+        setCurrentOrganizationId(selectedOrgId);
+        setCurrentUnitId(selectedUnitId);
+        setAssignUserDialogOpen(true);
+      },
+      onDelegate: () => toast({ title: "Delegate" }),
+    },
+    teamMember: {
+      onDeleteTeamMember: (
+        departmentId: string,
+        departmentName: string,
+        teamMemberId: string,
+        teamMemberName: string
+      ) => {
+        setCurrentDepartmentId(departmentId);
+        setCurrentDepartmentName(departmentName);
+        setDeleteTeamMemberDialog(true);
+        setCurrentTeamMemberId(teamMemberId);
+        setCurrentTeamMemberName(teamMemberName);
+      },
+      
+        onDeactivateTeamMember:(
+          userId:string,
+          teamMemberName: string
+        )=>{
+          setCurrentUserId(userId);
+          setCurrentTeamMemberName(teamMemberName)
+          setDeactivateTeamMemberDialog(true)
+        }
+    },
+    dialogs: {
+      manageUnitAdmin: {
+        isOpen: manageUnitAdminDialogOpen,
+        onClose: () => setManageUnitAdminDialogOpen(false),
+        organizationId: currentOrganizationId,
+        unitId: currentUnitId,
+      },
+      editUnit: {
+        isOpen: editUnitDialogOpen,
+        onClose: () => setEditUnitDialogOpen(false),
+        unitId: currentUnitId,
+      },
+      deleteUnit: {
+        isOpen: deleteUnitDialogOpen,
+        onClose: () => setDeleteUnitDialogOpen(false),
+        unitId: currentUnitId,
+        unitName: currentUnitName,
+      },
+      permanentDeleteUnit: {
+        isOpen: permanentDeleteUnitDialogOpen,
+        onClose: () => setPermanentDeleteUnitDialogOpen(false),
+        unitId: currentUnitId,
+        unitName: currentUnitName,
+      },
+      addFromSubCity: {
+        isOpen: addFromSubCityDialogOpen,
+        onClose: () => setAddFromSubCityDialogOpen(false),
+        parentUnitId: currentUnitId,
+      },
+      department: {
+        isOpen: addDepartmentDialogOpen,
+        onClose: () => setAddDepartmentDialogOpen(false),
+        organizationId: currentOrganizationId,
+        unitId: currentUnitId,
+      },
+      editDepartment: {
+        isOpen: editDepartmentDialogOpen,
+        onClose: () => setEditDepartmentDialogOpen(false),
+        departmentId: currentDepartmentId,
+        departmentName: currentDepartmentName,
+      },
+      deleteDepartment: {
+        isOpen: deleteDepartmentDialogOpen,
+        onClose: () => setDeleteDepartmentDialogOpen(false),
+        departmentId: currentDepartmentId,
+        departmentName: currentDepartmentName,
+      },
+      moveDepartment: {
+        isOpen: moveDepartmentDialogOpen,
+        onClose: () => setMoveDepartmentDialogOpen(false),
+        departmentId: currentDepartmentId,
+        departmentName: currentDepartmentName,
+      },
+      userUnderDepartment: {
+        isOpen: addUserUnderDepartmentOpen,
+        onClose: () => setAddUserUnderDepartmentOpen(false),
+        unitId: selectedUnitId,
+        departmentId: currentDepartmentId,
+        departmentName: currentDepartmentName,
+      },
+      subDepartment: {
+        isOpen: addSubDepartmentDialogOpen,
+        onClose: () => setAddSubDepartmentDialogOpen(false),
+        departmentId: currentDepartmentId,
+        departmentName: currentDepartmentName,
+        organizationId: currentOrganizationId,
+        unitId: currentUnitId,
+      },
+      user: {
+        unitId: currentUnitId,
+        isOpen: addUserDialogOpen,
+        onClose: () => setAddUserDialogOpen(false),
+      },
+      viewUsers: {
+        unitId: currentUnitId,
+        isOpen: viewUsersDialogOpen,
+        onClose: () => setViewUsersDialogOpen(false),
+      },
+      assignUser: {
+        isOpen: assignUserDialogOpen,
+        onClose: () => setAssignUserDialogOpen(false),
+        departmentId: currentDepartmentId,
+        departmentName: currentDepartmentName,
+        organizationId: currentOrganizationId,
+        unitId: currentUnitId,
+      },
+      deleteTeamMember: {
+        isOpen: deleteTeamMemberDialog,
+        onClose: () => setDeleteTeamMemberDialog(false),
+        departmentId: currentDepartmentId,
+        departmentName: currentDepartmentName,
+        teamMemberId: currentTeamMemberId,
+        teamMemberName: currentTeamMemberName,
+      },
+      deactivateTeamMember:{
+        isOpen: deactivateTeamMemberDialog,
+        onClose: ()=> setDeactivateTeamMemberDialog(false),
+        userId: currentUserId,
+        teamMemberName: currentTeamMemberName
+      }
+    },
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/handlers/useSelectionHandlers.ts b/apps/edr-freight-web/backoffice/src/user-management/userManagement/handlers/useSelectionHandlers.ts
new file mode 100644
index 000000000..4d7c855f0
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/handlers/useSelectionHandlers.ts
@@ -0,0 +1,91 @@
+import { useState } from "react";
+import type { Entity, Name } from "../types";
+import { useQueryClient } from "@tanstack/react-query";
+
+export interface UseSelectionHandlersResult {
+  selectedOrgId: string;
+  selectedUnitId: string;
+  selectedDepartmentId: string;
+  selectedDepartmentName: string;
+  breadcrumb: Entity[];
+  handleSelectOrganization: (id: string) => void;
+  handleSelectUnit: (id: string, units: Entity[]) => void;
+  handleSelectDepartment: (id: string, departments: Entity[]) => void;
+}
+
+export const useSelectionHandlers = (
+  organizations: Entity[],
+  localizedName: (name: Name) => string
+): UseSelectionHandlersResult => {
+  const queryClient = useQueryClient();
+  const [selectedOrgId, setSelectedOrgId] = useState("");
+  const [selectedUnitId, setSelectedUnitId] = useState("");
+  const [selectedDepartmentId, setSelectedDepartmentId] = useState("");
+  const [selectedDepartmentName, setSelectedDepartmentName] = useState("");
+
+  const [breadcrumb, setBreadcrumb] = useState<Entity[]>([]);
+
+  const handleSelectOrganization = (orgId: string) => {
+    queryClient.invalidateQueries({ queryKey: ["unitList"] });
+
+    setSelectedOrgId(orgId);
+    setSelectedUnitId("");
+    setSelectedDepartmentId("");
+
+    const org = organizations.find((o) => o.id === orgId);
+    if (org) {
+      setBreadcrumb([{ id: org.id, name: org.name }]);
+    }
+  };
+
+  const handleSelectUnit = (unitId: string, units: Entity[]) => {
+    queryClient.invalidateQueries({ queryKey: ["positionHierarchy"] });
+
+    setSelectedUnitId(unitId);
+    setSelectedDepartmentId("");
+
+    const unit = units.find((u) => u.id === unitId);
+    const org = organizations.find((o) => o.id === selectedOrgId);
+    if (unit && org) {
+      setBreadcrumb([
+        { id: org.id, name: org.name },
+        { id: unit.id, name: unit.name },
+      ]);
+    }
+  };
+
+  const handleSelectDepartment = (
+    departmentId: string,
+    departments: Entity[]
+  ) => {
+    queryClient.invalidateQueries({
+      queryKey: ["positionEmployees"],
+    });
+
+    setSelectedDepartmentId(departmentId);
+
+    const department = departments.find((d) => d.id === departmentId);
+    const unit = breadcrumb.find((b) => b.id === selectedUnitId);
+    const org = breadcrumb.find((b) => b.id === selectedOrgId);
+    department?.name &&
+      setSelectedDepartmentName(localizedName(department?.name) || "");
+    if (department && unit && org) {
+      setBreadcrumb([
+        { id: org.id, name: org.name },
+        { id: unit.id, name: unit.name },
+        { id: department.id, name: department.name },
+      ]);
+    }
+  };
+
+  return {
+    selectedOrgId,
+    selectedUnitId,
+    selectedDepartmentId,
+    selectedDepartmentName,
+    breadcrumb,
+    handleSelectOrganization,
+    handleSelectUnit,
+    handleSelectDepartment,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/hooks/useDepartmentsData.ts b/apps/edr-freight-web/backoffice/src/user-management/userManagement/hooks/useDepartmentsData.ts
new file mode 100644
index 000000000..b604c92a1
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/hooks/useDepartmentsData.ts
@@ -0,0 +1,53 @@
+import { useState, useEffect } from "react";
+import { Name } from "../types";
+import { usePositions } from "@/user-management/hooks/usePosition";
+import { PositionDto } from "@/user-management/dto/positions/positionDto";
+
+interface UseDepartmentsData {
+  departments: PositionEntity[];
+  isLoading: boolean;
+  setDepartments: (departments: PositionEntity[]) => void;
+  positions: PositionDto[];
+}
+
+export interface PositionEntity {
+  id: string;
+  name: Name;
+  parentId?: string | null;
+  children?: PositionEntity[];
+}
+
+export const mapPositionDtoToEntity = (
+  position: PositionDto
+): PositionEntity => {
+  return {
+    id: position.id,
+    name: position.name, // or position.name.am for Armenian
+    parentId: position.parentPositionId,
+    ...(position.subPositions.length > 0 && {
+      children: position.subPositions.map(mapPositionDtoToEntity),
+    }),
+  };
+};
+
+export const useDepartmentsData = (unitId: string): UseDepartmentsData => {
+  const [departments, setDepartments] = useState<PositionEntity[]>([]);
+  const [positions, setPositions] = useState<PositionDto[]>([]);
+
+  const { usePositionHierarchy } = usePositions();
+
+  const { data, isLoading } = usePositionHierarchy(unitId);
+
+  useEffect(() => {
+    if (data) {
+      const positions = data as PositionDto[];
+      const mappedPositions: PositionEntity[] = positions.map(
+        mapPositionDtoToEntity
+      );
+      setPositions(positions);
+      setDepartments(mappedPositions);
+    }
+  }, [data]);
+
+  return { departments, isLoading, setDepartments, positions };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/hooks/useEmployeesData.ts b/apps/edr-freight-web/backoffice/src/user-management/userManagement/hooks/useEmployeesData.ts
new file mode 100644
index 000000000..5523806a4
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/hooks/useEmployeesData.ts
@@ -0,0 +1,31 @@
+import { useState, useEffect } from "react";
+import { usePositions } from "@/user-management/hooks/usePosition";
+import { TeamMemberDto } from "@/user-management/dto/teamMember/teamMember";
+
+interface UseEmployeesData {
+  employees: TeamMemberDto[];
+  isLoading: boolean;
+  setEmployees: (employees: TeamMemberDto[]) => void;
+  refetch?: () => Promise<void>;
+}
+
+export const useEmployeesData = (positionId: string): UseEmployeesData => {
+  const [employees, setEmployees] = useState<TeamMemberDto[]>([]);
+
+  const { useEmployeesUnderPosition } = usePositions();
+  const { data, isLoading, refetch } = useEmployeesUnderPosition(positionId);
+
+  useEffect(() => {
+    if (data) {
+      setEmployees(data.data as TeamMemberDto[]);
+    }
+  }, [data]);
+
+  const refetchEmployees = async () => {
+    if (refetch) {
+      await refetch();
+    }
+  };
+
+  return { employees, isLoading, setEmployees, refetch: refetchEmployees };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/hooks/useOrganizationsData.ts b/apps/edr-freight-web/backoffice/src/user-management/userManagement/hooks/useOrganizationsData.ts
new file mode 100644
index 000000000..944a0dc49
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/hooks/useOrganizationsData.ts
@@ -0,0 +1,22 @@
+import { useMyAdminOrganizations, OrgAdminOrganization } from "@/user-management/hooks/useOrgAdminOrganizations";
+import { Entity } from "../types";
+
+interface UseOrganizationsData {
+  organizations: Entity[];
+  isLoading: boolean;
+}
+
+export const useOrganizationsData = ({
+  currentOrgId: _currentOrgId,
+}: {
+  currentOrgId?: string;
+}): UseOrganizationsData => {
+  const { organizations: adminOrgs, isLoading } = useMyAdminOrganizations();
+
+  const organizations: Entity[] = adminOrgs.map((item: OrgAdminOrganization) => ({
+    id: item.id,
+    name: item.name,
+  }));
+
+  return { organizations, isLoading };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/hooks/usePendingUsersHook.ts b/apps/edr-freight-web/backoffice/src/user-management/userManagement/hooks/usePendingUsersHook.ts
new file mode 100644
index 000000000..5e6891029
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/hooks/usePendingUsersHook.ts
@@ -0,0 +1,83 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useAuthUser } from "@/shared/hooks/useAuthUser";
+import {
+  approvePendingEmployees,
+  fetchCurrentEmployees,
+  rejectPendingEmployees,
+  Params,
+} from "@/record-management/services/api/employeesService";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+
+export enum EUserStatus {
+  PENDING = "pending",
+  ADJUSTED = "adjusted",
+  SUBMITTED = "submitted",
+  ACCEPTED = "accepted",
+  REJECTED = "rejected",
+}
+
+const FIVE_MIN = 5 * 60 * 1000;
+
+export const usePendingUsers = (params: Params) => {
+  const { userDetails } = useAuthUser();
+  const unitId = userDetails?.employee?.[0]?.unitId ?? null;
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+  const { handleError } = useErrorHandler(t);
+
+  // Fetch pending users
+  const {
+    data: pendingUsers = { count: 0, items: [] },
+    isLoading: loadingPendingUsers,
+    error: pendingUsersError,
+  } = useQuery({
+    queryKey: ["pendingEmployees", unitId, params],
+    queryFn: () =>
+      fetchCurrentEmployees(
+        { ...params, userStatus: EUserStatus.PENDING },
+        unitId!
+      ),
+    enabled: !!unitId,
+    staleTime: FIVE_MIN,
+  });
+
+  // Approve mutation with toast notifications
+  const approveMutation = useMutation({
+    mutationFn: async (id: string) => {
+      if (!id) throw new Error("Employee ID is missing");
+      await approvePendingEmployees(id);
+    },
+    onSuccess: () => {
+      toast.success("Employee approved successfully");
+      queryClient.invalidateQueries({ queryKey: ["pendingEmployees"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  // Reject mutation with toast notifications
+  const rejectMutation = useMutation({
+    mutationFn: async (id: string) => {
+      if (!id) throw new Error("Employee ID is missing");
+      await rejectPendingEmployees(id);
+    },
+    onSuccess: () => {
+      toast.success("Employee rejected successfully");
+      queryClient.invalidateQueries({ queryKey: ["pendingEmployees"] });
+    },
+    onError: (error) => {
+      handleError(error);
+    },
+  });
+
+  return {
+    pendingUsers,
+    loadingPendingUsers,
+    pendingUsersError,
+    approveMutation,
+    rejectMutation,
+  };
+};
\ No newline at end of file
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/hooks/usePositionsData.ts b/apps/edr-freight-web/backoffice/src/user-management/userManagement/hooks/usePositionsData.ts
new file mode 100644
index 000000000..baecdf0ac
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/hooks/usePositionsData.ts
@@ -0,0 +1,46 @@
+import { useState, useEffect } from "react";
+import { Entity } from "../types";
+
+interface Position extends Entity {
+  type: string;
+  employeeCount: number;
+  title: string;
+}
+
+interface UsePositionsData {
+  positions: Position[];
+  isLoading: boolean;
+}
+
+export const usePositionsData = (departmentId: string): UsePositionsData => {
+  const [positions, setPositions] = useState<Position[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setIsLoading(true);
+      if (!departmentId) {
+        setPositions([]);
+        setIsLoading(false);
+        return;
+      }
+      await new Promise((r) => setTimeout(r, 500));
+      setPositions([
+        {
+          id: `${departmentId}-pos1`,
+          name: {
+            am: "Leader in Amharic",
+            en: "Leader",
+          },
+          type: "Leader",
+          employeeCount: 1,
+          title: "Leader",
+        },
+      ]);
+      setIsLoading(false);
+    };
+    fetchData();
+  }, [departmentId]);
+
+  return { positions, isLoading };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/hooks/useUnitsData.ts b/apps/edr-freight-web/backoffice/src/user-management/userManagement/hooks/useUnitsData.ts
new file mode 100644
index 000000000..5e38177a2
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/hooks/useUnitsData.ts
@@ -0,0 +1,90 @@
+import { useMemo } from "react";
+
+import { useAuth } from "@/shared/context/AuthContext";
+import { useMyAdminUnits } from "@/user-management/hooks/useOrgAdminOrganizations";
+import { useUnit } from "@/user-management/hooks/useUnit";
+import { UnitDto } from "@/user-management/dto/unit/unitDto";
+import { Entity } from "../types";
+
+interface UseUnitsData {
+  units: Entity[];
+  fetchedUnits: UnitDto[];
+  isLoading: boolean;
+  setUnits: (units: Entity[]) => void;
+}
+
+interface UnitsParam {
+  take: number;
+  skip: number;
+}
+
+const normalizeName = (
+  name: string | { am?: string; en?: string },
+): Entity["name"] => {
+  if (typeof name === "string") {
+    return { am: name, en: name };
+  }
+
+  const fallback = name.en || name.am || "";
+  return {
+    am: name.am || fallback,
+    en: name.en || fallback,
+  };
+};
+
+const dedupeById = <T extends { id: string }>(items: T[]) => {
+  const map = new Map<string, T>();
+
+  items.forEach((item) => {
+    if (!item?.id || map.has(item.id)) return;
+    map.set(item.id, item);
+  });
+
+  return Array.from(map.values());
+};
+
+export const useUnitsData = (
+  organizationId: string,
+  params: UnitsParam,
+): UseUnitsData => {
+  const { user } = useAuth();
+  const isOrganizationAdmin =
+    user?.roles?.some((role) => role.key === "organization_admin") ?? false;
+
+  const { units: adminUnits, isLoading: isAdminUnitsLoading } =
+    useMyAdminUnits(organizationId, !isOrganizationAdmin);
+  const { data: allUnitsResponse, isLoading: isAllUnitsLoading } =
+    useUnit().getList(organizationId, params, isOrganizationAdmin);
+
+  const fetchedUnits = useMemo(
+    () => {
+      const sourceUnits = isOrganizationAdmin
+        ? (allUnitsResponse?.data?.items ?? [])
+        : adminUnits;
+
+      return dedupeById(sourceUnits as UnitDto[]);
+    },
+    [adminUnits, allUnitsResponse, isOrganizationAdmin],
+  );
+
+  const units = useMemo<Entity[]>(
+    () =>
+      fetchedUnits.map((unit) => ({
+        id: unit.id,
+        name: normalizeName(unit.name),
+      })),
+    [fetchedUnits],
+  );
+
+  // Kept for backwards compatibility. Units are derived from query data.
+  const setUnits = (_: Entity[]) => {};
+
+  return {
+    units,
+    fetchedUnits,
+    isLoading: isOrganizationAdmin
+      ? isAllUnitsLoading
+      : isAdminUnitsLoading,
+    setUnits,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/lists/DepartmentList.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/lists/DepartmentList.tsx
new file mode 100644
index 000000000..28396f074
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/lists/DepartmentList.tsx
@@ -0,0 +1,248 @@
+import { cn } from "@/super-admin/lib/utils";
+import { DepartmentActions } from "../actions/DepartmentActions";
+import { useState } from "react";
+import { Entity, Name } from "../types";
+import {
+  ChevronDown,
+  ChevronRight,
+  Dot,
+  Users,
+  UserPlus,
+  FolderPlus,
+  UserCog,
+  Loader2,
+  FolderX,
+} from "lucide-react";
+import { PositionDto } from "@/user-management/dto/positions/positionDto";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { t } from "i18next";
+
+interface Department {
+  id: string;
+  name: Name;
+  positions?: Position[];
+  children?: Department[];
+  isExpanded?: boolean;
+  parentDepartmentId?: string;
+  userCount?: number;
+}
+
+interface Position {
+  id: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  isExpanded?: boolean;
+}
+
+interface DepartmentListProps {
+  unitId: string;
+  selectedDepartmentId: string;
+  onSelectDepartment: (departmentId: string, departments: Entity[]) => void;
+  departments: Department[];
+  positions: PositionDto[];
+  isLoading: boolean;
+  searchQuery?: string;
+  onAddUser?: (departmentId: string, departmentName: string) => void;
+  onViewUsers?: (departmentId: string) => void;
+  onAddPosition?: (departmentId: string, positionType: string) => void;
+  onAddSubDepartment?: (departmentId: string, departmentName: string) => void;
+  onDelegate?: (departmentId: string) => void;
+  onAssignUser?: (departmentId: string, departmentName: string) => void;
+  onEditDepartment?: (departmentId: string, departmentName: string) => void;
+  onDeleteDepartment?: (departmentId: string, departmentName: string) => void;
+  onArchiveDepartment?: (departmentId: string, departmentName: string) => void;
+  onMoveDepartment?: (departmentId: string, departmentName: string) => void;
+}
+
+export const DepartmentList = ({
+  unitId,
+  selectedDepartmentId,
+  onSelectDepartment,
+  departments = [],
+  positions,
+  isLoading = false,
+  searchQuery = "",
+  onAddUser,
+  onViewUsers,
+  onAddPosition,
+  onAddSubDepartment,
+  onEditDepartment,
+  onDeleteDepartment,
+  onArchiveDepartment,
+  onDelegate,
+  onAssignUser,
+  onMoveDepartment,
+}: DepartmentListProps) => {
+  const [hoveredId, setHoveredId] = useState<string | null>(null);
+  const [expandedState, setExpandedState] = useState<Record<string, boolean>>(
+    {}
+  );
+  const localizedName = useLocalizedName();
+
+  // Filter departments based on search query
+  const filterDepartments = (depts: Department[]): Department[] => {
+    if (!searchQuery) return depts;
+
+    return depts
+      .filter((dept) => {
+        const name = localizedName(dept.name);
+        const matchesName = name
+          .toLowerCase()
+          .includes(searchQuery.toLowerCase());
+
+        // Also check if any child departments match
+        const hasMatchingChildren =
+          dept.children && dept.children.length > 0
+            ? filterDepartments(dept.children).length > 0
+            : false;
+
+        return matchesName || hasMatchingChildren;
+      })
+      .map((dept) => ({
+        ...dept,
+        children: dept.children ? filterDepartments(dept.children) : undefined,
+      }));
+  };
+
+  const filteredDepartments = filterDepartments(departments);
+  const toggleExpand = (id: string) => {
+    setExpandedState((prev) => ({
+      ...prev,
+      [id]: !prev[id],
+    }));
+  };
+
+  const renderDepartment = (dept: Department, level = 0) => {
+    const isSelected = dept.id === selectedDepartmentId;
+    const isHovered = hoveredId === dept.id;
+    const isExpanded = expandedState[dept.id] ?? dept.isExpanded;
+    const departmentName = localizedName(dept.name);
+    const hasChildren =
+      (dept.children?.length ?? 0) > 0 || (dept.positions?.length ?? 0) > 0;
+
+    return (
+      <div
+        key={dept.id}
+        className={cn("flex flex-col gap-1 group", level > 0 && "ml-4")}
+      >
+        <div
+          className={cn(
+            "flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700",
+            isSelected && "bg-gray-100 dark:bg-gray-700",
+            !isSelected && "text-gray-800 dark:text-gray-200"
+          )}
+          onClick={() => onSelectDepartment(dept.id, [])}
+        >
+          <div className="flex min-w-0 flex-1 items-center gap-2">
+            {hasChildren ? (
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  toggleExpand(dept.id);
+                }}
+                className="w-4 h-4 flex shrink-0 items-center justify-center"
+              >
+                {isExpanded ? (
+                  <ChevronDown className="w-4 h-4" />
+                ) : (
+                  <ChevronRight className="w-4 h-4" />
+                )}
+              </button>
+            ) : (
+              <Dot className="w-4 h-4 shrink-0" />
+            )}
+            <span className="min-w-0 flex-1 truncate" title={departmentName}>
+              {departmentName}
+            </span>
+          </div>
+          <DepartmentActions
+            department={dept}
+            positions={positions}
+            onAddUser={onAddUser}
+            onViewUsers={onViewUsers}
+            onAddPosition={onAddPosition}
+            onAddSubDepartment={onAddSubDepartment}
+            onDelegate={onDelegate}
+            onAssignUser={onAssignUser}
+            onEditDepartment={onEditDepartment}
+            onDeleteDepartment={onDeleteDepartment}
+            onArchiveDepartment={onArchiveDepartment}
+            onMoveDepartment={onMoveDepartment}
+          />
+        </div>
+        {isExpanded && hasChildren && (
+          <div>
+            {dept.children?.map((child) => renderDepartment(child, level + 1))}
+            {dept.positions?.map((pos) => {
+              const positionName = pos.name.am || pos.name.en;
+              return (
+                <div
+                  key={pos.id}
+                  className={cn(
+                    "flex items-center gap-2 text-sm py-1 pl-8 border-l-2 border-primary-100 dark:border-primary-800 ml-4 text-gray-800 dark:text-gray-200",
+                    expandedState[pos.id] ? "bg-blue-50 dark:bg-blue-900/20" : "hover:bg-blue-50 dark:hover:bg-blue-900/20"
+                  )}
+                  onClick={() => toggleExpand(pos.id)}
+                >
+                  <Dot className="w-4 h-4 shrink-0 text-gray-400 dark:text-gray-500" />
+                  <span className="min-w-0 flex-1 truncate" title={positionName}>
+                    {positionName}
+                  </span>
+                  {isHovered && (
+                    <div className="flex shrink-0 gap-2 pr-2">
+                      <UserPlus
+                        className="w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onAddUser?.(pos.id, pos.name.en);
+                        }}
+                      />
+                      <FolderPlus
+                        className="w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onAddPosition?.(pos.id, "sub");
+                        }}
+                      />
+                      <UserCog
+                        className="w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onDelegate?.(pos.id);
+                        }}
+                      />
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className="flex flex-col gap-1 min-h-[400px]">
+      {isLoading ? (
+        <div className="flex justify-center items-center h-full gap-2 text-gray-500 dark:text-gray-400">
+          <Loader2 className="w-4 h-4 animate-spin" />
+          <p>{t("organization.loading")}</p>
+        </div>
+      ) : filteredDepartments.length > 0 ? (
+        filteredDepartments.map((dept) => renderDepartment(dept))
+      ) : (
+        <div className="flex flex-col items-center justify-center h-full gap-2 text-gray-400 dark:text-gray-500">
+          <FolderX className="w-6 h-6" />
+          <p className="text-sm">
+            {searchQuery
+              ? t("search.noResults")
+              : t("userIncoming.No Department")}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/lists/OrganizationList.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/lists/OrganizationList.tsx
new file mode 100644
index 000000000..fec331346
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/lists/OrganizationList.tsx
@@ -0,0 +1,128 @@
+import { cn } from "@/super-admin/lib/utils";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { t } from "i18next";
+import { useState } from "react";
+import { MoreHorizontal, Plus } from "lucide-react";
+import { Button } from "@/shared/common/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/shared/common/ui/dropdown-menu";
+
+interface Organization {
+  id: string;
+  name: { am: string; en: string };
+  units?: any[];
+  isExpanded?: boolean;
+}
+
+interface OrganizationListProps {
+  selectedOrgId: string;
+  onSelectOrganization: (orgId: string) => void;
+  organizations: Organization[];
+  isLoading: boolean;
+  searchQuery?: string;
+  onCreateUnit?: (orgId: string) => void;
+  canCreateUnitForOrg?: (orgId: string) => boolean;
+}
+
+export const OrganizationList = ({
+  selectedOrgId,
+  onSelectOrganization,
+  organizations = [],
+  isLoading = false,
+  searchQuery = "",
+  onCreateUnit,
+  canCreateUnitForOrg,
+}: OrganizationListProps) => {
+  const localizedName = useLocalizedName();
+  const [openMenuId, setOpenMenuId] = useState<string | null>(null);
+
+  const filteredOrganizations = organizations.filter((org) => {
+    if (!searchQuery) return true;
+    const name = localizedName(org.name);
+    return name.toLowerCase().includes(searchQuery.toLowerCase());
+  });
+
+  return (
+    <div className="flex flex-col gap-2 min-h-[400px]">
+      {isLoading ? (
+        <div className="flex justify-center items-center h-full text-gray-500 dark:text-gray-400">
+          <p>{t("organization.loading")}</p>
+        </div>
+      ) : filteredOrganizations.length > 0 ? (
+        filteredOrganizations.map((org) => {
+          const canCreate = canCreateUnitForOrg
+            ? canCreateUnitForOrg(org.id)
+            : false;
+          return (
+            <div
+              key={org.id}
+              className={cn(
+                "flex items-center justify-between p-2 rounded-md cursor-pointer group",
+                org.id === selectedOrgId
+                  ? "bg-primary-50 text-primary-700 dark:bg-primary-900/30 dark:text-primary-300"
+                  : "hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-primary-900/30 dark:hover:text-primary-300 text-gray-800 dark:text-gray-200",
+              )}
+              onClick={() => onSelectOrganization(org.id)}
+            >
+              <div className="flex-1">
+                <span
+                  className={cn(
+                    "text-sm",
+                    org.id === selectedOrgId ? "font-medium" : "",
+                  )}
+                >
+                  {localizedName(org.name)}
+                </span>
+              </div>
+              {onCreateUnit && (
+                <DropdownMenu
+                  open={openMenuId === org.id}
+                  onOpenChange={(open) => setOpenMenuId(open ? org.id : null)}
+                >
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      className="h-8 w-8 p-0 opacity-0 group-hover:opacity-100 data-[state=open]:opacity-100 dark:hover:bg-gray-700"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <MoreHorizontal className="h-4 w-4 dark:text-gray-400" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent
+                    align="end"
+                    className="w-[180px] dark:bg-gray-700 dark:border-gray-600"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <DropdownMenuLabel className="dark:text-gray-200">
+                      Actions
+                    </DropdownMenuLabel>
+                    <DropdownMenuItem
+                      disabled={!canCreate}
+                      onClick={() => {
+                        setOpenMenuId(null);
+                        onCreateUnit(org.id);
+                      }}
+                      className="dark:text-gray-200 dark:hover:bg-gray-600"
+                    >
+                      <Plus className="mr-2 h-4 w-4" />
+                      {t("contentManagement.createUnit", "Create Unit")}
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              )}
+            </div>
+          );
+        })
+      ) : (
+        <div className="flex flex-col items-center justify-center h-full text-gray-400 dark:text-gray-500">
+          <p className="text-sm">{t("contentManagement.noOrg")}</p>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/lists/UnitList.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/lists/UnitList.tsx
new file mode 100644
index 000000000..10338042c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/lists/UnitList.tsx
@@ -0,0 +1,138 @@
+import { cn } from "@/super-admin/lib/utils";
+import { UnitActions } from "../actions/UnitActions";
+import { useState, useRef } from "react";
+import { Entity, Name } from "../types";
+import { FolderX, Loader2 } from "lucide-react";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { t } from "i18next";
+
+interface Unit {
+  id: string;
+  name: Name;
+  departments?: any[];
+  isExpanded?: boolean;
+  isRelated?: boolean;
+}
+
+interface UnitListProps {
+  organizationId?: string;
+  selectedUnitId: string;
+  onSelectUnit: (unitId: string, units: Entity[]) => void;
+  units: Unit[];
+  isLoading: boolean;
+  searchQuery?: string;
+  onEditUnit?: (unitId: string) => void;
+  onArchiveUnit?: (unitId: string, unitName: string) => void;
+  onDeleteUnit?: (unitId: string, unitName: string) => void;
+  onAddDepartment?: (unitId: string) => void;
+  onManageUnitAdmin?: (unitId: string) => void;
+  onAddFromSubCity?: (unitId: string) => void;
+}
+
+export const UnitList = ({
+  selectedUnitId,
+  onSelectUnit,
+  units = [],
+  isLoading = false,
+  searchQuery = "",
+  onAddDepartment,
+  onManageUnitAdmin,
+  onEditUnit,
+  onArchiveUnit,
+  onDeleteUnit,
+  onAddFromSubCity,
+}: UnitListProps) => {
+  const [hoveredId, setHoveredId] = useState<string | null>(null);
+  const [clickTimeout, setClickTimeout] = useState<NodeJS.Timeout | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const localizedName = useLocalizedName();
+
+  // Filter units based on search query
+  const filteredUnits = units.filter((unit) => {
+    if (!searchQuery) return true;
+    const name = localizedName(unit.name);
+    return name.toLowerCase().includes(searchQuery.toLowerCase());
+  });
+
+  // Handle single click with delay to prevent double-click interference
+  const handleUnitClick = (unitId: string, units: Entity[]) => {
+    // If already selected, don't trigger selection again
+    if (unitId === selectedUnitId) {
+      return;
+    }
+
+    // Clear any existing timeout
+    if (clickTimeout) {
+      clearTimeout(clickTimeout);
+    }
+
+    // Set a timeout to handle the click after a short delay
+    const timeout = setTimeout(() => {
+      onSelectUnit(unitId, units);
+    }, 200);
+
+    setClickTimeout(timeout);
+  };
+  return (
+    <div
+      className="flex flex-col gap-2 h-[50vh]   overflow-y-auto"
+      ref={containerRef}
+    >
+      {isLoading && filteredUnits.length === 0 ? (
+        <div className="flex justify-center items-center h-full gap-2 text-gray-500 dark:text-gray-400">
+          <Loader2 className="w-4 h-4 animate-spin" />
+          <p>{t("organization.loading")}</p>
+        </div>
+      ) : filteredUnits.length > 0 ? (
+        filteredUnits.map((unit) => {
+          return (
+            <div
+              key={unit.id}
+              className={cn(
+                "flex items-center justify-between p-2 rounded-md cursor-pointer group",
+                unit.id === selectedUnitId
+                  ? "bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300"
+                  : "hover:bg-primary-50 dark:hover:bg-primary-900/20 hover:text-primary-700 dark:hover:text-primary-300 text-gray-800 dark:text-gray-200"
+              )}
+              onMouseEnter={() => setHoveredId(unit.id)}
+              onMouseLeave={() => setHoveredId(null)}
+              onClick={() => handleUnitClick(unit.id, units)}
+            >
+              <div className="flex-1">
+                <span
+                  className={cn(
+                    "text-sm",
+                    unit.id === selectedUnitId ? "font-medium" : ""
+                  )}
+                >
+                  {localizedName(unit.name)}
+                </span>
+              </div>
+              <UnitActions
+                unit={unit}
+                onAddDepartment={onAddDepartment}
+                onManageUnitAdmin={onManageUnitAdmin}
+                onEditUnit={onEditUnit}
+                onArchiveUnit={unit.isRelated ? undefined : onArchiveUnit}
+                onDeleteUnit={unit.isRelated ? undefined : onDeleteUnit}
+                onAddFromSubCity={onAddFromSubCity}
+                showAlways={hoveredId === unit.id || unit.id === selectedUnitId}
+              />
+            </div>
+          );
+        })
+      ) : (
+        <div className="flex flex-col items-center justify-center h-full gap-2 text-gray-400 dark:text-gray-500">
+          <FolderX className="w-6 h-6" />
+          <p className="text-sm">{t("contentManagement.noUnit")}</p>
+        </div>
+      )}
+      {isLoading && units.length > 0 && (
+        <div className="flex justify-center py-2 text-gray-500 dark:text-gray-400 text-sm">
+          <Loader2 className="w-4 h-4 animate-spin mr-2" />
+          {t("organization.loading")}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/types.ts b/apps/edr-freight-web/backoffice/src/user-management/userManagement/types.ts
new file mode 100644
index 000000000..19db38ce5
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/types.ts
@@ -0,0 +1,19 @@
+export interface Entity {
+  id: string;
+  name: Name;
+}
+
+export interface Name {
+  am: string;
+  en: string;
+}
+
+export interface Employee {
+  id: string;
+  name: { am: string; en: string };
+  email?: string;
+  role?: string;
+  title?: string;
+  phone?: string;
+  inviteStatus?: "Pending" | "Accepted" | "Not Invited";
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Branding/Branding.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Branding/Branding.tsx
new file mode 100644
index 000000000..f287ec676
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Branding/Branding.tsx
@@ -0,0 +1,1017 @@
+import { Controller, useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/shared/common/ui/button";
+import { Label } from "@/shared/common/ui/label";
+import { ImageIcon, Loader2, ArrowLeft } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { FormFeild } from "../components/FormFeild";
+import { useBranding } from "../hooks/useBranding";
+import Loader from "@/record-management/components/Loader/loader";
+import { toast } from "sonner";
+import { Textarea } from "@/shared/common/ui/textarea";
+import {
+  BrandingParam,
+  BrandingParamAPI,
+  BrandingResponseItems,
+} from "../types/brandTypes";
+import {
+  uploadSingle,
+  uploadSingleBranding,
+} from "@/record-management/services/api/newFileService";
+import {
+  FaFacebook,
+  FaTwitter,
+  FaLinkedin,
+  FaInstagram,
+  FaYoutube,
+  FaTiktok,
+  FaGlobe,
+} from "react-icons/fa";
+import { Send } from "lucide-react";
+import { useParams, useNavigate } from "react-router-dom";
+
+interface BrandingFormData {
+  siteId: string;
+  organizationNameAm: string;
+  organizationNameEn: string;
+  logo: FileList;
+  primaryColor: string;
+  secondaryColor: string;
+  footerText: string;
+  footerAddress: string;
+  footerPhone: string;
+  footerEmail: string;
+  facebook: string;
+  twitter: string;
+  linkedin: string;
+  instagram: string;
+  youtube: string;
+  telegram: string;
+  tiktok: string;
+  website: string;
+  welcomeMessage: string;
+  loginImage: FileList;
+  favicon: FileList;
+  moduleConfig: {
+    dms: boolean;
+    performance: boolean;
+    objective: boolean;
+    complaint: boolean;
+  };
+}
+import { ReactNode } from "react";
+import { Switch } from "@/shared/common/ui/switch";
+
+type SocialInputProps = {
+  id: string;
+  label: string;
+  placeholder: string;
+  icon?: ReactNode;
+  register: any;
+};
+
+const updateChangedItems = async (
+  payload: BrandingParamAPI[],
+  data: any,
+  updateItem: any,
+) => {
+  if (!data?.items?.length) return;
+
+  const itemMap = new Map<string, BrandingParamAPI>(
+    data.items.map((item: BrandingParamAPI) => [item.key, item]),
+  );
+
+  const updates = payload.reduce<Promise<any>[]>((acc, item) => {
+    const existing = itemMap.get(item.key);
+
+    if (!existing) return acc;
+    const isFile =
+      item.key === "favicon" ||
+      item.key === "logo" ||
+      item.key === "loginImage";
+    const valueChanged = isFile ? false : existing.value !== item.value;
+
+    // Deep compare fileInfo because files live there
+    const fileInfoChanged =
+      JSON.stringify(existing.metadata ?? {}) !==
+      JSON.stringify(item.fileInfo ?? {});
+    const filechanged = fileInfoChanged && !!item.fileInfo?.fileName;
+
+    if (valueChanged || filechanged) {
+      acc.push(
+        updateItem({
+          id: existing.id,
+          payload: {
+            ...item,
+          },
+        }),
+      );
+    }
+
+    return acc;
+  }, []);
+
+  await Promise.all(updates);
+};
+function SocialInput({
+  id,
+  label,
+  placeholder,
+  icon,
+  register,
+}: SocialInputProps) {
+  const inputClass =
+    "w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 " +
+    "placeholder:text-slate-400 shadow-sm transition-all " +
+    "focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20 " +
+    "dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:placeholder:text-slate-500";
+  return (
+    <div className="space-y-2">
+      <Label
+        htmlFor={id}
+        className="text-sm font-medium text-slate-700 dark:text-slate-300">
+        {label}
+      </Label>
+
+      <div className="relative">
+        {icon && (
+          <div className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">
+            {icon}
+          </div>
+        )}
+
+        <FormFeild
+          id={id}
+          {...register(id)}
+          placeholder={placeholder}
+          className={`${inputClass} ${icon ? "pl-10" : ""}`}
+        />
+      </div>
+    </div>
+  );
+}
+const CustomImageUpload = ({
+  label,
+  preview,
+  existingName,
+  register,
+  error,
+  id,
+  isRequired = false,
+}: {
+  label: string;
+  preview: string | null;
+  existingName?: string;
+  register: any;
+  error?: string;
+  id: string;
+  isRequired?: boolean;
+}) => {
+  const { t } = useTranslation();
+  return (
+    <div className="space-y-3">
+      <Label
+        htmlFor={id}
+        className="text-sm font-medium text-slate-700 dark:text-slate-300">
+        {label} {isRequired && <span className="text-red-500">*</span>}
+      </Label>
+
+      {preview ? (
+        <div className="relative group overflow-hidden rounded-lg border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-900 flex items-center justify-center p-2 h-40">
+          <img
+            src={preview}
+            alt={label}
+            className="max-h-full max-w-full object-contain rounded transition-transform duration-200 group-hover:scale-105"
+          />
+          <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
+            <Button
+              type="button"
+              variant="secondary"
+              size="sm"
+              onClick={() => window.open(preview, "_blank")}
+              className="text-xs">
+              {t("branding.brandAssets.viewFull")}
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <div className="border border-dashed border-slate-300 dark:border-slate-700 rounded-lg p-6 flex flex-col items-center justify-center bg-slate-50/50 dark:bg-slate-900/50 h-40">
+          <ImageIcon className="h-8 w-8 text-slate-400 mb-2" />
+          <span className="text-xs text-slate-500 dark:text-slate-400">
+            {t("branding.brandAssets.noImageUploaded")}
+          </span>
+        </div>
+      )}
+
+      {preview && existingName && (
+        <p className="text-xs text-slate-500 dark:text-slate-400 truncate text-center">
+          {existingName}
+        </p>
+      )}
+
+      <div className="mt-1">
+        <FormFeild
+          id={id}
+          type="file"
+          accept="image/*"
+          {...register}
+          error={error}
+          className="cursor-pointer file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-violet-50 file:text-violet-700 hover:file:bg-violet-100 dark:file:bg-slate-800 dark:file:text-slate-200"
+        />
+      </div>
+    </div>
+  );
+};
+const mapFileInfo = (file: any) => ({
+  fileInfo: file.fileInfo,
+});
+
+const flattenFormData = (formData: Record<string, any>): [string, any][] => {
+  const entries: [string, any][] = [];
+  for (const [key, value] of Object.entries(formData)) {
+    if (key === "siteId" || key === "key") continue;
+    if (
+      value &&
+      typeof value === "object" &&
+      !Array.isArray(value) &&
+      !(value instanceof FileList) &&
+      !("fileInfo" in value)
+    ) {
+      for (const [subKey, subValue] of Object.entries(value)) {
+        entries.push([`${key}.${subKey}`, subValue]);
+      }
+    } else {
+      entries.push([key, value]);
+    }
+  }
+  return entries;
+};
+
+const buildSettingsPayload = (
+  formData: Record<string, any>,
+  siteId: string,
+  logoData?: any,
+  ImgData?: any,
+  faviconData?: any,
+): BrandingParamAPI[] => {
+  return flattenFormData(formData).map(([key, value]) => {
+    const isFile = value && typeof value === "object" && "fileInfo" in value;
+    const isMeta = key === "logo" || key === "loginImage" || key === "favicon";
+
+    const fileData =
+      key === "logo"
+        ? logoData
+        : key === "favicon"
+          ? faviconData
+          : key === "loginImage"
+            ? ImgData
+            : undefined;
+    return {
+      siteId,
+      key,
+      displayName: key,
+      type: isMeta ? "file" : "value",
+      value: isFile ? "" : isMeta ? key : String(value ?? ""),
+      ...(fileData?.fileInfo && {
+        fileInfo: fileData.fileInfo,
+      }),
+    };
+  });
+};
+const Branding = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { siteId } = useParams<{ siteId: string }>();
+  // Image preview states
+  const [logoPreview, setLogoPreview] = useState<string | undefined>(undefined);
+  const [loginImagePreview, setLoginImagePreview] = useState<
+    string | undefined
+  >(undefined);
+  const [faviconPreview, setFaviconPreview] = useState<string | undefined>(
+    undefined,
+  );
+  // Refs to imperatively clear the file inputs
+  const logoInputRef = useRef<HTMLInputElement | null>(null);
+  const loginImageInputRef = useRef<HTMLInputElement | null>(null);
+  const faviconInputRef = useRef<HTMLInputElement | null>(null);
+  const { data, isLoading, updateItem, createItem } = useBranding(siteId || "");
+  const brandingMap = useMemo(
+    () =>
+      new Map<string, BrandingResponseItems>(
+        data?.items?.map((item) => [item.key!, item]) ?? [],
+      ),
+    [data],
+  );
+  const defaultValues = useMemo(
+    () => ({
+      organizationNameAm: brandingMap.get("organizationNameAm")?.value ?? "",
+      organizationNameEn: brandingMap.get("organizationNameEn")?.value ?? "",
+      primaryColor: brandingMap.get("primaryColor")?.value || "#000000",
+      secondaryColor: brandingMap.get("secondaryColor")?.value || "#000000",
+      footerText: brandingMap.get("footerText")?.value || "",
+      footerAddress: brandingMap.get("footerAddress")?.value || "",
+      footerPhone: brandingMap.get("footerPhone")?.value || "",
+      footerEmail: brandingMap.get("footerEmail")?.value || "",
+      facebook: brandingMap.get("facebook")?.value || "",
+      twitter: brandingMap.get("twitter")?.value || "",
+      linkedin: brandingMap.get("linkedin")?.value || "",
+      instagram: brandingMap.get("instagram")?.value || "",
+      youtube: brandingMap.get("youtube")?.value || "",
+      telegram: brandingMap.get("telegram")?.value || "",
+      tiktok: brandingMap.get("tiktok")?.value || "",
+      website: brandingMap.get("website")?.value || "",
+      welcomeMessage: brandingMap.get("welcomeMessage")?.value || "",
+      logo: undefined,
+      loginImage: undefined,
+      favicon: undefined,
+      moduleConfig: {
+        dms: brandingMap.get("moduleConfig.dms")?.value === "true",
+        performance:
+          brandingMap.get("moduleConfig.performance")?.value === "true",
+        objective: brandingMap.get("moduleConfig.objective")?.value === "true",
+        complaint: brandingMap.get("moduleConfig.complaint")?.value === "true",
+      },
+    }),
+    [brandingMap],
+  );
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    setValue,
+    getValues,
+    reset,
+    control,
+    formState: { errors },
+  } = useForm<BrandingFormData>({
+    defaultValues,
+  });
+  const clearFileInputs = () => {
+    if (logoInputRef.current) logoInputRef.current.value = "";
+    if (loginImageInputRef.current) loginImageInputRef.current.value = "";
+    if (faviconInputRef.current) faviconInputRef.current.value = "";
+    setValue("logo", undefined as any);
+    setValue("loginImage", undefined as any);
+    setValue("favicon", undefined as any);
+  };
+
+  useEffect(() => {
+    if (!data) return;
+    reset(defaultValues);
+    clearFileInputs();
+  }, [data, defaultValues, reset]);
+
+  // Logo preview
+  const logoFile = watch("logo")?.[0];
+  useEffect(() => {
+    if (logoFile) {
+      const url = URL.createObjectURL(logoFile);
+      setLogoPreview(url);
+      return () => URL.revokeObjectURL(url);
+    }
+    setLogoPreview(brandingMap.get("logo")?.presigned);
+  }, [logoFile, brandingMap]);
+
+  // Login image preview
+  const loginImageFile = watch("loginImage")?.[0];
+  useEffect(() => {
+    if (loginImageFile) {
+      const url = URL.createObjectURL(loginImageFile);
+      setLoginImagePreview(url);
+      return () => URL.revokeObjectURL(url);
+    }
+    setLoginImagePreview(brandingMap.get("loginImage")?.presigned || "");
+  }, [loginImageFile, brandingMap]);
+
+  // Favicon preview
+  const faviconFile = watch("favicon")?.[0];
+  useEffect(() => {
+    if (faviconFile) {
+      const url = URL.createObjectURL(faviconFile);
+      setFaviconPreview(url);
+      return () => URL.revokeObjectURL(url);
+    }
+    setFaviconPreview(brandingMap.get("favicon")?.presigned || "");
+  }, [faviconFile, brandingMap]);
+
+  const onSubmit = async (formData: BrandingFormData) => {
+    setIsSubmitting(true);
+    try {
+      const logoFile = formData.logo?.[0];
+      const loginImgFile = formData.loginImage?.[0];
+      const faviconImgFile = formData.favicon?.[0];
+      let logoData = null;
+      let ImgData = null;
+      let faviconData = null;
+
+      // -------------------- LOGO --------------------
+      if (logoFile) {
+        const uploaded = await uploadSingleBranding(logoFile);
+        logoData = mapFileInfo(uploaded);
+      } else {
+        // Keep existing fileInfo intact — do NOT overwrite with empty
+        const existingItem = brandingMap.get("logo");
+        if (!existingItem?.metadata || !existingItem.presigned) {
+          throw new Error("Logo is required but missing");
+        }
+        logoData = existingItem.metadata ?? {};
+      }
+
+      // -------------------- FAVICON --------------------
+      if (faviconImgFile) {
+        const uploaded = await uploadSingleBranding(faviconImgFile);
+
+        faviconData = mapFileInfo(uploaded);
+      } else {
+        const existingItem = brandingMap.get("favicon");
+        if (!existingItem?.metadata || !existingItem.presigned) {
+          throw new Error("favicon is required but missing");
+        }
+        faviconData = existingItem.metadata ?? {};
+      }
+
+      // -------------------- LOGIN IMAGE --------------------
+      if (loginImgFile) {
+        const uploaded = await uploadSingleBranding(loginImgFile);
+        ImgData = mapFileInfo(uploaded);
+      } else {
+        const existingItem = brandingMap.get("loginImage");
+        if (!existingItem?.metadata || !existingItem.presigned) {
+          throw new Error("Login image is required but missing");
+        }
+        ImgData = existingItem.metadata ?? {};
+      }
+
+      const payload: BrandingParamAPI[] = buildSettingsPayload(
+        formData,
+        siteId || "",
+        logoData,
+        ImgData,
+        faviconData,
+      );
+
+      if (data?.count === 0) {
+        await createItem(payload);
+      } else {
+        await updateChangedItems(payload, data, updateItem);
+      }
+
+      // Clear file inputs so stale filenames are removed
+      clearFileInputs();
+      toast.success(t("branding.success"));
+    } catch (error) {
+      toast.error(t("branding.error"));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  return (
+    <div className="mx-auto max-w-7xl p-6 lg:p-8">
+      <div className="mb-8">
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={() => navigate(-1)}
+          className="mb-4">
+          <ArrowLeft className="h-4 w-4 mr-2" />
+          {t("common.back")}
+        </Button>
+        <h1 className="text-3xl font-bold text-slate-900 dark:text-white">
+          {t("branding.title")}
+        </h1>
+        <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
+          {t("branding.description")}
+        </p>
+      </div>
+
+      <form onSubmit={handleSubmit(onSubmit)} className="space-y-8">
+        {/* Organization */}
+        <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-950">
+          <h2 className="mb-6 text-lg font-semibold text-slate-900 dark:text-white">
+            {t("branding.organizationInfo.title")}
+          </h2>
+
+          <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+            <div className="space-y-2">
+              <Label
+                htmlFor="organizationNameAm"
+                className="text-sm font-medium text-slate-700 dark:text-slate-300">
+                {t("branding.organizationInfo.nameAm")}
+              </Label>
+              <FormFeild
+                id="organizationNameAm"
+                {...register("organizationNameAm", {
+                  required: t("branding.validation.nameAmRequired"),
+                })}
+                error={errors.organizationNameAm?.message}
+                placeholder={t("branding.organizationInfo.nameAmPlaceholder")}
+                className="rounded-xl border-slate-300 dark:border-slate-700 dark:bg-slate-900 focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label
+                htmlFor="organizationNameEn"
+                className="text-sm font-medium text-slate-700 dark:text-slate-300">
+                {t("branding.organizationInfo.nameEn")}
+              </Label>
+              <FormFeild
+                id="organizationNameEn"
+                {...register("organizationNameEn", {
+                  required: t("branding.validation.nameEnRequired"),
+                })}
+                error={errors.organizationNameEn?.message}
+                placeholder={t("branding.organizationInfo.nameEnPlaceholder")}
+                className="rounded-xl border-slate-300 dark:border-slate-700 dark:bg-slate-900 focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Brand Assets */}
+        <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-950">
+          <h2 className="mb-6 text-lg font-semibold text-slate-900 dark:text-white">
+            {t("branding.brandAssets.title")}
+          </h2>
+
+          <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+            <div className="rounded-xl border border-dashed border-slate-300 p-4 dark:border-slate-700">
+              <CustomImageUpload
+                label={t("branding.brandAssets.logo")}
+                preview={logoPreview ? logoPreview : null}
+                existingName={brandingMap.get("logo")?.metadata?.originalname}
+                register={{
+                  ...register("logo"),
+                  ref: (el: HTMLInputElement | null) => {
+                    register("logo").ref(el);
+                    logoInputRef.current = el;
+                  },
+                }}
+                error={errors.logo?.message}
+                id="logo"
+                isRequired={!brandingMap.get("logo")?.metadata?.originalname}
+              />
+            </div>
+
+            <div className="rounded-xl border border-dashed border-slate-300 p-4 dark:border-slate-700">
+              <CustomImageUpload
+                label={t("branding.brandAssets.loginImage")}
+                preview={loginImagePreview ? loginImagePreview : null}
+                existingName={
+                  brandingMap.get("loginImage")?.metadata?.originalname
+                }
+                register={{
+                  ...register("loginImage"),
+                  ref: (el: HTMLInputElement | null) => {
+                    register("loginImage").ref(el);
+                    loginImageInputRef.current = el;
+                  },
+                }}
+                error={errors.loginImage?.message}
+                id="loginImage"
+                isRequired={false}
+              />
+            </div>
+
+            <div className="rounded-xl border border-dashed border-slate-300 p-4 dark:border-slate-700">
+              <CustomImageUpload
+                label={t("branding.brandAssets.favicon")}
+                preview={faviconPreview ? faviconPreview : null}
+                existingName={
+                  brandingMap.get("favicon")?.metadata?.originalname
+                }
+                register={{
+                  ...register("favicon"),
+                  ref: (el: HTMLInputElement | null) => {
+                    register("favicon").ref(el);
+                    faviconInputRef.current = el;
+                  },
+                }}
+                error={errors.favicon?.message}
+                id="favicon"
+                isRequired={false}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Brand Colors */}
+        <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-950">
+          <h2 className="mb-6 text-lg font-semibold text-slate-900 dark:text-white">
+            {t("branding.brandColors.title")}
+          </h2>
+
+          <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+            <div className="rounded-xl border border-slate-200 p-4 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-900/50">
+              <Label
+                htmlFor="primaryColor"
+                className="text-sm font-medium text-slate-700 dark:text-slate-300">
+                {t("branding.brandColors.primary")}
+              </Label>
+
+              <div className="mt-3 flex items-center gap-4">
+                <input
+                  id="primaryColor"
+                  type="color"
+                  {...register("primaryColor", {
+                    required: t("branding.validation.primaryColorRequired"),
+                  })}
+                  className="h-14 w-14 cursor-pointer rounded-lg border border-slate-200 dark:border-slate-700"
+                />
+
+                <div>
+                  <p className="text-xs text-slate-500">
+                    {t("branding.brandColors.brandPrimary")}
+                  </p>
+                  <p className="font-mono font-medium text-slate-900 dark:text-white">
+                    {watch("primaryColor") || "#000000"}
+                  </p>
+                </div>
+              </div>
+              {errors.primaryColor && (
+                <p className="text-xs text-red-500 mt-1">
+                  {errors.primaryColor.message}
+                </p>
+              )}
+            </div>
+
+            <div className="rounded-xl border border-slate-200 p-4 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-900/50">
+              <Label
+                htmlFor="secondaryColor"
+                className="text-sm font-medium text-slate-700 dark:text-slate-300">
+                {t("branding.brandColors.secondary")}
+              </Label>
+
+              <div className="mt-3 flex items-center gap-4">
+                <input
+                  id="secondaryColor"
+                  type="color"
+                  {...register("secondaryColor")}
+                  className="h-14 w-14 cursor-pointer rounded-lg border border-slate-200 dark:border-slate-700"
+                />
+
+                <div>
+                  <p className="text-xs text-slate-500">
+                    {t("branding.brandColors.brandSecondary")}
+                  </p>
+                  <p className="font-mono font-medium text-slate-900 dark:text-white">
+                    {watch("secondaryColor") || "#000000"}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="grid grid-cols-1 gap-8 xl:grid-cols-2">
+          <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-950">
+            <h2 className="mb-6 text-lg font-semibold text-slate-900 dark:text-white">
+              {t("branding.welcomeMessage.title")}
+            </h2>
+            <div className="space-y-2">
+              <Label
+                htmlFor="welcomeMessage"
+                className="text-sm font-medium text-slate-700 dark:text-slate-300">
+                {t("branding.welcomeMessage.label")}
+              </Label>
+              <Textarea
+                id="welcomeMessage"
+                {...register("welcomeMessage", {
+                  required: t("branding.validation.welcomeMessageRequired"),
+                })}
+                rows={4}
+                placeholder={t("branding.welcomeMessage.placeholder")}
+                className="w-full rounded-xl border-slate-300 dark:border-slate-700 dark:bg-slate-900 text-slate-900 dark:text-white min-h-[120px] focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
+              />
+              {errors.welcomeMessage && (
+                <p className="text-xs text-red-500 mt-1">
+                  {errors.welcomeMessage.message}
+                </p>
+              )}
+            </div>
+          </div>
+
+          <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-950">
+            <h2 className="mb-6 text-lg font-semibold text-slate-900 dark:text-white">
+              {t("branding.footerText.title")}
+            </h2>
+            <div className="space-y-2">
+              <Label
+                htmlFor="footerText"
+                className="text-sm font-medium text-slate-700 dark:text-slate-300">
+                {t("branding.footerText.label")}
+              </Label>
+              <Textarea
+                id="footerText"
+                {...register("footerText", {
+                  required: t("branding.validation.footerTextRequired"),
+                })}
+                rows={4}
+                placeholder={t("branding.footerText.placeholder")}
+                className="w-full rounded-xl border-slate-300 dark:border-slate-700 dark:bg-slate-900 text-slate-900 dark:text-white min-h-[120px] focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
+              />
+              {errors.footerText && (
+                <p className="text-xs text-red-500 mt-1">
+                  {errors.footerText.message}
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+        <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-950">
+          <h2 className="mb-6 text-lg font-semibold text-slate-900 dark:text-white">
+            {t("branding.landingPage.title")}
+          </h2>
+
+          <div className="flex items-center justify-between rounded-xl border border-slate-200 p-4 dark:border-slate-800">
+            <div>
+              <Label
+                htmlFor="moduleConfig.complaint"
+                className="text-sm font-medium text-slate-900 dark:text-slate-100">
+                {t("branding.landingPage.complaint")}
+              </Label>
+              <p className="text-sm text-slate-500 dark:text-slate-400">
+                {t("branding.landingPage.complaintDescription")}
+              </p>
+            </div>
+
+            <Controller
+              control={control}
+              name="moduleConfig.complaint"
+              render={({ field }) => (
+                <Switch
+                  id="moduleConfig.complaint"
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                />
+              )}
+            />
+          </div>
+        </div>
+        <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-950">
+          <h2 className="mb-6 text-lg font-semibold text-slate-900 dark:text-white">
+            {t("branding.modules.title")}
+          </h2>
+
+          <div className="space-y-4">
+            <div className="flex items-center justify-between rounded-xl border border-slate-200 p-4 dark:border-slate-800">
+              <div>
+                <Label
+                  htmlFor="moduleConfig.dms"
+                  className="text-sm font-medium text-slate-900 dark:text-slate-100">
+                  {t("branding.modules.dms")}
+                </Label>
+                <p className="text-sm text-slate-500 dark:text-slate-400">
+                  {t("branding.modules.dmsDescription")}
+                </p>
+              </div>
+
+              <Controller
+                control={control}
+                name="moduleConfig.dms"
+                render={({ field }) => (
+                  <Switch
+                    id="moduleConfig.dms"
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                )}
+              />
+            </div>
+
+            <div className="flex items-center justify-between rounded-xl border border-slate-200 p-4 dark:border-slate-800">
+              <div>
+                <Label
+                  htmlFor="moduleConfig.performance"
+                  className="text-sm font-medium text-slate-900 dark:text-slate-100">
+                  {t("branding.modules.performance")}
+                </Label>
+                <p className="text-sm text-slate-500 dark:text-slate-400">
+                  {t("branding.modules.performanceDescription")}
+                </p>
+              </div>
+
+              <Controller
+                control={control}
+                name="moduleConfig.performance"
+                render={({ field }) => (
+                  <Switch
+                    id="moduleConfig.performance"
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                )}
+              />
+            </div>
+
+            <div className="flex items-center justify-between rounded-xl border border-slate-200 p-4 dark:border-slate-800">
+              <div>
+                <Label
+                  htmlFor="moduleConfig.objective"
+                  className="text-sm font-medium text-slate-900 dark:text-slate-100">
+                  {t("branding.modules.objective")}
+                </Label>
+                <p className="text-sm text-slate-500 dark:text-slate-400">
+                  {t("branding.modules.objectiveDescription")}
+                </p>
+              </div>
+
+              <Controller
+                control={control}
+                name="moduleConfig.objective"
+                render={({ field }) => (
+                  <Switch
+                    id="moduleConfig.objective"
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                )}
+              />
+            </div>
+          </div>
+        </div>
+        {/* Contact Information */}
+        <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-950">
+          <h2 className="mb-6 text-lg font-semibold text-slate-900 dark:text-white">
+            {t("branding.contactInfo.title")}
+          </h2>
+
+          <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
+            <div className="space-y-2">
+              <Label
+                htmlFor="footerAddress"
+                className="text-sm font-medium text-slate-700 dark:text-slate-300">
+                {t("branding.contactInfo.address")}
+              </Label>
+              <FormFeild
+                id="footerAddress"
+                {...register("footerAddress", {
+                  required: t("branding.validation.addressRequired"),
+                })}
+                error={errors.footerAddress?.message}
+                placeholder={t("branding.contactInfo.addressPlaceholder")}
+                className="rounded-xl border-slate-300 dark:border-slate-700 dark:bg-slate-900 focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label
+                htmlFor="footerPhone"
+                className="text-sm font-medium text-slate-700 dark:text-slate-300">
+                {t("branding.contactInfo.phone")}
+              </Label>
+              <FormFeild
+                id="footerPhone"
+                {...register("footerPhone", {
+                  required: t("branding.validation.phoneRequired"),
+                })}
+                error={errors.footerPhone?.message}
+                placeholder={t("branding.contactInfo.phonePlaceholder")}
+                className="rounded-xl border-slate-300 dark:border-slate-700 dark:bg-slate-900 focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label
+                htmlFor="footerEmail"
+                className="text-sm font-medium text-slate-700 dark:text-slate-300">
+                {t("branding.contactInfo.email")}
+              </Label>
+              <FormFeild
+                id="footerEmail"
+                type="email"
+                {...register("footerEmail", {
+                  required: t("branding.validation.emailRequired"),
+                  pattern: {
+                    value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                    message: t("branding.validation.invalidEmail"),
+                  },
+                })}
+                error={errors.footerEmail?.message}
+                placeholder={t("branding.contactInfo.emailPlaceholder")}
+                className="rounded-xl border-slate-300 dark:border-slate-700 dark:bg-slate-900 focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Social Media */}
+        <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-950">
+          <h2 className="mb-6 text-lg font-semibold text-slate-900 dark:text-white">
+            {t("branding.socialMedia.title")}
+          </h2>
+
+          <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-4">
+            <SocialInput
+              id="facebook"
+              label={t("branding.socialMedia.facebook")}
+              placeholder={t("branding.socialMedia.facebookPlaceholder")}
+              register={register}
+              icon={<FaFacebook className="h-4 w-4 text-blue-600" />}
+            />
+
+            <SocialInput
+              id="twitter"
+              label={t("branding.socialMedia.twitter")}
+              placeholder={t("branding.socialMedia.twitterPlaceholder")}
+              register={register}
+              icon={<FaTwitter className="h-4 w-4 text-sky-500" />}
+            />
+
+            <SocialInput
+              id="linkedin"
+              label={t("branding.socialMedia.linkedin")}
+              placeholder={t("branding.socialMedia.linkedinPlaceholder")}
+              register={register}
+              icon={<FaLinkedin className="h-4 w-4 text-blue-700" />}
+            />
+
+            <SocialInput
+              id="instagram"
+              label={t("branding.socialMedia.instagram")}
+              placeholder={t("branding.socialMedia.instagramPlaceholder")}
+              register={register}
+              icon={<FaInstagram className="h-4 w-4 text-pink-500" />}
+            />
+
+            <SocialInput
+              id="youtube"
+              label={t("branding.socialMedia.youtube")}
+              placeholder={t("branding.socialMedia.youtubePlaceholder")}
+              register={register}
+              icon={<FaYoutube className="h-4 w-4 text-red-600" />}
+            />
+
+            <SocialInput
+              id="telegram"
+              label={t("branding.socialMedia.telegram")}
+              placeholder={t("branding.socialMedia.telegramPlaceholder")}
+              register={register}
+              icon={<Send className="h-4 w-4 text-sky-500" />}
+            />
+
+            <SocialInput
+              id="tiktok"
+              label={t("branding.socialMedia.tiktok")}
+              placeholder={t("branding.socialMedia.tiktokPlaceholder")}
+              register={register}
+              icon={<FaTiktok className="h-4 w-4 text-black dark:text-white" />}
+            />
+
+            <SocialInput
+              id="website"
+              label={t("branding.socialMedia.website")}
+              placeholder={t("branding.socialMedia.websitePlaceholder")}
+              register={register}
+              icon={<FaGlobe className="h-4 w-4 text-slate-500" />}
+            />
+          </div>
+        </div>
+
+        {/* Sticky Save */}
+        <div className="sticky bottom-0 z-20 pb-4">
+          <div className="flex justify-between rounded-2xl border border-slate-200 bg-white/80 p-4 backdrop-blur dark:border-slate-700 dark:bg-slate-950/80">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => navigate(-1)}>
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              {t("common.back")}
+            </Button>
+            <Button
+              type="submit"
+              disabled={isSubmitting}
+              className="
+              min-w-[180px]
+              rounded-xl
+              bg-gradient-to-r
+              from-violet-600
+              to-purple-600
+              text-white
+              shadow-lg
+              hover:from-violet-700
+              hover:to-purple-700
+            ">
+              {isSubmitting ? (
+                <span className="flex items-center gap-2">
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                  {t("branding.savingButton")}
+                </span>
+              ) : (
+                t("branding.saveButton")
+              )}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+};
+export default Branding;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/ContactUs/AddContactUs.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/ContactUs/AddContactUs.tsx
new file mode 100644
index 000000000..aa1a93180
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/ContactUs/AddContactUs.tsx
@@ -0,0 +1,71 @@
+import { useForm } from "react-hook-form";
+import { ContactUsFormData, CreateContactUsPayload } from "../types/contactUs";
+import { toast } from "sonner";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useContactUs } from "../hooks/useContactUs";
+import ContactUsForm from "./Form";
+
+export const AddContactUs = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    watch,
+    control,
+    setValue,
+  } = useForm<ContactUsFormData>({
+    defaultValues: {
+      nameAm: "",
+      nameEn: "",
+      value: "",
+      type: "",
+      isActive: false,
+    },
+  });
+  const navigate = useNavigate();
+  const { createItem, isCreating } = useContactUs();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleCreateSubmit = async (ContactUsFormData: ContactUsFormData) => {
+    setIsSubmitting(true);
+    try {
+      const payload: CreateContactUsPayload = {
+        name: {
+          am: ContactUsFormData.nameAm || "",
+          en: ContactUsFormData.nameEn || "",
+        },
+        type: ContactUsFormData.type,
+        value: ContactUsFormData.value,
+
+        isActive: ContactUsFormData.isActive,
+      };
+      await createItem({
+        data: payload,
+      });
+      toast.success(" created successfully");
+      navigate(-1);
+    } catch (error) {
+      toast.error("Failed to create ContactUs");
+      console.error("Creation error:", error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const onCancel = () => {
+    navigate(-1);
+  };
+  return (
+    <ContactUsForm
+      handleSubmit={handleSubmit(handleCreateSubmit)}
+      handleCancel={onCancel}
+      watch={watch}
+      setValue={setValue}
+      control={control}
+      register={register}
+      errors={errors}
+      isSubmitting={isSubmitting}
+      label="Add Contact Information"
+    />
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/ContactUs/ContactUs.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/ContactUs/ContactUs.tsx
new file mode 100644
index 000000000..474d17b14
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/ContactUs/ContactUs.tsx
@@ -0,0 +1,88 @@
+import { NavLink, useNavigate } from "react-router-dom";
+import { CirclePlus } from "lucide-react";
+import { ContactUsColumnDefn } from "./ContactUsColumn";
+import { useTranslation } from "react-i18next";
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import { useMemo, useState } from "react";
+import Loader from "@/record-management/components/Loader/loader";
+import { Button } from "@/shared/common/ui/button";
+import { ContactUsParams, useContactUs } from "../hooks/useContactUs";
+export const ContactUs = () => {
+  const [pageIndex, setPageIndex] = useState(0);
+  const navigate = useNavigate();
+  const pageSize = 10;
+  const { t } = useTranslation();
+  const dynamicParams: Record<string, any> = {
+    skip: pageIndex * pageSize,
+    take: pageSize,
+    orderBy: "createdAt:DESC",
+  };
+
+  const baseParams: ContactUsParams = {
+    isActive: true, // required
+    ...dynamicParams,
+  };
+
+  const { items, refetch, deleteItem, error, isLoading, count } =
+    useContactUs(baseParams);
+  const handlePageChange = (newPage: number) => {
+    setPageIndex(newPage);
+  };
+
+  return (
+    <div className="flex flex-col h-full w-full p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700">
+      {/* Header Section */}
+      <div className="flex items-center justify-between mb-4 border-b pb-3 border-gray-200 dark:border-gray-700">
+        <h1 className="text-xl font-semibold text-gray-800 dark:text-gray-200">
+          {t("contactUs")}
+        </h1>
+        {
+          <NavLink to="/user-management/web-Management/ContactUs/AddContactUs">
+            <Button
+              variant="addRecordBtn"
+              className="flex items-center gap-1 bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition-all">
+              <CirclePlus className="w-4 h-4" />
+              <span>{t("addContactUs")}</span>
+            </Button>
+          </NavLink>
+        }
+      </div>
+
+      {/* Content Section */}
+      <div className="flex-1 overflow-auto">
+        {isLoading && (
+          <div className="flex justify-center items-center h-48">
+            <Loader />
+          </div>
+        )}
+
+        {error && (
+          <p className="text-center text-red-500 text-sm mt-4">
+            {t("userRecord.Error loading records.")}
+          </p>
+        )}
+
+        {!isLoading && !error && (
+          <div className="mt-2">
+            <AdvancedTable
+              columns={ContactUsColumnDefn({
+                navigate,
+                onDelete: deleteItem,
+              })}
+              data={items || []}
+              tableName="ContactUs"
+              toolBarPosition="right"
+              extraToolbar={<div className="flex gap-2"></div>}
+              itemCount={count || 2}
+              pageIndex={pageIndex}
+              onPageChange={handlePageChange}
+              nextFunction={() => handlePageChange(pageIndex + 1)}
+              prevFunction={() => handlePageChange(Math.max(pageIndex - 1, 0))}
+              refresh={refetch}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/ContactUs/ContactUsColumn.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/ContactUs/ContactUsColumn.tsx
new file mode 100644
index 000000000..e20086607
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/ContactUs/ContactUsColumn.tsx
@@ -0,0 +1,105 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { Button } from "@/shared/common/ui/button";
+import { Trash2, Edit } from "lucide-react";
+import { ContactUsItem } from "../types/contactUs";
+import { t } from "i18next";
+import i18n from "@/i18n";
+export const ContactUsColumnDefn = ({
+  //  onDelete,
+  navigate,
+  onDelete,
+}: {
+  navigate: (id: string) => void;
+  onDelete: (id: string) => Promise<void>;
+}): ColumnDef<ContactUsItem>[] => [
+    {
+      accessorKey: "title",
+      header: () => t("toogle.title"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        const lang = i18n.language;
+        if (lang === "am") {
+          return <span>{rowData.name?.am || "-"}</span>;
+        }
+        if (lang === "en") {
+          return <span>{rowData.name?.en || "-"}</span>;
+        } else {
+          return <span>{"-"}</span>;
+        }
+      },
+      enableHiding: true,
+    },
+    {
+      accessorKey: "link",
+      header: () => t("toogle.link"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        return <span>{rowData.value || "-"}</span>;
+      },
+      enableHiding: true,
+    },
+    {
+      accessorKey: "status",
+      header: () => t("toogle.status"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        return (
+          <span
+            className={`px-2 py-1 rounded-full text-xs font-medium ${rowData.isActive
+                ? "bg-primary-100 text-primary-800"
+                : "bg-red-100 text-red-800"
+              }`}
+          >
+            {rowData.isActive ? "Active" : "Inactive"}
+          </span>
+        );
+      },
+      enableHiding: true,
+    },
+    {
+      accessorKey: "createdAt",
+      header: () => t("toogle.createdAt"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        const lang = i18n.language;
+        const amDate = rowData?.amharicCreatedAt;
+        const enDate = new Date(rowData.createdAt).toLocaleString("en-US", {
+          month: "short", // "Oct"
+          day: "numeric", // "12"
+          year: "numeric", // "2014"
+          hour: "numeric", // "8"
+          minute: "2-digit", // "12"
+          hour12: true, // "PM" format
+        });
+        const date = lang === "am" ? amDate : enDate;
+        return <span className="text-sm text-gray-500">{date}</span>;
+      },
+      enableHiding: true,
+    },
+    {
+      accessorKey: "Actions",
+      header: () => t("toogle.Actions"),
+      cell: ({ row }) => (
+        <div className="flex space-x-2">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() =>
+              navigate(
+                `/user-management/web-management/ContactUs/EditContactUs/${row.original.id}`
+              )
+            }
+          >
+            <Edit className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => onDelete(row.original.id)}
+          >
+            <Trash2 className="h-4 w-4 text-destructive" />
+          </Button>
+        </div>
+      ),
+    },
+  ];
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/ContactUs/EditContactUs.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/ContactUs/EditContactUs.tsx
new file mode 100644
index 000000000..9aeda66a8
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/ContactUs/EditContactUs.tsx
@@ -0,0 +1,109 @@
+import {
+  Control,
+  FieldErrors,
+  useForm,
+  UseFormRegister,
+  UseFormReset,
+  UseFormSetValue,
+  UseFormWatch,
+} from "react-hook-form";
+import {
+  ContactUsFormData,
+  ContactUsItem,
+  CreateContactUsPayload,
+} from "../types/contactUs";
+import { useContactUs } from "../hooks/useContactUs";
+import { useNavigate, useParams } from "react-router-dom";
+import { toast } from "sonner";
+import { useEffect, useMemo, useState } from "react";
+import ContactUsForm from "./Form";
+
+export interface FormProps {
+  watch: UseFormWatch<ContactUsFormData>;
+  control: Control<ContactUsFormData>;
+  setValue: UseFormSetValue<ContactUsFormData>;
+  register: UseFormRegister<ContactUsFormData>;
+  errors: FieldErrors<ContactUsFormData>;
+  reset?: UseFormReset<ContactUsFormData>;
+  handleSubmit: (e: React.FormEvent) => void;
+  handleCancel: () => void;
+  isSubmitting: boolean;
+  item?: ContactUsItem;
+  label: string;
+}
+export const EditContactUs = () => {
+  const { id } = useParams();
+  const { singleItem: item, updateItem } = useContactUs(undefined, id);
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const navigate = useNavigate();
+  const defaultValues = useMemo(
+    () => ({
+      nameEn: item?.name?.en,
+      nameAm: item?.name?.am,
+      value: item?.value,
+      type: item?.type,
+      isActive: item?.isActive,
+    }),
+    [item] // 👈 recompute only when item changes
+  );
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    reset,
+    control,
+    setValue,
+    formState: { errors },
+  } = useForm<ContactUsFormData>({
+    defaultValues,
+  });
+  useEffect(() => {
+    if (item) {
+      reset(defaultValues);
+    }
+  }, [item, defaultValues, reset]);
+  const handleEditSubmit = async (ContactUsFormData: ContactUsFormData) => {
+    if (!item) return;
+    setIsSubmitting(true);
+    try {
+      const payload: CreateContactUsPayload = {
+        name: {
+          am: ContactUsFormData.nameAm || "",
+          en: ContactUsFormData.nameEn || "",
+        },
+        type: ContactUsFormData.type,
+        value: ContactUsFormData.value,
+
+        isActive: ContactUsFormData.isActive,
+      };
+
+      await updateItem({
+        id: item?.id,
+        data: payload,
+      });
+      toast.success("ContactUs updated successfully");
+      navigate(-1);
+    } catch (error) {
+      toast.error("Failed to update about us");
+      console.error("Update error:", error);
+      setIsSubmitting(false);
+    }
+  };
+  const onCancel = () => {
+    navigate(-1);
+  };
+  return (
+    <ContactUsForm
+      handleSubmit={handleSubmit(handleEditSubmit)}
+      handleCancel={onCancel}
+      watch={watch}
+      setValue={setValue}
+      control={control}
+      register={register}
+      errors={errors}
+      isSubmitting={isSubmitting}
+      label="Edit Contact Information"
+    />
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/ContactUs/Form.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/ContactUs/Form.tsx
new file mode 100644
index 000000000..d5144b454
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/ContactUs/Form.tsx
@@ -0,0 +1,114 @@
+import { Button } from "@/shared/common/ui/button";
+import { Loader2 } from "lucide-react";
+import {
+  FormInputBox,
+  FormSelector,
+  FormSingleBox,
+  FormToggle,
+} from "../components/FormInputBox";
+import { FormProps } from "./EditContactUs";
+import { ContactUsList } from "../types/contactUs";
+
+const ContactUsForm = ({
+  handleSubmit,
+  handleCancel,
+  watch,
+  control,
+  setValue,
+  register,
+  errors,
+  isSubmitting,
+  reset,
+  item,
+  label,
+}: FormProps) => {
+  const socialItem: ContactUsList[] = [
+    {
+      label: "Location",
+      value: "LOCATION",
+    },
+    {
+      label: "Phone Number",
+      value: "PHONE_NUMBER",
+    },
+    {
+      label: "Email",
+      value: "EMAIL",
+    },
+  ];
+  return (
+    <div className="max-h-[80vh] overflow-y-auto p-6 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
+      <form onSubmit={handleSubmit} className="space-y-8">
+        {/* message type */}
+        <FormSelector
+          id="type"
+          label="Contact Information Type"
+          error="Type is Required"
+          errors={errors}
+          register={register}
+          control={control}
+          item={socialItem}
+        />
+
+        {/* Title Section */}
+        <FormInputBox
+          idEn="nameEn"
+          idAm="nameAm"
+          label="Name"
+          error="Name is Required"
+          errors={errors}
+          register={register}
+        />
+
+        {/* Description Section */}
+        <FormSingleBox
+          id="value"
+          label="Value"
+          watch={watch}
+          setValue={setValue}
+          register={register}
+          error="Value is required"
+          errors={errors}
+          type="link"
+        />
+
+        {/* isActive Toggle */}
+        <FormToggle
+          idAm="isActive"
+          label="Status"
+          watch={watch}
+          setValue={setValue}
+        />
+
+        {/* Actions */}
+        <div className="flex justify-end gap-3 pt-6 border-t border-gray-200 dark:border-gray-700">
+          <Button
+            variant="outline"
+            onClick={handleCancel}
+            type="button"
+            disabled={isSubmitting}
+            className="px-6 py-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700"
+          >
+            Cancel
+          </Button>
+
+          <Button
+            type="submit"
+            disabled={isSubmitting}
+            className="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white"
+          >
+            {isSubmitting ? (
+              <span className="flex items-center gap-2">
+                <Loader2 className="w-4 h-4 animate-spin" />
+                ...
+              </span>
+            ) : (
+              label
+            )}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};
+export default ContactUsForm;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Goals/AddGoal.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Goals/AddGoal.tsx
new file mode 100644
index 000000000..b752973c8
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Goals/AddGoal.tsx
@@ -0,0 +1,84 @@
+import { useForm } from "react-hook-form";
+import { CreateGoalPayload, GoalFormData } from "../types/goalType";
+import { toast } from "sonner";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useGoal } from "../hooks/useGoal";
+import GoalForm from "./Form";
+
+export const AddGoal = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    watch,
+    control,
+    setValue,
+  } = useForm<GoalFormData>({
+    defaultValues: {
+      GoalTitleEn: "",
+      GoalTitleAm: "",
+      GoalDescriptionAm: "",
+      GoalDescriptionEn: "",
+      isActive: false,
+    },
+  });
+  const navigate = useNavigate();
+  const { createItem, isCreating } = useGoal();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleCreateSubmit = async (GoalFormData: GoalFormData) => {
+    setIsSubmitting(true);
+    try {
+      const imageFile = GoalFormData.image?.[0];
+      if (!imageFile) {
+        throw new Error("images are required");
+      }
+      const payload: CreateGoalPayload = {
+        goalTitle: {
+          am: GoalFormData.GoalTitleAm || "",
+          en: GoalFormData.GoalTitleEn || "",
+        },
+        goalDescription: {
+          am: GoalFormData.GoalDescriptionEn || "",
+          en: GoalFormData.GoalDescriptionEn || "",
+        },
+        fileInfo: {
+          fileName: imageFile.name,
+          contentType: imageFile.type,
+          size: imageFile.size,
+          originalname: imageFile.name,
+        },
+        isActive: GoalFormData.isActive,
+      };
+      await createItem({
+        data: payload,
+        imageFile: imageFile,
+      });
+      toast.success(" created successfully");
+      navigate(-1);
+    } catch (error) {
+      toast.error("Failed to create Goal");
+      console.error("Creation error:", error);
+      setIsSubmitting(false);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const onCancel = () => {
+    navigate(-1);
+  };
+  return (
+    <GoalForm
+      handleSubmit={handleSubmit(handleCreateSubmit)}
+      handleCancel={onCancel}
+      watch={watch}
+      setValue={setValue}
+      control={control}
+      register={register}
+      errors={errors}
+      isSubmitting={isSubmitting}
+      label="Add Goal"
+    />
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Goals/EditGoal.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Goals/EditGoal.tsx
new file mode 100644
index 000000000..7362a8763
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Goals/EditGoal.tsx
@@ -0,0 +1,117 @@
+import {
+  Control,
+  FieldErrors,
+  useForm,
+  UseFormRegister,
+  UseFormReset,
+  UseFormSetValue,
+  UseFormWatch,
+} from "react-hook-form";
+import { useEffect, useMemo, useState } from "react";
+import { CreateGoalPayload, GoalFormData, GoalItem } from "../types/goalType";
+import { toast } from "sonner";
+import { useGoal } from "../hooks/useGoal";
+import { useNavigate, useParams } from "react-router-dom";
+import GoalForm from "./Form";
+
+export interface FormProps {
+  watch: UseFormWatch<GoalFormData>;
+  control: Control<GoalFormData>;
+  setValue: UseFormSetValue<GoalFormData>;
+  register: UseFormRegister<GoalFormData>;
+  errors: FieldErrors<GoalFormData>;
+  reset?: UseFormReset<GoalFormData>;
+  handleSubmit: (e: React.FormEvent) => void;
+  handleCancel: () => void;
+  isSubmitting: boolean;
+  item?: GoalItem;
+  label: string;
+}
+export const EditGoal = () => {
+  const { id } = useParams();
+  const { updateItem, singleItem: item } = useGoal(undefined, id);
+  const [editingItem, setEditingItem] = useState<boolean>(false);
+  const navigate = useNavigate();
+  const defaultValues = useMemo(
+    () => ({
+      GoalTitleEn: item?.goalTitle.en,
+      GoalTitleAm: item?.goalTitle.am,
+      GoalDescriptionAm: item?.goalDescription.am,
+      GoalDescriptionEn: item?.goalDescription.en,
+      isActive: item?.isActive,
+      image: undefined,
+    }),
+    [item] // 👈 recompute only when item changes
+  );
+  const {
+    register,
+    handleSubmit,
+    watch,
+    control,
+    setValue,
+    reset,
+    formState: { errors },
+  } = useForm<GoalFormData>({
+    defaultValues,
+  });
+  useEffect(() => {
+    if (item) {
+      reset(defaultValues);
+    }
+  }, [item, defaultValues, reset]);
+  const handleEditSubmit = async (GoalFormData: GoalFormData) => {
+    if (!item) return;
+    setEditingItem(true);
+    try {
+      const imageFile = GoalFormData.image?.[0];
+      const payload: CreateGoalPayload = {
+        goalTitle: {
+          am: GoalFormData.GoalTitleAm || "",
+          en: GoalFormData.GoalTitleEn || "",
+        },
+        goalDescription: {
+          am: GoalFormData.GoalDescriptionEn || "",
+          en: GoalFormData.GoalDescriptionEn || "",
+        },
+        fileInfo: imageFile
+          ? {
+              fileName: imageFile.name,
+              contentType: imageFile.type,
+              size: imageFile.size,
+              originalname: imageFile.name,
+            }
+          : undefined,
+        isActive: GoalFormData.isActive,
+      };
+
+      await updateItem({
+        id: item?.id || "",
+        data: payload,
+        ...(imageFile && { imageFile }),
+      });
+      toast.success("Goal updated successfully");
+      navigate(-1);
+    } catch (error) {
+      toast.error("Failed to update about us");
+      console.error("Update error:", error);
+      setEditingItem(false);
+    }
+  };
+  const onCancel = () => {
+    navigate(-1);
+  };
+  return (
+    <GoalForm
+      handleSubmit={handleSubmit(handleEditSubmit)}
+      handleCancel={onCancel}
+      watch={watch}
+      setValue={setValue}
+      control={control}
+      register={register}
+      errors={errors}
+      isSubmitting={editingItem}
+      label="Edit Goal"
+      item={item}
+    />
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Goals/Form.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Goals/Form.tsx
new file mode 100644
index 000000000..105a0d5d7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Goals/Form.tsx
@@ -0,0 +1,121 @@
+import { Button } from "@/shared/common/ui/button";
+import { Loader2 } from "lucide-react";
+import {
+  FormInputBox,
+  FormTextBox,
+  FormToggle,
+  ImageUpload,
+  Section,
+} from "../components/FormInputBox";
+import { useEffect, useState } from "react";
+import { FormProps } from "./EditGoal";
+
+const GoalForm = ({
+  handleSubmit,
+  handleCancel,
+  watch,
+  control,
+  setValue,
+  register,
+  errors,
+  isSubmitting,
+  reset,
+  item,
+  label,
+}: FormProps) => {
+  const imageFile = watch("image")?.[0];
+  const [imagePreview, setImage1Preview] = useState<string>(
+    item?.presigned || ""
+  );
+
+  useEffect(() => {
+    if (item?.presigned) {
+      setImage1Preview(item.presigned);
+    }
+  }, [item]);
+
+  // 🔹 when user picks a new image, show it
+  useEffect(() => {
+    if (imageFile) {
+      const url = URL.createObjectURL(imageFile);
+      setImage1Preview(url);
+      return () => URL.revokeObjectURL(url);
+    }
+  }, [imageFile]);
+  return (
+    <div className="max-h-[80vh] overflow-y-auto p-6 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
+      <form onSubmit={handleSubmit} className="space-y-8">
+        {/* Title Section */}
+        <FormInputBox
+          idEn="GoalTitleEn"
+          idAm="GoalTitleAm"
+          label="Title"
+          error="Title is Required"
+          errors={errors}
+          register={register}
+        />
+
+        {/* Description Section */}
+        <FormTextBox
+          idAm="GoalDescriptionAm"
+          idEn="GoalDescriptionEn"
+          label="Description"
+          error="Description is Required"
+          errors={errors}
+          register={register}
+        />
+
+        {/* isActive Toggle */}
+        <FormToggle
+          idAm="isActive"
+          label="Status"
+          watch={watch}
+          setValue={setValue}
+        />
+
+        {/* Image Upload */}
+        <Section title="Image">
+          <ImageUpload
+            label="Experience Image*"
+            preview={imagePreview}
+            existingName={item?.fileInfo?.originalname}
+            register={register("image")}
+            error={errors.image?.message}
+            onView={() => window.open(imagePreview, "_blank")}
+            id="image"
+            isRequired={false}
+          />
+        </Section>
+
+        {/* Actions */}
+        <div className="flex justify-end gap-3 pt-6 border-t border-gray-200 dark:border-gray-700">
+          <Button
+            variant="outline"
+            onClick={handleCancel}
+            type="button"
+            disabled={isSubmitting}
+            className="px-6 py-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700"
+          >
+            Cancel
+          </Button>
+
+          <Button
+            type="submit"
+            disabled={isSubmitting}
+            className="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white"
+          >
+            {isSubmitting ? (
+              <span className="flex items-center gap-2">
+                <Loader2 className="w-4 h-4 animate-spin" />
+                ...
+              </span>
+            ) : (
+              label
+            )}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};
+export default GoalForm;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Goals/GoalColumn.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Goals/GoalColumn.tsx
new file mode 100644
index 000000000..c48702f45
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Goals/GoalColumn.tsx
@@ -0,0 +1,106 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { Button } from "@/shared/common/ui/button";
+import { Trash2, Edit, Eye } from "lucide-react";
+import { GoalItem } from "../types/goalType";
+import { t } from "i18next";
+import i18n from "@/i18n";
+export const GoalColumnDefn = ({
+  onDelete,
+  navigate,
+}: {
+  navigate: (id: string) => void;
+  onDelete: (id: string) => Promise<void>;
+}): ColumnDef<GoalItem>[] => [
+    {
+      header: () => t("toogle.title"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        const lang = i18n.language;
+        if (lang === "am") {
+          return <span>{rowData.goalTitle?.am || "-"}</span>;
+        }
+        if (lang === "en") {
+          return <span>{rowData.goalTitle?.en || "-"}</span>;
+        } else {
+          return <span>{"-"}</span>;
+        }
+      },
+      enableHiding: true,
+      accessorKey: "title",
+    },
+    {
+      accessorKey: "status",
+      header: () => t("toogle.status"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        return (
+          <span
+            className={`px-2 py-1 rounded-full text-xs font-medium ${rowData.isActive
+                ? "bg-primary-100 text-primary-800"
+                : "bg-red-100 text-red-800"
+              }`}
+          >
+            {rowData.isActive ? "Active" : "Inactive"}
+          </span>
+        );
+      },
+      enableHiding: true,
+    },
+    {
+      accessorKey: "createdAt",
+      header: () => t("toogle.createdAt"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        const lang = i18n.language;
+        const amDate = rowData?.amharicCreatedAt;
+        const enDate = new Date(rowData.createdAt).toLocaleString("en-US", {
+          month: "short", // "Oct"
+          day: "numeric", // "12"
+          year: "numeric", // "2014"
+          hour: "numeric", // "8"
+          minute: "2-digit", // "12"
+          hour12: true, // "PM" format
+        });
+        const date = lang === "am" ? amDate : enDate;
+        return <span className="text-sm text-gray-500">{date}</span>;
+      },
+      enableHiding: true,
+    },
+    {
+      id: "Actions",
+      header: () => t("toogle.Actions"),
+      cell: ({ row }) => (
+        <div className="flex space-x-2">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() =>
+              navigate(
+                `/user-management/web-management/Goals/ViewGoal/${row.original.id}`
+              )
+            }
+          >
+            <Eye className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() =>
+              navigate(
+                `/user-management/web-management/Goals/EditGoal/${row.original.id}`
+              )
+            }
+          >
+            <Edit className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => onDelete(row.original.id)}
+          >
+            <Trash2 className="h-4 w-4 text-destructive" />
+          </Button>
+        </div>
+      ),
+    },
+  ];
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Goals/Goals.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Goals/Goals.tsx
new file mode 100644
index 000000000..e231f2969
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Goals/Goals.tsx
@@ -0,0 +1,86 @@
+import { NavLink, useNavigate } from "react-router-dom";
+import { CirclePlus } from "lucide-react";
+import { GoalColumnDefn } from "./GoalColumn";
+import { useTranslation } from "react-i18next";
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import { useMemo, useState } from "react";
+import Loader from "@/record-management/components/Loader/loader";
+import { Button } from "@/shared/common/ui/button";
+import { useGoal } from "../hooks/useGoal";
+import { ContactUsParams } from "../hooks/useContactUs";
+export const Goals = () => {
+  const [pageIndex, setPageIndex] = useState(0);
+  const navigate = useNavigate();
+  const pageSize = 10;
+  const { t } = useTranslation();
+  const baseParams = useMemo(() => {
+    const params: Record<string, any> = {
+      skip: pageIndex * pageSize,
+      take: pageSize,
+      orderBy: "createdAt:DESC",
+    };
+
+    return params;
+  }, [pageIndex]);
+
+  const { items, refetch, deleteItem, error, isLoading, count } =
+    useGoal(baseParams);
+  const handlePageChange = (newPage: number) => {
+    setPageIndex(newPage);
+  };
+  return (
+    <div className="flex flex-col h-full w-full p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700">
+      {/* Header Section */}
+      <div className="flex items-center justify-between mb-4 border-b pb-3 border-gray-200 dark:border-gray-700">
+        <h1 className="text-xl font-semibold text-gray-800 dark:text-gray-200">{t("Goals")}</h1>
+        {
+          <NavLink to="/user-management/web-Management/Goals/AddGoal">
+            <Button
+              variant="addRecordBtn"
+              className="flex items-center gap-1 bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition-all"
+            >
+              <CirclePlus className="w-4 h-4" />
+              <span>{t("addGoal")}</span>
+            </Button>
+          </NavLink>
+        }
+      </div>
+
+      {/* Content Section */}
+      <div className="flex-1 overflow-auto">
+        {isLoading && (
+          <div className="flex justify-center items-center h-48">
+            <Loader />
+          </div>
+        )}
+
+        {error && (
+          <p className="text-center text-red-500 text-sm mt-4">
+            {t("userRecord.Error loading records.")}
+          </p>
+        )}
+
+        {!isLoading && !error && (
+          <div className="mt-2">
+            <AdvancedTable
+              columns={GoalColumnDefn({
+                navigate,
+                onDelete: deleteItem,
+              })}
+              data={items || []}
+              tableName="Goals"
+              toolBarPosition="right"
+              extraToolbar={<div className="flex gap-2"></div>}
+              itemCount={count || 2}
+              pageIndex={pageIndex}
+              onPageChange={handlePageChange}
+              nextFunction={() => handlePageChange(pageIndex + 1)}
+              prevFunction={() => handlePageChange(Math.max(pageIndex - 1, 0))}
+              refresh={refetch}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Goals/ViewGoal.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Goals/ViewGoal.tsx
new file mode 100644
index 000000000..8d894f443
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Goals/ViewGoal.tsx
@@ -0,0 +1,106 @@
+import React from "react";
+import { ImageIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { MessageItem } from "../types/messageTypes";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useMessage } from "../hooks/useMessage";
+import { useParams } from "react-router-dom";
+import { useGoal } from "../hooks/useGoal";
+
+export const ViewGoal = () => {
+  const { i18n, t } = useTranslation();
+  const { id } = useParams<{ id: string }>();
+  const { singleItem: item } = useGoal(undefined, id);
+  const locale = i18n.language;
+  const localizedName = useLocalizedName();
+  return (
+    <div className="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl mb-12">
+      <div className="flex flex-col md:flex-row">
+        {/* Goal Content Section */}
+        <div className="md:w-2/3 p-6 md:p-8 flex flex-col justify-center">
+          <div className="mb-6">
+            <div className="flex items-center mb-6">
+              <div className="w-12 h-12 rounded-lg bg-gradient-to-r from-indigo-500 to-blue-600 flex items-center justify-center text-white text-2xl mr-4">
+                <ImageIcon className="w-6 h-6" />
+              </div>
+              <div>
+                <h3 className="text-lg font-semibold text-gray-600 uppercase tracking-wide">
+                  {t("Leadership Message")}
+                </h3>
+                <h2 className="text-2xl md:text-3xl font-bold text-gray-800 mt-1">
+                  {localizedName(item?.goalTitle)}
+                </h2>
+              </div>
+            </div>
+
+            <div className="min-h-[120px] flex items-center">
+              <p className="text-gray-700 text-lg leading-relaxed whitespace-pre-line">
+                {localizedName(item?.goalDescription)}
+              </p>
+            </div>
+          </div>
+
+          {/* Footer Section */}
+          <div className="mt-8 pt-6 border-t border-gray-200 flex flex-col md:flex-row md:items-center md:justify-between gap-3">
+            <div className="flex items-center gap-3">
+              <span className="text-sm font-medium text-gray-700">
+                {t("Status")}
+              </span>
+              <div
+                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${item?.isActive ? "bg-primary-500" : "bg-gray-300"
+                  }`}
+              >
+                <span
+                  className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${item?.isActive ? "translate-x-6" : "translate-x-1"
+                    }`}
+                />
+              </div>
+              <span
+                className={`text-sm font-medium ${item?.isActive ? "text-primary-600" : "text-gray-500"
+                  }`}
+              >
+                {item?.isActive ? t("Active") : t("Inactive")}
+              </span>
+            </div>
+
+            {item?.createdAt && (
+              <span className="text-sm text-gray-500">
+                {new Date(item.createdAt).toLocaleString(locale, {
+                  dateStyle: "medium",
+                  timeStyle: "short",
+                })}
+              </span>
+            )}
+          </div>
+        </div>
+
+        {/* Visual Section */}
+        <div className="md:w-1/3 bg-gradient-to-br from-blue-50 to-indigo-100 p-6 md:p-8 flex flex-col justify-center items-center">
+          <div className="text-center">
+            <div className="w-32 h-32 mx-auto mb-6 bg-white rounded-2xl shadow-lg flex items-center justify-center overflow-hidden">
+              {item?.presigned ? (
+                <img
+                  src={item.presigned}
+                  alt={localizedName(item.goalTitle)}
+                  className="w-full h-full object-cover rounded-2xl"
+                />
+              ) : (
+                <div className="flex flex-col items-center justify-center text-gray-400">
+                  <ImageIcon className="h-10 w-10" />
+                  <span className="text-sm mt-2">{t("No image available")}</span>
+                </div>
+              )}
+            </div>
+
+            <h3 className="text-xl font-bold text-gray-800 mb-2">
+              {t("Office Leadership")}
+            </h3>
+            <p className="text-gray-600 text-sm">
+              {t("Leading with vision and dedication to serve.")}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/LeadershipMessage/AddMessage.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/LeadershipMessage/AddMessage.tsx
new file mode 100644
index 000000000..dc04b7f73
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/LeadershipMessage/AddMessage.tsx
@@ -0,0 +1,99 @@
+import { useForm } from "react-hook-form";
+import { CreateMessagePayload, MessageFormData } from "../types/messageTypes";
+import { toast } from "sonner";
+import useSettings from "@/record-management/components/hooks/useSettings";
+import { EmployeeWithUnitDto } from "@/user-management/dto/employees/employees";
+import { KeyValue } from "@/record-management/types/recordSelectTypes";
+import { useLocalizedName } from "@/shared/common/localizedName";
+
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useMessage } from "../hooks/useMessage";
+import MessageForm from "./Form";
+
+export const AddMessage = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    watch,
+    control,
+    setValue,
+  } = useForm<MessageFormData>({
+    defaultValues: {
+      messageTitleEn: "",
+      messageTitleAm: "",
+      messageContentAm: "",
+      messageContentEn: "",
+      employeeId: "",
+      staffType: "",
+      isActive: false,
+    },
+  });
+  const { currentEmployeesResponse } = useSettings();
+  const localizedName = useLocalizedName();
+  const navigate = useNavigate();
+  const { createItem } = useMessage();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const employeesList: KeyValue[] =
+    currentEmployeesResponse?.items.map((employee: EmployeeWithUnitDto) => ({
+      label: localizedName(employee.user.name),
+      value: employee?.id ?? "",
+      employeePositionId: employee.employeePositions?.[0]?.id ?? "",
+    })) || [];
+  const handleCreateSubmit = async (MessageFormData: MessageFormData) => {
+    setIsSubmitting(true);
+    try {
+      const imageFile = MessageFormData.image?.[0];
+      if (!imageFile) {
+        throw new Error("images are required");
+      }
+      const payload: CreateMessagePayload = {
+        messageTitle: {
+          am: MessageFormData.messageTitleAm || "",
+          en: MessageFormData.messageTitleEn || "",
+        },
+        messageContent: {
+          am: MessageFormData.messageContentAm || "",
+          en: MessageFormData.messageContentEn || "",
+        },
+        fileInfo: {
+          fileName: imageFile.name,
+          contentType: imageFile.type,
+          size: imageFile.size,
+          originalname: imageFile.name,
+        },
+        isActive: MessageFormData.isActive,
+        staffType: MessageFormData.staffType,
+        employeeId: MessageFormData.employeeId,
+      };
+      await createItem({
+        data: payload,
+        imageFile: imageFile,
+      });
+      toast.success(" created successfully");
+      navigate(-1);
+    } catch (error) {
+      toast.error("Failed to create Message");
+      console.error("Creation error:", error);
+      setIsSubmitting(false);
+    }
+  };
+  const onCancel = () => {
+    navigate(-1);
+  };
+  return (
+    <MessageForm
+      handleSubmit={handleSubmit(handleCreateSubmit)}
+      handleCancel={onCancel}
+      watch={watch}
+      setValue={setValue}
+      control={control}
+      register={register}
+      errors={errors}
+      isSubmitting={isSubmitting}
+      employeesList={employeesList}
+      label="Add Message"
+    />
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/LeadershipMessage/EditMessage.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/LeadershipMessage/EditMessage.tsx
new file mode 100644
index 000000000..5dd96ee63
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/LeadershipMessage/EditMessage.tsx
@@ -0,0 +1,144 @@
+import {
+  Control,
+  FieldErrors,
+  useForm,
+  UseFormRegister,
+  UseFormReset,
+  UseFormSetValue,
+  UseFormWatch,
+} from "react-hook-form";
+import { useEffect, useMemo, useState } from "react";
+import { EmployeeWithUnitDto } from "@/user-management/dto/employees/employees";
+import { KeyValue } from "@/record-management/types/recordSelectTypes";
+import useSettings from "@/record-management/components/hooks/useSettings";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import {
+  CreateMessagePayload,
+  MessageFormData,
+  MessageItem,
+} from "../types/messageTypes";
+import { useNavigate, useParams } from "react-router-dom";
+import { useMessage } from "../hooks/useMessage";
+import { toast } from "sonner";
+import MessageForm from "./Form";
+
+export interface FormProps {
+  watch: UseFormWatch<MessageFormData>;
+  control: Control<MessageFormData>;
+  setValue: UseFormSetValue<MessageFormData>;
+  register: UseFormRegister<MessageFormData>;
+  errors: FieldErrors<MessageFormData>;
+  reset?: UseFormReset<MessageFormData>;
+  handleSubmit: (e: React.FormEvent) => void;
+  handleCancel: () => void;
+  isSubmitting: boolean;
+  employeesList: KeyValue[];
+  item?: MessageItem;
+  label: string;
+}
+export const EditMessage = () => {
+  const { id } = useParams();
+  const { singleItem: item, updateItem } = useMessage(undefined, id);
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const navigate = useNavigate();
+  const defaultValues = useMemo(
+    () => ({
+      messageTitleEn: item?.messageTitle?.en || "",
+      messageTitleAm: item?.messageTitle?.am || "",
+      messageContentAm: item?.messageContent?.am || "",
+      messageContentEn: item?.messageContent?.en || "",
+      employeeId: item?.employeeId || "",
+      isActive: item?.isActive ?? true,
+      staffType: item?.staffType || "",
+      image: undefined,
+    }),
+    [item] // 👈 recompute only when item changes
+  );
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    control,
+    setValue,
+    reset,
+    formState: { errors },
+  } = useForm<MessageFormData>({
+    defaultValues,
+  });
+  useEffect(() => {
+    if (item) {
+      reset(defaultValues);
+    }
+  }, [item, defaultValues, reset]);
+
+  const { currentEmployeesResponse } = useSettings();
+  const localizedName = useLocalizedName();
+  const employeesList: KeyValue[] =
+    currentEmployeesResponse?.items.map((employee: EmployeeWithUnitDto) => ({
+      label: localizedName(employee.user.name),
+      value: employee.id || "",
+      employeePositionId: employee.employeePositions?.[0]?.id ?? "",
+    })) || [];
+
+  const handleEditSubmit = async (MessageFormData: MessageFormData) => {
+    if (!item) return;
+    setIsSubmitting(true);
+    try {
+      const imageFile = MessageFormData.image?.[0];
+      const payload: CreateMessagePayload = {
+        messageTitle: {
+          am: MessageFormData.messageTitleAm || "",
+          en: MessageFormData.messageTitleEn || "",
+        },
+        messageContent: {
+          am: MessageFormData.messageContentAm || "",
+          en: MessageFormData.messageContentEn || "",
+        },
+        fileInfo: imageFile
+          ? {
+              fileName: imageFile.name,
+              contentType: imageFile.type,
+              size: imageFile.size,
+              originalname: imageFile.name,
+            }
+          : undefined,
+        isActive: MessageFormData.isActive,
+        staffType: MessageFormData.staffType,
+        employeeId: MessageFormData.employeeId,
+      };
+
+      await updateItem({
+        id: item?.id,
+        data: payload,
+        ...(imageFile && { imageFile }),
+      });
+
+      toast.success("message updated successfully");
+      navigate(-1);
+    } catch (error) {
+      toast.error("Failed to update about us");
+      console.error("Update error:", error);
+      setIsSubmitting(false);
+    }
+  };
+  const onCancel = () => {
+    navigate(-1);
+  };
+  return (
+    <MessageForm
+      handleSubmit={handleSubmit(handleEditSubmit)}
+      handleCancel={onCancel}
+      watch={watch}
+      setValue={setValue}
+      control={control}
+      register={register}
+      errors={errors}
+      isSubmitting={isSubmitting}
+      employeesList={employeesList}
+      reset={reset}
+      item={item}
+      label="Edit Message"
+    />
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/LeadershipMessage/Form.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/LeadershipMessage/Form.tsx
new file mode 100644
index 000000000..7b63f0073
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/LeadershipMessage/Form.tsx
@@ -0,0 +1,159 @@
+import { Button } from "@/shared/common/ui/button";
+import { Loader2 } from "lucide-react";
+
+import {
+  FormInputBox,
+  FormSelector,
+  FormTextBox,
+  FormToggle,
+  ImageUpload,
+  Section,
+} from "../components/FormInputBox";
+import { useEffect, useState } from "react";
+import { FormProps } from "./EditMessage";
+import { ContactUsList } from "../types/contactUs";
+
+const MessageForm = ({
+  handleSubmit,
+  handleCancel,
+  watch,
+  control,
+  setValue,
+  register,
+  errors,
+  isSubmitting,
+  employeesList,
+  reset,
+  item,
+  label,
+}: FormProps) => {
+  const MessageType: ContactUsList[] = [
+    {
+      label: "Office Head",
+      value: "office_head",
+    },
+    {
+      label: "Deputy",
+      value: "deputy",
+    },
+  ];
+  const imageFile = watch("image")?.[0];
+  const [imagePreview, setImage1Preview] = useState<string>(
+    item?.presigned || ""
+  );
+
+  useEffect(() => {
+    if (item?.presigned) {
+      setImage1Preview(item.presigned);
+    }
+  }, [item]);
+
+  // 🔹 when user picks a new image, show it
+  useEffect(() => {
+    if (imageFile) {
+      const url = URL.createObjectURL(imageFile);
+      setImage1Preview(url);
+      return () => URL.revokeObjectURL(url);
+    }
+  }, [imageFile]);
+  useEffect(() => {
+    if (employeesList.length && !watch("employeeId")) {
+      setValue("employeeId", employeesList[0].value);
+    }
+  }, [employeesList, setValue, watch]);
+  return (
+    <div className="max-h-[80vh] overflow-y-auto p-6 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
+      <form onSubmit={handleSubmit} className="space-y-8">
+        {/* message type */}
+        <FormSelector
+          id="staffType"
+          label="Message Type"
+          error="Type is Required"
+          errors={errors}
+          register={register}
+          control={control}
+          item={MessageType}
+        />
+        {/* Employee Selection */}
+        <FormSelector
+          id="employeeId"
+          label="Select Employee"
+          error="Employee is Required"
+          errors={errors}
+          register={register}
+          control={control}
+          item={employeesList}
+        />
+        {/* Title Section */}
+        <FormInputBox
+          idEn="messageTitleEn"
+          idAm="messageTitleAm"
+          label="Title"
+          error="Title is Required"
+          errors={errors}
+          register={register}
+        />
+
+        {/* Content Section */}
+        <FormTextBox
+          idAm="messageContentAm"
+          idEn="messageContentEn"
+          label="Content"
+          error="Content is Required"
+          errors={errors}
+          register={register}
+        />
+        {/* isActive Toggle */}
+        <FormToggle
+          idAm="isActive"
+          label="Status"
+          watch={watch}
+          setValue={setValue}
+        />
+
+        {/* Image Upload */}
+        <Section title="Image">
+          <ImageUpload
+            label="Experience Image*"
+            preview={imagePreview}
+            existingName={item?.fileInfo?.originalname}
+            register={register("image")}
+            error={errors.image?.message}
+            onView={() => window.open(imagePreview, "_blank")}
+            id="image"
+            isRequired={false}
+          />
+        </Section>
+
+        {/* Actions */}
+        <div className="flex justify-end gap-3 pt-6 border-t border-gray-200 dark:border-gray-700">
+          <Button
+            variant="outline"
+            onClick={handleCancel}
+            type="button"
+            disabled={isSubmitting}
+            className="px-6 py-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700"
+          >
+            Cancel
+          </Button>
+
+          <Button
+            type="submit"
+            disabled={isSubmitting}
+            className="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white"
+          >
+            {isSubmitting ? (
+              <span className="flex items-center gap-2">
+                <Loader2 className="w-4 h-4 animate-spin" />
+                ...
+              </span>
+            ) : (
+              label
+            )}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};
+export default MessageForm;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/LeadershipMessage/MessageColumn.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/LeadershipMessage/MessageColumn.tsx
new file mode 100644
index 000000000..a8df255bd
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/LeadershipMessage/MessageColumn.tsx
@@ -0,0 +1,105 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { Button } from "@/shared/common/ui/button";
+import { Trash2, Edit, Eye } from "lucide-react";
+import { MessageItem } from "../types/messageTypes";
+import { t } from "i18next";
+import i18n from "@/i18n";
+export const MessageColumnDefn = ({
+  navigate,
+  onDelete,
+}: {
+  navigate: (id: string) => void;
+  onDelete: (id: string) => Promise<void>;
+}): ColumnDef<MessageItem>[] => [
+  {
+    header: () => t("toogle.title"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      const lang = i18n.language;
+      return (
+        <span>
+          {lang === "en" ? rowData.messageTitle.en : rowData.messageTitle.am}
+        </span>
+      );
+    },
+    enableHiding: true,
+    accessorKey: "title",
+  },
+  {
+    accessorKey: "status",
+    header: () => t("toogle.status"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      return (
+        <span
+          className={`px-2 py-1 rounded-full text-xs font-medium ${
+            rowData.isActive
+              ? "bg-primary-100 text-primary-800"
+              : "bg-red-100 text-red-800"
+          }`}
+        >
+          {rowData.isActive ? "Active" : "Inactive"}
+        </span>
+      );
+    },
+    enableHiding: true,
+  },
+  {
+    accessorKey: "createdAt",
+    header: () => t("toogle.createdAt"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      const lang = i18n.language;
+      const amDate = rowData?.amharicCreatedAt;
+      const enDate = new Date(rowData.createdAt).toLocaleString("en-US", {
+        month: "short", // "Oct"
+        day: "numeric", // "12"
+        year: "numeric", // "2014"
+        hour: "numeric", // "8"
+        minute: "2-digit", // "12"
+        hour12: true, // "PM" format
+      });
+      const date = lang === "am" ? amDate : enDate;
+      return <span className="text-sm text-gray-500">{date}</span>;
+    },
+    enableHiding: true,
+  },
+  {
+    accessorKey: "Actions",
+    header: () => t("toogle.Actions"),
+    cell: ({ row }) => (
+      <div className="flex space-x-2">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() =>
+            navigate(
+              `/user-management/web-management/LeadershipMessage/ViewLeadershipMessage/${row.original.id}`
+            )
+          }
+        >
+          <Eye className="h-4 w-4" />
+        </Button>
+
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() =>
+            navigate(
+              `/user-management/web-management/LeadershipMessage/EditLeadershipMessage/${row.original.id}`
+            )
+          }
+        >
+          <Edit className="h-4 w-4" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => onDelete(row.original.id)}
+        >
+          <Trash2 className="h-4 w-4 text-destructive" />
+        </Button>
+      </div>
+    ),
+  },
+];
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/LeadershipMessage/Messages.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/LeadershipMessage/Messages.tsx
new file mode 100644
index 000000000..3be568f03
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/LeadershipMessage/Messages.tsx
@@ -0,0 +1,87 @@
+import { NavLink, useNavigate } from "react-router-dom";
+import { CirclePlus } from "lucide-react";
+import { MessageColumnDefn } from "./MessageColumn";
+import { useTranslation } from "react-i18next";
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import { useMemo, useState } from "react";
+import Loader from "@/record-management/components/Loader/loader";
+import { Button } from "@/shared/common/ui/button";
+import { useMessage } from "../hooks/useMessage";
+export const Messages = () => {
+  const [pageIndex, setPageIndex] = useState(0);
+  const navigate = useNavigate();
+  const pageSize = 10;
+  const { t } = useTranslation();
+  const baseParams = useMemo(() => {
+    const params: Record<string, any> = {
+      skip: pageIndex * pageSize,
+      take: pageSize,
+      orderBy: "createdAt:DESC",
+    };
+
+    return params;
+  }, [pageIndex]);
+
+  const { items, refetch, deleteItem, error, isLoading, count } =
+    useMessage(baseParams);
+  const handlePageChange = (newPage: number) => {
+    setPageIndex(newPage);
+  };
+  return (
+    <div className="flex flex-col h-full w-full p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700">
+      {/* Header Section */}
+      <div className="flex items-center justify-between mb-4 border-b pb-3 border-gray-200 dark:border-gray-700">
+        <h1 className="text-xl font-semibold text-gray-800 dark:text-gray-200">
+          {t("officeHead.title")}
+        </h1>
+        {
+          <NavLink to="/user-management/web-Management/LeadershipMessage/AddLeadershipMessage">
+            <Button
+              variant="addRecordBtn"
+              className="flex items-center gap-1 bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition-all"
+            >
+              <CirclePlus className="w-4 h-4" />
+              <span>{t("officeHead.addMessage")}</span>
+            </Button>
+          </NavLink>
+        }
+      </div>
+
+      {/* Content Section */}
+      <div className="flex-1 overflow-auto">
+        {isLoading && (
+          <div className="flex justify-center items-center h-48">
+            <Loader />
+          </div>
+        )}
+
+        {error && (
+          <p className="text-center text-red-500 text-sm mt-4">
+            {t("userRecord.Error loading records.")}
+          </p>
+        )}
+
+        {!isLoading && !error && (
+          <div className="mt-2">
+            <AdvancedTable
+              columns={MessageColumnDefn({
+                navigate,
+                onDelete: deleteItem,
+              })}
+              data={items || []}
+              tableName="LeadershipMessages"
+              toolBarPosition="right"
+              extraToolbar={<div className="flex gap-2"></div>}
+              itemCount={count || 2}
+              pageIndex={pageIndex}
+              onPageChange={handlePageChange}
+              nextFunction={() => handlePageChange(pageIndex + 1)}
+              prevFunction={() => handlePageChange(Math.max(pageIndex - 1, 0))}
+              refresh={refetch}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/LeadershipMessage/ViewDeputy.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/LeadershipMessage/ViewDeputy.tsx
new file mode 100644
index 000000000..243b18375
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/LeadershipMessage/ViewDeputy.tsx
@@ -0,0 +1,92 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { MessageItem } from "../types/messageTypes";
+
+interface ViewMessageProps {
+  item: MessageItem;
+}
+
+export const ViewMessage = ({ item }: ViewMessageProps) => {
+  const { t } = useTranslation();
+  const localizedName = useLocalizedName();
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-primary-50 to-primary-100 flex items-center justify-center p-4 md:p-8">
+      <div className="max-w-6xl w-full">
+        {/* Header */}
+        <div className="text-center mb-12">
+          <h1 className="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
+            {localizedName(item.messageTitle) || t("Leadership Message")}
+          </h1>
+          <div className="w-24 h-1 bg-primary-600 mx-auto"></div>
+          <p className="text-gray-600 mt-4 max-w-2xl mx-auto">
+            {t("Message from our leadership")}
+          </p>
+        </div>
+
+        {/* Message Card */}
+        <div className="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl">
+          <div className="flex flex-col md:flex-row">
+            {/* Image Section with overlay */}
+            <div className="md:w-2/5 relative">
+              <img
+                src={item.presigned || "/placeholder.jpg"}
+                alt={localizedName(item.messageTitle) || "Leadership"}
+                className="w-full h-64 md:h-full object-cover transition-opacity duration-500"
+              />
+
+              {/* Overlay with name & position */}
+              {/* <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent flex items-end p-6 md:p-8">
+                <div>
+                  <h2 className="text-2xl md:text-3xl font-bold text-white mb-2">
+                    {localizedName(item.employeeName) || t("Office Head")}
+                  </h2>
+                  <p className="text-gray-200 text-lg">
+                    {localizedName(item.employeePosition) || ""}
+                  </p>
+                </div>
+              </div> */}
+            </div>
+
+            {/* Message Content Section */}
+            <div className="md:w-3/5 p-6 md:p-8 flex flex-col justify-center">
+              <div className="mb-6">
+                <div className="flex items-center mb-6">
+                  <div className="w-10 h-1 bg-primary-600 mr-3"></div>
+                  <h3 className="text-lg font-semibold text-primary-600 uppercase tracking-wide">
+                    {localizedName(item.messageTitle) ||
+                      t("Leadership Message")}
+                  </h3>
+                </div>
+
+                {/* Localized Message Content */}
+                <div className="min-h-[200px] flex items-center">
+                  <p className="text-gray-700 text-lg leading-relaxed">
+                    {localizedName(item.messageContent) ||
+                      t("No content available")}
+                  </p>
+                </div>
+              </div>
+
+              {/* Status Section */}
+              <div className="mt-8 flex justify-end items-center gap-3 border-t pt-4">
+                <span className="text-sm font-medium text-gray-700">
+                  {t("Status")}:
+                </span>
+                <span
+                  className={`px-4 py-2 text-sm font-semibold rounded-full ${
+                    item.isActive
+                      ? "bg-primary-100 text-primary-700"
+                      : "bg-gray-200 text-gray-600"
+                  }`}>
+                  {item.isActive ? t("Active") : t("Inactive")}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/LeadershipMessage/ViewMessage.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/LeadershipMessage/ViewMessage.tsx
new file mode 100644
index 000000000..f71bb6e49
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/LeadershipMessage/ViewMessage.tsx
@@ -0,0 +1,137 @@
+import React from "react";
+import { ImageIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { MessageItem } from "../types/messageTypes";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useMessage } from "../hooks/useMessage";
+import { useParams } from "react-router-dom";
+
+export const ViewMessage = () => {
+  const { i18n, t } = useTranslation();
+  const { id } = useParams<{ id: string }>();
+  const { singleItem: item } = useMessage(undefined, id);
+  const locale = i18n.language;
+  const localizedName = useLocalizedName();
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4 md:p-8">
+      <div className="max-w-6xl w-full">
+        {/* Header */}
+        <div className="text-center mb-12">
+          <h1 className="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
+            {t("Leadership Message")}
+          </h1>
+          <div className="w-24 h-1 bg-indigo-600 mx-auto"></div>
+        </div>
+
+        {/* Card */}
+        <div className="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl">
+          <div className="flex flex-col md:flex-row">
+            {/* Image Section */}
+            <div className="md:w-2/5 relative">
+              {item?.presigned ? (
+                <img
+                  src={item.presigned}
+                  alt={localizedName(item.messageTitle)}
+                  className="w-full h-64 md:h-full object-cover"
+                />
+              ) : (
+                <div className="w-full h-64 md:h-full flex items-center justify-center bg-gray-100 text-gray-400">
+                  <ImageIcon className="h-10 w-10" />
+                  <span className="ml-2">{t("No image available")}</span>
+                </div>
+              )}
+
+              {/* Overlay with title */}
+              <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent flex items-end p-6 md:p-8">
+                <div>
+                  <h2 className="text-2xl md:text-3xl font-bold text-white mb-2">
+                    {localizedName(item?.messageTitle)}
+                  </h2>
+                  <p className="text-gray-200 text-lg">
+                    {t("Office Leadership")}
+                  </p>
+                </div>
+              </div>
+
+              {/* Checkmark */}
+              <div className="absolute top-6 right-6 bg-white text-indigo-600 rounded-full p-2 shadow-lg">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-6 w-6"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M5 13l4 4L19 7"
+                  />
+                </svg>
+              </div>
+            </div>
+
+            {/* Message Section */}
+            <div className="md:w-3/5 p-6 md:p-8 flex flex-col justify-center">
+              <div className="mb-6">
+                <div className="flex items-center mb-6">
+                  <div className="w-10 h-1 bg-indigo-600 mr-3"></div>
+                  <h3 className="text-lg font-semibold text-indigo-600 uppercase tracking-wide">
+                    {t("Message Content")}
+                  </h3>
+                </div>
+
+                <div className="max-h-96 overflow-y-auto pr-4 custom-scrollbar">
+                  <p className="text-gray-700 text-lg leading-relaxed whitespace-pre-line">
+                    {localizedName(item?.messageContent)}
+                  </p>
+                </div>
+              </div>
+
+              {/* Footer Section */}
+              <div className="mt-8 pt-6 border-t border-gray-200 flex flex-col md:flex-row md:items-center md:justify-between gap-3">
+                {/* Status Toggle */}
+                <div className="flex items-center gap-3">
+                  <span className="text-sm font-medium text-gray-700">
+                    {t("Status")}
+                  </span>
+                  <div
+                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                      item?.isActive ? "bg-primary-500" : "bg-gray-300"
+                    }`}
+                  >
+                    <span
+                      className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                        item?.isActive ? "translate-x-6" : "translate-x-1"
+                      }`}
+                    />
+                  </div>
+                  <span
+                    className={`text-sm font-medium ${
+                      item?.isActive ? "text-primary-600" : "text-gray-500"
+                    }`}
+                  >
+                    {item?.isActive ? t("Active") : t("Inactive")}
+                  </span>
+                </div>
+
+                {/* Date */}
+                {item?.createdAt && (
+                  <span className="text-sm text-gray-500">
+                    {locale === "en"
+                      ? new Date(item.createdAt).toLocaleString(locale, {
+                          dateStyle: "medium",
+                          timeStyle: "short",
+                        })
+                      : item.amharicCreatedAt}
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Modules/AddModules.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Modules/AddModules.tsx
new file mode 100644
index 000000000..387a54505
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Modules/AddModules.tsx
@@ -0,0 +1,75 @@
+import { useForm } from "react-hook-form";
+import { CreateModulesPayload, ModulesFormData } from "../types/modulesType";
+import { toast } from "sonner";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useModules } from "../hooks/useModules";
+import ModulesForm from "./Form";
+
+export const AddModules = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    watch,
+    control,
+    setValue,
+  } = useForm<ModulesFormData>({
+    defaultValues: {
+      labelAm: "",
+      labelEn: "",
+      descriptionEn: "",
+      descriptionAm: "",
+      link: "",
+      isActive: false,
+    },
+  });
+  const navigate = useNavigate();
+  const { createItem, isCreating } = useModules();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleCreateSubmit = async (ModulesFormData: ModulesFormData) => {
+    setIsSubmitting(true);
+    try {
+      const payload: CreateModulesPayload = {
+        label: {
+          am: ModulesFormData.labelAm || "",
+          en: ModulesFormData.labelEn || "",
+        },
+        description: {
+          am: ModulesFormData.descriptionAm || "",
+          en: ModulesFormData.descriptionEn || "",
+        },
+        link: ModulesFormData.link,
+        isActive: ModulesFormData.isActive,
+      };
+      await createItem({
+        data: payload,
+      });
+      toast.success(" created successfully");
+      navigate(-1);
+    } catch (error) {
+      toast.error("Failed to create Modules");
+      console.error("Creation error:", error);
+      setIsSubmitting(false);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const onCancel = () => {
+    navigate(-1);
+  };
+  return (
+    <ModulesForm
+      handleSubmit={handleSubmit(handleCreateSubmit)}
+      handleCancel={onCancel}
+      watch={watch}
+      setValue={setValue}
+      control={control}
+      register={register}
+      errors={errors}
+      isSubmitting={isSubmitting}
+      label="Add Module"
+    />
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Modules/EditModules.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Modules/EditModules.tsx
new file mode 100644
index 000000000..d632cb490
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Modules/EditModules.tsx
@@ -0,0 +1,111 @@
+import {
+  Control,
+  FieldErrors,
+  useForm,
+  UseFormRegister,
+  UseFormReset,
+  UseFormSetValue,
+  UseFormWatch,
+} from "react-hook-form";
+import {
+  CreateModulesPayload,
+  ModulesFormData,
+  ModulesItem,
+} from "../types/modulesType";
+import { useModules } from "../hooks/useModules";
+import { useNavigate, useParams } from "react-router-dom";
+import { toast } from "sonner";
+import { useEffect, useMemo, useState } from "react";
+import ModulesForm from "./Form";
+
+export interface FormProps {
+  watch: UseFormWatch<ModulesFormData>;
+  control: Control<ModulesFormData>;
+  setValue: UseFormSetValue<ModulesFormData>;
+  register: UseFormRegister<ModulesFormData>;
+  errors: FieldErrors<ModulesFormData>;
+  reset?: UseFormReset<ModulesFormData>;
+  handleSubmit: (e: React.FormEvent) => void;
+  handleCancel: () => void;
+  isSubmitting: boolean;
+  item?: ModulesItem;
+  label: string;
+}
+export const EditModules = () => {
+  const { id } = useParams();
+  const { singleItem: item, updateItem } = useModules(undefined, id);
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const navigate = useNavigate();
+  const defaultValues = useMemo(
+    () => ({
+      labelAm: item?.label.am,
+      labelEn: item?.label.en,
+      descriptionEn: item?.description.en,
+      descriptionAm: item?.description.am,
+      link: item?.link,
+      isActive: item?.isActive,
+    }),
+    [item] // 👈 recompute only when item changes
+  );
+  const {
+    register,
+    handleSubmit,
+    watch,
+    control,
+    reset,
+    setValue,
+    formState: { errors },
+  } = useForm<ModulesFormData>({
+    defaultValues,
+  });
+  useEffect(() => {
+    if (item) {
+      reset(defaultValues);
+    }
+  }, [item, defaultValues, reset]);
+  const handleEditSubmit = async (ModulesFormData: ModulesFormData) => {
+    if (!item) return;
+    setIsSubmitting(true);
+    try {
+      const payload: CreateModulesPayload = {
+        label: {
+          am: ModulesFormData.labelAm || "",
+          en: ModulesFormData.labelEn || "",
+        },
+        description: {
+          am: ModulesFormData.descriptionAm || "",
+          en: ModulesFormData.descriptionEn || "",
+        },
+        link: ModulesFormData.link,
+        isActive: ModulesFormData.isActive,
+      };
+
+      await updateItem({
+        id: item?.id,
+        data: payload,
+      });
+      toast.success("Modules updated successfully");
+      navigate(-1);
+    } catch (error) {
+      toast.error("Failed to update about us");
+      console.error("Update error:", error);
+      setIsSubmitting(false);
+    }
+  };
+  const onCancel = () => {
+    navigate(-1);
+  };
+  return (
+    <ModulesForm
+      handleSubmit={handleSubmit(handleEditSubmit)}
+      handleCancel={onCancel}
+      watch={watch}
+      setValue={setValue}
+      control={control}
+      register={register}
+      errors={errors}
+      isSubmitting={isSubmitting}
+      label="Edit Module"
+    />
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Modules/Form.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Modules/Form.tsx
new file mode 100644
index 000000000..bbd7012de
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Modules/Form.tsx
@@ -0,0 +1,97 @@
+import { Button } from "@/shared/common/ui/button";
+import { Loader2 } from "lucide-react";
+import {
+  FormInputBox,
+  FormSingleBox,
+  FormTextBox,
+  FormToggle,
+} from "../components/FormInputBox";
+import { FormProps } from "./EditModules";
+
+const ModulesForm = ({
+  handleSubmit,
+  handleCancel,
+  watch,
+  control,
+  setValue,
+  register,
+  errors,
+  isSubmitting,
+  reset,
+  item,
+  label,
+}: FormProps) => {
+  return (
+    <div className="max-h-[80vh] overflow-y-auto p-6 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
+      <form onSubmit={handleSubmit} className="space-y-8">
+        {/* Title Section */}
+        <FormInputBox
+          idEn="labelEn"
+          idAm="labelAm"
+          label="Label"
+          error="Label is Required"
+          errors={errors}
+          register={register}
+        />
+
+        {/* Description Section */}
+        <FormTextBox
+          idAm="descriptionAm"
+          idEn="descriptionEn"
+          label="Description"
+          error="Description is Required"
+          errors={errors}
+          register={register}
+        />
+        {/* link Section */}
+        <FormSingleBox
+          id="link"
+          label="Value"
+          watch={watch}
+          setValue={setValue}
+          register={register}
+          error="Value is required"
+          errors={errors}
+          type="link"
+        />
+
+        {/* isActive Toggle */}
+        <FormToggle
+          idAm="isActive"
+          label="Status"
+          watch={watch}
+          setValue={setValue}
+        />
+
+        {/* Actions */}
+        <div className="flex justify-end gap-3 pt-6 border-t border-gray-200 dark:border-gray-700">
+          <Button
+            variant="outline"
+            onClick={handleCancel}
+            type="button"
+            disabled={isSubmitting}
+            className="px-6 py-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700"
+          >
+            Cancel
+          </Button>
+
+          <Button
+            type="submit"
+            disabled={isSubmitting}
+            className="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white"
+          >
+            {isSubmitting ? (
+              <span className="flex items-center gap-2">
+                <Loader2 className="w-4 h-4 animate-spin" />
+                ...
+              </span>
+            ) : (
+              label
+            )}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};
+export default ModulesForm;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Modules/Modules.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Modules/Modules.tsx
new file mode 100644
index 000000000..321504beb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Modules/Modules.tsx
@@ -0,0 +1,85 @@
+import { NavLink, useNavigate } from "react-router-dom";
+import { CirclePlus } from "lucide-react";
+import { ModulesColumnDefn } from "./ModulesColumn";
+import { useTranslation } from "react-i18next";
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import { useMemo, useState } from "react";
+import Loader from "@/record-management/components/Loader/loader";
+import { Button } from "@/shared/common/ui/button";
+import { useModules } from "../hooks/useModules";
+export const Modules = () => {
+  const [pageIndex, setPageIndex] = useState(0);
+  const navigate = useNavigate();
+  const pageSize = 10;
+  const { t } = useTranslation();
+  const baseParams = useMemo(() => {
+    const params: Record<string, any> = {
+      skip: pageIndex * pageSize,
+      take: pageSize,
+      orderBy: "createdAt:DESC",
+    };
+
+    return params;
+  }, [pageIndex]);
+
+  const { items, refetch, deleteItem, error, isLoading, count } =
+    useModules(baseParams);
+  const handlePageChange = (newPage: number) => {
+    setPageIndex(newPage);
+  };
+  
+  return (
+    <div className="flex flex-col h-full w-full p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700">
+      {/* Header Section */}
+      <div className="flex items-center justify-between mb-4 border-b pb-3 border-gray-200 dark:border-gray-700">
+        <h1 className="text-xl font-semibold text-gray-800 dark:text-gray-200">{t("modules")}</h1>
+        {
+          <NavLink to="/user-management/web-Management/Modules/AddModules">
+            <Button
+              variant="addRecordBtn"
+              className="flex items-center gap-1 bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition-all">
+              <CirclePlus className="w-4 h-4" />
+              <span>{t("addModules")}</span>
+            </Button>
+          </NavLink>
+        }
+      </div>
+
+      {/* Content Section */}
+      <div className="flex-1 overflow-auto">
+        {isLoading && (
+          <div className="flex justify-center items-center h-48">
+            <Loader />
+          </div>
+        )}
+
+        {error && (
+          <p className="text-center text-red-500 text-sm mt-4">
+            {t("userRecord.Error loading records.")}
+          </p>
+        )}
+
+        {!isLoading && !error && (
+          <div className="mt-2">
+            <AdvancedTable
+              columns={ModulesColumnDefn({
+                navigate,
+                onDelete: deleteItem,
+              })}
+              data={items || []}
+              tableName="Moduless"
+              toolBarPosition="right"
+              extraToolbar={<div className="flex gap-2"></div>}
+              itemCount={count || 2}
+              pageIndex={pageIndex}
+              onPageChange={handlePageChange}
+              nextFunction={() => handlePageChange(pageIndex + 1)}
+              prevFunction={() => handlePageChange(Math.max(pageIndex - 1, 0))}
+              refresh={refetch}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Modules/ModulesColumn.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Modules/ModulesColumn.tsx
new file mode 100644
index 000000000..4cb453448
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Modules/ModulesColumn.tsx
@@ -0,0 +1,121 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { Button } from "@/shared/common/ui/button";
+import { Trash2, Edit } from "lucide-react";
+import { ModulesItem } from "../types/modulesType";
+import { t } from "i18next";
+import i18n from "@/i18n";
+export const ModulesColumnDefn = ({
+  //  onDelete,
+  navigate,
+  onDelete,
+}: {
+  navigate: (id: string) => void;
+  onDelete: (id: string) => Promise<void>;
+}): ColumnDef<ModulesItem>[] => [
+    {
+      accessorKey: "title",
+      header: () => t("toogle.title"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        const lang = i18n.language;
+        if (lang === "am") {
+          return <span>{rowData.label?.am || "-"}</span>;
+        }
+        if (lang === "en") {
+          return <span>{rowData.label?.en || "-"}</span>;
+        } else {
+          return <span>{"-"}</span>;
+        }
+      },
+      enableHiding: true,
+    },
+    {
+      accessorKey: "description",
+      header: () => t("toogle.description"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        const lang = i18n.language;
+        const description =
+          lang === "am" ? rowData.description?.am : rowData.description?.en;
+        return (
+          <span className="text-sm text-gray-600 max-w-xs truncate block">
+            {description || "-"}
+          </span>
+        );
+      },
+      enableHiding: true,
+    },
+    {
+      accessorKey: "link",
+      header: () => t("toogle.link"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        return <span>{rowData.link || "-"}</span>;
+      },
+      enableHiding: true,
+    },
+    {
+      accessorKey: "status",
+      header: () => t("toogle.status"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        return (
+          <span
+            className={`px-2 py-1 rounded-full text-xs font-medium ${rowData.isActive
+                ? "bg-primary-100 text-primary-800"
+                : "bg-red-100 text-red-800"
+              }`}
+          >
+            {rowData.isActive ? "Active" : "Inactive"}
+          </span>
+        );
+      },
+      enableHiding: true,
+    },
+    {
+      accessorKey: "createdAt",
+      header: () => t("toogle.createdAt"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        const lang = i18n.language;
+        const amDate = rowData?.amharicCreatedAt;
+        const enDate = new Date(rowData.createdAt).toLocaleString("en-US", {
+          month: "short", // "Oct"
+          day: "numeric", // "12"
+          year: "numeric", // "2014"
+          hour: "numeric", // "8"
+          minute: "2-digit", // "12"
+          hour12: true, // "PM" format
+        });
+        const date = lang === "am" ? amDate : enDate;
+        return <span className="text-sm text-gray-500">{date}</span>;
+      },
+      enableHiding: true,
+    },
+    {
+      accessorKey: "Actions",
+      header: () => t("toogle.Actions"),
+      cell: ({ row }) => (
+        <div className="flex space-x-2">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() =>
+              navigate(
+                `/user-management/web-management/Modules/EditModules/${row.original.id}`
+              )
+            }
+          >
+            <Edit className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => onDelete(row.original.id)}
+          >
+            <Trash2 className="h-4 w-4 text-destructive" />
+          </Button>
+        </div>
+      ),
+    },
+  ];
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/News/AddNews.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/News/AddNews.tsx
new file mode 100644
index 000000000..35ff836c0
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/News/AddNews.tsx
@@ -0,0 +1,356 @@
+import { useForm } from "react-hook-form";
+import { Button } from "@/shared/common/ui/button";
+import { Label } from "@/shared/common/ui/label";
+import { Textarea } from "@/shared/common/ui/textarea";
+import { FormFeild } from "../components/FormFeild";
+import { Loader2 } from "lucide-react";
+import { CreateNewsPayload } from "../types/newsTypes";
+import { toast } from "sonner";
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { useNews } from "../hooks/useNews";
+import { useNewsCategory } from "../hooks/useNewsCategory";
+import { ContactUsParams } from "../hooks/useContactUs";
+
+interface FormData {
+  titleEn: string;
+  titleAm: string;
+  subTitleAm: string;
+  subTitleEn: string;
+  bodyAm: string;
+  bodyEn: string;
+  newsCategoryId: string;
+  image: FileList;
+  isActive: boolean;
+  isFeatured: boolean;
+}
+
+export const AddNews = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    watch,
+    setValue,
+  } = useForm<FormData>({
+    defaultValues: {
+      titleEn: "",
+      titleAm: "",
+      subTitleAm: "",
+      subTitleEn: "",
+      bodyAm: "",
+      bodyEn: "",
+      newsCategoryId: "",
+      isActive: false,
+      isFeatured: false,
+    },
+  });
+
+  const navigate = useNavigate();
+  const { createItem } = useNews();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const dynamicParams: Record<string, any> = {
+    skip: 0,
+    take: 100,
+    orderBy: "createdAt:DESC",
+  };
+
+  const baseParams: ContactUsParams = {
+    isActive: true, // required
+    ...dynamicParams,
+  };
+
+  // Fetch news categories for dropdown
+  const { items: categories } = useNewsCategory(baseParams);
+
+  const handleCreateSubmit = async (formData: FormData) => {
+    setIsSubmitting(true);
+    try {
+      const imageFile = formData.image?.[0];
+      if (!imageFile) {
+        throw new Error("Image is required");
+      }
+
+      const payload: CreateNewsPayload = {
+        newsCategoryId: formData.newsCategoryId,
+        title: {
+          am: formData.titleAm || "",
+          en: formData.titleEn || "",
+        },
+        subTitle: {
+          am: formData.subTitleAm || "",
+          en: formData.subTitleEn || "",
+        },
+        body: {
+          am: formData.bodyAm || "",
+          en: formData.bodyEn || "",
+        },
+        fileInfo: {
+          fileName: imageFile.name,
+          contentType: imageFile.type,
+          size: imageFile.size,
+          originalname: imageFile.name,
+        },
+        isActive: formData.isActive,
+        isFeatured: formData.isFeatured,
+      };
+
+      await createItem({
+        data: payload,
+        imageFile: imageFile,
+      });
+
+      toast.success("News created successfully");
+      navigate("/user-management/web-Management/News/news");
+    } catch (error) {
+      toast.error("Failed to create news");
+      console.error("Creation error:", error);
+      setIsSubmitting(false);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const onCancel = () => {
+    navigate(-1);
+  };
+
+  return (
+    <div className="max-h-[80vh] overflow-y-auto p-6 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
+      <form onSubmit={handleSubmit(handleCreateSubmit)} className="space-y-8">
+        {/* Category Selection */}
+        <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
+          <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
+            <div className="h-1 w-4 bg-blue-500 mr-2 rounded-full"></div>
+            Category
+          </h3>
+          <div className="space-y-2">
+            <Label htmlFor="newsCategoryId" className="text-gray-700 dark:text-gray-300">
+              News Category*
+            </Label>
+            <select
+              id="newsCategoryId"
+              {...register("newsCategoryId", {
+                required: "Category is required",
+              })}
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 dark:bg-gray-600 dark:text-gray-200"
+            >
+              <option value="">Select a category</option>
+              {categories?.map((category) => (
+                <option key={category.id} value={category.id}>
+                  {category.newsCategoryTitle?.en || "Unnamed Category"}
+                </option>
+              ))}
+            </select>
+            {errors.newsCategoryId && (
+              <p className="text-xs text-red-500 mt-1">
+                {errors.newsCategoryId.message}
+              </p>
+            )}
+          </div>
+        </div>
+
+        {/* Title Section */}
+        <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
+          <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
+            <div className="h-1 w-4 bg-blue-500 mr-2 rounded-full"></div>
+            Title
+          </h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="space-y-2">
+              <Label htmlFor="titleAm" className="text-gray-700 dark:text-gray-300">
+                Title (Amharic)*
+              </Label>
+              <FormFeild
+                id="titleAm"
+                {...register("titleAm", { required: "Required" })}
+                error={errors.titleAm?.message}
+                placeholder="News title in Amharic"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="titleEn" className="text-gray-700 dark:text-gray-300">
+                Title (English)*
+              </Label>
+              <FormFeild
+                id="titleEn"
+                {...register("titleEn", { required: "Required" })}
+                error={errors.titleEn?.message}
+                placeholder="News title in English"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Subtitle Section */}
+        <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
+          <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
+            <div className="h-1 w-4 bg-primary-500 mr-2 rounded-full"></div>
+            Subtitle
+          </h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="space-y-2">
+              <Label htmlFor="subTitleAm" className="text-gray-700 dark:text-gray-300">
+                Subtitle (Amharic)*
+              </Label>
+              <FormFeild
+                id="subTitleAm"
+                {...register("subTitleAm", { required: "Required" })}
+                error={errors.subTitleAm?.message}
+                placeholder="News subtitle in Amharic"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="subTitleEn" className="text-gray-700 dark:text-gray-300">
+                Subtitle (English)*
+              </Label>
+              <FormFeild
+                id="subTitleEn"
+                {...register("subTitleEn", { required: "Required" })}
+                error={errors.subTitleEn?.message}
+                placeholder="News subtitle in English"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Body Section */}
+        <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
+          <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
+            <div className="h-1 w-4 bg-purple-500 mr-2 rounded-full"></div>
+            Content
+          </h3>
+          <div className="space-y-6">
+            <div className="space-y-2">
+              <Label htmlFor="bodyAm" className="text-gray-700 dark:text-gray-300">
+                Content (Amharic)*
+              </Label>
+              <Textarea
+                id="bodyAm"
+                {...register("bodyAm", { required: "Required" })}
+                rows={6}
+                placeholder="News content in Amharic"
+                className="min-h-[150px] dark:bg-gray-600 dark:text-gray-200"
+              />
+              {errors.bodyAm && (
+                <p className="text-xs text-red-500 mt-1">
+                  {errors.bodyAm.message}
+                </p>
+              )}
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="bodyEn" className="text-gray-700 dark:text-gray-300">
+                Content (English)*
+              </Label>
+              <Textarea
+                id="bodyEn"
+                {...register("bodyEn", { required: "Required" })}
+                rows={6}
+                placeholder="News content in English"
+                className="min-h-[150px] dark:bg-gray-600 dark:text-gray-200"
+              />
+              {errors.bodyEn && (
+                <p className="text-xs text-red-500 mt-1">
+                  {errors.bodyEn.message}
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Status Section */}
+        <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
+          <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
+            <div className="h-1 w-4 bg-orange-500 mr-2 rounded-full"></div>
+            Settings
+          </h3>
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="isActive" className="text-gray-700 dark:text-gray-300 font-medium">
+                Is Active
+              </Label>
+              <button
+                type="button"
+                onClick={() => setValue("isActive", !watch("isActive"))}
+                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                  watch("isActive") ? "bg-primary-500" : "bg-gray-300 dark:bg-gray-500"
+                }`}
+              >
+                <span
+                  className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                    watch("isActive") ? "translate-x-6" : "translate-x-1"
+                  }`}
+                />
+              </button>
+            </div>
+            <div className="flex items-center justify-between">
+              <Label htmlFor="isFeatured" className="text-gray-700 dark:text-gray-300 font-medium">
+                Is Featured
+              </Label>
+              <button
+                type="button"
+                onClick={() => setValue("isFeatured", !watch("isFeatured"))}
+                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                  watch("isFeatured") ? "bg-yellow-500" : "bg-gray-300 dark:bg-gray-500"
+                }`}
+              >
+                <span
+                  className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                    watch("isFeatured") ? "translate-x-6" : "translate-x-1"
+                  }`}
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Image Upload */}
+        <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
+          <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
+            <div className="h-1 w-4 bg-yellow-500 mr-2 rounded-full"></div>
+            Image
+          </h3>
+          <div className="space-y-2">
+            <Label htmlFor="image" className="text-gray-700 dark:text-gray-300">
+              News Image*
+            </Label>
+            <FormFeild
+              id="image"
+              type="file"
+              accept="image/*"
+              {...register("image", { required: "Image is required" })}
+              error={errors.image?.message}
+            />
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="flex justify-end gap-3 pt-6 border-t border-gray-200 dark:border-gray-700">
+          <Button
+            variant="outline"
+            onClick={onCancel}
+            type="button"
+            disabled={isSubmitting}
+            className="px-6 py-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700"
+          >
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            disabled={isSubmitting}
+            className="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white"
+          >
+            {isSubmitting ? (
+              <span className="flex items-center gap-2">
+                <Loader2 className="w-4 h-4 animate-spin" />
+                Creating...
+              </span>
+            ) : (
+              "Create News"
+            )}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/News/EditNews.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/News/EditNews.tsx
new file mode 100644
index 000000000..b347d469b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/News/EditNews.tsx
@@ -0,0 +1,419 @@
+import { useForm } from "react-hook-form";
+import { Button } from "@/shared/common/ui/button";
+import { Label } from "@/shared/common/ui/label";
+import { Textarea } from "@/shared/common/ui/textarea";
+import { ImageIcon, Loader2 } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { FormFeild } from "../components/FormFeild";
+import { CreateNewsPayload, NewsItem } from "../types/newsTypes";
+import { useNewsCategory } from "../hooks/useNewsCategory";
+import { useNavigate, useParams } from "react-router-dom";
+import { useNews } from "../hooks/useNews";
+import { toast } from "sonner";
+import { ContactUsParams } from "../hooks/useContactUs";
+
+interface FormData {
+  titleEn: string;
+  titleAm: string;
+  subTitleAm: string;
+  subTitleEn: string;
+  bodyAm: string;
+  bodyEn: string;
+  newsCategoryId: string;
+  image: FileList;
+  isActive: boolean;
+  isFeatured: boolean;
+}
+
+export const EditNews = () => {
+  const { id } = useParams();
+  const { singleItem: item, updateItem } = useNews(undefined, id);
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const navigate = useNavigate();
+  const defaultValues = useMemo(
+    () => ({
+      titleEn: item?.title?.en || "",
+      titleAm: item?.title?.am || "",
+      subTitleAm: item?.subTitle?.am || "",
+      subTitleEn: item?.subTitle?.en || "",
+      bodyAm: item?.body?.am || "",
+      bodyEn: item?.body?.en || "",
+      newsCategoryId: item?.newsCategoryId || "",
+      isActive: item?.isActive || false,
+      isFeatured: item?.isFeatured || false,
+      image: undefined,
+    }),
+    [item] // 👈 recompute only when item changes
+  );
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    setValue,
+    reset,
+    formState: { errors },
+  } = useForm<FormData>({
+    defaultValues,
+  });
+  useEffect(() => {
+    if (item) {
+      reset(defaultValues);
+    }
+  }, [item, defaultValues, reset]);
+  const imageFile = watch("image")?.[0];
+  const [imagePreview, setImagePreview] = useState<string>(
+    item?.presigned || ""
+  );
+
+  // Fetch news categories for dropdown
+  const { items: categories } = useNewsCategory();
+
+  useEffect(() => {
+    if (imageFile) {
+      const url = URL.createObjectURL(imageFile);
+      setImagePreview(url);
+      return () => URL.revokeObjectURL(url);
+    }
+  }, [imageFile]);
+
+  const ImageUpload = ({
+    label,
+    preview,
+    existingName,
+    register,
+    error,
+    onView,
+    id,
+    isRequired = false,
+  }: {
+    label: string;
+    preview: string | null;
+    existingName?: string;
+    register: any;
+    error?: string;
+    onView: () => void;
+    id: string;
+    isRequired?: boolean;
+  }) => (
+    <div className="space-y-2">
+      <Label className="text-gray-700 block mb-2">
+        {label} {isRequired && "*"}
+      </Label>
+
+      {preview && (
+        <div className="mb-3 flex items-center justify-between bg-blue-50 p-3 rounded-lg">
+          <div className="flex items-center">
+            <ImageIcon className="h-5 w-5 text-blue-500 mr-2" />
+            <span className="text-sm font-medium truncate max-w-[200px]">
+              {existingName || "Selected Image"}
+            </span>
+          </div>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={onView}
+            className="text-blue-600 hover:text-blue-800"
+          >
+            Preview
+          </Button>
+        </div>
+      )}
+
+      <div>
+        <FormFeild
+          id={id}
+          type="file"
+          accept="image/*"
+          {...register}
+          error={error}
+        />
+      </div>
+
+      {error && <p className="text-xs text-red-500 mt-1">{error}</p>}
+    </div>
+  );
+  const handleEditSubmit = async (formData: FormData) => {
+    if (!item) return;
+    setIsSubmitting(true);
+    try {
+      const imageFile = formData.image?.[0];
+
+      const payload: CreateNewsPayload = {
+        newsCategoryId: formData.newsCategoryId,
+        title: {
+          am: formData.titleAm || "",
+          en: formData.titleEn || "",
+        },
+        subTitle: {
+          am: formData.subTitleAm || "",
+          en: formData.subTitleEn || "",
+        },
+        body: {
+          am: formData.bodyAm || "",
+          en: formData.bodyEn || "",
+        },
+        // Only include fileInfo if there's a new image
+        ...(imageFile && {
+          fileInfo: {
+            fileName: imageFile.name,
+            contentType: imageFile.type,
+            size: imageFile.size,
+            originalname: imageFile.name,
+          },
+        }),
+        isActive: formData.isActive,
+        isFeatured: formData.isFeatured,
+      };
+
+      await updateItem({
+        id: item.id,
+        data: payload,
+        ...(imageFile && { imageFile }),
+      });
+      toast.success("News updated successfully");
+      navigate(-1);
+    } catch (error) {
+      toast.error("Failed to update news");
+      console.error("Update error:", error);
+      setIsSubmitting(false);
+    }
+  };
+  return (
+    <div className="max-h-[80vh] overflow-y-auto p-6 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
+      <form onSubmit={handleSubmit(handleEditSubmit)} className="space-y-8">
+        {/* Category Selection */}
+        <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
+          <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
+            <div className="h-1 w-4 bg-blue-500 mr-2 rounded-full"></div>
+            Category
+          </h3>
+          <div className="space-y-2">
+            <Label htmlFor="newsCategoryId" className="text-gray-700 dark:text-gray-300">
+              News Category*
+            </Label>
+            <select
+              id="newsCategoryId"
+              {...register("newsCategoryId", {
+                required: "Category is required",
+              })}
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 dark:bg-gray-600 dark:text-gray-200"
+            >
+              <option value="">Select a category</option>
+              {categories?.map((category) => (
+                <option key={category.id} value={category.id}>
+                  {category.newsCategoryTitle?.en || "Unnamed Category"}
+                </option>
+              ))}
+            </select>
+            {errors.newsCategoryId && (
+              <p className="text-xs text-red-500 mt-1">
+                {errors.newsCategoryId.message}
+              </p>
+            )}
+          </div>
+        </div>
+
+        {/* Title Section */}
+        <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
+          <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4 flex items-center">
+            <div className="h-1 w-4 bg-blue-500 mr-2 rounded-full"></div>
+            Title
+          </h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="space-y-2">
+              <Label htmlFor="titleAm" className="text-gray-700 dark:text-gray-200">
+                Title (Amharic)*
+              </Label>
+              <FormFeild
+                id="titleAm"
+                {...register("titleAm", { required: "Required" })}
+                error={errors.titleAm?.message}
+                placeholder="News title in Amharic"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="titleEn" className="text-gray-700 dark:text-gray-200">
+                Title (English)*
+              </Label>
+              <FormFeild
+                id="titleEn"
+                {...register("titleEn", { required: "Required" })}
+                error={errors.titleEn?.message}
+                placeholder="News title in English"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Subtitle Section */}
+        <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
+          <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4 flex items-center">
+            <div className="h-1 w-4 bg-primary-500 mr-2 rounded-full"></div>
+            Subtitle
+          </h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="space-y-2">
+              <Label htmlFor="subTitleAm" className="text-gray-700 dark:text-gray-200">
+                Subtitle (Amharic)*
+              </Label>
+              <FormFeild
+                id="subTitleAm"
+                {...register("subTitleAm", { required: "Required" })}
+                error={errors.subTitleAm?.message}
+                placeholder="News subtitle in Amharic"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="subTitleEn" className="text-gray-700 dark:text-gray-200">
+                Subtitle (English)*
+              </Label>
+              <FormFeild
+                id="subTitleEn"
+                {...register("subTitleEn", { required: "Required" })}
+                error={errors.subTitleEn?.message}
+                placeholder="News subtitle in English"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Body Section */}
+        <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
+          <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4 flex items-center">
+            <div className="h-1 w-4 bg-purple-500 mr-2 rounded-full"></div>
+            Content
+          </h3>
+          <div className="space-y-6">
+            <div className="space-y-2">
+              <Label htmlFor="bodyAm" className="text-gray-700 dark:text-gray-200">
+                Content (Amharic)*
+              </Label>
+              <Textarea
+                id="bodyAm"
+                {...register("bodyAm", { required: "Required" })}
+                rows={6}
+                placeholder="News content in Amharic"
+                className="min-h-[150px] dark:bg-gray-600 dark:text-gray-200"
+              />
+              {errors.bodyAm && (
+                <p className="text-xs text-red-500 mt-1">
+                  {errors.bodyAm.message}
+                </p>
+              )}
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="bodyEn" className="text-gray-700 dark:text-gray-200">
+                Content (English)*
+              </Label>
+              <Textarea
+                id="bodyEn"
+                {...register("bodyEn", { required: "Required" })}
+                rows={6}
+                placeholder="News content in English"
+                className="min-h-[150px] dark:bg-gray-600 dark:text-gray-200"
+              />
+              {errors.bodyEn && (
+                <p className="text-xs text-red-500 mt-1">
+                  {errors.bodyEn.message}
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Status Section */}
+        <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
+          <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4 flex items-center">
+            <div className="h-1 w-4 bg-orange-500 mr-2 rounded-full"></div>
+            Settings
+          </h3>
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="isActive" className="text-gray-700 dark:text-gray-200 font-medium">
+                Is Active
+              </Label>
+              <button
+                type="button"
+                onClick={() => setValue("isActive", !watch("isActive"))}
+                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                  watch("isActive") ? "bg-primary-500" : "bg-gray-300"
+                }`}
+              >
+                <span
+                  className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                    watch("isActive") ? "translate-x-6" : "translate-x-1"
+                  }`}
+                />
+              </button>
+            </div>
+            <div className="flex items-center justify-between">
+              <Label htmlFor="isFeatured" className="text-gray-700 font-medium">
+                Is Featured
+              </Label>
+              <button
+                type="button"
+                onClick={() => setValue("isFeatured", !watch("isFeatured"))}
+                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                  watch("isFeatured") ? "bg-yellow-500" : "bg-gray-300"
+                }`}
+              >
+                <span
+                  className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                    watch("isFeatured") ? "translate-x-6" : "translate-x-1"
+                  }`}
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Image Upload */}
+        <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
+          <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4 flex items-center">
+            <div className="h-1 w-4 bg-yellow-500 mr-2 rounded-full"></div>
+            Image
+          </h3>
+          <ImageUpload
+            label="News Image"
+            preview={imagePreview}
+            existingName={item?.fileInfo?.originalname}
+            register={register("image")}
+            error={errors.image?.message}
+            onView={() => window.open(imagePreview, "_blank")}
+            id="image"
+            isRequired={false}
+          />
+        </div>
+
+        {/* Actions */}
+        <div className="flex justify-end gap-3 pt-6 border-t border-gray-200 dark:border-gray-700">
+          <Button
+            variant="outline"
+            onClick={() => navigate(-1)}
+            type="button"
+            disabled={isSubmitting}
+            className="px-6 py-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700"
+          >
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            disabled={isSubmitting}
+            className="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white"
+          >
+            {isSubmitting ? (
+              <span className="flex items-center gap-2">
+                <Loader2 className="w-4 h-4 animate-spin" />
+                Updating...
+              </span>
+            ) : (
+              "Update News"
+            )}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/News/News.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/News/News.tsx
new file mode 100644
index 000000000..26234427b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/News/News.tsx
@@ -0,0 +1,143 @@
+import { NavLink, useNavigate } from "react-router-dom";
+import { CirclePlus } from "lucide-react";
+import { NewsColumnDefn } from "./NewsColumn";
+import { useTranslation } from "react-i18next";
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import { useMemo, useState } from "react";
+import Loader from "@/record-management/components/Loader/loader";
+import { Button } from "@/shared/common/ui/button";
+import { toast } from "sonner";
+import { useNews } from "../hooks/useNews";
+
+
+export const News = () => {
+  const [pageIndex, setPageIndex] = useState(0);
+  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
+  const pageSize = 10;
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const baseParams = useMemo(() => {
+    const params: Record<string, any> = {
+      skip: pageIndex * pageSize,
+      take: pageSize,
+      orderBy: "createdAt:DESC",
+    };
+    return params;
+  }, [pageIndex]);
+
+  const { items, refetch, deleteItem, error, isLoading, count } =
+    useNews(baseParams);
+
+  const handlePageChange = (newPage: number) => {
+    setPageIndex(newPage);
+  };
+
+  const handleDeleteClick = async (id: string): Promise<void> => {
+    setDeleteConfirmId(id);
+  };
+
+  const handleDeleteConfirm = async () => {
+    if (!deleteConfirmId) return;
+
+    try {
+      await deleteItem(deleteConfirmId);
+      toast.success("News deleted successfully");
+      refetch();
+    } catch (error) {
+      toast.error("Failed to delete news");
+      console.error("Delete error:", error);
+    } finally {
+      setDeleteConfirmId(null);
+    }
+  };
+
+  const handleDeleteCancel = () => {
+    setDeleteConfirmId(null);
+  };
+
+
+
+  return (
+    <div className="flex flex-col h-full w-full p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700">
+      {/* Header Section */}
+      <div className="flex items-center justify-between mb-4 border-b pb-3 border-gray-200 dark:border-gray-700">
+        <h1 className="text-xl font-semibold text-gray-800 dark:text-gray-200">{t("nav.news")}</h1>
+        <NavLink to="/user-management/web-Management/News/AddNews">
+          <Button
+            variant="addRecordBtn"
+            className="flex items-center gap-1 bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition-all"
+          >
+            <CirclePlus className="w-4 h-4" />
+            <span>{t("addNews")}</span>
+          </Button>
+        </NavLink>
+      </div>
+
+      {/* Content Section */}
+      <div className="flex-1 overflow-auto">
+        {isLoading && (
+          <div className="flex justify-center items-center h-48">
+            <Loader />
+          </div>
+        )}
+
+        {error && (
+          <p className="text-center text-red-500 text-sm mt-4">
+            {t("userRecord.Error loading records.")}
+          </p>
+        )}
+
+        {!isLoading && !error && (
+          <div className="mt-2">
+            <AdvancedTable
+              columns={NewsColumnDefn({
+                navigate,
+                onDelete: handleDeleteClick,
+              })}
+              data={items || []}
+              tableName="News"
+              toolBarPosition="right"
+              extraToolbar={<div className="flex gap-2"></div>}
+              itemCount={count || 0}
+              pageIndex={pageIndex}
+              onPageChange={handlePageChange}
+              nextFunction={() => handlePageChange(pageIndex + 1)}
+              prevFunction={() => handlePageChange(Math.max(pageIndex - 1, 0))}
+              refresh={refetch}
+            />
+          </div>
+        )}
+      </div>
+      {/* Delete Confirmation Dialog */}
+      {deleteConfirmId && (
+        <div className="fixed inset-0 bg-black/50 dark:bg-black/70 flex items-center justify-center z-50">
+          <div className="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4">
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
+              Confirm Delete
+            </h3>
+            <p className="text-gray-600 dark:text-gray-400 mb-6">
+              Are you sure you want to delete this news? This action cannot be
+              undone.
+            </p>
+            <div className="flex justify-end gap-3">
+              <Button
+                variant="outline"
+                onClick={handleDeleteCancel}
+                className="px-4 py-2 dark:border-gray-600 dark:text-gray-200"
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={handleDeleteConfirm}
+                className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white"
+              >
+                Delete
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/News/NewsColumn.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/News/NewsColumn.tsx
new file mode 100644
index 000000000..a79f0e2a9
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/News/NewsColumn.tsx
@@ -0,0 +1,130 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { Button } from "@/shared/common/ui/button";
+import { Trash2, Edit, Eye, Star } from "lucide-react";
+import { NewsItem } from "../types/newsTypes";
+import { t } from "i18next";
+import i18n from "@/i18n";
+
+export const NewsColumnDefn = ({
+  onDelete,
+  navigate,
+}: {
+  onDelete?: (id: string) => Promise<void>;
+  navigate: (id: string) => void;
+}): ColumnDef<NewsItem>[] => [
+    {
+      accessorKey: "title",
+      header: () => t("toogle.title"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        const lang = i18n.language;
+        const title = lang === "am" ? rowData.title?.am : rowData.title?.en;
+        return <span className="font-medium">{title || "-"}</span>;
+      },
+      enableHiding: true,
+    },
+
+    {
+      accessorKey: "category",
+      header: () => t("toogle.category"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        const lang = i18n.language;
+        const categoryTitle =
+          lang === "am"
+            ? rowData.newsCategory?.newsCategoryTitle?.am
+            : rowData.newsCategory?.newsCategoryTitle?.en;
+        return (
+          <span className="text-sm text-blue-600 bg-blue-50 px-2 py-1 rounded-full">
+            {categoryTitle || "No Category"}
+          </span>
+        );
+      },
+      enableHiding: true,
+    },
+    {
+      accessorKey: "featured",
+      header: () => t("toogle.featured"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        return (
+          <div className="flex items-center justify-center">
+            {rowData.isFeatured ? (
+              <Star className="h-4 w-4 text-yellow-500 fill-current" />
+            ) : (
+              <Star className="h-4 w-4 text-gray-300" />
+            )}
+          </div>
+        );
+      },
+      enableHiding: true,
+    },
+    {
+      accessorKey: "status",
+      header: () => t("toogle.status"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        return (
+          <span
+            className={`px-2 py-1 rounded-full text-xs font-medium ${rowData.isActive
+                ? "bg-primary-100 text-primary-800"
+                : "bg-red-100 text-red-800"
+              }`}
+          >
+            {rowData.isActive ? "Active" : "Inactive"}
+          </span>
+        );
+      },
+      enableHiding: true,
+    },
+    {
+      accessorKey: "createdAt",
+      header: () => t("toogle.createdAt"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        const lang = i18n.language;
+        const amDate = rowData?.amharicCreatedAt;
+        const enDate = new Date(rowData.createdAt).toLocaleString("en-US", {
+          month: "short", // "Oct"
+          day: "numeric", // "12"
+          year: "numeric", // "2014"
+          hour: "numeric", // "8"
+          minute: "2-digit", // "12"
+          hour12: true, // "PM" format
+        });
+        const date = lang === "am" ? amDate : enDate;
+        return <span className="text-sm text-gray-500">{date}</span>;
+      },
+      enableHiding: true,
+    },
+    {
+      accessorKey: "Actions",
+      header: () => t("toogle.Actions"),
+      cell: ({ row }) => (
+        <div className="flex space-x-2">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() =>
+              navigate(
+                `/user-management/web-management/News/EditNews/${row.original.id}`
+              )
+            }
+            title="Edit"
+          >
+            <Edit className="h-4 w-4" />
+          </Button>
+          {onDelete && (
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => onDelete(row.original.id)}
+              title="Delete"
+            >
+              <Trash2 className="h-4 w-4 text-destructive" />
+            </Button>
+          )}
+        </div>
+      ),
+    },
+  ];
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/News/ViewNews.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/News/ViewNews.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/NewsCategory/AddNewsCategory.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/NewsCategory/AddNewsCategory.tsx
new file mode 100644
index 000000000..66001bdb0
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/NewsCategory/AddNewsCategory.tsx
@@ -0,0 +1,92 @@
+import { useForm } from "react-hook-form";
+import {
+  CreateNewsCategoryPayload,
+  NewsCategoryFormData,
+} from "../types/newsCategoryType";
+import { toast } from "sonner";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useNewsCategory } from "../hooks/useNewsCategory";
+import NewsCategoryForm from "./Form";
+
+export const AddNewsCategory = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    watch,
+    control,
+    setValue,
+  } = useForm<NewsCategoryFormData>({
+    defaultValues: {
+      NewsCategoryTitleEn: "",
+      NewsCategoryTitleAm: "",
+      NewsCategoryDescriptionAm: "",
+      NewsCategoryDescriptionEn: "",
+      color: "",
+      isActive: false,
+    },
+  });
+  const navigate = useNavigate();
+  const { createItem } = useNewsCategory();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleCreateSubmit = async (
+    NewsCategoryFormData: NewsCategoryFormData
+  ) => {
+    setIsSubmitting(true);
+    try {
+      const imageFile = NewsCategoryFormData.image?.[0];
+      if (!imageFile) {
+        throw new Error("images are required");
+      }
+      const payload: CreateNewsCategoryPayload = {
+        newsCategoryTitle: {
+          am: NewsCategoryFormData.NewsCategoryTitleAm || "",
+          en: NewsCategoryFormData.NewsCategoryTitleEn || "",
+        },
+        newsCategoryDescription: {
+          am: NewsCategoryFormData.NewsCategoryDescriptionAm || "",
+          en: NewsCategoryFormData.NewsCategoryDescriptionEn || "",
+        },
+        fileInfo: {
+          fileName: imageFile.name,
+          contentType: imageFile.type,
+          size: imageFile.size,
+          originalname: imageFile.name,
+        },
+        isActive: NewsCategoryFormData.isActive,
+        color: NewsCategoryFormData.color || "#007BFF",
+      };
+      await createItem({
+        data: payload,
+        imageFile: imageFile,
+      });
+      toast.success("News category created successfully");
+      // Navigate back to the news category list
+      navigate(-1);
+    } catch (error) {
+      toast.error("Failed to create NewsCategory");
+      console.error("Creation error:", error);
+      setIsSubmitting(false);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const onCancel = () => {
+    navigate(-1);
+  };
+  return (
+    <NewsCategoryForm
+      handleSubmit={handleSubmit(handleCreateSubmit)}
+      handleCancel={onCancel}
+      watch={watch}
+      setValue={setValue}
+      control={control}
+      register={register}
+      errors={errors}
+      isSubmitting={isSubmitting}
+      label="Add News Category"
+    />
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/NewsCategory/EditNewsCategory.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/NewsCategory/EditNewsCategory.tsx
new file mode 100644
index 000000000..7fcf5c1b1
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/NewsCategory/EditNewsCategory.tsx
@@ -0,0 +1,129 @@
+import {
+  Control,
+  FieldErrors,
+  useForm,
+  UseFormRegister,
+  UseFormReset,
+  UseFormSetValue,
+  UseFormWatch,
+} from "react-hook-form";
+import { useEffect, useMemo, useState } from "react";
+import {
+  CreateNewsCategoryPayload,
+  NewsCategoryFormData,
+  NewsCategoryItem,
+} from "../types/newsCategoryType";
+import { useNewsCategory } from "../hooks/useNewsCategory";
+import { useNavigate, useParams } from "react-router-dom";
+import { toast } from "sonner";
+import NewsCategoryForm from "./Form";
+
+export interface FormProps {
+  watch: UseFormWatch<NewsCategoryFormData>;
+  control: Control<NewsCategoryFormData>;
+  setValue: UseFormSetValue<NewsCategoryFormData>;
+  register: UseFormRegister<NewsCategoryFormData>;
+  errors: FieldErrors<NewsCategoryFormData>;
+  reset?: UseFormReset<NewsCategoryFormData>;
+  handleSubmit: (e: React.FormEvent) => void;
+  handleCancel: () => void;
+  isSubmitting: boolean;
+  item?: NewsCategoryItem;
+  label: string;
+}
+export const EditNewsCategory = () => {
+  const { id } = useParams();
+  const { singleItem: item, updateItem } = useNewsCategory(undefined, id);
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const navigate = useNavigate();
+  const defaultValues = useMemo(
+    () => ({
+      NewsCategoryTitleEn: item?.newsCategoryTitle?.en || "",
+      NewsCategoryTitleAm: item?.newsCategoryTitle?.am || "",
+      NewsCategoryDescriptionAm: item?.newsCategoryDescription?.am || "",
+      NewsCategoryDescriptionEn: item?.newsCategoryDescription?.en || "",
+      color: item?.color || "#007BFF",
+      isActive: item?.isActive || false,
+      image: undefined,
+    }),
+    [item] // 👈 recompute only when item changes
+  );
+  const {
+    register,
+    handleSubmit,
+    watch,
+    control,
+    reset,
+    setValue,
+    formState: { errors },
+  } = useForm<NewsCategoryFormData>({
+    defaultValues,
+  });
+  useEffect(() => {
+    if (item) {
+      reset(defaultValues);
+    }
+  }, [item, defaultValues, reset]);
+
+  const handleEditSubmit = async (
+    NewsCategoryFormData: NewsCategoryFormData
+  ) => {
+    if (!item) return;
+    setIsSubmitting(true);
+    try {
+      const imageFile = NewsCategoryFormData.image?.[0];
+
+      const payload: CreateNewsCategoryPayload = {
+        newsCategoryTitle: {
+          am: NewsCategoryFormData.NewsCategoryTitleAm || "",
+          en: NewsCategoryFormData.NewsCategoryTitleEn || "",
+        },
+        newsCategoryDescription: {
+          am: NewsCategoryFormData.NewsCategoryDescriptionAm || "",
+          en: NewsCategoryFormData.NewsCategoryDescriptionEn || "",
+        },
+        // Only include fileInfo if there's a new image
+        ...(imageFile && {
+          fileInfo: {
+            fileName: imageFile.name,
+            contentType: imageFile.type,
+            size: imageFile.size,
+            originalname: imageFile.name,
+          },
+        }),
+        isActive: NewsCategoryFormData.isActive,
+        color: NewsCategoryFormData.color,
+      };
+
+      await updateItem({
+        id: item.id,
+        data: payload,
+        ...(imageFile && { imageFile }),
+      });
+
+      toast.success("News category updated successfully");
+      navigate(-1);
+    } catch (error) {
+      toast.error("Failed to update news category");
+      console.error("Update error:", error);
+      setIsSubmitting(false);
+    }
+  };
+  const onCancel = () => {
+    navigate(-1);
+  };
+  return (
+    <NewsCategoryForm
+      handleSubmit={handleSubmit(handleEditSubmit)}
+      handleCancel={onCancel}
+      watch={watch}
+      setValue={setValue}
+      control={control}
+      register={register}
+      errors={errors}
+      isSubmitting={isSubmitting}
+      label="Edit NewsCategory"
+      item={item}
+    />
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/NewsCategory/Form.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/NewsCategory/Form.tsx
new file mode 100644
index 000000000..51d185d61
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/NewsCategory/Form.tsx
@@ -0,0 +1,142 @@
+import { Button } from "@/shared/common/ui/button";
+import { Loader2 } from "lucide-react";
+import {
+  FormColorPicker,
+  FormInputBox,
+  FormTextBox,
+  FormToggle,
+  ImageUpload,
+  Section,
+} from "../components/FormInputBox";
+import { useEffect, useState } from "react";
+import { FormProps } from "./EditNewsCategory";
+
+const NewsCategoryForm = ({
+  handleSubmit,
+  handleCancel,
+  watch,
+  control,
+  setValue,
+  register,
+  errors,
+  isSubmitting,
+  reset,
+  item,
+  label,
+}: FormProps) => {
+  const imageFile = watch("image")?.[0];
+  const [imagePreview, setImage1Preview] = useState<string>(
+    item?.presigned || ""
+  );
+
+  useEffect(() => {
+    if (item?.presigned) {
+      setImage1Preview(item.presigned);
+    }
+  }, [item]);
+
+  // 🔹 when user picks a new image, show it
+  useEffect(() => {
+    if (imageFile) {
+      const url = URL.createObjectURL(imageFile);
+      setImage1Preview(url);
+      return () => URL.revokeObjectURL(url);
+    }
+  }, [imageFile]);
+  return (
+    <div className="max-h-[80vh] overflow-y-auto p-6 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
+      <form onSubmit={handleSubmit} className="space-y-8">
+        {/* Title Section */}
+        <FormInputBox
+          idEn="NewsCategoryTitleEn"
+          idAm="NewsCategoryTitleAm"
+          label="Title"
+          error="Title is Required"
+          errors={errors}
+          register={register}
+        />
+
+        {/* Description Section */}
+        <FormTextBox
+          idAm="NewsCategoryDescriptionAm"
+          idEn="NewsCategoryDescriptionEn"
+          label="Description"
+          error="Description is Required"
+          errors={errors}
+          register={register}
+        />
+
+        {/* isActive Toggle */}
+        <FormToggle
+          idAm="isActive"
+          label="Status"
+          watch={watch}
+          setValue={setValue}
+        />
+
+        <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
+          <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
+            <div className="h-1 w-4 bg-yellow-500 mr-2 rounded-full"></div>
+            Appearance
+          </h3>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-center">
+            {/* Color Picker */}
+            <FormColorPicker
+              idAm="color"
+              label="Color"
+              error="Color is Required"
+              errors={errors}
+              register={register}
+              watch={watch}
+            />
+            <div className="space-y-2">
+              {/* Image Upload */}
+              <Section title="Image">
+                <ImageUpload
+                  label="Category Image"
+                  preview={imagePreview}
+                  existingName={item?.fileInfo?.originalname}
+                  register={register("image")}
+                  error={errors.image?.message}
+                  onView={() => window.open(imagePreview, "_blank")}
+                  id="image"
+                  isRequired={false}
+                />
+              </Section>
+            </div>
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="flex justify-end gap-3 pt-6 border-t border-gray-200 dark:border-gray-700">
+          <Button
+            variant="outline"
+            onClick={handleCancel}
+            type="button"
+            disabled={isSubmitting}
+            className="px-6 py-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700"
+          >
+            Cancel
+          </Button>
+
+          <Button
+            type="submit"
+            disabled={isSubmitting}
+            className="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white"
+          >
+            {isSubmitting ? (
+              <span className="flex items-center gap-2">
+                <Loader2 className="w-4 h-4 animate-spin" />
+                ...
+              </span>
+            ) : (
+              label
+            )}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};
+export default NewsCategoryForm;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/NewsCategory/NewsCategory.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/NewsCategory/NewsCategory.tsx
new file mode 100644
index 000000000..bf375c635
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/NewsCategory/NewsCategory.tsx
@@ -0,0 +1,144 @@
+import { NavLink, useNavigate } from "react-router-dom";
+import { CirclePlus } from "lucide-react";
+import { NewsCategoryColumnDefn } from "./NewsCategoryColumn";
+import { useTranslation } from "react-i18next";
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import { useMemo, useState } from "react";
+import Loader from "@/record-management/components/Loader/loader";
+import { Button } from "@/shared/common/ui/button";
+import { toast } from "sonner";
+import { useNewsCategory } from "../hooks/useNewsCategory";
+import { ContactUsParams } from "../hooks/useContactUs";
+
+export const NewsCategory = () => {
+  const [pageIndex, setPageIndex] = useState(0);
+  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
+  const navigate = useNavigate();
+  const pageSize = 10;
+  const { t } = useTranslation();
+  const baseParams = useMemo(() => {
+    const params: Record<string, any> = {
+      skip: pageIndex * pageSize,
+      take: pageSize,
+      orderBy: "createdAt:DESC",
+    };
+
+    return params;
+  }, [pageIndex]);
+
+  const { items, refetch, deleteItem, error, isLoading, count } =
+    useNewsCategory(baseParams);
+  const handlePageChange = (newPage: number) => {
+    setPageIndex(newPage);
+  };
+
+  const handleDeleteClick = async (id: string) => {
+    setDeleteConfirmId(id);
+  };
+
+  const handleDeleteConfirm = async () => {
+    if (!deleteConfirmId) return;
+
+    try {
+      await deleteItem(deleteConfirmId);
+      toast.success("News category deleted successfully");
+      refetch();
+    } catch (error) {
+      toast.error("Failed to delete news category");
+      console.error("Delete error:", error);
+    } finally {
+      setDeleteConfirmId(null);
+    }
+  };
+
+  const handleDeleteCancel = () => {
+    setDeleteConfirmId(null);
+  };
+
+  return (
+    <div className="flex flex-col h-full w-full p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700">
+      {/* Header Section */}
+      <div className="flex items-center justify-between mb-4 border-b pb-3 border-gray-200 dark:border-gray-700">
+        <h1 className="text-xl font-semibold text-gray-800 dark:text-gray-200">
+          {t("newsCategory")}
+        </h1>
+        {
+          <NavLink to="/user-management/web-Management/Category/AddCategory">
+            <Button
+              variant="addRecordBtn"
+              className="flex items-center gap-1 bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition-all"
+            >
+              <CirclePlus className="w-4 h-4" />
+              <span>{t("addNewsCategory")}</span>
+            </Button>
+          </NavLink>
+        }
+      </div>
+
+      {/* Content Section */}
+      <div className="flex-1 overflow-auto">
+        {isLoading && (
+          <div className="flex justify-center items-center h-48">
+            <Loader />
+          </div>
+        )}
+
+        {error && (
+          <p className="text-center text-red-500 text-sm mt-4">
+            {t("userRecord.Error loading records.")}
+          </p>
+        )}
+
+        {!isLoading && !error && (
+          <div className="mt-2">
+            <AdvancedTable
+              columns={NewsCategoryColumnDefn({
+                navigate,
+                onDelete: handleDeleteClick,
+              })}
+              data={items || []}
+              tableName="NewsCategorys"
+              toolBarPosition="right"
+              extraToolbar={<div className="flex gap-2"></div>}
+              itemCount={count || 2}
+              pageIndex={pageIndex}
+              onPageChange={handlePageChange}
+              nextFunction={() => handlePageChange(pageIndex + 1)}
+              prevFunction={() => handlePageChange(Math.max(pageIndex - 1, 0))}
+              refresh={refetch}
+            />
+          </div>
+        )}
+      </div>
+      {/* Delete Confirmation Dialog */}
+      {deleteConfirmId && (
+        <div className="fixed inset-0 bg-black/50 dark:bg-black/70 flex items-center justify-center z-50">
+          <div className="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4">
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
+              Confirm Delete
+            </h3>
+            <p className="text-gray-600 dark:text-gray-400 mb-6">
+              Are you sure you want to delete this news category? This action
+              cannot be undone.
+            </p>
+            <div className="flex justify-end gap-3">
+              <Button
+                variant="outline"
+                onClick={handleDeleteCancel}
+                className="px-4 py-2 dark:border-gray-600 dark:text-gray-200"
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={handleDeleteConfirm}
+                className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white"
+              >
+                Delete
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/NewsCategory/NewsCategoryColumn.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/NewsCategory/NewsCategoryColumn.tsx
new file mode 100644
index 000000000..557c5a5fa
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/NewsCategory/NewsCategoryColumn.tsx
@@ -0,0 +1,153 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { Button } from "@/shared/common/ui/button";
+import { Trash2, Edit } from "lucide-react";
+import { NewsCategoryItem } from "../types/newsCategoryType";
+import { t } from "i18next";
+import i18n from "@/i18n";
+export const NewsCategoryColumnDefn = ({
+  onDelete,
+  navigate,
+}: {
+  onDelete?: (id: string) => Promise<void>;
+  navigate: (id: string) => void;
+}): ColumnDef<NewsCategoryItem>[] => [
+  {
+    accessorKey: "image",
+    header: () => t("toogle.image"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      return rowData.presigned ? (
+        <img
+          src={rowData.presigned}
+          alt="Category"
+          className="w-12 h-12 object-cover rounded-md"
+        />
+      ) : (
+        <div className="w-12 h-12 bg-gray-200 rounded-md flex items-center justify-center">
+          <span className="text-xs text-gray-500">No Image</span>
+        </div>
+      );
+    },
+    enableHiding: true,
+  },
+  {
+    accessorKey: "title",
+    header: () => t("toogle.title"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      const lang = i18n.language;
+      const title =
+        lang === "am"
+          ? rowData.newsCategoryTitle?.am
+          : rowData.newsCategoryTitle?.en;
+      return <span className="font-medium">{title || "-"}</span>;
+    },
+    enableHiding: true,
+  },
+  {
+    accessorKey: "description",
+    header: () => t("toogle.description"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      const lang = i18n.language;
+      const description =
+        lang === "am"
+          ? rowData.newsCategoryDescription?.am
+          : rowData.newsCategoryDescription?.en;
+      return (
+        <span className="text-sm text-gray-600 max-w-xs truncate block">
+          {description || "-"}
+        </span>
+      );
+    },
+    enableHiding: true,
+  },
+  {
+    accessorKey: "color",
+    header: () => t("toogle.color"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      return (
+        <div className="flex items-center gap-2">
+          <div
+            className="w-6 h-6 rounded-full border border-gray-300"
+            style={{ backgroundColor: rowData.color || "#007BFF" }}
+          />
+          <span className="text-xs font-mono">
+            {rowData.color || "#007BFF"}
+          </span>
+        </div>
+      );
+    },
+    enableHiding: true,
+  },
+  {
+    accessorKey: "status",
+    header: () => t("toogle.status"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      return (
+        <span
+          className={`px-2 py-1 rounded-full text-xs font-medium ${
+            rowData.isActive
+              ? "bg-primary-100 text-primary-800"
+              : "bg-red-100 text-red-800"
+          }`}
+        >
+          {rowData.isActive ? "Active" : "Inactive"}
+        </span>
+      );
+    },
+    enableHiding: true,
+  },
+  {
+    accessorKey: "createdAt",
+    header: () => t("toogle.createdAt"),
+    cell: ({ row }) => {
+      const rowData = row.original;
+      const lang = i18n.language;
+      const amDate = rowData?.amharicCreatedAt;
+      const enDate = new Date(rowData.createdAt).toLocaleString("en-US", {
+        month: "short", // "Oct"
+        day: "numeric", // "12"
+        year: "numeric", // "2014"
+        hour: "numeric", // "8"
+        minute: "2-digit", // "12"
+        hour12: true, // "PM" format
+      });
+      const date = lang === "am" ? amDate : enDate;
+      return <span className="text-sm text-gray-500">{date}</span>;
+    },
+    enableHiding: true,
+  },
+  {
+    accessorKey: "Actions",
+    header: () => t("toogle.Actions"),
+    cell: ({ row }) => (
+      <div className="flex space-x-2">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() =>
+            navigate(
+              `/user-management/web-management/Category/EditCategory/${row.original.id}`
+            )
+          }
+          title="Edit"
+        >
+          <Edit className="h-4 w-4" />
+        </Button>
+        {onDelete && (
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => onDelete(row.original.id)}
+            title="Delete"
+          >
+            <Trash2 className="h-4 w-4 text-destructive" />
+          </Button>
+        )}
+      </div>
+    ),
+  },
+];
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/SocialMedia/AddSocialMedia.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/SocialMedia/AddSocialMedia.tsx
new file mode 100644
index 000000000..743c8015e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/SocialMedia/AddSocialMedia.tsx
@@ -0,0 +1,77 @@
+import { useForm } from "react-hook-form";
+import {
+  CreateSocialMediaPayload,
+  SocialMediaFormData,
+} from "../types/socialMediaType";
+import { toast } from "sonner";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useSocialMedia } from "../hooks/useSocialMedia";
+import SocilaMediaForm from "./Form";
+
+export const AddSocialMedia = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    watch,
+    control,
+    setValue,
+  } = useForm<SocialMediaFormData>({
+    defaultValues: {
+      nameAm: "",
+      nameEn: "",
+      link: "",
+      type: "",
+      isActive: false,
+    },
+  });
+  const navigate = useNavigate();
+  const { createItem, isCreating } = useSocialMedia();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleCreateSubmit = async (
+    SocialMediaFormData: SocialMediaFormData
+  ) => {
+    setIsSubmitting(true);
+    try {
+      const payload: CreateSocialMediaPayload = {
+        name: {
+          am: SocialMediaFormData.nameAm || "",
+          en: SocialMediaFormData.nameEn || "",
+        },
+        type: SocialMediaFormData.type,
+        link: SocialMediaFormData.link,
+
+        isActive: SocialMediaFormData.isActive,
+      };
+      await createItem({
+        data: payload,
+      });
+      toast.success(" created successfully");
+      navigate(-1);
+    } catch (error) {
+      toast.error("Failed to create SocialMedia");
+      console.error("Creation error:", error);
+      setIsSubmitting(false);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const onCancel = () => {
+    navigate(-1);
+  };
+  return (
+    <SocilaMediaForm
+      handleSubmit={handleSubmit(handleCreateSubmit)}
+      handleCancel={onCancel}
+      watch={watch}
+      setValue={setValue}
+      control={control}
+      register={register}
+      errors={errors}
+      isSubmitting={isSubmitting}
+      label="Add Social Media Information"
+    />
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/SocialMedia/EditSocialMedia.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/SocialMedia/EditSocialMedia.tsx
new file mode 100644
index 000000000..3639cfcf9
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/SocialMedia/EditSocialMedia.tsx
@@ -0,0 +1,108 @@
+import {
+  Control,
+  FieldErrors,
+  useForm,
+  UseFormRegister,
+  UseFormReset,
+  UseFormSetValue,
+  UseFormWatch,
+} from "react-hook-form";
+import {
+  CreateSocialMediaPayload,
+  SocialMediaFormData,
+  SocialMediaItem,
+} from "../types/socialMediaType";
+import { useSocialMedia } from "../hooks/useSocialMedia";
+import { useNavigate, useParams } from "react-router-dom";
+import { toast } from "sonner";
+import { useEffect, useMemo, useState } from "react";
+import SocilaMediaForm from "./Form";
+
+export interface FormProps {
+  watch: UseFormWatch<SocialMediaFormData>;
+  control: Control<SocialMediaFormData>;
+  setValue: UseFormSetValue<SocialMediaFormData>;
+  register: UseFormRegister<SocialMediaFormData>;
+  errors: FieldErrors<SocialMediaFormData>;
+  reset?: UseFormReset<SocialMediaFormData>;
+  handleSubmit: (e: React.FormEvent) => void;
+  handleCancel: () => void;
+  isSubmitting: boolean;
+  item?: SocialMediaItem;
+  label: string;
+}
+export const EditSocialMedia = () => {
+  const { id } = useParams();
+  const { singleItem: item, updateItem } = useSocialMedia(undefined, id);
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const navigate = useNavigate();
+  const defaultValues = useMemo(
+    () => ({
+      nameEn: item?.name?.en,
+      nameAm: item?.name?.am,
+      link: item?.link,
+      type: item?.type,
+      isActive: item?.isActive,
+    }),
+    [item] // 👈 recompute only when item changes
+  );
+  const {
+    register,
+    handleSubmit,
+    watch,
+    control,
+    setValue,
+    reset,
+    formState: { errors },
+  } = useForm<SocialMediaFormData>({
+    defaultValues,
+  });
+  useEffect(() => {
+    if (item) {
+      reset(defaultValues);
+    }
+  }, [item, defaultValues, reset]);
+  const handleEditSubmit = async (SocialMediaFormData: SocialMediaFormData) => {
+    if (!item) return;
+    setIsSubmitting(true);
+    try {
+      const payload: CreateSocialMediaPayload = {
+        name: {
+          am: SocialMediaFormData.nameAm || "",
+          en: SocialMediaFormData.nameEn || "",
+        },
+        type: SocialMediaFormData.type,
+        link: SocialMediaFormData.link,
+
+        isActive: SocialMediaFormData.isActive,
+      };
+
+      await updateItem({
+        id: item?.id,
+        data: payload,
+      });
+      toast.success("SocialMedia updated successfully");
+      navigate(-1);
+    } catch (error) {
+      toast.error("Failed to update about us");
+      console.error("Update error:", error);
+      setIsSubmitting(false);
+    }
+  };
+  const onCancel = () => {
+    navigate(-1);
+  };
+  return (
+    <SocilaMediaForm
+      handleSubmit={handleSubmit(handleEditSubmit)}
+      handleCancel={onCancel}
+      watch={watch}
+      setValue={setValue}
+      control={control}
+      register={register}
+      errors={errors}
+      isSubmitting={isSubmitting}
+      label="Edit Social Media Information"
+    />
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/SocialMedia/Form.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/SocialMedia/Form.tsx
new file mode 100644
index 000000000..db75eb89e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/SocialMedia/Form.tsx
@@ -0,0 +1,134 @@
+import { Button } from "@/shared/common/ui/button";
+import { Loader2 } from "lucide-react";
+import {
+  FormInputBox,
+  FormSelector,
+  FormSingleBox,
+  FormToggle,
+} from "../components/FormInputBox";
+import { FormProps } from "./EditSocialMedia";
+import { socialMediaList } from "../types/socialMediaType";
+
+const SocilaMediaForm = ({
+  handleSubmit,
+  handleCancel,
+  watch,
+  control,
+  setValue,
+  register,
+  errors,
+  isSubmitting,
+  reset,
+  item,
+  label,
+}: FormProps) => {
+  const socialItem: socialMediaList[] = [
+    {
+      label: "FaceBook",
+      value: "FACEBOOK",
+    },
+    {
+      label: "Twitter",
+      value: "TWITTER",
+    },
+    {
+      label: "TikTok",
+      value: "TIKTOK",
+    },
+    {
+      label: "WebSite",
+      value: "WEBSITE",
+    },
+    {
+      label: "Linked In",
+      value: "LINKEDIN",
+    },
+    {
+      label: "Instagram",
+      value: "INSTAGRAM",
+    },
+    {
+      label: "YouTube",
+      value: "YOUTUBE",
+    },
+    {
+      label: "Telegram",
+      value: "TELEGRAM",
+    },
+  ];
+  return (
+    <div className="max-h-[80vh] overflow-y-auto p-6 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
+      <form onSubmit={handleSubmit} className="space-y-8">
+        {/* message type */}
+        <FormSelector
+          id="type"
+          label="Social Media Type"
+          error="Type is Required"
+          errors={errors}
+          register={register}
+          control={control}
+          item={socialItem}
+        />
+
+        {/* Title Section */}
+        <FormInputBox
+          idEn="nameEn"
+          idAm="nameAm"
+          label="Name"
+          error="Name is Required"
+          errors={errors}
+          register={register}
+        />
+
+        {/* Description Section */}
+        <FormSingleBox
+          id="link"
+          label="Link"
+          watch={watch}
+          setValue={setValue}
+          register={register}
+          error="Link is required"
+          errors={errors}
+          type="link"
+        />
+
+        {/* isActive Toggle */}
+        <FormToggle
+          idAm="isActive"
+          label="Status"
+          watch={watch}
+          setValue={setValue}
+        />
+
+        {/* Actions */}
+        <div className="flex justify-end gap-3 pt-6 border-t border-gray-200 dark:border-gray-700">
+          <Button
+            variant="outline"
+            onClick={handleCancel}
+            type="button"
+            disabled={isSubmitting}
+            className="px-6 py-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700"
+          >
+            Cancel
+          </Button>
+
+          <Button
+            type="submit"
+            disabled={isSubmitting}
+            className="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white"
+          >
+            {isSubmitting ? (
+              <span className="flex items-center gap-2">
+                <Loader2 className="w-4 h-4 animate-spin" />
+                ...
+              </span>
+            ) : (
+              label
+            )}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};
+export default SocilaMediaForm;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/SocialMedia/SocialMedia.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/SocialMedia/SocialMedia.tsx
new file mode 100644
index 000000000..0047c03a7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/SocialMedia/SocialMedia.tsx
@@ -0,0 +1,85 @@
+import { NavLink, useNavigate } from "react-router-dom";
+import { CirclePlus } from "lucide-react";
+import { SocialMediaColumnDefn } from "./SocialMediaColumn";
+import { useTranslation } from "react-i18next";
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import { useMemo, useState } from "react";
+import Loader from "@/record-management/components/Loader/loader";
+import { Button } from "@/shared/common/ui/button";
+import { useSocialMedia } from "../hooks/useSocialMedia";
+export const SocialMedia = () => {
+  const [pageIndex, setPageIndex] = useState(0);
+  const navigate = useNavigate();
+  const pageSize = 10;
+  const { t } = useTranslation();
+  const baseParams = useMemo(() => {
+    const params: Record<string, any> = {
+      skip: pageIndex * pageSize,
+      take: pageSize,
+      orderBy: "createdAt:DESC",
+    };
+
+    return params;
+  }, [pageIndex]);
+
+  const { items, refetch, deleteItem, error, isLoading, count } =
+    useSocialMedia(baseParams);
+  const handlePageChange = (newPage: number) => {
+    setPageIndex(newPage);
+  };
+  
+  return (
+    <div className="flex flex-col h-full w-full p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700">
+      {/* Header Section */}
+      <div className="flex items-center justify-between mb-4 border-b pb-3 border-gray-200 dark:border-gray-700">
+        <h1 className="text-xl font-semibold text-gray-800 dark:text-gray-200">{t("socialMedia")}</h1>
+        {
+          <NavLink to="/user-management/web-Management/SocialMedia/AddSocialMedia">
+            <Button
+              variant="addRecordBtn"
+              className="flex items-center gap-1 bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition-all">
+              <CirclePlus className="w-4 h-4" />
+              <span>{t("addSocialMedia")}</span>
+            </Button>
+          </NavLink>
+        }
+      </div>
+
+      {/* Content Section */}
+      <div className="flex-1 overflow-auto">
+        {isLoading && (
+          <div className="flex justify-center items-center h-48">
+            <Loader />
+          </div>
+        )}
+
+        {error && (
+          <p className="text-center text-red-500 text-sm mt-4">
+            {t("userRecord.Error loading records.")}
+          </p>
+        )}
+
+        {!isLoading && !error && (
+          <div className="mt-2">
+            <AdvancedTable
+              columns={SocialMediaColumnDefn({
+                navigate,
+                onDelete: deleteItem,
+              })}
+              data={items || []}
+              tableName="SocialMedias"
+              toolBarPosition="right"
+              extraToolbar={<div className="flex gap-2"></div>}
+              itemCount={count || 2}
+              pageIndex={pageIndex}
+              onPageChange={handlePageChange}
+              nextFunction={() => handlePageChange(pageIndex + 1)}
+              prevFunction={() => handlePageChange(Math.max(pageIndex - 1, 0))}
+              refresh={refetch}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/SocialMedia/SocialMediaColumn.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/SocialMedia/SocialMediaColumn.tsx
new file mode 100644
index 000000000..b09d008f7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/SocialMedia/SocialMediaColumn.tsx
@@ -0,0 +1,106 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { Button } from "@/shared/common/ui/button";
+import { Trash2, Edit } from "lucide-react";
+import { SocialMediaItem } from "../types/socialMediaType";
+import { t } from "i18next";
+import i18n from "@/i18n";
+export const SocialMediaColumnDefn = ({
+  //  onDelete,
+  navigate,
+  onDelete,
+}: {
+  navigate: (id: string) => void;
+  onDelete: (id: string) => Promise<void>;
+}): ColumnDef<SocialMediaItem>[] => [
+    {
+      accessorKey: "title",
+      header: () => t("toogle.title"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        const lang = i18n.language;
+        if (lang === "am") {
+          return <span>{rowData.name?.am || "-"}</span>;
+        }
+        if (lang === "en") {
+          return <span>{rowData.name?.en || "-"}</span>;
+        } else {
+          return <span>{"-"}</span>;
+        }
+      },
+      enableHiding: true,
+    },
+
+    {
+      accessorKey: "link",
+      header: () => t("toogle.link"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        return <span>{rowData.link || "-"}</span>;
+      },
+      enableHiding: true,
+    },
+    {
+      accessorKey: "status",
+      header: () => t("toogle.status"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        return (
+          <span
+            className={`px-2 py-1 rounded-full text-xs font-medium ${rowData.isActive
+              ? "bg-primary-100 text-primary-800"
+              : "bg-red-100 text-red-800"
+              }`}
+          >
+            {rowData.isActive ? "Active" : "Inactive"}
+          </span>
+        );
+      },
+      enableHiding: true,
+    },
+    {
+      accessorKey: "createdAt",
+      header: () => t("toogle.createdAt"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        const lang = i18n.language;
+        const amDate = rowData?.amharicCreatedAt;
+        const enDate = new Date(rowData.createdAt).toLocaleString("en-US", {
+          month: "short", // "Oct"
+          day: "numeric", // "12"
+          year: "numeric", // "2014"
+          hour: "numeric", // "8"
+          minute: "2-digit", // "12"
+          hour12: true, // "PM" format
+        });
+        const date = lang === "am" ? amDate : enDate;
+        return <span className="text-sm text-gray-500">{date}</span>;
+      },
+      enableHiding: true,
+    },
+    {
+      accessorKey: "Actions",
+      header: () => t("toogle.Actions"),
+      cell: ({ row }) => (
+        <div className="flex space-x-2">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() =>
+              navigate(
+                `/user-management/web-management/SocialMedia/EditSocialMedia/${row.original.id}`
+              )
+            }
+          >
+            <Edit className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => onDelete(row.original.id)}
+          >
+            <Trash2 className="h-4 w-4 text-destructive" />
+          </Button>
+        </div>
+      ),
+    },
+  ];
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateConfiguration/TemplateConfigurationPage.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateConfiguration/TemplateConfigurationPage.tsx
new file mode 100644
index 000000000..9938ebd5b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateConfiguration/TemplateConfigurationPage.tsx
@@ -0,0 +1,33 @@
+import { Route, Routes, useLocation } from "react-router-dom";
+import { TemplateList } from "./TemplateList";
+import { TemplateForm } from "./TemplateForm";
+import { useTranslation } from "react-i18next";
+
+export const TemplateConfigurationPage = () => {
+  const location = useLocation();
+  const { t } = useTranslation();
+
+  const isFormPage =
+    location.pathname.includes("/new") || location.pathname.includes("/edit");
+
+  return (
+    <div className="space-y-6">
+      {/* Breadcrumb */}
+      <div className="flex items-center gap-2 text-sm text-gray-500">
+        <span>{t("webManagement", "Web Management")}</span>
+        <span>/</span>
+        <span className="text-gray-900 font-medium">
+          {t("template.title", "Resource Configuration")}
+        </span>
+      </div>
+
+      {/* Routes */}
+      <Routes>
+        <Route path="/" element={<TemplateList />} />
+        <Route path="/templates" element={<TemplateList />} />
+        <Route path="/new" element={<TemplateForm />} />
+        <Route path="/edit/:id" element={<TemplateForm />} />
+      </Routes>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateConfiguration/TemplateForm.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateConfiguration/TemplateForm.tsx
new file mode 100644
index 000000000..5acb225d8
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateConfiguration/TemplateForm.tsx
@@ -0,0 +1,517 @@
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button } from "@/shared/common/ui/button";
+import { Label } from "@/shared/common/ui/label";
+import { Input } from "@/shared/common/ui/input";
+import { Textarea } from "@/shared/common/ui/textarea";
+import { Alert, AlertDescription, AlertTitle } from "@/shared/common/ui/alert";
+import { AlertCircle, Loader2, Upload, X } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useNavigate, useParams, useLocation } from "react-router-dom";
+import {
+  useTemplate,
+  useTemplateWithPresigned,
+  useTemplateMutations,
+  useResourceTypes,
+} from "../hooks/useTemplates";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { useErrorHandler } from "@/shared/hooks/useErrorHandler";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+
+const MAX_FILE_SIZE_BYTES = 50 * 1024 * 1024;
+const ACCEPTED_FILE_TYPES = new Set([
+  "image/png",
+  "image/jpeg",
+  "image/gif",
+  "image/webp",
+  "application/pdf",
+]);
+
+type FormData = {
+  resourceTypeId: string;
+  nameAm: string;
+  nameEn: string;
+  descriptionAm?: string;
+  descriptionEn?: string;
+  file?: FileList;
+};
+
+const buildTemplateFormSchema = (
+  getRequireFile: () => boolean,
+  translate: (key: string, fallback?: string) => string,
+) =>
+  z
+    .object({
+      resourceTypeId: z
+        .string()
+        .min(
+          1,
+          translate("template.resourceTypeRequired", "Resource type is required"),
+        ),
+      nameAm: z
+        .string()
+        .trim()
+        .min(1, translate("template.nameRequired", "Name is required")),
+      nameEn: z
+        .string()
+        .trim()
+        .min(1, translate("template.nameRequired", "Name is required")),
+      descriptionAm: z.string().optional(),
+      descriptionEn: z.string().optional(),
+      file: z.custom<FileList | undefined>().optional(),
+    })
+    .superRefine((data, ctx) => {
+      const fileList = data.file;
+      const selectedFile = fileList?.[0];
+      const requireFile = getRequireFile();
+
+      if (requireFile && !selectedFile) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: translate("template.fileRequired", "File is required"),
+          path: ["file"],
+        });
+        return;
+      }
+
+      if (!selectedFile) return;
+
+      if (!ACCEPTED_FILE_TYPES.has(selectedFile.type)) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: translate(
+            "template.invalidFileType",
+            "Only PNG, JPG, GIF, WebP, and PDF files are allowed",
+          ),
+          path: ["file"],
+        });
+      }
+
+      if (selectedFile.size > MAX_FILE_SIZE_BYTES) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: translate(
+            "template.fileTooLarge",
+            "File must be 50MB or smaller",
+          ),
+          path: ["file"],
+        });
+      }
+    });
+
+export const TemplateForm = () => {
+  const { id } = useParams();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const { getErrorMessage } = useErrorHandler(t);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const [filePreview, setFilePreview] = useState<string>("");
+  const [fileName, setFileName] = useState<string>("");
+
+  // Get resourceTypeId from location state (passed from list page)
+  const resourceTypeIdFromState =
+    ((location.state as Record<string, unknown>)?.resourceTypeId as string) ||
+    "";
+
+  const { data: template, isLoading: isLoadingTemplate } = useTemplate(
+    id || "",
+  );
+
+  // Use the presigned version if we have resourceTypeId from state
+  const { data: templateWithPresigned, isLoading: isLoadingPresigned } =
+    useTemplateWithPresigned(resourceTypeIdFromState, id || "");
+
+  // Use presigned version if available, otherwise fall back to regular template
+  const templateData = resourceTypeIdFromState
+    ? templateWithPresigned
+    : template;
+  const isLoadingTemplate2 = resourceTypeIdFromState
+    ? isLoadingPresigned
+    : isLoadingTemplate;
+
+  const { data: resourceTypesData } = useResourceTypes();
+  const { create, update } = useTemplateMutations();
+
+  const hasExistingFile = Boolean(
+    templateData?.fileInfo?.originalname || templateData?.presigned,
+  );
+  const requireFile = !hasExistingFile;
+  const requireFileRef = useRef(requireFile);
+  requireFileRef.current = requireFile;
+
+  const translate = (key: string, fallback?: string) =>
+    t(key, { defaultValue: fallback ?? key });
+
+  const templateFormSchema = useMemo(
+    () => buildTemplateFormSchema(() => requireFileRef.current, translate),
+    [t],
+  );
+
+  const defaultValues = useMemo(
+    () => ({
+      resourceTypeId:
+        templateData?.resourceTypeId || resourceTypeIdFromState || "",
+      nameAm: templateData?.name?.am || "",
+      nameEn: templateData?.name?.en || "",
+      descriptionAm: templateData?.description?.am || "",
+      descriptionEn: templateData?.description?.en || "",
+    }),
+    [templateData, resourceTypeIdFromState],
+  );
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    reset,
+    control,
+    formState: { errors },
+  } = useForm<FormData>({
+    resolver: zodResolver(templateFormSchema),
+    defaultValues,
+  });
+
+  useEffect(() => {
+    if (templateData) {
+      reset(defaultValues);
+      if (templateData.presigned) {
+        setFilePreview(templateData.presigned);
+      }
+      if (templateData.fileInfo?.originalname) {
+        setFileName(templateData.fileInfo.originalname);
+      }
+    }
+  }, [templateData, defaultValues, reset]);
+
+  const fileInput = watch("file")?.[0];
+
+  useEffect(() => {
+    if (fileInput) {
+      const url = URL.createObjectURL(fileInput);
+      setFilePreview(url);
+      setFileName(fileInput.name);
+      return () => URL.revokeObjectURL(url);
+    }
+  }, [fileInput]);
+
+  const handleFormSubmit = async (formData: FormData) => {
+    setIsSubmitting(true);
+    setSubmitError(null);
+    try {
+      const file = formData.file?.[0];
+      const payload = {
+        resourceTypeId: formData.resourceTypeId,
+        name: {
+          am: formData.nameAm,
+          en: formData.nameEn,
+        },
+        description: {
+          am: formData.descriptionAm ?? "",
+          en: formData.descriptionEn ?? "",
+        },
+        fileInfo: file
+          ? {
+              fileName: file.name,
+              contentType: file.type,
+              size: file.size,
+              originalname: file.name,
+            }
+          : undefined,
+      };
+
+      if (id) {
+        await update.mutateAsync({
+          id,
+          ...payload,
+          fileData: file ? { file, uploadUrl: "" } : undefined,
+        });
+        toast.success(t("template.updated", "Resource updated successfully"));
+      } else {
+        await create.mutateAsync({
+          ...payload,
+          fileData: file ? { file, uploadUrl: "" } : undefined,
+        });
+        toast.success(t("template.created", "Resource created successfully"));
+      }
+
+      navigate(
+        "/user-management/web-management/TemplateConfiguration/templates",
+      );
+    } catch (error) {
+      setSubmitError(await getErrorMessage(error));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (isLoadingTemplate2) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <Loader2 className="h-8 w-8 animate-spin text-purple-600" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-h-[80vh] overflow-y-auto p-6 bg-white rounded-xl border border-gray-200 shadow-sm">
+      <form onSubmit={handleSubmit(handleFormSubmit)} className="space-y-6">
+        {/* Header */}
+        <div className="mb-6">
+          <h2 className="text-2xl font-bold text-gray-900">
+            {id
+              ? t("template.edit", "Edit Resource")
+              : t("template.create", "Create Resource")}
+          </h2>
+          <p className="text-gray-600 mt-1">
+            {id
+              ? t("template.editDescription", "Update resource configuration")
+              : t(
+                  "template.createDescription",
+                  "Create a new resource for style settings",
+                )}
+          </p>
+        </div>
+
+        {submitError && (
+          <Alert className="border-red-200 bg-red-50/80 text-red-950 shadow-sm dark:border-red-900/60 dark:bg-red-950/30 dark:text-red-100">
+            <AlertCircle className="h-4 w-4" />
+            <div className="flex w-full items-start justify-between gap-3">
+              <div className="space-y-1">
+                <AlertTitle className="text-sm font-semibold">
+                  {t("template.submitErrorTitle", "Could not save resource")}
+                </AlertTitle>
+                <AlertDescription className="text-sm text-red-800 dark:text-red-200">
+                  {submitError}
+                </AlertDescription>
+              </div>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7 shrink-0 text-red-700 hover:bg-red-100 hover:text-red-900 dark:text-red-200 dark:hover:bg-red-900/40"
+                onClick={() => setSubmitError(null)}
+                aria-label={t("common.dismiss", "Dismiss")}
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          </Alert>
+        )}
+
+        {/* Resource Type */}
+        <div className="space-y-2">
+          <Label htmlFor="resourceTypeId" className="text-gray-700 font-medium">
+            {t("template.resourceType", "Resource Type")} *
+          </Label>
+          <Controller
+            name="resourceTypeId"
+            control={control}
+            render={({ field }) => (
+              <Select value={field.value} onValueChange={field.onChange}>
+                <SelectTrigger className="w-full">
+                  <SelectValue
+                    placeholder={t(
+                      "template.selectResourceType",
+                      "Select resource type",
+                    )}
+                  />
+                </SelectTrigger>
+                <SelectContent>
+                  {resourceTypesData?.items?.map((type) => (
+                    <SelectItem key={type.id} value={type.id}>
+                      {type.name.en} ({type.name.am})
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+          />
+          {errors.resourceTypeId && (
+            <p className="text-red-500 text-sm">
+              {errors.resourceTypeId.message}
+            </p>
+          )}
+        </div>
+
+        {/* Names Section */}
+        <div className="bg-gray-50 p-5 rounded-lg border border-gray-100 space-y-4">
+          <h3 className="text-lg font-semibold text-gray-800 flex items-center">
+            <div className="h-1 w-4 bg-blue-500 mr-2 rounded-full"></div>
+            {t("template.names", "Names")}
+          </h3>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="nameAm" className="text-gray-700">
+                {t("template.nameAmharic", "Name (Amharic)")} *
+              </Label>
+              <Input
+                id="nameAm"
+                placeholder={t(
+                  "template.enterNameAmharic",
+                  "Enter name in Amharic",
+                )}
+                {...register("nameAm")}
+                className="border-gray-300"
+              />
+              {errors.nameAm && (
+                <p className="text-red-500 text-sm">{errors.nameAm.message}</p>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="nameEn" className="text-gray-700">
+                {t("template.nameEnglish", "Name (English)")} *
+              </Label>
+              <Input
+                id="nameEn"
+                placeholder={t(
+                  "template.enterNameEnglish",
+                  "Enter name in English",
+                )}
+                {...register("nameEn")}
+                className="border-gray-300"
+              />
+              {errors.nameEn && (
+                <p className="text-red-500 text-sm">{errors.nameEn.message}</p>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Descriptions Section */}
+        <div className="bg-gray-50 p-5 rounded-lg border border-gray-100 space-y-4">
+          <h3 className="text-lg font-semibold text-gray-800 flex items-center">
+            <div className="h-1 w-4 bg-green-500 mr-2 rounded-full"></div>
+            {t("template.descriptions", "Descriptions")}
+          </h3>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="descriptionAm" className="text-gray-700">
+                {t("template.descriptionAmharic", "Description (Amharic)")}
+              </Label>
+              <Textarea
+                id="descriptionAm"
+                placeholder={t(
+                  "template.enterDescriptionAmharic",
+                  "Enter description in Amharic",
+                )}
+                {...register("descriptionAm")}
+                className="border-gray-300 min-h-24"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="descriptionEn" className="text-gray-700">
+                {t("template.descriptionEnglish", "Description (English)")}
+              </Label>
+              <Textarea
+                id="descriptionEn"
+                placeholder={t(
+                  "template.enterDescriptionEnglish",
+                  "Enter description in English",
+                )}
+                {...register("descriptionEn")}
+                className="border-gray-300 min-h-24"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* File Upload Section */}
+        <div className="bg-gray-50 p-5 rounded-lg border border-gray-100 space-y-4">
+          <h3 className="text-lg font-semibold text-gray-800 flex items-center">
+            <div className="h-1 w-4 bg-orange-500 mr-2 rounded-full"></div>
+            {t("template.file", "File")}
+          </h3>
+
+          <div className="space-y-3">
+            <Label htmlFor="file" className="text-gray-700">
+              {t("template.uploadFile", "Upload File")}
+              {requireFile ? " *" : ""}
+            </Label>
+
+            {filePreview && (
+              <div className="flex items-center justify-between p-3 bg-white border border-gray-200 rounded-lg">
+                <span className="text-sm text-gray-700 truncate">
+                  {fileName}
+                </span>
+              </div>
+            )}
+
+            <div className="relative">
+              <input
+                id="file"
+                type="file"
+                {...register("file")}
+                className="hidden"
+                accept=".png,.jpg,.jpeg,.gif,.webp,.pdf"
+              />
+              <label
+                htmlFor="file"
+                className="flex items-center justify-center w-full p-6 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:border-purple-500 hover:bg-purple-50 transition-colors"
+              >
+                <div className="flex flex-col items-center">
+                  <Upload className="h-8 w-8 text-gray-400 mb-2" />
+                  <span className="text-sm font-medium text-gray-700">
+                    {t("template.dragDrop", "Drag and drop or click to upload")}
+                  </span>
+                  <span className="text-xs text-gray-500 mt-1">
+                    {t(
+                      "template.fileTypes",
+                      "PNG, JPG, GIF, WebP, PDF up to 50MB",
+                    )}
+                  </span>
+                </div>
+              </label>
+            </div>
+            {errors.file && (
+              <p className="text-red-500 text-sm">{errors.file.message}</p>
+            )}
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="flex justify-end gap-3 pt-6 border-t border-gray-200">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() =>
+              navigate(
+                "/user-management/web-management/TemplateConfiguration/templates",
+              )
+            }
+            className="px-6"
+          >
+            {t("common.cancel", "Cancel")}
+          </Button>
+          <Button
+            type="submit"
+            disabled={isSubmitting}
+            className="px-6 bg-purple-600 hover:bg-purple-700 text-white"
+          >
+            {isSubmitting ? (
+              <span className="flex items-center gap-2">
+                <Loader2 className="w-4 h-4 animate-spin" />
+                {t("common.saving", "Saving...")}
+              </span>
+            ) : (
+              t("common.save", "Save")
+            )}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateConfiguration/TemplateList.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateConfiguration/TemplateList.tsx
new file mode 100644
index 000000000..54c1b1f11
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateConfiguration/TemplateList.tsx
@@ -0,0 +1,316 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  useTemplates,
+  useTemplateMutations,
+  useResourceTypes,
+} from "../hooks/useTemplates";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/common/ui/table";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import { Edit2, Trash2, Plus } from "lucide-react";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+
+export const TemplateList = () => {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const [search, setSearch] = useState("");
+  const [selectedResourceTypeId, setSelectedResourceTypeId] =
+    useState<string>("");
+  const [selectedTemplate, setSelectedTemplate] = useState<any>(null);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+
+  const { data: templatesData, isLoading } = useTemplates({
+    search,
+    resourceTypeId: selectedResourceTypeId,
+  });
+  const { data: resourceTypesData } = useResourceTypes();
+  const { delete: deleteTemplate } = useTemplateMutations();
+
+  const getResourceTypeName = (typeId: string) => {
+    return (
+      resourceTypesData?.items?.find((t) => t.id === typeId)?.name?.en || typeId
+    );
+  };
+
+  const handleDelete = (template: any) => {
+    setSelectedTemplate(template);
+    setIsDeleteDialogOpen(true);
+  };
+
+  const confirmDelete = () => {
+    if (!selectedTemplate) return;
+
+    deleteTemplate.mutate(selectedTemplate.id, {
+      onSuccess: () => {
+        setIsDeleteDialogOpen(false);
+        setSelectedTemplate(null);
+        toast.success(t("template.deleted", "Template deleted successfully"));
+      },
+      onError: (error: any) => {
+        toast.error(
+          error.message ||
+            t("template.deleteFailed", "Failed to delete template"),
+        );
+      },
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+        <div>
+          <h2 className="text-2xl font-bold text-gray-900">
+            {t("template.title", "Resource Configuration")}
+          </h2>
+          <p className="text-gray-600 mt-1">
+            {t("template.pageDescription", "Manage resources for style settings")}
+          </p>
+        </div>
+        <Button
+          onClick={() =>
+            navigate(
+              "/user-management/web-management/TemplateConfiguration/new",
+            )
+          }
+          className="bg-purple-600 hover:bg-purple-700 text-white gap-2"
+        >
+          <Plus className="h-4 w-4" />
+          {t("template.create", "Create Resource")}
+        </Button>
+      </div>
+
+      {/* Search and Filter */}
+      <div className="flex flex-col md:flex-row gap-4">
+        <div className="flex-1">
+          <Input
+            placeholder={t("template.search", "Search templates...")}
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            disabled={!selectedResourceTypeId}
+            className="max-w-sm"
+          />
+        </div>
+        <div className="w-full md:w-64">
+          <Select
+            value={selectedResourceTypeId}
+            onValueChange={setSelectedResourceTypeId}
+          >
+            <SelectTrigger>
+              <SelectValue
+                placeholder={t(
+                  "template.selectResourceType",
+                  "Select resource type",
+                )}
+              />
+            </SelectTrigger>
+            <SelectContent>
+              {resourceTypesData?.items?.map((type) => (
+                <SelectItem key={type.id} value={type.id}>
+                  {type.name.en} ({type.name.am})
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {/* Table */}
+      <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
+        <div className="overflow-x-auto">
+          <Table>
+            <TableHeader>
+              <TableRow className="bg-gray-50 border-b border-gray-200">
+                <TableHead className="text-gray-700 font-semibold">
+                  {t("template.name", "Name")}
+                </TableHead>
+                <TableHead className="text-gray-700 font-semibold">
+                  {t("template.resourceType", "Resource Type")}
+                </TableHead>
+                <TableHead className="text-gray-700 font-semibold">
+                  {t("template.description", "Description")}
+                </TableHead>
+                <TableHead className="text-gray-700 font-semibold">
+                  {t("template.file", "File")}
+                </TableHead>
+                <TableHead className="text-gray-700 font-semibold text-right">
+                  {t("common.actions", "Actions")}
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {!selectedResourceTypeId ? (
+                <TableRow>
+                  <TableCell colSpan={5} className="text-center py-8">
+                    <div className="flex flex-col items-center justify-center">
+                      <p className="text-gray-500 font-medium">
+                        {t(
+                          "template.selectTypeFirst",
+                          "Select a resource type to view templates",
+                        )}
+                      </p>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ) : isLoading ? (
+                Array.from({ length: 5 }).map((_, i) => (
+                  <TableRow key={i}>
+                    <TableCell>
+                      <Skeleton className="h-4 w-32" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-4 w-24" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-4 w-40" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-4 w-20" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-4 w-24" />
+                    </TableCell>
+                  </TableRow>
+                ))
+              ) : templatesData?.items?.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={5} className="text-center py-8">
+                    <div className="flex flex-col items-center justify-center">
+                      <p className="text-gray-500 font-medium">
+                        {t("template.noTemplates", "No templates yet")}
+                      </p>
+                      <p className="text-gray-400 text-sm mt-1">
+                        {t(
+                          "template.getStarted",
+                          "Get started by creating your first template",
+                        )}
+                      </p>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ) : (
+                templatesData?.items?.map((template) => (
+                  <TableRow
+                    key={template.id}
+                    className="border-b border-gray-100 hover:bg-gray-50"
+                  >
+                    <TableCell className="font-medium text-gray-900">
+                      {template.name?.en || "-"}
+                    </TableCell>
+                    <TableCell className="text-gray-600">
+                      {getResourceTypeName(template.resourceTypeId)}
+                    </TableCell>
+                    <TableCell className="text-gray-600 max-w-xs truncate">
+                      {template.description?.en || "-"}
+                    </TableCell>
+                    <TableCell className="text-gray-600">
+                      {template.fileInfo?.originalname ? (
+                        <span className="text-blue-600 hover:text-blue-700 cursor-pointer">
+                          {template.fileInfo.originalname}
+                        </span>
+                      ) : (
+                        <span className="text-gray-400">-</span>
+                      )}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <div className="flex justify-end gap-2">
+                        <button
+                          onClick={() =>
+                            navigate(
+                              `/user-management/web-management/TemplateConfiguration/edit/${template.id}`,
+                              {
+                                state: {
+                                  resourceTypeId: template.resourceTypeId,
+                                },
+                              },
+                            )
+                          }
+                          className="p-2 text-purple-600 hover:bg-purple-50 rounded-lg transition-colors"
+                          title={t("common.edit", "Edit")}
+                        >
+                          <Edit2 className="h-4 w-4" />
+                        </button>
+                        <button
+                          onClick={() => handleDelete(template)}
+                          className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                          title={t("common.delete", "Delete")}
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+
+      {/* Delete Dialog */}
+      <AlertDialog
+        open={isDeleteDialogOpen}
+        onOpenChange={setIsDeleteDialogOpen}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t("template.confirmDelete", "Confirm Deletion")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t(
+                "template.deleteConfirmation",
+                "Are you sure you want to delete this template? This action cannot be undone.",
+              )}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <div className="flex justify-end gap-3">
+            <AlertDialogCancel>
+              {t("common.cancel", "Cancel")}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={confirmDelete}
+              disabled={deleteTemplate.isPending}
+              className="bg-red-600 hover:bg-red-700"
+            >
+              {deleteTemplate.isPending ? (
+                <span className="flex items-center gap-2">
+                  <span className="animate-spin">⏳</span>
+                  {t("common.deleting", "Deleting...")}
+                </span>
+              ) : (
+                t("common.delete", "Delete")
+              )}
+            </AlertDialogAction>
+          </div>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateConfiguration/types/templateTypes.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateConfiguration/types/templateTypes.ts
new file mode 100644
index 000000000..1394bc804
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateConfiguration/types/templateTypes.ts
@@ -0,0 +1,53 @@
+export interface FileInfo {
+  fileName: string;
+  contentType: string;
+  size: number;
+  originalname: string;
+}
+
+export interface TemplateResource {
+  id?: string;
+  resourceTypeId: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  description: {
+    am: string;
+    en: string;
+  };
+  fileInfo?: FileInfo;
+  presigned?: string;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export interface ResourceType {
+  id: string;
+  code: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  description: {
+    am: string;
+    en: string;
+  };
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface TemplateResponse {
+  count: number;
+  items: TemplateResource[];
+}
+
+export interface ResourceTypeResponse {
+  count: number;
+  items: ResourceType[];
+}
+
+export type CreateTemplatePayload = Omit<
+  TemplateResource,
+  "id" | "createdAt" | "updatedAt"
+>;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateSettingValues/TemplateSettingValueForm.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateSettingValues/TemplateSettingValueForm.tsx
new file mode 100644
index 000000000..27bc3fc8a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateSettingValues/TemplateSettingValueForm.tsx
@@ -0,0 +1,338 @@
+import { useForm } from "react-hook-form";
+import { Button } from "@/shared/common/ui/button";
+import { Label } from "@/shared/common/ui/label";
+import { Input } from "@/shared/common/ui/input";
+import { Loader2 } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import {
+  useTemplateSettingValue,
+  useTemplateSettingValueMutations,
+  useTemplates,
+  useTemplateSettings,
+  useResources,
+  useResourceTypes,
+} from "./hooks/useTemplateSettingValues";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+
+interface FormData {
+  templateSettingId: string;
+  resourceId: string;
+  value: string;
+}
+
+export const TemplateSettingValueForm = () => {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [selectedTemplate, setSelectedTemplate] = useState<string>("");
+  const [selectedResourceType, setSelectedResourceType] = useState<string>("");
+
+  const { data: templateSettingValue, isLoading: isLoadingTemplate } =
+    useTemplateSettingValue(id || "");
+  const { data: templatesData } = useTemplates();
+  const { data: templateSettingsData } = useTemplateSettings(selectedTemplate);
+  const { data: resourcesData } = useResources(selectedResourceType);
+  const { data: resourceTypesData } = useResourceTypes();
+  const { create, update } = useTemplateSettingValueMutations();
+
+  const defaultValues = useMemo(
+    () => ({
+      templateSettingId: templateSettingValue?.templateSettingId || "",
+      resourceId: templateSettingValue?.resourceId || "",
+      value: templateSettingValue?.value || "",
+    }),
+    [templateSettingValue],
+  );
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    setValue,
+    formState: { errors },
+  } = useForm<FormData>({
+    defaultValues,
+  });
+
+  useEffect(() => {
+    if (templateSettingValue) {
+      reset(defaultValues);
+      setSelectedTemplate(templateSettingValue.templateSettingId);
+    }
+  }, [templateSettingValue, defaultValues, reset]);
+
+  const handleFormSubmit = async (formData: FormData) => {
+    setIsSubmitting(true);
+    try {
+      if (id) {
+        await update.mutateAsync({
+          id,
+          data: formData,
+        });
+        toast.success(
+          t(
+            "templateSettingValue.updated",
+            "Template setting value updated successfully",
+          ),
+        );
+      } else {
+        await create.mutateAsync(formData);
+        toast.success(
+          t(
+            "templateSettingValue.created",
+            "Template setting value created successfully",
+          ),
+        );
+      }
+
+      navigate("/user-management/web-management/TemplateSettingValues/values");
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : "Unknown error";
+      toast.error(
+        errorMessage ||
+          t(
+            "templateSettingValue.error",
+            "Failed to save template setting value",
+          ),
+      );
+      console.error("Form submission error:", error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (isLoadingTemplate) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <Loader2 className="h-8 w-8 animate-spin text-purple-600" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-h-[80vh] overflow-y-auto p-6 bg-white rounded-xl border border-gray-200 shadow-sm">
+      <form onSubmit={handleSubmit(handleFormSubmit)} className="space-y-6">
+        {/* Header */}
+        <div className="mb-6">
+          <h2 className="text-2xl font-bold text-gray-900">
+            {id
+              ? t("templateSettingValue.edit", "Edit Template Setting Value")
+              : t(
+                  "templateSettingValue.create",
+                  "Create Template Setting Value",
+                )}
+          </h2>
+          <p className="text-gray-600 mt-1">
+            {id
+              ? t(
+                  "templateSettingValue.editDescription",
+                  "Update template setting value",
+                )
+              : t(
+                  "templateSettingValue.createDescription",
+                  "Create a new template setting value",
+                )}
+          </p>
+        </div>
+
+        {/* Form Fields */}
+        <div className="space-y-4">
+          {/* Template Dropdown */}
+          <div className="space-y-2">
+            <Label htmlFor="template" className="text-gray-700">
+              {t("templateSettingValue.template", "Template")} *
+            </Label>
+            <Select
+              value={selectedTemplate}
+              onValueChange={(value) => {
+                setSelectedTemplate(value);
+                setValue("templateSettingId", value);
+              }}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue
+                  placeholder={t(
+                    "templateSettingValue.selectTemplate",
+                    "Select template",
+                  )}
+                />
+              </SelectTrigger>
+              <SelectContent>
+                {Array.isArray(templatesData?.items) &&
+                  templatesData.items.map((template: any) => (
+                    <SelectItem key={template.id} value={template.id}>
+                      {template.name?.en || template.name}
+                    </SelectItem>
+                  ))}
+              </SelectContent>
+            </Select>
+            {errors.templateSettingId && (
+              <p className="text-red-500 text-sm">
+                {errors.templateSettingId.message}
+              </p>
+            )}
+          </div>
+
+          {/* Template Settings Dropdown */}
+          <div className="space-y-2">
+            <Label htmlFor="templateSetting" className="text-gray-700">
+              {t("templateSettingValue.templateSetting", "Template Setting")} *
+            </Label>
+            <Select
+              value={defaultValues.templateSettingId}
+              onValueChange={(value) => {
+                setValue("templateSettingId", value);
+              }}
+              disabled={!selectedTemplate}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue
+                  placeholder={t(
+                    "templateSettingValue.selectTemplateSetting",
+                    "Select template setting",
+                  )}
+                />
+              </SelectTrigger>
+              <SelectContent>
+                {Array.isArray(templateSettingsData?.items) &&
+                  templateSettingsData.items.map((setting: any) => (
+                    <SelectItem key={setting.id} value={setting.id}>
+                      {setting.name?.en || setting.name}
+                    </SelectItem>
+                  ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Resource Type Dropdown */}
+          <div className="space-y-2">
+            <Label htmlFor="resourceType" className="text-gray-700">
+              {t("templateSettingValue.resourceType", "Resource Type")} *
+            </Label>
+            <Select
+              value={selectedResourceType}
+              onValueChange={(value) => {
+                setSelectedResourceType(value);
+              }}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue
+                  placeholder={t(
+                    "templateSettingValue.selectResourceType",
+                    "Select resource type",
+                  )}
+                />
+              </SelectTrigger>
+              <SelectContent>
+                {Array.isArray(resourceTypesData?.items) &&
+                  resourceTypesData.items.map((resourceType: any) => (
+                    <SelectItem key={resourceType.id} value={resourceType.id}>
+                      {resourceType.name?.en || resourceType.name}
+                    </SelectItem>
+                  ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Resource Dropdown */}
+          <div className="space-y-2">
+            <Label htmlFor="resource" className="text-gray-700">
+              {t("templateSettingValue.resource", "Resource")} *
+            </Label>
+            <Select
+              value={defaultValues.resourceId}
+              onValueChange={(value) => {
+                setValue("resourceId", value);
+              }}
+              disabled={!selectedResourceType}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue
+                  placeholder={t(
+                    "templateSettingValue.selectResource",
+                    "Select resource",
+                  )}
+                />
+              </SelectTrigger>
+              <SelectContent>
+                {Array.isArray(resourcesData?.items) &&
+                  resourcesData.items.map((resource: any) => (
+                    <SelectItem key={resource.id} value={resource.id}>
+                      {resource.name?.en || resource.name}
+                    </SelectItem>
+                  ))}
+              </SelectContent>
+            </Select>
+            {errors.resourceId && (
+              <p className="text-red-500 text-sm">
+                {errors.resourceId.message}
+              </p>
+            )}
+          </div>
+
+          {/* Value Input */}
+          <div className="space-y-2">
+            <Label htmlFor="value" className="text-gray-700">
+              {t("templateSettingValue.value", "Value")} *
+            </Label>
+            <Input
+              id="value"
+              placeholder={t("templateSettingValue.enterValue", "Enter value")}
+              {...register("value", {
+                required: t(
+                  "templateSettingValue.valueRequired",
+                  "Value is required",
+                ),
+              })}
+              className="border-gray-300"
+            />
+            {errors.value && (
+              <p className="text-red-500 text-sm">{errors.value.message}</p>
+            )}
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="flex justify-end gap-3 pt-6 border-t border-gray-200">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() =>
+              navigate(
+                "/user-management/web-management/TemplateSettingValues/values",
+              )
+            }
+            className="px-6"
+          >
+            {t("common.cancel", "Cancel")}
+          </Button>
+          <Button
+            type="submit"
+            disabled={isSubmitting}
+            className="px-6 bg-purple-600 hover:bg-purple-700 text-white"
+          >
+            {isSubmitting ? (
+              <span className="flex items-center gap-2">
+                <Loader2 className="w-4 h-4 animate-spin" />
+                {t("common.saving", "Saving...")}
+              </span>
+            ) : (
+              t("common.save", "Save")
+            )}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateSettingValues/TemplateSettingValueList.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateSettingValues/TemplateSettingValueList.tsx
new file mode 100644
index 000000000..bcec29ae1
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateSettingValues/TemplateSettingValueList.tsx
@@ -0,0 +1,348 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  useTemplateSettingValues,
+  useTemplateSettingValueMutations,
+  useTemplateSettings,
+  useTemplates,
+} from "./hooks/useTemplateSettingValues";
+import { Button } from "@/shared/common/ui/button";
+import { Input } from "@/shared/common/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/common/ui/table";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/shared/common/ui/alert-dialog";
+import { Skeleton } from "@/shared/common/ui/skeleton";
+import { Edit2, Trash2, Plus } from "lucide-react";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+import { Label } from "@/shared/common/ui/label";
+
+export const TemplateSettingValueList = () => {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const [search, setSearch] = useState("");
+  const [selectedTemplate, setSelectedTemplate] = useState<string>("");
+  const [selectedTemplateSetting, setSelectedTemplateSetting] =
+    useState<string>("");
+  const [selectedValue, setSelectedValue] = useState<any>(null);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+
+  const { data: templatesData } = useTemplates();
+  const { data: templateSettingsData } = useTemplateSettings(selectedTemplate);
+  const { data: valuesData, isLoading } = useTemplateSettingValues(
+    selectedTemplateSetting,
+    { search },
+  );
+  const { delete: deleteValue } = useTemplateSettingValueMutations();
+
+  const handleDelete = (value: any) => {
+    setSelectedValue(value);
+    setIsDeleteDialogOpen(true);
+  };
+
+  const confirmDelete = () => {
+    if (!selectedValue) return;
+
+    deleteValue.mutate(selectedValue.id, {
+      onSuccess: () => {
+        setIsDeleteDialogOpen(false);
+        setSelectedValue(null);
+        toast.success(
+          t(
+            "templateSettingValue.deleted",
+            "Template setting value deleted successfully",
+          ),
+        );
+      },
+      onError: (error: any) => {
+        toast.error(
+          error.message ||
+            t(
+              "templateSettingValue.deleteFailed",
+              "Failed to delete template setting value",
+            ),
+        );
+      },
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+        <div>
+          <h2 className="text-2xl font-bold text-gray-900">
+            {t("templateSettingValue.title", "Template Setting Values")}
+          </h2>
+          <p className="text-gray-600 mt-1">
+            {t(
+              "templateSettingValue.description",
+              "Manage template setting values",
+            )}
+          </p>
+        </div>
+        <Button
+          onClick={() =>
+            navigate(
+              "/user-management/web-management/TemplateSettingValues/new",
+            )
+          }
+          className="bg-purple-600 hover:bg-purple-700 text-white gap-2"
+        >
+          <Plus className="h-4 w-4" />
+          {t("templateSettingValue.create", "Create Template Setting Value")}
+        </Button>
+      </div>
+
+      {/* Search and Filter */}
+      <div className="flex flex-col md:flex-row gap-4">
+        <Input
+          placeholder={t(
+            "templateSettingValue.searchByValue",
+            "Search by value...",
+          )}
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="max-w-sm"
+        />
+        <div className="space-y-2 md:w-64">
+          <Label htmlFor="template" className="text-gray-700">
+            {t("templateSettingValue.template", "Template")}
+          </Label>
+          <Select
+            value={selectedTemplate}
+            onValueChange={(value) => {
+              setSelectedTemplate(value);
+              setSelectedTemplateSetting("");
+            }}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue
+                placeholder={t(
+                  "templateSettingValue.selectTemplate",
+                  "Select template",
+                )}
+              />
+            </SelectTrigger>
+            <SelectContent>
+              {Array.isArray(templatesData?.items) &&
+                templatesData.items
+                  .filter(
+                    (template: any) =>
+                      template &&
+                      typeof template === "object" &&
+                      "id" in template,
+                  )
+                  .map((template: any) => (
+                    <SelectItem key={template.id} value={template.id}>
+                      {String(template.name?.en || template.name || "")}
+                    </SelectItem>
+                  ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="space-y-2 md:w-64">
+          <Label htmlFor="templateSetting" className="text-gray-700">
+            {t("templateSettingValue.templateSetting", "Template Setting")} *
+          </Label>
+          <Select
+            value={selectedTemplateSetting}
+            onValueChange={(value) => {
+              setSelectedTemplateSetting(value);
+            }}
+            disabled={!selectedTemplate}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue
+                placeholder={t(
+                  "templateSettingValue.selectTemplateSetting",
+                  "Select template setting",
+                )}
+              />
+            </SelectTrigger>
+            <SelectContent>
+              {Array.isArray(templateSettingsData?.items) &&
+                templateSettingsData.items
+                  .filter(
+                    (setting: any) =>
+                      setting && typeof setting === "object" && "id" in setting,
+                  )
+                  .map((setting: any) => (
+                    <SelectItem key={setting.id} value={setting.id}>
+                      {String(setting.name?.en || setting.name || "")}
+                    </SelectItem>
+                  ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {/* Table */}
+      <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
+        <div className="overflow-x-auto">
+          <Table>
+            <TableHeader>
+              <TableRow className="bg-gray-50 border-b border-gray-200">
+                <TableHead className="text-gray-700 font-semibold">
+                  {t("templateSettingValue.template", "Template")}
+                </TableHead>
+                <TableHead className="text-gray-700 font-semibold">
+                  {t(
+                    "templateSettingValue.templateSetting",
+                    "Template Setting",
+                  )}
+                </TableHead>
+                <TableHead className="text-gray-700 font-semibold">
+                  {t("templateSettingValue.value", "Value")}
+                </TableHead>
+                <TableHead className="text-gray-700 font-semibold text-right">
+                  {t("common.actions", "Actions")}
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {isLoading ? (
+                Array.from({ length: 5 }).map((_, i) => (
+                  <TableRow key={i}>
+                    <TableCell>
+                      <Skeleton className="h-4 w-32" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-4 w-32" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-4 w-40" />
+                    </TableCell>
+                    <TableCell>
+                      <Skeleton className="h-4 w-24" />
+                    </TableCell>
+                  </TableRow>
+                ))
+              ) : !Array.isArray(valuesData?.items) ||
+                valuesData.items.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={4} className="text-center py-8">
+                    <div className="flex flex-col items-center justify-center">
+                      <p className="text-gray-500 font-medium">
+                        {t(
+                          "templateSettingValue.noValues",
+                          "No template setting values yet",
+                        )}
+                      </p>
+                      <p className="text-gray-400 text-sm mt-1">
+                        {t(
+                          "templateSettingValue.getStarted",
+                          "Get started by creating your first template setting value",
+                        )}
+                      </p>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ) : (
+                Array.isArray(valuesData.items) &&
+                valuesData.items.map((value) => (
+                  <TableRow
+                    key={value.id}
+                    className="border-b border-gray-100 hover:bg-gray-50"
+                  >
+                    <TableCell className="font-medium text-gray-900">
+                      {String(value.templateName || "")}
+                    </TableCell>
+                    <TableCell className="text-gray-600">
+                      {String(value.templateSettingName || "")}
+                    </TableCell>
+                    <TableCell className="text-gray-600 max-w-xs truncate">
+                      {String(value.value || "")}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <div className="flex justify-end gap-2">
+                        <button
+                          onClick={() =>
+                            navigate(
+                              `/user-management/web-management/TemplateSettingValues/edit/${value.id}`,
+                            )
+                          }
+                          className="p-2 text-purple-600 hover:bg-purple-50 rounded-lg transition-colors"
+                          title={t("common.edit", "Edit")}
+                        >
+                          <Edit2 className="h-4 w-4" />
+                        </button>
+                        <button
+                          onClick={() => handleDelete(value)}
+                          className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                          title={t("common.delete", "Delete")}
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+
+      {/* Delete Dialog */}
+      <AlertDialog
+        open={isDeleteDialogOpen}
+        onOpenChange={setIsDeleteDialogOpen}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t("templateSettingValue.confirmDelete", "Confirm Deletion")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t(
+                "templateSettingValue.deleteConfirmation",
+                "Are you sure you want to delete this template setting value? This action cannot be undone.",
+              )}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <div className="flex justify-end gap-3">
+            <AlertDialogCancel>
+              {t("common.cancel", "Cancel")}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={confirmDelete}
+              disabled={deleteValue.isPending}
+              className="bg-red-600 hover:bg-red-700"
+            >
+              {deleteValue.isPending ? (
+                <span className="flex items-center gap-2">
+                  <span className="animate-spin">⏳</span>
+                  {t("common.deleting", "Deleting...")}
+                </span>
+              ) : (
+                t("common.delete", "Delete")
+              )}
+            </AlertDialogAction>
+          </div>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateSettingValues/TemplateSettingValuePage.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateSettingValues/TemplateSettingValuePage.tsx
new file mode 100644
index 000000000..d3ce7e567
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateSettingValues/TemplateSettingValuePage.tsx
@@ -0,0 +1,33 @@
+import { Route, Routes, useLocation } from "react-router-dom";
+import { TemplateSettingValueList } from "./TemplateSettingValueList";
+import { TemplateSettingValueForm } from "./TemplateSettingValueForm";
+import { useTranslation } from "react-i18next";
+
+export const TemplateSettingValuePage = () => {
+  const location = useLocation();
+  const { t } = useTranslation();
+
+  const isFormPage =
+    location.pathname.includes("/new") || location.pathname.includes("/edit");
+
+  return (
+    <div className="space-y-6">
+      {/* Breadcrumb */}
+      <div className="flex items-center gap-2 text-sm text-gray-500">
+        <span>{t("webManagement", "Web Management")}</span>
+        <span>/</span>
+        <span className="text-gray-900 font-medium">
+          {t("templateSettingValue.title", "Template Setting Values")}
+        </span>
+      </div>
+
+      {/* Routes */}
+      <Routes>
+        <Route path="/" element={<TemplateSettingValueList />} />
+        <Route path="/values" element={<TemplateSettingValueList />} />
+        <Route path="/new" element={<TemplateSettingValueForm />} />
+        <Route path="/edit/:id" element={<TemplateSettingValueForm />} />
+      </Routes>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateSettingValues/hooks/useTemplateSettingValues.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateSettingValues/hooks/useTemplateSettingValues.ts
new file mode 100644
index 000000000..3d00dc76b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateSettingValues/hooks/useTemplateSettingValues.ts
@@ -0,0 +1,103 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { TemplateSettingValueService } from "../services/templateSettingValueService";
+
+export interface TemplateSettingValueParams {
+  page?: number;
+  limit?: number;
+  search?: string;
+  templateSettingId?: string;
+  resourceId?: string;
+}
+
+export function useTemplateSettingValues(
+  templateSettingId: string,
+  params?: TemplateSettingValueParams,
+) {
+  return useQuery({
+    queryKey: ["templateSettingValues", templateSettingId, params],
+    queryFn: () =>
+      TemplateSettingValueService.getTemplateSettingValues(
+        templateSettingId,
+        params as Record<string, unknown>,
+      ),
+    enabled: !!templateSettingId,
+  });
+}
+
+export function useTemplateSettingValue(id: string) {
+  return useQuery({
+    queryKey: ["templateSettingValues", id],
+    queryFn: () => TemplateSettingValueService.getTemplateSettingValue(id),
+    enabled: !!id,
+  });
+}
+
+export function useTemplates() {
+  return useQuery({
+    queryKey: ["templates"],
+    queryFn: () => TemplateSettingValueService.getTemplates(),
+  });
+}
+
+export function useTemplateSettings(templateId: string) {
+  return useQuery({
+    queryKey: ["templateSettings", templateId],
+    queryFn: () => TemplateSettingValueService.getTemplateSettings(templateId),
+    enabled: !!templateId,
+  });
+}
+
+export function useResources(resourceTypeId: string) {
+  return useQuery({
+    queryKey: ["resources", resourceTypeId],
+    queryFn: () => TemplateSettingValueService.getResources(resourceTypeId),
+    enabled: !!resourceTypeId,
+  });
+}
+
+export function useResourceTypes() {
+  return useQuery({
+    queryKey: ["resourceTypes"],
+    queryFn: () => TemplateSettingValueService.getResourceTypes(),
+  });
+}
+
+export function useTemplateSettingValueMutations() {
+  const queryClient = useQueryClient();
+
+  const createMutation = useMutation({
+    mutationFn: (data: any) =>
+      TemplateSettingValueService.createTemplateSettingValue(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["templateSettingValues"],
+      });
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: ({ id, data }: { id: string; data: any }) =>
+      TemplateSettingValueService.updateTemplateSettingValue(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["templateSettingValues"],
+      });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) =>
+      TemplateSettingValueService.deleteTemplateSettingValue(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["templateSettingValues"],
+      });
+    },
+  });
+
+  return {
+    create: createMutation,
+    update: updateMutation,
+    delete: deleteMutation,
+  };
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateSettingValues/services/templateSettingValueService.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateSettingValues/services/templateSettingValueService.ts
new file mode 100644
index 000000000..78719b412
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateSettingValues/services/templateSettingValueService.ts
@@ -0,0 +1,209 @@
+import axios from "axios";
+import {
+  TemplateSettingValue,
+  TemplateSettingValueResponse,
+  CreateTemplateSettingValuePayload,
+} from "../types/templateSettingValueTypes";
+import Cookies from "js-cookie";
+import { getEnvUrl } from "@/shared/config/env";
+
+const TENANT_ID = "adf98293-41ba-4bda-bdb4-70e30a70c1b7";
+const API_URL = getEnvUrl("VITE_RECORD_API_URL");
+
+const apiInstance = axios.create({
+  baseURL: API_URL,
+});
+
+apiInstance.interceptors.request.use((config) => {
+  const token = Cookies.get("auth-token");
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  config.headers["x-tenant-id"] = TENANT_ID;
+  return config;
+});
+
+export const TemplateSettingValueService = {
+  async getTemplateSettingValues(
+    templateSettingId: string,
+    params?: Record<string, unknown>,
+  ): Promise<TemplateSettingValueResponse> {
+    try {
+      const response = await apiInstance.get(
+        `/template-setting-values/list/${templateSettingId}`,
+        {
+          params,
+        },
+      );
+      console.log("getTemplateSettingValues response:", response.data);
+      // Ensure we return the correct structure
+      if (response.data && typeof response.data === "object") {
+        if (Array.isArray(response.data)) {
+          return {
+            count: response.data.length,
+            items: response.data
+              .filter(
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                (item: any) => item && typeof item === "object" && "id" in item,
+              )
+              .map(
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                (item: any) => ({
+                  ...item,
+                  name:
+                    typeof item.name === "object"
+                      ? item.name?.en || item.name?.am || ""
+                      : item.name || "",
+                  value:
+                    typeof item.value === "object"
+                      ? item.value?.en || item.value?.am || ""
+                      : item.value || "",
+                  templateName:
+                    typeof item.template?.name === "object"
+                      ? item.template?.name?.en || item.template?.name?.am || ""
+                      : item.template?.name || "",
+                  templateSettingName:
+                    typeof item.templateSetting?.name === "object"
+                      ? item.templateSetting?.name?.en ||
+                        item.templateSetting?.name?.am ||
+                        ""
+                      : item.templateSetting?.name || "",
+                }),
+              ),
+          };
+        }
+        if ("items" in response.data && Array.isArray(response.data.items)) {
+          return {
+            count: response.data.count || response.data.items.length,
+            items: response.data.items
+              .filter(
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                (item: any) => item && typeof item === "object" && "id" in item,
+              )
+              .map(
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                (item: any) => ({
+                  ...item,
+                  name:
+                    typeof item.name === "object"
+                      ? item.name?.en || item.name?.am || ""
+                      : item.name || "",
+                  value:
+                    typeof item.value === "object"
+                      ? item.value?.en || item.value?.am || ""
+                      : item.value || "",
+                  templateName:
+                    typeof item.template?.name === "object"
+                      ? item.template?.name?.en || item.template?.name?.am || ""
+                      : item.template?.name || "",
+                  templateSettingName:
+                    typeof item.templateSetting?.name === "object"
+                      ? item.templateSetting?.name?.en ||
+                        item.templateSetting?.name?.am ||
+                        ""
+                      : item.templateSetting?.name || "",
+                }),
+              ),
+          };
+        }
+      }
+      return {
+        count: 0,
+        items: [],
+      };
+    } catch (error) {
+      console.error("getTemplateSettingValues error:", error);
+      // If endpoint doesn't exist, return empty list
+      return {
+        count: 0,
+        items: [],
+      };
+    }
+  },
+  async getTemplateSettingValue(id: string): Promise<TemplateSettingValue> {
+    const response = await apiInstance.get(`/template-setting-values/${id}`);
+    return response.data;
+  },
+
+  async createTemplateSettingValue(
+    data: CreateTemplateSettingValuePayload,
+  ): Promise<TemplateSettingValue> {
+    const response = await apiInstance.post("/template-setting-values", data);
+    return response.data;
+  },
+
+  async updateTemplateSettingValue(
+    id: string,
+    data: Partial<CreateTemplateSettingValuePayload>,
+  ): Promise<TemplateSettingValue> {
+    const response = await apiInstance.put(
+      `/template-setting-values/${id}`,
+      data,
+    );
+    return response.data;
+  },
+
+  async deleteTemplateSettingValue(id: string): Promise<void> {
+    await apiInstance.delete(`/template-setting-values/${id}`);
+  },
+
+  async getTemplates(): Promise<Record<string, unknown>> {
+    const response = await apiInstance.get("/templates");
+    const data = response.data;
+    console.log("getTemplates response:", data);
+    // Handle both array and object responses
+    if (Array.isArray(data)) {
+      return { items: data };
+    }
+    if (data && typeof data === "object" && "items" in data) {
+      return data;
+    }
+    return { items: [] };
+  },
+
+  async getTemplateSettings(
+    templateId: string,
+  ): Promise<Record<string, unknown>> {
+    const response = await apiInstance.get(
+      `/template-settings/list/${templateId}`,
+    );
+    const data = response.data;
+    console.log("getTemplateSettings response:", data);
+    // Handle both array and object responses
+    if (Array.isArray(data)) {
+      return { items: data };
+    }
+    if (data && typeof data === "object" && "items" in data) {
+      return data;
+    }
+    return { items: [] };
+  },
+
+  async getResources(resourceTypeId: string): Promise<Record<string, unknown>> {
+    const response = await apiInstance.get(`/resources/list/${resourceTypeId}`);
+    const data = response.data;
+    console.log("getResources response:", data);
+    // Handle both array and object responses
+    if (Array.isArray(data)) {
+      return { items: data };
+    }
+    if (data && typeof data === "object" && "items" in data) {
+      return data;
+    }
+    return { items: [] };
+  },
+
+  async getResourceTypes(): Promise<Record<string, unknown>> {
+    const response = await apiInstance.get("/resource_types");
+    const data = response.data;
+    console.log("getResourceTypes response:", data);
+    // Handle both array and object responses
+    if (Array.isArray(data)) {
+      return { items: data };
+    }
+    if (data && typeof data === "object" && "items" in data) {
+      return data;
+    }
+    return { items: [] };
+  },
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateSettingValues/types/templateSettingValueTypes.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateSettingValues/types/templateSettingValueTypes.ts
new file mode 100644
index 000000000..bb37b93d9
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateSettingValues/types/templateSettingValueTypes.ts
@@ -0,0 +1,21 @@
+export interface TemplateSettingValue {
+  id?: string;
+  name?: string;
+  templateSettingId: string;
+  templateName?: string;
+  templateSettingName?: string;
+  resourceId: string;
+  value: string;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export interface TemplateSettingValueResponse {
+  count: number;
+  items: TemplateSettingValue[];
+}
+
+export type CreateTemplateSettingValuePayload = Omit<
+  TemplateSettingValue,
+  "id" | "createdAt" | "updatedAt" | "templateName" | "templateSettingName"
+>;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Theme/AddTheme.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Theme/AddTheme.tsx
new file mode 100644
index 000000000..d503b422b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Theme/AddTheme.tsx
@@ -0,0 +1,181 @@
+// import { useForm } from "react-hook-form";
+// import { Button } from "@/shared/common/ui/button";
+// import { Label } from "@/shared/common/ui/label";
+// import { FormFeild } from "../types/FormFeild";
+// import { Loader2 } from "lucide-react";
+// import { CreateThemePayload } from "../types/themeTypes";
+// import { toast } from "sonner";
+// import { useState } from "react";
+// import { useNavigate } from "react-router-dom";
+// import { useTheme } from "../hooks/useTheme";
+
+// interface FormData {
+//   primaryColor:{
+//     type:string,
+//     value:string
+//   },
+//     SecondaryColor:{
+//     type:string,
+//     value:string
+//   }
+//   image: FileList;
+//   isActive: boolean;
+// }
+
+// export const AddTheme = () => {
+//   const {
+//     register,
+//     handleSubmit,
+//     formState: { errors },
+//     watch,
+//   } = useForm<FormData>({
+//     defaultValues: {
+//       primaryColor:{
+//         type:"PRIMARY_COLOR",
+//         value:""
+//       },
+//       SecondaryColor:{
+//         type:"SECONDARY_COLOR",
+//         value:"",
+//       },
+//       isActive: true,
+//       image:undefined
+//     },
+//   });
+//   const navigate = useNavigate();
+//   const {createItem}=useTheme()
+//   const [isSubmitting, setIsSubmitting] = useState(false);
+//   const handleCreateSubmit = async (formData: FormData) => {
+//     setIsSubmitting(true);
+//     try {
+//       const imageFile = formData.image?.[0];
+//       if (!imageFile) {
+//         throw new Error("images are required");
+//       }
+//       const payload: CreateThemePayload = [
+//         {
+//             type:formData.primaryColor.type,
+//             value:formData.primaryColor.value,
+//             fileInfo:undefined,
+//             isActive:true
+//         },
+//           {
+//             type:formData.SecondaryColor.type,
+//             value:formData.SecondaryColor.value,
+//             fileInfo:undefined,
+//             isActive:true
+//         },
+//         {
+//             type:"LOGO",
+//             value:"",
+//             fileInfo: {
+//           fileName: imageFile.name,
+//           contentType: imageFile.type,
+//           size: imageFile.size,
+//           originalname: imageFile.name,
+//         },
+//             isActive:true
+//         }
+//       ]
+//       await createItem({
+//         data: payload,
+//         imageFile: imageFile,
+//       });
+//       toast.success(" created successfully");
+//       navigate(-1)
+//     } catch (error) {
+//       toast.error("Failed to create Theme");
+//       console.error("Creation error:", error);
+//     }
+//   };
+//   const onCancel = () => {
+//     navigate(-1);
+//   };
+//   return (
+//     <div className="max-h-[80vh] overflow-y-auto p-6 bg-white rounded-xl border border-gray-200 shadow-sm">
+//       <form onSubmit={handleSubmit(handleCreateSubmit)} className="space-y-8">
+//         {/* Title Section */}
+//         <div className="bg-gray-50 p-5 rounded-lg border border-gray-100">
+//           <h3 className="text-lg font-semibold text-gray-800 mb-4 flex items-center">
+//             <div className="h-1 w-4 bg-blue-500 mr-2 rounded-full"></div>
+//             Color
+//           </h3>
+//           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+//             <div className="space-y-2">
+//               <Label htmlFor="ThemeTitleAm" className="text-gray-700">
+//                Primary color
+//               </Label>
+//              <div className="flex items-center gap-3">
+//         <input
+//           id="color"
+//           type="color"
+//           {...register("primaryColor.value", { required: "Color is required" })}
+//           className="h-10 w-16 cursor-pointer border border-gray-300 rounded-md bg-white"
+//         />
+//         <span className="text-sm text-gray-600 font-mono">
+//           {watch("primaryColor.value") || "#000000"}
+//         </span>
+//       </div>
+//             </div>
+//             <div className="space-y-2">
+//               <Label htmlFor="ThemeTitleEn" className="text-gray-700">
+//                 secondary color
+//               </Label>
+//                     <div className="flex items-center gap-3">
+//         <input
+//           id="color"
+//           type="color"
+//           {...register("SecondaryColor.value",{ required: "Color is required" })}
+//           className="h-10 w-16 cursor-pointer border border-gray-300 rounded-md bg-white"
+//         />
+//         <span className="text-sm text-gray-600 font-mono">
+//           {watch("SecondaryColor.value") || "#000000"}
+//         </span>
+//       </div>
+//             </div>
+//           </div>
+//         </div>
+
+//         {/* Image Upload */}
+//         <div>
+//           <Label htmlFor="image">Logo*</Label>
+//           <FormFeild
+//             id="image"
+//             type="file"
+//             accept="image/*"
+//             {...register("image", { required: "Image is required" })}
+//             error={errors.image?.message}
+//           />
+//         </div>
+
+//         {/* Actions */}
+//         <div className="flex justify-end gap-3 pt-6 border-t border-gray-200">
+//           <Button
+//             variant="outline"
+//             onClick={onCancel}
+//             type="button"
+//             disabled={isSubmitting}
+//             className="px-6 py-2 border-gray-300 text-gray-700 hover:bg-gray-50"
+//           >
+//             Cancel
+//           </Button>
+
+//           <Button
+//             type="submit"
+//             disabled={isSubmitting}
+//             className="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white"
+//           >
+//             {isSubmitting ? (
+//               <span className="flex items-center gap-2">
+//                 <Loader2 className="w-4 h-4 animate-spin" />
+//                 Creating...
+//               </span>
+//             ) : (
+//               "Create Theme"
+//             )}
+//           </Button>
+//         </div>
+//       </form>
+//     </div>
+//   );
+// };
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Theme/EditTheme.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Theme/EditTheme.tsx
new file mode 100644
index 000000000..5953da289
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Theme/EditTheme.tsx
@@ -0,0 +1,210 @@
+import { useForm } from "react-hook-form";
+import { Button } from "@/shared/common/ui/button";
+import { Label } from "@/shared/common/ui/label";
+import { ImageIcon, Loader2 } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { FormFeild } from "../components/FormFeild";
+import { CreateThemePayload } from "../types/themeTypes";
+import { useNavigate, useParams } from "react-router-dom";
+import { useTheme } from "../hooks/useTheme";
+import { toast } from "sonner";
+import { ImageUpload, Section } from "../components/FormInputBox";
+interface FormData {
+  primaryColor: {
+    type: string;
+    value: string;
+  };
+  SecondaryColor: {
+    type: string;
+    value: string;
+  };
+  image: FileList;
+  isActive: boolean;
+}
+export const EditTheme = () => {
+  const { id } = useParams();
+  const { items: item, createItem } = useTheme();
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const navigate = useNavigate();
+  const defaultValues = useMemo(
+    () => ({
+      primaryColor: {
+        type: "PRIMARY_COLOR",
+        value: item?.find((i) => i.type === "PRIMARY_COLOR")?.value,
+      },
+      SecondaryColor: {
+        type: "SECONDARY_COLOR",
+        value: item?.find((i) => i.type === "SECONDARY_COLOR")?.value,
+      },
+      isActive: true,
+      image: undefined,
+    }),
+    [item] // 👈 recompute only when item changes
+  );
+  const {
+    register,
+    handleSubmit,
+    watch,
+    reset,
+    formState: { errors },
+  } = useForm<FormData>({
+    defaultValues,
+  });
+  useEffect(() => {
+    if (item) {
+      reset(defaultValues);
+    }
+  }, [item, defaultValues, reset]);
+  const imageFile = watch("image")?.[0];
+  const [imagePreview, setImage1Preview] = useState<string>(
+    item?.find((i) => i.type === "LOGO")?.presigned || ""
+  );
+  useEffect(() => {
+    const logoItem = item?.find((i) => i.type === "LOGO");
+    if (logoItem?.presigned) {
+      setImage1Preview(logoItem.presigned);
+    }
+  }, [item]);
+  useEffect(() => {
+    if (imageFile) {
+      const url = URL.createObjectURL(imageFile);
+      setImage1Preview(url);
+      return () => URL.revokeObjectURL(url);
+    }
+  }, [imageFile]);
+
+  const handleEditSubmit = async (formData: FormData) => {
+    if (!item) return;
+    setIsSubmitting(true);
+    try {
+      const imageFile = formData.image?.[0];
+      const payload: CreateThemePayload = [
+        {
+          type: formData.primaryColor.type,
+          value: formData.primaryColor.value,
+          fileInfo: undefined,
+          isActive: true,
+          id: item.find((i) => i.type === "PRIMARY_COLOR")?.id || undefined,
+        },
+        {
+          type: formData.SecondaryColor.type,
+          value: formData.SecondaryColor.value,
+          fileInfo: undefined,
+          isActive: true,
+          id: item.find((i) => i.type === "SECONDARY_COLOR")?.id || undefined,
+        },
+        {
+          type: "LOGO",
+          value: "",
+          fileInfo: imageFile
+            ? {
+                fileName: imageFile.name,
+                contentType: imageFile.type,
+                size: imageFile.size,
+                originalname: imageFile.name,
+              }
+            : undefined,
+          isActive: true,
+          id: item.find((i) => i.type === "LOGO")?.id || undefined,
+        },
+      ];
+
+      await createItem({
+        data: payload,
+        ...(imageFile && { imageFile }),
+      });
+
+      toast.success("Theme saved successfully");
+      setIsSubmitting(false);
+    } catch (error) {
+      toast.error("Failed to update about us");
+      console.error("Update error:", error);
+      setIsSubmitting(false);
+    }
+  };
+  return (
+    <div className="max-h-[80vh] overflow-y-auto p-6 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
+      <form onSubmit={handleSubmit(handleEditSubmit)} className="space-y-8">
+        {/* Title Section */}
+        <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
+          <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
+            <div className="h-1 w-4 bg-blue-500 mr-2 rounded-full"></div>
+            Color
+          </h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="space-y-2">
+              <Label htmlFor="ThemeTitleAm" className="text-gray-700 dark:text-gray-300">
+                Primary color
+              </Label>
+              <div className="flex items-center gap-3">
+                <input
+                  id="color"
+                  type="color"
+                  {...register("primaryColor.value", {
+                    required: "Color is required",
+                  })}
+                  className="h-10 w-16 cursor-pointer border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-600"
+                />
+                <span className="text-sm text-gray-600 dark:text-gray-400 font-mono">
+                  {watch("primaryColor.value") || "#000000"}
+                </span>
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="ThemeTitleEn" className="text-gray-700 dark:text-gray-300">
+                secondary color
+              </Label>
+              <div className="flex items-center gap-3">
+                <input
+                  id="color"
+                  type="color"
+                  {...register("SecondaryColor.value", {
+                    required: "Color is required",
+                  })}
+                  className="h-10 w-16 cursor-pointer border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-600"
+                />
+                <span className="text-sm text-gray-600 dark:text-gray-400 font-mono">
+                  {watch("SecondaryColor.value") || "#000000"}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Image Upload */}
+        <Section title="Image">
+          <ImageUpload
+            label="Experience Image*"
+            preview={imagePreview}
+            existingName={
+              item?.find((i) => i.type === "LOGO")?.fileInfo?.originalname
+            }
+            register={register("image")}
+            error={errors.image?.message}
+            onView={() => window.open(imagePreview, "_blank")}
+            id="image"
+            isRequired={false}
+          />
+        </Section>
+
+        {/* Actions */}
+        <div className="flex justify-end gap-3 pt-6 border-t border-gray-200 dark:border-gray-700">
+          <Button
+            type="submit"
+            disabled={isSubmitting}
+            className="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white"
+          >
+            {isSubmitting ? (
+              <span className="flex items-center gap-2">
+                <Loader2 className="w-4 h-4 animate-spin" />
+                saving...
+              </span>
+            ) : (
+              "save"
+            )}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Theme/Theme.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Theme/Theme.tsx
new file mode 100644
index 000000000..0b7b81f6b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Theme/Theme.tsx
@@ -0,0 +1,85 @@
+// import { NavLink, useNavigate } from "react-router-dom";
+// import { CirclePlus } from "lucide-react";
+// import { ThemeColumnDefn } from "./ThemeColumn";
+// import { useTranslation } from "react-i18next";
+// import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+// import { useMemo, useState } from "react";
+// import Loader from "@/record-management/components/Loader/loader";
+// import { Button } from "@/shared/common/ui/button";
+// import { useTheme } from "../hooks/useTheme";
+// export const Theme = () => {
+//   const [pageIndex, setPageIndex] = useState(0);
+//   const navigate = useNavigate();
+//   const pageSize = 10;
+//   const { t } = useTranslation();
+//   const baseParams = useMemo(() => {
+//     const params: Record<string, any> = {
+//       skip: pageIndex * pageSize,
+//       take: pageSize,
+//       orderBy: "createdAt:DESC",
+//     };
+
+//     return params;
+//   }, [pageIndex]);
+
+//   const { items, refetch, deleteItem, error, isLoading, count } =
+//     useTheme(baseParams);
+//   const handlePageChange = (newPage: number) => {
+//     setPageIndex(newPage);
+//   };
+  
+//   return (
+//     <div className="flex flex-col h-full w-full p-6 bg-white rounded-xl shadow-sm border border-gray-100">
+//       {/* Header Section */}
+//       <div className="flex items-center justify-between mb-4 border-b pb-3">
+//         <h1 className="text-xl font-semibold text-gray-800">{t("Theme")}</h1>
+//         {
+//           <NavLink to="/user-management/web-Management/Theme/AddTheme">
+//             <Button
+//               variant="addRecordBtn"
+//               className="flex items-center gap-1 bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition-all">
+//               <CirclePlus className="w-4 h-4" />
+//               <span>{t("addTheme")}</span>
+//             </Button>
+//           </NavLink>
+//         }
+//       </div>
+
+//       {/* Content Section */}
+//       <div className="flex-1 overflow-auto">
+//         {isLoading && (
+//           <div className="flex justify-center items-center h-48">
+//             <Loader />
+//           </div>
+//         )}
+
+//         {error && (
+//           <p className="text-center text-red-500 text-sm mt-4">
+//             {t("userRecord.Error loading records.")}
+//           </p>
+//         )}
+
+//         {!isLoading && !error && (
+//           <div className="mt-2">
+//             <AdvancedTable
+//               columns={ThemeColumnDefn({
+//                 navigate,
+//                 onDelete: deleteItem,
+//               })}
+//               data={items || []}
+//               tableName="Themes"
+//               toolBarPosition="right"
+//               extraToolbar={<div className="flex gap-2"></div>}
+//               itemCount={count || 2}
+//               pageIndex={pageIndex}
+//               onPageChange={handlePageChange}
+//               nextFunction={() => handlePageChange(pageIndex + 1)}
+//               prevFunction={() => handlePageChange(Math.max(pageIndex - 1, 0))}
+//               refresh={refetch}
+//             />
+//           </div>
+//         )}
+//       </div>
+//     </div>
+//   );
+// };
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Theme/ThemeColumn.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Theme/ThemeColumn.tsx
new file mode 100644
index 000000000..645b38e79
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Theme/ThemeColumn.tsx
@@ -0,0 +1,59 @@
+// import { ColumnDef } from "@tanstack/react-table";
+// import { Button } from "@/shared/common/ui/button";
+// import { Trash2, Edit, Eye } from "lucide-react";
+// import { ThemeItem } from "../types/themeTypes";
+// import { t } from "i18next";
+// export const ThemeColumnDefn = ({
+//   //  onDelete,
+//   navigate,
+//   onDelete,
+// }: {
+//   navigate: (id: string) => void;
+//   onDelete: (id: string) => Promise<void>;
+// }): ColumnDef<ThemeItem>[] => [
+//   {
+//     id: "No",
+//     header: () => t("viewDetail.No"),
+//     cell: ({ row }) => {
+//         console.log("kk",row.original)
+//         return <span>{"theme"}</span>;    
+//     },
+//     enableHiding: true,
+//     accessorKey: "theme",
+//   },
+//   {
+//     id: "actions",
+//     header: "Actions",
+//     cell: ({ row }) => (
+//       <div className="flex space-x-2">
+//         <Button
+//           variant="ghost"
+//           size="icon"
+//           onClick={() =>
+//             navigate(
+//               `/user-management/web-management/Theme/ViewTheme/${row.original.id}`
+//             )
+//           }>
+//           <Eye className="h-4 w-4" />
+//         </Button>
+//         <Button
+//           variant="ghost"
+//           size="icon"
+//           onClick={() =>
+//             navigate(
+//               `/user-management/web-management/Theme/EditTheme/${row.original.id}`
+//             )
+//           }>
+//           <Edit className="h-4 w-4" />
+//         </Button>
+//         <Button
+//           variant="ghost"
+//           size="icon"
+//           onClick={() => onDelete(row.original.id)}
+//         >
+//           <Trash2 className="h-4 w-4 text-destructive" />
+//         </Button>
+//       </div>
+//     ),
+//   },
+// ];
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Vision/AddVision.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Vision/AddVision.tsx
new file mode 100644
index 000000000..083cd7958
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Vision/AddVision.tsx
@@ -0,0 +1,74 @@
+import { useForm } from "react-hook-form";
+import { CreateVisionPayload, VisionFormData } from "../types/visionType";
+import { toast } from "sonner";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useVision } from "../hooks/useVision";
+import VisionForm from "./Form";
+
+export const AddVision = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    watch,
+    control,
+    setValue,
+  } = useForm<VisionFormData>({
+    defaultValues: {
+      visionTitleEn: "",
+      visionTitleAm: "",
+      visionDescriptionAm: "",
+      visionDescriptionEn: "",
+      isActive: false,
+    },
+  });
+  const navigate = useNavigate();
+  const { createItem, isCreating } = useVision();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleCreateSubmit = async (VisionFormData: VisionFormData) => {
+    setIsSubmitting(true);
+    try {
+      const payload: CreateVisionPayload = {
+        visionTitle: {
+          am: VisionFormData.visionTitleAm || "",
+          en: VisionFormData.visionTitleEn || "",
+        },
+        visionDescription: {
+          am: VisionFormData.visionDescriptionAm || "",
+          en: VisionFormData.visionDescriptionEn || "",
+        },
+
+        isActive: VisionFormData.isActive,
+      };
+      await createItem({
+        data: payload,
+      });
+      toast.success(" created successfully");
+      navigate(-1);
+    } catch (error) {
+      toast.error("Failed to create Vision");
+      console.error("Creation error:", error);
+      setIsSubmitting(false);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const onCancel = () => {
+    navigate(-1);
+  };
+  return (
+    <VisionForm
+      handleSubmit={handleSubmit(handleCreateSubmit)}
+      handleCancel={onCancel}
+      watch={watch}
+      setValue={setValue}
+      control={control}
+      register={register}
+      errors={errors}
+      isSubmitting={isSubmitting}
+      label="Add Vision"
+    />
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Vision/EditVision.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Vision/EditVision.tsx
new file mode 100644
index 000000000..6e6a9e0c3
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Vision/EditVision.tsx
@@ -0,0 +1,111 @@
+import {
+  Control,
+  FieldErrors,
+  useForm,
+  UseFormRegister,
+  UseFormReset,
+  UseFormSetValue,
+  UseFormWatch,
+} from "react-hook-form";
+
+import { useEffect, useMemo, useState } from "react";
+import {
+  CreateVisionPayload,
+  VisionFormData,
+  VisionItem,
+} from "../types/visionType";
+import { useVision } from "../hooks/useVision";
+import { useNavigate, useParams } from "react-router-dom";
+import { toast } from "sonner";
+import VisionForm from "./Form";
+
+export interface FormProps {
+  watch: UseFormWatch<VisionFormData>;
+  control: Control<VisionFormData>;
+  setValue: UseFormSetValue<VisionFormData>;
+  register: UseFormRegister<VisionFormData>;
+  errors: FieldErrors<VisionFormData>;
+  reset?: UseFormReset<VisionFormData>;
+  handleSubmit: (e: React.FormEvent) => void;
+  handleCancel: () => void;
+  isSubmitting: boolean;
+  item?: VisionItem;
+  label: string;
+}
+export const EditVision = () => {
+  const { id } = useParams();
+  const { singleItem: item, updateItem } = useVision(undefined, id);
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const navigate = useNavigate();
+  const defaultValues = useMemo(
+    () => ({
+      visionTitleEn: item?.visionTitle?.en,
+      visionTitleAm: item?.visionTitle?.am,
+      visionDescriptionAm: item?.visionDescription?.am,
+      visionDescriptionEn: item?.visionDescription?.en,
+      isActive: item?.isActive,
+    }),
+    [item] // 👈 recompute only when item changes
+  );
+  const {
+    register,
+    handleSubmit,
+    watch,
+    control,
+    reset,
+    setValue,
+    formState: { errors },
+  } = useForm<VisionFormData>({
+    defaultValues,
+  });
+  useEffect(() => {
+    if (item) {
+      reset(defaultValues);
+    }
+  }, [item, defaultValues, reset]);
+  const handleEditSubmit = async (VisionFormData: VisionFormData) => {
+    if (!item) return;
+    setIsSubmitting(true);
+    try {
+      const payload: CreateVisionPayload = {
+        visionTitle: {
+          am: VisionFormData.visionTitleAm || "",
+          en: VisionFormData.visionTitleEn || "",
+        },
+        visionDescription: {
+          am: VisionFormData.visionDescriptionEn || "",
+          en: VisionFormData.visionDescriptionEn || "",
+        },
+        isActive: VisionFormData.isActive,
+      };
+
+      await updateItem({
+        id: item?.id,
+        data: payload,
+      });
+      toast.success("Vision updated successfully");
+      navigate(-1);
+    } catch (error) {
+      toast.error("Failed to update about us");
+      console.error("Update error:", error);
+      setIsSubmitting(false);
+    }
+  };
+  const onCancel = () => {
+    navigate(-1);
+  };
+  return (
+    <VisionForm
+      handleSubmit={handleSubmit(handleEditSubmit)}
+      handleCancel={onCancel}
+      watch={watch}
+      setValue={setValue}
+      control={control}
+      register={register}
+      errors={errors}
+      isSubmitting={isSubmitting}
+      label="Edit Vision"
+      item={item}
+    />
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Vision/Form.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Vision/Form.tsx
new file mode 100644
index 000000000..a0aa5ce46
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Vision/Form.tsx
@@ -0,0 +1,86 @@
+import { Button } from "@/shared/common/ui/button";
+import { Loader2 } from "lucide-react";
+import {
+  FormInputBox,
+  FormTextBox,
+  FormToggle,
+} from "../components/FormInputBox";
+import { FormProps } from "./EditVision";
+
+const VisionForm = ({
+  handleSubmit,
+  handleCancel,
+  watch,
+  control,
+  setValue,
+  register,
+  errors,
+  isSubmitting,
+  reset,
+  item,
+  label,
+}: FormProps) => {
+
+  return (
+    <div className="max-h-[80vh] overflow-y-auto p-6 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
+      <form onSubmit={handleSubmit} className="space-y-8">
+        {/* Title Section */}
+        <FormInputBox
+          idEn="VisionTitleEn"
+          idAm="VisionTitleAm"
+          label="Title"
+          error="Title is Required"
+          errors={errors}
+          register={register}
+        />
+
+        {/* Description Section */}
+        <FormTextBox
+          idAm="VisionDescriptionAm"
+          idEn="VisionDescriptionEn"
+          label="Description"
+          error="Description is Required"
+          errors={errors}
+          register={register}
+        />
+
+        {/* isActive Toggle */}
+        <FormToggle
+          idAm="isActive"
+          label="Status"
+          watch={watch}
+          setValue={setValue}
+        />
+
+        {/* Actions */}
+        <div className="flex justify-end gap-3 pt-6 border-t border-gray-200 dark:border-gray-700">
+          <Button
+            variant="outline"
+            onClick={handleCancel}
+            type="button"
+            disabled={isSubmitting}
+            className="px-6 py-2 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700"
+          >
+            Cancel
+          </Button>
+
+          <Button
+            type="submit"
+            disabled={isSubmitting}
+            className="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white"
+          >
+            {isSubmitting ? (
+              <span className="flex items-center gap-2">
+                <Loader2 className="w-4 h-4 animate-spin" />
+                ...
+              </span>
+            ) : (
+              label
+            )}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};
+export default VisionForm;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Vision/ViewVision.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Vision/ViewVision.tsx
new file mode 100644
index 000000000..7f54e8dbf
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Vision/ViewVision.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useLocalizedName } from "@/shared/common/localizedName";
+import { useParams } from "react-router-dom";
+import { useVision } from "../hooks/useVision";
+
+export const ViewVision = () => {
+  const { i18n, t } = useTranslation();
+  const { id } = useParams<{ id: string }>();
+  const { singleItem: item } = useVision(undefined, id);
+  const locale = i18n.language;
+  const localizedName = useLocalizedName();
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4 md:p-8">
+      <div className="max-w-6xl w-full">
+        {/* Header */}
+        <div className="md:w-1/3 bg-gradient-to-br from-blue-50 to-indigo-100 p-6 md:p-8 flex flex-col justify-center items-center">
+          <div className="text-center">
+            <div className="w-32 h-32 mx-auto mb-6 bg-white rounded-2xl shadow-lg flex items-center justify-center">
+              <span className="text-5xl">{"image from goal"}</span>
+            </div>
+            <h3 className="text-xl font-bold text-gray-800 mb-2">
+              {localizedName(item?.visionTitle)}
+            </h3>
+            <p className="text-gray-600">
+              {localizedName(item?.visionDescription)}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between text-sm text-gray-500 border-t pt-4">
+          <div className="flex items-center gap-2">
+            <span
+              className={`inline-block h-3 w-3 rounded-full ${item?.isActive ? "bg-primary-500" : "bg-gray-400"
+                }`}></span>
+            {item?.isActive ? t("Active") : t("Inactive")}
+          </div>
+
+          {item?.createdAt && (
+            <span className="text-sm text-gray-500">
+              {new Date(item.createdAt).toLocaleString(locale, {
+                dateStyle: "medium",
+                timeStyle: "short",
+              })}
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Vision/Vision.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Vision/Vision.tsx
new file mode 100644
index 000000000..c2037bc82
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Vision/Vision.tsx
@@ -0,0 +1,85 @@
+import { NavLink, useNavigate } from "react-router-dom";
+import { CirclePlus } from "lucide-react";
+import { VisionColumnDefn } from "./VisionColumn";
+import { useTranslation } from "react-i18next";
+import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
+import { useMemo, useState } from "react";
+import Loader from "@/record-management/components/Loader/loader";
+import { Button } from "@/shared/common/ui/button";
+import { useVision } from "../hooks/useVision";
+export const Vision = () => {
+  const [pageIndex, setPageIndex] = useState(0);
+  const navigate = useNavigate();
+  const pageSize = 10;
+  const { t } = useTranslation();
+  const baseParams = useMemo(() => {
+    const params: Record<string, any> = {
+      skip: pageIndex * pageSize,
+      take: pageSize,
+      orderBy: "createdAt:DESC",
+    };
+
+    return params;
+  }, [pageIndex]);
+
+  const { items, refetch, deleteItem, error, isLoading, count } =
+    useVision(baseParams);
+  const handlePageChange = (newPage: number) => {
+    setPageIndex(newPage);
+  };
+  
+  return (
+    <div className="flex flex-col h-full w-full p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700">
+      {/* Header Section */}
+      <div className="flex items-center justify-between mb-4 border-b pb-3 border-gray-200 dark:border-gray-700">
+        <h1 className="text-xl font-semibold text-gray-800 dark:text-gray-200">{t("Vision")}</h1>
+        {
+          <NavLink to="/user-management/web-Management/Vision/AddVision">
+            <Button
+              variant="addRecordBtn"
+              className="flex items-center gap-1 bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition-all">
+              <CirclePlus className="w-4 h-4" />
+              <span>{t("addVision")}</span>
+            </Button>
+          </NavLink>
+        }
+      </div>
+
+      {/* Content Section */}
+      <div className="flex-1 overflow-auto">
+        {isLoading && (
+          <div className="flex justify-center items-center h-48">
+            <Loader />
+          </div>
+        )}
+
+        {error && (
+          <p className="text-center text-red-500 text-sm mt-4">
+            {t("userRecord.Error loading records.")}
+          </p>
+        )}
+
+        {!isLoading && !error && (
+          <div className="mt-2">
+            <AdvancedTable
+              columns={VisionColumnDefn({
+                navigate,
+                onDelete: deleteItem,
+              })}
+              data={items || []}
+              tableName="Visions"
+              toolBarPosition="right"
+              extraToolbar={<div className="flex gap-2"></div>}
+              itemCount={count || 2}
+              pageIndex={pageIndex}
+              onPageChange={handlePageChange}
+              nextFunction={() => handlePageChange(pageIndex + 1)}
+              prevFunction={() => handlePageChange(Math.max(pageIndex - 1, 0))}
+              refresh={refetch}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Vision/VisionColumn.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Vision/VisionColumn.tsx
new file mode 100644
index 000000000..491108e78
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Vision/VisionColumn.tsx
@@ -0,0 +1,106 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { Button } from "@/shared/common/ui/button";
+import { Trash2, Edit, Eye } from "lucide-react";
+import { VisionItem } from "../types/visionType";
+import { t } from "i18next";
+import i18n from "@/i18n";
+export const VisionColumnDefn = ({
+  navigate,
+  onDelete,
+}: {
+  navigate: (id: string) => void;
+  onDelete: (id: string) => Promise<void>;
+}): ColumnDef<VisionItem>[] => [
+    {
+      header: () => t("toogle.title"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        const lang = i18n.language;
+        if (lang === "am") {
+          return <span>{rowData.visionTitle?.am || "-"}</span>;
+        }
+        if (lang === "en") {
+          return <span>{rowData.visionTitle?.en || "-"}</span>;
+        } else {
+          return <span>{"-"}</span>;
+        }
+      },
+      enableHiding: true,
+      accessorKey: "title",
+    },
+    {
+      accessorKey: "status",
+      header: () => t("toogle.status"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        return (
+          <span
+            className={`px-2 py-1 rounded-full text-xs font-medium ${rowData.isActive
+                ? "bg-primary-100 text-primary-800"
+                : "bg-red-100 text-red-800"
+              }`}
+          >
+            {rowData.isActive ? "Active" : "Inactive"}
+          </span>
+        );
+      },
+      enableHiding: true,
+    },
+    {
+      accessorKey: "createdAt",
+      header: () => t("toogle.createdAt"),
+      cell: ({ row }) => {
+        const rowData = row.original;
+        const lang = i18n.language;
+        const amDate = rowData?.amharicCreatedAt;
+        const enDate = new Date(rowData.createdAt).toLocaleString("en-US", {
+          month: "short", // "Oct"
+          day: "numeric", // "12"
+          year: "numeric", // "2014"
+          hour: "numeric", // "8"
+          minute: "2-digit", // "12"
+          hour12: true, // "PM" format
+        });
+        const date = lang === "am" ? amDate : enDate;
+        return <span className="text-sm text-gray-500">{date}</span>;
+      },
+      enableHiding: true,
+    },
+    {
+      accessorKey: "Actions",
+      header: () => t("toogle.Actions"),
+      cell: ({ row }) => (
+        <div className="flex space-x-2">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() =>
+              navigate(
+                `/user-management/web-management/Vision/ViewVision/${row.original.id}`
+              )
+            }
+          >
+            <Eye className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() =>
+              navigate(
+                `/user-management/web-management/Vision/EditVision/${row.original.id}`
+              )
+            }
+          >
+            <Edit className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => onDelete(row.original.id)}
+          >
+            <Trash2 className="h-4 w-4 text-destructive" />
+          </Button>
+        </div>
+      ),
+    },
+  ];
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/components/FormFeild.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/components/FormFeild.tsx
new file mode 100644
index 000000000..fab0b595c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/components/FormFeild.tsx
@@ -0,0 +1,30 @@
+// components/form/FormField.tsx
+import { Input } from "@/shared/common/ui/input";
+import { Label } from "@/shared/common/ui/label";
+import { cn } from "@/shared/lib/utils";
+import { ComponentProps } from "react";
+
+type FormFieldProps = {
+  label?: string;
+  error?: string;
+  containerClassName?: string;
+} & ComponentProps<typeof Input>;
+
+export function FormFeild({
+  label,
+  error,
+  containerClassName,
+  className,
+  ...props
+}: FormFieldProps) {
+  return (
+    <div className={cn("space-y-2", containerClassName)}>
+      {label && <Label htmlFor={props.id} className="dark:text-gray-300">{label}</Label>}
+      <Input
+        className={cn(error && "border-destructive", className, "dark:bg-gray-600 dark:text-gray-200 dark:border-gray-500")}
+        {...props}
+      />
+      {error && <p className="text-xs text-destructive mt-1">{error}</p>}
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/components/FormInputBox.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/components/FormInputBox.tsx
new file mode 100644
index 000000000..7362cb18f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/components/FormInputBox.tsx
@@ -0,0 +1,344 @@
+// components/form/FormField.tsx
+import { Input } from "@/shared/common/ui/input";
+import { Label } from "@/shared/common/ui/label";
+import { ComponentProps } from "react";
+import { FormFeild } from "./FormFeild";
+import { Textarea } from "@/shared/common/ui/textarea";
+import { ImageIcon } from "lucide-react";
+import { Button } from "@/shared/common/ui/button";
+import { Controller } from "react-hook-form";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/common/ui/select";
+
+type FormFieldProps = {
+  idEn?: string;
+  idAm?: string;
+  label?: string;
+  error?: string;
+  register?: any;
+  errors?: any;
+  watch?: any;
+  setValue?: any;
+  containerClassName?: string;
+  type?: string;
+  control?: any;
+  item?: any;
+} & ComponentProps<typeof Input>;
+export function FormInputBox({
+  idAm,
+  idEn,
+  label,
+  error,
+  register,
+  errors,
+}: FormFieldProps) {
+  return (
+    <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
+      <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
+        <div className="h-1 w-4 bg-blue-500 mr-2 rounded-full"></div>
+        {label}
+      </h3>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="space-y-2">
+          <Label htmlFor="messageTitleAm" className="text-gray-700 dark:text-gray-300">
+            {label} Amharic*
+          </Label>
+          <FormFeild
+            id={idAm}
+            {...register(idAm, { required: error })}
+            error={errors.idAm?.message}
+            placeholder="message title"
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor={idEn} className="text-gray-700 dark:text-gray-300">
+            {label} (English)*
+          </Label>
+          <FormFeild
+            id={idEn}
+            {...register(idEn, { required: error })}
+            error={errors.idEn?.message}
+            placeholder="Message Title"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+export function FormSingleBox({
+  id,
+  type,
+  label,
+  error,
+  register,
+  errors,
+}: FormFieldProps) {
+  return (
+    <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
+      <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
+        <div className="h-1 w-4 bg-purple-500 mr-2 rounded-full"></div>
+        {label}
+      </h3>
+      <div className="space-y-2">
+        <FormFeild
+          id={id}
+          type={type}
+          {...register(id, { required: error })}
+          placeholder={label}
+        />
+        {errors.link && (
+          <p className="text-xs text-red-500 mt-1">{errors.id.message}</p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function FormTextBox({
+  idAm,
+  idEn,
+  label,
+  error,
+  register,
+  errors,
+}: FormFieldProps) {
+  return (
+    <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
+      <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
+        <div className="h-1 w-4 bg-purple-500 mr-2 rounded-full"></div>
+        {label}
+      </h3>
+
+      <div className="space-y-6">
+        <div className="space-y-2">
+          <Label htmlFor="messageContentAm" className="text-gray-700 dark:text-gray-300">
+            {label}Amharic*
+          </Label>
+          <Textarea
+            id={idAm}
+            {...register(idAm, { required: error })}
+            rows={4}
+            placeholder="content"
+            className="min-h-[120px] dark:bg-gray-600 dark:text-gray-200"
+          />
+          {errors.idAm && (
+            <p className="text-xs text-red-500 mt-1">{errors.idAm.message}</p>
+          )}
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="messageContentEn" className="text-gray-700 dark:text-gray-300">
+            {label}English*
+          </Label>
+          <Textarea
+            id={idEn}
+            {...register(idEn, { required: error })}
+            rows={4}
+            placeholder="content"
+            className="min-h-[120px] dark:bg-gray-600 dark:text-gray-200"
+          />
+          {errors.idEn && (
+            <p className="text-xs text-red-500 mt-1">{errors.idEn.message}</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+export function FormToggle({ idAm, label, watch, setValue }: FormFieldProps) {
+  const isActive = watch(idAm) ?? false;
+  return (
+    <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
+      <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
+        <div className="h-1 w-4 bg-primary-500 mr-2 rounded-full"></div>
+        {label}
+      </h3>
+
+      <div className="flex items-center justify-between">
+        <Label htmlFor={idAm} className="text-gray-700 dark:text-gray-300 font-medium">
+          Is Active
+        </Label>
+
+        <button
+          type="button"
+          onClick={() => setValue(idAm, !watch(idAm))}
+          className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+            isActive ? "bg-primary-500" : "bg-gray-300 dark:bg-gray-500"
+          }`}
+        >
+          <span
+            className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+              isActive ? "translate-x-6" : "translate-x-1"
+            }`}
+          />
+        </button>
+      </div>
+    </div>
+  );
+}
+export const Section = ({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) => (
+  <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
+    <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
+      <div className="h-1 w-4 bg-blue-500 mr-2 rounded-full"></div>
+      {title}
+    </h3>
+    {children}
+  </div>
+);
+
+const FormFieldWrapper = ({ children }: { children: React.ReactNode }) => (
+  <div className="space-y-2">{children}</div>
+);
+
+const ErrorText = ({ children }: { children: React.ReactNode }) => (
+  <p className="text-xs text-red-500 mt-1">{children}</p>
+);
+
+export const ImageUpload = ({
+  label,
+  preview,
+  existingName,
+  register,
+  error,
+  onView,
+  id,
+  isRequired = false, // <-- add a prop
+}: {
+  label: string;
+  preview: string | null;
+  existingName?: string;
+  register: any;
+  error?: string;
+  onView: () => void;
+  id: string;
+  isRequired?: boolean;
+}) => (
+  <FormFieldWrapper>
+    <Label className="text-gray-700 dark:text-gray-300 block mb-2">
+      {label} {isRequired && "*"}
+    </Label>
+
+    {preview && (
+      <div className="mb-3 flex items-center justify-between bg-blue-50 dark:bg-blue-900/30 p-3 rounded-lg">
+        <div className="flex items-center">
+          <ImageIcon className="h-5 w-5 text-blue-500 dark:text-blue-400 mr-2" />
+          <span className="text-sm font-medium truncate max-w-[200px] dark:text-gray-200">
+            {existingName || "Selected Image"}
+          </span>
+        </div>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={onView}
+          className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
+        >
+          Preview
+        </Button>
+      </div>
+    )}
+
+    <div>
+      <FormFeild
+        id={id}
+        type="file"
+        accept="image/*"
+        {...register}
+        error={error}
+      />
+    </div>
+
+    {error && <ErrorText>{error}</ErrorText>}
+  </FormFieldWrapper>
+);
+export function FormColorPicker({
+  idAm,
+  label,
+  error,
+  register,
+  errors,
+  watch,
+}: FormFieldProps) {
+  const colorValue = watch?.(idAm) ?? "#000000";
+
+  return (
+    <div className="space-y-2">
+      <Label htmlFor="color" className="text-gray-700 dark:text-gray-300">
+        {label}*
+      </Label>
+      <div className="flex items-center gap-3">
+        <input
+          id={idAm}
+          type="color"
+          {...register(idAm, { required: error })}
+          className="h-10 w-16 cursor-pointer border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700"
+        />
+        <span className="text-sm text-gray-600 dark:text-gray-400 font-mono">{colorValue}</span>
+      </div>
+      {errors.color && (
+        <p className="text-xs text-red-500 mt-1">{errors.color.message}</p>
+      )}
+    </div>
+  );
+}
+export function FormSelector({
+  id,
+  item,
+  label,
+  error,
+  register,
+  control,
+  errors,
+}: FormFieldProps) {
+  return (
+    <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
+      <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
+        <div className="h-1 w-4 bg-primary-500 mr-2 rounded-full"></div>
+        Select Type
+      </h3>
+
+      <div className="space-y-2">
+        <Label htmlFor="id" className="text-gray-700 dark:text-gray-300 font-medium">
+          {label}
+        </Label>
+
+        <Controller
+          name={id || ""}
+          control={control}
+          rules={{ required: "message type is required" }}
+          render={({ field }) => (
+            <Select onValueChange={field.onChange} value={field.value}>
+              <SelectTrigger className="w-full dark:bg-gray-600 dark:text-gray-200 dark:border-gray-500">
+                <SelectValue placeholder="Select type" />
+              </SelectTrigger>
+              <SelectContent className="dark:bg-gray-700 dark:border-gray-600">
+                {item.map((item: any) => (
+                  <SelectItem key={item.value} value={item.value} className="dark:text-gray-200 dark:hover:bg-gray-600">
+                    {item.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          )}
+        />
+
+        {errors.type && (
+          <p className="text-xs text-red-500 mt-1">
+            {errors.type.message as string}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useBranding.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useBranding.ts
new file mode 100644
index 000000000..27164b0a4
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useBranding.ts
@@ -0,0 +1,71 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  BrandingResponse,
+  BrandingParam,
+  BrandingResponseAPI,
+  BrandingParamAPI,
+  BrandingResponseItems,
+} from "../types/brandTypes";
+import {
+  getBrandingItems,
+  updateBrandingItem,
+  createBrandingItem,
+  getBrandingItemsUsingDomain,
+} from "../services/brandService";
+import { useMemo } from "react";
+type UpdateBrandingVariables = {
+  id: string;
+  payload: BrandingParamAPI[];
+};
+export const useBranding = (
+  siteId: string,
+  options?: { skipAuthQuery?: boolean },
+) => {
+  const queryClient = useQueryClient();
+
+  const { data, isLoading, error, refetch } = useQuery<BrandingResponseAPI>({
+    queryKey: ["Branding", siteId],
+    queryFn: async () => {
+      const data = (await getBrandingItems(siteId)).count;
+      const resp = await getBrandingItems(siteId, data ? data : 0);
+      return resp;
+    },
+    enabled: !(siteId === "") && !options?.skipAuthQuery,
+  });
+
+  const updateMutation = useMutation<
+    BrandingResponse,
+    Error,
+    UpdateBrandingVariables
+  >({
+    mutationFn: async ({ id, payload }) => {
+      const resp = await updateBrandingItem(id, payload);
+      return resp;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["Branding", siteId] });
+      queryClient.invalidateQueries({ queryKey: ["BrandingDomain"] });
+    },
+  });
+
+  const createMutation = useMutation({
+    mutationFn: async (payload: BrandingParamAPI[]) => {
+      const resp = await createBrandingItem(payload);
+      return resp;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["Branding", siteId] });
+    },
+  });
+
+  return {
+    data,
+    isLoading,
+    error,
+    updateItem: updateMutation.mutateAsync,
+    isUpdating: updateMutation.isPending,
+    createItem: createMutation.mutateAsync,
+    isCreating: createMutation.isPending,
+    refetch,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useContactUs.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useContactUs.ts
new file mode 100644
index 000000000..3048cee65
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useContactUs.ts
@@ -0,0 +1,92 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  CreateContactUsPayload,
+  ContactUsItem,
+  ContactUsResponse,
+} from "../types/contactUs";
+import { ContactUsService } from "../services/contactUsService";
+import { param } from "jquery";
+
+export interface ContactUsParams {
+  isActive?: boolean;
+  orderBy?: string;
+  take?: number;
+  skip?: number;
+  order?: string;
+}
+export const useContactUs = (params?: ContactUsParams, id?: string) => {
+  const queryClient = useQueryClient();
+
+  const {
+    data: singleItem,
+    isLoading,
+    error,
+  } = useQuery<ContactUsItem>({
+    queryKey: ["ContactUs", id],
+    queryFn: async () => {
+      const resp: ContactUsItem = await ContactUsService.getItem(id || "");
+
+      return resp;
+    },
+    enabled: !!id,
+  });
+  const { data: items, refetch } = useQuery<ContactUsResponse>({
+    queryKey: ["ContactUs1", params],
+    queryFn: async () => {
+      const resp: ContactUsResponse = await ContactUsService.getItems(params!);
+
+      return resp;
+    },
+  });
+  const createMutation = useMutation({
+    mutationFn: async (payload: { data: CreateContactUsPayload }) => {
+      // Step 1: Create the initial item record
+      const createResponse = await ContactUsService.createItem(payload.data);
+
+      if (!createResponse.id) {
+        throw new Error("Failed to create ContactUs item");
+      }
+
+      return createResponse;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["ContactUs1", params],
+      });
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: ({
+      id,
+      data,
+    }: {
+      id: string;
+      data: Partial<CreateContactUsPayload>;
+    }) => ContactUsService.updateItem(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["ContactUs1", params] });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: ContactUsService.deleteItem,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["ContactUs1", params] });
+    },
+  });
+  return {
+    items: items?.items,
+    singleItem: singleItem,
+    count: items?.count,
+    isLoading,
+    error,
+    createItem: createMutation.mutateAsync,
+    updateItem: updateMutation.mutateAsync,
+    deleteItem: deleteMutation.mutateAsync,
+    isCreating: createMutation.isPending,
+    isUpdating: updateMutation.isPending,
+    isDeleting: deleteMutation.isPending,
+    refetch,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useGoal.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useGoal.ts
new file mode 100644
index 000000000..c031db053
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useGoal.ts
@@ -0,0 +1,132 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { CreateGoalPayload, GoalItem, GoalResponse } from "../types/goalType";
+import { GoalService } from "../services/goalService";
+import { param } from "jquery";
+
+export interface GoalParams {
+  orderBy?: string;
+  take?: number;
+  skip?: number;
+  order?: string;
+  isActive?: boolean;
+}
+export const useGoal = (params?: GoalParams, id?: string) => {
+  const queryClient = useQueryClient();
+
+  const {
+    data: singleItem,
+    isLoading,
+    error,
+  } = useQuery<GoalItem>({
+    queryKey: ["Goal", id],
+    queryFn: async () => {
+      const resp: GoalItem = await GoalService.getItem(id || "");
+
+      return resp;
+    },
+    enabled: !!id,
+  });
+  const { data: items, refetch } = useQuery<GoalResponse>({
+    queryKey: ["Goal1", params],
+    queryFn: async () => {
+      const resp: GoalResponse = await GoalService.getItems(params!);
+
+      return resp;
+    },
+  });
+  const createMutation = useMutation({
+    mutationFn: async (payload: {
+      data: CreateGoalPayload;
+      imageFile: File;
+    }) => {
+      // Step 1: Create the initial item record
+      const createResponse = await GoalService.createItem(payload.data);
+
+      if (!createResponse.id) {
+        throw new Error("Failed to create Goal item");
+      }
+
+      // Step 2: Upload the image file
+      try {
+        await GoalService.uploadImage(
+          payload.imageFile,
+          createResponse.presigned!
+        );
+      } catch (uploadError) {
+        // Rollback creation if upload fails
+        await GoalService.deleteItem(createResponse.id);
+        throw uploadError;
+      }
+
+      // Step 3: Update status to active
+      await GoalService.changeStatus(createResponse?.id);
+
+      return createResponse;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["Goal1", params],
+      });
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: async ({
+      id,
+      data,
+      imageFile,
+    }: {
+      id: string;
+      data: Partial<CreateGoalPayload>;
+      imageFile?: File | null;
+    }) => {
+      // 1️⃣ Update the basic message data first
+      const updateResponse = await GoalService.updateItem(id, data);
+
+      // 2️⃣ If a new image file is selected, handle image upload
+      if (imageFile) {
+        try {
+          // Request new presigned URL
+          const presignedResponse = updateResponse;
+
+          // Upload the new image
+          await GoalService.uploadImage(
+            imageFile,
+            presignedResponse.presigned!
+          );
+        } catch (uploadError) {
+          console.error("Image upload failed:", uploadError);
+          throw uploadError;
+        }
+        await GoalService.changeStatus(id);
+      }
+
+      return updateResponse;
+    },
+
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["Message1", params] });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => GoalService.deleteItem(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["Goal1", params] });
+    },
+  });
+  return {
+    items: items?.items,
+    singleItem: singleItem,
+    count: items?.count,
+    isLoading,
+    error,
+    createItem: createMutation.mutateAsync,
+    updateItem: updateMutation.mutateAsync,
+    deleteItem: deleteMutation.mutateAsync,
+    isCreating: createMutation.isPending,
+    isUpdating: updateMutation.isPending,
+    isDeleting: deleteMutation.isPending,
+    refetch,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useMessage.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useMessage.ts
new file mode 100644
index 000000000..28250cdeb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useMessage.ts
@@ -0,0 +1,139 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  CreateMessagePayload,
+  MessageItem,
+  MessageResponse,
+} from "../types/messageTypes";
+import { MessageService } from "../services/messageService";
+import { param } from "jquery";
+
+export interface MessageParams {
+  orderBy?: string;
+  take?: number;
+  skip?: number;
+  order?: string;
+  isActive?: boolean;
+}
+export const useMessage = (params?: MessageParams, id?: string) => {
+  const queryClient = useQueryClient();
+  const { data: singleItem } = useQuery<MessageItem>({
+    queryKey: ["Message",id],
+    queryFn: async () => {
+      const resp: MessageItem = await MessageService.getItem(id || "");
+      return resp;
+    },
+    enabled: !!id,
+  });
+  const {
+    data: items,
+    isLoading,
+    error,
+    refetch,
+  } = useQuery<MessageResponse>({
+    queryKey: ["Message1", params],
+    queryFn: async () => {
+      const resp: MessageResponse = await MessageService.getItems(params!);
+
+      return resp;
+    },
+  });
+  const createMutation = useMutation({
+    mutationFn: async (payload: {
+      data: CreateMessagePayload;
+      imageFile: File;
+    }) => {
+      // Step 1: Create the initial item record
+      const createResponse = await MessageService.createItem(payload.data);
+
+      if (!createResponse.id) {
+        throw new Error("Failed to create Message item");
+      }
+
+      // Step 2: Upload the image file
+
+      try {
+        await MessageService.uploadImage(
+          payload.imageFile,
+          createResponse.presigned!
+        );
+      } catch (uploadError) {
+        // Rollback creation if upload fails
+        await MessageService.deleteItem(createResponse.id);
+        throw uploadError;
+      }
+
+      // Step 3: Update status to active
+      await MessageService.updateUploadStatus(
+        createResponse.id,
+        true
+      );
+
+      return createResponse;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["Message1", params],
+      });
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: async ({
+      id,
+      data,
+      imageFile,
+    }: {
+      id: string;
+      data: Partial<CreateMessagePayload>;
+      imageFile?: File | null;
+    }) => {
+      // 1️⃣ Update the basic message data first
+      const updateResponse = await MessageService.updateItem(id, data);
+
+      // 2️⃣ If a new image file is selected, handle image upload
+      if (imageFile) {
+        try {
+          // Request new presigned URL
+          const presignedResponse = updateResponse;
+
+          // Upload the new image
+          await MessageService.uploadImage(
+            imageFile,
+            presignedResponse.presigned!
+          );
+        } catch (uploadError) {
+          console.error("Image upload failed:", uploadError);
+          throw uploadError;
+        }
+        await MessageService.updateUploadStatus(id, true);
+      }
+
+      return updateResponse;
+    },
+
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["Message1", params] });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: MessageService.deleteItem,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["Message1", params] });
+    },
+  });
+  return {
+    items: items?.items,
+    singleItem: singleItem,
+    count: items?.count,
+    isLoading,
+    error,
+    createItem: createMutation.mutateAsync,
+    updateItem: updateMutation.mutateAsync,
+    deleteItem: deleteMutation.mutateAsync,
+    isCreating: createMutation.isPending,
+    isUpdating: updateMutation.isPending,
+    isDeleting: deleteMutation.isPending,
+    refetch,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useModules.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useModules.ts
new file mode 100644
index 000000000..e606b1f04
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useModules.ts
@@ -0,0 +1,92 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  CreateModulesPayload,
+  ModulesItem,
+  ModulesResponse,
+} from "../types/modulesType";
+import { ModulesService } from "../services/modulesService";
+import { param } from "jquery";
+
+export interface ModulesParams {
+  orderBy?: string;
+  take?: number;
+  skip?: number;
+  order?: string;
+  isActive?: boolean;
+}
+export const useModules = (params?: ModulesParams, id?: string) => {
+  const queryClient = useQueryClient();
+
+  const {
+    data: singleItem,
+    isLoading,
+    error,
+  } = useQuery<ModulesItem>({
+    queryKey: ["Modules", id],
+    queryFn: async () => {
+      const resp: ModulesItem = await ModulesService.getItem(id || "");
+
+      return resp;
+    },
+    enabled: !!id,
+  });
+  const { data: items, refetch } = useQuery<ModulesResponse>({
+    queryKey: ["Modules1", params],
+    queryFn: async () => {
+      const resp: ModulesResponse = await ModulesService.getItems(params!);
+
+      return resp;
+    },
+  });
+  const createMutation = useMutation({
+    mutationFn: async (payload: { data: CreateModulesPayload }) => {
+      // Step 1: Create the initial item record
+      const createResponse = await ModulesService.createItem(payload.data);
+
+      if (!createResponse.id) {
+        throw new Error("Failed to create Modules item");
+      }
+
+      return createResponse;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["Modules1", params],
+      });
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: ({
+      id,
+      data,
+    }: {
+      id: string;
+      data: Partial<CreateModulesPayload>;
+    }) => ModulesService.updateItem(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["Modules1", params] });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: ModulesService.deleteItem,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["Modules1", params] });
+    },
+  });
+  return {
+    items: items?.items,
+    singleItem: singleItem,
+    count: items?.count,
+    isLoading,
+    error,
+    createItem: createMutation.mutateAsync,
+    updateItem: updateMutation.mutateAsync,
+    deleteItem: deleteMutation.mutateAsync,
+    isCreating: createMutation.isPending,
+    isUpdating: updateMutation.isPending,
+    isDeleting: deleteMutation.isPending,
+    refetch,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useNews.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useNews.ts
new file mode 100644
index 000000000..df1db928b
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useNews.ts
@@ -0,0 +1,135 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { CreateNewsPayload, NewsItem, NewsResponse } from "../types/newsTypes";
+import { NewsService } from "../services/newsService";
+
+export interface NewsParams {
+  orderBy?: string;
+  take?: number;
+  skip?: number;
+  order?: string;
+  isActive?: boolean;
+  isFeatured?: boolean;
+  newsCategoryId?: string;
+}
+
+export const useNews = (params?: NewsParams, id?: string) => {
+  const queryClient = useQueryClient();
+
+  const {
+    data: singleItem,
+    isLoading,
+    error,
+    refetch,
+  } = useQuery<NewsItem>({
+    queryKey: ["News", id],
+    queryFn: async () => {
+      const resp: NewsItem = await NewsService.getItem(id || "");
+      return resp;
+    },
+    enabled: !!id,
+  });
+
+  const { data: items, refetch: refetchItems } = useQuery<NewsResponse>({
+    queryKey: ["News1", params],
+    queryFn: async () => {
+      const resp: NewsResponse = await NewsService.getItems(params!);
+      return resp;
+    },
+  });
+
+  const createMutation = useMutation({
+    mutationFn: async (payload: {
+      data: CreateNewsPayload;
+      imageFile: File;
+    }) => {
+      // Step 1: Create the initial item record
+      const createResponse = await NewsService.createItem(payload.data);
+
+      if (!createResponse.id) {
+        throw new Error("Failed to create News item");
+      }
+
+      // Step 2: Upload the image file
+      try {
+        await NewsService.uploadImage(
+          payload.imageFile,
+          createResponse.presigned!
+        );
+      } catch (uploadError) {
+        // Rollback creation if upload fails
+        await NewsService.deleteItem(createResponse.id);
+        throw uploadError;
+      }
+
+      // Step 3: Update status to active
+      await NewsService.updateUploadStatus(createResponse.id, true);
+
+      return createResponse;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["News", params],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["News1", params],
+      });
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: async ({
+      id,
+      data,
+      imageFile,
+    }: {
+      id: string;
+      data: Partial<CreateNewsPayload>;
+      imageFile?: File;
+    }) => {
+      // Step 1: Update the item data
+      const updateResponse = await NewsService.updateItem(id, data);
+
+      // Step 2: If there's a new image file, upload it
+      if (imageFile && updateResponse.presigned) {
+        try {
+          await NewsService.uploadImage(imageFile, updateResponse.presigned);
+        } catch (uploadError) {
+          console.error("Image upload failed during update:", uploadError);
+          throw uploadError;
+        }
+
+        // Step 3: Update upload status to active
+        await NewsService.updateUploadStatus(id, true);
+      }
+
+      return updateResponse;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["News", params] });
+      queryClient.invalidateQueries({ queryKey: ["News1", params] });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: NewsService.deleteItem,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["News", params] });
+      queryClient.invalidateQueries({ queryKey: ["News1", params] });
+    },
+  });
+
+  return {
+    items: items?.items,
+    singleItem: singleItem,
+    count: items?.count,
+    isLoading,
+    error,
+    createItem: createMutation.mutateAsync,
+    updateItem: updateMutation.mutateAsync,
+    deleteItem: deleteMutation.mutateAsync,
+    isCreating: createMutation.isPending,
+    isUpdating: updateMutation.isPending,
+    isDeleting: deleteMutation.isPending,
+    refetch: refetchItems,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useNewsCategory.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useNewsCategory.ts
new file mode 100644
index 000000000..cff6a91b7
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useNewsCategory.ts
@@ -0,0 +1,144 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  CreateNewsCategoryPayload,
+  NewsCategoryItem,
+  NewsCategoryResponse,
+} from "../types/newsCategoryType";
+import { NewsCategoryService } from "../services/newsCategory";
+
+export interface NewsCategoryParams {
+  isActive?: boolean;
+  orderBy?: string;
+  take?: number;
+  skip?: number;
+  order?: string;
+}
+export const useNewsCategory = (params?: NewsCategoryParams, id?: string) => {
+  const queryClient = useQueryClient();
+
+  const {
+    data: singleItem,
+    isLoading,
+    error,
+    refetch,
+  } = useQuery<NewsCategoryItem>({
+    queryKey: ["NewsCategory", id],
+    queryFn: async () => {
+      const resp: NewsCategoryItem = await NewsCategoryService.getItem(
+        id || ""
+      );
+
+      return resp;
+    },
+    enabled: !!id,
+  });
+  const { data: items, refetch: refetchItems } = useQuery<NewsCategoryResponse>(
+    {
+      queryKey: ["NewsCategory1", params],
+      queryFn: async () => {
+        const resp: NewsCategoryResponse = await NewsCategoryService.getItems(
+          params!
+        );
+
+        return resp;
+      },
+    }
+  );
+  const createMutation = useMutation({
+    mutationFn: async (payload: {
+      data: CreateNewsCategoryPayload;
+      imageFile: File;
+    }) => {
+      // Step 1: Create the initial item record
+      const createResponse = await NewsCategoryService.createItem(payload.data);
+
+      if (!createResponse.id) {
+        throw new Error("Failed to create NewsCategory item");
+      }
+
+      // Step 2: Upload the image file
+      try {
+        await NewsCategoryService.uploadImage(
+          payload.imageFile,
+          createResponse.presigned!
+        );
+      } catch (uploadError) {
+        // Rollback creation if upload fails
+        await NewsCategoryService.deleteItem(createResponse.id);
+        throw uploadError;
+      }
+
+      // Step 3: Update status to active
+      await NewsCategoryService.updateUploadStatus(createResponse.id, true);
+
+      return createResponse;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["NewsCategory", params],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["NewsCategory1", params],
+      });
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: async ({
+      id,
+      data,
+      imageFile,
+    }: {
+      id: string;
+      data: Partial<CreateNewsCategoryPayload>;
+      imageFile?: File;
+    }) => {
+      // Step 1: Update the item data
+      const updateResponse = await NewsCategoryService.updateItem(id, data);
+
+      // Step 2: If there's a new image file, upload it
+      if (imageFile && updateResponse.presigned) {
+        try {
+          await NewsCategoryService.uploadImage(
+            imageFile,
+            updateResponse.presigned
+          );
+        } catch (uploadError) {
+          console.error("Image upload failed during update:", uploadError);
+          throw uploadError;
+        }
+
+        // Step 3: Update upload status to active
+        await NewsCategoryService.updateUploadStatus(id, true);
+      }
+
+      return updateResponse;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["NewsCategory", params] });
+      queryClient.invalidateQueries({ queryKey: ["NewsCategory1", params] });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: NewsCategoryService.deleteItem,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["NewsCategory", params] });
+      queryClient.invalidateQueries({ queryKey: ["NewsCategory1", params] });
+    },
+  });
+  return {
+    items: items?.items,
+    singleItem: singleItem,
+    count: items?.count,
+    isLoading,
+    error,
+    createItem: createMutation.mutateAsync,
+    updateItem: updateMutation.mutateAsync,
+    deleteItem: deleteMutation.mutateAsync,
+    isCreating: createMutation.isPending,
+    isUpdating: updateMutation.isPending,
+    isDeleting: deleteMutation.isPending,
+    refetch: refetchItems, // Use the items refetch function
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useSocialMedia.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useSocialMedia.ts
new file mode 100644
index 000000000..c28fdcc30
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useSocialMedia.ts
@@ -0,0 +1,94 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  CreateSocialMediaPayload,
+  SocialMediaItem,
+  SocialMediaResponse,
+} from "../types/socialMediaType";
+import { SocialMediaService } from "../services/socialMediaService";
+import { param } from "jquery";
+
+export interface SocialMediaParams {
+  orderBy?: string;
+  take?: number;
+  skip?: number;
+  order?: string;
+  isActive?: boolean;
+}
+export const useSocialMedia = (params?: SocialMediaParams, id?: string) => {
+  const queryClient = useQueryClient();
+
+  const {
+    data: singleItem,
+    isLoading,
+    error,
+  } = useQuery<SocialMediaItem>({
+    queryKey: ["SocialMedia", id],
+    queryFn: async () => {
+      const resp: SocialMediaItem = await SocialMediaService.getItem(id || "");
+
+      return resp;
+    },
+    enabled: !!id,
+  });
+  const { data: items, refetch } = useQuery<SocialMediaResponse>({
+    queryKey: ["SocialMedia1", params],
+    queryFn: async () => {
+      const resp: SocialMediaResponse = await SocialMediaService.getItems(
+        params!
+      );
+
+      return resp;
+    },
+  });
+  const createMutation = useMutation({
+    mutationFn: async (payload: { data: CreateSocialMediaPayload }) => {
+      // Step 1: Create the initial item record
+      const createResponse = await SocialMediaService.createItem(payload.data);
+
+      if (!createResponse.id) {
+        throw new Error("Failed to create SocialMedia item");
+      }
+
+      return createResponse;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["SocialMedia1", params],
+      });
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: ({
+      id,
+      data,
+    }: {
+      id: string;
+      data: Partial<CreateSocialMediaPayload>;
+    }) => SocialMediaService.updateItem(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["SocialMedia1", params] });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: SocialMediaService.deleteItem,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["SocialMedia1", params] });
+    },
+  });
+  return {
+    items: items?.items,
+    singleItem: singleItem,
+    count: items?.count,
+    isLoading,
+    error,
+    createItem: createMutation.mutateAsync,
+    updateItem: updateMutation.mutateAsync,
+    deleteItem: deleteMutation.mutateAsync,
+    isCreating: createMutation.isPending,
+    isUpdating: updateMutation.isPending,
+    isDeleting: deleteMutation.isPending,
+    refetch,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useTemplates.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useTemplates.ts
new file mode 100644
index 000000000..10c22a6d6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useTemplates.ts
@@ -0,0 +1,113 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { TemplateService } from "../services/templateService";
+import { LIST_BULLET_RESOURCES_QUERY_KEY } from "@/user-management/services/api/listBulletResources";
+import {
+  TemplateResource,
+  ResourceType,
+} from "../TemplateConfiguration/types/templateTypes";
+
+export interface TemplateParams {
+  page?: number;
+  limit?: number;
+  search?: string;
+  resourceTypeId?: string;
+}
+
+export function useResourceTypes() {
+  return useQuery({
+    queryKey: ["resourceTypes"],
+    queryFn: () => TemplateService.getResourceTypes(),
+  });
+}
+
+export function useTemplates(params?: TemplateParams) {
+  return useQuery({
+    queryKey: ["templates", params],
+    queryFn: () =>
+      TemplateService.getTemplates(params as Record<string, unknown>),
+  });
+}
+
+export function useTemplate(id: string) {
+  return useQuery({
+    queryKey: ["templates", id],
+    queryFn: () => TemplateService.getTemplate(id),
+    enabled: !!id,
+  });
+}
+
+export function useTemplateWithPresigned(
+  resourceTypeId: string,
+  templateId: string,
+) {
+  return useQuery({
+    queryKey: ["templates", resourceTypeId, templateId],
+    queryFn: () =>
+      TemplateService.getTemplateWithPresigned(resourceTypeId, templateId),
+    enabled: !!resourceTypeId && !!templateId,
+  });
+}
+
+export function useTemplateMutations() {
+  const queryClient = useQueryClient();
+
+  const createMutation = useMutation({
+    mutationFn: async (data: any) => {
+      const { fileData, ...templateData } = data;
+      const response = await TemplateService.createTemplate(templateData);
+
+      if (fileData?.file && response.presigned && response.id) {
+        try {
+          await TemplateService.uploadFile(fileData.file, response.presigned);
+          await TemplateService.updateUploadStatus(response.id, true);
+        } catch (error) {
+          console.error("File upload failed:", error);
+          throw error;
+        }
+      }
+
+      return response;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["templates"] });
+      queryClient.invalidateQueries({ queryKey: LIST_BULLET_RESOURCES_QUERY_KEY });
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: async (data: any) => {
+      const { id, fileData, ...templateData } = data;
+      const response = await TemplateService.updateTemplate(id, templateData);
+
+      if (fileData?.file && response.presigned && id) {
+        try {
+          await TemplateService.uploadFile(fileData.file, response.presigned);
+          await TemplateService.updateUploadStatus(id, true);
+        } catch (error) {
+          console.error("File upload failed:", error);
+          throw error;
+        }
+      }
+
+      return response;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["templates"] });
+      queryClient.invalidateQueries({ queryKey: LIST_BULLET_RESOURCES_QUERY_KEY });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => TemplateService.deleteTemplate(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["templates"] });
+      queryClient.invalidateQueries({ queryKey: LIST_BULLET_RESOURCES_QUERY_KEY });
+    },
+  });
+
+  return {
+    create: createMutation,
+    update: updateMutation,
+    delete: deleteMutation,
+  };
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useTheme.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useTheme.ts
new file mode 100644
index 000000000..7f44aefc0
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useTheme.ts
@@ -0,0 +1,106 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  CreateThemePayload,
+  ThemeItem,
+  ThemeResponse,
+} from "../types/themeTypes";
+import { ThemeService } from "../services/themeService";
+import { param } from "jquery";
+
+export interface ThemeParams {
+  orderBy?: string;
+  take?: number;
+  skip?: number;
+  order?: string;
+}
+export const useTheme = (params?: ThemeParams, id?: string) => {
+  const queryClient = useQueryClient();
+  const { data: singleItem } = useQuery<ThemeItem>({
+    queryKey: ["Theme1"],
+    queryFn: async () => {
+      const resp: ThemeItem = await ThemeService.getItem(id || "");
+      return resp;
+    },
+    enabled: !!id,
+  });
+  const {
+    data: items,
+    isLoading,
+    error,
+    refetch,
+  } = useQuery<ThemeResponse>({
+    queryKey: ["Theme", params],
+    queryFn: async () => {
+      const resp: ThemeResponse = await ThemeService.getItems(params!);
+
+      return resp;
+    },
+  });
+  const createMutation = useMutation({
+    mutationFn: async (payload: {
+      data: CreateThemePayload;
+      imageFile: File;
+    }) => {
+      // Step 1: Create the initial item records
+      const createResponse = await ThemeService.createItem(payload.data);
+
+      if (!createResponse) {
+        throw new Error("Failed to create Theme item(s)");
+      }
+
+      // Step 2: Upload images (parallel)
+      try {
+        await Promise.all(
+          createResponse
+            .filter((item) => item.presigned)
+            .map(async (item, i) => {
+              try {
+                await ThemeService.uploadImage(
+                  payload.imageFile,
+                  item.presigned!
+                );
+                await ThemeService.updateUploadStatus(item.id, item.id);
+                return item;
+              } catch (uploadError) {
+                // Rollback this specific item if upload fails
+                await ThemeService.deleteItem(item.id);
+                throw uploadError; // stops Promise.all
+              }
+            })
+        );
+      } catch (error) {
+        console.error("One or more uploads failed:", error);
+        throw error;
+      }
+
+      // Step 3: Return final created data
+      return createResponse;
+    },
+
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["Theme1", params],
+      });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: ThemeService.deleteItem,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["Theme1", params] });
+    },
+  });
+  return {
+    items: items?.items,
+    unit: items?.unit,
+    singleItem: singleItem,
+    count: items?.count,
+    isLoading,
+    error,
+    createItem: createMutation.mutateAsync,
+    deleteItem: deleteMutation.mutateAsync,
+    isCreating: createMutation.isPending,
+    isDeleting: deleteMutation.isPending,
+    refetch,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useVision.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useVision.ts
new file mode 100644
index 000000000..17dfdd190
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/hooks/useVision.ts
@@ -0,0 +1,92 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  CreateVisionPayload,
+  VisionItem,
+  VisionResponse,
+} from "../types/visionType";
+import { VisionService } from "../services/visionService";
+import { param } from "jquery";
+
+export interface VisionParams {
+  orderBy?: string;
+  take?: number;
+  skip?: number;
+  order?: string;
+  isActive?: boolean;
+}
+export const useVision = (params?: VisionParams, id?: string) => {
+  const queryClient = useQueryClient();
+
+  const {
+    data: singleItem,
+    isLoading,
+    error,
+  } = useQuery<VisionItem>({
+    queryKey: ["Vision", id],
+    queryFn: async () => {
+      const resp: VisionItem = await VisionService.getItem(id || "");
+
+      return resp;
+    },
+    enabled: !!id,
+  });
+  const { data: items, refetch } = useQuery<VisionResponse>({
+    queryKey: ["Vision1", params],
+    queryFn: async () => {
+      const resp: VisionResponse = await VisionService.getItems(params!);
+
+      return resp;
+    },
+  });
+  const createMutation = useMutation({
+    mutationFn: async (payload: { data: CreateVisionPayload }) => {
+      // Step 1: Create the initial item record
+      const createResponse = await VisionService.createItem(payload.data);
+
+      if (!createResponse.id) {
+        throw new Error("Failed to create Vision item");
+      }
+
+      return createResponse;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["Vision1", params],
+      });
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: ({
+      id,
+      data,
+    }: {
+      id: string;
+      data: Partial<CreateVisionPayload>;
+    }) => VisionService.updateItem(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["Vision1", params] });
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: VisionService.deleteItem,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["Vision1", params] });
+    },
+  });
+  return {
+    items: items?.items,
+    singleItem: singleItem,
+    count: items?.count,
+    isLoading,
+    error,
+    createItem: createMutation.mutateAsync,
+    updateItem: updateMutation.mutateAsync,
+    deleteItem: deleteMutation.mutateAsync,
+    isCreating: createMutation.isPending,
+    isUpdating: updateMutation.isPending,
+    isDeleting: deleteMutation.isPending,
+    refetch,
+  };
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/brandService.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/brandService.ts
new file mode 100644
index 000000000..5b5ddddb4
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/brandService.ts
@@ -0,0 +1,67 @@
+import chronicleInstance from "@/shared/services/chronicleInstance";
+import {
+  BrandingResponse,
+  BrandingParam,
+  BrandingResponseAPI,
+  BrandingParamAPI,
+} from "../types/brandTypes";
+import axiosInstance from "@/shared/services/axiosInstance";
+import { withHeaders } from "@/record-management/services/api/withHeaders";
+
+export async function getBrandingItems(
+  siteId: string,
+  take?: number,
+): Promise<BrandingResponseAPI> {
+  try {
+    const response = await axiosInstance.get(`/site-settings/list/${siteId}`, {
+      headers: withHeaders(),
+      params: {
+        take: take,
+      },
+    });
+
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+export async function getBrandingItemsUsingDomain(
+  siteId: string,
+  take?: number,
+): Promise<BrandingResponseAPI> {
+  try {
+    const response = await axiosInstance.get(
+      `/site-settings/list/key/${siteId}`,
+      {
+        params: {
+          take: take,
+        },
+      },
+    );
+
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function updateBrandingItem(
+  id: string,
+  data: BrandingParamAPI[],
+): Promise<BrandingResponse> {
+  const response = await axiosInstance.put(`/site-settings/${id}`, data, {
+    headers: withHeaders(),
+  });
+
+  return response.data;
+}
+
+export async function createBrandingItem(
+  data: BrandingParamAPI[],
+): Promise<BrandingResponse> {
+  const response = await axiosInstance.post(`/site-settings/bulk`, data, {
+    headers: withHeaders(),
+  });
+
+  return response.data;
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/contactUsService.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/contactUsService.ts
new file mode 100644
index 000000000..3952b976c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/contactUsService.ts
@@ -0,0 +1,46 @@
+import chronicleInstance from "@/shared/services/chronicleInstance";
+import { ContactUsParams } from "../hooks/useContactUs";
+import {
+  CreateContactUsPayload,
+  ContactUsItem,
+  ContactUsResponse,
+} from "../types/contactUs";
+
+export const ContactUsService = {
+  async createItem(data: CreateContactUsPayload): Promise<ContactUsItem> {
+    const response = await chronicleInstance.post("/contact-us", data, {
+      headers: { "x-tenant-id": "adf98293-41ba-4bda-bdb4-70e30a70c1b7" },
+    });
+    return response.data;
+  },
+
+  async getItems(params: ContactUsParams): Promise<ContactUsResponse> {
+    const response = await chronicleInstance.get(`/contact-us/list`, {
+      params,
+
+      headers: { "x-tenant-id": "adf98293-41ba-4bda-bdb4-70e30a70c1b7" },
+    });
+    return response.data;
+  },
+
+  async getItem(id: string): Promise<ContactUsItem> {
+    const response = await chronicleInstance.get(`/contact-us/${id}`);
+    return response.data;
+  },
+
+  async updateItem(
+    id: string,
+    data: Partial<CreateContactUsPayload>
+  ): Promise<ContactUsItem> {
+    // Add tenant ID to the payload
+    const payload = {
+      ...data,
+    };
+    const response = await chronicleInstance.put(`/contact-us/${id}`, payload);
+    return response.data;
+  },
+
+  async deleteItem(id: string): Promise<void> {
+    await chronicleInstance.delete(`/contact-us/${id}`);
+  },
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/goalService.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/goalService.ts
new file mode 100644
index 000000000..b2d276fbd
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/goalService.ts
@@ -0,0 +1,106 @@
+import chronicleInstance from "@/shared/services/chronicleInstance";
+import { bufferContentValidator, securityLogger } from "@/shared/services/validation";
+import { presignedAxios } from "@/shared/services/presignedAxios";
+
+export const GoalService = {
+  async uploadImage(file: File, uploadUrl: string) {
+    if (!uploadUrl) throw new Error("Upload URL is undefined.");
+
+    // Validate file buffer against declared MIME type
+    const validationResult = await bufferContentValidator.validateMimeType(
+      new Uint8Array(await file.slice(0, 512).arrayBuffer()) as any,
+      file.type
+    );
+
+    if (!validationResult.isValid) {
+      // Log validation failure
+      await securityLogger.logValidationEvent({
+        timestamp: new Date(),
+        fileSize: file.size,
+        fileName: file.name,
+        declaredMime: file.type,
+        detectedMime: validationResult.detectedMime,
+        validationResult: 'mismatch',
+        errorDetails: validationResult.error,
+        module: 'user-management',
+        endpoint: '/goal/upload',
+      });
+
+      throw new Error(validationResult.error || 'File validation failed');
+    }
+
+    // Check if MIME type is allowed (images only)
+    const allowedMimeTypes = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
+    if (!bufferContentValidator.isAllowedMimeType(file.type, allowedMimeTypes)) {
+      await securityLogger.logValidationEvent({
+        timestamp: new Date(),
+        fileSize: file.size,
+        fileName: file.name,
+        declaredMime: file.type,
+        detectedMime: validationResult.detectedMime,
+        validationResult: 'error',
+        errorDetails: `File type ${file.type} is not allowed. Only images are allowed.`,
+        module: 'user-management',
+        endpoint: '/goal/upload',
+      });
+
+      throw new Error(`File type ${file.type} is not allowed. Only images are allowed.`);
+    }
+
+    // Log validation success
+    await securityLogger.logValidationEvent({
+      timestamp: new Date(),
+      fileSize: file.size,
+      fileName: file.name,
+      declaredMime: file.type,
+      detectedMime: validationResult.detectedMime,
+      validationResult: 'success',
+      module: 'user-management',
+      endpoint: '/goal/upload',
+    });
+
+    return presignedAxios.put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    });
+  },
+
+  async updateUploadStatus(
+    id: string,
+    uploadedSuccessfully: boolean
+  ): Promise<void> {
+    await chronicleInstance.patch(
+      `/goal/${id}/upload-status`,
+      { uploadedSuccessfully },
+      {
+        headers: { "x-tenant-id": "adf98293-41ba-4bda-bdb4-70e30a70c1b7" },
+      }
+    );
+  },
+
+  // Stub methods for incomplete branch - these should be implemented in the main branch
+  async getItem(id: string): Promise<any> {
+    throw new Error('Not implemented in this branch');
+  },
+
+  async getItems(params: any): Promise<any> {
+    throw new Error('Not implemented in this branch');
+  },
+
+  async createItem(payload: any): Promise<any> {
+    throw new Error('Not implemented in this branch');
+  },
+
+  async updateItem(id: string, data: any): Promise<any> {
+    throw new Error('Not implemented in this branch');
+  },
+
+  async deleteItem(id: string): Promise<void> {
+    throw new Error('Not implemented in this branch');
+  },
+
+  async changeStatus(id: string): Promise<void> {
+    throw new Error('Not implemented in this branch');
+  },
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/messageService.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/messageService.ts
new file mode 100644
index 000000000..9086aba53
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/messageService.ts
@@ -0,0 +1,102 @@
+import chronicleInstance from "@/shared/services/chronicleInstance";
+import { bufferContentValidator, securityLogger } from "@/shared/services/validation";
+import { presignedAxios } from "@/shared/services/presignedAxios";
+
+export const MessageService = {
+  async uploadImage(file: File, uploadUrl: string) {
+    if (!uploadUrl) throw new Error("Upload URL is undefined.");
+
+    // Validate file buffer against declared MIME type
+    const validationResult = await bufferContentValidator.validateMimeType(
+      new Uint8Array(await file.slice(0, 512).arrayBuffer()) as any,
+      file.type
+    );
+
+    if (!validationResult.isValid) {
+      // Log validation failure
+      await securityLogger.logValidationEvent({
+        timestamp: new Date(),
+        fileSize: file.size,
+        fileName: file.name,
+        declaredMime: file.type,
+        detectedMime: validationResult.detectedMime,
+        validationResult: 'mismatch',
+        errorDetails: validationResult.error,
+        module: 'user-management',
+        endpoint: '/staff/upload',
+      });
+
+      throw new Error(validationResult.error || 'File validation failed');
+    }
+
+    // Check if MIME type is allowed (images only)
+    const allowedMimeTypes = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
+    if (!bufferContentValidator.isAllowedMimeType(file.type, allowedMimeTypes)) {
+      await securityLogger.logValidationEvent({
+        timestamp: new Date(),
+        fileSize: file.size,
+        fileName: file.name,
+        declaredMime: file.type,
+        detectedMime: validationResult.detectedMime,
+        validationResult: 'error',
+        errorDetails: `File type ${file.type} is not allowed. Only images are allowed.`,
+        module: 'user-management',
+        endpoint: '/staff/upload',
+      });
+
+      throw new Error(`File type ${file.type} is not allowed. Only images are allowed.`);
+    }
+
+    // Log validation success
+    await securityLogger.logValidationEvent({
+      timestamp: new Date(),
+      fileSize: file.size,
+      fileName: file.name,
+      declaredMime: file.type,
+      detectedMime: validationResult.detectedMime,
+      validationResult: 'success',
+      module: 'user-management',
+      endpoint: '/staff/upload',
+    });
+
+    return presignedAxios.put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    });
+  },
+
+  async updateUploadStatus(
+    id: string,
+    uploadedSuccessfully: boolean
+  ): Promise<void> {
+    await chronicleInstance.patch(
+      `/staff/${id}/upload-status`,
+      { uploadedSuccessfully },
+      {
+        headers: { "x-tenant-id": "adf98293-41ba-4bda-bdb4-70e30a70c1b7" },
+      }
+    );
+  },
+
+  // Stub methods for incomplete branch - these should be implemented in the main branch
+  async getItem(id: string): Promise<any> {
+    throw new Error('Not implemented in this branch');
+  },
+
+  async getItems(params: any): Promise<any> {
+    throw new Error('Not implemented in this branch');
+  },
+
+  async createItem(payload: any): Promise<any> {
+    throw new Error('Not implemented in this branch');
+  },
+
+  async updateItem(id: string, data: any): Promise<any> {
+    throw new Error('Not implemented in this branch');
+  },
+
+  async deleteItem(id: string): Promise<void> {
+    throw new Error('Not implemented in this branch');
+  },
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/modulesService.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/modulesService.ts
new file mode 100644
index 000000000..5e548b923
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/modulesService.ts
@@ -0,0 +1,46 @@
+import chronicleInstance from "@/shared/services/chronicleInstance";
+import { ModulesParams } from "../hooks/useModules";
+import {
+  CreateModulesPayload,
+  ModulesItem,
+  ModulesResponse,
+} from "../types/modulesType";
+
+export const ModulesService = {
+  async createItem(data: CreateModulesPayload): Promise<ModulesItem> {
+    const response = await chronicleInstance.post("/link", data, {
+      headers: { "x-tenant-id": "adf98293-41ba-4bda-bdb4-70e30a70c1b7" },
+    });
+    return response.data;
+  },
+
+  async getItems(params: ModulesParams): Promise<ModulesResponse> {
+    const response = await chronicleInstance.get(`/link/list`, {
+      params,
+
+      headers: { "x-tenant-id": "adf98293-41ba-4bda-bdb4-70e30a70c1b7" },
+    });
+    return response.data;
+  },
+
+  async getItem(id: string): Promise<ModulesItem> {
+    const response = await chronicleInstance.get(`/link/${id}`);
+    return response.data;
+  },
+
+  async updateItem(
+    id: string,
+    data: Partial<CreateModulesPayload>
+  ): Promise<ModulesItem> {
+    // Add tenant ID to the payload
+    const payload = {
+      ...data,
+    };
+    const response = await chronicleInstance.put(`/link/${id}`, payload);
+    return response.data;
+  },
+
+  async deleteItem(id: string): Promise<void> {
+    await chronicleInstance.delete(`/link/${id}`);
+  },
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/newsCategory.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/newsCategory.ts
new file mode 100644
index 000000000..51050fb16
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/newsCategory.ts
@@ -0,0 +1,109 @@
+import chronicleInstance from "@/shared/services/chronicleInstance";
+import { NewsCategoryParams } from "../hooks/useNewsCategory";
+import {
+  CreateNewsCategoryPayload,
+  NewsCategoryItem,
+  NewsCategoryResponse,
+} from "../types/newsCategoryType";
+import { presignedAxios } from "@/shared/services/presignedAxios";
+
+// Helper function to normalize API response data
+const normalizeNewsCategoryItem = (item: any): NewsCategoryItem => {
+  return {
+    ...item,
+    // Ensure consistent property names (handle both cases)
+    NewsCategoryTitle: item.NewsCategoryTitle ||
+      item.newsCategoryTitle || { am: "", en: "" },
+    NewsCategoryDescription: item.NewsCategoryDescription ||
+      item.newsCategoryDescription || { am: "", en: "" },
+  };
+};
+
+export const NewsCategoryService = {
+  async createItem(data: CreateNewsCategoryPayload): Promise<NewsCategoryItem> {
+    const response = await chronicleInstance.post("/news-category", data, {
+      headers: { "x-tenant-id": "adf98293-41ba-4bda-bdb4-70e30a70c1b7" },
+    });
+    return normalizeNewsCategoryItem(response.data);
+  },
+
+  async getItems(params: NewsCategoryParams): Promise<NewsCategoryResponse> {
+    const response = await chronicleInstance.get(
+      `/news-category/list-with-presigned`,
+      {
+        params,
+        headers: { "x-tenant-id": "adf98293-41ba-4bda-bdb4-70e30a70c1b7" },
+      }
+    );
+    return {
+      ...response.data,
+      items: response.data.items?.map(normalizeNewsCategoryItem) || [],
+    };
+  },
+
+  async getItem(id: string): Promise<NewsCategoryItem> {
+    // Use the list endpoint to get single item with presigned URL
+    const response = await chronicleInstance.get(`/news-category/${id}`, {
+      headers: { "x-tenant-id": "adf98293-41ba-4bda-bdb4-70e30a70c1b7" },
+    });
+    return response.data;
+  },
+
+  async updateItem(
+    id: string,
+    data: Partial<CreateNewsCategoryPayload>
+  ): Promise<NewsCategoryItem> {
+    // Add tenant ID to the payload
+    const payload = {
+      ...data,
+    };
+    const response = await chronicleInstance.put(
+      `/news-category/${id}`,
+      payload,
+      { headers: { "x-tenant-id": "adf98293-41ba-4bda-bdb4-70e30a70c1b7" } }
+    );
+    return normalizeNewsCategoryItem(response.data);
+  },
+
+  async deleteItem(id: string): Promise<void> {
+    await chronicleInstance.delete(`/news-category/${id}`, {
+      headers: { "x-tenant-id": "adf98293-41ba-4bda-bdb4-70e30a70c1b7" },
+    });
+  },
+
+  async changeStatus(id: string): Promise<NewsCategoryItem> {
+    const response = await chronicleInstance.put(
+      `/news-category/change-status/${id}`,
+      {
+        isCurrent: true,
+      },
+      {
+        headers: { "x-tenant-id": "adf98293-41ba-4bda-bdb4-70e30a70c1b7" },
+      }
+    );
+    return normalizeNewsCategoryItem(response.data);
+  },
+
+  async uploadImage(file: File, uploadUrl: string) {
+    if (!uploadUrl) throw new Error("Upload URL is undefined.");
+
+    return presignedAxios.put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type, // only include this if your backend signed for it
+      },
+    });
+  },
+
+  async updateUploadStatus(
+    id: string,
+    uploadedSuccessfully: boolean
+  ): Promise<void> {
+    await chronicleInstance.patch(
+      `/news-category/${id}/upload-status`,
+      { uploadedSuccessfully },
+      {
+        headers: { "x-tenant-id": "adf98293-41ba-4bda-bdb4-70e30a70c1b7" },
+      }
+    );
+  },
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/newsCategoryService.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/newsCategoryService.ts
new file mode 100644
index 000000000..726d07e67
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/newsCategoryService.ts
@@ -0,0 +1,81 @@
+import chronicleInstance from "@/shared/services/chronicleInstance";
+import { bufferContentValidator, securityLogger } from "@/shared/services/validation";
+import { presignedAxios } from "@/shared/services/presignedAxios";
+
+export const NewsCategoryService = {
+  async uploadImage(file: File, uploadUrl: string) {
+    if (!uploadUrl) throw new Error("Upload URL is undefined.");
+
+    // Validate file buffer against declared MIME type
+    const validationResult = await bufferContentValidator.validateMimeType(
+      new Uint8Array(await file.slice(0, 512).arrayBuffer()) as any,
+      file.type
+    );
+
+    if (!validationResult.isValid) {
+      // Log validation failure
+      await securityLogger.logValidationEvent({
+        timestamp: new Date(),
+        fileSize: file.size,
+        fileName: file.name,
+        declaredMime: file.type,
+        detectedMime: validationResult.detectedMime,
+        validationResult: 'mismatch',
+        errorDetails: validationResult.error,
+        module: 'user-management',
+        endpoint: '/news-category/upload',
+      });
+
+      throw new Error(validationResult.error || 'File validation failed');
+    }
+
+    // Check if MIME type is allowed (images only)
+    const allowedMimeTypes = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
+    if (!bufferContentValidator.isAllowedMimeType(file.type, allowedMimeTypes)) {
+      await securityLogger.logValidationEvent({
+        timestamp: new Date(),
+        fileSize: file.size,
+        fileName: file.name,
+        declaredMime: file.type,
+        detectedMime: validationResult.detectedMime,
+        validationResult: 'error',
+        errorDetails: `File type ${file.type} is not allowed. Only images are allowed.`,
+        module: 'user-management',
+        endpoint: '/news-category/upload',
+      });
+
+      throw new Error(`File type ${file.type} is not allowed. Only images are allowed.`);
+    }
+
+    // Log validation success
+    await securityLogger.logValidationEvent({
+      timestamp: new Date(),
+      fileSize: file.size,
+      fileName: file.name,
+      declaredMime: file.type,
+      detectedMime: validationResult.detectedMime,
+      validationResult: 'success',
+      module: 'user-management',
+      endpoint: '/news-category/upload',
+    });
+
+    return presignedAxios.put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    });
+  },
+
+  async updateUploadStatus(
+    id: string,
+    uploadedSuccessfully: boolean
+  ): Promise<void> {
+    await chronicleInstance.patch(
+      `/news-category/${id}/upload-status`,
+      { uploadedSuccessfully },
+      {
+        headers: { "x-tenant-id": "adf98293-41ba-4bda-bdb4-70e30a70c1b7" },
+      }
+    );
+  },
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/newsService.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/newsService.ts
new file mode 100644
index 000000000..db614f81a
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/newsService.ts
@@ -0,0 +1,107 @@
+import chronicleInstance from "@/shared/services/chronicleInstance";
+import { NewsParams } from "../hooks/useNews";
+import { CreateNewsPayload, NewsItem, NewsResponse } from "../types/newsTypes";
+import { XSSUploadValidator } from "@/shared/services/validation";
+import { presignedAxios } from "@/shared/services/presignedAxios";
+
+// Helper function to normalize API response data
+const normalizeNewsItem = (item: any): NewsItem => {
+  return {
+    ...item,
+    // Ensure consistent property names (handle both cases)
+    title: item.title || { am: "", en: "" },
+    subTitle: item.subTitle || { am: "", en: "" },
+    body: item.body || { am: "", en: "" },
+  };
+};
+
+export const NewsService = {
+  async createItem(data: CreateNewsPayload): Promise<NewsItem> {
+    const response = await chronicleInstance.post("/news", data, {
+      headers: { "x-tenant-id": "adf98293-41ba-4bda-bdb4-70e30a70c1b7" },
+    });
+    return normalizeNewsItem(response.data);
+  },
+
+  async getItems(params: NewsParams): Promise<NewsResponse> {
+    const response = await chronicleInstance.get(`/news/list-with-presigned`, {
+      params,
+      headers: { "x-tenant-id": "adf98293-41ba-4bda-bdb4-70e30a70c1b7" },
+    });
+    return {
+      ...response.data,
+      items: response.data.items?.map(normalizeNewsItem) || [],
+    };
+  },
+
+  async getItem(id: string): Promise<NewsItem> {
+    // Use the list endpoint to get single item with presigned URL
+    const response = await chronicleInstance.get(`/news/list-with-presigned`, {
+      params: { id },
+      headers: { "x-tenant-id": "adf98293-41ba-4bda-bdb4-70e30a70c1b7" },
+    });
+    // Return the first item from the list, normalized
+    const item = response.data.items?.[0] || response.data;
+    return normalizeNewsItem(item);
+  },
+
+  async updateItem(
+    id: string,
+    data: Partial<CreateNewsPayload>
+  ): Promise<NewsItem> {
+    const payload = {
+      ...data,
+    };
+    const response = await chronicleInstance.put(`/news/${id}`, payload, {
+      headers: { "x-tenant-id": "adf98293-41ba-4bda-bdb4-70e30a70c1b7" },
+    });
+    return normalizeNewsItem(response.data);
+  },
+
+  async deleteItem(id: string): Promise<void> {
+    await chronicleInstance.delete(`/news/${id}`, {
+      headers: { "x-tenant-id": "adf98293-41ba-4bda-bdb4-70e30a70c1b7" },
+    });
+  },
+
+  async uploadImage(file: File, uploadUrl: string) {
+    if (!uploadUrl) throw new Error("Upload URL is undefined.");
+
+    // Validate file for XSS threats
+    const validationResult = await XSSUploadValidator.validateFileForUpload(file, {
+      allowedMimeTypes: ['image/png', 'image/jpeg', 'image/gif', 'image/webp'],
+      allowedExtensions: ['.png', '.jpg', '.jpeg', '.gif', '.webp'],
+      maxSizeMB: 10,
+      uploadContext: 'signature',
+    });
+
+    if (!validationResult.isValid) {
+      throw new Error(
+        validationResult.clientValidation.fileName?.error ||
+        validationResult.clientValidation.extension?.error ||
+        validationResult.clientValidation.mimeType?.error ||
+        validationResult.clientValidation.size?.error ||
+        'File validation failed'
+      );
+    }
+
+    return presignedAxios.put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    });
+  },
+
+  async updateUploadStatus(
+    id: string,
+    uploadedSuccessfully: boolean
+  ): Promise<void> {
+    await chronicleInstance.patch(
+      `/news/${id}/upload-status`,
+      { uploadedSuccessfully },
+      {
+        headers: { "x-tenant-id": "adf98293-41ba-4bda-bdb4-70e30a70c1b7" },
+      }
+    );
+  },
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/socialMediaService.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/socialMediaService.ts
new file mode 100644
index 000000000..3716aa780
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/socialMediaService.ts
@@ -0,0 +1,46 @@
+import chronicleInstance from "@/shared/services/chronicleInstance";
+import { SocialMediaParams } from "../hooks/useSocialMedia";
+import {
+  CreateSocialMediaPayload,
+  SocialMediaItem,
+  SocialMediaResponse,
+} from "../types/socialMediaType";
+
+export const SocialMediaService = {
+  async createItem(data: CreateSocialMediaPayload): Promise<SocialMediaItem> {
+    const response = await chronicleInstance.post("/social-media", data, {
+      headers: { "x-tenant-id": "adf98293-41ba-4bda-bdb4-70e30a70c1b7" },
+    });
+    return response.data;
+  },
+
+  async getItems(params: SocialMediaParams): Promise<SocialMediaResponse> {
+    const response = await chronicleInstance.get(`/social-media/list`, {
+      params,
+
+      headers: { "x-tenant-id": "adf98293-41ba-4bda-bdb4-70e30a70c1b7" },
+    });
+    return response.data;
+  },
+
+  async getItem(id: string): Promise<SocialMediaItem> {
+    const response = await chronicleInstance.get(`/social-media/${id}`);
+    return response.data;
+  },
+
+  async updateItem(
+    id: string,
+    data: Partial<CreateSocialMediaPayload>
+  ): Promise<SocialMediaItem> {
+    // Add tenant ID to the payload
+    const payload = {
+      ...data,
+    };
+    const response = await chronicleInstance.put(`/social-media/${id}`, payload);
+    return response.data;
+  },
+
+  async deleteItem(id: string): Promise<void> {
+    await chronicleInstance.delete(`/social-media/${id}`);
+  },
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/templateService.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/templateService.ts
new file mode 100644
index 000000000..fdaa54197
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/templateService.ts
@@ -0,0 +1,191 @@
+import axios from "axios";
+import {
+  TemplateResource,
+  TemplateResponse,
+  ResourceTypeResponse,
+  CreateTemplatePayload,
+} from "../TemplateConfiguration/types/templateTypes";
+import { XSSUploadValidator } from "@/shared/services/validation";
+import { presignedAxios } from "@/shared/services/presignedAxios";
+import Cookies from "js-cookie";
+import { getEnvUrl } from "@/shared/config/env";
+
+const TENANT_ID = "adf98293-41ba-4bda-bdb4-70e30a70c1b7";
+const API_URL = getEnvUrl("VITE_RECORD_API_URL");
+
+// Create axios instance for template API
+const apiInstance = axios.create({
+  baseURL: API_URL,
+});
+
+// Add authorization interceptor
+apiInstance.interceptors.request.use((config) => {
+  const token = Cookies.get("auth-token");
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  config.headers["x-tenant-id"] = TENANT_ID;
+  return config;
+});
+
+const normalizeTemplateItem = (
+  item: Record<string, unknown>,
+): TemplateResource => {
+  return {
+    ...item,
+    name: (item.name as Record<string, string>) || { am: "", en: "" },
+    description: (item.description as Record<string, string>) || {
+      am: "",
+      en: "",
+    },
+  } as TemplateResource;
+};
+
+export const TemplateService = {
+  async getResourceTypes(): Promise<ResourceTypeResponse> {
+    const response = await apiInstance.get("/resource_types");
+    return response.data;
+  },
+
+  async getTemplates(
+    params?: Record<string, unknown>,
+  ): Promise<TemplateResponse> {
+    const { resourceTypeId, search, ...otherParams } = params || {};
+
+    // resourceTypeId is required for the API endpoint
+    if (!resourceTypeId) {
+      return {
+        count: 0,
+        items: [],
+      };
+    }
+
+    const response = await apiInstance.get(
+      `/resources/list-with-presigned/${resourceTypeId}`,
+      { params: otherParams },
+    );
+
+    let items = (response.data.items || []).map(normalizeTemplateItem);
+
+    // Client-side filtering by search
+    if (search && typeof search === "string") {
+      const searchLower = search.toLowerCase();
+      items = items.filter(
+        (item: TemplateResource) =>
+          item.name?.en?.toLowerCase().includes(searchLower) ||
+          item.name?.am?.toLowerCase().includes(searchLower) ||
+          item.description?.en?.toLowerCase().includes(searchLower) ||
+          item.description?.am?.toLowerCase().includes(searchLower),
+      );
+    }
+
+    return {
+      count: items.length,
+      items,
+    };
+  },
+
+  async getTemplate(id: string): Promise<TemplateResource> {
+    const response = await apiInstance.get(
+      `/resources/with-presigned?id=${id}`,
+    );
+    return normalizeTemplateItem(response.data);
+  },
+
+  async getTemplateWithPresigned(
+    resourceTypeId: string,
+    templateId: string,
+  ): Promise<TemplateResource> {
+    try {
+      const response = await apiInstance.get(
+        `/resources/list-with-presigned/${resourceTypeId}`,
+      );
+      const items = (response.data.items || []).map(normalizeTemplateItem);
+      const template = items.find(
+        (item: TemplateResource) => item.id === templateId,
+      );
+      if (!template) {
+        throw new Error("Template not found");
+      }
+      return template;
+    } catch (error: unknown) {
+      const axiosError = error as Record<string, unknown>;
+      // If the file hasn't been uploaded successfully, try to get basic template info
+      if ((axiosError.response as Record<string, unknown>)?.status === 400) {
+        try {
+          const response = await apiInstance.get(
+            `/resources/with-presigned?id=${templateId}`,
+          );
+          return normalizeTemplateItem(response.data);
+        } catch {
+          throw error;
+        }
+      }
+      throw error;
+    }
+  },
+
+  async createTemplate(data: CreateTemplatePayload): Promise<TemplateResource> {
+    const response = await apiInstance.post("/resources", data);
+    return normalizeTemplateItem(response.data);
+  },
+
+  async updateTemplate(
+    id: string,
+    data: Partial<CreateTemplatePayload>,
+  ): Promise<TemplateResource> {
+    const response = await apiInstance.put(`/resources/${id}`, data);
+    return normalizeTemplateItem(response.data);
+  },
+
+  async deleteTemplate(id: string): Promise<void> {
+    await apiInstance.delete(`/resources/${id}`);
+  },
+
+  async uploadFile(file: File, uploadUrl?: string) {
+    if (!uploadUrl) {
+      console.warn("No upload URL provided, skipping file upload");
+      return null;
+    }
+
+    const validationResult = await XSSUploadValidator.validateFileForUpload(
+      file,
+      {
+        allowedMimeTypes: [
+          "image/png",
+          "image/jpeg",
+          "image/gif",
+          "image/webp",
+          "application/pdf",
+        ],
+        allowedExtensions: [".png", ".jpg", ".jpeg", ".gif", ".webp", ".pdf"],
+        maxSizeMB: 50,
+        uploadContext: "signature",
+      },
+    );
+
+    if (!validationResult.isValid) {
+      throw new Error(
+        validationResult.clientValidation.fileName?.error ||
+          validationResult.clientValidation.extension?.error ||
+          validationResult.clientValidation.mimeType?.error ||
+          validationResult.clientValidation.size?.error ||
+          "File validation failed",
+      );
+    }
+    return presignedAxios.put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    });
+  },
+
+  async updateUploadStatus(
+    id: string,
+    uploadedSuccessfully: boolean,
+  ): Promise<void> {
+    await apiInstance.put(`/resources/change-status/${id}`, {
+      isCurrent: uploadedSuccessfully,
+    });
+  },
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/themeService.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/themeService.ts
new file mode 100644
index 000000000..da5d5ade6
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/themeService.ts
@@ -0,0 +1,81 @@
+import chronicleInstance from "@/shared/services/chronicleInstance";
+import { ThemeParams } from "../hooks/useTheme";
+import { CreateThemePayload, ThemeItem, ThemeResponse } from "../types/themeTypes";
+import { XSSUploadValidator } from "@/shared/services/validation";
+import { presignedAxios } from "@/shared/services/presignedAxios";
+
+export const ThemeService = {
+  async createItem(data: CreateThemePayload): Promise<ThemeItem[]> {
+    const response = await chronicleInstance.post("/theme/bulk", data,{ headers: { "x-tenant-id": "adf98293-41ba-4bda-bdb4-70e30a70c1b7" }});
+    return response.data;
+  },
+
+  async getItems(
+    params: ThemeParams
+  ): Promise<ThemeResponse> {
+    const response = await chronicleInstance.get(`/theme/list-with-presigned`, {
+      params,
+      headers: { "x-tenant-id": "adf98293-41ba-4bda-bdb4-70e30a70c1b7" },
+    
+    });
+    return response.data;
+  },
+
+  async getItem(id: string): Promise<ThemeItem> {
+    const response = await chronicleInstance.get(
+      `/theme/list-with-presigned/${id}`
+    );
+    return response.data;
+  },
+
+
+  async deleteItem(id: string): Promise<void> {
+    await chronicleInstance.delete(`/theme/${id}`);
+  },
+  async updateUploadStatus(
+    resourceId: string,
+    id: string
+  ): Promise<ThemeItem> {
+    const response = await chronicleInstance.patch(`/theme/${id}/upload-status`, {
+      id: id,
+      parentId: resourceId,
+      uploadedSuccessfully: true,
+    });
+    return response.data;
+  },
+  async changeStatus(id: string): Promise<ThemeItem> {
+    const response = await chronicleInstance.put(`/theme/change-status/${id}`, {
+      isCurrent: true,
+    });
+    return response.data;
+  },
+
+  async uploadImage(file: File, uploadUrl: string) {
+    if (!uploadUrl) throw new Error("Upload URL is undefined.");
+
+    // Validate file for XSS threats
+    const validationResult = await XSSUploadValidator.validateFileForUpload(file, {
+      allowedMimeTypes: ['image/png', 'image/jpeg', 'image/gif', 'image/webp'],
+      allowedExtensions: ['.png', '.jpg', '.jpeg', '.gif', '.webp'],
+      maxSizeMB: 10,
+      uploadContext: 'signature',
+    });
+
+    if (!validationResult.isValid) {
+      throw new Error(
+        validationResult.clientValidation.fileName?.error ||
+        validationResult.clientValidation.extension?.error ||
+        validationResult.clientValidation.mimeType?.error ||
+        validationResult.clientValidation.size?.error ||
+        'File validation failed'
+      );
+    }
+
+    return presignedAxios.put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    });
+  }
+
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/visionService.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/visionService.ts
new file mode 100644
index 000000000..edce3d653
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/services/visionService.ts
@@ -0,0 +1,46 @@
+import chronicleInstance from "@/shared/services/chronicleInstance";
+import { VisionParams } from "../hooks/useVision";
+import {
+  CreateVisionPayload,
+  VisionItem,
+  VisionResponse,
+} from "../types/visionType";
+
+export const VisionService = {
+  async createItem(data: CreateVisionPayload): Promise<VisionItem> {
+    const response = await chronicleInstance.post("/vision", data, {
+      headers: { "x-tenant-id": "adf98293-41ba-4bda-bdb4-70e30a70c1b7" },
+    });
+    return response.data;
+  },
+
+  async getItems(params: VisionParams): Promise<VisionResponse> {
+    const response = await chronicleInstance.get(`/vision/list`, {
+      params,
+
+      headers: { "x-tenant-id": "adf98293-41ba-4bda-bdb4-70e30a70c1b7" },
+    });
+    return response.data;
+  },
+
+  async getItem(id: string): Promise<VisionItem> {
+    const response = await chronicleInstance.get(`/vision/${id}`);
+    return response.data;
+  },
+
+  async updateItem(
+    id: string,
+    data: Partial<CreateVisionPayload>
+  ): Promise<VisionItem> {
+    // Add tenant ID to the payload
+    const payload = {
+      ...data,
+    };
+    const response = await chronicleInstance.put(`/vision/${id}`, payload);
+    return response.data;
+  },
+
+  async deleteItem(id: string): Promise<void> {
+    await chronicleInstance.delete(`/vision/${id}`);
+  },
+};
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/brandTypes.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/brandTypes.ts
new file mode 100644
index 000000000..1f4e8e14c
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/brandTypes.ts
@@ -0,0 +1,104 @@
+export interface BrandingResponseAPI {
+  count: number;
+  items: BrandingResponseItems[];
+}
+export interface Image {
+  fileInfo?: fileInfo;
+  presigned?: any;
+}
+export interface Socials {
+  facebook?: string;
+  twitter?: string;
+  linkedin?: string;
+  instagram?: string;
+  youtube?: string;
+  telegram?: string;
+  tiktok?: string;
+  website?: string;
+}
+export type fileInfo = {
+  size?: number;
+  bucket?: string;
+  fileName?: string;
+  contentType?: string;
+  originalname?: string;
+  presigned?: string;
+};
+export interface ModuleConfig {
+  recordManagement: boolean;
+  siteManagement: boolean;
+  dms: boolean;
+  performance: boolean;
+  objective: boolean;
+  complaint: boolean;
+}
+export interface FooterData {
+  address: string;
+  phone: string;
+  email: string;
+}
+
+export interface BrandingResponse {
+  organizationName: {
+    am: string;
+    en: string;
+  };
+  logo: {
+    fileInfo: fileInfo;
+    presigned: string;
+  };
+  primaryColor: string;
+  secondaryColor?: string;
+  footerText: string;
+  footerData: FooterData;
+  socials: Socials;
+  welcomeMessage: string;
+  loginImage?: {
+    fileInfo: fileInfo;
+    presigned: string;
+  };
+  favicon?: {
+    fileInfo: fileInfo;
+    presigned: string;
+  };
+  moduleConfig?: Partial<ModuleConfig>;
+}
+export interface BrandingResponseItems {
+  id: any;
+  siteId?: string;
+  key?: string;
+  displayName?: string;
+  value?: string;
+  type?: string;
+  fileInfo?: fileInfo;
+  metadata?: fileInfo;
+  presigned?: string;
+}
+export interface BrandingParam {
+  organizationName: {
+    am: string;
+    en: string;
+  };
+  logo: Image;
+  primaryColor: string;
+  secondaryColor?: string;
+  footerText: string;
+  footerData: FooterData;
+  socials: Socials;
+  welcomeMessage: string;
+  loginImage?: Image;
+  favicon?: Image;
+  moduleConfig?: Partial<ModuleConfig>;
+}
+
+export interface BrandingParamAPI {
+  id?: string;
+  siteId: string;
+  key: string;
+  displayName: string;
+  value: string;
+  type: string;
+  fileInfo?: fileInfo;
+  metadata?: fileInfo;
+  presigned?: string;
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/contactUs.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/contactUs.ts
new file mode 100644
index 000000000..47da5cad9
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/contactUs.ts
@@ -0,0 +1,41 @@
+export interface CreateContactUsPayload {
+  id?: string;
+  type: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  value: string;
+  sortOrder?: number;
+  isActive: boolean;
+}
+
+export interface ContactUsItem {
+  amharicCreatedAt: any;
+  createdAt: string;
+  updatedAt: string;
+  id: string;
+  type: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  value: string;
+  sortOrder?: number;
+  isActive: boolean;
+}
+export interface ContactUsFormData {
+  nameEn: string;
+  nameAm: string;
+  value: string;
+  type: string;
+  isActive: boolean;
+}
+export interface ContactUsList {
+  label: string;
+  value: string;
+}
+export interface ContactUsResponse {
+  count: number;
+  items: ContactUsItem[];
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/goalType.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/goalType.ts
new file mode 100644
index 000000000..9cc40ef66
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/goalType.ts
@@ -0,0 +1,55 @@
+export interface CreateGoalPayload {
+  id?: string;
+  goalTitle: {
+    am: string;
+    en: string;
+  };
+  goalDescription: {
+    am: string;
+    en: string;
+  };
+  fileInfo?: {
+    fileName: string;
+    contentType: string;
+    size: number;
+    originalname: string;
+  };
+  sortOrder?: number;
+  isActive: boolean;
+}
+
+export interface GoalItem {
+  amharicCreatedAt: any;
+  createdAt: string;
+  updatedAt: string;
+  id: string;
+  goalTitle: {
+    am: string;
+    en: string;
+  };
+  goalDescription: {
+    am: string;
+    en: string;
+  };
+  fileInfo: {
+    fileName: string;
+    contentType: string;
+    size: number;
+    originalname: string;
+  };
+  sortOrder?: number;
+  isActive: false;
+  presigned?: string;
+}
+export interface GoalFormData {
+  GoalTitleEn: string;
+  GoalTitleAm: string;
+  GoalDescriptionAm: string;
+  GoalDescriptionEn: string;
+  image: FileList;
+  isActive: boolean;
+}
+export interface GoalResponse {
+  count: number;
+  items: GoalItem[];
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/messageTypes.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/messageTypes.ts
new file mode 100644
index 000000000..9ef625c28
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/messageTypes.ts
@@ -0,0 +1,62 @@
+export interface CreateMessagePayload {
+  id?: string;
+  messageTitle: {
+    am: string;
+    en: string;
+  };
+  messageContent: {
+    am: string;
+    en: string;
+  };
+  employeeId: string;
+  fileInfo?: {
+    fileName: string;
+    contentType: string;
+    size: number;
+    originalname: string;
+  };
+  sortOrder?: number;
+  isActive: boolean;
+  staffType: string;
+}
+
+export interface MessageItem {
+  amharicCreatedAt: any;
+  createdAt: string;
+  updatedAt: string;
+  id: string;
+  messageTitle: {
+    am: string;
+    en: string;
+  };
+  messageContent: {
+    am: string;
+    en: string;
+  };
+  employeeId: string;
+  fileInfo: {
+    fileName: string;
+    contentType: string;
+    size: number;
+    originalname: string;
+  };
+  sortOrder?: number;
+  isActive: false;
+  presigned?: string;
+  staffType?: string;
+  employee?: any;
+}
+export interface MessageFormData {
+  messageTitleEn: string;
+  messageTitleAm: string;
+  messageContentAm: string;
+  messageContentEn: string;
+  employeeId: string;
+  staffType: string;
+  image: FileList;
+  isActive: boolean;
+}
+export interface MessageResponse {
+  count: number;
+  items: MessageItem[];
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/modulesType.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/modulesType.ts
new file mode 100644
index 000000000..b8206b1cc
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/modulesType.ts
@@ -0,0 +1,44 @@
+export interface CreateModulesPayload {
+  id?: string;
+  label: {
+    am: string;
+    en: string;
+  };
+  description: {
+    am: string;
+    en: string;
+  };
+  link: string;
+  sortOrder?: number;
+  isActive: boolean;
+}
+
+export interface ModulesItem {
+  amharicCreatedAt: any;
+  createdAt: string;
+  updatedAt: string;
+  id: string;
+  label: {
+    am: string;
+    en: string;
+  };
+  description: {
+    am: string;
+    en: string;
+  };
+  link: string;
+  sortOrder?: number;
+  isActive: boolean;
+}
+export interface ModulesFormData {
+  labelEn: string;
+  labelAm: string;
+  descriptionEn: string;
+  descriptionAm: string;
+  link: string;
+  isActive: boolean;
+}
+export interface ModulesResponse {
+  count: number;
+  items: ModulesItem[];
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/newsCategoryType.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/newsCategoryType.ts
new file mode 100644
index 000000000..8b32632e3
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/newsCategoryType.ts
@@ -0,0 +1,58 @@
+export interface CreateNewsCategoryPayload {
+  id?: string;
+  newsCategoryTitle: {
+    am: string;
+    en: string;
+  };
+  newsCategoryDescription: {
+    am: string;
+    en: string;
+  };
+  fileInfo: {
+    fileName: string;
+    contentType: string;
+    size: number;
+    originalname: string;
+  };
+  sortOrder?: number;
+  isActive: boolean;
+  color?: string;
+}
+
+export interface NewsCategoryItem {
+  amharicCreatedAt: string;
+  createdAt: string;
+  updatedAt: string;
+  id: string;
+  newsCategoryTitle?: {
+    am: string;
+    en: string;
+  };
+  newsCategoryDescription?: {
+    am: string;
+    en: string;
+  };
+  fileInfo?: {
+    fileName: string;
+    contentType: string;
+    size: number;
+    originalname: string;
+  };
+  sortOrder?: number;
+  isActive: boolean;
+  presigned?: string;
+  color?: string;
+}
+export interface NewsCategoryFormData {
+  NewsCategoryTitleEn: string;
+  NewsCategoryTitleAm: string;
+  NewsCategoryDescriptionAm: string;
+  NewsCategoryDescriptionEn: string;
+  image: FileList;
+  isActive: boolean;
+  color: string;
+}
+export interface NewsCategoryResponse {
+  count: number;
+  items: NewsCategoryItem[];
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/newsTypes.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/newsTypes.ts
new file mode 100644
index 000000000..bf009880f
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/newsTypes.ts
@@ -0,0 +1,60 @@
+export interface CreateNewsPayload {
+  id?: string;
+  newsCategoryId: string;
+  title: {
+    am: string;
+    en: string;
+  };
+  subTitle: {
+    am: string;
+    en: string;
+  };
+  body: {
+    am: string;
+    en: string;
+  };
+  fileInfo?: {
+    fileName: string;
+    contentType: string;
+    size: number;
+    originalname: string;
+  };
+  isActive: boolean;
+  isFeatured: boolean;
+}
+
+export interface NewsItem {
+  amharicCreatedAt: any;
+  createdAt: string;
+  updatedAt: string;
+  id: string;
+  newsCategoryId: string;
+  title?: {
+    am: string;
+    en: string;
+  };
+  subTitle?: {
+    am: string;
+    en: string;
+  };
+  body?: {
+    am: string;
+    en: string;
+  };
+  fileInfo?: {
+    fileName: string;
+    contentType: string;
+    size: number;
+    originalname: string;
+  };
+  isActive: boolean;
+  isFeatured: boolean;
+  presigned?: string;
+  // Category information (populated from relation)
+  newsCategory?: any;
+}
+
+export interface NewsResponse {
+  count: number;
+  items: NewsItem[];
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/socialMediaType.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/socialMediaType.ts
new file mode 100644
index 000000000..eb6173c2e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/socialMediaType.ts
@@ -0,0 +1,42 @@
+export interface CreateSocialMediaPayload {
+  id?: string;
+  type: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  link: string;
+  sortOrder?: number;
+  isActive: boolean;
+}
+
+export interface SocialMediaItem {
+  amharicCreatedAt: any;
+  createdAt: string;
+  updatedAt: string;
+  id: string;
+  type: string;
+  name: {
+    am: string;
+    en: string;
+  };
+  link: string;
+  sortOrder?: number;
+  isActive: boolean;
+}
+export interface SocialMediaFormData {
+  nameEn: string;
+  nameAm: string;
+  link: string;
+  type: string;
+  isActive: boolean;
+}
+export interface socialMediaList {
+  label: string;
+  value: string;
+}
+
+export interface SocialMediaResponse {
+  count: number;
+  items: SocialMediaItem[];
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/themeTypes.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/themeTypes.ts
new file mode 100644
index 000000000..63187a47e
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/themeTypes.ts
@@ -0,0 +1,38 @@
+export interface CreateTheme {
+  id?: string;
+  type: string;
+  value: string;
+  fileInfo?: {
+    fileName: string;
+    contentType: string;
+    size: number;
+    originalname: string;
+  };
+  sortOrder?: number;
+  isActive: boolean;
+}
+
+export interface ThemeItem {
+  createdAt: string;
+  updatedAt: string;
+  id: string;
+  type: string;
+  value: string;
+  fileInfo?: {
+    fileName: string;
+    contentType: string;
+    size: number;
+    originalname: string;
+  };
+  presigned?: string;
+  sortOrder?: number;
+  isActive: false;
+  localizeValue?: any;
+}
+
+export interface ThemeResponse {
+  count: number;
+  items: ThemeItem[];
+  unit: any;
+}
+export type CreateThemePayload = CreateTheme[];
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/visionType.ts b/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/visionType.ts
new file mode 100644
index 000000000..ebeb0f2eb
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/types/visionType.ts
@@ -0,0 +1,41 @@
+export interface CreateVisionPayload {
+  id?: string;
+  visionTitle: {
+    am: string;
+    en: string;
+  };
+  visionDescription: {
+    am: string;
+    en: string;
+  };
+  sortOrder?: number;
+  isActive: boolean;
+}
+
+export interface VisionItem {
+  amharicCreatedAt: any;
+  createdAt: string;
+  updatedAt: string;
+  id: string;
+  visionTitle: {
+    am: string;
+    en: string;
+  };
+  visionDescription: {
+    am: string;
+    en: string;
+  };
+  sortOrder?: number;
+  isActive: false;
+}
+export interface VisionFormData {
+  visionTitleEn: string;
+  visionTitleAm: string;
+  visionDescriptionAm: string;
+  visionDescriptionEn: string;
+  isActive: boolean;
+}
+export interface VisionResponse {
+  count: number;
+  items: VisionItem[];
+}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/webManagement.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/webManagement.tsx
new file mode 100644
index 000000000..223952202
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/webManagement.tsx
@@ -0,0 +1,465 @@
+import { NavLink, Route, Routes, useLocation } from "react-router-dom";
+import {
+  Menu,
+  X,
+  MessageSquare,
+  Newspaper,
+  Goal,
+  Eye,
+  Camera as Instagram,
+  Palette,
+  Contact,
+  Link,
+  ChevronLeft,
+  ChevronRight,
+  LayoutGrid,
+  Settings,
+  ShieldAlert,
+  Home,
+} from "lucide-react";
+import { useAuth } from "@/shared/context/AuthContext";
+import { Messages } from "@/user-management/web-Management/LeadershipMessage/Messages";
+import { Goals } from "@/user-management/web-Management/Goals/Goals";
+import { Vision } from "@/user-management/web-Management/Vision/Vision";
+import { SocialMedia } from "@/user-management/web-Management/SocialMedia/SocialMedia";
+import { AddGoal } from "@/user-management/web-Management/Goals/AddGoal";
+import { AddVision } from "@/user-management/web-Management/Vision/AddVision";
+import { News } from "@/user-management/web-Management/News/News";
+import { ContactUs } from "@/user-management/web-Management/ContactUs/ContactUs";
+import { Modules } from "@/user-management/web-Management/Modules/Modules";
+import { NewsCategory } from "@/user-management/web-Management/NewsCategory/NewsCategory";
+import { AddNewsCategory } from "./NewsCategory/AddNewsCategory";
+import { EditNewsCategory } from "./NewsCategory/EditNewsCategory";
+import { AddNews } from "./News/AddNews";
+import { EditNews } from "./News/EditNews";
+import { useTranslation } from "react-i18next";
+import { useState, useEffect, useMemo } from "react";
+import { AddMessage } from "./LeadershipMessage/AddMessage";
+import { EditMessage } from "./LeadershipMessage/EditMessage";
+import { ViewMessage } from "./LeadershipMessage/ViewMessage";
+import { ViewGoal } from "./Goals/ViewGoal";
+import { EditGoal } from "./Goals/EditGoal";
+import { ViewVision } from "./Vision/ViewVision";
+import { EditVision } from "./Vision/EditVision";
+import { EditSocialMedia } from "./SocialMedia/EditSocialMedia";
+import { AddSocialMedia } from "./SocialMedia/AddSocialMedia";
+import { EditTheme } from "./Theme/EditTheme";
+import { AddContactUs } from "./ContactUs/AddContactUs";
+import { EditContactUs } from "./ContactUs/EditContactUs";
+import { AddModules } from "./Modules/AddModules";
+import { EditModules } from "./Modules/EditModules";
+import { TemplateConfigurationPage } from "./TemplateConfiguration/TemplateConfigurationPage";
+import { TemplateSettingValuePage } from "./TemplateSettingValues/TemplateSettingValuePage";
+// import { Branding } from "./Branding/Branding";
+import { cn } from "@/shared/lib/utils";
+
+interface MenuItem {
+  label: string;
+  href?: string;
+  icon: React.ReactNode;
+}
+
+interface MenuSection {
+  title: string;
+  items: MenuItem[];
+}
+
+export const WebManagementHomePage = () => {
+  const { user } = useAuth();
+  const { t } = useTranslation();
+  const location = useLocation();
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+
+  const menuSections: MenuSection[] = [
+    {
+      title: "menu.content",
+      items: [
+        {
+          label: "officeHead.title",
+          href: "/user-management/web-management/LeadershipMessage/LeadershipMessage",
+          icon: <MessageSquare className="h-4 w-4" />,
+        },
+        {
+          label: "Goals",
+          href: "/user-management/web-management/Goals/goals",
+          icon: <Goal className="h-4 w-4" />,
+        },
+        {
+          label: "Vision",
+          href: "/user-management/web-management/Vision/vision",
+          icon: <Eye className="h-4 w-4" />,
+        },
+        {
+          label: "nav.news",
+          href: "/user-management/web-management/News/news",
+          icon: <Newspaper className="h-4 w-4" />,
+        },
+        {
+          label: "newsCategory",
+          href: "/user-management/web-management/Category/Category",
+          icon: <LayoutGrid className="h-4 w-4" />,
+        },
+      ],
+    },
+    {
+      title: "menu.settingsAndConfig",
+      items: [
+        {
+          label: "modules",
+          href: "/user-management/web-management/Modules/Modules",
+          icon: <Link className="h-4 w-4" />,
+        },
+        {
+          label: "socialMedia",
+          href: "/user-management/web-management/SocialMedia/SocialMedia",
+          icon: <Instagram className="h-4 w-4" />,
+        },
+        {
+          label: "contactUs",
+          href: "/user-management/web-management/ContactUs/ContactUs",
+          icon: <Contact className="h-4 w-4" />,
+        },
+      ],
+    },
+    {
+      title: "menu.themesAndBranding",
+      items: [
+        // {
+        //   label: "branding.title",
+        //   href: "/user-management/web-management/Branding/Branding",
+        //   icon: <ShieldAlert className="h-4 w-4" />,
+        // },
+        {
+          label: "theme",
+          href: "/user-management/web-management/Theme/Theme",
+          icon: <Palette className="h-4 w-4" />,
+        },
+      ],
+    },
+    {
+      title: "menu.templates",
+      items: [
+        {
+          label: "template.title",
+          href: "/user-management/web-management/TemplateConfiguration/templates",
+          icon: <Settings className="h-4 w-4" />,
+        },
+        {
+          label: "templateSettingValue.title",
+          href: "/user-management/web-management/TemplateSettingValues/values",
+          icon: <Settings className="h-4 w-4" />,
+        },
+      ],
+    },
+  ];
+
+  // Flattened list for matching logic
+  const allMenuItems = useMemo(() => {
+    return menuSections.flatMap((sec) => sec.items);
+  }, []);
+
+  // Close mobile menu when route changes
+  useEffect(() => {
+    setIsMobileMenuOpen(false);
+  }, [location.pathname]);
+
+  // Close mobile menu on resize
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth >= 768) {
+        setIsMobileMenuOpen(false);
+      }
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const isMenuHrefActive = (href?: string, pathname?: string) => {
+    if (!href || !pathname) return false;
+    const hrefN = href.toLowerCase();
+    const pathN = pathname.toLowerCase();
+
+    if (pathN === hrefN) return true;
+
+    const baseSegment = hrefN.split("/").slice(0, -1).join("/");
+    if (pathN.startsWith(baseSegment)) {
+      const lastPart = hrefN.split("/").pop();
+      if (lastPart && pathN.includes(lastPart)) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  // Find current active menu item
+  const activeMenuItem = useMemo(() => {
+    return (
+      allMenuItems
+        .filter((mi) => isMenuHrefActive(mi.href, location.pathname))
+        .sort((a, b) => (b.href?.length || 0) - (a.href?.length || 0))[0] ||
+      null
+    );
+  }, [allMenuItems, location.pathname]);
+
+  return (
+    <div className="flex w-full min-h-screen mt-5 bg-slate-50 dark:bg-slate-900 transition-colors duration-300">
+      {/* Mobile Sidebar Drawer Overlay */}
+      {isMobileMenuOpen && (
+        <div
+          className="fixed inset-0 bg-slate-950/40 backdrop-blur-sm md:hidden"
+          onClick={() => setIsMobileMenuOpen(false)}
+        />
+      )}
+
+      {/* Sidebar Navigation */}
+      <aside
+        className={cn(
+          "bg-white dark:bg-slate-950 border-r border-slate-200/80 dark:border-slate-800/80 transition-all duration-300 ease-in-out flex flex-col",
+          isMobileMenuOpen
+            ? "fixed left-0 top-0 h-full w-72 md:w-80 shadow-2xl z-40"
+            : "hidden md:flex sticky top-0 h-screen",
+          isSidebarCollapsed ? "w-20" : "w-72 lg:w-80",
+        )}
+      >
+        {/* Sidebar Brand Header */}
+        <div className="h-16 flex items-center justify-between px-6 border-b border-slate-100 dark:border-slate-900">
+          {!isSidebarCollapsed && (
+            <div className="flex items-center gap-2">
+              <div className="h-8 w-8 rounded-xl bg-gradient-to-tr from-violet-600 to-purple-600 flex items-center justify-center text-white shadow-md shadow-violet-500/10">
+                <Settings className="h-4 w-4" />
+              </div>
+              <span className="text-sm font-semibold tracking-wide bg-gradient-to-r from-slate-900 to-slate-700 dark:from-white dark:to-slate-300 bg-clip-text text-transparent">
+                {t("organization.webManagement") || "Web Management"}
+              </span>
+            </div>
+          )}
+
+          {isSidebarCollapsed && (
+            <div className="mx-auto h-8 w-8 rounded-xl bg-gradient-to-tr from-violet-600 to-purple-600 flex items-center justify-center text-white shadow-md shadow-violet-500/10">
+              <Settings className="h-4 w-4" />
+            </div>
+          )}
+
+          {!isSidebarCollapsed && (
+            <button
+              onClick={() => setIsSidebarCollapsed(true)}
+              className="hidden md:flex p-1.5 rounded-lg border border-slate-100 dark:border-slate-800 text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-900 transition-all"
+              title="Collapse menu"
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </button>
+          )}
+
+          {isMobileMenuOpen && (
+            <button
+              onClick={() => setIsMobileMenuOpen(false)}
+              className="md:hidden p-1.5 rounded-lg border border-slate-100 dark:border-slate-800 text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-900 transition-all"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+
+        {/* Sidebar Nav Items */}
+        <nav className="flex-1 px-4 py-6 overflow-y-auto overflow-x-hidden space-y-6">
+          {menuSections.map((section, secIdx) => (
+            <div key={secIdx} className="space-y-2">
+              {!isSidebarCollapsed && (
+                <h3 className="px-3 text-xxs font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500">
+                  {t(section.title)}
+                </h3>
+              )}
+
+              <div className="space-y-1">
+                {section.items.map((item) => {
+                  const isActive = isMenuHrefActive(
+                    item.href,
+                    location.pathname,
+                  );
+                  return (
+                    <NavLink
+                      key={item.label}
+                      to={item.href || "#"}
+                      className={cn(
+                        "flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all duration-200 relative group",
+                        isActive
+                          ? "bg-violet-50 dark:bg-violet-950/40 text-violet-600 dark:text-violet-400 font-semibold shadow-sm border border-violet-100/50 dark:border-violet-950/20"
+                          : "text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-900/60 hover:text-slate-900 dark:hover:text-slate-200",
+                        isSidebarCollapsed ? "justify-center" : "",
+                      )}
+                    >
+                      {/* Active indicator line */}
+                      {isActive && !isSidebarCollapsed && (
+                        <div className="absolute left-0 w-1 h-5 rounded-r-full bg-violet-600 dark:bg-violet-400" />
+                      )}
+
+                      <span
+                        className={cn(
+                          "transition-transform group-hover:scale-105 duration-200",
+                          isActive
+                            ? "text-violet-600 dark:text-violet-400"
+                            : "text-slate-400 dark:text-slate-500 group-hover:text-slate-500 dark:group-hover:text-slate-400",
+                        )}
+                      >
+                        {item.icon}
+                      </span>
+
+                      {!isSidebarCollapsed && (
+                        <span className="truncate flex-1">{t(item.label)}</span>
+                      )}
+
+                      {/* Tooltip for collapsed state */}
+                      {isSidebarCollapsed && (
+                        <div className="absolute left-16 bg-slate-900 dark:bg-slate-800 text-white text-xs rounded px-2 py-1 opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity whitespace-nowrap z-50 shadow-md">
+                          {t(item.label)}
+                        </div>
+                      )}
+                    </NavLink>
+                  );
+                })}
+              </div>
+            </div>
+          ))}
+        </nav>
+
+        {/* Collapsed Sidebar Expand Toggle */}
+        {isSidebarCollapsed && (
+          <div className="p-4 border-t border-slate-100 dark:border-slate-900 flex justify-center">
+            <button
+              onClick={() => setIsSidebarCollapsed(false)}
+              className="p-1.5 rounded-lg border border-slate-100 dark:border-slate-800 text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-900 transition-all"
+              title="Expand menu"
+            >
+              <ChevronRight className="h-4 w-4" />
+            </button>
+          </div>
+        )}
+      </aside>
+
+      {/* Main Panel Content */}
+      <main className="flex-1 flex flex-col min-w-0">
+        {/* Mobile Header Bar */}
+        <header className="md:hidden h-16 flex items-center justify-between px-6 bg-white dark:bg-slate-950 border-b border-slate-200/80 dark:border-slate-800/80 sticky top-0 z-30">
+          <button
+            onClick={() => setIsMobileMenuOpen(true)}
+            className="p-2 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-900 transition-all border border-slate-100 dark:border-slate-850"
+          >
+            <Menu className="h-5 w-5 text-slate-700 dark:text-slate-300" />
+          </button>
+
+          <h1 className="text-base font-semibold text-slate-900 dark:text-white">
+            {activeMenuItem ? t(activeMenuItem.label) : t("webManagement")}
+          </h1>
+          <div className="w-9" />
+        </header>
+
+        {/* Desktop Header bar / Breadcrumbs */}
+        <header className="hidden md:flex h-16 items-center px-8 bg-white/70 dark:bg-slate-950/70 backdrop-blur border-b border-slate-200/40 dark:border-slate-800/40 sticky top-0">
+          <div className="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400">
+            <Home className="h-4 w-4 text-slate-400" />
+            <ChevronRight className="h-3 w-3 text-slate-300" />
+            <span className="text-slate-400">{t("portal.settings")}</span>
+            {activeMenuItem && (
+              <>
+                <ChevronRight className="h-3 w-3 text-slate-300" />
+                <span className="text-slate-900 dark:text-white font-semibold">
+                  {t(activeMenuItem.label)}
+                </span>
+              </>
+            )}
+          </div>
+        </header>
+
+        {/* Inner Page Router Component view */}
+        <div className="flex-1 overflow-y-auto overflow-x-hidden">
+          <Routes>
+            {/* Leadership Message */}
+            <Route
+              path="/LeadershipMessage/LeadershipMessage"
+              element={<Messages />}
+            />
+            <Route
+              path="/LeadershipMessage/AddLeadershipMessage"
+              element={<AddMessage />}
+            />
+            <Route
+              path="/LeadershipMessage/EditLeadershipMessage/:id"
+              element={<EditMessage />}
+            />
+            <Route
+              path="/LeadershipMessage/ViewLeadershipMessage/:id"
+              element={<ViewMessage />}
+            />
+
+            {/* Goals */}
+            <Route path="/Goals/goals" element={<Goals />} />
+            <Route path="/Goals/AddGoal" element={<AddGoal />} />
+            <Route path="/Goals/EditGoal/:id" element={<EditGoal />} />
+            <Route path="/Goals/ViewGoal/:id" element={<ViewGoal />} />
+
+            {/* Vision */}
+            <Route path="/Vision/vision" element={<Vision />} />
+            <Route path="/Vision/AddVision" element={<AddVision />} />
+            <Route path="/Vision/ViewVision/:id" element={<ViewVision />} />
+            <Route path="/Vision/EditVision/:id" element={<EditVision />} />
+
+            {/* News */}
+            <Route path="/News/news" element={<News />} />
+            <Route path="/News/AddNews" element={<AddNews />} />
+            <Route path="/News/EditNews/:id" element={<EditNews />} />
+
+            {/* News Category */}
+            <Route path="/Category/Category" element={<NewsCategory />} />
+            <Route path="/Category/AddCategory" element={<AddNewsCategory />} />
+            <Route
+              path="/Category/EditCategory/:id"
+              element={<EditNewsCategory />}
+            />
+
+            {/* Social Media */}
+            <Route path="/SocialMedia/SocialMedia" element={<SocialMedia />} />
+            <Route
+              path="/SocialMedia/AddSocialMedia"
+              element={<AddSocialMedia />}
+            />
+            <Route
+              path="/SocialMedia/EditSocialMedia/:id"
+              element={<EditSocialMedia />}
+            />
+
+            {/* Theme */}
+            <Route path="/Theme/Theme" element={<EditTheme />} />
+            {/* Branding */}
+            {/* <Route path="/Branding/Branding" element={<Branding />} /> */}
+
+            {/* Contact Us */}
+            <Route path="/ContactUs/ContactUs" element={<ContactUs />} />
+            <Route path="/ContactUs/AddContactUs" element={<AddContactUs />} />
+            <Route
+              path="/ContactUs/EditContactUs/:id"
+              element={<EditContactUs />}
+            />
+
+            {/* Modules */}
+            <Route path="/Modules/Modules" element={<Modules />} />
+            <Route path="/Modules/AddModules" element={<AddModules />} />
+            <Route path="/Modules/EditModules/:id" element={<EditModules />} />
+
+            {/* Template Configuration */}
+            <Route
+              path="/TemplateConfiguration/*"
+              element={<TemplateConfigurationPage />}
+            />
+
+            {/* Template Setting Values */}
+            <Route
+              path="/TemplateSettingValues/*"
+              element={<TemplateSettingValuePage />}
+            />
+          </Routes>
+        </div>
+      </main>
+    </div>
+  );
+};
diff --git a/apps/edr-freight-web/backoffice/tsconfig.app.json b/apps/edr-freight-web/backoffice/tsconfig.app.json
index 079051c3d..8b196cb6b 100644
--- a/apps/edr-freight-web/backoffice/tsconfig.app.json
+++ b/apps/edr-freight-web/backoffice/tsconfig.app.json
@@ -4,6 +4,7 @@
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "useDefineForClassFields": true,
     "skipLibCheck": true,
+    "resolveJsonModule": true,
     "paths": {
       "@/*": ["./src/*"],
       "@tria-plc/iamui": ["./src/types/@tria-plc__iamui.d.ts"]
diff --git a/apps/edr-freight-web/portal/package.json b/apps/edr-freight-web/portal/package.json
index 433b83c1a..2cfd488d6 100644
--- a/apps/edr-freight-web/portal/package.json
+++ b/apps/edr-freight-web/portal/package.json
@@ -36,6 +36,7 @@
     "recharts": "^3.8.1",
     "socket.io-client": "^4.8.3",
     "tailwind-merge": "^3.6.0",
+    "xlsx": "^0.18.5",
     "zod": "^4.4.3",
     "zustand": "^5.0.0"
   },
diff --git a/apps/edr-freight-web/portal/src/App.tsx b/apps/edr-freight-web/portal/src/App.tsx
index e4c5685fd..637a42816 100644
--- a/apps/edr-freight-web/portal/src/App.tsx
+++ b/apps/edr-freight-web/portal/src/App.tsx
@@ -217,7 +217,7 @@ const sidebarItems: SidebarItem[] = [
 const App = () => {
   const navigate = useNavigate();
   const location = useLocation();
-  const { user, company, companyType, createProfileAndSwitch, isAuthenticated } =
+  const { user, company, companyType, createProfile, isAuthenticated } =
     useAuth();
 
   // Keep the server session alive while a user is logged in. Runs after
@@ -274,7 +274,7 @@ const App = () => {
                 userEmail={userEmail}
                 companyProfiles={companyProfiles}
                 companyType={companyType}
-                onCreateProfile={createProfileAndSwitch}
+                onCreateProfile={createProfile}
               >
                 <OnboardingGate />
               </AppLayout>
@@ -308,6 +308,12 @@ const App = () => {
               path="/contracts/:id/bookings/new"
               element={<NewShipmentPage />}
             />
+            {/* Completion of an initiated (bare) booking after per-booking
+                clearance — same form, submits to the complete endpoint. */}
+            <Route
+              path="/contracts/:id/bookings/:bookingId/complete"
+              element={<NewShipmentPage />}
+            />
             <Route
               path="/contracts/:id/clearance"
               element={<ContractClearanceFlow />}
diff --git a/apps/edr-freight-web/portal/src/components/customer-actions/ContractClearanceAction.tsx b/apps/edr-freight-web/portal/src/components/customer-actions/ContractClearanceAction.tsx
index 4aa131c23..fbb8f97c2 100644
--- a/apps/edr-freight-web/portal/src/components/customer-actions/ContractClearanceAction.tsx
+++ b/apps/edr-freight-web/portal/src/components/customer-actions/ContractClearanceAction.tsx
@@ -83,7 +83,7 @@ export function ContractClearanceAction({
         centered
         overlayProps={{ blur: 2, backgroundOpacity: 0.55 }}
       >
-        <ContractClearancePanel contractId={contractId} bare />
+        <ContractClearancePanel contractId={contractId} bare onSubmitted={close} />
       </Modal>
     </ModalSafeWrapper>
   );
diff --git a/apps/edr-freight-web/portal/src/components/customer-actions/ContractCustomerAction.tsx b/apps/edr-freight-web/portal/src/components/customer-actions/ContractCustomerAction.tsx
index 9d1b6718e..86c37585c 100644
--- a/apps/edr-freight-web/portal/src/components/customer-actions/ContractCustomerAction.tsx
+++ b/apps/edr-freight-web/portal/src/components/customer-actions/ContractCustomerAction.tsx
@@ -1,10 +1,21 @@
-import { Button, Group, type ButtonProps } from "@mantine/core";
-import type { ReactNode } from "react";
+import {
+  Button,
+  Group,
+  Modal,
+  Text,
+  ThemeIcon,
+  type ButtonProps,
+} from "@mantine/core";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { LucideIcon } from "lucide-react";
+import { useState, type ReactNode } from "react";
+import toast from "react-hot-toast";
 import { useNavigate } from "react-router-dom";
 
 import type { Freight } from "@edr/types";
 
 import { PayNowButton } from "@/pages/bookings/payments/PayNowButton";
+import { api } from "@/services/api";
 import { ContractClearanceAction } from "./ContractClearanceAction";
 import { deriveContractCustomerAction } from "./deriveContractCustomerAction";
 
@@ -53,7 +64,21 @@ export function ContractCustomerAction({
   }
 
   if (action.type === "pay") {
-    return <PayNowButton booking={action.booking} label={action.label} size={size} />;
+    return (
+      <PayNowButton booking={action.booking} label={action.label} size={size} />
+    );
+  }
+
+  if (action.type === "initiate") {
+    return (
+      <InitiateBookingButton
+        contract={action.contract}
+        label={action.label}
+        icon={action.icon}
+        size={size}
+        listStyle={listStyle}
+      />
+    );
   }
 
   const Icon = action.icon;
@@ -80,6 +105,140 @@ export function ContractCustomerAction({
   );
 }
 
+/**
+ * One-click bare booking instance under a GENERAL non-customs contract. No
+ * form, no date, no window gate — the new instance lands in per-booking
+ * clearance (AWAITING_DOCUMENTS) and the customer is taken straight to it.
+ */
+export function InitiateBookingButton({
+  contract,
+  label = "Initiate booking",
+  icon: Icon,
+  size = "xs",
+  listStyle = false,
+  fullWidth = false,
+}: {
+  contract: Freight.IContract;
+  label?: string;
+  icon: LucideIcon;
+  size?: ButtonProps["size"];
+  listStyle?: boolean;
+  fullWidth?: boolean;
+}) {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const [confirmOpen, setConfirmOpen] = useState(false);
+
+  const mutation = useMutation({
+    mutationFn: () =>
+      api.contracts.initiateBookingUnderContract.call({
+        id: contract.id,
+        // Multi-route contracts must name a route; single-route auto-selects.
+        contractRouteId:
+          (contract.routes?.length ?? 0) > 1
+            ? contract.routes![0].id
+            : undefined,
+      }),
+    onSuccess: (booking) => {
+      queryClient.invalidateQueries({ queryKey: api.bookings.list.queryKey() });
+      queryClient.invalidateQueries({
+        queryKey: api.contracts.get.queryKey({ id: contract.id }),
+      });
+      toast.success(
+        "Booking initiated — upload your clearance documents to start the review.",
+      );
+      setConfirmOpen(false);
+      navigate(`/bookings/${booking.id}`);
+    },
+    onError: (e: Error) =>
+      toast.error(e.message || "Could not initiate the booking"),
+  });
+
+  return (
+    <>
+      <Modal
+        opened={confirmOpen}
+        onClose={() => {
+          if (!mutation.isPending) setConfirmOpen(false);
+        }}
+        centered
+        radius="lg"
+        size="md"
+        closeOnClickOutside={!mutation.isPending}
+        closeOnEscape={!mutation.isPending}
+        withCloseButton={!mutation.isPending}
+        title={
+          <Group gap={10} wrap="nowrap">
+            <ThemeIcon variant="light" color="edr-green" radius="md" size={34}>
+              <Icon size={18} />
+            </ThemeIcon>
+            <Text fw={700}>Initiate a new booking?</Text>
+          </Group>
+        }
+      >
+        <Text size="sm" c="dimmed">
+          This creates a new shipment booking under contract{" "}
+          <Text span fw={700} c="#10202F">
+            {contract.reference}
+          </Text>
+          . You&apos;ll upload the clearance documents next, and the shipment
+          quantity is drawn down from your contract&apos;s reserved capacity.
+        </Text>
+        <Group justify="flex-end" gap="sm" mt="lg">
+          <Button
+            variant="default"
+            radius="md"
+            onClick={() => setConfirmOpen(false)}
+            disabled={mutation.isPending}
+          >
+            Cancel
+          </Button>
+          <Button
+            color="edr-green"
+            radius="md"
+            leftSection={<Icon size={16} />}
+            loading={mutation.isPending}
+            onClick={() => mutation.mutate()}
+          >
+            Yes, initiate booking
+          </Button>
+        </Group>
+      </Modal>
+      <Button
+        size={size}
+        radius="md"
+        h={listStyle ? 34 : undefined}
+        variant="filled"
+        color="edr-green"
+        fullWidth={fullWidth}
+        leftSection={<Icon size={15} />}
+        loading={mutation.isPending}
+        onClick={(e) => {
+          e.stopPropagation();
+          setConfirmOpen(true);
+        }}
+        styles={
+          listStyle
+            ? {
+                root: {
+                  fontWeight: 600,
+                  fontSize: 13,
+                  paddingInline: 14,
+                  whiteSpace: "nowrap" as const,
+                  boxShadow: "0 1px 2px rgba(14,163,113,0.25)",
+                },
+              }
+            : undefined
+        }
+        fw={listStyle ? undefined : 700}
+        fz={listStyle ? undefined : 13}
+      >
+        {label}
+      </Button>
+    </>
+  );
+}
+
 /** Action column cell: doc button + primary customer action. */
 export function ContractCustomerActionCell({
   contract,
@@ -93,7 +252,12 @@ export function ContractCustomerActionCell({
   return (
     <Group gap={8} wrap="nowrap" justify="flex-end">
       {docButton}
-      <ContractCustomerAction contract={contract} bookings={bookings} size="sm" listStyle />
+      <ContractCustomerAction
+        contract={contract}
+        bookings={bookings}
+        size="sm"
+        listStyle
+      />
     </Group>
   );
 }
diff --git a/apps/edr-freight-web/portal/src/components/customer-actions/deriveContractCustomerAction.ts b/apps/edr-freight-web/portal/src/components/customer-actions/deriveContractCustomerAction.ts
index 5d9a53c91..ddd64d3e8 100644
--- a/apps/edr-freight-web/portal/src/components/customer-actions/deriveContractCustomerAction.ts
+++ b/apps/edr-freight-web/portal/src/components/customer-actions/deriveContractCustomerAction.ts
@@ -72,6 +72,14 @@ export type ContractCustomerAction =
       label: string;
       primary: boolean;
       icon: LucideIcon;
+    }
+  | {
+      /** One-click bare booking instance (GENERAL non-customs) — mutation, not navigation. */
+      type: "initiate";
+      contract: Freight.IContract;
+      label: string;
+      primary: boolean;
+      icon: LucideIcon;
     };
 
 function findPayableBookingForContract(
@@ -210,6 +218,15 @@ export function deriveContractCustomerAction(
   }
 
   const bookingAction = getContractBookingAction(contract, bookings);
+  if (bookingAction.kind === "initiate") {
+    return {
+      type: "initiate",
+      contract,
+      label: "Initiate booking",
+      primary: true,
+      icon: PackagePlus,
+    };
+  }
   if (bookingAction.kind === "book") {
     return {
       type: "navigate",
diff --git a/apps/edr-freight-web/portal/src/components/onboarding/OnboardingWizardDialog.tsx b/apps/edr-freight-web/portal/src/components/onboarding/OnboardingWizardDialog.tsx
index 849ba50c5..f2c9992e3 100644
--- a/apps/edr-freight-web/portal/src/components/onboarding/OnboardingWizardDialog.tsx
+++ b/apps/edr-freight-web/portal/src/components/onboarding/OnboardingWizardDialog.tsx
@@ -344,6 +344,15 @@ export default function OnboardingWizardDialog({
     [finishMutation],
   );
 
+  // Closing from the congratulations panel also clears the completed flag so a
+  // future reopen (shouldn't happen once onboarded) starts clean.
+  // Must stay above the `!user` early return: `user` flips to null while
+  // useAuth refetches, and skipping a hook on that render breaks hook order.
+  const handleClose = useCallback(() => {
+    if (completed) setCompleted(false);
+    onClose();
+  }, [completed, onClose]);
+
   if (!user) return null;
 
   // Any non-empty combination of importer/exporter/freight-forwarder is valid.
@@ -365,13 +374,6 @@ export default function OnboardingWizardDialog({
   const stepMeta = STEP_META[activeStep];
   const activeIdx = WIZARD_STEPS.indexOf(activeStep);
 
-  // Closing from the congratulations panel also clears the completed flag so a
-  // future reopen (shouldn't happen once onboarded) starts clean.
-  const handleClose = useCallback(() => {
-    if (completed) setCompleted(false);
-    onClose();
-  }, [completed, onClose]);
-
   // Prefer the backend-resolved document code; fall back to the local mapping
   // only until the requirements query lands (the documents step is reached well
   // after the draft — and thus the requirements — exist).
@@ -392,11 +394,17 @@ export default function OnboardingWizardDialog({
   const requiredDocsMissing = requirementDocuments.some(
     (d) => d.isRequired && !d.uploaded,
   );
+  // The PoA gets the same treatment: a resumed draft that predates the
+  // delegation-letter requirement (or a forwarder whose PoA is blank) must land
+  // back on the PoA step, where both the details and the letter are entered.
+  const poaIncomplete = requirementsQuery.data?.poa?.complete === false;
+  // Each unmet requirement lowers the ceiling; resume never moves forward.
+  let ceiling = FORM_STEPS.length - 1;
+  if (requiredDocsMissing)
+    ceiling = Math.min(ceiling, FORM_STEPS.indexOf("documents"));
+  if (poaIncomplete) ceiling = Math.min(ceiling, FORM_STEPS.indexOf("poa"));
   const effectiveResumeStep: FormStep =
-    requiredDocsMissing &&
-      FORM_STEPS.indexOf(resumeFormStep) > FORM_STEPS.indexOf("documents")
-      ? "documents"
-      : resumeFormStep;
+    FORM_STEPS[Math.min(Math.max(FORM_STEPS.indexOf(resumeFormStep), 0), ceiling)];
 
   const formProps = {
     documentSettingCode: resolvedDocumentSettingCode,
diff --git a/apps/edr-freight-web/portal/src/constants/URLS.ts b/apps/edr-freight-web/portal/src/constants/URLS.ts
index 5dfda7e58..54af7b150 100644
--- a/apps/edr-freight-web/portal/src/constants/URLS.ts
+++ b/apps/edr-freight-web/portal/src/constants/URLS.ts
@@ -102,6 +102,9 @@ export const URL_CONSTANTS = {
       `/api/companies/company-profiles/${profileId}/license/${fileId}`,
     PROFILE_LICENSE_REPLACE: (profileId: string, fileId: string) =>
       `/api/companies/company-profiles/${profileId}/license/${fileId}/replace`,
+    POA_DELEGATION: "/api/companies/poa-delegation",
+    POA_DELEGATION_FILE: (fileId: string) =>
+      `/api/companies/poa-delegation/${fileId}`,
     PROFILE_CHANGE_REQUEST: "/api/companies/profile/change-request",
     PROFILE_REAPPLY: (profileId: string) =>
       `/api/companies/company-profiles/${profileId}/reapply`,
@@ -139,6 +142,9 @@ export const URL_CONSTANTS = {
       `/api/contracts/${id}/clearance/documents`,
     CLEARANCE_DUTY_SLIP: (id: string) => `/api/contracts/${id}/clearance/duty-slip`,
     BOOKINGS: (id: string) => `/api/contracts/${id}/bookings`,
+    BOOKINGS_INITIATE: (id: string) => `/api/contracts/${id}/bookings/initiate`,
+    BOOKINGS_COMPLETE: (id: string, bookingId: string) =>
+      `/api/contracts/${id}/bookings/${bookingId}/complete`,
     VALIDATE_SHIPMENT: (id: string) =>
       `/api/contracts/${id}/validate-shipment`,
     MILESTONES: (id: string) => `/api/contracts/${id}/milestones`,
diff --git a/apps/edr-freight-web/portal/src/hooks/useAuth.ts b/apps/edr-freight-web/portal/src/hooks/useAuth.ts
index 0f6e98377..be5cd4d7c 100644
--- a/apps/edr-freight-web/portal/src/hooks/useAuth.ts
+++ b/apps/edr-freight-web/portal/src/hooks/useAuth.ts
@@ -211,7 +211,11 @@ const useAuth = () => {
     }
   };
 
-  const createProfileAndSwitch = async (
+  /**
+   * Add an operational role. The new role starts pending review, so the active
+   * mode is left untouched — the user keeps working under their approved role.
+   */
+  const createProfile = async (
     type: ProfileTypeValue,
     licenseFiles: File[],
   ): Promise<Result<void>> => {
@@ -278,7 +282,7 @@ const useAuth = () => {
     onboardingCompleted,
     onboardingStep,
     switchMode,
-    createProfileAndSwitch,
+    createProfile,
     reapplyProfile,
     login,
     signup,
diff --git a/apps/edr-freight-web/portal/src/pages/MyPortalPage/components/BookingRow.tsx b/apps/edr-freight-web/portal/src/pages/MyPortalPage/components/BookingRow.tsx
index b3acc1667..007fc7fe9 100644
--- a/apps/edr-freight-web/portal/src/pages/MyPortalPage/components/BookingRow.tsx
+++ b/apps/edr-freight-web/portal/src/pages/MyPortalPage/components/BookingRow.tsx
@@ -36,7 +36,9 @@ export const BookingRow = memo(function BookingRow({
   // Contract ready for signature → "View & sign" jumps straight to the
   // full-page contract viewer where the signature flow lives.
   const canSign = bookingIsSignable(booking);
-  const canApproveDelivery = booking.status === "COMPLETED";
+  // Visible from handover generation until the customer signs (flag is attached
+  // by the bookings list endpoint; false again the moment it's signed).
+  const canApproveDelivery = Boolean(booking.handoverAwaitingSignature);
   const origin = booking.originYard?.label ?? booking.originYard?.code ?? "—";
   const dest =
     booking.destinationYard?.label ?? booking.destinationYard?.code ?? "—";
diff --git a/apps/edr-freight-web/portal/src/pages/MyPortalPage/hooks.ts b/apps/edr-freight-web/portal/src/pages/MyPortalPage/hooks.ts
index 5e051cce9..eaec70ed3 100644
--- a/apps/edr-freight-web/portal/src/pages/MyPortalPage/hooks.ts
+++ b/apps/edr-freight-web/portal/src/pages/MyPortalPage/hooks.ts
@@ -3,6 +3,7 @@ import { Freight } from "@edr/types";
 import useAuth from "@/hooks/useAuth";
 import { useBookingWindowSocket } from "@/features/bookingWindows/useBookingWindowSocket";
 import { api } from "@/services/api";
+import { isBookingLive } from "@/pages/bookings/BookingDetailPage/utils";
 import { ACTIVE_STATUSES } from "./constants";
 
 export function useMyPortalData(selectedProfileId?: string) {
@@ -24,6 +25,17 @@ export function useMyPortalData(selectedProfileId?: string) {
         sortOrder: "DESC",
         companyProfileId: selectedProfileId,
       },
+      // The home tiles read each booking's status directly, but staff/system
+      // transitions (operations accepting an order, batch selection, clearance
+      // review) never push here. Poll while any booking is still live so those
+      // changes surface — e.g. an accepted order leaving "Operation request
+      // under review" — and stop once everything has settled.
+      refetchInterval: (query) => {
+        const items =
+          (query.state.data as { items?: Freight.IBooking[] } | undefined)
+            ?.items ?? [];
+        return items.some((b) => isBookingLive(b.status)) ? 30_000 : false;
+      },
     }),
   );
 
diff --git a/apps/edr-freight-web/portal/src/pages/SettingsPage.tsx b/apps/edr-freight-web/portal/src/pages/SettingsPage.tsx
index 2a8443812..5f6cf88d8 100644
--- a/apps/edr-freight-web/portal/src/pages/SettingsPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/SettingsPage.tsx
@@ -83,7 +83,11 @@ const TABS: { id: SettingsTab; label: string; icon: React.ReactNode }[] = [
 function ProfileHeader({ profile }: { profile: ProfileResponse }) {
   const refByType = new Map(profile.companyProfiles.map((p) => [p.type, p]));
   const roleOptions = rolesForCompanyType(profile.companyType);
-  const activeRoles = roleOptions.filter((o) => refByType.has(o.type));
+  // Only an approved role is a role the company actually operates as. A pending
+  // one carries no reference yet, and must not read as granted.
+  const activeRoles = roleOptions.filter(
+    (o) => refByType.get(o.type)?.status === "active",
+  );
 
   return (
     <Card
diff --git a/apps/edr-freight-web/portal/src/pages/accounts/CompanyProfileForm.tsx b/apps/edr-freight-web/portal/src/pages/accounts/CompanyProfileForm.tsx
index abfb61551..27e51b403 100644
--- a/apps/edr-freight-web/portal/src/pages/accounts/CompanyProfileForm.tsx
+++ b/apps/edr-freight-web/portal/src/pages/accounts/CompanyProfileForm.tsx
@@ -12,7 +12,7 @@ import {
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery } from "@tanstack/react-query";
 import { AlertCircle, ArrowLeft, ArrowRight } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 
 import type { AuthUser } from "@/types/auth";
@@ -28,9 +28,11 @@ import RoleLicenseStep, {
 } from "@/components/onboarding/RoleLicenseStep";
 import ETradeInfo from "@/components/onboarding/ETradeInfo";
 import {
+  buildOnboardingSchema,
   type CompanyStep,
   type FormData,
-  onboardingSchema,
+  hasPoaDetails,
+  POA_DELEGATION_FILE_KEY,
   stepFields,
 } from "./companyProfileForm/schema";
 import {
@@ -155,6 +157,12 @@ export default function CompanyProfileForm({
     }),
   );
 
+  // A freight forwarder signs on other companies' behalf, so its Power of
+  // Attorney (details + delegation letter) is mandatory rather than optional.
+  const requirePoa = (roleProfiles ?? []).some(
+    (p) => p.type === "freight_forwarder",
+  );
+
   const {
     register,
     control,
@@ -164,7 +172,7 @@ export default function CompanyProfileForm({
     setValue,
     formState: { errors },
   } = useForm<FormData>({
-    resolver: zodResolver(onboardingSchema),
+    resolver: zodResolver(buildOnboardingSchema(requirePoa)),
     defaultValues: {
       companyName: "",
       companyEmail: "",
@@ -240,9 +248,8 @@ export default function CompanyProfileForm({
   } | null>(null);
 
   const handleETradeDataLoaded = (data: CompanyRegistrationData) => {
-    // Company name comes from the eTrade manager/owner name on the license.
-    if (data.managerName) {
-      setValue("companyName", data.managerName, { shouldValidate: true });
+    if (data.companyName) {
+      setValue("companyName", data.companyName, { shouldValidate: true });
     }
     setValue("licenceNumber", data.licenceNumber);
     setValue("statusDescription", data.statusDescription);
@@ -354,7 +361,34 @@ export default function CompanyProfileForm({
     }
   };
 
-  const hasDocuments = Boolean(uploadSetting?.fields?.length);
+  // The delegation letter is seeded into the same nationality document set as
+  // the rest, but belongs on the PoA step next to the details it evidences —
+  // so it's split out here and the Documents step renders the remainder. Both
+  // halves share `documentFiles`, so the existing bulk upload still carries it.
+  const poaDocumentField = uploadSetting?.fields?.find(
+    (f) => f.fileKey === POA_DELEGATION_FILE_KEY,
+  );
+  const documentsSetting = useMemo(
+    () =>
+      uploadSetting
+        ? {
+            ...uploadSetting,
+            fields: uploadSetting.fields.filter(
+              (f) => f.fileKey !== POA_DELEGATION_FILE_KEY,
+            ),
+          }
+        : undefined,
+    [uploadSetting],
+  );
+  const poaDocumentSetting = useMemo(
+    () =>
+      uploadSetting && poaDocumentField
+        ? { ...uploadSetting, fields: [poaDocumentField] }
+        : undefined,
+    [uploadSetting, poaDocumentField],
+  );
+
+  const hasDocuments = Boolean(documentsSetting?.fields?.length);
 
   // Hard verification for the documents step: required company-level
   // documents and a business license per operational profile must both be
@@ -368,7 +402,7 @@ export default function CompanyProfileForm({
 
   const validateRequiredDocuments = (): Record<string, string> => {
     const errs: Record<string, string> = {};
-    for (const field of uploadSetting?.fields ?? []) {
+    for (const field of documentsSetting?.fields ?? []) {
       const min = getMinFiles(field);
       if (min <= 0) continue;
       if ((uploadedDocumentKeys ?? []).includes(field.fileKey)) continue;
@@ -447,6 +481,20 @@ export default function CompanyProfileForm({
   ];
   const currentIdx = stepOrder.indexOf(step);
 
+  // The delegation letter is what proves the representative was actually
+  // delegated, so it's required the moment a PoA exists — and unconditionally
+  // for a freight forwarder, whose PoA itself is mandatory. Skipped entirely
+  // when the document set predates the field (seeder not yet re-run).
+  const poaProvided = hasPoaDetails(watch());
+  const delegationRequired =
+    Boolean(poaDocumentField) && (requirePoa || poaProvided);
+  const delegationPresent =
+    (uploadedDocumentKeys ?? []).includes(POA_DELEGATION_FILE_KEY) ||
+    (() => {
+      const v = documentFiles[POA_DELEGATION_FILE_KEY];
+      return Array.isArray(v) ? v.length > 0 : v != null;
+    })();
+
   /** Validate + persist the current step, returning whether we may advance. */
   const saveCurrentStep = async (): Promise<boolean> => {
     setSaveError(null);
@@ -498,6 +546,20 @@ export default function CompanyProfileForm({
       handleSubmit((data) => onSubmit(buildPayload(data, user)))();
       return;
     }
+    // The PoA step also gates on a file, which lives outside the form state.
+    if (step === "poa" && delegationRequired && !delegationPresent) {
+      setDocumentFieldErrors({
+        [POA_DELEGATION_FILE_KEY]: "Delegation letter is required",
+      });
+      setSaveError(
+        requirePoa
+          ? "Freight forwarders must provide Power of Attorney details and a delegation letter."
+          : "Upload the delegation letter for the Power of Attorney you entered, or clear the PoA details to skip.",
+      );
+      // Fall through to validate the text fields too, so every problem shows at once.
+      await trigger(stepFields.poa);
+      return;
+    }
     // Field steps validate + save before advancing.
     const ok = await saveCurrentStep();
     if (!ok) return;
@@ -743,8 +805,9 @@ export default function CompanyProfileForm({
           {step === "poa" && (
             <>
               <Text size="sm" c="edr-muted">
-                Power of Attorney details are optional. Fill them in if you have
-                them, or skip to continue.
+                {requirePoa
+                  ? "As a freight forwarder you act on other companies' behalf, so Power of Attorney details and a delegation letter are required."
+                  : "Power of Attorney details are optional. Fill them in if you have them, or skip to continue. If you do enter a representative, upload the delegation letter authorising them."}
               </Text>
               {watch("contactPersonName") && (
                 <LinkCheckboxCard
@@ -788,6 +851,19 @@ export default function CompanyProfileForm({
                   {...register("poaAddress")}
                 />
               </SimpleGrid>
+
+              {poaDocumentSetting && (
+                <>
+                  <Divider my="sm" />
+                  <SmartFileInput
+                    file={poaDocumentSetting}
+                    value={documentFiles}
+                    uploadedKeys={uploadedDocumentKeys}
+                    errors={documentFieldErrors}
+                    onChange={handleDocumentFilesChange}
+                  />
+                </>
+              )}
             </>
           )}
 
@@ -797,13 +873,13 @@ export default function CompanyProfileForm({
                 <Group justify="center" py="xl">
                   <Loader size="sm" color="edr-green" />
                 </Group>
-              ) : !uploadSetting ? (
+              ) : !documentsSetting ? (
                 <Text size="sm" c="edr-muted" ta="center" py="md">
                   No document requirements found for your account type.
                 </Text>
               ) : (
                 <SmartFileInput
-                  file={uploadSetting}
+                  file={documentsSetting}
                   value={documentFiles}
                   uploadedKeys={uploadedDocumentKeys}
                   errors={documentFieldErrors}
diff --git a/apps/edr-freight-web/portal/src/pages/accounts/companyProfileForm/schema.ts b/apps/edr-freight-web/portal/src/pages/accounts/companyProfileForm/schema.ts
index 9a123e255..56a2bd57f 100644
--- a/apps/edr-freight-web/portal/src/pages/accounts/companyProfileForm/schema.ts
+++ b/apps/edr-freight-web/portal/src/pages/accounts/companyProfileForm/schema.ts
@@ -63,12 +63,56 @@ export const onboardingSchema = z.object({
     .optional()
     .refine((v) => !v || isValidPhone(v), "Enter a valid phone number"),
   poaAddress: z.string().optional(),
-  poaEmail: z.string().optional(),
+  poaEmail: z
+    .string()
+    .optional()
+    .refine(
+      (v) => !v || z.string().email().safeParse(v).success,
+      "Invalid email address",
+    ),
   poaLocation: z.string().optional(),
 });
 
 export type FormData = z.infer<typeof onboardingSchema>;
 
+/** fileKey of the delegation letter uploaded on the Power of Attorney step. */
+export const POA_DELEGATION_FILE_KEY = "poa_delegation_letter";
+
+export const POA_FIELDS = [
+  "poaName",
+  "poaPhone",
+  "poaEmail",
+  "poaLocation",
+  "poaAddress",
+] as const satisfies readonly (keyof FormData)[];
+
+/** True once the customer has entered any Power of Attorney detail. */
+export const hasPoaDetails = (d: Partial<FormData>) =>
+  POA_FIELDS.some((f) => d[f]?.trim());
+
+/**
+ * A freight forwarder acts on other companies' behalf, so its PoA is mandatory
+ * rather than optional. Everyone else keeps the optional PoA — but once they
+ * start filling it in, the identifying fields have to be complete (the
+ * delegation-letter upload is enforced alongside this, in CompanyProfileForm,
+ * since files live outside the form state).
+ */
+export function buildOnboardingSchema(requirePoa: boolean) {
+  if (!requirePoa) return onboardingSchema;
+  return onboardingSchema.superRefine((d, ctx) => {
+    const required: [keyof FormData, string][] = [
+      ["poaName", "PoA name is required for freight forwarders"],
+      ["poaEmail", "PoA email is required for freight forwarders"],
+      ["poaPhone", "PoA phone is required for freight forwarders"],
+    ];
+    for (const [path, message] of required) {
+      if (!d[path]?.trim()) {
+        ctx.addIssue({ code: z.ZodIssueCode.custom, path: [path], message });
+      }
+    }
+  });
+}
+
 export const stepFields: Record<CompanyStep, (keyof FormData)[]> = {
   company: [
     "companyName",
@@ -102,7 +146,7 @@ export const stepFields: Record<CompanyStep, (keyof FormData)[]> = {
     "contactPersonEmail",
     "contactPersonPhone",
   ],
-  poa: [],
+  poa: [...POA_FIELDS],
   documents: [],
   additional: [],
 };
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/ReadonlyBookingView.tsx b/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/ReadonlyBookingView.tsx
index 7384bbc4d..f135078c1 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/ReadonlyBookingView.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/ReadonlyBookingView.tsx
@@ -107,10 +107,12 @@ export function ReadonlyBookingView({
     (isGeneralContract
       ? status === "FULLY_EXECUTED"
       : status === "SELECTED_FOR_BATCH");
-  const canApproveDelivery =
-    status === "COMPLETED" ||
-    Boolean(booking.handoverAwaitingSignature) ||
-    (status === "TRUCK_ASSIGNED" && Boolean(booking.customerTruckArrivedAt));
+  // Approve delivery tracks the handover lifecycle exactly: the button appears
+  // the moment a handover is generated (truck arrival, or an operator's
+  // signature request) and disappears the moment the customer signs it. The
+  // backend flag counts only unsigned SELF_HAUL handovers, so no status
+  // heuristics are needed here.
+  const canApproveDelivery = Boolean(booking.handoverAwaitingSignature);
   const usesCustomerTruck =
     booking.tradeDirection === "IMPORT"
       ? !booking.lastMileDeliveryAddress
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/components/ClearanceCard.tsx b/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/components/ClearanceCard.tsx
index 8f055e79a..dcc455ada 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/components/ClearanceCard.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/components/ClearanceCard.tsx
@@ -1,29 +1,39 @@
-import { Alert, Button, Group } from "@mantine/core";
-import { CheckCircle2, Upload } from "lucide-react";
+import { useState } from "react";
+import { Alert, Button, Group, Text } from "@mantine/core";
+import {
+  CheckCircle2,
+  ClipboardList,
+  Clock,
+  PackagePlus,
+  Upload,
+} from "lucide-react";
 import { useNavigate } from "react-router-dom";
 
 import type { Freight } from "@edr/types";
 
-import { ClearanceFlow } from "@/pages/bookings/clearance/ClearanceFlow";
-import { useClearanceFlow } from "@/pages/bookings/clearance/useClearanceFlow";
+import { BookingActionModal } from "@/pages/bookings/clearance/BookingActionModal";
+import { getBookingNextAction } from "@/pages/bookings/clearance/bookingNextAction";
 import { BookingClearanceWorkflowBanner } from "@/pages/bookings/BookingClearanceWorkflowBanner";
 
 import { CardTitle, SectionCard } from "./layout";
 
 /**
- * Customer-facing clearance section on the booking detail page: shows the
- * resolved document grid, lets the customer (re)upload pending/queried documents
- * plus ad-hoc named documents, and proceed to operation once Global Logistics
- * marks the booking CLEARANCE_READY.
- *
- * The flow body, calendar, and mutations are shared with the home-page action
- * modal via `useClearanceFlow` / `ClearanceFlow`.
+ * Customer-facing clearance section on the booking detail page: a compact
+ * status summary with a single action button. The document grid and re-uploads
+ * live in the shared {@link BookingActionModal} (the same modal the My
+ * Shipments list uses); a finished bare instance instead shows a "Book" button
+ * that navigates to the booking form.
  */
 export function ClearanceCard({ booking }: { booking: Freight.IBooking }) {
+  const [modalOpen, setModalOpen] = useState(false);
   const navigate = useNavigate();
-  const flow = useClearanceFlow(booking);
+  const status = booking.status as string;
+  const action = getBookingNextAction(booking);
+  // BOOK: clearance finished on a bare instance — go straight to the booking
+  // form (cargo + shipment day + window check) instead of opening the modal.
+  const isBookAction = action?.kind === "BOOK" && Boolean(action.to);
 
-  if (flow.status === "OPERATION_REQUESTED") {
+  if (status === "OPERATION_REQUESTED") {
     return (
       <SectionCard>
         <CardTitle>Operation</CardTitle>
@@ -34,57 +44,65 @@ export function ClearanceCard({ booking }: { booking: Freight.IBooking }) {
     );
   }
 
-  if (flow.isLoading || !flow.clearance) {
-    return (
-      <SectionCard>
-        <CardTitle>Clearance documents</CardTitle>
-      </SectionCard>
+  const summary =
+    status === "CLEARANCE_READY" ? (
+      <Alert color="teal" radius="md" icon={<CheckCircle2 size={18} />}>
+        {isBookAction
+          ? "Clearance is complete. Book your shipment — enter the cargo details and pick a shipment day inside an open booking window."
+          : "Clearance is complete. Pick a shipment day and proceed to operation."}
+      </Alert>
+    ) : status === "DOCUMENTS_UNDER_REVIEW" ? (
+      <Alert color="blue" radius="md" icon={<Clock size={18} />}>
+        Your documents are being reviewed. Re-upload any queried documents to
+        proceed — approved documents stay as they are.
+      </Alert>
+    ) : (
+      <Alert color="yellow" radius="md" icon={<Upload size={18} />}>
+        Upload the required clearance documents so your shipment can be
+        reviewed.
+      </Alert>
     );
-  }
 
   return (
     <SectionCard>
       <BookingClearanceWorkflowBanner booking={booking} />
       <Group justify="space-between" align="center" mb="md" mt="md">
         <CardTitle>Clearance documents</CardTitle>
+        {action && (
+          <Button
+            color="edr-green"
+            radius="md"
+            leftSection={
+              isBookAction ? (
+                <PackagePlus size={16} />
+              ) : (
+                <ClipboardList size={16} />
+              )
+            }
+            onClick={() =>
+              isBookAction ? navigate(action!.to!) : setModalOpen(true)
+            }
+          >
+            {action.label}
+          </Button>
+        )}
       </Group>
 
-      <ClearanceFlow
-        booking={booking}
-        flow={flow}
-        footer={
-          <Group justify="flex-end" mt="lg" gap="sm">
-            {flow.canUpload && (
-              <Button
-                color="edr-green"
-                radius="md"
-                leftSection={<Upload size={16} />}
-                onClick={() => flow.submitDocuments()}
-                loading={flow.uploadMutation.isPending}
-                disabled={!flow.canSubmit}
-              >
-                Submit documents
-              </Button>
-            )}
-            {flow.isReady && (
-              <Button
-                color="edr-green"
-                radius="md"
-                leftSection={<CheckCircle2 size={16} />}
-                onClick={() =>
-                  flow.proceedToOperation({
-                    onSuccess: () => navigate(`/bookings/${booking.id}`),
-                  })
-                }
-                loading={flow.proceedMutation.isPending}
-                disabled={!flow.scheduledDate}
-              >
-                Proceed to operation
-              </Button>
-            )}
-          </Group>
-        }
-      />
+      {summary}
+
+      <Text fz="12.5px" c="dimmed" mt="sm">
+        {isBookAction
+          ? "Use “Book” to enter the cargo details and schedule your shipment."
+          : `Use “${action?.label ?? "the action button"}” to manage your clearance documents.`}
+      </Text>
+
+      {!isBookAction && (
+        <BookingActionModal
+          booking={booking}
+          opened={modalOpen}
+          onClose={() => setModalOpen(false)}
+        />
+      )}
     </SectionCard>
   );
 }
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/components/StatusHero.tsx b/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/components/StatusHero.tsx
index 13404f8f6..16d412703 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/components/StatusHero.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/components/StatusHero.tsx
@@ -3,7 +3,15 @@ import { Check, MoveRight } from "lucide-react";
 
 import type { Freight } from "@edr/types";
 
-import { ARRIVAL_STAGE, PROGRESS_STAGES, STATUS_MAP, resolveStage } from "../constants";
+import {
+  ARRIVAL_STAGE,
+  CONTRACT_ARRIVAL_STAGE,
+  CONTRACT_PROGRESS_STAGES,
+  PROGRESS_STAGES,
+  STATUS_MAP,
+  resolveContractStage,
+  resolveStage,
+} from "../constants";
 import { fmtDate, isDraftLike, isNegative, yardLabel } from "../utils";
 import { SectionCard } from "./layout";
 
@@ -65,20 +73,50 @@ export function StatusHero({
   children?: React.ReactNode;
 }) {
   const status = booking.status;
-  const stage = resolveStage(booking);
+  // Contract-drawdown bookings (initiated under a contract) follow a dedicated
+  // wizard — initiated → submitted → accepted → payment → … — instead of the
+  // direct booking's Request/Approval/Contract stages.
+  const isContractDrawdown = Boolean(booking.contractId) && !isNegative(status);
+  const stages = isContractDrawdown
+    ? CONTRACT_PROGRESS_STAGES
+    : PROGRESS_STAGES;
+  const arrivalStage = isContractDrawdown
+    ? CONTRACT_ARRIVAL_STAGE
+    : ARRIVAL_STAGE;
+  const stage = isContractDrawdown
+    ? resolveContractStage(booking)
+    : resolveStage(booking);
+  // Contract-drawdown instance in the clearance gate: it was INITIATED with one
+  // click (no cargo/date yet), not submitted through the wizard.
+  const isInitiatedInstance =
+    status === "AWAITING_DOCUMENTS" && Boolean(booking.contractId);
   // Legacy bookings never reach the ARRIVED status — they light up the Arrival
   // stage from the train's ARRIVED state while staying IN_TRANSIT, so the
   // headline is overridden here. Bookings with a per-booking journey carry the
   // ARRIVED status themselves and use its own STATUS_MAP copy.
   const cfg =
-    stage === ARRIVAL_STAGE && STATUS_MAP[status]?.stage !== ARRIVAL_STAGE
+    stage === arrivalStage && STATUS_MAP[status]?.stage !== ARRIVAL_STAGE
       ? {
           title: "Train arrived at destination",
           description:
             "Your shipment reached its destination yard and is being unloaded and prepared for release.",
           stage,
         }
-      : (STATUS_MAP[status] ?? STATUS_MAP.DRAFT);
+      : isInitiatedInstance
+        ? {
+            title: "Booking initiated — clearance documents needed",
+            description:
+              "Upload the required clearance documents to start the review. Once the review is finalized you can book your shipment.",
+            stage,
+          }
+        : isContractDrawdown && status === "FULLY_EXECUTED"
+          ? {
+              title: "Accepted by operations",
+              description:
+                "Operations accepted your order. Complete payment once your train is selected to secure the slot.",
+              stage,
+            }
+          : (STATUS_MAP[status] ?? STATUS_MAP.DRAFT);
   const negative = isNegative(status);
   const draft = isDraftLike(status);
 
@@ -121,6 +159,7 @@ export function StatusHero({
       {children ?? (
         <ProgressTracker
           current={stage}
+          stages={stages}
           tone={draft ? "ink" : "green"}
           negative={negative}
         />
@@ -131,18 +170,21 @@ export function StatusHero({
 
 function ProgressTracker({
   current,
+  stages = PROGRESS_STAGES,
   tone = "green",
 }: {
   current: number;
+  /** Which stage set to render — direct or contract-drawdown. */
+  stages?: typeof PROGRESS_STAGES;
   tone?: "green" | "ink";
   negative?: boolean;
 }) {
-  const last = PROGRESS_STAGES.length - 1;
+  const last = stages.length - 1;
   const activeFill = tone === "ink" ? "#0C1A2B" : "#0EA371";
   const activeRing = tone === "ink" ? "#D9E0E7" : "#BFE8D4";
 
   return (
-    /* Scrollable on mobile so 5 stages never overflow */
+    /* Scrollable on mobile so the stages never overflow */
     <Box
       className="overflow-x-auto pt-2"
       style={
@@ -152,8 +194,8 @@ function ProgressTracker({
         } as React.CSSProperties
       }
     >
-      <div className="flex items-start" style={{ minWidth: 520 }}>
-        {PROGRESS_STAGES.map((stage, idx) => {
+      <div className="flex items-start" style={{ minWidth: 640 }}>
+        {stages.map((stage, idx) => {
           const state =
             idx < current ? "done" : idx === current ? "active" : "idle";
           const Icon = stage.icon;
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/constants.ts b/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/constants.ts
index 4b32a059c..ae3d20e4e 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/constants.ts
+++ b/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/constants.ts
@@ -3,6 +3,7 @@ import {
   FileText,
   MapPin,
   PackageCheck,
+  PackageOpen,
   ShieldCheck,
   Ship,
   Train,
@@ -15,14 +16,23 @@ export const PROGRESS_STAGES = [
     statuses: ["DRAFT", "CHANGES_REQUESTED"],
   },
   {
+    // AWAITING_DOCUMENTS: a fresh contract-drawdown booking lands here — the
+    // customer just submitted it and now uploads clearance documents.
     label: "Submitted",
     icon: ClipboardCheck,
-    statuses: ["SUBMITTED"],
+    statuses: ["SUBMITTED", "AWAITING_DOCUMENTS"],
   },
   {
+    // Clearance review is the approval step for contract-drawdown bookings.
     label: "Approval",
     icon: ShieldCheck,
-    statuses: ["PENDING_APPROVAL", "APPROVED_PENDING_SIGNATURE", "APPROVED"],
+    statuses: [
+      "PENDING_APPROVAL",
+      "APPROVED_PENDING_SIGNATURE",
+      "APPROVED",
+      "DOCUMENTS_UNDER_REVIEW",
+      "CLEARANCE_READY",
+    ],
   },
   {
     label: "Contract",
@@ -36,6 +46,7 @@ export const PROGRESS_STAGES = [
       "FULLY_EXECUTED",
       "SELECTED_FOR_BATCH",
       "PAYMENT_VERIFICATION_IN_PROGRESS",
+      "OPERATION_REQUESTED",
     ],
   },
   {
@@ -54,12 +65,22 @@ export const PROGRESS_STAGES = [
     statuses: ["EXPIRED", "IN_TRANSIT"],
   },
   {
-    // ARRIVED: cargo unloaded at the booking's own destination yard (segment
-    // corridor journeys). Legacy bookings stay IN_TRANSIT until delivery, so
-    // this stage also lights up from the assigned train's own status
-    // (trainScheduleStatus === "ARRIVED") — see resolveStage.
+    // The train reached the booking's destination yard — cargo may still be
+    // on board. No booking status of its own: it lights up from the assigned
+    // train's status (trainScheduleStatus === "ARRIVED") while the booking is
+    // still IN_TRANSIT — see resolveStage. Bookings unloaded mid-corridor (or
+    // auto-unloaded on a checkpoint) jump straight past it to Unloading.
     label: "Arrival",
     icon: MapPin,
+    statuses: [],
+  },
+  {
+    // ARRIVED: cargo unloaded off the train at the booking's own destination
+    // yard. Unloading is automatic — the API alights the booking the moment a
+    // checkpoint is recorded at its destination yard (or, as a fallback, when
+    // the train's final arrival is logged).
+    label: "Unloading",
+    icon: PackageOpen,
     statuses: ["ARRIVED"],
   },
   {
@@ -69,17 +90,136 @@ export const PROGRESS_STAGES = [
   },
 ];
 
-/** Stage index of the Arrival step (train ARRIVED, cargo not yet delivered). */
+/** Stage index of the Arrival step (train ARRIVED, cargo not yet unloaded). */
 export const ARRIVAL_STAGE = PROGRESS_STAGES.findIndex(
   (s) => s.label === "Arrival",
 );
 
+/**
+ * Progress stages for a CONTRACT-DRAWDOWN booking (created under a contract via
+ * initiate → clearance → book). These bookings never pass through the direct
+ * wizard's Request/Approval/Contract stages — the contract is already executed.
+ * Their journey is: initiated (bare instance in clearance) → submitted (booking
+ * completed, sent to operations) → accepted (operations accepted) → payment →
+ * loading → transit → arrival → unloading → complete.
+ */
+export const CONTRACT_PROGRESS_STAGES = [
+  {
+    // The instance was initiated with one click and is going through per-booking
+    // clearance (upload → review → ready). One-time drawdowns without clearance
+    // start here too until they are booked.
+    label: "Initiated",
+    icon: FileText,
+    statuses: [
+      "DRAFT",
+      "CHANGES_REQUESTED",
+      "AWAITING_DOCUMENTS",
+      "DOCUMENTS_UNDER_REVIEW",
+      "CLEARANCE_READY",
+    ],
+  },
+  {
+    // The customer (or GL) completed the booking — cargo + shipment day — and it
+    // is submitted to operations for acceptance.
+    label: "Submitted",
+    icon: ClipboardCheck,
+    statuses: [
+      "OPERATION_REQUEST_PENDING",
+      "OPERATION_CHANGES_REQUESTED",
+      "OPERATION_PRICE_PENDING_CONFIRM",
+      "OPERATION_REQUESTED",
+    ],
+  },
+  {
+    // Operations accepted the order — it now sits in the batch holding pool
+    // awaiting a train and its pay window.
+    label: "Accepted",
+    icon: ShieldCheck,
+    statuses: ["FULLY_EXECUTED", "READY_FOR_ASSIGNMENT"],
+  },
+  {
+    label: "Payment",
+    icon: ShieldCheck,
+    statuses: [
+      "SELECTED_FOR_BATCH",
+      "PAYMENT_VERIFICATION_IN_PROGRESS",
+      "EXPIRED",
+      "PRICE_CHANGED_PENDING_CONFIRM",
+    ],
+  },
+  {
+    label: "Loading",
+    icon: Ship,
+    statuses: [
+      "PAID",
+      "PNR_GENERATED",
+      "PENDING_CONSOLIDATION",
+      "CONSOLIDATED",
+      "WAGON_ASSIGNED",
+      "INVOICED",
+      "ROAD_DISPATCH_PENDING",
+    ],
+  },
+  {
+    label: "In Transit",
+    icon: Train,
+    statuses: ["IN_TRANSIT"],
+  },
+  {
+    // Lights up from the assigned train's ARRIVED state while the booking is
+    // still IN_TRANSIT — no status of its own (see resolveContractStage).
+    label: "Arrival",
+    icon: MapPin,
+    statuses: [],
+  },
+  {
+    label: "Unloading",
+    icon: PackageOpen,
+    statuses: ["ARRIVED"],
+  },
+  {
+    label: "Complete",
+    icon: PackageCheck,
+    statuses: ["COMPLETED", "DELIVERED"],
+  },
+];
+
+/** Contract-drawdown Arrival stage index. */
+export const CONTRACT_ARRIVAL_STAGE = CONTRACT_PROGRESS_STAGES.findIndex(
+  (s) => s.label === "Arrival",
+);
+
+/** status → contract-drawdown stage index, derived from the stage array. */
+const CONTRACT_STAGE_BY_STATUS: Record<string, number> = {};
+CONTRACT_PROGRESS_STAGES.forEach((stage, index) => {
+  stage.statuses.forEach((status) => {
+    CONTRACT_STAGE_BY_STATUS[status] = index;
+  });
+});
+
+/**
+ * Contract-drawdown stage for a booking, factoring in the assigned train's
+ * status the same way {@link resolveStage} does for direct bookings.
+ */
+export function resolveContractStage(booking: {
+  status: string;
+  trainScheduleStatus?: string | null;
+}): number {
+  if (
+    booking.status === "IN_TRANSIT" &&
+    booking.trainScheduleStatus === "ARRIVED"
+  ) {
+    return CONTRACT_ARRIVAL_STAGE;
+  }
+  return CONTRACT_STAGE_BY_STATUS[booking.status] ?? 0;
+}
+
 /**
  * Stage for a booking, factoring in the assigned train's operational status:
- * a booking with per-booking journey data reaches ARRIVED when it is unloaded
- * at its own destination yard; a legacy booking is stuck at IN_TRANSIT between
- * dispatch and delivery, so once its train has ARRIVED the tracker advances to
- * the Arrival stage.
+ * a booking with per-booking journey data reaches ARRIVED (the Unloading
+ * stage) when it is unloaded at its own destination yard; a legacy booking is
+ * stuck at IN_TRANSIT between dispatch and delivery, so once its train has
+ * ARRIVED the tracker advances to the Arrival stage.
  */
 export function resolveStage(booking: {
   status: string;
@@ -181,10 +321,10 @@ export const STATUS_MAP: Record<
     stage: 6,
   },
   ARRIVED: {
-    title: "Arrived at destination",
+    title: "Unloaded at destination",
     description:
       "Your cargo has been unloaded at its destination yard and is being prepared for release.",
-    stage: 7,
+    stage: 8,
   },
   OPERATION_REQUEST_PENDING: {
     title: "Operation request under review",
@@ -223,24 +363,24 @@ export const STATUS_MAP: Record<
     title: "Clearance documents needed",
     description:
       "Upload the required clearance documents so your shipment can be reviewed.",
-    stage: 5,
+    stage: 1,
   },
   DOCUMENTS_UNDER_REVIEW: {
     title: "Documents under review",
     description:
       "Your clearance documents are being reviewed. Re-upload any queried documents to proceed.",
-    stage: 5,
+    stage: 2,
   },
   CLEARANCE_READY: {
     title: "Cleared — choose a shipment day",
     description:
       "Clearance is complete. Pick a shipment day and proceed to operation.",
-    stage: 5,
+    stage: 2,
   },
   OPERATION_REQUESTED: {
     title: "Operation requested",
     description: "Operation requested. An operator will take your shipment forward.",
-    stage: 5,
+    stage: 4,
   },
   CONTRACT_ACTIVE: {
     title: "Contract active",
@@ -251,7 +391,7 @@ export const STATUS_MAP: Record<
     title: "Contract closed",
     description:
       "This general contract is closed — its reserved quantity has been used or its window has elapsed.",
-    stage: 8,
+    stage: 9,
   },
   PRICE_CHANGED_PENDING_CONFIRM: {
     title: "Price changed — confirm to proceed",
@@ -277,12 +417,12 @@ export const STATUS_MAP: Record<
   COMPLETED: {
     title: "Service complete",
     description: "Cargo delivered and service successfully terminated.",
-    stage: 8,
+    stage: 9,
   },
   DELIVERED: {
     title: "Service complete",
     description: "Cargo delivered and service successfully terminated.",
-    stage: 8,
+    stage: 9,
   },
   REJECTED: {
     title: "Booking rejected",
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/index.tsx b/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/index.tsx
index a06a89ca0..9cb059503 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/index.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/index.tsx
@@ -2,6 +2,7 @@ import { Box, Center, Loader, Stack, Text } from "@mantine/core";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { AlertTriangle } from "lucide-react";
 import { useParams } from "react-router-dom";
+import type { Freight } from "@edr/types";
 
 import { api } from "@/services/api";
 
@@ -9,7 +10,7 @@ import { ChangesRequestedView } from "./ChangesRequestedView";
 import { DraftBookingView } from "./DraftBookingView";
 import { PageShell, SectionCard } from "./components/layout";
 import { ReadonlyBookingView } from "./ReadonlyBookingView";
-import { isDraftLike } from "./utils";
+import { isBookingLive, isDraftLike } from "./utils";
 
 export default function BookingDetailPage() {
   const { id } = useParams<{ id: string }>();
@@ -21,7 +22,22 @@ export default function BookingDetailPage() {
     isError,
     error,
   } = useQuery(
-    api.bookings.get.queryOptions({ input: { id: id! }, enabled: !!id }),
+    api.bookings.get.queryOptions({
+      input: { id: id! },
+      enabled: !!id,
+      // Staff/system transitions (operations accepting an order, batch
+      // selection, clearance review, transit) happen without any customer
+      // action and can't push to this open page. Poll while the booking is
+      // still live so those changes surface — e.g. an accepted operation
+      // request leaving the "under review" state — and stop once it settles.
+      refetchInterval: (query) =>
+        isBookingLive(
+          (query.state.data as Freight.IBooking | undefined)?.status,
+        )
+          ? 20_000
+          : false,
+      refetchOnWindowFocus: true,
+    }),
   );
 
   const refetchBooking = () => {
@@ -94,5 +110,7 @@ export default function BookingDetailPage() {
       <DraftBookingView booking={booking} onBookingUpdated={refetchBooking} />
     );
   }
-  return <ReadonlyBookingView booking={booking} onBookingUpdated={refetchBooking} />;
+  return (
+    <ReadonlyBookingView booking={booking} onBookingUpdated={refetchBooking} />
+  );
 }
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/utils.ts b/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/utils.ts
index 031a2d38c..432dcf8f5 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/utils.ts
+++ b/apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/utils.ts
@@ -6,6 +6,27 @@ export const isNegative = (s: string) => s === "CANCELLED" || s === "REJECTED";
 export const isDraftLike = (s: string) =>
   s === "DRAFT" || s === "CHANGES_REQUESTED";
 
+/**
+ * Terminal booking statuses — nothing changes server-side once a booking lands
+ * here, so the customer view has no reason to keep polling.
+ */
+const SETTLED_STATUSES = new Set([
+  "COMPLETED",
+  "DELIVERED",
+  "CANCELLED",
+  "REJECTED",
+]);
+
+/**
+ * True while a booking can still change from a staff/system action the customer
+ * did not trigger (operations accepting an order, batch selection, clearance
+ * review, transit progress). Used to poll the customer-facing booking queries so
+ * those transitions surface without a manual reload — e.g. an accepted operation
+ * request flipping out of "under review".
+ */
+export const isBookingLive = (s?: string | null) =>
+  !!s && !SETTLED_STATUSES.has(s);
+
 export function fmtDate(value?: string | null) {
   if (!value) return "—";
   const d = new Date(value);
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/clearance/BookingActionButton.tsx b/apps/edr-freight-web/portal/src/pages/bookings/clearance/BookingActionButton.tsx
index 03dfa6ac8..ec9b8c509 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/clearance/BookingActionButton.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/clearance/BookingActionButton.tsx
@@ -1,6 +1,13 @@
 import { Box, Button } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
-import { AlertCircle, ArrowRight, PencilLine, Upload } from "lucide-react";
+import {
+  AlertCircle,
+  ArrowRight,
+  PackagePlus,
+  PencilLine,
+  Upload,
+} from "lucide-react";
+import { useNavigate } from "react-router-dom";
 
 import type { Freight } from "@edr/types";
 
@@ -19,6 +26,7 @@ const ICON_BY_KIND: Record<
   UPLOAD_DOCUMENTS: Upload,
   FIX_DOCUMENTS: AlertCircle,
   SCHEDULE_OPERATION: ArrowRight,
+  BOOK: PackagePlus,
 };
 
 interface BookingActionButtonProps {
@@ -39,6 +47,7 @@ export function BookingActionButton({
   size = "sm",
 }: BookingActionButtonProps) {
   const [opened, { open, close }] = useDisclosure(false);
+  const navigate = useNavigate();
 
   // Staff returned the booking for changes — let the customer update the docs
   // they submitted and resubmit, in place.
@@ -49,6 +58,9 @@ export function BookingActionButton({
 
   const Icon = action ? ICON_BY_KIND[action.kind] : PencilLine;
   const label = action ? action.label : "Update & resubmit";
+  // BOOK navigates to the booking form (cargo + day + window check) — the
+  // same page a one-time booking uses — instead of opening the modal.
+  const navigateTo = action?.kind === "BOOK" ? action.to : undefined;
 
   return (
     // Mantine modals portal to <body>, but React events still bubble through
@@ -65,7 +77,8 @@ export function BookingActionButton({
         leftSection={<Icon size={14} />}
         onClick={(e) => {
           e.stopPropagation();
-          open();
+          if (navigateTo) navigate(navigateTo);
+          else open();
         }}
       >
         {label}
@@ -77,7 +90,7 @@ export function BookingActionButton({
           opened={opened}
           onClose={close}
         />
-      ) : (
+      ) : navigateTo ? null : (
         <BookingActionModal booking={booking} opened={opened} onClose={close} />
       )}
     </Box>
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/clearance/BookingActionModal.tsx b/apps/edr-freight-web/portal/src/pages/bookings/clearance/BookingActionModal.tsx
index 23676efe8..8f93e040c 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/clearance/BookingActionModal.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/clearance/BookingActionModal.tsx
@@ -1,5 +1,6 @@
 import { Box, Button, Group, Modal, Text } from "@mantine/core";
-import { CheckCircle2, Upload } from "lucide-react";
+import { CheckCircle2, PackagePlus, Upload } from "lucide-react";
+import { useNavigate } from "react-router-dom";
 
 import type { Freight } from "@edr/types";
 
@@ -40,30 +41,32 @@ function BookingActionModalBody({
 }) {
   const action = getBookingNextAction(booking);
   const flow = useClearanceFlow(booking);
+  const navigate = useNavigate();
   const reference = booking.reference;
 
-  const handleSubmit = () => flow.submitDocuments();
+  const handleSubmit = () => flow.submitDocuments({ onSuccess: onClose });
   const handleProceed = () => flow.proceedToOperation({ onSuccess: onClose });
 
   return (
+    // Sized and styled to match the contract clearance modal
+    // (ContractClearanceAction) so both flows read as the same surface.
     <Modal
       opened
       onClose={onClose}
       centered
-      size={560}
-      radius={16}
-      padding={24}
+      size="xl"
+      radius="md"
       title={
         <Box>
-          <Text fz={16} fw={800} c="#10202F">
-            {action?.title ?? "Booking"}
+          <Text fw={700} fz={16}>
+            {action?.title ?? "Clearance documents"}
           </Text>
           <Text fz={12} c="dimmed" ff="monospace">
             {reference}
           </Text>
         </Box>
       }
-      overlayProps={{ backgroundOpacity: 0.5, blur: 4 }}
+      overlayProps={{ blur: 2, backgroundOpacity: 0.55 }}
       styles={{ body: { paddingTop: 8 } }}
     >
       {flow.isLoading || !flow.clearance ? (
@@ -91,17 +94,34 @@ function BookingActionModalBody({
                   Submit documents
                 </Button>
               )}
-              {flow.isReady && (
+              {flow.needsCompletion && flow.completeTo ? (
                 <Button
                   color="edr-green"
                   radius="md"
-                  leftSection={<CheckCircle2 size={16} />}
-                  onClick={handleProceed}
-                  loading={flow.proceedMutation.isPending}
-                  disabled={!flow.scheduledDate}
+                  leftSection={<PackagePlus size={16} />}
+                  onClick={() => {
+                    onClose();
+                    navigate(flow.completeTo!);
+                  }}
                 >
-                  Proceed to operation
+                  Complete booking
                 </Button>
+              ) : (
+                // Customs bare instances await GL completion — no customer
+                // proceed button (the server rejects it anyway).
+                flow.isReady &&
+                !flow.awaitingGlCompletion && (
+                  <Button
+                    color="edr-green"
+                    radius="md"
+                    leftSection={<CheckCircle2 size={16} />}
+                    onClick={handleProceed}
+                    loading={flow.proceedMutation.isPending}
+                    disabled={!flow.scheduledDate}
+                  >
+                    Proceed to operation
+                  </Button>
+                )
               )}
             </Group>
           }
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/clearance/ClearanceFlow.tsx b/apps/edr-freight-web/portal/src/pages/bookings/clearance/ClearanceFlow.tsx
index 86566eba0..5d1af234d 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/clearance/ClearanceFlow.tsx
+++ b/apps/edr-freight-web/portal/src/pages/bookings/clearance/ClearanceFlow.tsx
@@ -54,6 +54,8 @@ export function ClearanceFlow({ booking, flow, footer }: ClearanceFlowProps) {
     customerDocs,
     glDocs,
     isReady,
+    needsCompletion,
+    awaitingGlCompletion,
     canUpload,
     isInitialUpload,
     status,
@@ -78,9 +80,13 @@ export function ClearanceFlow({ booking, flow, footer }: ClearanceFlowProps) {
     <Stack gap={0}>
       {isReady ? (
         <Alert color="teal" radius="md" icon={<CheckCircle2 size={18} />} mb="md">
-          {clearance.includesCustoms
-            ? "Customs clearance is complete and your cleared documents are available below. You can now proceed to operation."
-            : "Clearance is ready. You can now proceed to operation."}
+          {needsCompletion
+            ? "Clearance is finalized. Complete your booking now — enter the cargo details and pick a shipment day inside an open booking window."
+            : awaitingGlCompletion
+              ? "Customs clearance is complete. Global Logistics is completing your booking (cargo details and shipment day) — you will be notified when payment is due."
+              : clearance.includesCustoms
+                ? "Customs clearance is complete and your cleared documents are available below. You can now proceed to operation."
+                : "Clearance is ready. You can now proceed to operation."}
         </Alert>
       ) : status === "DOCUMENTS_UNDER_REVIEW" ? (
         <Alert color="blue" radius="md" icon={<Clock size={18} />} mb="md">
@@ -208,7 +214,7 @@ export function ClearanceFlow({ booking, flow, footer }: ClearanceFlowProps) {
         </Alert>
       )}
 
-      {isReady && (
+      {isReady && !needsCompletion && !awaitingGlCompletion && (
         <Box mt="lg">
           <Text fz="13px" fw={700} c="#10202F" mb={6}>
             Choose your shipment day
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/clearance/bookingNextAction.ts b/apps/edr-freight-web/portal/src/pages/bookings/clearance/bookingNextAction.ts
index 5f88349dc..1ebb047a6 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/clearance/bookingNextAction.ts
+++ b/apps/edr-freight-web/portal/src/pages/bookings/clearance/bookingNextAction.ts
@@ -9,7 +9,8 @@ import type { Freight } from "@edr/types";
 export type BookingActionKind =
   | "UPLOAD_DOCUMENTS" // AWAITING_DOCUMENTS — upload the required clearance docs
   | "FIX_DOCUMENTS" // DOCUMENTS_UNDER_REVIEW — some docs queried, re-upload them
-  | "SCHEDULE_OPERATION"; // CLEARANCE_READY — pick a day and proceed to operation
+  | "SCHEDULE_OPERATION" // CLEARANCE_READY (legacy with cargo) — pick a day and proceed
+  | "BOOK"; // CLEARANCE_READY bare instance — navigate to the booking form
 
 export interface BookingNextAction {
   kind: BookingActionKind;
@@ -17,6 +18,8 @@ export interface BookingNextAction {
   label: string;
   /** Modal title. */
   title: string;
+  /** Set for navigation actions (BOOK) — the button navigates instead of opening the modal. */
+  to?: string;
 }
 
 const ACTION_BY_STATUS: Record<string, BookingNextAction> = {
@@ -37,6 +40,18 @@ const ACTION_BY_STATUS: Record<string, BookingNextAction> = {
   },
 };
 
+type ActionBooking = Pick<
+  Freight.IBooking,
+  "id" | "status" | "contractId" | "totalAmount" | "customsClearingEnabled"
+>;
+
+/** Initiated instance still carrying no cargo/price (clearance-first flow). */
+function isBareInstance(booking: ActionBooking): boolean {
+  return (
+    Boolean(booking.contractId) && !(Number(booking.totalAmount ?? 0) > 0)
+  );
+}
+
 /**
  * Resolve the customer's next clearance/operation action for a booking, or
  * `null` when there's nothing for them to do at this stage. Pure + cheap so it
@@ -47,8 +62,27 @@ const ACTION_BY_STATUS: Record<string, BookingNextAction> = {
  * "under review" state when nothing is actually queried.
  */
 export function getBookingNextAction(
-  booking: Pick<Freight.IBooking, "status">,
+  booking: ActionBooking,
 ): BookingNextAction | null {
+  if (booking.status === "CLEARANCE_READY" && isBareInstance(booking)) {
+    // Customs (Path B): GL completes the booking — the customer can only view
+    // the finished clearance in the modal.
+    if (booking.customsClearingEnabled) {
+      return {
+        kind: "SCHEDULE_OPERATION",
+        label: "View clearance",
+        title: "Clearance complete",
+      };
+    }
+    // Non-customs (Path A): straight to the booking form — cargo + shipment
+    // day + window check, the same page a one-time booking uses.
+    return {
+      kind: "BOOK",
+      label: "Book",
+      title: "Book your shipment",
+      to: `/contracts/${booking.contractId}/bookings/${booking.id}/complete`,
+    };
+  }
   return ACTION_BY_STATUS[booking.status as string] ?? null;
 }
 
@@ -58,9 +92,7 @@ export function getBookingNextAction(
  * booking that needs documents updated and resubmitting. Used to decide whether
  * to render {@link BookingActionButton}.
  */
-export function bookingHasInlineAction(
-  booking: Pick<Freight.IBooking, "status">,
-): boolean {
+export function bookingHasInlineAction(booking: ActionBooking): boolean {
   return (
     booking.status === "CHANGES_REQUESTED" ||
     getBookingNextAction(booking) !== null
diff --git a/apps/edr-freight-web/portal/src/pages/bookings/clearance/useClearanceFlow.ts b/apps/edr-freight-web/portal/src/pages/bookings/clearance/useClearanceFlow.ts
index ab9560ac6..63b3d03da 100644
--- a/apps/edr-freight-web/portal/src/pages/bookings/clearance/useClearanceFlow.ts
+++ b/apps/edr-freight-web/portal/src/pages/bookings/clearance/useClearanceFlow.ts
@@ -67,6 +67,20 @@ export function useClearanceFlow(booking: Freight.IBooking) {
   );
 
   const isReady = status === "CLEARANCE_READY";
+  // Bare initiated instance: created with no cargo and no price; completion
+  // (cargo + shipment day + window check) happens on the full booking form.
+  const isBareInstance =
+    Boolean(booking.contractId) && !(Number(booking.totalAmount ?? 0) > 0);
+  // Non-customs (Path A): the CUSTOMER completes the booking himself.
+  const needsCompletion =
+    isReady && isBareInstance && !clearance?.includesCustoms;
+  const completeTo = needsCompletion
+    ? `/contracts/${booking.contractId}/bookings/${booking.id}/complete`
+    : null;
+  // Customs (Path B): GL completes on the customer's behalf — the customer
+  // just sees that clearance is done and GL is preparing the booking.
+  const awaitingGlCompletion =
+    isReady && isBareInstance && Boolean(clearance?.includesCustoms);
   const canUpload =
     status === "AWAITING_DOCUMENTS" || status === "DOCUMENTS_UNDER_REVIEW";
   // The very first upload (nothing in review yet). Here every required document
@@ -146,6 +160,9 @@ export function useClearanceFlow(booking: Freight.IBooking) {
     customerDocs,
     glDocs,
     isReady,
+    needsCompletion,
+    completeTo,
+    awaitingGlCompletion,
     canUpload,
     isInitialUpload,
     // staged upload state
diff --git a/apps/edr-freight-web/portal/src/pages/contracts/ContractClearancePanel.tsx b/apps/edr-freight-web/portal/src/pages/contracts/ContractClearancePanel.tsx
index 6fc88c678..67b3fead8 100644
--- a/apps/edr-freight-web/portal/src/pages/contracts/ContractClearancePanel.tsx
+++ b/apps/edr-freight-web/portal/src/pages/contracts/ContractClearancePanel.tsx
@@ -39,6 +39,8 @@ export interface ContractClearancePanelProps {
   tradeDirection?: string;
   /** Show the loading state without the surrounding Paper (e.g. inside a modal). */
   bare?: boolean;
+  /** Called after a successful document submission (e.g. to close the host modal). */
+  onSubmitted?: () => void;
 }
 
 /**
@@ -52,6 +54,7 @@ export function ContractClearancePanel({
   contractId,
   tradeDirection = "IMPORT",
   bare,
+  onSubmitted,
 }: ContractClearancePanelProps) {
   const queryClient = useQueryClient();
   const [pending, setPending] = useState<Record<string, File>>({});
@@ -77,6 +80,13 @@ export function ContractClearancePanel({
       queryClient.invalidateQueries({
         queryKey: api.contracts.get.queryKey({ id: contractId }),
       });
+      // Submitting moves the contract to CLEARANCE_UNDER_REVIEW — refresh every
+      // contracts-list query (prefix key) so the /contracts table row and its
+      // action button update without a page reload.
+      queryClient.invalidateQueries({
+        queryKey: api.contracts.list.queryKey(),
+      });
+      onSubmitted?.();
     },
   });
 
diff --git a/apps/edr-freight-web/portal/src/pages/contracts/ContractDetailPage.tsx b/apps/edr-freight-web/portal/src/pages/contracts/ContractDetailPage.tsx
index 784fa6bf5..0eb06ea79 100644
--- a/apps/edr-freight-web/portal/src/pages/contracts/ContractDetailPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/contracts/ContractDetailPage.tsx
@@ -61,6 +61,7 @@ import { labelForDocCode } from "@/pages/bookings/resubmit";
 import { ContractClearancePanel } from "./ContractClearancePanel";
 import { ContractClearanceWorkflowBanner } from "./ContractClearanceWorkflowBanner";
 import { ClearanceUploadedDocumentsPanel } from "@/components/contracts/ClearanceUploadedDocumentsPanel";
+import { InitiateBookingButton } from "@/components/customer-actions/ContractCustomerAction";
 import { formatRateUnit } from "./new-contract-form/unit-rates";
 import { getContractBookingAction } from "./contract-booking-action";
 import { closedWindowMessage, hasOpenWindow } from "./booking-window";
@@ -241,11 +242,10 @@ export default function ContractDetailPage() {
   });
   // Intercity contracts are never window-gated: the shipment rides a passing
   // import/export train that staff assign later, so booking is always open.
-  // GENERAL contracts are also not gated at creation — the booking enters the
-  // per-booking clearance gate first and picks its shipment day at proceed time.
+  // ONE_TIME and GENERAL contracts are both gated — booking is only possible
+  // while a window on the contract's lane is open.
   const bookingWindowOpen =
     contract?.tradeDirection === "DOMESTIC" ||
-    contract?.contractKind === "GENERAL" ||
     hasOpenWindow(bookingWindows);
 
   // Draw-down capacity per cargo line (GENERAL contracts only). The backend
@@ -349,6 +349,9 @@ export default function ContractDetailPage() {
   const canBookShipment =
     bookingAction.kind === "book" || bookingAction.kind === "rebook";
   const canRequestShipment = bookingAction.kind === "request";
+  // GENERAL non-customs import/export: one-click bare booking instance — the
+  // per-booking clearance runs first, so no window gate applies here.
+  const canInitiateBooking = bookingAction.kind === "initiate";
   // Customs + clearance finalized: GL is preparing the booking — surface a
   // status notice instead of any action.
   const glPreparingBooking = customsPath && clearanceFinalized;
@@ -439,6 +442,13 @@ export default function ContractDetailPage() {
                 Request shipment
               </Button>
             )}
+            {canInitiateBooking && (
+              <InitiateBookingButton
+                contract={contract}
+                icon={PackagePlus}
+                size="md"
+              />
+            )}
             {canBookShipment &&
               (bookingWindowOpen ? (
                 <Button
@@ -1290,6 +1300,13 @@ export default function ContractDetailPage() {
             >
               <Group justify="space-between" align="center" mb="md">
                 <SectionLabel>Bookings under this contract</SectionLabel>
+                {canInitiateBooking && (
+                  <InitiateBookingButton
+                    contract={contract}
+                    icon={PackagePlus}
+                    size="xs"
+                  />
+                )}
                 {canBookShipment && bookingWindowOpen && (
                   <Button
                     color="edr-green"
diff --git a/apps/edr-freight-web/portal/src/pages/contracts/ContractsList.tsx b/apps/edr-freight-web/portal/src/pages/contracts/ContractsList.tsx
index b6ba870d6..40a519840 100644
--- a/apps/edr-freight-web/portal/src/pages/contracts/ContractsList.tsx
+++ b/apps/edr-freight-web/portal/src/pages/contracts/ContractsList.tsx
@@ -33,7 +33,6 @@ import {
   X,
 } from "lucide-react";
 
-import { PROFILE_TYPE_LABELS } from "@/constants/profileMode";
 import useAuth from "@/hooks/useAuth";
 import { api } from "@/services/api";
 import { ContractCustomerAction } from "@/components/customer-actions/ContractCustomerAction";
diff --git a/apps/edr-freight-web/portal/src/pages/contracts/NewContractPage.tsx b/apps/edr-freight-web/portal/src/pages/contracts/NewContractPage.tsx
index 9b24d3b8b..a30255ddf 100644
--- a/apps/edr-freight-web/portal/src/pages/contracts/NewContractPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/contracts/NewContractPage.tsx
@@ -59,6 +59,7 @@ import {
   ContractDocsEditor,
   documentSettingCode,
   missingRequiredDocKeys,
+  useCompanyDocuments,
 } from "./new-contract-form/ContractDocsEditor";
 import { PROFILE_TYPE_LABELS } from "@/constants/profileMode";
 import type { ProfileTypeValue } from "@/services/companies.service";
@@ -116,6 +117,9 @@ export default function NewContractPage({
     }),
     enabled: isEdit,
   });
+  // Profile documents (TIN, licenses, IDs) satisfy requirements too — the API
+  // carries them onto the contract on save.
+  const companyDocs = useCompanyDocuments();
 
   // Contract creation is gated on profile approval, same as bookings.
   if (!auth.isPending && auth.company && !auth.canBook) {
@@ -388,7 +392,7 @@ export default function NewContractPage({
     [profileStatusByType, profileTypes],
   );
 
-  // Create-profile modal state (license upload → createProfileAndSwitch).
+  // Create-profile modal state (license upload → createProfile).
   const [createTarget, setCreateTarget] = useState<ProfileTypeValue | null>(
     null,
   );
@@ -412,7 +416,7 @@ export default function NewContractPage({
       type: ProfileTypeValue;
       files: File[];
     }) => {
-      const res = await auth.createProfileAndSwitch(type, files);
+      const res = await auth.createProfile(type, files);
       if (!res.success) {
         throw new Error(res.error?.message ?? "Failed to create profile");
       }
@@ -526,6 +530,7 @@ export default function NewContractPage({
         editDocSettingQuery.data,
         editContract,
         editDocuments,
+        companyDocs,
       );
       if (missing.length > 0) {
         setShowDocErrors(true);
@@ -643,6 +648,7 @@ export default function NewContractPage({
           editDocSettingQuery.data,
           editContract,
           editDocuments,
+          companyDocs,
         );
         if (missing.length > 0) {
           setShowDocErrors(true);
@@ -846,6 +852,7 @@ export default function NewContractPage({
                         editDocSettingQuery.data,
                         editContract,
                         editDocuments,
+                        companyDocs,
                       ).map((k) => [k, "Required"]),
                     )
                     : {}
diff --git a/apps/edr-freight-web/portal/src/pages/contracts/NewShipmentPage.tsx b/apps/edr-freight-web/portal/src/pages/contracts/NewShipmentPage.tsx
index 9410fbc7b..0e0a3a1f3 100644
--- a/apps/edr-freight-web/portal/src/pages/contracts/NewShipmentPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/contracts/NewShipmentPage.tsx
@@ -9,11 +9,13 @@ import {
   Button,
   Center,
   Divider,
+  FileButton,
   Group,
   Loader,
   Modal,
   Paper,
   Stack,
+  Switch,
   Text,
   TextInput,
   Textarea,
@@ -26,9 +28,12 @@ import {
   CalendarDays,
   CheckCircle2,
   ChevronLeft,
+  FileDown,
+  FileUp,
   MapPin,
   Package,
   Receipt,
+  Repeat,
   X,
 } from "lucide-react";
 
@@ -51,6 +56,10 @@ import {
   initialShipmentFormValues,
 } from "./new-shipment-form/schema";
 import { computeShipmentTotal } from "./new-shipment-form/total";
+import {
+  downloadContainerImportTemplate,
+  parseContainerExcel,
+} from "./new-shipment-form/container-excel";
 import { ContractCapacityNotice } from "./new-shipment-form/ContractCapacityNotice";
 import { closedWindowMessage, hasOpenWindow } from "./booking-window";
 
@@ -68,7 +77,12 @@ const blockNegative = (event: KeyboardEvent<HTMLInputElement>) => {
 };
 
 export default function NewShipmentPage() {
-  const { id } = useParams<{ id: string }>();
+  // With `bookingId` the page runs in COMPLETION mode: the bare booking
+  // instance (created by "Initiate booking") already passed per-booking
+  // clearance, and this form supplies the deferred cargo + shipment day. Same
+  // window gates, same validation, same price confirmation — the submit just
+  // completes the existing booking instead of creating a new one.
+  const { id, bookingId } = useParams<{ id: string; bookingId?: string }>();
   const navigate = useNavigate();
 
   const { data: contract, isLoading } = useQuery(
@@ -137,14 +151,12 @@ export default function NewShipmentPage() {
 
   // Coarse gate: if the customer deep-links here while no booking window is
   // open, show the same closed-state notice as the contract page instead of the
-  // form. Still allowed the moment any window isOpenNow. Intercity contracts
-  // are never window-gated — the shipment rides a passing train that staff
-  // pick at finalize time, so booking is always open. GENERAL contracts are not
-  // gated at creation either: the booking enters per-booking clearance first
-  // and picks its shipment day at proceed time.
+  // form. Still allowed the moment any window isOpenNow. Applies to ONE_TIME
+  // and GENERAL alike. Intercity contracts are never window-gated — the
+  // shipment rides a passing train that staff pick at finalize time, so
+  // booking is always open.
   if (
     contract.tradeDirection !== "DOMESTIC" &&
-    contract.contractKind !== "GENERAL" &&
     !hasOpenWindow(bookingWindows)
   ) {
     return (
@@ -197,7 +209,13 @@ export default function NewShipmentPage() {
     );
   }
 
-  return <NewShipmentBookingForm contract={contract} contractId={id!} />;
+  return (
+    <NewShipmentBookingForm
+      contract={contract}
+      contractId={id!}
+      completeBookingId={bookingId}
+    />
+  );
 }
 
 function bulkUnitOfMeasure(
@@ -212,9 +230,12 @@ function bulkUnitOfMeasure(
 function NewShipmentBookingForm({
   contract,
   contractId,
+  completeBookingId,
 }: {
   contract: Freight.IContract;
   contractId: string;
+  /** Set when completing an initiated (bare) booking after clearance. */
+  completeBookingId?: string;
 }) {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
@@ -223,7 +244,12 @@ function NewShipmentBookingForm({
   );
 
   const form = useForm<ShipmentFormInputValues, any, ShipmentFormValues>({
-    defaultValues: initialShipmentFormValues,
+    defaultValues: {
+      ...initialShipmentFormValues,
+      // Seed the equipment-return toggle from the contract; the customer can
+      // still flip it per shipment.
+      withReturn: contract.equipmentReturn === "WITH_RETURN",
+    },
     resolver: zodResolver(
       createShipmentFormSchema({
         isContainer: contract.freightType === "CONTAINER",
@@ -239,7 +265,13 @@ function NewShipmentBookingForm({
 
   const submitMutation = useMutation({
     mutationFn: (dto: Freight.CreateBookingUnderContractDto) =>
-      api.contracts.createBookingUnderContract.call({ id: contractId, dto }),
+      completeBookingId
+        ? api.contracts.completeBookingUnderContract.call({
+            id: contractId,
+            bookingId: completeBookingId,
+            dto,
+          })
+        : api.contracts.createBookingUnderContract.call({ id: contractId, dto }),
     onSuccess: (booking) => {
       queryClient.invalidateQueries({ queryKey: api.bookings.list.queryKey() });
       queryClient.invalidateQueries({
@@ -269,8 +301,10 @@ function NewShipmentBookingForm({
       ...(values.scheduledDate
         ? { scheduledDate: new Date(values.scheduledDate).toISOString() }
         : {}),
+      // Equipment return is a container concern — bulk keeps the contract default.
       ...(isContainer
         ? {
+            equipmentReturn: values.withReturn ? "WITH_RETURN" : "WITHOUT_RETURN",
             containers: values.containers
               .filter((l) => Number(l.quantity) >= 1)
               .map((l) => ({
@@ -354,10 +388,12 @@ function NewShipmentBookingForm({
       >
         <Box>
           <Title order={1} fw={800} fz={26} style={{ letterSpacing: "-0.01em" }}>
-            New Shipment Booking
+            {completeBookingId ? "Complete Your Booking" : "New Shipment Booking"}
           </Title>
           <Text size="sm" c="edr-muted" mt={4}>
-            Book a shipment against contract {contract.reference}.
+            {completeBookingId
+              ? `Clearance is finalized — enter the cargo details and shipment day to complete your booking under contract ${contract.reference}.`
+              : `Book a shipment against contract ${contract.reference}.`}
           </Text>
         </Box>
         <Button
@@ -384,7 +420,9 @@ function NewShipmentBookingForm({
               mb="lg"
             >
               <Text size="sm" fw={600}>
-                Failed to create the shipment booking
+                {completeBookingId
+                  ? "Failed to complete the booking"
+                  : "Failed to create the shipment booking"}
               </Text>
               <Text size="sm" mt={4} c="red.7">
                 {submitMutation.error instanceof Error
@@ -398,6 +436,9 @@ function NewShipmentBookingForm({
           <Stack gap="lg" className="mx-auto max-w-4xl">
             <RouteStep form={form} contract={contract} routes={routes} />
             <CargoStep form={form} contract={contract} />
+            {contract.freightType === "CONTAINER" && (
+              <EquipmentReturnStep form={form} />
+            )}
             <ScheduleStep form={form} contract={contract} routes={routes} />
             <NotesSection form={form} />
           </Stack>
@@ -931,6 +972,60 @@ function CargoStep({
 
   const lines = form.watch("containers") ?? [];
 
+  // Excel import: one row per container. All-or-nothing — a file with any bad
+  // row is rejected with row-numbered errors so nothing is silently dropped.
+  const [importErrors, setImportErrors] = useState<string[]>([]);
+  const [importSummary, setImportSummary] = useState<string | null>(null);
+  const importResetRef = useRef<(() => void) | null>(null);
+  const excelOpts = {
+    allowedSizes: sizes,
+    includeHazardous: contract.isHazardous ?? false,
+    includeReefer: contract.isReefer ?? false,
+  };
+
+  const handleImportFile = async (file: File | null) => {
+    // Reset the hidden input so re-picking the same (fixed) file re-fires.
+    importResetRef.current?.();
+    if (!file) return;
+    const { rows, errors } = await parseContainerExcel(file, excelOpts);
+    if (errors.length > 0) {
+      setImportSummary(null);
+      setImportErrors(errors);
+      return;
+    }
+    // Replace only the lines for sizes present in the file; a contracted size
+    // the file omits keeps whatever was already entered for it.
+    const current = form.getValues("containers") ?? [];
+    const next = sizes.map((size) => {
+      const imported = rows.filter((r) => r.containerSize === size);
+      if (imported.length === 0) {
+        return (
+          current.find((l) => l.containerSize === size) ?? {
+            containerSize: size,
+            quantity: "1",
+            hazardousQuantity: "0",
+            reeferQuantity: "0",
+            units: [{ containerNumber: "", sealNumber: "", vgmTons: "" }],
+          }
+        );
+      }
+      return {
+        containerSize: size,
+        quantity: String(imported.length),
+        hazardousQuantity: String(imported.filter((r) => r.hazardous).length),
+        reeferQuantity: String(imported.filter((r) => r.reefer).length),
+        units: imported.map((r) => ({
+          containerNumber: r.containerNumber,
+          sealNumber: r.sealNumber,
+          vgmTons: r.vgmTons,
+        })),
+      };
+    });
+    form.setValue("containers", next, { shouldValidate: true, shouldDirty: true });
+    setImportErrors([]);
+    setImportSummary(`Imported ${rows.length} container(s) from ${file.name}.`);
+  };
+
   if (isContainer) {
     return (
       <StepCard>
@@ -940,6 +1035,83 @@ function CargoStep({
           description="Enter the quantity and per-container details for each size in your contract scope."
         />
         <Stack gap={18}>
+          {sizes.length > 0 && (
+            <Paper withBorder radius="md" p="md" style={{ borderColor: "#E6ECF2" }}>
+              <Group justify="space-between" wrap="wrap" gap="sm">
+                <Box>
+                  <Text fz={13} fw={600} c="#10202F">
+                    Import containers from Excel
+                  </Text>
+                  <Text fz={12} c="dimmed">
+                    One row per container. Importing fills the lines below for
+                    the sizes in your file.
+                  </Text>
+                </Box>
+                <Group gap="sm">
+                  <Button
+                    variant="default"
+                    size="xs"
+                    radius="md"
+                    leftSection={<FileDown size={14} />}
+                    onClick={() => downloadContainerImportTemplate(excelOpts)}
+                  >
+                    Download template
+                  </Button>
+                  <FileButton
+                    resetRef={importResetRef}
+                    accept=".xlsx,.xls"
+                    onChange={handleImportFile}
+                  >
+                    {(props) => (
+                      <Button
+                        {...props}
+                        size="xs"
+                        radius="md"
+                        color="edr-green"
+                        leftSection={<FileUp size={14} />}
+                      >
+                        Import Excel
+                      </Button>
+                    )}
+                  </FileButton>
+                </Group>
+              </Group>
+              {importErrors.length > 0 && (
+                <Alert
+                  color="red"
+                  variant="light"
+                  radius="md"
+                  icon={<AlertCircle size={16} />}
+                  title="Import failed — fix the file and try again"
+                  mt="sm"
+                >
+                  <Stack gap={4}>
+                    {importErrors.slice(0, 8).map((msg, i) => (
+                      <Text key={i} fz="xs">
+                        {msg}
+                      </Text>
+                    ))}
+                    {importErrors.length > 8 && (
+                      <Text fz="xs" c="dimmed">
+                        …and {importErrors.length - 8} more.
+                      </Text>
+                    )}
+                  </Stack>
+                </Alert>
+              )}
+              {importSummary && (
+                <Alert
+                  color="edr-green"
+                  variant="light"
+                  radius="md"
+                  icon={<CheckCircle2 size={16} />}
+                  mt="sm"
+                >
+                  <Text fz="xs">{importSummary}</Text>
+                </Alert>
+              )}
+            </Paper>
+          )}
           <ContractCapacityNotice contractId={contract.id} isContainer />
           {lines.map((line, index) => (
             <ContainerLineEditor
@@ -1049,6 +1221,78 @@ function CargoStep({
   );
 }
 
+function EquipmentReturnStep({ form }: { form: ShipmentForm }) {
+  return (
+    <StepCard>
+      <StepHeader
+        icon={<Repeat size={22} />}
+        title="Equipment Return"
+        description="Choose whether the empty container(s) come back to EDR after unloading."
+      />
+      <Controller
+        name="withReturn"
+        control={form.control}
+        render={({ field }) => {
+          const on = field.value ?? false;
+          return (
+            <Paper
+              withBorder
+              radius="md"
+              p="md"
+              style={{
+                borderColor: on ? "#CDEBDD" : "#E6ECF2",
+                background: on ? "#F6FBF8" : "white",
+                cursor: "pointer",
+                transition: "border-color 150ms ease, background 150ms ease",
+              }}
+              onClick={() => field.onChange(!on)}
+            >
+              <Group justify="space-between" wrap="nowrap" gap="md">
+                <Group gap={13} wrap="nowrap" align="flex-start">
+                  <Box
+                    style={{
+                      width: 38,
+                      height: 38,
+                      flexShrink: 0,
+                      borderRadius: 11,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      background: on ? "#ECF6F1" : "#F1F4F7",
+                      color: on ? "#0A6F4D" : "#6B7C8E",
+                    }}
+                  >
+                    <Repeat size={18} />
+                  </Box>
+                  <Box>
+                    <Text fz={14} fw={700} c="#10202F">
+                      With return
+                    </Text>
+                    <Text fz={12} c="dimmed" style={{ lineHeight: 1.4 }}>
+                      {on
+                        ? "Container(s) returned to EDR after unloading."
+                        : "Container(s) retained by you after delivery."}
+                    </Text>
+                  </Box>
+                </Group>
+                <Switch
+                  size="md"
+                  color="edr-green"
+                  aria-label="With return"
+                  checked={on}
+                  onChange={(e) => field.onChange(e.currentTarget.checked)}
+                  onClick={(e) => e.stopPropagation()}
+                  style={{ flexShrink: 0 }}
+                />
+              </Group>
+            </Paper>
+          );
+        }}
+      />
+    </StepCard>
+  );
+}
+
 function NotesSection({ form }: { form: ShipmentForm }) {
   return (
     <StepCard>
diff --git a/apps/edr-freight-web/portal/src/pages/contracts/NewShipmentRequestPage.tsx b/apps/edr-freight-web/portal/src/pages/contracts/NewShipmentRequestPage.tsx
index 38924251e..c0bfbfc4c 100644
--- a/apps/edr-freight-web/portal/src/pages/contracts/NewShipmentRequestPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/contracts/NewShipmentRequestPage.tsx
@@ -44,9 +44,18 @@ export default function NewShipmentRequestPage() {
   const submit = useMutation({
     mutationFn: (dto: Freight.CreateBookingRequestDto) =>
       contractsService.submitBookingRequest(id!, dto),
-    onSuccess: () => {
-      toast.success("Shipment request submitted");
-      navigate(`/contracts/${id}`);
+    onSuccess: (request) => {
+      // Clearance-first flow: the request auto-initiates a booking instance —
+      // send the customer straight to it to upload clearance documents.
+      if (request.createdBookingId) {
+        toast.success(
+          "Shipment initiated — upload your clearance documents to start the review.",
+        );
+        navigate(`/bookings/${request.createdBookingId}`);
+      } else {
+        toast.success("Shipment request submitted");
+        navigate(`/contracts/${id}`);
+      }
     },
     onError: (e: Error) => toast.error(e.message || "Could not submit request"),
   });
@@ -61,11 +70,16 @@ export default function NewShipmentRequestPage() {
 
   const isContainer = contract.freightType === "CONTAINER";
   const route = contract.routes?.[0];
+  // GENERAL customs contracts: GL schedules the shipment during clearance —
+  // the customer only states the quantity, never picks a date.
+  const hasCustoms =
+    contract.contractKind === "GENERAL" &&
+    (contract.serviceType?.includesCustoms ?? contract.customsClearingEnabled);
 
   const handleSubmit = () => {
     const dto: Freight.CreateBookingRequestDto = {
       contractRouteId: route?.id,
-      scheduledDate: scheduledDate || undefined,
+      scheduledDate: hasCustoms ? undefined : scheduledDate || undefined,
       notes: notes.trim() || undefined,
     };
 
@@ -104,19 +118,26 @@ export default function NewShipmentRequestPage() {
 
         <Paper withBorder radius="lg" p="xl" style={{ borderColor: BORDER }}>
           <Stack gap="md">
-            <DatePickerInput
-              label="Preferred shipment date"
-              placeholder="Pick a date"
-              leftSection={<CalendarDays size={16} />}
-              minDate={new Date().toISOString().slice(0, 10)}
-              value={scheduledDate || null}
-              onChange={(v) => setScheduledDate(v ?? "")}
-              radius="md"
-              popoverProps={{ withinPortal: true }}
-            />
+            {!hasCustoms && (
+              <DatePickerInput
+                label="Preferred shipment date"
+                placeholder="Pick a date"
+                leftSection={<CalendarDays size={16} />}
+                minDate={new Date().toISOString().slice(0, 10)}
+                value={scheduledDate || null}
+                onChange={(v) => setScheduledDate(v ?? "")}
+                radius="md"
+                popoverProps={{ withinPortal: true }}
+              />
+            )}
 
             <NumberInput
               label={isContainer ? "Number of containers" : "Cargo weight (tons)"}
+              description={
+                hasCustoms
+                  ? "Global Logistics schedules the shipment date during customs clearance — you only state the quantity."
+                  : undefined
+              }
               value={quantity}
               onChange={setQuantity}
               min={1}
diff --git a/apps/edr-freight-web/portal/src/pages/contracts/booking-window.ts b/apps/edr-freight-web/portal/src/pages/contracts/booking-window.ts
index b7a1e8c60..ab25284ba 100644
--- a/apps/edr-freight-web/portal/src/pages/contracts/booking-window.ts
+++ b/apps/edr-freight-web/portal/src/pages/contracts/booking-window.ts
@@ -27,21 +27,30 @@ export function hasOpenWindow(windows: MyBookingWindow[]): boolean {
 
 /**
  * The next upcoming (not-yet-open) window the customer should come back for —
- * the one whose train dispatches soonest, so it lines up with the departure-date
- * ordering of the cards. Returns `null` when nothing upcoming carries an opening
- * time. (`windowOpensAt` is still required so the banner can name a come-back time.)
+ * the one that OPENS soonest from now. Two guards matter here:
+ *  - only openings strictly in the future qualify. A train mid-cycle
+ *    (doc-review/payment) still reports the window that already opened and
+ *    closed; showing that past time as "next" told customers to come back for
+ *    a window that was over.
+ *  - ordered by opening time, not departure date — "next window" is the next
+ *    moment booking opens, which may belong to a later-departing train.
+ * Returns `null` when nothing upcoming carries a future opening time.
  */
 export function soonestUpcomingWindow(
   windows: MyBookingWindow[],
 ): MyBookingWindow | null {
+  const now = Date.now();
   const upcoming = windows
-    .filter((w) => !w.isOpenNow && w.windowOpensAt)
-    .sort((a, b) => {
-      const da = a.departureDate ? new Date(a.departureDate).getTime() : Infinity;
-      const db = b.departureDate ? new Date(b.departureDate).getTime() : Infinity;
-      if (da !== db) return da - db;
-      return new Date(a.windowOpensAt!).getTime() - new Date(b.windowOpensAt!).getTime();
-    });
+    .filter(
+      (w) =>
+        !w.isOpenNow &&
+        w.windowOpensAt &&
+        new Date(w.windowOpensAt).getTime() > now,
+    )
+    .sort(
+      (a, b) =>
+        new Date(a.windowOpensAt!).getTime() - new Date(b.windowOpensAt!).getTime(),
+    );
   return upcoming[0] ?? null;
 }
 
diff --git a/apps/edr-freight-web/portal/src/pages/contracts/contract-booking-action.ts b/apps/edr-freight-web/portal/src/pages/contracts/contract-booking-action.ts
index 0c449ad5f..1a128e84f 100644
--- a/apps/edr-freight-web/portal/src/pages/contracts/contract-booking-action.ts
+++ b/apps/edr-freight-web/portal/src/pages/contracts/contract-booking-action.ts
@@ -15,7 +15,12 @@ export const TERMINAL_BOOKING_STATUSES = [
 /** Path A statuses where a customer (no customs) may book against the contract. */
 const PATH_A_BOOKABLE = ["FULLY_EXECUTED", "CONTRACT_ACTIVE"];
 
-export type ContractBookingActionKind = "book" | "rebook" | "request" | "none";
+export type ContractBookingActionKind =
+  | "book"
+  | "rebook"
+  | "request"
+  | "initiate"
+  | "none";
 
 export interface ContractBookingAction {
   kind: ContractBookingActionKind;
@@ -63,5 +68,13 @@ export function getContractBookingAction(
     return { kind: hasExpired ? "rebook" : "book", to };
   }
 
+  // GENERAL non-customs import/export: one-click bare booking instance — the
+  // per-booking clearance runs first, cargo + shipment day come at completion.
+  // No window gate here; the window is checked when the booking is completed.
+  // DOMESTIC (intercity) keeps the direct booking form.
+  if (contract.tradeDirection !== "DOMESTIC") {
+    return { kind: "initiate", to: `/contracts/${contract.id}` };
+  }
+
   return { kind: "book", to };
 }
diff --git a/apps/edr-freight-web/portal/src/pages/contracts/new-contract-form/ContractDocsEditor.tsx b/apps/edr-freight-web/portal/src/pages/contracts/new-contract-form/ContractDocsEditor.tsx
index e491cd88a..649cb8320 100644
--- a/apps/edr-freight-web/portal/src/pages/contracts/new-contract-form/ContractDocsEditor.tsx
+++ b/apps/edr-freight-web/portal/src/pages/contracts/new-contract-form/ContractDocsEditor.tsx
@@ -7,6 +7,7 @@ import type { Freight } from "@edr/types";
 import { useQuery } from "@tanstack/react-query";
 import useAuth from "@/hooks/useAuth";
 import { api } from "@/services/api";
+import type { CompanyDocument } from "@/services/companies.service";
 import { fileViewUrl } from "@/constants/apiConfig";
 import { labelForDocCode } from "@/pages/bookings/resubmit/resubmitDocs";
 import { BORDER, GREEN, INK } from "../contract-ui";
@@ -38,6 +39,38 @@ function dedupeLatestByCode(files: ContractFile[]): ContractFile[] {
   return order.map((c) => latest.get(c)!);
 }
 
+/**
+ * The company's onboarding documents (TIN certificate, commercial license,
+ * national ID, …) from the profile. Contracts carry these automatically on
+ * save; the edit page also shows them directly so they are always visible even
+ * on contracts created before the carry-over existed.
+ */
+export function useCompanyDocuments(): CompanyDocument[] {
+  const auth = useAuth();
+  const companyId = auth.company?.company?.id as string | undefined;
+  const query = useQuery({
+    ...api.companies.documents.queryOptions({
+      input: { companyId: companyId ?? "" },
+    }),
+    enabled: Boolean(companyId),
+  });
+  return query.data ?? [];
+}
+
+/** Latest company document per code, excluding codes already on the contract. */
+function profileFallbackDocs(
+  companyDocs: CompanyDocument[],
+  contractFiles: ContractFile[],
+): CompanyDocument[] {
+  const onContract = new Set(contractFiles.map((f) => f.code));
+  const latest = new Map<string, CompanyDocument>();
+  for (const d of companyDocs) {
+    const prev = latest.get(d.code);
+    if (!prev || d.uploadedAt > prev.uploadedAt) latest.set(d.code, d);
+  }
+  return [...latest.values()].filter((d) => !onContract.has(d.code));
+}
+
 /**
  * Document replace/upload block for an existing contract. Lists the documents
  * already on file (latest upload per code) and renders the onboarding-driven
@@ -72,8 +105,25 @@ export function ContractDocsEditor({
     }),
   );
 
+  const companyDocs = useCompanyDocuments();
   const files = contract.files ?? [];
-  const onFile = useMemo(() => dedupeLatestByCode(files), [files]);
+  const onFile = useMemo(() => {
+    const contractRows = dedupeLatestByCode(files).map((f) => ({
+      id: f.id,
+      code: f.code,
+      name: f.name,
+      fromProfile: false,
+    }));
+    // Profile documents not yet carried onto the contract still show — they are
+    // attached automatically on the next save.
+    const profileRows = profileFallbackDocs(companyDocs, files).map((d) => ({
+      id: d.id,
+      code: d.code,
+      name: d.name,
+      fromProfile: true,
+    }));
+    return [...contractRows, ...profileRows];
+  }, [files, companyDocs]);
 
   return (
     <Stack gap="md">
@@ -115,12 +165,21 @@ export function ContractDocsEditor({
                 </Text>
               </Box>
               <Group gap={8} wrap="nowrap">
-                <Group gap={5} c={GREEN}>
-                  <CheckCircle2 size={14} />
-                  <Text fz="11.5px" fw={600} c={GREEN}>
-                    On file
-                  </Text>
-                </Group>
+                {file.fromProfile ? (
+                  <Group gap={5} style={{ color: "#2E5B96" }}>
+                    <CheckCircle2 size={14} />
+                    <Text fz="11.5px" fw={600} style={{ color: "#2E5B96" }}>
+                      From profile
+                    </Text>
+                  </Group>
+                ) : (
+                  <Group gap={5} c={GREEN}>
+                    <CheckCircle2 size={14} />
+                    <Text fz="11.5px" fw={600} c={GREEN}>
+                      On file
+                    </Text>
+                  </Group>
+                )}
                 <Button
                   component="a"
                   href={fileViewUrl(file.id, true)}
@@ -170,16 +229,21 @@ export function ContractDocsEditor({
 
 /**
  * Keys of the documents the onboarding setting marks required that are neither
- * already on the contract nor freshly attached in `documents`. Empty means the
- * customer may resubmit.
+ * already on the contract, nor on the company profile (the API carries those
+ * onto the contract on save), nor freshly attached in `documents`. Empty means
+ * the customer may resubmit.
  */
 export function missingRequiredDocKeys(
   setting: Freight.IFileUploadSetting | undefined,
   contract: Freight.IContract,
   documents: DocumentsValue,
+  companyDocs: CompanyDocument[] = [],
 ): string[] {
   const fields = setting?.fields ?? [];
-  const existingCodes = new Set((contract.files ?? []).map((f) => f.code));
+  const existingCodes = new Set([
+    ...(contract.files ?? []).map((f) => f.code),
+    ...companyDocs.map((d) => d.code),
+  ]);
   return fields
     .filter((f) => f.isRequired)
     .filter(
diff --git a/apps/edr-freight-web/portal/src/pages/contracts/new-contract-form/schema.ts b/apps/edr-freight-web/portal/src/pages/contracts/new-contract-form/schema.ts
index 6ffa29b8c..4a57c120f 100644
--- a/apps/edr-freight-web/portal/src/pages/contracts/new-contract-form/schema.ts
+++ b/apps/edr-freight-web/portal/src/pages/contracts/new-contract-form/schema.ts
@@ -254,12 +254,6 @@ export const contractFormSchema = z
           path: ["cargoTypePath"],
           message: "Select a commodity.",
         });
-      } else if (!data.cargoFreeText?.trim()) {
-        ctx.addIssue({
-          code: "custom",
-          path: ["cargoFreeText"],
-          message: "Describe the cargo.",
-        });
       }
     }
     // GENERAL contracts are uncapped: no quantity cap is collected, so the
diff --git a/apps/edr-freight-web/portal/src/pages/contracts/new-contract-form/step3-cargo-scope.tsx b/apps/edr-freight-web/portal/src/pages/contracts/new-contract-form/step3-cargo-scope.tsx
index 51b9bcc93..26b455258 100644
--- a/apps/edr-freight-web/portal/src/pages/contracts/new-contract-form/step3-cargo-scope.tsx
+++ b/apps/edr-freight-web/portal/src/pages/contracts/new-contract-form/step3-cargo-scope.tsx
@@ -10,7 +10,6 @@ import {
   Stack,
   Switch,
   Text,
-  TextInput,
 } from "@mantine/core";
 import type { Freight } from "@edr/types";
 import {
@@ -202,22 +201,6 @@ export function Step3CargoScope({
             />
           )}
 
-          {parentId && commodityOptions.length > 0 && (
-            <Controller
-              name="cargoFreeText"
-              control={form.control}
-              render={({ field, fieldState }) => (
-                <TextInput
-                  {...field}
-                  label="Cargo description *"
-                  placeholder="e.g. Charcoal, Wheat, etc."
-                  error={fieldState.error?.message}
-                  radius={10}
-                  styles={fieldStyles}
-                />
-              )}
-            />
-          )}
         </Stack>
       )}
 
diff --git a/apps/edr-freight-web/portal/src/pages/contracts/new-shipment-form/container-excel.ts b/apps/edr-freight-web/portal/src/pages/contracts/new-shipment-form/container-excel.ts
new file mode 100644
index 000000000..bbd3acf90
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/pages/contracts/new-shipment-form/container-excel.ts
@@ -0,0 +1,200 @@
+import * as XLSX from "xlsx";
+
+// Excel import for container shipments: one spreadsheet row per physical
+// container, mirroring the manual per-unit fields (number, seal, VGM) plus the
+// hazardous/reefer flags when the contract allows them. The parser is
+// all-or-nothing — any bad row rejects the file with row-numbered errors so a
+// partial import can never silently drop containers.
+
+// ISO 6346: 3-letter owner code + category id (U/J/Z) + 6-digit serial + check digit.
+const ISO_CONTAINER_NUMBER_REGEX = /^[A-Z]{4}\d{7}$/;
+
+export interface ContainerExcelOptions {
+  /** Container sizes the contract scope allows (e.g. ["20ft", "40ft"]). */
+  allowedSizes: string[];
+  includeHazardous: boolean;
+  includeReefer: boolean;
+}
+
+export interface ImportedContainerRow {
+  containerSize: string;
+  containerNumber: string;
+  sealNumber: string;
+  vgmTons: string;
+  hazardous: boolean;
+  reefer: boolean;
+}
+
+export interface ContainerExcelResult {
+  rows: ImportedContainerRow[];
+  errors: string[];
+}
+
+type ColumnKey =
+  | "containerSize"
+  | "containerNumber"
+  | "sealNumber"
+  | "vgmTons"
+  | "hazardous"
+  | "reefer";
+
+/** Match a header cell to a known column, tolerant of casing/spacing/units. */
+function headerKey(raw: string): ColumnKey | null {
+  const h = raw.toLowerCase().replace(/[^a-z]/g, "");
+  if (!h) return null;
+  if (h.includes("size")) return "containerSize";
+  if (h.includes("seal")) return "sealNumber";
+  if (h.includes("vgm") || h.includes("weight")) return "vgmTons";
+  if (h.includes("hazard")) return "hazardous";
+  if (h.includes("reefer") || h.includes("refrigerat")) return "reefer";
+  // After the more specific matches: "Container Number", "Container No", …
+  if (h.includes("container") || h.includes("number")) return "containerNumber";
+  return null;
+}
+
+/** "20", "20ft", "20 FT" … → the matching contracted size, or null. */
+function normalizeSize(raw: string, allowed: string[]): string | null {
+  const digits = raw.replace(/[^0-9]/g, "");
+  if (!digits) return null;
+  return allowed.find((s) => s.replace(/[^0-9]/g, "") === digits) ?? null;
+}
+
+function parseFlag(raw: string): boolean {
+  const v = raw.trim().toLowerCase();
+  return v === "yes" || v === "y" || v === "true" || v === "1" || v === "x";
+}
+
+/**
+ * Parse an uploaded workbook into one row per container. Returns either the
+ * full row set or the list of row-numbered problems (never both).
+ */
+export async function parseContainerExcel(
+  file: File,
+  opts: ContainerExcelOptions,
+): Promise<ContainerExcelResult> {
+  let sheet: XLSX.WorkSheet | undefined;
+  try {
+    const workbook = XLSX.read(await file.arrayBuffer(), { type: "array" });
+    sheet = workbook.Sheets[workbook.SheetNames[0]];
+  } catch {
+    return { rows: [], errors: ["Could not read the file — is it a valid Excel file?"] };
+  }
+  if (!sheet) {
+    return { rows: [], errors: ["The file has no sheets."] };
+  }
+
+  const grid = XLSX.utils.sheet_to_json<string[]>(sheet, {
+    header: 1,
+    raw: false,
+    defval: "",
+  });
+
+  // First row with a recognizable column is the header; everything above
+  // (titles, blank rows) is ignored.
+  let headerRowIdx = -1;
+  let columns: Array<ColumnKey | null> = [];
+  for (let i = 0; i < grid.length; i++) {
+    const mapped = (grid[i] ?? []).map((c) => headerKey(String(c ?? "")));
+    if (mapped.includes("containerNumber") && mapped.includes("containerSize")) {
+      headerRowIdx = i;
+      columns = mapped;
+      break;
+    }
+  }
+  if (headerRowIdx < 0) {
+    return {
+      rows: [],
+      errors: [
+        'Could not find the expected columns. The sheet needs at least "Container Size" and "Container Number" headers — download the template to see the format.',
+      ],
+    };
+  }
+  if (!columns.includes("vgmTons")) {
+    return {
+      rows: [],
+      errors: ['Missing a "VGM (Tons)" column — download the template to see the format.'],
+    };
+  }
+
+  const rows: ImportedContainerRow[] = [];
+  const errors: string[] = [];
+  const numberCounts = new Map<string, number>();
+
+  for (let i = headerRowIdx + 1; i < grid.length; i++) {
+    const cells = grid[i] ?? [];
+    if (cells.every((c) => String(c ?? "").trim() === "")) continue;
+    const rowNo = i + 1; // 1-based, as shown in Excel
+
+    const cell = (key: ColumnKey) => {
+      const idx = columns.indexOf(key);
+      return idx >= 0 ? String(cells[idx] ?? "").trim() : "";
+    };
+
+    const size = normalizeSize(cell("containerSize"), opts.allowedSizes);
+    if (!size) {
+      errors.push(
+        `Row ${rowNo}: container size "${cell("containerSize") || "—"}" is not in this contract's scope (allowed: ${opts.allowedSizes.join(", ")}).`,
+      );
+    }
+
+    const containerNumber = cell("containerNumber").toUpperCase();
+    if (!ISO_CONTAINER_NUMBER_REGEX.test(containerNumber)) {
+      errors.push(
+        `Row ${rowNo}: "${cell("containerNumber") || "—"}" is not a valid ISO container number (e.g. MSCU1234567).`,
+      );
+    } else {
+      numberCounts.set(containerNumber, (numberCounts.get(containerNumber) ?? 0) + 1);
+    }
+
+    const vgmRaw = cell("vgmTons");
+    const vgm = Number(vgmRaw);
+    if (!vgmRaw || Number.isNaN(vgm) || vgm <= 0) {
+      errors.push(`Row ${rowNo}: VGM "${vgmRaw || "—"}" must be a number greater than 0.`);
+    }
+
+    rows.push({
+      containerSize: size ?? "",
+      containerNumber,
+      sealNumber: cell("sealNumber"),
+      vgmTons: vgmRaw,
+      hazardous: opts.includeHazardous && parseFlag(cell("hazardous")),
+      reefer: opts.includeReefer && parseFlag(cell("reefer")),
+    });
+  }
+
+  numberCounts.forEach((count, num) => {
+    if (count > 1) errors.push(`Container number ${num} appears ${count} times — numbers must be unique.`);
+  });
+
+  if (rows.length === 0 && errors.length === 0) {
+    errors.push("The sheet has no container rows below the header.");
+  }
+
+  return errors.length > 0 ? { rows: [], errors } : { rows, errors: [] };
+}
+
+/** Generate and download the simple import template with one sample row per size. */
+export function downloadContainerImportTemplate(opts: ContainerExcelOptions) {
+  const headers = ["Container Size", "Container Number", "Seal Number", "VGM (Tons)"];
+  if (opts.includeHazardous) headers.push("Hazardous (YES/NO)");
+  if (opts.includeReefer) headers.push("Reefer (YES/NO)");
+
+  const sizes = opts.allowedSizes.length > 0 ? opts.allowedSizes : ["20ft"];
+  const sampleRows = sizes.map((size, i) => {
+    const row: Array<string | number> = [
+      size,
+      `MSCU${String(1234567 + i).padStart(7, "0")}`,
+      `SL${String(482910 + i)}`,
+      size.startsWith("40") ? 28 : 24.5,
+    ];
+    if (opts.includeHazardous) row.push("NO");
+    if (opts.includeReefer) row.push("NO");
+    return row;
+  });
+
+  const sheet = XLSX.utils.aoa_to_sheet([headers, ...sampleRows]);
+  sheet["!cols"] = headers.map((h) => ({ wch: Math.max(h.length + 2, 16) }));
+  const workbook = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(workbook, sheet, "Containers");
+  XLSX.writeFile(workbook, "container-import-template.xlsx");
+}
diff --git a/apps/edr-freight-web/portal/src/pages/contracts/new-shipment-form/schema.ts b/apps/edr-freight-web/portal/src/pages/contracts/new-shipment-form/schema.ts
index c1f9408ea..80c04f081 100644
--- a/apps/edr-freight-web/portal/src/pages/contracts/new-shipment-form/schema.ts
+++ b/apps/edr-freight-web/portal/src/pages/contracts/new-shipment-form/schema.ts
@@ -58,6 +58,9 @@ const containerLineSchema = z.object({
 const shipmentFormBase = z.object({
   contractRouteId: z.string().default(""),
   scheduledDate: z.string().default(""),
+  // Container contracts only: return the empty container(s) to EDR after
+  // unloading. Seeded from the contract's equipment return; bulk ignores it.
+  withReturn: z.boolean().default(false),
   containers: z.array(containerLineSchema).default([]),
   cargoWeightTons: z.string().default(""),
   itemCount: z.string().default(""),
@@ -210,6 +213,7 @@ export type ShipmentFormInputValues = z.input<typeof shipmentFormSchema>;
 export const initialShipmentFormValues: DeepPartial<ShipmentFormValues> = {
   contractRouteId: "",
   scheduledDate: "",
+  withReturn: false,
   containers: [],
   cargoWeightTons: "",
   itemCount: "",
@@ -229,6 +233,7 @@ export const shipmentStepFields: Record<
     "itemCount",
     "bulkHazardousQuantity",
     "bulkReeferQuantity",
+    "withReturn",
   ],
   2: ["scheduledDate"],
   3: ["notes"],
diff --git a/apps/edr-freight-web/portal/src/pages/settings/CompanyRolesCard.tsx b/apps/edr-freight-web/portal/src/pages/settings/CompanyRolesCard.tsx
index 89fd0c3f9..fc0407d5e 100644
--- a/apps/edr-freight-web/portal/src/pages/settings/CompanyRolesCard.tsx
+++ b/apps/edr-freight-web/portal/src/pages/settings/CompanyRolesCard.tsx
@@ -10,6 +10,7 @@ import {
   Title,
 } from "@mantine/core";
 import { api } from "@/services/api";
+import type { CompanyProfileResponse } from "@/services/companies.service";
 import type { ProfileResponse } from "@/types/profile";
 import RoleCard from "./RoleCard";
 import { rolesForCompanyType } from "./companyRoles";
@@ -18,6 +19,32 @@ interface CompanyRolesCardProps {
   profile: ProfileResponse;
 }
 
+/**
+ * How an existing role reads on the card. Only an `active` role is "approved" —
+ * anything else is locked (a profile already exists, so it cannot be re-added)
+ * but must never be presented as granted.
+ */
+function roleStatusView(p: CompanyProfileResponse): {
+  note: string;
+  color: string;
+  approved: boolean;
+} {
+  switch (p.status) {
+    case "active":
+      return { note: `Active · ${p.reference}`, color: "edr-green", approved: true };
+    case "pending":
+      return { note: "Pending review", color: "yellow.7", approved: false };
+    case "rejected":
+      return { note: "Rejected", color: "red.7", approved: false };
+    case "suspended":
+      return { note: "Suspended", color: "orange.7", approved: false };
+    case "blacklisted":
+      return { note: "Blacklisted", color: "red.7", approved: false };
+    default:
+      return { note: p.status, color: "edr-muted", approved: false };
+  }
+}
+
 export default function CompanyRolesCard({ profile }: CompanyRolesCardProps) {
   const queryClient = useQueryClient();
 
@@ -26,17 +53,18 @@ export default function CompanyRolesCard({ profile }: CompanyRolesCardProps) {
     [profile.companyType],
   );
 
-  // Roles already persisted (active + locked), keyed by type -> reference.
-  const activeByType = useMemo(() => {
-    const map = new Map<string, string>();
-    for (const p of profile.companyProfiles) map.set(p.type, p.reference);
+  // Roles already persisted, keyed by type. Existence locks the card; the
+  // profile's own status decides how it is labelled.
+  const profileByType = useMemo(() => {
+    const map = new Map<string, CompanyProfileResponse>();
+    for (const p of profile.companyProfiles) map.set(p.type, p);
     return map;
   }, [profile.companyProfiles]);
 
   const [selected, setSelected] = useState<Set<string>>(new Set());
 
   const toggle = (type: string) => {
-    if (activeByType.has(type)) return; // add-only: active roles are locked
+    if (profileByType.has(type)) return; // add-only: existing roles are locked
     setSelected((prev) => {
       const next = new Set(prev);
       if (next.has(type)) next.delete(type);
@@ -83,7 +111,8 @@ export default function CompanyRolesCard({ profile }: CompanyRolesCardProps) {
       ) : (
         <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="md">
           {options.map((opt) => {
-            const isActive = activeByType.has(opt.type);
+            const existing = profileByType.get(opt.type);
+            const view = existing ? roleStatusView(existing) : undefined;
             return (
               <RoleCard
                 key={opt.type}
@@ -91,10 +120,10 @@ export default function CompanyRolesCard({ profile }: CompanyRolesCardProps) {
                 description={opt.description}
                 icon={opt.icon}
                 selected={selected.has(opt.type)}
-                locked={isActive}
-                lockedNote={
-                  isActive ? `Active · ${activeByType.get(opt.type)}` : undefined
-                }
+                locked={Boolean(existing)}
+                approved={view?.approved}
+                lockedNote={view?.note}
+                lockedNoteColor={view?.color}
                 onClick={() => toggle(opt.type)}
               />
             );
diff --git a/apps/edr-freight-web/portal/src/pages/settings/RoleCard.tsx b/apps/edr-freight-web/portal/src/pages/settings/RoleCard.tsx
index 2e507ff83..0a6b98dc4 100644
--- a/apps/edr-freight-web/portal/src/pages/settings/RoleCard.tsx
+++ b/apps/edr-freight-web/portal/src/pages/settings/RoleCard.tsx
@@ -7,10 +7,17 @@ export interface RoleCardProps {
   icon: React.ReactNode;
   /** Highlighted because the user just selected it (toggleable). */
   selected?: boolean;
-  /** Highlighted and non-interactive because it is already persisted. */
+  /** Non-interactive because a profile for this role already exists. */
   locked?: boolean;
+  /**
+   * Approved by a reviewer. Drives the green "granted" treatment, which a
+   * merely-locked role (e.g. still pending review) must not receive.
+   */
+  approved?: boolean;
   /** Small note under the description, e.g. "Active · IM-00001". */
   lockedNote?: string;
+  /** Mantine color for {@link lockedNote}; matches the role's status. */
+  lockedNoteColor?: string;
   onClick?: () => void;
 }
 
@@ -25,10 +32,12 @@ export default function RoleCard({
   icon,
   selected = false,
   locked = false,
+  approved = false,
   lockedNote,
+  lockedNoteColor = "edr-green",
   onClick,
 }: RoleCardProps) {
-  const highlighted = selected || locked;
+  const highlighted = selected || approved;
 
   return (
     <UnstyledButton
@@ -37,8 +46,12 @@ export default function RoleCard({
       className={`group block rounded-lg border! p-5! text-left transition-all duration-200 ${
         highlighted
           ? "border-[var(--mantine-color-edr-green-5)]! bg-edr-soft!"
-          : "border-edr-border! bg-edr-card! hover:-translate-y-0.5 hover:border-[var(--mantine-color-edr-green-5)]! hover:bg-edr-soft"
-      } ${locked ? "cursor-default" : ""}`}
+          : "border-edr-border! bg-edr-card!"
+      } ${
+        locked
+          ? "cursor-default"
+          : "hover:-translate-y-0.5 hover:border-[var(--mantine-color-edr-green-5)]! hover:bg-edr-soft"
+      }`}
     >
       <Group gap="md" wrap="nowrap" align="start">
         <ThemeIcon
@@ -58,7 +71,7 @@ export default function RoleCard({
             {description}
           </Text>
           {lockedNote && (
-            <Text size="xs" c="edr-green" mt={6} fw={600}>
+            <Text size="xs" c={lockedNoteColor} mt={6} fw={600}>
               {lockedNote}
             </Text>
           )}
diff --git a/apps/edr-freight-web/portal/src/pages/settings/TabDocuments.tsx b/apps/edr-freight-web/portal/src/pages/settings/TabDocuments.tsx
index 9bd8d7ba9..17c7b87ab 100644
--- a/apps/edr-freight-web/portal/src/pages/settings/TabDocuments.tsx
+++ b/apps/edr-freight-web/portal/src/pages/settings/TabDocuments.tsx
@@ -61,6 +61,13 @@ function documentSettingCode(nationality: string | null | undefined): string {
     : "company_onboarding_documents_ethiopian";
 }
 
+/**
+ * The delegation letter ships in the same nationality document set, but it is
+ * edited on the Power of Attorney tab (where it is staged for review alongside
+ * the PoA details), so it is excluded from this tab's uploader.
+ */
+const POA_DELEGATION_FILE_KEY = "poa_delegation_letter";
+
 export default function TabDocuments({
   profile,
   mode = "edit",
@@ -78,6 +85,17 @@ export default function TabDocuments({
     }),
   );
 
+  const docSetting = useMemo(() => {
+    const setting = docSettingQuery.data;
+    if (!setting) return setting;
+    return {
+      ...setting,
+      fields: setting.fields.filter(
+        (f) => f.fileKey !== POA_DELEGATION_FILE_KEY,
+      ),
+    };
+  }, [docSettingQuery.data]);
+
   const docsQuery = useQuery(
     api.companies.documents.queryOptions({
       input: { companyId: profile.companyId },
@@ -139,7 +157,7 @@ export default function TabDocuments({
 
   const validateRequired = (): Record<string, string> => {
     const errs: Record<string, string> = {};
-    for (const field of docSettingQuery.data?.fields ?? []) {
+    for (const field of docSetting?.fields ?? []) {
       const min = getMinFiles(field);
       if (min <= 0) continue;
       if (uploadedKeys.includes(field.fileKey)) continue;
@@ -169,13 +187,13 @@ export default function TabDocuments({
           <Center py="xl">
             <Loader2 size={24} className="animate-spin" />
           </Center>
-        ) : !docSettingQuery.data ? (
+        ) : !docSetting ? (
           <Text c="edr-muted" size="sm" ta="center" py="md">
             No document requirements configured for your account.
           </Text>
         ) : (
           <SmartFileInput
-            file={docSettingQuery.data}
+            file={docSetting}
             value={documentFiles}
             onChange={handleFilesChange}
             errors={fieldErrors}
@@ -185,7 +203,7 @@ export default function TabDocuments({
           />
         )}
 
-        {docSettingQuery.data && (
+        {docSetting && (
           <Group
             justify="space-between"
             mt="lg"
@@ -367,7 +385,8 @@ function ProfileLicenseRow({
     <Stack gap="sm">
       <Group justify="space-between" align="center">
         <Text size="sm" fw={700} c="edr-text">
-          {ROLE_LABELS[profile.type] ?? profile.type} · {profile.reference}
+          {ROLE_LABELS[profile.type] ?? profile.type}
+          {profile.reference ? ` · ${profile.reference}` : ""}
         </Text>
         <Button
           variant="light"
diff --git a/apps/edr-freight-web/portal/src/pages/settings/TabPowerOfAttorney.tsx b/apps/edr-freight-web/portal/src/pages/settings/TabPowerOfAttorney.tsx
index 6f951ff31..401070911 100644
--- a/apps/edr-freight-web/portal/src/pages/settings/TabPowerOfAttorney.tsx
+++ b/apps/edr-freight-web/portal/src/pages/settings/TabPowerOfAttorney.tsx
@@ -1,20 +1,44 @@
-import { useMemo } from "react";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useMemo, useRef, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
-import { CheckCircle2, Save, UserCheck, XCircle } from "lucide-react";
 import {
+  CheckCircle2,
+  Clock,
+  FileText,
+  RefreshCw,
+  Save,
+  Trash2,
+  Undo2,
+  UploadCloud,
+  UserCheck,
+  XCircle,
+} from "lucide-react";
+import {
+  ActionIcon,
+  Alert,
+  Anchor,
+  Badge,
+  Button,
   Card,
   Group,
+  Loader,
   Stack,
   Title,
   Text,
   TextInput,
-  Button,
+  Tooltip,
   Grid,
 } from "@mantine/core";
+import { useFileViewer, type ViewableFile } from "@edr/ui-common";
 import { api } from "@/services/api";
+import { fileViewUrl } from "@/constants/apiConfig";
+import {
+  companiesService,
+  type LicenseFile,
+  type LicenseFileStatus,
+} from "@/services/companies.service";
 import { ControlledPhoneField, isValidPhone } from "@/components/PhoneField";
 import type { ProfileResponse } from "@/types/profile";
 
@@ -31,6 +55,32 @@ const schema = z.object({
 
 type FormData = z.infer<typeof schema>;
 
+const LETTER_ACCEPT = ".pdf,.png,.jpg,.jpeg";
+
+const STATUS_BADGE: Record<
+  LicenseFileStatus,
+  { label: string; bg: string; fg: string } | null
+> = {
+  live: null,
+  pending_add: {
+    label: "Pending approval",
+    bg: "var(--mantine-color-edr-amber-soft-0)",
+    fg: "var(--mantine-color-edr-amber-text-0)",
+  },
+  pending_remove: {
+    label: "Removal pending",
+    bg: "var(--mantine-color-edr-red-soft-0)",
+    fg: "var(--mantine-color-edr-red-0)",
+  },
+};
+
+function formatBytes(bytes: number): string {
+  if (!bytes) return "";
+  const units = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return `${parseFloat((bytes / Math.pow(1024, i)).toFixed(1))} ${units[i]}`;
+}
+
 interface TabPowerOfAttorneyProps {
   profile: ProfileResponse;
   mode?: "edit" | "onboarding";
@@ -43,6 +93,8 @@ export default function TabPowerOfAttorney({
   onContinue,
 }: TabPowerOfAttorneyProps) {
   const queryClient = useQueryClient();
+  const { view, viewer } = useFileViewer();
+  const uploadInputRef = useRef<HTMLInputElement>(null);
 
   const defaultValues = useMemo((): FormData => {
     return {
@@ -59,22 +111,73 @@ export default function TabPowerOfAttorney({
     control,
     handleSubmit,
     reset,
+    watch,
     formState: { errors, isDirty },
   } = useForm<FormData>({
     resolver: zodResolver(schema),
     values: defaultValues,
   });
 
+  const letterQuery = useQuery(api.companies.poaDelegation.queryOptions({}));
+  const letters = useMemo(() => letterQuery.data ?? [], [letterQuery.data]);
+
+  // The letter is staged locally, not uploaded on pick. Uploading immediately
+  // would open a change request, which locks the whole settings page (see
+  // SettingsPage's `locked` fieldset) before the text fields could be saved.
+  // Save submits the file and the fields together, into one change request.
+  const [pickedFile, setPickedFile] = useState<File | null>(null);
+  const [removeIds, setRemoveIds] = useState<string[]>([]);
+  const [saveBlocked, setSaveBlocked] = useState(false);
+
+  /** Letters that will still be on file once the staged edits are applied. */
+  const remainingLetters = letters.filter(
+    (f) => f.status !== "pending_remove" && !removeIds.includes(f.id),
+  );
+  const hasLetterAfterSave = Boolean(pickedFile) || remainingLetters.length > 0;
+
+  // A freight forwarder signs on other companies' behalf, so its PoA — details
+  // and delegation letter both — is mandatory rather than optional.
+  const requirePoa = profile.companyProfiles.some(
+    (p) => p.type === "freight_forwarder",
+  );
+  const poaValues = watch([
+    "poaName",
+    "poaEmail",
+    "poaPhone",
+    "poaLocation",
+    "poaAddress",
+  ]);
+  const poaProvided = poaValues.some((v) => v?.trim());
+  const letterRequired = requirePoa || poaProvided;
+  const letterMissing = letterRequired && !hasLetterAfterSave;
+
+  const fileDirty = Boolean(pickedFile) || removeIds.length > 0;
+
   const mutation = useMutation({
-    mutationFn: (data: FormData) =>
-      api.companies.updateProfile.call({
+    mutationFn: async (data: FormData) => {
+      // A fresh upload already stages the removal of every live letter, so the
+      // explicit removals only need applying when no replacement was picked.
+      if (pickedFile) {
+        await companiesService.uploadPoaDelegation(pickedFile);
+      } else {
+        for (const fileId of removeIds) {
+          await companiesService.removePoaDelegation(fileId);
+        }
+      }
+      return api.companies.updateProfile.call({
         poaName: data.poaName || undefined,
         poaPhone: data.poaPhone || undefined,
         poaEmail: data.poaEmail || undefined,
         poaLocation: data.poaLocation || undefined,
         poaAddress: data.poaAddress || undefined,
-      }),
+      });
+    },
     onSuccess: () => {
+      setPickedFile(null);
+      setRemoveIds([]);
+      queryClient.invalidateQueries({
+        queryKey: api.companies.poaDelegation.queryKey(),
+      });
       queryClient.invalidateQueries({
         queryKey: api.companies.getProfile.queryKey(),
       });
@@ -82,112 +185,423 @@ export default function TabPowerOfAttorney({
     },
   });
 
-  const onSubmit = (data: FormData) => mutation.mutate(data);
+  const onSubmit = (data: FormData) => {
+    // The letter lives outside the form state, so it's gated here rather than
+    // in the zod resolver.
+    if (letterMissing) {
+      setSaveBlocked(true);
+      return;
+    }
+    setSaveBlocked(false);
+    mutation.mutate(data);
+  };
+
+  const resetAll = () => {
+    reset();
+    setPickedFile(null);
+    setRemoveIds([]);
+    setSaveBlocked(false);
+  };
+
+  const pickFile = (file: File) => {
+    setSaveBlocked(false);
+    setPickedFile(file);
+    // An upload already supersedes every letter on file, so a pending explicit
+    // removal would be a no-op — drop it rather than mislabel the row.
+    setRemoveIds([]);
+  };
+
+  const toggleRemove = (fileId: string) => {
+    setSaveBlocked(false);
+    setRemoveIds((prev) =>
+      prev.includes(fileId)
+        ? prev.filter((id) => id !== fileId)
+        : [...prev, fileId],
+    );
+  };
 
   return (
-    <Card padding="lg">
-      <Group gap="sm" mb="xs">
-        <UserCheck size={20} />
-        <Title order={3}>Power of Attorney</Title>
-      </Group>
-      <Text c="edr-muted" size="sm" mb="lg">
-        Power of Attorney details are optional. Fill them in if you have an
-        authorized representative, or leave blank.
-      </Text>
+    <>
+      <Card padding="lg">
+        <Group gap="sm" mb="xs">
+          <UserCheck size={20} />
+          <Title order={3}>Power of Attorney</Title>
+          {requirePoa && (
+            <Badge size="sm" variant="light" color="blue">
+              Required for freight forwarder
+            </Badge>
+          )}
+        </Group>
+        <Text c="edr-muted" size="sm" mb="lg">
+          {requirePoa
+            ? "As a freight forwarder you act on other companies' behalf, so a Power of Attorney and its delegation letter are required."
+            : "Power of Attorney details are optional. If you name a representative, upload the delegation letter authorising them."}
+        </Text>
 
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <Stack gap="md">
-          <TextInput
-            label="PoA Full Name"
-            placeholder="Authorized Representative Name"
-            error={errors.poaName?.message}
-            {...register("poaName")}
-          />
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <Stack gap="md">
+            <TextInput
+              label="PoA Full Name"
+              placeholder="Authorized Representative Name"
+              error={errors.poaName?.message}
+              {...register("poaName")}
+            />
 
-          <Grid>
-            <Grid.Col span={6}>
-              <TextInput
-                label="PoA Email"
-                type="email"
-                placeholder="poa@company.com"
-                error={errors.poaEmail?.message}
-                {...register("poaEmail")}
-              />
-            </Grid.Col>
-            <Grid.Col span={6}>
-              <ControlledPhoneField
-                control={control}
-                name="poaPhone"
-                label="PoA Phone"
-              />
-            </Grid.Col>
-          </Grid>
+            <Grid>
+              <Grid.Col span={6}>
+                <TextInput
+                  label="PoA Email"
+                  type="email"
+                  placeholder="poa@company.com"
+                  error={errors.poaEmail?.message}
+                  {...register("poaEmail")}
+                />
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <ControlledPhoneField
+                  control={control}
+                  name="poaPhone"
+                  label="PoA Phone"
+                />
+              </Grid.Col>
+            </Grid>
 
-          <Grid>
-            <Grid.Col span={6}>
-              <TextInput
-                label="PoA Location"
-                placeholder="City, Country"
-                error={errors.poaLocation?.message}
-                {...register("poaLocation")}
-              />
-            </Grid.Col>
-            <Grid.Col span={6}>
-              <TextInput
-                label="PoA Address"
-                placeholder="Full Address"
-                error={errors.poaAddress?.message}
-                {...register("poaAddress")}
-              />
-            </Grid.Col>
-          </Grid>
-        </Stack>
+            <Grid>
+              <Grid.Col span={6}>
+                <TextInput
+                  label="PoA Location"
+                  placeholder="City, Country"
+                  error={errors.poaLocation?.message}
+                  {...register("poaLocation")}
+                />
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <TextInput
+                  label="PoA Address"
+                  placeholder="Full Address"
+                  error={errors.poaAddress?.message}
+                  {...register("poaAddress")}
+                />
+              </Grid.Col>
+            </Grid>
+          </Stack>
 
-        <Group
-          justify="space-between"
-          mt="xl"
-          pt="md"
-          style={{ borderTop: "1px solid var(--mantine-color-edr-border-0)" }}
-        >
-          <Group gap="xs">
-            {mutation.isSuccess && (
-              <Group gap={6} c="green">
-                <CheckCircle2 size={16} />
-                <Text size="sm" fw={500}>
-                  Saved successfully
+          {/* ------------------------ Delegation letter ------------------------ */}
+          <Stack gap="sm" mt="xl">
+            <Group justify="space-between" align="center">
+              <Group gap="sm">
+                <FileText size={18} />
+                <Text fw={600} c="edr-text">
+                  Delegation letter
                 </Text>
               </Group>
-            )}
-            {mutation.isError && (
-              <Group gap={6} c="red">
-                <XCircle size={16} />
-                <Text size="sm" fw={500}>
-                  Save failed
-                </Text>
-              </Group>
-            )}
-          </Group>
-          <Group gap="md">
-            {mode === "edit" && (
               <Button
                 type="button"
-                variant="outline"
-                disabled={mutation.isPending || !isDirty}
-                onClick={() => reset()}
+                variant="light"
+                size="xs"
+                leftSection={
+                  hasLetterAfterSave ? (
+                    <RefreshCw size={14} />
+                  ) : (
+                    <UploadCloud size={14} />
+                  )
+                }
+                disabled={mutation.isPending}
+                onClick={() => uploadInputRef.current?.click()}
               >
-                Reset
+                {hasLetterAfterSave ? "Replace letter" : "Upload letter"}
               </Button>
+            </Group>
+
+            <Text c="edr-muted" size="xs">
+              The signed letter in which the General Manager delegates the
+              representative above. Submitted to EDR for review together with the
+              details; it takes effect once approved.
+            </Text>
+
+            {saveBlocked && letterMissing && (
+              <Alert
+                color="red"
+                variant="light"
+                icon={<XCircle size={18} />}
+              >
+                {requirePoa
+                  ? "Upload the delegation letter before saving — it is required for freight forwarders."
+                  : "Upload the delegation letter for the representative you named, or clear the PoA details."}
+              </Alert>
             )}
-            <Button
-              type="submit"
-              leftSection={<Save size={16} />}
-              loading={mutation.isPending}
-            >
-              {mode === "onboarding" ? "Continue" : "Save Changes"}
-            </Button>
+
+            {letterQuery.isLoading ? (
+              <Group justify="center" py="md">
+                <Loader size="sm" color="edr-green" />
+              </Group>
+            ) : letters.length === 0 && !pickedFile ? (
+              <Card
+                padding="md"
+                radius="md"
+                style={{
+                  borderStyle: "dashed",
+                  backgroundColor: "var(--mantine-color-edr-bg-0)",
+                }}
+              >
+                <Text size="sm" c="edr-muted" ta="center">
+                  No delegation letter uploaded.
+                </Text>
+              </Card>
+            ) : (
+              <Stack gap="xs">
+                {letters.map((f) => (
+                  <LetterRow
+                    key={f.id}
+                    file={f}
+                    markedForRemoval={removeIds.includes(f.id)}
+                    supersededBy={pickedFile}
+                    disabled={mutation.isPending}
+                    onToggleRemove={() => toggleRemove(f.id)}
+                    onViewFile={view}
+                  />
+                ))}
+                {pickedFile && (
+                  <Card
+                    padding="sm"
+                    radius="md"
+                    withBorder
+                    style={{
+                      backgroundColor: "var(--mantine-color-edr-card-0)",
+                    }}
+                  >
+                    <Group gap="sm" wrap="nowrap">
+                      <FileText
+                        size={18}
+                        className="text-edr-muted"
+                        style={{ flexShrink: 0 }}
+                      />
+                      <Stack gap={0} style={{ minWidth: 0, flex: 1 }}>
+                        <Text size="sm" fw={600} c="edr-text" lineClamp={1}>
+                          {pickedFile.name}
+                        </Text>
+                        <Text size="xs" c="edr-muted">
+                          {formatBytes(pickedFile.size)}
+                        </Text>
+                      </Stack>
+                      <Badge
+                        size="sm"
+                        radius="sm"
+                        variant="light"
+                        color="blue"
+                        style={{ flexShrink: 0 }}
+                      >
+                        Submitted on save
+                      </Badge>
+                      <Tooltip label="Discard" withArrow>
+                        <ActionIcon
+                          variant="subtle"
+                          color="red"
+                          aria-label="Discard selected letter"
+                          disabled={mutation.isPending}
+                          onClick={() => setPickedFile(null)}
+                        >
+                          <Trash2 size={15} />
+                        </ActionIcon>
+                      </Tooltip>
+                    </Group>
+                  </Card>
+                )}
+              </Stack>
+            )}
+
+            {profile.reviewStatus === "pending" && (
+              <Group gap={6} c="edr-amber-text">
+                <Clock size={13} />
+                <Text size="xs" fw={500}>
+                  Awaiting EDR review — this letter takes effect once approved.
+                </Text>
+              </Group>
+            )}
+            <input
+              ref={uploadInputRef}
+              type="file"
+              accept={LETTER_ACCEPT}
+              style={{ display: "none" }}
+              onChange={(e) => {
+                const file = e.target.files?.[0];
+                if (file) pickFile(file);
+                e.target.value = "";
+              }}
+            />
+          </Stack>
+
+          <Group
+            justify="space-between"
+            mt="xl"
+            pt="md"
+            style={{ borderTop: "1px solid var(--mantine-color-edr-border-0)" }}
+          >
+            <Group gap="xs">
+              {mutation.isSuccess && (
+                <Group gap={6} c="green">
+                  <CheckCircle2 size={16} />
+                  <Text size="sm" fw={500}>
+                    Saved successfully
+                  </Text>
+                </Group>
+              )}
+              {mutation.isError && (
+                <Group gap={6} c="red">
+                  <XCircle size={16} />
+                  <Text size="sm" fw={500}>
+                    Save failed
+                  </Text>
+                </Group>
+              )}
+            </Group>
+            <Group gap="md">
+              {mode === "edit" && (
+                <Button
+                  type="button"
+                  variant="outline"
+                  disabled={mutation.isPending || (!isDirty && !fileDirty)}
+                  onClick={resetAll}
+                >
+                  Reset
+                </Button>
+              )}
+              <Button
+                type="submit"
+                leftSection={<Save size={16} />}
+                loading={mutation.isPending}
+              >
+                {mode === "onboarding" ? "Continue" : "Save Changes"}
+              </Button>
+            </Group>
           </Group>
-        </Group>
-      </form>
+        </form>
+      </Card>
+
+      {viewer}
+    </>
+  );
+}
+
+/**
+ * One letter already on file. `pending_add` / `pending_remove` reflect a change
+ * request the backoffice hasn't ruled on yet; `markedForRemoval` and
+ * `supersededBy` are this session's unsaved edits.
+ */
+function LetterRow({
+  file,
+  markedForRemoval,
+  supersededBy,
+  disabled,
+  onToggleRemove,
+  onViewFile,
+}: {
+  file: LicenseFile;
+  markedForRemoval: boolean;
+  supersededBy: File | null;
+  disabled: boolean;
+  onToggleRemove: () => void;
+  onViewFile: (file: ViewableFile) => void;
+}) {
+  const badge = STATUS_BADGE[file.status];
+  const superseded = Boolean(supersededBy) && file.status !== "pending_remove";
+  const struck =
+    file.status === "pending_remove" || markedForRemoval || superseded;
+
+  return (
+    <Card
+      padding="sm"
+      radius="md"
+      withBorder
+      style={{ backgroundColor: "var(--mantine-color-edr-card-0)" }}
+    >
+      <Group gap="sm" wrap="nowrap">
+        <FileText
+          size={18}
+          className="text-edr-muted"
+          style={{ flexShrink: 0 }}
+        />
+        <Stack gap={0} style={{ minWidth: 0, flex: 1 }}>
+          <Anchor
+            component="button"
+            type="button"
+            size="sm"
+            fw={600}
+            onClick={() =>
+              onViewFile({
+                name: file.name,
+                url: fileViewUrl(file.id),
+                mimeType: file.mimeType,
+              })
+            }
+            style={{
+              textAlign: "left",
+              textDecoration: struck ? "line-through" : undefined,
+            }}
+            lineClamp={1}
+          >
+            {file.name}
+          </Anchor>
+          {file.size > 0 && (
+            <Text size="xs" c="edr-muted">
+              {formatBytes(file.size)}
+            </Text>
+          )}
+        </Stack>
+
+        {badge && (
+          <Badge
+            size="sm"
+            radius="sm"
+            variant="light"
+            leftSection={<Clock size={11} />}
+            style={{ backgroundColor: badge.bg, color: badge.fg, flexShrink: 0 }}
+          >
+            {badge.label}
+          </Badge>
+        )}
+        {superseded && !markedForRemoval && (
+          <Badge
+            size="sm"
+            radius="sm"
+            variant="light"
+            color="gray"
+            style={{ flexShrink: 0 }}
+          >
+            Replaced on save
+          </Badge>
+        )}
+        {markedForRemoval && (
+          <Badge
+            size="sm"
+            radius="sm"
+            variant="light"
+            color="red"
+            style={{ flexShrink: 0 }}
+          >
+            Removed on save
+          </Badge>
+        )}
+
+        {file.status !== "pending_remove" && !superseded && (
+          <Tooltip
+            label={markedForRemoval ? "Keep" : "Remove"}
+            withArrow
+          >
+            <ActionIcon
+              variant="subtle"
+              color={markedForRemoval ? "gray" : "red"}
+              aria-label={
+                markedForRemoval ? `Keep ${file.name}` : `Remove ${file.name}`
+              }
+              disabled={disabled}
+              onClick={onToggleRemove}
+            >
+              {markedForRemoval ? <Undo2 size={15} /> : <Trash2 size={15} />}
+            </ActionIcon>
+          </Tooltip>
+        )}
+      </Group>
     </Card>
   );
 }
diff --git a/apps/edr-freight-web/portal/src/services/api.ts b/apps/edr-freight-web/portal/src/services/api.ts
index 04aaf4153..6cd606b2e 100644
--- a/apps/edr-freight-web/portal/src/services/api.ts
+++ b/apps/edr-freight-web/portal/src/services/api.ts
@@ -59,6 +59,7 @@ import type {
   CompanyInfoResponse,
   CompanyNationality,
   CompanyProfileResponse,
+  LicenseFile,
   CreateCompanyPayload,
   DashboardSummary,
   OnboardingRequirements,
@@ -231,6 +232,12 @@ export const api = {
       ({ companyId }) => companiesService.getDocuments(companyId),
     ),
 
+    poaDelegation: endpoint<void, LicenseFile[]>(
+      "companies",
+      "poaDelegation",
+      companiesService.getPoaDelegation,
+    ),
+
     changeRequest: endpoint<void, ChangeRequestResponse | null>(
       "companies",
       "changeRequest",
@@ -524,6 +531,24 @@ export const api = {
       contractsService.createBookingUnderContract(id, dto),
     ),
 
+    initiateBookingUnderContract: endpoint<
+      { id: string; contractRouteId?: string },
+      Freight.IBooking
+    >("contracts", "initiateBookingUnderContract", ({ id, contractRouteId }) =>
+      contractsService.initiateBookingUnderContract(id, contractRouteId),
+    ),
+
+    completeBookingUnderContract: endpoint<
+      {
+        id: string;
+        bookingId: string;
+        dto: Freight.CreateBookingUnderContractDto;
+      },
+      Freight.IBooking
+    >("contracts", "completeBookingUnderContract", ({ id, bookingId, dto }) =>
+      contractsService.completeBookingUnderContract(id, bookingId, dto),
+    ),
+
     validateShipment: endpoint<
       { id: string; dto: Freight.CreateBookingUnderContractDto },
       ShipmentValidation
diff --git a/apps/edr-freight-web/portal/src/services/companies.service.ts b/apps/edr-freight-web/portal/src/services/companies.service.ts
index ad93e03a8..106d17f71 100644
--- a/apps/edr-freight-web/portal/src/services/companies.service.ts
+++ b/apps/edr-freight-web/portal/src/services/companies.service.ts
@@ -144,6 +144,15 @@ export interface OnboardingLicenseProfile {
   uploaded: boolean;
 }
 
+/** Power of Attorney state — mandatory for freight forwarders, optional otherwise. */
+export interface OnboardingPoaState {
+  required: boolean;
+  provided: boolean;
+  delegationLetterUploaded: boolean;
+  missingFields: { key: string; label: string }[];
+  complete: boolean;
+}
+
 /**
  * Server-driven onboarding requirements. The portal renders this verbatim: the
  * backend decides which documents apply (by nationality) and what is still
@@ -158,6 +167,7 @@ export interface OnboardingRequirements {
   };
   documents: OnboardingDocumentField[];
   licenseProfiles: OnboardingLicenseProfile[];
+  poa: OnboardingPoaState;
   progress: { completed: number; total: number };
   isComplete: boolean;
   onboardingCompleted: boolean;
@@ -402,6 +412,37 @@ export const companiesService = {
     return unwrap(response.data);
   },
 
+  /** The PoA delegation letter on file, with its review state. */
+  getPoaDelegation: async (): Promise<LicenseFile[]> => {
+    const response = await client.get<ApiResponse<LicenseFile[]>>(
+      URL_CONSTANTS.COMPANIES_API.POA_DELEGATION,
+    );
+    return unwrap(response.data);
+  },
+
+  /**
+   * Upload the PoA delegation letter, replacing any existing one. On an approved
+   * company the upload is staged for backoffice review; during onboarding it
+   * goes live immediately.
+   */
+  uploadPoaDelegation: async (file: File): Promise<LicenseFile[]> => {
+    const formData = new FormData();
+    formData.append("poa_delegation_letter", file);
+    const response = await client.post<ApiResponse<LicenseFile[]>>(
+      URL_CONSTANTS.COMPANIES_API.POA_DELEGATION,
+      formData,
+    );
+    return unwrap(response.data);
+  },
+
+  /** Remove the PoA delegation letter (staged for review on an approved company). */
+  removePoaDelegation: async (fileId: string): Promise<LicenseFile[]> => {
+    const response = await client.delete<ApiResponse<LicenseFile[]>>(
+      URL_CONSTANTS.COMPANIES_API.POA_DELEGATION_FILE(fileId),
+    );
+    return unwrap(response.data);
+  },
+
   /** List business-license document(s) (with review state) for a company profile. */
   getProfileLicense: async (profileId: string): Promise<LicenseFile[]> => {
     const response = await client.get<ApiResponse<LicenseFile[]>>(
diff --git a/apps/edr-freight-web/portal/src/services/contracts.service.ts b/apps/edr-freight-web/portal/src/services/contracts.service.ts
index 10ef9716f..616a202db 100644
--- a/apps/edr-freight-web/portal/src/services/contracts.service.ts
+++ b/apps/edr-freight-web/portal/src/services/contracts.service.ts
@@ -329,6 +329,32 @@ export const contractsService = {
     return data.data.booking ?? data.data;
   },
 
+  /**
+   * One-click bare booking instance under a GENERAL non-customs contract — no
+   * cargo, no date. The instance enters per-booking clearance; the customer
+   * completes it (cargo + shipment day) once Operations finalizes.
+   */
+  initiateBookingUnderContract: async (
+    id: string,
+    contractRouteId?: string,
+  ): Promise<Freight.IBooking> => {
+    const { data } = await client.post(
+      C.BOOKINGS_INITIATE(id),
+      contractRouteId ? { contractRouteId } : {},
+    );
+    return data.data.booking ?? data.data;
+  },
+
+  /** Complete an initiated booking after clearance — same DTO as create. */
+  completeBookingUnderContract: async (
+    id: string,
+    bookingId: string,
+    dto: Freight.CreateBookingUnderContractDto,
+  ): Promise<Freight.IBooking> => {
+    const { data } = await client.post(C.BOOKINGS_COMPLETE(id, bookingId), dto);
+    return data.data.booking ?? data.data;
+  },
+
   /**
    * Pre-submit validation of a shipment booking (same DTO as
    * `createBookingUnderContract`). Returns overweight warnings and hard-block
diff --git a/apps/edr-gps-tracker/.env.example b/apps/edr-gps-tracker/.env.example
new file mode 100644
index 000000000..d76d19c57
--- /dev/null
+++ b/apps/edr-gps-tracker/.env.example
@@ -0,0 +1,12 @@
+# GT06 GPS tracker TCP listener (raw TCP, must be reachable by tracker SIMs). 0 disables.
+GT06_TCP_PORT=5023
+GT06_TCP_HOST=0.0.0.0
+
+# Shared freight database (same DB as @edr/freight-api). This app only writes
+# freight.gps_devices / freight.gps_positions and NEVER runs migrations.
+DB_HOST=localhost
+DB_PORT=5433
+DB_NAME=edr_freight
+DB_USER=postgres
+DB_PASSWORD=postgres
+# TYPEORM_LOGGING=true   # uncomment for SQL logging
diff --git a/apps/edr-gps-tracker/Dockerfile b/apps/edr-gps-tracker/Dockerfile
new file mode 100644
index 000000000..7fa103207
--- /dev/null
+++ b/apps/edr-gps-tracker/Dockerfile
@@ -0,0 +1,42 @@
+# syntax=docker/dockerfile:1
+# Build from monorepo root: docker build -f apps/edr-gps-tracker/Dockerfile .
+
+FROM node:24.15.0-alpine AS base
+RUN apk add --no-cache libc6-compat
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+WORKDIR /app
+
+FROM base AS pruner
+COPY . .
+RUN pnpm dlx turbo prune "@edr/gps-tracker" --docker
+
+FROM base AS installer
+COPY --from=pruner /app/out/json/ .
+COPY --from=pruner /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
+RUN --mount=type=secret,id=npmrc,target=./.npmrc,required=false \
+    --mount=type=cache,id=pnpm,target=/pnpm/store \
+    pnpm install --frozen-lockfile
+
+FROM base AS builder
+COPY --from=installer /app/ .
+COPY --from=pruner /app/out/full/ .
+RUN pnpm turbo build --filter="@edr/gps-tracker..."
+
+FROM base AS deployer
+COPY --from=builder /app/ .
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
+    pnpm deploy --filter="@edr/gps-tracker" --prod --legacy /deploy
+
+FROM node:24.15.0-alpine AS runner
+RUN apk add --no-cache libc6-compat
+ENV NODE_ENV=production
+WORKDIR /app
+RUN addgroup --system --gid 1001 nodejs \
+    && adduser --system --uid 1001 --ingroup nodejs nestjs
+COPY --from=deployer --chown=nestjs:nodejs /deploy .
+USER nestjs
+# GT06 GPS tracker TCP listener (raw TCP, not HTTP). Change via GT06_TCP_PORT.
+EXPOSE 5023
+CMD ["node", "dist/main.js"]
diff --git a/apps/edr-gps-tracker/nest-cli.json b/apps/edr-gps-tracker/nest-cli.json
new file mode 100644
index 000000000..89d7d6c57
--- /dev/null
+++ b/apps/edr-gps-tracker/nest-cli.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/nest-cli",
+  "collection": "@nestjs/schematics",
+  "sourceRoot": "src",
+  "compilerOptions": {
+    "deleteOutDir": false
+  }
+}
diff --git a/apps/edr-gps-tracker/package.json b/apps/edr-gps-tracker/package.json
new file mode 100644
index 000000000..bcdbc4dbe
--- /dev/null
+++ b/apps/edr-gps-tracker/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "@edr/gps-tracker",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Standalone GT06 GPS tracker TCP ingester. Listens for tracker sockets and writes fixes to the shared freight DB. No HTTP; the /gps REST API stays in @edr/freight-api.",
+  "scripts": {
+    "clean": "node -e \"const fs=require('fs'); fs.rmSync('dist',{recursive:true,force:true}); fs.rmSync('.tsbuildinfo',{force:true});\"",
+    "predev": "pnpm run clean",
+    "dev": "nest start --watch --clearScreen false",
+    "prebuild": "pnpm run clean",
+    "build": "nest build",
+    "start": "node dist/main.js",
+    "lint": "eslint src",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@edr/api-common": "workspace:*",
+    "@nestjs/common": "^11.0.0",
+    "@nestjs/config": "^4.0.0",
+    "@nestjs/core": "^11.0.0",
+    "@nestjs/typeorm": "^11.0.1",
+    "dotenv": "^17.4.2",
+    "pg": "^8.13.0",
+    "reflect-metadata": "^0.2.2",
+    "rxjs": "^7.8.1",
+    "typeorm": "^0.3.30"
+  },
+  "devDependencies": {
+    "@edr/eslint-config": "workspace:*",
+    "@edr/tsconfig": "workspace:*",
+    "@nestjs/cli": "^11.0.0",
+    "@nestjs/schematics": "^11.0.0",
+    "@types/node": "^20.14.0",
+    "@types/pg": "^8.6.7",
+    "ts-node": "^10.9.2",
+    "tsconfig-paths": "^4.2.0",
+    "typescript": "^5.5.4"
+  }
+}
diff --git a/apps/edr-gps-tracker/src/app.module.ts b/apps/edr-gps-tracker/src/app.module.ts
new file mode 100644
index 000000000..836cddefa
--- /dev/null
+++ b/apps/edr-gps-tracker/src/app.module.ts
@@ -0,0 +1,19 @@
+import { Module } from "@nestjs/common";
+import { ConfigModule, ConfigService } from "@nestjs/config";
+import { TypeOrmModule, TypeOrmModuleOptions } from "@nestjs/typeorm";
+
+import databaseConfig from "./config/database.config";
+import { GpsModule } from "./gps/gps.module";
+
+@Module({
+  imports: [
+    ConfigModule.forRoot({ isGlobal: true, load: [databaseConfig] }),
+    TypeOrmModule.forRootAsync({
+      inject: [ConfigService],
+      useFactory: (config: ConfigService): TypeOrmModuleOptions =>
+        config.get<TypeOrmModuleOptions>("database")!,
+    }),
+    GpsModule,
+  ],
+})
+export class AppModule {}
diff --git a/apps/edr-gps-tracker/src/config/database.config.ts b/apps/edr-gps-tracker/src/config/database.config.ts
new file mode 100644
index 000000000..d93874ae8
--- /dev/null
+++ b/apps/edr-gps-tracker/src/config/database.config.ts
@@ -0,0 +1,28 @@
+import { registerAs } from "@nestjs/config";
+import { TypeOrmModuleOptions } from "@nestjs/typeorm";
+
+import { GpsDevice } from "../gps/entities/gps-device.entity";
+import { GpsPosition } from "../gps/entities/gps-position.entity";
+
+/**
+ * DB config for the GPS ingester. Points at the SAME database as
+ * @edr/freight-api and touches only the two GPS tables, which are explicitly
+ * schema-qualified to `freight` on the entities — so no search_path handler is
+ * needed here. This app NEVER runs migrations or synchronize: @edr/freight-api
+ * owns the schema (the AddGpsTracking migration creates these tables).
+ */
+export default registerAs("database", (): TypeOrmModuleOptions => {
+  return {
+    type: "postgres",
+    host: process.env.DB_HOST ?? "localhost",
+    port: parseInt(process.env.DB_PORT ?? "5433", 10),
+    username: process.env.DB_USER ?? "postgres",
+    password: process.env.DB_PASSWORD ?? "",
+    database: process.env.DB_NAME ?? "edr_freight",
+    entities: [GpsDevice, GpsPosition],
+    migrations: [],
+    migrationsRun: false,
+    synchronize: false,
+    logging: process.env.TYPEORM_LOGGING === "true" ? true : ["error", "warn"],
+  };
+});
diff --git a/apps/edr-gps-tracker/src/gps/entities/gps-device.entity.ts b/apps/edr-gps-tracker/src/gps/entities/gps-device.entity.ts
new file mode 100644
index 000000000..de6ba73ea
--- /dev/null
+++ b/apps/edr-gps-tracker/src/gps/entities/gps-device.entity.ts
@@ -0,0 +1,48 @@
+import { BaseEntity } from "@edr/api-common";
+import { Column, Entity, Index } from "typeorm";
+
+/**
+ * A physical GPS tracker (GT06), keyed by IMEI. Same table as
+ * @edr/freight-api's GpsDevice; the Vehicle relation is intentionally dropped
+ * here — the ingester only needs the `vehicleId` column to stamp positions, not
+ * the Vehicle entity graph.
+ */
+@Entity({ name: "gps_devices", schema: "freight" })
+@Index(["vehicleId"])
+export class GpsDevice extends BaseEntity {
+  @Column({ name: "imei", type: "varchar", length: 20, unique: true })
+  imei!: string;
+
+  @Column({ name: "name", type: "varchar", nullable: true })
+  name?: string | null;
+
+  @Column({ name: "vehicle_id", type: "uuid", nullable: true })
+  vehicleId?: string | null;
+
+  @Column({ name: "status", type: "varchar", length: 16, default: "REGISTERED" })
+  status!: string;
+
+  @Column({ name: "last_seen_at", type: "timestamptz", nullable: true })
+  lastSeenAt?: Date | null;
+
+  @Column({ name: "last_lat", type: "numeric", precision: 10, scale: 6, nullable: true })
+  lastLat?: number | null;
+
+  @Column({ name: "last_lng", type: "numeric", precision: 10, scale: 6, nullable: true })
+  lastLng?: number | null;
+
+  @Column({ name: "last_speed", type: "numeric", precision: 6, scale: 2, nullable: true })
+  lastSpeed?: number | null;
+
+  @Column({ name: "last_course", type: "int", nullable: true })
+  lastCourse?: number | null;
+
+  @Column({ name: "last_fix_at", type: "timestamptz", nullable: true })
+  lastFixAt?: Date | null;
+
+  @Column({ name: "voltage_level", type: "int", nullable: true })
+  voltageLevel?: number | null;
+
+  @Column({ name: "gsm_level", type: "int", nullable: true })
+  gsmLevel?: number | null;
+}
diff --git a/apps/edr-gps-tracker/src/gps/entities/gps-position.entity.ts b/apps/edr-gps-tracker/src/gps/entities/gps-position.entity.ts
new file mode 100644
index 000000000..9d1bb949a
--- /dev/null
+++ b/apps/edr-gps-tracker/src/gps/entities/gps-position.entity.ts
@@ -0,0 +1,41 @@
+import { BaseEntity } from "@edr/api-common";
+import { Column, Entity, Index } from "typeorm";
+
+/** One GPS fix from a tracker (append-only history). Same table as freight-api. */
+@Entity({ name: "gps_positions", schema: "freight" })
+@Index(["deviceId", "gpsTime"])
+@Index(["vehicleId", "gpsTime"])
+export class GpsPosition extends BaseEntity {
+  @Column({ name: "device_id", type: "uuid" })
+  deviceId!: string;
+
+  @Column({ name: "imei", type: "varchar", length: 20 })
+  imei!: string;
+
+  @Column({ name: "vehicle_id", type: "uuid", nullable: true })
+  vehicleId?: string | null;
+
+  @Column({ name: "lat", type: "numeric", precision: 10, scale: 6 })
+  lat!: number;
+
+  @Column({ name: "lng", type: "numeric", precision: 10, scale: 6 })
+  lng!: number;
+
+  @Column({ name: "speed", type: "numeric", precision: 6, scale: 2, default: 0 })
+  speed!: number;
+
+  @Column({ name: "course", type: "int", default: 0 })
+  course!: number;
+
+  @Column({ name: "satellites", type: "int", default: 0 })
+  satellites!: number;
+
+  @Column({ name: "positioned", type: "boolean", default: false })
+  positioned!: boolean;
+
+  @Column({ name: "gps_time", type: "timestamptz" })
+  gpsTime!: Date;
+
+  @Column({ name: "alarm", type: "int", default: 0 })
+  alarm!: number;
+}
diff --git a/apps/edr-gps-tracker/src/gps/gps-ingest.service.ts b/apps/edr-gps-tracker/src/gps/gps-ingest.service.ts
new file mode 100644
index 000000000..37fa452ea
--- /dev/null
+++ b/apps/edr-gps-tracker/src/gps/gps-ingest.service.ts
@@ -0,0 +1,72 @@
+import { Injectable, Logger } from "@nestjs/common";
+
+import { GpsDeviceRepository, GpsPositionRepository } from "./gps.repository";
+import { GpsDevice } from "./entities/gps-device.entity";
+import { Gt06Gps, Gt06Status } from "./gt06/gt06.codec";
+
+/**
+ * Write path for GT06 ingestion: upserts device state and appends position
+ * history. Mirrors the ingestion half of @edr/freight-api's GpsTrackingService
+ * (the REST/query half stays in freight-api). Auto-registers unknown IMEIs on
+ * first contact.
+ */
+@Injectable()
+export class GpsIngestService {
+  private readonly logger = new Logger(GpsIngestService.name);
+
+  constructor(
+    private readonly devices: GpsDeviceRepository,
+    private readonly positions: GpsPositionRepository,
+  ) {}
+
+  /** Find the device for an IMEI, auto-registering it on first contact. */
+  private async ensureDevice(imei: string): Promise<GpsDevice> {
+    const existing = await this.devices.findByImei(imei);
+    if (existing) return existing;
+    this.logger.log(`Auto-registering new GPS tracker ${imei}`);
+    return this.devices.create({ imei, status: "REGISTERED", lastSeenAt: new Date() });
+  }
+
+  async handleLogin(imei: string): Promise<void> {
+    const device = await this.ensureDevice(imei);
+    await this.devices.update(device.id, { lastSeenAt: new Date(), status: "ONLINE" });
+  }
+
+  async handleHeartbeat(imei: string, status: Gt06Status): Promise<void> {
+    const device = await this.ensureDevice(imei);
+    await this.devices.update(device.id, {
+      lastSeenAt: new Date(),
+      status: "ONLINE",
+      voltageLevel: status.voltageLevel,
+      gsmLevel: status.gsmLevel,
+    });
+  }
+
+  async handleFix(imei: string, gps: Gt06Gps, alarm = 0, status?: Gt06Status): Promise<void> {
+    const device = await this.ensureDevice(imei);
+    const now = new Date();
+    await this.devices.update(device.id, {
+      lastSeenAt: now,
+      status: "ONLINE",
+      lastLat: gps.latitude,
+      lastLng: gps.longitude,
+      lastSpeed: gps.speed,
+      lastCourse: gps.course,
+      lastFixAt: new Date(gps.time),
+      ...(status ? { voltageLevel: status.voltageLevel, gsmLevel: status.gsmLevel } : {}),
+    });
+    await this.positions.create({
+      deviceId: device.id,
+      imei,
+      vehicleId: device.vehicleId ?? null,
+      lat: gps.latitude,
+      lng: gps.longitude,
+      speed: gps.speed,
+      course: gps.course,
+      satellites: gps.satellites,
+      positioned: gps.positioned,
+      gpsTime: new Date(gps.time),
+      alarm,
+    });
+  }
+}
diff --git a/apps/edr-gps-tracker/src/gps/gps.module.ts b/apps/edr-gps-tracker/src/gps/gps.module.ts
new file mode 100644
index 000000000..b51f0cc71
--- /dev/null
+++ b/apps/edr-gps-tracker/src/gps/gps.module.ts
@@ -0,0 +1,14 @@
+import { Module } from "@nestjs/common";
+import { TypeOrmModule } from "@nestjs/typeorm";
+
+import { GpsDevice } from "./entities/gps-device.entity";
+import { GpsPosition } from "./entities/gps-position.entity";
+import { GpsDeviceRepository, GpsPositionRepository } from "./gps.repository";
+import { GpsIngestService } from "./gps-ingest.service";
+import { Gt06Server } from "./gt06/gt06.server";
+
+@Module({
+  imports: [TypeOrmModule.forFeature([GpsDevice, GpsPosition])],
+  providers: [GpsDeviceRepository, GpsPositionRepository, GpsIngestService, Gt06Server],
+})
+export class GpsModule {}
diff --git a/apps/edr-gps-tracker/src/gps/gps.repository.ts b/apps/edr-gps-tracker/src/gps/gps.repository.ts
new file mode 100644
index 000000000..2a8c2f1e8
--- /dev/null
+++ b/apps/edr-gps-tracker/src/gps/gps.repository.ts
@@ -0,0 +1,25 @@
+import { BaseRepository } from "@edr/api-common";
+import { Injectable } from "@nestjs/common";
+import { InjectRepository } from "@nestjs/typeorm";
+import { Repository } from "typeorm";
+
+import { GpsDevice } from "./entities/gps-device.entity";
+import { GpsPosition } from "./entities/gps-position.entity";
+
+@Injectable()
+export class GpsDeviceRepository extends BaseRepository<GpsDevice> {
+  constructor(@InjectRepository(GpsDevice) repository: Repository<GpsDevice>) {
+    super(repository);
+  }
+
+  findByImei(imei: string): Promise<GpsDevice | null> {
+    return this.repository.findOne({ where: { imei } });
+  }
+}
+
+@Injectable()
+export class GpsPositionRepository extends BaseRepository<GpsPosition> {
+  constructor(@InjectRepository(GpsPosition) repository: Repository<GpsPosition>) {
+    super(repository);
+  }
+}
diff --git a/apps/edr-gps-tracker/src/gps/gt06/gt06.codec.ts b/apps/edr-gps-tracker/src/gps/gt06/gt06.codec.ts
new file mode 100644
index 000000000..d54f906a2
--- /dev/null
+++ b/apps/edr-gps-tracker/src/gps/gt06/gt06.codec.ts
@@ -0,0 +1,207 @@
+/**
+ * GT06 GPS-tracker protocol codec.
+ *
+ * Frame: 0x78 0x78 | len(1) | protocol(1) | content(N) | serial(2) | crc(2) | 0x0D 0x0A
+ * `len` counts protocol..crc (= 5 + N). CRC-ITU (CRC-16/X.25) is computed over
+ * len..serial (inclusive) and equals the 2 crc bytes.
+ */
+
+const START = 0x7878;
+const STOP = 0x0d0a;
+
+export const GT06_PROTOCOL = {
+  LOGIN: 0x01,
+  LOCATION: 0x12,
+  HEARTBEAT: 0x13,
+  STRING: 0x15,
+  ALARM: 0x16,
+  ADDRESS_BY_PHONE: 0x1a,
+  SERVER_COMMAND: 0x80,
+} as const;
+
+/** CRC-16/X.25 (a.k.a. CRC-ITU) used by GT06 — reflected, poly 0x8408, init/xorout 0xFFFF. */
+export function crcItu(bytes: Buffer): number {
+  let fcs = 0xffff;
+  for (const b of bytes) {
+    fcs ^= b;
+    for (let i = 0; i < 8; i++) {
+      fcs = fcs & 1 ? (fcs >> 1) ^ 0x8408 : fcs >> 1;
+    }
+  }
+  return (~fcs) & 0xffff;
+}
+
+export interface Gt06Gps {
+  time: string; // ISO (UTC)
+  satellites: number;
+  latitude: number;
+  longitude: number;
+  speed: number; // km/h
+  course: number; // 0-360
+  positioned: boolean;
+}
+
+export interface Gt06Lbs {
+  mcc: number;
+  mnc: number;
+  lac: number;
+  cellId: number;
+}
+
+export interface Gt06Status {
+  terminalInfo: number;
+  voltageLevel: number;
+  gsmLevel: number;
+  alarm: number; // former byte of alarm/language
+  charging: boolean;
+  accOn: boolean;
+  gpsTracking: boolean;
+  oilCut: boolean;
+}
+
+export type Gt06Packet =
+  | { type: 'login'; protocol: number; serial: number; imei: string }
+  | { type: 'location'; protocol: number; serial: number; gps: Gt06Gps; lbs: Gt06Lbs }
+  | { type: 'heartbeat'; protocol: number; serial: number; status: Gt06Status }
+  | { type: 'alarm'; protocol: number; serial: number; gps: Gt06Gps; lbs: Gt06Lbs; status: Gt06Status }
+  | { type: 'unknown'; protocol: number; serial: number };
+
+/** Terminal ID (8 BCD bytes) → 15-digit IMEI (drops the leading pad nibble). */
+function decodeImei(buf: Buffer): string {
+  return buf.toString('hex').replace(/^0/, '');
+}
+
+function decodeDateTime(buf: Buffer, off: number): string {
+  const year = 2000 + buf[off];
+  const month = buf[off + 1];
+  const day = buf[off + 2];
+  const hour = buf[off + 3];
+  const min = buf[off + 4];
+  const sec = buf[off + 5];
+  return new Date(Date.UTC(year, month - 1, day, hour, min, sec)).toISOString();
+}
+
+/** Convert a GT06 lat/long raw uint32 to decimal degrees (magnitude only). */
+function rawToDegrees(raw: number): number {
+  return raw / 30000 / 60;
+}
+
+function decodeGps(buf: Buffer, off: number): Gt06Gps {
+  const time = decodeDateTime(buf, off);
+  const lenSat = buf[off + 6];
+  const satellites = lenSat & 0x0f;
+  const latRaw = buf.readUInt32BE(off + 7);
+  const lonRaw = buf.readUInt32BE(off + 11);
+  const speed = buf[off + 15];
+  const cs = buf.readUInt16BE(off + 16);
+  const hi = (cs >> 8) & 0xff;
+  const positioned = Boolean(hi & 0x10); // BYTE_1 Bit4
+  const isWest = Boolean(hi & 0x08); // BYTE_1 Bit3 (1 = West)
+  const isNorth = Boolean(hi & 0x04); // BYTE_1 Bit2 (1 = North)
+  const course = cs & 0x03ff; // BYTE_1 Bit1-0 + BYTE_2
+  let latitude = rawToDegrees(latRaw);
+  let longitude = rawToDegrees(lonRaw);
+  if (!isNorth) latitude = -latitude;
+  if (isWest) longitude = -longitude;
+  return { time, satellites, latitude, longitude, speed, course, positioned };
+}
+
+function decodeStatus(buf: Buffer, off: number): Gt06Status {
+  const terminalInfo = buf[off];
+  const voltageLevel = buf[off + 1];
+  const gsmLevel = buf[off + 2];
+  const alarm = buf[off + 3]; // alarm/language former byte
+  return {
+    terminalInfo,
+    voltageLevel,
+    gsmLevel,
+    alarm,
+    oilCut: Boolean(terminalInfo & 0x80),
+    gpsTracking: Boolean(terminalInfo & 0x40),
+    charging: Boolean(terminalInfo & 0x04),
+    accOn: Boolean(terminalInfo & 0x02),
+  };
+}
+
+function decodeLbs(buf: Buffer, off: number): Gt06Lbs {
+  return {
+    mcc: buf.readUInt16BE(off),
+    mnc: buf[off + 2],
+    lac: buf.readUInt16BE(off + 3),
+    cellId: buf.readUIntBE(off + 5, 3),
+  };
+}
+
+function decodeFrame(frame: Buffer): Gt06Packet | null {
+  // frame = 78 78 len ...content... serial(2) crc(2) 0D 0A
+  const len = frame[2];
+  const protocol = frame[3];
+  const serialOff = 3 + (len - 4); // after protocol + content, before serial(2)+crc(2)
+  const serial = frame.readUInt16BE(serialOff);
+  const contentOff = 4; // start of content (after protocol)
+
+  switch (protocol) {
+    case GT06_PROTOCOL.LOGIN:
+      return { type: 'login', protocol, serial, imei: decodeImei(frame.subarray(contentOff, contentOff + 8)) };
+    case GT06_PROTOCOL.LOCATION:
+      return { type: 'location', protocol, serial, gps: decodeGps(frame, contentOff), lbs: decodeLbs(frame, contentOff + 18) };
+    case GT06_PROTOCOL.HEARTBEAT:
+      return { type: 'heartbeat', protocol, serial, status: decodeStatus(frame, contentOff) };
+    case GT06_PROTOCOL.ALARM: {
+      const gps = decodeGps(frame, contentOff);
+      // content: date(6)+lenSat(1)+lat(4)+lng(4)+speed(1)+course(2)=18, lbsLen(1), lbs(8), status(1+1+1+2)
+      const lbs = decodeLbs(frame, contentOff + 18 + 1);
+      const status = decodeStatus(frame, contentOff + 18 + 1 + 8);
+      return { type: 'alarm', protocol, serial, gps, lbs, status };
+    }
+    default:
+      return { type: 'unknown', protocol, serial };
+  }
+}
+
+/**
+ * Pull all complete frames out of a stream buffer. Returns the decoded packets
+ * (skipping CRC-failed ones) and the trailing bytes that form a partial frame.
+ */
+export function parseStream(buffer: Buffer): { packets: Gt06Packet[]; rest: Buffer } {
+  const packets: Gt06Packet[] = [];
+  let i = 0;
+  while (i + 5 <= buffer.length) {
+    if (buffer.readUInt16BE(i) !== START) {
+      i += 1; // resync
+      continue;
+    }
+    const len = buffer[i + 2];
+    const frameLen = 2 + 1 + len + 2; // start + lenByte + (protocol..crc) + stop
+    if (i + frameLen > buffer.length) break; // incomplete
+    const frame = buffer.subarray(i, i + frameLen);
+    if (frame.readUInt16BE(frameLen - 2) === STOP) {
+      // CRC over len..serial (frame[2 .. frameLen-4]); crc bytes are frameLen-4..frameLen-3.
+      const crcCalc = crcItu(frame.subarray(2, frameLen - 4));
+      const crcRecv = frame.readUInt16BE(frameLen - 4);
+      if (crcCalc === crcRecv) {
+        const pkt = decodeFrame(frame);
+        if (pkt) packets.push(pkt);
+      }
+      i += frameLen;
+    } else {
+      i += 1; // bad frame, resync
+    }
+  }
+  return { packets, rest: buffer.subarray(i) };
+}
+
+/** Build a server → terminal ACK (login/heartbeat/alarm) echoing the serial. */
+export function buildAck(protocol: number, serial: number): Buffer {
+  const body = Buffer.alloc(3); // protocol + serial(2)
+  body[0] = protocol;
+  body.writeUInt16BE(serial, 1);
+  const len = body.length + 2; // + crc(2)
+  const forCrc = Buffer.concat([Buffer.from([len]), body]);
+  const crc = crcItu(forCrc);
+  return Buffer.concat([
+    Buffer.from([0x78, 0x78, len]),
+    body,
+    Buffer.from([(crc >> 8) & 0xff, crc & 0xff, 0x0d, 0x0a]),
+  ]);
+}
diff --git a/apps/edr-freight-api/src/modules/gps-tracking/gt06/gt06.server.ts b/apps/edr-gps-tracker/src/gps/gt06/gt06.server.ts
similarity index 67%
rename from apps/edr-freight-api/src/modules/gps-tracking/gt06/gt06.server.ts
rename to apps/edr-gps-tracker/src/gps/gt06/gt06.server.ts
index a2095fa12..68ee12bb0 100644
--- a/apps/edr-freight-api/src/modules/gps-tracking/gt06/gt06.server.ts
+++ b/apps/edr-gps-tracker/src/gps/gt06/gt06.server.ts
@@ -1,8 +1,13 @@
-import { Injectable, Logger, OnApplicationBootstrap, OnModuleDestroy } from '@nestjs/common';
-import * as net from 'net';
+import {
+  Injectable,
+  Logger,
+  OnApplicationBootstrap,
+  OnModuleDestroy,
+} from "@nestjs/common";
+import * as net from "net";
 
-import { GpsTrackingService } from '../gps-tracking.service';
-import { buildAck, GT06_PROTOCOL, parseStream } from './gt06.codec';
+import { GpsIngestService } from "../gps-ingest.service";
+import { buildAck, GT06_PROTOCOL, parseStream } from "./gt06.codec";
 
 interface Session {
   buffer: Buffer;
@@ -14,7 +19,7 @@ const MAX_BUFFER = 64 * 1024;
 /**
  * Raw TCP listener for GT06 GPS trackers. Trackers open a socket, send a login
  * (IMEI), then stream location/heartbeat/alarm packets; we decode, persist via
- * {@link GpsTrackingService}, and ACK login/heartbeat/alarm so the device keeps
+ * {@link GpsIngestService}, and ACK login/heartbeat/alarm so the device keeps
  * the connection alive. Disabled when GT06_TCP_PORT=0.
  */
 @Injectable()
@@ -23,18 +28,20 @@ export class Gt06Server implements OnApplicationBootstrap, OnModuleDestroy {
   private server?: net.Server;
   private readonly sessions = new Map<net.Socket, Session>();
 
-  constructor(private readonly gps: GpsTrackingService) {}
+  constructor(private readonly gps: GpsIngestService) {}
 
   onApplicationBootstrap(): void {
     const port = Number(process.env.GT06_TCP_PORT ?? 5023);
     if (!port) {
-      this.logger.log('GT06 TCP listener disabled (GT06_TCP_PORT=0)');
+      this.logger.log("GT06 TCP listener disabled (GT06_TCP_PORT=0)");
       return;
     }
-    const host = process.env.GT06_TCP_HOST ?? '0.0.0.0';
+    const host = process.env.GT06_TCP_HOST ?? "0.0.0.0";
     this.server = net.createServer((socket) => this.onConnection(socket));
-    this.server.on('error', (err) => this.logger.error(`GT06 server error: ${String(err)}`));
-    this.server.listen(port, host, () => this.logger.log(`GT06 GPS tracker listener on ${host}:${port}`));
+    this.server.on("error", (err) => this.logger.error(`GT06 server error: ${String(err)}`));
+    this.server.listen(port, host, () =>
+      this.logger.log(`GT06 GPS tracker listener on ${host}:${port}`),
+    );
   }
 
   onModuleDestroy(): void {
@@ -45,9 +52,9 @@ export class Gt06Server implements OnApplicationBootstrap, OnModuleDestroy {
 
   private onConnection(socket: net.Socket): void {
     this.sessions.set(socket, { buffer: Buffer.alloc(0), imei: null });
-    socket.on('data', (chunk) => void this.onData(socket, chunk));
-    socket.on('error', () => this.sessions.delete(socket));
-    socket.on('close', () => this.sessions.delete(socket));
+    socket.on("data", (chunk) => void this.onData(socket, chunk));
+    socket.on("error", () => this.sessions.delete(socket));
+    socket.on("close", () => this.sessions.delete(socket));
   }
 
   private async onData(socket: net.Socket, chunk: Buffer): Promise<void> {
@@ -71,23 +78,24 @@ export class Gt06Server implements OnApplicationBootstrap, OnModuleDestroy {
   private async handle(
     socket: net.Socket,
     session: Session,
-    pkt: ReturnType<typeof parseStream>['packets'][number],
+    pkt: ReturnType<typeof parseStream>["packets"][number],
   ): Promise<void> {
     switch (pkt.type) {
-      case 'login':
+      case "login":
         session.imei = pkt.imei;
         await this.gps.handleLogin(pkt.imei);
         socket.write(buildAck(GT06_PROTOCOL.LOGIN, pkt.serial));
         break;
-      case 'heartbeat':
+      case "heartbeat":
         if (session.imei) await this.gps.handleHeartbeat(session.imei, pkt.status);
         socket.write(buildAck(GT06_PROTOCOL.HEARTBEAT, pkt.serial));
         break;
-      case 'location':
+      case "location":
         if (session.imei) await this.gps.handleFix(session.imei, pkt.gps);
         break;
-      case 'alarm':
-        if (session.imei) await this.gps.handleFix(session.imei, pkt.gps, pkt.status.alarm, pkt.status);
+      case "alarm":
+        if (session.imei)
+          await this.gps.handleFix(session.imei, pkt.gps, pkt.status.alarm, pkt.status);
         socket.write(buildAck(GT06_PROTOCOL.ALARM, pkt.serial));
         break;
       default:
diff --git a/apps/edr-gps-tracker/src/main.ts b/apps/edr-gps-tracker/src/main.ts
new file mode 100644
index 000000000..afdec43c5
--- /dev/null
+++ b/apps/edr-gps-tracker/src/main.ts
@@ -0,0 +1,33 @@
+import "reflect-metadata";
+import * as dotenv from "dotenv";
+dotenv.config();
+import { Logger } from "@nestjs/common";
+import { NestFactory } from "@nestjs/core";
+
+import { AppModule } from "./app.module";
+
+/**
+ * 
+ * Standalone GT06 GPS ingester. Boots a Nest application context (NO HTTP
+ * server) so only the DB connection and Gt06Server come up; the TCP listener
+ * binds from Gt06Server.onApplicationBootstrap. The /gps REST API lives in
+ * @edr/freight-api, which reads the same tables this process writes.
+ */
+async function bootstrap() {
+  const logger = new Logger("gps-tracker");
+  const port = Number(process.env.GT06_TCP_PORT ?? 5023);
+  if (!port) {
+    logger.error(
+      "GT06_TCP_PORT=0 disables the listener — this process would idle. Set a port.",
+    );
+    process.exit(1);
+  }
+
+  const app = await NestFactory.createApplicationContext(AppModule);
+  app.enableShutdownHooks();
+  logger.log(
+    `GT06 ingester up — TCP ${process.env.GT06_TCP_HOST ?? "0.0.0.0"}:${port}`,
+  );
+}
+
+void bootstrap();
diff --git a/apps/edr-gps-tracker/tsconfig.json b/apps/edr-gps-tracker/tsconfig.json
new file mode 100644
index 000000000..52598cb95
--- /dev/null
+++ b/apps/edr-gps-tracker/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "extends": "@edr/tsconfig/nestjs.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "noEmit": false,
+    "incremental": true,
+    "tsBuildInfoFile": "./.tsbuildinfo",
+    "preserveWatchOutput": true,
+    "module": "node16",
+    "moduleResolution": "node16"
+  },
+  "include": ["src"]
+}
diff --git a/apps/edr-passenger-api/src/modules/agents/agents.controller.ts b/apps/edr-passenger-api/src/modules/agents/agents.controller.ts
index 1f7fcd288..21f71a8c6 100644
--- a/apps/edr-passenger-api/src/modules/agents/agents.controller.ts
+++ b/apps/edr-passenger-api/src/modules/agents/agents.controller.ts
@@ -3,6 +3,7 @@ import { ApiTags, ApiOperation, ApiBearerAuth } from '@nestjs/swagger';
 import { AgentsService } from './agents.service';
 import { CreateAgentDto, CreateAgentBookingDto, OpenShiftDto, CloseShiftDto } from './agents.dto';
 import { JwtGuard as IamJwtGuard } from '@tria-plc/api-common/modules/auth/services/jwt.guard';
+import { PassengerAdmin } from '../../common/passenger-guards';
 
 @ApiTags('Agents')
 @Controller('agents')
@@ -36,6 +37,8 @@ export class AgentsController {
   }
 
   @Delete(':id')
+  @PassengerAdmin()
+  @ApiBearerAuth('IAM-auth')
   @ApiOperation({ summary: 'Delete agent profile' })
   deleteAgent(@Param('id') id: string) {
     return this.service.deleteAgent(id);
diff --git a/apps/edr-passenger-api/src/modules/bookings/bookings.controller.ts b/apps/edr-passenger-api/src/modules/bookings/bookings.controller.ts
index 9a2053943..7789fd56b 100644
--- a/apps/edr-passenger-api/src/modules/bookings/bookings.controller.ts
+++ b/apps/edr-passenger-api/src/modules/bookings/bookings.controller.ts
@@ -7,6 +7,7 @@ import { GuestBookingService } from './guest-booking.service';
 import { CreateBookingDto, ModifyBookingDto, CancelBookingDto } from './bookings.dto';
 import { CreateGuestBookingDto, GetSavedPassengersDto } from './guest-booking.dto';
 import { JwtGuard } from '../../common/jwt.guard';
+import { PassengerAdmin } from '../../common/passenger-guards';
 
 @ApiTags('Booking')
 @Controller('bookings')
@@ -440,6 +441,36 @@ export class BookingsController {
     return this.service.checkBookingUsage(id);
   }
 
+  @Get('by-phone')
+  @SetMetadata('isPublic', true)
+  @ApiOperation({
+    summary: 'Find bookings by phone number (no auth required)',
+    description: `Returns all bookings where the contact phone matches the provided number.
+Accepts Ethiopian local format (09XXXXXXXX) and international format (+251XXXXXXXXX).
+Results are ordered most-recent first. Use the returned \`bookingRef\` to open booking detail.`
+  })
+  @ApiQuery({ name: 'phone', required: true, description: 'Phone number in local (09…) or international (+251…) format' })
+  @ApiQuery({ name: 'status', required: false, description: 'Filter by booking status' })
+  @ApiQuery({ name: 'page', required: false })
+  @ApiQuery({ name: 'pageSize', required: false })
+  @ApiResponse({ status: 200, description: 'Paginated list of bookings for this phone number' })
+  @ApiResponse({ status: 400, description: 'Phone number missing or invalid' })
+  findByPhone(
+    @Query('phone') phone?: string,
+    @Query('status') status?: string,
+    @Query('page') page?: string,
+    @Query('pageSize') pageSize?: string,
+  ) {
+    if (!phone?.trim()) throw new BadRequestException('Phone number is required');
+    const digits = phone.replace(/[^\d]/g, '');
+    if (digits.length < 7) throw new BadRequestException('Phone number is too short');
+    return this.service.findByPhone(phone.trim(), {
+      status,
+      page: page ? parseInt(page) : 1,
+      pageSize: pageSize ? parseInt(pageSize) : 20,
+    });
+  }
+
   @Get(':bookingRef')
   @SetMetadata('isPublic', true)
   @ApiOperation({
@@ -466,7 +497,8 @@ export class BookingsController {
   }
   
   @Delete(':id')
-  @SetMetadata('isPublic', true)
+  @PassengerAdmin()
+  @ApiBearerAuth('IAM-auth')
   @ApiOperation({
     description: 'Permanently deletes a booking record'
   })
diff --git a/apps/edr-passenger-api/src/modules/bookings/bookings.service.ts b/apps/edr-passenger-api/src/modules/bookings/bookings.service.ts
index 9c9384850..74ba9f509 100644
--- a/apps/edr-passenger-api/src/modules/bookings/bookings.service.ts
+++ b/apps/edr-passenger-api/src/modules/bookings/bookings.service.ts
@@ -39,6 +39,39 @@ function resolvePackageRoundTripTotal(
   return adultCount * adultFareMinor + paidChildren * adultFareMinor;
 }
 
+/**
+ * Returns all plausible normalised variants of a raw phone string so that the
+ * DB query matches regardless of how the number was stored (local 09… vs international +251…).
+ * Returns an empty array when the input is clearly invalid (< 7 digits).
+ */
+function normalizePhoneVariants(raw: string): string[] {
+  // Strip whitespace, dashes, dots, parentheses — keep digits and a leading +
+  const stripped = raw.replace(/[^\d+]/g, '');
+  const digits = stripped.replace(/^\+/, '');
+  if (digits.length < 7) return [];
+
+  const variants = new Set<string>([stripped]);
+
+  if (stripped.startsWith('+251') && digits.length === 12) {
+    // +251 9XXXXXXXX → 251 9XXXXXXXX (no +) → 09XXXXXXXX
+    variants.add(digits);                   // 251XXXXXXXXX
+    variants.add('0' + digits.slice(3));    // 09XXXXXXXXX
+  } else if (stripped.startsWith('251') && digits.length === 12) {
+    // 251 9XXXXXXXX → +251 9XXXXXXXX → 09XXXXXXXX
+    variants.add('+' + stripped);           // +251XXXXXXXXX
+    variants.add('0' + digits.slice(3));    // 09XXXXXXXXX
+  } else if (stripped.startsWith('0') && digits.length === 10) {
+    // 09XXXXXXXX → +251 9XXXXXXXX → 251 9XXXXXXXX (no +)
+    variants.add('+251' + digits.slice(1)); // +251XXXXXXXXX
+    variants.add('251' + digits.slice(1));  // 251XXXXXXXXX
+  } else if (!stripped.startsWith('+') && digits.length >= 9) {
+    // bare international digits without +
+    variants.add('+' + digits);
+  }
+
+  return [...variants];
+}
+
 function calculateAge(dateOfBirth: Date): number {
   const today = new Date();
   let age = today.getFullYear() - dateOfBirth.getFullYear();
@@ -145,6 +178,183 @@ export class BookingsService {
     };
   }
 
+  async findByPhone(rawPhone: string, filters: BookingFilters = {}) {
+    const variants = normalizePhoneVariants(rawPhone);
+    if (variants.length === 0) return { items: [], meta: { page: 1, pageSize: 20, total: 0, totalPages: 0 } };
+
+    const { status, page = 1, pageSize = 20 } = filters;
+    const skip = (page - 1) * pageSize;
+
+    // Authenticated-user bookings don't store contactPhone — their phone lives in
+    // iam.users.phone_number linked via passenger.iamUserId. Mirror the same lookup
+    // that findAll uses for the search field.
+    const iamRows = await this.dataSource
+      .query<{ id: string }[]>(
+        `SELECT u.id FROM iam.users u WHERE u.phone_number = ANY($1::text[])`,
+        [variants],
+      )
+      .catch((err: unknown) => {
+        this.logger.warn(`IAM phone lookup failed: ${err instanceof Error ? err.message : String(err)}`);
+        return [] as { id: string }[];
+      });
+
+    const iamPassengerIds = iamRows.length > 0
+      ? (await this.prisma.passenger.findMany({
+          where: { iamUserId: { in: iamRows.map(r => r.id) } },
+          select: { id: true },
+        })).map(p => p.id)
+      : [];
+
+    // Guest bookings store phone in TravelerProfile.notes JSON (created for every guest booking).
+    // This catches cases where contactPhone was null but the phone was still recorded in the profile.
+    const travelerRows = await this.dataSource
+      .query<{ passengerId: string }[]>(
+        `SELECT DISTINCT passenger_id AS "passengerId"
+         FROM passenger.traveler_profiles
+         WHERE notes IS NOT NULL
+           AND (notes::jsonb->>'phone') = ANY($1::text[])`,
+        [variants],
+      )
+      .catch((err: unknown) => {
+        this.logger.warn(`TravelerProfile phone lookup failed: ${err instanceof Error ? err.message : String(err)}`);
+        return [] as { passengerId: string }[];
+      });
+    const travelerPassengerIds = travelerRows.map(r => r.passengerId);
+
+    // Guests who saved their profile (savePassengerDetails:true) have a SavedPassengerProfile
+    // row with phone + deviceId. Guest bookings store the deviceId in Booking.userAgent.
+    const savedProfileRows = await this.dataSource
+      .query<{ deviceId: string }[]>(
+        `SELECT DISTINCT device_id AS "deviceId"
+         FROM passenger.saved_passenger_profiles
+         WHERE phone = ANY($1::text[]) AND device_id IS NOT NULL`,
+        [variants],
+      )
+      .catch((err: unknown) => {
+        this.logger.warn(`SavedPassengerProfile phone lookup failed: ${err instanceof Error ? err.message : String(err)}`);
+        return [] as { deviceId: string }[];
+      });
+    const guestDeviceIds = savedProfileRows.map(r => r.deviceId);
+
+    // Merge all passenger IDs from every source
+    const allPassengerIds = [...new Set([...iamPassengerIds, ...travelerPassengerIds])];
+
+    const where: any = {
+      OR: [
+        { contactPhone: { in: variants } },
+        { passenger: { user: { phone: { in: variants } } } },
+        ...(allPassengerIds.length > 0 ? [{ passengerId: { in: allPassengerIds } }] : []),
+        ...(guestDeviceIds.length > 0 ? [{ userAgent: { in: guestDeviceIds } }] : []),
+      ],
+    };
+    if (status) where.status = status;
+
+    // PackageBooking is a separate table with its own contactPhone field —
+    // must be queried independently or guest package bookings are invisible.
+    const pkgWhere: any = {
+      OR: [
+        { contactPhone: { in: variants } },
+        ...(allPassengerIds.length > 0 ? [{ passengerId: { in: allPassengerIds } }] : []),
+      ],
+    };
+    if (status) pkgWhere.status = status;
+
+    const [items, total, pkgItems, pkgTotal] = await Promise.all([
+      this.prisma.booking.findMany({
+        where,
+        skip,
+        take: pageSize,
+        orderBy: { createdAt: 'desc' },
+        include: {
+          schedule: { include: { originStation: true, destinationStation: true, train: true } },
+          paymentIntent: { select: { method: true, status: true, amountMinor: true, currency: true } },
+          seats: { select: { id: true } },
+          priceTier: { select: { priceMinor: true } },
+        },
+      }),
+      this.prisma.booking.count({ where }),
+      this.prisma.packageBooking.findMany({
+        where: pkgWhere,
+        skip,
+        take: pageSize,
+        orderBy: { createdAt: 'desc' },
+        include: {
+          package: {
+            include: {
+              outboundSchedule: { include: { originStation: true, destinationStation: true } },
+            },
+          },
+          paymentIntent: { select: { method: true, status: true, amountMinor: true, currency: true } },
+        },
+      }),
+      this.prisma.packageBooking.count({ where: pkgWhere }),
+    ]);
+
+    const mappedBookings = items.map(booking => ({
+      id: booking.id,
+      bookingRef: booking.bookingRef,
+      status: booking.status,
+      totalMinor: resolvePackageRoundTripTotal(booking, (booking as any).priceTier?.priceMinor, booking.adultCount, booking.childCount),
+      currency: 'ETB',
+      displayCurrency: booking.displayCurrency,
+      displayTotalMinor: booking.displayTotalMinor,
+      adultCount: booking.adultCount,
+      childCount: booking.childCount,
+      bookingType: booking.bookingType,
+      returnLegStatus: (booking as any).returnLegStatus ?? null,
+      createdAt: booking.createdAt,
+      schedule: {
+        train: booking.schedule.train,
+        originStation: booking.schedule.originStation,
+        destinationStation: booking.schedule.destinationStation,
+        departureAt: booking.schedule.departureAt,
+        arrivalAt: booking.schedule.arrivalAt,
+      },
+      payment: booking.paymentIntent ?? undefined,
+      seatCount: booking.seats.length,
+    }));
+
+    const mappedPkg = pkgItems.map((b: any) => ({
+      id: b.id,
+      bookingRef: b.bookingRef,
+      status: b.status,
+      totalMinor: b.totalMinor,
+      currency: b.currency || 'ETB',
+      displayCurrency: b.displayCurrency ?? null,
+      displayTotalMinor: b.displayTotalMinor ?? null,
+      adultCount: b.adultCount,
+      childCount: b.childCount,
+      bookingType: 'PACKAGE',
+      returnLegStatus: null,
+      createdAt: b.createdAt,
+      schedule: b.package?.outboundSchedule
+        ? {
+            train: null,
+            originStation: b.package.outboundSchedule.originStation,
+            destinationStation: b.package.outboundSchedule.destinationStation,
+            departureAt: b.package.outboundSchedule.departureAt,
+            arrivalAt: b.package.outboundSchedule.arrivalAt,
+          }
+        : null,
+      payment: b.paymentIntent ?? undefined,
+      seatCount: b.passengerCount,
+    }));
+
+    const allItems = [...mappedBookings, ...mappedPkg]
+      .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
+      .slice(0, pageSize);
+
+    return {
+      items: allItems,
+      meta: {
+        page,
+        pageSize,
+        total: total + pkgTotal,
+        totalPages: Math.ceil((total + pkgTotal) / pageSize),
+      },
+    };
+  }
+
   async findByDeviceId(deviceId: string, filters: BookingFilters = {}) {
     const { search, status, page = 1, pageSize = 20 } = filters;
     const skip = (page - 1) * pageSize;
@@ -1460,7 +1670,7 @@ export class BookingsService {
       include: {
         schedule: { include: { originStation: true, destinationStation: true, train: true } },
         seats: { include: { seat: { include: { coach: { include: { coachType: { include: { seatClasses: true } } } } } } } },
-        paymentIntent: true, tickets: { take: 1 },
+        paymentIntent: true, tickets: true,
         priceTier: { select: { priceMinor: true } },
       },
     });
@@ -1516,9 +1726,14 @@ export class BookingsService {
           seat: null,
         })),
         payment: (pkgBooking as any).paymentIntent
-          ? { method: (pkgBooking as any).paymentIntent.method, status: (pkgBooking as any).paymentIntent.status }
+          ? {
+              method: (pkgBooking as any).paymentIntent.method,
+              status: (pkgBooking as any).paymentIntent.status,
+              amountMinor: (pkgBooking as any).paymentIntent.amountMinor,
+              currency: (pkgBooking as any).paymentIntent.currency,
+            }
           : undefined,
-        ticket: undefined,
+        tickets: [],
       };
     }
 
@@ -1556,8 +1771,23 @@ export class BookingsService {
           seatClass: bs.seat.coach.coachType?.seatClasses?.[0]?.name ?? null,
         },
       })),
-      payment: (booking as any).paymentIntent ? { method: (booking as any).paymentIntent.method, status: (booking as any).paymentIntent.status } : undefined,
-      ticket: (booking as any).tickets?.[0] ? { id: (booking as any).tickets[0].id, qrPayload: (booking as any).tickets[0].qrPayload, barcodePayload: (booking as any).tickets[0].barcodePayload, status: (booking as any).tickets[0].status } : undefined,
+      payment: (booking as any).paymentIntent
+        ? {
+            method: (booking as any).paymentIntent.method,
+            status: (booking as any).paymentIntent.status,
+            amountMinor: (booking as any).paymentIntent.amountMinor,
+            currency: (booking as any).paymentIntent.currency,
+          }
+        : undefined,
+      // One ticket per passenger — matched on the frontend by passengerName, not array
+      // position, since tickets are grouped/created independently of the passengers array.
+      tickets: (booking as any).tickets?.map((t: any) => ({
+        id: t.id,
+        passengerName: t.passengerName,
+        qrPayload: t.qrPayload,
+        barcodePayload: t.barcodePayload,
+        status: t.status,
+      })) ?? [],
     };
   }
 
diff --git a/apps/edr-passenger-api/src/modules/currencies/currencies.controller.ts b/apps/edr-passenger-api/src/modules/currencies/currencies.controller.ts
index 87dee3ec8..690134388 100644
--- a/apps/edr-passenger-api/src/modules/currencies/currencies.controller.ts
+++ b/apps/edr-passenger-api/src/modules/currencies/currencies.controller.ts
@@ -1,5 +1,5 @@
-import { Controller, Get, Post, Patch, Delete, Body, Param, HttpCode } from '@nestjs/common';
-import { ApiTags, ApiBearerAuth } from '@nestjs/swagger';
+import { Body, Controller, Delete, Get, HttpCode, Param, Patch, Post, UseGuards } from '@nestjs/common';
+import { ApiTags, ApiOperation, ApiBearerAuth } from '@nestjs/swagger';
 import { CurrenciesService } from './currencies.service';
 import { CreateCurrencyDto, UpdateCurrencyDto } from './currencies.dto';
 import { PassengerAdmin, PassengerStaff } from '../../common/passenger-guards';
diff --git a/apps/edr-passenger-api/src/modules/currencies/currencies.service.ts b/apps/edr-passenger-api/src/modules/currencies/currencies.service.ts
index 99fee3cdf..388ed2cda 100644
--- a/apps/edr-passenger-api/src/modules/currencies/currencies.service.ts
+++ b/apps/edr-passenger-api/src/modules/currencies/currencies.service.ts
@@ -13,7 +13,7 @@ export class CurrenciesService {
   async getAllCurrencies() {
     const rates = await this.prisma.currencyExchangeRate.findMany({
       distinct: ['toCurrency'],
-      orderBy: { toCurrency: 'asc' },
+      orderBy: { createdAt: 'desc' },
     });
 
     const base = {
@@ -83,12 +83,14 @@ export class CurrenciesService {
       throw new BadRequestException('Exchange rate must be positive');
     }
 
-    const updated = await this.prisma.currencyExchangeRate.update({
-      where: { id },
-      data: {
-        rate: dto.exchangeRate,
-      },
-    });
+    // Upsert today's record so getRateOrThrow (orderBy effectiveDate desc) picks it up
+    const updated = await this.currencyService.upsertRate(
+      existing.fromCurrency,
+      existing.toCurrency,
+      dto.exchangeRate ?? Number(existing.rate),
+      undefined,
+      'MANUAL',
+    );
 
     return {
       id: updated.id,
@@ -112,8 +114,9 @@ export class CurrenciesService {
       throw new NotFoundException('Currency not found');
     }
 
-    await this.prisma.currencyExchangeRate.delete({
-      where: { id },
+    // Delete all records for this currency pair so no stale rates remain
+    await this.prisma.currencyExchangeRate.deleteMany({
+      where: { fromCurrency: existing.fromCurrency, toCurrency: existing.toCurrency },
     });
 
     return { message: 'Currency deleted successfully' };
diff --git a/apps/edr-passenger-api/src/modules/excess-baggage/excess-baggage.controller.ts b/apps/edr-passenger-api/src/modules/excess-baggage/excess-baggage.controller.ts
index 551cc8881..842f13ca6 100644
--- a/apps/edr-passenger-api/src/modules/excess-baggage/excess-baggage.controller.ts
+++ b/apps/edr-passenger-api/src/modules/excess-baggage/excess-baggage.controller.ts
@@ -8,6 +8,7 @@ import {
   InitiateExcessPaymentDto,
 } from './excess-baggage.dto';
 import { JwtGuard as IamJwtGuard } from '@tria-plc/api-common/modules/auth/services/jwt.guard';
+import { PassengerAdmin } from '../../common/passenger-guards';
 
 class UpsertBaggageAllowanceDto {
   @IsString() seatClassId: string;
@@ -70,6 +71,8 @@ export class ExcessBaggageAgentController {
   }
 
   @Delete('allowances/:id')
+  @PassengerAdmin()
+  @ApiBearerAuth('IAM-auth')
   @ApiOperation({ summary: 'Delete baggage allowance rule' })
   deleteAllowance(@Param('id') id: string) {
     return this.service.deleteAllowance(id);
@@ -94,6 +97,8 @@ export class ExcessBaggageAgentController {
   }
 
   @Delete(':id')
+  @PassengerAdmin()
+  @ApiBearerAuth('IAM-auth')
   @ApiOperation({ summary: 'Delete excess baggage charge (admin only)' })
   deleteCharge(@Param('id') id: string) {
     return this.service.deleteCharge(id);
diff --git a/apps/edr-passenger-api/src/modules/fare-engine/currency.controller.ts b/apps/edr-passenger-api/src/modules/fare-engine/currency.controller.ts
index 1d35f6b61..0cd1eda71 100644
--- a/apps/edr-passenger-api/src/modules/fare-engine/currency.controller.ts
+++ b/apps/edr-passenger-api/src/modules/fare-engine/currency.controller.ts
@@ -1,9 +1,10 @@
 import { Body, Controller, Delete, Get, Param, Patch, Put, Post } from '@nestjs/common';
-import { ApiTags, ApiOperation, ApiParam, ApiProperty, ApiResponse } from '@nestjs/swagger';
+import { ApiTags, ApiOperation, ApiParam, ApiProperty, ApiResponse, ApiBearerAuth } from '@nestjs/swagger';
 import { CurrencyService } from '../currency/currency.service';
 import { UpsertExchangeRateDto } from './currency.dto';
 import { IsNumber, IsPositive, IsOptional, IsString } from 'class-validator';
 import { Type } from 'class-transformer';
+import { PassengerAdmin } from '../../common/passenger-guards';
 
 class UpdateExchangeRateDto {
   @ApiProperty({ example: 3.5 }) @Type(() => Number) @IsNumber() @IsPositive() rate: number;
@@ -38,6 +39,8 @@ export class CurrencyController {
   }
 
   @Delete(':id')
+  @PassengerAdmin()
+  @ApiBearerAuth('IAM-auth')
   @ApiOperation({ summary: 'Delete an exchange rate record by ID' })
   @ApiParam({ name: 'id', description: 'CurrencyExchangeRate UUID' })
   @ApiResponse({ status: 200, description: 'Rate deleted' })
diff --git a/apps/edr-passenger-api/src/modules/fleet/fleet.controller.ts b/apps/edr-passenger-api/src/modules/fleet/fleet.controller.ts
index 7422e45b0..d3864e2b2 100644
--- a/apps/edr-passenger-api/src/modules/fleet/fleet.controller.ts
+++ b/apps/edr-passenger-api/src/modules/fleet/fleet.controller.ts
@@ -3,6 +3,7 @@ import { ApiTags, ApiOperation, ApiBearerAuth, ApiParam, ApiQuery, ApiBody, ApiR
 import { FleetService } from './fleet.service';
 import { CreateTrainDto, CreateCoachDto, UpdateCoachDto, AssignCoachDto, ListCoachesDto, CreateCoachTypeDto, UpdateCoachTypeDto, CreateClassDto, UpdateClassDto, GenerateSeatMapDto } from './fleet.dto';
 import { JwtGuard } from '../../common/jwt.guard';
+import { PassengerAdmin } from '../../common/passenger-guards';
 
 @ApiTags('Fleet')
 @Controller('fleet')
@@ -38,6 +39,8 @@ export class FleetController {
   }
 
   @Delete('coach-types/:id')
+  @PassengerAdmin()
+  @ApiBearerAuth('IAM-auth')
   @ApiOperation({ summary: 'Delete a coach type' })
   @ApiParam({ name: 'id', description: 'Coach Type UUID' })
   @ApiResponse({ status: 200, description: 'Coach type deleted' })
@@ -74,6 +77,8 @@ export class FleetController {
   }
 
   @Delete('classes/:id')
+  @PassengerAdmin()
+  @ApiBearerAuth('IAM-auth')
   @ApiOperation({ summary: 'Delete a class' })
   @ApiParam({ name: 'id', description: 'Class UUID' })
   @ApiQuery({ name: 'cascade', required: false, type: Boolean, description: 'Force delete with all related data' })
@@ -111,6 +116,8 @@ export class FleetController {
   }
 
   @Delete('seat-classes/:id')
+  @PassengerAdmin()
+  @ApiBearerAuth('IAM-auth')
   @ApiOperation({ summary: 'Delete a class (DEPRECATED - use /fleet/classes)' })
   @ApiParam({ name: 'id', description: 'Class UUID' })
   @ApiQuery({ name: 'cascade', required: false, type: Boolean, description: 'Force delete with all related data' })
@@ -147,6 +154,8 @@ export class FleetController {
   }
 
   @Delete('trains/:id')
+  @PassengerAdmin()
+  @ApiBearerAuth('IAM-auth')
   @ApiOperation({ summary: 'Delete a train service' })
   @ApiParam({ name: 'id', description: 'Train UUID' })
   @ApiQuery({ name: 'cascade', required: false, type: Boolean, description: 'Force delete with all related data' })
@@ -310,6 +319,8 @@ export class FleetController {
   }
 
   @Delete('coaches/:id')
+  @PassengerAdmin()
+  @ApiBearerAuth('IAM-auth')
   @ApiOperation({ summary: 'Delete a coach' })
   @ApiParam({ name: 'id', description: 'Coach UUID' })
   @ApiQuery({ name: 'cascade', required: false, type: Boolean, description: 'Force delete with all related data' })
@@ -329,6 +340,8 @@ export class FleetController {
   }
 
   @Delete('assignments/:id')
+  @PassengerAdmin()
+  @ApiBearerAuth('IAM-auth')
   @ApiOperation({ summary: 'Remove a coach assignment' })
   @ApiParam({ name: 'id', description: 'Assignment UUID' })
   @ApiResponse({ status: 200, description: 'Assignment removed' })
diff --git a/apps/edr-passenger-api/src/modules/packages/packages.controller.ts b/apps/edr-passenger-api/src/modules/packages/packages.controller.ts
index 07e324336..314f8aeb4 100644
--- a/apps/edr-passenger-api/src/modules/packages/packages.controller.ts
+++ b/apps/edr-passenger-api/src/modules/packages/packages.controller.ts
@@ -6,6 +6,7 @@ import { CreatePackageDto, BookPackageDto, CreatePriceTierDto, UpdatePriceTierDt
 import { IamGuard } from '../../common/iam-adapter';
 import { JwtGuard } from '../../common/jwt.guard';
 import { OptionalJwtGuard } from '../verifayda/optional-jwt.guard';
+import { PassengerAdmin } from '../../common/passenger-guards';
 
 @ApiTags('Packages')
 @Controller('packages')
@@ -41,7 +42,7 @@ export class PackagesController {
   }
 
   @Delete('inquiries/:id')
-  @UseGuards(IamGuard)
+  @PassengerAdmin()
   @ApiBearerAuth('IAM-auth')
   @ApiOperation({ summary: 'Delete inquiry (backoffice)' })
   deleteInquiry(@Param('id') id: string) {
@@ -139,7 +140,7 @@ export class PackagesController {
   }
 
   @Delete(':id')
-  @UseGuards(IamGuard)
+  @PassengerAdmin()
   @ApiBearerAuth('IAM-auth')
   @ApiOperation({ summary: 'Delete package (admin)' })
   @ApiQuery({ name: 'cascade', required: false, type: Boolean, description: 'Force delete even with active bookings' })
@@ -180,7 +181,7 @@ export class PackagesController {
   }
 
   @Delete('tiers/:tierId')
-  @UseGuards(IamGuard)
+  @PassengerAdmin()
   @ApiBearerAuth('IAM-auth')
   @ApiOperation({ summary: 'Delete price tier (admin)' })
   deleteTier(@Param('tierId') tierId: string) {
diff --git a/apps/edr-passenger-api/src/modules/passengers/passengers.controller.ts b/apps/edr-passenger-api/src/modules/passengers/passengers.controller.ts
index f0b719386..cfa4a8805 100644
--- a/apps/edr-passenger-api/src/modules/passengers/passengers.controller.ts
+++ b/apps/edr-passenger-api/src/modules/passengers/passengers.controller.ts
@@ -4,6 +4,7 @@ import { SkipThrottle, Throttle } from '@nestjs/throttler';
 import { PassengersService } from './passengers.service';
 import { CreateTravelerProfileDto, CreateSavedRouteDto, VerifyFaydaDto, SavePassengersDto, RegisterPassengerDto } from './passengers.dto';
 import { JwtGuard } from '../../common/jwt.guard';
+import { PassengerAdmin } from '../../common/passenger-guards';
 import { VerifaydaService } from '../verifayda/verifayda.service';
 import { OptionalJwtGuard } from '../verifayda/optional-jwt.guard';
 import { PrismaService } from '../../common/prisma.service';
@@ -503,7 +504,8 @@ Returns saved passenger details with generated IDs and confirmation.`,
   }
 
   @Delete(':id')
-  @SetMetadata('isPublic', true)
+  @PassengerAdmin()
+  @ApiBearerAuth('IAM-auth')
   @ApiOperation({ 
     summary: 'Delete passenger (admin only)',
     description: 'Permanently deletes a passenger record and associated data'
diff --git a/apps/edr-passenger-api/src/modules/payments/payments.service.ts b/apps/edr-passenger-api/src/modules/payments/payments.service.ts
index 5e44038c4..4b0284935 100644
--- a/apps/edr-passenger-api/src/modules/payments/payments.service.ts
+++ b/apps/edr-passenger-api/src/modules/payments/payments.service.ts
@@ -99,6 +99,8 @@ export class PaymentsService {
               priceTierId: true,
               adultCount: true,
               childCount: true,
+              totalMinor: true,
+              currency: true,
               priceTier: { select: { priceMinor: true } },
             },
           },
@@ -129,7 +131,7 @@ export class PaymentsService {
           id: item.id,
           reference: item.id.substring(0, 8),
           bookingId: item.bookingId,
-          booking: { bookingRef: b?.bookingRef },
+          booking: { bookingRef: b?.bookingRef, totalMinor: b?.totalMinor, currency: b?.currency },
           amountMinor,
           currency: item.currency,
           method: item.method,
diff --git a/apps/edr-passenger-api/src/modules/promos/promos.controller.ts b/apps/edr-passenger-api/src/modules/promos/promos.controller.ts
index 8bdf8f868..6a547116e 100644
--- a/apps/edr-passenger-api/src/modules/promos/promos.controller.ts
+++ b/apps/edr-passenger-api/src/modules/promos/promos.controller.ts
@@ -3,6 +3,7 @@ import { ApiTags, ApiOperation, ApiBearerAuth } from '@nestjs/swagger';
 import { PromosService } from './promos.service';
 import { CreatePromotionDto } from './promos.dto';
 import { JwtGuard } from '../../common/jwt.guard';
+import { PassengerAdmin } from '../../common/passenger-guards';
 
 @ApiTags('Promotions')
 @Controller('promos')
@@ -64,8 +65,8 @@ export class PromosController {
   }
 
   @Delete(':id')
-  @UseGuards(JwtGuard)
-  @ApiBearerAuth('JWT-auth')
+  @PassengerAdmin()
+  @ApiBearerAuth('IAM-auth')
   @ApiOperation({ summary: 'Delete promo (admin)' })
   delete(@Param('id') id: string) {
     return this.service.delete(id);
diff --git a/apps/edr-passenger-api/src/modules/schedules/routes.controller.ts b/apps/edr-passenger-api/src/modules/schedules/routes.controller.ts
index f432cf072..e751278ce 100644
--- a/apps/edr-passenger-api/src/modules/schedules/routes.controller.ts
+++ b/apps/edr-passenger-api/src/modules/schedules/routes.controller.ts
@@ -3,6 +3,7 @@ import { ApiTags, ApiOperation, ApiBearerAuth, ApiParam, ApiQuery, ApiResponse }
 import { RoutesService } from './routes.service';
 import { CreateRouteDto, AddRouteStopDto, UpdateRouteDto, SetRouteCoachTemplateDto } from './routes.dto';
 import { JwtGuard } from '../../common/jwt.guard';
+import { PassengerAdmin } from '../../common/passenger-guards';
 
 @ApiTags('Routes')
 @Controller('routes')
@@ -48,7 +49,8 @@ Route stops carry distanceKm for fare-by-distance calculations.`,
   updateRoute(@Param('id') id: string, @Body() dto: UpdateRouteDto) { return this.service.updateRoute(id, dto); }
 
   @Delete(':id')
-  @UseGuards(JwtGuard) @ApiBearerAuth('JWT-auth')
+  @PassengerAdmin()
+  @ApiBearerAuth('IAM-auth')
   @ApiOperation({ summary: 'Delete a route' })
   @ApiParam({ name: 'id', description: 'Route UUID' })
   @ApiQuery({ name: 'cascade', required: false, type: Boolean, description: 'Force delete with all related data' })
@@ -75,7 +77,8 @@ Route stops carry distanceKm for fare-by-distance calculations.`,
   addStop(@Param('id') id: string, @Body() dto: AddRouteStopDto) { return this.service.addStop(id, dto); }
 
   @Delete(':id/stops/:sequence')
-  @UseGuards(JwtGuard) @ApiBearerAuth('JWT-auth')
+  @PassengerAdmin()
+  @ApiBearerAuth('IAM-auth')
   @ApiOperation({ summary: 'Remove a stop from a route by sequence number' })
   @ApiParam({ name: 'id', description: 'Route UUID' })
   @ApiParam({ name: 'sequence', description: 'Stop sequence number to remove' })
@@ -119,7 +122,8 @@ Route stops carry distanceKm for fare-by-distance calculations.`,
   }
 
   @Delete(':id/coaches')
-  @UseGuards(JwtGuard) @ApiBearerAuth('JWT-auth')
+  @PassengerAdmin()
+  @ApiBearerAuth('IAM-auth')
   @ApiOperation({ summary: 'Clear the default coach lineup for this route' })
   @ApiParam({ name: 'id', description: 'Route UUID' })
   @ApiResponse({ status: 200, description: 'Template cleared' })
diff --git a/apps/edr-passenger-api/src/modules/schedules/schedules.controller.ts b/apps/edr-passenger-api/src/modules/schedules/schedules.controller.ts
index 3cb95104d..9fc2ba851 100644
--- a/apps/edr-passenger-api/src/modules/schedules/schedules.controller.ts
+++ b/apps/edr-passenger-api/src/modules/schedules/schedules.controller.ts
@@ -4,6 +4,7 @@ import { IsPublic } from '@tria-plc/api-common/modules/auth/decorators/public.de
 import { SchedulesService } from './schedules.service';
 import { CreateScheduleDto, UpdateScheduleDto, CreateFareRuleDto, UpdateScheduleStatusDto, UpdateStopTimeDto, ListSchedulesDto, BulkCreateSchedulesDto, BulkSchedulesResponseDto, TripStatus } from './schedules.dto';
 import { JwtGuard } from '../../common/jwt.guard';
+import { PassengerAdmin } from '../../common/passenger-guards';
 
 @ApiTags('Schedule')
 @Controller('schedules')
@@ -56,7 +57,8 @@ export class SchedulesController {
   }
 
   @Delete('fares/:id')
-  @UseGuards(JwtGuard) @ApiBearerAuth('JWT-auth')
+  @PassengerAdmin()
+  @ApiBearerAuth('IAM-auth')
   @ApiOperation({ summary: 'Delete a fare rule' })
   @ApiParam({ name: 'id', description: 'FareRule UUID' })
   @ApiResponse({ status: 200, description: 'Fare rule deleted' })
@@ -80,7 +82,8 @@ export class SchedulesController {
   updateSegmentFareRule(@Param('id') id: string, @Body() dto: any) { return this.service.updateSegmentFareRule(id, dto); }
 
   @Delete('segment-fares/:id')
-  @UseGuards(JwtGuard) @ApiBearerAuth('JWT-auth')
+  @PassengerAdmin()
+  @ApiBearerAuth('IAM-auth')
   @ApiOperation({ summary: 'Delete a segment fare rule' })
   @ApiParam({ name: 'id', description: 'SegmentFareRule UUID' })
   deleteSegmentFareRule(@Param('id') id: string) { return this.service.deleteSegmentFareRule(id); }
@@ -110,7 +113,8 @@ export class SchedulesController {
   }
 
   @Delete(':id')
-  @UseGuards(JwtGuard) @ApiBearerAuth('JWT-auth')
+  @PassengerAdmin()
+  @ApiBearerAuth('IAM-auth')
   @ApiOperation({ summary: 'Delete a schedule' })
   @ApiParam({ name: 'id', description: 'TrainSchedule UUID' })
   @ApiQuery({ name: 'cascade', required: false, type: Boolean })
@@ -203,7 +207,8 @@ export class SchedulesController {
   getAssignedCoaches(@Param('id') id: string) { return this.service.getAssignedCoaches(id); }
 
   @Delete(':id/coaches/:coachId')
-  @UseGuards(JwtGuard) @ApiBearerAuth('JWT-auth')
+  @PassengerAdmin()
+  @ApiBearerAuth('IAM-auth')
   @ApiOperation({ summary: 'Remove a coach assignment' })
   @ApiParam({ name: 'id', description: 'TrainSchedule UUID' })
   @ApiParam({ name: 'coachId', description: 'Coach UUID' })
diff --git a/apps/edr-passenger-api/src/modules/seat-classes/seat-classes.controller.ts b/apps/edr-passenger-api/src/modules/seat-classes/seat-classes.controller.ts
index 86eb287a4..4eb6c212b 100644
--- a/apps/edr-passenger-api/src/modules/seat-classes/seat-classes.controller.ts
+++ b/apps/edr-passenger-api/src/modules/seat-classes/seat-classes.controller.ts
@@ -4,6 +4,7 @@ import { IsPublic } from '@tria-plc/api-common/modules/auth/decorators/public.de
 import { SeatClassesService } from './seat-classes.service';
 import { CreateSeatClassDto, UpdateSeatClassDto } from './seat-classes.dto';
 import { JwtGuard } from '../../common/jwt.guard';
+import { PassengerAdmin } from '../../common/passenger-guards';
 
 @ApiTags('Seat Classes')
 @Controller('seat-classes')
@@ -42,7 +43,8 @@ export class SeatClassesController {
   updateSeatClass(@Param('id') id: string, @Body() dto: UpdateSeatClassDto) { return this.service.updateSeatClass(id, dto); }
 
   @Delete(':id')
-  @UseGuards(JwtGuard) @ApiBearerAuth('JWT-auth')
+  @PassengerAdmin()
+  @ApiBearerAuth('IAM-auth')
   @ApiOperation({ summary: 'Delete a seat class' })
   @ApiParam({ name: 'id', description: 'Seat class UUID' })
   @ApiResponse({ status: 200, description: 'Seat class deleted' })
diff --git a/apps/edr-passenger-api/src/modules/seat-classes/seat-classes.dto.ts b/apps/edr-passenger-api/src/modules/seat-classes/seat-classes.dto.ts
index 1f061bf53..1ea743aa6 100644
--- a/apps/edr-passenger-api/src/modules/seat-classes/seat-classes.dto.ts
+++ b/apps/edr-passenger-api/src/modules/seat-classes/seat-classes.dto.ts
@@ -29,6 +29,11 @@ export class CreateSeatClassDto {
   @IsInt()
   basePrice: number;
 
+  @ApiPropertyOptional({ example: 1200, description: 'Flat insurance fee in minor units' })
+  @IsOptional()
+  @IsInt()
+  insuranceFeeMinor?: number;
+
   @ApiPropertyOptional({ example: true })
   @IsOptional()
   @IsBoolean()
diff --git a/apps/edr-passenger-api/src/modules/seats/seats.service.ts b/apps/edr-passenger-api/src/modules/seats/seats.service.ts
index b26dcb763..3d485d22c 100644
--- a/apps/edr-passenger-api/src/modules/seats/seats.service.ts
+++ b/apps/edr-passenger-api/src/modules/seats/seats.service.ts
@@ -837,13 +837,16 @@ export class SeatsService {
   async removeSeat(seatId: string) {
     const seat = await this.prisma.seat.findUnique({ where: { id: seatId } });
     if (!seat) throw new NotFoundException('Seat not found');
-    if (!seat.seatNumber) throw new BadRequestException('Seat already removed');
+    if (!seat.seatNumber || seat.seatNumber.startsWith('-')) throw new BadRequestException('Seat already removed');
 
+    // Mark as removed, then renumber all active seats in the coach
     await this.prisma.seat.update({
       where: { id: seatId },
       data: { seatNumber: `-${seat.seatNumber}` },
     });
 
+    await this.renumberCoachSeats(seat.coachId);
+
     return { removed: true, seatId, originalSeatNumber: seat.seatNumber };
   }
 
@@ -854,10 +857,38 @@ export class SeatsService {
       throw new BadRequestException('Seat is not removed');
     }
 
-    const originalNumber = seat.seatNumber.slice(1);
-    await this.prisma.seat.update({ where: { id: seatId }, data: { seatNumber: originalNumber } });
+    // Restore with a temporary placeholder number, then renumber
+    await this.prisma.seat.update({ where: { id: seatId }, data: { seatNumber: `__restore__${seatId}` } });
+    await this.renumberCoachSeats(seat.coachId);
 
-    return { restored: true, seatId, seatNumber: originalNumber };
+    const restored = await this.prisma.seat.findUnique({ where: { id: seatId } });
+    return { restored: true, seatId, seatNumber: restored?.seatNumber };
+  }
+
+  /**
+   * Renumbers all active (non-removed) seats in a coach sequentially starting from 1,
+   * ordered by row then col. Removed seats (prefixed with "-") keep their slot but
+   * are excluded from the numbering sequence so numbers remain continuous.
+   */
+  private async renumberCoachSeats(coachId: string): Promise<void> {
+    const allSeats = await this.prisma.seat.findMany({
+      where: { coachId },
+      orderBy: [{ row: 'asc' }, { col: 'asc' }],
+      select: { id: true, seatNumber: true },
+    });
+
+    const activeSeats = allSeats.filter(
+      (s) => s.seatNumber && !s.seatNumber.startsWith('-') && !s.seatNumber.startsWith('__restore__'),
+    );
+
+    await Promise.all(
+      activeSeats.map((s, idx) =>
+        this.prisma.seat.update({
+          where: { id: s.id },
+          data: { seatNumber: String(idx + 1) },
+        }),
+      ),
+    );
   }
 
   @Cron(CronExpression.EVERY_MINUTE)
diff --git a/apps/edr-passenger-api/src/modules/stations/stations.controller.ts b/apps/edr-passenger-api/src/modules/stations/stations.controller.ts
index 2b1842c2a..0f367043b 100644
--- a/apps/edr-passenger-api/src/modules/stations/stations.controller.ts
+++ b/apps/edr-passenger-api/src/modules/stations/stations.controller.ts
@@ -4,6 +4,7 @@ import { IsPublic } from '@tria-plc/api-common/modules/auth/decorators/public.de
 import { StationsService } from './stations.service';
 import { CreateStationDto } from './stations.dto';
 import { JwtGuard } from '../../common/jwt.guard';
+import { PassengerAdmin } from '../../common/passenger-guards';
 
 @ApiTags('Stations')
 @Controller('stations')
@@ -133,8 +134,8 @@ export class StationsController {
   }
 
   @Delete(':id')
-  @UseGuards(JwtGuard)
-  @ApiBearerAuth('JWT-auth')
+  @PassengerAdmin()
+  @ApiBearerAuth('IAM-auth')
   @ApiOperation({ summary: 'Delete station' })
   @ApiQuery({ name: 'cascade', required: false, type: Boolean, description: 'Force delete with all related data' })
   @ApiResponse({ status: 200, description: 'Station deleted successfully' })
diff --git a/apps/edr-passenger-api/src/modules/system-config/system-config.service.ts b/apps/edr-passenger-api/src/modules/system-config/system-config.service.ts
index 1661d2027..3cfa1beb8 100644
--- a/apps/edr-passenger-api/src/modules/system-config/system-config.service.ts
+++ b/apps/edr-passenger-api/src/modules/system-config/system-config.service.ts
@@ -4,6 +4,7 @@ import { PrismaService } from '../../common/prisma.service';
 export const CONFIG_KEYS = {
   SEAT_HOLD_DURATION_MINUTES: 'seat_hold_duration_minutes',
   HOLD_CUTOFF_HOURS_BEFORE_DEPARTURE: 'hold_cutoff_hours_before_departure',
+  BOARDING_WINDOW_HOURS_BEFORE_DEPARTURE: 'boarding_window_hours_before_departure',
   THROTTLE_AUTH_LIMIT: 'throttle_auth_limit',
   THROTTLE_AUTH_TTL_MS: 'throttle_auth_ttl_ms',
   THROTTLE_STRICT_LIMIT: 'throttle_strict_limit',
@@ -15,6 +16,7 @@ export const CONFIG_KEYS = {
 const DEFAULTS: Record<string, string> = {
   [CONFIG_KEYS.SEAT_HOLD_DURATION_MINUTES]: '5',
   [CONFIG_KEYS.HOLD_CUTOFF_HOURS_BEFORE_DEPARTURE]: '2',
+  [CONFIG_KEYS.BOARDING_WINDOW_HOURS_BEFORE_DEPARTURE]: '4',
   [CONFIG_KEYS.THROTTLE_AUTH_LIMIT]: '5',
   [CONFIG_KEYS.THROTTLE_AUTH_TTL_MS]: '60000',
   [CONFIG_KEYS.THROTTLE_STRICT_LIMIT]: '20',
diff --git a/apps/edr-passenger-api/src/modules/tickets/tickets.controller.ts b/apps/edr-passenger-api/src/modules/tickets/tickets.controller.ts
index 8d85012dd..7f49d77b1 100644
--- a/apps/edr-passenger-api/src/modules/tickets/tickets.controller.ts
+++ b/apps/edr-passenger-api/src/modules/tickets/tickets.controller.ts
@@ -2,6 +2,7 @@ import { Body, Controller, Get, Param, Post, Query, UseGuards, Delete, Patch, Se
 import { ApiTags, ApiOperation, ApiBearerAuth, ApiBody, ApiQuery } from '@nestjs/swagger';
 import { TicketsService } from './tickets.service';
 import { JwtGuard } from '../../common/jwt.guard';
+import { PassengerAdmin } from '../../common/passenger-guards';
 
 @ApiTags('Tickets')
 @Controller('tickets')
@@ -9,7 +10,8 @@ export class TicketsController {
   constructor(private service: TicketsService) {}
   
   @Post('generate/:bookingId')
-  @SetMetadata('isPublic', true)
+  @PassengerAdmin()
+  @ApiBearerAuth('IAM-auth')
   @ApiOperation({
     summary: 'Generate ticket for booking (confirmation page)',
     description: 'Creates a ticket when confirmation page is reached and permanently holds all associated seats with SeatBlock records.'
diff --git a/apps/edr-passenger-api/src/modules/tickets/tickets.module.ts b/apps/edr-passenger-api/src/modules/tickets/tickets.module.ts
index 972668e18..1ccc2e392 100644
--- a/apps/edr-passenger-api/src/modules/tickets/tickets.module.ts
+++ b/apps/edr-passenger-api/src/modules/tickets/tickets.module.ts
@@ -3,9 +3,10 @@ import { TicketsController } from './tickets.controller';
 import { TicketsService } from './tickets.service';
 import { JwtGuard } from '../../common/jwt.guard';
 import { NotificationsModule } from '../notifications/notifications.module';
+import { SystemConfigModule } from '../system-config/system-config.module';
 
 @Module({
-  imports: [NotificationsModule],
+  imports: [NotificationsModule, SystemConfigModule],
   controllers: [TicketsController],
   providers: [TicketsService, JwtGuard],
   exports: [TicketsService, JwtGuard],
diff --git a/apps/edr-passenger-api/src/modules/tickets/tickets.service.ts b/apps/edr-passenger-api/src/modules/tickets/tickets.service.ts
index 4a1f7b36e..1a9c88d4e 100644
--- a/apps/edr-passenger-api/src/modules/tickets/tickets.service.ts
+++ b/apps/edr-passenger-api/src/modules/tickets/tickets.service.ts
@@ -3,6 +3,7 @@ import { InjectDataSource } from '@nestjs/typeorm';
 import { DataSource } from 'typeorm';
 import { PrismaService } from '../../common/prisma.service';
 import { NotificationsService } from '../notifications/notifications.service';
+import { SystemConfigService, CONFIG_KEYS } from '../system-config/system-config.service';
 import * as QRCode from 'qrcode';
 
 interface OfflineValidation {
@@ -20,6 +21,7 @@ export class TicketsService {
   constructor(
     private readonly prisma: PrismaService,
     private readonly notifications: NotificationsService,
+    private readonly systemConfig: SystemConfigService,
     @InjectDataSource() private readonly dataSource: DataSource,
   ) {}
 
@@ -423,26 +425,20 @@ export class TicketsService {
 
       // Check if ticket date matches today
       const today = new Date();
-      const todayDateStr = today.toISOString().split('T')[0]; // YYYY-MM-DD format
       
       if ((booking as any).schedule?.departureAt) {
-        const departureDate = new Date((booking as any).schedule.departureAt);
-        const departureDateStr = departureDate.toISOString().split('T')[0];
-        
-        // Check if ticket is for today
-        if (departureDateStr !== todayDateStr) {
-          if (departureDateStr < todayDateStr) {
-            throw new BadRequestException('Ticket has expired - departure date has passed');
-          } else {
-            throw new BadRequestException('Ticket is for a future date - cannot board early');
-          }
-        }
-        
-        // Additional check: ticket expires 4 hours after departure time
         const departureTime = new Date((booking as any).schedule.departureAt);
-        const expiryTime = new Date(departureTime.getTime() + 4 * 60 * 60 * 1000); // 4 hours after departure
-        if (today > expiryTime) {
-          throw new BadRequestException('Ticket has expired - boarding window closed');
+        const boardingWindowHours = await this.systemConfig.getNumber(CONFIG_KEYS.BOARDING_WINDOW_HOURS_BEFORE_DEPARTURE);
+        const boardingOpenTime = new Date(departureTime.getTime() - boardingWindowHours * 60 * 60 * 1000);
+
+        if (today < boardingOpenTime) {
+          throw new BadRequestException(
+            `Boarding opens ${boardingWindowHours} hour(s) before departure at ${boardingOpenTime.toISOString()}`,
+          );
+        }
+
+        if (today >= departureTime) {
+          throw new BadRequestException('Boarding is closed — departure time has passed');
         }
       }
 
diff --git a/apps/edr-passenger-web/backoffice/src/app/bookings/page.tsx b/apps/edr-passenger-web/backoffice/src/app/bookings/page.tsx
index ea45fe321..3133a87e4 100644
--- a/apps/edr-passenger-web/backoffice/src/app/bookings/page.tsx
+++ b/apps/edr-passenger-web/backoffice/src/app/bookings/page.tsx
@@ -254,12 +254,16 @@ function BookingsPageContent() {
     },
     {
       key: 'contact', label: 'Primary contact',
-      render: (booking: any) => (
-        <div>
-          <div className="font-medium">{booking.contactPhone || booking.passenger?.phone}</div>
-          <div className="text-sm text-muted-foreground">{booking.contactEmail || booking.passenger?.email}</div>
-        </div>
-      ),
+      render: (booking: any) => {
+        const phone = booking.contactPhone || booking.passenger?.phone || '—';
+        const email = booking.contactEmail || booking.passenger?.email || '—';
+        return (
+          <div>
+            <div className="font-medium">{phone}</div>
+            <div className="text-sm text-muted-foreground truncate" title={email}>{email}</div>
+          </div>
+        );
+      },
     },
     {
       key: 'paymentStatus', label: 'Payment',
diff --git a/apps/edr-passenger-web/backoffice/src/app/currencies/page.tsx b/apps/edr-passenger-web/backoffice/src/app/currencies/page.tsx
index cee6944f6..edf23692a 100644
--- a/apps/edr-passenger-web/backoffice/src/app/currencies/page.tsx
+++ b/apps/edr-passenger-web/backoffice/src/app/currencies/page.tsx
@@ -146,7 +146,13 @@ export default function CurrenciesPage() {
 
   const actions = [
     { label: 'Edit', onClick: handleEdit, variant: 'secondary' as const, icon: Edit },
-    { label: 'Delete', onClick: (c: CurrencyRate) => setDeleteConfirm(c), variant: 'danger' as const, icon: Trash2 },
+    {
+      label: 'Delete',
+      onClick: (c: CurrencyRate) => setDeleteConfirm(c),
+      variant: 'danger' as const,
+      icon: Trash2,
+      show: (c: CurrencyRate) => c.id !== 'etb-base',
+    },
   ];
 
   return (
diff --git a/apps/edr-passenger-web/backoffice/src/app/payments/page.tsx b/apps/edr-passenger-web/backoffice/src/app/payments/page.tsx
index 30639e82d..17eb6d0e6 100644
--- a/apps/edr-passenger-web/backoffice/src/app/payments/page.tsx
+++ b/apps/edr-passenger-web/backoffice/src/app/payments/page.tsx
@@ -93,7 +93,7 @@ export default function PaymentsPage() {
           switch (key) {
             case 'reference': return payment.reference || payment.id?.substring(0, 8) || '';
             case 'booking':   return payment.booking?.bookingRef || 'N/A';
-            case 'amount':    return formatCurrency(payment.amountMinor, payment.currency);
+            case 'amount':    return formatCurrency(payment.booking?.totalMinor ?? payment.amountMinor, 'ETB');
             case 'method':    return payment.method || '';
             case 'status':    return payment.status || '';
             case 'createdAt': return payment.createdAt ? new Date(payment.createdAt).toLocaleString() : '';
@@ -116,7 +116,7 @@ export default function PaymentsPage() {
   const columns = [
     { key: 'reference', label: 'Reference', render: (payment: any) => <span className="font-mono">{payment.reference || payment.id?.substring(0, 8)}</span> },
     { key: 'booking', label: 'Booking', render: (payment: any) => payment.booking?.bookingRef || 'N/A' },
-    { key: 'amount', label: 'Amount', render: (payment: any) => formatCurrency(payment.amountMinor, payment.currency) },
+    { key: 'amount', label: 'Amount', render: (payment: any) => formatCurrency(payment.booking?.totalMinor ?? payment.amountMinor, 'ETB') },
     { key: 'method', label: 'Method', render: (payment: any) => <Badge>{payment.method}</Badge> },
     { key: 'status', label: 'Status', render: (payment: any) => <Badge variant="status" status={payment.status}>{payment.status}</Badge> },
     { key: 'createdAt', label: 'Created', render: (payment: any) => formatDateTime(payment.createdAt) },
@@ -204,7 +204,7 @@ export default function PaymentsPage() {
                 </div>
                 <div className="mt-4 grid grid-cols-3 gap-3">
                   {[
-                    { label: 'Amount', value: formatCurrency(p.amountMinor, p.currency) },
+                    { label: 'Amount', value: formatCurrency(p.booking?.totalMinor ?? p.amountMinor, 'ETB') },
                     { label: 'Method', value: p.method || '—' },
                     { label: 'Booking', value: p.booking?.bookingRef || '—' },
                   ].map(({ label, value }) => (
@@ -222,7 +222,7 @@ export default function PaymentsPage() {
                   <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                     <div className="bg-muted/40 rounded-lg p-3 col-span-2">
                       <p className="text-xs text-muted-foreground mb-1">Amount</p>
-                      <p className="text-xl font-bold">{formatCurrency(p.amountMinor, p.currency || 'ETB')}</p>
+                      <p className="text-xl font-bold">{formatCurrency(p.booking?.totalMinor ?? p.amountMinor, 'ETB')}</p>
                     </div>
                     <Field label="Method" value={p.method} />
                     <Field label="Status" value={p.status} />
diff --git a/apps/edr-passenger-web/backoffice/src/app/settings/page.tsx b/apps/edr-passenger-web/backoffice/src/app/settings/page.tsx
index 16f262b8e..3f0a266fd 100644
--- a/apps/edr-passenger-web/backoffice/src/app/settings/page.tsx
+++ b/apps/edr-passenger-web/backoffice/src/app/settings/page.tsx
@@ -10,6 +10,7 @@ export default function SettingsPage() {
   const [activeTab, setActiveTab] = useState<Tab>('general');
   const [seatHoldMinutes, setSeatHoldMinutes] = useState('5');
   const [holdCutoffHours, setHoldCutoffHours] = useState('2');
+  const [boardingWindowHours, setBoardingWindowHours] = useState('4');
   const [throttleAuthLimit, setThrottleAuthLimit] = useState('5');
   const [throttleStrictLimit, setThrottleStrictLimit] = useState('20');
   const [throttleDefaultLimit, setThrottleDefaultLimit] = useState('100');
@@ -24,6 +25,7 @@ export default function SettingsPage() {
       .then((data) => {
         if (data?.seat_hold_duration_minutes) setSeatHoldMinutes(data.seat_hold_duration_minutes);
         if (data?.hold_cutoff_hours_before_departure) setHoldCutoffHours(data.hold_cutoff_hours_before_departure);
+        if (data?.boarding_window_hours_before_departure) setBoardingWindowHours(data.boarding_window_hours_before_departure);
         if (data?.throttle_auth_limit) setThrottleAuthLimit(data.throttle_auth_limit);
         if (data?.throttle_strict_limit) setThrottleStrictLimit(data.throttle_strict_limit);
         if (data?.throttle_default_limit) setThrottleDefaultLimit(data.throttle_default_limit);
@@ -39,6 +41,7 @@ export default function SettingsPage() {
       await systemConfigApi.update({
         seat_hold_duration_minutes: seatHoldMinutes,
         hold_cutoff_hours_before_departure: holdCutoffHours,
+        boarding_window_hours_before_departure: boardingWindowHours,
         throttle_auth_limit: throttleAuthLimit,
         throttle_strict_limit: throttleStrictLimit,
         throttle_default_limit: throttleDefaultLimit,
@@ -184,6 +187,23 @@ export default function SettingsPage() {
                   Seat holds are rejected when this many hours or fewer remain before departure. Default: 2 hours.
                 </p>
               </div>
+              <div className="max-w-sm space-y-2">
+                <label className="label" htmlFor="boarding-window">
+                  Boarding Window Before Departure (hours)
+                </label>
+                <input
+                  id="boarding-window"
+                  type="number"
+                  min="1"
+                  max="24"
+                  className="input"
+                  value={boardingWindowHours}
+                  onChange={(e) => setBoardingWindowHours(e.target.value)}
+                />
+                <p className="text-xs text-muted-foreground">
+                  Boarding opens this many hours before departure and closes exactly at departure time. Default: 4 hours.
+                </p>
+              </div>
             </>
           )}
           <div className="flex items-center gap-3">
diff --git a/apps/edr-passenger-web/backoffice/src/app/tariff-rates/page.tsx b/apps/edr-passenger-web/backoffice/src/app/tariff-rates/page.tsx
index 30d736e37..590c30848 100644
--- a/apps/edr-passenger-web/backoffice/src/app/tariff-rates/page.tsx
+++ b/apps/edr-passenger-web/backoffice/src/app/tariff-rates/page.tsx
@@ -406,6 +406,7 @@ export default function TariffRatesPage() {
                 name="insuranceFeeMinor"
                 className="input"
                 defaultValue={editingClass ? (editingClass.insuranceFeeMinor / 100).toFixed(2) : '0.00'}
+                key={editingClass?.id ?? 'new-insurance'}
                 min="0"
                 step="0.01"
                 placeholder="e.g. 25.00"
diff --git a/apps/edr-passenger-web/backoffice/src/components/layout/Sidebar.tsx b/apps/edr-passenger-web/backoffice/src/components/layout/Sidebar.tsx
index 39fd91ca5..982094cf3 100644
--- a/apps/edr-passenger-web/backoffice/src/components/layout/Sidebar.tsx
+++ b/apps/edr-passenger-web/backoffice/src/components/layout/Sidebar.tsx
@@ -90,21 +90,21 @@ const navigationSections: { title: string; items: NavItem[] }[] = [
   {
     title: 'Financial',
     items: [
-      { name: 'Pricing & Fares',       href: '/pricing',         icon: DollarSign, permission: PERMS.admin },
+      // { name: 'Pricing & Fares',       href: '/pricing',         icon: DollarSign, permission: PERMS.admin },
       { name: 'Tariff Rates',           href: '/tariff-rates',    icon: Banknote,   permission: PERMS.admin },
-      { name: 'Fare Rules',             href: '/fare-management', icon: Settings,   permission: PERMS.admin },
+      // { name: 'Fare Rules',             href: '/fare-management', icon: Settings,   permission: PERMS.admin },
       { name: 'Payments',             href: '/payments',        icon: CreditCard, permission: PERMS.payments.view },
       { name: 'Currencies',           href: '/currencies',      icon: Banknote,   permission: PERMS.currencies.manage },      
-      { name: 'Promo Codes',          href: '/promos',          icon: Gift,       permission: PERMS.admin },
+      // { name: 'Promo Codes',          href: '/promos',          icon: Gift,       permission: PERMS.admin },
       { name: 'Payment Methods',      href: '/payment-methods',  icon: CreditCard, permission: PERMS.payments.view },
-      { name: 'Wallet Accounts',        href: '/wallet-accounts',  icon: Wallet,     permission: PERMS.payments.view },
+      // { name: 'Wallet Accounts',        href: '/wallet-accounts',  icon: Wallet,     permission: PERMS.payments.view },
     ]
   },
   {
     title: 'Customer Services',
     items: [
-      { name: 'Loyalty Program', href: '/loyalty',       icon: Gift,          permission: PERMS.passengers.view },
-      { name: 'Support Center',  href: '/support',       icon: MessageSquare, permission: PERMS.bookings.view },
+      // { name: 'Loyalty Program', href: '/loyalty',       icon: Gift,          permission: PERMS.passengers.view },
+      // { name: 'Support Center',  href: '/support',       icon: MessageSquare, permission: PERMS.bookings.view },
       { name: 'Notifications',   href: '/notifications', icon: Bell,          permission: PERMS.notifications.send },
     ]
   },
@@ -126,7 +126,7 @@ const navigationSections: { title: string; items: NavItem[] }[] = [
   {
     title: 'System',
     items: [
-      { name: 'Agents', href: '/agents',         icon: Briefcase, permission: PERMS.agents.view },
+      // { name: 'Agents', href: '/agents',         icon: Briefcase, permission: PERMS.agents.view },
       { name: 'Users',  href: '/settings/users', icon: Users,     permission: PERMS.admin },
       { name: 'Settings',         href: '/settings',       icon: Settings,  permission: PERMS.admin },
       { name: 'Health',           href: '/health',         icon: Activity,  permission: PERMS.admin },
diff --git a/apps/edr-passenger-web/portal/src/app/booking/confirmation/page.tsx b/apps/edr-passenger-web/portal/src/app/booking/confirmation/page.tsx
index 719e80f18..48e29968f 100644
--- a/apps/edr-passenger-web/portal/src/app/booking/confirmation/page.tsx
+++ b/apps/edr-passenger-web/portal/src/app/booking/confirmation/page.tsx
@@ -7,7 +7,7 @@ import { useBookingStore } from '@/lib/booking-store';
 import { usePaymentStore } from '@/lib/payment-store';
 import { useQuery } from '@tanstack/react-query';
 import { apiClient } from '@/lib/api-client';
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState } from 'react';
 import { CheckCircle, Clock, Copy, Train, FileText } from 'lucide-react';
 import { format } from 'date-fns';
 import { isChild, isFirstChild } from '@/utils/fare-utils';
@@ -19,10 +19,21 @@ type BookingWithTicket = {
   totalMinor?: number;
   createdAt?: string;
   paymentMethod?: string;
-  ticket?: {
+  // The actual settled amount/currency for this booking's payment — authoritative over any
+  // client-side session state, since it reflects what was really charged server-side.
+  payment?: {
+    method?: string;
+    status?: string;
+    amountMinor?: number;
+    currency?: string;
+  };
+  // One ticket per passenger — match by passengerName, not array position (see
+  // bookings.service.ts's getByRef).
+  tickets?: Array<{
+    passengerName?: string;
     barcodePayload?: string;
     qrPayload?: string;
-  };
+  }>;
 };
 
 export default function ConfirmationPage() {
@@ -34,7 +45,14 @@ export default function ConfirmationPage() {
   const isRoundTrip = searchCriteria?.tripType === 'ROUND_TRIP';
   const [copied, setCopied] = useState(false);
   const [isGeneratingVoucher, setIsGeneratingVoucher] = useState(false);
-  const confirmAttempted = useRef(false);
+
+  // Warms the code-split voucher module ahead of the click so the handler's own
+  // `await import(...)` resolves near-instantly — on iOS Safari, a file save triggered
+  // too long after the originating click's synchronous execution window is silently
+  // blocked, and awaiting a cold dynamic import is enough to fall outside that window.
+  useEffect(() => {
+    import('@/lib/generate-voucher');
+  }, []);
 
   const { data: _booking } = useQuery<BookingWithTicket>({
     queryKey: ['booking', bookingId],
@@ -55,22 +73,11 @@ export default function ConfirmationPage() {
 
   // Only trust an actually-confirmed booking to show ticket numbers / a "CONFIRMED" badge —
   // a gateway redirect back here does not mean payment succeeded (see payment return pages).
+  // Ticket generation itself is never triggered from this page — the payment webhook
+  // generates it server-side (for every payment method, wallet included); this page only
+  // ever fetches and displays whatever the booking query above already returns.
   const isConfirmed = _booking?.status === 'CONFIRMED';
 
-  useEffect(() => {
-    if (bookingId && !confirmAttempted.current) {
-      confirmAttempted.current = true;
-
-      // Only generate ticket if booking is already CONFIRMED (e.g. wallet payment)
-      // For other payment methods, ticket is generated by the payment webhook after payment completes
-      apiClient.get(`/bookings/${bookingId}`).then((data: any) => {
-        if (data?.status === 'CONFIRMED') {
-          apiClient.post(`/tickets/generate/${bookingId}`).catch(() => {});
-        }
-      }).catch(() => {});
-    }
-  }, [bookingId]);
-
   const copyPNR = () => {
     if (pnr) {
       navigator.clipboard.writeText(pnr);
@@ -94,15 +101,17 @@ export default function ConfirmationPage() {
       const { generatePassengerVoucherPDF } = await import('@/lib/generate-voucher');
 
       const activeSchedule = isRoundTrip ? outboundSchedule : selectedSchedule;
-      // Prefer the amount/currency actually confirmed for the selected payment option;
-      // only fall back to the ETB booking fare when no payment step ran (e.g. $0 total).
-      const voucherCurrency = 'ETB';
+      // The server-confirmed settled amount/currency (what was actually charged) is
+      // authoritative — prefer it over the ETB booking fare once it's available.
+      const settledAmountMinor = _booking?.payment?.amountMinor;
+      const settledCurrency = _booking?.payment?.currency;
+      const voucherCurrency = settledCurrency || 'ETB';
       const createdAt = _booking?.createdAt || new Date().toISOString();
       const status = _booking?.status || 'CONFIRMED';
 
-      // Compute per-passenger fares using the same logic as the review/payment pages.
-      // reviewedPassengerFares is the authoritative source; rebuild from package context
-      // as a fallback so free children always show ETB 0.00 on their voucher.
+      // Compute per-passenger fares (in ETB) using the same logic as the review/payment
+      // pages. reviewedPassengerFares is the authoritative source; rebuild from package
+      // context as a fallback so free children always show 0 on their voucher.
       const { packageTierPriceMinor } = useBookingStore.getState();
       const isPackageBooking = packageTierPriceMinor != null;
       const adultCount = searchCriteria?.adultCount ?? passengers.filter(p => !isChild(p)).length;
@@ -110,7 +119,7 @@ export default function ConfirmationPage() {
       const pkgAdultFare = isPackageBooking ? packageTierPriceMinor! * pkgMultiplier : 0;
       const pkgChildFare = pkgAdultFare;
 
-      const getVoucherFare = (idx: number): number => {
+      const getEtbFare = (idx: number): number => {
         if (reviewedPassengerFares?.[idx] != null) return reviewedPassengerFares[idx].fareMinor;
         if (isPackageBooking) {
           const isPkgChild = idx >= adultCount;
@@ -122,6 +131,17 @@ export default function ConfirmationPage() {
         return Math.round(totalFare / passengers.length);
       };
 
+      // Real conversion happened (payment settled in something other than ETB) — scale each
+      // passenger's ETB fare proportionally into the settled currency, rather than showing
+      // ETB-denominated numbers next to a foreign currency label.
+      const etbFares = passengers.map((_, idx) => getEtbFare(idx));
+      const etbTotal = etbFares.reduce((sum, f) => sum + f, 0);
+      const needsConversion = settledAmountMinor != null && settledCurrency && settledCurrency !== 'ETB' && etbTotal > 0;
+      const getVoucherFare = (idx: number): number => {
+        if (!needsConversion) return etbFares[idx];
+        return Math.round(etbFares[idx] * (settledAmountMinor! / etbTotal));
+      };
+
       const outbound = {
         trainNumber: activeSchedule?.trainNumber || 'N/A',
         trainName:   'EDR Express',
@@ -142,9 +162,16 @@ export default function ConfirmationPage() {
         seatClass:   inboundSchedule.selectedSeatClassName,
       } : undefined;
 
+      // Separate file per passenger, saved back-to-back with no macrotask (setTimeout)
+      // between them — a setTimeout delay would push later saves outside the click's
+      // synchronous user-activation window and risk iOS Safari silently blocking them.
       for (let i = 0; i < passengers.length; i++) {
         const p = passengers[i];
-        const ticketNumber = `TKT-${bookingId?.slice(0, 8).toUpperCase()}-${(i + 1).toString().padStart(2, '0')}`;
+        // Same match-by-name-then-position as the on-screen ticket list above — no
+        // fabricated placeholder if there's no backend ticket data (see generate-voucher.ts).
+        const matchedTicket =
+          _booking?.tickets?.find((t) => t.passengerName === p.name) ?? _booking?.tickets?.[i] ?? null;
+        const ticketNumber = matchedTicket?.barcodePayload || 'Not yet issued';
 
         await generatePassengerVoucherPDF({
           bookingRef:          pnr,
@@ -163,9 +190,6 @@ export default function ConfirmationPage() {
           currency:            voucherCurrency,
           createdAt,
         });
-
-        // brief pause between downloads so browsers don't block them
-        if (i < passengers.length - 1) await new Promise(r => setTimeout(r, 400));
       }
     } catch (error) {
       alert(`Failed to generate voucher: ${error instanceof Error ? error.message : 'Unknown error'}`);
@@ -375,6 +399,11 @@ export default function ConfirmationPage() {
                 <p className="text-sm text-gray-600 dark:text-gray-400">Total paid</p>
                 <p className="font-semibold text-gray-900 dark:text-gray-100">
                   {(() => {
+                    // The server-confirmed settled amount is authoritative — prefer it over
+                    // any client-side session state, which can go stale (e.g. after a refresh).
+                    if (_booking?.payment?.amountMinor != null) {
+                      return `${_booking.payment.currency || 'ETB'} ${(_booking.payment.amountMinor / 100).toFixed(2)}`;
+                    }
                     if (reviewedTotalMinor != null) return `ETB ${(reviewedTotalMinor / 100).toFixed(2)}`;
                     if (paidAmountMinor != null) return `${paidCurrency} ${(paidAmountMinor / 100).toFixed(2)}`;
                     if (_booking?.totalMinor != null) return `ETB ${(_booking.totalMinor / 100).toFixed(2)}`;
@@ -390,10 +419,15 @@ export default function ConfirmationPage() {
             <h2 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Your tickets</h2>
             <div className="space-y-4">
               {passengers.map((passenger, index) => {
-                const backendTicket = _booking?.ticket || null;
-                const ticketNumber = isConfirmed
-                  ? backendTicket?.barcodePayload || `TKT-${bookingId?.slice(0, 8).toUpperCase()}-${(index + 1).toString().padStart(2, '0')}`
-                  : null;
+                // Match by name first (tickets aren't necessarily created/ordered the same
+                // way as this passengers array) — fall back to position if no name match.
+                const backendTicket =
+                  _booking?.tickets?.find((t) => t.passengerName === passenger.name) ??
+                  _booking?.tickets?.[index] ??
+                  null;
+                // No fabricated placeholder — a made-up TKT-... number reads as real and is
+                // misleading if it doesn't match what's actually on file.
+                const ticketNumber = isConfirmed ? backendTicket?.barcodePayload || null : null;
 
                 return (
                   <div key={index} className="card hover:shadow-lg transition-shadow">
@@ -414,7 +448,9 @@ export default function ConfirmationPage() {
                       <div className="grid grid-cols-2 gap-4 text-sm">
                         <div>
                           <p className="text-gray-600 dark:text-gray-400">Ticket Number</p>
-                          <p className="font-semibold text-gray-900 dark:text-gray-100">{ticketNumber || 'Pending payment'}</p>
+                          <p className="font-semibold text-gray-900 dark:text-gray-100">
+                            {ticketNumber || (isConfirmed ? 'Not yet issued' : 'Pending payment')}
+                          </p>
                         </div>
                         <div>
                           <p className="text-gray-600 dark:text-gray-400">Date of Birth</p>
diff --git a/apps/edr-passenger-web/portal/src/app/booking/detail/page.tsx b/apps/edr-passenger-web/portal/src/app/booking/detail/page.tsx
index a3e7f06fc..8af27b035 100644
--- a/apps/edr-passenger-web/portal/src/app/booking/detail/page.tsx
+++ b/apps/edr-passenger-web/portal/src/app/booking/detail/page.tsx
@@ -4,14 +4,13 @@ import { Suspense } from 'react';
 import { useSearchParams, useRouter } from 'next/navigation';
 import { useQuery, useMutation } from '@tanstack/react-query';
 import { apiClient } from '@/lib/api-client';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import {
   Clock,
   Users,
   CheckCircle2,
   AlertCircle,
   Download,
-  Share2,
   Copy,
   Check,
   CreditCard,
@@ -49,6 +48,14 @@ function BookingDetailContent() {
   const [copiedPNR, setCopiedPNR] = useState(false);
   const [isGeneratingVoucher, setIsGeneratingVoucher] = useState(false);
 
+  // Warms the code-split voucher module ahead of the click so the handler's own
+  // `await import(...)` resolves near-instantly — on iOS Safari, a file save triggered
+  // too long after the originating click's synchronous execution window is silently
+  // blocked, and awaiting a cold dynamic import is enough to fall outside that window.
+  useEffect(() => {
+    import('@/lib/generate-voucher');
+  }, []);
+
   const { data: booking, isLoading, error, refetch } = useQuery({
     queryKey: ['booking-detail', bookingRef],
     queryFn: async () => {
@@ -626,10 +633,24 @@ function BookingDetailContent() {
                 </button>
               </div>
 
+              {isConfirmed && (
+                <div className="mt-4 text-sm text-gray-600 dark:text-gray-400">
+                  Total paid:{' '}
+                  <span className="font-semibold text-gray-900 dark:text-gray-100">
+                    {booking?.payment?.amountMinor != null
+                      ? `${booking.payment.currency || 'ETB'} ${(booking.payment.amountMinor / 100).toFixed(2)}`
+                      : `ETB ${((booking?.totalMinor ?? 0) / 100).toFixed(2)}`}
+                  </span>
+                  {booking?.payment?.method && (
+                    <span className="text-gray-500 dark:text-gray-400"> via {booking.payment.method}</span>
+                  )}
+                </div>
+              )}
+
               <div className="flex flex-wrap gap-3 justify-center mt-6">
                 {isConfirmed && (
                   <>
-                    <button 
+                    <button
                       onClick={handleDownloadVoucher}
                       disabled={isGeneratingVoucher}
                       className="btn-primary flex items-center gap-2"
@@ -646,14 +667,6 @@ function BookingDetailContent() {
                         </>
                       )}
                     </button>
-                    <button className="btn-secondary flex items-center gap-2">
-                      <Download className="w-4 h-4" />
-                      Download Tickets
-                    </button>
-                    <button className="btn-secondary flex items-center gap-2">
-                      <Share2 className="w-4 h-4" />
-                      Share
-                    </button>
                   </>
                 )}
               </div>
diff --git a/apps/edr-passenger-web/portal/src/app/booking/lookup/page.tsx b/apps/edr-passenger-web/portal/src/app/booking/lookup/page.tsx
index e65882fd2..da369fb54 100644
--- a/apps/edr-passenger-web/portal/src/app/booking/lookup/page.tsx
+++ b/apps/edr-passenger-web/portal/src/app/booking/lookup/page.tsx
@@ -1,28 +1,99 @@
 "use client";
 
-import { Search } from "lucide-react";
+import { Search, Phone, Ticket, ChevronRight, Loader2 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
+import { apiClient } from "@/lib/api-client";
+import { format } from "date-fns";
+
+type SearchMode = "pnr" | "phone";
+
+interface BookingListItem {
+  id: string;
+  bookingRef: string;
+  status: string;
+  totalMinor: number;
+  currency: string;
+  adultCount: number;
+  childCount: number;
+  bookingType: string;
+  createdAt: string;
+  schedule: {
+    originStation: { name: string; city?: string };
+    destinationStation: { name: string; city?: string };
+    departureAt: string;
+  };
+  payment?: { method: string; status: string };
+  seatCount: number;
+}
+
+const STATUS_LABELS: Record<string, { label: string; className: string }> = {
+  CONFIRMED:       { label: "Confirmed",       className: "bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300" },
+  PENDING_PAYMENT: { label: "Pending Payment", className: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300" },
+  CANCELLED:       { label: "Cancelled",       className: "bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300" },
+  BOARDED:         { label: "Boarded",         className: "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300" },
+  NO_SHOW:         { label: "No Show",         className: "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300" },
+  REFUNDED:        { label: "Refunded",        className: "bg-purple-100 text-purple-800 dark:bg-purple-900/40 dark:text-purple-300" },
+};
 
 export default function BookingLookupPage() {
   const router = useRouter();
+  const [mode, setMode] = useState<SearchMode>("pnr");
+
+  // PNR mode state
   const [bookingRef, setBookingRef] = useState("");
+
+  // Phone mode state
+  const [phone, setPhone] = useState("");
+  const [phoneResults, setPhoneResults] = useState<BookingListItem[] | null>(null);
+  const [phoneLoading, setPhoneLoading] = useState(false);
+
   const [error, setError] = useState("");
 
-  const handleSubmit = (e: React.FormEvent) => {
+  // ── PNR submit ───────────────────────────────────────────────────────────
+  const handlePnrSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     const trimmed = bookingRef.trim().toUpperCase();
-    if (!trimmed) {
-      setError("Please enter a booking reference");
-      return;
-    }
+    if (!trimmed) { setError("Please enter a booking reference"); return; }
     router.push(`/booking/detail?ref=${trimmed}`);
   };
 
+  // ── Phone submit ─────────────────────────────────────────────────────────
+  const handlePhoneSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const trimmed = phone.trim();
+    if (!trimmed) { setError("Please enter your phone number"); return; }
+    const digits = trimmed.replace(/[^\d]/g, "");
+    if (digits.length < 7) { setError("Please enter a valid phone number"); return; }
+
+    setError("");
+    setPhoneLoading(true);
+    setPhoneResults(null);
+    try {
+      const resp: any = await apiClient.get(`/bookings/by-phone?phone=${encodeURIComponent(trimmed)}`);
+      const items: BookingListItem[] = (resp as any)?.data?.items ?? (resp as any)?.items ?? [];
+      setPhoneResults(items);
+      if (items.length === 0) setError("No bookings found for this phone number");
+    } catch {
+      setError("Could not look up bookings. Please check your number and try again.");
+    } finally {
+      setPhoneLoading(false);
+    }
+  };
+
+  const switchMode = (next: SearchMode) => {
+    setMode(next);
+    setError("");
+    setPhoneResults(null);
+    setBookingRef("");
+    setPhone("");
+  };
+
   return (
     <div className="min-h-[calc(100vh-4rem)] flex items-center justify-center p-4 bg-gray-50 dark:bg-gray-900">
       <div className="w-full max-w-md">
         <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8">
+          {/* Header */}
           <div className="text-center mb-6">
             <div className="inline-flex items-center justify-center w-16 h-16 bg-[rgb(20,113,76)] bg-opacity-10 rounded-full mb-4">
               <Search className="w-8 h-8 text-[rgb(20,113,76)]" />
@@ -30,39 +101,145 @@ export default function BookingLookupPage() {
             <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
               Find Your Booking
             </h1>
-            <p className="text-gray-600 dark:text-gray-400">
-              Enter your booking reference (PNR) to view details
+            <p className="text-gray-600 dark:text-gray-400 text-sm">
+              Search by booking reference or phone number
             </p>
           </div>
 
-          <form onSubmit={handleSubmit}>
-            <div className="mb-6">
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                Booking Reference (PNR)
-              </label>
-              <input
-                type="text"
-                value={bookingRef}
-                onChange={(e) => {
-                  setBookingRef(e.target.value.toUpperCase());
-                  setError("");
-                }}
-                placeholder="Enter your PNR"
-                className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-[rgb(20,113,76)] focus:border-transparent dark:bg-gray-700 dark:text-white text-lg font-mono"
-              />
-              {error && (
-                <p className="mt-2 text-sm text-red-600 dark:text-red-400">{error}</p>
-              )}
-            </div>
-
+          {/* Mode tabs */}
+          <div className="flex rounded-lg border border-gray-200 dark:border-gray-700 mb-6 overflow-hidden">
             <button
-              type="submit"
-              className="w-full bg-[rgb(20,113,76)] hover:bg-[rgb(16,89,60)] text-white font-medium py-3 px-4 rounded-lg transition-colors flex items-center justify-center gap-2"
+              onClick={() => switchMode("pnr")}
+              className={`flex-1 flex items-center justify-center gap-2 py-2.5 text-sm font-medium transition-colors ${
+                mode === "pnr"
+                  ? "bg-[rgb(20,113,76)] text-white"
+                  : "text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700"
+              }`}
             >
-              <Search className="w-5 h-5" />
-              Search Booking
+              <Ticket className="w-4 h-4" />
+              Booking Ref (PNR)
             </button>
-          </form>
+            <button
+              onClick={() => switchMode("phone")}
+              className={`flex-1 flex items-center justify-center gap-2 py-2.5 text-sm font-medium transition-colors ${
+                mode === "phone"
+                  ? "bg-[rgb(20,113,76)] text-white"
+                  : "text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700"
+              }`}
+            >
+              <Phone className="w-4 h-4" />
+              Phone Number
+            </button>
+          </div>
+
+          {/* ── PNR form ── */}
+          {mode === "pnr" && (
+            <form onSubmit={handlePnrSubmit}>
+              <div className="mb-6">
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  Booking Reference (PNR)
+                </label>
+                <input
+                  type="text"
+                  value={bookingRef}
+                  onChange={(e) => { setBookingRef(e.target.value.toUpperCase()); setError(""); }}
+                  placeholder="e.g. ABCXYZ"
+                  className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-[rgb(20,113,76)] focus:border-transparent dark:bg-gray-700 dark:text-white text-lg font-mono uppercase tracking-widest"
+                />
+                {error && <p className="mt-2 text-sm text-red-600 dark:text-red-400">{error}</p>}
+              </div>
+              <button
+                type="submit"
+                className="w-full bg-[rgb(20,113,76)] hover:bg-[rgb(16,89,60)] text-white font-medium py-3 px-4 rounded-lg transition-colors flex items-center justify-center gap-2"
+              >
+                <Search className="w-5 h-5" />
+                Search Booking
+              </button>
+            </form>
+          )}
+
+          {/* ── Phone form ── */}
+          {mode === "phone" && (
+            <>
+              <form onSubmit={handlePhoneSubmit}>
+                <div className="mb-6">
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    Phone Number
+                  </label>
+                  <input
+                    type="tel"
+                    value={phone}
+                    onChange={(e) => { setPhone(e.target.value); setError(""); setPhoneResults(null); }}
+                    placeholder="Enter phone number"
+                    className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-[rgb(20,113,76)] focus:border-transparent dark:bg-gray-700 dark:text-white text-lg"
+                  />
+                  <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                    Enter the phone number you used when booking
+                  </p>
+                  {error && <p className="mt-2 text-sm text-red-600 dark:text-red-400">{error}</p>}
+                </div>
+                <button
+                  type="submit"
+                  disabled={phoneLoading}
+                  className="w-full bg-[rgb(20,113,76)] hover:bg-[rgb(16,89,60)] disabled:opacity-60 text-white font-medium py-3 px-4 rounded-lg transition-colors flex items-center justify-center gap-2"
+                >
+                  {phoneLoading ? (
+                    <><Loader2 className="w-5 h-5 animate-spin" /> Searching…</>
+                  ) : (
+                    <><Search className="w-5 h-5" /> Find Bookings</>
+                  )}
+                </button>
+              </form>
+
+              {/* Results list */}
+              {phoneResults !== null && phoneResults.length > 0 && (
+                <div className="mt-6 space-y-3">
+                  <p className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                    {phoneResults.length} booking{phoneResults.length !== 1 ? "s" : ""} found — select one to view details:
+                  </p>
+                  {phoneResults.map((b) => {
+                    const statusInfo = STATUS_LABELS[b.status] ?? { label: b.status, className: "bg-gray-100 text-gray-700" };
+                    const amountEtb = (b.totalMinor / 100).toLocaleString("en-ET", { minimumFractionDigits: 2 });
+                    return (
+                      <button
+                        key={b.id}
+                        onClick={() => router.push(`/booking/detail?ref=${b.bookingRef}`)}
+                        className="w-full text-left border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:border-[rgb(20,113,76)] hover:bg-green-50 dark:hover:bg-green-900/10 transition-colors group"
+                      >
+                        <div className="flex items-start justify-between gap-2">
+                          <div className="min-w-0">
+                            <div className="flex items-center gap-2 mb-1">
+                              <span className="font-mono font-bold text-gray-900 dark:text-white tracking-wider">
+                                {b.bookingRef}
+                              </span>
+                              <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${statusInfo.className}`}>
+                                {statusInfo.label}
+                              </span>
+                            </div>
+                            <p className="text-sm text-gray-700 dark:text-gray-300 truncate">
+                              {b.schedule.originStation.name} → {b.schedule.destinationStation.name}
+                            </p>
+                            <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+                              {format(new Date(b.schedule.departureAt), "dd MMM yyyy, HH:mm")}
+                              {" · "}
+                              {b.adultCount} adult{b.adultCount !== 1 ? "s" : ""}
+                              {b.childCount > 0 && `, ${b.childCount} child${b.childCount !== 1 ? "ren" : ""}`}
+                            </p>
+                          </div>
+                          <div className="flex flex-col items-end gap-1 flex-shrink-0">
+                            <span className="text-sm font-semibold text-gray-900 dark:text-white whitespace-nowrap">
+                              {amountEtb} ETB
+                            </span>
+                            <ChevronRight className="w-4 h-4 text-gray-400 group-hover:text-[rgb(20,113,76)] transition-colors" />
+                          </div>
+                        </div>
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
+            </>
+          )}
         </div>
       </div>
     </div>
diff --git a/apps/edr-passenger-web/portal/src/app/booking/passengers/page.tsx b/apps/edr-passenger-web/portal/src/app/booking/passengers/page.tsx
index 34cf1fe5d..4639bd196 100644
--- a/apps/edr-passenger-web/portal/src/app/booking/passengers/page.tsx
+++ b/apps/edr-passenger-web/portal/src/app/booking/passengers/page.tsx
@@ -465,8 +465,10 @@ function validatePhone(phone: string, nationality: string): string | null {
   if (!normalized) return 'Phone number is required';
   const nat = getPhoneNat(nationality);
   if (nat === 'ETHIOPIAN') {
-    if (/^(\+251\d{9}|09\d{8})$/.test(normalized)) return null;
-    return 'Invalid Ethiopian phone number (e.g., +251912345678 or 0912345678)';
+    // Only Ethio Telecom (0/+2519...) and Safaricom Ethiopia (0/+2517...) mobile ranges —
+    // other prefixes (e.g. landlines, unallocated blocks) are rejected.
+    if (/^(\+251[79]\d{8}|0[79]\d{8})$/.test(normalized)) return null;
+    return 'Enter a valid Ethio Telecom or Safaricom Ethiopia number (e.g., +251912345678 or 0712345678)';
   }
   if (nat === 'DJIBOUTIAN') {
     if (/^\+253\d{8}$/.test(normalized)) return null;
@@ -679,7 +681,7 @@ type FormData = z.infer<ReturnType<typeof createFormSchema>>;
 
 function PassengersForm() {
   const router = useRouter();
-  const { searchCriteria, passengers: storedPassengers, setPassengers, setCreateAccount } = useBookingStore();
+  const { searchCriteria, passengers: storedPassengers, setPassengers, setCreateAccount, packageId } = useBookingStore();
   const { user, isAuthenticated, updateUser } = useAuthStore();
   const isInitialized = useAuthStore((s) => s.isInitialized);
   const [faydaEnabled, setFaydaEnabled] = useState(true);
@@ -1474,6 +1476,15 @@ function PassengersForm() {
 
             <div className="flex gap-4">
               <button type="button" onClick={() => {
+                // Package bookings skip results/seats entirely — they land here directly
+                // from /packages/[id] via a plain router.push. Hardcoding a return to
+                // /booking/results would be wrong for that flow (it was never visited), so
+                // use real browser back navigation instead, which lands exactly back on the
+                // package page with its original URL/state intact.
+                if (packageId) {
+                  router.back();
+                  return;
+                }
                 const params = new URLSearchParams({
                   origin: searchCriteria.originStationId,
                   destination: searchCriteria.destinationStationId,
diff --git a/apps/edr-passenger-web/portal/src/app/booking/results/loading.tsx b/apps/edr-passenger-web/portal/src/app/booking/results/loading.tsx
new file mode 100644
index 000000000..72a278a1a
--- /dev/null
+++ b/apps/edr-passenger-web/portal/src/app/booking/results/loading.tsx
@@ -0,0 +1,103 @@
+// Next.js renders this automatically the instant navigation to /booking/results
+// begins — before the route's JS has even finished downloading/compiling and
+// well before the page component mounts or its data fetch starts. That closes
+// the "I clicked Search and nothing happened" gap: previously there was no
+// visual feedback at all until the route fully loaded and hit its own isLoading
+// state. Mirrors that same isLoading skeleton so the transition is seamless.
+export default function ResultsLoading() {
+  return (
+    <div className="booking-page">
+      <div className="container mx-auto px-4">
+        <div className="max-w-6xl mx-auto">
+          <div className="mb-8">
+            <div className="card p-6">
+              <div className="flex items-center gap-4">
+                <div className="relative">
+                  <div className="w-12 h-12 rounded-full border-4 border-primary/20 border-t-primary animate-spin" />
+                </div>
+                <div className="flex-1">
+                  <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-1">
+                    Searching for trains...
+                  </h2>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
+                    Finding the best options for your journey
+                  </p>
+                </div>
+              </div>
+              <div className="mt-4 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                <div
+                  className="h-full bg-primary rounded-full"
+                  style={{
+                    animation: "progressBar 2s ease-in-out infinite",
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            {[1, 2, 3].map((i) => (
+              <div key={i} className="card animate-pulse">
+                <div className="flex flex-col lg:flex-row lg:items-center gap-6">
+                  <div className="flex-1">
+                    <div className="flex items-center gap-3 mb-4">
+                      <div
+                        className="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-lg"
+                        style={{ animation: "shimmer 1.5s ease-in-out infinite" }}
+                      />
+                      <div className="flex-1 space-y-2">
+                        <div
+                          className="h-5 bg-gray-200 dark:bg-gray-700 rounded w-24"
+                          style={{ animation: "shimmer 1.5s ease-in-out infinite" }}
+                        />
+                        <div
+                          className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-32"
+                          style={{ animation: "shimmer 1.5s ease-in-out infinite" }}
+                        />
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-4">
+                      <div className="text-center space-y-2">
+                        <div
+                          className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-16"
+                          style={{ animation: "shimmer 1.5s ease-in-out infinite" }}
+                        />
+                        <div
+                          className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-12"
+                          style={{ animation: "shimmer 1.5s ease-in-out infinite" }}
+                        />
+                      </div>
+                      <div className="flex-1 h-0.5 bg-gray-200 dark:bg-gray-700" />
+                      <div className="text-center space-y-2">
+                        <div
+                          className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-16"
+                          style={{ animation: "shimmer 1.5s ease-in-out infinite" }}
+                        />
+                        <div
+                          className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-12"
+                          style={{ animation: "shimmer 1.5s ease-in-out infinite" }}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div className="lg:border-l dark:border-gray-700 lg:pl-6 lg:min-w-[220px]">
+                    <div className="text-center lg:text-right space-y-2">
+                      <div
+                        className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-20 mx-auto lg:ml-auto lg:mr-0"
+                        style={{ animation: "shimmer 1.5s ease-in-out infinite" }}
+                      />
+                      <div
+                        className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-24 mx-auto lg:ml-auto lg:mr-0"
+                        style={{ animation: "shimmer 1.5s ease-in-out infinite" }}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/edr-passenger-web/portal/src/app/booking/review/page.tsx b/apps/edr-passenger-web/portal/src/app/booking/review/page.tsx
index 84a1d995f..265417d58 100644
--- a/apps/edr-passenger-web/portal/src/app/booking/review/page.tsx
+++ b/apps/edr-passenger-web/portal/src/app/booking/review/page.tsx
@@ -313,15 +313,15 @@ export default function ReviewPage() {
         }
 
         // Build booking request for authenticated users
-        // For package bookings, free children (first child per adult, no seat assigned)
-        // are excluded from the passengers array — the backend derives them from adultCount/childCount.
-        const bookingPassengers = passengers.filter((p, i) => {
-          if (packageId) {
-            const isFreePkgChild = i >= adultPassengerCount && (i - adultPassengerCount) < adultPassengerCount;
-            return !isFreePkgChild;
-          }
-          return !(isChild(p) && isFirstChild(passengers, i));
-        });
+        // Free children (first child per adult) never go through seat selection and have no
+        // seatId — true for package bookings AND regular ones (see booking/seats/page.tsx's
+        // seatEligibility: "First adultCount children are free (no seat)... same rule applies"
+        // for regular bookings too). Submitting one anyway sends seatId: undefined, which the
+        // backend's `seat: { connect: { id } }` rejects — hence excluding them here for both
+        // cases. (Their absence from adultCount/childCount on the confirmed booking is a
+        // separate, backend-side gap — not something the frontend can paper over by sending
+        // an unseated passenger.)
+        const bookingPassengers = passengers.filter((p, i) => !(isChild(p) && isFirstChild(passengers, i)));
 
         bookingData = {
           passengerId: passengerId,
@@ -371,15 +371,12 @@ export default function ReviewPage() {
         if (priceTierId) bookingData.priceTierId = priceTierId;
       } else {
         // For guests: send full passenger details array
-        // For package bookings, free children (first child per adult, no seat assigned)
-        // are excluded from the passengers array — the backend derives them from adultCount/childCount.
-        const guestBookingPassengers = passengers.filter((p, i) => {
-          if (packageId) {
-            const isFreePkgChild = i >= adultPassengerCount && (i - adultPassengerCount) < adultPassengerCount;
-            return !isFreePkgChild;
-          }
-          return !(isChild(p) && isFirstChild(passengers, i));
-        });
+        // Free children (first child per adult) never go through seat selection and have no
+        // seatId — true for package bookings AND regular ones (see booking/seats/page.tsx's
+        // seatEligibility comment). Submitting one anyway sends seatId: undefined, which the
+        // backend's `seat: { connect: { id } }` rejects — hence excluding them here for both
+        // cases.
+        const guestBookingPassengers = passengers.filter((p, i) => !(isChild(p) && isFirstChild(passengers, i)));
 
         bookingData = {
           scheduleId: isRoundTrip ? outboundSchedule?.id : selectedSchedule?.id,
diff --git a/apps/edr-passenger-web/portal/src/app/booking/search/page.tsx b/apps/edr-passenger-web/portal/src/app/booking/search/page.tsx
index 59ae5f3f8..30e5393f9 100644
--- a/apps/edr-passenger-web/portal/src/app/booking/search/page.tsx
+++ b/apps/edr-passenger-web/portal/src/app/booking/search/page.tsx
@@ -552,6 +552,17 @@ export default function SearchPage() {
     "origin" | "destination" | null
   >(null);
   const [hasInteracted, setHasInteracted] = useState(false);
+  // Immediate feedback the moment Search is clicked — router.push() itself
+  // doesn't paint anything until the target route's JS has loaded, which
+  // otherwise reads as a dead click.
+  const [isSearching, setIsSearching] = useState(false);
+
+  // Warms the results route's JS chunk ahead of time so clicking Search
+  // doesn't have to wait for it to download/compile on top of the actual
+  // search request.
+  useEffect(() => {
+    router.prefetch("/booking/results");
+  }, [router]);
   const [recentStationIds, setRecentStationIds] = useState<string[]>(() => {
     try {
       return JSON.parse(localStorage.getItem("edr_recent_stations") || "[]");
@@ -689,6 +700,7 @@ export default function SearchPage() {
 
   const onSubmit = (data: SearchForm) => {
     setHasInteracted(true);
+    setIsSearching(true);
     // Clear previous booking selections and search cache before starting a new search
     clearBooking();
     setSearchCriteria(data);
@@ -715,6 +727,7 @@ export default function SearchPage() {
   // origin/destination/date errors, which is noisier than fixing things one step at a time.
   const onInvalid = (formErrors: typeof errors) => {
     setHasInteracted(true);
+    setIsSearching(false);
     const hasOtherErrors = Object.keys(formErrors).some((k) => k !== "nationality");
     if (formErrors.nationality && !hasOtherErrors) {
       setPassengerModalOpen(true);
@@ -793,8 +806,12 @@ export default function SearchPage() {
         />
       )}
 
-      {/* ── 90vh hero with banner image ── */}
-      <section className="relative h-[94vh] min-h-[560px]">
+      {/* ── Hero with banner image (desktop only — mobile is content-driven, no
+          forced height, so it doesn't push the Packages section below the fold).
+          Desktop height is intentionally short of a full viewport so the Packages
+          section peeks into view without scrolling — a full 94vh hero was hiding
+          it entirely on common screen sizes. ── */}
+      <section className="relative md:h-[75vh] md:min-h-[500px]">
         {/* Background image with zoom - fully isolated */}
         <div className="absolute inset-0 overflow-hidden">
           <div
@@ -831,18 +848,15 @@ export default function SearchPage() {
             etc.) are portaled to <body> — see ModernDatePicker — so they aren't
             capped by this wrapper's own stacking context. ── */}
         <div
-          className="relative pt-4 pb-4 md:pt-0 md:pb-0 md:absolute md:bottom-8 md:left-0 md:right-0 z-[35] px-4 md:px-6"
+          className="relative pt-4 pb-4 md:pt-0 md:pb-0 md:absolute md:bottom-8 md:left-0 md:right-0 z-[30] px-4 md:px-6"
           ref={widgetRef}
         >
           <div className="max-w-6xl mx-auto">
             {/* Mobile-only heading — desktop keeps the version overlaid on the hero image above */}
             <div className="md:hidden mb-3">
-              <h1 className="text-2xl font-extrabold text-gray-900 dark:text-gray-100 leading-tight">
+              <h1 className="text-lg font-extrabold text-gray-900 dark:text-gray-100 leading-tight">
                 Where are you headed today?
               </h1>
-              <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
-                Book your train journey across East Africa
-              </p>
             </div>
             <form onSubmit={handleSubmit(onSubmit, onInvalid)}>
               <div className="bg-white dark:bg-gray-900 rounded-2xl shadow-none md:shadow-2xl border border-white/20 overflow-visible">
@@ -884,166 +898,174 @@ export default function SearchPage() {
                     </div>
                   </div>
 
-                  {/* Mobile: stacked */}
+                  {/* Mobile: stacked, but From/To and Date/Return Date pair up into two
+                      columns each to save vertical space (station names/dates truncate
+                      rather than wrap) — same fields, same behavior, just denser. */}
                   <div className="flex flex-col gap-3 md:hidden">
-                    <div className="space-y-1.5">
-                      <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
-                        From
-                      </label>
-                      <button
-                        type="button"
-                        onClick={() => {
-                          setHasInteracted(true);
-                          window.scrollTo({
-                            top: 0,
-                            behavior: "instant" as ScrollBehavior,
-                          });
-                          setStationModal("origin");
-                        }}
-                        className="w-full"
-                      >
-                        <div
-                          className={`flex items-center gap-2.5 px-3.5 py-3 border-2 rounded-xl transition-all ${
-                            hasInteracted && errors.originStationId
-                              ? "border-red-400"
-                              : originId
-                                ? "border-primary bg-primary/5"
-                                : "border-gray-200 dark:border-gray-700"
-                          }`}
-                          style={{ backgroundColor: originId ? undefined : undefined }}
-                        >
-                          <MapPin className="w-4 h-4 text-primary flex-shrink-0" />
-                          <span
-                            style={{ color: originStation ? (dark ? '#ffffff' : '#111827') : (dark ? '#6b7280' : '#9ca3af') }}
-                            className={`text-sm ${originStation ? 'font-semibold' : ''}`}
-                          >
-                            {originStation?.name ?? "Select departure"}
-                          </span>
+                    <div className="grid grid-cols-2 gap-3">
+                      <div className="space-y-1.5 min-w-0">
+                        <div className="h-5 flex items-center">
+                          <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
+                            From
+                          </label>
                         </div>
-                      </button>
-                      {hasInteracted && errors.originStationId && (
-                        <p className="text-xs text-red-500">
-                          {errors.originStationId.message}
-                        </p>
-                      )}
-                    </div>
-                    <div className="space-y-1.5">
-                      <div className="flex items-center justify-between">
-                        <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
-                          To
-                        </label>
                         <button
                           type="button"
-                          onClick={handleSwap}
-                          disabled={!originId || !destId}
-                          className="flex items-center gap-1 text-xs text-primary font-medium disabled:opacity-30"
-                        >
-                          <ArrowLeftRight
-                            className={`w-3.5 h-3.5 transition-transform duration-300 ${swapping ? "rotate-180" : ""}`}
-                          />
-                          Swap
-                        </button>
-                      </div>
-                      <button
-                        type="button"
-                        onClick={() => {
-                          setHasInteracted(true);
-                          window.scrollTo({
-                            top: 0,
-                            behavior: "instant" as ScrollBehavior,
-                          });
-                          setStationModal("destination");
-                        }}
-                        className="w-full"
-                      >
-                        <div
-                          className={`flex items-center gap-2.5 px-3.5 py-3 border-2 rounded-xl transition-all ${
-                            hasInteracted && errors.destinationStationId
-                              ? "border-red-400"
-                              : destId
-                                ? "border-primary bg-primary/5"
-                                : "border-gray-200 dark:border-gray-700"
-                          }`}
-                        >
-                          <MapPin className="w-4 h-4 text-primary flex-shrink-0" />
-                          <span
-                            style={{ color: destStation ? (dark ? '#ffffff' : '#111827') : (dark ? '#6b7280' : '#9ca3af') }}
-                            className={`text-sm ${destStation ? 'font-semibold' : ''}`}
-                          >
-                            {destStation?.name ?? "Select destination"}
-                          </span>
-                        </div>
-                      </button>
-                      {hasInteracted && errors.destinationStationId && (
-                        <p className="text-xs text-red-500">
-                          {errors.destinationStationId.message}
-                        </p>
-                      )}
-                    </div>
-                    <div className="space-y-1.5">
-                      <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
-                        Date
-                      </label>
-                      <div>
-                        <ModernDatePicker
-                          value={
-                            departureDate
-                              ? new Date(departureDate + "T00:00:00")
-                              : undefined
-                          }
-                          onChange={(date) => {
-                            setValue(
-                              "departureDate",
-                              `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`,
-                            );
-                            trigger("departureDate");
+                          onClick={() => {
+                            setHasInteracted(true);
+                            window.scrollTo({
+                              top: 0,
+                              behavior: "instant" as ScrollBehavior,
+                            });
+                            setStationModal("origin");
                           }}
-                          minDate={new Date()}
-                          placeholder="Select date"
-                          error={!!errors.departureDate}
-                        />
+                          className="w-full"
+                        >
+                          <div
+                            className={`flex items-center gap-2 px-2.5 py-3 border-2 rounded-xl transition-all ${
+                              hasInteracted && errors.originStationId
+                                ? "border-red-400"
+                                : originId
+                                  ? "border-primary bg-primary/5"
+                                  : "border-gray-200 dark:border-gray-700"
+                            }`}
+                            style={{ backgroundColor: originId ? undefined : undefined }}
+                          >
+                            <MapPin className="w-4 h-4 text-primary flex-shrink-0" />
+                            <span
+                              style={{ color: originStation ? (dark ? '#ffffff' : '#111827') : (dark ? '#6b7280' : '#9ca3af') }}
+                              className={`text-sm truncate ${originStation ? 'font-semibold' : ''}`}
+                            >
+                              {originStation?.name ?? "Departure"}
+                            </span>
+                          </div>
+                        </button>
+                        {hasInteracted && errors.originStationId && (
+                          <p className="text-xs text-red-500">
+                            {errors.originStationId.message}
+                          </p>
+                        )}
+                      </div>
+                      <div className="space-y-1.5 min-w-0">
+                        <div className="h-5 flex items-center justify-between">
+                          <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
+                            To
+                          </label>
+                          <button
+                            type="button"
+                            onClick={handleSwap}
+                            disabled={!originId || !destId}
+                            aria-label="Swap origin and destination"
+                            className="flex items-center justify-center gap-1 text-xs text-primary font-medium disabled:opacity-30 p-0 h-5 w-5"
+                          >
+                            <ArrowLeftRight
+                              className={`w-3.5 h-3.5 transition-transform duration-300 ${swapping ? "rotate-180" : ""}`}
+                            />
+                          </button>
+                        </div>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            setHasInteracted(true);
+                            window.scrollTo({
+                              top: 0,
+                              behavior: "instant" as ScrollBehavior,
+                            });
+                            setStationModal("destination");
+                          }}
+                          className="w-full"
+                        >
+                          <div
+                            className={`flex items-center gap-2 px-2.5 py-3 border-2 rounded-xl transition-all ${
+                              hasInteracted && errors.destinationStationId
+                                ? "border-red-400"
+                                : destId
+                                  ? "border-primary bg-primary/5"
+                                  : "border-gray-200 dark:border-gray-700"
+                            }`}
+                          >
+                            <MapPin className="w-4 h-4 text-primary flex-shrink-0" />
+                            <span
+                              style={{ color: destStation ? (dark ? '#ffffff' : '#111827') : (dark ? '#6b7280' : '#9ca3af') }}
+                              className={`text-sm truncate ${destStation ? 'font-semibold' : ''}`}
+                            >
+                              {destStation?.name ?? "Destination"}
+                            </span>
+                          </div>
+                        </button>
+                        {hasInteracted && errors.destinationStationId && (
+                          <p className="text-xs text-red-500">
+                            {errors.destinationStationId.message}
+                          </p>
+                        )}
                       </div>
-                      {errors.departureDate && (
-                        <p className="text-xs text-red-500">
-                          {errors.departureDate.message}
-                        </p>
-                      )}
                     </div>
-                    {tripType === "ROUND_TRIP" && (
-                      <div className="space-y-1.5">
+                    <div className={tripType === "ROUND_TRIP" ? "grid grid-cols-2 gap-3" : ""}>
+                      <div className="space-y-1.5 min-w-0">
                         <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
-                          Return Date
+                          Date
                         </label>
                         <div>
                           <ModernDatePicker
                             value={
-                              returnDate
-                                ? new Date(returnDate + "T00:00:00")
+                              departureDate
+                                ? new Date(departureDate + "T00:00:00")
                                 : undefined
                             }
                             onChange={(date) => {
                               setValue(
-                                "returnDate",
+                                "departureDate",
                                 `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`,
                               );
-                              trigger("returnDate");
+                              trigger("departureDate");
                             }}
-                            minDate={
-                              departureDate
-                                ? new Date(departureDate + "T00:00:00")
-                                : new Date()
-                            }
-                            placeholder="Select return date"
-                            error={!!errors.returnDate}
+                            minDate={new Date()}
+                            placeholder="Departure date"
+                            error={!!errors.departureDate}
                           />
                         </div>
-                        {errors.returnDate && (
+                        {errors.departureDate && (
                           <p className="text-xs text-red-500">
-                            {errors.returnDate.message}
+                            {errors.departureDate.message}
                           </p>
                         )}
                       </div>
-                    )}
+                      {tripType === "ROUND_TRIP" && (
+                        <div className="space-y-1.5 min-w-0">
+                          <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
+                            Return Date
+                          </label>
+                          <div>
+                            <ModernDatePicker
+                              value={
+                                returnDate
+                                  ? new Date(returnDate + "T00:00:00")
+                                  : undefined
+                              }
+                              onChange={(date) => {
+                                setValue(
+                                  "returnDate",
+                                  `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`,
+                                );
+                                trigger("returnDate");
+                              }}
+                              minDate={
+                                departureDate
+                                  ? new Date(departureDate + "T00:00:00")
+                                  : new Date()
+                              }
+                              placeholder="Return date"
+                              error={!!errors.returnDate}
+                            />
+                          </div>
+                          {errors.returnDate && (
+                            <p className="text-xs text-red-500">
+                              {errors.returnDate.message}
+                            </p>
+                          )}
+                        </div>
+                      )}
+                    </div>
                     {/* Pax + Nationality combined trigger */}
                     <button
                       type="button"
@@ -1066,11 +1088,20 @@ export default function SearchPage() {
                     )}
                     <button
                       type="submit"
-                      disabled={isLoading}
-                      className="btn-primary w-full text-sm"
+                      disabled={isLoading || isSearching}
+                      className="btn-primary w-full text-sm flex items-center justify-center gap-2 disabled:opacity-80"
                     >
-                      <Search className="w-5 h-5" />
-                      Search
+                      {isSearching ? (
+                        <>
+                          <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                          Searching...
+                        </>
+                      ) : (
+                        <>
+                          <Search className="w-5 h-5" />
+                          Search
+                        </>
+                      )}
                     </button>
                   </div>
 
@@ -1207,11 +1238,20 @@ export default function SearchPage() {
                         {/* Search */}
                         <button
                           type="submit"
-                          disabled={isLoading}
-                          className="flex-shrink-0 flex items-center justify-center gap-2 px-5 py-3.5 bg-[rgb(20,113,76)] hover:bg-[rgb(16,89,60)] text-white font-bold text-sm rounded-xl transition-all transform hover:-translate-y-0.5 shadow-lg hover:shadow-xl disabled:opacity-50"
+                          disabled={isLoading || isSearching}
+                          className="flex-shrink-0 flex items-center justify-center gap-2 px-5 py-3.5 bg-[rgb(20,113,76)] hover:bg-[rgb(16,89,60)] text-white font-bold text-sm rounded-xl transition-all transform hover:-translate-y-0.5 shadow-lg hover:shadow-xl disabled:opacity-80"
                         >
-                          <Search className="w-5 h-5" />
-                          Search
+                          {isSearching ? (
+                            <>
+                              <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                              Searching...
+                            </>
+                          ) : (
+                            <>
+                              <Search className="w-5 h-5" />
+                              Search
+                            </>
+                          )}
                         </button>
                       </div>
                     ) : (
@@ -1282,7 +1322,7 @@ export default function SearchPage() {
                               trigger("returnDate");
                             }}
                             minDate={new Date()}
-                            placeholder="Select date"
+                            placeholder="Departure date"
                           />
                           {errors.departureDate && (
                             <p className="text-xs text-red-500">{errors.departureDate.message}</p>
@@ -1298,7 +1338,7 @@ export default function SearchPage() {
                               trigger("returnDate");
                             }}
                             minDate={departureDate ? new Date(departureDate + "T00:00:00") : new Date()}
-                            placeholder="Select date"
+                            placeholder="Return date"
                           />
                           {errors.returnDate && (
                             <p className="text-xs text-red-500">{errors.returnDate.message}</p>
@@ -1328,11 +1368,20 @@ export default function SearchPage() {
                         {/* Search */}
                         <button
                           type="submit"
-                          disabled={isLoading}
-                          className="flex-shrink-0 flex items-center justify-center gap-2 px-5 py-3.5 bg-[rgb(20,113,76)] hover:bg-[rgb(16,89,60)] text-white font-bold text-sm rounded-xl transition-all shadow-lg hover:shadow-xl disabled:opacity-50"
+                          disabled={isLoading || isSearching}
+                          className="flex-shrink-0 flex items-center justify-center gap-2 px-5 py-3.5 bg-[rgb(20,113,76)] hover:bg-[rgb(16,89,60)] text-white font-bold text-sm rounded-xl transition-all shadow-lg hover:shadow-xl disabled:opacity-80"
                         >
-                          <Search className="w-5 h-5" />
-                          Search
+                          {isSearching ? (
+                            <>
+                              <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                              Searching...
+                            </>
+                          ) : (
+                            <>
+                              <Search className="w-5 h-5" />
+                              Search
+                            </>
+                          )}
                         </button>
                       </div>
                     )}
diff --git a/apps/edr-passenger-web/portal/src/app/contact/page.tsx b/apps/edr-passenger-web/portal/src/app/contact/page.tsx
index 669a99d0b..90aa54bd0 100644
--- a/apps/edr-passenger-web/portal/src/app/contact/page.tsx
+++ b/apps/edr-passenger-web/portal/src/app/contact/page.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { getTranslation, Language, useLanguage } from '@/lib/i18n';
-import { Phone, Mail, MapPin, Send, Loader } from 'lucide-react';
+import { Phone, Mail, MapPin } from 'lucide-react';
 import { Footer } from '@/components/Footer';
 
 const styles = `
@@ -110,145 +110,10 @@ const styles = `
   .contact-card a:hover {
     color: rgb(20, 113, 76);
   }
-  
-  .form-section {
-    padding: 60px 20px;
-    background-color: #f9fafb;
-  }
-  
-  .dark .form-section {
-    background-color: #0f1117;
-  }
-  
-  .form-container {
-    max-width: 42rem;
-    margin: 0 auto;
-    background: white;
-    border-radius: 18px;
-    padding: 32px;
-    border: 1px solid #e5e7eb;
-  }
-  
-  .dark .form-container {
-    background: #1f2937;
-    border-color: #374151;
-  }
-  
-  .form-container h2 {
-    font-size: 1.5rem;
-    font-weight: 700;
-    margin-bottom: 24px;
-    color: #111827;
-  }
-  
-  .dark .form-container h2 {
-    color: #f3f4f6;
-  }
-  
-  .form-group {
-    margin-bottom: 20px;
-  }
-  
-  .form-group label {
-    display: block;
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: #374151;
-    margin-bottom: 8px;
-  }
-  
-  .dark .form-group label {
-    color: #d1d5db;
-  }
-  
-  .form-group input,
-  .form-group textarea {
-    width: 100%;
-    padding: 12px 16px;
-    border: 2px solid #e5e7eb;
-    border-radius: 12px;
-    font-size: 1rem;
-    font-family: inherit;
-    transition: all 0.2s;
-    box-sizing: border-box;
-    background: white;
-    color: #111827;
-  }
-  
-  .dark .form-group input,
-  .dark .form-group textarea {
-    background: #111827;
-    color: #f3f4f6;
-    border-color: #374151;
-  }
-  
-  .form-group input:focus,
-  .form-group textarea:focus {
-    outline: none;
-    border-color: rgb(20, 113, 76);
-    box-shadow: 0 0 0 3px rgba(20, 113, 76, 0.1);
-  }
-  
-  .form-submit {
-    width: 100%;
-    padding: 14px 20px;
-    background-color: rgb(20, 113, 76);
-    color: white;
-    border: none;
-    border-radius: 12px;
-    font-weight: 700;
-    cursor: pointer;
-    transition: all 0.2s;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    margin-top: 8px;
-  }
-  
-  .form-submit:hover {
-    background-color: rgb(16, 89, 60);
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-  }
-  
-  .form-submit:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-  
-  .alert {
-    padding: 12px 16px;
-    border-radius: 8px;
-    margin-bottom: 16px;
-    font-size: 0.875rem;
-  }
-  
-  .alert-success {
-    background-color: #dbeafe;
-    color: #1e40af;
-  }
-  
-  .dark .alert-success {
-    background-color: rgba(20, 113, 76, 0.1);
-    color: #a7f3d0;
-  }
-  
-  .alert-error {
-    background-color: #fee2e2;
-    color: #991b1b;
-  }
-  
-  .dark .alert-error {
-    background-color: rgba(239, 68, 68, 0.1);
-    color: #fca5a5;
-  }
 `;
 
 export default function Contact() {
   const [lang, setLang] = useState<Language>('en');
-  const [formData, setFormData] = useState({ name: '', email: '', subject: '', message: '' });
-  const [loading, setLoading] = useState(false);
-  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
   const { getLang } = useLanguage();
   const t = (key: string) => getTranslation(lang, key);
 
@@ -259,24 +124,9 @@ export default function Contact() {
     return () => window.removeEventListener('languageChange', handleLanguageChange);
   }, [getLang]);
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setLoading(true);
-    
-    try {
-      await new Promise(resolve => setTimeout(resolve, 1500));
-      setMessage({ type: 'success', text: t('contact.success') });
-      setFormData({ name: '', email: '', subject: '', message: '' });
-    } catch (error) {
-      setMessage({ type: 'error', text: t('contact.error') });
-    } finally {
-      setLoading(false);
-    }
-  };
-
   const contactInfo = [
-    { icon: Phone, title: t('contact.phone'), value: '+251 911 000 000', link: 'tel:+251911000000' },
-    { icon: Mail, title: t('contact.email'), value: 'support@edr.et', link: 'mailto:support@edr.et' },
+    { icon: Phone, title: t('contact.phone'), value: '9546', link: 'tel:9546' },
+    { icon: Mail, title: t('contact.email'), value: 'edr_@edrsc.com', link: 'mailto:edr_@edrsc.com' },
     { icon: MapPin, title: t('contact.address'), value: 'Addis Ababa, Ethiopia', link: '#' },
   ];
 
@@ -303,74 +153,6 @@ export default function Contact() {
             );
           })}
         </section>
-
-        <section className="form-section">
-          <div className="form-container">
-            <h2>{t('contact.form')}</h2>
-
-            {message && (
-              <div className={`alert alert-${message.type === 'success' ? 'success' : 'error'}`}>
-                {message.text}
-              </div>
-            )}
-
-            <form onSubmit={handleSubmit}>
-              <div className="form-group">
-                <label>{t('contact.name')}</label>
-                <input
-                  type="text"
-                  required
-                  value={formData.name}
-                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                />
-              </div>
-
-              <div className="form-group">
-                <label>{t('contact.emailField')}</label>
-                <input
-                  type="email"
-                  required
-                  value={formData.email}
-                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
-                />
-              </div>
-
-              <div className="form-group">
-                <label>{t('contact.subject')}</label>
-                <input
-                  type="text"
-                  required
-                  value={formData.subject}
-                  onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
-                />
-              </div>
-
-              <div className="form-group">
-                <label>{t('contact.message')}</label>
-                <textarea
-                  required
-                  rows={5}
-                  value={formData.message}
-                  onChange={(e) => setFormData({ ...formData, message: e.target.value })}
-                />
-              </div>
-
-              <button type="submit" disabled={loading} className="form-submit">
-                {loading ? (
-                  <>
-                    <Loader size={18} />
-                    {t('contact.sending')}
-                  </>
-                ) : (
-                  <>
-                    <Send size={18} />
-                    {t('contact.send')}
-                  </>
-                )}
-              </button>
-            </form>
-          </div>
-        </section>
       </main>
       <Footer />
     </>
diff --git a/apps/edr-passenger-web/portal/src/components/AppSidebar.tsx b/apps/edr-passenger-web/portal/src/components/AppSidebar.tsx
index 6d47b8b5a..0acb5d9ea 100644
--- a/apps/edr-passenger-web/portal/src/components/AppSidebar.tsx
+++ b/apps/edr-passenger-web/portal/src/components/AppSidebar.tsx
@@ -14,12 +14,18 @@ import {
 } from 'lucide-react';
 import Link from 'next/link';
 import Image from 'next/image';
+import dynamic from 'next/dynamic';
 import { usePathname } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useAuthStore } from '@/lib/auth-store';
-import ChangePasswordModal from '@/components/ChangePasswordModal';
 import { BOOKING_STEPS } from '@/components/ProgressIndicator';
 
+// AppSidebar renders on every page via the root layout, so anything imported
+// here ships to every visitor's first load — but this modal is only ever
+// reachable by an already-authenticated user opening the account dropdown.
+// Code-split it out instead of paying for it on every page/every visitor.
+const ChangePasswordModal = dynamic(() => import('@/components/ChangePasswordModal'), { ssr: false });
+
 // Mirrors booking/layout.tsx's stepMap — the linear booking flow routes that
 // get a vertical step list instead of the standard nav highlighting.
 const BOOKING_STEP_MAP: Record<string, string> = {
@@ -203,10 +209,12 @@ export default function AppSidebar() {
         )}
       </div>
 
-      <ChangePasswordModal
-        isOpen={showChangePassword}
-        onClose={() => setShowChangePassword(false)}
-      />
+      {showChangePassword && (
+        <ChangePasswordModal
+          isOpen={showChangePassword}
+          onClose={() => setShowChangePassword(false)}
+        />
+      )}
     </aside>
   );
 }
diff --git a/apps/edr-passenger-web/portal/src/components/Footer.tsx b/apps/edr-passenger-web/portal/src/components/Footer.tsx
index 8d4e36a3f..ca361d131 100644
--- a/apps/edr-passenger-web/portal/src/components/Footer.tsx
+++ b/apps/edr-passenger-web/portal/src/components/Footer.tsx
@@ -48,13 +48,13 @@ export function Footer() {
                 <a href="https://web.facebook.com/ethiodjiboutirailwaysc" target="_blank" rel="noopener noreferrer" className="w-10 h-10 bg-white bg-opacity-20 rounded-lg flex items-center justify-center hover:bg-opacity-30 transition duration-200 transform hover:scale-110" aria-label="Facebook">
                   <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
                 </a>
-                <a href="https://twitter.com/edr" target="_blank" rel="noopener noreferrer" className="w-10 h-10 bg-white bg-opacity-20 rounded-lg flex items-center justify-center hover:bg-opacity-30 transition duration-200 transform hover:scale-110" aria-label="Twitter">
+                <a href="/" className="w-10 h-10 bg-white bg-opacity-20 rounded-lg flex items-center justify-center hover:bg-opacity-30 transition duration-200 transform hover:scale-110" aria-label="Twitter">
                   <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                 </a>
-                <a href="https://instagram.com/edr" target="_blank" rel="noopener noreferrer" className="w-10 h-10 bg-white bg-opacity-20 rounded-lg flex items-center justify-center hover:bg-opacity-30 transition duration-200 transform hover:scale-110" aria-label="Instagram">
+                <a href="/" className="w-10 h-10 bg-white bg-opacity-20 rounded-lg flex items-center justify-center hover:bg-opacity-30 transition duration-200 transform hover:scale-110" aria-label="Instagram">
                   <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>
                 </a>
-                <a href="https://linkedin.com/company/edr" target="_blank" rel="noopener noreferrer" className="w-10 h-10 bg-white bg-opacity-20 rounded-lg flex items-center justify-center hover:bg-opacity-30 transition duration-200 transform hover:scale-110" aria-label="LinkedIn">
+                <a href="/" className="w-10 h-10 bg-white bg-opacity-20 rounded-lg flex items-center justify-center hover:bg-opacity-30 transition duration-200 transform hover:scale-110" aria-label="LinkedIn">
                   <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2z"/><circle cx="4" cy="4" r="2"/></svg>
                 </a>
               </div>
diff --git a/apps/edr-passenger-web/portal/src/components/ModernDatePicker.tsx b/apps/edr-passenger-web/portal/src/components/ModernDatePicker.tsx
index 674755516..20923278c 100644
--- a/apps/edr-passenger-web/portal/src/components/ModernDatePicker.tsx
+++ b/apps/edr-passenger-web/portal/src/components/ModernDatePicker.tsx
@@ -286,14 +286,14 @@ export default function ModernDatePicker({
       <button
         type="button"
         onClick={() => setIsOpen(true)}
-        className={`w-full px-3.5 py-3.5 border-2 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary text-left flex items-center justify-between bg-white dark:bg-gray-800 transition-all group ${
+        className={`w-full min-w-0 px-2.5 sm:px-3.5 py-3.5 border-2 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary text-left flex items-center justify-between gap-1.5 bg-white dark:bg-gray-800 transition-all group ${
           error
             ? 'border-red-400 hover:border-red-400'
             : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
         }`}
       >
-        <span className={`text-sm ${value ? 'text-gray-900 dark:text-gray-100 font-medium' : 'text-gray-400'}`}>
-          {value ? format(value, 'EEE, MMM d, yyyy') : placeholder}
+        <span className={`text-sm whitespace-nowrap truncate ${value ? 'text-gray-900 dark:text-gray-100 font-medium' : 'text-gray-400'}`}>
+          {value ? format(value, 'MMM d, yyyy') : placeholder}
         </span>
         <CalendarIcon className="w-4 h-4 text-gray-400 group-hover:text-primary transition-colors flex-shrink-0" />
       </button>
diff --git a/apps/edr-passenger-web/portal/src/lib/generate-voucher.ts b/apps/edr-passenger-web/portal/src/lib/generate-voucher.ts
index 6ff31aeaf..7fd0e71f2 100644
--- a/apps/edr-passenger-web/portal/src/lib/generate-voucher.ts
+++ b/apps/edr-passenger-web/portal/src/lib/generate-voucher.ts
@@ -103,6 +103,29 @@ function hairline(doc: jsPDF, x1: number, y: number, x2: number): void {
 
 // ─── header ────────────────────────────────────────────────────────────────
 
+// Fetched once and reused for the lifetime of the page — re-fetching this same static
+// asset on every passenger/every voucher adds a real network round-trip in the middle of
+// what needs to stay close to the original click's synchronous execution window (iOS
+// Safari silently blocks a file save triggered too long after user activation).
+let logoCache: Promise<{ dataUrl: string; width: number; height: number }> | null = null;
+function loadLogo(): Promise<{ dataUrl: string; width: number; height: number }> {
+  if (!logoCache) {
+    logoCache = (async () => {
+      const logoImg  = await fetch('/edr-logo.png');
+      const logoBlob = await logoImg.blob();
+      const dataUrl = await new Promise<string>((resolve) => {
+        const reader = new FileReader();
+        reader.onloadend = () => resolve(reader.result as string);
+        reader.readAsDataURL(logoBlob);
+      });
+      const img = new Image();
+      await new Promise((resolve) => { img.onload = resolve; img.src = dataUrl; });
+      return { dataUrl, width: img.width, height: img.height };
+    })();
+  }
+  return logoCache;
+}
+
 async function drawHeader(doc: jsPDF, margin: number): Promise<number> {
   const pageWidth = doc.internal.pageSize.getWidth();
   const bandHeight = 24;
@@ -111,17 +134,9 @@ async function drawHeader(doc: jsPDF, margin: number): Promise<number> {
   doc.rect(0, 0, pageWidth, bandHeight, 'F');
 
   try {
-    const logoImg  = await fetch('/edr-logo.png');
-    const logoBlob = await logoImg.blob();
-    const logoDataUrl = await new Promise<string>((resolve) => {
-      const reader = new FileReader();
-      reader.onloadend = () => resolve(reader.result as string);
-      reader.readAsDataURL(logoBlob);
-    });
-    const img = new Image();
-    await new Promise((resolve) => { img.onload = resolve; img.src = logoDataUrl; });
+    const { dataUrl: logoDataUrl, width, height } = await loadLogo();
     const logoH = 13;
-    const logoW = (img.width / img.height) * logoH;
+    const logoW = (width / height) * logoH;
     const textX = margin + logoW + 5;
     doc.addImage(logoDataUrl, 'PNG', margin, (bandHeight - logoH) / 2, logoW, logoH);
     doc.setTextColor(255, 255, 255);
@@ -358,16 +373,14 @@ function drawFooter(doc: jsPDF, createdAt: string): void {
 
   hairline(doc, PAGE_MARGIN, footerY, pageWidth - PAGE_MARGIN);
   doc.setFontSize(7.5); doc.setTextColor(...MUTED); doc.setFont('helvetica', 'normal');
-  doc.text('support@edr.com   ·   +251-11-XXX-XXXX   ·   www.edr.com', pageWidth / 2, footerY + 6, { align: 'center' });
+  doc.text('edr_@edrsc.com   ·   9546   ·   www.edr.com', pageWidth / 2, footerY + 6, { align: 'center' });
   doc.setFontSize(6.5);
   doc.text(`Issued ${new Date(createdAt).toLocaleString('en-US')}`, pageWidth / 2, footerY + 10.5, { align: 'center' });
 }
 
 // ─── public API ──────────────────────────────────────────────────────────────
 
-/** Generates and downloads one PDF voucher for a single passenger. */
-export const generatePassengerVoucherPDF = async (data: PassengerVoucherData): Promise<void> => {
-  const doc    = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' });
+async function drawPassengerVoucherPage(doc: jsPDF, data: PassengerVoucherData): Promise<void> {
   const pageW  = doc.internal.pageSize.getWidth();
   const margin = PAGE_MARGIN;
 
@@ -388,6 +401,12 @@ export const generatePassengerVoucherPDF = async (data: PassengerVoucherData): P
   y = drawFareSummary(doc, data.fareMinor, data.currency, y, margin, pageW);
   drawInstructions(doc, y, margin, pageW);
   drawFooter(doc, data.createdAt);
+}
+
+/** Generates and downloads one PDF voucher for a single passenger. */
+export const generatePassengerVoucherPDF = async (data: PassengerVoucherData): Promise<void> => {
+  const doc = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' });
+  await drawPassengerVoucherPage(doc, data);
 
   const safeName = (data.passengerName || 'Passenger').replace(/\s+/g, '_').replace(/[^a-zA-Z0-9_-]/g, '');
   doc.save(`Voucher_${safeName}.pdf`);
@@ -404,24 +423,45 @@ interface VoucherData {
   currency: string;
   bookingType: string;
   createdAt: string;
+  // One ticket per passenger, matched below by passengerName — see bookings.service.ts's
+  // getByRef(). Optional/absent falls back to a client-generated placeholder number.
+  tickets?: Array<{ passengerName?: string; barcodePayload?: string }>;
+  // The actual settled amount/currency for this booking's payment — preferred over the
+  // ETB booking total once available, since it reflects what was really charged.
+  payment?: { amountMinor?: number; currency?: string };
 }
 
 export const generateVoucherPDF = async (booking: VoucherData): Promise<void> => {
+  const settledAmountMinor = booking.payment?.amountMinor;
+  const settledCurrency = booking.payment?.currency;
+  const useSettledAmount = settledAmountMinor != null && !!settledCurrency;
+  const voucherCurrency = useSettledAmount ? settledCurrency! : booking.currency;
+  const totalForSplit = useSettledAmount ? settledAmountMinor! : booking.totalMinor;
+
+  // Separate file per passenger, saved back-to-back with no macrotask (setTimeout) between
+  // them — a setTimeout delay here would push later saves outside the click's synchronous
+  // user-activation window and risk iOS Safari silently blocking them. The awaited work
+  // inside generatePassengerVoucherPDF is itself just microtasks (cached logo, QR encode),
+  // which doesn't have that effect.
   for (let i = 0; i < booking.passengers.length; i++) {
     const p = booking.passengers[i];
+    const matchedTicket =
+      booking.tickets?.find((t) => t.passengerName === p.fullName) ?? booking.tickets?.[i] ?? null;
+    // No fabricated placeholder — a made-up TKT-... number reads as real and is misleading
+    // if it doesn't match what's actually on file.
+    const ticketNumber = matchedTicket?.barcodePayload || 'Not yet issued';
+
     await generatePassengerVoucherPDF({
       bookingRef:        booking.bookingRef,
-      ticketNumber:      `TKT-${booking.bookingRef}-${(i + 1).toString().padStart(2, '0')}`,
+      ticketNumber,
       passengerName:     p.fullName,
       seatNumber:        p.seat?.number,
       status:            booking.status,
       outboundSchedule:  { ...booking.schedule, seatClass: p.seat?.seatClass },
       isRoundTrip:       false,
-      fareMinor:         Math.round(booking.totalMinor / booking.passengers.length),
-      currency:          booking.currency,
+      fareMinor:         Math.round(totalForSplit / booking.passengers.length),
+      currency:          voucherCurrency,
       createdAt:         booking.createdAt,
     });
-    // small delay so browsers don't block multiple sequential downloads
-    if (i < booking.passengers.length - 1) await new Promise(r => setTimeout(r, 400));
   }
 };
diff --git a/docker-compose.yaml b/docker-compose.yaml
index 863c1b5e2..d3c89c4a9 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -16,12 +16,33 @@ services:
         - npmrc
     ports:
       - "${FREIGHT_API_PORT:-3001}:${FREIGHT_API_PORT:-3001}"
-      # GT06 GPS tracker TCP ingestion (raw TCP — must be reachable by tracker SIMs).
-      - "${GT06_TCP_PORT:-5023}:${GT06_TCP_PORT:-5023}"
     env_file:
       - apps/edr-freight-api/.env
     extra_hosts:
       - "paymentcallback.triaplc.com:10.18.7.179"
+
+  # Standalone GT06 GPS tracker ingester (@edr/gps-tracker). Raw TCP only, no
+  # HTTP. Writes freight.gps_devices / freight.gps_positions in the shared
+  # freight DB; the /gps REST API stays in freight-api. Never runs migrations.
+  gps-tracker:
+    build:
+      context: .
+      dockerfile: apps/edr-gps-tracker/Dockerfile
+      secrets:
+        - npmrc
+    depends_on:
+      - freight-api
+    ports:
+      # Raw TCP — reachable by tracker SIMs. Not HTTP; no L7 proxy can host-route it.
+      - "${GT06_TCP_PORT:-5023}:5023"
+    environment:
+      GT06_TCP_PORT: "5023"
+      GT06_TCP_HOST: "0.0.0.0"
+    env_file:
+      # Reuses the freight DB credentials (DB_HOST/DB_PORT/DB_USER/DB_PASSWORD/DB_NAME).
+      - apps/edr-freight-api/.env
+    restart: unless-stopped
+
   passenger-api:
     build:
       context: .
diff --git a/docs/qa/edr-freight-qa-test-plan.md b/docs/qa/edr-freight-qa-test-plan.md
new file mode 100644
index 000000000..f9102bc18
--- /dev/null
+++ b/docs/qa/edr-freight-qa-test-plan.md
@@ -0,0 +1,292 @@
+# EDR Freight — Operations QA Test Plan
+
+End-to-end test flows from booking through warehouse, rail, and delivery — import and export,
+with and without first/last mile, self-haul and EDR haulage. Every status, guard, and endpoint
+below is taken from the code, not assumed.
+
+| | |
+|---|---|
+| **Branch** | `Truckdetantion` |
+| **Scope** | Warehouse · Fees · Allocation · First mile · Last mile |
+| **Depth** | Tester steps + technical refs |
+
+---
+
+## 00 · Test data setup
+
+Nothing below passes without this. Set it up once per environment and confirm each line before
+opening a single flow.
+
+- [ ] **Warehouse tree.** At least one `ACTIVE` warehouse with a yard and a zone. Capacities are in **tonnes**, not kg.
+- [ ] **Company has a linked portal user.** Critical — in-app notifications resolve recipients from the company's portal users. With none linked, `notify()` logs `0 recipients — skipped` and stores nothing. SMS/email still fire.
+- [ ] **Customer saved signature.** Required for Approve delivery; without it the API returns *"Please save your signature before approving delivery"*.
+- [ ] **Allocation rules** covering the freight type and trade direction under test (see §08), or accept the capacity-balanced fallback.
+- [ ] **Fee rules** — at least one each of `STORAGE_FEE`, `DEMURRAGE_FEE`, `DOUBLE_HANDLING_FEE`, `TRUCK_DETENTION_FEE` (see §07).
+- [ ] **Drivers and vehicles** registered; a train schedule with wagons for the route under test.
+- [ ] **Booking reaches `PAID`.** Receive-to-warehouse skips any booking that is not PAID.
+- [ ] **Container numbers are ISO 6346** — 4 letters + 7 digits, uppercase (`ABCU1234567`). Enforced at booking input and at every reference point.
+
+> **Direction is derived, not declared.** Receive-to-warehouse computes trade direction from the
+> *origin and destination yard countries*, not the booking's stored `trade_direction`. A booking
+> whose route says IMPORT will be skipped from an EXPORT receive with *"Booking route is IMPORT,
+> not EXPORT"*. Set up yards accordingly.
+
+---
+
+## 01 · Lifecycle reference
+
+The three state machines a tester needs to read a failure. Anything not listed as an allowed
+transition is rejected by `assertTransition`.
+
+### Warehouse inventory transitions
+
+| From | Allowed next | Notes |
+|---|---|---|
+| `UNLOADED` | `STORED`, `READY_FOR_PICKUP` | Import landing state after train unload |
+| `RECEIVED` | `STORED`, `READY_FOR_PICKUP` | Export landing state after truck receive |
+| `STORED` | `RESERVED`, `READY_FOR_LOADING` | Reserve is retired from the UI; `STORED → READY_FOR_LOADING` is the live path |
+| `READY_FOR_LOADING` | `LOADED` | Onto a wagon |
+| `LOADED` | `DISPATCHED` | |
+| `DISPATCHED` | `UNLOADED_AT_DJIBOUTI_PORT` | Export only, at Djibouti |
+| `READY_FOR_PICKUP` | `DELIVERED`, `STORED`, `DISPATCHED` | Import; may be put back into storage |
+
+### Container item stages
+
+```
+PENDING → RECEIVED → GRN → ASSIGNED → LOADED → LEFT → DELIVERED
+```
+
+**ASSIGNED** means the customer picked which containers ride which truck — planning only.
+**LOADED** requires the operator to actually load them, and only after the truck has arrived
+(`loaded_at` is stamped then). Assignment alone must never show LOADED.
+
+### First mile & last mile
+
+| Leg | Statuses, in order | Gate it controls |
+|---|---|---|
+| First mile | `PAYMENT_PENDING → READY_TO_TRANSIT → IN_TRANSIT → RECEIVED_TO_PORT` | Export receive is blocked until `RECEIVED_TO_PORT` |
+| Last mile | `PAYMENT_PENDING → READY_TO_TRANSIT → IN_TRANSIT → DELIVERED` | Truck-detention window: `arrivedAt` (reached destination) → `deliveredAt` (vehicle returned) |
+
+---
+
+## 02 · Export — without first mile
+
+Customer brings the cargo to the facility themselves. The happy path from a paid booking to cargo
+unloaded at Djibouti port with an interchange document.
+
+| Step | Tester action | Expected result | Technical ref |
+|---|---|---|---|
+| E1.1 | Create an export booking (route origin ET → destination DJ), pay it. | Booking reaches `PAID`. | Container numbers must be ISO 6346 |
+| E1.2 | Export Operations → **Receive for Loading**. Select the booking, capture the truck entrance (plate, driver, weights), pick warehouse/yard/zone. | Inventory created; **GRN issued** as `GRN-EXPORT-YYYYMMDD-XXXXXXXX`. Customer gets a receive SMS. | `POST /warehouse-inventory/receive-bulk` |
+| E1.3 | Store the item — auto-allocate, or pick warehouse/yard/zone in the Store modal. | Status `STORED`; note records "allocation rule", "capacity-balanced", or "operator-selected". | Capacity decremented in tonnes |
+| E1.4 | Inspect: mark selected items as inspected, outcome **PASSED**. | Export items advance straight to `READY_FOR_LOADING`. | Reserve step is retired |
+| E1.5 | Ready To Load tab → load onto the allocated wagon. | Status `LOADED`; a warehouse loading record exists. | Requires an allocated wagon |
+| E1.6 | Download the **export marshalling / load list** PDF. | PDF lists the train's wagons, bookings, containers. | train-scheduling controller |
+| E1.7 | Dispatch Queue → dispatch. | Status `DISPATCHED`. Customer receives **"Shipment dispatched"** naming origin → destination. | Per booking on the schedule |
+| E1.8 | Move the schedule to arrived at the Djibouti-side port. | Train appears in the Djibouti unloading queue. Customer receives **"Shipment arrived"**. | status `ARRIVED` / `ARRIVED_AT_DJIBOUTI` |
+| E1.9 | Grant the gate pass for the train, then **Unload at Djibouti**. | Items become `UNLOADED_AT_DJIBOUTI_PORT` and an **interchange document** is generated. | Unload checks `gatepass_granted_at` |
+| **E1.G** | Try to unload at Djibouti *before* granting the gate pass. | 🚫 **Blocked.** Items skipped with a gate-pass reason; no interchange document. | See §06 |
+
+---
+
+## 03 · Export — with first mile
+
+EDR collects the cargo from the customer's premises. Identical to §02 from the store step onward;
+the difference is entirely in the gate before receive.
+
+| Step | Tester action | Expected result | Technical ref |
+|---|---|---|---|
+| E2.1 | Create the export booking with a **first-mile pickup address** (or a service type that includes first mile). | Booking is flagged `hasFirstMile`. | Derived from address *or* `service_types.includes_first_mile` |
+| E2.2 | Create the first-mile request; assign a vehicle and driver. | Driver receives an SMS naming the vehicle, booking, pickup and destination. | First Mile page |
+| E2.3 | Walk the leg: `READY_TO_TRANSIT → IN_TRANSIT → RECEIVED_TO_PORT`. | Each transition persists. | |
+| E2.4 | Now run **Receive for Loading**. | Booking is received; truck entrance pre-filled from the first-mile vehicle and driver. | Then continue at E1.3 |
+| **E2.G1** | Attempt receive with **no first-mile request created**. | 🚫 Skipped: *"First-mile request not created"*. | |
+| **E2.G2** | Attempt receive while first-mile status is `IN_TRANSIT`. | 🚫 Skipped: *"First-mile truck has not arrived"*. | Only `RECEIVED_TO_PORT` passes |
+
+---
+
+## 04 · Import — self-haul (customer collects)
+
+The longest flow, and the one with the most guards. The customer assigns their own trucks, signs a
+booking-level handover, and collects. Test this one first — it exercises truck arrival, loading,
+weighing, handover, exit paper, and fees.
+
+```
+train arrives → unload → inspect → ready for pickup → assign truck → truck arrival
+  → sign handover → load → truck leaving → exit paper → deliver
+```
+
+| Step | Tester action | Expected result | Technical ref |
+|---|---|---|---|
+| I1.1 | Import booking (route DJ → ET), paid, **no last-mile address** and a service type that excludes last mile. | Booking is self-haul. | Drives `usesCustomerTruck` |
+| I1.2 | Import Operations → **Arrival Queue**. Open the arrived train, assign warehouse/yard/zone per booking, **Auto Unload Arrived Bookings**. | Inventory created at `UNLOADED`. Counter shows `n/total unloaded`. | Train must be `ARRIVED` |
+| I1.3 | Inspect the item, outcome **PASSED**. | Item advances to `READY_FOR_PICKUP`. Customer receives **"Assign a truck for pickup"** (in-app + SMS + email). | Fires only when self-haul *and* no truck assigned |
+| I1.4 | **Portal:** customer assigns truck(s), entering ISO container numbers per truck. | Containers move to stage `ASSIGNED` and show their planned truck. Booking becomes `TRUCK_ASSIGNED`. | 20ft → max 2/truck; 40ft → 1/truck; trucks ≤ containers |
+| I1.5 | Backoffice row menu → **Truck Arrival**. Select the assigned truck, record gate-in time and **tare** weight (tonnes). | Truck stamped arrived. A **SELF_HAUL handover** is generated (booking-level) and the customer is notified to sign, on all three channels. | Truck Arrival disabled until a truck is assigned |
+| I1.6 | **Portal:** customer opens the booking → **Approve delivery**. | The handover PDF opens for review; approving applies their saved signature and returns the signed PDF. | Signs all unsigned handovers on the booking |
+| I1.7 | Open the container list → select the assigned containers → **Load onto truck** (pick the arrived truck). | Containers move to `LOADED`; `loaded_at` stamped. | Only arrived, not-departed trucks are listed |
+| I1.8 | Row menu → **Truck Leaving**. Select the containers on the truck, record gate-out time and **gross** weight. | Net is computed from the selected containers' cargo weight and must equal `gross − tare`. Release document issued. | Weight match enforced client- *and* server-side |
+| I1.9 | Generate the **exit paper** for the truck. | PDF lists the truck, driver, and its containers. Containers move to `LEFT`. | Requires signed handover + cleared fees |
+| I1.10 | **Deliver** the inventory, recording the receiver name. | Status `DELIVERED`; handovers stamped delivered. | Requires handover signed *and* truck departed |
+
+> 🚫 **The single most likely bug you will hit.** Exit paper returns `400` when the handover is not
+> fully signed, or when a warehouse fee invoice is `ISSUED` / `PARTIALLY_PAID`. In the container
+> list, the Exit Paper button turns grey and clicking it **sends the customer a signature request**
+> instead of erroring. That is correct behaviour — verify the message, don't file it as a bug.
+
+---
+
+## 05 · Import — EDR last mile
+
+EDR delivers to the customer's door. No customer truck, no portal Approve delivery, and the
+handover is *per delivering truck* — not per booking. This is where truck detention accrues.
+
+| Step | Tester action | Expected result | Technical ref |
+|---|---|---|---|
+| I2.1 | Import booking with a **last-mile delivery address** (or service type including last mile). | `hasLastMile` is true; no "assign a truck" notification is sent. | EDR haulage — customer assigns nothing |
+| I2.2 | Unload from the arrived train, inspect PASSED. | Item becomes `READY_FOR_PICKUP` and the last-mile leg is accepted automatically. | |
+| I2.3 | Last Mile page: assign vehicle + driver. | Leg reaches `READY_TO_TRANSIT`. Row shows Assigned. | Driver notified by SMS |
+| I2.4 | **Truck Arrival** from the Last Mile row: gate-in, tare weight. | Weighing saved; the assigned last-mile truck is pre-selected. | Re-opening must show the saved details |
+| I2.5 | **Truck Leaving**: gate-out, gross weight. | Release document issued; leg moves to `IN_TRANSIT`. `arrivedAt` starts the detention clock. | Detention window opens |
+| I2.6 | Deliver at the customer's door, recording the receiver name. | Item `DELIVERED`. An **EDR_LAST_MILE handover is generated per delivering truck**, resolved from the container's allocated vehicle. | Not booking-level |
+| I2.7 | Return the vehicle → mark the leg `DELIVERED`. | `deliveredAt` stamped; detention clock stops. | |
+| I2.8 | Preview, then generate the **truck detention invoice**. | Charged per truck per day beyond the grace hours, at the matching tier. See §07. | `POST /last-mile/:id/generate-truck-detention-invoice` |
+| **I2.G** | Open the booking in the portal. | 🚫 **Approve delivery must NOT appear.** The portal flag counts only `SELF_HAUL` handovers; EDR handovers are signed by the receiver at the door. | Regression check |
+
+---
+
+## 06 · Marshalling, gate pass, interchange
+
+Documents are generated, not uploaded. Each has a precondition; test the precondition, not just the PDF.
+
+| Document | When | Precondition | Verify |
+|---|---|---|---|
+| **GRN** | On receive to warehouse | Booking `PAID`; route direction matches; export needs a truck entrance | Number format `GRN-<DIR>-<YYYYMMDD>-<8>`; PDF opens; customer SMS sent |
+| **Import load list / marshalling** | Import train, before unload | Schedule has bookings assigned | Summary endpoint and printable PDF agree; portrait/landscape both render |
+| **Export marshalling / load list** | Export train, after loading | Items `LOADED` onto wagons | Wagon, booking, container rows are complete |
+| **Gate pass** | Djibouti-side operations | Granted per schedule | `gatepass_granted_at` is set; **export Djibouti unload reads this same field** |
+| **Interchange document** | Automatically, after a successful Djibouti unload | At least one item unloaded | Document number returned in the unload response; visible in Interchange Documents |
+| **Handover** | Self-haul: on truck arrival. EDR: at delivery. | See §04 / §05 | Self-haul is booking-level, one per booking; EDR is one per delivering truck |
+| **Exit paper / release doc** | Truck leaving | Handover fully signed *and* no unpaid warehouse fee | Weights on the paper match the gate weighing |
+
+> ⚠️ **Cross-module quirk worth confirming with the team.** The *export* Djibouti unload checks the
+> gate-pass flag stored on the *import* Djibouti operations record
+> (`import_djibouti_operations.gatepass_granted_at`). It works, but it is surprising. If an export
+> unload silently skips every item, check that field first.
+
+---
+
+## 07 · Fee rules
+
+Four rule types. Two are day-based with free days and tiers; double handling is a flat rate
+multiplied by a basis; truck detention is hour-graced and vehicle-scoped.
+
+| Rule type | Charged on | Key fields | Test cases |
+|---|---|---|---|
+| `STORAGE_FEE` | Days in storage | free days, `tiers` | Within free days → zero. One day past → tier 1. Cross a tier boundary → correct tier rate. |
+| `DEMURRAGE_FEE` | Days beyond free time | free days, `tiers` | Same boundary tests. Confirm it blocks exit paper and delivery while `ISSUED`. |
+| `DOUBLE_HANDLING_FEE` | Flat rate × quantity | `basis`: `PER_CONTAINER` \| `PER_TON` \| `PER_ITEM` | Container booking → PER_CONTAINER uses container count. Bulk → PER_TON uses tonnage. Break-bulk machinery → PER_ITEM uses item count. **Import only.** Free days and tiers must not apply. |
+| `TRUCK_DETENTION_FEE` | Per truck, per day | `free_hours` grace, `tiers`, vehicle type scope | Return inside the grace window → zero. Just past grace → day 1 at tier 1. Multi-day → tier escalation. A vehicle type outside the rule's scope → no charge. **Import only.** |
+
+### Fee behaviour to verify on every rule
+
+- [ ] **Preview before invoice.** The preview amount must equal the issued invoice total.
+- [ ] **Notification on issue.** Issuing a warehouse fee invoice sends the customer an in-app `INVOICE_ISSUED` notification *and* an SMS, deep-linked to pay.
+- [ ] **Clearance gate.** While a warehouse-source invoice is `ISSUED` or `PARTIALLY_PAID`, exit paper, terminal release, and Approve delivery are all blocked.
+- [ ] **Payable-but-uninvoiced.** If fees are payable and no invoice exists yet, release is still blocked with *"Generate and fully pay…"*. Confirm the operator can generate it from that state.
+- [ ] **Fully paid** → release proceeds; a receipt PDF is available.
+- [ ] **Edit a rule** (rate, free days, tiers, grace hours) and confirm the next preview reflects it.
+
+---
+
+## 08 · Allocation rules
+
+Where an item is stored is decided by the first matching rule, in priority order. Test the
+precedence, not just one rule.
+
+| Match criteria (any may be null = wildcard) | Targets |
+|---|---|
+| `freight_type`, `trade_direction`, `cargo_type_code`, `container_status`, `requires_inspection`, ordered by `priority` | `target_facility_code`, `target_warehouse_code`, `target_yard_code` (required), `target_zone_code`, `storage_type` |
+
+### Precedence, highest first
+
+| # | Source of the location | How to trigger | Note recorded |
+|---|---|---|---|
+| 1 | **Operator selection** | Store modal → pick warehouse + yard + zone | "Stored at operator-selected location" |
+| 2 | **Allocation rule** | Leave the Store modal blank; a matching rule exists | "Stored by allocation rule `<name>`" |
+| 3 | **Capacity-balanced fallback** | Leave blank; no rule matches | "Stored by capacity-balanced allocation" |
+
+- [ ] Two matching rules → the **lower priority number wins**.
+- [ ] Yard dropdowns are filtered by **freight type** — container bookings offer container yards only.
+- [ ] Only `ACTIVE` warehouses, yards and zones are selectable.
+- [ ] Storing beyond a zone's capacity is rejected; capacities are compared in **tonnes**.
+- [ ] **Move** an item to another warehouse/yard/zone → capacity released at source, taken at destination.
+- [ ] Edit a rule, an existing warehouse, a yard, and a zone — all four must be editable.
+
+---
+
+## 09 · Negative & guard cases
+
+Every row here is intended behaviour. The test passes when the action is **refused** with the
+stated message. Anything that succeeds is the bug.
+
+| Area | Attempt | Expected refusal |
+|---|---|---|
+| Booking | Enter a container number that is not 4 letters + 7 digits (e.g. `MSKU10105185`, `3456789`). | *"Enter a valid ISO container number"*. Lowercase is auto-uppercased; input capped at 11 characters. |
+| Booking | Enter the **same container number twice** in one shipment. | *"Duplicate container number in this shipment."* |
+| Receive | Receive a booking that is not `PAID`. | Skipped: *"Booking not PAID"*. |
+| Receive | Receive the same booking twice. | Skipped: *"Already received"*. |
+| Receive | Export receive with no truck entrance captured. | Rejected before any inventory is created. |
+| Truck assign | Put **two 40ft containers** on one truck. | *"A 40ft container fills the truck — assign only 1 container to this truck"*. |
+| Truck assign | Put **three containers** on one truck. | *"A truck carries at most 2 containers"*. |
+| Truck assign | Assign **more trucks than the booking has containers**. | *"Cannot assign more trucks than containers…"*. |
+| Truck assign | Assign a container from another booking, or one already on another truck. | *"…is not one of this booking's containers"* / *"…already loaded onto another truck"*. |
+| Truck assign | Edit a truck **after it has arrived**. | Refused — edits are allowed only until arrival. |
+| Loading | **Load containers onto a truck that has not arrived.** | *"Record the truck arrival before loading…"*. The truck picker lists only arrived, not-departed trucks. |
+| Loading | Load onto a truck that has already departed. | *"This truck has already left — its load is locked"*. |
+| Stages | Customer assigns containers to a truck, then check the container list. | Stage is `ASSIGNED`, **never** `LOADED`. Exit Paper is not offered. |
+| Truck leaving | Enter a gross weight where `gross − tare` ≠ the selected containers' cargo weight. | *"Weight mismatch…"*. Exit paper and gate clearance blocked, client and server. |
+| Truck leaving | Save leaving with **no containers selected**. | *"Select the containers loaded on this truck"*. |
+| Exit paper | Generate before the handover is signed. | *"Handover must be signed…"*. In the container list the button is grey and instead **sends the customer a signature request**. |
+| Exit paper | Generate with an `ISSUED` demurrage/storage invoice. | *"…must be fully paid before terminal release"*. |
+| Approve delivery | Approve without a saved signature. | *"Please save your signature…"* and the portal routes to the signature page. |
+| Approve delivery | Approve before warehouse inspection has passed. | *"Delivery can be approved after warehouse inspection has passed"*. |
+| Approve delivery | Approve when a truck is assigned but has not arrived. | *"Customer truck arrival must be recorded before delivery approval"*. |
+| Deliver | Deliver before a release order was issued, or before the self-haul truck has left. | *"A release order must be issued…"* / *"Deliver is available only after the customer truck has left"*. |
+| Djibouti unload | Unload an export train with no gate pass granted. | Items skipped; no interchange document generated. |
+| Warehouse | Store into an `INACTIVE` warehouse/yard/zone, or beyond capacity. | Not selectable / *"No active warehouse yard/zone is available"* / capacity error. |
+
+---
+
+## 10 · Notifications
+
+All customer notifications land in the same portal inbox. Verify the message, the deep link, and —
+where noted — the SMS and email.
+
+| Notification | Fires when | Channels | Deep link |
+|---|---|---|---|
+| Shipment dispatched | Train schedule dispatched, per booking | In-app, SMS, email | Booking |
+| Shipment arrived | Train schedule arrived, per booking | In-app, SMS, email | Booking |
+| Assign a truck for pickup | Export: on warehouse receive. Import: on inspection pass → ready for pickup. Only if self-haul *and* no truck assigned. | In-app, SMS, email | Booking → assign truck |
+| Handover — signature needed | Self-haul truck arrives (handover generated), and re-sent when an operator requests a signature from the Exit Paper button | In-app, SMS, email | Booking → approve delivery |
+| Warehouse fee due | Storage / demurrage invoice issued | In-app, SMS | Booking → pay |
+| Wagon allocated / payment window | Scheduling | In-app | Booking |
+
+> 🚫 **Do not chase a missing in-app notification before checking this.** Recipients are resolved
+> from the company's linked portal users. If a company has none, `notify()` logs *"0 recipients —
+> skipped"* and stores nothing — the notification simply never appears, with no error. SMS and
+> email still go out, because they address the company's phone and email directly. On a fresh
+> environment this is the usual explanation.
+
+---
+
+## 11 · Known open issues
+
+Do not raise duplicates for these. Each is already identified.
+
+| Status | Issue | Impact on testing |
+|---|---|---|
+| 🔴 **Open** | **Export receive returns 500** on the deployed environment (`POST /warehouse-inventory/receive-bulk`). | Blocks flows E1 and E2 at step .2. Awaiting the response body / server log to diagnose. Likely schema drift, not the SQL. |
+| 🟠 **Fix pending deploy** | **Export receive was extremely slow.** The owner SMS was awaited inside the DB transaction, and the SMS client had no HTTP timeout. | Fixed on branch: SMS now has a timeout, and notifications are sent after commit. Re-test receive latency once deployed. |
+| 🟠 **Data** | **Drivers table has no unique constraints** on licence number, email, or phone, despite the entity declaring them unique. | Duplicate drivers can be created. Do not rely on uniqueness in test assertions. |
+| 🔵 **Behaviour** | **Handover generated before truck arrival.** If an operator triggers a signature request from the Exit Paper button while a truck is assigned but not arrived, Approve delivery refuses with *"truck arrival must be recorded"*. | Only reachable off the normal path. Follow flow I1 in order and it will not occur. |
diff --git a/packages/types/src/freight/contracts.ts b/packages/types/src/freight/contracts.ts
index c6b97fab1..7d3962932 100644
--- a/packages/types/src/freight/contracts.ts
+++ b/packages/types/src/freight/contracts.ts
@@ -519,6 +519,8 @@ export interface IContract extends BaseEntity {
 
   companyId?: string | null;
   companyProfileId?: string | null;
+  /** Loaded company relation (list + detail responses include it). */
+  company?: BookingRequestCompany | null;
   isGovernment: boolean;
   governmentInstitution?: string | null;
 
@@ -703,6 +705,8 @@ export interface CreateBookingUnderContractDto {
   contractRouteId?: string;
   /** Binding shipment day. Omitted for intercity (DOMESTIC) bookings — staff assign a passing train later. */
   scheduledDate?: string;
+  /** "WITH_RETURN" | "WITHOUT_RETURN" — per-shipment override; falls back to the contract's equipment return. */
+  equipmentReturn?: string;
   containers?: CreateBookingContainerLineDto[];
   bulkLines?: CreateBulkLineDto[];
   notes?: string;
diff --git a/packages/types/src/freight/etrade.ts b/packages/types/src/freight/etrade.ts
index c125b75c5..67a7de28b 100644
--- a/packages/types/src/freight/etrade.ts
+++ b/packages/types/src/freight/etrade.ts
@@ -60,6 +60,12 @@ export interface ETradeCompanyInfo {
 }
 
 export interface CompanyRegistrationData {
+  /**
+   * The registered organization name — `ETradeCompanyInfo.BusinessName`, falling
+   * back to the licence's `TradeName`. Never the manager/owner's personal name;
+   * that is {@link managerName}.
+   */
+  companyName: string;
   licenceNumber: string;
   statusDescription: string;
   dateRegistered: string;
diff --git a/packages/types/src/freight/index.ts b/packages/types/src/freight/index.ts
index c5a1a364a..9e72cb365 100644
--- a/packages/types/src/freight/index.ts
+++ b/packages/types/src/freight/index.ts
@@ -70,10 +70,15 @@ export enum CargoUnitOfMeasure {
 export enum BookingStatus {
   Draft = "DRAFT",
   Submitted = "SUBMITTED",
+  /** Backoffice re-priced an approved request — customer must reconfirm. */
+  PriceChangedPendingConfirm = "PRICE_CHANGED_PENDING_CONFIRM",
   ChangesRequested = "CHANGES_REQUESTED",
   PendingApproval = "PENDING_APPROVAL",
   ApprovedPendingSignature = "APPROVED_PENDING_SIGNATURE",
   Approved = "APPROVED",
+  ReadyForAssignment = "READY_FOR_ASSIGNMENT",
+  WagonAssigned = "WAGON_ASSIGNED",
+  Invoiced = "INVOICED",
   ContractReady = "CONTRACT_READY",
   SignedCustomer = "SIGNED_CUSTOMER",
   FullyExecuted = "FULLY_EXECUTED",
@@ -95,7 +100,18 @@ export enum BookingStatus {
   Cancelled = "CANCELLED",
   PendingConsolidation = "PENDING_CONSOLIDATION",
   Consolidated = "CONSOLIDATED",
+  // Post counter-sign document-clearance gate (GL workflow).
+  AwaitingDocuments = "AWAITING_DOCUMENTS",
+  DocumentsUnderReview = "DOCUMENTS_UNDER_REVIEW",
+  ClearanceReady = "CLEARANCE_READY",
+  /** Road (truck) drawdown: waits for truck dispatch after Marketing accepts. */
+  RoadDispatchPending = "ROAD_DISPATCH_PENDING",
   TruckAssigned = "TRUCK_ASSIGNED",
+  OperationRequested = "OPERATION_REQUESTED",
+  /** Operations review gate: customer submitted a schedule day for capacity/doc/route review. */
+  OperationRequestPending = "OPERATION_REQUEST_PENDING",
+  OperationChangesRequested = "OPERATION_CHANGES_REQUESTED",
+  OperationPricePendingConfirm = "OPERATION_PRICE_PENDING_CONFIRM",
   /** General contract: paid umbrella contract that is accepting drawdown orders. */
   ContractActive = "CONTRACT_ACTIVE",
   /** General contract: closed because its quantity was exhausted (or period elapsed). */
diff --git a/packages/types/src/freight/notifications.ts b/packages/types/src/freight/notifications.ts
index 75513dcb9..ecd30c715 100644
--- a/packages/types/src/freight/notifications.ts
+++ b/packages/types/src/freight/notifications.ts
@@ -30,6 +30,7 @@ export enum NotificationPriority {
 export enum NotificationType {
   GENERIC = "GENERIC",
   // Portal-facing (customer)
+  ACCOUNT_STATUS = "ACCOUNT_STATUS",
   CLEARANCE_DECISION = "CLEARANCE_DECISION",
   DOCUMENT_ACTION = "DOCUMENT_ACTION",
   BOOKING_STATUS = "BOOKING_STATUS",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 069d12c32..ee0d655c0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -92,10 +92,10 @@ importers:
         version: 11.1.27(@nestjs/common@11.1.24(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/core@11.1.24)(@nestjs/platform-socket.io@11.1.27)(reflect-metadata@0.2.2)(rxjs@7.8.2)
       '@tria-plc/api-common':
         specifier: file:../../local-packages/tria-plc-api-common-1.4.3.tgz
-        version: file:local-packages/tria-plc-api-common-1.4.3.tgz(bad2eb10df48448775040459098de142)
+        version: file:local-packages/tria-plc-api-common-1.4.3.tgz(7d564ee2ec908e9fdc3461b5d35f6f17)
       '@tria-plc/iamapi-common':
-        specifier: file:../../local-packages/tria-plc-iamapi-common-0.7.7.tgz
-        version: file:local-packages/tria-plc-iamapi-common-0.7.7.tgz(578386f46cf99fd4720e3e99f196f69e)
+        specifier: file:../../local-packages/tria-plc-iamapi-common-0.7.9.tgz
+        version: file:local-packages/tria-plc-iamapi-common-0.7.9.tgz(578386f46cf99fd4720e3e99f196f69e)
       amqp-connection-manager:
         specifier: ^5.0.0
         version: 5.0.0(amqplib@2.0.1)
@@ -229,6 +229,9 @@ importers:
       '@hello-pangea/dnd':
         specifier: ^18.0.1
         version: 18.0.1(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@hookform/resolvers':
+        specifier: ^5.4.0
+        version: 5.4.0(react-hook-form@7.77.0(react@19.2.6))
       '@mantine/core':
         specifier: ^9.3.0
         version: 9.3.0(@mantine/hooks@9.3.0(react@19.2.6))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -238,12 +241,105 @@ importers:
       '@mantine/hooks':
         specifier: ^9.3.0
         version: 9.3.0(react@19.2.6)
+      '@radix-ui/react-accordion':
+        specifier: ^1.2.13
+        version: 1.2.13(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-alert-dialog':
+        specifier: ^1.1.16
+        version: 1.1.16(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-avatar':
+        specifier: ^1.1.12
+        version: 1.1.12(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-checkbox':
+        specifier: ^1.3.4
+        version: 1.3.4(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-collapsible':
+        specifier: ^1.1.13
+        version: 1.1.13(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-context-menu':
+        specifier: ^2.3.0
+        version: 2.3.0(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-dialog':
+        specifier: ^1.1.16
+        version: 1.1.16(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-dropdown-menu':
+        specifier: ^2.1.17
+        version: 2.1.17(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-hover-card':
+        specifier: ^1.1.16
+        version: 1.1.16(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-label':
+        specifier: ^2.1.9
+        version: 2.1.9(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-navigation-menu':
+        specifier: ^1.2.15
+        version: 1.2.15(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-popover':
+        specifier: ^1.1.16
+        version: 1.1.16(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-progress':
+        specifier: ^1.1.9
+        version: 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-radio-group':
+        specifier: ^1.4.0
+        version: 1.4.0(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-scroll-area':
+        specifier: ^1.2.11
+        version: 1.2.11(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-select':
+        specifier: ^2.3.0
+        version: 2.3.0(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-separator':
+        specifier: ^1.1.9
+        version: 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-slider':
+        specifier: ^1.4.0
+        version: 1.4.0(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-slot':
+        specifier: ^1.2.5
+        version: 1.2.5(@types/react@18.3.31)(react@19.2.6)
+      '@radix-ui/react-switch':
+        specifier: ^1.3.0
+        version: 1.3.0(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-tabs':
+        specifier: ^1.1.14
+        version: 1.1.14(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-toast':
+        specifier: ^1.2.16
+        version: 1.2.16(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-toggle-group':
+        specifier: ^1.1.12
+        version: 1.1.12(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-tooltip':
+        specifier: ^1.2.9
+        version: 1.2.9(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@react-pdf-viewer/core':
+        specifier: ^3.12.0
+        version: 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@react-pdf-viewer/default-layout':
+        specifier: ^3.12.0
+        version: 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@react-pdf-viewer/zoom':
+        specifier: ^3.12.0
+        version: 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@react-pdf/renderer':
+        specifier: ^4.5.1
+        version: 4.5.1(react@19.2.6)
+      '@reduxjs/toolkit':
+        specifier: ^2.12.0
+        version: 2.12.0(react-redux@9.3.0(@types/react@18.3.31)(react@19.2.6)(redux@5.0.1))(react@19.2.6)
       '@tabler/icons-react':
         specifier: ^3.44.0
         version: 3.44.0(react@19.2.6)
       '@tanstack/react-query':
         specifier: ^5.100.11
         version: 5.101.0(react@19.2.6)
+      '@tanstack/react-table':
+        specifier: ^8.21.3
+        version: 8.21.3(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@tinymce/tinymce-react':
+        specifier: ^6.3.0
+        version: 6.3.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(tinymce@8.6.0)
       '@tria-plc/iamui':
         specifier: file:../../../local-packages/tria-plc-iamui-0.1.1.tgz
         version: file:local-packages/tria-plc-iamui-0.1.1.tgz(0ce39b7e349029277dcd938d06eeb0f7)
@@ -259,27 +355,117 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      cmdk:
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      date-fns:
+        specifier: ^3.6.0
+        version: 3.6.0
+      dayjs:
+        specifier: ^1.11.21
+        version: 1.11.21
+      dompurify:
+        specifier: ^3.4.8
+        version: 3.4.8
+      ethiopian-calendar-date-converter:
+        specifier: ^2.1.6
+        version: 2.1.6
+      file-type:
+        specifier: ^18.7.0
+        version: 18.7.0
+      framer-motion:
+        specifier: ^12.40.0
+        version: 12.40.0(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      html2canvas:
+        specifier: ^1.4.1
+        version: 1.4.1
+      i18next:
+        specifier: ^26.3.5
+        version: 26.3.5(typescript@5.9.3)
+      i18next-browser-languagedetector:
+        specifier: ^8.2.1
+        version: 8.2.1
+      jquery:
+        specifier: ^3.7.1
+        version: 3.7.1
+      js-cookie:
+        specifier: ^3.0.8
+        version: 3.0.8
+      jspdf:
+        specifier: ^3.0.4
+        version: 3.0.4
       libphonenumber-js:
         specifier: ^1.12.24
         version: 1.13.6
+      lodash:
+        specifier: ^4.18.1
+        version: 4.18.1
       lucide-react:
         specifier: ^1.14.0
         version: 1.17.0(react@19.2.6)
+      next-themes:
+        specifier: ^0.4.6
+        version: 0.4.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      pdf-lib:
+        specifier: ^1.17.1
+        version: 1.17.1
+      prop-types:
+        specifier: ^15.8.1
+        version: 15.8.1
+      qs:
+        specifier: ^6.15.2
+        version: 6.15.2
       radix-ui:
         specifier: ^1.4.3
         version: 1.5.0(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       react:
         specifier: 19.2.6
         version: 19.2.6
+      react-css-nocode-editor:
+        specifier: ^1.0.13
+        version: 1.0.13(@babel/core@7.29.7)(react-dom@19.2.6(react@19.2.6))(react-is@19.2.7)(react@19.2.6)
+      react-day-picker:
+        specifier: ^9.14.0
+        version: 9.14.0(react@19.2.6)
       react-dom:
         specifier: 19.2.6
         version: 19.2.6(react@19.2.6)
+      react-dropzone:
+        specifier: ^14.4.1
+        version: 14.4.1(react@19.2.6)
+      react-hook-form:
+        specifier: ^7.77.0
+        version: 7.77.0(react@19.2.6)
       react-hot-toast:
         specifier: ^2.6.0
         version: 2.6.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react-i18next:
+        specifier: ^17.0.8
+        version: 17.0.8(i18next@26.3.5(typescript@5.9.3))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@5.9.3)
+      react-icons:
+        specifier: ^5.6.0
+        version: 5.6.0(react@19.2.6)
+      react-image-crop:
+        specifier: ^11.0.10
+        version: 11.0.10(react@19.2.6)
+      react-intersection-observer:
+        specifier: ^9.16.0
+        version: 9.16.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react-pdf:
+        specifier: ^10.4.1
+        version: 10.4.1(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react-pdf-html:
+        specifier: ^2.1.5
+        version: 2.1.5(@react-pdf/renderer@4.5.1(react@19.2.6))(react@19.2.6)
+      react-resizable-panels:
+        specifier: ^3.0.6
+        version: 3.0.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       react-router-dom:
         specifier: ^6.27.0
         version: 6.30.4(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react-signature-canvas:
+        specifier: 1.1.0-alpha.2
+        version: 1.1.0-alpha.2(@types/prop-types@15.7.15)(@types/react@18.3.31)(prop-types@15.8.1)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       recharts:
         specifier: ^3.8.1
         version: 3.8.1(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react-is@19.2.7)(react@19.2.6)(redux@5.0.1)
@@ -298,6 +484,12 @@ importers:
       tinymce:
         specifier: ^8.6.0
         version: 8.6.0
+      xlsx:
+        specifier: ^0.18.5
+        version: 0.18.5
+      zod:
+        specifier: ^3.25.76
+        version: 3.25.76
       zustand:
         specifier: ^5.0.0
         version: 5.0.14(@types/react@18.3.31)(immer@11.1.8)(react@19.2.6)(use-sync-external-store@1.6.0(react@19.2.6))
@@ -314,6 +506,15 @@ importers:
       '@types/google.maps':
         specifier: ^3.65.2
         version: 3.65.2
+      '@types/jquery':
+        specifier: ^3.5.34
+        version: 3.5.34
+      '@types/js-cookie':
+        specifier: ^3.0.6
+        version: 3.0.6
+      '@types/lodash':
+        specifier: ^4.17.24
+        version: 4.17.24
       '@types/react':
         specifier: ^18.3.11
         version: 18.3.31
@@ -370,7 +571,7 @@ importers:
         version: 5.101.0(react@19.2.6)
       '@tria-plc/iamui':
         specifier: file:../../../local-packages/tria-plc-iamui-0.1.1.tgz
-        version: file:local-packages/tria-plc-iamui-0.1.1.tgz(0ce39b7e349029277dcd938d06eeb0f7)
+        version: file:local-packages/tria-plc-iamui-0.1.1.tgz(a5d0bdee55164ae56064fb273b530e00)
       '@vis.gl/react-google-maps':
         specifier: ^1.8.3
         version: 1.8.3(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -419,6 +620,9 @@ importers:
       tailwind-merge:
         specifier: ^3.6.0
         version: 3.6.0
+      xlsx:
+        specifier: ^0.18.5
+        version: 0.18.5
       zod:
         specifier: ^4.4.3
         version: 4.4.3
@@ -472,6 +676,67 @@ importers:
         specifier: ^2.1.2
         version: 2.1.9(@types/node@24.13.1)(jsdom@25.0.1)(lightningcss@1.32.0)(msw@2.14.6(@types/node@24.13.1)(typescript@5.9.3))(terser@5.48.0)
 
+  apps/edr-gps-tracker:
+    dependencies:
+      '@edr/api-common':
+        specifier: workspace:*
+        version: link:../../packages/api-common
+      '@nestjs/common':
+        specifier: ^11.0.0
+        version: 11.1.24(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2)
+      '@nestjs/config':
+        specifier: ^4.0.0
+        version: 4.0.4(@nestjs/common@11.1.24(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2))(rxjs@7.8.2)
+      '@nestjs/core':
+        specifier: ^11.0.0
+        version: 11.1.24(@nestjs/common@11.1.24(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/microservices@11.1.24)(@nestjs/platform-express@11.1.24)(@nestjs/websockets@11.1.27)(reflect-metadata@0.2.2)(rxjs@7.8.2)
+      '@nestjs/typeorm':
+        specifier: ^11.0.1
+        version: 11.0.1(@nestjs/common@11.1.24(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/core@11.1.24)(reflect-metadata@0.2.2)(rxjs@7.8.2)(typeorm@0.3.30(babel-plugin-macros@3.1.0)(pg@8.21.0)(ts-node@10.9.2(@types/node@20.19.42)(typescript@5.9.3)))
+      dotenv:
+        specifier: ^17.4.2
+        version: 17.4.2
+      pg:
+        specifier: ^8.13.0
+        version: 8.21.0
+      reflect-metadata:
+        specifier: ^0.2.2
+        version: 0.2.2
+      rxjs:
+        specifier: ^7.8.1
+        version: 7.8.2
+      typeorm:
+        specifier: ^0.3.30
+        version: 0.3.30(babel-plugin-macros@3.1.0)(pg@8.21.0)(ts-node@10.9.2(@types/node@20.19.42)(typescript@5.9.3))
+    devDependencies:
+      '@edr/eslint-config':
+        specifier: workspace:*
+        version: link:../../packages/config/eslint-config
+      '@edr/tsconfig':
+        specifier: workspace:*
+        version: link:../../packages/config/tsconfig
+      '@nestjs/cli':
+        specifier: ^11.0.0
+        version: 11.0.21(@types/node@20.19.42)(prettier@3.8.3)
+      '@nestjs/schematics':
+        specifier: ^11.0.0
+        version: 11.1.0(chokidar@4.0.3)(prettier@3.8.3)(typescript@5.9.3)
+      '@types/node':
+        specifier: ^20.14.0
+        version: 20.19.42
+      '@types/pg':
+        specifier: ^8.6.7
+        version: 8.20.0
+      ts-node:
+        specifier: ^10.9.2
+        version: 10.9.2(@types/node@20.19.42)(typescript@5.9.3)
+      tsconfig-paths:
+        specifier: ^4.2.0
+        version: 4.2.0
+      typescript:
+        specifier: ^5.5.4
+        version: 5.9.3
+
   apps/edr-passenger-api:
     dependencies:
       '@edr/types':
@@ -1457,6 +1722,9 @@ packages:
     resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
     engines: {node: '>=18'}
 
+  '@date-fns/tz@1.5.0':
+    resolution: {integrity: sha512-lwYN/vDPeNRULcepoE/LO2Pgx+7/RV+S9ARfbc9lr2DtGkOD7pAiruHvbR1RX3Qyf6ja47EWJDMsNK5vK08DJg==}
+
   '@dotenvx/dotenvx@1.71.0':
     resolution: {integrity: sha512-KEUw/mGu+EDRhYWRTNGHIimVCs9NvMFaIXOGrHSXoCteKLE5EsJnmPjOPpYorjXVg/0xG0fbdVw720azw1z4ag==}
     hasBin: true
@@ -3948,6 +4216,10 @@ packages:
   '@swc/helpers@0.5.5':
     resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==}
 
+  '@tabby_ai/hijri-converter@1.0.5':
+    resolution: {integrity: sha512-r5bClKrcIusDoo049dSL8CawnHR6mRdDwhlQuIgZRNty68q0x8k3Lf1BtPAMxRf/GgnHBnIO4ujd3+GQdLWzxQ==}
+    engines: {node: '>=16.0.0'}
+
   '@tabler/icons-react@3.44.0':
     resolution: {integrity: sha512-8+rvzBbVm/1Z3sG3x7GUNAaxIKxwgz8xaMhRs23nrCnMTKRFAhEC+82zAIFeAA0seXdrAGX5HFCkaLpGK2rVHg==}
     peerDependencies:
@@ -4143,28 +4415,6 @@ packages:
       rxjs: ^7.8.0
       typeorm: ^0.3.0
 
-  '@tria-plc/iamapi-common@file:local-packages/tria-plc-iamapi-common-0.7.7.tgz':
-    resolution: {integrity: sha512-zW7dIEnoai9NSagFsjdH3CyU4dizhFnV9AkO0sOb8MJhFGaifFaMLyWkB9QMQvUIxFRziOcqw3vR0yjqLmTNPQ==, tarball: file:local-packages/tria-plc-iamapi-common-0.7.7.tgz}
-    version: 0.7.7
-    engines: {node: '>=20'}
-    peerDependencies:
-      '@nestjs/axios': ^4.0.0
-      '@nestjs/common': ^11.0.0
-      '@nestjs/core': ^11.0.0
-      '@nestjs/jwt': ^11.0.0
-      '@nestjs/microservices': ^11.0.0
-      '@nestjs/passport': ^11.0.0
-      '@nestjs/swagger': ^11.0.0
-      '@nestjs/throttler': ^6.0.0
-      '@nestjs/typeorm': ^11.0.0
-      '@tria-plc/api-common': '*'
-      axios: ^1.9.0
-      class-transformer: ^0.5.1
-      class-validator: ^0.14.1
-      reflect-metadata: ^0.2.0
-      rxjs: ^7.8.0
-      typeorm: ^0.3.0
-
   '@tria-plc/iamapi-common@file:local-packages/tria-plc-iamapi-common-0.7.9.tgz':
     resolution: {integrity: sha512-Y6SDEJUR4NcwLXrRJFZ+SbknpczybMwp59cR000vjFEu09RClLr5Gzv8TaJbOeDytyhdgjkZriVNPb2Dt6tipA==, tarball: file:local-packages/tria-plc-iamapi-common-0.7.9.tgz}
     version: 0.7.9
@@ -4354,9 +4604,15 @@ packages:
   '@types/jest@29.5.14':
     resolution: {integrity: sha512-ZN+4sdnLUbo8EVvVc2ao0GFW6oVrQRPn4K2lglySj7APvSrgzxHiNNK99us4WDMi57xxA2yggblIAMNhXOotLQ==}
 
+  '@types/jquery@3.5.34':
+    resolution: {integrity: sha512-3m3939S3erqmTLJANS/uy0B6V7BorKx7RorcGZVjZ62dF5PAGbKEDZK1CuLtKombJkFA2T1jl8LAIIs7IV6gBQ==}
+
   '@types/jquery@4.0.1':
     resolution: {integrity: sha512-9a59A/tycXgYuPABcp6/3spSShn0NT2UOM4EfHvMumjYi4lJWTsK5SZWjhx3yRm9IHGCeWXdV2YfNsrWrft/CA==}
 
+  '@types/js-cookie@3.0.6':
+    resolution: {integrity: sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
@@ -4445,6 +4701,9 @@ packages:
   '@types/signature_pad@2.3.6':
     resolution: {integrity: sha512-v3j92gCQJoxomHhd+yaG4Vsf8tRS/XbzWKqDv85UsqjMGy4zhokuwKe4b6vhbgncKkh+thF+gpz6+fypTtnFqQ==}
 
+  '@types/sizzle@2.3.10':
+    resolution: {integrity: sha512-TC0dmN0K8YcWEAEfiPi5gJP14eJe30TTGjkvek3iM/1NdHHsdCA/Td6GvNndMOo/iSnIsZ4HuuhrYPDAmbxzww==}
+
   '@types/stack-utils@2.0.3':
     resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
 
@@ -6011,9 +6270,15 @@ packages:
     resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
     engines: {node: '>= 0.4'}
 
+  date-fns-jalali@4.1.0-0:
+    resolution: {integrity: sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==}
+
   date-fns@3.6.0:
     resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==}
 
+  date-fns@4.4.0:
+    resolution: {integrity: sha512-+1UMbeh68lH1SegH83CGWwpb6OHHbpSgr3+s5Eww5M4CAgswBpoWS0AjTOfEJ33HiYKz1hdj/KTFprzXHmq/6w==}
+
   date.js@0.3.3:
     resolution: {integrity: sha512-HgigOS3h3k6HnW011nAb43c5xx5rBXk8P2v/WIT9Zv4koIaVXiH2BURguI78VVp+5Qc076T7OR378JViCnZtBw==}
 
@@ -7283,6 +7548,14 @@ packages:
       typescript:
         optional: true
 
+  i18next@26.3.5:
+    resolution: {integrity: sha512-cd5lgkvjYQAPDfP3bbrAIE1wJmjTIlsrsjDqlvsHn4wFAerP5O0NfAe8RiDcXRfukN5ETe7Tlmfp6DkyuqDn6Q==}
+    peerDependencies:
+      typescript: ^5 || ^6
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   iconv-lite@0.4.24:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
@@ -9373,6 +9646,12 @@ packages:
       date-fns: ^2.28.0 || ^3.0.0
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  react-day-picker@9.14.0:
+    resolution: {integrity: sha512-tBaoDWjPwe0M5pGrum4H0SR6Lyk+BO9oHnp9JbKpGKW2mlraNPgP9BMfsg5pWpwrssARmeqk7YBl2oXutZTaHA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: '>=16.8.0'
+
   react-dom@18.3.1:
     resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
     peerDependencies:
@@ -9418,6 +9697,22 @@ packages:
       typescript:
         optional: true
 
+  react-i18next@17.0.8:
+    resolution: {integrity: sha512-0ooKbGLU8JXhe1zwpQUWIeXSgLPOfwJmgheWRIUpcoA0CpyabpGhayjdG+/eA5esC1AQ8h2jWpXjJfzQzeDOCw==}
+    peerDependencies:
+      i18next: '>= 26.2.0'
+      react: '>= 16.8.0'
+      react-dom: '*'
+      react-native: '*'
+      typescript: ^5 || ^6
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+      react-native:
+        optional: true
+      typescript:
+        optional: true
+
   react-icons@5.6.0:
     resolution: {integrity: sha512-RH93p5ki6LfOiIt0UtDyNg/cee+HLVR6cHHtW3wALfo+eOHTp8RnU2kRkI6E+H19zMIs03DyxUG/GfZMOGvmiA==}
     peerDependencies:
@@ -11912,6 +12207,8 @@ snapshots:
 
   '@csstools/css-tokenizer@3.0.4': {}
 
+  '@date-fns/tz@1.5.0': {}
+
   '@dotenvx/dotenvx@1.71.0':
     dependencies:
       commander: 11.1.0
@@ -15323,6 +15620,8 @@ snapshots:
       '@swc/counter': 0.1.3
       tslib: 2.8.1
 
+  '@tabby_ai/hijri-converter@1.0.5': {}
+
   '@tabler/icons-react@3.44.0(react@19.2.6)':
     dependencies:
       '@tabler/icons': 3.44.0
@@ -15470,6 +15769,14 @@ snapshots:
     optionalDependencies:
       tinymce: 7.9.3
 
+  '@tinymce/tinymce-react@6.3.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(tinymce@8.6.0)':
+    dependencies:
+      prop-types: 15.8.1
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+    optionalDependencies:
+      tinymce: 8.6.0
+
   '@tokenizer/inflate@0.4.1':
     dependencies:
       debug: 4.4.3(supports-color@5.5.0)
@@ -15525,7 +15832,7 @@ snapshots:
       - debug
       - supports-color
 
-  '@tria-plc/api-common@file:local-packages/tria-plc-api-common-1.4.3.tgz(bad2eb10df48448775040459098de142)':
+  '@tria-plc/api-common@file:local-packages/tria-plc-api-common-1.4.3.tgz(7d564ee2ec908e9fdc3461b5d35f6f17)':
     dependencies:
       '@nestjs/axios': 4.0.1(@nestjs/common@11.1.24(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2))(axios@1.17.0)(rxjs@7.8.2)
       '@nestjs/common': 11.1.24(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2)
@@ -15536,7 +15843,7 @@ snapshots:
       '@nestjs/swagger': 11.4.4(@nestjs/common@11.1.24(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/core@11.1.24)(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)
       '@nestjs/throttler': 6.5.0(@nestjs/common@11.1.24(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/core@11.1.24)(reflect-metadata@0.2.2)
       '@nestjs/typeorm': 11.0.1(@nestjs/common@11.1.24(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/core@11.1.24)(reflect-metadata@0.2.2)(rxjs@7.8.2)(typeorm@0.3.30(babel-plugin-macros@3.1.0)(pg@8.21.0)(ts-node@10.9.2(@types/node@20.19.42)(typescript@5.9.3)))
-      '@tria-plc/iamapi-common': file:local-packages/tria-plc-iamapi-common-0.7.7.tgz(578386f46cf99fd4720e3e99f196f69e)
+      '@tria-plc/iamapi-common': file:local-packages/tria-plc-iamapi-common-0.7.9.tgz(578386f46cf99fd4720e3e99f196f69e)
       argon2: 0.43.1
       axios: 1.17.0
       change-case: 5.4.4
@@ -15569,7 +15876,7 @@ snapshots:
       - debug
       - supports-color
 
-  '@tria-plc/iamapi-common@file:local-packages/tria-plc-iamapi-common-0.7.7.tgz(578386f46cf99fd4720e3e99f196f69e)':
+  '@tria-plc/iamapi-common@file:local-packages/tria-plc-iamapi-common-0.7.9.tgz(578386f46cf99fd4720e3e99f196f69e)':
     dependencies:
       '@nestjs/axios': 4.0.1(@nestjs/common@11.1.24(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2))(axios@1.17.0)(rxjs@7.8.2)
       '@nestjs/common': 11.1.24(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2)
@@ -15580,7 +15887,7 @@ snapshots:
       '@nestjs/swagger': 11.4.4(@nestjs/common@11.1.24(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/core@11.1.24)(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)
       '@nestjs/throttler': 6.5.0(@nestjs/common@11.1.24(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/core@11.1.24)(reflect-metadata@0.2.2)
       '@nestjs/typeorm': 11.0.1(@nestjs/common@11.1.24(class-transformer@0.5.1)(class-validator@0.14.4)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/core@11.1.24)(reflect-metadata@0.2.2)(rxjs@7.8.2)(typeorm@0.3.30(babel-plugin-macros@3.1.0)(pg@8.21.0)(ts-node@10.9.2(@types/node@20.19.42)(typescript@5.9.3)))
-      '@tria-plc/api-common': file:local-packages/tria-plc-api-common-1.4.3.tgz(bad2eb10df48448775040459098de142)
+      '@tria-plc/api-common': file:local-packages/tria-plc-api-common-1.4.3.tgz(7d564ee2ec908e9fdc3461b5d35f6f17)
       api-common: 1.2.2
       argon2: 0.43.1
       axios: 1.17.0
@@ -15763,6 +16070,130 @@ snapshots:
       - utf-8-validate
       - vite
 
+  '@tria-plc/iamui@file:local-packages/tria-plc-iamui-0.1.1.tgz(a5d0bdee55164ae56064fb273b530e00)':
+    dependencies:
+      '@emotion/react': 11.14.0(@types/react@18.3.31)(react@19.2.6)
+      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@18.3.31)(react@19.2.6))(@types/react@18.3.31)(react@19.2.6)
+      '@hookform/resolvers': 5.4.0(react-hook-form@7.77.0(react@19.2.6))
+      '@lottiefiles/react-lottie-player': 3.6.0(react@19.2.6)
+      '@mantine/charts': 7.17.8(@mantine/core@7.17.8(@mantine/hooks@7.17.8(react@19.2.6))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(@mantine/hooks@7.17.8(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(recharts@3.8.1(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react-is@19.2.7)(react@19.2.6)(redux@5.0.1))
+      '@mantine/core': 7.17.8(@mantine/hooks@7.17.8(react@19.2.6))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@mantine/dates': 7.17.8(@mantine/core@7.17.8(@mantine/hooks@7.17.8(react@19.2.6))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(@mantine/hooks@7.17.8(react@19.2.6))(dayjs@1.11.21)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@mantine/hooks': 7.17.8(react@19.2.6)
+      '@mantine/notifications': 7.17.8(@mantine/core@7.17.8(@mantine/hooks@7.17.8(react@19.2.6))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(@mantine/hooks@7.17.8(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-accordion': 1.2.13(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-alert-dialog': 1.1.16(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-avatar': 1.1.12(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-checkbox': 1.3.4(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-collapsible': 1.1.13(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-context-menu': 2.3.0(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-dialog': 1.1.16(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-dropdown-menu': 2.1.17(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-hover-card': 1.1.16(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-label': 2.1.9(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-navigation-menu': 1.2.15(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-popover': 1.1.16(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-progress': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-radio-group': 1.4.0(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-scroll-area': 1.2.11(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-select': 2.3.0(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-separator': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-slot': 1.2.5(@types/react@18.3.31)(react@19.2.6)
+      '@radix-ui/react-switch': 1.3.0(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-tabs': 1.1.14(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-toast': 1.2.16(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@radix-ui/react-tooltip': 1.2.9(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@react-pdf-viewer/default-layout': 3.12.0(pdfjs-dist@5.4.296)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@react-pdf/renderer': 4.5.1(react@19.2.6)
+      '@reduxjs/toolkit': 2.12.0(react-redux@9.3.0(@types/react@18.3.31)(react@19.2.6)(redux@5.0.1))(react@19.2.6)
+      '@tabler/icons-react': 3.44.0(react@19.2.6)
+      '@tailwindcss/vite': 4.3.0(vite@5.4.21(@types/node@24.13.1)(lightningcss@1.32.0)(terser@5.48.0))
+      '@tanstack/react-query': 5.101.0(react@19.2.6)
+      '@tanstack/react-query-devtools': 5.101.0(@tanstack/react-query@5.101.0(react@19.2.6))(react@19.2.6)
+      '@tanstack/react-table': 8.21.3(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@tinymce/tinymce-react': 6.3.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(tinymce@7.9.3)
+      '@types/dompurify': 3.2.0
+      '@types/node': 24.13.1
+      '@types/tinymce': 4.6.9
+      axios: 1.17.0
+      class-variance-authority: 0.7.1
+      clsx: 2.1.1
+      cmdk: 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      date-fns: 3.6.0
+      dayjs: 1.11.21
+      dompurify: 3.4.8
+      ethiopian-calendar-date-converter: 2.1.6
+      ethiopian-calendar-new: 1.1.0
+      file-type: 18.7.0
+      framer-motion: 12.40.0(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      html2canvas: 1.4.1
+      i18next: 25.10.10(typescript@5.9.3)
+      i18next-browser-languagedetector: 8.2.1
+      jquery: 3.7.1
+      js-cookie: 3.0.8
+      jspdf: 3.0.4
+      lodash: 4.18.1
+      lucide-react: 0.513.0(react@19.2.6)
+      mantine-react-table: 2.0.0-beta.9(@mantine/core@7.17.8(@mantine/hooks@7.17.8(react@19.2.6))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(@mantine/dates@7.17.8(@mantine/core@7.17.8(@mantine/hooks@7.17.8(react@19.2.6))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(@mantine/hooks@7.17.8(react@19.2.6))(dayjs@1.11.21)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(@mantine/hooks@7.17.8(react@19.2.6))(@tabler/icons-react@3.44.0(react@19.2.6))(clsx@2.1.1)(dayjs@1.11.21)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      mui-ethiopian-datepicker: 0.3.2(4b3af212eafdf0059f009b005d7e343d)
+      next-themes: 0.4.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      path: 0.12.7
+      pdf-lib: 1.17.1
+      qs: 6.15.2
+      react: 19.2.6
+      react-cookie: 8.1.2(@types/react@18.3.31)(react@19.2.6)
+      react-css-nocode-editor: 1.0.13(react-dom@19.2.6(react@19.2.6))(react-is@19.2.7)(react@19.2.6)
+      react-day-picker: 8.10.2(date-fns@3.6.0)(react@19.2.6)
+      react-dom: 19.2.6(react@19.2.6)
+      react-dropzone: 14.4.1(react@19.2.6)
+      react-hook-form: 7.77.0(react@19.2.6)
+      react-i18next: 15.7.4(i18next@25.10.10(typescript@5.9.3))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@5.9.3)
+      react-icons: 5.6.0(react@19.2.6)
+      react-image-crop: 11.0.10(react@19.2.6)
+      react-intersection-observer: 9.16.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react-pdf: 10.4.1(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react-pdf-html: 2.1.5(@react-pdf/renderer@4.5.1(react@19.2.6))(react@19.2.6)
+      react-redux: 9.3.0(@types/react@18.3.31)(react@19.2.6)(redux@5.0.1)
+      react-resizable-panels: 3.0.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react-router-dom: 7.17.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react-signature-canvas: 1.1.0-alpha.2(@types/prop-types@15.7.15)(@types/react@18.3.31)(prop-types@15.8.1)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      recharts: 3.8.1(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react-is@19.2.7)(react@19.2.6)(redux@5.0.1)
+      rollup-plugin-visualizer: 7.0.1(rollup@4.61.1)
+      socket.io-client: 4.8.3
+      sonner: 2.0.7(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      tailwind-merge: 3.6.0
+      tailwind-scrollbar-hide: 4.0.0(tailwindcss@4.3.0)
+      tailwindcss: 4.3.0
+      tailwindcss-animate: 1.0.7(tailwindcss@4.3.0)
+      tinymce: 7.9.3
+      url: 0.11.4
+      vaul: 1.1.2(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      xlsx: 0.18.5
+      zod: 3.25.76
+    transitivePeerDependencies:
+      - '@babel/core'
+      - '@emotion/is-prop-valid'
+      - '@mui/icons-material'
+      - '@mui/material'
+      - '@mui/x-date-pickers'
+      - '@types/prop-types'
+      - '@types/react'
+      - '@types/react-dom'
+      - bufferutil
+      - debug
+      - pdfjs-dist
+      - prop-types
+      - react-is
+      - react-native
+      - redux
+      - rolldown
+      - rollup
+      - supports-color
+      - typescript
+      - utf-8-validate
+      - vite
+
   '@ts-morph/common@0.27.0':
     dependencies:
       fast-glob: 3.3.3
@@ -15943,8 +16374,14 @@ snapshots:
       expect: 29.7.0
       pretty-format: 29.7.0
 
+  '@types/jquery@3.5.34':
+    dependencies:
+      '@types/sizzle': 2.3.10
+
   '@types/jquery@4.0.1': {}
 
+  '@types/js-cookie@3.0.6': {}
+
   '@types/json-schema@7.0.15': {}
 
   '@types/json5@0.0.29': {}
@@ -16037,6 +16474,8 @@ snapshots:
 
   '@types/signature_pad@2.3.6': {}
 
+  '@types/sizzle@2.3.10': {}
+
   '@types/stack-utils@2.0.3': {}
 
   '@types/statuses@2.0.6': {}
@@ -16941,6 +17380,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  babel-plugin-styled-components@2.3.0(styled-components@5.3.11(react-dom@19.2.6(react@19.2.6))(react-is@19.2.7)(react@19.2.6))(supports-color@5.5.0):
+    dependencies:
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-module-imports': 7.29.7(supports-color@5.5.0)
+      '@babel/plugin-syntax-jsx': 7.29.7(@babel/core@7.29.7)
+      picomatch: 4.0.4
+      styled-components: 5.3.11(react-dom@19.2.6(react@19.2.6))(react-is@19.2.7)(react@19.2.6)
+    transitivePeerDependencies:
+      - supports-color
+
   babel-polyfill@6.26.0:
     dependencies:
       babel-runtime: 6.26.0
@@ -17747,8 +18196,12 @@ snapshots:
       es-errors: 1.3.0
       is-data-view: 1.0.2
 
+  date-fns-jalali@4.1.0-0: {}
+
   date-fns@3.6.0: {}
 
+  date-fns@4.4.0: {}
+
   date.js@0.3.3:
     dependencies:
       debug: 3.1.0
@@ -19328,6 +19781,10 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.3
 
+  i18next@26.3.5(typescript@5.9.3):
+    optionalDependencies:
+      typescript: 5.9.3
+
   iconv-lite@0.4.24:
     dependencies:
       safer-buffer: 2.1.2
@@ -21694,11 +22151,28 @@ snapshots:
       - '@babel/core'
       - react-is
 
+  react-css-nocode-editor@1.0.13(react-dom@19.2.6(react@19.2.6))(react-is@19.2.7)(react@19.2.6):
+    dependencies:
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+      styled-components: 5.3.11(react-dom@19.2.6(react@19.2.6))(react-is@19.2.7)(react@19.2.6)
+    transitivePeerDependencies:
+      - '@babel/core'
+      - react-is
+
   react-day-picker@8.10.2(date-fns@3.6.0)(react@19.2.6):
     dependencies:
       date-fns: 3.6.0
       react: 19.2.6
 
+  react-day-picker@9.14.0(react@19.2.6):
+    dependencies:
+      '@date-fns/tz': 1.5.0
+      '@tabby_ai/hijri-converter': 1.0.5
+      date-fns: 4.4.0
+      date-fns-jalali: 4.1.0-0
+      react: 19.2.6
+
   react-dom@18.3.1(react@18.3.1):
     dependencies:
       loose-envify: 1.4.0
@@ -21742,6 +22216,17 @@ snapshots:
       react-dom: 19.2.6(react@19.2.6)
       typescript: 5.9.3
 
+  react-i18next@17.0.8(i18next@26.3.5(typescript@5.9.3))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(typescript@5.9.3):
+    dependencies:
+      '@babel/runtime': 7.29.7
+      html-parse-stringify: 3.0.1
+      i18next: 26.3.5(typescript@5.9.3)
+      react: 19.2.6
+      use-sync-external-store: 1.6.0(react@19.2.6)
+    optionalDependencies:
+      react-dom: 19.2.6(react@19.2.6)
+      typescript: 5.9.3
+
   react-icons@5.6.0(react@19.2.6):
     dependencies:
       react: 19.2.6
@@ -22864,6 +23349,24 @@ snapshots:
     transitivePeerDependencies:
       - '@babel/core'
 
+  styled-components@5.3.11(react-dom@19.2.6(react@19.2.6))(react-is@19.2.7)(react@19.2.6):
+    dependencies:
+      '@babel/helper-module-imports': 7.29.7(supports-color@5.5.0)
+      '@babel/traverse': 7.29.7(supports-color@5.5.0)
+      '@emotion/is-prop-valid': 1.4.0
+      '@emotion/stylis': 0.8.5
+      '@emotion/unitless': 0.7.5
+      babel-plugin-styled-components: 2.3.0(styled-components@5.3.11(react-dom@19.2.6(react@19.2.6))(react-is@19.2.7)(react@19.2.6))(supports-color@5.5.0)
+      css-to-react-native: 3.2.0
+      hoist-non-react-statics: 3.3.2
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+      react-is: 19.2.7
+      shallowequal: 1.1.0
+      supports-color: 5.5.0
+    transitivePeerDependencies:
+      - '@babel/core'
+
   styled-jsx@5.1.1(babel-plugin-macros@3.1.0)(react@18.3.1):
     dependencies:
       client-only: 0.0.1